/* =====================================================================
   Simulationen (sim-): drei große Kacheln mit Live-Vorschau, Detail-Kachel als Dialog (sims.js)
   Kachel: oben ein Display (4:3, Punktraster, Vorschau des Moduls oder Standbild), darunter Nummer,
   Kicker, Titel und eine Zeile. Start sitzt oben rechts als Glas-Pille.
   Handy: wischbare Reihe mit Einrasten in der Mitte, die Nachbarn schauen an den Rändern herein.
   Desktop ab 900 px: drei Kacheln nebeneinander, etwas breiter als das Inhaltsraster.
   Wachsen: Beim Hereinscrollen schwillt die Reihe von 0,94 auf 1 an (scroll-getrieben über --sg),
   die aktive Kachel (Mitte, Zeiger oder Reigen) wächst zusätzlich mit Feder auf 1,035 und spielt.
   Detail-Kachel: <dialog> im Top Layer. Desktop zentriertes Panel, Handy Blatt von unten bis kurz
   unter die Statusleiste. Animiert werden nur transform, scale, opacity und clip-path.
   ===================================================================== */
@property --sg{syntax:"<number>";inherits:true;initial-value:1}
.sims{--sim-stage:var(--bg);overflow-x:clip}
:root[data-theme="light"] .sims{--sim-stage:#f7f8fa}
.sims .sh{margin-bottom:clamp(20px,2.6vw,36px)}

/* ---------- Reihe ---------- */
.sims-rail{--tw:min(84vw,420px);position:relative;list-style:none;margin:0;display:flex;gap:12px;
  padding:10px calc(50% - var(--tw) / 2) 22px;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:calc(50% - var(--tw) / 2);scrollbar-width:none}
.sims-rail::-webkit-scrollbar{display:none}
@supports (animation-timeline:view()){
  :root:not(.motion-reduce) .sims-rail{animation:sims-swell linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
}
@keyframes sims-swell{from{--sg:.94}to{--sg:1}}

/* ---------- Kachel ---------- */
.sim-tile{--k:1;position:relative;flex:0 0 var(--tw);display:flex;flex-direction:column;min-width:0;padding:8px;border-radius:var(--r-xl);
  scroll-snap-align:center;scroll-snap-stop:always;
  background:var(--sheen),var(--sx-tile,var(--surface));box-shadow:var(--sh-2),inset 0 -1px 0 var(--edge-lo);
  scale:var(--sg);transform:scale(var(--k));transform-origin:50% 55%;
  transition:transform .7s var(--spring),box-shadow .35s var(--ease)}
.sim-tile::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sim-tile.is-on{--k:1.035;z-index:1;box-shadow:var(--sh-3),inset 0 -1px 0 var(--edge-lo),0 0 0 1px var(--acc-line)}

/* Display: Vorschau des Moduls liegt über dem Standbild; ruhende Kacheln leicht abgeblendet */
.sim-stage{position:relative;aspect-ratio:4/3;border-radius:calc(var(--r-xl) - 8px);overflow:hidden;isolation:isolate;cursor:pointer;
  background:radial-gradient(var(--dot) 1px,transparent 1.3px) 50% 50%/16px 16px,var(--sim-stage);box-shadow:inset 0 0 0 1px var(--hair)}
.sim-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--bg);opacity:0;transition:opacity .45s var(--ease)}
.sims.has-on .sim-tile:not(.is-on) .sim-stage::after{opacity:.32}
.sim-stage>canvas,.sim-stage>svg:not(.sim-poster){position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.sim-poster{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;transition:opacity .45s var(--ease)}
.sim-tile.is-live .sim-poster{opacity:0}
/* Standbild: Haarlinien wie eine Konstruktionszeichnung, ein Akzent */
.sp-l{fill:none;stroke:var(--fg2);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;opacity:.8}
.sp-f{fill:var(--surface2)}
.sp-g{fill:none;stroke:var(--line2);stroke-width:1}
.sp-c{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:12 3 2 3}
.sp-s{fill:none;stroke:var(--acc);stroke-width:1.4;stroke-dasharray:4 5;stroke-linecap:round}
.sp-a{fill:var(--acc)}
.sp-a2{fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sp-film{fill:var(--acc-soft)}
.sp-lobe{fill:var(--acc-soft);stroke:var(--acc);stroke-width:1.3}
.sp-coke{fill:color-mix(in srgb,#9a7148 62%,transparent)}
.sp-t{font:500 11px var(--mono);letter-spacing:.12em;fill:var(--mut)}

/* Text */
.sim-tx{display:flex;flex-direction:column;gap:6px;padding:14px 10px 10px;min-width:0}
.sim-k{display:flex;align-items:center;gap:10px;margin:0;font:500 var(--t-micro)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.sim-n{font:850 12px/1 var(--dots);letter-spacing:.04em;color:var(--acc)}
.sim-h{font:700 clamp(19px,1.55vw,23px)/1.12 var(--font);font-stretch:110%;letter-spacing:-.02em;color:var(--fg)}
.sim-p{font-size:var(--t-p);line-height:1.45;color:var(--fg2);max-width:42ch}

/* Start: Glas-Pille oben rechts auf dem Display; aktiv als volle Fläche */
.sim-go{position:absolute;z-index:5;top:18px;right:18px;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 12px;border:0;border-radius:var(--r-pill);
  font:600 13px/1 var(--font);font-stretch:104%;color:var(--fg);cursor:pointer;white-space:nowrap;
  background:var(--sheen),color-mix(in srgb,var(--glass2) 82%,transparent);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-2);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  transition:transform .32s var(--spring),background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.sim-go::after{content:"";position:absolute;inset:-5px -4px}
.sim-go .i{width:13px;height:13px;fill:currentColor;stroke:currentColor;stroke-width:1.2}
.sim-go:active{transform:scale(.95);transition-duration:.12s,.2s,.2s,.2s}
.sim-tile.is-on .sim-go{color:var(--bg);background:var(--btn-sheen) var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.3),0 10px 24px -12px rgba(0,0,0,.6)}
@media (hover:hover) and (pointer:fine){
  .sim-go:hover,.sim-tile.is-on .sim-go:hover{color:var(--acc-fg);background:var(--btn-sheen) var(--acc)}
}

/* ---------- Seitenanzeige und Pause ---------- */
.sims-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2px}
.sims-pg{display:flex;align-items:center;gap:4px}
.sims-pg button{position:relative;width:30px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.sims-pg i{position:absolute;left:3px;right:3px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--fill2);overflow:hidden}
.sims-pg i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
.sims-pg button.is-on i::after{transform:none}
/* Reigen (Desktop): das aktive Segment füllt sich in der Laufzeit der Vorschau */
.sims-pg.is-cyc button.is-on i::after{animation:sims-fill var(--cyc,7s) linear both}
.sims.is-paused .sims-pg button.is-on i::after{animation-play-state:paused}
@keyframes sims-fill{from{transform:scaleX(0)}to{transform:none}}
.sims-ct{margin-left:8px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--mut);font-variant-numeric:tabular-nums}
.sims-ct b{font-weight:600;color:var(--fg)}
.sims-pause{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--fg2);
  background:var(--sheen),var(--glass);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-1);
  transition:color .2s var(--ease),transform .32s var(--spring)}
.sims-pause::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.sims-pause .i{grid-area:1/1;width:14px;height:14px;stroke-width:2;transition:opacity .16s var(--ease),transform .2s var(--ease)}
.sims-pause .sp-ir{opacity:0;transform:scale(.6);fill:currentColor}
.sims-pause[aria-pressed="true"]{color:var(--fg)}
.sims-pause[aria-pressed="true"] .sp-ip{opacity:0;transform:scale(.6)}
.sims-pause[aria-pressed="true"] .sp-ir{opacity:1;transform:none}
.sims-pause:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.sims-pause:hover{color:var(--fg)}}

@media (min-width:600px) and (max-width:899px){.sims-rail{--tw:min(62vw,440px)}}
/* Desktop: im Inhaltsraster, bündig mit der Überschrift */
@media (min-width:900px){
  .sims-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,20px);max-width:var(--wrap);margin-inline:auto;
    padding:12px var(--gut) 26px;overflow:visible;scroll-snap-type:none}
  .sim-tile{flex:none}
  .sims-ctl{justify-content:flex-start}
}

/* ---------- Detail-Kachel (Dialog) ---------- */
html.sim-lock{overflow:hidden;scrollbar-gutter:stable}
/* Offene Detail-Kachel: CSS-Animationen der Seite darunter halten an (Laufband, Schemata, Ping); jede Bewegung dort
   ließe die Unschärfe des Hintergrunds mit jedem Bild neu rechnen. Skript-Schleifen ruhen über "fs:sheet" (sims.js). */
html.sim-lock body :not(.sim-sheet,.sim-sheet *){animation-play-state:paused!important}
.sim-sheet{--bar:56px;position:fixed;inset:0;margin:auto;width:min(1280px,100vw - 48px);height:min(100dvh - 32px,1000px);max-width:none;max-height:none;
  padding:0;border:0;border-radius:var(--r-xl);overflow:hidden;color:var(--fg);background:var(--bg2);
  box-shadow:inset 0 0 0 1px var(--edge),0 50px 120px -40px rgba(0,0,0,.85)}
.sim-sheet[open]{display:flex;flex-direction:column}
.sim-sheet::backdrop{background:rgba(3,5,8,.62);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
:root[data-theme="light"] .sim-sheet{box-shadow:inset 0 0 0 1px var(--edge),0 50px 120px -40px rgba(10,14,24,.35)}
:root[data-theme="light"] .sim-sheet::backdrop{background:rgba(214,219,227,.58)}
.sim-bar{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:12px;height:var(--bar);padding:0 10px 0 20px;
  border-bottom:1px solid var(--hair);background:var(--sheen),var(--bg2)}
.sim-bar-t{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font:650 15px/1.2 var(--font);font-stretch:104%;letter-spacing:-.005em;white-space:nowrap}
.sim-bar-t>span:last-child{overflow:hidden;text-overflow:ellipsis}
.sim-bar-tag{margin-left:auto}
.sim-x{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--fg);
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s var(--ease),transform .32s var(--spring)}
.sim-x::after{content:"";position:absolute;inset:-2px;border-radius:50%}
.sim-x .i{width:18px;height:18px;stroke-width:1.8}
.sim-x:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.sim-x:hover{background:var(--fill2)}}
.sim-body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px clamp(16px,2.4vw,32px) 32px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
/* Platzhalter, bis ein Modul sich meldet */
.sim-wait{display:grid;place-items:center;gap:14px;min-height:60%;padding:24px;text-align:center;color:var(--mut);font-size:var(--t-sm)}
.sim-wait .sim-poster{position:static;width:min(100%,520px);height:auto;aspect-ratio:4/3}
@media (max-width:760px){
  .sim-sheet{--bar:52px;inset:auto 0 0 0;margin:0;width:100vw;height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);border-radius:var(--r-xl) var(--r-xl) 0 0}
  .sim-bar{padding:0 8px 0 16px}
  .sim-bar-tag{display:none}
  .sim-x{margin-left:auto}
  .sim-body{padding:4px 16px calc(24px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Weniger Bewegung, erzwungene Farben ---------- */
.motion-reduce .sim-tile{scale:none;transition:box-shadow .2s var(--ease)}
.motion-reduce .sim-tile.is-on{--k:1}
.motion-reduce .sims-pg i::after{animation:none!important}
.motion-reduce .sims-pause{display:none}
@media (forced-colors:active){
  .sim-tile::after{display:none}
  .sim-tile{border:1px solid CanvasText}
  .sim-tile.is-on{outline:2px solid Highlight}
  .sims-pg i{background:GrayText}.sims-pg button.is-on i{background:Highlight}
  .sim-sheet{border:1px solid CanvasText}
}