/* =====================================================================
   Plague · gemeinsames Stylesheet (aus dem Forever-Entwurf)
   Grundlage: tokens.css. Seitenspezifisches CSS gehört in
   assets/page-<name>.css, nicht hierher (siehe SHELL.md).

   Inhalt
    1  Schriften
    2  Basis, Typografie, Fokus, Hilfsklassen
    3  Layout: Seite, Spalten, Titelzeile, Abschnitte, Fakten
    4  Band, Sprunglink, Fußzeile
    5  Kopf: Abendhimmel, Marke, Navigation, nächster Raid, Dein Stand
    6  Grat mit Boss-Rauten
    7  Tabellen, .tbl-wrap, Kontobuch, feste Spalten, schwebender Kopf
    8  Filterleiste, Felder, Segmente
    9  Reiter
   10  Knöpfe, Kopieren
   11  Status-Häkchen, Badges, Delta, Betrag
   12  Klassen, Spieler, Völker, Feder
   13  Items, Qualität, Lootliste, Gebotsleiter
   14  Anwesenheit (8 Kästchen), Plätze, Legende
   15  Hinweise, Quelle, Leerzustand
   16  Formular, Ablage (Upload)
   17  Diagramme (inline SVG)
   18  Mittlere Breiten, Telefon, Touch
   19  Bewegung reduzieren
   ===================================================================== */

/* ---------- 1  Schriften (lokal, OFL, siehe fonts/OFL.txt) ---------- */
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400 900;font-display:block;
  src:url("fonts/alegreya-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400 900;font-display:block;
  src:url("fonts/alegreya-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-display:swap;src:url("fonts/alegreyasans-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-display:swap;src:url("fonts/alegreyasans-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-display:swap;src:url("fonts/alegreyasans-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-display:swap;src:url("fonts/alegreyasans-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-display:swap;src:url("fonts/alegreyasans-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-display:swap;src:url("fonts/alegreyasans-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 2  Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--nacht)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--nacht);color:var(--pergament);
  font-family:var(--schrift-text);font-size:var(--text-m);line-height:var(--zeile-text);
  font-variant-numeric:lining-nums tabular-nums;font-kerning:normal}
main{flex:1 0 auto;display:block}
main[tabindex="-1"]:focus{outline:none}
/* Keine font-Kurzform verwenden: sie setzt font-variant-numeric zurück. */

h1,h2,h3,h4{margin:0;color:var(--pergament-hell);text-wrap:balance}
h1{font-family:var(--schrift-zahl);font-weight:600;font-size:var(--titel-m);line-height:var(--zeile-titel)}
h2{font-family:var(--schrift-zahl);font-weight:600;font-size:var(--titel-s);line-height:1.2}
h3{font-family:var(--schrift-text);font-weight:700;font-size:var(--text-l);line-height:1.3;color:var(--pergament)}
h4{font-family:var(--schrift-text);font-weight:700;font-size:var(--text-m);color:var(--pergament)}
p{margin:0 0 var(--s-3)}
p:last-child{margin-bottom:0}
.lesetext{font-size:var(--text-l);max-width:var(--masz-text)}
.lesetext p,.lesetext li{max-width:var(--masz-text)}
ul,ol{margin:0 0 var(--s-3);padding-left:1.25em}
strong,b{font-weight:700}
small{font-size:var(--text-s)}
hr{border:0;border-top:1px solid var(--linie);margin:var(--s-5) 0}

/* Links im Text: Pergament mit goldener Unterstreichung. Volles Gold bleibt Knöpfen,
   aktiven Filtern, der aktiven Seite und dem Fokus vorbehalten. */
a{color:var(--pergament);text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pergament-hell);text-decoration-color:var(--gold-hell);text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:var(--radius-1)}
:focus:not(:focus-visible){outline:none}
/* Auf hellen Flächen wechselt der Ring zu dunkler Tinte */
.flaeche-hell :focus-visible{outline-color:var(--fokus-auf-hell)}

/* Hilfsklassen */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.leise{color:var(--kamel)}
.zart{color:var(--sand)}
.hell{color:var(--pergament-hell)}
.minus{color:var(--rot)}
.nowrap{white-space:nowrap}
.zahl{font-family:var(--schrift-zahl);font-variant-numeric:lining-nums tabular-nums}
.nur-schmal{display:none!important}
[hidden]{display:none!important}

/* ---------- 3  Layout ---------- */
.wrap{max-width:var(--breite-max);margin-inline:auto;padding-inline:var(--rand)}
.seite{width:100%;max-width:var(--breite-max);margin-inline:auto;
  padding:var(--s-6) var(--rand) var(--s-7)}
.spalten{display:grid;grid-template-columns:minmax(0,1fr) var(--spalte-neben);gap:var(--s-7) var(--s-8);align-items:start}
.spalten > *{min-width:0}
.abschnitt{margin-top:var(--s-7)}
.abschnitt:first-child{margin-top:0}
.abschnitt > h2{margin-bottom:var(--s-3)}
.titelzeile{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s-2) var(--s-6);margin-bottom:var(--s-4)}
.titelzeile > p{margin:0}
.stapel > * + *{margin-top:var(--s-4)}
.reihe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}

/* Fakten: Definitionsliste ohne Kästen */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,max-content));gap:var(--s-3) var(--s-6);margin:0}
.fakten > div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;min-width:0}
.fakten dt{font-size:var(--text-s);color:var(--kamel)}
.fakten dd{margin:0;font-size:1.125rem;font-weight:500;color:var(--pergament);line-height:1.3}
.fakten dd small{display:block;margin-top:2px;font-size:var(--text-s);font-weight:400;color:var(--kamel);max-width:28ch}
.fakten dd .betrag{font-size:var(--titel-m)}

/* ---------- 4  Band, Sprunglink, Fußzeile ---------- */
.sprunglink{position:absolute;left:var(--s-2);top:-200px;z-index:100;padding:var(--s-2) var(--s-3);
  background:var(--gold);color:var(--nacht);font-weight:700;text-decoration:none}
.sprunglink:focus{top:var(--s-2);color:var(--nacht);outline:2px solid var(--gold-hell);outline-offset:2px;
  box-shadow:inset 0 0 0 2px var(--nacht)}

.band{background:var(--tiefsee);color:var(--kamel);font-size:var(--text-s);line-height:1.4;border-bottom:1px solid var(--linie)}
.band .wrap{display:flex;flex-wrap:wrap;gap:0 var(--s-4);padding-block:.375rem}
.band strong{color:var(--pergament-hell);font-weight:700}

.fuss{border-top:1px solid var(--linie-leise);color:var(--sand);font-size:var(--text-s);margin-top:auto}
.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-1) var(--s-6);padding-block:var(--s-4) var(--s-6)}
.fuss p{margin:0;max-width:var(--masz-text)}
.fuss a{white-space:nowrap}

/* ---------- 5  Kopf: Abendhimmel ---------- */
.himmel{--rc:var(--raid-hyjal);position:relative;overflow-x:clip;overflow-y:visible;isolation:isolate;
  background:
    radial-gradient(34% 80% at 86% 100%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 72%),
    linear-gradient(180deg, var(--daemmer) 0%, #0E2A4E 52%, var(--petrol) 100%)}
.kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"marke nav nav" "raid raid ich";align-items:center;
  gap:var(--s-3) var(--s-6);padding-top:var(--s-3)}

.marke{grid-area:marke;display:inline-flex;align-items:baseline;gap:var(--s-2);white-space:nowrap;
  font-family:var(--schrift-zahl);font-weight:700;font-size:1.625rem;line-height:1;
  color:var(--pergament-hell);text-decoration:none;padding-block:var(--s-2)}
.marke:hover{color:var(--pergament-hell)}
.marke small{font-family:var(--schrift-text);font-weight:500;font-size:.9375rem;color:var(--kamel)}

.nav{grid-area:nav;min-width:0}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
.nav a{display:block;padding:var(--s-2) 0 .625rem;color:var(--kamel);text-decoration:none;
  font-size:var(--text-m);font-weight:500;border-bottom:3px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--gold-hell);border-bottom-color:rgba(247,185,10,.45)}
.nav a[aria-current="page"]{color:var(--pergament-hell);border-bottom-color:var(--gold)}

/* Nächster Raid, kompakt (alle Unterseiten) */
.naechster{grid-area:raid;min-width:0;display:grid;gap:2px;padding-block:var(--s-2)}
.naechster p{margin:0}
.naechster-titel{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-3)}
.naechster-titel .raidname{font-family:var(--schrift-zahl);font-weight:600;font-size:var(--titel-s);
  line-height:1.15;color:var(--pergament-hell)}
.naechster-wann{color:var(--kamel)}
.naechster-stand{color:var(--kamel)}
.naechster-stand strong{color:var(--pergament-hell);font-weight:700}

/* Nächster Raid, groß (Übersicht: <body data-kopf="voll">) */
.himmel--voll .kopf{align-items:start}
.himmel--voll .marke,.himmel--voll .nav{align-self:center}
.himmel--voll .ich{align-self:start;padding-top:var(--s-4)}
.naechster--voll{display:grid;grid-template-columns:minmax(16rem,1fr) auto;gap:var(--s-4) var(--s-7);
  align-items:start;padding-block:var(--s-4) var(--s-2)}
.naechster--voll .naechster-titel .raidname{font-size:var(--titel-l);line-height:1.05}
.naechster--voll .naechster-wann{display:block;margin-top:var(--s-1);font-size:var(--text-l);color:var(--pergament);max-width:40ch}
.naechster--voll .fakten{grid-template-columns:repeat(2,max-content);gap:var(--s-4) var(--s-7)}
.naechster--voll .fakt-breit{grid-column:1 / -1}
.naechster--voll .fakten dt,.naechster--voll .fakten dd small{color:var(--kamel)}
.naechster--voll .knopf{margin-top:var(--s-4)}

/* Dein Stand */
.ich{grid-area:ich;display:grid;grid-template-columns:auto auto;grid-template-areas:"label label" "zahl rang";
  align-items:center;gap:0 var(--s-3);justify-self:end;text-align:left;padding-block:var(--s-2)}
.ich p{margin:0}
.ich-label{grid-area:label;font-size:var(--text-s);color:var(--kamel)}
.ich-zahl{grid-area:zahl;font-family:var(--schrift-zahl);font-size:var(--titel-m);line-height:1;
  color:var(--pergament-hell);text-decoration:none}
/* Die Zahl ist ein Link: Klickfläche 40 px, ohne den Kopf zu verschieben */
a.ich-zahl{padding:.3125rem .375rem;margin:-.3125rem -.375rem}
a.ich-zahl:hover{color:var(--pergament-hell);text-decoration:underline;text-decoration-thickness:1px}
.ich-rang{grid-area:rang;font-size:var(--text-s);line-height:1.3;color:var(--pergament)}
.ich-rang > span{display:block;color:var(--kamel)}

/* ---------- 6  Grat mit Boss-Rauten ---------- */
.grat{position:relative;height:6.5rem;margin-top:var(--s-1)}
.grat svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.grat-fern{fill:var(--grat-fern)}
.grat-nah{fill:var(--nacht)}
.grat-bosse{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.grat-bosse li{position:absolute;left:var(--x,0);top:var(--y,0);width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;display:grid;place-items:center}
.raute{display:block;width:10px;height:10px;transform:rotate(45deg);
  background:var(--nacht);border:1.5px solid var(--kamel)}
.raute.ist-besiegt{background:var(--rc);border-color:var(--rc)}
.raute.ist-versucht{background:linear-gradient(135deg, var(--rc) 0 50%, var(--nacht) 50%)}
.raute.ist-endboss{width:14px;height:14px}
.raute-tipp{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);z-index:5;
  display:none;width:max-content;max-width:16rem;padding:.25rem .5rem;
  background:var(--tiefsee);border:1px solid var(--linie);box-shadow:var(--schatten-tipp);
  font-size:var(--text-s);line-height:1.35;color:var(--pergament);text-align:left;pointer-events:none}
.raute-tipp b{display:block;color:var(--pergament-hell);font-weight:700}
.grat-bosse li.links .raute-tipp{left:0;transform:none}
.grat-bosse li.rechts .raute-tipp{left:auto;right:0;transform:none}
/* Name beim Darüberfahren nur mit Maus; am Telefon gibt es die Liste unter dem Grat */
@media (hover:hover) and (pointer:fine){
  .grat-bosse li:hover .raute-tipp{display:block}
}
.grat-text{position:absolute;left:0;right:0;bottom:.25rem;margin:0;pointer-events:none}
.grat-knopf{all:unset;box-sizing:border-box;pointer-events:auto;display:inline-block;max-width:100%;
  font-size:var(--text-s);line-height:1.75rem;color:var(--pergament);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
.grat-knopf:hover{color:var(--pergament-hell);text-decoration-color:var(--gold-hell)}
/* Klickfläche 40 px (Touch 44 px), ohne die Zeile zu verschieben */
.grat-knopf{padding-block:.375rem;margin-block:-.375rem}
.grat-knopf:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.grat-knopf .raidname{display:inline;color:var(--pergament)}
.grat-kurz{display:none}
.grat-kurz .raidname::before{margin-left:.3em}
.grat-knopf .raidname::before{display:inline-block;margin-right:.45em}
.grat-knopf::after{border-color:var(--gold);margin-left:.5em}
.grat-liste{background:var(--nacht);border-top:1px solid var(--linie-leise)}
.grat-liste-bosse{list-style:none;margin:0;padding:var(--s-3) 0 var(--s-4);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:var(--s-1) var(--s-6);font-size:var(--text-s);color:var(--kamel)}
.grat-liste-bosse li{display:flex;align-items:baseline;gap:var(--s-2)}
.grat-liste-bosse .raute{flex:none;width:8px;height:8px;transform:rotate(45deg) translateY(-1px)}
.grat-liste-bosse .raute.ist-endboss{width:10px;height:10px}
.grat-liste-bosse b{color:var(--pergament);font-weight:500}

/* ---------- 7  Tabellen ---------- */
.tbl-wrap{position:relative;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
/* Wischkante: Solange rechts Spalten folgen, blendet der Rand aus (app.js setzt .mehr-rechts und legt
   den Schnitt zwischen zwei Spalten). 1,25rem = WISCH_RAND in app.js. */
.tbl-wrap.mehr-rechts,.tbl-kopf-klon.mehr-rechts{-webkit-mask-image:linear-gradient(to left,transparent,#000 1.25rem);
  mask-image:linear-gradient(to left,transparent,#000 1.25rem)}
.tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-m);line-height:1.3}
.tabelle caption{text-align:left}
.tabelle th{background:var(--tiefsee);color:var(--kamel);font-size:var(--text-s);font-weight:700;
  text-align:left;vertical-align:bottom;white-space:nowrap;padding:var(--s-2) .5rem}
.tabelle td{padding:.4375rem .5rem;vertical-align:middle;height:2.5rem;white-space:nowrap}
.tabelle .umbruch{white-space:normal;min-width:14rem;max-width:30rem}
.tabelle tbody th{background:none;color:inherit;font-size:inherit;vertical-align:middle;white-space:normal}
.tabelle .num{text-align:right}
.tabelle .eng{width:1%;white-space:nowrap}
.tabelle tbody tr > *{transition:background-color var(--dauer)}
.tabelle tbody tr:hover > *{background:var(--zeile)}
/* Fünferlinie: nach jeder fünften Zeile, damit das Auge die Zeile hält */
.tabelle tbody tr:nth-child(5n):not(:last-child) > *{border-bottom:1px solid var(--linie)}
.tabelle td.rang{color:var(--sand);text-align:right;width:3rem}
.tabelle td.name{font-size:var(--text-l);font-weight:500}
.tabelle td.zeit{color:var(--kamel);white-space:nowrap}
.tabelle td.betrag{font-family:var(--schrift-zahl);font-size:var(--titel-m);line-height:1;
  color:var(--pergament-hell);text-align:right;white-space:nowrap;padding-block:.25rem;letter-spacing:-.005em}
.tabelle td.betrag--klein{font-size:1.375rem}
/* Zweite Zeile in einer Zelle, nur mobil sichtbar (Klasse und Rolle unter dem Namen) */
.unter{display:none}

/* Herkunft der Spalten, direkt über den Spaltengruppen */
.tabelle tr.herkunft th{background:none;font-weight:400;color:var(--kamel);padding:var(--s-2) .5rem .3125rem;vertical-align:bottom}
.tabelle tr.herkunft .herkunft-clm{border-bottom:2px solid var(--kamel)}
.tabelle tr.herkunft .herkunft-tool{border-bottom:2px dashed var(--sand)}
.tabelle tr.herkunft .herkunft-leer{border-bottom:0}

/* Sortieren: <th data-sort="num|text|datum"> bekommt per app.js einen Knopf */
.tabelle th[data-sort]{padding:0}
.sortknopf{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.375rem;width:100%;
  min-height:2.25rem;padding:var(--s-2) .5rem;cursor:pointer;color:var(--kamel)}
.tabelle th.num .sortknopf{justify-content:flex-end}
.sortknopf:hover{color:var(--gold-hell)}
.sortknopf:focus-visible{outline:2px solid var(--fokus);outline-offset:-3px}
th[aria-sort] .sortknopf{color:var(--gold)}
th[aria-sort] .sortknopf::after{content:"";flex:none;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor}
th[aria-sort="ascending"] .sortknopf::after{border-top:0;border-bottom:5px solid currentColor}

/* Kontobuch: Betragsspalte hinterlegt, doppelte Summenlinie */
.tabelle--kontobuch td.betrag,.tabelle--kontobuch tfoot td.betrag{background:var(--betrag-grund)}
.tabelle--kontobuch tbody tr:hover td.betrag{background:rgba(7,50,74,.85)}
.tabelle tfoot td,.tabelle tfoot th{border-top:4px double var(--kamel);padding-block:var(--s-3);
  color:var(--kamel);font-size:var(--text-m);font-weight:400;background:none;vertical-align:middle;white-space:normal}
.tabelle tfoot td.betrag{font-size:1.625rem;font-weight:700;color:var(--pergament-hell)}
.tabelle tr.ich-zeile > *:first-child{box-shadow:inset 3px 0 0 var(--pergament)}

/* Feste Spalten beim seitlichen Wischen. --fest-1 = Breite der ersten festen Spalte */
.tabelle{--fest-1:3rem}
.tabelle .fest{position:sticky;left:0;z-index:1;background:var(--nacht)}
.tabelle .fest-2{left:var(--fest-1)}
.tabelle .fest-1{width:var(--fest-1);min-width:var(--fest-1);max-width:var(--fest-1)}
.tabelle thead .fest{z-index:3;background:var(--tiefsee)}
.tabelle thead tr.herkunft .fest{background:var(--nacht)}

/* Leerzustand in der Tabelle: ein Satz, kein zweiter Zurücksetzen-Knopf */
.tabelle tr.leer td{height:auto;padding:var(--s-6) var(--s-3);white-space:normal;color:var(--pergament);font-size:var(--text-l)}
.tabelle tr.leer:hover td{background:none}

/* Schwebender Tabellenkopf (Kopie von app.js, sobald der echte Kopf oben hinausrollt) */
.tbl-kopf-klon{position:fixed;top:0;z-index:40;overflow:hidden;background:var(--tiefsee);box-shadow:var(--schatten-kopf)}
.tbl-kopf-klon table{table-layout:fixed;margin:0}
.tbl-kopf-klon tr.herkunft{display:none}

/* ---------- 8  Filterleiste, Felder, Segmente ---------- */
.filterleiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);
  background:var(--tiefsee);padding:var(--s-3);margin-bottom:var(--s-2)}
.filter-mehr{display:contents}
.filterleiste .filter-schalter{display:none}
.filter-zaehler{margin:0 0 0 auto;font-size:var(--text-m);color:var(--pergament)}
.filterleiste .feld > label,.filterleiste .segmente > legend{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.feld{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.feld > label,.feld > .feld-label,.segmente > legend{font-size:var(--text-s);color:var(--kamel);font-weight:500}
.feld-hilfe{font-size:var(--text-s);color:var(--sand);margin:0}
input[type=search],input[type=text],input[type=url],input[type=number],input[type=email],input[type=date],
input[type=datetime-local],select,textarea{
  font:inherit;font-size:var(--text-m);color:var(--pergament);background:var(--nacht);
  border:1px solid var(--linie-feld);border-radius:var(--radius-0);min-height:var(--ziel-min);
  padding:0 var(--s-3);max-width:100%}
textarea{padding:var(--s-2) var(--s-3);min-height:6rem;line-height:1.45;resize:vertical}
input[type=search]{width:12.5rem}
input::placeholder,textarea::placeholder{color:var(--sand);opacity:1}
select{padding-right:2rem;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--kamel) 50%),linear-gradient(135deg,var(--kamel) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input:hover,select:hover,textarea:hover{border-color:var(--gold)}
input[type=checkbox],input[type=radio]{accent-color:var(--gold);width:1.125rem;height:1.125rem;margin:0}
.wahl{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--ziel-min);cursor:pointer}

/* Segmente: echte Radio-Gruppe, ein Tabstopp, Pfeiltasten */
.segmente{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;min-width:0}
.segmente label{position:relative;flex:0 0 auto}
.segmente input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.segmente span{display:block;min-height:var(--ziel-min);line-height:calc(var(--ziel-min) - 2px);padding:0 .75rem;
  border:1px solid var(--linie-feld);margin-left:-1px;color:var(--pergament);cursor:pointer;white-space:nowrap;text-align:center}
.segmente label:first-of-type span{margin-left:0}
.segmente input:hover + span{border-color:var(--gold);color:var(--gold-hell);position:relative}
.segmente input:checked + span{background:var(--gold);border-color:var(--gold);color:var(--nacht);font-weight:700;position:relative}
.segmente input:focus-visible + span{outline:2px solid var(--fokus);outline-offset:2px;position:relative;z-index:1;
  box-shadow:inset 0 0 0 2px var(--nacht)}

/* ---------- 9  Reiter (role=tablist) ---------- */
.reiter{display:flex;gap:var(--s-5);border-bottom:1px solid var(--linie);margin-bottom:var(--s-4);overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter [role="tab"]{all:unset;box-sizing:border-box;display:inline-flex;align-items:baseline;gap:var(--s-2);
  min-height:var(--ziel-min);padding:var(--s-2) 0 .5625rem;margin-bottom:-1px;cursor:pointer;white-space:nowrap;
  font-size:var(--text-l);font-weight:500;color:var(--kamel);border-bottom:3px solid transparent}
.reiter [role="tab"]:hover{color:var(--gold-hell)}
.reiter [role="tab"][aria-selected="true"]{color:var(--pergament-hell);border-bottom-color:var(--gold)}
.reiter [role="tab"]:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.reiter-zahl{font-size:var(--text-s);font-weight:400;color:var(--sand)}
[role="tabpanel"]:focus-visible{outline-offset:6px}

/* ---------- 10  Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--ziel-min);
  padding:0 var(--s-4);font:inherit;font-size:var(--text-m);font-weight:700;line-height:1.2;white-space:nowrap;
  color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:var(--radius-0);
  text-decoration:none;cursor:pointer}
.knopf:hover{background:var(--gold);color:var(--nacht)}
.knopf--haupt{background:var(--gold);color:var(--nacht)}
.knopf--haupt:hover{background:var(--gold-hell);border-color:var(--gold-hell);color:var(--nacht)}
.knopf--haupt:focus-visible,.knopf:hover:focus-visible{box-shadow:inset 0 0 0 2px var(--nacht)}
.knopf--text{min-height:var(--ziel-min);padding:.125rem 0;border:0;background:none;color:var(--pergament);font-weight:500;
  text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
.knopf--text:hover{background:none;color:var(--pergament-hell);text-decoration-color:var(--gold-hell);text-decoration-thickness:2px}
.knopf--klein{min-height:var(--ziel-min);padding:0 var(--s-3)}
.knopf[disabled],.knopf[aria-disabled="true"]{color:var(--sand);border-color:var(--linie);background:none;cursor:not-allowed}
.knopf.ist-kopiert{color:var(--pergament);border-color:var(--pergament);background:none}
.knopf.ist-kopiert::before{content:"";width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--form-haken) center/contain no-repeat;mask:var(--form-haken) center/contain no-repeat}
.knopfreihe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
/* Aufklapp-Knopf: Winkel zeigt den Zustand */
[data-klappe]::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);transition:transform var(--dauer);margin-left:.15em;display:inline-block}
[data-klappe][aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
.knopf--text[data-klappe]::after{border-color:var(--gold)}

/* ---------- 11  Status-Häkchen, Badges, Delta, Betrag ---------- */
:root{
  --form-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4.2 4.2L16.5 5.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --form-kreuz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --form-strich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.haken{display:inline-flex;align-items:center;gap:.375rem;vertical-align:middle;line-height:1.2}
.haken::before{content:"";flex:none;width:1.25rem;height:1.25rem;background:currentColor;
  -webkit-mask:var(--haken-form) center/contain no-repeat;mask:var(--haken-form) center/contain no-repeat}
.haken--ok{color:var(--pergament);--haken-form:var(--form-haken)}
.haken--fehlt{color:var(--rot);--haken-form:var(--form-kreuz)}
.haken--leer{color:var(--sand);--haken-form:var(--form-strich)}
.haken-text{font-size:var(--text-s);color:var(--kamel)}

.badge{display:inline-flex;align-items:center;gap:.375em;padding:.0625rem .4375rem;border:1px solid currentColor;
  border-radius:var(--radius-1);font-size:var(--text-s);font-weight:500;line-height:1.35;white-space:nowrap;
  color:var(--kamel);vertical-align:.08em}
.badge--aktion{color:var(--rot)}
.badge--erledigt{color:var(--kamel)}
.badge--leise{color:var(--sand);border-style:dashed}
.badge--info{color:var(--pergament)}
.badge--raid{color:var(--pergament);border-color:var(--rc,var(--kamel))}
.badge--raid::before{content:"";width:.4375rem;height:.4375rem;background:var(--rc,var(--kamel));transform:rotate(45deg)}

.delta{font-weight:500;color:var(--pergament);white-space:nowrap}
.delta--minus{color:var(--rot)}
.betrag{font-family:var(--schrift-zahl);font-variant-numeric:lining-nums tabular-nums;color:var(--pergament-hell);line-height:1}

/* Raidfarben */
.raid--hyjal{--rc:var(--raid-hyjal);--rc-flaeche:var(--raid-hyjal-flaeche)}
.raid--barrow{--rc:var(--raid-barrow);--rc-flaeche:var(--raid-barrow-flaeche)}
.raid--onyxia{--rc:var(--raid-onyxia);--rc-flaeche:var(--raid-onyxia-flaeche)}
.raidname{display:inline-flex;align-items:baseline;gap:.45em}
.raidname::before{content:"";flex:none;width:.45em;height:.45em;background:var(--rc,var(--kamel));transform:translateY(-.08em) rotate(45deg)}
/* Raid = Raute (wie am Grat), Quadrat = Klasse und Item-Qualität. So stehen in einem Barrow-Loot-Eintrag
   nicht zwei lila Quadrate untereinander, die Verschiedenes bedeuten. */

/* ---------- 12  Klassen, Spieler, Feder ---------- */
.k-warrior{--kc:var(--k-warrior);--kt:var(--k-warrior);color:var(--kt)}
.k-paladin{--kc:var(--k-paladin);--kt:var(--k-paladin);color:var(--kt)}
.k-hunter{--kc:var(--k-hunter);--kt:var(--k-hunter);color:var(--kt)}
.k-rogue{--kc:var(--k-rogue);--kt:var(--k-rogue);color:var(--kt)}
.k-priest{--kc:var(--k-priest);--kt:var(--k-priest);color:var(--kt)}
.k-shaman{--kc:var(--k-shaman);--kt:var(--kt-shaman);color:var(--kt)}
.k-mage{--kc:var(--k-mage);--kt:var(--k-mage);color:var(--kt)}
.k-warlock{--kc:var(--k-warlock);--kt:var(--k-warlock);color:var(--kt)}
.k-druid{--kc:var(--k-druid);--kt:var(--k-druid);color:var(--kt)}
/* Klassenquadrat in Originalfarbe, Wort leise */
.klasse{display:inline-flex;align-items:center;gap:.45em;color:var(--kamel);white-space:nowrap}
.kq{display:inline-block;flex:none;width:.5625rem;height:.5625rem;background:var(--kc,var(--kamel))}
/* Namen stehen überall in 500, Begleittext in 400: Krieger (#C69B6D) liegt nah an Kamel, Priester (#FFFFFF)
   nah an Pergament, der Schnitt trägt den Unterschied. In fetten Zeilen (Gewinner, Überschrift) erben sie 700. */
.spieler{white-space:nowrap;font-weight:500}
:is(b,strong,h1,h2,h3,h4) .spieler,.gebote-tabelle tr.gewinnt th .spieler{font-weight:inherit}
a.spieler{text-decoration:none}
a.spieler:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Leiser Name (UI.playerName(p, {leise:true})): Kamel, Klassenfarbe erst beim Darüberfahren. Für Nebenspalten wie
   „Gebucht von“, damit die unwichtigste Spalte nicht die farbigste ist. */
.spieler--leise{color:var(--kamel)}
a.spieler--leise:hover,a.spieler--leise:focus-visible{color:var(--kt,var(--pergament))}
/* Sichtbares „du“ hinter dem eigenen Namen (UI.playerName(p, {du:true}) oder UI.du()) */
.du{font-size:var(--text-s);font-weight:400;color:var(--kamel);white-space:nowrap}
/* Name und Badge als Paar (UI.mitBadge): 8 px Abstand, sonst lesen sie sich wie ein Element */
.mit-badge{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2);max-width:100%}
/* Eine Größe für Namen in Tabellen und Gebotsleitern: 17 px, am Telefon 16 px (wie td.name) */
.tabelle tbody td > .spieler,.gebote-tabelle th > .spieler{font-size:var(--text-l)}
.feder{display:inline-block;width:.8125em;height:.8125em;margin-left:.3em;vertical-align:-.05em;
  fill:none;stroke:var(--kamel);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 13  Items, Lootliste, Gebotsleiter ---------- */
.q-0{--qc:var(--q-0);color:var(--q-0)}
.q-1{--qc:var(--q-1);color:var(--q-1)}
.q-2{--qc:var(--q-2);color:var(--q-2)}
.q-3{--qc:var(--q-3);color:var(--qt-3)}
.q-4{--qc:var(--q-4);color:var(--qt-4)}
.q-5{--qc:var(--q-5);color:var(--q-5)}
.item{display:inline-flex;align-items:baseline;gap:.5em;font-weight:700;line-height:1.3}
.item::before{content:"";flex:none;width:.625rem;height:.625rem;background:var(--qc,var(--kamel));transform:translateY(-.02em)}
a.item{text-decoration:none}
a.item:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.item-art{font-size:var(--text-s);color:var(--sand)}

.lootliste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
.loot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-4);align-items:start}
.loot > *{grid-column:1;min-width:0}
.loot-item{font-size:var(--text-l)}
.loot-art,.loot-wer,.loot-wo{padding-left:1.125rem;color:var(--kamel)}
.loot-art{font-size:var(--text-s);color:var(--sand)}
.loot-preis{grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.loot-preis .betrag{font-size:var(--titel-m);font-weight:700}
.loot-preis span:last-child{font-size:var(--text-s);color:var(--sand);margin-top:var(--s-1)}
.loot-schalter{justify-self:start;margin:var(--s-1) 0 0 1.125rem}
.gebote{grid-column:1 / -1;margin:var(--s-2) 0 0 1.125rem;padding:var(--s-2) 0 var(--s-1) var(--s-4);border-left:1px solid var(--linie)}
.gebote-tabelle{border-collapse:collapse;font-size:var(--text-m)}
.gebote-tabelle th,.gebote-tabelle td{padding:.1875rem var(--s-3) .1875rem 0;text-align:left;vertical-align:baseline;white-space:nowrap}
.gebote-tabelle th{font-weight:500}
.gebote-tabelle td{color:var(--kamel)}
.gebote-tabelle td.num{text-align:right}
.gebot{display:inline-block;min-width:2.4em;padding:0 .3em;text-align:right;
  font-family:var(--schrift-zahl);font-size:1.25rem;line-height:1.2;color:var(--pergament-hell)}
.gebote-tabelle tr.zahlt .gebot{outline:1px solid var(--pergament);outline-offset:-1px}
.gebote-tabelle tr.gewinnt th{font-weight:700}
.gebote-satz{margin:var(--s-2) 0 0;max-width:52ch;color:var(--pergament);font-weight:500}

/* ---------- 14  Anwesenheit, Plätze, Legende ---------- */
.anw{display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.anw8{display:inline-flex;gap:2px}
.anw8 i{display:block;width:.5625rem;height:.875rem;border:1px solid var(--kamel);border-radius:1px}
.anw8 i.da{background:var(--pergament);border-color:var(--pergament)}
.anw8 i.bank{border-color:var(--pergament);background:repeating-linear-gradient(135deg,var(--pergament) 0 2px,transparent 2px 4px)}
.anw8 i.fehlt{background:transparent}
.anw8 i.vorher{border:1px dotted var(--linie)}
.anw-zahl{min-width:2.4em;text-align:right;color:var(--pergament)}
.legende{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);list-style:none;margin:var(--s-2) 0 0;padding:0;
  font-size:var(--text-s);color:var(--kamel)}
.legende li{display:inline-flex;align-items:center;gap:.375rem}
.legende .anw8 i{width:.5625rem}

/* Plätze: immer eine Reihe. Die Kästchen werden schmaler, wenn der Platz fehlt, die Gruppen bleiben. */
.plaetze{display:flex;flex-wrap:nowrap;gap:3px;margin:var(--s-2) 0 var(--s-1);max-width:100%}
.plaetze .grp{display:flex;gap:3px;flex:0 1 auto;min-width:0}
.plaetze .grp + .grp{margin-left:5px}
.plaetze i{display:block;width:.5rem;flex:0 1 auto;min-width:2px;height:1.125rem;background:var(--pergament);border-radius:1px}
.plaetze i.frei{background:transparent;box-shadow:inset 0 0 0 1px var(--kamel)}

/* ---------- 15  Hinweise, Quelle, Leerzustand ---------- */
.hinweis{background:var(--tiefsee);color:var(--pergament);padding:var(--s-3) var(--s-4);max-width:calc(var(--masz-text) + 2rem)}
.hinweis p{margin:0}
.hinweis p + p{margin-top:var(--s-2)}
.hinweis > strong:first-child,.hinweis > p:first-child > strong:first-child{color:var(--pergament-hell)}
.hinweis--warnung > strong:first-child,.hinweis--warnung > p:first-child > strong:first-child{color:var(--rot)}
.hinweis--still{background:none;padding:0;color:var(--kamel)}
.quelle{margin:0;color:var(--sand);max-width:var(--masz-text)}
.quelle strong{color:var(--pergament);font-weight:500}
.leer-hinweis{border:1px dashed var(--linie);padding:var(--s-6) var(--s-4);text-align:center;color:var(--pergament)}
.leer-hinweis p{margin-inline:auto;max-width:48ch}
.fussnoten{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-1);
  font-size:var(--text-s);color:var(--sand);max-width:72ch}
.fussnoten b{color:var(--pergament);font-weight:500}

/* ---------- 15b Nächster Decay (UI.decayBlock), kleine Rechnung, Belege (UI.beleg) ---------- */
.decay{max-width:44ch}
.decay-wann{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-3);margin-bottom:var(--s-2)}
.decay-wann strong{font-size:var(--text-l);font-weight:700;color:var(--pergament-hell)}
.decay-wann span{color:var(--kamel)}
.decay-regel{color:var(--kamel)}
.decay-liste{color:var(--sand)}
/* Kleine Rechnung: Posten, doppelte Summenlinie, Ergebnis */
.tabelle.rechnung{width:auto;min-width:15rem;margin:var(--s-4) 0 var(--s-3)}
.rechnung caption{padding-bottom:var(--s-1);font-size:var(--text-s);color:var(--kamel)}
.rechnung tbody th,.rechnung tfoot th{padding:var(--s-1) var(--s-6) var(--s-1) 0;font-weight:400;color:var(--pergament);text-align:left;white-space:nowrap}
.tabelle.rechnung td{height:auto;padding:var(--s-1) 0 var(--s-1) var(--s-3)}
.tabelle.rechnung td.betrag{font-size:var(--titel-s);font-weight:600;background:none}
.tabelle.rechnung td.betrag.minus{color:var(--rot)}
.tabelle.rechnung tfoot td.betrag{font-size:var(--titel-m);font-weight:700}
.rechnung tbody tr:hover > *{background:none}
.beleg{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-3);margin:var(--s-1) 0 0;color:var(--kamel)}
.beleg-label{font-size:var(--text-s);color:var(--sand)}
.beleg-zeit{color:var(--pergament);white-space:nowrap}
.beleg-log{white-space:nowrap}

/* ---------- 16  Formular, Ablage ---------- */
.formular{display:grid;gap:var(--s-4);max-width:40rem}
.formular .feld input,.formular .feld select,.formular .feld textarea{width:100%}
.ablage{position:relative;display:grid;justify-items:center;align-content:center;gap:var(--s-2);text-align:center;
  padding:var(--s-6) var(--s-4);border:2px dashed var(--linie-feld);color:var(--pergament)}
.ablage p{margin:0}
.ablage-titel{font-size:var(--text-l);font-weight:700;color:var(--pergament-hell)}
.ablage-text{font-size:var(--text-s);color:var(--kamel);max-width:44ch}
.ablage-datei{font-weight:500}
.ablage.ist-ueber{border-color:var(--gold);background:var(--zeile)}
.ablage label.knopf:focus-within{outline:2px solid var(--fokus);outline-offset:3px}

/* ---------- 16b Zuordnung Discord-Name zu Charakter (Anmeldung und Verwaltung, UI.zuordnungFall) ---------- */
.zf-faelle{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:var(--s-6) var(--s-7);align-items:start}
.zf{min-width:0}
.zf-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2);
  font-family:var(--schrift-text);font-size:var(--text-l);font-weight:700;color:var(--pergament-hell)}
.zf-kopf:focus{outline:none}
.zf-kopf:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}
.zf p{max-width:52ch}
.zf-eintrag{color:var(--pergament)}
.zf-eintrag .klasse{margin-left:.3em;color:var(--pergament);white-space:normal}
.zf-notiz{color:var(--kamel)}
.zf-form{margin-top:var(--s-3)}
.zf-form fieldset{border:0;margin:0 0 var(--s-3);padding:0;display:grid;gap:0;min-width:0}
.zf-form legend{padding:0;margin-bottom:var(--s-1);font-weight:700;color:var(--pergament)}
.zf-form .wahl{align-items:flex-start;padding-block:.5625rem;min-height:0;line-height:1.35}
.zf-form .wahl input{margin-top:.0625rem;flex:none}
.zf-andere{padding:0 0 var(--s-2) 1.75rem}
.zf-andere select{width:100%;max-width:22rem}
.zf-fehler{margin:var(--s-2) 0 0;color:var(--rot);font-weight:500}

/* ---------- 17  Diagramme (inline SVG, Klassen d-*) ---------- */
.diagramm{display:block;width:100%;height:auto;overflow:visible;font-family:var(--schrift-text)}
.diagramm .d-gitter{stroke:var(--linie-leise);stroke-width:1}
.diagramm .d-achse{stroke:var(--linie);stroke-width:1}
.diagramm .d-null{stroke:var(--kamel);stroke-width:1}
.diagramm .d-linie{fill:none;stroke:var(--pergament);stroke-width:2;stroke-linejoin:round}
.diagramm .d-flaeche{fill:var(--betrag-grund)}
.diagramm .d-punkt{fill:var(--pergament-hell)}
.diagramm .d-balken{fill:var(--kamel)}
.diagramm .d-balken--minus{fill:var(--rot)}
.diagramm .d-marke{stroke:var(--sand);stroke-width:1;stroke-dasharray:3 3}
.diagramm text{fill:var(--kamel);font-size:14px}
.diagramm .d-wert{fill:var(--pergament-hell);font-family:var(--schrift-zahl);font-size:18px;font-weight:700}

/* ---------- 18  Mittlere Breiten ---------- */
@media (max-width:1180px){
  .spalten{grid-template-columns:minmax(0,1fr)}
  .naechster--voll{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .kopf{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"marke ich" "nav nav" "raid raid"}
  .nav ul{gap:0 var(--s-4)}
}

/* ---------- 18  Telefon ---------- */
@media (max-width:720px){
  :root{--titel-m:1.625rem;--titel-l:2rem}
  /* Kopf am Telefon knapp halten: Die Überschrift der Seite soll bei etwa 200 px beginnen */
  .seite{padding-top:var(--s-3)}
  .band .wrap{padding-block:.25rem}
  .band-lang{display:none}
  .kopf{gap:var(--s-1) var(--s-3);padding-top:var(--s-1)}
  .marke{font-size:1.5rem;padding-block:.375rem}
  .marke small{font-size:var(--text-s)}
  /* Navigation: eine Zeile zum Wischen, randlos; der Rand blendet aus, solange es weitergeht */
  .nav{margin-inline:calc(-1 * var(--rand))}
  .nav ul{flex-wrap:nowrap;gap:0 var(--s-5);overflow-x:auto;padding-inline:var(--rand);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:none}
  .nav a{display:flex;align-items:center;min-height:var(--ziel-touch);padding:0;font-size:.9375rem;border-bottom-width:2px}
  .nav ul.mehr-rechts{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent)}
  .nav ul.mehr-links{-webkit-mask-image:linear-gradient(to right,transparent,#000 3rem);mask-image:linear-gradient(to right,transparent,#000 3rem)}
  .nav ul.mehr-links.mehr-rechts{-webkit-mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);
    mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}
  .naechster{padding-block:0;gap:0}
  .naechster-titel .raidname{font-size:1.25rem}
  .naechster-stand{line-height:1.35}
  .ich{padding-block:0;grid-template-columns:auto auto auto;grid-template-areas:"label zahl rang";align-items:baseline;gap:0 var(--s-2)}
  .ich-zahl{font-size:1.625rem}
  /* Die Zahl ist ein Link: Fingerfläche 44 px, ohne den Kopf höher zu machen */
  a.ich-zahl{padding:.5625rem .6875rem;margin:-.5625rem -.6875rem}
  .ich-label .als{display:none}
  .ich-rang > span{display:none}
  .grat{height:3.75rem;margin-top:0}
  .grat-lang{display:none}
  .grat-kurz{display:inline}
  .grat-text{bottom:0}
  /* Kompakter Kopf: der Grat ist nur noch ein schmaler Streifen mit der Zeile zum Aufklappen */
  .himmel:not(.himmel--voll) .grat{height:1.5rem}
  .himmel:not(.himmel--voll) .grat-bosse{display:none}
  .grat-knopf{line-height:1.5rem}
  /* Fingerfläche 44 px nur nach unten: direkt darüber steht der Link zur Anmeldung */
  .grat-knopf,.himmel .grat-knopf{padding:0 0 1.25rem;margin:0 0 -1.25rem}
  .knopf--text{min-height:var(--ziel-touch)}
  .naechster--voll{gap:var(--s-3);padding-top:var(--s-2)}
  .naechster--voll .naechster-titel .raidname{font-size:var(--titel-l)}
  .naechster--voll .naechster-wann{font-size:var(--text-m)}
  .naechster--voll .naechster-groesse,.naechster--voll .fakt-setup small{display:none}
  .naechster--voll .fakten{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3)}
  .naechster--voll .fakten .fakt-breit{grid-column:1 / -1}
  .naechster--voll .knopf{width:100%;margin-top:var(--s-3)}
  .himmel--voll .ich{padding-top:0}
  .plaetze .grp,.plaetze{gap:2px}
  .plaetze .grp + .grp{margin-left:4px}

  .titelzeile{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .abschnitt{margin-top:var(--s-6)}
  .nur-breit{display:none!important}
  .nur-schmal{display:revert!important}

  /* Filter: Suche bleibt sichtbar, der Rest klappt ein */
  .filterleiste{gap:var(--s-2);padding:var(--s-2)}
  .filterleiste > .feld:first-child{flex:1 1 10rem}
  .filterleiste input[type=search]{width:100%}
  .filterleiste .filter-schalter{display:inline-flex}
  .filter-mehr{display:grid;gap:var(--s-2);width:100%;padding-top:var(--s-1)}
  .filter-mehr:not(.ist-offen){display:none}
  .filter-mehr .feld{flex-direction:row;align-items:center;gap:var(--s-3)}
  .filter-mehr .feld > label,.filterleiste .filter-mehr .segmente > legend{position:static;width:auto;height:auto;overflow:visible;
    clip-path:none;white-space:normal;font-size:var(--text-s);color:var(--kamel);min-width:5.5em}
  .filter-mehr .feld select,.filter-mehr .feld input{flex:1;min-width:0;width:auto}
  .filter-mehr .segmente{flex-wrap:nowrap}
  .filterleiste .filter-mehr .segmente > legend{width:100%;margin:0 0 var(--s-1);padding:0}
  .filter-mehr .segmente label{flex:1 1 auto}
  .filter-mehr .segmente span{padding:0 .25rem;font-size:.9375rem}
  .filter-zaehler{margin:0;flex:1 1 auto}

  /* Tabellen mobil: echte Tabelle, Zeilen um 54 px, zweite Zeile unter dem Namen */
  .tabelle{--fest-1:2.75rem}
  .tabelle .fest-kante{box-shadow:1px 0 0 var(--linie)}
  .tabelle th,.tabelle td{padding-inline:.4375rem}
  .tabelle .sortknopf{padding-inline:.4375rem}
  .tabelle td{height:3.375rem}
  .tabelle td.betrag{font-size:1.625rem}
  .tabelle--kontobuch td.betrag,.tabelle--kontobuch tfoot td.betrag{background:none}
  .tabelle--kontobuch tbody tr:hover td.betrag{background:var(--zeile)}
  .unter{display:block;margin-top:2px;font-family:var(--schrift-text);font-size:var(--text-s);font-weight:400;
    line-height:1.25;color:var(--kamel);white-space:nowrap;letter-spacing:0}
  td.betrag .unter{font-weight:500}
  .tabelle td.name,.tabelle tbody td > .spieler,.gebote-tabelle th > .spieler{font-size:var(--text-m)}

  .loot-preis .betrag{font-size:1.625rem}
  .gebote{margin-left:0;padding-left:var(--s-3)}
  /* Gebotsleiter: Name, Stufe und Gebot in einer Zeile, die Anmerkung klein darunter */
  .gebote-tabelle,.gebote-tabelle tbody{display:block}
  .gebote-tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) 2.25rem 3.25rem;column-gap:var(--s-3);align-items:baseline;padding-block:.1875rem}
  .gebote-tabelle th,.gebote-tabelle td{padding:0}
  .gebote-tabelle th{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .gebote-tabelle td.gebot-notiz{grid-column:1 / -1;font-size:var(--text-s);white-space:normal}
  .gebote-tabelle td.gebot-notiz:empty{display:none}
  .hinweis{padding:var(--s-3)}
}

/* Kleinste Breiten: keine Überlappung bis 320 px */
@media (max-width:480px){
  .marke small{display:none}
}
@media (max-width:360px){
  .ich-label{display:none}
  .nav a{font-size:.875rem}
  .filter-mehr .segmente span{font-size:.875rem;padding:0 .125rem}
}

/* Touch: Klickflächen 44 px */
@media (pointer:coarse){
  .knopf{min-height:var(--ziel-touch)}
  .grat-knopf{padding-block:.5rem;margin-block:-.5rem}
  .sortknopf{min-height:var(--ziel-touch)}
  .segmente span{min-height:var(--ziel-touch);line-height:calc(var(--ziel-touch) - 2px)}
  input[type=search],input[type=text],select,textarea{min-height:var(--ziel-touch)}
  .reiter [role="tab"]{min-height:var(--ziel-touch)}
}

/* ---------- 19  Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- 20  Plague: Ergänzungen beim Portieren ---------- */
/* Strichstärke der Beträge (UI.gewichtKlasse); ersetzt die Inline-Styles (font-weight) des Entwurfs, die CSP verbietet Inline-Styles.
   !important, weil das Inline-Style des Entwurfs auch über Tabellenregeln wie tfoot td.betrag stand. */
.gw-400{font-weight:400!important}.gw-410{font-weight:410!important}.gw-420{font-weight:420!important}.gw-430{font-weight:430!important}.gw-440{font-weight:440!important}.gw-450{font-weight:450!important}.gw-460{font-weight:460!important}.gw-470{font-weight:470!important}.gw-480{font-weight:480!important}.gw-490{font-weight:490!important}
.gw-500{font-weight:500!important}.gw-510{font-weight:510!important}.gw-520{font-weight:520!important}.gw-530{font-weight:530!important}.gw-540{font-weight:540!important}.gw-550{font-weight:550!important}.gw-560{font-weight:560!important}.gw-570{font-weight:570!important}.gw-580{font-weight:580!important}.gw-590{font-weight:590!important}
.gw-600{font-weight:600!important}.gw-610{font-weight:610!important}.gw-620{font-weight:620!important}.gw-630{font-weight:630!important}.gw-640{font-weight:640!important}.gw-650{font-weight:650!important}.gw-660{font-weight:660!important}.gw-670{font-weight:670!important}.gw-680{font-weight:680!important}.gw-690{font-weight:690!important}
.gw-700{font-weight:700!important}.gw-710{font-weight:710!important}.gw-720{font-weight:720!important}.gw-730{font-weight:730!important}.gw-740{font-weight:740!important}.gw-750{font-weight:750!important}.gw-760{font-weight:760!important}.gw-770{font-weight:770!important}.gw-780{font-weight:780!important}.gw-790{font-weight:790!important}
.gw-800{font-weight:800!important}.gw-810{font-weight:810!important}.gw-820{font-weight:820!important}.gw-830{font-weight:830!important}.gw-840{font-weight:840!important}.gw-850{font-weight:850!important}.gw-860{font-weight:860!important}.gw-870{font-weight:870!important}.gw-880{font-weight:880!important}.gw-890{font-weight:890!important}
.gw-900{font-weight:900!important}
/* Navigation: Seiten, die in Plan 2/3 kommen, stehen ohne Link da */
.nav-bald{display:block;padding:var(--s-2) 0 .625rem;color:var(--sand);font-size:var(--text-m);font-weight:500;
  border-bottom:3px solid transparent;white-space:nowrap;cursor:default}
.nav-bald small{font-size:var(--text-s);font-weight:400}
.nav-abmelden{display:block;padding:var(--s-2) 0 .625rem;margin:0;background:none;border:0;border-bottom:3px solid transparent;
  color:var(--kamel);font-family:var(--schrift-text);font-size:var(--text-m);font-weight:500;line-height:inherit;white-space:nowrap;cursor:pointer}
.nav-abmelden:hover{color:var(--gold-hell);border-bottom-color:rgba(247,185,10,.45)}
.nav-abmelden:disabled{color:var(--sand);cursor:progress}
/* Dein Stand ohne Zahl (kein Charakter verknüpft oder kein Stand auf dieser Seite) */
.ich--leer{grid-template-columns:auto;grid-template-areas:"label" "hinweis";max-width:22rem}
.ich-hinweis{grid-area:hinweis;color:var(--pergament);font-size:var(--text-s);line-height:1.4}
.naechster--leer{grid-template-columns:minmax(0,1fr)}
.naechster--leer .naechster-wann{color:var(--kamel)}
.naechster--voll.naechster--leer .naechster-titel .raidname{font-size:var(--titel-s)}
/* Beträge ohne Wert und Decay-Zeilen (Prozentsatz, nie als Zahl summiert) */
.delta--leer{color:var(--sand);font-weight:400}
.delta--decay{color:var(--kamel);font-weight:500}
.loot-ohne{grid-column:1 / -1;margin:var(--s-1) 0 0;padding-left:1.125rem;font-size:var(--text-s)}
.seite-meldung{max-width:var(--masz-text);margin-block:var(--s-7)}
@media (max-width:720px){
  .nav-bald,.nav-abmelden{display:flex;align-items:center;gap:.25em;min-height:var(--ziel-touch);padding:0;font-size:.9375rem;border-bottom-width:2px}
  .ich--leer{grid-template-areas:"label hinweis";grid-template-columns:auto auto;gap:0 var(--s-2)}
}