/* Lokal gehostete Schriften — keine Verbindung zu Google-Servern.
   Quelle: Google Fonts, Lizenz: SIL Open Font License. */

/* Sora — Variable, Gewichte 100–800 in einer Datei */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans — Fließtext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plusjakartasans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plusjakartasans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Mono — Nummern, Kennzeichnungen, Meta */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dmmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dmmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dmmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dmmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   IDA-Agency — Interims-Website (Onepager + Rechtsseiten)
   Tokens übernommen aus Projekte/IDA-Agency/V3/src/styles/tokens.css
   ============================================================ */
:root{
  --bg:#04040E;
  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.055);
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.14);

  --text:#FFFFFF;
  --text-muted:#8A8A9E;

  --pillar-i:#5A8AFF;
  --pillar-d:#A78BFA;
  --pillar-a:#22D3EE;

  --brand:#2F6BFF;
  --cta-bg:#5A8AFF;
  --cta-text:#04040E;

  --shadow-float:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -24px rgba(47,107,255,.35);
  --shadow-lift:0 1px 2px rgba(0,0,0,.5), 0 32px 64px -28px rgba(47,107,255,.5);

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --space-24:96px; --space-32:128px;

  --ease-spring:cubic-bezier(.16,1,.3,1);
  --dur-state:180ms;

  --shell:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- Atmosphäre: geschichtete Radialverläufe + Filmkorn --- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%,  rgba(47,107,255,.26), transparent 62%),
    radial-gradient(760px 540px at 92% 12%,  rgba(167,139,250,.17), transparent 60%),
    radial-gradient(1000px 680px at 50% 108%,rgba(34,211,238,.13), transparent 64%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.shell{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:0 var(--space-6)}

/* --- Typografie --- */
h1,h2,h3{font-family:'Sora',sans-serif;margin:0}
h1{font-size:clamp(2.6rem,7.2vw,4.6rem);font-weight:800;line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h3{font-size:1.25rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
.lead{font-size:1.0625rem;color:var(--text-muted);line-height:1.75;max-width:54ch}
.muted{color:var(--text-muted)}

.label{
  font-family:'DM Mono',monospace;
  font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--text-muted);
  display:inline-flex; align-items:center; gap:var(--space-3);
}
.label::before{content:""; width:28px; height:1px; background:currentColor; opacity:.55}

/* --- Kopfzeile --- */
.top{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(4,4,14,.72);
  border-bottom:1px solid var(--border);
}
.top-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;border-radius:10px}
.brand svg{width:40px;height:auto;display:block}
.brand-name{font-family:'Sora',sans-serif;font-weight:800;font-size:1.0625rem;letter-spacing:-.02em}
.brand-name span{color:var(--pillar-i)}
.nav{display:flex;align-items:center;gap:var(--space-8)}
.nav a{
  color:var(--text-muted); text-decoration:none; font-size:.875rem; font-weight:500;
  position:relative; padding:var(--space-2) 0;
  transition:color var(--dur-state) var(--ease-spring);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--pillar-i); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-state) var(--ease-spring);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
/* Spezifität: .nav a würde sonst --text-muted auf die Schaltfläche vererben */
.nav a.btn-primary{color:var(--cta-text)}
.nav a.btn-ghost{color:var(--text)}
.nav a.btn::after{display:none}
/* Onepager: auf Mobil entfallen die Ankerlinks (per Scrollen erreichbar),
   die Handlungsaufforderung bleibt sichtbar — kein Hamburger nötig. */
@media (max-width:820px){
  .nav a:not(.btn){display:none}
  .nav{gap:0}
}

/* --- Schaltflächen --- */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.9375rem;font-weight:600;
  padding:13px 24px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  transition:transform var(--dur-state) var(--ease-spring),
             box-shadow var(--dur-state) var(--ease-spring),
             background-color var(--dur-state) var(--ease-spring),
             border-color var(--dur-state) var(--ease-spring),
             color var(--dur-state) var(--ease-spring);
}
.btn-primary{background:var(--cta-bg);color:var(--cta-text);box-shadow:var(--shadow-float)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{border-color:var(--border-strong);color:var(--text);background:transparent}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--pillar-i);background:var(--surface)}
.btn-ghost:active{transform:translateY(0) scale(.985)}
.btn .arw{transition:transform var(--dur-state) var(--ease-spring)}
.btn:hover .arw{transform:translateX(3px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--pillar-a);outline-offset:3px;border-radius:6px}

/* --- Held --- */
.hero{position:relative;padding:var(--space-32) 0 var(--space-24)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-16);align-items:center}
@media (max-width:940px){
  .hero{padding:var(--space-24) 0 var(--space-16)}
  .hero-grid{grid-template-columns:1fr;gap:var(--space-12)}
}
h1 em{font-style:normal;position:relative;display:inline-block}
h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em;
  background:linear-gradient(90deg,var(--pillar-i),var(--pillar-d) 55%,var(--pillar-a));
  border-radius:2px; transform:scaleX(0); transform-origin:left;
  animation:underline 900ms var(--ease-spring) 620ms forwards;
}
@keyframes underline{to{transform:scaleX(1)}}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}

/* Leiterbahn-Motiv der Wortmarke, als Bildmarke ausgespielt */
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art svg{position:relative;z-index:1;width:100%;max-width:400px;height:auto;filter:drop-shadow(0 24px 60px rgba(47,107,255,.4))}
.hero-art::before{
  content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,255,.24),transparent 68%);
  filter:blur(14px);
}
.trace{stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.4s var(--ease-spring) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.node{transform-box:fill-box;transform-origin:center;opacity:0;animation:pop 500ms var(--ease-spring) forwards}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

/* --- Kennzahlenband --- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stat{padding:var(--space-8) var(--space-6);border-right:1px solid var(--border)}
.stat:last-child{border-right:0}
.stat .num{font-family:'Sora',sans-serif;font-size:clamp(2rem,4vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .num .suf{font-size:.5em;margin-left:2px;color:var(--pillar-i)}
.stat .cap{font-family:'DM Mono',monospace;font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);margin-top:var(--space-3)}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--border)}
}

/* --- Abschnitte --- */
section{position:relative;z-index:2}
.sec{padding:var(--space-24) 0}
@media (max-width:820px){.sec{padding:var(--space-16) 0}}
.sec-head{max-width:60ch;margin-bottom:var(--space-12)}
.sec-head h2{margin-top:var(--space-4)}
.sec-head .lead{margin-top:var(--space-6)}

/* --- Säulen --- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{
  position:relative;overflow:hidden;
  padding:var(--space-8);border-radius:20px;
  background:var(--surface);border:1px solid var(--border);
  transition:transform var(--dur-state) var(--ease-spring),
             border-color var(--dur-state) var(--ease-spring),
             background-color var(--dur-state) var(--ease-spring);
}
.pillar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 420ms var(--ease-spring);
}
.pillar:hover{transform:translateY(-5px);border-color:var(--border-strong);background:var(--surface-2)}
.pillar:hover::before{transform:scaleX(1)}
.pillar .glyph{
  font-family:'Sora',sans-serif;font-size:3.25rem;font-weight:800;line-height:1;
  color:var(--accent);letter-spacing:-.05em;
}
.pillar h3{margin:var(--space-4) 0 var(--space-3)}
.pillar p{color:var(--text-muted);font-size:.9375rem}
.pillar ul{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-2)}
.pillar li{
  font-family:'DM Mono',monospace;font-size:.75rem;color:var(--text-muted);
  padding-left:var(--space-6);position:relative;line-height:1.6;
}
.pillar li::before{
  content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;
  background:var(--accent);opacity:.85;
}
.p-i{--accent:var(--pillar-i)} .p-d{--accent:var(--pillar-d)} .p-a{--accent:var(--pillar-a)}

/* --- Vorgehen: versetztes Raster --- */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{
  padding:var(--space-8);border-radius:18px;border:1px solid var(--border);
  background:linear-gradient(160deg,var(--surface),transparent 70%);
  transition:transform var(--dur-state) var(--ease-spring),border-color var(--dur-state) var(--ease-spring);
}
.step:hover{transform:translateY(-4px);border-color:var(--border-strong)}
/* Versatz als Layout (margin), nicht als transform — sonst überschreibt ihn die Einblend-Regel */
.steps{align-items:start}
.steps .step:nth-child(2),.steps .step:nth-child(4){margin-top:var(--space-8)}
@media (max-width:820px){
  .steps .step:nth-child(2),.steps .step:nth-child(4){margin-top:0}
}
.step .no{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.14em;color:var(--pillar-i)}
.step h3{margin:var(--space-4) 0 var(--space-3)}
.step p{color:var(--text-muted);font-size:.9375rem}

/* --- Laufband --- */
.marquee{
  overflow:hidden;position:relative;z-index:2;
  padding:var(--space-8) 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,transparent,rgba(47,107,255,.06),transparent);
}
.marquee-track{display:flex;gap:var(--space-16);width:max-content;animation:slide 34s linear infinite}
.marquee span{
  font-family:'Sora',sans-serif;font-size:clamp(1.6rem,4.4vw,3rem);font-weight:800;
  letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);
  white-space:nowrap;
}
.marquee span:nth-child(2n){-webkit-text-stroke-color:rgba(90,138,255,.55)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* --- Handlungsaufforderung --- */
.cta-wrap{
  position:relative;overflow:hidden;border-radius:28px;
  border:1px solid var(--border-strong);
  background:
    radial-gradient(640px 300px at 18% 0%,rgba(47,107,255,.42),transparent 64%),
    radial-gradient(520px 280px at 86% 100%,rgba(167,139,250,.3),transparent 62%),
    rgba(255,255,255,.035);
  padding:var(--space-16) var(--space-12);
  text-align:center;
  box-shadow:var(--shadow-lift);
}
@media (max-width:820px){.cta-wrap{padding:var(--space-12) var(--space-6)}}
.cta-wrap .lead{margin:var(--space-6) auto 0}
.cta-wrap .hero-actions{justify-content:center}

/* --- Fußzeile --- */
.foot{border-top:1px solid var(--border);padding:var(--space-16) 0 var(--space-12);position:relative;z-index:2}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.foot a{color:var(--text-muted);text-decoration:none;font-size:.875rem;transition:color var(--dur-state) var(--ease-spring)}
.foot a:hover{color:var(--text)}
.foot-note{
  margin-top:var(--space-12);padding:var(--space-4) var(--space-6);
  border:1px dashed rgba(167,139,250,.45);border-radius:12px;
  font-family:'DM Mono',monospace;font-size:.75rem;color:var(--text-muted);line-height:1.7;
}

/* --- Einblenden beim Scrollen --- */
/* Einblenden als Animation mit fill-mode "backwards": hält nach dem Ablauf keinen
   transform fest, damit Hover-Effekte der Karten weiter greifen. */
.js .rv:not(.in){opacity:0}
.js .rv.in{animation:reveal 700ms var(--ease-spring) backwards}
@keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js .rv:not(.in){opacity:1}
  .trace{stroke-dashoffset:0}
  .node{opacity:1}
  h1 em::after{transform:scaleX(1)}
}

/* --- Rechtsseiten (Impressum, Datenschutz) --- */
.legal{max-width:680px;padding:var(--space-24) 0 var(--space-16)}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-top:var(--space-4)}
.legal h2{font-size:1.0625rem;font-weight:700;letter-spacing:0;margin-top:var(--space-12)}
.legal p,.legal address{margin-top:var(--space-3);color:var(--text-muted);font-style:normal;line-height:1.75}
.legal a{color:var(--pillar-i);text-underline-offset:4px;transition:color var(--dur-state) var(--ease-spring)}
.legal a:hover{color:var(--text)}
.legal .back{display:inline-block;margin-top:var(--space-16)}
/* Sichtbar markierte Lücke — darf nicht deployed werden */
.luecke{
  display:inline-block;padding:1px 8px;border:1px dashed rgba(167,139,250,.6);border-radius:6px;
  font-family:'DM Mono',monospace;font-size:.75rem;color:var(--pillar-d);
}

/* --- Kontakt: Text links, Formular rechts --- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-12);align-items:start;text-align:left}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:var(--space-8)}}
.contact .lead{margin:var(--space-6) 0 0}
.contact-meta{margin-top:var(--space-8);display:grid;gap:var(--space-2);font-size:.9375rem;color:var(--text-muted)}
.contact-meta a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--border-strong);transition:border-color var(--dur-state) var(--ease-spring)}
.contact-meta a:hover{border-color:var(--pillar-i)}

.form{display:grid;gap:var(--space-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:.8125rem;font-weight:600;color:var(--text)}
.field .opt{font-weight:400;color:var(--text-muted)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.9375rem;color:var(--text);
  background:rgba(4,4,14,.55);border:1px solid var(--border-strong);border-radius:12px;
  padding:12px 14px;
  transition:border-color var(--dur-state) var(--ease-spring),background-color var(--dur-state) var(--ease-spring);
}
.field textarea{resize:vertical;min-height:132px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.field select option{background:#0b0b1a;color:var(--text)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,255,255,.26)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--pillar-a);outline-offset:2px;border-color:transparent;background:rgba(4,4,14,.8)}
.field input::placeholder,.field textarea::placeholder{color:#6b6b80}
.form-note{font-size:.8125rem;color:var(--text-muted);line-height:1.6}
.form-note a{color:var(--text);text-underline-offset:3px}
.form button[type=submit]{justify-self:start;cursor:pointer}
.form button[disabled]{opacity:.6;cursor:progress;transform:none}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-status{display:none;font-size:.875rem;padding:12px 16px;border-radius:12px;line-height:1.6}
.form-status.show{display:block}
.form-status.ok{color:#6ee7b7;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25)}
.form-status.err{color:#fca5a5;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25)}
.form-status.err a{color:inherit;font-weight:600}

/* --- Fußzeile: Mail-Adresse und Copyright --- */
.foot-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-8);font-size:.8125rem;color:var(--text-muted)}
.foot-meta a{color:var(--text-muted)}

/* ============================================================
   Kontaktseite /kontakt
   ============================================================ */
.k-hero{position:relative;padding:var(--space-24) 0 var(--space-12)}
.k-hero h1{margin-top:var(--space-6);max-width:14ch}
.k-hero .lead{margin-top:var(--space-6)}
.k-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-12);align-items:center}
.k-hero-art{pointer-events:none}
/* Bewusst ohne Animation: Mit Einblend- oder Zeichen-Animation blieb die Grafik in Chrome
   nach Ablauf unsichtbar (geprüft 2026-09-19, headless und shell). Statisch zuverlässig. */
.k-hero-art svg{width:100%;height:auto;filter:drop-shadow(0 20px 50px rgba(47,107,255,.3))}
@media (max-width:820px){.k-hero{padding:var(--space-16) 0 var(--space-8)}.k-hero-grid{grid-template-columns:1fr}.k-hero-art{display:none}}

.k-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--space-8);align-items:start;padding-bottom:var(--space-24)}
@media (max-width:960px){.k-grid{grid-template-columns:1fr}}

/* Ebenen: Formular = erhöht, Seitenleiste = Basis mit Rahmen */
.k-card{
  position:relative;border-radius:24px;border:1px solid var(--border-strong);
  background:
    radial-gradient(560px 260px at 0% 0%,rgba(47,107,255,.16),transparent 70%),
    rgba(255,255,255,.035);
  box-shadow:var(--shadow-lift);
  padding:var(--space-12);
}
@media (max-width:560px){.k-card{padding:var(--space-8) var(--space-6)}}
.k-aside{display:grid;gap:var(--space-6);position:sticky;top:94px}
@media (max-width:960px){.k-aside{position:static}}
.k-panel{border-radius:20px;border:1px solid var(--border);background:var(--surface);padding:var(--space-8)}
.k-panel h2{font-size:1.125rem;letter-spacing:-.01em}

.k-form fieldset{border:0;margin:0;padding:0;min-width:0}
.k-form fieldset + fieldset{margin-top:var(--space-12);padding-top:var(--space-12);border-top:1px solid var(--border)}
/* float macht die legend zu normalem Inhalt — sonst sitzt sie auf der Rahmenlinie und das Padding landet darunter */
.k-form legend{padding:0;float:left;width:100%}
.k-form legend + *{clear:both}
.k-form legend h2{font-size:1.375rem}
.k-form .hint{padding-top:var(--space-2);font-size:.875rem;color:var(--text-muted)}
.k-fields{display:grid;gap:var(--space-4);padding-top:var(--space-6)}

/* Säulen-Auswahl: große Karten als Checkboxen */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
@media (max-width:700px){.picks{grid-template-columns:1fr}}
.pick{position:relative;display:block;cursor:pointer;border-radius:16px;border:1px solid var(--border-strong);background:rgba(4,4,14,.45);padding:var(--space-6) var(--space-6) var(--space-4);
  transition:transform var(--dur-state) var(--ease-spring),border-color var(--dur-state) var(--ease-spring),background-color var(--dur-state) var(--ease-spring),box-shadow var(--dur-state) var(--ease-spring)}
.pick:hover{transform:translateY(-3px);border-color:var(--accent)}
.pick:active{transform:translateY(0) scale(.99)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick .pk-glyph{font-family:'Sora',sans-serif;font-weight:800;font-size:2.25rem;line-height:1;color:var(--accent);letter-spacing:-.05em}
.pick .pk-name{display:block;margin-top:var(--space-3);font-family:'Sora',sans-serif;font-weight:700;font-size:1rem}
.pick .pk-sub{display:block;margin-top:var(--space-1);font-size:.8125rem;color:var(--text-muted);line-height:1.5}
.pick .pk-check{position:absolute;top:var(--space-4);right:var(--space-4);width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;
  transition:background-color var(--dur-state) var(--ease-spring),border-color var(--dur-state) var(--ease-spring)}
.pick .pk-check::after{content:"";width:9px;height:5px;border-left:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform var(--dur-state) var(--ease-spring)}
.pick:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,rgba(4,4,14,.6));box-shadow:0 0 0 1px var(--accent),0 18px 40px -22px var(--accent)}
.pick:has(input:checked) .pk-check{background:var(--accent);border-color:var(--accent)}
.pick:has(input:checked) .pk-check::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.pick:has(input:focus-visible){outline:2px solid var(--pillar-a);outline-offset:3px}

/* Unterpunkte je Säule: erscheinen erst, wenn die Säule gewählt ist.
   Ohne :has-Unterstützung bleiben sie einfach sichtbar. */
.details{margin-top:var(--space-6);display:grid;gap:var(--space-4)}
.detail-group h3{font-family:'DM Mono',monospace;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--border-strong);font-size:.8125rem;color:var(--text-muted);
  transition:border-color var(--dur-state) var(--ease-spring),color var(--dur-state) var(--ease-spring),background-color var(--dur-state) var(--ease-spring),transform var(--dur-state) var(--ease-spring)}
.chip:hover span{border-color:var(--accent);color:var(--text)}
.chip:active span{transform:scale(.97)}
.chip input:checked + span{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.chip input:focus-visible + span{outline:2px solid var(--pillar-a);outline-offset:2px}
@supports selector(:has(*)){
  .detail-group{display:none}
  .k-form:has(#b-i:checked) .dg-i,
  .k-form:has(#b-d:checked) .dg-d,
  .k-form:has(#b-a:checked) .dg-a{display:block;animation:reveal 420ms var(--ease-spring) backwards}
}

/* Seitenleiste */
.k-mail{display:inline-block;margin-top:var(--space-4);font-family:'Sora',sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border-strong);
  transition:border-color var(--dur-state) var(--ease-spring),color var(--dur-state) var(--ease-spring)}
.k-mail:hover{border-color:var(--pillar-i);color:var(--pillar-i)}
.k-mail:active{opacity:.8}
.k-panel address{margin-top:var(--space-4);font-style:normal;color:var(--text-muted);line-height:1.7}
.k-steps{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-6);counter-reset:k}
.k-steps li{position:relative;padding-left:48px;counter-increment:k}
.k-steps li::before{content:counter(k,decimal-leading-zero);position:absolute;left:0;top:1px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:'DM Mono',monospace;font-size:.75rem;color:var(--pillar-i);border:1px solid rgba(90,138,255,.4);background:rgba(90,138,255,.08)}
.k-steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;bottom:calc(var(--space-6) * -1 + 4px);width:1px;background:linear-gradient(var(--border-strong),transparent)}
.k-steps strong{display:block;font-family:'Sora',sans-serif;font-size:.9375rem}
.k-steps span{display:block;margin-top:2px;font-size:.875rem;color:var(--text-muted);line-height:1.6}