/* ==========================================================================
   SiegelAI — Stylesheet
   Grundlage ist der bisherige Auftritt (Aufbau, Farben, Karten, Knöpfe).
   Je Seite gilt eine Akzentfarbe, gesetzt über body[data-seite]:
     start       Anthrazit   #2d2d3f   (Startseite und alle übrigen Seiten)
     system      Blau        #007AFF   (KI-System — die Grundlage)
     buero       Lila        #7c3aed   (Büro — Verträge, Normen, Vorgänge)
     fertigung   Orange      #d97706   (Fertigung — Zeichnung, Prüfplan, Qualität)
   Dazu die Bausteine der neuen Seiten: App-Fenster (app-fenster.css),
   Zeichnungs-Vorführung (pruefdemo.css), Preistafel, Tabellen, Rechner.
   ========================================================================== */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 400;font-display:swap;src:url(geist-300.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(geist-500.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(geist-600.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:700 800;font-display:swap;src:url(geist-700.woff2) format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(geist-mono-400.woff2) format('woff2');}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  --f:  'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs: var(--f);
  --fm: 'Geist Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --bg:     #ffffff;
  --bg2:    #f5f5f7;
  --bg3:    #e8e8ed;
  --dark:   #1d1d1f;
  --ink:    #1d1d1f;
  --txt:    #1d1d1f;
  --body:   #424245;
  --sub:    #6e6e73;
  --quiet:  #86868b;
  --line:   #d2d2d7;
  --line2:  #e3e3e8;

  /* --- Akzent der Seite (Startseite: Anthrazit) --- */
  --akzent:    #2d2d3f;
  --akzent2:   #1a1a2e;
  --akzent3:   #50506a;
  --akzent4:   #5c5c78;
  --afaint:    rgba(45,45,63,.05);
  --aline:     rgba(45,45,63,.18);
  --asoft:     rgba(45,45,63,.09);
  --aschatten: rgba(45,45,63,.25);
  --aschatten2:rgba(45,45,63,.35);
  --verlauf:       linear-gradient(180deg, var(--akzent3) 0%, var(--akzent) 100%);
  --verlauf-hover: linear-gradient(180deg, var(--akzent4) 0%, var(--akzent2) 100%);

  /* Altnamen aus dem bisherigen Auftritt */
  --green:  var(--akzent);
  --green2: var(--akzent2);
  --green3: var(--akzent);
  --gfaint: var(--afaint);
  --gline:  var(--aline);
  --soft:   var(--asoft);
  --blue:   #007AFF;
  --bfaint: #eff6ff;
  --tief:   var(--akzent);
  --tief2:  var(--akzent2);

  /* --- Bereichsfarben (Karten auf der Startseite, Verweise) --- */
  --blau:   #007AFF; --blau2:   #0062cc; --blau3:   #4da6ff;
  --orange: #d97706; --orange2: #b45309; --orange3: #f59e0b;
  --lila:   #7c3aed; --lila2:   #6d28d9; --lila3:   #a78bfa;

  /* --- Zustandsfarben, auf allen Seiten gleich --- */
  --belegt:      #2a7d45;
  --belegt-bg:   rgba(52,199,89,.07);
  --belegt-line: rgba(52,199,89,.20);
  --fund:        #b45309;
  --fund-bg:     #fff2cc;
  --fund-line:   rgba(180,83,9,.22);
  --nein:        #dc2626;
  --nein-bg:     #fee2e2;
  --haus:        #6d28d9;
  --haus-bg:     rgba(109,40,217,.07);
  --haus-line:   rgba(109,40,217,.20);
  --ok:          var(--belegt);
  --ok-bg:       var(--belegt-bg);
  --warn:        var(--nein);
  --warn-bg:     var(--nein-bg);

  --nav-h:  60px;
  --inner:  1040px;
  --breit:  1240px;
  --lese:   680px;
}

body[data-seite="system"]{
  --akzent:#007AFF; --akzent2:#0062cc; --akzent3:#4da6ff; --akzent4:#3d99ff;
  --afaint:rgba(0,122,255,.05); --aline:rgba(0,122,255,.16); --asoft:rgba(0,122,255,.09);
  --aschatten:rgba(0,122,255,.22); --aschatten2:rgba(0,122,255,.32);
  --verlauf:linear-gradient(180deg,var(--akzent3) 0%,var(--akzent) 100%);
  --verlauf-hover:linear-gradient(180deg,var(--akzent4) 0%,var(--akzent2) 100%);
}
body[data-seite="fertigung"]{
  --akzent:#d97706; --akzent2:#b45309; --akzent3:#f59e0b; --akzent4:#ea9109;
  --afaint:rgba(217,119,6,.05); --aline:rgba(217,119,6,.16); --asoft:rgba(217,119,6,.09);
  --aschatten:rgba(217,119,6,.22); --aschatten2:rgba(217,119,6,.32);
  --verlauf:linear-gradient(180deg,var(--akzent3) 0%,var(--akzent) 100%);
  --verlauf-hover:linear-gradient(180deg,var(--akzent4) 0%,var(--akzent2) 100%);
}
body[data-seite="buero"]{
  --akzent:#7c3aed; --akzent2:#6d28d9; --akzent3:#a78bfa; --akzent4:#8b5cf6;
  --afaint:rgba(124,58,237,.05); --aline:rgba(124,58,237,.16); --asoft:rgba(124,58,237,.09);
  --aschatten:rgba(124,58,237,.22); --aschatten2:rgba(124,58,237,.32);
  --verlauf:linear-gradient(180deg,var(--akzent3) 0%,var(--akzent) 100%);
  --verlauf-hover:linear-gradient(180deg,var(--akzent4) 0%,var(--akzent2) 100%);
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px);}
body{background:var(--bg);color:var(--ink);font-family:var(--f);overflow-x:hidden;line-height:1.5;-webkit-tap-highlight-color:transparent;font-feature-settings:'kern' 1,'liga' 1;}
img{max-width:100%;height:auto;}
a{color:inherit;}

::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--quiet);}

/* ─── NAV ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 6vw;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:background .4s,border-color .4s,box-shadow .4s;
}
nav.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(0,0,0,.1);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0;}
.nav-logo-img{width:36px;height:36px;flex-shrink:0;border-radius:8px;}
.nav-name{font-size:19px;font-weight:600;letter-spacing:-.3px;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:14px;font-weight:400;color:var(--sub);text-decoration:none;transition:color .3s;white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}
/* Beim Überfahren nimmt jeder Bereichspunkt seine eigene Farbe an: das KI-System
   blau, die Büroumgebung lila, die Fertigung orange. Das hilft beim Zurechtfinden,
   ohne dass sich am Menü sonst etwas ändert. */
.nav-links a[href$="system.html"]:hover{color:var(--blau);}
.nav-links a[href$="buero.html"]:hover{color:var(--lila);}
.nav-links a[href$="fertigung.html"]:hover{color:var(--orange);}
.nav-links a.active{color:var(--akzent);font-weight:600;}
.nav-cta{
  padding:9px 20px;background:var(--verlauf);color:#fff;
  border:none;border-radius:100px;font-family:var(--f);
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s, transform .15s, box-shadow .3s;
  box-shadow:0 2px 12px var(--aschatten);
}
.nav-cta:hover{background:var(--verlauf-hover);transform:translateY(-1px);box-shadow:0 4px 16px var(--aschatten2);}
.nav-badge{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-size:11px;letter-spacing:.3px;color:var(--akzent);background:var(--afaint);border:1px solid var(--aline);border-radius:100px;padding:4px 12px;white-space:nowrap;transition:all .4s;}
.nav-badge::before{content:'\2713';font-weight:700;font-size:9px;}

/* ─── HAMBURGER + MOBILES MENÜ ─── */
/* Drei Striche. Beim Öffnen rücken der obere und untere genau zur Mitte
   (7 px = Strich + Abstand) und drehen sich dort zum Kreuz. */
.hamburger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px;transition:transform .3s ease,opacity .3s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobiles Menü: zentrierte Liste, beginnt direkt unter der Kopfleiste. */
.mobile-menu{display:none;position:fixed;inset:0;z-index:199;background:var(--bg);flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 24px) 0 max(24px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:20px;font-weight:500;color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);width:70%;text-align:center;transition:color .2s;-webkit-tap-highlight-color:transparent;}
.mobile-menu a:last-of-type{border-bottom:none;}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--akzent);}
.mobile-menu a[href$="system.html"]:hover{color:var(--blau);}
.mobile-menu a[href$="buero.html"]:hover{color:var(--lila);}
.mobile-menu a[href$="fertigung.html"]:hover{color:var(--orange);}
.mobile-menu .mm-cta{margin-top:32px;padding:14px 40px;background:var(--verlauf);color:#fff;border-radius:100px;font-size:15px;font-weight:600;text-decoration:none;border-bottom:none;width:auto;box-shadow:0 2px 12px var(--aschatten);}
/* Bei offenem Menü steht die Kopfleiste deckend vor dem Menü. */
body.menu-offen>nav{background:var(--bg);}

/* ─── ABSCHNITTE ─── */
section{padding:120px 6vw;position:relative;}
section.tinted,section.getoent{background:var(--bg2);}
section.linie{border-top:1px solid var(--line);}
section.getoent + section.getoent,section.tinted + section.tinted{padding-top:56px;}
.inner,.wrap{max-width:var(--inner);margin:0 auto;}
.inner.weit,.wrap.weit{max-width:var(--breit);}
.kopf{max-width:760px;margin-bottom:48px;}
.kopf .lead{margin-top:18px;}

/* ─── SCHRIFT ─── */
.eyebrow{
  font-family:var(--f);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;
  color:var(--akzent);margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.eyebrow.green{color:var(--akzent);}
.eyebrow.grau{color:var(--sub);}
h1{
  font-family:var(--f);font-size:clamp(40px,5vw,72px);
  font-weight:700;letter-spacing:-.02em;line-height:1.08;margin-bottom:24px;color:var(--ink);text-wrap:balance;
}
h1 em{font-style:normal;font-weight:700;color:var(--akzent);}
h2{
  font-family:var(--f);font-size:clamp(32px,3.8vw,56px);
  font-weight:700;letter-spacing:-.02em;line-height:1.08;margin-bottom:16px;color:var(--ink);text-wrap:balance;
}
h2 em{font-style:normal;font-weight:700;color:var(--akzent);}
h2.klein-h2{font-size:clamp(24px,3vw,36px);}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ink);margin-bottom:10px;}
h3 em{font-style:normal;color:var(--akzent);}
h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;}
p{color:var(--body);}
strong{font-weight:600;color:var(--ink);}
.lead{font-size:19px;color:var(--sub);line-height:1.6;max-width:600px;font-weight:400;}
.klein{font-size:13.5px;line-height:1.6;color:var(--sub);}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;}
.mitte{text-align:center;}
.mitte .lead,.mitte .eyebrow{margin-left:auto;margin-right:auto;justify-content:center;}
.karte p + p,.inhalt p + p,.recht-text p + p,.notiz p + p,.faq-body p + p,.textblock p + p,.zwei > div > p + p,.zwei-schmal > div > p + p,.er-kasten p + p{margin-top:1em;}
ul.liste{padding-left:20px;color:var(--body);font-size:15px;line-height:1.75;}
ul.liste li + li{margin-top:4px;}

/* Erster Abschnitt einer Seite ohne #hero: Abstand unter der festen Leiste */
body > section:first-of-type,main > section:first-child,section#oben,section#danke{padding-top:calc(var(--nav-h) + 72px);}

/* ─── HERO ─── */
#hero{
  padding-top:calc(var(--nav-h) + 80px);padding-bottom:120px;
  background:#fbfbfd;
  position:relative;overflow:hidden;
}
#hero .lead{color:var(--sub);font-size:19px;line-height:1.6;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:3;}
.hero-grid.hero-breit{grid-template-columns:1fr 1.25fr;gap:48px;}
.hero-grid > *{min-width:0;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 16px;
  background:var(--afaint);border:1px solid var(--aline);border-radius:100px;
  font-size:11px;font-weight:600;color:var(--akzent);margin-bottom:28px;
  font-family:var(--fm);letter-spacing:.5px;text-transform:uppercase;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--akzent);animation:pulse 2s infinite;flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 var(--aschatten)}50%{opacity:.6;transform:scale(.7);box-shadow:0 0 0 6px rgba(0,0,0,0)}}
.hero-knoepfe{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.mitte .hero-knoepfe{justify-content:center;}
.hero-kennzahlen,.hero-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:560px;margin:48px auto 0;}
.hero-stats-row{margin:16px 0 0;gap:12px;}
.hero-stat-card{
  background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px 14px;text-align:center;
  transition:border-color .3s,box-shadow .3s;
}
.hero-stat-card:hover{border-color:var(--aline);box-shadow:0 2px 12px rgba(0,0,0,.06);}
.hero-stat-num{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink);line-height:1.1;}
.hero-stat-num.blau{color:var(--blau);}
.hero-stat-num.orange{color:var(--orange);}
.hero-stat-num.lila{color:var(--lila);}
.hero-stat-num.green{color:var(--akzent);}
.hero-stat-label{font-size:10.5px;color:var(--quiet);margin-top:5px;line-height:1.3;font-family:var(--fm);}
.hero-stat-label.oben{margin:0 0 2px;}
/* Büroseite: in den drei Karten stehen Begriffe statt Zahlen. Die sind
   länger, also mehr Breite, kleinere Schrift und Trennung erlaubt. */
.hero-bausteine{max-width:760px;}
.hero-bausteine .hero-stat-num{font-size:18px;hyphens:auto;overflow-wrap:break-word;}
.hero-bausteine .hero-stat-label{margin-top:4px;}

/* ─── TRUST-LEISTE ─── */
.trust-strip{background:#fff;border-bottom:1px solid rgba(0,0,0,.06);padding:28px 6vw;}
.trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;}
.trust-badge{display:flex;align-items:center;gap:8px;}
.trust-icon{font-size:16px;color:var(--akzent);flex-shrink:0;font-weight:700;}
.trust-text{font-size:13px;color:var(--sub);}
.trust-text strong{color:var(--ink);font-weight:600;}

/* ─── AUSGANGSLAGE (Problem) ─── */
.pill-eyebrow{display:inline-block;padding:6px 16px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:100px;font-family:var(--fm);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:20px;}
.problem-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:36px;max-width:900px;margin-left:auto;margin-right:auto;}
.problem-card{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:24px 20px;text-align:center;}
.problem-card .pc-ico{font-size:28px;margin-bottom:10px;}
.problem-card .pc-t{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.problem-card .pc-x{font-size:13px;color:var(--sub);line-height:1.6;}

/* ─── VERGLEICH ZWEISPALTIG (Cloud / lokal) ─── */
.compare{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:48px;border-radius:18px;overflow:hidden;border:none;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.compare-col{padding:36px 40px;background:#fff;transition:transform .3s,box-shadow .3s;}
.compare-col.bad{border-right:1px solid var(--line);}
.compare-col:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.06);}
.compare-head{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--quiet);margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.compare-head.green{color:var(--akzent);}
.compare-row{display:flex;gap:11px;margin-bottom:13px;font-size:14px;color:var(--body);line-height:1.65;}
.compare-row:last-child{margin-bottom:0;}
.cr-ic{flex-shrink:0;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;margin-top:3px;}
.cr-ic.bad{background:#fee2e2;color:#dc2626;}
.cr-ic.good{background:var(--afaint);color:var(--akzent);}

.scenarios{margin-top:56px;}
.scen{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);}
.scen:last-child{border-bottom:none;}
.scen-ico{width:38px;height:38px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.scen-body{font-size:14px;color:var(--body);line-height:1.72;}
.scen-body strong{color:var(--ink);font-weight:700;}

/* ─── ANWENDUNGSFÄLLE (Reiter) ─── */
.uc-tabs,.opt-tabs{
  display:flex;gap:2px;background:var(--line);border-radius:11px;
  padding:3px;width:fit-content;margin:40px 0 24px;
}
.uctab,.otab{
  padding:9px 24px;border-radius:9px;border:none;background:transparent;min-height:44px;
  font-family:var(--f);font-size:13px;font-weight:600;color:var(--sub);cursor:pointer;transition:all .2s;
}
.uctab.on,.otab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1);}
.uc-grid{display:none;grid-template-columns:1fr 1fr;gap:10px;}
.uc-grid.show{display:grid;}
.ucc{padding:26px 28px;border-radius:16px;background:#fff;border:none;box-shadow:0 2px 12px rgba(0,0,0,.08);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
.ucc:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.06);}
.uc-task{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--quiet);margin-bottom:10px;}
.uc-q{font-size:13.5px;color:var(--body);font-style:italic;line-height:1.65;border-left:2px solid var(--aline);padding-left:11px;margin-bottom:0;}
.uc-q-wrap{flex:1;display:flex;align-items:flex-start;margin-bottom:16px;}
.uc-good{font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--akzent);line-height:1;margin-top:auto;padding-top:8px;}
.uc-benefit{font-size:14px;color:var(--ink);margin-top:12px;line-height:1.4;font-weight:500;}
.uc-quelle{font-family:var(--fm);font-size:11px;color:var(--akzent);margin-top:10px;display:flex;align-items:center;gap:6px;}
.uc-quelle::before{content:'';width:11px;height:11px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5'%3E%3Cpath d='M4 19.5A2.5 2.5 0 016.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z'/%3E%3C/svg%3E") no-repeat center/contain;}

/* ─── FUNKTIONEN ─── */
.func-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.func-card{
  background:#fff;border-radius:20px;padding:32px 28px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid var(--line);
  transition:all .3s ease;
}
.func-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.1);}
.func-card h3{font-size:18px;font-weight:700;margin:16px 0 12px;color:var(--ink);}
.func-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;background:linear-gradient(135deg,var(--akzent3),var(--akzent));
}
.func-cmds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.func-cmd{
  display:inline-block;padding:4px 10px;border-radius:6px;
  background:var(--asoft);font-family:var(--fm);font-size:11px;font-weight:600;
  color:var(--ink);letter-spacing:0.3px;
}
.func-desc{font-size:13.5px;line-height:1.7;color:var(--sub);margin:0;}
.func-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.func-hl{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border-radius:16px;padding:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid var(--line);
}
.func-hl h4{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.func-hl p{font-size:13px;line-height:1.65;color:var(--sub);margin:0;}
.func-hl-icon{font-size:26px;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--afaint);border-radius:12px;}

/* ─── ROI / RECHNER (alt) ─── */
.roi-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;margin-top:48px;align-items:start;}
.roi-result{position:sticky;top:calc(var(--nav-h) + 20px);background:#fff;border:none;border-radius:20px;padding:36px 40px;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.roi-big{font-family:var(--f);font-size:clamp(48px,5vw,72px);font-weight:700;color:var(--akzent);line-height:1;}
.roi-lbl{font-family:var(--fm);font-size:10px;color:var(--quiet);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;}
.roi-rows{margin-top:24px;border-top:1px solid var(--line);}
.roi-r{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.roi-r:last-child{border-bottom:none;}
.roi-r .k{font-size:13px;color:var(--sub);}
.roi-r .v{font-family:var(--fm);font-size:13px;font-weight:500;}
.roi-r .v.green{color:var(--akzent);}
.roi-r .v.amber{color:#92400e;}
.roi-note{margin-top:18px;padding:14px 17px;background:var(--bg2);border-radius:10px;font-size:12px;color:var(--sub);line-height:1.7;}
.roi-note strong{color:var(--ink);}
.roi-note a{color:var(--akzent);font-weight:600;text-decoration:none;}
.sliders{display:flex;flex-direction:column;gap:26px;}
.sl-head{display:flex;justify-content:space-between;margin-bottom:9px;}
.sl-lbl{font-size:14px;color:var(--body);}
.sl-val{font-family:var(--fm);font-size:13px;font-weight:600;color:var(--akzent);}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--line2);border-radius:2px;outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;border:2px solid var(--akzent);box-shadow:0 2px 6px rgba(0,0,0,.12);}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:2px solid var(--akzent);box-shadow:0 2px 6px rgba(0,0,0,.12);}
.sl-ends{display:flex;justify-content:space-between;margin-top:4px;}
.sl-ends span{font-family:var(--fm);font-size:10px;color:var(--quiet);}

/* ─── SICHERHEIT (Schutzschichten) ─── */
.dark-layers{margin-top:48px;}
.dl{display:flex;gap:28px;padding:26px 0;border-bottom:1px solid var(--line);}
.dl:last-child{border-bottom:none;}
.dl-n{font-family:var(--fm);font-size:11px;color:var(--akzent);padding-top:3px;width:26px;flex-shrink:0;font-weight:700;}
.dl-body h3{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.dl-body p{font-size:14px;color:var(--sub);line-height:1.7;}
.dl-tech{margin-top:7px;font-family:var(--fm);font-size:11px;color:var(--akzent);}
.dark-verdict{margin-top:32px;padding:22px 28px;background:var(--afaint);border-radius:16px;border-left:3px solid var(--akzent);}
.dark-verdict p{font-size:14px;color:var(--sub);line-height:1.8;}
.dark-verdict strong{color:var(--ink);}

/* ─── FAQ ─── */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:16px;overflow:hidden;margin-top:40px;}
.faq-grid > div,.faq-cell{padding:24px 26px;background:#fff;}
.faq-q{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.faq-a{font-size:13.5px;color:var(--sub);line-height:1.7;}
.faq-liste{margin-top:40px;}
details.faq-item{border:1px solid rgba(0,0,0,.05);border-radius:16px;margin-bottom:12px;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);}
details.faq-item summary{padding:18px 24px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::after{content:'+';font-size:22px;line-height:1;color:var(--sub);transition:transform .2s;flex:none;}
details.faq-item[open] summary::after{transform:rotate(45deg);}
details.faq-item .faq-body,details.faq-item .inhalt{padding:0 24px 20px;font-size:14px;color:var(--sub);line-height:1.7;}
details.faq-item .faq-body strong,details.faq-item .inhalt strong{color:var(--ink);}
details.faq-item .faq-body p,details.faq-item .inhalt p{color:var(--sub);}

/* ─── OPTIONEN (alt) ─── */
.opt-pane{display:none;}
.opt-pane.show{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}
.opt-main{padding:36px 40px;border-radius:20px;border:none;box-shadow:0 2px 12px rgba(0,0,0,.08);background:#fff;}
.opt-main.opt-green{background:var(--afaint);}
.opt-tag{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:7px;color:var(--akzent);}
.opt-desc{font-size:14px;color:var(--sub);margin-bottom:24px;}
.opt-li{display:flex;gap:10px;font-size:14px;color:var(--body);line-height:1.65;margin-bottom:11px;}
.opt-for{margin-top:22px;padding:13px 17px;background:rgba(0,0,0,.04);border-radius:10px;font-size:13px;color:var(--body);line-height:1.6;}
.opt-side{display:flex;flex-direction:column;gap:10px;}
.os{padding:20px 22px;border-radius:16px;background:#fff;border:none;box-shadow:0 2px 12px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s;}
.os:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.06);}
.os-lbl{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--quiet);margin-bottom:5px;}
.os-big{font-size:26px;font-weight:800;letter-spacing:-1px;margin-top:3px;}
.os-sub{font-size:11px;color:var(--quiet);margin-top:2px;}
.os-text{font-size:13px;line-height:1.8;margin-top:5px;}
.os-text.green{color:var(--akzent);font-weight:600;}

/* ─── KNÖPFE ─── */
.btn-pri,.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  padding:15px 28px;background:var(--verlauf);color:#fff;
  border-radius:100px;font-family:var(--f);font-size:14px;font-weight:600;
  text-decoration:none;transition:background .2s, transform .15s, box-shadow .3s;border:none;cursor:pointer;
  box-shadow:0 2px 12px var(--aschatten);
}
.btn-pri:hover,.knopf:hover{background:var(--verlauf-hover);transform:translateY(-1px);box-shadow:0 4px 16px var(--aschatten2);}
.btn-sec,.knopf.leer{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:13px 24px;
  background:#fff;color:var(--ink);border-radius:100px;
  font-family:var(--f);font-size:14px;font-weight:600;
  text-decoration:none;transition:all .2s;box-shadow:none;
  border:1px solid var(--line);cursor:pointer;
}
.btn-sec:hover,.knopf.leer:hover{border-color:var(--ink);background:var(--bg2);transform:none;box-shadow:none;}
.btn-akzent{background:transparent;color:var(--akzent);border:1.5px solid var(--aline);}
.btn-akzent:hover{background:var(--afaint);border-color:var(--akzent);}
.btn-gross{padding:16px 36px;font-size:15px;}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.btn-blau{background:linear-gradient(180deg,var(--blau3),var(--blau));box-shadow:0 2px 10px rgba(0,122,255,.2);}
.btn-blau:hover{background:linear-gradient(180deg,#3d99ff,var(--blau2));box-shadow:0 4px 16px rgba(0,122,255,.3);}
.btn-orange{background:linear-gradient(180deg,var(--orange3),var(--orange));box-shadow:0 2px 10px rgba(217,119,6,.2);}
.btn-orange:hover{background:linear-gradient(180deg,var(--orange),var(--orange2));box-shadow:0 4px 16px rgba(217,119,6,.3);}
.btn-lila{background:linear-gradient(180deg,var(--lila3),var(--lila));box-shadow:0 2px 10px rgba(124,58,237,.2);}
.btn-lila:hover{background:linear-gradient(180deg,#8b5cf6,var(--lila2));box-shadow:0 4px 16px rgba(124,58,237,.3);}
.weiter-link{color:var(--akzent);font-weight:600;text-decoration:none;}
.weiter-link:hover{text-decoration:underline;}

/* ─── CTA / KONTAKT ─── */
#cta{background:#fff;}
#cta.tinted{background:var(--bg2);}
.cta-dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0;}
.cta-box{background:var(--afaint);border:1px solid var(--aline);border-radius:16px;padding:28px 32px;}
.cta-box.neutral{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08);}
.cta-box .cb-eyebrow{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--akzent);margin-bottom:10px;}
.cta-box.neutral .cb-eyebrow{color:var(--ink);}
.cta-box .cb-t{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.cta-box .cb-x{font-size:13.5px;color:var(--sub);line-height:1.65;margin-bottom:16px;}
.cta-box .cb-list{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--body);}
.cta-box .cb-list span{color:var(--akzent);font-weight:600;}
.cta-steps{display:flex;margin:44px 0 40px;border:none;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.cta-step{flex:1;padding:18px 14px;text-align:center;border-right:1px solid var(--line);background:#fff;transition:background .3s;}
.cta-step:last-child{border-right:none;background:var(--afaint);}
.cs-n{font-family:var(--fm);font-size:10px;color:var(--sub);margin-bottom:5px;}
.cs-t{font-size:12px;font-weight:700;color:var(--ink);}
.cta-step:last-child .cs-t{color:var(--akzent);}
.contact-card{
  background:#fff;border:none;border-radius:20px;
  padding:40px;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.ct-name{font-family:var(--f);font-size:28px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.ct-rolle{font-family:var(--fm);font-size:11px;color:var(--quiet);letter-spacing:.5px;margin-bottom:10px;}
.ct-info{font-size:14px;color:var(--sub);line-height:2.1;}
.ct-info a{color:var(--akzent);text-decoration:none;font-weight:600;}
.ct-info a:hover{color:var(--akzent2);}
.ct-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px;}
.ctag{padding:5px 12px;border-radius:100px;font-size:11px;font-weight:600;color:var(--sub);background:var(--bg2);border:none;}
.ctag.green{color:var(--akzent);background:var(--afaint);}
.ct-actions{display:flex;flex-direction:column;gap:9px;min-width:195px;}
.ct-actions .btn-pri,.ct-actions .btn-sec{display:flex;}
.so-box{margin-top:48px;padding:24px 28px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;}
.so-box .so-eyebrow{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--quiet);margin-bottom:14px;}
.cta-schritte-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
.cta-schritte-grid .st-t{font-size:15px;font-weight:600;color:var(--ink);}
.cta-schritte-grid .st-x{font-size:13px;color:var(--quiet);margin-top:4px;line-height:1.6;}
.so-box .so-fuss{font-size:12.5px;color:var(--sub);padding-top:16px;border-top:1px solid var(--line);}
.foerder-note{margin-top:18px;padding:15px 20px;background:var(--afaint);border-left:2px solid var(--akzent);border-radius:0 10px 10px 0;font-size:13px;color:var(--body);line-height:1.7;}
.foerder-note strong{color:var(--akzent);}

/* ─── KONTAKTFORMULAR ─── */
.form-kopf{margin-top:32px;}
.form-kopf h3{font-size:24px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.form-kopf p{font-size:13px;color:var(--quiet);margin-bottom:20px;}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;}
.contact-form .full{grid-column:1/-1;}
.cf-input,.cf-select,.cf-textarea{width:100%;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:var(--f);font-size:14px;transition:border-color .2s;outline:none;}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--quiet);}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{border-color:var(--akzent);}
.cf-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239e9e95' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;}
.cf-select option{background:#fff;color:var(--ink);}
.cf-textarea{resize:vertical;min-height:90px;}
.cf-submit{padding:14px 32px;background:var(--verlauf);color:#fff;border:none;border-radius:100px;font-family:var(--f);font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,transform .15s,box-shadow .3s;box-shadow:0 2px 12px var(--aschatten);}
.cf-submit:hover{background:var(--verlauf-hover);transform:translateY(-1px);box-shadow:0 4px 16px var(--aschatten2);}
.cf-zeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.cf-hinweis{font-size:11.5px;color:var(--quiet);flex:1;min-width:180px;line-height:1.5;}
.cf-hinweis a{color:var(--quiet);text-decoration:underline;}
.fm-falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
@media(max-width:860px){.cf-input,.cf-select,.cf-textarea{font-size:16px;}}

/* ─── LÖSUNGEN (drei Karten: Büro, Produktion, weitere Möglichkeiten) ─── */
.loesungen-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:48px;}
.loesung-card{
  text-decoration:none;color:inherit;
  --k1:var(--akzent);--k2:var(--akzent2);--k3:var(--akzent3);--kf:var(--afaint);--kl:var(--aline);--ks:var(--aschatten);
  cursor:pointer;background:#fff;border-radius:20px;padding:36px 30px;
  box-shadow:0 2px 16px rgba(0,0,0,.08);border:1.5px solid var(--kl);
  position:relative;overflow:hidden;transition:all .3s;display:flex;flex-direction:column;
}
.loesung-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--k3),var(--k1));}
.loesung-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.12);}
.lc-blau{--k1:#007AFF;--k2:#0062cc;--k3:#4da6ff;--kf:rgba(0,122,255,.06);--kl:rgba(0,122,255,.15);--ks:rgba(0,122,255,.2);}
.lc-orange{--k1:#d97706;--k2:#b45309;--k3:#f59e0b;--kf:rgba(245,158,11,.06);--kl:rgba(245,158,11,.2);--ks:rgba(217,119,6,.2);}
.lc-lila{--k1:#7c3aed;--k2:#6d28d9;--k3:#a78bfa;--kf:rgba(124,58,237,.06);--kl:rgba(124,58,237,.18);--ks:rgba(124,58,237,.2);}
.lc-anthrazit{--k1:#2d2d3f;--k2:#1a1a2e;--k3:#50506a;--kf:rgba(45,45,63,.05);--kl:rgba(45,45,63,.18);--ks:rgba(45,45,63,.2);}
.lc-chip{display:inline-block;align-self:flex-start;padding:4px 12px;background:var(--kf);border:1px solid var(--kl);border-radius:100px;font-family:var(--fm);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--k1);font-weight:700;margin-bottom:20px;}
.lc-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.lc-icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--k3),var(--k1));display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;flex-shrink:0;}
.lc-icon svg{width:23px;height:23px;}
.lc-eyebrow{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--k1);}
.lc-title{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.6px;line-height:1.25;}
.lc-text{font-size:14px;color:var(--sub);line-height:1.7;margin-bottom:20px;}
.lc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.lc-list div{display:flex;gap:10px;font-size:13px;color:var(--body);line-height:1.5;}
.lc-list div::before{content:'\2713';color:var(--k1);font-weight:700;flex-shrink:0;}
.lc-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:auto;align-self:stretch;}
.lc-btn{flex:1;text-align:center;white-space:nowrap;padding:12px 20px;font-size:14px;border-radius:100px;font-weight:600;color:#fff;background:linear-gradient(180deg,var(--k3),var(--k1));text-decoration:none;transition:all .3s;box-shadow:0 2px 10px var(--ks);display:inline-block;}
.lc-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--ks);}
.lc-link{font-size:13.5px;font-weight:600;color:var(--k1);text-decoration:none;}
.lc-link:hover{text-decoration:underline;}
.info-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:100px;font-size:13px;color:var(--ink);font-weight:600;}

/* ─── PROZESS (Schritte) ─── */
.prozess-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
.prozess-cards.drei{grid-template-columns:repeat(3,1fr);}
.prozess-card{background:#fff;border-radius:16px;padding:26px 24px;box-shadow:0 2px 12px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s;}
.prozess-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.pz-n{width:36px;height:36px;border-radius:10px;background:var(--afaint);color:var(--akzent);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;margin-bottom:16px;font-family:var(--fm);}
.pz-dauer{font-family:var(--fm);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--quiet);margin-bottom:8px;}
.prozess-card h3{font-size:16px;margin-bottom:8px;}
.prozess-card p{font-size:13.5px;color:var(--sub);line-height:1.65;}

/* ─── ÜBER UNS ─── */
.about-values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-bottom:72px;}
.value-card{background:#fff;border-radius:18px;padding:32px 28px;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;}
.value-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.value-card .vc-ico{font-size:28px;margin-bottom:14px;}
.value-card .vc-t{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.value-card .vc-x{font-size:14px;color:var(--sub);line-height:1.7;}
.about-founder-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center;}
.founder-card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 2px 16px rgba(0,0,0,.08);}
.founder-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--akzent3),var(--akzent));color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;margin-bottom:24px;overflow:hidden;}
.founder-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.founder-name{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.founder-role{font-size:13px;color:var(--akzent);font-weight:600;margin-bottom:20px;}
.founder-text{font-size:14px;color:var(--sub);line-height:1.75;margin-bottom:24px;}
.founder-checks{display:flex;flex-direction:column;gap:6px;}
.founder-checks div{display:flex;gap:10px;font-size:13px;color:var(--body);line-height:1.6;}
.founder-checks div::before{content:'\2713';color:var(--akzent);flex-shrink:0;font-weight:600;}
.about-list-head{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--quiet);margin-bottom:24px;}
.about-list{display:flex;flex-direction:column;gap:20px;}
.about-item{display:flex;gap:16px;align-items:flex-start;}
.about-item .ai-n{width:40px;height:40px;border-radius:10px;background:var(--afaint);color:var(--akzent);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;font-weight:700;font-family:var(--fm);}
.about-item .ai-t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.about-item .ai-x{font-size:13.5px;color:var(--sub);line-height:1.65;}
.de-badge{margin-top:32px;padding:16px 20px;background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);display:flex;align-items:center;gap:14px;}
.de-badge .db-flag{font-size:24px;}
.de-badge .db-t{font-size:14px;font-weight:700;color:var(--ink);}
.de-badge .db-x{font-size:12px;color:var(--sub);}

/* ─── KARTEN (Bausteine der Unterseiten) ─── */
.schulung-cards,.beratung-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.schulung-card,.beratung-card{
  background:#fff;border-radius:20px;padding:32px 28px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid var(--line);
  transition:all .3s ease;
}
.schulung-card:hover,.beratung-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.1);border-color:var(--aline);}
.schulung-card h3,.beratung-card h3{font-size:18px;font-weight:700;margin:16px 0 12px;color:var(--ink);}
.schulung-card p,.beratung-card p{font-size:13.5px;line-height:1.7;color:var(--sub);margin:0;}
.card-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(135deg,var(--akzent3),var(--akzent));color:#fff;}
.card-icon svg{width:26px;height:26px;}
.card-checklist{display:flex;flex-direction:column;gap:6px;margin-top:16px;}
.card-check{font-size:12.5px;color:var(--body);display:flex;gap:8px;line-height:1.5;}
.card-check::before{content:'\2713';color:var(--akzent);font-weight:600;flex-shrink:0;}

.urgency-box{background:#fff;border-radius:16px;padding:28px 32px;box-shadow:0 2px 12px rgba(0,0,0,.08);border-left:4px solid var(--akzent);margin-top:40px;}
.urgency-badge{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--akzent);margin-bottom:10px;font-weight:700;}
.urgency-title{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.urgency-text{font-size:14px;color:var(--sub);line-height:1.7;}
.urgency-text strong{color:var(--ink);}
.urgency-source{font-family:var(--fm);font-size:11px;color:var(--akzent);margin-top:12px;font-weight:600;}
.beratung-urgency{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;}
.urg-card{background:#fff;border-radius:16px;padding:24px 28px;box-shadow:0 2px 12px rgba(0,0,0,.08);border-left:3px solid var(--akzent);}
.urg-card .ug-e{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--akzent);margin-bottom:8px;}
.urg-card .ug-t{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.urg-card .ug-x{font-size:13.5px;color:var(--sub);line-height:1.65;}

.format-grid,.bausteine-grid,.bridge-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;}
.bridge-grid.drei{grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:980px){.bridge-grid.drei{grid-template-columns:1fr;}}
.format-card,.baustein-card{background:#fff;border-radius:20px;padding:36px 32px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid var(--line);transition:all .3s ease;}
.format-card:hover,.baustein-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.1);}
.format-card h3{font-size:20px;font-weight:700;margin:0 0 16px;color:var(--ink);}
.format-card .format-list{display:flex;flex-direction:column;gap:8px;}
.format-card .format-item{font-size:14px;color:var(--body);display:flex;gap:10px;line-height:1.6;}
.format-card .format-item::before{content:'\2713';color:var(--akzent);font-weight:600;flex-shrink:0;}
.format-info{margin-top:24px;padding:18px 24px;background:var(--afaint);border:1px solid var(--aline);border-radius:12px;font-size:13.5px;color:var(--sub);line-height:1.7;}
.format-info strong{color:var(--ink);}
.baustein-card h3{font-size:20px;font-weight:700;margin:0 0 6px;color:var(--ink);}
.baustein-nr{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--akzent);margin-bottom:10px;font-weight:700;}
.baustein-dauer{font-size:13px;color:var(--quiet);margin-bottom:8px;}
.baustein-item{margin-top:20px;}
.baustein-item h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.baustein-item p{font-size:13.5px;color:var(--sub);line-height:1.7;margin:0;}
.baustein-result{margin-top:24px;padding:16px 20px;background:var(--afaint);border:1px solid var(--aline);border-radius:12px;font-size:14px;font-weight:600;color:var(--akzent);}
.bridge-card{padding:32px 36px;border-radius:20px;transition:all .3s ease;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid var(--line);}
.bridge-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.bridge-card .bc-ico{font-size:36px;margin-bottom:12px;}
.bridge-card h3{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.bridge-card p{font-size:14px;color:var(--sub);line-height:1.7;margin-bottom:20px;}
.bridge-card.blau{background:rgba(0,122,255,.04);border-color:rgba(0,122,255,.15);}
.bridge-card.orange{background:rgba(245,158,11,.04);border-color:rgba(245,158,11,.15);}
.bridge-card.lila{background:rgba(124,58,237,.04);border-color:rgba(124,58,237,.15);}
.bridge-box{padding:32px 36px;background:var(--afaint);border:1px solid var(--aline);border-radius:20px;}
.bridge-box .bb-e{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--akzent);margin-bottom:10px;}
.bridge-box .bb-t{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.bridge-box p{font-size:14px;color:var(--sub);line-height:1.7;margin-bottom:20px;}
.bridge-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.bridge-check-grid div{font-size:13px;color:var(--body);display:flex;gap:8px;align-items:flex-start;}
.bridge-check-grid div::before{content:'\2713';color:var(--akzent);font-weight:600;flex-shrink:0;}

.branchen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
.branche-card{background:#fff;border-radius:16px;padding:28px 24px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid var(--line);transition:all .3s ease;}
.branche-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.branche-card .branche-icon{font-size:32px;margin-bottom:14px;}
.branche-card h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.branche-card p{font-size:13.5px;color:var(--sub);line-height:1.65;}
.branche-card .branche-fuss{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--quiet);line-height:1.6;}

.ki-usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;}
.ki-usage-item{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--body);line-height:1.6;background:#fff;padding:14px 18px;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.04);border:1px solid var(--line);}
.ki-usage-item::before{content:'\2192';color:var(--akzent);font-weight:700;font-size:16px;flex-shrink:0;margin-top:1px;}

.praxis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.praxis-card{background:#fff;border-radius:20px;padding:32px 28px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid var(--line);transition:all .3s ease;}
.praxis-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.1);}
.praxis-card h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:16px;}
.praxis-label{font-family:var(--fm);font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-bottom:4px;color:var(--quiet);}
.praxis-label.rot{color:#dc2626;}
.praxis-label.akzent{color:var(--akzent);}
.praxis-text{font-size:13.5px;color:var(--sub);line-height:1.7;margin-bottom:14px;}
.praxis-tag{display:inline-block;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:700;color:var(--akzent);background:var(--afaint);border:1px solid var(--aline);margin-top:8px;}

.akzent-box{margin-top:40px;padding:22px 28px;background:var(--afaint);border-radius:16px;border-left:3px solid var(--akzent);}
.akzent-box p{font-size:14px;color:var(--sub);line-height:1.8;}
.akzent-box strong{color:var(--ink);}
.akzent-box a{color:var(--akzent);font-weight:600;text-decoration:none;}
.weiss-box{background:#fff;border-radius:16px;padding:28px 32px;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.weiss-box.rand{border-left:3px solid var(--akzent);}
.zitat{font-size:14.5px;color:var(--body);line-height:1.8;font-style:italic;}
.zitat-quelle{font-family:var(--fm);font-size:11px;color:var(--akzent);margin-top:14px;font-weight:600;}
.kontext-grid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.kontext-card{background:#fff;border-radius:12px;padding:20px 24px;box-shadow:0 1px 6px rgba(0,0,0,.04);border:1px solid var(--line);}
.kontext-card .kc-t{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.kontext-card .kc-x{font-size:13.5px;color:var(--sub);line-height:1.7;}
.bussgeld-box{margin-top:40px;background:#fff;border-radius:16px;padding:24px 28px;box-shadow:0 2px 12px rgba(0,0,0,.08);border-left:3px solid var(--akzent);}
.bussgeld-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.bussgeld-text{font-size:14px;color:var(--sub);line-height:1.7;}
.hinweis-klein{margin-top:24px;font-size:11.5px;color:var(--quiet);line-height:1.6;}

/* ─── STATISTIK-KARTEN ─── */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;}
.stat-cards.drei{grid-template-columns:repeat(3,1fr);}
.stat-cards.zwei-sp{grid-template-columns:repeat(2,1fr);}
.stat-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.08);border-left:3px solid var(--akzent);transition:transform .3s,box-shadow .3s;}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.stat-card .sc-e{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--akzent);margin-bottom:10px;font-weight:700;}
.stat-card .sc-n{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--ink);margin-bottom:8px;line-height:1.1;}
.stat-card .sc-x{font-size:13.5px;color:var(--sub);line-height:1.65;margin:0;}
.stat-card .sc-q{font-family:var(--fm);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--quiet);margin-top:10px;}
.quellen-zeile{font-size:11.5px;color:var(--quiet);margin-top:16px;text-align:center;line-height:1.6;}

/* ─── FUSSBEREICH ─── */
footer{padding:64px 6vw 40px;background:var(--bg2);border-top:1px solid var(--line);padding-bottom:max(40px,env(safe-area-inset-bottom));}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;max-width:var(--inner);margin:0 auto;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-brand img{width:28px;height:28px;flex-shrink:0;opacity:.75;border-radius:6px;}
.footer-brand span{color:var(--ink);font-size:15px;font-weight:700;}
.footer-col h5,.footer-heading{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--quiet);margin-bottom:16px;}
.footer-col a{display:block;font-size:13px;color:var(--sub);text-decoration:none;transition:color .2s;padding:3px 0;font-family:var(--f);}
.footer-col a:hover{color:var(--ink);}
.footer-col p{font-size:13px;color:var(--sub);line-height:1.7;margin:0;}
.footer-col p + p{margin-top:12px;}
.footer-col .footer-mail{color:var(--akzent);font-weight:600;}
.footer-ok{margin-top:20px;padding:10px 14px;background:var(--afaint);border-radius:8px;font-size:11px;color:var(--akzent);line-height:1.7;font-weight:500;}
.footer-bottom{max-width:var(--inner);margin:24px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--fm);font-size:11px;color:var(--quiet);}

/* ─── MODAL ─── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:5vh 5vw;overflow-y:auto;}
.modal-overlay.open,.modal-overlay.offen{display:flex;align-items:flex-start;justify-content:center;}
.modal{background:#fff;border-radius:20px;max-width:720px;width:100%;padding:48px;position:relative;margin:auto;}
.modal-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border:none;background:var(--bg2);border-radius:50%;cursor:pointer;font-size:16px;color:var(--sub);display:flex;align-items:center;justify-content:center;transition:background .2s;}
.modal-close:hover{background:var(--line2);}
.modal h3{font-size:30px;font-weight:700;margin-bottom:28px;color:var(--ink);}
.modal h4{font-size:14px;font-weight:700;color:var(--ink);margin:24px 0 8px;}
.modal p,.modal li{font-size:14px;color:var(--body);line-height:1.78;margin-bottom:10px;}
.modal ul{margin-left:20px;margin-bottom:10px;}
.modal a{color:var(--akzent);text-decoration:none;font-weight:500;}
.modal .meta{font-family:var(--fm);font-size:11px;color:var(--quiet);letter-spacing:.5px;margin-bottom:28px;}
.modal hr{border:none;border-top:1px solid var(--line);margin:24px 0;}

/* ─── NACH OBEN ─── */
.scroll-top{position:fixed;bottom:max(32px,calc(20px + env(safe-area-inset-bottom)));right:max(20px,env(safe-area-inset-right));z-index:150;width:44px;height:44px;border-radius:50%;background:var(--verlauf);color:#fff;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,background .2s;pointer-events:none;box-shadow:0 2px 12px var(--aschatten);}
.scroll-top.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.scroll-top:hover{background:var(--verlauf-hover);transform:translateY(-2px);box-shadow:0 4px 16px var(--aschatten2);}

/* ─── ERSCHEINEN BEIM SCROLLEN ─── */
.reveal,.zeig{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
.reveal.in,.zeig.da,.reveal.da,.zeig.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal,.zeig{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}.pulse{animation:none;}}

/* ─── SKIP-LINK / TASTATUR ─── */
.skip-link{position:absolute;top:-100px;left:16px;background:var(--akzent);color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;z-index:10000;text-decoration:none;transition:top .2s;}
.skip-link:focus{top:16px;}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:4px;}
.cf-input:focus-visible,.cf-select:focus-visible,.cf-textarea:focus-visible{outline:2px solid var(--akzent);outline-offset:0;}

/* ==========================================================================
   Bausteine der neuen Seiten (Preise, Vergleich, IT, Grenzen, Formulare)
   ========================================================================== */

/* --- Raster --- */
.gitter{display:grid;gap:20px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
.zwei-schmal{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
.gitter > *,.zwei > *,.zwei-schmal > *{min-width:0;}

/* --- Karte --- */
.karte{background:#fff;border-radius:16px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.07);overflow-wrap:break-word;}
.karte h3{margin-bottom:10px;}
.karte p{font-size:14.5px;line-height:1.65;color:var(--body);}
.karte .klein{font-size:13px;}
.karte.rand{box-shadow:none;border:1px solid var(--line);}
section.tinted .karte.rand,section.getoent .karte.rand{background:#fff;}
.karte.produkt{position:relative;overflow:hidden;padding-top:32px;display:flex;flex-direction:column;}
.karte.produkt::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--k3,var(--akzent3)),var(--k1,var(--akzent)));}
.karte.produkt .eyebrow{color:var(--k2,var(--akzent2));}
.karte.produkt .weiter{margin-top:auto;padding-top:18px;font-size:14.5px;font-weight:600;color:var(--k2,var(--akzent2));text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.karte.produkt .weiter:hover{gap:11px;}
.karte.produkt .weiter span{transition:transform .2s;}
.karte-blau{--k1:#007AFF;--k2:#0062cc;--k3:#4da6ff;}
.karte-orange{--k1:#d97706;--k2:#b45309;--k3:#f59e0b;}
.karte-lila{--k1:#7c3aed;--k2:#6d28d9;--k3:#a78bfa;}

/* --- Chip --- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:var(--bg3);color:var(--sub);white-space:nowrap;max-width:100%;}
.gitter .chip,.karte .chip{white-space:normal;text-align:center;}
.chip.ja{background:var(--belegt-bg);color:var(--belegt);}
.chip.nein{background:var(--nein-bg);color:var(--nein);}
.chip.arbeit{background:var(--afaint);color:var(--akzent);}

/* --- Zahl --- */
.zahl{display:flex;flex-direction:column;gap:6px;}
.zahl .wert{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.03em;color:var(--akzent);line-height:1;}
.zahl .was{font-size:14px;color:var(--sub);line-height:1.5;}
.zahl .quelle{font-family:var(--fm);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);opacity:.75;}
.zahlen-band{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);}

/* --- Datenblatt --- */
.tab{width:100%;border-collapse:collapse;font-size:14.5px;}
.tab th{text-align:left;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);font-weight:500;padding:0 16px 12px 0;border-bottom:1px solid var(--line);}
.tab td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line2);color:var(--body);vertical-align:top;line-height:1.5;}
.tab td:first-child{color:var(--ink);font-weight:500;}
.tab tr:last-child td{border-bottom:0;}
.tab .num{font-family:var(--fm);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
.tab a{color:var(--akzent);text-decoration:none;font-weight:600;}

/* --- Notiz / Hinweis --- */
.notiz{border-left:2px solid var(--line);padding:2px 0 2px 20px;font-size:14.5px;color:var(--body);line-height:1.65;max-width:var(--lese);}
.notiz.wichtig{border-left-color:var(--akzent);}
.notiz.warn{border-left-color:var(--nein);}
.hinweis{background:var(--afaint);border-left:3px solid var(--akzent);border-radius:0 16px 16px 0;padding:20px 26px;font-size:14.5px;color:var(--body);line-height:1.65;max-width:var(--lese);}
.hinweis strong{color:var(--ink);}
.hinweis a,.notiz a{color:var(--akzent);font-weight:600;text-decoration:none;}
.offen{background:#fff6d9;border-bottom:1px dashed #c9a227;color:#6b5310;padding:0 .25em;font-family:var(--fm);font-size:.86em;}

/* --- Preistafel --- */
.stufe{display:flex;flex-direction:column;position:relative;}
.stufe .eyebrow{margin-bottom:10px;}
.stufe .preis{font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-.03em;color:var(--akzent);line-height:1;margin:6px 0 4px;}
.stufe .preis small{font-size:14px;font-weight:500;color:var(--sub);letter-spacing:0;}
.stufe .dazu{font-size:13px;color:var(--sub);margin-bottom:14px;}
.stufe ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.stufe ul li{position:relative;padding-left:22px;font-size:14px;color:var(--body);line-height:1.5;}
.stufe ul li::before{content:'';position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:1.6px solid var(--belegt);border-bottom:1.6px solid var(--belegt);transform:rotate(-45deg);}
.stufe.hervor{border:1.5px solid var(--akzent);box-shadow:0 6px 24px var(--asoft);}
.stufe .marke-oben{position:absolute;top:-11px;left:24px;background:var(--akzent);color:#fff;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 11px;border-radius:100px;}

/* --- Rechner (neu) --- */
.er-feld{margin-bottom:22px;}
.er-feld > label{display:block;font-size:14.5px;color:var(--ink);margin-bottom:10px;}
.er-feld .er-w{font-family:var(--fm);font-size:14.5px;color:var(--akzent);font-weight:600;float:right;font-variant-numeric:tabular-nums;}
.er-feld input[type=range]{height:22px;background:transparent;}
.er-feld input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line2);border-radius:2px;}
.er-feld input[type=range]::-webkit-slider-thumb{margin-top:-9px;}
.er-feld input[type=range]::-moz-range-track{height:2px;background:var(--line2);border-radius:2px;}
.er-kasten{background:var(--bg2);border-radius:14px;padding:24px 26px;}
.er-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line2);}
.er-zeile:last-of-type{border-bottom:0;}
.er-zeile .b{font-size:14px;color:var(--body);}
.er-zeile .w{font-family:var(--fm);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.er-summe{margin-top:14px;padding-top:16px;border-top:1px solid var(--line);}
.er-summe .w{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--akzent);}

/* --- Vergleichstabelle --- */
.vgl-rahmen{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;}
.vgl{width:100%;border-collapse:collapse;font-size:14px;min-width:720px;}
.vgl th,.vgl td{padding:14px 16px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top;line-height:1.5;}
.vgl thead th{background:var(--bg2);font-family:var(--fm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);font-weight:500;border-bottom:1px solid var(--line);}
.vgl thead th.uns{color:var(--akzent);background:var(--afaint);}
.vgl tbody td:first-child{color:var(--ink);font-weight:500;width:29%;}
.vgl td.uns{background:var(--afaint);}
.vgl tr:last-child td{border-bottom:0;}
.vgl .ja{color:var(--belegt);font-weight:600;}
.vgl .nein{color:var(--nein);}
.vgl .teils{color:var(--fund);}
.vgl .q{display:block;margin-top:5px;font-family:var(--fm);font-size:10.5px;color:var(--sub);opacity:.85;}
@media(max-width:760px){
  .vgl-rahmen{position:relative;}
  .vgl-rahmen::after{content:'\2192 seitlich wischen';position:sticky;left:0;display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);background:var(--bg2);padding:7px 14px;border-top:1px solid var(--line2);}
}

/* --- Formular (neue Felder) --- */
.fm-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.fm-reihe > *{min-width:0;}
.feld{display:block;margin-top:16px;}
.fm > .feld:first-child,.fm-reihe .feld,.fm > .fm-reihe:first-child{margin-top:0;}
.feld > span{display:block;margin-bottom:6px;font-size:13.5px;line-height:1.45;color:var(--sub);}
.feld input,.feld select,.feld textarea{width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:10px;font-family:var(--f);font-size:15px;background:#fff;color:var(--ink);}
.feld textarea{resize:vertical;}
.feld select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--akzent);outline:none;}
.fm-mehr{border:0;border-top:1px solid var(--line2);margin-top:20px;padding-top:4px;}
.fm-mehr summary{padding:14px 24px 14px 0;font-size:14px;font-weight:500;color:var(--sub);cursor:pointer;list-style:none;position:relative;}
.fm-mehr summary::-webkit-details-marker{display:none;}
.fm-mehr summary::after{content:'';position:absolute;right:8px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:translateY(-70%) rotate(45deg);transition:transform .2s;}
.fm-mehr[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.fm-mehr summary:hover,.fm-mehr[open] summary{color:var(--ink);}
.fm-mehr .feld,.fm-mehr .fm-reihe{margin-bottom:4px;}

/* --- Porträt-Platzhalter --- */
.person-bild{aspect-ratio:4/3;border-bottom:1px solid var(--line);background:linear-gradient(150deg,var(--bg2) 0%,var(--bg3) 100%);display:flex;align-items:center;justify-content:center;}
.person-bild span{font-family:var(--fm);font-size:clamp(30px,4vw,44px);font-weight:500;letter-spacing:.08em;color:var(--sub);opacity:.5;}

/* --- Rechtstexte --- */
.recht{padding-top:calc(var(--nav-h) + 48px);}
.recht-text{max-width:760px;}
.recht-text h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:8px;}
.recht-meta{margin-bottom:28px;font-family:var(--fm);font-size:12px;color:var(--sub);}
.recht-h2{font-size:18px;font-weight:600;margin:30px 0 8px;letter-spacing:-.01em;}
.recht-text p,.recht-text li{font-size:15px;line-height:1.65;color:var(--body);}
.recht-text ul{padding-left:20px;margin:8px 0 16px;}
.recht-text a{color:var(--akzent);}

/* --- Aufmacher mit App-Fenster / Zeichnung --- */
.hero-raster{display:grid;grid-template-columns:1fr 1.18fr;gap:clamp(28px,4vw,52px);align-items:center;}
.hero-raster > *{min-width:0;}
.hero-raster h1{font-size:clamp(34px,3.6vw,52px);}
.rk-gross{color:var(--akzent);}
.zeichen-hinweis{font-size:13px;color:var(--sub);margin-top:14px;text-align:center;}

/* ==========================================================================
   Schmale Bildschirme
   ========================================================================== */
@media(max-width:1280px){
  .nav-links{gap:16px;}
  .nav-links a{font-size:13px;}
  .nav-badge{display:none;}
  .nav-cta{padding:7px 14px;font-size:12px;}
}
@media(max-width:1100px){
  .hero-grid,.hero-grid.hero-breit{grid-template-columns:1fr;gap:40px;}
  .hero-raster{grid-template-columns:1fr;gap:38px;}
  .hero-raster h1{font-size:clamp(34px,5.4vw,56px);}
  .stat-cards{grid-template-columns:repeat(2,1fr);}
  .branchen-grid{grid-template-columns:repeat(2,1fr);}
  .prozess-cards{grid-template-columns:repeat(2,1fr);}
  .g4{grid-template-columns:repeat(2,1fr);}
  .zahlen-band{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:980px){
  .loesungen-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}
  .func-grid,.func-highlights,.schulung-cards,.beratung-cards,.praxis-cards,.praxis-grid{grid-template-columns:1fr;}
  .about-values-grid{grid-template-columns:1fr;}
  .about-founder-grid{grid-template-columns:1fr;gap:32px;}
  .roi-layout{grid-template-columns:1fr;}
  .roi-result{position:static;}
  .zwei-schmal,.zwei{grid-template-columns:1fr;}
  .g3{grid-template-columns:1fr;}
  .format-grid,.bausteine-grid,.bridge-grid{grid-template-columns:1fr;}
  .kontext-grid,.ki-usage-grid{grid-template-columns:1fr;}
}
@media(max-width:860px){
  section{padding:80px 5vw;}
  nav{padding:0 5vw;}
  .nav-links,.nav-badge,.nav-cta{display:none;}
  .hamburger{display:flex;}
  #hero{padding-bottom:80px;padding-top:calc(var(--nav-h) + 56px);}
  #hero h1{font-size:clamp(36px,8vw,52px);}
  h2{font-size:clamp(28px,6vw,40px);}
  .hero-kennzahlen,.hero-stats-row{gap:8px;}
  .hero-stat-card{padding:12px 8px;}
  .hero-stat-num{font-size:17px;}
  .hero-stat-label{font-size:9.5px;}
  .hero-bausteine{grid-template-columns:1fr 1fr;}
  .hero-bausteine .hero-stat-card:nth-child(3){grid-column:1/-1;}
  .hero-bausteine .hero-stat-num{font-size:16px;}
  .problem-grid{grid-template-columns:1fr;}
  .compare,.opt-pane.show,.contact-card,.cta-dual-grid,.cta-schritte-grid,.beratung-urgency{grid-template-columns:1fr;}
  .compare-col.bad{border-right:none;border-bottom:1px solid var(--line);}
  .uc-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .uctab{padding:9px 14px;font-size:12px;white-space:nowrap;flex-shrink:0;}
  .uc-grid{grid-template-columns:1fr;}
  .cta-steps{flex-wrap:wrap;}
  .cta-step{min-width:calc(50% - 1px);}
  .faq-grid{grid-template-columns:1fr;}
  .stat-cards,.stat-cards.drei,.stat-cards.zwei-sp{grid-template-columns:1fr;}
  .prozess-cards,.prozess-cards.drei{grid-template-columns:1fr;}
  .branchen-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px 20px;}
  .contact-form{grid-template-columns:1fr;}
  .contact-card{padding:24px;gap:24px;}
  .ct-actions{min-width:auto;width:100%;}
  .footer-bottom{flex-direction:column;gap:6px;text-align:center;}
  .modal{padding:28px;}
  .footer-col a{padding:8px 0;min-height:44px;display:flex;align-items:center;}
  .g2{grid-template-columns:1fr;}
  .fm-reihe{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .g4,.zahlen-band{grid-template-columns:1fr;}
  .karte{padding:22px;}
  .tab .num{white-space:normal;}
  .tab td,.tab th{padding-right:10px;overflow-wrap:anywhere;}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .hero-kennzahlen,.hero-stats-row{grid-template-columns:1fr 1fr;gap:6px;}
  .hero-bausteine .hero-stat-num{font-size:14px;}
  .hero-kennzahlen .hero-stat-card:nth-child(3),.hero-stats-row .hero-stat-card:nth-child(3){grid-column:1/-1;}
  .contact-card{padding:20px;gap:20px;}
  .ct-name{font-size:22px;}
  section{padding:60px 4vw;}
  #hero h1{font-size:32px;}
  .roi-big{font-size:clamp(28px,8vw,48px);}
}

/* ─── DRUCK ─── */
@media print{
  nav,.hamburger,.mobile-menu,.scroll-top,.btn-pri,.btn-sec,.nav-cta,.cta-steps,.foerder-note,.contact-form,.ct-actions,.knopf-reihe{display:none !important;}
  section{padding:40px 0 !important;break-inside:avoid;}
  section.tinted,section.getoent{background:#fff !important;}
  footer{background:#fff !important;border-top:1px solid #ccc !important;}
  body{font-size:12pt;}
  .reveal,.zeig{opacity:1;transform:none;}
}

/* --- Abschnitt in der Farbe eines anderen Bereichs -----------------------
   Setzt den Akzent lokal um, damit ein Abschnitt der Startseite in der
   Farbe des KI-Systems (Blau) stehen kann, ohne die Seitenfarbe zu ändern. */
.akzent-blau{
  --akzent:#007AFF; --akzent2:#0062cc; --akzent3:#4da6ff; --akzent4:#3d99ff;
  --afaint:rgba(0,122,255,.05); --aline:rgba(0,122,255,.16); --asoft:rgba(0,122,255,.09);
  --aschatten:rgba(0,122,255,.22); --aschatten2:rgba(0,122,255,.32);
  --verlauf:linear-gradient(180deg,var(--akzent3) 0%,var(--akzent) 100%);
  --verlauf-hover:linear-gradient(180deg,var(--akzent4) 0%,var(--akzent2) 100%);
}

/* --- Punkteliste im Lösungsabschnitt ------------------------------------ */
.loesung-punkt{padding:14px 0;border-bottom:1px solid var(--line2);}
.loesung-punkt:first-child{padding-top:0;}
.loesung-punkt:last-child{border-bottom:0;padding-bottom:0;}
.loesung-punkt .lp-t{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:3px;display:flex;align-items:flex-start;gap:9px;}
.loesung-punkt .lp-t::before{content:'\2713';color:var(--akzent);font-weight:700;flex:none;}
.loesung-punkt .lp-x{font-size:14px;color:var(--sub);line-height:1.6;padding-left:24px;}

/* ==========================================================================
   SYSTEMSEITE: Wissensdatenbanken, Vorlagen und Profile, Agenten
   Drei Abschnitte, die zeigen, wie das System im Haus aufgebaut ist.
   ========================================================================== */

/* --- Vorlagen und Profil, zwei Spalten ----------------------------------- */
.vp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;align-items:start;}
.vp-karte{background:#fff;border-radius:16px;padding:28px;box-shadow:0 2px 14px rgba(0,0,0,.07);}
.vp-kopf{
  display:flex;align-items:center;gap:11px;font-size:17px;font-weight:700;
  color:var(--ink);margin-bottom:18px;
}
.vp-sym{
  width:30px;height:30px;border-radius:8px;background:var(--asoft);color:var(--akzent2);
  display:flex;align-items:center;justify-content:center;font-family:var(--fm);
  font-size:16px;font-weight:700;flex:none;
}
.vp-fuss{font-size:13.5px;color:var(--sub);line-height:1.6;margin-top:16px;}

.vl-liste{display:flex;flex-direction:column;}
.vl-zeile{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line2);
}
.vl-zeile:last-child{border-bottom:0;}
.vl-cmd{
  font-family:var(--fm);font-size:12.5px;font-weight:600;color:var(--akzent2);
  background:var(--asoft);border-radius:6px;padding:3px 9px;white-space:nowrap;
}
.vl-zeile.neu .vl-cmd{background:var(--bg3);color:var(--sub);}
.vl-was{font-size:13.5px;color:var(--sub);line-height:1.55;}

/* --- Profilkarte --------------------------------------------------------- */
.pr-karte{border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.pr-zeile{
  display:grid;grid-template-columns:118px 1fr;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--line2);align-items:baseline;
}
.pr-zeile:last-child{border-bottom:0;}
.pr-feld{
  font-family:var(--fm);font-size:11px;color:var(--sub);
  text-transform:uppercase;letter-spacing:.04em;
}
.pr-wert{font-size:14px;color:var(--ink);font-weight:500;}
.pr-effekt{margin-top:18px;padding:18px 20px;border-radius:12px;background:var(--bg2);}
.pr-effekt-titel{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:11px;}
.pr-effekt-zeile{
  display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;
  font-size:13.5px;color:var(--sub);line-height:1.6;
}
.pr-effekt-zeile + .pr-effekt-zeile{margin-top:9px;}
.pr-rolle{
  font-family:var(--fm);font-size:11px;font-weight:700;color:var(--akzent2);
  background:var(--asoft);border-radius:5px;padding:2px 8px;text-align:center;
}

/* --- Agenten ------------------------------------------------------------- */
.ag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px;}
.ag-karte{
  background:#fff;border-radius:16px;padding:24px 26px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;
}
.ag-karte:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.08);}
.ag-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;}
.ag-kopf h4{font-size:17px;font-weight:700;color:var(--ink);}
.ag-takt{
  font-family:var(--fm);font-size:10.5px;font-weight:600;color:var(--akzent2);
  background:var(--asoft);border-radius:100px;padding:3px 10px;white-space:nowrap;flex:none;
}
.ag-karte p{font-size:14px;color:var(--sub);line-height:1.65;}
.ag-fuss{
  margin-top:13px;padding-top:11px;border-top:1px solid var(--line2);
  font-family:var(--fm);font-size:11.5px;color:var(--quiet);
}
.ag-regeln{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;}
.ag-regel{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--sub);line-height:1.6;}
.ag-regel strong{color:var(--ink);font-weight:600;}
.ag-haken{color:var(--akzent);font-weight:700;flex:none;}

/* --- Schmale Bildschirme ------------------------------------------------- */
@media(max-width:860px){
  .vp-grid,.wd-warum,.ag-grid,.ag-regeln{grid-template-columns:1fr;}
  .wd-tafel-kopf{display:none;}
  /* Am Handy steht jede Datenbank als kleiner Block, Bestand und Stand
     laufen in einer Zeile weiter. */
  .wd-zeile{display:block;padding:14px 18px;}
  .wd-name{margin-bottom:3px;}
  .wd-fuer::before{content:'Sichtbar für: ';color:var(--quiet);}
  .wd-menge,.wd-stand{display:inline;}
  .wd-menge::after{content:' · ';color:var(--quiet);}
  .wd-tafel-fuss{padding:13px 18px;}
}

/* ==========================================================================
   SYSTEMSEITE: Warum lokal
   ========================================================================== */
.wl-spruch{
  margin:48px auto 0;max-width:640px;display:flex;align-items:center;gap:22px;
  justify-content:center;
}
.wl-strich{width:3px;align-self:stretch;min-height:62px;border-radius:3px;background:var(--verlauf);flex:none;}
.wl-spruch p{
  font-size:clamp(22px,3vw,30px);line-height:1.35;color:var(--sub);
  font-weight:500;letter-spacing:-.02em;
}
.wl-spruch strong{color:var(--ink);font-weight:700;}
.wl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;}
.wl-karte{background:#fff;border-radius:14px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.wl-num{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--akzent);margin-bottom:10px;letter-spacing:.04em;}
.wl-karte h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.3;}
.wl-karte p{font-size:13.5px;color:var(--sub);line-height:1.65;}

/* ==========================================================================
   SYSTEMSEITE: Wissensdatenbanken in drei Bloecken
   Aufbau wie bei Apple: Text und Geraet stehen nebeneinander und tauschen von
   Block zu Block die Seite. Das Geraet laeuft jeweils nach aussen aus dem Bild,
   darunter steht eine kleine Bildunterschrift. Nichts wird abgeblendet.
   ========================================================================== */
.ws-kopf{margin-bottom:clamp(56px,8vw,110px);}
.ws-reihe{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(36px,6vw,110px);align-items:center;
  margin-bottom:clamp(96px,14vw,190px);
}
.ws-reihe:last-child{margin-bottom:0;}
/* Jeder zweite Block tauscht die Seiten. */
.ws-reihe.gedreht{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);}
.ws-reihe.gedreht .ws-wort{order:1;}
.ws-reihe.gedreht .ws-schau{order:2;}
.ws-reihe .ws-wort{order:2;}
.ws-reihe .ws-schau{order:1;}

/* --- Die Textseite: wenig Worte, gross gesetzt --------------------------- */
.ws-wort{max-width:27ch;}
.ws-marke-feld{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin-bottom:22px;color:#fff;
}
.ws-marke-feld svg{width:24px;height:24px;}
.ws-marke-feld.blau{background:var(--verlauf);}
.ws-marke-feld.dunkel{background:linear-gradient(180deg,#5c5c6b,#2f2f3a);}
.ws-satz{
  font-size:clamp(19px,1.5vw,23px);line-height:1.4;color:var(--ink);
  font-weight:500;letter-spacing:-.015em;
}
.ws-hervor{margin-top:26px;}
.ws-hervor p{
  font-size:clamp(17px,1.25vw,19.5px);line-height:1.35;font-weight:600;
  color:var(--akzent);letter-spacing:-.012em;
}
.ws-hervor p + p{margin-top:12px;}

/* --- Die Geraeteseite ---------------------------------------------------- */
.ws-schau{display:flex;flex-direction:column;min-width:0;align-items:center;}
/* 660 px entspricht auf einem breiten Schirm gut einem Drittel der Breite,
   so steht das Gerät da wie beim Vorbild. */
.ws-schau .af-geraet.ws-geraet{width:100%;max-width:660px;}
.ws-bu{
  margin-top:16px;font-size:11.5px;color:var(--quiet);
  text-align:right;padding-right:4px;
}

/* --- Der Bildschirminhalt ------------------------------------------------ */
.ws-schirm{background:#fff;display:flex;flex-direction:column;}
.ws-app{flex:1;min-height:0;display:flex;}
.ws-haupt{flex:1;min-width:0;position:relative;overflow:hidden;}
.ws-bild{
  position:absolute;top:0;left:0;width:614px;height:var(--ws-bildhoehe,358px);
  padding:14px 16px;overflow:hidden;transform-origin:top left;
  transform:scale(var(--ws-skala,1));
}

/* --- Die Seitenleiste im Bildschirm -------------------------------------- */
/* Auch die Seitenleiste rechnet in Prozent der Gerätebreite, sonst wirkt sie
   auf einem kleiner dargestellten Gerät zu breit. */
.ws-seite{
  width:17.15cqw;flex:none;background:var(--bg2);border-right:1px solid var(--line2);
  padding:1.22cqw 1.02cqw;display:flex;flex-direction:column;gap:.2cqw;
}
.ws-seite-kopf{display:flex;align-items:center;gap:.71cqw;font-size:1.22cqw;font-weight:700;color:var(--ink);margin-bottom:1.22cqw;}
.ws-seite-kopf img{border-radius:22%;}
.ws-seite-gruppe{
  font-family:var(--fm);font-size:.92cqw;color:var(--quiet);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.51cqw;
}
.ws-db{
  display:flex;align-items:center;gap:.71cqw;font-size:1.17cqw;color:var(--sub);
  padding:.51cqw .82cqw;border-radius:.61cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ws-db-punkt{width:.61cqw;height:.61cqw;border-radius:50%;flex:none;}
.ws-db-punkt.geteilt{background:var(--blau);}
.ws-db-punkt.privat{background:var(--quiet);}
.ws-seite-fuss{
  margin-top:auto;display:flex;align-items:center;gap:.71cqw;padding-top:1.02cqw;
  border-top:1px solid var(--line2);font-size:1.07cqw;color:var(--sub);
}
.ws-kreis{
  width:2.04cqw;height:2.04cqw;border-radius:50%;background:var(--verlauf);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.87cqw;font-weight:700;flex:none;
}

/* --- Kopfzeile und Marken im Bildschirm ---------------------------------- */
.ws-bild-kopf{
  display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink);
  padding-bottom:11px;border-bottom:1px solid var(--line2);margin-bottom:13px;
}
.ws-bild-tag{margin-left:auto;font-family:var(--fm);font-size:10px;color:var(--quiet);font-weight:400;}
.ws-marke{
  font-family:var(--fm);font-size:9px;font-weight:700;font-style:normal;
  padding:2px 6px;border-radius:4px;letter-spacing:.02em;white-space:nowrap;
}
.ws-marke.geteilt{background:var(--blau);color:#fff;}
.ws-marke.eng{background:var(--fund-bg);color:var(--fund);}
.ws-marke.privat{background:var(--bg3);color:var(--sub);}

/* --- Frage und Antwort im Bildschirm ------------------------------------- */
.ws-kopf-kreis{
  width:23px;height:23px;border-radius:50%;background:var(--verlauf);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;
  border:2px solid #fff;margin-right:-7px;flex:none;
}
.ws-kopf-kreis.klein{width:19px;height:19px;font-size:8px;border:0;margin-right:7px;}
.ws-frage{margin-top:8px;padding-top:8px;border-top:1px solid var(--line2);}
.ws-frage-zeile{display:flex;align-items:center;font-size:11px;color:var(--ink);margin-bottom:5px;}
.ws-antwort-zeile{
  display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--sub);
  line-height:1.45;background:var(--afaint);border-radius:8px;padding:7px 9px;
}
.ws-antwort-zeile.nein{background:var(--fund-bg);color:var(--fund);}
.ws-ki{width:14px;height:14px;border-radius:4px;background:var(--verlauf);flex:none;margin-top:1px;}

/* --- Der gesperrte Bestand ----------------------------------------------- */
.ws-sperre{
  display:flex;gap:9px;align-items:flex-start;background:var(--fund-bg);
  border-radius:9px;padding:8px 11px;margin-bottom:7px;
}
.ws-schloss{color:var(--fund);flex:none;}
.ws-schloss svg{width:17px;height:17px;}
.ws-sperre-titel{font-size:11px;font-weight:700;color:var(--fund);margin-bottom:3px;line-height:1.35;}
.ws-sperre-text{font-size:10.5px;color:var(--sub);line-height:1.5;}

/* --- Einstellungen im Geraet, nachgebaut nach der Anwendung ---------------
   Reiterleiste oben, darunter Ueberschrift, Beschreibung, Knopf und die
   Liste der Bestaende. Die Anwendung trennt eigene und geteilte in zwei
   Reiter, genau das zeigen Bild 1 und Bild 2. */
.ws-reiter{
  display:flex;gap:3px;flex-wrap:wrap;padding-bottom:8px;margin-bottom:10px;
  border-bottom:1px solid var(--line2);
}
.ws-reiter span{
  font-size:10px;color:var(--sub);padding:4px 8px;border-radius:6px;white-space:nowrap;
}
.ws-reiter span.an{background:var(--asoft);color:var(--akzent2);font-weight:600;}
.ws-ein-titel{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.ws-ein-text{font-size:11px;color:var(--sub);line-height:1.5;margin-bottom:9px;}
.ws-knopf{
  display:inline-block;background:var(--akzent);color:#fff;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:7px;margin-bottom:10px;
}
.ws-liste{display:flex;flex-direction:column;gap:7px;}
.ws-eintrag{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border:1px solid var(--line2);border-radius:8px;
  transition:background .3s,border-color .3s;
}
.ws-eintrag.an{background:var(--afaint);border-color:var(--aline);}
.ws-eintrag-name{font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ws-eintrag-meta{font-size:10px;color:var(--sub);margin-top:2px;}
.ws-muell{color:var(--quiet);flex:none;display:flex;}
.ws-muell svg{width:13px;height:13px;}
.ws-ablage{
  margin-top:10px;padding:9px 12px;border:1.5px dashed var(--line);border-radius:9px;
  text-align:center;font-size:10px;color:var(--sub);line-height:1.5;
}
.ws-ablage span{color:var(--akzent2);text-decoration:underline;}
.ws-ablage i{font-style:normal;font-size:9.5px;color:var(--quiet);}

/* --- Der Auswahldialog, wie ihn die Anwendung zeigt ---------------------- */
.ws-dialog{
  border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  box-shadow:0 6px 20px rgba(0,0,0,.07);margin-bottom:7px;
}
.ws-dialog-kopf{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:10px;
}
.ws-dialog-kopf span{font-weight:400;font-size:11px;color:var(--sub);}
.ws-dialog-eintrag{
  display:block;width:100%;text-align:left;font-family:inherit;
  font-size:11px;color:var(--ink);background:#fff;
  border:1px solid var(--line2);border-radius:7px;padding:6px 10px;
}
.ws-dialog-eintrag + .ws-dialog-eintrag{margin-top:5px;}

/* --- Schmale Bildschirme -------------------------------------------------
   Untereinander statt nebeneinander: erst das Gerät, darunter der Text.
   Der Überstand fällt weg, das Gerät steht mittig. */
@media(max-width:1000px){
  .ws-reihe,.ws-reihe.gedreht{grid-template-columns:1fr;gap:28px;}
  .ws-reihe .ws-wort,.ws-reihe.gedreht .ws-wort{order:2;max-width:none;}
  .ws-reihe .ws-schau,.ws-reihe.gedreht .ws-schau{order:1;justify-content:center;}
  .ws-schau{--ueberstand:0px;}
  .ws-geraet{width:min(560px,100%);margin:0 auto;}
  .wl-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .wl-grid{grid-template-columns:1fr;}
  .ws-seite{display:none;}
  .wl-spruch{gap:16px;}
}

/* Startseite: Auf dem Handy stehen die Bereiche zusammen, die lokale Nutzung darunter. */
@media (max-width:600px){
  .start-karten.hero-kennzahlen{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .start-karten.hero-kennzahlen > .hero-stat-card:nth-child(1){grid-column:1 / 3;grid-row:1;}
  .start-karten.hero-kennzahlen > .hero-stat-card:nth-child(3){grid-column:3 / 5;grid-row:1;}
  .start-karten.hero-kennzahlen > .hero-stat-card:nth-child(2){grid-column:2 / 4;grid-row:2;}
}
/* Büro: Die Wissensdatenbank bleibt auf dem Handy so breit wie die übrigen Bausteine. */
@media (max-width:600px){
  .buero-karten.hero-kennzahlen{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .buero-karten.hero-kennzahlen > .hero-stat-card:nth-child(1){grid-column:1 / 3;grid-row:1;}
  .buero-karten.hero-kennzahlen > .hero-stat-card:nth-child(2){grid-column:3 / 5;grid-row:1;}
  .buero-karten.hero-kennzahlen > .hero-stat-card:nth-child(3){grid-column:2 / 4;grid-row:2;}
  .buero-karten .hero-stat-num{overflow-wrap:anywhere;}
}
/* Bürogeräte: Proportionale Vorschau samt Gehäuse statt zusammengepresster Oberfläche. */
.buero-vorschau .af-buehne{overflow:hidden;padding-top:8px;}
.buero-vorschau .af-geraet[data-geraet]{position:absolute;top:8px;left:50%;max-width:none;margin:0;transform-origin:top center;}
.buero-vorschau .af-verlauf{min-height:0;overflow-y:auto;}
@media(max-width:640px){
  .buero-vorschau .af-geraet[data-geraet="rechner"] .af-seite{display:flex;width:172px;}
  .buero-vorschau .af-datei{max-width:150px;padding:6px;gap:6px;white-space:normal;}
  .buero-vorschau .af-datei > div{min-width:0;}
  .buero-vorschau .af-datei .nam{font-size:10px;overflow-wrap:anywhere;}
  .buero-vorschau .af-datei .meta{font-size:8px;}
  .buero-vorschau .af-datei .sym{width:24px;height:28px;font-size:8px;}
}
/* Bürogeräte: Die gewählte Geräteansicht bleibt unabhängig vom Bildschirm vollständig erhalten. */
.buero-vorschau .af-geraet[data-geraet="tablet"] .af-seite{display:flex;width:168px;}
.buero-vorschau .af-geraet[data-geraet="tablet"] .af-huelle{padding:14px;}
.buero-vorschau .af-geraet[data-geraet="rechner"] .af-seite{display:flex;width:212px;}
.buero-vorschau .af-geraet[data-geraet="rechner"] .af-seite .af-gruppe{display:block;}
.buero-vorschau .af-geraet[data-geraet="rechner"] .af-verlauf,
.buero-vorschau .af-geraet[data-geraet="tablet"] .af-verlauf{padding:18px;}
.buero-vorschau .af-geraet[data-geraet="rechner"] .af-text,
.buero-vorschau .af-geraet[data-geraet="tablet"] .af-text{font-size:14px;}
.buero-vorschau .af-geraet[data-geraet="handy"] .af-text{font-size:13px;}
/* Geräte auf allen Seiten: gleiche Proportionen und vollständige Fenster auf kleinen Bildschirmen. */
.geraete-vorschau .af-buehne{overflow:hidden;padding-top:8px;}
.geraete-vorschau .af-geraet[data-geraet]{position:absolute;top:8px;left:50%;max-width:none;margin:0;transform-origin:top center;}
.geraete-vorschau .af-verlauf{min-height:0;overflow-y:auto;}
.geraete-vorschau .af-geraet[data-geraet="rechner"] .af-seite{display:flex;width:212px;}
.geraete-vorschau .af-geraet[data-geraet="rechner"] .af-seite .af-gruppe{display:block;}
.geraete-vorschau .af-geraet[data-geraet="tablet"] .af-seite{display:flex;width:168px;}
.geraete-vorschau .af-geraet[data-geraet="tablet"] .af-huelle{padding:14px;}
.geraete-vorschau .af-geraet[data-geraet="rechner"] .af-verlauf,
.geraete-vorschau .af-geraet[data-geraet="tablet"] .af-verlauf{padding:18px;}
.geraete-vorschau .af-geraet[data-geraet="rechner"] .af-text,
.geraete-vorschau .af-geraet[data-geraet="tablet"] .af-text{font-size:14px;}
.geraete-vorschau .af-geraet[data-geraet="handy"] .af-text{font-size:13px;}
.geraete-vorschau .af-geraet[data-geraet="terminal"] .af-huelle{padding:17px;}
.geraete-vorschau .af-geraet[data-geraet="terminal"] .af-verlauf{padding:22px;}
.geraete-vorschau .af-geraet[data-geraet="terminal"] .af-text{font-size:15.5px;}
.geraete-wissen{width:100%;min-width:0;}
.geraete-wissen .ws-seite{display:flex;}
@media(max-width:640px){
  .geraete-vorschau .af-datei{max-width:150px;padding:6px;gap:6px;white-space:normal;}
  .geraete-vorschau .af-datei > div{min-width:0;}
  .geraete-vorschau .af-datei .nam{font-size:10px;overflow-wrap:anywhere;}
  .geraete-vorschau .af-datei .meta{font-size:8px;}
  .geraete-vorschau .af-datei .sym{width:24px;height:28px;font-size:8px;}
}
/* Fertigung: Die dritte Kennzahl steht mittig und bleibt gleich breit. */
@media(max-width:600px){
  .fertigung-karten.hero-kennzahlen{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .fertigung-karten.hero-kennzahlen > .hero-stat-card:nth-child(1){grid-column:1 / 3;grid-row:1;}
  .fertigung-karten.hero-kennzahlen > .hero-stat-card:nth-child(2){grid-column:3 / 5;grid-row:1;}
  .fertigung-karten.hero-kennzahlen > .hero-stat-card:nth-child(3){grid-column:2 / 4;grid-row:2;}
}
/* Der Schatten des Geräts darf über seinen Rahmen hinauslaufen. */
.ws-schau .af-buehne{overflow:visible;}

/* Der Schatten des Geraets darf ueber die Buehne hinauslaufen, sonst steht
   dort eine gerade Kante und das Bild wirkt aufgeklebt. */
.buero-vorschau .af-buehne,
.geraete-vorschau .af-buehne,
.ws-schau .af-buehne{overflow:visible;}

/* Laptop wie in Sicherung v1, Gehaeusemasse proportional zur Breite. */
/* ===== AM RECHNER — MacBook: 1,54:1, dünner dunkler Rand ================= */
.af-geraet[data-geraet="rechner"]:not(.nackt){max-width:min(980px, 100%);}
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-huelle{
  padding:1.02cqw 1.02cqw 1.122cqw;background:#1d1d1f;border-radius:1.735cqw;
  box-shadow:0 2.041cqw 5.102cqw rgba(0,0,0,.2), inset 0 0 0 0.102cqw rgba(255,255,255,.08);
}
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-fenster{aspect-ratio:1.54;border-radius:0.918cqw;border-color:transparent;box-shadow:none;}
/* Kameraaussparung: beim MacBook Pro rund 16 % der Bildbreite, unten gerundet.
   Sie sitzt IM Bild, nicht im Gehäuse — deshalb liegt sie über dem Fenster. */
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-insel{
  display:block;position:absolute;top:1.02cqw;left:50%;transform:translateX(-50%);
  width:16%;height:2.245cqw;background:#1d1d1f;
  border-radius:0 0 1.122cqw 1.122cqw;z-index:4;
}
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-insel::after{
  content:'';position:absolute;top:0.714cqw;left:50%;transform:translateX(-50%);
  width:0.612cqw;height:0.612cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #4a4a52, #16161a 70%);
}
/* Die Fensterleiste muss der Aussparung ausweichen. */
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-leiste{padding-top:1.531cqw;}

/* --- Die Basis: das Gehäuseunterteil ------------------------------------
   MacBook Pro 16": Gehäuse 35,57 cm breit, 1,68 cm hoch — die sichtbare
   Vorderkante ist also rund 4,4 % der Breite hoch. Sie steht seitlich etwas
   über dem Deckel, trägt mittig die Mulde zum Aufklappen und unten an den
   Außenseiten die beiden Standfüße. Der Verlauf geht von einer hellen
   Lichtkante an der Naht bis zum dunklen Boden. */
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-basis{
  display:block;position:relative;
  width:calc(100% + 7%);margin:0 -3.5%;
  /* Die Höhe folgt der Breite, damit das Verhältnis auf jedem Schirm gleich bleibt */
  aspect-ratio:30 / 1;
  border-radius:0.408cqw 0.408cqw 1.327cqw 1.327cqw;
  background:linear-gradient(180deg,
    #3e3e46 0%,      /* Naht zum Deckel, hellste Zone */
    #33333b 13%,
    #292930 45%,
    #1d1d22 82%,
    #141418 100%);   /* Boden */
  box-shadow:0 1.633cqw 3.061cqw rgba(0,0,0,.30),
             inset 0 0.102cqw 0 rgba(255,255,255,.13);
}
/* Die beiden Standfüße, unten an den Außenseiten */
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-basis::before{
  content:'';position:absolute;left:0;right:0;bottom:-5%;height:25%;
  background:
    linear-gradient(180deg,#0f0f13 0%,#07070a 100%) no-repeat 9% 0 / 7% 100%,
    linear-gradient(180deg,#0f0f13 0%,#07070a 100%) no-repeat 89% 0 / 7% 100%;
  border-radius:0 0 0.408cqw 0.408cqw;
}
/* Die Mulde zum Aufklappen, mittig in der Oberkante */
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-basis::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:16%;height:39%;
  background:linear-gradient(180deg,#5c5c68 0%,#4c4c57 44%,#3d3d47 100%);
  border-radius:0 0 0.816cqw 0.816cqw;
  box-shadow:inset 0 -0.204cqw 0.306cqw rgba(0,0,0,.34), 0 0.102cqw 0 rgba(0,0,0,.22);
}
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-leiste{display:flex;}
.af-geraet[data-geraet="rechner"]:not(.nackt) .af-seite{display:flex;}


.ws-schau .af-geraet.ws-geraet{width:93.45%;max-width:617px;}


/* Wissensdatenbanken: Die Texte bleiben im Seitenfluss, nur der Laptop begleitet sie. */
body:has(.ws-scroll){overflow-x:clip;}
#wissen.ws-scroll{padding:80px 0;}
.ws-scroll-fest.inner.weit{width:calc(100% - 48px);max-width:1120px;}
.ws-scroll-kopf{margin-bottom:40px;}
.ws-scroll-kopf h2{font-size:clamp(28px,3.2vw,44px);}
.ws-scroll-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,72px);}
.ws-scroll .ws-schau{position:sticky;top:max(100px,calc((100vh - 510px)/2));padding:20px 0;}
.ws-scroll .ws-schau .ws-geraet{width:93.45%;max-width:min(650px,calc((100vh - 220px)*1.38));}
.ws-scroll-erklaerung{min-width:0;}
.ws-scroll .ws-scroll-text{max-width:30ch;min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:60px 0;}
.ws-scroll .ws-satz{font-size:clamp(18px,1.7vw,23px);}
.ws-scroll .ws-hervor{margin-top:24px;}
.ws-scroll .ws-marke-feld{margin-bottom:20px;}
.ws-scroll [hidden]{display:none!important;}
.ws-scroll-schritte{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:20px auto 0;}
.ws-scroll-schritte button{font:500 11px var(--f);border:1px solid var(--line);background:transparent;color:var(--sub);padding:9px 12px;border-radius:30px;cursor:pointer;}
.ws-scroll-schritte button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff;}
.ws-scroll-schritte button:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;}
.ws-scroll-maus{position:absolute;left:0;top:0;width:2.6cqw;height:3.3cqw;z-index:8;pointer-events:none;filter:drop-shadow(0 .15cqw .15cqw #0004);transform-origin:top left;visibility:hidden;}
.ws-scroll-maus svg{display:block;width:100%;height:100%;}
.ws-scroll-maus span{position:absolute;left:-1cqw;top:-1cqw;width:2.8cqw;height:2.8cqw;border:.18cqw solid var(--akzent);border-radius:50%;opacity:0;}
.ws-scroll-maus.klick span{opacity:.7;}
@media(max-width:760px){
  #wissen.ws-scroll{padding:48px 0;}
  .ws-scroll-fest.inner.weit{width:calc(100% - 36px);}
  .ws-scroll-kopf{margin-bottom:20px;}
  .ws-scroll-kopf h2{font-size:28px;}
  .ws-scroll-layout{display:block;}
  .ws-scroll .ws-schau{top:60px;z-index:10;background:var(--bg2);padding:16px 0 12px;}
  .ws-scroll .ws-schau .ws-geraet{max-width:min(430px,calc((100svh - 350px)*1.3));}
  .ws-scroll .ws-scroll-text{min-height:65svh;max-width:none;padding:42px 8px;justify-content:center;}
  .ws-scroll .ws-satz{font-size:18px;}
  .ws-scroll .ws-hervor p{font-size:16px;}
  .ws-scroll .ws-seite{display:flex;}
  .ws-scroll .ws-bu{margin-top:10px;font-size:10px;}
  .ws-scroll-schritte{margin-top:12px;gap:4px;}
  .ws-scroll-schritte button{font-size:10px;padding:7px 9px;}
}
@media(max-height:540px){
  .ws-scroll .ws-schau{top:65px;}
  .ws-scroll .ws-schau .ws-geraet{max-width:330px;}
}
@media(prefers-reduced-motion:reduce){.ws-scroll-maus{display:none;}}
/* Navigation nutzt die Breite; der erste Text beginnt auf Hoehe des Laptops. */
nav{padding-inline:clamp(18px,2.5vw,48px);}
.ws-scroll-fest.inner.weit{width:calc(100% - clamp(36px,7vw,120px));max-width:1440px;}
@media(min-width:761px){
  .ws-scroll-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,5vw,90px);}
  .ws-scroll .ws-scroll-text{min-height:var(--ws-geraetehoehe,510px);padding:30px 0;margin-bottom:26vh;}
  .ws-scroll .ws-scroll-text:last-child{margin-bottom:0;}
  .ws-scroll .ws-schau .ws-geraet{max-width:min(820px,calc((100vh - 240px)*1.38));}
}

/* KI-System: aus der flexiblen Anwendung langsam zum ganzen Laptop. */
#hero.ki-intro{padding:0;margin-top:var(--nav-h);background:#08090b;color:#fff;}
.ki-intro-buehne{position:relative;display:flex;flex-direction:column;align-items:center;gap:40px;padding:60px 24px;overflow:hidden;}
.ki-intro-text{order:-1;text-align:center;max-width:880px;z-index:3;}
#hero.ki-intro h1{font-size:clamp(34px,4.6vw,66px);line-height:1.06;letter-spacing:-.045em;margin:0 0 28px;color:#fff;}
.ki-intro-text .eyebrow{color:#b9c7d9;margin-bottom:22px;}
.ki-intro-text>p{max-width:730px;margin:0 auto;font-size:clamp(16px,1.65vw,23px);line-height:1.55;color:#e4e7ed;}
.ki-intro-text .ki-intro-spruch{font-size:clamp(20px,2.4vw,32px);line-height:1.3;margin-top:28px;color:#fff;}
.ki-intro-weiter{display:inline-flex;align-items:center;gap:12px;color:#cbd0d8;font-size:12px;margin-top:26px;text-decoration:none;}
.ki-intro-weiter span{font-size:19px;}
.ki-intro .ki-intro-geraet.af-geraet{width:980px;max-width:90%;margin:0;flex:none;transform-origin:0 0;pointer-events:none;}
.ki-intro .ki-intro-schirm{color:#202024;}
.ki-intro-app{display:flex;flex:1;min-height:0;background:#fff;text-align:left;font-size:calc(1.35 * var(--ki-ui,1cqw));}
.ki-intro-seite{width:calc(21 * var(--ki-ui,1cqw));flex:none;display:flex;flex-direction:column;gap:calc(.65 * var(--ki-ui,1cqw));padding:calc(1.6 * var(--ki-ui,1cqw)) calc(1.1 * var(--ki-ui,1cqw));background:#f5f5f7;border-right:calc(.1 * var(--ki-ui,1cqw)) solid #e3e3e8;}
.ki-intro-seite>div:not(.ki-intro-marke):not(.ki-intro-konto){padding:calc(.8 * var(--ki-ui,1cqw)) calc(.6 * var(--ki-ui,1cqw));border-radius:calc(.65 * var(--ki-ui,1cqw));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(1.15 * var(--ki-ui,1cqw));}
.ki-intro-marke{display:flex;align-items:center;gap:calc(.8 * var(--ki-ui,1cqw));font-weight:650;margin-bottom:calc(.8 * var(--ki-ui,1cqw));}
.ki-intro-marke img{width:calc(2.5 * var(--ki-ui,1cqw));height:calc(2.5 * var(--ki-ui,1cqw));}
.ki-intro-neu{background:#fff;border:calc(.1 * var(--ki-ui,1cqw)) solid #d8d8de;margin-bottom:calc(1.2 * var(--ki-ui,1cqw));}
.ki-intro-seite small{font: calc(.8 * var(--ki-ui,1cqw)) var(--fm);color:#888891;margin-top:calc(1 * var(--ki-ui,1cqw));padding-left:calc(.6 * var(--ki-ui,1cqw));}
.ki-intro-gewaehlt{background:#fff;box-shadow:0 calc(.1 * var(--ki-ui,1cqw)) calc(.25 * var(--ki-ui,1cqw)) #00008;}
.ki-intro-konto{margin-top:auto;padding-top:calc(1.2 * var(--ki-ui,1cqw));border-top:calc(.1 * var(--ki-ui,1cqw)) solid #dddde3;font-size:calc(1.05 * var(--ki-ui,1cqw));display:flex;align-items:center;gap:calc(.8 * var(--ki-ui,1cqw));color:#777781;}
.ki-intro-konto span{background:var(--verlauf);color:white;border-radius:50%;width:calc(2.5 * var(--ki-ui,1cqw));height:calc(2.5 * var(--ki-ui,1cqw));display:grid;place-items:center;font-size:calc(.9 * var(--ki-ui,1cqw));}
.ki-intro-chat{flex:1;min-width:0;display:flex;flex-direction:column;}
.ki-intro-kopf{display:flex;align-items:center;justify-content:space-between;padding:calc(1.35 * var(--ki-ui,1cqw)) calc(1.8 * var(--ki-ui,1cqw));gap:calc(1 * var(--ki-ui,1cqw));border-bottom:calc(.1 * var(--ki-ui,1cqw)) solid #ededf0;font-size:calc(1.25 * var(--ki-ui,1cqw));}
.ki-intro-status{font:calc(.85 * var(--ki-ui,1cqw)) var(--fm);color:#74747c;background:#f5f5f7;border-radius:calc(.6 * var(--ki-ui,1cqw));padding:calc(.5 * var(--ki-ui,1cqw)) calc(.7 * var(--ki-ui,1cqw));}
.ki-intro-menue{display:none;}
.ki-intro-verlauf{flex:1;min-height:0;padding:calc(2.2 * var(--ki-ui,1cqw)) calc(3 * var(--ki-ui,1cqw));overflow:hidden;}
.ki-intro-frage{margin-left:calc(8 * var(--ki-ui,1cqw));background:#f2f3f6;border: calc(.1 * var(--ki-ui,1cqw)) solid #e6e8ec;border-radius:calc(1.2 * var(--ki-ui,1cqw));padding:calc(1.2 * var(--ki-ui,1cqw)) calc(1.5 * var(--ki-ui,1cqw));font-size:calc(1.35 * var(--ki-ui,1cqw));line-height:1.5;}
.ki-intro-antwort{margin-top:calc(2 * var(--ki-ui,1cqw));line-height:1.65;}
.ki-intro-absender{display:flex;align-items:center;gap:calc(.7 * var(--ki-ui,1cqw));font-weight:650;margin-bottom:calc(1.2 * var(--ki-ui,1cqw));}
.ki-intro-absender img{width:calc(2.2 * var(--ki-ui,1cqw));height:calc(2.2 * var(--ki-ui,1cqw));}
.ki-intro-antwort>p{margin:0 0 calc(1 * var(--ki-ui,1cqw));font-size:calc(1.4 * var(--ki-ui,1cqw));}
.ki-intro-beleg{margin-top:calc(1.6 * var(--ki-ui,1cqw));padding:calc(1.3 * var(--ki-ui,1cqw)) calc(1.5 * var(--ki-ui,1cqw));border:calc(.1 * var(--ki-ui,1cqw)) solid #cbdff4;border-left:calc(.3 * var(--ki-ui,1cqw)) solid var(--akzent);border-radius:calc(.8 * var(--ki-ui,1cqw));background:#f4f9ff;}
.ki-intro-beleg>span{display:block;font:calc(.8 * var(--ki-ui,1cqw)) var(--fm);color:var(--akzent2);letter-spacing:.05em;margin-bottom:calc(.5 * var(--ki-ui,1cqw));}
.ki-intro-beleg strong{font-size:calc(1.15 * var(--ki-ui,1cqw));}
.ki-intro-beleg p{font-size:calc(1 * var(--ki-ui,1cqw));color:#6e6e78;}
.ki-intro-beleg blockquote{font-size:calc(1.2 * var(--ki-ui,1cqw));margin:calc(.7 * var(--ki-ui,1cqw)) 0 0;padding:0;color:#454552;}
.ki-intro-notiz{font-size:calc(1.05 * var(--ki-ui,1cqw));color:#777781;margin-top:calc(1.4 * var(--ki-ui,1cqw));}
.ki-intro-eingabe{padding:calc(1.1 * var(--ki-ui,1cqw)) calc(2.2 * var(--ki-ui,1cqw)) calc(1.6 * var(--ki-ui,1cqw));}
.ki-intro-chips{display:flex;gap:calc(.5 * var(--ki-ui,1cqw));margin-bottom:calc(.6 * var(--ki-ui,1cqw));}
.ki-intro-chips span{border-radius:calc(2 * var(--ki-ui,1cqw));background:#f0f0f3;color:#777;font-size:calc(.85 * var(--ki-ui,1cqw));padding:calc(.25 * var(--ki-ui,1cqw)) calc(.7 * var(--ki-ui,1cqw));}
.ki-intro-feld{display:flex;align-items:center;gap:calc(1 * var(--ki-ui,1cqw));padding:calc(1 * var(--ki-ui,1cqw)) calc(1.4 * var(--ki-ui,1cqw));border:calc(.12 * var(--ki-ui,1cqw)) solid #dadce2;border-radius:calc(1.3 * var(--ki-ui,1cqw));color:#92929c;font-size:calc(1.3 * var(--ki-ui,1cqw));box-shadow:0 0 0 calc(.25 * var(--ki-ui,1cqw)) #007aff08;}
.ki-intro-feld b{margin-left:auto;background:var(--verlauf);color:#fff;border-radius:50%;width:calc(2.6 * var(--ki-ui,1cqw));height:calc(2.6 * var(--ki-ui,1cqw));text-align:center;line-height:calc(2.6 * var(--ki-ui,1cqw));font-size:calc(1.8 * var(--ki-ui,1cqw));}
.ki-intro-eingabe small{display:block;font:calc(.8 * var(--ki-ui,1cqw)) var(--fm);color:#92929c;margin-top:calc(.65 * var(--ki-ui,1cqw));}
.ki-intro-ausblick{text-align:center;max-width:760px;z-index:2;}
.ki-intro-ausblick h2{font-size:clamp(23px,2.7vw,36px);line-height:1.15;color:#fff;letter-spacing:-.03em;margin-bottom:14px;}
.ki-intro-ausblick h2 em{color:#85baff;font-style:normal;}
.ki-intro-ausblick p{font-size:clamp(15px,1.4vw,19px);line-height:1.5;color:#b5bac5;margin:0;}
.ki-intro-links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:18px;}
.ki-intro-links a{color:#85baff;font-size:15px;text-decoration:none;}
.ki-intro-links a:hover{text-decoration:underline;}
.ki-intro-ausblick>small{display:block;color:#747985;font-size:10px;margin-top:14px;}
/* Nur bei aktiver Animation wird die Szene festgehalten. Ohne JS bleibt alles lesbar. */
#hero.ki-intro.ki-intro-aktiv{height:var(--ki-strecke,500svh);}
.ki-intro-aktiv .ki-intro-buehne{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));padding:0;display:block;}
.ki-intro-aktiv .ki-intro-geraet.af-geraet{position:absolute;top:0;left:0;max-width:none;will-change:transform;}
.ki-intro-aktiv .ki-intro-text{position:absolute;top:50%;left:50%;width:min(880px,calc(100% - 48px));transform:translate(-50%,-50%);will-change:transform,opacity;}
.ki-intro-aktiv .ki-intro-ausblick{position:absolute;left:50%;top:0;width:min(760px,calc(100% - 48px));opacity:0;will-change:transform,opacity;}
@media(max-width:760px){
  #hero.ki-intro h1{font-size:clamp(30px,7vw,46px);margin-bottom:20px;}
  .ki-intro-umbruch{display:none;}
  .ki-intro-text .eyebrow{font-size:10px;margin-bottom:16px;}
  .ki-intro-text>p{font-size:15px;line-height:1.5;}
  .ki-intro-text .ki-intro-spruch{font-size:22px;margin-top:22px;}
  .ki-intro-seite{display:none;}
  .ki-intro-menue{display:block;font-size:1.8cqw;}
  .ki-intro-kopf{font-size:1.8cqw;}
  .ki-intro-frage,.ki-intro-antwort>p{font-size:1.9cqw;}
  .ki-intro-beleg strong{font-size:1.6cqw;}
  .ki-intro-beleg p,.ki-intro-beleg blockquote{font-size:1.5cqw;}
  .ki-intro-status{font-size:1.2cqw;}
}
@media(max-height:650px) and (min-width:761px){
  #hero.ki-intro h1{font-size:38px;margin-bottom:16px;}
  .ki-intro-text>p{font-size:16px;}
  .ki-intro-text .ki-intro-spruch{font-size:23px;margin-top:18px;}
  .ki-intro-text .eyebrow{margin-bottom:12px;}
  .ki-intro-weiter{margin-top:14px;}
}
@media print{#hero.ki-intro{background:#fff;color:#111;}#hero.ki-intro h1,.ki-intro-text>p,.ki-intro-text .ki-intro-spruch,.ki-intro-ausblick h2{color:#111;}}
/* Flexible Anwendung: voller Bereich am Anfang, Laptopformat beim Zoom. */
#hero.ki-intro{overflow:visible;}
.ki-intro-text .ki-intro-spruch strong{color:inherit;}
.ki-intro-aktiv .ki-intro-buehne{height:calc(100dvh - var(--nav-h));}
.ki-intro .ki-intro-schirm{min-height:0;}
.ki-intro .ki-intro-schirm .af-leiste{flex-shrink:0;}
.ki-intro-app{width:100%;}
.ki-intro-kopf,.ki-intro-eingabe{flex-shrink:0;}
.ki-intro-kopf>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ki-intro-status{flex-shrink:0;white-space:nowrap;}
.ki-intro-frage,.ki-intro-antwort{max-width:calc(86 * var(--ki-ui,1cqw));margin-inline:auto;}
.ki-intro-eingabe{width:100%;max-width:calc(92 * var(--ki-ui,1cqw));margin-inline:auto;}
.ki-intro-text>.eyebrow{justify-content:center;}

/* Heller Einstieg und native Schriftzeichnung ohne skalierte Grafikschicht. */
#hero.ki-intro{background:var(--bg2);color:var(--ink);}
#hero.ki-intro h1,.ki-intro-text .ki-intro-spruch,.ki-intro-ausblick h2{color:var(--ink);}
.ki-intro-text>p,.ki-intro-ausblick p{color:var(--body);}
.ki-intro-text .eyebrow,.ki-intro-ausblick h2 em,.ki-intro-links a{color:var(--akzent);}
.ki-intro-weiter,.ki-intro-ausblick>small{color:var(--sub);}

.ki-intro-aktiv .ki-intro-geraet.af-geraet{transform:none;will-change:auto;}
.ki-intro .ki-intro-schirm{border-width:0;}
.ki-intro .ki-intro-schirm .af-leiste{border-bottom-width:.102cqw;}

/* Dunkle Einleitung ueber der Anwendung, heller Hintergrund beim Herauszoomen. */
.ki-intro-dunkel{display:none;}
.ki-intro-aktiv .ki-intro-dunkel{display:block;position:absolute;inset:0;background:#060810;opacity:.78;z-index:1;pointer-events:none;}
#hero.ki-intro-aktiv h1,.ki-intro-aktiv .ki-intro-spruch{color:#fff;}
.ki-intro-aktiv .ki-intro-text>p{color:#e4e7ed;}
.ki-intro-aktiv .ki-intro-text .ki-intro-spruch{color:#fff;}
.ki-intro-aktiv .ki-intro-text .eyebrow{color:#b9c7d9;}
.ki-intro-aktiv .ki-intro-weiter{color:#cbd0d8;}
@media print{.ki-intro-dunkel{display:none!important;}}

/* Die Menueleiste folgt exakt derselben Abdunklung wie der Einstieg. */
body[data-seite="system"]>nav.ki-intro-nav::after{content:"";position:absolute;inset:0 0 -1px;background:#060810;opacity:var(--ki-abdunklung,0);z-index:1;pointer-events:none;}
@media print{body[data-seite="system"]>nav.ki-intro-nav::after{display:none;}}

/* Nur der Leistenhintergrund liegt unter der Abdunklung, die Bedienelemente darueber. */
body[data-seite="system"]>nav.ki-intro-nav>*{position:relative;z-index:2;}

/* Die Marke bleibt auch vor der dunklen Leiste klar erkennbar. */
body[data-seite="system"]>nav.ki-intro-nav .nav-logo-img{background:transparent;}
body[data-seite="system"]>nav.ki-intro-nav .nav-name{color:#000;}


/* Originales Logo: der graue Ring bleibt in allen Animationsphasen unveraendert. */
body[data-seite="system"]>nav .nav-logo-img{filter:none;opacity:1;}

/* Gleiche Farbtoenung wie beim Logo in der abgedunkelten Anwendung. */
body[data-seite="system"]>nav.ki-intro-nav .nav-logo-img{filter:brightness(calc(1 - var(--ki-abdunklung,0)));}

/* Bei offenem Handy-Menü steht die Leiste vor Weiß, also ohne Abdunklung. */
body[data-seite="system"].menu-offen>nav.ki-intro-nav::after{opacity:0;}
body[data-seite="system"].menu-offen>nav.ki-intro-nav .nav-logo-img{filter:none;}

/* Kein heller Aussenrand zwischen festem Menue und Szene beim Safari-Zurueckfedern. */
#hero.ki-intro.ki-intro-aktiv{margin-top:0;padding-top:var(--nav-h);}
html:has(#hero.ki-intro-aktiv),body:has(#hero.ki-intro-aktiv){overscroll-behavior-y:none;}

/* System-Einstieg: klare Nutzenbotschaft, blauer Akzent und leiser Leitsatz. */
#hero.ki-intro h1 em{font-style:normal;color:var(--akzent);}
#hero.ki-intro-aktiv h1 em,#hero.ki-intro-aktiv .ki-intro-text .eyebrow{color:var(--akzent3);}
#hero.ki-intro .ki-intro-text .ki-intro-spruch{font-size:clamp(14px,1.2vw,16px);line-height:1.5;font-weight:400;letter-spacing:.01em;color:var(--sub);margin-top:26px;}
#hero.ki-intro-aktiv .ki-intro-text .ki-intro-spruch{color:#aeb6c2;}
.ki-intro-spruch span{white-space:nowrap;}

/* Quellen erklaeren: im Anschluss an den Laptop, ohne die Scrollbuehne zu ueberladen. */
.ki-quellen{background:var(--bg2);padding:24px 24px 88px;}
.ki-quellen-inhalt{max-width:760px;margin:0 auto;}
.ki-quellen .eyebrow{margin-bottom:16px;}
.ki-quellen h2{font-size:clamp(27px,3vw,40px);line-height:1.15;letter-spacing:-.03em;margin-bottom:38px;}
.ki-quellen h2 em{font-style:normal;color:var(--akzent);}
.ki-quellen-schritt{margin-top:28px;}
.ki-quellen h3{font-size:20px;line-height:1.3;margin-bottom:9px;}
.ki-quellen p{font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:var(--body);}
.ki-quellen .ki-quellen-nutzen{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.ki-quellen .ki-intro-links{justify-content:flex-start;margin-top:26px;}
.ki-quellen .ki-intro-links a{color:var(--akzent);}

/* Systemgeschichte: Server, Wissensgrundlage, pruefbare Antwort, gemeinsames Wissen. */
.ki-intro-ausblick>.eyebrow{justify-content:center;margin-bottom:12px;}
.ki-ablauf{padding:88px 24px;}
.ki-ablauf-wissen{background:var(--bg2);padding-top:32px;}
.ki-ablauf-quellen{background:var(--bg);}
.ki-ablauf-inhalt{max-width:1120px;margin:0 auto;}
.ki-ablauf h2{font-size:clamp(30px,3.5vw,48px);line-height:1.12;letter-spacing:-.035em;max-width:900px;margin-bottom:26px;}
.ki-ablauf h2 em{font-style:normal;color:var(--akzent);}
.ki-ablauf .eyebrow{margin-bottom:16px;}
.ki-ablauf-lead{max-width:860px;font-size:clamp(17px,1.5vw,20px);line-height:1.65;}
.ki-ablauf-lead+.ki-ablauf-lead{margin-top:18px;}
.ki-ablauf-weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;list-style:none;padding:0;margin:42px 0;}
.ki-ablauf-weg li{border-top:1px solid var(--line);padding-top:22px;}
.ki-ablauf-zahl{display:block;font:13px var(--fm);color:var(--akzent);margin-bottom:14px;}
.ki-ablauf h3{font-size:21px;line-height:1.25;margin-bottom:12px;color:var(--ink);}
.ki-ablauf-weg p{font-size:16px;line-height:1.65;}
.ki-ablauf-uebergang{max-width:860px;font-size:clamp(17px,1.5vw,20px);line-height:1.6;margin-top:44px;}
.ki-ablauf-pruefung{max-width:860px;margin:46px 0 0;}
.ki-ablauf-pruefung>p{font-size:clamp(17px,1.5vw,20px);line-height:1.65;margin-top:18px;}
.ki-ablauf-pruefung>.ki-ablauf-kernsatz{border-left:3px solid var(--akzent);padding-left:22px;margin:28px 0;font-size:clamp(21px,2.2vw,28px);line-height:1.35;color:var(--akzent);}
.ws-scroll-kopf>.ki-ablauf-ws-lead{max-width:850px;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--body);margin-top:22px;}
/* Die Quelle laesst sich ohne JavaScript mit Maus, Touch und Tastatur oeffnen. */
.ki-beleg-demo{max-width:900px;margin:38px auto 0;border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:var(--bg2);box-shadow:0 10px 36px #1d1d1f08;}
.ki-beleg-demo>summary{display:block;padding:28px 32px;list-style:none;cursor:pointer;background:#fff;}
.ki-beleg-demo>summary::-webkit-details-marker{display:none;}
.ki-beleg-demo>summary:focus-visible{outline:3px solid var(--akzent);outline-offset:-4px;}
.ki-beleg-frage{display:block;width:fit-content;max-width:90%;margin:0 0 26px auto;padding:14px 18px;border-radius:14px;background:var(--bg2);font-size:16px;line-height:1.5;}
.ki-beleg-absender{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;margin-bottom:12px;}
.ki-beleg-antwort{display:block;font-size:18px;line-height:1.6;max-width:700px;}
.ki-beleg-quelle{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:22px;padding:14px 16px;border:1px solid var(--aline);border-radius:10px;background:var(--afaint);color:var(--akzent2);font-size:14px;line-height:1.4;}
.ki-beleg-quelle small{display:block;color:var(--sub);font-size:12px;margin-top:4px;}
.ki-beleg-oeffnen,.ki-beleg-schliessen{flex-shrink:0;font-weight:600;}
.ki-beleg-demo .ki-beleg-schliessen{display:none;}
.ki-beleg-demo[open] .ki-beleg-oeffnen{display:none;}
.ki-beleg-demo[open] .ki-beleg-schliessen{display:block;}
.ki-beleg-dokument{border-top:1px solid var(--line2);padding:0 28px 28px;background:#eceef1;}
.ki-beleg-werkzeug{display:flex;justify-content:space-between;gap:20px;padding:17px 2px;font:12px var(--fm);color:var(--sub);}
.ki-beleg-papier{max-width:700px;margin:auto;padding:38px 44px;background:#fff;border:1px solid #e0e1e5;box-shadow:0 5px 20px #1d1d1f08;}
.ki-beleg-papierkopf{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--quiet);letter-spacing:.08em;padding-bottom:20px;border-bottom:1px solid var(--line2);margin-bottom:26px;}
.ki-beleg-papier h3{font-size:24px;margin-bottom:8px;}
.ki-beleg-papier p{font-size:16px;line-height:1.7;margin-top:18px;}
.ki-beleg-papier .ki-beleg-abschnitt{font-weight:600;color:var(--ink);margin-top:0;}
.ki-beleg-papier mark{background:#dcebff;color:#153858;padding:3px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.ki-beleg-legende{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);margin-top:26px;}
.ki-beleg-legende>span{width:10px;height:10px;flex-shrink:0;background:#dcebff;border:1px solid #aacbf7;}
.ki-beleg-hinweis{max-width:900px;margin:12px auto 0;font-size:12px;line-height:1.5;color:var(--sub);}
@media(max-width:760px){
  .ki-ablauf{padding:56px 24px;}
  .ki-ablauf-wissen{padding-top:24px;}
  .ki-ablauf-weg{grid-template-columns:1fr;gap:24px;margin:30px 0;}
  .ki-beleg-demo>summary{padding:20px;}
  .ki-beleg-quelle{align-items:flex-start;flex-direction:column;gap:10px;overflow-wrap:anywhere;}
  .ki-beleg-dokument{padding:0 12px 16px;}
  .ki-beleg-werkzeug{font-size:10px;gap:8px;overflow-wrap:anywhere;}
  .ki-beleg-papier{padding:24px 20px;}
  .ki-beleg-papierkopf{font-size:9px;}
}

/* Handy-Einstieg: dieselbe Scrollsequenz mit schmaler, lesbarer Programmoberflaeche. */
@media(max-width:760px){
  .ki-intro-aktiv .ki-intro-text,.ki-intro-aktiv .ki-intro-ausblick{width:calc(100% - 36px);}
  #hero.ki-intro-aktiv h1{font-size:clamp(28px,7.4vw,44px);line-height:1.1;margin-bottom:20px;}
  .ki-intro-aktiv .ki-intro-kopf{font-size:calc(1.4 * var(--ki-ui,1cqw));padding:calc(1.3 * var(--ki-ui,1cqw)) calc(1.6 * var(--ki-ui,1cqw));}
  .ki-intro-aktiv .ki-intro-menue{font-size:calc(2 * var(--ki-ui,1cqw));}
  .ki-intro-aktiv .ki-intro-status{font-size:calc(1 * var(--ki-ui,1cqw));}
  .ki-intro-aktiv .ki-intro-eingabe{padding-inline:calc(1.6 * var(--ki-ui,1cqw));}
  .ki-intro-aktiv .ki-intro-eingabe small{font-size:calc(.95 * var(--ki-ui,1cqw));}
  .ki-intro-aktiv .ki-intro-ausblick h2{font-size:clamp(22px,5.8vw,28px);}
  .ki-intro-aktiv .ki-intro-ausblick>.eyebrow{font-size:10px;margin-bottom:10px;}
  .ki-intro-aktiv .ki-intro-ausblick>p{font-size:15px;line-height:1.5;}
}
@media(max-width:760px) and (max-height:640px){
  #hero.ki-intro-aktiv h1{font-size:clamp(26px,7.2vw,32px);margin-bottom:16px;}
  .ki-intro-aktiv .ki-intro-text>p{font-size:14px;line-height:1.45;}
  .ki-intro-aktiv .ki-intro-text>.eyebrow{margin-bottom:12px;}
  #hero.ki-intro-aktiv .ki-intro-text .ki-intro-spruch{margin-top:18px;}
  .ki-intro-aktiv .ki-intro-weiter{margin-top:16px;}
}

/* Der laengere blaue Zusatz bleibt auch im Handy-Einstieg gut lesbar. */
#hero.ki-intro h1 em{display:block;font-size:.64em;line-height:1.2;margin-top:12px;}

/* Der blaue Zusatz steht auf Tablet und Desktop in einer Zeile. */
@media(min-width:761px){
  #hero.ki-intro h1 em{font-size:clamp(18px,2.1vw,28px);line-height:1.3;letter-spacing:-.02em;white-space:nowrap;}
}

/* Direkt unter dem Laptop folgt der erklaerende Absatz ohne zusaetzliche Ueberschrift. */
.ki-intro-ausblick>p{text-align:left;}
.ki-intro-ausblick>p>strong{font-weight:600;color:var(--ink);}

/* Die Wissenseinfuehrung steht weiss zwischen dem Laptop-Einstieg und der grauen Wissensanimation. */
.ki-ablauf-wissen{background:var(--bg);padding-top:88px;}
@media(max-width:760px){
  .ki-ablauf-wissen{padding-top:56px;}
}

/* Stabile Scrollszenen: Browserleisten duerfen die Abschnitte nicht verschieben. */
.ki-intro-aktiv .ki-intro-buehne{height:calc(100svh - var(--nav-h));}
#hero.ki-intro,#wissen.ws-scroll{overflow-anchor:none;}
.ws-scroll-mass{position:absolute;width:0;height:100svh;overflow:hidden;visibility:hidden;pointer-events:none;}
@media(min-width:761px){
  .ws-scroll .ws-schau{top:max(100px,calc((100svh - 510px)/2));}
  .ws-scroll .ws-schau .ws-geraet{max-width:min(820px,calc((100svh - 240px)*1.38));}
  .ws-scroll .ws-scroll-text{margin-bottom:26svh;}
  .ws-scroll .ws-scroll-text:last-child{margin-bottom:0;}
}
@media(min-width:761px) and (max-height:540px){
  .ws-scroll .ws-schau{top:65px;}
  .ws-scroll .ws-schau .ws-geraet{max-width:330px;}
}

/* Die sichtbare Anwendung fuellt den Viewport; nur die Scrollstrecke bleibt stabil. */
.ki-intro-mass{position:absolute;width:0;height:calc(100svh - var(--nav-h));overflow:hidden;visibility:hidden;pointer-events:none;}
.ki-intro-mass-gross{height:calc(100lvh - var(--nav-h));}
.ki-intro-aktiv .ki-intro-buehne{height:calc(100dvh - var(--nav-h));}

/* Der Kernsatz schliesst die Erklaerung in dezenter Absatzgroesse ab. */
#warum .ki-ablauf-pruefung>.ki-ablauf-kernsatz{font-size:clamp(17px,1.5vw,20px);line-height:1.5;padding-left:16px;margin:22px 0;}

/* Die Scrollvorfuehrung zeigt den Weg vom neuen Chat zur gewaehlten Datenbank. */
#wissen .ws-neuer-chat{display:flex;align-items:center;gap:.7cqw;padding:.9cqw .8cqw;margin-bottom:1.5cqw;border:1px solid var(--line);border-radius:.7cqw;background:#fff;font-size:1.2cqw;color:var(--ink);white-space:nowrap;}
#wissen .ws-neuer-chat>span{font-size:1.5cqw;line-height:1;}
#wissen .ws-chat-eingabe{position:absolute;left:16px;right:16px;bottom:14px;}
#wissen .ws-chat-feld{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 1px 5px #00000005;}
#wissen .ws-chat-datenbank{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:6px;color:var(--sub);}
#wissen .ws-chat-datenbank svg{width:20px;height:20px;}
#wissen .ws-chat-datenbank.an{color:var(--akzent);background:var(--asoft);}
#wissen .ws-chat-platzhalter{flex:1;font-size:12px;color:var(--quiet);}
#wissen .ws-chat-senden{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--akzent);color:#fff;font-size:21px;line-height:1;}
#wissen .ws-chat-hinweis{font:8px var(--fm);color:var(--quiet);margin:8px 2px 0;}
#wissen .ws-chat-auswahl{display:flex;align-items:center;gap:6px;width:fit-content;padding:5px 8px;margin-bottom:7px;border:1px solid var(--aline);border-radius:7px;background:var(--afaint);font-size:10px;color:var(--ink);}
#wissen .ws-chat-auswahl>span{color:var(--akzent);}
#wissen .ws-chat-dialog{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#1d1d1f18;}
#wissen .ws-chat-dialog .ws-dialog{width:380px;max-width:100%;margin:0;padding:18px;background:#fff;box-shadow:0 10px 32px #0002;}
#wissen .ws-chat-dialog .ws-dialog-eintrag{display:flex;align-items:center;gap:6px;padding:11px 10px;}
#wissen .ws-chat-dialog .ws-dialog-eintrag.an{border-color:var(--akzent);background:var(--afaint);}
#wissen .ws-chat-haken{margin-left:auto;width:14px;flex:none;color:var(--akzent);visibility:hidden;}
#wissen .ws-dialog-eintrag.an .ws-chat-haken{visibility:visible;}

/* Einheitliche Programmoberflaeche nach der bestehenden Buerovorschau.
   Die Masse entsprechen dem 980px-Referenzgeraet. Im Einstieg bleibt die
   Schrift beim Vollbild nativ gerendert; im Laptop skaliert alles gemeinsam. */
body[data-seite="system"] .sp-programm{--sp-ui:var(--ki-ui,1cqw);font:400 calc(1.378 * var(--sp-ui))/1.4 var(--f);color:var(--ink);text-align:left;}
.sp-programm .sp-seite{display:flex;flex-direction:column;flex:none;width:calc(21.633 * var(--sp-ui));max-width:22.1%;min-width:0;padding:calc(1.224 * var(--sp-ui)) calc(1.02 * var(--sp-ui));gap:calc(.204 * var(--sp-ui));background:var(--bg2);border-right:calc(.102 * var(--sp-ui)) solid var(--line2);}
.sp-programm .sp-marke{display:flex;align-items:center;gap:calc(.816 * var(--sp-ui));padding:calc(.408 * var(--sp-ui)) calc(.816 * var(--sp-ui)) calc(1.224 * var(--sp-ui));font-size:calc(1.378 * var(--sp-ui));font-weight:600;white-space:nowrap;}
.sp-programm .sp-marke img{width:calc(2.041 * var(--sp-ui));height:calc(2.041 * var(--sp-ui));border-radius:22%;flex:none;}
.sp-programm .sp-neu{display:block;font-size:calc(1.276 * var(--sp-ui));font-weight:500;line-height:1.4;color:var(--ink);background:#fff;border:calc(.102 * var(--sp-ui)) solid var(--line);border-radius:calc(.816 * var(--sp-ui));padding:calc(.714 * var(--sp-ui)) calc(1.122 * var(--sp-ui));margin:0 0 calc(1.224 * var(--sp-ui));white-space:nowrap;}
#wissen .sp-neu.ws-neuer-chat{display:block;font-size:calc(1.276 * var(--sp-ui));padding:calc(.714 * var(--sp-ui)) calc(1.122 * var(--sp-ui));margin:0 0 calc(1.224 * var(--sp-ui));border-width:calc(.102 * var(--sp-ui));border-radius:calc(.816 * var(--sp-ui));}
.sp-programm .sp-gruppe{font:calc(1.02 * var(--sp-ui))/1.4 var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--sub);padding:calc(1.02 * var(--sp-ui)) calc(.816 * var(--sp-ui)) calc(.51 * var(--sp-ui));}
.sp-programm .sp-eintrag{font-size:calc(1.276 * var(--sp-ui));color:var(--body);padding:calc(.714 * var(--sp-ui)) calc(.918 * var(--sp-ui));border-radius:calc(.714 * var(--sp-ui));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-programm .sp-konto{display:flex;align-items:center;gap:calc(.816 * var(--sp-ui));margin-top:auto;padding:calc(1.224 * var(--sp-ui)) calc(.816 * var(--sp-ui)) calc(.204 * var(--sp-ui));border-top:calc(.102 * var(--sp-ui)) solid var(--line);font-size:calc(1.224 * var(--sp-ui));color:var(--sub);}
.sp-programm .sp-konto>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-programm .sp-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:calc(2.347 * var(--sp-ui));height:calc(2.347 * var(--sp-ui));border-radius:50%;font-size:calc(.969 * var(--sp-ui));font-weight:700;background:linear-gradient(135deg,#5ac8fa,#007aff);color:#fff;}
.sp-programm .sp-kopf{display:flex;align-items:center;justify-content:space-between;flex:none;gap:calc(1.224 * var(--sp-ui));padding:calc(1.122 * var(--sp-ui)) calc(1.633 * var(--sp-ui));border-bottom:calc(.102 * var(--sp-ui)) solid var(--line2);}
.sp-programm .sp-titel{font-size:calc(1.429 * var(--sp-ui));font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-programm .sp-status{display:flex;align-items:center;gap:calc(.612 * var(--sp-ui));flex:none;font:calc(1.122 * var(--sp-ui))/1.4 var(--fm);color:var(--sub);background:var(--bg2);padding:calc(.408 * var(--sp-ui)) calc(1.02 * var(--sp-ui));border-radius:calc(.816 * var(--sp-ui));white-space:nowrap;}
.sp-programm .sp-status i{width:calc(.612 * var(--sp-ui));height:calc(.612 * var(--sp-ui));border-radius:50%;background:var(--blau);}
/* „Lokal“-Hinweis in den Programmfenstern: Punkt auf jeder Seite blau. */
.af-modell .pulse,.sz-p-status .pulse{background:var(--blau);}
.sp-programm .sp-verlauf{flex:1;min-height:0;}
.sp-programm .sp-eingabe{flex:none;padding:calc(1.02 * var(--sp-ui)) calc(1.633 * var(--sp-ui)) calc(1.429 * var(--sp-ui));margin-top:auto;}
.sp-programm .sp-vorlagen{display:flex;align-items:center;gap:calc(.408 * var(--sp-ui));margin-bottom:calc(.612 * var(--sp-ui));}
.sp-programm .sp-vorlagen>span{padding:calc(.235 * var(--sp-ui)) calc(.673 * var(--sp-ui));border-radius:100px;background:#0000000d;color:var(--sub);font-size:calc(.786 * var(--sp-ui));font-weight:600;line-height:1.4;white-space:nowrap;}
.sp-programm .sp-zeile{display:flex;align-items:center;gap:calc(.918 * var(--sp-ui));padding:calc(.918 * var(--sp-ui)) calc(1.327 * var(--sp-ui));border:calc(.102 * var(--sp-ui)) solid var(--aline);border-radius:calc(1.429 * var(--sp-ui));background:#fff;box-shadow:0 0 0 calc(.306 * var(--sp-ui)) var(--afaint);}
.sp-programm .sp-werkzeuge{display:flex;align-items:center;gap:calc(.816 * var(--sp-ui));flex:none;color:var(--sub);}
.sp-programm .sp-werkzeuge svg{display:block;width:calc(1.735 * var(--sp-ui));height:calc(1.735 * var(--sp-ui));opacity:.45;}
.sp-programm .sp-datenbank{display:flex;align-items:center;justify-content:center;}
#wissen .sp-datenbank.ws-chat-datenbank{width:calc(1.735 * var(--sp-ui));height:calc(1.735 * var(--sp-ui));border-radius:0;background:transparent;}
#wissen .sp-datenbank.ws-chat-datenbank svg{width:100%;height:100%;}
#wissen .sp-datenbank.an svg{opacity:1;color:var(--akzent);}
.sp-programm .sp-feld{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(1.378 * var(--sp-ui));line-height:1.35;color:var(--sub);}
.sp-programm .sp-senden{display:flex;align-items:center;justify-content:center;flex:none;width:calc(2.959 * var(--sp-ui));height:calc(2.959 * var(--sp-ui));border-radius:50%;background:linear-gradient(180deg,#4da6ff,#007aff);color:#fff;box-shadow:0 calc(.204 * var(--sp-ui)) calc(.612 * var(--sp-ui)) #007aff40;}
.sp-programm .sp-senden svg{width:calc(1.531 * var(--sp-ui));height:calc(1.531 * var(--sp-ui));}
.sp-programm .sp-fuss{display:flex;align-items:center;justify-content:space-between;gap:calc(1.02 * var(--sp-ui));padding:calc(.714 * var(--sp-ui)) calc(.408 * var(--sp-ui)) 0;font:calc(1.071 * var(--sp-ui))/1.4 var(--fm);color:var(--sub);white-space:nowrap;}
#wissen .sp-quelle.ws-chat-auswahl{display:flex;align-items:center;gap:calc(.612 * var(--sp-ui));width:auto;padding:0;margin:calc(.816 * var(--sp-ui)) 0 0;border:0;border-radius:0;background:none;font-size:calc(1.02 * var(--sp-ui));color:var(--akzent2);}
#wissen .sp-quelle>svg{width:calc(1.327 * var(--sp-ui));height:calc(1.327 * var(--sp-ui));flex:none;}
#wissen .sp-quelle i{font-size:.85em;font-style:normal;padding:.1em .4em;background:var(--asoft);border-radius:.3em;}

/* Auch die Einstellungsansichten nutzen echte, proportionale Schriftmasse. */
#wissen .ws-scroll-bild{width:100%;height:100%;padding:1.429cqw 1.633cqw;transform:none;}
#wissen .ws-scroll-bild[data-schritt="2"]{display:flex;flex-direction:column;padding:0;}
#wissen .ws-reiter{gap:.306cqw;padding-bottom:.816cqw;margin-bottom:1.02cqw;}
#wissen .ws-reiter span{font-size:1.02cqw;padding:.408cqw .816cqw;border-radius:.612cqw;}
#wissen .ws-ein-titel{font-size:1.429cqw;margin-bottom:.408cqw;}
#wissen .ws-ein-text{font-size:1.122cqw;margin-bottom:.918cqw;}
#wissen .ws-knopf{font-size:1.122cqw;padding:.612cqw 1.224cqw;border-radius:.714cqw;margin-bottom:1.02cqw;}
#wissen .ws-liste{gap:.714cqw;}
#wissen .ws-eintrag{gap:1.02cqw;padding:.816cqw 1.122cqw;border-width:.102cqw;border-radius:.816cqw;}
#wissen .ws-eintrag-name{font-size:1.224cqw;gap:.612cqw;}
#wissen .ws-eintrag-meta{font-size:1.02cqw;margin-top:.204cqw;}
#wissen .ws-marke{font-size:.918cqw;padding:.204cqw .612cqw;border-radius:.408cqw;}
#wissen .ws-muell svg{width:1.327cqw;height:1.327cqw;}
#wissen .ws-ablage{margin-top:1.02cqw;padding:.918cqw 1.224cqw;border-width:.153cqw;border-radius:.918cqw;font-size:1.02cqw;}
#wissen .ws-ablage i{font-size:.969cqw;}
#wissen .ws-chat-dialog{padding:2.449cqw;}
#wissen .ws-chat-dialog .ws-dialog{width:46cqw;padding:1.837cqw;border-width:.102cqw;border-radius:1.02cqw;box-shadow:0 1.02cqw 3.265cqw #0002;}
#wissen .ws-dialog-kopf{font-size:1.276cqw;margin-bottom:1.02cqw;}
#wissen .ws-dialog-kopf span{font-size:1.122cqw;}
#wissen .ws-chat-dialog .ws-dialog-eintrag{font-size:1.122cqw;gap:.612cqw;padding:1.122cqw 1.02cqw;border-width:.102cqw;border-radius:.714cqw;}
#wissen .ws-dialog-eintrag+.ws-dialog-eintrag{margin-top:.51cqw;}
#wissen .ws-chat-haken{width:1.429cqw;}
.sp-programm .sp-fuss>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;}
/* Schmale Ansicht: Im Vollbild sieht die Anwendung aus wie auf dem Handy, ohne
   Chat-Seitenleiste. Beim Herauszoomen zum Laptop faehrt die Seitenleiste auf.
   system-intro.js setzt --ki-seite von 0 (Vollbild) bis 1 (Laptop). */
.ki-intro-app.sp-programm .sp-seite{width:calc(21.633 * var(--sp-ui) * var(--ki-seite,1));max-width:calc(var(--ki-seite-max,22.1%) * var(--ki-seite,1));padding-inline:calc(1.02 * var(--sp-ui) * var(--ki-seite,1));overflow:hidden;opacity:var(--ki-seite,1);}
@media(max-width:760px){
  .ki-intro-app.sp-programm{--ki-seite-max:38%;}
}

/* KI-System ab Vorlagen: Nutzen, Zugang und Einstieg.
   Eigener Praefix begrenzt die Regeln auf diese Abschnitte.
   Die statischen Geraete verwenden die vorhandenen AF-Gehaeuse ohne Demo-Skript. */
.sy-vorlagen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,64px);align-items:center;margin-top:48px;}
.sy-nutzenpunkt{display:flex;gap:18px;padding:24px 0;border-top:1px solid var(--line2);}
.sy-nutzenpunkt:first-child{padding-top:0;border-top:0;}
.sy-nutzenpunkt:last-child{padding-bottom:0;}
.sy-nummer{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--asoft);color:var(--akzent);font:600 12px/1 var(--fm);}
.sy-nutzenpunkt h3{font-size:19px;margin:3px 0 9px;}
.sy-nutzenpunkt p{font-size:15px;line-height:1.7;color:var(--sub);margin:0;}
.sy-vorlagenbild{min-width:0;margin:0;}
.sy-text-bild{margin-top:0;}
.sy-vorlagentext .lead{margin-left:0;margin-right:0;}
.sy-app-ausschnitt{padding:22px;background:var(--bg2);border:1px solid var(--line2);border-radius:20px;}
.sy-app-titel{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:24px;color:var(--ink);}
.sy-app-punkt{width:7px;height:7px;border-radius:50%;background:var(--akzent);}
.sy-app-hinweis{margin-left:auto;font-size:11px;font-weight:400;color:var(--sub);}
.sy-vorlagenmenue{padding:5px;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 8%,transparent);}
.sy-menuezeile{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:center;padding:12px 10px;border-radius:6px;font-size:12px;line-height:1.4;color:var(--ink);}
.sy-gewaehlt{background:var(--bg2);}
.sy-befehl{font:600 11px/1.5 var(--fm);color:var(--akzent);overflow-wrap:anywhere;}
.sy-chatfeld{display:flex;align-items:center;gap:3px;padding:13px 14px;margin-top:9px;background:var(--bg);border:1px solid var(--line);border-radius:12px;font:16px/1 var(--fm);color:var(--ink);}
.sy-eingabecursor{height:17px;border-left:1px solid var(--akzent);}
.sy-sendepfeil{display:flex;align-items:center;justify-content:center;margin-left:auto;width:27px;height:27px;border-radius:50%;color:var(--bg);background:var(--akzent);}
.sy-app-unterschrift{font-size:11px;line-height:1.5;text-align:center;color:var(--sub);margin:12px 0 0;}
.sy-vorlagenschritte{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 9px;margin-top:18px;font-size:11px;line-height:1.6;color:var(--sub);}
.sy-vorlagenschritte span[aria-hidden]{color:var(--akzent);}
#zugang .sy-geraetegruppe{display:grid;grid-template-columns:3.8fr 2.6fr 1.05fr 2.7fr;gap:24px;align-items:end;margin:56px 0 38px;padding:16px 12px 0;}
#zugang .sy-geraeteplatz{min-width:0;margin:0;}
#zugang .sy-geraeteplatz figcaption{text-align:center;margin-top:24px;font-size:13px;color:var(--sub);}
#zugang .sy-geraet.af-geraet{width:100%;max-width:100%;}
#zugang .sy-geraet .af-fenster{border:0;padding:0;}
#zugang .sy-geraet .af-huelle{background:var(--ink);}
#zugang .sy-geraet[data-geraet="tablet"] .af-huelle{padding:1.944cqw;border-radius:4.167cqw;box-shadow:0 2.5cqw 6.389cqw color-mix(in srgb,var(--ink) 20%,transparent);}
#zugang .sy-geraet[data-geraet="tablet"] .af-fenster{border-radius:2.361cqw;}
#zugang .sy-geraet[data-geraet="handy"] .af-huelle{padding:3.416cqw;border-radius:16.15cqw;box-shadow:0 6.21cqw 14.9cqw color-mix(in srgb,var(--ink) 20%,transparent);}
#zugang .sy-geraet[data-geraet="handy"] .af-fenster{border-radius:13.04cqw;padding-top:9.317cqw;aspect-ratio:.4615;}
#zugang .sy-geraet[data-geraet="handy"] .af-insel{top:6.52cqw;width:27.33cqw;height:7.76cqw;border-radius:10cqw;background:var(--ink);}
#zugang .sy-geraet[data-geraet="handy"] .af-strich{bottom:5.9cqw;width:37.27cqw;height:1.242cqw;background:var(--line);border-radius:1cqw;}
#zugang .sy-geraet[data-geraet="terminal"] .af-huelle{padding:1.977cqw;border-radius:.93cqw;box-shadow:0 1.86cqw 4.65cqw color-mix(in srgb,var(--ink) 22%,transparent),0 0 0 .349cqw var(--ink);}
#zugang .sy-geraet[data-geraet="terminal"] .af-fenster{border-radius:.349cqw;}
.sy-oberflaeche{display:flex;flex:1;min-height:0;min-width:0;background:var(--bg);font-size:2.25cqw;line-height:1.4;color:var(--ink);}
.sy-app-seite{display:flex;flex-direction:column;gap:2.7cqw;flex:none;width:25%;padding:5cqw 2.4cqw;background:var(--bg2);border-right:.12cqw solid var(--line2);}
.sy-mini-marke{font-size:2.55cqw;font-weight:700;}
.sy-mini-neu{padding:1cqw .7cqw;border:.12cqw solid var(--line);border-radius:1cqw;font-size:1.7cqw;white-space:nowrap;}
.sy-app-seite i{height:.65cqw;width:85%;background:var(--line);border-radius:1cqw;}
.sy-app-seite i:last-child{width:62%;}
.sy-app-haupt{display:flex;flex-direction:column;flex:1;min-width:0;}
.sy-mini-kopf{padding:4.2cqw 3cqw 2cqw;border-bottom:.12cqw solid var(--line2);font-size:2.1cqw;}
.sy-mini-mitte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;flex:1;min-height:0;}
.sy-mini-mitte img{width:9cqw;height:9cqw;}
.sy-mini-mitte span{font-size:2.6cqw;font-weight:600;}
.sy-mini-eingabe{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin:3cqw;padding:2cqw;border-radius:2cqw;background:var(--bg2);color:var(--sub);font-size:1.9cqw;}
.sy-mini-eingabe b{display:flex;align-items:center;justify-content:center;width:4cqw;height:4cqw;background:var(--akzent);color:var(--bg);border-radius:50%;font-size:2.5cqw;}
#zugang .sy-geraet[data-geraet="handy"] .sy-app-seite,#zugang .sy-geraet[data-geraet="terminal"] .sy-app-seite{display:none;}
#zugang .sy-geraet[data-geraet="handy"] .sy-mini-kopf{padding:9cqw 7cqw 5cqw;font-size:6cqw;}
#zugang .sy-geraet[data-geraet="handy"] .sy-mini-mitte img{width:19cqw;height:19cqw;}
#zugang .sy-geraet[data-geraet="handy"] .sy-mini-mitte span{font-size:5cqw;}
#zugang .sy-geraet[data-geraet="handy"] .sy-mini-eingabe{margin:7cqw 5cqw 15cqw;padding:4cqw;font-size:4cqw;border-radius:4cqw;}
#zugang .sy-geraet[data-geraet="handy"] .sy-mini-eingabe b{width:8cqw;height:8cqw;font-size:5cqw;}
.sy-funktionszeile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:28px 0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sy-funktionszeile li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--ink);}
.sy-funktionssymbol{display:inline-flex;align-items:center;justify-content:center;flex:none;width:25px;height:25px;border-radius:7px;background:var(--asoft);color:var(--akzent);}
.sy-voraussetzungen{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 10px;margin:20px 0 0;font-size:12px;line-height:1.7;color:var(--sub);}
.sy-voraussetzungen strong{color:var(--ink);}
.sy-sicherheitsdetails{margin-top:40px;padding:28px 32px;background:var(--bg2);border-radius:16px;}
.sy-sicherheitsdetails h3{margin-bottom:18px;}
.sy-sicherheitsdetails .tab th{font-family:inherit;font-size:14px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--sub);text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line2);}
.sy-sicherheitsdetails .tab td{font-size:14px;}
.sy-sicherheitsdetails .tab tr:last-child th{border-bottom:0;}
.sy-it-hinweis{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;margin-top:28px;}
.sy-it-hinweis h3{font-size:15px;margin:3px 0 0;}
.sy-it-hinweis p{font-size:14px;line-height:1.7;color:var(--sub);margin:0;}
.sy-einstieg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;margin:44px 0 0;list-style:none;}
.sy-einstieg li{padding:28px;background:var(--bg);border:1px solid var(--line2);border-radius:16px;}
.sy-einstieg .sy-nummer{margin-bottom:22px;}
.sy-einstieg h3{font-size:19px;}
.sy-einstieg p{font-size:15px;line-height:1.65;color:var(--sub);margin:0;}
section.sy-ausblick{padding-top:64px;padding-bottom:64px;}
.sy-ausblick-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center;}
.sy-ausblick-inhalt h2{font-size:clamp(26px,2.7vw,36px);margin-bottom:0;}
.sy-ausblick-inhalt .eyebrow{margin-bottom:12px;}
.sy-ausblick-inhalt p{font-size:16px;line-height:1.75;color:var(--sub);margin:0;}
#cta.sy-kontakt{background:#fff;}
.sy-kontakt-einstieg{margin-top:24px;}
@media(max-width:860px){
  .sy-vorlagen{grid-template-columns:minmax(0,1fr);gap:36px;}
  .sy-vorlagenbild{width:100%;max-width:580px;justify-self:center;}
#zugang .sy-geraetegruppe{gap:16px;}
  .sy-funktionszeile{gap:16px;}
  .sy-funktionszeile li{font-size:14px;}
  .sy-einstieg{gap:16px;}
  .sy-einstieg li{padding:22px;}
  .sy-ausblick-inhalt{gap:28px;}
}
@media(max-width:600px){
  .sy-app-ausschnitt{padding:16px;}
  .sy-menuezeile{gap:8px;padding:11px 7px;font-size:11px;}
  .sy-befehl{font-size:10px;}
#zugang .sy-geraetegruppe{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px 26px;margin-top:32px;}
#zugang .sy-platz-handy .sy-geraet{width:39%;margin-left:auto;margin-right:auto;}
#zugang .sy-geraeteplatz figcaption{margin-top:18px;font-size:12px;}
  .sy-funktionszeile{grid-template-columns:minmax(0,1fr);gap:18px;padding:24px 0;}
  .sy-voraussetzungen{justify-content:flex-start;gap:4px 8px;}
  .sy-voraussetzungen span[aria-hidden]{display:none;}
  .sy-voraussetzungen span:not([aria-hidden]){flex-basis:100%;}
  .sy-sicherheitsdetails{padding:20px;}
  .sy-sicherheitsdetails .tab th,.sy-sicherheitsdetails .tab td{font-size:12px;}
  .sy-it-hinweis{grid-template-columns:minmax(0,1fr);gap:10px;}
  .sy-einstieg{grid-template-columns:minmax(0,1fr);}
  .sy-einstieg .sy-nummer{margin-bottom:16px;}
  .sy-ausblick-inhalt{grid-template-columns:minmax(0,1fr);gap:20px;}
}

/* Persoenliche Klickvorgaben: proportionaler iPhone-Ablauf links, Text rechts.
   Die Selektoren sind auf diesen Baustein begrenzt, damit andere Geraete gleich bleiben. */
.pv-bereich{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:clamp(40px,6vw,84px);margin-top:104px;padding-top:96px;border-top:1px solid var(--line2);scroll-margin-top:88px;}
.pv-erklaerung{grid-column:2;grid-row:1;max-width:520px;}
.pv-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:26px;border-radius:14px;background:var(--verlauf);color:var(--bg);box-shadow:0 5px 15px var(--aschatten);}
.pv-symbol svg{width:25px;height:25px;}
.pv-erklaerung h2{font-size:clamp(30px,3.6vw,48px);}
.pv-folgetext{font-size:17px;line-height:1.75;color:var(--sub);margin-top:20px;}
.pv-beispiel{border-left:3px solid var(--akzent);padding:3px 0 3px 18px;margin-top:28px;}
.pv-beispiel>span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--sub);}
.pv-beispiel p{font-size:18px;line-height:1.55;color:var(--ink);font-weight:500;margin-top:6px;}
.pv-vorteile{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;}
.pv-vorteile li{display:flex;gap:10px;font-size:14px;line-height:1.6;color:var(--sub);}
.pv-vorteile li::before{content:'✓';color:var(--akzent);font-weight:600;}
.pv-vorfuehrung{grid-column:1;grid-row:1;margin:0;min-width:0;text-align:center;}
.pv-telefon-buehne{position:relative;isolation:isolate;padding:12px 0 0;}
.pv-telefon-buehne::before{content:'';position:absolute;z-index:-1;inset:10% -8% 1%;border-radius:50%;background:radial-gradient(ellipse,var(--asoft),transparent 68%);}
#persoenliche-vorgaben .pv-telefon{width:min(330px,100%);max-width:330px;container-type:inline-size;}
#persoenliche-vorgaben .pv-telefon .af-huelle{padding:3.416cqw;background:var(--ink);border-radius:16.15cqw;box-shadow:0 5cqw 12cqw color-mix(in srgb,var(--ink) 18%,transparent),inset 0 0 0 .3cqw var(--line);}
#persoenliche-vorgaben .pv-telefon .af-fenster{aspect-ratio:.4615;border:0;border-radius:13.04cqw;padding:0;background:var(--bg);box-shadow:none;}
#persoenliche-vorgaben .pv-telefon .af-insel{display:block;top:6.52cqw;left:50%;width:27.33cqw;height:7.76cqw;border-radius:10cqw;background:var(--ink);z-index:6;}
#persoenliche-vorgaben .pv-telefon .af-strich{bottom:5.9cqw;width:37.27cqw;height:1.242cqw;border-radius:1cqw;background:var(--ink);opacity:.65;z-index:6;}
#persoenliche-vorgaben [hidden]{display:none!important;}
.pv-bildschirm{position:relative;font-family:var(--f);font-size:4cqw;color:var(--ink);text-align:left;}
.pv-bildschirm svg{display:block;width:5cqw;height:5cqw;flex:none;}
.pv-systemleiste{display:flex;justify-content:space-between;align-items:center;flex:none;height:13cqw;padding:2cqw 6cqw 0;font-size:3.8cqw;font-weight:600;}
.pv-systemsymbole{display:flex;align-items:center;gap:1cqw;}
.pv-systemsymbole svg{width:5cqw;height:4cqw;}
.pv-appkopf{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:4cqw 5cqw;border-bottom:.3cqw solid var(--line2);flex:none;}
.pv-appkopf strong{font-size:4.2cqw;font-weight:600;}
.pv-verlauf{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:4.5cqw 4.5cqw 3cqw;transition:opacity .45s;}
.pv-verlauf::-webkit-scrollbar{display:none;}
.pv-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;height:100%;text-align:center;}
.pv-leer img{width:14cqw;height:14cqw;margin-bottom:1cqw;}
.pv-leer strong{font-size:5.2cqw;font-weight:600;}
.pv-leer>span{font-size:3.4cqw;color:var(--sub);}
.pv-austausch+.pv-austausch{margin-top:5cqw;}
.pv-frage{margin-left:9cqw;padding:3cqw 3.5cqw;background:var(--bg2);border-radius:4.8cqw 4.8cqw 1.5cqw 4.8cqw;font-size:3.9cqw;line-height:1.5;}
.pv-antwort{margin-top:4cqw;font-size:3.85cqw;line-height:1.55;}
.pv-antwortkopf{display:flex;align-items:center;gap:1.6cqw;font-size:3.5cqw;font-weight:600;margin-bottom:2cqw;}
.pv-antwortkopf img{width:5cqw;height:5cqw;}
.pv-antwort ul{padding-left:5.5cqw;margin:0;}
.pv-antwort li{padding-left:.2cqw;margin-top:.8cqw;animation:pv-antwort-erscheint .25s ease-out;}
.pv-denkt{display:flex;gap:1.2cqw;padding:2cqw 0;}
.pv-denkt i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--line);}
.pv-eingabe{padding:3cqw 4cqw 9cqw;flex:none;background:var(--bg);transition:opacity .45s;}
.pv-klickvorgaben{display:flex;align-items:center;gap:1.4cqw;min-height:8cqw;margin-bottom:2cqw;}
.pv-chip,.pv-plus{display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--bg2);color:var(--sub);font-size:3.35cqw;line-height:1.3;font-weight:600;padding:1.9cqw 3cqw;border-radius:20cqw;transition:background .2s,color .2s,box-shadow .2s,transform .15s;}
.pv-plus{width:8cqw;height:8cqw;padding:0;font-size:5cqw;font-weight:400;}
.pv-chip.pv-aktiv{background:var(--akzent);color:var(--bg);}
.pv-chip.pv-aktiv::before{content:'✓';font-size:2.8cqw;margin-right:1cqw;}
.pv-chip.pv-wird-gesendet{box-shadow:0 0 0 1cqw var(--asoft);}
.pv-eingabezeile{display:flex;align-items:center;gap:1.7cqw;padding:3cqw;background:var(--bg2);border-radius:4.5cqw;min-height:13cqw;}
.pv-buch,.pv-klammer,.pv-mikro{color:var(--sub);flex:none;}
.pv-feld{flex:1;min-width:0;font-size:3.7cqw;line-height:1.45;color:var(--sub);}
.pv-feld.pv-schreibt{color:var(--ink);}
.pv-senden{display:flex;align-items:center;justify-content:center;width:8cqw;height:8cqw;flex:none;border-radius:50%;background:var(--akzent);color:var(--bg);transition:transform .15s;}
.pv-senden svg{width:4.3cqw;height:4.3cqw;}
.pv-eingabehinweis{display:flex;justify-content:space-between;align-items:center;gap:2cqw;min-height:4cqw;margin-top:2cqw;font-size:2.8cqw;color:var(--sub);}
.pv-eingabehinweis>span:last-child{margin-left:auto;}
.pv-aktivhinweis{color:var(--akzent);}
.pv-bildschirm:has(.pv-tastatur:not([hidden])) .pv-eingabe{padding-bottom:3cqw;}
.pv-tastatur{flex:none;padding:3cqw 1.2cqw 9cqw;background:var(--bg3);border-top:.25cqw solid var(--line);}
.pv-tastenreihe{display:flex;justify-content:center;gap:1.2cqw;margin-bottom:2cqw;}
.pv-tastenreihe:last-child{margin-bottom:0;}
.pv-taste{display:flex;align-items:center;justify-content:center;min-width:7.9cqw;height:9cqw;padding:0 1cqw;border-radius:1.5cqw;background:var(--bg);box-shadow:0 .4cqw 0 var(--line);font-size:4cqw;line-height:1;}
.pv-sondertaste{min-width:10.5cqw;background:var(--line);font-size:3.4cqw;}
.pv-leertaste{width:47cqw;font-size:3.4cqw;}
.pv-taste.pv-taste-aktiv{background:var(--asoft);box-shadow:0 .4cqw 0 var(--akzent);}
.pv-dialogebene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6cqw;background:color-mix(in srgb,var(--ink) 14%,transparent);z-index:7;}
.pv-speicherblatt{width:100%;padding:5cqw;background:var(--bg);border: .25cqw solid var(--line2);border-radius:6cqw;box-shadow:0 3cqw 10cqw color-mix(in srgb,var(--ink) 15%,transparent);animation:pv-antwort-erscheint .3s ease-out;}
.pv-blattkopf{display:flex;justify-content:space-between;align-items:center;gap:3cqw;margin-bottom:6cqw;font-size:4.7cqw;}
.pv-blattkopf>span{font-size:6cqw;font-weight:400;color:var(--sub);}
.pv-feldname{display:block;margin:4cqw 0 2cqw;font-size:3.4cqw;color:var(--sub);}
.pv-namefeld,.pv-anweisungsfeld{min-height:12cqw;padding:3cqw;background:var(--bg2);border:.25cqw solid var(--line);border-radius:2.5cqw;font-size:4cqw;line-height:1.55;}
.pv-anweisungsfeld{min-height:27cqw;}
.pv-speicherblatt p{font-size:3.1cqw;line-height:1.5;color:var(--sub);margin:3cqw 0 5cqw;}
.pv-speichern{display:flex;justify-content:center;align-items:center;padding:3.5cqw;background:var(--akzent);color:var(--bg);font-size:4cqw;font-weight:600;border-radius:3cqw;transition:transform .15s;}
.pv-angetippt{transform:scale(.94);}
.pv-tipp{position:absolute;z-index:8;width:12cqw;height:12cqw;border:.6cqw solid var(--bg);border-radius:50%;background:color-mix(in srgb,var(--akzent) 20%,transparent);box-shadow:0 0 0 .4cqw var(--akzent);pointer-events:none;}
.pv-neustart .pv-verlauf,.pv-neustart .pv-eingabe{opacity:0;}
.pv-bildtext{display:grid;gap:7px;margin-top:24px;}
.pv-schrittanzeige{display:flex;justify-content:center;align-items:center;gap:8px;font-size:13px;line-height:1.5;color:var(--ink);}
.pv-schrittpunkt{width:6px;height:6px;flex:none;border-radius:50%;background:var(--akzent);}
.pv-demohinweis{font-size:11px;line-height:1.5;color:var(--sub);}
.pv-pause{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:15px;padding:8px 12px;border:1px solid var(--line2);border-radius:20px;background:var(--bg);font:12px/1.4 var(--f);color:var(--sub);cursor:pointer;}
.pv-pause:hover{border-color:var(--line);color:var(--ink);}
.pv-pause:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;}
@keyframes pv-antwort-erscheint{from{opacity:0;transform:translateY(.8cqw);}to{opacity:1;transform:translateY(0);}}
@media(max-width:1000px){.pv-bereich{gap:36px;}.pv-folgetext{font-size:16px;}}
@media(max-width:760px){
  .pv-bereich{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:64px;padding-top:60px;}
  .pv-erklaerung{grid-column:1;grid-row:1;max-width:580px;}.pv-erklaerung h2{font-size:32px;}
  .pv-vorfuehrung{grid-column:1;grid-row:2;width:100%;max-width:390px;justify-self:center;}
  .pv-telefon-buehne::before{inset:10% 0 1%;}
}
@media(prefers-reduced-motion:reduce){
  .pv-bereich *{animation:none!important;transition:none!important;}
}


/* Persoenliche Vorgaben: identische iPhone-Oberflaeche wie in der Buerodemo.
   Originalmasse von 322 px proportional in cqw, ohne andere Geraete zu aendern. */
#persoenliche-vorgaben .pv-telefon{--pv-gehaeuse:#111113;--pv-tastaturfarbe:#d1d3d9;--pv-tastenschatten:rgba(0,0,0,.3);}
#persoenliche-vorgaben .pv-telefon .af-huelle{background:var(--pv-gehaeuse);box-shadow:0 6.21cqw 14.9cqw rgba(0,0,0,.24),inset 0 0 0 .31cqw rgba(255,255,255,.09);}
#persoenliche-vorgaben .pv-telefon .af-insel{background:var(--pv-gehaeuse);}
#persoenliche-vorgaben .pv-telefon .af-strich{background:rgba(0,0,0,.24);opacity:1;}
.pv-systemleiste{height:9.317cqw;padding:0 8.075cqw 0 9.317cqw;font-size:3.882cqw;letter-spacing:-.01em;}
.pv-systemsymbole{gap:1.553cqw;}
.pv-systemsymbole .pv-wlan{width:4.969cqw;height:3.416cqw;}
.pv-systemsymbole .pv-akku{width:7.453cqw;height:3.416cqw;}
.pv-appkopf{position:relative;gap:3.727cqw;padding:2.484cqw 4.348cqw;min-height:11.49cqw;}
.pv-appkopf strong{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 28.572cqw);font-size:4.037cqw;letter-spacing:-.062cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pv-menue,.pv-neuchat{display:flex;align-items:center;justify-content:center;flex:none;}
.pv-menue svg{width:5.901cqw;height:5.901cqw;}
.pv-neuchat svg{width:6.211cqw;height:6.211cqw;}
.pv-leer{visibility:hidden;}
.pv-verlauf{padding:4.348cqw;}
.pv-austausch+.pv-austausch{margin-top:4.348cqw;}
.pv-frage,.pv-antwort{display:flex;gap:3.416cqw;font-size:4.037cqw;line-height:1.62;}
.pv-frage{margin:0;padding:0;background:transparent;border-radius:0;}
.pv-antwort{margin-top:4.348cqw;}
.pv-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:8.696cqw;height:8.696cqw;border-radius:50%;font-size:3.571cqw;font-weight:700;}
.pv-nutzer{background:var(--verlauf);color:var(--bg);}
.pv-ki{background:var(--bg2);border-radius:22%;overflow:hidden;}
.pv-ki img{width:100%;height:100%;border-radius:22%;}
.pv-nachrichteninhalt{flex:1;min-width:0;}
.pv-rolle{font-size:3.416cqw;font-weight:600;line-height:1.5;color:var(--sub);margin-bottom:.932cqw;}
.pv-antwort ul{padding-left:5.5cqw;}
.pv-antwort li{margin-top:0;}
.pv-eingabe{padding:2.484cqw 4.037cqw 6.832cqw;}
.pv-klickvorgaben{gap:1.242cqw;min-height:0;margin-bottom:1.863cqw;}
.pv-chip,.pv-plus{padding:.714cqw 2.05cqw;font-size:2.391cqw;line-height:1.4;background:rgba(0,0,0,.05);}
.pv-plus{width:auto;height:auto;padding:.714cqw 1.708cqw;font-size:2.919cqw;line-height:1.1;font-weight:500;}
.pv-chip.pv-aktiv{background:var(--verlauf);box-shadow:0 .31cqw 1.242cqw var(--aschatten);}
.pv-chip.pv-aktiv::before{content:none;}
.pv-chip.pv-wird-gesendet{box-shadow:0 0 0 .932cqw var(--asoft);}
.pv-eingabezeile{gap:2.484cqw;padding:2.795cqw 4.037cqw;border:.31cqw solid transparent;border-radius:4.348cqw;min-height:0;}
.pv-eingabezeile:has(.pv-schreibt){background:var(--bg);border-color:var(--aline);box-shadow:0 0 0 .932cqw var(--afaint);}
.pv-buch svg,.pv-klammer svg{width:5.28cqw;height:5.28cqw;opacity:.45;}
.pv-feld{font-size:4.193cqw;line-height:1.35;}
.pv-senden{width:9.006cqw;height:9.006cqw;background:var(--verlauf);box-shadow:0 .621cqw 1.863cqw var(--aschatten);}
.pv-senden svg{width:4.658cqw;height:4.658cqw;}
.pv-eingabehinweis{min-height:0;margin-top:0;padding:0 3.727cqw;font-size:3.571cqw;}
.pv-eingabehinweis:has(.pv-aktivhinweis:not([hidden])){padding-top:1.863cqw;}
.pv-eingabehinweis>.pv-aktivhinweis:last-child{margin-left:0;}
.pv-bildschirm:has(.pv-tastatur:not([hidden])) .pv-eingabe{padding-bottom:1.553cqw;}
.pv-tastatur{height:61.491cqw;padding:0;background:var(--pv-tastaturfarbe);border:0;border-radius:3.416cqw 3.416cqw 0 0;overflow:hidden;}
.pv-tasteninnen{display:flex;flex-direction:column;gap:2.174cqw;padding:2.174cqw .932cqw .932cqw;}
.pv-tastenreihe{gap:1.242cqw;margin:0;}
.pv-taste{flex:1 1 0;min-width:0;width:auto;height:9.627cqw;padding:0;border-radius:1.553cqw;background:var(--bg);box-shadow:0 .31cqw 0 var(--pv-tastenschatten);font-size:4.814cqw;font-weight:400;color:#000;}
.pv-taste.pv-doppeltaste{flex:2 1 0;font-size:4.348cqw;}
.pv-taste.pv-schmaltaste{flex:1.6 1 0;font-size:3.882cqw;}
.pv-taste.pv-leertaste{flex:5.4 1 0;font-size:3.106cqw;color:#8a8f98;}
.pv-taste.pv-eingabetaste{flex:2 1 0;background:#c8ccd3;color:#8a8f98;font-size:4.814cqw;}
.pv-taste.pv-taste-aktiv{background:#c3c7cf;box-shadow:0 .31cqw 0 var(--pv-tastenschatten);}
.pv-sondertaste.pv-taste-aktiv{background:var(--bg);color:#000;}
.pv-tastaturfuss{display:flex;align-items:center;justify-content:space-between;padding:1.242cqw 3.416cqw .31cqw;}
.pv-tastaturfuss svg{width:4.969cqw;height:4.969cqw;}

/* Antwortform folgt der jeweils aktivierten persoenlichen Vorgabe. */
.pv-bildschirm[data-pv-format="text"] .pv-antwort ul{list-style:none;padding-left:0;}
.pv-bildschirm[data-pv-format="schritte"] .pv-antwort ul{list-style-type:decimal;}

/* Im selben Chat: fertiger Nachrichtentext, danach konkrete Rueckfragen. */
.pv-austausch[data-pv-form="brief"] .pv-antwort ul{list-style:none;padding-left:0;}
.pv-austausch[data-pv-form="brief"] .pv-antwort li+li{margin-top:2.174cqw;}
.pv-austausch[data-pv-form="pruefung"] .pv-antwort li+li{margin-top:1.242cqw;}
.pv-speicherblatt .pv-anweisungsfeld{min-height:40cqw;font-size:3.727cqw;line-height:1.55;}

/* KI-Automatisierung und Agenten: geplanter Umfang mit konkreten Ergebnissen. */
.ka-bereich{scroll-margin-top:76px;}
.ka-einstieg{max-width:850px;}
.ka-kopfzeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.ka-kopfzeile .eyebrow{margin:0;}
.ka-status{display:inline-flex;align-items:center;padding:5px 11px;border:1px solid var(--aline);border-radius:100px;background:var(--afaint);color:var(--akzent);font-size:11px;font-weight:600;white-space:nowrap;}
.ka-unterschied{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:40px 0 32px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ka-unterschied h3{font-size:17px;line-height:1.4;margin:0 0 9px;}
.ka-unterschied p{font-size:15px;line-height:1.7;color:var(--sub);margin:0;}
.ka-beispiele{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.ka-karte{display:flex;flex-direction:column;padding:26px 23px;background:var(--bg2);border:1px solid var(--line2);border-radius:20px;min-width:0;}
.ka-art{display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.4;color:var(--sub);margin-bottom:20px;}
.ka-nummer{display:flex;align-items:center;justify-content:center;width:27px;height:27px;flex:none;border-radius:8px;background:var(--bg);color:var(--akzent);font:600 11px var(--fm);}
.ka-karte h3{font-size:22px;line-height:1.25;letter-spacing:-.5px;margin:0 0 15px;}
.ka-karte>p{font-size:14px;line-height:1.75;color:var(--sub);margin:0 0 22px;}
.ka-karte dl{margin:auto 0 22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:14px;}
.ka-karte dt{font-size:10px;line-height:1.5;color:var(--sub);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.ka-karte dd{margin:0;font-size:14px;line-height:1.65;color:var(--ink);}
.ka-karte>.ka-nutzen{margin:0;font-weight:500;color:var(--ink);padding-left:12px;border-left:2px solid var(--akzent);}
.ka-agent{background:var(--afaint);border-color:var(--aline);}
.ka-rahmen{display:flex;align-items:center;justify-content:space-between;gap:36px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line);}
.ka-rahmen>div{max-width:700px;}
.ka-rahmen h3{font-size:19px;line-height:1.4;margin:0 0 9px;}
.ka-rahmen p{font-size:14px;line-height:1.75;color:var(--sub);margin:0;}
.ka-rahmen .btn-pri{flex:none;white-space:nowrap;font-size:13px;}
@media(max-width:1000px){.ka-beispiele{gap:14px;}.ka-karte{padding:23px 18px;}.ka-karte h3{font-size:20px;}.ka-rahmen{align-items:flex-start;flex-direction:column;gap:20px;}}
@media(max-width:760px){.ka-unterschied{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:30px;}.ka-beispiele{grid-template-columns:minmax(0,1fr);gap:16px;}.ka-karte{padding:26px;}.ka-karte h3{font-size:23px;}.ka-karte dl{margin-top:0;}.ka-art{font-size:11px;}.ka-rahmen .btn-pri{white-space:normal;}}

/* KI-System: gestraffte Abschnitte und Seitenabschluss. */
.sr-abschnitt{padding-top:88px;padding-bottom:88px;scroll-margin-top:0;}
.sr-abschnitt .pv-bereich{margin-top:76px;padding-top:72px;}
.sr-zugang .sy-geraetegruppe{max-width:850px;margin:36px auto 28px;}
/* KI-System: Text links, manuell waehlbare Geraeteansicht rechts. */
#zugang .sr-zugang-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,72px);align-items:center;}
#zugang .sr-zugang-text{max-width:540px;}
#zugang .sr-zugang-vorschau{min-width:0;margin:0;}
#zugang .sr-zugang-vorschau .sy-geraetegruppe{margin:24px 0 0;min-height:clamp(240px,28vw,420px);align-content:center;gap:clamp(12px,1.5vw,24px);}
#zugang .af-buehne[hidden],#zugang .sy-geraetegruppe[hidden]{display:none;}
#zugang .af-schalter button[aria-selected="true"]{background:linear-gradient(90deg,#fff 50%,transparent 50%) 0 0 / 200% 100%;animation:sr-reiter-fuellen .36s ease-out both;}
@keyframes sr-reiter-fuellen{from{background-position:100% 0;}to{background-position:0 0;}}
@media(prefers-reduced-motion:reduce){#zugang .af-schalter button[aria-selected="true"]{background:#fff;animation:none;}}
/* Die grosse Systemvorschau nutzt allein die Skalierung der Geraetebuehne. */
#zugang .geraete-vorschau .af-geraet[data-geraet="rechner"]{max-width:none;}
#zugang .geraete-vorschau .sy-geraet[data-geraet]{max-width:none;}
#zugang.gm-massstab .geraete-vorschau .sy-geraet[data-geraet="rechner"] .af-basis{width:107%;margin:0 -3.5%;}
#zugang .geraete-vorschau .af-msg{animation:none;opacity:1;}
@media(max-width:1000px){
  #zugang .sr-zugang-layout{grid-template-columns:minmax(0,1fr);gap:36px;}
  #zugang .sr-zugang-text{max-width:700px;}
  #zugang .sr-zugang-vorschau{width:100%;max-width:850px;justify-self:center;}
}
.sr-fachseiten{padding-top:64px;padding-bottom:64px;}
.sr-fachseiten h2{font-size:clamp(28px,3.2vw,40px);}
.sr-fachlinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:32px;}
.sr-fachlinks a{display:block;padding:24px 26px;text-decoration:none;border:1px solid var(--line2);border-radius:16px;background:var(--bg2);transition:border-color .2s;}
.sr-fachlinks a:hover{border-color:var(--akzent);}
.sr-fachlinks a:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px;}
.sr-fachlinks h3{display:flex;justify-content:space-between;gap:16px;font-size:20px;margin:0 0 10px;}
.sr-fachlinks h3 span{color:var(--akzent);}
.sr-fachlinks p{font-size:15px;line-height:1.65;color:var(--sub);margin:0;}
.sr-abschnitt .ka-karte{background:var(--bg);}
.sr-abschnitt .ka-agent{background:var(--afaint);}
.sr-fragen .faq-item{background:var(--bg2);box-shadow:none;}
.sr-kontaktaufbau{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:start;margin-top:44px;}
.sr-ansprechpartner{padding-top:4px;}
.sr-ansprechpartner h3{font-size:23px;margin:0 0 6px;}
.sr-ansprechpartner>p{font-size:14px;line-height:1.75;color:var(--sub);}
.sr-kontaktdaten{display:grid;gap:8px;margin:24px 0;}
.sr-kontaktdaten a{width:fit-content;font-size:17px;font-weight:500;color:var(--akzent);text-decoration:none;}
.sr-kontaktdaten a:hover{text-decoration:underline;}
.sr-ansprechpartner .sr-erstgespraech{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.sr-anfrage h3{font-size:23px;margin:0 0 8px;}
.sr-anfrage>p{font-size:14px;line-height:1.65;color:var(--sub);}
.sr-anfrage .contact-form{margin-top:22px;}
.sr-anfrage .cf-zeile{flex-direction:column;align-items:flex-start;gap:14px;}
.sr-anfrage .cf-hinweis{max-width:100%;}
@media(max-width:900px){
  .sr-kontaktaufbau{gap:36px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
}
@media(max-width:760px){
  .sr-abschnitt{padding-top:60px;padding-bottom:60px;}
  .sr-abschnitt .pv-bereich{margin-top:54px;padding-top:52px;}
  .sr-fachlinks{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:26px;}
  .sr-fachlinks a{padding:22px;}
  .sr-kontaktaufbau{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:32px;}
  .sr-anfrage{grid-row:1;}
  .sr-ansprechpartner{border-top:1px solid var(--line);padding-top:28px;}
}
@media(prefers-reduced-motion:reduce){.sr-fachlinks a{transition:none;}}

/* KI-System: Datenkontrolle und Einstieg aus Sicht betrieblicher Entscheider. */
.sk-sicherheit .lead{max-width:760px;}
.sk-vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:44px;}
.sk-vorteil{padding-top:24px;border-top:1px solid var(--line);}
.sk-vorteil .sy-nummer{margin-bottom:18px;}
.sk-vorteil h3{font-size:20px;line-height:1.3;margin:0 0 14px;}
.sk-vorteil p{font-size:15px;line-height:1.75;color:var(--sub);margin:0;}
.sk-nachweis{max-width:850px;margin:32px 0 0;padding:16px 20px;border-left:3px solid var(--akzent);border-radius:0 10px 10px 0;background:var(--afaint);font-size:13px;line-height:1.75;color:var(--sub);}
.sk-nachweis strong{color:var(--ink);font-weight:600;}
.sk-einstiegsraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;}
.sk-einstieg h2{font-size:clamp(28px,3.3vw,42px);}
.sk-einstieg .lead{font-size:17px;line-height:1.75;}
.sk-schritte{padding:0;margin:0;list-style:none;}
.sk-schritte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:23px 0;border-top:1px solid var(--line);}
.sk-schritte li:first-child{padding-top:0;border-top:0;}
.sk-schritte li:last-child{padding-bottom:0;}
.sk-schritte h3{font-size:19px;line-height:1.35;margin:0 0 10px;}
.sk-schritte p{font-size:15px;line-height:1.75;color:var(--sub);margin:0;}
@media(max-width:900px){
  .sk-vorteile{gap:24px;}
  .sk-einstiegsraster{gap:40px;}
}
@media(max-width:760px){
  .sk-vorteile{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:32px;}
  .sk-vorteil{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding-top:22px;}
  .sk-vorteil .sy-nummer{grid-row:1 / 3;margin:0;}
  .sk-vorteil h3{font-size:19px;margin-bottom:10px;}
  .sk-vorteil p{grid-column:2;}
  .sk-nachweis{margin-top:28px;}
  .sk-einstiegsraster{grid-template-columns:minmax(0,1fr);gap:32px;}
  .sk-einstieg .lead{font-size:16px;}
}

/* KI-System: Die vorhandene Programmoberfläche aus Einstieg und Handy-Demo in allen vier Displays.
   Ein gemeinsamer Maßstab je Display erhält die Proportionen der originalen Bedienelemente. */
#zugang.og-vorschau .sy-geraet .og-bildschirm{container-type:inline-size;--og-breite:960;--og-seitenbreite:212;--og-mass:calc(100cqw / var(--og-breite));}
#zugang.og-vorschau .sy-geraet[data-geraet="tablet"] .og-bildschirm{--og-breite:692;--og-seitenbreite:168;}
#zugang.og-vorschau .sy-geraet[data-geraet="handy"] .og-bildschirm{--og-breite:300;padding:0;}
#zugang.og-vorschau .sy-geraet[data-geraet="terminal"] .og-bildschirm{--og-breite:826;}
#zugang.og-vorschau .og-programm{--sp-ui:calc(9.8 * var(--og-mass));display:flex;flex:1;min-width:0;min-height:0;background:var(--bg);}
#zugang.og-vorschau .og-programm .sp-seite{width:calc(var(--og-seitenbreite) * var(--og-mass));max-width:none;}
#zugang.og-vorschau .og-chat{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;}
#zugang.og-vorschau .og-fensterleiste{display:flex;flex:none;gap:calc(7 * var(--og-mass));padding:calc(15 * var(--og-mass)) calc(14 * var(--og-mass)) calc(10 * var(--og-mass));border-bottom-width:calc(1 * var(--og-mass));}
#zugang.og-vorschau .og-fensterleiste .af-ampel{width:calc(11 * var(--og-mass));height:calc(11 * var(--og-mass));}
#zugang.og-vorschau .og-terminaltitel{display:flex;align-items:center;gap:calc(9 * var(--og-mass));min-width:0;}
#zugang.og-vorschau .og-terminaltitel img{display:block;width:calc(22 * var(--og-mass));height:calc(22 * var(--og-mass));flex:none;}
#zugang.og-vorschau .og-systemleiste{display:flex;align-items:center;justify-content:space-between;flex:none;height:calc(30 * var(--og-mass));padding:0 calc(26 * var(--og-mass)) 0 calc(30 * var(--og-mass));font-size:calc(12.5 * var(--og-mass));font-weight:600;color:var(--ink);}
#zugang.og-vorschau .og-systemsymbole{display:flex;align-items:center;gap:calc(5 * var(--og-mass));}
#zugang.og-vorschau .og-systemsymbole .og-wlan{width:calc(16 * var(--og-mass));height:calc(11 * var(--og-mass));}
#zugang.og-vorschau .og-systemsymbole .og-akku{width:calc(24 * var(--og-mass));height:calc(11 * var(--og-mass));}
#zugang.og-vorschau .og-appkopf{position:relative;display:flex;align-items:center;justify-content:space-between;flex:none;min-height:calc(37 * var(--og-mass));padding:calc(8 * var(--og-mass)) calc(14 * var(--og-mass));border-bottom:calc(1 * var(--og-mass)) solid var(--line2);color:var(--ink);}
#zugang.og-vorschau .og-appkopf strong{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 92 * var(--og-mass));font-size:calc(13 * var(--og-mass));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#zugang.og-vorschau .og-menue,#zugang.og-vorschau .og-neuchat{display:flex;flex:none;}
#zugang.og-vorschau .og-menue svg{display:block;width:calc(19 * var(--og-mass));height:calc(19 * var(--og-mass));}
#zugang.og-vorschau .og-neuchat svg{display:block;width:calc(20 * var(--og-mass));height:calc(20 * var(--og-mass));}
#zugang.og-vorschau .sy-geraet[data-geraet="handy"] .sp-eingabe{padding:calc(8 * var(--og-mass)) calc(13 * var(--og-mass)) calc(24 * var(--og-mass));}
#zugang.og-vorschau .sy-geraet[data-geraet="handy"] .sp-fuss{justify-content:flex-end;font-family:var(--f);font-size:calc(8 * var(--og-mass));}

/* KI-System: gemeinsamer Gerätemaßstab nach den Apple-Gehäusemaßen.
   MacBook Pro 16: 355,7 mm breit; iPad Pro 13 quer: 281,6 x 215,5 mm;
   iPhone 17 Pro Max hoch: 78 x 163,4 mm. Das Terminal behält seine bisherige relative Breite.
   Quellen: apple.com/lae/macbook-pro/specs/, apple.com/de/ipad-pro/specs/,
   support.apple.com/de-ch/125091. Die Zollangabe allein bestimmt nicht die Gerätebreite. */
#zugang.gm-massstab .sy-geraetegruppe{grid-template-columns:minmax(0,355.7fr) minmax(0,281.6fr) minmax(0,78fr) minmax(0,252.7342fr);}
#zugang.gm-massstab .sy-geraet[data-geraet="rechner"] .af-basis{width:100%;margin:0;}
#zugang.gm-massstab .sy-geraet[data-geraet="tablet"] .af-huelle{display:flex;flex-direction:column;aspect-ratio:281.6 / 215.5;padding:2.996cqw;}
#zugang.gm-massstab .sy-geraet[data-geraet="handy"] .af-huelle{display:flex;flex-direction:column;aspect-ratio:78 / 163.4;}
#zugang.gm-massstab .sy-geraet[data-geraet="tablet"] .af-fenster,#zugang.gm-massstab .sy-geraet[data-geraet="handy"] .af-fenster{flex:1;min-height:0;aspect-ratio:auto;}
/* Derselbe Handyrahmen in Einzelansicht und Übersicht: identische Ränder,
   die innere Rundung ist die äußere Rundung minus Rahmenstärke. */
#zugang .af-geraet[data-geraet="handy"] .af-huelle{
  --telefon-rand:3.416149cqw;
  --telefon-radius:16.149068cqw;
  display:flex;flex-direction:column;aspect-ratio:78 / 163.4;
  padding:var(--telefon-rand);border-radius:var(--telefon-radius);
}
#zugang .af-geraet[data-geraet="handy"] .af-fenster{
  flex:1;min-height:0;aspect-ratio:auto;border:0;
  border-radius:calc(var(--telefon-radius) - var(--telefon-rand));
}
#zugang .af-geraet[data-geraet="handy"] .af-strich{
  bottom:5.9cqw;width:37.27cqw;height:1.242cqw;
}
#zugang.og-vorschau .sy-geraet[data-geraet="handy"] .sp-vorlagen>span:nth-child(2){display:none;}
@media(max-width:760px){
  /* Beim Umbruch bleibt derselbe Maßstab für beide Reihen erhalten. */
  #zugang.gm-massstab .sy-geraetegruppe{grid-template-columns:minmax(0,355.7fr) minmax(0,281.6fr);}
  #zugang.gm-massstab .sy-platz-handy .sy-geraet{width:calc(100% * 78 / 355.7);}
  #zugang.gm-massstab .sy-platz-terminal .sy-geraet{width:calc(100% * 252.7342 / 281.6);}
}

/* ==========================================================================
   Nutzenrechner (Startseite, über „Jetzt starten“)
   ========================================================================== */
.nr-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,40px);margin-top:48px;align-items:stretch;}
.nr-eingaben{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:30px;}
.nr-feld label{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.35;}
.nr-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px;}
.nr-wert{display:flex;align-items:baseline;gap:6px;flex-shrink:0;}
.nr-wert input{width:76px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-family:var(--f);font-size:17px;font-weight:700;color:var(--ink);text-align:right;background:var(--bg2);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;}
.nr-wert input::-webkit-outer-spin-button,.nr-wert input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.nr-wert input:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--afaint);background:#fff;}
.nr-wert span{font-size:13px;color:var(--sub);font-weight:500;white-space:nowrap;}
.nr-feld input[type=range]{display:block;height:4px;background:linear-gradient(to right,var(--akzent) var(--fuell,0%),var(--line2) var(--fuell,0%));}
.nr-feld input[type=range]:focus-visible{outline:2px solid var(--akzent);outline-offset:6px;}
.nr-skala{display:flex;justify-content:space-between;font-family:var(--fm);font-size:11px;color:var(--quiet);margin-top:8px;}
.nr-hinweis{font-size:13px;color:var(--quiet);line-height:1.5;margin-top:10px;}
.nr-ergebnis{background:var(--verlauf);color:#fff;border-radius:20px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:22px;box-shadow:0 12px 40px var(--aschatten);container-type:inline-size;}
.nr-e-kopf{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.65);}
.nr-e-gross{display:flex;flex-wrap:wrap;gap:16px 20px;}
.nr-e-gross>div{flex:1 1 0;min-width:min-content;max-width:100%;}
.nr-e-zahl{font-size:clamp(24px,12cqw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;overflow-wrap:normal;}
.nr-e-label{font-size:13px;color:rgba(255,255,255,.75);margin-top:6px;line-height:1.4;}
.nr-e-liste{margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:10px;}
.nr-e-liste > div{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:1.4;}
.nr-e-liste dt{color:rgba(255,255,255,.7);font-weight:500;}
.nr-e-liste dd{margin:0;text-align:right;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;}
.nr-fuss{margin-top:18px;font-size:12.5px;line-height:1.55;color:var(--quiet);}
.nr-knopf{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:auto;padding:13px 24px;border-radius:100px;background:#fff;color:var(--akzent);font-family:var(--f);font-size:14px;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .3s;box-shadow:0 2px 10px rgba(0,0,0,.15);}
.nr-knopf:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.22);}
@media(max-width:900px){.nr-grid{grid-template-columns:1fr;}}
@media(max-width:480px){
  .nr-kopf{flex-direction:column;align-items:flex-start;gap:8px;}
  .nr-e-gross{flex-direction:column;}
  .nr-e-liste > div{flex-direction:column;gap:2px;}
  .nr-e-liste dd{text-align:left;}
  .nr-knopf{align-self:stretch;}
}