/* Neu in Nurelio (#315) — Zeitleiste „Abgehakt“ (Claude-Design, Konzept A).
   Startseiten-Abschnitt + Seite /neu/, gebaut von scripts/build-website-neu.js.
   Farben kommen aus den Seiten-Tokens (Startseite bzw. ratgeber.css), daher Light + Dark.
   Responsiv über Container-Queries auf .nu. */

/* Tokens, die ratgeber.css (Schale der Seite /neu/) nicht mitbringt — Werte wie Startseite */
[data-theme="dark"]{--success-soft:rgba(56,184,115,.16);--warning:#e0a838;--violet:#9a82ff;--violet-soft:rgba(154,130,255,.18);--ink:#0a0f18;--on-ink-dim:#8fa2bd;--sh-phone:0 40px 80px rgba(0,0,0,.6)}

.nu{--ring:var(--bg);--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;container:nu/inline-size;color:var(--text);font-size:18px;line-height:1.6;hyphens:auto;overflow-wrap:break-word}
.nu *,.nu *::before,.nu *::after{box-sizing:border-box}
.nu h1,.nu h2,.nu h3,.nu h4,.nu p,.nu figure{margin:0}
.nu h1,.nu h2,.nu h3,.nu h4{font-weight:800;letter-spacing:-.022em;text-wrap:balance;hyphens:manual;color:var(--text)}
.nu p{text-wrap:pretty}
.nu a{color:var(--accent);text-decoration:none}.nu a:hover{color:var(--accent-hover)}
.nu :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
.nu :where(ol,ul){list-style:none;margin:0;padding:0}
.nu img{display:block;max-width:100%}
.nu [hidden]{display:none!important}
.nu-wrap{max-width:var(--maxw,1180px);margin:0 auto;padding:0 24px}
.nu-kicker{font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px!important}
.nu-lead{color:var(--text-dim);font-size:19px;line-height:1.62;max-width:60ch;margin-top:16px!important}
.nu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons — geben beim Tippen nach, wie „Genommen“ */
.nu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:17px;line-height:1.25;border:1.5px solid transparent;text-align:center;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.nu-btn svg{width:18px;height:18px;flex:none}
.nu .nu-btn--primary{background:var(--accent);color:#fff;box-shadow:var(--sh-cta)}.nu .nu-btn--primary:hover{background:var(--accent-hover);color:#fff}
.nu .nu-btn--ghost{background:var(--card);color:var(--text);border-color:var(--border-strong)}.nu .nu-btn--ghost:hover{border-color:var(--text);color:var(--text)}
.nu-btn:active,.nu-filter:active,.nu-store:active{transform:scale(.97)}

/* „Neu“-Punkt am Navigationseintrag */
.nu-new{position:relative}.nu-new::after{content:"";position:absolute;right:-10px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* Meta-Zeile */
.nu-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:15px;font-weight:600;color:var(--text-dim);line-height:1.35;margin-bottom:8px!important}
.nu-meta time{font-family:var(--mono);font-weight:500}
.nu-area{display:inline-flex;align-items:center;gap:8px}
.nu-area i,.nu-filter i{width:10px;height:10px;border-radius:3px;flex:none}
.nu-art,.nu-prem{padding:3px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--border)}
.nu-art--store{background:var(--accent-soft);border-color:transparent;color:var(--accent-deep)}
.nu-prem{background:var(--violet-soft);border-color:transparent;color:var(--violet)}

/* Zeitleiste */
.nu-tl{position:relative;display:grid;gap:20px;padding-left:52px}
.nu-tl::before{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--border-strong)}
.nu-item{position:relative}
.nu-node{position:absolute;left:-52px;top:22px;width:36px;height:36px;border-radius:50%;background:var(--success);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px var(--ring)}
.nu-node svg{width:20px;height:20px}
.nu-ck{stroke-dasharray:24;stroke-dashoffset:0}
.nu-node--ver,.nu-node--start{left:-56px;width:44px;height:44px;background:var(--accent);font:700 15px/1 var(--mono);letter-spacing:-.03em}
.nu-node--start{background:var(--text);color:var(--bg)}
.nu-card{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:20px 20px 22px;box-shadow:var(--sh-card)}
.nu-card h3{font-size:22px;line-height:1.3;font-weight:700}
.nu-card>p:not(.nu-meta){margin-top:8px;color:var(--text-dim)}

/* Versions-Block */
.nu-rel{background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--sh-soft);overflow:hidden}
.nu-rel__head{padding:20px 20px 18px;background:var(--accent-soft)}
.nu-rel__head h3{font-size:26px;line-height:1.2}
.nu-rel__body{display:grid;gap:8px;padding:4px 20px 22px}
.nu-sub{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--border)}
.nu-subs>.nu-sub:first-child,.nu-subs>.nu-sub[hidden]+.nu-sub{border-top:0}
.nu-subck{width:28px;height:28px;border-radius:50%;background:var(--success-soft);color:var(--success);display:grid;place-items:center;margin-top:1px}
.nu-subck svg{width:16px;height:16px}
.nu-sub .nu-meta{margin-bottom:4px!important}
.nu-sub h4{font-size:20px;line-height:1.3;font-weight:700}
.nu-sub h4+p{margin-top:6px;color:var(--text-dim)}
.nu-dev{justify-self:center;order:-1;padding:20px 0 6px}

/* Geräterahmen */
.nu-phone{position:relative;width:var(--pw,200px);aspect-ratio:320/662;border-radius:calc(var(--pw,200px)*.1375);background:#0a0e16;padding:calc(var(--pw,200px)*.034);box-shadow:var(--sh-phone);border:1px solid rgba(255,255,255,.06);flex:none}
.nu-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--pw,200px)*.105)}

/* Seite */
.nu-head{padding-top:36px;padding-bottom:28px}
.nu-crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:15px;color:var(--text-dim);margin-bottom:20px}
.nu .nu-crumbs a{color:var(--text-dim);text-decoration:underline;text-underline-offset:3px}
.nu-head h1{font-size:42px;line-height:1.05;letter-spacing:-.03em}
.nu-updated{margin-top:18px!important;font-size:15px;color:var(--text-dim)}
.nu-updated time{font-family:var(--mono)}
.nu-body{display:grid;gap:28px;padding-bottom:56px}
.nu-label{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px!important}
.nu-filters{display:flex;flex-wrap:wrap;gap:10px}
.nu-filter{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--card);color:var(--text);font-weight:600;font-size:16px;line-height:1.25;font-family:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s,color .15s,transform .15s}
.nu-filter:hover{border-color:var(--text)}
.nu-filter[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.nu-filter[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--bg)}
.nu-months{display:none}
.nu-month+.nu-month{margin-top:44px}
.nu-month__h{font-size:26px;line-height:1.2;margin-bottom:20px!important}
.nu-end{padding-bottom:64px}
.nu-endpanel{background:var(--ink);border:1px solid var(--border);border-radius:28px;padding:32px 24px;display:grid;gap:24px}
.nu-endpanel h2{color:#fff;font-size:28px;line-height:1.15}
.nu-endpanel p{color:var(--on-ink-dim);margin-top:10px!important;max-width:52ch}
.nu-stores{display:flex;flex-wrap:wrap;gap:12px}
.nu .nu-store{display:inline-flex;flex-direction:column;justify-content:center;min-height:58px;padding:8px 22px;border-radius:15px;background:#fff;color:#102036;font-weight:700;font-size:18px;line-height:1.15;transition:transform .15s}
.nu-store small{font-weight:500;font-size:14px;color:#5a6c84}

/* Startseiten-Abschnitt */
.nu-thead{display:grid;gap:22px;margin-bottom:32px}
.nu-thead h2{font-size:34px;line-height:1.08}
.nu-thead__cta{display:none!important;justify-self:start}
.nu-tgrid{display:grid;gap:40px;align-items:center}
.nu-stage{display:none;position:relative;justify-content:center;padding:28px 0}
.nu-glow{position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,var(--accent-soft),transparent 72%)}
.nu-stage .nu-phone{--pw:290px}
.nu-annot{position:absolute;z-index:2;display:flex;gap:12px;align-items:flex-start;max-width:290px;padding:14px 18px 14px 14px;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--sh-soft)}
.nu-annot--1{left:0;top:15%}.nu-annot--2{right:0;bottom:16%}
.nu-annot__ic{width:30px;height:30px;border-radius:50%;background:var(--success-soft);color:var(--success);display:grid;place-items:center;flex:none}
.nu-annot__ic svg{width:16px;height:16px}
.nu-annot__k{display:block;font-size:14px;font-weight:700;color:var(--accent)}
.nu-annot__t{display:block;font-size:17px;font-weight:700;line-height:1.3;margin-top:2px;hyphens:manual}
.nu-panel{--ring:var(--card);background:var(--card);border:1px solid var(--border);border-radius:28px;padding:26px 22px 24px;box-shadow:var(--sh-soft)}
.nu-panel__t{font-size:22px;margin-bottom:22px!important}
.nu-tl--compact{gap:26px}
.nu-tl--compact .nu-card{background:none;border:0;box-shadow:none;padding:0;border-radius:4px}
.nu-tl--compact .nu-node{top:0}
.nu-tl--compact .nu-card h3{font-size:20px}
.nu-panel__cta{margin-top:28px;width:100%}
/* Dunkel über der Aura der Startseite: Glas wie die übrigen Karten */
[data-theme="dark"] .nu-teaser .nu-panel,[data-theme="dark"] .nu-teaser .nu-annot{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
[data-theme="dark"] .nu-teaser .nu-panel{--ring:transparent}

/* Bewegung */
.nu-anim .nu-item{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.nu-anim .nu-item.is-in{opacity:1;transform:none}
.nu-anim .nu-item .nu-ck{stroke-dashoffset:24;transition:stroke-dashoffset .45s ease .25s}
.nu-anim .nu-item.is-in .nu-ck{stroke-dashoffset:0}
.nu-anim .nu-sub .nu-ck{transition-delay:calc(.4s + var(--i,0)*.12s)}
.nu-show{animation:nu-show .35s ease both}
@keyframes nu-show{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.nu *,.nu *::before,.nu *::after{animation:none!important;transition:none!important}.nu-anim .nu-item{opacity:1;transform:none}.nu-anim .nu-item .nu-ck{stroke-dashoffset:0}}

/* ≥ 700 px */
@container nu (min-width:700px){
.nu-card{padding:24px 28px 26px}
.nu-rel__head{padding:24px 28px 20px}
.nu-rel__body{grid-template-columns:minmax(0,1fr) 210px;align-items:start;gap:32px;padding:4px 28px 26px}
.nu-dev{order:0;position:sticky;top:110px;padding:24px 0 0}
.nu-head h1{font-size:54px}
.nu-endpanel{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:40px 44px}
.nu-thead{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px}
.nu-thead h2{font-size:42px}
.nu-thead__cta{display:inline-flex!important}
.nu-panel__cta{display:none}
.nu-panel{padding:32px 34px 34px}
}
/* ≥ 1000 px */
@container nu (min-width:1000px){
.nu-head{padding-top:64px;padding-bottom:48px}
.nu-head h1{font-size:66px}
.nu-body{grid-template-columns:260px minmax(0,1fr);gap:64px;padding-bottom:96px}
.nu-rail__in{position:sticky;top:110px}
.nu-filters{flex-direction:column;align-items:stretch}
.nu-filter{border-radius:14px}
.nu-months{display:grid;gap:2px;margin-top:36px}
.nu .nu-months a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:8px 14px;border-radius:12px;color:var(--text);font-weight:600;font-size:16px}
.nu .nu-months a:hover{background:var(--card);color:var(--text)}
.nu-months small{font:500 14px var(--mono);color:var(--text-dim)}
.nu-tl{padding-left:64px}
.nu-node{left:-64px}.nu-node--ver,.nu-node--start{left:-68px}
.nu-tl--compact{padding-left:56px}.nu-tl--compact .nu-node{left:-56px}
.nu-month__h{font-size:30px}
.nu-thead{margin-bottom:44px}
.nu-thead h2{font-size:46px}
.nu-tgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.nu-stage{display:flex}
}

/* Bewegter Hintergrund auf /neu/ wie auf der Startseite (aura-override in index.html). Nur body.nu-aura:
   die Startseite lädt diese Datei auch und hat ihre eigenen Regeln. */
[data-theme="dark"] body.nu-aura{position:relative;isolation:isolate;min-height:100vh;overflow-x:clip;background:#050505 !important;background-image:none !important}
.nu-aura .aura-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:-4;pointer-events:none;filter:blur(8px);transform:scale(1.04);will-change:transform}
.nu-aura .aura-grid{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:78px 78px;transform:perspective(900px) rotateX(62deg) translateY(12vh) scale(1.35);transform-origin:center bottom;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 48%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 48%,transparent 100%)}
.nu-aura .aura-noise{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.22;background-image:repeating-radial-gradient(circle at 17% 23%,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;-webkit-mask-image:radial-gradient(circle at center,black,transparent 72%);mask-image:radial-gradient(circle at center,black,transparent 72%)}
.nu-aura .aura-vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.82) 100%),linear-gradient(to bottom,rgba(0,0,0,.35),transparent 36%,rgba(0,0,0,.55))}
[data-theme="dark"] .nu-aura .nav-inner,[data-theme="dark"] .nu-aura .nu-card,[data-theme="dark"] .nu-aura .nu-rel,[data-theme="dark"] .nu-aura .nu-filter:not([aria-pressed="true"]),[data-theme="dark"] .nu-aura .nu-endpanel{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.12) !important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@media (prefers-reduced-motion:reduce){
.nu-aura .aura-canvas{display:none}
[data-theme="dark"] body.nu-aura{background:radial-gradient(circle at 20% 20%,rgba(168,85,247,.22),transparent 32%),radial-gradient(circle at 80% 10%,rgba(99,102,241,.18),transparent 32%),#050505 !important}
}