/* Schriften lokal gehostet – keine externen Anfragen (DSGVO-freundlich) */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/geist-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/geist-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/geist-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/geist-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/geist-mono-latin-500-normal.woff2") format("woff2")}

/* ============================================================
   POLARIS VENTURES — Design System
   Konzept: "Der feste Punkt." Nordstern / Navigation / Präzision
   ============================================================ */
:root{
  /* Die abgesetzten Sektionen lagen mit #080B14 kaum über dem Grundton – der
     Zwischenraum ging an Kontrast verloren, ohne als Gliederung zu wirken.
     Jetzt liegen sie klar unter dem Grundton: der hellere Fließtext steht auf
     dunklerem Grund, die Trennung übernimmt die Haarlinie. */
  --void:#070911;
  --night:#03040A;
  --surface:#070B15;
  --surface-2:#0C1120;
  /* Abgesetzte Bänder: durchscheinend, damit das Sternenfeld darunter bleibt. */
  --band:rgba(3,4,10,.86);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --ink:#F5F8FF;
  /* Auf dunklem Grund wirkt heller Text optisch dünner als auf hellem. Deshalb
     durchgehend Gewicht 400 statt 300 im Fließtext und angehobene Werte für die
     kleinen Labels – sie tragen die Sperrung schlechter als der Lauftext. */
  --ink-2:#DCE3F2;
  --muted:#AAB4CB;
  /* Ein einziger Akzent. Zwei Tiefenstufen desselben Blaus, kein zweiter Farbton. */
  --polaris:#8FB4FF;
  --polaris-deep:#4C6FDE;
  --glow:rgba(143,180,255,.5);
  /* Rein semantisch für Fehlerzustände – nie als Gestaltungsakzent einsetzen. */
  --warn:#D98A94;

  --f-display:"Instrument Serif",Georgia,serif;
  --f-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1280px;
  --sec-y:clamp(88px,13vw,180px);
  --r:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  color-scheme:dark;                 /* korrekte Scrollbars & Formularelemente */
}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--f-sans);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  touch-action:manipulation;                       /* kein Doppeltipp-Zoom-Delay */
  -webkit-tap-highlight-color:rgba(143,180,255,.16);
}

/* Sichtbarer Fokus für Tastaturnutzung – gilt überall */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--polaris);
  outline-offset:3px;
  border-radius:6px;
}

/* Sprungmarken landen nicht unter der fixierten Navigation */
section[id],main[id]{scroll-margin-top:96px}

/* Skip-Link – fährt über transform ein, nicht über top: eine Layout-Eigenschaft
   zu animieren erzwingt Reflow, transform läuft auf dem Compositor. */
.skip{
  position:absolute;left:var(--pad);top:14px;z-index:200;
  background:var(--ink);color:#05060B;padding:.7rem 1.2rem;border-radius:8px;
  font-size:.9rem;font-weight:500;
  transform:translateY(-300%);transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--polaris);color:#05060B}

/* --- Typografie --------------------------------------------------- */
.display{
  font-family:var(--f-display);font-weight:400;
  line-height:.98;letter-spacing:-.02em;
  text-wrap:balance;margin:0;
}
/* Hierarchie entsteht über Schnitt, Farbe und Weißraum – nicht über Größe allein.
   Die gedeckelten 5rem halten Sub, CTA und Belegzeile auf einem 900px-Laptop
   oberhalb der Falz; bei 7rem rutschte der Primär-CTA aus dem Sichtfeld. */
h1.display{font-size:clamp(2.75rem,6.2vw,5rem)}
h2.display{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:1.06rem;font-weight:500;letter-spacing:-.01em;margin:0;line-height:1.4}
.serif-em{font-style:italic;color:var(--polaris)}
.lede{
  font-size:clamp(1rem,1.55vw,1.185rem);line-height:1.68;
  color:var(--ink-2);max-width:62ch;margin:0;font-weight:400;
}
.eyebrow{
  font-family:var(--f-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:.75rem;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:var(--polaris);opacity:.7;
}
.eyebrow .num{color:var(--polaris)}
.mono{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}

/* --- Layout ------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:var(--sec-y)}
.sec-head{max-width:var(--maxw);margin-bottom:clamp(44px,6vw,80px)}
.sec-head .display{margin:1.35rem 0 1.5rem;max-width:19ch}
.hair{height:1px;background:var(--line);transform-origin:left;width:100%}

/* --- Scroll-Fortschritt ------------------------------------------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  background:linear-gradient(90deg,var(--polaris-deep),var(--polaris));
  transform:scaleX(0);transform-origin:0 50%;
}

/* --- Navigation ---------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(7,9,17,.74);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom-color:var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:74px}
/* --- Wortmarke -----------------------------------------------------
   Stern mit gebrochenem Orbit und Knotenpunkten. Die Vorlage ist für weißen
   Grund gezeichnet – hier trägt deshalb der Stern das helle Ink, während Ringe,
   Verbinder und Knoten den Verlauf führen. Der Kern ist ausgespart (evenodd),
   nicht übermalt, damit er auf jedem Untergrund funktioniert.
   In der Navigation entfallen die feinen Innenbögen: bei 34px würden sie
   verschlammen statt zu zeichnen. */
.brand{display:flex;align-items:center;gap:.72rem;flex-shrink:0}
.brand svg{width:34px;height:34px;overflow:visible;flex-shrink:0}
.pv-star{fill:var(--ink)}
.pv-ring{fill:none;stroke:url(#pvGrad);stroke-width:2.6;stroke-linecap:round}
.pv-line{fill:none;stroke:url(#pvGrad);stroke-width:3;stroke-linecap:round}
.pv-node{fill:url(#pvGrad)}
.brand--compact .pv-fine{display:none}

.brand-txt{
  display:flex;flex-direction:column;align-items:flex-start;gap:.24em;
  font-family:var(--f-sans);line-height:1;
}
.brand-name{
  font-size:.98rem;font-weight:500;color:var(--ink);
  letter-spacing:.28em;text-transform:uppercase;
}
.brand-sub{
  font-size:.6rem;font-weight:500;color:var(--polaris);
  letter-spacing:.42em;text-transform:uppercase;
}
.nav-links{display:flex;gap:2.1rem;align-items:center}
.nav-links a{
  font-size:.88rem;color:var(--ink-2);position:relative;padding:.3rem 0;
  transition:color .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--polaris);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;align-items:center;gap:1rem}

/* --- Buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.82rem 1.5rem;border-radius:100px;font-size:.9rem;font-weight:500;
  letter-spacing:.005em;border:1px solid transparent;cursor:pointer;
  position:relative;overflow:hidden;transition:transform .4s var(--ease),color .3s,border-color .3s,background .3s;
  will-change:transform;white-space:nowrap;
}
.btn svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:#05060B;border-color:var(--ink)}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--polaris);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn-primary:hover::before{transform:translateY(0)}
.btn-primary span,.btn-primary svg{position:relative;z-index:1}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--polaris);color:var(--polaris);background:rgba(143,180,255,.05)}
.btn-sm{padding:.62rem 1.15rem;font-size:.86rem}

/* Burger */
.burger{
  display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;
  background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger i{display:block;width:15px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.burger.open i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger.open i:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--night);
  overscroll-behavior:contain;overflow-y:auto;
  padding:110px var(--pad) max(var(--pad),env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.mobile-menu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobile-menu nav{display:flex;flex-direction:column;gap:.2rem}
.mobile-menu nav a{
  font-family:var(--f-display);font-size:clamp(2rem,9vw,3rem);line-height:1.25;
  border-bottom:1px solid var(--line);padding:.5rem 0;display:flex;
  align-items:baseline;justify-content:space-between;
}
.mobile-menu nav a .mono{color:var(--polaris);font-size:.66rem}

/* --- HERO ---------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:130px 60px;overflow:hidden;
}
/* Das Sternenfeld liegt fest im Ansichtsfenster hinter der gesamten Seite,
   nicht mehr nur im Hero. Damit es weiter unten nicht vom Text ablenkt, legt
   sich ein Schleier darüber, der beim Verlassen des Heros aufzieht. */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sky-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:var(--void);opacity:0;
}
main,.footer{position:relative;z-index:2}
.hero-glow{
  position:absolute;z-index:0;pointer-events:none;
  width:min(120vw,1400px);aspect-ratio:1;border-radius:50%;
  top:-45%;right:-25%;
  background:radial-gradient(circle,rgba(76,111,222,.19) 0%,rgba(76,111,222,.07) 38%,transparent 66%);
  filter:blur(20px);
}
.hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(7,9,17,.92),transparent);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
/* Nur die Headline wird auf Zeilenlänge begrenzt – nie der ganze Spaltenblock,
   sonst beschneidet der CTA sich auf schmalen Screens. */
.hero-copy{max-width:100%}
h1.display{margin:1.6rem 0 0;max-width:16ch}
.hero-sub{
  max-width:52ch;margin:2rem 0 0;font-size:clamp(1rem,1.5vw,1.16rem);
  color:var(--ink-2);font-weight:400;line-height:1.7;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.6rem}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--muted);
}
.scroll-cue .line{width:1px;height:44px;background:linear-gradient(var(--polaris),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--ink);animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{top:-100%}60%,100%{top:100%}}

/* --- Marquee ------------------------------------------------------- */
.marquee{
  border-block:1px solid var(--line);overflow:hidden;padding:1.1rem 0;
  background:var(--band);position:relative;
}
.marquee-track{display:flex;gap:3.5rem;width:max-content;will-change:transform}
.marquee span{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:3.5rem;white-space:nowrap;
}
/* Trenner als Form, nicht als Glyphe – rendert schriftunabhängig identisch
   und bleibt schriftunabhängig identisch. */
.marquee span::after{
  content:"";width:4px;height:4px;background:var(--polaris);
  transform:rotate(45deg);flex-shrink:0;opacity:.8;
}

/* --- Karten / Spotlight -------------------------------------------- */
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,0));
  padding:clamp(1.5rem,2.4vw,2.1rem);overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(143,180,255,.09),transparent 62%);
}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card:hover::before{opacity:1}

/* Problem-Liste */
.prob-grid{display:grid;gap:0;border-top:1px solid var(--line)}
.prob{
  display:grid;grid-template-columns:52px 1fr;gap:1.2rem;
  padding:1.7rem 0;border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);position:relative;
}
.prob::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--polaris),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.prob:hover::after{transform:scaleX(1)}
.prob-n{font-family:var(--f-mono);font-size:.76rem;color:var(--polaris);padding-top:.35rem}
.prob-body h3{margin-bottom:.5rem;font-size:1.14rem}
.prob-body p{margin:0;color:var(--ink-2);font-weight:400;font-size:1rem;max-width:60ch}
.prob-eff{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.85rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:.32rem .8rem;
}
.prob-eff b{color:var(--polaris);font-weight:400}

/* Leistungen */
.serv-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
.serv{display:flex;flex-direction:column;min-height:100%}
.serv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.serv-ico{
  width:46px;height:46px;border:1px solid var(--line-2);border-radius:11px;
  display:grid;place-items:center;flex-shrink:0;background:rgba(143,180,255,.05);
  transition:border-color .5s,background .5s;
}
.card:hover .serv-ico{border-color:var(--polaris);background:rgba(143,180,255,.11)}
.serv-ico svg{width:20px;height:20px;stroke:var(--polaris);fill:none;stroke-width:1.35}
.serv h3{font-family:var(--f-display);font-size:1.6rem;font-weight:400;letter-spacing:-.01em;line-height:1.15}
.serv p{color:var(--ink-2);font-weight:400;font-size:1rem;margin:.9rem 0 1.4rem;flex:1}
.serv ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);padding-top:1.1rem;display:grid;gap:.55rem}
.serv ul li{
  font-size:.9rem;color:var(--muted);display:flex;gap:.65rem;align-items:flex-start;line-height:1.5;
}
.serv ul li::before{content:"→";color:var(--polaris);flex-shrink:0;font-size:.86rem}

/* Vorgehen / Timeline */
.steps{position:relative;display:grid;gap:0;margin-top:1rem}
.steps-rail{
  position:absolute;left:19px;top:12px;bottom:12px;width:1px;background:var(--line);
}
.steps-rail i{
  position:absolute;inset:0;background:linear-gradient(var(--polaris),var(--polaris-deep));
  transform:scaleY(0);transform-origin:top;display:block;
}
.step{
  display:grid;grid-template-columns:40px 1fr;gap:clamp(1.2rem,3vw,2.6rem);
  padding:1.8rem 0;position:relative;border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step-dot{
  width:39px;height:39px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--void);display:grid;place-items:center;position:relative;z-index:2;
  font-family:var(--f-mono);font-size:.74rem;color:var(--muted);
  transition:border-color .5s,color .5s,background .5s;
}
.step.on .step-dot{border-color:var(--polaris);color:var(--polaris);background:rgba(143,180,255,.09)}
.step-body{display:grid;grid-template-columns:1fr;gap:.5rem}
.step-body h3{font-family:var(--f-display);font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:400;line-height:1.15}
.step-body p{margin:0;color:var(--ink-2);font-weight:400;font-size:1rem;max-width:56ch}
.step-out{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:.35rem;
}
.step-out b{color:var(--ink);font-weight:400}

/* --- Leistungs-Anriss auf der Startseite ---------------------------
   Vier Zeilen statt vier Karten: die Frage „was macht ihr" muss ohne Klick
   beantwortet sein, die Einzelheiten stehen auf der eigenen Seite. */
.anriss{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.anriss li{display:grid;gap:.4rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.anriss li b{font-size:1.08rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.anriss li span{color:var(--ink-2);font-size:1rem;max-width:62ch}

/* --- Projekte als Sternkarte ---------------------------------------
   Vier Referenzen als Sterne einer Konstellation: Überfahren zeigt den Kurztext,
   Klick klappt die Einzelheiten darunter auf. Die Sterne sind echte <button>-
   Elemente über einem rein dekorativen SVG – so bleiben Tastaturbedienung,
   Fokusring und Screenreader-Semantik erhalten, statt Klicks auf SVG-Knoten zu legen.
   Unter 860px trägt die Karte nicht: dort wird dieselbe Liste untereinander
   ausgegeben, ohne Positionierung. */
.sky{--sky-h:min(44vw,430px);position:relative;margin-top:clamp(1rem,3vw,2rem)}
.sky-lines{display:none}
.sky-list{display:grid;gap:0;border-top:1px solid var(--line)}

.star{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:1rem;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:1.5rem 0;cursor:pointer;color:inherit;
  transition:background .4s var(--ease);
}
.star:hover{background:rgba(143,180,255,.035)}
.star-dot{
  width:11px;height:11px;background:var(--polaris);border-radius:50%;
  justify-self:center;align-self:center;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(143,180,255,.42);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.star[aria-expanded="true"] .star-dot,.star:hover .star-dot{
  transform:scale(1.35);box-shadow:0 0 0 7px rgba(143,180,255,.11);
}
.star-name{
  font-family:var(--f-display);font-size:1.5rem;font-weight:400;
  line-height:1.15;display:block;
}
.star-tag{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--polaris);display:block;margin-bottom:.5rem;
}
.star-tip{display:block;color:var(--ink-2);font-size:1rem;margin-top:.5rem;max-width:52ch}
.star-more{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);
}
.star-more svg{width:11px;height:11px;transition:transform .45s var(--ease)}
.star[aria-expanded="true"] .star-more svg{transform:rotate(180deg)}
.star[aria-expanded="true"] .star-more{color:var(--polaris)}

.star-panel{
  overflow:hidden;border-bottom:1px solid var(--line);
}
.star-panel[hidden]{display:none}
.star-panel-in{
  display:grid;gap:1.4rem;padding:.4rem 0 2.2rem;
  grid-template-columns:1fr;
}
.star-panel h4{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem;font-weight:500;
}
.star-panel p{margin:0;color:var(--ink-2);font-size:1rem;max-width:60ch}
.star-panel ul{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.6rem}
.star-panel ul li{
  font-size:.96rem;color:var(--ink-2);display:flex;gap:.7rem;align-items:flex-start;line-height:1.55;
}
.star-panel ul li::before{content:"→";color:var(--polaris);flex-shrink:0}

/* Ab 860px wird aus der Liste eine Karte: die Sterne verlassen den Fluss und
   sitzen auf ihren Koordinaten, die Detailtafeln bleiben im Fluss darunter.
   Weil immer nur eine Tafel offen ist, erscheint sie direkt unter der Karte. */
@media (min-width:860px){
  .sky-lines{
    display:block;position:absolute;inset:0 0 auto;height:var(--sky-h);
    width:100%;pointer-events:none;
  }
  .sky-list{
    position:relative;padding-top:var(--sky-h);border-top:0;
  }
  /* --y ist ein einheitenloser Faktor, kein Prozentwert: Prozente bezögen sich
     auf die Höhe von .sky-list, und die wächst beim Aufklappen einer Tafel –
     die Sterne würden mitwandern. Gegen --sky-h gerechnet stehen sie fest. */
  .star{
    position:absolute;left:var(--x);top:calc(var(--sky-h) * var(--y));
    transform:translateX(-50%);
    width:auto;display:grid;grid-template-columns:none;grid-auto-flow:row;
    justify-items:center;align-items:center;gap:.55rem;
    padding:0;border:0;border-bottom:0;background:none;z-index:2;
  }
  .star:hover{background:none}
  .star:focus-visible{outline-offset:8px}
  /* Ohne das malt der in der DOM-Reihenfolge spätere Stern über die Karte des
     früheren – im Screenshot lag „Produktkonfigurator" mitten im ShelfMate-Text.
     Der aktive Stern muss die Ebene wechseln, nicht nur sein Kind. */
  .star:hover,.star:focus-within,.star[aria-expanded="true"]{z-index:20}
  .star-name{font-size:1.18rem;text-align:center;white-space:nowrap}
  .star-body{display:grid;justify-items:center;position:relative}
  .star-reveal{
    position:absolute;top:calc(100% + .7rem);left:50%;width:17.5rem;
    transform:translateX(-50%) translateY(6px);
    opacity:0;visibility:hidden;pointer-events:none;z-index:3;
    background:var(--surface-2);border:1px solid var(--line-2);border-radius:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.5);
    padding:1rem 1.1rem;text-align:left;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .star:hover .star-reveal,
  .star:focus-visible .star-reveal{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
  /* Ist die Tafel aufgeklappt, stehen dieselben Angaben ausführlicher darunter.
     Die Karte bliebe sonst stehen und legte sich – bei den unteren Sternen – genau
     über den Text, den sie ankündigt. Nur im Kartenlayout: in der Mobilliste ist
     .star-reveal Teil des Flusses und trägt die Bedienung. */
  .star[aria-expanded="true"] .star-reveal,
  .star[aria-expanded="true"]:hover .star-reveal,
  .star[aria-expanded="true"]:focus-visible .star-reveal{
    opacity:0;visibility:hidden;
  }
  .star-tip{margin-top:0;font-size:.96rem}
  .star-more{margin-top:.8rem}
  /* Sterne am rechten bzw. linken Rand: Tafel einziehen, damit sie im Bild bleibt. */
  .star[data-edge="right"] .star-reveal{left:auto;right:0;transform:translateY(6px)}
  .star[data-edge="right"]:hover .star-reveal,
  .star[data-edge="right"]:focus-visible .star-reveal{transform:translateY(0)}
  .star[data-edge="left"] .star-reveal{left:0;transform:translateY(6px)}
  .star[data-edge="left"]:hover .star-reveal,
  .star[data-edge="left"]:focus-visible .star-reveal{transform:translateY(0)}
  .star-panel-in{grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem)}
}

/* Über uns – zwei gleichrangige Personen. Eine Karte würde Elevation behaupten,
   die hier nichts bedeutet; Haarlinie und Weißraum gruppieren genauso klar. */
.team-grid{display:grid;gap:clamp(2.4rem,5vw,3.6rem);grid-template-columns:1fr}
.person{display:grid;gap:1.5rem;padding-top:1.9rem;border-top:1px solid var(--line)}
.person-photo{
  width:clamp(96px,22vw,128px);height:clamp(96px,22vw,128px);border-radius:50%;
  overflow:hidden;position:relative;flex-shrink:0;border:1px solid var(--line-2);
}
.person-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.92);
  transition:filter .7s var(--ease),transform .9s var(--ease);
}
.person:hover .person-photo img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.05)}
.person-photo::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(143,180,255,.24),transparent 70%);
  mix-blend-mode:screen;opacity:1;transition:opacity .7s;pointer-events:none;
}
.person:hover .person-photo::after{opacity:0}
.person-name{font-family:var(--f-display);font-size:1.75rem;font-weight:400;line-height:1.1}
.person-role{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--polaris);margin-top:.6rem;display:block;
}
.person p{color:var(--ink-2);font-weight:400;font-size:1rem;margin:1.1rem 0 0;max-width:52ch}

/* Leitidee / Statement */
/* Leitidee – zentriert, Stern mittig im Ring dahinter. Bewusst die einzige
   symmetrische Sektion: sie ist die Ruhezone zwischen den Argumenten. */
.statement{
  position:relative;text-align:center;padding-block:clamp(90px,14vw,180px);overflow:hidden;
  border-block:1px solid var(--line);
  /* Deckkraft wird beim Betreten des Abschnitts heruntergefahren, damit das
     Sternenfeld und der ruhende Punkt dahinter überhaupt sichtbar werden. */
  background:rgba(3,4,10,var(--leitidee-deckung,.86));
}
.statement .star-bg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(72vw,620px);opacity:.09;pointer-events:none;
}
.statement-in{position:relative;z-index:2;text-align:center}
.statement .display{
  font-size:clamp(2rem,5.6vw,4.2rem);max-width:15ch;margin-inline:auto;
}
.statement p{
  margin:1.8rem auto 0;color:var(--ink-2);max-width:54ch;font-weight:400;
  font-size:clamp(.98rem,1.4vw,1.08rem);
}

/* Kontakt */
.contact{position:relative;overflow:hidden}
.contact-glow{
  position:absolute;width:min(110vw,1000px);aspect-ratio:1;border-radius:50%;
  bottom:-55%;left:50%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(76,111,222,.2),transparent 62%);
}
.contact-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr;position:relative;z-index:2}
.contact-mail{
  font-family:var(--f-display);font-size:clamp(1.3rem,3.4vw,2.2rem);
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.4rem;
  border-bottom:1px solid var(--line-2);padding-bottom:.35rem;transition:color .4s,border-color .4s;
  word-break:break-word;
}
.contact-mail:hover{color:var(--polaris);border-color:var(--polaris)}
.next-steps{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1.1rem}
.next-steps li{display:grid;grid-template-columns:26px 1fr;gap:1rem;align-items:start}
.next-steps .n{
  font-family:var(--f-mono);font-size:.72rem;color:var(--polaris);
  border:1px solid var(--line-2);border-radius:50%;width:26px;height:26px;
  display:grid;place-items:center;
}
.next-steps b{display:block;font-weight:500;font-size:1rem}
.next-steps p{margin:.15rem 0 0;color:var(--muted);font-size:.9rem;font-weight:400}

/* Formular (baut mailto) */
.form-card{border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);background:var(--surface)}
.form-card h3{font-family:var(--f-display);font-size:1.5rem;font-weight:400;margin-bottom:.4rem}
.form-card .hint{color:var(--muted);font-size:.88rem;margin:0 0 1.6rem}
.field{display:grid;gap:.45rem;margin-bottom:1rem}
.field label{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.field input,.field textarea,.field select{
  width:100%;background-color:#12182A;border:1px solid var(--line);
  border-radius:9px;padding:.78rem .95rem;color:var(--ink);font-family:var(--f-sans);
  font-size:1rem;transition:border-color .3s,background-color .3s;resize:vertical;
}
.field textarea{min-height:104px}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--polaris);background-color:#151E36;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--warn)}
.field-error{
  font-size:.8rem;color:var(--warn);min-height:1.1em;margin:0;
}
.field input::placeholder,.field textarea::placeholder{color:#59627a}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--surface-2);color:var(--ink)}
.form-card .btn{width:100%;justify-content:center;margin-top:.5rem}
.form-note{font-size:.76rem;color:var(--muted);margin:1rem 0 0;line-height:1.55}

/* --- Formular-Zustände ---------------------------------------------
   Ein mailto: kann stumm scheitern (kein Mailprogramm, Handler blockiert).
   Ohne Quittung wirkt der Klick tot – deshalb Busy-Zustand plus Erfolgsmeldung,
   die die Adresse zusätzlich direkt kopierbar macht. */
/* Das Busy-Label wird in JS in den echten <span> geschrieben, nicht über
   content:attr() erzeugt: Pseudo-Element-Text landet nicht zuverlässig im
   Accessibility-Tree – sichtbare und vorgelesene Beschriftung würden auseinanderlaufen.
   Hier bleibt nur der rein dekorative Schimmer, und der animiert transform. */
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"] > svg{display:none}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(5,6,11,.11) 50%,transparent 62%);
  transform:translateX(-100%);animation:shimmer 1.2s linear infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}

.form-status{
  margin:1.1rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-2);
  border-left:2px solid var(--polaris);padding:.2rem 0 .2rem .95rem;
}
.form-status:empty{display:none}
.form-status b{display:block;color:var(--ink);font-weight:500;margin-bottom:.25rem}
.form-status .copy{
  display:block;margin-top:.8rem;background:none;border:1px solid var(--line-2);border-radius:100px;
  padding:.34rem .85rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);cursor:pointer;
  transition:border-color .3s,color .3s,transform .2s var(--ease);
}
.form-status .copy:hover{border-color:var(--polaris);color:var(--polaris)}
.form-status .copy:active{transform:scale(.97)}

/* Footer */
.footer{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,80px) 0;background:var(--band)}
.foot-grid{display:grid;gap:2.6rem;grid-template-columns:1fr}
.foot-brand p{color:var(--muted);font-size:.92rem;font-weight:400;max-width:38ch;margin:1.2rem 0 0}
.foot-col h4{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.1rem;font-weight:500;
}
.foot-col a{display:block;font-size:.92rem;color:var(--ink-2);padding:.28rem 0;transition:color .3s,transform .3s var(--ease)}
.foot-col a:hover{color:var(--polaris);transform:translateX(3px)}
.foot-legal{display:flex;gap:1.5rem}
.foot-legal a{color:var(--muted);transition:color .3s}
.foot-legal a:hover{color:var(--polaris)}
.form-note a{color:var(--ink-2);border-bottom:1px solid var(--line-2);transition:color .3s,border-color .3s}
.form-note a:hover{color:var(--polaris);border-color:var(--polaris)}
.foot-bottom{
  margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--line);
  padding-block:1.7rem;display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;
  font-size:.8rem;color:var(--muted);
}

/* Sticky Mobile CTA */
.sticky-cta{
  position:fixed;left:var(--pad);right:var(--pad);z-index:95;
  bottom:calc(16px + env(safe-area-inset-bottom));   /* Home-Indicator freihalten */
  display:none;transform:translateY(140%);
}
.sticky-cta .btn{width:100%;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.6)}

/* Reveal-Grundzustand */
.rv{opacity:0}
.w-line{display:inline-block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
.w-line>i{display:inline-block;font-style:inherit;will-change:transform}

/* ============ Breakpoints ============ */
@media (min-width:700px){
  .serv-grid{grid-template-columns:repeat(2,1fr)}
  .person{grid-template-columns:auto 1fr;align-items:start;gap:1.8rem}
  .prob{grid-template-columns:64px 1fr}
  .step{grid-template-columns:40px 1fr}
  .team-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:3rem}
  .hero-copy{max-width:none}
  .contact-grid{grid-template-columns:1fr .9fr;align-items:start;gap:clamp(3rem,6vw,6rem)}
  .team-grid{grid-template-columns:repeat(2,1fr);column-gap:clamp(2.5rem,5vw,4.5rem)}
  .sec-head{display:grid;grid-template-columns:1fr;max-width:none}
  .serv-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .sticky-cta{display:block}
}
@media (max-width:520px){
  .hero{min-height:auto;padding-block:120px 80px}
  .scroll-cue{display:none}
  .btn{white-space:normal;text-align:center}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1}
}

/* Ab Desktop stehen Bezeichnung und Erläuterung nebeneinander. */
@media (min-width:860px){
  .anriss li{grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:2.4rem;align-items:baseline}
}

/* --- Mobile Straffung ----------------------------------------------
   Auf schmalen Geräten kosteten Sektionsabstände und Kopfbereiche zusammen
   rund vier Bildschirme, bevor der erste Inhalt kam. Die Werte sind hier
   deutlich kleiner; am Desktop bleibt der großzügige Rhythmus erhalten. */
@media (max-width:700px){
  :root{--sec-y:56px}
  .sec-head{margin-bottom:28px}
  .sec-head .display{margin:1rem 0 1.1rem}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem}
  .foot-brand{grid-column:1 / -1}
  .footer{padding-block:44px 0}
  .foot-bottom{margin-top:32px}
}


/* ============================================================
   Gemeinsame Hülle: Kopfzeile, Leuchten, Laufband, Fußzeile.
   Von der Sternkarte und allen Unterseiten genutzt.
   ============================================================ */
/* --- Kopfzeile --------------------------------------------------------- */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,54px);
}
.marke{display:flex;align-items:center;gap:.72rem;text-decoration:none;color:inherit}
.marke svg{width:32px;height:32px;overflow:visible}
.marke-txt{display:flex;flex-direction:column;gap:.24em;line-height:1}
.marke-name{font-size:.94rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.marke-sub{font-size:.58rem;font-weight:500;color:var(--polaris);letter-spacing:.42em;text-transform:uppercase}
.knopf{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:#05060B;
  border:0;border-radius:100px;padding:.72rem 1.3rem;font:inherit;font-size:.84rem;
  font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .4s var(--ease);
}
/* Blaue Füllung fährt beim Überfahren von unten auf – dasselbe Verhalten wie
   auf der bestehenden Seite. Text und Pfeil müssen dafür über der Füllung
   liegen, deshalb sind sie in eigene Elemente gefasst. */
.knopf::before{
  content:"";position:absolute;inset:0;background:var(--polaris);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.knopf:hover::before{transform:translateY(0)}
.knopf > *{position:relative;z-index:1}
.knopf svg{transition:transform .4s var(--ease)}
.knopf:hover svg{transform:translateX(3px)}

/* --- Leuchten mit Ringen, oben rechts ----------------------------------
   Aus der bestehenden Seite übernommen: der weiche Schein plus die feinen
   Orbitringe, die dort um Polaris liegen. */
/* Leuchtkugel mit Umlaufbahnen – gefüllte Fläche mit radialem Verlauf,
   zur Mitte hin hell. Dieselbe Fassung wie auf der Sternkarte. */
.himmelskoerper{
  position:fixed;z-index:1;pointer-events:none;
  top:-30%;right:-4%;width:min(64vw,660px);aspect-ratio:1;
}
.himmelskoerper .kugel{fill:url(#kugelVerlauf)}
.himmelskoerper .bahn{fill:none;stroke:url(#bahnVerlauf)}

/* --- Laufband und Fußzeile, unten verankert ---------------------------- */
.unten{position:fixed;left:0;right:0;bottom:0;z-index:30}
.band{
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;padding:.72rem 0;background:rgba(3,4,10,.86);
}
.band-spur{display:flex;gap:3.5rem;width:max-content;animation:laufen 58s linear infinite}
.band span{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:3.5rem;white-space:nowrap;
}
.band span::after{content:"";width:4px;height:4px;background:var(--polaris);transform:rotate(45deg);flex-shrink:0;opacity:.8}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.fuss{
  background:rgba(3,4,10,.86);padding:.85rem clamp(20px,5vw,54px);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.76rem;color:var(--muted);
}
.fuss nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.fuss a{color:var(--muted);text-decoration:none;transition:color .3s}
.fuss a:hover{color:var(--polaris)}


/* Auf scrollenden Seiten läuft die Hülle im Fluss mit, nicht fest verankert. */
.seite .unten{position:static}
.seite .kopf{position:fixed;background:linear-gradient(var(--void),rgba(7,9,17,0))}
/* Der Rückweg ist auf den Unterseiten der einzige feste Bedienpunkt – es gibt
   keine Kopfzeile mehr. Er bleibt beim Scrollen stehen. */
.zurueck-karte{
  position:fixed;left:clamp(20px,5vw,64px);top:clamp(22px,3vh,38px);z-index:40;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.7rem;
  padding:.5rem .9rem .5rem .7rem;border:1px solid var(--line-2);border-radius:100px;
  background:rgba(3,4,10,.72);backdrop-filter:blur(10px);
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.zurueck-karte:hover{color:var(--polaris);border-color:var(--polaris);gap:.95rem}
.zurueck-karte svg{width:14px;height:14px}

/* Ohne Kopfzeile trägt die Fußzeile die Navigation. */
.fuss nav{gap:.9rem 1.4rem}
@media (max-width:640px){
  .zurueck-karte{font-size:.64rem;padding:.42rem .75rem .42rem .6rem;left:16px;top:16px}
}

/* Der Inhalt der Unterseiten beginnt unter der fest verankerten Kopfzeile. */
.seite main{padding-top:clamp(78px,8vh,104px)}
.seite main > section:first-child{padding-top:clamp(40px,6vw,72px)}

/* Alle Unterseiten tragen dieselbe Fläche – vorher brachte jeder Abschnitt
   seinen eigenen Hintergrund aus der Scrollseite mit, wodurch sich die Seiten
   je nach Abschnitt unterschiedlich dunkel zeigten. */
.seite main > section{
  background:var(--band);
  border-block:1px solid var(--line);
}

/* Der Sternenschleier hing an der Renderschleife des Sternenfelds. Auf den
   Unterseiten gibt es keinen Hero, über dessen Höhe er aufziehen könnte –
   dort ist er schlicht ein fester Wert und gehört nicht in eine Schleife.
   Ohne ihn lief das Feld auf voller Helligkeit und die Seiten wirkten
   unruhiger als die Karte. */
.seite #skyVeil{opacity:.72}

/* --- Handlungsaufforderungen ---------------------------------------
   Zwei Ausprägungen, damit derselbe Schritt nicht auf jeder Unterseite
   gleich aussieht: das Band schließt eine Seite ab, die Zeile setzt den
   Hinweis beiläufig in den Lesefluss. Beide führen zur Kontaktseite. */
.cta-band{
  margin-top:clamp(3rem,6vw,5rem);
  padding:clamp(1.5rem,3vw,2.3rem) clamp(1.4rem,3vw,2.3rem);
  border:1px solid var(--line);border-radius:3px;
  background:rgba(12,17,32,.5);
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;
  align-items:center;justify-content:space-between;
}
.cta-band p{
  margin:0;color:var(--ink);max-width:44ch;line-height:1.5;
  font-size:clamp(1rem,1.5vw,1.14rem);
}
.cta-band p b{font-weight:500}
.cta-band p span{display:block;color:var(--muted);font-size:.92rem;margin-top:.4rem}
.cta-band .btn{flex:0 0 auto}

.cta-zeile{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.3rem;
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
}
.cta-zeile > span{color:var(--muted);font-size:.95rem}
.cta-zeile .btn span{color:inherit;font-size:inherit}

/* Steht die Aufforderung allein am Seitenende, traegt sie mehr Gewicht als
   im Lesefluss: groesserer Schnitt, mehr Luft, kein Beitext daneben. */
.cta-gross{margin-top:clamp(3rem,6vw,5rem)}
.cta-gross .btn{padding:1.05rem 2.1rem;font-size:1.02rem}
.cta-gross .btn svg{width:16px;height:16px}

@media (max-width:620px){
  .cta-band{flex-direction:column;align-items:flex-start}
  .cta-band .btn{width:100%;justify-content:center}
}

/* --- Leitbild ------------------------------------------------------
   Der Grundlagenartikel ist kein weiterer Menüpunkt, sondern der Text,
   auf dem alles andere fußt. Er bekommt deshalb eine eigene Auszeichnung:
   Polarstern-Kante, Sternsymbol, kein Kartenraster. */
.leitbild{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,2.4vw,1.6rem);text-decoration:none;color:inherit;
  margin-top:clamp(2.4rem,5vw,3.6rem);
  padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.2rem,2.6vw,1.8rem);
  border:1px solid var(--line);border-left:2px solid var(--polaris);border-radius:3px;
  background:linear-gradient(90deg,rgba(76,111,222,.14),rgba(12,17,32,.5) 62%);
  transition:border-color .3s,background .3s;
}
.leitbild:hover{border-color:var(--line-2);background:linear-gradient(90deg,rgba(76,111,222,.22),rgba(12,17,32,.6) 62%)}
.leitbild-stern{width:26px;height:26px;color:var(--polaris);flex:none}
.leitbild-txt{display:grid;gap:.42rem;min-width:0}
.leitbild-txt .mono{color:var(--polaris)}
.leitbild-txt b{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;line-height:1.16;
  font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--ink);
}
.leitbild-txt span:last-child{color:var(--ink-2);font-size:.95rem;line-height:1.55}
.leitbild-pfeil{width:18px;height:18px;color:var(--muted);flex:none;transition:transform .4s var(--ease),color .3s}
.leitbild:hover .leitbild-pfeil{transform:translateX(4px);color:var(--polaris)}
@media (max-width:620px){
  .leitbild{grid-template-columns:auto 1fr}
  .leitbild-pfeil{display:none}
}

/* Auf breiten Schirmen ist genug Platz, damit das Leitbild als eigener
   Halt wirkt statt als weiterer Kasten: mehr Raum, groesserer Satz, ein
   Schein hinter dem Stern. Der Platz in der Seite bleibt derselbe. */
@media (min-width:820px){
  .leitbild{
    padding:2.4rem 2.6rem;gap:2rem;border-left-width:3px;
    background:
      radial-gradient(60% 140% at 8% 50%,rgba(76,111,222,.34),transparent 70%),
      linear-gradient(90deg,rgba(76,111,222,.16),rgba(12,17,32,.55) 62%);
    box-shadow:0 0 0 1px rgba(143,180,255,.06),0 22px 60px -30px rgba(76,111,222,.65);
  }
  .leitbild:hover{
    box-shadow:0 0 0 1px rgba(143,180,255,.14),0 26px 70px -28px rgba(76,111,222,.9);
  }
  .leitbild-stern{
    width:40px;height:40px;
    filter:drop-shadow(0 0 14px rgba(143,180,255,.55));
  }
  .leitbild-txt{gap:.6rem}
  .leitbild-txt .mono{font-size:.72rem;letter-spacing:.24em}
  .leitbild-txt b{font-size:1.85rem;line-height:1.12}
  .leitbild-txt span:last-child{font-size:1.02rem;max-width:60ch}
  .leitbild-pfeil{width:22px;height:22px;color:var(--polaris);opacity:.8}
}

/* Leitbild-Verweis in der Kopfzeile der Startkarte. */
.leitbild-link{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);transition:color .3s;
}
.leitbild-link svg{width:13px;height:13px;color:var(--polaris);opacity:.85}
.leitbild-link:hover{color:var(--ink)}
@media (max-width:760px){.leitbild-link{display:none}}