/* =====================================================================
   Möbeltischlerei Matheja — Stylesheet
   Alle Werte stammen aus dem Brand Guide V.1 (8. August 2026).
   Reihenfolge: 1 Tokens · 2 Reset · 3 Typografie · 4 Layout/Raster
                5 Komponenten · 6 Responsiv
   Nach den Tokens kommt kein freier Farb- oder Maßwert mehr vor
   (Ausnahme: 0, 100%, 1fr, Breakpoints in @media — keine Designwerte).
   ===================================================================== */

/* ============================ 1 · TOKENS ============================ */
:root{
  /* --- Farbe · Brand Guide §07 (vier Rollen, drei Farben + Stufen) --- */
  --akzent:        #1E3A3C; /* Interaktion, Marke, Primäraktion  (12,17:1 auf Blatt) */
  --akzent-hover:  #213F42; /* gerechnet +17,73 % Y                */
  --akzent-aktiv:  #1B3435; /* gerechnet −18,81 % Y                */
  --signal:        #6E2B2E; /* Fehler/Achtung, nie ohne Textetikett */
  --grund:         #F2F3F1; /* dominante Neutralfläche (Seitengrund) */
  --blatt:         #FFFFFF; /* Karten, Felder, Dialog             */
  --linie:         #15171A; /* Text, Linie, Glyphe — nie Fläche    */
  --stuetze-700:   #4A5153; /* Nebentext, Etikett, Maß (8,10:1)    */
  --stuetze-400:   #8C9092; /* Feldrahmen, Platzhalter — nie Text  */
  --stuetze-200:   #C6C9C7; /* Trennlinie, ruhender Rahmen         */
  --stuetze-100:   #E6E8E5; /* Stützfläche                         */

  /* --- Schriftfamilien · Brand Guide §09 --- */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;      /* Titel + Lauftext */
  --font-sans:  'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif; /* Funktionales */

  /* --- Typo-Leiter (Screen) · Brand Guide §09 · Basis Lauftext 17 px = 1rem --- */
  --fs-h1: 3.529rem;  /* 60 px */
  --fs-h2: 2.588rem;  /* 44 px */
  --fs-h3: 1.882rem;  /* 32 px */
  --fs-subline: 1.412rem; /* 24 px */
  --fs-vorlauf: 1.235rem; /* 21 px */
  --fs-body: 1rem;        /* 17 px */
  --fs-bedienung: 0.882rem; /* 15 px */
  --fs-caption: 0.824rem;   /* 14 px */
  --fs-mass: 0.765rem;      /* 13 px */
  --fs-mikro: 0.647rem;     /* 11 px */
  --fs-zahl: 2.588rem;      /* große Schrittzahl, Gewicht 300 */

  --lh-h1: 1.08;  --lh-h2: 1.16;  --lh-h3: 1.16;
  --lh-subline: 1.35; --lh-vorlauf: 1.45; --lh-body: 1.62;
  --lh-bedienung: 1.35; --lh-caption: 1.35; --lh-mass: 1.45; --lh-mikro: 1.35;

  --ls-tight: -0.012em; /* Titel */
  --ls-wide:  0.09em;   /* versale Etiketten */
  --ls-mini:  0.004em;  /* Maß/Bedienung */

  /* --- Raumskala · Brand Guide §12 / Modulliste (Basis 4, Rinne 24, Abschnitt 96) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --gutter: var(--space-6);   /* Rinne 24 */
  --section: var(--space-24); /* Abschnittsabstand 96 */

  /* --- Form · Brand Guide §12 --- */
  --radius: 2px;              /* Screen; max 4 px, kein Mischbetrieb */
  --hairline: 1px;           /* 0,25 mm ≈ 1 px, ruhender Rahmen */
  --hairline-strong: 2px;    /* 0,5 mm, Fokus/Feldrahmen im Fokus */

  /* --- Layout --- */
  --container: 1160px;
  --pad: clamp(20px, 5vw, 48px);
  --measure: 68ch;           /* Satzbreite einspaltig · §09 */
  --measure-2col: 52ch;      /* Satzbreite zweispaltig · §09 */
}

/* ============================ 2 · RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }   /* 1rem = 17 px */
body{
  margin: 0;
  background: var(--grund);
  color: var(--linie);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--akzent); }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
:focus{ outline: none; }
:focus-visible{
  outline: var(--hairline-strong) solid var(--akzent);
  outline-offset: var(--hairline-strong);   /* Kontur außen — Inhalt springt nicht (§15) */
}
::selection{ background: var(--stuetze-100); }

/* ========================= 3 · TYPOGRAFIE ========================= */
.h1, h1{
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight);
}
.h2, h2{
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight);
}
.h3, h3{
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-tight);
}
.subline{
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-subline); line-height: var(--lh-subline); letter-spacing: var(--ls-tight);
}
.vorlauf{
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-vorlauf); line-height: var(--lh-vorlauf);
  max-width: var(--measure);
}
p{ max-width: var(--measure); }

/* Versales Etikett (Rubrik, Blocktitel) — Caption/Mikro · §09 */
.etikett{
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--stuetze-700);
}
.etikett--mikro{ font-size: var(--fs-mikro); }

/* Nebentext / Maßangabe */
.nebentext{ color: var(--stuetze-700); }
.mass{
  font-family: var(--font-sans); font-size: var(--fs-mass);
  line-height: var(--lh-mass); letter-spacing: var(--ls-mini);
  font-variant-numeric: tabular-nums; color: var(--stuetze-700);
}

/* Kursiv nur im Lauftext für Werktitel / fremdsprachige Begriffe (§09) */
em, i{ font-style: italic; }
strong, b{ font-weight: 400; } /* halbfett gibt es in Spectral 400 nicht; Betonung über Akzentfarbe */

/* ========================= 4 · LAYOUT / RASTER ========================= */
.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }

/* Kopf/Fuß-Bänder in voller Breite, Inhalt zentriert */
.band{ width: 100%; }

/* 12-Spalten-Raster · Brand Guide §12 */
.grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

/* Spaltenlagen (nur die tatsächlich genutzten Breiten) */
.col-3{ grid-column: span 3; }
.col-4{ grid-column: span 4; }
.col-5{ grid-column: span 5; }
.col-6{ grid-column: span 6; }
.col-7{ grid-column: span 7; }
.col-8{ grid-column: span 8; }
.col-12{ grid-column: 1 / -1; }

/* Abschnittsrhythmus — jede Sektion beginnt an der Achse (links) */
main > section{ padding-block: var(--section); }
main > section + section{ padding-block-start: 0; } /* ein Abstand je Fuge, nicht doppelt */
main{ padding-bottom: var(--section); }
.stack > * + *{ margin-top: var(--space-6); }
.stack-tight > * + *{ margin-top: var(--space-3); }
.stack-wide > * + *{ margin-top: var(--space-10); }

/* ========================= 5 · KOMPONENTEN ========================= */

/* --- 5.1 Kopfzeile + Navigation (5 Einträge, aktiver Zustand) --- */
.site-header{
  background: var(--grund);
  border-bottom: var(--hairline) solid var(--stuetze-200);
}
.site-header .container{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-5);
}
.site-nav{ margin-left: auto; }
.site-nav ul{ display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); }
.site-nav a{
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-bedienung); letter-spacing: var(--ls-mini);
  color: var(--linie); text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: var(--hairline-strong) solid transparent;
}
.site-nav a:hover{ color: var(--akzent); border-bottom-color: var(--stuetze-200); }
.site-nav a[aria-current="page"]{
  font-weight: 500; color: var(--akzent);
  border-bottom-color: var(--akzent);   /* aktiver Zustand: Wort UND Linie, nicht nur Farbe */
}

/* --- 5.2 Wortmarke: drei Balken (M) + Live-Text · Brand Guide §04 ---
   Die Balken sind ein Inline-SVG im Schriftgrad des Wortes und sitzen über
   vertical-align:baseline auf der Grundlinie — Maße aus §04 (Balkenbreite
   0,095 em, Gruppenbreite 0,675 em, Höhe = Ascender 0,8073 em). */
.logo{ display: inline-flex; flex-direction: column; text-decoration: none;
  line-height: 1; color: var(--linie); }
.logo:hover .logo-wort, .logo:hover .logo-name{ color: var(--akzent); }
.logo-wort{
  font-family: var(--font-sans); font-weight: 500; font-size: 1.55rem;
  color: var(--linie); letter-spacing: 0; line-height: 1; display: block;
}
.logo-m{ height: 0.8073em; width: auto; vertical-align: baseline;
  fill: currentColor; margin-right: 0.086em; }
.logo-name{
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: none;
  color: var(--stuetze-700); margin-top: 0.4em; display: block;
}

/* --- 5.3 Schalter primär (Primäraktion) · §15, vier Zustände (Fehler entfällt) --- */
.btn{
  display: inline-block; font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-caption); letter-spacing: var(--ls-wide); text-transform: uppercase;
  text-decoration: none; text-align: center;
  padding: var(--space-3) var(--space-6); min-height: 44px; /* Trefferfläche ≥ 44 px */
  border-radius: var(--radius); border: var(--hairline) solid transparent;
  cursor: pointer; transition: background-color .12s linear, border-color .12s linear;
}
.btn--primaer{ background: var(--akzent); color: var(--blatt); }
.btn--primaer:hover{ background: var(--akzent-hover); }
.btn--primaer:active{ background: var(--akzent-aktiv); }
.btn--primaer:disabled, .btn--primaer[aria-disabled="true"]{
  background: var(--stuetze-200); color: var(--stuetze-700); cursor: not-allowed;
}
/* Schalter leise (sekundär) — Rand statt Fläche */
.btn--leise{ background: transparent; color: var(--akzent); border-color: var(--akzent); }
.btn--leise:hover{ background: var(--stuetze-100); }
.btn--leise:active{ background: var(--stuetze-200); }
.btn--leise:disabled, .btn--leise[aria-disabled="true"]{
  color: var(--stuetze-400); border-color: var(--stuetze-200); cursor: not-allowed;
}

/* --- 5.4 Querverweis (interner Link, gleichbleibender Ankertext) --- */
.querverweis{
  font-family: var(--font-sans); font-size: var(--fs-bedienung);
  letter-spacing: var(--ls-mini); color: var(--akzent);
  text-decoration: underline; text-underline-offset: 0.22em;
  text-decoration-thickness: var(--hairline);
}
.querverweis:hover{ color: var(--akzent-hover); }
p a, .fliesstext a{ color: var(--akzent); text-underline-offset: 0.18em; }

/* --- 5.5 Kontextzeile (M2) — ein Satz, an der Achse --- */
.kontextzeile p{ font-family: var(--font-serif); font-size: var(--fs-vorlauf);
  line-height: var(--lh-vorlauf); max-width: var(--measure); }

/* --- Modul-Überschrift · jedes Modul trägt eine sichtbare Überschrift
   (Klient 10.08.2026). H2-Element im Überschrift-3-Grad, damit die H1 der
   Seite dominant bleibt und die Seite bei vielen Modulen nicht kopflastig wird. */
.modul-titel{ font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-5); max-width: var(--measure); }
.modul-titel a{ color: inherit; text-decoration: none; }
.modul-titel a:hover{ color: var(--akzent); text-decoration: underline; text-underline-offset: 0.12em; }

/* --- 5.6 Hero (M1) · dritte Fassung — der eine erlaubte Bruch.
   Text links (7 Spalten), Bild rechts (5 Spalten) auf gleicher Höhe beginnend.
   Aussage, Unterzeile, Schalter und Bild stehen gemeinsam im ersten Bildschirm.
   Das Bild füllt seine Spalte in der Höhe und wird dafür SEITLICH beschnitten —
   kein flaches Vollbreiten-Band. Auf dem Telefon stapelt es (Bild hochkant). --- */
.hero-grid{ align-items: start; row-gap: var(--space-8); }
.hero-text{ grid-column: 1 / 8; grid-row: 1; }
.hero-aktion{ grid-column: 1 / 8; grid-row: 2; align-self: start; }
.hero-bild{ grid-column: 8 / 13; grid-row: 1 / 3; margin: 0; align-self: stretch; min-height: 0; }
.hero-bild img{ width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.hero .rubrik{ margin-bottom: var(--space-4); }
.hero h1{ margin-bottom: var(--space-6); max-width: 18ch; }
.hero .hero-unterzeile{ font-family: var(--font-serif); font-size: var(--fs-vorlauf);
  line-height: var(--lh-vorlauf); max-width: 40ch; }

/* --- 5.7 Bildstrecke (M5) + Bildcontainer 3:2 / 1:1 --- */
.figure{ margin: 0; }
.figure img{ width: 100%; border-radius: var(--radius);
  background: var(--stuetze-100); object-fit: cover; }
.figure--3-2 img{ aspect-ratio: 3 / 2; }
.figure--4-3 img{ aspect-ratio: 4 / 3; }
.figure--3-4 img{ aspect-ratio: 3 / 4; }
.figure--4-5 img{ aspect-ratio: 4 / 5; }
.figure--1-1 img{ aspect-ratio: 1 / 1; }
.figure--frei img{ aspect-ratio: auto; }
.figure figcaption{
  font-family: var(--font-sans); font-size: var(--fs-bedienung);
  line-height: var(--lh-bedienung); color: var(--stuetze-700);
  margin-top: var(--space-3); max-width: var(--measure-2col);
}
.bildstrecke{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
/* Arbeiten: zwei Spalten, versetzt — echtes Mauerwerk über CSS-Spalten,
   damit die real gelieferten Bilder (gemischtes Hoch-/Querformat) nicht
   destruktiv beschnitten werden. Leseordnung: linke Spalte, dann rechte. */
.bildstrecke--zwei{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.strecke-spalte{ display: flex; flex-direction: column; gap: var(--space-12); }
.strecke-spalte:nth-child(2){ margin-top: var(--space-16); } /* Versatz */

/* --- 5.8 Schrittfolge (M3) — Schrittelement, waagerecht + senkrecht --- */
.schritte--waagerecht{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.schritt-nr{
  font-family: var(--font-sans); font-weight: 300; font-variant-numeric: tabular-nums;
  font-size: var(--fs-zahl); line-height: 1; color: var(--linie);
  display: block; margin-bottom: var(--space-3);
}
.schritt-titel{ font-family: var(--font-serif); font-size: var(--fs-subline);
  line-height: var(--lh-subline); letter-spacing: var(--ls-tight); margin-bottom: var(--space-2); }
.schritt-text{ font-size: var(--fs-body); max-width: 32ch; }
/* senkrecht (Vorgehen): Nummer 1 Spalte / Inhalt 8 */
.schritte--senkrecht{ display: flex; flex-direction: column; gap: var(--space-12); }
.schritt-zeile{ display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--gutter);
  align-items: start; max-width: 60ch; }
.schritt-zeile .schritt-nr{ margin-bottom: 0; }
.schritt-zeile .schritt-titel{ margin-bottom: var(--space-2); }
.schritt-zeile + .schritt-zeile{ border-top: var(--hairline) solid var(--stuetze-200);
  padding-top: var(--space-12); }
.schritte--senkrecht .schritt-text{ max-width: 52ch; }

/* --- 5.9 Zwei-Spalten-Liste (M4) — Listenpaar, zwei Auszeichnungen, kein Farbcode allein --- */
.listenpaar{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--section); }
.liste-titel{ margin-bottom: var(--space-5); }
.liste li{ display: grid; grid-template-columns: 1.4em 1fr; gap: var(--space-2);
  padding-block: var(--space-2); align-items: start; }
.liste li + li{ border-top: var(--hairline) solid var(--stuetze-200); }
.liste .marke{ width: 1em; height: 1.4em; flex: none; }
.liste .marke svg{ width: 1em; height: 1em; display: block; }
.liste--ja .marke{ color: var(--akzent); }
.liste--nein .marke{ color: var(--stuetze-700); }
/* Neutrale Variante: Zuständigkeit/Treiber sind keine Ein-/Ausschluss-Listen —
   kein Haken/Kreuz, damit die Marke nichts Falsches behauptet. */
.liste--neutral li{ grid-template-columns: 1fr; }
.liste li span:last-child{ font-size: var(--fs-body); line-height: 1.4; }

/* --- 5.10 Hinweisblock (M6) — linke Haarlinie, kein Kasten --- */
.hinweis{ border-left: var(--hairline-strong) solid var(--linie);
  padding-left: var(--space-6); max-width: 62ch; }
.hinweis .etikett{ display: block; margin-bottom: var(--space-3); }
.hinweis p{ font-size: var(--fs-body); }

/* --- 5.11 Zitatblock (M9) — ABGELEITET (kein eigenes Modul im Brand Guide) --- */
/* Herleitung: Spectral Subline für das Zitat, Mikro-Etikett (Sans) für die
   Herkunft — beide Rollen stehen im Guide §09. Kein Kasten, kein Schatten,
   keine dritte Schriftfamilie, an der Achse. */
.zitat{ max-width: 46ch; }
.zitat blockquote{ font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-subline); line-height: var(--lh-subline); letter-spacing: var(--ls-tight);
  color: var(--linie); }
.zitat .herkunft{ font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-mikro); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--stuetze-700); margin-top: var(--space-4); }

/* --- 5.11b Teaser-Paar (M10) — zwei Felder, Verweis auf Unterseiten.
   Kein Kasten, kein Schatten — Abgrenzung über Haarlinie oben (wie Hinweisblock). */
.teaser-paar{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.teaser{ border-top: var(--hairline-strong) solid var(--linie); padding-top: var(--space-6); }
.teaser .teaser-titel{ font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-subline); line-height: var(--lh-subline); letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3); }
.teaser p{ margin-bottom: var(--space-6); max-width: 40ch; }

/* --- 5.12 CTA-Block (M7) — Aussage + Schalter --- */
.cta .grid{ align-items: center; row-gap: var(--space-6); }
.cta .cta-aussage{ font-family: var(--font-serif); font-size: var(--fs-subline);
  line-height: var(--lh-subline); letter-spacing: var(--ls-tight); max-width: 34ch; }
.cta .cta-aktion{ display: flex; }
.cta--rechts .cta-aktion{ justify-content: flex-end; }

/* --- 5.13 Kontaktangaben (Kontakt) --- */
.kontaktdaten dt{ font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-mikro);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--stuetze-700);
  margin-top: var(--space-5); }
.kontaktdaten dd{ margin: 0; font-family: var(--font-sans); font-size: var(--fs-subline);
  line-height: 1.3; }
.kontaktdaten dd a{ color: var(--linie); text-decoration: none; }
.kontaktdaten dd a:hover{ color: var(--akzent); text-decoration: underline; text-underline-offset: 0.2em; }

/* --- 5.14 Fußzeile — Adresse, Kontakt, Rechtliches (auf jeder Seite) --- */
/* Kein Vollton-Band: §12 begrenzt Stütze-100-Flächen auf höchstens 4 Spalten.
   Die Fußzeile trägt daher den Seitengrund und trennt über eine Haarlinie. */
.site-footer{ background: var(--grund); border-top: var(--hairline) solid var(--stuetze-200);
  padding-block: var(--section); }
.site-footer .grid{ row-gap: var(--space-10); }
.footer-block .etikett{ display: block; margin-bottom: var(--space-3); }
.footer-block p, .footer-block address{ font-family: var(--font-sans); font-size: var(--fs-bedienung);
  line-height: 1.6; font-style: normal; color: var(--stuetze-700); }
.footer-block a{ color: var(--stuetze-700); text-decoration: none; }
.footer-block a:hover{ color: var(--akzent); text-decoration: underline; text-underline-offset: 0.2em; }
.footer-rechts a{ color: var(--linie); }
.footer-bewertung{ margin-top: var(--space-6); }
.footer-copy{ margin-top: var(--space-10); padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--stuetze-200);
  font-family: var(--font-sans); font-size: var(--fs-mikro); letter-spacing: var(--ls-mini);
  color: var(--stuetze-700); }

/* --- 5.15 Rechtstext (Impressum, Datenschutz) --- */
.rechtstext{ max-width: var(--measure); }
.rechtstext h2{ font-size: var(--fs-h3); margin-top: var(--space-16); margin-bottom: var(--space-4); }
.rechtstext h3{ font-size: var(--fs-subline); margin-top: var(--space-10); margin-bottom: var(--space-2); }
.rechtstext > *:first-child{ margin-top: 0; }
.rechtstext p{ margin-top: var(--space-4); }
.rechtstext address{ font-style: normal; margin-top: var(--space-4); }
.rechtstext ul{ margin-top: var(--space-4); }
.rechtstext ul li{ position: relative; padding-left: var(--space-5); margin-top: var(--space-2); }
.rechtstext ul li::before{ content: "–"; position: absolute; left: 0; color: var(--stuetze-700); }
.rechtstext a{ color: var(--akzent); text-underline-offset: 0.18em; }
.def{ margin-top: var(--space-5); }
.def dt{ font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-mass);
  letter-spacing: var(--ls-mini); color: var(--stuetze-700); margin-top: var(--space-5); }
.def dd{ margin: 0; }

/* Skip-Link (Tastaturbedienung) */
.skip-link{ position: absolute; left: -9999px; top: 0; background: var(--akzent); color: var(--blatt);
  padding: var(--space-3) var(--space-5); z-index: 10; border-radius: var(--radius); }
.skip-link:focus{ left: var(--space-4); top: var(--space-4); }

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

/* ========================= 6 · RESPONSIV ========================= */
/* Mobil zuerst gedacht: das 12-Spalten-Raster gilt für große Schirme;
   auf kleinen wird gestapelt — die Modulreihenfolge bleibt erhalten. */
@media (max-width: 900px){
  :root{ --fs-h1: 2.9rem; --fs-h2: 2.15rem; --section: var(--space-16); }
  .listenpaar{ gap: var(--space-16); }
  .bildstrecke--zwei .figure:nth-child(even){ margin-top: 0; }
}
@media (max-width: 760px){
  :root{ --fs-h1: 2.35rem; --fs-h2: 1.85rem; --fs-h3: 1.6rem; }
  /* Raster stapelt: alle genutzten Spaltenlagen auf volle Breite */
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8{ grid-column: 1 / -1; }
  .bildstrecke{ grid-template-columns: 1fr; }
  .bildstrecke--zwei{ grid-template-columns: 1fr; gap: var(--space-12); }
  .strecke-spalte:nth-child(2){ margin-top: 0; }
  .schritte--waagerecht{ grid-template-columns: 1fr 1fr; gap: var(--space-10) var(--gutter); }
  .listenpaar{ grid-template-columns: 1fr; gap: var(--space-12); }
  .teaser-paar{ grid-template-columns: 1fr; gap: var(--space-12); }
  .cta--rechts .cta-aktion{ justify-content: flex-start; }
  .site-nav{ margin-left: 0; width: 100%; }
  /* Hero stapelt: Aussage, Unterzeile, Bild (hochkant beschnitten), Schalter */
  .hero-text, .hero-aktion, .hero-bild{ grid-column: 1 / -1; grid-row: auto; }
  .hero-bild img{ height: auto; aspect-ratio: 4 / 5; max-height: 52vh; }
}
@media (max-width: 460px){
  .schritte--waagerecht{ grid-template-columns: 1fr; }
  .schritt-zeile{ grid-template-columns: 2.6rem 1fr; }
}

/* Bewegung ist im System ohnehin gesperrt — hier nur zur Sicherheit */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}