/* ─────────────────────────────────────────────────────────────
 *  Deine Videofon Stories — Designsystem „Dein Videofon"
 * ───────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('/assets/fonts/cormorant-garamond-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:300 500;
  font-display:swap; src:url('/assets/fonts/jost.woff2') format('woff2');
}

:root{
  --bg-page:#ffffff;
  --card:#ffffff;
  --warm:#f8f6f2;
  --warm2:#f2ede6;
  --text:#1e3a2a;
  --text2:#6b7c6e;
  --border:rgba(30,58,42,.12);
  --border2:rgba(30,58,42,.06);
  --gold:#c9975a;
  --gold2:#e8c49a;
  --rose:#d4867a;
  --schatten:0 2px 10px rgba(30,58,42,.06);
  --schatten-gold:0 8px 24px rgba(180,130,90,.14);
  --r-btn:10px; --r-img:13px; --r-card:18px; --r-pill:100px;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;background:var(--bg-page)}
body{
  font-family:var(--sans); font-weight:400; color:var(--text);
  background:var(--bg-page); min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input[type=file]{display:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Rahmen ── */
.band{
  background:linear-gradient(135deg,var(--gold),var(--rose));
  height:4px; width:100%; max-width:520px;
  position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:10;
}
.huelle{
  width:100%; max-width:460px; min-height:100dvh;
  display:flex; flex-direction:column; padding:0 18px;
}
.huelle--breit{max-width:520px}

.kopf{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px 0 8px}
.wortmarke{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--text2);letter-spacing:.04em}
.punkt{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--rose));flex-shrink:0}

.fuss{
  margin-top:auto;padding:24px 0 32px;text-align:center;
  font-size:11px;color:var(--text2);font-weight:300;opacity:.7;
}
.herz{display:inline-block;color:var(--rose);margin:0 3px}

/* ── Anlass ── */
.anlass{text-align:center;padding:20px 0 4px}
.anlass__typ{
  display:inline-block;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.anlass__titel{
  font-family:var(--serif);font-size:clamp(1.55rem,6vw,2.1rem);
  font-weight:600;line-height:1.2;color:var(--text);
  text-wrap:balance;margin-bottom:12px;
}
.marke{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--warm);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:5px 14px;font-size:11px;font-weight:500;color:var(--text2);
}
.zier{text-align:center;color:var(--gold2);font-size:18px;letter-spacing:.3em;margin:6px 0;user-select:none}

/* ── Karte ── */
.karte{
  background:var(--card);border-radius:var(--r-card);padding:22px 20px;margin:14px 0;
  box-shadow:var(--schatten);border:1px solid var(--border2);
}
.karte--eng{margin-top:0}
.karte--mitte{text-align:center}
.karte--hoch{margin-top:32px;text-align:center}

.einladung{font-size:15px;line-height:1.65;color:var(--text);text-wrap:balance;margin-bottom:20px}
.einladung--still{font-size:14px;color:var(--text2);font-weight:300}
.einladung--klein{font-size:13px;color:var(--text2);margin-bottom:16px}

/* ── Knöpfe ── */
.knopf{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;border:none;border-radius:var(--r-btn);
  font-size:14px;font-weight:600;padding:13px 18px;
  transition:opacity .18s,transform .12s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  text-decoration:none;letter-spacing:.01em;
}
.knopf:active{transform:scale(.97)}
.knopf:disabled{opacity:.45;pointer-events:none}
.knopf--haupt{background:linear-gradient(135deg,var(--gold),var(--rose));color:#fff;box-shadow:var(--schatten-gold)}
.knopf--haupt:hover{opacity:.88;transform:translateY(-1px)}
.knopf--rand{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.knopf--rand:hover{border-color:var(--gold);color:var(--gold)}
.knopf--leise{background:var(--warm);color:var(--text2);font-weight:500;font-size:13px;min-height:46px}
.knopf--leise:hover{background:var(--warm2);color:var(--text)}
.knopf--warnung{background:transparent;border:1.5px dashed rgba(212,134,122,.5);color:var(--rose);font-size:13px;min-height:46px}
.knopf--klein{min-height:38px;font-size:12px;padding:8px 14px;width:auto}
.stapel{display:flex;flex-direction:column;gap:10px}
.symbol{font-size:17px;line-height:1}

/* ── Trenner ── */
.trenner{
  display:flex;align-items:center;gap:12px;margin:14px 0;
  color:var(--text2);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}
.trenner::before,.trenner::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Medien ── */
.medien{
  border-radius:var(--r-img);overflow:hidden;background:var(--warm);
  margin-bottom:14px;border:1px solid var(--border2);
}
.medien video,.medien img{width:100%;display:block}
.medien audio{width:100%;padding:12px;background:var(--warm);display:block}
.medien-zeit{font-size:11px;color:var(--text2);text-align:center;margin-bottom:14px;font-weight:300}

/* ── Fortschritt ── */
.ladezustand{text-align:center;padding:8px 0}
.ladebild{font-size:2rem;margin-bottom:14px;line-height:1}
.prozent{
  font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1;margin-bottom:14px;
}
.schiene{background:var(--warm2);border-radius:var(--r-pill);height:6px;overflow:hidden;margin-bottom:10px}
.balken{height:100%;background:linear-gradient(90deg,var(--gold),var(--rose));border-radius:var(--r-pill);width:0%;transition:width .25s}
.ladetext{font-size:13px;color:var(--text2);font-weight:300}

/* ── Erfolg / Zustände ── */
.haken{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--rose));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;color:#fff;font-size:22px;
}
.gross-titel{font-family:var(--serif);font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:6px;color:var(--text)}
.klein-text{font-size:13px;color:var(--text2);text-align:center;margin-bottom:18px;font-weight:300}
.klein-text--nach{margin:14px 0 0}
.zustand-bild{text-align:center;font-size:2rem;margin-bottom:12px;line-height:1}
.zustand-titel{font-family:var(--serif);font-size:1.3rem;font-weight:600;text-align:center;margin-bottom:8px}
.zustand-text{font-size:13px;color:var(--text2);text-align:center;line-height:1.7;font-weight:300}
.zustand-text--links{text-align:left}
.hinweis-rot{font-size:13px;color:var(--rose);margin-bottom:16px;line-height:1.6}

/* ── Album ── */
.zaehler{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  margin-bottom:6px;
}
.zaehler__zahl{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
.zaehler__von{font-size:13px;color:var(--text2);font-weight:300}
.fortschritt{
  background:var(--warm2);border-radius:var(--r-pill);height:6px;
  overflow:hidden;margin:12px 0 4px;
}
.fortschritt__fuellung{height:100%;background:linear-gradient(90deg,var(--gold),var(--rose));border-radius:var(--r-pill)}

.raster{display:flex;flex-direction:column;gap:10px;margin-top:14px}

.feld{
  background:var(--card);border:1px solid var(--border2);border-radius:var(--r-card);
  box-shadow:var(--schatten);padding:14px 16px;
  display:flex;align-items:center;gap:14px;
}
.feld--offen{flex-direction:column;align-items:stretch}
.feld--leer{background:var(--warm);box-shadow:none;border-style:dashed;border-color:var(--border)}

.nummer{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--gold),var(--rose));color:#fff;
}
.nummer--leer{background:transparent;border:1.5px dashed var(--border);color:var(--text2)}

.feld__text{flex:1;min-width:0}
.feld__art{font-size:13px;font-weight:500;color:var(--text)}
.feld__zeit{font-size:11px;color:var(--text2);font-weight:300;margin-top:2px}
.feld__leer{font-size:13px;color:var(--text2);font-weight:300;font-style:italic}
.feld__reihe{display:flex;align-items:center;gap:14px;width:100%}
.feld__aktionen{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}

/* ── Formular ── */
.feldgruppe{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.beschriftung{font-size:12px;font-weight:500;color:var(--text2);letter-spacing:.02em}
.eingabe{
  width:100%;min-height:48px;padding:12px 14px;
  border:1.5px solid var(--border);border-radius:var(--r-btn);
  font-family:var(--sans);font-size:15px;color:var(--text);background:var(--card);
}
.eingabe:focus{border-color:var(--gold);outline:none}

.verborgen{display:none}

/* ── Sprachaufnahme ── */
.aufnahme{text-align:center;padding:10px 0}
.aufnahme__punkt{
  width:76px;height:76px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--rose));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:30px;
  box-shadow:var(--schatten-gold);
  animation:atmen 1.6s ease-in-out infinite;
}
@keyframes atmen{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.07);opacity:.88}
}
.aufnahme__zeit{
  font-family:var(--serif);font-size:2.4rem;font-weight:600;
  color:var(--text);font-variant-numeric:tabular-nums;
  line-height:1;margin-bottom:10px;
}
.aufnahme .ladetext{margin-bottom:18px}

/* ── Urheberzeile ── */
.fuss__urheber{display:block;margin-top:6px;opacity:.85}
.fuss a{color:var(--text2);text-decoration:none;border-bottom:1px solid var(--border)}
.fuss a:hover{color:var(--gold);border-bottom-color:var(--gold)}