/* Nashira & Christian - Dankesseite.
   Warme, zurueckhaltende Sprache: gebrochenes Weiss, Serifen, viel Luft.
   Bewusst kein Rahmenwerk - die Seite hat drei Ansichten und soll auf einem
   Handy im Garten schnell laden. */

/* Farben nach der Hochzeitspalette: Salbei, Terrakotta, Pfirsich, Altrosa,
   Creme. Die kraeftigen Toene bleiben Akzente - eine Bildergalerie soll die
   Bilder tragen, nicht die Flaeche um sie herum. */
:root{
  --salbei:#6e7b54; --terra:#c6784e; --pfirsich:#edb68c;
  --altrosa:#e0cbc4; --creme:#f8eae5;

  --bg:#fbf6f2; --karte:#fff; --ink:#3b322b; --muted:#93857a;
  --linie:#ebddd4; --akzent:var(--terra); --dunkel:#241e19;
  --schatten:0 1px 2px rgba(59,50,43,.05), 0 6px 20px rgba(59,50,43,.07);
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
/* hidden muss STAERKER sein als eigene display-Regeln. Sonst gewinnt ein
   .wahlleiste{display:flex} gegen das display:none des Browsers, und die
   Leiste steht da, obwohl das Element als versteckt gilt. Genau das ist
   passiert - und betrifft auch .sk[hidden] auf der persoenlichen Seite. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit}

/* ---------- Kopf ---------- */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopf{max-width:1180px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.marke{font-size:19px; letter-spacing:.01em; white-space:nowrap}
.marke .amp{color:var(--muted); font-style:italic}
nav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
nav button{
  font:500 14px/1 var(--sans); color:var(--muted);
  background:none; border:0; padding:9px 13px; border-radius:999px; cursor:pointer;
}
nav button:hover{color:var(--ink); background:color-mix(in srgb,var(--linie) 55%,transparent)}
nav button[aria-current="true"]{color:#fff; background:var(--terra)}
/* Weg in die Verwaltung. Ein Verweis, kein Reiter - er wechselt die Seite
   und soll deshalb auch nicht aussehen wie die Reiter daneben. Gaeste
   bekommen ihn nie zu sehen: app.js blendet ihn nur ein, wenn /api/ich
   "verwaltung" meldet. */
.zurverwaltung{
  font:600 13px/1 var(--sans); color:var(--salbei); text-decoration:none;
  padding:8px 13px; border-radius:999px; border:1px solid var(--salbei);
  margin-left:6px; white-space:nowrap;
}
.zurverwaltung:hover{background:var(--salbei); color:#fff}

main{max-width:1180px; margin:0 auto; padding:0 20px 80px}
section[hidden]{display:none}

/* ---------- Start ---------- */
.held{text-align:center; padding:64px 0 40px}
.held .ort{font:500 11.5px/1 var(--sans); letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted)}
.held h1{font-size:clamp(2.4rem,8vw,4.6rem); font-weight:400; line-height:1.08;
  margin:18px 0 10px}
.held h1 .amp{color:var(--muted); font-style:italic}
.held .unter{color:var(--muted); font-size:18px; margin:0}
.trenner{border:0; border-top:1px solid var(--linie); width:64px; margin:34px auto}
.fliess{max-width:34rem; margin:0 auto; text-align:center}
.fliess p{margin:0 0 14px}

.zahlen{display:flex; justify-content:center; gap:0; flex-wrap:wrap; margin:38px 0 0}
.zahl{padding:0 26px; text-align:center; border-left:1px solid var(--linie)}
.zahl:first-child{border-left:0}
.zahl b{display:block; font-size:29px; font-weight:400}
.zahl span{font:500 11px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}

/* ---------- Held mit Hintergrundvideo ---------- */
.videoheld{position:relative; margin:0 -20px 6px; overflow:hidden;
  border-radius:0 0 22px 22px; isolation:isolate}
.videoheld video, .videoheld .standbild{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
/* Ein warmer Schleier, damit die Schrift auf jedem Einzelbild lesbar bleibt -
   ohne ihn schwankt der Kontrast mit dem Bildinhalt. */
.videoheld::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(36,30,25,.42), rgba(36,30,25,.22) 42%,
    rgba(36,30,25,.62))}
.videoheld .inhalt{position:relative; padding:96px 22px 74px; text-align:center; color:#fff}
.videoheld .ort{color:rgba(255,255,255,.86)}
.videoheld h1{color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.32)}
.videoheld h1 .amp{color:var(--pfirsich)}
.videoheld .unter{color:rgba(255,255,255,.9)}
.videoheld hr{border-top-color:rgba(255,255,255,.42)}
@media (prefers-reduced-motion:reduce){ .videoheld video{display:none} }

/* ---------- Ortsstreifen ---------- */
.orte{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:8px 0 0}
.orte figure{margin:0; border-radius:12px; overflow:hidden; aspect-ratio:4/3;
  background:var(--linie); cursor:zoom-in}
.orte img{width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.orte figure:hover img{transform:scale(1.05)}

/* ---------- Hauptbild und Diaschau auf der Gästeseite ---------- */
.hauptbild{position:relative; border-radius:16px; overflow:hidden;
  background:var(--linie); box-shadow:var(--schatten); margin:0 0 10px}
.hauptbild img{width:100%; display:block; aspect-ratio:3/2; object-fit:cover;
  cursor:zoom-in}
.hauptbild .bu{position:absolute; inset:auto 0 0 0; padding:26px 14px 11px;
  color:#fff; font:500 12.5px/1.4 var(--sans);
  background:linear-gradient(transparent, rgba(36,30,25,.72))}
.diaschau{display:flex; gap:7px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:thin}
.diaschau button{flex:0 0 92px; height:66px; padding:0; border-radius:9px;
  overflow:hidden; border:2px solid transparent; background:var(--linie); cursor:pointer}
.diaschau button[aria-current="true"]{border-color:var(--terra)}
.diaschau img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- Abschnittsköpfe ---------- */
.sk{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:46px 0 20px; padding-bottom:12px; border-bottom:1px solid var(--linie)}
.sk h2{font-size:27px; font-weight:400; margin:0}
.sk .hinweis{font:400 14px/1.5 var(--sans); color:var(--muted); margin:0}
.sk .rechts{margin-left:auto; display:flex; gap:8px; align-items:center}

.schalter{display:inline-flex; border:1px solid var(--linie); border-radius:999px;
  overflow:hidden; background:var(--karte)}
.schalter button{font:500 13px/1 var(--sans); border:0; background:none;
  padding:8px 15px; cursor:pointer; color:var(--muted)}
.schalter button[aria-pressed="true"]{background:var(--terra); color:#fff}

/* ---------- Raster ---------- */
.raster{display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr))}
.kachel{position:relative; margin:0; overflow:hidden; border-radius:10px;
  background:var(--linie); aspect-ratio:1; cursor:zoom-in}
.kachel img{width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s}
.kachel img[data-lade="1"]{opacity:0}
.kachel:hover img{transform:scale(1.045)}
.kachel figcaption{position:absolute; inset:auto 0 0 0; padding:16px 10px 7px;
  font:500 11px/1.3 var(--sans); color:#fff; opacity:0;
  background:linear-gradient(transparent, rgba(0,0,0,.62)); transition:opacity .25s}
.kachel:hover figcaption{opacity:1}
.mehr{text-align:center; margin:26px 0}
.mehr button{font:500 14px/1 var(--sans); padding:12px 22px; cursor:pointer;
  border:1px solid var(--terra); border-radius:999px; background:none; color:var(--terra)}
.mehr button:hover{background:var(--terra); color:#fff; border-color:var(--terra)}

/* ---------- Zeitstrahl ---------- */
.strahl{position:relative; margin:0; padding:0 0 0 24px; list-style:none}
.strahl::before{content:""; position:absolute; left:5px; top:8px; bottom:8px;
  width:1px; background:var(--linie)}
.strahl>li{position:relative; padding:0 0 32px}
.strahl>li::before{content:""; position:absolute; left:-23px; top:9px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--salbei)}
.strahl .uhr{font:600 12px/1 var(--sans); letter-spacing:.1em; color:var(--salbei)}
.strahl h3{font-size:20px; font-weight:400; margin:6px 0 4px}
.strahl p{margin:0; color:var(--muted); font-size:15.5px}
.strahl .streifen{display:grid; gap:6px; margin:12px 0 0;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr))}
.strahl .streifen .kachel{border-radius:8px}

/* ---------- Lichtkasten ---------- */
/* Vier Zeilen: Kopf, Buehne, Personenleiste, Fuss. Die Buehne bekommt
   minmax(0,1fr) - NICHT eine Prozenthoehe. Prozente loesen sich in einem
   Raster gegen den Inhalt auf statt gegen den Rahmen; das hat in diesem
   Projekt schon viermal dafuer gesorgt, dass Hochformate ueber den Rand
   liefen. Ist die Personenleiste verborgen, faellt ihre Zeile weg. */
.licht{position:fixed; inset:0; z-index:50; background:rgba(20,17,15,.97);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; touch-action:pan-y;
  overflow:hidden}
.licht[hidden]{display:none}
.licht .lk{display:flex; align-items:center; gap:14px; padding:12px 16px;
  color:#e9e2d8; font:400 14px/1.4 var(--sans)}
.licht .lk .zu{margin-left:auto}
.licht button{font:inherit; color:#e9e2d8; background:none;
  border:1px solid rgba(233,226,216,.28); border-radius:999px;
  padding:7px 13px; cursor:pointer}
.licht button:hover{background:rgba(233,226,216,.12)}
/* min-height:0 ist hier das Entscheidende und nicht bloss Feinschliff:
   ein Raster- oder Flex-Element hat von sich aus min-height:auto und
   SCHRUMPFT deshalb nicht unter seinen Inhalt. Das Bild bestimmte damit die
   Hoehe der 1fr-Zeile statt sich in sie einzupassen - die Zeile wuchs ueber
   den Bildschirm hinaus, das Bild rutschte nach unten aus dem Rahmen und man
   sah nur noch einen Streifen davon. */
.licht .buehne{position:relative; display:grid; place-items:center;
  overflow:hidden; padding:0 8px; min-height:0; min-width:0}
/* Das Bild wird ABSOLUT positioniert - das ist hier der Kern, nicht
   Feinschliff.
   Zwei Versuche davor sind gescheitert, beide aus demselben Grund:
   .buehne ist selbst ein Raster mit einer impliziten auto-Zeile, die sich
   nach ihrem Inhalt bemisst. Ein height:100% des Bildes bemisst sich
   wiederum nach dieser Zeile - ein Kreis, den der Browser aufloest, indem
   der Inhalt gewinnt. Gemessen: Buehne 676 px hoch, Bild trotzdem 1895 px,
   es lief unten heraus und man sah nur einen Streifen davon.
   Mit position:absolute faellt das Bild aus dem Rasterfluss; sein
   Bezugsrahmen ist dann der Polsterkasten der .buehne, und dessen Hoehe ist
   bestimmt. object-fit:contain setzt das Bild seitenverhaeltnisgetreu hinein. */
.licht .buehne img{position:absolute; inset:4px 10px; width:auto; height:auto;
  max-width:calc(100% - 20px); max-height:calc(100% - 8px); margin:auto;
  object-fit:contain; border-radius:4px;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.5))}
.licht .pfeil{position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; padding:0; display:grid; place-items:center;
  border-radius:50%; font-size:20px; line-height:1}
.licht .pfeil.links{left:10px} .licht .pfeil.rechts{right:10px}
.licht .fuss{display:flex; gap:12px; align-items:center; justify-content:center;
  padding:12px 16px 18px; color:#b9b0a4; font:400 13px/1.4 var(--sans);
  flex-wrap:wrap}
.licht .laden{position:absolute; color:#b9b0a4; font:400 13px var(--sans)}

.leer{color:var(--muted); text-align:center; padding:40px 0}
.t-muted{color:var(--muted)}
footer{border-top:1px solid var(--linie); margin-top:20px;
  padding:26px 20px 60px; text-align:center;
  color:var(--muted); font:400 14px/1.6 var(--sans)}

@media (max-width:640px){
  body{font-size:16px}
  .raster{grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:6px}
  .held{padding:40px 0 26px}
  .zahl{padding:0 16px}
  main{padding:0 12px 60px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kachel img{transition:none} .kachel:hover img{transform:none}
}

/* ---------- Dankeswort auf der persoenlichen Seite ---------- */
/* Die Geschenk-Texte sind ganze Saetze. Sie bekommen darum die Anmutung
   eines Zitats: Cremegrund, Terrakotta-Kante, etwas groesser gesetzt. */
.dankesbereich{max-width:38rem; margin:0 auto; display:grid; gap:14px}
.dankeswort{
  margin:0; padding:20px 22px 18px; background:var(--creme);
  border-left:3px solid var(--terra); border-radius:4px 12px 12px 4px;
}
.dankeswort p{margin:0; font-size:18px; line-height:1.66; text-wrap:pretty}
.dankeswort .mitwem{
  display:block; margin-top:9px; color:var(--muted);
  font:400 13px/1.4 var(--sans); letter-spacing:.02em;
}
@media (max-width:560px){
  .dankeswort{padding:16px 17px 15px}
  .dankeswort p{font-size:17px}
}

/* ---------- Fotos aussuchen und herunterladen ---------- */
.ladeleiste{display:flex;justify-content:center;margin:0 0 16px}
.ladeleiste button{font:500 14.5px/1 var(--sans);padding:12px 22px;border-radius:999px;
  border:1px solid var(--terra);background:var(--terra);color:#fff;cursor:pointer}
.ladeleiste button:hover{background:#b56941;border-color:#b56941}

.wahlleiste{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 20px);padding:10px 14px;border-radius:16px;
  background:var(--dunkel);color:#fff;box-shadow:0 12px 40px rgba(36,30,25,.36);
  font:400 14px/1.3 var(--sans);
}
.wahlleiste .wl-links{display:flex;flex-direction:column;gap:1px;margin-right:4px;
  min-width:8.5em}
.wahlleiste .wl-links b{font-weight:600}
.wahlleiste #wlGroesse{color:rgba(255,255,255,.62);font-size:12.5px}
.wahlleiste button{font:500 13.5px/1 var(--sans);padding:9px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.26);background:transparent;color:#fff;cursor:pointer}
.wahlleiste button:hover{border-color:#fff}
.wahlleiste button.haupt{background:var(--terra);border-color:var(--terra)}
.wahlleiste button:disabled{opacity:.4;cursor:default}
/* Die Umschaltgruppe kommt aus der Galerie und bringt dort einen weissen
   Grund mit. In der dunklen Leiste stand die nicht gewaehlte Beschriftung
   damit weiss auf weiss - unsichtbar. Also Grund zuruecknehmen. */
.wahlleiste .schalter{background:transparent;border-color:rgba(255,255,255,.26)}
.wahlleiste .schalter button{border:0;padding:8px 12px;color:rgba(255,255,255,.72)}
.wahlleiste .schalter button:hover{color:#fff}
.wahlleiste .schalter button[aria-pressed="true"]{background:#fff;color:var(--dunkel)}

/* Kacheln im Auswahlmodus */
.raster.waehlend .kachel{cursor:pointer}
.raster.waehlend .kachel::after{
  content:"";position:absolute;top:8px;right:8px;width:23px;height:23px;
  border-radius:50%;border:2px solid #fff;background:rgba(36,30,25,.35);
  box-shadow:0 1px 5px rgba(0,0,0,.3);
}
.raster.waehlend .kachel[data-gewaehlt="1"]::after{
  background:var(--terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color:var(--terra);
}
.raster.waehlend .kachel[data-gewaehlt="1"] img{
  transform:scale(.93);border-radius:8px;
}
.raster.waehlend .kachel figcaption{opacity:0}
#ladeRahmen{display:none}

@media (max-width:640px){
  .wahlleiste{left:8px;right:8px;transform:none;max-width:none;gap:7px;padding:9px 11px}
  .wahlleiste .wl-links{width:100%;flex-direction:row;gap:8px;align-items:baseline}
  .wahlleiste button{padding:9px 12px;font-size:13px}
}

/* ---------- Lupe beim Zeigen (nur im Auswahlmodus) ---------- */
/* Im normalen Betrieb oeffnet ein Klick den Lichtkasten. Waehrend der
   Auswahl waehlt ein Klick aus - man kann also nicht mehr hineinschauen,
   bevor man sich entscheidet. Dafuer diese Lupe. */
.lupe{
  position:fixed; z-index:45; pointer-events:none; overflow:hidden;
  border-radius:12px; border:3px solid #fff; background:var(--karte);
  box-shadow:0 18px 60px rgba(36,30,25,.42);
  /* visibility statt hidden: das Element bleibt im Baum, also greift der
     Uebergang beim ersten Erscheinen. Mit [hidden] muesste man einen Bildlauf
     abwarten, und das haengt an requestAnimationFrame. */
  opacity:0; visibility:hidden; transition:opacity .13s ease;
}
.lupe.an{opacity:1; visibility:visible}
.lupe img{display:block; width:100%; height:auto}
.lupe .bu{
  position:absolute; inset:auto 0 0 0; padding:20px 12px 8px; color:#fff;
  font:500 12px/1.3 var(--sans); letter-spacing:.02em;
  background:linear-gradient(to top, rgba(0,0,0,.62), transparent);
}
@media (hover:none){ .lupe{display:none} }

/* ---------- Fotos der Gäste hochladen ---------- */
.abwurf{
  max-width:42rem; margin:6px auto 0; padding:40px 24px; cursor:pointer;
  border:2px dashed var(--altrosa); border-radius:18px; background:var(--creme);
  text-align:center; color:var(--ink); transition:border-color .16s, background .16s;
}
.abwurf:hover, .abwurf:focus-visible{border-color:var(--terra); outline:0}
.abwurf.drueber{border-color:var(--terra); background:#fbe6d9; border-style:solid}
.abwurf-inhalt{display:grid; gap:9px; justify-items:center}
.abwurf svg{color:var(--terra)}
.abwurf b{font-size:18px; font-weight:400; max-width:26rem}
.abwurf span{font:400 13.5px/1.5 var(--sans); color:var(--muted); max-width:24rem}

.ladeliste{
  list-style:none; max-width:42rem; margin:16px auto 0; padding:0;
  display:grid; gap:7px;
}
.ladeliste li{
  display:flex; gap:11px; align-items:center; padding:9px 12px;
  background:var(--karte); border:1px solid var(--linie); border-radius:11px;
  font:400 14px/1.35 var(--sans);
}
.ladeliste img{
  width:44px; height:44px; border-radius:8px; object-fit:cover;
  background:var(--linie); flex:0 0 auto;
}
.ladeliste .wie{flex:1; min-width:0}
.ladeliste .wie b{display:block; font-weight:500; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ladeliste .wie span{color:var(--muted); font-size:12.5px}
.ladeliste .balken{
  flex:0 0 88px; height:5px; border-radius:999px; background:var(--linie);
  overflow:hidden;
}
.ladeliste .balken i{display:block; height:100%; width:0; background:var(--terra);
  transition:width .18s}
.ladeliste .fertig{color:var(--salbei); font-weight:600; flex:0 0 auto}
.ladeliste .schief{color:#a4462f; font-size:12.5px; flex:0 0 auto; max-width:14rem;
  text-align:right}

/* kurze Rückmeldung unten - dieselbe Anmutung wie in der Verwaltung */
.meldung{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:50;
  background:var(--dunkel); color:#fff; padding:10px 18px; border-radius:999px;
  font:400 14px/1.3 var(--sans); box-shadow:0 10px 34px rgba(36,30,25,.3);
  opacity:0; transition:opacity .22s; pointer-events:none; max-width:calc(100vw - 28px);
}
.meldung.an{opacity:1}

/* Der Uploadteil sitzt unter den Fotos der persönlichen Seite und braucht
   eine deutliche Zäsur - sonst liest er sich wie ein weiterer Bildblock. */
.trenner-weit{
  margin:52px auto 0; padding:36px 0 0; max-width:none;
  border-top:1px solid var(--linie);
}

/* ---------- Videos ---------- */
.videogruppe{margin:0 0 40px}
.videogruppe > h3{
  font:400 21px/1.2 var(--serif); margin:0 0 4px;
}
.videogruppe > .wieviel{
  font:400 13.5px/1.4 var(--sans); color:var(--muted); margin:0 0 14px;
}
.videoraster{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.videokarte{
  margin:0; background:var(--karte); border:1px solid var(--linie);
  border-radius:14px; overflow:hidden; box-shadow:var(--schatten);
}
.videobuehne{
  /* 4:3 statt 16:9: 17 der 23 Aufnahmen sind hochkant vom Handy. Im
     Breitrahmen blieb davon ein schmaler Streifen; so ist er ein
     Drittel breiter, und die Queraufnahmen verlieren kaum etwas. */
  position:relative; aspect-ratio:4/3; background:var(--dunkel);
  display:grid; place-items:center; cursor:pointer; overflow:hidden;
}
/* contain, nicht cover: die Hochkantaufnahmen vom Handy wuerden im
   16:9-Rahmen auf einen Streifen in der Bildmitte beschnitten - beim Einzug
   sah man das Dach statt der Braut. Damit die Karte trotzdem gefuellt
   aussieht, liegt dasselbe Bild unscharf und dunkel als Grund darunter.
   Es wird nur einmal geladen, der Browser nimmt es aus seinem Speicher. */
.videobuehne::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--standbild) center/cover no-repeat;
  filter:blur(22px) brightness(.5) saturate(1.2); transform:scale(1.25);
}
/* absolut, nicht als Grid-Kind: in einem Raster mit place-items:center
   loest sich height:100% gegen den INHALT auf, nicht gegen die Buehne - das
   Standbild wurde 655 px hoch in einem 207 px hohen Rahmen. Genau dieselbe
   Falle wie seinerzeit im Lichtkasten. */
.videobuehne img, .videobuehne video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:contain; display:block;
}
.videobuehne .spiel, .videobuehne .dauer{z-index:2}
.videobuehne video{background:#000}
.videobuehne .spiel{
  position:absolute; width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35); transition:transform .16s, background .16s;
}
.videobuehne:hover .spiel{transform:scale(1.08); background:#fff}
.videobuehne .spiel svg{margin-left:4px; color:var(--terra)}
.videobuehne .dauer{
  position:absolute; right:9px; bottom:9px; padding:3px 8px; border-radius:6px;
  background:rgba(20,17,15,.72); color:#fff;
  font:500 12px/1.3 var(--sans); font-variant-numeric:tabular-nums;
}
.videokarte figcaption{padding:11px 14px 13px}
.videokarte figcaption b{display:block; font-weight:400; font-size:17px}
.videokarte figcaption span{
  display:block; margin-top:2px; color:var(--muted);
  font:400 13px/1.4 var(--sans);
}
/* Läuft das Video, braucht es keinen unscharfen Grund mehr. */
.videobuehne.laeuft::before{display:none}

/* ---------- „Vielen Dank" auf der persönlichen Seite ---------- */
/* Parisienne, SIL Open Font License. Selbst ausgeliefert aus R2 statt von
   Google: die Seite liegt hinter einer Anmeldung, und wer sie besucht, soll
   dabei nicht bei einem Dritten auftauchen. Zwei Schnitte, weil Google die
   Schrift in Untermengen teilt - der latin-ext-Teil hält die Umlaute. */
@font-face{
  font-family:"Parisienne"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/m/font/parisienne-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Parisienne"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/m/font/parisienne-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

.dankgruss{text-align:center; padding:18px 0 8px}
.dankgruss .dank{
  display:inline-block; margin:0;
  font:400 clamp(3.4rem,15vw,7.6rem)/0.94 "Parisienne", var(--serif);
  color:var(--terra);
  /* Der Schwung der Schrift ragt unten heraus - sonst wird er beschnitten. */
  padding:0 .12em .14em;
}
/* Der ganze Satz soll groß wirken, nicht nur die erste Hälfte - also auch
   die zweite Zeile deutlich über Fließtextgröße. */
.dankgruss .weil{
  margin:2px 0 0; font-size:clamp(1.32rem,4.6vw,2.1rem); line-height:1.25;
  color:var(--ink);
}
/* Der Tisch als kleine Zeile darüber, der Haushalt als lesbarer Satz
   darunter - eine Aufzählung von sechs Namen in Versalien mit weitem
   Sperrsatz war nicht mehr zu lesen. */
.dankgruss .fuerwen{
  margin:0 0 10px; font:500 11.5px/1 var(--sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.dankgruss .wem{
  margin:14px auto 0; max-width:26rem;
  font-size:clamp(.98rem,3vw,1.12rem); color:var(--muted);
}

/* Der Schreibvorgang: eine schräge Blende läuft von links nach rechts über
   die Zeile. Die Keyframes sitzen bewusst ungleichmäßig - eine gleichmäßige
   Blende sieht aus wie ein Wischer, eine ungleichmäßige wie eine Hand, die
   zwischen den Buchstaben kurz absetzt. Die Schräge ahmt die Federhaltung
   nach. */
.dankgruss .dank{clip-path:polygon(0 -12%, 0 -12%, -9% 112%, 0 112%)}
.dankgruss.schreibt .dank{
  animation:schreiben 3.1s cubic-bezier(.42,.02,.58,.98) both;
}
@keyframes schreiben{
  0%   {clip-path:polygon(0 -12%,   0 -12%,  -9% 112%, 0 112%)}
  14%  {clip-path:polygon(0 -12%,  17% -12%,  8% 112%, 0 112%)}
  31%  {clip-path:polygon(0 -12%,  34% -12%, 25% 112%, 0 112%)}
  44%  {clip-path:polygon(0 -12%,  49% -12%, 40% 112%, 0 112%)}
  63%  {clip-path:polygon(0 -12%,  69% -12%, 60% 112%, 0 112%)}
  79%  {clip-path:polygon(0 -12%,  85% -12%, 76% 112%, 0 112%)}
  100% {clip-path:polygon(0 -12%, 118% -12%,109% 112%, 0 112%)}
}
.dankgruss .weil, .dankgruss .wem{opacity:0}
.dankgruss.schreibt .weil{animation:auftauchen .9s ease 2.5s both}
.dankgruss.schreibt .wem{animation:auftauchen .9s ease 3.0s both}
@keyframes auftauchen{
  from{opacity:0; transform:translateY(6px)}
  to  {opacity:1; transform:none}
}

/* Wer Bewegung abbestellt hat, bekommt alles auf einmal - fertig gesetzt. */
@media (prefers-reduced-motion: reduce){
  .dankgruss .dank{clip-path:none; animation:none}
  .dankgruss .weil, .dankgruss .wem{opacity:1; animation:none}
}

/* Der Geschenkteil bekommt dieselbe Schreibschrift, nur kleiner - er soll
   den grossen Gruss oben nicht verdrängen, aber erkennbar dazugehören. */
.dankgruss.zweit .dank{
  font-size:clamp(2.1rem,8vw,3.6rem); color:var(--salbei);
}
.dankgruss.zweit .weil{
  font-size:clamp(1rem,3.2vw,1.2rem); color:var(--muted);
  max-width:24rem; margin-left:auto; margin-right:auto;
}
.dankgruss.zweit{margin-top:26px}

/* ---------- Bearbeiten direkt auf der Gästeseite ---------- */
/* Nur für angemeldete Verwalter. Die Knöpfe sollen erkennbar NICHT zur
   Seite gehören - deshalb Salbeigrün statt Terrakotta und eine eigene
   Leiste, die sagt, warum sie da sind. */
/* Klebt oben am Rand: die erste Fassung war eine blasse Zeile mitten auf der
   Seite - ph hat sie schlicht nicht gefunden. Jetzt ist sie von jeder Stelle
   der Seite aus sichtbar und sagt auch, was sie kann. */
/* Der kurze Moment, bis feststeht, welche Ansicht dran ist. */
.laedt{
  margin:22vh 0; text-align:center; color:var(--muted);
  font:400 15px/1.6 var(--serif); letter-spacing:.02em;
}
.vwleiste{
  position:sticky; top:52px; z-index:15;
  margin:0 0 18px; padding:10px 12px; border-radius:12px;
  background:var(--salbei); color:#fff;
  font:500 13.5px/1.45 var(--sans); text-align:center;
  box-shadow:0 6px 22px rgba(110,123,84,.28);
  display:flex; align-items:center; gap:10px;
}
/* min-width:0 ist noetig, damit der Text in einem Flex-Element umbrechen
   darf. Ohne das schiebt eine lange Zeile die Knoepfe aus der Leiste. */
.vwmitte{flex:1 1 auto; min-width:0}
.vwleiste b{font-weight:700}
.vwleiste span{display:block; font-weight:400; opacity:.88; font-size:12.5px; margin-top:2px}
/* Durchblaettern: eine Seite je Haushalt. Bewusst echte Verweise und keine
   Knoepfe - so geht Mittelklick, "in neuem Tab" und das Zurueck des
   Browsers, und beim Wechsel wird ohnehin neu geladen. */
.vwnav{
  flex:0 0 auto; font:600 13px/1 var(--sans); padding:9px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12);
  color:#fff; text-decoration:none; white-space:nowrap; cursor:pointer;
}
.vwnav:hover{background:#fff; color:var(--salbei); border-color:#fff}
.vwnav.aus{opacity:.35; cursor:default; background:none}
/* Die inneren Spannen duerfen nicht als Bloecke brechen - .vwleiste span
   trifft sie sonst mit. */
.vwleiste .vwlang{display:inline}
@media (max-width:560px){
  .vwleiste{gap:6px; padding:9px 8px}
  .vwnav{padding:8px 10px; font-size:12px}
  .vwleiste span{font-size:11.5px}
  /* Auf dem Handy bleibt nur, wessen Seite das ist und wo man steht. Die
     Leiste klebt oben; mit dem ganzen Hinweistext nahm sie ein Drittel des
     Bildschirms ein - und der Hinweis ist nach dem zweiten Mal bekannt. */
  .vwleiste .vwlang{display:none}
}
.vwknopf{
  font:500 12.5px/1 var(--sans); padding:7px 12px; border-radius:999px;
  border:1px solid var(--salbei); background:var(--bg); color:var(--salbei);
  cursor:pointer;
}
.vwknopf:hover{background:var(--salbei); color:#fff}
.vwknopf.laeuft{opacity:.5; pointer-events:none}
.vwzeile{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0 0}

/* Das (x) auf den Kacheln */
.kachel .vwweg{
  position:absolute; top:6px; right:6px; z-index:3;
  width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(36,30,25,.62); color:#fff; font:400 15px/1 var(--sans);
  display:grid; place-items:center; opacity:0; transition:opacity .15s, background .15s;
}
.kachel:hover .vwweg, .kachel:focus-within .vwweg{opacity:1}
.kachel .vwweg:hover{background:#a4462f}
@media (hover:none){ .kachel .vwweg{opacity:1} }

/* Das Herz macht ein Bild zum Hauptbild des Haushalts. Oben LINKS, dem (x)
   gegenueber - die beiden tun sehr Verschiedenes und sollen nicht
   nebeneinanderliegen. Unten geht nicht: dort liegt die Uhrzeit.
   Das gewaehlte Herz bleibt sichtbar, auch ohne Zeigen - sonst muesste man
   die ganze Wand abfahren, um zu sehen, welches Bild oben steht. */
.kachel .vwherz{
  position:absolute; top:6px; left:6px; z-index:3;
  width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(36,30,25,.62); color:#fff; padding:0;
  display:grid; place-items:center; opacity:0;
  transition:opacity .15s, background .15s, color .15s;
}
.kachel .vwherz svg{fill:none; stroke:currentColor; stroke-width:1.9}
.kachel:hover .vwherz, .kachel:focus-within .vwherz{opacity:1}
.kachel .vwherz:hover{background:var(--terra)}
.kachel .vwherz[aria-pressed="true"]{
  opacity:1; background:var(--terra); color:#fff;
}
.kachel .vwherz[aria-pressed="true"] svg{fill:currentColor; stroke:currentColor}
.kachel .vwherz.laeuft{opacity:.5; pointer-events:none}
@media (hover:none){ .kachel .vwherz{opacity:1} }
/* Hinweiszeile unter dem Hauptbild */
.vwnotiz{font:400 12.5px/1.4 var(--sans); color:var(--muted)}

/* Personen zuordnen im Vollbild. Sitzt zwischen Bild und Fusszeile, also
   im dunklen Lichtkasten - helle Schrift, zurueckhaltende Flaechen. */
.lkpersonen{
  flex:0 0 auto; padding:10px 16px 2px; display:flex; flex-direction:column;
  gap:8px; align-items:center; color:#e8e1d8;
}
.lkreihe{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; align-items:center}
.lkchip{
  font:500 13px/1 var(--sans); padding:7px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1);
  color:#fff; cursor:pointer;
}
.lkchip:hover{background:#a4462f; border-color:#a4462f}
.lkchip.dazu:hover{background:var(--salbei); border-color:var(--salbei)}
.lkchip.laeuft{opacity:.5; pointer-events:none}
.lkleer{font:400 12.5px/1 var(--sans); color:#b9b0a4}
.lkpersonen input{
  font:400 13px/1 var(--sans); padding:8px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.35);
  color:#fff; min-width:11rem;
}
.lkpersonen input::placeholder{color:#9a9086}
.lkpersonen .vwknopf{background:none; color:#e8e1d8; border-color:rgba(255,255,255,.4)}
.lkpersonen .vwknopf:hover{background:var(--salbei); color:#fff; border-color:var(--salbei)}
.lkhinw{margin:0; font:400 11.5px/1.4 var(--sans); color:#9a9086; text-align:center}
@media (max-width:560px){
  .lkpersonen{padding:8px 10px 0; gap:6px}
  .lkhinw{display:none}
}

/* Der Geldschein unter dem Dankestext - nur in der Verwaltungsansicht.
   Mittig, weil er zum ganzen Absatz gehoert und nicht zu einer Zeile davon.
   Die Bildunterschrift sagt beides: wofuer gedankt wird, und dass kein Gast
   den Schein zu sehen bekommt. */
.dwgeld{margin:18px auto 2px; width:180px; text-align:center}
.dwschein{
  display:block; width:100%; height:auto; border-radius:7px;
  box-shadow:0 2px 10px rgba(59,50,43,.16);
  transition:transform .18s ease;
}
.dwgeld:hover .dwschein{transform:scale(1.05) rotate(-1deg)}
.dwgeld figcaption{
  margin-top:8px; font:400 12px/1.4 var(--sans); color:var(--muted);
}
.dwgeld .nurihr{
  display:block; margin-top:2px; font-size:10.5px; opacity:.72;
  text-transform:uppercase; letter-spacing:.09em;
}
@media (max-width:560px){ .dwgeld{width:150px} }

/* Geschenktext bearbeiten */
.dankeswort textarea{
  width:100%; font:inherit; font-size:17px; line-height:1.6; padding:10px 12px;
  border:1px solid var(--linie); border-radius:9px; background:var(--karte);
  color:var(--ink); resize:vertical; min-height:7em;
}
.dankeswort textarea:focus{outline:2px solid var(--salbei); outline-offset:-1px}

/* Der Geldbetrag ueber dem Bearbeitungsfeld. Er erscheint NUR fuer Verwalter:
   fuer Gaeste laesst /api/ich das Feld ganz weg. Auf der fertigen Dankeskarte
   steht nie eine Zahl - der Hinweis soll allein daran erinnern, dass zum
   Sachgeschenk noch Geld kam. */
.dankeswort .geldnote{
  margin:0 0 9px; padding:7px 11px; border-radius:9px; text-align:left;
  background:var(--creme); border:1px solid var(--altrosa);
  color:#8a4a2f; font:400 13px/1.45 var(--sans);
}
.dankeswort .geldnote b{font-weight:600; font-variant-numeric:tabular-nums}
.dankeswort .geldnote .leise{color:#a4785f}