/* ==========================================================================
   Autoteile R&S – Stylesheet
   --------------------------------------------------------------------------
   Gestaltungsidee: Anthrazit wie ein Showroom bei Nacht, Signalrot als
   einziger Akzent (Anruf-Knopf, Aufzählungspunkte). Weiße Schilder mit
   Kopfband und roten Punkten erinnern an das Ladenschild an der
   Zehnthofstraße. Das Schildblau bleibt nur im Logo. Schrift Barlow
   (Straßenschild-Typografie).

   Inhalt
     1.  Schriften
     2.  Farben und Grundwerte
     3.  Grundlagen (Seite, Text, Links, Fokus)
     4.  Hilfsklassen (Breite, Spalten, Vorlesen)
     5.  Kopfzeile und Navigation
     6.  Knöpfe, Öffnungsstatus, Bewertung
     7.  Titelbereich der Startseite
     8.  Schilder (Service, Öffnungszeiten)
     9.  Abschnitte, Fotos, Fließtext
     10. Markenwand und Vorteile
     11. Seitenkopf der Unterseiten und Aufruf
     12. Kontakt: Daten, Formular, Meldungen
     13. Anfahrt und Karte (Zwei-Klick-Einbindung)
     14. Rechtstexte und Fehlerseite
     15. Seitenfuß
     16. Weniger Bewegung
     17. ENTWURF: Leiste zum Umschalten der Schriftzüge (später löschen)
   ========================================================================== */


/* === 1. Schriften =========================================================
   Barlow und Barlow Condensed (SIL Open Font License), lokal gespeichert –
   es wird keine Verbindung zu Google aufgebaut. */

@font-face {
    font-family: "Barlow";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/barlow-400.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/barlow-600.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
}


/* === 2. Farben und Grundwerte ============================================= */

:root {
    --schildblau: #1b3a8c;        /* Blau des Ladenschilds: aktuell nirgends mehr verwendet */
    --akzent: #1f2329;            /* Anthrazit: Knöpfe, Links, Überschriften, Schild-Kopfband */
    --akzent-dunkel: #000000;     /* Knopf beim Überfahren */
    --nachtblau: #1f2329;         /* (Name historisch) Text, dunkle Abschnitte, Seitenfuß */
    --graphit: #1a1c21;           /* dunkler Grund von Titelbereich und Seitenköpfen */
    --signalrot: #d2232a;         /* Akzent: Anruf-Knopf, Aufzählungspunkte, Fokus */
    --signalrot-text: #b51d24;    /* Rot für Schrift auf Weiß und Knopf beim Überfahren */
    --blech: #f1f2f4;             /* helle Flächen */
    --linie: #d8dbe0;             /* Rahmen und Trennlinien */
    --stahlgrau: #5b616c;         /* Nebentext */
    --offen-gruen: #27b46a;       /* Punkt „Jetzt geöffnet“ */
    --weiss: #ffffff;

    --schrift-text: "Barlow", "Segoe UI", Arial, sans-serif;
    --schrift-titel: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

    --rundung: 6px;
    --abstand-abschnitt: clamp(3.5rem, 8vw, 6.5rem);
    --schatten-schild: 0 1px 0 var(--linie), 0 22px 40px -26px rgba(20, 22, 28, 0.5);
}


/* === 3. Grundlagen ======================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* Sprungziele nicht unter der festen Kopfzeile verstecken */
}

body {
    margin: 0;
    background: var(--weiss);
    color: var(--nachtblau);
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3 {
    margin: 0 0 0.5em;
    font-family: var(--schrift-titel);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.005em;
    color: var(--akzent);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.75rem, 7.5vw, 5.25rem);
}

h2 {
    font-size: clamp(1.9rem, 4.2vw, 2.75rem);
}

h3 {
    font-size: 1.4rem;
    font-weight: 600;
}

p,
ul,
ol,
dl,
address {
    margin: 0 0 1em;
}

address {
    font-style: normal;
}

a {
    color: var(--akzent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* Kein Doppeltipp-Zoom auf Knöpfen und Links, dezente Tipp-Hervorhebung */
a,
button,
input,
select,
textarea,
label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(31, 35, 41, 0.12);
}

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

/* Auf dunklem Grund ist ein weißer Fokusrahmen besser zu sehen */
.titel :focus-visible,
.seitenkopf :focus-visible,
.abschnitt-nacht :focus-visible,
.fuss :focus-visible {
    outline-color: var(--weiss);
}

::selection {
    background: var(--akzent);
    color: var(--weiss);
}


/* === 4. Hilfsklassen ====================================================== */

.breite {
    width: min(100% - 2rem, 72rem);
    margin-inline: auto;
}

.breite-schmal {
    width: min(100% - 2rem, 46rem);
}

.mittig {
    text-align: center;
}

.zweispaltig {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 860px) {
    .zweispaltig {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: start;
    }

    .zweispaltig-mitte {
        align-items: center;
    }

    .zweispaltig-oben {
        grid-template-columns: 0.85fr 1.15fr;
    }
}

/* Nur für Vorleseprogramme sichtbar */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprunglink {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--akzent);
    color: var(--weiss);
    font-weight: 600;
    border-radius: var(--rundung);
}

.sprunglink:focus {
    top: 1rem;
}

.symbol {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}


/* === 5. Kopfzeile und Navigation ========================================== */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
}

.kopf-innen {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(100% - 2rem, 76rem);
    min-height: 4.25rem;
    margin-inline: auto;
}

/* Schriftzug: blaue Tafel „R&S“ + Name + Leitspruch */
.marke {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-right: auto;
    color: var(--nachtblau);
    text-decoration: none;
}

.marke-tafel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 2.5rem;
    background: var(--graphit);
    color: var(--weiss);
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.3rem;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px var(--graphit), inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.marke-name {
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--graphit);
}

.marke-zusatz {
    font-size: 0.875rem;
    color: var(--stahlgrau);
}

/* Das „&“ im Schriftzug ist rot */
.und {
    color: var(--signalrot);
}

.marke-name .und {
    color: inherit;
}

.marke-zusatz-klein {
    display: none;
}

/* Anruf-Knopf in der Kopfzeile: auf dem Handy nur das Symbol */
.kopf-anruf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    background: var(--akzent);
    color: var(--weiss);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--rundung);
}

.kopf-anruf:hover {
    background: var(--akzent-dunkel);
}

.kopf-anruf-nummer {
    display: none;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 560px) {
    .kopf-anruf {
        width: auto;
        padding: 0 0.7rem;
    }

    .kopf-anruf-nummer {
        display: inline;
    }
}

/* Menü-Knopf (drei Striche) */
.menue-knopf {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    cursor: pointer;
    color: var(--nachtblau);
}

.menue-knopf-striche,
.menue-knopf-striche::before,
.menue-knopf-striche::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    margin-inline: auto;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menue-knopf-striche {
    position: relative;
}

.menue-knopf-striche::before,
.menue-knopf-striche::after {
    content: "";
    position: absolute;
    left: 0;
}

.menue-knopf-striche::before { top: -6px; }
.menue-knopf-striche::after { top: 6px; }

.menue-knopf[aria-expanded="true"] .menue-knopf-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::after { transform: translateY(-6px) rotate(-45deg); }

/* Ohne JavaScript: Menü als Zeile unter dem Schriftzug */
.hauptmenue {
    flex-basis: 100%;
}

.hauptmenue ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0 0 0.75rem;
    list-style: none;
}

.hauptmenue a {
    display: inline-block;
    padding: 0.4rem 0;
    color: var(--nachtblau);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.hauptmenue a:hover {
    border-bottom-color: var(--linie);
}

.hauptmenue a[aria-current="page"] {
    color: var(--akzent);
    border-bottom-color: var(--signalrot);
}

.kopf-innen {
    flex-wrap: wrap;
}

/* Mit JavaScript, kleiner Bildschirm: aufklappbares Menü */
@media (max-width: 1039px) {
    .js .menue-knopf {
        display: inline-flex;
        align-items: center;
    }

    .js .hauptmenue {
        display: none;
        position: absolute;
        top: 100%;
        left: -1rem;
        right: -1rem;
        background: var(--weiss);
        border-bottom: 3px solid var(--akzent);
        box-shadow: 0 18px 30px -18px rgba(20, 22, 28, 0.35);
    }

    .js .hauptmenue.offen {
        display: block;
    }

    .js .hauptmenue ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
    }

    .js .hauptmenue a {
        display: block;
        padding: 0.8rem 0;
        font-size: 1.125rem;
        border-bottom: 1px solid var(--blech);
    }

    .js .hauptmenue a[aria-current="page"] {
        border-bottom-color: var(--blech);
        box-shadow: inset 4px 0 0 var(--signalrot);
        padding-left: 0.85rem;
    }
}

/* Handy: schlanke Kopfzeile, immer sichtbar; unter dem Namen steht der Händler-Titel */
@media (max-width: 1039px) {
    .kopf-innen {
        min-height: 3.5rem;
        gap: 0.5rem;
    }

    .marke-tafel {
        width: 2.4rem;
        height: 2rem;
        font-size: 1.1rem;
    }

    .marke-name {
        font-size: 1.2rem;
    }

    .marke-zusatz {
        font-size: 0.75rem;
    }

    .marke-zusatz-gross {
        display: none;
    }

    .marke-zusatz-klein {
        display: block;
    }

    .kopf-anruf {
        min-width: 2.475rem;
        min-height: 2.475rem;
    }

    .menue-knopf {
        width: 2.475rem;
        height: 2.475rem;
    }
}

/* Großer Bildschirm: Menü in einer Zeile neben dem Schriftzug */
@media (min-width: 1040px) {
    .kopf-innen {
        flex-wrap: nowrap;
        gap: 2rem;
        min-height: 5rem;
    }

    .hauptmenue {
        flex-basis: auto;
        order: 2;
    }

    .hauptmenue ul {
        padding: 0;
        gap: 1.75rem;
    }

    .hauptmenue a {
        padding: 1.6rem 0 1.4rem;
    }

    .kopf-anruf {
        order: 3;
        padding: 0 1rem;
        min-height: 3rem;
    }
}


/* === 6. Knöpfe, Öffnungsstatus, Bewertung ================================= */

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.knopfreihe-mittig {
    justify-content: center;
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0.7rem 1.35rem;
    background: var(--akzent);
    color: var(--weiss);
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid var(--akzent);
    border-radius: var(--rundung);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.knopf:hover {
    background: var(--akzent-dunkel);
    border-color: var(--akzent-dunkel);
}

.knopf:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Weißer Knopf auf blauem Grund */
.knopf-hell {
    background: var(--weiss);
    color: var(--akzent);
    border-color: var(--weiss);
}

.knopf-hell:hover {
    background: var(--blech);
    border-color: var(--blech);
}

/* Umrandeter Knopf auf blauem Grund */
.knopf-rahmen {
    background: transparent;
    color: var(--weiss);
    border-color: rgba(255, 255, 255, 0.7);
}

.knopf-rahmen:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--weiss);
}

/* Umrandeter Knopf auf hellem Grund */
.knopf-rahmen-dunkel {
    background: transparent;
    color: var(--akzent);
}

.knopf-rahmen-dunkel:hover {
    background: var(--blech);
    border-color: var(--akzent);
}

/* Öffnungsstatus („Jetzt geöffnet bis 18:00 Uhr“), wird von PHP berechnet */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-weight: 600;
}

.status-punkt {
    position: relative;
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #9ba1ab;
}

.status-offen .status-punkt {
    background: var(--offen-gruen);
}

/* Einzige selbstlaufende Bewegung der Seite: ein grüner Ring wächst aus dem
   Punkt und verblasst (nur transform und opacity, schont den Prozessor) */
.status-offen .status-punkt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--offen-gruen);
    animation: puls 2.4s ease-out infinite;
}

@keyframes puls {
    0% { transform: scale(1); opacity: 0.6; }
    70%,
    100% { transform: scale(2.8); opacity: 0; }
}

.status-dunkel {
    margin-bottom: 2rem;
    color: var(--nachtblau);
}

/* Google-Bewertung */
.bewertung {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    text-decoration: none;
}

.bewertung:hover {
    color: var(--weiss);
    text-decoration: underline;
}

.bewertung strong {
    color: var(--weiss);
}

.bewertung-stern {
    color: #ffc233;
}


/* === 7. Titelbereich der Startseite =======================================
   Dunkler Grund wie ein Showroom bei Nacht. Links Text und Knöpfe (Anruf-Knopf
   in Signalrot), rechts die freigestellten Inhaber mit dem Mustang. Dahinter
   steht groß der Schriftzug „RS“ als „Geisterschrift“: feiner Umriss, nach
   unten verblassend. Seine obere Hälfte ist über Dach und Köpfen zu lesen,
   die untere verdeckt das Auto. */

.titel {
    position: relative;
    overflow: hidden;
    padding-top: 2.5rem;
    background-color: var(--graphit);
    /* heller Lichtschein hinter dem Auto, damit es sich vom Grund abhebt */
    background-image: radial-gradient(ellipse 80% 50% at 50% 80%, #3a3f48, transparent 72%);
    color: var(--weiss);
}

.titel-innen {
    display: grid;
    width: min(100% - 3.2rem, 72rem);
}

/* Eigene Ebenen-Ordnung: Schriftzug (0) hinter Schatten (1) hinter Foto (2) */
.titel-motiv {
    position: relative;
    isolation: isolate;
    container-type: inline-size; /* Schriftzug wächst mit dem Motiv (Einheit cqi) */
    /* oben Platz, weil der Schriftzug über das Motiv hinausragt */
    margin: calc(1.5rem + 15vw) 0 2.5rem;
}

.titel-foto {
    position: relative;
    z-index: 2;
    display: block;
}

.titel-foto img {
    width: 100%;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.5));
}

/* Kontaktschatten direkt unter den Rädern */
.titel-motiv::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 4%;
    right: 3%;
    bottom: -2.5%;
    height: 9%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7), transparent 70%);
}

/* Großer Schriftzug hinter dem Auto */
.titel-rs {
    position: absolute;
    z-index: 0;
    left: 54%;
    top: -24%;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 64cqi;
    line-height: 0.74;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: transparent;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
    pointer-events: none;
    user-select: none;
}

/* Längere Schriftzüge („R&S“, „R+S“): kleiner, damit sie in der Breite passen */
.titel-rs-lang {
    left: 50.6%;
    top: -16%;
    font-size: 48cqi;
}

.titel-ort {
    margin: 0 0 0.75rem;
    color: #aab0bb;
    font-weight: 600;
}

.titel h1 {
    color: var(--weiss);
    margin-bottom: 0.35em;
}

.titel-text {
    max-width: 34ch;
    margin-bottom: 1.5rem;
    font-size: 1.1875rem;
    color: #d7dae0;
}

/* Auf dunklem Grund ist der Hauptknopf rot (Anruf), überall sonst anthrazit */
.titel .knopf-hell,
.abschnitt-nacht .knopf-hell {
    background: var(--signalrot);
    border-color: var(--signalrot);
    color: var(--weiss);
}

.titel .knopf-hell:hover,
.abschnitt-nacht .knopf-hell:hover {
    background: var(--signalrot-text);
    border-color: var(--signalrot-text);
}

/* Handy: Überschrift einzeilig, Foto direkt darunter, Knöpfe in einer Zeile */
@media (max-width: 959px) {
    /* Handy: füllt immer den Bildschirm bis zum unteren Rand (abzüglich Kopfzeile);
       „svh“ = kleinste sichtbare Höhe, damit die Browserleiste nichts verdeckt */
    .titel {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 3.5625rem);
        min-height: calc(100svh - 3.5625rem);
    }

    .titel-innen {
        flex: 1;
    }

    .titel-inhalt {
        display: contents;
    }

    .titel-inhalt > * {
        order: 5;
    }

    .titel-innen {
        display: flex;
        flex-direction: column;
    }

    .titel-inhalt > h1 { order: 2; }
    /* Alles bis zur Google-Bewertung soll ohne Scrollen sichtbar sein */
    .titel {
        padding-top: 1rem;
    }

    .titel-inhalt > .titel-ort { display: none; }

    .titel-motiv {
        order: 3;
        width: min(100%, 50svh);
        margin: 2.4rem auto 1rem;
    }

    .titel h1 {
        margin-bottom: 0;
    }

    .titel-text {
        margin-bottom: 0.9rem;
        font-size: 1rem;
    }

    /* Google-Zeile direkt unter dem Foto */
    .titel .bewertung {
        order: 4;
        margin-top: 0;
        margin-bottom: 0.9rem;
    }

    .bewertung-anzahl {
        display: none;
    }

    /* unter den Knöpfen bleibt noch dunkler Grund, bevor der weiße Bereich beginnt */
    .titel {
        padding-bottom: 1.75rem;
    }

    .titel .knopfreihe {
        margin-top: 0.9rem;
    }

    .titel h1 {
        font-size: min(2.6rem, 9vw);
        white-space: nowrap;
    }

    .titel .knopfreihe {
        flex-wrap: nowrap;
    }

    .titel .knopfreihe .knopf {
        min-height: 2.5rem;
        padding: 0.35rem 0.8rem;
        gap: 0.4rem;
        font-size: 1rem;
        white-space: nowrap;
    }
}

@media (min-width: 960px) {
    .titel {
        padding-top: 5rem;
        background-image: radial-gradient(ellipse 50% 65% at 70% 60%, #3a3f48, transparent 72%);
    }

    .titel-innen {
        grid-template-columns: minmax(24rem, 5fr) 7fr;
        align-items: end;
        gap: 1rem;
        width: min(100% - 4rem, 72rem);
    }

    .titel-inhalt {
        align-self: center;
        padding-bottom: 4.5rem;
    }

    /* Auf großen Bildschirmen darf das Motiv etwas über die Spalte hinaus wachsen */
    .titel-motiv {
        margin: 0 -3rem 3.5rem 0;
    }
}


/* === 8. Karten (Service, Öffnungszeiten) ==================================
   Helle Karten mit weichem Schatten und kurzem roten Strich über der
   Überschrift. Die Klassennamen „schild“ sind historisch. */

.tafelreihe {
    position: relative;
    z-index: 1;
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.tafelreihe-innen {
    display: grid;
    gap: 1.5rem;
    container-type: inline-size; /* Service und Öffnungszeiten teilen sich eine Schriftgröße (cqi) */
}

/* Auf der Startseite bemisst sich die Schrift an der Reihe, nicht an der einzelnen Karte */
.tafelreihe-innen .schild {
    container-type: normal;
}

/* Gemeinsame Schriftgröße der Plakate: einspaltig 7,4 %, zweispaltig 4,2 % der Reihenbreite */
.tafelreihe-innen .schild {
    --plakat-schrift: clamp(1.4rem, 7.4cqi, 3.1rem);
}

@media (min-width: 760px) {
    .tafelreihe-innen .schild {
        --plakat-schrift: clamp(1.2rem, 2.9cqi, 3.1rem);
    }

    .tafelreihe-innen {
        grid-template-columns: 1.35fr 1fr;
        align-items: stretch;
    }
}

@media (min-width: 900px) {
    .tafelreihe-innen .schild {
        --plakat-schrift: clamp(1.4rem, 3.5cqi, 3.1rem);
    }
}

@media (min-width: 1100px) {
    .tafelreihe-innen .schild {
        --plakat-schrift: clamp(1.4rem, 4.2cqi, 3.1rem);
    }
}

.schild {
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2rem);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 16px;
    box-shadow: 0 18px 40px -22px rgba(20, 22, 28, 0.35);
}

.schild-kopf {
    margin: 0 0 1.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--akzent);
}

.schild-kopf::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 4px;
    margin-bottom: 0.75rem;
    border-radius: 2px;
    background: var(--signalrot);
}

.schild .punktliste,
.schild .zeiten-liste {
    margin: 0 0 1rem;
}

.schild-fuss {
    margin: auto 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--linie);
    color: var(--stahlgrau);
    font-size: 0.95rem;
    line-height: 1.35;
}

.schild-im-text {
    margin: 2rem 0;
    max-width: 34rem;
}

/* Service-Plakat: dunkle Karte, die Leistungen groß und nummeriert */
.schild-plakat {
    container-type: inline-size;
    background-color: var(--graphit);
    background-image: radial-gradient(ellipse 70% 80% at 100% 0, #3a3f48, transparent 70%);
    border-color: var(--graphit);
    color: var(--weiss);
}

.schild-plakat .schild-kopf {
    margin-bottom: 1.25rem;
    color: #aab0bb;
    font-family: var(--schrift-text);
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.schild-plakat .schild-kopf::before {
    display: none;
}

.schild-plakat .schild-fuss {
    border-top-color: rgba(255, 255, 255, 0.18);
    color: #aab0bb;
}

.punktliste {
    padding: 0;
    list-style: none;
    counter-reset: leistung;
}

.punktliste li {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.15rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    counter-increment: leistung;
    font-family: var(--schrift-titel);
    font-weight: 700;
    /* cqi = Breite der Karte: lange Wörter wie „Werkstattausrüstung“ passen immer */
    font-size: var(--plakat-schrift, clamp(1.5rem, 8.5cqi, 3.1rem));
    line-height: 1.1;
    text-transform: uppercase;
    overflow-wrap: break-word;
    transition: padding-left 0.2s ease, color 0.2s ease;
}

.punktliste li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.punktliste li::before {
    content: counter(leistung, decimal-leading-zero);
    flex: none;
    min-width: 1.6rem;
    color: var(--signalrot);
    font-family: var(--schrift-text);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.punktliste li:hover {
    padding-left: 0.75rem;
    color: var(--signalrot);
}

/* letzter Eintrag „… und vieles mehr!“: leiser */
.punktliste li:last-child {
    color: #aab0bb;
    font-family: var(--schrift-text);
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 400;
    text-transform: none;
}

.punktliste li:last-child::before {
    content: "+";
}

.punktliste li:last-child:hover {
    color: var(--weiss);
}

/* Öffnungszeiten-Plakat: wie das Service-Plakat, aber hell auf dunkler Schrift */
.schild-plakat-hell {
    container-type: inline-size;
}

.schild-plakat-hell .schild-kopf {
    margin-bottom: 1.25rem;
    color: var(--stahlgrau);
    font-family: var(--schrift-text);
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.schild-plakat-hell .schild-kopf::before {
    display: none;
}

.tage-liste {
    /* füllt die Kartenhöhe, damit die Zeilen neben dem Service-Plakat gleichmäßig verteilt sind */
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    counter-reset: tag;
}

.tage-liste li {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.9rem;
    padding: 0.15rem 0;
    border-top: 1px solid var(--linie);
    counter-increment: tag;
    color: var(--akzent);
}

.tage-liste li:last-child {
    border-bottom: 1px solid var(--linie);
}

.tage-liste li::before {
    content: counter(tag, decimal-leading-zero);
    flex: none;
    min-width: 1.6rem;
    color: var(--signalrot);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.tage-liste .tag {
    flex: 1;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: var(--plakat-schrift, clamp(1.4rem, 6.5cqi, 2.4rem));
    line-height: 1.1;
    text-transform: uppercase;
}

.tage-liste .zeit {
    color: var(--stahlgrau);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sonntag („geschlossen“) leiser */
.tage-liste li:last-child .tag,
.tage-liste li:last-child .zeit {
    color: #8a909b;
}

/* Öffnungszeiten: Tage links, Zeiten rechts, feine Trennlinien */
.zeiten-liste {
    display: grid;
    gap: 0;
}

.zeiten-liste div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--blech);
}

.zeiten-liste div:last-child {
    border-bottom: 0;
}

.zeiten-liste dt {
    font-weight: 600;
}

.zeiten-liste dd {
    margin: 0;
    color: var(--stahlgrau);
    font-variant-numeric: tabular-nums;
}


/* === 9. Abschnitte, Fotos, Fließtext ====================================== */

.abschnitt {
    padding-block: var(--abstand-abschnitt);
}

.abschnitt-blech {
    background: var(--blech);
}

.abschnitt-nacht {
    background: var(--nachtblau);
    color: #d7dae0;
}

.abschnitt-nacht h2 {
    color: var(--weiss);
}

.abschnitt-titel {
    max-width: 24ch;
}

.abschnitt-text {
    max-width: 62ch;
    margin-bottom: 2rem;
}

.fliesstext p,
.fliesstext ul {
    max-width: 65ch;
}

.fliesstext h2:not(:first-child) {
    margin-top: 1.6em;
}

.einleitung {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--akzent);
}

.unterschrift {
    margin-top: 1.5rem;
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--akzent);
}

.textlink {
    font-weight: 600;
}

.foto {
    margin: 0;
}

.foto img {
    width: 100%;
    border-radius: var(--rundung);
}

.foto-hoch img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.foto-schmal {
    max-width: 26rem;
}

.foto figcaption {
    margin-top: 0.6rem;
    color: var(--stahlgrau);
    font-size: 0.95rem;
}

.adresse-gross {
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 4px solid var(--signalrot);
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--akzent);
}


/* === 10. Markenwand und Vorteile ========================================== */

.markenwand {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.markenwand li {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    overflow: hidden;
}

.markenwand img {
    width: 100%;
}

/* Startseite: genau 8 Logos, also 4 je Reihe (Handy) bzw. 8 in einer Reihe */
.markenwand-kurz {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 2rem;
}

@media (min-width: 860px) {
    .markenwand-kurz {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* Vorteile mit Symbol im Kreis */
.vorteile {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vorteile li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--weiss);
}

.vorteile .symbol {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.8rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
}

.vorteile-hell li {
    color: var(--nachtblau);
}

.vorteile-hell .symbol {
    color: var(--akzent);
    background: var(--blech);
    border-color: var(--blech);
}


/* === 11. Seitenkopf der Unterseiten und Aufruf ============================ */

.seitenkopf {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.75rem, 6vw, 4.25rem);
    background-color: var(--graphit);
    background-image: radial-gradient(ellipse 60% 120% at 85% 0%, #343840, transparent 70%);
    color: #c9ccd2;
    outline: 1px solid rgba(255, 255, 255, 0.14);
    outline-offset: -0.6rem;
}

/* Auf dem Handy etwas mehr Abstand zum feinen Rahmen der Tafel */
.seitenkopf .breite {
    width: min(100% - 3.2rem, 72rem);
}

.seitenkopf h1 {
    margin-bottom: 0.25em;
    color: var(--weiss);
}

.seitenkopf-text {
    max-width: 52ch;
    margin: 0;
    font-size: 1.1875rem;
}

.aufruf {
    border-top: 1px solid var(--linie);
}

.aufruf p {
    max-width: 50ch;
    margin-inline: auto;
}


/* === 12. Kontakt: Daten, Formular, Meldungen ============================== */

.anruf-gross {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    color: var(--akzent);
    text-decoration: none;
}

.anruf-gross > .symbol {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.9rem;
    background: var(--akzent);
    color: var(--weiss);
    border-radius: 50%;
}

.anruf-gross-zeile {
    display: block;
    color: var(--stahlgrau);
    font-weight: 600;
}

.anruf-gross-nummer {
    display: block;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 2.6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.anruf-gross:hover .anruf-gross-nummer {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.kontaktzeile {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--linie);
}

.kontaktzeile > .symbol {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.15rem;
    color: var(--akzent);
}

.kontaktzeile h2 {
    margin-bottom: 0.35rem;
    font-size: 1.35rem;
    font-weight: 600;
}

.kontaktzeile p,
.kontaktzeile address,
.kontaktzeile dl {
    margin: 0;
}

.formular-karte {
    padding: clamp(1.25rem, 4vw, 2.25rem);
    background: var(--blech);
    border-radius: 8px;
}

.formular-karte > p {
    max-width: 52ch;
}

.feld {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
}

.feld label {
    font-weight: 600;
}

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.8rem;
    background: var(--weiss);
    color: var(--nachtblau);
    font: inherit;
    border: 1.5px solid #b3b8c1;
    border-radius: var(--rundung);
}

.feld textarea {
    resize: vertical;
}

.feld input::placeholder {
    color: #80858f;
}

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
    border-color: var(--akzent);
    outline: 3px solid rgba(31, 35, 41, 0.3);
    outline-offset: 0;
}

.feld-paar {
    display: grid;
    gap: 0 1rem;
}

@media (min-width: 560px) {
    .feld-paar {
        grid-template-columns: 1fr 1fr;
    }
}

.feld-hilfe {
    margin: 0.25rem 0 0;
    color: var(--stahlgrau);
    font-size: 0.9rem;
}

/* Falle für Spam-Programme: für Menschen unsichtbar */
.feld-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.feld-haken {
    grid-template-columns: 1.25rem 1fr;
    align-items: start;
    gap: 0.75rem;
}

.feld-haken input {
    width: 1.25rem;
    min-height: 0;
    height: 1.25rem;
    margin: 0.2rem 0 0;
    accent-color: var(--akzent);
}

.feld-haken label {
    font-weight: 400;
    font-size: 0.95rem;
}

.meldung {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-left: 4px solid;
    border-radius: 0 var(--rundung) var(--rundung) 0;
}

.meldung p {
    margin: 0;
}

.meldung-fehler {
    background: #fdecec;
    border-color: var(--signalrot);
}

.meldung-hinweis {
    background: #fff4d6;
    border-color: #d99a00;
}

.meldung-erfolg {
    background: #e6f5ec;
    border-color: #1f8a4c;
}


/* === 13. Anfahrt und Karte ================================================ */

.anfahrt-raster {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 600px) {
    .anfahrt-raster {
        grid-template-columns: 1fr 1fr;
    }

    .anfahrt-raster .einbettung {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .anfahrt-raster {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .anfahrt-raster .einbettung {
        grid-column: auto;
    }
}

/* Platzhalter, der erst nach dem Klick durch die Karte ersetzt wird */
.einbettung {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 22rem;
    padding: 1.5rem;
    background:
        linear-gradient(rgba(241, 242, 244, 0.9), rgba(241, 242, 244, 0.9)),
        repeating-linear-gradient(35deg, #d9dce1 0 2px, transparent 2px 26px),
        repeating-linear-gradient(-55deg, #d9dce1 0 2px, transparent 2px 40px);
    background-color: #e6e8eb;
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    text-align: center;
}

.einbettung-platzhalter .symbol {
    width: 3rem;
    height: 3rem;
    color: var(--signalrot);
}

.einbettung-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.7rem 1.35rem;
    background: var(--akzent);
    color: var(--weiss);
    font: 600 1.0625rem var(--schrift-text);
    border: 0;
    border-radius: var(--rundung);
    cursor: pointer;
}

.einbettung-knopf:hover {
    background: var(--akzent-dunkel);
}

.einbettung-hinweis {
    max-width: 40ch;
    margin: 0;
    font-size: 0.9rem;
    color: var(--stahlgrau);
}

/* Nur der Link „Direkt in Google Maps öffnen“ steht in einer eigenen Zeile */
.einbettung-hinweis a[target="_blank"] {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
}

.einbettung.geladen {
    padding: 0;
    overflow: hidden;
}

.einbettung iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* === 14. Rechtstexte und Fehlerseite ====================================== */

.rechtstext h2 {
    margin-top: 2em;
    font-size: 1.75rem;
}

.rechtstext h2:first-child {
    margin-top: 0;
}

.rechtstext h3 {
    margin-top: 1.5em;
    font-size: 1.3rem;
}

.rechtstext p,
.rechtstext li {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.quelle {
    margin-top: 2.5rem;
    color: var(--stahlgrau);
    font-size: 0.9rem;
}

.fehlerseite-code {
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: clamp(6rem, 20vw, 10rem);
    line-height: 1;
    color: var(--blech);
    -webkit-text-stroke: 2px var(--akzent);
}

.fehlerseite p {
    max-width: 46ch;
    margin-inline: auto;
}


/* === 15. Seitenfuß ======================================================== */

.fuss {
    background: var(--nachtblau);
    color: #c9ccd2;
}

.fuss-innen {
    display: grid;
    gap: 2.25rem;
    width: min(100% - 2rem, 72rem);
    margin-inline: auto;
    padding: 3.5rem 0 2.5rem;
}

@media (min-width: 760px) {
    .fuss-innen {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
}

.fuss h2 {
    margin-bottom: 0.6rem;
    font-size: 1.45rem;
    color: var(--weiss);
}

.fuss a {
    color: var(--weiss);
}

.fuss .zeiten-liste {
    max-width: 22rem;
}

.fuss .zeiten-liste div {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Partner-Abzeichen auf weißer Fläche, weil das Logo blau ist */
.fuss-abzeichen {
    width: 13rem;
    padding: 0.6rem 0.8rem;
    background: var(--weiss);
    border-radius: var(--rundung);
}

/* Unten Platz lassen, damit der Info-Knopf der Vorschau nichts verdeckt */
.fuss-unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    width: min(100% - 2rem, 72rem);
    margin-inline: auto;
    padding: 1.25rem 0 5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.95rem;
}

.fuss-unten p {
    margin: 0;
}

.fuss-unten nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

@media (min-width: 760px) {
    .fuss-unten {
        padding-bottom: 1.5rem;
    }
}


/* === 16. Weniger Bewegung ================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}