/* ============================================================================
   Hochzeitsseite — Layout und Design
   Grundlage: outputs/hochzeit/design-system.md

   HARTE REGEL (DECISION D3 aus venture/log/2026-09-04-B7-brief.md):
   Text steht NIE direkt auf einer Farbfläche. Aller Text ist Tinte (#1A1A1A)
   und sitzt auf Creme oder auf einer hellen Creme-Wischfläche. Grün und Orange
   erscheinen ausschließlich als Dekor dahinter oder daneben.
   Wer das ändert, bricht die Lesbarkeit im Sonnenlicht.
   ========================================================================== */

:root {
  /* Palette — design-system.md §3 */
  --papier:       #F7F2E8;
  --tinte:        #1A1A1A;
  --gruen-tief:   #243D33;
  --gruen:        #2C5344;
  --gruen-mittel: #4A7C64;
  --salbei:       #A8C4B4;
  --orange:       #E8822A;
  --orange-hell:  #F0A458;
  --orange-blass: #F8D9B8;

  /* Sektionsfarbe — wird pro Seite überschrieben */
  --sektion:       var(--gruen);
  --sektion-hell:  var(--gruen-mittel);
  --sektion-blass: var(--salbei);

  --schrift-hand:  "Caveat", "Segoe Script", cursive;
  --schrift-info:  "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --breite: 480px;   /* Inhalt zentriert; entwickelt für 375 px */
}

/* Schriften — lokal, keine Laufzeitverbindung zu Google. Lizenz: fonts/OFL.txt */
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/sourcesans3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/sourcesans3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sektionsfarbe pro Seite — design-system.md §2:
   „ein Farbfeld pro Seite", Speisen grün, Getränke orange. */
body[data-seite="essen"] {
  --sektion:       var(--gruen);
  --sektion-hell:  var(--gruen-mittel);
  --sektion-blass: var(--salbei);
}
body[data-seite="getraenke"] {
  --sektion:       var(--orange);
  --sektion-hell:  var(--orange-hell);
  --sektion-blass: var(--orange-blass);
}

/* --------------------------------------------------------------------------
   Grundgerüst
   ----------------------------------------------------------------------- */

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

/* Die Aquarellkleckse ragen absichtlich über den Seitenrand hinaus. Ohne
   diese beiden Zeilen entsteht daraus waagerechter Scrollraum.
   ACHTUNG, häufige Falle: `overflow-x: hidden` NUR am body genügt nicht —
   der Wert wird an den Viewport durchgereicht und der body klippt dann
   selbst nicht mehr. Gemessen am 2026-09-04: 130 px Überstand trotz
   hidden am body. Deshalb hier beides. */
html {
  color-scheme: light;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-info);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;   /* clip statt hidden: klippt wirklich, ohne Scrollbox */
  position: relative;
}

/* Papierkorn — design-system.md §1, Merkmal 3: das Papier bleibt sichtbar.
   feTurbulence als Data-URI, damit keine Bilddatei nötig ist. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .12;   /* zurückgenommen: die Aquarelle bringen ihr eigenes Korn mit */
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.seite {
  position: relative;
  z-index: 2;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 22px 56px;
}

/* --------------------------------------------------------------------------
   Aquarell-Dekor
   design-system.md §2: Farbe an die Ränder, Mitte bleibt ruhig.
   Auf 375 px übersetzt als schmales Band oben und unten.

   SPÄTERER AUSTAUSCH GEGEN ECHTE GRAFIKEN:
   Jede .wisch-Regel unten hat genau eine background-Zeile. Diese durch
   background: url("img/band-oben.png") no-repeat center/cover;
   ersetzen und filter/opacity entfernen. Sonst ändert sich nichts.
   ----------------------------------------------------------------------- */

/* WICHTIG: absolut zum Dokument, NICHT fixed zum Viewport.
   Fixed lässt die Farbflächen beim Scrollen mitten in die Textliste wandern —
   dann steht Text auf Farbe und die Regel oben ist gebrochen. Absolut
   verankert sitzen sie am Anfang und am Ende der Seite und bleiben dort.

   Die Kleckse laufen bewusst über den Rand hinaus („Rahmen als Fragment",
   design-system.md §2). Deshalb negative left/right/top/bottom-Werte und
   overflow-x: hidden am body. */
.deko {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Startseite — beide Farbwelten diagonal getrennt: Grün oben links,
   Orange unten rechts. design-system.md §2, „diagonale Spannung". */
body[data-seite="start"] .deko--oben {
  top: -70px;
  left: -125px;
  width: 430px;
  height: 422px;
  opacity: .9;
  background-image: url("img/wisch-gruen-hell.webp");
}
body[data-seite="start"] .deko--unten {
  bottom: -95px;
  right: -115px;
  width: 400px;
  height: 427px;
  opacity: .85;
  background-image: url("img/wisch-orange-weich.webp");
}

/* Unterseiten — ein Farbfeld pro Seite (Essen grün, Getränke orange).
   ACHTUNG beim Verschieben: Auf 375 px läuft die Textspalte fast über die
   volle Breite. Der obere Klecks darf deshalb NICHT tiefer reichen als der
   Beginn der ersten Kategorie (~170 px), sonst steht Listentext auf Farbe.
   Bottom-Kante = top + height. Nach jeder Änderung im gescrollten Zustand
   nachprüfen, nicht nur am Seitenanfang. */
body[data-seite="essen"] .deko--oben {
  top: -150px;
  right: -100px;
  width: 320px;
  height: 314px;          /* Unterkante bei 164 px — knapp über der Liste */
  opacity: .9;
  background-image: url("img/wisch-gruen-hell.webp");
}
body[data-seite="essen"] .deko--unten {
  bottom: 0;
  left: -150px;
  width: 300px;
  height: 339px;
  opacity: .5;            /* das dunkle Grün trägt sonst zu laut auf */
  background-image: url("img/wisch-gruen-dunkel.webp");
}

body[data-seite="getraenke"] .deko--oben {
  top: -190px;
  left: -95px;
  width: 290px;
  height: 351px;          /* Unterkante bei 161 px */
  opacity: .9;
  background-image: url("img/wisch-orange-kraeftig.webp");
}
body[data-seite="getraenke"] .deko--unten {
  bottom: 0;
  right: -130px;
  width: 320px;
  height: 341px;
  opacity: .85;
  background-image: url("img/wisch-orange-weich.webp");
}

/* Die unteren Kleckse sitzen vollständig im Dokument.
   Die Maske leistet zwei Dinge:
   - oben ausblenden, damit die Farbe erst unterhalb der letzten Positionen
     einsetzt und kein Listentext auf ihr steht (Regel D3);
   - unten auflösen, damit die Dokumentkante sie nicht als gerade Linie
     abschneidet — in einem Aquarelldesign sofort als Fehler sichtbar.

   AKZEPTIERTE ABWEICHUNG (Matthias, 2026-09-04): Auf der Essen-Seite liegt
   die letzte Dessert-Position minimal auf dem obersten, fast durchsichtigen
   Rand des Kleckses (~10 % Deckkraft, Kontrast weit über allen Grenzwerten).
   Das ist geprüft und bewusst so. Wer den Klecks weiter nach unten schiebt,
   um das zu "beheben", macht ihn unsichtbar — dann lieber ganz weglassen. */
body[data-seite="essen"] .deko--unten,
body[data-seite="getraenke"] .deko--unten {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.25) 26%, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.25) 26%, #000 62%, transparent 97%);
}

/* --------------------------------------------------------------------------
   Die Creme-Wischfläche: trägt allen Text und hält ihn von der Farbe fern.
   ----------------------------------------------------------------------- */

.wisch { position: relative; }

.wisch > * { position: relative; z-index: 1; }

/* Vorher waren das drei versetzte Farbkleckse in Creme mit knappem Rand.
   Ergebnis: der Text lief unten aus der Fläche heraus und die Namen standen
   oben halb in der Farbe — die Fläche selbst las sich dabei als kaputter
   weisser Fleck (Matthias, Review 2). Jetzt eine einzige Fläche, die den
   Inhalt grosszügig überdeckt, in der Mitte voll deckt und zu den Rändern
   hin weit auslaeuft. Wer den Rand knapper macht, holt den Fehler zurueck. */
.wisch::before {
  content: "";
  position: absolute;
  inset: -32px -26px;
  z-index: 0;
  filter: blur(18px);
  background: radial-gradient(94% 88% at 50% 50%,
    var(--papier) 0%,
    var(--papier) 48%,
    rgba(247, 242, 232, .90) 68%,
    rgba(247, 242, 232, .55) 84%,
    transparent 100%);
}

/* --------------------------------------------------------------------------
   Trennbogen unter den Seitentiteln.

   Vorher standen hier zwei versetzte, unterschiedlich lange Striche — der
   Versuch, den „offenen Rahmen" der Karten aufzugreifen. Auf einer Textseite
   ohne umgebenden Rahmen las sich das nicht als Stilzitat, sondern als
   Renderfehler (Matthias, Review 1). Ersetzt durch das andere Linienmotiv
   aus design-system.md §1: ein einzelner geschwungener Bogen, in der Mitte
   breit, an beiden Enden auslaufend — ein Pinselansatz, keine Linie.
   ----------------------------------------------------------------------- */

.bogen {
  display: block;
  width: 56%;
  height: auto;
  margin: 24px auto 18px;
}
.bogen path {
  fill: var(--tinte);
  opacity: .72;
}

/* --------------------------------------------------------------------------
   Startseite
   ----------------------------------------------------------------------- */

.start {
  padding-top: 68px;
  text-align: center;
}

/* Die Namen bleiben IMMER auf einer Zeile. Die Schriftgröße setzt
   render.js (Funktion `einzeilig`), weil die Namen aus content.js kommen
   und beliebig lang sein dürfen — ein fester Wert bricht bei längeren
   Namen um. Der Wert hier ist nur der Startwert vor dem Messen. */
.start__namen {
  font-family: var(--schrift-hand);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.06;
  margin: 0;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Datumszeile — vollständig in der Handschrift, dünne senkrechte Trenner. */
.start__datum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 12px 0 0;
}
.start__datumteil {
  font-family: var(--schrift-hand);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
}
.start__strich {
  width: 1px;
  height: 24px;
  background: var(--tinte);
  opacity: .5;
}

.start__willkommen {
  margin: 26px auto 0;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.62;
}
.start__willkommen:empty { display: none; }

/* Buttons */
.knoepfe {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;   /* mehr Luft, damit sich die weichen Ränder nicht berühren */
}

/* Der Wisch liegt ABSOLUT hinter dem Button, nicht als Flex-Element im
   Fluss. Als Flex-Element nahm er Layoutbreite weg: die Textspalte blieb
   141 px schmal und beide Unterzeilen brachen um (Review 1). Jetzt hält
   padding-left den Text von ihm frei, und er darf trotzdem groß sein. */
.knopf {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82px;
  padding: 14px 46px 14px 118px;
  text-decoration: none;
  color: var(--tinte);
  background: transparent;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.knopf:active { transform: translateY(1px); }

/* Die Cremefläche des Buttons hat weiche Ränder statt einer harten Kante.
   Vorher war das ein deckendes Rechteck mit overflow:hidden — auf der
   Startseite schnitt es sichtbar ein Loch in den orangen Klecks dahinter
   (Matthias, Review 2). Jetzt liegt darunter eine weichgezeichnete
   Papierfläche, die zum Hintergrund hin ausläuft. Der Text bleibt trotzdem
   auf Creme (Regel D3), weil die Fläche in der Mitte voll deckt. */
.knopf::before {
  content: "";
  position: absolute;
  inset: -5px -9px;
  z-index: 0;
  background: var(--papier);
  filter: blur(8px);
}

/* Handgezeichneter Rahmen statt eines geraden 1-px-Kastens.
   Der Pfad liegt in render.js (RAHMEN_SVG): vier Striche, die sich an den
   Ecken verfehlen, plus eine versetzte Zweitlinie links.
   preserveAspectRatio="none" streckt ihn auf die Buttongröße,
   vector-effect hält die Strichstärke dabei konstant. */
.knopf__rahmen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
/* stroke-width und stroke-opacity stehen ABSICHTLICH nicht hier, sondern
   als Attribut an jedem einzelnen Pfad in render.js — jede Linie ist
   unterschiedlich stark und dunkel. Eine CSS-Regel hier würde die
   Attribute überschreiben und alle Linien wieder gleich machen. */
.knopf__rahmen path {
  fill: none;
  stroke: var(--tinte);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Der Farbwisch sitzt LINKS neben dem Text, nie darunter.
   Ausschnitt aus demselben Aquarell wie das Seitendekor — eine erfundene
   CSS-Schliere daneben fällt sofort als Fremdkörper auf. */
/* Der Wisch nimmt gut ein Drittel der Buttonbreite ein und läuft nach
   rechts aus. Als schmaler Streifen wirkte er wie ein aufgeklebter
   Farbchip und ließ den Rest des Buttons leer aussehen. */
.knopf__wisch {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 152px;
  z-index: 1;
  opacity: .85;
  background-repeat: no-repeat;
  /* cover statt fester Prozentbreite: der Ausschnitt fuellt den Button
     vollstaendig aus. Sonst endet das Bild im Button und hinterlaesst eine
     gerade Kante mitten in der Flaeche (Review 1). */
  background-size: cover;
  /* Radiale Maske statt eines reinen Links-nach-rechts-Verlaufs: die Farbe
     läuft jetzt nach ALLEN Seiten aus, nicht nur nach rechts. Vorher stieß
     sie oben, unten und links hart an die Buttonkante (Review 2).
     Sie ist bei ~106 px verschwunden; der Text beginnt bei 118 px, es
     bleiben also 12 px sauberes Creme dazwischen (Regel D3). */
  -webkit-mask-image: radial-gradient(128% 140% at 8% 50%, #000 18%, rgba(0,0,0,.5) 46%, transparent 72%);
  mask-image: radial-gradient(128% 140% at 8% 50%, #000 18%, rgba(0,0,0,.5) 46%, transparent 72%);
}
.knopf--essen .knopf__wisch {
  background-image: url("img/wisch-gruen-hell.webp");
  background-position: 58% 42%;
}
.knopf--getraenke .knopf__wisch {
  background-image: url("img/wisch-orange-kraeftig.webp");
  background-position: 42% 56%;
}
/* Fotos trägt BEIDE Farbwelten: oben grün, unten orange, in der Mitte
   treffen sie sich. Damit wiederholt der Button die diagonale Spannung der
   Startseite und der Dreiklang Essen/Getränke/Fotos löst sich auf, statt
   zweimal orange zu sein (Matthias, Review 2).
   Die beiden Lagen sind je 64 % hoch und überlappen sich dadurch in der
   Mitte — dort mischen sich die Aquarelle über ihren Alphakanal. */
.knopf--fotos .knopf__wisch {
  background-image:
    url("img/wisch-gruen-hell.webp"),
    url("img/wisch-orange-weich.webp");
  background-position: 44% 0%, 38% 100%;
  background-size: 190% 64%, 190% 64%;
  opacity: .72;
}

.knopf__text { position: relative; z-index: 2; }
.knopf__titel {
  display: block;
  font-family: var(--schrift-hand);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
}
.knopf__unterzeile {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px;
}
.knopf__pfeil {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 18px;
  opacity: .6;
}

.platzhalter-hinweis {
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px dashed rgba(26,26,26,.55);
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--papier);
}

/* --------------------------------------------------------------------------
   Unterseiten (Essen / Getränke)
   ----------------------------------------------------------------------- */

/* Reichlich Luft unten: die Aquarellkleckse laufen dort aus. Ohne diesen
   Raum schneidet die Dokumentkante sie als gerade Linie ab. */
.karte {
  padding-top: 18px;
  padding-bottom: 110px;
}

.navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0 2px;
}
.navi a {
  color: var(--tinte);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 11px 2px;          /* Tap-Ziel ≥ 44 px hoch */
  border-bottom: 1px solid rgba(26,26,26,.45);
  -webkit-tap-highlight-color: transparent;
}

.karte__titel {
  font-family: var(--schrift-hand);
  font-weight: 700;
  font-size: clamp(42px, 12vw, 52px);
  line-height: 1.05;
  margin: 30px 0 0;
  text-align: center;
}

.kategorie { margin-top: 34px; }

.kategorie__titel {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.positionen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.position { padding: 11px 0; }
.position + .position { border-top: 1px solid rgba(26,26,26,.16); }

.position__name {
  font-size: 17px;
  line-height: 1.42;
}

.position__beschreibung {
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 2px;
}


/* Kennzeichnung sitzt AUF der Textzeile, nicht darüber.
   Vorher war das ein inline-flex-Kasten: dessen Baseline ist die Unterkante,
   nicht die Schriftlinie — das Symbol wirkte hochgestellt und schien
   wegzufliegen (Matthias, Review 1). Jetzt normales Inline-Verhalten und
   der Versatz in em, damit er mit der Schriftgröße mitwandert. */
.kennzeichen {
  display: inline;
  margin-left: 7px;
  white-space: nowrap;
}
.kennzeichen__wort {
  margin-left: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
}
/* Trennt zwei Symbole: „Ei / Möhre" heißt, es gibt beide Ausführungen. */
.kennzeichen__trenner {
  margin: 0 3px;
  font-size: .82em;
  opacity: .5;
}
.kennzeichen__glyph {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.32em;   /* Mitte des Symbols auf Mitte der Kleinbuchstaben */
}
.kennzeichen__glyph path,
.kennzeichen__glyph line,
.kennzeichen__glyph circle,
.kennzeichen__glyph ellipse {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marke-platzhalter {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border: 1px dashed rgba(26,26,26,.6);
  border-radius: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.legende {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid rgba(26,26,26,.16);
  font-size: 13px;
  line-height: 1.7;
}
.legende__zeile { display: flex; align-items: center; gap: 8px; }
.legende__hinweis {
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.55;
}
/* In der Legende steht das Symbol allein in einer Flex-Zeile — dort trägt
   der em-Versatz von oben nicht, also feste Größe und kein Versatz. */
.legende__zeile .kennzeichen__glyph {
  width: 19px;
  height: 19px;
  vertical-align: baseline;
}

.fussnote {
  margin-top: 26px;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
}

.zurueck-unten {
  margin-top: 38px;
  text-align: center;
}
.zurueck-unten a {
  color: var(--tinte);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 6px;
  display: inline-block;
  border-bottom: 1px solid rgba(26,26,26,.45);
}

/* --------------------------------------------------------------------------
   Fehlerfall: content.js ist kaputt oder fehlt
   ----------------------------------------------------------------------- */
.fehler {
  margin: 40px 0;
  padding: 16px;
  border: 1px solid var(--tinte);
  background: var(--papier);
  font-size: 15px;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}