:root{
  --green:#33FF11;   /* Überschriften-Hintergrund */
  --text:#39FF14;    /* grüne Schrift auf Schwarz */
  --light:#0277BD;   /* Telefon/E-Mail-Links etwas dunkler */
  --pad:clamp(20px,6.5vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#000;color:var(--text);
  font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(16px,4.4vw,20px);line-height:1.65;
}
a{color:inherit;text-decoration:none}
a.val,
.contact a,
a[href^="tel"],
a[href^="mailto"]{
  color:#0277BD !important;
  -webkit-text-fill-color:#0277BD;
  text-decoration:underline;
  text-underline-offset:2px;
}
.val{color:#0277BD !important;-webkit-text-fill-color:#0277BD}

/* Intro: grün → schwarz → grün (gleiche Breite) → schwarz → Text */
.intro-outer{
  background:var(--green);
  padding:clamp(3.6px,1.08vw,6.3px); /* -10% */
}
.intro-mid{
  background:#000; /* dicker schwarzer Balken statt grünem Zwischenraum */
  border:4px solid #000;
  padding:clamp(3.6px,1.08vw,6.3px);
}
.intro{
  background:var(--green);color:#000;
  border:4px solid #000;
  padding:clamp(8.1px,2.376vw,16.2px) var(--pad); /* -10% */
}
.intro h1{
  margin:0 auto;max-width:900px;
  font-weight:900;font-size:clamp(26px,7.4vw,46px);line-height:1.2;letter-spacing:-.005em;
}
.intro h1 span{display:inline}
.intro h1 u{text-decoration:underline;text-underline-offset:0.12em;text-decoration-thickness:0.07em}
.intro h1 strong{font-weight:900}

/* schwarzer Balken vor Video-Anleitung */
.bar{height:22px;background:#000;width:100%} /* doppelt: Abstand Intro → Video-Anleitung */

/* Abschnitts-Überschriften: grün → schwarz → grün (Text) */
.heading-outer{
  background:var(--green);
  padding:clamp(3.6px,1.08vw,6.3px);
}
.heading{
  margin:0;background:var(--green);color:#000;
  border:4px solid #000;
  font-weight:900;font-size:clamp(20px,5.6vw,30px);line-height:1.4;
  padding:clamp(5.4px,1.26vw,6.3px) var(--pad); /* -10% */
}
.heading{text-align:left}
section .heading{padding-left:var(--pad)}

.content{padding:clamp(20px,6vw,36px) var(--pad);max-width:900px;margin:0 auto}
.content p{margin:0 0 .8em}
.content p:last-child{margin-bottom:0}
.center{text-align:center}
.bold{font-weight:700}

/* Video */
.video-gif{width:266px;max-width:100%;height:auto;display:block;margin:0 auto}
.video-desktop{display:none;width:100%;max-width:100%;height:auto;margin:0 auto}

/* So geht's */
.steps{margin:0;padding:0;list-style:none;counter-reset:s;line-height:1.35}
.steps li{counter-increment:s;display:flex;margin:0 0 .6em}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:counter(s) ".";flex:0 0 1.6em;font-weight:700}

/* B2B */
.lead{margin:0 0 1.2em}
.checks{list-style:none;margin:0 0 1.6em;padding:0}
.checks li{margin:0 0 .7em}
.small{font-size:.9em}

/* Bilder */
img.wide{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
img.qr{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;background:#fff;padding:14px}

/* Impressum */
.impressum{font-size:.85em;font-weight:700;line-height:1.6}
.impressum .big{font-size:1.25em}

@media (min-width:900px){
  .heading{text-align:left}
  .video-gif{width:320px}
}

/* Mobiler Alkoholtester */
.mobil-img{display:block;max-width:min(294px,62%);width:100%;height:auto;margin:0 auto 1.2em}
.mobil-bullets{
  list-style:disc;margin:0 auto;padding:0 0 0 1.25em;max-width:520px;
  text-align:left;color:var(--text);font-size:clamp(16px,4.4vw,20px);line-height:1.7;
}
.mobil-bullets li{margin:0.15em 0}

/* v51 desktop 3-column layout mit gefüllten Seitenleisten (Handy: ausgeblendet, unverändert) */
html{scroll-behavior:smooth}
.side-left,.side-nav,.side-rail{display:none}
@media (min-width:1024px){
/* Seiten weiter nach außen, Mitte begrenzt; Handy unverändert */
body{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,920px) minmax(240px,280px);justify-content:space-between;width:100%;max-width:1680px;margin:0 auto;column-gap:48px;align-items:start;background:#000;padding:0 28px;box-sizing:border-box}
.page-main{min-width:0;padding-top:10px}
.side-left{display:block;position:sticky;top:16px;margin-top:16px;margin-left:0;max-height:calc(100vh - 32px);overflow:auto;padding:8px 6px 16px 2px;scrollbar-width:thin;scrollbar-color:#1f3d1f #000;box-sizing:border-box}
.side-nav{display:block;background:#0d0d0d;border:5px solid var(--green);box-shadow:none;outline:none;border-radius:12px;padding:12px 12px 14px}
.nav-title{margin:0 0 10px;background:var(--green);color:#000;font-weight:900;font-size:22px;line-height:1.2;padding:8px 12px;border:none;box-shadow:none;border-radius:6px}
.side-nav a{display:block;color:var(--text);text-decoration:none;font-size:21px;font-weight:700;line-height:1.3;padding:11px 12px;border-radius:4px;border-left:4px solid transparent}
.side-nav a+a{margin-top:3px}
.side-nav a:hover,.side-nav a:focus-visible{background:var(--green);color:#000;border-left-color:#000}
/* Spruch-Box: grüner Außenrahmen ohne Abschneiden (kein outline) */
.spruch-box{margin:34px 2px 8px;padding:0;background:transparent;border:none;box-sizing:border-box}
.spruch-box-inner{background:#0d0d0d;color:var(--text);border:3px dashed var(--green);border-radius:6px;padding:18px 16px;min-height:7.6em;display:flex;align-items:center} /* −20% Höhe */
.spruch{margin:0;font-weight:900;font-size:24px;line-height:1.25;width:100%;color:var(--text);transition:opacity .35s}
.spruch.fade{opacity:0}
.arrow-card{display:block;width:72%;margin:16px auto 6px;border:4px solid #000;box-shadow:0 0 0 4px var(--green)}
.arrow-card img{display:block;width:100%;height:auto}
.side-rail{display:block;margin-top:16px;padding-top:8px;color:var(--text);font-size:15px;line-height:1.35;justify-self:end;width:100%}
/* Keine Extra-Rahmen um Bilder (viele Grafiken haben schon einen) */
.rail-card{margin:0 0 22px;background:transparent;border:none;outline:none;color:var(--text)}
.rail-card img{display:block;width:100%;height:auto}
.rail-card figcaption{font-weight:900;font-size:15px;line-height:1.3;padding:8px 4px 0;border:none;text-align:center;color:var(--text)}
.rail-card img.icon-sm{width:62%;margin:0 auto 6px}
.rail-card.dark{background:transparent}
.rail-card.dark img{padding:0}
.rail-card.dark figcaption{background:transparent}
/* Pfeil-Grafik auf Höhe des Videos, Abstand zur Mitte */
.rail-top{margin-top:0;margin-bottom:0} /* gleiche Höhe wie Inhaltsverzeichnis oben */
.rail-quote.rail-top{margin-bottom:22px}
.rail-quote-blasen{margin-top:0;display:block;text-decoration:none;color:var(--text)} /* per JS ggf. tiefer: obere Linie = Unterkante Video-Anleitung */
.rail-quote{margin:0 0 22px;padding:14px 12px;border:3px dashed var(--green);border-radius:6px;font-weight:900;font-size:18px;line-height:1.3;text-align:center;color:var(--text);box-sizing:border-box}
.rail-quote-top{container-type:inline-size;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:24px;line-height:1.25;padding:12px 8px;border-width:3px;letter-spacing:0;text-transform:none}
.rail-quote-top .pl{display:block;font-size:min(34px,11.5cqw);white-space:nowrap}
.rail-quote-top br{display:none}
.rail-quote-top .please-u{display:block;font-size:min(34px,11.5cqw);text-decoration:underline;text-underline-offset:0.12em;text-decoration-thickness:0.08em}
.rail-arrow{display:block;margin-top:.15em;font-size:2.4em;line-height:1;font-weight:900;color:var(--green)}
.rail-quote-blasen{font-size:calc(34px * var(--rs,1));line-height:1.1;padding:.3em 10px .25em;border-width:3px}
.rail-quote-blasen .rail-q{display:block;font-size:.6em}
.rail-quote-blasen strong{display:block;margin-top:.4em;font-size:1.05em;letter-spacing:.04em}
.rail-sub{display:block;margin-top:.15em;font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1.2;opacity:.8}
.rail-smilies{display:block;margin-top:.06em;font-size:2.1em;letter-spacing:.04em;line-height:1;color:var(--green);white-space:nowrap}
.rail-quote-blasen .rail-arrow{margin-top:-.2em;font-size:4.4em;line-height:.6}
.rail-betrunken{position:relative;container-type:inline-size;aspect-ratio:480/400;padding:0;text-align:left;line-height:1.1}
.rail-betrunken p{margin:0}
.rail-betrunken .bt-title{position:absolute;left:7%;top:5%;font-size:11.5cqw;font-weight:900;white-space:nowrap}
.rail-betrunken .bt-title u{text-decoration-thickness:.07em;text-underline-offset:.1em}
.rail-betrunken .bt-row{position:absolute;left:10%;display:flex;align-items:center;gap:6cqw;font-size:10.5cqw;font-weight:900;white-space:nowrap}
.rail-betrunken .bt-row-ja{top:25%}
.rail-betrunken .bt-row-nein{top:44%}
.rail-betrunken .bt-box{display:inline-block;width:10cqw;height:8cqw;border:3px dashed var(--green);border-radius:2px;flex:0 0 auto;box-sizing:border-box}
.rail-betrunken .bt-x{position:absolute;left:23%;top:58%;width:19%;height:auto;transform:rotate(-9deg) skewX(-8deg);overflow:visible;pointer-events:none}
.rail-betrunken .bt-figur{position:absolute;left:59%;top:26%;width:32%;height:auto;display:block}
.rail-betrunken .bt-foot{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:8.6cqw;font-weight:900;white-space:nowrap}
.rail-betrunken .bt-foot u{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
.rail-prod{display:block;margin:28px 0 0;background:#0d0d0d;border:3px solid var(--green);border-radius:6px;overflow:hidden;text-decoration:none;color:#000}
.rail-prod-title{margin:0;background:var(--green);color:#000;font-weight:900;font-size:22px;line-height:1.2;padding:10px 14px;border-bottom:3px solid #000}
.rail-prod img{display:block;width:100%;height:auto;padding:10px;box-sizing:border-box}
.rail-prod img.rail-prod-mobil{width:72%;margin:0 auto}
.rail-skala{margin:28px 0 28px;background:#0d0d0d;border:3px solid var(--green);border-radius:6px;padding:0 0 16px;overflow:hidden}
.skala-title{margin:0;background:var(--green);color:#000;font-weight:900;font-size:26px;padding:12px 14px;border-bottom:3px solid #000}
.rail-skala ul{list-style:none;margin:10px 0 0;padding:0 14px}
.rail-skala li{padding:12px 0;border-bottom:1px solid #1f3d1f;font-size:18px;line-height:1.35}
.rail-skala li b{display:block;font-size:22px;color:#9dff8a;margin-bottom:2px}
.skala-note{margin:12px 14px 0;font-size:15px;color:#8fbf8f;line-height:1.35}
.rail-credit{margin:0 0 16px;font-size:11px;color:#5a8a5a;text-align:right}
/* v63: Farbvarianten + Mobil ohne Rahmen, nur grüne Schrift (Rückbau: REVERT_rail_farb_mobil_frames.txt) */
.rail-prod.rail-prod-plain{margin:26px 0 0;background:transparent;border:none;border-radius:0;overflow:visible}
.rail-prod.rail-prod-plain .rail-prod-title{background:transparent;color:var(--text);border-bottom:none;padding:0 2px 8px;text-align:center;font-size:24px}
.rail-prod.rail-prod-plain img{padding:0}
.rail-quote.rail-please{margin-top:28px}
.rail-quote.rail-betrunken.rail-top{margin-bottom:6px}
/* Desktop-Medien; Handy unverändert */
.video-mobile{display:none}
.video-desktop{display:block;width:80%;max-width:80%;height:auto;margin-left:auto;margin-right:auto} /* −20% */
.video-gif{width:100%;max-width:100%}
img.wide{max-width:100%}
.mobil-img{max-width:min(520px,78%)}
img.qr{max-width:420px}
}
@media (min-width:1400px){
body{grid-template-columns:minmax(280px,320px) minmax(0,920px) minmax(260px,300px);column-gap:64px;padding:0 40px;max-width:1800px}
.side-nav a{font-size:22px}
.nav-title{font-size:24px}

.rail-quote-blasen{font-size:calc(36px * var(--rs,1))}
}
@media (min-width:1024px) and (max-height:949px){
.arrow-card{display:none}
}

/* Achtung-Hinweis vor So-geht's-Schritten */
.achtung{font-weight:900;font-size:1.05em;line-height:1.45;margin:0 0 1em;color:var(--text)}
.achtung strong{font-weight:900}
.achtung u{text-decoration:underline;text-underline-offset:0.12em;text-decoration-thickness:0.07em}

/* Farbvarianten-Raster mit Farbnamen */
.varianten-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1em 0.8em;
  max-width:900px;margin:0 auto;align-items:start;
}
.variante{margin:0;text-align:center}
.variante img{width:100%;height:auto;aspect-ratio:464/530;object-fit:contain;display:block;margin:0 auto}
.variante figcaption{
  margin-top:0.45em;font-weight:900;font-size:clamp(15px,4vw,18px);
  color:var(--text);text-transform:lowercase;letter-spacing:0.01em;
}
@media (min-width:700px){
  .varianten-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3em 1em}
}
.varianten-note{margin:2.4em 0 0;text-align:center;font-weight:700;font-size:clamp(15px,4vw,18px);color:var(--text);line-height:1.4}
@media (min-width:1024px){
.varianten-note{margin:5.1em 0 0;text-align:left;padding-left:0} /* eine Zeile Luft unter den Bildern */
}

/* v64: Farbvarianten + Mobil wieder MIT Rahmen, aber dezent (Rückbau: REVERT_rail_farb_mobil_frames.txt) */
/* v76: Farbvarianten + Mobil Rahmen wie Promille-Skala (3px solid green), nicht so dick wie TOC (5px) */
.rail-prod.rail-prod-subtle{margin:0 0 22px;background:#0d0d0d;border:3px solid var(--green);border-radius:6px;overflow:hidden;box-shadow:0 0 10px rgba(51,255,17,.35)}
.rail-prod.rail-prod-subtle.rail-prod-first{margin-top:0}
.rail-prod.rail-prod-subtle .rail-prod-title{background:var(--green);color:#000;border-bottom:3px solid #000;padding:10px 14px;text-align:center;font-size:20px;font-weight:900;letter-spacing:.01em}
.rail-prod.rail-prod-subtle img{padding:10px}
.rail-prod.rail-prod-subtle img.rail-prod-mobil{width:60%;margin:0 auto}
.rail-prod.rail-prod-subtle:hover,.rail-prod.rail-prod-subtle:focus-visible{box-shadow:0 0 14px rgba(51,255,17,.55)}
/* v64: Sprüche-Fenster weitere ~15% flacher (vorher padding 18px/16px, min-height 7.6em @24px) */
.spruch-box-inner{padding:14px 16px;min-height:0;height:190px;box-sizing:border-box} /* vorher ~224px gesamt -> 190px (-15%), längster Spruch 3 Zeilen passt */
/* v65: Inhaltsverzeichnis-Titel größer + fett; Please unter Hier-blasen; Sprüche-Fenster nochmal −20% (190px -> 152px) */
.nav-title{font-size:27px;font-weight:900;letter-spacing:.01em;padding:9px 12px}
.rail-quote.rail-please{margin-top:22px;margin-bottom:22px}
.spruch-box-inner{padding:10px 14px;height:152px}
.spruch{font-size:21px;line-height:1.2}
@media (min-width:1400px){.nav-title{font-size:30px}}
/* v66: Sprüche-Fenster nochmal −20% (152px -> 122px), Schrift 21->20px, längster Spruch 3 Zeilen = 71px von 100px; Please unter Promille-Skala. Rückbau: /tmp/styles.v65.css + /tmp/index.v65.html */
.spruch-box-inner{padding:8px 12px;height:122px}
.spruch{font-size:20px;line-height:1.18}
.rail-skala + .rail-quote.rail-please{margin-top:0;margin-bottom:28px}
/* Wichtiger Hinweis als Absatz in #messergebnis */
.hinweis-note{font-weight:400;margin-top:1.2em}
.hinweis-title{font-weight:700;margin-bottom:.35em !important}
.hinweis-title u{text-decoration-thickness:1px;text-underline-offset:3px}

/* v68: mobiles Inhaltsverzeichnis (nur <1024px). Rückbau: /tmp/styles.v67.css + /tmp/index.v67.html */
.m-toc-btn{position:fixed;top:0;left:0;z-index:1001;width:42px;height:42px;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5.5px;background:#000;border:2px solid var(--green);border-radius:7.7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-toc-btn span{display:block;width:21.5px;height:2.4px;border-radius:2px;background:var(--green);transition:transform .2s,opacity .2s}
.m-toc-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.9px) rotate(45deg)}
.m-toc-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.m-toc-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.9px) rotate(-45deg)}
.m-toc-backdrop{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.6)}
.m-toc{position:fixed;top:46px;left:0;z-index:1000;width:min(320px,calc(100vw - 20px));max-height:calc(100dvh - 80px);overflow:auto;background:#0d0d0d;border:4px solid var(--green);border-radius:12px;padding:10px 10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.7)}
.m-toc-title{margin:0 0 8px;background:var(--green);color:#000;font-weight:900;font-size:20px;line-height:1.2;padding:8px 12px;border-radius:6px}
.m-toc a{display:block;color:var(--text);font-size:18px;font-weight:700;line-height:1.3;padding:11px 12px;border-radius:4px;border-left:4px solid transparent}
.m-toc a+a{margin-top:2px}
.m-toc a:hover,.m-toc a:active,.m-toc a:focus-visible{background:var(--green);color:#000;border-left-color:#000}
.m-toc[hidden],.m-toc-backdrop[hidden]{display:none}
html{scroll-behavior:smooth}
section[id],#top{scroll-margin-top:42px}
#top{scroll-margin-top:0}
@media (min-width:1024px){.m-toc-btn,.m-toc,.m-toc-backdrop{display:none !important}section[id],#top{scroll-margin-top:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.side-nav a,.m-toc a{display:flex;align-items:center;gap:10px}
.toc-ico{flex-shrink:0;width:1.15em;height:1.15em}

.toc-ico-char{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;font-size:1.05em;font-weight:900;line-height:1;flex-shrink:0}
.m-toc .toc-ico,.m-toc .toc-ico-char{width:1.2em;height:1.2em;min-width:1.2em}
.m-toc a{display:flex !important;align-items:center;gap:10px}

/* heading icons: inline vor erstem Wort, kein Flex (mehrzeilig bleibt flach) */
.heading .toc-ico{
  display:inline-block;width:1.05em;height:1.05em;
  vertical-align:-0.12em;margin-right:0.35em;color:#000
}
.heading .toc-ico-char{
  display:inline-block;width:1.05em;height:1.05em;
  vertical-align:-0.08em;margin-right:0.35em;
  font-size:1em;font-weight:900;line-height:1;text-align:center;color:#000
}

/* so-gehts: mobil mehr Abstand ‰ → Promilletest */
@media (max-width:1023px){
  #so-gehts .heading .toc-ico-char{margin-right:calc(0.35em + 0.7ch)}
}