/* ============================================================================
   NEXT DESTINY ESPORTS — Homepage · design4 "Raku-Brand"
   Der Phoenix als Material: russschwarzer Grund, silbrig krakelierte Glasur, und nur was
   "noch gluehrt" leuchtet in Ember-Orange (naechstes Match, offene Bewerbung, Hauptaktion).
   Feuer ist Material und Zustand, nie ein Glow-Effekt. Schrift: Knewave (Trockenpinsel) nur
   fuer grosse Headlines, Barlow Condensed (karge Grotesk, gesperrte Versalien) fuer Labels,
   Navigation, Zahlen und Buttons, Barlow fuer Fliesstext. Bilder sind "gebrannt"
   (rauchgetoent) und bekommen unter Hitze (Hover/Fokus, auf Touch immer) ihre Farbe zurueck.
   Aufbau dieser Datei:
     1. Tokens (dark default, light option)    2. Basis, Browser-Flaechen
     3. Navigation                              4. Buttons
     5. Sektionen & Ueberschriften              6. Hero (Slider + Marken-Hero)
     7. Baender (Bild, Slogans, Sponsoren)      8. Karten (Teams, News, Matches, Events …)
     9. Team-Hub, Team-Detail, Spieler          10. Formulare (Bewerbung, Kontakt)
    11. Seiten (About, Legal, DL, Shop, Turniere, Fehler, Wartung)
    12. Overlays (Dialog, Lightbox, Spieler-Modal, Toasts, Splash)
    13. Footer                                  14. Motion, Interaktion, Touch, Fokus
    15. Raku-Material (Korn, Krakelee, Pinselstrich, Hitze-Reveal)
   Alle Klassen- und data-Hooks aus render.js/main.js/page-sections bleiben unveraendert.
   ============================================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Ruß, Asche, Ton (warm getoent statt reinem Schwarz) */
  --bg:#0b0b0c;--bg2:#131314;--bg3:#1c1c1e;--clay:#3b3b3f;
  --card:#131314;--card2:#18181a;
  --border:rgba(239,236,231,.1);--border2:rgba(239,236,231,.2);
  /* Rauch-Tinte und Aschegrau */
  --text:#efece7;--text2:#a8a39b;--text3:#8a857e;
  /* Krakelee-Glasur (glasierte Flaechen) und ihre Tinte */
  --glaze:#e6e3dd;--glaze2:#cdc9c1;--glaze-ink:#141312;--glaze-ink2:#4a4641;--glaze-ember:#b82d00;
  --crackle-line:rgba(20,18,16,.78);
  --crazing:url("/assets/raku-crazing.webp");--crazing-size:168px 168px;
  /* Ember = Markenorange: nur fuer das, was gerade "gluehrt" */
  --accent:#f93d00;--accent2:#ff5a1f;--accent3:#ff8a5c;--ember:#f93d00;--ember-deep:#b82d00;
  /* Schrift AUF Ember-Flaechen: Tinte 5.34:1 (Weiss nur 3.69:1); Portal-Palette und Elemente mit
     eigenem Akzent setzen sie per inkOn() neu. Ember als Text: im Hellen abgedunkelt. */
  --on-accent:#0b0b0c;--accent-text:#ff6a33;
  /* Schrift auf Live-Rot (Tinte im Dunkeln, Weiss im Hellen) */
  --on-red:#0b0b0c;
  --magenta:var(--accent);--cyan:var(--accent);--cyan2:var(--accent2);--pink:var(--accent2);
  --green:#3ec27a;--orange:#e8a33a;--red:#f47070;
  --grad:var(--accent);--grad-h:var(--accent);--glow:rgba(249,61,0,.28);
  /* Typo */
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ui:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --font2:var(--font);
  --font-display:"Knewave","Barlow Condensed",system-ui,sans-serif;
  /* Gebrannte Bilder: Rauchton in Ruhe, Farbe unter Hitze */
  --fired:grayscale(.92) contrast(1.06) brightness(.82);
  --heated:grayscale(0) contrast(1.02) brightness(1);
  /* Form */
  --r-xs:2px;--r:2px;--r2:3px;--r3:4px;
  --shadow-pop:0 28px 64px -26px rgba(0,0,0,.9),0 3px 10px rgba(0,0,0,.45);
  /* Layout */
  --nav-h:72px;--nav-bg:var(--bg);--menu-bg:#141415;
  --maxw:1440px;--gutter:clamp(16px,3.2vw,48px);
  --glass:rgba(239,236,231,.05);--glass-border:rgba(239,236,231,.1);--glass-border-hover:rgba(239,236,231,.22);
  /* Motion (unveraendert aus dem Motion-System) */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-press:140ms;--dur-hover:180ms;--dur-pop:200ms;--dur-modal:260ms;--dur-heat:420ms;
  --tr-colors:color var(--dur-hover) ease,background-color var(--dur-hover) ease,border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease;
  --tr-press:scale var(--dur-press) var(--ease-out);
  --tr-lift:transform var(--dur-hover) var(--ease-out);
  color-scheme:dark;
}
:root[data-theme="light"]{
  /* Hell: Rauch/Glasur als Grund, Ruß als Tinte, Ember bleibt das Gluehende */
  --bg:#efece7;--bg2:#f7f6f3;--bg3:#e4e0d9;--clay:#c9c4bb;
  --card:#f7f6f3;--card2:#fbfaf8;
  --border:rgba(20,18,16,.12);--border2:rgba(20,18,16,.24);
  --text:#141312;--text2:#4d4944;--text3:#5f5a54;
  --glaze:#1c1c1e;--glaze2:#2a2a2d;--glaze-ink:#efece7;--glaze-ink2:#a8a39b;--glaze-ember:#ff6a33;
  --crackle-line:rgba(239,236,231,.34);
  --glass:rgba(20,18,16,.05);--glass-border:rgba(20,18,16,.12);--glass-border-hover:rgba(20,18,16,.26);
  /* Ember als Text auf Rauchpapier braucht >= 4.5:1 (#f93d00 nur ~3.3:1), auch auf getoenten Chips. */
  --accent-text:color-mix(in srgb,var(--accent) 62%,#000);
  /* Status als Text auf Rauchpapier (>= 4.5:1, auch auf 18 % getoenten Chips); Live-Rot traegt Weiss. */
  --green:#125a35;--orange:#6b4600;--red:#962019;--on-red:#fff;
  --glow:rgba(249,61,0,.22);
  --nav-bg:var(--bg);--menu-bg:#fbfaf8;
  --fired:grayscale(.85) contrast(1.04) brightness(.97);
  --shadow-pop:0 28px 64px -28px rgba(20,18,16,.32),0 3px 10px rgba(20,18,16,.1);
  color-scheme:light;
}

/* Elemente mit eigenem --accent (Saison, Shop-Promo, Slogan-Band, Portal-Palette auf :root)
   leiten den Akzent-Text neu ab. */
[style*="--accent:"]{--accent-text:color-mix(in srgb,var(--accent) 80%,#fff)}
:root[data-theme="light"] [style*="--accent:"],:root[data-theme="light"][style*="--accent:"]{--accent-text:color-mix(in srgb,var(--accent) 62%,#000)}

/* ---------- 2. Basis & Browser-Flaechen ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:1rem;font-family:var(--font);min-height:100vh;min-height:100svh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;line-height:1.6;caret-color:var(--accent)}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
img{max-width:100%}
::selection{background:var(--accent);color:var(--on-accent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg3);border:2px solid var(--bg);border-radius:0}
@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:#2a2a2a}}
html{scrollbar-color:var(--bg3) var(--bg)}
/* Die frühere Ember-Hintergrundebene (index.html .nd-fx, fx.js) gehoert zum alten Look. Markup
   und Skript bleiben (keine Funktion daran), die Ebene wird nicht mehr gezeigt. */
.nd-fx{display:none}

/* Ueberschriften: Barlow Condensed 800, Versalien, leicht gesperrt (die karge Grotesk traegt die Struktur). */
.sec-title,.hero h1,.hero-slide-title,.feat-news-title,.join-strip h2,.td-hero-name,.pp-hero-name,.thub-title,.thub-shelf-name,
.cms-page-title,.section-band-title,.section-band-slogan,.dl-title,.game-page-name,.maint-title,.error-title,.pp-sec-title,
.members-group-title,.footer-brand-name,.tourn-name{font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:.035em;line-height:.95}
/* Knewave (Trockenpinsel) nur an vier Stellen: Hero-Claim, Aufmacher-Titel, About-Statement, Footer-Wortmarke. */
.hero h1,.hero-slide-title,.feat-news-title,.join-strip h2,.footer-brand-name{font-family:var(--font-display);font-weight:400;letter-spacing:.005em;line-height:.98}
/* Markenname in der Leiste: karge Grotesk, nicht Pinsel (Lesbarkeit klein). */
.nav-name{font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:.06em;line-height:1}
/* Zahlen: karge Grotesk, schwer, tabellarisch. */
.stat-num,.acard-val,.match-score-num,.live-ticker-score,.thub-stat-num,.pp-stat-value,.ecard-day,.pp-bar-val{font-family:var(--font-ui);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
/* Kleine Versal-Labels: karge Grotesk, gesperrt (wie die Brennstufen-Etiketten). */
.stat-label,.acard-label,.tcard-game,.ncat,.match-game,.match-status-badge,.live-ticker-status,.live-ticker-game,.status-pill,
.ecard-badge,.ecard-month,.dl-season,.dl-game,.dl-date,.dl-winner-label,.pp-stat-label,.md-label,.tpr-label,.thub-stat-label,
.footer-col h4,.news-filter-year-label,.apply-gate-title,.team-questions-title,.feat-news-tag,.shop-promo-shop,.sp-tier,
.chip2,.thub-pill,.thub-toggle,.news-filter-tab,.ncard-read,.match-watch,.pcard-cta,.mcard-game,.sec-tag{font-family:var(--font-ui);font-weight:600;text-transform:uppercase;letter-spacing:.12em}

/* ---------- 3. Navigation ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;height:var(--nav-h);background:var(--bg);border-bottom:1px solid transparent;transition:border-color var(--dur-modal) ease}
#nav.scrolled{border-bottom-color:var(--border)}
.nav-inner,.nav-shell{height:100%;padding:0 var(--gutter);display:flex;align-items:center;gap:2rem;position:relative}
.nav-logo,.nav-logo-btn{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;background:none;border:none;flex:0 0 auto;transition:var(--tr-press)}
.nav-logo-img{width:44px;height:44px;object-fit:contain;flex-shrink:0;border-radius:0}
.nav-name{font-size:1.25rem;white-space:nowrap;line-height:1}
/* Phoenix-Flammen-Effekt fuers Wortzeichen — nur wenn im CMS aktiviert (brand_flame). */
.nav-name-flame{background:linear-gradient(0deg,#c41200 0%,#ff2d00 30%,#ff5e00 62%,#ff7a1a 86%,#ff9b4d 100%);background-size:100% 220%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:ndFlameRise 2.6s linear infinite,ndFlameFlicker 1.9s ease-in-out infinite;will-change:filter,background-position}
@keyframes ndFlameRise{0%{background-position:50% 100%}100%{background-position:50% -120%}}
@keyframes ndFlameFlicker{0%,100%{filter:drop-shadow(0 0 4px rgba(255,70,0,.6)) brightness(1)}20%{filter:drop-shadow(0 0 9px rgba(255,90,0,.85)) brightness(1.14)}45%{filter:drop-shadow(0 0 3px rgba(255,50,0,.5)) brightness(.95)}70%{filter:drop-shadow(0 0 11px rgba(255,110,0,.95)) brightness(1.18)}85%{filter:drop-shadow(0 0 6px rgba(255,80,0,.7)) brightness(1.05)}}
@media (prefers-reduced-motion:reduce){.nav-name-flame{animation:none;filter:drop-shadow(0 0 6px rgba(255,90,0,.6))}}
.nav-center,.nav-wrap{display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow:visible;height:100%}
.nav-link{position:relative;display:inline-flex;align-items:center;height:100%;padding:0 .95rem;color:var(--text);opacity:.8;font-size:.95rem;font-family:var(--font-ui);font-weight:600;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;border-radius:0;transition:opacity var(--dur-hover) ease,color var(--dur-hover) ease,var(--tr-press)}
/* Aktiver Link: Ember-Pinselstrich (Maske), zieht sich von links auf */
.nav-link::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:15px;height:8px;background:var(--accent);-webkit-mask:var(--brush) center/100% 100% no-repeat;mask:var(--brush) center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path var(--dur-modal) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-link:hover{opacity:1}}
.nav-link.active{opacity:1}
.nav-link.active::after{clip-path:inset(0)}
.nav-link-ext,.nav-subitem-ext,.nav-subitem-parent{display:inline-flex;align-items:center;gap:.35rem}
.nav-item-icons{display:inline-flex;align-items:center;gap:.28rem;margin-left:.3rem}
.nav-external-icon{width:.78rem;height:.78rem;opacity:.7;flex:0 0 auto}
.nav-dropdown-icon{width:.72rem;height:.72rem;opacity:.7;flex:0 0 auto;transition:transform var(--dur-pop) var(--ease-out),opacity var(--dur-pop) ease}
.nav-right,.nav-controls{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto}
.nav-right.nav-controls{width:auto}
/* Desktop-Submenue: oeffnet vom Ausloeser (origin-aware), schliesst schneller als es oeffnet. */
.nav-dropdown{position:relative;display:inline-flex;align-items:center;height:100%}
.nav-dropdown .nav-link{display:inline-flex;align-items:center;gap:.35rem}
.nav-submenu{position:absolute;top:100%;left:0;scale:.98;transform-origin:top left;min-width:250px;background:var(--menu-bg);border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:0;padding:.4rem;display:flex;flex-direction:column;gap:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 120ms ease,scale 120ms var(--ease-out),visibility 0s linear 120ms;z-index:100;box-shadow:var(--shadow-pop)}
.nav-dropdown-root>.nav-submenu-root{bottom:auto;overflow:visible}
.nav-dropdown:hover>.nav-link .nav-dropdown-icon,.nav-dropdown:focus-within>.nav-link .nav-dropdown-icon{transform:rotate(180deg);opacity:1}
.nav-dropdown:hover>.nav-submenu,.nav-dropdown:focus-within>.nav-submenu{opacity:1;visibility:visible;pointer-events:auto;scale:1;transition:opacity var(--dur-pop) var(--ease-out),scale var(--dur-pop) var(--ease-out),visibility 0s linear 0s}
.nav-submenu::before{content:"";position:absolute;left:-16px;right:-16px;top:-12px;height:12px}
.nav-subitem{appearance:none;display:flex;align-items:center;border:none;background:none;color:var(--text2);text-align:left;padding:.65rem .85rem;font-size:.92rem;font-weight:600;border-radius:0;cursor:pointer;transition:var(--tr-colors);white-space:nowrap;width:100%}
@media (hover:hover) and (pointer:fine){.nav-subitem:hover{background:var(--glass);color:var(--text)}}
.nav-subitem.active{color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.nav-dropdown-nested{position:relative;display:block;width:100%;height:auto}
.nav-dropdown-nested>.nav-subitem{justify-content:space-between}
.nav-dropdown-nested>.nav-subitem .nav-dropdown-icon{transform:rotate(-90deg)}
.nav-dropdown-nested:hover>.nav-subitem .nav-dropdown-icon,.nav-dropdown-nested:focus-within>.nav-subitem .nav-dropdown-icon{transform:rotate(0deg);opacity:1}
.nav-submenu-nested{top:-.45rem;left:calc(100% + .4rem);transform:none;transform-origin:top left;z-index:101;border-top-width:1px}
.nav-submenu-nested::before{left:-10px;right:auto;top:0;bottom:0;width:12px;height:auto}
.nav-desktop-only{display:inline-flex}
.nav-logo-img,.nav-burger{flex-shrink:0}
/* Icon-Buttons rechts: Theme, Sprache, Burger */
.theme-toggle,.lang-globe-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r);background:transparent;border:1px solid transparent;color:var(--text);opacity:.82;cursor:pointer;transition:opacity var(--dur-hover) ease,var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.theme-toggle:hover,.lang-globe-btn:hover{opacity:1;background:var(--glass);border-color:var(--glass-border)}}
.theme-toggle .icon-moon{display:none}.theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}
.lang-globe{position:relative}
.lang-globe-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:170px;background:var(--menu-bg);border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:0;padding:.35rem;opacity:0;visibility:hidden;scale:.98;transform-origin:top right;transition:opacity 120ms ease,scale 120ms var(--ease-out),visibility 0s linear 120ms;z-index:510;box-shadow:var(--shadow-pop)}
.lang-globe.open .lang-globe-menu{opacity:1;visibility:visible;scale:1;transition:opacity var(--dur-pop) var(--ease-out),scale var(--dur-pop) var(--ease-out),visibility 0s}
.lang-option{display:block;width:100%;text-align:left;padding:.55rem .8rem;font-size:.88rem;font-weight:600;color:var(--text2);background:none;border:none;cursor:pointer;transition:var(--tr-colors);font-family:var(--font)}
@media (hover:hover) and (pointer:fine){.lang-option:hover{color:var(--text);background:var(--glass)}}
.lang-option.active{color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 8px;cursor:pointer;background:none;border:none;transition:var(--tr-press)}
.nav-burger span{display:block;height:2px;background:var(--text);transition:transform var(--dur-pop) var(--ease-out),opacity 120ms ease}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Mobile-Menue: volle Breite unter der Leiste */
.nav-mobile{display:none;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--border);padding:.4rem var(--gutter) max(1.2rem,env(safe-area-inset-bottom));height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
.nav-mobile.open{display:flex;opacity:1;transform:none;transition:opacity var(--dur-pop) var(--ease-out),transform var(--dur-modal) var(--ease-out)}
@starting-style{.nav-mobile.open{opacity:0;transform:translateY(-8px)}}
.nav-m-link{display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;padding:1rem .1rem;font:inherit;font-size:1.15rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text);background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;cursor:pointer;white-space:normal}
@media (hover:hover) and (pointer:fine){.nav-m-link:hover{color:var(--accent-text)}}
.nav-m-link.active{color:var(--accent-text)}
.nav-m-group{border-bottom:1px solid var(--border)}
.nav-m-parent{border-bottom:0}
.nav-m-chev{margin-left:auto;display:inline-flex;align-items:center;padding-left:.5rem}
.nav-m-chev .nav-dropdown-icon{width:.9rem;height:.9rem;opacity:.8;transition:transform var(--dur-pop) var(--ease-out)}
.nav-m-group.is-open>.nav-m-parent .nav-dropdown-icon{transform:rotate(180deg)}
.nav-m-sub{display:none;flex-direction:column;margin:0 0 .5rem;padding-left:1rem;border-left:1px solid var(--border2)}
.nav-m-group.is-open>.nav-m-sub{display:flex;opacity:1;transform:none;transition:opacity var(--dur-pop) var(--ease-out),transform var(--dur-pop) var(--ease-out)}
@starting-style{.nav-m-group.is-open>.nav-m-sub{opacity:0;transform:translateY(-4px)}}
.nav-m-sub .nav-m-link{font-size:1rem;font-family:var(--font);font-weight:600;text-transform:none;letter-spacing:0;color:var(--text2);padding:.8rem .1rem}
.nav-m-sub .nav-m-link:last-child{border-bottom:0}
.nav-m-self{font-weight:700;color:var(--text)}
.nav-mobile .btn-discord,.nav-mobile .btn-login{display:flex;width:100%;margin-top:.7rem;text-align:center;justify-content:center}
@media (max-width:1080px){
  .nav-inner,.nav-shell{gap:.75rem}
  .nav-logo,.nav-logo-btn{flex:0 1 auto;min-width:0}
  .nav-name{overflow:hidden;text-overflow:ellipsis}
  .nav-center,.nav-dropdown,.nav-submenu,.nav-caret{display:none}
  .nav-burger{display:flex}
  .nav-desktop-only,.nav-right .nav-desktop-only{display:none}
}
@media (max-width:520px){
  .nav-logo-img{width:34px;height:34px}
  .nav-name{font-size:1.02rem}
  .nav-right,.nav-controls{gap:.15rem}
  .theme-toggle,.lang-globe-btn{width:36px;height:36px}
}
#app{display:flex;flex-direction:column;min-height:100vh}
#root{padding-top:var(--nav-h);flex:1}

/* ---------- 4. Buttons ---------- */
.btn-glow,.btn-ghost,.btn-white,.btn-login,.btn-discord,.btn-admin,.hero-slide-cta,.section-band-cta,.shop-promo-cta{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.6rem;border-radius:var(--r);font-size:.95rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.12em;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--tr-colors),var(--tr-press)}
.btn-glow,.btn-login,.btn-admin{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
@media (hover:hover) and (pointer:fine){.btn-glow:hover,.btn-login:hover,.btn-admin:hover{background:var(--accent2);border-color:var(--accent2)}}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--text);background:var(--glass)}}
.btn-white{background:var(--glaze);color:var(--glaze-ink);border:1px solid var(--glaze)}
@media (hover:hover) and (pointer:fine){.btn-white:hover{background:var(--glaze2);border-color:var(--glaze2)}}
.btn-discord{background:transparent;color:var(--text);border:1px solid var(--border2)}
@media (hover:hover) and (pointer:fine){.btn-discord:hover{border-color:#5865f2;background:rgba(88,101,242,.14)}}
.btn-login,.btn-discord{min-height:40px;padding:0 1.1rem;font-size:.88rem}
.btn-compact{min-height:40px;padding:0 1.1rem;font-size:.85rem}
.btn-glow:disabled,.btn-ghost:disabled{opacity:.45;cursor:not-allowed}
.text-link{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem 0;border:0;background:none;border-bottom:2px solid var(--border2);border-radius:0;color:var(--text);font-size:.95rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:color var(--dur-hover) ease,var(--tr-press)}
.text-link .nd-icon-arrow{width:18px;height:18px;transition:var(--tr-lift)}
@media (hover:hover) and (pointer:fine){.text-link:hover{color:var(--text);border-bottom-color:var(--text)}.text-link:hover .nd-icon-arrow{transform:translateX(3px)}}
.text-link:active{scale:.97}
/* Icon-Set: Linien-SVGs in Textfarbe */
.nd-icon{width:1em;height:1em;flex:0 0 auto;vertical-align:-.125em}
.nd-icon-arrow{width:1.1em;height:1.1em}
.footer-heart{display:inline-flex;color:var(--text3);margin:0 .15em;vertical-align:-.1em}
/* "Alle ansehen" im Sektionskopf: Text-Link mit Pfeil statt Kasten (Kategorie-Standard). */
.sec-hdr-row>.btn-ghost,.sec-hdr-row .sec-action-row>.btn-ghost{min-height:0;padding:.35rem 0;border:0;background:none;border-bottom:2px solid var(--accent);border-radius:0;font-size:.95rem}
.sec-hdr-row>.btn-ghost::after,.sec-hdr-row .sec-action-row>.btn-ghost::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:var(--tr-lift)}
@media (hover:hover) and (pointer:fine){.sec-hdr-row>.btn-ghost:hover,.sec-hdr-row .sec-action-row>.btn-ghost:hover{background:none;color:var(--accent-text)}.sec-hdr-row>.btn-ghost:hover::after,.sec-hdr-row .sec-action-row>.btn-ghost:hover::after{transform:translateX(3px)}}

/* ---------- 5. Sektionen & Ueberschriften ---------- */
.sec{padding:clamp(72px,9vw,128px) var(--gutter);max-width:var(--maxw);margin:0 auto}
.strip-bg{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-hdr-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem 2rem;margin-bottom:clamp(2rem,3.5vw,3.25rem)}
.sec-hdr{margin-bottom:0;max-width:64rem}
/* Eyebrow nur, wenn er sich vom Titel unterscheidet (z. B. im CMS gesetzt) — dezent. */
.sec-tag{display:block;font-size:.85rem;color:var(--text2);margin-bottom:.75rem}
.sec-title{font-size:clamp(2.1rem,4.4vw,3.9rem);margin:0}
/* Zwei Sektionen direkt hintereinander: oben kein zweites Polster (sonst ~250px Luecke). */
.sec+.sec,.td-hero-full+.sec,.strip-bg+.sec,.sec+.strip-bg>.sec:first-child{padding-top:0}
.td-hero-full+.sec{padding-top:clamp(48px,6vw,80px)}
.sec:has(+.sec){padding-bottom:clamp(64px,7vw,104px)}
.sec-sub{color:var(--text2);font-size:1.05rem;line-height:1.65;max-width:62ch;margin-top:1rem}
.copy-paragraph{color:var(--text2);line-height:1.7;margin-top:.6rem}
.copy-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0;margin:.5rem 0 0}
.copy-list li{position:relative;padding-left:1rem;color:var(--text2);line-height:1.65}
.copy-list li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:2px;background:var(--accent)}
.copy-stack{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;color:var(--text2)}
.copy-stack strong{color:var(--text)}
.empty-state{text-align:center;padding:4.5rem 2rem;color:var(--text2);border:1px dashed var(--border2);border-radius:var(--r)}
.empty-state h3{color:var(--text);font-size:1.15rem;font-weight:700;margin-bottom:.4rem}
.empty-state .btn-ghost{margin-top:1.4rem}
.nd-notfound{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:4rem 2rem;text-align:center;color:var(--text2);border:0}
.nd-notfound img{width:160px;height:160px;object-fit:contain}
.nd-notfound h3{color:var(--text);font-size:1.4rem;font-weight:800;margin:0}
.sec-action-row{display:flex;align-items:flex-end;gap:1.25rem}
.sec-owl{width:84px;height:84px;object-fit:contain}
.sec-hdr-mascot{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.sec-hdr-mascot .sec-hdr-row{flex:1 1 auto}
.hdr-mascot{width:180px;max-width:36vw;height:auto;object-fit:contain;margin-bottom:clamp(2rem,3.5vw,3.25rem)}
.hdr-mascot-wide{width:260px}
.breadcrumb{width:100%;font-size:.85rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;color:var(--text3)}
.breadcrumb button,.breadcrumb a{color:var(--text2);cursor:pointer;transition:color var(--dur-hover) ease;font-weight:600}
@media (hover:hover) and (pointer:fine){.breadcrumb button:hover,.breadcrumb a:hover{color:var(--text)}}
.bc-sep{color:var(--text3)}
.bc-current{color:var(--text)}
/* CMS-Inhaltsseite & Builder-Bloecke */
.cms-page{max-width:880px;margin:0 auto;padding:1rem 0}
.cms-page-title{font-size:clamp(2.2rem,4.8vw,3.9rem);margin:0 0 2rem}
.cms-page-body{line-height:1.7;color:var(--text)}
.cms-page-body h1{font-size:2rem;font-weight:800;margin:1.6rem 0 .8rem}
.cms-page-body h2{font-size:1.5rem;font-weight:800;margin:1.4rem 0 .6rem}
.cms-page-body h3{font-size:1.2rem;font-weight:700;margin:1.1rem 0 .5rem}
.cms-builder-sec{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.cms-builder-container{margin:0 auto;display:grid;gap:1.5rem}
.cms-container-narrow{max-width:820px}.cms-container-wide{max-width:1180px}.cms-container-full{max-width:none}
.cms-container-muted{border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);padding:clamp(1.5rem,3vw,2.5rem)}
.cms-container-accent{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--r);background:color-mix(in srgb,var(--accent) 9%,var(--bg));padding:clamp(1.5rem,3vw,2.5rem)}
.cms-builder-heading{max-width:960px;margin:0 auto;text-align:left}
.cms-builder-heading .sec-sub{margin-top:1rem}
.cms-builder-paragraph{max-width:860px;margin:0 auto;color:var(--text2);font-size:1.05rem;line-height:1.75}
.cms-builder-image{max-width:1100px;margin:0 auto}
.cms-builder-image img{width:100%;max-height:640px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg2);display:block}
.cms-builder-image figcaption{margin-top:.7rem;color:var(--text3);font-size:.85rem;text-align:center}
.cms-builder-actions,.cms-cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.cms-builder-cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;max-width:1180px;margin:0 auto;background:var(--border);border:1px solid var(--border)}
.cms-builder-cardgrid .team-ov-card{border:0;border-radius:0}
.cms-builder-stats{max-width:1080px;margin:0 auto}
/* Rich content (Editor-HTML / Legacy-Markdown aus dem Portal) */
.rich-content{line-height:1.7}
.rich-content p{margin:.5rem 0}
.rich-content p:empty{margin:0;height:.9em}
.rich-content h1{font-size:1.8rem;font-weight:800;margin:1.5rem 0 .6rem}
.rich-content h2{font-size:1.4rem;font-weight:800;margin:1.3rem 0 .5rem}
.rich-content h3{font-size:1.15rem;font-weight:700;margin:1.1rem 0 .4rem}
.rich-content h4,.rich-content h5,.rich-content h6{font-size:1rem;font-weight:700;margin:.9rem 0 .35rem}
.rich-content ul,.rich-content ol{margin:.5rem 0 .5rem 1.4rem;padding:0}
.rich-content ul{list-style:disc}.rich-content ol{list-style:decimal}
.rich-content li{margin:.25rem 0}
.rich-content li::marker{color:var(--accent-text)}
.rich-content strong{font-weight:700}
.rich-content em{font-style:italic}
.rich-content u{text-decoration:underline}
.rich-content s,.rich-content del{text-decoration:line-through;opacity:.8}
.rich-content a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.rich-content a:hover{color:var(--accent-text)}}
.rich-content code{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:.1rem .35rem;font-family:ui-monospace,monospace;font-size:.9em}
.rich-content pre{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:.9rem 1rem;overflow-x:auto;margin:.7rem 0}
.rich-content pre code{background:none;border:none;padding:0}
.rich-content blockquote{border-left:1px solid var(--border2);margin:.8rem 0;padding-left:1em;color:var(--text2)}
.rich-content img{max-width:100%;border-radius:var(--r);margin:.7rem 0}
.rich-content hr{border:none;border-top:1px solid var(--border);margin:1.2rem 0}
.rich-content table{border-collapse:collapse;margin:.7rem 0;width:100%;font-variant-numeric:tabular-nums}
.rich-content th,.rich-content td{border:1px solid var(--border);padding:.45rem .7rem;text-align:left;vertical-align:top}
.rich-content th{font-weight:700;background:var(--bg3)}
@media (max-width:640px){.rich-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ---------- 6. Hero ---------- */
/* Slider (Portal-Slides, Bild): randlos, fuellt den ersten Viewport. Crossfade per Opacity. */
.hero-slider{position:relative;width:100%;overflow:hidden;background:var(--bg)}
.hero-slider-track{position:relative;width:100%;height:calc(100vh - var(--nav-h) - var(--hero-strip,0px));height:calc(100svh - var(--nav-h) - var(--hero-strip,0px));min-height:480px}
.hero-slider.has-partners{--hero-strip:88px}
/* Partnerleiste am unteren Rand des ersten Viewports: Logos weiss-monochrom auf Schwarz */
.hero-partners{position:relative;z-index:3;height:var(--hero-strip,88px);display:flex;align-items:center;background:#0b0b0c;border-top:1px solid rgba(239,236,231,.1)}
.hero-partners .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hero-partners .marquee-item{height:48px;opacity:.72;filter:none}
.hero-partners .marquee-logo{max-height:40px;max-width:150px;filter:grayscale(1) brightness(0) invert(.93) sepia(.12)}
.hero-partners .marquee-logo-text{color:#efece7;font-size:1.3rem}
@media (hover:hover) and (pointer:fine){.hero-partners .marquee-item:hover{opacity:1}}
@media (max-width:768px){.hero-slider.has-partners{--hero-strip:72px}}
.hero-slide{position:absolute;inset:0;opacity:0;z-index:1;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-start;transition:opacity .9s ease;will-change:opacity}
.hero-slide.is-active{opacity:1;z-index:2;pointer-events:auto}
.hero-slide-bg{position:absolute;inset:0;z-index:1;background-position:center;background-repeat:no-repeat;filter:var(--hero-fired,grayscale(.7) contrast(1.08) brightness(.86))}
/* Lesbarkeit unten links ohne die Bild-Abdunklung aus dem CMS zu ersetzen: weicher Verlauf. */
/* Lesbarkeit links unten + Ruß-Vignette; keine Leuchteffekte */
/* Brennkammer: Rauchschwaden rechts (statisch) + Glutschein vom Boden, unter der Typo */
:root{--smoke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 560' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0068 .0042' numOctaves='5' seed='17'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .91 0 0 0 0 .88 2.3 0 0 0 -1.12'/%3E%3C/filter%3E%3ClinearGradient id='f' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.55'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.35'/%3E%3Cstop offset='.7' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.6'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='900' height='560' fill='url(%23f)'/%3E%3C/mask%3E%3Cmask id='n'%3E%3Crect width='900' height='560' fill='url(%23v)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23n)'%3E%3Crect width='900' height='560' filter='url(%23s)' mask='url(%23m)'/%3E%3C/g%3E%3C/svg%3E")}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(42% 30% at 80% 106%,rgba(249,61,0,.3) 0%,rgba(184,45,0,.12) 45%,transparent 75%),var(--smoke) right top/64% 100% no-repeat,linear-gradient(90deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.45) 42%,rgba(11,11,12,0) 72%),linear-gradient(0deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,0) 45%)}
.hero-slide-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gutter) clamp(5rem,9vh,7.5rem);display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.hero-slide-title{position:relative;font-size:clamp(2.8rem,7vw,6rem);max-width:13ch;color:inherit;padding-bottom:clamp(.9rem,1.6vw,1.4rem)}
/* Ember-Pinselstrich unter dem Claim */
.hero-slide-title::after{content:"";position:absolute;left:-.1em;bottom:0;width:min(78%,520px);height:clamp(10px,1.3vw,18px);background:var(--cta-accent,var(--accent));-webkit-mask:var(--brush) left center/100% 100% no-repeat;mask:var(--brush) left center/100% 100% no-repeat}
.hero-slide-sub{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:500;line-height:1.5;max-width:52ch;opacity:.92}
/* Hauptaktion im Hero: das Gluehende (Ember-Flaeche), CMS-Farbe bleibt moeglich */
.hero-slide-cta{min-height:52px;padding:0 1.6rem;font-size:1rem;color:var(--cta-on,var(--on-accent));background:var(--cta-accent,var(--accent));border:0;border-radius:var(--r);gap:.7rem}
.hero-slide-cta .nd-icon-arrow{width:20px;height:20px;color:currentColor}
.hero-cta-arrow{display:inline-block;transition:var(--tr-lift)}
@media (hover:hover) and (pointer:fine){.hero-slide-cta:hover{filter:brightness(1.08)}.hero-slide-cta:hover .hero-cta-arrow{transform:translateX(5px)}}
/* Text: gestaffeltes Fade-up beim ersten Aufbau (.nd-enter) und bei echtem Slide-Wechsel (.is-shown). */
/* Der eine gestaltete Moment: der Claim wird "gebrannt" — wischt gluehend herein und kuehlt zu Rauch ab, der Pinselstrich zieht nach. */
.nd-enter .hero-slide.is-active .hero-slide-title,.hero-slide.is-shown .hero-slide-title{animation:ndFireIn .95s var(--ease-out) backwards}
.nd-enter .hero-slide.is-active .hero-slide-title::after,.hero-slide.is-shown .hero-slide-title::after{animation:ndBrushDraw .6s var(--ease-out) .55s backwards}
.nd-enter .hero-slide.is-active .hero-slide-sub,.hero-slide.is-shown .hero-slide-sub{animation:heroTextIn .7s var(--ease-out) 90ms backwards}
.nd-enter .hero-slide.is-active .hero-slide-cta,.hero-slide.is-shown .hero-slide-cta{animation:heroTextIn .7s var(--ease-out) 180ms backwards}
@keyframes heroTextIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ndFireIn{0%{clip-path:inset(-10% 100% -10% 0);color:var(--accent)}55%{color:var(--accent3)}100%{clip-path:inset(-10% 0 -10% 0);color:inherit}}
@keyframes ndBrushDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
/* Steuerung: eckige Pfeile unten rechts, Fortschritts-Balken unten links */
.hero-slider-arrow{position:absolute;bottom:calc(var(--hero-strip,0px) + clamp(5rem,9vh,7.5rem));top:auto;z-index:4;width:52px;height:52px;border-radius:var(--r);border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:1;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.hero-slider-arrow:hover{background:#fff;border-color:#fff;color:#000}}
.hero-slider-arrow:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
.hero-slider-prev{right:calc(var(--gutter) + 60px);left:auto}
.hero-slider-next{right:var(--gutter)}
.hero-slider-dots{position:absolute;bottom:calc(var(--hero-strip,0px) + 2.25rem);left:var(--gutter);right:var(--gutter);transform:none;z-index:4;display:flex;gap:.5rem;max-width:calc(var(--maxw) - 2 * var(--gutter));margin:0 auto}
.hero-slider-dot{appearance:none;border:none;position:relative;flex:0 1 72px;width:72px;height:3px;border-radius:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;overflow:hidden;transition:background-color var(--dur-hover) ease}
.hero-slider-dot::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
@media (hover:hover) and (pointer:fine){.hero-slider-dot:hover{background:rgba(255,255,255,.55)}}
.hero-slider-dot.is-active{background:rgba(255,255,255,.3)}
.hero-dot-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff}
@media (max-width:768px){
  .hero-slide-inner{padding:0 var(--gutter) 6.5rem;gap:1rem}
  .hero-slider-arrow{width:44px;height:44px;bottom:calc(var(--hero-strip,0px) + 2rem)}
  .hero-slider-prev{right:calc(var(--gutter) + 52px)}
  .hero-slider-dots{bottom:calc(var(--hero-strip,0px) + 3.3rem);right:calc(var(--gutter) + 110px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .25s ease}
  .hero-slide .hero-slide-title,.hero-slide .hero-slide-sub,.hero-slide .hero-slide-cta,.hero-slide .hero-slide-title::after{animation-name:ndFadeIn!important}
}
/* Bild erst zeigen, wenn es geladen ist (data-img-pending setzt main.js). */
.hero-slide-bg,.section-band-bg,.section-band-slides{transition:opacity .6s ease}
[data-img-pending] .hero-slide-bg,[data-img-pending].section-band-bg,[data-img-pending] .section-band-slides{opacity:0}
@media (prefers-reduced-motion:reduce){.hero-slide-bg,.section-band-bg,.section-band-slides{transition:none}}
/* Marken-Hero (ohne Portal-Slides): Key-Visual, Logo, Name, Slogan, zwei Aktionen. */
.hero{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6rem var(--gutter);position:relative;overflow:hidden}
.hero-kv{background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.88)),url('/assets/key-visual.webp') center/cover no-repeat}
.hero-grid-bg,.hero-glow,.hero-glow2{display:none}
.hero-content{position:relative;z-index:2;max-width:1100px}
.hero-badge{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);padding:.5rem .9rem;font-size:.82rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:2rem}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-logo-wrap{margin-bottom:1.6rem}
.hero-logo{width:150px;height:150px;object-fit:contain}
.hero h1{font-size:clamp(3.2rem,10vw,9rem);margin-bottom:1.4rem;color:#fff}
.hero h1 .line1{display:block;color:#fff}
.hero h1 .hero-slogan{display:block;margin-top:.6rem;color:var(--accent);font-size:clamp(1.4rem,3.4vw,2.8rem);font-family:var(--font-ui);font-weight:700;letter-spacing:.04em}
.hero h1 .hero-slogan.slogan-rotator{display:inline-grid}
.hero h1 .hero-slogan .slogan-item{color:var(--accent-text)}
.hero-sub{font-size:1.15rem;color:rgba(255,255,255,.82);max-width:600px;margin:0 auto 2.5rem;line-height:1.7}
.hero-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero-scroll{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.6);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- 7. Baender (CMS-Abschnittsbilder, Slogans, Sponsoren-Laufband) ---------- */
.section-band{position:relative;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;margin:0}
.section-band-bg{position:absolute;inset:0;z-index:1;background-position:center;background-repeat:no-repeat}
.section-band-short{min-height:160px}.section-band-medium{min-height:260px}.section-band-tall{min-height:400px}
.section-band-inner{position:relative;z-index:2;max-width:1000px;padding:2rem var(--gutter);display:flex;flex-direction:column;align-items:center;gap:1rem}
.section-band-title{font-size:clamp(2rem,4.6vw,4rem);margin:0}
.section-band-sub{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:500;line-height:1.55;max-width:60ch;opacity:.92;margin:0}
.section-band-cta{border:0;margin-top:.4rem}
@media (hover:hover) and (pointer:fine){.section-band-cta:hover{filter:brightness(1.08)}}
/* Rotierende Slogans: alle Items liegen uebereinander (Grid-Stack), nur das aktive ist sichtbar. */
.slogan-rotator{display:inline-grid;text-align:center}
.slogan-rotator .slogan-item{grid-area:1/1;opacity:0;filter:blur(4px);transition:opacity .5s ease,filter .5s ease;pointer-events:none}
.slogan-rotator .slogan-item.is-active{opacity:1;filter:none;pointer-events:auto}
.section-band-slogans{flex-direction:column;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-band-slogan{font-size:clamp(2rem,5vw,4.4rem)}
.section-band-slogan .slogan-item{color:var(--accent,#f93d00)}
@media (prefers-reduced-motion:reduce){.slogan-rotator .slogan-item{filter:none;transition:opacity .2s ease}}
/* Sponsoren-Laufband: schwarzer Streifen, Logos ruhig in Graustufen, Farbe beim Hover. */
.section-band-marquee{flex-direction:column;gap:1rem;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.6rem 0}
.section-band-marquee .section-band-inner{padding-top:.4rem;padding-bottom:.2rem}
.section-band-marquee .section-band-title{font-size:clamp(1.2rem,2vw,1.6rem)}
.marquee{position:relative;z-index:2;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 38s linear infinite;will-change:transform}
.marquee-group{display:flex;align-items:center;gap:4.5rem;padding-right:4.5rem}
@media (hover:hover) and (pointer:fine){.marquee:hover .marquee-track{animation-play-state:paused}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none!important}}
.marquee-item{display:flex;align-items:center;justify-content:center;height:64px;opacity:.7;filter:grayscale(1);transition:opacity var(--dur-hover) ease,filter var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){.marquee-item:hover{opacity:1;filter:none}}
.marquee-logo{max-height:56px;max-width:170px;width:auto;height:auto}
.marquee-logo-text{font-size:1.5rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
@media (max-width:768px){.section-band-inner{padding:1.25rem var(--gutter)}.marquee-group{gap:3rem;padding-right:3rem}}
/* Band-Slider (mehrere Bilder) */
.section-band-slides{position:absolute;inset:0;z-index:1}
.section-band-slide{position:absolute;inset:0;opacity:0;background-position:center;background-repeat:no-repeat;transition:opacity .8s ease;will-change:opacity}
.section-band-slide.is-active{opacity:1}
.section-band-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:var(--r);border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--tr-colors),opacity var(--dur-modal) ease,var(--tr-press)}
.section-band-slider:hover .section-band-arrow{opacity:1}
@media (hover:hover) and (pointer:fine){.section-band-arrow:hover{background:#fff;border-color:#fff;color:#000}}
.section-band-arrow:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
.section-band-arrow svg{width:18px;height:18px}
.section-band-prev{left:var(--gutter)}
.section-band-next{right:var(--gutter)}
.section-band-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.45rem}
.section-band-dot{appearance:none;border:none;position:relative;width:40px;height:3px;border-radius:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;overflow:hidden;transition:background-color var(--dur-hover) ease}
.section-band-dot::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
@media (hover:hover) and (pointer:fine){.section-band-dot:hover{background:rgba(255,255,255,.55)}}
.section-band-dot.is-active{background:rgba(255,255,255,.3)}
.section-band-dot-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff}
@media (max-width:768px){.section-band-arrow{opacity:1;width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.section-band-slide{transition:opacity .2s ease}}
/* Ankuendigungen */
.announcements-sec{padding:1.5rem var(--gutter) 0;max-width:var(--maxw);margin:0 auto}
.announcements-inner{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border)}
.ann-card{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.4rem;background:var(--bg2);position:relative;overflow:hidden}
.ann-card-accent{display:none}
.ann-card.ann-critical{background:color-mix(in srgb,var(--red) 10%,var(--bg2))}
.ann-card.ann-important{background:color-mix(in srgb,var(--orange) 8%,var(--bg2))}
.ann-card.ann-high{background:color-mix(in srgb,var(--orange) 8%,var(--bg2))}.ann-card.ann-high .ann-card-icon{color:var(--orange);background:color-mix(in srgb,var(--orange) 14%,var(--bg3))}
.ann-card.ann-critical .ann-card-icon{background:color-mix(in srgb,var(--red) 16%,var(--bg3))}.ann-card.ann-important .ann-card-icon{background:color-mix(in srgb,var(--orange) 14%,var(--bg3))}
.ann-card-icon svg{width:20px;height:20px}
.ann-card-icon{font-size:1.25rem;flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border-radius:var(--r)}
.ann-card.ann-critical .ann-card-icon{color:var(--red)}.ann-card.ann-important .ann-card-icon{color:var(--orange)}.ann-card.ann-normal .ann-card-icon{color:var(--accent-text)}
.ann-card-content{flex:1;min-width:0}
.ann-card-title{font-weight:700;font-size:1rem}
.ann-card-body{color:var(--text2);font-size:.92rem;margin-top:.2rem;line-height:1.6}
.ann-card-body.rich-content p{margin:.15rem 0}
.ann-card-badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .7rem;border-radius:var(--r);background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red);flex-shrink:0}
.ann-card-badge.imp{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
/* Kennzahlen-Leiste */
.stats-bar{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.4rem var(--gutter)}
.stats-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:.6rem 2.4rem;text-align:left}
.stat-box{position:relative;display:flex;align-items:baseline;gap:.5rem;min-width:0;padding:0}
.stat-box+.stat-box::before{content:"";position:absolute;left:-1.2rem;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--border2)}
.stat-num{font-size:1.6rem;line-height:1;color:var(--text)}
.stat-num.purple,.stat-num.cyan,.stat-num.pink,.stat-num.orange,.stat-num.green{color:var(--text)}
.stat-label{color:var(--text2);font-size:.95rem;margin-top:0;font-family:var(--font);font-weight:500;text-transform:none;letter-spacing:0}

/* ---------- 8. Karten ---------- */
/* Gemeinsame Kartenbasis: ruhige Flaeche, feine Linie, keine Leuchteffekte. Hover nur fuer Maus. */
.tcard,.ncard,.match-card,.feat-box,.acard,.spcard,.game-page-card,.live-ticker-card,.apply-type-card,.team-ov-card,.pp-clip,.tourn-card,.feat-news,.achcard,.ecard,.dl-card,.article-card,.legal-card,.apply-form-wrap,.pp-stat,.team-status-row,.tpart-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.tcard,.ncard,.match-card,.feat-box,.acard,.spcard,.game-page-card,.live-ticker-card,.apply-type-card,.team-ov-card,.pp-clip,.tourn-card,.feat-news,.achcard,.ecard{transition:border-color var(--dur-hover) ease,background-color var(--dur-hover) ease,var(--tr-press)}
@media (hover:hover) and (pointer:fine){
  .tcard:hover,.ncard:hover,.match-card:hover,.feat-box:hover,.acard:hover,.spcard:hover,.game-page-card:hover,.live-ticker-card:hover,
  .apply-type-card:hover,.pp-clip:hover,.tourn-card:hover,.feat-news:hover,.achcard:hover,.ecard:hover{border-color:var(--border2);background:var(--card2)}
}
/* Team-Karten */
.teams-grid{display:flex;flex-wrap:wrap;gap:2rem 1.25rem}
.teams-grid>*{flex:1 1 320px;min-width:0}
.teams-grid>:only-child{max-width:640px}
.tcard{overflow:visible;cursor:pointer;display:flex;flex-direction:column;background:transparent;border:0;border-radius:0}
@media (hover:hover) and (pointer:fine){.tcard:hover{background:transparent;border-color:transparent}}
/* Team-Kachel = glasierte Scherbe: silbrige Krakelee-Glasur, Logo gebrannt; Hitze bringt Teamfarbe + Logo-Farbe */
.tcard-banner{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;aspect-ratio:16/10;height:auto;padding:0;border:0 none;border-radius:var(--r);cursor:pointer;text-align:center;background:radial-gradient(120% 90% at 92% 105%,color-mix(in srgb,var(--bg) 62%,transparent) 0%,transparent 42%),radial-gradient(70% 60% at 4% 0%,color-mix(in srgb,var(--bg) 28%,transparent) 0%,transparent 38%),linear-gradient(135deg,var(--glaze) 0%,var(--glaze2) 100%)!important}
.tcard-banner::before{content:"";position:absolute;inset:0;background:var(--crackle-line);-webkit-mask:var(--crazing) 0 0/var(--crazing-size) repeat;mask:var(--crazing) 0 0/var(--crazing-size) repeat;pointer-events:none;transition:opacity var(--dur-heat) ease}
.tcard-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tc,var(--accent));transition:height var(--dur-heat) var(--ease-out)}
.tcard-game{position:absolute;top:.9rem;left:.9rem;background:none;color:var(--glaze-ink2);border-radius:0;padding:0;font-size:.74rem;z-index:2}
.tcard-icon{width:84px;height:84px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;background:none;border:0;color:var(--glaze-ink)!important;position:relative;z-index:1;transition:transform var(--dur-modal) var(--ease-out),color var(--dur-heat) ease}
.tcard-logo-img{width:96px;height:96px;border-radius:0;object-fit:contain;position:relative;z-index:1;filter:grayscale(1) contrast(1.15) brightness(.55);transition:transform var(--dur-modal) var(--ease-out),filter var(--dur-heat) ease}
@media (hover:hover) and (pointer:fine){.tcard:hover .tcard-icon,.tcard:hover .tcard-logo-img{transform:scale(1.05)}}
.tcard-body{padding:1.1rem 0 0;display:flex;flex-direction:column;flex:1}
.tcard-name{font-size:1.65rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1;margin-bottom:.55rem}
.tcard-desc{color:var(--text2);font-size:.92rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1rem}
.tcard-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.tcard-foot{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;margin-top:auto;border-top:1px solid var(--border)}
.arrow-btn{display:inline-flex;align-items:center;gap:.4rem;color:var(--text);font-size:.9rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:color var(--dur-hover) ease,var(--tr-press)}
@media (hover:hover) and (pointer:fine){.tcard:hover .arrow-btn{color:var(--accent-text)}}
.arrow-cta{display:none}
.pip-row{display:flex}.pip{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;border:2px solid var(--bg);margin-right:-6px;color:#fff}
.pip-more{width:28px;height:28px;border-radius:50%;background:var(--bg3);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--text2)}
/* Chips & Status */
.chip2{display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:1px solid var(--border2);border-radius:var(--r);padding:.3rem .6rem;font-size:.72rem;color:var(--text2);letter-spacing:.05em}
.chip2-lead{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent-text)}
.proles{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin:.2rem 0}
.status-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;border-radius:var(--r);border:1px solid var(--border2);font-size:.72rem;color:var(--text2)}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.status-pill.is-open{color:var(--ember);border-color:color-mix(in srgb,var(--ember) 55%,transparent)}
.status-pill.is-closed{color:var(--text3);border-color:var(--border2)}
.status-pill.is-limited{color:var(--orange);border-color:color-mix(in srgb,var(--orange) 40%,transparent)}
.status-pill.is-neutral{color:var(--text2)}
.status-pill.is-neutral::before{display:none}
/* News */
.news-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.news-filter-tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.news-filter-tab{background:transparent;border:1px solid var(--border2);color:var(--text2);border-radius:var(--r);padding:.55rem .9rem;font-size:.8rem;cursor:pointer;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.news-filter-tab:hover{border-color:var(--text);color:var(--text)}}
.news-filter-tab.is-active{background:var(--text);border-color:var(--text);color:var(--bg)}
.news-filter-year{display:flex;align-items:center;gap:.6rem}
.news-filter-year-label{font-size:.8rem;color:var(--text3)}
.news-filter-year-select{background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:var(--r);padding:.5rem .8rem;font-size:.9rem;cursor:pointer;font-family:var(--font)}
.news-filter-year-select:focus{outline:none;border-color:var(--accent)}
.news-filter-year-select option{background:var(--bg2);color:var(--text)}
.news-filter-reset{background:transparent;border:0;color:var(--text2);padding:.5rem .2rem;font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color var(--dur-hover) ease,var(--tr-press)}
@media (hover:hover) and (pointer:fine){.news-filter-reset:hover{color:var(--text)}}
.news-no-results{padding:3rem 1rem;text-align:center;color:var(--text2);font-size:1rem;border:1px dashed var(--border2);border-radius:var(--r)}
@media(max-width:640px){.news-filters{flex-direction:column;align-items:flex-start}.news-filter-year{width:100%;justify-content:space-between}}
.news-grid{display:flex;flex-wrap:wrap;gap:1.25rem}
.news-grid>*{flex:1 1 340px;min-width:0}
.ncard{overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.ncard-thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;height:auto;width:100%;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;font-size:2.4rem;overflow:hidden;color:#efece7;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.6)),url('/assets/news-cover-template.webp') center/cover no-repeat;filter:var(--fired);transition:filter var(--dur-heat) ease}
.ncard-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35) 100%)}
.ncard-body{padding:1.25rem 1.35rem 1rem;flex:1}
.ncard-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.ncat{font-size:.72rem;color:var(--text2);background:none;padding:0}
.ncat.match{color:var(--accent-text)}.ncat.announce{color:var(--orange)}
.ndate{color:var(--text3);font-size:.82rem;font-variant-numeric:tabular-nums}
.ncard-title{font-size:1.2rem;font-weight:700;line-height:1.3;margin-bottom:.55rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.01em}
.ncard-exc{color:var(--text2);font-size:.92rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ncard-footer{padding:.9rem 1.35rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ncard-author{color:var(--text3);font-size:.82rem}
.ncard-read{color:var(--text);font-size:.8rem;transition:color var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){.ncard:hover .ncard-read{color:var(--accent-text)}}
/* Aufmacher-News */
.feat-news{padding:0;margin-bottom:1.25rem;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;align-items:stretch;overflow:hidden;cursor:default}
.feat-news-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;width:100%;height:100%;border:0;border-radius:0;color:#fff;font-size:clamp(2.4rem,4vw,3.6rem);font-family:var(--font-ui);font-weight:800;text-transform:uppercase;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)),url('/assets/news-cover-template.webp') center/cover no-repeat;filter:var(--fired);cursor:pointer;transition:var(--tr-press),filter var(--dur-heat) ease}
.feat-news-body{display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:clamp(1.75rem,3.5vw,3rem)}
.feat-news-body .ncard-meta{margin-bottom:.4rem}
.feat-news-body .text-link{margin-top:1.2rem;align-self:flex-start}
.feat-news-title{font-size:clamp(1.9rem,3.4vw,3rem);margin-bottom:.6rem}
.feat-news-exc{color:var(--text2);font-size:1.02rem;line-height:1.7;max-width:62ch}
.feat-news-tag{display:none}
/* Events */
.events-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.events-list .ecard{border-width:0 0 1px;border-radius:0;background:transparent;padding:1.5rem .25rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.75rem;align-items:center}
.ecard{padding:1.5rem 1.75rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.75rem;align-items:center}
@media (hover:hover) and (pointer:fine){.events-list .ecard:hover{background:var(--glass)}}
/* Datums-Scherbe: glasiert mit Haarrissen; vergangene Events sind abgekuehlt (Asche) */
.ecard-date{position:relative;overflow:hidden;text-align:center;background:var(--glaze);border-radius:var(--r);padding:.7rem 1rem;min-width:76px}
.ecard-date::before{content:"";position:absolute;inset:0;background:var(--crackle-line);-webkit-mask:var(--crazing) 0 0/var(--crazing-size) repeat;mask:var(--crazing) 0 0/var(--crazing-size) repeat;pointer-events:none}
.ecard-day{position:relative;font-size:2.2rem;line-height:1;color:var(--glaze-ink)}
.ecard-month{position:relative;font-size:.75rem;color:var(--glaze-ink2);margin-top:.2rem}
.ecard:has(.ebadge-past) .ecard-date{background:var(--bg3)}
.ecard:has(.ebadge-past) .ecard-date::before{display:none}
.ecard:has(.ebadge-past) .ecard-day{color:var(--text2)}
.ecard:has(.ebadge-past) .ecard-month{color:var(--text3)}
.ecard-title{font-weight:700;font-size:1.15rem;margin-bottom:.4rem}
.ecard-meta{display:flex;gap:1rem;flex-wrap:wrap}
.emeta-chip{display:flex;align-items:center;gap:.3rem;font-size:.86rem;color:var(--text2)}
.ecard-badge{padding:.3rem .6rem;font-size:.72rem;border-radius:var(--r)}
.ebadge-upcoming{color:var(--green);border:1px solid color-mix(in srgb,var(--green) 40%,transparent)}
.ebadge-past{color:var(--text3);border:1px solid var(--border2)}
.ebadge-live{color:var(--on-red);background:var(--red);border:1px solid var(--red)}
.stack-actions{display:flex;flex-direction:column;gap:.75rem;align-items:flex-end}
/* Erfolge */
.ach-grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.achcard{padding:1.3rem .25rem;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:1.1rem;align-items:start;background:transparent;border-width:0 0 1px;border-radius:0}
@media (hover:hover) and (pointer:fine){.achcard:hover{background:var(--glass);border-color:var(--border)}}
.ach-trophy{width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange);margin-top:-.15rem}
.ach-trophy svg{width:22px;height:22px}
.achcard>div:last-child{display:grid;grid-template-columns:120px minmax(0,1fr) auto;column-gap:1.25rem;align-items:baseline}
.ach-placement{grid-column:1;font-size:1.35rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;color:var(--text);line-height:1.1}
.ach-tournament{grid-column:2;font-size:1.02rem;font-weight:700;line-height:1.35}
.ach-team{grid-column:2;font-size:.9rem;color:var(--text2)}
.achcard .copy-paragraph{grid-column:2;margin-top:.3rem;font-size:.95rem}
.ach-date{grid-column:3;grid-row:1;font-size:.86rem;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){.achcard>div:last-child{grid-template-columns:1fr}.ach-placement,.ach-tournament,.ach-team,.achcard .copy-paragraph,.ach-date{grid-column:1;grid-row:auto}}
.matches-grid{display:flex;flex-direction:column;gap:0;max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--border)}
.match-card{display:grid;grid-template-columns:72px minmax(0,1fr) 200px 280px;align-items:center;gap:1.5rem;padding:1.1rem .25rem;background:transparent;border-width:0 0 1px;border-radius:0;overflow:visible}
@media (hover:hover) and (pointer:fine){.match-card:hover{background:var(--glass);border-color:var(--border)}}
.match-card.match-live{background:color-mix(in srgb,var(--red) 7%,transparent)}
.match-date{display:flex;flex-direction:column;align-items:center;line-height:1}
.match-day{font-size:1.8rem;font-family:var(--font-ui);font-weight:800;font-variant-numeric:tabular-nums}
.match-month{font-size:.72rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-top:.2rem}
.match-time{font-size:.78rem;color:var(--text3);margin-top:.3rem;font-variant-numeric:tabular-nums}
.match-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;padding:0}
.match-team{display:flex;align-items:center;gap:.7rem;min-width:0}
.match-team-2{justify-content:flex-end;text-align:right}
.match-team-name{font-family:var(--font-ui);font-size:1.1rem;font-weight:700;letter-spacing:.01em;line-height:1.1;overflow-wrap:break-word;hyphens:auto;min-width:0}
@media (max-width:560px){.match-teams{gap:.5rem}.match-team{flex-direction:column;align-items:flex-start;gap:.4rem}.match-team-2{flex-direction:column-reverse;align-items:flex-end}}
.match-score{display:flex;align-items:center;justify-content:center;gap:.35rem;min-width:84px}
.match-score-num{font-size:1.9rem;line-height:1;color:var(--text)}
.match-score-sep{font-size:1.2rem;color:var(--text3)}
.match-score-vs{font-size:1.1rem;font-family:var(--font-ui);font-weight:800;color:var(--text3);letter-spacing:.04em}
.match-card.is-win .match-team:first-child .match-team-name{color:var(--text)}
.match-card.is-loss .match-score-num:first-child{color:var(--text2)}
.match-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.match-game{font-size:.72rem;color:var(--text2)}
.match-tournament{font-size:.88rem;color:var(--text2)}
.match-side{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.match-status-badge{font-size:.72rem;padding:.3rem .6rem;border-radius:var(--r);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.match-status-badge.match-live{background:var(--red);color:var(--on-red)}
.match-status-badge.match-upcoming{color:var(--text);border:1px solid var(--border2)}
.match-status-badge.match-finished{color:var(--text3);border:1px solid var(--border2)}
.match-result{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;padding:.3rem .55rem;border-radius:var(--r);font-size:.72rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.match-result.is-win{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.match-result.is-loss{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.match-result.is-draw{background:var(--glass);color:var(--text2)}
.match-watch{font-size:.8rem;color:var(--text);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;transition:color var(--dur-hover) ease}
.match-watch::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
@media (hover:hover) and (pointer:fine){.match-watch:hover{color:var(--accent-text)}}
/* Teamzeichen: Logo oder Initialen in der Teamfarbe */
.team-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:var(--r);background:var(--bg3);overflow:hidden}
.team-mark img{width:100%;height:100%;object-fit:contain;padding:3px}
/* Initialen-Marke = kleine glasierte Scherbe; Teamfarbe nur als Brennkante unten */
.team-mark.is-initials{position:relative;background:var(--glaze);color:var(--glaze-ink);box-shadow:inset 0 -3px 0 var(--mark,#f93d00);font-size:.85rem;font-family:var(--font-ui);font-weight:800;letter-spacing:.02em}
.team-mark-lg.is-initials::before{content:"";position:absolute;inset:0;background:var(--crackle-line);-webkit-mask:var(--crazing) 0 0/var(--crazing-size) repeat;mask:var(--crazing) 0 0/var(--crazing-size) repeat;pointer-events:none}
.team-mark-lg{width:96px;height:96px}
.team-mark-lg.is-initials{font-size:2.2rem}
@media(max-width:760px){
  .match-card{grid-template-columns:56px minmax(0,1fr);gap:.4rem 1rem}
  .match-info,.match-side{grid-column:2}
  .match-side{justify-content:flex-start}
  .match-team-name{font-size:.92rem}
  .team-mark{width:28px;height:28px}
}
.dot-live-match{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Live-Ticker */
.live-ticker-sec .sec-hdr-row{margin-bottom:1.5rem}
/* Naechstes Match = das eine Gluehende: Ember-Kante, Glut-Band unten (Material, kein Glow) */
.next-match{position:relative;display:grid;gap:1.6rem;padding:clamp(1.5rem,3.5vw,2.75rem);background:var(--bg2);border:1px solid color-mix(in srgb,var(--ember) 60%,transparent);border-radius:var(--r);overflow:hidden}
.next-match::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--ember-deep),var(--ember) 35%,var(--accent3) 55%,var(--ember) 75%,var(--ember-deep));pointer-events:none}
.next-match .live-ticker-status.upcoming{color:var(--ember);border-color:color-mix(in srgb,var(--ember) 55%,transparent)}
.next-match.is-live{border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.next-match-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.next-match-meta{font-size:.9rem;color:var(--text2)}
.next-match-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(1rem,4vw,3rem)}
.nm-team{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;min-width:0}
.nm-name{font-size:clamp(1.05rem,2.6vw,2.2rem);font-family:var(--font-ui);font-weight:800;text-transform:uppercase;line-height:1;overflow-wrap:break-word;hyphens:auto;max-width:100%}
.nm-center{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.nm-vs{font-size:clamp(2rem,4vw,3.2rem);font-family:var(--font-ui);font-weight:800;color:var(--text3);line-height:1}
.nm-score{font-size:clamp(2.6rem,6vw,4.6rem);font-family:var(--font-ui);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.nm-score span{color:var(--text3);margin:0 .2em}
.nm-date{font-size:.95rem;color:var(--text2);text-align:center;font-variant-numeric:tabular-nums}
.next-match .live-ticker-countdown{justify-content:center;margin:0;padding-top:1.2rem}
.next-match-actions{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.live-ticker-list{display:flex;flex-direction:column;gap:0;margin-top:1.25rem;border-top:1px solid var(--border)}
.live-ticker-card{display:grid;grid-template-columns:110px minmax(0,1fr) auto auto;align-items:center;gap:1.25rem;padding:.9rem .25rem;background:transparent;border-width:0 0 1px;border-radius:0}
@media (hover:hover) and (pointer:fine){.live-ticker-card:hover{background:var(--glass);border-color:var(--border)}}
.live-ticker-status{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.3rem .6rem;border-radius:var(--r);font-size:.72rem;width:max-content}
.live-ticker-status.live{background:var(--red);color:var(--on-red)}
.live-ticker-status.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:livePulse 1.5s ease-in-out infinite}
.live-ticker-status.upcoming{color:var(--text);border:1px solid var(--border2)}
.live-ticker-status.finished{color:var(--text2);border:1px solid var(--border2)}
.live-ticker-game{font-size:.75rem;color:var(--text3)}
.live-ticker-title{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;font-size:1rem;font-weight:700;line-height:1.3;min-width:0}
.live-ticker-title .team-mark{width:28px;height:28px}
.live-ticker-vs{color:var(--text3);font-weight:600;font-variant-numeric:tabular-nums}
.live-ticker-meta{color:var(--text2);font-size:.88rem;white-space:nowrap}
.live-ticker-date{color:var(--text2);font-size:.88rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.live-ticker-score{font-size:2.2rem;line-height:1;color:var(--text)}
/* Countdown zum naechsten Match: Restzeit in Tagen/Std./Min. */
.live-ticker-countdown{display:flex;align-items:baseline;gap:.9rem;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--border)}
.live-ticker-countdown[hidden]{display:none}
.ltc-part{display:flex;align-items:baseline;gap:.2rem}
.ltc-num{font-size:2.2rem;font-family:var(--font-ui);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.ltc-unit{font-size:.75rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
@media(max-width:520px){
  .next-match-teams{grid-template-columns:1fr 1fr;row-gap:1.1rem}
  .nm-center{grid-column:1/-1;grid-row:2}
}
@media(max-width:760px){
  .live-ticker-card{grid-template-columns:1fr;gap:.35rem}
  .live-ticker-meta,.live-ticker-date{white-space:normal}
  .team-mark-lg{width:64px;height:64px}
  .team-mark-lg.is-initials{font-size:1.5rem}
}
@media(max-width:640px){.live-ticker-list{grid-template-columns:1fr}}
/* Sponsoren/Partner */
.sponsors-sec{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sponsor-tier{margin-bottom:2.5rem}
.tier-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.tier-label::after{content:"";flex:1;height:1px;background:var(--border)}
.sponsors-row{display:flex;flex-wrap:wrap;gap:1.25rem}
.sponsors-row>*{flex:1 1 280px;min-width:0}
.spcard{padding:1.4rem 1.5rem;display:flex;align-items:center;gap:1.1rem;cursor:pointer}
.spcard.title-tier{border-color:color-mix(in srgb,var(--orange) 40%,transparent)}
.sp-logo{min-width:56px;max-width:140px;padding:0 .6rem;overflow:hidden;white-space:nowrap;height:56px;border-radius:var(--r);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-ui);text-transform:uppercase;font-size:1rem;color:var(--text);flex-shrink:0}
.sp-logo-img{width:56px;height:56px;border-radius:var(--r);object-fit:contain;flex-shrink:0;background:var(--bg3);padding:4px}
.sp-name{font-weight:700;font-size:1.05rem}
.sp-tier{font-size:.72rem;color:var(--text3);margin-top:.15rem}
.sp-desc{margin-top:.4rem;color:var(--text2);font-size:.88rem;line-height:1.6;max-width:340px}
.sp-code{margin-top:.5rem;font-size:.85rem;color:var(--text);border:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);border-radius:var(--r);padding:.25rem .55rem;display:inline-block}
.sp-code strong{color:var(--accent-text)}
/* Kennzahlen-Karten (About, Builder) */
.stats-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.stats-mini-grid .acard{border:0;border-radius:0}
.cms-builder-stats.stats-mini-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.acard{padding:1.6rem 1.4rem;text-align:left}
.acard-label{font-size:.75rem;color:var(--text2);margin-top:.5rem}
.acard-val{font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;color:var(--text)}
.acard-val.p,.acard-val.c,.acard-val.o,.acard-val.pk,.acard-val.g{color:var(--text)}
.about-strip{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.about-inner{max-width:var(--maxw);margin:0 auto;padding:6rem var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.feat-box{padding:1.3rem}
.feat-icon{font-size:1.5rem;margin-bottom:.6rem}.feat-title{font-weight:700;font-size:.95rem;margin-bottom:.3rem}.feat-sub{color:var(--text2);font-size:.88rem;line-height:1.5}
.about-stats-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(max-width:900px){.about-inner{grid-template-columns:1fr;gap:3rem}.about-stats-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
/* Call-to-Action-Band ("Ueber uns", CMS ctaStrip) */
.join-strip{position:relative;overflow:hidden;padding:clamp(5rem,10vw,9rem) var(--gutter);text-align:center;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.join-strip-band{background-image:linear-gradient(rgba(11,11,12,.8),rgba(11,11,12,.9)),url('/assets/band-brush-orange-white.webp');background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff}
.join-inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.join-strip h2{position:relative;display:inline-block;font-size:clamp(2.4rem,5.6vw,5rem);margin-bottom:1.8rem;padding-bottom:clamp(.7rem,1.3vw,1.1rem)}
.join-strip h2::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:clamp(9px,1vw,14px);background:var(--accent);-webkit-mask:var(--brush) center/100% 100% no-repeat;mask:var(--brush) center/100% 100% no-repeat}
.join-strip p{color:var(--text2);font-size:1.12rem;margin:0 auto 2.4rem;line-height:1.7;max-width:62ch}
.join-strip-band p{color:rgba(255,255,255,.82)}

/* ---------- 9. Team-Hub, Team-Detail, Spieler ---------- */
.teams-hub{padding-top:clamp(56px,6vw,88px)}
.thub-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;margin-bottom:2rem}
.thub-intro-head{max-width:60ch}
.thub-title{font-size:clamp(2.8rem,7.4vw,6.2rem);margin:0 0 .75rem}
.thub-mascot{width:130px;height:130px;object-fit:contain;margin-left:auto}
.thub-stats{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--border)}
.thub-stat{min-width:120px;padding:1rem 1.3rem;text-align:left}
.thub-stat+.thub-stat{border-left:1px solid var(--border)}
.thub-stat-num{display:block;font-size:2.4rem;line-height:1;color:var(--text)}
.thub-stat:first-child .thub-stat-num{color:var(--text)}
.thub-stat-label{display:block;margin-top:.35rem;font-size:.72rem;color:var(--text2)}
/* Sticky Steuerleiste: Spiel-Filter + Rekrutierung + Suche */
.thub-controls{position:sticky;top:var(--nav-h);z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;padding:.75rem 0;margin-bottom:1rem;background:var(--bg);border-bottom:1px solid var(--border)}
.thub-pills{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.thub-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;font-size:.8rem;color:var(--text2);border:1px solid var(--border2);border-radius:var(--r);background:transparent;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.thub-pill:hover{color:var(--text);border-color:var(--text)}}
.thub-pill.is-active{color:var(--bg);background:var(--text);border-color:var(--text)}
.thub-pill-n{font-size:.7rem;font-weight:800;padding:.05rem .4rem;border-radius:var(--r);background:var(--glass);color:inherit;font-variant-numeric:tabular-nums}
.thub-pill.is-active .thub-pill-n{background:rgba(127,127,127,.25)}
.thub-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.thub-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;font-size:.8rem;color:var(--text2);border:1px solid var(--border2);border-radius:var(--r);background:transparent;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.thub-toggle:hover{color:var(--text);border-color:var(--text)}}
.thub-toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);transition:background-color var(--dur-hover) ease}
.thub-toggle[aria-pressed="true"]{color:var(--green);border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.thub-toggle[aria-pressed="true"] .thub-toggle-dot{background:var(--green)}
.thub-search{display:flex;align-items:center;gap:.45rem;min-width:0;padding:.5rem .8rem;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg2);transition:border-color var(--dur-hover) ease}
.thub-search:focus-within{border-color:var(--text)}
.thub-search-icon{color:var(--text3);flex:0 0 auto}
.thub-search-input{border:0;background:none;color:var(--text);font-size:.9rem;font-family:var(--font);width:170px;max-width:42vw;min-width:0;outline:none}
.thub-search-input::placeholder{color:var(--text3)}
.thub-search-input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}
.thub-meta-row{display:flex;align-items:center;gap:.9rem;min-height:1.3rem;margin-bottom:1.25rem}
.thub-count{font-size:.86rem;color:var(--text2);font-variant-numeric:tabular-nums}
.thub-reset{font-size:.85rem;font-weight:700;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.thub-reset[hidden]{display:none}
.thub-shelves{display:flex;flex-direction:column;gap:3.5rem}
.thub-shelf{display:flex;flex-direction:column;gap:1.25rem}
.thub-shelf.is-hidden{display:none}
.thub-shelf-head{display:flex;align-items:center;gap:1.1rem}
.thub-shelf-name{font-size:clamp(2rem,4.4vw,3.6rem);white-space:nowrap}
.thub-shelf-rule{flex:1;height:1px;background:var(--border2)}
.thub-shelf-count{flex:0 0 auto;min-width:2rem;text-align:center;padding:.25rem .55rem;border-radius:var(--r);border:1px solid var(--border2);font-size:.82rem;font-weight:800;color:var(--text2);font-variant-numeric:tabular-nums}
/* Bento-Mosaik pro Regal (Kachelgroessen setzt main.js) */
.bento-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:180px;gap:1.25rem;grid-auto-flow:row dense}
.thub-card{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
.thub-card .tcard-banner{flex:0 0 auto}
.thub-card .tcard-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.thub-card .tcard-foot{margin-top:auto}
.thub-card.is-hidden{display:none}
.thub-card.is-recruiting .tcard-banner::after{height:3px}
.bento-f{grid-column:span 4;grid-row:span 2}
.bento-b{grid-column:span 2;grid-row:span 2}
.bento-w{grid-column:span 2;grid-row:span 1}
.bento-n{grid-column:span 1;grid-row:span 1}
.tcard-ov{display:none}
.bento-w .tcard-body,.bento-n .tcard-body{display:none}
.bento-w .tcard-banner,.bento-n .tcard-banner{height:100%;aspect-ratio:auto}
.bento-w .tcard-ov,.bento-n .tcard-ov{display:flex;align-items:flex-end;position:absolute;inset:0;z-index:2;padding:.85rem 1rem;background:none}
.tcard-ov-name{font-size:1.25rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;line-height:1;color:var(--glaze-ink);text-align:left}
.bento-w .tcard-ov-name{font-size:1.5rem}
.bento-b .tcard-banner{flex:1 1 auto;height:auto;aspect-ratio:auto;min-height:150px}
.bento-b .tcard-body{flex:0 0 auto}
.bento-b .tcard-desc{display:none}
@media(min-width:880px){
  .bento-f{flex-direction:row;align-items:stretch}
  .bento-f .tcard-banner{width:42%;max-width:520px;height:auto;aspect-ratio:auto}
  .bento-f .tcard-body{justify-content:center;padding:2rem 2.4rem}
  .bento-f .tcard-name{font-size:clamp(2rem,3.6vw,3.2rem)}
  .bento-f .tcard-desc{-webkit-line-clamp:3;font-size:1rem;line-height:1.6;margin-bottom:1.2rem;max-width:60ch}
  .bento-f .tcard-logo-img{width:120px;height:120px}
  .bento-f .tcard-icon{width:100px;height:100px;font-size:2.4rem}
  .bento-f .tcard-foot{border-top:0;padding-top:.2rem}
  .bento-f .arrow-btn{padding:.6rem 1.1rem;border:1px solid var(--border2);border-radius:var(--r)}
  .bento-f .arrow-cta{display:inline}
}
/* Cursor-Spotlight auf Team-Karten (main.js setzt --mx/--my, nur Maus) */
@media (hover:hover) and (pointer:fine){
  .thub-card::before{display:none;content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity var(--dur-hover) ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.07),transparent 62%)}
  .thub-card:hover::before{opacity:1}
}
.thub-empty{padding:3rem 1rem;text-align:center;color:var(--text2);border:1px dashed var(--border2);border-radius:var(--r);font-size:1rem}
.thub-empty[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){.nd-enter .bento-grid .thub-card{animation:thubIn .45s var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),10)*40ms)}}
@keyframes thubIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:880px){
  .thub-controls{position:static}
  .thub-tools{width:100%}
  .thub-search{flex:1}
  .thub-search-input{width:100%;max-width:none}
  .bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;grid-auto-flow:row}
  .bento-f,.bento-b,.bento-w,.bento-n{grid-column:auto;grid-row:auto}
  .thub-card{height:auto}
  .bento-w .tcard-body,.bento-n .tcard-body{display:flex}
  .bento-w .tcard-ov,.bento-n .tcard-ov{display:none}
  .bento-w .tcard-banner,.bento-n .tcard-banner,.bento-b .tcard-banner{height:auto;aspect-ratio:16/9;min-height:0;flex:0 0 auto}
  .bento-b .tcard-body{flex:1 1 auto}
  .bento-b .tcard-desc{display:-webkit-box}
  .bento-f{flex-direction:column}
}
@media(max-width:560px){.bento-grid{grid-template-columns:1fr}}
/* Alte Team-Uebersicht (Akkordeon) — Klassen bleiben gestylt */
.teams-overview{display:flex;flex-direction:column;gap:2.4rem}
.game-group-title{font-size:1.6rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.team-accordion{display:flex;flex-direction:column;gap:.75rem}
.team-acc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color var(--dur-hover) ease}
.team-acc.is-open{border-color:var(--tc,var(--border2))}
.team-acc-head{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem 1.2rem;background:none;border:none;color:inherit;font:inherit;cursor:pointer;text-align:left;transition:background-color var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){.team-acc-head:hover{background:var(--glass)}}
.tacc-logo-wrap{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tacc-logo{width:44px;height:44px;border-radius:var(--r)}
.tacc-icon{font-size:1.4rem;font-weight:900}
.tacc-main{flex:1;min-width:0}
.tacc-name{font-size:1.05rem;font-weight:800}
.tacc-meta{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.tacc-count{font-size:.82rem;color:var(--text3);white-space:nowrap}
.tacc-caret{font-size:.9rem;color:var(--text3);transition:transform var(--dur-pop) var(--ease-out)}
.team-acc.is-open .tacc-caret{transform:rotate(180deg)}
.team-acc-panel{padding:0 1.2rem 1.4rem;border-top:1px solid var(--border)}
.team-acc-loading{padding:1.4rem;text-align:center;color:var(--text3);font-size:.9rem}
.team-panel-desc{color:var(--text2);line-height:1.7;margin:1rem 0}
.team-panel-rows{display:flex;flex-direction:column;gap:.55rem;margin:1rem 0 1.4rem}
.tpr{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.tpr-label{font-size:.72rem;color:var(--text3);min-width:120px}
.tpr-value{color:var(--text);font-size:.95rem}
.tpr-social{display:inline-flex;flex-wrap:wrap;gap:.8rem}
.tpr-social a{color:var(--accent-text);font-size:.9rem;font-weight:600}
@media (hover:hover) and (pointer:fine){.tpr-social a:hover{text-decoration:underline}}
.team-panel-roster-title{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:.5rem 0 1rem;color:var(--text2)}
.team-panel-foot{display:flex;justify-content:flex-end;margin-top:1.2rem}
/* Team-Detail-Hero: grosser Name, Logo, Farbe des Teams als feine Linie */
.td-hero-full{position:relative;overflow:hidden;padding:clamp(3.5rem,7vw,6rem) var(--gutter) clamp(2.5rem,5vw,4rem);background:var(--bg2);border-bottom:1px solid var(--border)}
.td-hero-full::before{display:none;content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 90% at 85% 20%,color-mix(in srgb,var(--tc) 18%,transparent) 0%,transparent 70%)}
.td-hero-full::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--border2)}
.td-hero-inner{max-width:calc(var(--maxw) - 2 * var(--gutter));margin:0 auto;position:relative;z-index:1}
.td-hero-top{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.td-hero-icon{position:relative;overflow:hidden;width:120px;height:120px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:3rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;color:var(--glaze-ink);background:var(--glaze)!important;border:0!important;box-shadow:inset 0 -5px 0 var(--tc,var(--accent));flex-shrink:0}
.td-hero-icon::before{content:"";position:absolute;inset:0;background:var(--crackle-line);-webkit-mask:var(--crazing) 0 0/var(--crazing-size) repeat;mask:var(--crazing) 0 0/var(--crazing-size) repeat;pointer-events:none}
.td-hero-logo{width:120px;height:120px;border-radius:0;object-fit:contain;flex-shrink:0}
.td-hero-name{position:relative;font-size:clamp(2.8rem,7vw,6rem);padding-bottom:clamp(.7rem,1.2vw,1rem)}
.td-hero-name::after{content:"";position:absolute;left:-.05em;bottom:0;width:min(70%,460px);height:clamp(9px,1.1vw,15px);background:var(--tc,var(--accent));-webkit-mask:var(--brush) left center/100% 100% no-repeat;mask:var(--brush) left center/100% 100% no-repeat}
.td-hero-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.td-hero-desc{color:var(--text2);font-size:1.05rem;line-height:1.7;max-width:68ch;white-space:pre-line}
.tdh-social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tdh-social a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border2);border-radius:var(--r);padding:.45rem .8rem;font-size:.8rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text);transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.tdh-social a:hover{border-color:var(--text);background:var(--glass)}}
.team-detail-hero{padding:4rem var(--gutter);background:var(--bg2);border-bottom:1px solid var(--border)}
.tdh-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.team-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem}
.team-ov-card{padding:clamp(1.4rem,2.6vw,2rem)}
.team-ov-card h3{font-size:1.3rem;font-weight:800;margin-bottom:.6rem}
.team-ov-card .sec-title{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:1rem}
.team-ov-header{display:flex;align-items:center;gap:1rem}
.team-ov-icon{width:52px;height:52px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;flex-shrink:0}
.team-ov-name{font-size:1.2rem;font-weight:800}
.team-ov-desc{color:var(--text2);font-size:.92rem;line-height:1.7;margin-top:1rem}
.team-ov-actions{margin-top:1rem;display:flex;gap:.8rem;flex-wrap:wrap}
.md-overview .md-p{color:var(--text2);font-size:.95rem;line-height:1.7;margin:.15rem 0}
.md-overview .md-list{margin:.3rem 0}
.md-field{margin:.8rem 0}
.md-label{color:var(--text3);font-size:.72rem;margin-bottom:.3rem}
.md-list{list-style:none;padding:0;margin:.2rem 0;display:flex;flex-direction:column;gap:.2rem}
.md-list li{padding-left:1rem;position:relative;color:var(--text2);font-size:.92rem;line-height:1.6}
.md-list li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:2px;background:var(--accent)}
.md-p{color:var(--text2);font-size:.92rem;line-height:1.65;margin:.15rem 0}
/* Roster: Portrait-Karten, Banner gleitet beim Hover in Teamfarbe herein */
.players-grid{--cols:5;--gap:1.25rem;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.players-grid>*{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
@media(max-width:1200px){.players-grid{--cols:4}}
@media(max-width:900px){.players-grid{--cols:3}}
.pcard{position:relative;display:flex;flex-direction:column;width:100%;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--card);padding:0;font:inherit;color:var(--text);text-align:left;cursor:pointer;transition:border-color var(--dur-hover) ease,var(--tr-press)}
@media (hover:hover) and (pointer:fine){.pcard:hover{border-color:var(--border2)}}
.pcard:focus-visible{outline:2px solid var(--tc,var(--accent));outline-offset:2px}
.pcard-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg3)}
/* Ember-Kante: zieht unter Hitze von links ueber das Foto; Teamfarbe bleibt als Haarlinie */
.pcard-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:var(--ember);clip-path:inset(0 100% 0 0);transition:clip-path var(--dur-heat) var(--ease-out)}
.pcard-media::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--tc,var(--border2));z-index:1}
.pcard-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0!important;border-radius:0;margin:0;filter:var(--fired);transition:transform .6s var(--ease-out),filter var(--dur-heat) ease}
@media (hover:hover) and (pointer:fine){.pcard:hover .pcard-photo{transform:scale(1.04)}}
.pcard-photo.ppic-fallback{font-size:3rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase}
.ppic-fallback{display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#fff;border:none}
.ppic-fallback-img{object-fit:cover;background:var(--bg2)}
.pcard-shade{display:none}
/* Name liegt jetzt im Info-Bereich darunter; die Foto-Ueberschrift entfaellt (doppelt). */
.pcard-foot{display:none}
.pcard-banner{position:relative;z-index:1;display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.05rem 1.1rem;background:var(--card);transform:none}
.pcard-logo-mini{position:absolute;top:-46px;right:.75rem;width:36px;height:36px;border-radius:var(--r);background:rgba(0,0,0,.45);padding:3px}
.pcard-banner .pign-lg{font-size:1.45rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;color:var(--text);line-height:1;padding-right:0}
.pcard-banner .pign-lg::first-letter{color:inherit}
.pcard-banner .prealname{color:var(--tc,var(--accent));font-size:.86rem;font-weight:600;margin:0;filter:brightness(1.25)}
.pcard-banner .proles{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0;justify-content:flex-start}
.pcard-banner .pbio{color:var(--text2);font-size:.86rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.pcard-banner .chip2{background:transparent;color:var(--text2);border-color:var(--border2)}
.pcard-socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.05rem}
.pcard-socials a{color:var(--text);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
@media (hover:hover) and (pointer:fine){.pcard-socials a:hover{text-decoration:underline}}
.pcard-cta{display:inline-flex;align-items:center;gap:.4rem;color:var(--text);font-size:.78rem;margin-top:.25rem}
.pcard-cta .nd-icon-arrow{width:16px;height:16px;transition:var(--tr-lift)}
@media (hover:hover) and (pointer:fine){.pcard:hover .pcard-cta .nd-icon-arrow{transform:translateX(3px)}}
.pcard-body{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.pavatar{width:72px;height:72px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:#fff;position:relative}
.pavatar-img{width:68px;height:68px;border-radius:50%;object-fit:cover;display:block;margin:0 auto .9rem;border:2px solid}
.p-cap{position:absolute;bottom:-2px;right:-2px;width:22px;height:22px;border-radius:50%;background:var(--orange);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:#000}
.pign{font-size:1.05rem;font-weight:800;margin-bottom:.2rem}
.prealname{color:var(--text2);font-size:.86rem;margin-bottom:.55rem}
.prole{display:inline-block;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent-text);border-radius:var(--r);padding:.25rem .6rem;font-size:.72rem;font-weight:700;margin-bottom:.7rem}
.pcountry{color:var(--text3);font-size:.82rem;margin-bottom:.5rem}
.pbio{color:var(--text2);font-size:.88rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.8rem}
.psocials{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.psoc{border:1px solid var(--border2);border-radius:var(--r);padding:.25rem .6rem;font-size:.75rem;color:var(--text2)}
.pflag{margin-right:.35em;font-size:.5em;font-family:var(--font);font-weight:700;letter-spacing:.04em;vertical-align:.35em;opacity:.85}
.pgender{display:inline-flex;align-items:center;margin-right:.4rem;opacity:.9}
.pgender svg{width:.9em;height:.9em;vertical-align:-.12em}
.pgender-m{color:#5b9bd5}.pgender-w{color:#e87fb0}
.pgender-after{margin-right:0;margin-left:.55rem}
.pp-hero-name .pgender-after svg{width:.6em;height:.6em}
.pgender-corner{position:absolute;right:.75rem;top:.75rem;bottom:auto;z-index:2;margin:0;width:26px;height:26px;justify-content:center;border-radius:50%;background:rgba(0,0,0,.55);opacity:1;transition:opacity var(--dur-hover) ease}
.pgender-corner svg{width:15px;height:15px}
.pcard .pgender-corner{display:none}


/* Spieler-Profilseite */
.pp-hero-top{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:1rem}
.pp-hero-photo{width:150px;height:150px;object-fit:contain;flex-shrink:0;border:1px solid var(--border2);border-radius:var(--r);padding:10px;background:var(--bg3)}
.pp-hero-photo.ppic-fallback{display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;color:#fff;text-transform:uppercase;background:color-mix(in srgb,var(--tc,var(--accent)) 88%,#000);padding:0}
.pp-hero-photo.is-zoomable{cursor:zoom-in;transition:border-color var(--dur-hover) ease,var(--tr-press)}
@media (hover:hover) and (pointer:fine){.pp-hero-photo.is-zoomable:hover{border-color:var(--text)}}
.pp-hero-id{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.pp-hero-id .proles{justify-content:flex-start}
.pp-hero-name{font-size:clamp(2.8rem,6.6vw,5.6rem);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pp-hero-real{color:var(--text2);font-size:1.05rem}
.pp-hero-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.2rem}
.pp-hero-chips .chip2{cursor:default}
.pp-hero-chips button.chip2{cursor:pointer;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.pp-hero-chips button.chip2:hover{border-color:var(--text);color:var(--text)}}
.pp-hero-social{margin-top:.4rem}
.pp-sec{padding-top:0}
.pp-sec-title{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:1.5rem}
.pp-favorite{font-size:1.4rem;font-weight:800;color:var(--tc,var(--accent))}
.pp-meta-label{color:var(--text3)}
.pp-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.pp-stat{padding:1.5rem 1.3rem;text-align:left;border:0;border-radius:0}
.pp-stat-value{font-size:2.6rem;line-height:1;color:var(--text)}
.pp-stat-label{color:var(--text2);font-size:.75rem;margin-top:.45rem}
.pp-chart{display:flex;flex-direction:column;gap:1.1rem;max-width:720px}
.pp-bar-row{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:1rem}
.pp-bar-label{color:var(--text2);font-size:.92rem;font-weight:600}
.pp-bar-track{height:8px;background:var(--bg3);border-radius:0;overflow:hidden}
.pp-bar-fill{display:block;height:100%;border-radius:0;background:var(--tc,var(--accent));transition:width .6s var(--ease-out)}
.pp-bar-val{color:var(--text);font-size:1.2rem;text-align:right}
.pp-clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.pp-clip{display:flex;flex-direction:column;overflow:hidden}
.pp-clip-thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--bg3)}
.pp-clip-thumb img{width:100%;height:100%;object-fit:cover}
.pp-clip-play svg{width:20px;height:20px}
.pp-clip-play{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;padding-left:0;border:1px solid rgba(255,255,255,.5);transition:background-color var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){.pp-clip:hover .pp-clip-play{background:var(--tc,var(--accent))}}
.pp-clip-title{padding:.9rem 1rem;font-size:.95rem;font-weight:650;color:var(--text)}
@media(max-width:560px){.pp-bar-row{grid-template-columns:96px 1fr 36px;gap:.6rem}.pp-hero-photo{width:104px;height:104px}}
/* Mitglieder-Block (CMS "members") — Styles in page-sections/members/style.css */

/* ---------- 10. Formulare ---------- */
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.split-grid-single{grid-template-columns:minmax(0,960px);justify-content:center}
.form-stack{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.4rem}
.apply-form-wrap{padding:clamp(1.4rem,3vw,2.5rem)}
.apply-form-wrap>.sec-title{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.apply-form-wrap .fld{margin-bottom:0}
.apply-form-wrap .fld label:not(.apply-check){display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.78rem;font-family:var(--font-ui);font-weight:700;color:var(--text2);margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.06em}
.apply-form-wrap .fld input,.apply-form-wrap .fld select,.apply-form-wrap .fld textarea{width:100%;min-height:48px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:.75rem 1rem;color:var(--text);font-size:.98rem;font-family:var(--font);transition:border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
.apply-form-wrap .fld input::placeholder,.apply-form-wrap .fld textarea::placeholder{color:var(--text3)}
.apply-form-wrap .fld input:focus,.apply-form-wrap .fld textarea:focus,.apply-form-wrap .fld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.apply-form-wrap .fld textarea{resize:vertical;min-height:120px}
.apply-form-wrap .fld select{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a6a6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.apply-form-wrap .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.apply-form-wrap .fld select optgroup{color:var(--text2);font-weight:700;background:var(--bg2)}
.apply-form-wrap .fld select option{color:var(--text);font-weight:400;background:var(--bg2)}
/* Mehrstufiges Formular: [hidden] muss hart greifen, sonst schlaegt .fld-row{display:grid} das UA-[hidden]. */
.apply-form-wrap [hidden]{display:none!important}
.apply-check{display:flex;align-items:flex-start;gap:.65rem;font-size:.92rem;color:var(--text2);cursor:pointer;line-height:1.55}
.apply-check input[type="checkbox"]{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent)}
.apply-check a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.fld-label-text{display:inline-flex;align-items:center;gap:.4rem}
.fld-meta{font-size:.72rem;letter-spacing:0;text-transform:none;font-family:var(--font);font-weight:500}
.fld-meta-required{color:var(--accent-text);font-size:1rem;line-height:1}
.fld-meta-optional{color:var(--text3)}
.apply-gate{border:1px solid var(--border);border-radius:var(--r);background:var(--bg);padding:1.4rem 1.5rem;margin:0;display:flex;flex-direction:column;gap:.9rem}
.apply-gate-title{font-size:.8rem;color:var(--accent-text);padding:0;margin-bottom:.15rem;float:none}
.apply-gate .apply-check{font-size:.95rem;line-height:1.6}
.apply-gate [data-apply-continue]{align-self:flex-start;margin-top:.35rem}
.apply-gate [data-apply-continue]:disabled{opacity:.45;cursor:not-allowed}
.apply-body{display:flex;flex-direction:column;gap:1.1rem}
.apply-dynamic{display:flex;flex-direction:column;gap:1.1rem}
.apply-rest{display:flex;flex-direction:column;gap:1.1rem}
.apply-body.is-revealed{animation:applyReveal .3s var(--ease-out) backwards}
@keyframes applyReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.team-form-fields{display:flex;flex-direction:column;gap:1.1rem;padding:1.2rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg)}
.team-status-note{border:1px solid color-mix(in srgb,var(--orange) 40%,transparent);background:color-mix(in srgb,var(--orange) 8%,transparent);color:var(--orange);border-radius:var(--r);padding:.9rem 1rem;font-size:.92rem;line-height:1.55}
.team-full-warning,.age-warning{display:flex;align-items:flex-start;gap:.6rem;border:1px solid color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);border-radius:var(--r);padding:.9rem 1rem;font-size:.92rem;line-height:1.5;font-weight:600}
.team-full-warning::before,.age-warning::before{content:"";width:18px;height:18px;flex-shrink:0;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 19.5h19Z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17.2v.1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 19.5h19Z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17.2v.1'/%3E%3C/svg%3E") center/contain no-repeat}
.birthday-field{display:flex;gap:.6rem;align-items:stretch}
.birthday-field input{flex:1;min-width:0}
.birthday-age{display:flex;align-items:center;white-space:nowrap;border:1px solid var(--border2);background:var(--bg3);border-radius:var(--r);padding:0 1rem;font-size:.9rem;font-weight:700;color:var(--text2);font-variant-numeric:tabular-nums}
.team-questions{display:flex;flex-direction:column;gap:1rem;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg);padding:1.25rem 1.35rem}
.team-questions-title{font-size:.8rem;color:var(--accent-text)}
.question-checks{display:flex;flex-direction:column;gap:.55rem;margin-top:.2rem}
.question-check{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;color:var(--text);cursor:pointer;line-height:1.45}
.question-check input[type="checkbox"]{margin-top:2px;width:18px;height:18px;accent-color:var(--accent)}
.team-status-panel{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.team-status-panel-title{font-size:1.4rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;margin-bottom:1rem}
.team-status-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.team-status-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem .25rem;border-width:0 0 1px;border-radius:0;background:transparent}
.team-status-name{font-weight:700}
.team-status-meta{color:var(--text3);font-size:.85rem;margin-top:.15rem}
.apply-intro{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:2.5rem;margin-bottom:2rem}
.apply-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.apply-type-card{padding:1.8rem;cursor:pointer}
.atc-icon{font-size:2rem;margin-bottom:.8rem}.atc-title{font-size:1.1rem;font-weight:700;margin-bottom:.5rem}.atc-desc{color:var(--text2);font-size:.92rem;line-height:1.6}
.atc-arrow{position:absolute;top:1.5rem;right:1.5rem;font-size:1.2rem;color:var(--accent-text);opacity:.5;transition:opacity var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){.apply-type-card:hover .atc-arrow{opacity:1}}

/* ---------- 11. Seiten ---------- */
.about-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.article-page{max-width:1000px}
.article-card{padding:clamp(1.5rem,4vw,3rem)}
.article-card .sec-title{font-size:clamp(2.4rem,5.4vw,4.4rem);margin:.4rem 0 .8rem}
.article-body{margin-top:1.5rem;font-size:1.06rem;max-width:72ch}
.legal-card{padding:clamp(1.5rem,4vw,3rem)}
.legal-card h3{font-size:1.15rem;font-weight:800;margin:2.2rem 0 .7rem;color:var(--text)}
.legal-card h3:first-child{margin-top:0}
.legal-card p{color:var(--text2);font-size:.98rem;line-height:1.75;max-width:75ch}
.legal-card a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.legal-card ul{list-style:disc;padding-left:1.2rem}
.legal-card li{margin-bottom:.3rem;font-size:.98rem;line-height:1.7}
.privacy-table-wrap{overflow-x:auto;margin:.8rem 0}
.privacy-table{width:100%;border-collapse:collapse;font-size:.92rem}
.privacy-table th,.privacy-table td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--border)}
.privacy-table th{color:var(--text);font-weight:700;background:var(--bg3)}
.privacy-table td{color:var(--text2)}
/* Spiele */
.games-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.25rem}
.game-page-card{padding:clamp(1.4rem,2.6vw,2rem)}
.game-page-header{display:flex;align-items:center;gap:1rem}
.game-page-icon{font-size:1.6rem;width:60px;height:60px;background:var(--bg3);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-family:var(--font-ui);text-transform:uppercase}
.game-page-name{font-size:2rem}
.game-teams-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.game-team-row{display:flex;align-items:center;gap:.8rem;padding:.8rem .25rem;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;text-align:left;font-weight:650;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.game-team-row:hover{color:var(--accent-text)}}
/* Destiny League */
.dl-list{display:flex;flex-direction:column;gap:1.5rem}
.dl-card{overflow:hidden}
.dl-banner{height:240px;overflow:hidden;position:relative}
.dl-banner img{width:100%;height:100%;object-fit:cover;display:block}
.dl-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6) 100%)}
.dl-body{padding:clamp(1.4rem,3vw,2.2rem)}
.dl-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.dl-season{background:var(--accent);color:var(--on-accent);font-size:.75rem;padding:.3rem .6rem;border-radius:var(--r)}
.dl-game,.dl-date{color:var(--text2);font-size:.75rem;padding:.3rem .6rem;border-radius:var(--r);border:1px solid var(--border2)}
.dl-title{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:.7rem}
.dl-desc{color:var(--text2);line-height:1.7;margin-bottom:1.4rem;max-width:72ch}
.dl-winner{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border-radius:var(--r);background:var(--bg3);margin-bottom:1.4rem}
.dl-winner-logo{width:56px;height:56px;border-radius:var(--r);object-fit:contain;border:0}
.dl-winner-trophy{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;color:var(--orange)}
.dl-winner-trophy svg{width:30px;height:30px}
.dl-winner-label{font-size:.72rem;color:var(--text3)}
.dl-winner-name{font-size:1.5rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;color:var(--text);line-height:1.05}
.dl-winner-note{font-size:.9rem;color:var(--text2);margin-top:.2rem}
.dl-detail-banner{height:380px}
.dl-detail-title{font-size:clamp(2.6rem,6vw,5rem)}
.dl-hdr-badge{width:110px;height:110px;object-fit:contain;margin-bottom:clamp(2rem,3.5vw,3.25rem)}
@media (max-width:640px){.dl-detail-banner{height:210px}.dl-banner{height:180px}}
/* Video (Zwei-Klick) */
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--r);background:#000}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-consent{background:var(--bg3);border:1px dashed var(--border2)}
.video-consent-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:1.25rem;text-align:center}
.video-consent-text{max-width:36rem;font-size:.92rem;line-height:1.55;color:var(--text2);margin:0}
.video-consent-remember{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--text2);cursor:pointer}
.video-consent-remember input{accent-color:var(--accent);width:16px;height:16px}
/* Shop-Aktionen (Grid-Stack: alle Slides in einer Zelle, Hoehe waechst mit dem Inhalt) */
.shop-slider{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--border);margin-bottom:2rem}
.shop-slider-track{display:grid;width:100%}
.shop-promo{grid-area:1/1;opacity:0;pointer-events:none;display:flex;align-items:center;gap:2.5rem;padding:2.5rem 4.5rem;transition:opacity .5s ease}
.shop-promo.is-active{opacity:1;pointer-events:auto}
.shop-promo-img{width:220px;height:220px;object-fit:contain;border-radius:var(--r);flex-shrink:0}
.shop-promo-text{flex:1;min-width:0}
.shop-promo-shop{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:.72rem;padding:.3rem .6rem;border-radius:var(--r);margin-bottom:.9rem}
.shop-promo-text h3{font-size:clamp(1.8rem,3.2vw,2.8rem);font-family:var(--font-ui);font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:.7rem}
.shop-promo-text p{color:var(--text2);font-size:1.02rem;line-height:1.6;margin-bottom:1.3rem}
.shop-promo-cta{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
@media (hover:hover) and (pointer:fine){.shop-promo-cta:hover{background:var(--accent2);border-color:var(--accent2)}}
.shop-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);color:#fff;width:44px;height:44px;border-radius:var(--r);font-size:1.4rem;cursor:pointer;z-index:2;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.shop-slider-arrow:hover{background:#fff;color:#000}}
.shop-slider-prev{left:1rem}.shop-slider-next{right:1rem}
.shop-slider-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.45rem;z-index:2}
.shop-slider-dot{width:24px;height:3px;border-radius:0;background:var(--border2);border:none;cursor:pointer;padding:0;position:relative;transition:background-color var(--dur-hover) ease}
.shop-slider-dot::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.shop-slider-dot.is-active{background:var(--accent)}
@media(max-width:720px){.shop-promo{flex-direction:column;text-align:center;padding:2rem 1.5rem 3rem}.shop-promo-img{width:160px;height:160px}}
/* Turniere */
.tourn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.tourn-card{display:block;padding:1.3rem 1.4rem;text-decoration:none;color:inherit}
.tourn-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:.6rem}
.tourn-name{font-size:1.6rem}
.tourn-meta{color:var(--text2);font-size:.9rem}
.tourn-badge{padding:.25rem .55rem;border-radius:var(--r);font-size:.75rem;font-weight:700;white-space:nowrap}
.tourn-back{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1rem;color:var(--text2);text-decoration:none;font-size:.9rem;font-weight:700}
@media (hover:hover) and (pointer:fine){.tourn-back:hover{color:var(--text)}}
.tourn-stage{margin-top:2rem}
.tourn-stage h3{font-size:1.3rem;font-weight:800;margin-bottom:.6rem}
.tourn-stage h3 small{color:var(--text2);font-weight:500;font-size:.85rem}
.sec-head{margin-bottom:1.8rem}
.sec-head h1{font-size:clamp(2.6rem,6.4vw,5.6rem);font-family:var(--font-ui);font-weight:800;text-transform:uppercase;line-height:.95}
.sec-head p{color:var(--text2);margin-top:.5rem}
.brk-rounds{display:flex;gap:28px;align-items:flex-start;overflow-x:auto;padding:10px 0}
.brk-col{display:flex;flex-direction:column;gap:12px;min-width:210px}
.brk-col h4{color:var(--text3);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.brk-match{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card)}
.brk-slot{display:flex;justify-content:space-between;padding:.5rem .75rem;font-size:.92rem;font-variant-numeric:tabular-nums}
.brk-slot+.brk-slot{border-top:1px solid var(--border)}
.brk-slot.win{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);font-weight:700}
.tourn-table-wrap{overflow-x:auto;margin-top:14px}
.tourn-table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.tourn-table th,.tourn-table td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--border)}
.tourn-table th{color:var(--text2);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.tourn-live{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.tourn-live-label{font-weight:800;color:var(--red);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.tlt-track{display:flex;gap:22px;overflow-x:auto}
.tlt-item{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:.92rem}
.tlt-vs{color:var(--accent-text);font-weight:700;font-variant-numeric:tabular-nums}
.tlt-live{color:var(--red);font-weight:700;font-size:.75rem}
.tourn-vs{color:var(--text2);text-align:center}
.tpart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.tpart-card{display:flex;flex-direction:column;padding:.6rem .8rem}
.tpart-name{font-weight:700}
.tpart-meta{font-size:.8rem;color:var(--text2)}
.tip-widget{display:flex;gap:14px;align-items:center;margin-top:2rem;padding:1.1rem 1.3rem;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--r);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tip-widget-emoji{display:inline-flex;color:var(--accent-text)}
.tip-widget-emoji svg{width:28px;height:28px}
.tourn-stage h3{display:flex;align-items:center;gap:.5rem}
.tourn-stage h3 svg{width:22px;height:22px;color:var(--accent-text)}
.tourn-rank{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-weight:800;font-size:.85rem;background:var(--bg3);color:var(--text2);font-variant-numeric:tabular-nums}
.tourn-rank.is-top1{background:#d4a72c;color:#1a1300}.tourn-rank.is-top2{background:#b9bec7;color:#15171a}.tourn-rank.is-top3{background:#b07a4d;color:#1a0f06}
.tourn-live-label::before,.tlt-live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.4rem;border-radius:50%;background:var(--red);vertical-align:.1em}
.tip-widget p{color:var(--text2);margin:2px 0 0;font-size:.92rem}
.tip-widget code{background:var(--bg3);padding:1px 6px;border-radius:var(--r);color:var(--accent-text)}
/* Fehler- und Wartungsseite */
.error-page,.maintenance-page{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;justify-content:center;position:relative}
.error-lang-pos{position:absolute;top:1rem;right:var(--gutter)}
.error-state,.maintenance-state{text-align:center;max-width:560px;padding:3rem 1.5rem}
.error-owl{width:150px;height:150px;object-fit:contain;margin-bottom:1.4rem}
.error-icon-wobble{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-size:2.5rem;font-weight:800;margin-bottom:1.5rem}
.error-title,.maint-title{font-size:clamp(2.4rem,6vw,3.8rem);color:var(--text);margin-bottom:1rem}
.error-text,.maint-text{color:var(--text2);font-size:1.05rem;line-height:1.7;margin-bottom:1.4rem}
.error-detail{display:inline-block;border:1px solid var(--border2);border-radius:var(--r);padding:.5rem 1rem;font-size:.9rem;color:var(--text);font-weight:600;margin-bottom:1.4rem}
.error-contact{color:var(--text2);font-size:.92rem}
.error-mail{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;font-weight:600}
.maint-logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.6rem}
.maint-logo{width:96px;height:96px;object-fit:contain;position:relative;z-index:2}
.maint-owl{width:150px;height:150px;border-radius:0}
.maint-pulse{display:none;position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%);animation:maintPulse 2.4s ease-in-out infinite}
@keyframes maintPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.4);opacity:0}}
.maint-dots{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.maint-dots span{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:maintFade 1.4s ease-in-out infinite}
.maint-dots span:nth-child(2){animation-delay:.2s}.maint-dots span:nth-child(3){animation-delay:.4s}
@keyframes maintFade{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.glitch-char{display:inline-block;transition:none}
.nav-banner-img{height:100px;object-fit:contain;display:block;margin:0 auto}
/* Alte Spieler-Detail-Bausteine (weiterhin gestylt) */
.pd-hero-layout{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:1rem}
.pd-avatar{width:140px;height:140px;border-radius:var(--r);object-fit:cover;border:2px solid;flex-shrink:0}
.pd-avatar-placeholder{width:140px;height:140px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;color:#fff;flex-shrink:0}
.pd-info-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:.8rem 1.2rem;min-width:120px}
.pd-info-label{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.pd-info-val{font-weight:700;font-size:.95rem}

/* ---------- 12. Overlays ---------- */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:800;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;visibility:hidden;transition:opacity 150ms ease,visibility 0s linear 150ms}
.modal-ov.open{opacity:1;visibility:visible;transition:opacity var(--dur-pop) var(--ease-out),visibility 0s}
.modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);max-width:720px;width:100%;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;padding:2.2rem;position:relative;transform:scale(.96);transition:transform 150ms var(--ease-out);box-shadow:var(--shadow-pop)}
.modal-ov.open .modal-box{transform:none;transition:transform var(--dur-modal) var(--ease-out)}
.ext-dialog{max-width:540px}
.ext-dialog h3{margin:0 2.4rem .7rem 0;font-size:1.9rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;line-height:1}
.ext-dialog p{margin:0 0 .9rem;color:var(--text2);font-size:.98rem;line-height:1.6}
.ext-dialog-url{word-break:break-all;font-family:ui-monospace,monospace;font-size:.85rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:.6rem .8rem;color:var(--text)}
.ext-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem;margin-top:1.4rem}
.modal-cls svg,.nd-lightbox-close svg{width:18px;height:18px}
.modal-cls{position:absolute;top:1rem;right:1rem;background:transparent;border:1px solid var(--border2);color:var(--text2);width:36px;height:36px;border-radius:var(--r);font-size:.9rem;transition:var(--tr-colors),var(--tr-press);display:flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.modal-cls:hover{background:var(--text);border-color:var(--text);color:var(--bg)}}
.nd-lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,5vw,3rem);background:rgba(0,0,0,.88);opacity:0;transition:opacity 150ms ease;cursor:zoom-out}
.nd-lightbox.is-open{opacity:1;transition:opacity var(--dur-pop) var(--ease-out)}
.nd-lightbox-img{max-width:min(92vw,760px);max-height:88vh;max-height:88dvh;object-fit:contain;border-radius:var(--r);box-shadow:var(--shadow-pop);transform:scale(.96);transition:transform 150ms var(--ease-out);cursor:default}
.nd-lightbox.is-open .nd-lightbox-img{transform:none;transition:transform var(--dur-modal) var(--ease-out)}
.nd-lightbox-close{position:absolute;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:var(--r);cursor:pointer;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,var(--tr-press)}
@media (hover:hover) and (pointer:fine){.nd-lightbox-close:hover{background:#fff;color:#000}}
@media (prefers-reduced-motion:reduce){.nd-lightbox-img,.nd-lightbox.is-open .nd-lightbox-img{transform:none;transition:none}}
.pmodal-backdrop{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:1.2rem;opacity:0;transition:opacity 150ms ease}
.pmodal-backdrop.is-open{opacity:1;transition:opacity var(--dur-pop) var(--ease-out)}
.pmodal{position:relative;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);max-width:500px;width:100%;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;padding:2rem;box-shadow:var(--shadow-pop);transform:scale(.96);transition:transform 150ms var(--ease-out)}
.pmodal-backdrop.is-open .pmodal{transform:none;transition:transform var(--dur-modal) var(--ease-out)}
.pmodal-close{position:absolute;top:.9rem;right:1rem;font-size:1.3rem;line-height:1;color:var(--text3);background:none;border:none;cursor:pointer;transition:color var(--dur-hover) ease,var(--tr-press)}
@media (hover:hover) and (pointer:fine){.pmodal-close:hover{color:var(--text)}}
.pmodal-hero{display:flex;align-items:center;gap:1.3rem;margin-bottom:1.2rem}
.pmodal-photo{width:104px;height:104px;border-radius:var(--r);object-fit:cover;border:1px solid var(--tc,var(--border2));flex-shrink:0}
.pmodal-id{min-width:0}
.pmodal-ign{font-size:2rem;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;line-height:1}
.pmodal-name{color:var(--text2);font-size:.95rem;margin-top:.2rem}
.pmodal-id .proles{justify-content:flex-start;margin-top:.6rem}
.pmodal-bio{color:var(--text2);line-height:1.75;font-size:.95rem;margin-bottom:1rem}
.pmodal-meta{display:flex;flex-wrap:wrap;gap:1rem;color:var(--text3);font-size:.86rem;margin-bottom:1rem}
.pmodal-social{display:flex;flex-wrap:wrap;gap:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.pmodal-social a{color:var(--text);font-weight:650;font-size:.92rem;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
@media(max-width:640px){.tpr-label{min-width:0}.pmodal-hero{flex-direction:column;text-align:center}.pmodal-id .proles{justify-content:center}.team-acc-head{gap:.7rem;padding:.9rem 1rem}}
/* Toasts: rein und raus ueber dieselbe Kante */
#toastZone{position:fixed;bottom:max(2rem,calc(env(safe-area-inset-bottom,0px) + 1rem));right:max(2rem,calc(env(safe-area-inset-right,0px) + 1rem));z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.7rem;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:var(--r);padding:.9rem 1.2rem;min-width:260px;max-width:min(440px,calc(100vw - 2rem));font-size:.92rem;font-weight:600;box-shadow:var(--shadow-pop);pointer-events:auto;transition:transform 320ms var(--ease-out),opacity 220ms ease}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.toast.err::before{background:var(--red)}
@starting-style{.toast{transform:translateX(calc(100% + 2rem));opacity:0}}
.toast.is-leaving{transform:translateX(calc(100% + 2rem));opacity:0;transition-duration:200ms,160ms}
@media(max-width:560px){#toastZone{left:1rem;right:1rem;align-items:stretch}.toast{min-width:0;max-width:none}}
/* Lade-Splash bis zum ersten Render */
#nd-splash{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:opacity .3s var(--ease-out),visibility 0s linear .3s}
#nd-splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
.nd-splash-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.nd-splash-logo{width:80px;height:80px;object-fit:contain;position:relative;z-index:2}
.nd-splash-pulse{display:none}
.nd-splash-bar{width:140px;height:2px;background:var(--border);overflow:hidden}
.nd-splash-bar span{display:block;height:100%;width:40%;background:var(--accent);animation:ndSplashBar 1.1s var(--ease-in-out) infinite}
@keyframes ndSplashBar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.nd-splash-bar span{animation:none}#nd-splash{transition:none}}

/* ---------- 13. Footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--border);padding:clamp(56px,7vw,96px) var(--gutter) 28px}
.footer-inner{max-width:calc(var(--maxw) - 2 * var(--gutter));margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;margin-bottom:3.5rem}
.compact-footer{grid-template-columns:2fr 1fr 1fr}
.footer-brand-name{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:.9rem}
.footer-brand-sub{color:var(--text2);font-size:1rem;line-height:1.7;max-width:36ch;margin-bottom:1.6rem}
.footer-socials{display:flex;gap:.5rem;flex-wrap:wrap}
.fsoc{width:44px;height:44px;border-radius:var(--r);background:transparent;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--text);font-size:.8rem;font-weight:700;transition:var(--tr-colors),var(--tr-press)}
@media (hover:hover) and (pointer:fine){.fsoc:hover{background:var(--text);border-color:var(--text);color:var(--bg)}}
.footer-col h4{font-size:.8rem;color:var(--text3);margin-bottom:1.1rem}
.footer-col a,.footer-col button{display:block;color:var(--text);font-size:1.05rem;font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.35rem 0;transition:color var(--dur-hover) ease;cursor:pointer;text-align:left}
@media (hover:hover) and (pointer:fine){.footer-col a:hover,.footer-col button:hover{color:var(--accent-text)}}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.85rem;color:var(--text3)}
@media(max-width:980px){.compact-footer,.footer-top{grid-template-columns:1fr 1fr}.compact-footer>div:first-child{grid-column:1/-1}}
@media(max-width:600px){.compact-footer,.footer-top{grid-template-columns:1fr}}

/* ---------- Maskottchen (Marken-Eulen) statisch, ohne Schwebe-Animation ---------- */
.hero-logo,.maint-logo,.error-owl,.nd-notfound img,.thub-mascot,.hdr-mascot,.sec-owl{animation:none}
@media (max-width:768px){.thub-mascot{width:96px;height:96px}.hdr-mascot{width:120px;margin-bottom:2rem}.hdr-mascot-wide{width:170px}.sec-owl{width:60px;height:60px}.dl-hdr-badge{width:80px;height:80px;margin-bottom:2rem}}

/* ---------- 14. Motion, Interaktion, Touch, Fokus ---------- */
/* Eingangs-Animationen nur beim ersten Aufbau einer Route (#root.nd-enter, setzt main.js).
   fill "backwards": nach dem Ende bleibt kein transform stehen (Hover/Containing-Block ok). */
@keyframes rootIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#root.nd-enter{animation:rootIn .24s var(--ease-out) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ndRevealIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ndFadeIn{from{opacity:0}to{opacity:1}}
.nd-reveal{opacity:0}
.nd-reveal.nd-visible{opacity:1;animation:ndRevealIn .7s var(--ease-out) backwards}
.nd-reveal.nd-stagger.nd-visible{animation:none}
.nd-stagger.nd-visible>*{animation:cardIn .5s var(--ease-out) backwards}
.nd-stagger.nd-visible>:nth-child(2){animation-delay:50ms}
.nd-stagger.nd-visible>:nth-child(3){animation-delay:100ms}
.nd-stagger.nd-visible>:nth-child(4){animation-delay:150ms}
.nd-stagger.nd-visible>:nth-child(5){animation-delay:200ms}
.nd-stagger.nd-visible>:nth-child(n+6){animation-delay:240ms}
.nd-enter .hero-badge{animation:heroIn .55s var(--ease-out) backwards}
.nd-enter .hero-logo-wrap{animation:heroIn .55s var(--ease-out) 60ms backwards}
.nd-enter .hero h1{animation:heroIn .6s var(--ease-out) 120ms backwards}
.nd-enter .hero-sub{animation:heroIn .55s var(--ease-out) 180ms backwards}
.nd-enter .hero-cta{animation:heroIn .55s var(--ease-out) 240ms backwards}
.nd-enter .hero-scroll{animation:heroIn .5s var(--ease-out) 300ms backwards}
/* Press-Feedback ueber die eigene scale-Property (addiert sich zu bestehenden transforms). */
.btn-glow:active:not(:disabled),.btn-ghost:active:not(:disabled),.btn-white:active:not(:disabled),.btn-login:active,.btn-discord:active,
.btn-admin:active,.hero-slide-cta:active,.section-band-cta:active,.shop-promo-cta:active,.nav-link:active,.news-filter-tab:active,
.news-filter-reset:active,.thub-pill:active,.thub-toggle:active,.tdh-social a:active,.pp-hero-chips button.chip2:active,.game-team-row:active{scale:.97}
.theme-toggle:active,.lang-globe-btn:active,.modal-cls:active,.nd-lightbox-close:active,.pmodal-close:active,.fsoc:active,.arrow-btn:active,
.hero-slider-arrow:active,.section-band-arrow:active,.shop-slider-arrow:active,.nav-burger:active,.nav-logo-btn:active{scale:.94}
.pcard:active,.spcard:active,.tourn-card:active,.pp-clip:active,.apply-type-card:active,
.tcard:has(.tcard-banner:active),.ncard:has(.ncard-thumb:active,.ncard-read:active),.feat-news:has(.feat-news-icon:active){scale:.985}
/* Touch: kein Tap-Delay, Labels nicht markierbar, kein Zoom in Eingabefelder */
button,a,[role="button"],[data-nav],summary,label{touch-action:manipulation}
button,[role="button"],.btn-glow,.btn-ghost,.btn-white,.btn-login,.btn-discord,.btn-admin,.nav-link,.nav-subitem,.nav-m-link,
.news-filter-tab,.thub-pill,.thub-toggle{-webkit-user-select:none;user-select:none}
@media (pointer:coarse){
  input,select,textarea,.apply-form-wrap .fld input,.apply-form-wrap .fld select,.apply-form-wrap .fld textarea,
  .thub-search-input,.news-filter-year-select{font-size:16px}
}
@media (hover:none){.hero-slider-arrow,.section-band-arrow{opacity:1}}
.nav-mobile,.lang-globe-menu,.nd-lightbox{overscroll-behavior:contain}
/* Fokus: klare Tastatur-Ringe, nie beim Mausklick */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-link:focus-visible,.nav-subitem:focus-visible,.lang-option:focus-visible{outline-offset:-2px}
/* Typografie-Feinschliff */
.sec-title,.hero h1,.hero-slide-title,.feat-news-title,.join-strip h2,.section-band-title,.section-band-slogan,.td-hero-name,
.pp-hero-name,.cms-page-title,.thub-title,.error-title,.maint-title,.empty-state h3,.nd-notfound h3,.ext-dialog h3,.ncard-title,.tcard-name{text-wrap:balance}
.sec-sub,.hero-sub,.hero-slide-sub,.section-band-sub,.feat-news-exc,.join-strip p,.error-text,.maint-text,.ncard-exc,.tcard-desc{text-wrap:pretty}
.tacc-count,.thub-pill-n,.thub-shelf-count,.thub-count{font-variant-numeric:tabular-nums}
/* Reduzierte Bewegung: Deckkraft/Farbe bleiben, Bewegung entfaellt */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #root.nd-enter,.nd-enter .hero-badge,.nd-enter .hero-logo-wrap,.nd-enter .hero h1,.nd-enter .hero-sub,.nd-enter .hero-cta,
  .nd-enter .hero-scroll,.nd-reveal.nd-visible,.nd-stagger.nd-visible>*,.apply-body.is-revealed{animation-name:ndFadeIn}
  .nd-reveal.nd-stagger.nd-visible{animation:none}
  .nav-mobile.open,.nav-m-group.is-open>.nav-m-sub{transform:none}
  .modal-box,.modal-ov.open .modal-box,.pmodal,.pmodal-backdrop.is-open .pmodal{transform:none}
  .toast,.toast.is-leaving{transform:none}
  .nav-submenu,.lang-globe-menu{scale:1}
  .nav-link::after{transition:none}
  .maint-pulse,.maint-dots span,.dot-live,.dot-live-match,.live-ticker-status.live::before{animation:none}
  .apply-body.is-revealed{animation:none}
}


/* ---------- 15. Raku-Material: Korn, Krakelee, Pinselstrich, Hitze-Reveal ---------- */
/* Autorisierte SVG-Masken (Text- und Datenebenen liegen immer davor, nie darueber). */
:root{--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M3 13.5c20-5.5 58-7.6 95-6.8 35 .8 70-1.6 104-4.6 13-1.1 24-.2 35 1.9l-1.6 6.4c-15 2.2-35 3.4-57 4.4-36 1.7-75 1.9-109 3.1-27 1-51 2.8-67 4.1L1 15.6z'/%3E%3Cpath d='M12 19.6c42-2.2 94-3.3 156-4.4' fill='none' stroke='black' stroke-width='1.3' opacity='.65'/%3E%3Cpath d='M28 5.6c52-2.1 112-3 172-1.2' fill='none' stroke='black' stroke-width='1.1' opacity='.5'/%3E%3Cpath d='M150 21.2c24-.6 48-1.4 70-2.6' fill='none' stroke='black' stroke-width='.9' opacity='.45'/%3E%3C/svg%3E");--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Feines Russkorn auf dem Grund (nur wo keine Flaeche liegt) */
body{position:relative}
body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);background-size:180px 180px;mix-blend-mode:soft-light;opacity:.2}
:root[data-theme="light"] body::before{opacity:.28}
#app{position:relative;z-index:1}
::-webkit-scrollbar-thumb{background:var(--clay)}
html{scrollbar-color:var(--clay) var(--bg)}
/* Glasur-Typo auf Team-Kacheln */
.tcard-banner .tcard-game{color:var(--glaze-ink2)}
/* Hitze: nur mit Maus als Hover, mit Tastatur als Fokus; Touch zeigt Farbe immer */
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard-photo,.ncard:hover .ncard-thumb,.feat-news:hover .feat-news-media{filter:var(--heated)}
  .pcard:hover .pcard-media::after{clip-path:inset(0)}
  .tcard:hover .tcard-logo-img{filter:none}
  .tcard:hover .tcard-icon{color:var(--tc,var(--accent))!important}
  .tcard:hover .tcard-banner::after{height:6px}
  .tcard:hover .tcard-banner::before{opacity:.55}
}
.pcard:focus-visible .pcard-photo,.ncard:has(.ncard-thumb:focus-visible) .ncard-thumb,.feat-news:has(.feat-news-media:focus-visible) .feat-news-media{filter:var(--heated)}
.pcard:focus-visible .pcard-media::after{clip-path:inset(0)}
.tcard:has(.tcard-banner:focus-visible) .tcard-logo-img{filter:none}
.tcard:has(.tcard-banner:focus-visible) .tcard-banner::after{height:6px}
@media (hover:none){
  .pcard-photo,.ncard-thumb,.feat-news-media{filter:var(--heated)}
  .tcard-logo-img{filter:none}
}


/* ---------- 16. Raku-Komposition unterhalb des Heros ---------- */
/* Brennprotokoll: Kennzahlen als Spalten mit grossen Ziffern, die erste glueht noch */
.stats-bar{padding:0 var(--gutter);background:var(--bg)}
.stats-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:0;align-items:stretch}
.stat-box{flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.5rem 1.2rem 1.4rem;border-left:1px solid var(--border)}
.stat-box:first-child{border-left:0;padding-left:0}
.stat-box::before{display:none}
.stat-num{font-family:var(--font-ui);font-weight:800;font-size:clamp(2.2rem,3.6vw,3.2rem);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat-label{font-family:var(--font-ui);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text3)}
@media (max-width:900px){
  .stats-inner{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat-box{border-top:1px solid var(--border)}
  .stat-box:nth-child(-n+4){border-top:0}
  .stat-box:nth-child(4n+1){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .stats-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-box{border-left:0;padding-left:0;border-top:1px solid var(--border)}
  .stat-box:nth-child(-n+2){border-top:0}
  .stat-box:nth-child(n+3){border-top:1px solid var(--border)}
  .stat-box:nth-child(4n+1){padding-left:0}
  .stat-box:nth-child(even){border-left:1px solid var(--border);padding-left:1.2rem}
}


/* Aufmacher: Text-Scherbe ueberlappt das gebrannte Bild (Schichtung statt Kachel) */
@media (min-width:901px){
  .feat-news{overflow:visible;background:transparent;border:0;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .feat-news-media{min-height:420px}
  .feat-news-body{position:relative;z-index:2;align-self:center;margin-left:-16%;background:var(--bg2);border:1px solid var(--border);padding:clamp(2rem,3.4vw,3rem)}
  .feat-news-body::before{content:"";position:absolute;left:0;top:0;width:clamp(48px,6vw,84px);height:4px;background:var(--glaze)}
}

/* Spielplan: kommende Termine sind glasierte Scherben, Ergebnisse tragen Hitze bzw. Asche */
.match-card.match-upcoming .match-date,.match-card.match-live .match-date{position:relative;overflow:hidden;justify-self:start;padding:.55rem .65rem .5rem;min-width:58px;background:var(--glaze);border-radius:var(--r);color:var(--glaze-ink)}
.match-card.match-upcoming .match-date::before,.match-card.match-live .match-date::before{content:"";position:absolute;inset:0;background:var(--crackle-line);-webkit-mask:var(--crazing) 0 0/var(--crazing-size) repeat;mask:var(--crazing) 0 0/var(--crazing-size) repeat;pointer-events:none}
.match-card.match-upcoming .match-date>*,.match-card.match-live .match-date>*{position:relative}
.match-card.match-upcoming .match-month,.match-card.match-live .match-month{color:var(--glaze-ink2)}
.match-card.match-upcoming .match-time,.match-card.match-live .match-time{color:var(--glaze-ink2)}
.match-card.is-win .match-score-num:first-child{color:var(--ember)}
.match-card.is-loss .match-score-num{color:var(--text3)}
.match-card.is-loss .match-team-name{color:var(--text2)}
.match-card{position:relative}
.match-card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ember);clip-path:inset(0 100% 0 0);transition:clip-path var(--dur-heat) var(--ease-out);pointer-events:none}
@media (hover:hover) and (pointer:fine){.match-card:hover::after{clip-path:inset(0)}}
.match-card:focus-within::after{clip-path:inset(0)}

/* Erfolge: Platzierung als Pinselzahl, Pokal auf einer Glasur-Scherbe; Titel gluehen */
.ach-trophy{position:relative;overflow:hidden;background:var(--glaze);color:var(--glaze-ink)}
.ach-trophy::before{content:"";position:absolute;inset:0;background:var(--crackle-line);-webkit-mask:var(--crazing) 0 0/var(--crazing-size) repeat;mask:var(--crazing) 0 0/var(--crazing-size) repeat;pointer-events:none}
.ach-trophy svg{position:relative}
.ach-placement{font-family:var(--font-ui);font-weight:800;font-size:1.6rem;letter-spacing:.02em;line-height:1}

/* Partner: Marken gebrannt auf Glasur, Farbe kehrt unter Hitze zurueck */
.sp-logo,.sp-logo-img{background:var(--glaze);color:var(--glaze-ink)}
.sp-logo-img{filter:grayscale(1) contrast(1.1);transition:filter var(--dur-heat) ease}
@media (hover:hover) and (pointer:fine){.spcard:hover .sp-logo-img{filter:none}}
.spcard:focus-visible .sp-logo-img{filter:none}
@media (hover:none){.sp-logo-img{filter:none}}

/* Abschluss-Band: dieselbe Brennkammer wie der Hero (Rauch links, Glut vom Boden) */
.join-strip-band{background-image:radial-gradient(46% 42% at 50% 112%,rgba(249,61,0,.26) 0%,rgba(184,45,0,.1) 45%,transparent 75%),var(--smoke),linear-gradient(rgba(11,11,12,.8),rgba(11,11,12,.9)),url('/assets/band-brush-orange-white.webp');background-size:100% 100%,46% 100%,cover,cover;background-position:center,right top,center,center;background-repeat:no-repeat}
.join-strip:not(.join-strip-band){background:radial-gradient(46% 46% at 50% 115%,rgba(249,61,0,.2) 0%,rgba(184,45,0,.08) 45%,transparent 75%),var(--smoke) right top/46% 100% no-repeat,var(--bg2)}
:root[data-theme="light"] .join-strip:not(.join-strip-band){background:radial-gradient(46% 46% at 50% 115%,rgba(249,61,0,.16) 0%,transparent 70%),var(--bg2)}
.join-strip-band .btn-white,.join-strip .btn-white{background:var(--glaze);color:var(--glaze-ink);border-color:var(--glaze)}

/* Formulare: Fokus glueht (Ember-Kante), Fehler bleibt rot */
.apply-form-wrap .fld input:focus,.apply-form-wrap .fld select:focus,.apply-form-wrap .fld textarea:focus,.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--ember);outline:0;box-shadow:inset 0 -2px 0 var(--ember)}


/* ---------- 17. Finish-Review: Ember-Disziplin, Wahrheit, Kicker raus ---------- */
/* Kleine Scherben (Daten, Initialen, Pokale): Krakelee zurueckgenommen, damit Ziffern lesbar bleiben */
.ecard-date::before,.match-card .match-date::before,.team-mark-lg.is-initials::before,.ach-trophy::before,.td-hero-icon::before{opacity:.78;-webkit-mask-size:120px 120px;mask-size:120px 120px}
.ecard-day,.ecard-month,.match-card .match-date>*,.team-mark-lg.is-initials,.td-hero-icon{text-shadow:0 0 2px var(--glaze),0 0 5px var(--glaze),0 0 9px var(--glaze)}
.ecard:has(.ebadge-past) .ecard-day,.ecard:has(.ebadge-past) .ecard-month{text-shadow:none}
/* Mitgliederbereich ist sekundaer (Glasur), Ember bleibt der Bewerbung/Aktion vorbehalten */
.btn-login{background:var(--glaze);color:var(--glaze-ink);border:1px solid var(--glaze)}
.btn-login:hover{background:var(--glaze2);border-color:var(--glaze2);color:var(--glaze-ink)}
/* About-Statement ohne zweiten Pinselstrich (nur der Hero-Claim traegt ihn) */
.join-strip h2{padding-bottom:0;margin-bottom:1.4rem}
.join-strip h2::after{content:none}
/* Stream-Punkt nur, wenn das Match wirklich live ist */
.match-watch::before{display:none}
.match-card.match-live .match-watch::before{display:block}
/* Spielplan: Liga zuerst, Spiel als ruhige Zweitzeile (kein gesperrtes Label darueber) */
.match-game{order:2;font-family:var(--font);font-size:.82rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text3)}
.match-tournament{order:1}
/* News: Kategorie und Datum als Meta-Zeile unter dem Titel */
.ncard-body,.feat-news-body{display:flex;flex-direction:column}
.ncard-body .ncard-meta,.feat-news-body .ncard-meta{order:1;margin:.15rem 0 .7rem}
.ncard-exc,.feat-news-exc{order:2}
.feat-news-body .text-link{order:3;align-self:flex-start}
.feat-news-title{margin-bottom:.35rem}
/* Partner: gleichmaessiges Raster ohne Waisenzeilen, gleich hohe Karten */
.sponsors-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:stretch}
.sponsors-row>*{flex:none;min-width:0}
.spcard{align-items:flex-start;min-height:118px}
@media (max-width:900px){.sponsors-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sponsors-row{grid-template-columns:1fr}}
/* Erste Ansicht: das heisse Match folgt direkt auf den Hero. Steht im CMS eine Ankuendigung
   dazwischen, wird nur visuell umsortiert (Ankuendigungen enthalten keine Fokusziele). */
main:has(> .hero-slider + .announcements-sec + .live-ticker-sec){display:flex;flex-direction:column}
main:has(> .hero-slider + .announcements-sec + .live-ticker-sec) > .hero-slider{order:-2}
main:has(> .hero-slider + .announcements-sec + .live-ticker-sec) > .live-ticker-sec{order:-1}
main:has(> .hero-slider + .announcements-sec + .live-ticker-sec) > *{width:100%;box-sizing:border-box}
main:has(> .hero-slider + .announcements-sec + .live-ticker-sec) > .announcements-sec{padding-top:0}
/* ... und ragt auf dem Desktop in den ersten Viewport */
@media (min-width:1024px) and (min-height:720px){
  main:has(> .hero-slider + .live-ticker-sec, > .hero-slider + .announcements-sec + .live-ticker-sec) .hero-slider-track{height:calc(100svh - var(--nav-h) - var(--hero-strip,0px) - 200px);min-height:500px}
  main:has(> .hero-slider + .live-ticker-sec, > .hero-slider + .announcements-sec + .live-ticker-sec) .hero-slide-title{font-size:clamp(2.6rem,5.2vw,4.7rem)}
  main:has(> .hero-slider + .live-ticker-sec, > .hero-slider + .announcements-sec + .live-ticker-sec) > .live-ticker-sec{padding-top:clamp(32px,3vw,48px)}
}


/* ---------- 18. Trockenpinsel am Hero-Claim ---------- */
/* Borstenspuren als lokale Alpha-Maske (public/assets/dry-brush.webp, Herkunft in .impeccable/assets/).
   Der Claim bleibt echter Text; die Maske nimmt nur ~15 % Deckung in feinen Borstenspuren weg. */
.hero-slide-title,.hero h1{-webkit-mask-image:url("/assets/dry-brush.webp");mask-image:url("/assets/dry-brush.webp");-webkit-mask-size:512px 128px;mask-size:512px 128px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
@media (forced-colors:active){.hero-slide-title,.hero h1{-webkit-mask-image:none;mask-image:none}}

/* ---------- Responsive Sammelregeln ---------- */
@media(max-width:980px){.about-layout,.split-grid{grid-template-columns:1fr}}
@media(max-width:640px){
  .apply-type-grid,.games-page-grid,.team-overview-grid{grid-template-columns:1fr}
  .feat-news{grid-template-columns:1fr}
  .feat-news-media{min-height:200px}
  .players-grid{--cols:2;--gap:.75rem}
  .stats-inner{gap:0}
  .stat-box+.stat-box::before{left:-.85rem}
  .events-list .ecard,.ecard{grid-template-columns:auto 1fr;gap:1rem}
  .ecard .stack-actions{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start}
  .ann-card{padding:.9rem 1rem;gap:.8rem}
  .ann-card-icon{width:36px;height:36px}
  .td-hero-top{gap:1rem}
  .td-hero-icon,.td-hero-logo{width:80px;height:80px}
  .match-score-num{font-size:1.6rem}
  .stats-mini-grid{grid-template-columns:1fr 1fr}
  .team-status-row{flex-direction:column;align-items:flex-start}
  .apply-form-wrap .fld-row{grid-template-columns:1fr}
  .apply-form-wrap .fld label:not(.apply-check){flex-direction:column;align-items:flex-start;gap:.2rem}
  .sec-hdr-row{align-items:flex-start}
}