/* ==========================================================================
   kyberio Design System — LP-Fundament (treu zum offiziellen DS)
   Anthrazit-Bühne · Neon-Türkisgrün-Akzent · Fläche & LINIE (keine Schatten)
   TT Commons + JetBrains Mono (self-hosted) · Radien seit 16.09.2026 · Motion 120–200ms
   Quelle: kyberio Design System (Styleguide 2023 + Präsentationen)
   ========================================================================== */

/* ---- Fonts (self-hosted, echte TT Commons statt Hanken-Substitut) ---- */
@font-face{font-family:"TT Commons";src:url("../fonts/TTCommons-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"TT Commons";src:url("../fonts/TTCommons-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TT Commons";src:url("../fonts/TTCommons-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TT Commons";src:url("../fonts/TTCommons-DemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"TT Commons";src:url("../fonts/TTCommons-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---- Tokens ---- */
:root{
  /* Marke */
  --kyb-anthracite:#323246;    /* Markenfarbe */
  --kyb-surface:#262636;       /* Folien-/Flächenton */
  --kyb-stage:#17171f;         /* Bühne / Seitenhintergrund */
  --kyb-stage-2:#1e1e28;       /* leicht abgesetzte Fläche */
  --kyb-neon:#0fff9b;          /* einziger Akzent */
  --kyb-neon-a:#0fffde;        /* Verlauf-Start */
  --kyb-neon-b:#00ff82;        /* Verlauf-Ende */
  --kyb-grad:linear-gradient(120deg,var(--kyb-neon-a),var(--kyb-neon-b));
  --kyb-neon-ink:#00b268;      /* Neon-Ersatz für Text auf Hell */
  --kyb-light:#f1f1f4;         /* helle Fläche */

  /* Text auf Dunkel (getintet aus dem Anthrazit-Ton, nie stumpfes Grau) */
  --kyb-text:#eef0f4;
  --kyb-text-2:#b9bcca;
  --kyb-text-3:#8a8d9e;
  --kyb-line:rgba(255,255,255,.12);   /* Hairline */
  --kyb-line-strong:rgba(255,255,255,.22);
  --kyb-card:rgba(255,255,255,.05);   /* Kartenfläche auf Dunkel */
  --kyb-white:#ffffff;
  --kyb-danger:#ff5c5c;

  /* Spacing-Skala (aus dem DS: 8·14·20·26·36·44·56·70·90) */
  --s1:8px; --s2:14px; --s3:20px; --s4:26px; --s5:36px; --s6:44px; --s7:56px; --s8:70px; --s9:90px;

  --container:1200px;
  --pad:clamp(20px,5vw,120px);       /* DS-Seitenrand-Charakter */
  --t:160ms cubic-bezier(.2,.6,.2,1); /* zurückhaltend, ease-out */

  --font:"TT Commons",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* ---- Radien (16.09.2026) --------------------------------------------
     Das DS war auf radius:0 gebaut. Vier Stufen plus Pille lösen das ab:
     r-1 kleine Marken (Eingaben, Code), r-2 mittlere Kästen und Bilder,
     r-3 Karten, r-4 große abgesetzte Flächen. */
  --r-1:6px; --r-2:10px; --r-btn:12px; --r-3:16px; --r-4:22px; --r-pill:999px;

  /* ---- Sekundärtöne (nur für Verläufe, nie für Text oder Flächen pur) -- */
  --kyb-violet:#7d6cff;        /* dezenter Sekundärton, kühl */
  --kyb-blue:#3fa2ff;          /* zweiter Sekundärton, technisch */

  /* ---- Flächenverläufe ------------------------------------------------
     Sehr geringe Sättigung (4–12 % Deckkraft). Sie liegen als
     background-image ÜBER der jeweiligen Grundfarbe, damit der Ton der
     Fläche erhalten bleibt und der Text seinen Kontrast behält. */
  --g-karte:
    radial-gradient(120% 130% at 0% 0%, rgba(15,255,222,.055), transparent 62%),
    linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.008) 60%);
  --g-karte-hover:
    radial-gradient(120% 130% at 0% 0%, rgba(15,255,222,.10), transparent 64%),
    linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 60%);
  --g-flaeche:
    radial-gradient(90% 120% at 100% 0%, rgba(125,108,255,.07), transparent 60%),
    radial-gradient(85% 110% at 0% 100%, rgba(15,255,222,.065), transparent 62%),
    linear-gradient(170deg, rgba(255,255,255,.04), rgba(255,255,255,.006) 55%);
  --g-flaeche-2:
    radial-gradient(85% 115% at 0% 0%, rgba(15,255,222,.075), transparent 58%),
    radial-gradient(90% 120% at 100% 100%, rgba(63,162,255,.065), transparent 60%),
    linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.008) 55%);
  --g-akzent:
    radial-gradient(80% 160% at 0% 0%, rgba(0,255,130,.13), transparent 62%),
    radial-gradient(70% 140% at 100% 100%, rgba(125,108,255,.075), transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 55%);

  /* Feine hellere Oberkante für Tiefe (1 px, innen) */
  --kante-oben:inset 0 1px 0 rgba(255,255,255,.075);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  font-family:var(--font); font-weight:300; background:var(--kyb-stage); color:var(--kyb-text);
  font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; min-height:100vh;
}
img{max-width:100%;display:block}

/* ---- Browser-Surfaces themen (aus der Palette) ---- */
::selection{background:var(--kyb-neon);color:var(--kyb-stage)}
:focus-visible{outline:2px solid var(--kyb-neon);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:var(--kyb-anthracite) var(--kyb-stage)}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--kyb-stage)}
*::-webkit-scrollbar-thumb{background:var(--kyb-anthracite);border:3px solid var(--kyb-stage)}
*::-webkit-scrollbar-thumb:hover{background:#3d3d55}
a{color:var(--kyb-text);text-underline-offset:3px;text-decoration-color:var(--kyb-line-strong)}

/* ---- Layout ---- */
.kyb-wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);position:relative}
.kyb-sec{padding-block:clamp(var(--s7),8vw,var(--s9))}
.kyb-measure{max-width:70ch}         /* Fließtext 65–75ch */
.kyb-measure-title{max-width:20ch}

/* ---- Kicker (Marken-Element: Mono, Versal, 0.3em) ---- */
.kyb-kicker{
  font-family:var(--mono); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.3em;
  color:var(--kyb-neon); display:inline-block;
}

/* ---- Typo ---- */
.kyb-h1{font-family:var(--font);font-weight:600;letter-spacing:-.024em;line-height:1.02;
  font-size:clamp(2.4rem,5.6vw,4.4rem);color:var(--kyb-white)}
.kyb-h2{font-family:var(--font);font-weight:600;letter-spacing:-.022em;line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.9rem);color:var(--kyb-white)}
.kyb-h3{font-family:var(--font);font-weight:600;letter-spacing:-.018em;line-height:1.2;
  font-size:clamp(1.15rem,1.9vw,1.4rem);color:var(--kyb-white)}
.kyb-lead{font-weight:300;font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.55;color:var(--kyb-text-2);max-width:66ch}
.kyb-muted{color:var(--kyb-text-2)} .kyb-dim{color:var(--kyb-text-3)}
.kyb-neon{color:var(--kyb-neon)} .kyb-white{color:var(--kyb-white)}
.kyb-val{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.kyb-src{font-family:var(--mono);font-size:.72rem;color:var(--kyb-text-3);letter-spacing:.02em}

/* ---- LINIEN (das tragende Gestaltungsmittel) ---- */
.kyb-rule{border:0;border-top:2px solid var(--kyb-neon)}          /* Neon-Regel (Schwerpunkt) */
.kyb-rule-dim{border:0;border-top:2px solid var(--kyb-line-strong)}/* gedimmte Regel */
.kyb-hair{border:0;border-top:1px solid var(--kyb-line)}          /* Hairline */

/* Aufzählung: 2px Neon-Kante links statt Bullets (KEIN Bullet-Zeichen) */
.kyb-list{list-style:none;display:grid;gap:var(--s3)}
.kyb-list>li{padding-left:var(--s3);border-left:2px solid var(--kyb-neon);color:var(--kyb-text-2)}
.kyb-list>li strong{display:block;color:var(--kyb-white);font-weight:600}

/* Label/Wert-Zeile mit Hairline (statt Tabelle) */
.kyb-rows{display:grid}
.kyb-row{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding-block:var(--s3);border-top:1px solid var(--kyb-line)}
.kyb-row:last-child{border-bottom:1px solid var(--kyb-line)}
.kyb-row .k{color:var(--kyb-text-3);font-family:var(--mono);font-size:.82rem;letter-spacing:.02em}
.kyb-row .v{color:var(--kyb-white);text-align:right}

/* ---- Karten: 3px-Oberkante, keine Radien/Schatten/Rahmen ---- */
.kyb-card{background:var(--kyb-card);border-top:3px solid var(--kyb-anthracite);padding:var(--s5);transition:border-color var(--t),background var(--t)}
.kyb-card--focus{border-top-color:var(--kyb-neon)}
.kyb-card:hover{border-top-color:var(--kyb-neon);background:rgba(255,255,255,.07)}

/* ---- Buttons ---- */
.kyb-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font);font-weight:600;font-size:.98rem;
  padding:calc(var(--s3) - 1px) var(--s5);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:filter var(--t),background var(--t),color var(--t),border-color var(--t),opacity var(--t)}
.kyb-btn:active{opacity:.85}                        /* Press: Opazität, keine Skalierung */
.kyb-btn[disabled],.kyb-btn.is-disabled{opacity:.4;pointer-events:none}
.kyb-btn--primary{background:var(--kyb-grad);color:var(--kyb-stage);border-color:transparent}
.kyb-btn--primary:hover{filter:brightness(1.08)}
.kyb-btn--ghost{background:transparent;color:var(--kyb-neon);border-color:var(--kyb-neon)}
.kyb-btn--ghost:hover{background:var(--kyb-neon);color:var(--kyb-stage)}   /* Kontur→Neon-Fläche, Anthrazit-Text */
.kyb-btn--quiet{background:transparent;color:var(--kyb-text);border-color:var(--kyb-line-strong)}
.kyb-btn--quiet:hover{border-color:var(--kyb-text-2)}
.kyb-btn--lg{padding:var(--s3) var(--s6);font-size:1.02rem}
.kyb-btn--block{width:100%;justify-content:center}
.kyb-btn__arrow{transition:transform var(--t)}
.kyb-btn:hover .kyb-btn__arrow{transform:translateX(3px)}

/* ---- Nav ---- */
.kyb-nav{position:sticky;top:0;z-index:60;background:rgba(23,23,31,.86);border-bottom:1px solid var(--kyb-line)}
.kyb-nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:68px}
.kyb-brand img{height:24px;width:auto}
.kyb-nav__mid{display:none;gap:var(--s6);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.kyb-nav__mid a{color:var(--kyb-text-2);text-decoration:none;transition:color var(--t)}
.kyb-nav__mid a:hover{color:var(--kyb-white)}
.kyb-status{display:none;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;color:var(--kyb-text-3);text-transform:uppercase;letter-spacing:.14em}
.kyb-status__dot{width:7px;height:7px;border-radius:50%;background:var(--kyb-neon)}
@media(min-width:1000px){.kyb-nav__mid{display:flex}.kyb-status{display:flex}}

/* ---- Störer / Siegel (Kreis-Ausnahme) ---- */
.kyb-seals{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.kyb-seals img{height:78px;width:auto}
.kyb-cert{font-family:var(--mono);font-size:.8rem;color:var(--kyb-neon);text-decoration:none;letter-spacing:.02em}
.kyb-cert:hover{text-decoration:underline}

/* ---- Referenz-Logowand (farbige Logos auf Hell) ---- */
.kyb-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--kyb-line);border-top:1px solid var(--kyb-line);border-bottom:1px solid var(--kyb-line)}
@media(min-width:640px){.kyb-logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.kyb-logos{grid-template-columns:repeat(6,1fr)}}
.kyb-logo{background:var(--kyb-light);display:flex;align-items:center;justify-content:center;padding:var(--s4) var(--s3);min-height:92px}
.kyb-logo img{max-height:38px;max-width:120px;object-fit:contain}
.kyb-logo--ph{background:#e7e7ec;color:#9a9aa4;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}

/* ---- Form ---- */
.kyb-form{background:var(--kyb-surface);border-top:3px solid var(--kyb-anthracite);padding:clamp(var(--s5),4vw,var(--s7))}
.kyb-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* Spamfalle, siehe partials/formular */
.kyb-fg{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:560px){.kyb-fg{grid-template-columns:1fr 1fr}}
.kyb-grp{display:flex;flex-direction:column;gap:8px}
.kyb-grp--full{grid-column:1/-1}
.kyb-label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--kyb-text-2)}
.kyb-label .req{color:var(--kyb-neon)}
.kyb-hint{font-size:.86rem;color:var(--kyb-text-3);margin-top:-2px}   /* Hilfetext unter dem Feld, aus dem Blueprint-Feld `hinweis` */

/* ---- Fehler am Feld ------------------------------------------------------
   Die Meldung sitzt im selben Takt wie der Hilfetext: gleiche Größe, gleicher
   Abstand, andere Bedeutung. Sie ist ein Satz an einen Menschen und steht
   deshalb in der Textschrift, nicht in der Mono wie die Beschriftung.

   Nicht nur Farbe: Dass dort überhaupt ein Satz steht, der vorher nicht da
   war, ist das eigentliche Signal — der rote Rahmen verstärkt es nur. Sonst
   trüge die Farbe die Information allein (WCAG 1.4.1).

   #ff5c5c auf #17171f ergibt 6,4:1 und hält damit AA für Fließtext ebenso wie
   die 3:1, die ein Bedienelement gegen seine Umgebung braucht. */
.kyb-fehler{font-size:.86rem;font-weight:500;color:var(--kyb-danger);margin-top:-2px}
.kyb-grp.is-fehler .kyb-input{border-color:var(--kyb-danger)}
.kyb-grp.is-fehler .kyb-input:focus{border-color:var(--kyb-danger)}
.kyb-grp.is-fehler .kyb-input:focus-visible{outline-color:var(--kyb-danger)}

/* ---- Nach dem Absenden ---------------------------------------------------
   Der Balken links ist dieselbe Sprache, die `.k-empty` und `.k-formfehler`
   schon sprechen — nur in der Markenfarbe, weil dies der eine Moment ist, der
   sie verdient. Kein Kasten, kein Schatten: Das Formular ist weg, die Fläche
   bleibt dieselbe. */
.kyb-danke{border-left:2px solid var(--kyb-neon);padding:var(--s2) 0 var(--s2) var(--s4)}
.kyb-danke__h{font-family:var(--font);font-weight:600;font-size:1.3rem;letter-spacing:-.015em;color:var(--kyb-white)}
.kyb-danke__t{margin-top:var(--s2);font-size:.98rem;line-height:1.5;color:var(--kyb-text-2);max-width:42ch}
/* Der Rahmen ist heller als --kyb-line-strong, weil ein Bedienelement laut
   WCAG 1.4.11 mindestens 3:1 gegen seine Umgebung braucht. */
.kyb-input,textarea.kyb-input{font-family:var(--font);font-weight:300;font-size:1rem;padding:var(--s2) var(--s3);
  background:var(--kyb-stage);border:1px solid rgba(255,255,255,.32);color:var(--kyb-white);width:100%;transition:border-color var(--t)}
.kyb-input::placeholder{color:var(--kyb-text-3)}
.kyb-input:focus{outline:none;border-color:var(--kyb-neon)}
.kyb-input:focus-visible{outline:2px solid var(--kyb-neon);outline-offset:2px}  /* Tastaturfokus sichtbar halten */
textarea.kyb-input{resize:vertical;min-height:96px}
.kyb-choice-row{display:grid;gap:var(--s2)}
.kyb-choice{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3);border:1px solid var(--kyb-line-strong);
  background:var(--kyb-stage);cursor:pointer;transition:border-color var(--t),background var(--t)}
.kyb-choice:hover{border-color:var(--kyb-neon)}
.kyb-choice:focus-within{outline:2px solid var(--kyb-neon);outline-offset:2px}
.kyb-choice input{margin-top:.2rem;accent-color:var(--kyb-neon)}
.kyb-choice .ct{display:block;color:var(--kyb-white);font-weight:600}
.kyb-choice .cd{display:block;color:var(--kyb-text-2);font-size:.86rem;margin-top:2px}
.kyb-choice.is-selected{border-color:var(--kyb-neon);border-left-width:2px}
.kyb-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--kyb-text-2)}
.kyb-consent input{margin-top:.2rem;accent-color:var(--kyb-neon)}
.kyb-note{font-family:var(--mono);font-size:.76rem;color:var(--kyb-text-3);margin-top:var(--s2);text-align:center}
.kyb-note a{color:var(--kyb-neon);text-decoration-color:var(--kyb-neon)}
.kyb-person{display:flex;align-items:center;gap:var(--s3)}
.kyb-person__photo{width:56px;height:56px;flex-shrink:0;border:1px dashed var(--kyb-line-strong);background:var(--kyb-card);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.6rem;color:var(--kyb-neon);text-align:center;line-height:1.2;overflow:hidden}
.kyb-person__photo img{width:100%;height:100%;object-fit:cover}
.kyb-person__nm{color:var(--kyb-white);font-weight:600}
.kyb-person__rl{color:var(--kyb-text-3);font-family:var(--mono);font-size:.82rem}

/* ---- Bild-Platzhalter (Bildsprache: dunkel-technisch, Scrim links) ---- */
.kyb-imgph{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--kyb-stage-2);
  border-top:3px solid var(--kyb-anthracite);color:var(--kyb-text-3);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;padding:var(--s4)}
.kyb-imgph--dc{aspect-ratio:16/9;width:100%}
.kyb-scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--kyb-stage) 0%,rgba(23,23,31,.72) 40%,rgba(23,23,31,.15) 100%);pointer-events:none}

/* ---- Footer ---- */
.kyb-footer{border-top:1px solid var(--kyb-line);padding-block:var(--s6)}
.kyb-footer__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4)}
.kyb-footer img{height:22px}
.kyb-footer nav{display:flex;flex-wrap:wrap;gap:var(--s4)}
.kyb-footer a{color:var(--kyb-text-3);text-decoration:none;font-family:var(--mono);font-size:.8rem}
.kyb-footer a:hover{color:var(--kyb-text)}
.kyb-footer__cp{font-family:var(--mono);font-size:.76rem;color:var(--kyb-text-3)}

/* ---- Sticky-Mobile-CTA ---- */
.kyb-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(23,23,31,.94);border-top:1px solid var(--kyb-line);
  padding:12px var(--pad);display:flex;gap:12px}
.kyb-sticky .kyb-btn{flex:1}
@media(min-width:760px){.kyb-sticky{display:none}}

/* ---- Motion: EIN zurückhaltender Reveal (Fläche/Opazität), reduced-motion sichtbar ---- */
.kyb-reveal{opacity:0;transform:translateY(10px);transition:opacity .5s var(--t),transform .5s var(--t)}
.kyb-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .kyb-reveal{opacity:1!important;transform:none!important}
}