/* IRSALI Website CSS v2 (19.09.2026). Basis 1:1 aus den freigegebenen Mockups 2026-09-17 (Block "IRSALI CI v2 Basis" + Website-Seiten-CSS),
   Werte-Quelle: 03. Brand & Identity/Design-System/tokens.css. Alte site.css bleibt fuer Impressum/Datenschutz/DSGVO-Report bis Phase 8. */

/* ===== IRSALI CI v2 Basis (17.09.2026, Session 2) — INLINE in jedes Mockup kopieren =====
   Quelle: 03. Brand & Identity/Design-System/tokens.css + pattern/patterns.css, Final-Stand 2026-09-17.
   Entschieden: Palette A Mint, Muster A Pupillenraster, Original-Logo-PNGs. Keine anderen Hex-Werte verwenden.
   Fonts/Logos relativ ab 00. Strategie/Uebersichten/ (Artifact-Kopie ersetzt "../../11. Website/assets/" durch "assets/"). */

/* Fonts (selbst gehostet) */
@font-face{font-family:"Sora";font-weight:400;src:url("fonts/sora-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Sora";font-weight:500;src:url("fonts/sora-500.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Sora";font-weight:600;src:url("fonts/sora-600.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Sora";font-weight:700;src:url("fonts/sora-700.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;src:url("fonts/instrument-serif-400-italic.woff2") format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";font-weight:500;src:url("fonts/jetbrains-mono-500.woff2") format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";font-weight:600;src:url("fonts/jetbrains-mono-600.woff2") format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";font-weight:700;src:url("fonts/jetbrains-mono-700.woff2") format("woff2");font-display:swap}

/* Schema-unabhaengig */
:root{
  --font-sans:"Sora",system-ui,-apple-system,sans-serif;--font-serif:"Instrument Serif",Georgia,serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;--sp-32:128px;
  --pattern-s:6%;--pattern-m:12%;--pattern-l:20%;
  --dur-fast:120ms;--dur-base:200ms;--ease:cubic-bezier(.2,.7,.2,1);
  /* Palette A Mint */
  --accent-dark:#59e8c8;--accent-light:#0a7c65;--accent-bright-light:#0d9c7f;--accent-strong-dark:#08090b;--accent-strong-light:#086b57;
  --support-dark:#0f2f2b;--support-light:#e6f6f1;
}

/* Schema Auftritt (Dark) — Website. Als Seiten-Default und als .auftritt-Container */
:root,[data-scheme="auftritt"],.auftritt{
  --bg:#08090b;--bg-tint:#0d0f12;--surface:rgba(255,255,255,.035);--surface-strong:rgba(255,255,255,.065);--border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);
  --text:#f5f7f6;--text-muted:#c9d2ce;--text-faint:#7c8783;
  --accent:var(--accent-dark);--accent-strong:var(--accent-strong-dark);--accent-soft:color-mix(in srgb,var(--accent) 10%,transparent);--support:var(--support-dark);
  --ok:#43d17a;--warn:#e8c159;--bad:#ff6b5e;--ok-soft:rgba(67,209,122,.12);--warn-soft:rgba(232,193,89,.12);--bad-soft:rgba(255,107,94,.12);
  --fs-display:clamp(40px,5vw,56px);--lh-display:1.06;--ls-display:-0.018em;--fw-display:700;
  --fs-h2:clamp(30px,3.6vw,40px);--lh-h2:1.12;--ls-h2:-0.012em;--fw-h2:700;
  --fs-h3:24px;--lh-h3:1.25;--fw-h3:600;--fs-lead:18px;--fs-body:16px;--lh-body:1.5;--fs-small:14px;--fs-meta:12px;--fs-kpi:36px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
  --shadow-ring:none;--shadow-card:none;--shadow-pop:0 0 0 1px rgba(255,255,255,.12),0 16px 32px -12px rgba(0,0,0,.6);--focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --btn-h:40px;--btn-fw:500;--input-h:44px;--container:1120px;--gutter:24px;--nav-h:64px;
  --pattern-alpha:var(--pattern-s);--pattern-hero-boost:2;color-scheme:dark;
}

/* Schema Arbeitsraum (Light) — Company Hub, Vorschau-Hub, Login, PDF-Screen, Signatur */
[data-scheme="arbeitsraum"],.arbeitsraum{
  --bg:#ffffff;--bg-inset:#fafafa;--bg-tint:#f5f5f5;--surface:#ffffff;--surface-strong:#f5f5f5;--border:rgba(0,0,0,.08);--border-strong:#e5e5e5;
  --text:#171717;--text-muted:#525252;--text-faint:#737373;
  --accent:var(--accent-light);--accent-bright:var(--accent-bright-light);--accent-strong:var(--accent-strong-light);--accent-soft:color-mix(in srgb,var(--accent) 10%,transparent);--support:var(--support-light);
  --btn-primary-bg:#171717;--btn-primary-fg:#ffffff;
  --ok:#1c7a49;--warn:#9a6a08;--bad:#b8392c;--ok-soft:rgba(28,122,73,.10);--warn-soft:rgba(154,106,8,.08);--bad-soft:rgba(184,57,44,.10);
  --side-bg:#0f1113;--side-text:#d0d6e0;--side-muted:#8a8f98;--side-border:rgba(255,255,255,.08);--side-active:rgba(255,255,255,.06);--side-w:240px;--topbar-h:48px;
  --fs-title:16px;--fw-title:600;--fs-panel:14px;--fw-panel:600;--fs-body:14px;--lh-body:20px;--fw-ui:500;--fs-table:13px;--fs-small:13px;--fs-meta:12px;--fs-kpi:28px;--ls-kpi:-0.02em;
  --r-sm:6px;--r-md:8px;--r-lg:12px;--r-badge:6px;--r-pill:999px;
  --shadow-ring:0 0 0 1px rgba(0,0,0,.08);--shadow-card:0 1px 2px rgba(0,0,0,.05);--shadow-btn:0 1px 3px rgba(0,0,0,.04),0 0 2px rgba(28,40,64,.18);
  --shadow-pop:0 0 0 1px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.04),0 16px 24px -8px rgba(0,0,0,.06);--focus:0 0 0 2px #fff,0 0 0 4px var(--accent);
  --btn-h:32px;--btn-h-dense:28px;--btn-fw:500;--input-h:36px;--nav-item-h:30px;--row-h:40px;--row-h-dense:36px;--th-h:36px;--gap-card:16px;--pad-panel:16px;--read-w:720px;
  --pattern-alpha:10%;color-scheme:light;
}

/* Signature-Muster A "Pupillenraster" (24px-Punkte, jede 4. Position ein Ring). Farbe immer via color-mix aus --accent. */
.pattern{position:relative;isolation:isolate}
.pattern::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-color:color-mix(in srgb,var(--accent) var(--pattern-alpha),transparent);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-image:var(--pattern-mask);mask-image:var(--pattern-mask);-webkit-mask-size:var(--pattern-size);mask-size:var(--pattern-size)}
.pattern>*{position:relative;z-index:1}
.pattern.fade::before{-webkit-mask-image:var(--pattern-mask),radial-gradient(ellipse 95% 85% at 50% 0%,#000 40%,transparent 90%);mask-image:var(--pattern-mask),radial-gradient(ellipse 95% 85% at 50% 0%,#000 40%,transparent 90%);
  -webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-size:var(--pattern-size),100% 100%;mask-size:var(--pattern-size),100% 100%}
.pattern.fade-right::before{-webkit-mask-image:var(--pattern-mask),linear-gradient(90deg,transparent 0%,#000 55%);mask-image:var(--pattern-mask),linear-gradient(90deg,transparent 0%,#000 55%);
  -webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-size:var(--pattern-size),100% 100%;mask-size:var(--pattern-size),100% 100%}
.pattern-a{--pattern-size:96px 96px;--pattern-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><g fill='%23000'><circle cx='12' cy='12' r='1.4'/><circle cx='36' cy='12' r='1.4'/><circle cx='60' cy='12' r='1.4'/><circle cx='84' cy='12' r='1.4'/><circle cx='12' cy='36' r='1.4'/><circle cx='36' cy='36' r='1.4'/><circle cx='60' cy='36' r='1.4'/><circle cx='84' cy='36' r='1.4'/><circle cx='12' cy='60' r='1.4'/><circle cx='36' cy='60' r='1.4'/><circle cx='84' cy='60' r='1.4'/><circle cx='12' cy='84' r='1.4'/><circle cx='36' cy='84' r='1.4'/><circle cx='60' cy='84' r='1.4'/><circle cx='84' cy='84' r='1.4'/></g><circle cx='60' cy='60' r='4.5' fill='none' stroke='%23000' stroke-width='1.4'/><circle cx='60' cy='60' r='1.6' fill='%23000'/></svg>")}
.density-s{--pattern-alpha:var(--pattern-s)} .density-m{--pattern-alpha:var(--pattern-m)} .density-l{--pattern-alpha:var(--pattern-l)}
[data-scheme="arbeitsraum"] .density-s,.arbeitsraum .density-s{--pattern-alpha:10%} [data-scheme="arbeitsraum"] .density-m,.arbeitsraum .density-m{--pattern-alpha:18%} [data-scheme="arbeitsraum"] .density-l,.arbeitsraum .density-l{--pattern-alpha:28%}
/* Hero (nur Website, ein Wow-Moment): Punkte mit Hero-Boost, 48px-Linienraster in ::after, Lichtlauf 24s */
.hero.pattern{--pattern-alpha:calc(var(--pattern-m) * var(--pattern-hero-boost))}
.hero.pattern.animated::before{background-image:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--accent) 40%,transparent) 50%,transparent 70%);background-size:300% 300%;animation:patternLight 24s linear infinite}
.hero.pattern.lines::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 30%,transparent 85%)}
@keyframes patternLight{0%{background-position:0 0}100%{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){.hero.pattern.animated::before{animation:none}}

/* Logo: nur Original-PNGs. Weiss auf Dark, Schwarz auf Light. Beide <img> immer paarweise setzen:
   <span class="logo"><img class="lg lg-w" src="../../11. Website/assets/icons/logo-mark-white.png" alt=""><img class="lg lg-b" src="../../11. Website/assets/icons/logo-mark-black.png" alt="IRSALI"><span class="word">IRSALI</span></span>
   Achtung Final-Stand-Bug: ".logo img{display:block}" hatte hoehere Spezifitaet als ".lg-b{display:none}" -> beide sichtbar. Hier korrigiert. */
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}
.logo img.lg{height:22px;width:auto;display:block}
.logo .word{font-family:var(--font-mono);font-weight:700;letter-spacing:.13em;font-size:14px}
.logo img.lg-b{display:none}
[data-scheme="arbeitsraum"] .logo img.lg-w,.arbeitsraum .logo img.lg-w{display:none}
[data-scheme="arbeitsraum"] .logo img.lg-b,.arbeitsraum .logo img.lg-b{display:block}
/* Dunkle Sidebar im Arbeitsraum: wieder weisses Logo */
.side .logo img.lg-w{display:block} .side .logo img.lg-b{display:none}

/* Grundlayout */
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);font-size:1.04em}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-muted)} .faint{color:var(--text-faint)}
/* Buttons: Auftritt 40px/500, Arbeitsraum 32px/500 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 20px;border-radius:var(--r-md);font-weight:var(--btn-fw);font-size:15px;border:1px solid transparent;text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn.primary{background:var(--accent);color:var(--accent-strong)}
.btn.ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
[data-scheme="arbeitsraum"] .btn,.arbeitsraum .btn{font-size:13px;padding:0 12px}
[data-scheme="arbeitsraum"] .btn.primary,.arbeitsraum .btn.primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
[data-scheme="arbeitsraum"] .btn.secondary,.arbeitsraum .btn.secondary{background:var(--surface);color:var(--text);box-shadow:var(--shadow-btn)}
[data-scheme="arbeitsraum"] .btn.ghost,.arbeitsraum .btn.ghost{border-color:transparent;color:var(--text-muted)}
/* Icons: nur Inline-SVG 24x24, Stroke 1.75, currentColor. Nie Emoji. */
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Pupillen-Marker (einziges KI-Kennzeichen im Arbeitsraum, 12px, monochrom) */
.mk{width:12px;height:12px;border-radius:50%;background:currentColor;display:inline-block;flex:none;vertical-align:-1px}
/* Badges tonal (Arbeitsraum) */
.badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-badge,6px);font-size:12px;font-weight:500;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.bad{background:var(--bad-soft);color:var(--bad)} .badge.neutral{background:var(--bg-tint);color:var(--text-muted)} .badge.accent{background:var(--support);color:var(--accent)}
/* Skeleton (Leerzustand) */
.skel{background:linear-gradient(90deg,var(--bg-tint) 25%,var(--border-strong) 37%,var(--bg-tint) 63%);background-size:400% 100%;border-radius:6px;animation:skel 1.4s ease infinite}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
/* Scroll-Reveal (nur unterhalb des ersten Bildschirms; ohne JS voll sichtbar) */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}


/* ===== Website-Mockup (Schema Auftritt, Dark hart) — Seiten-CSS auf Basis der Tokens oben. Keine eigenen Hex-Werte. ===== */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:clip}
p{hyphens:auto}.lead{hyphens:manual}.nb{hyphens:none} h1,h2,h3,h4,summary,.btn,.eyebrow{hyphens:manual}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
@media(min-width:768px){.wrap{--gutter:48px}}
.sec{padding:var(--sp-24) 0} .sec.tight{padding:var(--sp-16) 0} .sec.wide{padding:var(--sp-32) 0}
@media(max-width:767px){.sec,.sec.wide{padding:64px 0}}
.sec-head{max-width:680px;margin-bottom:var(--sp-12)}
.sec-head h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-h2);margin-top:12px}
.sec-head .lead,.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-muted);margin:14px 0 0}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-h3)}
.sub-h{display:flex;align-items:center;gap:12px;margin:56px 0 20px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint)}
.sub-h::after{content:"";flex:1;height:1px;background:var(--border)}
.sub-h.first{margin-top:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;min-width:0}
.ico{width:40px;height:40px;border-radius:var(--r-md);background:var(--support);color:var(--accent);display:grid;place-items:center;flex:none}
.ico .ic{width:22px;height:22px}
.link{color:var(--accent);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline}
.link .ic{width:16px;height:16px}
.fn{font-size:13px;color:var(--text-faint);margin:14px 0 0;line-height:1.5}

/* Announcement-Bar (Website-Variante, Baustein E2) */
.ann{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:0 4px 0 var(--gutter);font-size:13px;line-height:18px;border-bottom:1px solid var(--border);background:var(--bg-tint);color:var(--text)}
.ann[hidden]{display:none}
.ann .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600;flex:none}
.ann .msg{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ann .cta{color:var(--accent);font-weight:500;white-space:nowrap;text-decoration:none;flex:none}
.ann .cta:hover{text-decoration:underline}
.ann .close{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;padding:0;color:var(--text-faint);cursor:pointer;flex:none;border-radius:var(--r-sm)}
.ann .close:hover{color:var(--text)} .ann .close:focus-visible{outline:none;box-shadow:var(--focus)}
@media(max-width:767px){.ann{padding:7px 4px 7px var(--gutter)} .ann .msg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:19px}}
@media(max-width:479px){.ann .tag{display:none}}

/* Sticky Header (direktes Body-Kind) */
.site-header{position:sticky;top:0;z-index:50;height:var(--nav-h);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:100%}
.site-header .logo{margin-right:auto}
.nav-links{display:none;gap:28px;font-size:14px;font-weight:500;color:var(--text-muted)}
.nav-links a{text-decoration:none;color:inherit;padding:6px 0} .nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.site-header .cta{display:none;height:36px;font-size:14px;padding:0 16px}
@media(min-width:480px){.site-header .cta{display:inline-flex}}
@media(min-width:1024px){.nav-links{display:flex}.mnav{display:none}}
.mnav summary{list-style:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);cursor:pointer;color:var(--text);margin-right:-8px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:focus-visible{outline:none;box-shadow:var(--focus)}
.mnav summary .ic{width:22px;height:22px}
.mnav summary .x{display:none} .mnav[open] summary .x{display:block} .mnav[open] summary .bars{display:none}
.mnav .menu{position:absolute;left:0;right:0;top:var(--nav-h);background:var(--bg);border-bottom:1px solid var(--border);padding:4px var(--gutter) 20px;display:flex;flex-direction:column}
.mnav .menu a{padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text);font-weight:500;font-size:16px}
.mnav .menu a:last-child{border-bottom:0}
.mnav .menu .btn{margin-top:16px;align-self:flex-start;height:40px;border-bottom:0;padding:0 20px}

/* Hero (Final-Stand Sektion 1): Muster A Dichte M + Hero-Boost, 48px-Linien, Lichtlauf */
.hero{padding:var(--sp-24) 0 var(--sp-32);overflow:hidden}
@media(max-width:767px){.hero{padding:56px 0 64px}}
.hero .wrap{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.hero .wrap{grid-template-columns:1.2fr .9fr;gap:56px}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px}
.hero .eyebrow svg{width:12px;height:12px;flex:none}
.hero h1,.h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-display);margin:16px 0 18px}
.hero .lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-muted);max-width:46ch;margin:0 0 28px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero.small{padding:var(--sp-16) 0 var(--sp-24)}
.hero.small .wrap{grid-template-columns:1fr}
.hero.small .wrap>div{max-width:820px}
.hero.small h1{max-width:18ch}
/* Leistungs-/Kontakt-Hero: Dichte S (mit Hero-Boost = 12 %), keine Linien, kein Lichtlauf */
.hero.small.pattern{--pattern-alpha:calc(var(--pattern-s) * var(--pattern-hero-boost))}
/* Scan-Panel (Produktobjekt) */
.scan{background:var(--bg-tint);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;min-width:0}
.scan .t{font-weight:600;font-size:17px;margin-top:8px;line-height:1.3}
.scan .hint{font-size:14px;color:var(--text-muted);margin:6px 0 0}
.scan .row{display:flex;gap:8px;margin-top:16px}
.scan input{flex:1;height:var(--btn-h);border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--bg);color:var(--text);padding:0 12px;font:inherit;font-size:14px;min-width:0}
.scan input:focus-visible{outline:none;box-shadow:var(--focus)}
.scan .row .btn{padding:0 16px}
.scan .ex{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-top:18px;letter-spacing:.05em;text-transform:uppercase}
.scan .ex::after{content:"";flex:1;height:1px;background:var(--border)}
.scan .kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.scan .kpi{border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;background:var(--bg);min-width:0}
.scan .kpi b{font-family:var(--font-mono);font-size:28px;font-weight:600;display:block;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.scan .kpi small{font-size:12px;color:var(--text-faint);display:block;margin-top:4px;line-height:1.4}
@media(max-width:479px){.scan .kpis{grid-template-columns:1fr}.scan .kpi{display:flex;align-items:baseline;gap:12px}.scan .kpi b{min-width:88px}.scan .kpi small{margin-top:0}}
.scan .note{font-size:12px;color:var(--text-faint);margin:14px 0 0;line-height:1.5}
.scan .note a{color:var(--accent);text-decoration:none}

/* Leistungen: 3 gleich grosse Kacheln */
.tiles{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:768px){.tiles{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1024px){.tiles{gap:24px}}
.tile{display:flex;flex-direction:column}
.tile .ico{margin-bottom:20px}
.tile h3{margin-bottom:10px}
.tile p{margin:0;color:var(--text-muted)}
.tile .facts{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:14px;color:var(--text-muted);display:grid;gap:10px}
.tile .facts div{display:flex;gap:12px;align-items:flex-start}
.tile .facts .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);flex:none;width:58px;padding-top:3px}
.tile .facts .v{min-width:0}
.tile .facts .v.price{color:var(--text);font-weight:500}
.tile .link{margin-top:auto;padding-top:22px;font-size:15px}

/* Beweis */
.kpis4{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:768px){.kpis4{grid-template-columns:repeat(4,1fr)}}
.kpi-t{padding:22px 20px}
.kpi-t b{font-family:var(--font-mono);font-size:var(--fs-kpi);font-weight:600;letter-spacing:-.02em;line-height:1.1;display:block;font-variant-numeric:tabular-nums}
.kpi-t span{display:block;margin-top:8px;font-size:14px;color:var(--text-muted);line-height:1.4}
.proof-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
.proof-grid .card{padding:24px}
.proof-grid .k{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint)}
.proof-grid h3{font-size:18px;line-height:1.3;margin:10px 0 8px}
.proof-grid p{margin:0;color:var(--text-muted);font-size:15px}
.commit{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.commit li{display:flex;gap:16px;align-items:flex-start;padding:18px 24px;border-bottom:1px solid var(--border)}
.commit li:last-child{border-bottom:0}
.commit .ic{width:24px;height:24px;color:var(--accent);margin-top:1px}
.commit b{display:block;font-weight:600;margin-bottom:2px}
.commit span{color:var(--text-muted);font-size:15px}

/* Eingebetteter Produkt-Screen: Schema Arbeitsraum (Light) im dunklen Auftritt. Muster nur in der Topbar. */
.arbeitsraum.frame{background:var(--bg);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;text-align:left}
.frame .app{display:grid;grid-template-columns:1fr;min-height:380px}
@media(min-width:1024px){.frame .app{grid-template-columns:220px minmax(0,1fr)}}
.frame .side{background:var(--side-bg);color:var(--side-text);padding:14px 10px;display:none;flex-direction:column;gap:2px}
@media(min-width:1024px){.frame .side{display:flex}}
.frame .side .logo{color:var(--btn-primary-fg);padding:6px 8px 14px}
.frame .side .logo img.lg{height:18px}
.frame .side .co{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid var(--side-border);margin-bottom:6px;font-weight:600;color:var(--btn-primary-fg);font-size:13px}
.frame .side .co .ini{width:24px;height:24px;border-radius:6px;background:var(--accent-dark);color:var(--accent-strong-dark);font-family:var(--font-mono);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.frame .side .grp{font-size:11px;color:var(--side-muted);letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono);padding:12px 8px 4px}
.frame .side .it{display:flex;align-items:center;gap:10px;height:var(--nav-item-h);padding:0 8px;border-radius:8px;font-weight:500;font-size:13px;color:var(--side-text);white-space:nowrap}
.frame .side .it.active{background:var(--side-active);color:var(--btn-primary-fg)}
.frame .side .it .ic{opacity:.9}
.frame .side .it .n{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--side-active);padding:1px 6px;border-radius:6px}
.frame .side .agent{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;font-size:13px}
.frame .side .agent .av{width:20px;height:20px;border-radius:50%;background:var(--accent-dark);color:var(--accent-strong-dark);font-family:var(--font-mono);font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}
.frame .side .agent .st{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.frame .main{display:flex;flex-direction:column;min-width:0}
.frame .topbar{height:var(--topbar-h);border-bottom:1px solid var(--border-strong);display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg);--pattern-alpha:10%}
.frame .topbar .crumb{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.frame .topbar .crumb b{font-size:var(--fs-title);font-weight:var(--fw-title);color:var(--text)}
.frame .topbar .crumb .sub{display:none} @media(min-width:1280px){.frame .topbar .crumb .sub{display:inline}}
.frame .topbar .search{height:30px;border:1px solid var(--border-strong);border-radius:6px;padding:0 10px;display:none;align-items:center;gap:6px;color:var(--text-faint);font-size:12px;min-width:200px;background:var(--bg-inset);font-weight:500}
@media(min-width:1280px){.frame .topbar .search{display:inline-flex}}
.frame .topbar .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.frame .chip{height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.frame .chip.ok{background:var(--ok-soft);color:var(--ok)} .frame .chip.warn{background:var(--warn-soft);color:var(--warn)}
.frame .chip .ic{width:12px;height:12px;stroke-width:2.2}
@media(max-width:767px){.frame .topbar .chip{display:none}}
@media(max-width:479px){.frame .hide-m{display:none}}
.frame .work{padding:16px;display:grid;gap:16px;background:var(--bg-inset);flex:1;min-width:0;align-content:start}
@media(min-width:1024px){.frame .work{grid-template-columns:1.15fr .85fr;padding:20px}}
.frame .kpis{grid-column:1/-1;display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:768px){.frame .kpis{grid-template-columns:repeat(4,1fr)}}
.frame .kpi{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-ring),var(--shadow-card);padding:14px 16px;min-width:0}
.frame .kpi .l{font-size:12px;color:var(--text-faint);font-weight:500}
.frame .kpi .v{font-size:var(--fs-kpi);font-weight:600;letter-spacing:var(--ls-kpi);line-height:1.2;margin:4px 0 2px;font-variant-numeric:tabular-nums}
@media(max-width:767px){.frame .kpi .v{font-size:24px}}
.frame .kpi .d{font-size:12px;color:var(--ok);font-weight:500}
.frame .pcard{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-ring),var(--shadow-card);min-width:0}
.frame .pcard .hd{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;font-size:var(--fs-panel);font-weight:var(--fw-panel)}
.frame .pcard .hd .r{margin-left:auto;font-weight:500;font-size:12px;color:var(--text-faint)}
.frame .pcard .bd{padding:0 16px 16px}
.frame .pcard.tbl{overflow:auto}
.frame .pcard .ft{padding:10px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-faint)}
.frame .todo{list-style:none;margin:0;padding:0}
.frame .todo li{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid var(--border);font-size:13px;line-height:18px;padding:4px 0}
.frame .todo li:last-child{border-bottom:0}
.frame .chk{width:18px;height:18px;border-radius:6px;border:1px solid var(--border-strong);display:grid;place-items:center;flex:none;color:var(--btn-primary-fg)}
.frame .chk.on{background:var(--ok);border-color:var(--ok)}
.frame .chk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.frame .todo .done{color:var(--text-faint);text-decoration:line-through}
.frame .todo .go{margin-left:auto;color:var(--accent);font-weight:500;font-size:12px;white-space:nowrap;text-decoration:none}
.frame .prog{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.frame .prog .t{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--text-muted)} .frame .prog .t b{color:var(--text);white-space:nowrap}
.frame .prog .bar{height:8px;border-radius:999px;background:var(--bg-tint);overflow:hidden;margin-top:8px}
.frame .prog .bar i{display:block;height:100%;width:84%;background:var(--accent);border-radius:999px}
.frame table{width:100%;border-collapse:collapse;font-size:var(--fs-table);line-height:18px}
.frame table.wide{min-width:640px}
.frame th{height:var(--th-h);text-align:left;font-weight:500;color:var(--text-muted);border-bottom:1px solid var(--border-strong);padding:0 12px;white-space:nowrap}
.frame td{height:var(--row-h);border-bottom:1px solid var(--border);padding:0 12px;white-space:nowrap;vertical-align:middle}
.frame tbody tr:last-child td{border-bottom:0}
.frame th:first-child,.frame td:first-child{padding-left:16px} .frame th:last-child,.frame td:last-child{padding-right:16px}
.frame td.wrap{white-space:normal;min-width:180px}
.frame .by{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-weight:500} .frame .by .mk{color:var(--text)}
.frame .safe{grid-column:1/-1;display:flex;gap:10px;align-items:center;font-size:12px;line-height:16px;color:var(--text-muted);background:var(--support);border-radius:8px;padding:10px 12px}
.frame .safe .ic{color:var(--accent)}
.frame .fchips{display:flex;gap:8px;overflow:auto;padding:0 0 2px;scrollbar-width:none} .frame .fchips::-webkit-scrollbar{display:none}
.frame .fchip{height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-ring);font-size:13px;font-weight:500;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.frame .fchip .n{font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.frame .fchip.on{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:none} .frame .fchip.on .n{color:var(--btn-primary-fg);opacity:.7}
.frame .work.single{grid-template-columns:1fr}
/* Baustein 2: Entwurfskarte (gestrichelt = unbestaetigt) */
.frame .draft{border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface);padding:16px}
.frame .draft .kick{font-size:12px;color:var(--text-faint);font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .frame .draft .kick .mk{color:var(--text)}
.frame .draft .kick .badge{margin-left:auto}
.frame .draft h4{font-size:var(--fs-title);font-weight:var(--fw-title);line-height:1.25;margin:6px 0 6px}
.frame .draft .why{margin:0 0 12px;color:var(--text-muted);font-size:13px;line-height:18px}
.frame .draft .txt{border-radius:8px;background:var(--bg-inset);padding:12px;color:var(--text-muted);font-size:13px;line-height:20px;white-space:pre-line}
.frame .draft .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.frame .draft .note{font-size:12px;color:var(--text-faint);margin-top:10px;display:flex;align-items:center;gap:6px}
.frame .detail{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:1024px){.frame .detail{grid-template-columns:1fr 1.1fr}}
.frame .meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;line-height:18px;margin:0 0 12px}
.frame .meta dt{color:var(--text-faint);font-weight:500;margin:0} .frame .meta dd{margin:0;min-width:0}
.frame .msg{font-size:13px;line-height:20px;color:var(--text);white-space:pre-line}
.frame-cap{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:13px;color:var(--text-faint)}
.frame-cap .mk{width:8px;height:8px}
.frame + .frame-cap{margin-bottom:40px}
.hub-points{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px}
@media(min-width:768px){.hub-points{grid-template-columns:repeat(3,1fr)}}
.hub-points .card{padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.hub-points .ico{width:36px;height:36px} .hub-points .ico .ic{width:20px;height:20px}
.hub-points b{display:block;font-weight:600;margin-bottom:2px}
.hub-points span{font-size:14px;color:var(--text-muted)}

/* Preise: offene 5-Stufen-Leiter */
.ladder{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:768px){.ladder{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.ladder{grid-template-columns:repeat(5,1fr);gap:12px}}
.step{padding:24px 20px;display:flex;flex-direction:column;position:relative}
.step .n{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint)}
.step h3{font-size:18px;line-height:1.25;margin:10px 0 8px}
.step .price{font-family:var(--font-mono);font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.step .price small{font-family:var(--font-sans);font-size:13px;font-weight:400;color:var(--text-muted);letter-spacing:0}
.step p{margin:0;font-size:14px;color:var(--text-muted)}
.step ul{margin:14px 0 0;padding:0;list-style:none;font-size:13px;color:var(--text-muted);display:grid;gap:6px}
.step li{display:flex;gap:8px;align-items:flex-start} .step li .ic{width:14px;height:14px;color:var(--accent);margin-top:2px;stroke-width:2.2}
.step .keep{margin-top:auto;padding-top:14px;font-size:13px;color:var(--text-faint);border-top:1px solid var(--border)}
.step .keep b{color:var(--text-muted);font-weight:500}
.step ul + .keep{margin-top:18px}
.step.rec{border-color:var(--accent)}
.step .rec-badge{position:absolute;top:-12px;left:20px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-strong);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;white-space:nowrap}
.ladder-note{margin-top:24px;font-size:14px;color:var(--text-muted);max-width:720px}
.pilot{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:1024px){.pilot{grid-template-columns:1.1fr .9fr;align-items:start}}
.pilot .big{font-family:var(--font-mono);font-size:var(--fs-kpi);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:8px 0 4px}
.pilot .big small{font-family:var(--font-sans);font-size:14px;font-weight:400;color:var(--text-muted);letter-spacing:0;margin-left:8px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--text-muted);font-size:15px}
.checks li b{color:var(--text);font-weight:500}
.checks .ic{width:20px;height:20px;color:var(--accent);flex:none;margin-top:1px}

/* FAQ */
.faq{max-width:760px;display:grid;gap:8px}
.faq details{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.faq summary{list-style:none;display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;font-weight:600;font-size:16px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-md)}
.faq summary .ic{margin-left:auto;width:20px;height:20px;color:var(--text-faint);transition:transform var(--dur-base) var(--ease)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq p{margin:0;padding:0 20px 20px;color:var(--text-muted);font-size:15px}
@media(prefers-reduced-motion:reduce){.faq summary .ic{transition:none}}

/* Kontakt-Formular mit Anliegen-Chips */
.contact{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:1024px){.contact{grid-template-columns:1.15fr .85fr;align-items:start}}
.form{display:grid;gap:18px}
.form .row2{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:480px){.form .row2{grid-template-columns:1fr 1fr}}
.form .l{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.form .l small{font-weight:400;color:var(--text-faint)}
.form input[type="text"],.form input[type="email"],.form input[type="url"],.form input[type="tel"],.form textarea{width:100%;height:var(--input-h);border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--bg-tint);color:var(--text);padding:0 12px;font:inherit;font-size:15px}
.form textarea{height:auto;min-height:120px;padding:12px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:none;box-shadow:var(--focus);border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;display:inline-flex}
.chips input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.chips span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--border-strong);font-size:14px;font-weight:500;color:var(--text-muted);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.chips input:checked+span{background:var(--accent);color:var(--accent-strong);border-color:var(--accent)}
.chips input:focus-visible+span{box-shadow:var(--focus)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-muted);line-height:1.45}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.check a{color:var(--accent);text-decoration:none}
.form .submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form .meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--border)}
.steps li:last-child{border-bottom:1px solid var(--border)}
.steps .num{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent);width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;flex:none}
.steps b{display:block;font-weight:600;margin-bottom:2px}
.steps span{font-size:14px;color:var(--text-muted)}
.aside .k{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.aside .k.mt{margin-top:32px}
.assure{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:40px;padding-top:24px;border-top:1px solid var(--border);font-size:14px;color:var(--text-muted)}
.assure span{display:inline-flex;align-items:center;gap:8px} .assure .ic{color:var(--accent)}
.contact-lines{display:grid;gap:8px;font-size:15px}
.contact-lines a{text-decoration:none;color:var(--text)} .contact-lines .mono{font-size:14px}
.contact-lines div{display:flex;align-items:center;gap:10px} .contact-lines .ic{color:var(--text-faint)}

/* Leistungsseite: Module, Ablauf, Transparenz */
.mods{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:480px){.mods{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.mods{grid-template-columns:repeat(4,1fr)}}
.mods .card{padding:22px}
.mods .ico{width:36px;height:36px;margin-bottom:16px} .mods .ico .ic{width:20px;height:20px}
.mods h3{font-size:18px;margin-bottom:6px}
.mods p{margin:0;font-size:14px;color:var(--text-muted)}
.flow{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.flow{grid-template-columns:repeat(3,1fr)}}
.flow .card{padding:24px}
.flow .num{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.flow .num::after{content:"";flex:1;height:1px;background:var(--border)}
.flow h3{font-size:20px;margin:14px 0 6px}
.flow .time{font-family:var(--font-mono);font-size:13px;color:var(--text);font-weight:500;margin-bottom:8px}
.flow p{margin:0;font-size:15px;color:var(--text-muted)}
.trans{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.trans div{display:grid;gap:4px 24px;grid-template-columns:1fr;padding:18px 24px;border-bottom:1px solid var(--border)}
@media(min-width:768px){.trans div{grid-template-columns:200px 1fr}}
.trans div:last-child{border-bottom:0}
.trans b{font-weight:600} .trans span{color:var(--text-muted);font-size:15px}
.cta-sec{text-align:center}
.cta-sec .wrap{max-width:calc(720px + 2 * var(--gutter))}
.cta-sec .sec-head{margin-left:auto;margin-right:auto;margin-bottom:0}
.cta-sec .scan{margin:32px auto 0;max-width:520px;text-align:left}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:64px 0 32px;font-size:14px;color:var(--text-muted);margin-top:32px}
.site-footer .top{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:768px){.site-footer .top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer .about p{margin:16px 0 0;max-width:34ch;font-size:14px}
.site-footer .col b{display:block;color:var(--text);font-weight:600;margin-bottom:12px;font-size:14px}
.site-footer .col a{display:block;text-decoration:none;color:var(--text-muted);padding:4px 0}
.site-footer .col a:hover{color:var(--text)}
.site-footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:var(--text-faint);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;line-height:1.5}


/* ===== Live-Ergaenzungen irsali.de (19.09.2026, Umsetzungsplan CI v2 Phase 2) =====
   Nur Tokens. Ergaenzt den 1:1 uebernommenen Mockup-Block oben um: Website-Light-Schema (Theme-Toggle,
   Imad-Entscheidung 19.09.2026), Theme-Button, echte Scan-Ergebnisse, Formular-Meldungen, Honeypot. */

/* Text auf Akzentflaeche: Dark = Off-Black, Light = Weiss */
:root{--on-accent:var(--accent-strong-dark)}
.btn.primary,.chips input:checked+span,.step .rec-badge{color:var(--on-accent)}

/* Website-Light: neutrale Arbeitsraum-Werte + Auftritt-Typo/Radien/Abstaende (CI_Farben_Typografie_Tokens.md, Version 2) */
html[data-theme="light"]{
  --bg:#ffffff;--bg-inset:#fafafa;--bg-tint:#f5f5f5;--surface:#ffffff;--surface-strong:#f5f5f5;--border:rgba(0,0,0,.08);--border-strong:#e5e5e5;
  --text:#171717;--text-muted:#525252;--text-faint:#737373;
  --accent:var(--accent-light);--accent-bright:var(--accent-bright-light);--accent-strong:var(--accent-strong-light);--support:var(--support-light);
  --on-accent:var(--btn-primary-fg,#ffffff);--btn-primary-fg:#ffffff;
  --ok:#1c7a49;--warn:#9a6a08;--bad:#b8392c;--ok-soft:rgba(28,122,73,.10);--warn-soft:rgba(154,106,8,.08);--bad-soft:rgba(184,57,44,.10);
  --shadow-card:0 1px 2px rgba(0,0,0,.05);--shadow-pop:0 0 0 1px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.04),0 16px 24px -8px rgba(0,0,0,.06);
  --focus:0 0 0 2px #fff,0 0 0 4px var(--accent);
  --pattern-s:10%;--pattern-m:18%;--pattern-l:28%;--pattern-alpha:var(--pattern-s);--pattern-hero-boost:1;
  color-scheme:light;
}
html[data-theme="light"] .card,html[data-theme="light"] .commit,html[data-theme="light"] .trans,html[data-theme="light"] .faq details{box-shadow:var(--shadow-card)}
html[data-theme="light"] .btn.primary:hover{background:var(--accent-strong)}
html[data-theme="light"] .arbeitsraum.frame{box-shadow:var(--shadow-pop)}
html[data-theme="light"] .logo img.lg-w{display:none}
html[data-theme="light"] .logo img.lg-b{display:block}
html[data-theme="light"] .side .logo img.lg-w{display:block}
html[data-theme="light"] .side .logo img.lg-b{display:none}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--text))}
.btn.ghost:hover{border-color:var(--text-faint)}

/* Theme-Button im Header */
.theme-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);border:1px solid transparent;background:none;color:var(--text-muted);cursor:pointer;padding:0;flex:none}
.theme-btn:hover{color:var(--text);border-color:var(--border)}
.theme-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.theme-btn .ic{width:20px;height:20px}
.theme-btn .sun{display:none}
html[data-theme="light"] .theme-btn .sun{display:block}
html[data-theme="light"] .theme-btn .moon{display:none}

/* Hero-Eyebrow: Statuspunkt statt Glyphe (Imad-Entscheidung 19.09.2026) */
.hero .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px var(--ok-soft)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Scan: Ladezustand + echte Ergebnisse (ersetzen die Beispiel-Ausgabe) */
.scan .row .btn[disabled]{opacity:.7;cursor:progress}
.scan-msg{font-size:13px;color:var(--text-muted);margin:10px 0 0;min-height:0;line-height:1.45}
.scan-msg:empty{display:none}
.scan-msg.err{color:var(--bad)}
.scan-res[hidden]{display:none}
.scan-res .who{font-size:13px;color:var(--text-muted);margin:10px 0 0;overflow-wrap:anywhere}
.scan-res .who b{color:var(--text);font-weight:600}
.sig{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.sig li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px}
.sig li:last-child{border-bottom:0}
.sig .lbl{color:var(--text-muted)}
.sig .val{font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sig .val::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sig .val.good{color:var(--ok)} .sig .val.gap{color:var(--warn)}
.bots{display:grid;gap:8px;margin-top:12px}
.bot{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.bot .av{width:28px;height:28px;border-radius:50%;background:var(--support);color:var(--accent);display:grid;place-items:center;flex:none}
.bot .av svg{width:18px;height:18px}
.bot b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.bot span{display:block;font-size:13px;color:var(--text-muted);line-height:1.45;margin-top:2px}
.scan-cta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px}
.scan-cta:empty{display:none}
.scan-cta small{font-size:12px;color:var(--text-faint)}

/* Formular: Meldungen, Honeypot, Nach-Absenden-Vorschau */
.form-msg{font-size:14px;margin:0;line-height:1.45}
.form-msg:empty{display:none}
.form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--bad)}
.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.after{margin-top:8px;font-size:14px;color:var(--text-muted);line-height:1.5}
.after:empty{display:none}
.after b{color:var(--text);font-weight:600}
.after .tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-sm);font-size:12px;font-weight:500;margin:6px 6px 0 0}
/* Beispiel-Hub: im zweispaltigen Desktop-Layout Kanal-Spalte ausblenden, damit Status sichtbar bleibt (Imad-Entscheidung 19.09.2026) */
@media(min-width:1024px){.frame .work:not(.single) .pcard.tbl .hide-m{display:none}}
.after .tag.good{background:var(--ok-soft);color:var(--ok)} .after .tag.gap{background:var(--warn-soft);color:var(--warn)}
/* Scan-Ergebnis mobil: CTA darf umbrechen statt ueberzulaufen, Messwerte bleiben einzeilig */
.scan-cta .btn{white-space:normal;height:auto;min-height:var(--btn-h);padding:8px 16px;text-align:center;line-height:1.3;max-width:100%}
.scan-res .kpi b{white-space:nowrap;flex:none}
/* Scan-Ergebnis: gefundene Luecken als Liste (19.09.2026, Assistenten = Hub-Rollen) */
.gaps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.gaps li{position:relative;padding-left:16px;font-size:13px;line-height:1.45;color:var(--text-muted)}
.gaps li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--warn)}