/* ============================================================
   INFINITIO HOLDING — «Constellation» Website v4.0
   Dark-first Neuinterpretation des CI (Brand Book v1.0):
   Void/Ink-Flächen, Steel-Text, Petrol als einziges Signal.
   Kein Inline-CSS im Markup → strikte CSP möglich.
   ============================================================ */

/* ---------- Fonts (Subsets, lokal) ---------- */
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'JBM'; src:url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JBM'; src:url('../fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  /* Flächen (dunkel) */
  --void:#101216;          /* Seitengrund */
  --ink:#1A1D21;           /* Surface — CI-Ink */
  --line:#262B33;          /* Haarlinien dunkel */
  --line-soft:#1E2229;
  /* Licht-Kontrastblock */
  --steel:#EDEFF2; --white:#FFFFFF; --hair:#D6DAE0;
  /* Text */
  --txt:#EDEFF2; --muted:#8B939C; --dim:#5C646E;
  --txt-inv:#1A1D21; --muted-inv:#4A4F56;
  /* Signal */
  --petrol:#00808C; --petrol-l:#4FB3BD; --petrol-dk:#006974;
  /* Typo */
  --font-sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JBM','SFMono-Regular',Consolas,monospace;
  /* Layout */
  --maxw:1240px; --gutter:clamp(20px,4vw,48px); --radius:12px;
  --header-h:76px;
  --header-bg:rgba(16,18,22,.72); --header-bg-solid:rgba(16,18,22,.9);
  --overlay:rgba(16,18,22,.55); --modal-shadow:0 24px 80px rgba(0,0,0,.55);
  --grain:.05;
}

/* ---------- Light-Theme: invertierte Flächenlogik im CI-Farbraum ---------- */
html[data-theme="light"] {
  --void:#EDEFF2;          /* Seitengrund = Steel */
  --ink:#FFFFFF;           /* Surfaces = Weiss */
  --line:#D6DAE0; --line-soft:#E2E5EA;
  --txt:#1A1D21; --muted:#4A4F56; --dim:#8B939C;
  --header-bg:rgba(237,239,242,.78); --header-bg-solid:rgba(237,239,242,.92);
  --overlay:rgba(237,239,242,.6); --modal-shadow:0 24px 70px rgba(26,29,33,.18);
  --grain:.03;
}
html[data-theme="light"] .sheet.on-light { background:#FFFFFF; }
html[data-theme="light"] .index { border-top-color:var(--hair); }
html[data-theme="light"] ::selection { background:var(--petrol); color:#fff; }

/* ---------- Reset & Basis ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-sans); font-weight:400; font-size:17px; line-height:1.62;
  background:var(--void); color:var(--txt); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Subtiles Korn — Tiefe ohne Verlauf */
body::before {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
img, svg, canvas { display:block; max-width:100%; }
a { color:var(--petrol-l); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--petrol-l); outline-offset:3px; border-radius:2px; }
a, button { -webkit-tap-highlight-color:transparent; }
.btn, .lang, .menu a, .index-row, .backlink { touch-action:manipulation; }
::selection { background:var(--petrol); color:#fff; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; }
.mono { font-family:var(--font-mono); }
.eyebrow {
  font-family:var(--font-mono); font-weight:500; font-size:11.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--petrol-l);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before { content:""; width:28px; height:1px; background:var(--petrol); flex:0 0 auto; }

h2.display {
  font-weight:600; font-size:clamp(34px,4.6vw,58px); line-height:1.04;
  letter-spacing:-.015em; color:var(--txt);
}
p { color:var(--muted); }
.small { font-size:13.5px; color:var(--dim); }

.btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--petrol); color:#fff; border:1px solid var(--petrol);
  font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; padding:16px 28px; border-radius:8px; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
  will-change:transform;
}
.btn:hover { background:var(--petrol-dk); border-color:var(--petrol-dk); text-decoration:none; }
.btn.ghost { background:transparent; color:var(--txt); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--muted); background:transparent; }
.btn .arr { transition:transform .18s ease; }
.btn:hover .arr { transform:translateX(4px); }

/* Skip-Link */
.skip { position:absolute; left:-9999px; }
.skip:focus {
  position:fixed; left:16px; top:16px; z-index:300;
  background:var(--steel); color:var(--txt-inv); padding:10px 16px; border-radius:6px;
}

/* ============================================================
   HEADER + SCROLL-PROGRESS
   ============================================================ */
.site-header {
  position:fixed; inset-inline:0; top:0; z-index:80; height:var(--header-h);
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.site-header.scrolled { border-bottom-color:var(--line-soft); background:var(--header-bg-solid); }
.nav { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--txt); }
.brand:hover { text-decoration:none; }
.brand .glyph { height:32px; width:auto; color:var(--txt); }
.brand-text { line-height:1.05; }
.brand-text b { font-weight:500; font-size:16px; letter-spacing:.15em; display:block; color:var(--txt); }
.brand-text span { font-family:var(--font-mono); font-size:8px; letter-spacing:.44em; color:var(--dim); }

.menu { display:flex; gap:6px; align-items:center; }
.menu a {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; padding:10px 12px; border-radius:6px;
  transition:color .15s ease, background .15s ease;
}
.menu a i { font-style:normal; color:var(--dim); margin-right:6px; transition:color .15s ease; }
.menu a:hover { color:var(--txt); text-decoration:none; background:rgba(237,239,242,.05); }
.menu a.active { color:var(--txt); }
.menu a.active i { color:var(--petrol-l); }
.menu .btn { margin-left:14px; padding:11px 18px; }
.menu a.btn { color:#fff; }
.menu a.btn:hover { color:#fff; background:var(--petrol-dk); }
.menu-tools { display:contents; }

.progress { transition:opacity .2s ease; position:fixed; top:var(--header-h); left:0; z-index:81; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--petrol); }

.nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:10px 12px; cursor:pointer; }
.nav-toggle .bar { display:block; width:20px; height:2px; background:var(--txt); margin:4px 0; transition:transform .2s ease, opacity .2s ease; }

@media (max-width:880px) {
  .nav-toggle { display:block; }
  .menu {
    position:absolute; left:0; right:0; top:var(--header-h);
    display:block;
    background:var(--void);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(0,0,0,.35);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .menu.open { max-height:calc(100svh - var(--header-h)); overflow-y:auto; }
  html.nav-open .progress { opacity:0; }
  .menu a {
    display:flex; align-items:center; min-height:56px;
    padding:0 var(--gutter); border-bottom:1px solid var(--line-soft);
    border-radius:0; font-size:12px; letter-spacing:.18em;
  }
  .menu a i { margin-right:12px; }
  .menu a.btn {
    margin:18px var(--gutter) 10px; min-height:54px; justify-content:center;
    padding:0 20px; border-radius:10px; border-bottom:none; letter-spacing:.2em;
  }
  .menu-tools {
    display:flex; gap:10px;
    padding:0 var(--gutter) calc(20px + env(safe-area-inset-bottom));
  }
  .menu-tools .lang {
    flex:1; margin:0; justify-content:center; min-height:52px;
    border-radius:10px; font-size:11px; letter-spacing:.2em;
  }
  .menu-tools .lang svg { width:19px; height:19px; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
}

/* ============================================================
   HERO — der Satz wird zum Knoten
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--header-h) + 48px) 0 120px; }
.hero .net-canvas, .hero .net-static { position:absolute; inset:0; width:100%; height:100%; }
.hero .wrap { z-index:2; }
.hero-eyebrow { margin-bottom:28px; }
.hero-title {
  font-weight:600; font-size:clamp(52px,9.2vw,124px); line-height:.98;
  letter-spacing:-.022em; color:var(--txt);
}
.hero-title .line { display:block; overflow:hidden; }
.hero-title .line > span { display:inline-block; }
.accent-w { color:var(--petrol-l); }
.hero-title em, .hero-title i { font-style:normal; }
/* Signatur: der Schlusspunkt als lebender Node */
.node-dot {
  display:inline-block; width:.34em; height:.34em; border-radius:50%;
  background:var(--petrol); margin-left:.09em; transform:translateY(-.04em);
  position:relative;
}
.node-dot::after {
  content:""; position:absolute; inset:-58%; border-radius:50%;
  background:var(--petrol); opacity:.22;
}
@media (prefers-reduced-motion:no-preference) {
  .node-dot::after { animation:node-halo 2.6s ease-in-out infinite; }
  @keyframes node-halo { 0%,100%{ transform:scale(.75); opacity:.26 } 50%{ transform:scale(1.15); opacity:.1 } }
}
.hero-sub { margin-top:30px; max-width:520px; font-size:18px; color:var(--muted); }
.hero .cta { display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }

.hero-meta {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid var(--line-soft);
}
.hero-meta .wrap {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-block:16px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.22em; color:var(--dim); text-transform:uppercase;
}
.hero-meta .coord i { font-style:normal; color:var(--petrol-l); }
.scroll-hint { display:flex; align-items:center; gap:10px; }
.scroll-hint .rail { width:36px; height:2px; background:var(--line); position:relative; overflow:hidden; }
.scroll-hint .dot { position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%; background:var(--petrol); }
@media (prefers-reduced-motion:no-preference) {
  .scroll-hint .dot { animation:hint-slide 1.9s ease-in-out infinite; }
  @keyframes hint-slide { 0%{transform:translateX(-8px);opacity:0} 25%{opacity:1} 80%{opacity:1} 100%{transform:translateX(40px);opacity:0} }
}
@media (max-width:640px) { .hero-meta .coord { display:none; } }

/* Titel-Reveal */
@media (prefers-reduced-motion:no-preference) {
  .js .hero-title .line > span { transform:translateY(112%); animation:line-up .85s cubic-bezier(.2,.7,.2,1) forwards; }
  .js .hero-title .line:nth-child(2) > span { animation-delay:.1s; }
  .js .hero-eyebrow, .js .hero-sub, .js .hero .cta { opacity:0; animation:fade-up .7s ease forwards; }
  .js .hero-sub { animation-delay:.35s; }
  .js .hero .cta { animation-delay:.5s; }
  @keyframes line-up { to { transform:translateY(0); } }
  @keyframes fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
}

/* ---------- Canvas / statischer Fallback ---------- */
.net-canvas { pointer-events:none; }
.net-static { display:none; pointer-events:none; }
.no-js .net-canvas { display:none; }
.no-js .net-static { display:block; }
@media (prefers-reduced-motion:reduce) {
  .net-canvas { display:none; }
  .net-static { display:block; }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block:1px solid var(--line-soft); overflow:hidden; padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display:flex; width:max-content; }
.ticker-group { display:flex; align-items:center; flex:0 0 auto; }
.ticker-group span {
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
.ticker-group .sep { color:var(--petrol); margin:0 1.8em; letter-spacing:0; }
.ticker-track { will-change:transform; }

/* ============================================================
   SEKTIONS-GERÜST — kartografische Marginalie
   ============================================================ */
.sheet { position:relative; padding:120px 0; }
.sheet.on-light { background:var(--steel); color:var(--txt-inv); }
.sheet-grid { display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,5vw,72px); }
.margin-col { position:relative; }
.margin-inner { position:sticky; top:calc(var(--header-h) + 32px); }
.sheet-code {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.26em;
  color:var(--dim); text-transform:uppercase; display:block;
}
.on-light .sheet-code { color:var(--muted-inv); opacity:.7; }
.sheet-rail { margin-top:18px; width:1px; height:120px; background:var(--line); position:relative; }
.sheet-rail::after { content:""; position:absolute; left:-3.5px; top:0; width:8px; height:8px; border-radius:50%; background:var(--petrol); }
.on-light .sheet-rail { background:var(--hair); }
/* Registermarken an den Blattecken */
.sheet .crop { position:absolute; width:14px; height:14px; border-color:var(--line); border-style:solid; opacity:.9; }
.sheet .crop.tl { top:28px; left:var(--gutter); border-width:1px 0 0 1px; }
.sheet .crop.br { bottom:28px; right:var(--gutter); border-width:0 1px 1px 0; }
.on-light .crop { border-color:var(--hair); }
.sec-head h2 { margin-top:16px; }
.sec-head .lede { margin-top:22px; max-width:600px; font-size:19px; line-height:1.6; color:var(--muted); }
.on-light .sec-head .lede { color:var(--muted-inv); }
@media (max-width:880px) {
  .sheet { padding:84px 0; }
  .sheet-grid { grid-template-columns:1fr; gap:28px; }
  .margin-inner { position:static; display:flex; align-items:center; gap:16px; }
  .sheet-rail { margin-top:0; width:64px; height:1px; }
  .sheet-rail::after { left:auto; right:0; top:-3.5px; }
}

/* ============================================================
   01 HOLDING — Prinzipien als Zeilen
   ============================================================ */
.principles { margin-top:56px; border-top:1px solid var(--line); }
.principle { display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:20px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.principle h3 { font-weight:600; font-size:24px; letter-spacing:-.01em; display:flex; align-items:center; gap:14px; }
.principle h3 .p-node { width:9px; height:9px; border-radius:50%; background:var(--petrol); flex:0 0 auto; }
.principle p { font-size:15.5px; max-width:560px; }
@media (max-width:640px) { .principle { grid-template-columns:1fr; gap:8px; } }

/* ============================================================
   02 BERATUNG — Index-Zeilen auf Steel
   ============================================================ */
.index { border-top:1px solid var(--hair); margin-top:56px; }
.index-row {
  display:grid; grid-template-columns:56px minmax(220px,1fr) 1.2fr 40px;
  gap:20px; align-items:center; padding:30px 0 30px 26px; border-bottom:1px solid var(--hair);
  position:relative; color:inherit; text-decoration:none;
}
.index-row:hover, .index-row:focus-visible { text-decoration:none; }
.index-row::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--petrol); transform:scaleY(0); transform-origin:top;
  transition:transform .28s ease;
}
.index-row:hover::before { transform:scaleY(1); }
.index-row .no { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--muted-inv); opacity:.65; }
.index-row h3 { font-weight:600; font-size:clamp(20px,2.4vw,27px); letter-spacing:-.01em; color:var(--txt-inv); transition:transform .28s ease; }
.index-row:hover h3 { transform:translateX(10px); }
.index-row p { font-size:15px; color:var(--muted-inv); }
.index-row .go { font-family:var(--font-mono); color:var(--petrol); opacity:0; transform:translateX(-8px); transition:opacity .28s ease, transform .28s ease; }
.index-row:hover .go { opacity:1; transform:none; }
@media (max-width:880px) {
  .index-row { grid-template-columns:40px 1fr; grid-template-rows:auto auto; padding-left:20px; gap:12px 16px; }
  .index-row p { grid-column:2; }
  .index-row .go { display:none; }
  .index-row:hover h3 { transform:none; }
}

/* ============================================================
   03 STRUKTUR — technisches Blatt
   ============================================================ */
.schema { margin-top:56px; background:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,48px); position:relative; }
.schema .plate-label { position:absolute; top:14px; right:18px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; color:var(--dim); text-transform:uppercase; }
.s-root { display:flex; align-items:center; gap:16px; justify-content:center; max-width:440px; margin-inline:auto; padding:20px 28px; background:var(--void); border:1px solid var(--line); border-radius:10px; }
.s-dot { flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:var(--petrol); }
.s-dot.sm { width:10px; height:10px; background:var(--txt); }
.s-title { font-weight:600; font-size:18px; line-height:1.25; color:var(--txt); }
.s-sub { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:5px; overflow-wrap:anywhere; }
.s-lines { width:100%; height:60px; }
.s-lines path { stroke:var(--muted); stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke; }
.s-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.s-leaf { display:flex; gap:14px; align-items:flex-start; background:var(--void); border:1px solid var(--line); border-radius:10px; padding:20px; transition:border-color .2s ease, transform .2s ease; }
.s-leaf:hover { border-color:var(--petrol); transform:translateY(-3px); }
.s-leaf .s-dot { margin-top:4px; }
.s-note { margin-top:20px; }
@media (max-width:760px) {
  .schema .plate-label { position:static; display:block; text-align:left; margin:0 0 16px; }
  .s-root { max-width:none; justify-content:flex-start; padding:18px 20px; }
  .s-lines { display:none; }
  .s-row { grid-template-columns:1fr; position:relative; padding-left:26px; margin-top:20px; }
  .s-row::before { content:""; position:absolute; left:9px; top:-18px; bottom:18px; width:1.5px; background:var(--muted); }
  .s-leaf { position:relative; }
  .s-leaf::before { content:""; position:absolute; left:-17px; top:28px; width:16px; height:1.5px; background:var(--muted); }
}
@media (prefers-reduced-motion:no-preference) {
  .js .schema .s-lines path { stroke-dasharray:1; stroke-dashoffset:1; }
  .js .schema.in .s-lines path { animation:draw-in .9s ease .15s forwards; }
  .js .schema .s-root, .js .schema .s-leaf { opacity:0; transform:translateY(10px); }
  .js .schema.in .s-root { animation:fade-up .5s ease forwards; }
  .js .schema.in .s-leaf { animation:fade-up .5s ease forwards; }
  .js .schema.in .s-leaf:nth-child(1) { animation-delay:.55s; }
  .js .schema.in .s-leaf:nth-child(2) { animation-delay:.68s; }
  .js .schema.in .s-leaf:nth-child(3) { animation-delay:.81s; }
  .js .schema.in .s-root .s-dot { animation:node-pulse 2.8s ease 1.2s infinite; }
  @keyframes draw-in { to { stroke-dashoffset:0; } }
  @keyframes node-pulse { 50% { transform:scale(1.3); } }
}

/* ============================================================
   CLAIM — typografischer Moment
   ============================================================ */
.claim { position:relative; overflow:hidden; padding:150px 0; border-block:1px solid var(--line-soft); }
.claim .net-canvas, .claim .net-static { position:absolute; inset:0; width:100%; height:100%; }
.claim .wrap { z-index:2; }
.claim h2 {
  font-weight:600; font-size:clamp(40px,7vw,92px); line-height:1.02; letter-spacing:-.02em;
  max-width:14ch;
}
.claim .outline {
  color:transparent; -webkit-text-stroke:1.5px var(--petrol-l);
}
.claim p { margin-top:26px; max-width:520px; }

/* ============================================================
   04 KONTAKT — die Adresse als Headline
   ============================================================ */
.mail-line {
  display:inline-block; margin-top:48px;
  font-weight:600; font-size:clamp(26px,4.6vw,58px); letter-spacing:-.015em;
  color:var(--txt); position:relative; text-decoration:none; overflow-wrap:anywhere;
}
.mail-line::after {
  content:""; position:absolute; left:0; bottom:-8px; height:2px; width:100%;
  background:var(--petrol); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.mail-line:hover { text-decoration:none; color:var(--petrol-l); }
.mail-line:hover::after { transform:scaleX(1); }
.contact-meta {
  margin-top:56px; display:flex; gap:clamp(28px,6vw,88px); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; line-height:2.1;
}
.contact-meta b { display:block; color:var(--dim); font-weight:500; letter-spacing:.26em; font-size:10px; margin-bottom:6px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--ink); border-top:1px solid var(--line); padding:72px 0 36px; }
.footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer-brand { display:flex; align-items:center; gap:16px; color:var(--txt); }
.footer-brand .glyph { height:46px; width:auto; color:var(--txt); }
.footer-brand .bt b { font-weight:500; font-size:22px; letter-spacing:.16em; display:block; }
.footer-brand .bt span { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.5em; color:var(--dim); }
.legal-nav { display:flex; gap:6px 26px; flex-wrap:wrap; }
.legal-nav a {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; padding:6px 0;
}
.legal-nav a:hover { color:var(--petrol-l); text-decoration:none; }
.reg {
  margin-top:52px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--dim);
}

/* ============================================================
   REVEAL (Basis sichtbar; Animation nur ohne Reduced-Motion)
   ============================================================ */
@media (prefers-reduced-motion:no-preference) {
  .reveal { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
  .reveal.in { opacity:1; transform:none; }
  .principles .principle:nth-child(2) { transition-delay:.07s; }
  .principles .principle:nth-child(3) { transition-delay:.14s; }
  .index .index-row:nth-child(2) { transition-delay:.06s; }
  .index .index-row:nth-child(3) { transition-delay:.12s; }
  .index .index-row:nth-child(4) { transition-delay:.18s; }
}

/* ============================================================
   RECHTSSEITEN (:target — ohne JS nutzbar) — dunkel
   ============================================================ */
.legal { display:none; }
.legal:target, .legal:has(:target) { display:block; position:fixed; inset:0; z-index:120; background:var(--void); overflow-y:auto; overscroll-behavior:contain; }
.legal-head {
  position:sticky; top:0; background:var(--header-bg-solid);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.legal-head .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.backlink { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--petrol-l); }
.legal-body { max-width:840px; margin-inline:auto; padding:56px var(--gutter) 100px; }
.legal-body h1 { font-weight:600; font-size:clamp(30px,4vw,46px); letter-spacing:-.015em; margin:12px 0 10px; color:var(--txt); }
.legal-body h2 { font-weight:600; font-size:20px; margin:38px 0 10px; color:var(--txt); }
.legal-body h3 { font-weight:600; font-size:16px; margin:22px 0 6px; color:var(--txt); }
.legal-body p, .legal-body li { font-size:15.5px; color:var(--muted); }
.legal-body b { color:var(--txt); font-weight:600; }
.legal-body ul, .legal-body ol { padding-left:22px; margin:8px 0; }
.legal-body a { color:var(--petrol-l); }
.stand { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; }
.legal-body table { width:100%; border-collapse:collapse; margin:12px 0; font-size:15px; }
.legal-body td { padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted); }
.legal-body td:first-child {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim);
  text-transform:uppercase; width:220px; padding-right:18px;
}
.card.legal-toc { background:var(--ink); border:1px solid var(--line); border-radius:var(--radius); margin:20px 0 8px; padding:18px 22px; }
.legal-toc ol { margin:0; padding-left:20px; columns:2; column-gap:32px; }
.legal-toc li { font-size:14px; padding:2px 0; }
@media (max-width:620px) { .legal-toc ol { columns:1; } .legal-body td:first-child { width:130px; } }

/* ============================================================
   COOKIE-CONSENT — zentriertes Modal mit Backdrop-Blur
   ============================================================ */
.consent {
  position:fixed; inset:0; z-index:140; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:var(--overlay);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.consent.show { display:flex; }
body.modal-open { overflow:hidden; }
.consent-box {
  width:100%; max-width:620px; max-height:calc(100svh - 40px); overflow-y:auto;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--modal-shadow); outline:none;
}
@media (prefers-reduced-motion:no-preference) {
  .consent.show .consent-box { animation:consent-in .3s cubic-bezier(.2,.7,.2,1); }
  @keyframes consent-in { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
}
.consent-box h2 { font-weight:600; font-size:16px; margin-bottom:6px; color:var(--txt); }
.consent-box p { font-size:14px; }
.consent-row { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center; }
.consent-row .btn { padding:12px 18px; font-size:11px; }
.consent-box details { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.consent-box summary {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); cursor:pointer;
}
.cat { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.cat:last-of-type { border-bottom:none; }
.cat b { font-size:14px; font-weight:600; display:block; color:var(--txt); }
.cat span { font-size:13px; color:var(--muted); }
.cat input[type=checkbox] { width:18px; height:18px; accent-color:var(--petrol); margin-top:3px; flex:0 0 auto; }

/* ============================================================
   v4.2 — Sprachumschalter, EN-Hinweis, Mobile-Feinschliff
   ============================================================ */
.menu .lang {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em;
  color:var(--muted); border:1px solid var(--line); border-radius:6px;
  padding:8px 12px; margin-left:6px; text-transform:uppercase;
}
.menu .lang:hover { color:var(--txt); border-color:var(--muted); background:transparent; text-decoration:none; }

.en-note {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; line-height:1.7;
  color:var(--petrol-l); border:1px solid var(--line); border-radius:8px;
  padding:12px 16px; margin:16px 0 6px;
}

/* --- Mobile-Feinschliff --- */
@media (max-width:640px) {
  .sheet { padding:72px 0; }
  .claim { padding:104px 0; }
  .claim h2 { font-size:clamp(32px,10vw,48px); }
  .hero { padding-top:calc(var(--header-h) + 28px); padding-bottom:104px; }
  .hero-sub { font-size:16.5px; }
  .footer-brand .glyph { height:38px; }
  .footer-brand .bt b { font-size:19px; }
  .contact-meta { gap:24px; }
  .mail-line { margin-top:36px; }
  .principle h3 { font-size:21px; }
  .sec-head .lede { font-size:17px; }
}
@media (max-width:480px) {
  .hero-title { font-size:clamp(40px,12.5vw,52px); }
  .hero .cta { flex-direction:column; align-items:stretch; }
  .hero .cta .btn { justify-content:center; }
  .consent-row { flex-direction:column; align-items:stretch; }
  .consent-row .btn { justify-content:center; }
  .consent-box { padding:22px 20px; }
  .hero-meta .wrap { justify-content:center; }
  .brand-text b { font-size:15px; }
}


/* ---------- v4.3: Theme-Button, Sprachlogik, statische Netze ---------- */
.lang { background:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.lang svg { width:15px; height:15px; }
html[data-theme="dark"] .ic-moon { display:none; }
html[data-theme="light"] .ic-sun { display:none; }

html[data-lang="de"] .en-note { display:none; }

.net-static .ns-edge { stroke:#2A2F36; }
.net-static .ns-node { fill:#3A414A; }
html[data-theme="light"] .net-static .ns-edge { stroke:#DCE0E6; }
html[data-theme="light"] .net-static .ns-node { fill:#C6CCD4; }