/* =====================================================================
   Kassen Maier Electronics-KME GmbH  ·  Entwurf Tropea Web Solutions
   Gemeinsames Stylesheet aller Seiten (Startseite, Unterseiten, Recht)
   Design-System: Anthrazit + Tiefschwarz, Logo-Gelb, Logo-Rot
   Display Archivo · Text Inter · Signature: DER BON
   ===================================================================== */

/* ===== Fonts (selbst gehostet, SIL OFL, DSGVO-sauber) ===== */
@font-face{font-family:'Archivo';src:url('fonts/archivo-var.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#171613;      /* Anthrazit, warm (Logo-Hintergrund) */
  --paper-2:#1F1E1A;    /* Flaeche, eine Stufe heller */
  --bon:#22211C;        /* Bonstreifen, dunkel */
  --card:#26251F;
  --ink:#F0EDE3;
  --ink-2:#C0BBAE;
  --ink-3:#928E83;
  --navy:#11100D;       /* Kontrastflaeche: Tiefschwarz */
  --navy-2:#0B0A08;
  --navy-lite:#A5A093;
  --sig:#F2D51C;        /* Signal-Gelb aus dem Logo */
  --sig-deep:#F2D51C;   /* Gelb: auf dunklem Grund AA-fest */
  --rot:#C9271C;        /* Logo-Rot fuer den Pinselstrich-Akzent */
  --line:rgba(240,237,227,.17);
  --line-2:rgba(240,237,227,.09);
  --line-d:rgba(255,255,255,.16);
  --display:'Archivo',"Helvetica Neue",Arial,sans-serif;
  --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --maxw:1120px;
  --tape:250px;
  --hdr:74px;
  --draft-h:0px;
  --ease:cubic-bezier(.22,.61,.16,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--draft-h) + var(--hdr) + 26px)}
body{font-family:var(--text);font-size:16.5px;color:var(--ink);background:var(--paper);
  line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a,button,input,select,textarea,.btn,.burger{-webkit-tap-highlight-color:transparent}
::selection{background:var(--sig);color:#171613}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.028em}
h2,h3{text-wrap:balance}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:880px}
section{position:relative}

/* Blocksatz nur im breiten Fliesstext (Dennis-Regel); enge Spalten linksbuendig */
p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.flush p,.flush{text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* Skip-Link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:12px 18px;font-size:14px;font-weight:600}
.skip:focus{left:12px;top:calc(var(--draft-h) + 8px)}

/* ===== Entwurfs-Hinweis ===== */
.draft{position:fixed;inset:0 0 auto 0;height:var(--draft-h);z-index:120;background:var(--navy-2);
  color:#D5DBEC;display:flex;align-items:center;justify-content:center;font-size:11.5px;
  letter-spacing:.015em;padding:0 14px;text-align:center}
.draft b{color:#fff;font-weight:600}
.draft span{opacity:.9}

/* ===== Header ===== */
.site{position:fixed;top:var(--draft-h);left:0;right:0;z-index:110;background:rgba(23,22,19,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.site.scrolled{border-bottom-color:var(--line);background:rgba(23,22,19,.97)}
.bar{display:flex;align-items:center;gap:20px;height:var(--hdr);max-width:var(--maxw);
  margin:0 auto;padding:0 26px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
/* Original-Logo als Inline-SVG */
.brand .logo{height:52px;width:auto;display:block}
.foot .brand .logo{height:62px}
/* Marke: Bon-Kachel mit Zackenkante */
.mark{width:44px;height:46px;background:var(--sig);color:#171613;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.06em;padding-bottom:6px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='46' viewBox='0 0 44 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0h44v40l-5.5 5-5.5-5-5.5 5-5.5-5-5.5 5-5.5-5-5.5 5L0 40z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='46' viewBox='0 0 44 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0h44v40l-5.5 5-5.5-5-5.5 5-5.5-5-5.5 5-5.5-5-5.5 5L0 40z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.brand-txt{display:flex;flex-direction:column;line-height:1.16}
.brand-txt b{font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.brand-txt small{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.hdr-phone{display:none;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap}
.hdr-phone svg{width:15px;height:15px;color:var(--sig-deep)}
.hdr-phone .num{letter-spacing:.01em}
.hdr-phone:hover{color:var(--sig-deep)}

/* ===== Hauptnavigation im Kopf (ab 1001px) ===== */
.nav-main{display:none;align-items:center;gap:22px;margin-left:26px}
.nav-main a{position:relative;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  padding:6px 0;transition:color .2s var(--ease)}
.nav-main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease-out)}
.nav-main a:hover{color:var(--sig)}
.nav-main a:hover::after{transform:scaleX(1)}
.nav-main a[aria-current="page"]{color:var(--sig)}
.nav-main a[aria-current="page"]::after{transform:scaleX(1);background:var(--sig-deep)}

/* ===== Buttons: rechteckig, gestanzt ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-family:var(--text);
  font-weight:600;font-size:14.5px;letter-spacing:.005em;border-radius:2px;padding:13px 20px;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .14s var(--ease-out),background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn:active{transform:scale(.975)}
/* Sicherheitsnetz: ein SVG ohne Groessenangabe wuerde im Knopf auf 300x150 aufgehen */
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn .ic{width:16px;height:16px;flex-shrink:0;transition:transform .22s var(--ease-out)}
.btn-sig{background:var(--sig);color:#171310}
.btn-navy{background:#2C2A24;color:var(--ink);border-color:var(--line)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line-d{background:transparent;color:#fff;border-color:var(--line-d)}

/* ===== Burger + Mobil-Menue ===== */
.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);
  border-radius:2px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}
.burger span{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);
  transition:transform .32s var(--ease-out),opacity .18s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:105;background:var(--navy);color:#fff;
  padding:calc(var(--draft-h) + var(--hdr) + 34px) 26px 40px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;overflow-y:auto;
  transition:opacity .26s var(--ease),visibility .26s var(--ease)}
body.menu-open .mmenu{opacity:1;visibility:visible}
.mmenu a.ml{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;color:#fff;
  padding:15px 0;border-bottom:1px solid var(--line-d);display:flex;align-items:baseline;gap:16px;
  transform:translateY(10px);opacity:0;transition:transform .4s var(--ease-out),opacity .4s var(--ease-out)}
.mmenu a.ml .pos{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--navy-lite);
  font-family:var(--text);flex-shrink:0}
.mmenu a.ml[aria-current="page"]{color:var(--sig)}
body.menu-open .mmenu a.ml{transform:none;opacity:1}
body.menu-open .mmenu a.ml:nth-of-type(1){transition-delay:.04s}
body.menu-open .mmenu a.ml:nth-of-type(2){transition-delay:.08s}
body.menu-open .mmenu a.ml:nth-of-type(3){transition-delay:.12s}
body.menu-open .mmenu a.ml:nth-of-type(4){transition-delay:.16s}
body.menu-open .mmenu a.ml:nth-of-type(5){transition-delay:.2s}
body.menu-open .mmenu a.ml:nth-of-type(6){transition-delay:.24s}
body.menu-open .mmenu a.ml:nth-of-type(7){transition-delay:.28s}
.mmenu-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:11px}
.mmenu-foot .btn{width:100%;padding:15px}

/* ===== Reveal (zurueckhaltend) ===== */
.rev{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.05s}.rev.d2{transition-delay:.1s}.rev.d3{transition-delay:.15s}

/* ===== Sektions-Regel mit Randmarke (ersetzt Kicker) ===== */
.secline{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.secline::before{content:"";flex:1 1 auto;min-width:16px;height:1px;background:var(--line)}
.secline span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.secline.on-dark::before{background:var(--line-d)}
.secline.on-dark span{color:var(--navy-lite)}

/* ===== Shell: Inhalt + Bonstreifen ===== */
.shell{display:block}
.tapecol{display:none}

/* ===== HERO (Startseite) ===== */
.hero{padding:calc(var(--draft-h) + var(--hdr) + 52px) 0 62px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(242,213,28,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(242,213,28,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask:linear-gradient(to bottom,#000,transparent 78%);mask:linear-gradient(to bottom,#000,transparent 78%)}
.hero>.wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;margin-top:30px}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem);letter-spacing:-.038em;line-height:1.0}
.hero h1 .yr{color:var(--sig);position:relative;white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums}
.hero h1 .yr::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.09em;background:var(--rot);transform:skewY(-.6deg)}
/* Leads bleiben linksbuendig: bei grosser Schrift reisst Blocksatz Loecher */
.hero-lead{font-size:1.13rem;color:var(--ink-2);margin-top:26px;max-width:36em;
  text-align:left;hyphens:manual;-webkit-hyphens:manual}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.hero-cta .btn{padding:15px 24px;font-size:15px}
.hero-fig{position:relative}
.plate{background:var(--bon);border:1px solid var(--line);padding:8px}
.plate img{width:100%;border:1px solid var(--line-2)}
.plate figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:11px 3px 3px;display:flex;justify-content:space-between;gap:14px}
/* Datenstreifen unter dem Hero */
.datastrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  margin-top:46px;background:var(--bon)}
.dsi{padding:18px 20px;border-left:1px solid var(--line-2)}
.dsi:first-child{border-left:0}
.dsi b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;
  color:var(--sig);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.dsi small{display:block;margin-top:8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;line-height:1.4}

/* ===== Seitenkopf der Unterseiten ===== */
.phead{padding:calc(var(--draft-h) + var(--hdr) + 46px) 0 0;position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(242,213,28,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(242,213,28,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask:linear-gradient(to bottom,#000,transparent 82%);mask:linear-gradient(to bottom,#000,transparent 82%)}
.phead>.wrap{position:relative}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:24px}
.crumb a{transition:color .2s var(--ease)}
.crumb a:hover{color:var(--sig)}
.crumb .sep{opacity:.45}
.crumb .cur{color:var(--ink)}
.phead h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.036em;max-width:16em}
.phead-lead{font-size:1.1rem;color:var(--ink-2);margin-top:24px;max-width:40em;
  text-align:left;hyphens:manual;-webkit-hyphens:manual}
.phead-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.phead-fig{margin-top:48px}
.phead-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-2)}

/* ===== Marken-Band (statisch, rasterstreng) ===== */
.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.brands-in{display:grid;grid-template-columns:repeat(8,1fr);max-width:var(--maxw);margin:0 auto}
.brands-in span{padding:15px 8px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);border-left:1px solid var(--line-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.brands-in span:first-child{border-left:0}

/* ===== Sektions-Rhythmus ===== */
.sec{padding:88px 0}
.sec.tight{padding:66px 0}
.sec-lead{color:var(--ink-2);font-size:1.06rem;margin-top:18px;max-width:38em;
  text-align:left;hyphens:manual;-webkit-hyphens:manual}
.sec h2{font-size:clamp(1.85rem,3.5vw,2.65rem)}
.sec-alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ===== Betrieb ===== */
/* Foto und Eckdaten-Bon stehen uebereinander links, der Text laeuft rechts durch */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:0 52px;align-items:start}
.split-fig{grid-column:1;grid-row:1}
.split-txt{grid-column:2;grid-row:1/span 2}
.split .bon{grid-column:1;grid-row:2}
.split-txt p{color:var(--ink-2);margin-top:18px}
/* Variante ohne Bon darunter: zwei einfache Spalten */
.split.plain{grid-template-columns:1fr 1fr;gap:52px}
.split.plain>*{grid-column:auto;grid-row:auto}

/* ===== DER BON (Signature) ===== */
.bon{position:relative;background:var(--bon);border:1px solid var(--line);border-bottom:0;
  padding:22px 22px 26px;margin-top:34px;
  box-shadow:0 18px 34px -28px rgba(21,25,34,.55)}
.bon::after{content:"";position:absolute;left:-1px;right:-1px;top:100%;height:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M0 0h18L9 9Z' fill='%2322211C' stroke='%23413F37' stroke-width='.9'/%3E%3C/svg%3E");
  background-size:18px 9px;background-repeat:repeat-x}
.bon-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.bon-head b{font-family:var(--display);font-size:13px;letter-spacing:.1em;color:var(--ink)}
.bon-rule{height:0;border-top:1px dashed var(--line);margin:14px 0}
.bon-row{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:13.5px;line-height:1.45}
.bon-row+.bon-row{border-top:1px dotted rgba(240,237,227,.2)}
.bon-row dt{color:var(--ink-2);flex:1;min-width:0}
.bon-row dd{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--sig);
  letter-spacing:-.02em;flex-shrink:0;font-variant-numeric:tabular-nums lining-nums}
.bon-foot{margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
  display:flex;justify-content:space-between;gap:12px}

/* ===== Zitat-Streifen (Vertrauensblock, Nachtblau) ===== */
.strip{position:relative;overflow:hidden;background:var(--navy-2);display:grid;place-items:center;min-height:290px}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;filter:grayscale(.5)}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,8,.55),rgba(11,10,8,.9))}
.strip-in{position:relative;z-index:1;padding:72px 26px;max-width:920px;text-align:center}
.strip-in blockquote{font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,3.1vw,2.2rem);
  color:#fff;line-height:1.2;letter-spacing:-.028em}
.strip-in cite{display:block;margin-top:20px;font-style:normal;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy-lite);font-weight:600}

/* ===== STIMMEN: Google-Rezensionen als laufende Beleg-Zeile =====
   Zwei identische Haelften im Track -> translateX(-50%) laeuft nahtlos.
   Nur transform wird animiert; Hover/Fokus pausiert (WCAG 2.2.2),
   reduced-motion: steht still und scrollt nativ (Regel im r-m-Block unten). */
.stimmen{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:88px 0 96px;overflow:hidden}
.stern{font-size:15px;letter-spacing:.13em;color:var(--sig-deep);line-height:1;white-space:nowrap}
.stern .halb{background:linear-gradient(90deg,var(--sig-deep) 55%,#4A4840 55%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stern .leer{color:#4A4840}
.st-schnitt{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.st-schnitt .stern{font-size:19px}
.st-schnitt .more-link{margin-top:26px}
.st-band{margin-top:42px;padding:6px 0 16px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.st-band:focus-visible{outline:2px solid var(--sig-deep);outline-offset:4px}
.st-track{display:flex;width:max-content;animation:st-lauf 58s linear infinite}
.st-band:hover .st-track,.st-band:focus .st-track,.st-band:focus-within .st-track{animation-play-state:paused}
@keyframes st-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.st-track ul{display:flex;align-items:flex-start;gap:22px;padding:0 11px;list-style:none;margin:0}
.stimme{position:relative;width:315px;flex-shrink:0;background:var(--bon);
  border:1px solid var(--line);border-bottom:0;padding:17px 20px 16px;
  box-shadow:0 16px 28px -24px rgba(21,25,34,.5)}
.st-track li:nth-child(even) .stimme{margin-top:14px}
.stimme::after{content:"";position:absolute;left:-1px;right:-1px;top:100%;height:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M0 0h18L9 9Z' fill='%2322211C' stroke='%23413F37' stroke-width='.9'/%3E%3C/svg%3E");
  background-size:18px 9px;background-repeat:repeat-x}
.stimme-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.stimme-kopf .stern{font-size:12.5px}
.stimme-kopf .q{font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.stimme blockquote{margin:12px 0 0;border-top:1px dashed var(--line);padding-top:12px;
  font-size:13.8px;line-height:1.62;color:var(--ink-2)}
.stimme blockquote p{text-align:left;hyphens:manual;-webkit-hyphens:manual}
.stimme-fuss{display:flex;align-items:baseline;gap:10px;margin-top:14px;padding-top:11px;
  border-top:1px dotted rgba(240,237,227,.2);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.stimme-fuss .dots{flex:1;border-bottom:1px dotted rgba(240,237,227,.28);transform:translateY(-3px)}
.stimme-fuss b{font-family:var(--display);font-size:13.5px;color:var(--sig);
  font-variant-numeric:tabular-nums lining-nums}
@media(max-width:768px){
  .stimmen{padding:70px 0 78px}
  .st-band{margin-top:34px}
  .stimme{width:272px}
  .st-track{animation-duration:72s}
}

/* ===== TSE (Nachtblau, volle Flaeche) ===== */
.konf{background:var(--navy);color:#D9D6CB;padding:92px 0}
.konf h2{color:#fff}
.konf h3{color:#fff}
.konf .sec-lead{color:#B3AFA3}
.konf-tab{margin-top:44px;border-top:1px solid var(--line-d)}
.konf-row{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:26px 0;
  border-bottom:1px solid var(--line-d);align-items:start}
.konf-code{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.konf-code small{display:block;font-family:var(--text);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy-lite);margin-top:8px}
.konf-row h3{font-size:1.18rem;color:#fff;margin-bottom:8px}
.konf-row p{color:#B3AFA3;font-size:.98rem;text-align:left;hyphens:manual;max-width:52em}
.konf .feat li{color:#B3AFA3}
.konf .feat li::before{background:var(--sig)}
/* Pruefsiegel-Note (Orange erlaubt) */
.seal{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;margin-top:38px;
  background:rgba(201,39,28,.14);border:1px solid rgba(201,39,28,.55);padding:22px 24px}
.seal-badge{width:74px;height:74px;display:grid;place-items:center;background:var(--sig);color:#171310;
  font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-align:center;
  line-height:1.3;padding:6px}
.seal h4{font-size:1.02rem;color:#fff;letter-spacing:-.01em;margin-bottom:6px}
.seal p{color:#CFCBC0;font-size:.94rem;text-align:left;hyphens:manual}

/* ===== Leistungs-Register ===== */
.reg{list-style:none;margin-top:44px;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.reg-item{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:26px 26px 28px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color .24s var(--ease)}
.reg-no{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);
  padding-top:5px;font-variant-numeric:tabular-nums lining-nums;transition:color .24s var(--ease)}
.reg-item h3{font-size:1.16rem;letter-spacing:-.018em}
.reg-item p{color:var(--ink-2);font-size:.97rem;margin-top:9px;text-align:left;hyphens:manual}
/* Vertiefungs-Link je Register-Eintrag: der sichtbare Text ist der Link,
   seine Flaeche deckt die ganze Kachel (ein Ziel, ein Linktext) */
.reg-item .more{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:12.5px;
  font-weight:600;color:var(--sig);transition:color .2s var(--ease)}
.reg-item .more svg{width:13px;height:13px;transition:transform .22s var(--ease-out)}
.reg-item .more::after{content:"";position:absolute;inset:0}

/* Weiterlesen-Link im Fliesstext */
.more-link{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:14px;font-weight:600;
  color:var(--sig);border-bottom:1px solid rgba(242,213,28,.4);padding-bottom:3px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.more-link svg{width:14px;height:14px;transition:transform .22s var(--ease-out)}
.more-link.on-dark{color:#fff;border-bottom-color:var(--line-d)}

/* ===== Mietkassen ===== */
.miet{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Achtung: nur Laengs-Padding setzen, sonst faellt das 26px-Padding von .wrap weg */
.miet-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;
  padding-top:78px;padding-bottom:78px}
.miet h2{font-size:clamp(1.8rem,3.3vw,2.5rem)}
.miet .sec-lead{color:var(--ink-2)}
.mtags{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;border-top:1px solid var(--line);
  border-left:1px solid var(--line)}
.mtags span{padding:14px 16px;font-size:13px;font-weight:600;color:var(--ink);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bon)}
.miet-card{background:var(--navy);color:#fff;padding:30px 28px}
.miet-card b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.025em}
.miet-card p{color:#B3AFA3;font-size:.97rem;margin-top:12px;text-align:left;hyphens:manual}
.miet-card .btn{margin-top:22px;width:100%}
.miet-card .mk-rule{height:1px;background:var(--line-d);margin:22px 0}
.miet-card .mk-line{display:flex;justify-content:space-between;gap:12px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-lite);font-weight:600}

/* ===== Galerie ===== */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:44px;align-items:start}
.gtile{background:var(--bon);border:1px solid var(--line);padding:8px}
.gtile .imgbox{overflow:hidden;border:1px solid var(--line-2)}
.gtile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.gtile figcaption{padding:11px 3px 3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.g1{grid-column:span 7}.g1 .imgbox{aspect-ratio:3/2}
.g2{grid-column:span 5;margin-top:30px}.g2 .imgbox{aspect-ratio:4/3}
.g3{grid-column:span 5}.g3 .imgbox{aspect-ratio:3/2}
.g4{grid-column:span 7;margin-top:30px}.g4 .imgbox{aspect-ratio:3/2}
/* Gleichmaessiges Raster fuer die Unterseiten */
.gal-even{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.gal-even .imgbox{aspect-ratio:4/3}
.gal-even.two{grid-template-columns:repeat(2,1fr)}

/* ===== Ablauf-Schritte (Bon-Positionen) ===== */
.steps{list-style:none;margin-top:40px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:76px 1fr;gap:26px;padding:26px 0;
  border-bottom:1px solid var(--line);align-items:start}
.step-no{font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;
  color:var(--sig);font-variant-numeric:tabular-nums lining-nums;line-height:1.1}
.step-no small{display:block;font-family:var(--text);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.step h3{font-size:1.14rem;letter-spacing:-.018em;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.98rem;text-align:left;hyphens:manual;max-width:54em}
.steps.on-dark{border-top-color:var(--line-d)}
.steps.on-dark .step{border-bottom-color:var(--line-d)}
.steps.on-dark .step-no{color:#fff}
.steps.on-dark h3{color:#fff}
.steps.on-dark p{color:#B3AFA3}

/* ===== Merkmal-Listen ===== */
.feat{list-style:none;margin-top:22px}
.feat li{position:relative;padding:7px 0 7px 22px;font-size:14.6px;color:var(--ink-2);
  line-height:1.6;text-align:left;break-inside:avoid}
.feat li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;background:var(--sig-deep)}
.feat li b{color:var(--ink);font-weight:600}
.feat.two{columns:2;column-gap:44px}
.feat.three{columns:3;column-gap:36px}

/* Funktions-Gruppen (Software) */
.fgroups{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fgroup{padding:28px 28px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.fgroup h3{font-size:1.1rem;letter-spacing:-.018em;display:flex;align-items:baseline;gap:12px}
.fgroup h3 .gno{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);
  font-variant-numeric:tabular-nums lining-nums}
.fgroup .feat{margin-top:14px}
.fgroup .feat li{font-size:14px;padding-top:6px;padding-bottom:6px}

/* ===== Marken-Raster ===== */
.marken{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.marke{padding:30px 28px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bon);transition:background-color .24s var(--ease)}
/* Produktbild in der Marken-Karte: die Herstellerfotos stehen selbst auf
   dunklem Grund, deshalb traegt die Kachel denselben Ton weiter */
.marke-fig{margin-bottom:20px;border:1px solid var(--line-2);background:#0E0D0B;overflow:hidden}
.marke-fig img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .6s var(--ease-out)}
.marke .rolle{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sig-deep);margin-bottom:11px}
.marke h3{font-family:var(--display);font-size:1.6rem;letter-spacing:-.03em}
.marke p{color:var(--ink-2);font-size:.97rem;margin-top:12px;text-align:left;hyphens:manual}
.marke .mtag{display:inline-block;margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:12px;width:100%}

/* ===== Hinweis-Kasten ===== */
.note{border-left:3px solid var(--sig-deep);background:var(--bon);padding:18px 22px;margin-top:30px;
  font-size:14.2px;color:var(--ink-2);text-align:left;hyphens:manual}
.note b{color:var(--ink)}
.note.on-dark{background:rgba(255,255,255,.06);border-left-color:var(--sig);color:#B3AFA3}
.note.on-dark b{color:#fff}

/* ===== Faktenzeile (zwei bis vier Werte) ===== */
.facts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  background:var(--bon);margin-top:40px}
.facts.four{grid-template-columns:repeat(4,1fr)}
.facts .f{padding:20px 22px;border-left:1px solid var(--line-2)}
.facts .f:first-child{border-left:0}
.facts .f b{display:block;font-family:var(--display);font-size:1.45rem;font-weight:700;
  letter-spacing:-.03em;color:var(--sig);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.facts .f small{display:block;margin-top:9px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;line-height:1.4}

/* ===== Abschluss-CTA-Band ===== */
.ctaband{background:var(--navy);color:#fff;padding:66px 0}
.ctaband-in{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.ctaband h2{font-size:clamp(1.6rem,2.9vw,2.2rem);color:#fff}
.ctaband p{color:#B3AFA3;margin-top:14px;font-size:1rem;text-align:left;hyphens:manual;max-width:40em}
.ctaband-btns{display:flex;flex-direction:column;gap:11px}
.ctaband-btns .btn{width:100%;padding:15px 22px}

/* ===== Weiter-Navigation am Seitenende ===== */
.weiter{border-top:1px solid var(--line);padding:34px 0 0;margin-top:0}
.weiter-in{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.weiter-in a{padding:22px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px;transition:background-color .24s var(--ease)}
.weiter-in .wl{font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.weiter-in .wt{font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px}
.weiter-in .wt svg{width:14px;height:14px;color:var(--sig);transition:transform .22s var(--ease-out)}

/* ===== Kontakt ===== */
.kontakt{padding:88px 0}
.k-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:48px;margin-top:40px;align-items:stretch}
/* Das Datenblatt zieht seine Zeilen auf die Hoehe des Formulars, kein Loch daneben */
.sheet{border-top:1px solid var(--line);display:flex;flex-direction:column}
.k-row{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-2);
  align-items:center;flex:1 0 auto}
.k-row .lbl{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.k-row .v,.k-row a{font-size:1rem;font-weight:600;color:var(--ink)}
.k-row .v{display:block}
.k-row a.tel{font-family:var(--display);font-size:1.14rem;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums lining-nums;transition:color .2s var(--ease)}
.k-row a.tel:hover{color:var(--sig-deep)}
.k-row a.tel.hot{color:var(--sig-deep)}
.k-row .sub{display:block;color:var(--ink-3);font-size:12.5px;font-weight:400;margin-top:4px;line-height:1.5}
.route{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;font-weight:600;
  color:var(--sig);border-bottom:1px solid rgba(242,213,28,.4);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.route svg{width:13px;height:13px}
.route:hover{color:var(--sig-deep);border-color:var(--sig-deep)}

/* Formular */
.form-card{background:var(--card);border:1px solid var(--line);padding:30px 28px 32px}
.form-card h3{font-size:1.3rem}
.form-card>p{color:var(--ink-2);font-size:.95rem;margin-top:8px;text-align:left;hyphens:manual}
/* Hinweis, dass das Formular in der Vorschau nichts versendet — steht bewusst
   VOR den Feldern, damit niemand erst nach dem Ausfuellen davon erfaehrt.
   Entfaellt mit der Freischaltung des Versands. */
.vorschau-hinweis{margin-top:14px;border-left:3px solid var(--sig);background:rgba(242,213,28,.07);
  padding:12px 16px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  text-align:left;hyphens:manual}
.vorschau-hinweis a{color:var(--sig-deep);font-weight:600;white-space:nowrap}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.field .req{color:var(--sig-deep)}
.field input,.field select,.field textarea{font-family:var(--text);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:12px 13px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{resize:vertical;min-height:92px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sig);
  box-shadow:inset 0 0 0 1px var(--sig)}
.check{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:12.5px;color:var(--ink-2);
  text-align:left;line-height:1.55}
.check input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--sig)}
.check a{color:var(--sig-deep);text-decoration:underline}
.form-card .btn{width:100%;margin-top:20px;padding:15px}
.form-card .btn:disabled{opacity:.42;cursor:not-allowed;transform:none}

/* Der Beleg (Anfrage-Ausdruck) */
.beleg{display:none;position:relative;background:var(--bon);border:1px solid var(--line);border-top:0;
  border-bottom:0;margin:26px 4px 12px;padding:24px 22px}
.beleg.on{display:block}
.beleg::before,.beleg::after{content:"";position:absolute;left:-1px;right:-1px;height:9px;
  background-size:18px 9px;background-repeat:repeat-x}
.beleg::before{bottom:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M0 9h18L9 0Z' fill='%2322211C' stroke='%23413F37' stroke-width='.9'/%3E%3C/svg%3E")}
.beleg::after{top:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M0 0h18L9 9Z' fill='%2322211C' stroke='%23413F37' stroke-width='.9'/%3E%3C/svg%3E")}
.beleg-in{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out)}
.beleg.print .beleg-in{clip-path:inset(0 0 0 0)}
.beleg h3,.beleg h4{font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.beleg .bon-rule{margin:13px 0}
.beleg .pv{font-size:13.5px;color:var(--ink-2);white-space:pre-line;text-align:left;hyphens:manual;
  font-variant-numeric:tabular-nums lining-nums;line-height:1.85}
.beleg .disc{margin-top:15px;padding-top:12px;border-top:1px dashed var(--line);font-size:11.5px;
  color:var(--sig-deep);font-weight:600;text-align:left;hyphens:manual}

/* ===== Rechtstexte (Impressum, Datenschutz) ===== */
.legal{padding:calc(var(--draft-h) + var(--hdr) + 52px) 0 80px}
.legal h1{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.035em}
.legal h2{font-family:var(--display);font-size:1.32rem;letter-spacing:-.022em;margin:40px 0 12px;
  padding-top:22px;border-top:1px solid var(--line)}
.legal h3{font-size:1.06rem;margin:24px 0 8px}
.legal p{color:var(--ink-2);margin-top:12px;text-align:left;hyphens:manual}
.legal ul,.legal ol{margin:12px 0 12px 22px;color:var(--ink-2)}
.legal li{margin-top:7px}
.legal a{color:var(--sig-deep);text-decoration:underline}
.legal .stand{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-top:18px}

/* ===== Footer ===== */
.foot{background:var(--paper-2);border-top:1px solid var(--line);padding:56px 0 34px;font-size:13.5px;color:var(--ink-2)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.foot h2,.foot h4{font-family:var(--text);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:15px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot a{transition:color .2s var(--ease)}
.foot a:hover{color:var(--sig-deep)}
.foot .fbrand p{margin-top:16px;max-width:34em;color:var(--ink-2);text-align:left;hyphens:manual}
/* Zusatz unter einer Fusszeilen-Angabe. Eigene Zeile statt angehaengtem
   Trennpunkt: umbrochen stand der Punkt sonst allein am Zeilenanfang. */
.foot .f-zusatz{display:block;font-size:.82em;color:var(--ink-3);margin-top:2px}
.foot-legal{margin-top:26px;font-size:11.5px;line-height:1.75;color:var(--ink-3)}
.foot-legal .box{border-left:1px solid var(--line);padding:2px 0 2px 16px;margin-bottom:14px}
.foot-legal b{color:var(--ink-2)}
.foot-legal a{text-decoration:underline}
.foot-legal p{text-align:left;hyphens:manual}

/* ===== Mobile Sticky CTA ===== */
/* Sticky-Leiste auf dem Handy. Bewusst flach gehalten: sie liegt dauerhaft
   ueber dem Inhalt, jeder Pixel Hoehe fehlt beim Lesen. Der Anruf-Knopf
   braucht nur so viel Platz wie sein Wort, den Rest bekommt die Anfrage. */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:8px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(23,22,19,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.mcta .btn{padding:11px 12px;font-size:14.5px;letter-spacing:-.005em;border-radius:2px}
.mcta .btn-line{flex:0 0 auto}          /* Anrufen: nur so breit wie noetig */
.mcta .btn-sig{flex:1 1 auto}           /* Angebot anfragen: bekommt den Rest */
.mcta .ic{width:16px;height:16px}

/* ===== Fokus ===== */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--sig-deep);outline-offset:3px}
.konf a:focus-visible,.strip a:focus-visible,.mmenu a:focus-visible,.miet-card a:focus-visible,
.ctaband a:focus-visible{outline-color:#fff}

/* ===== Hover nur mit Zeigergeraet ===== */
@media (hover:hover) and (pointer:fine){
  .btn-sig:hover{background:#FFE24A}
  .btn-navy:hover{background:#37342C}
  .btn-line:hover{border-color:var(--sig);color:var(--sig)}
  .btn-line-d:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .btn:hover .ic{transform:translateX(3px)}
  .reg-item:hover{background:var(--bon)}
  .reg-item:hover .reg-no{color:var(--sig)}
  .reg-item:hover .more svg{transform:translateX(3px)}
  .more-link:hover{color:var(--sig-deep);border-bottom-color:var(--sig-deep)}
  .more-link:hover svg{transform:translateX(3px)}
  .more-link.on-dark:hover{color:var(--sig);border-bottom-color:var(--sig)}
  .gtile:hover img{transform:scale(1.04)}
  .marke:hover{background:var(--card)}
  .marke:hover .marke-fig img{transform:scale(1.04)}
  .weiter-in a:hover{background:var(--bon)}
  .weiter-in a:hover .wt svg{transform:translateX(3px)}
}

/* =====================================================================
   BONSTREIFEN als Spalte + Register (ab 1200px)
   ===================================================================== */
@media(min-width:1200px){
  .shell{display:grid;grid-template-columns:minmax(0,1fr) var(--tape);align-items:start}
  .shell>main{grid-column:1;min-width:0}
  .tapecol{display:block;grid-column:2;position:relative;background:var(--bon);
    border-left:1px dashed rgba(242,213,28,.3);align-self:stretch}
  .tapecol::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 5px)}
  .tapecol::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 0h20L10 10Z' fill='%2322211C'/%3E%3C/svg%3E");
    background-size:20px 10px;background-repeat:repeat-x}
  .tape-in{position:sticky;top:calc(var(--draft-h) + var(--hdr) + 30px);padding:22px 20px 26px}
  .bar{max-width:calc(var(--maxw) + var(--tape));padding-right:calc(26px + var(--tape))}
  /* Footer laeuft unter dem Bonstreifen durch, sein Satzspiegel bleibt buendig */
  .foot{padding-right:var(--tape)}
}
/* Hauptnavigation loest den Burger ab */
@media(min-width:1001px){
  .burger{display:none}
  .nav-main{display:flex}
}
@media(min-width:900px) and (max-width:1000px){ .hdr-phone{display:inline-flex} }
@media(min-width:1440px){ .hdr-phone{display:inline-flex} }

.tape-h{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
  display:flex;justify-content:space-between;gap:8px}
.tape-h b{font-family:var(--display);color:var(--ink);font-size:11px;letter-spacing:.12em}
.tape-sub{margin-top:7px;font-size:10.5px;line-height:1.5;color:var(--ink-3);text-align:left}
.tape-rule{height:0;border-top:1px dashed var(--line);margin:15px 0}
.tape-nav{display:flex;flex-direction:column}
.tape-nav a{display:flex;align-items:baseline;gap:9px;padding:8px 0;font-size:12.5px;font-weight:600;
  color:var(--ink-2);letter-spacing:-.005em;transition:color .2s var(--ease)}
.tape-nav a .p{font-size:10.5px;font-weight:600;color:var(--ink-3);letter-spacing:.06em;flex-shrink:0;
  font-variant-numeric:tabular-nums lining-nums;transition:color .2s var(--ease)}
.tape-nav a .dots{flex:1;border-bottom:1px dotted rgba(240,237,227,.28);transform:translateY(-3px)}
.tape-nav a:hover,.tape-nav a[aria-current="true"],.tape-nav a[aria-current="page"]{color:var(--sig)}
.tape-nav a[aria-current="true"] .p,.tape-nav a[aria-current="page"] .p{color:var(--sig-deep)}
.tape-fact{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:11.5px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.tape-fact .dots{flex:1;border-bottom:1px dotted rgba(240,237,227,.28);transform:translateY(-3px)}
.tape-fact b{font-family:var(--display);font-size:14px;color:var(--sig);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums lining-nums}
.tape-end{margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:center;line-height:1.6}
/* Druck-Bewegung: der Bon laeuft Zeile fuer Zeile aus dem Drucker */
.tape-line{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease-out)}
.tape-in.printed .tape-line{clip-path:inset(0 0 0 0)}
.tape-in.printed>.tape-line:nth-child(1){transition-delay:.03s}
.tape-in.printed>.tape-line:nth-child(2){transition-delay:.075s}
.tape-in.printed>.tape-line:nth-child(3){transition-delay:.12s}
.tape-in.printed .tape-nav a:nth-child(1){transition-delay:.165s}
.tape-in.printed .tape-nav a:nth-child(2){transition-delay:.21s}
.tape-in.printed .tape-nav a:nth-child(3){transition-delay:.255s}
.tape-in.printed .tape-nav a:nth-child(4){transition-delay:.3s}
.tape-in.printed .tape-nav a:nth-child(5){transition-delay:.345s}
.tape-in.printed .tape-nav a:nth-child(6){transition-delay:.39s}
.tape-in.printed .tape-nav a:nth-child(7){transition-delay:.435s}
.tape-in.printed>.tape-line:nth-child(5){transition-delay:.48s}
.tape-in.printed>.tape-line:nth-child(6){transition-delay:.525s}
.tape-in.printed>.tape-line:nth-child(7){transition-delay:.57s}
.tape-in.printed>.tape-line:nth-child(8){transition-delay:.615s}
.tape-in.printed>.tape-line:nth-child(9){transition-delay:.66s}
.tape-in.printed>.tape-line:nth-child(10){transition-delay:.705s}
.tape-in.printed>.tape-line:nth-child(11){transition-delay:.75s}
.tape-in.printed>.tape-line:nth-child(12){transition-delay:.795s}
/* Flache Desktop-Fenster: Register kompakter, damit der Bon komplett sichtbar
   bleibt (13 Zeilen seit der Stimmen-Sektion; auf 800px Hoehe sonst unten ab) */
@media(min-width:1200px) and (max-height:860px){
  .tape-in{padding:16px 20px 20px}
  .tape-sub{margin-top:5px;line-height:1.4}
  .tape-rule{margin:10px 0}
  .tape-nav a{padding:5px 0}
  .tape-fact{padding:4px 0}
  .tape-end{margin-top:11px;padding-top:9px}
}

/* ===== Responsive ===== */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:38px;align-items:start}
  .hero-fig{max-width:620px}
  .split{grid-template-columns:1fr;gap:36px}
  .split>*{grid-column:auto!important;grid-row:auto!important}
  .split .bon{margin-top:0}
  .split-fig{max-width:620px}
  .split.plain{grid-template-columns:1fr;gap:36px}
  .miet-grid{grid-template-columns:1fr;gap:34px}
  .k-grid{grid-template-columns:1fr;gap:38px}
  .ctaband-in{grid-template-columns:1fr;gap:28px}
  .ctaband-btns{flex-direction:row;flex-wrap:wrap}
  .ctaband-btns .btn{width:auto;flex:1 1 220px}
}
@media(max-width:1000px){
  .mcta{display:flex}
  body{padding-bottom:76px}
}
@media(max-width:860px){
  .sec,.kontakt{padding:66px 0}
  .sec.tight{padding:54px 0}
  .konf{padding:70px 0}
  .miet-grid{padding-top:60px;padding-bottom:60px}
  .brands-in{grid-template-columns:repeat(4,1fr)}
  .brands-in span:nth-child(5){border-left:0}
  .brands-in span:nth-child(-n+4){border-bottom:1px solid var(--line-2)}
  .reg{grid-template-columns:1fr}
  .marken{grid-template-columns:1fr}
  .fgroups{grid-template-columns:1fr}
  .feat.two,.feat.three{columns:1}
  .konf-row{grid-template-columns:1fr;gap:12px}
  .konf-code{display:flex;align-items:baseline;gap:14px}
  .konf-code small{margin-top:0}
  .gal{gap:18px}
  .g1,.g2{grid-column:span 12;margin-top:0}
  /* werkstatt.jpg ist nur 470px breit: nie ueber native Breite aufblasen */
  .g3,.g4{grid-column:span 6;margin-top:0}
  .g1 .imgbox,.g2 .imgbox,.g3 .imgbox,.g4 .imgbox{aspect-ratio:3/2}
  .gal-even{grid-template-columns:repeat(2,1fr);gap:18px}
  .weiter-in{grid-template-columns:1fr}
  .facts,.facts.four{grid-template-columns:1fr 1fr}
  .facts .f:nth-child(odd){border-left:0}
  .facts .f:nth-child(n+3){border-top:1px solid var(--line-2)}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot .fbrand{grid-column:1/-1}
  .phead-fig img{aspect-ratio:3/2}
}
@media(max-width:680px){
  .datastrip{grid-template-columns:1fr 1fr}
  .dsi:nth-child(3),.dsi:nth-child(4){border-top:1px solid var(--line-2)}
  .dsi:nth-child(odd){border-left:0}
  .fgrid{grid-template-columns:1fr}
  .k-row{grid-template-columns:1fr;gap:5px}
  .brands-in{grid-template-columns:repeat(2,1fr)}
  .brands-in span{border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .brands-in span:nth-child(odd){border-left:0}
  .brands-in span:nth-last-child(-n+2){border-bottom:0}
  .mtags{grid-template-columns:1fr}
  .bon-foot{flex-direction:column;gap:5px}
  .seal{grid-template-columns:1fr;gap:14px}
  .strip-in{padding:56px 22px}
  .step{grid-template-columns:1fr;gap:10px}
  .step-no{display:flex;align-items:baseline;gap:12px}
  .step-no small{margin-top:0}
  .gal-even{grid-template-columns:1fr}
  .phead-fig img{aspect-ratio:4/3}
}
@media(max-width:760px){
  .site .hdr-right .btn{display:none}
}
/* Der Entwurfs-Hinweis bricht schmal auf zwei Zeilen: Leiste mitwachsen lassen */
@media(max-width:620px){ :root{--draft-h:0px} .draft{font-size:11px;line-height:1.45} }
/* Flache Geraete: das Mobilmenue soll ohne Scrollen auf einen Blick passen */
@media(max-height:780px){
  .mmenu{padding-top:calc(var(--draft-h) + var(--hdr) + 20px);padding-bottom:26px}
  .mmenu a.ml{font-size:22px;padding:11px 0}
  .mmenu-foot{padding-top:18px;gap:9px}
  .mmenu-foot .btn{padding:13px}
}
/* Randmarken duerfen schmal umbrechen, sonst laufen sie aus dem Satzspiegel.
   Auf schmalen Schirmen steht die Marke vorn und die Linie laeuft dahinter aus:
   rechtsbuendig umbrochener Text neben einem Linienstummel las sich wie ein
   Versehen, vor allem als erste Zeile ueber der Ueberschrift. */
@media(max-width:560px){
  .secline{gap:13px}
  .secline span{white-space:normal;letter-spacing:.14em;text-align:left;order:-1}
}
@media(max-width:460px){
  .wrap{padding:0 18px}
  .bar{padding:0 18px}
  .hero{padding-top:calc(var(--draft-h) + var(--hdr) + 34px)}
  .phead{padding-top:calc(var(--draft-h) + var(--hdr) + 30px)}
  .legal{padding-top:calc(var(--draft-h) + var(--hdr) + 34px)}
  .hero-cta .btn,.phead-cta .btn{width:100%}
  .brand-txt b{font-size:14px}
  .brand-txt small{font-size:9px;letter-spacing:.15em}
  .form-card{padding:24px 20px 26px}
  .g3,.g4{grid-column:span 12}
  .konf-code{font-size:1.3rem}
  .facts,.facts.four{grid-template-columns:1fr}
  .facts .f{border-left:0;border-top:1px solid var(--line-2)}
  .facts .f:first-child{border-top:0}
}

/* ===== reduced motion: Farbe ja, Bewegung nein ===== */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .st-track{animation:none!important;width:auto}
  .st-band{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .st-track ul[aria-hidden="true"]{display:none}
  .rev{opacity:1!important;transform:none!important;transition:none!important}
  .tape-line{clip-path:none!important;transition:none!important}
  .beleg-in{clip-path:none!important;transition:none!important}
  .btn,.ic,.reg-item,.reg-no,.gtile img,.burger span,.mmenu a.ml,.site,.route,.k-row a.tel,
  .tape-nav a,.tape-nav a .p,.field input,.field select,.field textarea,.marke,.weiter-in a,
  .nav-main a,.nav-main a::after,.weiter-in .wt svg,.reg-item .more svg,
  .more-link,.more-link svg{transition:none!important}
  .btn:active,.btn:hover .ic,.gtile:hover img,.weiter-in a:hover .wt svg,
  .reg-item:hover .more svg,.more-link:hover svg{transform:none!important}
  .nav-main a:hover::after{transform:scaleX(1)!important}
  .mmenu a.ml{transform:none!important;opacity:1!important}
  .mmenu{transition:none!important}
}

/* =====================================================================
   MOBIL-FEINSCHLIFF  ·  Kaja  ·  2026-08-11 (Nacharbeit 2026-08-11)
   Jeder Block hier erfuellt MINDESTENS eine dieser Bedingungen:
     a) `max-width` <= 768px, ODER
     b) `(hover:none) and (pointer:coarse)` — dann darf `max-width` auch
        groesser als 768px sein (echte Touch-Geraete bis 1000px), ODER
     c) Querformat MIT `(hover:none)`, ODER
     d) reines `env()`/`@supports`, am PC wirkungslos.
   KEIN Block darf zwischen 769 und 1000px im Mausbetrieb greifen — genau
   dort haben die frueheren Bloecke 3 und 4 die PC-Ansicht veraendert.
   Die PC-Ansicht bleibt Pixel fuer Pixel unveraendert
   (Beweis: tools/desktop_diff.py). Reihenfolge nur ueber `order:`.
   ===================================================================== */

/* ---------- 1 · Lesbarkeit: kein Blocksatz, Fliesstext >= 16px ----------
   Der zweite Zweig fasst das Handy im QUERformat: 844 px breit, also von
   `max-width:768px` nicht getroffen. `hover:none` haelt das flache PC-Fenster
   heraus (der Waechter misst hochkant und koennte es nie sehen). */
@media(max-width:768px),
       (orientation:landscape) and (hover:none) and (max-height:540px){
  /* Bei ~40 Zeichen je Zeile reisst Blocksatz Loecher in den Absatz */
  p,.doc p,.split-txt p,.legal p{text-align:left}

  body{font-size:16.5px}
  .sec-lead,.phead-lead{font-size:1.06rem;line-height:1.6}
  .split-txt p,.reg-item p,.step p,.marke p,.miet-card p,.konf-row p,
  .ctaband p,.seal p,.form-card>p,.fgroup p,.strip-in p{font-size:16px;line-height:1.62}
  .feat li,.fgroup .feat li,.konf .feat li{font-size:16px;line-height:1.6}
  .note,.note.on-dark{font-size:16px;line-height:1.62;padding:18px 20px}
  .minihinweis{font-size:16px!important;line-height:1.6}
  .bon-row{font-size:15px}
  .bon-row dt{font-size:15px;line-height:1.5}
  .beleg .pv{font-size:15.5px}
  .beleg .disc{font-size:16px;line-height:1.55}
  .k-row .v,.k-row .sub{font-size:16px}
  .k-row .sub{line-height:1.55;color:var(--ink-3)}
  .foot{font-size:16px}
  .foot .fbrand p{font-size:16px;line-height:1.6}
  .foot-legal{font-size:16px;line-height:1.62}
  .foot-legal .box{padding-left:14px;margin-bottom:18px}
  /* Rangordnung nach der Vergroesserung ueber Farbe und Gewicht, nicht ueber Grad */
  .foot-legal,.foot-legal p{color:var(--ink-3)}
  .foot-legal b{color:var(--ink)}
  /* Deutsche Wortungetueme und Mailadressen duerfen brechen */
  p,li,dd,dt,.v,.sub{overflow-wrap:break-word}
}

/* ---------- 2 · Tippziele >= 44px (nur Touch) ---------- */
@media(hover:none) and (pointer:coarse) and (max-width:1000px){
  /* Unterstrichene Links am Zeilenende nach OBEN vergroessern:
     44px Flaeche, der Strich bleibt am Wort */
  .more-link{padding-top:18px;padding-bottom:3px;margin-top:12px}
  .reg-item .more{padding:12px 0 11px;margin-top:2px}
  .k-row a.tel{padding:8px 0;display:inline-block}
  .route{padding:8px 0;margin-top:4px}
  .crumb a{display:inline-block;padding:14px 0}
  /* Links MITTEN im Satz: inline behalten, nur senkrecht polstern
     (verschiebt keine Zeile, zaehlt aber zur Trefferflaeche) */
  .sec-lead a,.note a,.split-txt p a,.legal p a,.doc p a{
    display:inline;padding:15px 0 16px}
  /* AUSNAHME Einwilligungszeile: sie ist nur 2–3 Zeilen hoch und steht im
     halb ausgefuellten Formular. Ein 46px hohes Feld reichte dort in die
     ZWEITE Textzeile hinein — ein Fehltipp fuehrt aus dem Formular heraus.
     Hier gewinnt Treffsicherheit vor Flaeche: Das Polster bleibt innerhalb
     der eigenen Zeile (deshalb oben line-height:1.9 statt 1.55), die Breite
     des Wortes „Datenschutzerklaerung" traegt das Ziel. */
  .check a{display:inline;padding:5px 0}
  /* Wortmarke im Kopf und im Fuss ist ein Link zur Startseite */
  .brand{min-height:44px}
  .check input{width:26px;height:26px;margin-top:0}
  /* Getippt wird das LABEL: es schaltet die Box mit und ist die
     eigentliche Trefferflaeche (>=48px hoch), die Box selbst bleibt 26px. */
  .check{align-items:center;gap:13px;min-height:48px;padding:6px 0}
  /* Fusszeilen-Listen werden zu echten Zeilen. Die Trennlinie sitzt in der
     Mitte des Zwischenraums: so bleiben zwischen zwei Tippzielen 4+1+4 = 9px
     Abstand (Vorgabe >=8px) UND jedes Ziel bleibt mit 12+25+12 = 49px hoch
     ueber der 44px-Marke. `gap:0` haette beide Ziele auf 1px zusammengeschoben. */
  .foot ul{gap:0}
  .foot ul li{border-bottom:1px solid var(--line-2);padding:4px 0}
  .foot ul li:last-child{border-bottom:0}
  .foot ul li a{display:block;padding:12px 0}
  .foot ul li:not(:has(a)){padding:16px 0}

  /* Die Seitenliste war der Hauptgrund fuer die Laenge: acht Zeilen a 49px
     ergaben allein hier fast 400px. Zweispaltig sind es vier Reihen, ohne
     dass die Tippflaeche kleiner wird. Die duenne Trennlinie in der Mitte
     haelt die Spalten optisch auseinander. */
  .foot .f-seiten ul{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .foot .f-seiten ul li:nth-last-child(2){border-bottom:0}
  .foot .f-seiten ul li:nth-child(odd){border-right:1px solid var(--line-2);padding-right:14px}

  /* Kopf der Fussleiste enger: der Abstand darf auf dem Handy nicht so
     grosszuegig sein wie auf dem Schirm. */
  .foot{padding-top:34px}
  .foot-top{gap:26px;padding-bottom:22px}
  .foot .fbrand .logo{height:48px}
  .foot-legal{margin-top:18px}

  /* Der Beschreibungssatz wiederholt auf dem Handy nur, was ganz oben im
     Kopfbereich schon steht — und kostet hier unten 90px. Auf dem Schirm
     bleibt er, dort traegt er die linke Spalte. */
  .foot .fbrand p{display:none}

  /* Pflichtlinks stehen jetzt in der Rechtszeile. Sie brauchen dort eine
     eigene Tippflaeche, sonst sind sie auf dem Handy kaum zu treffen. */
  .foot-legal a{display:inline-block;padding:10px 2px}
  .burger{min-width:44px;min-height:44px}
}

/* ---------- 3 · Formulare: 16px, richtige Tastatur, voller Knopf ----------
   Die Leiste .mcta und damit das Handy-Layout beginnt laut Basis-CSS bei
   1000px — deshalb reicht dieser Block bis 1000px. Er MUSS aber an
   `(hover:none) and (pointer:coarse)` haengen, sonst trifft er das schmale
   PC-Fenster (769–1000px) und bricht die eiserne Regel. Der iOS-Zoom, den
   16px verhindern, gibt es ohnehin nur auf Touch. */
@media(hover:none) and (pointer:coarse) and (max-width:1000px){
  /* Unter 16px zoomt iOS beim Antippen in das Feld hinein */
  .field input,.field select,.field textarea{font-size:16px;padding:14px 13px}
  .field textarea{min-height:120px}
  .field label{font-size:11px}
  .form-card .btn{padding:17px;font-size:15.5px}
  /* Die Einwilligung ist Pflichttext direkt vor dem Absenden: sie war mit
     12,5px die kleinste Schrift im Formular. Jetzt 16px wie der Rest, der
     Rang kommt ueber die Farbe (--ink-2), nicht ueber den Schriftgrad. */
  .check{font-size:16px;line-height:1.9}
}

/* ---------- 4 · Sticky-Leiste: Daumenzone, Notch, freier Absende-Knopf ----
   Gleiche Begruendung wie Block 3: bis 1000px, aber NUR auf Touch. Am PC
   bleibt es bei den 76px Body-Polster des Basis-CSS. */
@media(hover:none) and (pointer:coarse) and (max-width:1000px){
  .mcta{padding-left:max(13px,env(safe-area-inset-left));
        padding-right:max(13px,env(safe-area-inset-right))}
  .mcta .btn{min-height:46px}          /* Zielgroesse fuer den Finger, nicht kleiner */
  /* Die Leiste raeumt das Feld, sobald Formular oder Fuss im Blick sind */
  .mcta{transition:transform .28s cubic-bezier(.23,1,.32,1),opacity .22s linear}
  .mcta.weg{transform:translateY(120%);opacity:0;pointer-events:none}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media(hover:none) and (pointer:coarse) and (max-width:1000px) and (prefers-reduced-motion:reduce){
  .mcta{transition:none}
}

/* ---------- 4b · Vollbild-Menue: die Seite dahinter steht still ----------
   Ohne Sperre scrollt der Hintergrund unter dem offenen Menue weiter; beim
   Schliessen steht man woanders als vorher. `body` ist hier der Ueberlauf-
   Traeger (overflow-x:hidden), die Sperre wirkt also auf das Fenster.
   `position:fixed` waere die Alternative, springt aber an den Seitenanfang —
   `overflow:hidden` haelt die Scrollposition. Ruhezustand und ESC bleiben,
   weil ALLES an `body.menu-open` haengt und das Skript unveraendert ist. */
@media(hover:none) and (pointer:coarse) and (max-width:1000px){
  body.menu-open{overflow:hidden;overscroll-behavior:none}
  /* Das Menue selbst darf scrollen, gibt den Schwung aber nicht nach aussen */
  .mmenu{overscroll-behavior:contain}
}

/* ---------- 5 · Hero: die erste Bildschirmhoehe ist die Visitenkarte ----- */
@media(max-width:768px){
  .hero{padding:calc(var(--draft-h) + var(--hdr) + 30px) 0 46px}
  .hero-grid{gap:30px;margin-top:22px}
  .hero h1{font-size:clamp(2.3rem,10.2vw,3.1rem);line-height:1.02}
  .hero-lead{font-size:1.05rem;line-height:1.58;margin-top:18px}
  .hero-cta{margin-top:22px;gap:10px}
  .datastrip{margin-top:30px}
  .dsi{padding:15px 17px}
  .dsi b{font-size:1.38rem}
  .secline{margin-bottom:20px}
  .phead{padding-top:calc(var(--draft-h) + var(--hdr) + 26px)}
  .phead h1{font-size:clamp(1.95rem,8.4vw,2.6rem)}
  .phead-lead{margin-top:18px}
  .phead-cta{margin-top:22px}
  .phead-fig{margin-top:34px}
  .crumb{margin-bottom:18px}
}
@media(max-width:400px){
  .hero h1{font-size:clamp(2.05rem,10.2vw,2.6rem)}
  .dsi{padding:14px 14px}
}

/* ---------- 6 · Rhythmus und Weissraum ---------- */
@media(max-width:768px){
  .sec,.kontakt{padding:58px 0}
  .sec.tight{padding:46px 0}
  .konf{padding:60px 0}
  .miet-grid{padding-top:54px;padding-bottom:54px}
  .ctaband{padding:54px 0}
  .strip{min-height:250px}
  .strip-in{padding:48px 22px}
  .strip-in blockquote{font-size:clamp(1.32rem,5.6vw,1.7rem);line-height:1.26}
  .split,.split.plain{gap:30px}
  .konf-tab{margin-top:32px}
  .konf-row{padding:22px 0}
  .steps{margin-top:30px}
  .step{padding:22px 0}
  .reg,.marken,.fgroups{margin-top:32px}
  .facts{margin-top:32px}
  .weiter{padding-top:26px}
  .foot{padding:44px 0 30px}
  .foot-top{gap:26px;padding-bottom:24px}
  /* Zwei Spalten reissen die langen Beschriftungen auseinander
     ("Kassensysteme & / Software"): auf dem Handy eine Spalte */
  .foot-top{grid-template-columns:1fr}
  .foot .fbrand{grid-column:auto}
  .foot-legal{margin-top:22px}
}

/* ---------- 7 · Breites mobil NEU erzaehlt: Markenband als Wisch-Reihe --- */
@media(max-width:680px){
  .brands{position:relative}
  .brands-in{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-right:0;
    scrollbar-width:none;-ms-overflow-style:none}
  .brands-in::-webkit-scrollbar{display:none}
  /* :nth-child(n) hebt die Spezifitaet auf die der Raster-Regeln darueber */
  .brands-in span:nth-child(n){flex:0 0 auto;scroll-snap-align:start;padding:16px 20px;
    border-left:1px solid var(--line-2);border-bottom:0;white-space:nowrap;overflow:visible}
  .brands-in span:first-child{border-left:0;padding-left:18px}
  /* Nachlauf genau so breit wie der Verlauf: nichts wird verdeckt, wenn Schluss ist */
  .brands-in span:last-of-type{margin-right:22px}
  /* Weicher Verlauf: die naechste Marke schimmert durch — das ist der
     Weiter-Hinweis. Ein deckender Verlauf wuerde genau den Peek fressen. */
  .brands-in::after{content:"";position:sticky;right:0;flex:0 0 30px;margin-left:-30px;
    align-self:stretch;pointer-events:none;
    background:linear-gradient(90deg,rgba(31,30,26,0),rgba(31,30,26,.55) 55%,var(--paper-2))}
}

/* ---------- 8 · Galerien als Wisch-Reihe statt Fotoschlange -------------- */
@media(max-width:560px){
  .gal,.gal-even,.gal-even.two{display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-left:0;padding-right:0;margin-top:30px;
    scrollbar-width:none;-ms-overflow-style:none;align-items:stretch}
  .gal::-webkit-scrollbar,.gal-even::-webkit-scrollbar{display:none}
  .gal>.gtile,.gal-even>.gtile{flex:0 0 82%;scroll-snap-align:start;margin-top:0;
    grid-column:auto;display:flex;flex-direction:column}
  .gal>.gtile .imgbox,.gal-even>.gtile .imgbox{aspect-ratio:4/3}
  .gal>.gtile:last-of-type,.gal-even>.gtile:last-of-type{margin-right:28px}
  .gal::after,.gal-even::after{content:"";position:sticky;right:0;flex:0 0 36px;
    margin-left:-36px;align-self:stretch;pointer-events:none;
    background:linear-gradient(90deg,rgba(23,22,19,0),var(--paper) 72%)}
  .sec-alt .gal-even::after{background:linear-gradient(90deg,rgba(31,30,26,0),var(--paper-2) 72%)}
  /* Das Wischen IST die Bewegung: kein zusaetzliches Einblenden in der Reihe */
  .gal>.gtile.rev,.gal-even>.gtile.rev{opacity:1;transform:none;transition:none}
  .gal figcaption,.gal-even figcaption{margin-top:auto}
}

/* ---------- 9 · Leistungs-Register: Nummer nach oben, Text wird breiter -- */
@media(max-width:560px){
  /* Jeder Pixel Chrom fehlt dem Inhalt: Kopf 74 -> 68, Leiste 77 -> 71 */
  :root{--hdr:68px}
  .mcta{padding:7px 12px calc(7px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .reg-item{grid-template-columns:1fr;gap:0;padding:24px 20px 26px}
  .reg-no{padding-top:0;margin-bottom:9px;letter-spacing:.16em;color:var(--sig-deep)}
  .reg-item h3{font-size:1.2rem}
  .marke{padding:26px 20px 28px}
  .fgroup{padding:24px 20px 26px}
  .mtags{grid-template-columns:1fr 1fr}
  .mtags span{padding:13px 14px;font-size:13px}
  .miet-card{padding:26px 22px}
  .konf-row h3{font-size:1.14rem}
}
@media(max-width:360px){
  .mtags{grid-template-columns:1fr}
}

/* ---------- 10 · Entwurfs-Hinweis: Pflichttext, also lesbar ------------- */
@media(max-width:620px){
  :root{--draft-h:0px}
  .draft{font-size:13px;line-height:1.42;
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right))}
}
@media(max-width:400px){ .draft{font-size:12.5px} }
@media(max-width:340px){ :root{--draft-h:0px} }

/* ---------- 11 · Rand am Notch ---------- */
@media(max-width:768px){
  .wrap{padding-left:max(18px,env(safe-area-inset-left));
        padding-right:max(18px,env(safe-area-inset-right))}
  .bar{padding-left:max(18px,env(safe-area-inset-left));
       padding-right:max(18px,env(safe-area-inset-right))}
  .mmenu{padding-left:max(22px,env(safe-area-inset-left));
         padding-right:max(22px,env(safe-area-inset-right));
         padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .strip-in{padding-left:max(22px,env(safe-area-inset-left));
            padding-right:max(22px,env(safe-area-inset-right))}
}

/* ---------- 12 · Bewegung auf kleiner Flaeche: weniger ist mehr --------- */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .rev{transform:translateY(8px);
    transition:opacity .38s var(--ease-out),transform .38s var(--ease-out)}
  .rev.d1{transition-delay:.04s}.rev.d2{transition-delay:.08s}.rev.d3{transition-delay:.11s}
  .mmenu a.ml{transform:translateY(7px);
    transition:transform .3s var(--ease-out),opacity .3s var(--ease-out)}
  body.menu-open .mmenu a.ml:nth-of-type(1){transition-delay:.02s}
  body.menu-open .mmenu a.ml:nth-of-type(2){transition-delay:.05s}
  body.menu-open .mmenu a.ml:nth-of-type(3){transition-delay:.08s}
  body.menu-open .mmenu a.ml:nth-of-type(4){transition-delay:.11s}
  body.menu-open .mmenu a.ml:nth-of-type(5){transition-delay:.14s}
  body.menu-open .mmenu a.ml:nth-of-type(6){transition-delay:.17s}
  body.menu-open .mmenu a.ml:nth-of-type(7){transition-delay:.2s}
  .mmenu{transition:opacity .2s var(--ease),visibility .2s var(--ease)}
  .beleg-in{transition:clip-path .5s var(--ease-out)}
}

/* ---------- 13 · Handy quer: das Chrom darf nicht den Schirm fressen ----
   Wichtig: JEDE Querformat-Regel traegt `and (hover:none)`. Ein flaches
   PC-Fenster (1280x480) ist sonst mitbetroffen, und der Waechter misst
   hochkant bei 12.000px Hoehe, kann es also nie sehen.                   */
@media (orientation:landscape) and (hover:none) and (max-height:540px){
  :root{--draft-h:0px;--hdr:54px}
  .draft{font-size:12px;line-height:1.2}
  .mark{width:34px;height:36px;font-size:11.5px;padding-bottom:5px}
  .brand .logo{height:40px}
  .brand-txt b{font-size:13.5px}
  .brand-txt small{font-size:8.5px;letter-spacing:.16em}
  .mcta{padding:6px 11px calc(6px + env(safe-area-inset-bottom))}
  .mcta .btn{padding:9px 11px;min-height:44px;font-size:14px}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .hero{padding:calc(var(--draft-h) + var(--hdr) + 22px) 0 34px}
  .phead{padding-top:calc(var(--draft-h) + var(--hdr) + 20px)}
  .legal{padding-top:calc(var(--draft-h) + var(--hdr) + 24px)}
  .sec,.kontakt{padding:46px 0}
  .sec.tight{padding:36px 0}
  .konf{padding:48px 0}
  .miet-grid{padding-top:44px;padding-bottom:44px}
  .ctaband{padding:44px 0}
  /* Das Menue soll quer ohne Scrollen auf einen Blick passen */
  /* Quer ist der Schirm breit, nicht hoch: das Menue nutzt die Breite und
     steht in zwei Spalten. So bleiben die Zeilen >=44px UND alles passt
     ohne Scrollen auf einen Blick. */
  .mmenu{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-content:start;
         padding-top:calc(var(--draft-h) + var(--hdr) + 12px);
         padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .mmenu a.ml{font-size:20px;padding:11px 0}
  .mmenu-foot{grid-column:1/-1;margin-top:16px;padding-top:0;gap:10px;flex-direction:row}
  .mmenu-foot .btn{padding:12px;flex:1}
  /* Quer bleibt die Spalte 76px breit: lange Marken laufen sonst heraus */
  .step{grid-template-columns:1fr;gap:9px}
  .step-no{display:flex;align-items:baseline;gap:13px}
  .step-no small{margin-top:0}
  .k-row{grid-template-columns:1fr;gap:5px}
  .wrap,.bar{padding-left:max(26px,env(safe-area-inset-left));
             padding-right:max(26px,env(safe-area-inset-right))}
}