/* McDev.TV — ausgelagert aus index.html (05.08.2026), 35 KB.
   Gleicher Grund wie beim Skript: seitenspezifische Regeln, die sich
   selten ändern, gehören in eine zwischenspeicherbare Datei statt in
   jede einzelne Auslieferung des HTML. */
  html, body{
    margin: 0;
    padding: 0;
    background: var(--bg);
    min-height: 100%;
  }

  :root{
    /* Farben kommen aus /assets/theme.css — hier stand bis 08/2026 eine Kopie.
       Nur was die Startseite zusätzlich braucht, bleibt stehen. */
  }
  *{ box-sizing: border-box; }

  .landing{
    position: relative;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100%;
    padding: 28px 20px 60px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden; /* Fallback für sehr alte Browser */
    overflow: clip;   /* erzeugt keinen Scroll-Container -> kein zweiter Scrollbalken */
  }
  .landing::before,
  .landing::after{
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
  }
  .landing::before{
    width: 520px; height: 520px;
    top: -240px; left: -160px;
    background: radial-gradient(circle, rgba(124,252,110,0.30), transparent 70%);
  }
  /* ACHTUNG, teuer gelernt am 05.08.2026: Dieser Glanzpunkt hing mit
     `bottom:-200px` am UNTEREN Rand von .landing — also am Ende der ganzen
     Seite. Jedes bisschen Inhalt, das nachträglich dazukam, änderte die
     Seitenhöhe und verschob damit den Kreis. Für Google zählt das als
     Layout-Verschiebung, und weil der Kreis riesig ist, zählte es SEHR:
     gemessene CLS von 0,44 statt 0,05 — mit abgeschaltetem Kreis war der
     Wert stabil, das war der Beweis.
     Er hängt jetzt am Kopfbereich (.hero, feste Höhe) statt an der Seite.
     Sichtbar ist er dadurch sogar mehr: Am Seitenende bekam ihn auf 6.500
     Pixel Seitenlänge ohnehin fast niemand zu Gesicht. */
  .landing::after{ content: none; }
  .hero::after{
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    width: 460px; height: 460px;
    bottom: -200px; right: -140px;
    background: radial-gradient(circle, rgba(61,220,132,0.22), transparent 70%);
  }
  .landing .bg-grid{
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(124,252,110,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124,252,110,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black 40%, transparent 85%);
    pointer-events: none;
    z-index: 0;
  }
  .landing .top-hairline{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--gold), var(--cyan), transparent);
    background-size: 200% 100%;
    animation: hairline-flow 8s linear infinite;
    z-index: 5;
    opacity: .85;
  }
  @keyframes hairline-flow{ to{ background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce){
    .landing .top-hairline{ animation: none; }
  }

  .landing .wrap{ position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
  .landing *:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }

  /* ---------- Nav bar ---------- */
  .cookie-banner{
    position: fixed; left:16px; right:16px; bottom:16px; z-index:50;
    max-width: 640px; margin: 0 auto;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  }
  .cookie-banner p{ margin:0; font-size:12.5px; color:var(--text-dim); line-height:1.5; flex:1; min-width:200px; }
  .cookie-banner a{ color: var(--cyan); }
  .cookie-banner button{
    font-size:12.5px; font-weight:700; color:var(--auf-gruen);
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    border:none; border-radius:10px; padding:9px 16px; cursor:pointer; white-space:nowrap;
  }

  .navbar{
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    margin: -28px -20px 30px;
    background: rgba(10,12,22,0.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-logo{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-logo span{ color: var(--cyan); }
  .nav-links{
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
  }
  .nav-links a{
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
    padding: 7px 11px;
    border-radius: 8px;
    transition: all .15s ease;
    white-space: nowrap;
  }
  .nav-links a:hover{ color: var(--cyan); background: rgba(124,252,110,0.08); }
  .nav-right{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .nav-socials{ display: none; align-items: center; gap: 4px; }
  .nav-socials a{
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint);
    transition: all .15s ease;
  }
  .nav-socials a:hover{ color: var(--cyan); }
  .nav-socials svg{ width: 14px; height: 14px; }

  @media (min-width: 700px){
    .nav-socials{ display: flex; }
  }
  @media (max-width: 640px){
    .nav-links{ display: none; }
  }

  .lang-switch{
    display: flex;
    gap: 3px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
  }
  .lang-btn{
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--text-faint);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 4px 9px;
    cursor: pointer;
    transition: all .15s ease;
  }
  .lang-btn:hover{ color: var(--text); }
  .lang-btn.active{ background: var(--cyan); color: var(--auf-gruen); }

  /* ---------- Hero ---------- */
  .hero{ text-align: center; padding: 20px 0 36px; }
  .avatar-ring{
    width: 108px; height: 108px;
    margin: 0 auto 20px;
    border-radius: 28px;
    padding: 3px;
    background: conic-gradient(from 0deg, var(--cyan), var(--violet), var(--gold), var(--cyan));
    animation: breathe-ring 3.5s ease-in-out infinite;
  }
  @keyframes breathe-ring{
    0%, 100%{ transform: scale(1); filter: brightness(1); }
    50%{ transform: scale(1.035); filter: brightness(1.12); }
  }
  .avatar{
    width: 100%; height: 100%;
    border-radius: 24px;
    background: #0d1210;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 800;
    color: var(--cyan);
    text-shadow: 0 0 18px rgba(124,252,110,0.7);
    box-shadow: 0 0 40px -6px rgba(124,252,110,0.5), inset 0 0 0 1px rgba(124,252,110,0.15);
  }
  @media (prefers-reduced-motion: reduce){
    .avatar-ring{ animation: none; }
  }
  .hero h1{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 44px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(124,252,110,0.7), 0 0 28px rgba(124,252,110,0.4), 0 0 50px rgba(124,252,110,0.22);
  }
  .hero p{
    margin: 0 auto 26px;
    color: var(--text-dim);
    font-size: 16px;
    max-width: 42ch;
    line-height: 1.55;
  }

  .hero-actions{
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .btn{
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    padding: 13px 22px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all .15s ease;
  }
  .btn:hover{ background: var(--bg-card-hover); border-color: rgba(124,252,110,0.5); box-shadow: 0 0 20px -8px rgba(124,252,110,0.35); transform: translateY(-1px); }
  .btn.primary{
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    color: var(--auf-gruen);
    border: none;
    box-shadow: 0 10px 30px -12px rgba(124,252,110,0.6);
  }
  .btn.primary:hover{ filter: brightness(1.07); }
  .btn svg{ width: 17px; height: 17px; }

  /* ---------- Creator code ---------- */
  .code-banner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(90deg, rgba(124,252,110,0.16), rgba(61,220,132,0.06));
    border: 1px solid rgba(124,252,110,0.45);
    color: var(--text);
    text-decoration: none;
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 34px;
    transition: all .15s ease;
    box-shadow: 0 0 24px -12px rgba(124,252,110,0.5);
  }
  .code-banner:hover{ border-color: var(--cyan); transform: translateY(-1px); }
  .code-banner-text{ display: flex; flex-direction: column; gap: 2px; }
  .code-banner-eyebrow{
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--cyan);
  }
  .code-banner-code{ font-size: 14.5px; font-weight: 600; }
  .code-banner-code strong{ color: var(--cyan); font-family: var(--font-mono); letter-spacing: .02em; }
  .code-copy{
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
    color: var(--auf-gruen); background: var(--cyan); border-radius: 999px; padding: 6px 12px;
    flex-shrink: 0;
  }

  .live-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }
  .live-card{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
  }
  .live-card-head{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    border-bottom: 1px solid var(--line);
  }
  .live-card-head svg{ width: 16px; height: 16px; }
  .live-embed{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
  }
  .live-embed iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .live-note{
    margin: 14px 2px 0;
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.5;
  }

  /* ── Startseiten-Kopf nach dem Design-Entwurf ──────────────────────
     Links die Identität (Avatar, Name, Aktionen), rechts das Lebendige
     (Serverstatus, Season-Countdown). Farbregel aus theme.css: die Fläche
     ist violett, alles Anklickbare grün. */
  .start-kopf{
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:22px;
    align-items:center; margin-bottom:14px;
  }
  /* Der Avatar ist mit margin:0 auto zentriert — im zweispaltigen Kopf
     soll er links am Text stehen, sonst „schwimmt" er über der Überschrift. */
  .start-kopf .k-links{ text-align:left; }
  .start-kopf .k-links .avatar-ring{ margin-left:0; margin-right:auto; }
  .start-kopf .k-links .hero-actions{ justify-content:flex-start; }
  /* .hero p ist mit margin:0 auto zentriert — links im Kopf muss es bündig sein */
  .start-kopf .k-links p{ margin-left:0; margin-right:0; }
  /* Der Kopf braucht innen Luft, .hero selbst hat keine seitliche Polsterung */
  .start-kopf{ padding:6px 4px; }
  .start-kopf .k-rechts{ display:flex; flex-direction:column; gap:10px; }
  .start-kopf .k-karte{
    /* Halbdurchsichtig auf der Hero-Fläche — mit color-mix folgt der Kasten
       dem Thema, statt im Hellen als schwarzer Block stehen zu bleiben. */
    background:color-mix(in srgb, var(--bg-card) 60%, transparent);
    border:1px solid var(--line);
    border-radius:14px; padding:13px 15px;
  }
  .start-kopf .k-karte .mc-label{ margin:0 0 9px; }
  /* Artwork füllt den ganzen Kopf und wird nach LINKS ausgeblendet —
     dort steht der Text und muss lesbar bleiben. Rechts darf es kräftig sein. */
  .hero{ position:relative; }
  .k-artwork{
    position:absolute; inset:-24px -28px -10px 0; z-index:0;
    border-radius:22px; overflow:hidden; pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.35) 26%,#000 62%);
    mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.35) 26%,#000 62%);
  }
  .k-artwork img{ width:100%; height:100%; object-fit:cover; object-position:62% 42%; display:block; opacity:.8; }
  .start-kopf{ position:relative; z-index:1; }
  .start-kopf .k-karte{ background:color-mix(in srgb, var(--bg-card) 78%, transparent); backdrop-filter:blur(8px); }
  @media (max-width:860px){
    /* Auf dem Handy liegt alles übereinander — das Artwork wandert nach oben
       und wird flacher, statt hinter dem Text zu stehen. */
    .k-artwork{ position:relative; inset:auto; height:150px; margin:-8px 0 14px;
      -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
      mask-image:linear-gradient(180deg,#000 55%,transparent); }
    .k-artwork img{ opacity:.6; }
  }
  @media (max-width:860px){
    .start-kopf{ grid-template-columns:minmax(0,1fr); gap:16px; text-align:center; }
    .start-kopf .k-links{ text-align:center; }
    .start-kopf .k-links .avatar-ring{ margin-left:auto; margin-right:auto; }
    .start-kopf .k-links p{ margin-left:auto; margin-right:auto; }
    .start-kopf .k-links .hero-actions{ justify-content:center; }
  }

  /* Werkzeug-Kacheln */
  .tool-raster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:11px; }
  .tool-kachel{
    display:flex; gap:11px; align-items:flex-start; text-decoration:none; padding:14px;
    border-radius:14px; background:var(--bg-card2,#10131f); border:1px solid var(--line2,#1e2438);
    transition:border-color .15s ease, transform .15s ease;
  }
  .tool-kachel:hover{ border-color:var(--gruen,#7CFC6E); transform:translateY(-2px); }
  .tool-kachel .ic{
    width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex;
    align-items:center; justify-content:center;
    background:rgba(167,139,250,.16); color:#a78bfa;
  }
  .tool-kachel .ic svg{ width:20px; height:20px; }
  .tool-kachel .tx{ min-width:0; }
  .tool-kachel .tx b{
    display:block; font-family:'Space Grotesk',sans-serif; font-size:13.5px; color:#eef0fb;
  }
  .tool-kachel .tx span{
    display:block; font-size:12px; color:#8990b8; line-height:1.5; margin-top:3px;
  }

  /* Live-Hub: Status und Countdown nebeneinander, mobil untereinander */
  .livehub-raster{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:center; }
  @media (max-width:640px){ .livehub-raster{ grid-template-columns:minmax(0,1fr); } }

  .follower-layout{
    display: flex;
    gap: 22px;
    align-items: stretch;
  }
  .follower-photo{
    flex-shrink: 0;
    width: 140px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(124,252,110,0.35);
    box-shadow: 0 0 30px -8px rgba(124,252,110,0.4);
  }
  .follower-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .follower-stats{ flex: 1; min-width: 0; }
  @media (max-width: 560px){
    .follower-layout{ flex-direction: column; }
    .follower-photo{ width: 100%; height: 160px; }
  }

  /* ---------- Follower section ---------- */
  .panel{
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 24px 26px;
    margin-bottom: 22px;
    backdrop-filter: blur(6px);
    overflow: hidden;
    box-shadow: 0 20px 50px -30px rgba(0,0,0,0.6);
  }
  .panel::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
    opacity: .8;
  }
  .panel-label{
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    margin-bottom: 8px;
  }
  .panel-label::before{
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(124,252,110,0.9);
    flex-shrink: 0;
  }
  .total-count{
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
    color: var(--text);
    text-shadow: 0 0 24px rgba(124,252,110,0.28);
  }
  .total-count span{
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--font-body);
    margin-left: 8px;
    text-shadow: none;
  }

  .stack-bar{
    display: flex;
    width: 100%;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-card);
    margin-bottom: 20px;
    box-shadow: 0 0 0 1px var(--line), 0 0 22px -6px rgba(124,252,110,0.4);
  }
  .stack-seg{
    height: 100%;
    transition: width .8s cubic-bezier(.4,0,.2,1);
  }

  .platform-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
  .platform-card{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px 11px 15px;
    text-decoration: none;
    color: var(--text);
    transition: all .18s ease;
    overflow: hidden;
  }
  .platform-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--violet));
    opacity: 0;
    transition: opacity .18s ease;
  }
  .platform-card:hover{
    border-color: rgba(124,252,110,0.5);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -16px rgba(124,252,110,0.4);
  }
  .platform-card:hover::before{ opacity: 1; }
  .platform-icon{
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  }
  .platform-icon svg{ width: 17px; height: 17px; color: var(--auf-gruen); }
  .platform-meta{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .platform-count{ font-family: var(--font-display); font-weight: 700; font-size: 15px; }
  .platform-name{ font-size: 11px; color: var(--text-faint); }

  #top, #live, #schedule, #highlights, #sprites-feature, #follower, #partner, #setup, #games, #merch, #poll, #news, #faq, #support, #newsletter, #aboutme, #community{
    scroll-margin-top: 90px;
  }

  .feature-card{
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(120deg, rgba(124,252,110,0.14), rgba(61,220,132,0.05) 60%, transparent);
    border: 1px solid rgba(124,252,110,0.4);
    border-radius: 20px;
    padding: 22px 24px;
    margin-bottom: 22px;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    transition: all .2s ease;
    box-shadow: 0 20px 50px -28px rgba(124,252,110,0.4);
  }
  .feature-card::after{
    content: '';
    position: absolute;
    top: 0; right: -40%;
    width: 60%; height: 100%;
    background: radial-gradient(circle at right, rgba(124,252,110,0.15), transparent 70%);
    pointer-events: none;
  }
  .feature-card:hover{
    border-color: var(--cyan);
    transform: translateY(-3px);
    box-shadow: 0 26px 60px -26px rgba(124,252,110,0.55);
  }
  .feature-card:hover .feature-arrow{ color: var(--cyan); transform: translateX(3px); }
  .feature-icon{
    width: 60px; height: 60px;
    border-radius: 16px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    box-shadow: 0 0 30px -4px rgba(124,252,110,0.7);
  }
  .feature-icon svg{ width: 30px; height: 30px; }
  .feature-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .feature-eyebrow{
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--cyan);
  }
  .feature-title{ font-family: var(--font-display); font-weight: 800; font-size: 20px; }
  .feature-desc{ font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 46ch; }
  .feature-arrow{
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 700;
    color: var(--text-faint);
    flex-shrink: 0;
    transition: all .18s ease;
    white-space: nowrap;
  }

  .spec-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
  .spec-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--cyan);
    border-radius: 10px;
    padding: 11px 13px;
    transition: all .18s ease;
  }
  .spec-card:hover{
    border-color: rgba(124,252,110,0.5);
    border-left-color: var(--cyan);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -16px rgba(124,252,110,0.4);
  }
  .spec-role{
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
  }
  .spec-value{
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
  }

  .community-card{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--text);
    transition: all .18s ease;
    overflow: hidden;
  }
  .community-card::before{
    content:'';
    position: absolute;
    top:0; left:0; bottom:0; width:3px;
    background: linear-gradient(180deg, var(--cyan), var(--orange));
    opacity: 0;
    transition: opacity .18s ease;
  }
  .community-card:hover{
    border-color: rgba(124,252,110,0.5);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -20px rgba(124,252,110,0.4);
  }
  .community-card:hover::before{ opacity: 1; }
  .community-card:hover .area-arrow{ color: var(--cyan); transform: translateX(2px); }
  .community-icon{
    width: 44px; height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #5865F2;
    color: #fff;
    box-shadow: 0 0 16px -4px rgba(88,101,242,0.6);
  }
  .community-icon svg{ width: 22px; height: 22px; }
  .community-body{ display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
  .community-name{ font-family: var(--font-display); font-weight: 700; font-size: 15px; }
  .community-desc{ font-size: 12px; color: var(--text-dim); line-height: 1.5; }

  .area-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
  }
  .area-card{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    transition: all .18s ease;
  }
  .area-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--violet));
    opacity: 0;
    transition: opacity .18s ease;
  }
  .area-card:hover{
    border-color: rgba(124,252,110,0.5);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -18px rgba(124,252,110,0.45);
  }
  .area-card:hover::before{ opacity: 1; }
  .area-card:hover .area-arrow{ color: var(--cyan); transform: translateX(2px); }
  .area-icon{
    width: 44px; height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    box-shadow: 0 0 20px -4px rgba(124,252,110,0.6);
  }
  .area-icon svg{ width: 22px; height: 22px; }
  .area-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .area-name{ font-family: var(--font-display); font-weight: 700; font-size: 15px; }
  .area-desc{ font-size: 12px; color: var(--text-dim); line-height: 1.5; }
  .area-arrow{
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-faint);
    flex-shrink: 0;
    transition: all .18s ease;
    white-space: nowrap;
  }

  .games-intro{
    font-size: 12.5px;
    color: var(--text-dim);
    margin: 0 0 16px;
    line-height: 1.5;
  }
  .games-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .game-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 15px;
    text-decoration: none;
    color: var(--text);
    transition: all .18s ease;
    overflow: hidden;
  }
  .game-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--violet));
    opacity: 0;
    transition: opacity .18s ease;
  }
  .game-card:hover{
    border-color: rgba(124,252,110,0.5);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(124,252,110,0.4);
  }
  .game-card:hover::before{ opacity: 1; }
  .game-tag{
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cyan);
    background: rgba(124,252,110,0.12);
    border: 1px solid rgba(124,252,110,0.3);
    border-radius: 999px;
    padding: 2px 8px;
  }
  .game-title{ font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
  .game-date{ font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
  .poll-item{ margin-bottom: 20px; }
  .poll-item:last-child{ margin-bottom: 0; }
  .poll-question{ font-family: var(--font-display); font-weight:700; font-size:15px; margin-bottom:10px; }
  .poll-options{ display:flex; flex-direction:column; gap:8px; }
  .poll-option-btn{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background: var(--bg-card); border:1px solid var(--line); border-radius:10px;
    padding:10px 14px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text);
    transition: all .15s ease; position:relative; overflow:hidden;
  }
  .poll-option-btn:hover{ border-color: rgba(124,252,110,0.5); }
  .poll-option-fill{
    position:absolute; left:0; top:0; bottom:0; background: rgba(124,252,110,0.16);
    width:0%; transition: width .6s ease; z-index:0;
  }
  .poll-option-btn span{ position:relative; z-index:1; }
  .poll-option-pct{ font-family: var(--font-mono); color: var(--cyan); font-weight:700; }
  .poll-total{ font-size:11px; color:var(--text-faint); margin-top:8px; }

  .news-item{
    border-left: 2px solid var(--line); padding-left:14px; margin-bottom:18px; position:relative;
  }
  .news-item:last-child{ margin-bottom:0; }
  .news-item::before{
    content:''; position:absolute; left:-5px; top:4px; width:8px; height:8px;
    border-radius:50%; background: var(--cyan);
  }
  .news-item-date{ font-family: var(--font-mono); font-size:11px; color:var(--text-faint); }
  .news-item-title{ font-family: var(--font-display); font-weight:700; font-size:14.5px; margin:2px 0 4px; }
  .news-item-body{ font-size:13px; color:var(--text-dim); line-height:1.55; }

  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item:last-child{ border-bottom:none; }
  .faq-question{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 2px; cursor:pointer; font-family: var(--font-display); font-weight:700; font-size:14px;
  }
  .faq-question .faq-arrow{ transition: transform .2s ease; color: var(--text-faint); flex-shrink:0; }
  .faq-item.open .faq-arrow{ transform: rotate(180deg); color: var(--cyan); }
  .faq-answer{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
  .faq-item.open .faq-answer{ max-height: 300px; }
  .faq-answer p{ font-size:13px; color:var(--text-dim); line-height:1.6; padding: 0 2px 14px; margin:0; }

  .games-cta{
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cyan);
    text-decoration: none;
  }
  .games-cta:hover{ text-decoration: underline; }

  .merch-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .merch-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 12px;
    text-decoration: none;
    color: var(--text);
    text-align: center;
    transition: all .18s ease;
  }
  .merch-card:hover{
    border-color: rgba(124,252,110,0.5);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(124,252,110,0.4);
  }
  .merch-icon{
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    box-shadow: 0 0 20px -4px rgba(124,252,110,0.6);
  }
  .merch-icon svg{ width: 22px; height: 22px; }
  .merch-name{ font-family: var(--font-display); font-weight: 700; font-size: 13px; }

  /* ---------- Areas grid (Mehr entdecken) ---------- */
  .areas-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .area-card{
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; text-decoration: none; color: var(--text);
    transition: all .15s ease;
  }
  .area-card:hover{ border-color: var(--cyan); transform: translateY(-2px); background: var(--bg-card-hover); }
  .area-card-title{ font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
  .area-card-arrow{ color: var(--text-faint); font-size: 14px; }
  .area-card:hover .area-card-arrow{ color: var(--cyan); }

  /* Fortnite-Daten-Sektion (Startseite) */
  .data-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
  .data-card{ display:flex; flex-direction:column; gap:3px; padding:16px 16px 14px; border-radius:14px;
    background:var(--bg); border:1px solid var(--line); text-decoration:none;
    transition:transform .15s ease, border-color .15s ease; }
  .data-card:hover{ transform:translateY(-2px); border-color:var(--cyan); }
  .data-num{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--cyan); line-height:1.1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .data-num--txt{ font-size:19px; }
  .data-title{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text); }
  .data-sub{ font-size:12px; color:var(--text-dim); line-height:1.5; }

  /* ---------- About ---------- */
  .about p{
    color: var(--text-dim);
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
  }

  /* ---------- Social row / footer ---------- */
  .partner-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  .partner-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px 16px 21px;
    text-decoration: none;
    color: var(--text);
    transition: all .18s ease;
    overflow: hidden;
  }
  .partner-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--violet));
    opacity: 0;
    transition: opacity .18s ease;
  }
  .partner-card:hover{
    border-color: rgba(124,252,110,0.5);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -18px rgba(124,252,110,0.45);
  }
  .partner-card:hover::before{ opacity: 1; }
  .partner-name{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
  }
  .partner-desc{ font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
  .partner-code{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--auf-gruen);
    background: var(--cyan);
    border-radius: 999px;
    padding: 5px 11px;
  }

  .schedule-list{ display:flex; flex-direction:column; gap:8px; }
  .schedule-row{
    display:grid; grid-template-columns: minmax(92px, 130px) minmax(120px, 170px) 1fr;
    align-items:center; gap:12px;
    background: var(--bg-card); border:1px solid var(--line); border-radius:10px;
    padding:11px 16px;
  }
  .schedule-day{ font-family: var(--font-display); font-weight:700; font-size:13.5px; }
  .schedule-time{ font-family: var(--font-mono); font-size:12.5px; color: var(--cyan); font-variant-numeric: tabular-nums; white-space:nowrap; }
  .schedule-note{ font-size:11.5px; color: var(--text-faint); text-align:right; }
  @media (max-width: 520px){
    .schedule-row{ grid-template-columns: minmax(78px, 100px) 1fr; }
    .schedule-note{ grid-column: 1 / -1; text-align:left; }
    .schedule-note:empty{ display:none; }
  }

  .clips-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:14px;
  }
  .clip-card{ background: var(--bg-card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .clip-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
  .clip-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .clip-title{ padding:10px 12px; font-family: var(--font-display); font-weight:700; font-size:13px; }

  .nl-tabs{ display:flex; gap:4px; margin-bottom:14px; background: var(--bg-card); border-radius:10px; padding:3px; max-width:280px; }
  .nl-tab{ flex:1; font-size:12.5px; font-weight:700; color:var(--text-faint); background:transparent; border:none; border-radius:8px; padding:8px; cursor:pointer; }
  .nl-tab.active{ background: var(--bg-card-hover); color: var(--cyan); }
  .nl-form{ display:none; flex-direction:column; gap:10px; max-width:320px; }
  .nl-form.active{ display:flex; }
  .nl-form input{
    background: var(--bg-card); border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; color:var(--text); font-family:var(--font-body); font-size:13.5px; outline:none;
  }
  .nl-form input:focus{ border-color: var(--cyan); }
  .nl-toggle-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text); cursor:pointer; }
  .nl-toggle-row input{ width:18px; height:18px; accent-color: var(--cyan); cursor:pointer; }
  .nl-msg{ font-size:12px; padding:9px 11px; border-radius:8px; margin-bottom:10px; display:none; max-width:320px; }
  .nl-msg.show{ display:block; }
  .nl-msg.error{ background: rgba(239,127,127,0.14); color:#ef8a8a; border:1px solid rgba(239,127,127,0.35); }
  .nl-msg.success{ background: rgba(124,252,110,0.14); color: var(--cyan); border:1px solid rgba(124,252,110,0.35); }

  .social-row{
    position: relative;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 26px;
  }
  .social-row::before{
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,252,110,0.4), transparent);
  }
  .social-row a{
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    background: var(--bg-card);
    border: 1px solid var(--line);
    transition: all .18s ease;
  }
  .social-row a:hover{ color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(124,252,110,0.5); }
  .social-row svg{ width: 18px; height: 18px; }

  .footer-note{
    margin-top: 22px;
    font-size: 11.5px;
    color: var(--text-faint);
    text-align: center;
    line-height: 1.6;
  }
  .footer-note a{ color: var(--text-dim); }

  @media (max-width: 560px){
    .hero h1{ font-size: 34px; }
    .total-count{ font-size: 36px; }
  }

/* ── Platz reservieren, damit nichts nachträglich springt ──────────────────
   Gemessen am 05.08.2026 auf einem gedrosselten Handy: Layout-Verschiebung
   der Startseite 0,44. Googles Grenze für „gut" liegt bei 0,10, ab 0,25 gilt
   sie als schlecht. Ursache war NICHT ein Bild ohne Maße, sondern zwei
   Kästen im Kopfbereich, die leer starteten und erst nach einer Netzanfrage
   Inhalt bekamen — der Season-Countdown wuchs von 0 auf 86 Pixel und schob
   alles darunter nach unten.
   Beide bekommen jetzt ihre Endhöhe von Anfang an. */
[data-mc-countdown]{ min-height:86px; }
/* Die Statusmeldung kann je nach Störung unterschiedlich lang sein
   („Alle Systeme laufen normal." gegen eine Liste betroffener Bereiche).
   Zwei Zeilen sind das Maximum — sonst wächst die Karte je nach Tageslage. */
.mc-status .txt span{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}

.poll-archive-link{display:inline-flex;margin-top:10px;color:var(--text-dim);font-size:12px;font-weight:750;text-decoration:none}
.poll-archive-link:hover{color:var(--cyan)}
.poll-archive-link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

.poll-note{font-size:12px;color:var(--text-dim);margin-top:6px}


/* v139.92 Public Fresh UX */
.start-kicker{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);margin-bottom:3px}.start-continue__reset{border:1px solid var(--line2);background:transparent;color:var(--text-faint);border-radius:9px;padding:7px 9px;font-weight:700;cursor:pointer}.start-continue__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}.start-continue__grid a{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center;color:var(--text);text-decoration:none;padding:12px;border:1px solid var(--line2);border-radius:12px;background:var(--bg-card2);transition:.18s ease}.start-continue__grid a:hover{border-color:var(--cyan);transform:translateY(-1px)}.start-continue__grid span{font-size:11.5px;color:var(--text-faint)}.start-continue__grid b{grid-column:2;grid-row:1/3;color:var(--cyan)}.start-continue__note{font-size:10.5px;color:var(--text-faint);margin:10px 0 0}

/* v139.99: historical presentation attributes moved out of the high-traffic HTML. */
#cookieBanner{display:none}
.home-livebar{display:none;align-items:center;gap:16px;flex-wrap:wrap;background:var(--bg-card,#131c15);border:1px solid var(--line,#223226);border-radius:14px;padding:10px 16px;margin-bottom:14px;font-size:12.5px;color:var(--text-dim,#8990b8)}
.home-livebar__players,.home-livebar__season{display:none}.home-livebar__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7CFC6E;margin-right:6px;animation:lbPulse 2s infinite}.home-livebar__value{color:var(--text,#eef0fb)}.home-livebar__timer{color:var(--text,#eef0fb);font-variant-numeric:tabular-nums}.home-livebar__link{color:#7CFC6E;text-decoration:underline;text-underline-offset:2px}.home-lang-holder{display:flex;justify-content:flex-end;margin-bottom:6px}.home-discord-icon{width:17px;height:17px}.feature-card--flush{margin-bottom:0}

/* v140.56: Cheat-Code-Kasten auf der Startseite. Bewusst schmal gehalten —
   er ist ein Wegweiser auf /codes/, keine zweite Liste. */
.start-codes__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin-top:10px}
.start-code{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border:1px solid var(--line2);border-radius:12px;background:var(--bg-card2);text-decoration:none;transition:.18s ease}
.start-code:hover{border-color:var(--gruen);transform:translateY(-1px)}
.start-code:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.start-code__code{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--gruen);word-break:break-word}
.start-code__lohn{font-size:12px;color:var(--text-dim);line-height:1.45}