/* partitur-theme.css · Design-System "Partitur" fuer alle Unterseiten (Stand 28.09.2026)
   Wird NACH dem Inline-Style jeder Seite geladen und ueberschreibt nur Optik:
   Farben, Schriften, Nav, Hero, Buttons, Karten, Zitate, Footer.
   Layout, Inhalte und Skripte der Seiten bleiben unveraendert.
   Zuruecknehmen: die zwei <link>-Zeilen mit "partitur" aus dem <head> entfernen. */

:root{
  --night:#030A16; --night-2:#071730; --paper:#EEF3F7; --paper-2:#E1E9F0;
  --fog:#9DB0C3; --mist:#62778D; --signal:#47D4CF; --amber:#E3A857;
  --ink:#0B1B30; --muted:#4A5D73; --soft:#EEF3F7; --soft-2:#F6F9FB;
  --line:rgba(6,31,67,.12); --card:#fff;
  --blue:#00716C; --blue-hover:#005C58;
  --shadow:none; --shadow-soft:none;
  --radius-xl:10px; --radius-lg:8px; --radius-md:6px;
  --max:1080px;
  --p-sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --p-serif:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --p-mono:"Fragment Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --p-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Grundlage ---------- */
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--p-sans); color:var(--ink); background:#fff; font-feature-settings:"ss01","kern"; }
::selection{ background:var(--signal); color:var(--night); }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }
h1,h2,h3,h4{ font-family:var(--p-sans); }

/* ---------- Navigation: Nacht, Teal-Pille ---------- */
.nav-wrap{ background:rgba(3,10,22,.9); border-bottom:1px solid rgba(157,176,195,.14); }
.nav-wrap .logo{ color:#EAF2F7; }
.nav-wrap .logo-image{ filter:brightness(0) invert(1); }
.nav-wrap .nav-links{ color:rgba(234,242,247,.78); font-size:14px; letter-spacing:.005em; }
.nav-wrap .nav-links a:hover, .nav-wrap .nav-drop-t:hover{ color:#fff; opacity:1; }
.nav-wrap .nav-cta{ background:var(--teal); color:var(--night); font-weight:600; letter-spacing:.01em; border-radius:999px; }
.nav-wrap .nav-cta:hover{ background:var(--signal); }
.nav-drop-menu{ background:rgba(7,23,48,.96); border-color:rgba(157,176,195,.18); border-radius:10px; }

/* ---------- Hero: Nacht mit fuenf Notenlinien ---------- */
.hero{ background:radial-gradient(120% 90% at 85% 0%, #0A2C5D 0%, transparent 55%), linear-gradient(170deg,#061F43 0%, var(--night) 70%); color:#EAF2F7; isolation:isolate; }
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:18%; height:84px; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(71,212,207,.16) 0 1px, transparent 1px 21px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.hero .shell{ position:relative; z-index:2; }
.hero .orbital{ opacity:.55; }
.hero h1{ color:#EAF2F7; font-weight:600; letter-spacing:-.035em; line-height:1.04; }
.hero .grad, .grad{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--signal); -webkit-text-fill-color:currentColor;
  font-family:var(--p-serif); font-style:italic; font-weight:500; letter-spacing:-.01em;
}
.hero .standfirst, .hero .sub, .hero p{ color:rgba(234,242,247,.8); }
.hero .meta{ color:var(--fog); font-family:var(--p-mono); font-size:12.5px; letter-spacing:.04em; }
.hero .meta .by{ color:#EAF2F7; font-family:var(--p-sans); font-size:14px; letter-spacing:0; }
.hero .meta .dot{ background:var(--signal); opacity:.6; }

/* ---------- Kleine Ueberschriften in Mono ---------- */
.eyebrow, .kicker, .rel-card .cat, .callout .tag, .author .tag, .reason h4, .checklist .dim, .tag, .cat{
  font-family:var(--p-mono); font-weight:400; letter-spacing:.12em; text-transform:uppercase;
}
.eyebrow{ font-size:12px; color:var(--signal); background:none; border:0; box-shadow:none; padding:0; border-radius:0; }
.eyebrow::before{ content:none; }
.kicker{ font-size:12px; color:var(--teal-ink); }
.hero .kicker{ color:var(--signal); }

/* ---------- Lesetext ---------- */
.prose > p, .prose ul li{ color:#1E2F45; }
.prose .lead-p{ color:var(--ink); font-weight:450; }
.prose h2{ color:var(--navy); font-weight:600; letter-spacing:-.025em; }
.prose h3{ color:var(--navy-2); font-weight:600; letter-spacing:-.015em; }
.prose strong{ font-weight:600; }
.prose ul li::before{ width:14px; height:1.5px; border-radius:0; top:13px; left:2px; background:var(--teal); }
.prose a.inline{ color:var(--teal-ink); border-bottom-color:rgba(0,113,108,.35); }

.acr{ font-family:var(--p-sans); font-style:italic; font-weight:500; letter-spacing:-.01em; font-size:.92em; }

/* Zitate als Bodoni-Kursive */
blockquote.pull{ border-left:2px solid var(--teal); padding-left:28px; font-family:var(--p-serif); font-style:italic; font-weight:500; font-size:clamp(24px,2.6vw,30px); line-height:1.28; letter-spacing:-.01em; color:var(--navy); }
blockquote.pull p{ font-family:var(--p-serif); font-style:italic; font-weight:500; font-size:clamp(24px,2.6vw,30px); line-height:1.28; letter-spacing:-.01em; color:var(--navy); }
blockquote.pull cite{ font-family:var(--p-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---------- Karten werden zu Linien ---------- */
.rel-card, .reason, .stat, .callout, .checklist, .figure, .author .box{
  border-radius:var(--radius-lg); box-shadow:none; border:1px solid var(--line);
}
.rel-card{ background:#fff; transition:border-color .25s var(--p-ease), transform .25s var(--p-ease); position:relative; }
.rel-card:hover{ transform:translateY(-2px); box-shadow:none; border-color:var(--teal); }
.rel-card h3{ font-weight:600; letter-spacing:-.015em; }
.stat .num{ font-family:var(--p-serif); font-style:italic; font-weight:500; font-size:clamp(34px,3.4vw,42px); letter-spacing:-.02em; color:var(--teal-ink); font-variant-numeric:lining-nums; }
.reason .no, .checklist .qno{ font-family:var(--p-mono); font-weight:400; }
.reason .no{ background:var(--night); color:var(--signal); }
.checklist .qno{ background:var(--teal); color:var(--night); }
.author img{ box-shadow:none; filter:grayscale(.15); }
.related{ background:var(--paper); }
.related h2{ font-weight:600; letter-spacing:-.02em; }

/* Takeaways als Nachtband mit Linien */
.takeaways .band{ background:linear-gradient(170deg,#061F43 0%, var(--night) 100%); border-radius:var(--radius-xl); position:relative; overflow:hidden; }
.takeaways .band::after{
  content:""; position:absolute; right:-10%; top:22px; width:60%; height:84px; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(71,212,207,.14) 0 1px, transparent 1px 21px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 60%); mask-image:linear-gradient(90deg, transparent, #000 60%);
}
.takeaways .band > *{ position:relative; z-index:1; }
.takeaways .band li::before{ width:14px; height:1.5px; border-radius:0; top:12px; background:var(--signal); }

/* Bereiche und FAQ */
.block.alt{ background:var(--paper); }
.faq h2{ font-weight:600; letter-spacing:-.02em; }
.faq h3{ font-weight:600 !important; letter-spacing:-.01em; }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--p-sans); font-weight:600; letter-spacing:.005em; border-radius:999px; transition:transform .25s var(--p-ease), background .2s ease, color .2s ease, border-color .2s ease; }
.btn-primary{ background:var(--teal); color:var(--night); }
.btn-primary:hover{ background:var(--signal); color:var(--night); transform:translateY(-1px); }
.btn-ghost{ background:transparent; border:1px solid currentColor; }
.sc-float{ background:var(--teal); color:var(--night); font-family:var(--p-sans); font-weight:600; box-shadow:0 10px 30px rgba(3,10,22,.35); }
.sc-float:hover{ background:var(--signal); }

/* ---------- Abschluss-CTA ---------- */
.cta-final{ background:radial-gradient(90% 120% at 50% 0%, #0A2C5D 0%, transparent 60%), var(--night); position:relative; overflow:hidden; }
.cta-final::before{
  content:""; position:absolute; left:0; right:0; top:30px; height:84px; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(71,212,207,.12) 0 1px, transparent 1px 21px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.cta-final > *{ position:relative; }
.cta-final h2{ font-weight:600; letter-spacing:-.03em; color:#EAF2F7; }
.cta-final p{ color:rgba(234,242,247,.78); }

/* ---------- Footer ---------- */
footer{ background:var(--night); color:var(--fog); border-top:1px solid rgba(157,176,195,.12); }
footer a{ color:var(--fog); }
footer a:hover{ color:#fff; }
footer strong{ color:#EAF2F7; font-weight:600; }
footer .footer-nav{ color:var(--mist) !important; padding-bottom:22px !important; margin-bottom:22px; border-bottom:1px solid rgba(157,176,195,.12); font-family:var(--p-mono); letter-spacing:.04em; }

/* ---------- Rechtsseiten (legal.css) ---------- */
.legal-layout .toc, .content-card{ box-shadow:none; border:1px solid var(--line); border-radius:var(--radius-xl); background:#fff; }
.content-card h2{ letter-spacing:-.03em; font-weight:600; }
.content-card p, .content-card li{ color:#1E2F45; }
.skip-link{ background:var(--night); }

/* ---------- Seitenuebergaenge (Chrome, Edge, Safari 18.2+) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:.28s var(--p-ease) both p-vt-out; }
::view-transition-new(root){ animation:.42s var(--p-ease) both p-vt-in; }
@keyframes p-vt-out{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes p-vt-in{ from{ opacity:0; transform:translateY(12px); } }

/* ---------- Hero-Auftritt ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero .shell > *{ animation:p-rise .9s var(--p-ease) both; }
  .hero .shell > *:nth-child(2){ animation-delay:.08s; }
  .hero .shell > *:nth-child(3){ animation-delay:.16s; }
  .hero .shell > *:nth-child(n+4){ animation-delay:.24s; }
  .hero::after{ animation:p-lines 1.6s var(--p-ease) both .2s; }
}
@keyframes p-rise{ from{ opacity:0; transform:translateY(18px); } }
@keyframes p-lines{ from{ opacity:0; transform:scaleX(.4); } }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  *{ scroll-behavior:auto !important; }
}

@media print{
  .nav-wrap, .sc-float, .hero::after, .cta-final::before{ display:none !important; }
  .hero{ background:none; color:#000; }
  .hero h1, .hero p, .hero .grad{ color:#000; -webkit-text-fill-color:#000; }
}