:root{
  /* Marke */
  --blue-500:#0188b6; --blue-600:#00779e; --blue-700:#006786; --blue-800:#014f67;
  --blue-100:#e9f8ff; --blue-050:#f4fbfe;
  --magenta-500:#de0065; --magenta-600:#c2005a; --magenta-100:#ffeaf3;

  /* Neutrale (warm) */
  --ink-900:#151615; --ink-800:#2a2a29; --ink-700:#454443; --ink-500:#6b6a69;
  --ink-400:#8e8d8d; --ink-300:#c9c7c6; --ink-200:#e2e0df; --ink-100:#eeecea;
  --paper-000:#ffffff; --paper-050:#f8f4f4; --paper-100:#f3f2f2;

  /* Semantisch */
  --ok-600:#1f7a43; --ok-100:#e7f5ec;
  --warn-600:#9a5b00; --warn-100:#fdf1dd;
  --error-600:#b3231d; --error-100:#fdeceb;

  /* Aliasse */
  --surface-page:var(--paper-100); --surface-card:var(--paper-050);
  --surface-raised:var(--paper-000); --surface-sunken:var(--ink-100);
  --surface-inverse:var(--ink-900); --surface-info:var(--blue-100);
  --text-strong:var(--ink-900); --text-body:var(--ink-700);
  --text-muted:var(--ink-500); --text-faint:var(--ink-400);
  --text-on-accent:#fff; --text-on-inverse:#f6f5f4;
  --text-link:var(--blue-700); --text-link-hover:var(--blue-800);
  --accent-primary:var(--blue-700); --accent-primary-hover:var(--blue-800);
  --accent-brand:var(--blue-500); --accent-secondary:var(--magenta-500); --accent-tertiary:var(--ink-400);
  --border-hairline:var(--ink-200); --border-strong:var(--ink-300); --border-focus:var(--blue-700);
  --checker-a:#fff; --checker-b:#dedcdb; --checker-size:16px;

  /* Schrift */
  --font-display:"Oswald","Oswald Fallback",system-ui,sans-serif;
  --font-body:"Lato","Lato Fallback",system-ui,-apple-system,sans-serif;

  --type-hero:clamp(46px,6.2vw,84px); --type-h1:clamp(36px,4.4vw,58px);
  --type-h2:clamp(29px,3vw,40px); --type-h3:24px; --type-h4:20px;
  --type-lead:clamp(19px,1.5vw,23px); --type-body:18px; --type-body-sm:16px;
  --type-label:14px; --type-micro:13px;
  --lh-display:1.02; --lh-heading:1.12; --lh-lead:1.5; --lh-body:1.65;
  --ls-display:-0.01em; --ls-label:0.12em;
  --weight-body:400; --weight-bold:700; --weight-display:600; --weight-display-heavy:700;

  /* Raum / Radius / Schatten / Motion */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --gutter:var(--space-5); --section-y:clamp(56px,7vw,112px);
  --measure:34rem; --measure-wide:46rem; --page-max:1180px;
  --control-h:56px; --control-h-sm:44px;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
  --rule-accent:4px; --border-1:1px;
  --shadow-card:0 2px 10px rgba(21,22,21,.06);
  --shadow-focus:0 0 0 3px rgba(1,136,182,.35);

  --ease-standard:cubic-bezier(.2,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms;
  --transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--type-body);line-height:var(--lh-body);
  font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;text-wrap:pretty;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-strong);line-height:var(--lh-heading);letter-spacing:var(--ls-display);margin:0}
h1{font-size:var(--type-h1)}h2{font-size:var(--type-h2)}h3{font-size:var(--type-h3)}h4{font-size:var(--type-h4)}
p{margin:0 0 var(--space-4)}
img{display:block;max-width:100%}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
::selection{background:rgba(1,136,182,.24)}
.ico{width:1.25em;height:1.25em;flex:0 0 auto;display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:96px}

.checker{
  background-color:var(--checker-a);
  background-image:linear-gradient(45deg,var(--checker-b) 25%,transparent 25%,transparent 75%,var(--checker-b) 75%),linear-gradient(45deg,var(--checker-b) 25%,transparent 25%,transparent 75%,var(--checker-b) 75%);
  background-size:var(--checker-size) var(--checker-size);
  background-position:0 0,calc(var(--checker-size)/2) calc(var(--checker-size)/2);
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface-raised);border-bottom:var(--border-1) solid var(--border-hairline)}
.brand-rule{display:grid;grid-template-columns:1fr 1fr 1fr;height:6px}
.brand-rule span:nth-child(1){background:var(--blue-500)}
.brand-rule span:nth-child(2){background:var(--magenta-500)}
.brand-rule span:nth-child(3){background:var(--ink-900)}
.header-inner{max-width:var(--page-max);margin:0 auto;padding:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.logo{display:inline-flex;align-items:center}
.logo img{height:100px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.nav-link{font-size:var(--type-body-sm);font-weight:var(--weight-bold);text-decoration:none;color:var(--text-body);border-bottom:2px solid transparent;padding:var(--space-2) 0}
.nav-link:hover{color:var(--text-strong)}
.nav-link.is-active{color:var(--text-strong);border-bottom-color:var(--accent-brand)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  font-family:var(--font-body);font-weight:var(--weight-bold);line-height:1.1;text-align:center;white-space:nowrap;
  border:var(--border-1) solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;
  min-height:var(--control-h-sm);padding:0 var(--space-5);font-size:var(--type-body-sm);
  transition:var(--transition-control);flex-shrink:0;
}
.btn-lg{min-height:var(--control-h);padding:0 var(--space-6);font-size:var(--type-body)}
.btn-sm{min-height:36px;padding:0 var(--space-4);font-size:var(--type-label)}
.btn-block{width:100%}
.btn .ico{width:20px;height:20px}
.btn-primary{background:var(--accent-primary);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-primary-hover);color:var(--text-on-accent)}
.btn-secondary{background:var(--surface-raised);color:var(--text-strong);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--paper-050)}
.btn-magenta{background:var(--accent-secondary);color:var(--text-on-accent)}
.btn-magenta:hover{background:var(--magenta-600);color:var(--text-on-accent)}
.btn:disabled{opacity:.45;pointer-events:none}

/* ---------- Badge / Accent rule ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--type-label);font-weight:var(--weight-bold);padding:6px var(--space-3);border-radius:var(--radius-sm);background:var(--surface-info);color:var(--blue-800)}
.badge .ico{width:16px;height:16px}
.badge-ok{background:var(--ok-100);color:var(--ok-600)}
.accent-rule{display:block;width:100%;height:var(--rule-accent);background:var(--accent-brand)}
.accent-rule--magenta{background:var(--accent-secondary)}
.accent-rule--grey{background:var(--accent-tertiary)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--space-5)}
.main{max-width:var(--page-max);margin:0 auto;padding:var(--space-6) var(--space-5) var(--section-y);display:grid;gap:var(--section-y)}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--space-8);align-items:center}
.hero-copy{display:grid;gap:var(--space-5);justify-items:start}
.hero h1{font-size:var(--type-hero);line-height:var(--lh-display);max-width:14ch;letter-spacing:var(--ls-display)}
.hero h1 .accent{color:var(--accent-primary)}
.hero .lead{margin:0;font-size:var(--type-lead);line-height:var(--lh-lead);max-width:30ch;color:var(--text-body)}
.hero-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-3)}
.hero-list li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--type-body);color:var(--text-body)}
.hero-list i{width:14px;height:14px;border-radius:3px;flex:0 0 auto}
.hero-list .c1{background:var(--blue-500)}.hero-list .c2{background:var(--magenta-500)}.hero-list .c3{background:var(--ink-400)}

/* ---------- Werkzeug-Karte ---------- */
.tool{background:var(--surface-card);border:var(--border-1) solid var(--border-hairline);border-radius:var(--radius-md);overflow:hidden}
.tool-body{padding:var(--space-6);display:grid;gap:var(--space-5)}
.stage{display:grid;gap:var(--space-5)}

.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius-md);background:var(--surface-raised);padding:var(--space-6);display:grid;gap:var(--space-5);justify-items:center;text-align:center;cursor:default;transition:var(--transition-control)}
.dropzone.is-dragover{border-color:var(--accent-brand);background:var(--blue-050)}
.checker-drop{width:100%;min-height:200px;border-radius:var(--radius-sm);display:grid;place-items:center;overflow:hidden}
.drop-title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--type-h3);color:var(--text-strong);background:var(--surface-raised);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm)}

.preview{width:100%;min-height:200px;max-height:clamp(240px,42vh,420px);border-radius:var(--radius-sm);display:grid;place-items:center;overflow:hidden;padding:var(--space-2)}
.preview img{max-width:100%;max-height:clamp(224px,40vh,404px);width:auto;height:auto;object-fit:contain}
.preview--dim img{opacity:.5;filter:grayscale(.2)}
#result-preview{min-height:240px}
#result-preview[data-background="light"]{background:#fff;background-image:none}
#result-preview[data-background="dark"]{background:var(--ink-900);background-image:none}

.hint{font-size:var(--type-body-sm);color:var(--text-muted);margin:0}
.note{font-size:var(--type-micro);color:var(--text-muted);margin:0}
.status-line:empty{display:none}
.download-note{font-size:var(--type-micro);color:var(--text-muted)}

/* ---------- Segmented (Qualität / Vergleich) ---------- */
.seg-field{border:0;margin:0;padding:0;display:grid;gap:var(--space-3)}
.seg-field legend{padding:0;font-size:var(--type-micro);font-weight:var(--weight-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:var(--border-1) solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden}
.seg-opt{min-height:var(--control-h);padding:var(--space-3) var(--space-4);cursor:pointer;display:grid;gap:2px;place-content:center;text-align:center;background:var(--surface-raised);color:var(--text-strong);transition:var(--transition-control)}
.seg-opt + .seg-opt{border-left:var(--border-1) solid var(--border-strong)}
.seg-opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.seg-main{font-weight:var(--weight-bold);font-size:var(--type-body-sm)}
.seg-detail{font-size:var(--type-micro);opacity:.72}
.seg-opt:has(input:checked){background:var(--accent-primary);color:var(--text-on-accent)}
.seg-opt:has(input:checked) .seg-detail{opacity:.85}
.seg-opt:not(:has(input:checked)):hover{background:var(--paper-050)}
.seg-opt:has(input:focus-visible){outline:3px solid var(--border-focus);outline-offset:-3px}
.seg-field--compact .seg-opt{min-height:var(--control-h-sm)}

/* ---------- Fortschritt ---------- */
.progress{display:grid;gap:var(--space-2)}
.progress-label{font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--type-body-sm);color:var(--text-strong);margin:0}
.progress-track{height:12px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent-brand);border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease-out)}
.indeterminate .progress-fill{width:40%!important;animation:prog 1.4s ease-in-out infinite alternate}
@keyframes prog{to{transform:translateX(180%)}}

/* ---------- Fehler / Erfolg ---------- */
.err-title{font-size:var(--type-h4)}
.err-text{color:var(--text-body);margin:0}
.done-title{display:flex;align-items:center;gap:var(--space-3);font-size:var(--type-h4)}
.done-title .ico{color:var(--ok-600);width:22px;height:22px}
.actions{display:flex;gap:var(--space-4);flex-wrap:wrap}

/* ---------- Notice ---------- */
.notice{display:flex;gap:var(--space-4);border-top:var(--rule-accent) solid var(--blue-500);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);background:var(--surface-info)}
.notice-ico{color:var(--blue-800);flex:0 0 auto;line-height:1}
.notice-ico .ico{width:20px;height:20px}
.notice-text{color:var(--text-body);font-size:var(--type-body-sm)}

/* ---------- Nutzen-Karten ---------- */
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6)}
.feature{display:grid;gap:var(--space-4);align-content:start}
.feature .ficon{color:var(--text-strong);line-height:1}
.feature .ficon .ico{width:26px;height:26px}
.feature h3{font-size:var(--type-h4)}
.feature p{margin:0;color:var(--text-body);max-width:var(--measure)}

/* ---------- Section heading / Prose ---------- */
.sec{display:grid;gap:var(--space-6)}
.sec-head{display:grid;gap:var(--space-4);justify-items:start}
.eyebrow{font-size:var(--type-micro);font-weight:var(--weight-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.sec-head h2{max-width:24ch}
.sec-head .lead{margin:0;font-size:var(--type-lead);line-height:var(--lh-lead);color:var(--text-body);max-width:var(--measure)}
.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-7)}
.cols-2--tight{gap:var(--space-6)}
.prose-block h3{font-size:var(--type-h3);margin:0 0 var(--space-3)}
.prose-block p{color:var(--text-body);max-width:var(--measure)}
.prose-block ul{margin:0 0 var(--space-4);padding-left:1.2em;display:grid;gap:var(--space-2);color:var(--text-body)}
.punch{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--type-h3);color:var(--text-strong)}

/* ---------- Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start;background:var(--surface-raised);border:var(--border-1) solid var(--border-hairline);border-radius:var(--radius-md);padding:var(--space-5)}
.step-num{width:52px;height:52px;border-radius:var(--radius-md);background:var(--accent-primary);color:var(--text-on-accent);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--weight-display-heavy);font-size:26px}
.step h3{font-size:var(--type-h4);display:flex;align-items:center;gap:var(--space-3)}
.step h3 .ico{width:20px;height:20px}
.step p{margin:var(--space-2) 0 0;color:var(--text-body);font-size:var(--type-body-sm)}

/* ---------- Checker-Preview (Platzhalter im Text) ---------- */
.checker-figure{margin:0;display:grid;gap:var(--space-3)}
.checker-figure .box{height:300px;border-radius:var(--radius-md);border:var(--border-1) solid var(--border-hairline);display:grid;place-items:center;text-align:center;padding:var(--space-5);color:var(--text-muted);font-size:var(--type-body-sm)}
.checker-figure figcaption{font-size:var(--type-micro);color:var(--text-muted)}

/* ---------- FAQ ---------- */
.faq-list{max-width:var(--measure-wide);border-bottom:var(--border-1) solid var(--border-hairline)}
.faq-item{border-top:var(--border-1) solid var(--border-hairline)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);cursor:pointer;padding:var(--space-4) 0;min-height:var(--control-h-sm);font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--type-h4);color:var(--text-strong)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{font-family:var(--font-body);font-size:24px;line-height:1;color:var(--accent-primary);transition:transform var(--dur-base) var(--ease-standard);flex:0 0 auto}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item .answer{padding:0 0 var(--space-5);color:var(--text-body);max-width:var(--measure)}

/* ---------- Abschluss-Banner ---------- */
.closing{background:var(--surface-inverse);color:var(--text-on-inverse);border-radius:var(--radius-md);padding:var(--space-8) var(--space-7);display:grid;gap:var(--space-5);justify-items:start}
.closing h2{color:var(--text-on-inverse);font-size:var(--type-h1);max-width:18ch}
.closing p{margin:0;font-size:var(--type-lead);max-width:var(--measure);color:rgba(255,255,255,.82)}
.closing .micro{font-size:var(--type-micro);color:rgba(255,255,255,.65)}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-inverse);color:var(--text-on-inverse);padding:var(--space-8) var(--space-5)}
.footer-inner{max-width:var(--page-max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6)}
.site-footer img{height:54px;width:auto}
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-left:auto}
.footer-nav a{color:var(--text-on-inverse);font-size:var(--type-body-sm);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.footer-note{margin:0;width:100%;font-size:var(--type-micro);color:rgba(255,255,255,.72)}

/* ---------- Rechtsseiten ---------- */
.prose{max-width:var(--measure-wide);margin:0 auto;padding:var(--section-y) var(--space-5);display:grid;gap:var(--space-5)}
.prose h1{font-size:var(--type-h1)}
.prose h2{font-size:var(--type-h3);margin-top:var(--space-5)}
.prose p,.prose li{color:var(--text-body)}
.prose a{color:var(--text-link)}
.prose .todo{display:block;border-top:var(--rule-accent) solid var(--blue-500);background:var(--surface-info);color:var(--blue-800);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-size:var(--type-body-sm)}
.prose .back{display:inline-block;margin-top:var(--space-5);font-size:var(--type-body-sm)}

@media (max-width:560px){
  .tool-body{padding:var(--space-5)}
  .closing{padding:var(--space-7) var(--space-5)}
  .actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}