/* Layout: dunkler Einstieg mit Saturn (Thema „KI sinnvoll einsetzen“) · danach helle Bänder im Section-Grid (Themenatlas) */
@font-face{font-family:'Arimo';font-style:normal;font-display:swap;font-weight:400 700;src:local('Arimo'),url('/fonts/arimo-latin-wght-normal.woff2') format('woff2')}
:root{
  color-scheme:light;
  --ink:#1b2029; --muted:#566070; --paper:#f6f7fa; --line:#d9dee8;
  --accent:#2455e6; --accent-hot:#1943c0; --accent-light:#92adff;
  --dark:#0a1014; --surface:#fff; --contact:#e9eefc; --eyebrow:#244dc7;
  --on-dark:#f4f8f7; --on-dark-muted:#b8c2d3; --on-dark-nav:#d5dce8;
  --saturn:url('/img/saturn.jpg');
  font-family:Arimo,Arial,Helvetica,sans-serif; letter-spacing:0;
}
html[data-contrast="high"]{--ink:#000;--muted:#1a1a1a;--line:#000;--accent:#0a2a9e;--paper:#fff;--on-dark-muted:#fff;--on-dark-nav:#fff}
html[data-fontsize="112"]{font-size:112%} html[data-fontsize="125"]{font-size:125%} html[data-fontsize="137"]{font-size:137%}
html:focus-within{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink)}
[hidden]{display:none!important}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-weight:500;line-height:1.15;text-wrap:balance}
p{line-height:1.7}
a{color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1px}
a,button{touch-action:manipulation}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.dark :focus-visible{outline-color:#a9beff}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;top:-100px;left:20px;padding:16px;background:#fff;z-index:9}.skip:focus{top:12px}
.wrap{width:min(1120px,calc(100% - 80px));margin-inline:auto}

/* Kopf */
.dark{background:var(--dark);color:var(--on-dark);position:relative;isolation:isolate;overflow:hidden}
header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;position:relative;z-index:3;border-bottom:1px solid #ffffff1c}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:0.9375rem;line-height:1.15;font-weight:800;color:inherit;flex:none}
.brandmark{position:relative;display:inline-block;flex:none;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;color:var(--accent-light)}
.brandmark:after{content:'';position:absolute;inset:25% -18%;border:1.5px solid currentColor;border-radius:50%;transform:rotate(-35deg)}
.tools{display:flex;align-items:center;gap:20px}
.main-nav{display:flex;gap:24px;font-size:0.8125rem}
.main-nav a{color:var(--on-dark-nav);text-decoration:none}
.main-nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--accent-light);text-decoration-thickness:2px}
.a11y{display:flex;gap:6px}
.a11y-btn{appearance:none;background:none;border:1px solid #ffffff42;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--on-dark-nav);font-size:0.75rem;line-height:1;flex:none}
.a11y-btn:hover{color:#fff;border-color:var(--accent-light)}
.a11y-btn[aria-pressed="true"]{color:#fff;border-color:#fff}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 20px;min-height:46px;border:0;border-radius:4px;background:var(--accent);color:#fff;text-decoration:none;font-size:0.875rem;font-weight:600;text-align:center}
.button:hover{background:var(--accent-hot)}
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid #ffffff42;border-radius:4px;background:none;color:#fff;flex:none}
.menu-toggle:hover{border-color:var(--accent-light)}
.menu-icon{position:relative;display:block;width:18px;height:12px;border-block:2px solid currentColor}
.menu-icon:after{content:'';position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.menu-toggle[aria-expanded="true"] .menu-icon{border-color:transparent}
.menu-toggle[aria-expanded="true"] .menu-icon:before,.menu-toggle[aria-expanded="true"] .menu-icon:after{content:'';position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.menu-toggle[aria-expanded="true"] .menu-icon:before{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon:after{transform:rotate(-45deg)}
.site-menu{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;padding:20px;background:#0f171c;border:1px solid #ffffff24;border-radius:0 0 8px 8px;box-shadow:0 18px 40px #0009;font-size:0.9375rem;text-align:left}
.site-menu ul{list-style:none;margin:0;padding:0}
.site-menu li a{display:block;padding:12px 0;color:var(--on-dark-nav);text-decoration:none;border-bottom:1px solid #ffffff1c}
.site-menu li a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--accent-light)}
.site-menu .button{margin-top:20px}

/* Einstieg mit Saturn */
.hero{padding-top:48px;text-align:center;position:relative;z-index:1}
.claim{font-size:3.375rem;line-height:1.09;margin-inline:auto}
.claim-accent{color:var(--accent-light)}
.intro{font-size:0.9375rem;color:var(--on-dark-muted);max-width:600px;margin:20px auto 0}
.universe{height:430px;width:min(1100px,100%);position:relative;margin:8px auto 0}
.orbits{position:absolute;inset:0;width:100%;height:100%;color:#6caaa0;opacity:.23;pointer-events:none}
.orbits ellipse{fill:none;stroke:currentColor;stroke-width:1}
.orbits .dash{stroke-dasharray:3 8}
.orbit-drift{transform-origin:50% 52%;animation:orbit 70s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.saturn{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:1;--size:150px}
.planet{width:var(--size);height:var(--size);display:block;position:relative;border-radius:50%}
.saturn .planet{transform:rotate(-19deg)}
.saturn-globe{position:absolute;inset:0;z-index:1;border-radius:50%;background:#8b9055 var(--saturn) center/auto 100%;box-shadow:inset -15px -5px 20px #0009,inset 4px 2px 9px #ffffff24}
.saturn-globe:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 28% 27%,#ffffff15,transparent 47%,#0008 100%);border:1px solid #ffffff1a}
.saturn .planet:before,.saturn .planet:after{content:'';position:absolute;inset:23% -45%;border-radius:50%;background:radial-gradient(ellipse closest-side,transparent 57%,#84765f 59%,#d4c19c 63%,#b6a282 69%,#dfcdac 73%,#d0bd98 79%,#4a443b 80%,#4a443b 83%,#baa88a 84%,#d7c6a7 88%,#958775 94%,transparent 98%)}
.saturn .planet:before{z-index:0;clip-path:inset(0 0 50% 0);filter:brightness(.72)}
.saturn .planet:after{z-index:2;clip-path:inset(50% 0 0 0)}
.moon-link{position:absolute;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:12px;width:220px;transform:translate(-50%,-50%);color:#fff;z-index:2;padding:12px 5px;border-radius:6px}
.moon{width:var(--m,18px);height:var(--m,18px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6e9ee,#9aa2ad 55%,#3c424b 100%);box-shadow:0 0 0 1px #ffffff1a;transition:transform .25s}
.moon-link:hover .moon,.moon-link:focus-visible .moon{transform:scale(1.25)}
.moon-link:hover strong{color:var(--accent-light)}
.moon-link strong{font-size:1rem;font-weight:500;line-height:1.35}
.moon-link small{color:var(--on-dark-muted);font-size:0.75rem;display:block;margin-top:5px}
.m1{left:15%;top:30%;--m:16px}.m2{left:17%;top:78%;--m:20px}.m3{left:84%;top:26%;--m:18px}.m4{left:82%;top:80%;--m:15px}
.stars{position:absolute;inset:88px 0 0;pointer-events:none;z-index:0}
.star{position:absolute;border-radius:50%;background:#bbd6d1;width:var(--s);height:var(--s);opacity:var(--o);animation:shimmer var(--t) ease-in-out infinite alternate}
@keyframes shimmer{from{opacity:calc(var(--o) * .5)}to{opacity:var(--o)}}
body.paused .orbit-drift,body.paused .star{animation-play-state:paused}
.scene-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid #ffffff1c;padding:20px 0 24px;font-size:0.75rem;color:var(--on-dark-muted)}
.motion{border:1px solid #ffffff42;background:none;color:#c7d7d0;width:36px;height:36px;border-radius:50%;font-size:0.9375rem;flex:none}

/* Helle Bänder */
.band{padding-block:56px;border-top:1px solid var(--line)}
.white{background:var(--surface)}
.section-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:72px}
.section-grid>*{min-width:0}
.eyebrow{font-size:0.75rem;color:var(--eyebrow);margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em}
h2{font-size:1.875rem;margin-bottom:20px;max-width:580px}
h3{font-size:1.0625rem;font-weight:600;margin-bottom:10px}
.section-grid>div>p,.side p{color:var(--muted);font-size:0.9375rem}
.side p+p{margin-top:14px}
.topic-sign{display:flex;gap:14px;align-items:center;margin-bottom:22px;font-size:0.8125rem;color:var(--muted)}
.topic-planet{position:relative;display:block;width:48px;height:48px;flex:none}
.topic-planet .saturn-globe{box-shadow:inset -9px -3px 13px #0009}
.topic-planet:before,.topic-planet:after{content:'';position:absolute;inset:23% -40%;border-radius:50%;background:radial-gradient(ellipse closest-side,transparent 60%,#b6a282 66%,#dfcdac 74%,#4a443b 80%,#d7c6a7 86%,transparent 96%);transform:rotate(-19deg)}
.topic-planet:before{z-index:0;clip-path:inset(0 0 50% 0)}
.topic-planet:after{z-index:2;clip-path:inset(50% 0 0 0)}

.groups{margin:0}
.groups>div{padding-block:20px;border-top:1px solid var(--line)}
.groups>div:first-child{padding-top:0;border-top:0}
dt{font-size:1.0625rem;font-weight:600;margin-bottom:10px}
dd{margin:0;color:var(--muted);font-size:0.9375rem;line-height:1.7}

.options{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:22px 0;font-size:1.1875rem;line-height:1.5;display:flex;gap:16px;align-items:center;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';margin-left:auto;font-size:1.5rem;flex:none}
details[open]>summary:after{content:'−'}
.mini-planet{position:relative;display:inline-block;flex:none;width:17px;height:17px;margin-inline:4px;border:1.5px solid var(--accent);border-radius:50%}
.mini-planet:after{content:'';position:absolute;inset:25% -18%;border:1.5px solid var(--accent);border-radius:50%;transform:rotate(-35deg)}
.answer{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding:0 0 27px 37px}
.answer p{color:var(--muted);font-size:0.9375rem}
.answer aside{font-size:0.8125rem;line-height:1.6}
.answer aside b{display:block;font-weight:600;margin-bottom:6px}
.faq summary{font-size:1.0625rem}
.faq details p{padding:0 0 24px;font-size:0.9375rem;color:var(--muted);max-width:640px}

.highlight{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);padding:24px 28px}
.highlight blockquote{margin:0;font-size:1.125rem;line-height:1.6}
.highlight cite{display:block;font-style:normal;font-size:0.75rem;color:var(--muted);margin-top:14px}
.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;font-size:0.9375rem;line-height:1.6}
.checks li:before{content:'';width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--accent)}

.steps{margin:0;padding-left:24px}
.steps li{padding:0 0 24px 10px}
.steps li::marker{color:var(--accent);font-weight:600}
.steps li:last-child{padding-bottom:0}
.steps p{font-size:0.9375rem;color:var(--muted)}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about-grid>*{min-width:0}
.about-grid p{color:var(--muted);font-size:0.9375rem;max-width:480px}
.about-grid p+p{margin-top:16px}
.person-row{display:flex;align-items:center;gap:18px;margin-top:25px}
.person-row img{width:84px;height:104px;object-fit:cover;object-position:50% 22%;border-radius:8px;flex:none}
.person{font-size:0.875rem;font-weight:600;color:var(--ink)}
.person span{display:block;font-size:0.75rem;color:var(--muted);margin-top:7px;font-weight:400}
.more{display:inline-block;margin-top:14px;font-size:0.875rem}
.voices{display:grid;gap:28px}
.voice{margin:0;padding-top:24px;border-top:1px solid var(--line)}
.voice:first-child{padding-top:0;border-top:0}
.voice blockquote{margin:0}
.voice p{font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.voice:first-child p{font-size:1.3125rem;line-height:1.5}
.voice figcaption{font-size:0.75rem;color:var(--muted);margin-top:14px}

.contact-band{background:var(--contact);border-top:1px solid var(--line);padding-block:44px}
.contact-inner{display:flex;gap:32px;justify-content:space-between;align-items:center}
.contact-inner h2{margin-bottom:16px}
.contact-inner p{font-size:0.875rem;color:var(--muted)}
.contact-inner p+p{margin-top:12px}
.contact-inner .button{flex:none}

.asset-credit{font-size:0.6875rem;color:var(--muted);padding-block:20px}
.asset-credit a{color:inherit}
.footer{display:flex;gap:20px;justify-content:space-between;align-items:center;padding-block:28px;border-top:1px solid var(--line);font-size:0.75rem;color:var(--muted);flex-wrap:wrap}
.footer .brand{font-size:0.875rem;color:var(--ink)}
.footer .brandmark{color:var(--accent)}
.footer>div{display:flex;flex-wrap:wrap;gap:20px}
.footer a{color:inherit}

@media(max-width:1100px){.universe{height:440px}.moon-link{width:170px}.saturn{--size:120px}.m1{left:13%;top:24%}.m2{left:14%;top:80%}.m3{left:86%;top:24%}.m4{left:86%;top:80%}}
@media(max-width:1000px){.main-nav{display:none}.menu-toggle{display:inline-flex}.site-menu.is-open{display:block}
  html:not(.js) header{flex-wrap:wrap}html:not(.js) .site-menu{display:block;position:static;flex-basis:100%;box-shadow:none}}
@media(max-width:850px){.wrap{width:calc(100% - 40px)}.claim{font-size:2.625rem}.section-grid{gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.about-grid{gap:36px}}
@media(max-width:580px){
  header{min-height:72px;gap:12px;padding-block:14px}
  .tools{gap:10px}.tools .button{display:none}.a11y{gap:4px}
  .hero{padding-top:36px}.claim{font-size:2.125rem;line-height:1.12}
  .intro{font-size:0.875rem;margin-top:18px}
  .universe{height:460px;margin-top:18px}.saturn{top:50%;--size:104px}
  .moon-link{width:150px;gap:9px}.moon-link strong{font-size:0.875rem}.moon-link small{font-size:0.6875rem}
  .m1{left:25%;top:14%}.m2{left:75%;top:14%}.m3{left:25%;top:86%}.m4{left:75%;top:86%}
  .orbits{opacity:.19}
  .scene-footer{font-size:0.6875rem;padding:17px 0}
  .band{padding-block:36px}
  h2{font-size:1.625rem}
  .section-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  summary{font-size:1.0625rem}
  .answer{display:block;padding-left:37px}.answer aside{margin-top:16px}
  .about-grid{display:block}.voices{margin-top:40px}
  .voice:first-child p{font-size:1.1875rem}
  .contact-inner{display:block}.contact-inner .button{margin-top:24px}
  .footer{align-items:start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}.orbit-drift,.star{animation:none!important}.moon{transition:none}}