:root {
  /* Farbwelt: Navy/Silber auf warmem Papier (abgestimmte Markenidentitaet) */
  --tinte:#232d44;          /* Fliesstext */
  --tinte-weich:#515b71;    /* Sekundaertext, >=4.5:1 auf Papier */
  --leise:#565f73;          /* Marke, Platzhalter (>=4.5:1 auf Papier) */
  --grau:#515b71;           /* Alt-Alias (admin.js nutzt var(--grau)) */
  --linie:#e0dbcd;          /* Trennlinien auf Papier */
  --linie-stark:#c9c2b0;
  --akzent:#2c3a58;         /* Navy */
  --akzent-hell:#3a4c72;
  --akzent-tint:#e9edf4;    /* heller Navy-Schleier fuer Auswahl */
  --papier:#f3efe6;
  --karte:#fffdf9;
  --gut:#2f7d43;
  --fehler:#9a2f2f;
  --ring: 0 0 0 3px rgba(44,58,88,.28);   /* Fokusring */
  --schatten-karte: 0 1px 2px rgba(35,45,68,.05), 0 12px 32px -12px rgba(35,45,68,.16);
  --schatten-cover: 0 2px 6px rgba(35,45,68,.14), 0 16px 30px -14px rgba(35,45,68,.42);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --e-out: cubic-bezier(.22,1,.36,1);
}

* { box-sizing:border-box; }

body {
  margin:0;
  color:var(--tinte);
  font:16px/1.6 var(--serif);
  background:
    radial-gradient(1200px 520px at 50% -8%, #fbf9f3, transparent 70%),
    radial-gradient(720px 480px at 108% 6%, rgba(44,58,88,.05), transparent 60%),
    var(--papier);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap { max-width:600px; margin:0 auto; padding:34px 20px 72px; }

/* ---- Kopf: Marke, Cover des Hefts, Anrede ---- */
.kopf { text-align:center; margin-bottom:26px; }
.marke {
  display:flex; justify-content:center; align-items:center; gap:9px;
  font:600 11px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--leise); margin:0 0 6px;
}
.marke svg.logo { display:block; width:22px; height:22px; }

.cover-rahmen {
  display:block; width:fit-content; line-height:0; margin:0 auto 20px;
  border-radius:7px; padding:5px; background:var(--karte);
  border:1px solid var(--linie-stark);
  box-shadow:var(--schatten-cover);
  transform:rotate(-1.4deg);
}
.cover-rahmen img {
  display:block; width:118px; height:auto; border-radius:3px;
}

.gruss { color:var(--tinte-weich); font-size:15px; margin:0 0 3px; }
h1 { font-size:27px; font-weight:normal; letter-spacing:-.01em; margin:0; text-wrap:balance; }
.kopf .sub { font:13px/1.5 var(--sans); color:var(--tinte-weich); margin:9px 0 0; }

/* ---- Karte ---- */
.karte {
  background:var(--karte); border:1px solid var(--linie); border-radius:14px;
  padding:26px 24px; box-shadow:var(--schatten-karte);
  animation:auf .5s var(--e-out) both;
}
@keyframes auf { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ---- Fragen ---- */
.frage { margin-bottom:24px; }
.frage:last-of-type { margin-bottom:8px; }
.frage p { margin:0 0 12px; font-size:16.5px; }
.nr { font:600 14px/1 var(--sans); color:var(--akzent); margin-right:8px; }

.optionen { display:flex; flex-wrap:wrap; gap:8px; }
.opt {
  font:500 13.5px/1.35 var(--sans);
  padding:9px 14px; border:1px solid var(--linie-stark); border-radius:9px;
  background:#fff; color:var(--tinte); cursor:pointer;
  transition:border-color .16s var(--e-out), background .16s var(--e-out),
             color .16s var(--e-out), box-shadow .16s var(--e-out), transform .08s var(--e-out);
}
.opt:hover { border-color:var(--akzent-hell); background:var(--akzent-tint); }
.opt:focus-visible { outline:none; box-shadow:var(--ring); }
.opt:active { transform:translateY(1px); }
.opt.aktiv {
  border-color:var(--akzent); background:var(--akzent); color:#fff;
  box-shadow:0 6px 14px -6px rgba(44,58,88,.6);
}

/* ---- Freitext ---- */
textarea {
  width:100%; font:15px/1.55 var(--serif); color:var(--tinte);
  padding:12px 13px; border:1px solid var(--linie-stark); border-radius:10px;
  background:#fff; resize:vertical; min-height:84px;
  transition:border-color .16s var(--e-out), box-shadow .16s var(--e-out);
}
textarea:focus { outline:none; border-color:var(--akzent); box-shadow:var(--ring); }
textarea::placeholder { color:var(--leise); }

/* ---- Aktion ---- */
.aktion {
  display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--linie); padding-top:20px; margin-top:22px;
}
button.senden {
  font:600 15px/1 var(--sans); color:#fff; border:none; cursor:pointer;
  background:var(--akzent); padding:12px 22px; border-radius:10px;
  box-shadow:0 8px 18px -8px rgba(44,58,88,.7);
  transition:filter .16s var(--e-out), transform .08s var(--e-out), box-shadow .16s var(--e-out);
}
button.senden:hover { filter:brightness(1.1); }
button.senden:focus-visible { outline:none; box-shadow:var(--ring), 0 8px 18px -8px rgba(44,58,88,.7); }
button.senden:active { transform:translateY(1px); }
button.senden[disabled] { opacity:.5; cursor:default; box-shadow:none; filter:none; }
.hinweis { font:13px var(--sans); color:var(--tinte-weich); }
.fehler { color:var(--fehler); font:14px var(--sans); margin:12px 0 0; }

/* ---- Zentrale Meldungen (Laden / ungueltig) ---- */
.mittig { text-align:center; padding:56px 16px; color:var(--tinte-weich); font-size:17px; }

/* ---- Abschluss-Screen (nach dem Absenden) ---- */
.danke { text-align:center; padding:52px 18px 46px; animation:auf .5s var(--e-out) both; }
.danke-stern { display:block; width:78px; height:78px; margin:0 auto 12px; }
.danke .danke-marke { margin-bottom:22px; }
.danke h1 { font-size:26px; margin:0 0 12px; }
.danke .danke-text { font:15px/1.6 var(--serif); color:var(--tinte-weich);
  max-width:38ch; margin:0 auto 26px; }
@media (prefers-reduced-motion: reduce) { .danke { animation:none; } }

/* ---- Auswertung (admin): Balken ---- */
.chart-kopf { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.chart-titel { color:var(--tinte); }
.chart-meta { font:12px var(--sans); color:var(--tinte-weich); }
.bar-row { display:flex; align-items:center; gap:10px; margin:6px 0; font:13px var(--sans); }
.bar-label { width:118px; flex:none; text-align:right; color:var(--tinte-weich); }
.bar-track { flex:1; height:16px; background:#e7e2d5; border-radius:8px; overflow:hidden; }
.bar-fill { height:100%; background:var(--akzent); border-radius:8px; min-width:2px; }
.bar-fill.gut { background:var(--gut); }
.bar-val { width:70px; flex:none; color:var(--tinte); }

/* ---- Empfangsbereich (Portal): Logo, Begruessung, Widmung, Datum, Fusszeile ---- */
.empfang { max-width:520px; margin:0 auto 6px; padding:0 12px; text-align:center; }
.empfang-marke {
  display:flex; justify-content:center; align-items:center; gap:12px;
  font:600 15px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--leise); margin:0 0 18px;
}
.empfang-marke svg.logo { display:block; width:46px; height:46px; }
.empfang-gruss { font:normal 26px/1.35 var(--serif); color:var(--tinte); margin:0 0 8px; text-wrap:balance; }
.empfang-leise { font:13.5px/1.5 var(--sans); color:var(--tinte-weich); margin:0; }
.empfang-widmung { font:italic 16.5px/1.6 var(--serif); color:var(--tinte-weich); margin:20px 0 0; }
.empfang-datum { font:12px var(--sans); color:var(--leise); margin:12px 0 0; }

.empfang-fuss { text-align:center; margin:30px 0 4px; }
.empfang-fuss a { font:12px var(--sans); color:var(--leise); text-decoration:none; letter-spacing:.02em; }
.empfang-fuss a:hover { text-decoration:underline; }

@media (max-width:420px) {
  .wrap { padding:26px 15px 60px; }
  h1 { font-size:24px; }
  .karte { padding:22px 17px; }
  .empfang-gruss { font-size:22px; }
}

@media (prefers-reduced-motion: reduce) {
  .karte { animation:none; }
  * { transition-duration:.01ms !important; }
}