/* trauzeuge.at · CI „Myrte“ · v1.0.0 */

@font-face {
  font-family: "Gabarito";
  src: url("/fonts/gabarito-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Farben aus der CI „Myrte“ */
  --myrte: #2D4A3B;
  --myrte-tief: #213A2D;
  --blatt: #9DB89A;
  --blatt-dunkel: #7F9A7C;
  --bluete: #E9C64B;
  --beere: #4B3558;
  --leinen: #F4F6EF;
  --leinen-2: #E7ECDF;
  --weiss: #FFFFFF;
  --text: #26302A;
  --text-2: #4A564E;
  --linie: #D6DDCF;
  --auf-dunkel: #F4F6EF;
  --auf-dunkel-2: #C9D6C6;

  /* Schrift */
  --display: "Gabarito", "Avenir Next", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fünf Größenstufen */
  --fs-display: clamp(44px, 6.6vw, 108px);
  --fs-display-s: clamp(44px, 5.6vw, 92px);
  --fs-h2: clamp(34px, 3.9vw, 60px);
  --fs-statement: clamp(23px, 2.3vw, 34px);
  --fs-h3: clamp(19px, 0.6vw + 13px, 21px);
  --fs-body: clamp(17px, 0.35vw + 13px, 18px);
  --fs-small: 15px;

  /* Raster */
  --rand: clamp(20px, 3.2vw, 48px);
  --max: 1440px;
  --abschnitt: clamp(96px, 11vw, 176px);

  /* Das Motiv: das Myrtenblatt als Ecke */
  --blatt-xl: clamp(56px, 9vw, 168px);
  --blatt-l: clamp(36px, 5vw, 88px);
  --blatt-m: 28px;
  --spitz: 8px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ruhig: cubic-bezier(0.16, 0.84, 0.28, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-reveal: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--leinen);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, .punkt-titel, .fuss-titel { text-wrap: balance; font-family: var(--display); color: var(--myrte); font-weight: 700; }
p, li, dd, td, th, figcaption, blockquote, summary { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--bluete); color: var(--myrte-tief); }

:focus-visible {
  outline: 3px solid var(--bluete);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: var(--rand); top: -100px; z-index: 100;
  background: var(--myrte); color: var(--weiss); padding: 12px 18px;
  border-radius: 14px 4px; text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--leinen);
  transition: background-color var(--t-hover) ease;
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 80px;
}
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em;
  color: var(--myrte); text-decoration: none; line-height: 1;
}
.marke svg { width: 34px; height: 34px; flex: none; }
.marke span span { color: var(--blatt-dunkel); font-weight: 600; }
.kopf nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.kopf nav a { text-decoration: none; font-size: var(--fs-body); color: var(--text); padding: 6px 0; position: relative; transition: color var(--t-hover) ease; }
.kopf nav a:not(.knopf)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--ease-out); }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--myrte); }
.kopf nav a:hover::after, .kopf nav a[aria-current="page"]::after { transform: scaleX(1); }
.kopf nav .knopf { padding: 12px 20px; color: var(--weiss); }
.menu-knopf {
  display: none; align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px 4px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-body); color: var(--myrte);
}
.menu-knopf i { position: relative; width: 22px; height: 2px; background: currentColor; display: block; transition: background-color var(--t-hover) ease; }
.menu-knopf i::before, .menu-knopf i::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
  transition: transform 260ms var(--ease-out);
}
.menu-knopf i::before { top: -7px; }
.menu-knopf i::after { top: 7px; }
.menu-offen .menu-knopf i { background: transparent; }
.menu-offen .menu-knopf i::before { transform: translateY(7px) rotate(45deg); }
.menu-offen .menu-knopf i::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--myrte); color: var(--weiss);
  font-family: var(--display); font-weight: 600; font-size: var(--fs-body); line-height: 1.2;
  padding: 17px 28px; border: 0; cursor: pointer; text-decoration: none;
  border-radius: 18px var(--spitz) 18px var(--spitz);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), border-radius 320ms var(--ease-out);
}
.knopf:hover { background: var(--myrte-tief); border-radius: var(--spitz) 18px var(--spitz) 18px; }
.knopf:active { transform: scale(0.97); }
.knopf.hell { background: var(--leinen); color: var(--myrte); }
.knopf.hell:hover { background: var(--weiss); }
.knopf.bluete { background: var(--bluete); color: var(--myrte-tief); }
.knopf.bluete:hover { background: #F2D46A; }
.knopf.leise { background: var(--leinen-2); color: var(--myrte); }

/* ---------- Knopf „Nach oben“ ---------- */
.nach-oben-knopf {
  position: fixed; z-index: 40;
  right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--myrte); color: var(--leinen);
  border-radius: 18px var(--spitz) 18px var(--spitz);
  box-shadow: 0 0 0 2px var(--leinen), 0 6px 16px rgba(33, 58, 45, 0.18);
  opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 0s linear 250ms, background-color var(--t-hover) ease, border-radius 320ms var(--ease-out);
}
.nach-oben-knopf.zeigen { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nach-oben-knopf:hover { background: var(--myrte-tief); border-radius: var(--spitz) 18px var(--spitz) 18px; }
.nach-oben-knopf:focus-visible { border-radius: 18px var(--spitz) 18px var(--spitz); }
.menu-offen .nach-oben-knopf { opacity: 0; visibility: hidden; }
.knopf.leise:hover { background: #DCE3D2; }

.textlink {
  color: var(--myrte); font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--blatt); text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.textlink:hover { text-decoration-color: var(--myrte); }

/* ---------- Häkchen-Motiv ---------- */
.haken { width: 0.95em; height: 0.95em; flex: none; display: inline-block; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Abschnitte allgemein ---------- */
.abschnitt { padding: var(--abschnitt) 0 0; }
.abschnitt-kopf { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.punkt-titel { font-size: 1.17em; }
.h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.lead { font-size: var(--fs-h3); line-height: 1.55; max-width: 60ch; }
.klein { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.h2 + .lead { margin-top: 18px; }
.abschnitt-kopf .h2 + .lead { margin-top: 0; }
.fliess p + p { margin-top: 1em; }
.fliess a { color: var(--myrte); font-weight: 700; text-decoration-color: var(--blatt); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fliess a:hover { text-decoration-color: var(--myrte); }

.foto { position: relative; overflow: hidden; background: var(--leinen-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.blattform { border-radius: var(--blatt-xl) 12px var(--blatt-xl) 12px; }
.blattform-l { border-radius: var(--blatt-l) 10px var(--blatt-l) 10px; }
.blattform-m { border-radius: var(--blatt-m) 8px var(--blatt-m) 8px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(24px, 3vw, 48px) 0 0; }
.hero .wrap {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  align-items: center; min-height: min(calc(100svh - 80px), 860px);
}
.hero-text { grid-column: 1 / span 6; padding: 32px 0 48px; }
.hero h1 { font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.04em; max-width: 9.5em; }
.hero .lead { margin-top: clamp(24px, 2.6vw, 40px); max-width: 34ch; color: var(--text); }
.hero-aktion { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.hero-bild { grid-column: 7 / span 6; position: relative; height: min(76svh, 760px); min-height: 520px; }
.hero-bild .foto { position: absolute; inset: 0; }
.hero-bild .dia { position: absolute; inset: -6% 0 0 0; height: 112%; opacity: 0; transition: opacity 1.6s ease; will-change: transform; }
.hero-bild .dia.an { opacity: 1; }
.hero-bild .dia img { height: 100%; }
.hero-karte {
  position: absolute; left: clamp(-56px, -3vw, -20px); bottom: clamp(24px, 4vw, 56px);
  width: min(360px, 78%); background: var(--weiss); padding: 22px 24px 20px;
  border-radius: var(--blatt-m) 8px var(--blatt-m) 8px; z-index: 2;
}
.hero-karte .titel { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); color: var(--myrte); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hero-karte .titel small { font-family: var(--body); font-weight: 400; font-size: var(--fs-small); color: var(--text-2); }
.hero-karte ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.hero-karte a.mehr { display: inline-block; margin-top: 12px; font-size: var(--fs-small); }

/* Abhak-Zeile (gemeinsam für Hero-Karte und Checkliste) */
.punkt-zeile { position: relative; }
.punkt-zeile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.punkt-zeile label {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 5px 0;
  font-size: var(--fs-body); line-height: 1.4; color: var(--text);
}
.kaestchen {
  position: relative; width: 24px; height: 24px; flex: none; margin-top: -1px;
  border: 2px solid var(--blatt); border-radius: 9px 3px 9px 3px;
  display: grid; place-items: center; background: var(--weiss);
  transition: background-color 220ms ease, border-color 220ms ease, transform var(--t-press) var(--ease-out);
}
.kaestchen::after {
  content: ""; position: absolute; left: 50%; top: 44%; width: 6px; height: 11px;
  border: solid var(--weiss); border-width: 0 2.6px 2.6px 0; border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform 320ms var(--ease-out) 40ms;
}
.punkt-zeile label:hover .kaestchen { border-color: var(--myrte); }
.punkt-zeile label:active .kaestchen { transform: scale(0.9); }
.punkt-zeile input:checked + label .kaestchen { background: var(--myrte); border-color: var(--myrte); }
.punkt-zeile input:checked + label .kaestchen::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.punkt-zeile input:checked + label .was { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--blatt); text-decoration-thickness: 2px; }
.punkt-zeile input:focus-visible + label .kaestchen { outline: 3px solid var(--bluete); outline-offset: 2px; }

/* ---------- Rolle: großer Satz ---------- */
.rolle .satz {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-statement);
  line-height: 1.32; letter-spacing: -0.02em; color: var(--myrte); max-width: 30em;
}
.rolle-zeilen { margin-top: clamp(56px, 7vw, 112px); display: grid; gap: clamp(36px, 4.4vw, 64px); }
.rolle-zeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 12px; align-items: baseline; }
.rolle-zeile h3, .rolle-zeile .punkt-titel { grid-column: 1 / span 5; font-size: var(--fs-statement); line-height: 1.12; letter-spacing: -0.02em; }
.rolle-zeile p { grid-column: 7 / span 6; max-width: 54ch; }

/* ---------- Vor der Hochzeit: großes Blatt + Punkte ---------- */
.vorher .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.vorher-bild { grid-column: 1 / span 5; margin-left: calc(-1 * var(--rand) - 6vw); height: min(82svh, 800px); position: sticky; top: 100px; }
.vorher-bild .foto { height: 100%; border-radius: 0 var(--blatt-xl) 12px var(--blatt-xl); }
.vorher-inhalt { grid-column: 7 / span 6; }
.punkte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(28px, 3vw, 48px); margin-top: clamp(36px, 4vw, 56px); }
.punkte h3, .punkte .punkt-titel { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.punkte h3 .haken, .punkte .punkt-titel .haken { color: var(--blatt-dunkel); }
.punkte li:nth-child(3n+2) h3 .haken, .punkte li:nth-child(3n+2) .punkt-titel .haken { color: var(--myrte); }
.punkte li:nth-child(3n) h3 .haken, .punkte li:nth-child(3n) .punkt-titel .haken { color: var(--beere); }
.punkte p:not(.punkt-titel) { font-size: var(--fs-body); line-height: 1.55; }

/* ---------- Am Hochzeitstag: wachsende Kacheln ---------- */
.tag-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; }
.tag-kopf { grid-column: 1 / -1; display: grid; gap: 18px; max-width: 760px; padding-bottom: clamp(32px, 4vw, 56px); }
.stufe { display: flex; flex-direction: column; }
.stufe .foto { width: 100%; }
.stufe:nth-of-type(1) { grid-column: 1 / span 3; }
.stufe:nth-of-type(2) { grid-column: 4 / span 3; }
.stufe:nth-of-type(3) { grid-column: 7 / span 3; }
.stufe:nth-of-type(4) { grid-column: 10 / span 3; }
.stufe:nth-of-type(1) .foto { height: 30svh; }
.stufe:nth-of-type(2) .foto { height: 42svh; }
.stufe:nth-of-type(3) .foto { height: 54svh; }
.stufe:nth-of-type(4) .foto { height: 66svh; }
.tag-stufen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.tag-stufen .stufe { grid-column: auto !important; }
.stufe-text { padding: 22px 18px 0 0; }
.stufe-text h3, .stufe-text .punkt-titel { margin-bottom: 8px; }
.stufe-text p { font-size: var(--fs-body); line-height: 1.55; }
.kinder-tipp {
  margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center;
  background: var(--weiss); padding: 24px; border-radius: var(--blatt-l) 10px var(--blatt-l) 10px; max-width: 980px;
}
.kinder-tipp .foto { height: 160px; border-radius: 40px 8px 40px 8px; }
.kinder-tipp h3, .kinder-tipp .punkt-titel { margin-bottom: 6px; }
.kinder-tipp p { font-size: var(--fs-body); }

/* ---------- Band: Nach der Hochzeit (Farbbrücke) ---------- */
.band {
  --band-bg: var(--myrte);
  margin-top: var(--abschnitt);
  background: var(--band-bg);
  color: var(--auf-dunkel);
  padding: clamp(96px, 10vw, 160px) 0;
  position: relative; overflow: hidden;
}
.band h2 { color: var(--auf-dunkel); }
.band, .band h2, .band h3, .band p, .band .punkt-titel { transition: color 400ms ease; }
.band.hell { color: var(--text); }
.band.hell h2, .band.hell h3, .band.hell .punkt-titel { color: var(--myrte); }
.band.hell .lead, .band.hell .band-liste p:not(.punkt-titel) { color: var(--text-2); }
.band.hell .band-liste .haken { color: var(--blatt-dunkel); }
.band .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: center; position: relative; z-index: 1; }
.band-motiv { grid-column: 1 / span 6; position: relative; aspect-ratio: 1 / 1; max-height: 640px; }
.band-motiv svg { width: 100%; height: 100%; overflow: visible; }
.band-inhalt { grid-column: 7 / span 6; }
.band-inhalt .lead { color: var(--auf-dunkel-2); margin-top: 18px; }
.band-liste { list-style: none; padding: 0; margin-top: clamp(32px, 4vw, 52px); display: grid; gap: 26px; }
.band-liste li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.band-liste .haken { width: 28px; height: 28px; color: var(--bluete); margin-top: 2px; }
.band-liste h3, .band-liste .punkt-titel { color: var(--auf-dunkel); margin-bottom: 4px; }
.band-liste p:not(.punkt-titel) { color: var(--auf-dunkel-2); font-size: var(--fs-body); }
#grosshaken .strich { stroke: var(--leinen); stroke-width: 4.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#grosshaken .blaetter path { fill: var(--blatt); transform-box: fill-box; transform-origin: 0% 50%; }
#grosshaken .bluete { fill: var(--bluete); transform-box: fill-box; transform-origin: 50% 50%; }

/* ---------- Rechtliches: gestufte Zahlen ---------- */
.recht-kacheln { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: start; }
.kachel { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 2.4vw, 36px); }
.kachel .zahl { font-family: var(--display); font-weight: 700; font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kachel p { font-size: var(--fs-body); line-height: 1.45; max-width: 24ch; }
.kachel.a { grid-column: 1 / span 6; grid-row: 1; min-height: 66svh; background: var(--blatt); color: var(--myrte-tief); border-radius: var(--blatt-xl) 10px 10px 10px; }
.kachel.a .zahl { color: var(--myrte-tief); }
.kachel.b { grid-column: 7 / span 3; grid-row: 1; min-height: 42svh; margin-top: 24svh; background: var(--myrte); color: var(--auf-dunkel); border-radius: 10px 10px var(--blatt-l) 10px; }
.kachel.b .zahl, .kachel.b p { color: var(--auf-dunkel); }
.kachel.c { grid-column: 10 / span 3; grid-row: 1; min-height: 32svh; margin-top: 34svh; background: var(--leinen-2); border-radius: 10px var(--blatt-l) 10px 10px; }
.kachel.c .zahl { color: var(--myrte); }
.recht-kopf { grid-column: 7 / span 6; grid-row: 1; align-self: start; padding: 4px 0 0 4px; }

.tabelle-huelle { margin-top: clamp(48px, 5vw, 80px); overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--weiss); border-radius: var(--blatt-l) 10px var(--blatt-l) 10px; padding: clamp(20px, 2.4vw, 36px); }
table.recht { width: 100%; border-collapse: collapse; min-width: 720px; font-size: var(--fs-body); }
table.recht caption { text-align: left; font-family: var(--display); font-weight: 700; color: var(--myrte); font-size: var(--fs-h3); padding-bottom: 14px; }
table.recht th, table.recht td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--linie); line-height: 1.45; }
table.recht thead th { font-family: var(--display); font-weight: 600; color: var(--text-2); font-size: var(--fs-small); }
table.recht tbody th { font-family: var(--display); font-weight: 700; color: var(--myrte); width: 18%; }
table.recht tr:last-child th, table.recht tr:last-child td { border-bottom: 0; }
.quelle { margin-top: 16px; }

/* Quellenzeile direkt unter einer Rechtsangabe */
.beleg { display: block; margin-top: 12px; font-family: var(--body); font-weight: 400; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); overflow-wrap: break-word; }
.beleg a { color: inherit; font-weight: 400; text-decoration: underline; text-decoration-color: var(--blatt); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--t-hover) ease; }
.beleg a:hover, .beleg a:focus-visible { text-decoration-color: currentColor; }
.kachel .zahl + p { margin-top: auto; }
.kachel p.beleg { max-width: none; margin-top: 14px; font-size: var(--fs-small); }
.kachel.a p.beleg { color: var(--myrte-tief); }
.kachel.a .beleg a { text-decoration-color: var(--myrte-tief); }
.kachel.b p.beleg { color: var(--auf-dunkel); }
table.recht td[data-label="Alter"] { white-space: nowrap; }
.ganz { white-space: nowrap; }
.frage .antwort .beleg { margin-top: 14px; }
.frage .antwort .beleg a { color: inherit; font-weight: 400; text-decoration-color: var(--blatt); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- Kosten: Zweispaltige Liste ---------- */
.kosten-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 64px; }
.kosten-zeile { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.kosten-zeile .mark { width: 56px; height: 56px; display: grid; place-items: center; background: var(--leinen-2); color: var(--myrte); border-radius: 22px 6px 22px 6px; }
.kosten-zeile .mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.kosten-zeile .mark.ja { background: var(--myrte); color: var(--leinen); }
.kosten-zeile .mark.teil { background: var(--blatt); color: var(--myrte-tief); }
.kosten-zeile .oben { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.kosten-zeile h3, .kosten-zeile .punkt-titel { font-size: var(--fs-h3); }
.kosten-zeile .wer { font-family: var(--display); font-weight: 600; font-size: var(--fs-small); color: var(--myrte); white-space: nowrap; }
.kosten-zeile p:not(.punkt-titel) { font-size: var(--fs-body); line-height: 1.5; margin-top: 4px; max-width: 40ch; color: var(--text-2); }
.kosten-zeichen { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.kosten-zeichen span { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text-2); }
.kosten-zeichen i { width: 18px; height: 18px; border-radius: 7px 2px 7px 2px; display: inline-block; }

/* ---------- Bräuche: mitlaufendes Foto ---------- */
.brauch-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.brauch-bilder { grid-column: 1 / span 6; position: sticky; top: 104px; height: min(78svh, 760px); }
.brauch-bilder .foto { height: 100%; }
.brauch-bild { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 900ms ease, transform 1400ms var(--ease-ruhig); }
.brauch-bild.an { opacity: 1; transform: none; }
.brauch-bild img { height: 100%; }
.brauch-liste { grid-column: 8 / span 5; list-style: none; padding: 0; }
.brauch { min-height: min(64svh, 640px); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px 0; }
.brauch:first-child { min-height: min(52svh, 520px); justify-content: flex-start; padding-top: 0; }
.brauch h3, .brauch .punkt-titel { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.03em; display: flex; align-items: center; gap: 0.3em; }
.brauch h3::before, .brauch .punkt-titel::before { content: ""; width: 0.36em; height: 0.36em; flex: none; border-radius: 0.2em 0.05em 0.2em 0.05em; background: var(--bluete); transform: scale(0); transition: transform 500ms var(--ease-out); }
.brauch.an h3::before, .brauch.an .punkt-titel::before { transform: scale(1); }
.brauch-handy { display: none; }
.rolle-tz { padding: 18px 22px; border-radius: 22px 6px 22px 6px; background: var(--leinen-2); }
.rolle-tz strong { font-family: var(--display); color: var(--myrte); display: block; margin-bottom: 4px; }

/* ---------- Checkliste ---------- */
.checkliste-teil { background: var(--myrte); color: var(--auf-dunkel); margin-top: var(--abschnitt); padding: clamp(88px, 9vw, 150px) 0; }
.checkliste-teil h2 { color: var(--auf-dunkel); }
.checkliste-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.checkliste-kopf > div:first-child { grid-column: 1 / span 6; }
.checkliste-kopf .lead { color: var(--auf-dunkel-2); margin-top: 16px; }
.fortschritt { grid-column: 8 / span 5; display: grid; gap: 14px; }
.fortschritt .zahlen { display: flex; align-items: baseline; gap: 14px; font-family: var(--display); }
.fortschritt .zahlen b { font-size: var(--fs-display); line-height: 0.9; font-weight: 700; color: var(--bluete); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.fortschritt .zahlen span { font-size: var(--fs-h3); color: var(--auf-dunkel-2); }
.balken { height: 14px; background: rgba(255, 255, 255, 0.12); border-radius: 8px 2px 8px 2px; overflow: hidden; }
.balken i { display: block; height: 100%; width: 100%; background: var(--bluete); transform-origin: 0 50%; transform: scaleX(0); transition: transform 600ms var(--ease-out); border-radius: inherit; }
.fortschritt .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.checkliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.phase { background: var(--weiss); color: var(--text); padding: clamp(24px, 2.4vw, 36px); border-radius: 10px; }
.phase:first-child { border-top-left-radius: var(--blatt-l); }
.phase:last-child { border-bottom-right-radius: var(--blatt-l); }
.phase h3, .phase .punkt-titel { margin-bottom: 4px; }
.phase .wann { margin-bottom: 18px; }
.phase ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.phase .punkt-zeile label { font-size: var(--fs-body); padding: 7px 0; }

/* ---------- Häufige Fragen: Karteikarten ---------- */
.fragen-liste { max-width: 980px; margin: 0 auto; }
.frage { position: relative; margin-top: -18px; }
.frage:first-child { margin-top: 0; }
.frage summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 44px; gap: 20px; align-items: center;
  padding: 26px clamp(22px, 3vw, 40px) 38px; font-family: var(--display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.3; color: var(--myrte);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { font: inherit; color: inherit; }
.frage { border-radius: 26px 8px 26px 8px; }
.frage:nth-child(3n+1) { background: var(--weiss); }
.frage:nth-child(3n+2) { background: var(--leinen-2); }
.frage:nth-child(3n) { background: #DCE6D7; }
.frage .plus { width: 44px; height: 44px; border-radius: 16px 4px 16px 4px; background: var(--myrte); position: relative; transition: transform 300ms var(--ease-out), background-color var(--t-hover) ease; }
.frage .plus::before, .frage .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; background: var(--leinen); transform: translate(-50%, -50%); border-radius: 2px; }
.frage .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 300ms var(--ease-out); }
.frage[open] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.frage summary:hover .plus { background: var(--myrte-tief); transform: rotate(-8deg); }
.frage .antwort { padding: 0 clamp(22px, 3vw, 40px) 44px; max-width: 70ch; font-size: var(--fs-body); }
.frage .antwort p + p { margin-top: 0.8em; }
.frage .antwort a { color: var(--myrte); font-weight: 700; text-decoration-color: var(--blatt); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Über: Beeren-Tafel ---------- */
.ueber { margin-top: var(--abschnitt); }
.ueber-tafel {
  margin: 0 clamp(10px, 1.4vw, 20px);
  background: var(--beere); color: var(--auf-dunkel);
  border-radius: var(--blatt-xl) 12px var(--blatt-xl) 12px;
  overflow: hidden; position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 64px) 0;
  min-height: 92svh;
}
.ueber-tafel { grid-template-rows: auto 1fr; }
.ueber-tafel h2 { color: var(--auf-dunkel); grid-column: 1 / span 6; grid-row: 1; }
.ueber-bild { grid-column: 1 / span 6; grid-row: 2; align-self: end; padding-top: 40px; }
.ueber-bild .foto { width: 86%; aspect-ratio: 4 / 5; margin-bottom: -12%; border-radius: 50% 50% 12px 12px / 38% 38% 12px 12px; }
.ueber-rechts { grid-column: 8 / span 5; grid-row: 1 / span 2; display: grid; gap: 44px; align-content: start; padding-bottom: clamp(48px, 5vw, 80px); }
.ueber-rechts h3, .ueber-rechts .punkt-titel { color: var(--auf-dunkel); margin-bottom: 8px; }
.ueber-rechts p { color: #E3DCE8; font-size: var(--fs-body); }
.ueber-rechts p + p { margin-top: 0.8em; }
.ueber-rechts a { color: var(--weiss); text-decoration-color: var(--bluete); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Fuß ---------- */
.fuss { margin-top: var(--abschnitt); background: var(--myrte-tief); color: var(--auf-dunkel); padding: clamp(56px, 6vw, 96px) 0 32px; }
.fuss-marke { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); }
.fuss-marke svg { width: clamp(88px, 13vw, 200px); height: auto; flex: none; }
.fuss-marke .wort { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 12.4vw, 200px); line-height: 0.8; letter-spacing: -0.055em; color: var(--auf-dunkel); }
.fuss-marke .wort span { color: var(--blatt); font-weight: 600; }
.fuss-raster { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 36px; }
.fuss-raster h2, .fuss-raster .fuss-titel { font-size: var(--fs-small); color: var(--blatt); margin-bottom: 12px; font-weight: 600; }
.fuss-raster ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.fuss-raster a { color: var(--auf-dunkel); font-size: var(--fs-small); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color var(--t-hover) ease; }
.fuss-raster a:hover { text-decoration-color: var(--blatt); }
.fuss-raster .sp1 { grid-column: 1 / span 3; }
.fuss-raster .sp2 { grid-column: 4 / span 3; }
.fuss-raster .sp3 { grid-column: 7 / span 6; }
.fuss-raster .sp3 p:not(.fuss-titel) { font-size: var(--fs-small); color: var(--auf-dunkel-2); max-width: 52ch; }
.fuss-unten { margin-top: clamp(40px, 4vw, 64px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; font-size: var(--fs-small); color: var(--auf-dunkel-2); }
.bildnachweis { font-size: var(--fs-small); color: var(--auf-dunkel-2); margin-top: 28px; max-width: 110ch; }
.bildnachweis a { color: var(--auf-dunkel-2); }

/* ---------- Unterseiten ---------- */
.seiten-hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; }
.seiten-hero .wrap { min-height: min(calc(88svh - 80px), 780px); }
.seiten-hero h1 { font-size: var(--fs-display-s); }
.seiten-hero .hero-text { grid-column: 1 / span 7; padding: clamp(32px, 4vw, 72px) 0 clamp(32px, 4vw, 56px); }
.seiten-hero .hero-bild { grid-column: 8 / span 5; height: min(64svh, 620px); min-height: 420px; }
.brotkrumen { font-size: var(--fs-small); color: var(--text-2); margin-bottom: 18px; }
.brotkrumen ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.brotkrumen li + li::before { content: "/"; margin-right: 10px; color: var(--blatt-dunkel); }
.brotkrumen a { color: var(--text-2); }

/* Kennzahlen (Rede: Länge) */
.zahlen-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: clamp(36px, 4vw, 56px); }
.zahlen-reihe .kachel { min-height: 260px; }
.zahlen-reihe .kachel:nth-child(1) { background: var(--myrte); color: var(--auf-dunkel); border-radius: var(--blatt-l) 10px 10px 10px; }
.zahlen-reihe .kachel:nth-child(1) .zahl { color: var(--auf-dunkel); }
.zahlen-reihe .kachel:nth-child(2) { background: var(--blatt); color: var(--myrte-tief); margin-top: 48px; }
.zahlen-reihe .kachel:nth-child(3) { background: var(--weiss); margin-top: 96px; border-radius: 10px 10px var(--blatt-l) 10px; }
.zahlen-reihe .kachel .zahl { font-size: var(--fs-h2); color: var(--myrte); line-height: 1; }

.zwei-spalten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.zwei-spalten > .links { grid-column: 1 / span 5; }
.zwei-spalten > .rechts { grid-column: 7 / span 6; }
.zwei-spalten > .links.klebt { position: sticky; top: 112px; }

/* Leitlinie (Rede: Aufbau) */
.schritte { padding: 0 0 0 clamp(44px, 5vw, 72px); position: relative; }
.schritte ol { list-style: none; padding: 0; display: grid; gap: clamp(40px, 5vw, 64px); counter-reset: schritt; }
.schritte::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 4px; background: var(--leinen-2); border-radius: 4px; }
.schritte .linie-fuell { position: absolute; left: 13px; top: 8px; width: 4px; height: 0; background: var(--myrte); border-radius: 4px; }
.schritte li { position: relative; counter-increment: schritt; }
.schritte li::before {
  content: counter(schritt); position: absolute; left: calc(-1 * clamp(44px, 5vw, 72px)); top: -4px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--myrte);
  background: var(--leinen); border: 3px solid var(--blatt); border-radius: 12px 3px 12px 3px;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.schritte li.erreicht::before { background: var(--myrte); color: var(--leinen); border-color: var(--myrte); }
.schritte h3, .schritte .punkt-titel { margin-bottom: 8px; }
.schritte .beispiel { margin-top: 12px; padding: 16px 20px; background: var(--weiss); border-radius: 20px 6px 20px 6px; font-style: italic; color: var(--text-2); font-size: var(--fs-body); }

/* Einstiege: Zitatwand */
.einstiege { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.einstieg { padding: clamp(22px, 2.4vw, 34px); border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 220px; }
.einstieg blockquote { font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.32; letter-spacing: -0.01em; }
.einstieg .typ { font-size: var(--fs-small); }
.einstieg:nth-child(1) { grid-column: 1 / span 7; background: var(--myrte); color: var(--auf-dunkel); border-top-left-radius: var(--blatt-l); }
.einstieg:nth-child(2) { grid-column: 8 / span 5; background: var(--blatt); color: var(--myrte-tief); }
.einstieg:nth-child(3) { grid-column: 1 / span 4; background: var(--weiss); }
.einstieg:nth-child(4) { grid-column: 5 / span 4; background: var(--leinen-2); }
.einstieg:nth-child(5) { grid-column: 9 / span 4; background: var(--beere); color: var(--auf-dunkel); }
.einstieg:nth-child(6) { grid-column: 1 / span 12; background: var(--weiss); border-bottom-right-radius: var(--blatt-l); }
.einstieg:nth-child(1) .typ, .einstieg:nth-child(5) .typ { color: var(--auf-dunkel-2); }

/* Beispielrede: Manuskript */
.rede-blatt { background: var(--weiss); border-radius: var(--blatt-l) 10px var(--blatt-l) 10px; padding: clamp(28px, 4vw, 64px); }
.rede-blatt .rede-text { font-size: var(--fs-body); line-height: 1.7; max-width: 62ch; }
.rede-blatt .rede-text p + p { margin-top: 1em; }
.platzhalter { background: #F6EBC0; color: var(--myrte-tief); padding: 0 0.12em; border-radius: 6px 2px 6px 2px; font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rede-werkzeug { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.rede-werkzeug .status { font-size: var(--fs-small); color: var(--text-2); min-height: 1.5em; }

/* Listen mit Häkchen */
.haken-liste { list-style: none; padding: 0; display: grid; gap: 22px; }
.haken-liste li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.haken-liste .haken { width: 24px; height: 24px; color: var(--blatt-dunkel); margin-top: 3px; }
.haken-liste h3, .haken-liste .punkt-titel { font-size: var(--fs-h3); margin-bottom: 4px; }
.haken-liste p:not(.punkt-titel) { font-size: var(--fs-body); }
.kreuz-liste .haken { color: var(--beere); }

/* Ideen: Raster mit Blattmarken */
.ideen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px clamp(32px, 4vw, 64px); list-style: none; padding: 0; }
.ideen li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.ideen .marke-klein { width: 18px; height: 18px; margin-top: 6px; border-radius: 9px 2px 9px 2px; background: var(--blatt); }
.ideen li:nth-child(3n+2) .marke-klein { background: var(--myrte); }
.ideen li:nth-child(3n) .marke-klein { background: var(--bluete); }
.ideen h3, .ideen .punkt-titel { font-size: var(--fs-h3); margin-bottom: 4px; }
.ideen p:not(.punkt-titel) { font-size: var(--fs-body); }

/* Rechner */
.rechner { background: var(--myrte); color: var(--auf-dunkel); border-radius: var(--blatt-l) 10px var(--blatt-l) 10px; padding: clamp(28px, 3.4vw, 52px); display: grid; gap: 24px; }
.rechner h3, .rechner .punkt-titel { color: var(--auf-dunkel); font-size: var(--fs-statement); }
.rechner .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rechner label { display: grid; gap: 8px; font-size: var(--fs-body); color: var(--auf-dunkel-2); }
.rechner input, .rechner textarea {
  font: inherit; font-size: var(--fs-h3); color: var(--myrte-tief); background: var(--leinen);
  border: 2px solid transparent; border-radius: 16px 4px 16px 4px; padding: 14px 16px; width: 100%;
  transition: border-color var(--t-hover) ease;
}
.rechner textarea { font-size: var(--fs-body); line-height: 1.5; min-height: 132px; resize: vertical; }
.rechner input:focus, .rechner textarea:focus { outline: none; border-color: var(--bluete); }
.rechner .ergebnis { font-family: var(--display); font-weight: 600; font-size: var(--fs-statement); line-height: 1.3; color: var(--auf-dunkel); }
.rechner .ergebnis b { color: var(--bluete); font-weight: 700; }
.rechner .status { font-size: var(--fs-small); color: var(--auf-dunkel-2); min-height: 1.5em; }

/* Hinweis in eigener Sache */
.eigen {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 3vw, 40px); align-items: center;
  background: var(--weiss); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--blatt-l) 10px var(--blatt-l) 10px;
}
.eigen .foto { height: 200px; border-radius: 48px 8px 48px 8px; }
.eigen h3, .eigen .punkt-titel { margin-bottom: 8px; }
.eigen p:not(.punkt-titel) { font-size: var(--fs-body); }
.eigen p:not(.punkt-titel) + p { margin-top: 0.6em; }
.eigen-liste { display: grid; gap: 12px; }

/* Gespiegelte Zweispalter, Bilder in Spalten */
.zwei-spalten.gespiegelt > .links { grid-column: 8 / span 5; grid-row: 1; }
.zwei-spalten.gespiegelt > .rechts { grid-column: 1 / span 6; grid-row: 1; }
.aufbau-bild, .seiten-bild { margin-top: clamp(28px, 3vw, 44px); height: min(50svh, 500px); }
.haken-liste.zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(32px, 4vw, 64px); }
.ideen.einspaltig { grid-template-columns: 1fr; gap: 28px; }
.ideen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schluss-satz { margin-top: clamp(40px, 4vw, 56px); max-width: 64ch; }

/* Farbfelder (Vortrag, Dank) */
.feld { margin-top: var(--abschnitt); background: var(--myrte); color: var(--auf-dunkel); padding: clamp(88px, 9vw, 150px) 0; }
.feld.beere { background: var(--beere); }
.feld h2, .feld h3, .feld .punkt-titel { color: var(--auf-dunkel); }
.feld .lead { color: var(--auf-dunkel-2); margin-top: 18px; }
.feld-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.feld-kopf { grid-column: 1 / span 4; position: sticky; top: 112px; }
.feld-kopf .foto { margin-top: clamp(28px, 3vw, 44px); aspect-ratio: 5 / 4; }
.feld-raster > .ideen, .feld-inhalt { grid-column: 6 / span 7; }
.feld .ideen p:not(.punkt-titel), .feld-schluss { color: var(--auf-dunkel-2); }
.feld .ideen .marke-klein { background: var(--blatt); }
.feld .ideen li:nth-child(3n+2) .marke-klein { background: var(--bluete); }
.feld .ideen li:nth-child(3n) .marke-klein { background: var(--leinen); }
.feld-schluss { margin-top: 44px; max-width: 60ch; }
.feld.beere .lead, .feld.beere .ideen p:not(.punkt-titel), .feld.beere .feld-schluss { color: #E3DCE8; }

/* Geschenk: Spanne, Rechner, Ideen, Braut und Bräutigam */
.spanne { margin-top: clamp(56px, 6vw, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.spanne-zahl { grid-column: 1 / span 5; min-height: min(56svh, 520px); background: var(--blatt); color: var(--myrte-tief); border-radius: var(--blatt-xl) 10px var(--blatt-xl) 10px; }
.spanne-zahl .zahl { font-size: var(--fs-display-s); color: var(--myrte-tief); }
.spanne-text { grid-column: 7 / span 6; }
.spanne-text h3, .spanne-text .punkt-titel { margin: 1.4em 0 0.5em; }
.rechner-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.rechner-kopf { grid-column: 1 / span 5; }
.rechner-kopf .foto { margin-top: clamp(28px, 3vw, 44px); aspect-ratio: 4 / 5; max-height: 560px; }
.rechner-raster > .rechner { grid-column: 7 / span 6; }
html:not(.js) .rechner { display: none; }
.rechner-ohne-js { grid-column: 7 / span 6; }
.rechner .knopf { justify-self: start; }
.rechner .tipp { font-size: var(--fs-small); color: var(--auf-dunkel-2); margin-top: -10px; }
.ideen-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.ideen-bild { grid-column: 1 / span 4; position: sticky; top: 112px; }
.ideen-bild .foto { aspect-ratio: 2 / 3; max-height: calc(100svh - 160px); }
.ideen-raster > .ideen { grid-column: 6 / span 7; }
.paar-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 96px); align-items: start; }
.paar { display: grid; gap: clamp(24px, 2.6vw, 36px); }
.paar:nth-child(2) { margin-top: clamp(64px, 10vw, 160px); }
.paar .foto { aspect-ratio: 4 / 3; }
.paar .lead { margin-top: 16px; }

/* Textseiten (Impressum, Datenschutz) */
.textseite { padding: clamp(40px, 6vw, 96px) 0 0; }
.textseite .wrap > * { max-width: 760px; }
.textseite h1 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.04em; margin-bottom: 32px; }
.textseite h2 { font-size: var(--fs-h3); margin: 44px 0 12px; letter-spacing: -0.02em; }
.textseite p, .textseite li { font-size: var(--fs-body); }
.textseite p + p { margin-top: 0.9em; }
.textseite ul { padding-left: 1.2em; display: grid; gap: 6px; margin-top: 0.6em; }
.textseite a { color: var(--myrte); font-weight: 700; text-decoration-color: var(--blatt); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Einblenden ---------- */
.js [data-rise] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--t-reveal) var(--ease-expo), transform var(--t-reveal) var(--ease-expo); }
.js [data-rise].da { opacity: 1; transform: none; }
.js [data-mask] { clip-path: inset(0 0 100% 0 round 0); transition: clip-path 1300ms var(--ease-ruhig); }
.js [data-mask].da { clip-path: inset(0 0 0 0 round 0); }
.js .hero h1 .zeile { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.js .hero h1 .zeile > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1100ms var(--ease-expo); }
.js .hero.da h1 .zeile > span { transform: none; }
.js .hero.da h1 .zeile:nth-child(2) > span { transition-delay: 90ms; }
.js .hero-karte { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 900ms var(--ease-expo) 600ms, transform 900ms var(--ease-expo) 600ms; }
.js .hero.da .hero-karte { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise], .js [data-mask], .js .hero h1 .zeile > span, .js .hero-karte { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .hero-bild .dia, .brauch-bild, .brauch h3::before, .brauch .punkt-titel::before { transition: none; }
  body.menu-offen .kopf nav { animation: none; }
  .nach-oben-knopf { transition: none; transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hero .wrap { min-height: 0; }
  .hero-text { grid-column: 1 / span 7; }
  .hero-bild { grid-column: 8 / span 5; height: 620px; }
  .hero-karte { left: -40px; width: min(320px, 92%); }
  .vorher-bild { grid-column: 1 / span 5; margin-left: calc(-1 * var(--rand)); }
  .vorher-inhalt { grid-column: 6 / span 7; }
  .punkte { grid-template-columns: 1fr; gap: 28px; }
  .kosten-raster { gap: 32px 40px; }
  .checkliste { grid-template-columns: 1fr 1fr; }
  .phase:last-child { grid-column: 1 / -1; }
  .ueber-rechts { grid-column: 7 / span 6; }
  .feld-raster > .ideen, .ideen-raster > .ideen { grid-template-columns: 1fr; }
  .ideen.drei { grid-template-columns: 1fr 1fr; }
}

/* ---------- Handy-Menü bis 1024 px (auch großes Handy quer und iPad hoch) ---------- */
@media (max-width: 1024px) {
  .menu-knopf { display: inline-flex; }
  .kopf nav {
    position: fixed; inset: 80px 0 0 0; background: var(--leinen);
    padding: 12px var(--rand) 28px; display: none;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-offen { overflow: hidden; }
  .menu-offen .kopf nav { display: block; animation: menu-auf 280ms var(--ease-out); }
  @keyframes menu-auf { from { opacity: 0; transform: translateY(-10px); } }
  .kopf nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .kopf nav li a { display: block; padding: 14px 0; font-size: var(--fs-h3); font-family: var(--display); font-weight: 600; color: var(--myrte); }
  .kopf nav li a::after { display: none; }
  .kopf nav li:last-child { margin-top: 14px; }
  .kopf nav .knopf { display: flex; padding: 16px 20px; color: var(--weiss); }
}

/* ---------- Handy und kleine Tablets ---------- */
@media (max-width: 820px) {
  :root { --abschnitt: 104px; --fs-display: clamp(40px, 11vw, 56px); }
  .kopf .wrap { height: 68px; }
  html { scroll-padding-top: 80px; }
  .marke { font-size: 21px; }
  .marke svg { width: 30px; height: 30px; }
  .kopf nav { inset: 68px 0 0 0; }
  .nach-oben-knopf { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }

  .hero .wrap, .seiten-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-bottom: 40px; }
  .hero-bild, .seiten-hero .hero-bild { grid-column: 1; grid-row: 2; height: auto; min-height: 0; margin-top: 36px; }
  .hero-bild .foto { position: relative; inset: auto; height: 62svh; min-height: 360px; }
  .hero-text, .seiten-hero .hero-text { grid-column: 1; padding: 28px 0 0; }
  .hero-karte { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -96px 14px 0; padding: 18px 20px 16px; }
  .hero-karte ul { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .hero-karte .punkt-zeile label { font-size: var(--fs-small); }
  .hero-karte a.mehr { display: none; }
  .hero h1 { font-size: var(--fs-display); }
  .seiten-hero h1 { font-size: clamp(34px, 9.4vw, 48px); }

  .rolle-zeile h3, .rolle-zeile p, .rolle-zeile .punkt-titel { grid-column: 1 / -1; }

  .vorher .wrap { grid-template-columns: 1fr; }
  .vorher-bild { grid-column: 1; position: relative; top: 0; margin-left: calc(-1 * var(--rand)); width: 86vw; height: 56svh; margin-bottom: 40px; }
  .vorher-inhalt { grid-column: 1; }
  .punkte { grid-template-columns: 1fr; }

  .tag-raster { grid-template-columns: 1fr; }
  .tag-kopf { grid-column: 1; padding-bottom: 8px; }
  .tag-stufen { grid-template-columns: 1fr; gap: 36px; }
  .stufe:nth-of-type(1) .foto { height: 40vw; }
  .stufe:nth-of-type(2) .foto { height: 52vw; }
  .stufe:nth-of-type(3) .foto { height: 64vw; }
  .stufe:nth-of-type(4) .foto { height: 76vw; }
  .stufe-text { padding: 18px 0 0; }
  .kinder-tipp { grid-template-columns: 1fr; padding: 20px; }
  .kinder-tipp .foto { height: 200px; }

  .band .wrap { grid-template-columns: 1fr; }
  .band-motiv { grid-column: 1; width: 70%; margin: 0 auto 40px; }
  .band-inhalt { grid-column: 1; }

  .recht-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .recht-kopf { grid-column: 1 / -1; grid-row: auto; order: -1; padding: 0 0 20px; }
  .kachel.a { grid-column: 1 / -1; grid-row: auto; min-height: 56vw; }
  .kachel.b { grid-column: 1; grid-row: auto; margin-top: 0; min-height: 52vw; }
  .kachel.c { grid-column: 2; grid-row: auto; margin-top: 32px; min-height: 52vw; }
  .tabelle-huelle { overflow: visible; padding: 22px 20px; }
  table.recht { min-width: 0; display: block; }
  table.recht caption { display: block; }
  table.recht thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.recht tbody, table.recht tr, table.recht th, table.recht td { display: block; width: auto; }
  table.recht tr { padding: 18px 0 14px; }
  table.recht tr + tr { margin-top: 6px; }
  table.recht th, table.recht td { border: 0; padding: 0; }
  table.recht tbody th { font-size: var(--fs-h3); margin-bottom: 8px; width: auto; }
  table.recht td { display: grid; grid-template-columns: 7.2em 1fr; gap: 12px; padding: 4px 0; }
  table.recht td::before { content: attr(data-label); font-family: var(--display); font-weight: 600; color: var(--text-2); font-size: var(--fs-small); padding-top: 2px; }
  table.recht td .beleg { grid-column: 1 / -1; margin-top: 8px; }
  .kachel p { font-size: var(--fs-small); }

  .kosten-raster { grid-template-columns: 1fr; gap: 28px; }
  .kosten-zeile { grid-template-columns: 48px 1fr; gap: 16px; }
  .kosten-zeile .mark { width: 48px; height: 48px; }
  .kosten-zeile .oben { flex-direction: column; gap: 2px; }

  .brauch-raster { grid-template-columns: 1fr; }
  .brauch-bilder { display: none; }
  .brauch-liste { grid-column: 1; display: grid; gap: 56px; }
  .brauch, .brauch:first-child { min-height: 0; padding: 0; gap: 14px; }
  .brauch h3, .brauch .punkt-titel { font-size: var(--fs-h2); }
  .brauch h3::before, .brauch .punkt-titel::before { transform: scale(1); }
  .brauch-handy { display: block; height: 62vw; margin-bottom: 6px; }

  .checkliste-kopf { grid-template-columns: 1fr; row-gap: 32px; }
  .checkliste-kopf > div:first-child, .fortschritt { grid-column: 1; }
  .checkliste { grid-template-columns: 1fr; }
  .phase:last-child { grid-column: auto; }

  .frage summary { grid-template-columns: 1fr 40px; padding: 22px 20px 34px; }
  .frage .plus { width: 40px; height: 40px; }
  .frage .antwort { padding: 0 20px 36px; font-size: var(--fs-body); }

  .ueber-tafel { grid-template-columns: 1fr; min-height: 0; margin: 0 10px; padding: 36px 22px 0; }
  .ueber-tafel { grid-template-rows: none; }
  .ueber-tafel h2, .ueber-bild, .ueber-rechts { grid-column: 1; grid-row: auto; }
  .ueber-rechts { padding: 28px 0 32px; gap: 32px; }
  .ueber-bild { padding-top: 0; }
  .ueber-bild .foto { width: 86%; margin: 0 auto; }

  .fuss-marke svg { width: clamp(52px, 15vw, 88px); }
  .fuss-marke .wort { font-size: clamp(36px, 11.4vw, 64px); }

  .fuss-raster .sp1, .fuss-raster .sp2 { grid-column: span 6; }
  .fuss-raster .sp3 { grid-column: 1 / -1; }

  .zahlen-reihe { grid-template-columns: 1fr 1fr; }
  .zahlen-reihe .kachel:nth-child(1) { grid-column: 1 / -1; }
  .zahlen-reihe .kachel:nth-child(2), .zahlen-reihe .kachel:nth-child(3) { margin-top: 0; min-height: 200px; }
  .zahlen-reihe .kachel:nth-child(3) { margin-top: 28px; }
  .zwei-spalten { grid-template-columns: 1fr; row-gap: 40px; }
  .zwei-spalten > .links, .zwei-spalten > .rechts { grid-column: 1; }
  .zwei-spalten > .links.klebt { position: static; }
  .einstiege { grid-template-columns: 1fr; }
  .einstieg:nth-child(n) { grid-column: 1; min-height: 0; }
  .ideen { grid-template-columns: 1fr; gap: 26px; }
  .rechner .felder { grid-template-columns: 1fr; }
  .eigen { grid-template-columns: 1fr; }
  .eigen .foto { height: 220px; }
  .zwei-spalten.gespiegelt > .links, .zwei-spalten.gespiegelt > .rechts { grid-column: 1; grid-row: auto; }
  .aufbau-bild, .seiten-bild { height: 56vw; }
  .haken-liste.zweispaltig, .ideen.drei { grid-template-columns: 1fr; }
  .feld-raster, .spanne, .rechner-raster, .ideen-raster, .paar-spalten { grid-template-columns: 1fr; row-gap: 40px; }
  .feld-kopf, .feld-raster > .ideen, .feld-inhalt, .spanne-zahl, .spanne-text, .rechner-kopf, .rechner-raster > .rechner, .rechner-ohne-js, .ideen-bild, .ideen-raster > .ideen { grid-column: 1; }
  .feld-kopf, .ideen-bild { position: static; }
  .ideen-bild .foto, .rechner-kopf .foto { aspect-ratio: 4 / 3; max-height: none; }
  .spanne-zahl { min-height: 64vw; }
  .paar:nth-child(2) { margin-top: 0; }
}

/* Schmale Handys: Die Einträge der Hero-Checkliste sind nicht trennbar, zwei Spalten passen erst ab rund 445 px */
@media (max-width: 480px) {
  .hero-karte ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Druck: nur die Checkliste ---------- */
@media print {
  @page { margin: 16mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body > *:not(main), main > *:not(#checkliste) { display: none !important; }
  .checkliste-teil { background: #fff !important; color: #000 !important; padding: 0 !important; margin: 0 !important; }
  .checkliste-teil h2 { color: #000 !important; font-size: 22pt; }
  .checkliste-kopf .lead, .fortschritt .knoepfe, .balken { display: none !important; }
  .fortschritt .zahlen b, .fortschritt .zahlen span { color: #000 !important; font-size: 12pt !important; }
  .checkliste { grid-template-columns: 1fr 1fr 1fr; gap: 8mm; }
  .phase { padding: 0 !important; break-inside: avoid; }
  .phase h3, .phase .punkt-titel { color: #000; font-size: 13pt; }
  .punkt-zeile label { font-size: 10pt !important; padding: 2pt 0 !important; }
  .kaestchen { border-color: #000 !important; width: 12pt; height: 12pt; }
  .punkt-zeile input:checked + label .kaestchen { background: #000 !important; }
  .js [data-rise] { opacity: 1 !important; transform: none !important; }
}