/* =========================================================================
   Kinhold – Gestaltung
   Farben aus docs/OPTIK.md. Bausteine: Steintafel, Goldknopf, Pergament,
   Rahmen (Eisen/Holz), obere Leiste, untere Leiste, Platzhalter.
   ========================================================================= */

/* ---------- Schriften (lokal) ---------- */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-400-900-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Farben und Maße ---------- */
:root {
  --nacht: #0d1220;          /* Hintergrund tief */
  --flaeche: #1a2133;        /* Fläche */
  --flaeche-hoch: #252d42;   /* Fläche erhöht */
  --gold: #d4a24c;           /* Akzent Gold (Kerzenlicht) */
  --gold-hell: #f0c97a;      /* Akzent Gold hell */
  --gold-dunkel: #8a6224;
  --magie: #4fd1c5;          /* Magie-Leuchten */
  --violett: #6b4fa0;        /* Schatten */
  --text: #ece6d6;           /* Text hell */
  --text-gedaempft: #a39d8f; /* Text gedämpft */
  --glut: #b3372b;           /* Gefahr / Drachenangriff */
  --tinte: #2b1d0e;          /* Schrift auf Pergament */

  --schrift-titel: "Cinzel", "Trajan Pro", Georgia, serif;
  --schrift-text: "Spectral", Georgia, "Times New Roman", serif;

  --streifen: 480px;
  --abstand: 16px;
  --leiste-oben: 64px;
  --leiste-unten: 72px;

  --tex-stein: url("../img/texturen/stein.webp");
  --tex-holz: url("../img/texturen/holz.webp");
  --tex-eisen: url("../img/texturen/eisen.webp");
  --tex-pergament: url("../img/texturen/pergament.webp");

  color-scheme: dark;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(107, 79, 160, .16), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(212, 162, 76, .08), transparent 55%),
    var(--nacht);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-hell); }
h1, h2, h3 {
  font-family: var(--schrift-titel);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: 1.7rem; text-shadow: 0 0 18px rgba(212, 162, 76, .35), 0 2px 2px #000; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
.gedaempft { color: var(--text-gedaempft); }
.mitte { text-align: center; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Handy-Streifen ---------- */
.app {
  position: relative;
  max-width: var(--streifen);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--nacht);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 520px) {
  body {
    background:
      linear-gradient(rgba(5, 7, 13, .9), rgba(5, 7, 13, .94)),
      var(--tex-stein) center / 380px,
      #06080f;
  }
  .app {
    box-shadow: 0 0 0 1px rgba(212, 162, 76, .22), 0 0 0 6px #05070c, 0 0 0 7px rgba(212, 162, 76, .12), 0 0 90px rgba(0, 0, 0, .9);
  }
}

.inhalt {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--abstand);
  z-index: 1;
  animation: einblenden .35s ease-out both;
}
.inhalt.randlos { padding: 0; }
.ohne-leisten .inhalt { padding-top: calc(var(--abstand) + env(safe-area-inset-top)); padding-bottom: calc(var(--abstand) + env(safe-area-inset-bottom)); }

@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Nebel (dezent) ---------- */
.nebel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  opacity: .5;
}
.nebel::before, .nebel::after {
  content: "";
  position: absolute;
  inset: -30% -60%;
  background:
    radial-gradient(ellipse 40% 18% at 30% 70%, rgba(150, 170, 200, .10), transparent 70%),
    radial-gradient(ellipse 35% 14% at 70% 85%, rgba(79, 209, 197, .06), transparent 70%),
    radial-gradient(ellipse 45% 16% at 50% 95%, rgba(170, 160, 200, .08), transparent 70%);
  animation: nebelZieht 38s ease-in-out infinite alternate;
}
.nebel::after { animation-duration: 55s; animation-direction: alternate-reverse; transform: scaleX(-1); opacity: .7; }
@keyframes nebelZieht { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

/* ---------- Obere Leiste ---------- */
.leiste-oben {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(var(--leiste-oben) + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) var(--abstand) 8px;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, .55), rgba(10, 8, 6, .82)),
    var(--tex-holz) center / 260px,
    #2a1d12;
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(212, 162, 76, .45), 0 4px 14px rgba(0, 0, 0, .7);
}
.leiste-oben::after {
  /* Goldener Zierstreifen mit Raute in der Mitte */
  content: "";
  position: absolute;
  left: 50%; bottom: -5px;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hell), var(--gold-dunkel));
  box-shadow: 0 0 8px rgba(212, 162, 76, .6);
}
.portraet {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #1a120a, 0 0 12px rgba(212, 162, 76, .4);
}
.portraet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.portraet .platzhalter { width: 100%; height: 100%; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.1rem; }
.leiste-oben .wer { flex: 1; min-width: 0; text-decoration: none; display: flex; align-items: center; gap: 12px; color: inherit; }
.leiste-oben .wer-name {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-hell);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}
.leiste-oben .wer-rolle { display: block; font-size: .78rem; color: var(--text-gedaempft); line-height: 1.1; }
.kronen {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .5), inset 0 2px 6px rgba(0, 0, 0, .6);
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--gold-hell);
}
.kronen svg { width: 22px; height: 22px; color: var(--gold); filter: drop-shadow(0 0 4px rgba(212, 162, 76, .6)); }

/* ---------- Untere Leiste ---------- */
.leiste-unten {
  position: relative;
  z-index: 5;
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(14, 16, 22, .7), rgba(6, 7, 10, .9)),
    var(--tex-eisen) center / 240px,
    #1b1e25;
  border-top: 1px solid #000;
  box-shadow: 0 -1px 0 rgba(212, 162, 76, .45), 0 -6px 16px rgba(0, 0, 0, .6);
}
.leiste-unten a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 56px;
  text-decoration: none;
  color: var(--text-gedaempft);
  font-family: var(--schrift-titel);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  transition: color .2s;
}
.leiste-unten svg { width: 26px; height: 26px; transition: transform .2s, filter .2s; }
.leiste-unten a:active svg { transform: scale(.9); }
.leiste-unten a.aktiv { color: var(--gold-hell); }
.leiste-unten a.aktiv svg { filter: drop-shadow(0 0 6px rgba(240, 201, 122, .7)); }
.leiste-unten a.aktiv::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: 34px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-hell), transparent);
  box-shadow: 0 0 10px var(--gold);
}

/* ---------- Steintafel ---------- */
.tafel {
  position: relative;
  padding: 18px;
  margin-bottom: 16px;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .05), transparent 70%),
    linear-gradient(180deg, rgba(26, 33, 51, .72), rgba(10, 12, 20, .86)),
    var(--tex-stein) center / 300px,
    var(--flaeche);
  border: 1px solid #05070c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -3px 8px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(212, 162, 76, .18),
    0 8px 18px rgba(0, 0, 0, .55);
}
.tafel::before {
  /* eingemeißelte Innenlinie */
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 3px;
  border: 1px solid rgba(212, 162, 76, .16);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .5);
  pointer-events: none;
}
.tafel > * { position: relative; }
.tafel-titel {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--schrift-titel);
  color: var(--gold);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.tafel-titel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212, 162, 76, .5), transparent); }

/* ---------- Goldknopf ---------- */
.goldknopf, .steinknopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 5px;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s, filter .2s, box-shadow .2s;
  -webkit-user-select: none; user-select: none;
}
.goldknopf {
  color: #2a1906;
  border: 1px solid #5c3d10;
  background: linear-gradient(180deg, #f8dc98 0%, #e2b45c 38%, #c48f3a 62%, #9c6a24 100%);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -2px 0 rgba(70, 40, 5, .35),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 5px 14px rgba(0, 0, 0, .55),
    0 0 18px rgba(212, 162, 76, .22);
}
.goldknopf::after {
  /* Goldglanz, der ab und zu über den Knopf läuft */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: goldglanz 7s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@keyframes goldglanz { 0%, 82% { left: -60%; } 96%, 100% { left: 130%; } }
.goldknopf:hover { filter: brightness(1.07); }
.goldknopf:active, .steinknopf:active { transform: translateY(1px) scale(.985); }
.goldknopf:disabled { filter: grayscale(.7) brightness(.65); cursor: default; }
.goldknopf:disabled::after { display: none; }
.steinknopf {
  color: var(--gold-hell);
  border: 1px solid #05070c;
  background: linear-gradient(180deg, rgba(37, 45, 66, .85), rgba(18, 22, 34, .95)), var(--tex-stein) center / 240px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(212, 162, 76, .3), 0 4px 10px rgba(0, 0, 0, .5);
}
.steinknopf.gefahr { color: #f0a59c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(179, 55, 43, .55), 0 4px 10px rgba(0, 0, 0, .5); }
.breit { display: flex; width: 100%; }
.knopfreihe { display: grid; gap: 12px; margin-top: 8px; }

/* ---------- Pergament-Fenster ---------- */
.pergament {
  position: relative;
  padding: 22px 20px;
  margin-bottom: 16px;
  color: var(--tinte);
  /* Die Textur ist dunkel gemalt: mit warmem Pergament-Ton gemischt bleibt nur ihre Struktur */
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 244, 214, .35), transparent 75%),
    var(--tex-pergament) center / 420px,
    #d6bf8f;
  background-blend-mode: normal, overlay, normal;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(90, 60, 20, .35),
    inset 0 0 38px rgba(92, 56, 18, .55),
    0 12px 28px rgba(0, 0, 0, .65);
}
.pergament::before, .pergament::after {
  /* aufgerollte Kanten oben und unten */
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #a4865a, #e2cfa5 45%, #8c6d42);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}
.pergament::before { top: -6px; }
.pergament::after { bottom: -6px; }
.pergament h1, .pergament h2, .pergament h3 { color: #5b2410; text-shadow: none; }
.pergament .gedaempft { color: #6b5536; }
.pergament a { color: #7a2e12; }

/* ---------- Rahmen mit Textur ---------- */
.rahmen, .rahmen-holz {
  position: relative;
  display: block;
  padding: 6px;
  border-radius: 8px;
  background: var(--tex-eisen) center / 200px, #2b2f37;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(0, 0, 0, .6),
    0 0 0 1px #000,
    0 6px 16px rgba(0, 0, 0, .6);
}
.rahmen-holz { background: var(--tex-holz) center / 220px, #3a2817; }
.rahmen::before, .rahmen-holz::before {
  /* Goldnieten in den Ecken */
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at 5px 5px, var(--gold-hell) 0 1.5px, var(--gold-dunkel) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 5px) 5px, var(--gold-hell) 0 1.5px, var(--gold-dunkel) 2.5px, transparent 3.5px),
    radial-gradient(circle at 5px calc(100% - 5px), var(--gold-hell) 0 1.5px, var(--gold-dunkel) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--gold-hell) 0 1.5px, var(--gold-dunkel) 2.5px, transparent 3.5px);
}
.rahmen > .innen, .rahmen-holz > .innen {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--nacht);
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .45), inset 0 0 14px rgba(0, 0, 0, .8);
}

/* ---------- Platzhalter für fehlende Bilder ---------- */
.platzhalter {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 60px;
  aspect-ratio: var(--platzhalter-format, 1);
  padding: 10%;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(212, 162, 76, .12), transparent 65%),
    linear-gradient(160deg, var(--flaeche-hoch), var(--nacht));
  border: 1px solid var(--gold-dunkel);
  box-shadow: inset 0 0 0 3px var(--nacht), inset 0 0 0 4px rgba(212, 162, 76, .5), inset 0 0 24px rgba(0, 0, 0, .7);
  border-radius: 4px;
  color: var(--gold);
  font-family: var(--schrift-titel);
  font-weight: 700;
  letter-spacing: .06em;
}

/* ---------- Formulare ---------- */
.feld { display: block; margin-bottom: 16px; }
.feld > span, .feld-titel {
  display: block;
  margin-bottom: 6px;
  font-family: var(--schrift-titel);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
}
.pergament .feld > span { color: #5b2410; }
input[type="text"], input[type="password"], input[type="number"], input[type="time"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(212, 162, 76, .35);
  border-radius: 5px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus {
  border-color: var(--gold-hell);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 3px rgba(212, 162, 76, .25), 0 0 14px rgba(212, 162, 76, .25);
}
.pergament input[type="text"], .pergament input[type="password"], .pergament select {
  color: var(--tinte);
  background: rgba(255, 250, 235, .55);
  border-color: rgba(91, 36, 16, .4);
  box-shadow: inset 0 2px 4px rgba(90, 60, 20, .25);
}
.pergament input:focus { border-color: #7a2e12; box-shadow: 0 0 0 3px rgba(122, 46, 18, .2); }
select { background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.mit-einheit { display: flex; align-items: center; gap: 10px; }
.mit-einheit input { flex: 1; }
.mit-einheit .einheit { flex: none; min-width: 64px; color: var(--text-gedaempft); font-size: .9rem; }
.passwort-feld { position: relative; }
.passwort-feld input { padding-right: 56px; }
.passwort-feld button {
  position: absolute; right: 2px; top: 2px; bottom: 2px; width: 50px;
  border: 0; background: none; color: var(--gold); cursor: pointer;
}
.pergament .passwort-feld button { color: #7a2e12; }
.passwort-feld button svg { width: 22px; height: 22px; margin: auto; }
.haken { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.haken input { width: 22px; height: 22px; accent-color: var(--gold); }
.fehler-text { display: block; margin-top: 6px; color: #ff9d8f; font-size: .9rem; }
.pergament .fehler-text { color: #9b1c0c; font-weight: 600; }
.feld.hat-fehler input { border-color: var(--glut); }

/* ---------- Meldungen ---------- */
.meldung {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(79, 209, 197, .12), rgba(79, 209, 197, .05));
  box-shadow: inset 0 0 0 1px rgba(79, 209, 197, .4);
  color: #c9f3ee;
  animation: einblenden .4s ease-out both;
}
.meldung.fehler { background: rgba(179, 55, 43, .15); box-shadow: inset 0 0 0 1px rgba(179, 55, 43, .6); color: #ffc4bb; }

/* ---------- Kopf auf Start-Seiten (Anmelden, Gründen) ---------- */
.wappenkopf { text-align: center; margin: 8px 0 22px; }
.wappenkopf .siegel { width: 54%; max-width: 220px; margin: 0 auto 6px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(212, 162, 76, .25)); animation: schweben 6s ease-in-out infinite; }
.wappenkopf .siegel.platzhalter { aspect-ratio: 1; }
/* Familienwappen als Logo: sanfter goldener Schein dahinter, Spruch im Code auf dem Band */
.wappen { position: relative; width: 66%; max-width: 290px; margin: 0 auto 4px; animation: schweben 6s ease-in-out infinite; }
.wappen-bild { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .75)); }
.wappen .platzhalter { position: relative; z-index: 1; aspect-ratio: 3 / 4; }
.wappen-schein {
  position: absolute; z-index: 0; left: 50%; top: 42%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240, 201, 122, .32) 0%, rgba(212, 162, 76, .14) 38%, transparent 68%);
  animation: wappenSchein 7s ease-in-out infinite;
}
@keyframes wappenSchein { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.wappen-band { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wappen-band text {
  font-family: var(--schrift-titel); font-weight: 700; letter-spacing: .06em;
  fill: #4a3412; paint-order: stroke; stroke: rgba(255, 236, 190, .35); stroke-width: .6px;
}
@media (prefers-reduced-motion: reduce) {
  .wappen, .wappen-schein { animation: none; }
}
.wappenkopf h1 { font-size: 2.3rem; margin-bottom: 2px; letter-spacing: .14em; animation: kerzenlicht 5s ease-in-out infinite; }
.wappenspruch { font-family: var(--schrift-titel); font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-gedaempft); }
.wappenspruch::before, .wappenspruch::after { content: "◆"; font-size: .55em; color: var(--gold-dunkel); margin: 0 .8em; vertical-align: middle; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kerzenlicht {
  0%, 100% { text-shadow: 0 0 18px rgba(212, 162, 76, .35), 0 2px 2px #000; }
  42% { text-shadow: 0 0 24px rgba(240, 201, 122, .5), 0 2px 2px #000; }
  48% { text-shadow: 0 0 14px rgba(212, 162, 76, .28), 0 2px 2px #000; }
  55% { text-shadow: 0 0 22px rgba(240, 201, 122, .45), 0 2px 2px #000; }
}

/* ---------- Seitenkopf ---------- */
.seitenkopf { text-align: center; margin: 6px 0 18px; }
.seitenkopf h1 { margin-bottom: 4px; }
.zierlinie { display: flex; align-items: center; gap: 10px; color: var(--gold-dunkel); margin: 8px auto 0; max-width: 260px; }
.zierlinie::before, .zierlinie::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dunkel)); }
.zierlinie::after { transform: scaleX(-1); }
.zierlinie span { font-size: .6rem; }

/* ---------- Burg ---------- */
.burg {
  position: relative;
  height: 100%;
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.burg-unschaerfe {
  position: absolute; inset: -20px;
  background-size: cover; background-position: center;
  filter: blur(18px) brightness(.45) saturate(.8);
  transform: scale(1.1);
}
.burg-buehne {
  position: relative;
  width: min(100cqw, calc(100cqh * 768 / 1376));
  aspect-ratio: 768 / 1376;
  box-shadow: 0 0 40px rgba(0, 0, 0, .8);
}
.burg-hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.burg-hintergrund.platzhalter { aspect-ratio: auto; height: 100%; align-items: flex-start; padding-top: 20%; }
.gebaeude {
  position: absolute;
  transform: translate(-50%, -100%);
  display: block;
  text-decoration: none;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .65));
  transition: filter .25s, transform .15s;
  z-index: 2;
}
.gebaeude img { width: 100%; }
.gebaeude .platzhalter { aspect-ratio: 1; font-size: .6rem; }
.gebaeude:hover, .gebaeude:focus-visible { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .65)) drop-shadow(0 0 10px rgba(240, 201, 122, .55)); outline: none; }
.gebaeude:active { transform: translate(-50%, -100%) scale(.96); }
.namensschild {
  position: absolute;
  left: 50%; bottom: 2%;
  transform: translateX(-50%);
  padding: 3px 10px 4px;
  white-space: nowrap;
  font-family: var(--schrift-titel);
  font-size: clamp(.58rem, 2.6cqw, .78rem);
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--gold-hell);
  background: linear-gradient(180deg, rgba(30, 22, 14, .95), rgba(12, 9, 6, .95));
  border: 1px solid var(--gold-dunkel);
  border-radius: 3px;
  box-shadow: 0 0 0 1px #000, 0 3px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 220, 150, .2);
  text-shadow: 0 1px 1px #000;
}
.gluehwuermchen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gluehwuermchen i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #bff7f0;
  box-shadow: 0 0 6px 2px rgba(79, 209, 197, .7);
  opacity: 0;
  animation: gluehen 9s ease-in-out infinite;
}
@keyframes gluehen {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: .9; }
  60% { opacity: .5; transform: translate(14px, -26px); }
  100% { opacity: 0; transform: translate(-6px, -48px); }
}

/* ---------- Bald-Seite ---------- */
.bald { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.bald-bild { width: auto; max-width: 72%; max-height: 38vh; max-height: 38dvh; object-fit: contain; margin: 0 auto 4px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 30px rgba(107, 79, 160, .35)); }
.bald-bild.platzhalter { aspect-ratio: 1; }
.bald-symbol { width: 110px; height: 110px; margin: 10px auto 18px; color: var(--gold); filter: drop-shadow(0 0 14px rgba(212, 162, 76, .45)); }
.bald .pergament { width: 100%; margin-top: 14px; }

/* ---------- Figurenwahl ---------- */
.figuren { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.figur { position: relative; display: block; cursor: pointer; }
.figur.gross { grid-column: span 2; }
.figur input { position: absolute; opacity: 0; pointer-events: none; }
.figur .innen { aspect-ratio: 3 / 4; }
.figur.gross .innen { aspect-ratio: 4 / 3; }
.figur img, .figur .platzhalter { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.figur .figur-name {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  padding: 26px 6px 8px;
  text-align: center;
  font-family: var(--schrift-titel);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold-hell);
  background: linear-gradient(180deg, transparent, rgba(5, 7, 12, .92) 55%);
  border-radius: 0 0 4px 4px;
  text-shadow: 0 1px 2px #000;
  z-index: 1;
}
.figur .rahmen { transition: transform .2s, box-shadow .25s; }
.figur:active .rahmen { transform: scale(.98); }
.figur input:checked + .rahmen {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 0 2px var(--gold-hell), 0 0 24px rgba(240, 201, 122, .55), 0 6px 16px rgba(0, 0, 0, .6);
}
.figur input:focus-visible + .rahmen { outline: 2px solid var(--magie); outline-offset: 3px; }
.figur .gewaehlt-marke {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbe3a6, var(--gold) 55%, var(--gold-dunkel));
  color: #2a1906;
  box-shadow: 0 0 0 2px #1a120a, 0 0 14px rgba(240, 201, 122, .8);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.figur .gewaehlt-marke svg { width: 18px; height: 18px; }
.figur input:checked ~ .gewaehlt-marke { transform: scale(1); }
.wahl-leiste, .speichern-leiste {
  position: sticky;
  bottom: calc(-1 * var(--abstand));
  z-index: 6;
  margin: 8px calc(-1 * var(--abstand)) calc(-1 * var(--abstand));
  padding: 22px var(--abstand) var(--abstand);
  background: linear-gradient(180deg, transparent, rgba(8, 10, 18, .94) 40%);
}
.ohne-leisten .wahl-leiste { padding-bottom: calc(var(--abstand) + env(safe-area-inset-bottom)); margin-bottom: calc(-1 * (var(--abstand) + env(safe-area-inset-bottom))); bottom: calc(-1 * (var(--abstand) + env(safe-area-inset-bottom))); }

/* ---------- Ich ---------- */
.ich-kopf { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 18px; }
.ich-kopf .rahmen { width: 60%; max-width: 230px; }
.ich-kopf .innen { aspect-ratio: 3 / 4; }
.ich-kopf img, .ich-kopf .platzhalter { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ich-kopf h1 { margin: 14px 0 0; }

/* ---------- Einstellungen ---------- */
.reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.reiter a {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px;
  border-radius: 5px;
  text-decoration: none;
  font-family: var(--schrift-titel);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-gedaempft);
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .2);
}
.reiter a.aktiv { color: #2a1906; background: linear-gradient(180deg, #f2d189, var(--gold)); box-shadow: 0 0 14px rgba(212, 162, 76, .3); }
.einstellung { padding: 12px 0; border-top: 1px solid rgba(212, 162, 76, .12); }
.einstellung:first-of-type { border-top: 0; padding-top: 0; }
.einstellung .feld { margin-bottom: 0; }
.einstellung .hilfe { display: block; font-size: .85rem; color: var(--text-gedaempft); margin: -2px 0 8px; line-height: 1.35; }

/* ---------- Familie ---------- */
.mitglied { display: flex; gap: 14px; align-items: center; }
.mitglied .portraet { width: 56px; height: 56px; }
.mitglied-info { flex: 1; min-width: 0; }
.mitglied-name { font-family: var(--schrift-titel); font-weight: 700; color: var(--gold-hell); font-size: 1.08rem; }
.abzeichen {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-family: var(--schrift-titel);
  letter-spacing: .05em;
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .45);
}
.abzeichen.inaktiv { color: var(--text-gedaempft); box-shadow: inset 0 0 0 1px rgba(163, 157, 143, .4); font-style: italic; font-family: var(--schrift-text); }
.tafel.inaktiv { opacity: .78; }
.tafel.inaktiv .portraet { filter: grayscale(1) brightness(.7); }
details.aufklapp { margin-top: 12px; }
details.aufklapp summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  font-family: var(--schrift-titel);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .25);
}
details.aufklapp summary::-webkit-details-marker { display: none; }
details.aufklapp[open] summary { margin-bottom: 14px; }
details.aufklapp form + form { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(212, 162, 76, .15); }

/* ---------- Gründen ---------- */
.gruenden-zeile { padding: 14px 0; border-top: 1px dashed rgba(91, 36, 16, .3); }
.gruenden-zeile:first-of-type { border-top: 0; padding-top: 0; }
.gruenden-zeile .zeilen-titel { font-family: var(--schrift-titel); font-weight: 700; color: #5b2410; margin-bottom: 8px; letter-spacing: .05em; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zwei-spalten .feld { margin-bottom: 0; }

/* ---------- Bilder prüfen ---------- */
.pruef-hintergrund { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pruef-hintergrund button { flex: 1; min-height: 44px; font-family: var(--schrift-titel); font-weight: 700; color: var(--gold); background: rgba(0, 0, 0, .4); border: 1px solid rgba(212, 162, 76, .35); border-radius: 5px; cursor: pointer; }
.pruef-hintergrund button.aktiv { background: var(--gold); color: #2a1906; }
.pruef-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.pruef-raster figure { margin: 0; padding: 10px; border-radius: 6px; background: var(--pruef-bg, #0d1220); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .25); }
.pruef-raster img { margin: 0 auto; max-height: 170px; object-fit: contain; }
.pruef-raster figcaption { text-align: center; font-size: .8rem; margin-top: 6px; color: var(--text-gedaempft); }
.pruef-dunkel { --pruef-bg: #0d1220; }
.pruef-hell { --pruef-bg: #ece6d6; }
.pruef-weiss { --pruef-bg: #ffffff; }
.pruef-kariert { --pruef-bg: repeating-conic-gradient(#888 0 25%, #bbb 0 50%) 0 0 / 20px 20px; }
.pruef-burg { --pruef-bg: url("../img/hintergruende/burg-hochkant.webp") center / cover; }

/* =========================================================================
   Etappe 2 – Aufgaben
   ========================================================================= */

textarea { min-height: 70px; resize: vertical; line-height: 1.4; }
.hilfe { display: block; font-size: .85rem; color: var(--text-gedaempft); margin-top: 6px; line-height: 1.35; }

/* ---------- Abschnitte ---------- */
.abschnitt { margin: 4px 0 24px; }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.abschnitt-kopf h2 { margin: 0; font-size: 1.15rem; }
.abschnitt-hilfe { font-size: .9rem; color: var(--text-gedaempft); margin: -4px 0 12px; }
.leer { color: var(--text-gedaempft); font-style: italic; text-align: center; padding: 8px 0; margin: 0 0 8px; }
.leer.gold { color: var(--gold-hell); font-style: normal; font-family: var(--schrift-titel); letter-spacing: .04em; }
.zaehler {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #2a1906;
  font-family: var(--schrift-titel); font-weight: 700; font-size: .85rem;
  box-shadow: 0 0 10px rgba(212, 162, 76, .35);
}
.tag-titel { font-size: .95rem; color: var(--gold-hell); margin: 18px 0 8px; letter-spacing: .06em; }
h2.mit-bild { display: flex; align-items: center; gap: 10px; }
.portraet.mini { width: 32px; height: 32px; }
.gross-portraet { width: 84px; height: 84px; margin: 0 auto 10px; display: block; }

/* Fortschritt „2 von 5“ */
.fortschritt { display: flex; align-items: center; gap: 8px; font-family: var(--schrift-titel); font-size: .82rem; color: var(--gold-hell); }
.fortschritt-balken { width: 76px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .35); overflow: hidden; }
.fortschritt-balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dunkel), var(--gold-hell)); box-shadow: 0 0 8px var(--gold); transition: width .6s ease-out; }

/* ---------- Aufgabe als Steintafel ---------- */
.aufgabe.tafel { padding: 12px 14px; margin-bottom: 10px; }
.aufgabe.tafel::before { inset: 4px; }
.aufgabe-zeile { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe-titel {
  margin: 0 0 3px;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--text);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.aufgabe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .82rem; color: var(--text-gedaempft); }
.aufgabe-status { margin-top: 3px; font-size: .86rem; color: var(--gold-hell); }
.status-wartet .aufgabe-status { color: #9be9e1; }
.aufgabe-grund { margin-top: 4px; font-style: italic; font-size: .92rem; color: #f2b8a6; }
.aufgabe-aktion { flex: none; }
.marke { display: inline-flex; align-items: center; gap: 4px; }
.marke.auftrag { color: var(--gold-hell); font-family: var(--schrift-titel); font-weight: 700; font-size: .75rem; letter-spacing: .06em; }
.marke.auftrag svg { width: 15px; height: 15px; color: var(--gold); }
.marke.groesse i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 4px rgba(212, 162, 76, .6); margin-right: 1px; }
.marke.groesse i:last-of-type { margin-right: 4px; }
.groesse-klein i:nth-of-type(n+2), .groesse-mittel i:nth-of-type(3) { background: rgba(212, 162, 76, .2); box-shadow: none; }
.aufgabe-wer::before { content: "· "; }
.aufgabe.tafel > .aufgabe-detail { position: static; }

.aufgabe.ist-auftrag { box-shadow: inset 3px 0 0 var(--gold), inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(212, 162, 76, .3), 0 8px 18px rgba(0, 0, 0, .55); }
.aufgabe.ueberfaellig { box-shadow: inset 3px 0 0 var(--glut), 0 0 0 1px rgba(179, 55, 43, .6), 0 0 16px rgba(179, 55, 43, .25), 0 8px 18px rgba(0, 0, 0, .55); }
.aufgabe.ueberfaellig .wann { color: #ff9d8f; font-weight: 600; }
.aufgabe.status-erledigt .aufgabe-titel, .aufgabe.status-bestaetigt .aufgabe-titel { color: var(--text-gedaempft); }
.aufgabe.pausiert { opacity: .55; filter: grayscale(.6); }

/* Das Siegel zum Abhaken */
.siegel-knopf {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border: 0; padding: 0;
  border-radius: 50%;
  color: rgba(240, 201, 122, .35);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .12), transparent 55%),
    radial-gradient(circle, #1d2436 0 58%, #0b0f19 100%);
  box-shadow: 0 0 0 2px var(--gold-dunkel), 0 0 0 4px #0a0d15, inset 0 2px 6px rgba(0, 0, 0, .8), 0 3px 8px rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: color .2s, box-shadow .2s, transform .12s;
}
.siegel-knopf svg { width: 28px; height: 28px; }
button.siegel-knopf:hover { color: var(--gold-hell); box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #0a0d15, 0 0 16px rgba(212, 162, 76, .45), inset 0 2px 6px rgba(0, 0, 0, .8); }
button.siegel-knopf:active { transform: scale(.92); }
.siegel-knopf.ist-erledigt {
  color: #2a1906;
  background: radial-gradient(circle at 35% 30%, #fff1c6, #f0c97a 35%, #c8913a 70%, #8a6224);
  box-shadow: 0 0 0 2px #5c3d10, 0 0 0 4px #0a0d15, 0 0 14px rgba(240, 201, 122, .45);
}
.siegel-knopf.ist-wartend { color: #9be9e1; box-shadow: 0 0 0 2px rgba(79, 209, 197, .7), 0 0 0 4px #0a0d15, 0 0 12px rgba(79, 209, 197, .3), inset 0 2px 6px rgba(0, 0, 0, .8); }
.siegel-knopf.ist-wartend svg { width: 24px; height: 24px; animation: sanduhr 4s ease-in-out infinite; }
.siegel-knopf.ist-gesperrt { color: rgba(163, 157, 143, .45); box-shadow: 0 0 0 2px rgba(163, 157, 143, .2), 0 0 0 4px #0a0d15, inset 0 2px 6px rgba(0, 0, 0, .8); cursor: default; }
.siegel-knopf.ist-gesperrt svg { width: 22px; height: 22px; }
@keyframes sanduhr { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }

/* Animation beim Abhaken: Siegel wird gedrückt … */
.aufgabe.wird-erledigt .siegel-knopf { animation: siegelDruck .45s ease-out both; }
@keyframes siegelDruck {
  0% { transform: scale(1); }
  35% { transform: scale(.82); color: var(--gold-hell); }
  100% { transform: scale(1.08); color: #2a1906; background: radial-gradient(circle at 35% 30%, #fff1c6, #f0c97a 35%, #c8913a 70%, #8a6224); box-shadow: 0 0 0 2px #5c3d10, 0 0 26px rgba(240, 201, 122, .8); }
}
/* … und nach dem Neuladen landet der goldene Stempel mit einem Lichtring */
.aufgabe.frisch { animation: goldPuls 1.4s ease-out both; }
.aufgabe.frisch .siegel-knopf { animation: siegelStempel .65s cubic-bezier(.2, 1.6, .4, 1) both; }
.aufgabe.frisch .siegel-knopf::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--gold-hell);
  animation: lichtring .9s ease-out .15s both;
  pointer-events: none;
}
@keyframes siegelStempel { 0% { transform: scale(1.7) rotate(-25deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes lichtring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes goldPuls {
  0% { box-shadow: 0 0 0 1px rgba(240, 201, 122, .9), 0 0 30px rgba(240, 201, 122, .55), 0 8px 18px rgba(0, 0, 0, .55); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(212, 162, 76, .18), 0 8px 18px rgba(0, 0, 0, .55); }
}

/* Detail-Fenster */
.info-knopf {
  position: absolute; top: 10px; right: 8px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  list-style: none;
  color: rgba(212, 162, 76, .65);
  cursor: pointer;
  border-radius: 50%;
}
.info-knopf::-webkit-details-marker { display: none; }
.info-knopf svg { width: 22px; height: 22px; }
.aufgabe-detail[open] .info-knopf { color: var(--gold-hell); background: rgba(212, 162, 76, .12); }
.detail-inhalt { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(212, 162, 76, .18); animation: einblenden .25s ease-out both; }
.detail-beschreibung { font-style: italic; margin-bottom: 10px; }
.detail-liste { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 8px; font-size: .9rem; }
.detail-liste dt { font-family: var(--schrift-titel); font-size: .75rem; color: var(--gold); letter-spacing: .05em; padding-top: 2px; }
.detail-liste dd { margin: 0; }
.textknopf {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border: 0; background: none;
  font: inherit; font-size: .92rem;
  color: var(--gold-hell); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.textknopf.gefahr { color: #f0a59c; }
.eltern-aktionen { display: grid; gap: 10px; margin-top: 8px; }
.eltern-aktionen.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.inline-form { display: flex; align-items: flex-end; gap: 8px; }
.inline-form .feld { flex: 1; margin: 0; }
.klein-knopf { min-height: 44px; padding: 0 14px; font-size: .85rem; }

/* Bestätigen / Ablehnen */
.bestaetigen-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bestaetigen-reihe form > button, .bestaetigen-reihe summary { width: 100%; }
.bestaetigen-reihe summary { list-style: none; }
.bestaetigen-reihe summary::-webkit-details-marker { display: none; }
.bestaetigen-reihe details[open] { grid-column: 1 / -1; }
.ablehnen-form { margin-top: 12px; }

/* ---------- Eltern: Heute ---------- */
.schnellwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.schnellwahl a { padding: 0 8px; font-size: .8rem; letter-spacing: .04em; gap: 6px; }
.anwesend-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.anwesend {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px;
  border-radius: 6px;
  text-decoration: none; color: var(--text);
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .2);
}
.anwesend .portraet { width: 52px; height: 52px; }
.anwesend-name { font-family: var(--schrift-titel); font-weight: 700; color: var(--gold-hell); font-size: .9rem; }
.anwesend-status { font-size: .78rem; color: #9be9e1; }
.anwesend.status-weg { opacity: .6; }
.anwesend.status-weg .portraet { filter: grayscale(1); }
.anwesend.status-weg .anwesend-status { color: var(--text-gedaempft); }
.anwesend.status-krank .portraet { box-shadow: 0 0 0 2px var(--glut), 0 0 0 4px #1a120a, 0 0 12px rgba(179, 55, 43, .5); }
.anwesend.status-krank .anwesend-status { color: #ff9d8f; }
.zahlen-tafel { padding: 8px 18px; }
.zahlen-zeile { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(212, 162, 76, .12); }
.zahlen-zeile:first-child { border-top: 0; }
.zahlen-name { flex: 1; font-family: var(--schrift-titel); font-weight: 700; color: var(--gold-hell); }
.zahl { font-size: .88rem; color: var(--text-gedaempft); }
.zahl b { color: var(--text); font-size: 1rem; }
.zahl.auffaellig b, .zahl.auffaellig { color: #ff9d8f; }

/* ---------- Eltern: Aufgaben ---------- */
.reiter-drei { grid-template-columns: repeat(3, 1fr); }
.reiter-drei a { font-size: .8rem; letter-spacing: .03em; padding: 0 4px; text-align: center; }
.tag-wahl { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tag-wahl .pfeil { width: 50px; padding: 0; font-size: 1.6rem; line-height: 1; }
.tag-wahl-mitte { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .85rem; }
.tag-wahl-mitte strong { font-family: var(--schrift-titel); color: var(--gold-hell); font-size: .95rem; }
.kind-woche-kopf { display: flex; align-items: center; gap: 12px; }
.last { font-size: .88rem; color: var(--text-gedaempft); }
.last.warnung { color: #ff9d8f; font-weight: 600; }
.tafel.zu-viel { box-shadow: inset 3px 0 0 var(--glut), 0 0 0 1px rgba(179, 55, 43, .55), 0 8px 18px rgba(0, 0, 0, .55); }
.kind-zahlen { font-size: .85rem; color: #ffb4a6; margin-bottom: 4px; }
.wochen-streifen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0 8px; }
.tag-punkt { padding: 5px 0; border-radius: 4px; text-align: center; font-family: var(--schrift-titel); font-size: .72rem; background: rgba(79, 209, 197, .14); color: #c7f5f0; }
.tag-punkt.status-weg { background: rgba(255, 255, 255, .04); color: rgba(163, 157, 143, .7); }
.tag-punkt.status-krank { background: rgba(179, 55, 43, .32); color: #ffc4bb; }
.kompakt-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.kompakt-liste a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid rgba(212, 162, 76, .1); text-decoration: none; color: var(--text); font-size: .92rem; }
.kompakt-tag { flex: none; width: 70px; font-size: .78rem; color: var(--text-gedaempft); }
.kompakt-titel { flex: 1; min-width: 0; }
.kompakt-status { flex: none; font-size: .74rem; color: var(--text-gedaempft); text-align: right; max-width: 40%; }
.kompakt-liste .status-erledigt .kompakt-titel, .kompakt-liste .status-bestaetigt .kompakt-titel { opacity: .6; }
.kompakt-liste .status-wartet .kompakt-status { color: #9be9e1; }
.kompakt-liste .ueberfaellig .kompakt-status { color: #ff9d8f; }
.kompakt-liste .pausiert { opacity: .45; }
.kompakt-liste .leer { padding: 10px 0; text-align: left; }

/* Vorlagen wählen */
.vorlagen-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vorlage-kachel {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 84px; margin: 0; padding: 14px 12px;
  text-decoration: none; color: var(--text);
  transition: transform .12s, box-shadow .2s;
}
.vorlage-kachel:active { transform: scale(.97); }
.vorlage-kachel:hover { box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(212, 162, 76, .25), 0 8px 18px rgba(0, 0, 0, .55); }
.vorlage-titel { font-family: var(--schrift-titel); font-weight: 700; font-size: .92rem; line-height: 1.25; color: var(--gold-hell); }
.vorlage-meta { font-size: .75rem; color: var(--text-gedaempft); }
.vorlage-kopf { display: flex; justify-content: space-between; gap: 10px; }

/* Auswahl-Knöpfe (Art, Größe, Zeitform) */
.wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl-option { flex: 1 1 0; min-width: 84px; cursor: pointer; }
.wahl-option input, .tag-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-option span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 6px;
  border-radius: 5px;
  text-align: center;
  font-family: var(--schrift-titel); font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  color: var(--text-gedaempft);
  background: rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .3);
  transition: background .15s, color .15s;
}
.wahl-option input:checked + span, .tag-chip input:checked + span {
  color: #2a1906;
  background: linear-gradient(180deg, #f6d891, var(--gold) 60%, #a8772a);
  box-shadow: 0 0 12px rgba(212, 162, 76, .35);
}
.wahl-option input:focus-visible + span, .tag-chip input:focus-visible + span { outline: 2px solid var(--magie); outline-offset: 2px; }
.wahl-option.verborgen { display: none; }
.tage-wahl { display: flex; gap: 5px; }
.tag-chip { flex: 1 1 0; max-width: 48px; cursor: pointer; }
.tag-chip span {
  display: grid; place-items: center;
  width: 100%; height: 44px;
  border-radius: 22px;
  font-family: var(--schrift-titel); font-size: .8rem; font-weight: 700;
  color: var(--text-gedaempft);
  background: rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .3);
}
.doppelt .haken { min-height: 36px; }
[data-wenn][hidden] { display: none !important; }

/* Woche übernehmen */
.woche-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(212, 162, 76, .12); }
.woche-zeile:first-of-type { border-top: 0; }
.woche-zeile.vergangen { opacity: .5; }
.woche-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .92rem; }
.woche-text .gedaempft { font-size: .78rem; }
.woche-zeile select { width: auto; max-width: 48%; min-height: 44px; font-size: .92rem; }

/* ---------- Familie, Heilerturm, Kalender ---------- */
.familie-karte.status-krank { box-shadow: inset 3px 0 0 var(--glut), 0 0 0 1px rgba(179, 55, 43, .45), 0 8px 18px rgba(0, 0, 0, .55); }
.status-abzeichen-da { color: #9be9e1; box-shadow: inset 0 0 0 1px rgba(79, 209, 197, .45); }
.status-abzeichen-weg { color: var(--text-gedaempft); box-shadow: inset 0 0 0 1px rgba(163, 157, 143, .35); }
.status-abzeichen-krank { color: #ffb4a6; box-shadow: inset 0 0 0 1px rgba(179, 55, 43, .6); }
.krank-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .9rem; color: #ffc4bb; }
.krank-zeile span { display: inline-flex; align-items: center; gap: 6px; }
.krank-form { margin-top: 4px; }
.kalender-legende { display: flex; gap: 16px; margin-bottom: 10px; font-size: .82rem; color: var(--text-gedaempft); }
.kalender-legende i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.kalender-legende .status-da { background: rgba(79, 209, 197, .45); }
.kalender-legende .status-weg { background: rgba(255, 255, 255, .12); }
.kalender-legende .status-krank { background: rgba(179, 55, 43, .7); }
.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kalender-kopf { text-align: center; font-family: var(--schrift-titel); font-size: .72rem; color: var(--text-gedaempft); padding-bottom: 2px; }
.kalender-tag { margin: 0; }
.kalender-tag button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; min-height: 40px;
  padding: 0; border: 0; border-radius: 6px;
  font-family: var(--schrift-titel); color: var(--text);
  cursor: pointer;
}
.kalender-tag.status-da button { background: rgba(79, 209, 197, .17); color: #d8fbf7; }
.kalender-tag.status-weg button { background: rgba(255, 255, 255, .04); color: rgba(163, 157, 143, .8); }
.kalender-tag.status-krank button { background: rgba(179, 55, 43, .38); color: #ffd6cf; cursor: default; }
.kalender-tag.ausnahme button { box-shadow: inset 0 0 0 2px var(--gold); }
.kalender-tag.ist-heute button { outline: 2px solid var(--gold-hell); outline-offset: 1px; }
.kalender-tag.vergangen button { opacity: .35; cursor: default; }
.kalender-zahl { font-size: .95rem; font-weight: 700; }
.kalender-monat-titel {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  font-family: var(--schrift-titel); font-weight: 700; font-size: .85rem; letter-spacing: .08em;
  color: var(--gold);
}
.kalender { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.kalender.wischt { touch-action: none; }
.kalender-tag.status-weg button { box-shadow: inset 0 0 0 1px rgba(163, 157, 143, .25); }
.kalender-tag button:not(:disabled):active { transform: scale(.94); }
.kalender-monat { font-size: .55rem; color: var(--gold); letter-spacing: .05em; }

/* =========================================================================
   Etappe 3 – Belohnungen
   ========================================================================= */

a.kronen { text-decoration: none; }
.meldung.nachricht { background: linear-gradient(180deg, rgba(212, 162, 76, .16), rgba(212, 162, 76, .06)); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .45); color: var(--gold-hell); }
a.gold-meldung { align-items: center; text-decoration: none; background: linear-gradient(180deg, rgba(212, 162, 76, .18), rgba(212, 162, 76, .07)); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .5); color: var(--gold-hell); font-family: var(--schrift-titel); font-weight: 700; font-size: .9rem; }
a.gold-meldung svg { color: var(--gold); flex: none; }
.zahl.gut b, .zahl.gut { color: #9be9e1; }

/* ---------- Wochensiegel-Fortschritt ---------- */
.siegel-stand { padding: 14px 16px; }
.siegel-stand-zeile { display: flex; align-items: center; gap: 14px; }
.siegel-stand-bild { flex: none; width: 64px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.siegel-stand:not(.erreicht) .siegel-stand-bild { filter: grayscale(.75) brightness(.7) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.siegel-stand.erreicht .siegel-stand-bild { animation: siegelGlanz 3.5s ease-in-out infinite; }
.siegel-stand-bild .platzhalter { aspect-ratio: 1; font-size: .5rem; }
.siegel-stand-text { flex: 1; min-width: 0; }
.siegel-stand-titel { font-family: var(--schrift-titel); font-weight: 700; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.siegel-stand-info { font-size: 1rem; }
.siegel-stand-noch { font-size: .88rem; color: var(--gold-hell); margin-top: 4px; }
.siegel-balken { position: relative; height: 10px; margin-top: 6px; border-radius: 5px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .35); }
.siegel-balken i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, var(--gold-dunkel), var(--gold-hell)); box-shadow: 0 0 8px rgba(212, 162, 76, .6); }
.siegel-marke { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--magie); box-shadow: 0 0 6px var(--magie); }
.siegel-stand.erreicht { box-shadow: 0 0 0 1px rgba(240, 201, 122, .6), 0 0 22px rgba(212, 162, 76, .25), 0 8px 18px rgba(0, 0, 0, .55); }
@keyframes siegelGlanz { 0%, 100% { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)) drop-shadow(0 0 4px rgba(240, 201, 122, .3)); } 50% { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(240, 201, 122, .7)); } }

/* ---------- Teilen ---------- */
.aufgabe-status.geteilt { color: #c9b6f2; }
.aufgabe-status.verfall { color: #f2c38f; font-size: .82rem; }
.teilen-form { margin: 6px 0 4px; padding: 10px 0; border-top: 1px solid rgba(212, 162, 76, .15); }
.teilen-hinweis { font-size: .88rem; color: var(--text-gedaempft); margin: 4px 0 8px; }
.anfrage-text { margin: 10px 0 0; font-size: .95rem; }

/* ---------- Schatzkammer ---------- */
.schatz-kopf { text-align: center; margin: 0 0 6px; }
.schatz-gebaeude { width: auto; max-width: 46%; max-height: 22vh; margin: 0 auto -6px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(212, 162, 76, .25)); }
.schatz-kopf .platzhalter { max-width: 40%; margin: 0 auto 6px; }
.konto-tafel { text-align: center; padding: 20px 16px; }
.konto-titel { font-family: var(--schrift-titel); color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.konto-betrag {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 2.6rem; line-height: 1.1;
  color: var(--gold-hell);
  text-shadow: 0 0 22px rgba(240, 201, 122, .45), 0 2px 2px #000;
  margin: 6px 0;
}
.konto-betrag svg { width: 40px; height: 40px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(212, 162, 76, .7)); }
.konto-euro { font-size: 1rem; }
.konto-kurs { font-size: .8rem; margin-top: 4px; }
.antrag { padding: 14px 16px; }
.antrag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.antrag-betrag { font-family: var(--schrift-titel); font-weight: 700; color: var(--gold-hell); font-size: 1.2rem; }
.antrag-status { color: #9be9e1; font-size: .92rem; }
.antrag.status-angenommen .antrag-status { color: var(--gold-hell); }
.antrag-hinweis { margin: 8px 0; font-size: .9rem; color: var(--text-gedaempft); }
.konto-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.konto-zeile-betrag { text-align: right; font-family: var(--schrift-titel); font-weight: 700; color: var(--gold-hell); }
.konto-zeile-betrag svg { width: 16px; height: 16px; color: var(--gold); vertical-align: -2px; margin-right: 4px; }
.konto-zeile-betrag .gedaempft { font-family: var(--schrift-text); font-weight: 400; font-size: .82rem; }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(212, 162, 76, .1); font-size: .92rem; }
.verlauf-tag { flex: none; width: 66px; font-size: .78rem; color: var(--text-gedaempft); }
.verlauf-text { flex: 1; min-width: 0; }
.verlauf-betrag { flex: none; font-family: var(--schrift-titel); font-weight: 700; }
.verlauf .plus .verlauf-betrag { color: var(--gold-hell); }
.verlauf .minus .verlauf-betrag { color: var(--text-gedaempft); }

/* ---------- Ritt zur Burg ---------- */
.ritt {
  position: relative;
  padding: 10px 14px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(10, 12, 22, .82), rgba(10, 12, 22, .9));
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .35), 0 6px 16px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.burg-kopf { position: absolute; top: 1.2%; left: 3%; right: 3%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.burg-kopf .ritt { align-self: stretch; margin: 0; backdrop-filter: blur(2px); }
.ritt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ritt-titel { font-family: var(--schrift-titel); font-weight: 700; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
.ritt-belohnung { font-size: .75rem; color: var(--text-gedaempft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ritt-weg { position: relative; display: flex; align-items: center; gap: 20px; height: 34px; margin: 4px 0 2px; }
.ritt-start { flex: none; font-family: var(--schrift-titel); font-size: .62rem; color: var(--text-gedaempft); letter-spacing: .06em; text-transform: uppercase; }
.ritt-bahn {
  position: relative; flex: 1; height: 8px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(212, 162, 76, .25) 0 6px, transparent 6px 12px), rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .25);
}
.ritt-bahn i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, var(--gold-dunkel), var(--gold-hell)); box-shadow: 0 0 10px rgba(240, 201, 122, .6); transition: width .8s ease-out; }
.ritt-reiter {
  position: absolute; top: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  color: #2a1906;
  background: radial-gradient(circle at 35% 30%, #fbe3a6, var(--gold) 60%, var(--gold-dunkel));
  box-shadow: 0 0 0 2px #1a120a, 0 0 12px rgba(240, 201, 122, .7);
  animation: reiterWippen 1.6s ease-in-out infinite;
}
.ritt-reiter svg { width: 20px; height: 20px; }
.ritt-ziel { flex: none; width: 26px; height: 26px; color: var(--gold-hell); filter: drop-shadow(0 0 6px rgba(240, 201, 122, .6)); }
.ritt-ziel svg { width: 100%; height: 100%; }
.ritt-text { font-size: .85rem; text-align: center; }
.ritt-text strong { color: var(--gold-hell); font-family: var(--schrift-titel); }
.ritt.erreicht { box-shadow: inset 0 0 0 1px var(--gold-hell), 0 0 26px rgba(240, 201, 122, .45), 0 6px 16px rgba(0, 0, 0, .55); animation: rittFeier 2.4s ease-in-out infinite; }
.ritt-funken i { position: absolute; bottom: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-hell); box-shadow: 0 0 8px var(--gold); opacity: 0; animation: funke 1.8s ease-out infinite; }
.ritt-funken i:nth-child(1) { left: 12%; animation-delay: 0s; }
.ritt-funken i:nth-child(2) { left: 28%; animation-delay: .4s; }
.ritt-funken i:nth-child(3) { left: 45%; animation-delay: .9s; }
.ritt-funken i:nth-child(4) { left: 62%; animation-delay: .2s; }
.ritt-funken i:nth-child(5) { left: 78%; animation-delay: 1.2s; }
.ritt-funken i:nth-child(6) { left: 90%; animation-delay: .6s; }
@keyframes reiterWippen { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -62%); } }
@keyframes rittFeier { 0%, 100% { box-shadow: inset 0 0 0 1px var(--gold-hell), 0 0 18px rgba(240, 201, 122, .35), 0 6px 16px rgba(0, 0, 0, .55); } 50% { box-shadow: inset 0 0 0 1px var(--gold-hell), 0 0 34px rgba(240, 201, 122, .65), 0 6px 16px rgba(0, 0, 0, .55); } }
@keyframes funke { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1.2); } }

/* ---------- Siegel-Zeremonie ---------- */
.zeremonie {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 30, 10, .75), rgba(5, 7, 13, .94) 70%);
  animation: einblenden .5s ease-out both;
}
.zeremonie-inhalt { width: 100%; max-width: 420px; text-align: center; }
.zeremonie-woche { font-family: var(--schrift-titel); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-gedaempft); margin-bottom: 10px; }
.zeremonie h1 { font-size: 1.9rem; margin: 10px 0 8px; }
.zeremonie-siegel { position: relative; width: 62%; max-width: 240px; margin: 0 auto; animation: siegelLandung 1.1s cubic-bezier(.2, 1.4, .4, 1) both; }
.zeremonie-siegel img, .zeremonie-siegel .platzhalter { position: relative; z-index: 1; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .7)); }
.zeremonie-strahlen {
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(240, 201, 122, .18) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: strahlen 14s linear infinite;
}
.zeremonie-lohn { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 12px 0 16px; font-family: var(--schrift-titel); font-weight: 700; color: var(--gold-hell); }
.zeremonie-lohn span { display: inline-flex; align-items: center; gap: 6px; }
.zeremonie-lohn svg { width: 22px; height: 22px; color: var(--gold); }
.zeremonie-kerze { width: 70px; height: 70px; margin: 0 auto; color: var(--gold); filter: drop-shadow(0 0 14px rgba(212, 162, 76, .5)); animation: kerzenlicht 4s ease-in-out infinite; }
.zeremonie-kerze svg { width: 100%; height: 100%; }
.zeremonie-ritt { margin: 6px 0 18px; padding: 10px 12px; border-radius: 6px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .3); font-size: .95rem; }
@keyframes siegelLandung { 0% { transform: scale(2.2) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes strahlen { to { transform: rotate(360deg); } }

/* =========================================================================
   Klang und Effekte
   ========================================================================= */

.effekte { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.effekt-funke {
  position: fixed; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--gold-hell); box-shadow: 0 0 8px var(--gold), 0 0 2px #fff;
  animation: funkeFlug .8s ease-out forwards;
}
.effekt-funke.violett { background: #d9c8ff; box-shadow: 0 0 8px var(--violett), 0 0 2px #fff; }
@keyframes funkeFlug { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.effekt-lichtfunke {
  position: fixed; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #c9b6f2 45%, transparent 70%);
  box-shadow: 0 0 16px 4px rgba(201, 182, 242, .7);
  animation: lichtLinks .7s cubic-bezier(.4, 0, .2, 1) forwards;
}
.effekt-lichtfunke.links { left: 10%; }
.effekt-lichtfunke.rechts { right: 10%; animation-name: lichtRechts; }
@keyframes lichtLinks { to { left: calc(50% - 5px); opacity: .9; } }
@keyframes lichtRechts { to { right: calc(50% - 5px); opacity: .9; } }
.effekt-muenze {
  position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4cf, var(--gold-hell) 40%, var(--gold-dunkel));
  box-shadow: 0 0 8px rgba(240, 201, 122, .8);
  opacity: 0;
  animation: muenzeFlug .9s cubic-bezier(.5, -0.3, .7, 1) forwards;
}
@keyframes muenzeFlug {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: 1; transform: translate(0, -14px) scale(1.1); }
  100% { opacity: .2; transform: translate(var(--zx), var(--zy)) scale(.5); }
}
.kronen.glaenzt { animation: kronenGlanz .8s ease-out; }
@keyframes kronenGlanz { 0% { box-shadow: inset 0 0 0 1px var(--gold-hell), 0 0 24px rgba(240, 201, 122, .9); } 100% { box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .5), inset 0 2px 6px rgba(0, 0, 0, .6); } }
.effekt-truhe {
  position: fixed; left: 50%; top: 42%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--gold-hell);
  background: radial-gradient(circle, rgba(212, 162, 76, .35), transparent 70%);
  animation: truheKlapp 1.2s ease-out forwards;
}
.effekt-truhe svg { width: 64px; height: 64px; filter: drop-shadow(0 0 12px rgba(240, 201, 122, .8)); }
@keyframes truheKlapp {
  0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; }
  40% { transform: scale(1) rotate(-6deg); } 55% { transform: rotate(5deg); } 70% { transform: rotate(0); opacity: 1; }
  100% { transform: scale(.9) translateY(-20px); opacity: 0; }
}
/* Wachssiegel-Stempel auf der Tafel (Auftrag angenommen) */
.aufgabe.gestempelt { animation: goldAufleuchten 1.2s ease-out; }
.aufgabe.gestempelt::after {
  content: ""; position: absolute; right: 54px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e3584a, #8c1f16 65%, #4d0e09);
  box-shadow: 0 0 0 3px rgba(140, 31, 22, .5), 0 3px 8px rgba(0, 0, 0, .6);
  animation: stempel .9s cubic-bezier(.2, 1.5, .4, 1) forwards;
  pointer-events: none; z-index: 3;
}
@keyframes stempel { 0% { transform: scale(2.4) rotate(-25deg); opacity: 0; } 35% { transform: scale(.9) rotate(0); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes goldAufleuchten { 0% { box-shadow: 0 0 0 1px var(--gold-hell), 0 0 30px rgba(240, 201, 122, .6); } 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(212, 162, 76, .18), 0 8px 18px rgba(0, 0, 0, .55); } }
/* Eltern bestätigen: Tafel wird golden, kurzes Glänzen */
.aufgabe.wird-bestaetigt, .tafel.wird-bestaetigt { animation: goldAufleuchten 1s ease-out; overflow: hidden; }
.tafel.wird-bestaetigt::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 180, .45), transparent);
  transform: skewX(-20deg); animation: glanzLauf .7s ease-out forwards; pointer-events: none; z-index: 3;
}
@keyframes glanzLauf { to { left: 120%; } }
/* Haken zeichnet sich beim frisch abgehakten Siegel */
.aufgabe.frisch .siegel-knopf use { stroke-dasharray: 26; stroke-dashoffset: 26; animation: hakenZeichnen .5s ease-out .25s forwards; }
@keyframes hakenZeichnen { to { stroke-dashoffset: 0; } }
/* Reiter springt */
.ritt-reiter.springt { animation: reiterSprung .9s ease-out, reiterWippen 1.6s ease-in-out .9s infinite; }
@keyframes reiterSprung { 0%, 100% { transform: translate(-50%, -50%); } 30% { transform: translate(-50%, -95%); } 60% { transform: translate(-50%, -40%); } }
.ritt-extra { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 9px; font-size: .75rem; font-family: var(--schrift-titel); color: #2a1906; background: var(--gold-hell); }

/* Belohnung verdient (Eltern) */
.belohnung-karte { display: flex; align-items: center; gap: 12px; box-shadow: 0 0 0 1px var(--gold-hell), 0 0 22px rgba(212, 162, 76, .3), 0 8px 18px rgba(0, 0, 0, .55); }
.belohnung-burg { flex: none; width: 40px; height: 40px; color: var(--gold-hell); filter: drop-shadow(0 0 8px rgba(240, 201, 122, .6)); }
.belohnung-text { flex: 1; min-width: 0; font-size: .88rem; }
.belohnung-titel { font-family: var(--schrift-titel); font-weight: 700; color: var(--gold-hell); font-size: 1.05rem; }

/* Burg-Feier */
.feier-burg { position: relative; width: 140px; height: 140px; margin: 0 auto 6px; display: grid; place-items: center; }
.feier-burg-symbol { width: 96px; height: 96px; color: var(--gold-hell); filter: drop-shadow(0 0 18px rgba(240, 201, 122, .8)); animation: siegelLandung 1s cubic-bezier(.2, 1.4, .4, 1) both; position: relative; z-index: 1; }
.feier-reiter { position: absolute; left: -10px; bottom: 6px; width: 40px; height: 40px; color: var(--gold); z-index: 2; animation: feierReiter 1.2s ease-out .2s both; }
@keyframes feierReiter { from { transform: translateX(-60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.feier-strahl {
  position: absolute; left: 50%; bottom: 40%; width: 60px; height: 260px; margin-left: -30px;
  background: linear-gradient(0deg, rgba(240, 201, 122, .55), transparent);
  filter: blur(6px); transform-origin: bottom; animation: strahlAuf 1.2s ease-out both;
}
@keyframes strahlAuf { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.zeremonie.schliesst { animation: ausblenden .3s ease-in forwards; }
@keyframes ausblenden { to { opacity: 0; } }

/* Auszahlung: Betrag einstellen */
.auszahlung-form .feld-titel { margin-bottom: 10px; }
.betrag-waehler { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 14px; }
.betrag-knopf {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%; border: 0; cursor: pointer;
  font-family: var(--schrift-titel); font-size: 1.8rem; font-weight: 700; line-height: 1;
  color: #2a1906;
  background: radial-gradient(circle at 35% 30%, #fbe3a6, var(--gold) 60%, var(--gold-dunkel));
  box-shadow: 0 0 0 2px #1a120a, 0 4px 10px rgba(0, 0, 0, .6);
}
.betrag-knopf:active { transform: scale(.92); }
.betrag-knopf:disabled { filter: grayscale(.8) brightness(.55); cursor: default; }
.betrag-anzeige { display: flex; align-items: baseline; gap: 4px; }
.betrag-anzeige input[type="number"] {
  width: 2.4ch; field-sizing: content; min-width: 1.2ch; min-height: 0; padding: 0; text-align: center;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 3rem; line-height: 1.1;
  color: var(--gold-hell); background: none; border: 0; box-shadow: none;
  text-shadow: 0 0 18px rgba(240, 201, 122, .45);
  -moz-appearance: textfield;
}
.betrag-anzeige input::-webkit-outer-spin-button, .betrag-anzeige input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.betrag-anzeige input:focus { box-shadow: none; border-bottom: 2px solid var(--gold); }
.betrag-anzeige input:disabled { color: var(--text-gedaempft); text-shadow: none; }
.betrag-einheit { font-family: var(--schrift-titel); font-size: 1.6rem; color: var(--gold); }
.betrag-waehler.hupft .betrag-anzeige { animation: betragHupf .25s ease-out; }
@keyframes betragHupf { 50% { transform: scale(1.12); } }
.betrag-alles { margin-bottom: 10px; }

/* Klangprobe */
.probe-kronen { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.probe-liste { display: grid; gap: 8px; }
.probe-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0; padding: 12px 16px; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.probe-knopf strong { font-family: var(--schrift-titel); color: var(--gold-hell); }
.probe-knopf .gedaempft { font-size: .85rem; }
.probe-knopf:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .effekte { display: none; }
}

/* Testuhr (nur lokal) */
.testuhr {
  position: relative; z-index: 6; flex: none;
  padding: 4px 10px calc(4px);
  text-align: center;
  font-size: .75rem; font-weight: 600;
  color: #1a1206;
  background: repeating-linear-gradient(135deg, #e2b45c 0 12px, #d19a3c 12px 24px);
}

/* ---------- Querformat-Hinweis ---------- */
.quer-hinweis { display: none; }
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  .quer-hinweis {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background: var(--nacht);
    color: var(--gold);
    font-family: var(--schrift-titel);
    text-align: center;
    padding: 20px;
  }
  .quer-hinweis svg { width: 64px; height: 64px; }
}

/* ---------- Weniger Bewegung, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .nebel, .gluehwuermchen, .goldknopf::after { display: none; }
}

/* Prüfseite: Wappen und App-Symbole */
.pruef-wappen { padding: 10px 0 18px; }
.pruef-icons { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.pruef-icons figure { margin: 0; text-align: center; }
.pruef-icons img { display: block; margin: 0 auto 4px; border-radius: 18%; }
.pruef-icons figcaption { font-size: .75rem; }

/* =========================================================================
   Wegweiser: Abzeichen (Zahl = offen, ! = neu), Tageszeile auf der Burg
   ========================================================================= */
.abzeichen {
  position: absolute; top: 3px; left: calc(50% + 6px);
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 10px; background: #c8312b; color: #fff;
  font: 700 .74rem/20px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; letter-spacing: 0;
  box-shadow: 0 0 0 2px #0d1220, 0 2px 6px rgba(0, 0, 0, .6);
  pointer-events: none;
  animation: abzeichenAuf .4s cubic-bezier(.2, 1.6, .4, 1) both;
}
.abzeichen.ausruf { padding: 0; width: 20px; }
@keyframes abzeichenAuf { from { transform: scale(0); } to { transform: scale(1); } }
.namensschild .abzeichen { top: -11px; left: auto; right: -12px; }
.heute-zeile {
  display: inline-block; padding: 4px 14px; border-radius: 14px;
  font-family: var(--schrift-titel); font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  color: var(--gold-hell); text-decoration: none;
  background: rgba(13, 18, 32, .78); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .45), 0 4px 10px rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
}
.heute-zeile.erledigt { color: #bfe7c4; box-shadow: inset 0 0 0 1px rgba(120, 190, 130, .45), 0 4px 10px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) {
  .abzeichen { animation: none; }
}

/* Push-Nachrichten (Seite „Ich“) */
.push-status { white-space: pre-line; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size: .92rem; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(163, 157, 143, .25); }
.push-status.ist-an { color: var(--gold-hell); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .5); }
.push-knoepfe { margin-bottom: 12px; }
.push-knoepfe [hidden] { display: none; }

/* App installieren */
.install-wahl { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.install-wahl .steinknopf { flex: 1; }
.install-wahl .steinknopf.aktiv { color: var(--gold-hell); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 10px rgba(0, 0, 0, .5); }
.install-schritte { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.install-schritte li { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 14px 14px 18px; font-size: 1.02rem; line-height: 1.4; }
.install-schritte strong { color: var(--gold-hell); }
.install-nr {
  position: absolute; top: -8px; left: -6px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--schrift-titel); font-weight: 700; font-size: .9rem;
  color: #2a1906; background: radial-gradient(circle at 35% 30%, #fbe3a6, var(--gold) 60%, var(--gold-dunkel));
  box-shadow: 0 0 0 2px #1a120a;
}
.install-schritt-symbol { flex: none; width: 48px; height: 48px; color: var(--gold-hell); border-radius: 11px; }
.install-schritt-symbol.gross { display: grid; place-items: center; width: auto; height: auto; margin: 0 auto 8px; }
.install-direkt { margin-top: 10px; }
.install-hinweis { font-size: .88rem; text-align: center; }
.install-fertig { text-align: center; margin-bottom: 16px; }
.install-fertig h2 { margin: 6px 0; }
[data-plattform][hidden], [data-install-fertig][hidden], [data-install-direkt][hidden] { display: none; }

/* Wichtiger Hinweis vor der Frage des Handys („Erlauben“) */
.install-wichtig {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: .95rem; line-height: 1.4;
  color: #2a1906; background: linear-gradient(180deg, #fbe3a6, var(--gold));
  box-shadow: 0 0 0 2px #1a120a, 0 4px 10px rgba(0, 0, 0, .5);
}
.install-wichtig strong { color: #2a1906; letter-spacing: .04em; }
.push-tafel .install-wichtig { margin: 0 0 12px; }
.install-wichtig[hidden] { display: none; }

/* =========================================================================
   Etappe 5: Karten, Album, Truhe, Ordenssiegel, Turnier-Tafel
   ========================================================================= */

/* Reiter mit „!“ */
.reiter-ausruf {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%;
  background: #c8312b; color: #fff; font: 700 .7rem/1 system-ui, sans-serif; box-shadow: 0 0 0 2px #0d1220;
}

/* ---------- Eine Karte (5:7, Rahmen in Ordensfarbe, Name und Rang im Code) ---------- */
.karte {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  perspective: 900px; container-type: inline-size; -webkit-tap-highlight-color: transparent;
}
.karte-innen {
  position: absolute; inset: 0; display: block; transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.3, .8, .3, 1);
}
.karte.gedreht .karte-innen { transform: rotateY(180deg); }
.karte-vorne, .karte-hinten {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 7cqw;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #0b0f1a; box-shadow: 0 6px 14px rgba(0, 0, 0, .65);
}
.karte-hinten { transform: rotateY(180deg); }
.karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.karte .platzhalter { position: absolute; inset: 0; font-size: 8cqw; }
.karte-rahmen {
  position: absolute; inset: 0; border-radius: 7cqw; pointer-events: none;
  box-shadow:
    inset 0 0 0 1.4cqw var(--orden),
    inset 0 0 0 2.6cqw rgba(10, 12, 20, .85),
    inset 0 0 0 3.1cqw color-mix(in srgb, var(--gold) 70%, transparent),
    inset 0 0 9cqw rgba(0, 0, 0, .55);
}
.karte-kopf, .karte-fuss {
  position: absolute; left: 0; right: 0; display: block; padding: 5cqw 6cqw;
  text-align: center; font-family: var(--schrift-titel); font-weight: 700; line-height: 1.1; letter-spacing: .04em;
}
.karte-kopf {
  top: 0; padding-top: 6cqw; font-size: 8.5cqw; color: var(--orden); text-transform: uppercase;
  background: linear-gradient(180deg, rgba(8, 10, 18, .92) 35%, transparent);
  text-shadow: 0 0 3cqw rgba(0, 0, 0, .9), 0 0 6cqw color-mix(in srgb, var(--orden) 45%, transparent);
}
.karte-fuss {
  bottom: 0; padding-bottom: 6cqw; font-size: 9.5cqw; color: #f3e6c4;
  background: linear-gradient(0deg, rgba(8, 10, 18, .95) 40%, transparent);
  text-shadow: 0 1px 2px #000;
}
.karte-staerke { display: block; font-size: 6cqw; letter-spacing: .3em; margin-bottom: 1.5cqw; color: var(--orden); }
.karte-neu {
  position: absolute; top: 7%; left: -4%; z-index: 2; padding: 2px 8px;
  font: 700 .62rem/1.3 var(--schrift-titel); letter-spacing: .05em; color: #fff; background: #c8312b;
  border-radius: 3px; transform: rotate(-12deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.karte-anzahl {
  position: absolute; right: -5%; bottom: -4%; z-index: 2; min-width: 24px; height: 24px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 12px;
  font: 700 .75rem/1 var(--schrift-titel); color: #2a1906; background: linear-gradient(180deg, #fbe3a6, var(--gold));
  box-shadow: 0 0 0 2px #1a120a, 0 2px 6px rgba(0, 0, 0, .6);
}
/* Fehlende Karte: dunkle Silhouette mit Fragezeichen */
.karte-fehlt { cursor: default; }
.karte-schatten {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7cqw;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .05), transparent 60%), repeating-linear-gradient(45deg, #0b0f1a 0 6px, #0e1320 6px 12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orden) 40%, transparent), inset 0 0 14px rgba(0, 0, 0, .8);
}
.karte-schatten span { font: 700 30cqw/1 var(--schrift-titel); color: color-mix(in srgb, var(--orden) 30%, #1b2133); }
.karte-fehlt .karte-fuss { background: none; color: var(--text-gedaempft); font-size: 8.5cqw; }

/* ---------- Album ---------- */
.truhe-hinweis {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  box-shadow: 0 0 0 1px var(--gold-hell), 0 0 22px rgba(212, 162, 76, .3), 0 8px 18px rgba(0, 0, 0, .55);
  animation: truheHinweisPuls 2.6s ease-in-out infinite;
}
.truhe-hinweis-bild { width: 64px; flex: none; filter: drop-shadow(0 0 10px rgba(154, 111, 214, .6)); }
.truhe-hinweis-text { flex: 1; font-size: .92rem; }
.truhe-hinweis-text strong { display: block; font-family: var(--schrift-titel); color: var(--gold-hell); }
.truhe-hinweis-knopf { flex: none; padding: 0 16px; min-height: 40px; }
@keyframes truheHinweisPuls { 50% { box-shadow: 0 0 0 1px var(--gold-hell), 0 0 30px rgba(212, 162, 76, .5), 0 8px 18px rgba(0, 0, 0, .55); } }

.orden-reihe { position: relative; border-left: 3px solid var(--orden); }
.orden-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.orden-punkt { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--orden); box-shadow: 0 0 10px var(--orden); }
.orden-name { flex: 1; margin: 0; font-size: 1.05rem; color: var(--orden); letter-spacing: .05em; }
.orden-fortschritt { font-size: .8rem; color: var(--text-gedaempft); white-space: nowrap; }
.orden-fortschritt.komplett { color: var(--gold-hell); font-weight: 700; }
.orden-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.orden-vollenden { margin-top: 12px; }
.orden-vollenden .goldknopf { animation: vollendenPuls 2s ease-in-out infinite; }
@keyframes vollendenPuls { 50% { box-shadow: 0 0 0 2px #1a120a, 0 0 22px var(--orden); } }

/* Ordenssiegel (Bronze / Silber / Gold) */
.ordenssiegel { position: relative; display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.ordenssiegel svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.ordenssiegel b { font: 700 .72rem/1 var(--schrift-titel); color: var(--gold-hell); }
.ordenssiegel-bronze { color: #c47c40; }
.ordenssiegel-silber { color: #d9dee6; }
.ordenssiegel-gold { color: #f3cf7c; }
.ordenssiegel-gold svg { filter: drop-shadow(0 0 6px rgba(240, 201, 122, .8)); }

/* Große Ansicht im Album (umdrehen) */
.karte-gross-buehne {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px; background: rgba(5, 7, 13, .9); backdrop-filter: blur(3px); animation: einblenden .25s ease-out;
}
.karte-gross-buehne[hidden] { display: none; }
.karte-gross-halter { width: min(74vw, 320px); }
.karte-gross-halter .karte { animation: karteHeran .45s cubic-bezier(.2, 1.3, .4, 1); }
.karte-gross-halter .karte-kopf { font-size: 7cqw; }
.karte-gross-hinweis { margin: 0; font-size: .85rem; color: var(--text-gedaempft); }
@keyframes karteHeran { from { transform: scale(.6) translateY(30px); opacity: 0; } }

/* ---------- Truhe (Kartenzeremonie) ---------- */
.truhe-buehne { position: relative; height: 360px; display: grid; place-items: center; margin-bottom: 14px; }
.truhe-bild { position: relative; z-index: 1; width: 72%; max-width: 280px; transition: transform .5s, opacity .5s; }
.truhe-img { width: 100%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(154, 111, 214, .35)); }
.truhe-licht {
  position: absolute; z-index: 2; left: 50%; top: 52%; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  background: radial-gradient(circle, #fff6d8 0%, rgba(240, 201, 122, .85) 25%, rgba(154, 111, 214, .35) 55%, transparent 72%);
}
.truhe-buehne.bebt .truhe-bild { animation: truheBebt .6s ease-in-out; }
.truhe-buehne.offen .truhe-licht { animation: truheLicht 1.2s ease-out forwards; }
.truhe-buehne.offen .truhe-bild { transform: translateY(70px) scale(.82); opacity: .35; }
@keyframes truheBebt {
  0%, 100% { transform: none; } 15% { transform: rotate(-3deg) translateX(-3px); } 30% { transform: rotate(3deg) translateX(3px); }
  45% { transform: rotate(-2deg); } 60% { transform: rotate(2deg) translateY(-4px); } 80% { transform: translateY(-8px) scale(1.03); }
}
@keyframes truheLicht { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(46); opacity: .55; } }
.truhe-karte { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: none; }
.truhe-karte .karte { width: min(58vw, 230px); pointer-events: auto; animation: karteSteigt .7s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes karteSteigt { from { transform: translateY(90px) scale(.35); opacity: 0; } to { transform: none; opacity: 1; } }
.truhe-karte-info { position: absolute; bottom: -6px; left: 0; right: 0; text-align: center; font-size: .9rem; color: var(--gold-hell); text-shadow: 0 1px 3px #000; }
.truhe-raster { position: absolute; z-index: 3; inset: 0; display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: center; padding: 0 6px; }
.truhe-raster.zeigen { display: grid; }
.truhe-raster .karte { animation: karteSteigt .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.truhe-knoepfe { display: grid; gap: 10px; }
.truhe-knoepfe [hidden] { display: none; }
.truhe-zuletzt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

/* ---------- Ordens-Zeremonie: 4 Karten fliegen zusammen und werden zum Siegel ---------- */
.ordens-buehne { position: relative; height: 230px; margin: 0 auto 6px; max-width: 320px; }
.ordens-karte {
  position: absolute; width: 64px; aspect-ratio: 5 / 7; left: calc(50% - 32px); top: calc(50% - 45px);
  background-size: cover; background-position: center; border-radius: 5px;
  box-shadow: 0 0 0 2px var(--orden), 0 6px 12px rgba(0, 0, 0, .7);
  animation: 1.3s cubic-bezier(.6, 0, .4, 1) both;
}
.ordens-karte-0 { animation-name: ordensKarte0; }
.ordens-karte-1 { animation-name: ordensKarte1; }
.ordens-karte-2 { animation-name: ordensKarte2; }
.ordens-karte-3 { animation-name: ordensKarte3; }
@keyframes ordensKarte0 { 0% { transform: translate(-120px, -40px) rotate(-14deg); } 55% { transform: translate(-120px, -40px) rotate(-14deg); } 100% { transform: scale(.3); opacity: 0; } }
@keyframes ordensKarte1 { 0% { transform: translate(-40px, -70px) rotate(-5deg); } 55% { transform: translate(-40px, -70px) rotate(-5deg); } 100% { transform: scale(.3); opacity: 0; } }
@keyframes ordensKarte2 { 0% { transform: translate(40px, -70px) rotate(5deg); } 55% { transform: translate(40px, -70px) rotate(5deg); } 100% { transform: scale(.3); opacity: 0; } }
@keyframes ordensKarte3 { 0% { transform: translate(120px, -40px) rotate(14deg); } 55% { transform: translate(120px, -40px) rotate(14deg); } 100% { transform: scale(.3); opacity: 0; } }
.ordens-blitz {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--orden) 40%, transparent 70%); opacity: 0;
  animation: ordensBlitz .9s ease-out 1.15s both;
}
@keyframes ordensBlitz { 0% { transform: scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(16); opacity: 0; } }
.ordens-siegel-gross { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ordens-siegel-gross svg {
  width: 120px; height: 120px; animation: siegelLandung 1s cubic-bezier(.2, 1.4, .4, 1) 1.35s both;
  filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 18px var(--orden)) drop-shadow(0 6px 10px rgba(0, 0, 0, .7));
}

/* ---------- Turnier-Tafel ---------- */
.turnier-tafel {
  position: relative; margin-bottom: 16px; padding: 18px 14px 12px; border-radius: 8px;
  background: linear-gradient(rgba(20, 13, 8, .82), rgba(20, 13, 8, .9)), url('/img/texturen/holz.webp') center / 300px;
  box-shadow: inset 0 0 0 2px #1a120a, inset 0 0 0 4px rgba(212, 162, 76, .55), 0 10px 22px rgba(0, 0, 0, .6);
}
.turnier-titel {
  margin: -30px auto 10px; width: max-content; padding: 4px 18px; border-radius: 4px;
  font: 700 .9rem/1.3 var(--schrift-titel); letter-spacing: .12em; text-transform: uppercase; color: #2a1906;
  background: linear-gradient(180deg, #fbe3a6, var(--gold)); box-shadow: 0 0 0 2px #1a120a, 0 4px 10px rgba(0, 0, 0, .6);
}
.turnier-liste { list-style: none; margin: 0; padding: 0; }
.turnier-zeile {
  display: grid; grid-template-columns: 26px 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid rgba(212, 162, 76, .18);
}
.turnier-zeile:last-child { border-bottom: 0; }
.turnier-zeile.ich { background: rgba(212, 162, 76, .08); border-radius: 6px; }
.turnier-platz { grid-row: 1 / 3; font: 700 1.1rem/1 var(--schrift-titel); color: var(--gold); text-align: center; }
.turnier-zeile.erster .turnier-platz { color: var(--gold-hell); text-shadow: 0 0 10px rgba(240, 201, 122, .7); }
.turnier-figur { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--gold-dunkel); }
.turnier-figur img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.turnier-name { font-family: var(--schrift-titel); font-weight: 700; color: var(--text); }
.turnier-siegel { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; }
.turnier-noch { font-size: .8rem; font-style: italic; color: var(--text-gedaempft); }
.turnier-regel { margin: 10px 0 0; font-size: .75rem; text-align: center; color: var(--text-gedaempft); }
.arena-bald { margin-bottom: 14px; }

/* =========================================================================
   Das Burgtor (einmal pro Tag und nach dem Anmelden)
   ========================================================================= */
.tor {
  position: fixed; inset: 0; z-index: 95; overflow: hidden; perspective: 1400px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #141a2b 0%, #070a12 70%);
  cursor: pointer;
}
/* Ohne JavaScript öffnet sich das Tor nach ein paar Sekunden von selbst */
.tor:not(.mit-js) { animation: torAuto .6s ease-in 6s forwards; }
@keyframes torAuto { to { opacity: 0; visibility: hidden; } }
.tor-fluegel {
  position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 22%, rgba(30, 32, 40, .95) 22% 24.5%, transparent 24.5% 26%),
    linear-gradient(rgba(10, 8, 6, .72), rgba(10, 8, 6, .86)),
    url('/img/texturen/holz.webp') center / 260px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .9);
  transition: transform 1.6s cubic-bezier(.55, .05, .3, 1) .35s;
}
.tor-links { left: 0; transform-origin: left center; }
.tor-rechts { right: 0; transform-origin: right center; }
.tor-spalt {
  position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(240, 201, 122, .35), transparent); opacity: .5;
  transition: opacity .4s, width .6s;
}
.tor-nebel { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 1.2s .3s, transform 1.6s .3s; }
.tor-nebel i {
  position: absolute; left: -40%; right: -40%; height: 45%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(170, 180, 205, .16), transparent 70%); filter: blur(10px);
  animation: torNebel 14s ease-in-out infinite alternate;
}
.tor-nebel i:nth-child(1) { bottom: -10%; }
.tor-nebel i:nth-child(2) { top: 30%; animation-duration: 18s; animation-direction: alternate-reverse; opacity: .7; }
.tor-nebel i:nth-child(3) { top: -15%; animation-duration: 22s; opacity: .5; }
@keyframes torNebel { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.tor-glut { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .8s; }
.tor-glut i {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: #ffb35c; box-shadow: 0 0 6px 2px rgba(255, 140, 50, .7);
  animation: glutSteigt 5s linear infinite;
}
@keyframes glutSteigt {
  0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; }
  60% { transform: translate(14px, -55vh); opacity: .7; } 100% { transform: translate(-10px, -95vh); opacity: 0; }
}
.tor-wappen {
  position: relative; z-index: 3; width: 62%; max-width: 270px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .6s cubic-bezier(.2, 1.4, .4, 1), filter .6s, opacity .5s 1s;
}
.tor-wappen .wappen { width: 100%; max-width: none; margin: 0; }
.tor-text {
  position: relative; z-index: 3; margin: 18px 24px 0; text-align: center;
  font-family: var(--schrift-titel); font-size: .85rem; letter-spacing: .1em; color: var(--text-gedaempft);
  animation: torText 2.8s ease-in-out infinite; transition: opacity .4s;
}
@keyframes torText { 50% { color: var(--gold-hell); text-shadow: 0 0 12px rgba(240, 201, 122, .5); } }
.tor-strahl {
  position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 120px; margin-left: -60px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 190, .55), transparent); filter: blur(8px);
  transform: scaleX(0); opacity: 0; transition: transform .7s ease-out, opacity .7s;
}
/* Antippen: Wappen leuchtet, Lichtstrahl, Nebel teilt sich, Torflügel öffnen sich */
.tor.oeffnet { cursor: default; animation: torWeg .5s ease-in 2.2s forwards; }
.tor.oeffnet .tor-wappen { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(240, 201, 122, .95)) brightness(1.25); opacity: 0; }
.tor.oeffnet .tor-text { opacity: 0; }
.tor.oeffnet .tor-strahl { transform: scaleX(1.6); opacity: 1; }
.tor.oeffnet .tor-spalt { opacity: 1; width: 8px; background: linear-gradient(180deg, rgba(255, 236, 190, .3), #fff2cf, rgba(255, 236, 190, .3)); }
.tor.oeffnet .tor-links { transform: rotateY(-96deg); }
.tor.oeffnet .tor-rechts { transform: rotateY(96deg); }
.tor.oeffnet .tor-nebel { opacity: 0; transform: scaleX(1.6); }
.tor.oeffnet .tor-glut { opacity: 0; }
@keyframes torWeg { to { opacity: 0; visibility: hidden; } }

/* Die Burg erscheint: Gebäude nacheinander mit Kerzenschein */
.burg.tor-vorbereitet .gebaeude { opacity: 0; }
.burg.tor-auf .gebaeude { animation: gebaeudeErscheint 1s ease-out both; }
.burg.tor-auf .gebaeude:nth-of-type(1) { animation-delay: 1.1s; }
.burg.tor-auf .gebaeude:nth-of-type(2) { animation-delay: 1.3s; }
.burg.tor-auf .gebaeude:nth-of-type(3) { animation-delay: 1.5s; }
.burg.tor-auf .gebaeude:nth-of-type(4) { animation-delay: 1.7s; }
.burg.tor-auf .gebaeude:nth-of-type(5) { animation-delay: 1.9s; }
.burg.tor-auf .gebaeude:nth-of-type(6) { animation-delay: 2.1s; }
@keyframes gebaeudeErscheint {
  0% { opacity: 0; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .65)) brightness(.4); }
  60% { opacity: 1; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .65)) drop-shadow(0 0 14px rgba(255, 190, 100, .8)) brightness(1.15); }
  100% { opacity: 1; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .65)); }
}

/* Anmeldeseite: Kerzenlicht und aufsteigende Glut hinter dem Wappen */
.anmelde-kopf { position: relative; }
.anmelde-atmosphaere { position: absolute; inset: -20px -10px 40px; pointer-events: none; z-index: 0; }
.kerze {
  position: absolute; top: 30%; width: 120px; height: 160px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 190, 110, .22), transparent 70%); filter: blur(6px);
  animation: kerzeFlackert 3.2s ease-in-out infinite;
}
.kerze-links { left: -20px; }
.kerze-rechts { right: -20px; animation-delay: -1.3s; animation-duration: 2.7s; }
@keyframes kerzeFlackert { 0%, 100% { opacity: .75; transform: scale(1); } 20% { opacity: 1; } 35% { opacity: .65; transform: scale(.96); } 55% { opacity: .95; transform: scale(1.04); } 80% { opacity: .7; } }
.aufsteigende-glut { position: absolute; inset: 0; }
.aufsteigende-glut i {
  position: absolute; bottom: 20%; width: 3px; height: 3px; border-radius: 50%;
  background: #ffb35c; box-shadow: 0 0 6px 2px rgba(255, 140, 50, .6);
  animation: glutAnmeldung 5s linear infinite;
}
@keyframes glutAnmeldung { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(12px, -260px); opacity: 0; } }
.anmelde-kopf .wappen, .anmelde-kopf h1 { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .karte-innen { transition: none; }
  .truhe-buehne.bebt .truhe-bild, .truhe-karte .karte, .truhe-raster .karte, .karte-gross-halter .karte,
  .ordens-karte, .ordens-blitz, .ordens-siegel-gross svg, .truhe-hinweis, .orden-vollenden .goldknopf { animation: none; }
  .ordens-karte { display: none; }
  .tor-glut, .aufsteigende-glut, .kerze { display: none; }
  .tor-nebel i, .tor-text { animation: none; }
  .tor-fluegel, .tor-nebel, .tor-wappen, .tor-strahl { transition: none; }
  .tor.oeffnet { animation: torWeg .4s ease-out forwards; }
  .tor.oeffnet .tor-links, .tor.oeffnet .tor-rechts { transform: none; }
  .burg.tor-auf .gebaeude { animation: none; opacity: 1; }
}
.tor-wappen:focus { outline: none; }
.tor-wappen:focus-visible .wappen-bild { filter: drop-shadow(0 0 14px rgba(240, 201, 122, .8)); }

/* Übersicht „Sprache der Burg“ (nur lokal) */
.sprache-liste { margin: 0; }
.sprache-liste dt { margin-top: 10px; font: 600 .72rem/1.2 system-ui, sans-serif; color: var(--text-gedaempft); letter-spacing: .03em; }
.sprache-liste dd { margin: 2px 0 0; padding-bottom: 8px; border-bottom: 1px solid rgba(212, 162, 76, .12); font-size: .95rem; }
.sprache-wer { font-size: .75rem; color: var(--gold); }

/* ================================================================ Arena (Etappe 6) */

/* ---------- Reiter „Duell“: verpasste Duelle und Gegnerauswahl ---------- */
.arena-verpasst { margin-bottom: 16px; }
.arena-verpasst-liste { list-style: none; margin: 0; padding: 0; }
.arena-verpasst-liste li {
  display: grid; grid-template-columns: 40px 1fr; gap: 6px 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(212, 162, 76, .14);
}
.arena-verpasst-liste li:last-child { border-bottom: 0; }
.arena-verpasst-liste li.sieg .arena-verpasst-text { color: var(--gold-hell); }
.arena-mini-figur { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--gold-dunkel); }
.arena-mini-figur img, .arena-mini-figur .platzhalter { width: 100%; height: 100%; object-fit: cover; object-position: top; font-size: .5rem; }
.arena-verpasst-text { font-size: .95rem; line-height: 1.35; }
.arena-zurueck { grid-column: 2; justify-self: start; min-height: 40px; padding: 0 18px; font-size: .85rem; }
.arena-hinweis { margin-bottom: 16px; }
.arena-frage { margin: 4px 0 12px; text-align: center; font-size: 1.15rem; }
.arena-gegner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.arena-figur {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 8px 10px; border-radius: 10px; text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, rgba(37, 45, 66, .9), rgba(16, 21, 34, .95));
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, .35), 0 6px 14px rgba(0, 0, 0, .5);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.arena-figur:active { transform: scale(.97); }
a.arena-figur:hover, a.arena-figur:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-hell), 0 0 18px rgba(212, 162, 76, .35), 0 6px 14px rgba(0, 0, 0, .5); outline: none; }
.arena-figur-bild { width: 100%; aspect-ratio: 3 / 4; border-radius: 7px; overflow: hidden; background: #0b0f1a; }
.arena-figur-bild img, .arena-figur-bild .platzhalter { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.arena-figur-name { font: 700 1.05rem/1.2 var(--schrift-titel); color: var(--gold-hell); }
.arena-figur-info { font-size: .8rem; color: var(--text-gedaempft); }
.arena-figur.grau { cursor: default; box-shadow: inset 0 0 0 1px rgba(163, 157, 143, .25); }
.arena-figur.grau .arena-figur-bild { filter: grayscale(1) brightness(.55); }
.arena-figur.grau .arena-figur-name { color: var(--text-gedaempft); }
.arena-figur.grau .arena-figur-info { font-style: italic; }
.arena-gegner.gesperrt .arena-figur:not(.grau) .arena-figur-bild { filter: brightness(.8); }
.arena-regel { font-size: .85rem; }

/* ---------- Duell: Karte wählen ---------- */
.duell-kopf { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 10px; }
.duell-kopf-figur { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 .9rem/1.2 var(--schrift-titel); color: var(--gold-hell); }
.duell-kopf-figur img, .duell-kopf-figur .platzhalter {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; font-size: .55rem;
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(212, 162, 76, .35);
}
.duell-kopf-gegen { font-size: 1.8rem; color: var(--gold); text-shadow: 0 0 12px rgba(212, 162, 76, .6); }
.duell-anleitung { margin: 0 0 14px; font-size: .95rem; }
.duell-hand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.duell-karte-wahl { position: relative; display: block; cursor: pointer; border-radius: 8px; transition: transform .18s ease, filter .18s ease; }
.duell-karte-wahl .karte { cursor: pointer; }
.duell-hand:has(.gewaehlt) .duell-karte-wahl:not(.gewaehlt) { filter: brightness(.6) saturate(.7); }
.duell-karte-wahl.gewaehlt { transform: translateY(-6px) scale(1.04); z-index: 1; }
.duell-karte-wahl.gewaehlt .karte-vorne { box-shadow: 0 0 0 2px var(--orden), 0 0 22px var(--orden), 0 10px 18px rgba(0, 0, 0, .7); }
.duell-karte-wahl:focus-within { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
.duell-los { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.duell-los .goldknopf:disabled { opacity: .5; }

/* ---------- Duell-Zeremonie ---------- */
.duell-buehne { position: relative; min-height: 64vh; padding-top: 6px; text-align: center; }
.duell-ueberspringen { position: absolute; top: 0; right: 0; z-index: 3; font-size: .8rem; }
.duell-intro {
  position: absolute; left: 0; right: 0; top: 30px; z-index: 2; height: 270px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  opacity: 0; visibility: hidden;
}
.duell-intro-figur { width: 40%; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 1.05rem/1.2 var(--schrift-titel); color: var(--gold-hell); }
.duell-intro-figur img, .duell-intro-figur .platzhalter {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--gold-dunkel), 0 14px 26px rgba(0, 0, 0, .7);
}
.duell-intro-figur.links img { box-shadow: 0 0 0 2px var(--farbe-a), 0 0 26px color-mix(in srgb, var(--farbe-a) 45%, transparent), 0 14px 26px rgba(0, 0, 0, .7); }
.duell-intro-figur.rechts img { box-shadow: 0 0 0 2px var(--farbe-b), 0 0 26px color-mix(in srgb, var(--farbe-b) 45%, transparent), 0 14px 26px rgba(0, 0, 0, .7); }
.duell-intro-schwerter { font-size: 2.6rem; color: var(--gold-hell); text-shadow: 0 0 18px rgba(240, 201, 122, .8); }

.duell-kampf { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 24px 0 12px; }
.duell-seite { position: relative; width: 40%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.duell-wer { font: 700 .9rem/1.2 var(--schrift-titel); color: var(--text-gedaempft); }
.duell-blitz {
  position: absolute; left: 50%; top: 42%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle, #fff, color-mix(in srgb, var(--farbe-a) 50%, var(--farbe-b)) 40%, transparent 70%);
  opacity: 0; pointer-events: none;
}
.duell-ergebnis h1 { margin: 6px 0 6px; font-size: 1.7rem; }
.duell-ergebnis p { margin: 0 0 12px; }
.duell-beute { width: 36%; margin: 0 auto 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.duell-beute-name { font: 700 .85rem/1.2 var(--schrift-titel); color: var(--orden); }
.duell-knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* Ablauf 1: Intro – die beiden Figuren treten gegeneinander an */
.duell-buehne.wartet .duell-kampf, .duell-buehne.wartet .duell-ergebnis,
.duell-buehne.phase-intro .duell-kampf, .duell-buehne.phase-intro .duell-ergebnis,
.duell-buehne.phase-karten .duell-ergebnis, .duell-buehne.phase-prall .duell-ergebnis { opacity: 0; visibility: hidden; }
/* Sicherheitsnetz: Läuft kein Skript, erscheint das Ergebnis nach kurzer Zeit von selbst */
.duell-buehne.wartet .duell-kampf, .duell-buehne.wartet .duell-ergebnis { animation: duellNotfall .4s 2.5s forwards; }
@keyframes duellNotfall { to { opacity: 1; visibility: visible; } }
.duell-buehne.phase-intro .duell-intro { opacity: 1; visibility: visible; }
.duell-buehne.phase-intro .duell-intro-figur.links { animation: duellVonLinks .6s cubic-bezier(.2, 1.2, .4, 1) both; }
.duell-buehne.phase-intro .duell-intro-figur.rechts { animation: duellVonRechts .6s .1s cubic-bezier(.2, 1.2, .4, 1) both; }
.duell-buehne.phase-intro .duell-intro-schwerter { animation: duellSchwerter .5s .55s ease-out both; }
@keyframes duellVonLinks { from { opacity: 0; transform: translateX(-60%) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes duellVonRechts { from { opacity: 0; transform: translateX(60%) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes duellSchwerter { from { opacity: 0; transform: scale(2.2) rotate(-25deg); } to { opacity: 1; transform: none; } }

/* Ablauf 2: Die Karten erscheinen, die Karte des Gegners wird aufgedeckt */
.duell-buehne.phase-karten .duell-seite.links { animation: duellVonLinks .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.duell-buehne.phase-karten .duell-seite.rechts { animation: duellVonRechts .45s .08s cubic-bezier(.2, 1.2, .4, 1) both; }

/* Ablauf 3: Aufprall – die Karten stoßen zusammen, Lichtblitz (die Funken kommen aus klang.js) */
.duell-buehne.phase-prall .duell-seite.links { animation: duellStossLinks .55s cubic-bezier(.5, 0, .3, 1) both; }
.duell-buehne.phase-prall .duell-seite.rechts { animation: duellStossRechts .55s cubic-bezier(.5, 0, .3, 1) both; }
.duell-buehne.phase-prall .duell-blitz { animation: duellBlitz .6s .12s ease-out both; }
@keyframes duellStossLinks { 0% { transform: none; } 30% { transform: translateX(28%) rotate(4deg); } 100% { transform: none; } }
@keyframes duellStossRechts { 0% { transform: none; } 30% { transform: translateX(-28%) rotate(-4deg); } 100% { transform: none; } }
@keyframes duellBlitz { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(30); } 100% { opacity: 0; transform: scale(48); } }

/* Ablauf 4: Ergebnis */
.duell-buehne.fertig .duell-intro { display: none; }
.duell-buehne.fertig .duell-ergebnis { animation: einblenden .5s ease-out both; }
.duell-buehne.fertig .duell-kampf { margin-top: 30px; }
.duell-buehne.ist-sieg.fertig .duell-seite.links .karte-vorne,
.duell-buehne.ist-niederlage.fertig .duell-seite.rechts .karte-vorne { box-shadow: 0 0 0 2px var(--gold-hell), 0 0 24px rgba(240, 201, 122, .5), 0 6px 14px rgba(0, 0, 0, .65); }
.duell-buehne.ist-sieg .duell-ergebnis h1 { color: var(--gold-hell); text-shadow: 0 0 16px rgba(240, 201, 122, .5); }
.duell-buehne.ist-sieg.fertig .duell-beute .karte { animation: beuteFlug .9s .15s cubic-bezier(.2, 1.3, .4, 1) both; }
.duell-buehne.ist-sieg.fertig .duell-beute .karte-vorne { box-shadow: 0 0 0 2px var(--orden), 0 0 26px var(--orden), 0 8px 16px rgba(0, 0, 0, .7); }
.duell-buehne.ist-niederlage.fertig .duell-beute { opacity: .85; }
@keyframes beuteFlug { 0% { opacity: 0; transform: translateY(-120px) scale(.4) rotate(-20deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* ---------- Chronik ---------- */
.chronik-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chronik-eintrag { margin: 0; }
.chronik-eintrag.ich { box-shadow: inset 0 0 0 1px rgba(240, 201, 122, .55), 0 6px 14px rgba(0, 0, 0, .45); }
.chronik-kopf { display: grid; grid-template-columns: 36px 1fr 36px; gap: 10px; align-items: center; }
.chronik-figur { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(163, 157, 143, .4); }
.chronik-figur.sieger { box-shadow: 0 0 0 2px var(--gold-hell), 0 0 10px rgba(240, 201, 122, .5); }
.chronik-figur img, .chronik-figur .platzhalter { width: 100%; height: 100%; object-fit: cover; object-position: top; font-size: .45rem; }
.chronik-namen { text-align: center; font-size: .95rem; }
.chronik-namen b { font-family: var(--schrift-titel); color: var(--gold-hell); }
.chronik-gegen { color: var(--text-gedaempft); font-size: .85rem; }
.chronik-karten { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 6px; }
.chronik-karte {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px;
  font-size: .8rem; color: var(--text); background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orden) 60%, transparent);
}
.chronik-karte i { font-style: normal; font-size: .6rem; letter-spacing: .1em; color: var(--orden); }
.chronik-ergebnis { margin: 0; font-size: .9rem; text-align: center; line-height: 1.6; }
.chronik-zeit { margin-top: 4px; font-size: .75rem; text-align: center; color: var(--text-gedaempft); }

@media (min-width: 420px) {
  .arena-gegner { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .duell-buehne *, .duell-karte-wahl { animation: none !important; transition: none !important; }
  .duell-karte-wahl.gewaehlt { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .duell-buehne.wartet .duell-kampf, .duell-buehne.wartet .duell-ergebnis { opacity: 1; visibility: visible; }
}
.duell-ueberspringen[hidden] { display: none; }
.chronik-karten { display: grid; grid-template-columns: 1fr auto 1fr; }
.chronik-karten .chronik-karte:first-child { justify-self: end; }
.chronik-karten .chronik-karte:last-child { justify-self: start; }
.chronik-karten .chronik-karte { font-size: .74rem; padding: 2px 7px; }