:root{
  --bg: #0b1220;
  --card: #0f172a;
  --muted: #94a3b8;
  --text: #e2e8f0;
  --brand: #10b981;
  --brand-2: #06b6d4;
  --ring: rgba(16,185,129,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height:1.65}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;background:rgba(11,18,32,.8);backdrop-filter: blur(10px);border-bottom:1px solid rgba(148,163,184,.2);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav a.btn{padding:10px 14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#062a22;border-radius:10px;font-weight:700}
.navmenu{display:flex;gap:14px;flex-wrap:wrap}
.hero{padding:72px 0;background:radial-gradient(1200px 500px at 20% -10%, rgba(16,185,129,.25), transparent), radial-gradient(1200px 500px at 80% 10%, rgba(6,182,212,.22), transparent)}
.hero h1{font-size: clamp(28px, 4vw, 46px);line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);max-width:780px;margin:0 0 20px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#062a22;font-weight:800;box-shadow:0 6px 20px var(--ring)}
.button.secondary{background:#0b1b2c;border:1px solid rgba(148,163,184,.2);color:var(--text)}
/* removed global .grid to avoid conflicts */
/* moved to .hg-card */
.card h3{margin:0 0 6px;font-size:18px}
.card p{color:var(--muted);margin:0}
.section{padding:48px 0}
.footer{border-top:1px solid rgba(148,163,184,.2);margin-top:60px}
.footer small{color:var(--muted)}
.imgwrap{border-radius:16px;overflow:hidden;border:1px solid rgba(148,163,184,.12)}
img{max-width:100%;display:block}
main p{margin:0 0 14px}
/* responsive cards */
.features{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
/* content page */
.content{background:var(--card);border:1px solid rgba(148,163,184,.12);border-radius:18px;padding:24px}
.content h1,.content h2,.content h3{margin-top:18px}
.content a{color:var(--brand-2)}
/* simple breadcrumb */
.breadcrumb{color:var(--muted);font-size:14px;margin-bottom:10px}


/* ===== Mobile refinements ===== */
@media (max-width: 640px){
  .logo img{width:28px;height:28px}
  .nav{gap:10px}
  .navmenu{width:100%; gap:10px; font-size:14px; justify-content:flex-start}
  .nav a.btn{display:none} /* keep CTA only in hero on small screens */
  .hero{padding:48px 0}
  .hero h1{font-size: clamp(24px, 8vw, 34px)}
  .cta .button{padding:10px 14px}
  /* removed global .grid to avoid conflicts */
  .content{padding:18px}
  .content h1{font-size: clamp(22px, 6vw, 28px)}
  .content h2{font-size: clamp(18px, 5.5vw, 24px)}
  .content h3{font-size: clamp(16px, 5vw, 20px)}
}

/* Prevent huge words from overflowing */
.content, .hero h1 {word-wrap: break-word; overflow-wrap: anywhere;}


/* ====== Mobile navigation (burger) ====== */
#nav-toggle{display:none}
.burger span{display:block; width:18px; height:2px; background:var(--text); border-radius:2px; box-shadow:0 6px 0 var(--text), 0 -6px 0 var(--text)}
@media (max-width: 820px){
  .navmenu{display:none; width:100%; flex-direction:column; gap:12px; padding:12px 0}
  .burger{display:flex}
  #nav-toggle:checked + label + .navmenu{display:flex}
}

/* ====== Index grid responsive stacking ====== */
.section .grid.two-col{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px;
}
@media (max-width: 900px){
  .section .grid.two-col{grid-template-columns:1fr}
  .section .grid.two-col .col{order:initial}
  .section .grid.two-col .col.img{order:2}
  .section .grid.two-col .col.text{order:1}
}

/* Prevent image overflow */
.imgwrap, img{max-width:100%; height:auto}

/* ====== Content page readability ====== */
.content table{width:100%; border-collapse:collapse; margin:12px 0;}
.content th,.content td{border:1px solid rgba(148,163,184,.2); padding:10px; text-align:left; white-space:normal; vertical-align:top;}
.content p, .content li, .content a, .content address, .content td, .content th{white-space:normal; word-break:break-word}
/* reset any accidental display affecting blocks */
.content *{writing-mode:horizontal-tb; text-orientation:initial}


@media (max-width: 640px){
  .nav{align-items:center}
  .logo span{font-size:16px}
}

.muted{color:var(--muted)}


/* ===== HeuteGewinnt scoped layout classes (avoid conflict with generic .grid used in content) ===== */
.hg-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.hg-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.hg-card{background:var(--card);border:1px solid rgba(148,163,184,.12);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(2,6,23,.25)}
.hg-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width: 900px){ .hg-two-col{grid-template-columns:1fr} .hg-two-col .col.img{order:2} .hg-two-col .col.text{order:1}}
/* Ensure content does not inherit our layout */
.content .grid, .content .card, .content .features {all: revert}
.content *{writing-mode:horizontal-tb;text-orientation:initial}
body{overflow-x:hidden}
img, .imgwrap{max-width:100%; height:auto}
.muted{color:var(--muted)}


/* Robust mobile menu (fixed dropdown) */
.header{position:sticky; top:0; z-index:1000}
.navmenu{display:flex; gap:14px; flex-wrap:wrap}
#nav-toggle{display:none}
.burger span{display:block; width:18px; height:2px; background:var(--text); border-radius:2px; box-shadow:0 6px 0 var(--text), 0 -6px 0 var(--text)}
@media (max-width: 820px){
  .navmenu{display:none}
  .burger{display:flex}
  #nav-toggle:checked ~ .navmenu-panel{display:block}
}
.navmenu-panel a{display:block; padding:10px 8px; border-radius:10px}


/* ===== Download section layout ===== */
#download .dl-card{
  display:inline-block;
  background:var(--card);
  border:1px solid rgba(148,163,184,.12);
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 30px rgba(2,6,23,.25);
  max-width: 640px;
}
#download .dl-card h3{margin:0 0 6px; font-size:20px}
#download .dl-card p{margin:0 0 10px; color:var(--muted)}
#download .dl-shot{margin-top:18px}
#download .dl-shot img{display:block; width:100%; height:auto; max-width:860px; margin:0 auto; border-radius:16px; border:1px solid rgba(148,163,184,.12)}
@media (max-width: 680px){
  #download .dl-card{max-width: 100%}
}


/* ===== Einheitliche Zentrierung von Features & Download ===== */

/* Feature-Kacheln (grid) mittig ausrichten */
.hg-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  justify-items: center;
  align-items: start;
  margin: 0 auto;
  max-width: 980px;
}

/* Einzelne Kacheln gleichmäßig gestalten */
.hg-card {
  background: var(--card);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 16px;
  padding: 20px 24px;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 10px 30px rgba(2,6,23,.25);
}

/* Download-Abschnitt mittig */
#download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
}

#download .dl-card {
  background: var(--card);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 640px;
  text-align: left;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(2,6,23,.25);
}

#download .dl-shot {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  width: 100%;
}

#download .dl-shot img {
  width: 100%;
  max-width: 860px;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.12);
}

/* Mobile-Optimierung */
@media (max-width: 680px) {
  .hg-card { max-width: 100%; }
  #download .dl-card { max-width: 100%; text-align: center; }
}


/* v8: TAP-like header (scoped) */
.header{position:sticky;top:0;background:rgba(11,18,32,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(148,163,184,.2);z-index:1000}
.header #nav-toggle{display:none}
.header .nav{display:flex;align-items:center;gap:12px}
.header .logo{display:flex;align-items:center;gap:12px}
.header .logo img{width:44px;height:44px;border-radius:12px;border:1px solid rgba(148,163,184,.25);box-shadow:0 8px 24px rgba(2,6,23,.45);object-fit:cover}
.header .logo span{font-weight:900;letter-spacing:.2px;font-size:18px}
.header .navmenu{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.header .burger{margin-left:auto;display:none;width:48px;height:48px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:rgba(3,7,18,.6);backdrop-filter:blur(8px);align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 30px rgba(2,6,23,.35)}
.header .burger span{display:block;width:20px;height:2px;background:#e2e8f0;border-radius:2px;box-shadow:0 7px 0 #e2e8f0,0 -7px 0 #e2e8f0}
@media(max-width:900px){
  .header .navmenu{display:none}
  .header .burger{display:flex}
}
.header .navmenu-panel{display:none;position:fixed;top:64px;left:0;right:0;background:#0b1220F2;border-bottom:1px solid rgba(148,163,184,.2);backdrop-filter:blur(10px);padding:16px 24px;z-index:1100}
.header > #nav-toggle:checked ~ .navmenu-panel{display:block}
#nav-toggle:checked ~ .navmenu-panel{display:block} /* fallback */

/* v8: hero full-bleed over full viewport width */
.hero{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 24px);
  padding-right: calc(50vw - 50% + 24px);
  border-bottom:1px solid rgba(148,163,184,.15);
}

/* v8: features grid single-column on phones */
@media (max-width: 640px){
  .hg-features{grid-template-columns:1fr}
}


/* HG thumbnails + lightbox */
.shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,200px));gap:16px;justify-content:center;align-items:start;margin:24px auto 0;max-width:680px}
.shot{padding:0;background:transparent;border:none;border-radius:0;width:100%;max-width:200px}
.shot img{display:block;width:100%;height:auto;border-radius:12px;object-fit:contain}
.lb-backdrop[hidden]{display:none}
.lb-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.75);backdrop-filter:blur(6px);z-index:1200;display:grid;place-items:center;padding:16px}
.lb-figure{position:relative;max-width:min(92vw,900px);max-height:min(92vh,1100px);margin:0}
.lb-image{display:block;width:auto;height:auto;max-width:90vw;max-height:85vh;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);border:1px solid rgba(148,163,184,.2);object-fit:contain}
.lb-caption{margin-top:10px;text-align:center;color:#94a3b8;font-size:.95rem}
.lb-close{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(148,163,184,.25);background:#0b1220;color:#e2e8f0;font-size:22px;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(2,6,23,.4)}
.lb-close:hover{opacity:.9}