/* ==========================================================================
   AUGENPARTNER LIMMATTAL AG - MOBILE-FIRST & DESKTOP DESIGN SYSTEM
   Adapted to Official Augenpartner Altstetten (http://127.0.0.1:8080/)
   Official Brand Color: #004b91
   ========================================================================== */

:root {
    /* Die Marken-Werte stehen seit dem Design-Kit (Phase 3a) genau einmal, in
       design-kit/tokens.css. Hier stehen nur noch die Portal-Namen davor -
       so bleiben alle Klassenregeln unten unveraendert, und es gibt trotzdem
       nur EINE Quelle fuer Farbe, Radius und Schrift ueber alle fuenf Auftritte.
       Wer eine Farbe aendern will, aendert sie im Hub, nicht hier. */
    --font-heading: var(--font-display);   /* Fraunces, nur Ueberschriften */
    --font-body: var(--font);

    /* Official Augenpartner Blue (from Altstetten) */
    --color-brand: var(--tief);
    --color-brand-dark: var(--tief-dunkel);
    --color-brand-light: var(--himmel-hell);
    --color-brand-sky: var(--himmel);

    /* Neutrals & Surfaces */
    --color-navy-950: var(--text);
    --color-navy-900: var(--text);
    --color-slate-800: var(--text);  /* main text */
    --color-slate-700: #2d3e42;      /* Zwischenton, im Kit ohne Entsprechung */
    --color-slate-600: var(--text-leise);
    --color-slate-500: var(--text-leise);
    --color-slate-300: var(--linie-stark);
    --color-slate-200: var(--linie);
    --color-slate-100: var(--flaeche);
    --color-slate-50:  #f8fafc;
    --color-white:     var(--weiss);

    /* Functional */
    --color-green: var(--gruen);          /* nur Flaeche - als Schrift 2,8:1 */
    --color-green-light: var(--gruen-hell);
    --color-red: var(--warn);
    --color-red-light: var(--warn-hell);

    /* Ein Radien-Satz ueber alle fuenf Auftritte: 8 / 12 / 20 px.
       Knoepfe und Pillen bleiben rund - das ist ihr Erkennungsmerkmal. */
    --radius-sm: var(--radius-s);
    --radius-md: var(--radius);
    --radius-lg: var(--radius-l);
    --radius-full: 999px;

    /* Altstetten Authentic Shadows */
    --shadow-sm: 0 1px 2px rgba(12, 30, 33, .04), 0 10px 28px -18px rgba(12, 30, 33, .25);
    --shadow-md: 0 2px 4px rgba(12, 30, 33, .05), 0 22px 44px -22px rgba(12, 30, 33, .35);
    --shadow-lg: 0 4px 8px rgba(12, 30, 33, .06), 0 28px 56px -24px rgba(12, 30, 33, .45);
    --shadow-btn: 0 10px 22px -14px rgba(0, 75, 145, 0.9);
    --shadow-btn-hover: 0 14px 26px -14px rgba(0, 75, 145, 0.95);
    --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.25);
}

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

html, body {
    min-height: 100%;
    font-family: var(--font-body);
    color: var(--color-slate-800);
    background-color: var(--color-slate-100);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ==========================================================================
   OFFICIAL BRAND HEADER & EMBLEM (augenzentrum-dietikon.ch)
   ========================================================================== */
.site-header-clean {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-slate-200);
    padding: 12px 0;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-icon-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    /* Das eingebettete Signet erbt seine Farbe hierher: helles Logo-Blau,
       genau wie das bisherige PNG. (Ob das kleine Zeichen im Kopf dieses
       Blau behaelt, ist die offene Frage aus Plan-Abschnitt 3a - solange
       sie offen ist, bleibt es beim Ist-Zustand.) */
    color: var(--signet);
}

.brand-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.32em;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-navy-950);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.brand-suffix {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-navy-950);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.header-right-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lang-switch-wrap {
    display: inline-flex;
    align-items: center;
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-full);
    padding: 2px 4px;
    gap: 2px;
}

.lang-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-slate-600);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    transition: all 0.15s ease;
}

.lang-btn:hover {
    color: var(--color-brand);
}

.lang-btn.active {
    background: var(--color-white);
    color: var(--color-brand);
    box-shadow: 0 1px 3px rgba(0, 75, 145, 0.18);
    font-weight: 700;
}

.emergency-pill-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-red-light);
    border: 1px solid rgba(179, 38, 30, 0.25);
    color: var(--color-red);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
}

.red-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-red);
}

/* ==========================================================================
   DESKTOP BANNER (OPTIONS 1, 2, 3)
   ========================================================================== */
.main-content-section {
    padding: 24px 0 40px;
}

.desktop-hero-banner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 24px;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.banner-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-navy-950);
    line-height: 1.2;
    margin-bottom: 8px;
}

.banner-desc {
    font-size: 0.95rem;
    color: var(--color-slate-600);
    line-height: 1.5;
}

.desktop-hero-banner > div {
    min-width: 0;
}

.banner-image-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-slate-200);
    position: relative;
}

.banner-image-wrap .rotator-img,
.banner-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.banner-image-wrap .rotator-img.active,
.banner-image-wrap img.active {
    opacity: 1;
}

/* ==========================================================================
   NOTFALL-HINWEIS (zwischen Hero und Praxis-Karten, Desktop UND Mobile)
   Rot bewusst nur auf Icon und Schlagwort - die Leiste selbst bleibt neutral
   wie eine Praxis-Karte.
   ========================================================================== */
.emergency-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--color-slate-800);
}

.emergency-bar-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-red-light);
    color: var(--color-red);
}

.emergency-bar-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.emergency-bar-label {
    color: var(--color-red);
    font-weight: 700;
}

.emergency-bar-text {
    font-weight: 500;
}

/* ==========================================================================
   THE 4 PRACTICE CARDS (Dietikon, Berikon, Spreitenbach, Altstetten)
   ========================================================================== */
/* Abstaende auf der 8er-Skala des Design-Kits: 16 / 24 / 32 statt 14 / 18 / 28. */
.practices-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    /* Sprungziel der mobilen Knoepfe "Praxis waehlen" und "Praxen". */
    scroll-margin-top: 16px;
}

.practice-card-box {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

/* Shared rows across sibling cards; flex column above is the non-subgrid fallback.
   Nur ab 769px (2- bzw. 4-spaltig) - im einspaltigen Mobil-Stapel gibt es nichts
   auszurichten, dort bleibt der sichere Flex-Fallback mit min-height: 2.5em. */
@media (min-width: 769px) {
@supports (grid-template-rows: subgrid) {
    .practice-card-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: subgrid;
        grid-row: span 6;
        row-gap: 0;
    }

    .practice-card-box > div:first-child {
        display: contents;
    }

    .practice-card-box .practice-name {
        min-height: 0;
    }

    /* Alle Buchungs-Buttons auf einer Linie: der Flex-Bodenanker (margin-top:
       auto) würde einen einzelnen Button ans Zeilenende drücken. Stattdessen
       am OBEREN Rand der gemeinsamen Subgrid-Zeile ausrichten - Altstettens
       zusätzlicher Details-Link hängt dann einfach darunter. */
    .practice-card-box .card-bottom-actions {
        margin-top: 0;
        align-self: start;
    }
}
}

/* Kein Hover-Effekt auf den Karten (Phase-2-Entscheid "kein Schweben ohne
   Ziel"): die Karte selbst ist kein Link - nur Telefon, Terminknopf und
   Praxis-Details reagieren, und die tun es weiterhin. */

.card-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 8px;
    margin-bottom: 8px;
}

/* In the 4-column layout the cards are too narrow for tag + status on one
   line in every language, so stack them uniformly — all cards flip in sync */
@media (min-width: 1100px) {
    .card-top-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.location-tag {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand);
    background: var(--color-brand-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* PETERS ENTSCHEID 2026-09-04, nach dem Vergleich mit der Live-Seite:
   die Status-Farben bleiben die des Originals. Er hat zuerst ein helleres
   Gruen verlangt und danach direkt gegen augenpartner.com verglichen -
   "das Original schaut noch immer besser aus". Damit ist die Reihe
   #12603f -> #1a7a52 -> #1b8158 verworfen; es gilt wieder --color-green.
   Ebenso das Blau (--color-brand-sky) und das Mittagspausen-Orange.

   BEWUSST IN KAUF GENOMMEN: die drei Farben sind 0.74rem fett (~11,8 px),
   dafuer gilt die 4,5:1-Grenze und nicht 3,0. Auf dem Kartengrund #ffffff
   messen sie 2,80 (Gruen), 4,16 (Blau) und 3,19 (Orange) - alle drei unter
   AA. Das ist der Stand, der heute live ist; die Entscheidung, es dabei zu
   belassen, ist Peters und ausdruecklich getroffen, nicht uebersehen.
   Wer das spaeter doch angehen will: die Farbe allein zu verdunkeln hat
   Peter zweimal abgelehnt. Der naechste Versuch muesste die Lesbarkeit
   anders holen - groessere Schrift, oder die Status-Pille mit heller
   Flaeche aus dem Phase-2-Entwurf, in der ein dunkleres Gruen nicht mehr
   wie eingeschwaerzt wirkt. */
.status-open {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-green);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-blue {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-brand-sky);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-lunch {
    font-size: 0.74rem;
    font-weight: 700;
    color: #d97706;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-coming-soon {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-brand);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-open, .status-blue, .status-lunch, .status-coming-soon {
    white-space: nowrap;
}

.practice-name {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-navy-950);
    line-height: 1.25;
    margin-bottom: 4px;
    min-height: 2.5em;
}

/* Praxis-Titel und -Adresse verlinken auf die jeweilige Praxis-Website */
.practice-link {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}

.practice-link:hover,
.practice-link:focus-visible {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.practice-link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 3px;
}

.practice-address {
    font-size: 0.84rem;
    color: var(--color-slate-600);
    margin-bottom: 16px;
}

/* Phone Touch Button */
.phone-touch-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 16px;
    color: var(--color-navy-950);
    transition: all 0.18s ease;
}

.phone-touch-btn:hover {
    background: var(--color-brand-light);
    border-color: var(--color-brand-sky);
}

.phone-meta-left {
    display: flex;
    flex-direction: column;
}

.phone-sublabel {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-brand);
    text-transform: uppercase;
}

.phone-value {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--color-navy-950);
    white-space: nowrap;
}

.phone-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.phone-touch-btn:hover .phone-icon-circle {
    background: var(--color-brand-dark);
}

/* Opening Hours */
.hours-container {
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.hours-head {
    font-weight: 700;
    color: var(--color-navy-900);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hours-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* 8 statt 12: die Karte ist mit dem 16er-Innenabstand vier Pixel schmaler,
       und Dietikons laengste Zeile ("Mo, Mi, Fr" mit zwei Zeitspannen) passt
       nur mit diesen vier Pixeln noch auf eine Zeile. */
    column-gap: 8px;
    color: var(--color-slate-700);
    margin-top: 2px;
}

.hours-line > :nth-child(2) {
    text-align: right;
}

.nobr {
    white-space: nowrap;
}

/* Booking Actions */
.card-bottom-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.btn-online-booking {
    background: var(--color-brand);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 12px 18px;
    border-radius: var(--radius-full);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.18s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-btn);
}

.btn-online-booking:hover {
    background: var(--color-brand-dark);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.btn-practice-site {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-brand);
    text-align: center;
    padding: 4px 0;
    transition: color 0.15s ease;
}

.btn-practice-site:hover {
    color: var(--color-brand-dark);
    text-decoration: underline;
}

/* ==========================================================================
   MOBILE BUEHNE - FOTO IM SIGNET-FENSTER
   Phase-2-Entscheid: nur auf dem Handy, auf allen fuenf Auftritten. Das
   Fenster selbst (Maske, Ring, Umbruchpunkt 60rem) kommt aus dem Design-Kit;
   hier steht nur, was das Portal drumherum braucht.
   Der frühere Quick-Intro-Block mit den vier Orts-Chips ist entfallen - die
   Chips sagten dasselbe wie der Knopf "Praxis waehlen".
   ========================================================================== */
.hero-fenster {
    display: none;
}

/* Ab hier steht wieder die Desktop-Buehne oben. 60rem ist derselbe Punkt,
   an dem das Kit das Fenster ausblendet und an dem Altstetten umschaltet -
   Buehne, Fenster und Aktionsleiste muessen zwingend an derselben Kante
   schalten, sonst stehen zwei Buehnen gleichzeitig auf dem Schirm. */
@media (max-width: 60rem) {
    .hero-fenster {
        display: block;
        text-align: center;
        padding: 8px 4px 24px;
    }

    .hero-fenster h1 {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--color-navy-950);
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .hero-fenster__text {
        font-size: 0.92rem;
        color: var(--color-slate-600);
        line-height: 1.45;
        max-width: 30rem;
        margin: 0 auto 16px;
    }

    .hero-fenster__ctas {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .hero-fenster__ctas .btn {
        flex: 1 1 10rem;
        max-width: 16rem;
    }

    /* Die Desktop-Buehne weicht dem Fenster. */
    .desktop-hero-banner {
        display: none !important;
    }

    /* Notfall steht auf dem Handy als eigener Abschnitt weiter unten, dorthin
       fuehrt der Knopf in der Aktionsleiste. Pille und Balken faellen deshalb
       hier weg - der Desktop behaelt beide (Phase-2-Entscheid). */
    .emergency-bar {
        display: none;
    }
}

/* ==========================================================================
   NOTFALL-ABSCHNITT (nur Handy, Ziel des Notfall-Knopfs in der Aktionsleiste)
   ========================================================================== */
.notfall-abschnitt {
    display: none;
}

@media (max-width: 60rem) {
    .notfall-abschnitt {
        display: block;
        margin-top: 24px;
        padding: 20px 16px;
        background: var(--color-white);
        border: 1px solid var(--color-slate-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        scroll-margin-top: 16px;
    }

    .notfall-abschnitt__titel {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-heading);
        font-size: 1.22rem;
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--color-red);
        margin-bottom: 8px;
    }

    .notfall-abschnitt__icon {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-red-light);
        color: var(--color-red);
    }

    .notfall-abschnitt__text {
        font-size: 0.92rem;
        color: var(--color-slate-700);
        line-height: 1.45;
        margin-bottom: 16px;
    }

    /* Die Nummern benutzen denselben Telefonknopf wie die Praxiskarten -
       gleiche Bedienung, gleicher Pflegeort (data.json). */
    .notfall-abschnitt__nummern .phone-touch-btn {
        margin-bottom: 0;
    }

    /* Am Handy untereinander, auf breiteren Schirmen zu zweit - sonst zieht
       sich die Nummer bis zum Telefonzeichen am rechten Rand auseinander. */
    .notfall-abschnitt__nummern {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    @media (min-width: 34rem) {
        .notfall-abschnitt__nummern {
            grid-template-columns: 1fr 1fr;
        }
    }
}

/* ==========================================================================
   AKTIONSLEISTE - Umbruchpunkt ans Portal anpassen
   Das Kit blendet sie erst ab 1180px aus (Altstettens Menue-Punkt). Hier gilt
   dieselbe Kante wie fuer Buehne und Fenster, sonst stuende die Leiste auf
   dem Desktop unter der fertigen Seite.
   ========================================================================== */
@media (min-width: 60.0625rem) {
    .aktionsleiste {
        display: none;
    }

    body:has(.aktionsleiste) {
        padding-bottom: 0;
    }
}

@keyframes cardPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 75, 145, 0); }
    50% { transform: scale(1.02); box-shadow: 0 0 24px rgba(0, 75, 145, 0.6); border-color: var(--color-brand-sky); }
    100% { transform: scale(1); }
}

.card-highlight-pulse {
    animation: cardPulse 0.8s ease-out;
}

/* Footer */
.footer-compact {
    background: var(--color-white);
    border-top: 1px solid var(--color-slate-200);
    padding: 16px 0;
    font-size: 0.78rem;
    color: var(--color-slate-500);
    margin-top: 30px;
}

.footer-compact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ==========================================================================
   LEGAL / SUBPAGE STYLES (IMPRESSUM & DATENSCHUTZ)
   ========================================================================== */
.legal-container {
    max-width: 860px;
    margin: 28px auto 40px;
}

.legal-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    box-shadow: var(--shadow-sm);
}

.legal-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-slate-200);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-brand);
    margin-bottom: 14px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.back-link:hover {
    color: var(--color-brand-dark);
    transform: translateX(-2px);
}

.legal-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 600;
    color: var(--color-navy-950);
    line-height: 1.2;
    margin-bottom: 6px;
}

.legal-subtitle {
    font-size: 0.95rem;
    color: var(--color-slate-600);
}

.legal-section {
    margin-bottom: 28px;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-section h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-navy-950);
    margin-bottom: 10px;
}

.legal-section h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-navy-900);
    margin-top: 14px;
    margin-bottom: 6px;
}

.legal-section p {
    font-size: 0.92rem;
    color: var(--color-slate-700);
    line-height: 1.6;
    margin-bottom: 10px;
}

.legal-section ul {
    margin-left: 20px;
    margin-bottom: 12px;
    font-size: 0.92rem;
    color: var(--color-slate-700);
    line-height: 1.6;
}

.legal-section li {
    margin-bottom: 6px;
}

.legal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
}

.legal-box-item {
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.legal-box-item strong {
    color: var(--color-navy-950);
    display: block;
    margin-bottom: 4px;
}

/* ==========================================================================
   TABLET / MID-WIDTH RULES (769px – 1099px: 2x2 card grid, condensed banner)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1099px) {
    .practices-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .desktop-hero-banner {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 24px;
        padding: 24px;
    }
}

@media (max-width: 980px) {
    .emergency-pill-top {
        display: none;
    }
}

/* ==========================================================================
   MOBILE-FIRST RULES (ZERO FLUFF, MAXIMUM SPEED & ACCESSIBILITY)
   ========================================================================== */
@media (max-width: 768px) {
    /* Brand Header on mobile */
    .site-header-clean {
        padding: 8px 0;
    }

    .brand-icon-img {
        width: 36px;
        height: 36px;
    }

    .brand-name {
        font-size: 1.1rem;
    }

    .brand-suffix {
        font-size: 1.1rem;
    }

    .header-right-meta {
        gap: 8px;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Practice Cards on Mobile: Vertical Stack with clear tap zones */
    .practices-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .practice-card-box {
        padding: 20px 16px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        scroll-margin-top: 20px;
    }

    .practice-name {
        font-size: 1.22rem;
        font-weight: 600;
        margin-bottom: 3px;
        letter-spacing: -0.01em;
        /* Einspaltig wird nichts ausgerichtet - der Zwei-Zeilen-Boden aus
           .practice-name wuerde hier nur eine Luecke ueber der Adresse lassen. */
        min-height: 0;
    }

    .practice-address {
        font-size: 0.84rem;
        margin-bottom: 16px;
    }

    /* Thumb-friendly Click-to-Call */
    .phone-touch-btn {
        padding: 11px 14px;
        margin-bottom: 16px;
        min-height: 50px;
        border-radius: var(--radius-md);
    }

    .phone-sublabel {
        font-size: 0.7rem;
    }

    .phone-value {
        font-size: 1.08rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .phone-icon-circle {
        width: 34px;
        height: 34px;
    }

    /* Hours Container */
    .hours-container {
        padding: 12px 14px;
        font-size: 0.8rem;
        margin-bottom: 16px;
        border-radius: var(--radius-sm);
    }

    .hours-head {
        font-size: 0.76rem;
        margin-bottom: 8px;
    }

    .hours-line {
        margin-bottom: 5px;
    }

    /* Primary & Secondary Action Buttons */
    .card-bottom-actions {
        gap: 10px;
    }

    .btn-online-booking {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 0.92rem;
        font-weight: 600;
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-btn);
    }

    .btn-practice-site {
        font-size: 0.82rem;
        padding: 8px;
    }

    .footer-compact-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        font-size: 0.74rem;
    }

    /* Legal Pages Mobile: Stack Cards Vertically */
    .legal-card {
        padding: 22px 18px;
        border-radius: var(--radius-md);
    }

    .legal-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* Notfall-Hinweis auf schmalen Displays etwas kompakter */
@media (max-width: 520px) {
    .emergency-bar {
        gap: 10px;
        padding: 12px 14px;
    }

    .emergency-bar-copy {
        font-size: 0.9rem;
    }
}

/* =============================================================
   Kontaktformular (kontakt.php) — temporärer Ersatz der
   Online-Terminbuchung, solange die Praxis-Systeme umgestellt werden
   ============================================================= */

/* Sprachwahl auf kontakt.php sind Links statt Buttons */
a.lang-btn {
    display: inline-block;
}

.form-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.form-hinweis svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.form-hinweis ul {
    margin: 6px 0 0 18px;
}

.form-hinweis--erfolg {
    background: var(--color-green-light);
    border: 1px solid var(--color-green);
    color: var(--color-navy-950);
}

.form-hinweis--erfolg svg {
    color: var(--color-green);
}

.form-hinweis--fehler {
    background: var(--color-red-light);
    border: 1px solid var(--color-red);
    color: var(--color-navy-950);
}

.form-hinweis--fehler svg {
    color: var(--color-red);
}

.kontakt-telefonliste {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.kontakt-telefon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.kontakt-telefon:hover {
    border-color: var(--color-brand-sky);
}

.kontakt-telefon--aktiv {
    background: var(--color-brand-light);
    border-color: var(--color-brand-sky);
}

.kontakt-telefon-praxis {
    font-weight: 600;
    color: var(--color-navy-950);
}

.kontakt-telefon-nummer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--color-brand);
    white-space: nowrap;
}

.kontakt-formular {
    margin-top: 12px;
}

.kontakt-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

@media (max-width: 640px) {
    .kontakt-reihe {
        grid-template-columns: 1fr;
    }
}

.kontakt-feld {
    margin-bottom: 16px;
}

.kontakt-feld label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-slate-700);
    margin-bottom: 5px;
}

.kontakt-pflicht {
    color: var(--color-red);
}

.kontakt-feld input[type="text"],
.kontakt-feld input[type="email"],
.kontakt-feld input[type="tel"],
.kontakt-feld select,
.kontakt-feld textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-navy-950);
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}

.kontakt-feld textarea {
    resize: vertical;
    min-height: 130px;
}

.kontakt-feld input:focus,
.kontakt-feld select:focus,
.kontakt-feld textarea:focus {
    outline: 2px solid var(--color-brand-sky);
    outline-offset: 0;
    border-color: var(--color-brand-sky);
}

.kontakt-feld--check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.kontakt-feld--check input {
    margin-top: 3px;
    accent-color: var(--color-brand);
}

.kontakt-feld--check label {
    display: inline;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--color-slate-700);
    margin-bottom: 0;
}

.kontakt-feld--check label a {
    color: var(--color-brand);
    font-weight: 600;
}

/* Lockfeld für Bots — für Menschen unsichtbar */
.kontakt-zusatz {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kontakt-senden-zeile {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.kontakt-senden {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.kontakt-pflicht-hinweis {
    font-size: 0.8rem;
    color: var(--color-slate-600);
}

.kontakt-anruf-hinweis {
    font-size: 0.92rem;
    color: var(--color-slate-600);
    line-height: 1.55;
    margin-bottom: 14px;
}