/* ═══════════════════════════════════════════════════════════════
   FAROL studios — Design D "Farol OS"
   Basis: Designsprache C (Graphit, ein Leuchtfeuer-Gold, Inter Tight + JetBrains Mono fuer Labels).
   Signatur aus A: Leuchtturm am Horizont, dessen Lichtkegel ueber die Headline streicht.
   Wuerze: Omarchy/Hyprland (Fenster mit Gaps, aktiver Rahmen, Waybar, tmux-Zeile) + Glas wie macOS 26/27.
   Glas nur, wo es etwas zu brechen gibt; ohne backdrop-filter -> dichte, getoente Flaeche (gleich gut lesbar).
   Keine Inline-Styles in HTML/PHP (CSP: style-src 'self').
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#0c0d0f; --bg-2:#111215; --bg-3:#18191d;            /* Graphit: Wallpaper, Flaeche, Karte */
  --ink:#efeee9; --muted:#acada6; --faint:#8b8c85;         /* Text (alle >= 4.5:1 auf Glas und --bg) */
  --accent:#f2d16b; --accent-2:#f8e6a8; --g:242,209,107;   /* Leuchtfeuer */
  --accent-soft:rgba(242,209,107,.09);
  --on-accent:#16140c;
  --danger:#f0a0a0;
  --line:rgba(238,237,232,.08); --line-2:rgba(238,237,232,.16);
  /* Glas (Liquid Glass, warm getoent) — --glass-solid = Flaeche ohne backdrop-filter, bleibt AA-lesbar */
  --glass:rgba(22,22,25,.5); --glass-solid:rgba(20,20,23,.86); --glass-tint:rgba(255,238,205,.04);
  --glass-line:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.18);
  --blur:blur(22px) saturate(180%);
  --win-r:18px; --tile-r:12px;
  /* Hyprland: gaps_in = Abstand zwischen Fenstern/Kacheln, gaps_out = Abstand zum Bildschirmrand. Nur diese zwei. */
  --gaps-in:10px; --gaps-out:16px;
  --gap:var(--gaps-in);
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --serif:var(--sans);
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:min(calc(100% - 2 * var(--gaps-out)),1392px);
  --radius:12px;
  --hdr:4.4rem;
}
@media(min-width:720px){:root{--gaps-in:12px;--gaps-out:24px}}


/* ── Basis ─────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
html{background:var(--bg)}
/* Wallpaper: feines Punktraster (Omarchy) — hinter Glas verschwimmt es, so wird das Glas sichtbar */
body{background:radial-gradient(circle,rgba(238,237,232,.032) 1px,transparent 1.3px) 0 0/28px 28px,var(--bg)}
body{font-family:var(--sans);font-weight:400;color:var(--ink);font-size:clamp(16px,1.05vw,17.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-feature-settings:'ss01','cv11'}
::selection{background:var(--accent);color:var(--on-accent)}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--sans);font-weight:500;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
h2 span{color:var(--faint)}
em{font-style:normal;color:var(--accent)}
p{color:var(--muted);text-wrap:pretty} p+p{margin-top:1rem}
ul,ol{list-style:none}
.wrap{width:var(--wrap);margin-inline:auto}
.pad{padding:clamp(4rem,8vw,7rem) 0}
/* Startseite: ein Arbeitsbereich — gleichmaessiger, enger Abstand zwischen den Sektionen (~2 × 4rem) */
.ws-sec.pad,.cta-sec.ws-sec{padding:clamp(2.5rem,4.4vw,4rem) 0}
.bg2{background:transparent}
.center{text-align:center}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:3000;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;border-radius:8px;transition:top .3s}
.skip:focus{top:1rem}

/* ── Typo-Helfer ───────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Workspace-Nummer wie in der Waybar */
.eyebrow .idx{display:inline-grid;place-items:center;min-width:1.55rem;height:1.55rem;padding:0 .3rem;border-radius:7px;font-size:.72rem;letter-spacing:0;
  color:var(--accent);background:rgba(var(--g),.1);box-shadow:inset 0 0 0 1px rgba(var(--g),.32)}
.lamp{width:.5rem;height:.5rem;background:var(--accent);border-radius:1px;box-shadow:0 0 0 3px rgba(var(--g),.12),0 0 14px rgba(var(--g),.7);flex:none}
.num{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--faint);font-weight:400}
.big{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.18;letter-spacing:-.025em;color:var(--ink);font-weight:500}
.intro-big{margin-top:1.2rem}
.h2m{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-top:.6rem}
.sec-head{display:grid;gap:1.2rem;margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,4rem);max-width:20ch}
.sec-sub{max-width:38rem;font-size:1.05rem}
@media(min-width:960px){
  .sec-head{grid-template-columns:minmax(12rem,3fr) 9fr;column-gap:2rem;align-items:start}
  .sec-head .eyebrow{padding-top:.75rem}
  .sec-head>*:not(.eyebrow){grid-column:2}
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.1rem;padding:.85rem 1.5rem;border:1px solid var(--line-2);border-radius:999px;
  font-size:.95rem;font-weight:500;letter-spacing:-.005em;color:var(--ink);background:transparent;
  transition:background-color .35s var(--ease),border-color .35s,color .35s,box-shadow .35s}
.btn:hover{border-color:rgba(238,237,232,.5)}
.btn .arr{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
/* Gold: wie ein beleuchteter Glasknopf (Lichtkante oben, weicher Schein) */
.btn.gold{background:linear-gradient(180deg,#f6dc84,var(--accent) 55%,#e9c55a);border-color:rgba(255,240,190,.7);color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,90,10,.25),0 8px 28px -12px rgba(var(--g),.6)}
.btn.gold:hover{background:linear-gradient(180deg,#fbe9a9,var(--accent-2) 60%,#f1d47a);border-color:#fff3c8;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 40px -12px rgba(var(--g),.75)}
.btn.ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.btn.ghost:hover{background:rgba(255,255,255,.07)}
.btn.full{width:100%}
.btn.sub{font-size:.8rem;min-height:2.3rem;padding:.45rem 1rem}
.btn.danger{border-color:#6a3434;color:var(--danger)} .btn.danger:hover{background:#3a1d1d}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ── Bewegung (ruhig; respektiert prefers-reduced-motion) ──── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease),border-color .5s,box-shadow .5s}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.no-js .reveal{opacity:1;transform:none}
.fade-up{opacity:0;transform:translateY(18px);animation:fadeUp 1s var(--ease) forwards}
.fade-up.d1{animation-delay:.1s}.fade-up.d2{animation-delay:.25s}.fade-up.d3{animation-delay:.4s}
@keyframes fadeUp{to{opacity:1;transform:none}}
/* LCP-Text (Hero-Headline, Lead der Unterseiten) ist ab dem ersten Bild sichtbar — es bewegt sich nur */
.hero h1.fade-up,.phero h1.fade-up,.phero p.fade-up,.nf-h.fade-up{opacity:1;animation-name:fadeUpT}
@keyframes fadeUpT{from{transform:translateY(14px)}to{transform:none}}

/* ══ Glas-Fenster (Hyprland-Kachel) ═════════════════════════ */
.tiles{display:grid;gap:var(--gaps-in)}
.win{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--win-r);
  background-color:var(--glass-solid);
  /* Glas ohne Laufzeitkosten: Tönung, diagonaler Glanz (Specular Sheen), warmes Licht von oben rechts, Gegenlicht unten links */
  background-image:linear-gradient(var(--glass-tint),var(--glass-tint)),
    linear-gradient(118deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.035) 18%,transparent 34%,transparent 62%,rgba(255,236,190,.05) 80%,transparent 96%),
    radial-gradient(85% 60% at 100% 0%,rgba(var(--g),.085),transparent 66%),
    radial-gradient(60% 50% at 0% 100%,rgba(255,196,128,.045),transparent 70%);
  border:1px solid var(--glass-line);                                  /* inaktiv: ~8 % Weiss */
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 1px 0 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.32),inset 0 -26px 40px -30px rgba(0,0,0,.55),
    0 1px 1px rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.5),0 30px 70px -32px rgba(0,0,0,.85);
  transition:opacity .9s var(--ease),transform 1s var(--ease),border-color .18s,box-shadow .18s}
/* Lichtkante (Specular Rim): oben/links hell, bis zur Kantenmitte ausgeblendet, unten rechts ein schwacher Gegenreflex */
.win::before{content:'';position:absolute;inset:-1px;z-index:2;pointer-events:none;border-radius:inherit;padding:1px;
  background:radial-gradient(120% 130% at 0 0,rgba(255,255,255,.78),rgba(255,255,255,.26) 24%,rgba(255,255,255,.06) 44%,transparent 58%),
             radial-gradient(70% 80% at 100% 100%,rgba(255,240,210,.16),transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* aktiver Rahmen = col.active_border (1px Gold-Verlauf) */
.win::after{content:'';position:absolute;inset:-1px;z-index:3;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,#fbecb6,rgba(var(--g),.85) 30%,rgba(var(--g),.42) 62%,#f2d16b);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .18s ease-out}
.win.is-focus::after{opacity:1}
.win.is-focus{border-color:transparent;
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(0,0,0,.32),inset 0 -26px 40px -30px rgba(0,0,0,.55),
    0 0 0 1px rgba(var(--g),.1),0 0 34px -8px rgba(var(--g),.3),0 30px 70px -32px rgba(0,0,0,.85)}
/* Titelleiste: [Nr.] ~/pfad ............ meta */
.win-bar{position:relative;z-index:1;display:flex;align-items:center;gap:.6rem;min-height:2.45rem;padding:.35rem .9rem .35rem .7rem;border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:.7rem;line-height:1.3;color:var(--faint);letter-spacing:.01em;background:rgba(255,255,255,.015)}
.wsn{display:inline-grid;place-items:center;flex:none;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:6px;font-size:.66rem;font-weight:500;color:var(--muted);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);transition:background-color .18s,color .18s,box-shadow .18s}
.win.is-focus .wsn{background:var(--accent);color:var(--on-accent);box-shadow:0 0 12px rgba(var(--g),.55)}
.win.is-focus .win-t{color:var(--ink)}
.win-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s}
.win-m{margin-left:auto;flex:none;color:var(--faint);white-space:nowrap}
.win-m.tag{padding:.08rem .5rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:var(--muted)}
.win-body{position:relative;z-index:1;padding:clamp(1.35rem,2.6vw,2rem)}
/* innere Kacheln (Listen, Optionen) — gleicher Abstand wie zwischen Fenstern */
.itile{border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);background:rgba(255,255,255,.022);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
/* echtes Glas nur mit backdrop-filter; auf dem Handy nur im Hero und im Kopf (Akku/Ruckeln) */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero .win{background-color:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  @media(min-width:760px){
    .win{background-color:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  }
}

/* Wallpaper-Licht hinter den Fenstern: weiche, randlose Lichtfelder (closest-side -> nie eine Kante).
   ::before = Leuchtfeuer-Bloom, ::after = warmes "Wasser"-Licht. Langsames Driften nur auf grossen Bildschirmen. */
.ws-sec{position:relative;isolation:isolate;overflow-x:clip}
.ws-sec::before,.ws-sec::after{content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%;translate:-50% -50%}
.ws-sec::before{left:var(--gx,80%);top:var(--gy,45%);width:min(64rem,150vw);height:min(40rem,110vw);
  background:radial-gradient(closest-side,rgba(var(--g),.16),rgba(var(--g),.075) 38%,rgba(var(--g),.02) 70%,transparent)}
.ws-sec::after{left:var(--hx,14%);top:var(--hy,80%);width:min(56rem,140vw);height:min(26rem,80vw);
  background:radial-gradient(closest-side,rgba(255,196,128,.085),rgba(214,160,110,.035) 50%,transparent),
             radial-gradient(closest-side,rgba(150,165,205,.05),transparent)}
#services{--gx:76%;--gy:58%;--hx:16%;--hy:30%}
#process{--gx:22%;--gy:66%;--hx:86%;--hy:30%}
#sectors{--gx:70%;--gy:62%;--hx:10%;--hy:78%}
#pricing{--gx:60%;--gy:46%;--hx:14%;--hy:80%}        /* Kante zwischen Optionen und Schaetzung */
#impact{--gx:30%;--gy:60%;--hx:84%;--hy:34%}
#mission{--gx:50%;--gy:62%;--hx:50%;--hy:96%}
#talk{--gx:50%;--gy:22%;--hx:82%;--hy:92%}             /* Oberkante + Ecke unten rechts der CTA-Box */
/* Desktop: kraeftigere Lichtpools genau hinter den Fensterkanten (Hero, Preise, CTA) -> das Glas hat etwas zu brechen */
@media(min-width:1000px){
  #pricing::before,#talk::before{width:min(52rem,90vw);height:min(30rem,60vw);
    background:radial-gradient(closest-side,rgba(255,226,150,.34),rgba(var(--g),.16) 34%,rgba(var(--g),.05) 66%,transparent)}
  #pricing::after,#talk::after{background:radial-gradient(closest-side,rgba(255,190,120,.2),rgba(214,160,110,.07) 50%,transparent)}
}
@media(prefers-reduced-motion:no-preference) and (min-width:1000px){
  .ws-sec::before{animation:drift 28s ease-in-out infinite alternate}
  .ws-sec::after{animation:drift2 34s ease-in-out infinite alternate}
  .ws-sec:not(.in-view)::before,.ws-sec:not(.in-view)::after{animation-play-state:paused}
  @keyframes drift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(5%,4%,0) scale(1.08)}}
  @keyframes drift2{from{transform:translate3d(6%,2%,0)}to{transform:translate3d(-6%,-4%,0)}}
}

/* ── Kopf: Waybar (schwebende Glasleiste) ──────────────────── */
header#site-header{position:fixed;inset:0 0 auto;z-index:1000;padding-top:var(--gaps-in);pointer-events:none}
.nav{position:relative;pointer-events:auto;display:flex;align-items:center;gap:1rem;height:3.5rem;padding:0 .45rem 0 1rem;border-radius:16px}
/* Glas auf einem Pseudo-Element: backdrop-filter am .nav selbst wuerde das mobile Vollbild-Menue (position:fixed) einsperren */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:rgba(18,19,22,.62);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 34px -14px rgba(0,0,0,.7);transition:background-color .4s}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav::before{background:rgba(18,19,22,.46);-webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%)}
}
header#site-header.solid .nav::before{background:rgba(16,17,20,.72)}
.brand{display:flex;align-items:center;min-height:2.75rem;flex:none}
.brand-logo{height:1.8rem;width:auto}
.brand-word{display:inline-flex;align-items:center;gap:.65rem;font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.brand-word::before{content:'';width:.55rem;height:.55rem;border-radius:1px;background:var(--accent);box-shadow:0 0 12px rgba(var(--g),.7)}
/* Workspaces 1–7 = Sprungmarken (nur Startseite, breite Bildschirme) */
.ws{display:none}
@media(min-width:1180px){
  .ws{display:flex;align-items:center;gap:4px;padding:3px;border-radius:10px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  .ws a{display:inline-flex;align-items:center;height:1.7rem;min-width:1.7rem;padding:0 .52rem;border-radius:7px;font-family:var(--mono);font-size:.7rem;color:var(--faint);transition:background-color .35s,color .35s}
  .ws a b{font-weight:500}
  .ws a span{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;text-transform:lowercase;vertical-align:bottom;transition:max-width .5s var(--ease),opacity .35s,margin .5s var(--ease)}
  .ws a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
  .ws a.on{color:var(--accent);background:rgba(var(--g),.13);box-shadow:inset 0 0 0 1px rgba(var(--g),.28)}
  .ws a.on span{max-width:9rem;opacity:1;margin-left:.5rem}
}
.menu{display:flex;align-items:center;gap:.2rem}
@media(min-width:881px){
  .menu{margin-left:auto}
  .menu-foot{display:none}
}
.menu a{position:relative;padding:.5rem .85rem;font-size:.9rem;color:var(--muted);border-radius:10px;transition:color .3s,background-color .3s}
.menu a:hover{color:var(--ink);background:rgba(238,237,232,.06)}
.menu a.active{color:var(--ink)}
.menu a.active::after{content:'';position:absolute;left:50%;bottom:.1rem;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
/* Kontakt = Haupt-CTA: ganz rechts, gefuellt */
@media(min-width:881px){
  .menu a[href^="/contact"]{order:9;margin-left:.6rem;padding:.55rem 1.1rem;border-radius:11px;color:var(--on-accent);font-weight:500;
    background:linear-gradient(180deg,#f6dc84,var(--accent) 55%,#e9c55a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 22px -10px rgba(var(--g),.6);transition:background .3s,box-shadow .3s}
  .menu a[href^="/contact"]:hover{background:linear-gradient(180deg,#fbe9a9,var(--accent-2));color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 30px -10px rgba(var(--g),.75)}
  .menu a[href^="/contact"].active{box-shadow:inset 0 0 0 1px var(--on-accent),0 0 0 1px var(--accent)}
  .menu a[href^="/contact"].active::after{display:none}
}
.tools{display:flex;align-items:center;gap:.4rem}
.clock{display:none}
@media(min-width:1320px){.clock:not([hidden]){display:inline-flex;align-items:center;gap:.45rem;padding:0 .5rem;font-family:var(--mono);font-size:.7rem;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
  .clock::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.8}}
.lang{position:relative}
.lang-btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted);padding:.45rem .7rem;min-height:2.4rem;border:1px solid var(--line);border-radius:10px;transition:color .3s,border-color .3s}
.lang-btn:hover{color:var(--ink);border-color:var(--line-2)}
.lang-list{position:absolute;right:0;top:calc(100% + .6rem);min-width:11rem;padding:.4rem;background:rgba(22,23,27,.96);border:1px solid var(--glass-line);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 50px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;translate:0 -6px;transition:.3s var(--ease)}
.lang-list.open{opacity:1;visibility:visible;translate:0 0}
.no-js .lang:focus-within .lang-list{opacity:1;visibility:visible;translate:0 0}
.lang-list a{display:block;padding:.55rem .8rem;font-size:.88rem;color:var(--muted);border-radius:9px}
.lang-list a:hover,.lang-list a.active{color:var(--ink);background:rgba(238,237,232,.07)}
.lang-list a.active::before{content:'● ';color:var(--accent);font-size:.6rem;vertical-align:.15em}
.burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:2.6rem;height:2.6rem;align-items:center;position:relative;z-index:1200;border:1px solid var(--line);border-radius:11px}
.burger span{width:18px;height:1.5px;background:var(--ink);transition:.3s var(--ease)}
.burger span:nth-child(2){width:12px;margin-left:6px}
.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ══ HERO — Himmel, Horizont, Leuchtturm, Lichtkegel ════════ */
/* --lx = Turm-Position, --lh = Turmhoehe (Breite = lh/3), Laterne sitzt bei 76.7 % der Hoehe */
.hero{--lx:82%;--lh:96px;--cliff:10px;position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:clip}
@media(min-width:760px){.hero{--lx:84%;--lh:104px;--cliff:13px}}
@media(min-width:1000px){.hero{--lx:82%;--lh:136px;--cliff:15px}}
.hero{--lw:calc(var(--lh) / 3)}
/* Himmel ueber die ganze Hero-Flaeche: ein durchgehender Verlauf, unten weich in die Seite ausgeblendet (keine Kante) */
.sky{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(48% 38% at 18% 0%,rgba(150,160,190,.05),transparent),
             linear-gradient(180deg,#07080a 0%,#0b0c0f 45%,#101115 62%,#0e0f12 78%,var(--bg) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.sky::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle,rgba(238,237,232,.05) 1px,transparent 1.3px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent)}
.hero-top{position:relative;display:flex;align-items:flex-end;padding:calc(var(--hdr) + clamp(2.2rem,7vh,4rem)) 0 clamp(1.8rem,4vh,2.8rem)}
/* Lichthof um die Laterne: ein randloses Oval ueber dem Horizont, reicht ins Wasser hinein */
.halo{position:absolute;z-index:0;left:var(--lx);bottom:calc(var(--cliff) + var(--lh) * .767);width:min(70rem,170vw);height:min(44rem,120vw);translate:-50% 50%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--g),.2),rgba(var(--g),.08) 30%,rgba(var(--g),.025) 62%,transparent)}
/* Lichtkegel: Ursprung = Laterne; JS dreht ihn einmal vom Meer herein (am Glas-Kopf vorbei) und laesst ihn auf dem Schluesselwort stehen */
.beam{position:absolute;z-index:1;left:var(--lx);bottom:calc(var(--cliff) + var(--lh) * .767);width:0;height:0;--bl:70vw}
.beam i{position:absolute;left:0;top:calc(var(--bl) * -.2);width:var(--bl);height:calc(var(--bl) * .4);transform-origin:0 50%;transform:rotate(-174deg);
  /* weicher Lichtkegel: Kern ~6° (Gauss-artig, keine harte Linie) + breiter, schwacher Saum ~18°.
     Laengs-Maske: an der Laterne transparent, ueber dem Schluesselwort (~76 % der Laenge) am breitesten und hellsten, danach aus */
  background:conic-gradient(from 0deg at 0 50%,transparent 0deg 84deg,rgba(var(--g),.025) 85.2deg,rgba(var(--g),.075) 86.5deg,rgba(255,226,150,.14) 87.8deg,rgba(255,236,190,.25) 89deg,rgba(255,242,210,.28) 90deg,rgba(255,236,190,.25) 91deg,rgba(255,226,150,.14) 92.2deg,rgba(var(--g),.075) 93.5deg,rgba(var(--g),.025) 94.8deg,transparent 96deg 360deg),
             conic-gradient(from 0deg at 0 50%,transparent 0deg 81deg,rgba(var(--g),.028) 84.5deg,rgba(var(--g),.045) 90deg,rgba(var(--g),.028) 95.5deg,transparent 99deg 360deg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 8%,rgba(0,0,0,.45) 26%,rgba(0,0,0,.8) 48%,#000 64%,#000 82%,rgba(0,0,0,.45) 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 8%,rgba(0,0,0,.45) 26%,rgba(0,0,0,.8) 48%,#000 64%,#000 82%,rgba(0,0,0,.45) 92%,transparent 100%);
  will-change:transform}
.hero.sweep .beam i{transition:transform 4.8s cubic-bezier(.33,.06,.2,1),opacity .9s ease-out}
.hero.pre .beam i{opacity:0}
/* Schein direkt um die Laterne */
.beam::before{content:'';position:absolute;left:calc(var(--lh) * -.9);top:calc(var(--lh) * -.9);width:calc(var(--lh) * 1.8);height:calc(var(--lh) * 1.8);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,240,200,.42),rgba(var(--g),.14) 40%,transparent)}
@media(prefers-reduced-motion:no-preference){
  .hero.settled .beam,.hero.settled .refl{animation:sway 12s ease-in-out infinite alternate}
  .hero.settled .refl{animation-name:sway2}
  .hero.is-off .beam,.hero.is-off .refl{animation-play-state:paused}
  @keyframes sway{from{transform:rotate(0)}to{transform:rotate(-1.4deg)}}
  @keyframes sway2{from{transform:rotate(0)}to{transform:rotate(1.4deg)}}
}
.cape{position:absolute;right:0;bottom:0;width:40%;height:calc(var(--cliff) + 5px);fill:#060607;z-index:1}
/* Leuchtturm (SVG 60 x 180) */
.tower{position:absolute;z-index:1;left:calc(var(--lx) - var(--lw) / 2);bottom:calc(var(--cliff) - 1px);width:var(--lw);height:var(--lh);overflow:visible}
.tw-body{fill:#0b0b0d;stroke:rgba(238,237,232,.22);stroke-width:.7}
.tw-band{fill:rgba(238,237,232,.085)}
.tw-edge{stroke:rgba(var(--g),.16);stroke-width:.5}
.tw-win{fill:rgba(var(--g),.55)}
.tw-door{fill:#060607;stroke:rgba(238,237,232,.18);stroke-width:.5}
.tw-gal{fill:#0e0e11;stroke:rgba(238,237,232,.25);stroke-width:.5}
.tw-rail{fill:none;stroke:rgba(238,237,232,.3);stroke-width:.55}
.tw-lan{fill:#fff1c4;filter:drop-shadow(0 0 2px rgba(255,244,210,.95)) drop-shadow(0 0 9px rgba(242,209,107,.75))}
.tw-lamp{fill:#fff}
.tw-mull{stroke:rgba(40,32,10,.55);stroke-width:.7}
.tw-roof{fill:#0e0e11;stroke:rgba(238,237,232,.26);stroke-width:.55}
.tw-ball{fill:#0e0e11;stroke:rgba(238,237,232,.3);stroke-width:.5}
.tw-pin{stroke:rgba(238,237,232,.34);stroke-width:.8}
.hero-head{position:relative;z-index:2}
.hero h1{font-size:clamp(2.7rem,11.6vw,6.3rem);font-weight:500;letter-spacing:-.045em;line-height:.98;margin-top:1.3rem;max-width:9.6ch;text-wrap:balance}
@media(min-width:700px){.hero h1{font-size:clamp(3rem,6.3vw,6.3rem);max-width:15ch}}
@media(min-width:1000px){.hero h1{max-width:none}}
/* Handy: Headline endet oberhalb der Laterne, damit der Turm frei steht */
@media(max-width:699px){.hero-top{padding-bottom:calc(var(--cliff) + var(--lh) * .5)}}
/* Schluesselwort: wird heller, je naeher der Kegel kommt (--lit 0..1, JS setzt es waehrend der Drehung); danach weicher Bloom.
   Ohne JS / reduzierte Bewegung: --lit = 1 (gleiches Endbild). */
@property --lit{syntax:'<number>';inherits:true;initial-value:1}
.hero{--lit:1}
html:not(.no-js) .hero:not(.settled){--lit:0}
.hero.settled{transition:--lit 1.4s var(--ease)}
.hero h1 em{position:relative;white-space:nowrap;color:var(--accent-2);
  color:color-mix(in oklab,#bfa95f,#fbeec0 calc(var(--lit) * 100%));
  text-shadow:0 0 calc(var(--lit) * 22px) rgba(var(--g),calc(var(--lit) * .5)),0 0 calc(var(--lit) * 70px) rgba(var(--g),calc(var(--lit) * .32))}
/* Lichtfleck, wo der Kegel auf dem Wort liegt */
.hero h1 em::after{content:'';position:absolute;inset:-55% -18% -45%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,236,186,.2),rgba(var(--g),.09) 45%,transparent);opacity:var(--lit)}
/* Horizont: an beiden Enden ausgeblendet -> liest sich als Meer, nicht als Linie */
.horizon{position:relative;z-index:1;height:1px;
  background:linear-gradient(90deg,transparent 0,rgba(238,237,232,.1) 22%,rgba(238,237,232,.16) 52%,rgba(var(--g),.9) var(--lx),rgba(238,237,232,.1) 94%,transparent 100%)}
.hero-low{position:relative;padding:clamp(1.25rem,3vh,2rem) 0 clamp(2.5rem,7vh,4.5rem)}
/* Wasser: Spiegelung von Laterne und Kegel — liegt hinter den Glasfenstern, damit das Glas etwas zu brechen hat */
.sea{position:absolute;inset:0 0 auto;height:min(46rem,100%);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.refl{position:absolute;left:var(--lx);top:0;width:0;height:0;--bl:60vw;transform-origin:0 0}
.refl i{position:absolute;left:0;top:calc(var(--bl) * -.2);width:var(--bl);height:calc(var(--bl) * .4);transform-origin:0 50%;transform:rotate(174deg);opacity:.85;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 7px),
             conic-gradient(from 0deg at 0 50%,transparent 0deg 80deg,rgba(var(--g),.06) 84deg,rgba(var(--g),.2) 88deg,rgba(var(--g),.28) 90deg,rgba(var(--g),.2) 92deg,rgba(var(--g),.06) 96deg,transparent 100deg 360deg);
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.6) 50%,transparent 90%);mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.6) 50%,transparent 90%)}
.hero.sweep .refl i{transition:transform 4.8s cubic-bezier(.33,.06,.2,1),opacity .9s ease-out}
.hero.pre .refl i{opacity:0}
.glint{position:absolute;left:var(--lx);top:0;width:clamp(110px,18vw,300px);height:clamp(180px,38vh,360px);translate:-50% 0;
  background:repeating-linear-gradient(180deg,rgba(var(--g),.34) 0 1px,transparent 1px 7px),radial-gradient(50% 60% at 50% 0,rgba(var(--g),.26),transparent);
  -webkit-mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent 88%);mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent 88%);opacity:.65}
@media(prefers-reduced-motion:no-preference){.glint{animation:glint 7s ease-in-out infinite}@keyframes glint{0%,100%{opacity:.5}50%{opacity:.8}}}
.hero-tiles{position:relative;z-index:1}
.hero-low::before{content:'';position:absolute;z-index:0;pointer-events:none;left:44%;top:6%;width:min(46rem,120vw);height:min(22rem,60vw);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,226,150,.2),rgba(var(--g),.08) 45%,transparent)}
@media(min-width:1000px){.hero-low::before{background:radial-gradient(closest-side,rgba(255,226,150,.3),rgba(var(--g),.12) 42%,rgba(var(--g),.03) 72%,transparent)}}
/* goldene Reflexion auf der Oberkante, wenn die Spiegelung des Kegels unter den Fenstern durchlaeuft (rechts -> links) */
.hero .win-bar::after{content:'';position:absolute;z-index:4;left:0;top:0;width:46%;height:2px;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,236,186,.95) 45%,#fff6dc 55%,transparent);box-shadow:0 0 14px 2px rgba(var(--g),.45)}
@media(prefers-reduced-motion:no-preference){
  .hero.sweep .win-bar::after{animation:edgeGlint 1.7s cubic-bezier(.4,0,.2,1) both}
  .hero.sweep .term .win-bar::after{animation-delay:.5s}
  .hero.sweep .win-intro .win-bar::after{animation-delay:1.7s}
  @keyframes edgeGlint{0%{opacity:0;transform:translateX(220%)}18%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(-60%)}}
}
.win-bar{overflow:visible}
.win-intro{display:flex;flex-direction:column}
.win-intro .win-body{display:flex;flex-direction:column;flex:1}
/* Glas im Hero: goldene Lichtkante dort, wo die Laterne spiegelt (oben rechts) */
.hero .win::before{background:radial-gradient(120% 130% at 0 0,rgba(255,255,255,.5),rgba(255,255,255,.14) 26%,transparent 52%),
  radial-gradient(60% 120% at 100% 0,rgba(var(--g),.5),rgba(var(--g),.12) 30%,transparent 55%),radial-gradient(70% 80% at 100% 100%,rgba(255,255,255,.08),transparent 50%)}
.hero-sub{max-width:34rem;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.58;color:#c2c3bc}
.hero-cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.6rem}
.hero-meta{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.hero-meta li{display:flex;align-items:center;gap:.55rem;min-width:0;padding:.8rem 1.25rem;font-family:var(--mono);font-size:.72rem;letter-spacing:-.01em;color:var(--muted)}
.hero-meta li::before{content:'';width:5px;height:5px;background:var(--accent);flex:none}
.hero-meta li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.05)}
.hero-meta li:nth-child(odd){border-right:1px solid rgba(255,255,255,.05)}
.win-intro .win-body{justify-content:center}
@media(min-width:1000px){
  .hero{min-height:100svh}
  .hero-top{flex:1 0 auto;align-items:flex-start;padding-bottom:clamp(3rem,7vh,4.5rem)}
  .hero-tiles{grid-template-columns:5fr 7fr}
  .win-intro .win-body{padding-top:1.7rem}
  .hero-meta li{padding:.85rem 1.6rem}
}
@media(max-width:480px){.hero-meta li{padding:.75rem .85rem;font-size:.68rem;letter-spacing:-.02em}}
@media(max-width:420px){.hero-cta .btn{flex:1 1 100%}}


/* Audit-Fenster */
.term{font-family:var(--mono);font-size:.8rem;line-height:1.7}
.term-body{padding:1.25rem 1.25rem 1.35rem}
.t-cmd{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-ps{color:var(--accent)}
.t-list{margin:.9rem 0 1rem;display:grid;gap:.15rem}
.t-row{display:flex;align-items:baseline;gap:.6rem;color:var(--muted);transition:opacity .35s,transform .35s var(--ease)}
.t-ok{color:var(--accent);width:1ch}
.t-k{color:var(--ink);flex:none}
.t-lead{flex:1;min-width:1rem;border-bottom:1px dotted rgba(238,237,232,.18);transform:translateY(-.3em)}
.t-v{flex:none;text-align:right}
.t-sum{display:flex;align-items:center;gap:.8rem;color:var(--muted);padding-top:.9rem;border-top:1px dashed var(--line-2);transition:opacity .35s}
.t-bar{flex:1;height:4px;background:rgba(238,237,232,.08);border-radius:2px;overflow:hidden}
.t-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e9c55a,var(--accent-2));box-shadow:0 0 10px rgba(var(--g),.6);transform-origin:left;transition:transform 1.6s var(--ease)}
.t-end{margin-top:.45rem;color:var(--ink);transition:opacity .35s}
.t-cur{display:inline-block;width:.6em;height:1.15em;margin-left:.3em;vertical-align:-.2em;background:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.term.is-anim .t-row,.term.is-anim .t-sum,.term.is-anim .t-end{opacity:.15}
.term.is-anim .t-bar i{transform:scaleX(0)}
.term .on{opacity:1!important;transform:none!important}
.term.is-anim.done .t-bar i{transform:scaleX(1)}
@media(min-width:1000px){.term{font-size:.82rem}.term-body{padding:1.45rem 1.6rem 1.55rem}}
@media(max-width:420px){.term{font-size:.72rem}.t-lead{min-width:.5rem}.term-body{padding:1.1rem 1rem 1.2rem}}

/* ── 2 · Leistungen ────────────────────────────────────────── */
.svc .win-body{display:flex;flex-direction:column;height:calc(100% - 2.45rem)}
.svc h3{font-size:clamp(1.5rem,2.3vw,2rem);margin:.4rem 0 .85rem}
.svc p{max-width:32rem}
.svc .tags{margin-top:auto;padding-top:1.6rem;font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:-.01em}
.svc-more{display:flex;gap:.8rem;align-items:baseline;margin-top:1.4rem;font-size:.95rem}
.svc-more .plus{font-family:var(--mono);color:var(--accent)}
@media(min-width:760px){.svc{grid-template-columns:1fr 1fr}.svc .win{min-height:19rem}.svc .win-body{padding:clamp(1.6rem,2.8vw,2.4rem)}}

/* ── 3 · Prozess ───────────────────────────────────────────── */
.flow .win{container-type:inline-size}
.flow .win-t{min-width:max-content}
@container (max-width:300px){.segs{display:none}}
.segs{display:inline-flex;gap:3px;flex:none}
.segs i{width:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.segs.s1 i:nth-child(-n+1),.segs.s2 i:nth-child(-n+2),.segs.s3 i:nth-child(-n+3),.segs.s4 i{background:rgba(var(--g),.85)}
.chip{font-family:var(--mono);font-size:.68rem;color:var(--ink);border:1px solid var(--line-2);background:rgba(255,255,255,.03);border-radius:999px;padding:.12rem .6rem;white-space:nowrap;margin-left:auto}
.flow h3{font-size:clamp(1.3rem,1.8vw,1.55rem);margin:.2rem 0 .7rem}
.flow p{font-size:.97rem}
@media(min-width:700px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.flow{grid-template-columns:repeat(4,1fr)}.flow .win-body{min-height:13rem}}

/* ── 4 · Branchen ──────────────────────────────────────────── */
/* Handy: kompakte 2er-Kacheln; ab 640 px eine ruhige 2-spaltige Mono-Liste (48 px Zeilen) */
.sec-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--gaps-in);padding:var(--gaps-in)}
.sec-list li{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;min-height:4rem;padding:.75rem .85rem;
  border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);background:rgba(255,255,255,.022);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  font-size:.98rem;line-height:1.25;font-weight:500;letter-spacing:-.015em;transition:color .18s,background-color .18s,border-color .18s}
.sec-list li .num{transition:color .18s}
.sec-list li:hover{color:var(--accent)} .sec-list li:hover .num{color:var(--accent)}
@media(min-width:640px){
  .sec-list{column-gap:clamp(2rem,5vw,4.5rem);row-gap:0;padding:.4rem clamp(1.3rem,3vw,2.4rem) .9rem}
  .sec-list li{flex-direction:row;justify-content:flex-start;align-items:center;gap:1.4rem;min-height:3.25rem;padding:.6rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;
    font-size:clamp(1.05rem,1.4vw,1.25rem)}
  .sec-list li:nth-last-child(-n+2){border-bottom:0}
  .sec-list li .num{min-width:1.6rem}
}

/* ── 5 · Preisrechner ──────────────────────────────────────── */
.calc{align-items:start}
.calc fieldset{border:0;min-width:0}
.calc fieldset+fieldset{margin-top:2rem}
.calc legend{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.85rem}
.opts{display:grid;gap:var(--gaps-in)}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:.3rem 1rem;align-items:center;padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);
  background:rgba(255,255,255,.022);cursor:pointer;transition:border-color .3s,background-color .3s,box-shadow .3s}
.opt:hover{border-color:var(--line-2);background:rgba(255,255,255,.04)}
.opt:has(input:checked){border-color:rgba(var(--g),.55);background:rgba(var(--g),.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 24px -12px rgba(var(--g),.5)}
.calc .opt input{-webkit-appearance:none;appearance:none;width:1.15rem;height:1.15rem;padding:0;margin:0;border:1.5px solid var(--line-2);border-radius:4px;background:transparent;cursor:pointer;transition:.25s;flex:none}
.calc .opt input[type=radio]{border-radius:50%}
.calc .opt input:checked{border-color:var(--accent);background:var(--accent)}
.calc .opt input[type=radio]:checked{background:radial-gradient(circle,var(--accent) 0 45%,transparent 50%)}
.calc .opt input[type=checkbox]:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2316140c' stroke-width='2'/%3E%3C/svg%3E") center/80% no-repeat}
.opt input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.opt-b{display:flex;flex-direction:column;min-width:0}
.opt-t{color:var(--ink);font-weight:500}
.opt-d{font-size:.86rem;color:var(--muted)}
.opt-p{font-family:var(--mono);font-size:.84rem;color:var(--ink);text-align:right;white-space:nowrap}
.opt-p small{font-size:.72rem;color:var(--faint)}
.opt-p.opt-none{color:var(--faint);font-size:.76rem}
.calc-sum .win-body{padding-top:1.1rem}
.sum-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;min-height:5.2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.sum-l{align-self:flex-start;padding-top:.15rem;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sum-fig{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0}
.sum-from{font-family:var(--mono);font-size:.76rem;letter-spacing:-.01em;color:var(--faint);margin-bottom:.3rem}
.sum-v{display:block;font-size:clamp(2.2rem,4vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sum-row:first-child .sum-v{color:var(--accent-2);text-shadow:0 0 30px rgba(var(--g),.25)}
.sum-row.is-empty .sum-from{display:none}
.sum-row.is-empty .sum-v{font-size:1rem;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--faint);white-space:normal;text-shadow:none}
.sum-note{font-size:.86rem;margin:1.1rem 0 1.3rem}
@media(min-width:960px){
  .calc{grid-template-columns:7fr 5fr}
  .calc-sum{position:sticky;top:6.2rem}
}
@media(max-width:480px){
  .calc-opts .win-body{padding:1.1rem .8rem}
  .opt{grid-template-columns:auto 1fr;padding:.95rem}
  .opt-p{grid-column:2;text-align:left}
}

/* ── 6 · Wirkung ───────────────────────────────────────────── */
.fact-n{font-size:clamp(4rem,9vw,7.5rem);line-height:.9;font-weight:500;letter-spacing:-.06em;color:var(--accent);font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(var(--g),.22)}
.fact .win-body{padding-top:clamp(1.6rem,3vw,2.4rem)}
.fact figcaption{margin-top:1.3rem}
.fact figcaption p{color:var(--ink);font-size:1.05rem;max-width:22rem}
.fact cite{display:block;margin-top:1rem;font-family:var(--mono);font-style:normal;font-size:.76rem;line-height:1.5;color:var(--muted);letter-spacing:-.01em}
.fact-note{margin-top:1.4rem;font-size:.86rem;color:var(--faint);max-width:40rem}
@media(min-width:860px){.facts{grid-template-columns:repeat(3,1fr)}}

/* ── 7 · Mission (Leuchtturm) ──────────────────────────────── */
/* Licht faellt von oben auf die Aussage: ein ruhiger, stehender Kegel (kein zweites Drehen) */
.mission{overflow-x:clip}

.mis-light{position:absolute;z-index:-1;left:50%;top:calc(clamp(4.5rem,10vw,8.5rem) + 4px);width:min(150vw,110rem);height:min(130vw,62rem);translate:-50% 0;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0,transparent 0deg 155deg,rgba(var(--g),.05) 164deg,rgba(var(--g),.11) 174deg,rgba(var(--g),.14) 180deg,rgba(var(--g),.11) 186deg,rgba(var(--g),.05) 196deg,transparent 205deg 360deg);
  -webkit-mask-image:radial-gradient(50% 100% at 50% 0,#000 10%,rgba(0,0,0,.5) 50%,transparent 96%);mask-image:radial-gradient(50% 100% at 50% 0,#000 10%,rgba(0,0,0,.5) 50%,transparent 96%)}
.mis-lamp{display:block;width:10px;height:10px;border-radius:2px;background:#fff3cf;box-shadow:0 0 0 4px rgba(var(--g),.14),0 0 24px 6px rgba(var(--g),.55),0 0 90px 30px rgba(var(--g),.16)}
.mission .eyebrow{margin-top:1.8rem}
.mission-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.mission h2{font-size:clamp(2.4rem,6.2vw,5.6rem);letter-spacing:-.045em;line-height:1;margin-top:1.4rem;max-width:16ch}
.mission h2 em{text-shadow:0 0 40px rgba(var(--g),.3)}
.mis-p{max-width:40rem;margin-top:1.8rem;font-size:clamp(1.05rem,1.3vw,1.18rem)}
.promises-win{width:100%;max-width:64rem;margin-top:clamp(2.6rem,5vw,4rem);text-align:left}
.promises{display:grid;gap:var(--gaps-in);padding:var(--gaps-in)}
.promises li{display:flex;gap:.8rem;align-items:baseline;padding:.95rem 1.1rem;border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);background:rgba(255,255,255,.022);color:var(--ink);font-size:.97rem}
.promises li::before{content:'✓';font-family:var(--mono);color:var(--accent);font-size:.85rem}
@media(min-width:700px){.promises{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.promises{grid-template-columns:repeat(3,1fr)}}
/* Beweis als tmux-Statussegment */
.proof{display:inline-flex;align-items:stretch;max-width:100%;margin-top:1.6rem;font-family:var(--mono);font-size:.76rem;line-height:1.5;letter-spacing:-.01em;
  border-radius:9px;overflow:hidden;border:1px solid var(--glass-line);background:rgba(255,255,255,.03);text-align:left}
.proof-s{display:flex;align-items:center;padding:.4rem .7rem;background:var(--accent);color:var(--on-accent);font-weight:500;flex:none}
.proof-t{padding:.4rem .8rem;color:var(--muted)}

/* ── CTA ───────────────────────────────────────────────────── */
.cta-sec{position:relative;isolation:isolate;padding:clamp(2.5rem,6vw,5rem) 0 clamp(4rem,8vw,7rem)}
.cta-sec.pad{padding:clamp(5rem,10vw,8rem) 0}
.cta-sec.ws-sec{padding-bottom:clamp(3.5rem,6vw,5.5rem)}
.cta-sec h2{font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.04em;max-width:18ch;margin-inline:auto}
.cta-sec.center p{max-width:34rem;margin:1.2rem auto 0}
.cta-box{text-align:center;--win-r:24px}
.cta-box .win-bar{text-align:left}
.cta-box{background-image:linear-gradient(var(--glass-tint),var(--glass-tint)),linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.018) 24%,transparent 40%),radial-gradient(closest-side,rgba(var(--g),.13),transparent);background-size:auto,auto,70% 90%;background-position:0 0,0 0,50% -30%;background-repeat:no-repeat}
.cta-in{padding:clamp(2.6rem,7vw,5.5rem) clamp(1.2rem,4vw,4rem) clamp(2.8rem,7vw,5.5rem)}
.cta-box .eyebrow{justify-content:center}
.cta-box h2{margin-top:1.3rem}
.cta-text{max-width:36rem;margin:1.3rem auto 0;font-size:1.06rem}
.cta-btn-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.6rem;margin-top:2.2rem!important}
.cta-mail{font-size:.92rem;color:var(--muted)}
.cta-mail a{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:1px;transition:color .3s}
.cta-mail a:hover{color:var(--accent)}

/* ── Unterseiten: Seitenkopf + Bausteine ───────────────────── */
.phero{position:relative;padding:clamp(9rem,20vh,12rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.phero .bg{position:absolute;inset:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.phero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,18,.7),var(--bg))}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(2.6rem,7vw,5.8rem);letter-spacing:-.045em;line-height:.98;margin-top:1.2rem;max-width:16ch}
.phero p{max-width:38rem;margin-top:1.4rem;font-size:1.1rem}
.phero-tight{padding-bottom:1rem}
.topic .phero h1{font-size:clamp(2.3rem,5.2vw,4.4rem);max-width:18ch}
.topic .phero p{max-width:44rem}
.statement{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2.4rem,6vw,6rem);align-items:start}
.topic-gap{margin-top:clamp(3.5rem,7vw,6rem)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.card-s{background:var(--bg-2);padding:clamp(1.8rem,3vw,2.8rem)}
.card-s h3{font-size:clamp(1.4rem,2vw,1.8rem);margin:1.2rem 0 .8rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--bg);padding:2.2rem 1.6rem}
.stat .n{font-size:clamp(2.2rem,4vw,3.3rem);font-weight:500;color:var(--accent)}
.stat .l{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.steps li{border-top:1px solid var(--line-2);padding-top:1.4rem}
.steps h3{font-size:1.4rem;margin:.9rem 0 .6rem}
.more-list{border-top:1px solid var(--line)}
.more-item{display:grid;grid-template-columns:1fr auto auto;gap:2rem;align-items:baseline;padding:1.4rem .2rem;border-bottom:1px solid var(--line);transition:.4s var(--ease)}
.more-item .nm{font-size:clamp(1.2rem,2.1vw,1.7rem);font-weight:500;letter-spacing:-.02em;transition:.4s}
.more-item .ty,.more-item .yr{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;color:var(--faint)}
.more-item:hover{padding-left:1rem} .more-item:hover .nm{color:var(--accent)}
.topic-links{margin-top:2rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.6rem;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;color:var(--muted);margin-bottom:1.6rem}
.crumbs a:hover{color:var(--accent)} .crumbs [aria-current]{color:var(--accent)}
.faq details{border-top:1px solid var(--line);padding:1.3rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;font-size:clamp(1.1rem,1.6vw,1.3rem);font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.9rem}

/* ── Kontakt & Formular ────────────────────────────────────── */
.contact-pad{padding-top:2rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gaps-in);align-items:start}
.cinfo{display:grid;gap:var(--gaps-in)}
.info-body{padding:.2rem clamp(1.1rem,2.4vw,1.6rem) 1.2rem}
.info-body .cline:last-child{border-bottom:0}
.cline{display:grid;grid-template-columns:7.5rem 1fr;gap:1.4rem;padding:1.15rem 0;border-bottom:1px solid var(--line);font-size:.98rem}
.cline .l{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;color:var(--faint);padding-top:.25rem}
.cline a.v:hover{color:var(--accent)}
form{display:flex;flex-direction:column;gap:1.1rem;position:relative}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld span{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;color:var(--muted)}
input,textarea,select{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;color:var(--ink);font-family:inherit;font-size:1rem;padding:.85rem 1rem;transition:border-color .3s}
select option{background:var(--bg-2)}
textarea{min-height:9rem;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,209,107,.15)}
input[type=file]{border:0;padding:.6rem 0;background:none;color:var(--muted);font-size:.9rem}
input[type=checkbox]{width:auto;padding:0;margin-right:.35rem;vertical-align:middle;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{font-size:.84rem} .form-legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.form-note{display:none;color:var(--accent);font-size:.92rem} .form-note.show{display:block}
.form-err{color:var(--danger)}

/* ── Karte (statisches Bild, kein Google-Embed) ────────────── */
.map-mini{position:relative;display:block;max-width:250px;height:150px;margin-top:1.1rem;overflow:hidden;border:1px solid var(--line);border-radius:10px;transition:border-color .4s}
.map-mini img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.map-mini:hover{border-color:var(--accent)} .map-mini:hover img{transform:scale(1.04)}
.map-mini .mm-osm{position:absolute;left:.55rem;bottom:.45rem;font-size:.5rem;color:rgba(238,237,232,.5);pointer-events:none}
.map-mini .mm-open{position:absolute;right:.6rem;bottom:.6rem;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;color:var(--ink);
  background:rgba(15,16,18,.8);padding:.35rem .7rem;border:1px solid var(--line);border-radius:6px;transition:.3s}
.map-mini:hover .mm-open{background:var(--accent);color:var(--on-accent)}
.map-mini.map-lg{max-width:100%;height:280px;margin-top:2rem}

/* ── Rechtliches, 404 ──────────────────────────────────────── */
.legal-wrap{max-width:none}
.legal-wrap h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-top:3rem;scroll-margin-top:6rem}
.legal-wrap h2:first-child{margin-top:0}
.legal-wrap h3{scroll-margin-top:6rem}
.legal-wrap h3{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin-top:1.8rem;font-weight:400}
.legal-wrap p{margin-top:.7rem} .legal-wrap a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.nf{min-height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8rem 1rem 2rem}
.num404{font-family:var(--mono);font-size:clamp(5rem,18vw,10rem);line-height:1;color:var(--accent);margin-top:1rem;letter-spacing:-.06em}
.nf p{margin:1.2rem 0 2rem;max-width:26rem}

/* ── Kundenportal ──────────────────────────────────────────── */
.pt-body{max-width:56rem}
.pt-body h2{font-size:1.7rem;margin-bottom:.4rem}
.pt-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:clamp(1.5rem,3vw,2.4rem);margin-top:1.6rem}
.pt-card.narrow{max-width:30rem}
.pt-body label{display:block;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;color:var(--muted);margin-top:1.2rem}
.pt-body label.inline{display:inline;margin:0;font-size:.66rem}
.pt-actions{margin-top:1.4rem}
.pt-note{color:var(--accent);font-size:.92rem;margin-top:1.2rem}
.pt-err{color:var(--danger)!important;font-size:.92rem;margin-top:1.2rem}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;margin-top:1.2rem}
.pt-grid a{display:block;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px}
.pt-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pt-grid a:hover img{transform:scale(1.05)}
.pt-meta{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;color:var(--faint)}
.pt-entry{border-top:1px solid var(--line);padding:2rem 0}
.pt-entry .txt{max-width:44rem;margin-top:.6rem;white-space:pre-line}
.pt-link{margin-top:1.1rem}
.pt-body table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.95rem}
.pt-body td{padding:.8rem .4rem;border-bottom:1px solid var(--line);vertical-align:middle}
.pt-body td.r{text-align:right}
.pt-body form.inline{display:inline-flex;gap:.5rem;align-items:center;flex-direction:row}
.pt-contact{margin-top:2.4rem;font-size:.85rem;color:var(--faint)}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:2.8rem}
.pw-eye{position:absolute;right:0;top:50%;transform:translateY(-50%);width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.pw-eye:hover,.pw-eye[aria-pressed=true]{color:var(--accent)}

/* ── Unterseiten: Glas fuer Kacheln/Karten ─────────────────── */
.phero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46rem 26rem at 82% 10%,rgba(var(--g),.08),transparent 70%),radial-gradient(circle,rgba(238,237,232,.045) 1px,transparent 1.3px) 0 0/28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.cards,.stats{gap:var(--gap);background:none;border:0;border-radius:0;overflow:visible}
.card-s,.stat,.pt-card{position:relative;border-radius:var(--win-r);background:var(--glass-solid);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px -28px rgba(0,0,0,.8)}
.steps li{border-top:0;padding:1.4rem 1.4rem 1.6rem;border-radius:var(--win-r);background:var(--glass-solid);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.steps li .num{color:var(--accent)}
.form-win form{padding:clamp(1.3rem,3vw,2rem)}
.form-win input,.form-win textarea{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.1)}
.cinfo{align-self:start}
.fl-quiet{color:var(--faint)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media(min-width:760px){.card-s,.stat,.pt-card,.steps li{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}}
}

/* ── Footer + tmux-Statuszeile ─────────────────────────────── */
footer#site-footer{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(17,18,21,.7),var(--bg))}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);padding:clamp(3.5rem,7vw,5.5rem) 0 2.6rem}
.foot-brand{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;font-size:1.25rem;letter-spacing:-.015em}
.foot-brand img{height:1.4rem;width:auto}
.foot p{font-size:.94rem;max-width:22rem;margin-top:1.1rem}
.foot-h{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:400;margin-bottom:1.1rem}
.fl{display:block;font-size:.94rem;color:var(--muted);padding:.3rem 0;transition:color .3s;overflow-wrap:anywhere}
a.fl:hover,a.addr-link:hover .fl{color:var(--ink)}
.fl-legal{margin-top:.8rem}
.foot-areas{border-top:1px solid var(--line);padding:1.8rem 0 clamp(2rem,4vw,3rem)}
.foot-areas div{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.foot-areas .fl{display:inline}
.credit:hover{color:var(--ink)}
.tmux{border-top:1px solid var(--line);background:#09090b;font-family:var(--mono);font-size:.68rem;color:var(--faint)}
.tmux-in{display:flex;align-items:stretch;flex-wrap:wrap;min-height:1.9rem}
.tmux-in>span{display:flex;align-items:center;padding:.35rem .75rem;white-space:nowrap}
.tm-s{background:var(--accent);color:var(--on-accent);font-weight:500;padding:0 .8rem!important}
.tm-w{background:rgba(255,255,255,.06);color:var(--ink)}
.tm-w::before{content:'1:';color:var(--faint)}
.tm-w::after{content:'*';color:var(--accent);margin-left:.15rem}
.tm-p{color:var(--muted)}
.tm-k{margin-left:auto;gap:.45rem}
.tm-k::before{content:'';width:5px;height:5px;border-radius:50%;background:#8fd18a;opacity:.85}
.tm-r{font-variant-numeric:tabular-nums;background:rgba(255,255,255,.04);color:var(--muted)}
.tm-cr a:hover{color:var(--ink)}
@media(max-width:700px){.tm-rr{display:none}}
/* Handy: Statuszeile bleibt EINE Zeile (28 px) */
@media(max-width:560px){.tmux-in>.tm-k,.tm-rn{display:none}.tmux-in{flex-wrap:nowrap}.tm-r{margin-left:auto}}
@media(max-width:360px){.tm-p{display:none}}
.foot{padding-bottom:clamp(2.4rem,5vw,3.4rem)}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1080px){
  .stats,.steps{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .brand{position:relative;z-index:1200}
  .nav{padding-right:.35rem}
  .tools{margin-left:auto;position:relative;z-index:1200}
  .menu{position:fixed;inset:0;z-index:1100;background:#0b0c0e;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.2rem;padding:clamp(6.5rem,16vh,8rem) 1.5rem max(1.6rem,env(safe-area-inset-bottom));overflow-y:auto;opacity:0;visibility:hidden;transition:.4s var(--ease)}
  .menu::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(30rem 24rem at 85% 0%,rgba(var(--g),.09),transparent 70%)}
  .menu.mobile{opacity:1;visibility:visible}
  .menu a{font-size:clamp(1.8rem,8vw,2.4rem);font-weight:500;letter-spacing:-.03em;color:var(--ink);padding:.7rem 0;border-radius:0;border-bottom:1px solid var(--line)}
  .menu a:hover{background:none;color:var(--accent)}
  .menu a.active::after{left:auto;right:0;top:50%;bottom:auto;width:8px;height:8px}
  .menu a[href^="/contact"]{border:0;border-bottom:1px solid var(--line);margin:0}
  .menu-foot{margin-top:auto;padding-top:2.4rem;display:grid;gap:1.1rem}
  .menu .menu-foot a.btn{font-size:1rem;font-weight:500;letter-spacing:-.005em;color:var(--on-accent);padding:.95rem 1.5rem;min-height:3.4rem;border:1px solid rgba(255,240,190,.7);border-radius:999px}
  .menu-mail{font-size:.95rem;color:var(--muted);text-align:center}
  .menu .menu-mail a{display:inline;font-size:inherit;font-weight:400;letter-spacing:0;padding:0 0 1px;border:0;border-bottom:1px solid var(--accent);color:var(--ink)}
  html.menu-open,html.menu-open body{overflow:hidden}
  .burger{display:flex}
  .statement,.contact-grid,.cards{grid-template-columns:1fr}
  .more-item{grid-template-columns:1fr auto} .more-item .ty{display:none}
  body.menu-lock{position:fixed;width:100%;overflow:hidden}
}
@media(max-width:560px){
  .stats,.steps,.foot{grid-template-columns:1fr}
  .cline{grid-template-columns:1fr;gap:.2rem}
  .pt-body td.r{text-align:left;display:block}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal,.fade-up{opacity:1;transform:none}
  .t-cur,.term-live::before{animation:none}
}

/* ── Waybar: Workspace-Chip fuer kleine Bildschirme ────────── */
.ws-chip{display:inline-flex;align-items:center;gap:.1rem;min-width:0;height:1.95rem;padding:0 .6rem 0 .3rem;margin-left:.15rem;border-radius:9px;
  font-family:var(--mono);font-size:.68rem;color:var(--faint);white-space:nowrap;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ws-chip b{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;border-radius:6px;font-weight:500;color:var(--on-accent);background:var(--accent);box-shadow:0 0 10px rgba(var(--g),.45)}
.ws-chip i{font-style:normal;margin:0 .45rem 0 .25rem;color:var(--faint)}
.ws-chip span{overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:7.2rem;color:var(--muted);text-transform:lowercase}
@media(min-width:1180px){.ws-chip{display:none}}
@media(max-width:359px){.ws-chip span{display:none}.ws-chip i{margin-right:0}}
@media(max-width:880px){.ws-chip{position:relative;z-index:1200}html.menu-open .ws-chip{visibility:hidden}}
/* Glanz auf dem Glas-Kopf, wenn der Lichtkegel vorbeistreicht (JS setzt --glx) */
.nav::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(9rem 3.2rem at var(--glx,50%) 0%,rgba(255,240,200,.3),rgba(var(--g),.1) 45%,transparent 75%);
  box-shadow:inset 0 1px 0 rgba(255,243,210,.0)}
header#site-header.beam-hit .nav::after{opacity:1}
.nav::before{transition:background-color .4s,border-color .35s}
header#site-header.beam-hit .nav::before{border-color:rgba(var(--g),.35)}

/* ── Audit: Hinweis = Einladung, keine "Live"-Pruefung ────── */
.t-cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.25rem;border-top:1px solid rgba(255,255,255,.06);
  font-family:var(--sans);font-size:.9rem;color:var(--ink);background:rgba(255,255,255,.02);transition:background-color .18s,color .18s}
.t-cta .arr{color:var(--accent);transition:transform .45s var(--ease)}
.t-cta:hover{background:rgba(var(--g),.06);color:var(--accent-2)} .t-cta:hover .arr{transform:translateX(4px)}
@media(min-width:1000px){.t-cta{padding:.9rem 1.6rem}}

/* ── Kontakt: naechste Schritte ────────────────────────────── */

.next{display:grid;gap:var(--gaps-in);padding:var(--gaps-in)}
.next li{display:flex;gap:1rem;align-items:baseline;padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);background:rgba(255,255,255,.022)}
.next .num{color:var(--accent)}
.next b{display:block;font-weight:500;color:var(--ink);margin-bottom:.15rem}
.next li>span:last-child{color:var(--muted);font-size:.94rem;line-height:1.5}

/* ── Barrierefreiheit: weniger Transparenz / mehr Kontrast -> feste Flaechen ── */
@media(prefers-reduced-transparency:reduce){
  .win,.hero .win,.card-s,.stat,.pt-card,.steps li{background-color:#17171a!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav::before{background:#141518!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .ws-sec::before,.ws-sec::after,.halo,.sea{opacity:.45}
}
@media(prefers-contrast:more){
  :root{--muted:#d4d4ce;--faint:#b9b9b2;--glass-line:rgba(255,255,255,.3);--line:rgba(238,237,232,.24);--line-2:rgba(238,237,232,.4)}
  .win,.hero .win,.card-s,.stat,.pt-card,.steps li{background-color:#111113!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.32)}
  .nav::before{background:#0f1012!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.32)}
  .win::before{display:none}
  .hero h1 em{color:var(--accent-2)}
  .sec-list li,.opt,.next li,.promises li{border-color:rgba(255,255,255,.28)}
}

/* ── Handy-Kopf: Sprachwahl wandert ins Menue, damit der Workspace-Chip Platz hat ── */
.menu-langs{display:none}
@media(max-width:880px){
  .tools .lang{display:none}
  .nav{gap:.6rem}
  .menu-langs{display:flex;justify-content:center;gap:.4rem;margin:0}
  .menu .menu-langs a{font-family:var(--mono);font-size:.78rem;font-weight:400;letter-spacing:.04em;padding:.5rem .8rem;border:1px solid var(--line);border-radius:9px;color:var(--muted)}
  .menu .menu-langs a.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
  .menu .menu-langs a.on::after{display:none}
}

/* ── Logo-Reveal beim Betreten (einmal pro Sitzung; reduced-motion: aus) ── */
.intro{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;background:#0b0c0e;cursor:pointer;
  animation:introOut .45s 1.15s cubic-bezier(.65,0,.35,1) forwards}                 /* gesamt 1,6 s */
.intro.is-skip{animation:introOut .28s ease forwards}
.intro-logo{width:min(72vw,400px);animation:introLogo 1.6s cubic-bezier(.22,1,.36,1) forwards}
.intro svg{display:block;width:100%;height:auto;overflow:visible}
.intro svg > g:first-of-type{opacity:0;animation:iFade .4s .04s ease-out forwards}
.intro .lg-lamp{animation:iLamp 1.1s .14s ease-out forwards}
.intro .lg-beam{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);opacity:0;animation:iBeam .65s .28s cubic-bezier(.22,1,.36,1) forwards}
.intro .w1 path,.intro .w2 path{opacity:.05;animation:iLetter .42s ease-out forwards}
.intro .w1 path:nth-child(1){animation-delay:.4s}.intro .w1 path:nth-child(2){animation-delay:.45s}.intro .w1 path:nth-child(3){animation-delay:.5s}
.intro .w1 path:nth-child(4){animation-delay:.55s}.intro .w1 path:nth-child(5){animation-delay:.6s}
.intro .w2 path{animation-delay:.67s}.intro .w2 path:nth-child(n+3){animation-delay:.71s}.intro .w2 path:nth-child(n+5){animation-delay:.75s}
.intro-glow{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,209,107,.16),transparent 70%);opacity:0;animation:iGlow 1.4s .18s ease-out forwards}
@keyframes iFade{to{opacity:1}}
@keyframes iLamp{0%{filter:none}35%{filter:drop-shadow(0 0 6px #f2d16b) drop-shadow(0 0 18px rgba(242,209,107,.7))}100%{filter:drop-shadow(0 0 3px rgba(242,209,107,.6))}}
@keyframes iBeam{to{transform:scaleX(1);opacity:1}}
@keyframes iLetter{0%{opacity:.05;filter:none}45%{opacity:1;filter:drop-shadow(0 0 10px rgba(242,209,107,.55))}100%{opacity:1;filter:none}}
@keyframes iGlow{40%{opacity:1}100%{opacity:.55}}
@keyframes introLogo{0%{transform:scale(.97)}100%{transform:scale(1.015)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}

/* ── Showreel-Fenster ── */
.reel-sec{padding-top:clamp(1.5rem,3vw,2.5rem)}
.reel .reel-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0c0e}
.reel .reel-media img,.reel .reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .reel-media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(11,12,14,.75)),radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.06),transparent 60%)}
.reel-cap{position:absolute;left:clamp(1rem,2.4vw,2rem);right:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.5rem;z-index:2}
.reel-t{font-size:clamp(1.15rem,2.2vw,1.8rem);font-weight:500;letter-spacing:-.015em;color:var(--ink);max-width:34ch;line-height:1.2}


/* ══ Unterseiten in Design D (Estúdio, Kontakt, Legal, 404, Portal, Themenseiten) ══ */
/* Typo: lange Woerter (DE/RU) duerfen nie horizontal scrollen */
h1,h2,h3,.big,.fl,.cline .v,.t-v{overflow-wrap:break-word}
@media(max-width:700px){
  :lang(de) :is(h2,h3,p),:lang(ru) :is(h2,h3,p){-webkit-hyphens:auto;hyphens:auto}
}
/* Display-Headlines nie automatisch trennen (ein Bindestrich in der Hauptzeile wirkt kaputt) */
.hero h1,.phero h1,.nf-h,.big,.mission h2,.cta-sec h2{-webkit-hyphens:manual;hyphens:manual}
@media(max-width:699px){:lang(ru) .hero h1{max-width:10.6ch}}   /* "с которыми" passt in eine Zeile, Turm bleibt frei */
.phero-sub h1 em{color:var(--accent-2);text-shadow:0 0 34px rgba(var(--g),.28)}
.phero-sub .eyebrow .lamp{margin-right:0}
.sub-sec.pad{padding:clamp(2.5rem,4.4vw,4rem) 0}
.sub-sec + .cta-sec{padding-top:clamp(2rem,4vw,3.5rem)}
.prose p{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.68;max-width:38rem}
.prose p+p{margin-top:1.1rem}
.prose h2+p{margin-top:1rem}
.reel-t span{color:var(--muted)}

/* Estúdio: Idee */
.idea-quote{display:flex;flex-direction:column}
.idea-quote .win-body{display:flex;flex-direction:column;justify-content:space-between;gap:2.4rem;flex:1}
.idea-quote .big{max-width:18ch}
.idea .win-body.prose{padding:clamp(1.5rem,3vw,2.6rem)}
@media(min-width:960px){.idea{grid-template-columns:5fr 7fr}.idea-quote .win-body{padding:clamp(1.6rem,3vw,2.6rem);min-height:20rem}}
.diff .win{min-height:0}
@media(min-width:760px){.diff .win{min-height:14rem}}
/* Estúdio: Beweis + Sprachen */
.proof-tiles{align-items:stretch}
@media(min-width:960px){.proof-tiles{grid-template-columns:7fr 5fr}}
.langs-win .win-body{display:flex;flex-direction:column;gap:1rem;height:calc(100% - 2.45rem)}
.langs-h{font-size:clamp(1.5rem,2.3vw,2rem);margin-top:.3rem}
.langs-h span{color:var(--faint)}
.langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--gaps-in);margin-top:auto;padding-top:.6rem}
.langs li{display:flex;align-items:baseline;gap:.7rem;padding:.8rem .95rem;border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);background:rgba(255,255,255,.022);color:var(--ink);font-size:.98rem;transition:border-color .18s,background-color .18s}
.langs li b{font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--accent)}
.langs li:hover{border-color:rgba(var(--g),.3);background:rgba(var(--g),.05)}

/* Kontakt */
.contact-grid{grid-template-columns:5fr 7fr}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.fld-row{display:grid;gap:1.1rem}
@media(min-width:600px){.fld-row{grid-template-columns:1fr 1fr}}
select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;cursor:pointer;
  background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23f2d16b' stroke-width='1.5'/%3E%3C/svg%3E") right 1rem center/14px no-repeat}
.form-win select{background-color:rgba(0,0,0,.22);border-color:rgba(255,255,255,.1)}
.form-win input:hover,.form-win textarea:hover,.form-win select:hover{border-color:rgba(255,255,255,.2)}
.form-win input:focus,.form-win textarea:focus,.form-win select:focus{border-color:var(--accent)}
.form-win .btn[type=submit]{align-self:flex-start;min-width:14rem}
@media(max-width:600px){.form-win .btn[type=submit]{align-self:stretch}}
.form-prefill{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;color:var(--accent-2)}
.form-prefill[hidden]{display:none}
.cl-langs{display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.cline .v{min-width:0}

/* Legal */
.legal-grid{display:grid;gap:var(--gaps-in);align-items:start}
@media(min-width:960px){.legal-grid{grid-template-columns:4fr 8fr}.legal-toc{position:sticky;top:6.2rem}}
.toc{display:grid;gap:4px;padding:var(--gaps-in);counter-reset:none}
.toc a{display:flex;gap:.9rem;align-items:baseline;padding:.65rem .8rem;border-radius:10px;color:var(--muted);font-size:.95rem;transition:color .18s,background-color .18s}
.toc a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.toc a:hover .num{color:var(--accent)}
.legal-win .win-body{padding:clamp(1.4rem,3.4vw,3rem)}
.legal-win p{max-width:42rem;line-height:1.7}
.imprint{display:grid;gap:var(--gaps-in);margin-top:1.3rem}
@media(min-width:600px){.imprint{grid-template-columns:1fr 1fr}}
.imprint>div{padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);background:rgba(255,255,255,.022)}
.imprint dt{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:.4rem}
.imprint dd{color:var(--ink);overflow-wrap:anywhere}
.imprint dd .v{color:var(--muted)}

/* 404 */
.nf{min-height:86vh;padding:clamp(8rem,18vh,11rem) 0 clamp(3rem,8vh,5rem);text-align:left;align-items:stretch}
.nf-in{display:flex;flex-direction:column;align-items:flex-start}
.nf-h{font-size:clamp(2.5rem,7vw,5.6rem);letter-spacing:-.045em;line-height:.98;margin-top:1.2rem;max-width:14ch}
.nf-h em{color:var(--accent-2);text-shadow:0 0 34px rgba(var(--g),.28)}
.nf-term{width:100%;max-width:40rem;margin-top:clamp(2rem,5vw,3rem)}
.nf-out{margin-top:.7rem}
.nf-out .t-ok{color:var(--danger)}
.nf .nf-p{margin:1.2rem 0 0;max-width:30rem;font-family:var(--sans);font-size:1rem;line-height:1.6}

/* Portal: Karten = Glas-Fenster */
.pt-body{max-width:none}
.pt-card{padding:0;margin-top:var(--gaps-in);overflow:hidden}
.pt-card.narrow{max-width:32rem}
.pt-card>*:not(.win-bar){margin-inline:clamp(1.2rem,3vw,2rem)}
.pt-card>.win-bar+*{margin-top:clamp(1.2rem,2.6vw,1.8rem)}
.pt-card>*:last-child{margin-bottom:clamp(1.3rem,3vw,2rem)}
.pt-card>.win-bar{margin:0}
.pt-card h2{font-size:clamp(1.3rem,2vw,1.6rem)}
.pt-entry{border-top:0;padding:0}
.pt-entry .pt-meta{display:block}
.pt-body>p:first-child{margin-bottom:.4rem}
.pt-contact a{color:var(--muted);border-bottom:1px solid rgba(var(--g),.6)}
.pt-body select,.pt-body input:not([type=checkbox]):not([type=file]),.pt-body textarea{background-color:rgba(0,0,0,.22);border-color:rgba(255,255,255,.1)}
.pt-body{max-width:60rem}

/* Themenseiten */
.topic-tiles{align-items:stretch}
@media(min-width:900px){.topic-tiles{grid-template-columns:1fr 1fr}.topic-tiles.one{grid-template-columns:1fr}}
.topic-tiles .win-body{padding:clamp(1.5rem,3vw,2.6rem)}
.topic-tiles .h2m{margin-top:0}
.faq{padding:.2rem clamp(1.2rem,3vw,2rem)}
.faq details:first-child{border-top:0}
.faq details:last-child{border-bottom:0}
.faq summary{padding:.1rem 0}
.faq summary:hover{color:var(--accent-2)}
.more-h{font-size:clamp(1.4rem,2.2vw,1.9rem);padding:clamp(1.3rem,3vw,2rem) clamp(1.2rem,3vw,2rem) .8rem}
.topic-more .more-list{border-top:0;padding:0 clamp(1.2rem,3vw,2rem) .6rem}
.topic-more .more-item:last-child{border-bottom:0}

/* Footer */
.fl-mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em}

/* Fokus: gut sichtbar auf Glas, ohne Layoutsprung */
.win a:focus-visible,.btn:focus-visible,.toc a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.opt:has(input:focus-visible){border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--g),.18)}
.calc .opt input:focus-visible{outline:none}
.sec-list li:hover,.langs li:hover{cursor:default}
.nf-term .hero-cta{margin-top:1.6rem}
.nf-term .btn{font-family:var(--sans);font-size:.95rem}
/* Handy: Formular direkt nach den Kontaktdaten, naechste Schritte danach */
@media(max-width:880px){.contact-grid .cinfo{display:contents}.contact-grid .info-win{order:1}.contact-grid .form-win{order:2}.contact-grid .next-win{order:3}}

/* ══ Feinschliff Review-Runde (26.10.2026) ══════════════════════ */
/* Tag-Zeilen: Begriffe brechen nie, der Trenner haengt am vorigen Begriff -> keine Zeile beginnt mit "·" */
.tags .tg{white-space:nowrap}
.tags .tg:not(:last-child)::after{content:'·';margin-left:.6em;color:var(--faint)}

/* Waybar auf Unterseiten ohne eigene Sektionen: eine aktive Pille "~/seite" */
.ws-one{pointer-events:none}
@media(min-width:1180px){
  .ws-one .on{display:inline-flex;align-items:center;gap:.15rem;height:1.7rem;padding:0 .65rem 0 .45rem;border-radius:7px;font-family:var(--mono);font-size:.7rem;
    color:var(--accent);background:rgba(var(--g),.13);box-shadow:inset 0 0 0 1px rgba(var(--g),.28)}
  .ws-one .on b{font-weight:500}
}
.ws-one .on>span,.ws-chip-one span{text-transform:lowercase}

/* Sprachmenue: Glas-Fenster mit Titelleiste, feste Spalte fuer den Punkt (alle Namen fluchten) */
.lang-list{padding:0 0 .4rem;overflow:hidden;background:rgba(22,23,27,.94);border-radius:var(--tile-r)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lang-list{background:rgba(20,21,24,.62);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
}
.lang-list{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 50px -20px rgba(0,0,0,.85)}
.lang-bar{display:flex;align-items:center;gap:.55rem;height:2.25rem;padding:0 .8rem 0 .55rem;margin-bottom:.35rem;border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:.68rem;color:var(--faint);background:rgba(255,255,255,.02)}
.lang-bar .wsn{color:var(--on-accent);background:var(--accent);box-shadow:0 0 10px rgba(var(--g),.45)}
.lang-list a{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:.55rem;margin:0 .35rem;padding:.5rem .6rem}
.lang-list a.active::before{content:none}
.lang-list a i{justify-self:center;width:5px;height:5px;border-radius:50%}
.lang-list a.active i{background:var(--accent);box-shadow:0 0 8px rgba(var(--g),.7)}
.lang-list a b{font-family:var(--mono);font-size:.64rem;font-weight:400;color:var(--faint);text-transform:uppercase}

/* Menue: auf dem Desktop unsichtbare Huelle; auf dem Handy ein Fenster "~/menu" mit Indizes */
.menu-bar,.mi{display:none}
@media(min-width:881px){.menu-list{display:contents}}
@media(max-width:880px){
  .menu{padding-top:clamp(5.6rem,13vh,7rem)}
  .menu-bar{display:flex;align-items:center;gap:.6rem;min-height:2.45rem;padding:.35rem .9rem .35rem .7rem;font-family:var(--mono);font-size:.7rem;color:var(--faint);
    border:1px solid var(--glass-line);border-bottom-color:rgba(255,255,255,.06);border-radius:var(--win-r) var(--win-r) 0 0;
    background:linear-gradient(118deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 40%),rgba(22,22,25,.6);box-shadow:inset 0 1px 0 var(--glass-hi)}
  .menu-bar .wsn{color:var(--on-accent);background:var(--accent);box-shadow:0 0 12px rgba(var(--g),.5)}
  .menu-bar .win-m{margin-left:auto}
  .menu-list{display:flex;flex-direction:column;padding:.15rem 1.15rem .35rem;border:1px solid var(--glass-line);border-top:0;border-radius:0 0 var(--win-r) var(--win-r);
    background:rgba(22,22,25,.6);box-shadow:0 30px 70px -32px rgba(0,0,0,.85)}
  .menu .menu-list a{display:flex;align-items:baseline;font-size:clamp(1.6rem,7.4vw,2.1rem);padding:.65rem 0}
  .menu .menu-list a:last-child{border-bottom:0}
  .mi{display:inline-block;flex:none;width:2.6rem;font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:0;color:var(--faint);transform:translateY(-.55em)}
  .menu .menu-list a.active,.menu .menu-list a.active .mi{color:var(--accent)}
}

/* Hero-Buttons: auf dem Handy gleich breit untereinander (Regel oben); Glas-Knopf im Showreel */
.reel-toggle{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;margin:-.2rem -.4rem -.2rem 0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.12);transition:background-color .2s,box-shadow .2s}
.reel-toggle:hover{background:rgba(var(--g),.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(var(--g),.5)}
.reel-toggle[hidden]{display:none}
.rt-i{display:block;width:8px;height:9px;border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.reel-toggle[aria-pressed=true] .rt-i{width:0;height:0;margin-left:2px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink)}
@media(prefers-reduced-motion:reduce){.reel-toggle{display:none}}

/* Preisrechner (Handy): schwebende Glasleiste mit der Live-Schaetzung, solange die Optionen im Bild sind */
.calc-mini{display:none}
@media(max-width:959px){
  .calc-mini{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:.5rem;justify-self:center;width:fit-content;max-width:100%;margin:-3.4rem auto 0;
    padding:.65rem 1.05rem;border-radius:999px;font-family:var(--mono);font-size:.74rem;color:var(--muted);white-space:nowrap;
    background:rgba(20,21,24,.86);border:1px solid rgba(var(--g),.38);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px -12px rgba(0,0,0,.85),0 0 26px -10px rgba(var(--g),.45);
    opacity:0;translate:0 10px;pointer-events:none;transition:opacity .3s,translate .4s var(--ease)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.calc-mini{background:rgba(20,21,24,.62);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}}
  .calc-mini.is-on{opacity:1;translate:0 0;pointer-events:auto}
  .calc-mini b{font-family:var(--sans);font-size:1.02rem;font-weight:500;letter-spacing:-.02em;color:var(--accent-2)}
  .calc-mini .cm-m{color:var(--ink)}
  .calc-mini .arr{margin-left:.15rem;color:var(--accent)}
}

/* Themenseiten: ungerade Anzahl -> letztes Fenster ueber die volle Breite */
@media(min-width:900px){.topic-tiles>.win:last-child:nth-child(odd){grid-column:1/-1}}

/* Unterseiten: Leuchtturm am Horizont (ruhig, gedimmt), Kegel ruht auf dem goldenen Wort */
.has-lh{position:relative;overflow:hidden}
.lh{position:absolute;inset:0;z-index:0;pointer-events:none;--lx:87%;--lh:78px;--cliff:0px;--lw:calc(var(--lh) / 3)}
@media(min-width:760px){.lh{--lx:85%;--lh:108px}}
@media(min-width:1100px){.lh{--lx:82%;--lh:128px}}
.lh .halo{opacity:.6}
.lh .tower{opacity:.9}
.lh .beam i{transform:rotate(-166deg);opacity:.8;transition:opacity 1.4s var(--ease)}
html:not(.no-js) .lh:not(.aimed):not(.lh-search) .beam i{opacity:0}
.lh .horizon{position:absolute;left:0;right:0;bottom:0}
.phero.has-lh .wrap,.nf.has-lh .wrap{position:relative;z-index:2}
@media(max-width:759px){
  .phero.has-lh{padding-bottom:calc(var(--lhp,78px) + 2rem)}
  .phero.phero-tight.has-lh{padding-bottom:calc(78px + 1.4rem)}
  .nf.has-lh{padding-bottom:calc(78px + 2.5rem)}
}
@media(min-width:760px){.phero.phero-tight.has-lh{padding-bottom:clamp(2rem,4vw,3rem)}}
/* 404: der Kegel sucht langsam hin und her und kommt nicht zur Ruhe */
.lh-search .beam{--bl:min(78vw,1100px)}
@media(prefers-reduced-motion:no-preference){
  .lh-search .beam i{animation:lhSearch 7.5s ease-in-out infinite alternate}
  @keyframes lhSearch{from{transform:rotate(-178deg)}to{transform:rotate(-132deg)}}
}

/* Estúdio: Leitsatz ausbalanciert, Licht direkt am Satz */
.big{text-wrap:balance}
.idea-quote .win-body{justify-content:center}
.idea-quote .big .mis-lamp{display:inline-block;width:8px;height:8px;margin:0 .75em 0 .1em;vertical-align:.22em}

/* Estúdio: Zusammenarbeit als Zeitleiste (was Sie bei jedem Schritt erhalten) */
.tl{display:grid;gap:var(--gaps-in);padding:var(--gaps-in)}
.tl-step{position:relative;display:flex;flex-direction:column;padding:1.25rem 1.25rem 1.3rem;border:1px solid rgba(255,255,255,.065);border-radius:var(--tile-r);background:rgba(255,255,255,.022)}
.tl-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.tl-n{font-family:var(--mono);font-size:.72rem;color:var(--accent)}
.tl-head .chip{margin-left:auto}
.tl-step h3{font-size:clamp(1.25rem,1.7vw,1.45rem);margin-bottom:.6rem}
.tl-step p{font-size:.95rem}
.tl-step p.tl-r{margin-top:auto;padding-top:1.2rem;color:var(--ink);font-size:.93rem;line-height:1.45}
.tl-step p:not(.tl-r){margin-bottom:1.3rem}
.tl-r{border-top:1px dashed var(--line-2)}
.tl-rl{display:block;margin:.9rem 0 .3rem;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.tl-step p.tl-r{padding-top:0}
@media(min-width:700px){.tl{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){
  .tl{grid-template-columns:repeat(4,1fr)}
  .tl-step:not(:last-child)::after{content:'';position:absolute;top:1.95rem;right:calc(-1 * var(--gaps-in) - 1px);width:calc(var(--gaps-in) + 2px);height:1px;background:rgba(var(--g),.55)}
}

/* Leistung: Glas-Unschaerfe nur, solange die Sektion im Bild ist (home.js setzt .in-view) */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media(min-width:760px){.ws-sec:not(.in-view) .win{background-color:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
}

/* Formular: fehlerhafte Felder */
.form-win [aria-invalid=true]{border-color:var(--danger)}
/* tmux-Zeile: der Pfad gibt nach (Auslassungspunkte), nie die Seitenbreite */
.tmux-in>.tm-p{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.2rem;padding-block:.35rem}