/* Toolbox im Stil „Gutes Gerät“: jedes Tool ist ein ehrliches Gerät mit Gehäuse, Anzeigefenster,
   Statusleuchten und einer orangen Taste. Warmgrauer Grund, Archivo als Schrift, JetBrains Mono nur für
   Anzeigen und Messwerte (wie im Blog). Schriften lokal, keine Anfragen an Fremdserver. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900; 125%;font-display:swap;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900; 125%;font-display:swap;
  src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}

/* Sudowl (2026-10-19): Space Grotesk für Überschriften, IBM Plex Sans für Text, lokal ausgeliefert (SIL OFL) */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations"),url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  /* Grund und Gehäuse */
  --bg:#F1F0EB; --bg-2:#E8E7E1; --surface:#F8F7F3;
  --housing-hi:#EBEAE4; --housing:#E0DFD8; --housing-lo:#CFCDC4;
  --well:#F9F9F5; --lcd:#E6EEEC; --lcd-ink:#1C2A2E;
  --anthracite:#0C4250; --anthracite-2:#0A3843;
  /* Tinte */
  --ink:#1C1F26; --soft:#4A5560; --muted:#56616B;
  --rule:#D9D6CC; --rule-strong:#BDB9AC;
  /* Sudowl: Primär-Taste in Petrol, Grün nur für „läuft“ */
  --signal:#0F4C5C; --signal-hi:#14606F; --signal-edge:#0A3843; --signal-deep:#0A3843; --signal-soft:#DDE9EC; --on-signal:#F1F0EB;
  /* Leuchten und ihre lesbaren Textfarben */
  --led-ok:#2BB673; --led-warn:#D7A21E; --led-bad:#C7372B; --led-off:#C4C2B9;
  --good:#1B7A4C; --warn:#86600C; --bad:#AE2F21;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --display:"Space Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --case:inset 0 1px 0 rgb(255 255 255 / .85),inset 0 -1px 0 rgb(0 0 0 / .05),0 1px 2px rgb(40 35 20 / .10),0 34px 56px -30px rgb(40 35 20 / .42);
  --sunk:inset 0 1px 3px rgb(30 28 20 / .16),inset 0 0 0 1px rgb(30 28 20 / .10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);scrollbar-color:var(--rule-strong) var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--signal-soft);color:var(--ink)}
a{color:var(--ink);text-decoration-color:var(--rule-strong);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
p{margin:0}
code{font:500 .9em var(--mono)}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance;color:var(--ink);}
h1{font-size:clamp(2.35rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.03em;font-weight:540;}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-.024em;font-weight:560;}
h3{font-size:1.14rem;line-height:1.3;letter-spacing:-.012em;font-weight:620}
h1 .hl{display:block;margin-top:.18em;font-size:.6em;line-height:1.12;letter-spacing:-.022em;color:var(--soft);font-weight:420}
section[id]{scroll-margin-top:5rem}
.container{max-width:1200px;margin:0 auto;padding-inline:16px}
@media (min-width:640px){.container{padding-inline:28px}}
@media (min-width:1024px){.container{padding-inline:44px}}
input,select,textarea{caret-color:var(--signal-deep)}

/* ---------- Kopfzeile ---------- */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(8px)){.top{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.2) blur(8px)}}
.top .container{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{font:700 1.2rem var(--display);color:var(--signal)!important;letter-spacing:-.025em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.logo i{width:28px;height:28px;background:url(sudowl-eule.svg) center/contain no-repeat;display:inline-block}
.logo span{color:var(--muted);font-weight:450}
.top nav{display:flex;gap:2px;align-items:center}
.top nav a{font-size:.92rem;font-weight:500;color:var(--soft);text-decoration:none;padding:8px 11px;border-radius:8px;position:relative}
.top nav a:hover{color:var(--ink);background:var(--bg-2)}
.top nav a[aria-current="page"]{color:var(--ink)}
.top nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:2px;background:var(--ink)}
@media (max-width:820px){.top nav a.opt{display:none}}

/* ---------- Bausteine ---------- */
.lede{font-size:1.15rem;line-height:1.6;color:var(--soft);max-width:36rem}
.caption{font-size:.84rem;color:var(--muted)}
.lbl{font:640 .7rem/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* Tasten mit Hub: drücken sich sichtbar ein */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:11px;font:650 1rem/1.2 var(--sans);letter-spacing:-.005em;
  padding:15px 24px 14px;text-decoration:none;border:0;cursor:pointer;position:relative;
  transition:transform .09s var(--ease),box-shadow .09s var(--ease),background-color .2s}
.btn-primary,.btn-light{background:var(--signal);color:var(--on-signal);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),inset 0 -1px 0 rgb(0 0 0 / .12),0 3px 0 var(--signal-edge),0 10px 18px -8px rgb(10 56 67 / .55)}
.btn-primary:hover,.btn-light:hover{background:var(--signal-hi)}
.btn-secondary{background:var(--surface);color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(30 28 20 / .10),0 3px 0 var(--rule-strong),0 10px 16px -10px rgb(40 35 20 / .35)}
.btn-secondary:hover{background:#fff}
.btn-ghost-dark{background:#14606F;color:#F1F0EB;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 3px 0 #072C35,0 10px 18px -10px rgb(0 0 0 / .7)}
.btn-ghost-dark:hover{background:#1A6B7C}
.btn:active:not([disabled]){transform:translateY(3px)}
.btn-primary:active:not([disabled]),.btn-light:active:not([disabled]){box-shadow:inset 0 1px 0 rgb(255 255 255 / .25),inset 0 2px 4px rgb(0 0 0 / .15),0 0 0 var(--signal-edge),0 3px 6px -4px rgb(10 56 67 / .5)}
.btn-secondary:active:not([disabled]){box-shadow:inset 0 0 0 1px rgb(30 28 20 / .12),inset 0 2px 4px rgb(0 0 0 / .08),0 0 0 var(--rule-strong)}
.btn-ghost-dark:active:not([disabled]){box-shadow:inset 0 2px 4px rgb(0 0 0 / .4),0 0 0 #072C35}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--signal-deep);outline-offset:3px}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-sm{padding:11px 18px 10px;font-size:.93rem;border-radius:10px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Statusleuchte */
.led{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--led-off);box-shadow:inset 0 1px 1px rgb(0 0 0 / .2)}
.led.ok{background:var(--led-ok);box-shadow:0 0 0 3px rgb(43 182 115 / .16),0 0 8px rgb(43 182 115 / .55)}
.led.warn{background:var(--led-warn);box-shadow:0 0 0 3px rgb(215 162 30 / .18),0 0 8px rgb(215 162 30 / .55)}
.led.bad{background:var(--led-bad);box-shadow:0 0 0 3px rgb(199 55 43 / .16),0 0 8px rgb(199 55 43 / .5)}

/* ---------- Hero ---------- */
.hero{position:relative}
.hero-grid{display:grid;gap:44px;padding-block:44px 56px;align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:72px;padding-block:72px 80px;align-items:start}.hero-grid > .panel.hero-tool{margin-top:12px}}
.hero-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.hero-copy .lede{margin-top:2px}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:4px 0 0;padding:0;list-style:none;font-size:.9rem;font-weight:550;color:var(--soft)}
.trust li{display:flex;align-items:center;gap:9px}
.trust li::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--led-ok);box-shadow:0 0 0 3px rgb(43 182 115 / .15),0 0 7px rgb(43 182 115 / .5)}

/* Wer das macht: Kleinzeile mit Foto */
.byline{display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:18px;border-top:1px solid var(--rule);font-size:.9rem;line-height:1.45;color:var(--soft);max-width:34rem}
.byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--rule-strong)}
.byline b{color:var(--ink);font-weight:620}
.byline .mono{font-size:.82rem;color:var(--muted)}

/* Domain-Eingabe im Hero (alte Seiten) */
.quick{display:flex;gap:8px;width:100%;max-width:34rem;background:var(--well);border-radius:14px;padding:6px;box-shadow:var(--sunk)}
.quick input{flex:1;min-width:0;border:0;background:transparent;font:500 1rem var(--mono);color:var(--ink);padding:0 14px}
.quick input:focus{outline:none}
.quick .btn{white-space:nowrap}
@media (max-width:480px){.quick{flex-direction:column}.quick input{padding:12px 14px}}

/* ---------- Das Gerät ---------- */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:20px;padding:22px;display:grid;gap:16px;align-content:start;min-width:0;
  box-shadow:0 1px 2px rgb(40 35 20 / .06),0 18px 34px -26px rgb(40 35 20 / .35)}
@media (min-width:640px){.panel{padding:28px}}
.panel.hero-tool{position:relative;border:0;border-radius:28px;gap:18px;padding:26px 24px 28px;
  background:linear-gradient(180deg,var(--housing-hi),var(--housing) 38%,#DAD9D1);box-shadow:var(--case)}
@media (min-width:640px){.panel.hero-tool{padding:32px 34px 34px}}
/* Lautsprechergitter oben rechts: das Erkennungszeichen des Geräts */
.panel.hero-tool::before{content:"";position:absolute;top:30px;right:28px;width:74px;height:26px;pointer-events:none;
  background:radial-gradient(circle,rgb(30 28 20 / .32) 1.6px,transparent 2.2px) 0 0/10px 10px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
@media (min-width:640px){.panel.hero-tool::before{top:36px;right:34px}}
.panel.hero-tool h2{font-size:1.4rem;letter-spacing:-.02em;padding-right:96px}
.panel h2{font-size:1.32rem;letter-spacing:-.02em}
.panel h3{font-size:1.12rem}
.panel.hero-tool .small{color:var(--soft)}

/* Anzeigefenster und Felder sind ins Gehäuse eingelassen */
label.field{display:grid;gap:7px;font:640 .7rem/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);flex:1 1 200px;min-width:0}
.panel input[type=text],.panel input[type=email],.panel select{font:500 1rem/1.3 var(--sans);letter-spacing:0;text-transform:none;padding:13px 14px;border:0;border-radius:11px;background:var(--well);color:var(--ink);width:100%;min-width:0;box-shadow:var(--sunk)}
.panel input[type=text]{font-family:var(--mono);font-size:.98rem}
.panel input::placeholder{color:#7A7972;opacity:1}
.panel input[type=text]:focus,.panel input[type=email]:focus,.panel select:focus{outline:2px solid var(--signal-deep);outline-offset:2px}
.panel select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345443F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:40px}
fieldset.field{border:0;padding:0;margin:0;display:grid;gap:9px}
fieldset.field legend{padding:0;margin-bottom:9px;font:640 .7rem/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;font-size:.93rem;color:var(--ink);align-items:start;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--signal-deep)}

/* Leuchtenreihe: zeigt, was geprüft wird; beim Warten laufen die Leuchten nacheinander an */
.leds{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:14px 2px 2px;list-style:none;border-top:1px solid rgb(30 28 20 / .10)}
.leds li{display:flex;align-items:center;gap:7px;font:640 .68rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.leds li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 1px rgb(0 0 0 / .22)}
.addr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--lcd);border-radius:13px;padding:9px 9px 9px 16px;box-shadow:var(--sunk)}
.addr code{flex:1 1 220px;font:500 1rem/1.4 var(--mono);word-break:break-all;color:var(--lcd-ink)}
.wait{display:flex;gap:10px;align-items:center;color:var(--soft);font-size:.93rem}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--led-warn);flex:none;box-shadow:0 0 0 3px rgb(215 162 30 / .18),0 0 8px rgb(215 162 30 / .6)}
.drop{display:block;border:1.5px dashed var(--rule-strong);border-radius:14px;padding:22px;text-align:center;color:var(--soft);background:var(--well);cursor:pointer;box-shadow:inset 0 1px 3px rgb(30 28 20 / .08);transition:border-color .2s,background-color .2s,color .2s}
.drop:hover,.drop.over{border-color:var(--signal-deep);color:var(--ink);background:var(--signal-soft)}
.drop u{text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.demo-tag{display:inline-flex;align-items:center;gap:7px;font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:7px;background:var(--lcd);color:var(--lcd-ink);box-shadow:var(--sunk)}
.demo-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led-warn)}
.note{font-size:.82rem;color:var(--muted);line-height:1.55}
.ok{font-size:.93rem;padding:12px 14px;border-radius:12px;background:var(--lcd);color:var(--lcd-ink);box-shadow:var(--sunk)}
.err{color:var(--bad);font-size:.93rem;font-weight:500}
[hidden]{display:none!important}

/* ---------- Ergebnisse ---------- */
.results{display:grid;gap:16px;max-width:60rem;margin-inline:auto;padding-bottom:48px;scroll-margin-top:84px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.small{font-size:.875rem;color:var(--muted);line-height:1.55}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.findings{display:grid;margin:0;padding:0;list-style:none}
.findings li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:14px;align-items:start;padding:13px 0;border-top:1px solid var(--rule);font-size:.96rem;color:var(--soft)}
.findings li:first-child{border-top:0;padding-top:0}
@media (max-width:520px){.findings li{grid-template-columns:minmax(0,1fr);gap:6px}}
.pill{display:inline-flex;align-items:center;gap:8px;justify-self:start;font:600 .7rem/1 var(--mono);padding:6px 9px 6px 8px;border-radius:7px;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;margin-top:1px;background:var(--bg-2);color:var(--ink)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--led-off)}
.pill.good{color:var(--good)}.pill.good::before{background:var(--led-ok);box-shadow:0 0 6px rgb(43 182 115 / .6)}
.pill.warn{color:var(--warn)}.pill.warn::before{background:var(--led-warn);box-shadow:0 0 6px rgb(215 162 30 / .6)}
.pill.bad{color:var(--bad)}.pill.bad::before{background:var(--led-bad);box-shadow:0 0 6px rgb(199 55 43 / .55)}
.score{display:flex;align-items:baseline;gap:12px;background:var(--lcd);border-radius:14px;padding:16px 20px;box-shadow:var(--sunk);justify-self:start}
.score b{font:700 3.4rem/1 var(--mono);letter-spacing:-.03em;color:var(--lcd-ink);font-variant-numeric:tabular-nums}
.score .small{color:#4E5446}
.panel-rec{display:grid;gap:6px;padding:18px 20px;border-radius:14px;background:var(--lcd);box-shadow:var(--sunk)}
.panel-rec strong{font:640 1.6rem/1.15 var(--sans);letter-spacing:-.02em;color:var(--lcd-ink)}
.panel-rec .small{color:#4E5446}
form.lead{display:grid;gap:13px;border-top:1px solid var(--rule);padding-top:18px}
form.lead label.field{flex:none}
/* Roast-Karte: dunkles Anzeigefeld, damit sie als Bild teilbar wirkt */
.roastcard{background:linear-gradient(180deg,#0F4C5C,var(--anthracite-2));color:#F1F0EB;border-radius:22px;padding:28px;display:grid;gap:14px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 30px 56px -30px rgb(10 56 67 / .6)}
.roastcard .big{font:700 clamp(2.4rem,8vw,3.6rem)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.roastcard .roast{font:560 1.22rem/1.45 var(--sans);letter-spacing:-.01em;text-wrap:balance}
.roastcard .meta{font:500 .75rem var(--mono);color:#A7BFC5;letter-spacing:.04em}
.roastcard .meta:first-child{color:#D6E4E7}
.cbars{display:grid;gap:13px}
.cbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:.92rem;color:var(--soft)}
.cbar .track{grid-column:1/-1;height:10px;background:var(--bg-2);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px rgb(30 28 20 / .14)}
.cbar .fill{height:100%;background:var(--soft);border-radius:999px}
.cbar .fill.bad{background:var(--led-bad)}
.cbar .fill.warn{background:var(--led-warn)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{border-radius:13px;padding:14px 16px;background:var(--lcd);display:grid;gap:4px;box-shadow:var(--sunk)}
.tile b{font:700 1.75rem/1.1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--lcd-ink)}
.tile .small{color:#4E5446}
.scroll{overflow-x:auto}
table.tbl{border-collapse:collapse;width:100%;font-size:.93rem}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font:640 .7rem/1.2 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.tbl td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .sub{display:block;font-size:.8rem;color:var(--muted);margin-top:4px}

/* ---------- Abschnitte ---------- */
.sec{padding-block:80px}
@media (min-width:768px){.sec{padding-block:116px}}
.sec.alt{background:var(--bg-2);border-block:1px solid var(--rule)}
.head2{display:grid;gap:16px;max-width:44rem;margin-bottom:52px}
.head2.center{margin-inline:auto;text-align:center;justify-items:center}
.head2 .lede{max-width:40rem}

.statement{max-width:46rem;margin:8px auto 64px;padding-top:26px;border-top:1px solid var(--rule);text-align:center;font:500 clamp(1.08rem,2.2vw,1.28rem)/1.5 var(--sans);color:var(--soft);text-wrap:balance}

/* Inhaltsspalten wie in einer Bedienungsanleitung: Linie oben, kein Kasten */
.grid3,.grid4{display:grid;gap:40px 32px}
@media (min-width:768px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{border-top:2px solid var(--ink);padding-top:18px;display:grid;gap:9px;align-content:start;min-width:0}
.card p{color:var(--soft);font-size:.98rem}
.card h3 .k{display:inline-block;margin-right:6px;padding:3px 7px 2px;border-radius:6px;font:600 .74rem/1.3 var(--mono);letter-spacing:.02em;color:var(--ink);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--rule);vertical-align:2px}
.sec.alt .card h3 .k{background:var(--bg)}
.card h2.h3{font-size:1.14rem;line-height:1.3;letter-spacing:-.012em;font-weight:620}

/* Ablauf: nummerierte Tasten, weil die Reihenfolge zählt */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.steps li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:8px 20px;padding:28px 0;border-bottom:1px solid var(--rule)}
@media (min-width:768px){.steps li{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.35fr);align-items:baseline}}
.steps .n{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:9px;font:650 .95rem/1 var(--sans);color:var(--ink);background:var(--surface);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(30 28 20 / .10),0 3px 0 var(--rule-strong);align-self:start}
.steps h3{font-size:1.3rem;align-self:center}
.steps p{grid-column:2;color:var(--soft)}
@media (min-width:768px){.steps p{grid-column:3}.steps h3{align-self:baseline}}

/* Preise als Typenschilder */
.prices{display:grid;gap:18px;align-items:stretch}
@media (min-width:900px){.prices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.price{position:relative;background:var(--surface);border-radius:14px;padding:30px 28px 26px;display:grid;gap:16px;grid-template-rows:auto auto 1fr auto;min-width:0;
  border:1px solid var(--rule-strong);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--rule),0 1px 2px rgb(40 35 20 / .06);
  background-image:radial-gradient(circle at 14px 14px,#A9A79E 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 14px) 14px,#A9A79E 2.4px,transparent 3px),
    radial-gradient(circle at 14px calc(100% - 14px),#A9A79E 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#A9A79E 2.4px,transparent 3px)}
.price.top-pick{border-color:var(--ink);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--rule-strong),0 26px 44px -30px rgb(40 35 20 / .5)}
.price h3{font-size:1.05rem;color:var(--soft);font-weight:600}
.price .amount{font:640 2.7rem/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.price .amount small{font:500 .95rem var(--sans);color:var(--muted);letter-spacing:0}
.amount .vat{display:block;font:500 .8rem var(--sans);color:var(--muted);letter-spacing:0;margin-top:8px}
.price ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;align-content:start}
.price li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;font-size:.95rem;color:var(--soft)}
.price li::before{content:"";width:8px;height:2px;margin-top:.72em;background:var(--ink)}
.price .btn{width:100%}
.price .caption,.price .err,.price .note{text-align:center}

/* Gegenüberstellung */
.versus{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
@media (min-width:768px){.versus{grid-template-columns:1fr 1fr}}
.versus > div{background:var(--surface);padding:28px;display:grid;gap:16px;align-content:start}
.versus h3{font-size:1.15rem}
.versus ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.versus li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--soft)}
.versus .yes li::before{content:"+";font-family:var(--mono);color:var(--good)}
.versus .no li::before{content:"−";font-family:var(--mono);color:var(--bad)}

/* Über mich mit technischen Daten */
.about{display:grid;gap:32px;align-items:start}
@media (min-width:900px){.about{grid-template-columns:auto minmax(0,1fr) minmax(0,20rem);gap:52px}}
.avatar{width:132px;height:132px;border-radius:50%;object-fit:cover;background:var(--bg-2);box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--rule-strong)}
.sec.alt .avatar{box-shadow:0 0 0 5px var(--bg-2),0 0 0 6px var(--rule-strong)}
.about .body{display:grid;gap:14px;max-width:40rem}
.about .body p{color:var(--soft)}
.specs{margin:0;display:grid;border-top:2px solid var(--ink)}
.specs div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.specs dt{font-size:.92rem;color:var(--soft)}
.specs dd{margin:0;font:600 .95rem var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.specs dd.t{font:600 .95rem var(--sans)}
.specs-wrap{display:grid;gap:12px;align-content:start}

/* FAQ */
.faq-wrap{display:grid;gap:28px;align-items:start}
@media (min-width:1024px){.faq-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:56px}}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:600;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:8px;background:var(--surface);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(30 28 20 / .10),0 2px 0 var(--rule-strong);
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:10px 2px,2px 10px;background-position:center;background-repeat:no-repeat;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 44px 22px 0;color:var(--soft)}

/* Abschluss: das dunkle Gerät */
.final{padding-block:28px 96px}
.ink{position:relative;background:linear-gradient(180deg,#0F4C5C,var(--anthracite) 40%,var(--anthracite-2));color:#F1F0EB;border-radius:30px;padding:34px 24px;display:grid;gap:32px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .09),0 40px 70px -36px rgb(10 56 67 / .65)}
@media (min-width:640px){.ink{padding:52px}}
@media (min-width:1024px){.ink{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:60px;align-items:center}}
.ink::before{content:"";position:absolute;top:28px;right:30px;width:96px;height:30px;pointer-events:none;
  background:radial-gradient(circle,rgb(255 255 255 / .2) 1.6px,transparent 2.2px) 0 0/10px 10px}
.ink h2{color:#fff}
.ink .lede{color:#C3D5D9}
.ink ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;color:#E0EBED;font-size:.98rem}
.ink li{display:flex;gap:12px}
.ink li::before{content:"";width:8px;height:8px;margin-top:8px;flex:none;border-radius:50%;background:var(--led-ok);box-shadow:0 0 8px rgb(43 182 115 / .8)}
.ink .stack{display:grid;gap:16px}
.ink .caption{color:#A7BFC5}
.ink a:not(.btn){color:#F1F0EB}

/* Warnschild im Notfall */
.urgent{display:flex;gap:14px;align-items:flex-start;max-width:46rem;margin:8px auto 64px;background:#F7E4DD;border-radius:14px;padding:18px 20px;box-shadow:inset 0 0 0 1px #E5B9AB}
.urgent::before{content:"";width:10px;height:10px;margin-top:7px;flex:none;border-radius:50%;background:var(--led-bad);box-shadow:0 0 0 3px rgb(199 55 43 / .18),0 0 8px rgb(199 55 43 / .6)}
.urgent b{color:var(--bad)}
.urgent p{color:var(--soft)}

/* ---------- Fuß ---------- */
footer.foot{border-top:1px solid var(--rule);background:var(--bg-2);padding-block:52px 36px;font-size:.9rem;color:var(--muted)}
footer.foot .container{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between}
.foot-grid{display:grid;gap:30px;width:100%}
@media (min-width:768px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-brand{display:grid;gap:10px;align-content:start;max-width:22rem}
.foot-brand p{color:var(--muted);font-size:.9rem;line-height:1.6}
footer.foot nav{display:grid;gap:8px;align-content:start}
footer.foot nav b{font:640 .7rem/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
footer.foot a{color:var(--soft);text-decoration:none}
footer.foot a:hover{color:var(--ink);text-decoration:underline}
.foot-bottom{width:100%;margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);font-size:.82rem;color:var(--muted)}
@media (max-width:820px){.top nav a.opt[aria-current]{display:inline-block}}

/* ---------- Rechtstexte: eine ruhige Lesespalte ---------- */
.legal{max-width:46rem;margin:0 auto;padding:60px 16px 96px;display:grid;gap:14px}
.legal h1{font-size:clamp(2.1rem,5vw,3rem);margin-bottom:8px}
.legal h2{font-size:1.35rem;letter-spacing:-.015em;margin-top:24px}
.legal h3{font-size:1.06rem;margin-top:8px}
.legal p,.legal li{color:var(--soft)}
.legal ul,.legal ol{margin:0;padding-left:1.3rem;display:grid;gap:6px}
.legal address{font-style:normal;color:var(--ink);line-height:1.7}
.legal .stand{font-size:.875rem;color:var(--muted);margin-top:18px}
.legal .box{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:18px 20px}

/* ---------- Einfache Seiten (Bestätigung, Danke) ---------- */
.simple{max-width:40rem;margin:0 auto;padding:80px 16px 104px;display:grid;gap:20px;justify-items:start}
.simple h1{font-size:clamp(2.1rem,5vw,3rem)}

/* ---------- Übersicht: die Gerätefamilie ---------- */
.tools{display:grid;gap:20px}
@media (min-width:700px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
a.toolcard,.tools .card{border:0;padding:24px 24px 26px;gap:10px;border-radius:24px;background:linear-gradient(180deg,var(--housing-hi),var(--housing) 45%,#DAD9D1);box-shadow:var(--case);position:relative}
a.toolcard{color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.toolcard:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .85),0 1px 2px rgb(40 35 20 / .10),0 44px 60px -32px rgb(40 35 20 / .5)}
.tools .card::before{content:"";position:absolute;top:28px;right:24px;width:50px;height:20px;pointer-events:none;
  background:radial-gradient(circle,rgb(30 28 20 / .3) 1.5px,transparent 2px) 0 0/10px 10px}
.tools .card h2.h3{font-size:1.28rem;letter-spacing:-.02em;margin-top:8px;padding-right:64px}
.tools .card p{color:var(--soft)}
.readout{display:block;margin:6px 0 4px;padding:13px 15px;border-radius:12px;background:var(--lcd);box-shadow:var(--sunk);font:500 .85rem/1.45 var(--mono);color:var(--lcd-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolcard .go{margin-top:8px;justify-self:start;display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:.95rem;padding:10px 15px 9px;border-radius:10px;background:var(--signal);color:var(--on-signal);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 3px 0 var(--signal-edge);transition:transform .09s var(--ease),box-shadow .09s var(--ease)}
a.toolcard:active .go{transform:translateY(3px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .25),0 0 0 var(--signal-edge)}

/* ---------- Bewegung: ein Selbsttest beim Einschalten, Leuchtenlauf beim Warten ---------- */
@media (prefers-reduced-motion:no-preference){
  .panel.hero-tool{animation:poweron .9s var(--ease) both}
  .panel.hero-tool .leds li::before{animation:selftest 1.6s steps(1,end) both}
  .panel.hero-tool .leds li:nth-child(2)::before{animation-delay:.12s}
  .panel.hero-tool .leds li:nth-child(3)::before{animation-delay:.24s}
  .panel.hero-tool .leds li:nth-child(4)::before{animation-delay:.36s}
  .panel.hero-tool .leds li:nth-child(5)::before{animation-delay:.48s}
  .panel.hero-tool .leds li:nth-child(6)::before{animation-delay:.6s}
  .panel.hero-tool:has(#spam-live:not([hidden])) .leds li::before{animation:scan 1.8s ease-in-out infinite}
  .panel.hero-tool:has(#spam-live:not([hidden])) .leds li:nth-child(2)::before{animation-delay:.3s}
  .panel.hero-tool:has(#spam-live:not([hidden])) .leds li:nth-child(3)::before{animation-delay:.6s}
  .panel.hero-tool:has(#spam-live:not([hidden])) .leds li:nth-child(4)::before{animation-delay:.9s}
  .panel.hero-tool:has(#spam-live:not([hidden])) .leds li:nth-child(5)::before{animation-delay:1.2s}
  .panel.hero-tool:has(#spam-live:not([hidden])) .leds li:nth-child(6)::before{animation-delay:1.5s}
  .pulse{animation:blink 1.2s ease-in-out infinite}
  .hero-copy > *{animation:rise .8s var(--ease) both}
  .hero-copy > :nth-child(2){animation-delay:.04s}.hero-copy > :nth-child(3){animation-delay:.08s}
  .hero-copy > :nth-child(4){animation-delay:.12s}.hero-copy > :nth-child(5){animation-delay:.16s}.hero-copy > :nth-child(6){animation-delay:.2s}
  @keyframes rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes poweron{from{opacity:.001;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes selftest{0%{background:var(--led-off)}25%{background:var(--led-ok);box-shadow:0 0 8px rgb(43 182 115 / .7)}55%,100%{background:var(--led-off)}}
  @keyframes scan{0%,100%{background:var(--led-off);box-shadow:inset 0 1px 1px rgb(0 0 0 / .22)}20%{background:var(--led-warn);box-shadow:0 0 8px rgb(215 162 30 / .8)}}
  @keyframes blink{50%{opacity:.35}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:active:not([disabled]){transform:none}}

/* ---------- Schmale Bildschirme ---------- */
.logo,.top nav a{white-space:nowrap}
@media (max-width:520px){
  .logo span{display:none}
  .top nav a{padding:8px 9px;font-size:.86rem}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .grid4 .card h3{font-size:1.02rem}
  .grid4 .card p{font-size:.9rem}
  .panel.hero-tool h2{padding-right:72px}
  .panel.hero-tool::before{width:52px}
}
@media (min-width:1024px){.mobile-only{display:none}}
#check{scroll-margin-top:96px}

/* ---------- Anzeigefenster im Ruhezustand und Leuchten mit Ergebnis ---------- */
.lcd{margin:0;padding:12px 15px;border-radius:12px;background:var(--lcd);box-shadow:var(--sunk);font:500 .88rem/1.45 var(--mono);color:var(--lcd-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.lcd::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--led-ok);box-shadow:0 0 6px rgb(43 182 115 / .7);vertical-align:1px}
.leds li.good::before{background:var(--led-ok);box-shadow:0 0 0 3px rgb(43 182 115 / .16),0 0 8px rgb(43 182 115 / .6);animation:none!important}
.leds li.warn::before{background:var(--led-warn);box-shadow:0 0 0 3px rgb(215 162 30 / .18),0 0 8px rgb(215 162 30 / .6);animation:none!important}
.leds li.bad::before{background:var(--led-bad);box-shadow:0 0 0 3px rgb(199 55 43 / .16),0 0 8px rgb(199 55 43 / .6);animation:none!important}
.leds li.good,.leds li.warn,.leds li.bad{color:var(--ink)}

/* Handy: Frage, ein Satz, dann sofort das Gerät */
@media (max-width:1023px){
  .hero-grid{gap:20px}
  .hero-grid > .hero-copy{display:contents}
  .hero-grid > .hero-copy h1{order:1}.hero-grid > .hero-copy .lede{order:4}
  .hero-grid > .panel.hero-tool{order:3;margin-top:10px}
  .hero-grid > .hero-copy .actions{order:4;margin-top:16px}.hero-grid > .hero-copy .trust{order:5}.hero-grid > .hero-copy .byline{order:6}
}

/* Übersicht: ein Geräteregal mit unterschiedlich großen Geräten */
@media (min-width:1100px){
  .tools{grid-template-columns:repeat(12,minmax(0,1fr))}
  .tools > *{grid-column:span 4}
  .tools > a.toolcard:nth-child(1){grid-column:span 7}
  .tools > a.toolcard:nth-child(2){grid-column:span 5}
  .tools > :last-child:not(.toolcard){grid-column:1/-1}
}
.tools > a.toolcard:nth-child(-n+2) h2.h3{font-size:1.55rem}
.readout::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--led-ok);box-shadow:0 0 6px rgb(43 182 115 / .7);vertical-align:1px}
/* Die Karte „Sprich direkt mit mir“ ist kein Gerät, sondern ein Typenschild in der Breite */
.tools > .card:not(.toolcard){background:var(--surface);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--rule);border:1px solid var(--rule-strong);border-radius:14px;display:grid;gap:8px 32px;align-items:center}
.tools > .card:not(.toolcard)::before{display:none}
@media (min-width:900px){.tools > .card:not(.toolcard){grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;padding:26px 30px}}
.tools > .card:not(.toolcard) p:last-child{margin:0}

/* Sudowl: auf den dunklen Petrol-Flächen (.ink) wäre die Petrol-Taste unsichtbar, dort hell mit Petrol-Schrift */
.btn-light{background:#F1F0EB;color:var(--signal-deep);box-shadow:inset 0 1px 0 #fff,0 3px 0 #9DB5BB,0 10px 18px -10px rgb(0 0 0 / .5)}
.btn-light:hover{background:#fff}
.btn-light:active:not([disabled]){box-shadow:inset 0 2px 4px rgb(0 0 0 / .12),0 0 0 #9DB5BB}