/* KoD — Designsystem
   Palette:  Papier #FAFAF7 · Tinte #141414 · NJPW-Rot #C8102E
             Stahl #6E7276 · Linie #E2E1DC
   Typo:     Anton (Display) · Roboto Condensed (Text/Daten)
   Signatur: Hoshitori-Sterne ○/● in den Serien auf der Startseite;
             die Formkurve nutzt vier eigene Formen, siehe .star      */

:root{
  --paper:#FAFAF7; --ink:#141414; --red:#C8102E;
  --steel:#6E7276; --line:#E2E1DC; --win:#C8102E; --loss:#141414;
}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Roboto Condensed",system-ui,sans-serif; line-height:1.45;
}
a{color:inherit; text-decoration:none}
a:hover{color:var(--red)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:2px}

/* Masthead: rote Bande wie eine Ringschürze */
.masthead{
  background:var(--red); color:#fff; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:1.5rem; padding:.7rem 1.2rem;
  border-bottom:4px solid var(--ink);
}
.brand{font-family:Anton,sans-serif; font-size:1.5rem; letter-spacing:.04em;}
.brand span{color:var(--ink)}
.masthead nav{display:flex; gap:1.1rem; margin-left:auto;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem}
.masthead nav a{color:#fff; border-bottom:3px solid transparent; padding-bottom:2px}
.masthead nav a.on,.masthead nav a:hover{border-color:var(--ink); color:#fff}

/* Aktive Sortierung / eingeschaltete Spalte in den Filterleisten.
   Bewusst NICHT .on: das ist die Navigationsklasse im Masthead, und
   ein globales a.on{font-weight:700} haette die Navigation mit fett
   gesetzt — .masthead nav a.on setzt keine Schriftstaerke dagegen. */
a.sel{color:var(--red); font-weight:700}

main{max-width:64rem; margin:0 auto; padding:1.4rem 1.2rem 3rem}
footer{max-width:64rem; margin:0 auto; padding:1rem 1.2rem 2rem;
  color:var(--steel); font-size:.8rem; border-top:1px solid var(--line)}

h1{font-family:Anton,sans-serif; font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.05; margin:.2rem 0 1rem; text-transform:uppercase; letter-spacing:.01em}
h1 em{color:var(--red); font-style:normal}
h2{font-family:Anton,sans-serif; font-size:1.15rem; letter-spacing:.03em;
  text-transform:uppercase; margin:2rem 0 .6rem}
.eyebrow{color:var(--red); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:.75rem}
.muted{color:var(--steel)}
.small{font-size:.85rem}

/* Kennzahlen */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:.8rem; margin:1rem 0 1.6rem}
.kpi{border:1px solid var(--line); border-top:4px solid var(--red);
  background:#fff; padding:.7rem .9rem}
.kpi b{display:block; font-family:Anton,sans-serif; font-size:1.9rem; line-height:1}
.kpi span{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--steel)}

/* Tabellen */
table{width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--line); font-size:.95rem}
th{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  text-align:left; color:var(--steel); font-weight:700;
  padding:.5rem .7rem; border-bottom:2px solid var(--ink)}
td{padding:.45rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
tr:hover td{background:#FCF6F0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* Match-Karte: Tale of the tape */
.match{background:#fff; border:1px solid var(--line); margin:.7rem 0;
  padding:.8rem 1rem}
.match .head{display:flex; justify-content:space-between; gap:1rem;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--steel); margin-bottom:.4rem}
.match .tape{display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem;
  align-items:center}
.side{display:flex; flex-direction:column; gap:.15rem}
.side.right{text-align:right; align-items:flex-end}
.side .p{font-weight:500}
.side .p.dec{font-weight:700}
.side.win .p{color:var(--red)}
.vs{font-family:Anton,sans-serif; color:var(--steel); font-size:.9rem;
  text-align:center}
.result-line{margin-top:.55rem; padding-top:.5rem; border-top:1px dashed var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.88rem}
.result-line b{color:var(--red)}

/* Formkurve: vier Ausgaenge, vier Formen.
   win = Stern rot · loss = X schwarz · draw = Kreis gefuellt grau ·
   nc = Kreis hohl grau. Vorher gab es nur drei Regeln, nc fiel auf den
   Grundzustand zurueck und sah damit aus wie ein Sieg.

   Die vier Groessen sind bewusst verschieden. Gleiche Kantenlaenge heisst
   nicht gleiche Wirkung: der gefuellte Kreis ist die kompakteste Form und
   deshalb der kleinste Wert, der Stern verliert Flaeche an seine Zacken
   und braucht den groessten, das X ist ueberhaupt keine Flaeche, sondern
   zwei Striche, und der hohle Kreis ist von allen vieren der schwaechste
   Punkt — er bekommt mehr Durchmesser UND einen kraeftigen Rand.
   Abgestimmt am gerenderten Bild, nicht gerechnet. */
.stars{display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0 1rem;
  align-items:center}
.star{display:inline-block; position:relative; flex:none}
.star.win{width:1.45rem; height:1.45rem; background:var(--win);
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%, 39% 35%)}
.star.loss{width:1.32rem; height:1.32rem}
.star.loss::before,.star.loss::after{content:""; position:absolute;
  left:50%; top:50%; width:.29rem; height:1.52rem; background:var(--loss);
  border-radius:1px}
.star.loss::before{transform:translate(-50%,-50%) rotate(45deg)}
.star.loss::after{transform:translate(-50%,-50%) rotate(-45deg)}
.star.draw{width:1.22rem; height:1.22rem; border-radius:50%;
  background:var(--steel)}
.star.nc{width:1.3rem; height:1.3rem; border-radius:50%;
  border:.19rem solid var(--steel)}
/* Serien auf der Startseite: dieselben Formen wie die Formkurve, nur
   kleiner. Die Form steht oben nur einmal — hier wird ausschliesslich die
   Groesse ueberschrieben, damit Sieg und Niederlage auf beiden Seiten
   dasselbe Zeichen haben. Frueher stand hier ein zweites Zeichensystem
   aus Textzeichen, in dem ○ den Sieg meinte — in der Formkurve ist das
   der hohle Kreis fuer No Contest. */
.star-mini{white-space:nowrap; line-height:1}
.star-mini .star{margin-right:.12rem; vertical-align:middle}
.star-mini .star.win{width:.9rem; height:.9rem}
.star-mini .star.loss{width:.82rem; height:.82rem}
.star-mini .star.loss::before,.star-mini .star.loss::after{
  width:.18rem; height:.94rem}
.legend{font-size:.78rem; color:var(--steel)}
/* Legende der Formkurve: dieselben Elemente wie die Reihe selbst, damit
   kein Textzeichen etwas anderes zeigt als der Punkt darueber. Form und
   Beschriftung stecken zusammen in .lg — sonst bricht ein schmaler
   Viewport zwischen beiden um und das Symbol steht allein in der Zeile. */
.legend-stars{display:flex; flex-wrap:wrap; align-items:center;
  gap:.2rem .7rem}
.legend-stars .lg{display:inline-flex; align-items:center; gap:.3rem;
  white-space:nowrap}
/* Der Erklaersatz daneben ist ein Flex-Item wie die Symbole, und ein
   Flex-Item schrumpft per Voreinstellung NICHT unter seine
   max-content-Breite: min-width steht auf auto. Ein 197 Zeichen langer
   Satz stand deshalb in einer einzigen Zeile und zog die Startseite auf
   dem Telefon breiter als den Viewport. min-width:0 hebt das auf, die
   flex-Basis laesst ihn bei Platzmangel in die naechste Zeile rutschen.
   Die .lg-Paare bleiben davon unberuehrt — sie sollen nicht umbrechen. */
.legend-stars > :not(.lg){min-width:0; flex:1 1 14rem}
/* Dieselbe Falle bei den Ankreuzfeldern der Blatt-Einstellungen: Dort
   steht die Erklaerung als Text neben der Checkbox, bis 233 Zeichen lang,
   und auch sie ist ein Flex-Item. Gefunden von der Pruefung, die fuer
   die Serien-Legende gebaut wurde. */
.chk > :not(input){min-width:0}

/* Wrestler-Kopf */
.rec{display:flex; gap:1.6rem; flex-wrap:wrap; margin:.6rem 0 1rem}
.rec div b{font-family:Anton,sans-serif; font-size:1.7rem; display:block; line-height:1}
.rec div span{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--steel)}

/* Serien-Gruppen */
.series-block{margin-bottom:2rem}
.series-block h2{border-bottom:3px solid var(--red); padding-bottom:.25rem}

/* Formulare */
input[type=text]{font:inherit; padding:.45rem .6rem; border:1px solid var(--ink);
  background:#fff; min-width:16rem}
button{font:inherit; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background:var(--red); border:0; color:#fff; padding:.5rem 1.1rem; cursor:pointer}
button:hover{background:#A00D25}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem;
  width:100%; min-height:9rem; padding:.7rem; border:1px solid var(--ink);
  background:#fff}
.error{background:#FDECEE; border:1px solid var(--red); color:#7A0A1C;
  padding:.5rem .8rem; margin:.8rem 0; font-size:.9rem}
/* Gegenstueck zu .error, gleiche Form: Bis jetzt war jede geflashte
   Meldung ein Fehler, und ein geglueckter Vorgang im roten Kasten liest
   sich wie ein Ausfall. */
.ok{background:#F1F4F1; border:1px solid var(--steel); color:#2C3A2C;
  padding:.5rem .8rem; margin:.8rem 0; font-size:.9rem}
/* Dritte Form daneben, gleiche Masse, ohne Signalfarbe: ein Hinweis, der
   IMMER steht, unabhaengig davon, was in den Daten ist. Rot bleibt dem
   vorbehalten, wo etwas zu tun ist -- wer den Dauerkasten gewohnt ist,
   ueberliest sonst auch den echten Befund daneben. Das ist der
   Mechanismus, an dem Warnungen sterben. */
.hinweis{background:#F2F1EC; border:1px solid var(--line); color:var(--ink);
  padding:.5rem .8rem; margin:.8rem 0; font-size:.9rem}
.examples details{margin:.4rem 0}
.examples pre{background:#fff; border:1px solid var(--line); padding:.6rem .8rem;
  overflow-x:auto; font-size:.82rem}

@media (max-width:40rem){
  /* Letzte Sicherung gegen Querscrollen: Was doch einmal zu breit geraet,
     bricht innerhalb des Wortes um, statt die ganze Seite zu ziehen. */
  body{overflow-x:hidden}
  .legend, .legend-stars > :not(.lg){overflow-wrap:anywhere}
  .match .tape{grid-template-columns:1fr}
  .side.right{text-align:left; align-items:flex-start}
  .vs{display:none}
  /* Zehn Menuepunkte in einer Zeile schoben die ganze Seite quer — auf dem
     Telefon bricht die Navigation deshalb um. */
  .masthead nav{margin-left:0; flex-wrap:wrap}
  /* Auf dem Telefon zaehlt jeder Millimeter Spaltenbreite. */
  table{font-size:.85rem}
  th{padding:.4rem .25rem; letter-spacing:.03em}
  td{padding:.4rem .25rem}
  /* Ein Tag-Team traegt zwei Namen in einer Zelle ("Alex Coughlin &
     Gabe Kidd"). Ohne Umbruchregel setzt der Browser die Spalte so
     breit, wie der laengste Name es verlangt, und zieht die Tabelle
     ueber den Viewport hinaus. Dasselbe gilt fuer die Luecken-Liste,
     die dieselben Namen noch einmal ausschreibt. */
  td, .error li{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:no-preference){
  .kpi,.match{transition:transform .12s ease}
  .match:hover{transform:translateX(3px)}
}

/* Vergleichsformular + Samsa-Block */
.vsform{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  background:#fff; border:1px solid var(--line); padding:.8rem; margin-bottom:1.2rem}
.vsform input[type=text]{min-width:12rem}
.vsform select{font:inherit; padding:.45rem .5rem; border:1px solid var(--ink); background:#fff}
.vs-label{font-family:Anton,sans-serif; color:var(--red)}
.chk{display:flex; gap:.3rem; align-items:center; font-size:.9rem}
table.samsa td.num, table.samsa th.num{font-size:.9rem}

/* Login */
.login-box{max-width:22rem; margin:3rem auto}
.login-box input{width:100%; min-width:0}
.masthead .logout{margin:0}
.masthead .logout button{background:var(--ink); padding:.3rem .7rem; font-size:.75rem}
.masthead .logout button:hover{background:#000}

/* Zeitraum-Filterleiste */
.rangebar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  background:#fff; border:1px solid var(--line); padding:.55rem .8rem;
  margin:0 0 1rem; font-size:.88rem}
.rangebar label{display:flex; gap:.35rem; align-items:center; color:var(--steel)}
.rangebar input[type=date]{font:inherit; padding:.32rem .45rem;
  border:1px solid var(--ink); background:#fff; min-width:0}
.rangebar .reset{color:var(--red); font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em}
.vsform input[type=date]{font:inherit; padding:.32rem .45rem;
  border:1px solid var(--ink); background:#fff}

.twocol{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:40rem){.twocol{grid-template-columns:1fr}}

/* Show-Auswahl */
.picker{border:1px solid var(--line); background:#fff; margin:0 0 1rem;
  font-size:.88rem}
.picker>summary{cursor:pointer; padding:.5rem .8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; font-size:.78rem;
  color:var(--steel)}
.picker>summary:hover{color:var(--red)}
.pickerform{padding:0 .8rem .8rem}
.pickerhead{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  margin:.2rem 0 .8rem; color:var(--steel)}
.pickerhead .reset,.pickergrouphead a{color:var(--red); font-weight:700;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em}
.pickergroup{border-top:1px solid var(--line); padding:.5rem 0}
.pickergrouphead{display:flex; gap:.7rem; align-items:baseline;
  flex-wrap:wrap; margin-bottom:.3rem}
.pickershows{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.15rem .8rem}
.pickershow{display:flex; gap:.4rem; align-items:baseline; padding:.1rem 0}
.pickershow.off{color:var(--steel); text-decoration:line-through}
.pickershow input{margin:0}

/* Wrestler kommt in dieser Show vor */
.here{color:var(--red)}
.pickershow.here span{font-weight:700}
.pickershow.here::marker{color:var(--red)}
.pickershow.here>span::before{content:"■ "; color:var(--red)}
.pickershow.off.here>span::before{color:var(--steel)}

/* Namenskorrektur */
.namefix{margin:.2rem 0 1rem; font-size:.9rem}
.namefix>summary{cursor:pointer; color:var(--steel); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; font-weight:700}
.namefix>summary:hover{color:var(--red)}
.namefix form{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  margin:.5rem 0 .2rem}
.namefix input[type=text]{min-width:14rem}

/* Merge-Vorschau: derselbe linke Strich wie .pickeryearbody, damit kein
   zweites Muster fuer "eingerueckter Unterblock" entsteht. */
.mergeview{padding-left:.9rem; border-left:2px solid var(--line);
  margin:.6rem 0 .2rem .2rem}
/* Kleine Ueberschrift innerhalb eines Abschnitts, mit Abstand nach oben:
   Auf dem Telefon lief die Liste der nicht ruecknehmbaren Merges sonst
   ohne sichtbare Grenze in die Tabelle darueber. */
h3.unterabschnitt{font-family:Anton,sans-serif; letter-spacing:.03em;
  font-size:.95rem; text-transform:uppercase; margin:1.6rem 0 .3rem;
  padding-top:.9rem; border-top:1px solid var(--line); color:var(--steel)}
.mergeview h3{font-family:Anton,sans-serif; letter-spacing:.03em;
  font-size:.95rem; margin:.4rem 0 .3rem}
.mergeview ul{margin:.3rem 0; padding-left:1.1rem}
.mergeview li{margin:.15rem 0}

/* Jahres-Ebene im Ausblenden-Bereich */
.pickeryear{border-top:1px solid var(--line)}
.pickeryear>summary{cursor:pointer; padding:.4rem 0; display:flex; gap:.6rem;
  align-items:baseline; flex-wrap:wrap}
.pickeryear>summary:hover b{color:var(--red)}
.pickeryear>summary b{font-family:Anton,sans-serif; letter-spacing:.03em}
.pickeryearbody{padding-left:.9rem; border-left:2px solid var(--line);
  margin:0 0 .5rem .2rem}
.pickeryearbody .pickergroup:first-child{border-top:0}

/* Tour-Ebene aufklappbar */
details.pickergroup>summary{cursor:pointer; list-style-position:outside}
details.pickergroup>summary:hover b{color:var(--red)}
details.pickergroup .pickershows{margin-left:1rem}

.phbadge{display:inline-block; background:var(--steel); color:#fff;
  font-size:.6em; font-family:'Roboto Condensed'; letter-spacing:.08em;
  text-transform:uppercase; padding:.15em .5em; vertical-align:middle}

/* Massen-Setzen im Verwaltungsmodus: Aktionen unter der Tabelle */
.rosteract{margin:.8rem 0 .4rem; display:flex; flex-wrap:wrap;
  align-items:center; gap:.5rem; font-family:'Roboto Condensed';
  text-transform:uppercase; letter-spacing:.04em; font-size:.85rem}

.minorform textarea{width:100%; max-width:26rem; font:inherit;
  font-size:.85rem; padding:.4rem .5rem; border:1px solid var(--ink)}

/* Klapp-Pfeile + Checkboxen in den Kopfzeilen */
.pickeryear>summary, details.pickergroup>summary{list-style:none}
.pickeryear>summary::-webkit-details-marker,
details.pickergroup>summary::-webkit-details-marker{display:none}
.pickeryear>summary::after, details.pickergroup>summary::after{
  content:"▸"; color:var(--steel); font-size:.8em; margin-left:.2rem;
  transition:none}
.pickeryear[open]>summary::after,
details.pickergroup[open]>summary::after{content:"▾"}
.pickergrouphead input[type=checkbox],
.pickeryear>summary input[type=checkbox]{margin:0 .2rem 0 0}
.pickershow input:disabled + span{opacity:.55}

/* --- An diesem Tag ---------------------------------------------------- */
/* Kachelreihe im Muster von .kpis. Auf dem Telefon bleibt nur die erste
   Kachel stehen, der Rest faellt in dieselbe "… und N weitere"-Zeile —
   rein ueber CSS, damit es nur einen Renderpfad gibt. */
.otd{display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  gap:.8rem; margin:1rem 0 .4rem}
.otdcard{display:block; border:1px solid var(--line);
  border-top:4px solid var(--ink); background:#fff; padding:.6rem .8rem;
  text-decoration:none; color:inherit}
.otdcard:hover{border-top-color:var(--red)}
.otdcard>b{display:block; font-family:Anton,sans-serif; font-size:1.05rem;
  letter-spacing:.02em; text-transform:uppercase}
.otdcard .titleband{margin:.35rem 0 .25rem; padding:.15rem .4rem;
  font-size:.8rem; gap:.35rem}
.otdcard .otdshow{display:block; font-weight:700; font-size:.9rem;
  margin-top:.25rem}
.otdcard .otdwho{display:block; font-size:.88rem; margin-top:.15rem}
.otdcard .otdout{display:block; font-size:.78rem; color:var(--steel);
  margin-top:.2rem}
.otdmore{margin:.2rem 0 1.4rem; font-size:.9rem}
.otdmore-schmal{display:none}      /* nur auf dem Telefon noetig */
.otd-eng{display:none}

/* Kalenderseite */
.tagform select{max-width:12rem}
.jahrher{font-family:'Roboto Condensed',sans-serif; font-size:.8rem;
  text-transform:none; letter-spacing:0; color:var(--steel);
  font-weight:400}
.tagshow{border-left:3px solid var(--line); padding-left:.8rem;
  margin:.8rem 0 1.2rem}
.tagshowhead{margin:0 0 .4rem; font-weight:700}
.taghit{margin:.35rem 0}
.taghitline{margin:.1rem 0; display:flex; flex-wrap:wrap; gap:.5rem;
  align-items:baseline; font-size:.92rem}
.tagcard{margin-top:.5rem}
.tagcard summary{cursor:pointer; font-size:.85rem; color:var(--steel)}
.tagcard summary:hover{color:var(--red)}
.tagcard table{margin-top:.4rem}

@media (max-width:40rem){
  .otd .otdcard:nth-child(n+2){display:none}
  .otdmore-schmal{display:block}
  .otd-weit{display:none}
  .otd-eng{display:inline}
}

/* --- Titel / Championships ------------------------------------------- */
.titleband{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;
  margin:.3rem 0 .5rem;padding:.3rem .55rem;border-left:3px solid var(--red);
  background:rgba(0,0,0,.03);font-weight:500}
.titleband a{text-decoration:none}
.titleband .changed{font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;background:var(--red);color:#fff;padding:.05rem .4rem;
  border-radius:2px}
.titletag{display:inline-block;margin-left:.4rem;font-size:.75rem;
  padding:.02rem .35rem;border:1px solid var(--red);border-radius:2px;
  white-space:nowrap}
.titletag a{text-decoration:none}
.editform{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end;
  margin:.6rem 0 1.4rem}
.editform label{display:flex;flex-direction:column;font-size:.8rem;gap:.2rem}
.editform label.inline{flex-direction:row;align-items:center;gap:.35rem}
.editform input[type=text],.editform input:not([type]){min-width:11rem}
/* Loeschen steht direkt neben Speichern. Deshalb bewusst zurueckhaltend:
   Umriss statt Flaeche, damit die zerstoererische Aktion nicht wie die
   normale aussieht und ein Fehlklick unwahrscheinlicher wird. */
.editform button.danger{background:#fff; color:#7A0A1C;
  border:1px solid #C9B3B8; font-weight:500}
.editform button.danger:hover{background:#FDECEE; border-color:var(--red)}

.offen{font-size:.75rem;font-weight:500;color:#7A0A1C;background:#FDECEE;
  padding:.02rem .3rem;border-radius:2px;white-space:nowrap}

/* Aus dem Daten-Report wird direkt auf ein Match gesprungen. Der Anker
   braucht Luft nach oben, und ein kurzer Rahmen zeigt, welches gemeint ist. */
.match{scroll-margin-top:1rem}
.match:target{outline:2px solid var(--red); outline-offset:3px}

/* --- Spaltenschalter fuer schmale Viewports ---------------------------
   Die breiten Tabellen (Vergleich, Wrestler-Liste, Ranking) passen auf dem
   Telefon nicht nebeneinander. Zwei Zustaende, umgeschaltet von einer
   Checkbox unmittelbar vor der Tabelle — ohne JavaScript, die CSP der App
   verbietet Skripte:

     1. kompakt   — nur die Kernspalten, alles mit .opt faellt weg
     2. gestapelt — jede Zeile wird eine Karte, jede Zelle bekommt ihre
                    Beschriftung aus data-label

   Gegriffen wird ueber den Nachbarselektor Checkbox + Label + Tabelle, nicht
   ueber ~ : sonst wuerde auf der Vergleichsseite auch die zweite Tabelle
   (Aufeinandertreffen) mitschalten, die keine data-labels hat.

   Oberhalb von 40rem existiert der Schalter optisch nicht; die Tabellen
   sehen dort aus wie immer. Markup dazu: templates/_colswitch.html         */
.colswitch{display:none}
.colswitch-label{display:none}

@media (max-width:40rem){
  /* Sichtbar aus, aber fokussierbar an — sonst ist der Schalter mit der
     Tastatur nicht erreichbar. */
  .colswitch{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    border:0; overflow:hidden; clip-path:inset(50%)}
  .colswitch-label{display:inline-block; cursor:pointer; margin:0 0 .5rem;
    background:#fff; border:1px solid var(--ink); padding:.35rem .7rem;
    font-size:.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; user-select:none}
  .colswitch-label:hover{color:var(--red)}
  .colswitch:focus-visible + .colswitch-label{outline:2px solid var(--red);
    outline-offset:2px}
  .colswitch:checked + .colswitch-label{background:var(--ink); color:#fff}
  .colswitch:checked + .colswitch-label:hover{color:#fff}
  .colswitch-label .sw-less{display:none}
  .colswitch:checked + .colswitch-label .sw-more{display:none}
  .colswitch:checked + .colswitch-label .sw-less{display:inline}

  /* Zustand 1: kompakt */
  .colswitch:not(:checked) + .colswitch-label + table .opt{display:none}

  /* Zustand 2: gestapelte Karten */
  .colswitch:checked + .colswitch-label + table{display:block; border:0;
    background:none}
  .colswitch:checked + .colswitch-label + table tbody{display:block}
  .colswitch:checked + .colswitch-label + table tr:first-child{display:none}
  .colswitch:checked + .colswitch-label + table tr{display:block; background:#fff;
    border:1px solid var(--line); border-left:4px solid var(--red);
    margin:0 0 .6rem; padding:.15rem .7rem}
  .colswitch:checked + .colswitch-label + table td{display:flex; gap:1rem;
    align-items:baseline; justify-content:space-between; text-align:left;
    padding:.32rem 0; border-bottom:1px dotted var(--line)}
  .colswitch:checked + .colswitch-label + table tr td:last-child{border-bottom:0}
  .colswitch:checked + .colswitch-label + table td::before{
    content:attr(data-label); flex:0 0 auto; color:var(--steel);
    font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; font-variant-numeric:normal}
  .colswitch:checked + .colswitch-label + table tr:hover td{background:none}
  .colswitch:checked + .colswitch-label + table tr:hover{background:#FCF6F0}
}

/* --- Statistik-Blatt --------------------------------------------------
   Eigener Abschnitt, Praefix .blatt- . Das Blatt ist ein Dokument, kein
   Screen: es benutzt die Variablen, Schriften und Muster von oben weiter
   (Anton fuer Display, tabellarische Ziffern in Zahlenspalten), legt aber
   kein zweites Designsystem an. Am Ende zaehlt der Ausdruck — deshalb
   steht der @media-print-Block direkt darunter und nicht irgendwo sonst. */
.blatt-body{background:var(--paper)}
.blatt-bande{height:10px; background:var(--red); border-bottom:3px solid var(--ink)}
.blatt-sheet{max-width:60rem; margin:0 auto; padding:1.2rem 1.2rem 4rem}

.blatt-kopf{border-bottom:3px solid var(--ink); padding-bottom:.8rem;
  margin-bottom:1.4rem}
.blatt-marke-zeile{display:flex; align-items:baseline; gap:.8rem;
  flex-wrap:wrap; margin-bottom:.5rem}
.blatt-wortmarke{font-family:Anton,sans-serif; font-size:1.35rem;
  letter-spacing:.04em; color:var(--red); text-transform:uppercase}
.blatt-wortmarke span{color:var(--ink)}
.blatt-logo{height:1.6rem; width:auto}
.blatt-kicker{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--steel); font-weight:700; margin-left:auto}
.blatt-serie{margin:0}
.blatt-kopf h1{margin:.1rem 0 .35rem}
.blatt-meta{margin:0 0 .5rem; color:var(--steel); font-size:.92rem;
  font-weight:500}
.blatt-stand{margin:0; font-size:.8rem; color:var(--steel);
  border-left:3px solid var(--red); padding-left:.6rem; line-height:1.4}
.blatt-stand b{color:var(--ink)}
.blatt-tools{margin:.7rem 0 0; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.05em; font-weight:700}
.blatt-tools a{color:var(--red)}

/* Inhaltsverzeichnis: die Card auf einen Blick, ein Sprung je Match.
   Steht auch im Ausdruck — auf Papier springt es zwar nicht, ordnet aber. */
.blatt-toc{border:1px solid var(--line); border-left:5px solid var(--ink);
  background:#fff; padding:.55rem .8rem; margin:0 0 1.1rem}
.blatt-toc-kopf{display:block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--steel); font-weight:700; margin-bottom:.3rem}
.blatt-toc ol{list-style:none; margin:0; padding:0}
.blatt-toc li{border-top:1px solid var(--line)}
.blatt-toc li:first-child{border-top:0}
.blatt-toc a{display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
  padding:.2rem 0; font-size:.9rem}
.blatt-toc a:hover .blatt-toc-namen{color:var(--red)}
.blatt-toc-pos{font-family:Anton,sans-serif; color:var(--red); min-width:1.2rem;
  font-variant-numeric:tabular-nums}
.blatt-toc-namen{font-weight:500}
.blatt-toc-tag{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--line); color:var(--steel); padding:.02rem .35rem;
  white-space:nowrap}
.blatt-toc-tag.me{background:var(--ink); border-color:var(--ink); color:#fff}

/* Matchblock: weisse Karte auf Papier, roter Balken links */
.blatt-match{background:#fff; border:1px solid var(--line);
  border-left:5px solid var(--red); padding:.8rem 1rem 1rem;
  margin:0 0 1.1rem}
.blatt-kopfzeile{display:flex; align-items:baseline; gap:.7rem;
  flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:.35rem}
.blatt-pos{font-family:Anton,sans-serif; font-size:2.1rem; line-height:.9;
  color:var(--red)}
.blatt-typ{font-family:Anton,sans-serif; letter-spacing:.04em;
  text-transform:uppercase; font-size:.95rem}
.blatt-rtitle{margin-left:auto; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--steel)}
.blatt-band-me{background:var(--ink); border-left-color:var(--red)}
.blatt-band-me b{color:#fff; text-transform:uppercase; letter-spacing:.1em;
  font-size:.8rem}
/* Das Tale-of-the-tape-Raster steht oben unter .match — der Matchblock
   des Blatts heisst .blatt-match und muss es sich selbst holen. */
.blatt-match .tape{display:grid; grid-template-columns:1fr auto 1fr;
  gap:.8rem; align-items:center; margin-top:.6rem}
.blatt-match .side .p{display:block}
.blatt-extra{margin-top:.4rem}
.blatt-extra.win .p{color:var(--red)}

.blatt-h{font-size:.82rem; margin:1rem 0 .35rem; letter-spacing:.08em;
  border-bottom:1px solid var(--line); padding-bottom:.15rem}
table.blatt-stat, table.blatt-duelle{font-size:.85rem}
table.blatt-stat td, table.blatt-duelle td{padding:.3rem .5rem}
table.blatt-stat th, table.blatt-duelle th{padding:.35rem .5rem}
/* Bande je Grundmenge statt einer neuen Tabelle mit neuer Kopfzeile. */
table.blatt-stat tbody{border-top:2px solid var(--ink)}
tr.blatt-scope td{background:var(--paper); color:var(--red);
  font-family:Anton,sans-serif; letter-spacing:.05em; text-transform:uppercase;
  font-size:.72rem; padding:.25rem .5rem; border-bottom:1px solid var(--line)}
tr.blatt-scope:hover td{background:var(--paper)}
.blatt-cov{color:var(--steel); font-size:.78em; margin-left:.25em;
  font-variant-numeric:normal}
.blatt-sieger{color:var(--red)}

/* Guertel-Box: die zwei Quellen haben verschiedene Abdeckungen und
   stehen deshalb in getrennten Feldern mit eigener Kennzeichnung. */
.blatt-guertel{display:grid; grid-template-columns:auto 1fr; gap:.8rem}
.blatt-quelle{border:1px solid var(--line); background:var(--paper);
  padding:.5rem .7rem}
.blatt-quellkopf{display:block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--steel); font-weight:700;
  margin-bottom:.35rem}
.blatt-zahlen{display:flex; flex-wrap:wrap; gap:.6rem 1.3rem}
.blatt-zahlen b{display:block; font-family:Anton,sans-serif; font-size:1.35rem;
  line-height:1; font-variant-numeric:tabular-nums}
.blatt-zahlen span{font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--steel)}

/* Notizen sind zum Vorlesen da, nicht zum Nachschlagen — Fliesstext mit
   rotem Aufzaehlungszeichen statt einer weiteren Tabelle. */
.blatt-notizen{list-style:none; margin:.3rem 0 0; padding:0; font-size:.95rem}
.blatt-notizen li{position:relative; padding-left:1rem; margin:.25rem 0}
.blatt-notizen li::before{content:"■"; color:var(--red); position:absolute;
  left:0; top:-.05em; font-size:.7em}

.blatt-match{scroll-margin-top:.8rem}
.blatt-match:target{outline:2px solid var(--red); outline-offset:3px}

.blatt-seitenfuss{display:none}
.blatt-cfg .chk{align-items:flex-start; margin:.3rem 0; gap:.5rem;
  max-width:52rem}
.blatt-cfg .chk input{margin-top:.3rem}

@media (max-width:40rem){
  .blatt-match .tape{grid-template-columns:1fr}
  .blatt-match .side.right{text-align:left; align-items:flex-start}
  .blatt-match .vs{display:none}
  .blatt-guertel{grid-template-columns:1fr}
  table.blatt-stat, table.blatt-duelle{display:block; overflow-x:auto}
}

@media print{
  /* Ziel: eine Match-Sektion passt auf eine Seite. */
  @page{margin:14mm 12mm 18mm}
  html{font-size:10pt}
  body.blatt-body{background:#fff}
  .blatt-bande{height:5px}
  .blatt-sheet{max-width:none; margin:0; padding:0}
  .blatt-tools{display:none}
  .blatt-hinweis{display:none}
  .blatt-match{background:#fff; border-left-width:4px; margin-bottom:.7rem;
    padding:.5rem .6rem .6rem; page-break-inside:avoid; break-inside:avoid}
  .blatt-kopf{page-break-after:avoid; break-after:avoid}
  .blatt-toc{page-break-inside:avoid; break-inside:avoid; margin-bottom:.7rem}
  .blatt-toc a{padding:.08rem 0}
  h1,h2,.blatt-h,.blatt-kopfzeile{page-break-after:avoid; break-after:avoid}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
  table.blatt-stat, table.blatt-duelle{font-size:8.5pt}
  table.blatt-stat td, table.blatt-duelle td{padding:.15rem .3rem}
  table.blatt-stat th, table.blatt-duelle th{padding:.15rem .3rem}
  tr:hover td{background:none}
  a{color:#000; text-decoration:none}
  a[href]::after{content:none}
  .kpi,.match,.blatt-match{transition:none}
  /* Wiederholt sich in den meisten Browsern auf jeder Druckseite. */
  .blatt-seitenfuss{display:flex; position:fixed; bottom:0; left:0; right:0;
    justify-content:space-between; gap:1rem; font-size:7.5pt;
    color:var(--steel); border-top:1px solid var(--line); padding-top:2mm}
}