/* Nopebyte – gemeinsame Styles (Redesign v3, Spec docs/superpowers/specs/2026-09-29-redesign-v3-design.md): Schriften, Tokens, Basis, Buttons, Nav.
   Spec: docs/superpowers/specs/2026-09-28-redesign-v2-design.md */

@font-face{font-family:Onest;font-weight:400;font-display:swap;src:url(fonts/onest-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:500;font-display:swap;src:url(fonts/onest-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:600;font-display:swap;src:url(fonts/onest-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:700;font-display:swap;src:url(fonts/onest-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:800;font-display:swap;src:url(fonts/onest-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* ===== Tokens =====
   Seite hell (Standard). .on-page holt die Seiten-Werte innerhalb eines farbigen Blocks zurück (z. B. Handy-Bildschirm). */
:root,.on-page{
  /* Inhaltsbreite: z. B. 1440px, 90% oder min(1600px, 94%) */
  --page-w:1440px;
  --bg:#FFFFFF;--bg2:#F1F3FF;--card:#FFFFFF;--line:#DDE1F3;--line2:#C9CEEA;
  --ink:#101437;--muted:#535978;--dim:#646A8A;
  --v:#2B2FD9;--vl:#2B2FD9;--vx:#2024B8;--tint:#E9EAFF;
  /* Buttons (Farbe hier ändern, nicht an den Buttons) und Türkis-Akzent */
  --btn:#2B2FD9;--btn-h:#2024B8;--btn-ink:#FFFFFF;--acc:#5CF2E3;--acc-ink:#101437;--logo-n:#2B2FD9;
  --red:#C42538;--amber:#8A5200;--green:#147A4E;
  --red-t:#FDECEE;--amber-t:#FFF4E0;--green-t:#E7F5EE;
  --r-card:20px;--r-ctl:10px;--solid-red:#C42538;--solid-green:#147A4E;
  --f-display:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-text:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light}

/* Seite dunkel (Schalter bzw. Systemeinstellung) */
[data-theme="dark"],[data-theme="dark"] .on-page{
  --bg:#090C22;--bg2:#0F1330;--card:#141A3D;--line:#252D5C;--line2:#343D70;
  --ink:#EEF0FF;--muted:#A2A8CC;--dim:#8A91B8;
  --vl:#9DA8FF;--vx:#B7BFFF;--tint:#1A2150;
  --btn:#5CF2E3;--btn-h:#8AF7EC;--btn-ink:#101437;--logo-n:#5CF2E3;
  --red:#FF5566;--amber:#FFB547;--green:#4ADE80;
  --red-t:rgba(255,85,102,.12);--amber-t:rgba(255,181,71,.12);--green-t:rgba(74,222,128,.12);
  color-scheme:dark}
.on-page{color:var(--ink)}

/* Farbige Flächen, in beiden Modi:
   .on-brand = Indigo (Hero, Nav über dem Hero), .on-dark = Tinte (Footer, Hilfe-Karte, Mini-Screen).
   Beide teilen Weiß/Türkis-Werte; .on-dark überschreibt nur die Flächen. .on-page holt helle Werte zurück. */
.on-brand,[data-page="home"] .nav:not(.s):not(.open),.on-dark{
  --bg:#2B2FD9;--bg2:#3337E0;--card:#2024B8;--line:rgba(255,255,255,.22);--line2:rgba(255,255,255,.45);
  --ink:#FFFFFF;--muted:#D6D8FF;--dim:#C3C6F5;
  --vl:#5CF2E3;--vx:#8AF7EC;--tint:#3A3EE6;
  --btn:#5CF2E3;--btn-h:#8AF7EC;--btn-ink:#101437;--logo-n:#5CF2E3;
  --red:#FF5566;--amber:#FFB547;--green:#4ADE80;
  --red-t:rgba(255,85,102,.14);--amber-t:rgba(255,181,71,.14);--green-t:rgba(74,222,128,.14);
  color-scheme:dark}
.on-dark{--bg:#101437;--bg2:#161B45;--card:#1A2050;--tint:#1E2458;--muted:#B4B9DD;--dim:#9CA2CC}
[data-theme="dark"] .on-brand,[data-theme="dark"] [data-page="home"] .nav:not(.s):not(.open){--bg:#171B7A;--bg2:#1D2288;--tint:#23289A}
[data-theme="dark"] .on-dark{--bg:#06081A;--bg2:#0C0F28;--card:#111633}
.on-brand,.on-dark{background:var(--bg);color:var(--ink)}

/* ===== Basis ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--page-w);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0}
h1{font-weight:800;letter-spacing:-.035em}
.mono{font-family:var(--f-mono);letter-spacing:0}
:where(a,button,summary,textarea,input,[tabindex]):focus-visible{outline:2px solid var(--vl);outline-offset:3px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-ctl);border:1px solid transparent;font:600 15px/1 var(--f-text);cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{flex:none}
.btn-p{background:var(--btn);color:var(--btn-ink)}
.btn-p:hover{background:var(--btn-h)}
.btn-g{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-g:hover{border-color:var(--ink)}

/* ===== Nav =====
   Desktop: Logo | Links (Mitte) | Theme, DE/EN, Button. Logik (Menü, aktiver Abschnitt) in nav.js. */
.nav{position:fixed;inset:0 0 auto;z-index:50;color:var(--ink);border-bottom:1px solid transparent;transition:background-color .2s,border-color .2s}
.nav.s{background:var(--bg);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:68px}
.nav .logo{display:flex;align-items:center;min-height:44px}
.nav .logo svg{height:26px;width:auto;display:block}
.lg-n{fill:var(--logo-n)}.lg-b{fill:var(--ink)}
.nav-panel{flex:1;display:flex;align-items:center;gap:16px;min-width:0}
.nav .links{display:flex;margin:0 auto;gap:28px;font-size:14.5px;font-weight:500;color:var(--muted)}
.nav .links a{position:relative;padding:12px 0;transition:color .15s}
.nav .links a:hover,.nav .links a.on{color:var(--ink)}
.nav .links a.on::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--vl)}
.navr{display:flex;align-items:center;gap:2px}
.theme-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--r-ctl);background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.theme-btn:hover{color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .theme-btn .i-moon,[data-theme="light"] .theme-btn .i-sun{display:none}
html:not(.js) .theme-btn{display:none}
.nav-lang{display:flex;align-items:center;color:var(--dim);font-size:13px}
.nav-lang button{min-width:44px;height:44px;padding:0 4px;background:none;border:0;border-radius:8px;color:var(--muted);font:600 13px/1 var(--f-text);letter-spacing:.03em;cursor:pointer;transition:color .15s}
.nav-lang button:hover,.nav-lang button[aria-pressed="true"]{color:var(--ink)}
.nav .nav-cta{margin-left:6px;padding:0 16px;font-size:14px}
.nav-cta .sm{display:none}
.nav-toggle{display:none;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--r-ctl);background:transparent;border:1px solid var(--line2);color:var(--ink);cursor:pointer}
.nav-toggle .i-x,.nav.open .nav-toggle .i-menu{display:none}
.nav.open .nav-toggle .i-x{display:block}

/* Mittlere Breiten: fünf Links passen nur mit Kurzform des Buttons und engeren Abständen */
.nav .links a{white-space:nowrap}
@media (max-width:1180px){
  .nav .links{gap:18px}
  .nav-cta .lg{display:none}
  .nav-cta .sm{display:inline}
}

/* Mobil: Logo | Prüfen | Menü, Rest im aufklappbaren Panel */
@media (max-width:920px){
  .nav-toggle{display:grid}
  html:not(.js) .nav-toggle{display:none}
  .nav .nav-cta{margin-left:auto;padding:0 14px}
  .nav-cta .lg{display:none}
  .nav-cta .sm{display:inline}
  .nav .logo svg{height:22px}
  .nav-panel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 24px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
  .nav.open .nav-panel{display:flex}
  .nav.open{background:var(--bg);border-color:var(--line)}
  .nav .links{flex-direction:column;margin:0;gap:0;font-size:17px}
  .nav .links a{padding:14px 2px;border-bottom:1px solid var(--line)}
  .nav .links a.on{color:var(--vl)}
  .nav .links a.on::after{display:none}
  .navr{padding-top:14px;gap:8px}
  .theme-btn{border-color:var(--line)}
}

/* ===== Abschnitte, Überschriften, Karten mit Mini-Screen (Startseite und /unternehmen) ===== */
section{padding:112px 0}
.alt{background:var(--bg2)}
h2{font-size:clamp(36px,4.8vw,56px);max-width:680px}
.sub{color:var(--muted);max-width:560px;margin:20px 0 0;font-size:18px}
.sec-head{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end}
.sec-head .sub{margin:0 0 6px}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:border-color .2s}
.card:hover{border-color:var(--line2)}
.mini{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:200px;padding:28px 24px;background:var(--tint)}
.mini.on-dark{background:var(--bg)}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:10px;background:var(--card);font-size:13.5px}
.mrow .mono{font-size:13px}
.mrow b{font-weight:600;white-space:nowrap}
.st-bad{color:var(--red)}.st-warn{color:var(--amber)}.st-ok{color:var(--green)}
.fbody{padding:26px 28px 30px}
.fbody h3{margin-bottom:10px;font-size:22px}
.fbody p{margin:0;color:var(--muted);font-size:15.5px}
@media (max-width:920px){
  section{padding:80px 0}
  .sec-head{grid-template-columns:1fr;gap:0}
  .sec-head .sub{margin-top:18px}
}

/* ===== Rechtstexte (/impressum, /datenschutz): ruhige Textseite, Zeilen max. 70 Zeichen ===== */
.legal{padding:148px 0 96px}
.legal .wrap{max-width:calc(70ch + 48px)}
.legal h1{margin-bottom:28px;font-size:clamp(36px,5vw,52px)}
.legal h2{max-width:none;margin:36px 0 10px;font-size:22px;letter-spacing:-.015em}
.legal p,.legal li{max-width:70ch;color:var(--muted)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal a{color:var(--vl);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal strong{font-weight:600;color:var(--ink)}
.legal-note{margin:0 0 24px;padding:14px 18px;border-radius:14px;background:var(--tint);color:var(--ink)}
@media (max-width:920px){.legal{padding:112px 0 72px}}

/* ===== Button-Reihe, Vertrauenszeile ===== */
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
/* Trennpunkt vor jedem Eintrag; der 23px-Streifen links wird abgeschnitten, so steht nie ein Punkt am Zeilenanfang */
.tline{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;list-style:none;margin:0 0 0 -23px;padding:0;font-size:13px;color:var(--muted);clip-path:inset(0 0 0 23px)}
.tline li::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--dim);margin:0 10px;vertical-align:middle}

/* ===== Footer (.ft.on-dark): Logo + Slogan, Spalten Seite/Rechtliches/Kontakt, unten DE/EN + Copyright ===== */
.ft{padding:80px 0 0;font-size:15px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.ft-logo{display:inline-flex}
.ft-logo svg{display:block;width:auto;height:26px}
.ft-tag{margin:14px 0 0;font:700 26px/1.1 var(--f-display);letter-spacing:-.025em;color:var(--vl)}
.ft h4{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--ink)}
.ft ul{list-style:none;margin:0;padding:0}
.ft ul a{display:inline-block;padding:10px 0;line-height:24px;color:var(--muted);transition:color .15s}
.ft ul a:hover{color:var(--ink)}
.ft ul a.mono{font-size:14.5px}
.ft-soc{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;color:var(--dim)}
.ft-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 0 24px;font-size:13.5px;color:var(--dim)}
.ft-langs{display:flex;align-items:center;margin-left:-8px;font:400 13px/1 var(--f-mono)}
.ft-langs button{min-width:44px;height:44px;padding:0 8px;background:none;border:0;border-radius:8px;color:var(--muted);font:500 13px/1 var(--f-mono);cursor:pointer;transition:color .15s}
.ft-langs button:hover,.ft-langs button[aria-pressed="true"]{color:var(--ink)}
@media (max-width:860px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:28px 24px}
  .ft-brand{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}