/* =============================================================================
   layout.css — Container, Sections, Header/Footer, Navigation, Responsive
   Mobile-first: Basis = Mobile, @media (min-width) für grössere Viewports.
   ============================================================================= */

/* --- Layout-Container (aus demo.typo3.org gelernt) -------------------------- */
.contentcontainer,
.contentcontainer--content,
.contentcontainer--stage {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-3);
}
.contentcontainer          { max-width: 708px; }   /* Text — optimale Zeilenlänge */
.contentcontainer--content { max-width: 944px; }   /* Teaser, Karten */
.contentcontainer--stage   { max-width: 1180px; }  /* Hero, Keyvisual */

/* --- Vertikaler Rhythmus der Sections --------------------------------------- */
.main > * { padding-block: var(--space-5); }
@media (min-width: 768px) { .main > * { padding-block: var(--space-6); } }

/* Befund Peter 11.08.2026 («Abstände kleiner machen, z. B. FAQ vor ‹Termine &
   Buchung› und ‹Behandlung & Kosten›»): Zwei aufeinanderfolgende Sektionen
   addierten ihre Innenabstände — 64 px unten + 64 px oben = 128 px Leere. Das
   liest sich wie ein Bruch statt wie ein Abschnittswechsel.
   Steht direkt davor bereits eine Sektion, entfällt deshalb der obere Abstand;
   der untere der Vorgängerin trägt den Rhythmus allein (64 px, mobil 48 px).
   AUSGENOMMEN bleiben Sektionen mit eigener Farbfläche (--muted, --cta) und
   der Hero: Bei ihnen ist die Polsterung nicht Zwischenraum, sondern Teil des
   Bandes — ohne sie klebte der Text an der Farbkante. */
.main > * + *:not(.section--muted):not(.section--cta):not(.hero) { padding-top: 0; }
/* Gegenausnahme: Steht davor eine FARBFLÄCHE, gehört deren unterer Abstand
   noch zum Band — die folgende Sektion braucht ihren eigenen Abstand zurück,
   sonst klebt die Überschrift an der Farbkante (gemessen: nur ~25 px).
   ⚠ Die :not()-Kette MUSS hier wiederholt werden: Die Regel oben hat vier
   Klassen (0,4,0), eine kurze Fassung wie `.main > .section--muted + *`
   käme nur auf (0,2,0) und würde überstimmt — der Fehler war beim ersten
   Anlauf genau so drin und fiel Peter auf. */
.main > .section--muted + *:not(.section--muted):not(.section--cta):not(.hero),
.main > .section--cta + *:not(.section--muted):not(.section--cta):not(.hero) {
    padding-top: var(--space-5);
}
@media (min-width: 768px) {
    .main > .section--muted + *:not(.section--muted):not(.section--cta):not(.hero),
    .main > .section--cta + *:not(.section--muted):not(.section--cta):not(.hero) {
        padding-top: var(--space-6);
    }
}

/* --- Sticky Header ---------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--header-height);
    padding-block: var(--space-1);
}
/* flex:0 0 auto: ohne das quetscht die Header-Flexbox das Logo horizontal
   (max-width:100% aus dem Reset + width:auto → Mindestbreite 0; Mobil-Audit
   07.08.2026: Seitenverhältnis 1,02 statt 5,25 bei 320px). */
.site-header__logo { display: inline-flex; flex: 0 0 auto; }
.site-header__logo-img { height: 40px; width: auto; }
/* Sehr schmale Geräte: kleineres Logo, engere Abstände, Menü-Button ohne
   Textlabel (Label bleibt für Screenreader über die visually-hidden-Technik).
   Nachgemessen: Header braucht so 342px — 360er-Geräte sauber, bei 320
   bleiben ~22px Pan, bewusst in Kauf genommen (Gerätebestand). */
@media (max-width: 479px) {
    .site-header__inner { gap: var(--space-1); }
    .site-header__logo-img { height: 30px; }
    .mainnav__toggle { padding-inline: var(--space-1); }
    .mainnav__toggle-label {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --- Haupt-Navigation ------------------------------------------------------- */
.mainnav { display: flex; align-items: center; }

/* Toggle-Button: nur auf Mobile sichtbar */
.mainnav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 48px;
    min-width: 48px;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-button);
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    cursor: pointer;
}
.mainnav__toggle-icon {
    width: 20px; height: 2px; background: currentColor; position: relative;
    transition: background-color 0.2s ease-out;
}
.mainnav__toggle-icon::before,
.mainnav__toggle-icon::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
    transition: transform 0.2s ease-out;
}
.mainnav__toggle-icon::before { top: -6px; }
.mainnav__toggle-icon::after  { top: 6px; }

/* Offener Zustand: die drei Balken werden zum X (Audit-Befund 1.1 — vorher
   gab es kein visuelles Signal „hier schliesse ich wieder"). Rein CSS über
   die vorhandenen Balken; der mittlere wird unsichtbar, die äusseren rutschen
   in die Mitte und kreuzen sich. `prefers-reduced-motion` schaltet die
   Übergänge global ab (base.css). */
.mainnav__toggle[aria-expanded="true"] .mainnav__toggle-icon {
    background-color: transparent;
}
.mainnav__toggle[aria-expanded="true"] .mainnav__toggle-icon::before {
    transform: translateY(6px) rotate(45deg);
}
.mainnav__toggle[aria-expanded="true"] .mainnav__toggle-icon::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* Hintergrund-Scroll sperren, solange das mobile Menü offen ist
   (navigation.js setzt die Klasse auf <html>). Bewusst `overflow: hidden`
   statt `position: fixed`: bei fixiertem Body rutscht der Sticky-Header aus
   dem Bild; so bleibt die Scroll-Position ohne Offset-Trick erhalten.

   WICHTIG: die Regel gilt NUR für <html>. Nachgemessen am 07.08.2026:
   `overflow: hidden` auf html UND body macht den Body zum Scrollport und
   nimmt dem Header seine Sticky-Wirkung (getBoundingClientRect().top sprang
   von 0 auf -600) — das Menü wäre mit aus dem Bild gewandert. Nur auf <html>
   blockiert es Wisch- und Rad-Scroll zuverlässig, Header und Menü bleiben
   stehen. */
html.nav-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Menü-Liste: auf Mobile eingeklappt, per aria-expanded aufgeklappt.
   Kein Checkbox-Hack — der Zustand lebt am Button (a11y). */
.mainnav__list {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: var(--header-height);
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.mainnav__toggle[aria-expanded="true"] ~ .mainnav__list { display: flex; }

.mainnav__link {
    display: block;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-button);
    transition: color 0.3s ease-out, background-color 0.3s ease-out;
}
.mainnav__link:hover,
.mainnav__link:focus-visible { color: var(--color-primary); }
.mainnav__link--active { color: var(--color-primary); font-weight: 500; }

/* 2. Ebene: mobil immer sichtbar, eingerückt unter dem Elternpunkt */
.mainnav__sublist { list-style: none; margin: 0; padding: 0 0 0 var(--space-3); }
.mainnav__sublink {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: var(--space-1) var(--space-2);
    color: var(--color-muted);
    text-decoration: none;
    border-radius: var(--radius-button);
}
.mainnav__sublink:hover,
.mainnav__sublink:focus-visible { color: var(--color-primary); }
.mainnav__sublink--active { color: var(--color-primary); font-weight: 500; }

/* Desktop: Toggle weg, Liste horizontal und immer sichtbar.
   1040px statt 768px: Logo (210px, ungequetscht) + 6 Nav-Punkte + DE/FR
   brauchen real ~1030px — bei 768px sprengte der Header die Seite (Logo
   auf 0px gequetscht, DE/FR ausserhalb; Mobil-Audit 07.08.2026, Nachmessung
   nach dem Logo-Fix). Tablets bekommen das Hamburger-Menü. */
@media (min-width: 1040px) {
    .mainnav__toggle { display: none; }
    .mainnav__list {
        display: flex;
        position: static;
        flex-direction: row;
        gap: var(--space-1);
        padding: 0;
        background: transparent;
        border-bottom: 0;
    }
    /* 2. Ebene als Dropdown: öffnet bei Hover UND :focus-within (Tastatur).
       Kein Hover-only: Fokus hält das Menü offen, Touch führt zum Elternpunkt
       (dort sind die Unterseiten im Inhalt verlinkt). */
    .mainnav__item--haschildren { position: relative; }
    .mainnav__sublist {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        padding: var(--space-1);
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
        z-index: 20;
    }
    .mainnav__item--haschildren:hover .mainnav__sublist,
    .mainnav__item--haschildren:focus-within .mainnav__sublist { display: block; }
}

/* --- Footer ----------------------------------------------------------------- */
.site-footer {
    background: var(--color-text);
    color: var(--color-bg);
    padding-block: var(--space-5);
    /* KEIN margin-top (Befund Peter 11.08.2026: «über jedem Footer ist noch
       ein weisser Balken sichtbar»). Der Aussenabstand lag auf dem hellen
       Seitenhintergrund und wurde als Streifen sichtbar, sobald die letzte
       Sektion eine Farbfläche ist. Den Abstand trägt die eigene Polsterung
       des Footers (48 px) und die untere Polsterung der letzten Sektion. */
}
.site-footer a { color: var(--color-bg); }
/* Fokusring auf der dunklen Footer-Fläche: der globale Ring (--color-primary
   #2a6b5a) erreicht auf --color-text #1e3d38 nur 1.88:1 — WCAG 1.4.11 verlangt
   3:1 (QS-Befund W8). --color-white kommt auf 11.80:1, auf der aufgehellten
   Notfall-Box (weiss 6 %) noch auf 9.80:1. Gleiche Lösung wie in components.css
   für .section--cta. */
.site-footer :focus-visible { outline-color: var(--color-white); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-3); }
/* Claim statt Notfall-Warnbox (Entscheid Peter 06.08.2026) — ruhige,
   serifierte Zeile im Stil der Headlines, keine Signalfarbe. */
.site-footer__claim {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--color-bg);
}
.site-footer__meta-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Meta-Links (Impressum/Datenschutz/AGB — Markup derzeit auskommentiert, siehe
   Footer.html) auf den Hausstandard 48px bringen; als reine Textlinks lagen sie
   bei ~29px (QS-Befund W13). */
.site-footer__meta-list a { display: inline-flex; align-items: center; min-height: 48px; }
.site-footer__copyright { color: var(--color-border); font-size: 1rem; }

/* =============================================================================
   Landing Page — Layout (Sektionen, Hero, Grids)
   ============================================================================= */

/* Section-Varianten (Hintergründe) */
.section--muted { background: rgba(42, 107, 90, 0.06); }
.section--cta { background: var(--color-primary); color: var(--color-white); }
.section--cta .section__lead { color: rgba(255, 255, 255, 0.85); }
.section--cta .section__title { color: var(--color-white); }
/* Auf der grünen Fläche gilt dasselbe wie für die Buttons (components.css):
   Fliesstext-Links in --color-accent-text #a8452c ergäben 1.06:1 (QS-Befund
   X16), der globale Fokusring in --color-primary sogar 1.00:1. Weiss = 6.27:1
   für den Link, Hover --color-bg = 5.96:1. */
.section--cta a:not(.button) { color: var(--color-white); text-decoration: underline; }
.section--cta a:not(.button):hover,
.section--cta a:not(.button):focus-visible { color: var(--color-bg); }
.section--cta :focus-visible { outline-color: var(--color-white); }

/* Hero: erste Section, oben etwas mehr Luft, Text linksbündig im Stage-Container */
/* Unten bewusst knapper als oben (48 statt 64 px): Der Kopfbereich endet oft
   mit einem kleinen Link oder Knopf, und die folgende Überschrift bringt ihren
   eigenen Zeilenabstand mit — zusammen wirkte der Übergang wie ein Loch
   (Befund Peter 11.08.2026, Lyss-Startseite). */
.hero { padding-block: var(--space-6) var(--space-5); }
/* Befund Peter 11.08.2026 (Lyss-Startseite): Zwischen dem Link «Anfahrt und
   Kontakt» am Ende des Kopfbereichs und der folgenden Überschrift klafften
   ~117 px. Ursache war nicht die Sektions-Polsterung, sondern der eigene
   Aussenabstand des letzten Elements (32 px), der sich zur Polsterung
   addierte. Das letzte Kind eines Kopfbereichs braucht ihn nicht — die
   Polsterung trägt den Abstand allein. */
.hero > *:last-child, .hero .contentcontainer > *:last-child,
.hero .contentcontainer--stage > *:last-child { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* Service-Grid: 1 Spalte mobil, 2 ab Tablet, 3 ab Desktop */
.service-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px)  { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

/* Hero zweispaltig: Text + Bild (mobil gestapelt) */
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); } }

/* Ausbildung: Zitat + Bild (mobil gestapelt) */
.ausbildung__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; }
@media (min-width: 800px) { .ausbildung__grid { grid-template-columns: 1fr 1fr; } }

/* Bilder: weiche Ecken, dezenter Schatten */
.hero__media img, .ausbildung__media img {
    width: 100%; height: auto;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    object-fit: cover;
}

/* Standort-Grid (Netzwerk-Übersicht) */
.standort-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: 0; }
@media (min-width: 640px)  { .standort-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .standort-grid { grid-template-columns: repeat(3, 1fr); } }
/* Spezialpartner (Wund-Zentrum) hervorgehoben über volle Breite */
@media (min-width: 640px)  { .standort-card--partner { grid-column: 1 / -1; } }

/* Footer: Standort-Verzeichnis (aus dem Datensatz) */
/* color:inherit — die h2-Elementregel setzt var(--color-text), auf dem
   dunklen Footer war die Überschrift damit unsichtbar (Kontrast 1:1). */
.site-footer__heading { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: var(--space-3); color: inherit; }
.site-footer__standort-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 560px) { .site-footer__standort-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .site-footer__standort-list { grid-template-columns: repeat(3, 1fr); } }
/* Schriftgrösse: Adressen und Telefonnummern sind Kerninformation für die
   Zielgruppe 50+ — das Design-System verlangt >= 18px, vorher 0.95rem = 15.2px
   (QS-Befund X8). */
.site-footer__standort { display: flex; flex-direction: column; font-size: var(--body-size); line-height: 1.4; }
.site-footer__standort-name { font-weight: 600; }
.site-footer__standort-place { color: rgba(255, 255, 255, 0.7); }
/* Trefferfläche: der tel:-Link war 25px hoch (Mobil-Audit 07.08.2026) — die
   Nummer ist auf dem Handy ein primärer Handlungsweg. Gleiches Muster wie bei
   den Rechtslinks (.site-footer__meta-list a), nur 40px statt 48px, damit das
   12-spaltige Verzeichnis nicht auseinanderfällt. `align-self: start` hält den
   Link so schmal wie die Nummer, sonst reicht die Fläche über die ganze Spalte. */
.site-footer__standort-tel {
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-height: 40px;
}

/* Team-Grid (Detailseite) */
.team-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 560px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

/* =============================================================================
   Druckausgabe (QS-Befund W7 / Spec 20 §4 „Standortseiten druckbar")
   Steht bewusst hier: layout.css wird als letzte der drei Dateien geladen und
   besitzt die Seitenmöbel (Header, Navigation, Footer, Sections), die im Druck
   verschwinden bzw. neutralisiert werden. Leitgedanke: Papier zeigt Inhalt —
   Adresse, Telefon, Öffnungszeiten — nicht Bedienelemente.
   ============================================================================= */
@media print {
    @page { margin: 1.5cm; }

    /* Schwarz auf Weiss (21:1); keine Farbflächen, keine Schatten. */
    html, body {
        background: var(--color-white) !important;
        color: #000 !important;
    }
    h1, h2, h3, h4, p, li, dt, dd, figcaption { color: #000; }
    * { box-shadow: none !important; text-shadow: none !important; }

    /* Bedienelemente und Beiwerk haben auf Papier keinen Nutzen.
       (Der Notfall-Hinweis im Footer bleibt — harte Vorgabe aus dem Kickoff.) */
    .skip-link,
    .mainnav,
    .mainnav__toggle,
    .mainnav__list,
    .langnav,
    .button,
    .standort-detail__back,
    .standort-detail__directions,
    .cdm-confirm,
    .cdm-embed,
    iframe,
    video,
    .site-footer__standorte,
    .site-footer__meta { display: none !important; }

    /* Logo bleibt als Briefkopf, aber nicht klebend. */
    .site-header {
        position: static;
        background: none;
        border-bottom: 1px solid #000;
    }
    .site-header__inner { min-height: 0; padding-block: 0 var(--space-1); }

    /* Vertikalen Rhythmus fürs Papier straffen. */
    .main > * { padding-block: var(--space-3); }

    /* Farbflächen neutralisieren (auch die grüne CTA-Fläche und der Footer). */
    .section--muted,
    .section--cta,
    .card,
    .service-card,
    .standort-card,
    .standort-card--partner,
    .ausb-facts__row,
    .ausb-facts__hinweis,
    .ausb-faq,
    .site-footer {
        background: var(--color-white) !important;
        color: #000 !important;
    }
    .card, .service-card, .standort-card, .ausb-facts__row, .ausb-faq { border-color: #000; }
    a, .site-footer a, .section--cta a:not(.button),
    .section--cta .section__title, .section--cta .section__lead { color: #000 !important; }
    .standort-detail__badge,
    .hero__badge {
        background: none !important;
        color: #000 !important;
        border: 1px solid #000;
    }
    .standort-detail__features li::before,
    .ausb-checklist li::before,
    .stat-tile__value,
    .headline-accent,
    .quote__text { color: #000; }
    .quote { border-left-color: #000; }
    /* Farbige Icon-Flächen: ohne Hintergrunddruck bliebe hier weisse Schrift auf
       Weiss übrig (Team-Initialen!) — deshalb Umriss statt Fläche. */
    .service-card__icon,
    .standort-card__icon,
    .team-card__photo--placeholder {
        background: none !important;
        color: #000 !important;
    }
    .service-card__icon,
    .team-card__photo--placeholder { border: 1px solid #000; }

    /* Footer: nur Notfall-Hinweis und Copyright. */
    .site-footer { margin-top: var(--space-4); padding-block: var(--space-3) 0; border-top: 1px solid #000; }
    .site-footer__claim { color: #000; font-style: italic; }
    .site-footer__copyright { color: #000; }

    /* Externe Links: Adresse ausschreiben, sonst ist der Link auf Papier wertlos.
       Nur im Inhalt — Navigation und Footer sind ohnehin ausgeblendet.
       mailto:/tel: bleiben aussen vor, deren Wert steht bereits im Linktext. */
    .main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }

    /* Umbrüche: Überschriften kleben am Folgetext, Karten werden nicht zerrissen. */
    h1, h2, h3, h4 { break-after: avoid; break-inside: avoid; }
    p, li, blockquote, dl { orphans: 3; widows: 3; }
    .card,
    .service-card,
    .standort-card,
    .team-card,
    .stat-tile,
    .quote,
    .ausb-facts__row,
    .ausb-faq,
    .standort-detail__facts,
    .standort-detail__booking,
    figure,
    img { break-inside: avoid; }

    /* Papier ist schmal: höchstens zwei bzw. drei Spalten. */
    .service-grid, .standort-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .team-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Grossformatige Bilder nicht die halbe Seite füllen lassen. */
    .hero__media img, .ausbildung__media img { max-height: 9cm; width: auto; }
}