/* 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:#1a7345;--warn:#8a5f07;--bad:#b8392c;--ok-soft:rgba(26,115,69,.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}
/* Balanced headline breaks, hyphenated compounds kept together (wrap again below 360 px to avoid overflow) (Mockup 02.10. point 06) */
h1,h2{text-wrap:balance}
.nb{white-space:nowrap}
@media(max-width:359px){.nb{white-space:normal}}
/* Short card texts without auto hyphenation, text-wrap:pretty instead; long running text keeps hyphens:auto (CI ch. 6),
   but only for words of 12+ chars with 5+ chars before/after the break (Mockup 02.10. point 05) */
p{hyphenate-limit-chars:12 5 5}
.card p,.tile .facts .v,.step p,.step .keep,.commit span,.hub-points span,.site-footer .about p,.scan .note{hyphens:manual;text-wrap:pretty}
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)}
/* Desktop: .body is transparent for the flex layout. Mobile: short text + link flow as one sentence, nothing is cut off
   (replaces the 2-line clamp with ellipsis; Mockup 02.10. point 08) */
.ann .body{display:contents}
.ann .short{display:none}
@media(max-width:767px){
  .ann{align-items:center;padding:8px 4px 8px var(--gutter)}
  .ann .body{display:block;flex:1 1 auto;min-width:0;line-height:19px}
  .ann .msg{display:inline;white-space:normal;overflow:visible}
  .ann .long{display:none} .ann .short{display:inline}
  .ann .cta{display:inline;white-space:nowrap}
}
@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}
/* Header CTA 'Prozess-Check anfragen' is longer than the old 'Erstgespräch': show from 560 px (below it lives in the menu),
   logo never shrinks under the theme button */
.site-header .logo{flex:none}
@media(min-width:560px){.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 */
/* Bottom 64 instead of 128: gap hero -> first section 160 px instead of 224 (Mockup 02.10. point 07) */
.hero{padding:var(--sp-24) 0 var(--sp-16);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)}
/* Mobile: 48 px instead of 96 below small heroes (contact page had 124 px between intro and form) */
@media(max-width:767px){.hero.small{padding-bottom:var(--sp-12)}}
.hero.small .wrap{grid-template-columns:1fr}
.hero.small .wrap>div{max-width:820px}
.hero.small h1{max-width:20ch}
/* 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}
/* Unit in Sora, smaller and muted instead of full-width mono; below 480 px the number sits above the text
   ("Automatisierungspotenzial," ran 5 px over the card edge at 375 px; Mockup 02.10. point 09) */
.scan .kpi b .u{font-family:var(--font-sans);font-size:18px;font-weight:500;color:var(--text-muted);margin-left:4px;letter-spacing:0}
@media(max-width:479px){.scan .kpis{grid-template-columns:1fr}.scan .kpi small{margin-top:4px}}
.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}

.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}
/* 320 px: 'Auftragsverarbeitungsvertrag' widened the flex item and was clipped at the card edge */
.commit li>div{min-width:0}
.commit b{hyphens:auto;overflow-wrap:break-word}
.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}
/* Example hub: below 1280 px the table spans the full width under the task list (incl. Kanal), from 1280 px side by side
   with more room for the table (Mockup 02.10. point 03, replaces 1.15fr/.85fr from 1024 px) */
@media(min-width:1024px){.frame .work{padding:20px}}
@media(min-width:1280px){.frame .work:not(.single){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.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}
/* Price ladder on one line (Mockup 02.10. point 04): from 1024 px stage, title, price, text, list and "Sie behalten"
   share rows across all five cards (subgrid); minmax(0,1fr) keeps long titles from widening a column.
   Without subgrid support the previous layout stays. */
@media(min-width:1024px){
  .ladder{grid-template-columns:repeat(5,minmax(0,1fr))}
  @supports (grid-template-rows:subgrid){
    .ladder{grid-template-rows:auto auto auto auto 1fr auto;row-gap:0}
    .step{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
    .step h3,.step .price,.step ul{align-self:start}
    .step .keep{margin-top:18px}
  }
}
.step p,.step .keep{overflow-wrap:break-word}
/* 1024-1279 px: only ~145 px text per column; tighter padding, 16 px card titles, and only very long words
   (e.g. "Produktbeschreibungen") may be hyphenated */
@media(min-width:1024px) and (max-width:1279px){.step{padding:24px 16px}.step h3{font-size:var(--fs-body)}.step p,.step .keep{hyphens:auto;hyphenate-limit-chars:14 6 6}}
.ladder-note{margin-top:24px;font-size:14px;color:var(--text-muted);max-width:720px}
.ladder-cta{margin-top:24px} /* next step right after the price comparison */
.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 legend.l{padding:0} /* native legend padding indented 'Worum geht es?' by 2 px */
.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}
/* Own 18 px checkbox from tokens instead of the grey native box (accent-color only applied once ticked);
   border in text-faint so the empty box reaches the 3:1 UI contrast in both schemes */
.check input{appearance:none;-webkit-appearance:none;position:relative;display:grid;place-items:center;border:1px solid var(--text-faint);border-radius:var(--r-sm);background:var(--bg);cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.check input::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{opacity:1}
.check input:hover{border-color:var(--text-muted)}
.check input:focus-visible{outline:none;box-shadow:var(--focus)}
@media(prefers-reduced-motion:reduce){.check input{transition:none}}
.check a{color:var(--accent);text-decoration:none}
.b2b-note{margin:0;padding-left:12px;border-left:2px solid var(--accent);font-size:14px;line-height:1.45;color:var(--text)}
.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:#1a7345;--warn:#8a5f07;--bad:#b8392c;--ok-soft:rgba(26,115,69,.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);
   zweispaltig erst ab 1280 px (Mockup 02.10. Punkt 03), darunter volle Breite mit Kanal */
@media(min-width:1280px){.frame .work:not(.single) .pcard.tbl .hide-m{display:none}}
.frame .work:not(.single) .pcard.tbl{overflow:visible}
/* Mobile (< 768): rows as a list (customer, assistant, status) instead of a table cut off at the side */
@media(max-width:767px){
  .frame .work:not(.single) .pcard.tbl thead{display:none}
  .frame .work:not(.single) .pcard.tbl table,.frame .work:not(.single) .pcard.tbl tbody{display:block}
  .frame .work:not(.single) .pcard.tbl tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:2px;padding:10px 16px;border-bottom:1px solid var(--border)}
  .frame .work:not(.single) .pcard.tbl tr:last-child{border-bottom:0}
  .frame .work:not(.single) .pcard.tbl td{display:block;height:auto;padding:0;border:0;white-space:normal}
  .frame .work:not(.single) .pcard.tbl td:nth-child(1){font-weight:500;color:var(--text)}
  .frame .work:not(.single) .pcard.tbl td:nth-child(3){grid-column:1;font-size:12px}
  .frame .work:not(.single) .pcard.tbl td:nth-child(4){grid-column:2;grid-row:1/3;align-self:center}
  .frame .work:not(.single) .pcard.tbl td.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)}
/* Legal pages in the v2 frame (Mockup 02.10. point 01): same header/footer as the start page, no pattern
   (application matrix ch. 11), reading width 720. Short pages as rows "label | content", the long privacy
   policy keeps its headings above the text (a label column would leave only ~500 px of text). */
.legal-page{padding:var(--sp-16) 0 var(--sp-24)}
.legal-page .doc{max-width:720px}
.legal-page h1{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-h2);margin:12px 0 0;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.legal-page dl{margin:var(--sp-12) 0 0;border-top:1px solid var(--border)}
.legal-page .row{display:grid;gap:var(--sp-2);padding:var(--sp-6) 0;border-bottom:1px solid var(--border)}
@media(min-width:768px){.legal-page .row{grid-template-columns:200px 1fr;gap:24px}}
.legal-page dt{font-size:var(--fs-small);font-weight:600;color:var(--text-muted);padding-top:2px;line-height:1.45}
.legal-page dd{margin:0;color:var(--text);font-size:var(--fs-body);line-height:var(--lh-body)}
.legal-page dd p{margin:0 0 8px}.legal-page dd p:last-child{margin:0}
.legal-page a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.legal-text h1 + p{margin:12px 0 0;color:var(--text-faint);font-size:var(--fs-small)}
.legal-text h2{font-size:var(--fs-body);line-height:1.4;font-weight:600;color:var(--text);margin:var(--sp-12) 0 var(--sp-2);padding-top:var(--sp-6);border-top:1px solid var(--border);scroll-margin-top:calc(var(--nav-h) + 16px)}
.legal-text p{margin:0 0 12px;color:var(--text-muted);line-height:var(--lh-body)}
.legal-text p strong{color:var(--text);font-weight:600}
.legal-text ul{margin:0 0 12px;padding-left:20px;color:var(--text-muted);display:grid;gap:6px}
.legal-text .legal-callout{margin:var(--sp-4) 0;padding:var(--sp-4);border:1px solid var(--accent);border-radius:var(--r-md);background:var(--support)}
.legal-text .legal-callout p{color:var(--text);margin:0}
/* Notice page (DSGVO-Report discontinued, Mockup 02.10. point 02): one-column head as on the contact page,
   two cards, system buttons instead of mono pills */
.hero.small.notice-hero{padding-bottom:var(--sp-12)}
.sec.notice-sec{padding-top:0}
.notice{display:grid;gap:16px}
@media(min-width:768px){.notice{grid-template-columns:1.2fr .8fr}}
.notice .card h2{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-h3);margin:0 0 8px}
.notice .card p{margin:0;color:var(--text-muted)}
.notice .card p a{color:var(--accent);text-underline-offset:3px}
.notice .card .ctas{margin-top:20px}
.notice .card .fn{margin-top:16px;font-size:var(--fs-small)}
.notice .card.alt{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.notice .card.alt p{color:var(--text);font-weight:500}