/* ==========================================================================
   Hofgarten Floristik — Stylesheet
   Mobile first. Basis = Smartphone, Erweiterungen ab 640 / 1024 / 1440 px.
   Tokens entsprechen dem Designsystem (Navy-Fassung, Oktober 2026).
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, keine Verbindung zu Google) ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Farbe */
  --tinte: #060E24;
  --navy: #0B1A3D;
  --navy-erhoeht: #142B5E;
  --kreide: #F2F4F7;
  --dunst: #B9C6E8;
  --schiefer: #9CAEDC;
  --schiefer-matt: #8FA4D4;
  --nebel-dunkel: #4A5D9E;
  --linie: #2A4686;
  --linie-hell: #C8D0E4;
  --konstruktion: rgba(242, 244, 247, 0.06);
  --gold: #D9B65C;            /* ausschließlich Wortmarke */

  /* Schrift */
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Fluide Typostufen: Smartphone -> 1440 px */
  --display-l: clamp(2.5rem, 1.05rem + 6.2vw, 5.5rem);     /* 40 -> 88 */
  --display-m: clamp(2rem, 1.5rem + 2.1vw, 2.875rem);      /* 32 -> 46 */
  --headline: clamp(1.375rem, 1.18rem + 0.85vw, 1.875rem); /* 22 -> 30 */
  --lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);     /* 18 -> 21 */

  /* Raster */
  --rand: clamp(20px, 5.6vw, 80px);
  --steg: 16px;
  --spalten: 4;
  --einzug: calc((min(100vw, 1440px) - 2 * var(--rand)) / 6);

  /* Raum */
  --sektion: clamp(48px, 2rem + 4vw, 80px);   /* x2 = 96 bis 160 zwischen Sektionen */
  --kopf-h: 73px;
}

@media (min-width: 1024px) {
  :root {
    --steg: 32px;
    --spalten: 12;
    --spalte: calc((min(100vw, 1440px) - 2 * var(--rand) - 11 * 32px) / 12);
    --einzug: calc(var(--spalte) + 32px);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--kreide);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.menue-offen { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
address { font-style: normal; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: var(--rand); top: -100px; z-index: 100;
  padding: 12px 20px; background: var(--kreide); color: var(--navy);
  font-weight: 500; text-decoration: none;
}
.sprung:focus { top: 12px; }

/* ---------- Raster ---------- */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- Typo-Bausteine ---------- */
.gestaffelt {
  font-size: var(--display-l);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: normal;
}
.gestaffelt .z1, .gestaffelt .z2 { display: block; }
.gestaffelt .z2 { color: var(--dunst); padding-left: var(--einzug); }

.lead {
  font-size: var(--lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--schiefer);
  max-width: 34em;
}

.label {
  font-family: var(--sans);   /* gleiche Familie wie H1/H2: Versal, enge Laufweite */
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--schiefer-matt);
}

.textlink {
  color: var(--kreide);
  text-decoration: underline;
  text-decoration-color: var(--schiefer);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.textlink:hover { text-decoration-color: currentColor; }

/* ---------- Buttons ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.knopf--primaer { background: var(--kreide); color: var(--navy); }
.knopf--primaer:hover { background: var(--dunst); }
.knopf--sekundaer { border-color: var(--schiefer); color: var(--kreide); background: transparent; }
.knopf--sekundaer:hover { border-color: var(--kreide); }

/* ---------- Wortmarke ---------- */
.marke {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--gold);
  text-decoration: none;
  line-height: 1;
}
.marke__wort {
  font-weight: 700;
  letter-spacing: 0.015em;
}
.marke__zusatz {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.27em;
  letter-spacing: 0.44em;
  margin-right: -0.44em;  /* Laufweite nach dem letzten Buchstaben ausgleichen: bündig rechts */
  margin-top: 0.74em;     /* = 28 % der Versalhöhe der Wortzeile */
}

/* ==========================================================================
   Kopf und Navigation
   ========================================================================== */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 10px;
}
.kopf .marke { font-size: 24px; }

.menue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--schiefer);
  background: transparent;
  color: var(--kreide);
  flex-shrink: 0;
}
.menue-knopf svg { width: 20px; height: 20px; }
.menue-knopf .zu { display: none; }
.menue-knopf[aria-expanded="true"] .auf { display: none; }
.menue-knopf[aria-expanded="true"] .zu { display: block; }
html:not(.js) .menue-knopf { display: none; }

/* Navigation: ohne JavaScript einfach sichtbar, mit JavaScript als Overlay */
.nav { display: flex; flex-direction: column; gap: 32px; }

.js .nav {
  display: none;
  position: fixed;
  inset: var(--kopf-h) 0 0 0;
  z-index: 40;
  background: var(--navy);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px var(--rand) 48px;
}
.js.menue-offen .nav { display: flex; }

.nav__liste > li { border-bottom: 1px solid var(--linie); }
.nav__link, .nav__auf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: 0;
  color: var(--kreide);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration: none;
}
.nav__auf svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; }
.nav__auf[aria-expanded="true"] svg { transform: rotate(180deg); }

.js .nav__unter { display: none; }
.nav__auf[aria-expanded="true"] + .nav__unter { display: block; }
.nav__unter { padding: 0 0 16px; }
.nav__unter a {
  display: block;
  padding: 10px 0 10px var(--einzug);
  color: var(--schiefer);
  font-size: 1.125rem;
  text-decoration: none;
}
.nav__unter a:hover { color: var(--kreide); }
.nav__link:hover { color: var(--dunst); }

.nav__cta { align-self: stretch; }

@media (min-width: 640px) {
  .nav__cta { align-self: flex-start; }
}

@media (min-width: 1024px) {
  .kopf__innen { padding-block: 22px; }
  .menue-knopf { display: none; }

  .js .nav, .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 0;
    background: none;
    overflow: visible;
  }
  .nav__liste { display: flex; align-items: center; gap: 40px; }
  .nav__liste > li { border: 0; position: relative; }
  .nav__link, .nav__auf {
    width: auto;
    padding: 8px 0;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--schiefer);
    gap: 8px;
  }
  .nav__link:hover, .nav__auf:hover,
  .nav__link[aria-current="page"] { color: var(--kreide); }
  .nav__auf svg { width: 12px; height: 12px; }

  .nav__unter {
    position: absolute;
    top: calc(100% + 23px);
    left: -24px;
    min-width: 280px;
    padding: 12px 0;
    background: var(--navy-erhoeht);
  }
  .nav__unter a { padding: 10px 24px; font-size: 15px; color: var(--kreide); }
  .nav__unter a:hover { color: var(--dunst); }
  .nav__cta { min-height: 44px; padding: 0 24px; font-size: 15px; }
}

/* ==========================================================================
   Sektionen allgemein
   ========================================================================== */
.sektion { padding-block: var(--sektion); position: relative; }
.sektion__kopf { margin-bottom: 48px; }
.sektion__kopf .lead { margin-top: 32px; }

@media (min-width: 1024px) {
  .sektion__kopf { margin-bottom: 64px; }
}

/* ==========================================================================
   1 Auftakt
   ========================================================================== */
.auftakt { position: relative; overflow: hidden; }

.auftakt__text {
  position: relative;
  padding-top: 48px;
  padding-bottom: 40px;
  display: grid;
  gap: 32px;
}
.auftakt__titel {
  font-size: clamp(2.25rem, 0.6rem + 9.6vw, 8.25rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  position: relative;
}
.auftakt__seite { display: grid; gap: 32px; justify-items: start; position: relative; }


.auftakt__bild { position: relative; }
.auftakt__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 86% 50%;
  background: var(--tinte);
}
.auftakt__bild figcaption {
  max-width: 1440px;
  margin-inline: auto;
  padding: 16px var(--rand) 0;
}

@media (min-width: 640px) {
  .auftakt__bild img { aspect-ratio: 3 / 2; object-position: 60% 50%; }
}

@media (min-width: 1024px) {
  .auftakt__text {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 48px;
    padding-top: 72px;
    padding-bottom: 56px;
  }
  .auftakt__titel {
    grid-column: 1 / -1;
    /* Zeile 2 inkl. Einzug von zwei Spalten passt immer in eine Zeile */
    font-size: calc((min(100vw, 1440px) - 2 * var(--rand) - 2 * var(--einzug)) / 9.3);
  }
  .auftakt__titel .z2 { padding-left: calc(2 * var(--einzug)); white-space: nowrap; }
  .auftakt__seite { grid-column: 7 / 12; }
  .auftakt__bild img {
    aspect-ratio: auto;
    height: clamp(440px, 58vh, 820px);
    object-position: 50% 50%;
  }
}

/* ==========================================================================
   2 Nächste Kurse
   ========================================================================== */
.termine { border-top: 1px solid var(--linie); }
.termin {
  display: grid;
  gap: 12px;
  padding-block: 28px;
  border-bottom: 1px solid var(--linie);
}
.termin__zeit {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.termin__zeit time { color: var(--kreide); }
.termin__zeit span { color: var(--schiefer-matt); }
.termin__name {
  font-size: var(--headline);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.termin__text { color: var(--schiefer); max-width: 68ch; margin-top: 8px; }
.termin__anfrage { justify-self: start; font-weight: 500; }

.termine__mehr { margin-top: 32px; }

@media (min-width: 1024px) {
  .termin {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: baseline;
  }
  .termin__zeit { grid-column: 1 / 4; flex-direction: column; }
  .termin__inhalt { grid-column: 4 / 10; }
  .termin__anfrage { grid-column: 10 / 13; justify-self: end; }
}

/* ==========================================================================
   3 Floristik
   ========================================================================== */
.bildpaar { display: grid; }
.bildpaar__eintrag a { display: block; text-decoration: none; color: inherit; }
.bildpaar__eintrag img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--tinte);
}
.bildpaar__text { padding: 24px 0 40px; display: grid; gap: 8px; }
.bildpaar__name {
  font-size: var(--headline);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.bildpaar__name .label { flex-shrink: 0; }
.bildpaar__eintrag a:hover .bildpaar__titel {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bildpaar__text p { color: var(--schiefer); max-width: 40ch; }

@media (min-width: 640px) {
  .bildpaar { grid-template-columns: 1fr 1fr; }   /* Abstand 0: die Bilder stoßen bündig */
  .bildpaar__text { padding: 24px 24px 0 0; }
}
@media (min-width: 1024px) {
  .bildpaar__text { padding-right: 32px; }
}

.sparten { margin-top: 8px; border-top: 1px solid var(--linie); }
@media (min-width: 640px) { .sparten { margin-top: 48px; } }
.sparten li { border-bottom: 1px solid var(--linie); }
.sparten a {
  display: grid;
  row-gap: 8px;
  padding-block: 28px;
  text-decoration: none;
  color: inherit;
}
.sparten__name {
  font-size: var(--headline);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.sparten a:hover .sparten__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.sparten p { color: var(--schiefer); max-width: 52ch; }

@media (min-width: 1024px) {
  .sparten { margin-top: 96px; }
  .sparten a {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: baseline;
  }
  .sparten__name { grid-column: 1 / 7; }
  .sparten p { grid-column: 7 / 13; }
}

/* ==========================================================================
   4 Regional & saisonal (invertiert auf Kreide)
   ========================================================================== */
.sektion--kreide {
  background: var(--kreide);
  color: var(--navy);
  padding-block: 0;
}
.sektion--kreide :focus-visible { outline-color: var(--navy); }
.sektion--kreide .gestaffelt .z2 { color: var(--nebel-dunkel); }
.sektion--kreide .label { color: var(--nebel-dunkel); }
.sektion--kreide .textlink { color: var(--navy); text-decoration-color: var(--nebel-dunkel); }
.sektion--kreide .textlink:hover { text-decoration-color: var(--navy); }

.regional__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--linie-hell);
}
.regional__text { padding-block: 64px; }
.regional__text p { color: var(--nebel-dunkel); max-width: 60ch; }
.regional__text .lead { color: var(--navy); }

.paare { margin-top: 48px; border-top: 1px solid var(--linie); }
.paare > div {
  display: grid;
  gap: 4px 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--linie);
}
.paare dt { padding-top: 0; }
.paare dd { margin: 0; }
.sektion--kreide .paare,
.sektion--kreide .paare > div { border-color: var(--linie-hell); }

.regional__text .textlink { display: inline-block; margin-top: 32px; }

@media (min-width: 640px) {
  .paare > div { grid-template-columns: 9rem 1fr; align-items: baseline; }
  .regional__bild img { aspect-ratio: 3 / 2; }
}

@media (min-width: 1024px) {
  .regional {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1600px;
    margin-inline: auto;
  }
  .regional__bild img { height: 100%; min-height: 720px; aspect-ratio: auto; }
  .regional__text {
    padding: 96px var(--rand) 96px 64px;
    max-width: 720px;
    align-self: center;
  }
}

/* ==========================================================================
   5 Besuch
   ========================================================================== */
.besuch { display: grid; gap: 48px; }
.besuch__daten .paare { margin-top: 0; }
.besuch__daten dd { color: var(--kreide); }
.zeiten span { color: var(--schiefer); }
.besuch__aktionen { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.besuch__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 70% 50%;
  background: var(--tinte);
}

@media (min-width: 1024px) {
  .besuch {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }
  .besuch__daten { grid-column: 1 / 6; }
  .besuch__bild { grid-column: 6 / 13; }
  .besuch__bild img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   6 Footer
   ========================================================================== */
.fuss {
  background: var(--tinte);
  padding-block: 64px 32px;
  color: var(--schiefer);
}
.fuss .marke { color: var(--gold); font-size: clamp(2.75rem, 1.6rem + 4.8vw, 4.75rem); }

.fuss__spalten {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 24px;
}
.fuss__spalten h2 { margin-bottom: 16px; }
.fuss__spalten li + li { margin-top: 10px; }
.fuss a { color: var(--schiefer); text-decoration: none; overflow-wrap: anywhere; }
.fuss a:hover { color: var(--kreide); }
.fuss address { line-height: 1.8; }

.fuss__basis {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  font-size: 0.8125rem;
  color: var(--schiefer-matt);
}
.fuss__basis ul { display: flex; gap: 32px; }
.fuss__basis a { color: var(--schiefer-matt); }

@media (min-width: 1024px) {
  .fuss { padding-block: 96px 40px; }
  .fuss__spalten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 96px;
  }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.regional__text .lead { margin-top: 32px; }
@media (min-width: 1024px) {
  .regional .gestaffelt { font-size: clamp(2.5rem, 0.5rem + 4vw, 4.5rem); }
}

/* Herkunft: Orte nebeneinander, je mit blauem Rand links */
.orte {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
}
.orte li {
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--navy);
  font-size: var(--headline);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   Unterseiten
   ========================================================================== */

/* Seitentitel: Größe richtet sich nach dem längsten Wort (z. B. HOCHZEITSFLORISTIK) */
.auftakt__titel--seite {
  font-size: clamp(2.75rem, 0.9rem + 7.6vw, 6rem);
  hyphens: manual;   /* lange Komposita brechen nur an gesetzten ­ */
}
.auftakt__titel--seite .z2 { white-space: normal; }
@media (min-width: 1024px) {
  .auftakt__titel.auftakt__titel--seite { font-size: clamp(2.75rem, 0.9rem + 7.6vw, 6rem); }
  .auftakt__titel--seite .z2 { padding-left: var(--einzug); white-space: normal; }
}
.auftakt--ohne-bild .auftakt__text { padding-bottom: var(--sektion); }

.auftakt__aktionen { display: flex; flex-wrap: wrap; gap: 16px; }

.seitenbild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--tinte);
}
@media (min-width: 640px) { .seitenbild img { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) {
  .seitenbild img { aspect-ratio: auto; height: clamp(360px, 54vh, 680px); }
}

/* Hairline-Liste ohne Links (Leistungen, Anlässe, Saisonkalender) */
.zeilen { border-top: 1px solid var(--linie); }
.zeilen > li {
  display: grid;
  row-gap: 8px;
  padding-block: 28px;
  border-bottom: 1px solid var(--linie);
}
.zeilen h3 {
  font-size: var(--headline);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.zeilen p { color: var(--schiefer); max-width: 52ch; }
.zeilen p a { color: var(--kreide); }
@media (min-width: 1024px) {
  .zeilen > li {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: baseline;
  }
  .zeilen h3 { grid-column: 1 / 6; }
  .zeilen p { grid-column: 7 / 13; }
}

/* Bündiges Bildraster */
.bildraster { display: grid; }
.bildraster img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--tinte);
}
@media (min-width: 640px) {
  .bildraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bildraster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kreide-Sektion über volle Breite (nicht geteilt) */
.sektion--kreide.sektion--voll { padding-block: clamp(64px, 3rem + 3vw, 96px); }
.sektion--kreide .paare dd { color: var(--navy); }

@media (min-width: 1024px) {
  .paare--breit > div {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: baseline;
  }
  .paare--breit dt { grid-column: 1 / 4; }
  .paare--breit dd { grid-column: 4 / 11; }
}

/* Häufige Fragen */
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-block: 24px;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--schiefer);
  flex-shrink: 0;
}
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding-bottom: 28px; color: var(--schiefer); max-width: 68ch; }

/* Anfrage */
.anfrage { display: grid; gap: 48px; }
.anfrage__text p { color: var(--schiefer); max-width: 44ch; }
.anfrage__weg {
  display: grid;
  gap: 8px;
  padding-block: 24px;
  border-top: 1px solid var(--linie);
}
.anfrage__weg:last-child { border-bottom: 1px solid var(--linie); }
.anfrage__weg a {
  font-size: var(--display-m);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--kreide);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.anfrage__weg a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
@media (min-width: 1024px) {
  .anfrage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .anfrage__text { grid-column: 1 / 6; }
  .anfrage__wege { grid-column: 7 / 13; }
}

/* Fließtext-Spalte */
.fliess p { color: var(--schiefer); max-width: 68ch; }
.fliess p + p { margin-top: 16px; }
.fliess .textlink, .fliess .knopf { margin-top: 32px; }
@media (min-width: 1024px) {
  .fliess { margin-left: calc(var(--einzug) * 3); }
}

/* Aktuelle Seite in der Navigation */
.nav__unter a[aria-current="page"] { color: var(--kreide); }

/* Rechtstexte */
.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: var(--headline); font-weight: 500; line-height: 1.2; margin-top: 48px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { color: var(--schiefer); margin-top: 16px; }

/* Bildnachweis (Demo-Bilder von Unsplash) */
.bildnachweis {
  padding: 8px var(--rand) 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--schiefer-matt);
}
.bildnachweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bildnachweis a:hover { color: var(--kreide); }
.seitenbild .bildnachweis { max-width: 1440px; margin-inline: auto; }
.bildraster .bildnachweis { padding-inline: 0; }
.bildraster li { min-width: 0; }
.sektion--kreide .bildnachweis { color: var(--nebel-dunkel); }
.sektion--kreide .bildnachweis a:hover { color: var(--navy); }
@media (min-width: 1024px) {
  .regional__bild { display: flex; flex-direction: column; }
  .regional__bild img { flex: 1 1 auto; min-height: 720px; }
  .regional__bild .bildnachweis { padding-bottom: 12px; }
}
.bildpaar .bildnachweis { padding-inline: 0; }

/* Drei Schritte (Kurse) */
.schritte { display: grid; }
.schritt {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-block: 28px;
  border-top: 1px solid var(--linie);
}
.schritt h3 {
  font-size: var(--headline);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 16em;
}
.schritt p { color: var(--schiefer); max-width: 40ch; }
.sektion--kreide .schritt { border-color: var(--linie-hell); }
.sektion--kreide .schritt p { color: var(--nebel-dunkel); }
.schritt .label { margin-bottom: 4px; }
@media (min-width: 768px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
}

/* ==========================================================================
   Live-Version (schlank): Kopf-CTA, Karte, Kontakt
   ========================================================================== */
.kopf__cta { min-height: 44px; padding: 0 22px; font-size: 15px; }

.auftakt__aktionen { display: flex; flex-wrap: wrap; gap: 16px; }

/* Google Maps mit 2-Klick-Lösung: Karte lädt erst nach Zustimmung */
.karte {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--navy-erhoeht);
  border: 1px solid var(--linie);
  overflow: hidden;
}
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte__hinweis {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 20px;
  padding: 24px; text-align: center;
}
.karte__hinweis p { color: var(--schiefer); max-width: 40ch; font-size: 0.9375rem; }
.karte__hinweis a { color: var(--kreide); }
@media (min-width: 1024px) {
  .karte { aspect-ratio: 3 / 2; }
}

/* Kontakt-Kacheln */
.kontakt { display: grid; border-top: 1px solid var(--linie); }
.kontakt a {
  display: grid; gap: 6px;
  padding: 28px 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none; color: inherit;
}
.kontakt__wert { font-size: var(--headline); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.kontakt a:hover .kontakt__wert { color: var(--dunst); }
@media (min-width: 1024px) {
  .kontakt { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
  .kontakt a { border-top: 1px solid var(--linie); }
}
.sektion--kreide .kontakt,
.sektion--kreide .kontakt a { border-color: var(--linie-hell); }
.sektion--kreide .kontakt .lead,
.sektion--kreide .sektion__kopf .lead { color: var(--nebel-dunkel); }
.sektion--kreide .kontakt__wert { color: var(--navy); }
.sektion--kreide .kontakt a:hover .kontakt__wert { color: var(--nebel-dunkel); }