:root{
    /* ===== Padel Design System – NIGHT (Standard) · Blau→Magenta ===== */
    --bg-1:#2A2E38;
    --bg-2:#1B1E26;
    --surface-raised:#30343F;
    /* Linien und dezente Flächen als Tokens: im Day-Modus kippen sie geschlossen von
       hellen Linien auf dunklem Grund zu dunkelgrauen Linien auf hellem Grund. Dunkel auf
       Hell braucht dabei deutlich weniger Deckkraft, sonst wirkt alles hart umrandet. */
    --line-strong:rgba(255,255,255,.55);
    --line-card:rgba(255,255,255,.34);
    --line-soft:rgba(255,255,255,.20);
    --line-faint:rgba(255,255,255,.10);
    --fill-faint:rgba(255,255,255,.07);
    --fill-soft:rgba(255,255,255,.12);
    --ink-dim:rgba(255,255,255,.5);
    --glass:rgba(255,255,255,0.07);
    --glass-hi:rgba(255,255,255,0.12);
    --glass-border:rgba(255,255,255,0.16);
    --glass-blur-px:18px; /* war 26px – moderat reduziert für spürbar bessere Scroll-/Renderperformance, optisch kaum wahrnehmbar */
    --glass-blur-light-px:14px; /* leichtere Variante für häufige Listen-Elemente (Performance) */
    --text-main:#F4F5F7;
    --text-sub:#A2A9B5;
    --text-on-accent:#FFFFFF;

    /* Gradient-Stops (am Logo ausgerichtet) */
    --blue:#2E52FF;
    --blue-deep:#1F3AD9;
    --mid:#8B2CD0;
    --magenta:#E22EC5;
    --magenta-deep:#B01488;

    /* Blaue Hervorhebung (Night, AA-geprüft) */
    --accent-bright:#85A3FF;

    /* Glows + Akzent-Nebenwerte */
    --glow-blue:rgba(46,82,255,0.10);
    --glow-magenta:rgba(226,46,197,0.09);
    --accent-glow:rgba(46,82,255,0.16);
    --accent-shadow:rgba(70,60,200,0.40);

    /* Verläufe: diagonal (klein) + geschwungen/radial (Kacheln) */
    --grad:linear-gradient(115deg, var(--blue) 0%, var(--mid) 50%, var(--magenta) 100%);
    --grad-h:
      radial-gradient(ellipse 85% 70% at 20% 15%, var(--blue) 0%, transparent 55%),
      radial-gradient(ellipse 70% 90% at 80% 85%, var(--magenta) 0%, transparent 52%),
      radial-gradient(ellipse 60% 60% at 55% 45%, var(--mid) 0%, transparent 60%),
      linear-gradient(160deg, var(--blue-deep) 0%, var(--mid) 55%, var(--magenta-deep) 100%);

    --r-lg:16px;
    --r-md:14px;
    --r-sm:12px;
    --r-xs:10px;
    /* Flaches Design: sehr subtiler Schatten (statt großflächigem Glow), Trennung läuft über
       Abstand + dünnen 1px-Border. Glow bleibt gezielten Elementen vorbehalten (Niveau-Ring,
       Last-Minute, offene To-Dos, Live-Turniere, 4er-Grid abgeschwächt). */
    --shadow-glass:0 1px 3px rgba(0,0,0,0.06);
    --shadow-accent:0 16px 44px var(--accent-shadow);

    /* ===== Kompatibilitäts-Mapping: alte Variablennamen → neue Tokens ===== */
    --ink:var(--text-main);
    --ink-soft:var(--text-sub);
    --line:var(--glass-border);
    --azure:var(--surface-raised);
    --field:var(--glass-hi);
    --radius:var(--r-sm);
    --card-bg:rgba(255,255,255,0.035);
    --card-border:var(--glass-border);
    --card-shadow:var(--shadow-glass);
    --glass-blur:blur(var(--glass-blur-px)) saturate(160%);
    /* Accent-Kacheln nutzen den horizontalen Verlauf (saubere Seitenkanten) */
    --card-bg-alert:var(--grad-h);
    --card-border-alert:rgba(255,255,255,0.18);
    --card-bg-join:var(--grad-h);
    --card-border-join:rgba(255,255,255,0.18);
    /* alte Orange-Aliasse auf neue Werte, falls noch referenziert */
    --accent:var(--blue);
    --accent-light:var(--mid);
    --accent-deep:var(--blue-deep);
    --grad-a:var(--blue);
    --grad-b:var(--mid);
    --grad-c:var(--magenta);
  }
  /* ===== DAY / LIGHT-Modus ===== */
  body.day{
    /* Warmes Creme als Grundfläche; bg-1 minimal heller für den Verlauf im Kopfbereich. */
    --bg-1:#FAF8F3;
    --bg-2:#F5F2EB;
    --surface-raised:#FFFFFF;
    --glass:rgba(255,255,255,0.55);
    --glass-hi:rgba(255,255,255,0.72);
    /* Ränder nicht mehr weiß (auf Creme unsichtbar), sondern dunkelgrau */
    --glass-border:rgba(34,34,34,0.16);
    --text-main:#222222;
    --text-sub:#605C55;
    --line-strong:rgba(34,34,34,.38);
    --line-card:rgba(34,34,34,.20);
    --line-soft:rgba(34,34,34,.12);
    --line-faint:rgba(34,34,34,.07);
    --fill-faint:rgba(34,34,34,.04);
    --fill-soft:rgba(34,34,34,.07);
    --ink-dim:rgba(34,34,34,.55);
    --text-on-accent:#FFFFFF;
    --accent-bright:#2743E8;
    --glow-blue:rgba(46,82,255,0.08);
    --glow-magenta:rgba(226,46,197,0.06);
    --accent-glow:rgba(46,82,255,0.12);
    --shadow-glass:0 1px 3px rgba(0,0,0,0.05);
    --shadow-accent:0 14px 36px rgba(70,60,200,0.30);
    --card-bg:rgba(255,255,255,0.72);
    --card-shadow:var(--shadow-glass);
  }
  /* Match-Sub-Karten: im Day-Mode dunkle Transparenz statt weißer */
  body.day .mc,body.day .mc-compact{background:rgba(34,34,34,.03);border-color:var(--line-card)}
  /* Toggle-Hintergründe: im Day-Mode dezent dunkel */
  body.day .vis-toggle{background:rgba(0,0,0,.05)}
  /* Sub-Karten auf Accent-Kacheln (Beitreten/Einladung) bleiben hell-transparent in beiden Modi */
  body.day .req-block .mc{background:transparent;border-color:var(--line-card)}
  /* Stammrunde im Hellmodus: kräftigeres Blau, damit es auf Creme lesbar bleibt */
  body.day .mc-pill.stamm-pill{color:#2743E8}
  body.day .sr-tag{color:#2743E8;background:rgba(46,82,255,.12)}
  /* Niveau-Kachel im Hellmodus: alles, was im Dunkelmodus weiß bzw. hell ist, wird zu
     Abstufungen unseres Dunkelgraus - von kräftig (Zahlen) bis leicht (Skalenmarken).
     Alle vier Stufen liegen über 4,5:1 auf dem Creme-Hintergrund. */
  body.day .nv-num,
  body.day .nv-v,
  body.day .nv-real-v{color:#222222}
  body.day .nv-band{color:#3A3A3A}
  body.day .nv-k,
  body.day .nv-real-k{color:#555555}
  body.day .nv-ticks .nv-lbl{color:#6E6E6E}
  body.day .nv-info{border-color:rgba(34,34,34,.28)}
  body.day .nv-info svg{fill:#555555}
  body.day .nv-ghost{border-color:#6E6E6E;opacity:.85}
  /* Marker-Rand nimmt im Hellmodus die Hintergrundfarbe auf, damit er sauber ausgestanzt wirkt */
  body.day .nv-you{border-color:var(--bg-2)}
  body.day .nv-v.up{color:#0A7A50}
  body.day .nv-v.down{color:#B3261E}
  body.day .nv-bar i{background:#0A8F63}
  /* Alarmrot: das helle #ff8a8d erreicht auf Creme nur 2,0:1 - im Hellmodus dunkler setzen */
  body.day .slim-tile.alert .slim-label,
  body.day .slim-tile.alert .slim-count,
  body.day .mc-invite .mc-top-line{color:#B3261E}
  body.day .slim-tile.alert .slim-chev{color:rgba(179,38,30,.75)}
  /* Farbige Pillen: die Flächen bleiben, nur die Schrift wird auf lesbaren Kontrast gebracht.
     Auf hellem Grund braucht es dunklere Töne (gemessen nach WCAG, Ziel mindestens 4,5:1). */
  body.day .mc-pill.friends{color:#0A6E4F}
  body.day .mc-pill.public{color:#7A5500}
  /* Im Dunkelmodus war Gold auf Gold zu schwach (3,0:1) - hier aufhellen statt abdunkeln */
  .mc-pill.public{color:#E8B54A}
  body.day .mc-pill-banner.pending{color:#8A6800}
  body.day .niveau-step-trend svg{background:#FFFFFF;border-color:rgba(34,34,34,.14)}
  /* Textur-Overlays der Verlaufskacheln bleiben hell - sie liegen auf Farbe, nicht auf Creme */
  /* html-Hintergrund beim Overscroll im Day-Mode */
  html.day-root{background:#DFE2E9}
  *{box-sizing:border-box}
  html{background:var(--bg-2);-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{margin:0;padding:0;touch-action:pan-y;width:100%;max-width:100%;overscroll-behavior-y:none}
  /* Waagerechtes Überlaufen unterbinden - aber NICHT über overflow-x:hidden am html/body:
     Das macht das Element zum Scroll-Container und bricht damit jedes position:sticky im
     Inneren (die Kopfleiste scrollte dadurch mit weg). "clip" beschneidet genauso, erzeugt
     aber keinen Scroll-Container. Ältere Browser ohne "clip" ignorieren die Zeile schlicht -
     dann ist im Zweifel waagerechtes Scrollen möglich, aber die Kopfleiste funktioniert. */
  html,body{overflow-x:clip}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--text-main);
    min-height:100vh;
    display:flex;flex-direction:column;
    padding:24px;
    overflow-y:hidden;
    background:transparent;
  }
  body.scroll{overflow-y:auto}
  .card{
    width:100%;max-width:430px;margin:auto;
    position:relative;z-index:1;
  }
  .head{padding:30px 28px 18px}
  .brand{display:flex;flex-direction:column;align-items:center;gap:2px}
  .brand .line{
    font-family:'Inter',sans-serif;
    font-weight:700;font-size:48px;line-height:1.02;letter-spacing:0;
    color:var(--ink);margin:0;transform:skewX(-7deg);text-transform:uppercase;font-stretch:expanded;display:block}
  .brand .l1{align-self:center}
  .brand .l2{align-self:center}
  .brand .pgrad{background:linear-gradient(135deg,var(--accent-bright),var(--accent) 55%,var(--accent-deep));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .ball{width:10px;height:10px;border-radius:50%;background:var(--azure);display:inline-block;transform:translateY(-2px);box-shadow:0 0 0 2px rgba(57,57,57,.12)}
  .tagline{margin:16px auto 0;font-family:'Inter';font-size:16px;font-weight:600;color:var(--ink);text-align:center;max-width:88%;line-height:1.35}
  .tagline-sub{margin:4px auto 0;font-family:'Inter';font-size:13.5px;font-weight:400;color:var(--ink-soft);text-align:center;max-width:88%;line-height:1.5}

  .tabs{display:flex;border-bottom:1px solid var(--line);margin-top:6px}
  .tab{
    flex:1;padding:16px 0;background:none;border:0;cursor:pointer;
    font-family:'Inter';font-size:17px;font-weight:700;color:var(--ink-soft);
    border-bottom:2px solid transparent;
  }
  .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
  .tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

  form{padding:22px 28px 28px;display:none}
  form.active{display:block}
  .field{margin-bottom:15px}
  label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
  input,select{
    width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--field);font-family:'Inter';font-size:16px;color:var(--ink);
  }
  input:focus,select:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
  .row{display:flex;gap:12px}
  .row .field{flex:1;min-width:0}

  .niveau-val{font-weight:700;font-family:'Inter'}
  input[type="range"]{padding:0;accent-color:var(--ink);background:transparent;border:0}

  .btn{
    width:100%;padding:15px;border:0;border-radius:var(--radius);cursor:pointer;position:relative;overflow:hidden;
    background-image:var(--grad);
    color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18);
    font-family:'Inter';font-weight:700;font-size:16px;
    margin-top:6px;box-shadow:0 6px 18px var(--accent-shadow);
  }
  .btn:hover{filter:brightness(1.04)}
  .btn:active{filter:brightness(.97)}
  .btn:disabled{opacity:.55;cursor:default}
  .btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

  /* FEHLTE BISHER KOMPLETT: .btn.secondary wurde an vier Stellen in der App verwendet
     (Matchpartner vorschlagen, Court buchen, Setzliste speichern, jetzt auch der Editor hier),
     aber ohne diese Regel bekam jeder dieser Buttons ungewollt denselben vollen, intensiven
     Verlauf wie ein normaler .btn - "sekundär" hatte optisch bisher keinerlei Wirkung.
     Gedämpfte Variante: kein Verlauf, kein Leucht-Schatten, dünner Rahmen statt Farbfläche. */
  .btn.secondary{
    background-image:none; background:rgba(255,255,255,.06);
    color:var(--ink); text-shadow:none; box-shadow:none;
    border:1px solid var(--glass-border);
  }
  .btn.secondary:hover{filter:none; background:rgba(255,255,255,.1)}
  .btn.secondary:active{filter:none; background:rgba(255,255,255,.04)}

  .msg{margin-top:14px;font-size:13px;min-height:18px}
  .msg.error{color:#9b2a2a}
  .msg.ok{color:#2f6b3a}

  .hint{font-size:12px;color:var(--ink-soft);margin-top:4px}
  .banner{background:rgba(255,193,7,.15);color:var(--text-main);border:1px solid rgba(255,193,7,.3);padding:12px 16px;font-size:13px;text-align:center}

  .session{padding:30px 28px;text-align:center;display:none}
  .session.active{display:block}
  .session h1{font-family:'Inter';font-weight:700;font-size:24px;color:var(--ink);margin:0 0 10px}
  .session .who{font-family:'Inter';font-size:20px;font-weight:700;margin:8px 0 2px}
  .session .meta{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
  .ghost{background:none;border:1px solid var(--ink);color:var(--ink)}
  .ghost:hover{background:rgba(57,57,57,.06)}
  .sc-card-wrap{position:relative;width:100%;max-width:340px;margin:0 auto 14px;aspect-ratio:9/16;border-radius:24px;overflow:hidden;box-shadow:0 8px 24px rgba(40,40,50,.18);background:#1a1a24}
  .sc-card-wrap canvas{width:100%;height:100%;display:block;object-fit:cover}
  .sc-photo-btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(20,20,30,.55);color:#fff;font-family:'Inter';font-weight:600;font-size:13.5px;cursor:pointer}
  .sc-photo-btn svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* ---- App-Shell (nach Login) ---- */
  .app{display:none;width:100%;padding:0 0 120px;position:relative;z-index:1}
  body{background:transparent}
  /* WICHTIG: overflow-y bleibt hier 'visible', damit das DOKUMENT scrollt und nicht das
     body-Element. Scrollt body selbst, wandern auf iOS position:fixed-Elemente (die
     Menüleiste) beim Scrollen mit - genau das war der Grund, warum das Menü hochrutschte. */
  body.app-active{padding:0;overflow-y:visible;display:block;min-height:100vh;min-height:100dvh}
  body.app-active .card{display:none}
  body.app-active .app{display:block;min-height:100vh}
  body.app-active .auth-glow{display:none}
  body.app-active .bgfx{opacity:1}
  /* Auth-Screen: bgfx dezenter im Hintergrund */
  body:not(.app-active) .bgfx{opacity:.7}

  .topbar{padding:24px 20px 4px}
  .topbar .hello{font-family:'Inter';font-weight:700;font-size:24px;color:var(--ink);margin:0}
  .topbar .sub{font-size:13px;color:var(--ink-soft);margin:4px 0 0}

  /* Unten so viel Platz lassen, dass die feste Navigationsleiste NICHT über dem letzten Element
     liegt. Ohne dieses Padding war z.B. der "Speichern"-Button in den Profildaten von der
     Nav-Leiste überdeckt und liess sich nicht antippen (trat je nach Scrollposition sporadisch auf).
     Rechnung: Nav-Höhe (~62px) + Abstand zum Rand (16px) + Sicherheitspuffer + iOS-Safe-Area. */
  /* padding-top ist 0: Die Kopfleiste soll bündig oben sitzen und bis in den Bereich
     hinter der Statusleiste reichen. Sonst blitzt dort der App-Hintergrund als Streifen
     durch (siehe .screen-head, das den Sicherheitsabstand selbst mitbringt). */
  .screen{display:none!important;padding:0 10px calc(104px + env(safe-area-inset-bottom, 0px))}
  .screen.active{display:block!important}

  /* Flaches Design: kein Hintergrund, nur eine feine Linie - keine Kachel-in-Kachel-Optik mehr */
  .tile{background:transparent;border:1px solid var(--glass-border);box-shadow:none;border-radius:var(--r-lg);padding:16px;margin-bottom:12px;display:flex;flex-direction:column}

  /* ===== Design System Kern-Komponenten ===== */
  .glass{
    background:transparent;
    border:1px solid var(--glass-border);
    border-radius:var(--r-md);
    box-shadow:none;
  }
  .section-heading{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 8px 4px}
  .section-heading h2{font-size:17px;font-weight:800;letter-spacing:-0.02em;color:var(--text-main)}
  .section-heading a{font-size:12px;color:var(--accent-bright);font-weight:700;text-decoration:none}

  /* ===== Niveau-Entwicklung Chart ===== */
  .niveau-chart-tile{padding:8px 4px 4px;background:none;box-shadow:none;border:none}
  .niveau-chart-wrap{width:100%;position:relative}
  .niveau-chart-wrap svg{width:100%;height:auto;display:block;overflow:visible}
  .nc-fill{opacity:.9}
  .nc-line{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
  .nc-dot{fill:var(--magenta);stroke:var(--bg-1);stroke-width:2;cursor:pointer;transition:r .15s}
  .nc-dot:active{r:7}
  .nc-label-group{pointer-events:none}
  .nc-label-bg{fill:var(--magenta)}
  /* Klickbare Pille (führt zum auslösenden Match): dezenter Rahmen als Hinweis */
  .nc-label-bg.clickable{stroke:rgba(255,255,255,.55);stroke-width:1.2}
  .nc-label-text{fill:#fff;font-family:'Inter';font-weight:800;font-size:13px;text-anchor:middle;dominant-baseline:central}
  /* Veränderung zum vorherigen Stand: klein und schmal, dicht an der Linie vor der Pille.
     Erscheint erst, wenn ein Punkt aktiv angetippt wurde. */
  .nc-delta{font-family:'Inter';font-weight:500;font-size:9.5px;dominant-baseline:central;letter-spacing:-.1px}
  .nc-delta.up{fill:#10B981}
  .nc-delta.down{fill:#e5484d}
  body.day .nc-label-text{fill:#000}
  .nc-guide{stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:4 4;opacity:.55;pointer-events:none}
  .nc-axis-text{fill:var(--text-sub);font-family:'Inter';font-weight:700;font-size:10px;text-anchor:end}
  .tile h3{font-family:'Inter';font-weight:700;font-size:14px;text-transform:uppercase;margin:0 0 12px;color:var(--ink)}
  /* "Spiele aus deinem Club": abstrakte Arena-Stimmung (Flutlicht + Court-Linien) hinter Milchglas-Box */
  #clubBlock{
    background:transparent;border:0;
    box-shadow:none;border-radius:0;padding:0;margin-bottom:10px;
    display:flex;flex-direction:column;
  }
  .big{font-family:'Inter';font-weight:700;font-size:48px;color:var(--ink);line-height:1}
  .muted{color:var(--ink-soft);font-size:15px}
  .kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
  .kv:last-child{border-bottom:0}
  .kv span:first-child{color:var(--ink-soft)}
  .kv span:last-child{font-weight:500;text-align:right}
  .placeholder{color:var(--ink-soft);font-size:15px;padding:4px 0;line-height:1.5}

  /* ===== Home-4er-Raster: Offene Matches / Events / Ranglisten / Mein Training =====
     Session 7: von Icon-Kacheln auf Foto-Kacheln umgestellt (Stil "Ruhig" aus dem Kachel-
     Design-Entwurf) - Text unten links, ein Schriftgewicht, keine Icons mehr. */
  .home-grid-4{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .hg-tile{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:120px;
    display:flex;align-items:flex-end;padding:14px;isolation:isolate;
    background:#1A1D24;cursor:pointer}
  .hg-tile.glass{background:transparent;}
  /* Breite Kachel über beide Rasterspalten (Spieler:innen-Suche) - flacher als die
     Vierergruppe darüber, damit sie diese ergänzt statt mit ihr zu konkurrieren. Bewusst
     ohne Foto (siehe HTML-Kommentar), deshalb eigene, ruhige Fläche statt Verlauf/Korn. */
  .hg-tile.wide{grid-column:1 / -1;min-height:72px;align-items:center}
  .search-bg{background:#1A1D24}
  .search-bg .hg-tile-label{color:rgba(255,255,255,.9)}

  /* ===== Neuer Beitrag (nur für Club-Beauftragte sichtbar) ===== */
  .feed-new-post-btn{width:100%;margin-bottom:12px}
  .feed-composer{margin-bottom:14px;display:flex;flex-direction:column;gap:14px}
  /* Jedes Eingabefeld als eigener Block mit Label darüber - vorher stand das Label nur für
     die Club-Auswahl, Titel/Text hatten keine erkennbare Beschriftung außer dem Platzhalter. */
  .feed-composer .field{display:flex;flex-direction:column;gap:5px}
  .feed-composer .field label{font-size:12px;font-weight:700;color:var(--ink-soft)}
  .feed-composer select,
  .feed-composer input[type="text"]{width:100%;padding:9px 10px;border-radius:10px;
    background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--ink);font-size:13px}
  .feed-composer textarea{width:100%;padding:11px;border-radius:12px;background:rgba(255,255,255,.05);
    border:1px solid var(--glass-border);color:var(--ink);font-family:'Inter';font-size:14px;
    resize:vertical;min-height:64px}
  .feed-composer-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .feed-composer-photo-btn{width:100%;text-align:center;justify-content:center;cursor:pointer}
  #feedComposerSubmit,#feedComposerCancel{flex:1;min-width:100px}

  /* Vorschau: eigener, sichtbar abgesetzter Rahmen, damit klar ist "das hier ist eine Vorschau,
     kein bereits gepostetes Element". Die Karte darin selbst ist die UNVERÄNDERTE .feed-post -
     dieselbe Klasse, dasselbe Aussehen wie im echten Feed. */
  .feed-composer-preview-wrap{border:1px dashed var(--glass-border);border-radius:var(--r-lg);
    padding:12px;background:rgba(255,255,255,.02)}
  .feed-composer-preview-label{font-size:11px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
  .feed-composer-preview-wrap .feed-post{margin-bottom:0;cursor:default}

  /* ===== Like & Kontakt an jedem Beitrag ===== */
  .fp-like{flex:none;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
    background:transparent;border:1px solid var(--glass-border);cursor:pointer;
    font-family:'Inter';font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .fp-like svg{width:15px;height:15px;stroke:var(--ink-soft);fill:none;stroke-width:1.8}
  .fp-like.on{color:#fff;background:var(--grad);border-color:transparent}
  .fp-like.on svg{stroke:#fff;fill:#fff}
  .fp-like:disabled{opacity:.6;cursor:default}
  .fp-contact{flex:none;padding:6px 12px;border-radius:999px;background:transparent;
    border:1px solid var(--glass-border);cursor:pointer;
    font-family:'Inter';font-size:12.5px;font-weight:700;color:var(--accent-bright)}

  /* ===== Kommentare ===== */
  .fp-comments-toggle{flex:none;display:flex;align-items:center;gap:6px;padding:6px 12px;
    border-radius:999px;background:transparent;border:1px solid var(--glass-border);cursor:pointer;
    font-family:'Inter';font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-left:auto}
  .fp-comments-toggle svg{width:14px;height:14px;stroke:var(--ink-soft);fill:none;stroke-width:1.8}
  .fp-comments{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-faint)}
  .fp-comment{padding:8px 0}
  .fp-comment-author{font-family:'Inter';font-weight:700;font-size:12.5px;color:var(--ink)}
  .fp-comment-text{font-size:13px;line-height:1.45;color:var(--ink);margin-top:2px;white-space:pre-wrap}
  .fp-comment-meta{font-size:11px;color:var(--ink-soft);margin-top:3px;display:flex;gap:6px;align-items:center}
  .fp-comment-reply-link{background:none;border:none;padding:0;font-size:11px;font-weight:700;
    color:var(--accent-bright);cursor:pointer}
  .fp-comment-replies{margin-left:18px;border-left:2px solid var(--line-faint);padding-left:10px;margin-top:4px}
  .fp-comment-input-row,.fp-reply-input-row{display:flex;gap:8px;align-items:center;margin-top:8px}
  .fp-comment-input-row input,.fp-reply-input-row input{flex:1;min-width:0;padding:8px 12px;
    border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
    color:var(--ink);font-size:13px}
  .fp-comment-send{flex:none;width:32px;height:32px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;cursor:pointer;background:var(--grad);border:none}
  .fp-comment-send svg{width:15px;height:15px;fill:#fff;stroke:none}

  /* ===== Club-Profil: Reiterleiste ===== */
  /* Eigene Gestaltung NUR für die Club-Profilseite, statt der Pillen-Optik von .chat-filter
     (die bleibt für Chats/Feed-Filter unverändert). Nach LinkedIn-Vorbild: KEINE Trennlinien
     zwischen den Reitern UND keine Trennlinie unter der ganzen Leiste mehr - nur der aktive
     Reiter selbst wird fett in Blau dargestellt, mit einer kräftigen blauen Unterstreichung
     direkt darunter. Nicht-aktive Reiter bleiben bewusst in normaler Schriftstärke, damit sich
     die Auswahl klar abhebt statt dass "alles fett" den Unterschied wieder verwischt. */
  #clubProfileTabs{display:flex;gap:0;margin:16px 0 14px;overflow-x:visible;padding:0}
  #clubProfileTabs .chat-filter{flex:1;min-width:0;border-radius:0;
    border:none;border-bottom:3px solid transparent;
    padding:11px 3px;text-align:center;white-space:normal;line-height:1.25;
    font-size:11.5px;font-weight:500;background:transparent;color:var(--ink-soft)}
  #clubProfileTabs .chat-filter.on{background:transparent;color:var(--accent-bright);
    font-weight:800;border-bottom-color:var(--accent-bright)}
  .feed-my-club-btn{width:100%;margin-bottom:14px}

  /* ===== WhatsApp-Zeilen: EINE durchgehende Liste (keine einzelnen Kacheln), Zeilen durch
     eine feine Linie getrennt - exakt dieselbe Stärke/Farbe wie der Kachel-Rand sonst in der
     App (1px, var(--glass-border)), damit es sich optisch einfügt statt eine neue Randstärke
     einzuführen. Foto links (oder WhatsApp-Symbol als Platzhalter), Titel + Untertitel Mitte,
     Drei-Punkte-Menü rechts (nur für Beauftragte). Ganze Zeile ist eine Schaltfläche. */
  /* Vorher stand ein Rahmen um die GESAMTE Liste (wie eine große Kachel) - jetzt nur noch
     die Trennstriche zwischen den einzelnen Zeilen, kein äußerer Rahmen mehr. */
  .club-wa-list{}
  .club-wa-row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;
    background:none;border:none;border-bottom:1px solid var(--glass-border);text-align:left;
    cursor:pointer;text-decoration:none;position:relative}
  .club-wa-row:last-child{border-bottom:none}
  .club-wa-row.empty{cursor:pointer}
  .club-wa-photo{flex:none;width:42px;height:42px;border-radius:10px;background-size:cover;
    background-position:center;background-color:rgba(37,211,102,.12);
    display:flex;align-items:center;justify-content:center}
  .club-wa-photo svg{width:22px;height:22px;stroke:none;fill:#25D366}
  .club-wa-body{flex:1;min-width:0}
  .club-wa-title{font-family:'Inter';font-weight:700;font-size:14px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .club-wa-sub{font-size:12px;color:#25D366;font-weight:600;margin-top:1px}
  .club-wa-empty-label{font-size:13px;color:var(--ink-soft);font-style:italic}
  .club-wa-menu-btn{flex:none;width:30px;height:30px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;background:rgba(255,255,255,.06);
    border:1px solid var(--glass-border);cursor:pointer;color:var(--ink-soft)}
  .club-wa-menu-btn svg{width:15px;height:15px}

  /* ===== Training-Reiter (dasselbe Grundmuster wie WhatsApp, siehe .club-wa-*) ===== */
  /* WICHTIG: .club-wa-row ist als HORIZONTALE Zeile aufgebaut (reicht für WhatsApp, dort gibt
     es nur eine Ebene: Foto/Titel/Menü nebeneinander). Der Trainer-Reiter hat zusätzlich die
     Kontakt-Buttons-Zeile DARUNTER - ohne diese Korrektur würde die geerbte horizontale
     Ausrichtung versuchen, Hauptzeile UND Kontakt-Buttons-Zeile nebeneinander statt
     übereinander zu zwängen, wodurch das Drei-Punkte-Menü in die nächste Zeile rutschte. */
  .trainer-row{display:flex;flex-direction:column;align-items:stretch}
  /* Trainer-Foto: neutrale Akzentfarbe statt des WhatsApp-Grüns, sonst identisch */
  .trainer-row .club-wa-photo{background-color:rgba(255,255,255,.08)}
  .trainer-row .club-wa-photo svg{fill:none;stroke:var(--ink-soft);stroke-width:1.8}
  .trainer-row-main{display:flex;align-items:center;gap:12px;width:100%}
  .trainer-contact-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .trainer-contact-btn{flex:none;padding:7px 14px;font-size:12.5px}
  .trainer-info-tile{padding:14px}
  .trainer-search-list{display:flex;flex-direction:column;gap:6px;margin:-4px 0 10px}
  .trainer-search-row{padding:10px 12px;font-size:13.5px;font-weight:600;cursor:pointer}
  #trainerLinkedHint{margin:-4px 0 10px;color:#2f9e44}
  #trainerLinkedHint a{color:var(--accent-bright);text-decoration:none}

  /* ===== Club-Seite bearbeiten (Sheet) ===== */
  /* ===== Bild-Zuschnitt (Verschieben & Zoomen) ===== */
  .cropper-overlay{position:fixed;inset:0;z-index:970;display:flex;align-items:center;
    justify-content:center;background:rgba(0,0,0,.75);opacity:0;transition:opacity .18s}
  .cropper-overlay.open{opacity:1}
  .cropper-card{background:var(--bg-2);border-radius:20px;padding:20px;
    border:1px solid var(--glass-border);max-width:340px;width:calc(100% - 32px)}
  .cropper-title{font-family:'Inter';font-weight:800;font-size:15px;color:var(--ink);
    text-align:center;margin-bottom:14px}
  .cropper-viewport{position:relative;overflow:hidden;margin:0 auto;border-radius:12px;
    background:#000;touch-action:none;cursor:grab}
  .cropper-viewport.round{border-radius:50%}
  .cropper-viewport img{position:absolute;top:50%;left:50%;max-width:none;
    transform-origin:center center;user-select:none;-webkit-user-drag:none}
  .cropper-card input[type="range"]{width:100%;margin:16px 0}
  .cropper-actions{display:flex;gap:8px}
  .cropper-actions .btn{flex:1;min-width:0}

  .club-edit-sheet{position:fixed;inset:0;z-index:950;display:flex;align-items:flex-end;
    opacity:0;transition:opacity .18s}
  .club-edit-sheet.open{opacity:1}
  .club-edit-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
  .club-edit-card{position:relative;width:100%;max-height:82vh;overflow-y:auto;
    background:var(--bg-2);border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));
    border:1px solid var(--glass-border);border-bottom:none}
  .club-edit-card h2{font-family:'Inter';font-weight:800;font-size:17px;margin:0 0 14px;color:var(--ink)}
  .club-edit-card label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin:12px 0 6px}
  .club-edit-card textarea{width:100%;padding:11px;border-radius:12px;background:rgba(255,255,255,.05);
    border:1px solid var(--glass-border);color:var(--ink);font-family:'Inter';font-size:14px;resize:vertical}

  /* Turnier-Import-Auswahlliste (siehe openTournamentImportSheet) */
  .ti-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}
  .ti-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;
    background:rgba(255,255,255,.04);border:1px solid var(--glass-border)}
  .ti-row input[type="checkbox"]{flex:none;width:19px;height:19px}
  .ti-row-text{display:flex;flex-direction:column;min-width:0}
  .ti-row-name{font-weight:700;color:var(--ink);font-size:14px}
  .ti-row-date{font-size:12px;color:var(--ink-soft)}
  .ti-row-done{opacity:.5}

  /* ===== Club-Feed ===== */
  .feed-post{border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:14px;
    margin-bottom:12px;background:var(--card-bg);cursor:pointer}
  .feed-post-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
  .feed-avatar{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-family:'Inter';font-weight:800;font-size:15px;color:#fff;
    background:rgba(255,255,255,.12)}
  .feed-avatar.padivo{background:var(--grad)}
  /* Echtes Logo, sobald eines hochgeladen wurde - der Buchstabe bleibt nur der Platzhalter,
     solange noch keins gesetzt ist (siehe feedPostHtml: logoUrl leer -> Buchstabe, sonst Bild). */
  .feed-avatar.has-img{background-size:cover;background-position:center}
  .feed-post-meta{min-width:0;display:flex;flex-direction:column}
  .fp-name{font-family:'Inter';font-weight:800;font-size:14.5px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fp-sub{font-size:11.5px;color:var(--ink-soft)}
  .feed-post-title{font-family:'Inter';font-weight:800;font-size:16px;color:var(--ink);margin-bottom:4px}
  .feed-post-text{font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap}
  .feed-post-photo{margin-top:10px;height:190px;border-radius:12px;
    background-size:cover;background-position:center;background-color:var(--fill-soft)}
  .feed-post-foot{display:flex;align-items:center;gap:12px;margin-top:10px;
    padding-top:9px;border-top:1px solid var(--line-faint)}

  /* ===== Club-Profil ===== */
  /* Kopfbereich wie bei LinkedIn: Banner über die volle Breite, rundes Logo überlappt den
     unteren Rand des Banners. Ohne eigenes Banner läuft eine Padivo-Welle im Marken-Verlauf -
     nie ein leerer/grauer Balken, auch bevor ein Club sich ein eigenes Bild ausgesucht hat. */
  .club-banner-wrap{position:relative;margin:0 -10px 44px}
  .club-banner{height:160px;background-size:cover;background-position:center;
    background-color:var(--fill-soft)}
  .club-banner.default-wave{background-image:
    radial-gradient(120% 100% at 15% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(120deg, var(--blue), var(--magenta) 65%, var(--blue))}
  .club-logo-wrap{position:absolute;left:16px;bottom:-36px;width:88px;height:88px}
  .club-logo{width:88px;height:88px;border-radius:50%;background-size:cover;
    background-position:center;background-color:var(--bg-1);
    border:4px solid var(--bg-2);display:flex;align-items:center;justify-content:center}
  .club-logo-fallback{font-family:'Inter';font-weight:800;font-size:30px;color:#fff}
  /* Bearbeiten-Symbole für Banner/Logo - dieselbe gedämpfte Optik wie die Glocke und die
     anderen Kopfleisten-Buttons (siehe .header-icon-btn), nur mit eigener Positionierung,
     da sie über dem Banner/Logo schweben statt in der Kopfleiste zu stehen. */
  .club-banner-edit,.club-logo-edit{position:absolute;display:flex;align-items:center;
    justify-content:center;background:rgba(255,255,255,.08);border:2px solid var(--bg-2);
    cursor:pointer}
  .club-banner-edit{right:12px;bottom:12px;width:36px;height:36px;border-radius:50%}
  .club-logo-edit{right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%}
  .club-banner-edit svg,.club-logo-edit svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2}
  .club-logo-edit svg{width:13px;height:13px}
  .club-head-body{padding:10px 4px 4px}
  /* Name und Folgen-Pille in EINER Zeile (vorher: Pille als eigene, volle Zeile darunter) */
  .club-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

  .club-head-name{font-family:'Inter';font-weight:800;font-size:19px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .club-head-sub{font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
  .club-head-addr{display:block;font-size:12.5px;color:var(--accent-bright);
    margin-top:7px;text-decoration:underline}
  /* Kleine Pille statt voller Breitenschaltfläche - LinkedIn-artig. Bewusst eigene Klasse statt
     .btn/.btn.secondary: diese sind für ausfüllende Haupt-Aktionen gedacht (volle Breite,
     großer Innenabstand), hier soll es dagegen unauffällig neben dem Namen sitzen. */
  .club-follow-pill{flex:none;padding:7px 18px;border-radius:999px;
    background:transparent;border:1.5px solid var(--accent-bright);color:var(--accent-bright);
    font-family:'Inter';font-weight:700;font-size:13px;cursor:pointer;width:auto}
  .club-follow-pill.on{background:var(--accent-bright);color:#fff;border-color:var(--accent-bright)}
  .club-follow-pill:active{opacity:.7}
  /* Beide Kopf-Buttons (Folgen + Nachricht) nebeneinander */
  .club-head-actions{flex:none;display:flex;gap:8px;align-items:center}

  /* Info-Reiter: Adresse/Courts als klare Label-Wert-Zeilen statt Fließtext */
  .club-info-details{gap:10px}
  .club-info-row{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink)}
  .club-info-row + .club-info-row{margin-top:10px}
  .club-info-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft)}

  /* Bilder in fester Kategorien-Reihe: waagerecht scrollbar statt Raster, damit auch bei nur
     zwei hinterlegten Bildern kein halbleeres Gitter entsteht. */
  .club-photos{display:flex;gap:9px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;
    scrollbar-width:none}
  .club-photos::-webkit-scrollbar{display:none}
  .club-photo{flex:none;position:relative;width:172px;height:118px;border-radius:12px;
    background-size:cover;background-position:center;background-color:var(--fill-soft)}
  .club-photo span{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;
    background:rgba(0,0,0,.55);color:#fff;font-family:'Inter';font-size:10.5px;font-weight:700}
  /* Foto-Layer: eigene, absolut positionierte Ebene statt Hintergrund direkt auf .hg-tile,
     damit beim Antippen (.hg-tile:active) NUR das Foto zoomt, nicht der Verlauf/Text/Korn
     darüber. Je Kachel wird unten nur noch das Bild zugewiesen - Bilder liegen unter /img/,
     nie base64 in index.html eingebettet (siehe Querverweis-Tabelle "Bild-Zuschnitt"/
     Dateigröße-Learning aus Session 6: 1.338KB -> 845KB nach Auslagerung). */
  .hg-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
    transition:transform .35s ease}
  /* Dunkler Verlauf oben drüber - hält die Schrift lesbar, egal wie hell das Foto ist. */
  .hg-tile::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(8,10,14,.90) 0%,rgba(8,10,14,.52) 46%,rgba(8,10,14,.22) 100%)}
  /* Feines Korn nimmt den glatten Digital-Look von reinen Fotos. */
  .hg-tile::before{content:"";position:absolute;inset:0;z-index:2;opacity:.05;pointer-events:none;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
  .hg-tile:active .hg-bg{transform:scale(1.03)}
  .hg-tile-label{font-family:'Inter';font-weight:700;font-size:16px;color:#fff;
    letter-spacing:-.015em;line-height:1.15;position:relative;z-index:3}
  .hg-tile.wide .hg-tile-label{font-size:15px}
  .hg-tile.join-bg .hg-bg{background-image:url(img/tile-matches.jpg)}
  .hg-tile.events-bg .hg-bg{background-image:url(img/tile-events.jpg)}
  .hg-tile.rankings-bg .hg-bg{background-image:url(img/tile-rankings.jpg)}
  .hg-tile.training-bg .hg-bg{background-image:url(img/tile-training.jpg)}

  /* ===== Ranglisten-Screen ===== */
  .rank-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:12px}
  .rank-tab{flex:none;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--ink);opacity:.65}
  .rank-tab.on{background:var(--grad);color:#fff;opacity:1;border-color:transparent}
  .rank-filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
  .rank-filters select{flex:1;min-width:120px}
  /* Sticky Filterleiste Events: bleibt beim Scrollen oben, kompakter Blur-Hintergrund statt Card,
     damit sie nicht wie eine weitere Tile wirkt. */
  /* Erste Filterzeile: Schieberegler links (nimmt den Platz ein), Zurücksetzen rechts als Symbol */
  .ev-filter-row1{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .ev-filter-row1 .vis-toggle{flex:1;min-width:0}
  .ev-reset-btn{flex:none;width:32px;height:32px;border-radius:50%;display:none;
    align-items:center;justify-content:center;cursor:pointer;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
  .ev-reset-btn.show{display:flex}
  .ev-reset-btn svg{width:15px;height:15px;stroke:var(--ink-soft);fill:none;stroke-width:2.2;stroke-linecap:round}
  .ev-reset-btn:active{opacity:.6}

  /* Die Filterleiste braucht die Schieberegler deutlich niedriger als das große Vorbild
     (.vis-toggle ist dort 50px hoch, für Friends/Competition mit großer Schrift gedacht) -
     hier reicht eine kompakte Zeile, die neben Zurücksetzen-Knopf und weiteren Filtern nicht
     dominiert. */
  .ev-filter-bar .vis-toggle{height:38px;padding:3px;margin-bottom:0}
  .ev-filter-bar .vis-opt .vt{font-size:12.5px}

  /* Niveau-Pille steht jetzt für sich allein (kein Teil der Scope-Zeile mehr) - eigene Zeile,
     linksbündig statt über die volle Breite, damit sie nicht wie ein weiterer Schieberegler
     wirkt, sondern klar als Ein/Aus-Filter erkennbar bleibt. */
  .ev-niveau-standalone{display:inline-flex;margin-bottom:10px}

  /* Datum-wählen-Tab: sitzt jetzt UNTER dem Zeitraum-Schieberegler statt als dritte Option
     daneben - dadurch bleibt der Schieberegler ein sauberer Zweiklang. */
  #evfDateRangeTab{display:inline-flex}
  #evfDateRangeTab.on{background:var(--grad);color:#fff;opacity:1;border-color:transparent}

  /* Hinweis, dass ein vergangener Zeitraum automatisch abgeschlossene Events mit einblendet -
     ersetzt den früheren eigenen Umschalter dafür. */
  .ev-past-hint{font-family:'Inter';font-size:11.5px;font-weight:600;color:var(--accent-bright);
    text-align:center;margin:2px 0 8px}

  .ev-filter-bar{position:sticky;top:var(--head-h);z-index:5;margin:0 -10px 14px;padding:10px 10px 12px;background:var(--bg-1);border-bottom:1px solid var(--glass-border)}
  .ev-pill-swipe{touch-action:pan-y}

  /* ===== Daten-Tabelle: flach auf dem Hintergrund, sticky Header, dünne Trennlinien =====
     Wiederverwendet für Ranglisten, Event-Teilnehmerlisten und Mini-Liga-Tabelle. */
  .dt-wrap{border:1px solid var(--glass-border);border-radius:16px;overflow:hidden;margin-bottom:14px}
  .dt-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--card-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border)}
  .dt-head span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft)}
  .dt-body{background:var(--card-bg-flat, transparent)}
  .dt-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--glass-border);cursor:default}
  .dt-row.clickable{cursor:pointer}
  .dt-row.clickable:active{opacity:.7}
  .dt-row:last-child{border-bottom:none}
  .dt-rank{font-weight:800;font-size:14px;color:var(--ink);flex:none;text-align:center}
  .dt-rank.hl{color:var(--magenta)}
  .dt-name-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
  .dt-name{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .dt-name-sub{font-size:11.5px;color:var(--ink-soft);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dt-col{flex:none;text-align:center;font-size:12.5px;color:var(--ink);font-weight:600}
  .dt-col.hl{font-weight:800;color:var(--magenta)}
  .dt-status{flex:none;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
  .dt-status.accepted{color:#2f9e44;background:rgba(47,158,68,.12)}
  .dt-status.pending{color:#D4A017;background:rgba(212,160,23,.12)}
  /* Kleiner Entfernen-Button direkt in der Teilnehmerzeile (nur Turnierleiter) */
  .dt-remove-btn{flex:none;font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;cursor:pointer;
    color:#e5484d;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.3)}
  .dt-remove-btn:active{background:rgba(229,72,77,.22)}

  /* ===== Turnier-Einladung (Dashboard) & Turnierleiter-Bereich ===== */
  .event-invite-card{
    position:relative;background:
      linear-gradient(160deg, rgba(20,60,120,.85), rgba(10,25,55,.9)),
      linear-gradient(135deg, #0a1830 0%, #123a6e 100%);
    border:1px solid rgba(120,190,255,.3);color:#fff;
  }
  .event-invite-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#bcdcff;margin-bottom:6px}
  .event-invite-name{font-family:'Inter';font-weight:800;font-size:15px;color:#fff;margin-bottom:2px}
  .event-invite-sub{font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:10px}
  .event-invite-actions{display:flex;gap:8px}
  .event-invite-actions button{flex:1;padding:9px 0;border-radius:12px;font-size:13px;font-weight:700;border:none;cursor:pointer}
  .event-invite-actions .ei-yes{background:#fff;color:#123a6e}
  .event-invite-actions .ei-no{background:rgba(255,255,255,.14);color:#fff}
  /* Einladender Partner mit Bild + Niveau-Pille (gleiche Bausteine wie bei Match-Einladungen) */
  .ei-partner{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
  .ei-partner .mc-player{flex:none;width:auto}
  .ei-partner-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.85)}
  /* Derselbe Block im Teilnehmer-Tab des Events - dort auf hellem Untergrund */
  .ev-partner-invite{background:transparent;border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:14px;margin-bottom:14px}
  .ev-partner-invite-head{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:8px}
  .ev-partner-invite .ei-partner-txt{color:var(--ink)}
  .ev-partner-invite .event-invite-actions .ei-yes{background:var(--grad);color:#fff}
  .ev-partner-invite .event-invite-actions .ei-no{background:var(--glass);color:var(--ink-soft);border:1px solid var(--glass-border)}

  .organizer-block{background:transparent;border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:16px;margin-bottom:12px}
  .organizer-block .section-heading{margin:0 0 10px}
  .organizer-block h2{color:#D4A017 !important}
  .organizer-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-faint)}
  .organizer-row:last-child{border-bottom:none}
  /* ==================== Niveau-Kachel (Skala statt Ring) ====================
     Das Niveau ist eine Position zwischen 0 und 7, kein Anteil - deshalb ein gerader
     Strahl statt eines Kreises. Der gestrichelte Punkt markiert den Stand vor der
     letzten Veränderung, der schmale Balken unten die Niveau-Realität. */
  /* Klassisches Kartendesign wie .mc: transparent mit feinem Rand, keine Glasfüllung,
     kein Schatten - die Kachel soll sich nicht vom Rest der Oberfläche abheben. */
  .nv-card{border-radius:var(--r-lg);border:1px solid var(--line-card);background:transparent;
    box-shadow:none;padding:18px;margin-bottom:18px}
  .nv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
  .nv-left{min-width:0}
  .nv-num{display:block;font-family:'Inter';font-size:50px;font-weight:800;line-height:1;
    letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
  .nv-bandrow{display:flex;align-items:center;gap:7px;margin-top:7px}
  .nv-band{font-family:'Inter';font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink-soft);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Kleiner Info-Knopf: gedämpfter als der blaue Standardknopf, damit er die Zahl nicht überstrahlt */
  .nv-info{width:17px;height:17px;border-radius:50%;flex:none;cursor:pointer;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--line-card)}
  .nv-info svg{width:11px;height:11px;fill:var(--ink-soft);stroke:none}
  .nv-info:active{opacity:.6}

  /* Zwei Kennzahlen rechts, untereinander */
  .nv-metrics{flex:none;text-align:right}
  .nv-k{font-family:'Inter';font-size:11.5px;font-weight:500;color:var(--ink-soft);line-height:1.4}
  .nv-v{font-family:'Inter';font-size:17px;font-weight:800;line-height:1.25;color:var(--ink);
    font-variant-numeric:tabular-nums}
  /* Auf-/Abwärts modusabhängig: helle Töne auf Dunkel, dunkle auf Creme - beide über 4,5:1 */
  .nv-v.up{color:#3DDC97}
  .nv-v.down{color:#FF7A7A}
  .nv-v.flat{color:var(--ink-soft)}
  .nv-gap{height:9px}

  /* Der Strahl */
  .nv-beam{position:relative;height:12px;border-radius:999px;background:var(--fill-soft)}
  .nv-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
    background:linear-gradient(90deg,var(--blue),#8B2CD0 58%,var(--magenta));transition:width .45s ease}
  .nv-ghost{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
    transform:translate(-50%,-50%);border:1.5px dashed var(--ink-soft);opacity:.7}
  .nv-you{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
    transform:translate(-50%,-50%);background:var(--magenta);
    border:3.5px solid var(--bg-2);box-shadow:0 0 0 1.5px var(--magenta);transition:left .45s ease}
  .nv-ticks{position:relative;height:16px;margin-top:7px}
  .nv-ticks .nv-lbl{position:absolute;transform:translateX(-50%);font-family:'Inter';
    font-size:9.5px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}

  /* Niveau-Realität */
  .nv-real{display:flex;align-items:center;gap:9px;margin-top:16px}
  .nv-real-k{font-family:'Inter';font-size:11.5px;font-weight:500;color:var(--ink-soft);flex:none}
  .nv-bar{flex:1;min-width:0;height:5px;border-radius:999px;background:var(--fill-soft);
    position:relative;overflow:hidden}
  .nv-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:#69DB7C;
    transition:width .45s ease}
  .nv-real-v{font-family:'Inter';font-size:11.5px;font-weight:800;color:var(--ink);flex:none;
    font-variant-numeric:tabular-nums}
  @media (prefers-reduced-motion: reduce){
    .nv-fill,.nv-you,.nv-bar i{transition:none}
  }

  /* ==================== Stammrunde ====================
     Dauerhafte Gruppe ohne Enddatum. Optisch bewusst zurückhaltend - sie ist kein Turnier,
     sondern der Alltag der Runde. */
  .mc-pill.stamm-pill{background:rgba(46,82,255,.18);color:#8FA3FF;box-shadow:0 0 0 1px rgba(46,82,255,.32)}
  .sr-note{font-size:12.5px;line-height:1.55;color:var(--ink-soft);padding:12px 14px;margin-bottom:14px;
    border-radius:12px;border:1px solid var(--line-soft)}
  .sr-val{flex:none;font-size:13px;font-weight:700;color:var(--ink);margin-left:10px;
    max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sr-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
    font-size:10.5px;font-weight:800;letter-spacing:.02em;
    background:rgba(46,82,255,.16);color:#8FA3FF}
  /* Hinweiszeile in der Match-Maske, wenn aus einer Runde heraus erstellt wird */
  .sr-context{padding:11px 14px;margin:0 0 16px;border-radius:12px;font-size:12.5px;line-height:1.5;
    font-weight:600;color:var(--ink);background:rgba(46,82,255,.12);border:1px solid rgba(46,82,255,.28)}
  /* Gesperrter Umschalter: privat erzwingt Friends, Competition ist dann nicht wählbar */
  .vis-toggle.locked{opacity:.55;pointer-events:none}

  /* Stammrunden-Tabelle: kompakte Liste statt echter Tabelle, damit sie auf schmalen
     Displays nicht umbricht. Zahlenspalten mit tabellarischen Ziffern für saubere Kanten. */
  .sr-table{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
  .sr-trow{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
    border:1px solid var(--line-soft);font-size:13.5px;color:var(--ink)}
  .sr-trow.top{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
  .sr-trow.idle{opacity:.55}
  .sr-thead{border:none;padding:2px 12px 4px;font-size:10.5px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .sr-pos{flex:none;width:22px;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .sr-nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sr-col{flex:none;width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
  .sr-col.pts{width:38px;font-weight:800;color:var(--ink)}
  .sr-thead .sr-col{color:var(--ink-soft)}

  /* Auszeichnungen als kleine Karten nebeneinander */
  .sr-awards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:6px}
  .sr-award{padding:11px 12px;border-radius:12px;border:1px solid var(--line-soft)}
  .sr-award-title{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--accent-bright);margin-bottom:5px}
  .sr-award-name{font-size:13.5px;font-weight:700;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sr-award-desc{font-size:11.5px;line-height:1.4;color:var(--ink-soft);margin-top:2px}

  /* Auswahl der vier Personen für einen Vorschlag */
  .sr-picks{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 4px}
  .sr-pick{padding:8px 13px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:700;
    color:var(--ink);background:transparent;border:1px solid var(--line-card)}
  .sr-pick.on{color:#fff;border-color:transparent;background:linear-gradient(90deg,var(--blue),var(--accent))}
  .sr-pick:active{opacity:.7}

  /* Ein Vorschlag: Teams, Stärkeunterschied, Begründungen. Anklickbar, um ihn statt der
     Empfehlung auszuwählen - der blaue Rand folgt dann der Auswahl, nicht mehr fix Option 1. */
  .sr-sugg{position:relative;padding:14px;border-radius:14px;margin-bottom:9px;cursor:pointer;
    border:1px solid var(--line-soft);transition:border-color .15s}
  .sr-sugg:active{opacity:.85}
  .sr-sugg.picked{border-color:var(--accent-bright);box-shadow:0 0 0 1px var(--accent-bright)}
  .sr-sugg-flag{position:absolute;top:-8px;left:12px;padding:2px 9px;border-radius:999px;
    font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;
    background:linear-gradient(90deg,var(--blue),var(--accent))}
  .sr-sugg-teams{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink)}
  .sr-sugg-teams > span{flex:1;min-width:0}
  .sr-vs{flex:0 0 auto !important;font-size:11px;font-weight:800;color:var(--ink-soft)}
  .sr-sugg-gap{font-size:11.5px;color:var(--ink-soft);margin-top:6px;font-variant-numeric:tabular-nums}
  .sr-sugg-why{margin:8px 0 0;padding-left:16px;font-size:12px;line-height:1.55;color:var(--ink-soft)}
  .sr-sugg-why li{margin-bottom:2px}

  /* ==================== Club-Karte auf der Startseite ==================== */
  /* Deutlich mehr Höhe als vorher (280px) - die Karte war zu gestaucht, um auf einen Blick
     mehrere Standorte plus Kontext zu zeigen. */
  .map-tile{position:relative;height:420px;border-radius:16px;overflow:hidden;margin-bottom:18px;
    border:1px solid var(--line-card);background:var(--fill-faint)}
  #clubMap{position:absolute;inset:0;width:100%;height:100%;background:transparent}
  /* Dark-Mode-Trick auf normalen OSM-Kacheln: Bild invertieren und den Farbton um 180°
     zurückdrehen. Wasser/Grün landen dadurch wieder bei plausiblen Tönen, alles andere wird
     dunkel - ohne von einem zweiten, möglicherweise blockierten Kartenanbieter abhängig zu
     sein (siehe MAP_TILE_OSM). Nur im Night-Modus aktiv, siehe initClubMap. */
  #clubMap.map-dark-invert .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}
  /* Die eigenen Overlays (Pins, Popups, Zoom-Regler) sollen von der Umkehrung unberührt
     bleiben - sonst würde z.B. das magenta Pin-P plötzlich grün erscheinen. */
  #clubMap.map-dark-invert .leaflet-marker-pane,
  #clubMap.map-dark-invert .leaflet-popup-pane,
  #clubMap.map-dark-invert .leaflet-control{filter:none}
  .map-placeholder{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
  .map-placeholder svg{width:26px;height:26px;stroke:var(--ink-soft);fill:none;stroke-width:1.8}

  /* Standort-Knopf sitzt jetzt unter der Suchleiste, nicht mehr am unteren Rand -
     dort überschnitt er sich sonst mit den Popups großer Städte-Cluster. */
  .map-locate{position:absolute;right:10px;top:66px;z-index:650;width:38px;height:38px;
    border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
    background:var(--bg-2);border:1px solid var(--line-card);box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .map-locate svg{width:17px;height:17px;stroke:var(--accent-bright);fill:none;stroke-width:2}
  .map-locate:active{opacity:.7}

  /* Suchleiste: Clubname oder Teil davon - schwebt oben über der Karte, wie man es von
     Karten-Apps kennt (siehe Referenz-Screenshot). Adresse bewusst NICHT durchsuchbar: die
     kennt niemand auswendig und sucht auch nicht danach - der Clubname ist der Suchbegriff,
     den Spieler:innen tatsächlich im Kopf haben. */
  .map-search-wrap{position:absolute;left:10px;right:56px;top:10px;z-index:650}
  .map-search-bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;
    border-radius:12px;background:var(--bg-2);border:1px solid var(--line-card);
    box-shadow:0 2px 10px rgba(0,0,0,.3)}
  .map-search-bar svg{flex:none;width:16px;height:16px;stroke:var(--ink-soft);fill:none;stroke-width:2}
  .map-search-bar input{flex:1;min-width:0;border:none;background:none;outline:none;
    font-family:'Inter';font-size:13.5px;color:var(--ink)}
  .map-search-bar input::placeholder{color:var(--ink-soft)}
  .map-search-results{margin-top:6px;max-height:220px;overflow-y:auto;border-radius:12px;
    background:var(--bg-2);border:1px solid var(--line-card);box-shadow:0 4px 14px rgba(0,0,0,.32);
    display:none}
  .map-search-results.open{display:block}
  .map-search-row{display:flex;flex-direction:column;gap:1px;padding:9px 12px;cursor:pointer;
    border-bottom:1px solid var(--line-faint)}
  .map-search-row:last-child{border-bottom:none}
  .map-search-row:active{background:var(--fill-soft)}
  .map-search-row .r-name{font-family:'Inter';font-size:13px;font-weight:700;color:var(--ink)}
  .map-search-row .r-city{font-family:'Inter';font-size:11px;color:var(--ink-soft)}
  .map-search-empty{padding:14px 12px;font-size:12px;color:var(--ink-soft);text-align:center}

  /* Pin im Markenstil: dasselbe schräge "P" wie im App-Logo (gleicher skewX-Winkel, gleicher
     Verlauf), statt eines generischen Kartennadel-Symbols. Blau in Ruhe, Magenta sobald an
     diesem Standort Matches offen sind - mit kleinem weißen Zähler-Kreis für die Anzahl. */
  .club-pin-wrap{background:none;border:none}
  .club-pin{position:relative;width:34px;height:40px;display:flex;align-items:flex-end;justify-content:center}
  .club-pin .p-letter{
    font-family:'Inter';font-weight:800;font-size:26px;line-height:1;
    transform:skewX(-7deg);text-shadow:0 2px 6px rgba(0,0,0,.4);
    background:linear-gradient(135deg,var(--accent-bright),var(--accent) 55%,var(--accent-deep));
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  }
  .club-pin.active .p-letter{
    background:linear-gradient(135deg,#F05FDA,var(--magenta) 60%,#B81FA0);
    -webkit-background-clip:text;background-clip:text;
  }
  .pin-count{position:absolute;top:-4px;right:-2px;min-width:16px;height:16px;padding:0 4px;
    border-radius:999px;background:#fff;color:var(--magenta);font-family:'Inter';font-size:9.5px;
    font-weight:800;display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,.35)}

  /* "Ich bin hier"-Punkt, dem üblichen Karten-Muster nachempfunden: pulsierender heller Ring
     um einen festen blauen Punkt. Erscheint erst NACH ausdrücklicher Standortfreigabe. */
  .me-dot-wrap{background:none;border:none}
  .me-dot{position:relative;width:20px;height:20px}
  .me-dot::before{content:"";position:absolute;inset:-8px;border-radius:50%;
    background:rgba(46,82,255,.28);animation:meDotPulse 2.2s ease-out infinite}
  .me-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--blue);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
  @keyframes meDotPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}}

  /* Popup-Inhalt */
  .leaflet-popup-content{margin:12px 14px;min-width:190px}
  .cp-name{font-family:'Inter';font-size:14.5px;font-weight:800;color:#1b1e26;margin-bottom:3px}
  .cp-sub{font-size:11.5px;line-height:1.45;color:#5b6270;margin-bottom:9px}
  .cp-link{display:block;width:100%;text-align:left;padding:0;margin-bottom:9px;background:none;
    border:none;cursor:pointer;font-family:'Inter';font-size:12.5px;font-weight:700;color:#2743E8}
  .cp-addr{display:block;font-size:11.5px;line-height:1.4;color:#2743E8;margin-bottom:6px;text-decoration:underline}
  .cp-gps{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#8B2CD0;
    margin-bottom:10px;background:none;border:none;padding:0;cursor:pointer}
  .cp-gps svg{width:12px;height:12px;stroke:#8B2CD0;fill:none;stroke-width:2.2}
  .cp-btn{display:block;width:100%;box-sizing:border-box;padding:9px;margin-bottom:6px;border-radius:10px;
    text-align:center;cursor:pointer;font-family:'Inter';font-size:12.5px;font-weight:700;
    color:#1b1e26;background:transparent;border:1px solid rgba(27,30,38,.22);text-decoration:none}
  .cp-btn.primary{color:#fff;border-color:transparent;background:linear-gradient(90deg,var(--blue),var(--accent))}
  .cp-btn:active{opacity:.75}

  .organizer-hint{margin-top:8px;font-size:12px;line-height:1.45;color:var(--ink-soft)}

  /* ===== Schmale Statuskacheln auf der Startseite ===== */
  .slim-tile{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 16px;margin:0 0 14px;
    border-radius:13px;border:1px solid var(--line-card);background:transparent;cursor:pointer}
  .slim-tile:active{opacity:.7}
  .slim-label{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .slim-chev{flex:none;font-size:17px;line-height:1;color:var(--ink-dim)}
  .slim-dot{display:none}
  .slim-count{flex:none;font-size:12px;font-weight:800;color:var(--ink)}
  /* Offene Aufgaben: rote Umrandung, die ruhig pulsiert */
  .slim-tile.alert{border-color:rgba(229,72,77,.85);animation:slimPulse 1.9s ease-in-out infinite}
  .slim-tile.alert .slim-label{color:#ff8a8d;font-weight:800}
  .slim-tile.alert .slim-chev{color:rgba(255,138,141,.7)}
  .slim-tile.alert .slim-dot{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:#e5484d}
  .slim-tile.alert .slim-count{color:#ff8a8d}
  @keyframes slimPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}
    50%{box-shadow:0 0 0 5px rgba(229,72,77,0)}
  }
  @media (prefers-reduced-motion: reduce){ .slim-tile.alert{animation:none} }

  /* ===== Ergebniseingabe direkt am Turnierbaum ===== */
  .fx-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 14px}
  .fx-round{font-size:15px;font-weight:800;color:var(--ink)}
  .fx-mode{font-size:12px;font-weight:700;color:var(--ink-soft)}
  .fx-teams{display:flex;flex-direction:column;gap:10px}
  .fx-team{display:flex;align-items:center;gap:10px}
  .fx-tname{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fx-inputs{display:flex;gap:6px;flex:none}
  .fx-num{width:46px;height:44px;text-align:center;font-size:16px;font-weight:800;color:var(--ink);background:var(--card-bg);border:1px solid var(--card-border);border-radius:11px}
  .fx-num:focus{outline:none;border-color:var(--accent)}
  .fx-actions{display:flex;gap:8px;margin-top:16px}
  .fx-save{flex:1;padding:12px;border-radius:12px;border:none;cursor:pointer;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--blue),var(--accent))}
  .fx-save:disabled{opacity:.5}
  .fx-cancel{padding:12px 16px;border-radius:12px;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink-soft);background:transparent;border:1px solid var(--card-border)}
  .fixture-score{flex:none;font-size:12.5px;font-weight:800;color:var(--ink);margin-left:8px;white-space:nowrap}

  /* ===== Platzierungsgruppen im Monrad-Baum ===== */
  .bm-group{margin-bottom:14px}
  .bm-group-head{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px 2px}

  /* ===== Endplatzierung ===== */
  .final-standings{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
  .fs-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--card-bg);border:1px solid var(--card-border)}
  .fs-row.top{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
  .fs-place{flex:none;width:26px;font-size:13px;font-weight:800;color:var(--ink-soft)}
  .fs-team{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fs-medal{flex:none;font-size:15px}
  .push-cta{margin:0 0 16px;padding:14px 16px;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
  .push-cta-head{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:4px}
  .push-cta-sub{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
  .push-cta-actions{display:flex;gap:8px;margin-top:12px}
  .push-cta-yes{flex:1;padding:9px 14px;border-radius:11px;border:none;cursor:pointer;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--blue),var(--accent))}
  .push-cta-no{padding:9px 14px;border-radius:11px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-soft);background:transparent;border:1px solid var(--card-border)}
  .push-cta-yes:active,.push-cta-no:active{opacity:.7}
  /* Dezente Variante am Seitenende, nachdem der Hinweis einmal weggetippt wurde */
  .push-cta.mini{margin:18px 0 4px;padding:9px 13px;border-radius:11px;background:transparent;
    border:1px solid var(--line-soft);box-shadow:none;cursor:pointer;display:flex;
    align-items:center;gap:8px}
  .push-cta.mini:active{opacity:.7}
  .push-cta.mini .push-cta-head{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
  .push-cta.mini .push-cta-head::after{content:"›";margin-left:6px;opacity:.6}
  .push-cta.mini .push-cta-sub,.push-cta.mini .push-cta-actions{display:none}
  .organizer-row.fixture-clickable{cursor:pointer}
  .organizer-row.fixture-clickable:active{opacity:.6}
  .fixture-chev{flex:none;color:var(--accent-bright);font-weight:800;font-size:16px}
  .organizer-row-main{flex:1;min-width:0;font-size:13.5px;color:var(--ink)}
  /* Freilos/Pause einer Runde - bewusst abgesetzt von den Match-Zeilen, damit auf einen Blick
     erkennbar ist, wer in dieser Runde nicht gespielt hat (auch in abgeschlossenen Runden). */
  .bye-row{display:flex;align-items:center;gap:8px;padding:9px 0;font-size:13px;color:var(--text-sub)}
  .bye-row .bye-tag{flex:none;display:inline-block;padding:3px 9px;border-radius:999px;background:var(--fill-soft);border:1px solid var(--glass-border);font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
  .bye-row .bye-names{flex:1;min-width:0;font-weight:600;color:var(--ink);word-break:break-word}
  .organizer-row-actions{display:flex;gap:6px;flex:none}
  .organizer-row-actions button{padding:7px 12px;border-radius:10px;font-size:12px;font-weight:700;border:none;cursor:pointer}
  .organizer-accept{background:#2f9e44;color:#fff}
  .organizer-reject{background:rgba(229,72,77,.15);color:#e5484d}

  /* Menüleiste: behält als EINZIGES Element bewusst den Glaskörper-Look (Blur + Verlauf + Innenglanz) */
  .nav{
    display:none;   /* .nav liegt jetzt AUSSERHALB von .app (siehe Markup-Kommentar dort) -
                        die Sichtbarkeit folgt darum nicht mehr automatisch aus der Eltern-
                        Anzeige, sondern wird hier explizit an den Login-Zustand gekoppelt. */
    position:fixed;left:50%;transform:translateX(-50%) translateZ(0);
    bottom:calc(16px + env(safe-area-inset-bottom,0));z-index:20;
    width:calc(100% - 32px);max-width:400px;
    align-items:stretch;background:linear-gradient(150deg, var(--glass-hi), var(--glass));
    backdrop-filter:blur(var(--glass-blur-px)) saturate(160%);
    -webkit-backdrop-filter:blur(var(--glass-blur-px)) saturate(160%);
    border:1px solid var(--glass-border);border-radius:30px;
    box-shadow:var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,0.18);
    isolation:isolate;
    /* Bekannter WebKit-Ruckler: position:fixed-Elemente können auf iOS während des
       dynamischen Ein-/Ausblendens der Safari-Werkzeugleiste beim Scrollen kurzzeitig
       falsch neu berechnet werden und wirken dadurch, als würden sie mit dem Inhalt
       mitscrollen. translateZ(0) + will-change zwingt das Element in eine eigene,
       hardwarebeschleunigte Ebene, die der Browser beim Scrollen konsistenter behandelt -
       der verbreitete Behelf gegen genau dieses Verhalten. */
    will-change:transform;
  }
  body.app-active .nav{display:flex}

  /* Globale Glocke: schwebt fest über dem Kopfbereich JEDER Seite (siehe Markup-Kommentar).
     z-index deutlich über .screen-head (60), damit sie nie darunter verschwindet.
     Der obere Abstand rechnet denselben Sicherheitsbereich mit wie .screen-head selbst - beide
     müssen zusammen wandern, wenn sich am Geräte-Rand (Notch/Dynamic Island) etwas ändert.
     Vertikal grob mittig zur Kopfzeile ausgerichtet: Kopfzeile ist ~14px Innenabstand + Titel-
     Zeilenhöhe + 14px, die Glocke ist 38px hoch - 9px Versatz zentriert sie näherungsweise. */
  .global-bell{display:none;position:fixed;
    top:calc(env(safe-area-inset-top,0px) + 9px); right:16px; z-index:70;
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
    align-items:center;justify-content:center;cursor:pointer}
  /* Vorher an body.app-active gebunden (überall sichtbar, solange eingeloggt) - dadurch
     überlagerte sich die Glocke mit bildschirmeigenen Funktionen an derselben Stelle
     (z.B. der Stumm-Schalter im Einzelchat). Jetzt nur noch auf den drei Hauptbildschirmen. */
  body.main-screen-view .global-bell{display:flex}
  .global-bell svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .global-bell:active{opacity:.7}
  /* Vorher der Marken-Verlauf (Blau-Magenta) - das ist aber die Farbe für positive/werbliche
     Elemente in der App. Zähler-Badges sind überall sonst klassisch rot (#e5484d - dieselbe
     Farbe wie bei negativen Trends, Ablehnungen, Last-Minute-Hinweisen), deshalb hier
     angeglichen statt eine eigene Sonderfarbe zu behalten. */
  .global-bell-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
    border-radius:999px;background:#e5484d;
    color:#fff;font-family:'Inter';font-size:10px;font-weight:800;
    display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-2)}
  .nav > *{flex:1 1 0;min-width:0;max-width:none}
  .nav button{
    flex:1 1 0;min-width:0;background:none;border:0;cursor:pointer;position:relative;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 0 7px;color:var(--text-sub);font-family:'Inter';font-size:11px;font-weight:700;
    overflow:visible;
  }
  /* Badge ist IMMER absolut positioniert und aus dem Flex-Fluss raus. Ein-/Ausblenden läuft über
     .on (opacity), NICHT über display - display:block hätte den Badge zu einem echten Flex-Item
     im spaltenweisen Button gemacht, was die Nav-Leiste in die Höhe zieht und den Punkt verschiebt. */
  .nav-badge{position:absolute;top:6px;left:calc(50% + 7px);width:9px;height:9px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 0 2px var(--bg-1);pointer-events:none;opacity:0;transition:opacity .15s;z-index:2}
  /* Zähler-Pille für die Chats-Nav: zeigt eine Zahl statt nur ein/aus. Magenta statt Blau,
     damit sie sich klar von der reinen "es gibt was Neues"-Punkt-Variante (Home) unterscheidet. */
  .nav-badge-count{width:auto;height:16px;min-width:16px;border-radius:999px;left:calc(50% + 4px);
    background:var(--magenta);display:flex;align-items:center;justify-content:center;
    padding:0 4px;font-size:9.5px;font-weight:800;color:#fff;font-family:'Inter';line-height:1}
  .nav-badge.on{opacity:1}
  .nav button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .nav button[aria-current="true"]{color:var(--accent-bright)}
  .nav button[aria-current="true"]::before{
    content:"";position:absolute;top:5px;bottom:5px;left:5px;right:5px;z-index:0;
    background:var(--accent-glow);
    border-radius:999px;border:1px solid rgba(46,82,255,.35);
  }
  /* WICHTIG: :not(.nav-badge) - sonst überschreibt diese Regel das position:absolute des Badges
     (der ebenfalls ein span ist) mit position:relative. Der Badge würde dadurch beim AUSGEWÄHLTEN
     Button zurück in den Flex-Fluss rutschen, sich unten anreihen und die Nav-Leiste aufblähen. */
  .nav button[aria-current="true"] svg,
  .nav button[aria-current="true"] span:not(.nav-badge){position:relative;z-index:1}
  .nav button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  /* Zentraler "Match erstellen"-Button: erhaben über der Nav-Leiste, eigener Farbverlauf */
  .nav-plus{flex:1;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0;position:relative}
  .nav-plus-circle{
    width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin-top:-26px;border:3px solid var(--bg-1);
    background-image:var(--grad);
    box-shadow:0 8px 20px var(--accent-shadow);
  }
  .nav-plus-circle svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
  .nav-plus:active .nav-plus-circle{filter:brightness(.95)}

  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  .auth-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(125% 95% at -10% 115%,rgba(255,61,166,.34) 0%,rgba(155,107,255,.40) 22%,rgba(47,107,255,.42) 45%,rgba(47,107,255,0) 72%)}
  .bgfx{
    position:fixed;inset:0;z-index:0;
    background:
      radial-gradient(circle at 90% 6%, var(--glow-magenta) 0%, transparent 36%),
      radial-gradient(circle at 6% 94%, var(--glow-blue) 0%, transparent 38%),
      linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
    pointer-events:none;
  }
  .home-header{display:flex;align-items:center;gap:6px;margin:4px 2px 16px}
  .screen .hello{font-family:'Inter';font-weight:700;font-size:26px;color:var(--ink);margin:0}
  .change{font-size:14px;font-weight:600;margin-top:4px;min-height:18px}
  .header-event-btn{flex:none;background:var(--blue);color:#fff;border:none;border-radius:20px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(47,107,255,.4);white-space:nowrap}
  .header-event-btn:active{opacity:.85}
  .provider-book-btn{display:block;margin-top:10px;padding:10px 16px;border-radius:12px;background:var(--grad);color:#fff;font-size:13px;font-weight:700;text-decoration:none;text-align:center}
  .provider-book-btn:active{opacity:.85}
  /* Info-Sheet */
  .info-sheet{position:fixed;inset:0;z-index:50;display:none;flex-direction:column}
  .info-sheet.open{display:flex}
  .info-sheet-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
  .info-sheet-panel{position:absolute;bottom:0;left:0;right:0;max-height:90vh;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--bg-1);display:flex;flex-direction:column;overflow:hidden}
  .info-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--glass-border);margin:12px auto 0}
  .info-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
  .info-sheet-title{font-size:19px;font-weight:800;letter-spacing:-0.02em;color:var(--text-main)}
  .info-sheet-close{width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-sub);font-size:16px;font-weight:700}
  .info-sheet-body{overflow-y:auto;padding:0 16px 40px;-webkit-overflow-scrolling:touch}
  /* Level-Kacheln */
  .level-card{border-radius:var(--r-sm);padding:14px 16px;margin-bottom:8px;background:linear-gradient(150deg, var(--glass-hi), var(--glass));border:1px solid var(--glass-border)}
  .level-card.current{background:linear-gradient(135deg, var(--accent-light), var(--accent) 60%, var(--accent-deep));border:none;box-shadow:none}
  .level-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  .level-name{font-size:14px;font-weight:800;color:var(--text-main)}
  .level-card.current .level-name,.level-card.current .level-range,.level-card.current .level-desc{color:#fff}
  .level-range{font-size:11px;font-weight:700;color:var(--accent-bright);background:var(--accent-glow);padding:2px 8px;border-radius:999px}
  .level-card.current .level-range{background:rgba(255,255,255,.2);color:#fff}
  .level-desc{font-size:12px;font-weight:500;color:var(--text-sub);line-height:1.5;margin-top:2px}
  /* Trend-Pfeil: sitzt jetzt unten in der offenen Lücke des Rings statt im Zentrum */
  .niveau-step-trend{position:absolute;left:0;right:0;bottom:0px;display:flex;align-items:center;justify-content:center}
  .niveau-step-trend svg{width:22px;height:22px;stroke-width:2.5;fill:none;background:rgba(255,255,255,.92);border:1.5px solid rgba(57,57,57,.13);border-radius:50%;padding:3px;box-shadow:0 1px 5px rgba(57,57,57,.1)}
  .niveau-step-trend.up svg{stroke:#2f9e44}
  .niveau-step-trend.down svg{stroke:#e5484d}
  .niveau-step-trend.flat svg{stroke:var(--ink-soft)}
  /* ===== Profil-Hero: Verlauf füllt bis zum oberen Bildschirmrand (Header liegt darauf),
     unten ein Wellen-Band, das den Avatar umschließt und 10px unter dessen Rand endet. ===== */
  /* ===== Platzhalter-Box für noch nicht gebaute Bereiche ===== */
  .soon-box{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;text-align:center;padding:44px 24px;border:1px solid var(--line-card);
    border-radius:16px;margin-top:8px}
  .soon-icon{width:42px;height:42px;stroke:var(--ink-soft);fill:none;stroke-width:1.8;
    stroke-linecap:round;opacity:.7}
  .soon-title{font-family:'Inter';font-weight:800;font-size:16px;color:var(--ink)}
  .soon-text{font-size:13.5px;line-height:1.5;color:var(--ink-soft);max-width:280px}

  /* ===== Profil-Visitenkarte: Bild links, drei Zeilen rechts =====
     Ersetzt die frühere Wellen-Grafik. Die alten .pf-hero-* Regeln bleiben ungenutzt
     stehen, weil einzelne davon (z.B. .pf-hero-meta) hier weiterverwendet werden. */
  .pf-idcard{display:flex;align-items:center;gap:14px;margin:0 0 16px}
  .pf-idcard-avatar{flex:none;position:relative}
  .pf-idcard-avatar .pf-avatar{width:72px;height:72px}
  .pf-idcard-lines{min-width:0;display:flex;flex-direction:column;gap:4px}
  .pf-idcard-lines .pf-name-top{font-family:'Inter';font-weight:800;font-size:19px;
    color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Die Metazeilen standen vorher mittig - hier linksbündig unter dem Namen */
  .pf-idcard-lines .pf-hero-meta{justify-content:flex-start;flex-wrap:wrap}

  .pf-hero{position:relative;margin:0 -10px 0}
  .pf-avatar{width:108px;height:108px;flex:none;border:0;border-radius:50%;background-color:rgba(57,57,57,.12);background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:visible;
    box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 5px var(--bg-1)}
  .pf-avatar svg{width:55%;height:55%;stroke:var(--ink-soft);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .pf-avatar.has-img svg{display:none}
  .pf-avatar-cam{position:absolute;right:0;bottom:2px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid var(--bg-1);display:flex;align-items:center;justify-content:center;z-index:3}
  .pf-avatar-cam svg{width:16px;height:16px}
  .pf-name-top{font-family:'Inter';font-weight:750;font-size:22px;letter-spacing:-.2px;margin:0;color:var(--ink)}
  .pf-hero-meta{display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;color:var(--ink-soft);flex-wrap:wrap;row-gap:2px}
  .pf-hero-meta-item{display:inline-flex;align-items:center;gap:5px;min-width:0}
  .pf-hero-meta-item svg{width:15px;height:15px;flex:none;stroke:var(--ink-soft);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .pf-hero-meta-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}
  .pf-hero-sep{color:var(--glass-border);font-size:14px}
  .pf-hero-trend{display:inline-flex;align-items:center;gap:4px}

  .trend-pill{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;font-family:'Inter';color:#fff;flex:none}
  .trend-pill.w{background:#2f9e44}
  .trend-pill.l{background:#e5484d}
  .trend-pill.d{background:#9AA0A6}
  .pf-actions{background:transparent;border:1px solid var(--glass-border);box-shadow:none;border-radius:24px;overflow:hidden;margin-bottom:10px;}
  .pf-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 18px;color:var(--ink);font-family:'Inter';font-size:16px;cursor:pointer;text-align:left;text-decoration:none;box-sizing:border-box}
  .pf-row:last-child{border-bottom:0}
  .pf-row .chev{color:var(--ink-soft);font-size:22px;line-height:1}
  .pf-row:active{background:rgba(57,57,57,.05)}
  /* ===== Spielersuche ===== */
  .search-bar{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--glass-border);box-shadow:none;border-radius:20px;padding:12px 14px;margin-bottom:12px}
  .search-bar svg{width:20px;height:20px;flex:none;stroke:var(--ink-soft);fill:none;stroke-width:2}
  .search-bar input{flex:1;border:0;outline:0;background:none;font-family:'Inter';font-size:16px;color:var(--ink)}
  .filter-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .filter-chip{display:inline-flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--text-sub);cursor:pointer;transition:background .15s,color .15s}
  .filter-chip.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 16px var(--accent-shadow)}
  .filter-panel{background:transparent;border:1px solid var(--glass-border);box-shadow:none;border-radius:20px;padding:14px;margin-bottom:10px;display:none}
  .filter-panel.open{display:block}
  .filter-panel label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin:0 0 6px}
  .filter-panel .seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .filter-panel .seg button{flex:1;min-width:60px;padding:9px 6px;border:1px solid var(--glass-border);background:var(--glass);border-radius:10px;font-size:13px;font-weight:600;color:var(--text-sub);cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .15s,color .15s}
  .filter-panel .seg button:active{transform:scale(.93)}
  .filter-panel .seg button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 14px var(--accent-shadow)}
  .range-wrap{position:relative;height:56px;display:flex;align-items:center;margin-bottom:8px}
  .range-track-bg{position:absolute;left:0;right:0;height:5px;border-radius:999px;background:var(--glass-border);pointer-events:none;z-index:0}
  .beitritts-subhead{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:6px}
  .toggle-3 .vis-slider{width:calc(33.33% - 3px)}
  .toggle-3[data-sel="m"] .vis-slider,.toggle-3.pay-custom .vis-slider{transform:translateX(100%)}
  .toggle-3[data-sel="w"] .vis-slider,.toggle-3.pay-cash .vis-slider{transform:translateX(200%)}
  .range-value-pill{position:absolute;top:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 12px;border-radius:999px;background:var(--grad);color:#fff;font-size:15px;font-weight:800;font-family:'Inter';box-shadow:0 3px 10px rgba(80,40,160,.4);pointer-events:none;z-index:2;white-space:nowrap}
  .range-wrap input[type="range"]{-webkit-appearance:none;appearance:none;position:absolute;left:0;right:0;top:10px;height:44px;background:transparent;margin:0;pointer-events:none}
  .range-wrap input[type="range"]::-webkit-slider-runnable-track{background:transparent;height:44px}
  .range-wrap input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;border-radius:50%;background:transparent;box-shadow:none;pointer-events:auto;cursor:grab;margin-top:0}
  .range-wrap input[type="range"]::-moz-range-track{background:transparent;height:44px;border:none}
  .range-wrap input[type="range"]::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:transparent;border:none;pointer-events:auto;cursor:grab}

  /* Globaler Milchglas-Effekt für ALLE Karten – einziges Design */
  [class*="tile"],[class*="form-block"],[class*="lm-block"],.mc-list-block,
  .niveau-ring-col,.niveau-side-box,.pf-hero-bg,.pf-actions,.search-bar,
  .filter-panel,.player-card,.sheet-btn,.back-btn,.md-action-btn,.pf-counter,.person-row,
  .res-modes button,.section-block{
    
  }
  .filter-chip{}
  .niveau-slider-wrap{position:relative;height:36px;display:flex;align-items:center;margin:8px 0 2px}
  .niveau-slider-track{
    position:absolute;left:0;right:0;height:6px;border-radius:999px;
    background:var(--grad-h);
    pointer-events:none;
  }
  .niveau-slider-wrap input[type=range]{
    position:relative;width:100%;margin:0;height:6px;
    -webkit-appearance:none;appearance:none;
    background:transparent;border:none;outline:none;z-index:1;cursor:pointer;
  }
  .niveau-slider-wrap input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:26px;height:26px;border-radius:50%;
    background:#fff;
    border:3px solid transparent;
    background-clip:padding-box;
    box-shadow:0 0 0 2.5px rgba(46,82,255,.55), 0 3px 10px rgba(139,44,208,.25);
    cursor:pointer;transition:box-shadow .15s;
  }
  .niveau-slider-wrap input[type=range]:active::-webkit-slider-thumb{
    box-shadow:0 0 0 4px rgba(46,82,255,.35), 0 4px 16px rgba(226,46,197,.3);
  }
  .niveau-band-label{
    text-align:center;font-family:'Inter';font-weight:600;font-size:13px;
    background:var(--grad);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    margin-bottom:6px;
  }
  .player-card{display:flex;align-items:center;gap:12px;background:transparent;border:1px solid var(--glass-border);box-shadow:none;border-radius:20px;padding:12px;margin-bottom:10px;cursor:pointer;text-align:left;width:100%}
  .player-card:active{background:rgba(57,57,57,.03)}
  .player-av{width:46px;height:46px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .player-av svg{width:58%;height:58%;fill:var(--ink-soft)}
  .player-main{flex:1;min-width:0}
  .player-name{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .player-sub{font-size:13px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .player-niv{flex:none;display:inline-flex;align-items:baseline;padding:5px 11px;border-radius:999px;color:#fff;font-family:'Inter';font-weight:700;font-size:14px}
  .search-state{text-align:center;color:var(--ink-soft);font-size:14px;padding:28px 10px}

  /* ===== Detail-Sheet ===== */
  .sheet-backdrop{position:fixed;inset:0;background:rgba(40,40,50,.45);backdrop-filter:blur(2px);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
  .confirm-dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);width:min(340px,86vw);background:var(--card-bg);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.35);padding:22px 20px 18px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .confirm-dialog.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
  #confirmBackdrop.open{opacity:1;pointer-events:auto;z-index:59}
  .confirm-dialog-title{font-family:'Inter';font-weight:800;font-size:17px;color:var(--ink);margin-bottom:8px;text-align:center}
  .confirm-dialog-msg{font-size:14px;color:var(--ink-soft);line-height:1.45;text-align:center;margin-bottom:18px}
  .confirm-dialog-actions{display:flex;flex-direction:column;gap:8px}
  .confirm-dialog-btn{width:100%;padding:13px;border-radius:12px;font-family:'Inter';font-weight:700;font-size:14.5px;border:none;cursor:pointer}
  .confirm-dialog-btn.primary{background:var(--grad);color:#fff}
  .confirm-dialog-btn.secondary{background:var(--glass-hi);color:var(--ink);border:1px solid var(--glass-border)}
  .sheet-backdrop.open{opacity:1;pointer-events:auto}
  .sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--bg-1);border-radius:24px 24px 0 0;padding:10px 18px calc(28px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .26s cubic-bezier(.3,.8,.3,1);max-height:90vh;overflow-y:auto;will-change:transform}
  .sheet.open{transform:translateY(0)}
  .sheet-grip{width:40px;height:5px;border-radius:3px;background:var(--glass-border);margin:4px auto 16px}
  .sheet-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .sheet-av{width:64px;height:64px;border-radius:50%;background:var(--glass) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .sheet-av svg{width:58%;height:58%;fill:var(--ink-soft)}
  .sheet-name{font-family:'Inter';font-weight:700;font-size:21px;color:var(--ink);line-height:1.1}
  .sheet-meta{font-size:14px;color:var(--ink-soft);margin-top:3px}
  .sheet-actions{display:flex;gap:7px;margin-bottom:6px}
  .sheet-btn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 3px;box-shadow:var(--card-shadow);background:var(--card-bg);border-radius:18px;cursor:pointer;font-family:'Inter';font-size:11px;font-weight:600;color:var(--ink);text-align:center}
  .sheet-btn svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.9}

  .sheet-btn.primary{background:var(--grad);color:#fff;border-color:transparent}
  .sheet-btn.primary svg{stroke:#fff}
  .sheet-btn.on{background:var(--grad);color:#fff;border-color:transparent}
  .sheet-btn.on svg{stroke:#fff}
  .sheet-msg{font-size:13px;margin-top:8px;min-height:18px}
  .sheet-msg.ok{color:#2f9e44}
  .sheet-msg.error{color:#e5484d}
  /* ===== Match erstellen ===== */
  .create-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border:0;border-radius:20px;cursor:pointer;background-image:var(--grad);color:#fff;font-family:'Inter';font-weight:700;font-size:16px;box-shadow:0 6px 18px var(--accent-shadow);margin-bottom:10px}
  .create-btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4}
  /* ==================== EINHEITLICHE KOPFLEISTE (alle Bildschirme) ====================
     Bleibt beim Scrollen oben stehen, der Inhalt zieht darunter nach oben weg.
     Voraussetzung dafür ist, dass das DOKUMENT scrollt (siehe .app / body.app-active) -
     bei einem eigenen Scroll-Container würde "sticky" am Container kleben statt am Bildschirm.

     Der Hintergrund MUSS deckend sein, sonst scheint der durchlaufende Inhalt hindurch.
     Deshalb hier bewusst eine feste Farbe statt einer halbtransparenten Fläche.

     Die Akzentlinie unten ist über ::after gelöst, damit sie exakt an der Unterkante sitzt
     und beim Scrollen als klare Trennung zum Inhalt wirkt. */
  /* Höhe der Kopfleiste als Variable: 14px oben + ~29px Überschrift + 14px unten,
     plus Sicherheitsbereich des Geräts. Andere feststehende Elemente (z.B. die Filterleiste
     der Events) docken damit exakt darunter an, statt dahinter zu verschwinden. */
  :root{ --head-h: calc(57px + env(safe-area-inset-top, 0px)); }
  .screen-head{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; gap:12px;
    /* -10px entspricht GENAU dem seitlichen Padding von .screen (10px). Vorher stand hier
       -16px - dadurch ragte die Leiste 6px über den Rand hinaus und die Überschrift saß auf
       jedem Bildschirm woanders. Diese Zahl muss mit .screen mitgeführt werden. */
    margin:0 -10px 16px;
    /* Der obere Abstand enthält den Sicherheitsbereich des Geräts (Statusleiste/Notch).
       Ohne ihn beginnt die farbige Fläche erst darunter und darüber blitzt der
       App-Hintergrund als andersfarbiger Streifen durch. */
    padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    background:var(--bg-2);
  }
  .screen-head::after{
    content:""; position:absolute; left:16px; right:16px; bottom:0; height:2.5px;
    border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--magenta));
  }
  .screen-head h1{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Kopfleiste OHNE Zurück-Pfeil (Hauptschirme): gleiche Maße, damit die Überschrift
     auf jedem Bildschirm an exakt derselben Stelle beginnt. */
  .screen-head.plain{padding-left:16px}
  /* Club-Profilseite: Banner soll direkt an die Kopfleiste anschließen, kein Standard-Abstand */
  #scr-clubprofile .screen-head{margin-bottom:0}
  .ev-create-btn{flex:none;width:38px;height:38px;border-radius:50%;background:var(--grad);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
  /* Gedämpfte Kopfleisten-Aktionsknöpfe (Teilen/Kalender/Chat bei Match und Event) - exakt
     dieselbe Optik wie die globale Glocke auf den Hauptbildschirmen, damit beide Button-Arten
     sich einheitlich anfühlen. Bewusst eine eigene Klasse statt .ev-create-btn zu ändern - die
     bleibt für echte Haupt-Aktionen (Event erstellen, Club-Seite bearbeiten) weiterhin im
     kräftigen Marken-Verlauf. */
  .header-icon-btn{flex:none;width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;cursor:pointer}
  .header-icon-btn svg{width:18px;height:18px;stroke:var(--ink);fill:none;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  /* Kalender-Auswahlmenü: schwebt unter dem antippenden Knopf, zwei Zeilen genügen -
     kein großes Sheet nötig für zwei Optionen. */
  .cal-menu{position:fixed;z-index:900;min-width:210px;padding:6px;border-radius:14px;
    background:var(--bg-2);border:1px solid var(--glass-border);
    box-shadow:0 8px 28px rgba(0,0,0,.45);
    opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s}
  .cal-menu.open{opacity:1;transform:translateY(0)}
  .cal-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
    font-family:'Inter';font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none}
  .cal-menu a:active{background:rgba(255,255,255,.06)}
  .cal-menu a svg{width:17px;height:17px;stroke:var(--ink-soft);fill:none;stroke-width:1.8;flex:none}
  .ev-create-btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}
  .events-grid{display:flex;flex-direction:column;gap:10px}
  @media (min-width: 720px){
    .events-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:14px}
  }
  /* Event-Kachel, im Aufbau bewusst an der Match-Kachel orientiert:
       Zeile 1  Illustration + Titel + Pillen (nebeneinander)
       darunter Metazeilen über die VOLLE Breite (Zeit/Niveau, Ort)
       abgesetzt Teilnehmerzeile
     Die Kachel selbst ist deshalb eine Spalte; nur der Kopfbereich (.ev-top) ist eine Zeile. */
  .ev-card{cursor:pointer;display:flex;flex-direction:column}
  .ev-top{display:flex;flex-direction:row;gap:12px;align-items:flex-start}
  .ev-top-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  /* Eine Zeile, kein Umbruch. Passen die Pillen nicht, lässt sich waagerecht schieben -
     ein Umbruch würde die Kachel je nach Anzahl der Pillen unterschiedlich hoch machen. */
  .ev-card-head{display:flex;gap:6px;margin-bottom:0;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ev-card-head::-webkit-scrollbar{display:none}
  .ev-card-head .mc-pill{flex:none;white-space:nowrap}
  .ev-card-name{font-family:'Inter';font-weight:800;font-size:16px;color:var(--text-main);
    line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Metazeilen nutzen dieselben Klassen wie die Match-Kachel (.mc-metainfo/.mc-meta-item),
     damit Symbole, Größen und Abstände garantiert identisch bleiben. */
  .ev-card .mc-metainfo{margin-top:9px}
  .ev-card .mc-metainfo + .mc-metainfo{margin-top:4px}

  /* Illustrationsfläche im Markenverlauf, Icon in Weiß */
  /* Exakt so groß wie das Datumskästchen der Match-Karten (.mc-date, 60x60 bei 14px Radius) -
     Event- und Match-Karten sollen sich nicht unnötig voneinander unterscheiden. */
  .ev-art{flex:none;width:60px;height:60px;border-radius:14px;display:flex;align-items:center;
    justify-content:center;background:linear-gradient(135deg,var(--blue),#8B2CD0 58%,var(--magenta))}
  .ev-art .fmt-icon{width:48px;height:48px;stroke:#fff;fill:none;stroke-width:2.8;
    stroke-linecap:round;stroke-linejoin:round}
  .ev-art .fmt-icon .fi-dot{fill:#fff;stroke:none}
  /* Das Stammrunden-Icon ist bewusst flächig statt als Linie gezeichnet - so sieht die
     Gruppen-Darstellung aus der Vorlage aus und bleibt bei kleiner Größe erkennbar. */
  .ev-art .fmt-icon .fi-solid{fill:#fff;stroke:none}

  /* Fußzeile: Teilnehmerzahl, Profilbilder, Niveau */
  /* Nichts darf umbrechen: Zähler, Bilderreihe und Niveau bleiben in einer Zeile. Wird es
     eng, schrumpft zuerst die Bilderreihe (sie ist am ehesten verzichtbar). */
  /* Deutlich abgesetzt vom Metablock: beantwortet eine andere Frage ("passe ich noch rein?")
     als die Zeilen darüber ("wann, wo, welches Niveau"). */
  .ev-foot{display:flex;align-items:center;gap:8px;margin-top:13px;flex-wrap:nowrap;min-width:0}
  .ev-count{font-family:'Inter';font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;flex:none}
  .ev-faces{display:flex;min-width:0;overflow:hidden}
  .ev-face{width:22px;height:22px;border-radius:50%;margin-left:-7px;flex:none;
    border:2px solid var(--bg-2);background:#3A3F4C center/cover no-repeat;
    display:flex;align-items:center;justify-content:center;
    font-family:'Inter';font-size:9.5px;font-weight:800;color:var(--ink)}
  .ev-face:first-child{margin-left:0}
  .ev-face.more{background:rgba(226,46,197,.22);color:#F07FDF;font-size:8.5px}
  /* Format-Pille in Magenta statt des früheren Violetts - eine Akzentfarbe weniger */
  .mc-pill.fmt-pill{background:rgba(226,46,197,.14);color:#F07FDF;box-shadow:0 0 0 1px rgba(226,46,197,.26)}
  .back-btn{width:38px;height:38px;border-radius:50%;box-shadow:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .back-btn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2}
  .screen-head h1{font-family:'Inter';font-weight:700;font-size:24px;color:var(--ink);margin:0}
  .form-block{background:transparent;border:1px solid var(--glass-border);box-shadow:none;border-radius:var(--r-lg);padding:16px;margin-bottom:12px;overflow:hidden}
  /* Pill-Labels nur INNERHALB der App (nach Login) – nicht im Auth-Formular */
  .app .form-block > label:first-child{display:inline-flex;align-items:center;align-self:flex-start;font-family:'Inter';font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.3px;padding:4px 11px;border-radius:999px;margin-bottom:12px;color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(57,57,57,.18);-webkit-text-fill-color:var(--ink)}
  .app .form-block > label{display:block;font-family:'Inter';font-weight:700;font-size:14px;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
  .vis-toggle{position:relative;display:flex;background:var(--glass-hi);border:1px solid var(--glass-border);border-radius:999px;padding:4px;margin-bottom:6px;height:50px;box-sizing:border-box}
  .vis-slider{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;background:var(--grad);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:0;box-shadow:0 2px 8px rgba(46,82,255,.25)}
  .vis-toggle.public .vis-slider{transform:translateX(100%)}
  /* Dieselbe Mechanik für die beiden neuen Events-Schieberegler (Umfang, Zeitraum) -
     ohne diese Regeln bliebe der farbige Hintergrund optisch links stehen, obwohl die
     rechte Option ausgewählt ist. */
  .ev-scope-toggle.all .vis-slider{transform:translateX(100%)}
  .ev-time-toggle.far .vis-slider{transform:translateX(100%)}
  /* 3-Option Pay-Slider */
  .pay-toggle-3 .vis-slider{width:calc(33.33% - 3px)}
  .pay-toggle-3.pay-custom .vis-slider{transform:translateX(100%)}
  .pay-toggle-3.pay-cash .vis-slider{transform:translateX(200%)}
  /* 5-Optionen Format-Toggle: horizontal scrollbar statt gequetscht, da Labels wie "Turnierbaum" lang sind */
  /* Format-Auswahl beim Event-Erstellen: 2x3-Raster statt einer langen Wisch-Pille -
     alle sechs Formate sind ohne Wischen sichtbar. Das gewählte Format bekommt die
     Marken-Füllung, unausgewählte bleiben schlicht mit feinem Rand. */
  .ev-fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
  .ev-fmt-tile{display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:56px;padding:8px 6px;border-radius:14px;cursor:pointer;
    background:transparent;border:1px solid var(--line-card);
    font-family:'Inter';font-size:12.5px;font-weight:700;color:var(--ink);
    transition:background .18s,border-color .18s,color .18s}
  .ev-fmt-tile .vt{line-height:1.25}
  .ev-fmt-tile:active{opacity:.75}
  .ev-fmt-tile.on{border-color:transparent;color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--mid) 60%,var(--magenta));
    box-shadow:0 4px 14px rgba(46,82,255,.28)}
  .vis-opt{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:999px}
  .vis-opt .vt{font-family:'Inter';font-weight:700;font-size:15px;color:var(--ink-soft);transition:color .2s}
  .vis-opt.on .vt{color:#fff}
  .vis-desc{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:10px;padding:11px 12px;background:rgba(57,57,57,.05);border-radius:10px}
  .two-col{display:flex;gap:10px}
  /* min-width:0 ist wichtig: Flex-Elemente schrumpfen sonst nie unter ihre Inhaltsbreite -
     Auswahlfelder (z.B. Uhrzeiten) liefen dadurch über die Spalte hinaus und überlappten. */
  .two-col .field{flex:1;min-width:0}
  /* Zeit-Spalten (Von/Bis) brauchen nur Platz für "17:00" - deutlich schmaler halten, damit sie
     sich nie überlagern und nicht unnötig die ganze Breite einnehmen. */
  .two-col.time-row{gap:10px}
  .two-col.time-row .field{flex:0 1 132px;max-width:132px}
  .field{margin-bottom:12px}
  .field:last-child{margin-bottom:0}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
  .field select,.field input{width:100%;min-width:0;box-sizing:border-box;padding:12px;border:1px solid var(--glass-border);border-radius:11px;font-family:'Inter';font-size:15px;background:var(--glass);color:var(--ink)}
  .date-clip{overflow:hidden;border-radius:11px;width:100%}
  .field input[type="date"]{min-width:0;max-width:100%;width:100%;box-sizing:border-box;font-size:14px;padding-left:10px;padding-right:10px}
  textarea{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--glass-border);border-radius:11px;font-family:'Inter';font-size:15px;background:var(--glass);color:var(--ink);resize:vertical;min-height:80px}
  textarea::placeholder{color:var(--ink-soft)}
  .field input.input-error{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.12)}
  .pos-grid{display:flex;flex-direction:column;gap:10px}
  .team-label{font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;margin:4px 0 2px}
  .pos-slot{display:flex;align-items:center;gap:10px;border:1px solid var(--glass-border);border-radius:12px;padding:9px 11px;background:var(--glass);cursor:pointer}
  .pos-slot.me{cursor:default}
  .pos-slot:not(.me):active{opacity:.7}
  .pos-slot.me{background:rgba(47,107,255,.07);border-color:rgba(47,107,255,.3)}
  .pos-av{width:34px;height:34px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .pos-av svg{width:60%;height:60%;fill:var(--ink-soft)}
  .pos-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
  .pos-role{font-size:11px;color:var(--ink-soft)}
  .pos-name{font-size:14.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pos-action{flex:none;font-size:13px;font-weight:600;color:var(--accent-bright);background:none;border:0;cursor:pointer;padding:6px}
  .pos-action.clear{color:var(--ink-soft)}
  .switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .switch{position:relative;width:50px;height:30px;flex:none;cursor:pointer;display:inline-block}
  .switch input{opacity:0;width:0;height:0;position:absolute}
  .switch .track{position:absolute;inset:0;background:rgba(140,140,150,.35);border:1px solid rgba(140,140,150,.45);border-radius:999px;transition:.2s}
  .switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .switch input:checked + .track{background:var(--grad);border-color:transparent}
  .switch input:checked + .track + .knob{transform:translateX(20px)}
  .court-info{font-size:12.5px;line-height:1.5;margin-top:10px;padding:11px 12px;border-radius:10px}
  .court-info.warn{background:rgba(229,72,77,.08);color:#c0353a}
  .court-info.ok{background:rgba(47,158,68,.09);color:#1f7a37}

  /* ===== Dashboard: Match-Anfragen-Block ===== */
  /* Container fuer Anfragen/Einladungen: keine eigene Kachel mehr - die Match-Karten darin
     stehen direkt auf dem Hintergrund (sonst Kachel-in-Kachel-Optik). */
  .req-block{border-radius:0;padding:0;margin-bottom:10px;background:transparent;border:none;box-shadow:none;display:flex;flex-direction:column}
  .req-block h3{font-family:'Inter';font-weight:700;font-size:13px;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px;-webkit-text-fill-color:var(--ink-soft)}


  .req-team{display:flex;align-items:center;gap:6px;padding:3px 0}
  .req-team .nm{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .req-av{width:24px;height:24px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .req-av svg{width:60%;height:60%;fill:var(--ink-soft)}
  .req-av.open{border:1.5px dashed rgba(57,57,57,.3);background:transparent}

  /* ===== Last-Minute-Block ===== */
  .lm-block{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;margin-bottom:10px}
  .lm-block h3{font-family:'Inter';font-weight:700;font-size:13px;text-transform:uppercase;margin:0 0 12px;color:#e5484d;-webkit-text-fill-color:#e5484d}
  .lm-block h3 .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e5484d;margin-right:7px;animation:lmpulse 1.4s infinite}
  @keyframes lmpulse{0%,100%{opacity:1}50%{opacity:.3}}


  .lm-join{flex:none;background:#e5484d;color:#fff;border:0;border-radius:10px;padding:9px 14px;font-family:'Inter';font-weight:700;font-size:13px;cursor:pointer}
  /* ===== Match-Detailansicht ===== */
  /* Statuszeile: Status-Pille und - falls vorhanden - direkt daneben die Turnier-Pille */
  #mdStatusWrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
  #mdStatusWrap .md-status{margin-bottom:0}
  .md-event-pill{cursor:pointer;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .md-event-pill:active{opacity:.7}
  .md-status{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:10px}
  .md-status.open{background:var(--accent-glow);color:var(--accent-bright)}
  .md-status.full{background:rgba(47,158,68,.13);color:#1f7a37}
  .md-status.confirmed{background:rgba(47,158,68,.16);color:#1f7a37}
  .md-status.completed{background:rgba(57,57,57,.1);color:var(--ink-soft)}
  .md-status.cancelled{background:rgba(229,72,77,.12);color:#c0353a}
  .md-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
  .md-info{display:grid;grid-template-columns:96px 1fr;gap:7px 14px;font-size:13.5px;color:var(--ink);align-items:baseline}
  /* Karten-Icon hinter dem Club: öffnet auf iOS Apple Karten, sonst Google Maps */
  .md-maps{display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px;
    margin-left:6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-card)}
  .md-maps svg{width:12px;height:12px;stroke:var(--accent-bright);fill:none;stroke-width:2}
  .md-maps:active{opacity:.6}
  .md-info .lbl{color:var(--ink-soft)}
  /* Klickbarer Event-/Stammrunden-Link in den Match-Details: gleiches Blau wie andere
     klickbare Namen (z.B. Turnierbaum-Pfeile) */
  .md-event-link{color:var(--accent-bright);font-weight:700;cursor:pointer}
  .md-event-link:active{opacity:.7}
  /* Court-Zelle enthält eine Pille (Button): mittig statt an der Textbasis ausrichten, sonst ragt
     die Pille optisch in die Zeile darüber. */
  .md-info #md-booked{align-self:center;min-width:0}
  .md-teams{display:flex;flex-direction:column;gap:9px}
  .md-pos{display:flex;align-items:center;gap:11px;border:1px solid var(--glass-border);border-radius:12px;padding:10px 12px;background:var(--glass)}
  .md-pos.empty{border-style:dashed}
  .md-pos.me{background:rgba(47,107,255,.06);border-color:rgba(47,107,255,.3)}
  .md-pos-av{width:34px;height:34px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .md-pos-av svg{width:60%;height:60%;fill:var(--ink-soft)}
  .md-pos-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .md-pos-name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Niveau-Änderung dieses Matches, unter dem Namen - grün bei Gewinn, rot bei Verlust */
  .md-pos-delta{font-size:11.5px;font-weight:700;letter-spacing:-.1px}
  .md-pos-delta:empty{display:none}
  .md-pos-delta.up{color:#10B981}
  .md-pos-delta.down{color:#e5484d}
  .md-pos-delta.flat{color:var(--ink-soft)}
  .md-pos-status{font-size:11px;font-weight:700}
  .md-pos-status.confirmed{color:#1f7a37}
  .md-pos-status.pending{color:#b96414}
  /* Abgesagte Position: Name bleibt sichtbar, aber deutlich zurückgenommen - der Platz ist frei,
     die Information "wer hat abgesagt" aber weiterhin nachvollziehbar. */
  .md-pos-status.declined{color:#c0392f}
  .md-pos.declined .md-pos-name{color:var(--ink-soft);text-decoration:line-through;opacity:.75}
  .md-pos.declined .md-pos-av{opacity:.45}
  body.day .md-pos-status.declined{color:#B3261E}
  .md-vs-line{text-align:center;font-family:'Inter';font-weight:700;font-size:11px;color:var(--ink-soft);text-transform:lowercase;margin:2px 0}
  /* Team-Zeile mit Score rechts */
  .md-teamrow{display:flex;align-items:stretch;gap:10px}
  .md-teamrow .md-team-players{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
  .md-teamrow .md-team-score{flex:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px}
  .join-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-bottom:8px}
  .join-card:last-child{margin-bottom:0}
  .join-av{width:32px;height:32px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  /* Niveau-Pille sitzt unten am Profilbild - gleiche Sprache wie in Match-Karten und Suche */
  .join-av-wrap{position:relative;flex:none;display:block;width:32px;height:32px}
  .join-niv{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
    padding:1px 5px;border-radius:999px;font-family:'Inter';font-size:9px;font-weight:800;
    color:#fff;line-height:1.3;white-space:nowrap;border:1.5px solid var(--bg-2)}
  /* Außerhalb des ausgeschriebenen Bereichs: zusätzlich rot umrandet, damit es auffällt */
  .join-niv.outside{box-shadow:0 0 0 1.5px #e5484d}
  .join-av svg{width:60%;height:60%;fill:var(--ink-soft)}
  .join-main{flex:1;min-width:0}
  .join-name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .join-sub{font-size:12px;color:var(--ink-soft)}
  .mid-dot{color:var(--ink-soft);margin:0 5px;font-weight:700}
  .rq-btn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .rq-btn svg{width:19px;height:19px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .rq-btn.yes{border-color:rgba(47,158,68,.4)}
  .rq-btn.yes svg{stroke:#2f9e44}
  .rq-btn.yes:active{background:rgba(47,158,68,.1)}
  .rq-btn.no{border-color:rgba(229,72,77,.4)}
  .rq-btn.no svg{stroke:#e5484d}
  .rq-btn.no:active{background:rgba(229,72,77,.1)}
  .md-action-btn{width:100%;padding:13px;border-radius:12px;box-shadow:none;background:transparent;border:1px solid var(--glass-border);font-family:'Inter';font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px}
  .md-sub-status{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:12px;background:var(--accent-glow);color:var(--accent-bright);font-size:13.5px;font-weight:600;line-height:1.4;margin-bottom:10px}
  .md-action-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
  .md-action-btn.alert{background:rgba(229,72,77,.06);border-color:rgba(229,72,77,.35);color:#c0353a}
  /* Zurückhaltende Variante für Nebenaktionen wie "Match bearbeiten" - sie soll neben den
     eigentlichen Handlungen (zusagen, absagen) nicht um Aufmerksamkeit konkurrieren. */
  .md-action-btn.ghost{border-color:var(--line-soft);color:var(--ink-soft);font-weight:500}
  .md-action-btn.danger{color:#c0353a;border-color:rgba(229,72,77,.3)}
  .md-action-btn.accept{color:#1f7a37;border-color:rgba(47,158,68,.35);background:rgba(47,158,68,.06)}
  .md-action-btn:disabled{opacity:.5;cursor:default}
  .md-status-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;background:var(--glass);border:1px solid var(--glass-border);color:var(--text-sub);margin-bottom:8px;align-self:center}
  /* Ergebniseingabe */
  .res-mode{display:flex;gap:6px;margin-bottom:12px}
  .res-mode button{flex:1;padding:7px 4px;border:1px solid var(--glass-border);background:var(--glass);border-radius:9px;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .res-mode button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .res-mode button:disabled{opacity:.55}
  .res-hint{font-size:12px;color:var(--ink-soft);line-height:1.5;margin:6px 0 12px}
  .confirm-banner{background:rgba(240,136,62,.1);border:1px solid rgba(240,136,62,.3);border-radius:12px;padding:13px;margin-bottom:12px;font-size:13.5px;color:#9a5414;line-height:1.5}
  /* ===== Profil-Counter ===== */
  .pf-counters{display:flex;gap:10px;margin-bottom:10px}
  /* Flach + 1px Rand, kein Glaskörper - identische Optik wie die kleinen Niveau-Kacheln daneben */
  .pf-counter{flex:1;background:transparent;border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:14px 8px;text-align:center;cursor:pointer}
  .pf-counter.static{cursor:default}
  .pf-counter .num{font-family:'Inter';font-weight:700;font-size:24px;color:var(--ink);line-height:1}
  .pf-counter .lbl{font-size:12px;color:var(--ink-soft);margin-top:6px;font-weight:700;line-height:1.25}
  /* Personen-Listen-Seite */
  .person-row{display:flex;align-items:center;gap:12px;background:transparent;border:1px solid var(--glass-border);box-shadow:none;border-radius:20px;padding:11px 13px;margin-bottom:9px;cursor:pointer;width:100%;text-align:left}
  .person-row .person-av{width:42px;height:42px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .person-row .person-av svg{width:58%;height:58%;fill:var(--ink-soft)}
  /* person-main muss die beiden Spans stapeln - als reine inline-Elemente liefen Name und
     Untertitel sonst ohne jeden Abstand ineinander ("Steffen HelminFortgeschritten"). */
  .person-row .person-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
  .person-row .person-name{font-size:15.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .person-row .person-sub{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .avail-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px}
  .avail-table{display:grid;grid-template-columns:82px repeat(7,minmax(34px,1fr));gap:5px;align-items:center;min-width:500px}
  .avail-head-cell{font-size:11px;font-weight:700;color:var(--ink);opacity:.55;text-align:center;text-transform:uppercase;letter-spacing:.02em}
  .avail-row-label-wrap{padding-right:6px}
  .avail-row-label{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.2}
  .avail-row-sub{font-size:10.5px;color:var(--ink);opacity:.5;font-weight:400;line-height:1.2}
  .avail-cell{aspect-ratio:1;border-radius:8px;background:var(--fill-faint);border:1px solid var(--fill-soft);cursor:pointer;transition:background .12s,border-color .12s}
  .avail-cell.on{border-color:transparent}
  .avail-cell:active{opacity:.75}
  .side-toggle{display:flex;gap:10px}
  .side-opt{flex:1;border:1px solid var(--line-card);border-radius:12px;padding:13px;text-align:center;cursor:pointer;background:rgba(255,255,255,.2);border:1px solid rgba(57,57,57,.12);font-family:'Inter';font-weight:700;font-size:14px;color:var(--ink)}
  .side-opt.on{border-color:transparent;background:var(--grad);color:#fff;background-clip:padding-box;-webkit-background-clip:padding-box}
  /* ===== Match-Listen Outer-Block (Milchglas) ===== */
  /* Swiper-Container: KEINE eigene Kachel mehr (sonst Kachel-in-Kachel). Die Match-Karten darin
     sind die Kacheln - der Container ist nur noch Layout. */
  .mc-list-block{margin-bottom:14px;display:flex;flex-direction:column}
  .match-swiper{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;padding-right:1px;will-change:scroll-position;transform:translateZ(0)}
  .match-swiper::-webkit-scrollbar{display:none}
  /* 92% Breite: die naechste Karte lugt nur als schmaler Streifen am rechten Rand rein
     (statt zu einem Drittel sichtbar zu sein) - ruhigeres Bild, klarer Fokus auf die aktive Karte. */
  /* ALLE Swiper-Karten exakt gleich breit und gleich hoch - auch die "Alle anzeigen"-Kachel am Ende.
     align-items:stretch + height:100% zwingt sie auf dieselbe Höhe; margin:0 killt die margin-bottom
     aus den Basis-Klassen (.mc/.mc-compact/.tile), die sonst je nach Kartentyp anders ausfallen. */
  .match-swiper{align-items:stretch}
  /* Feste Kachelbreite: 92% der Seitenbreite - dadurch lugt die nächste Kachel immer mit demselben
     schmalen Streifen am rechten Rand herein. min-width:0 + overflow:hidden verhindern, dass langer
     Inhalt die Kachel breiter zieht (sonst springt die Breite je nach Turniername). */
  .match-swiper > *{flex:0 0 92%;width:92%;min-width:0;max-width:92%;box-sizing:border-box;scroll-snap-align:start;margin:0 !important;height:auto;align-self:stretch;overflow:hidden}
  /* Einzelne Kachel: volle Seitenbreite, da nichts zum Durchblättern da ist */
  .match-swiper.single > *{flex:0 0 100%;width:100%;max-width:100%}
  .swiper-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
  .swiper-dot{width:6px;height:6px;border-radius:50%;background:var(--glass-border);transition:background .2s,width .2s}
  .show-all-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center;box-sizing:border-box}
  .show-all-tile svg{width:22px;height:22px;stroke:var(--accent-bright);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .show-all-tile span{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
  .swiper-dot.active{width:18px;border-radius:4px;background:var(--accent-bright)}
  /* Standard Sub-Karten (weiße Linie) */
  /* Match-Karte: kein Hintergrund, nur eine feine Linie außen herum.
     overflow:hidden + min-width:0 sind wichtig: sonst könnte ein langer Turniername oder Clubname
     die Kachel breiter ziehen und die Kachelbreite würde von Karte zu Karte springen. */
  .mc{position:relative;background:transparent;border:1px solid var(--line-card);border-radius:16px;padding:10px 12px;margin:0 0 8px;cursor:pointer;box-shadow:none;overflow:hidden;min-width:0;max-width:100%}
  body.day .mc{border-color:rgba(0,0,0,.16)}
  .mc:last-child{margin-bottom:0}
  .req-block .mc{background:transparent;border:1px solid var(--line-card)}
  /* Einladungen: schlicht wie jede andere Karte - die Aufmerksamkeit holt allein der rot
     pulsierende Rahmen. Die früher mit dem Markenverlauf gefüllte Fläche brauchte ein Dutzend
     Sonderregeln für weiße Schrift und wirkte neben den übrigen Karten sehr laut. */
  .mc.mc-invite{background:transparent;border:1px solid rgba(229,72,77,.85);box-shadow:none;
    border-radius:16px;padding:10px 12px;margin:0 0 8px;animation:invitePulse 2s ease-in-out infinite}
  /* Nur die Kopfzeile ("… lädt dich ein!") bleibt farblich hervorgehoben */
  .mc-invite .mc-top-line{color:#ff8a8d;font-weight:800}
  @keyframes invitePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.42)}
    50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}
  }
  @media (prefers-reduced-motion: reduce){ .mc.mc-invite{animation:none} }
  /* Runde Zu-/Absage-Buttons rechts in den Team-Zeilen */
  .mc-rbtn{flex:none;width:42px;height:42px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .mc-rbtn svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .mc-rbtn.mc-yes{background:#2f9e44}
  .mc-rbtn.mc-no{background:#e5484d}
  .mc-rbtn:active{filter:brightness(.92)}
  /* Eigene anstehende Matches */
  .mc.mc-mine{background:transparent;border:1px solid var(--line-card);box-shadow:none;border-radius:16px;padding:10px 12px;margin:0 0 8px}
  /* Deutlichkeit der Linie je Status - dezent gestaffelt, ohne Füllung */
  .mc.mc-st-live{border-color:var(--line-strong)}
  .mc.mc-st-upcoming{border-color:var(--line-card)}
  .mc.mc-st-done{border-color:var(--line-soft)}
  .mc.mc-st-past{border-color:var(--line-soft)}
  .mc.mc-st-cancelled{border-color:var(--line-soft);opacity:.72}
  body.day .mc.mc-st-live{border-color:rgba(0,0,0,.30)}
  body.day .mc.mc-st-upcoming{border-color:rgba(0,0,0,.18)}
  body.day .mc.mc-st-done,body.day .mc.mc-st-past{border-color:rgba(0,0,0,.12)}
  body.day .mc.mc-st-cancelled{border-color:rgba(0,0,0,.10)}
  /* Last Minute: roter Glow-Rahmen */
  .mc.mc-lm{border-color:rgba(229,72,77,.65);box-shadow:0 0 12px rgba(229,72,77,.30), inset 0 0 10px rgba(229,72,77,.06)}
  body.day .mc.mc-lm{border-color:rgba(229,72,77,.55)}
  .mc-top-line{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:9px}
  .mc-top-line.danger{color:#e5484d}
  /* Pulsierende Variante für "Neue Spieler Anfrage eingegangen" - dieselbe Rot-Farbe wie
     .danger (kommt ohnehin zusammen mit .danger vor, siehe buildMyMatchCardFull), zusätzlich
     eine sanfte Deckkraft-Pulsierung, damit eine neue, noch unbeachtete Anfrage sofort auffällt,
     ohne grell zu blinken. */
  .mc-top-line.pulse-alert{animation:mc-pulse-alert 1.6s ease-in-out infinite}
  @keyframes mc-pulse-alert{0%,100%{opacity:1}50%{opacity:.55}}
  .cancel-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.3);cursor:pointer;margin-bottom:12px}
  .cancel-banner:active{opacity:.8}
  .cancel-banner-icon{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(229,72,77,.18);display:flex;align-items:center;justify-content:center}
  .cancel-banner-icon svg{width:18px;height:18px;stroke:#c0353a;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .cancel-banner-text{flex:1;font-size:13px;font-weight:600;color:#c0353a;line-height:1.35}
  .cancel-banner-text span{display:block;font-weight:400;font-size:12px;opacity:.8;margin-top:1px}
  .mc-top-line.success{color:#2f9e44}
  .mc-pill-banner{display:block;width:100%;box-sizing:border-box;text-align:center;font-weight:700;font-size:13px;line-height:1.35;padding:10px 14px;border-radius:24px;margin-bottom:10px}
  .mc-pill-banner.with-action{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
  .mc-pill-banner-text{flex:1;min-width:0}
  .mc-withdraw-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.14);border:none;cursor:pointer;color:inherit}
  .mc-withdraw-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round}
  body.day .mc-withdraw-btn{background:rgba(0,0,0,.10)}
  .mc-pill-banner.pending{background:rgba(255,193,7,.16);color:#e0a800}
  .mc-pill-banner.alert{background:#ffe1e1;color:#c0262b}
  .mc-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;padding-right:26px}
  .mc-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
  .mc-pill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
  .mc-pill.public{background:rgba(240,180,40,.16);color:#a8760a;box-shadow:0 0 0 1px rgba(240,180,40,.28)}
  .mc-pill.friends{background:rgba(16,185,129,.16);color:#10B981;box-shadow:0 0 0 1px rgba(16,185,129,.28)}
  /* Meine Events: grün hervorgehoben, damit sofort erkennbar ist, wo ich beteiligt bin */
  /* Früher grün eingefärbt - das wurde neben den anderen Kacheln zu bunt. Jetzt nur eine
     feine hellere Linie; dass man dabei ist, sagt die Pille im Kopfbereich. */
  .ev-card.mine{border-color:rgba(255,255,255,.34);background:transparent}
  .mc-pill.mine-pill{background:rgba(16,185,129,.16);color:#10B981;box-shadow:0 0 0 1px rgba(16,185,129,.32)}
  .mc-pill.done-pill{background:rgba(140,140,150,.16);color:var(--ink-soft);box-shadow:0 0 0 1px rgba(140,140,150,.3)}
  .mc-pill.cancelled-pill{background:rgba(229,72,77,.14);color:#e5484d;box-shadow:0 0 0 1px rgba(229,72,77,.3)}
  .mc-pill.announced-pill{background:rgba(46,82,255,.14);color:var(--accent-bright);box-shadow:0 0 0 1px rgba(46,82,255,.3)}
  .mc-pill.running-pill{background:rgba(16,185,129,.14);color:#10B981;box-shadow:0 0 0 1px rgba(16,185,129,.3)}
  .ev-card-winner{font-size:13.5px;font-weight:800;color:#D4A017;margin-top:4px}
  .ev-notes-text{font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
  .mc-pill.live-pill{background:rgba(229,72,77,.16);color:#e5484d;box-shadow:0 0 0 1px rgba(229,72,77,.32), 0 0 8px rgba(229,72,77,.25);animation:live-pulse 1.8s ease-in-out infinite}
  @keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.6}}
  .drag-swap-hint{font-size:12px;color:var(--ink-soft);margin-bottom:8px}
  .drag-swap-grid{display:flex;flex-wrap:wrap;gap:8px}
  .drag-swap-tile{flex:0 0 calc(50% - 4px);display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04);cursor:grab;touch-action:none;user-select:none}
  body.day .drag-swap-tile{background:rgba(0,0,0,.03)}
  .drag-swap-tile .dst-court{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink-soft);letter-spacing:.03em}
  .drag-swap-tile .dst-name{font-size:13px;font-weight:700;color:var(--ink)}
  .drag-swap-tile.selected{border-color:var(--magenta);box-shadow:0 0 0 2px var(--magenta)}
  .drag-swap-tile .dst-team{font-size:10px;font-weight:700;color:var(--accent-bright);letter-spacing:.02em}
  .court-names-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
  .court-names-grid input{flex:0 0 64px;padding:9px 8px;text-align:center;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass);color:var(--ink);font-family:'Inter';font-weight:700;font-size:14px;box-sizing:border-box}
  /* ===== Event-Tabs: feste Leiste über die volle Breite, Icons über den Titeln =====
     Keine Pillen, kein horizontales Scrollen - alle Tabs teilen sich die Bildschirmbreite.
     Der aktive Tab wird durch Farbe + Unterstrich markiert (wie eine klassische Tab-Leiste). */
  .ev-tabs{display:flex;width:100%;margin:0 0 16px;border-bottom:1px solid var(--glass-border)}
  .ev-tab{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
    padding:4px 2px 10px;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
    color:var(--ink-soft);font-family:'Inter';font-weight:600;font-size:11px;cursor:pointer}
  .ev-tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ev-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ev-tab.on{color:var(--accent-bright);border-bottom-color:var(--accent-bright);font-weight:800}
  .ev-tab.organizer{color:#D4A017}
  .ev-tab.organizer.on{color:#D4A017;border-bottom-color:#D4A017}

  /* ===== Nachrichten-Screen: fixierter Header (Titel + Tabs), Inhalt darunter eigenständig scrollbar ===== */
  #scr-chats.active{display:flex!important;flex-direction:column;height:100vh;height:100dvh;padding:0;overflow:hidden}
  /* Nachrichten füllen den Bildschirm exakt und scrollen NUR innen. Ohne diese Regeln bliebe
     unter der Ansicht der 120px-Abstand der App-Hülle stehen - man konnte darüber hinaus
     weiterscrollen und schob dabei die Reiterleiste oben aus dem Bild. */
  body.chats-view{overflow:hidden;height:100dvh}
  body.chats-view .app{padding-bottom:0;min-height:0}
  /* Der Chats-Bildschirm hat einen EIGENEN Scroll-Bereich (.chats-body), das Dokument selbst
     scrollt hier nicht. Die Kopfleiste steht dadurch ohnehin fest - sie darf nur nicht
     zusammengedrückt werden, deshalb flex:none.
     Wichtig außerdem: #scr-chats.active setzt padding:0, deshalb muss der negative Rand hier
     auf 0 zurückgesetzt werden - sonst ragt die Leiste 10px über den linken Rand hinaus und
     die Überschrift steht anders als auf allen anderen Bildschirmen. */
  #scr-chats .screen-head{flex:none;position:relative;margin-left:0;margin-right:0}
  .chats-header{flex:none;padding:calc(10px + env(safe-area-inset-top,0px)) 10px 0}
  .chats-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:0 10px calc(104px + env(safe-area-inset-bottom,0px))}

  /* ===== Benachrichtigungen: Sprechblasen wie in einer Messenger-App =====
     Grau/links = System bzw. andere Person, Blau/rechts = von mir ausgelöste Aktion. */
  .notif-day{text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin:18px 0 10px}
  .notif-row{display:flex;margin-bottom:8px}
  .notif-row.mine{justify-content:flex-end}
  .notif-bubble{max-width:78%;padding:11px 14px;border-radius:20px;font-size:14.5px;line-height:1.42;word-break:break-word;position:relative}
  .notif-row:not(.mine) .notif-bubble{background:rgba(120,120,128,.22);color:var(--ink);border-bottom-left-radius:6px}
  body.day .notif-row:not(.mine) .notif-bubble{background:rgba(0,0,0,.06)}
  .notif-row.mine .notif-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:6px}
  .notif-bubble.clickable{cursor:pointer}
  .notif-bubble.clickable:active{opacity:.75}
  .notif-bubble.unread::after{content:"";position:absolute;top:8px;right:-11px;width:7px;height:7px;border-radius:50%;background:var(--magenta)}
  .notif-row.mine .notif-bubble.unread::after{right:auto;left:-11px}
  .notif-link{display:block;margin-top:5px;font-size:12px;font-weight:700}
  /* Gleiches Blau wie andere klickbare Namen/Links in der App. Auf der eigenen (bereits
     farbig gefüllten) Sprechblase bliebe Blau auf Blau kaum lesbar - dort bleibt es weiß. */
  .notif-row:not(.mine) .notif-link{color:var(--accent-bright)}
  .notif-row.mine .notif-link{color:#fff;opacity:.85}
  /* Sitzt an der oberen rechten Ecke des Tab-Icons. Braucht position:relative am .ev-tab,
     sonst wandert es an den nächsten positionierten Vorfahren (= Bildschirmecke). */

  /* ===== Chatliste: Filterleiste + Zeilen ===== */
  .chat-filter-row{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 12px;scrollbar-width:none}
  /* Club-Namenssuche im Feed (siehe wireFeedSearch) */
  .club-search-row{display:flex;justify-content:space-between;align-items:center;
    margin-bottom:8px;cursor:pointer}
  .club-search-row-name{font-weight:700;color:var(--ink)}
  .club-search-row-city{font-size:12.5px;color:var(--ink-soft)}
  .chat-filter-row::-webkit-scrollbar{display:none}
  /* Etwas kompakter als vorher (7px/14px) - jetzt fünf statt vier Pillen in derselben Zeile,
     mit engerer Polsterung passt es auf typischen Bildschirmbreiten eher in eine Zeile.
     overflow-x:auto (siehe .chat-filter-row) bleibt als Sicherheitsnetz, falls ein sehr
     schmales Gerät trotzdem knapp scrollen muss - kein Umbruch, keine Bruchstelle. */
  .chat-filter{flex:none;padding:6px 11px;border-radius:999px;border:1px solid var(--glass-border);background:transparent;color:var(--ink-soft);font-family:'Inter';font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
  .chat-filter.on{background:var(--accent);border-color:transparent;color:#fff}
  .chat-row{display:flex;align-items:center;gap:10px;padding:12px 2px 12px 0;border-bottom:1px solid var(--glass-border);cursor:pointer;position:relative}
  .chat-row:active{opacity:.7}
  .chat-row-icon{flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(120,120,128,.2)}
  body.day .chat-row-icon{background:rgba(0,0,0,.06)}
  .chat-row-icon svg{width:19px;height:19px;stroke:var(--ink-soft);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .chat-row.unread .chat-row-icon{background:rgba(46,82,255,.18)}
  .chat-row.unread .chat-row-icon svg{stroke:var(--accent-bright)}
  .chat-row-main{flex:1;min-width:0}
  .chat-row-title{font-size:14.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chat-row.unread .chat-row-title{font-weight:800}
  .chat-row-prev{font-size:12.5px;color:var(--ink-soft);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chat-row-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .chat-row-time{font-size:11px;color:var(--ink-soft);white-space:nowrap}
  .chat-row-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--magenta);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
  .chat-row-dots{flex:none;width:30px;height:30px;border:0;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft)}
  .chat-row-dots svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
  .chat-row-dots:active{background:rgba(120,120,128,.2)}

  /* ===== Chatraum ===== */
  #scr-chatroom.active{display:flex!important;flex-direction:column;height:100vh;height:100dvh;padding:0;overflow:hidden}
  body.chatroom-view{overflow:hidden;height:100dvh}
  body.chatroom-view .app{padding-bottom:0;min-height:0}
  body.chatroom-view .nav{display:none}
  .cr-head{flex:none;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;border-bottom:1px solid var(--glass-border)}
  .cr-head-txt{flex:1;min-width:0}
  .cr-head-title{font-size:16px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cr-head-sub{font-size:11.5px;color:var(--ink-soft);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cr-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:10px 12px 14px}
  .cr-sender{font-size:11px;font-weight:700;margin:0 0 3px 14px;letter-spacing:.01em}
  .cr-sys{text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin:14px 0 10px;padding:0 20px;line-height:1.4}
  .cr-foot{flex:none;display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--glass-border);background:var(--bg-1)}
  .cr-input{flex:1;min-height:42px;max-height:120px;padding:11px 14px;border-radius:21px;border:1px solid var(--glass-border);background:rgba(120,120,128,.14);color:var(--ink);font-family:'Inter';font-size:14.5px;line-height:1.4;resize:none;outline:none}
  body.day .cr-input{background:rgba(0,0,0,.04)}
  .cr-input:focus{border-color:var(--accent)}
  .cr-send{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .cr-send:disabled{opacity:.4}
  .cr-send svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  /* Runder Chat-Button im Match-Kopf (links neben Teilen). Der Rand-Schub der gesamten
     Button-Gruppe kommt von .screen-head h1{flex:1} - eigene margin-left:auto- und
     margin-right-Regeln (u.a. eine Platzreserve für die früher überall sichtbare Glocke)
     waren dadurch überflüssig und wurden entfernt. */

  /* ===== Standings-Tabelle (Americano/Mexikano/Liga) ===== */
  .st-table{width:100%;border-collapse:collapse;font-family:'Inter'}
  .st-table th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);text-align:center;padding:0 4px 10px;border-bottom:1px solid var(--glass-border)}
  .st-table th.name,.st-table td.name{text-align:left}
  .st-table th.pos,.st-table td.pos{width:30px;text-align:center}
  .st-table td{padding:12px 4px;font-size:13.5px;color:var(--ink);text-align:center;border-bottom:1px solid var(--glass-border);vertical-align:middle}
  .st-table tr:last-child td{border-bottom:none}
  .st-table td.name{font-weight:600;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
  .st-table td.pos{font-weight:800;color:var(--ink-soft)}
  .st-table tr.qualified td.pos{color:var(--accent-bright)}
  .st-table tr.qualified td.name{font-weight:800}
  .st-table td.pts{font-weight:800;color:var(--magenta)}
  .st-table td.w{color:#3ecf8e;font-weight:700}
  .st-table td.l{color:#e5484d;font-weight:700}
  .st-table td.diff{color:var(--ink-soft);font-weight:600}
  .st-group-head{font-size:13px;font-weight:800;color:var(--ink);margin:18px 0 8px}
  .st-group-head:first-child{margin-top:0}
  /* Americano/Mexikano: Punkte fett, S-U-N gedämpft, Top-3 mit farbigem Rang-Unterstrich */
  .st-table td.sun{color:var(--ink-soft);font-weight:600;letter-spacing:.02em}
  .st-table tr.medal td.pos{position:relative;color:var(--ink)}
  .st-table tr.medal td.pos::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:6px;width:18px;height:3px;border-radius:2px}
  .st-legend{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.45;color:var(--ink-soft)}
  .st-legend b{color:var(--ink);font-weight:700}

  /* ===== Rechtliches: Footer-Links + Overlay-Viewer, ohne Login erreichbar ===== */
  .auth-legal-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:22px 0 8px;padding-bottom:env(safe-area-inset-bottom,0)}
  .auth-legal-footer a{font-size:12.5px;color:var(--ink-soft);text-decoration:none;font-weight:600}
  .auth-legal-footer a:active{opacity:.7}
  .legal-overlay{position:fixed;inset:0;z-index:80;background:var(--bg-1);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .legal-overlay.open{display:block}
  .legal-sheet{max-width:600px;margin:0 auto;padding:0 16px 40px}
  .legal-content{font-size:14.5px;line-height:1.6;color:var(--ink);padding-bottom:20px}
  .legal-content h2{font-size:17px;font-weight:800;margin:22px 0 8px;color:var(--ink)}
  .legal-content h2:first-child{margin-top:6px}
  .legal-content p{margin:0 0 10px}
  .legal-content ul{margin:0 0 12px;padding-left:20px}
  .legal-content li{margin-bottom:6px}
  .legal-content strong{color:var(--ink)}

  .btn-danger-outline{background:transparent;color:#e5484d;border:1.5px solid #e5484d}
  .btn-danger-outline:active{background:rgba(229,72,77,.08)}

  /* ===== App-Einführung (Swipe-Onboarding) ===== */
  .intro-overlay{position:fixed;inset:0;z-index:90;background:var(--bg-1);display:none;flex-direction:column}
  .intro-overlay.open{display:flex}
  .intro-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .intro-track::-webkit-scrollbar{display:none}
  .intro-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:calc(env(safe-area-inset-top,0px) + 44px) 26px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .intro-stage{position:relative;width:100%;max-width:340px;margin:8px auto 0;min-height:230px;display:flex;align-items:center;justify-content:center}
  .intro-badge{display:inline-flex;align-items:center;justify-content:center;font-family:'Inter';font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-bright);background:var(--accent-glow);border-radius:999px;padding:6px 14px;margin-bottom:14px}
  .intro-title{font-family:'Inter';font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--ink);text-align:center;margin:20px 0 10px;line-height:1.2}
  .intro-text{font-size:15px;line-height:1.55;color:var(--ink-soft);text-align:center;max-width:340px;margin:0 auto}
  .intro-text strong{color:var(--ink)}
  .intro-dots{display:flex;justify-content:center;gap:7px;padding:6px 0 2px}
  .intro-dot{width:7px;height:7px;border-radius:50%;background:var(--glass-border);transition:width .2s,background .2s}
  .intro-dot.on{width:20px;background:var(--accent);border-radius:4px}
  .intro-foot{display:flex;align-items:center;gap:12px;padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 16px)}
  .intro-skip{background:none;border:0;color:var(--ink-soft);font-family:'Inter';font-weight:700;font-size:15px;cursor:pointer;padding:12px 4px}
  .intro-next{flex:1;background:var(--grad);color:#fff;border:0;border-radius:14px;font-family:'Inter';font-weight:800;font-size:16px;padding:15px;cursor:pointer;box-shadow:0 6px 18px var(--accent-shadow)}
  .intro-close-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:14px;width:34px;height:34px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);color:var(--ink-soft);font-size:17px;font-weight:700;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center}

  /* ===== Neue Einführung: iPhone-Mockups, Ball- und Hand-Animation ===== */
  /* Leicht schräg gestellte Telefonrahmen mit nachgebautem, echtem App-Inhalt. Kein Screenshot-
     Embedding (hielte die Datei schlank und bleibt gestochen scharf). */
  .ii-phone{position:relative;width:172px;background:#0d1020;border:4px solid #23263a;border-radius:26px;
    box-shadow:0 20px 44px rgba(0,0,0,.55);overflow:hidden;flex:none}
  .ii-phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:54px;height:13px;background:#23263a;border-radius:8px;z-index:5}
  .ii-phone.ii-sm{width:150px}
  .ii-tilt-l{transform:rotate(-5deg)}
  .ii-tilt-r{transform:rotate(5deg)}
  .ii-screen{padding:26px 9px 9px;display:flex;flex-direction:column;gap:6px;min-height:238px;font-family:'Inter';position:relative}
  /* Rote "Filzstift"-Ellipse direkt im Telefon (markiert die anklickbare Stelle) */
  .ii-mark{position:absolute;border:3px solid #f22c2c;border-radius:999px;transform:rotate(-4deg);pointer-events:none;z-index:6;box-shadow:0 0 0 1px rgba(242,44,44,.25)}

  /* --- Folie 1: Tennisball schießt aus dem Bildschirm --- */
  .ii-hero{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
  .ii-logo{font-family:'Inter';font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fff;text-align:center;margin-top:22px}
  .ii-logo .p1{color:var(--accent-bright)}
  .ii-claim{font-size:8.5px;color:rgba(255,255,255,.75);text-align:center;margin-top:3px;font-weight:600}
  .ii-form-line{height:16px;border:1px solid rgba(255,255,255,.18);border-radius:7px;margin:5px 10px 0;background:rgba(255,255,255,.04)}
  .ii-form-btn{height:20px;border-radius:8px;margin:8px 10px 0;background:var(--grad)}
  .ii-ball{position:absolute;left:50%;top:46%;width:40px;height:40px;border-radius:50%;z-index:8;pointer-events:none;
    background:radial-gradient(circle at 32% 28%,#f6ff8a,#cdea3e 55%,#9cc218);
    box-shadow:0 10px 26px rgba(0,0,0,.45), inset -4px -6px 10px rgba(0,0,0,.18);
    animation:iiBall 2.8s cubic-bezier(.33,.45,.45,1) infinite}
  .ii-ball::before,.ii-ball::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2.5px solid rgba(255,255,255,.9);border-color:transparent transparent transparent rgba(255,255,255,.9)}
  .ii-ball::before{transform:rotate(38deg)}
  .ii-ball::after{transform:rotate(218deg)}
  @keyframes iiBall{
    0%{transform:translate(-50%,-50%) scale(.18);opacity:0}
    10%{opacity:1}
    55%{transform:translate(calc(-50% + 86px),calc(-50% - 104px)) scale(1.45);opacity:1}
    78%{transform:translate(calc(-50% + 122px),calc(-50% - 138px)) scale(1.85);opacity:1}
    92%{opacity:0}
    100%{transform:translate(calc(-50% + 132px),calc(-50% - 148px)) scale(1.95);opacity:0}
  }

  /* --- Folie 2: iOS & Android nebeneinander mit tippender Hand --- */
  .ii-duo{display:flex;gap:10px;justify-content:center;align-items:flex-start;width:100%}
  .ii-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px}
  .ii-plat{font-size:11px;font-weight:800;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase}
  .ii-sheet{background:#1c1f2e;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:2px;margin-top:4px}
  .ii-row{display:flex;align-items:center;gap:6px;font-size:8.5px;font-weight:600;color:#e8eaf2;padding:6px 7px;border-radius:7px;position:relative}
  .ii-row svg{width:11px;height:11px;stroke:#e8eaf2;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .ii-row.dim{color:rgba(232,234,242,.45)}
  .ii-row.dim svg{stroke:rgba(232,234,242,.45)}
  .ii-urlbar{display:flex;align-items:center;gap:5px;margin-top:auto}
  .ii-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;background:#1c1f2e;border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:8px;font-weight:700;color:#cfd3e0;padding:6px 6px}
  .ii-dotbtn{position:relative;width:24px;height:24px;flex:none;border-radius:50%;background:#1c1f2e;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#e8eaf2;font-weight:800;font-size:11px;letter-spacing:1px}
  .ii-topbar{display:flex;align-items:center;gap:5px}
  /* Tippende Hand: startet mittig, klickt Schritt 1 und 2, in Endlosschleife */
  .ii-hand{position:absolute;z-index:9;font-size:30px;line-height:1;pointer-events:none;left:0;top:0;
    filter:drop-shadow(0 5px 9px rgba(0,0,0,.55));transform-origin:top center}
  .ii-hand.ios{animation:iiHandIos 6s ease-in-out infinite}
  .ii-hand.android{animation:iiHandAndroid 6s ease-in-out infinite}
  @keyframes iiHandIos{
    0%,100%{left:42%;top:52%;transform:scale(1)}
    18%{left:66%;top:88%;transform:scale(1)}
    24%{left:66%;top:88%;transform:scale(.78)}
    30%{left:66%;top:88%;transform:scale(1)}
    52%{left:34%;top:56%;transform:scale(1)}
    58%{left:34%;top:56%;transform:scale(.78)}
    64%{left:34%;top:56%;transform:scale(1)}
    84%{left:42%;top:52%;transform:scale(1)}
  }
  @keyframes iiHandAndroid{
    0%,100%{left:42%;top:55%;transform:scale(1)}
    18%{left:72%;top:12%;transform:scale(1)}
    24%{left:72%;top:12%;transform:scale(.78)}
    30%{left:72%;top:12%;transform:scale(1)}
    52%{left:36%;top:44%;transform:scale(1)}
    58%{left:36%;top:44%;transform:scale(.78)}
    64%{left:36%;top:44%;transform:scale(1)}
    84%{left:42%;top:55%;transform:scale(1)}
  }
  /* Zielstellen pulsieren synchron zum Tippen (Schritt 1 bei ~24%, Schritt 2 bei ~58%) */
  .ii-tap1{animation:iiTap1 6s ease-in-out infinite}
  .ii-tap2{animation:iiTap2 6s ease-in-out infinite}
  @keyframes iiTap1{0%,18%,32%,100%{box-shadow:0 0 0 0 rgba(242,44,44,0)}24%{box-shadow:0 0 0 7px rgba(242,44,44,.4)}}
  @keyframes iiTap2{0%,52%,66%,100%{box-shadow:0 0 0 0 rgba(242,44,44,0)}58%{box-shadow:0 0 0 7px rgba(242,44,44,.4)}}

  /* --- Nachgebaute App-Bausteine (Folien 3-6) --- */
  .ii-apphead{display:flex;align-items:center;justify-content:space-between;gap:5px}
  .ii-apptitle{font-size:11px;font-weight:800;color:#fff;line-height:1.15}
  .ii-evbtn{position:relative;background:#2f3bff;color:#fff;font-size:7.5px;font-weight:800;border-radius:999px;padding:5px 8px;white-space:nowrap}
  .ii-sec{font-size:7px;font-weight:800;letter-spacing:.05em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-top:4px}
  .ii-toggle{display:flex;background:rgba(255,255,255,.08);border-radius:999px;padding:2px;margin-top:3px}
  .ii-toggle span{flex:1;text-align:center;font-size:8px;font-weight:800;color:rgba(255,255,255,.6);padding:4px 0;border-radius:999px}
  .ii-toggle span.on{background:var(--grad);color:#fff}
  .ii-nav{display:flex;align-items:center;justify-content:space-around;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:6px 6px;margin-top:auto}
  .ii-nav .n{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:6px;font-weight:700;color:rgba(255,255,255,.6)}
  .ii-nav .n svg{width:13px;height:13px;stroke:rgba(255,255,255,.7);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ii-nav .plus{position:relative;width:30px;height:30px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-top:-16px;box-shadow:0 6px 14px var(--accent-shadow)}
  .ii-nav .plus svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round}
  .ii-stats{display:flex;gap:4px}
  .ii-stat{flex:1;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 2px;text-align:center}
  .ii-stat b{display:block;font-size:11px;color:#fff}
  .ii-stat span{font-size:6px;color:rgba(255,255,255,.6);font-weight:700}
  .ii-nivcard{position:relative;border-radius:12px;padding:10px 8px;background:linear-gradient(135deg,#2a1d6e,#8a1c9e);display:flex;align-items:center;gap:9px;margin-top:2px}
  .ii-ring{position:relative;width:64px;height:64px;flex:none;border-radius:50%;
    background:conic-gradient(from 210deg,#69DB7C 0 46%,rgba(255,255,255,.14) 46% 100%)}
  .ii-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#221457}
  .ii-ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
  .ii-ring .v b{font-size:14px;color:#fff;line-height:1}
  .ii-ring .v span{font-size:6.5px;color:rgba(255,255,255,.75);font-weight:700}
  .ii-trend{position:relative;display:inline-block;border:1px solid rgba(242,80,80,.7);color:#ff8f8f;font-size:7.5px;font-weight:800;border-radius:999px;padding:2px 7px;margin-top:5px}
  .ii-chart{margin-top:5px}
  .ii-chart .t{font-size:9px;font-weight:800;color:#fff;margin-bottom:2px}
  .ii-tiles{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:3px}
  .ii-tile{position:relative;border-radius:10px;padding:11px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:7px;font-weight:800;color:#fff;text-align:center;line-height:1.25}
  .ii-tile svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ii-tile.or{background:linear-gradient(135deg,#a34a08,#6b2f03)}
  .ii-tile.bl{background:linear-gradient(135deg,#1d3fa8,#132a75)}
  .ii-tile.ye{background:linear-gradient(135deg,#8a6d08,#5c4703)}
  .ii-tile.gr{background:linear-gradient(135deg,#0e6b3c,#07492a)}
  .ii-evcard{border:1px solid rgba(105,219,124,.4);border-radius:9px;padding:6px 7px;font-size:7px;color:rgba(255,255,255,.85);font-weight:600}
  .ii-evcard b{display:block;font-size:8.5px;color:#fff;margin-top:2px}

  .dt-section-divider{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--glass-border)}

  /* ===== Turnierbaum: horizontal scrollbare Spalten (Runde 1 links → Finale rechts) ===== */
  /* Größen des Turnierbaums laufen über Variablen -> der Umschalter tauscht nur die Stufe aus,
     Spaltenbreite, Abstände, Schrift und Verbindungslinien skalieren gemeinsam. */
  .bracket-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -4px 14px;padding:0 4px 6px;
    --bcw:186px;--bgap:22px;--bmh:74px;--bfs:12.5px;--bseed:19px;--bpad:8px}
  .bracket-scroll.bz-l{--bcw:238px;--bgap:28px;--bmh:92px;--bfs:14.5px;--bseed:23px;--bpad:10px}
  .bracket-scroll::-webkit-scrollbar{display:none}
  /* Umschalter für die Darstellungsgröße */
  .bracket-zoom{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-bottom:8px}
  .bracket-zoom .bz-lbl{flex:1;font-size:11.5px;font-weight:700;color:var(--ink-soft)}
  .bz-btn{border:1px solid var(--glass-border);background:var(--glass);color:var(--ink-soft);cursor:pointer;
    border-radius:999px;padding:5px 11px;font-family:'Inter';font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
  .bz-btn.on{background:var(--grad);color:#fff;border-color:transparent}
  .bz-btn:active{opacity:.75}
  /* Echter Turnierbaum: alle Runden-Spalten sind gleich hoch (align-items:stretch). Innerhalb einer
     Spalte teilen sich die Partien die Höhe gleichmäßig (flex:1) - dadurch liegt eine Partie der
     nächsten Runde automatisch exakt mittig zwischen ihren beiden Vorgängern. */
  .bracket-cols{display:flex;gap:var(--bgap);align-items:stretch;min-width:min-content}
  .bracket-col{flex:0 0 var(--bcw);display:flex;flex-direction:column}
  .bracket-col-head{flex:none;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);text-align:center;padding-bottom:8px}
  .bracket-col-body{flex:1;display:flex;flex-direction:column;min-height:0}
  .bm-slot{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:var(--bmh);padding:5px 0}
  /* Klammer zur vorherigen Runde: senkrechte Linie an der linken Kante der Partie, dazu zwei
     waagerechte Arme auf 25%/75% Höhe - genau dort sitzen die Mittelpunkte der beiden Vorgänger. */
  .bracket-col:not(:first-child) .bm-slot::before{
    content:"";position:absolute;left:calc(-1 * var(--bgap));width:var(--bgap);top:25%;height:50%;
    border-right:1.5px solid var(--glass-border);
    border-top:1.5px solid var(--glass-border);
    border-bottom:1.5px solid var(--glass-border);
    border-top-right-radius:6px;border-bottom-right-radius:6px;pointer-events:none;
  }
  .bracket-match{width:100%;border:1px solid var(--glass-border);border-radius:var(--r-sm);overflow:hidden;background:transparent;position:relative}
  .bracket-match.clickable{cursor:pointer}
  .bracket-match.clickable:active{opacity:.7}
  .bm-team{display:flex;align-items:center;gap:7px;padding:var(--bpad) 9px;font-size:var(--bfs);font-weight:600;color:var(--ink)}
  .bm-team + .bm-team{border-top:1px solid var(--glass-border)}
  .bm-team.won{font-weight:800;background:rgba(46,82,255,.10)}
  .bm-team.lost{color:var(--ink-soft);opacity:.65}
  /* Teamnummer aus der Auslosung, z. B. "#3" */
  .bm-seednum{flex:none;font-size:calc(var(--bfs) - 1px);font-weight:800;color:var(--accent-bright);min-width:20px}
  .bm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bm-score{flex:none;font-size:calc(var(--bfs) - .5px);font-weight:800;color:var(--ink-soft);min-width:10px;text-align:right}
  .bm-team.won .bm-score{color:var(--accent-bright)}
  .bm-tag{flex:none;font-size:9.5px;font-weight:800;text-transform:uppercase;color:var(--ink-soft);letter-spacing:.03em}
  .bm-pending{padding:4px 9px 7px;font-size:10px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
  .bracket-match.bye{border-style:dashed;opacity:.85}
  .bm-empty{padding:14px 9px;font-size:11.5px;font-weight:600;color:var(--ink-soft);text-align:center}
  .bracket-champion{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink);padding:12px 14px;margin-bottom:12px;border:1px solid rgba(212,160,23,.4);border-radius:var(--r-lg);background:rgba(212,160,23,.10)}
  body.day .mc-pill.public{color:#8a6208}
  body.day .mc-pill.friends{color:#0D9268}
  .mc-pill.time{background:rgba(57,57,57,.07);color:var(--ink-soft)}
  .mc-pill.place{background:rgba(57,57,57,.07);color:var(--ink-soft)}


  /* ===== Match-Vorschau: Kopfzeile (Datumsquadrat + Statuszeile/Pillen/Infos daneben) =====
     Alles rechts vom Quadrat liegt in EINER Spalte - dadurch beginnt auch die Statuszeile
     bündig hinter der Datumskachel. Feste Zeilenhöhen halten die Kachel maßstabil. */
  .mc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;padding-right:24px;min-width:0}
  .mc-date{flex:none;width:60px;height:60px;border-radius:14px;background:var(--grad);color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.02;
    box-shadow:0 4px 12px var(--accent-shadow);font-family:'Inter'}
  .mc-date .d{font-size:20px;font-weight:800}
  .mc-date .mo{font-size:12px;font-weight:700;opacity:.92}
  .mc-headinfo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden}
  .mc-headinfo .mc-top-line{margin:0 0 1px;padding:0;font-size:11.5px;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Pillen: immer genau EINE Zeile, nie umbrechen, bei Bedarf kürzen */
  .mc-headinfo .mc-pills{margin-bottom:0;padding-right:0;flex-wrap:nowrap;overflow:hidden;gap:5px;min-width:0}
  /* Kurze Pillen (Sichtbarkeit/Status) bleiben immer vollständig lesbar; gekürzt wird gezielt der
     Turniername, weil nur der beliebig lang werden kann. */
  .mc-headinfo .mc-pill{flex:0 0 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mc-headinfo .mc-pill.mc-pill-event{flex:0 1 auto;max-width:120px;min-width:44px}
  .mc-metainfo{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;flex-wrap:nowrap}
  .mc-meta-item{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:12px;font-weight:600;color:var(--ink-soft)}
  .mc-meta-item svg{flex:none;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mc-meta-item .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mc-meta-sep{flex:none;width:1px;height:12px;background:var(--line)}

  /* ===== Match-Vorschau: Aufstellung (kompakt) ===== */
  .mc-teams{border-top:1px solid var(--line);padding-top:8px}
  .mc-trow{display:flex;align-items:center;gap:10px}
  .mc-players{flex:1;min-width:0;display:flex;gap:10px}
  .mc-p{display:inline-flex;flex-direction:column;align-items:center;gap:5px;min-width:0;max-width:74px;text-decoration:none}
  .mc-p .mc-av{width:38px;height:38px}
  .mc-p .mc-name{font-size:12px;font-weight:700;text-align:center;max-width:74px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mc-p:active{opacity:.65}
  /* Niveau-Pille mittig an der Unterkante des Bildes */
  .mc-p .mc-niv{left:50%;right:auto;bottom:-5px;transform:translateX(-50%);min-width:22px;height:14px;padding:0 4px;font-size:8.5px;border-width:1.5px;border-color:var(--bg-1)}
  /* vs-Kreis mittig auf der Trennlinie zwischen beiden Teams */
  .mc-vs-line{display:flex;align-items:center;margin:7px 0}
  .mc-vs-line::before,.mc-vs-line::after{content:"";flex:1;height:1px;background:var(--line)}
  .mc-vs-badge{flex:none;width:26px;height:26px;margin:0 8px;border-radius:50%;border:1px solid var(--line);background:transparent;
    display:flex;align-items:center;justify-content:center;font-family:'Inter';font-size:10px;font-weight:800;color:var(--ink-soft)}
  /* Ergebnis - Gewinner in Akzentfarbe, ohne Kreis-Hinterlegung */
  .mc-trow .mc-score{gap:8px;align-items:center}
  .mc-trow .mc-score .sc{font-size:19px;font-weight:800;width:22px;min-width:22px;height:24px}
  .mc-trow .mc-score .sc.win::before{display:none}
  .mc-trow .mc-score .sc.empty{background:transparent;font-size:16px}
  /* Aktionszeile - nur noch fuer "Beitreten" (Zu-/Absage sitzt jetzt in den Team-Zeilen) */
  .mc-actions-row{display:flex;gap:10px;margin-top:9px}
  .mc-actions-row button{flex:1;height:38px;border-radius:12px;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .mc-actions-row button svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.6}
  .mc-join-btn{flex:1;height:44px;border-radius:14px;border:0;background:var(--grad);color:#fff;
    font-family:'Inter';font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 5px 14px var(--accent-shadow)}
  .mc-join-btn:active{filter:brightness(.96)}
  .mc-join-btn:disabled{opacity:.55;cursor:default}
  .mc-team{display:flex;align-items:center;gap:10px}
  .mc-player{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
  .mc-av-wrap{position:relative;flex:none}
  /* Niveau-Pille für die größeren Avatare (Match erstellen / Match-Detail): mittig an der Unterkante.
     Wert kommt bei bereits erstellten Matches aus m.niveauMap (eingefroren zum Match-Zeitpunkt),
     beim Erstellen/Auswählen dagegen live aus dem Profil. */
  .pos-av-wrap,.md-pos-av-wrap{position:relative;flex:none;display:inline-flex}
  .pos-niv,.md-pos-niv{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);min-width:22px;height:15px;padding:0 4px;border-radius:999px;font-size:9px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--bg-1);font-family:'Inter';white-space:nowrap}
  .mc-av{width:30px;height:30px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .mc-av svg{width:58%;height:58%;fill:var(--ink-soft)}
  .mc-niv{position:absolute;bottom:-3px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;font-size:8.5px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;font-family:'Inter'}
  .mc-name{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
  .mc-name.open{color:var(--ink-soft)}
  /* vs.-Trennzeile: je eine Linie unter beiden Spalten, symmetrisch */
  .mc-vs{display:flex;align-items:center;margin:6px 0;gap:0}
  .mc-del{position:absolute;top:11px;right:11px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(57,57,57,.08);color:var(--ink-soft);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
  .mc-del:hover{background:rgba(229,72,77,.13);color:#c0353a}
  /* Score je Team-Zeile (rechts) */
  .mc-score{display:flex;gap:7px;flex:none}
  .mc-score .sc{position:relative;font-family:'Inter';font-weight:700;font-size:14px;color:var(--ink-soft);min-width:24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;text-align:center}
  .mc-score .sc > span{position:relative;z-index:1}
  .mc-score .sc.win{color:var(--accent-bright)}
  .mc-score .sc.win::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(47,107,255,.16)}
  .mc-score .sc.empty{background:rgba(57,57,57,.07);border-radius:50%;color:var(--ink-soft);font-weight:700}
  /* Block-Begrenzung: zweites Match halbhoch + auslaufend */
  .fade-wrap{position:relative;max-height:104px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent 96%);mask-image:linear-gradient(to bottom,#000 38%,transparent 96%)}
  .more-hint{margin-top:10px;text-align:center;font-size:13px;font-weight:700;color:var(--accent-bright);cursor:pointer;padding:8px;border-radius:10px;background:var(--accent-glow)}
  .more-hint:active{background:rgba(47,107,255,.12)}
  .court-toggle{font-family:inherit;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass);color:var(--ink-soft);cursor:pointer;
    white-space:nowrap;justify-self:start;align-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .court-toggle.on{background:rgba(47,158,68,.12);border-color:rgba(47,158,68,.3);color:#1f7a37}
  .md-pos-pick{flex:none;font-size:12px;font-weight:700;color:var(--accent-bright);background:var(--accent-glow);border:1px solid rgba(46,82,255,.25);border-radius:9px;padding:6px 12px;cursor:pointer}
  /* Entfernen: bewusst nur ein kleines Icon statt eines Textbuttons wie bei "wählen" - es ist
     eine seltene, folgenreiche Aktion und soll sich optisch klar von den positiven Aktionen
     abheben, ohne dabei aufdringlich viel Platz in der Zeile zu beanspruchen. */
  .md-pos-remove{flex:none;width:30px;height:30px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;cursor:pointer;
    background:rgba(226,46,58,.10);border:1px solid rgba(226,46,58,.25)}
  .md-pos-remove svg{width:14px;height:14px;stroke:#E8636F;fill:none;stroke-width:2.2;stroke-linecap:round}
  .md-pos-remove:active{opacity:.6}
  .md-pos-req{flex:none;font-size:12px;font-weight:700;color:#fff;background:var(--grad);border:none;border-radius:9px;padding:6px 12px;cursor:pointer}
  .md-pos-drag{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:grab;color:var(--ink-soft);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .md-pos-drag svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;pointer-events:none}
  .md-pos-drag:active{cursor:grabbing}
  .md-pos{-webkit-user-select:none;user-select:none}
  .md-pos.dragging{opacity:.35}
  .md-pos.drag-over{outline:2px dashed var(--accent-bright);outline-offset:-2px;border-radius:12px;background:var(--accent-glow)}
  .md-pos-ghost{position:fixed;z-index:200;pointer-events:none;opacity:.96;box-shadow:0 12px 28px rgba(0,0,0,.4);transform:scale(1.03);border-radius:12px}
  .md-pos-captain{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:5px;color:#f0b43e;vertical-align:-3px}
  .md-pos-captain svg{width:14px;height:14px;fill:currentColor}
  .padivo-toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(20px);background:var(--card-bg);color:var(--text-main);border:1px solid var(--glass-border);box-shadow:var(--card-shadow);border-radius:999px;padding:12px 20px;font-size:13px;font-weight:700;z-index:80;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;max-width:88vw;text-align:center;backdrop-filter:blur(var(--glass-blur-px));will-change:opacity, transform}
  .padivo-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .md-pay-track{flex:none;display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink-soft);background:rgba(57,57,57,.06);border:1px solid var(--line);border-radius:9px;padding:6px 10px;cursor:pointer}
  .md-pay-track svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;opacity:.35}
  .md-pay-track.paid{color:#1f7a37;background:rgba(47,158,68,.12);border-color:rgba(47,158,68,.3)}
  .md-pay-track.unpaid{color:#D4A017;background:rgba(212,160,23,.10);border-color:rgba(212,160,23,.3)}
  .md-pay-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;margin-top:10px;border:1px solid var(--glass-border);border-radius:var(--r-sm);font-size:13px;font-weight:700;color:var(--ink)}
  .md-pay-summary.all-paid{border-color:rgba(47,158,68,.35);background:rgba(47,158,68,.08);color:#2f9e44}
  .md-pay-track.paid svg{opacity:1}
  /* Pull-to-Refresh */
  .ptr{position:fixed;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:center;height:0;overflow:hidden;z-index:40;pointer-events:none;transition:height .2s}
  .ptr-spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(46,82,255,.25);border-top-color:var(--accent-bright);margin-top:14px;opacity:0;transition:opacity .2s}
  .ptr.visible .ptr-spinner{opacity:1}
  .ptr.spin .ptr-spinner{animation:ptrspin .7s linear infinite}
  @keyframes ptrspin{to{transform:rotate(360deg)}}
  .md-sc-show{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-family:'Inter';font-weight:700;font-size:15px;color:var(--ink-soft)}
  .md-sc-show > span{position:relative;z-index:1}
  .md-sc-show.win{color:var(--accent-bright)}
  .md-sc-show.win::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(47,107,255,.16)}
  /* Ergebnis-Eingabe-Seite */
  .res-modes{display:flex;flex-direction:column;gap:8px}
  .res-modes button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:13px 15px;border:1.5px solid var(--card-line);box-shadow:none;background:transparent;border-radius:20px;cursor:pointer;text-align:left}
  .res-modes button.on{border-color:transparent;background:var(--accent-glow);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .res-modes .rm-title{font-weight:700;font-size:15px;color:var(--ink)}
  .res-modes .rm-sub{font-size:12px;color:var(--ink-soft)}
  /* Schwebende "Fertig"-Leiste über der Tastatur (Ergebniserfassung) */
  .kb-done{position:fixed;right:14px;bottom:10px;z-index:90;display:none;align-items:center;gap:7px;
    padding:10px 16px;border-radius:999px;border:1px solid var(--glass-border);background:var(--bg-1);
    color:var(--accent-bright);font-family:'Inter';font-size:14px;font-weight:800;cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.28)}
  .kb-done.on{display:flex}
  .kb-done svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  /* Nachlade-Marke am Listenende (wird entfernt, sobald alles gerendert ist) */
  .list-more{padding:14px 4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-soft);opacity:.75}
  /* Golden Court: Partien untereinander statt nebeneinander - Team oben, Gegner darunter,
     Punkteingabe jeweils rechts daneben auf derselben Zeile. */
  .gc-match{border:1px solid var(--glass-border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px}
  .gc-court{font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--accent-bright);margin-bottom:8px}
  .gc-side{display:flex;align-items:center;gap:10px;min-width:0}
  .gc-side + .gc-side{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
  .gc-team{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gc-team.won{font-weight:800}
  .gc-pts{flex:none;min-width:34px;text-align:right;font-size:18px;font-weight:800;color:var(--ink-soft)}
  .gc-pts.won{color:var(--accent-bright)}
  .gc-in{flex:none;width:64px;text-align:center;font-size:16px;font-weight:800}
  /* Noch nicht freigeschaltete Satzspalten: Die Felder bleiben im DOM (damit der Tastaturfokus
     beim Aufdecken erhalten bleibt), werden aber aus dem Raster genommen - so passt die
     Spaltenzahl aus --cols weiterhin zur tatsächlichen Darstellung. */
  .res-hidden{display:none !important}
  .res-grid-head{display:grid;grid-template-columns:1fr repeat(var(--cols,3), 48px);gap:8px;align-items:center;margin-bottom:8px}
  .res-grid-head .rgh{font-size:12px;color:var(--ink-soft);text-align:center;font-weight:600}
  .res-team-block{margin-bottom:10px}
  .res-prow{display:grid;grid-template-columns:1fr repeat(var(--cols,3), 48px);gap:8px;align-items:center;margin-bottom:8px}
  .res-pinfo{display:flex;align-items:center;gap:9px;min-width:0}
  .res-pav{width:32px;height:32px;border-radius:50%;background:rgba(57,57,57,.12) center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .res-pav svg{width:60%;height:60%;fill:var(--ink-soft)}
  .res-pname{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .res-cell{height:46px;border:1px solid var(--glass-border);border-radius:11px;text-align:center;font-family:'Inter';font-weight:700;font-size:18px;background:var(--glass);color:var(--ink);box-sizing:border-box;width:100%}
  .res-cell:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
  .res-cell:disabled{background:rgba(57,57,57,.04)}
  .res-vs-sep{height:1px;background:var(--line);margin:4px 0 14px}