/* ==========================================================================
   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: NUR noch für das Logo */
    --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: grid;
    place-items: center;
    width: 3rem;
    height: 2.5rem;
    background: var(--schildblau);
    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(--schildblau), 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(--schildblau);
}

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

/* 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;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    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-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;
    }
}

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

@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. Schilder (Service, Öffnungszeiten) ================================
   Weiße Tafel mit blauem Kopfband – nachgebaut nach dem Ladenschild.
   Die zwei hellen Punkte im Kopfband sind die „Schrauben“ des Schilds. */

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

.tafelreihe-innen {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 760px) {
    .tafelreihe-innen {
        grid-template-columns: 1.35fr 1fr;
        align-items: stretch;
    }
}

.schild {
    display: flex;
    flex-direction: column;
    background: var(--weiss);
    border: 2px solid var(--akzent);
    border-radius: var(--rundung);
    box-shadow: var(--schatten-schild);
    overflow: hidden;
}

.schild-kopf {
    margin: 0;
    padding: 0.7rem 2.25rem;
    background-color: var(--akzent);
    background-image:
        radial-gradient(circle at 0.9rem 50%, rgba(255, 255, 255, 0.55) 0 0.22rem, transparent 0.24rem),
        radial-gradient(circle at calc(100% - 0.9rem) 50%, rgba(255, 255, 255, 0.55) 0 0.22rem, transparent 0.24rem);
    color: var(--weiss);
    font-size: 1.6rem;
    font-weight: 700;
}

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

.schild-fuss {
    margin: auto 1.5rem 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--linie);
    color: var(--signalrot-text);
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.25;
}

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

/* Liste mit roten Punkten wie am Ladenschild */
.punktliste {
    padding: 0;
    list-style: none;
}

.punktliste li {
    position: relative;
    padding: 0.2rem 0 0.2rem 1.35rem;
    color: var(--akzent);
    font-weight: 600;
    font-size: 1.125rem;
}

.punktliste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--signalrot);
}

@media (min-width: 480px) {
    .punktliste-zweispaltig {
        columns: 2;
        column-gap: 1.5rem;
    }

    .punktliste-zweispaltig li {
        break-inside: avoid;
    }
}

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

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

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

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

.zeiten-liste dd {
    margin: 0;
    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;
    }
}


/* === 17. ENTWURF: Leiste zum Umschalten der Schriftzüge ===================
   Nur auf /variante-1 und /variante-2 sichtbar. Nach der Entscheidung
   zusammen mit den Dateien variante-*.php löschen. */

.varianten-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.25rem;
    padding: 0.6rem max(1rem, (100vw - 72rem) / 2);
    background: #111317;
    color: #c9ccd2;
    font-size: 0.9rem;
}

.varianten-leiste a {
    color: var(--weiss);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.varianten-leiste a:hover {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.varianten-leiste a[aria-current="page"] {
    font-weight: 600;
    border-bottom-color: var(--signalrot);
}