/* color vars */
:root{--bg:#0b0f14;--panel:#111827;--border:#2a3342;--accent:#60a5fa;--accent-border:#93c5fd;--fg:#e5e7eb;--muted:#94a3b8}
@media (prefers-color-scheme: light){
  :root{--bg:#f8fafc;--panel:#ffffff;--border:#e5e7eb;--accent:#0ea5e9;--accent-border:#22d3ee;--fg:#0f172a;--muted:#64748b}
}
:root[data-theme="dark"]{--bg:#0b0f14;--panel:#111827;--border:#2a3342;--accent:#60a5fa;--accent-border:#93c5fd;--fg:#e5e7eb;--muted:#94a3b8}
:root[data-theme="light"]{--bg:#f8fafc;--panel:#ffffff;--border:#e5e7eb;--accent:#0ea5e9;--accent-border:#22d3ee;--fg:#0f172a;--muted:#64748b}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;display:flex;flex-direction:column;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--fg)
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}
img{max-width:100%;height:auto;display:block}

/* topbar */
.topbar{
  position:sticky;top:0;z-index:10;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)
}
.brand{font-weight:800;letter-spacing:.2px}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--accent);
     box-shadow:0 0 0 2px var(--accent-border) inset;margin-right:8px;vertical-align:middle}

/* nav */
.page-nav{background:#005bb5;color:#fff;border-bottom:1px solid rgba(0,0,0,.15)}
.page-nav .inner{width:min(1200px,100% - 32px);margin:0 auto;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(18px,4vw,56px);padding:18px 0}
.page-nav a{font-weight:600;font-size:clamp(.95rem,.8rem + .5vw,1.2rem);white-space:nowrap;opacity:.95}
.page-nav a:hover,.page-nav a[aria-current="page"]{text-decoration:underline;opacity:1}

/* hero */
.hero{background:linear-gradient(135deg,#0078d4,#00b4d8);color:#fff;text-align:center;padding:56px 16px 40px}
.hero h1{font-size:clamp(1.8rem,1.2rem + 2.2vw,3rem);margin:0 0 10px;line-height:1.15;font-weight:800}
.hero p{max-width:980px;margin:10px auto 0;font-size:clamp(1rem,.9rem + .6vw,1.35rem);line-height:1.5}

/* main */
main{flex:1;width:min(1100px,100% - 32px);margin:24px auto}
section{margin:28px 0}
h2{color:var(--accent);font-size:1.9rem;margin:0 0 .6rem}
p{margin:.5rem 0 1rem;line-height:1.6}
ul{list-style:none;padding:0;margin:0}
li{margin:.7rem 0}

/* cta */
.cta-button{
  display:inline-block;
  margin-top:12px;
  padding:.78rem 1.25rem;
  background:#ffc107;            /* Basisgelb */
  color:#111;                    /* hoher Kontrast */
  border-radius:10px;
  border:1px solid rgba(0,0,0,.06);
  font-weight:700;
  font-size:1.0625rem;           /* ~17px */
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  box-shadow:
    0 1px 0 rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.16);
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.cta-button:hover{
  background:#ffa000;
  transform:translateY(-1px);
  box-shadow:
    0 2px 0 rgba(0,0,0,.12),
    0 10px 22px rgba(0,0,0,.20);
}
.cta-button:active{
  background:#f4b400;
  transform:translateY(0);
  box-shadow:
    0 0 0 rgba(0,0,0,0),
    0 4px 12px rgba(0,0,0,.18);
}
.cta-button:focus-visible{
  outline:2px solid #111;
  outline-offset:3px;
}
/* optional: flachere Variante */
.cta-button--flat{
  box-shadow:none;
  border:1px solid rgba(0,0,0,.12);
}
.cta-button--flat:hover{ background:#ffa000; }
/* Dark-Mode: nur Button feinjustieren */
:root[data-theme="dark"] .cta-button{
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(0,0,0,.40),
    0 6px 16px rgba(0,0,0,.60);
}

/* footer (kompakt) */
footer{
  margin-top:auto;
  background:var(--panel);
  border-top:1px solid var(--border);
  color:var(--muted);
  text-align:center;
  padding:6px 12px;             /* vorher: 16px -> kompakter */
}
footer p{
  margin:0;                     /* vorher: default margin */
  line-height:1.2;              /* dichter */
  font-size:13px;               /* etwas kleiner */
}
footer a{opacity:.9}
footer a:hover{opacity:1;text-decoration:underline}

/* mobile niceties */
@media (max-width:480px){ .page-nav .inner{justify-content:flex-start;overflow-x:auto;padding-inline:16px} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

/* theme toggle button (no network) */
.actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--border);border-radius:999px;color:var(--muted);
  transition:color .2s,border-color .2s,background .2s,transform .06s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.icon-btn:hover{color:var(--fg);border-color:var(--accent-border);background:rgba(255,255,255,.04)}
.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}
.toggle-dark .ico{
  width:20px;height:20px;display:block;pointer-events:none;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:20px 20px;mask-size:20px 20px
}
:root{
  --mask-moon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/></svg>");
  --mask-sun:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4' fill='%23000'/><g stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'><line x1='12' y1='2' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='22'/><line x1='2'  y1='12' x2='5'  y2='12'/><line x1='19' y1='12' x2='22' y2='12'/><line x1='4.2' y1='4.2'  x2='6.3' y2='6.3'/><line x1='17.7' y1='17.7' x2='19.8' y2='19.8'/><line x1='4.2' y1='19.8' x2='6.3' y2='17.7'/><line x1='17.7' y1='6.3'  x2='19.8' y2='4.2'/></g></svg>");
}
.toggle-dark .ico{-webkit-mask-image:var(--mask-moon);mask-image:var(--mask-moon)}
body.light .toggle-dark .ico{-webkit-mask-image:var(--mask-sun);mask-image:var(--mask-sun)}