/* ===========================================================================
   Autoservice Noah – Gestaltung

   Dunkler Werkstattauftritt: fast schwarzer, leicht warmer Grund, große
   Versalüberschriften, Orange als einziger Akzent, geschrägte Knöpfe.
   Eine Datei, keine Abhängigkeiten, keine externen Schriften.
   =========================================================================== */

/* ---------------------------------------------------------------------------
 * Schrift: Archivo Variable (SIL Open Font License)
 *
 * Liegt auf dem eigenen Server. Von Google Fonts geladen ginge bei jedem
 * Seitenaufruf die IP-Adresse des Besuchers an Google – das wäre ohne
 * Einwilligung nicht zulässig. Siehe assets/fonts/HINWEIS.txt.
 *
 * Eine einzige Datei deckt alle Stärken von 100 bis 900 ab (variable Achse).
 * ------------------------------------------------------------------------- */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Marke */
    --orange:       #ed6b0c;
    --orange-hell:  #ff8124;
    --orange-tief:  #c4560a;

    /* Dunkler Grund, mehrere sehr nahe Töne für die Schichtung */
    --nacht:   #151312;
    --nacht-2: #1c1a18;
    --nacht-3: #232020;
    --nacht-4: #2e2a28;

    --weiss:  #ffffff;
    --grau:   #a9a29b;
    --grau-2: #7d7770;

    --linie:      rgba(255, 255, 255, .10);
    --linie-fein: rgba(255, 255, 255, .06);

    --breite: 1280px;
    --luft:   clamp(3.5rem, 7vw, 6.5rem);

    --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

    /* Schräge Kante der Knöpfe – ein Wert, überall gleich */
    --schraege: 16px;
}

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

/* Bis das Skript gelaufen ist, laufen keine Übergänge. Sonst wandert beim
   Laden einmal sichtbar etwas über den Bildschirm – etwa das eingeschobene
   Mobilmenü, das erst in seine Position außerhalb des Bildes gleitet. */
body:not(.ist-bereit) * { transition: none !important; animation: none !important; }

/* Muss vor allen display-Regeln stehen: sonst macht ein späteres
   display:flex das hidden-Attribut wirkungslos. */
[hidden] { display: none !important; }

html {
    /* color-scheme sagt dem Browser, dass die Seite von sich aus dunkel ist.
       Ohne diese Angabe hält Chrome sie für eine helle Seite und färbt sie im
       Dunkelmodus des Betriebssystems selbst um – das gibt beim Laden einen
       blaugrauen Schleier. Zugleich werden Scrollbalken und Formularelemente
       dunkel statt hell. */
    color-scheme: dark;
    background: var(--nacht);

    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--nacht);
    color: var(--grau);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a { color: var(--orange); text-underline-offset: 3px; }
a:hover { color: var(--orange-hell); }

h1, h2, h3 {
    margin: 0 0 .6em;
    color: var(--weiss);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.08;
    text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.16rem; line-height: 1.3; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

.wrap   { width: min(100% - 2.6rem, var(--breite)); margin-inline: auto; }
.schmal { max-width: 800px; }
.mitte  { text-align: center; }
.leise  { color: var(--grau-2); }
.platzhalter { color: #ff9c9c; font-style: italic; }

/* --- Icons ---------------------------------------------------------------- */
.ico    { width: 20px; height: 20px; flex: none; }
.ico--s { width: 15px; height: 15px; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--orange); color: #fff; padding: .8rem 1.4rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* --- Knöpfe --------------------------------------------------------------
   Die angeschrägte rechte Kante ist das Erkennungsmerkmal. Umgesetzt mit
   clip-path, damit kein zusätzliches Element nötig ist. */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .95rem 2.1rem;
    background: var(--orange); color: #fff;
    border: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--schraege)) 100%, 0 100%);
    font: inherit; font-weight: 800; font-size: .92rem;
    letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.knopf:hover { background: var(--orange-hell); color: #fff; }

.knopf--klar {
    background: transparent; color: var(--weiss);
    box-shadow: inset 0 0 0 1px var(--linie);
}
.knopf--klar:hover { background: var(--nacht-3); color: var(--weiss); box-shadow: inset 0 0 0 1px var(--orange); }

.knopf--dunkel { background: var(--nacht); color: var(--weiss); }
.knopf--dunkel:hover { background: #000; color: var(--weiss); }

.knopf--breit { width: 100%; }

/* Textlink mit kleinem orangem Pfeilplättchen, wie im Leistungsraster */
.mehr {
    display: inline-flex; align-items: center; gap: .7rem;
    color: var(--weiss); text-decoration: none;
    font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.mehr::before {
    content: "\203A";
    display: grid; place-items: center;
    width: 22px; height: 22px;
    background: var(--orange); color: #fff;
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    font-size: 1rem; line-height: 1; padding-bottom: 2px;
    transition: background-color .16s ease, transform .16s ease;
}
.mehr:hover { color: var(--orange); }
.mehr:hover::before { background: var(--orange-hell); transform: translateX(3px); }

/* --- Geisterschrift ------------------------------------------------------
   Riesiges, nur konturiertes Wort hinter der Überschrift. Reine Zier,
   deshalb aria-hidden im HTML. */
.geist {
    position: absolute; left: 0; top: 0;
    font-size: clamp(4rem, 11vw, 9.5rem);
    font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
    white-space: nowrap; pointer-events: none; user-select: none;
    line-height: 1;
}

/* --- Kopfleiste ----------------------------------------------------------- */
.kopfleiste {
    background: #0f0d0c;
    border-bottom: 1px solid var(--linie);
    font-size: .82rem;
}
.kopfleiste__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 40px; flex-wrap: wrap;
}
.kopfleiste a {
    color: var(--grau); text-decoration: none;
    display: inline-flex; align-items: center; gap: .45rem;
    white-space: nowrap;
}
.kopfleiste a:hover { color: var(--weiss); }
.kopfleiste__rechts { display: flex; align-items: center; gap: 1.6rem; flex: none; }
.kopfleiste__tuev b { color: var(--orange-hell); }

.zustand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.kopfleiste .zustand { white-space: nowrap; }
.zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.zustand.ist-auf { color: #56c268; }
.zustand.ist-zu  { color: #e0913f; }

/* --- Kopf ----------------------------------------------------------------- */
/* Hintergrund und Weichzeichner liegen bewusst auf einem Pseudoelement und
   nicht auf dem Kopf selbst: backdrop-filter macht ein Element zum Bezugs-
   rahmen fuer alle fest positionierten Kindelemente. Stuende der Filter hier
   oben, waere das ausklappbare Menue in die 67 Pixel hohe Kopfzeile gesperrt
   statt ueber die ganze Bildschirmhoehe zu reichen. */
.kopf {
    position: sticky; top: 0; z-index: 90;
    border-bottom: 1px solid var(--linie);
}
.kopf::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(21, 19, 18, .96);
    backdrop-filter: blur(8px);
}
/* Beim Scrollen ändert sich nur der Schatten – Kopfhöhe und Logo bleiben
   fest. Ein mitschrumpfendes Logo sprang beim Neuladen sichtbar zusammen:
   Der Browser stellt die alte Scrollposition wieder her, das Skript setzt
   die Klasse aber erst nach dem ersten Malen. */
.kopf.ist-geklebt { box-shadow: 0 12px 34px -18px #000; }
.kopf__in { display: flex; align-items: center; gap: 2rem; min-height: 80px; }

.marke { display: flex; align-items: center; text-decoration: none; flex: none; }
.marke__bild { height: 26px; width: auto; display: block; }
.marke__text { color: #fff; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; }
.marke__text em { font-style: normal; color: var(--orange); }

.navi { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.navi ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.navi a {
    display: block; padding: .4rem 0;
    color: var(--grau); text-decoration: none;
    font-size: .84rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    white-space: nowrap; position: relative;
}
.navi a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
    background: var(--orange); transition: right .22s ease;
}
.navi a:hover { color: var(--weiss); }
.navi a:hover::after, .navi a[aria-current="page"]::after { right: 0; }
.navi a[aria-current="page"] { color: var(--weiss); }
/* Mit .navi davor, sonst gewinnt die Regel `.navi a` mit display:block. */
.navi a.knopf { display: inline-flex; padding: .7rem 1.5rem; font-size: .8rem; color: #fff; }
.navi a.knopf::after { display: none; }

.burger {
    display: none; align-self: center; margin-left: auto;
    width: 44px; height: 36px; padding: 9px 7px;
    background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 2px; background: #fff; transition: transform .22s ease, opacity .18s ease; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Brotkrumen ----------------------------------------------------------
   Google zeigt daraus im Suchergebnis den Pfad statt der nackten Adresse. */
.krumen {
    background: var(--nacht-2);
    border-bottom: 1px solid var(--linie);
    font-size: .8rem;
}
.krumen ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    list-style: none; margin: 0; padding: .7rem 0;
}
.krumen li { display: flex; align-items: center; gap: .5rem; color: var(--grau-2); }
.krumen li + li::before { content: "/"; color: rgba(255, 255, 255, .22); }
.krumen a { color: var(--grau); text-decoration: none; }
.krumen a:hover { color: var(--orange); }
.krumen [aria-current="page"] { color: var(--weiss); }

/* --- Bühne ---------------------------------------------------------------- */
.buehne { position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 5rem); }
.buehne::before {
    content: ""; position: absolute; top: -25%; right: -10%; width: 60%; height: 150%;
    background: linear-gradient(150deg, rgba(237, 107, 12, .17), rgba(237, 107, 12, 0) 62%);
    transform: skewX(-13deg); pointer-events: none;
}
/* Die Geisterschrift sitzt am Rand des Inhalts, nicht am Bildschirmrand –
   deshalb braucht die Hülle einen eigenen Positionsbezug. */
.buehne > .wrap { position: relative; }
.buehne__geist { top: clamp(1rem, 3vw, 2.2rem); }
.buehne__in { position: relative; padding-top: clamp(2.5rem, 6vw, 5rem); max-width: 46rem; }
.kicker {
    display: inline-flex; align-items: center; gap: .6rem;
    margin: 0 0 1.2rem;
    font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--orange);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--orange); }
.buehne h1 { margin-bottom: .5em; }
.buehne h1 .akzent { color: var(--orange); }
.buehne__text { font-size: clamp(1rem, 1.4vw, 1.13rem); max-width: 54ch; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* --- Zahlenband ----------------------------------------------------------- */
.zahlen { background: var(--nacht-2); border-block: 1px solid var(--linie); }
.zahlen__raster { display: grid; grid-template-columns: repeat(4, 1fr); }
.zahl { padding: 2.1rem 1.6rem; border-left: 1px solid var(--linie); }
.zahl:first-child { border-left: 0; padding-left: 0; }
.zahl b {
    display: block; color: var(--orange);
    font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.zahl span { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.4; }

/* --- Sektionen ------------------------------------------------------------ */
.sektion { position: relative; padding: var(--luft) 0; }
.sektion--ton { background: var(--nacht-2); }
.sektion--rand { border-top: 1px solid var(--linie); }

.sektion__kopf {
    position: relative;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
    padding-top: clamp(1.5rem, 4vw, 3rem);
}
.sektion__kopf > div { max-width: 60ch; }
.sektion__kopf h2 { margin-bottom: 0; }
.sektion__kopf p { margin: 1rem 0 0; }
.sektion__geist { top: 0; }

/* --- Leistungsraster ------------------------------------------------------ */
.dienste {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(2rem, 5vw, 4.5rem);
    border-top: 1px solid var(--linie);
}
.dienst { padding: 2.2rem 0; border-bottom: 1px solid var(--linie); }
.dienst__ico { display: block; width: 38px; height: 38px; color: var(--weiss); margin-bottom: 1.3rem; stroke-width: 1.4; transition: color .16s ease; }
.dienst h3 { margin-bottom: .6rem; }
.dienst p { font-size: .96rem; margin-bottom: 1.2rem; }
.dienst:hover .dienst__ico { color: var(--orange); }

/* --- Hakenliste ----------------------------------------------------------- */
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.haken li { position: relative; padding-left: 1.7rem; font-size: .98rem; }
.haken li::before {
    content: ""; position: absolute; left: 0; top: .55rem;
    width: 9px; height: 9px; background: var(--orange);
}
.haken--zwei { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 2rem; }

/* --- Panel (dunkler Kasten mit angeschrägter Ecke) ------------------------ */
.panel {
    background: var(--nacht-3);
    border: 1px solid var(--linie);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.panel--akzent { border-top: 3px solid var(--orange); }
.panel h3 { font-size: .78rem; letter-spacing: .16em; color: var(--grau-2); margin-bottom: 1.2rem; }

/* --- Zweispalter ---------------------------------------------------------- */
.zwei {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.zwei--gleich { grid-template-columns: 1fr 1fr; }
.fliesstext p { max-width: 64ch; }
.fliesstext h2 { margin-top: 2.4rem; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext ul { padding-left: 1.2rem; }
.fliesstext li { margin-bottom: .5rem; }
.fliesstext a { text-decoration: underline; }

/* --- Oranges Band --------------------------------------------------------- */
.band { background: var(--orange); color: #fff; position: relative; overflow: hidden; }
.band__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    padding: clamp(2rem, 4vw, 3.2rem) 0;
}
.band h2 { color: #fff; margin-bottom: .4rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.band p { color: rgba(255, 255, 255, .93); margin: 0; max-width: 62ch; }
.band__knoepfe { display: flex; gap: 1rem; flex-wrap: wrap; }
.band .knopf { background: var(--nacht); }
.band .knopf:hover { background: #000; }

/* --- Seitenkopf der Unterseiten ------------------------------------------- */
.seitenkopf {
    position: relative; overflow: hidden;
    background: var(--nacht-2);
    border-bottom: 1px solid var(--linie);
    padding: clamp(2.8rem, 5vw, 4.5rem) 0 clamp(2.2rem, 4vw, 3.4rem);
}
.seitenkopf::before {
    content: ""; position: absolute; top: -30%; right: -8%; width: 46%; height: 170%;
    background: linear-gradient(150deg, rgba(237, 107, 12, .16), rgba(237, 107, 12, 0) 60%);
    transform: skewX(-13deg); pointer-events: none;
}
.seitenkopf > .wrap { position: relative; }
.seitenkopf h1 { max-width: 20ch; }
.seitenkopf__text { max-width: 64ch; font-size: 1.04rem; margin: 0; }
.seitenkopf__knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* --- Sprungliste ---------------------------------------------------------- */
.sprungliste {
    display: flex; flex-wrap: wrap; gap: .55rem;
    padding-bottom: 2.2rem; margin-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--linie);
}
.sprungliste a {
    padding: .45rem 1rem;
    background: var(--nacht-2); border: 1px solid var(--linie);
    color: var(--grau); text-decoration: none;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.sprungliste a:hover { color: var(--weiss); border-color: var(--orange); }
.sprungliste a.ist-sichtbar { background: var(--orange); border-color: var(--orange); color: #fff; }

/* --- Leistungsdetail ------------------------------------------------------ */
.leistung { border-top: 1px solid var(--linie); padding: 2.2rem 0; scroll-margin-top: 130px; }
.leistung:last-child { border-bottom: 1px solid var(--linie); }
.leistung__kopf { display: flex; gap: 1.4rem; align-items: flex-start; margin-bottom: 1.4rem; }
.leistung__ico { flex: none; width: 40px; height: 40px; color: var(--orange); stroke-width: 1.4; margin-top: .2rem; }
.leistung h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: .4rem; }
.leistung__kurz { margin: 0; }
.leistung:target { background: var(--nacht-2); box-shadow: inset 3px 0 0 var(--orange); padding-inline: 1.4rem; }

/* --- Prüftermine ---------------------------------------------------------- */
.termine {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 1px; background: var(--linie);
    border: 1px solid var(--linie);
}
.termin { background: var(--nacht-2); padding: 1.4rem 1rem; text-align: center; }
.termin__tag { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grau-2); }
.termin__datum { display: block; margin-top: .3rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--weiss); line-height: 1.15; }
.termin__jahr { display: block; font-size: .8rem; color: var(--grau-2); }
.termin--naechster { background: var(--orange); }
.termin--naechster .termin__tag, .termin--naechster .termin__jahr { color: rgba(255, 255, 255, .85); }
.termin--naechster .termin__datum { color: #fff; }
.termin__marke { display: inline-block; margin-top: .5rem; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }

/* --- Häufige Fragen ------------------------------------------------------- */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
    padding: 1.35rem 0; cursor: pointer; list-style: none;
    color: var(--weiss); font-weight: 800; font-size: 1.03rem;
    text-transform: uppercase; letter-spacing: -.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--orange); }
.faq__inhalt { padding: 0 0 1.6rem; }
.faq__inhalt p { max-width: 70ch; }

/* --- Formular ------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.stapel { display: grid; gap: 1.6rem; }

.formkarte {
    background: var(--nacht-2);
    border: 1px solid var(--linie); border-top: 3px solid var(--orange);
    padding: clamp(1.5rem, 3vw, 2.4rem);
    scroll-margin-top: 130px;
}
.formkarte__titel { font-size: 1.3rem; margin-bottom: 1.7rem; }

.feld { margin-bottom: 1.15rem; }
.feldpaar { display: grid; gap: 0 1.2rem; grid-template-columns: 1fr 1fr; }
.feldgruppe { border: 1px solid var(--linie); padding: 1.3rem 1.3rem .3rem; margin: 0 0 1.4rem; }
.feldgruppe legend {
    padding: 0 .6rem; font-size: .74rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.feld label { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--weiss); }
.feld input, .feld select, .feld textarea {
    width: 100%; padding: .78rem .9rem;
    background: var(--nacht); border: 1px solid var(--linie); border-radius: 0;
    font: inherit; font-size: .97rem; color: var(--weiss);
    transition: border-color .15s ease, background-color .15s ease;
}
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--orange); background: #100e0d; }
.feld input::placeholder, .feld textarea::placeholder { color: #6a645e; }
.feld select option { background: var(--nacht); color: var(--weiss); }
.feld__hinweis { margin: .45rem 0 0; font-size: .82rem; color: var(--grau-2); }
.feld__hinweis--fuss { margin-top: 1rem; }
.noetig { color: var(--orange); }

.zustimmung { display: flex; gap: .8rem; align-items: flex-start; margin: 1.4rem 0 1.6rem; font-size: .9rem; }
.zustimmung input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--orange); flex: none; }

.honig { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.meldung { padding: 1rem 1.2rem; margin-bottom: 1.6rem; border-left: 3px solid; font-size: .94rem; }
.meldung--ok   { background: rgba(60, 160, 80, .12); border-color: #3ca050; color: #9fe0ad; }
.meldung--fehl { background: rgba(200, 60, 50, .12); border-color: #c83c32; color: #f0a9a3; }
.meldung--warn { background: rgba(237, 107, 12, .12); border-color: var(--orange); color: #f5be8d; }

/* --- Infokasten ----------------------------------------------------------- */
.infobox { background: var(--nacht-2); border: 1px solid var(--linie); padding: 1.6rem; }
.infobox--akzent { border-top: 3px solid var(--orange); }
.infobox__titel { font-size: .78rem; letter-spacing: .16em; color: var(--grau-2); margin-bottom: 1.1rem; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linie-fein); font-size: .93rem; }
.liste li:last-child { border-bottom: 0; }
.liste .ist-heute { color: var(--orange-hell); font-weight: 700; }
.liste--block li { flex-direction: column; gap: .15rem; align-items: flex-start; }
.liste b { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-2); font-weight: 800; }
.liste a { color: var(--weiss); text-decoration: none; font-weight: 600; }
.liste a:hover { color: var(--orange); }

/* --- Einzugsgebiet -------------------------------------------------------- */
.einzugsgebiet {
    margin: 0 0 2rem; max-width: 72ch;
    font-size: .97rem; color: var(--grau);
}
.einzugsgebiet b { color: var(--weiss); font-weight: 600; }

/* --- Karte ---------------------------------------------------------------- */
.kartenfeld { position: relative; border: 1px solid var(--linie); background: var(--nacht-2); min-height: 430px; }
.kartenfeld iframe { display: block; width: 100%; height: 430px; border: 0; }
.kartenfeld__sperre {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem; background: var(--nacht-2);
}
.kartenfeld__sperre p { max-width: 54ch; }
.kartenfeld__knoepfe { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.4rem; }

/* --- Fuß ------------------------------------------------------------------ */
.fuss { background: #100e0d; border-top: 1px solid var(--linie); padding: clamp(3rem, 5vw, 4.5rem) 0 0; }
.fuss__raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.fuss__logo { height: 28px; width: auto; margin-bottom: 1.4rem; }
.fuss__marke p { font-size: .92rem; max-width: 32ch; margin-bottom: .6rem; }
.fuss h2 { font-size: .76rem; letter-spacing: .16em; color: var(--weiss); margin-bottom: 1.2rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem; }
.fuss a { color: var(--grau); text-decoration: none; }
.fuss a:hover { color: var(--orange); }
.fuss__zeiten li { display: flex; justify-content: space-between; gap: 1rem; }
.fuss__unten {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.4rem 0; border-top: 1px solid var(--linie); font-size: .85rem;
}
.fuss__unten p { margin: 0; }
.fuss__unten nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--grau); text-decoration: none; }
.linkbtn:hover { color: var(--orange); }

/* ===========================================================================
   Einwilligungsverwaltung
   Banner auf der ersten Ebene mit gleichrangigen Knöpfen, Schalter je Zweck,
   jederzeit über den Seitenfuß wieder aufrufbar.
   =========================================================================== */
/* Ein Element mit position:fixed bemisst sich eigentlich am sichtbaren
   Fenster. Manche Umgebungen – Vorschaufenster, eingebettete Browser in
   Apps – melden dafür aber ein größeres Rechteck als den Bereich, in dem
   die Seite tatsächlich gesetzt wird. Dann wird ein Overlay breiter als der
   Bildschirm und rutscht nach unten aus dem Bild.

   Die beiden Werte unten holen die Ränder zurück: 100% ist die Breite bzw.
   Höhe jenes Rechtecks, 100vw/100dvh die des echten Layout-Viewports. In
   einem normalen Browser sind beide gleich, die Rechnung ergibt 0 und nichts
   ändert sich. Weicht die Umgebung ab, wird genau die Differenz abgezogen.
   Das max(0px, …) ist nötig, weil 100vw am Schreibtisch den Rollbalken
   mitzählt, 100% aber nicht – sonst geräte die Rechnung dort ins Minus. */
:root {
    --fix-rechts: max(0px, 100% - 100vw);
    --fix-unten:  max(0px, 100% - 100dvh);
}

.consent {
    position: fixed;
    top: 0; left: 0;
    right: var(--fix-rechts); bottom: var(--fix-unten);
    z-index: 160;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 1rem;
    background: rgba(8, 7, 6, .7);
}
/* Der Kasten ist eine Spalte: Überschrift und Knöpfe stehen fest, nur die
   Zweckliste in der Mitte scrollt. Sonst lägen auf dem Handy beide Knöpfe
   unter dem Falz – und „Nur notwendige" muss genauso erreichbar sein wie
   „Alle akzeptieren", sonst ist es eine Dunkelfalle. */
.consent__box {
    width: min(100%, 720px);
    background: var(--nacht-2);
    border: 1px solid var(--linie); border-top: 3px solid var(--orange);
    padding: clamp(1.1rem, 3vw, 2rem);
    display: flex; flex-direction: column;
    /* Genau der Platz, den das Overlay übrig lässt – kein Schätzwert. */
    max-height: 100%;
}
.consent__box > * { flex: 0 0 auto; }
.consent__zwecke {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 4rem;
    /* Angeschnittener Inhalt soll sichtbar angeschnitten wirken */
    scrollbar-width: thin;
}
.consent__box h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.consent__text { font-size: .93rem; }
.consent__text a { text-decoration: underline; }

.consent__zwecke { display: grid; gap: .7rem; margin: 1rem 0; align-content: start; }
.consent__zweck {
    background: var(--nacht-3); border: 1px solid var(--linie);
    padding: .8rem 1rem;
}
.consent__zweck > label {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem;
    align-items: start; cursor: pointer;
}
.consent__zweck input { margin-top: .15rem; width: 20px; height: 20px; accent-color: var(--orange); }
.consent__zweck input:disabled { accent-color: var(--grau-2); cursor: default; }
.consent__zweck b { color: var(--weiss); }
.consent__zweck em { font-style: normal; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-2); margin-left: .6rem; white-space: nowrap; }
.consent__zweck small { display: block; margin-top: .25rem; font-size: .86rem; line-height: 1.5; }

.consent__detail { margin-top: .6rem; padding-left: 1.9rem; }
.consent__detail summary {
    cursor: pointer; list-style: none;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--grau-2);
}
.consent__detail summary::-webkit-details-marker { display: none; }
.consent__detail summary::before { content: "+ "; color: var(--orange); }
.consent__detail[open] summary::before { content: "3 "; }
.consent__detail summary:hover { color: var(--weiss); }
.consent__detail dl { margin: .6rem 0 .2rem; font-size: .8rem; color: var(--grau-2); display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; }
.consent__detail dt { font-weight: 700; color: var(--grau); }
.consent__detail dd { margin: 0; }

.consent__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.consent__knoepfe .knopf { width: 100%; }
.consent__fuss {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie);
    font-size: .82rem; color: var(--grau-2);
}
.consent__fuss a { color: var(--grau-2); text-decoration: underline; }
.consent__stand { margin-left: auto; }

/* --- Schnellleiste (nur Handy) -------------------------------------------- */
.schnellbar { display: none; }

/* ===========================================================================
   Kleinere Bildschirme
   =========================================================================== */

@media (max-width: 1080px) {
    .zahlen__raster { grid-template-columns: 1fr 1fr; }
    .zahl:nth-child(3) { border-left: 0; padding-left: 0; }
    .zahl:nth-child(3), .zahl:nth-child(4) { border-top: 1px solid var(--linie); }
    .fuss__raster { grid-template-columns: 1fr 1fr; }
    .fuss__marke { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .dienste { grid-template-columns: 1fr; }
    .zwei, .zwei--gleich, .duo { grid-template-columns: 1fr; }
    .band__in { flex-direction: column; align-items: flex-start; }
    .band__knoepfe { width: 100%; }
}

@media (max-width: 820px) {
    html { scroll-padding-top: 84px; }

    .kopfleiste a.kopfleiste__tuev { display: none; }
    .kopfleiste__in { min-height: 36px; font-size: .78rem; }

    .kopf__in { min-height: 66px; gap: 1rem; }
    .burger { display: block; position: relative; z-index: 96; }

    .navi {
        position: fixed;
        top: 0; left: auto;
        right: var(--fix-rechts); bottom: var(--fix-unten);
        width: min(86vw, 340px);
        background: var(--nacht-2);
        border-left: 1px solid var(--linie);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; padding: 5.8rem 1.7rem 2rem;
        transform: translateX(100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto; z-index: 95;
    }
    .navi.ist-offen { transform: translateX(0); }
    .navi ul { flex-direction: column; gap: 0; }
    .navi li { border-bottom: 1px solid var(--linie); }
    .navi a { padding: 1rem 0; font-size: .95rem; }
    .navi a::after { display: none; }
    .navi a[aria-current="page"] { color: var(--orange); }
    .navi a.knopf { margin-top: 1.8rem; padding: .95rem 1.6rem; }
    body.ist-gesperrt { overflow: hidden; }

    .schnellbar {
        position: fixed;
        left: 0; right: var(--fix-rechts); bottom: var(--fix-unten);
        z-index: 80;
        display: grid; grid-template-columns: repeat(3, 1fr);
        background: rgba(15, 13, 12, .97);
        border-top: 1px solid var(--linie);
        padding-bottom: env(safe-area-inset-bottom);
        backdrop-filter: blur(8px);
    }
    .schnellbar a {
        padding: .85rem .3rem; text-align: center;
        color: #fff; text-decoration: none;
        font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
        border-left: 1px solid var(--linie);
    }
    .schnellbar a:first-child { border-left: 0; }
    .schnellbar a:active { background: var(--orange); }
    .fuss { padding-bottom: 4rem; }
    .consent { padding-bottom: 4.4rem; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }

    /* Einwilligungsfenster auf schmalen Geräten enger setzen, damit von der
       Zweckliste mehr sichtbar bleibt. */
    .consent { padding: .6rem; padding-bottom: 4.2rem; }
    .consent__box { padding: 1.1rem 1.1rem 1rem; }
    .consent__box h2 { font-size: 1.08rem; margin-bottom: .5rem; }
    .consent__text { font-size: .88rem; }
    .consent__zweck { padding: .7rem .85rem; }
    .consent__zweck small { font-size: .83rem; }
    .consent__detail dl { font-size: .78rem; }
    .consent__fuss { margin-top: .9rem; padding-top: .8rem; gap: .8rem; font-size: .78rem; }
    .consent__stand { margin-left: 0; flex-basis: 100%; }
    .wrap { width: calc(100% - 2rem); }
    .feldpaar { grid-template-columns: 1fr; }
    .consent__knoepfe { grid-template-columns: 1fr; }
    .fuss__raster { grid-template-columns: 1fr; gap: 2rem; }
    .buehne__knoepfe .knopf { flex: 1 1 100%; }
    .termine { grid-template-columns: 1fr 1fr; }
    .leistung__kopf { gap: 1rem; }
    .panel { clip-path: none; }
}

@media (max-width: 420px) {
    .marke__bild { height: 22px; }
    .zahlen__raster { grid-template-columns: 1fr; }
    .zahl { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); }
    .zahl:first-child { border-top: 0; }
}

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

/* --- Druck ---------------------------------------------------------------- */
@media print {
    .kopfleiste, .kopf, .schnellbar, .consent, .band, .navi, .burger,
    .kartenfeld, .sprungliste, .geist { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .sektion, .seitenkopf, .sektion--ton, .zahlen { background: #fff !important; padding: 1rem 0; }
    h1, h2, h3, .termin__datum { color: #000 !important; }
    .fuss { background: #fff; color: #000; }
    a { color: #000; }
}