/* Curitac – gemeinsame Optik für die Inhaltsseiten, passend zu Startseite und Über uns.
   Wird nach curitac.css geladen. Aufbau und Inhalte der Seiten bleiben unverändert. */

/* Farben und Schriften: immer die dunkle Welt der neuen Seiten */
:root:not(#zw),.sec-dark:not(#zw){
  --bg:#07080a;--bg-alt:#0d0f12;--card:#121418;--fg:#f5f5f7;--muted:#9a9ca3;--dim:#55585f;
  --line:rgba(255,255,255,.1);--accent:#30d58c;--on-accent:#06130c;--g1:#30d58c;--g2:#2ee6c0;--g3:#d7f36b;
  --nav:rgba(7,8,10,.8);--warn:#ffb340;--bad:#ff6b61;
  --display:"Inter Tight",Inter,system-ui,sans-serif;--text:Inter,system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
body:not(#zw){background:#07080a;padding-top:calc(56px + env(safe-area-inset-top,0px))}
main,footer,.tpl-bar{position:relative;z-index:2}

/* Abschnitte lassen die Szene durchscheinen */
.sec:not(#zw){background:transparent}
.sec-alt:not(#zw){background:linear-gradient(rgba(13,15,18,0),rgba(13,15,18,.62) 14%,rgba(13,15,18,.62) 86%,rgba(13,15,18,0))}
.sec h1,.sec h2,.sec .sub,.head p{text-shadow:0 2px 26px rgba(7,8,10,.85)}
footer:not(#zw){background:rgba(7,8,10,.88);border-top:1px solid var(--line)}
.tpl-bar:not(#zw){background:rgba(13,15,18,.9)}

/* Gemeinsames Kennzeichen: grüne Abschnittsmarke wie auf Über uns */
.eyebrow:not(#zw){display:inline-flex;align-items:center;gap:10px;font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g1)}
.eyebrow:not(#zw)::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--g1);box-shadow:0 0 12px var(--g1)}
h1 > .eyebrow:not(#zw){margin-bottom:22px}
.crumb:not(#zw){font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.art-meta:not(#zw){font:500 12px/1.4 var(--mono);letter-spacing:.06em}

/* Karten: dunkles Glas mit feiner Kante */
.feat > div,.aud article,.kurz,.callout,.pick,.panel,.tm,.val,.calc-out,.check-box,.post,.month,.next,.cta-panel,.proof,.beweis,.sum,.bento > .tile,.svc article,.kpi,.facts,.qlist,.qout,.story,.quote{
  border:1px solid var(--line)}
.feat > div,.aud article,.kurz,.callout,.pick,.panel,.tm,.val,.calc-out,.check-box,.post,.month,.next,.cta-panel,.proof,.beweis,.sum,.bento > .tile,.qlist,.qout{
  background-color:rgba(16,18,22,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.feat > div{border-radius:22px;padding:clamp(20px,2.4vw,28px)}
.zw-lit{background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(46,230,192,.10),transparent 42%)}
.zw-lit:hover{border-color:rgba(48,213,140,.35)}

/* Weiches Einblenden beim Scrollen (nur mit Skript, ohne Skript bleibt alles sichtbar) */
.zw-js .zw-rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.zw-js .zw-rv:not(.zw-on){opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){.zw-js .zw-rv:not(.zw-on){opacity:1;transform:none}}

/* Szene, Körnung, Lichtschein */
#zw-gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;transition:opacity .5s}
.zw-veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 50% 50%,transparent 25%,rgba(7,8,10,.8) 100%)}
.zw-grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.zw-glow{position:fixed;left:0;top:0;z-index:1;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(46,230,192,.09),transparent 60%);transform:translate3d(-100vw,-100vh,0)}
@media (hover:none){.zw-glow{display:none}}

/* Lesefortschritt in den Ratgebern */
.zw-progress{position:fixed;left:0;right:0;top:calc(56px + env(safe-area-inset-top,0px));height:2px;z-index:999;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));box-shadow:0 0 12px rgba(46,230,192,.6);pointer-events:none}

/* ── Erzählweise im Apple-Stil (zw-story.js) ── */
.zw-d{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1)}
.zw-drawn .zw-d{stroke-dashoffset:0}
.zw-drawn svg > :nth-child(2){transition-delay:.12s}.zw-drawn svg > :nth-child(3){transition-delay:.24s}.zw-drawn svg > :nth-child(4){transition-delay:.36s}
.zw-drawn svg > :nth-child(5){transition-delay:.48s}.zw-drawn svg > :nth-child(n+6){transition-delay:.6s}
svg .acc{stroke:var(--g3)}

/* Scroll-Kacheln: links bleibt die Kachel stehen, rechts laufen die Punkte vorbei */
.zw-sc-host:not(#zw){display:block}
.zw-sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.zw-sc-stage{position:sticky;top:calc(56px + 8vh);height:calc(84vh - 56px);display:flex;align-items:center}
.zw-sc-tile{--hue:0deg;position:relative;width:100%;max-height:100%;aspect-ratio:1/1;border-radius:36px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#14171c,#0b0d10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,30px);padding:clamp(24px,4vw,48px);isolation:isolate}
.zw-sc-glow{position:absolute;inset:-30%;z-index:-1;background:conic-gradient(from 0deg,rgba(48,213,140,.0),rgba(48,213,140,.28),rgba(46,230,192,.08),rgba(215,243,107,.2),rgba(48,213,140,0));filter:blur(60px);
  transform:rotate(var(--hue));transition:transform 1.2s cubic-bezier(.2,.8,.2,1);animation:zwSpin 18s linear infinite}
@keyframes zwSpin{to{rotate:360deg}}
.zw-sc-art{width:min(46%,240px);aspect-ratio:1/1;color:var(--g1);filter:drop-shadow(0 0 22px rgba(48,213,140,.45))}
.zw-sc-art svg{width:100%;height:100%;display:block;stroke-width:1.6}
.zw-sc-art.zw-drawn{animation:zwPop .7s cubic-bezier(.2,.8,.2,1)}
@keyframes zwPop{from{transform:scale(.86);opacity:.2}to{transform:none;opacity:1}}
.zw-sc-cap{font:600 clamp(1.3rem,2.2vw,1.9rem)/1.1 var(--display);letter-spacing:-.025em;text-align:center;color:var(--fg);text-wrap:balance}
.zw-sc-dots{display:flex;gap:7px}
.zw-sc-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.18);transition:width .4s,background .4s}
.zw-sc-dots i.on{width:26px;background:var(--g1)}
.zw-sc-list{display:flex;flex-direction:column;padding-block:18vh 22vh}
.zw-sc .zw-sc-item:not(#zw){background:none;border:0;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:46vh;display:flex;flex-direction:column;justify-content:center;gap:14px;
  opacity:.22;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transform:translateX(0)}
.zw-sc .zw-sc-item.on:not(#zw){opacity:1;transform:translateX(6px)}
.zw-sc .zw-sc-item h2,.zw-sc .zw-sc-item h3,.zw-sc .zw-sc-item b{position:static;font:600 clamp(1.9rem,3.6vw,3.1rem)/1.04 var(--display);letter-spacing:-.035em;text-wrap:balance}
.zw-sc .zw-sc-item p:not(#zw){font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;color:var(--muted);max-width:34ch}
.zw-sc-mini{display:none}
@media (max-width:860px){
  .zw-sc{grid-template-columns:1fr;gap:0}
  .zw-sc-stage{display:none}
  .zw-sc-list{padding:0;gap:14px}
  .zw-sc .zw-sc-item:not(#zw),.zw-sc .zw-sc-item.on:not(#zw){min-height:0;opacity:1;transform:none;background:rgba(16,18,22,.86);border:1px solid var(--line);border-radius:24px;padding:22px;gap:10px}
  .zw-sc .zw-sc-item h2,.zw-sc .zw-sc-item h3,.zw-sc .zw-sc-item b{position:static;font-size:1.45rem}
  .zw-sc-mini{display:block;width:52px;height:52px;padding:10px;border-radius:16px;color:var(--g1);background:rgba(48,213,140,.08);border:1px solid rgba(48,213,140,.2)}
  .zw-sc-mini svg{width:100%;height:100%;display:block}
}

/* Ratgeber: jedes Kapitel ist eine Kachel mit gezeichneter Grafik */
.prose:has(.zw-ch){gap:24px}
.zw-ch{position:relative;scroll-margin-top:80px;display:flex;flex-direction:column;gap:22px;border:1px solid var(--line);border-radius:30px;padding:clamp(24px,4vw,44px);
  background:linear-gradient(170deg,rgba(20,23,28,.9),rgba(11,13,16,.86));overflow:hidden;margin-top:clamp(12px,2vw,24px)}
.zw-ch-ill{position:relative;width:clamp(76px,9vw,104px);aspect-ratio:1/1;border-radius:24px;display:grid;place-items:center;color:var(--g1);
  background:rgba(48,213,140,.07);border:1px solid rgba(48,213,140,.22)}
.zw-ch-ill i{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(48,213,140,.22),transparent 60%);pointer-events:none;opacity:0;transition:opacity 1.2s}
.zw-ch-ill.zw-drawn i{opacity:1}
.zw-ch-ill svg{position:relative;width:62%;height:62%;stroke-width:2}
.zw-ch-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.prose .zw-ch h2{margin-top:0;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.03em;text-wrap:balance}
.zw-lead{font:500 clamp(1.18rem,1.8vw,1.42rem)/1.45 var(--text);color:var(--fg);letter-spacing:-.01em}
.zw-more{display:flex;flex-direction:column;gap:18px}
.zw-more > summary{list-style:none;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--text);color:var(--fg);
  padding:12px 18px 12px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:background .3s,border-color .3s}
.zw-more > summary::-webkit-details-marker{display:none}
.zw-more > summary::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--g1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M9 5v8M5 9h8' stroke='%2306130c' stroke-width='2' stroke-linecap='round'/></svg>") center/100% no-repeat;transition:transform .35s}
.zw-more[open] > summary::before{transform:rotate(45deg)}
.zw-more > summary:hover{background:rgba(48,213,140,.1);border-color:rgba(48,213,140,.35)}
.zw-more[open] > :not(summary){animation:zwIn .55s cubic-bezier(.2,.8,.2,1) both}
.zw-more > :not(summary) + :not(summary){margin-top:0}
@keyframes zwIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toc a{transition:color .3s,padding .3s;border-left:2px solid transparent;padding-left:10px;margin-left:-12px}
.toc a.zw-act{color:var(--fg);border-left-color:var(--g1);padding-left:14px}
@media (max-width:860px){.zw-ch{border-radius:24px}.toc a{margin-left:0}}

/* Ablauf: Linie füllt sich, Schritte leuchten nacheinander auf */
.zw-steps{--sp:0;position:relative}
.zw-steps::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:calc(var(--sp)*100%);background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));box-shadow:0 0 14px rgba(46,230,192,.6);pointer-events:none}
.zw-steps li{transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.zw-steps li:not(.zw-lit-step){opacity:.4;transform:translateY(8px)}
.zw-steps li.zw-lit-step::before{text-shadow:0 0 24px rgba(48,213,140,.55)}
@media (max-width:860px){.zw-steps::after{left:-1px;top:0;width:2px;height:calc(var(--sp)*100%)}}
@media (prefers-reduced-motion:reduce){.zw-sc-glow{animation:none}.zw-d{transition:none;stroke-dashoffset:0}}