/* ===========================================================================
   Kfz-Sachverständigenbüro Karim – Gestaltung

   Aufbau und Formensprache übernommen von der Seite Autoservice Noah:
   fast schwarzer, leicht kühler Grund, große Versalüberschriften, geschrägte
   Knöpfe. Einziger Akzent ist das Blau aus dem Logo (#2AA9E2).
   =========================================================================== */

/* ---------------------------------------------------------------------------
 * 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 */
    --blau:       #2aa9e2;  /* Logo-Blau, für Schrift und Linien auf dunklem Grund */
    --blau-hell:  #5cc0ee;
    --blau-tief:  #1a8bc2;  /* Flächen mit weißer Schrift – das Logo-Blau wäre dafür zu hell */

    /* Dunkler Grund, mehrere sehr nahe Töne für die Schichtung */
    --nacht:   #111519;
    --nacht-2: #171c21;
    --nacht-3: #1e242a;
    --nacht-4: #29303a;

    --weiss:  #ffffff;
    --grau:   #a3abb4;
    --grau-2: #76808a;

    --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(--blau); text-underline-offset: 3px; }
a:hover { color: var(--blau-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(--blau); 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(--blau-tief); 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(--blau-tief); 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(--blau); 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(--blau); }

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

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

/* Textlink mit kleinem blauem 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(--blau-tief); 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(--blau); }
.mehr:hover::before { background: var(--blau-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: #0b0e11;
    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__gebiet { display: inline-flex; align-items: center; gap: .45rem; }

.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: var(--grau); }

/* --- 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(17, 21, 25, .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: 40px; 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(--blau); }

/* Knappe Abstände: In der Leiste stehen sieben Punkte plus Knopf. Kommt
   einer dazu, bitte nachmessen – bei 1280 px darf nichts über den
   rechten Rand laufen. */
.navi { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.navi ul { display: flex; gap: 1.25rem; 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(--blau-tief); 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(--blau); }
.krumen [aria-current="page"] { color: var(--weiss); }

/* --- Bühne ---------------------------------------------------------------- */
.buehne { position: relative; overflow: hidden; }
.buehne::before {
    content: ""; position: absolute; top: -25%; right: -10%; width: 60%; height: 150%;
    background: linear-gradient(150deg, rgba(42, 169, 226, .17), rgba(42, 169, 226, 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); }
/* Die Polsterung sitzt auf der Folie, nicht auf dem Abschnitt: Sonst
   bekaeme die Spur sie einmal aussen statt einmal je Folie. */
.buehne__in {
    position: relative; min-width: 0;
    padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.buehne__folie .buehne__in > * { 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(--blau);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--blau-tief); }
.buehne h1 { margin-bottom: .5em; }
.buehne h1 .akzent { color: var(--blau); }
.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(--blau);
    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 ------------------------------------------------------------ */
/* overflow-x: clip hält die dekorative Geisterschrift im Abschnitt. Sie ist
   absichtlich breiter als der Textspiegel – sie darf aber nicht dazu führen,
   dass sich die ganze Seite seitlich schieben lässt. clip statt hidden, weil
   hidden aus dem Abschnitt einen Rollbereich machen würde. */
.sektion { position: relative; padding: var(--luft) 0; overflow-x: clip; }
.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(--blau); }

/* --- 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(--blau-tief);
}
.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(--blau); }
.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; }

/* --- Blaues Band --------------------------------------------------------- */
.band { background: var(--blau-tief); 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(42, 169, 226, .16), rgba(42, 169, 226, 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(--blau); }
.sprungliste a.ist-sichtbar { background: var(--blau-tief); border-color: var(--blau); 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(--blau); 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(--blau); 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(--blau-tief); }
.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(--blau); font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--blau); }
.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(--blau);
    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(--blau);
}
.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(--blau); background: #0c0f12; }
.feld input::placeholder, .feld textarea::placeholder { color: #5f6873; }
.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(--blau); }

.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(--blau); 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(42, 169, 226, .12); border-color: var(--blau); color: #a9dcf3; }

/* --- Infokasten ----------------------------------------------------------- */
.infobox { background: var(--nacht-2); border: 1px solid var(--linie); padding: 1.6rem; }
.infobox--akzent { border-top: 3px solid var(--blau); }
.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(--blau-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(--blau); }

/* --- 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: #0c0f12; 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: 44px; 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(--blau); }
.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(--blau); }

/* ===========================================================================
   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(6, 8, 10, .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(--blau);
    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;
    /* Nur senkrecht rollen. Ohne das zweite overflow rechnet der Browser die
       waagerechte Achse auf „auto" hoch und blendet einen Rollbalken ein,
       der 10 Pixel frisst, obwohl es nichts zu rollen gibt. */
    overflow-y: auto;
    overflow-x: clip;
    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(--blau); }
.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(--blau); }
.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; }

/* ===========================================================================
   Angebotsslider
   Grundlage ist CSS-Scrollrasterung: Die Spur laesst sich mit Finger, Rad und
   Tastatur schieben, auch wenn kein JavaScript laeuft. Die Pfeile und Punkte
   darunter sind Zugabe und werden erst von site.js eingeblendet - was ohne
   Skript nichts tut, soll auch nicht sichtbar sein.
   =========================================================================== */
.angebote { position: relative; }

.angebote__spur {
    display: grid; grid-auto-flow: column;
    /* Feste Spaltenbreite statt 1fr: Mit 1fr teilten sich alle Karten die
       sichtbare Breite, nichts ragte hinaus, und aus dem Slider wuerde ein
       gequetschtes Raster. So sind immer vier zu sehen und der Rest rollt. */
    grid-auto-columns: calc((100% - 3px) / 4);
    gap: 1px;
    background: var(--linie);
    border: 1px solid var(--linie);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.angebote__spur::-webkit-scrollbar { display: none; }
.angebote__spur:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }

@media (max-width: 1080px) { .angebote__spur { grid-auto-columns: calc((100% - 2px) / 3); } }
@media (max-width: 820px)  { .angebote__spur { grid-auto-columns: calc((100% - 1px) / 2); } }

.angebot {
    scroll-snap-align: start;
    background: var(--nacht-2);
    padding: 1.6rem 1.4rem 1.4rem;
    display: flex; flex-direction: column; gap: .55rem;
    min-width: 0;
}
.angebot__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.angebot__ico { width: 26px; height: 26px; color: var(--akzent); flex: none; }
.angebot__marke {
    padding: .2rem .55rem; background: var(--akzent); color: #fff; flex: none;
    font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.angebot__kurz { font-size: .86rem; color: var(--grau-2); line-height: 1.5; flex: 1 1 auto; }
.angebot__preis {
    margin-top: auto; padding-top: .4rem; font-size: 1.6rem; font-weight: 800; color: var(--akzent-hell);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1;
}
/* Preisstaffel: zwei vollstaendige Preise statt eines mit "zzgl.". */
.angebot__staffel { margin: auto 0 0; padding-top: .5rem; display: grid; gap: .3rem; }
.angebot__staffel > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
    border-top: 1px solid var(--linie-fein); padding-top: .3rem;
}
.angebot__staffel > div:first-child { border-top: 0; padding-top: 0; }
.angebot__staffel dt { font-size: .74rem; font-weight: 700; color: var(--grau-2); }
.angebot__staffel dd {
    margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--akzent-hell);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    /* Dieselbe enge Zeilenhoehe wie beim einfachen Preis - sonst sitzt die
       Karte mit Staffel ein paar Pixel tiefer als die uebrigen. */
    line-height: 1.1;
}
.angebot__staffel dt { line-height: 1.1; }

.angebot__zusatz {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--grau-2);
}

/* --- Die Bühne als Slider ------------------------------------------------
   Eine Folie füllt die Breite. Der schräge Farbverlauf (.buehne::before)
   liegt auf dem Abschnitt, nicht auf der Spur – er bleibt deshalb stehen,
   während die Folien darüber weiterlaufen. Die Folien sind Grid-Spalten
   gleicher Breite, dadurch haben sie automatisch dieselbe Höhe und die
   Bühne springt beim Weiterschalten nicht. */
.buehne__spur {
    position: relative;
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* Wischen koennen native Rollbereiche von sich aus. Diese Zeile ist nur
       fuer aeltere iOS-Fassungen, die sonst ohne Schwung rollen. */
    -webkit-overflow-scrolling: touch;
}
.buehne__spur::-webkit-scrollbar { display: none; }
.buehne__spur:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: -3px; }
.buehne__folie { scroll-snap-align: start; min-width: 0; display: flex; align-items: center; }
/* Der Preis steht auf eigener Zeile – derselbe Rhythmus wie „Ihre Werkstatt /
   für alle Marken" auf der ersten Folie. In einer Zeile liefe „Kleine
   Inspektion, Pkw ab 249,99 €" ineinander. */
.buehne__folie h2 .akzent { display: block; }

/* Fähnchen im Kicker, etwa „Beliebt" */
.kicker__marke {
    margin-left: .6rem; padding: .15rem .5rem;
    background: var(--akzent); color: #fff;
    font-size: .62rem; font-weight: 800; letter-spacing: .1em;
}

/* Der Kicker der hervorgehobenen Folie: statt des Strichs ein voller
   Balken, damit das Angebot schon vor dem Lesen aus der Reihe fällt. */
.kicker--fahne {
    background: var(--blau-tief); color: #fff;
    padding: .32rem .7rem;
    font-size: .68rem; letter-spacing: .16em;
}
.kicker--fahne::before { content: none; }
.kicker--fahne .kicker__marke { background: rgba(0, 0, 0, .25); }

/* Kleingedrucktes unter dem Fließtext einer Angebotsfolie */
.buehne__feindruck {
    display: block; margin-top: .7rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--grau-2);
}

/* Preisstaffel in Bühnengröße – so schwer wie sonst die Akzentzeile */
.buehne__staffel { margin: 0 0 1.4rem; display: grid; gap: .5rem; max-width: 26rem; }
.buehne__staffel > div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linie);
}
.buehne__staffel > div:last-child { border-bottom: 0; padding-bottom: 0; }
.buehne__staffel dt { font-size: .84rem; font-weight: 700; color: var(--grau-2); }
.buehne__staffel dd {
    margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800;
    color: var(--akzent); letter-spacing: -.02em; line-height: 1;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- Pfeile links und rechts neben der Folie ---------------------------
   Sie liegen als eigene Ebene ueber der Buehne. Unterhalb von 1420 Pixeln
   ist neben dem Textspiegel kein Platz (der Textspiegel ist hoechstens
   1280 breit, die Pfeile brauchen je rund 70) - dort ruecken sie deshalb
   in die Zeile unter der Folie, zu den Punkten. */
.buehne__pfeil {
    appearance: none; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(8, 10, 12, .55); color: var(--weiss);
    width: 52px; height: 52px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .16s ease, border-color .16s ease;
}
.buehne__pfeil:hover { background: var(--akzent); border-color: var(--akzent); }
.buehne__pfeil:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }

/* Immer am Abschnitt ausgerichtet, nie am Textspiegel. */
.buehne__pfeil { position: absolute; z-index: 3; }

/* Ab 1420 ist neben dem Textspiegel Platz: links und rechts auf halber Höhe.
   Der Textspiegel ist höchstens 1280 breit, es bleiben also je 70 Pixel
   Rand – genug für einen Pfeil von 52 plus Abstand. */
@media (min-width: 1420px) {
    .buehne__pfeil          { top: 50%; transform: translateY(-50%); }
    .buehne__pfeil--zurueck { left: clamp(1rem, 2.2vw, 2.5rem); }
    .buehne__pfeil--vor     { right: clamp(1rem, 2.2vw, 2.5rem); }
}

/* Darunter unten rechts, nebeneinander. */
@media (max-width: 1419px) {
    .buehne__pfeil          { bottom: clamp(1rem, 2vw, 1.6rem); width: 44px; height: 44px; }
    .buehne__pfeil--zurueck { right: calc(1.3rem + 44px + .6rem); }
    .buehne__pfeil--vor     { right: 1.3rem; }
    /* Platz rechts für die beiden Pfeile, damit der Hinweistext nicht
       darunterläuft. */
    .buehne__bedienung      { padding-right: calc(2 * 44px + 2.6rem); min-height: 44px; }
}

/* Ab hier blendet die Seite die feste Schnellleiste am unteren Bildschirmrand
   ein (Anrufen / Termin / Anfahrt). Sie ist rund 48 Pixel hoch und lag genau
   auf den Pfeilen – beim Seitenaufruf liessen die sich dadurch nicht einmal
   antippen. Die Pfeile ruecken deshalb ueber die Leiste.

   Die Buehne darf dafuer NICHT hoeher werden: Die Pfeile haengen an ihrer
   Unterkante, waechst sie, wandert die Unterkante um denselben Betrag nach
   unten und die Pfeile stehen wieder an derselben Stelle im Bild. */
@media (max-width: 1080px) {
    /* Der Streifen zwischen den Knöpfen der Folie und der Schnellleiste ist
       auf einem 375er Display rund 49 px hoch. Der Versatz setzt die 40 px
       großen Pfeile mittig hinein – oben wie unten bleiben gut 4 px Luft.
       Größere Pfeile passen hier nicht, ohne den Knopf oder die Leiste zu
       berühren. */
    /* Fester Streifen am Fuss der Buehne fuer Pfeile und Hinweistext. Er
       muss als Polster gesetzt werden und darf nicht aus dem Inhalt
       entstehen: Sonst haengt die Hoehe der Buehne daran, wie viele Zeilen
       der Hinweistext gerade braucht – und die an der Unterkante haengenden
       Pfeile wanderten mit jeder Zeile hinter die Schnellleiste. */
    .buehne--slider    { padding-bottom: 4rem; }
    .buehne__pfeil     { bottom: 2rem; width: 40px; height: 40px; }

    /* Der Hinweistext wandert mit in den Streifen, links neben die Pfeile,
       und verlaesst dafuer den Textfluss. Bliebe er darin, wuechse die
       Buehne mit jeder zusaetzlichen Zeile – und die Pfeile an ihrer
       Unterkante rutschten wieder hinter die Schnellleiste. So bleibt er
       lesbar, laeuft nicht unter den Pfeilen durch und aendert nichts an
       der Hoehe. */
    .buehne > .wrap    { position: static; }
    .buehne__bedienung {
        position: absolute; z-index: 2; bottom: 2rem;
        left: 1.3rem; right: calc(2 * 40px + 2.5rem);
        /* Feste Hoehe, kein Mindestmass: Der Text sitzt damit auf genau
           derselben Linie wie die Pfeile daneben. */
        padding: 0; height: 40px;
    }
    .buehne__fuss      { margin: 0; font-size: .68rem; line-height: 1.3; }
    /* Der Pfeil braucht einen eigenen Streifen zwischen den Knöpfen der Folie
       und der Schnellleiste. Das schmalere Polster schafft ihn: Die Bühne
       wird kürzer, ihre Unterkante rutscht über die Leiste, und die Pfeile
       hängen an dieser Unterkante.

       Wichtig: den Versatz NICHT zusätzlich vergrößern. Die Pfeile würden
       dadurch weiter nach oben wandern und auf dem Knopf „Leistungen
       ansehen" landen – anklickbar wäre dann der Pfeil, gemeint hätte der
       Besucher den Knopf. */
    .buehne__in        { padding-bottom: .8rem; }
}

/* Bedienung unter der Spur, am Textspiegel ausgerichtet */
.buehne__bedienung {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding-bottom: clamp(1rem, 2vw, 1.6rem);
}
.buehne__fuss {
    flex: 1 1 100%; margin: .2rem 0 0;
    font-size: .8rem; color: var(--grau-2);
}

/* --- Bedienung: nur mit Skript sichtbar ---------------------------------- */
.angebote__bedienung { display: none; }
.angebote.ist-rollbar .angebote__bedienung {
    display: flex; align-items: center; justify-content: center;
    gap: 1.2rem; margin-top: 1.4rem;
}
.angebote__pfeil {
    appearance: none; border: 1px solid var(--linie); background: var(--nacht-2);
    color: var(--weiss); cursor: pointer;
    width: 44px; height: 44px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .16s ease, border-color .16s ease;
}
.angebote__pfeil:hover:not(:disabled) { background: var(--akzent); border-color: var(--akzent); }
.angebote__pfeil:disabled { opacity: .3; cursor: default; }
.angebote__pfeil:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.angebote__punkte { display: flex; gap: .5rem; }
.angebote__punkt {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    width: 9px; height: 9px; background: var(--nacht-4);
    transition: background-color .16s ease;
}
.angebote__punkt.ist-an { background: var(--akzent); }
.angebote__punkt:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }

@media (max-width: 620px) {
    .angebote__spur { grid-auto-columns: 82%; }
    .angebot { padding: 1.3rem 1.2rem 1.2rem; }
}

/* --- 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%; }
}

/* Die Klappnavigation gilt bis 1279 px. Vorher schaltete sie erst bei
   820 px um – dazwischen wurde die volle Leiste gezeigt, die dort gar
   nicht hineinpasste und rechts hinauslief. */
@media (max-width: 1279px) {
    html { scroll-padding-top: 84px; }

    .kopfleiste__gebiet { display: none !important; }
    .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(--blau); }
    .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(12, 15, 18, .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(--blau-tief); }
    .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%; }
    /* Ohne eigene Angabe griffe hier die Untergrenze von 4rem aus der
       clamp-Angabe – ein Wort wie „WERKSTATT" wäre dann breiter als der
       Bildschirm. */
    .geist { font-size: clamp(2.4rem, 12vw, 4rem); }
    .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: 30px; }
    .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; }
}

/* --- Rechtstext im Fenster ------------------------------------------------
   Der Pflichtlink neben dem Kontrollkästchen führte bisher von der Seite weg.
   Wer zurückkam, fand je nach Browser ein leeres Formular vor. Der Text wird
   deshalb über der Seite gezeigt – das Formular bleibt stehen, mitsamt allem
   Getippten. Aufbau wie beim Einwilligungsdialog: Kopf und Fuß stehen fest,
   nur der Rumpf rollt. */
.rtdialog {
    position: fixed;
    top: 0; left: 0;
    right: var(--fix-rechts); bottom: var(--fix-unten);
    z-index: 170;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(6, 8, 10, .78);
}
.rtdialog[hidden] { display: none; }
.rtdialog__box {
    width: min(100%, 760px); max-height: 100%;
    background: var(--nacht-2);
    border: 1px solid var(--linie); border-top: 3px solid var(--blau);
    display: flex; flex-direction: column;
}
.rtdialog__kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: clamp(.9rem, 2.5vw, 1.3rem) clamp(1.1rem, 3vw, 2rem);
    border-bottom: 1px solid var(--linie);
}
.rtdialog__kopf h2 { font-size: 1.15rem; margin: 0; }
.rtdialog__zu {
    appearance: none; border: 1px solid var(--linie); background: transparent;
    color: var(--weiss); width: 40px; height: 40px; flex: 0 0 auto;
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.rtdialog__zu:hover { background: var(--blau-tief); border-color: var(--blau); }
.rtdialog__zu:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.rtdialog__rumpf {
    flex: 1 1 auto; overflow-y: auto; overflow-x: clip;
    padding: clamp(1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 2rem);
    font-size: .92rem;
}
.rtdialog__rumpf h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.rtdialog__rumpf h2:first-child { margin-top: 0; }
.rtdialog__fuss {
    padding: clamp(.8rem, 2vw, 1.1rem) clamp(1.1rem, 3vw, 2rem);
    border-top: 1px solid var(--linie);
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem;
}

/* --- Angebotsseite --------------------------------------------------------
   Aufgebaut wie ein Leistungsblock, damit beide Seiten dieselbe Sprache
   sprechen – nur mit einer Preisspalte rechts. Die fällt bei schmalen
   Fenstern unter den Titel, statt ihn zusammenzuquetschen. */
.preisblock {
    border-top: 1px solid var(--linie);
    padding: 2.2rem 0;
    scroll-margin-top: 130px;
}
.preisblock:last-of-type { border-bottom: 1px solid var(--linie); }
.preisblock:target { background: var(--nacht-2); box-shadow: inset 3px 0 0 var(--blau); padding-inline: 1.4rem; }

.preisblock__kopf {
    display: flex; flex-wrap: wrap; gap: 1.4rem;
    align-items: flex-start; margin-bottom: 1.3rem;
}
.preisblock__ico {
    flex: none; width: 40px; height: 40px;
    color: var(--blau); stroke-width: 1.4; margin-top: .2rem;
}
.preisblock__titel { flex: 1 1 16rem; min-width: 0; }
.preisblock__titel h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: .4rem; }
.preisblock__kurz { margin: 0; }

.preisblock__preis { flex: 0 0 auto; text-align: right; margin-left: auto; }
.preisblock__betrag {
    display: block;
    font-family: var(--schrift-kopf, inherit); font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.05;
    color: var(--blau); white-space: nowrap;
}
.preisblock__steuer {
    display: block; margin-top: .35rem;
    font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--grau-2);
}
.preisblock__zusatz { margin: 1rem 0 0; color: var(--grau-2); font-size: .92rem; }
.preisblock__tat { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* Zwei Gesamtpreise nebeneinander, etwa je Kältemittel. */
.staffel { margin: 0; display: grid; gap: .5rem; }
.staffel > div { display: flex; align-items: baseline; justify-content: flex-end; gap: .9rem; }
.staffel dt { margin: 0; font-size: .82rem; color: var(--grau-2); white-space: nowrap; }
.staffel dd {
    margin: 0; font-weight: 800; white-space: nowrap;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--blau);
}

@media (max-width: 620px) {
    /* Auf dem Handy steht der Preis links unter dem Titel – rechtsbündig
       wirkt er dort wie abgeschnitten. */
    .preisblock__preis { text-align: left; margin-left: 0; }
    .staffel > div { justify-content: flex-start; }
}

/* --- Preisband unter der Bühne -------------------------------------------
   Ein schmaler Streifen, kein Kasten: Er soll den Blick weiterführen, nicht
   die Seite unterbrechen. Auf dem Handy rollt er seitlich, statt auf fünf
   Zeilen aufzuquellen – die Höhe direkt unter der Bühne ist kostbar. */
.preisband { background: var(--nacht-2); border-bottom: 1px solid var(--linie); }
.preisband__in {
    display: flex; align-items: center; gap: 1rem;
    padding-block: 1rem;
}
.preisband__marke {
    flex: none;
    font-family: var(--schrift-kopf, inherit); font-weight: 800;
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--blau);
}
.preisband__kachel {
    flex: 1 1 8rem; min-width: 0;
    border-left: 1px solid var(--linie); padding-left: .9rem;
    text-decoration: none; display: block;
}
.preisband__name {
    display: block; font-size: .72rem; color: var(--grau-2);
    margin-bottom: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preisband__preis {
    display: block; white-space: nowrap;
    font-family: var(--schrift-kopf, inherit); font-weight: 800;
    font-size: 1.15rem; color: var(--weiss);
}
.preisband__kachel:hover .preisband__preis { color: var(--blau); }
.preisband__kachel:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
.preisband__mehr {
    flex: none; white-space: nowrap; text-decoration: none;
    font-family: var(--schrift-kopf, inherit); font-weight: 600;
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--blau);
}
.preisband__mehr:hover { color: var(--blau-hell); }

@media (max-width: 900px) {
    .preisband__in {
        overflow-x: auto; scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .preisband__in::-webkit-scrollbar { display: none; }
    .preisband__kachel { flex: 0 0 auto; }
    .preisband__marke { position: sticky; left: 0; background: var(--nacht-2); padding-right: .4rem; }
}

/* --- Aufmacher für ein großes Angebot ------------------------------------ */
.aufmacher { border-top: 1px solid var(--linie); }
.aufmacher__in {
    display: flex; gap: clamp(1.5rem, 4vw, 3rem);
    align-items: flex-start; flex-wrap: wrap;
}
.aufmacher__text { flex: 1 1 22rem; min-width: 0; }
.aufmacher__text h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: .3rem 0 .8rem; }
.aufmacher__satz { margin: 0 0 1.2rem; max-width: 46rem; }
.aufmacher__tat { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* Der Preis steht in einem eigenen Block – er ist das Argument, nicht eine
   Fußnote unter dem Text. */
.aufmacher__preis {
    flex: 0 0 auto; min-width: 12rem;
    background: var(--nacht-2);
    border: 1px solid var(--linie); border-top: 3px solid var(--blau);
    padding: 1.4rem 1.6rem; text-align: right;
}
.aufmacher__betrag {
    display: block; white-space: nowrap; line-height: 1;
    font-family: var(--schrift-kopf, inherit); font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--blau);
}
.aufmacher__klein {
    display: block; margin-top: .5rem;
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--grau-2);
}

@media (max-width: 620px) {
    .aufmacher__preis { width: 100%; text-align: left; }
}

/* --- Hervorgehobenes Angebot im Seitenkopf -------------------------------
   Steht neben der Überschrift, nicht darunter: Wer die Seite öffnet, soll
   das eine Angebot sehen, ohne zu scrollen. Auf schmalen Fenstern rutscht
   es unter den Text – nebeneinander wäre dort beides zu schmal. */
.seitenkopf__duo {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 900px) {
    .seitenkopf__duo { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); }
}

.oben {
    display: block; text-decoration: none;
    background: var(--nacht-2);
    border: 1px solid var(--linie); border-top: 3px solid var(--blau);
    padding: 1.4rem 1.5rem 1.3rem;
    transition: border-color .18s ease, transform .18s ease;
}
.oben:hover { border-color: var(--blau); transform: translateY(-2px); }
.oben:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .oben, .oben:hover { transform: none; transition: none; } }

.oben__fahne {
    display: inline-block; margin-bottom: .9rem;
    background: var(--blau-tief); color: #fff;
    font-family: var(--schrift-kopf, inherit); font-weight: 800;
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    padding: .3rem .7rem;
}
.oben__titel {
    display: block; color: var(--weiss);
    font-family: var(--schrift-kopf, inherit); font-weight: 800;
    font-size: 1.12rem; line-height: 1.25; margin-bottom: .7rem;
}
.oben__preis {
    display: block; white-space: nowrap; line-height: 1;
    font-family: var(--schrift-kopf, inherit); font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.1rem); color: var(--blau);
}
.oben__klein {
    display: block; margin-top: .45rem;
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--grau-2);
}
.oben__mehr {
    display: block; margin-top: 1rem; padding-top: .9rem;
    border-top: 1px solid var(--linie);
    font-family: var(--schrift-kopf, inherit); font-weight: 600;
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--blau);
}

/* ---------------------------------------------------------------------------
 * Schritte nach dem Unfall
 *
 * Nummeriert, weil die Reihenfolge wirklich zählt: erst sichern, dann
 * Beweise, dann nichts unterschreiben, dann der Gutachter. Die Ziffer steht
 * groß im Logo-Blau, darunter dieselbe Kante wie bei den Leistungen.
 * ------------------------------------------------------------------------- */
.schritte {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
    counter-reset: schritt;
}
.schritte li { counter-increment: schritt; border-top: 1px solid var(--linie); padding-top: 1.4rem; }
.schritte li::before {
    content: counter(schritt, decimal-leading-zero);
    display: block; margin-bottom: .9rem;
    font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
    color: var(--blau);
}
.schritte h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.schritte p { font-size: .96rem; margin: 0; }

@media (max-width: 1080px) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .schritte { grid-template-columns: 1fr; } }

/* Festnetz und Handy nebeneinander, am Handy untereinander */
.telefonpaar { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin: 0; }