/* ShowUpScreens — Designsystem.

   HERKUNFT DER ENTSCHEIDUNGEN
   · Tokenstruktur und Radius-Staffel nach dem Muster von shadcn/ui: semantische
     Paare, ein Basisradius, daraus abgeleitete Stufen.
   · Typografische Rollen nach Material 3 (display / headline / title / body /
     label) — mit eigenen Werten, nicht mit deren Zahlen.
   · Große ruhige Flächen, eine Betonung je Bildschirm, zurückhaltende Bewegung
     nach Apples Gestaltungsgrundsätzen.
   · Glasflächen für Kopfleiste und Overlays in der Machart von css.glass:
     Sättigung anheben, weichzeichnen, hauchdünne helle Kante.
   · Mikrointeraktionen im Geist von uiverse — spürbar, aber unter 200 ms.

   SCHRIFT, selbst gehostet, keine Verbindung zu Dritten:
   Bricolage Grotesque (Display) und Inter (Text), beide SIL Open Font License.

   Aufbau: 1 Tokens · 2 Schrift · 3 Grundlagen · 4 Kopf · 5 Bausteine
           6 Startseite · 7 Display-Finder · 8 Katalog · 9 Produktseite
           10 Konfigurator · 11 Kundenbereich · 12 Rechtstexte · 13 Fuß
           14 Overlays · 15 Schmalere Bildschirme */

/* ── 1 Tokens ────────────────────────────────────────────────────────────── */
:root{
  /* GRAUTÖNE NACHGEDUNKELT am 18.08.
     Vorher #3B3B47 und #6A6A78. Das hellere der beiden erreichte auf weissem
     Grund einen Kontrast von 5,4:1 — für Fliesstext zulässig, aber am unteren
     Rand; bei 13,5px Beiwerk und auf einem hellen Bildschirm wird daraus
     Rauschen statt Text. Jetzt 7,0:1 und 10,3:1, beide deutlich über der
     Anforderung, ohne dass die Abstufung verlorengeht. */
  --ink:#0B0B0F; --ink-2:#2C2C36; --ink-3:#55555F;
  --paper:#FFFFFF; --paper-2:#F7F7FA; --paper-3:#EFEFF4;
  --line:#E6E6EE; --line-2:#F0F0F5;

  /* Ein kräftiger Akzent, drei Pastellflächen. Mehr nicht — sonst kippt es
     ins Bunte statt ins Selbstbewusste. */
  --brand:#4B34F5; --brand-h:#3A24DB; --brand-tint:#EDEAFF;
  --signal:#FF5A36; --signal-tint:#FFE9E2;
  --mint:#00C08B;   --mint-tint:#DDF6EE;
  --butter:#FFC947; --butter-tint:#FFF3D8;
  --ok:#0F7A48; --warn:#8A5A00; --err:#C22B2B;

  --r:14px; --r-sm:calc(var(--r) * .6); --r-lg:calc(var(--r) * 1.4); --r-xl:calc(var(--r) * 2);
  --pill:999px;
  --sh-1:0 1px 2px rgba(11,11,15,.05);
  --sh-2:0 2px 4px rgba(11,11,15,.04), 0 12px 28px -14px rgba(11,11,15,.25);
  --sh-3:0 4px 8px rgba(11,11,15,.05), 0 28px 60px -24px rgba(11,11,15,.4);
  --wrap:1240px;
  /* Höhe der klebenden Kopfleiste. Der Startwert passt zur einzeiligen
     Leiste ohne Logo; assets/app.js misst sie beim Laden nach und schreibt
     den echten Wert hierher — dann stimmt der Abstand auch mit Logo oder
     umgebrochener Navigation. */
  --kopfhoehe:70px;
  --schnell:.16s cubic-bezier(.2,.7,.3,1);

  /* Aliasse, damit ältere Regeln weiter greifen */
  --fg:var(--ink); --fg-2:var(--ink-2); --muted:var(--ink-3);
  --soft:var(--paper-2); --soft-2:var(--paper-3);
  --akzent:var(--ink); --akzent-2:var(--brand); --akzent-weich:var(--brand-tint);
  --radius:var(--r); --radius-s:var(--r-sm); --schatten:var(--sh-2);
}

/* ── 2 Schrift ───────────────────────────────────────────────────────────── */
@font-face{font-family:'Bricolage';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Manrope Variable, SIL OFL 1.1, selbst gehostet (assets/fonts/LICENSE-Manrope.txt).
   Löst Inter ab: offenere Punzen, ruhigere Ziffern, deutlich engere Grundform —
   und mit 24,8 kB für Latein rund ein Drittel kleiner als der Inter-Schnitt,
   den sie ersetzt. Kein Aufruf an fonts.googleapis.com: Die Dateien liegen im
   Theme, damit ohne Einwilligung keine IP-Adresse zu Google wandert. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/manrope-latin.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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/manrope-latin-ext.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}
:root{
  --f-display:'Bricolage','Manrope',system-ui,sans-serif;
  --f-text:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ── 3 Grundlagen ────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Laufweite: Manrope steht von Haus aus locker. −0.015em nimmt die Luft heraus,
   ohne dass Fließtext klebt. Die von Ihnen genannten −0.03em sind für grosse
   Grade gedacht — auf 16,5 px gemessen fallen dort „rn" und „m" ineinander,
   deshalb stehen sie weiter unten nur an Überschriften und Auszeichnungen. */
/* MINDESTGEWICHT 500 für alles.
   Die Schrift wirkt bei 400 auf hellem Grund dünn — besonders in den kleinen
   Stufen (12,5 und 13,5). 500 ist noch kein Halbfett, gibt den Linien aber
   genug Substanz. Wer schwerer will, setzt weiterhin 550, 600 oder 650. */
body{margin:0;font-family:var(--f-text);font-size:16.5px;line-height:1.6;color:var(--ink);background:var(--paper);
  font-weight:500;
  letter-spacing:-.015em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.06;letter-spacing:-.03em;margin:0 0 .45em}
h1{font-size:clamp(32px,4.6vw,58px)}
h2{font-size:clamp(25px,3.1vw,40px)}
h3{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em}
p{margin:0 0 1em}
.sus-display{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,6.6vw,80px);line-height:.96;
  letter-spacing:-.045em;margin:0 0 20px}
.sus-display{position:relative;z-index:0}
/* Markierung als Leuchtstrich hinter dem Wort. Ein Farbverlauf im Textfluss
   sitzt bei Zeilenhöhe 0,96 schief — das Pseudoelement sitzt immer richtig. */
.sus-display mark{background:none;color:inherit;position:relative}
.sus-display mark::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.1em;height:.26em;
  background:var(--butter);border-radius:3px;z-index:-1}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ink-2)}
.sus-eyebrow{font-family:var(--f-text);font-size:12.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;display:block}

.sus-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sus-main{min-height:50vh}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sus-skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);z-index:200}
.sus-skip:focus{left:14px;top:14px}

/* ── 4 Kopf ──────────────────────────────────────────────────────────────── */
.sus-topbar{background:var(--ink);color:#C9C9D6;font-size:13.5px}
.sus-topbar .sus-wrap{display:flex;justify-content:space-between;gap:16px;padding-block:9px;flex-wrap:wrap}
.sus-topbar a{color:#fff;text-decoration:none}
.sus-topbar a:hover{text-decoration:underline}
.sus-topbar .rechts{display:flex;gap:20px;flex-wrap:wrap}
/* Auf dem Telefon bleiben nur die beiden Wege zu uns: Nummer und Adresse.
   Mit den Öffnungszeiten dazwischen brach die Leiste auf zwei Zeilen um. Die
   Zeiten stehen weiterhin im Seitenfuss. */
@media (max-width:639px){
  .sus-topbar .zeiten{display:none}
  .sus-topbar .rechts{gap:14px;flex-wrap:nowrap;justify-content:space-between;width:100%}
  .sus-topbar .sus-wrap{flex-wrap:nowrap}
  .sus-topbar a{white-space:nowrap}
}
/* Unter 400 Pixeln wird es auch zu zweit eng: Nummer und Adresse zusammen
   brauchen bei 13px rund 300 Pixel, bei 320 Pixeln Gerätebreite bleiben nach
   Innenabstand nur 272. Ein Punkt kleiner und ein engerer Abstand lösen es,
   ohne dass die Leiste wieder zweizeilig wird. */
/* SEHR SCHMALE GERÄTE.
   GEMESSEN bei 360 Pixeln: Wortmarke 180 + Abstand 22 + Suche/Konto/Menü 147 +
   Innenabstand 48 = 397 Pixel. Die Kopfleiste stand also 37 Pixel über den
   Rand hinaus — unabhängig von der Schriftgrösse, es war schlicht zu viel für
   die Breite. Weniger Innenabstand, engere Abstände, kleinere Wortmarke. */
@media (max-width:399px){
  .sus-header .sus-wrap{padding-inline:16px}
  .sus-header .marke .custom-logo{max-width:140px}
  /* Ohne hochgeladenes Logo steht dort der gesetzte Schriftzug — der muss
     ebenso schmaler werden, sonst hilft die Deckelung nur der Bilddatei. */
  .sus-header .wortmarke{font-size:16.5px}
  .kopf{gap:12px}
  .kopf-aktionen{gap:7px}
  .sus-topbar{font-size:12.5px}
  .sus-topbar .rechts{gap:8px}
  .sus-topbar .sus-wrap{padding-inline:16px}
}
/* Bei 320 Pixeln — dem schmalsten Gerät, das noch vorkommt — fehlten zuletzt
   sieben Pixel. Dort trägt der Kontoknopf nur noch sein Sinnbild; der Weg ins
   Konto bleibt also erhalten, nur das Wort daneben fällt. Ein versteckter Knopf
   wäre schlechter als ein schmalerer. */
@media (max-width:339px){
  .kopf-aktionen .konto .text{display:none}
  .kopf-aktionen .konto{padding-inline:10px}
}

.sus-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:2px solid color-mix(in srgb,var(--line) 70%,transparent)}
.kopf{display:flex;align-items:center;gap:22px;padding-block:14px}
/* ── Hochgeladenes Logo ────────────────────────────────────────────────────
   Ohne Deckel rendert WordPress die Datei in ihrer Originalgröße. Breite und
   Höhe sind unabhängig gedeckelt, das Seitenverhältnis bleibt erhalten.

   200 STATT 240 PIXEL, UND ZWAR GEMESSEN: Mit dem ersten Logo war das Feld
   216 Pixel breit — 76 mehr als die Textmarke. Genau diese 76 Pixel fehlten der
   Kopfleiste, „Größe" rutschte in eine zweite Zeile und „Mein Konto" brach
   mitten im Wort. Die Leiste war 113 statt 75 Pixel hoch. Der Deckel für das
   Logo allein reicht also nicht; siehe die drei Regeln bei .kopf darunter. */
/* GEMESSEN: Der Kasten .marke war 44,5 Pixel hoch, das Bild 37,1 — die 7,4
   Pixel Unterschied lagen vollständig UNTER dem Bild. Ursache war der Verweis
   um das Logo: als inline-flex ist er zeilenweise gesetzt und sitzt auf der
   Schriftlinie des Absatzes (Zeilenhöhe 26,4 px), was darunter Platz für die
   Unterlängen lässt. Der Kasten selbst stand mittig, das Bild darin nicht.
   Als Flexkasten mit senkrechter Zentrierung entsteht keine Zeile mehr. */
.sus-header .marke{flex:none;display:flex;align-items:center;line-height:0}
.sus-header .marke .custom-logo{display:block;width:auto;height:auto;
  max-width:200px;max-height:40px}
.sus-header .marke .custom-logo-link,
.sus-header .marke .wortmarke{display:flex;align-items:center;line-height:1.1}
/* KNÖPFE IM INHALT NEHMEN AUF DEM TELEFON DIE VOLLE BREITE.
   Nebeneinander wurden sie schmaler als der Daumen breit ist; untereinander,
   aber nur bis zur Textlänge, standen sie als Treppe im Weissraum. Volle Breite
   löst beides.

   ERWEITERT AM 18.08. auf Weisung des Betreibers: Es gilt jetzt für JEDE
   Knopfreihe im Inhalt — auch für die Navigation des Finders („Zurück" /
   „Passende Displays zeigen"), für die beiden Knöpfe am Ergebnis („Displays
   ansehen" / „Jetzt Angebot anfragen") und für den Knopf im Kasten „Lieber
   kurz sprechen?". Vorher standen die Finder-Knöpfe nebeneinander; bei zwei
   Beschriftungen von sehr ungleicher Länge brach die längere auf drei Zeilen
   um, während die kurze daneben klein blieb — das las sich wie ein Fehler.

   Ausgenommen bleiben: die Filterleiste, die Karten, wo der Knopf Teil einer
   Zeile ist, und ausdrücklich der Cookie-Hinweis. Der trägt zwar auch ein
   `.knoepfe`, hat aber seine eigene Grenze bei 378 Pixeln. */
@media (max-width:640px){
  .sus-hero .knoepfe,.sus-block .knoepfe,.sus-knoepfe,
  .sus-finder .navi,.sus-gespraech{flex-direction:column;align-items:stretch}
  .sus-hero .knoepfe > .sus-cta,.sus-hero .knoepfe > .sus-btn,
  .sus-block .knoepfe > .sus-cta,.sus-block .knoepfe > .sus-btn,
  .sus-knoepfe > .sus-cta,.sus-knoepfe > .sus-btn,
  .sus-finder .navi > .sus-cta,.sus-finder .navi > .sus-btn,
  .sus-gespraech > .sus-cta{width:100%}

  /* Reihenfolge im Finder: Der weiterführende Knopf gehört nach oben, „Zurück"
     darunter. Nebeneinander stand er rechts — untereinander wäre er sonst der
     letzte, den der Daumen erreicht, obwohl er der seltenere Weg ist. */
  .sus-finder .navi{gap:10px}
  .sus-finder .navi > .weiter,
  .sus-finder .navi > .auswerten{order:-1}
}

@media (max-width:640px){
  .sus-header .marke .custom-logo{max-width:150px;max-height:32px}
}

.wortmarke{font-family:var(--f-display);font-size:21px;font-weight:800;letter-spacing:-.035em;color:var(--ink);
  white-space:nowrap;text-decoration:none}
.wortmarke strong{color:var(--brand);font-weight:800}
.wortmarke span{font-weight:800}
.wortmarke:hover{text-decoration:none}
.marke img{max-height:42px;width:auto}

.kopf-aktionen{display:flex;align-items:center;gap:10px;margin-left:auto}
.konto{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14.5px;font-weight:550;
  padding:9px 15px;border:2px solid var(--line);border-radius:var(--pill);transition:border-color var(--schnell)}
.konto:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.konto svg{width:18px;height:18px;flex:none}
.sus-suchknopf{display:grid;place-items:center;width:40px;height:40px;background:none;border:2px solid var(--line);
  border-radius:var(--pill);cursor:pointer;color:var(--ink);transition:border-color var(--schnell),background var(--schnell)}
.sus-suchknopf:hover{border-color:var(--ink);background:var(--paper-2)}
.sus-suchknopf svg{width:18px;height:18px}
html:not(.js) .sus-suchknopf{display:none}
.sus-burger{display:none;flex-direction:column;gap:4px;background:none;border:2px solid var(--line);
  border-radius:var(--pill);padding:12px 11px;cursor:pointer}
.sus-burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px}

/* Hauptnavigation: eine Ebene, kein Ausklappen, keine Pillen beim Überfahren.
   Ein zarter Strich unter dem Wort reicht — er verschiebt nichts und lärmt nicht. */
/* Die Kopfleiste darf an keinem Logo zerbrechen — deshalb drei Regeln, die
   zusammengehören:
     1. Die Marke schrumpft nicht (flex:none, oben).
     2. Die Punkte rechts schrumpfen nicht und brechen nicht im Wort um.
     3. Die Navigation umbricht NIE. Reicht der Platz wirklich nicht, wird sie
        waagerecht scrollbar — eine zweite Zeile ist keine Option, weil sie die
        gemessene Kopfhöhe und damit alle klebenden Elemente verschiebt.
   Die Bildlaufleiste bleibt unsichtbar, bis man die Leiste überfährt. */
/* KEIN overflow auf diesem Kasten. Hier stand einmal `overflow-x:auto` als
   Sicherheitsnetz gegen eine zweite Navigationszeile — und das war ein Fehler
   mit sofortiger Wirkung: Sobald eine Achse auf `auto` steht, ist die andere
   nicht mehr `visible`. Die Klappmenüs hängen als absolut gesetzte Kinder in
   diesem Kasten, und der ist 40 Pixel hoch. Gemessen: Das 356 Pixel hohe
   Untermenü wurde auf 40 Pixel beschnitten und bekam eine Bildlaufleiste.
   Gegen den Umbruch genügen flex-wrap:nowrap und white-space:nowrap weiter
   unten; reicht der Platz einmal nicht, ragt die Leiste heraus, statt sich zu
   falten — sichtbar zu viel ist besser als unsichtbar abgeschnitten. */
.sus-hauptnav{margin-left:8px;min-width:0}
.sus-header .kopf-aktionen{flex:none}
.sus-header .kopf-aktionen > *{white-space:nowrap}
/* Enger als zuvor (gap 4 → 3, Innenabstand 12 → 9). Grund ist gemessen, nicht
   Geschmack: Mit dem fünften Punkt brauchte die Leiste 584 Pixel und hatte 583
   — „Größe" rutschte in eine zweite Zeile und „Mein Konto" wurde abgeschnitten.
   Eine Medienabfrage half nicht, weil die Inhaltsbreite fest bei 1240 Pixeln
   liegt und nicht am Bildschirm hängt. */
.sus-nav{list-style:none;display:flex;align-items:center;gap:3px;margin:0;padding:0;flex-wrap:nowrap}
.sus-nav > li > a,.sus-nav > li > button{white-space:nowrap}
.sus-nav > li{position:relative}
.sus-nav > li > a,.sus-nav > li > button{display:inline-flex;align-items:center;gap:6px;padding:8px 9px;
  font:inherit;font-size:15.5px;font-weight:550;color:var(--ink-2);background:none;border:0;cursor:pointer;
  text-decoration:none;position:relative;transition:color var(--schnell)}
/* Kein Pillenhintergrund beim Überfahren. Ein Strich unter dem Wort zeigt
   dasselbe an, verschiebt nichts und lärmt nicht. */
.sus-nav > li > a::after,.sus-nav > li > button::after{content:"";position:absolute;left:9px;right:9px;
  bottom:2px;height:2px;background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform var(--schnell)}
.sus-nav > li > a:hover,.sus-nav > li > button:hover,.sus-nav > li.offen > button{color:var(--ink);text-decoration:none}
.sus-nav > li > a:hover::after,.sus-nav > li > button:hover::after,
.sus-nav > li.offen > button::after{transform:scaleX(1)}
.sus-nav > li.current-menu-item > a{color:var(--ink)}
.sus-nav > li.current-menu-item > a::after{transform:scaleX(1);background:var(--brand)}
.sus-nav > li > button svg{width:10px;height:6px;transition:transform var(--schnell)}
.sus-nav > li.offen > button svg{transform:rotate(180deg)}

/* Ausklappliste: Einsatzbereich, Bauform, Größe — die Struktur des Katalogs. */
.sus-nav ul{position:absolute;top:calc(100% + 8px);left:0;min-width:272px;background:#fff;
  border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:8px;margin:0;
  list-style:none;display:none;z-index:80}
.sus-nav > li.offen > ul{display:block}
.sus-nav ul a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 13px;
  border-radius:var(--r-sm);color:var(--ink);font-size:15.5px;font-weight:500;text-decoration:none}
.sus-nav ul a::after{display:none}
.sus-nav ul a:hover{background:var(--paper-2);text-decoration:none}
.sus-nav ul a span{color:var(--ink-3);font-size:13.5px;font-variant-numeric:tabular-nums}

/* Suchüberlagerung */
.sus-suchlage{display:none}
html:not(.js) .sus-suchlage{display:block;border-bottom:2px solid var(--line);background:var(--paper)}
html:not(.js) .sus-suchlage .feld{max-width:var(--wrap);margin:0 auto;padding:12px clamp(16px,4vw,32px)}
.js .sus-suchlage{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--ink) 42%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:flex-start;justify-content:center}
.js .sus-suchlage.auf{display:flex;animation:sus-auf .18s ease}
@keyframes sus-auf{from{opacity:0}to{opacity:1}}
.js .sus-suchlage .feld{display:flex;align-items:center;gap:10px;width:min(720px,calc(100% - 28px));
  margin-top:clamp(48px,12vh,140px);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:10px}
.sus-suche{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--paper-2);
  border:2px solid var(--line);border-radius:var(--pill);padding:3px 6px 3px 16px;position:relative;
  transition:border-color var(--schnell),background var(--schnell)}
.sus-suche:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--brand-tint)}
.sus-suche .lupe{width:18px;height:18px;flex:none;color:var(--ink-3)}
.sus-suche input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16.5px;padding:11px 0;outline:none}
.sus-suche button[type=submit]{border:0;background:var(--ink);color:#fff;border-radius:var(--pill);
  padding:10px 20px;font:inherit;font-weight:600;cursor:pointer;transition:background var(--schnell)}
.sus-suche button[type=submit]:hover{background:var(--brand)}
.sus-suchzu{flex:none;width:40px;height:40px;display:grid;place-items:center;background:none;border:0;
  border-radius:var(--pill);cursor:pointer;color:var(--ink-3)}
.sus-suchzu:hover{background:var(--paper-2);color:var(--ink)}
.sus-suchzu svg{width:18px;height:18px}
html:not(.js) .sus-suchzu{display:none}
body.sus-fixiert{overflow:hidden}

/* ── 5 Bausteine ─────────────────────────────────────────────────────────── */
.sus-btn,.sus-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:9px;font:inherit;font-weight:600;
  border-radius:var(--pill);padding:13px 26px;border:2px solid transparent;cursor:pointer;text-decoration:none;
  background:var(--ink);color:#fff;
  transition:transform var(--schnell),background var(--schnell),border-color var(--schnell),box-shadow var(--schnell)}
.sus-btn:hover,.sus-cta:hover{background:var(--brand);color:#fff;text-decoration:none;transform:translateY(-1px);
  box-shadow:0 10px 24px -10px var(--brand)}
.sus-btn:active,.sus-cta:active{transform:translateY(0)}
.sus-cta.akzent{background:var(--brand)}
.sus-cta.akzent:hover{background:var(--brand-h)}
.sus-cta.hell,.sus-btn.hell{background:#fff;color:var(--ink);border-color:var(--line)}
.sus-cta.hell:hover,.sus-btn.hell:hover{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:none}

.sus-chips{display:flex;flex-wrap:wrap;gap:6px}
.sus-chip{font-size:12.5px;line-height:1.6;border:2px solid var(--line);border-radius:var(--pill);padding:3px 11px;
  color:var(--ink-2);background:#fff;text-decoration:none;transition:border-color var(--schnell),color var(--schnell)}
a.sus-chip:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.sus-chip.model{border-color:transparent;background:var(--brand-tint);color:var(--brand);font-weight:650}

.sus-msg{border-radius:var(--r);padding:13px 17px;margin:0 0 20px;font-size:15.5px}
.sus-msg.ok{background:var(--mint-tint);border:0;color:#046B4F}
.sus-msg.err{background:var(--signal-tint);border:0;color:#9C2A0E}
.sus-note{font-size:13.5px;color:var(--ink-3);margin:10px 0 0}
/* Hält eine Wortgruppe zusammen, damit sie nicht mitten in der Aussage
   umbricht. Sparsam einsetzen: Auf sehr schmalen Geräten kann eine zu lange
   Gruppe die Zeile über den Rand schieben. */
.sus-zusammen{white-space:nowrap}
/* Der Hinweis unter den drei Wegen klebte an den Karten. Fünf Pixel Luft. */
.sus-wege + .sus-note{padding-top:5px}
.sus-unverified{color:var(--ink-3);font-style:italic}
.sus-count{color:var(--ink-3);font-size:14.5px;margin:0 0 20px}

.sus-block{padding:clamp(52px,6.5vw,96px) 0 0}
.sus-block.grau{background:var(--paper-2);padding-bottom:clamp(52px,6.5vw,96px);margin-top:clamp(52px,6.5vw,96px);
  border-block:2px solid var(--line)}
.sus-block.dunkel{background:var(--ink);color:#fff;padding-bottom:clamp(52px,6.5vw,96px);margin-top:clamp(52px,6.5vw,96px)}
.sus-block.dunkel h2{color:#fff}
.sus-block.dunkel .lead,.sus-block.dunkel .sus-note{color:#A9A9BB}
/* „ABLAUF" WAR AUF SCHWARZ KAUM ZU LESEN.
   Die Augenbraue trug #55555F — auf dem hellen Grund richtig, auf dem dunklen
   ein Kontrast von 1,6:1, also praktisch unsichtbar. Auf #0B0B0F ergibt
   #B9B9CA rund 9,7:1. Dasselbe gilt für die Unterzeile eines dunklen
   Abschnitts, falls dort einmal eine steht. */
.sus-block.dunkel .sus-eyebrow{color:#B9B9CA}
.sus-block.dunkel header p,.sus-block.dunkel .sus-vorteile-kopf p{color:#A9A9BB}

/* WHITE-LABEL-BAHN: kurz gehalten, Gerät ragt hinaus.
   Die graue Bahn war so hoch wie das Gerät und wirkte dadurch leer. Jetzt ist
   sie deutlich flacher; das Gerät steht oben und unten über ihre Kante hinaus
   und wirkt dadurch grösser, ohne es zu sein. Der eingesparte Platz kommt als
   Abstand zu den Nachbarabschnitten zurück (margin-block).
   Nur ab 900 px: Darunter stehen Text und Gerät untereinander, ein Überstand
   liefe dort in die Nachbartexte. */
@media (min-width:900px){
  .sus-block.grau.weisslabel{padding-top:52px;padding-bottom:52px;
    /* Oben und unten gleich viel Luft. Gemessen war es das nicht: Über der Bahn
       lagen 150 px Aussenabstand, darunter 150 px plus die 96 px Innenabstand
       des Folgeabschnitts — also 246 statt 150. Der Überstand des Geräts
       (86 px) frisst davon auf beiden Seiten gleich viel. */
    margin-top:clamp(96px,10vw,150px);margin-bottom:clamp(48px,5vw,80px);
    /* Kante weg: Das Gerät liegt im Modus multiply auf dem Untergrund, also
       schien die 2-Pixel-Linie quer durch den Bildschirm hindurch. Gemessen an
       der ausgelieferten Seite — sah aus wie ein Darstellungsfehler.
       Die graue Bahn grenzt sich auch ohne Linie deutlich genug ab. */
    border-block:0}
  /* Ohne Platte: Was übersteht, soll das GERÄT sein, kein grauer Kasten.
     Der weisse Rand des Renderings verschwindet dank multiply auf beiden
     Untergründen — auf der grauen Bahn wie auf dem weissen Papier. */
  .sus-block.grau.weisslabel .sus-labeldemo{background:transparent;padding:0;
    margin-top:-140px;margin-bottom:-140px}
  .sus-block.grau.weisslabel + .sus-block{padding-top:clamp(40px,4.5vw,70px)}
}
/* Der Begleitsatz rechts stand am unteren Rand der Überschrift und wirkte
   abgesackt. Auf einer Linie mit der Überschriftengruppe liest er sich als
   Zusatz und nicht als Fussnote. */
.sus-block > .sus-wrap > header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.sus-block header p{margin:0;color:var(--ink-3);font-size:15.5px;max-width:52ch}

/* ── 6 Startseite ────────────────────────────────────────────────────────── */
.sus-hero{position:relative;overflow:hidden;background:
  radial-gradient(80rem 38rem at 88% -12%, var(--brand-tint) 0%, transparent 62%),
  radial-gradient(56rem 32rem at 2% 112%, var(--butter-tint) 0%, transparent 58%), var(--paper)}
.sus-hero .sus-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,60px);align-items:center;
  padding-block:clamp(44px,6vw,88px)}
.sus-hero .lead{max-width:48ch;margin-bottom:28px}
.sus-hero .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
/* Der Abschnitt White Label nutzt dieselbe Klasse, hat aber keinen eigenen
   Randabstand nach unten. Bewusst auf `.sus-block` eingegrenzt: Der
   Cookie-Hinweis trägt ebenfalls ein `.knoepfe`, und dessen Abstände und
   Umbruchverhalten sind eine eigene, schon getroffene Entscheidung. */
.sus-block .knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.sus-hero .fakten{display:flex;gap:clamp(18px,3vw,42px);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.sus-hero .fakten strong{display:block;font-family:var(--f-display);font-size:clamp(23px,2.3vw,31px);letter-spacing:-.03em;line-height:1.15}
.sus-hero .fakten li{font-size:13.5px;color:var(--ink-3)}
.sus-hero .bild{position:relative;margin:0}
/* Die Geräte stehen im Bild mit viel Luft nach oben. Ein leichtes Vergrössern
   um den Bildmittelpunkt lässt sie höher und präsenter wirken, ohne dass etwas
   abgeschnitten wird — die Freistellung bringt den Rand ohnehin nicht mit. */
.sus-hero .bild img{display:block;width:100%;border-radius:var(--r-xl);
  transform:scale(1.07);transform-origin:50% 44%}
/* Das Schild sitzt mittig über der schwarzen Gehäusefläche der Stelen —
   dort steht es ruhig und ist lesbar. Am linken Rand hing es vorher halb
   über dem hellen Hintergrund und halb daneben. */
.sus-hero-badge{position:absolute;bottom:27%;left:41%;transform:translateX(-50%);
  background:#fff;border-radius:var(--pill);padding:10px 18px;white-space:nowrap;
  box-shadow:var(--sh-3);font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px}
.sus-hero-badge i{width:9px;height:9px;border-radius:50%;background:var(--mint);display:block}

/* Banderole: eine Spur aus zwei identischen Sätzen, die um genau die halbe
   Spurbreite wandert — dadurch ist die Schleife nahtlos, ohne Sprung. */
.sus-banderole{border-block:2px solid var(--line);background:#fff;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sus-banderole .spur{display:flex;width:max-content;animation:sus-band 52s linear infinite}
.sus-banderole:hover .spur{animation-play-state:paused}
.sus-banderole .satz{display:flex;align-items:center;padding-block:15px}
.sus-banderole .wort{font-size:12.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.sus-banderole .punkt{color:var(--brand);opacity:.55;padding:0 clamp(16px,2.4vw,34px);font-size:13.5px}
@keyframes sus-band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* Ohne Bewegung: stehend und mittig — die Variante, die sonst zu leer wirkte,
     ist mit Zentrierung genau richtig. */
  .sus-banderole{-webkit-mask-image:none;mask-image:none}
  .sus-banderole .spur{animation:none;width:100%;justify-content:center}
  .sus-banderole .satz{flex-wrap:wrap;justify-content:center;max-width:var(--wrap);margin:0 auto;padding-inline:24px}
  .sus-banderole .satz + .satz{display:none}
}

.sus-usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.sus-usp > div{background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  transition:transform var(--schnell),box-shadow var(--schnell),border-color var(--schnell)}
.sus-usp > div:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.sus-usp .ikon{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:16px}
.sus-usp > div:nth-child(4n+1) .ikon{background:var(--brand-tint);color:var(--brand)}
.sus-usp > div:nth-child(4n+2) .ikon{background:var(--mint-tint);color:#046B4F}
.sus-usp > div:nth-child(4n+3) .ikon{background:var(--butter-tint);color:#8A5A00}
.sus-usp > div:nth-child(4n+4) .ikon{background:var(--signal-tint);color:#B23417}
.sus-usp .ikon svg{width:22px;height:22px}
.sus-usp b{display:block;font-family:var(--f-display);font-size:17.5px;letter-spacing:-.02em;margin-bottom:5px}
.sus-usp p{margin:0;color:var(--ink-2);font-size:15.5px}

.sus-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
/* Sechs Bauformen füllen 3 × 2 vollständig. Bei vier Spalten blieben in der
   zweiten Zeile zwei Lücken — das las sich wie ein Fehler, nicht wie ein Raster. */
@media (min-width:1000px){.sus-kacheln.drei{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px) and (max-width:999px){.sus-kacheln.drei{grid-template-columns:repeat(2,1fr)}}
/* Acht Einsatzbereiche gehen als 2 × 4 restlos auf — drei Spalten liessen in
   der dritten Zeile zwei Luecken. Am 18.08. ausdruecklich so entschieden;
   die Bauformen bleiben bei drei, weil dort sechs Kacheln stehen. */
@media (min-width:1000px){.sus-kacheln.vier{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:999px){.sus-kacheln.vier{grid-template-columns:repeat(2,1fr)}}
.sus-kachel{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform var(--schnell),box-shadow var(--schnell),border-color var(--schnell)}
.sus-kachel:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent;color:inherit;text-decoration:none}
.sus-kachel .bild{aspect-ratio:4/3;background:var(--paper-2);display:grid;place-items:center;overflow:hidden}
.sus-kachel .bild img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.sus-kachel:hover .bild img{transform:scale(1.045)}
.sus-kachel .txt{padding:16px 18px 18px}
.sus-kachel .n{font-weight:650;display:block;letter-spacing:-.01em}
.sus-kachel .c{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Nutzenzeile auf der Einsatzkachel: der halbe Satz zwischen Name und
   Stueckzahl. Zwei Zeilen Hoehe reichen; laengeres wird abgeschnitten, damit
   die Kacheln im Raster gleich hoch bleiben. */
.sus-kachel .u{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:5px 0 7px;font-size:13.5px;line-height:1.42;color:var(--ink-2)}
.sus-kachel .zahl{display:block;font-family:var(--f-display);font-size:30px;letter-spacing:-.03em;color:var(--brand);line-height:1.1}

.sus-schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;list-style:none;margin:0;padding:0;counter-reset:s}
.sus-schritte li{counter-increment:s;background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.sus-block.dunkel .sus-schritte li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.sus-schritte li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:var(--pill);
  background:var(--brand);color:#fff;font-family:var(--f-display);font-weight:700;font-size:16.5px;margin-bottom:14px}
.sus-schritte strong{display:block;margin-bottom:5px;font-family:var(--f-display);font-size:17.5px;letter-spacing:-.02em}
.sus-schritte p{margin:0;color:var(--ink-2);font-size:15.5px}
.sus-block.dunkel .sus-schritte p{color:#A9A9BB}

.sus-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.sus-labeldemo{position:relative;border-radius:var(--r-xl);background:var(--paper-2);padding:22px;display:grid;place-items:center}

/* WARUM EIN AUSSCHNITTFENSTER STATT „Bild einfach grösser"
   Das Rendering ist 1200 × 1200 Pixel gross, das Gerät steht darin aber schmal
   und hoch: gemessen belegt es nur die Spalte von 435 bis 771 Pixel, also
   28 % der Bildbreite, und reicht von 12 % bis 87 % der Bildhöhe. Formatfüllend
   eingesetzt bleibt davon ein Streifen von rund 140 Pixeln übrig — das Gerät
   sah winzig aus, das Schild lag breiter als die Stele.
   Deshalb ist .geraet ein Fenster im Hochformat. Das Bild wird darin auf 233 %
   der Fensterbreite vergrössert; der weisse Rand links und rechts fällt weg,
   das Gerät wird knapp doppelt so gross. Die Höhe ist so gewählt, dass das
   Gerät (75,5 % der Bildhöhe) oben wie unten noch Luft behält. */
.sus-labeldemo .geraet{position:relative;display:block;width:min(100%,430px);
  aspect-ratio:43/80;overflow:hidden;line-height:0}
.sus-labeldemo img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:233%;max-width:none;height:auto;display:block;mix-blend-mode:multiply}
/* Freigestelltes Bild: nichts verrechnen. Die Verrechnung war nur der Notbehelf
   gegen den weissen Bildhintergrund; sie färbt aber auch das Gerät selbst ein
   und erzeugt an der Kante der grauen Bahn eine sichtbare Stufe. */
.sus-labeldemo.freigestellt img{mix-blend-mode:normal}

/* Das mitgelieferte Themebild ist bereits auf das Gerät zugeschnitten: 620 ×
   1629 Pixel, die Stele füllt 94 % der Bildbreite. Ausschnittfenster und
   233-%-Zoom von oben sind dafür gerade falsch — sie waren der Notbehelf für
   ein quadratisches Rendering mit viel weisser Luft. Hier gilt: Bild = Fenster;
   das Seitenverhältnis liefert die Vorlage selbst (--bildverhaeltnis).
   Gemessen: Die blanke schwarze Blende reicht von 59 % bis 92 % der Bildhöhe,
   ihre Mitte liegt bei 76 % — genau dort sitzt das Schild ohnehin schon. */
.sus-labeldemo.zugeschnitten .geraet{width:min(100%,300px);aspect-ratio:var(--bildverhaeltnis,620/1629)}
.sus-labeldemo.zugeschnitten img{width:100%;transform:translate(-50%,-50%)}

/* Rundes Schild auf der schwarzen Gehäusefläche — so, wie ein aufgebrachtes
   Logo auf der Blende säße. Über dem Bildschirm hing es vorher im Motiv.
   Gemessen am Rendering: Die schwarze Fläche reicht von 56 % bis 87 % der
   Bildhöhe, ihre Mitte liegt bei 71 %. Weil das Bild im Fenster nach oben und
   unten übersteht, entspricht das 76 % der FENSTERhöhe — dort sitzt das Schild.
   Die Breite war zunächst am Sockel bemessen (44 % der Fensterbreite). Auf
   Weisung des Betreibers vom 18.08. sind es 60 % — das Schild ist damit die
   Hauptsache des Bildes und nicht mehr eine Marke am Rand. Die Schriftgrösse
   wächst im gleichen Verhältnis mit (60 ÷ 44 ≈ 1,36), sonst schwimmt der Text
   in einer zu grossen Scheibe. */
.sus-labeldemo .logo{position:absolute;top:76%;left:50%;transform:translate(-50%,-50%);
  width:60%;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;text-align:center;line-height:1.15;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;
  /* Die Scheibe ist auf allen Breiten gleich gross — das Fenster ist bei
     300 Pixeln gedeckelt. Eine Schriftgrösse, die mit der VIEWPORT-Breite
     wächst, blieb deshalb auf dem Telefon am Mindestwert hängen und schwamm
     in einer Scheibe von voller Grösse. 8vw erreicht den Deckel schon bei
     400 Pixeln Fensterbreite — ab da ist die Schrift überall gleich. */
  font-size:clamp(18px,8vw,32px);
  box-shadow:0 18px 44px -14px rgba(11,11,15,.6)}

.sus-ctaband{background:linear-gradient(135deg,var(--brand) 0%,#7B5BFF 52%,var(--signal) 145%);color:#fff;
  border-radius:var(--r-xl);padding:clamp(30px,5vw,58px);display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center}
.sus-ctaband h2{color:#fff;margin-bottom:10px}
.sus-ctaband p{color:rgba(255,255,255,.86);margin:0;max-width:50ch}
/* BEIDE KNÖPFE GLEICH BREIT.
   Vorher standen sie nebeneinander und waren so breit wie ihre Beschriftung —
   „Jetzt Angebot anfragen" ist kürzer als „Display-Finder starten", also
   stufte die Kante ein. Als Spalte untereinander mit `align-items:stretch`
   richtet sich der schmalere am breiteren aus, ganz ohne feste Breite. */
.sus-ctaband .aktionen{display:flex;flex-direction:column;gap:12px;
  align-items:stretch;justify-content:center}
.sus-ctaband .aktionen .sus-cta{justify-content:center;text-align:center}
.sus-ctaband .sus-cta.hell{background:#fff;color:var(--brand);border-color:transparent}
.sus-ctaband .sus-cta.hell:hover{background:#fff;color:var(--brand-h);border-color:transparent}

/* ── 7 Display-Finder ────────────────────────────────────────────────────── */
.sus-finder{background:#fff;border:2px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.sus-finder > header{padding:26px 28px 6px}
.sus-finder .fortschritt{display:flex;gap:6px;margin:18px 0 0}
.sus-finder .fortschritt i{height:4px;flex:1;background:var(--line);border-radius:var(--pill);transition:background var(--schnell)}
.sus-finder .fortschritt i.aktiv{background:var(--brand)}
.sus-finder .schritt{padding:24px 28px 28px;border:0;margin:0;min-width:0}
.sus-finder .schritt[hidden]{display:none}
.sus-finder h3{margin-bottom:4px}
.sus-finder .frage-hinweis{color:var(--ink-3);font-size:14.5px;margin:0 0 18px}
/* Die Unterzeile des Finders erbte `.sus-block header p{max-width:52ch}` und
   brach dadurch nach „sofort" um — „da." stand allein in der zweiten Zeile.
   52 Zeichen sind für einen Fliesstextabsatz richtig, für diesen einen Satz aus
   vier kurzen Sätzen zu eng. Gemessen: 74 Zeichen, also passen 78ch auf eine
   Zeile, ohne dass die Zeile unangenehm lang wird. */
.sus-finder > header .sus-note{max-width:78ch}
.sus-optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:12px}
.sus-option{position:relative;display:block;cursor:pointer;height:100%}
.sus-option input{position:absolute;opacity:0;inset:0;cursor:pointer}
/* MUSS display:block sein: als Inline-Element rendert der Rahmen nur
   Bruchstücke, weil Höhe und Innenabstand im Textfluss nicht greifen. */
.sus-option .inhalt{display:block;height:100%;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;background:#fff;
  transition:border-color var(--schnell),background var(--schnell),transform var(--schnell)}
.sus-option:hover .inhalt{border-color:var(--ink-3);transform:translateY(-2px)}
.sus-option input:checked + .inhalt{border-color:var(--brand);background:var(--brand-tint)}
.sus-option input:focus-visible + .inhalt{outline:3px solid var(--brand);outline-offset:3px}
.sus-option .titel{display:block;font-weight:650;margin-bottom:3px}
.sus-option .text{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.45}
.sus-finder .navi{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.sus-finder .ergebnis{padding:26px 28px 30px;background:var(--paper-2);border-top:2px solid var(--line)}
.sus-finder .ergebnis[hidden]{display:none}
.sus-finder .ergebnis ul{margin:14px 0 20px;padding-left:20px;color:var(--ink-2);font-size:15.5px}
.sus-finder .ergebnis li{margin-bottom:6px}
.sus-finder .treffer{font-family:var(--f-display);font-size:42px;letter-spacing:-.035em;color:var(--brand);line-height:1}

/* ── 8 Katalog ───────────────────────────────────────────────────────────── */
.sus-kopfzeile{background:var(--paper-2);border-bottom:2px solid var(--line);padding:30px 0 28px;margin-bottom:32px}
.sus-krumen{font-size:13.5px;color:var(--ink-3);margin:0 0 10px}
.sus-krumen a{color:var(--ink-3)}
.sus-kopfzeile h1{margin:0}
.sus-kopfzeile p{margin:10px 0 0;color:var(--ink-2);max-width:70ch}
/* Einleitung eines Bereichs (09.09.): ein Satz Einordnung, dann Punkte.
   Der Fliesstext davor war richtig, aber er kam als Wand — sechs Sätze, die
   niemand zu Ende liest, bevor er zu den Geräten will. Die Punkte tragen
   dieselbe Aussage und sind in einem Blick erfasst. */
.sus-kopfzeile .sus-einleitung{max-width:70ch}
.sus-kopfzeile .sus-einleitung ul{margin:13px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.sus-kopfzeile .sus-einleitung li{position:relative;padding-left:21px;color:var(--ink-2);line-height:1.55}
.sus-kopfzeile .sus-einleitung li::before{content:"";position:absolute;left:2px;top:.6em;
  width:7px;height:7px;border-radius:50%;background:var(--brand)}
/* Der Weg zu den Geräten. Er steht hier, weil Filter und Ergebnisliste
   UNTER der Einleitung liegen und wer nur den Text sieht, nicht weiss,
   dass darunter etwas kommt. */
.sus-sprung{margin:18px 0 0}
.sus-sprung a{display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--brand);
  text-decoration:none}
.sus-sprung a:hover{text-decoration:underline}

.sus-layout{display:grid;grid-template-columns:262px 1fr;gap:36px;align-items:start}
/* Der Abstand war für die frühere zweizeilige Kopfleiste gerechnet (150 px)
   und blieb nach deren Umbau als Loch stehen. Jetzt: gemessene Kopfhöhe
   plus ein Handbreit Luft. */
.sus-filters{position:sticky;top:calc(var(--kopfhoehe) + 16px);border:2px solid var(--line);
  border-radius:var(--r-lg);padding:20px;background:#fff;
  max-height:calc(100vh - var(--kopfhoehe) - 40px);overflow:auto}
.sus-facet{margin-bottom:20px}
.sus-facet h3{margin:0 0 9px;font-family:var(--f-text);font-size:12.5px;font-weight:650;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3)}
.sus-facet label{display:flex;align-items:center;gap:10px;font-size:14.5px;padding:4px 0;cursor:pointer;
  border-radius:8px;transition:color var(--schnell)}
.sus-facet label.is-empty{opacity:.4;cursor:default}
.sus-facet label:hover:not(.is-empty){color:var(--brand-h)}
.sus-facet .c{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:13.5px}
.sus-filters .sus-btn{width:100%}

/* ── Ankreuzfelder ────────────────────────────────────────────────────────
   Das Feld des Betriebssystems ist auf jeder Plattform anders gross, anders
   rund und anders blau; `accent-color` färbt es nur ein. Hier wird es mit
   appearance:none abgeschaltet und selbst gezeichnet — ein Kasten mit
   2 Pixel Rand wie alles andere auf dieser Seite, das Häkchen als
   clip-path-Form, die beim Ankreuzen aufskaliert.
   Wichtig: Es bleibt ein echtes <input type="checkbox">. Beschriftung,
   Tastaturbedienung, Pflichtfeldprüfung und Screenreader ändern sich nicht. */
.sus-facet input[type=checkbox],
.sus-form .haken input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  /* padding:0 ist Pflicht, nicht Kosmetik: In den Formularen gilt
     `.sus-form input{padding:11px 13px}`. Mit box-sizing:border-box kann eine
     Breite von 19 px den Innenabstand nicht unterschreiten — gemessen wurden
     daraus 30 × 26 px, also ein schiefes Rechteck statt eines Quadrats. */
  padding:0;
  width:19px;height:19px;border:2px solid #C3C3D3;border-radius:6px;background:#fff;
  display:inline-grid;place-content:center;cursor:pointer;
  transition:background-color var(--schnell),border-color var(--schnell),box-shadow var(--schnell)}
.sus-facet input[type=checkbox]::after,
.sus-form .haken input[type=checkbox]::after{
  content:'';width:11px;height:11px;background:#fff;transform:scale(0);
  transition:transform var(--schnell);
  clip-path:polygon(14% 46%,0 62%,40% 100%,100% 20%,86% 6%,38% 70%)}
.sus-facet input[type=checkbox]:checked,
.sus-form .haken input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
.sus-facet input[type=checkbox]:checked::after,
.sus-form .haken input[type=checkbox]:checked::after{transform:scale(1)}
.sus-facet label:hover input[type=checkbox]:not(:disabled):not(:checked),
.sus-form .haken:hover input[type=checkbox]:not(:checked){border-color:var(--brand)}
.sus-facet input[type=checkbox]:focus-visible,
.sus-form .haken input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 4px var(--brand-tint)}
.sus-facet input[type=checkbox]:disabled{background:var(--paper-2);border-color:var(--line);cursor:default}

/* ── Bildlaufleiste der Filterspalte ──────────────────────────────────────
   Sie war immer sichtbar und breit. Jetzt liegt sie unsichtbar bereit und
   erscheint erst, wenn die Spalte überfahren oder mit der Tastatur betreten
   wird. Der Platz bleibt reserviert, damit beim Erscheinen nichts springt. */
.sus-filters{scrollbar-width:thin;scrollbar-color:transparent transparent;
  scrollbar-gutter:stable;transition:scrollbar-color .28s ease}
.sus-filters:hover,.sus-filters:focus-within{scrollbar-color:#CFCFDA transparent}
.sus-filters::-webkit-scrollbar{width:10px}
.sus-filters::-webkit-scrollbar-track{background:transparent}
.sus-filters::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;
  border:3px solid transparent;background-clip:content-box;transition:background-color .28s ease}
.sus-filters:hover::-webkit-scrollbar-thumb,
.sus-filters:focus-within::-webkit-scrollbar-thumb{background:#CFCFDA;background-clip:content-box}
.sus-filters::-webkit-scrollbar-thumb:hover{background:#AEAEC0;background-clip:content-box}

.sus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px}
/* ZWEI SPALTEN AUF DEM ARCHIV (Wunsch vom 18.08.).
   Bei drei Karten neben der Filterleiste war jedes Produktbild rund 230 Pixel
   breit — bei Geräten, deren Unterschied genau im Bild liegt, zu wenig. Zwei
   Spalten geben knapp 350 und machen aus der Liste eine Ansicht.
   Erst ab 900px, darunter bleibt es beim automatischen Umbruch. */
@media (min-width:900px){.sus-grid.zwei{grid-template-columns:repeat(2,1fr)}}
/* Und nirgends mehr vier nebeneinander: Ab drei Spalten bleibt vom Bild genug
   übrig, ab vier wird es zur Briefmarke. */
@media (min-width:900px){.sus-grid.drei{grid-template-columns:repeat(3,1fr)}}
.sus-card{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform var(--schnell),box-shadow var(--schnell),border-color var(--schnell)}
.sus-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.sus-card .ph{aspect-ratio:4/3;background:var(--paper-2);display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:13.5px;overflow:hidden}
.sus-card .ph img{width:100%;height:100%;object-fit:contain;padding:14px;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.sus-card:hover .ph img{transform:scale(1.05)}
.sus-card .ph:has(img){background:#fff}
.sus-card .b{padding:17px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.sus-card h2{margin:0;font-size:17.5px;letter-spacing:-.02em;line-height:1.25}
.sus-card h2 a{color:inherit;text-decoration:none}
.sus-card h2 a:hover{color:var(--brand)}
.sus-card .mehr{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--brand);text-decoration:none}

/* ── 9 Produktseite ──────────────────────────────────────────────────────── */
.sus-detail{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.sus-buehne{border:2px solid var(--line);border-radius:var(--r-xl);background:#fff;overflow:hidden}
.sus-buehne img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;padding:22px;cursor:zoom-in}
.sus-buehne .leer{aspect-ratio:4/3;display:grid;place-items:center;color:var(--ink-3);font-size:14.5px;background:var(--paper-2)}
.sus-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;margin-top:12px}
.sus-galerie button{padding:0;border:2px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;
  cursor:pointer;aspect-ratio:1;transition:border-color var(--schnell)}
.sus-galerie button[aria-current="true"]{border-color:var(--brand)}
.sus-galerie img{width:100%;height:100%;object-fit:cover;display:block}
.sus-bildhinweis{font-size:12.5px;color:var(--ink-3);margin:12px 0 0;border-left:2px solid var(--line);padding-left:12px}

.sus-spec{margin-top:36px}
.sus-spec h3{margin:26px 0 8px;font-family:var(--f-text);font-size:12.5px;font-weight:650;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3)}
.sus-spec table{width:100%;border-collapse:collapse;font-size:15.5px}
.sus-spec th{text-align:left;font-weight:500;color:var(--ink-3);padding:9px 16px 9px 0;width:44%;vertical-align:top}
.sus-spec td{padding:9px 0;border-bottom:2px solid var(--line-2)}

/* ── 10 Konfigurator ─────────────────────────────────────────────────────── */
.sus-konfig{position:sticky;top:calc(var(--kopfhoehe) + 16px);border:2px solid var(--line);
  border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-2);overflow:hidden}
.sus-konfig > header{padding:20px 22px;border-bottom:2px solid var(--line-2);
  background:linear-gradient(135deg,var(--brand-tint),var(--paper-2))}
.sus-konfig > header strong{font-family:var(--f-display);font-size:17.5px;letter-spacing:-.02em}
.sus-konfig > header p{margin:3px 0 0;font-size:13.5px;color:var(--ink-3)}
.sus-form{padding:20px 22px 22px}
.sus-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:15px 0 6px}
.sus-form input,.sus-form select,.sus-form textarea{width:100%;padding:11px 13px;border:2px solid var(--line);
  border-radius:var(--r-sm);font:inherit;font-size:15.5px;background:#fff;color:var(--ink);transition:border-color var(--schnell)}
.sus-form input:focus,.sus-form select:focus,.sus-form textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-tint)}
.sus-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sus-form .sus-btn{width:100%;margin-top:20px}
.sus-form fieldset{border:0;padding:0;margin:0}
/* Keine Trennlinien zwischen den Feldgruppen. Der Konfigurator sah dadurch
   aus wie ein Formular aus mehreren Teilen; das Beratungsformular kommt ohne
   sie aus und liest sich ruhiger. Der Abstand macht die Gliederung. */
.sus-form .gruppe{margin-top:4px}
.sus-form .gruppe:first-of-type{margin-top:0}
.sus-form .gruppe > label:first-child{margin-top:15px}
.sus-konfig .hinweis{margin:14px 0 0;font-size:13.5px;color:var(--warn);background:var(--butter-tint);
  border-radius:var(--r-sm);padding:10px 13px}
.sus-konfig .kaution{margin:14px 0 0;font-size:13.5px;color:var(--ink-2);background:var(--paper-2);
  border-radius:var(--r-sm);padding:11px 13px}
.sus-konfig .zeitraum[hidden]{display:none}

/* ── 11 Kundenbereich ────────────────────────────────────────────────────── */
.woocommerce-account .sus-main{padding-top:28px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:8px;border:2px solid var(--line);
  border-radius:var(--r-lg);background:#fff}
.woocommerce-MyAccount-navigation a{display:flex;align-items:center;gap:11px;padding:11px 14px;color:var(--ink);
  font-size:15.5px;border-radius:var(--r-sm);text-decoration:none}
.woocommerce-MyAccount-navigation svg{width:18px;height:18px;flex:none;color:var(--ink-3)}
.woocommerce-MyAccount-navigation a:hover{background:var(--paper-2)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--brand-tint);color:var(--brand);font-weight:650}
.woocommerce-MyAccount-navigation .is-active svg{color:var(--brand)}
.sus-konto-gruss{font-size:16.5px;color:var(--ink-2);margin:0 0 20px}
.sus-konto-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.sus-konto-kacheln .sus-kachel .txt{padding:20px}
.sus-konto-kacheln .zahl{display:block;font-family:var(--f-display);font-size:32px;letter-spacing:-.035em;
  color:var(--brand);line-height:1.05}
.sus-konto-kacheln .n{font-weight:650;display:block;margin-top:3px}
.sus-konto-kacheln .c{font-size:13.5px;color:var(--ink-3)}
.sus-konto-tabelle{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:2px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.sus-konto-tabelle th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  padding:12px 15px;background:var(--paper-2);border-bottom:2px solid var(--line)}
.sus-konto-tabelle td{padding:13px 15px;border-bottom:2px solid var(--line-2);vertical-align:top}
.sus-konto-tabelle tr:last-child td{border-bottom:0}
.sus-status{display:inline-block;font-size:12.5px;font-weight:650;border-radius:var(--pill);padding:3px 11px;
  background:var(--brand-tint);color:var(--brand);white-space:nowrap}
.sus-leer{border:1px dashed var(--line);border-radius:var(--r-lg);padding:32px;text-align:center;color:var(--ink-3);
  background:var(--paper-2)}
.sus-leer strong{display:block;color:var(--ink);margin-bottom:7px;font-family:var(--f-display);font-size:17.5px}

/* ── 12 Rechtstexte ──────────────────────────────────────────────────────── */
.sus-text{max-width:76ch;padding-bottom:48px}
.sus-text h2{margin-top:38px}
.sus-text h3{margin-top:26px}
.sus-text code{background:var(--paper-3);padding:2px 7px;border-radius:6px;font-size:.88em}
.sus-text ul{padding-left:20px}
.sus-pruefpunkt{background:var(--butter-tint);border:0;border-left:3px solid var(--butter);border-radius:var(--r-sm);
  padding:15px 18px;color:#6B4D10}

/* ── 13 Fuß ──────────────────────────────────────────────────────────────── */
.sus-footer{background:var(--ink);color:#9A9AAC;font-size:14.5px}
.sus-footer .spalten{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px;padding-block:52px 40px}
.sus-footer .wortmarke{color:#fff;font-size:21px}
.sus-footer .wortmarke strong{color:#9A87FF}
/* Mit hinterlegter Bilddatei: Die Höhe ist gesetzt, die Breite ergibt sich aus
   dem Seitenverhältnis. `width:auto` ist nötig, weil wp_get_attachment_image
   die echten Pixelmasse als Attribute mitschreibt — ohne das stünde ein 480
   Pixel breites Logo im Fuss. `display:block` nimmt den Zeilenabstand weg, der
   sonst unter dem Bild sitzt (Bilder stehen auf der Schriftlinie). */
.sus-footer .wortmarke.bild{display:block;line-height:0}
.sus-footer .wortmarke.bild img{height:30px;width:auto;max-width:min(240px,100%);display:block}
.sus-footer p{margin:12px 0 0;max-width:40ch}
.sus-footer h3{color:#fff;font-family:var(--f-text);font-size:12.5px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px}
.sus-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sus-footer a{color:#C7C7D6;text-decoration:none}
.sus-footer a:hover{color:#fff;text-decoration:underline}
.sus-footer .fussleiste{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
  border-top:2px solid #1E1E2A;padding-block:18px 26px;font-size:13.5px}
.sus-footer .rechtliches{list-style:none;display:flex;gap:20px;margin:0;padding:0}
/* ── Rechtliches auf schmalen Geräten ─────────────────────────────────────
   Vier deutsche Rechtsbegriffe (Impressum, Datenschutzerklärung, AGB,
   Widerrufsbelehrung) brauchen zusammen rund 430 Pixel. Auf einem 390 Pixel
   breiten Gerät lief die Zeile aus dem Rahmen und zog die ganze Seite in ein
   waagerechtes Scrollen — samt allem, was mit position:fixed daran hängt,
   also auch dem Cookie-Hinweis.
   Jetzt scrollt NUR diese Zeile. Die Bildlaufleiste liegt unsichtbar bereit
   und erscheint beim Berühren, Überfahren oder mit der Tastatur; ein weicher
   Verlauf am rechten Rand zeigt, dass es weitergeht. */
.sus-footer .fussleiste > *{min-width:0}
@media (max-width:760px){
  .sus-footer .fussleiste{flex-wrap:wrap;row-gap:12px}
  .sus-footer .rechtliches{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .28s ease;
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%)}
  .sus-footer .rechtliches li{flex:0 0 auto}
  .sus-footer .rechtliches a{white-space:nowrap}
  .sus-footer .rechtliches:hover,.sus-footer .rechtliches:focus-within,
  .sus-footer .rechtliches:active{scrollbar-color:#4C4C60 transparent}
  .sus-footer .rechtliches::-webkit-scrollbar{height:8px}
  .sus-footer .rechtliches::-webkit-scrollbar-track{background:transparent}
  .sus-footer .rechtliches::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;
    border:2px solid transparent;background-clip:content-box;transition:background-color .28s ease}
  .sus-footer .rechtliches:hover::-webkit-scrollbar-thumb,
  .sus-footer .rechtliches:focus-within::-webkit-scrollbar-thumb,
  .sus-footer .rechtliches:active::-webkit-scrollbar-thumb{background:#4C4C60;background-clip:content-box}
  /* Wer die Zeile mit der Tastatur durchgeht, soll das Ziel auch sehen. */
  .sus-footer .rechtliches a:focus-visible{outline:2px solid #9A87FF;outline-offset:3px;border-radius:4px}
}
.sus-footer .hinweis{color:#FFCB7A}
.sus-consent-oeffnen{background:none;border:0;color:#9A9AAC;font:inherit;font-size:13.5px;padding:0;cursor:pointer;text-decoration:underline}
.sus-consent-oeffnen:hover{color:#fff}

/* ── 14 Overlays ─────────────────────────────────────────────────────────── */
/* Der Hinweis wird an den Rahmen gebunden, nicht an vw: `100vw` zählt die
   Bildlaufleiste mit und war auf dem Telefon regelmässig zu breit. Der
   Innenabstand liegt jetzt am Behälter, die Karte selbst darf nur so breit
   werden, wie darin Platz ist. */
/* LINKSBUENDIG AUF DEM DESKTOP (18.08.).
   Mittig sass der Hinweis genau unter dem Inhalt und wirkte wie ein Teil der
   Seite. An der linken Kante ist er erkennbar eine Einblendung — und er
   verdeckt nicht die Mitte, wo auf jeder Seite der Text steht. */
.sus-consent{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;justify-content:flex-start;
  padding:16px;box-sizing:border-box;pointer-events:none}
.sus-consent .inhalt{pointer-events:auto}
.sus-consent[hidden]{display:none}
.sus-consent .inhalt{background:color-mix(in srgb,#fff 84%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:2px solid rgba(255,255,255,.65);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  /* 350 Pixel auf Wunsch vom 17.08. — vorher 720 —, seit dem 19.08. 355. Der
     Hinweis liest sich damit wie eine Karte und nicht wie ein Balken. Die
     Breite bleibt bei 100 Prozent des Elternkastens, der links und rechts
     schon 16 Pixel Abstand hält; der Deckel begrenzt nur nach oben. Auf dem
     Telefon ändert der Deckel nichts — dort ist die 100-Prozent-Breite die
     kleinere der beiden Angaben. */
  padding:22px 24px;width:100%;max-width:355px;box-sizing:border-box}
.sus-consent h2{font-size:21px;margin:0 0 8px}
.sus-consent p{margin:0 0 16px;font-size:14.5px;color:var(--ink-2)}
.sus-consent .knoepfe{display:flex;gap:10px;flex-wrap:wrap}
/* SEHR SCHMALE GERAETE (< 378px).
   Bei 360 Pixeln standen „Verstanden" und „Nur notwendige" nebeneinander in
   der Karte und wurden dabei so schmal, dass der Text im Knopf umbrach. Ab
   hier bekommt jeder Knopf die ganze Zeile — die Karte wird dadurch eine Zeile
   hoeher, aber beide Knoepfe sind wieder mit dem Daumen zu treffen. */
@media (max-width:377px){
  .sus-consent .knoepfe{flex-direction:column;align-items:stretch}
  .sus-consent .knoepfe .sus-btn,.sus-consent .knoepfe .sus-cta{width:100%}
}
.sus-consent .sus-btn,.sus-consent .sus-cta{padding:11px 20px;font-size:15.5px}

.sus-lightbox{position:fixed;inset:0;z-index:200;background:rgba(11,11,15,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;gap:14px;padding:26px}
.sus-lightbox[hidden]{display:none}
.sus-lightbox figure{margin:0;max-width:min(1100px,88vw);max-height:88vh;display:flex;flex-direction:column;gap:14px}
.sus-lightbox img{max-height:78vh;width:auto;max-width:100%;object-fit:contain;background:#fff;border-radius:var(--r-lg)}
.sus-lightbox figcaption{color:#C4C4D4;font-size:13.5px;text-align:center}
.sus-lightbox button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:var(--pill);width:48px;height:48px;
  font-size:26px;line-height:1;cursor:pointer;flex:none;transition:background var(--schnell)}
.sus-lightbox button:hover{background:rgba(255,255,255,.24)}
.sus-lightbox .schliessen{position:absolute;top:22px;right:26px;width:44px;height:44px}

/* ── 15 Schmalere Bildschirme ────────────────────────────────────────────── */
@media (max-width:1080px){
  .sus-hero .sus-wrap{grid-template-columns:1fr}
  .sus-hero .bild{order:-1;max-width:440px}
  .sus-detail{grid-template-columns:1fr}
  .sus-konfig{position:static}
  .sus-split{grid-template-columns:1fr}
  .sus-ctaband{grid-template-columns:1fr}
  /* Auf dem Telefon nehmen beide die volle Breite — ein halb so breiter Knopf
     neben Weissraum trifft sich mit dem Daumen schlechter. */
  .sus-ctaband .aktionen{justify-content:flex-start}
  .sus-ctaband .aktionen .sus-cta{width:100%}
  .sus-footer .spalten{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  /* Die Navigation wandert unter die Lupe. Die Kopfleiste bleibt EINE Zeile:
     Logo links, Aktionen rechts — sonst wächst sie auf dem Telefon auf drei
     Zeilen und schiebt den Inhalt aus dem Bild. */
  .sus-burger{display:flex}
  .konto .text{display:none}
  .konto{padding:11px}
  .sus-hauptnav{position:absolute;left:0;right:0;top:100%;display:none;background:#fff;
    border-bottom:2px solid var(--line);box-shadow:var(--sh-3);max-height:70vh;overflow:auto;
    margin:0;padding:8px clamp(16px,4vw,32px) 16px;z-index:70}
  .sus-hauptnav.offen{display:block}
  .sus-header{position:sticky}
  .kopf{position:relative}
  .sus-nav{flex-direction:column;align-items:stretch;gap:0}
  .sus-nav > li > a,.sus-nav > li > button{width:100%;justify-content:space-between;padding:13px 4px;
    font-size:16.5px;border-bottom:2px solid var(--line-2)}
  .sus-nav > li > a::after,.sus-nav > li > button::after{display:none}
  .sus-nav > li:last-child > a{border-bottom:0}
  .sus-nav ul{position:static;display:none;box-shadow:none;border:0;border-left:2px solid var(--line);
    border-radius:0;margin:4px 0 10px 10px;padding:0 0 0 8px;min-width:0}
  .sus-nav > li.offen > ul{display:block}

  .sus-layout{grid-template-columns:1fr}
  .sus-filters{position:static;max-height:none;order:2}
  .sus-treffer{order:1}
  /* Ohne Skript bleibt die Filterleiste sichtbar — sie wäre sonst unerreichbar.
     MIT Skript wird sie zum Blatt (Block 29 am Ende der Datei); Aussehen und
     Bewegung stehen dort, nicht hier. Frühere Fassung dieser Stelle:
     `.js .sus-filters.auf{display:block;margin-bottom:24px}` — der Rand schob
     das fest positionierte Blatt um genau diese 24 Pixel vom unteren Rand weg,
     und `display:block` machte aus dem Flex-Aufbau wieder einen Fluss. */
  .sus-filter-schalter{display:inline-flex}
}
@media (max-width:640px){
  .sus-footer .spalten{grid-template-columns:1fr}
  .sus-form .row{grid-template-columns:1fr}
  .sus-topbar .claim{display:none}
  .sus-hero-badge{bottom:27%;left:41%;font-size:13.5px;padding:8px 14px}
  .sus-grid{grid-template-columns:1fr}
  .sus-kopfzeile h1{font-size:clamp(30px,9vw,44px)}
  .sus-werkzeuge{flex-wrap:wrap}
  .sus-filtersuche{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Kacheln auf dunklem Grund: weiße Karten würden dort wie Löcher wirken. */
.sus-block.dunkel .sus-kachel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.sus-block.dunkel .sus-kachel:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.sus-block.dunkel .sus-kachel .n{color:#fff}
.sus-block.dunkel .sus-kachel .c{color:#A9A9BB}
.sus-block.dunkel .sus-kachel .u{color:#C6C6D4}
.sus-block.dunkel .sus-kachel .bild{background:rgba(255,255,255,.05)}

/* ══ Nachbesserungen ══════════════════════════════════════════════════════ */

/* 1 Luft vor dem Fußbereich. Katalog- und Detailseiten endeten bisher
   unmittelbar an der dunklen Fläche.

   ANGEGLICHEN AM 19.08.: Der Abstand ist jetzt derselbe wie der, den
   `.sus-block` nach oben setzt — clamp(52px,6.5vw,96px). Vorher war er eine
   Spur grösser (56px/7vw), und auf der Startseite trug der letzte Abschnitt
   zusätzlich einen eigenen unteren Rand. Beides zusammen ergab unter dem
   Aufrufband fast den doppelten Abstand des darüberliegenden. */
.sus-main{padding-bottom:clamp(52px,6.5vw,96px)}
.sus-main:has(> .sus-block.grau:last-child),
.sus-main:has(> .sus-block.dunkel:last-child){padding-bottom:0}

/* 2 Schmale, ruhige Bildlaufleisten statt der fetten Systemleiste. */
:root{scrollbar-width:thin;scrollbar-color:#C7C7D4 transparent}
.sus-text,.sus-hauptnav.offen{scrollbar-width:thin;scrollbar-color:#C7C7D4 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#C7C7D4;border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#9A9AAC;background-clip:content-box;border:3px solid transparent}

/* 3 Produktkarte: ganze Fläche klickbar, Bild füllt besser, farbige Bildplatte.
   Die Karte bekommt genau EINEN Link — der Titel — und dessen Trefferfläche
   wird über die ganze Karte gezogen. So bleibt sie für Screenreader ein Link
   statt drei. */
.sus-card{position:relative}
.sus-card h2 a::after{content:"";position:absolute;inset:0;z-index:2}
.sus-card .ph{aspect-ratio:4/5;padding:0;position:relative}
.sus-card .ph img{padding:18px 16px}
.sus-card .ph:has(img){background:var(--paper-2)}
.sus-card:nth-child(5n+1) .ph:has(img){background:linear-gradient(160deg,var(--brand-tint),#fff 78%)}
.sus-card:nth-child(5n+2) .ph:has(img){background:linear-gradient(160deg,var(--mint-tint),#fff 78%)}
.sus-card:nth-child(5n+3) .ph:has(img){background:linear-gradient(160deg,var(--butter-tint),#fff 78%)}
.sus-card:nth-child(5n+4) .ph:has(img){background:linear-gradient(160deg,var(--signal-tint),#fff 78%)}
.sus-card:nth-child(5n+5) .ph:has(img){background:linear-gradient(160deg,var(--paper-3),#fff 78%)}
.sus-card .groesse{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);border-radius:var(--pill);padding:4px 11px;font-size:12.5px;font-weight:650;
  letter-spacing:-.01em;z-index:1}
/* RUNDER TAGESPREIS auf der Kachel.
   Feste Breite UND Höhe plus `border-radius:50%` — ein Kreis, kein Oval, egal
   wie lang der Betrag ist. Der Text ist deshalb dreizeilig und schmal gesetzt;
   „1.234,56 €" passt noch hinein, mehr kostet das Sortiment nicht.
   z-index 1: über dem Bild, aber unter der Klickfläche der Karte (z-index 2) —
   der Aufkleber soll den Link nicht abfangen, er ist keine eigene Schaltfläche. */
.sus-card .rtb-badge{position:absolute;left:12px;bottom:12px;z-index:1;
  width:84px;height:84px;border-radius:50%;background:var(--signal);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-align:center;line-height:1.1;box-shadow:0 10px 24px -10px rgba(255,90,54,.85);
  transition:transform var(--schnell)}
.sus-card .rtb-badge b{font-weight:650;font-size:var(--t-mikro);letter-spacing:.01em;opacity:.9}
.sus-card .rtb-badge strong{font-family:var(--f-display);font-weight:800;
  font-size:var(--t-titel);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sus-card:hover .rtb-badge{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.sus-card:hover .rtb-badge{transform:none}}
/* Auf sehr schmalen Kacheln würde der Kreis das Gerät verdecken. */
@media (max-width:420px){.sus-card .rtb-badge{width:72px;height:72px}}

/* Legende unter der Ergebnisliste (09.09.). Sie löst den Aufkleber auf.
   Der Punkt trägt dieselbe Farbe wie der Aufkleber — das IST der Bezug,
   deshalb steht dort eine Farbfläche und kein zweites Wort. */
.sus-legende{display:flex;gap:9px;align-items:flex-start;margin:22px 0 0;max-width:78ch;
  font-size:var(--t-klein);line-height:1.55;color:var(--ink-3)}
.sus-legende .punkt{flex:0 0 auto;width:11px;height:11px;margin-top:.42em;border-radius:50%;
  background:var(--signal)}
.sus-legende strong{color:var(--ink-2);font-weight:650}

.sus-card .mehr{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px}
.sus-card .mehr svg{width:14px;height:14px;transition:transform var(--schnell)}
.sus-card:hover .mehr svg{transform:translateX(3px)}
.sus-card:hover{border-color:transparent;box-shadow:var(--sh-3)}
.sus-card:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}

/* 4 Kopfleiste versteckt sich beim Scrollen nach unten und kommt beim
   Hochscrollen zurück — mehr Bildfläche für den Katalog. */
.sus-header{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.sus-header.weg{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.sus-header{transition:none}.sus-header.weg{transform:none}}

/* 5 Kacheln mit Szenenbild: Bild füllt die Fläche, Text liegt darüber. */
.sus-kachel.szene .bild{aspect-ratio:4/3;position:relative}
.sus-kachel.szene .bild img{object-fit:cover;padding:0;width:100%;height:100%}
.sus-kachel.szene .txt{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(11,11,15,.82) 0%,rgba(11,11,15,.45) 55%,transparent 100%)}
.sus-kachel.szene .n{color:#fff}
.sus-kachel.szene .c{color:rgba(255,255,255,.82)}
.sus-kachel.szene .u{color:rgba(255,255,255,.9)}
.sus-kachel.szene{position:relative}

/* Produktbilder liegen auf weissem Grund. Ohne Multiplikation stünde in jeder
   farbigen Karte ein weisses Rechteck — so verschmilzt der Bildhintergrund
   mit der Kachelfarbe. */
.sus-card .ph img,
.sus-kachel:not(.szene) .bild img,
.sus-konto-kacheln .bild img{mix-blend-mode:multiply}

/* ── Livesuche und Livekatalog ─────────────────────────────────────────── */

/* Der Absendeknopf der Filterleiste wird per JavaScript versteckt. `hidden`
   allein reicht nicht, weil .sus-btn ein display setzt. */
[hidden]{display:none !important}

.sus-filtersuche{display:flex;align-items:center;gap:8px;background:var(--paper-2);
  border:2px solid var(--line);border-radius:var(--pill);padding:2px 14px;margin-bottom:18px;
  transition:border-color var(--schnell),box-shadow var(--schnell),background var(--schnell)}
.sus-filtersuche:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--brand-tint)}
.sus-filtersuche svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.sus-filtersuche input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;
  padding:9px 0;outline:none}
.sus-filtersuche input::-webkit-search-cancel-button{cursor:pointer}

#sus-ergebnis{transition:opacity var(--schnell)}
#sus-ergebnis[aria-busy="true"]{opacity:.45}
.sus-count .bereich{color:var(--ink);font-weight:600}
.sus-count strong{color:var(--ink);font-weight:700}

.sus-seiten{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:30px}
.sus-seiten a,.sus-seiten .jetzt{min-width:38px;height:38px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 12px;border-radius:var(--pill);font-size:14.5px;font-weight:600;
  text-decoration:none;border:2px solid var(--line);color:var(--ink-2);background:#fff;
  transition:all var(--schnell)}
.sus-seiten a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.sus-seiten .jetzt{background:var(--ink);border-color:var(--ink);color:#fff}
.sus-seiten .luecke{color:var(--ink-3);padding:0 2px}

/* Vorschläge unter dem Suchfeld der Kopfleiste */
.sus-suche{position:relative}
.sus-vorschlaege{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:6px;max-height:min(70vh,420px);overflow:auto;overscroll-behavior:contain}
.sus-vorschlaege .v{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink)}
.sus-vorschlaege .v:hover,.sus-vorschlaege .v.an{background:var(--brand-tint)}
.sus-vorschlaege .v img,.sus-vorschlaege .v .ph{width:44px;height:44px;flex:none;border-radius:8px;
  object-fit:contain;background:var(--paper-2);padding:3px}
.sus-vorschlaege .txt{display:flex;flex-direction:column;min-width:0}
.sus-vorschlaege .txt strong{font-size:14.5px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sus-vorschlaege .txt small{font-size:12.5px;color:var(--ink-3)}
.sus-vorschlaege .leer{margin:0;padding:14px 12px;font-size:14.5px;color:var(--ink-3)}

/* Technische Bezeichnung neben dem Frontendnamen */
.sus-card .technik{margin:-4px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
/* Einsatz und Nutzen stehen ueber den Chips (Reihenfolge aus dem Audit).
   Beide Zeilen sind knapp: der Einsatz nennt Bereiche, der Nutzen sagt in
   einem Satz, was die Bauform im Alltag bedeutet. Der Kartenabstand (gap:10px
   in .sus-card .b) waere zwischen zwei Textzeilen zu gross — deshalb hier
   negativer Rand statt eines eigenen Rasters. */
.sus-card .einsatz{margin:-3px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink-2);font-weight:600}
.sus-card .nutzen{margin:-6px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.sus-card .technik-chips{margin-top:-2px}
/* PREIS AUF DER KARTE (25.08.)
   Er trägt die Anzeigeschrift, weil er in der Kachel die einzige Zahl ist, die
   man vergleicht — alles andere sind Wörter. „netto" steht daneben in normaler
   Schrift und Grösse: Es gehört dazu, ist aber kein Teil des Betrags. */
.sus-card .preis{margin:-2px 0 0;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-h4);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.sus-card .preis span{font-family:var(--f-text);font-weight:500;font-size:var(--t-mikro);
  letter-spacing:0;color:var(--ink-3)}

/* PREIS AUF DER PRODUKTSEITE
   Grösser als auf der Karte, aber kleiner als die Überschrift — er ist eine
   Angabe zum Gerät, nicht dessen Name. Der Begleitsatz steht als eigene Zeile
   darunter statt in Klammern dahinter: Er nennt drei Dinge, und drei Dinge in
   Klammern liest niemand. */
.sus-preis{margin:16px 0 0;display:flex;flex-direction:column;gap:2px}
.sus-preis strong{font-family:var(--f-display);font-weight:800;font-size:clamp(23px,2.4vw,28px);
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.sus-preis span{font-size:13.5px;line-height:1.45;color:var(--ink-3);max-width:52ch}

/* GERÄTEAUSWAHL IM RECHNER — dieselbe Anmutung wie die Testdauer-Felder,
   damit die beiden Eingaben als Paar lesbar bleiben. */
.sus-rtb select{width:100%;padding:11px 38px 11px 14px;border:2px solid var(--line);
  border-radius:var(--r);background:#fff;font:inherit;font-size:15.5px;color:var(--ink);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2356546A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
.sus-rtb select:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.sus-rtb .feld > .wert{margin-top:10px}
.sus-technik{margin:8px 0 0;font-size:14.5px;color:var(--ink-3)}
.sus-technik strong{color:var(--ink-2);font-weight:650;letter-spacing:.01em}

/* ── Werkzeugzeile, Filterschalter, Rückmeldung, Einwilligung ──────────── */

.sus-werkzeuge{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sus-werkzeuge .sus-filtersuche{flex:1;margin-bottom:0}
.sus-filter-schalter{display:none;align-items:center;gap:8px;flex:none;font:inherit;font-size:15.5px;
  font-weight:600;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:var(--pill);
  padding:11px 18px;cursor:pointer;transition:border-color var(--schnell)}
.sus-filter-schalter:hover{border-color:var(--ink)}
.sus-filter-schalter svg{width:18px;height:18px}
.sus-filter-schalter .zahl{background:var(--brand);color:#fff;border-radius:var(--pill);
  min-width:20px;padding:1px 6px;font-size:12.5px;text-align:center}

/* Rückmeldung nach dem Absenden — deutlich, aber nicht schreiend. */
.sus-hinweis{border-radius:var(--r-lg);padding:18px 22px;margin:24px 0 0;outline:none;
  border-left:4px solid transparent}
.sus-hinweis strong{display:block;font-family:var(--f-display);font-size:21px;letter-spacing:-.02em;
  margin-bottom:4px}
.sus-hinweis p{margin:0;font-size:15.5px}
.sus-hinweis p + p{margin-top:6px}
.sus-hinweis .klein{font-size:13.5px;opacity:.85}
.sus-hinweis.ok{background:var(--mint-tint);border-left-color:var(--mint);color:#04563F}
.sus-hinweis.err{background:var(--signal-tint);border-left-color:var(--signal);color:#8E2409}

/* Einwilligung: das Kästchen bleibt gross genug zum Antippen. */
.sus-form .einwilligung{margin-top:6px}
.sus-form .haken{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:13.5px;line-height:1.55;color:var(--ink-2);cursor:pointer;font-weight:500}
.sus-form .haken input{margin:1px 0 0}
.sus-form .haken a{color:var(--brand)}

/* ── Überlaufschutz ────────────────────────────────────────────────────────
   Erst die Ursachen: Rasterkinder dürfen schrumpfen, lange Zeichenketten
   dürfen umbrechen, Tabellen und Medien bleiben in ihrem Kasten.
   Die letzte Zeile ist eine bewusste Rückfallebene, kein Ersatz dafür. */
.sus-layout > *,.sus-detail > *,.sus-split > *,.sus-treffer,.sus-card .b{min-width:0}
.sus-text,.sus-spec,.sus-hinweis,.sus-card h2,.sus-konto-tabelle{overflow-wrap:anywhere}
img,svg,video,iframe,table{max-width:100%}
/* Tabellen scrollen in einem Rahmen, nicht als Block.
   `display:block` auf der Tabelle selbst löst thead und tbody aus dem
   Tabellenmodell — gemessen am 17.08. im Kundenbereich: Die Kopfzeile
   brach mitten im Wort um („DISPL AY"), die Spalten liefen auseinander. */
.sus-tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sus-tabelle > table{min-width:560px}
html{overflow-x:clip}

/* Diese beiden Regeln stehen bewusst am Dateiende: Sie müssen die
   Grundeinstellungen weiter oben überschreiben, und bei gleicher Spezifität
   gewinnt die spätere Regel. */
@media (max-width:980px){
  .sus-filter-schalter{display:inline-flex}
}
@media (max-width:640px){
  /* Eine Spalte bei voller Breite macht die Karte sonst überlang — man
     scrollt drei Bildschirme für drei Produkte. */
  .sus-card .ph{aspect-ratio:4/3}
  .sus-card .ph img{padding:14px 12px}
}

/* ── Mieten oder kaufen ─────────────────────────────────────────────────── */

.sus-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.sus-weg{display:flex;flex-direction:column;gap:9px;background:#fff;border:2px solid var(--line);
  border-radius:var(--r-lg);padding:24px 24px 20px;text-decoration:none;color:var(--ink);
  transition:transform var(--schnell),box-shadow var(--schnell),border-color var(--schnell)}
.sus-weg:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:transparent;text-decoration:none}
.sus-weg .marke{align-self:flex-start;font-size:12.5px;font-weight:650;letter-spacing:.02em;
  background:var(--brand-tint);color:var(--brand);border-radius:var(--pill);padding:4px 12px}
.sus-weg strong{font-family:var(--f-display);font-size:21px;line-height:1.15;letter-spacing:-.03em}
.sus-weg p{margin:0;font-size:14.5px;color:var(--ink-2)}
.sus-weg .fuss{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:600;color:var(--brand)}
/* ZWEI ZEILEN, NICHT EINE.
   Erst standen Handlung und Anzahl nebeneinander. Bei „Mieten, testen und
   übernehmen" reichte die Kartenbreite nicht: Die Handlung brach um UND die
   Anzahl brach mit („9 / Displays"). Jetzt bekommt die Handlung die ganze
   Zeile, Anzahl und Pfeil stehen darunter — bei allen drei Karten gleich, egal
   wie lang der Wortlaut ist. */
.sus-weg .fuss{flex-wrap:wrap}
.sus-weg .fuss b{flex:0 0 100%;font-weight:650;color:var(--brand)}
.sus-weg .fuss i{font-style:normal;font-weight:500;color:var(--ink-3);
  margin-right:auto;white-space:nowrap}
.sus-weg .fuss svg{width:14px;height:14px;transition:transform var(--schnell)}
.sus-weg:hover .fuss svg{transform:translateX(3px)}
/* Der mittlere Weg ist der, der das Haus beschreibt — er darf auffallen. */
.sus-wege > .sus-weg:nth-child(2){background:linear-gradient(165deg,var(--brand-tint),#fff 72%);
  border-color:transparent;box-shadow:var(--sh-2)}

/* ── Häufige Fragen ─────────────────────────────────────────────────────── */

.sus-faq{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:start}
.sus-faq header h2{margin:0}
.sus-faq .liste{display:flex;flex-direction:column}
.sus-faq details{border-top:2px solid var(--line)}
.sus-faq details:last-child{border-bottom:2px solid var(--line)}
.sus-faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 2px;cursor:pointer;list-style:none;font-family:var(--f-display);font-size:17.5px;
  letter-spacing:-.025em;line-height:1.3;font-weight:600}
.sus-faq summary::-webkit-details-marker{display:none}
.sus-faq summary:hover{color:var(--brand)}
.sus-faq summary svg{width:17px;height:17px;flex:none;color:var(--ink-3);transition:transform var(--schnell)}
.sus-faq details[open] summary svg{transform:rotate(45deg)}
.sus-faq details p{margin:0 0 20px;padding-right:36px;font-size:15.5px;color:var(--ink-2);max-width:68ch}

@media (max-width:900px){
  .sus-wege{grid-template-columns:1fr}
  .sus-faq{grid-template-columns:1fr}
}

/* ── Kundenbereich: WooCommerce-eigene Formulare und Tabellen ─────────────
   WooCommerce liefert für Kontodetails, Adressen und Bestellungen eigenes
   Markup mit. Das Theme hat dessen Stylesheet abbestellt (functions.php) —
   also muss es diese Klassen selbst bedienen.

   ALLES HIER IST AUF .woocommerce-account EINGEGRENZT, und zwar aus Schaden
   klug geworden: WooCommerce setzt die Klasse `woocommerce` auf den <body>
   JEDER Shopseite, auch auf Produktseiten. Ein ungeschütztes
   `.woocommerce fieldset{border:…}` griff deshalb auch auf die Feldgruppen
   unseres Konfigurators und zog dort genau die Trennlinien wieder ein, die
   entfernt werden sollten. Auf der Entwicklungsinstallation war das nicht zu
   sehen: Sie läuft ohne WooCommerce und damit ohne diese Klasse. */

.sus-kontoseite{padding-bottom:56px}

/* ── Kundenbereich: zwei Zustände, nicht einer ────────────────────────────
   ANGEMELDET liefert WooCommerce eine Navigationsspalte und einen Inhaltsteil
   — dafür das zweispaltige Raster.
   NICHT ANGEMELDET steht im selben .woocommerce-Element NUR das
   Anmeldeformular. Im Raster landete es in der 262-Pixel-Spalte: gequetscht,
   linksbündig, mit drei Vierteln der Seite leer daneben. Gemessen am
   17.08. auf der ausgelieferten Seite.
   Das Raster hängt deshalb an :has(.woocommerce-MyAccount-navigation) —
   es greift nur, wenn die Spalte wirklich da ist. */
.woocommerce-account .woocommerce{display:block}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;grid-template-columns:262px minmax(0,1fr);gap:36px;align-items:start}
/* Unter 900 Pixeln passt die Navigationsspalte nicht mehr daneben. Vorher
   stand das zweispaltige Raster HINTER der Ausnahme im Stylesheet und gewann
   deshalb auch auf dem Telefon — das war das waagerechte Scrollen im Konto. */
@media (max-width:900px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    grid-template-columns:minmax(0,1fr);gap:22px}
}
.woocommerce-account .woocommerce-MyAccount-content{min-width:0}

/* Anmelden und Registrieren: zwei gleichwertige Karten, mittig, mit
   Lesebreite. Fehlt die Registrierung, steht das Anmeldeformular allein und
   mittig statt am linken Rand. */
.woocommerce-account #customer_login{display:grid;gap:clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  max-width:1000px;margin-inline:auto}
.woocommerce-account #customer_login > div{min-width:0}
.woocommerce-account #customer_login > div > h2:first-child{margin-top:0}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{background:#fff;border:2px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);margin:0}
.woocommerce-account .woocommerce > .woocommerce-form-login{max-width:520px;margin-inline:auto}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register button[type=submit]{width:100%}
.woocommerce-account .woocommerce-form-login-toggle,
.woocommerce-account .woocommerce-LostPassword{margin:14px 0 0;font-size:14.5px}
.woocommerce-account .woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:10px;
  font-size:14.5px;color:var(--ink-2)}
.woocommerce-account .woocommerce-form__label-for-checkbox input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;padding:0;width:19px;height:19px;
  border:2px solid #C3C3D3;border-radius:6px;background:#fff;display:inline-grid;place-content:center;
  cursor:pointer;transition:background-color var(--schnell),border-color var(--schnell)}
.woocommerce-account .woocommerce-form__label-for-checkbox input[type=checkbox]::after{
  content:'';width:11px;height:11px;background:#fff;transform:scale(0);transition:transform var(--schnell);
  clip-path:polygon(14% 46%,0 62%,40% 100%,100% 20%,86% 6%,38% 70%)}
.woocommerce-account .woocommerce-form__label-for-checkbox input[type=checkbox]:checked{
  background:var(--brand);border-color:var(--brand)}
.woocommerce-account .woocommerce-form__label-for-checkbox input[type=checkbox]:checked::after{transform:scale(1)}
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child{margin-top:0}

/* Formulare */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .woocommerce-address-fields .form-row,
.woocommerce-account form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.woocommerce-account form .form-row label,
.woocommerce-account .woocommerce-form-row label{font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em}
.woocommerce-account form .form-row .required{color:var(--signal);text-decoration:none;border:0}
.woocommerce-account form input[type=text],.woocommerce-account form input[type=email],
.woocommerce-account form input[type=tel],.woocommerce-account form input[type=password],
.woocommerce-account form input[type=number],.woocommerce-account form input[type=search],
.woocommerce-account form textarea,.woocommerce-account form select{
  width:100%;font:inherit;font-size:15.5px;padding:12px 15px;color:var(--ink);background:#fff;
  border:2px solid var(--line);border-radius:var(--r);outline:none;
  transition:border-color var(--schnell),box-shadow var(--schnell)}
.woocommerce-account form input:focus,.woocommerce-account form textarea:focus,
.woocommerce-account form select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.woocommerce-account form .form-row-first,.woocommerce-account form .form-row-last{width:100%}
.woocommerce-account form em,.woocommerce-account form span.description{
  font-size:13.5px;color:var(--ink-3);font-style:normal}

.woocommerce-account fieldset{border:2px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 6px;
  margin:26px 0 22px;background:#fff}
.woocommerce-account fieldset legend{font-family:var(--f-display);font-size:17.5px;letter-spacing:-.02em;
  font-weight:650;padding:0 8px}

/* Schaltflächen — dieselben wie überall sonst */
.woocommerce-account .button,.woocommerce-account button[type=submit],
.woocommerce-account .woocommerce-Button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;
  font-size:15.5px;border-radius:var(--pill);padding:13px 26px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;background:var(--ink);color:#fff;
  transition:transform var(--schnell),background var(--schnell),box-shadow var(--schnell)}
.woocommerce-account .button:hover,.woocommerce-account button[type=submit]:hover,
.woocommerce-account .woocommerce-Button:hover{background:var(--brand);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 24px -10px var(--brand);text-decoration:none}

/* Meldungen */
.woocommerce-account .woocommerce-message,.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,.woocommerce-account .woocommerce-notice{
  list-style:none;margin:0 0 22px;padding:15px 19px;border-radius:var(--r);font-size:15.5px;
  border-left:4px solid transparent}
.woocommerce-account .woocommerce-message{background:var(--mint-tint);border-left-color:var(--mint);color:#04563F}
.woocommerce-account .woocommerce-error{background:var(--signal-tint);border-left-color:var(--signal);color:#8E2409}
.woocommerce-account .woocommerce-info,.woocommerce-account .woocommerce-notice{
  background:var(--brand-tint);border-left-color:var(--brand);color:var(--brand-h)}
.woocommerce-account .woocommerce-error li,.woocommerce-account .woocommerce-message li{margin:0}

/* Bestellungen, Downloads, Adressen */
.woocommerce-account table.shop_table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;
  border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.woocommerce-account table.shop_table th{text-align:left;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);font-weight:650;padding:13px 15px;
  border-bottom:2px solid var(--line);background:var(--paper-2)}
.woocommerce-account table.shop_table td{padding:13px 15px;border-bottom:2px solid var(--line-2);vertical-align:top}
.woocommerce-account table.shop_table tr:last-child td{border-bottom:0}
.woocommerce-account .col2-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.woocommerce-account address{font-style:normal;line-height:1.7;color:var(--ink-2)}

@media (min-width:700px){
  /* Vor- und Nachname nebeneinander, sobald Platz ist. */
  .woocommerce-account form .form-row-first,.woocommerce-account form .form-row-last{width:calc(50% - 9px)}
  .woocommerce-account form .form-row-first{float:left;margin-right:18px}
  .woocommerce-account form .form-row-last{float:left}
  .woocommerce-account form .clear{clear:both}
}

/* Passwortfeld: WooCommerce hängt an jedes ein <span class="show-password-input">
   zum Ein- und Ausblenden. Ohne dessen Stylesheet ist das ein kleiner grauer
   Balken unter dem Feld. Hier wird daraus wieder ein Auge im Feld. */
.woocommerce-account .password-input{position:relative;display:block}
.woocommerce-account .password-input input{padding-right:52px}
.woocommerce-account .show-password-input{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:var(--pill);cursor:pointer;opacity:.5;
  background:transparent no-repeat center/19px 19px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230B0B0F' stroke-width='1.6'%3E%3Cpath d='M1.8 10S4.9 4.6 10 4.6 18.2 10 18.2 10 15.1 15.4 10 15.4 1.8 10 1.8 10Z'/%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3C/svg%3E");
  transition:opacity var(--schnell),background-color var(--schnell)}
.woocommerce-account .show-password-input:hover{opacity:.9;background-color:var(--paper-2)}
.woocommerce-account .show-password-input.display-password{opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234B34F5' stroke-width='1.6'%3E%3Cpath d='M1.8 10S4.9 4.6 10 4.6 18.2 10 18.2 10 15.1 15.4 10 15.4 1.8 10 1.8 10Z'/%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3Cpath d='M3.5 16.5l13-13'/%3E%3C/svg%3E")}

/* Einheiten im Datenblatt: gleich lesbar wie der Wert, aber erkennbar
   nachgeordnet. Ein Wert ohne Einheit ist im Zweifel wertlos — deshalb steht
   sie da; sie soll die Zahl aber nicht überstimmen. */
.sus-spec .einheit{color:var(--ink-3);font-size:.92em;letter-spacing:0}

/* ── Kacheln ohne Szenenbild ───────────────────────────────────────────────
   Solange kein eigenes Foto hinterlegt ist, zeigt die Kachel das Gerät aus
   diesem Bereich. Auf einer weissen Fläche sah das aus wie ein Platzhalter.
   Mit getönter Platte und Multiplikation liest sich die Reihe als Gestaltung
   — und sobald ein Szenenfoto hochgeladen wird, gilt ohnehin .szene. */
.sus-kachel:not(.szene) .bild img{mix-blend-mode:multiply}
.sus-kacheln > .sus-kachel:not(.szene):nth-child(5n+1) .bild{background:linear-gradient(160deg,var(--brand-tint),#fff 62%)}
.sus-kacheln > .sus-kachel:not(.szene):nth-child(5n+2) .bild{background:linear-gradient(160deg,var(--mint-tint),#fff 62%)}
.sus-kacheln > .sus-kachel:not(.szene):nth-child(5n+3) .bild{background:linear-gradient(160deg,var(--butter-tint),#fff 62%)}
.sus-kacheln > .sus-kachel:not(.szene):nth-child(5n+4) .bild{background:linear-gradient(160deg,var(--signal-tint),#fff 62%)}
.sus-kacheln > .sus-kachel:not(.szene):nth-child(5n+5) .bild{background:linear-gradient(160deg,var(--paper-3),#fff 62%)}
/* Im dunklen Block bleibt es bei der verhaltenen Fläche. */
.sus-block.dunkel .sus-kachel:not(.szene) .bild{background:rgba(255,255,255,.05)}
.sus-block.dunkel .sus-kachel:not(.szene) .bild img{mix-blend-mode:normal}

/* ── Zwei Wege in der Kopfleiste ───────────────────────────────────────────
   „Finder" und „Beratung" heben sich bewusst farblich vom übrigen Kopf ab:
   Lupe und Konto sind Werkzeuge, diese beiden sind Angebote. Der Finder wirbt
   verhalten, die Beratung ist der Weg, den wir am liebsten sehen. */
.sus-kopfweg{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14.5px;font-weight:600;
  padding:9px 16px;border-radius:var(--pill);text-decoration:none;white-space:nowrap;
  transition:background var(--schnell),color var(--schnell),box-shadow var(--schnell),transform var(--schnell)}
.sus-kopfweg svg{width:16px;height:16px;flex:none}
.sus-kopfweg.finder{background:var(--brand-tint);color:var(--brand)}
.sus-kopfweg.finder:hover{background:color-mix(in srgb,var(--brand) 20%,#fff);color:var(--brand-h);text-decoration:none}
.sus-kopfweg.angebot{background:var(--brand);color:#fff}
.sus-kopfweg.angebot:hover{background:var(--brand-h);color:#fff;text-decoration:none;transform:translateY(-1px);
  box-shadow:0 10px 22px -10px var(--brand)}
@media (max-width:1180px){
  /* Zuerst weicht der Finder — das Angebot ist der wichtigere der beiden. */
  .sus-kopfweg.finder{display:none}
}
/* AUF DEM DESKTOP AUSGEBLENDET — und zwar VOR der Medienabfrage.
   GEMESSEN am 18.08.: Diese Regel stand bisher NACH dem Block darunter. Eine
   Medienabfrage erhöht die Spezifität nicht, also gewann die spätere Zeile
   immer — die beiden Wege waren im aufgeklappten Menü nie zu sehen, auf keinem
   Gerät. Aufgefallen ist es erst, als sie Knöpfe werden sollten. */
.sus-nav-wege{display:none}

@media (max-width:980px){
  .sus-kopfweg{display:none}
  /* Dafür stehen sie im aufgeklappten Menü — und zwar als KNÖPFE.
     Als blaue Textzeilen unter allen anderen Textzeilen war der Hauptweg der
     Website auf dem Telefon nicht mehr zu erkennen. Hier bekommen sie dieselbe
     Form und Farbe wie oben rechts auf dem Desktop, nur über die volle Breite
     und mit etwas Luft dazwischen.

     Ohne Trennlinie: Die Menüpunkte darüber tragen selbst schon je eine
     untere Linie, und die beiden Knöpfe sind durch Form und Farbe ohnehin
     als etwas anderes zu erkennen. Ein zusätzlicher Strich davor war eine
     Linie, die nichts trennt, was nicht schon getrennt aussieht. */
  .sus-nav-wege{display:grid;gap:10px;margin-top:14px;padding-top:0}
  .sus-nav-wege > li{margin:0}
  .sus-nav-wege > li > a.sus-kopfweg{display:flex;width:100%;justify-content:center;
    padding:13px 18px;font-size:15.5px;border-radius:var(--pill)}
  /* `.sus-kopfweg{display:none}` eine Regel weiter oben gilt für die Kopfleiste
     — hier muss es wieder eingeschaltet werden, sonst wären beide unsichtbar. */
  .sus-nav-wege > li > a.sus-kopfweg.finder,
  .sus-nav-wege > li > a.sus-kopfweg.angebot{display:flex}
}

/* Sprungziele.
   Zwischenstand vom 17.08. war ein Abstand in Höhe der Kopfleiste — damit
   hielt der Sprung zu weit oben an. Gewünscht ist das ursprüngliche
   Verhalten des Finders: dicht an den Abschnitt heran, die klebende
   Kopfleiste darf dessen obere Kante überlappen. */
/* Sprungziele: 90 px unter der Fensterkante anhalten. Bewusst ein fester Wert
   statt der gemessenen Kopfhöhe — so ist der Abstand derselbe, egal ob die
   Kopfleiste gerade eingeblendet ist oder nicht. */
#finder,#beratung,#angebot{scroll-margin-top:90px}
/* Vierter Anker seit dem 09.09.: der Sprung von der Bereichseinleitung zu
   Filter und Liste. Er steht in einer eigenen Regel, weil er einen anderen
   Grund hat als die drei darüber — dieselbe Zahl, andere Herkunft. */
#sus-katalog{scroll-margin-top:90px}
/* Auch die Wahlgruppe im Formular: Auf dem Telefon wird sie direkt angefahren
   (app.js, Block 17), und ohne diesen Abstand verschwände sie unter der
   Kopfleiste. */
.sus-anliegen{scroll-margin-top:90px}
#sus-hinweis{scroll-margin-top:calc(var(--kopfhoehe) + 16px)}

/* ── 20 Laufzeitrechner ────────────────────────────────────────────────────
   Zeigt AUSSCHLIESSLICH relative Ersparnis. Kein Eurobetrag, weil es keine
   Preise gibt (Inventur O-04) — ein Betrag hier wäre für die Kundschaft ein
   Angebot. Ohne JavaScript stehen alle Stufen samt Prozentwert bereits da;
   das Skript hebt nur hervor und schreibt den Satz darunter. */
.sus-rechner{background:#fff;border:2px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,3vw,34px)}
/* Eigener Klassenname: `.kopf` ist global die waagerechte Kopfleiste
   (display:flex). Beim ersten Versuch standen Auszeichnung, Überschrift und
   Fliesstext deshalb in drei Spalten nebeneinander und liefen auf dem Telefon
   aus dem Rahmen. Von einem Bildschirmfoto gefunden, nicht vom Auge. */
.sus-rechner .rkopf{display:block}
.sus-rechner .rkopf .sus-eyebrow{display:block}
.sus-rechner .rkopf h3{font-family:var(--f-display);font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.02em;margin:6px 0 8px}
.sus-rechner .rkopf .lead{margin:0 0 20px;color:var(--ink-2);font-size:16.5px;max-width:56ch}
.sus-rechner .stufen{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr))}
.sus-rechner .stufe{position:relative;overflow:hidden;text-align:left;font:inherit;cursor:pointer;
  background:var(--paper-2);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:14px 15px 18px;display:grid;gap:2px;
  transition:border-color var(--schnell),background var(--schnell),transform var(--schnell)}
.sus-rechner .stufe:hover{border-color:var(--brand);transform:translateY(-1px)}
.sus-rechner .stufe:focus-visible{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-tint)}
.sus-rechner .stufe.an{background:var(--brand-tint);border-color:var(--brand)}
.sus-rechner .stufe .m{font-size:13.5px;color:var(--ink-3)}
.sus-rechner .stufe.an .m{color:var(--brand-h)}
.sus-rechner .stufe .e{font-family:var(--f-display);font-weight:700;font-size:23px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sus-rechner .stufe.an .e{color:var(--brand)}
/* Der Balken zeigt den Anteil an der besten Stufe — eine Achse ohne Achse. */
.sus-rechner .stufe .balken{position:absolute;left:0;bottom:0;height:4px;width:var(--anteil);
  background:var(--brand);opacity:.35;transition:opacity var(--schnell)}
.sus-rechner .stufe.an .balken{opacity:1}
.sus-rechner .ergebnis{margin:20px 0 0;font-size:16.5px;color:var(--ink-2)}
.sus-rechner .ergebnis strong{color:var(--ink)}
.sus-rechner .tat{margin:18px 0 0}
.sus-rechner .sus-note{margin-top:16px}
@media (prefers-reduced-motion:reduce){
  .sus-rechner .stufe:hover{transform:none}
}

/* Zwei Knöpfe nebeneinander im Kopfbereich einer Landingpage. */
.sus-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* Der Pfad klebte an der Auszeichnung darunter — beides ist Kleintext, zusammen
   sah es aus wie eine gebrochene Zeile. */
.sus-kopfzeile .sus-krumen{margin-bottom:14px}
/* Zwei Textspalten ungleicher Länge: oben ausrichten, sonst stehen die
   Überschriften auf verschiedener Höhe. */
.sus-split.oben{align-items:start}

/* ── 21 RENT-TEST-BUY-Beispielrechnung ────────────────────────────────────
   Nachbau des Rechners auf printspaul.de/rent-test-buy/, ohne die Stufen
   Silber/Gold/Platin. Der Gerätewert ist eine Eingabe der Besucherin — nur
   deshalb dürfen hier Eurobeträge stehen, während der Rest der Website keine
   Preise nennt. */
.sus-rtb .felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(20px,3vw,40px);margin-bottom:26px}
.sus-rtb .feld > label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.sus-rtb .wert{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,34px);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.sus-rtb .spanne{display:flex;justify-content:space-between;margin:6px 0 0;
  font-size:12.5px;color:var(--ink-3)}

/* Schieberegler: eigene Spur, damit er auf allen Systemen gleich aussieht.
   appearance:none schaltet die Betriebssystemdarstellung ab. */
.sus-rtb input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:26px;
  background:transparent;cursor:pointer;display:block;margin:0}
.sus-rtb input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:var(--paper-3)}
.sus-rtb input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--paper-3)}
.sus-rtb input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--brand);
  border:3px solid #fff;box-shadow:0 2px 8px -1px rgba(11,11,15,.4)}
.sus-rtb input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--brand);border:3px solid #fff;box-shadow:0 2px 8px -1px rgba(11,11,15,.4)}
.sus-rtb input[type=range]:focus-visible{outline:none}
.sus-rtb input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--brand-tint)}
.sus-rtb input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--brand-tint)}

/* Testdauer als Auswahl: echte Radiofelder, nur unsichtbar gemacht — damit
   Tastatur und Screenreader unverändert funktionieren. */
/* WARUM RASTER STATT REIHE
   Als `flex` waren die Felder so breit wie ihre Beschriftung: „30 Tage" schmal,
   „180 Tage" breiter, rechts blieb die halbe Spalte leer. Das Raster teilt die
   vorhandene Breite gleichmässig auf. `auto-fit` mit einer Mindestbreite von
   120 Pixeln ergibt von selbst das Gewünschte — in der halben Inhaltsbreite
   vier Felder nebeneinander, auf dem Telefon zwei je Zeile — und bleibt richtig,
   wenn im Backend einmal drei oder fünf Testdauern hinterlegt werden. */
.sus-rtb .dauern{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;margin-top:6px}
.sus-rtb .dauer{position:relative;cursor:pointer}
.sus-rtb .dauer input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sus-rtb .dauer span{display:block;padding:10px 15px;border:2px solid var(--line);border-radius:var(--pill);
  font-size:14.5px;background:#fff;text-align:center;white-space:nowrap;
  transition:border-color var(--schnell),background var(--schnell),color var(--schnell)}
.sus-rtb .dauer:hover span{border-color:var(--brand)}
.sus-rtb .dauer input:checked + span,.sus-rtb .dauer.an span{background:var(--brand);border-color:var(--brand);color:#fff}
.sus-rtb .dauer input:focus-visible + span{box-shadow:0 0 0 4px var(--brand-tint)}

.sus-rtb .ergebnisse{display:grid;gap:2px;border:2px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--line)}
.sus-rtb .posten{display:grid;grid-template-columns:1fr auto;grid-template-areas:"was zahl" "wie zahl";
  gap:0 18px;align-items:center;background:#fff;padding:14px 18px}
.sus-rtb .posten .was{grid-area:was;font-size:15.5px}
.sus-rtb .posten .wie{grid-area:wie;font-size:12.5px;color:var(--ink-3)}
.sus-rtb .posten .zahl{grid-area:zahl;font-family:var(--f-display);font-weight:700;font-size:21px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sus-rtb .posten.gut{background:var(--mint-tint)}
.sus-rtb .posten.gut .zahl{color:#04563F}
.sus-rtb .posten.summe{background:var(--brand-tint)}
.sus-rtb .posten.summe .zahl{color:var(--brand);font-size:23px}
/* Der Abschluss der Rechnung ist EINE Handlung, also ein Knopf über die volle
   Breite — auf Weisung des Betreibers, Desktop wie Telefon. Der Knopf „Neu
   berechnen" daneben existiert nur ohne JavaScript; mit JavaScript ist er
   ausgeblendet, die Spalte enthält dann nur noch die eine Schaltfläche. */
.sus-rtb .tat{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:20px 0 0}
.sus-rtb .tat > .sus-cta,.sus-rtb .tat > .sus-btn{width:100%;justify-content:center;text-align:center}
/* Ohne JavaScript ist der Knopf der Weg zum Ergebnis; mit JavaScript rechnet
   die Seite mit und der Knopf wird überflüssig. */
.js .sus-rtb [data-sus-rtb-los]{display:none}
/* Der Kasten „Testwerte" ist am 19.08. ersatzlos entfallen — auf Weisung des
   Betreibers. Was er sagte, sagt der Schlusssatz unter der Rechnung ohnehin:
   verbindlich ist allein das Angebot zur konkreten Anfrage.

   Der Rundungshinweis steht bewusst DIREKT unter den Zahlen und nicht im
   Schlusssatz: Er erklärt genau das, was man beim Nachrechnen bemerkt — dass
   Tagesmiete × Tage nicht immer exakt der Mietsumme entspricht, weil jede
   Position für sich auf ganze Euro gerundet wird. */
.sus-rtb .rundung{margin:8px 0 0;font-size:12.5px;color:var(--ink-3)}

/* ── 22 „Was brauchen Sie?" ───────────────────────────────────────────────
   Zwei Auswahlfelder statt zweier Formulare. Die Zeile steht bewusst GANZ
   OBEN im Formular: Sie ändert, was der Absendeknopf verspricht, und das darf
   man nicht erst unter dem letzten Feld erfahren. */
.sus-form .sus-anliegen{display:grid;gap:8px;margin:0 0 6px}
.sus-form .sus-anliegen legend{font-size:13.5px;font-weight:600;color:var(--ink-2);padding:0;margin-bottom:2px}
.sus-form .sus-anliegen .wahl{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:11px 13px;border:2px solid var(--line);border-radius:var(--r);cursor:pointer;background:#fff;
  font-size:14.5px;line-height:1.4;transition:border-color var(--schnell),background var(--schnell)}
.sus-form .sus-anliegen .wahl:hover{border-color:var(--brand)}
.sus-form .sus-anliegen .wahl:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.sus-form .sus-anliegen input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;padding:0;margin:2px 0 0;
  width:19px;height:19px;border:2px solid #C3C3D3;border-radius:50%;background:#fff;
  display:inline-grid;place-content:center;cursor:pointer;
  transition:border-color var(--schnell),box-shadow var(--schnell)}
.sus-form .sus-anliegen input[type=radio]::after{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--brand);transform:scale(0);transition:transform var(--schnell)}
.sus-form .sus-anliegen input[type=radio]:checked{border-color:var(--brand)}
.sus-form .sus-anliegen input[type=radio]:checked::after{transform:scale(1)}
.sus-form .sus-anliegen input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 4px var(--brand-tint)}

/* ── 23 Feste Anfrage-Schaltfläche am unteren Rand ─────────────────────────
   Nur auf schmalen Geräten. Die Grenze ist 980px und nicht willkürlich: Das
   ist genau der Punkt, an dem `.sus-kopfweg` aus der Kopfleiste verschwindet
   und der Anfrageknopf nur noch im aufgeklappten Menü steht. Oberhalb davon
   steht er durchgehend im Bild — eine zweite, dauerhafte Aufforderung wäre
   dort Druck ohne Zusatznutzen.

   `hidden` steuert app.js; das !important daneben ist nötig, weil display:flex
   die Voreinstellung des Browsers für [hidden] sonst überschreibt. Der Rand
   unten rechnet die Software-Tastenleiste heraus (safe-area), sonst liegt der
   Knopf unter der Wischleiste von iOS. */
.sus-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  /* DIESELBE GLASFLÄCHE WIE DIE KOPFLEISTE (18.08.).
     Vorher: `rgba(255,255,255,.92)` mit `blur(10px)` — fast deckend und ohne
     Sättigung, also sichtbar anders als oben. Jetzt Zeichen für Zeichen die
     Werte aus `.sus-header`: 80 % Papierton, `saturate(180%) blur(18px)` und
     ein Rahmen aus 70 % Linienfarbe. Wer nach unten scrollt, sieht oben und
     unten dieselbe Fläche.
     `--paper` statt eines festen Weiss, damit der Customizer-Farbton
     durchschlägt. */
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:2px solid color-mix(in srgb,var(--line) 70%,transparent);
  box-shadow:0 -6px 22px rgba(11,11,15,.08);
  animation:sus-cta-auf .22s cubic-bezier(.2,.7,.3,1)}
.sus-sticky-cta[hidden]{display:none}
.sus-sticky-cta .sus-cta{flex:1;justify-content:center;text-align:center}
@keyframes sus-cta-auf{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.sus-sticky-cta{animation:none}}

/* Ausgleich, damit die Leiste nichts verdeckt: der Seitenfuss bekommt exakt
   ihre Höhe als zusätzlichen Abstand — aber nur, solange sie sichtbar ist.
   Klasse und gemessene Höhe setzt app.js; die 78px sind nur der Rückfallwert,
   falls die Messung noch nicht gelaufen ist. */
body.hat-sticky-cta .sus-footer{padding-bottom:var(--sticky-cta-h,78px)}

@media (min-width:981px){.sus-sticky-cta{display:none !important}}

/* ── 24 Erwartung und Beratungsweg im Anfrageabschnitt ─────────────────────
   „Was passiert nach Ihrer Anfrage?" steht als eigene Zwischenüberschrift über
   den drei Schritten — kleiner als eine H2, aber deutlich als Frage erkennbar. */
.sus-erwartung{margin:26px 0 0;font-family:var(--f-display);font-size:17.5px;
  letter-spacing:-.015em;color:var(--ink)}

/* Der Beratungsweg ist ausdrücklich der zweite Weg (Audit §12): eigener Kasten,
   aber gedeckte Fläche und ein heller Knopf — er soll gefunden werden, ohne mit
   „Angebot anfragen" um dieselbe Aufmerksamkeit zu kämpfen. */
.sus-gespraech{margin-top:24px;padding:18px 20px;background:var(--paper-2);
  border:2px solid var(--line);border-radius:var(--r-lg)}
.sus-gespraech strong{display:block;font-family:var(--f-display);font-size:17.5px;
  letter-spacing:-.015em;margin-bottom:6px}
.sus-gespraech p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.sus-gespraech .sus-cta{background:#fff}
/* Der Kasten selbst ist kein Flexcontainer; auf dem Telefon wird er einer,
   damit `align-items:stretch` den Knopf über die volle Breite zieht. */
@media (max-width:640px){.sus-gespraech{display:flex;flex-direction:column}}

/* ── 25 Zurück nach oben ───────────────────────────────────────────────────
   Rund, gedeckt, unten rechts — dieselbe Formensprache wie die runden Knöpfe
   der Kopfleiste (Suche, Konto), damit er wie Teil des Hauses wirkt und nicht
   wie ein nachträglich angeklebtes Werkzeug.

   `--hoch-unten` hält den Abstand zum unteren Rand an EINER Stelle. Auf dem
   Telefon schiebt app.js die feste Anfrageleiste darunter — dann wächst der
   Wert, statt dass zwei Regeln sich gegenseitig überschreiben. */
.sus-hoch{--hoch-unten:20px;
  position:fixed;right:20px;bottom:calc(var(--hoch-unten) + env(safe-area-inset-bottom));z-index:55;
  width:46px;height:46px;display:grid;place-items:center;padding:0;
  border:2px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:50%;
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  color:var(--ink);cursor:pointer;
  box-shadow:var(--sh-2);transition:transform var(--schnell),box-shadow var(--schnell),
    background var(--schnell),border-color var(--schnell),bottom var(--schnell);
  animation:sus-hoch-auf .22s cubic-bezier(.2,.7,.3,1)}
.sus-hoch[hidden]{display:none}
.sus-hoch svg{width:19px;height:19px;transition:transform var(--schnell)}
.sus-hoch:hover{background:var(--brand);border-color:transparent;color:#fff;box-shadow:var(--sh-3)}
.sus-hoch:hover svg{transform:translateY(-2px)}
.sus-hoch:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
@keyframes sus-hoch-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sus-hoch{animation:none;transition:none}}

/* Steht die feste Anfrageleiste im Bild, rückt er über sie — sonst läge er
   darauf. Die Höhe misst app.js und legt sie in --sticky-cta-h ab. */
body.hat-sticky-cta .sus-hoch{--hoch-unten:calc(var(--sticky-cta-h,78px) + 14px)}

/* ── 26 „Ihre Vorteile auf einen Blick." ───────────────────────────────────
   OFFENES RASTER MIT INNENLINIEN, KEINE KARTEN.
   Der Rest der Seite arbeitet mit Karten: Rahmen, Rundung, Schatten. Hier
   ausdrücklich nicht — neun umrandete Kästen lesen sich wie eine
   Merkmalstabelle, und genau das soll dieser Abschnitt nicht sein. Was die
   Kacheln ordnet, sind vier Linien INNEN: zwei senkrecht, zwei waagerecht.
   Aussen bleibt das Raster offen; die mittlere Kachel ist damit eingeschlossen,
   die acht anderen werden nur berührt. */
/* Der Kopf steht linksbündig wie jeder andere Abschnittskopf der Seite.
   Kurz mittig ausprobiert und wieder verworfen: Eine einzelne zentrierte
   Überschrift zwischen lauter linksbündigen fällt als Bruch auf, nicht als
   Akzent. */
.sus-vorteile-kopf{max-width:62ch;margin:0 0 clamp(38px,4.4vw,60px)}
.sus-vorteile-kopf .sus-eyebrow{display:block}
.sus-vorteile-kopf h2{margin-bottom:12px}
/* Die Unterzeile bleibt deutlich kleiner als die Überschrift und braucht auf
   dem Desktop höchstens zwei Zeilen — 62ch sorgen dafür. */
.sus-vorteile-kopf p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/*
 * DIE LÜCKEN SIND BENANNT, weil die Linien exakt in ihrer Mitte liegen müssen.
 * Bei drei gleich breiten Spalten ist die erste Spaltengrenze
 *   (Breite − 2 Lücken) / 3 + Lücke/2
 * vom linken Rand entfernt. Mit `--gx`/`--gy` als Variablen rechnet das
 * Stylesheet das selbst aus; stünde die Lücke als Zahl in drei Regeln, liefe
 * die Linie beim nächsten Feinschliff daneben.
 *
 * `grid-auto-rows:1fr` ist dafür Voraussetzung: Nur bei gleich hohen Reihen
 * liegen die waagerechten Grenzen dort, wo die Rechnung sie erwartet.
 */
.sus-vorteile-raster{position:relative;--gx:clamp(28px,3.2vw,52px);--gy:clamp(34px,3.8vw,58px)}
.sus-vorteile{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
  gap:var(--gy) var(--gx);position:relative}
.sus-vorteile .vorteil{min-width:0}

/* Die vier Linien. Farbe ist der gewöhnliche Linienton der Seite — dieselbe
   Farbe wie jede andere Trennlinie hier, damit das Raster ruhig bleibt und
   nicht mit den violetten Überschriften um Aufmerksamkeit ringt. */
.sus-vorteile::before,.sus-vorteile::after,
.sus-vorteile-raster::before,.sus-vorteile-raster::after{
  content:"";position:absolute;background:var(--line);pointer-events:none}
/* Senkrecht: an den beiden Spaltengrenzen, über die volle Rasterhöhe. */
.sus-vorteile::before,.sus-vorteile::after{top:0;bottom:0;width:2px}
.sus-vorteile::before{left:calc((100% - 2 * var(--gx)) / 3 + var(--gx) / 2 - 1px)}
.sus-vorteile::after{left:calc((100% - 2 * var(--gx)) / 3 * 2 + var(--gx) * 1.5 - 1px)}
/* Waagerecht: an den beiden Reihengrenzen, über die volle Rasterbreite. */
.sus-vorteile-raster::before,.sus-vorteile-raster::after{left:0;right:0;height:2px}
.sus-vorteile-raster::before{top:calc((100% - 2 * var(--gy)) / 3 + var(--gy) / 2 - 1px)}
.sus-vorteile-raster::after{top:calc((100% - 2 * var(--gy)) / 3 * 2 + var(--gy) * 1.5 - 1px)}

/* Das Sinnbild steht über der Überschrift, nicht daneben: So bleibt die
   Lesereihenfolge auf jeder Breite dieselbe — Bild, Titel, Erklärung.
   Die Farbe ist ein tiefes Marineblau, aus der Markenfarbe gemischt statt fest
   eingetragen: Ändert jemand die Markenfarbe im Customizer, wandert der Ton
   mit, statt daneben zu liegen. */
/* Das Sinnbild sitzt mittig in seiner Kachel, der Text darunter bleibt
   linksbündig: So bekommt jede Kachel oben einen ruhigen Ankerpunkt, ohne
   dass die Zeilen darunter ins Flattern geraten. */
.sus-vorteile .ikon{display:flex;justify-content:center;
  color:color-mix(in srgb,var(--brand) 26%,var(--ink));margin-bottom:20px}
/* 70px. Erst 30, dann 90 — 90 drückte die Überschriften zu weit nach unten
   und liess die Kacheln oben leer wirken. Die Strichstärke steht im SVG
   relativ zum 24er-Raster und wächst mit; die Linie bleibt also in jeder
   Grösse im Verhältnis gleich fein. */
.sus-vorteile .ikon svg{width:70px;height:70px;display:block}

/* Versalien mit weiter Sperrung — kurz genug, um in zwei Zeilen zu passen, und
   deutlich als Titel erkennbar, ohne die Grösse einer H2 zu brauchen. */
/* Titel mittig wie das Sinnbild darüber; der Erklärungstext darunter bleibt
   linksbündig, weil zentrierter Fliesstext über drei bis fünf Zeilen an beiden
   Rändern ausfranst und schwerer zu lesen ist. */
.sus-vorteile h3{margin:0 0 9px;font-family:var(--f-display);font-size:14.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.35;color:var(--brand);
  text-align:center}
.sus-vorteile p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}

@media (max-width:980px){
  /* Tablet: zwei Spalten — und keine Linien mehr. Sie sind für DREI Spalten und
     DREI Reihen gerechnet; bei zwei Spalten ergeben sich fünf Reihen, und die
     Linien lägen mitten in den Kacheln. Lieber gar keine als falsche. */
  .sus-vorteile{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .sus-vorteile::before,.sus-vorteile::after,
  .sus-vorteile-raster::before,.sus-vorteile-raster::after{display:none}
  .sus-vorteile .ikon svg{width:64px;height:64px}
}
@media (max-width:640px){
  /* Telefon: eine Spalte, untereinander. Kein Schieberegler, kein Aufklappen —
     der Abschnitt soll vollständig überflogen werden können. */
  /* Eine Spalte — und statt blossem Abstand eine Trennlinie zwischen den
     Kacheln. Auf dem Desktop ordnen vier Innenlinien das Raster; untereinander
     übernimmt das eine Linie je Übergang. Aussen bleibt es auch hier offen:
     Die erste Kachel bekommt keine Linie darüber, die letzte keine darunter.
     Die Lücke wird zu Innenabstand, damit die Linie nicht am Text klebt. */
  .sus-vorteile{grid-template-columns:1fr;gap:0}
  .sus-vorteile .vorteil + .vorteil{border-top:2px solid var(--line);padding-top:30px}
  .sus-vorteile .vorteil{padding-bottom:30px}
  .sus-vorteile .vorteil:last-child{padding-bottom:0}
  .sus-vorteile-kopf p{font-size:15.5px}
  .sus-vorteile .ikon svg{width:56px;height:56px}
}

/* ── 27 Eine Grösse für alle Unterzeilen ───────────────────────────────────
   GEMESSEN am 18.08. über die ganze Startseite: Die Überschriften der
   Abschnitte waren bereits einheitlich (40px), die Unterzeilen darunter aber
   nicht — 15px im Abschnittskopf, 21px als `.lead`, 16,5px im Abschlussband und
   im Vorteilsraster, 13,5px unter der Finder-Überschrift. Vier Grössen für
   dieselbe Rolle.

   Diese Regel steht bewusst am Ende der Datei: Sie soll die früheren Werte
   überschreiben, ohne dass an fünf Stellen Zahlen geändert werden müssen — so
   bleibt dort sichtbar, wie der Abschnitt sonst aufgebaut ist.

   NICHT betroffen ist der Aufmacher. Dort steht eine 80px-Überschrift; eine
   21px-Unterzeile ist das passende Gegengewicht und keine Ausnahme aus
   Versehen. `.sus-hero` ist kein `.sus-block`, fällt also von selbst heraus. */
/* FARBE GEHÖRT ZUR ROLLE, NICHT ZUR HERKUNFT.
   Nachgemessen am 18.08.: Dieselbe Unterzeile war je nach Abschnitt #55555F
   oder #2C2C36 — abhängig davon, ob sie als `.lead` oder als Absatz im
   Abschnittskopf geschrieben war. Zwei Grautöne für dieselbe Aufgabe liest man
   als Unsauberkeit, nicht als Abstufung. Es gilt der dunklere. */
/* ACHTUNG, HIER STEHT NUR, WAS AUF HELLEM GRUND STEHT.
   Beim Vereinheitlichen am 18.08. war `.sus-ctaband p` in dieser Liste — und
   bekam damit den dunklen Fliesstextton auf den violetten Verlauf. Kaum noch
   zu lesen. Die Grösse teilt es weiterhin mit den anderen, die Farbe nicht:
   Farbe hängt am Untergrund, nicht an der Rolle allein. */
.sus-block header p,
.sus-block .lead,
.sus-vorteile-kopf p,
.sus-finder > header .sus-note{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
/* Auf dem farbigen Band: reines Weiss. Vorher 86 % Deckkraft — auf dem hellen
   Ende des Verlaufs (Richtung Signalfarbe) reichte das nicht. */
.sus-ctaband p{font-size:16.5px;line-height:1.6;color:#fff}

@media (max-width:640px){
  .sus-block header p,
  .sus-block .lead,
  .sus-vorteile-kopf p,
  .sus-ctaband p,
  .sus-finder > header .sus-note{font-size:15.5px}
}

/* ── 28 Eine Schriftgrössen-Leiter für die ganze Seite ─────────────────────
   BEFUND vom 18.08.: Über Startseite, Katalog und Modellseite waren 24
   verschiedene Schriftgrössen im Einsatz — 15 und 15,5; 13 und 13,5; 12 und
   11,5; 17, 17,5 und 18. Unterschiede, die niemand als Absicht liest, sondern
   als Unruhe. Gewachsen ist das über Monate, jede Grösse für sich plausibel.

   Statt vierzig Regeln anzufassen, steht hier eine Leiter mit neun Stufen, und
   darunter werden die Ausreisser auf die nächste Stufe gezogen. Das lässt die
   Abschnitte oben unangetastet — man sieht dort weiterhin, wie sie gebaut sind
   — und macht die Vereinheitlichung an EINER Stelle nachvollziehbar und
   umkehrbar.

   NICHT auf der Leiter stehen Ziffern, die als Bild wirken: die 80px des
   Aufmachers, die 58px der Seitenüberschrift, die Trefferzahl des Finders, die
   Kennzahlen unter dem Aufmacher, die Stufenzahlen des Rechners und die
   Glyphen der Lichtbox. Das sind keine Fliesstexte, sondern Zahlen und
   Zeichen; sie folgen der Optik, nicht der Leseleiter. */
:root{
  --t-h2:40px;      /* Abschnittsüberschrift            */
  --t-h3:28px;      /* Zwischenüberschrift              */
  --t-h4:21px;      /* Karten- und Schritttitel         */
  --t-titel:17.5px; /* kleine Titel, Zusammenfassungen  */
  --t-sub:16.5px;   /* Unterzeile unter einer H2        */
  --t-text:15.5px;  /* Fliesstext                       */
  --t-mittel:14.5px;/* zweitrangiger Text, Navigation   */
  --t-klein:13.5px; /* Beiwerk, Hinweise                */
  --t-mikro:12.5px; /* Etiketten, Chips, Augenbrauen    */
}

/* Die Werte stehen inzwischen AN DER QUELLE auf der Leiter — die frühere
   Übersetzungsliste an dieser Stelle ist entfallen. Sie war der schnelle Weg;
   der richtige ist, dass jede Regel gleich die passende Stufe nennt. Wer eine
   neue Regel schreibt, greift zu einer der neun Variablen oben. */

/* Auch die Glyphen der Lichtbox (× ‹ ›): Sie erben ihr Gewicht vom Browser,
   nicht vom body — und blieben deshalb als Einzige bei 400. */
.sus-lightbox button{font-weight:500}

/* ── 29 Filterblatt auf dem Telefon ────────────────────────────────────────
   Auf dem Desktop ist die Filterleiste eine Spalte neben den Ergebnissen —
   daran ändert dieser Block nichts. Kopf und Fuss des Blatts sind dort
   ausgeblendet, denn eine Spalte braucht weder Griff noch Schliessknopf. */
.sus-filters .blattkopf,.sus-filters .blattfuss{display:none}

@media (max-width:980px){
  /* Der Schalter über den Ergebnissen nimmt die ganze Breite — er ist auf dem
     Telefon der einzige Weg zu den Filtern und soll nicht wie ein Beiwerk
     neben dem Suchfeld aussehen. */
  .sus-filter-schalter{display:flex;width:100%;justify-content:center;padding-block:13px}

  /*
   * DAS BLATT.
   * Ausserhalb des Bildes geparkt (`translateY(100%)`) und beim Öffnen
   * hereingefahren. `visibility` wandert mit, damit es geschlossen weder
   * anklickbar noch für Screenreader vorhanden ist — `transform` allein würde
   * es nur verschieben, nicht entfernen.
   *
   * Die Höhe ist auf 88 % des Sichtfensters gedeckelt: Ein Rest der Liste
   * bleibt oben sichtbar, damit erkennbar bleibt, worüber das Blatt liegt.
   * `dvh` statt `vh`, weil auf dem Telefon die Adresszeile mitwandert.
   */
  .js .sus-filters{display:flex;flex-direction:column;position:fixed;z-index:160;
    left:0;right:0;bottom:0;top:auto;margin:0;
    max-height:88dvh;border:0;border-radius:22px 22px 0 0;padding:0;
    box-shadow:0 -18px 48px rgba(11,11,15,.28);
    transform:translateY(100%);visibility:hidden;
    transition:transform .32s cubic-bezier(.2,.7,.3,1),visibility .32s}
  .js .sus-filters.auf{transform:none;visibility:visible}

  .sus-filters .blattkopf{display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:10px;padding:14px 18px 12px;border-bottom:2px solid var(--line);position:relative}
  /* Der Griff ist reine Gestensprache: Er sagt „das hier lässt sich schieben",
     ohne dass etwas draufsteht. */
  .sus-filters .blattkopf .griff{position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:999px;background:var(--line)}
  .sus-filters .blattkopf strong{font-family:var(--f-display);font-size:17.5px;letter-spacing:-.02em}
  .sus-filters .blattkopf .zu{display:grid;place-items:center;width:38px;height:38px;padding:0;
    background:none;border:2px solid var(--line);border-radius:50%;color:var(--ink);cursor:pointer}
  .sus-filters .blattkopf .zu svg{width:18px;height:18px}
  .sus-filters .blattkopf .zu:hover{border-color:var(--brand);color:var(--brand)}

  /* Nur der Inhalt rollt, Kopf und Fuss bleiben stehen. */
  .sus-filters .blattinhalt{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
    padding:18px 18px 4px;overscroll-behavior:contain}
  /* Der Absendeknopf im Inhalt ist mit Skript überflüssig — app.js versteckt
     ihn ohnehin; hier wird zusätzlich der Platz zurückgegeben. */
  .js .sus-filters .blattinhalt .sus-btn{display:none}

  .sus-filters .blattfuss{display:block;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top:2px solid var(--line);background:#fff}
  .sus-filters .blattfuss .sus-btn{width:100%}

  /* Die Verdunkelung dahinter. */
  .sus-blende{position:fixed;inset:0;z-index:155;background:rgba(11,11,15,.45);
    backdrop-filter:blur(2px);opacity:0;transition:opacity .32s}
  .sus-blende[hidden]{display:none}
  .sus-blende.auf{opacity:1}
  /* Solange das Blatt offen ist, rollt die Seite dahinter nicht mit. */
  body.filterblatt{overflow:hidden}
}

/* ── 30 Vergleich ─────────────────────────────────────────────────────────
   Auswahlschalter, Reiter am rechten Rand, Gegenüberstellung.

   WARUM DER REITER MITTIG AM RECHTEN RAND SITZT
   Unten rechts steht der Knopf „nach oben", unten quer das Angebotsband, oben
   die Kopfleiste. Die vertikale Mitte am rechten Rand ist die einzige Kante,
   an der nichts anderes liegt — auf dem Telefon wie auf dem Desktop. */

/* Ohne Skript gibt es keine Auswahl, also auch keinen Schalter und keinen
   Reiter. Beides erscheint erst, wenn app.js die Klasse `js` vorfindet. */
.sus-vergleichsschalter{display:none}
.js .sus-vergleichsschalter{display:inline-flex}

.sus-vergleichsschalter{align-items:center;justify-content:center;border:2px solid var(--line);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);
  color:var(--ink-2);border-radius:var(--pill);font:inherit;font-size:12.5px;font-weight:650;
  letter-spacing:-.01em;cursor:pointer;line-height:1;
  transition:background var(--schnell),color var(--schnell),border-color var(--schnell),transform var(--schnell)}
.sus-vergleichsschalter svg{width:18px;height:18px;flex:none}
.sus-vergleichsschalter .haken{display:none}
.sus-vergleichsschalter:hover{border-color:var(--brand);color:var(--brand)}
.sus-vergleichsschalter:active{transform:scale(.94)}
.sus-vergleichsschalter[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.sus-vergleichsschalter[aria-pressed="true"] .waage{display:none}
.sus-vergleichsschalter[aria-pressed="true"] .haken{display:block}
.sus-vergleichsschalter[disabled]{opacity:.4;cursor:not-allowed}
.sus-vergleichsschalter[disabled]:hover{border-color:var(--line);color:var(--ink-2)}

/* AUF DER KACHEL: EIN KREIS.
   Gleiche Breite und Höhe, Radius aus der Hälfte davon — eine Pille mit
   ausgeblendetem Text ist eben KEIN Kreis, sie ist nur ein zu breiter Knopf.
   Er liegt über der Klickfläche der Karte (die liegt auf z-index 2); darunter
   wäre er nicht bedienbar, sondern nur ein weiterer Weg zur Produktseite. */
.sus-card .ph .sus-vergleichsschalter{position:absolute;top:12px;right:12px;z-index:3;
  width:40px;height:40px;padding:0;border-radius:50%;overflow:hidden}
.sus-card .ph .sus-vergleichsschalter .text{
  max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:max-width var(--schnell),opacity var(--schnell),margin-left var(--schnell)}

/* Am Zeiger wächst aus dem Kreis eine Pille mit dem Wort — auf dem Telefon,
   wo es kein Überfahren gibt, bleibt es beim Kreis. Dort erklärt die Waage,
   und spätestens der Reiter am Rand sagt, wofür. */
@media (hover:hover) and (pointer:fine){
  /* Feste Zielbreite statt `auto`: Nur so lässt sich die Breite überhaupt
     animieren — von 40 Pixeln auf `auto` springt sie. */
  .sus-card .ph .sus-vergleichsschalter{transition:background var(--schnell),color var(--schnell),
    border-color var(--schnell),transform var(--schnell),width var(--schnell),padding var(--schnell)}
  .sus-card .ph .sus-vergleichsschalter:hover,
  .sus-card .ph .sus-vergleichsschalter:focus-visible{width:134px;padding:0 12px;border-radius:var(--pill)}
  .sus-card .ph .sus-vergleichsschalter:hover .text,
  .sus-card .ph .sus-vergleichsschalter:focus-visible .text{max-width:110px;opacity:1;margin-left:7px}
}

.sus-vergleichsschalter.zeile{margin-top:18px;padding:9px 15px;font-size:13.5px;gap:7px}

/* Der Reiter. */
.sus-vergleichsreiter{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 9px;text-decoration:none;color:#fff;
  background:linear-gradient(160deg,var(--brand),var(--brand-h));
  border-radius:var(--r) 0 0 var(--r);box-shadow:var(--sh-3);
  transition:padding-right var(--schnell),box-shadow var(--schnell)}
.sus-vergleichsreiter[hidden]{display:none}
.sus-vergleichsreiter:hover,.sus-vergleichsreiter:focus-visible{padding-right:14px;color:#fff}
.sus-vergleichsreiter .zahl{display:grid;place-items:center;min-width:24px;height:24px;
  border-radius:var(--pill);background:#fff;color:var(--brand);
  font-size:13.5px;font-weight:750;letter-spacing:-.02em;padding:0 6px}
.sus-vergleichsreiter .wort{writing-mode:vertical-rl;font-size:12.5px;font-weight:650;
  letter-spacing:.02em;text-transform:none}
@media (prefers-reduced-motion:reduce){.sus-vergleichsreiter{transition:none}}

/* Die Gegenüberstellung. */
.sus-leerlauf{max-width:620px;margin:48px auto 72px;text-align:center}
.sus-leerlauf p{margin:0 0 20px}

.sus-vergleich{margin:28px 0 72px}
.sus-vergleich .steuerung{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  margin-bottom:18px;font-size:14.5px}
.sus-vergleich .nurabweichung{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.sus-vergleich .leeren{border:0;background:none;padding:0;font:inherit;font-size:14.5px;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sus-vergleich .leeren:hover{color:var(--err)}

/* Waagerecht rollen statt umbrechen: Vier Spalten mit Bild passen auf keinem
   Telefon nebeneinander, und eine umgebrochene Tabelle ist keine mehr. */
.sus-vergleich .rollen{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border:2px solid var(--line);border-radius:var(--r-lg);background:#fff}
/* Feste Spaltenbreiten: Ohne sie richtet der Browser die Breite nach dem
   längsten Zellinhalt aus — dann steht die Spalte mit dem Gerät, das viele
   Anschlüsse hat, doppelt so breit da wie die daneben, und die Kopfbilder
   stehen auf verschiedenen Höhen. Verglichen wird aber die Zeile, nicht die
   Wortzahl. */
.sus-vergleich table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;
  min-width:calc(190px + var(--spalten,3) * 210px)}
.sus-vergleich th,.sus-vergleich td{text-align:left;vertical-align:top;
  padding:11px 14px;font-size:14.5px;border-bottom:2px solid var(--line-2)}

/* Die Merkmalsspalte bleibt beim Rollen stehen — sonst weiss nach zwei
   Wischern niemand mehr, welche Zeile er gerade liest. */
.sus-vergleich tbody th[scope="row"],
.sus-vergleich thead th:first-child{position:sticky;left:0;z-index:2;background:#fff;
  font-weight:650;color:var(--ink-2);width:190px;
  box-shadow:2px 0 0 var(--line-2)}
/* DER TABELLENKOPF BLEIBT NICHT STEHEN.
   Er war es, mit `top: Kopfhöhe`. Nur: Er ist mit Bild, Name, Grösse und zwei
   Knöpfen rund 320 Pixel hoch — beim Herunterrollen schob er sich über die
   ersten Zeilen und verdeckte sie. Auf dem Telefon war der Effekt noch
   schlimmer, weil dort nur die ERSTE Kopfzelle klebte: Sie rutschte gegenüber
   ihrer eigenen Zeile nach unten, und von „Hersteller | PrintsPaul" blieb nur
   noch der Wert übrig.
   Stehen bleibt jetzt allein die Merkmalsspalte — die ist schmal, wird beim
   seitlichen Rollen wirklich gebraucht und verdeckt nichts. Wer die Spalten
   wieder zuordnen will, blendet mit „Nur Unterschiede zeigen" alles Gleiche
   aus; dann passt die Tabelle meist auf einen Bildschirm. */
.sus-vergleich thead th{background:#fff;border-bottom:2px solid var(--line);padding:16px 14px}
.sus-vergleich thead th:first-child{z-index:4;top:auto}
/* Der Tabellenkopf bleibt beim Rollen stehen — also darf er nicht den halben
   Bildschirm einnehmen. Ein Bild von 140 Pixeln reicht zum Wiedererkennen. */
/* WEISSER GRUND UND KEIN BLENDMODUS.
   Die Produktbilder liegen sonst im Multiplikationsmodus. Der hebt ein Bild in
   eine eigene Kompositionsebene — und damit AUS der normalen Malreihenfolge:
   Auf dem Telefon schien das Bild der vorherigen Spalte durch die stehende
   Merkmalsspalte hindurch, sobald man seitwärts rollte. Genau der Effekt, der
   im Katalog erwünscht ist (Bild verschmilzt mit der Kachelfarbe), macht hier
   die Tabelle kaputt. Hier gewinnt die Malreihenfolge. */
.sus-vergleich thead .bild{height:140px;background:#fff;border:2px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center}
/* Höhe in Pixeln, NICHT in Prozent: WordPress liefert das Bild mit eigenen
   width/height-Attributen, und eine Prozenthöhe im Rasterelement löste sich
   nicht auf — das Bild stand in voller Größe im 140-Pixel-Kasten und wurde
   oben abgeschnitten. */
.sus-vergleich thead .bild img{display:block;width:100%;height:140px;max-height:140px;
  object-fit:contain;padding:10px}
.sus-vergleich thead .bild .leer{font-size:12.5px;color:var(--ink-3);padding:12px;text-align:center}
.sus-vergleich thead .name{display:block;font-family:'Bricolage',system-ui,sans-serif;
  font-size:16.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  margin-bottom:8px}
.sus-vergleich thead .name:hover{color:var(--brand)}
.sus-vergleich thead .wege{display:flex;flex-direction:column;gap:9px;margin-top:13px}
.sus-vergleich thead .wege .sus-cta{width:100%;justify-content:center;font-size:13.5px;padding:10px 12px}
.sus-vergleich thead .raus{align-self:center;display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--ink-3);text-decoration:none;
  padding:3px 8px;border-radius:var(--pill);transition:color var(--schnell),background var(--schnell)}
.sus-vergleich thead .raus svg{width:12px;height:12px;flex:none}
.sus-vergleich thead .raus:hover{color:var(--err);background:var(--signal-tint)}

.sus-vergleich tr.gruppe th{background:var(--paper-2);padding:9px 0;
  box-shadow:none;border-bottom:2px solid var(--line)}
/* Nicht die Zelle klebt, sondern ihre Beschriftung — die Zelle ist so breit
   wie die Tabelle und hätte keinen Weg zu kleben. */
.sus-vergleich tr.gruppe th span{position:sticky;left:0;display:inline-block;
  padding:0 14px;font-family:'Bricolage',system-ui,sans-serif;font-size:12.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sus-vergleich tr.abweichung td{background:color-mix(in srgb,var(--brand-tint) 45%,#fff)}
.sus-vergleich .sus-unverified{color:var(--ink-3)}

/* „Nur Unterschiede": Zeilen ohne Abweichung fallen weg, die Gruppenzeile
   ebenfalls, sobald in ihrer Gruppe nichts mehr steht (Skript setzt `leer`). */
.sus-vergleich.nur-unterschiede tr.gleich{display:none}
.sus-vergleich.nur-unterschiede tbody.leer{display:none}

@media (max-width:719px){
  /* Eine Spaltenbreite, die aufgeht: Merkmale 130 Pixel, und JEDE Gerätespalte
     genau so breit wie der Rest des sichtbaren Bereichs. Vorher blieb rechts
     ein Streifen der nächsten Spalte stehen — das ist der Grund, warum sich
     das Wischen falsch anfühlte: Man kam nie irgendwo an. */
  .sus-vergleich table{min-width:calc(152px + var(--spalten,3) * (100% - 152px))}
  /* „Bildschirmdiagonale" ist ein Wort und passt in keine 110 Pixel. Ohne
     Trennung stösst es an die Spaltenkante; mit `hyphens:auto` trennt der
     Browser nach deutschen Regeln (die Seite ist als `de` ausgezeichnet). */
  .sus-vergleich tbody th[scope="row"],
  .sus-vergleich thead th:first-child{width:152px;font-size:12.5px;
    hyphens:auto;-webkit-hyphens:auto}
  .sus-vergleich th,.sus-vergleich td{padding:10px 12px;font-size:13.5px}
  .sus-vergleichsreiter{padding:12px 7px}
}