/* ==========================================================================
   FUNDAMENT — die Technik unter jeder Hochzeitsseite.

   Hier steht bewusst KEINE Gestaltung: keine Schriftfamilie, keine Farbe
   ausser den Tokens der Farbwelt, keine Zier. Der Grund ist eine gelernte
   Lektion: solange Cormorant Garamond, Creme und Gold hier festgeschrieben
   standen, sahen alle Entwuerfe gleich aus — das Fundament hat sie dorthin
   gezogen. Gestaltung gehoert nach `designs/<name>/design.css`.

   Was hier steht, ist das, was auf JEDER Seite gleich sein muss:
   Grundeinstellungen, Raster, Barrierefreiheit, Bedienbarkeit, Druck.

   Ladereihenfolge (bindend):
       fundament.css → farbwelten/<welt>.css → designs/<design>/design.css
   ========================================================================== */

/* --- 1. Werte -------------------------------------------------------------
   Nur Masse, keine Anmutung. Die Schriftgroessen sind ein Rueckfall —
   jedes Design darf sie vollstaendig ueberschreiben.                          */

:root {
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4rem;
  --raum-9: 6rem;
  --raum-10: 8rem;

  --abschnitt-luft: clamp(3.5rem, 2rem + 7vw, 8rem);

  --breite-inhalt: 68rem;   /* aeussere Grenze */
  --breite-text: 38rem;     /* Lesespalte: etwa 70 Zeichen */
  --breite-schmal: 28rem;   /* Formulare, Karten */
  --rand: clamp(1.25rem, 5vw, 3rem);

  --kante: 2px;
  --uebergang: 180ms ease;

  /* Rueckfall-Groessen. Jedes Design setzt seine eigene Skala. */
  --text-xs:  clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --text-s:   clamp(0.90rem, 0.87rem + 0.14vw, 0.98rem);
  --text-m:   clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --text-l:   clamp(1.20rem, 1.12rem + 0.40vw, 1.50rem);
  --text-xl:  clamp(1.50rem, 1.34rem + 0.80vw, 2.13rem);
  --text-2xl: clamp(1.90rem, 1.58rem + 1.60vw, 3.00rem);
  --text-3xl: clamp(2.40rem, 1.76rem + 3.20vw, 4.25rem);
}

/* Breakpoints (zur Erinnerung, CSS kennt keine Variablen in Media-Queries):
   40rem Tablet hoch · 52rem Tablet quer · 64rem Laptop · 80rem gross         */

/* --- 2. Grundlage ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Wer Bewegung abgeschaltet hat, bekommt keine. Gilt fuer alles, auch fuer
   die Scroll-Effekte der Designs — die pruefen zusaetzlich in JavaScript.    */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: system-ui, sans-serif;   /* Das Design setzt die echte Schrift. */
  font-size: var(--text-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;                   /* randlose Bilder duerfen nicht schieben */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }

/* --- 3. Barrierefreiheit ---------------------------------------------------
   Nicht wegnehmen. Ohne das faellt die Seite in der Pruefung durch und ist
   mit der Tastatur nicht bedienbar.                                           */

:focus-visible {
  outline: 3px solid var(--akzent-dunkel, currentColor);
  outline-offset: 3px;
  border-radius: var(--kante);
}

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprunglink {
  position: absolute; left: var(--raum-4); top: -4rem;
  background: var(--tinte); color: var(--grund);
  padding: var(--raum-3) var(--raum-5); z-index: 100;
  transition: top var(--uebergang);
}
.sprunglink:focus { top: var(--raum-4); }

/* Honigtopf: ein Feld, das nur Formular-Roboter ausfuellen. Es muss fuer
   Menschen unsichtbar sein — auch fuer den Screenreader (aria-hidden im
   HTML). display:none waere verraeterisch, deshalb aus dem Bild geschoben. */
.honigtopf {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 4. Raster -------------------------------------------------------------
   Nur Struktur, keine Anmutung. Flaechen und Farben setzt das Design.        */

.huelle {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--schmal { max-width: calc(var(--breite-text) + 2 * var(--rand)); }
.huelle--weit   { max-width: 90rem; }

/* Randlos: bricht aus der Huelle aus, ueber die volle Fensterbreite.
   Traegt die grossen Bilder in „Abend" und „Tag".                            */
.randlos {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

.abschnitt { padding-block: var(--abschnitt-luft); }

.raster { display: grid; gap: var(--raum-6); }
@media (min-width: 52rem) {
  .raster--2 { grid-template-columns: 1fr 1fr; }
  .raster--seite { grid-template-columns: 1fr 1.4fr; align-items: start; }
}
.raster--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.mitte { text-align: center; }
.mitte p { margin-inline: auto; }

/* --- 5. Formulare: nur Bedienbarkeit ---------------------------------------
   Wie ein Feld AUSSIEHT, entscheidet das Design. Was hier steht, sichert die
   Bedienung: volle Breite, Fingergroesse, kein Zoom-Sprung auf dem iPhone
   (dafuer muessen es mindestens 16px sein).                                   */

.feld { margin-bottom: var(--raum-5); }
.feld > label { display: block; margin-bottom: var(--raum-2); }

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld input[type="number"], .feld select, .feld textarea {
  width: 100%;
  min-height: 2.75rem;          /* 44 px Trefferflaeche */
  font-size: max(1rem, var(--text-m));
  padding: var(--raum-3) var(--raum-4);
}
.feld textarea { min-height: 7rem; resize: vertical; }

/* Auswahl mit grosser Trefferflaeche — Finger, nicht Maus. */
.wahl label {
  display: flex; align-items: center; gap: var(--raum-3);
  min-height: 2.75rem;
  cursor: pointer;
}

button, .knopf {
  min-height: 2.75rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --- 6. Druck --------------------------------------------------------------
   Manche Gaeste drucken den Ablaufplan aus. Bilder, Knoepfe und Formulare
   sind auf Papier sinnlos.                                                    */

@media print {
  .kopf-bild, .knopf, button, form, nav, .galerie { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding-block: 1rem; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Die Kopfleiste wird aus dem fertigen Dokument gefuellt (siehe Baustein
   „kopf"). Laeuft kein JavaScript, bleibt sie leer — dann soll sie auch
   nicht als leerer Streifen stehenbleiben. */
.kopfleiste:empty { display: none; }

/* Der Farbstreifen im Dresscode. Neutrale Grundform, damit er in JEDEM
   Design brauchbar aussieht — ohne sie waere er eine Aufzaehlung mit
   Punkten davor. Designs duerfen ihn ueberschreiben (siehe „klar"). */
.farbstreifen {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  font-size: .8125rem;
}
.farbstreifen li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.farbstreifen-punkt {
  display: block;
  width: 3rem;
  height: 3rem;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.farbstreifen:empty { display: none; }