/* ===================================================================
   KreutzerWerk — Erscheinungsbild der Website
   ===================================================================
   Aufgebaut auf zwei Farben aus dem Logo: dem dunklen Anthrazit der
   Schrift und dem Orange des Bogens. Beide kommen aus den Einstellungen
   und werden von inc/head.php als --kw-dunkel und --kw-akzent gesetzt;
   alles Weitere leitet sich hier davon ab. Wer die Farben im Editor
   ändert, ändert damit die ganze Website.

   Bootstrap 5 liefert nur das Raster und ein paar Hilfsklassen, damit im
   Editor geschriebene Inhalte (row/col) funktionieren. Menü, Aufklappen
   und Bildergalerie erledigt assets/js/kreutzerwerk.js selbst — deshalb
   wird das JavaScript von Bootstrap nicht geladen.
   =================================================================== */

:root {
    /* Aus dem Logo gemessen. Vorbelegung — head.php überschreibt beide
       mit dem, was in den Einstellungen steht. */
    --kw-dunkel: #141C23;
    --kw-akzent: #E7780F;

    /* Abstufungen, die sich aus den beiden ergeben */
    --kw-dunkel-weich: #232E38;
    --kw-akzent-dunkel: #C4640A;
    --kw-akzent-blass: rgba(231, 120, 15, .10);

    /* Orange als SCHRIFT auf hellem Grund — deutlich dunkler als die
       Markenfarbe. Das Markenorange erreicht auf Weiß nur 2,96:1 und
       bleibt damit unter den 4,5:1, die die Richtlinien für Text
       verlangen; dieser Ton schafft 5,1:1 und auf dem blassen
       Orangegrund der Etiketten noch 4,7:1. Für Flächen, Linien und
       Ränder bleibt --kw-akzent. */
    --kw-akzent-text: #AC5607;

    --kw-text: #22303C;
    --kw-text-leise: #5C6B7A;
    --kw-linie: #E2E7EC;
    --kw-flaeche: #F5F7F9;
    --kw-weiss: #FFFFFF;

    /* Die Website ist durchgehend hell gestaltet. Ohne diese Angabe
       färben manche Browser bei dunkler Systemeinstellung die eigenen
       Bedienelemente des Formulars ein und stellen sie neben die hellen
       Felder. */
    color-scheme: light;

    --kw-radius: 6px;
    --kw-radius-gross: 10px;
    --kw-schatten: 0 1px 2px rgba(20, 28, 35, .06), 0 4px 16px rgba(20, 28, 35, .07);
    --kw-schatten-hoch: 0 4px 10px rgba(20, 28, 35, .09), 0 16px 40px rgba(20, 28, 35, .12);

    --kw-kopf-hoehe: 78px;
    --kw-breite: 1240px;
}

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--kw-text);
    background: var(--kw-weiss);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--kw-akzent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--kw-akzent-dunkel); }

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--kw-dunkel);
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }

/* Sprungmarke für die Tastaturbedienung — sichtbar erst beim Fokus. */
.sprungmarke {
    position: absolute; left: -9999px; top: 0; z-index: 1100;
    background: var(--kw-akzent); color: #fff; padding: 12px 20px;
    font-weight: 600; text-decoration: none;
}
.sprungmarke:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--kw-akzent); outline-offset: 2px; }

/* Nur für Vorleseprogramme: sichtbar ist die Überschrift überflüssig, weil
   sie über der Liste wiederholte, was schon im Seitentitel steht — für die
   Überschriftenfolge wird sie aber gebraucht. */
.nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
   Wiederkehrende Bausteine
   ------------------------------------------------------------------ */
.huelle {
    width: 100%;
    max-width: var(--kw-breite);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Ein Abschnitt der Seite. .hell und .dunkel setzen den Grund. */
.abschnitt { padding: clamp(48px, 6vw, 88px) 0; }
.abschnitt.hell   { background: var(--kw-flaeche); }
.abschnitt.dunkel { background: var(--kw-dunkel); color: rgba(255, 255, 255, .84); }
.abschnitt.dunkel h1, .abschnitt.dunkel h2, .abschnitt.dunkel h3 { color: #fff; }
.abschnitt.dunkel a { color: var(--kw-akzent); }

/* Überschrift eines Abschnitts, mit dem kurzen Strich in Akzentfarbe,
   der auch im Logo unter dem Schriftzug steht. */
.abschnitt-kopf { max-width: 720px; margin-bottom: 42px; }
.abschnitt-kopf.mittig { margin-inline: auto; text-align: center; }
.abschnitt-kopf .obertitel {
    display: inline-block;
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kw-akzent-text);
    margin-bottom: 10px;
}
.abschnitt-kopf p { color: var(--kw-text-leise); font-size: 1.06rem; margin-bottom: 0; }
.abschnitt.dunkel .abschnitt-kopf p { color: rgba(255, 255, 255, .72); }

.strich { width: 54px; height: 3px; background: var(--kw-akzent); border: 0; margin: 0 0 22px; opacity: 1; }
.abschnitt-kopf.mittig .strich { margin-inline: auto; }

/* ------------------------------------------------------------------
   Knöpfe
   ------------------------------------------------------------------ */
.knopf {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px;
    border: 2px solid var(--kw-akzent);
    border-radius: var(--kw-radius);
    background: var(--kw-akzent);
    /* Dunkle Schrift auf dem Orange: Weiß darauf erreicht nur 2,96:1 und
       ist damit für Schrift zu blass. Dunkel auf Orange kommt auf 5,8:1
       und lässt die Markenfarbe, wie sie ist. */
    color: var(--kw-dunkel);
    font-weight: 700; font-size: .98rem; line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.knopf:hover { background: var(--kw-akzent-dunkel); border-color: var(--kw-akzent-dunkel); color: #fff; transform: translateY(-1px); }
.knopf:hover { color: #fff; }

.knopf.leise { background: transparent; color: var(--kw-dunkel); border-color: var(--kw-linie); }
.knopf.leise:hover { background: var(--kw-dunkel); border-color: var(--kw-dunkel); color: #fff; }

.knopf.hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.knopf.hell:hover { background: #fff; border-color: #fff; color: var(--kw-dunkel); }

.knopf.klein { padding: 9px 18px; font-size: .9rem; }

.knopf svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------------
   Kopfzeile und Navigation
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Ebenen
   ------------------------------------------------------------------
   Leaflet vergibt für seine eigenen Bestandteile Werte bis 1000 — die
   Karte schob sich damit beim Scrollen über die Kopfzeile. Die Kopfzeile
   liegt deshalb darüber, die Bildansicht über allem, und die Karte
   bekommt mit isolation einen eigenen Stapel, aus dem ihre Innereien
   nicht mehr ausbrechen können.

       Karte           eigener Stapel auf Ebene 0
       Kopfzeile       1000
       Sprungmarke     1100
       Bildansicht     2000
   ------------------------------------------------------------------ */
.kopf {
    position: sticky; top: 0; z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--kw-linie);
    box-shadow: 0 1px 12px rgba(20, 28, 35, .05);
}
.kopf-innen {
    max-width: var(--kw-breite);
    margin-inline: auto;
    padding: 0 24px;
    height: var(--kw-kopf-hoehe);
    display: flex; align-items: center; gap: 22px;
}

/* Das Logo ist eine breite Sperrform (Emblem und Schriftzug nebeneinander).
   Begrenzt wird deshalb die Höhe, und auf schmalen Bildschirmen stärker —
   sonst bliebe neben dem Menüknopf nichts übrig. */
.marke { display: flex; align-items: center; flex: none; text-decoration: none; min-width: 0; }
.marke img { max-height: 46px; width: auto; display: block; }
.marke-text { font-size: 1.4rem; font-weight: 900; color: var(--kw-dunkel); letter-spacing: -.02em; }

.hauptmenu { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.hauptmenu > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }

.hauptmenu > ul > li > a,
.hauptmenu > ul > li > button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    border: 0; background: none;
    font: inherit; font-weight: 600; font-size: .97rem;
    color: var(--kw-dunkel);
    text-decoration: none;
    border-radius: var(--kw-radius);
    cursor: pointer;
    white-space: nowrap;
}
.hauptmenu > ul > li > a:hover,
.hauptmenu > ul > li > button:hover { background: var(--kw-flaeche); color: var(--kw-dunkel); }

/* Der aktive Punkt bekommt den Akzentstrich, nicht nur eine andere Farbe —
   das bleibt auch für Farbfehlsichtige unterscheidbar. */
.hauptmenu > ul > li.aktiv > a,
.hauptmenu > ul > li.aktiv > button { color: var(--kw-akzent-text); }
.hauptmenu > ul > li.aktiv > a::after,
.hauptmenu > ul > li.aktiv > button::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
    height: 3px; background: var(--kw-akzent); border-radius: 2px 2px 0 0;
}
.hauptmenu > ul > li { position: relative; }

.pfeil { width: 10px; height: 6px; transition: transform .18s ease; }
.hauptmenu button[aria-expanded="true"] .pfeil { transform: rotate(180deg); }

/* Das Aufklappfeld sitzt bündig unter seinem Menüpunkt — ohne Spalt.
   Ein Abstand dazwischen sähe luftiger aus, kostet aber die Bedienbarkeit:
   auf dem Weg vom Menüpunkt nach unten wäre der Zeiger kurz über nichts,
   das Menü bekäme ein mouseleave und klappte vor dem Ziel wieder zu.
   Der Abstand steckt deshalb im Innenabstand des Feldes, nicht davor. */
.untermenu {
    position: absolute; top: 100%; left: 0;
    min-width: 268px;
    list-style: none; margin: 0; padding: 10px;
    background: #fff;
    border: 1px solid var(--kw-linie);
    border-radius: var(--kw-radius-gross);
    box-shadow: var(--kw-schatten-hoch);
    display: none;
}
.untermenu.offen { display: block; }

/* Zusätzliche unsichtbare Brücke nach oben und zu den Seiten: sie fängt
   den Zeiger auch dann, wenn er den Weg schräg nimmt. */
.hat-untermenu > .untermenu::before {
    content: ""; position: absolute;
    top: -12px; left: -8px; right: -8px; height: 14px;
}

.untermenu a {
    display: block; padding: 11px 14px;
    color: var(--kw-text); font-size: .95rem; font-weight: 500;
    text-decoration: none; border-radius: var(--kw-radius);
}
.untermenu a:hover,
.untermenu a:focus-visible { background: var(--kw-akzent-blass); color: var(--kw-akzent-text); }

/* Beim letzten Menüpunkt nach links öffnen — sonst liefe ein breites
   Aufklappfeld über den rechten Rand hinaus. */
.hauptmenu > ul > li:last-child .untermenu { left: auto; right: 0; }

.kopf-tel {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px;
    background: var(--kw-dunkel); color: #fff;
    border-radius: var(--kw-radius);
    font-weight: 700; font-size: .95rem; text-decoration: none;
    white-space: nowrap;
}
.kopf-tel:hover { background: var(--kw-akzent); color: #fff; }
.kopf-tel svg { width: 17px; height: 17px; }

.menu-schalter {
    display: none;
    margin-left: auto;
    width: 46px; height: 46px;
    border: 1px solid var(--kw-linie); border-radius: var(--kw-radius);
    background: #fff; cursor: pointer;
    position: relative;
}
/* Drei Striche aus einem Element: der mittlere ist der Balken selbst,
   die beiden äußeren sind seine Pseudoelemente. Beim Öffnen wird daraus
   ein Kreuz. */
.balken, .balken::before, .balken::after {
    position: absolute; left: 50%; width: 20px; height: 2px;
    background: var(--kw-dunkel); border-radius: 2px;
    transform: translateX(-50%);
    transition: transform .2s ease, opacity .2s ease;
}
.balken { top: 50%; margin-top: -1px; }
.balken::before, .balken::after { content: ""; left: 0; transform: none; }
.balken::before { top: -6px; }
.balken::after  { top: 6px; }
.menu-schalter[aria-expanded="true"] .balken { background: transparent; }
.menu-schalter[aria-expanded="true"] .balken::before { transform: translateY(6px) rotate(45deg); }
.menu-schalter[aria-expanded="true"] .balken::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 991px) {
    .menu-schalter { display: block; }
    .marke img { max-height: 38px; }
    .hauptmenu {
        position: fixed; inset: var(--kw-kopf-hoehe) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        margin: 0; padding: 14px 20px 26px;
        background: #fff;
        border-bottom: 1px solid var(--kw-linie);
        box-shadow: var(--kw-schatten-hoch);
        max-height: calc(100vh - var(--kw-kopf-hoehe));
        overflow-y: auto;
        display: none;
    }
    .hauptmenu.offen { display: flex; }
    .hauptmenu > ul { flex-direction: column; align-items: stretch; gap: 0; }
    .hauptmenu > ul > li > a,
    .hauptmenu > ul > li > button {
        width: 100%; justify-content: space-between;
        padding: 14px 4px; font-size: 1.05rem;
        border-bottom: 1px solid var(--kw-linie);
        border-radius: 0;
    }
    .hauptmenu > ul > li.aktiv > a::after,
    .hauptmenu > ul > li.aktiv > button::after { display: none; }
    .hauptmenu > ul > li.aktiv > a,
    .hauptmenu > ul > li.aktiv > button { box-shadow: inset 3px 0 0 var(--kw-akzent); padding-left: 14px; }
    .untermenu {
        position: static; min-width: 0;
        border: 0; box-shadow: none; border-radius: 0;
        padding: 4px 0 10px 14px;
        background: transparent;
    }
    .kopf-tel { margin-top: 18px; justify-content: center; }
}

@media (max-width: 420px) {
    .kopf-innen { gap: 12px; padding: 0 16px; }
    .marke img { max-height: 31px; }
}

/* ------------------------------------------------------------------
   Aufmacher der Startseite
   ------------------------------------------------------------------ */
.aufmacher {
    position: relative;
    background: var(--kw-dunkel);
    color: #fff;
    overflow: hidden;
}
.aufmacher-bild {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .32;
}
/* Ohne Foto trägt ein ruhiger Verlauf mit einem Anflug der Akzentfarbe
   den Aufmacher — besser als eine unbeteiligte Farbfläche. */
.aufmacher::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(1000px 520px at 82% -10%, rgba(231, 120, 15, .32), transparent 62%),
        linear-gradient(160deg, rgba(20, 28, 35, .10), rgba(20, 28, 35, .88) 78%);
}
.aufmacher-innen {
    position: relative;
    max-width: var(--kw-breite);
    margin-inline: auto;
    padding: clamp(64px, 9vw, 132px) 24px;
}
.aufmacher-text { max-width: 720px; }
.aufmacher h1 { color: #fff; margin-bottom: .45em; }
.aufmacher .vorspann {
    font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem);
    color: rgba(255, 255, 255, .84);
    margin-bottom: 34px;
}
.aufmacher-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Die drei Zusagen unter dem Aufmacher */
.zusagen {
    position: relative;
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    background: rgba(255, 255, 255, .14);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.zusage { background: var(--kw-dunkel); padding: 26px 24px; }
.zusage-titel { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.zusage-titel svg { width: 20px; height: 20px; color: var(--kw-akzent); flex: none; }
.zusage p { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .70); }

/* ------------------------------------------------------------------
   Kacheln der Kategorien
   ------------------------------------------------------------------ */
/* min(…, 100%) statt der nackten Mindestbreite: auf einem 320 Pixel
   breiten Telefon bleiben nach den Rändern nur rund 270 Pixel übrig, und
   eine Spur mit fester Mindestbreite von 290 Pixeln liefe darüber hinaus.
   Dieselbe Vorsorge steht bei allen Rastern dieser Datei. */
.kacheln {
    display: grid; gap: 26px;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.kachel {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--kw-linie);
    border-radius: var(--kw-radius-gross);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--kw-schatten-hoch); border-color: transparent; color: inherit; }

.kachel-bild {
    aspect-ratio: 4 / 3;
    background: var(--kw-flaeche);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kachel:hover .kachel-bild img { transform: scale(1.04); }

/* Platzhalter, solange noch kein Bild hinterlegt ist */
.kachel-bild.leer { background: linear-gradient(135deg, var(--kw-flaeche), #E8ECF0); }
.kachel-bild.leer svg { width: 54px; height: 54px; color: #B7C2CC; }

.kachel-text { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.kachel-text h3 { margin-bottom: 6px; }
.kachel-text p { color: var(--kw-text-leise); font-size: .95rem; margin-bottom: 16px; }
.kachel-fuss {
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--kw-linie);
    display: flex; align-items: center; justify-content: space-between;
    font-size: .88rem; color: var(--kw-text-leise);
}
.kachel-fuss .weiter { color: var(--kw-akzent-text); font-weight: 700; }

/* ------------------------------------------------------------------
   Karten der Mietartikel
   ------------------------------------------------------------------ */
.artikel-gitter {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
}
.artikel {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--kw-linie);
    border-radius: var(--kw-radius-gross);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.artikel:hover { transform: translateY(-3px); box-shadow: var(--kw-schatten-hoch); border-color: transparent; color: inherit; }
.artikel-bild {
    aspect-ratio: 4 / 3; background: var(--kw-flaeche);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.artikel-bild img { width: 100%; height: 100%; object-fit: cover; }
.artikel-bild.leer svg { width: 46px; height: 46px; color: #B7C2CC; }
.artikel-text { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.artikel-text h3 { font-size: 1.1rem; margin-bottom: 5px; }
.artikel-text .kurz { font-size: .92rem; color: var(--kw-text-leise); margin-bottom: 14px; }
.artikel-fuss {
    margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.preis { font-weight: 700; color: var(--kw-dunkel); }
.preis .einheit { font-weight: 400; font-size: .84rem; color: var(--kw-text-leise); }

/* Kleines Etikett: Kategorie, „Entwurf", „nicht verfügbar" */
.etikett {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--kw-akzent-blass);
    color: var(--kw-akzent-text);
    font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.etikett.grau { background: var(--kw-flaeche); color: var(--kw-text-leise); }

/* ------------------------------------------------------------------
   Filterleiste des Mietparks
   ------------------------------------------------------------------ */
.filter {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 34px;
}
.filter a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--kw-linie); border-radius: 100px;
    background: #fff;
    font-size: .93rem; font-weight: 600; color: var(--kw-text);
    text-decoration: none;
}
.filter a:hover { border-color: var(--kw-akzent); color: var(--kw-akzent-text); }
.filter a.aktiv { background: var(--kw-dunkel); border-color: var(--kw-dunkel); color: #fff; }
.filter .anzahl { font-size: .8rem; opacity: .65; font-weight: 500; }

/* ------------------------------------------------------------------
   Einzelner Mietartikel
   ------------------------------------------------------------------ */
.krume { font-size: .88rem; color: var(--kw-text-leise); margin-bottom: 18px; }
.krume a { color: var(--kw-text-leise); text-decoration: none; }
.krume a:hover { color: var(--kw-akzent-text); text-decoration: underline; }
.krume span { margin: 0 7px; opacity: .5; }

.artikel-kopf {
    display: grid; gap: 42px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 860px) { .artikel-kopf { grid-template-columns: 1fr; gap: 30px; } }

.galerie-gross {
    background: var(--kw-flaeche);
    border: 1px solid var(--kw-linie);
    border-radius: var(--kw-radius-gross);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
}
.galerie-gross img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.galerie-gross.leer svg { width: 72px; height: 72px; color: #B7C2CC; }

.galerie-streifen {
    display: flex; gap: 10px; margin-top: 12px;
    overflow-x: auto; padding-bottom: 4px;
}
.galerie-streifen button {
    flex: none; width: 84px; height: 64px; padding: 0;
    border: 2px solid var(--kw-linie); border-radius: var(--kw-radius);
    background: var(--kw-flaeche); overflow: hidden; cursor: pointer;
}
.galerie-streifen button img { width: 100%; height: 100%; object-fit: cover; }
.galerie-streifen button.aktiv { border-color: var(--kw-akzent); }

.artikel-angaben { margin: 0 0 26px; }
.artikel-angaben .preis-gross { font-size: 1.7rem; font-weight: 700; color: var(--kw-dunkel); }
.artikel-angaben .preis-gross .einheit { font-size: .95rem; font-weight: 400; color: var(--kw-text-leise); }

/* Technische Angaben als Definitionsliste — zwei Spalten, klar getrennt */
.daten { border-top: 1px solid var(--kw-linie); margin: 0 0 26px; }
.daten div {
    display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--kw-linie);
}
.daten dt { color: var(--kw-text-leise); font-size: .93rem; }
.daten dd { margin: 0; font-weight: 600; }

/* Anleitungen und Datenblätter zum Herunterladen */
.dokumente { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.dokumente a {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 16px;
    border: 1px solid var(--kw-linie); border-radius: var(--kw-radius);
    background: #fff; text-decoration: none; color: var(--kw-text);
}
.dokumente a:hover { border-color: var(--kw-akzent); background: var(--kw-akzent-blass); }
.dokumente svg { width: 22px; height: 22px; color: var(--kw-akzent); flex: none; }
.dokumente .name { font-weight: 600; }
.dokumente .groesse { margin-left: auto; font-size: .85rem; color: var(--kw-text-leise); }

/* ------------------------------------------------------------------
   Inhalte aus dem Editor
   ------------------------------------------------------------------
   Alles unter .inhalt ist Text, den jemand im Editor geschrieben hat.
   Die Regeln hier sorgen dafür, dass er ohne Zutun ordentlich aussieht. */
.inhalt { max-width: 820px; }
/* Eine lange Adresse ohne Leerzeichen ist sonst breiter als das Telefon. */
.inhalt, .artikel-text, .kachel-text, .daten dd, .fuss-liste { overflow-wrap: break-word; }
.inhalt.weit { max-width: none; }
.inhalt > *:first-child { margin-top: 0; }
.inhalt > *:last-child { margin-bottom: 0; }
.inhalt h2 { margin-top: 1.8em; }
.inhalt h3 { margin-top: 1.5em; }
.inhalt ul, .inhalt ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.inhalt li { margin-bottom: .4em; }
.inhalt img { border-radius: var(--kw-radius); margin: .6em 0; }
.inhalt figure { margin: 1.6em 0; }
.inhalt figcaption { font-size: .89rem; color: var(--kw-text-leise); margin-top: 8px; }
.inhalt blockquote {
    margin: 1.6em 0; padding: 4px 0 4px 22px;
    border-left: 3px solid var(--kw-akzent);
    color: var(--kw-text-leise); font-size: 1.06rem;
}
.inhalt table {
    width: 100%; border-collapse: collapse; margin: 1.4em 0;
    font-size: .95rem;
}
.inhalt th, .inhalt td { padding: 11px 14px; border-bottom: 1px solid var(--kw-linie); text-align: left; }
.inhalt th { background: var(--kw-flaeche); font-weight: 700; color: var(--kw-dunkel); }
/* Breite Tabellen sollen rollen dürfen, statt die Seite zu sprengen. */
.inhalt .tabelle-rollt { overflow-x: auto; }

/* ------------------------------------------------------------------
   Bilder einer Seite
   ------------------------------------------------------------------
   Was im Text nicht ausdrücklich platziert wurde, steht darunter als
   Reihe. Ein Klick zeigt das Bild in voller Größe. */
.seiten-bilder {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    margin-top: 44px;
}
.seiten-bilder figure { margin: 0; }
.seiten-bilder img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--kw-radius-gross);
    border: 1px solid var(--kw-linie);
    background: var(--kw-flaeche);
    cursor: zoom-in;
    display: block;
}

/* ------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------ */
.formular { display: grid; gap: 18px; }
.formular .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .formular .paar { grid-template-columns: 1fr; } }

.formular label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; color: var(--kw-dunkel); }
.formular input, .formular textarea, .formular select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--kw-linie); border-radius: var(--kw-radius);
    font: inherit; font-size: .98rem; color: var(--kw-text);
    background: #fff;
}
.formular input:focus, .formular textarea:focus, .formular select:focus {
    border-color: var(--kw-akzent); outline: 2px solid var(--kw-akzent-blass); outline-offset: 0;
}
.formular textarea { min-height: 150px; resize: vertical; }
.formular .hinweis { font-size: .85rem; color: var(--kw-text-leise); margin: 6px 0 0; }
.formular .ankreuz { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.formular .ankreuz input { width: auto; margin-top: 3px; flex: none; }

/* Honigtopf: für Menschen unsichtbar, für einfache Skripte verlockend. */
.honigtopf { position: absolute; left: -9999px; }

.meldung {
    padding: 15px 18px; border-radius: var(--kw-radius);
    border-left: 4px solid; margin-bottom: 24px; font-size: .95rem;
}
.meldung.gut     { background: #ECF7EF; border-color: #2E9E52; color: #1C6634; }
.meldung.fehler  { background: #FDEDEC; border-color: #D6412B; color: #8E2C1E; }
.meldung.hinweis { background: var(--kw-akzent-blass); border-color: var(--kw-akzent); color: var(--kw-akzent-text); }

/* ------------------------------------------------------------------
   Aufruf zur Anfrage
   ------------------------------------------------------------------ */
.aufruf {
    background: var(--kw-dunkel);
    border-radius: var(--kw-radius-gross);
    padding: clamp(30px, 4vw, 52px);
    color: #fff;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
    position: relative; overflow: hidden;
}
.aufruf::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(600px 320px at 88% -30%, rgba(231, 120, 15, .34), transparent 65%);
}
.aufruf > * { position: relative; }
.aufruf h2 { color: #fff; margin-bottom: 8px; }
.aufruf p { color: rgba(255, 255, 255, .76); margin: 0; max-width: 560px; }
.aufruf-knoepfe { display: flex; flex-wrap: wrap; gap: 13px; }

/* ------------------------------------------------------------------
   Karte
   ------------------------------------------------------------------ */
.karte-halter {
    position: relative; height: 380px;
    border-radius: var(--kw-radius-gross); overflow: hidden;
    border: 1px solid var(--kw-linie); background: var(--kw-flaeche);
    /* Hält die Ebenen von Leaflet in diesem Kasten. */
    z-index: 0;
    isolation: isolate;
}
.karte-halter .karte-laden {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    text-align: center; padding: 24px;
}
.karte-halter .karte-laden p { color: var(--kw-text-leise); font-size: .92rem; max-width: 420px; margin: 0; }

/* ------------------------------------------------------------------
   Leerzustände
   ------------------------------------------------------------------ */
.leer {
    padding: 46px 28px; text-align: center;
    background: var(--kw-flaeche);
    border: 1px dashed var(--kw-linie); border-radius: var(--kw-radius-gross);
    color: var(--kw-text-leise);
}
.leer strong { display: block; color: var(--kw-dunkel); font-size: 1.1rem; margin-bottom: 6px; }

/* ------------------------------------------------------------------
   Bildansicht (Lightbox)
   ------------------------------------------------------------------ */
.lupe {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(14, 20, 26, .94);
    display: none; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.lupe.offen { display: flex; }
.lupe img { max-width: 100%; max-height: 100%; border-radius: var(--kw-radius); }
.lupe button {
    position: absolute; top: 20px; right: 20px;
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lupe button:hover { background: var(--kw-akzent); }

/* ------------------------------------------------------------------
   Seitenfuß
   ------------------------------------------------------------------ */
.fuss { background: var(--kw-dunkel); color: rgba(255, 255, 255, .68); font-size: .94rem; }
.fuss-innen {
    max-width: var(--kw-breite); margin-inline: auto;
    padding: clamp(44px, 5vw, 62px) 24px;
    display: grid;
    gap: 36px 52px;
    /* Mitwachsend statt fest: je nachdem, was hinterlegt ist, stehen hier
       zwei bis vier Spalten. Ein festes Raster ließe bei einer fehlenden
       Spalte — etwa ohne Kontaktdaten — eine leere Spur stehen. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.fuss h2 {
    font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; margin-bottom: 15px;
}
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss-liste a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fuss-liste a:hover { color: var(--kw-akzent); }

/* Tag über der Uhrzeit statt daneben: „Sonn- und Feiertage" passt in einer
   schmalen Spalte nicht neben „geschlossen" und brach vorher so um, dass
   die Uhrzeit neben der ersten Zeile hing. */
.fuss-zeiten { gap: 14px; }
.fuss-zeiten .tag  { display: block; color: rgba(255, 255, 255, .78); }
.fuss-zeiten .zeit { display: block; color: rgba(255, 255, 255, .48); font-size: .9rem; }

.fuss-marke { max-width: 340px; }
.fuss-name { font-size: 1.25rem; font-weight: 900; color: #fff; margin: 0 0 4px; letter-spacing: -.01em; }
.fuss-slogan { color: rgba(255, 255, 255, .6); margin: 0; }
.fuss-social { display: flex; gap: 10px; margin-top: 18px; }
.fuss-social a {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 100px;
    color: rgba(255, 255, 255, .8); font-size: .85rem; text-decoration: none;
}
.fuss-social a:hover { border-color: var(--kw-akzent); color: var(--kw-akzent); }

.fuss-zeile {
    border-top: 1px solid rgba(255, 255, 255, .12);
    max-width: var(--kw-breite); margin-inline: auto;
    padding: 20px 24px;
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-size: .87rem; color: rgba(255, 255, 255, .5);
}
.fuss-recht { display: flex; gap: 20px; }
.fuss-recht a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fuss-recht a:hover { color: var(--kw-akzent); }

/* ------------------------------------------------------------------
   Drucken
   ------------------------------------------------------------------
   Ein Datenblatt eines Geräts wird auf der Baustelle durchaus
   ausgedruckt. Menü, Fuß und Knöpfe haben darauf nichts zu suchen. */
@media print {
    .kopf, .fuss, .aufruf, .knopf, .filter, .galerie-streifen, .sprungmarke { display: none !important; }
    body { font-size: 12pt; }
    .abschnitt { padding: 0; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}