/* =========================================================================
   DolomindAI — VOM CHAOS ZUR STRUKTUR
   A scroll-scrubbed flight through a neural network (canvas) with content
   nodes layered above. Cool/dense chaos -> warm/ordered structure -> CTA.
   ========================================================================= */

:root {
  --night:#080E1A; --night2:#0B1422; --shadow:#162236;
  --glacier:#8AB2D6; --frost:#C4DCF0; --bone:#F0F4FA;
  --enros:#FFD88C; --enros2:#E5B079; --err:#E5675B; --ok:#7FCBA4;
  --hair:rgba(138,178,214,0.14); --hair-strong:rgba(138,178,214,0.28);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--night); }
body { background:var(--night); color:var(--bone); font-family:'Inter',sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:var(--enros); color:var(--night); }
a { color:inherit; }
img { display:block; max-width:100%; }

.display { font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.025em; }
.serif-i { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; }
.mono { font-family:'JetBrains Mono',monospace; letter-spacing:0.16em; text-transform:uppercase; }
.grad-amber { background:linear-gradient(180deg,#FFE9BE,var(--enros) 55%,var(--enros2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- the network world (fixed background) ---- */
#net-canvas { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; }
.veil { position:fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse at 50% 46%, rgba(8,14,26,0) 30%, rgba(8,14,26,0.38) 100%),
    linear-gradient(180deg, rgba(8,14,26,0.55) 0%, rgba(8,14,26,0.06) 16%, rgba(8,14,26,0.06) 84%, rgba(8,14,26,0.66) 100%); }

/* text-protection scrim: darken + softly blur the space directly behind text,
   feathered at the edges so it never reads as a box. Keeps copy legible. */
.hero-inner, #structure .container, #services .services-head, #process .phase-head, #haltung .sec-head, .core-eyebrow { position:relative; }
.hero-inner::before, #structure .container::before, #services .services-head::before,
#process .phase-head::before, #haltung .sec-head::before, .core-eyebrow::before {
  content:''; position:absolute; z-index:-1; inset:-26px -7% -30px -7%; pointer-events:none;
  background:radial-gradient(ellipse 92% 86% at 50% 48%, rgba(6,10,20,0.62), rgba(6,10,20,0.34) 58%, rgba(6,10,20,0) 100%);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  -webkit-mask:radial-gradient(ellipse 96% 92% at 50% 50%, #000 52%, transparent 100%);
  mask:radial-gradient(ellipse 96% 92% at 50% 50%, #000 52%, transparent 100%); }
.core-eyebrow::before { inset:-30px -10% -34px -10%; }
.grain { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.wrap { position:relative; z-index:5; }

#scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:60;
  background:linear-gradient(90deg,var(--glacier),var(--enros)); transform:scaleX(0); transform-origin:left; box-shadow:0 0 16px rgba(255,216,140,0.5); }

/* ---------------- HEADER ---------------- */
.site-header { position:fixed; top:0; left:0; right:0; z-index:50; border-bottom:1px solid transparent; transition:background .5s, backdrop-filter .5s, border-color .5s; }
.site-header.is-scrolled { background:rgba(8,14,26,0.7); backdrop-filter:blur(18px) saturate(120%); border-bottom-color:rgba(138,178,214,0.12); }
.header-inner { max-width:1480px; margin:0 auto; padding:0 clamp(20px,4vw,56px); height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .word { font-family:'Instrument Serif',serif; font-size:26px; color:var(--bone); line-height:1; }
.brand .ai { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; background:rgba(138,178,214,0.18); color:var(--frost); padding:3px 7px; border-radius:3px; }
nav.main { display:flex; gap:28px; }
nav.main a { color:rgba(196,220,240,0.72); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; position:relative; transition:color .3s; cursor:pointer; }
nav.main a .idx { color:rgba(255,216,140,0.8); margin-right:7px; }
nav.main a:hover, nav.main a.active { color:var(--bone); }
nav.main a::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--enros); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
nav.main a:hover::after, nav.main a.active::after { transform:scaleX(1); }
.header-cta { display:flex; align-items:center; gap:16px; }

.btn { position:relative; display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; padding:15px 26px; border-radius:2px; text-decoration:none; cursor:pointer; border:0; will-change:transform; }
.btn-primary { background:var(--enros); color:var(--night); overflow:hidden; box-shadow:0 0 0 rgba(255,216,140,0); transition:box-shadow .4s; }
.btn-primary::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, #FFF1D2, var(--enros) 60%); opacity:0; transition:opacity .4s; }
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover { box-shadow:0 18px 50px -18px rgba(255,216,140,0.7); }
.btn-primary .btn-label { position:relative; z-index:1; display:inline-flex; gap:10px; align-items:center; }
.btn-ghost { border:1px solid rgba(196,220,240,0.25); color:var(--frost); background:rgba(8,14,26,0.25); backdrop-filter:blur(6px); transition:border-color .35s,color .35s; }
.btn-ghost:hover { border-color:rgba(196,220,240,0.6); color:var(--bone); }
.btn-lg { padding:20px 36px; font-size:13px; }

/* ---------------- WAYFINDING MINI-MAP ---------------- */
.minimap { position:fixed; top:50%; right:clamp(14px,2.2vw,34px); transform:translateY(-50%); z-index:48; display:flex; flex-direction:column; }
.minimap .mm-rail { position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:rgba(138,178,214,0.18); }
.minimap .mm-fill { position:absolute; left:5px; top:6px; width:1px; height:0; background:linear-gradient(180deg,var(--glacier),var(--enros)); box-shadow:0 0 10px rgba(255,216,140,0.5); }
.mm-item { position:relative; display:flex; align-items:center; gap:12px; padding:10px 0; cursor:pointer; background:none; border:0; text-align:left; }
.mm-item .mm-dot { width:11px; height:11px; border-radius:50%; border:1px solid rgba(138,178,214,0.5); background:var(--night); flex:0 0 auto; transition:all .35s; z-index:1; }
.mm-item .mm-label { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(196,220,240,0.42); opacity:0; transform:translateX(6px); transition:all .35s; white-space:nowrap; }
.mm-item .mm-num { font-family:'JetBrains Mono',monospace; font-size:8px; color:rgba(255,216,140,0.7); margin-right:2px; }
.minimap:hover .mm-label { opacity:1; transform:translateX(0); }
.mm-item.active .mm-dot { border-color:var(--enros); background:var(--enros); box-shadow:0 0 0 4px rgba(255,216,140,0.14),0 0 16px rgba(255,216,140,0.6); }
.mm-item.active .mm-label, .mm-item:hover .mm-label { opacity:1; transform:translateX(0); color:var(--bone); }

/* ---------------- LAYOUT PRIMITIVES ---------------- */
.panel { position:relative; min-height:100vh; display:flex; align-items:center; }
.container { width:100%; max-width:1480px; margin:0 auto; padding:0 clamp(20px,5vw,88px); }
.kicker { display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--enros); }
.kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--enros); box-shadow:0 0 12px var(--enros); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.station-tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(138,178,214,0.55); display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.station-tag::before { content:''; width:34px; height:1px; background:rgba(255,216,140,0.6); }
.sec-head { display:grid; gap:16px; }
.sec-title { font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.025em; font-size:clamp(34px,5.5vw,80px); line-height:1; color:var(--bone); max-width:20ch; }
.sec-lead { color:rgba(196,220,240,0.74); font-size:clamp(15px,1.5vw,18px); line-height:1.6; max-width:60ch; }

/* ---------------- HERO / CHAOS ---------------- */
#hero { align-items:flex-start; padding-top:clamp(118px,17vh,210px); padding-bottom:90px; }
.hero-inner { will-change:transform,opacity,filter; }
.hero-title { margin-top:24px; }
.hero-line { display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(44px,9vw,144px); line-height:0.95; letter-spacing:-0.035em; color:var(--bone); }
.hero-sub { margin-top:26px; max-width:560px; color:rgba(196,220,240,0.82); font-size:clamp(16px,1.6vw,20px); line-height:1.6; }
.hero-ctas { margin-top:36px; display:flex; flex-wrap:wrap; gap:16px; }
.hero-meta { margin-top:44px; display:flex; flex-wrap:wrap; gap:30px; }
.hero-meta .hm { display:grid; gap:5px; }
.hero-meta .hm .l { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(138,178,214,0.5); }
.hero-meta .hm .v { font-size:14px; color:rgba(196,220,240,0.86); }
.scroll-hint { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(196,220,240,0.55); display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-hint .line { width:1px; height:38px; background:linear-gradient(180deg,var(--enros),transparent); animation:drop 2s infinite; }
@keyframes drop { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ---------------- STATION 01 · STRUKTUR ENTSTEHT ---------------- */
#structure { text-align:center; }
#structure .container { display:flex; flex-direction:column; align-items:center; gap:30px; }
.struct-tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(138,178,214,0.6); }
.struct-title { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(36px,7vw,108px); line-height:0.98; letter-spacing:-0.035em; color:var(--bone); max-width:16ch; }
.struct-lead { color:rgba(196,220,240,0.78); font-size:clamp(16px,1.6vw,20px); line-height:1.6; max-width:52ch; }
/* the dezent "Vorher" chaos chip — small, never large */
.beforeafter { display:flex; align-items:center; gap:20px; margin-top:8px; flex-wrap:wrap; justify-content:center; text-align:left; }
.ba-chip { position:relative; width:clamp(150px,20vw,230px); height:clamp(120px,15vw,168px); border-radius:8px; overflow:hidden; border:1px solid var(--hair-strong); will-change:transform,opacity; flex:0 0 auto; }
.ba-chip img { width:100%; height:100%; object-fit:cover; filter:saturate(0.85) brightness(0.7); }
.ba-cap { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(196,220,240,0.7); }
.ba-chip .ba-cap { position:absolute; left:10px; bottom:8px; color:var(--frost); z-index:2; }
.ba-chip.before::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(40,80,140,0.25),rgba(8,14,26,0.55)); }
.ba-arrow { color:var(--enros); font-family:'JetBrains Mono',monospace; letter-spacing:0.1em; font-size:18px; }

/* the "Nachher" = a real n8n/Make-style automation workflow */
.wf-board { position:relative; flex:1 1 480px; max-width:660px; min-width:300px; border:1px solid var(--hair-strong); border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg, rgba(16,26,42,0.92), rgba(9,15,26,0.92)); box-shadow:0 40px 90px -50px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,216,140,0.06) inset; will-change:transform,opacity; }
.wf-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--hair); }
.wf-tdot { width:9px; height:9px; border-radius:50%; }
.wf-name { margin-left:8px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(196,220,240,0.55); }
.wf-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ok); }
.wf-livedot { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2s infinite; }
.wf-flow { display:flex; align-items:center; gap:0; padding:clamp(20px,3vw,30px) clamp(16px,2.4vw,26px);
  background-image:radial-gradient(rgba(138,178,214,0.12) 1px, transparent 1px); background-size:18px 18px; }
.wf-node { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; padding:12px 12px 12px 14px; border-radius:10px;
  background:linear-gradient(160deg, rgba(22,34,54,0.95), rgba(13,22,36,0.95)); border:1px solid var(--hair-strong); border-left:3px solid var(--accent); }
.wf-node .wf-ic { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); margin-bottom:5px; }
.wf-node .wf-ic svg { width:17px; height:17px; }
.wf-node .wf-t { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--bone); letter-spacing:-0.01em; }
.wf-node .wf-s { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.04em; color:rgba(196,220,240,0.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* connector noodles between nodes */
.wf-conn { flex:0 0 26px; height:2px; position:relative; background:linear-gradient(90deg, rgba(138,178,214,0.4), rgba(255,216,140,0.5)); align-self:center; }
.wf-conn::before, .wf-conn::after { content:''; position:absolute; top:50%; width:6px; height:6px; border-radius:50%; background:var(--frost); transform:translateY(-50%); box-shadow:0 0 6px rgba(196,220,240,0.5); }
.wf-conn::before { left:-3px; } .wf-conn::after { right:-3px; }
.wf-board > .ba-cap { display:block; padding:0 14px 12px; }

/* ---------------- LEISTUNGEN + DEEP-DIVE ---------------- */
.section { position:relative; z-index:5; }
#services { padding:clamp(90px,15vh,190px) 0; }
.svc-grid { margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card { position:relative; padding:38px 32px 30px; min-height:320px; border-radius:6px; background:linear-gradient(160deg, rgba(22,34,54,0.55), rgba(8,14,26,0.34)); border:1px solid var(--hair); backdrop-filter:blur(14px) saturate(120%); display:flex; flex-direction:column; will-change:transform,opacity; transition:border-color .4s, transform .4s; overflow:hidden; }
.svc-card:hover { border-color:rgba(255,216,140,0.4); transform:translateY(-4px); }
.svc-card .svc-num { font-family:'Instrument Serif',serif; font-size:60px; color:rgba(138,178,214,0.28); line-height:1; }
.svc-card h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(24px,2.6vw,34px); color:var(--bone); margin-top:10px; letter-spacing:-0.02em; }
.svc-card .rule { height:1px; background:linear-gradient(90deg,rgba(138,178,214,0.4),transparent); margin:18px 0; }
.svc-card p { color:rgba(196,220,240,0.78); font-size:15px; line-height:1.6; }
.svc-card .svc-foot { margin-top:auto; padding-top:24px; }
/* subtle photo accent inside a card (training photo on 01, very dezent) */
.svc-card .svc-photo { position:absolute; inset:0; object-fit:cover; opacity:0.13; z-index:0; filter:saturate(0.85); }
.svc-card .svc-photo + * { position:relative; }
.svc-card > *:not(.svc-photo) { position:relative; z-index:1; }
.dd-toggle { display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--enros); background:none; border:0; cursor:pointer; padding:0; transition:gap .3s; }
.dd-toggle:hover { gap:14px; }
.dd-toggle .chev { transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.svc-card.open .dd-toggle .chev { transform:rotate(90deg); }
.svc-card .corner { position:absolute; width:14px; height:14px; border:1px solid rgba(255,216,140,0.35); z-index:2; }
.svc-card .c-tl { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.svc-card .c-br { bottom:-1px; right:-1px; border-left:0; border-top:0; }

.deepdive { overflow:hidden; height:0; opacity:0; transition:height .55s cubic-bezier(.22,1,.36,1), opacity .4s; }
.deepdive.open { opacity:1; margin-top:24px; }
/* mobile panels inside grid — hidden by default, shown via JS */
.deepdive-mobile { display:none; }
/* desktop panels outside grid — always in DOM flow */
.deepdive-desktop { display:block; }
.dd-inner { border:1px solid var(--hair); border-radius:8px; background:linear-gradient(160deg, rgba(11,20,34,0.72), rgba(8,14,26,0.55)); backdrop-filter:blur(14px); padding:clamp(28px,3.4vw,48px); }
.dd-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:1px solid var(--hair); padding-bottom:24px; margin-bottom:28px; }
.dd-head .dd-headtext { flex:1; min-width:280px; }
.dd-head h4 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(20px,2.2vw,30px); color:var(--bone); letter-spacing:-0.02em; max-width:34ch; }
.dd-head .dd-lead { color:rgba(196,220,240,0.72); font-size:14px; line-height:1.6; max-width:46ch; margin-top:10px; }
/* the workflow accent image (02 Umsetzung) */
.dd-figure { width:clamp(260px,34%,420px); border-radius:8px; overflow:hidden; border:1px solid var(--hair-strong); flex:0 0 auto; }
.dd-figure img { width:100%; height:auto; display:block; }
.dd-figure figcaption { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(138,178,214,0.6); padding:10px 12px; border-top:1px solid var(--hair); }
.dd-cols { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); }
.dd-block .dd-sub { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--glacier); margin-bottom:16px; }
.dd-list { list-style:none; display:grid; gap:11px; }
.dd-list li { position:relative; padding-left:22px; font-size:14.5px; line-height:1.55; color:rgba(196,220,240,0.82); }
.dd-list li::before { content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border:1px solid var(--enros); transform:rotate(45deg); }
.dd-deliv { display:grid; gap:14px; }
.dd-deliv .di { border-left:1px solid var(--hair-strong); padding-left:16px; }
.dd-deliv .di b { display:block; color:var(--bone); font-weight:500; font-size:14.5px; }
.dd-deliv .di span { color:rgba(196,220,240,0.66); font-size:13px; line-height:1.5; }
.dd-faq { margin-top:30px; border-top:1px solid var(--hair); padding-top:26px; display:grid; gap:18px; }
.dd-faq .q { font-family:'Space Grotesk',sans-serif; font-weight:500; color:var(--bone); font-size:15px; margin-bottom:6px; }
.dd-faq .a { color:rgba(196,220,240,0.7); font-size:13.5px; line-height:1.6; max-width:70ch; }
.dd-foot { margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.dd-tags { display:flex; flex-wrap:wrap; gap:8px; }
.dd-tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em; color:rgba(196,220,240,0.7); border:1px solid var(--hair-strong); padding:5px 10px; border-radius:2px; }

/* ---------------- STATION 03 · VIER PHASEN (synced progress bar) ----- */
#process { position:relative; min-height:260vh; }
.phaseflow { position:sticky; top:0; height:100vh; display:flex; align-items:center; }
.phaseflow .container { width:100%; }
.phase-head { margin-bottom:clamp(30px,5vh,56px); }
.phase-shell { display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,64px); align-items:stretch; }
.phase-progress { position:relative; width:3px; background:rgba(138,178,214,0.16); border-radius:2px; }
.phase-progress .pfill { position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(180deg,var(--glacier),var(--enros)); box-shadow:0 0 14px rgba(255,216,140,0.6); border-radius:2px; }
.phase-progress .pmark { position:absolute; left:50%; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:var(--night); border:1px solid rgba(138,178,214,0.5); transition:all .4s; }
.phase-progress .pmark.on { background:var(--enros); border-color:var(--enros); box-shadow:0 0 0 4px rgba(255,216,140,0.14),0 0 16px rgba(255,216,140,0.6); }
.phase-list { display:flex; flex-direction:column; justify-content:space-between; gap:clamp(14px,2vh,30px); }
.phase { opacity:0.16; transform:translateY(14px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.phase.on { opacity:1; transform:translateY(0); }
.phase .pmeta { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.16em; color:var(--enros); text-transform:uppercase; }
.phase h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(22px,2.8vw,40px); color:var(--bone); margin-top:8px; letter-spacing:-0.02em; }
.phase p { color:rgba(196,220,240,0.74); font-size:clamp(14px,1.4vw,16px); line-height:1.55; margin-top:8px; max-width:64ch; }

/* ---------------- STATION 04 · HALTUNG ---------------- */
#haltung { padding:clamp(80px,13vh,170px) 0; }
.principles { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:8px; overflow:hidden; }
.principle { background:linear-gradient(160deg, rgba(11,20,34,0.66), rgba(8,14,26,0.46)); padding:clamp(34px,3.5vw,52px); will-change:opacity,transform; }
.principle .pn { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.2em; color:rgba(138,178,214,0.6); text-transform:uppercase; }
.principle h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(26px,2.8vw,40px); color:var(--bone); margin:18px 0 16px; letter-spacing:-0.02em; }
.principle p { color:rgba(196,220,240,0.74); font-size:15px; line-height:1.65; }

/* ---------------- STATION 05 · KONTAKT (brightest node) ---------------- */
#contact { padding:clamp(90px,15vh,190px) 0 0; position:relative; overflow:hidden; }
.core-glow { position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); width:min(1200px,130vw); height:min(1200px,130vw); border-radius:50%; pointer-events:none; z-index:0; background:radial-gradient(circle, rgba(255,216,140,0.22) 0%, rgba(255,216,140,0.08) 32%, rgba(255,216,140,0) 64%); opacity:0; }
#contact .container { position:relative; z-index:1; }
.core-eyebrow { text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:54px; }
.core-eyebrow h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(36px,6vw,90px); line-height:0.98; letter-spacing:-0.03em; color:var(--bone); max-width:16ch; }
.core-eyebrow .sub { color:rgba(220,232,245,0.8); font-size:clamp(15px,1.5vw,18px); line-height:1.6; max-width:54ch; }
.contact-shell { position:relative; max-width:1100px; margin:0 auto; border:1px solid rgba(255,216,140,0.22); border-radius:8px; overflow:hidden; background:linear-gradient(160deg, rgba(20,28,42,0.9), rgba(8,14,26,0.72)); backdrop-filter:blur(18px); box-shadow:0 60px 160px -60px rgba(255,216,140,0.3); will-change:transform,opacity; }
.terminal-bar { display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid rgba(138,178,214,0.12); }
.terminal-bar .tdot { width:10px; height:10px; border-radius:50%; }
.terminal-bar .label { margin-left:14px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; color:rgba(196,220,240,0.55); text-transform:uppercase; }
.contact-body { display:grid; grid-template-columns:1fr 1fr; }
.contact-left { padding:clamp(36px,5vw,64px); border-right:1px solid rgba(138,178,214,0.12); }
.contact-left h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(24px,3vw,38px); line-height:1.08; letter-spacing:-0.025em; color:var(--bone); }
.contact-detail { margin-top:34px; display:grid; gap:22px; }
.contact-detail .lab { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.16em; color:rgba(138,178,214,0.5); text-transform:uppercase; margin-bottom:4px; }
.contact-detail a, .contact-detail .val { font-family:'Instrument Serif',serif; font-size:clamp(20px,2.2vw,28px); color:var(--bone); text-decoration:none; transition:color .3s; }
.contact-detail a:hover { color:var(--enros); }
.contact-micro { margin-top:30px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(138,178,214,0.5); line-height:2; }
.contact-right { padding:clamp(36px,5vw,64px); }
.field-group { position:relative; margin-bottom:34px; }
.field-group label { position:absolute; top:-16px; left:0; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; color:rgba(196,220,240,0.45); text-transform:uppercase; transition:color .3s; }
.field-group input, .field-group textarea, .field-group select { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(138,178,214,0.22); padding:12px 2px; color:var(--bone); font-family:'Inter',sans-serif; font-weight:300; font-size:16px; transition:border-color .3s,box-shadow .3s; resize:none; }
.field-group select option { background:var(--night2); color:var(--bone); }
.field-group input::placeholder, .field-group textarea::placeholder { color:rgba(196,220,240,0.32); }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus { outline:none; border-bottom-color:var(--enros); box-shadow:0 1px 0 0 var(--enros); }
.field-group:focus-within label { color:var(--enros); }
.form-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.form-foot .note { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; color:rgba(138,178,214,0.4); text-transform:uppercase; }
.contact-sent { display:none; }
.contact-sent .big { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:52px; color:var(--bone); }
.contact-sent p { color:rgba(196,220,240,0.78); margin-top:14px; line-height:1.6; max-width:38ch; }

footer { position:relative; z-index:5; margin-top:clamp(80px,12vh,150px); padding:48px 0; border-top:1px solid rgba(138,178,214,0.12); }
.footer-inner { max-width:1480px; margin:0 auto; padding:0 clamp(20px,5vw,88px); display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:center; }
.footer-inner .mono { font-size:10px; color:rgba(138,178,214,0.55); line-height:1.8; }
.footer-links { display:flex; gap:26px; justify-content:flex-end; }
.footer-links a { color:rgba(138,178,214,0.6); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; transition:color .3s; }
.footer-links a:hover { color:var(--bone); }

.menu-btn { display:none; background:none; border:0; color:var(--bone); cursor:pointer; padding:8px; }
.mobile-nav { display:none; }

@media (max-width:980px) {
  nav.main, .header-cta .btn-primary, .minimap { display:none; }
  html, body { overscroll-behavior-y: contain; }
  .wrap, .container { max-width:100%; }
  .beforeafter { flex-direction:column; align-items:center; }
  .wf-board { width:100%; max-width:100%; min-width:0; flex:none; }
  .hero-inner::before, #structure .container::before { display:none; }
  .menu-btn { display:inline-flex; }
  /* on mobile: show inline panels, hide the outside-grid desktop panels */
  .deepdive-mobile { display:block; }
  .deepdive-desktop { display:none !important; }
  .svc-grid { grid-template-columns:1fr; gap:18px; }
  .svc-card { min-height:0; }
  .principles { grid-template-columns:1fr; }
  .dd-cols { grid-template-columns:1fr; gap:28px; }
  .dd-figure { width:100%; }
  .contact-body { grid-template-columns:1fr; }
  .contact-left { border-right:0; border-bottom:1px solid rgba(138,178,214,0.12); }
  .footer-inner { grid-template-columns:1fr; gap:18px; }
  .footer-links { justify-content:flex-start; }
  .phaseflow { position:static; height:auto; padding:clamp(80px,12vh,150px) 0; }
  #process { min-height:auto; }
  /* space phases out so the bar steps forward one-by-one on scroll */
  .phase-list { gap:clamp(36px,8vh,90px); }
  .phase { min-height:32vh; display:flex; flex-direction:column; justify-content:center; }
  .phase-progress .pfill { transition:height .5s cubic-bezier(.22,1,.36,1); }
  .mobile-nav.open { display:block; border-top:1px solid rgba(138,178,214,0.12); background:rgba(8,14,26,0.96); backdrop-filter:blur(18px); }
  .mobile-nav.open .mn-inner { padding:24px clamp(20px,5vw,56px); display:flex; flex-direction:column; gap:20px; }
  .mobile-nav.open a { color:var(--frost); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.14em; text-transform:uppercase; }
  .mobile-nav.open a .idx { color:var(--enros); margin-right:12px; }
}

@media (max-width:620px){
  .wf-flow { flex-direction:column; align-items:stretch; }
  .wf-node { width:100%; flex:0 0 auto; }
  .wf-conn { flex-basis:22px; width:2px; height:22px; align-self:center; background:linear-gradient(180deg, rgba(138,178,214,0.4), rgba(255,216,140,0.5)); }
  .wf-conn::before { left:50%; top:-3px; transform:translateX(-50%); }
  .wf-conn::after { left:50%; right:auto; top:auto; bottom:-3px; transform:translateX(-50%); }
  .ba-arrow { transform:rotate(90deg); }
}

/* Beispiel-Label über der Workflow-Grafik */
.wf-example-label {
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(255,216,140,0.75);
  padding:6px 14px 4px;
  border-bottom:1px solid rgba(138,178,214,0.14);
}

@media (prefers-reduced-motion: reduce) {
  .kicker .dot, .scroll-hint .line { animation:none; }
  .phase { opacity:1; transform:none; }
}