/* ===========================================================================
   DIE PLATTFORM — Papier, Licht, Gold
   ---------------------------------------------------------------------------
   Wer hierher kommt, ist frisch verlobt und sucht ein Gefühl, keine Software.
   Die Seite muss sich anfühlen wie ein Bogen Büttenpapier auf einem Tisch am
   Nachmittag: warm, weich, ruhig. Alles Kühle, Technische, Graue ist falsch.

   Die Farbwelt ist dieselbe wie die der Einladungen selbst - damit der
   Übergang von der Übersicht in eine Einladung kein Bruch ist, sondern ein
   Näherkommen.
   =========================================================================== */

:root{
  /* Papier in drei Tiefen. Warm, nicht grau. */
  --papier:#F6F2E9;
  --papier-tief:#EFE9DB;
  --papier-hell:#FDFBF6;
  --karte:#FFFDF8;

  /* Sepia-Tinte statt Schwarz - Schwarz auf Creme wirkt hart und billig. */
  --tinte:#3B3129;
  --tinte-weich:#6B5D4E;
  --tinte-zart:#9C8E7C;

  --gold:#A9884F;
  --gold-hell:#C9AE7C;
  --gold-blass:#E7DCC3;
  --rose:#C08B84;

  --linie:#E2D9C6;
  --schatten:0 18px 44px rgba(90,72,48,.13);
  --schatten-tief:0 26px 70px rgba(90,72,48,.2);

  --serif:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --skript:'Pinyon Script','Cormorant Garamond',cursive;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  --sp-1:.35rem; --sp-2:.65rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2.25rem; --sp-6:3.5rem; --sp-7:5.5rem;
  --mass:min(100dvw - 2.5rem, 76rem);
  --tipp:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--serif); font-size:clamp(1rem,.97rem+.2vw,1.14rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  /* Papierfaser: zwei feine Wiederholungen, keine Bilddatei. */
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201,174,124,.16), transparent 70%),
    repeating-linear-gradient(97deg, rgba(120,96,60,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(3deg, rgba(120,96,60,.014) 0 1px, transparent 1px 4px);
  background-attachment:fixed;
}
h1,h2,h3{font-weight:400;line-height:1.14;margin:0}
p{margin:0;max-width:38rem}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.hof{width:var(--mass);margin-inline:auto}
.skript{font-family:var(--skript)}
.leise{color:var(--tinte-weich)}
.zart{color:var(--tinte-zart);font-size:.86em}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-2) max(var(--sp-3),env(safe-area-inset-left));
  background:rgba(246,242,233,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie);
}
.marke{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tipp);
  text-decoration:none;color:var(--tinte);font-family:var(--skript);font-size:1.5rem}
.marke svg{width:22px;height:22px;color:var(--gold)}
.sprachen{display:flex;gap:1px}
.sprachen button{min-width:var(--tipp);min-height:var(--tipp);background:none;border:0;
  cursor:pointer;color:var(--tinte-zart);font-family:var(--sans);font-size:.72rem;
  letter-spacing:.18em;transition:color .25s var(--ease)}
.sprachen button[aria-pressed="true"]{color:var(--gold)}

/* ---------- Auftakt ---------- */
.auftakt{padding-block:var(--sp-6) var(--sp-5);text-align:center;display:grid;
  gap:var(--sp-4);justify-items:center}
.auftakt h1{font-family:var(--skript);font-size:clamp(2.6rem,8vw,5.2rem);color:var(--tinte)}
.auftakt .unter{font-size:clamp(1.05rem,2.5vw,1.3rem);color:var(--tinte-weich);
  font-style:italic;max-width:34rem}
.zierlinie{width:min(14rem,60%);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-hell),transparent)}

/* ---------- Namensfeld: das Erste, was sie anfassen kann ---------- */
.namen{
  display:grid;gap:var(--sp-3);justify-items:center;
  background:var(--karte);border:1px solid var(--linie);
  padding:var(--sp-5) var(--sp-4);box-shadow:var(--schatten);
  width:min(100%,42rem);
}
.namen-zeile{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;
  justify-content:center}
.namen .und{font-family:var(--skript);font-size:2rem;color:var(--gold);padding-bottom:.1em}
.feld{display:grid;gap:.25rem;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-zart)}
.feld input{
  min-height:var(--tipp);padding:.4rem .7rem;width:min(11rem,42vw);
  background:transparent;border:0;border-bottom:1px solid var(--linie);
  font-family:var(--serif);font-size:1.35rem;color:var(--tinte);text-align:center;
  transition:border-color .25s var(--ease)}
.feld input:focus{border-color:var(--gold)}
.feld-weit input{width:min(18rem,70vw)}

/* ---------- Galerie ---------- */
.galerie{padding-block:var(--sp-6)}
.gal-kopf{display:grid;gap:var(--sp-2);justify-items:center;text-align:center;
  margin-bottom:var(--sp-4)}
.gal-kopf h2{font-family:var(--skript);font-size:clamp(2rem,5vw,3.2rem)}
.stimmungen{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;
  margin-bottom:var(--sp-5)}
.stimmungen button{
  min-height:var(--tipp);padding:0 var(--sp-3);cursor:pointer;
  background:transparent;border:1px solid var(--linie);color:var(--tinte-weich);
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  transition:all .25s var(--ease)}
.stimmungen button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#FFFDF8}

.raster{display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.stueck{display:grid;gap:var(--sp-2)}
.rahmen{
  position:relative;aspect-ratio:5/8;overflow:hidden;
  background:var(--papier-tief);border:1px solid var(--linie);
  box-shadow:var(--schatten);cursor:pointer;padding:0;width:100%;
  transition:box-shadow .35s var(--ease)}
.rahmen:hover,.rahmen:focus-visible{box-shadow:var(--schatten-tief)}
/* Die Vorschau ist die ECHTE Einladung, verkleinert - kein Bildschirmfoto.
   Darum ein iframe, das erst laedt, wenn es in Sicht kommt. */
.rahmen iframe{
  position:absolute;top:0;left:0;border:0;
  width:420px;height:672px;transform-origin:top left;pointer-events:none;
}
.rahmen .warten{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--tinte-zart);font-family:var(--skript);font-size:1.6rem}
.stueck-fuss{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.stueck-name{font-size:1.2rem}
.stueck-stufe{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.stueck-zeile{font-size:.9rem;color:var(--tinte-weich)}

/* ---------- Vollbild einer Einladung ---------- */
.voll{position:fixed;inset:0;z-index:60;background:var(--papier);display:none}
.voll[open]{display:block}
.voll iframe{width:100%;height:100%;border:0;display:block}
.voll-kopf{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;
  justify-content:space-between;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:linear-gradient(180deg,rgba(0,0,0,.34),transparent)}
.voll-zu{width:var(--tipp);height:var(--tipp);display:grid;place-items:center;
  background:rgba(0,0,0,.4);color:#fff;border:0;cursor:pointer;border-radius:50%}
.voll-name{color:#fff;font-family:var(--skript);font-size:1.5rem;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Die Farbleiste: der Kern der Anforderung. Sie liegt UNTER der Einladung,
   damit die Einladung ganz sichtbar bleibt. */
.farbleiste{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:var(--sp-2);justify-items:center;
  padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:rgba(253,251,246,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--linie)}
.farbleiste .titel{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinte-zart)}
.wege{display:flex;gap:var(--sp-2);max-width:100%;overflow-x:auto;padding:2px}
.weg{flex:0 0 auto;width:var(--tipp);height:var(--tipp);border-radius:50%;
  border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.weg[aria-pressed="true"]{border-color:var(--tinte)}
.gruende{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center}
.gruende button{min-height:var(--tipp);padding:0 var(--sp-3);cursor:pointer;
  background:transparent;border:1px solid var(--linie);color:var(--tinte-weich);
  font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.gruende button[aria-pressed="true"]{background:var(--tinte);color:var(--papier-hell);
  border-color:var(--tinte)}

/* ---------- Inspiration ---------- */
.insp{padding-block:var(--sp-6);display:grid;gap:var(--sp-5)}
.insp-kopf{display:grid;gap:var(--sp-2);justify-items:center;text-align:center}
.insp-kopf h2{font-family:var(--skript);font-size:clamp(2rem,5vw,3.2rem)}
.insp-liste{display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.insp-karte{display:grid;gap:var(--sp-2);background:var(--karte);
  border:1px solid var(--linie);box-shadow:var(--schatten);overflow:hidden}
.insp-karte img{aspect-ratio:3/2;object-fit:cover;width:100%}
.insp-text{padding:var(--sp-3) var(--sp-3) var(--sp-4);display:grid;gap:var(--sp-2)}
.insp-karte h3{font-size:1.3rem}
.insp-karte .passt{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;
  color:var(--gold);background:none;border:0;padding:0;cursor:pointer;text-align:left;
  min-height:var(--tipp);text-decoration:underline;text-underline-offset:4px}

/* ---------- Ablauf + Fragen + Anfrage ---------- */
.band{padding-block:var(--sp-6);display:grid;gap:var(--sp-5);justify-items:center;
  text-align:center}
.band h2{font-family:var(--skript);font-size:clamp(2rem,5vw,3.2rem)}
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));width:100%}
.schritte li{display:grid;gap:var(--sp-1);justify-items:center}
.schritte .zahl{font-family:var(--skript);font-size:2.4rem;color:var(--gold-hell);line-height:1}
.fragen{width:min(100%,44rem);display:grid}
.frage{border-top:1px solid var(--linie)}
.frage summary{cursor:pointer;list-style:none;min-height:var(--tipp);display:flex;
  align-items:center;padding:var(--sp-2) 0;font-size:1.2rem}
.frage summary::-webkit-details-marker{display:none}
.frage[open] summary{color:var(--gold)}
.frage p{padding-bottom:var(--sp-3);color:var(--tinte-weich);text-align:left}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tipp);padding:0 var(--sp-5);cursor:pointer;
  background:var(--gold);color:#FFFDF8;border:1px solid var(--gold);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease)}
.knopf:hover{background:transparent;color:var(--gold)}
.knopf-leise{background:transparent;color:var(--tinte-weich);border-color:var(--linie)}
.knopf-leise:hover{color:var(--gold);border-color:var(--gold)}

.fuss{padding-block:var(--sp-5) var(--sp-6);border-top:1px solid var(--linie);
  display:grid;gap:var(--sp-2);justify-items:center;text-align:center;
  font-size:.9rem;color:var(--tinte-zart)}