/* ================================================================
   SABTEC — Designsystem (gemeinsame Sektions-Bausteine)
   ================================================================
   Herkunft: der abgenommene Prototyp `design/22-07-2026-seitenset/`.
   Diese 274 Regeln sind auf ALLEN 19 Prototyp-Seiten identisch und
   damit die geteilte Basis jeder Seite. Uebernommen 14.08.2026.

   REGELN FUER DIESE DATEI
   - Sie ist gemeinsames Gut. Wer eine Seite baut, aendert sie NICHT.
     Braucht eine Seite eine eigene Regel, gehoert die nach
     `assets/css/<slug>.css`. Aenderungen hier gehen ueber Jakob.
   - Keine Farb- oder Schriftliterale. Alles kommt aus theme.json
     (--wp--preset--* und --wp--custom--ui--*).
   - Header, Fusszeile und Mega-Menue stehen NICHT hier, die bildet
     `style.css` als FSE-Teile ab (Klassen .sabtec-*).

   AUFBAU
   1. Alias-Ebene: Prototyp-Variablen zeigen auf die theme.json-Tokens
   2. Seiten-Reset (gescoped auf .sabtec-page)
   3. Bausteine: Buttons, Seitenkopf, Sektionen, Karten, Raster,
      Filter, Formulare, Popups, Modals
   ================================================================ */

/* 1. Alias — der Prototyp denkt in --blue/--green, die Wahrheit steht
      in theme.json. Beide Namen zeigen auf denselben Wert. */
:root {
	--blue:    var(--wp--preset--color--primary);
	--blue-d:  var(--wp--preset--color--primary-deep);
	--green:   var(--wp--preset--color--accent);
	--green-d: var(--wp--preset--color--accent-deep);
	--ink:     var(--wp--preset--color--ink);
	--mut:     var(--wp--preset--color--muted);
	--soft:    var(--wp--preset--color--soft);
	--bg:      var(--wp--preset--color--section);
	--line:    var(--wp--preset--color--hairline);
	--card:    var(--wp--preset--color--white);
}

/* 2. Seiten-Reset. Gescoped auf .sabtec-page, damit Kopf, Fuss und der
      Block-Editor unberuehrt bleiben. Innerhalb der Seiteninhalte gilt
      damit exakt das Abstandsverhalten des Prototyps. */
.sabtec-page, .sabtec-page *, .sabtec-page *::before, .sabtec-page *::after {
	margin: 0; padding: 0; box-sizing: border-box;
}
.sabtec-page ul:not([class]), .sabtec-page ol:not([class]) { padding-left: 1.25em; }
.sabtec-page img { max-width: 100%; display: block; }

/* Innenbreite. Im Prototyp .wrap, hier an die Layout-Groesse aus
   theme.json gebunden statt an einen zweiten Zahlenwert. */
.wrap {
	max-width: var(--wp--style--global--content-size, 1280px);
	margin: 0 auto;
	padding: 0 var(--wp--custom--gutter);
}

/* 3. Bausteine ------------------------------------------------------ */
.eyebrow{font-size:12px;font-weight:900;letter-spacing:4px;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:11px;vertical-align:middle;position:relative;top:-1px}
/* Buttons: Pills */
.btn,.bigbtn{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:var(--wp--preset--color--white);padding:16px 32px;font-weight:900;font-size:15px;border-radius:40px}
.btn svg,.bigbtn svg{width:18px;height:18px}
.btn:hover,.bigbtn:hover{background:var(--blue-d)}
.btn.ghost,.bigbtn.ghost{background:var(--wp--preset--color--white);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--wp--custom--ui--line-strong)}
.btn.ghost:hover,.bigbtn.ghost:hover{background:var(--wp--custom--ui--hover-soft)}
.navsearch{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--wp--custom--ui--line-strong);background:var(--wp--preset--color--white);color:var(--ink);flex:none}
.navsearch svg{width:18px;height:18px;color:var(--blue)}
.navsearch:hover{background:var(--wp--custom--ui--hover-soft)}
.navcall{display:inline-flex;align-items:center;gap:8px;background:var(--wp--preset--color--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--wp--custom--ui--line-strong);padding:11px 20px;border-radius:40px;font-weight:900;font-size:14px;white-space:nowrap}
.navcall svg{width:16px;height:16px;color:var(--blue)}
.navcall:hover{background:var(--wp--custom--ui--hover-soft)}
.navcta{background:var(--blue);color:var(--wp--preset--color--white);padding:11px 22px;border-radius:40px;font-weight:900;font-size:14px;white-space:nowrap}
.navcta:hover{background:var(--blue-d)}
/* Seitenkopf-Panel: eckig, mehr Luft */
.sub{background:var(--blue);color:var(--wp--preset--color--white);margin:0;padding:72px max(48px,calc((100% - 1280px)/2));display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.sub h1{font-size:46px;font-weight:900;letter-spacing:-1.5px;line-height:1.05}
.sub p{color:var(--wp--custom--ui--on-primary-text);margin-top:12px;font-size:17px;max-width:660px}
.sub .crumb{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--wp--custom--ui--on-primary-dim);font-weight:900;margin-bottom:14px}
.sub .navcta{background:var(--wp--preset--color--white);color:var(--blue);padding:14px 28px}
.sub .navcta:hover{background:var(--wp--custom--ui--on-primary-hover)}
.toggle{display:flex;background:rgba(255,255,255,.13);border-radius:40px;padding:5px}
.toggle a{padding:12px 28px;border-radius:40px;font-weight:900;font-size:15px;color:var(--wp--custom--ui--on-primary-line)}
.toggle a.on{background:var(--wp--preset--color--white);color:var(--blue)}
/* Hero Startseite */
.hero{text-align:center;padding:96px 0 0}
/* 19.08.2026: `.hero` hat keinen seitlichen Innenabstand, die Breite haengt
   allein an `max-width`. Gemessen auf der Startseite: bei 390 px standen
   8 px zwischen Fliesstext und Bildschirmrand, bei 700 px 2 px, bei 768
   und 820 px 0 px. `min()` haelt bei 1440 px rechnerisch dieselben 940 bzw.
   600 px wie zuvor — der Frame bleibt unberuehrt. */
.hero h1{font-size:78px;line-height:1.03;font-weight:900;letter-spacing:-2.5px;max-width:min(940px, 100% - 2 * var(--wp--custom--gutter));margin:26px auto 0}
.hero h1 span{color:var(--blue)}
.hero p{font-size:21px;color:var(--mut);max-width:min(600px, 100% - 2 * var(--wp--custom--gutter));margin:28px auto 40px}
.hbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.heroshot{margin:80px auto 0;max-width:1280px;height:580px;background-size:cover;background-position:center;box-shadow:0 40px 80px -50px rgba(20,22,40,.45)}
/* Trust */
.trust{display:flex;justify-content:center;gap:96px;flex-wrap:wrap;padding:88px 0;color:var(--soft)}
.trust .t{text-align:center}
.trust b{font-size:44px;font-weight:900;color:var(--blue);display:block;line-height:1;margin-bottom:8px}
.trust span{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase}
/* Sektionen: grosszuegiger Rhythmus */
/* 20.08.2026: `--sec-y` traegt die drei Stufen des Sektionsrasters
   (112 / 88 / 64). Die Bindung steht HIER und nicht am Dateiende, weil
   `.sec-rechtstext` (Zeile ~520) und `.kaufen-anfrage` dieselbe Spezifitaet
   haben und weiter unten stehen — eine spaetere `.sec`-Regel wuerde ihre
   Sonderabstaende ueberschreiben. */
.sec{padding:var(--sec-y) 0 0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:48px;gap:16px;flex-wrap:wrap}
.sec-h h2{font-size:44px;font-weight:900;letter-spacing:-1.5px;line-height:1.05}
.sec-h span{color:var(--blue);font-weight:900;letter-spacing:3px;text-transform:uppercase;font-size:12px}
.sec-h a.more{color:var(--blue);font-weight:900;font-size:15px}
.center{text-align:center}
.center h2{font-size:46px;font-weight:900;letter-spacing:-1.5px;max-width:800px;margin:0 auto}
.center .eyebrow{display:block;margin-bottom:18px}
.center .secsub{font-size:17px;color:var(--mut);max-width:560px;margin:18px auto 0}
/* Standorte-Band */
.standorte{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.stx{position:relative;overflow:hidden;min-height:380px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.stx .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(22,18,52,.85))}
/* Nachtrag 19.08.2026: Derselbe Befund wie am 18.08. bei `.dx`, hier aber
   nicht mitgezogen. Der Verlauf beginnt erst bei 35 % — die Ueberschrift der
   Standortkachel liegt bei rund 55 % und damit im fast durchsichtigen
   Bereich. Auf dem Foto des Showparks (heller Himmel, helles Pflaster) traegt
   weisze 30-px-Schrift dort nicht. Zweiter Effekt: In das Foto ist auf der
   Glasscheibe das SABTEC-Signet eingebrannt, es sasz genau hinter dem Wort
   „Krozingen". Ein staerkerer Verlauf schiebt beides auseinander. Ein eigenes
   Motiv fuer Bad Krozingen bleibt der bessere Weg — es steht auf der Liste
   fuers Shooting. */
.stx .ov{
	background:linear-gradient(180deg,
		rgba(22,18,52,.34) 0%,
		rgba(22,18,52,.26) 26%,
		rgba(22,18,52,.78) 64%,
		rgba(22,18,52,.93) 100%);
}
.stx .in{position:relative;z-index:2;padding:36px;color:var(--wp--preset--color--white)}
.stx h3{font-size:30px;font-weight:900;letter-spacing:-.5px}
.stx p{font-size:14.5px;color:var(--wp--custom--ui--on-primary-flaeche);max-width:430px;margin-top:8px}
.stx .badge-neu{position:absolute;top:22px;left:22px;z-index:2;background:var(--wp--preset--color--white);color:var(--blue);font-weight:900;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:9px 16px;border-radius:40px}
.stx .links{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.stx .links a{background:rgba(255,255,255,.16);backdrop-filter:blur(4px);border-radius:40px;padding:10px 18px;font-weight:900;font-size:13px;color:var(--wp--preset--color--white)}
.stx .links a:hover{background:var(--wp--preset--color--white);color:var(--blue)}
/* Kategorien-Grid */
.katgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kx{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:.15s}
.kx:hover{box-shadow:0 20px 44px -24px rgba(20,22,40,.25);transform:translateY(-3px)}
.kx .pic{height:200px;background-size:cover;background-position:center}
.kx .tx{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.kx h4{font-size:20px;font-weight:900}
.kx p{font-size:14.5px;color:var(--mut);margin-top:8px}
.kx .flist{margin:16px 0 0}
.kx .lnk{margin-top:auto;padding-top:20px}
.flist{display:flex;gap:10px;flex-wrap:wrap}
.fpill{background:var(--wp--preset--color--white);border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-weight:700;font-size:13.5px}
.lnk{color:var(--blue);font-weight:900;display:inline-flex;align-items:center;gap:8px;font-size:15px}
.lnk svg{width:17px;height:17px}
/* Show-Reihen */
/* 19.08.2026: Hier stand `padding:112px 0 0`. Die Kurzform hebt den
   seitlichen Innenabstand von `.wrap` (Zeile 50) auf — die drei grossen
   Reihen der Startseite liefen zwischen 701 und 1280 px randlos bis an
   den Bildschirmrand (gemessen bei 768 und 1024 px: Inhalt bei x = 0,
   jede andere Sektion bei x = 48). Bei 1440 px faellt es nicht auf, weil
   der Body 80 px Rand gibt — deshalb ist es nie aufgefallen. */
.show{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;padding-top:var(--sec-y)}
.show.alt .txt{order:2}
.show.alt .vis{order:1}
.show h2{font-size:44px;font-weight:900;letter-spacing:-1.5px;line-height:1.05}
.show h2 span{color:var(--blue)}
.show p{font-size:17.5px;color:var(--mut);margin:22px 0 28px;max-width:460px}
.show .vis{overflow:hidden;height:440px;background-size:cover;background-position:center;box-shadow:0 30px 60px -40px rgba(20,22,40,.35)}
/* Katalog-App */
.app{display:grid;grid-template-columns:300px 1fr;gap:28px;padding:48px 48px 0;max-width:1440px;margin:0 auto;align-items:start}
.side{position:sticky;top:104px;background:var(--card);border:1px solid var(--line);padding:30px}
.side h4{font-size:11.5px;text-transform:uppercase;letter-spacing:1.5px;color:var(--soft);margin:24px 0 12px}
.side h4:first-child{margin-top:0}
.chk{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:15px;font-weight:700;color:var(--wp--custom--ui--ink-2);cursor:pointer;user-select:none}
.box{width:20px;height:20px;border:2px solid var(--wp--custom--ui--line-box);border-radius:6px;flex:none;position:relative}
.chk.on .box{background:var(--green-d);border-color:var(--green-d)}
.chk.on .box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--wp--preset--color--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{border:1.5px solid var(--wp--custom--ui--line-chip);border-radius:30px;padding:9px 17px;font-size:13.5px;font-weight:700;color:var(--wp--custom--ui--ink-nav);cursor:pointer;user-select:none;background:var(--wp--preset--color--white)}
.fchip.on{background:var(--green);color:var(--ink);border-color:var(--green)}
.rhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.rhead b{font-size:16.5px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:.15s}
.card:hover{box-shadow:0 20px 44px -24px rgba(20,22,40,.25);transform:translateY(-3px)}
.card .pic{height:190px;background:var(--wp--custom--ui--flaeche-bild) center/contain no-repeat;position:relative}
.card .pic.cover{background-size:cover}
.card .seller{position:absolute;right:14px;top:14px;background:var(--blue);color:var(--wp--preset--color--white);font-size:11px;font-weight:900;border-radius:30px;padding:7px 13px}
.card .tag{display:inline-block;background:var(--wp--preset--color--primary-soft);color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;padding:5px 12px;border-radius:30px;margin:20px 22px 0}
.card .av{float:right;font-size:11px;font-weight:900;color:var(--wp--custom--ui--status-frei);margin:22px 22px 0}
.card .av.anf{color:var(--wp--custom--ui--status-anfrage)}
.card h3{font-size:20px;font-weight:900;margin:12px 22px 2px}
.card .spec{margin:6px 22px 0;font-size:14px;color:var(--mut)}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 22px 0}
.badge{background:var(--wp--custom--ui--flaeche-hell);border-radius:30px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--wp--custom--ui--ink-nav)}
/* 19.08.2026: `margin-top` stand hier zweimal — das spaetere `22px` hat das
   `auto` ueberschrieben. Folge: Die Knopfzeile folgte dem Textende statt dem
   Kachelboden, und in einem Raster mit unterschiedlich langen Texten sasz sie
   auf drei verschiedenen Hoehen (gemessen auf /gebrauchtcontainer/: 545, 617,
   566 px). Der Mindestabstand zum Text steckt jetzt im Innenabstand. */
.card .cfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:22px;border-top:1px solid var(--line)}
.card .det{color:var(--blue);font-weight:900;font-size:14px;display:flex;align-items:center;gap:6px}
.card .det svg{width:15px;height:15px}
.card .req{background:var(--blue);color:var(--wp--preset--color--white);font-weight:900;font-size:13px;padding:10px 18px;border-radius:30px}
.card .req:hover{background:var(--blue-d)}
/* Einsatzbereiche */
.ebrow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ebx{position:relative;overflow:hidden;height:280px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.ebx .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(22,18,52,.82))}
.ebx .in{position:relative;z-index:2;padding:26px;color:var(--wp--preset--color--white)}
.ebx h4{font-size:21px;font-weight:900}
.ebx p{font-size:13px;color:var(--wp--custom--ui--on-primary-flaeche);margin-top:3px}
.ebx:hover .ov{background:linear-gradient(180deg,rgba(36,23,136,.15),rgba(22,18,52,.9))}
/* Claim-Band */
.band{position:relative;height:440px;background-size:cover;background-position:center;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;margin:var(--sec-y) auto 0;max-width:1280px}
.band .ov{position:absolute;inset:0;background:rgba(22,18,52,.58)}
.band .c{position:relative;z-index:2;color:var(--wp--preset--color--white);padding:0 30px}
.band h2{font-size:50px;font-weight:900;letter-spacing:-1.5px}
.band p{margin-top:16px;color:var(--wp--custom--ui--on-primary-flaeche-2);font-size:15px;letter-spacing:3px;text-transform:uppercase;font-weight:700}
/* Referenzen */
.refband{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.refx{position:relative;overflow:hidden;height:300px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.refx.w2{grid-column:span 2}
.refx .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(22,18,52,.85))}
.refx .in{position:relative;z-index:2;padding:26px;color:var(--wp--preset--color--white)}
.refx h4{font-size:20px;font-weight:900}
.refx span{font-size:12.5px;color:var(--wp--custom--ui--on-primary-flaeche)}
.refx .pill{position:absolute;top:16px;left:16px;z-index:2;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:900;border-radius:30px;padding:6px 12px}
.refx .pill.k{background:var(--blue);color:var(--wp--preset--color--white)}
.playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center}
.playbtn svg{width:26px;height:26px;color:var(--blue);margin-left:4px}
/* Bild-Kacheln mit Text */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.dx{position:relative;overflow:hidden;min-height:300px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.dx .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(22,18,52,.88))}
/* Nachtrag 18.08.2026: Der Verlauf oben beginnt erst bei 30 % der Kachelhoehe.
   Das traegt bei 300 px, nicht aber bei den flachen Teaserkacheln (240–260 px),
   die `kaufen.css` und die Rasterkacheln setzen — dort liegen Eyebrow und
   Ueberschrift im durchsichtigen Bereich, weisze Schrift auf hellem Foto.
   Gemessen wurden 1,4:1 bis 2,3:1 gegen noetige 3:1. Flache Kacheln bekommen
   deshalb einen Verlauf, der oben schon deckt. */
.dx .ov{
	background:linear-gradient(180deg,
		rgba(22,18,52,.42) 0%,
		rgba(22,18,52,.30) 28%,
		rgba(22,18,52,.72) 68%,
		rgba(22,18,52,.92) 100%);
}
.dx .in{position:relative;z-index:2;padding:32px;color:var(--wp--preset--color--white)}
/* 19.08.2026: Die Eyebrow stand in `on-primary-text` (ein helles Lavendel)
   und war auf den Fotokacheln praktisch unlesbar — am gerenderten Pixel
   gemessen 1,63 bis 2,58 : 1 gegen geforderte 4,5. Sie sitzt am oberen
   Rand des Textblocks, wo der Verlauf am wenigsten deckt. Der Ton ist fuer
   FLAECHEN gedacht, nicht fuer Schrift auf einem Foto. Jetzt Weiss. */
.dx .k{font-size:11.5px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;color:var(--wp--preset--color--white)}
.dx h3{font-size:28px;font-weight:900;letter-spacing:-.5px;margin:8px 0 6px}
.dx p{font-size:14.5px;color:var(--wp--custom--ui--on-primary-flaeche);max-width:420px}
.dx .cta{display:inline-flex;margin-top:18px;background:var(--wp--preset--color--white);color:var(--blue);font-weight:900;font-size:14px;padding:12px 22px;border-radius:40px}
/* Leistungen / Trio */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.lcell{background:var(--card);border:1px solid var(--line);padding:36px 32px}
.lcell svg{width:38px;height:38px;color:var(--blue);margin-bottom:18px}
.lcell h4{font-size:19px;font-weight:900}
.lcell p{font-size:14.5px;color:var(--mut);margin-top:7px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:64px;text-align:left}
.trio .c svg{width:42px;height:42px;color:var(--blue);margin-bottom:18px}
.trio h4{font-size:20px;font-weight:900;margin-bottom:8px}
.trio p{font-size:15px;color:var(--mut)}
/* Schritte */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:st}
.step{background:var(--card);border:1px solid var(--line);padding:28px 26px;counter-increment:st}
/* Die Schrittzahl stand bis zum 29.08.2026 in `accent-pale` (#cfe1a3).
   Auf dem weiszen Kartengrund sind das gemessene 1,40 : 1 — WCAG 1.4.3
   verlangt fuer grosze Schrift (30 px fett) 3 : 1. Auch der Hauptton
   `accent` (#a3c754) reicht mit 1,93 : 1 nicht.
   `accent-deep` (#5c7a24, 4,92 : 1) ist der Token, den das Projekt genau
   fuer solche Faelle fuehrt — es kommt also keine neue Farbe dazu, die
   Zahl wird nur dunkler. Der Frame zeigt sie heller; das ist eine bewusste
   Abweichung. Wer den hellen Ton zurueckhaben will, muss ihn in der
   Erklaerung zur Barrierefreiheit als vierte Abweichung ausweisen.
   `pruefe-live.js` hat die Stelle nicht gemeldet: Es misst Textfarben
   gegen Hintergrundfarben, und `content` aus einem ::before-Element
   zaehlt dort nicht als Textknoten. */
.step::before{content:"0" counter(st);font-size:30px;font-weight:900;color:var(--wp--preset--color--accent-deep);display:block;line-height:1}
.step h5{font-size:15px;font-weight:900;margin-top:12px}
.step p{font-size:13.5px;color:var(--mut);margin-top:4px}
/* Werte / Meilensteine / Team */
.vgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.vcell{background:var(--card);border:1px solid var(--line);padding:30px 26px}
.vcell b{display:block;font-size:15px;margin-top:12px}
.vcell p{font-size:13.5px;color:var(--mut);margin-top:5px}
.vcell svg{width:26px;height:26px;color:var(--blue)}
.vcell .jahr{font-size:28px;font-weight:900;color:var(--blue);letter-spacing:-1px;margin-top:0}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.tcard{background:var(--card);border:1px solid var(--line);overflow:hidden;text-align:center;padding-bottom:26px}
.tcard .ph{height:220px;background:linear-gradient(160deg,var(--wp--preset--color--primary-soft),var(--wp--custom--ui--on-primary-flaeche-3));display:flex;align-items:center;justify-content:center;position:relative}
.tcard .ph .ini{font-size:50px;font-weight:900;color:var(--blue);opacity:.5;letter-spacing:-2px}
.tcard .ph .foto{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--wp--preset--color--white);border-radius:30px;font-size:10.5px;font-weight:900;color:var(--wp--custom--ui--hinweis-ink-2);padding:5px 12px;white-space:nowrap}
.tcard h4{font-size:17px;font-weight:900;margin:20px 0 3px}
.tcard span{display:block;font-size:13.5px;color:var(--mut)}
.tcard a{display:inline-block;margin-top:12px;color:var(--blue);font-weight:900;font-size:13.5px}
.tcard.group .ph{height:180px}
/* Aktuelles */
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ncard{background:var(--card);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column}
.ncard .nd{font-size:11.5px;font-weight:900;color:var(--soft);letter-spacing:1.5px;text-transform:uppercase}
.ncard h4{font-size:18.5px;font-weight:900;margin:12px 0 8px;line-height:1.35;letter-spacing:-.3px}
.ncard p{font-size:14.5px;color:var(--mut)}
.ncard a{margin-top:auto;padding-top:18px;color:var(--blue);font-weight:900;font-size:14px}
/* FAQ */
.faqsearch{display:flex;gap:0;max-width:660px;margin:0 auto 48px;background:var(--wp--preset--color--white);border:1.5px solid var(--wp--custom--ui--line-strong);border-radius:40px;padding:6px 6px 6px 26px;align-items:center}
.faqsearch svg{width:19px;height:19px;color:var(--blue);flex:none}
.faqsearch input{flex:1;border:none;outline:none;font-size:15.5px;font-family:inherit;padding:13px 14px;background:transparent;color:var(--ink)}
.faqsearch button{background:var(--blue);color:var(--wp--preset--color--white);border:none;border-radius:40px;padding:13px 26px;font-weight:900;font-size:14px;font-family:inherit;cursor:pointer}
/* Der negative Zug setzt den Hinweis unter die Suchpille — er stimmt nur,
   solange er EINZEILIG ist. Bei 390 px bricht die Zeile auf zwei Zeilen und
   der Block wird in die Pille hineingezogen; gemessen am 19.08.: der Text
   lief quer ueber deren unteren Rundungsrand. Die schmale Fassung steht
   weiter unten im Mobil-Nachtrag. */
.faqsearch-hint{text-align:center;font-size:12.5px;color:var(--soft);margin:-34px auto 48px}
.faq details{background:var(--card);border:1px solid var(--line);margin-bottom:14px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:24px 30px;font-weight:900;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--blue);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 30px 24px;color:var(--mut);font-size:15px;max-width:840px}
/* Schadensmeldung */
.schaden{background:var(--blue);color:var(--wp--preset--color--white);padding:52px 48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-top:64px}
.schaden h3{font-size:28px;font-weight:900;letter-spacing:-.5px}
.schaden p{color:var(--wp--custom--ui--on-primary-text);margin-top:8px;font-size:15.5px;max-width:560px}
.schaden .btn{background:var(--wp--preset--color--white);color:var(--blue)}
.schaden .btn:hover{background:var(--wp--custom--ui--on-primary-hover)}
/* Downloads */
.dlgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dl{background:var(--card);border:1px solid var(--line);padding:24px 28px;display:flex;align-items:center;gap:18px}
.dl svg{width:30px;height:30px;color:var(--blue);flex:none}
.dl b{display:block;font-size:15.5px}
.dl span{font-size:12.5px;color:var(--mut)}
.dl .get{margin-left:auto;background:var(--wp--preset--color--primary-soft);color:var(--blue);font-weight:900;font-size:12.5px;border-radius:30px;padding:8px 15px;white-space:nowrap}
/* Formular */
.form{background:var(--card);border:1px solid var(--line);padding:40px}
.form label{display:block;font-size:13px;font-weight:900;margin:18px 0 7px;color:var(--wp--custom--ui--ink-nav)}
.form input,.form select,.form textarea{width:100%;border:1.5px solid var(--wp--custom--ui--line-chip);border-radius:14px;padding:14px 17px;font-size:15px;font-family:inherit;background:var(--wp--preset--color--white);color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.form .dsg{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mut);margin-top:18px}
.form button{margin-top:24px;background:var(--blue);color:var(--wp--preset--color--white);border:none;border-radius:40px;padding:16px 34px;font-weight:900;font-size:15.5px;font-family:inherit;cursor:pointer}
.form button:hover{background:var(--blue-d)}
.kcard{background:var(--card);border:1px solid var(--line);padding:30px;margin-bottom:20px}
.kcard h4{font-size:15px;font-weight:900;display:flex;align-items:center;gap:9px}
.kcard h4 svg{width:19px;height:19px;color:var(--blue)}
.kcard p{font-size:14.5px;color:var(--mut);margin-top:8px}
.kcard.blue{background:var(--blue);color:var(--wp--preset--color--white);border-color:var(--blue)}
.kcard.blue h4{color:var(--wp--preset--color--white)}
.kcard.blue h4 svg{color:var(--wp--preset--color--white)}
.kcard.blue p{color:var(--wp--custom--ui--on-primary-text)}
/* CTA-Band + Footer */
.ctab{background:var(--blue);color:var(--wp--preset--color--white);margin:var(--sec-y) 0 0;padding:80px max(48px,calc((100% - 1280px)/2));display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:28px}
.ctab h2{font-size:38px;font-weight:900;letter-spacing:-1px;max-width:640px;line-height:1.12}
.ctab p{color:var(--wp--custom--ui--on-primary-text);margin-top:12px;font-size:15.5px}
.ctab .bigbtn{background:var(--wp--preset--color--white);color:var(--blue)}
.ctab .bigbtn:hover{background:var(--wp--custom--ui--on-primary-hover)}
/* Hinweis-Badge */
.annot{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.4px;color:var(--wp--custom--ui--hinweis-ink);background:var(--wp--custom--ui--hinweis-bg);border:1px dashed var(--wp--custom--ui--hinweis-line);padding:4px 10px;border-radius:30px;vertical-align:middle}
/* Showpark-Popup */
.pop{position:fixed;inset:0;background:rgba(20,16,50,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.pop.show{display:flex}
.popin{background:var(--wp--preset--color--white);border-radius:20px;max-width:560px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative}
.popin .pic{height:220px;background-size:cover;background-position:center}
.popin .tx{padding:32px 34px 34px}
.popin .k{color:var(--blue);font-weight:900;letter-spacing:3px;font-size:11.5px;text-transform:uppercase}
.popin h3{font-size:28px;font-weight:900;letter-spacing:-.5px;margin:10px 0 8px}
.popin p{font-size:15px;color:var(--mut)}
.popin .row{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
/* `font-family:inherit` ergaenzt 19.08.2026 — ohne die Angabe laesst der
   Browser `<button>` auf seiner Voreinstellung, das Kreuz lief in Arial.
   Acht andere Schaltflaechenregeln in dieser Datei setzen es bereits. */
.popx{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);border:none;font-size:19px;font-weight:900;font-family:inherit;cursor:pointer;color:var(--ink);z-index:5}
/* Modal Schadensmeldung */
.modal{position:fixed;inset:0;background:rgba(20,16,50,.55);z-index:210;display:none;align-items:center;justify-content:center;padding:24px}
.modal.show{display:flex}
.modalin{background:var(--wp--preset--color--white);border-radius:20px;max-width:520px;width:100%;padding:38px;position:relative;max-height:90vh;overflow:auto}
.modalin h3{font-size:24px;font-weight:900;letter-spacing:-.5px}
.modalin .sub2{font-size:14px;color:var(--mut);margin-top:6px}
/* Responsive */
@media(max-width:1120px){
.hero h1{font-size:56px}
.heroshot{height:400px;margin-left:28px;margin-right:28px}
.grid,.ebrow,.lgrid,.ngrid,.katgrid{grid-template-columns:repeat(2,1fr)}
.refband{grid-template-columns:repeat(2,1fr)}
.vgrid,.steps,.trio{grid-template-columns:repeat(2,1fr)}
.tgrid{grid-template-columns:repeat(2,1fr)}
.app{grid-template-columns:1fr}.side{position:static}
.show{grid-template-columns:1fr;gap:36px}
.show.alt .txt{order:1}.show.alt .vis{order:2}
.trust{gap:52px;padding:64px 0}
}
@media(max-width:700px){
.sub{padding:52px 22px}
.ctab{padding:56px 22px}
.app{padding:28px 18px 0}
.hero{padding-top:64px}
.hero h1{font-size:40px;letter-spacing:-1.5px}
.sub h1{font-size:32px}
.grid,.ebrow,.lgrid,.ngrid,.refband,.vgrid,.steps,.tgrid,.standorte,.dlgrid,.katgrid,.trio,.dual{grid-template-columns:1fr}
.refx.w2{grid-column:auto}
.heroshot{height:260px}
.band{height:340px;margin-left:0;margin-right:0}
.trust{gap:36px}
}

/* ================================================================
   NACHTRAG 15.08.2026 — aus den Rueckmeldungen der sieben Bauläufe.
   Was hier steht, hatten mehrere Seiten sonst je einzeln nachgebaut.
   ================================================================ */

/* Ueberschriften ebenenunabhaengig ansprechen.
   Der Prototyp springt an vielen Stellen von h2 auf h4 oder h5. Das ist ein
   Gliederungsfehler (BFSG), deshalb bauen die Seiten dort h3. Die Gestaltung
   haengt aber am Tag — ohne diese Regeln muesste jede Seite dieselbe Korrektur
   noch einmal schreiben, und genau das ist in vier Seiten parallel passiert. */
.kx :is(h3, h4),
.ebx :is(h3, h4),
.trio :is(h3, h4),
.ncard :is(h3, h4),
.lcell :is(h3, h4),
.dx :is(h3, h4),
.kcard :is(h3, h4),
.tcard :is(h3, h4),
.refx :is(h3, h4),
.vcell :is(h3, h4, b) { line-height: 1.35; }

.lcell :is(h3, h4) { font-size: 19px; font-weight: 900; margin-top: 14px; }
.step :is(h3, h4, h5) { font-size: 15px; font-weight: 900; margin-top: 12px; line-height: 1.35; }
.side :is(h2, h4) { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.4px; }

/* Seitenrand mobil. Der Wert kommt aus dem Gutter-Token, das style.css unter
   700px auf 22px setzt — die Regel hier haelt die Bindung sichtbar, damit
   niemand wieder 48px misst und einen Fehler vermutet. */
@media (max-width: 700px) {
	.wrap { padding-left: var(--wp--custom--gutter); padding-right: var(--wp--custom--gutter); }
	/* Der Prototyp laesst .grid.g2 auch auf dem Telefon zweispaltig stehen —
	   die Regel .grid{1fr} verliert gegen die hoehere Spezifitaet von .grid.g2.
	   Zwei Kacheln nebeneinander sind bei 390px unlesbar. */
	.grid.g2 { grid-template-columns: 1fr; }
}

/* Filter-Chips und Auswahlkaesten muessen echte Bedienelemente sein.
   Als <span> mit Klick-Handler waren sie ohne Maus nicht erreichbar. Sobald
   sie <button> sind, erben sie die Schrift nicht mehr von selbst — Chrome
   rendert sie sonst in Arial. */
.fchip {
	font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2;
	appearance: none; -webkit-appearance: none;
}
.chk { font: inherit; font-size: 15px; font-weight: 700; }

/* Zustaende, die auf mehreren Seiten gebraucht werden: Platzhalter, solange
   Material der Kundin fehlt, und die dritte Verfuegbarkeitsstufe. */
.card .pic.ph,
.pic.ph {
	background: var(--wp--custom--ui--flaeche-bild);
	display: flex; align-items: center; justify-content: center;
	color: var(--wp--preset--color--soft); font-size: 13px; font-weight: 700;
}
.badge.ph, .tag.ph { color: var(--wp--preset--color--soft); font-style: italic; }
.card .av.kauf { color: var(--wp--custom--ui--status-anfrage); }

/* ================================================================
   NACHTRAG 16.08.2026 — aus den Rueckmeldungen der zehn Bauläufe
   der Welle B. Dieselbe Regel wie am 15.08.: was mehrere Seiten sonst
   je einzeln nachbauen muessten, steht hier einmal.
   ================================================================ */

/* --- Ueberschriften ebenenunabhaengig bemaszen ---------------------
   Der Nachtrag vom 15.08. hat nur die Zeilenhoehe ebenenunabhaengig
   gemacht. Groesze, Gewicht und Abstaende hingen weiter am Tag `h4`,
   den keine Seite mehr baut — vier Bauläufe der Welle B haben deshalb
   dieselbe Korrektur je einzeln in ihre Seiten-CSS geschrieben. */
.tcard :is(h2, h3) { font-size: 17px; font-weight: 900; margin: 20px 0 3px; }
.ncard :is(h2, h3) { font-size: 18.5px; font-weight: 900; margin: 12px 0 8px; letter-spacing: -.3px; }
.kcard :is(h2, h3) { font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 9px; }
.kcard :is(h2, h3) svg { width: 19px; height: 19px; color: var(--blue); }
.kcard.blue :is(h2, h3) { color: var(--wp--preset--color--white); }
.schaden :is(h2, h3) { font-size: 28px; font-weight: 900; letter-spacing: -.5px; }
.modalin :is(h2, h3) { font-size: 24px; font-weight: 900; letter-spacing: -.5px; }

/* Showpark-Icon auf der blauen Kontaktkarte ist gruen, nicht weisz.
   `.kcard.blue h4 svg` stand auf Weisz und widersprach Frame und
   Prototyp (Kundenkommentar #54). */
.kcard.blue :is(h2, h3, h4) svg { color: var(--green); }

/* --- Fuer Bildschirmleser, nicht fuer das Auge --------------------
   Zwei Bauläufe haben sich diese Klasse je selbst gebaut (Downloads
   als `.dl .vh`, FAQ als `.faq-versteckt`). Sie traegt Feldbeschriftungen
   und ergaenzte Linktexte, die im Design nicht sichtbar sind. */
.vh {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- Formulare -----------------------------------------------------
   `.form input` traf auch Ankreuz- und Auswahlfelder und blies sie auf
   volle Breite mit 14px Innenabstand auf. Und die Felder hatten keinen
   sichtbaren Fokus — mit der Tastatur war nicht erkennbar, wo man steht
   (BFSG). Die Formulare stehen auf vier Seiten. */
.form input[type="checkbox"],
.form input[type="radio"] {
	width: auto; padding: 0; border-radius: 0;
	accent-color: var(--green-d); flex: none; margin-top: 2px;
}
.form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
	border-color: var(--blue);
}

/* --- CTA-Band ------------------------------------------------------
   `.ctab` faerbt nur `.bigbtn` um. Eine `.navcta` darin blieb blau auf
   blau und war damit unsichtbar (gemeldet vom Baulauf Einsatzbereiche,
   im Prototyp und im Frame derselbe Fehler). */
.ctab .navcta { background: var(--wp--preset--color--white); color: var(--blue); }
.ctab .navcta:hover { background: var(--wp--custom--ui--on-primary-hover); }

/* --- Rechtstext-Spalte --------------------------------------------
   Muss zentral stehen, nicht in einer Seiten-CSS: die vier Pflichtseiten
   heiszen impressum, datenschutz, agb und barrierefreiheit. Seiteneigenes
   CSS wird ueber den Seiten-Slug geladen, eine Datei je Seite waere also
   vierfach dieselbe Regel. Herkunft: Prototyp `rechtstext.html`,
   Frame `figma-final/rechtstext.png`. */
.sec-rechtstext { padding-top: var(--sec-y-k); padding-bottom: var(--sec-y); }
.sec-rechtstext .rtx {
	max-width: 760px; margin-top: 0;
	font-size: var(--wp--preset--font-size--base);
}
/* Zwischenueberschriften: im Prototyp <h3> in der Browser-Vorgabe, gebaut
   als <h2> (unter der <h1> waere h3 ein Gliederungssprung). Die Regel holt
   die Optik des Frames gegen die theme.json-Vorgabe von 44px zurueck. h3
   und h4 sind mitgefasst, weil Datenschutz, AGB und die Erklaerung zur
   Barrierefreiheit ihre Gliederung ueber den Seiteninhalt pflegen. */
.sec-rechtstext .rtx :is(h2, h3, h4) {
	font-size: 1.17em; font-weight: 700; line-height: 1.65;
	letter-spacing: normal; margin-top: 28px;
}
.sec-rechtstext .rtx .annot + :is(h2, h3, h4) { margin-top: 24px; }
.sec-rechtstext .rtx > :is(h2, h3, h4):first-child { margin-top: 0; }
.sec-rechtstext .rtx :is(p, ul, ol) { color: var(--mut); line-height: 1.8; margin-top: 10px; }
.sec-rechtstext .rtx :is(ul, ol) { padding-left: 1.25em; }
/* Verweise im Rechtstext (Aufsichtsbehoerde, Schlichtungsstelle) muessen
   sich vom Fliesztext abheben — das Designsystem gibt Verweisen sonst die
   Textfarbe ohne Unterstreichung. */
.sec-rechtstext .rtx a {
	color: var(--blue); text-decoration: underline; text-underline-offset: 2px;
}

/* --- Trefferflaechen, zweiter Durchgang (16.08.2026) ----------------
   Die Abnahme misst jedes Bedienelement gegen 24 x 24 px (BFSG/WCAG 2.5.8).
   Drei Faelle sind bei der Welle B durchgefallen. */

/* Ankreuzfelder: Die Regel oben hat sie von „100 % Breite" auf ihre echte
   Groesze zurueckgesetzt — damit waren sie 18 x 18 px und zu klein. Sie
   koennen kein Pseudo-Element tragen (ersetzte Elemente), also wird das
   Feld selbst auf das Mindestmasz gebracht. */
.form input[type="checkbox"],
.form input[type="radio"] { width: 24px; height: 24px; }

/* Telefon- und E-Mail-Verweise stehen in Kontaktkarten und Ansprechpartner-
   Zeilen als eigenstaendige Angabe, nicht als Verweis im Fliesztext (fuer den
   die Norm eine Ausnahme kennt). Sie sind 17 px hoch. Vergroeszert wird ueber
   ein unsichtbares Pseudo-Element — dasselbe Vorgehen wie bei den neun
   Linktypen aus Welle A, das Layout bleibt unberuehrt. */
.sabtec-page a[href^="tel:"],
.sabtec-page a[href^="mailto:"] { position: relative; }
.sabtec-page a[href^="tel:"]::after,
.sabtec-page a[href^="mailto:"]::after {
	content: ""; position: absolute; left: 0; right: 0;
	top: 50%; transform: translateY(-50%);
	height: 24px; min-width: 24px;
}

/* Krumen-Verweise („Mietpark ›  …") sind 15 px hoch. Gleiche Behandlung. */
.sub .crumb a { position: relative; display: inline-block; }
.sub .crumb a::after {
	content: ""; position: absolute; left: 0; right: 0;
	top: 50%; transform: translateY(-50%); height: 24px;
}

/* Lange Komposita in Sektionsueberschriften.
   „Ausstattungsoptionen." ist ein einziges Wort und schiebt die Ueberschrift
   bei 390 px auf 427 px Breite — die Seite laeuft waagerecht ueber. Deutsche
   Silbentrennung loest das typografisch richtig (das Dokument traegt
   lang="de"); der Umbruch mitten im Wort ist nur der Rueckfall fuer Browser
   ohne Trennmuster. */
@media (max-width: 700px) {
	.sabtec-page :is(h1, h2, h3) { hyphens: auto; overflow-wrap: break-word; }
}

/* --- Fluent Forms (17.08.2026) --------------------------------------
   Die vier Formulare kommen seit dem 17.08. aus Fluent Forms. Ueber
   „Extra CSS Form Class" traegt jedes <form> die Klassen des Entwurfs
   (`form` bzw. `qwrap` und die Seitenklasse) plus `sab-ff`. Damit gelten
   Karte, Rahmen, Innenabstand, Beschriftungen und Eingabefelder aus dem
   Designsystem unveraendert weiter. Hier steht nur, was das
   Fluent-Markup zusaetzlich braucht — es setzt um jedes Feld zwei
   Huellen (`.ff-el-group` mit `.ff-el-input--label` und
   `.ff-el-input--content`), die es im Entwurf nicht gibt.

   Zur Spezifitaet: Fluent Forms schreibt beim Rendern einen eigenen
   <style>-Block ins Dokument, der HINTER allen Stylesheets steht. Wo
   unten ungewoehnlich lange Selektoren stehen, ist genau das der Grund. */

/* Fluent packt alle Felder in ein <fieldset>. Das ist die Stelle fuer das
   Zweispaltenraster des Entwurfs; welche Felder halbe Breite bekommen,
   steht als `sab-halb` in der Importdatei (tools/formulare-bauen.py). */
.sab-ff > fieldset {
	border: 0; padding: 0; margin: 0; min-width: 0;
	display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;
}
.sab-ff > fieldset > * { grid-column: 1 / -1; }
.sab-ff > fieldset > .sab-halb { grid-column: span 1; }

/* Der Zeilenabstand kommt wie im Entwurf aus dem Abstand ueber der
   Beschriftung (`.form label`, 18px). Fluents eigene 20px am Feldblock
   und 5px an der Beschriftungshuelle kaemen additiv dazu — zusammen 43
   statt 18 px. */
.sab-ff .ff-el-group { margin-bottom: 0; }
.sab-ff .ff-el-input--label { margin: 0; display: block; }
.sab-ff .ff-el-input--content { min-width: 0; }

/* Beschriftung und Eingabefeld gegen `fluentform-public-default.css`.
   Dessen Regeln wiegen `.ff-default .ff-el-form-control` (0,2,0) und
   `.ff-default .ff-el-input--label label` (0,2,1) und schlagen damit
   `.form input` und `.form label` (je 0,1,1) — gemessen am 17.08.2026:
   Beschriftung kam mit Gewicht 500 statt 900, Felder mit 1px Rahmen,
   7px Radius und 11/15 Innenabstand statt 1.5px, 14px und 14/17.
   Die Werte hier sind dieselben wie in `.form` weiter oben; sie stehen ein
   zweites Mal, weil nur ein laengerer Selektor durchkommt. */
.sab-ff .ff-el-group .ff-el-input--label label {
	display: block; margin: 18px 0 7px;
	font-size: 13px; font-weight: 900;
	color: var(--wp--custom--ui--ink-nav);
}
/* Die Kaufanfrage setzt 22px statt 18px ueber der Beschriftung (`.qwrap
   label`) — derselbe Unterschied wie im Entwurf. */
.qwrap.sab-ff .ff-el-group .ff-el-input--label label { margin-top: 22px; }

.sab-ff .ff-el-group .ff-el-form-control:not(.ff-screen-reader-element) {
	width: 100%;
	border: 1.5px solid var(--wp--custom--ui--line-chip);
	border-radius: var(--wp--custom--radius--control);
	padding: 14px 17px;
	font-size: 15px; font-family: inherit;
	background: var(--wp--preset--color--white); color: var(--ink);
}
.sab-ff .ff-el-group textarea.ff-el-form-control { min-height: 130px; resize: vertical; }
.sab-ff .ff-el-group .ff-el-form-control:focus-visible {
	outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue);
}

/* Das Pflichtsternchen: im Entwurf Teil der Beschriftung, in derselben
   Farbe und ohne zusaetzlichen Abstand. Fluent setzt es rot mit 3px
   Vorlauf ueber ein Pseudo-Element. */
.sab-ff .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--wp--custom--ui--ink-nav); font-weight: 900; margin-left: 0;
}

/* Hilfetexte stehen unter dem Feld (so in den Formulareinstellungen
   gesetzt) und sehen aus wie die Nachsatzzeilen des Entwurfs. */
.sab-ff .ff-el-help-message {
	margin: 6px 0 0; font-size: 12.5px; color: var(--mut);
	font-style: normal; /* Fluent setzt Hilfetexte kursiv, der Entwurf nicht. */
}

/* Das versteckte Dateifeld traegt dieselbe Klasse wie ein Textfeld. Ohne
   Ausnahme bekaeme es Breite, Rahmen und Innenabstand eines Textfelds und
   schoebe die Auswahlflaeche auseinander. */
.sab-ff .ff-el-form-control.ff-screen-reader-element {
	width: 1px; height: 1px; padding: 0; border: 0;
}
.sab-ff .ff_file_upload_holder { margin-top: 7px; display: block; }
.sab-ff .ff_upload_btn.ff-btn {
	display: inline-block; cursor: pointer;
	background: var(--wp--preset--color--primary-soft); color: var(--blue);
	border: 1.5px solid var(--wp--custom--ui--line-chip);
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 24px; font-size: 14px; font-weight: 900; font-family: inherit;
}
.sab-ff .ff_upload_btn.ff-btn:hover { border-color: var(--blue); }
.sab-ff .ff-el-form-control.ff-screen-reader-element:focus-visible + .ff_upload_btn,
.sab-ff .ff_file_upload_holder:focus-within .ff_upload_btn {
	outline: 2px solid var(--blue); outline-offset: 2px;
}
.sab-ff .ff-uploaded-list { margin-top: 10px; font-size: 13.5px; }

/* Chips (Kaufanfrage). Der Entwurf zeigt vier Gruppen als Pillen mit
   `aria-pressed`; das sind Schaltflaechen, ihre Werte stuenden in keinem
   Formularfeld. Gebaut sind es echte Mehrfach- und Einfachauswahlen —
   das Aussehen macht diese Regel, die Bedienung uebernimmt der Browser.
   Das Kaestchen bleibt bedienbar und fokussierbar, es ist nur unsichtbar. */
.sab-ff .sab-chips .ff-el-input--label label {
	margin: 34px 0 14px;
	font-size: 12px; font-weight: 900; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--soft);
}
.sab-ff > fieldset > .sab-chips:first-of-type .ff-el-input--label label { margin-top: 0; }
.sab-ff .sab-chips .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 10px; }
.sab-ff .sab-chips .ff-el-form-check { margin: 0; }
.sab-ff .sab-chips .ff-el-form-check-label { display: block; margin: 0; cursor: pointer;
	/* Bezugsrahmen fuer das ausgeblendete Kaestchen — siehe naechste Regel. */
	position: relative;
}

/* DER SEITENSPRUNG BEIM KLICK AUF EINEN CHIP (Fehler vom 19.08.2026).
   Ein Klick auf einen Chip warf die Seite an den Seitenanfang zurueck —
   gemessen auf `/mieten/`: Bildlauf 6000 → 0. Damit war das lange
   Mietanfrageformular praktisch nicht bedienbar.

   Ursache ist eine halb geerbte Positionierung. `fluent-forms-public.css`
   setzt

       .fluentform .ff-el-form-check-label .ff-el-form-check-input
       { position: relative; top: -2px; vertical-align: middle }

   also `top: -2px` fuer eine RELATIVE Verschiebung um zwei Pixel. Die Regel
   hier hat dieselbe Spezifitaet (je drei Klassen), steht spaeter und gewinnt
   damit fuer `position` — aber `top` hat sie nie angefasst. Aus
   `position: relative; top: -2px` wurde `position: absolute; top: -2px`, und
   weil in der ganzen Kette bis zum `body` nichts positioniert war, bezog sich
   das `top` auf das Dokument: Das Kaestchen sass zwei Pixel ueber dem
   Seitenanfang (gemessen: Dokumentkante y = -1, waehrend sein Chip bei
   y = 6466 stand). Beim Klick auf die Beschriftung wandert der Fokus in das
   Kaestchen, und der Browser holt das fokussierte Element ins Bild — also den
   Seitenanfang.

   Zwei Zeilen dagegen, beide noetig:
   `top/left: auto` nimmt die Fremdverschiebung zurueck, sodass wieder die
   statische Position gilt; `position: relative` an der Beschriftung (oben)
   macht den Chip selbst zum Bezugsrahmen, damit eine kuenftige Fremdregel
   hoechstens innerhalb des Chips verrutschen kann und nie wieder ueber die
   ganze Seite. Nachgemessen: Kaestchen und Chip liegen jetzt beide bei
   y = 6466, der Bildlauf bleibt beim Klick stehen. */
.sab-ff .sab-chips .ff-el-form-check-input {
	position: absolute; top: auto; left: auto;
	opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
}
.sab-ff .sab-chips .ff-el-form-check-input + span {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1.5px solid var(--wp--custom--ui--line-strong);
	background: var(--card); color: var(--ink);
	border-radius: var(--wp--custom--radius--pill);
	padding: 10px 20px; font-size: 13.5px; font-weight: 900;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}

/* DAS MERKMAL VOR DER BESCHRIFTUNG — bewusste Abweichung vom Frame.
   Der Entwurf zeigt in jeder Gruppe einen bereits blau gefuellten Chip. Genau
   der macht dort verstaendlich, dass die uebrigen anklickbar sind. Diese
   Vorbelegung ist am 17.08.2026 bewusst NICHT gebaut worden, weil eine
   vorausgewaehlte Antwort die Auswertung verfaelscht — damit ist der einzige
   Hinweis weggefallen, und uebrig blieben weisse Pillen auf weisser Karte.
   Jakob hat das am 19.08. als „erklaerungsbeduerftig" gemeldet.

   Der Rahmen allein traegt es nicht: `line-strong` (#dcdfe6) auf Weiss ergibt
   1,33:1. Die Norm verlangt fuer die Umrisse von Bedienelementen 3:1
   (WCAG 1.4.11); die Seite ist an das BFSG gebunden. Ein Kreis (eine Antwort)
   beziehungsweise ein Quadrat (mehrere moeglich) ist die bekannte Form eines
   Auswahlfeldes und sagt zusaetzlich, wie viele Antworten erlaubt sind — das
   steht bisher nur als Hilfetext unter drei von sechs Gruppen.

   WAS ES KOSTET, gemessen am 19.08.2026 auf `/mieten/` bei 920 px
   Kastenbreite: Das Formular waechst von 1719 auf 1786 px, also um 67 px oder
   3,9 %. Eine einzige Gruppe bricht dadurch zusaetzlich um („Was sollen wir
   uebernehmen?"). Kleiner geht es nicht: 12 px mit 6 px Abstand ergeben
   dieselben 1786 px, und die Chip-Innenabstaende auf 9/15 zu druecken
   ebenfalls — die Zeile ist voll, nicht knapp.
   Die 67 px stehen gegen Jakobs Zusage „ein bisschen kleiner". Der Hebel, der
   das mehrfach ausgleicht, ist ein anderer und steht im Bericht: die drei
   optionalen Gruppen (zusammen 388 px) hinter einer Klappflaeche.

   ZUR SELEKTORLAENGE — dieselbe Spezifitaetsfalle wie am 17.08.2026, nur eine
   Stufe fieser. `fluentform-public-default.css` raeumt die Pseudo-Elemente
   ausdruecklich ab:

       .ff-default .ff-el-form-check label.ff-el-form-check-label > span::after,
       .ff-default .ff-el-form-check label.ff-el-form-check-label > span::before
       { content: none }

   Das sind drei Klassen und zwei Elemente (0,3,2). Der naheliegende Selektor
   `.sab-ff .sab-chips .ff-el-form-check-input + span::before` kommt auf
   (0,3,1) und verliert — im Bild sah der Chip danach exakt aus wie vorher,
   ohne Fehlermeldung; erst die Messung von `content` (Wert `none`) hat es
   gezeigt. Deshalb stehen unten `label.ff-el-form-check-label` und der
   Kindzeiger mit im Weg. */
.sab-ff .sab-chips label.ff-el-form-check-label > .ff-el-form-check-input + span::before {
	content: ""; flex: none;
	width: 13px; height: 13px;
	border: 1.5px solid var(--soft);
	border-radius: 50%;
	background: transparent;
	transition: background .12s ease, border-color .12s ease;
}
/* Mehrfachauswahl bekommt das Quadrat. */
.sab-ff .sab-chips label.ff-el-form-check-label > .ff-el-form-check-checkbox + span::before {
	border-radius: 4px;
}

/* Zeigerkontakt. Im Entwurf gibt es dazu nichts — ein Frame kennt keinen
   Hover-Zustand. Eine Flaeche, die auf Beruehrung nicht reagiert, liest sich
   auf dem Rechner aber wie Text. Farben und Verhalten sind die der uebrigen
   Umriss-Pillen der Seite (`.btn.ghost:hover`). */
.sab-ff .sab-chips .ff-el-form-check-label:hover .ff-el-form-check-input:not(:checked) + span {
	background: var(--wp--custom--ui--hover-soft);
	border-color: var(--blue); color: var(--blue);
}
.sab-ff .sab-chips label.ff-el-form-check-label:hover > .ff-el-form-check-input:not(:checked) + span::before {
	border-color: var(--blue);
}

.sab-ff .sab-chips .ff-el-form-check-input:checked + span {
	background: var(--blue); border-color: var(--blue);
	color: var(--wp--preset--color--white);
}
.sab-ff .sab-chips label.ff-el-form-check-label > .ff-el-form-check-input:checked + span::before {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}
.sab-ff .sab-chips .ff-el-form-check-input:focus-visible + span {
	outline: 2px solid var(--blue); outline-offset: 2px;
}
/* „Mehrfachauswahl moeglich" (#48). Der Abstand kommt hier als negatives
   Ausgleichsmasz, weil die Chip-Reihe 10px Zwischenraum hat, der Entwurf
   unter der Reihe aber nur 6px zeigt. */
.sab-ff .sab-chips .ff-el-help-message {
	flex: 1 0 100%; margin: -4px 0 0; font-weight: 700; color: var(--soft);
}

/* Die Einwilligung. Fluent baut sie als TABELLE: die Beschriftung ist
   `display: table-row`, Kaestchen und Text sind Zellen. Gegen diese Regel
   kommt weder `flex` noch `gap` an — der Abstand muss als Innenabstand an
   die Zelle. Optik wie `.form .dsg` im Entwurf. */
.sab-ff .sab-dsg { margin-top: 18px; }
/* Die Beschriftungsregeln des Entwurfs (`.form label`, `.qwrap label`) sind
   fett und abgesetzt — richtig fuer ein Feld, falsch fuer einen Flieszsatz. */
.sab-ff .ff_tc_label { margin: 0; font-weight: 400; }
.sab-ff .ff_tc_checkbox { padding-right: 10px; vertical-align: top; }
.sab-ff .ff_tc_checkbox input[type="checkbox"] {
	width: 24px; height: 24px; padding: 0; border-radius: 3px;
	accent-color: var(--green-d); flex: none;
}
.sab-ff .ff_t_c, .sab-ff .ff_t_c p {
	font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--mut);
}
.sab-ff .ff_t_c a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* Absendeknopf. Fluent gibt ihm 7px Radius aus seinem eigenen
   <style>-Block (Spezifitaet 0,3,1); die Pille des Designsystems braucht
   deshalb einen laengeren Selektor. Farbe und Schriftfarbe stehen schon
   in der Importdatei. */
form.frm-fluent-form.sab-ff .ff-btn-submit:not(.ff_btn_no_style) {
	margin-top: 24px;
	border: none; border-radius: var(--wp--custom--radius--pill);
	padding: 16px 34px;
	font-size: 15.5px; font-weight: 900; font-family: inherit; cursor: pointer;
}
form.frm-fluent-form.sab-ff .ff-btn-submit:not(.ff_btn_no_style):hover {
	background: var(--blue-d);
}
.sab-ff .ff_submit_btn_wrapper { margin-top: 0; }

/* Fehlermeldungen: nur Groesze und Abstand an die Typo-Skala angeglichen.
   Die FARBE bleibt bewusst die von Fluent Forms — das Designsystem hat
   keinen Fehlerton, und einen zu erfinden waere ein Eingriff ins
   abgenommene Design. Offener Punkt fuer Jakob. */
.sab-ff .error, .sab-ff .text-danger {
	font-size: 12.5px; font-weight: 700; margin-top: 6px;
}
.ff-message-success {
	background: var(--wp--preset--color--primary-soft); color: var(--blue);
	border: 1px solid var(--line); padding: 28px 30px;
}
.ff-message-success p { margin: 0 0 8px; }
.ff-message-success p:last-child { margin-bottom: 0; }

/* Schmale Ansicht: zwei 125px breite Felder nebeneinander sind nicht
   bedienbar — dieselbe Grenze wie bei `.grid.g2`. */
@media (max-width: 700px) {
	.sab-ff > fieldset { grid-template-columns: 1fr; }
	.sab-ff > fieldset > .sab-halb { grid-column: 1 / -1; }
}

/* ================================================================
   NACHTRAG 18.08.2026 — Bewegtbild
   Hintergrundvideo im Hero und abspielbarer Imagefilm auf der
   Unternehmensseite. Beide self-hosted (kein Fremdplayer, keine
   Drittanbieter-Verbindung beim Aufruf).
   ================================================================ */

/* Videoflaeche: nimmt den Platz ein, an dem sonst ein Bild stuende. */
.vidflaeche { position: relative; width: 100%; height: 100%; overflow: hidden; }
.vidflaeche .vidfilm {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}

/* Knopf zum Anhalten. Pflicht bei Bewegung ueber fuenf Sekunden (WCAG 2.2.2).
   40 px erfuellen die Mindesttrefferflaeche mit Reserve; der dunkle Grund
   haelt das Symbol auch ueber hellen Bildstellen lesbar. */
.vidflaeche .vidstop {
	position: absolute; right: 16px; bottom: 16px;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border: none; border-radius: 50%;
	background: rgba(20, 16, 50, .62);
	color: var(--wp--preset--color--white);
	/* `font-family` ergaenzt 19.08.2026 — ohne die Angabe lief das
	   Pausezeichen in Arial statt Lato. */
	font-size: 12px; line-height: 1; font-family: inherit;
	cursor: pointer; z-index: 3;
	transition: background .15s ease;
}
.vidflaeche .vidstop:hover  { background: rgba(20, 16, 50, .82); }
.vidflaeche .vidstop:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}
.vidflaeche .vidstop-aus { display: none; }
.vidflaeche.vid-pause .vidstop-an  { display: none; }
.vidflaeche.vid-pause .vidstop-aus { display: inline; padding-left: 2px; }

/* Wer „Bewegung reduzieren" gesetzt hat, sieht das Standbild. Das Abschalten
   selbst uebernimmt global.js — CSS allein kann ein Video nicht anhalten. */
@media (prefers-reduced-motion: reduce) {
	.vidflaeche .vidfilm { animation: none; }
}

/* Abspielbarer Film (Unternehmensseite). */
.showpark-video { margin: 36px 0 0; }
.showpark-video .vidplayer {
	width: 100%; height: auto; display: block;
	background: var(--wp--custom--ui--flaeche-bild);
}
.showpark-video figcaption {
	margin-top: 12px;
	font-size: 14px;
	color: var(--mut);
}

/* Abspielbares Video mit eigenem Play-Knopf (Nachtrag 18.08.2026) ---
   Der Knopf benutzt `.playbtn` aus dem Designsystem, damit er genauso
   aussieht wie der auf den Referenzkacheln. */
.vidbox { position: relative; display: block; }
.vidbox .vidplayer { width: 100%; height: auto; display: block; }
.vidbox .vidstart {
	border: none; padding: 0; cursor: pointer;
	box-shadow: 0 12px 30px -12px rgba(20, 22, 40, .5);
	transition: transform .15s ease, background .15s ease;
}
.vidbox .vidstart:hover { transform: translate(-50%, -50%) scale(1.06); }
.vidbox .vidstart:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}
.vidbox.vid-laeuft .vidstart { display: none; }

/* PDF-Vorschau (Nachtrag 19.08.2026) -------------------------------
   Erst ansehen, dann herunterladen. Der Betrachter des Browsers steht
   im <iframe>; der Rahmen darum traegt Titel, Ladeknopf und Schliessen. */
.pdfpop {
	position: fixed; inset: 0; z-index: 220;
	background: rgba(20, 16, 50, .62);
	display: none; align-items: center; justify-content: center;
	padding: 24px;
}
.pdfpop.show { display: flex; }
.pdfpopin {
	background: var(--wp--preset--color--white);
	border-radius: 20px;
	width: min(1000px, 100%);
	height: min(88vh, 900px);
	display: flex; flex-direction: column;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.pdfpopkopf {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; padding: 20px 22px;
	border-bottom: 1px solid var(--line);
	flex: none;
}
.pdfpoptx .k {
	font-size: 11px; font-weight: 900; letter-spacing: 2px;
	text-transform: uppercase; color: var(--soft);
}
.pdfpoptx h3 {
	font-size: 19px; font-weight: 900; letter-spacing: -.3px;
	margin-top: 3px; line-height: 1.3;
}
.pdfpopakt { display: flex; align-items: center; gap: 12px; flex: none; }
.pdfpopakt .popx { position: static; }
.pdfpopdok { flex: 1; position: relative; background: var(--wp--custom--ui--flaeche-bild); }
.pdfpopdok iframe {
	width: 100%; height: 100%; border: none; display: block;
	position: relative; z-index: 2;
}
/* Liegt hinter dem Rahmen: sichtbar nur, wenn der Betrachter nichts anzeigt. */
.pdfpopfall {
	position: absolute; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	gap: 6px; flex-wrap: wrap; text-align: center;
	padding: 24px; font-size: 14px; color: var(--mut);
}
.pdfpopfall a { color: var(--blue); font-weight: 900; text-decoration: underline; }

@media (max-width: 700px) {
	.pdfpop { padding: 0; }
	.pdfpopin { height: 100%; border-radius: 0; }
	.pdfpopkopf { padding: 14px 16px; }
	.pdfpoptx h3 { font-size: 16px; }
}


/* ================================================================
   NACHTRAG 19.08.2026 — Anfrageformular (geteilt)
   Verschoben aus `assets/css/kaufen.css`. Die Anfrage-Sektion steht
   seit dem 19.08. auf ZWEI Seiten: `/kaufen/` und `/mieten/`.
   Seiteneigenes CSS laedt `functions.php` nur fuer den eigenen Slug,
   deshalb muessen geteilte Regeln hier stehen.
   ================================================================ */

/* Grauer Grund, eigener Rhythmus: 112 px Abstand nach oben, innen
   96 px oben und unten. So steht es im Referenz-Frame von /kaufen/. */
.kaufen-anfrage {
	background: var(--wp--custom--ui--flaeche-hell);
	margin-top: var(--sec-y);
	padding-top: 96px;
	padding-bottom: 96px;
}

/* Der Formularkasten. Das Formular kommt seit dem 17.08.2026 aus Fluent
   Forms und traegt die Klassen `qwrap sab-ff` (ergaenzt in
   `inc/formulare.php`, nicht mehr von Hand im Backend). Chips, Feldraster
   und Absendeknopf stehen im Fluent-Abschnitt weiter oben. */
.qwrap {
	background: var(--card); border: 1px solid var(--line);
	padding: 48px; max-width: 920px; margin: 0 auto;
}

.qwrap label {
	display: block; margin: 22px 0 7px;
	font-size: 13px; font-weight: 900; color: var(--wp--custom--ui--ink-nav);
}
.qwrap input, .qwrap textarea {
	width: 100%;
	border: 1.5px solid var(--wp--custom--ui--line-chip);
	border-radius: var(--wp--custom--radius--control);
	background: var(--card); color: var(--ink);
	padding: 14px 17px; font-size: 15px; font-family: inherit; outline: none;
}
.qwrap textarea { min-height: 96px; resize: none; }

.qnote { margin-top: 14px; font-size: 12.5px; color: var(--mut); }

/* ----------------------------------------------------------------
   Mietanfrage: dichter als die Kaufanfrage.
   Die Mietanfrage stellt 15 Felder und 31 Chips in sechs Gruppen —
   fast doppelt so viel wie die Kaufanfrage. Gemessen am 19.08.: 1524 px
   Formularhoehe. Die Kundin nannte den ersten Eindruck „erschlagend",
   Jakob hat im Termin zugesagt, es „ein bisschen kleiner" zu machen.
   Gekuerzt wird ausschlieszlich der Rhythmus, KEIN Feld: die Feldliste
   geht erst mit dem Vertrieb (Kevin) durch, und ein Feld hier zu
   streichen wuerde diese Abstimmung vorwegnehmen.
   Die Regeln sind auf `.mieten-anfrage` begrenzt — die Kaufanfrage hat
   einen abgenommenen Frame und bleibt unberuehrt.
   ---------------------------------------------------------------- */

/* Gruppenabstand: 34 px ueber der Gruppenbeschriftung sind bei sechs
   Gruppen 204 px allein an Luft — 26 px reichen und sparen 48 px.
   Weniger geht nicht: Drei Gruppen enden mit dem Hilfetext
   „Mehrfachauswahl moeglich", und bei 18 px stoesst der fast an die
   Beschriftung der naechsten Gruppe — die Gruppengrenze ist dann nicht
   mehr zu sehen. Am 19.08. am ausgerollten Stand nachgesehen.
   Zur Spezifitaet: `.ff-el-group.sab-chips` steht hier mit, weil die
   Regel fuer die Feldbeschriftungen weiter unten dieselbe Anzahl
   Klassen hat und sonst gewinnt. */
.mieten-anfrage .qwrap.sab-ff .ff-el-group.sab-chips .ff-el-input--label label {
	margin-top: 26px;
}

/* Chips eine Stufe kleiner. Die Trefferflaeche bleibt ueber 24 px
   (9 + 20 + 9 = 38 px Hoehe), die Mindestgroesze nach BFSG ist gehalten. */
.mieten-anfrage .sab-ff .sab-chips .ff-el-form-check-input + span {
	padding: 9px 17px; font-size: 13px;
}
.mieten-anfrage .sab-ff .sab-chips .ff-el-input--content { gap: 8px; }

/* Feldbeschriftungen: 22 px sind das Masz der Kaufanfrage, hier 18 px
   wie im uebrigen Formularsatz (`.form label`). */
.mieten-anfrage .qwrap.sab-ff .ff-el-group .ff-el-input--label label { margin-top: 18px; }

/* Das Freitextfeld ist ein Zusatz, kein Pflichtfeld — 130 px geben ihm
   mehr Gewicht als der Rest. */
.mieten-anfrage .sab-ff .ff-el-group textarea.ff-el-form-control { min-height: 104px; }

/* ----------------------------------------------------------------
   Schmale Ansicht: gilt fuer beide Anfrageseiten.
   Ohne diese Regel bleiben die Kontaktfelder auf dem Telefon
   zweispaltig und rund 115 px breit.
   ---------------------------------------------------------------- */
@media (max-width: 700px) {
	.qwrap { padding: 28px 22px; }
	.kaufen-anfrage { padding-top: 48px; padding-bottom: 48px; }
}

/* ----------------------------------------------------------------
   Referenzraster der Einsatzbereich-Musterseite.
   `/einsatzbereiche/kindergaerten/` zeigt die Referenzen dieses
   Bereichs. Vorhanden ist bislang EINE (Kita Sexau) — im Dreierraster
   stand sie allein in einer Reihe und liesz zwei Drittel leer.
   Das Raster richtet sich jetzt nach der Anzahl und waechst von selbst
   mit, sobald weitere Kita-Projekte im Plugin liegen.
   ---------------------------------------------------------------- */
.kgrefs .grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 480px); }
.kgrefs .grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ----------------------------------------------------------------
   Karten ohne Fusszeile: der letzte Absatz sasz auf der Kartenkante.
   Gemessen am 19.08.2026 auf `/kaufen/`: zwischen der Unterkante der
   Beschreibungszeile und dem Kartenrand lag **1 px** — nur der Rahmen.
   Ursache: `.card` hat keinen Innenabstand, die Abstaende stehen an den
   Kindern (`h3` 12/22/2, `.spec` 6/22/0) und keines bringt unten etwas
   mit. Karten mit `.cfoot` fiel das nie auf, deren Fusszeile hat eigene
   22 px.
   Jakob hat die Stelle im Kundentermin am 19.08. benannt („hier ist zum
   Beispiel zu wenig Abstand oben und unten") — gemeint waren DIESE
   Referenzkacheln, nicht die Bildteaser am Seitenfuss.
   Der Frame zeigt denselben Fehler; er stammt aus dem Prototyp. Bewusste
   Abweichung, von Jakob abzunehmen.
   Bewusst eng gefasst: nur Karten, die mit Text enden. `.pic` als letztes
   Kind waere eine reine Bildkachel, und `.gcask` zentriert seinen Inhalt —
   beide wuerden von einem pauschalen Abstand verschoben.
   ---------------------------------------------------------------- */
.card > h3:last-child,
.card > p:last-child { padding-bottom: 22px; }


/* ================================================================
   NACHTRAG 19.08.2026 — Querschnitt (Mobil, Fokus, Kontrast)
   Aus dem Prueflauf nach dem Kundentermin. Jeder Wert unten ist
   gemessen, nicht geschaetzt; die Messwerte stehen im Bericht
   `docs/baulaeufe/19-08-2026-querschnitt.md`.
   ================================================================ */

/* --- 1. Fokusring dort, wo es gar keinen gab --------------------
   Der globale Ring in `style.css` steht in `:where()` und hat damit
   Spezifitaet null. Fluent Forms und der Navigationsblock setzen ihre
   eigenen Regeln darueber; gemessen wurde bei Tastaturfokus
   `outline-style: none` an: Hamburger, Schliessen-Knopf, allen
   Mega-Menue-Verweisen, allen Formular-Chips, dem Absendeknopf, der
   FAQ-Suche — und an der DATENSCHUTZ-EINWILLIGUNG. Die ist ein
   Pflichtfeld: Wer per Tastatur daraufspringt, sah nicht, dass er
   daraufsteht. Deshalb hier mit ausreichender Spezifitaet noch einmal. */
.sabtec-nav .wp-block-navigation__responsive-container-open:focus-visible,
.sabtec-nav .wp-block-navigation__responsive-container-close:focus-visible,
.sabtec-nav .sabtec-mega__link:focus-visible,
.sabtec-nav .sabtec-mega__promo:focus-visible,
.sab-ff .ff-el-form-check-input:focus-visible,
.sab-ff .ff_tc_checkbox input[type="checkbox"]:focus-visible,
form.frm-fluent-form.sab-ff .ff-btn-submit:focus-visible,
.faqsearch input:focus-visible,
.faqsearch button:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--blue);
	border-radius: 3px;
}
/* Die Chips zeigen den Fokus an der sichtbaren Pille, nicht am
   unsichtbaren Kaestchen. */
.sab-ff .sab-chips .ff-el-form-check-input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--blue);
}

/* --- 2. Schrift auf Fotos -------------------------------------
   `.dx` war die einzige Bildkachelklasse ohne ausreichend deckenden
   Verlauf im oberen Bereich des Textblocks — `.ebx`, `.refx`, `.stx`
   und `.band` liegen gemessen bei 5,3 bis 12 : 1. Der Verlauf vom
   18.08. hat Ueberschrift und Fliesstext getragen, die Eyebrow und die
   oberen Textzeilen nicht. Deckt jetzt ab 46 % deutlich frueher. */
.dx .ov {
	background: linear-gradient(180deg,
		rgba(22, 18, 52, .46) 0%,
		rgba(22, 18, 52, .38) 24%,
		rgba(22, 18, 52, .82) 58%,
		rgba(22, 18, 52, .94) 100%);
}
/* Zweizeilige Projektnamen reichten ueber die 45-%-Kante des alten
   Verlaufs hinaus — gemessen 1,97 : 1 bei „Kita „Am Ziegelbach"" und
   2,97 : 1 bei „Erntehelfer-Unterkunft Bad Krozingen", gefordert 3,0. */
.refx .ov {
	background: linear-gradient(180deg,
		rgba(22, 18, 52, .30) 0%,
		rgba(22, 18, 52, .24) 30%,
		rgba(22, 18, 52, .74) 62%,
		rgba(22, 18, 52, .90) 100%);
}

/* --- 3. Schmale Ansichten -------------------------------------- */

@media (max-width: 900px) {
	/* Bei 768 px halbierte das Zweispaltenraster die Downloadkarte,
	   waehrend Symbol (30 px) und PDF-Plakette (92 px) ihre feste Breite
	   behielten — fuer die Beschreibung blieben 110 px, also rund zwei
	   Woerter je Zeile. Einspaltig ab 900 statt ab 700 px. */
	.dlgrid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	/* Der negative Zug von -34 px setzt den Hinweis unter die Suchpille —
	   er stimmt nur, solange die Zeile EINZEILIG ist. Bei 390 px bricht
	   sie um und der Block wird in die Pille hineingezogen. */
	.faqsearch-hint { margin-top: 10px; }
	/* Eingabefeld und Knopf nebeneinander lassen dem Feld 153 px von
	   346 px — der Platzhalter bricht mitten im Wort ab. */
	.faqsearch {
		flex-wrap: wrap; gap: 10px;
		border-radius: 22px; padding: 14px 18px;
	}
	.faqsearch input { flex: 1 1 100%; padding: 4px 0; }
	.faqsearch button { flex: 1 1 100%; }
	.faqsearch svg { display: none; }

	/* Anzeigeschriften im 900er Schnitt mit negativer Laufweite werden mitten
	   im Wort getrennt („Ih-rer", „umge-setzt"). Das gilt AUSSCHLIESZLICH fuer
	   die Hero-Ueberschrift der Startseite.
	   NICHT fuer Seitenkoepfe und Sektionsueberschriften: Dort ist die
	   Silbentrennung kein Schoenheitsfehler, sondern die Loesung — siehe die
	   Begruendung weiter oben in dieser Datei. „Ausstattungsoptionen." ist ein
	   einziges Wort und schiebt die Ueberschrift bei 390 px auf 427 px Breite;
	   ohne Trennung laeuft die Containerprofilseite waagerecht ueber. Am
	   19.08.2026 versehentlich mitgenommen und von der Abnahme sofort
	   gemeldet — ein ueberlaufender Text wiegt schwerer als eine unschoene
	   Trennstelle. */
	.hero h1 { hyphens: manual; }
}


/* ================================================================
   NACHTRAG 20.08.2026 — Schmale Ansichten, zweiter Durchgang
   ================================================================
   Ausgangslage: `tools/pruefe-live.js` misst nur waagerechten Ueberlauf.
   Der ist bei 390 px auf allen 21 Ansichten sauber (Dokumentbreite 390 =
   Fensterbreite), und genau deshalb ist unbemerkt geblieben, dass die
   Seite schmal gar nicht angepasst ist: Schriftskala und Sektionsraster
   vom Schreibtisch galten unveraendert weiter.

   ZWEI HEBEL, EIN VERSPRECHEN
   Alles hier steht entweder in einer Variablen, deren Wert oberhalb von
   700 px unveraendert ist, oder in `@media (max-width: 700px)`. Damit ist
   nachweisbar, dass sich bei 768 und bei 1440 px NICHTS aendert — die
   Regeln greifen dort schlicht nicht. Der Frame ist nur fuer 1440 px
   definiert; unterhalb ist gestaltet, aber ausschliesslich ueber die
   Tokens aus theme.json.

   Eine bewusste Ausnahme steht am Ende dieses Abschnitts (Abschnitt 7)
   und ist dort begruendet.
   ================================================================ */

/* --- 1. Senkrechtes Raster ----------------------------------------
   Die drei Sektionsabstaende stehen seit dem ersten Tag als Tokens in
   theme.json (`spacing 80/70/60` = 112/88/64) — benutzt wurde bislang
   nur die Desktop- und die Tabletstufe. Die Mobilstufe hatte nie einen
   Abnehmer: gemessen bei 390 px stand ueber JEDER Sektion derselbe
   88-px-Block wie beim Tablet, `.ctab` und `.band` trugen ebenfalls 88 px
   Aussenabstand. Auf 346 px Inhaltsbreite sind das Leerflaechen, die wie
   ein Ladefehler aussehen.

   Der Wert liegt jetzt in einer Variablen. Wer eine Sektion baut, bindet
   sich an `--sec-y` und bekommt alle drei Stufen geschenkt.
   `--sec-y-k` ist die verkuerzte Stufe fuer Sektionen, die direkt unter
   dem Seitenkopf stehen und dort keine vollen 112 px brauchen. */
:root {
	--sec-y:   var(--wp--preset--spacing--80);  /* 112 */
	--sec-y-k: var(--wp--preset--spacing--65);  /*  72 */
}
@media (max-width: 1120px) {
	:root { --sec-y: var(--wp--preset--spacing--70); }  /* 88 — Bestandswert */
}
@media (max-width: 700px) {
	:root {
		--sec-y:   var(--wp--preset--spacing--60);  /* 64 */
		--sec-y-k: var(--wp--preset--spacing--40);  /* 48 */
	}
}

/* Angeschlossen sind `.sec`, `.show`, `.band` und `.ctab` — die Bindung
   steht an ihrer jeweiligen Quelle weiter oben in dieser Datei, nicht
   hier: `.sec-rechtstext` und `.kaufen-anfrage` haben dieselbe
   Spezifitaet und stehen weiter unten, eine spaete `.sec`-Regel wuerde
   ihre Sonderabstaende ueberschreiben. Die drei Stufen der alten
   1120er-Media-Query sind darin aufgegangen. */

/* --- 2. Anzeigeschriften -------------------------------------------
   Der Kern des Befunds. `theme.json` gibt h1 als `clamp(2.5rem, 6vw,
   4.875rem)` mit — die Anzeigegroeszen der Sektionen sind dagegen feste
   Zahlen und galten bei 390 px unveraendert weiter:

       .sec-h h2  44 px     .center h2  46 px     .band h2  50 px
       .show h2   44 px     .ctab h2    38 px     .trust b  44 px
       .stx h3    30 px     .dx h3      28 px

   Gemessen bei 390 px: „Zweimal vor Ort — Sued & Rhein-Main." lief bei
   46 px ueber drei Zeilen mit Silbentrennung („Rhein-/Main."), zehn
   Ueberschriften ab 26 px standen auf drei und mehr Zeilen, sieben davon
   mitten im Wort getrennt („umge-setzt", „Ausstattungsop-tionen",
   „Ansprechpartne-rin", „Ueberga-be", „hochwer-tig", „Con-tainer",
   „per-soenlich"). Die Trennung ist dabei das Symptom, nicht der Fehler:
   sie tritt gar nicht erst auf, wenn die Schrift zur Fensterbreite passt.
   Deshalb bleibt `hyphens` unangetastet — auf `/container/<slug>/` wird
   es gebraucht (siehe Begruendung im Nachtrag vom 19.08.).

   MECHANIK
   `--wp--custom--anzeige--faktor` ist eine Laenge, die von 0,68 px bei
   390 px Fensterbreite linear auf 1 px bei 700 px waechst und dort
   stehen bleibt. `calc(var(...) * 44)` ergibt daraus 30 px bei 390 und
   exakt 44 px ab 700 — die Kante am Breakpoint ist damit stufenlos, und
   oberhalb steht jede Zahl unveraendert auf ihrem Frame-Wert.
   CSS kann aus einer Fensterbreite keine einheitenlose Zahl rechnen
   (Laenge durch Laenge ist nicht erlaubt), deshalb traegt der Faktor eine
   Einheit. Das ist der Grund fuer die ungewohnte Schreibweise.

   ZWEI FAKTOREN
   Grosze Anzeigeschrift vertraegt mehr Verkleinerung als kleine — ein
   einziger Faktor haette die 28-px-Kachelueberschriften auf 19 px
   gedrueckt und damit unter die Kachelbeschriftungen (21 px), die
   unveraendert bleiben. `faktor-klein` (0,80 bei 390 px) haelt die
   Rangfolge. */
@media (max-width: 700px) {
	/* 44 -> 30 */
	.sec-h h2,
	.show h2,
	.trust b   { font-size: calc(var(--wp--custom--anzeige--faktor) * 44); }
	/* 46 -> 31 */
	.center h2 { font-size: calc(var(--wp--custom--anzeige--faktor) * 46); }
	/* 50 -> 34 */
	.band h2   { font-size: calc(var(--wp--custom--anzeige--faktor) * 50); }
	/* 38 -> 26 */
	.ctab h2   { font-size: calc(var(--wp--custom--anzeige--faktor) * 38); }

	/* Kachelueberschriften, sanftere Stufe: 30 -> 24, 28 -> 22 */
	.stx :is(h2, h3)               { font-size: calc(var(--wp--custom--anzeige--faktor-klein) * 30); }
	.dx :is(h2, h3),
	.schaden :is(h2, h3),
	.popin :is(h2, h3)             { font-size: calc(var(--wp--custom--anzeige--faktor-klein) * 28); }
	.modalin :is(h2, h3)           { font-size: calc(var(--wp--custom--anzeige--faktor-klein) * 24); }

	/* Die negative Laufweite ist auf 44 px gerechnet (-1,5 px = -0,034 em).
	   Bei 30 px waeren dieselben -1,5 px -0,05 em — die Buchstaben liefen
	   ineinander. In `em` skaliert sie mit und trifft bei 700 px wieder
	   genau -1,5 px. */
	.sec-h h2, .show h2, .center h2, .band h2 { letter-spacing: -0.034em; }
	.ctab h2                                  { letter-spacing: -0.026em; }
	.stx :is(h2, h3), .dx :is(h2, h3),
	.schaden :is(h2, h3), .popin :is(h2, h3),
	.modalin :is(h2, h3)                      { letter-spacing: -0.018em; }
}

/* --- 3. Raster, die schmal falsch umbrechen -------------------------
   `.trust` ist eine Flexzeile mit `flex-wrap`. Bei 390 px passten zwei
   der vier Kennzahlen nebeneinander, die anderen beiden nicht — heraus
   kam eine 1-2-1-Treppe („3.000+" allein, darunter „25 Jahre" und „2",
   darunter „360°"). Das liest sich als Versehen. Zwei feste Spalten
   ergeben ein ruhiges 2x2 und sparen nebenbei 150 px Hoehe
   (gemessen 440 -> 290 px).

   `.tgrid` (Teamseite) war einspaltig: neun Karten mit je 220 px hohem
   Portraetplatzhalter uebereinander, gemessen 2.610 px allein fuer die
   Namensliste. Der Inhalt einer Karte sind Initialen, Name und Rolle —
   das traegt zwei Spalten (161 px je Karte), so wie es bei 768 px
   ohnehin schon aussieht. */
@media (max-width: 700px) {
	.trust {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 34px 20px;
		padding: var(--sec-y) 0;
	}
	.tgrid { grid-template-columns: repeat(2, 1fr); }
	.tcard .ph      { height: 132px; }
	.tcard.group .ph { height: 112px; }
	.tcard .ph .ini { font-size: 34px; }
}

/* --- 4. Innenabstaende, die schmal den Text erdruecken ---------------
   Auf 346 px Inhaltsbreite kostet ein 40-px-Innenabstand 23 % der Zeile.
   Gekuerzt werden nur Kaesten ab 30 px; alles darunter blieb, wie es war. */
@media (max-width: 700px) {
	.form            { padding: 26px 22px; }
	.side            { padding: 24px 22px; }
	.kcard           { padding: 24px 22px; }
	.ncard           { padding: 24px 22px; }
	.lcell           { padding: 28px 24px; }
	.vcell           { padding: 24px 22px; }
	.dx .in          { padding: 22px; }
	.stx .in         { padding: 24px; }
	.schaden         { padding: 34px 22px; }
	.modalin         { padding: 26px 22px; }
	.popin .tx       { padding: 24px 22px 26px; }
	.faq summary     { padding: 18px 20px; }
	.faq .a          { padding: 0 20px 20px; }
	.dl              { padding: 18px 20px; gap: 14px; }
}

/* --- 5. Silbentrennung: Netz behalten, Eifer bremsen -----------------
   `hyphens: auto` (Zeile ~585) ist die Notbremse fuer lange Komposita —
   „Ausstattungsoptionen." ist ein einziges Wort und schoebe die
   Ueberschrift bei 390 px sonst auf 427 px Breite. Sie bleibt.

   Der Browser trennt damit aber auch, wo es nichts zu retten gibt: bei
   30 px standen noch „pas-sende" (8 Buchstaben) und „erfolg-reich" (11)
   in den Sektionsueberschriften — beide Woerter passen laengst in die
   Zeile, die Trennung ist reine Randausgleichs-Kosmetik und sieht in
   einem 900er-Schnitt mit negativer Laufweite nach Fehler aus.

   `hyphenate-limit-chars` zieht die Grenze: getrennt wird erst ab 14
   Buchstaben, mit mindestens 7 davor und 5 danach. Nachgemessen ueber
   alle 38 Vorschauansichten bei 390 px: mit der neuen Schriftskala ist
   KEINE Ueberschrift auf Trennung angewiesen (laengstes Einzelwort
   ueberall schmaler als sein Kasten) — die Regel kann also nichts
   aufreiszen, sie haelt nur die Reserve fuer kuenftige Inhalte.
   Browser ohne diese Eigenschaft (aeltere Firefox-Staende) verhalten
   sich wie bisher; `overflow-wrap: break-word` bleibt als letzte
   Sicherung darunter liegen. */
@media (max-width: 700px) {
	.sabtec-page :is(h1, h2, h3) { hyphenate-limit-chars: 14 7 5; }
}

/* --- 6. Zeilen, die schmal an der falschen Stelle brechen ------------
   Ein Pfeil am Linkende gehoert zum Link. Bei 390 px begann der Verweis
   „Zum SABTEC Gebrauchtmarkt →" (191 px) erst bei x = 171 und brach so
   um, dass der Pfeil allein in der zweiten Zeile stand — das sieht nach
   Fehler aus, nicht nach Satz. */
@media (max-width: 700px) {
	.kat-hinweis a { white-space: nowrap; }
}

/* --- 7. BEWUSSTE ABWEICHUNG VOM FRAME: die Kategorie-Plakette --------
   `.card` ist `display:flex; flex-direction:column`. Damit werden alle
   Kinder zu Flex-Elementen, und `align-items` steht auf seiner Vorgabe
   `stretch` — das `display:inline-block` an `.tag` wird blockifiziert und
   die Plakette zieht sich ueber die volle Kartenbreite. Gemessen auf
   /mieten/ bei 390 px: Pille 302 px breit, Text darin 62 px.

   Anders als die uebrigen Regeln dieses Abschnitts wirkt diese bei JEDER
   Breite, denn der Fehler steckt nicht in der schmalen Ansicht, sondern
   in der Bauart der Karte. Er steht deshalb auch im Referenz-Frame — der
   ist aus demselben Prototyp gerendert und hat den Fehler geerbt. Es ist
   der gleiche Fall wie beim Kartenabstand vom 19.08. (weiter oben): der
   Frame zeigt einen Prototypfehler, nicht eine Gestaltungsabsicht.
   Betroffen sind /mieten/ (29 Karten) und /gebrauchtcontainer/ (3).

   `align-self` statt `display`, weil die Blockifizierung `display` in
   einem Flexcontainer ohnehin ueberschreibt. */
.card > .tag,
.card > .badge { align-self: flex-start; }

/* --- 8. Silbentrennung im Rechtstext-Fliesztext (21.08.2026) ---------
   Abschnitt 5 gibt die Trennung nur den Ueberschriften — im Fliesztext
   hat sie bis heute niemand gebraucht, weil kein Text der Seite ein Wort
   trug, das breiter ist als seine Spalte.

   Die AGB der Kundin tragen eines: „Arbeitsstaettenverordnung/Arbeits-
   staettenrichtlinien" in § 9 (1). Der Browser bricht nicht am
   Schraegstrich, das Wort schob die Seite bei 390 px auf 407 px Breite —
   waagerechter Ueberlauf, den `tools/pruefe-live.js` als Befund meldet.
   Gemessen an der Vorschau `.vorschau/page-agb.html`.

   Die Regel bleibt auf die Rechtstext-Spalte begrenzt: Sie ist die
   einzige Stelle der Seite, an der ungekuerzter Fremdtext steht, den wir
   nicht umformulieren duerfen. Ueberall sonst ist ein zu langes Wort ein
   Grund, den Text zu aendern, nicht das Layout.
   `hyphenate-limit-chars` wie in Abschnitt 5, damit nicht getrennt wird,
   wo nichts zu retten ist. */
@media (max-width: 700px) {
	.sec-rechtstext .rtx :is(p, li) {
		hyphens: auto;
		hyphenate-limit-chars: 14 7 5;
		overflow-wrap: break-word;
	}
}

/* --- 9. Trefferflaeche des Mobilmenue-Knopfs (29.08.2026) ------------
   Gemessen am laufenden System bei 390 px:

     Menueknopf   24 × 24 px, padding 0
     Suchknopf    42 × 42 px
     Logo         98 × 31 px

   24 × 24 ist genau die Untergrenze von WCAG 2.5.8 (Stufe AA) — erfuellt
   also die Regel, aber ohne jeden Spielraum, und der Knopf steht dicht
   neben dem Suchknopf. Wer mit dem Daumen daneben trifft, oeffnet die
   Suche statt des Menues. Apple und Google empfehlen beide 44 px, und
   der Nachbar daneben ist bereits 42 px gross: Der kleinste Knopf der
   Seite ist ausgerechnet der wichtigste.

   Der Knopf kommt aus dem Navigationsblock von WordPress
   (`overlayMenu: mobile` in `parts/header.html`), sein Symbol ist ein
   24-px-SVG. Es bleibt bei 24 px — nur die Flaeche darum waechst.
   `display: grid` mit `place-items: center` haelt das Symbol dabei
   mittig, ohne dass der Kern seine Groesse aendert.

   Fuenf von acht Pruefern haben diesen Knopf in der Handyansicht
   gemeldet, auf fuenf verschiedenen Seiten — er faellt auf, weil er
   neben zwei groesseren Elementen der kleinste ist. */
/* NUR unterhalb von 1120 px. Ohne die Abfrage schlaegt `display: grid` die
   Regel von Core, die den Knopf am Schreibtisch ausblendet — dann steht der
   Hamburger neben dem vollstaendigen Menue. Genau das ist mir am 29.08.2026
   passiert und erst in der Aufnahme bei 1440 px aufgefallen. */
@media (max-width: 1120px) {
	.sabtec-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		padding: 0;
		border-radius: 999px;
	}
}

/* Der Schliessen-Knopf im geoeffneten Overlay hat dasselbe Problem und
   sitzt zudem am Bildschirmrand, wo der Daumen ungenauer trifft. Er kommt
   nur im Overlay vor und braucht deshalb keine Abfrage. */
.sabtec-nav .wp-block-navigation__responsive-container-close {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border-radius: 999px;
}

/* --- 10. Abstand zwischen zentrierter Ueberschrift und Kachelraster --------
   Auf der Startseite beruehrten sich Ueberschrift und erste Bildkachel
   nahezu: zwischen der Unterlaenge von „Loesung." und der Kachelkante lagen
   6 px. Zum Vergleich in derselben Aufnahme 65 und 78 px an den beiden
   gleichartigen Stellen.

   Ursache ist eine Nebenwirkung des 18.08.: Zwischen Ueberschrift und Raster
   stand eine Hinweis-Badge, die den Abstand mittrug. Seit die Badges
   standardmaeszig aus sind, verschwindet sie samt Wrapper — und weder
   `.center h2` (margin: 0 auto) noch `.ebrow` bringen einen eigenen Abstand
   mit. Die anderen `.center`-Sektionen fallen nicht auf, weil dort eine
   `.secsub` dazwischensteht, die ihren Abstand selbst setzt.

   Genau die Falle, die in der CLAUDE.md steht: Die Badge muss MIT ihrem
   Wrapper verschwinden, sonst bleibt ein Loch — hier war es umgekehrt, mit
   ihr verschwand ein gebrauchter Abstand. */
.center h2 + .ebrow,
.center h2 + .grid,
.center h2 + .ngrid { margin-top: 44px; }

/* --- 11. Beschriftung der Einsatzbereich-Kacheln (29.08.2026) --------------
   `.ebx` ist ein Flexcontainer (`align-items: flex-end`), `.ebx .in` ein
   Flexkind ohne Breitenangabe — es schrumpft damit auf seine laengste Zeile.
   Die Ausrichtung erbt es von `.wrap.center`, also zentriert. Ergebnis: In
   jeder Kachel steht die Beschriftung um einen anderen Betrag aus der Mitte,
   und innerhalb der Kachel ist die kuerzere Zeile ueber der laengeren
   zentriert.

   Gemessen bei 390 px an den acht Kacheln der Startseite: Versatz aus der
   Kachelmitte zwischen −33 px („Verkaufsraeume & Shops") und −76 px
   („Kindergaerten"). Beim Scrollen wandert die Beschriftung dadurch von
   Kachel zu Kachel. Am Schreibtisch faellt es nicht auf, weil die Kachel
   dort ein Drittel breit ist und der Text sie fast fuellt. */
.ebx .in {
	inline-size: 100%;
	text-align: left;
}