/* =============================================
   AFP MERUBICA – Kampagnenblau mit Minecraft-Einschlag
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Share+Tech+Mono&family=Barlow+Condensed:wght@600;700;800&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --red:        #009fe3;
  --dark-red:   #0072a8;
  --gold:       #0b4f7a;
  --cream:      #0b2a3f;
  --dark:       #f3f7fa;
  --panel:      #ffffff;
  --border:     #d3e1ea;
  --green:      #3a8a1f;
  --text:       #1d2b36;
  --muted:      #566875;
  --pixel:      'Press Start 2P', monospace;
  --mono:       'Share Tech Mono', monospace;
  --vt:         'VT323', monospace;
  --danger:     #d7141a;
  --signal:     #e30613;
  --grass:      #5d9e2f;
  --dirt:       #866043;
  --sans:       'Source Sans 3', system-ui, sans-serif;
  --head:       'Barlow Condensed', 'Arial Narrow', sans-serif;
  --blue-glow:  rgba(0,159,227,.3);
  --surface:    #ffffff;
  --surface-2:  #eaf6fc;
  --line-soft:  #e1ebf1;
  --text-soft:  #3f4f5a;
  --titel:      #0b3c5d;
  --navy:       #0b3c5d;
  --hero-a:     #00a8ea;
  --hero-b:     #0091d2;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--dark);
  color: var(--text);
  font-family: var(--mono);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(255,255,255,0.02) 31px,
      rgba(255,255,255,0.02) 32px
    );
}

/* ── NAV ──────────────────────────────────────── */
nav {
  background: #0b3c5d;
  border-bottom: 3px solid var(--red);
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav .brand {
  font-family: var(--pixel);
  font-size: 0.62rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 1px;
  margin-right: auto;
  line-height: 1.6;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.72rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  transition: all 0.15s;
}

nav a:hover, nav a.active {
  color: var(--gold);
  border-color: var(--red);
  background: rgba(0,159,227,0.12);
}

/* ── HERO ─────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(180deg, #0072a8 0%, var(--dark) 100%);
  border-bottom: 2px solid var(--border);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: none;
  position: absolute;
  font-size: 20rem;
  opacity: 0.04;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-flag {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 2.4rem;
}

.hero h1 {
  font-family: var(--pixel);
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  color: var(--red);
  line-height: 1.8;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 20px rgba(0,159,227,0.5);
}

.hero .tagline {
  font-family: var(--vt);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--gold);
  margin-bottom: 2rem;
  letter-spacing: 2px;
}

.hero .sub {
  max-width: 680px;
  margin: 0 auto 2.5rem;
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.88rem;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  background: var(--red);
  color: #fff;
  font-family: var(--pixel);
  font-size: 0.55rem;
  text-decoration: none;
  border: 2px solid var(--dark-red);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
}

.btn:hover {
  background: var(--dark-red);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,159,227,0.4);
}

.btn-outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.btn-outline:hover {
  background: rgba(255,190,0,0.1);
}

/* ── MAIN CONTENT ─────────────────────────────── */
main {
  flex: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  width: 100%;
}

/* ── SECTION TITLES ───────────────────────────── */
.section-title {
  font-family: var(--pixel);
  font-size: clamp(0.6rem, 2vw, 0.85rem);
  color: var(--red);
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.5rem 0 2rem;
}

/* ── CARD GRID ────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  padding: 1.4rem;
  transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,159,227,0.2);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.card h3 {
  font-family: var(--pixel);
  font-size: 0.55rem;
  color: var(--gold);
  margin-bottom: 0.7rem;
  line-height: 1.7;
}

.card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

.card a {
  display: inline-block;
  margin-top: 1rem;
  color: var(--red);
  font-size: 0.75rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.card a:hover { color: var(--gold); border-color: var(--gold); }

/* ── POLICY PAGE LAYOUT ───────────────────────── */
.page-header {
  text-align: center;
  padding: 3rem 1rem 2rem;
  background: linear-gradient(180deg, #0072a8 0%, var(--dark) 100%);
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}

.page-header .icon { font-size: 3.5rem; margin-bottom: 1rem; }

.page-header h1 {
  font-family: var(--pixel);
  font-size: clamp(0.7rem, 2.5vw, 1.05rem);
  color: var(--red);
  line-height: 1.8;
  margin-bottom: 0.6rem;
}

.page-header .subtitle {
  font-family: var(--vt);
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 2px;
}

.policy-section {
  margin-bottom: 2.8rem;
}

.policy-section h2 {
  font-family: var(--pixel);
  font-size: 0.62rem;
  color: var(--gold);
  border-left: 4px solid var(--red);
  padding-left: 0.8rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.policy-section p {
  color: var(--muted);
  line-height: 1.85;
  font-size: 0.88rem;
  margin-bottom: 0.9rem;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
}

.policy-list li {
  padding: 0.55rem 0.8rem 0.55rem 2rem;
  border-left: 2px solid var(--border);
  margin-bottom: 0.5rem;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.7;
  position: relative;
}

.policy-list li::before {
  content: '▶';
  position: absolute;
  left: 0.5rem;
  color: var(--red);
  font-size: 0.6rem;
  top: 0.65rem;
}

/* ── QUOTE BLOCK ──────────────────────────────── */
.quote-block {
  border-left: 4px solid var(--red);
  padding: 1rem 1.5rem;
  background: rgba(0,159,227,0.06);
  margin: 1.5rem 0;
  font-family: var(--vt);
  font-size: 1.4rem;
  color: var(--cream);
  line-height: 1.5;
}

.quote-block cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-family: var(--mono);
}

/* ── STAT BOX ─────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.stat-box {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1.2rem;
  text-align: center;
}

.stat-box .number {
  font-family: var(--pixel);
  font-size: 1rem;
  color: var(--red);
  display: block;
  margin-bottom: 0.4rem;
}

.stat-box .label {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── JOIN FORM ────────────────────────────────── */
.join-form {
  max-width: 560px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 0.4rem;
  font-family: var(--pixel);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.88rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--red);
}

.form-group textarea { min-height: 100px; resize: vertical; }

/* ── FOOTER ───────────────────────────────────── */
footer {
  background: #0b3c5d;
  border-top: 3px solid var(--red);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.8;
}

footer strong { color: var(--gold); }

/* ── ALERT BANNER ─────────────────────────────── */
.alert {
  background: rgba(255,93,108,0.12);
  border: 1px solid var(--danger);
  padding: 0.8rem 1.2rem;
  font-size: 0.82rem;
  color: var(--cream);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* ── BREADCRUMB ───────────────────────────────── */
.breadcrumb {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0.6rem 1.5rem;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.breadcrumb a { color: var(--red); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 600px) {
  nav { gap: 0.3rem 0.8rem; }
  .hero { padding: 3rem 1rem 2.5rem; }
  main { padding: 2rem 1rem; }
}

/* =============================================
   ARCHIV DER AMTLICHEN BUECHER
   ============================================= */

:root {
  --parchment:  #efe0b9;
  --parchment-2:#e3d2a6;
  --ink:        #3b2f1e;
  --ink-soft:   #6b5a3e;
  --leather:    #5a3d1f;
  --leather-hi: #8a6134;
  --afp:        #2f6fd6;
  --mkp:        #e07a1a;
  --cives:      #7b3fa0;
}

/* ── SUCHLEISTE ───────────────────────────────── */
.archiv-suche {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.5rem;
}

.archiv-suche .zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}

.archiv-suche input[type="search"] {
  flex: 1 1 260px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  outline: none;
}

.archiv-suche input[type="search"]:focus { border-color: var(--red); }

.archiv-suche select {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.55rem 0.7rem;
  outline: none;
  cursor: pointer;
}

.archiv-suche .hinweis {
  margin-top: 0.7rem;
  font-size: 0.74rem;
  color: #667784;
}

.archiv-suche .hinweis a { color: var(--red); text-decoration: none; }
.archiv-suche .hinweis a:hover { color: var(--gold); }

/* ── FACETTEN ─────────────────────────────────── */
.facetten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}

.facette {
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.28rem 0.6rem;
  background: #f3f8fb;
  transition: all 0.15s;
}

.facette:hover { color: var(--gold); border-color: var(--red); }
.facette.aktiv { color: var(--gold); border-color: var(--gold); background: rgba(255,190,0,0.08); }
.facette .n { color: #7a8894; margin-left: 0.35rem; }

/* ── TREFFERLISTE ─────────────────────────────── */
.treffer-kopf {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.akte {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: 0 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  padding: 1rem 1.2rem;
  margin-bottom: 0.7rem;
  text-decoration: none;
  transition: all 0.15s;
}

.akte:hover {
  border-left-color: var(--red);
  background: #eef7fc;
  transform: translateX(3px);
}

.akte .symbol { font-size: 1.5rem; grid-row: span 2; align-self: start; }

.akte h3 {
  font-family: var(--pixel);
  font-size: 0.6rem;
  color: var(--gold);
  line-height: 1.7;
  margin-bottom: 0.45rem;
}

.akte .meta {
  font-size: 0.76rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: center;
}

.akte .meta .trenner { color: #c3d2dc; }

.akte .auszug {
  grid-column: 2 / -1;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: #3f4f5a;
  line-height: 1.7;
  border-left: 2px solid var(--border);
  padding-left: 0.8rem;
}

.akte .auszug mark {
  background: rgba(255,190,0,0.25);
  color: var(--gold);
  padding: 0 2px;
}

.akte .fundstelle {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--red);
}

/* ── BADGES ───────────────────────────────────── */
.badge {
  font-size: 0.66rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-partei-afp   { color: #8ab4ff; border-color: var(--afp);   background: rgba(47,111,214,0.15); }
.badge-partei-mkp   { color: #ffb066; border-color: var(--mkp);   background: rgba(224,122,26,0.15); }
.badge-partei-cives { color: #c79ae0; border-color: var(--cives); background: rgba(123,63,160,0.15); }
.badge-partei-none  { color: #6f7e89;    border-color: #c3d2dc;         background: #eef3f6; }

.pill {
  font-size: 0.66rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid;
  align-self: start;
  white-space: nowrap;
}

.pill-gut     { color: #6fbf6f; border-color: var(--green); background: rgba(45,106,45,0.15); }
.pill-warn    { color: var(--gold); border-color: #7a6410; background: rgba(255,190,0,0.1); }
.pill-schlecht{ color: #ff8a95; border-color: var(--danger); background: rgba(255,93,108,0.12); }
.pill-neutral { color: #6f7e89; border-color: #c3d2dc; background: #eef3f6; }

.warnung-unvollstaendig {
  color: #e0913a;
  font-size: 0.72rem;
  border: 1px dashed #7a5320;
  padding: 0.15rem 0.45rem;
  background: rgba(224,145,58,0.08);
}

/* =============================================
   BUCHANSICHT
   ============================================= */

.buch-layout {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.buch-spalte { position: sticky; top: 4.5rem; }

/* Minecraft-inspired written book: stepped cover, binding and paper edges. */
.mc-book {
  --paper: #fff7da;
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: 14px 16px 18px 30px;
  background: #805334;
  border: 4px solid #39251c;
  border-radius: 0;
  box-shadow: inset 4px 0 #b7804e, inset -4px 0 #523725, inset 0 4px #b7804e,
    inset 0 -4px #523725, 4px 4px 0 #0c0b0a;
  clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0,
    calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
}
.mc-book::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 8px;
  background: repeating-linear-gradient(to bottom, #b78352 0 8px, #68452d 8px 16px);
  border-left: 3px solid #4b3225;
  border-right: 2px solid #a97447;
  pointer-events: none;
}
.mc-book::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 8px;
  bottom: 14px;
  width: 8px;
  background: linear-gradient(to right, #c3b68f 0 3px, #f1e5ba 3px 5px, #998a67 5px);
  pointer-events: none;
}
.mc-seite, .mc-paper {
  position: relative;
  background: var(--paper);
  box-shadow: inset 4px 0 #ddcfa7, inset 8px 0 #eee2bb;
  min-height: 440px;
  padding: 3.3rem 1.6rem 1.5rem 1.8rem;
  color: #30291e;
  font: 1.45rem/1.28 var(--vt);
  letter-spacing: .15px;
  overflow-wrap: anywhere;
}
.mc-seite::before, .mc-paper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: linear-gradient(45deg, #e1d2a8 0 50%, #b7a47a 50%);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%, 50% 50%, 50% 0);
}
.mc-seite .seitenzahl, .mc-paper .seitenzahl {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: #6a5b40;
  font: 1.05rem/1 var(--vt);
}
.mc-seite .seitenlabel {
  display: block;
  margin-bottom: 1rem;
  font: 1.1rem/1.3 var(--vt);
  color: #796345;
}
.mc-seite p { margin-bottom: .85rem; }
.mc-seite strong { color: #241b0d; }
.mc-seite em { color: #5b4931; }
.mc-seite h2, .mc-seite h3 { color: #30291e; font: 1.5rem/1.25 var(--vt); margin-bottom: 1rem; }
.mc-seite ul, .mc-seite ol { padding-left: 1.25rem; }
.mc-seite a { color: #644126; text-decoration: underline; }
.mc-signatur { margin-top: 1.4rem; color: #795b37; }
.mc-seite.blaettert { animation: seitenwechsel .16s steps(3) both; }
@keyframes seitenwechsel { from { opacity: .45; } to { opacity: 1; } }
body.js .mc-seite[hidden] { display: none; }
.mc-seite + .mc-seite { border-top: 2px dashed #d5c49b; }
body.js .mc-seite + .mc-seite { border-top: 0; }
body.js .alle-seiten .mc-seite + .mc-seite { border-top: 2px dashed #d5c49b; }
.mc-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem 1rem 1rem 1.5rem;
  background: var(--paper);
  box-shadow: inset 4px 0 #ddcfa7, inset 8px 0 #eee2bb;
}
body.js .mc-nav { display: flex; }
.mc-lesestand { color: #776647; font: 1.05rem var(--vt); }
.mc-pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mc-pfeil span {
  display: block;
  width: 28px;
  height: 20px;
  background: #95622f;
  box-shadow: inset 0 4px #c49653, inset 0 -4px #5e3d22;
  clip-path: polygon(0 35%, 55% 35%, 55% 0, 75% 0, 75% 20%,
    90% 20%, 90% 40%, 100% 40%, 100% 60%, 90% 60%, 90% 80%,
    75% 80%, 75% 100%, 55% 100%, 55% 65%, 0 65%);
}
#zurueck span { transform: scaleX(-1); }
.mc-pfeil:hover:not(:disabled) span { background: #c99746; }
.mc-pfeil:disabled { opacity: .2; cursor: default; }
.mc-pfeil:focus-visible { outline: 3px solid #72502d; outline-offset: -3px; }
.buch-hilfe { text-align: center; margin-top: .8rem; }
@media (prefers-reduced-motion: reduce) { .mc-seite.blaettert { animation: none; } }

.mc-blattnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0.9rem;
  justify-content: center;
}

.mc-blatt {
  width: 26px;
  height: 26px;
  border: 1px solid #3a250f;
  background: #c8ab6f;
  color: #3b2f1e;
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.12s;
  position: relative;
}

.mc-blatt:hover { background: var(--parchment); }
.mc-blatt.aktiv { background: #3b2f1e; color: var(--parchment); }
.mc-blatt.hat-zitat::after {
  content: '★';
  position: absolute;
  top: -7px;
  right: -4px;
  font-size: 0.6rem;
  color: var(--gold);
  text-shadow: 0 0 3px #000;
}

.buch-werkzeuge {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}

.werkzeug {
  background: #f3f8fb;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.werkzeug:hover { color: var(--gold); border-color: var(--red); }

/* ── AKTENKOPF ────────────────────────────────── */
.akten-kopf {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  padding: 1.3rem;
  margin-bottom: 1.3rem;
}

.akten-kopf h1 {
  font-family: var(--pixel);
  font-size: 0.72rem;
  color: var(--gold);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.akten-tabelle { width: 100%; border-collapse: collapse; font-size: 0.83rem; }

.akten-tabelle th {
  text-align: left;
  color: #667784;
  font-weight: normal;
  padding: 0.42rem 0.9rem 0.42rem 0;
  width: 9.5rem;
  vertical-align: top;
  border-bottom: 1px solid #e1ebf1;
  font-size: 0.76rem;
}

.akten-tabelle td {
  color: var(--text);
  padding: 0.42rem 0;
  border-bottom: 1px solid #e1ebf1;
  line-height: 1.6;
}

.akten-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.3rem;
}

.akten-block h2 {
  font-family: var(--pixel);
  font-size: 0.58rem;
  color: var(--gold);
  margin-bottom: 0.8rem;
  line-height: 1.7;
}

.akten-block p { color: var(--muted); font-size: 0.85rem; line-height: 1.8; margin-bottom: 0.7rem; }

/* ── ZITATE ZUR SEITE ─────────────────────────── */
.zitat-karte {
  background: #f3f8fb;
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
}

.zitat-karte.kat-entlastend    { border-left-color: var(--green); }
.zitat-karte.kat-belastend     { border-left-color: var(--danger); }
.zitat-karte.kat-eigenes_risiko{ border-left-color: #e0913a; }
.zitat-karte.kat-kontext       { border-left-color: #6b6b6b; }

.zitat-karte .text {
  font-family: var(--vt);
  font-size: 1.15rem;
  color: var(--cream);
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

.zitat-karte .quelle { font-size: 0.72rem; color: #667784; margin-bottom: 0.5rem; }

.zitat-karte .verwertung {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid #e1ebf1;
  padding-top: 0.5rem;
}

.zitat-karte .kat {
  font-size: 0.64rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6f7e89;
}

.leer {
  color: #7a8894;
  font-size: 0.82rem;
  font-style: italic;
  padding: 1.5rem 0;
  text-align: center;
}

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 900px) {
  .buch-layout { grid-template-columns: 1fr; }
  .buch-spalte { position: static; }
}

@media (max-width: 600px) {
  .akte { grid-template-columns: 2rem 1fr; }
  .akte .pill { grid-column: 2; margin-top: 0.5rem; justify-self: start; }
  .mc-seite, .mc-paper { font-size: 1.3rem; min-height: 370px; padding: 3rem 1.1rem 1.2rem 1.3rem; }
  .mc-book { padding-left: 24px; padding-right: 12px; }
  .mc-book::before { left: 7px; width: 7px; }
  .mc-book::after { right: 5px; }
}

@media print {
  nav, footer, .breadcrumb, .mc-nav, .mc-blattnav, .buch-werkzeuge { display: none; }
  body.js .mc-seite[hidden] { display: block; }
  .mc-seite { break-inside: avoid; }
}

/* Accounts and role management */
.nav-account { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; border-left: 1px solid var(--border); padding-left: .6rem; }
.nav-account form { display: inline-flex; }
.nav-logout { background: transparent; color: var(--muted); border: 1px solid transparent; padding: .3rem .55rem; font: .72rem var(--mono); cursor: pointer; }
.nav-logout:hover { color: var(--gold); border-color: var(--red); }
.auth-page { max-width: 620px; }
.auth-page h1, .accounts-page h1 { color: var(--cream); font: clamp(1.8rem, 5vw, 2.6rem) var(--vt); line-height: 1.2; overflow-wrap: anywhere; }
.auth-eyebrow { font: .6rem var(--pixel); color: var(--red); line-height: 1.8; margin-bottom: .9rem; }
.auth-intro { color: var(--muted); margin: 1rem 0 1.8rem; line-height: 1.7; }
.auth-panel { padding: 1.7rem; border: 1px solid var(--border); border-top: 3px solid var(--red); background: var(--panel); }
.auth-panel h2 { font: 1.6rem var(--vt); color: var(--gold); margin-bottom: 1.5rem; }
.auth-panel .form-group label, .role-form .form-group label { font: .9rem var(--mono); line-height: 1.5; }
.auth-panel input { min-height: 44px; }
.field-help { display: block; color: var(--muted); font: .8rem/1.65 var(--mono); margin-top: .4rem; }
.auth-recovery { margin-bottom: 1.4rem; }
.auth-switch { margin: 1.5rem 0; line-height: 1.7; color: var(--muted); }
.auth-switch a, .account-pagination a { color: var(--gold); text-underline-offset: 4px; }
.auth-notice { background: rgba(45,106,45,.15); border: 1px solid var(--green); color: var(--cream); padding: 1rem; margin-bottom: 1.5rem; line-height: 1.7; }
.role-badge { display: inline-block; border: 1px solid #7a8894; color: var(--cream); padding: .15rem .5rem; font: .8rem/1.5 var(--mono); }
.role-trusted { border-color: var(--green); color: #a4d9a4; }
.role-admin { border-color: var(--gold); color: var(--gold); }
.role-guide { display: grid; gap: .7rem; margin-bottom: 1.5rem; font-size: .88rem; line-height: 1.7; }
.role-guide .role-badge { margin-right: .5rem; }
.account-list { margin-top: 1.5rem; display: grid; gap: 1rem; }
.account-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); gap: 1.5rem; padding: 1.4rem; border: 1px solid var(--border); background: var(--panel); align-items: center; }
.account-row h2 { color: var(--cream); font: 1.4rem var(--vt); overflow-wrap: anywhere; margin-bottom: .5rem; }
.role-form { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
.role-form .form-group { flex: 1 1 130px; margin: 0; min-width: 0; }
.role-form .btn { min-height: 39px; line-height: 1.7; }
.account-pagination { display: flex; gap: 1.2rem; margin-top: 1.5rem; font-size: .85rem; }
.auth-page :focus-visible, .accounts-page :focus-visible, .nav-account :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#form-msg { white-space: pre-line; }
@media (max-width: 700px) {
  .account-row { grid-template-columns: 1fr; }
  .role-form { align-items: stretch; flex-direction: column; }
  .role-form .form-group { flex-basis: auto; }
  .auth-panel { padding: 1.2rem; }
  .nav-account { border-left: 0; padding-left: 0; }
}

/* Werkzeuge */
.rp-hinweis { margin: 0 0 1.5rem; padding: .9rem 1rem; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); line-height: 1.65; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1rem; }
.tool-karte { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .85rem; align-items: start; min-height: 150px; padding: 1.2rem; border: 1px solid var(--border); border-top: 3px solid var(--gold); background: var(--panel); color: var(--cream); text-decoration: none; }
.tool-karte:hover, .tool-karte:focus-visible { transform: translateY(-2px); border-color: var(--gold); }
.tool-karte .pill { grid-column: 2; justify-self: start; }
.tool-symbol { font-size: 2rem; line-height: 1; }
.tool-inhalt { display: grid; gap: .55rem; line-height: 1.55; }
.tool-inhalt strong { color: var(--gold); font: 1.25rem/1.2 var(--vt); }
.tool-inaktiv { opacity: .85; }
.tool-app { max-width: 980px; }
.tool-schritt { padding: clamp(1rem,4vw,2rem); border: 1px solid var(--border); background: var(--panel); }
.tool-schritt[hidden] { display: none; }
.whalo-fortschritt { display: grid; gap: .5rem; margin-bottom: 2rem; font: .8rem var(--mono); color: var(--muted); }
.fortschritt-bahn, .ergebnis-bahn { display: block; height: 10px; overflow: hidden; background: var(--dark); border: 1px solid var(--border); }
.fortschritt-bahn span, .ergebnis-bahn span { display: block; height: 100%; background: var(--gold); transition: width .25s ease; }
.whalo-antworten { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin: 2rem 0; }
.whalo-antworten button, .anwalt-vorschlaege button { padding: 1rem; border: 1px solid var(--border); background: var(--dark); color: var(--cream); cursor: pointer; font: inherit; }
.whalo-antworten button:hover, .whalo-antworten button:focus-visible, .whalo-antworten button[aria-pressed=true] { border-color: var(--gold); color: var(--gold); }
.gewicht-liste { display: grid; gap: .55rem; max-height: 55vh; overflow-y: auto; margin: 1rem 0; padding-right: .4rem; }
.gewicht-zeile { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; align-items: start; padding: .8rem; background: var(--dark); border: 1px solid var(--border); line-height: 1.5; }
.gewicht-zeile input { margin-top: .25rem; }
.ergebnis-liste { display: grid; gap: 1rem; }
.ergebnis-karte { padding: 1rem; border: 1px solid var(--border); background: var(--dark); }
.ergebnis-kopf { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .8rem; align-items: center; }
.ergebnis-kopf h3 { margin: 0; }
.ergebnis-rang { color: var(--muted); font: .75rem var(--mono); }
.ergebnis-prozent { color: var(--gold); font: 1.2rem var(--mono); }
.ergebnis-bahn { margin: .8rem 0; }
.ergebnis-details summary { color: var(--gold); }
.positions-liste { display: grid; gap: .7rem; margin-top: 1rem; }
.positions-zeile { padding: .8rem; border-left: 2px solid var(--border); }
.positions-zeile h4, .positions-zeile p { margin: .2rem 0; }
.positions-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.confidence, .quellen-chip { display: inline-block; padding: .2rem .45rem; font: .7rem var(--mono); border: 1px solid var(--border); }
.confidence-belegt { color: #9ed893; border-color: #53804b; }
.confidence-abgeleitet { color: #e4c46a; border-color: #8b7536; }
.tabellen-scroll { max-width: 100%; overflow-x: auto; }
.tabellen-scroll table { width: 100%; border-collapse: collapse; min-width: 720px; }
.tabellen-scroll th, .tabellen-scroll td { padding: .7rem; border: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.5; }
.methodik-seite { max-width: 1200px; }
.methodik-tabelle small, .methodik-tabelle td span, .methodik-tabelle td a { display: block; margin-top: .45rem; }
.positionswert { color: var(--gold); font: 1.4rem var(--mono); }
.anwalt-seite { max-width: 960px; }
.anwalt-aufmacher { margin-bottom: 2rem; padding: clamp(1.2rem,4vw,2.2rem); border-left: 4px solid var(--gold); background: var(--panel); }
.anwalt-chat { overflow: hidden; border: 1px solid var(--border); background: var(--panel); }
.anwalt-chat > header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem; }
.anwalt-chat > header h2, .anwalt-chat > header p { margin: .2rem 0; }
.anwalt-band { padding: .55rem 1rem; background: var(--gold); color: #211d15; font: .75rem var(--mono); }
.anwalt-nachrichten { display: grid; gap: .8rem; min-height: 220px; max-height: 520px; overflow-y: auto; padding: 1rem; }
.nachricht { max-width: 82%; padding: .8rem 1rem; border: 1px solid var(--border); white-space: pre-wrap; line-height: 1.6; }
.nachricht.assistent { justify-self: start; background: var(--dark); }
.nachricht.nutzer { justify-self: end; border-color: var(--gold); }
.anwalt-quellen { display: flex; flex-wrap: wrap; gap: .4rem; }
.anwalt-quellen a { font-size: .72rem; }
.anwalt-vorschlaege { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem 1rem; }
.anwalt-vorschlaege button { padding: .55rem .7rem; text-align: left; }
#anwalt-form { padding: 1rem; border-top: 1px solid var(--border); }
#anwalt-form textarea { width: 100%; }
.vorlagen-layout { display: grid; grid-template-columns: minmax(280px,1fr) minmax(300px,1fr); gap: 1.5rem; align-items: start; }
.buch-ausgabe { min-height: 500px; max-height: 70vh; overflow: auto; padding: 1.2rem; background: #e5d7ae; color: #2d281e; border: 6px double #806f49; white-space: pre-wrap; font: 1rem/1.45 var(--mono); }
.download-liste { display: grid; gap: .8rem; }
.download-liste .akten-block { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.download-liste h2 { margin-top: 0; font-size: 1.15rem; }

@media (max-width: 700px) {
  .whalo-antworten, .vorlagen-layout { grid-template-columns: 1fr; }
  .ergebnis-kopf { grid-template-columns: 1fr auto; }
  .ergebnis-rang { grid-column: 1 / -1; }
  .anwalt-chat > header, .download-liste .akten-block { align-items: flex-start; flex-direction: column; }
  .nachricht { max-width: 95%; }
}

/* German public site */
.skip-link { position: absolute; left: -9999px; top: .5rem; z-index: 200; background: var(--gold); color: var(--dark); padding: .75rem; }
.skip-link:focus { left: .5rem; }
#inhalt { scroll-margin-top: 8rem; }
main h1 { font: clamp(1.8rem, 5vw, 2.6rem)/1.3 var(--vt); color: var(--cream); overflow-wrap: anywhere; }
main a { color: var(--gold); text-underline-offset: 3px; }
main p, main li { line-height: 1.8; overflow-wrap: anywhere; }
main h3, main h4 { line-height: 1.5; margin: 1rem 0 .5rem; }
.site-section { margin-top: 3rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1rem 0 1.5rem; }
.aktionen .btn { line-height: 1.8; }
.aktionen select { background: var(--panel); color: var(--cream); padding: .6rem; border: 1px solid var(--border); }
.hero .aktionen { justify-content: center; }
.belegte-zahlen { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 3rem; text-align: center; }
.belegte-zahlen strong { display: block; font: 3rem var(--vt); color: var(--gold); }
.belegte-zahlen p { font-size: .85rem; color: var(--muted); }
.leseseite { max-width: 850px; }
.inhalt-liste { padding-left: 1.5rem; margin: 1rem 0; }
.inhalt-liste li { margin: .7rem 0; }
.belegzeile { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .8rem; font: .85rem/1.8 var(--mono); }
.policy-section { scroll-margin-top: 10rem; }
.policy-section h3 { color: var(--gold); font-size: .95rem; }
.card p { margin: .8rem 0; }
.beitrag-karte h2 { font: 1.8rem/1.2 var(--vt); margin: 1rem 0; }
.rubrik-band { color: var(--gold); font-size: .8rem; }
.rubrik-mitteilung { border-top-color: var(--gold); }
.rubrik-fallupdate { border-top-color: #799bc5; }
.rubrik-kommentar { border-top-color: #9ab58e; }
.beitrag-text h2 { margin-top: 2rem; }
.beitrag-text blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; background: var(--panel); border-left: 3px solid var(--gold); color: var(--cream); font-style: italic; }
.beitrag-text blockquote p { margin: 0; }
.beitrag-text ul, .akten-block ul, .akten-block ol { padding-left: 1.3rem; }
.text-erhalten { white-space: pre-wrap; overflow-wrap: anywhere; }
summary { cursor: pointer; line-height: 1.6; overflow-wrap: anywhere; }
input, textarea, select, button { max-width: 100%; }
@media (max-width: 700px) {
  .belegte-zahlen { gap: .4rem; }
  .belegte-zahlen strong { font-size: 2.4rem; }
  .belegte-zahlen p { font-size: .7rem; }
  .hero { padding: 2.5rem 1rem; }
  nav { position: relative; }
  .card-grid { grid-template-columns: minmax(0,1fr); }
  .akte { grid-template-columns: minmax(0,1fr); }
  .archiv-suche .zeile { flex-direction: column; align-items: stretch; }
  .archiv-suche input, .archiv-suche select { width: 100%; min-width: 0; }
}

.password-settings { margin-top: 1.6rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.password-settings summary { cursor: pointer; color: var(--cream); font: 1.2rem var(--vt); }
.password-settings summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.password-settings .auth-panel { margin-top: 1rem; }
@media print { body.js .mc-nav { display: none; } .mc-book { clip-path: none; } }

/* =============================================
   TEAM
   ============================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.team-seite { max-width: 1000px; }
.team-intro { color: var(--muted); font-size: .9rem; line-height: 1.8; max-width: 720px; margin-bottom: 2rem; }
.spielerkarte { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 1.6rem; background: var(--panel); border: 2px solid #000; box-shadow: inset 2px 2px 0 #b9c3c9, inset -2px -2px 0 #555555; padding: 1.6rem; margin: 1rem 0 3rem; }
.spielerkarte.vorsitz { border-top: 4px solid var(--red); }
.farbe-claude { border-top: 4px solid #d97757; }
.farbe-gpt { border-top: 4px solid #10a37f; }
.spieler-kopf { text-align: center; }
.pixelkopf { width: 128px; height: 128px; display: block; margin: 0 auto .8rem; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.6)); animation: kopfnicken 3s ease-in-out infinite; }
.spielerkarte:nth-child(2n) .pixelkopf { animation-delay: -1.5s; }
@keyframes kopfnicken { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.xp { font: 1.5rem var(--vt); color: #80ff20; text-shadow: 2px 2px 0 #1f3d00; }
.herzen { color: #e02020; letter-spacing: 1px; font-size: .95rem; text-shadow: 1px 1px 0 #000; }
.herzen .leer { color: #b9c3c9; }
.herzen.unendlich { font: 1.4rem var(--vt); }
.spieler-akte .team-amt { display: inline-block; margin: 0; font: .5rem var(--pixel); color: var(--dark); background: var(--gold); padding: .35rem .55rem; letter-spacing: 1px; }
.spieler-akte h3 { font: clamp(.9rem, 2.5vw, 1.2rem) var(--pixel); color: var(--cream); margin: .8rem 0 .3rem; line-height: 1.6; }
.team-rang { color: var(--muted); font-size: .8rem; margin-bottom: 1rem; }
.spieler-akte > p { color: var(--muted); font-size: .85rem; line-height: 1.8; margin-bottom: .8rem; }
.spieler-akte blockquote { font: 1.45rem var(--vt); color: var(--gold); border-left: 3px solid var(--red); padding-left: .8rem; margin: 0 0 1rem; line-height: 1.2; }
.spieler-akte p.verzauberung { font: 1.2rem var(--vt); color: #b98cff; text-shadow: 0 0 8px rgba(160,100,255,.55); }
.team-werte { display: grid; gap: .45rem; margin: 1rem 0 1.2rem; }
.team-werte div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .3rem 1rem; align-items: center; font-size: .78rem; }
.team-werte dt { color: var(--text); }
.team-werte dt span { color: var(--muted); }
.wertbalken { display: inline-flex; gap: 2px; }
.wertbalken i { width: 10px; height: 10px; background: #3a3a3a; border: 1px solid #000; }
.wertbalken i.voll { background: #80ff20; box-shadow: inset -2px -2px 0 #3c8a00; }
.hotbar { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 42px)); gap: 0; margin: 1.2rem 0; border: 3px solid #000; width: max-content; max-width: 100%; }
.hotbar li { aspect-ratio: 1; display: grid; place-items: center; font-size: 1.25rem; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; cursor: default; }
.hotbar li[title]:hover { background: #a8a8a8; }
.erfolge { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem; }
.erfolge li { background: #262626; border: 2px solid #6b6b6b; box-shadow: inset 0 0 0 2px #000; padding: .55rem .8rem; display: grid; min-width: 210px; flex: 1; }
.erfolge strong { font: 1.1rem var(--vt); color: var(--gold); font-weight: normal; }
.erfolge span { color: #fff; font-size: .82rem; }
.erfolge small { color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.team-belege { font-size: .78rem; }
.team-belege a { color: var(--gold); }
.kanzlei { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
.kanzlei .spielerkarte { grid-template-columns: minmax(0,1fr); margin: 0 0 3rem; }
.kanzlei .hotbar { grid-template-columns: repeat(9, minmax(0, 34px)); }
.offene-stelle { border: 2px dashed var(--gold); box-shadow: none; background: transparent; }
.pixelkopf.fragezeichen { display: grid; place-items: center; background: #3a3a3a; border: 4px solid #000; font: 3rem var(--pixel); color: var(--gold); animation: none; filter: none; }
.team-hinweis { text-align: center; }
@media (max-width: 900px) { .kanzlei { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) {
  .spielerkarte { grid-template-columns: minmax(0,1fr); padding: 1.1rem; }
  .hotbar, .kanzlei .hotbar { grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; }
  .hotbar li { font-size: 1rem; }
  .team-werte div { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { .pixelkopf { animation: none; } }

/* =============================================
   DESIGN-SCHICHT: KAMPAGNENBLAU + MINECRAFT
   Parodie auf den Look deutscher Parteiseiten:
   helles Blau, Weiß, Signalrot, fette Versalien.
   Minecraft: Grasblock-Kanten, Pixelwolken, Fasen.
   ============================================= */
html { font-size: 17px; scroll-behavior: smooth; }
::selection { background: var(--red); color: #fff; }
body { font-family: var(--sans); background: var(--dark); background-image: none; color: var(--text); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
main p, main li, .policy-section p, .akten-block p, .card p, .team-intro, .auth-intro { color: var(--text); }
.field-help, .team-rang, .akte .meta, .treffer-kopf { color: var(--muted); }

/* Oberste Leiste */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--navy); color: #d8ecf7; font: 600 .78rem var(--sans); padding: .4rem 1.5rem; letter-spacing: .3px;
}
.topbar-herz { color: #ff4d57; display: inline-block; animation: herzschlag 2.4s ease-in-out infinite; }
.topbar-cta { font: .5rem var(--pixel); color: #fff; background: var(--signal); padding: .45rem .7rem; text-decoration: none;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.3), inset -2px -2px 0 rgba(0,0,0,.25); transition: transform .12s, filter .15s; }
.topbar-cta:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* Navigation: weiß, fett, Versalien */
nav { background: var(--surface); border-bottom: 0; box-shadow: 0 2px 0 var(--border), 0 6px 18px rgba(11,60,93,.08); padding: .55rem 1.5rem; }
nav .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand-block {
  display: grid; place-items: center; width: 52px; height: 52px; background: var(--red); color: #fff; font: .72rem var(--pixel);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.35), inset -3px -3px 0 rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.3,1.6,.5,1);
}
nav .brand:hover .brand-block { transform: rotate(-6deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; font: 800 1.35rem/1 var(--head); text-transform: uppercase; color: var(--titel); letter-spacing: .5px; }
.brand-text small { font: .45rem/1.8 var(--pixel); color: var(--red); letter-spacing: 1px; }
nav a:not(.brand) {
  position: relative; color: var(--titel); font: 700 1rem var(--head); text-transform: uppercase; letter-spacing: .6px;
  border: 0; padding: .5rem .6rem; transition: color .15s, background .15s;
}
nav a:not(.brand)::after { content: ''; position: absolute; left: .6rem; right: .6rem; bottom: .15rem; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .2s steps(5); }
nav a:not(.brand):hover, nav a.active { color: var(--red); background: transparent; border-color: transparent; }
nav a:not(.brand):hover::after, nav a.active::after { transform: scaleX(1); }
.nav-account { border-left-color: var(--border); }
.nav-account a { font-size: .85rem !important; }
.nav-logout { color: var(--titel); font: 700 .85rem var(--head); text-transform: uppercase; }
.nav-logout:hover { color: var(--red); border-color: transparent; }

/* Kopfbereiche: Kampagnenblau, Pixelwolken, Grasblock-Kante */
.hero, .page-header {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background: linear-gradient(180deg, var(--hero-a) 0%, var(--hero-b) 100%); border-bottom: 0; padding-bottom: 4.5rem;
}
.hero { padding-top: 4.5rem; }
.hero::after, .page-header::after {
  content: ''; position: absolute; inset: 0 -900px 0 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='140' shape-rendering='crispEdges'><rect x='40' y='30' width='96' height='16' fill='%23fff'/><rect x='24' y='46' width='136' height='16' fill='%23fff'/><rect x='56' y='62' width='72' height='12' fill='%23fff'/><rect x='430' y='70' width='120' height='16' fill='%23fff'/><rect x='410' y='86' width='176' height='16' fill='%23fff'/><rect x='450' y='102' width='88' height='12' fill='%23fff'/><rect x='700' y='24' width='64' height='12' fill='%23fff'/><rect x='688' y='36' width='104' height='14' fill='%23fff'/></svg>");
  background-repeat: repeat-x; background-position: 0 10px; opacity: .35; animation: wolkenzug 80s linear infinite;
}
@keyframes wolkenzug { to { transform: translateX(-900px); } }
.hero::before, .page-header::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 28px; transform: none; font-size: 0; opacity: 1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #6fb43a 0 14px, #5d9e2f 14px 28px, #7cc444 28px 42px, #5d9e2f 42px 56px) top / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, #866043 0 14px, #79553a 14px 28px, #93694a 28px 42px, #6f4d34 42px 56px) bottom / 100% 18px no-repeat;
}
.hero h1, .page-header h1 {
  display: inline; font: 800 clamp(2rem, 6vw, 3.6rem)/1.35 var(--head); text-transform: uppercase; letter-spacing: .5px;
  color: #fff; background: var(--navy); padding: .05em .35em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-shadow: none; animation: titel-ein .6s cubic-bezier(.2,.8,.2,1) both;
}
.page-header h1 { font-size: clamp(1.6rem, 4.5vw, 2.6rem); }
.page-header .icon { filter: drop-shadow(3px 3px 0 rgba(0,0,0,.25)); }
.hero .auth-eyebrow, .page-header .subtitle {
  display: table; margin: 0 auto 1.1rem; font: .55rem/1.8 var(--pixel); color: var(--titel); background: var(--surface); padding: .35rem .7rem; letter-spacing: 1px;
  box-shadow: 3px 3px 0 rgba(11,60,93,.3); animation: titel-ein .6s .1s cubic-bezier(.2,.8,.2,1) both;
}
.page-header .subtitle { margin: 1.3rem auto 0; }
.hero .sub { color: #fff; font: 600 1.1rem/1.6 var(--sans); max-width: 720px; margin: 1.6rem auto 2rem; text-shadow: 0 1px 2px rgba(0,0,0,.15); animation: titel-ein .6s .18s both; }
.hero .aktionen { animation: titel-ein .6s .26s both; }
@keyframes titel-ein { from { opacity: 0; transform: translateY(12px); } }

/* Überschriften */
main h1 { font: 800 clamp(1.9rem, 5vw, 2.8rem)/1.15 var(--head); text-transform: uppercase; color: var(--titel); }
.auth-page h1, .accounts-page h1 { font: 800 clamp(1.9rem, 5vw, 2.6rem)/1.15 var(--head); text-transform: uppercase; color: var(--titel); }
.section-title {
  display: flex; align-items: center; gap: .7rem; font: 800 clamp(1.5rem, 3.5vw, 2rem)/1.1 var(--head);
  text-transform: uppercase; letter-spacing: .5px; color: var(--titel); margin-bottom: .8rem;
}
.section-title::before {
  content: ''; width: 22px; height: 22px; flex: none;
  background: linear-gradient(#6fb43a 0 7px, #866043 7px); box-shadow: inset -3px -3px 0 rgba(0,0,0,.2), inset 3px 0 0 rgba(255,255,255,.15);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.section-title:hover::before { transform: rotate(90deg); }
.auth-eyebrow { font: .55rem/1.8 var(--pixel); color: var(--red); }
.card h3, .akte h3, .akten-block h2, .akten-kopf h1, .policy-section h2, .auth-panel h2, .account-row h2, .spieler-akte h3 {
  font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--titel); line-height: 1.2;
}
.card h3 { font-size: 1.35rem; }
.akte h3 { font-size: 1.2rem; }
.akten-block h2, .policy-section h2 { font-size: 1.3rem; }
.akten-kopf h1 { font-size: 1.6rem; }
.auth-panel h2, .account-row h2 { font-size: 1.5rem; }
.policy-section h2 { border-left: 6px solid var(--red); padding-left: .7rem; }
.policy-section h3 { color: var(--dark-red); }

/* Knöpfe: Signalrot mit Minecraft-Fase */
.btn {
  position: relative; overflow: hidden; font: .6rem/1.8 var(--pixel); padding: .8rem 1.4rem;
  background: var(--signal); color: #fff; border: 2px solid #7a0209;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.25), 0 4px 0 #7a0209;
  transition: transform .1s, box-shadow .1s, filter .15s;
}
.btn::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); transition: left .5s; }
.btn:hover { background: #f5121f; transform: translateY(-2px); box-shadow: inset 3px 3px 0 rgba(255,255,255,.35), inset -3px -3px 0 rgba(0,0,0,.25), 0 6px 0 #7a0209, 0 10px 20px rgba(227,6,19,.25); }
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 rgba(0,0,0,.2), 0 1px 0 #7a0209; }
.btn-outline { background: var(--surface); color: var(--titel); border-color: var(--titel); box-shadow: inset -3px -3px 0 rgba(11,60,93,.15), 0 4px 0 var(--titel); }
.btn-outline:hover { background: var(--surface); color: var(--red); box-shadow: inset -3px -3px 0 rgba(11,60,93,.15), 0 6px 0 var(--titel), 0 10px 20px rgba(11,60,93,.2); }
.btn-outline:active { box-shadow: 0 1px 0 var(--titel); }

/* Karten und Akten: weiß, blaue Kante, Lichtkegel */
.card, .akte, .akten-block, .auth-panel, .zitat-karte, .account-row, .stat-box, .archiv-suche, .akten-kopf {
  --mx: 50%; --my: 50%; background-color: var(--surface);
  background-image: radial-gradient(360px circle at var(--mx) var(--my), rgba(0,159,227,0), transparent 60%);
  box-shadow: 0 1px 2px rgba(11,60,93,.06), 0 4px 14px rgba(11,60,93,.05);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}
.card:hover, .akte:hover, .akten-block:hover, .zitat-karte:hover, .stat-box:hover {
  background-image: radial-gradient(360px circle at var(--mx) var(--my), rgba(0,159,227,.08), transparent 60%);
  box-shadow: 0 2px 0 var(--border), 0 14px 30px rgba(11,60,93,.14);
}
.card { border: 1px solid var(--border); border-top: 5px solid var(--red); }
.card:hover { transform: translateY(-4px); }
.card a { color: var(--signal); font: 700 .95rem var(--head); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid transparent; transition: border-color .15s, padding .15s; }
.card a:hover { color: var(--signal); border-color: var(--signal); padding-left: 4px; }
.akte { border-left: 5px solid var(--border); }
.akte:hover { border-left-color: var(--red); background-color: var(--surface); transform: translateX(4px); }
.akte .auszug { color: var(--text-soft); }
.akte .auszug mark { background: #fff1a8; color: var(--titel); }
.akte .fundstelle { color: var(--dark-red); }
.akten-block { border-left: 5px solid var(--red); }
.akten-kopf, .archiv-suche, .auth-panel { border-top: 5px solid var(--red); }
.akten-tabelle th { color: var(--muted); }
.zitat-karte .text { color: var(--titel); }
.quote-block { background: var(--surface-2); color: var(--titel); }
.beitrag-text blockquote { border-left: 5px solid var(--red); background: var(--surface-2); color: var(--titel); font-style: italic; }
.policy-list li { transition: border-color .2s, background .2s, transform .2s; }
.policy-list li:hover { border-left-color: var(--red); background: var(--surface-2); transform: translateX(3px); }
.policy-list li::before { color: var(--red); }

/* Filter, Werkzeuge, Badges */
.facette, .werkzeug { background: var(--surface); color: var(--titel); border-color: var(--border); transition: color .15s, border-color .15s, background .15s, transform .15s; }
.facette:hover, .werkzeug:hover { color: var(--red); border-color: var(--red); background: var(--surface-2); transform: translateY(-1px); }
.facette.aktiv { color: #fff; background: var(--red); border-color: var(--red); }
.facette.aktiv .n { color: #d8f0fb; }
.pill-warn { color: #8a5a00; border-color: #e0b44a; background: #fff6dc; }
.pill-gut { color: #2d6e16; background: #eef8e8; }
.pill-schlecht { color: #b00d12; background: #fdeced; }
.badge-partei-afp { color: #0072a8; background: #e6f5fc; }
.badge-partei-mkp { color: #a24f00; background: #fff1e3; }
.badge-partei-cives { color: #6a2e91; background: #f4ebfa; }
.warnung-unvollstaendig { color: #9a5a00; background: #fff6dc; border-color: #e0b44a; }
.role-trusted { color: #2d6e16; }
.role-admin { color: #0072a8; border-color: #0072a8; }
.auth-notice { background: #eef8e8; color: #1d4a10; }
.alert { background: #fdeced; color: #6e0a0e; }
.leer { color: var(--muted); }

/* Formulare */
.form-group input, .form-group select, .form-group textarea, .archiv-suche input[type="search"], .archiv-suche select, .aktionen select {
  background: var(--surface); color: var(--text); border: 2px solid var(--border); transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .archiv-suche input[type="search"]:focus {
  border-color: var(--red); box-shadow: 0 0 0 4px rgba(0,159,227,.15);
}
.form-group label { color: var(--titel); font: 700 1rem var(--head); text-transform: uppercase; letter-spacing: .4px; }

/* Kennzahlen: XP-Stil */
.belegte-zahlen p { background: var(--surface); border: 1px solid var(--border); padding: 1.2rem .6rem 1rem; position: relative; transition: transform .2s, box-shadow .2s; color: var(--muted); font-weight: 600; }
.belegte-zahlen p::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, #80ff20 0 18px, #3c8a00 18px 20px); transform: scaleX(0); transform-origin: left; transition: transform .8s steps(12); }
.js-anim .belegte-zahlen.sichtbar p::after, .belegte-zahlen p:hover::after { transform: scaleX(1); }
html:not(.js-anim) .belegte-zahlen p::after { transform: scaleX(1); }
.belegte-zahlen p:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(11,60,93,.12); }
.belegte-zahlen strong { font: 800 3.2rem/1 var(--head); color: var(--red); text-shadow: none; margin-bottom: .3rem; }

/* Links im Inhalt */
main a:not(.btn):not(.card a):not(.akte):not(.facette):not(.werkzeug):not(.mc-seite a) {
  color: var(--dark-red); font-weight: 600; text-decoration: none;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size .25s, color .15s;
  border-bottom: 2px solid rgba(0,159,227,.25);
}
main a:not(.btn):not(.card a):not(.akte):not(.facette):not(.werkzeug):not(.mc-seite a):hover { color: var(--red); background-size: 100% 2px; border-bottom-color: transparent; }
.breadcrumb { background: var(--surface); border-bottom: 1px solid var(--border); }
.breadcrumb a { color: var(--dark-red); }

/* Footer */
footer { position: relative; background: var(--navy); color: #cfe6f3; border-top: 0; padding-top: 2.4rem; }
footer strong { color: #fff; font: 800 1.2rem var(--head); text-transform: uppercase; letter-spacing: .5px; }
footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, #6fb43a 0 14px, #5d9e2f 14px 28px, #7cc444 28px 42px, #5d9e2f 42px 56px); }

/* Team auf hellem Grund */
.spielerkarte { background: var(--surface); border: 2px solid var(--titel); box-shadow: inset -4px -4px 0 var(--line-soft), 6px 6px 0 rgba(11,60,93,.15); transition: transform .2s, box-shadow .2s; }
.spielerkarte:hover { transform: translate(-2px, -2px); box-shadow: inset -4px -4px 0 var(--line-soft), 10px 10px 0 rgba(11,60,93,.18); }
.spielerkarte.vorsitz { border-top: 6px solid var(--red); }
.farbe-claude { border-top: 6px solid #d97757; }
.farbe-gpt { border-top: 6px solid #10a37f; }
.offene-stelle { border: 3px dashed var(--red); box-shadow: none; }
.spieler-akte .team-amt { background: var(--red); color: #fff; }
.spieler-akte h3 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin: .6rem 0 .2rem; }
.spieler-akte blockquote { color: var(--titel); font: 700 1.25rem/1.3 var(--head); border-left: 5px solid var(--signal); }
.spieler-akte p.verzauberung { color: #7a3fe0; text-shadow: 0 0 10px rgba(122,63,224,.35); }
.xp { color: #80ff20; text-shadow: 2px 2px 0 #1f3d00, -1px -1px 0 #1f3d00, 1px -1px 0 #1f3d00, -1px 1px 0 #1f3d00; }
.team-werte dt { color: var(--text); }
.pixelkopf.fragezeichen { background: var(--surface-2); border-color: var(--titel); color: var(--red); }
.hotbar li { transition: transform .12s, box-shadow .12s, background .12s; }
.hotbar li[title]:hover { transform: scale(1.12); z-index: 1; background: #b5b5b5; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff, 0 0 0 2px #fff, 0 0 0 4px var(--titel); }
.hotbar li[title]:hover span[aria-hidden] { display: inline-block; animation: item-hopser .35s steps(4); }
@keyframes item-hopser { 50% { transform: translateY(-4px); } }
.herzen:hover span:not(.leer), .herzen.unendlich:hover { display: inline-block; animation: herzschlag .6s ease-in-out 2; }
@keyframes herzschlag { 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }
.erfolge li { transition: transform .2s, border-color .2s; }
.erfolge li:hover { transform: translateY(-2px); border-color: #ffd23f; }
.erfolge strong { color: #ffd23f; }
.spielerkarte:hover .pixelkopf { animation-duration: 1.2s; }

/* Einblenden beim Scrollen (nur mit JavaScript) */
.js-anim .einblenden { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: var(--verz, 0s); }
.js-anim .einblenden.sichtbar { opacity: 1; transform: none; }
.js-anim .einblenden .wertbalken i.voll { transform: scaleY(0); transform-origin: bottom; }
.js-anim .einblenden.sichtbar .wertbalken i.voll { transform: none; transition: transform .25s steps(3); }
.js-anim .einblenden.sichtbar .wertbalken i.voll:nth-child(n+3) { transition-delay: .1s; }
.js-anim .einblenden.sichtbar .wertbalken i.voll:nth-child(n+5) { transition-delay: .2s; }
.js-anim .einblenden.sichtbar .wertbalken i.voll:nth-child(n+7) { transition-delay: .3s; }
.js-anim .einblenden.sichtbar .wertbalken i.voll:nth-child(n+9) { transition-delay: .4s; }

@media (max-width: 900px) {
  nav a:not(.brand) { font-size: .9rem; padding: .4rem .45rem; }
}
@media (max-width: 700px) {
  .topbar { justify-content: center; text-align: center; padding: .4rem 1rem; }
  .topbar-text { font-size: .72rem; }
  nav { padding: .5rem 1rem; }
  nav .brand { width: 100%; margin-bottom: .2rem; }
  .brand-block { width: 44px; height: 44px; }
  .hero { padding: 3rem 1rem 4rem; }
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .belegte-zahlen strong { font-size: 2.3rem; }
  .belegte-zahlen p { font-size: .75rem; padding: .9rem .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js-anim .einblenden { opacity: 1; transform: none; }
}
.erfolge span { color: #fff; }
.erfolge small { color: #c3ccd3; }
.archiv-suche input[type="search"], .archiv-suche select, .form-group input, .form-group select, .form-group textarea { font-family: var(--sans); }
@media (max-width: 520px) { .topbar-text { display: none; } .topbar { justify-content: flex-end; padding: .35rem 1rem; } }

/* =============================================
   DUNKELMODUS
   ============================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --red:        #22b2f2;
  --dark-red:   #6ccaf6;
  --gold:       #8fd3f5;
  --cream:      #eaf4fb;
  --dark:       #0b1620;
  --panel:      #12212d;
  --surface:    #12212d;
  --surface-2:  #182c3b;
  --border:     #23394b;
  --line-soft:  #1d3142;
  --text:       #d9e6ee;
  --text-soft:  #b3c4d0;
  --muted:      #8ea3b3;
  --titel:      #eaf4fb;
  --navy:       #051019;
  --hero-a:     #0379b3;
  --hero-b:     #045f8e;
  --blue-glow:  rgba(34,178,242,.25);
}
[data-theme="dark"] body { background: var(--dark); }
[data-theme="dark"] nav { box-shadow: 0 2px 0 var(--border), 0 6px 18px rgba(0,0,0,.35); }
[data-theme="dark"] .brand-text small { color: var(--red); }
[data-theme="dark"] .hero::after, [data-theme="dark"] .page-header::after { opacity: .18; }
[data-theme="dark"] .hero .auth-eyebrow, [data-theme="dark"] .page-header .subtitle { background: var(--navy); color: #eaf4fb; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
[data-theme="dark"] .hero::before, [data-theme="dark"] .page-header::before, [data-theme="dark"] footer::before { filter: brightness(.8); }
[data-theme="dark"] .card, [data-theme="dark"] .akte, [data-theme="dark"] .akten-block, [data-theme="dark"] .auth-panel,
[data-theme="dark"] .zitat-karte, [data-theme="dark"] .account-row, [data-theme="dark"] .stat-box, [data-theme="dark"] .archiv-suche,
[data-theme="dark"] .akten-kopf, [data-theme="dark"] .belegte-zahlen p { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.3); }
[data-theme="dark"] .card:hover, [data-theme="dark"] .akte:hover, [data-theme="dark"] .akten-block:hover, [data-theme="dark"] .zitat-karte:hover {
  background-image: radial-gradient(360px circle at var(--mx) var(--my), rgba(34,178,242,.1), transparent 60%);
  box-shadow: 0 2px 0 var(--border), 0 14px 30px rgba(0,0,0,.45);
}
[data-theme="dark"] .btn-outline { background: transparent; color: var(--titel); border-color: var(--titel); box-shadow: 0 4px 0 #5f7c90; }
[data-theme="dark"] .btn-outline:hover { background: rgba(255,255,255,.06); color: var(--red); box-shadow: 0 6px 0 #5f7c90, 0 10px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .hero .btn-outline { color: #fff; border-color: #fff; }
[data-theme="dark"] .akte .auszug mark { background: #5c4a00; color: #fff3b0; }
[data-theme="dark"] .pill-warn, [data-theme="dark"] .warnung-unvollstaendig { color: #ffd479; background: rgba(224,180,74,.12); border-color: #8a6a1c; }
[data-theme="dark"] .pill-gut, [data-theme="dark"] .auth-notice { color: #a9e08f; background: rgba(90,170,50,.12); border-color: #3f7a24; }
[data-theme="dark"] .pill-schlecht, [data-theme="dark"] .alert { color: #ff9ca0; background: rgba(215,20,26,.14); border-color: #a3272b; }
[data-theme="dark"] .pill-neutral, [data-theme="dark"] .badge-partei-none { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .badge-partei-afp { color: #7fd0f7; background: rgba(34,178,242,.12); }
[data-theme="dark"] .badge-partei-mkp { color: #ffb066; background: rgba(224,122,26,.14); }
[data-theme="dark"] .badge-partei-cives { color: #d3a8f0; background: rgba(123,63,160,.2); }
[data-theme="dark"] .role-trusted { color: #a9e08f; }
[data-theme="dark"] .role-admin { color: var(--red); border-color: var(--red); }
[data-theme="dark"] .facette.aktiv { color: #04131d; }
[data-theme="dark"] .spielerkarte { border-color: #3a5a72; box-shadow: inset -4px -4px 0 var(--line-soft), 6px 6px 0 rgba(0,0,0,.35); }
[data-theme="dark"] .spielerkarte:hover { box-shadow: inset -4px -4px 0 var(--line-soft), 10px 10px 0 rgba(0,0,0,.4); }
[data-theme="dark"] .spieler-akte p.verzauberung { color: #c29bff; text-shadow: 0 0 10px rgba(160,110,255,.45); }
[data-theme="dark"] .pixelkopf.fragezeichen { border-color: #3a5a72; }
[data-theme="dark"] .mc-book { filter: brightness(.92); }
[data-theme="dark"] .buchtext { background: #efe4c6; }
[data-theme="dark"] ::selection { color: #04131d; }

/* Umschalter Hell/Dunkel: kleiner Pixelblock mit Sonne oder Mond */
.theme-schalter {
  display: inline-grid; place-items: center; width: 38px; height: 38px; margin-left: .3rem; cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--border); color: var(--titel);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.12); transition: transform .25s cubic-bezier(.3,1.6,.5,1), border-color .15s;
}
.theme-schalter:hover { transform: rotate(-8deg) scale(1.08); border-color: var(--red); }
.theme-schalter:active { transform: scale(.94); }
.theme-schalter svg { width: 20px; height: 20px; shape-rendering: crispEdges; }
.theme-schalter .mond { display: none; }
[data-theme="dark"] .theme-schalter .sonne { display: none; }
[data-theme="dark"] .theme-schalter .mond { display: block; }
.theme-wechsel, .theme-wechsel *, .theme-wechsel *::before, .theme-wechsel *::after { transition: background-color .35s, color .35s, border-color .35s !important; }
[data-theme="dark"] .spielerkarte { border-color: #3a5a72; }
[data-theme="dark"] .spielerkarte.vorsitz { border-top-color: var(--red); }
[data-theme="dark"] .farbe-claude { border-top-color: #d97757; }
[data-theme="dark"] .farbe-gpt { border-top-color: #10a37f; }
[data-theme="dark"] .card a, [data-theme="dark"] .card a:hover { color: #ff5a63; border-color: #ff5a63; }
[data-theme="dark"] .card a:not(:hover) { border-color: transparent; }

/* =============================================
   CHAT
   ============================================= */
.nav-chat { display: inline-flex; align-items: center; gap: .35rem; }
.chat-zaehler {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  background: var(--signal); color: #fff; font: .45rem var(--pixel); line-height: 1;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.25); animation: zaehler-ein .4s cubic-bezier(.3,1.6,.5,1);
}
@keyframes zaehler-ein { from { transform: scale(0); } }
.chat-seite {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.2rem; max-width: 1180px;
  height: calc(100vh - 150px); min-height: 480px; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.chat-liste, .chat-fenster {
  background: var(--surface); border: 1px solid var(--border); border-top: 5px solid var(--red);
  box-shadow: 0 4px 14px rgba(11,60,93,.06); min-height: 0; display: flex; flex-direction: column;
}
.chat-liste { padding: 1rem; }
.chat-liste h1 { font-size: 2rem; margin-bottom: .8rem; }
.chat-start label { display: block; font: 700 .95rem var(--head); text-transform: uppercase; color: var(--titel); margin-bottom: .35rem; }
.chat-start-zeile { display: flex; gap: .5rem; }
.chat-start select { flex: 1; min-width: 0; padding: .55rem; background: var(--surface); color: var(--text); border: 2px solid var(--border); font: 1rem var(--sans); }
.chat-start .btn { padding: .6rem .9rem; }
.chat-eintraege { list-style: none; margin: 1rem -.4rem 0; overflow-y: auto; flex: 1; }
.chat-eintrag {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .7rem; align-items: center;
  padding: .6rem .5rem; text-decoration: none !important; color: var(--text) !important; background: none !important;
  border: 0 !important; border-left: 4px solid transparent !important; transition: background-color .15s, border-color .15s;
}
.chat-eintrag:hover { background-color: var(--surface-2) !important; }
.chat-eintrag.aktiv { background-color: var(--surface-2) !important; border-left-color: var(--red) !important; }
.chat-avatar {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; background: var(--red); color: #fff;
  font: .8rem var(--pixel); box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.2);
}
.chat-avatar.ist-online::after {
  content: ''; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px;
  background: #49c628; border: 3px solid var(--surface); box-shadow: inset -2px -2px 0 rgba(0,0,0,.2);
}
.chat-meta { display: flex; flex-direction: column; min-width: 0; }
.chat-meta strong { font: 700 1.1rem var(--head); text-transform: uppercase; color: var(--titel); }
.chat-meta small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.chat-anwesenheit { color: var(--muted); font-size: .72rem; line-height: 1.2; }
.chat-anwesenheit.ist-online { color: #278d15; font-weight: 800; }
[data-theme="dark"] .chat-anwesenheit.ist-online { color: #80e36b; }
.chat-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.chat-rechts time { color: var(--muted); font-size: .72rem; }
.chat-kopf { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.chat-kopf h2 { font: 800 1.5rem var(--head); text-transform: uppercase; color: var(--titel); }
.chat-zurueck { display: none; font-size: 1.4rem; text-decoration: none !important; background: none !important; border: 0 !important; }
.chat-verlauf {
  flex: 1; overflow-y: auto; padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: .55rem; overscroll-behavior: contain;
  background-color: var(--dark);
  background-image: linear-gradient(rgba(0,159,227,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,159,227,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.chat-verlauf .leer { margin: auto; }
.blase {
  position: relative; max-width: min(75%, 520px); align-self: flex-start; padding: .55rem .8rem .4rem;
  background: var(--surface); color: var(--text); border: 2px solid var(--border);
  box-shadow: 3px 3px 0 rgba(11,60,93,.12);
}
.blase.eigen { align-self: flex-end; background: var(--red); color: #fff; border-color: var(--dark-red); box-shadow: 3px 3px 0 rgba(0,60,100,.3); }
.blase::after {
  content: ''; position: absolute; bottom: -8px; left: 10px; width: 8px; height: 8px; background: inherit;
  border: inherit; border-top: 0; border-right: 0; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.blase.eigen::after { left: auto; right: 10px; transform: scaleX(-1); }
.blase p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: inherit !important; margin: 0; }
.blase time { display: block; text-align: right; font-size: .68rem; opacity: .7; margin-top: .2rem; }
.blase-medium { display: block; margin: -.2rem -.45rem .35rem; background: none !important; border: 0 !important; }
.blase img, .blase video { display: block; max-width: 100%; max-height: 360px; border: 2px solid rgba(0,0,0,.15); background: #000; }
.blase.neu { animation: blase-ein .3s cubic-bezier(.3,1.4,.5,1); }
@keyframes blase-ein { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.chat-eingabe {
  position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .5rem; align-items: end;
  padding: .8rem; border-top: 1px solid var(--border); background: var(--surface);
}
.chat-eingabe textarea {
  resize: none; min-height: 44px; max-height: 160px; padding: .6rem .7rem; font: 1rem/1.4 var(--sans);
  background: var(--surface); color: var(--text); border: 2px solid var(--border); transition: border-color .15s, box-shadow .15s;
}
.chat-eingabe textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(0,159,227,.15); }
.chat-anhang {
  width: 44px; height: 44px; font-size: 1.2rem; cursor: pointer; background: var(--surface-2); border: 2px solid var(--border);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.1); transition: transform .2s cubic-bezier(.3,1.6,.5,1), border-color .15s;
}
.chat-anhang:hover:not(:disabled) { transform: rotate(-12deg) scale(1.08); border-color: var(--red); }
.chat-anhang:disabled { opacity: .5; cursor: progress; }
.chat-senden { min-height: 44px; }
.chat-fortschritt { grid-column: 1 / -1; height: 10px; background: #2a2a2a; border: 2px solid #000; }
.chat-fortschritt span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #80ff20 0 14px, #3c8a00 14px 16px); transition: width .2s steps(8); }
.chat-fehler { grid-column: 1 / -1; color: var(--danger); font-weight: 600; font-size: .9rem; }
.chat-leerzustand { margin: auto; text-align: center; padding: 2rem; color: var(--muted); }
.chat-pixelblase {
  width: 96px; height: 72px; margin: 0 auto 1.2rem; display: grid; place-items: center; background: var(--red); color: #fff;
  font: 1.2rem var(--pixel); box-shadow: inset 4px 4px 0 rgba(255,255,255,.3), inset -4px -4px 0 rgba(0,0,0,.2);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 40% 80%, 25% 100%, 25% 80%, 0 80%); animation: kopfnicken 2.5s ease-in-out infinite;
}
@media (max-width: 800px) {
  .chat-seite { grid-template-columns: minmax(0,1fr); height: calc(100dvh - 130px); padding: .8rem; }
  .chat-seite.hat-aktiv .chat-liste { display: none; }
  .chat-seite:not(.hat-aktiv) .chat-fenster { display: none; }
  .chat-zurueck { display: inline-block; }
  .blase { max-width: 88%; }
}

/* =============================================
   BEWEISMITTEL
   ============================================= */
.archiv-reiter { display: flex; gap: .4rem; margin-bottom: 1.4rem; border-bottom: 3px solid var(--border); flex-wrap: wrap; }
.archiv-reiter a {
  font: 800 1.15rem var(--head) !important; text-transform: uppercase; letter-spacing: .4px; padding: .6rem 1rem; margin-bottom: -3px;
  color: var(--muted) !important; text-decoration: none; background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important;
  transition: color .15s, border-color .15s;
}
.archiv-reiter a:hover { color: var(--titel) !important; }
.archiv-reiter a.aktiv { color: var(--titel) !important; border-bottom-color: var(--red) !important; }
.archiv-reiter a span { font: .5rem var(--pixel); background: var(--surface-2); color: var(--titel); padding: .2rem .4rem; margin-left: .3rem; vertical-align: middle; }
.beweis-akte { grid-template-columns: 2.6rem minmax(0,1fr) auto; }
.beweis-pills { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.ki-band {
  border: 3px solid var(--danger); background: #fdeced; color: #8a0a10; padding: .7rem 1rem; margin-bottom: .8rem;
  font: 700 1rem var(--sans); box-shadow: 4px 4px 0 rgba(215,20,26,.2);
}
.ki-band strong { font-family: var(--head); font-size: 1.2rem; letter-spacing: .5px; margin-right: .3rem; }
[data-theme="dark"] .ki-band { background: rgba(215,20,26,.15); color: #ffb3b6; border-color: #e0343b; }
.integritaet-gesperrt { border: 3px dashed var(--danger); padding: 1.2rem; background: var(--surface); color: var(--text); }
.beweis-seite h1 { margin-bottom: 1.2rem; }
.beweis-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; }
.beweis-player { width: 100%; display: block; background: #000; border: 3px solid var(--titel); box-shadow: 6px 6px 0 rgba(11,60,93,.18); }
.beweis-audio { display: flex; align-items: center; gap: 1rem; padding: 1.2rem; background: var(--surface); border: 3px solid var(--titel); box-shadow: 6px 6px 0 rgba(11,60,93,.18); }
.beweis-audio span { font-size: 2.4rem; animation: kopfnicken 2.5s ease-in-out infinite; }
.beweis-audio audio { flex: 1; min-width: 0; }
.beweis-medium .section-title { margin-top: 1.8rem; font-size: 1.4rem; }
.standbild-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.standbild-vergleich figure { margin: 0; background: var(--surface); border: 1px solid var(--border); padding: .5rem; transition: transform .2s, box-shadow .2s; }
.standbild-vergleich figure:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(11,60,93,.15); }
.standbild-vergleich img { display: block; width: 100%; height: auto; }
.standbild-vergleich a { background: none !important; border: 0 !important; }
.standbild-vergleich figcaption { font: 800 1.05rem var(--head); text-transform: uppercase; color: var(--titel); padding: .5rem .2rem .1rem; }
.beweis-layout .akten-kopf h2 { font: 800 1.6rem var(--head); color: var(--titel); margin-bottom: .6rem; }
.pruefsumme { font: .72rem/1.5 var(--mono); word-break: break-all; }
.beweis-download { margin-top: 1rem; }
.beweis-befunde ol, .pruefbericht ol { padding-left: 1.4rem; }
.beweis-befunde li, .pruefbericht li { margin: .45rem 0; line-height: 1.6; }
.anwalt-karte { background: var(--surface); border-left: 6px solid var(--red); padding: 1.3rem 1.5rem; margin-bottom: 1.3rem; }
.anwalt-karte.intern { border-left-color: #e0913a; background: repeating-linear-gradient(135deg, var(--surface) 0 18px, var(--surface-2) 18px 36px); }
.anwalt-karte .kat { font: .5rem/1.8 var(--pixel); color: var(--red); margin-bottom: .6rem; letter-spacing: 1px; }
.anwalt-karte.intern .kat { color: #b36a12; }
.anwalt-text p, .anwalt-text li { color: var(--text); line-height: 1.75; margin-bottom: .7rem; }
.anwalt-text ol { padding-left: 1.4rem; }
.beweis-hinweis { border-left-color: var(--danger) !important; }
@media (max-width: 900px) { .beweis-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .standbild-vergleich { grid-template-columns: minmax(0,1fr); } .beweis-akte { grid-template-columns: minmax(0,1fr); } .beweis-pills { align-items: flex-start; } }

/* Abstimmungsarchiv */
.abstimmungs-akte { grid-template-columns: 2.6rem minmax(0,1fr) auto; }
.stimmen-kurz { display: flex; gap: .45rem; margin-top: .55rem; font: 800 .9rem var(--head); }
.stimmen-kurz span { min-width: 2.4rem; padding: .18rem .45rem; background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.stimme-ja { color: #278d15; }
.stimme-nein { color: var(--danger); }
.stimme-enthaltung { color: var(--muted); }
.abstimmungs-seite > h1 { margin-bottom: 1.2rem; }
.abstimmungs-layout { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.4fr); gap: 1.3rem; align-items: start; }
.abstimmungs-layout .akten-kopf h2 { font: 800 1.55rem var(--head); color: var(--titel); margin-bottom: .7rem; text-transform: uppercase; }
.abstimmungs-zusammenfassung { margin-top: 1rem; color: var(--text); line-height: 1.65; }
.abstimmungs-quelle { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.1rem; }
.abstimmungs-quelle small { color: var(--muted); }
.stimmen-grid { display: grid; gap: .8rem; }
.stimmen-karte { background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--muted); padding: 1rem 1.15rem; }
.stimmen-karte h2 { display: flex; align-items: center; gap: .5rem; font: 800 1.25rem var(--head); color: var(--titel); text-transform: uppercase; }
.stimmen-karte h2 strong { margin-left: auto; display: grid; place-items: center; min-width: 2rem; height: 2rem; background: var(--surface-2); font-size: 1rem; }
.stimmen-karte ul { list-style: none; margin-top: .65rem; display: grid; gap: .35rem; }
.stimmen-karte li { padding: .45rem .6rem; background: var(--surface-2); color: var(--text); }
.stimmen-zustimmung { border-left-color: #49a82e; }
.stimmen-ablehnung { border-left-color: var(--danger); }
.stimmen-enthaltung { border-left-color: #8998a3; }
.stimmen-karte .keine-stimme { color: var(--muted); font-style: italic; }
.abstimmungs-hinweis { margin-top: 1.3rem; }
@media (max-width: 800px) { .abstimmungs-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .abstimmungs-akte { grid-template-columns: 2.2rem minmax(0,1fr); } .abstimmungs-akte > .pill { grid-column: 2; justify-self: start; } }

/* Team: Vorstand */
.team-seite .belegte-zahlen { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.farbe-codex { border-top: 6px solid #6aa9d8; }
.farbe-zuckerrohr { border-top: 6px solid #5aa02c; }
.farbe-bruchstein { border-top: 6px solid #8f8f8f; }
.farbe-batman { border-top: 6px solid #3a3f52; }
[data-theme="dark"] .farbe-codex { border-top-color: #6aa9d8; }
[data-theme="dark"] .farbe-zuckerrohr { border-top-color: #5aa02c; }
[data-theme="dark"] .farbe-bruchstein { border-top-color: #8f8f8f; }
[data-theme="dark"] .farbe-batman { border-top-color: #5a6078; }
.pixelkopf.unsichtbar {
  display: grid; place-items: center; background: #0b0b0b; border: 4px solid #000; font: .55rem var(--pixel);
  color: #3a3a3a; text-align: center; animation: none; filter: none; padding: .5rem;
}
.lichtbild-notiz { font-size: .72rem; line-height: 1.4; color: var(--muted); margin: 0 auto .6rem; max-width: 190px; font-style: italic; }

/* =============================================
   SPRECHSTUNDE
   ============================================= */
.sprechstunde-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.sprechstunde-karte { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none !important; color: var(--text); }
.sprechstunde-karte h3 { margin: .6rem 0 .1rem; }
.sprechstunde-kopf .pixelkopf { width: 88px; height: 88px; margin-bottom: .2rem; }
.sprechstunde-gruss { font-style: italic; color: var(--text) !important; flex: 1; }
.sprechstunde-los { font: 700 1rem var(--head); text-transform: uppercase; color: var(--signal); letter-spacing: .5px; margin-top: .6rem; }
.sprechstunde-karte:hover .sprechstunde-los { text-decoration: underline; text-underline-offset: 4px; }
.sprechstunde-hinweis { margin-top: 1.2rem; }
.sprechstunde-chat .chat-fenster .sprechstunde-hinweis { margin: 0; padding: .6rem 1rem .8rem; border-top: 1px solid var(--border); font-size: .76rem; }
.sprechstunde-chat .chat-eingabe { grid-template-columns: 0 minmax(0,1fr) auto; }
.sprechstunde-minikopf .pixelkopf { width: 44px; height: 44px; margin: 0; animation: none; }
.sprechstunde-minikopf .pixelkopf.unsichtbar { font-size: 0; padding: 0; border-width: 2px; }
.ki-marke { display: inline-block; font: .45rem var(--pixel); background: var(--titel); color: var(--surface); padding: .2rem .35rem; vertical-align: middle; cursor: help; }
.blase.wartet { min-width: 64px; }
.blase.wartet p { display: flex; flex-direction: column; gap: .35rem; }
.tippt { display: inline-flex; gap: 4px; padding: .2rem 0; }
.tippt i { width: 8px; height: 8px; background: var(--gold); display: block; animation: tippen 1.05s steps(2, end) infinite; }
.tippt i:nth-child(2) { animation-delay: .15s; }
.tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.denksatz { font-size: .8rem; font-style: italic; color: var(--muted); min-height: 1em; }
.denksatz:not(:empty) { animation: blase-ein .3s ease-out; }
.schreibcursor { color: var(--red); animation: cursor-blinken 1s steps(1) infinite; margin-left: 1px; }
@keyframes cursor-blinken { 50% { opacity: 0; } }
.blase.offline { border-style: dashed; color: var(--muted); font-style: italic; }
.sperrliste { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1rem; }
.sperrliste li { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-2); padding: .2rem .4rem; border: 1px solid var(--border); }
.sperrliste form { display: inline; }
.sprechstunde-protokoll.gefiltert { border-left-color: var(--danger) !important; }
.sprechstunde-protokoll.fehler { border-left-color: #e0913a !important; }
.team-sprechstunde { display: inline-block; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .tippt i { animation: none; opacity: .6; } .schreibcursor { animation: none; } }

/* =============================================
   TELEFON: EINKLAPPBARE NAVIGATION UND TOUCH-MASSE
   ============================================= */

/* Auf großen Schirmen bleiben Inhalte und Konto klar getrennt. */
.nav-menue { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: .45rem; }
.nav-links { display: flex; align-items: center; gap: .05rem; }
.nav-schalter { display: none; }
.nav-account { margin-left: auto; border-left: 0; padding-left: .35rem; flex-wrap: nowrap; }
.nav-konto { position: relative; }
.nav-konto summary {
  display: flex; align-items: center; gap: .45rem; min-height: 40px; max-width: 190px;
  padding: .35rem .55rem; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--titel); font: 700 .78rem var(--head); cursor: pointer; list-style: none;
}
.nav-konto summary::-webkit-details-marker { display: none; }
.nav-konto summary:hover, .nav-konto summary:focus-visible, .nav-konto[open] summary, .nav-konto.current summary { border-color: var(--red); color: var(--red); }
.nav-konto-symbol { position: relative; width: 16px; height: 17px; flex: 0 0 16px; }
.nav-konto-symbol::before { content: ''; position: absolute; left: 5px; top: 0; width: 7px; height: 7px; background: currentColor; }
.nav-konto-symbol::after { content: ''; position: absolute; left: 2px; bottom: 0; width: 13px; height: 7px; background: currentColor; }
.nav-konto-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-konto-pfeil { color: var(--muted); font-size: .75rem; transition: transform .15s; }
.nav-konto[open] .nav-konto-pfeil { transform: rotate(180deg); }
.nav-konto-menue {
  position: absolute; z-index: 130; top: calc(100% + .55rem); right: 0; width: min(270px, 88vw);
  padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--red);
  box-shadow: 0 14px 30px rgba(11,60,93,.2);
}
nav .nav-konto-menue a:not(.brand) {
  display: flex; flex-direction: column; gap: .18rem; padding: .7rem .75rem; color: var(--titel);
  font: 400 .82rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line-soft);
}
nav .nav-konto-menue a:not(.brand)::after { display: none; }
nav .nav-konto-menue a:hover, nav .nav-konto-menue a.active { background: var(--surface-2); color: var(--red); }
.nav-konto-menue strong { font: 800 .92rem var(--head); }
.nav-konto-menue small { color: var(--muted); font-size: .72rem; }
.nav-konto-menue form { padding: .35rem .75rem 0; }
.nav-konto-menue .nav-logout { width: 100%; min-height: 38px; padding: .35rem 0; text-align: left; font-size: .78rem; }

/* Die nav-Regeln oben treffen auch Unternavigationen im Inhalt (.archiv-reiter).
   Nur die Kopfleiste klebt oben und liegt über allem anderen. */
main nav { position: static; z-index: auto; }
body > nav { z-index: 120; }

@media (max-width: 1000px) {
  nav {
    position: sticky; top: 0; flex-wrap: nowrap; gap: .5rem;
    padding: .45rem max(.9rem, env(safe-area-inset-right)) .45rem max(.9rem, env(safe-area-inset-left));
  }
  nav .brand { width: auto; margin: 0 auto 0 0; gap: .5rem; }
  .brand-block { width: 40px; height: 40px; font-size: .58rem; }
  .brand-text { font-size: 1.15rem; }
  .brand-text small { font-size: .4rem; }

  .nav-schalter {
    display: inline-flex; align-items: center; gap: .45rem; position: relative;
    min-height: 44px; padding: 0 .7rem; cursor: pointer;
    background: var(--surface-2); border: 2px solid var(--border); color: var(--titel);
    font: 800 1rem var(--head); text-transform: uppercase; letter-spacing: .6px;
    box-shadow: inset -3px -3px 0 rgba(0,0,0,.12);
  }
  .nav-schalter:active { transform: scale(.96); }
  .nav-balken, .nav-balken::before, .nav-balken::after {
    display: block; width: 20px; height: 3px; background: currentColor;
  }
  .nav-balken { position: relative; }
  .nav-balken::before, .nav-balken::after { content: ''; position: absolute; left: 0; }
  .nav-balken::before { top: -7px; }
  .nav-balken::after { top: 7px; }
  nav.offen .nav-balken { background: transparent; }
  nav.offen .nav-balken::before { top: 0; transform: rotate(45deg); }
  nav.offen .nav-balken::after { top: 0; transform: rotate(-45deg); }
  nav.offen .nav-schalter { border-color: var(--red); color: var(--red); }
  .nav-schalter-punkt {
    position: absolute; top: -5px; right: -5px; width: 12px; height: 12px;
    background: var(--signal); box-shadow: inset -2px -2px 0 rgba(0,0,0,.25);
  }

  /* Ausgeklappte Liste unter der Leiste, bei Bedarf selbst scrollend. */
  .nav-menue {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
    padding: .3rem max(1rem, env(safe-area-inset-left)) calc(.8rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
    background: var(--surface); border-top: 3px solid var(--red);
    box-shadow: 0 14px 26px rgba(11,60,93,.22);
  }
  nav.offen .nav-menue { display: flex; }
  .nav-links { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .nav-menue a:not(.brand) {
    display: flex; align-items: center; min-height: 48px;
    font-size: 1.2rem; padding: .3rem .2rem; border-bottom: 1px solid var(--line-soft);
  }
  .nav-menue a:not(.brand)::after { left: .2rem; right: auto; width: 2.2rem; bottom: .55rem; }
  .nav-menue a.active { color: var(--red); }
  .nav-account {
    width: 100%; border-left: 0; padding: .4rem 0 0; margin: .4rem 0 0;
    border-top: 3px solid var(--border); flex-direction: column; align-items: stretch; gap: 0;
  }
  .nav-account a { font-size: 1.2rem !important; }
  .nav-account form { display: flex; }
  .nav-logout {
    min-height: 48px; width: 100%; text-align: left; padding: .3rem .2rem; font-size: 1.2rem;
  }
  .nav-chat { justify-content: flex-start; }
  .nav-konto { width: 100%; }
  .nav-konto summary { max-width: none; min-height: 48px; border: 0; background: transparent; padding: .3rem .2rem; font-size: 1.05rem; }
  .nav-konto-menue { position: static; width: 100%; padding: 0 0 .35rem 1.25rem; border: 0; border-left: 3px solid var(--red); box-shadow: none; }
  nav .nav-konto-menue a:not(.brand) { min-height: 48px; padding: .55rem .65rem; font-size: .9rem; }
  .nav-konto-menue form { padding: .25rem .65rem 0; }
  .theme-schalter { margin-left: 0; flex: none; }
}

@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .nav-balken, .nav-balken::before, .nav-balken::after { transition: transform .18s, top .18s, background .18s; }
}

/* Sehr schmale Telefone: Kopfzeile auf Symbole eindampfen, damit nichts hinausragt. */
@media (max-width: 370px) {
  nav { gap: .35rem; padding-left: max(.6rem, env(safe-area-inset-left)); padding-right: max(.6rem, env(safe-area-inset-right)); }
  nav .brand { min-width: 0; }
  .brand-text { min-width: 0; overflow: hidden; font-size: 1.05rem; }
  .brand-text small { overflow: hidden; text-overflow: ellipsis; }
  .nav-schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav-schalter { min-width: 44px; justify-content: center; padding: 0 .55rem; }
}

/* Ausreichend große Tippflächen auf Touchgeräten. */
@media (max-width: 700px) {
  .topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  main, footer, .breadcrumb { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  #inhalt, h2[id], h3[id], [id^="seite-"] { scroll-margin-top: 5rem; }

  .facette, .archiv-reiter a, .mc-blatt, .mc-blattnav a, .mc-blattnav button, .account-pagination a {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .facette { padding: .4rem .7rem; }
  .mc-blatt { min-width: 44px; }
  .btn, .btn-outline, .role-form .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .card a, .beitrag-karte a, .akte a { padding: .15rem 0; }

  /* 16px verhindert das automatische Zoomen von iOS beim Antippen. */
  input, select, textarea,
  .archiv-suche input[type="search"], .archiv-suche select,
  .form-group input, .form-group select, .form-group textarea,
  .chat-start select, .chat-eingabe textarea, .tool-app input, .tool-app select, .tool-app textarea {
    font-size: 16px;
  }
  .form-group input, .form-group select, .archiv-suche input[type="search"], .archiv-suche select { min-height: 48px; }

  .tabellen-scroll { -webkit-overflow-scrolling: touch; }
  .buchtext, .blase p, .card p { overflow-wrap: anywhere; }
}

/* =============================================
   MITGLIEDSAUSWEIS (agent_data/MemberCard.md)
   Die Karte behaelt ihre eigene Palette in beiden Themes: sie soll wie ein
   ausgestelltes Dokument wirken, nicht wie ein Teil der Seite.
   ============================================= */
.ausweis-karte {
  --afp-gruen-900: #0F2C1C;
  --afp-gruen-700: #1E5B37;
  --afp-gold:      #C8A94A;
  --afp-papier:    #F3EFE3;
  --afp-tinte:     #14110E;
  --neigung-x: 0deg;
  --neigung-y: 0deg;
  --schimmer: 50%;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.alert-gut { background: #eef8e8; color: #2d6e16; }
[data-theme="dark"] .alert-gut { background: rgba(90,170,50,.12); color: #a9e08f; border-color: #3f7a24; }

.ausweis-buehne { margin-top: 1.5rem; }
.ausweis-rahmen { perspective: 1400px; max-width: 30rem; margin: 0 auto; }
.ausweis-karte {
  position: relative; aspect-ratio: 1.586; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
  transform: rotateX(var(--neigung-x)) rotateY(var(--neigung-y));
}
.ausweis-karte.gewendet { transform: rotateY(180deg); }
.ausweis-seite {
  position: absolute; inset: 0; border-radius: 16px; padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.08) inset;
  font-family: var(--sans); overflow: hidden;
}
.ausweis-vorn  { background: linear-gradient(150deg, var(--afp-gruen-700), var(--afp-gruen-900) 55%); color: var(--afp-papier); }
.ausweis-hinten { background: var(--afp-papier); color: var(--afp-tinte); transform: rotateY(180deg); }
/* Wasserzeichen: dezentes Signet in der Flaeche. */
.ausweis-vorn::before {
  content: 'AFP'; position: absolute; right: -.5rem; bottom: -1.5rem;
  font: 700 7rem/1 var(--head); color: rgba(243,239,227,.05); letter-spacing: -.05em; pointer-events: none;
}
/* Schimmer folgt der Neigung; bei reduzierter Bewegung abgeschaltet. */
.ausweis-vorn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at var(--schimmer) 0%, rgba(255,255,255,.14), transparent 60%);
}
.ausweis-leiste { height: 3px; background: linear-gradient(90deg, transparent, var(--afp-gold) 12%, var(--afp-gold) 88%, transparent); flex: none; }
.ausweis-kopf { display: flex; align-items: center; gap: .7rem; }
.ausweis-signet {
  width: 2.3rem; height: 2.3rem; flex: none; display: grid; place-items: center;
  border: 2px solid var(--afp-gold); border-radius: 6px; color: var(--afp-gold);
  font: 700 .85rem/1 var(--head); letter-spacing: .05em;
}
.ausweis-marke { display: flex; flex-direction: column; line-height: 1.1; }
.ausweis-marke strong { font: 700 1.05rem/1.1 var(--head); letter-spacing: .12em; }
.ausweis-marke small { font-size: .62rem; letter-spacing: .22em; color: var(--afp-gold); }
.ausweis-mitte { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ausweis-name { font: 700 clamp(1.3rem, 5.5vw, 1.75rem)/1.1 var(--head); margin: 0; overflow-wrap: anywhere; }
.ausweis-titel { font-size: .95rem; font-weight: 600; margin: .15rem 0 0; }
.ausweis-qr-feld { flex: none; width: 5.4rem; background: var(--afp-papier); padding: 3px; border-radius: 4px; }
.ausweis-qr-feld svg { display: block; width: 100%; height: auto; }
.ausweis-daten { display: flex; gap: 2rem; margin: 0; }
.ausweis-daten dt { font-size: .58rem; letter-spacing: .16em; color: var(--afp-gold); margin: 0; }
.ausweis-daten dd { margin: .15rem 0 0; font-family: var(--mono); font-size: .92rem; font-variant-numeric: tabular-nums; }
/* Die Karte fuehrt ihre eigene Palette: 'main p { color: var(--text) }' wuerde sonst
   im hellen Theme dunkle Schrift auf die dunkelgruene Vorderseite setzen. */
.ausweis-vorn p, .ausweis-vorn dd { color: var(--afp-papier); }
.ausweis-vorn dt { color: var(--afp-gold); }
.ausweis-hinten p, .ausweis-hinten dd, .ausweis-hinten code { color: var(--afp-tinte); }
.ausweis-hinten dt, .ausweis-hinten .ausweis-fussnote, .ausweis-hinten .ausweis-pruefurl span { color: #6b5f3a; }
.ausweis-verpflichtung { font-size: .82rem; line-height: 1.5; margin: .6rem 0 0; }
.ausweis-rueckdaten { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin: 0; }
.ausweis-rueckdaten dt { font-size: .58rem; letter-spacing: .14em; color: #6b5f3a; margin: 0; }
.ausweis-rueckdaten dd { margin: 0; font-size: .82rem; font-weight: 600; }
.ausweis-pruefurl { margin: 0; font-size: .58rem; line-height: 1.4; }
.ausweis-pruefurl span { display: block; letter-spacing: .14em; color: #6b5f3a; }
.ausweis-pruefurl code { font-family: var(--mono); font-size: .58rem; overflow-wrap: anywhere; color: var(--afp-tinte); }
.ausweis-fussnote { margin: 0; font-size: .58rem; color: #6b5f3a; }
.ausweis-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
.ausweis-hinweiszeile { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); }

.buch-seiten { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 1.5rem; }
/* Eigenstaendiges Pergament: .mc-paper traegt seine Farbe nur innerhalb von .mc-book. */
.buch-seite {
  margin: 0; flex: 1 1 14rem; max-width: 18rem; position: relative;
  background: #fff7da; color: #30291e; border-radius: 2px;
  padding: 2.4rem 1.2rem 1.2rem 1.5rem;
  box-shadow: inset 4px 0 #ddcfa7, inset 8px 0 #eee2bb, 0 6px 14px rgba(0,0,0,.25);
}
.buch-seite figcaption { position: absolute; top: .9rem; right: 1.2rem; font: .95rem/1 var(--vt); color: #796345; }
.buch-seite pre {
  font: 1.15rem/1.3 var(--vt); letter-spacing: .15px; margin: 0;
  white-space: pre-wrap; overflow-wrap: anywhere; color: #30291e;
}

/* Oeffentliche Pruefseite: das Urteil steht oben und gross. */
.pruefung { border: 3px solid var(--border); border-radius: 4px; background: var(--surface); padding: 1.5rem; margin-top: 1.5rem; }
.pruefung-ampel { width: 1.1rem; height: 1.1rem; border-radius: 50%; margin: 0 0 .75rem; }
.pruefung h2 { margin: 0 0 .5rem; font: clamp(1.4rem, 4vw, 2rem)/1.2 var(--head); font-weight: 700; }
.pruefung-satz { margin: 0 0 1rem; }
.pruefung-gueltig   { border-color: #2d6e16; }
.pruefung-gueltig   .pruefung-ampel { background: #2d6e16; box-shadow: 0 0 0 4px rgba(45,110,22,.18); }
.pruefung-gueltig   h2 { color: #2d6e16; }
.pruefung-ruhend    { border-color: #b07d00; }
.pruefung-ruhend    .pruefung-ampel { background: #b07d00; box-shadow: 0 0 0 4px rgba(176,125,0,.18); }
.pruefung-ruhend    h2 { color: #8a6200; }
.pruefung-ungueltig { border-color: var(--danger); }
.pruefung-ungueltig .pruefung-ampel { background: var(--danger); box-shadow: 0 0 0 4px rgba(215,20,26,.18); }
.pruefung-ungueltig h2 { color: var(--danger); }
.pruefung-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .9rem; margin: 0 0 1rem; }
.pruefung-daten dt { font: .62rem/1 var(--pixel); color: var(--muted); margin-bottom: .35rem; }
.pruefung-daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pruefung-zeit { margin: 0; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .pruefung-gueltig h2 { color: #a9e08f; }
[data-theme="dark"] .pruefung-ruhend h2 { color: #e8c063; }
[data-theme="dark"] .pruefung-ungueltig h2 { color: #ff9ca0; }

/* Ausweis-Kachel auf der Kontoseite. */
.ausweis-kachel { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border: 3px solid var(--border); border-radius: 4px; background: var(--surface); padding: 1rem; margin: 1.5rem 0; }
.ausweis-kachel-karte { width: 9rem; flex: none; aspect-ratio: 1.586; border-radius: 8px; padding: .6rem .7rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg, #1E5B37, #0F2C1C 55%); color: #F3EFE3; }
.ausweis-kachel-karte strong { font: 700 .62rem/1.1 var(--head); letter-spacing: .1em; color: #C8A94A; }
.ausweis-kachel-karte span { font: 700 .95rem/1.1 var(--head); overflow-wrap: anywhere; }
.ausweis-kachel-karte small { font-family: var(--mono); font-size: .6rem; font-variant-numeric: tabular-nums; }
.ausweis-kachel-text { flex: 1 1 12rem; }
.ausweis-kachel-text p { margin: 0 0 .75rem; }
.ausweis-kachel-inaktiv .ausweis-kachel-karte { filter: grayscale(.8); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  /* Pflicht aus MemberCard.md 4.3: kein Kippen, kein Schimmer, kein Drehen. */
  .ausweis-karte { transition: none; transform: none; }
  .ausweis-karte.gewendet { transform: none; }
  /* Ohne feste Kartenhoehe traegt space-between nicht mehr; Abstand kommt aus gap. */
  .ausweis-seite { position: relative; inset: auto; backface-visibility: visible; transform: none; gap: .9rem; padding: 1.3rem 1.4rem; }
  .ausweis-hinten { transform: none; margin-top: 1rem; }
  .ausweis-rahmen { perspective: none; }
  .ausweis-karte { aspect-ratio: auto; }
  .ausweis-vorn::after { display: none; }
  .ausweis-wenden { display: none; }
}