/* =========================
   Design Tokens
   ========================= */
:root{
  /* Header/Logo */
  --logo-h: 64px;                 /* max. Logohöhe */

  /* Farben / UI */
  --bg: #ffffff;
  --fg: #0f172a;                  /* Haupttext */
  --muted: #475569;               /* Sekundärtext */
  --primary: #2563eb;             /* Akzent (Links/Buttons) */
  --primary-contrast:#ffffff;
  --surface: #f8fafc;             /* Karten-Hintergrund */
  --border: #e2e8f0;
  --ring: #93c5fd;

  /* Background-Tints (werden unten genutzt) */
  --bg-grad-1: rgba(37, 99, 235, .06);   /* Blau-Tint */
  --bg-grad-2: rgba(16, 185, 129, .05);  /* Grün-Tint */

  /* Layout */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --maxw: 1100px;
  --gap: 16px;
  --gap-lg: 28px;
}
@media(min-width:720px){
  :root{ --logo-h: 64px; }        /* Desktop gleich belassen */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --fg:#e6e6f0; --muted:#a7b0c3;
    --primary:#60a5fa; --primary-contrast:#0b1020;
    --surface:#141a2e; --border:#1f2a44; --ring:#2563eb;
    --shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.35);

    /* Dark-Tints */
    --bg-grad-1: rgba(96, 165, 250, .10);
    --bg-grad-2: rgba(34, 197, 94, .08);
  }
}

/* =========================
   Base
   ========================= */
* { box-sizing: border-box }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{ color:var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto; display:block }
.container{ max-width:var(--maxw); margin:0 auto; padding:24px }

/* Screenreader-Only */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =========================
   Header & Nav
   ========================= */
.header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(1.1) blur(10px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--border);
}
@media (prefers-color-scheme: dark){
  .header{ background:rgba(11,16,32,.6) }
}

/* Brand mittig, Menü darunter */
.header .header-inner{
  display:flex;
  flex-direction:column;   /* stapeln */
  align-items:center;      /* mittig */
  justify-content:center;
  gap:10px;
}

/* Brand: Logo links, Text rechts (zweizeilig) */
.brand{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  line-height:1.1;
  margin-top:6px;          /* optischer Abstand nach oben */
  text-align:left;
}

.brand .logo{
  flex:0 0 auto;
  width:auto;              /* Verhältnis bewahren */
  height:auto;
  max-height:var(--logo-h);
  display:block;
  image-rendering:-webkit-optimize-contrast;
}

/* Zweizeiliger Text neben dem Logo */
.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.brand-line1{
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(1rem, 1.2vw + .6rem, 1.15rem);
  line-height:1.05;
  color:var(--fg);
}
.brand-line2{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.1;
}

/* --- FINAL: Logo fix auf 64px --- */
.header .brand .logo{
  height: var(--logo-h) !important;   /* 64px */
  width: auto !important;             /* Seitenverhältnis behalten */
  max-height: none !important;        /* evtl. frühere max-height neutralisieren */
}

/* Menü unter dem Brand zentriert */
.nav{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-top:6px;
}
.nav a{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid transparent;
  text-decoration:none;
}
.nav a[aria-current="page"], .nav a:hover{
  background:var(--surface);
  border-color:var(--border);
}

/* Theme-Toggle Button (Button mit id="themeToggle") */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:8px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
  cursor:pointer; line-height:1; font:inherit;
}
.theme-toggle:hover{ outline:2px solid var(--ring); outline-offset:2px }
.theme-toggle .ico-sun{ display:block }
.theme-toggle .ico-moon{ display:none }

/* === Icon-Button in der Nav (Lupe/Close) === */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--fg); cursor:pointer;
}
.icon-btn:hover{ outline:2px solid var(--ring); outline-offset:2px }

/* === Modal / Suche === */
.modal-backdrop[hidden]{ display:none }
.modal-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.35);
  backdrop-filter: saturate(1.1) blur(6px);
  display:grid; place-items:center; padding:20px;
}
.modal{
  width:min(820px, 100%);
  background:var(--bg); color:var(--fg);
  border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:12px; padding:16px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.modal-head h2{ margin:0; font-size:1.1rem }

.searchbar{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); background:var(--surface);
  border-radius:12px; padding:8px 10px;
}
.searchbar input{
  width:100%; border:0; outline:0; background:transparent;
  color:var(--fg); font:inherit;
}
.searchbar .muted{ color:var(--muted); font-size:.9rem }

.searchlist-wrap{ max-height:min(60vh, 540px); overflow:auto; border-radius:12px; }
.searchlist{ list-style:none; margin:0; padding:0 }
.searchlist li a{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:10px 12px; text-decoration:none; color:var(--fg);
  border-bottom:1px dashed var(--border);
}
.searchlist li a:hover{ background:var(--surface) }
.searchlist li:last-child a{ border-bottom:0 }

/* Mobile: Modal als Vollbild-Sheet */
@media (max-width:640px){
  .modal-backdrop{ padding:0 }
  .modal{ height:100%; width:100%; border-radius:0 }
  .searchlist-wrap{ max-height: calc(100vh - 170px) }
}


/* =========================
   Hero
   ========================= */
.hero{ padding:32px 0 }
.hero h1{ margin:0 0 10px; font-size:clamp(1.6rem,3vw,2.2rem) }
.hero .lead{ color:var(--muted); margin:6px 0 }

/* =========================
   Sections
   ========================= */
.section{ margin:36px 0 }
.section h2{ font-size:1.2rem; margin:0 0 14px }
.kicker{
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  font-size:.8rem; margin-bottom:6px
}

/* =========================
   Cards (Spiele-Grid)
   ========================= */
.card-grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:var(--gap) }
@media(min-width:720px){ .card-grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1024px){ .card-grid{ grid-template-columns:repeat(3,1fr) } }

.card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; text-decoration:none;
  text-align:center;                   /* Texte zentriert */
}
.card h3{ font-size:1.05rem; margin:0; color:var(--fg) }
.card .subtitle{ color:var(--muted); font-size:.92rem }
.card:hover{ outline:2px solid var(--ring);}

.meta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }  /* Badges mittig */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:transparent; font-size:.85rem; color:var(--muted)
}
.badge b{ color:var(--fg) }

/* =========================
   Neueste Links (Liste)
   ========================= */
.list{ display:flex; flex-direction:column; gap:10px }
.item{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border:1px dashed var(--border); border-radius:12px; padding:10px 12px;
  background:transparent; text-decoration:none
}
.item:hover{ border-style:solid }
.item .left{ display:flex; flex-direction:column }
.item .title{ font-weight:600; color:var(--fg) }
.item .muted{ color:var(--muted); font-size:.9rem }
.item .pill{
  padding:6px 10px; border-radius:999px; background:var(--primary);
  color:var(--primary-contrast); font-weight:600
}

/* =========================
   Footer
   ========================= */
.footer{ border-top:1px solid var(--border); margin-top:30px }
.footer-inner{ display:flex; flex-direction:column; gap:12px }
.footer-links{ display:flex; gap:12px; flex-wrap:wrap }
.footer-links a{ color:var(--muted) }
.footer-links a:hover{ color:var(--fg); text-decoration:none }
.copyright{ color:var(--muted); font-size:.9rem; margin:0 }

/* =========================
   Hintergrund (dezent hübscher)
   ========================= */
/* Layered Background ersetzt das einfache background aus Base */
html,body{
  background:
    radial-gradient(800px circle at -10% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px circle at 110% -5%, var(--bg-grad-2), transparent 65%),
    var(--bg);
}

/* =========================
   Explizite Theme-Varianten via data-theme
   (Toggle in script.js setzt data-theme="light"|"dark")
   ========================= */
:root[data-theme="light"]{
  --bg: #f9f9f9;
  --fg: #0f172a;
  --muted: #475569;
  --primary: #2563eb;
  --primary-contrast:#ffffff;
  --surface: #f8fafc;
  --border: #e2e8f0;
  --ring: #93c5fd;
  --bg-grad-1: rgba(37, 99, 235, .06);
  --bg-grad-2: rgba(16, 185, 129, .05);
}
:root[data-theme="dark"]{
  --bg:#0b1020; --fg:#e6e6f0; --muted:#a7b0c3;
  --primary:#60a5fa; --primary-contrast:#0b1020;
  --surface:#141a2e; --border:#1f2a44; --ring:#2563eb;
  --bg-grad-1: rgba(96, 165, 250, .10);
  --bg-grad-2: rgba(34, 197, 94, .08);
}

:root[data-theme="light"] .header{
  background:#ffffff !important;           /* statt rgba(...) */
  border-bottom-color:#e2e8f0 !important;
  backdrop-filter:none !important;         /* Blur aus, sonst schimmert der Verlauf durch */
  box-shadow:0 1px 2px rgba(0,0,0,.04);    /* dezenter Schatten statt Blur */
}

/* Optional: Dark-Mode Header angenehm dunkel */
:root[data-theme="dark"] .header{
  background:rgba(20,26,46,.9) !important;
  border-bottom-color:#1f2a44 !important;
  backdrop-filter:saturate(1.1) blur(10px);
}


/* Icons im Toggle je nach Theme */
:root[data-theme="dark"] .theme-toggle .ico-sun{ display:none }
:root[data-theme="dark"] .theme-toggle .ico-moon{ display:block }

/* --- Footer zentrieren --- */
.footer .container{ text-align:center; }

.footer-inner{
  align-items:center !important;   /* Flex-Spalte mittig */
}

.footer-links{
  justify-content:center !important;
  gap:14px;                        /* etwas Luft zwischen den Links */
}

.footer-links a{
  display:inline-block;            /* saubere Klickflächen in Center-Layout */
}

:root{
  --share-size: 36px;   /* Kantenlänge – ändere auf 34/32 für kleiner */
  --share-radius: 10%;  /* 0 = eckig */
  --fb:#3b5998; --x:#000000; --wa:#34af23; --tg:#0088cc; /* deine Markenfarben */
	--badge-new-bg: #f7426a; /* Tailwind-ähnlich: rose-600 – passt gut zu neutralem Theme */
}

.share .share-title{
  text-align:center; margin:0 0 12px; color:var(--fg);
}
.share .share-buttons{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
}
.share .share-buttons li{ margin:0; padding:0 }

/* Quadratische, kleine Buttons – weißer Hintergrund, Markenrand */
.share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--share-size); height:var(--share-size);
  background:#fff; border:1px solid var(--border);
  border-radius:var(--share-radius);
  text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .06s ease, box-shadow .12s ease;
}
.share-btn:active{ transform:translateY(1px) }
.share-btn:hover{ box-shadow:0 2px 10px rgba(0,0,0,.12) }

/* Icon skaliert proportional zur Kante */
.share-btn svg{
  width: calc(var(--share-size) * 0.58);
  height: calc(var(--share-size) * 0.58);
}

/* Markenränder – Icons sind deine originalen farbigen SVGs */
.share-btn.fb{ border-color:var(--fb) }
.share-btn.x { border-color:var(--x)  }
.share-btn.wa{ border-color:var(--wa) }
.share-btn.tg{ border-color:var(--tg) }

/* Mobile: noch kleiner */
@media (max-width:640px){
  :root{ --share-size: 34px; }
}

/* --- Share-Buttons: kräftiger Hover (Brand-Tint + starker Rand) --- */

/* Ohne Layout-Shift: Grundrand bleibt 1px, wir legen beim Hover
   einen zusätzlichen "Innenrand" per inset box-shadow oben drauf. */
.share-btn{
  border:1px solid var(--border);
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .06s ease, filter .12s ease;
}
.share-btn:hover{
  transform: translateY(-1px);
}

/* Facebook */
.share-btn.fb:hover{
  background: rgba(59, 89, 152, .12);        /* #3b5998 */
  border-color: #2d4373;                      /* dunkler Rand */
  box-shadow: inset 0 0 0 1px #2d4373,        /* zusätzlicher "Rand" */
              0 4px 14px rgba(59, 89, 152, .25);
}
.share-btn.fb:hover svg{ filter: brightness(.88) contrast(1.08); }

/* X / Twitter */
.share-btn.x:hover{
  background: rgba(0, 0, 0, .10);
  border-color: #111111;
  box-shadow: inset 0 0 0 1px #111111,
              0 4px 14px rgba(0, 0, 0, .22);
}
.share-btn.x:hover svg{ filter: brightness(.85) contrast(1.1); }

/* WhatsApp */
.share-btn.wa:hover{
  background: rgba(52, 175, 35, .12);        /* #34af23 */
  border-color: #2a8d1e;
  box-shadow: inset 0 0 0 1px #2a8d1e,
              0 4px 14px rgba(52, 175, 35, .25);
}
.share-btn.wa:hover svg{ filter: brightness(.88) contrast(1.08); }

/* Telegram */
.share-btn.tg:hover{
  background: rgba(0, 136, 204, .12);        /* #0088cc */
  border-color: #0a6e9b;
  box-shadow: inset 0 0 0 1px #0a6e9b,
              0 4px 14px rgba(0, 136, 204, .25);
}
.share-btn.tg:hover svg{ filter: brightness(.88) contrast(1.08); }

/* Optional: im Dark-Mode etwas stärker, damit es sichtbar bleibt */
:root[data-theme="dark"] .share-btn.x:hover{
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px #e5e7eb, 0 4px 14px rgba(0,0,0,.45);
}

/* Footer wie Header einfärben (Light & Dark) */
:root[data-theme="light"] .footer{
  background:#ffffff !important;          /* wie Header (light) */
  border-top-color:#e2e8f0 !important;    /* wie header border */
  box-shadow:0 -1px 2px rgba(0,0,0,.04);  /* dezenter Gegenschatten nach oben */
}

:root[data-theme="dark"] .footer{
  background:rgba(20,26,46,.9) !important; /* wie Header (dark) */
  border-top-color:#1f2a44 !important;
  backdrop-filter:saturate(1.1) blur(10px); /* wie Header (dark) */
}

/* Basis: Nav ist schon flex; wir verankern das Dropdown rechts */
.nav{ position:relative }

/* Dropdown-Button: Desktop ausblenden, mobil zeigen */
.nav .nav-more{ display:none; gap:6px; }
@media (max-width: 720px){
  /* diese zwei Links mobil verstecken */
  .nav a[data-nav="games"],
  .nav a[data-nav="rblx"]{ display:none; }

  /* Mehr-Button einblenden */
  .nav .nav-more{ display:inline-flex; }

  /* Dropdown-Panel */
  .nav-dropdown{
    position:absolute; top:calc(100% + 8px); right:0; z-index:30;
    background:var(--bg); color:var(--fg);
    border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
    min-width: 220px; padding:6px; 
  }
  .nav-dropdown a{
    display:block; padding:10px 12px; border-radius:10px; color:var(--fg); text-decoration:none;
  }
  .nav-dropdown a:hover{ background:var(--surface); }
}

/* kleiner Pfeil drehen, wenn offen (optional) */
#navMore[aria-expanded="true"] svg{ transform: rotate(180deg); transition: transform .12s ease; }


/* Wenn das Mobile-Menü aktiv ist, blende die doppelten Links aus */
.nav.nav-open a[data-nav="games"],
.nav.nav-open a[data-nav="rblx"]{
  display: none !important;
}

/* Dropdown-Links wie die Top-Nav-Pills stylen */
.nav-dropdown a{
  font: inherit;                 /* gleiche Schrift wie Home */
  line-height: 1.55;             /* folgt deinem Body-Text */
  padding: 8px 12px;             /* wie .nav a */
  border-radius: 10px;           /* wie .nav a */
  border: 1px solid transparent; /* gleiche Rahmenstärke */
  text-decoration: none;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus{
  background: var(--surface);    /* wie Hover in .nav a */
  border-color: var(--border);   /* sichtbarer Rahmen wie oben */
  outline: none;
}

/* Den „Menü“-Button optisch angleichen (Breite/Umrandung wie Home) */
.nav .nav-more{
  font: inherit;
  padding: 8px 12px;             /* wie .nav a */
  border-radius: 10px;           
  border: 1px solid var(--border);
  background: var(--surface);
}
.nav .nav-more:hover{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Card-Title Glow */
:root{ --card-title-glow:#007eff; }

.card .card-head h3{
  text-shadow: 0 0 2px var(--card-title-glow);
}

/* optional stärker beim Hover */
.card:hover .card-head h3{
  text-shadow: 0 0 4px var(--card-title-glow), 0 0 8px rgba(0,126,255,.35);
}

/* Übersichtslisten offscreen "parken" – schnellere Erst-Render */
/*.card-grid, .list { content-visibility: auto; contain-intrinsic-size: 20px 400px; }*/

/* Box-Shadow erst nach Load (Body hat anfangs .no-shadow) */
.card { transition: box-shadow .2s ease; }

/* (Optional) Große Deko-Filter vermeiden, die Repaints triggern */
.header { backdrop-filter: none; } /* falls vorher blur aktiv war */

/* (Optional) LCP-Bild priorisieren, falls das Logo LCP ist */
.brand .logo { fetchpriority: high; }

.card-grid.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1024px) {
  .card-grid.link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .card-grid.link-grid { grid-template-columns: 1fr; }
}
.link-card .subtitle { margin-top: 4px; font-size: .95rem; color: var(--muted); }
.loadmore-wrap { margin: 18px 0 6px; text-align: center; }
.loadmore-wrap .btn { padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 10px; background:#fff; cursor:pointer; }

/* Card muss ein Positioning-Context sein */
.card {
  position: relative;
}

/* Neues Eck-Badge (ohne Layout-Shift) */
.badge-new {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--badge-new-bg);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
	-ms-transform: rotate(-20deg); transform: rotate(-20deg);
 pointer-events: none; /* klickt nicht in die Card rein */
}

.page-title { margin: 0 0 .25rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.page-subtitle { margin: 0 0 1rem; font-weight: 500; color: var(--muted, #64748b); }

/* Difficult: dezent, mit festen Farben */
:root {
  --difficult-color: #a3a3a3;   /* Light */
}
[data-theme="dark"] {
  --difficult-color: #252b41;   /* Dark */
}

.difficult {
  color: var(--difficult-color);
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .01em;
}