/* ===========================================================
   Spieler- und Abendbereich — eigene Farbwelt.
   Dunkler Hafen, Klinker, Messing. Deutlich lebendiger als die
   nüchterne Spielleiterunterlage, ohne die Typografie zu ändern.
   =========================================================== */

:root, :root[data-theme="light"], :root[data-theme="dark"]{
  --bg:#0A1114;
  --surface:#121C20;
  --surface-2:#18262B;
  --surface-3:#1F3138;
  --ink:#EDF0EC;
  --muted:#A3B3B0;
  --faint:#7A8C89;
  --accent:#E0604A;
  --accent-soft:#F0917C;
  --brass:#D9A94F;
  --line:#22343A;
  --line-strong:#365058;
  --tide:#6FC0C6;
  --rot:#D98BB0;
  --moos:#94C47D;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -20px rgba(0,0,0,1);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#0A1114; --surface:#121C20; --surface-2:#18262B; --ink:#EDF0EC;
  }
}

body{
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(224,96,74,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 4%, rgba(111,192,198,.07), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

.topbar{
  background:linear-gradient(180deg, rgba(10,17,20,.96), rgba(10,17,20,.86));
  backdrop-filter:blur(6px);
  border-bottom-width:2px;
}
.marke{letter-spacing:.005em}
.hauptnav a{border-radius:100px}
.hauptnav a.hier{background:rgba(224,96,74,.14)}

h1{letter-spacing:-.02em}
.seitenkopf{padding-bottom:4px}
.seitenkopf h1{font-size:clamp(2.3rem,6vw,4rem)}
.eyebrow{color:var(--brass)}
.deck{color:var(--muted)}

/* Karten bekommen mehr Präsenz */
.kachel, .dossier, .hook, .kontor, .vs, .merk, .tabelle-scroll{
  box-shadow:var(--shadow);
}
.kachel{border-radius:3px;transition:transform .16s ease, background .16s ease}
.kachel:hover{transform:translateY(-2px)}
.kachel b{font-size:1.28rem}
.dossier{border-radius:3px;border-left-width:4px}
table{background:var(--surface)}
th{background:var(--surface-3);color:var(--muted)}
tr:hover td{background:rgba(255,255,255,.02)}
.q{border-left-width:3px;color:var(--ink);opacity:.92}
.merk{border-left-width:4px;border-radius:0 3px 3px 0}

/* Das Schloss wird ein Tor */
.schloss .schloss-tor{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-strong);
  border-top:3px solid var(--accent);
  box-shadow:var(--shadow);
  border-radius:3px;
  padding:36px 34px;
}
.schloss-tor h2{font-size:1.8rem}
.schloss-form button{border-radius:3px;font-weight:600}

/* ---------- Clanfarben ---------- */
.dossier[data-clan]{border-left-color:var(--ck)}
.dossier[data-clan] .d-title{color:var(--ck)}
.dossier[data-clan] .d-name{color:var(--ink)}
.dossier[data-clan] .d-hook{border-top-color:var(--ck);border-top-style:solid;opacity:.95}
.dossier[data-clan="brujah"]   {--ck:#E05A4B}
.dossier[data-clan="gangrel"]  {--ck:#94C47D}
.dossier[data-clan="malkavian"]{--ck:#B18CD9}
.dossier[data-clan="nosferatu"]{--ck:#93A88C}
.dossier[data-clan="toreador"] {--ck:#EFA97C}
.dossier[data-clan="tremere"]  {--ck:#D45F86}
.dossier[data-clan="ventrue"]  {--ck:#D9A94F}
.dossier[data-clan="caitiff"]  {--ck:#9AA5A2}
.dossier[data-clan="giovanni"] {--ck:#5FB3B3}
.dossier[data-clan="setit"]    {--ck:#8FD14F}
.dossier[data-clan="assamit"]  {--ck:#7BA0D0}
.dossier[data-clan="ravnos"]   {--ck:#EE9A4D}

/* Clanwappen: großer Anfangsbuchstabe als stilles Kennzeichen */
.dossier[data-clan] .d-name::before{
  content:attr(data-w);
  font-family:var(--display);
  font-size:.85em;
  color:var(--ck);
  margin-right:.4em;
  opacity:.55;
}

/* Glossar etwas luftiger */
.glossar dt{color:var(--brass)}
.glossar dd{color:var(--muted)}

/* Abendbereich: der Spielleiterblock hebt sich klar ab */
.sl-block{background:var(--surface-2);border-color:var(--accent);border-radius:3px}

/* Tore auf der Startseite */
.tor{border-radius:3px;box-shadow:var(--shadow);transition:transform .16s ease}
.tor:hover{transform:translateY(-3px)}
.tor b{font-size:1.7rem}

@media (prefers-reduced-motion:reduce){.kachel:hover,.tor:hover{transform:none}}

/* ===========================================================
   Was da draußen ist — die Feindseite.
   Eine Kachel und ein paar Akzente, die nicht wie der Rest
   der Seite aussehen. Das soll unangenehm wirken.
   =========================================================== */
.kachel.warnkachel{
  border-left-color:var(--rot);
  background:linear-gradient(180deg,#1B1418 0%,var(--surface) 70%);
}
.kachel.warnkachel:hover{background:linear-gradient(180deg,#241a1f 0%,var(--surface-2) 70%)}
.kachel.warnkachel em{color:var(--rot)}
.kachel.warnkachel b{color:#F2D7DF}

/* Die Gefahrentabelle: "keine" soll weh tun */
#skala td.num{color:var(--rot);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#skala tbody tr:first-child td.num{color:var(--moos)}
#skala tbody tr:nth-child(2) td.num{color:var(--brass)}

/* Die Nummerierung der vier Mächte */
#sabbat .h2-no,#garou .h2-no,#jaeger .h2-no,#inquisition .h2-no{color:var(--accent);font-weight:600}

/* Warnzeichen-Blöcke in der Klausel-Optik, aber rot markiert */
#sabbat .klausel .k-no,#jaeger .klausel .k-no{color:var(--accent);font-weight:600}

/* ===========================================================
   Hafenatmosphäre — Korn und Nebel.
   Kein Bild von außen: die Textur wird im Browser aus einer
   SVG-Turbulenz erzeugt. Ein paar hundert Byte, scharf auf
   jedem Bildschirm, ohne Lizenzfragen.
   =========================================================== */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIj48ZmlsdGVyIGlkPSJrIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44MiIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgZmlsdGVyPSJ1cmwoI2spIiBvcGFjaXR5PSIwLjUiLz48L3N2Zz4=");
  background-size:220px 220px;
  opacity:.035;mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(111,192,198,.055), transparent 62%),
    radial-gradient(100% 70% at 50% 115%, rgba(9,17,20,.85), transparent 58%);
}
.topbar,.subnav,.wrap,.fusszeile{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ body::before{opacity:.022} }
@media print{ body::before,body::after{display:none} }