:root{
  --void:#08070C;
  --panel:#0D0B13;
  --panel-2:#12101B;
  --rim:#241F33;
  --rim-lit:#3B3157;
  /* Aus dem Orga-Logo abgetastet: Magenta (#FE00FC) am Gipfel bis
     Violett (#7105B4) im Schweif -- ersetzt den vorherigen blaustichigen
     Blauviolett-Ton durchgehend im ganzen Farbsystem. */
  --violet:#C13FE0;
  --violet-bright:#F23FFA;
  --violet-deep:#7B1FB0;
  --ion:#4FD8B0;
  --flare:#FF6188;
  /* Eigener Rotton fuer direkte Gegenueberstellungen (Kills-/Gold-Balken
     "wir vs. Gegner") -- --flare liegt farblich zu nah an --violet-bright,
     seit die Logo-Farben eingezogen sind (beides Richtung Pink/Magenta).
     Echtes Rot statt Pink, damit beide Seiten eines Balkens auf Anhieb
     unterscheidbar bleiben. */
  --rot:#F23B2E;
  --text:#EFEAF7;
  --muted:#ADA5C2;
  --faint:#847CA3;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --display:'Space Grotesk','Segoe UI Semibold','Helvetica Neue',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-variant-numeric:tabular-nums}
body{background:var(--void);color:var(--text);font-family:var(--sans);font-size:16.5px;
  -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:3px}

/* Chrome faerbt automatisch ausgefuellte Felder (und Felder mit <datalist>)
   hart weiss ein und ueberschreibt dabei jede eigene Hintergrundfarbe. Ein
   riesiger inset-Schatten ist der einzige verlaessliche Weg, das zu
   uebermalen -- "background" allein greift bei :-webkit-autofill nicht.
   Global gesetzt, damit es jedes Eingabefeld der Seite betrifft (Notiz,
   Suche, Kaderformular, Champion-Suche) und nicht nur das zuletzt gebaute. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 100px var(--panel-2) inset!important;
  caret-color:var(--text)}
/* Chrome blendet bei list-Feldern zusaetzlich einen hellen Dropdown-Pfeil
   ein, der nicht ins dunkle Design passt. */
input[list]::-webkit-calendar-picker-indicator{display:none!important}
input[list]::-webkit-list-button{display:none!important}

.ph{display:inline-block;background:#302A44;border-radius:3px;vertical-align:middle}
.ph.name{height:11px;width:82px}
.ph.name.s{width:58px;height:10px}
.ph.name.l{width:112px;height:13px}
.icon{background:var(--panel-2);border:1px solid var(--rim);border-radius:5px;flex:none;
  display:inline-block}

/* ---------- Kopfleiste ---------- */
.topbar{background:var(--panel);border-bottom:1px solid var(--rim);
  position:sticky;top:0;z-index:20}
.topbar .in{max-width:1380px;margin:0 auto;padding:0 20px;height:54px;
  display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.logo-mark{width:26px;height:26px;object-fit:contain;display:block}
.logo b{font-family:var(--display);font-size:14.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.tnav{display:flex;gap:2px;height:100%}
.tnav a{display:flex;align-items:center;padding:0 14px;color:var(--muted);
  text-decoration:none;font-size:14.5px;position:relative;transition:.15s}
.tnav a:hover{color:var(--text)}
.tnav a[aria-current]{color:var(--text)}
.tnav a[aria-current]::after{content:'';position:absolute;left:14px;right:14px;bottom:0;
  height:2px;background:var(--violet)}

/* -- "Games"-Dropdown (Scrims / Prime League) -- */
.tdrop{position:relative;display:flex;align-items:center}
.tdrop summary{display:flex;align-items:center;gap:6px;height:100%;padding:0 14px;
  color:var(--muted);cursor:pointer;font-size:14.5px;list-style:none;position:relative;
  transition:.15s;user-select:none}
.tdrop summary::-webkit-details-marker{display:none}
.tdrop summary::after{content:'⌄';font-size:11px;color:var(--faint);transition:transform .15s}
.tdrop[open] summary::after{transform:rotate(180deg)}
.tdrop summary:hover{color:var(--text)}
.tdrop.hat-aktiven summary{color:var(--text)}
.tdrop.hat-aktiven summary::before{content:'';position:absolute;left:14px;right:14px;bottom:0;
  height:2px;background:var(--violet)}
.tdrop-menu{position:absolute;top:100%;left:0;margin-top:1px;min-width:170px;
  background:var(--panel);border:1px solid var(--rim);border-radius:9px;padding:6px;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.6);z-index:30;display:flex;flex-direction:column;gap:1px}
.tdrop-menu a{padding:9px 12px;border-radius:6px;color:var(--muted);text-decoration:none;
  font-size:14px;transition:.15s}
.tdrop-menu a:hover{background:var(--panel-2);color:var(--text)}
.tdrop-menu a[aria-current]{color:var(--violet-bright);background:rgba(193,63,224,.1)}
.search{position:relative;margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--rim);border-radius:7px;padding:7px 11px;
  min-width:210px}
.search input{background:none;border:none;color:var(--text);font-family:var(--sans);
  font-size:14px;width:100%;outline:none}
.search input::placeholder{color:var(--faint)}

/* ---------- Teams (nur Admin) ---------- */
.admin-teamtabs{display:flex;flex-wrap:wrap;gap:8px}
.admin-teampill{display:flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--rim-lit);border-radius:8px;padding:8px 10px 8px 13px;
  font-size:13px}
.admin-teampill.aktiv{border-color:var(--violet);background:rgba(193,63,224,.14)}
.admin-teampill .atp-name{color:var(--text);font-weight:600}
.admin-teampill .atp-sub{color:var(--faint);font-size:11px;margin-left:6px}
.admin-teampill button{background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:var(--sans);font-size:12px;padding:3px 7px;border-radius:5px;transition:.15s}
.admin-teampill button:hover{color:var(--text);background:var(--panel)}
.admin-teampill .atp-del{color:var(--flare)}
.admin-teampill .atp-del:hover{background:rgba(255,90,90,.14)}

/* ---------- Admin-Banner ---------- */
.admin-banner{display:flex;align-items:center;justify-content:center;gap:14px;
  background:rgba(193,63,224,.16);border-bottom:1px solid var(--violet);
  padding:9px 20px;font-size:13px;color:var(--text)}
/* Gleicher Bug wie frueher bei .login-mask (siehe CLAUDE.md): [hidden] und
   ".admin-banner{display:flex}" haben dieselbe Spezifitaet, die spaeter im
   Stylesheet stehende Klasse gewinnt -- ohne diese Zeile war das Banner fuer
   JEDEN sichtbar, das hidden-Attribut wurde vom eigenen display:flex
   ueberstimmt. */
.admin-banner[hidden]{display:none}
.admin-banner b{color:var(--violet-bright)}
.admin-banner button{background:var(--violet);border:none;color:#fff;border-radius:6px;
  padding:5px 12px;font-family:var(--sans);font-size:12.5px;cursor:pointer;transition:.15s}
.admin-banner button:hover{filter:brightness(1.15)}

/* op.gg-Multilink-Leiste zwischen Navigation und Team-Kopf */
.opggleiste{max-width:1380px;margin:0 auto;padding:8px 20px;display:flex;justify-content:flex-end}
.opggleiste .btn{width:auto;padding:7px 16px;font-size:12.5px;white-space:nowrap}

/* ---------- Profilkopf ---------- */
.hero{background:linear-gradient(180deg,#100D1A,var(--void));border-bottom:1px solid var(--rim)}
.hero .in{max-width:1380px;margin:0 auto;padding:26px 20px 22px;
  display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.crest{width:88px;height:88px;border-radius:10px;border:1px solid var(--rim-lit);
  background:radial-gradient(circle at 40% 32%, rgba(193,63,224,.24), var(--panel-2));
  display:grid;place-items:center;flex:none;position:relative}
.crest-mark{width:56px;height:56px;object-fit:contain}
.crest .lvl{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:12px;background:var(--panel);
  border:1px solid var(--rim-lit);border-radius:99px;padding:2px 9px;color:var(--muted)}
.who .tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);margin-bottom:7px}
.who h1{font-family:var(--display);font-size:27px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:11px}
.who h1 em{font-style:normal;font-size:16.5px;font-weight:400;color:var(--faint);font-family:var(--mono)}
.who .meta{color:var(--muted);margin-top:8px;font-size:14px;display:flex;gap:9px;align-items:center}
.who .meta i{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.hero .act{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* [hidden] verliert sonst gegen die Klassen-Regel oben (gleiche/hoehere
   Spezifitaet) -- auf Profilseiten wird .act per JS ausgeblendet. */
.hero .act[hidden]{display:none}
.btn{font-family:var(--sans);font-size:14px;font-weight:500;
  background:var(--violet);color:#0A0710;border:none;border-radius:7px;
  padding:9px 18px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--violet-bright)}
.stamp{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* ---------- Raster ---------- */
.page{max-width:1380px;margin:0 auto;padding:18px 20px 70px;
  display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
/* Grid-Kinder sind per Spezifikation standardmaessig min-width:auto, nicht 0
   -- ein Kind mit langem, nicht umbrechendem Inhalt (z.B. ein Button-Text
   wie "Zurueck zu Pro Builds") zwingt seine Spalte dann auf mindestens
   diese Breite, auch wenn der Viewport schmaler ist. Ergebnis: die GANZE
   Seite ragt seitlich raus, nicht nur der Button -- auf dem Handy sichtbar
   als abgeschnittene Werte am rechten Rand (z.B. bei den Pro-Builds-
   Kennzahlen). min-width:0 erlaubt Grid-Kindern wieder normal zu schrumpfen
   und ihren Inhalt umzubrechen, wie es jedes andere Blockelement auch tut. */
.page > *{min-width:0}
.card{background:var(--panel);border:1px solid var(--rim);border-radius:9px;overflow:hidden}
.card + .card{margin-top:14px}
.card > h2{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:15px 17px;border-bottom:1px solid var(--rim);
  display:flex;align-items:center;gap:9px}
.card > h2 .n{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--violet);
  letter-spacing:.04em;text-transform:none}
.body{padding:16px 17px}

/* ---------- Seitenspalte ---------- */
.blocks{display:flex;flex-direction:column;gap:1px;background:var(--rim)}
.block{background:var(--panel);padding:11px 15px;display:flex;align-items:center;gap:10px;
  cursor:pointer;border:none;width:100%;text-align:left;color:inherit;font-family:var(--sans);
  font-size:14px;transition:.15s}
.block:hover{background:var(--panel-2)}
.block[aria-pressed="true"]{background:rgba(193,63,224,.1)}
.block[aria-pressed="true"] .bd{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.bd{width:5px;height:5px;border-radius:50%;background:var(--rim-lit);flex:none}
.block .g{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--faint)}

.bilanz{display:flex;align-items:center;gap:16px}
.donut{width:94px;height:94px;flex:none;position:relative}
.donut svg{transform:rotate(-90deg)}
.donut .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut .mid b{font-family:var(--display);font-size:19px;font-weight:700;display:block;line-height:1}
.donut .mid span{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.08em}
.bstats{flex:1;min-width:0;font-size:14px;color:var(--muted);line-height:1.85}
.bstats b{color:var(--text);font-family:var(--mono);font-weight:500}
.bstats .kda{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ion);
  display:block;margin-bottom:2px;line-height:1.1}

.crow{display:flex;align-items:center;gap:12px;padding:12px 0}
.crow + .crow{border-top:1px solid var(--rim)}
.crow .ic{width:29px;height:29px;border-radius:50%}
.crow .nm{flex:1;min-width:0}
.crow .nm .sub{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:5px}
.crow .wr{text-align:right;font-family:var(--mono);font-size:13px}
.crow .wr b{display:block;font-weight:500;color:var(--text)}
.crow .wr span{color:var(--faint);font-size:12px}
.wbar{height:2px;background:var(--rim);border-radius:2px;margin-top:6px;overflow:hidden;width:100%}
.wbar i{display:block;height:100%;background:var(--violet)}

/* ---------- Filter ---------- */
.filters{display:flex;align-items:center;gap:1px;background:var(--rim);
  border:1px solid var(--rim);border-radius:9px;overflow:hidden;margin-bottom:14px}
.filters button{flex:none;background:var(--panel);border:none;color:var(--muted);
  font-family:var(--sans);font-size:14px;padding:11px 17px;cursor:pointer;transition:.15s}
.filters button:hover{color:var(--text);background:var(--panel-2)}
.filters button[aria-pressed="true"]{color:var(--violet-bright);background:rgba(193,63,224,.1)}
.filters .sp{flex:1;background:var(--panel)}
.filters select{background:var(--panel);border:none;color:var(--muted);font-family:var(--mono);
  font-size:13px;padding:11px 15px;cursor:pointer;outline:none}

/* ---------- Zusammenfassung ---------- */
.sum{display:flex;align-items:center;gap:22px;padding:16px 18px;flex-wrap:wrap}
.sum .sep{width:1px;align-self:stretch;background:var(--rim)}
.sum .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.chips{display:flex;gap:8px}
.chip{display:flex;align-items:center;gap:7px}
.chip .ic{width:26px;height:26px;border-radius:50%}
.chip .v{font-family:var(--mono);font-size:12.5px;color:var(--muted);line-height:1.5}
.chip .v b{display:block;color:var(--text);font-weight:500}

/* ---------- Spielzeilen ---------- */
/* Eine Karte pro SPIEL, nicht pro Spieler -- bei mehreren eigenen
   Spielern im selben Match (Kader + Subs) wuerde sonst dieselbe Partie
   mehrfach erscheinen. Zeigt immer alle zehn Spieler, beide Seiten,
   angelehnt an die aufgeklappte Match-Ansicht von OP.GG. */
.match{border-radius:10px;border:1px solid var(--rim);background:var(--panel);
  margin-bottom:9px;position:relative;overflow:hidden;padding:17px 18px}
.match::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.match.w{background:linear-gradient(90deg,rgba(193,63,224,.09),var(--panel) 42%)}
.match.w::before{background:var(--violet)}
.match.l{background:linear-gradient(90deg,rgba(255,97,136,.07),var(--panel) 42%)}
.match.l::before{background:var(--flare)}

.mi{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;
  padding-left:8px;margin-bottom:14px}
.mi .res{font-size:15px;font-weight:600;letter-spacing:.01em}
.match.w .mi .res{color:var(--violet-bright)}
.match.l .mi .res{color:var(--flare)}
.mi .typ{font-size:13px;color:var(--muted)}
/* .blocklabel, NICHT .block: die Sidebar-Buttons zur Scrim-Block-Auswahl
   heissen .block und setzen width:100% -- das hat die Beschriftung auf der
   Match-Karte ueber die volle Kartenbreite gezogen und die Kopfzeile
   umbrechen lassen. */
.mi .ago,.mi .len,.mi .blocklabel{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* -- Kartenkoerper: Notiz links, Team-Summe rechts (bleibt zentriert
   in ihrem eigenen Bereich) -- */
.karteninhalt{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.karteninhalt .notiz{background:var(--panel-2);border:1px solid var(--rim);border-radius:7px;
  padding:9px 11px;color:var(--text);font-family:var(--sans);font-size:12.5px;outline:none;
  width:100%}
.karteninhalt .notiz::placeholder{color:var(--faint)}
.karteninhalt .notiz:focus{border-color:var(--violet)}
@media(max-width:620px){.karteninhalt{grid-template-columns:1fr}}

/* -- eingeklappt: Team-Summe -- */
.tsum{max-width:360px;margin:0 auto}
.tsum-row{display:grid;grid-template-columns:38px 1fr 38px;gap:10px;align-items:center;
  font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.tsum-row .tv{text-align:right}
.tsum-row .tv.r{text-align:left}
.tsum-row .tbar{height:6px;border-radius:3px;overflow:hidden;display:flex;background:var(--rim)}
.tsum-row .tbar i{display:block;height:100%}
/* Erst zwei Violett-Toene (kaum unterscheidbar), dann Violett/Flare (auch
   zu nah beieinander, seit --flare und --violet-bright beide Richtung Pink
   gehen). Jetzt --rot: echtes Rot statt Pink, eindeutig "wir" (Violett)
   vs. "Gegner" (Rot) auf einen Blick. */
.tsum-row .tbar .eig{background:var(--violet-bright)}
.tsum-row .tbar .geg{background:var(--rot)}
.tsum-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:center;margin:4px 0 10px}
.tobj{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:4px}
.tobj b{color:var(--muted);font-weight:500}
.tobj i{color:var(--rim-lit);font-style:normal}

/* -- MVP-Badge auf der eingeklappten Karte -- */
/* .nm hatte white-space:nowrap + text-overflow:ellipsis -- bei laengeren
   Anzeigenamen ("Wanna be Caliste") blieb auf der 360px breiten Karte nur
   die Haelfte sichtbar, komplett zu sehen war er erst in der aufgeklappten
   Spielerliste. Jetzt darf die Pille auf zwei Zeilen umbrechen statt den
   Namen abzuschneiden. */
.mvp{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  row-gap:2px;column-gap:8px;margin:0 auto 14px;
  padding:7px 14px;background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:16px;width:fit-content;max-width:100%;position:relative}
.mvp-tag{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--violet-bright);flex:none}
.mvp .ic{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none}
.mvp .nm{font-size:13px;color:var(--text);font-weight:500}
.mvp .stat{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}
/* 30x30 statt blossem Textzeichen: das alte title-Tooltip haing an einem
   ~12px grossen Glyph -- auf dem Handy praktisch nicht zu treffen und per
   Touch ohnehin nie ausgeloest. */
.mvp-info{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:50%;color:var(--faint);font-size:14px;
  cursor:pointer;transition:.15s;margin:-4px -6px -4px 0}
.mvp-info:hover{color:var(--violet-bright);background:rgba(193,63,224,.12)}
.mvp.pop-offen .mvp-info{color:var(--violet-bright);background:rgba(193,63,224,.18)}

/* position:fixed statt absolute -- .match hat overflow:hidden (fuer die
   abgerundeten Ecken/den farbigen Rand), ein absolut positioniertes
   Popover wurde dadurch am Kartenrand abgeschnitten. Position wird beim
   Oeffnen per JS gesetzt (mvpPopoverPositionieren), top/left hier sind nur
   Platzhalter, bis das passiert. */
.mvp-pop{display:none;position:fixed;top:0;left:0;z-index:40;
  width:290px;max-width:min(290px,calc(100vw - 32px));text-align:left;
  background:var(--panel);border:1px solid var(--rim-lit);border-radius:10px;
  padding:14px 15px;box-shadow:0 20px 44px -14px rgba(0,0,0,.75)}
.mvp.pop-offen .mvp-pop{display:block}
.mvp-pop-titel{font-family:var(--display);font-size:12px;font-weight:600;
  color:var(--text);margin-bottom:7px}
.mvp-pop p{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:11px}
.mvp-pop p em{color:var(--violet-bright);font-style:normal}
.mvp-pop-werte{display:flex;flex-direction:column;gap:1px;
  border-top:1px solid var(--rim);padding-top:9px}
.mvp-pop-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12px;color:var(--muted);padding:3px 0}
.mvp-pop-zeile b{font-family:var(--mono);color:var(--text);font-weight:500}
.mvp-pop-score{margin-top:10px;padding-top:9px;border-top:1px solid var(--rim);
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--muted)}
.mvp-pop-score b{font-family:var(--mono);color:var(--violet-bright);font-weight:600}

@media(max-width:480px){
  .mvp .stat{display:none}
}

.more{background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px;
  padding:8px;margin:10px auto 0;transition:.15s;display:flex;align-items:center;gap:6px;
  font-family:var(--sans)}
.more:hover{color:var(--violet)}
.more .arrow{transition:.15s;display:inline-block;font-size:14px}
.more.open .arrow{transform:rotate(180deg)}

.fdetail{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--rim)}
.match.expanded .fdetail{display:block}

.fteams{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fside .side-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
/* CS-Spalte breiter (58px): seit dort "231 CS" UND "6.87/min" untereinander
   stehen, reichten 46px nicht mehr -- der laengere Wert lief in die
   Item-Spalte hinein. Items bekommen exakt ihre Rasterbreite (3x15px + 2x2px
   Abstand = 49px) statt "1fr"-Spalten, die sich darueber hinaus dehnen. */
.prow{display:grid;grid-template-columns:24px 1fr 52px 58px 40px 49px 40px;gap:9px;
  align-items:center;padding:6px 0;font-size:13px}
.prow+.prow{border-top:1px solid var(--rim)}
.prow .ic{width:22px;height:22px;border-radius:50%;overflow:hidden;
  background:var(--panel-2);display:inline-block;flex:none}
.prow.me{color:var(--violet-bright)}
.prow .nm{min-width:0}
.prow .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.prow .nm .sub{color:var(--faint);font-size:10.5px;margin-top:2px;line-height:1.5}
.prow .kda{font-family:var(--mono);color:var(--muted);text-align:right;font-size:12.5px}
.prow .cs{font-family:var(--mono);color:var(--faint);text-align:right;font-size:11.5px;line-height:1.5}
/* Keystone gross (20px, rund -- die meisten Keystone-Icons sind auf
   dunklem Kreisgrund gezeichnet), sekundaerer Baum klein daneben. */
.prow .frunes{display:flex;align-items:center;gap:2px;justify-content:center}
.prow .frunes .keystone{width:20px;height:20px;border-radius:50%;background:var(--panel-2)}
.prow .frunes .baum{width:13px;height:13px;opacity:.75}
.prow .fitems{display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(2,15px);
  gap:2px;justify-content:end}
.prow .fitems .icon{width:15px;height:15px}

/* -- Score-Fuellkreis, nur fuer die eigene Seite (Gegner haben keinen
   rollentypischen Schnitt aus unserer Team-Historie, siehe Backend) -- */
.scorering{flex:none;justify-self:end}
.scorering text{font-family:var(--mono);font-weight:600}
.scorering circle:last-of-type{transition:stroke-dashoffset .5s ease}

/* Patch, auf dem das Spiel tatsaechlich lief -- bei .rofl-Importen aus der
   Datei selbst gelesen, bei Live-Importen der zum Zeitpunkt aktuelle. */
.patchpill{font-family:var(--mono);font-size:11px;color:var(--faint);
  background:var(--panel-2);border:1px solid var(--rim);border-radius:99px;
  padding:3px 10px;flex:none}

/* LP-Aenderung auf der Ranked-Match-Karte -- nur vorhanden, wenn eindeutig
   einem einzelnen Spiel zuordenbar (siehe own_ranked.py), sonst faellt die
   Pille auf der Karte einfach weg statt eine geratene Zahl zu zeigen. */
.lppill{font-family:var(--mono);font-size:11px;font-weight:700;border-radius:99px;
  padding:3px 10px;flex:none}
.lppill.gut{color:var(--ion);background:rgba(79,216,176,.12)}
.lppill.schlecht{color:var(--flare);background:rgba(255,97,136,.12)}

/* Eigener MVP-Score des angeschauten Spielers auf der Ranked-Match-Karte
   (0-100, relativ zur Rolle -- siehe _ranked_mvp_score im Backend). */
.scorepill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
  font-size:11px;font-weight:700;border-radius:99px;padding:3px 10px;flex:none;
  color:var(--violet-bright);background:rgba(155,109,255,.12)}
.scorepill.mvp{color:var(--text);background:rgba(193,63,224,.16)}
.scorepill .lbl{font-weight:500;color:var(--faint)}
.mvp-krone{font-size:11px;line-height:1;margin-left:4px;vertical-align:middle}
.ico{width:13px;height:13px;vertical-align:-2px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Kleine Icon-Badges (Playmaker, MVP, Serie) -- ohne Text-Label, Erklaerung per Tooltip */
.pm{display:inline-flex;align-items:center;gap:3px;margin-left:7px;color:var(--muted);
  font-family:var(--mono);font-size:11px;font-weight:600;vertical-align:middle}
.pm b{font-weight:600}
.pm-mvp{color:var(--violet-bright)}
.pm-penta{color:#D6B25E}
.pm-quadra,.pm-triple,.pm-steal{color:var(--violet-bright)}
.pm-gegner,.pm-serie{color:var(--faint)}

/* Grosse Ankuendigung ueber der aufgeklappten 10-Spieler-Ansicht, wenn
   jemand eine Pentakill geschafft hat -- siehe pentakillBanner(). */
.pentakill-banner{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:.04em;text-align:center;color:#FFD700;
  background:linear-gradient(90deg,rgba(255,215,0,.16),rgba(255,97,0,.12));
  border:1px solid rgba(255,215,0,.35);border-radius:8px;
  padding:9px 12px;margin-bottom:12px}
.pentakill-banner span{display:block;font-family:var(--sans);font-weight:500;
  font-size:12px;letter-spacing:0;color:var(--muted);margin-top:2px}

.katpill{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--panel-2);border:1px solid var(--rim-lit);color:var(--muted);border-radius:99px;
  padding:3px 10px;cursor:pointer;transition:.15s;margin-left:auto;flex:none}
.katpill:hover{border-color:var(--violet);color:var(--text)}
.katpill.pl{color:var(--violet-bright);border-color:var(--violet)}
.delpill{font-size:11px;background:var(--panel-2);border:1px solid var(--rim-lit);color:var(--faint);
  border-radius:99px;width:22px;height:22px;line-height:1;cursor:pointer;transition:.15s;flex:none}
.delpill:hover{border-color:var(--rot);color:var(--rot)}

/* -- Rollenwahl in der Bilanz-Karte -- */
.rwahl{display:flex;gap:1px;background:var(--rim);border-top:1px solid var(--rim);
  border-bottom:1px solid var(--rim)}
.rwahl button{flex:1;background:var(--panel);border:none;color:var(--muted);
  font-family:var(--mono);font-size:11px;padding:9px 4px;cursor:pointer;transition:.15s}
.rwahl button:hover{color:var(--text)}
.rwahl button[aria-pressed="true"]{color:var(--violet-bright);background:rgba(193,63,224,.12)}

/* -- Sub-Tabs (z.B. Champions: Uebersicht/Matchups) -- */
.subnav{display:flex;gap:1px;background:var(--rim);border:1px solid var(--rim);border-radius:9px;
  overflow:hidden;margin-bottom:14px;width:fit-content}
.subnav button{background:var(--panel);border:none;color:var(--muted);font-family:var(--sans);
  font-size:13.5px;padding:9px 16px;cursor:pointer;transition:.15s}
.subnav button:hover{color:var(--text);background:var(--panel-2)}
.subnav button[aria-pressed="true"]{color:var(--violet-bright);background:rgba(193,63,224,.1)}
.lade{color:var(--faint);font-size:13px;padding:6px 0}
@media(max-width:820px){.fteams{grid-template-columns:1fr;gap:4px}
  .fside+.fside{margin-top:12px;padding-top:12px;border-top:1px solid var(--rim)}
  /* 58px wie in der Hauptregel -- die CS-Spalte ist seit dem CS/min-Zusatz
     zweizeilig, mit den alten 42px lief der Text ueber den Spaltenrand. */
  .prow{grid-template-columns:22px 1fr 48px 58px 40px 40px}
  .prow .fitems{display:none}}

.loadmore{width:100%;background:var(--panel);border:1px solid var(--rim);border-radius:9px;
  color:var(--muted);font-family:var(--sans);font-size:14px;padding:13px;cursor:pointer;
  transition:.15s;margin-top:7px}
.loadmore:hover{color:var(--text);border-color:var(--rim-lit)}

.note{border:1px solid var(--rim);border-left:2px solid var(--violet-deep);
  border-radius:0 9px 9px 0;background:var(--panel-2);padding:14px 17px;
  font-size:14px;color:var(--muted);line-height:1.65;margin-top:14px}
.note b{color:var(--text);font-weight:500}

/* ---------- Weitere Ansichten (Spieler / Champions / Einstellungen) ---------- */
.page.single{grid-template-columns:1fr}

/* ---------- Spielerprofil ---------- */
.crow.klickbar,.spielerzeile{cursor:pointer;transition:.12s}
.crow.klickbar:hover{background:var(--panel-2);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:7px}
.spielerzeile:hover{background:var(--panel-2)}

.kontoavatar{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;
  flex:none;line-height:0;transition:.15s}
.kontoavatar:hover{outline:2px solid var(--violet);outline-offset:2px}
.kontoavatar:disabled{cursor:default}
.kontoavatar:disabled:hover{outline:none}

/* Zahnrad statt eigenem Nav-Reiter -- Einstellungen ist Kontoverwaltung,
   gehoert deshalb direkt neben den Account, nicht in die Themen-Navigation
   (Uebersicht/Spieler/Champions/...). */
.kontozahnrad{background:none;border:none;padding:6px;cursor:pointer;border-radius:7px;
  color:var(--faint);flex:none;line-height:0;transition:.15s}
.kontozahnrad:hover{color:var(--text);background:var(--panel-2)}
.kontozahnrad[aria-current="page"]{color:var(--violet-bright);background:rgba(193,63,224,.12)}

.prkopf{display:flex;align-items:center;gap:16px;padding:17px}
.pravatar{flex:none;line-height:0}
.pravatar .ic{width:64px!important;height:64px!important;font-size:24px!important}
.prwer h2{font-family:var(--display)}
.prmeta{display:flex;gap:10px;align-items:center;margin-top:6px;font-size:13.5px;color:var(--muted)}
.prmeta span:first-child{background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:99px;padding:3px 10px;font-size:12px;color:var(--muted)}

/* margin-top:0 noetig: ".card + .card{margin-top:14px}" ist fuer die
   normale einspaltige Kartenliste gedacht (naechste Karte darunter) --
   der Selektor kennt aber kein Layout, nur "zwei .card nebeneinander im
   Markup", und griff faelschlich auch hier in der Zweispalten-Anordnung.
   Der zusaetzliche Rand an der zweiten Karte verhinderte, dass beide
   Karten im Grid gleich hoch werden (align-items:stretch strecken bis zur
   Randbox, nicht bis zur Content-Box). Der Abstand kommt schon von gap. */
.prcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prcards > .card{margin-top:0}
.prchamp{display:flex;align-items:center;gap:13px}
.prchamp b{font-family:var(--display);font-size:15px;color:var(--text);font-weight:600}
.prchamp-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.prchamp-stats{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:3px}
.prsieg{color:var(--ion);font-size:12px;font-family:var(--mono);margin-left:6px}
.prniederlage{color:var(--flare);font-size:12px;font-family:var(--mono);margin-left:6px}

.prfun{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.prfunkarte{display:flex;align-items:center;gap:12px;background:var(--panel-2);
  border:1px solid var(--rim);border-radius:9px;padding:12px 14px}
.prfunkarte b{font-family:var(--display);font-size:15px;color:var(--text);font-weight:600}
/* Zahlen-Badge statt Emoji -- passt zum sonst zurueckhaltenden, auf
   Typografie statt Icons setzenden Stil der Seite (siehe z.B. .crow .wr). */
.prfun-zahl{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--violet-bright);
  background:rgba(193,63,224,.12);border:1px solid var(--violet-deep);border-radius:9px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}
/* itemIcon() liefert ein blosses <img class="..."> ohne Groessen-Vorgabe --
   die Groesse kommt IMMER von einer CSS-Regel auf diese Klasse, nie von
   einem umschliessenden Wrapper (anders als bei champIcon()). Ohne das
   faellt das Bild auf 0x0 zurueck und zeigt nur das kaputte-Bild-Icon. */
.prfun-itemicon{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:none}

.prtrends{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.prtrend{background:var(--panel-2);border:1px solid var(--rim);border-radius:9px;padding:13px}
.prtrend-kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.prtrend-label{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--muted)}
.prtrend-schnitt{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.prchart-svg{width:100%;height:48px;display:block}
.prchart-linie{fill:none;stroke:var(--violet);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.prchart-flaeche{fill:rgba(193,63,224,.14);stroke:none}
.prchart-leer{color:var(--faint);font-size:12px;padding:14px 0;text-align:center}
.prtrend-badge{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11.5px;
  border-radius:99px;padding:3px 9px}
.prtrend-badge.auf{color:var(--ion);background:rgba(79,216,176,.12)}
.prtrend-badge.ab{color:var(--flare);background:rgba(255,97,136,.12)}
.prtrend-badge.neutral{color:var(--faint);background:var(--panel)}
/* Rohwerte neben dem Prozent-Badge -- macht sichtbar, WAS mit WAS
   verglichen wird ("+12%" allein sagt das nicht). */
.prtrend-werte{display:inline-block;margin-top:8px;margin-left:7px;
  font-family:var(--mono);font-size:11px;color:var(--faint)}

@media(max-width:620px){
  .prcards{grid-template-columns:1fr}
  .prkopf{padding:14px;gap:12px}
  .pravatar .ic{width:52px!important;height:52px!important}
}
.view[hidden]{display:none}
.dtable{width:100%;border-collapse:collapse}
.dtable th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:500;padding:11px 17px;
  border-bottom:1px solid var(--rim)}
.dtable th[data-num]{text-align:right}
.dtable td{padding:12px 17px;border-bottom:1px solid var(--rim);font-size:14px}
.dtable tbody tr:hover{background:var(--panel-2)}
.dtable tbody tr:last-child td{border-bottom:none}
.dtable .num{font-family:var(--mono);text-align:right;color:var(--muted)}
/* Bewusst KEIN display:flex auf der <td> selbst -- eine Table-Cell, die
   zur Flexbox wird, waehrend Nachbarzellen in derselben Zeile normale
   Zellen bleiben, berechnet ihre Hoehe in manchen Browsern minimal anders
   (Bruchteil-Pixel-Rundung), wodurch Icon+Text gegenueber der Zeile leicht
   nach unten wandern koennen -- passiert nicht in jedem Browser gleich,
   was die Ursache schwer greifbar machte. vertical-align:middle auf
   inline-block-Elementen ist der klassische, ueberall gleich rendernde Weg,
   Icon und Text in einer Tabellenzelle sauber zu zentrieren. */
.dtable .namecell .icon{vertical-align:middle;margin-right:10px}
.dtable .namecell > span:not(.icon){vertical-align:middle}

/* -- Champion-Tabelle: Zeile anklicken -> Runen-Winrates -- */
.champ-klickbar{cursor:pointer}
.champ-runenzeile td{padding:14px 17px;background:var(--panel-2)}
.runenliste{display:flex;flex-direction:column;gap:1px}
.runenzeile{display:grid;grid-template-columns:28px 18px 1fr 55px 60px 55px 55px 62px;
  gap:10px;align-items:center;padding:8px 6px;font-size:13px}
.runenzeile + .runenzeile{border-top:1px solid var(--rim)}
.runenzeile .keystone{width:28px;height:28px;border-radius:50%;background:var(--panel)}
.runenzeile .baum{width:18px;height:18px;opacity:.8}
.runenname{color:var(--text)}
.runenbaum{display:block;font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:1px}
.runenspiele{font-family:var(--mono);font-size:12.5px;color:var(--faint);text-align:right}
.runenkda{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:right}
.runencs,.runenvision{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:right}
.runencs .einheit,.runenvision .einheit,.runenkda .einheit{color:var(--faint);font-size:10.5px}
.prosub{display:block;font-family:var(--mono);font-size:10px;color:var(--faint)}

/* -- Champion-Tabelle: meistgekaufte Items ueber der Runenliste -- */
.runen-champ-items{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:2px 6px 12px;margin-bottom:10px;border-bottom:1px solid var(--rim)}
.runen-champ-items .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);flex:none}
.runen-champ-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.runen-champ-item .icon{width:24px;height:24px;border-radius:6px;background:var(--panel);flex:none}

/* -- Pro-Builds-Unterseite -- */
.pbbuild-runen{display:flex;align-items:center;gap:8px}
.pbbuild-runen .keystone{width:34px;height:34px;border-radius:50%;background:var(--panel-2)}
.pbbuild-runen .baum{width:20px;height:20px;opacity:.8}
.pbbuild-meta{margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--faint)}
/* Top-3-Items im Bestes-Build-Kaertchen -- dieselbe Groesse/Optik wie die
   Item-Vorschau bei "Builds nach Region" (.runenzeile .fitems), nur ohne
   Grid-Zwang auf 3x2 (hier sind es ohnehin nur 3 Stueck, eine Reihe reicht). */
.pbbuild-topitems{display:flex;gap:4px;margin-top:8px}
.pbbuild-topitems .icon{width:26px;height:26px;border-radius:5px}
.pbkennzahl{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;font-size:13px;color:var(--muted)}
.pbkennzahl+.pbkennzahl{border-top:1px solid var(--rim)}
.pbkennzahl b{color:var(--text);font-family:var(--mono);font-weight:500}
.pbcore-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:16px 0 8px}
.pbcore-items{display:flex;flex-direction:column;gap:1px}
.pbcore-item{display:flex;align-items:center;gap:10px;padding:8px 0}
.pbcore-item+.pbcore-item{border-top:1px solid var(--rim)}
.pbcore-item .icon{width:34px;height:34px;border-radius:7px;flex:none}
.pbcore-item div{display:flex;flex-direction:column}
.pbcore-item b{font-size:13px;color:var(--text);font-weight:500}
.pbcore-item span{font-family:var(--mono);font-size:11px;color:var(--faint)}
.runenzeile-klickbar{cursor:pointer;transition:.15s}
.runenzeile-klickbar:hover{background:var(--panel)}

/* -- Volle Runen-Seite (Primaer-/Sekundaerbaum im Detail) -- */
.subrunen-gruppe{margin-top:10px}
.subrunen-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.subrunen-liste{display:flex;flex-wrap:wrap;gap:14px}
.subrune{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.subrune .icon{width:20px;height:20px;border-radius:50%;background:var(--panel);flex:none}

/* Skill-Order ("Q > E > W") -- schlicht Text, keine eigenen Tastensymbole */
.skillorder{display:flex;align-items:center;gap:8px}
.skillorder-taste{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--text)}
.skillorder-pfeil{color:var(--faint);font-size:13px}

/* Item-Kaufreihenfolge als echte Zeitleiste (siehe itemTimelineHtml()) --
   Icon oben, Kaufzeitpunkt als kleines Badge darunter, Pfeil verbindet
   die Schritte. */
.itemtimeline{display:flex;align-items:stretch;flex-wrap:wrap;gap:8px 4px;margin-top:2px}
.itemtimeline-schritt{display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--panel-2);border:1px solid var(--rim);border-radius:8px;padding:6px}
.itemtimeline-icons{display:flex;flex-wrap:wrap;gap:2px;max-width:52px;justify-content:center}
.itemtimeline-icons .icon{width:16px;height:16px;border-radius:3px;background:var(--panel)}
.itemtimeline-zeit{font-family:var(--mono);font-size:9.5px;color:var(--muted);white-space:nowrap}
.itemtimeline-pfeil{color:var(--rim);font-size:16px;align-self:center}

/* Ranked-Builds-Uebersicht (Skill-Order) -- op.gg-Stil 4x18-Matrix:
   Q/W/E/R als Zeilen (Icon in der ersten Spalte), Level 1-18 als Spalten,
   ein Punkt markiert je Spalte, welcher Skill auf diesem Level gelevelt
   wurde. */
.skillorder-matrix{border-collapse:collapse;min-width:max-content}
.skillorder-matrix th, .skillorder-matrix td{text-align:center;padding:4px 6px}
.skillorder-matrix thead th{font-family:var(--mono);font-size:9px;font-weight:400;color:var(--faint)}
.skillorder-matrix tbody th{padding-right:8px}
.skillorder-matrix tbody tr+tr td, .skillorder-matrix tbody tr+tr th{border-top:1px solid var(--rim)}
.skillorder-matrix-icon{width:22px;height:22px;border-radius:5px;background:var(--panel-2);object-fit:cover;display:block}
.skillorder-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--violet)}

/* Matchup-Liste auf der Ranked-Builds-Uebersicht */
.matchup-zeile{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px}
.matchup-zeile+.matchup-zeile{border-top:1px solid var(--rim)}
.matchup-zeile.matchup-bester{font-weight:600}
.matchup-name{flex:1}

/* Spiele-Tabelle: Zeile anklicken -> Sub-Runen darunter einblenden */
.pg-zeile-klickbar{cursor:pointer;transition:.15s}
.pg-zeile-klickbar:hover{background:var(--panel-2)}
.pg-detailzeile td{background:var(--panel-2);padding:12px 17px}
/* Fallback-Groessen fuer .frunes/.fitems AUSSERHALB von .prow/.runenzeile
   (hier: die Spiele-Tabelle) -- ohne das faellen die nackten <img> auf
   ihre volle Bildgroesse zurueck. */
.dtable .frunes{display:inline-flex;gap:4px;align-items:center}
.dtable .frunes .keystone{width:22px;height:22px;border-radius:50%;background:var(--panel-2)}
.dtable .frunes .baum{width:14px;height:14px;opacity:.8}
.dtable .fitems{display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(2,15px);gap:2px}
.dtable .fitems .icon{width:15px;height:15px;border-radius:3px}

/* -- Pro Builds: Item-Icons in der Runenzeile (auserhalb von .prow, daher
   eigene Groessenregel -- die .prow .fitems-Regel greift hier nicht) -- */
.runenzeile .fitems{display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(2,15px);gap:2px}
.runenzeile .fitems .icon{width:15px;height:15px;border-radius:3px}
/* -- Pro Builds: Regionen-Gruppierung innerhalb einer Runenliste -- */
.liga-gruppe + .liga-gruppe{margin-top:10px;padding-top:10px;border-top:1px solid var(--rim)}
.liga-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet-bright);margin-bottom:4px;padding:0 6px}

/* Suchfeld im Kartenkopf (Champions/Matchups) -- steht zusammen mit dem
   Untertitel rechts, weil beide hinter demselben margin-left:auto haengen. */
.theader-suche{background:var(--panel-2);border:1px solid var(--rim-lit);border-radius:99px;
  padding:6px 13px;color:var(--text);font-family:var(--sans);font-size:12.5px;
  width:170px;outline:none;transition:.15s}
.theader-suche::placeholder{color:var(--faint)}
.theader-suche:focus{border-color:var(--violet);width:210px}
.tleer-suche{color:var(--faint);font-size:13px;text-align:center;padding:22px 17px}

/* Sortierbare Kopfzellen: Pfeil zeigt die aktuelle Richtung, sonst
   dezent unsichtbar bis man drueberfaehrt -- kein Pfeilfriedhof. */
.dtable th[data-sort]{cursor:pointer;user-select:none;transition:.15s}
.dtable th[data-sort]:hover{color:var(--text)}
.dtable th[data-sort]::after{content:'';display:inline-block;margin-left:5px;
  border:4px solid transparent;border-top-color:var(--rim-lit);
  transform:translateY(2px);opacity:.7}
.dtable th[data-sort][aria-sort="ascending"]::after{
  border-top-color:transparent;border-bottom-color:var(--violet-bright);
  transform:translateY(-2px);opacity:1}
.dtable th[data-sort][aria-sort="descending"]::after{border-top-color:var(--violet-bright);opacity:1}

/* Winrate/Diff-Pillen statt nackter Prozentzahlen -- kurzer Blick reicht,
   um gut von schlecht zu unterscheiden, ohne dass es nach Neon-Dashboard
   aussieht (dezente getoente Flaeche, kein voller Balken). */
.wrpille{display:inline-block;font-family:var(--mono);font-size:12.5px;
  border-radius:99px;padding:3px 10px;min-width:44px;text-align:center}
.wrpille.gut{color:var(--ion);background:rgba(79,216,176,.12)}
.wrpille.schlecht{color:var(--flare);background:rgba(255,97,136,.12)}
.wrpille.neutral{color:var(--faint);background:var(--panel-2)}

@media(max-width:620px){
  .card > h2{flex-wrap:wrap}
  .theader-suche,.theader-suche:focus{width:100%}
}

.settingsform{display:flex;flex-wrap:wrap;gap:9px;padding:16px 17px;border-bottom:1px solid var(--rim)}
.settingsform input,.settingsform select{background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:7px;padding:9px 12px;color:var(--text);font-family:var(--sans);font-size:14px;outline:none}
.settingsform input{flex:1;min-width:130px}
.settingsform input:focus,.settingsform select:focus{border-color:var(--violet)}
.rmbtn{background:none;border:none;color:var(--faint);cursor:pointer;font-size:14px;
  padding:5px 9px;border-radius:5px;transition:.15s;flex:none}
.rmbtn:hover{color:var(--flare);background:rgba(255,97,136,.1)}

/* -- Zweitaccounts (Smurfs) je Kaderspieler -- */
.altaccounts{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.altpill{display:flex;align-items:center;gap:5px;background:var(--panel-2);
  border:1px solid var(--rim-lit);border-radius:99px;padding:4px 6px 4px 11px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.altpill i{color:var(--faint);font-style:normal}
.altpill .alt-rm{background:none;border:none;color:var(--faint);cursor:pointer;
  font-size:11px;padding:3px 6px;border-radius:50%;transition:.15s}
.altpill .alt-rm:hover{color:var(--flare);background:rgba(255,97,136,.14)}
.alt-add-knopf{background:none;border:1px dashed var(--rim-lit);color:var(--faint);
  border-radius:99px;padding:5px 12px;font-family:var(--sans);font-size:11.5px;
  cursor:pointer;transition:.15s}
.alt-add-knopf:hover{color:var(--violet-bright);border-color:var(--violet)}
.alt-add-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.alt-add-form input{background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:7px;padding:6px 10px;color:var(--text);font-family:var(--sans);
  font-size:12.5px;outline:none;width:110px}
.alt-add-form input:focus{border-color:var(--violet)}
.alt-add-form .btn{padding:6px 12px;font-size:12.5px}
.alt-add-abbrechen{background:none;border:none;color:var(--faint);cursor:pointer;
  font-size:12px;padding:4px 6px}
.alt-add-abbrechen:hover{color:var(--text)}
.leer{color:var(--faint);font-size:13px;padding:20px;text-align:center}

.poolplayer{padding:17px;border-bottom:1px solid var(--rim)}
.poolplayer:last-child{border-bottom:none}
.poolplayer h3{font-family:var(--display);font-size:15px;font-weight:600;
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.poolplayer h3 .sub{font-family:var(--mono);font-size:11px;color:var(--faint);font-weight:400}
.tiergroup{margin-bottom:14px}
.tiergroup:last-of-type{margin-bottom:12px}
.tierrow{display:flex;align-items:flex-start;gap:12px}
.tierlabel{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;font-family:var(--display);font-size:13px;font-weight:700;flex:none;
  background:var(--panel-2);border:1px solid var(--rim-lit);margin-top:1px}
.tierlabel.s{color:var(--violet-bright);border-color:var(--violet)}
.tierlabel.a{color:var(--ion);border-color:#2f6e5c}
.tierlabel.b{color:var(--muted)}
.tierlabel.c{color:var(--faint)}
/* min-height:52px noetig: ein LEERES .poolgrid (Tier ohne Champions) waere
   sonst 0px hoch und damit als Drag&Drop-Ablageflaeche gar nicht
   erreichbar -- man koennte einen Champion nie in ein leeres Tier ziehen. */
.poolgrid{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-height:52px;
  border-radius:9px;transition:background-color .12s,outline-color .12s;
  outline:2px dashed transparent;outline-offset:3px}
.poolgrid.dropziel.drop-hover{background:rgba(193,63,224,.1);outline-color:var(--violet)}
.poolchamp{width:52px;height:52px;border-radius:9px;overflow:hidden;position:relative;
  cursor:pointer;border:1px solid var(--rim);background:var(--panel-2);flex:none}
.poolchamp[draggable="true"]{cursor:grab}
.poolchamp.wird-gezogen{opacity:.35}
.poolchamp:hover{border-color:var(--violet)}
/* Statt des frueheren roten "X" (suggerierte "sofort loeschen", stimmt seit
   dem Options-Fenster nicht mehr -- ein Klick oeffnet jetzt ein Menue mit
   mehreren Zielen, nicht nur Entfernen) ein kleines Info-Icon in der Ecke
   plus eine Sprechblase, die das auch in Worten sagt. Deckt die Champion-
   Grafik nicht mehr ab wie das X vorher. */
.poolchamp::after{content:'i';position:absolute;top:3px;right:3px;width:15px;height:15px;
  border-radius:50%;background:var(--panel);border:1px solid var(--rim-lit);
  color:var(--violet-bright);font-family:var(--mono);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
  opacity:0;transition:.15s;pointer-events:none}
.poolchamp:hover::after{opacity:1}
.poolchamp::before{content:'Klicken für Optionen';position:absolute;bottom:calc(100% + 7px);
  left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--rim-lit);
  color:var(--muted);font-family:var(--sans);font-size:11.5px;padding:5px 9px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:5}
.poolchamp:hover::before{opacity:1}
/* Waehrend eines Drags weder Info-Icon noch Sprechblase -- sonst blinkt es
   staendig waehrend des Ziehens. */
.poolchamp.wird-gezogen:hover::after,.poolchamp.wird-gezogen:hover::before{opacity:0}
.pooladd{display:flex;gap:8px;flex-wrap:wrap}
.pooladd select,.pooladd input{background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:7px;padding:9px 12px;color:var(--text);font-family:var(--sans);
  font-size:13.5px;outline:none}
.pooladd select{color:var(--muted)}
.pooladd .pool-tier-select{max-width:110px}
.champ-suchfeld{position:relative;width:220px;max-width:100%}
.pooladd .pool-champ-suche{width:100%}
.pooladd .pool-champ-suche::placeholder{color:var(--faint)}
.pooladd .pool-champ-suche:focus{border-color:var(--violet)}

/* Eigene Vorschlagsliste statt <datalist> -- siehe Kommentar im JS. */
.champ-vorschlaege{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:var(--panel);border:1px solid var(--rim-lit);border-radius:9px;
  padding:5px;box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
  max-height:260px;overflow-y:auto}
.champ-vorschlaege[hidden]{display:none}
.champ-vorschlag{display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:none;border-radius:6px;padding:8px 9px;cursor:pointer;
  color:var(--muted);font-family:var(--sans);font-size:14px;text-align:left;
  transition:.12s}
.champ-vorschlag:hover,.champ-vorschlag:focus{background:var(--panel-2);color:var(--text)}
.champ-vorschlag .ic{width:24px;height:24px;border-radius:50%;overflow:hidden;
  flex:none;background:var(--panel-2)}
.leer-vorschlag{color:var(--faint);font-size:13px;padding:9px}

/* ---------- Konto ---------- */
.kontoleiste{display:flex;align-items:center;gap:10px;flex:none}
.kontoname{font-size:13.5px;color:var(--text);display:flex;align-items:center;gap:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.kontorolle{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--violet-bright);background:rgba(193,63,224,.13);
  border:1px solid var(--violet-deep);border-radius:99px;padding:2px 8px;flex:none}
.kontoknopf{background:var(--panel-2);border:1px solid var(--rim-lit);color:var(--muted);
  border-radius:7px;padding:7px 13px;font-family:var(--sans);font-size:13.5px;
  cursor:pointer;transition:.15s;flex:none}
.kontoknopf:hover{color:var(--text);border-color:var(--violet)}

.konto-box{max-width:380px}
.kontologo{width:44px;height:44px;object-fit:contain;display:block;margin:0 auto 14px}
.kontotabs{display:flex;gap:1px;background:var(--rim);border:1px solid var(--rim);
  border-radius:9px;overflow:hidden;margin-bottom:16px}
.kontotabs button{flex:1;background:var(--panel);border:none;color:var(--muted);
  font-family:var(--sans);font-size:13.5px;padding:10px;cursor:pointer;transition:.15s}
.kontotabs button[aria-pressed="true"]{color:var(--violet-bright);background:rgba(193,63,224,.1)}
#kontoForm .feldpaar{display:grid;grid-template-columns:1fr 110px;gap:8px}
#kontoForm input,#kontoForm select{width:100%;background:var(--panel-2);
  border:1px solid var(--rim-lit);border-radius:7px;padding:11px 13px;color:var(--text);
  font-family:var(--sans);font-size:14px;outline:none;margin-bottom:10px}
#kontoForm input:focus,#kontoForm select:focus{border-color:var(--violet)}
.merken{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  margin-bottom:12px;cursor:pointer;text-align:left}
.merken input{width:auto!important;margin:0!important}
.kontohinweis{font-size:12.5px;color:var(--faint);line-height:1.55;margin-top:12px;
  text-align:left}
.textlink{background:none;border:none;color:var(--faint);font-family:var(--sans);
  font-size:13px;cursor:pointer;margin-top:12px;text-decoration:underline;
  text-underline-offset:3px}
.textlink:hover{color:var(--text)}

/* Eigener Eintrag hervorheben -- "das bin ich" auf einen Blick */
.ichmarke{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--violet-bright);background:rgba(193,63,224,.14);
  border-radius:99px;padding:2px 7px;font-weight:400}
.dtable tr.ichzeile{background:rgba(193,63,224,.07)}
.dtable tr.ichzeile td:first-child{box-shadow:inset 2px 0 0 var(--violet)}
.katpill.starr{cursor:default;opacity:.65}
.katpill.starr:hover{border-color:var(--rim-lit);color:var(--muted)}
.karteninhalt .notiz[readonly]{cursor:default;opacity:.75}

/* ---------- Profil / Passwort / Team-Token / Konten ---------- */
.profilkopf{display:flex;gap:20px;align-items:flex-start;padding:17px;flex-wrap:wrap}
.profilbild-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.profilbild,.profilbild-platzhalter{width:88px;height:88px;border-radius:50%;
  object-fit:cover;background:var(--panel-2);border:1px solid var(--rim-lit)}
.profilbild-platzhalter{display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:30px;font-weight:600;color:var(--faint)}
/* Gleicher Bug wie frueher bei .login-mask (siehe CLAUDE.md): [hidden] und
   diese Klasse haben dieselbe Spezifitaet, die spaeter stehende
   display:flex-Regel gewinnt und ueberschreibt das Ausblenden -- der
   violette Kreis blieb hinter dem echten Bild sichtbar. */
.profilbild-platzhalter[hidden]{display:none}
.profilbild-knopf{background:var(--panel-2);border:1px solid var(--rim-lit);color:var(--muted);
  border-radius:7px;padding:7px 13px;font-family:var(--sans);font-size:12.5px;
  cursor:pointer;transition:.15s}
.profilbild-knopf:hover{color:var(--text);border-color:var(--violet)}
.profilkopf #profilForm{flex:1;min-width:220px;padding:0;border-bottom:none}

.tokenzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tokenzeile code{background:var(--panel-2);border:1px solid var(--rim-lit);border-radius:7px;
  padding:9px 13px;font-family:var(--mono);font-size:14px;color:var(--violet-bright);
  letter-spacing:.02em}

.crow .kt-rolle{background:var(--panel-2);border:1px solid var(--rim-lit);border-radius:7px;
  padding:7px 10px;color:var(--muted);font-family:var(--sans);font-size:12.5px;outline:none}
.crow .kt-reset,.crow .kt-sperren{flex:none}
.crow .kt-sperren:disabled,.crow .kt-rolle:disabled{opacity:.4;cursor:not-allowed}

/* -- Rollen-Auswahl in der Kaderverwaltung, inline in der .sub-Zeile -- */
.rf-rolle-select{background:var(--panel-2);border:1px solid var(--rim-lit);border-radius:5px;
  padding:2px 6px;color:var(--muted);font-family:var(--mono);font-size:10.5px;
  outline:none;cursor:pointer}
.rf-rolle-select:hover{border-color:var(--violet)}
.rf-rolle-text{color:var(--muted)}

/* ---------- Kalender ---------- */
.formfehler{color:var(--flare);font-size:13px;padding:0 17px 14px;min-height:1.2em}

.kalsteuerung{display:flex;align-items:center;gap:8px;padding:13px 17px;
  border-bottom:1px solid var(--rim);flex-wrap:wrap}
.kalsteuerung button{background:var(--panel-2);border:1px solid var(--rim-lit);
  color:var(--muted);border-radius:7px;padding:8px 13px;font-family:var(--sans);
  font-size:13.5px;cursor:pointer;transition:.15s}
.kalsteuerung button:hover{color:var(--text);border-color:var(--violet)}
.kalhinweis{margin-left:auto;font-size:12.5px;color:var(--faint)}

/* Wochentag-Kopfzeile ueber dem Monatsraster (Mo..So), einmal fuer die
   ganze Spaltenbreite statt in jeder Kachel wiederholt. */
.kalwochentage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--rim);margin-bottom:1px}
.kalwochentage span{background:var(--panel-2);padding:7px 7px;
  font-family:var(--display);font-size:11.5px;font-weight:600;color:var(--faint);
  text-align:left}

/* Monatsraster: bis zu sechs Wochenreihen zu sieben Kacheln, auf schmalen
   Schirmen als Liste untereinander (siehe Media Query weiter unten). */
.kalgitter{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--rim)}
.kaltag{background:var(--panel);padding:8px 7px;min-height:84px;position:relative;
  display:flex;flex-direction:column}
.kaltag.klickbar{cursor:pointer;transition:.15s}
.kaltag.klickbar:hover{background:var(--panel-2)}
.kaltag.klickbar:hover .kaltag-plus{opacity:1}
.kaltag.heute{background:rgba(193,63,224,.07)}
.kaltag.heute .kaltag-kopf .dt{color:var(--violet-bright)}
.kaltag.andermonat{opacity:.4}
.kaltag-kopf{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.kaltag-kopf .wt{display:none}
.kaltag-kopf .dt{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.kaltag-inhalt{display:flex;flex-direction:column;gap:3px;flex:1}
.kalzeit{background:var(--panel-2);border:1px solid var(--rim);border-radius:6px;
  padding:4px 6px;font-size:11px;line-height:1.3}
.kalzeit.ich{border-color:var(--violet);background:rgba(193,63,224,.12)}
/* Fester Termin: eigene Farbe (ion/tuerkis statt violett), damit er sich von
   "meine eigene Verfuegbarkeit" (violett) UND von fremden Eintraegen
   (neutral) klar abhebt -- es ist eine offizielle Ansage, kein Zeitfenster. */
.kalzeit.fest{border-color:var(--rim-lit);border-left:3px solid var(--violet);background:var(--panel-2)}
.kalzeit.fest .wer{color:var(--text);font-weight:600}
.kalzeit.fest .zeit{color:var(--muted)}
.kalzeit .wer{display:block;color:var(--text);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.kalzeit .zeit{display:block;font-family:var(--mono);color:var(--faint);font-size:11px}
.kalzeit.ich .zeit{color:var(--violet-bright)}
/* Notiz eines festen Termins (z.B. vom Coach) -- frueher nur im
   aufgeklappten Dialog sichtbar, jetzt direkt auf der Kachel. */
.kalzeit .notiz{display:block;color:var(--faint);font-size:10.5px;line-height:1.3;
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kalleer{color:var(--rim-lit);font-size:12px}
.kalmehr{color:var(--faint);font-size:10.5px;padding:1px 6px}

/* -- Verfuegbarkeiten als kompakte Avatar-Reihe (statt Name+Zeit je
   Zeile) -- passt den ganzen Kader auf eine Kachel, Name/Zeit stehen im
   Tooltip. -- */
.kalavatare{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.kalav{display:block;position:relative;border-radius:50%;transition:.15s}
.kalav .ic{border:1.5px solid var(--rim)}
.kalav.ich .ic{border-color:var(--violet-bright)}
.kalav:hover .ic{border-color:var(--violet)}
/* Kleiner Punkt oben rechts am Avatar -- zeigt auf einen Blick (ohne
   Hover/Klick), dass zu diesem Eintrag eine Notiz existiert. Der Text
   selbst steht im Tooltip UND in der Liste im aufgeklappten Dialog. */
.kalav.hatnotiz::after{content:'';position:absolute;top:-1px;right:-1px;
  width:7px;height:7px;border-radius:50%;background:var(--ion);
  border:1.5px solid var(--panel)}
.kaltag-plus{position:absolute;top:6px;right:6px;color:var(--violet);font-size:14px;
  opacity:0;transition:.15s;line-height:1}

/* Eingabefenster fuer eine Kachel */
.zd-box{max-width:400px}
.zd-abschnitt{margin-bottom:4px}
.zd-unterueberschrift{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);text-align:left;margin-bottom:9px;
  font-weight:500}
.zd-trenn{height:1px;background:var(--rim);margin:16px 0}
.zd-liste{margin-bottom:10px;text-align:left}
.zd-leer{color:var(--faint);font-size:12.5px;text-align:left;margin-bottom:10px}
.zd-zeile{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:7px 0;font-size:13px;color:var(--muted)}
.zd-zeile + .zd-zeile{border-top:1px solid var(--rim)}
.zd-zeile .zeit{font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.zd-notiz{color:var(--muted);font-size:12px}
.zd-serie{color:var(--faint);font-size:12px}
.zd-aktionen{display:flex;gap:6px;grid-column:span 1}
.zd-aktion{background:none;border:1px solid var(--rim-lit);color:var(--muted);border-radius:6px;padding:4px 9px;font-family:var(--sans);font-size:12px;cursor:pointer}
.zd-aktion:hover{color:var(--text);border-color:var(--violet)}
#zeitForm .feldpaar,#festerTerminForm .feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#zeitForm input,#festerTerminForm input{width:100%;background:var(--panel-2);
  border:1px solid var(--rim-lit);border-radius:7px;padding:11px 13px;color:var(--text);
  font-family:var(--sans);font-size:14px;outline:none;margin-bottom:10px}
#zeitForm input:focus,#festerTerminForm input:focus{border-color:var(--violet)}
/* Termin-ansetzen-Formular ist nur fuer Captain/Coach da -- .darf-verwalten
   wird in kontoLaden() auf <body> gesetzt, sobald die Rolle passt. */
body:not(.darf-verwalten) .nurVerwaltung{display:none}

.terminfilter{display:flex;gap:18px;flex-wrap:wrap;padding:14px 17px;
  border-bottom:1px solid var(--rim);font-size:13.5px;color:var(--muted)}
.terminfilter label{display:flex;align-items:center;gap:7px}
.terminfilter select{background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:7px;padding:7px 10px;color:var(--text);font-family:var(--sans);
  font-size:13.5px;outline:none}

.terminTag,.verfTag{padding:14px 17px;border-bottom:1px solid var(--rim)}
.terminTag:last-child,.verfTag:last-child{border-bottom:none}
.terminTag-kopf,.verfTag-kopf{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}

/* Ein gefundenes Zeitfenster. "voll" = alle koennen, das ist der Fall,
   auf den es ankommt -- deshalb farblich hervorgehoben. */
.termin{display:grid;grid-template-columns:118px 78px 1fr auto;gap:12px;align-items:center;
  padding:11px 13px;border:1px solid var(--rim);border-radius:9px;background:var(--panel-2)}
.termin + .termin{margin-top:7px}
.termin.voll{border-color:var(--violet);background:rgba(193,63,224,.09)}
.termin .zeit{font-family:var(--mono);font-size:15px;color:var(--text)}
.termin.voll .zeit{color:var(--violet-bright)}
.termin .dauer{font-family:var(--mono);font-size:12px;color:var(--faint)}
.termin .wer{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Welche Rollen (+Coach) in diesem Fenster dabei sind -- jedes gelieferte
   Fenster erfuellt die Mindestanforderung schon (siehe GET /api/termine),
   das ist nur noch zur Info, WELCHE. */
.termin .anzahl{font-family:var(--mono);font-size:11.5px;color:var(--faint);
  text-align:right;white-space:nowrap}
.termin.voll .anzahl{color:var(--violet-bright)}
/* Notizen der Spieler dieses Fensters -- eigene Zeile ueber die volle
   Breite, direkt unter dem jeweiligen moeglichen Termin statt versteckt
   im Kalender-Klick. */
.termin-notizen{grid-column:1/-1;display:flex;flex-direction:column;gap:3px;
  margin-top:2px;padding-top:8px;border-top:1px solid var(--rim)}
.termin-notiz{font-size:12px;color:var(--muted)}
.termin-notiz b{font-weight:600}

.verfZeile{display:grid;grid-template-columns:1fr 118px 1fr 34px;gap:12px;align-items:center;
  padding:8px 0;font-size:13.5px}
.verfZeile + .verfZeile{border-top:1px solid var(--rim)}
.verfZeile .wer{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verfZeile .zeit{font-family:var(--mono);color:var(--muted)}
.verfZeile .notiztext{color:var(--faint);font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media(max-width:760px){
  .termin{grid-template-columns:1fr auto;gap:6px 12px}
  .termin .wer{grid-column:1/-1;white-space:normal}
  .verfZeile{grid-template-columns:1fr auto 34px}
  .verfZeile .notiztext{grid-column:1/-1}

  /* Sieben Spalten sind auf dem Handy unlesbar schmal -- der Monat wird
     zur Liste, jeder Tag eine Zeile; die Wochentag-Kopfzeile entfaellt,
     weil .wt in jeder Zeile wieder den Wochentag mitbringt. */
  .kalwochentage{display:none}
  .kalgitter{grid-template-columns:1fr}
  .kaltag{min-height:0;padding:12px 14px;flex-direction:row;align-items:flex-start;gap:14px}
  .kaltag.andermonat{display:none}
  .kaltag-kopf{margin-bottom:0;flex-direction:column;gap:2px;width:52px;flex:none}
  .kaltag-kopf .wt{display:block;font-family:var(--display);font-size:12px;font-weight:600;color:var(--muted)}
  .kaltag-inhalt{flex-direction:row;flex-wrap:wrap;gap:6px}
  .kalzeit{font-size:12px}
  .kalleer{padding-top:2px;text-align:left}
  .kalmehr{padding:4px 0 0}
  .kaltag-plus{opacity:.5;top:12px}
  .kalhinweis{margin-left:0;flex:1 1 100%}
  .kontoname{max-width:120px;font-size:12.5px}
  .kontorolle{display:none}
}

/* ---------- Login ---------- */
.login-mask{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;background:var(--void)}
.login-mask[hidden]{display:none}
.login-box{width:100%;max-width:340px;padding:32px;background:var(--panel);
  border:1px solid var(--rim);border-radius:12px;text-align:center;
  /* Ohne das hier ragte eine Box mit viel Inhalt (z.B. zd-box an einem
     Tag mit vielen Terminen/Verfuegbarkeiten) einfach ueber den
     Bildschirmrand hinaus -- .login-mask scrollt selbst nicht, "Schliessen"
     landete unerreichbar ausserhalb des Viewports. Jetzt scrollt die Box
     intern, sobald sie hoeher als der verfuegbare Platz wird. */
  max-height:calc(100vh - 48px);overflow-y:auto}
.login-box svg{width:34px;height:34px;margin-bottom:14px}
.login-box h1{font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.login-box p{color:var(--muted);font-size:13px;margin-bottom:20px}
.login-box input{width:100%;background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:7px;padding:11px 13px;color:var(--text);font-family:var(--sans);
  font-size:14px;outline:none;margin-bottom:12px}
.login-box input:focus{border-color:var(--violet)}
.login-box .btn{width:100%;padding:11px}
.login-box .fehler{color:var(--flare);font-size:12.5px;margin-top:10px;min-height:1.2em}
.geladen .login-mask{display:none}

/* ---------- Options-Fenster (Champion-Suche, Championpool) ----------
   Eigene Maske statt der Login-Maske: halbtransparenter Hintergrund
   (das Login deckt die ganze Seite komplett ab, hier soll die Ansicht
   dahinter noch sichtbar bleiben) und am UNTEREN Rand verankert -- am
   Handy mit dem Daumen leichter erreichbar als eine mittig schwebende
   Box, auf breiten Schirmen ab 661px stattdessen mittig wie gewohnt. */
.am-mask{background:rgba(6,4,12,.72);align-items:flex-end;justify-content:center;z-index:200}
.am-box{max-width:420px;padding:18px 18px 14px;text-align:left;
  border-radius:16px 16px 0 0}
.am-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:0 2px}
.am-kopf b{display:block;font-size:15px;font-weight:700}
.am-kopf .sub{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.am-liste{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.am-eintrag{width:100%;text-align:left;padding:14px 15px;background:var(--panel-2);
  border:1px solid var(--rim);border-radius:9px;color:var(--text);font-family:var(--sans);
  font-size:14.5px;cursor:pointer;transition:.15s}
.am-eintrag:hover{border-color:var(--violet);background:var(--panel)}
.am-eintrag.warn{color:var(--flare)}
@media(min-width:661px){
  .am-mask{align-items:center}
  .am-box{border-radius:12px}
}

@media(max-width:1180px){
  .page{grid-template-columns:1fr}
}

/* ---------- Handy / schmale Schirme ----------
   Die Navigation war hier frueher komplett ausgeblendet (.tnav{display:none})
   -- damit gab es auf dem Handy KEINEN Weg zu Spieler, Champions,
   Championpool oder Einstellungen. Jetzt scrollt sie stattdessen waagerecht.
   Ausserdem waren die alten .match-Regeln noch auf das laengst ersetzte
   Spalten-Grid gemuenzt und hatten keine Wirkung mehr. */
@media(max-width:760px){
  .topbar .in{height:auto;padding:10px 14px;gap:12px;flex-wrap:wrap}
  .logo b{font-size:13px}

  /* Waagerecht scrollbare Reiterleiste statt versteckter Navigation */
  .tnav{display:flex;order:3;width:100%;overflow-x:auto;gap:0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tnav::-webkit-scrollbar{display:none}
  .tnav a{padding:9px 12px;font-size:14px;white-space:nowrap;flex:none}
  .tnav a[aria-current]::after{left:12px;right:12px}
  .tdrop summary{padding:9px 12px;white-space:nowrap}
  .tdrop.hat-aktiven summary::before{left:12px;right:12px}
  /* Das Dropdown-Menue oeffnet sonst ausserhalb des Bildschirms, weil die
     Reiterleiste scrollt -- hier fest am linken Rand ausgerichtet.
     "top" bewusst NICHT hier per CSS gesetzt: die Kopfzeile hat auf dem
     Handy variable Hoehe (mehrzeilig, siehe .topbar .in weiter oben), ein
     fester Wert waere mal zu hoch, mal zu niedrig. Stattdessen setzt JS
     (siehe tdropPositionieren()) "top" bei jedem Oeffnen exakt auf die
     tatsaechliche Unterkante des angeklickten Reiters -- deshalb hier nur
     ein defensiver Startwert, falls JS aus irgendeinem Grund noch nicht
     gelaufen ist. */
  .tdrop-menu{position:fixed;left:14px;right:14px;top:110px;min-width:0}

  .search{order:2;margin-left:auto;min-width:0;flex:1;max-width:210px}

  .hero .in{padding:18px 14px 16px;gap:14px}
  .crest{width:60px;height:60px}
  .crest-mark{width:38px;height:38px}
  .who h1{font-size:21px;gap:8px}
  .who h1 em{font-size:14px}
  .who .meta{font-size:12.5px;flex-wrap:wrap;gap:6px}
  .hero .act{margin-left:0;width:100%;flex-direction:row;align-items:center;
    justify-content:space-between}

  .page{padding:12px 14px 50px;gap:12px}
  .card > h2{padding:13px 14px}
  .body{padding:14px}

  /* Match-Karten: Kopfzeile umbrechen lassen, Notiz ueber die volle Breite */
  .match{padding:14px 14px}
  .mi{gap:8px 10px;padding-left:6px;margin-bottom:12px}
  .karteninhalt{grid-template-columns:1fr;gap:12px}
  .tsum{max-width:none}

  /* Tabellen (Spieler/Champions/Matchups) waagerecht scrollen lassen,
     statt sie aus dem Bildschirm laufen zu lassen. */
  .dtable{min-width:640px}
  .dtable th,.dtable td{padding:10px 12px;font-size:13px}

  .subnav{width:100%}
  .subnav button{flex:1;padding:9px 10px;font-size:13px}

  .filters{flex-wrap:wrap;gap:1px}
  .filters button{flex:1 1 auto;padding:10px 12px;font-size:13.5px}
  .filters .sp{display:none}
  .filters select{flex:1 1 100%;padding:10px 12px}

  .settingsform{padding:14px}
  .settingsform input,.settingsform select{flex:1 1 100%;min-width:0}
  .poolplayer{padding:14px}
  .pooladd{width:100%}
  .champ-suchfeld{flex:1;width:auto;min-width:0}
  /* Vorschlaege mit dem Finger bedienbar: hoehere Zeilen, groessere Icons */
  .champ-vorschlag{padding:11px 10px;font-size:15px;gap:10px}
  .champ-vorschlag .ic{width:28px;height:28px}
  .champ-vorschlaege{max-height:min(300px,45vh)}

  /* Lesbarkeit: nichts unter 11.5px, sonst muss man zum Lesen zoomen. */
  .tsum-lbl,.katpill,.crow .ic,.mvp-tag,.mvp .stat,.tobj,
  .fside .side-label,.prow .nm .sub,.prow .cs,.dtable th,
  .poolplayer h3 .sub,.mi .ago,.mi .len,.mi .blocklabel,.stamp{font-size:11.5px}
  .prow .kda{font-size:13px}
  .who .tag{font-size:11.5px}

  /* Tap-Ziele auf mindestens 34px Hoehe -- mit dem Finger sonst kaum
     zuverlaessig zu treffen. */
  .katpill{padding:8px 14px;font-size:11.5px}
  .delpill{width:34px;height:34px;font-size:13px}
  .filters button,.subnav button,.rwahl button{min-height:38px}
  .filters select,.settingsform input,.settingsform select,
  .pooladd select,.pooladd input,.karteninhalt .notiz{min-height:38px}
  .search{padding:9px 12px}
  /* 16px ist auf dem Handy Pflicht, nicht Geschmack: iOS Safari zoomt beim
     Antippen eines Eingabefelds automatisch hinein, sobald die Schrift
     kleiner ist -- danach steht die ganze Seite verschoben und man muss von
     Hand wieder rauszoomen. !important, weil mehrere spezifischere Regeln
     (.karteninhalt .notiz, .pooladd select, ...) sonst gewinnen. */
  input,select,textarea,
  .search input,.karteninhalt .notiz,
  .pooladd select,.pooladd input,
  .settingsform input,.settingsform select,
  .filters select,.login-box input{font-size:16px!important}
  .more{min-height:38px;padding:10px 14px}
  .blocklabel{min-height:auto}
  .rmbtn{min-width:34px;min-height:34px}
  .mvp-info{width:36px;height:36px;font-size:15px}
  .search input{min-height:24px}
  .poolchamp{width:46px;height:46px}
  .logo{min-height:34px}
  /* Groessere Champion-Icons in den Spieler-Zeilen, sonst kaum erkennbar */
  .prow .ic{width:26px;height:26px}
  .prow{grid-template-columns:26px 1fr 52px 58px 40px 40px;gap:10px;padding:8px 0}
}

@media(max-width:420px){
  .who h1{font-size:19px}
  .search{max-width:none;flex:1 1 100%;order:4}
  .sum{gap:14px;padding:14px}
  .sum .sep{display:none}
}

/* ---------- Datenschutz-Seite & Footer ---------- */
.rechtstext h3{font-family:var(--display);font-size:13px;font-weight:600;color:var(--text);
  margin:22px 0 8px}
.rechtstext h3:first-child{margin-top:0}
.rechtstext p{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:10px}
.rechtstext ul{margin:0 0 10px;padding-left:20px;color:var(--muted);font-size:13.5px;line-height:1.6}
.rechtstext li{margin-bottom:6px}
.rechtstext code{font-family:var(--mono);background:var(--panel-2);padding:1px 5px;
  border-radius:4px;font-size:12px}
.hinweis-platzhalter{background:rgba(255,97,136,.1);border:1px solid var(--flare);
  border-radius:8px;padding:10px 13px;color:var(--flare)!important;font-size:12.5px!important}
.riot-disclaimer-block{font-size:12.5px!important;color:var(--faint)!important;font-style:italic}

.site-footer{border-top:1px solid var(--rim);margin-top:24px}
.site-footer .in{max-width:1380px;margin:0 auto;padding:18px 20px;display:flex;
  align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--faint)}
.site-footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.site-footer a:hover{color:var(--text)}
.site-footer .riot-disclaimer{flex-basis:100%;font-size:11px;line-height:1.5;color:var(--faint)}
@media(max-width:760px){
  .site-footer .in{padding:16px 14px}
}

/* ---------- Ranked-Karte im Spielerprofil (live ueber die offizielle
   Riot-API -- Rang/LP, Meisterschaft, Top-Champions nach Winrate,
   letzte Ranked-Spiele) ---------- */
.rk-ligen{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.rk-liga{display:flex;align-items:center;gap:12px;background:var(--panel-2);
  border:1px solid var(--rim);border-radius:10px;padding:10px 14px;flex:1 1 200px}

.rk-abschnitt{margin-top:16px}
.rk-abschnitt:first-of-type{margin-top:0}
.rk-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}

/* Mastery-Podest -- Platz 1 mittig und gross, 2/3 kleiner links/rechts
   (siehe masteryHtml() im Frontend fuer die Reihenfolge-Logik). */
.mastery-podium{display:flex;align-items:flex-end;justify-content:center;gap:18px;
  margin-bottom:18px;flex-wrap:wrap}
.mastery-podium-platz{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.mastery-podium-platz.p1{order:2}
.mastery-podium-platz.p2{order:1}
.mastery-podium-platz.p3{order:3}
.mastery-podium-rang{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.mastery-podium-platz b{font-size:12.5px;max-width:84px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mastery-podium-punkte{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* Echtes Mastery-Crest-Bild (Fluegel-Wappen + Edelstein je Level, siehe
   _MASTERY_ICONS im Frontend) hinter dem Champion-Icon. */
.mastery-hex{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.mastery-hex-bild{height:auto;object-fit:contain}
.mastery-hex-icon{border:3px solid var(--panel)}

.mastery-rest{display:flex;flex-wrap:wrap;gap:12px 10px}
.mastery-rest-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.mastery-rest-punkte{font-family:var(--mono);font-size:9.5px;color:var(--faint)}

.rk-topchamp{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px}
.rk-topchamp+.rk-topchamp{border-top:1px solid var(--rim)}
.rk-topname{flex:1}

.tag-pool{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--violet-deep);color:#fff;border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.tag-bann{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--rot);color:#fff;border-radius:4px;padding:3px 8px;margin-right:8px}

@media(max-width:620px){
  .rk-ligen{flex-direction:column}
}

#push-knopf{margin-left:auto}
.pentakill-banner span{flex-basis:100%;text-align:center}
.pentakill-banner .ico{width:16px;height:16px}
.kaltag{min-width:0}
.kalzeit{min-width:0}
.kalzeit .notiz{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Benachrichtigungen */
.push-kalender{margin:0;padding:8px 17px 12px;font-size:12.5px;color:var(--faint)}
.push-kalender a{color:var(--violet-bright);text-decoration:none}
.push-kalender a:hover{text-decoration:underline}
.push-body{padding:16px 17px}
.push-text{margin:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.5}
.push-ios{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
  padding:10px 12px;border:1px solid var(--rim-lit);border-radius:8px;
  background:var(--panel-2);font-size:13px;color:var(--muted)}
.push-aktionen{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.push-aktionen .btn{width:auto}
.push-arten{margin-top:18px;border-top:1px solid var(--rim)}
.push-arten label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--rim);cursor:pointer}
.push-arten input{margin-top:3px;accent-color:var(--violet)}
.push-arten b{display:block;font-weight:500;font-size:14px;color:var(--text)}
.push-arten small{display:block;margin-top:2px;font-size:12.5px;color:var(--faint);line-height:1.4}
.ios-schritte{margin:14px 0 18px;padding-left:20px;font-size:14px;color:var(--muted);line-height:1.6}
.ios-schritte li{margin-bottom:6px}
.ios-schritte b{color:var(--text);font-weight:500}
.push-ios[hidden],.push-arten[hidden],.push-kalender[hidden],.push-aktionen [hidden],#push-karte [hidden]{display:none !important}
.push-link{margin-left:auto;background:var(--panel-2);border:1px solid var(--rim-lit);
  color:var(--muted);border-radius:7px;padding:7px 12px;font-size:13px;text-decoration:none;white-space:nowrap}
.push-link:hover{color:var(--text);border-color:var(--violet)}
.push-link[hidden]{display:none !important}
.push-ton{display:flex;gap:12px;align-items:flex-start;padding:12px 0 4px;cursor:pointer}
.push-ton[hidden]{display:none !important}
.push-ton input{margin-top:3px;accent-color:var(--violet)}
.push-ton b{display:block;font-weight:500;font-size:14px;color:var(--text)}
.push-ton small{display:block;margin-top:2px;font-size:12.5px;color:var(--faint);line-height:1.5}
.push-vorlauf{padding:12px 0 14px 28px;border-bottom:1px solid var(--rim)}
.push-vorlauf-liste{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.vl-chip{display:inline-flex;align-items:center;gap:10px;padding:5px 6px 5px 11px;font-size:13px;
  color:var(--text);background:var(--panel-2);border:1px solid var(--rim-lit);border-radius:7px}
.vl-weg{background:none;border:none;color:var(--faint);font-family:var(--sans);font-size:12px;
  cursor:pointer;padding:2px 6px;border-radius:5px}
.vl-weg:hover{color:var(--flare);background:rgba(255,97,136,.1)}
.vl-leer{font-size:13px;color:var(--faint)}
.push-vorlauf-neu{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.push-vorlauf-neu input,.push-vorlauf-neu select{background:var(--panel-2);border:1px solid var(--rim-lit);
  border-radius:7px;padding:7px 9px;color:var(--text);font-family:var(--sans);font-size:13px;outline:none}
.push-vorlauf-neu input{width:72px}

/* Vorschlagsliste der Suchleiste oben */
.such-vorschlaege{left:auto;right:0;top:calc(100% + 8px);width:300px;max-height:min(380px,70vh)}
.such-gruppe{padding:8px 9px 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.such-gruppe:first-child{padding-top:4px}
.such-eintrag.aktiv{background:var(--panel-2);color:var(--text)}
.such-meta{margin-left:auto;font-size:12px;color:var(--faint)}
@media (max-width:700px){.such-vorschlaege{position:fixed;left:10px;right:10px;top:64px;width:auto}}