/* ============================================================
   app.css — Design-System „Warm Editorial Light" (ADR-011)
   Einzige Stylesheet-Quelle. Inline-Styles nur für Laufzeitwerte.
   ============================================================ */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face { font-family:'DM Sans'; src:url('/static/fonts/dm-sans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/static/fonts/dm-sans-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/static/fonts/dm-sans-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('/static/fonts/instrument-serif-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('/static/fonts/instrument-serif-400italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/static/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/static/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

/* ---------- Design-Tokens ---------- */
:root {
	--bg:#F4F0E6; --bg-card:#FFFDF8; --bg-section:#EDE7D8;
	--border:#E2DBC9; --border-hi:#CFC6AE;
	--text:#1C1E26; --text-2:#565B68; --text-3:#8A8E99;
	--blue:#1E4FD8; --blue-dim:rgba(30,79,216,0.08);
	--green:#15803D; --green-dim:rgba(21,128,61,0.10);
	--amber:#B45309; --amber-dim:rgba(180,83,9,0.10);
	--red:#B91C1C; --red-dim:rgba(185,28,28,0.10);
	--f-display:'Instrument Serif',Georgia,serif;
	--f-ui:'DM Sans',system-ui,sans-serif;
	--f-mono:'JetBrains Mono',monospace;
	--r:10px; --r-lg:16px;
	--shadow-card:0 1px 2px rgba(28,30,38,0.04),0 8px 24px rgba(28,30,38,0.06);
	--shadow-pop:0 14px 40px rgba(28,30,38,0.12);
}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--f-ui); font-size:1rem; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
a { color:var(--blue); }
img { max-width:100%; }

/* ---------- Layout ---------- */
.container { max-width:1180px; margin:0 auto; padding:0 2.5rem; }
.container-narrow { max-width:720px; margin:0 auto; padding:0 1.5rem; }
.container-page { max-width:760px; margin:0 auto; padding:3rem 1.5rem; }
.section { padding-top:5.5rem; padding-bottom:5.5rem; }
.section-sm { padding-top:3rem; padding-bottom:3rem; }
.pt-page { padding-top:3rem; padding-bottom:4rem; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stack { display:flex; flex-direction:column; gap:0.9rem; }
.stack-sm { display:flex; flex-direction:column; gap:0.38rem; }
.row { display:flex; align-items:center; gap:0.75rem; }
.row-wrap { flex-wrap:wrap; }
.guide-cta-row { justify-content:center; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.center-800 { max-width:800px; margin-left:auto; margin-right:auto; }
.mb-1 { margin-bottom:0.65rem; }
.mb-2 { margin-bottom:0.5rem; }
.mb-3 { margin-bottom:0.9rem; }
.mb-4 { margin-bottom:1.25rem; }
.mb-5 { margin-bottom:2.5rem; }
.mt-2 { margin-top:0.75rem; }
.mt-3 { margin-top:2rem; }
.mt-4 { margin-top:1.25rem; }
.mt-6 { margin-top:2rem; }
.ml-1 { margin-left:0.5rem; }
.mb-6 { margin-bottom:2rem; }
.mb-title { margin:1.5rem 0 2rem; }
.section-spacer { margin:2rem 0; }
.center-block { display:block; margin:0 auto; text-align:center; }
.items-baseline { align-items:baseline; }
.items-start { align-items:flex-start; }
.hidden { display:none; }

/* ---------- Typografie ---------- */
.display { font-family:var(--f-display); font-style:italic; font-weight:400; line-height:1.15; }
.display-xl { font-size:clamp(2.6rem,4.5vw,4rem); line-height:1.06; }
.display-lg { font-size:clamp(1.8rem,3.5vw,2.4rem); }
.display-md { font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.25; }
.display-sm { font-size:1.35rem; line-height:1.2; }
.kicker { font-family:var(--f-ui); font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); }
.kicker-blue { color:var(--blue); }
.kicker-amber { color:var(--amber); }
.lead { font-size:1rem; color:var(--text-2); line-height:1.75; }
.muted { color:var(--text-2); }
.subtle { color:var(--text-3); }
.text-amber { color:var(--amber); }
.small { font-size:0.85rem; }
.mono { font-family:var(--f-mono); }
.mono-meta { font-family:var(--f-mono); font-size:0.78rem; color:var(--text-3); }
.text-strong { color:var(--text); }
.text-green { color:var(--green); }
.text-red { color:var(--red); }
.title-rule { font-size:1.1rem; font-weight:600; padding-bottom:0.5rem; border-bottom:1px solid var(--border); margin-bottom:1.25rem; }

/* ---------- Navigation ---------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:1.1rem 2.5rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid transparent; transition:background 0.3s,border-color 0.3s; }
.nav.scrolled { background:rgba(244,240,230,0.88); backdrop-filter:blur(14px); border-color:var(--border); }
.nav-inner { display:flex; align-items:center; gap:2.25rem; flex-wrap:wrap; }
.nav-brand { font-weight:600; font-size:0.95rem; color:var(--text); text-decoration:none; }
.nav-brand b { color:var(--blue); }
.nav-links { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.nav-link { font-size:0.85rem; color:var(--text-2); text-decoration:none; }
.nav-link:hover { color:var(--text); }
.nav-link-primary { color:var(--blue); font-weight:500; }
.badge-beta { font-size:0.72rem; font-weight:600; color:var(--text-2); border:1px solid var(--border-hi); padding:0.24rem 0.7rem; border-radius:100px; letter-spacing:0.08em; text-decoration:none; }
.badge-beta:hover { color:var(--text); border-color:var(--text-3); }

/* Schlanke Kopfzeile für Nicht-Landing-Seiten (UX9) */
.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.9rem 2.5rem; border-bottom:1px solid var(--border); background:var(--bg); }
.site-header-link { font-size:0.85rem; color:var(--text-2); text-decoration:none; }
.site-header-link:hover { color:var(--text); }
.site-header .badge-beta { margin-right:auto; }

/* ---------- Hero ---------- */
.hero-grid { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; max-width:1180px; margin:0 auto; padding:5rem 2.5rem 3rem; gap:3rem; }
.hero-copy { max-width:420px; margin-bottom:2.25rem; }

/* ---------- Buttons ---------- */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:0.7rem; background:var(--blue); color:#fff; font-family:var(--f-ui); font-weight:600; font-size:0.95rem; padding:0.85rem 1.7rem; border-radius:var(--r); border:none; cursor:pointer; text-decoration:none; transition:transform 0.15s,box-shadow 0.15s,background 0.15s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(30,79,216,0.28); }
.btn-primary-block { width:100%; }
.btn-primary-secondary { background:transparent; color:var(--text-2); border:1px solid var(--border); box-shadow:none; }
.btn-primary-secondary:hover { background:rgba(30,79,216,0.14); box-shadow:none; }
.btn-ghost { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--f-ui); font-size:0.85rem; font-weight:500; color:var(--blue); background:var(--blue-dim); border:1px solid rgba(30,79,216,0.25); padding:0.5rem 1rem; border-radius:var(--r); cursor:pointer; text-decoration:none; transition:background 0.15s; }
.btn-ghost:hover { background:rgba(30,79,216,0.14); }
.btn-text { font-family:var(--f-ui); font-size:0.82rem; color:var(--text-3); background:none; border:none; cursor:pointer; padding:0.5rem; text-decoration:none; transition:color 0.15s; }
.btn-text:hover { color:var(--text-2); }
.btn-neutral { display:inline-flex; align-items:center; gap:0.4rem; font-family:var(--f-ui); font-size:0.85rem; font-weight:500; color:var(--text-2); background:var(--bg-card); border:1px solid var(--border); padding:0.5rem 1rem; border-radius:var(--r); cursor:pointer; text-decoration:none; transition:border-color 0.15s; }
.btn-neutral:hover { border-color:var(--border-hi); }
.btn-dashed { display:block; width:100%; padding:0.75rem; background:transparent; border:1px dashed var(--border); border-radius:var(--r); color:var(--text-2); font-family:var(--f-ui); font-size:0.85rem; cursor:pointer; margin:0.75rem 0; transition:border-color 0.15s,color 0.15s; }
.btn-dashed:hover { border-color:var(--border-hi); color:var(--text); }
.btn-plain { background:none; border:none; cursor:pointer; font-family:var(--f-mono); padding:0; }

/* ---------- Tags & Badges (technisch → Mono erlaubt) ---------- */
.tag { font-family:var(--f-mono); font-size:0.68rem; padding:0.2rem 0.55rem; border-radius:4px; letter-spacing:0.04em; }
.t-dsgvo { background:var(--green-dim); color:var(--green); border:1px solid rgba(21,128,61,0.25); }
.t-saas { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(30,79,216,0.22); }
.t-oss { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(30,79,216,0.22); }
.t-self { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(180,83,9,0.25); }
.t-neutral { background:var(--bg-section); color:var(--text-2); border:1px solid var(--border-hi); }
.tag-help { cursor:help; }

/* ---------- Karten ---------- */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem; }
.card-lg { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.65rem; box-shadow:var(--shadow-card); }
.card-hover { transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s; }
.card-hover:hover { border-color:var(--border-hi); box-shadow:var(--shadow-pop); }
.card-title { font-size:1.1rem; font-weight:600; margin-bottom:0.6rem; }
.card-title-link { color:inherit; text-decoration:none; }
.card-title-link:hover { text-decoration:underline; }
.card-amber { background:var(--amber-dim); border-color:rgba(180,83,9,0.2); }
.table-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.code-block { display:block; background:var(--bg-section); border:1px solid var(--border); border-radius:var(--r); padding:1rem; font-family:var(--f-mono); font-size:0.82rem; white-space:pre-wrap; word-break:break-word; overflow-x:auto; }

/* ---------- Trust-Strip ---------- */
.trust-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-section); display:flex; justify-content:center; gap:5rem; padding:2rem; flex-wrap:wrap; }
.trust-num { font-family:var(--f-display); font-style:italic; font-size:2rem; line-height:1; color:var(--text); text-align:center; }
.trust-label { font-size:0.78rem; color:var(--text-2); letter-spacing:0.06em; text-transform:uppercase; margin-top:0.3rem; text-align:center; }
.trust-more { text-align:center; padding:1.5rem 2.5rem; }

/* ---------- Teaser-Box (NIS2, Hinweise) ---------- */
.teaser { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.75rem; background:var(--blue-dim); border:1px solid rgba(30,79,216,0.22); border-radius:var(--r-lg); text-decoration:none; transition:border-color 0.15s; }
.teaser:hover { border-color:var(--blue); }
.teaser-title { color:var(--text); font-weight:600; }
.hint-box { font-size:0.85rem; color:var(--text-2); text-align:center; max-width:520px; margin:1.5rem auto 0; padding:0.85rem 1.1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); line-height:1.6; }
.callout { font-size:0.88rem; color:var(--text-2); line-height:1.7; margin-bottom:1rem; padding:0.75rem 1rem; background:var(--blue-dim); border-left:3px solid rgba(30,79,216,0.3); border-radius:0 var(--r) var(--r) 0; }
.beta-hinweis { border-color:var(--border-hi); }

/* ---------- Dialoge ---------- */
.dialog { background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); padding:0; max-width:760px; width:90vw; }
.dialog-body { padding:1.5rem; }
.dialog-close { background:none; border:none; color:var(--text-3); font-size:1.2rem; cursor:pointer; line-height:1; padding:0; }
.table-scroll { overflow-x:auto; }

/* ---------- Wizard ---------- */
.step-wrap { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:3.5rem 1.5rem 2rem; }
.step-form { max-width:580px; width:100%; animation:fadeUp 0.3s 0.1s ease both; }
.q-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.65rem; margin-bottom:1.25rem; }
.q-grid-3 { grid-template-columns:1fr 1fr 1fr; }
/* Weiche (Schritt 1, Spec 2026-09-18 wizard-vereinheitlichung §2): zwei große
   Kacheln nebeneinander, auf schmalen Screens untereinander (Media-Query unten). */
.q-grid-start { grid-template-columns:1fr 1fr; gap:1rem; }
.q-tile { padding:1.6rem 1.5rem; }
.q-tile .card-title { margin-bottom:0.4rem; }
.q-opt { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:1.15rem 1.35rem; cursor:pointer; transition:border-color 0.15s,background 0.15s,transform 0.15s,box-shadow 0.15s; display:block; font-size:0.92rem; }
.q-opt:hover { border-color:var(--blue); background:var(--blue-dim); transform:translateY(-1px); box-shadow:0 4px 20px rgba(30,79,216,0.12); }
.q-opt:has(input:checked) { border-color:var(--blue); background:var(--blue-dim); box-shadow:inset 0 0 0 1px var(--blue); }
.q-opt:has(input:checked) .q-opt-sub { color:var(--text); }
/* Radio deckt das Label transparent ab: per Tastatur fokussier- und wählbar
   (WCAG 2.1.1/4.1.2 — Befund PD8), statt display:none das Control zu entfernen. */
.q-opt-input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.q-opt:has(input:focus-visible) { outline:2px solid var(--blue); outline-offset:2px; }
.q-opt-label { font-size:0.92rem; font-weight:500; color:var(--text); margin-bottom:0.25rem; }
.q-opt-sub { font-size:0.8rem; color:var(--text-2); }
.q-opt-check .q-opt-label { display:inline; }
.q-opt-check .q-opt-sub { margin-top:0.25rem; padding-left:1.45rem; }
.q-span { grid-column:1/-1; }
.q-check { margin-right:0.5rem; }
.progress-track { position:fixed; top:0; left:0; right:0; height:3px; background:var(--border); z-index:200; }
.progress-bar { height:100%; background:var(--blue); transition:width 0.4s cubic-bezier(0.4,0,0.2,1); }
.step-label { font-size:0.78rem; color:var(--text-3); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1.25rem; animation:fadeUp 0.3s ease both; }
.step-question { text-align:center; max-width:580px; margin-bottom:2.25rem; animation:fadeUp 0.3s 0.05s ease both; }
.step-help { text-align:center; max-width:480px; margin:-1.25rem 0 2rem; animation:fadeUp 0.3s 0.08s ease both; }
#nis2-fields { display:none; }
#nis2-toggle:has(input:checked) + #nis2-fields { display:flex !important; }
/* Gewerk-Feldblock (Spec 2026-09-17 gewerk-branchentools §1): analoges
   CSS-Only-Muster, aber mit Geschwister-Kombinator ~ statt + — die
   Handwerk-Kachel (#gewerk-toggle) steht in Schritt 3 VOR weiteren
   Branchen-Kacheln (health/kanzlei/bildung/allgemein), #gewerk-fields folgt
   erst nach der letzten Kachel im selben q-grid. */
#gewerk-fields { display:none; }
#gewerk-toggle:has(input:checked) ~ #gewerk-fields { display:flex !important; }
/* Zielgrößen-Unterfrage (Schritt 2, Spec 2026-09-18 wizard-vereinheitlichung
   §2): erscheint nur bei „1–5 Personen" (#team-toggle), gleiches Muster. */
#team-target-fields { display:none; }
#team-toggle:has(input:checked) ~ #team-target-fields { display:flex !important; }
.gewerk-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.35rem 0.85rem; }
.gewerk-opt { display:flex; align-items:center; gap:0.45rem; font-size:0.85rem; color:var(--text-2); cursor:pointer; }

/* ---------- Migration (Bestandsaufnahme) ---------- */
.t-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:1rem 1.25rem; margin-bottom:0.5rem; transition:border-color 0.15s; }
.t-card:has(input[type=checkbox]:checked) { border-color:var(--blue); }
.t-card-active { border-color:var(--blue); }
.t-card-label { display:flex; align-items:center; gap:0.6rem; cursor:pointer; font-size:0.88rem; font-weight:500; }
.t-details { display:none; margin-top:0.85rem; padding-top:0.85rem; border-top:1px solid var(--border); }
.t-card:has(input[type=checkbox]:checked) .t-details { display:block; }
.inventory-group { margin-bottom:1.25rem; }
.inventory-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; align-items:start; }
.inventory-grid .t-card { margin-bottom:0; }
.inventory-summary { display:flex; align-items:center; gap:0.6rem; cursor:pointer; padding:0.5rem 0; list-style:none; }
.inventory-summary::-webkit-details-marker { display:none; }
.inventory-summary::before { content:"▸"; font-size:0.8rem; color:var(--text-3); }
details[open] > .inventory-summary::before { content:"▾"; }
.inventory-more { margin-top:0.5rem; }
.inventory-sticky { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 0; margin-top:1rem; background:var(--bg); border-top:1px solid var(--border); }
.tool-name-input { width:100%; padding:0.6rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-family:var(--f-mono); font-size:0.85rem; margin-bottom:0.85rem; }
.d-opt { position:relative; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:0.3rem 0.65rem; cursor:pointer; font-size:0.78rem; font-family:var(--f-mono); transition:border-color 0.15s,background 0.15s; }
.d-opt:has(input:checked) { border-color:var(--blue); background:var(--blue-dim); color:var(--text); }
.d-opt-input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.d-opt:has(input:focus-visible) { outline:2px solid var(--blue); outline-offset:2px; }
.d-opt-row { display:flex; gap:0.35rem; flex-wrap:wrap; }
.d-opt-scale { display:flex; gap:0.35rem; }
.d-opt-scale .d-opt { flex:1; text-align:center; }
.scale-labels { display:flex; justify-content:space-between; margin-top:0.2rem; }

/* ---------- Jarvis Setup-Anleitung ---------- */
.step-title { font-size:1rem; font-weight:500; margin-bottom:0.75rem; }
.setup-item-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:0.85rem 1rem; margin-bottom:0.5rem; }
.setup-item-card-mono { font-family:var(--f-mono); font-size:0.78rem; }
.setup-item-title { font-size:0.88rem; font-weight:500; margin-bottom:0.2rem; }
.mcp-conn-name { font-weight:500; color:var(--text); margin-bottom:0.25rem; }

/* ---------- Chat (Sonderanforderungen) ---------- */
.chat-input { flex:1; background:var(--bg); border:1px solid var(--border-hi); border-radius:var(--r); padding:0.7rem 1rem; color:var(--text); font-size:0.9rem; }
.bubble-user { align-self:flex-end; max-width:80%; background:var(--blue-dim); border:1px solid rgba(30,79,216,0.2); border-radius:var(--r); padding:0.75rem 1rem; font-size:0.88rem; }
.bubble-bot { align-self:flex-start; max-width:80%; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:0.75rem 1rem; font-size:0.88rem; color:var(--text-2); }

/* ---------- Formulare ---------- */
.form-label { font-size:0.85rem; color:var(--text-2); display:block; }
.form-select, .form-input { display:block; width:100%; margin-top:0.35rem; padding:0.55rem 0.7rem; font-family:var(--f-ui); font-size:0.9rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); color:var(--text); }
.form-select:focus, .form-input:focus { outline:2px solid var(--blue-dim); border-color:var(--blue); }
.form-error { color:var(--amber); background:var(--amber-dim); border:1px solid rgba(180,83,9,0.3); border-radius:var(--r); padding:0.5rem 0.75rem; text-align:left; }
/* Honeypot-Feld des E-Mail-Gates: für Menschen unsichtbar, Bots füllen es. */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.error-page { text-align:center; }
.error-actions { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }
.fieldbox { display:flex; flex-direction:column; gap:0.65rem; padding:1rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); }
.step-list { font-size:0.85rem; color:var(--text-2); padding-left:1.2rem; line-height:1.8; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.5rem; margin:0.75rem 0; }
.stat-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:0.5rem 0.75rem; }

/* ---------- Kriterien / Ergebnis ---------- */
.criterion { display:flex; gap:0.5rem; align-items:flex-start; font-size:0.82rem; color:var(--text-2); }
.criterion-open { color:var(--text-3); }
.crit-check { color:var(--green); flex-shrink:0; }
.divider-top { border-top:1px solid var(--border); padding-top:0.9rem; }
.divider-row { padding:0.5rem 0; border-bottom:1px solid var(--border); }
.locked-blur { filter:blur(5px); user-select:none; pointer-events:none; }
.guide-entry { margin-bottom:2rem; padding-bottom:2rem; }
.guide-entry-border { border-bottom:1px solid var(--border); }
.codeblock { background:var(--bg-section); border:1px solid var(--border); border-radius:var(--r); padding:1rem; font-size:0.8rem; overflow-x:auto; }
.codeblock-wrap { white-space:pre-wrap; }

/* ---------- Demo-Leiste (Beispiel-Guide, UX15) ---------- */
.demo-bar { position:sticky; top:0; z-index:100; display:flex; justify-content:space-between; align-items:center; gap:0.75rem; flex-wrap:wrap; padding:0.6rem 1.25rem; background:rgba(244,240,230,0.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.demo-bar-label { font-size:0.82rem; color:var(--text-2); }

/* ---------- Ergebnisseite (result.templ / layer2.templ) ---------- */
.text-center { text-align:center; }
.text-right { text-align:right; }
.result-page { padding-top:1.5rem; }
.container-md { max-width:960px; margin:0 auto; padding:0 2.5rem; }
.result-hero { padding-top:4rem; padding-bottom:2rem; }
.result-title { font-size:clamp(2rem,4vw,2.9rem); line-height:1.1; }
.result-meta { display:flex; gap:2rem; }
.result-explainer { max-width:640px; margin-top:1.5rem; }
.result-assumptions-wrap { padding-bottom:1.5rem; }
/* Kostenannahmen + „Nutzerzahlen anpassen" (Spec 2026-09-17 §2) */
.kosten-hinweise { margin:0.75rem 0 0; padding-left:1.1rem; line-height:1.6; }
.kosten-anpassen { margin-top:0.75rem; border-top:1px solid var(--border); padding-top:0.6rem; }
.kosten-anpassen-summary { cursor:pointer; color:var(--blue); font-weight:500; }
.kosten-anpassen-form { margin-top:0.6rem; }
.kosten-seats-row { display:grid; grid-template-columns:minmax(0,1fr) auto 6.5rem; align-items:center; gap:0.6rem; padding:0.3rem 0; border-top:1px solid var(--border); }
.kosten-seats-row:first-of-type { border-top:none; }
.kosten-seats-input { margin-top:0; padding:0.4rem 0.5rem; text-align:right; }
.kosten-seats-aktuell { font-size:0.78rem; white-space:nowrap; }
@media (max-width:520px) {
	.kosten-seats-row { grid-template-columns:minmax(0,1fr) 5.5rem; }
	.kosten-seats-aktuell { grid-column:1; order:3; }
	.table-card { overflow-x:auto; }
}
.result-domains-grid { padding-bottom:5rem; display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; }
/* ---------- Ergebnis-Cluster (Fachbereiche oben, Fundament unten) ---------- */
/* Mobil zuklappbare Erklärboxen (UX14): Desktop zeigt sie offen ohne Summary */
.result-fold-summary { display:none; cursor:pointer; list-style:none; }
.result-fold-summary::-webkit-details-marker { display:none; }
.result-fold-summary::before { content:"▸"; display:inline-block; margin-right:0.5rem; transition:transform 0.15s; }
.result-fold[open] .result-fold-summary::before { transform:rotate(90deg); }
@media (max-width:720px) {
	.result-fold-summary { display:block; }
	.result-fold-title { display:none; }
	.result-fold[open] .result-fold-summary { margin-bottom:0.75rem; }
	.result-meta { display:block; line-height:1.8; }
	.result-meta span { display:inline; white-space:nowrap; }
	.result-meta span + span::before { content:"· "; }
}
/* Reality-Check / Einordnungs-Block */
.reality-card { border-left:3px solid var(--blue); background:var(--blue-dim); border-color:rgba(30,79,216,0.18); }
.cluster-area-hint { margin:-0.65rem 0 0.9rem; }
.result-clusters { padding-bottom:4rem; }
.result-cluster { padding-bottom:2.75rem; scroll-margin-top:1.5rem; }
.result-cluster-title { padding-bottom:0.55rem; border-bottom:1px solid var(--border); margin-bottom:1.15rem; }
.result-cluster-hint { max-width:560px; margin-bottom:1.15rem; margin-top:0.4rem; }
.cluster-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; }
/* Sprungnavigation zu den Clustern */
.cluster-nav { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; }
.cluster-nav-chip { font-size:0.82rem; color:var(--text-2); background:var(--bg-card); border:1px solid var(--border); padding:0.35rem 0.85rem; border-radius:100px; text-decoration:none; transition:border-color 0.15s,color 0.15s; }
.cluster-nav-chip:hover { border-color:var(--blue); color:var(--blue); }
.cluster-nav-chip-muted { color:var(--text-3); }
/* Technisches Fundament: einklappbar (details) + visuell zurückgenommen */
.result-cluster-infra { margin-top:1.5rem; padding-bottom:1rem; }
.result-infra-summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:0.75rem; padding-top:1.75rem; border-top:1px dashed var(--border-hi); }
.result-infra-summary::-webkit-details-marker { display:none; }
.result-infra-summary::before { content:"▸"; display:inline-block; color:var(--text-3); transition:transform 0.15s; align-self:center; }
.result-cluster-infra[open] .result-infra-summary::before { transform:rotate(90deg); }
.result-infra-title { color:var(--text-2); }
.result-infra-count { font-family:var(--f-mono); font-size:0.78rem; color:var(--text-3); }
.result-cluster-infra .result-cluster-hint { margin-top:0.9rem; }
.result-cluster-infra .cluster-grid { grid-template-columns:1fr 1fr 1fr; margin-top:0.5rem; }
.result-cluster-infra .card-lg { padding:1.1rem; box-shadow:none; }
.result-cluster-infra .card-title { font-size:0.98rem; }
@media (max-width:900px) { .result-cluster-infra .cluster-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:720px) { .cluster-grid, .result-cluster-infra .cluster-grid { grid-template-columns:1fr; } }
/* Realistischer Starter (WS3): Kern-Bausteine zuerst, Rest einklappbar */
.card-ausbau { box-shadow:none; border-style:dashed; }
.card-ausbau .card-title { color:var(--text-2); }
.result-cluster-more { margin-top:0.9rem; }
.result-cluster-more summary { cursor:pointer; list-style:none; font-size:0.82rem; color:var(--text-3); }
.result-cluster-more summary::-webkit-details-marker { display:none; }
.result-cluster-more summary::before { content:"▸"; display:inline-block; margin-right:0.5rem; color:var(--text-3); transition:transform 0.15s; }
.result-cluster-more[open] summary::before { transform:rotate(90deg); }
.result-cluster-more .cluster-grid { margin-top:0.85rem; }
/* Guide-Cluster-Überschriften (guide.templ, Abschnitte 1+2) */
.guide-cluster-title { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:1.35rem; color:var(--text); margin:1.75rem 0 0.85rem; }
.guide-cluster-infra-title { color:var(--text-2); margin-top:2.5rem; padding-top:1.5rem; border-top:1px dashed var(--border-hi); }
.result-layer-wrap { padding-bottom:3rem; }
.result-share-wrap { padding-bottom:4rem; text-align:right; }
.btn-plain-badge { background:none; cursor:pointer; font-family:var(--f-ui); }
.share-link-url { display:none; max-width:420px; margin-left:auto; font-family:var(--f-mono); font-size:0.8rem; }
.share-link-url.is-visible { display:block; }
.result-gate-form { max-width:360px; margin:0 auto; }
.result-price { font-size:2rem; color:var(--text); }
.result-downloads { display:flex; gap:1rem; flex-wrap:wrap; }
.result-whats-in { max-width:480px; margin:0 auto; text-align:left; }
.result-whats-in ul { padding-left:1.2rem; color:var(--text-2); }
.result-whats-in .btn-text { display:inline-block; margin-top:0.5rem; padding-left:0; color:var(--blue); }
.result-consent { display:flex; gap:0.6rem; align-items:flex-start; text-align:left; cursor:pointer; }
.result-purchase-form { display:inline-block; max-width:480px; text-align:left; }
.layer2-intro { padding:0.25rem 0 0.5rem; border-bottom:1px solid var(--border); }
.domain-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.5rem; }
.domain-card-anim { animation:slideIn 0.35s ease both; }
.domain-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.85rem; }
.domain-feature-tag { font-family:var(--f-mono); font-size:0.66rem; color:var(--text-2); background:var(--bg); border:1px solid var(--border); padding:0.2rem 0.55rem; border-radius:4px; }
.gap-row { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; padding:0.3rem 0; }
.gap-row form { flex-shrink:0; }
.gap-btn { font-family:var(--f-ui); font-size:0.78rem; font-weight:500; padding:0.3rem 0.7rem; border-radius:6px; cursor:pointer; white-space:nowrap; }
.gap-btn-amber { color:var(--amber); background:var(--amber-dim); border:1px solid rgba(180,83,9,0.3); }
.gap-btn-blue { color:var(--blue); background:var(--blue-dim); border:1px solid rgba(30,79,216,0.3); }
.foerder-select { padding:0.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); color:var(--text); }
.foerder-entry { padding:0.6rem 0; border-top:1px solid var(--border); }
.link-plain { font-family:var(--f-ui); font-size:0.78rem; color:var(--text-3); background:none; border:none; cursor:pointer; text-decoration:underline; }

/* ---------- Prose (Rechtsseiten, Methodik) ---------- */
.prose { font-size:0.95rem; color:var(--text-2); line-height:1.8; }
.prose h2 { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:1.5rem; color:var(--text); margin:2.5rem 0 0.9rem; }
.prose h3 { font-size:1.05rem; font-weight:600; color:var(--text); margin:1.8rem 0 0.6rem; }
.prose p { margin-bottom:1rem; }
.prose ul, .prose ol { margin:0 0 1rem 1.4rem; }
.prose li { margin-bottom:0.4rem; }
.prose b { color:var(--text); font-weight:500; }
.prose table { border-collapse:collapse; width:100%; margin-bottom:1rem; }
.prose th, .prose td { border:1px solid var(--border); padding:0.5rem 0.75rem; text-align:left; font-size:0.88rem; }
.prose th { background:var(--bg-section); color:var(--text); }
.briefing-content { font-size:0.9rem; line-height:1.75; color:var(--text-2); }
.briefing-content h2 { font-size:1.1rem; font-weight:600; color:var(--text); margin:1.75rem 0 0.6rem; padding-bottom:0.4rem; border-bottom:1px solid var(--border); }
.briefing-content ul { padding-left:1.25rem; margin:0.5rem 0; }
.briefing-content li { margin-bottom:0.3rem; }
.briefing-content strong { color:var(--text); font-weight:600; }

/* ---------- Autor-Block (Methodik „Wer steht dahinter", Befund PD1) ---------- */
.author { display:flex; gap:1.5rem; align-items:center; margin:1.5rem 0 2rem; padding:1.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.author-photo { width:150px; height:200px; object-fit:cover; border-radius:var(--r); flex-shrink:0; }
.author-name { font-family:var(--f-display); font-style:italic; font-size:1.6rem; color:var(--text); line-height:1.1; }
.author-role { font-size:0.9rem; color:var(--text-2); margin-top:0.35rem; }
.author-links { display:flex; gap:1rem; margin-top:0.9rem; }
.author-links a { font-size:0.85rem; font-weight:500; text-decoration:none; }
@media (max-width:560px) {
	.author { flex-direction:column; align-items:flex-start; }
	.author-photo { width:100%; height:auto; max-width:220px; }
}

/* ---------- Tabellen (Admin, Account) ---------- */
.table { border-collapse:collapse; width:100%; font-size:0.88rem; }
.table th { background:var(--bg-section); text-align:left; padding:0.6rem 0.85rem; border-bottom:1px solid var(--border); font-weight:600; }
.table td { padding:0.6rem 0.85rem; border-bottom:1px solid var(--border); color:var(--text-2); }
.table .mono { font-size:0.8rem; }

/* ---------- Banner ---------- */
.draft-banner { max-width:720px; margin:0 auto 2rem; padding:0.9rem 1.25rem; background:var(--amber-dim); border:1px solid rgba(180,83,9,0.35); border-radius:var(--r); font-size:0.85rem; color:var(--amber); line-height:1.6; }
.banner-success { padding:1rem; background:var(--green-dim); border:1px solid rgba(21,128,61,0.2); border-radius:var(--r); color:var(--green); margin-bottom:1.5rem; }

/* ---------- Account ---------- */
.account-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; border-bottom:1px solid var(--border); font-size:0.85rem; }
.account-header a { text-decoration:none; }
.account-main { max-width:900px; margin:3rem auto; padding:0 1rem; }
.account-main-wide { max-width:1100px; }
.login-box { max-width:420px; margin:4rem auto; padding:0 1rem; }
.chat-row { padding:0.75rem 0; border-bottom:1px solid var(--border); }
.tool-list-row { display:flex; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid var(--border); }
.dot-on { color:var(--blue); }
.dot-off { color:var(--border); }
.score-bar { flex:1; height:8px; border-radius:4px; }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--border); background:var(--bg-section); margin-top:4rem; }
.footer-grid { max-width:1180px; margin:0 auto; padding:3rem 2.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.footer-title { font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:0.9rem; }
.footer-link { display:block; font-size:0.88rem; color:var(--text-2); text-decoration:none; margin-bottom:0.55rem; }
.footer-link:hover { color:var(--text); }
.footer-compact { display:flex; justify-content:center; align-items:center; gap:0.6rem; padding:1.25rem; font-size:0.82rem; }
.footer-compact .footer-link { display:inline; margin:0; }
.footer-sep { color:var(--text-3); }

/* ---------- Landing Card-Stack ---------- */
.stack-scene { position:relative; height:500px; animation:fadeIn 0.3s 0.2s ease both; }
.stack-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:380px; height:280px; background:radial-gradient(ellipse,rgba(30,79,216,0.07) 0%,transparent 70%); pointer-events:none; }
.tc { position:absolute; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.2rem 1.4rem; width:210px; box-shadow:var(--shadow-card); transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s; }
.tc:hover { border-color:var(--border-hi); box-shadow:var(--shadow-pop); }
.tc-domain { font-size:0.78rem; font-weight:600; color:var(--text-3); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.6rem; }
.tc-name { font-size:0.95rem; font-weight:600; color:var(--text); margin-bottom:0.7rem; }
.tc-cost { font-family:var(--f-mono); font-size:0.72rem; color:var(--text-3); }
.tag-row { display:flex; gap:0.35rem; flex-wrap:wrap; margin-bottom:0.7rem; }
.tc-1 { top:18px; left:16px; animation:c1 0.65s 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }
.tc-2 { top:18px; left:248px; animation:c2 0.65s 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.tc-3 { top:178px; left:16px; animation:c3 0.65s 0.55s cubic-bezier(0.34,1.56,0.64,1) both; }
.tc-4 { top:178px; left:248px; animation:c4 0.65s 0.65s cubic-bezier(0.34,1.56,0.64,1) both; }
.tc-5 { top:338px; left:132px; width:230px; animation:c5 0.65s 0.75s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes c1 { from{opacity:0;transform:translate(-70px,-90px) rotate(-9deg) scale(0.88)} to{opacity:1;transform:translate(0,0) rotate(0) scale(1)} }
@keyframes c2 { from{opacity:0;transform:translate(90px,-70px) rotate(7deg) scale(0.88)} to{opacity:1;transform:translate(0,0) rotate(0) scale(1)} }
@keyframes c3 { from{opacity:0;transform:translate(-90px,70px) rotate(6deg) scale(0.88)} to{opacity:1;transform:translate(0,0) rotate(0) scale(1)} }
@keyframes c4 { from{opacity:0;transform:translate(70px,90px) rotate(-8deg) scale(0.88)} to{opacity:1;transform:translate(0,0) rotate(0) scale(1)} }
@keyframes c5 { from{opacity:0;transform:translate(0,110px) rotate(4deg) scale(0.88)} to{opacity:1;transform:translate(0,0) rotate(0) scale(1)} }

/* ---------- Animationen ---------- */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideIn { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
.anim-fade-up { animation:fadeUp 0.5s ease both; }
.anim-fade-in { animation:fadeIn 0.4s ease forwards; }
.anim-slide-in { animation:slideIn 0.4s ease both; }
.anim-d1 { animation-delay:0.08s; } .anim-d2 { animation-delay:0.16s; } .anim-d3 { animation-delay:0.24s; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; } }

/* ---------- Spinner (JustificationBox-Polling, ADR-017) ---------- */
.spinner { display:inline-block; width:0.75em; height:0.75em; border:2px solid var(--border); border-top-color:var(--text-3); border-radius:50%; animation:spin 0.7s linear infinite; vertical-align:-0.1em; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width:1080px) {
	.grid-3 { grid-template-columns:1fr; }
}
@media (max-width:720px) {
	.container { padding:0 1.25rem; }
	/* UX4: die Nav umbricht mobil auf bis zu drei Zeilen — nicht fixed, sondern im Fluss vor dem Hero */
	.nav { position:static; padding:0.9rem 1.25rem; align-items:flex-start; }
	.site-header { padding:0.8rem 1.25rem; }
	.nav-inner { gap:0.6rem 1.5rem; }
	.nav-links { gap:0.35rem 1.25rem; }
	.grid-2 { grid-template-columns:1fr; }
	.hero-grid { grid-template-columns:1fr; min-height:auto; padding:2rem 1.25rem 2rem; gap:2rem; }
	.result-domains-grid, .stat-grid { grid-template-columns:1fr; }
	.q-grid, .q-grid-3, .q-grid-start, .inventory-grid, .gewerk-grid { grid-template-columns:1fr; }
	.footer-grid { grid-template-columns:1fr; padding:2rem 1.25rem; }
	.trust-strip { gap:2rem; padding:1.5rem 1.25rem; }
	.section { padding-top:3rem; padding-bottom:3rem; }
	/* Card-Stack: auf Mobile statische Liste statt absoluter Positionierung */
	.stack-scene { height:auto; display:flex; flex-direction:column; gap:0.75rem; }
	.stack-glow { display:none; }
	.tc, .tc-1, .tc-2, .tc-3, .tc-4, .tc-5 { position:static; width:100%; animation:fadeUp 0.4s ease both; }
}