:root{
  /* GTÜ-nahe, helles Technik-Grau, minimal dunkler als reines Weiß */
  --bg:#f4f5f6;
  --surface:#ffffff;
  --card:#ffffff;

  --text:#1a1d21;
  --muted:#5f6773;

  --brand:#d71920;
  --border:#d9dde2;

  /* Einheitliche, gut lesbare Content-Boxen (minimal dunkler, technisch) */
  --box:#3a3f46;
  --box-2:#33383f;
  --box-text:#f4f6f8;
  --box-muted:#c8ced8;

  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
  --maxw:1120px;
  --s1:.5rem;--s2:.75rem;--s3:1rem;--s4:1.5rem;--s5:2rem;--s6:3rem;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;font-family:var(--font);line-height:1.55;color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(215,25,32,.06), transparent 60%), var(--bg);
}
img{max-width:100%;height:auto}
a{color:var(--brand)}
a:hover{opacity:.92}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:var(--s3);top:var(--s3);width:auto;height:auto;padding:var(--s2) var(--s3);
  background:rgba(26,31,39,.95);border:1px solid var(--border);border-radius:12px;z-index:9999}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
header.site-header{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(255,255,255,.88);border-bottom:1px solid var(--border)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.brand img{width:44px;height:44px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);padding:6px}
.brand-title{display:flex;flex-direction:column;gap:.15rem}
.brand-title strong{font-size:1.05rem;letter-spacing:.2px}
.brand-title span{font-size:.9rem;color:var(--muted)}
nav.primary{display:flex;align-items:center;gap:var(--s2)}
nav.primary a{text-decoration:none;padding:.55rem .8rem;border-radius:999px;color:var(--muted);border:1px solid transparent}
nav.primary a[aria-current="page"]{color:var(--text);background:rgba(215,25,32,.16);border-color:rgba(215,25,32,.20)}
nav.primary a:hover{color:var(--text);background:rgba(231,237,246,.06);border-color:rgba(231,237,246,.12)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;padding:.55rem .8rem;border-radius:999px;border:1px solid var(--border);
  background:rgba(231,237,246,.05);color:var(--text)}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{margin-top:var(--s2);padding:var(--s2);border:1px solid var(--border);border-radius:16px;
  background:var(--box-2);box-shadow:var(--shadow)}
.menu-panel a{display:block;padding:.7rem .8rem;border-radius:12px;text-decoration:none;color:var(--box-text)}
.menu-panel a[aria-current="page"]{color:var(--box-text);background:rgba(215,25,32,.22)}
.menu-panel a:hover{color:var(--box-text);background:rgba(255,255,255,.08)}
main{padding:var(--s6) 0}
.hero{
  display:grid;grid-template-columns:1.3fr .7fr;gap:var(--s5);align-items:start;
  padding:var(--s6);border-radius:calc(var(--radius) + 10px);
  background:linear-gradient(180deg, var(--box-2), var(--box));
  border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 40px rgba(0,0,0,.14)
}
.hero h1{margin:0 0 var(--s2) 0;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:.2px;color:var(--box-text)}
.hero p{margin:0 0 var(--s4) 0;color:var(--box-muted);font-size:1.05rem}
.hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1rem;border-radius:999px;text-decoration:none;
  border:1px solid var(--border);background:rgba(231,237,246,.06);color:var(--text)}
.btn.primary{border-color:rgba(215,25,32,.28);background:linear-gradient(135deg, rgba(215,25,32,.28), rgba(255,120,120,.14))}
.btn:hover{transform:translateY(-1px)}

/* Buttons in dunklen Content-Boxen */
.card .btn, .small-card .btn{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--box-text)}
.card .btn.primary, .small-card .btn.primary{border-color:rgba(215,25,32,.55);background:linear-gradient(135deg, rgba(215,25,32,.65), rgba(215,25,32,.35))}

/* Buttons im dunklen Hero besser lesbar */
.hero .btn{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:var(--box-text)}
.hero .btn.primary{border-color:rgba(215,25,32,.55);background:linear-gradient(135deg, rgba(215,25,32,.65), rgba(215,25,32,.35))}
.hero .btn.primary:hover{filter:brightness(1.05)}
.small-card{border-radius:var(--radius);border:1px solid rgba(0,0,0,.06);background:var(--box);color:var(--box-text);padding:var(--s4);
  box-shadow:0 10px 26px rgba(0,0,0,.14)}
.small-card h3{margin:0 0 .35rem 0;font-size:1rem;color:var(--box-text)}
.small-card p{margin:0;color:var(--box-muted);font-size:.95rem}
.grid{margin-top:var(--s5);display:grid;grid-template-columns:1.3fr .7fr;gap:var(--s5);align-items:start}
.card{border-radius:var(--radius);border:1px solid rgba(0,0,0,.06);background:var(--box);color:var(--box-text);padding:var(--s5);
  box-shadow:0 10px 26px rgba(0,0,0,.14)}
.card h2,.card h3,.card h4{margin-top:0}
.card h2{font-size:1.35rem;margin-bottom:var(--s3)}
.card h3{font-size:1.15rem}
.card h4{font-size:1.05rem}
.card p,.card li{color:var(--box-muted)}
.card ul{margin:.35rem 0 0 1.1rem}
.card li{margin:.25rem 0}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:var(--box-muted);font-size:.9rem}
aside .card{position:sticky;top:88px}
.partner{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.partner a{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:14px;
  background:#fff;border:1px solid rgba(0,0,0,.08)}
.partner img{width:auto;height:34px;border-radius:0;border:0;background:transparent;padding:0}
footer.site-footer{border-top:1px solid var(--border);padding:var(--s5) 0;color:var(--muted)}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.footer-inner a{color:var(--text);text-decoration:none;border-bottom:1px dotted rgba(0,0,0,.25)}
.footer-inner a:hover{border-bottom-color:rgba(0,0,0,.55)}
.content-legacy h3{font-size:1.35rem;margin-top:0}
.content-legacy h4{margin:var(--s4) 0 var(--s2)}
.content-legacy h6{margin:var(--s2) 0;color:var(--muted);font-weight:normal}
.figure-zoom{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:rgba(0,0,0,.18)}
.figure-zoom img{display:block;width:100%}
.figure-zoom a{display:block;text-decoration:none}
.figure-zoom .hint{position:absolute;left:12px;bottom:12px;padding:.40rem .65rem;border-radius:999px;
  background:rgba(15,17,20,.78);border:1px solid rgba(255,255,255,.18);
  color:var(--box-text);font-size:.95rem;font-weight:500;font-family:inherit;opacity:.98}
@media (max-width:900px){.hero,.grid{grid-template-columns:1fr}aside .card{position:static}}
@media (max-width:720px){nav.primary{display:none}.menu{display:block}.container{padding:0 var(--s3)}main{padding:var(--s5) 0}.hero{padding:var(--s5)}}
