/* uromio — Website
   Farben: NC_2.0 (Corporate Design, 27.08.2026) · Schrift: Satoshi Variable */

@font-face{
  font-family:"Satoshi";
  src:url("assets/font/Satoshi-Variable.woff2") format("woff2-variations"),
      url("assets/font/Satoshi-Variable.ttf")  format("truetype-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* NC_2.0 */
  --nc-100:#EBF0F3;   /* Hell */
  --nc-200:#DDE6F8;   /* Signal · LED */
  --nc-250:#7FAADB;   /* Blau mittel */
  --nc-300:#5987D8;   /* Blau hell */
  --nc-a:#2963E0;     /* Akzent, nur digital */
  --nc-500:#2E4C8D;   /* Anker · Markenblau */
  --nc-600:#162866;   /* Indigo · Hardware */
  --nc-900:#151A37;   /* Tiefe */

  --green:#22C55E; --green-400:#4ADE80; --green-700:#15803D; --green-bg:#F1FBF4;

  --paper:#FFFFFF;
  --ink:var(--nc-600);
  --ink-2:var(--nc-500);
  --ink-3:#7E93BC;
  --hair:rgba(22,40,102,.12);

  --r:28px;           /* Modulradius */
  --r-s:14px;
  --nav-h:76px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:72px; --s9:104px; --s10:144px;
  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body,figure,dl,dd,h1,h2,h3,h4,p,ul,ol{ margin:0; }
ul{ padding:0; list-style:none; }
img,svg,video{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }

body{
  background:var(--paper); color:var(--ink-2);
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }
.narrow{ max-width:760px; margin:0 auto; }

h1,h2,h3,h4{ font-weight:700; letter-spacing:-.025em; line-height:1.12; color:var(--nc-500); text-wrap:balance; }
h1{ font-size:clamp(38px,6vw,74px); }
h2{ font-size:clamp(27px,3.4vw,40px); }
h3{ font-size:clamp(20px,2.1vw,25px); letter-spacing:-.02em; }
h4{ font-size:19px; letter-spacing:-.015em; }
p{ text-wrap:pretty; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--nc-300); }
.lead{ font-size:clamp(21px,2.6vw,30px); line-height:1.35; font-weight:500; color:var(--nc-300); letter-spacing:-.015em; }
.body{ font-size:17px; line-height:1.65; color:var(--ink-2); }
.small{ font-size:14.5px; line-height:1.6; color:var(--ink-3); }
a{ color:var(--nc-a); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--nc-a); outline-offset:3px; border-radius:6px; }

/* ── Navigation ─────────────────────────────────────────── */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); display:flex; align-items:center;
      transition:background .25s ease, box-shadow .25s ease; }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); width:100%;
         display:flex; align-items:center; gap:var(--s5); }
.nav a.brand{ display:none; }
.nav .links{ display:flex; align-items:center; gap:40px; margin:0 auto; }
.nav .links > li{ position:relative; }
.nav .links a, .nav .links .drop{
  color:var(--nc-100); font-size:20px; font-weight:500; letter-spacing:-.015em; text-decoration:none;
  padding:8px 2px; display:inline-flex; align-items:center; gap:8px; opacity:.94;
  background:none; border:0; cursor:pointer; font-family:inherit; }
.nav .links a:hover, .nav .links .drop:hover{ opacity:1; text-decoration:none; }
.nav .chev{ width:13px; height:13px; flex:none; transition:transform .2s ease; }
.nav .sub{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-4px);
           background:var(--paper); border-radius:18px; box-shadow:0 16px 48px rgba(21,26,55,.22);
           padding:10px; min-width:268px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; }
.nav li:hover .sub, .nav li:focus-within .sub, .nav li.open .sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav li:hover .chev, .nav li:focus-within .chev, .nav li.open .chev{ transform:rotate(180deg); }
.nav .sub a{ color:var(--nc-500); display:block; padding:11px 14px; border-radius:10px; font-size:17px; font-weight:500; opacity:1; }
.nav .sub a:hover{ background:var(--nc-100); }
.nav .sub .d{ display:block; font-size:14px; font-weight:400; color:var(--ink-3); margin-top:2px; }

/* Nav auf hellem Grund */
.nav.solid{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(1.6) blur(14px);
            backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 var(--hair); }
.nav.solid .links a, .nav.solid .links .drop{ color:var(--nc-500); }
.nav.solid .sub a{ color:var(--nc-500); }
.nav.solid a.brand{ display:block; width:122px; color:var(--nc-500); }
.nav.solid .links{ margin-right:auto; margin-left:var(--s6); }

.navtoggle{ display:none; }

/* ── Hero ───────────────────────────────────────────────── */
.hero{ position:relative; display:grid; place-items:center; overflow:hidden;
       background:var(--nc-500);
       min-height:100vh; min-height:100svh; }   /* svh: ohne die Browserleisten auf dem Handy */
.hero .bg{ position:absolute; inset:0; background:center/cover no-repeat; }
/* Ohne Bewegung bleibt das Standbild aus dem Hintergrund stehen. */
@media (prefers-reduced-motion:reduce){ .hero .bg video{ display:none; } }
.hero .bg img, .hero .bg video{ width:100%; height:100%; object-fit:cover; }
.hero .mark{ position:relative; z-index:2; width:min(58vw,620px); color:var(--nc-100);
             filter:drop-shadow(0 6px 34px rgba(10,15,40,.34)); }
.hero .mark .reg{ font-size:.0px; }
/* Der Knopf sitzt im Bild, unter der Wortmarke, mit Abstand zur Unterkante.
   Die Zeile drumherum fängt den :hover-Versatz des Knopfes ab. */
.hero .hero-cta{ position:absolute; z-index:3; left:0; right:0; bottom:clamp(46px,10vh,100px);
                 display:flex; justify-content:center; padding:0 var(--s5); }
.hero .hero-cta .btn{ padding:18px 40px; font-size:19px; }
/* Beim Überfahren wechselt der Knopf ins Grün der Marke und atmet leicht. */
.hero .hero-cta .btn:hover,
.hero .hero-cta .btn:focus-visible{ animation:knopf-puls 1.5s ease-in-out infinite; }
@keyframes knopf-puls{
  0%,100%{ transform:translateY(-1px) scale(1); }
  50%    { transform:translateY(-1px) scale(1.045); }
}
@media (prefers-reduced-motion:reduce){ .hero .hero-cta .btn:hover{ animation:none; } }
.hero .scroll{ position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%);
               color:var(--nc-100); opacity:.7; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }

/* ── Claim ──────────────────────────────────────────────── */
.claim{ padding:var(--s10) 0 var(--s8); text-align:center; }
.claim h1{ margin-bottom:var(--s3); }
.claim .lead{ margin-bottom:var(--s6); }
.claim .body{ max-width:640px; margin:0 auto var(--s6); }
.claim .body b{ color:var(--nc-500); font-weight:700; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
      padding:14px 30px; border-radius:999px; font-size:16.5px; font-weight:700; letter-spacing:-.01em;
      border:0; cursor:pointer; text-decoration:none; transition:transform .15s ease, background .15s ease, color .15s ease; }
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-soft{ background:var(--nc-200); color:var(--nc-a); }
.btn-soft:hover{ background:#CCDBF5; }
.btn-solid{ background:var(--nc-a); color:#fff; }
.btn-solid:hover{ background:var(--nc-500); }
.btn-dark{ background:var(--nc-900); color:var(--nc-100); }
.btn-dark:hover{ background:var(--nc-600); }
.btn-green{ background:var(--green-400); color:#0C3B22; }
.btn-green:hover{ background:var(--green); }
.btn-ghost{ background:transparent; color:var(--nc-a); box-shadow:inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover{ background:var(--nc-200); }
/* Im dunklen Aufruf-Block trägt das Blau des Umriss-Knopfes nicht. */
.cta .btn-ghost{ color:var(--nc-200); }

/* Ein Grün für alle: jeder Knopf wechselt beim Überfahren dorthin.
   Steht bewusst nach den einzelnen Fassungen — und noch einmal mit
   [data-theme] davor, damit es auch die dunkle Ansicht übersteuert. */
.btn:hover, .btn:focus-visible,
[data-theme="dark"] .btn:hover, [data-theme="dark"] .btn:focus-visible{
  background:var(--green-400); color:#0C3B22; box-shadow:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.claim .btn-row{ justify-content:center; }

/* ── Bento ──────────────────────────────────────────────── */
.bento{ display:grid; gap:var(--s4); grid-template-columns:repeat(3,1fr); padding-bottom:var(--s9); }
.tile{ border-radius:var(--r); padding:var(--s6); display:flex; flex-direction:column; min-height:330px; }
.tile h3{ color:inherit; margin-bottom:var(--s3); max-width:15ch; }
.tile p{ font-size:16px; line-height:1.55; }
.tile .foot{ margin-top:auto; padding-top:var(--s5); }
.t-dark{ background:var(--nc-900); color:var(--nc-200); }
.t-dark .stat{ margin-top:auto; }
.t-dark .n{ font-size:clamp(64px,7vw,92px); line-height:.95; font-weight:500; letter-spacing:-.04em; color:var(--nc-300); }
.t-dark .k{ font-size:20px; font-weight:700; color:var(--nc-100); letter-spacing:-.02em; margin-top:var(--s2); }
.t-dark p{ color:rgba(221,230,248,.72); }
.t-blue{ background:var(--nc-300); color:var(--nc-900); }
.t-blue h3{ color:var(--nc-900); }
.t-blue p{ color:rgba(21,26,55,.78); }
.t-green{ background:var(--green-bg); color:var(--green-700); }
.t-green h3{ color:var(--green-700); }
.t-green p{ color:#2F7A50; }
.t-wide{ grid-column:span 2; }
.t-mid{ grid-column:2 / -1; }
.tile-media{ border-radius:var(--r); overflow:hidden; background:var(--nc-500); min-height:330px; }
.tile-media img, .tile-media video{ width:100%; height:100%; object-fit:cover; }

/* ── Sektionen ──────────────────────────────────────────── */
section{ scroll-margin-top:calc(var(--nav-h) + 8px); }
.sec{ padding:var(--s9) 0; }
.sec-head{ max-width:720px; margin-bottom:var(--s7); }
.sec-head .eyebrow{ margin-bottom:var(--s3); }
.sec-head h2{ margin-bottom:var(--s4); }
.sec-center{ text-align:center; margin-left:auto; margin-right:auto; }

.band{ background:var(--nc-100); }
.band-dark{ background:var(--nc-600); }
.band-dark h2,.band-dark h3,.band-dark h4{ color:var(--nc-100); }
.band-dark .lead{ color:var(--nc-300); }
.band-dark .body,.band-dark p{ color:rgba(235,240,243,.76); }
.band-dark .eyebrow{ color:var(--nc-300); }

/* Schritte */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.step{ display:flex; flex-direction:column; gap:var(--s3); }
.step .pic{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--nc-500); }
.step .pic img,.step .pic video{ width:100%; height:100%; object-fit:cover; }
.step .n{ font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--nc-300); }
.step p{ font-size:16px; }

/* Split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }
.split.rev .pic{ order:2; }
.split .pic{ border-radius:var(--r); overflow:hidden; background:var(--nc-500); }
.split .pic img,.split .pic video{ width:100%; height:auto; }

/* Fakten */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s5) var(--s6);
        border-top:1px solid var(--hair); padding-top:var(--s5); margin-top:var(--s6); }
.band-dark .facts{ border-color:rgba(235,240,243,.18); }
.fact .k{ display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.band-dark .fact .k{ color:var(--nc-300); }
.fact .v{ display:block; font-size:17px; font-weight:700; color:var(--nc-500); letter-spacing:-.01em; }
.band-dark .fact .v{ color:var(--nc-100); }

/* LED-Legende */
.leds{ display:grid; gap:var(--s3); }
.led{ display:grid; grid-template-columns:34px 1fr; gap:var(--s4); align-items:center; }
.led .o{ width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 5px currentColor; margin:0 auto; }
.led .t{ font-size:16px; color:rgba(235,240,243,.82); }
.led .t b{ color:var(--nc-100); font-weight:700; }
.led.b1{ color:#7FA8FF; } .led.b2{ color:#B9D0FF; } .led.g{ color:var(--green-400); }
.led.o1{ color:#F6C177; } .led.r{ color:#F0808A; }

/* Karten */
.cards{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.card{ background:var(--paper); border-radius:var(--r); padding:var(--s6); box-shadow:0 1px 3px rgba(22,40,102,.07), 0 0 0 1px var(--hair); }
.card h4{ margin-bottom:var(--s2); }
.card p{ font-size:16px; line-height:1.55; }
.band .card{ box-shadow:none; }

/* Tabelle */
.tw{ overflow-x:auto; border-radius:var(--r-s); }
table{ width:100%; min-width:600px; border-collapse:collapse; font-size:16px; }
th,td{ text-align:left; padding:14px 20px 14px 0; border-bottom:1px solid var(--hair); vertical-align:top; }
th{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
td{ color:var(--ink-2); }
td:first-child{ font-weight:700; color:var(--nc-500); }
.band-dark th{ color:var(--nc-300); }
.band-dark td{ color:rgba(235,240,243,.78); border-color:rgba(235,240,243,.16); }
.band-dark td:first-child{ color:var(--nc-100); }
.band-dark th{ border-color:rgba(235,240,243,.16); }

/* FAQ */
.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; gap:var(--s4); align-items:baseline;
              font-size:19px; font-weight:700; letter-spacing:-.015em; color:var(--nc-500); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; font-size:24px; font-weight:400; color:var(--nc-300); line-height:1; transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--nc-a); }
.faq .a{ padding:0 0 24px; font-size:16.5px; line-height:1.6; max-width:64ch; }
.faq .a .tbd{ color:var(--ink-3); }

/* Zwei-Wege-Block */
.ways{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.way{ border-radius:var(--r); padding:var(--s7); display:flex; flex-direction:column; }
.way h3{ margin-bottom:var(--s3); }
.way p{ margin-bottom:var(--s5); }
.way .btn-row{ margin-top:auto; }
.way-a{ background:var(--nc-100); }
.way-b{ background:var(--nc-600); }
.way-b h3{ color:var(--nc-100); } .way-b p{ color:rgba(235,240,243,.76); }

/* CTA-Band */
.cta{ border-radius:var(--r); background:var(--nc-500); color:var(--nc-100); padding:var(--s9) var(--s7); text-align:center; }
.cta h2{ color:var(--nc-100); margin-bottom:var(--s4); }
.cta p{ color:rgba(235,240,243,.8); max-width:56ch; margin:0 auto var(--s6); }
.cta .btn-row{ justify-content:center; }
/* Wie der dunkle Kasten im Flyer: linksbündig, tiefes Indigo, ohne Knopf. */
.cta-links{ background:var(--nc-600); text-align:left; padding:var(--s8) var(--s7); }
.cta-links h2{ max-width:22ch; }
.cta-links p{ max-width:52ch; margin:0; }
@media (max-width:680px){ .cta-links{ padding:var(--s6) var(--s5); } }

/* Hinweisbox */
.notice{ background:var(--nc-100); border-radius:var(--r-s); padding:var(--s5) var(--s6); font-size:15px; line-height:1.6; color:var(--ink-2); }
.notice b{ color:var(--nc-500); }

/* Fachkreis-Schranke */
.gate{ position:fixed; inset:0; z-index:200; background:rgba(21,26,55,.72);
       -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:grid; place-items:center; padding:var(--s5); }
.gate[hidden]{ display:none; }
.gate .box{ background:var(--paper); border-radius:var(--r); padding:var(--s8) var(--s7); max-width:560px; text-align:center; }
.gate h2{ font-size:28px; margin-bottom:var(--s4); }
.gate p{ font-size:16.5px; margin-bottom:var(--s6); }
/* Impressum und Datenschutz müssen auch vor der Bestätigung erreichbar sein. */
.gate .gate-recht{ margin:var(--s6) 0 0; font-size:13.5px; color:var(--ink-3); }
.gate .gate-recht a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; }
.gate .gate-recht a:hover{ color:var(--nc-500); }

/* Footer */
footer{ background:var(--nc-900); color:rgba(235,240,243,.62); padding:var(--s9) 0 var(--s7); font-size:15px; }
footer .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--s7); margin-bottom:var(--s8); }
footer .mark{ width:132px; color:var(--nc-100); margin-bottom:var(--s5); }
footer h4{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--nc-300); margin-bottom:var(--s4); }
footer li{ margin-bottom:10px; }
footer a{ color:rgba(235,240,243,.78); }
footer a:hover{ color:var(--nc-100); }
footer .legal{ border-top:1px solid rgba(235,240,243,.14); padding-top:var(--s5);
               display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); align-items:baseline; font-size:13.5px; }
footer .zweck{ max-width:74ch; font-size:13.5px; line-height:1.6; margin-bottom:var(--s5); color:rgba(235,240,243,.55); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:960px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .t-wide,.t-mid{ grid-column:span 2; }
  .steps{ grid-template-columns:1fr; gap:var(--s6); }
  .split{ grid-template-columns:1fr; gap:var(--s6); }
  .split.rev .pic{ order:0; }
  .ways{ grid-template-columns:1fr; }
  footer .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  /* Hochkant bleibt von 16:9 nur gut ein Viertel der Breite übrig. Zentriert
     stünde dort die leere Wand — also den Ausschnitt nach rechts ziehen,
     damit Becken und Gerät im Bild sind. Das Standbild wandert mit. */
  .hero .bg{ background-position:70% center; }
  .hero .bg video, .hero .bg img{ object-position:70% center; }

  :root{ --r:22px; --s9:64px; --s10:80px; }
  body{ font-size:16px; }
  .hero .mark{ width:72vw; }
  .bento{ grid-template-columns:1fr; }
  .t-wide,.t-mid{ grid-column:span 1; }
  .tile{ min-height:0; padding:var(--s5); }
  .tile-media{ min-height:220px; }
  .cta{ padding:var(--s8) var(--s5); }
  .way{ padding:var(--s6); }
  footer .cols{ grid-template-columns:1fr; gap:var(--s6); }

  /* Nav mobil: Links umbrechen lassen */
  :root{ --nav-h:62px; }
  .nav .links{ gap:20px; }
  .nav .links a, .nav .links .drop{ font-size:16.5px; gap:6px; }
  .nav .chev{ width:11px; height:11px; }
  .nav.solid a.brand{ width:92px; }
  .nav.solid .links{ margin-left:var(--s3); }
  .nav .sub{ left:auto; right:0; transform:none; min-width:200px; }
  .nav li:hover .sub,.nav li:focus-within .sub{ transform:none; }
}

/* Ablauftabelle: Schrittnummer nicht umbrechen */
.steps-table td:first-child{ white-space:nowrap; padding-right:28px; }

/* ── App-Ansicht: freigestelltes Telefon ─────────────────── */
.pic-plain{ background:none !important; display:grid; place-items:center; }
.pic-plain img{ width:min(300px,72%); height:auto; filter:drop-shadow(0 24px 48px rgba(0,0,0,.34)); }

/* ── Umschalter oben links ───────────────────────────────── */
.themetoggle{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:0 0 auto; min-width:96px; height:36px; padding:0 14px; border:0; border-radius:999px;
  background:rgba(235,240,243,.16); color:var(--nc-100); cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:-.01em;
  transition:background .2s ease, color .2s ease; }
.themetoggle:hover{ background:rgba(235,240,243,.28); }
.themetoggle svg{ width:15px; height:15px; flex:none; }
.nav.solid .themetoggle{ background:var(--nc-200); color:var(--nc-500); }
.nav-in::after{ content:""; flex:0 0 96px; }   /* hält die Links mittig */

/* ── Menüknopf ───────────────────────────────────────────────
   Am Schreibtisch stehen die Verweise offen in der Leiste, erst
   darunter wandern sie hinter den Knopf. */
.menuknopf{ display:none; flex:0 0 auto; width:40px; height:36px; padding:0; border:0;
  border-radius:999px; background:rgba(235,240,243,.16); color:var(--nc-100);
  cursor:pointer; align-items:center; justify-content:center; }
.menuknopf svg{ width:20px; height:20px; }
.menuknopf svg path{ transition:transform .22s ease, opacity .16s ease; transform-origin:50% 50%; }
.nav.solid .menuknopf{ background:var(--nc-200); color:var(--nc-500); }
[data-theme="dark"] .nav.solid .menuknopf{ background:rgba(235,240,243,.16); color:var(--nc-100); }
/* Offen: aus den drei Strichen wird ein Kreuz. */
.nav.offen .menuknopf .l1{ transform:translateY(4px) rotate(45deg); }
.nav.offen .menuknopf .l2{ opacity:0; }
.nav.offen .menuknopf .l3{ transform:translateY(-4px) rotate(-45deg); }

/* ── Dunkle Ansicht: Indigo durchgehend ──────────────────── */
:root[data-theme="dark"]{
  --paper:#0A1231;        /* Seitengrund */
  --panel:#152258;        /* Karten, Panels */
  --band-bg:#0E1740;      /* helles Band */
  --ink:var(--nc-100);
  --ink-2:#C6D3EE;
  --ink-3:#8195C4;
  --hair:rgba(235,240,243,.14);
}
[data-theme="dark"] h1,[data-theme="dark"] h2,
[data-theme="dark"] h3,[data-theme="dark"] h4{ color:var(--nc-100); }
[data-theme="dark"] .band{ background:var(--band-bg); }
[data-theme="dark"] .card{ background:var(--panel); box-shadow:0 0 0 1px var(--hair); }
[data-theme="dark"] .band .card{ box-shadow:0 0 0 1px var(--hair); }
[data-theme="dark"] .claim .body b{ color:var(--nc-100); }
[data-theme="dark"] .fact .v{ color:var(--nc-100); }
[data-theme="dark"] .t-dark{ box-shadow:inset 0 0 0 1px rgba(235,240,243,.12); }
[data-theme="dark"] .t-green{ background:#0E2C1E; color:var(--green-400); }
[data-theme="dark"] .t-green h3{ color:var(--green-400); }
[data-theme="dark"] .t-green p{ color:rgba(74,222,128,.82); }
[data-theme="dark"] .btn-ghost{ color:var(--nc-300); }
[data-theme="dark"] .btn-ghost:hover{ background:rgba(235,240,243,.12); }
[data-theme="dark"] .cta{ background:var(--nc-600); }
[data-theme="dark"] .way-a{ background:var(--panel); }
[data-theme="dark"] .notice{ background:var(--panel); }
[data-theme="dark"] .notice b{ color:var(--nc-100); }
[data-theme="dark"] .faq summary{ color:var(--nc-100); }
[data-theme="dark"] .faq summary:hover{ color:var(--nc-300); }
[data-theme="dark"] td:first-child{ color:var(--nc-100); }
[data-theme="dark"] .gate .box{ background:var(--panel); }
[data-theme="dark"] footer{ background:#060B20; }
[data-theme="dark"] .nav.solid{ background:rgba(10,18,49,.9); box-shadow:0 1px 0 var(--hair); }
[data-theme="dark"] .nav.solid .links a,
[data-theme="dark"] .nav.solid .links .drop,
[data-theme="dark"] .nav.solid a.brand{ color:var(--nc-100); }
[data-theme="dark"] .nav .sub{ background:var(--panel); box-shadow:0 16px 48px rgba(0,0,0,.5); }
[data-theme="dark"] .nav.solid .sub a{ color:var(--nc-100); }
[data-theme="dark"] .nav .sub a:hover{ background:rgba(235,240,243,.10); }
[data-theme="dark"] .nav.solid .themetoggle{ background:rgba(235,240,243,.16); color:var(--nc-100); }

@media (max-width:680px){
  .nav-in::after{ display:none; }
  .themetoggle{ min-width:0; padding:0 10px; }
  .themetoggle .lbl{ display:none; }
  .menuknopf{ display:inline-flex; margin-left:auto; }

  /* Die Verweise liegen als Feld unter der Leiste und klappen auf. */
  .nav .links{ position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:var(--s3) var(--s5) var(--s5);
    background:var(--paper); box-shadow:0 18px 40px rgba(21,26,55,.18);
    border-top:1px solid var(--hair);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s; }
  .nav.offen .links{ opacity:1; visibility:visible; transform:none; }
  .nav .links a{ color:var(--nc-500); font-size:22px; padding:14px 2px;
    border-bottom:1px solid var(--hair); display:block; }
  .nav .links li:last-child a{ border-bottom:0; }
  /* Solange das Feld offen steht, trägt auch die Leiste einen Grund. */
  .nav.offen{ background:var(--paper); box-shadow:0 1px 0 var(--hair); }
  .nav.offen .menuknopf,
  .nav.offen .themetoggle{ background:var(--nc-200); color:var(--nc-500); }
  .nav.offen a.brand{ display:block; width:92px; color:var(--nc-500); }
  [data-theme="dark"] .nav .links{ background:var(--panel); }
  [data-theme="dark"] .nav .links a{ color:var(--nc-100); }
  [data-theme="dark"] .nav.offen{ background:var(--panel); }
  [data-theme="dark"] .nav.offen a.brand{ color:var(--nc-100); }
  [data-theme="dark"] .nav.offen .menuknopf,
  [data-theme="dark"] .nav.offen .themetoggle{ background:rgba(235,240,243,.16); color:var(--nc-100); }
}

/* Bestätigung im Kontaktformular, wenn die Nachricht draußen ist. */
.form .danke{ background:var(--green-bg); border-radius:var(--r-s);
  padding:var(--s5) var(--s6); font-size:16.5px; line-height:1.6; color:#14532D; }
.form .danke b{ color:var(--green-700); }
[data-theme="dark"] .form .danke{ background:#0E2C1E; color:var(--green-400); }
[data-theme="dark"] .form .danke b{ color:var(--green-400); }

/* ── Rechtsseiten ────────────────────────────────────────────
   Langer Fließtext, der gelesen und nicht überflogen wird. */
.recht h1{ font-size:clamp(34px,5vw,54px); margin-bottom:var(--s7); }
.recht h2{ font-size:19px; margin:var(--s7) 0 var(--s3); }
.recht h2:first-of-type{ margin-top:0; }
.recht .body{ max-width:68ch; }
.recht .body + .body{ margin-top:var(--s4); }
.recht .liste{ max-width:68ch; margin:var(--s3) 0 0; padding-left:0; list-style:none; }
.recht .liste li{ position:relative; padding-left:22px; margin-bottom:10px;
  font-size:17px; line-height:1.65; color:var(--ink-2); }
.recht .liste li::before{ content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--nc-300); }

/* ── Team ────────────────────────────────────────────────────
   Die Porträts sind noch nicht fotografiert. Bis dahin steht an
   ihrer Stelle ein ruhiges Feld mit angedeuteter Silhouette. */
.team{ display:grid; gap:var(--s5) var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
@media (min-width:920px){ .team{ grid-template-columns:repeat(3,1fr); } }
.mitglied{ margin:0; }
.mitglied .portraet{ position:relative; aspect-ratio:1/1; border-radius:var(--r-s);
  background:var(--nc-100); display:grid; place-items:center; overflow:hidden; }
.mitglied .portraet svg{ width:40%; color:var(--nc-300); opacity:.22;
  transform:translateY(6%); }
.mitglied .portraet .platzhalter{ position:absolute; left:14px; bottom:12px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); }
.mitglied figcaption{ padding-top:var(--s4); }
.mitglied h4{ font-size:20px; margin-bottom:5px; }
.mitglied .rolle{ font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0; }
[data-theme="dark"] .mitglied .portraet{ background:var(--panel); }

/* ── Kontaktformular ─────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s8); align-items:start; }
.contact .body{ margin-top:var(--s4); max-width:44ch; }
.form{ display:grid; gap:var(--s4); }
.form label{ display:grid; gap:7px; font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.form .lb{ display:block; }
.form .opt{ font-weight:500; letter-spacing:.06em; text-transform:none; opacity:.8; }
.form input, .form textarea{
  font:inherit; font-size:16.5px; font-weight:500; letter-spacing:-.01em;
  color:var(--nc-500); background:var(--paper); border:0; border-radius:var(--r-s);
  padding:14px 16px; box-shadow:inset 0 0 0 1.5px var(--hair);
  transition:box-shadow .15s ease; width:100%; }
.form textarea{ resize:vertical; min-height:132px; line-height:1.55; }
.form input:focus, .form textarea:focus{ outline:0; box-shadow:inset 0 0 0 2px var(--nc-a); }
.form button{ justify-self:start; margin-top:var(--s2); }
.form .note{ font-size:14px; line-height:1.55; color:var(--ink-3); margin-top:var(--s2); }
[data-theme="dark"] .form input, [data-theme="dark"] .form textarea{
  background:var(--panel); color:var(--nc-100); }
[data-theme="dark"] .form input::placeholder, [data-theme="dark"] .form textarea::placeholder{ color:var(--ink-3); }
@media (max-width:960px){ .contact{ grid-template-columns:1fr; gap:var(--s6); } }

/* ── „Uromio bietet" ─────────────────────────────────────── */
.bietet{ padding-bottom:var(--s9); }
.bietet .eyebrow{ margin-bottom:var(--s4); }
.bietet ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5) var(--s6);
  border-top:1px solid var(--hair); padding-top:var(--s5); }
.bietet li{ display:grid; gap:12px; font-size:17px; line-height:1.4; font-weight:500;
  letter-spacing:-.01em; color:var(--nc-500); }
.bietet li::before{ content:""; width:22px; height:22px; border-radius:50%;
  box-shadow:inset 0 0 0 2.5px var(--nc-300); }
[data-theme="dark"] .bietet li{ color:var(--nc-100); }
@media (max-width:960px){ .bietet ul{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bietet ul{ grid-template-columns:1fr; } }

/* Einleitung unter der Sektionsüberschrift steht in Medium */
.sec-head .body{ font-weight:500; }

/* ── Bedienbarer Prototyp in der App-Sektion ─────────────── */
.proto{ --pw:430px; --ph:884px; --ps:.78;
  width:calc(var(--pw) * var(--ps)); height:calc(var(--ph) * var(--ps)); }
.proto-screen{ width:var(--pw); height:var(--ph);
  transform:scale(var(--ps)); transform-origin:0 0; }
.proto-screen iframe{ width:100%; height:100%; border:0; display:block; background:transparent;
  filter:drop-shadow(0 24px 52px rgba(0,0,0,.42)); }
.proto-theme{ display:inline-flex; gap:4px; margin-top:var(--s6); padding:4px;
  border-radius:999px; background:rgba(235,240,243,.14); }
.proto-theme button{ border:0; background:none; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:700; letter-spacing:-.01em; padding:9px 20px; border-radius:999px;
  color:rgba(235,240,243,.72); transition:background .18s ease, color .18s ease; }
.proto-theme button:hover{ color:var(--nc-100); }
.proto-theme button.on{ background:var(--nc-100); color:var(--nc-500); }
@media (max-width:960px){ .proto{ --ps:.7; } }
@media (max-width:420px){ .proto{ --ps:.58; } }

/* ── Zeitleiste auf „Über uns" ───────────────────────────── */
.timeline{ display:grid; gap:var(--s5); counter-reset:tl; max-width:900px; margin:0 auto; }
.timeline li{ display:grid; grid-template-columns:64px 1fr; gap:var(--s5);
  padding-top:var(--s5); border-top:1px solid var(--hair); }
.timeline .tl-n{ grid-column:1; grid-row:1; font-size:15px; font-weight:700; letter-spacing:.1em;
  color:var(--nc-300); font-variant-numeric:tabular-nums; padding-top:3px; }
.timeline h3, .timeline p{ grid-column:2; }
.timeline h3{ font-size:clamp(20px,2.2vw,26px); margin-bottom:var(--s3); }
.timeline p{ font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; }
[data-theme="dark"] .timeline p{ color:var(--ink-2); }
@media (max-width:680px){
  .timeline li{ grid-template-columns:1fr; gap:var(--s3); }
  .timeline .tl-n{ grid-column:1; }
  .timeline h3, .timeline p{ grid-column:1; }
}

/* ═══ Bausteine aus den Entwürfen ═════════════════════════ */
/* ── gemeinsame Kleinteile der Entwürfe ────────────────────── */
.v-wrap{ max-width:1120px; margin:0 auto; padding:0 var(--s5); }
.v-narrow{ max-width:760px; }
.v-dark{ background:#0F1738; color:rgba(221,230,248,.78); }
.v-dark h1,.v-dark h2,.v-dark h3{ color:var(--nc-100); }
.v-dark .eyebrow{ color:rgba(221,230,248,.5); }
.v-foot{ background:none; padding:var(--s7) 0 var(--s8); font-size:13.5px;
  letter-spacing:.02em; color:var(--ink-3); }
.v-dark .v-foot{ color:rgba(221,230,248,.55); }
.v-foot .v-mark{ color:currentColor; opacity:.75; }
.v-foot .vf-in{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); align-items:baseline;
  border-top:1px solid var(--hair); padding-top:var(--s5); }
.v-dark .v-foot .vf-in{ border-color:rgba(235,240,243,.16); }
.v-foot .sp{ margin-left:auto; opacity:.6; }
.v-mark{ width:132px; color:currentColor; }
.v-mark svg{ width:100%; height:auto; display:block; }

/* ── V1 · Kurvenband und Tagespunkte, aus dem Flyer ────────── */
.kurvenband{ width:100%; height:auto; display:block; margin-top:var(--s6); }
.motiv{ position:relative; height:min(46vh,420px); overflow:hidden; }
.motiv img{ width:100%; height:100%; object-fit:cover; object-position:54% 54%; }
.motiv .schleier{ position:absolute; inset:0;
  background:linear-gradient(180deg,#0F1738 0%, rgba(15,23,56,.28) 16%,
    rgba(15,23,56,.06) 46%, rgba(15,23,56,.72) 90%, #0F1738 100%); }
.tage{ display:flex; flex-direction:column; gap:10px; margin-top:var(--s4); }
.tage .zeile{ display:flex; align-items:center; gap:var(--s4); }
.tage .t{ width:56px; flex:0 0 auto; font-size:14px; font-weight:500; color:rgba(221,230,248,.6); }
.tage .punkte{ display:flex; align-items:center; gap:7px; }
.tage i{ width:10px; height:10px; border-radius:50%; display:block; }
.tage i.voll{ background:#5987D8; }
.tage i.leer{ box-shadow:inset 0 0 0 1.5px rgba(89,135,216,.6); }
.tage .z{ margin-left:auto; font-size:15px; font-weight:700; color:var(--nc-100);
  font-variant-numeric:tabular-nums; }
.werte{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s5);
  border-top:1px solid rgba(235,240,243,.16); margin-top:var(--s6); padding-top:var(--s5); }
.werte .k{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(221,230,248,.5); margin-bottom:6px; }
.werte .v{ display:block; font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.03em;
  color:var(--nc-100); }
.werte .v small{ font-size:.5em; font-weight:500; opacity:.7; margin-left:3px; }

/* ── V2 · Bericht zuerst ───────────────────────────────────── */
.bericht-buehne{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }
.bericht-buehne img{ width:100%; height:auto; }
@media (max-width:880px){ .bericht-buehne{ grid-template-columns:1fr; } }

/* ── V3 · Ein Satz pro Bild ────────────────────────────────── */
.satzbild{ position:relative; min-height:min(88vh,760px); display:grid;
  place-items:center; overflow:hidden; padding:0 var(--s5); }
.satzbild picture{ position:absolute; inset:0; display:block; }
.satzbild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.satzbild .ab{ position:absolute; inset:0; background:rgba(11,18,49,.42); }
.satzbild p{ position:relative; z-index:2; max-width:16ch; text-align:center;
  font-size:clamp(30px,5.4vw,64px); line-height:1.1; font-weight:700; letter-spacing:-.03em;
  color:#fff; text-wrap:balance; }
.satzbild .nr{ position:absolute; z-index:2; top:var(--s6); left:var(--s6);
  font-size:12px; font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.62); }

/* ── V4 · Ablauf als Strang ────────────────────────────────── */
.strang{ display:grid; gap:0; }
.strang .schritt{ display:grid; grid-template-columns:120px 1fr 1fr; gap:var(--s6);
  align-items:center; padding:var(--s7) 0; border-top:1px solid var(--hair); }
.strang .schritt:last-child{ border-bottom:1px solid var(--hair); }
.strang .gz{ font-size:clamp(44px,6vw,76px); font-weight:700; letter-spacing:-.05em;
  color:var(--nc-200); line-height:.9; }
.strang .bild{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--nc-500); }
.strang .bild img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:880px){
  .strang .schritt{ grid-template-columns:64px 1fr; }
  .strang .bild{ grid-column:1 / -1; }
}

/* ── V5 · Frage und Antwort ────────────────────────────────── */
.fragen{ display:grid; }
.fragen .fa{ display:grid; grid-template-columns:1fr 1.15fr; gap:var(--s6);
  padding:var(--s6) 0; border-bottom:1px solid var(--hair); align-items:baseline; }
.fragen .fa:first-child{ border-top:1px solid var(--hair); }
.fragen .q{ font-size:clamp(19px,2.2vw,25px); font-weight:700; letter-spacing:-.02em;
  color:var(--nc-500); text-wrap:balance; }
.fragen .a{ font-size:17px; line-height:1.6; color:var(--ink-2); }
@media (max-width:760px){ .fragen .fa{ grid-template-columns:1fr; gap:var(--s3); } }

/* ── V6 · Produktblatt ─────────────────────────────────────── */
.blatt{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s8); align-items:start; }
.blatt .bild{ border-radius:var(--r); overflow:hidden; background:var(--nc-600); }
.blatt .bild img{ width:100%; height:auto; display:block; }
.spec{ display:grid; }
.spec .zeile{ display:grid; grid-template-columns:1fr auto; gap:var(--s5);
  padding:13px 0; border-bottom:1px solid var(--hair); font-size:16px; }
.spec .zeile:first-child{ border-top:1px solid var(--hair); }
.spec .k{ color:var(--ink-3); }
.spec .v{ font-weight:700; color:var(--nc-500); text-align:right; }
@media (max-width:880px){ .blatt{ grid-template-columns:1fr; } }

/* ── V7 · App zuerst ───────────────────────────────────────── */
.appbuehne{ text-align:center; }
.appbuehne .kopf{ max-width:min(100%,780px); margin:0 auto; }
.appbuehne .proto{ margin:var(--s7) auto 0; }
.appbuehne .proto-theme{ background:var(--nc-200); }
.appbuehne .proto-theme button{ color:var(--nc-500); }
.appbuehne .proto-theme button:hover{ color:var(--nc-a); }
.appbuehne .proto-theme button.on{ background:var(--nc-a); color:#fff; }
.schirme{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); align-items:end; }
.schirme img{ width:100%; height:auto; display:block; }
.schirme figure:nth-child(2){ transform:translateY(-6%); }
.schirme figcaption{ margin-top:var(--s4); font-size:14.5px; line-height:1.5; }
.schirme b{ display:block; font-weight:700; color:var(--nc-500); margin-bottom:3px; }
.v-dark .schirme b{ color:var(--nc-100); }
@media (max-width:760px){ .schirme{ grid-template-columns:1fr; }
  .schirme figure:nth-child(2){ transform:none; } }

/* V2 · Schrittbilder quadratisch, Telefone auf hellem Grund */
.steps-quad .pic{ aspect-ratio:1/1; }
.steps-quad .pic img[src$=".png"]{ object-fit:contain; background:var(--paper); padding:var(--s4); }

/* Startseite: App-Bühne auf hellem Grund */
.sec:not(.band-dark) .proto-screen iframe{ filter:drop-shadow(0 24px 52px rgba(22,40,102,.22)); }
.satzbild + .sec{ padding-top:var(--s9); }

/* Bausteine der Entwürfe in der dunklen Ansicht */
[data-theme="dark"] .spec .v{ color:var(--nc-100); }
[data-theme="dark"] .spec .zeile{ border-color:var(--hair); }
[data-theme="dark"] .fragen .q{ color:var(--nc-100); }
[data-theme="dark"] .strang .gz{ color:rgba(89,135,216,.45); }
[data-theme="dark"] .satzbild .ab{ background:rgba(6,11,32,.48); }
[data-theme="dark"] .bietet li::before{ box-shadow:inset 0 0 0 2.5px var(--nc-300); }

/* ── Schriftzug wandert aus dem Hero in den Satzspiegel ───── */
/* Die Höhe des Platzes steht fest, damit beim Landen nichts springt.
   0.2129 ist das Seitenverhältnis der Wortmarke (37.6 / 176.6). */
.markslot{ position:relative; width:100%;
  height:calc(var(--mark-klein,260px) * 0.2129); margin-bottom:var(--s6); }
.markfly{ position:absolute; left:50%; top:0; width:var(--mark-klein,260px);
  transform:translateX(-50%); color:var(--nc-500); will-change:transform; }
.markfly svg{ width:100%; height:auto; display:block; }
.markfly.fest{ position:fixed; z-index:60; transform-origin:50% 50%; pointer-events:none; }
[data-theme="dark"] .markfly{ color:var(--nc-100); }
@media (max-width:680px){ .markslot,.markfly{ --mark-klein:180px; } }
@media (prefers-reduced-motion:reduce){
  .markfly.fest{ position:absolute; left:50%; top:0; transform:translateX(-50%); }
}