/* Yanqiva – ein Stylesheet, System-Fonts, keine externen Ressourcen.
   Aufbau: 1 Tokens · 2 Basis · 3 Kopfzeile/Navigation · 4 Buttons · 5 Sektionen/Hero · 6 Formulare · 7 Karten/Raster
   · 8 Report/Befunde · 9 Preise/FAQ/CTA · 10 Prüfergebnis · 11 Artikel · 12 Fußzeile · 13 Plattform (Module, Tabs, Dashboard)
   · 14 Websites/Showcase/Vergleich · 15 Responsive · 16 Print · 17 Effekte (fx) */

/* ===== 1 Tokens ===== */
:root {
  /* Marke (Dashboard-Branding übersteuert --primary, --primary-hover, --primary-soft) */
  --primary: #2F2A85;
  --primary-hover: #3F37C9;
  --primary-soft: #EEEDFB;
  --primary-dark: var(--primary-hover);
  --tint: var(--primary-soft);
  --primary-2: #3A33B0;      /* Verlaufsende Buttons */
  --primary-3: #4B44D6;      /* Verlaufsende Buttons (hover) */
  --accent: #0E7C66;
  --ok: #0C7360;             /* Teal-Variante des Akzents, >= 4,5:1 auch auf primary-soft */
  --warn: #B54708;
  --crit: #B42318;
  /* Flächen und Text */
  --bg: #F8F8FB;
  --card: #FFFFFF;
  --text: #17172B;
  --muted: #4B4B63;
  --line: #E3E3EE;
  --line-strong: #CFCDEA;
  --field: #5A5A74;
  /* Dunkle Flächen (Kopfzeile, Hero, Fußzeile). Kontrast Weiß auf ink/ink-2/primary/primary-hover: 18.7/15.4/11.7/8.1 */
  --ink: #0F0E2E;
  --ink-2: #1E1B5C;
  --mint: #7FE0CB;
  --on-dark: #D9D8F5;
  --on-dark-2: #E4E3FA;
  --on-dark-muted: #B9B8E4;
  /* Form */
  --radius: 14px;            /* Karten, Panels */
  --radius-btn: 10px;        /* Buttons, Felder, kleine Panels */
  --radius-sm: 8px;          /* Menüpunkte, kleine Elemente in Panels */
  --radius-xs: 6px;          /* Code, Fokus, Markierungen */
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(23,23,43,.06), 0 8px 24px rgba(23,23,43,.06);
  --shadow-pop: 0 2px 4px rgba(23,23,43,.07), 0 14px 32px rgba(23,23,43,.10);
  --glow: 0 0 0 4px rgba(63,55,201,.14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  --section-y: clamp(48px, 10vw, 96px);
}

/* ===== 2 Basis ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { hyphens: auto; -webkit-hyphens: auto; line-height: 1.2; margin: 0 0 .6em; color: var(--text); text-wrap: balance; letter-spacing: -.02em; font-weight: 780; }
h1 { font-size: clamp(1.9rem, 6vw + .5rem, 3.4rem); line-height: 1.15; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.6vw + .4rem, 2.2rem); line-height: 1.22; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }
a { color: var(--primary); text-underline-offset: .15em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .16em; }
code, pre { font-family: var(--mono); font-size: .9rem; }
code { background: #ECECF4; padding: .1em .3em; border-radius: var(--radius-xs); overflow-wrap: anywhere; }
pre { background: #1B1B3A; color: #F4F6FB; padding: 1rem; border-radius: var(--radius-btn); overflow-x: auto; margin: 0 0 1em; line-height: 1.5; }
pre code { background: none; padding: 0; color: inherit; overflow-wrap: normal; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-xs); box-shadow: 0 0 0 6px #fff; }
.on-dark :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--primary); }
@media (prefers-reduced-motion: no-preference) { .btn, .card { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; } }
main:focus { outline: none; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 32px); }
.narrow { max-width: 760px; }
.skip-link { position: absolute; left: .5rem; top: -4rem; background: var(--primary); color: #fff; padding: .75rem 1rem; border-radius: var(--radius-btn); z-index: 100; font-weight: 600; }
.skip-link:focus { top: .5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ===== 3 Kopfzeile und Navigation (dunkel) ===== */
.site-header { position: relative; z-index: 40; background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(15,14,46,.88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); } }
@media (min-width: 1000px) { html { scroll-padding-top: 5.5rem; } .site-header { position: sticky; top: 0; } }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary-hover) 30%, #7EE0C8 70%, transparent); opacity: .55; pointer-events: none; }
.header-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.logo { order: 1; flex: none; display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: #fff; font-weight: 800; font-size: 1.3rem; min-height: 44px; }
.logo-mark { flex: none; shape-rendering: geometricPrecision; }
.logo-word { text-transform: uppercase; letter-spacing: .08em; }
.logo-custom .logo-word { text-transform: none; letter-spacing: -.02em; }
.site-nav { order: 2; margin-left: auto; }
.header-actions { order: 3; display: flex; align-items: center; gap: .6rem; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.nav-list a:not(.btn) { display: inline-block; padding: .6rem .1rem; color: var(--text); text-decoration: none; font-weight: 500; }
.nav-list a:not(.btn):hover { text-decoration: underline; }
.nav-list a[aria-current="page"]:not(.btn) { color: var(--primary); text-decoration: underline; text-decoration-thickness: .15em; }
.site-header .nav-list a:not(.btn), .site-header .nav-drop > summary { color: #fff; }
.site-header .nav-list a[aria-current="page"]:not(.btn), .site-header .nav-drop > summary.is-current { color: #7FE0CB; }
.site-header :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); }
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 2px solid rgba(255,255,255,.6); border-radius: var(--radius-btn); background: transparent; color: #fff; cursor: pointer; }
.nav-toggle:hover { background: rgba(255,255,255,.12); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: #fff; content: ""; }
.nav-toggle-bars { top: 50%; margin-top: -1px; }
.nav-toggle-bars::before { top: -6px; left: 0; margin-left: 0; }
.nav-toggle-bars::after { top: 6px; left: 0; margin-left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) { .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: transform .18s ease, top .18s ease, background-color .18s ease; } }

/* Prüfbereiche-Menü */
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .6rem .1rem; font-weight: 500; color: var(--text); }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.15em); }
.nav-drop[open] > summary::after { transform: rotate(-135deg) translateY(-.1em); }
.nav-drop > summary.is-current { color: var(--primary); text-decoration: underline; text-decoration-thickness: .15em; text-underline-offset: .15em; }
/* Dunkles Glas-Panel: helle Links, Kontrast >= 12:1 (auf #0F0E2E); Selektoren so spezifisch wie die Kopfzeilen-Linkregel, damit deren Weiß nicht ungewollt greift */
.nav-drop-list { list-style: none; margin: 0; padding: .4rem; position: absolute; top: 100%; left: -.5rem; z-index: 50; min-width: 15rem; background: rgba(15,14,46,.98); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-btn); box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 16px 36px rgba(15,14,46,.45); }
.nav-drop-list li { margin: 0; }
.site-header .nav-list .nav-drop-list a { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--on-dark-2); text-decoration: none; font-weight: 500; min-height: 44px; }
.site-header .nav-list .nav-drop-list a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: underline; }
.site-header .nav-list .nav-drop-list a[aria-current="page"] { color: var(--mint); font-weight: 700; }
.site-header .nav-drop-list :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); }

/* Dashboard (White-Label): helle Kopfzeile, Kundenlogo bleibt lesbar */
#dash-header { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); box-shadow: 0 1px 2px rgba(23,23,43,.04); }
#dash-header::after { display: none; }
#dash-header .logo { color: var(--primary); }
#dash-header :focus-visible { outline-color: var(--primary); box-shadow: 0 0 0 6px #fff; }
#dash-header .header-inner { flex-wrap: wrap; }

/* ===== 4 Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .7rem 1.4rem; border-radius: var(--radius-btn); border: 2px solid var(--primary); background: var(--primary); color: #fff; font: inherit; font-weight: 650; line-height: 1.25; text-decoration: none; cursor: pointer; text-align: center; vertical-align: middle; }
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:not(.btn-secondary):not(.btn-light):not([disabled]) { background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); }
.btn:not(.btn-secondary):not(.btn-light):not([disabled]):hover { background-image: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-3) 100%); }
.btn-small { min-height: 44px; padding: .45rem 1rem; }
.btn-secondary { background: #fff; color: var(--primary); }
.btn-secondary:hover { background: var(--primary-soft); color: var(--primary); }
.btn-light { background: #fff; color: var(--primary); border-color: #fff; }
.btn-light:hover { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
/* Absätze mit Buttons: gleicher Abstand, auch beim Umbruch */
p:has(> .btn) { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
/* zentrierte Blöcke (inline text-align:center) */
[style*="text-align:center"] p:has(> .btn) { justify-content: center; }
[style*="text-align:center"] .eyebrow::after { margin-inline: auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
/* Buttons auf dunklem Grund: weiß */
.site-header .btn.header-cta:not([disabled]), .hero .btn:not(.btn-secondary):not(.btn-light):not([disabled]) { background-color: #fff; background-image: none; color: var(--primary); border-color: #fff; }
.site-header .btn.header-cta:not([disabled]):hover, .hero .btn:not(.btn-secondary):not(.btn-light):not([disabled]):hover { background-color: var(--primary-soft); background-image: none; border-color: var(--primary-soft); color: var(--primary); }
.hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.hero .btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; }
/* ... außer im weißen Prüfformular im Hero */
.hero .check-form .btn:not(.btn-secondary):not(.btn-light):not([disabled]) { background-color: var(--primary); background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); color: #fff; border-color: var(--primary); }
.hero .check-form .btn:not(.btn-secondary):not(.btn-light):not([disabled]):hover { background-color: var(--primary-hover); background-image: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-3) 100%); border-color: var(--primary-hover); color: #fff; }

/* ===== 5 Sektionen und Hero ===== */
section { padding: var(--section-y) 0; }
.wrap:has(> #check-result) + section { padding-top: calc(var(--section-y) * .55); }
.section-alt { background: #fff; border-block: 1px solid var(--line); }
.eyebrow { font-family: var(--mono); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); margin-bottom: .6rem; }
.eyebrow::after { content: ""; display: block; width: 44px; height: 3px; margin-top: .55rem; border-radius: 3px; background: linear-gradient(90deg, #2F2A85, #0E7C66); }
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }
.lead { font-size: clamp(1.05rem, .6vw + 1rem, 1.2rem); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.section-head { max-width: 720px; margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
.section-head > :last-child { margin-bottom: 0; }
.hint { font-size: .95rem; color: var(--muted); margin: .5rem 0 0; }
.muted { color: var(--muted); }
.hero-main { max-width: 760px; }
.tagline { font-size: 1.15rem; font-weight: 700; color: var(--primary); margin: 1.25rem 0 0; }

.hero { position: relative; overflow: hidden; color: #fff; padding-top: clamp(2rem, 7vw, 4.5rem); padding-bottom: clamp(2.5rem, 8vw, 5.5rem); background:
  radial-gradient(ellipse 55% 75% at 88% 8%, rgba(63,55,201,.55) 0%, rgba(63,55,201,0) 70%),
  radial-gradient(ellipse 45% 60% at 8% 100%, rgba(14,124,102,.38) 0%, rgba(14,124,102,0) 70%),
  linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--primary) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 60vmax; height: 60vmax; max-width: 900px; max-height: 900px; right: -20%; top: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(127,224,203,.16) 0%, rgba(127,224,203,0) 62%); }
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--mint); }
.hero .eyebrow::after { background: linear-gradient(90deg, var(--mint), #8C86FF); }
.hero .lead, .hero .hint, .hero .trust-list, .hero .tagline { color: var(--on-dark); }
.hero .trust-list li::before { color: var(--mint); }
.hero a:not(.btn) { color: #fff; }
.hero :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink-2); }
.hero-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.hero-path { margin: 1.5rem 0 0; font-size: 1.1rem; }
.hero-path + .check-form { margin-top: .5rem; }
.hero-secondary { margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.hero-secondary .btn { text-align: left; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }

/* ===== 6 Formulare ===== */
.check-form { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.25rem; margin-top: 1.5rem; box-shadow: var(--shadow-card); }
.check-form:focus-within { border-color: var(--primary); box-shadow: var(--shadow-card), var(--glow); }
.hero .check-form { color: var(--text); background: #fff; border-color: rgba(127,224,203,.55); box-shadow: 0 0 0 1px rgba(127,224,203,.25), 0 12px 44px rgba(63,55,201,.45); }
.hero .check-form:focus-within { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 12px 44px rgba(63,55,201,.55); }
.hero .check-form .hint { color: var(--muted); }
.hero .check-form a { color: var(--primary); }
.hero .check-form :focus-visible { outline-color: var(--primary); box-shadow: 0 0 0 6px #fff; }
.check-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.check-row input { flex: 1 1 14rem; }
.check-row .btn { flex: 1 1 auto; }
label, legend { font-weight: 650; display: block; margin-bottom: .35rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
input[type="text"], input[type="email"], input[type="url"], input[type="date"], input[type="number"], select, textarea { width: 100%; min-height: 48px; padding: .6rem .8rem; font: inherit; color: var(--text); background: #fff; border: 2px solid var(--field); border-radius: var(--radius-btn); }
textarea { min-height: 7rem; resize: vertical; }
::placeholder { color: #5A5A74; opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; margin: .2rem .6rem 0 0; flex: none; accent-color: var(--primary); }
.check-line { display: flex; align-items: flex-start; font-weight: 400; margin-bottom: 0; }
.field { margin-bottom: 1.1rem; }
.req { color: var(--crit); }
.trust-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .95rem; color: var(--muted); }
.trust-list li { margin: 0; }
.trust-list li::before { content: "\2713\00a0"; color: var(--ok); font-weight: 800; }
.choice { display: flex; align-items: flex-start; gap: .2rem; padding: 1rem; border: 2px solid var(--line-strong); border-radius: var(--radius-btn); background: #fff; margin-bottom: .7rem; font-weight: 400; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
.choice input:focus-visible { outline: none; box-shadow: none; }
.choice strong { display: block; }
.choice > span:not(.choice-price) { flex: 1 1 0; min-width: 0; }
.choice-price { margin-left: auto; padding-left: 1rem; font-weight: 700; white-space: nowrap; }
.output-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 4vw, 2rem); }
.output-box:focus { outline: none; }

/* ===== 7 Karten und Raster ===== */
.grid { display: grid; gap: clamp(1rem, 3vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 1.5rem); box-shadow: var(--shadow-card); }
.card:hover { border-color: var(--line-strong); }
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
/* gleich hohe Karten: Aktion rutscht nach unten */
.grid > .card { display: flex; flex-direction: column; }
.grid > .card > p:last-child:has(> .btn), .pkg-teaser-links { margin-top: auto; padding-top: .5rem; }
@media (prefers-reduced-motion: no-preference) { .post-list a.card:hover, .mod-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop), 0 0 0 4px rgba(63,55,201,.10); } }
.post-list a.card:hover, .mod-card:not(.mod-card-main):hover { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #2F2A85, #0E7C66) border-box; }
.mod-card-main:hover { border-color: transparent; background: linear-gradient(var(--primary-soft), var(--primary-soft)) padding-box, linear-gradient(135deg, #2F2A85, #0E7C66) border-box; }
.mod-card:focus-within, .post-list a.card:focus-within { box-shadow: var(--shadow-card), var(--glow); }
.stat { font-size: 2.1rem; font-weight: 750; line-height: 1.1; color: var(--crit); margin-bottom: .4rem; letter-spacing: -.02em; }
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; margin: 0; padding: 3.2rem 1.4rem 1.4rem; }
.steps li::before { content: counter(step); position: absolute; top: 1.2rem; left: 1.4rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: grid; place-items: center; }
.check-ul, .cross-ul { list-style: none; padding: 0; }
.check-ul li, .cross-ul li { padding-left: 1.7rem; position: relative; }
.check-ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.cross-ul li::before { content: "\00d7"; position: absolute; left: .1rem; color: var(--warn); font-weight: 800; font-size: 1.3em; line-height: 1; }
.badge { display: inline-block; padding: .15rem .6rem; border-radius: var(--radius-pill); font-family: var(--mono); font-size: .8rem; letter-spacing: .02em; font-weight: 700; border: 1px solid; white-space: nowrap; vertical-align: middle; }
.badge-kritisch { background: #FDECEA; color: #8A1A10; border-color: #E8A39B; }
.badge-hoch { background: #FFF0E0; color: #8A3705; border-color: #EAB27E; }
.badge-mittel { background: #FFF7D6; color: #5C4700; border-color: #E0CB74; }
.badge-gering { background: #EFEFF5; color: #3F3F55; border-color: #BDBDD0; }
.badge-bestanden { background: #E4F4F0; color: #0A5848; border-color: #98D1C4; }
.badge-neutral { background: var(--primary-soft); color: var(--primary); border-color: #C5C2EE; }
.price, .pkg-teaser-price, .sc-price strong { font-variant-numeric: tabular-nums; }

/* Prüfbereich-Karten */
.mod-card { position: relative; }
.mod-card h3 a { color: var(--primary); }
.mod-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.mod-card:hover { border-color: var(--primary); }
.mod-card:focus-within { outline: 3px solid var(--primary); outline-offset: 3px; }
.mod-card h3 a:focus-visible { outline: none; box-shadow: none; }
.mod-card-main { border: 3px solid var(--primary); background: var(--primary-soft); }
.mod-flag { display: inline-block; background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; padding: .2rem .7rem; border-radius: var(--radius-pill); margin-bottom: .6rem; }
.mod-grid .card h3 { font-size: 1.15rem; }

/* ===== 8 Report, Befunde, Score ===== */
.protocol { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; margin: 0; }
.protocol-bar { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; background: var(--primary-soft); border-bottom: 1px solid var(--line-strong); padding: .6rem 1rem; font-size: .85rem; color: var(--primary); font-weight: 600; }
.protocol-body { padding: 1.25rem; }
.protocol figcaption, .figcap { padding: .6rem 1rem; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); }
.score-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.score-ring { position: relative; width: 120px; height: 120px; flex: none; }
.score-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.score-ring .track { stroke: #E3E3EE; }
.score-ring .bar { transition: stroke-dashoffset .6s ease; }
.score-ring .bar.s-ok { stroke: var(--ok); } .score-ring .bar.s-warn { stroke: var(--warn); } .score-ring .bar.s-crit { stroke: var(--crit); }
.score-num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.score-num small { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); margin-top: .2rem; }
.score-title { font-size: 1.5rem; margin: 0 0 .6rem; line-height: 1.2; }
.score-title strong { font-size: 1.7rem; }
.counts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; }
.counts li { margin: 0; display: flex; gap: .5rem; align-items: baseline; font-size: .95rem; }
.counts strong { font-size: 1.4rem; min-width: 1.6ch; }
.cat-scores { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .8rem; }
.cat-scores li { margin: 0; }
.cat-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .1rem .75rem; font-weight: 600; }
.cat-val { font-weight: 500; }
.bar-track { height: .7rem; margin-top: .3rem; background: #E3E3EE; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--ok); }
.bar-fill.s-warn { background: var(--warn); }
.bar-fill.s-crit { background: var(--crit); }
.finding { border: 1px solid var(--line); border-left: 6px solid var(--crit); border-radius: var(--radius); background: #fff; padding: 1.1rem 1.25rem; box-shadow: var(--shadow-card); }
.finding h3, .finding h4 { margin: .4rem 0 .3rem; font-size: 1.15rem; }
.finding-title { margin: .4rem 0 .5rem; font-size: 1.15rem; }
.finding-meta { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; font-size: .92rem; color: var(--muted); }
.finding.sev-hoch { border-left-color: var(--warn); }
.finding.sev-mittel { border-left-color: #8A6D00; }
.finding.sev-gering { border-left-color: #6B6B80; }
.fix-label { font-family: var(--mono); font-weight: 700; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; color: var(--primary); margin: 1rem 0 .3rem; }
.fix-text { white-space: pre-line; }
.url-text { overflow-wrap: anywhere; word-break: break-word; }
.issue-ref { font-size: .95rem; margin-bottom: .5rem; }
.split { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

/* ===== 9 Preise, FAQ, CTA ===== */
.price-card { display: flex; flex-direction: column; }
.price-card.featured { border: 3px solid var(--primary); position: relative; }
.price-flag { position: absolute; top: -1rem; left: 1rem; background: var(--primary); color: #fff; font-size: .85rem; font-weight: 700; padding: .15rem .7rem; border-radius: var(--radius-pill); }
.price { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin: .3rem 0 0; letter-spacing: -.02em; }
.price small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.price-note { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.price-card ul { flex: 1; }
.price-card .btn { margin-top: auto; }
.honest { border: 2px solid var(--warn); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: clamp(1.25rem, 4vw, 2rem); }
.honest h2 { color: var(--warn); }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-btn); margin-bottom: .7rem; }
.faq-item summary, details.disclosure > summary { cursor: pointer; font-weight: 650; padding: .9rem 1.1rem; min-height: 48px; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-body { padding: 1rem 1.1rem .2rem; }
details.disclosure { margin-top: .75rem; }
details.disclosure > summary { padding-left: 0; color: var(--primary); }
.cta-band { background: radial-gradient(ellipse 60% 120% at 85% 0%, rgba(126,224,200,.16) 0%, rgba(126,224,200,0) 60%), linear-gradient(135deg, var(--ink-2) 0%, var(--primary) 55%, var(--primary-2) 100%); color: #fff; }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band a:not(.btn) { color: #fff; }

/* ===== 10 Pruefergebnis ===== */
.result { margin-top: 2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 4vw, 2rem); box-shadow: var(--shadow-card); }
.result:focus { outline: none; }
.result-head { display: flex; gap: 1.5rem 2rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; }
.result-head .counts { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem 1.25rem; }
.status-msg { margin: .75rem 0 0; font-weight: 600; }
.status-msg:empty { display: none; }
.notice { border: 1px solid; border-left-width: 6px; border-radius: var(--radius-btn); padding: .9rem 1.1rem; margin-bottom: 1rem; background: #fff; }
.notice.warn { border-color: var(--warn); }
.notice.error { border-color: var(--crit); background: #FDF3F2; }
.notice.info { border-color: var(--primary); background: var(--tint); }
.notice.success { border-color: var(--ok); background: #EBF6F3; }
.notice p:last-child { margin-bottom: 0; }
.issue-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.issue-list li { margin: 0; }
.example-list { list-style: none; padding: 0; margin: .6rem 0 0; }
.example-list li { margin-bottom: .5rem; }
.example-list code { display: block; padding: .5rem .7rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.lead-box { margin-top: 2rem; padding: clamp(1rem, 4vw, 1.75rem); border: 2px solid var(--primary); border-radius: var(--radius); background: var(--primary-soft); }
.lead-box h3 { font-size: 1.35rem; }
.spinner { display: inline-block; width: 1.1em; height: 1.1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.2em; margin-right: .5rem; }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin .9s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .score-ring .bar { transition: none; } }

/* ===== 11 Artikel und Rechtstexte ===== */
.article { padding-block: clamp(2rem, 6vw, 3.5rem); }
.article h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.article h2 { margin-top: 2.2rem; font-size: clamp(1.35rem, 3.4vw, 1.75rem); }
.article h3 { margin-top: 1.5rem; }
.article-meta { color: var(--muted); font-size: .95rem; margin-bottom: 1.5rem; }
.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.toc h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.toc ol { margin: 0; }
.article .callout { background: var(--tint); border-left: 6px solid var(--primary); padding: 1rem 1.25rem; border-radius: var(--radius-btn); margin: 1.5rem 0; }
.article .callout p:last-child { margin-bottom: 0; }
.placeholder { background: #FFF3BF; color: #5A4500; padding: .05em .3em; border-radius: 3px; font-weight: 600; }
/* Tabellen: horizontal scrollbar, Randschatten zeigen versteckte Spalten an */
.table-wrap { overflow-x: auto; margin-bottom: 1em; position: relative;
  background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 2rem 100% no-repeat local,
    linear-gradient(to right, rgba(23,23,43,.16), rgba(23,23,43,0)) left center / .7rem 100% no-repeat scroll,
    linear-gradient(to left, rgba(23,23,43,.16), rgba(23,23,43,0)) right center / .7rem 100% no-repeat scroll; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; background: #fff; }
th, td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; vertical-align: top; }
th { background: var(--tint); }
.post-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.post-list li { margin: 0; }
.post-list a.card { display: block; text-decoration: none; color: inherit; }
.post-list a.card:hover { border-color: var(--primary); }
.post-list h2, .post-list h3 { color: var(--primary); text-decoration: underline; text-underline-offset: .15em; margin-bottom: .3rem; font-size: 1.3rem; }

/* ===== 12 Fusszeile (dunkel) ===== */
.site-footer { background: var(--ink); color: var(--on-dark-2); border-top: 1px solid rgba(255,255,255,.1); padding: 2.5rem 0 1.5rem; font-size: .98rem; }
.site-footer a { color: #fff; }
.site-footer :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0; }
.footer-grid li a { display: inline-block; padding: .35rem 0; }
.footer-h { font-size: 1rem; margin-bottom: .4rem; }
.site-footer .footer-h, .site-footer .footer-brand { color: #fff; }
.footer-brand { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.footer-note { color: var(--on-dark-muted); max-width: 36ch; margin-bottom: .5rem; }
.footer-copy { color: var(--on-dark-muted); margin: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1rem; font-size: .9rem; }
.footer-login { max-width: none; margin-top: 1rem; }
.site-footer-bare { background: #fff; color: var(--text); border-top: 1px solid var(--line); }
.site-footer-bare a { color: var(--primary); }
.site-footer-bare .footer-copy { color: var(--muted); }
.site-footer-bare :focus-visible { outline-color: var(--primary); box-shadow: 0 0 0 6px #fff; }
@media (max-width: 1000px), (pointer: coarse) { .footer-grid li a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 0; } }

/* ===== 13 Plattform: Module, Tabs, Dashboard ===== */
.cta-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.cta-list li { margin: 0; }
.cta-list .btn { width: 100%; }
@media (min-width: 861px) { .cta-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hint.disclaimer { margin-top: 1rem; font-weight: 600; }
.tablist { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; border-bottom: 2px solid var(--line); padding-bottom: .5rem; }
.tab { font: inherit; font-weight: 600; min-height: 44px; padding: .5rem .9rem; border: 2px solid var(--line-strong); border-radius: var(--radius-btn); background: #fff; color: var(--text); cursor: pointer; }
.tab:hover { border-color: var(--primary); }
.tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.tab-count { font-weight: 500; }
.panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; }
.tabpanel .issue-list { margin-bottom: 1rem; }
.issue-compact { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; }
.issue-compact li { margin: 0; }
.gate-callout { margin-top: 1rem; }
.gate-callout h4, .gate-callout h5, .gate-callout h6 { margin-top: 0; font-size: 1.15rem; }

.dash { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.dash h1:focus { outline: none; }
.dash-head-note { margin: 0; color: var(--muted); font-weight: 600; }
.brand-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.dash-sub { margin-bottom: 1rem; }
.dash h2 { margin-top: 2rem; font-size: clamp(1.3rem, 3vw, 1.6rem); }
.dash-table th[scope="row"] { font-weight: 600; background: #fff; }
.dash-table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.dash-table { min-width: 44rem; }
.trend { font-weight: 700; white-space: nowrap; }
.trend-up { color: var(--ok); }
.trend-down { color: var(--crit); }
.trend-flat { color: var(--muted); }
.alert-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.alert-item { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .8rem 1rem; }
.alert-item p { margin: .3rem 0 0; }
.alert-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .92rem; }
.spark-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .75rem; max-width: 640px; }
.sparkline { width: 100%; height: auto; display: block; }
.spark-grid { stroke: #E3E3EE; stroke-width: 1; }
.spark-line { stroke: var(--primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--primary); stroke: #fff; stroke-width: 2; }
.spark-label { fill: #4B4B63; font-size: 12px; font-family: var(--font); }
.findings-box { margin-top: .5rem; }

/* ===== 14 Websites erstellen: Pakete, Showcase, Vergleich ===== */
.pkg-tag { font-family: var(--mono); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin: 0 0 .3rem; }
.pkg-who { color: var(--muted); }
.pkg-actions { display: grid; gap: .6rem; margin-top: auto; }
.pkg-card .check-ul { flex: 1; }
.pkg-teaser-price { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pkg-teaser-links a { display: inline-block; padding: .4rem 0; }
.pkg-teaser .price-note { margin-bottom: .6rem; }

.showcase .section-head { margin-bottom: 1.25rem; }
.sc-controls { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; margin-bottom: 1rem; }
.sc-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.sc-label { display: block; font-weight: 700; font-size: .9rem; margin: 0 0 .35rem; padding: 0; }
.sc-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-tab { font: inherit; font-weight: 700; min-height: 48px; padding: .5rem 1.1rem; border: 2px solid var(--line-strong); border-radius: var(--radius-btn); background: #fff; color: var(--text); cursor: pointer; display: inline-flex; align-items: baseline; gap: .55rem; }
.sc-tab:hover { border-color: var(--primary); }
.sc-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.sc-tab-price { font-weight: 500; font-size: .9rem; }
.sc-segs { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--line-strong); border-radius: var(--radius-btn); overflow: hidden; background: #fff; }
.sc-seg { position: relative; display: block; margin: 0; font-weight: 600; cursor: pointer; }
.sc-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sc-seg span { display: block; padding: .65rem .95rem; min-height: 44px; line-height: 1.3; }
.sc-seg small { font-weight: 500; }
.sc-seg input:checked + span { background: var(--primary); color: #fff; }
.sc-seg input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: -3px; }
.sc-seg input:checked:focus-visible + span { outline-color: #fff; }
.sc-seg input:disabled { cursor: not-allowed; }
.sc-seg input:disabled + span { color: #6B6B80; background: #F3F3F8; }
.sc-device-hint { margin: 0 0 .75rem; }

.sc-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; background: var(--primary-soft); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(.6rem, 2.5vw, 1.5rem); }
.sc-skip { position: absolute; left: -9999px; top: .5rem; z-index: 5; background: var(--primary); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-btn); font-weight: 600; }
.sc-skip:focus { left: .75rem; }
.sc-device { box-sizing: content-box; width: var(--sc-w, 100%); max-width: 100%; padding: var(--sc-pad, 0); background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 14px 36px rgba(23, 23, 43, .16); overflow: hidden; }
.sc-device[data-device="tablet"], .sc-device[data-device="mobile"] { --sc-pad: 14px; background: var(--text); box-shadow: 0 14px 36px rgba(23, 23, 43, .22); }
.sc-device[data-device="tablet"] { border-radius: 26px; }
.sc-device[data-device="mobile"] { --sc-pad: 10px; border-radius: 30px; }
.sc-chrome { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .5rem .75rem; background: var(--primary-soft); border-bottom: 1px solid var(--line-strong); }
.sc-device:not([data-device="desktop"]) .sc-chrome { border-radius: 14px 14px 0 0; padding: .4rem .6rem; }
.sc-dots { display: inline-flex; gap: .35rem; flex: none; }
.sc-dots i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--crit); }
.sc-dots i:nth-child(2) { background: var(--warn); }
.sc-dots i:nth-child(3) { background: var(--ok); }
.sc-device:not([data-device="desktop"]) .sc-dots { display: none; }
.sc-url { flex: 1 1 9rem; min-width: 0; display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .8rem; font-size: .85rem; color: var(--muted); }
.sc-url svg { flex: none; }
.sc-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-open { flex: none; font-size: .85rem; font-weight: 600; padding: .4rem .25rem; min-height: 24px; }
.sc-viewport { position: relative; width: var(--sc-w, 100%); max-width: 100%; height: var(--sc-h, 520px); overflow: hidden; background: #fff; }
.sc-device:not([data-device="desktop"]) .sc-viewport { border-radius: 0 0 14px 14px; }
.sc-frame { position: absolute; left: 0; top: 0; width: var(--sc-vw, 100%); height: var(--sc-vh, 100%); border: 0; background: #fff; transform: scale(var(--sc-scale, 1)); transform-origin: 0 0; }
.sc-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: .6rem; background: rgba(255, 255, 255, .9); color: var(--muted); font-weight: 600; }
.sc-loading.is-on { display: flex; }
#sc-after { height: 0; }

.sc-panels { margin-top: 1.25rem; }
.sc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.25rem 2.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.75rem); box-shadow: var(--shadow-card); }
.sc-panel[hidden] { display: none; }
.sc-col > :last-child { margin-bottom: 0; }
.sc-tag { font-family: var(--mono); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin: 0 0 .2rem; }
.sc-name { font-size: 1.6rem; margin: 0 0 .3rem; }
.sc-price { margin: 0 0 .8rem; }
.sc-price strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-right: .3rem; }
.sc-price span { color: var(--muted); font-size: .95rem; }
.sc-pages { font-size: .95rem; }
.sc-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.sc-panel h4 { font-size: 1rem; margin: 0 0 .4rem; }
.sc-panel ul + h4 { margin-top: 1rem; }
.sc-vs { font-weight: 400; color: var(--muted); }
[data-showcase][data-client="ironhaus"] [data-for="pistazie"], [data-showcase][data-client="pistazie"] [data-for="ironhaus"] { display: none; }
.sc-baseline { margin-top: 1.25rem; }
.sc-baseline h3 { font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .sc-enter { animation: sc-in .22s ease-out; }
  @keyframes sc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

.cmp-table-wrap { overflow-x: auto; }
.cmp-table { min-width: 0; }
.cmp-table caption { text-align: left; font-weight: 700; padding: 0 0 .6rem; }
.cmp-table thead th { background: var(--primary); color: #fff; text-align: center; }
.cmp-table thead th:first-child { text-align: left; }
.cmp-table tbody th { background: #fff; font-weight: 600; width: 36%; }
.cmp-table td { text-align: center; }
.cmp-yes { color: var(--ok); font-weight: 800; }
.cmp-no { color: var(--muted); }
.cmp-stack { display: none; }
.cmp-card h3 { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cmp-card-price { font-weight: 800; }
.cmp-card dl { margin: 0 0 1rem; }
.cmp-card dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.cmp-card dt { font-weight: 600; }
.cmp-card dd { margin: 0; text-align: right; }
.stepup { list-style: none; padding: 0; }
.stepup-card { margin: 0; }
.stepup-eg-h { font-weight: 700; font-size: .95rem; margin: 1rem 0 .3rem; }
.stepup-eg { font-size: .95rem; color: var(--muted); padding-left: 1.1rem; }

/* ===== 15 Responsive ===== */
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 959px) {
  .header-inner { flex-wrap: wrap; }
  .header-actions { margin-left: auto; }
  .js .nav-toggle { display: inline-block; }
  .site-nav { order: 4; flex: 1 0 100%; margin-left: 0; }
  .js .site-nav:not(.is-open) { display: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 0 .75rem; }
  .nav-list li { border-top: 1px solid rgba(255,255,255,.12); }
  .site-header .nav-list a:not(.btn), .site-header .nav-drop > summary { display: flex; align-items: center; min-height: 48px; padding: .6rem .25rem; width: 100%; font-size: 1.05rem; text-decoration: none; }
  .nav-drop > summary { justify-content: space-between; }
  .nav-drop-list { position: static; background: transparent; border: 0; box-shadow: none; padding: 0 0 .5rem .75rem; min-width: 0; }
  .nav-drop-list li { border-top: 0; }
  .site-header .nav-list .nav-drop-list a { display: flex; align-items: center; }
}
@media (max-width: 860px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .result-head .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .cmp-table-wrap { display: none; } .cmp-stack { display: grid; } }
@media (max-width: 560px) { .sc-stage { padding: 0; background: none; border: 0; } .sc-tabs { width: 100%; } .sc-tab { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; gap: 0 .4rem; padding: .5rem .8rem; } }
@media (max-width: 480px) {
  .finding, .result, .output-box, .lead-box, .honest, .sc-panel, .protocol-body { padding-left: 1.25rem; padding-right: 1.25rem; }
  .steps li { padding-left: 1.25rem; padding-right: 1.25rem; }
  .steps li::before { left: 1.25rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .site-footer { padding-top: 2rem; }
  .choice { flex-wrap: wrap; }
  .choice-price { flex-basis: 100%; margin-left: 0; padding-left: 2.2rem; }
  .nav-list { gap: .1rem .9rem; }
  .nav-list a:not(.btn), .nav-drop > summary { min-height: 44px; display: inline-flex; align-items: center; }
  .btn { width: 100%; }
  .btn-small { width: auto; }
  .btn-row .btn, .hero-ctas .btn { flex: 1 1 100%; }
  .cta-pre { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .site-header .btn.header-cta { width: auto; padding-left: .9rem; padding-right: .9rem; }
  .header-actions { gap: .4rem; }
  .logo { font-size: 1.1rem; gap: .45rem; }
}
@media (max-width: 360px) { .logo { font-size: .95rem; } .logo-word { letter-spacing: .05em; } .header-inner { gap: .5rem; } }
@media (forced-colors: active) {
  .badge, .btn, .finding, .card { border: 2px solid CanvasText; }
  .hero::before, .site-header::after, .hero-art { display: none; }
}

/* ===== 16 Print ===== */
@media print {
  .site-header:not(#dash-header), .site-footer:not(.site-footer-bare), .skip-link, .no-print, .tablist, .gate-callout, .sc-stage, .sc-controls, .hero-art, .cta-band { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  #dash-header { box-shadow: none; }
  #dash-header .header-inner { padding-block: 0 .5rem; }
  .site-footer-bare { margin-top: 1.5rem; padding: .5rem 0 0; font-size: 9pt; }
  .tabpanel[hidden] { display: block !important; }
  .panel-title { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; margin: 1rem 0 .5rem; font-size: 1.1rem; }
  .card, .finding, .alert-item, .protocol, .spark-wrap, tr { break-inside: avoid; box-shadow: none; }
  h1, h2, h3, h4 { break-after: avoid; }
  h1 { font-size: 22pt; }
  thead { display: table-header-group; }
  .table-wrap { overflow: visible; background: none; }
  .dash-table { min-width: 0; font-size: 10pt; }
  .badge, .bar-fill, .score-ring, .trend, .finding { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; }
  .hero { background: #fff; color: #000; }
  .hero h1, .hero .lead { color: #000; }
  .hero::before, .hero::after { display: none; }
  .fx-r { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ===== 17 Effekte (fx) =====
   Nur transform/opacity. Alles Bewegte haengt an html.fx (von js/fx.js gesetzt, nicht bei html.fx-lite / reduced motion).
   Ohne fx bleibt das 3D-Zeichen als ruhige Standbild-Pose stehen, ohne JS ist alles sichtbar. */
.hero-wrap { position: relative; }
.hero-main { position: relative; z-index: 1; }
.hero-art { --art: clamp(300px, 34vw, 400px); position: absolute; z-index: 0; right: 0; top: 4.5rem; width: var(--art); height: var(--art); pointer-events: none; }
@media (min-width: 960px) { .hero-wrap .hero-main { max-width: min(640px, calc(100% - clamp(300px, 34vw, 400px) - 1.5rem)); } }
.y3d-defs { position: absolute; }
.y3d { position: absolute; inset: 0; perspective: 900px; }
.y3d-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.y3d-tilt.y3d-follow { transition: none; } /* Mausführung per rAF (fx.js), daher ohne CSS-Nachlauf */
.y3d-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--amp, 1) * -18deg)) rotateX(calc(var(--amp, 1) * 9deg)); }
.y3d-stack { position: absolute; left: 50%; top: 50%; width: var(--mark, calc(var(--art) * .5)); height: var(--mark, calc(var(--art) * .5)); margin: calc(var(--mark, var(--art) * .5) / -2) 0 0 calc(var(--mark, var(--art) * .5) / -2); transform-style: preserve-3d; }
.y3d-l { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; transform: translateZ(calc(var(--z, 0px) * var(--zs, 1))); }
.y3d-l.f { backface-visibility: hidden; }
/* Lichtreflex auf der Vorderseite (nur opacity animiert) */
.y3d-stack::after { content: ""; position: absolute; inset: 0; border-radius: 24%; pointer-events: none; opacity: .12; backface-visibility: hidden; transform: translateZ(calc(19px * var(--zs, 1))); background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.36) 48%, rgba(255,255,255,.1) 56%, rgba(255,255,255,0) 68%); }
/* Weicher Bodenschatten unter dem Zeichen (Licht oben links: leicht nach rechts versetzt); nur transform/opacity */
.y3d::after { content: ""; position: absolute; left: 50%; top: 76%; width: calc(var(--mark, var(--art) * .5) * 1.05); height: calc(var(--mark, var(--art) * .5) * .16); margin: 0 0 0 calc(var(--mark, var(--art) * .5) * -.42); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(10, 8, 48, .42), rgba(10, 8, 48, .16) 58%, rgba(10, 8, 48, 0)); }
.y3d-glow { position: absolute; left: 50%; top: 50%; width: calc(var(--art) * .9); height: calc(var(--art) * .9); margin: calc(var(--art) * -.45) 0 0 calc(var(--art) * -.45); border-radius: 50%; background: radial-gradient(circle, rgba(126,224,200,.30) 0%, rgba(63,55,201,.20) 42%, rgba(63,55,201,0) 70%); }
.y3d-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--art) * .88); height: calc(var(--art) * .88); margin: calc(var(--art) * -.44) 0 0 calc(var(--art) * -.44); border-radius: 50%; border: 2px solid; border-color: #7EE0C8 rgba(140,134,255,.7) rgba(126,224,200,.3) rgba(140,134,255,.7); transform: rotateX(72deg) rotateZ(0deg); }
.y3d-ring::after { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(126,224,200,.45), 0 0 16px rgba(126,224,200,.9); }
.y3d-ring-b { width: calc(var(--art) * .7); height: calc(var(--art) * .7); margin: calc(var(--art) * -.35) 0 0 calc(var(--art) * -.35); border-color: rgba(255,255,255,.32); transform: rotateY(68deg) rotateX(12deg) rotateZ(0deg); }
.y3d-ring-b::after { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); }
.y3d-chips, .y3d-cg { position: absolute; inset: 0; }
.y3d-chip { --px: calc(var(--art) * var(--cx, 0)); --py: calc(var(--art) * var(--cy, 0)); position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(15,14,46,.78); color: #fff; font: 700 .74rem/1.2 var(--mono); letter-spacing: .03em; white-space: nowrap; transform: translate(var(--px), var(--py)) translate(-50%, -50%); }
.y3d-chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #7EE0C8; }
.y3d-chip.c1 { --cx: -.40; --cy: -.30; } .y3d-chip.c2 { --cx: .40; --cy: -.20; } .y3d-chip.c3 { --cx: -.44; --cy: .12; }
.y3d-chip.c4 { --cx: .38; --cy: .26; } .y3d-chip.c5 { --cx: -.12; --cy: .40; }
.y3d-chip.c2::before { background: #8C86FF; } .y3d-chip.c3::before { background: #FFD27A; } .y3d-chip.c4::before { background: #FF9C8F; } .y3d-chip.c5::before { background: #fff; }
@media (max-width: 959px) {
  /* Mobil: kompaktes Band über der Überschrift, alles im Fluss und innerhalb der Breite */
  .hero-art { --art: 150px; --mark: 92px; --amp: .7; --zs: .55; position: relative; top: auto; right: auto; width: 100%; height: var(--art); margin: -.25rem 0 .75rem; }
  .y3d-chip { padding: .22rem .6rem; font-size: .68rem; }
  .y3d-chip.c1 { --cx: -.9; --cy: -.30; } .y3d-chip.c2 { --cx: .82; --cy: -.36; } .y3d-chip.c3 { --cx: -.98; --cy: .26; }
  .y3d-chip.c4 { --cx: .70; --cy: .30; } .y3d-chip.c5 { --cx: -.08; --cy: .44; }
}
/* Kurze Handys (z. B. 360x640): Logo-Band niedriger, damit das URL-Feld im ersten Bildschirm bleibt */
@media (max-height: 700px) and (max-width: 959px) {
  .hero-art { --art: 84px; --mark: 52px; margin: -.25rem 0 .1rem; }
  .y3d-chip.c1 { --cy: -.12; } .y3d-chip.c2 { --cy: -.16; }
  .y3d-chip { padding: .12rem .45rem; font-size: .6rem; }
  .hero { padding-top: 1rem; }
  .hero .eyebrow { font-size: .72rem; margin-bottom: .35rem; }
  .hero .eyebrow::after { margin-top: .35rem; }
  .hero h1 { font-size: clamp(1.45rem, 6.6vw, 1.75rem); line-height: 1.15; margin-bottom: .6rem; }
  .hero .lead { font-size: .92rem; line-height: 1.45; margin-bottom: .5rem; }
  .hero-path { margin-top: .75rem; font-size: 1rem; }
  .hero-path + .check-form { margin-top: .35rem; }
}
@media (max-width: 400px) {
  .y3d-chip.c1 { --cx: -.70; } .y3d-chip.c2 { --cx: .66; } .y3d-chip.c3 { --cx: -.72; } .y3d-chip.c4 { --cx: .50; }
}

/* Y-Zeichen: reines CSS (laeuft auch im fx-lite-Modus), nur bei "Bewegung reduzieren" aus. Nur transform/opacity.
   Desktop: ruhiges Pendeln mit Nicken (ease-in-out). Mobil: vollstaendige Drehung, die auf der Vorderseite verweilt
   (ease-in-out ueber 360 Grad), dazu leichtes Schweben und ein wandernder Lichtreflex. */
@media (prefers-reduced-motion: no-preference) {
  .y3d-scene { animation: y3d-idle 11s ease-in-out infinite alternate; }
  .y3d-stack { animation: y3d-float 5.5s ease-in-out infinite alternate; }
  .y3d-ring { animation: y3d-orbit 15s linear infinite; }
  .y3d-ring-b { animation-name: y3d-orbit-b; animation-duration: 19s; animation-direction: reverse; }
  .y3d-cg { animation: y3d-bob 4.6s ease-in-out infinite alternate; }
  .y3d-cg-b { animation-duration: 5.4s; animation-delay: -2.5s; }
  .y3d-stack::after { animation: y3d-sheen 11s ease-in-out infinite alternate; }
  .y3d::after { animation: y3d-shadow 11s ease-in-out infinite alternate; }
  @keyframes y3d-idle { from { transform: translateY(calc(var(--amp, 1) * 6px)) rotateY(calc(var(--amp, 1) * -28deg)) rotateX(calc(var(--amp, 1) * 12deg)); } to { transform: translateY(calc(var(--amp, 1) * -12px)) rotateY(calc(var(--amp, 1) * 18deg)) rotateX(calc(var(--amp, 1) * -6deg)); } }
  @keyframes y3d-float { from { transform: translateY(3px) rotateZ(-1.5deg); } to { transform: translateY(-5px) rotateZ(1.5deg); } }
  @keyframes y3d-shadow { from { transform: scale(1.06); opacity: 1; } to { transform: scale(.84); opacity: .6; } }
  @keyframes y3d-sheen { from { opacity: .05; } to { opacity: .95; } }
  @keyframes y3d-orbit { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
  @keyframes y3d-orbit-b { from { transform: rotateY(68deg) rotateX(12deg) rotateZ(0deg); } to { transform: rotateY(68deg) rotateX(12deg) rotateZ(360deg); } }
  @keyframes y3d-bob { from { transform: translate(-4px, 0); } to { transform: translate(5px, -16px); } }
  @media (max-width: 959px) {
    .y3d-scene { animation: y3d-spin 16s cubic-bezier(.45, 0, .55, 1) infinite; }
    .y3d-stack::after { animation: y3d-sheen-m 16s cubic-bezier(.45, 0, .55, 1) infinite; }
    .y3d::after { animation: y3d-shadow-m 5.5s ease-in-out infinite alternate; }
    @keyframes y3d-shadow-m { from { transform: scale(1.03); opacity: 1; } to { transform: scale(.9); opacity: .72; } }
    @keyframes y3d-spin { from { transform: rotateX(8deg) rotateY(0deg); } to { transform: rotateX(8deg) rotateY(360deg); } }
    @keyframes y3d-sheen-m { 0%, 100% { opacity: .9; } 22%, 78% { opacity: .05; } }
  }
  /* Scroll-Reveal: nur bis zum Einblenden unsichtbar, danach normale Werte */
  .fx .fx-r:not(.fx-in) { opacity: 0; }
  .fx .fx-r.fx-in { animation: fx-rise .6s cubic-bezier(.22, .68, 0, 1) var(--fx-d, 0ms) backwards; }
  @keyframes fx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  /* Score-Beispiel */
  .fx .fx-fill { transform: scaleX(0); transform-origin: 0 50%; }
  .fx .fx-go .fx-fill { transform: scaleX(1); transition: transform .9s cubic-bezier(.22, .68, 0, 1) var(--fx-d, 0ms); }
  .fx .score-ring .bar { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.22, .68, 0, 1); }
  /* CTA-Band: langsamer Lichtstreif */
  .fx .cta-band { position: relative; overflow: hidden; }
  .fx .cta-band > * { position: relative; }
  .fx .cta-band::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 40%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0)); transform: translateX(0) skewX(-20deg); animation: fx-beam 11s linear infinite; }
  @keyframes fx-beam { 0% { transform: translateX(0) skewX(-20deg); } 55%, 100% { transform: translateX(380%) skewX(-20deg); } }
  /* Karten: Tilt und Lichtreflex (Zeigergeraet) */
  .fx .mod-card, .fx .pkg-card, .fx .pkg-teaser, .fx .path-card, .fx .stepup-card { position: relative; }
  .fx .mod-card::before, .fx .pkg-card::before, .fx .pkg-teaser::before, .fx .path-card::before, .fx .stepup-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(63,55,201,.10), rgba(63,55,201,0) 55%); }
  .fx .card.fx-tilt { transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition-duration: .08s, .15s, .15s, .15s; }
  .fx .card.fx-tilt::before { opacity: 1; }
  /* Showcase: Browserfenster bleibt in Ruhe unverzerrt (scharfer iframe), Tiefe nur ueber versetzte Ebene/Schatten;
     bei Hover/Fokus hebt es sich leicht an (nur translateY, kein Neigen des iframes) */
  @media (min-width: 861px) and (hover: hover) {
    .fx .sc-device[data-device="desktop"] { box-shadow: 0 0 0 1px var(--line), 18px 22px 0 -6px rgba(63, 55, 201, .10), 0 24px 46px rgba(23, 23, 43, .18); transition: transform .5s cubic-bezier(.22, .68, 0, 1), box-shadow .5s ease; }
    .fx .sc-stage:hover .sc-device[data-device="desktop"], .fx .sc-stage:focus-within .sc-device[data-device="desktop"] { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 30px 54px rgba(23, 23, 43, .22); }
  }
}
/* Pause ausserhalb des Sichtfelds und im verdeckten Tab */
.fx-off, .fx-off::before, .fx-off::after, .fx-off *, .fx-off *::before, .fx-off *::after, .fx-paused *, .fx-paused *::before, .fx-paused *::after { animation-play-state: paused !important; }

/* === Produktempfehlung im Website-Check (recommend.js / report-render.js recoCard) === */
.reco { margin: 0 0 2rem; padding: clamp(1.1rem, 4vw, 2rem); border-radius: var(--radius); color: #fff; background: radial-gradient(ellipse 60% 120% at 90% 0%, rgba(127,224,203,.18) 0%, rgba(127,224,203,0) 60%), linear-gradient(135deg, var(--ink-2) 0%, var(--primary) 100%); box-shadow: var(--shadow-pop); overflow-wrap: anywhere; }
.reco h3, .reco h4, .reco h5, .reco p, .reco li { color: #fff; }
.reco .reco-title { margin: 0 0 1rem; font-size: clamp(1.3rem, 4vw, 1.6rem); }
.reco-main { padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.35); border-left: 6px solid var(--mint); border-radius: var(--radius-btn); background: rgba(15,14,46,.45); }
.reco .reco-label { margin: 0 0 .25rem; font-size: .9rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--mint); }
.reco .reco-product { margin: 0 0 .35rem; font-size: 1.25rem; }
.reco-price { display: inline-block; margin-left: .25rem; padding: .05rem .6rem; border: 1px solid var(--mint); border-radius: var(--radius-pill); font-size: 1rem; white-space: nowrap; color: var(--mint); }
.reco .reco-reason { margin: 0 0 .9rem; font-weight: 600; }
.reco .reco-cta, .reco .reco-sum { margin: .5rem 0 0; }
.reco .reco-fixes { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .6rem; }
.reco .reco-fixes .btn, .reco .reco-cta .btn { white-space: normal; }
.reco .reco-sub { margin: 1.25rem 0 .4rem; font-size: 1.05rem; }
.reco .reco-why, .reco .reco-alts { margin: 0; padding-left: 1.25rem; }
.reco .reco-why li, .reco .reco-alts li { margin-bottom: .35rem; }
.reco a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: .15em; font-weight: 650; }
.reco a:not(.btn):hover { color: var(--mint); }
.reco .reco-hint { margin: 1.25rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.3); font-size: .95rem; color: var(--on-dark-2); }
@media print { .reco { color: #000; background: none; box-shadow: none; border: 1px solid #000; } .reco * { color: #000 !important; } }
/* Produktempfehlung: Einschätzung + Empfehlungszeile */
.reco .reco-sub-first { margin-top: 0; }
.reco .reco-assess { margin: 0 0 1rem; font-size: 1.05rem; }
.reco .reco-product { font-size: 1.3rem; }
.reco .reco-product strong { font-weight: 800; }
.reco .reco-selffix-title { margin: .9rem 0 .35rem; font-size: 1rem; }
.reco .reco-selffix { margin: 0 0 .5rem; padding-left: 1.25rem; }
.reco .reco-selffix li { margin-bottom: .3rem; }

/* Fuenf Pruefbereiche: ab Desktop 3 Spalten, BFSG-Karte ueber 2 Spalten (2+3 statt 3+2 mit Leerzelle) */
@media (min-width: 900px) {
  .mod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mod-grid .mod-card-main { grid-column: span 2; }
}

/* ===== 18 Rechnungsgenerator (rechnung.html) ===== */
.inv-wrap { max-width: 1440px; }
.inv-head { max-width: 760px; }
.inv-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 1.5rem; }
@media (min-width: 1100px) {
  .inv-layout { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); gap: 2.5rem; }
  .inv-preview-col { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; padding: 4px; }
}
.inv-box { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1.25rem; box-shadow: var(--shadow-card); }
.inv-box > legend { font-size: 1.15rem; font-weight: 760; padding: 0 .4rem; margin-left: -.4rem; float: none; width: auto; }
.inv-sub { margin: 0 0 1.1rem; }
.inv-sub > legend { font-weight: 650; font-size: 1rem; }
.inv-radios { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-bottom: .7rem; }
.inv-radios-col { flex-direction: column; }
.inv-radios .check-line { min-height: 32px; align-items: center; }
.inv-radios .check-line input { margin-top: 0; }
.inv-two { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.field-error { color: var(--crit); font-weight: 600; font-size: .95rem; margin: .35rem 0 0; }
[aria-invalid="true"] { border-color: var(--crit) !important; }
.inv-item { border: 1px solid var(--line-strong) !important; border-radius: var(--radius-btn); padding: .75rem .9rem .5rem !important; margin: 0 0 1rem !important; background: var(--bg); }
.inv-item > legend { font-weight: 700; font-size: 1rem; padding: 0 .35rem; float: none; width: auto; }
.inv-item-grid { display: grid; gap: 0 .75rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.inv-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.inv-line-total { margin: 0; font-weight: 650; color: var(--muted); }
.inv-item-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.inv-ib { min-width: 44px; padding-inline: .6rem; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.inv-toolbar { margin-bottom: 1rem; }
.inv-toolbar h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.inv-checklist { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.inv-checklist h3 { font-size: 1.02rem; line-height: 1.35; }
.inv-check-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.inv-check-list li { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .3rem; font-size: .98rem; }
.inv-mark { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; line-height: 1; margin-top: .1rem; }
.inv-check-list .is-ok .inv-mark { background: #EBF6F3; color: var(--ok); border: 1.5px solid var(--ok); }
.inv-check-list .is-missing .inv-mark { background: #FFF4E8; color: var(--warn); border: 1.5px solid var(--warn); }
.inv-check-list .is-optional .inv-mark { background: #fff; color: var(--muted); border: 1.5px dashed var(--muted); font-style: italic; }
.inv-level { color: var(--muted); font-size: .92em; }
.inv-notices-h { font-size: 1rem; margin: .9rem 0 .4rem; }
.inv-notice-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.inv-notice-list li { border-left: 4px solid var(--primary); background: var(--tint); padding: .45rem .7rem; margin: 0 0 .4rem; font-size: .95rem; border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }
.inv-notice-list .is-warn { border-left-color: var(--warn); background: #FFF4E8; }
.inv-sub-hint { margin: -.2rem 0 .6rem; }
.inv-scroll { container-type: inline-size; background: #E9E9F2; padding: clamp(8px, 2cqw, 20px); border-radius: var(--radius); overflow-x: auto; }
.inv-scroll:focus-visible { outline-offset: 2px; }

/* Rechnungsblatt (Papier-Optik, skaliert mit der Breite) */
.inv-sheet { --inv-fs: clamp(11.5px, 1.7cqw, 14px); background: #fff; color: #111; width: 100%; max-width: 820px; margin: 0 auto; min-height: 20rem; padding: clamp(14px, 6cqw, 52px); font-size: var(--inv-fs); line-height: 1.45; box-shadow: var(--shadow-pop); border-top: 5px solid var(--primary); overflow-wrap: anywhere; }
@supports not (font-size: 1cqw) { .inv-sheet { --inv-fs: 12px; } }
.inv-sheet * { color: inherit; }
.inv-ph { color: #5A5A74 !important; font-style: italic; border-bottom: 1px dotted #5A5A74; }
.inv-senderline { font-size: .78em; color: #4B4B63 !important; border-bottom: 1px solid #CFCDEA; padding-bottom: .2em; margin: 0 0 1em; }
.inv-top { display: grid; gap: 1em 2em; grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5em; }
@container (min-width: 480px) { .inv-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.inv-small { font-size: .78em; color: #4B4B63 !important; }
.inv-rec-lines { white-space: pre-line; font-weight: 500; }
.inv-meta { margin: 0; display: grid; gap: .15em; }
.inv-meta > div { display: flex; justify-content: space-between; gap: 1em; }
.inv-meta dt { color: #4B4B63; }
.inv-meta dd { margin: 0; font-weight: 600; text-align: right; }
.inv-sheet .inv-title { font-size: 1.8em; color: var(--primary) !important; margin: 0 0 .6em; letter-spacing: -.01em; }
.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.inv-table th { text-align: left; font-weight: 700; font-size: .85em; padding: .45em .4em; border-bottom: 2px solid var(--primary); }
.inv-table td { padding: .5em .4em; border-bottom: 1px solid #E3E3EE; vertical-align: top; }
.inv-table .c-num { text-align: right; white-space: nowrap; }
.inv-table th.c-num { white-space: nowrap; }
.inv-table .c-pos { width: 2.6em; }
.inv-table .c-desc { white-space: pre-line; }
.inv-table tr { break-inside: avoid; }
.inv-totals { margin: 0 0 1em auto; width: min(100%, 24em); display: grid; gap: .2em; }
.inv-totals > div { display: flex; justify-content: space-between; gap: 1em; }
.inv-totals dt { color: #333; }
.inv-totals dd { margin: 0; text-align: right; white-space: nowrap; }
.inv-totals .is-total { border-top: 2px solid var(--primary); padding-top: .35em; margin-top: .2em; font-weight: 800; font-size: 1.1em; }
.inv-taxnote { margin: 0 0 1.2em; font-weight: 600; }
.inv-pay { margin: 1.2em 0; padding: .8em 1em; background: #F4F4FA; border-left: 4px solid var(--primary); break-inside: avoid; }
.inv-pay p { margin: 0 0 .5em; }
.inv-paymeta dd { text-align: left; }
.inv-paymeta > div { justify-content: flex-start; }
.inv-paymeta dt { min-width: 8.5em; }
.inv-notes { white-space: pre-line; margin: 1em 0; }
.inv-foot { display: grid; gap: .8em 2em; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); margin-top: 2em; padding-top: .8em; border-top: 1px solid #CFCDEA; font-size: .8em; color: #333; break-inside: avoid; }
.inv-foot-col > div { white-space: pre-line; }

@media print {
  @page { size: A4; margin: 16mm 18mm; }
  body > *:not(main) { display: none !important; }
  main { display: block; }
  .inv-page { padding: 0 !important; background: #fff; }
  .inv-wrap { max-width: none; padding: 0; }
  .inv-head, .inv-form-col, .inv-toolbar, .inv-checklist { display: none !important; }
  .inv-layout { display: block; margin: 0; }
  .inv-preview-col { position: static; max-height: none; overflow: visible; padding: 0; }
  .inv-scroll { background: none; padding: 0; overflow: visible; container-type: normal; border-radius: 0; }
  .inv-sheet { --inv-fs: 10pt; box-shadow: none; max-width: none; width: 100%; min-height: 0; padding: 0; border-top: 0; font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv-ph { visibility: hidden; border: 0; }
  .inv-meta > div:has(> dd > .inv-ph:only-child) { display: none; } /* leere Pflichtzeilen (z. B. Leistungsdatum) im Druck ausblenden */
  .inv-sheet .inv-title { font-size: 20pt; }
  .inv-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* Spamschutz: Honeypot-Feld, außerhalb des sichtbaren Bereichs (nicht display:none), für Screenreader per aria-hidden verborgen */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }