/* atlas-home.css — Startseite „Themenatlas“ (dunkler Einstieg mit Sonnensystem).
   Aus dem Codex-Entwurf entwurf/index.html übernommen. Allgemeine Regeln (Kopf, Buttons,
   Dialog, details) kommen aus atlas.css; hier nur, was die Startseite zusätzlich braucht. */

:root{--accent-light:#92adff}

/* ─── Dunkler Einstieg ─────────────────────────────────────────────────────── */
.dark{background:var(--dark);color:#f4f8f7;position:relative;isolation:isolate;overflow:hidden}
.dark header{position:relative;z-index:3;border-bottom:1px solid #ffffff1c}
.dark :focus-visible{outline-color:#a9beff}
.hero{padding-top:48px;text-align:center;position:relative;z-index:1}
.claim{font-size:3.375rem;font-weight:500;line-height:1.09;text-wrap:balance;max-width:none;margin-inline:auto}
.claim-accent{color:var(--accent-light)}
.intro{font-size:0.9375rem;color:#b8c2d3;max-width:580px;margin:20px auto 0}

.universe{height:450px;width:min(1100px,100%);position:relative;margin:12px 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)}}

.core{position:absolute;left:50%;top:52%;width:146px;height:146px;border-radius:50%;transform:translate(-50%,-50%);background:#f7ba49 url('/img/atlas/sun.jpg') center/auto 100%;box-shadow:inset -9px -7px 18px #a64a1926,0 0 25px 5px #f9b33c24;z-index:1}
.core:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff5c733,transparent 65%);border:1px solid #ffd78270}

.planet-link{position:absolute;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:15px;width:220px;transform:translate(-50%,-50%);color:#fff;z-index:2;padding:12px 5px;border-radius:6px}
.planet-link:hover .planet,.planet-link:focus-visible .planet{transform:scale(1.12)}
.planet-link:hover strong{color:var(--accent-light)}
.planet-link strong{font-size:1rem;font-weight:500;line-height:1.35}
.planet-link small{color:#b8c2d3;font-size:0.75rem;display:block;margin-top:5px}
.planet{width:var(--size);height:var(--size);display:block;position:relative;border-radius:50%;transition:transform .25s;isolation:isolate;overflow:hidden;background-color:var(--shade);background-image:var(--map);background-size:auto 100%;background-position:var(--map-position,50%) center;box-shadow:inset -15px -5px 20px #0009,inset 4px 2px 9px #ffffff24}
.planet:before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 28% 27%,#ffffff15,transparent 47%,#0008 100%)}
.planet:after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #ffffff1a}
.p1{left:14%;top:55%;--size:54px;--shade:#a95354;--map:url('/img/atlas/mars.jpg');--map-position:35%}
.p2{left:34%;top:23%;--size:66px;--shade:#4c6196;--map:url('/img/atlas/earth_daymap.jpg');--map-position:55%}
.p3{left:70%;top:65%;--size:98px;--shade:#317d78;--map:url('/img/atlas/jupiter.jpg');--map-position:30%}
.p4{left:87%;top:26%;--size:80px;--shade:#8b9055;--map:url('/img/atlas/saturn.jpg')}

/* Saturn: die Kugel liegt zwischen hinterer und vorderer Ringhälfte. */
.p4 .planet{overflow:visible;transform:rotate(-19deg);background:none;box-shadow:none}
.saturn-globe{position:absolute;inset:0;z-index:1;border-radius:50%;background:var(--shade) var(--map) center/auto 100%;box-shadow:inset -15px -5px 20px #0009,inset 4px 2px 9px #ffffff24}
.p4 .planet:before,.p4 .planet:after{content:'';position:absolute;inset:23% -45%;border:0;border-radius:50%;box-shadow:none;transform:none;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%)}
.p4 .planet:before{z-index:0;clip-path:inset(0 0 50% 0);filter:brightness(.72)}
.p4 .planet:after{z-index:2;clip-path:inset(50% 0 0 0)}
.p4:hover .planet,.p4:focus-visible .planet{transform:rotate(-19deg) scale(1.12)}

.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:#b8c2d3}
.scene-footer a{text-decoration:none;color:#d5dce8}
.motion{border:1px solid #ffffff42;background:none;color:#c7d7d0;width:36px;height:36px;border-radius:50%;font-size:0.9375rem}

/* Sterne: drei unabhängige Ebenen für langsame Tiefenbewegung. */
.stars{position:absolute;inset:88px 0 0;pointer-events:none;z-index:0}
.star-layer{position:absolute;inset:-100px;animation:star-drift var(--drift-time) linear infinite alternate;animation-delay:var(--drift-delay)}
.star{position:absolute;border-radius:50%;background:#bbd6d1;width:var(--star-size,2px);height:var(--star-size,2px);opacity:var(--star-opacity,.3);animation:star-shimmer var(--shimmer-time,7s) ease-in-out infinite alternate;animation-delay:var(--shimmer-delay,0s)}
@keyframes star-drift{from{transform:translate3d(calc(var(--drift-x) * -1),calc(var(--drift-y) * -1),0)}to{transform:translate3d(var(--drift-x),var(--drift-y),0)}}
@keyframes star-shimmer{from{opacity:calc(var(--star-opacity) * .65)}to{opacity:var(--star-opacity)}}
body.paused .orbit-drift,body.paused .star-layer,body.paused .star,.dark.scene-idle .star-layer,.dark.scene-idle .star,.dark.scene-idle .orbit-drift{animation-play-state:paused}

/* ─── Vertiefung eines Themas (#marketing, #websites, #wissen, #ki) ───────── */
/* Ohne JS stehen alle vier untereinander; atlas-home.js blendet die nicht gewählten per [hidden] aus. */
.detail{padding-block:64px 72px;border-bottom:1px solid var(--line)}
.back{display:inline-flex;align-items:center;gap:10px;margin-bottom:36px;font-size:0.8125rem;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.detail-header{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.detail .eyebrow{font-size:0.75rem;color:#244dc7;margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em}
.detail h2{font-size:2.75rem;line-height:1.1;max-width:550px;margin-bottom:0}
.detail h2:focus{outline:none}
.detail-header>p{font-size:1rem;color:var(--muted);max-width:430px}
.possibilities{margin-top:42px;border-top:1px solid var(--line)}
.possibility summary{font-size:1.1875rem}
.answer{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding:0 0 27px 37px}
.answer p{color:var(--muted);max-width:650px;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}
.answer aside a{display:inline-block;margin-top:14px}
.detail .scope p{max-width:780px}
.detail-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:32px;font-size:0.875rem;color:var(--muted)}

/* ─── Über mich + Kundenstimmen im Wechsel ─────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about-grid p{max-width:480px;color:var(--muted);font-size:0.9375rem}
.about-grid p+p{margin-top:16px}
.person{margin-top:25px;font-size:0.875rem;font-weight:600;color:var(--ink)!important}
.person span{display:block;font-size:0.75rem;color:var(--muted);margin-top:7px;font-weight:400}
.reviews{min-width:0;align-self:start}
/* Ohne JS stehen alle Zitate untereinander; mit JS (html.js) überlagern sie sich und wechseln. */
.review-slide{margin:0 0 32px}
.js .review-stage{display:grid}
.js .review-slide{grid-area:1/1;margin:0;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .4s ease}
.js .review-slide.is-active{visibility:visible;opacity:1;pointer-events:auto}
.review-slide p{font-size:1.3125rem;line-height:1.5;color:var(--ink)!important;max-width:none!important}
.review-slide cite{display:block;font-size:0.75rem;font-style:normal;color:var(--muted);margin-top:20px}
.review-controls{display:flex;align-items:center;gap:12px;margin-top:24px}
.review-controls[hidden]{display:none}
.review-controls button{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink)}
.review-controls button:hover{background:#edf0f8}
#review-count{font-size:0.75rem;font-variant-numeric:tabular-nums;min-width:36px;text-align:center;color:var(--muted)}
#review-pause{margin-left:8px}
.review-source{display:inline-block;margin-top:16px;font-size:0.75rem}

/* ─── Breakpoints ──────────────────────────────────────────────────────────── */
@media(min-width:1500px){.hero{padding-top:58px}.universe{height:470px}.claim{font-size:3.75rem}}
/* Gegenüber dem Entwurf weiter nach außen und bis 1100 px: zwischen 768 und 1024 px
   berührten Erde bzw. Jupiter sonst die Sonne. */
@media(max-width:1100px){
  .universe{height:460px}.planet-link{width:170px}
  .core{width:118px;height:118px}
  .p1{left:13%;top:40%}.p2{left:30%;top:14%}.p3{left:71%;top:80%;--size:80px}.p4{left:86%;top:36%;--size:68px}
}
@media(max-width:850px){
  .claim{font-size:2.625rem}
  .detail-header{gap:26px}.detail h2{font-size:2.25rem}
  .about-grid{gap:36px}
}
@media(max-width:580px){
  .hero{padding-top:36px}
  .claim{font-size:2.125rem;line-height:1.12}
  .intro{font-size:0.875rem;max-width:320px;margin-top:18px}
  .universe{height:470px;margin-top:18px}
  .planet-link{width:150px;gap:9px}.planet-link strong{font-size:0.875rem}.planet-link small{font-size:0.6875rem}
  .core{top:50%;width:112px;height:112px}
  .p1{left:24%;top:20%;--size:45px}.p2{left:76%;top:20%;--size:55px}.p3{left:24%;top:81%;--size:74px}.p4{left:76%;top:81%;--size:62px}
  .orbits{opacity:.19}.orbits ellipse{stroke-width:1.7}
  .scene-footer{gap:12px;font-size:0.6875rem;flex-wrap:wrap;padding:17px 0}
  .scene-footer .location{width:calc(100% - 50px)}
  .motion{position:absolute;right:0;bottom:45px}
  .detail{padding-block:36px 44px}.back{margin-bottom:26px}
  .detail-header{display:block}.detail h2{font-size:2.125rem}.detail-header>p{margin-top:20px;font-size:0.9375rem}
  .possibilities{margin-top:28px}.possibility summary{font-size:1.0625rem}
  .answer{display:block;padding-left:37px}.answer aside{margin-top:20px}
  .about-grid{display:block}
  .reviews{margin-top:40px}
  .review-slide p{font-size:1.1875rem}
}
@media(prefers-reduced-motion:reduce){.orbit-drift,.star-layer,.star{animation:none!important}.review-slide,.planet{transition:none}}
/* Anriss in der Vertiefung: nur Ergebnis + Anfrage, eine Spalte */
.answer-teaser{display:block}
.answer-teaser p{max-width:720px}
.answer-teaser a{display:inline-block;margin-top:12px;font-size:0.8125rem}
.detail .possibilities+.detail-links{margin-top:32px}
/* Porträt neben dem Namen im Abschnitt „Neue Perspektiven“ */
.person-zeile{display:flex;align-items:center;gap:18px;margin-top:25px}
.person-zeile img{width:84px;height:104px;object-fit:cover;object-position:50% 22%;border-radius:8px;flex:none}
.person-zeile .person{margin-top:0}