:root{
  --bar-bg:#2e2e2e;
  --bar-fg:#f5f5f5;
  --bar-hover:#3b3b3b;
  --bar-active:#505050;

  /* Akzent-/Linkfarben */
  --accent:#ff9b30;
  --accent-400:#ffb34f;
  --accent-600:#d87f22;
  --link:var(--accent);
  --link-hover:var(--accent-400);

  /* Sekundäre Buttonfarbe (Textspalten) */
  --link-bg:#215e77;
  --link-bg-hover:#2a7999;

  --text:#1b1b1b;
}

/* =================== Global / Background =================== */
html, body { height:auto; min-height:100%; }
body{
  margin:0;
  color:var(--text);
  font:16px/1.5 system-ui, Segoe UI, Roboto, Arial, sans-serif;

  background-image:url("images/backround.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
/* dezent abdunkeln für Lesbarkeit */
body::before{
  content:"";
  position:fixed; inset:0;
  background:rgba(0,0,0,.08);
  pointer-events:none;
}

/* =================== Topbar / Bottombar =================== */
.topbar, .bottombar{
  height:64px; width:100%;
  background:var(--bar-bg);
  border-bottom:1px solid #1f1f1f;
  display:flex; align-items:center;
}
.topbar{ position:sticky; top:0; z-index:50; }
.bottombar{ border-top:1px solid #1f1f1f; border-bottom:none; }

.bar-inner{
  max-width:1200px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; width:100%;
}

/* =================== Navigation =================== */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
}
.nav-left, .nav-center{
  list-style:none; display:flex; align-items:center; gap:8px; padding:0; margin:0;
}

.nav-link{
  position:relative;
  display:flex; align-items:center; gap:.5rem;
  height:40px; padding:0 14px;
  color:var(--bar-fg);
  text-decoration:none; background:#3b3b3b;
  border-radius:6px;
  transition:background .2s ease, transform .05s ease;
}
.nav-link .icon{ width:18px; height:18px; }
.nav-link:hover{ background:var(--bar-hover); }
.nav-link:active{ background:var(--bar-active); transform:translateY(1px); }
.nav-link.is-active{ box-shadow:inset 0 0 0 2px var(--accent); }
.nav-link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-4px;
  height:3px; border-radius:2px; background:transparent; transition:background .2s ease;
}
.nav-link:hover::after, .nav-link.is-active::after{ background:var(--accent); }

/* Social Icons: dunkel + weiße Icons, Hover orange */
.nav-center .social{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:6px;
  color:#fff; background:#3b3b3b; border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease, border-color .2s ease;
}
.nav-center .icon{ width:16px; height:16px; }
.nav-center .social:hover{
  background:var(--accent); color:#1b1b1b;
  border-color:rgba(0,0,0,.06); box-shadow:0 4px 10px rgba(255,155,48,.35);
  transform:translateY(-1px);
}
.nav-center .social:active{ background:var(--accent-600); transform:translateY(0); box-shadow:none; }

/* =================== Container / Spacing =================== */
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.spacer-24{ height:24px; }

/* =================== Hero =================== */
.hero{
  margin:48px auto 32px;
  display:grid; gap:24px; grid-template-columns:1fr 1fr;
}
.hero img{
  width:100%; height:auto; display:block;
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  filter:grayscale(100%); background:#222;
}
.hero-right img{
  max-width:595px; aspect-ratio:595/298; object-fit:cover; margin-left:auto;
}
.hero-left img{
  max-width:595px; aspect-ratio:595/298; object-fit:cover;
}

/* Minimaler Text-Hero (ohne Hintergrundbox) */
.hero-announcement{
  width:100%; min-height:260px; padding:40px; border-radius:14px;
  display:flex; align-items:center; box-shadow:none; background:none;
}
.announce-content{ display:flex; flex-direction:column; gap:14px; color:#f5f7fb; text-shadow:0 2px 4px rgba(0,0,0,.4); }
.announce-kicker{ font-size:14px; letter-spacing:.4px; opacity:.9; }
.announce-title{ margin:0; font-size:clamp(28px, 3.5vw, 44px); line-height:1.1; font-weight:800; }
.announce-teaser{ margin:0; max-width:60ch; font-size:clamp(15px, 1.4vw, 18px); opacity:.95; }
.announce-meta{ display:flex; align-items:center; gap:14px; font-size:14px; opacity:.95; }

/* Orange Primary nur im Hero */
.hero .btn-primary{
  display:inline-block;
  border:0;
  border-radius:10px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  font-size:15px;
  line-height:1;
  background:var(--accent);
  color:#1b1b1b;
  box-shadow:none;
  transition:background .2s ease, transform .05s ease, color .2s ease;
}
.hero .btn-primary:hover{ background:var(--accent-400); transform:translateY(-2px); }
.hero .btn-primary:active{ background:var(--accent-600); transform:translateY(0); }

/* =================== Cards (4 Spiele) =================== */
.cards{
  margin:8px auto 40px;
  display:grid;
  gap:24px;
  grid-template-columns:repeat(4, minmax(220px,1fr));
}

.card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,.85);
  border-radius:12px;
  overflow:hidden; /* wichtig für Zoom-Effekt */
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  transition:transform .12s ease, box-shadow .12s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}

.card:active{
  transform:translateY(-1px);
}

/* Bild: grau + sanfter Übergang */
.card img{
  width:100%;
  aspect-ratio:404/250;
  object-fit:cover;
  filter:grayscale(100%);
  transition:filter .4s ease, transform .4s ease;
}

/* Hover: Farbe + leichter Zoom */
.card:hover img{
  filter:grayscale(0%);
  transform:scale(1.05); /* Wenn kein Zoom gewünscht: diese Zeile löschen */
}

.card-text{
  padding:12px 14px 16px;
}

/* ====== 🔵 Farbe & Stil wie „Witte Studio“ für Game-Titel ====== */
.card-text h3{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:700;
  color:#215e77; /* gleiche Farbe wie Logo */
}

.card-text p{
  margin:0;
  color:#555;
  font-size:.9rem;
}


/* =================== Zwei Textspalten =================== */
.two-col{
  margin:12px auto 56px; display:grid; gap:32px; grid-template-columns:1fr 1fr;
}
.col{
  background:rgba(255,255,255,.9); border-radius:12px; padding:20px 22px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.col h4{ margin:0 0 8px; color:#215e77; }
.btn-row{ display:flex; gap:10px; margin-top:8px; }

/* === Button-Baseline (neutral, ohne Farbe) === */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  border:0;
  transition: background .2s ease, transform .05s ease, color .2s ease;
}

/* === Blaue Buttons NUR in den Textspalten === */
.two-col .btn{
  background: var(--link-bg);
  color: #fff;
}
.two-col .btn:hover{ background: var(--link-bg-hover); }

/* =================== About (2 Karten) =================== */
.about{
  max-width:1200px; margin:28px auto 56px; padding:0 16px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
.about-card{
  background: rgba(255,255,255,0.85);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:22px 24px; display:flex; flex-direction:column; min-height:210px;
}
.about-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.about-icon{ width:28px; height:28px; object-fit:contain; filter:grayscale(100%); opacity:.95; }

/* ====== Einheitliche Typografie (nur minimal angepasst) ====== */
.about-card h3{
  margin:0;
  font-size:1.2rem;     /* identisch mit Steam-Heading */
  font-weight:600;      /* gleiches Gewicht */
  color:#215e77;        /* bleibt in deiner Branding-Farbe */
}
.about-card p{
  margin:6px 0 0;
  color:#1f2a2e;
  line-height:1.55;     /* vorher 1.45 */
  font-size:.95rem;     /* identisch mit Partner p */
}

.about-actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }

.btn-neutral{
  background:#444;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  transition:background .2s ease, transform .05s ease, color .2s ease;
}
.btn-neutral:hover{
  background:var(--accent);
  color:#1b1b1b;
  transform:translateY(-2px);
}

.btn-neutral:active{ background:var(--accent-600); transform:translateY(0); box-shadow:none; }

/* =================== Partner (3 Spalten) – Panel pro Karte =================== */
.partners{
  max-width:1200px; margin:40px auto 56px; padding:0 16px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  text-align:center; color:#f5f5f5;
}
.partner{
  position:relative; display:flex; flex-direction:column; align-items:center;
  min-height:320px; padding:20px;
  background:rgba(0,0,0,0.5);
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.25);
  color:#f5f5f5;
}
.partner-logo{ height:60px; margin-bottom:16px; filter:grayscale(100%); opacity:.9; }
.partner h4{ margin:0 0 12px; font-size:1.2rem; font-weight:600; }
.partner p{
  margin:0 0 16px; font-size:.95rem; line-height:1.55; /* Zeilenhöhe angeglichen */
  max-width:44ch; opacity:.95;
  flex-grow:1; display:flex; align-items:center; justify-content:center;
}

/* Graue Buttons NUR in Partner-Sektion */
.partners .btn{
  background: #444;               /* grauer Standard */
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, transform .05s ease, color .2s ease;
  box-shadow: none;               /* kein Glow */
}

.partners .btn:hover{
  background: var(--accent);      /* Orange beim Hover */
  color: #1b1b1b;
  transform: translateY(-2px);
}

.partners .btn:active{
  background: var(--accent-600);  /* dunkleres Orange beim Klicken */
  transform: translateY(0);
  box-shadow: none;
}


/* =================== Footer =================== */
.footer-text{
  color:var(--bar-fg); text-align:center; width:100%; font-size:.95rem;
}
.footer-text a{ color:#e6e6e6; text-decoration:none; }
.footer-text a:hover{ color:var(--accent); text-decoration:none; }

/* =================== Impressum / Datenschutz =================== */
.prose{
  background:rgba(255,255,255,.95); border-radius:12px; padding:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.prose h1{ margin-top:0; }
.prose h2{ margin:1.25rem 0 .5rem; }
.prose ul{ margin:0 0 1rem 1.1rem; }
.prose li{ margin:.25rem 0; }

/* Impressum Kopf mit Logo rechts */
.imp-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.imp-text{ flex:1; }
.imp-logo img{ max-width:250px; height:auto; display:block; }

/* =================== Cookies =================== */
.cookie-box{
  position:fixed; right:16px; bottom:16px; max-width:360px;
  background:#2e2e2e; color:#f5f5f5; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); padding:14px 14px 12px;
  z-index:9999; display:none;
}
.cookie-box h5{ margin:0 0 6px; font-size:15px; }
.cookie-box p{ margin:0 0 10px; font-size:13px; opacity:.95; }
.cookie-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.cookie-btn{ appearance:none; border:0; border-radius:8px; padding:8px 10px; font-size:13px; cursor:pointer; }
.cookie-btn.minimal{ background:#3b3b3b; color:#f5f5f5; }
.cookie-btn.accept{ background:#ffdd00; color:#1b1b1b; font-weight:600; }
.cookie-box a{ color:#90d0ef; text-decoration:none; }
.cookie-box a:hover{ text-decoration:underline; }

.cookie-reopen{
  position:fixed; right:16px; bottom:16px; z-index:9998; display:none;
}
.cookie-reopen button{
  background:#3b3b3b; color:#f5f5f5; border:0; border-radius:999px;
  padding:8px 12px; font-size:13px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.cookie-reopen button:hover{ filter:brightness(1.1); }

/* =================== Layout Robustness / Footer-Sticky =================== */
.page{ display:flex; flex-direction:column; min-height:100dvh; }
.topbar, .bottombar{ flex:0 0 auto; height:64px; }
.container{ flex:1 1 auto; min-height:0; }
.bottombar{ margin-top:40px; position:relative; bottom:0; left:0; width:100%; }

/* Hero-Logo ohne Effekte */
.hero-right img{ filter:none !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; }

/* =================== Responsiveness =================== */
@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2, minmax(220px,1fr)); }
  .hero{ grid-template-columns:1fr; }
  .hero-right img, .hero-left img{ margin:0 auto; }
  .partners{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .partners{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .imp-header{ flex-direction:column; align-items:flex-start; }
  .imp-logo img{ margin-top:10px; }
}
/* Hero: keine Schatten im Metablock & Button, damit die Schrift knackscharf ist */
.announce-meta,
.announce-meta * {
  text-shadow: none !important;
}

/* Sicherheitshalber noch direkt am Button */
.hero .btn-primary {
  text-shadow: none !important;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* Link Clean Text */
.prose .link-clean a {
  color: #215e77; /* ein dezentes Blau/Grau (wie bei deinen Textspalten) */
  font-weight: 500;
}
.prose .link-clean a:hover {
  color: var(--accent); /* Orange beim Hover */
}
/* universell wiederverwendbar */
a.link-clean{
  color:#215e77;
  font-weight:500;
  text-decoration:none;
  transition:color .2s ease;
}
a.link-clean:hover{
  color:var(--accent);
}