@charset "UTF-8";
/* ==========================================================================
   Musterseiten – gemeinsames Grundgerüst (heimseiten.de)
   Firmenstil kommt aus /files/muster/<slug>/stil.css (nur Variablen + Feinheiten).
   Abschnitte sind native Contao-Elementgruppen mit CSS-Klasse (abschnitt + Typ).
   ========================================================================== */

@font-face { font-family: "Inter"; src: url(schriften/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(schriften/manrope.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(schriften/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Outfit"; src: url(schriften/outfit.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(schriften/dm-sans.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(schriften/playfair-display.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(schriften/source-serif-4.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(schriften/work-sans.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(schriften/bricolage-grotesque.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(schriften/barlow-condensed-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(schriften/barlow-condensed.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--primaer: #1f5f8b;
	--primaer-dunkel: #164666;
	--akzent: #f0a020;
	--auf-primaer: #fff;
	--auf-akzent: #1b1b1b;
	--text: #22262b;
	--text-leise: #5b636d;
	--grund: #ffffff;
	--flaeche: #f4f6f8;
	--flaeche2: color-mix(in srgb, var(--akzent) 22%, #fff);
	--linie: #e3e7eb;
	--dunkel: #14181d;
	--auf-dunkel: #e9edf1;
	--schrift-titel: "Manrope", system-ui, sans-serif;
	--schrift-text: "Inter", system-ui, sans-serif;
	--titel-gewicht: 750;
	--titel-transform: none;
	--titel-abstand: -0.02em;
	--radius: 14px;
	--radius-klein: 8px;
	--schatten: 0 1px 2px rgb(16 24 32 / .06), 0 8px 24px rgb(16 24 32 / .08);
	--schatten-hoch: 0 2px 4px rgb(16 24 32 / .06), 0 20px 48px rgb(16 24 32 / .14);
	--schatten-mittel: 0 18px 40px rgb(30 24 16 / .12);
	--schatten-farbe: rgb(16 24 32 / .06);
	/* Dunkelmodus (seit 01.11.2026, Abschnitt am Ende dieser Datei): Farben NUR über diese Variablen, nie fest eintragen.
	   --primaer/--akzent/--dunkel sind Flächenfarben (mit --auf-primaer/--auf-akzent/--auf-dunkel darauf); wo die Firmenfarbe als
	   Schrift, Symbol oder Linie auf --grund/--flaeche steht, gilt --primaer-text (im Dunkeln aus --primaer aufgehellt). */
	--primaer-text: var(--primaer);
	--primaer-hover: var(--primaer-dunkel);
	--primaer-tint: var(--primaer);
	--karte-flaeche: var(--grund);
	--kopf-grund: rgb(255 255 255 / .88);
	--logo-grund: transparent;
	--logo-rand: 0px;
	--ton-anteil: 14%;
	--bento-text-1: #5b43a0; --bento-text-2: #8a5d00; --bento-text-3: #1d6a43; --bento-text-4: #a3304f; --bento-text-5: #0b5f80; --bento-text-6: #a3470f;
	--breite: 1200px;
	--rand: clamp(20px, 4vw, 40px);
	--abschnitt: clamp(64px, 9vw, 120px);
	--kopf-hoehe: 84px;
	--weich: cubic-bezier(.22, .61, .36, 1);

	/* Navigation wie contao57.heimseiten.com – einzige Variable ist die Markenfarbe */
	--nav-breakpoint: 1024;
	--nav-color: var(--text);
	--nav-active-color: var(--primaer-text);
	--nav-item-line-height: 1.5;
	--nav-font-size: 17px;
	--nav-font-weight: 500;
	--nav-mobile-background: var(--grund);
	--nav-mobile-color: var(--text);
	--nav-mobile-active-background: var(--flaeche);
	--nav-mobile-active-color: var(--primaer-text);
	--nav-mobile-active-border-color: var(--primaer-text);
	--nav-mobile-btn-clr: var(--primaer-text);
	--nav-mobile-separator-color: var(--linie);
	--nav-mobile-padding: 92px 20px 20px;
	--nav-mobile-font-size: 18px;
	--nav-mobile-backdrop-height: 0;
	--nav-submenu-background: var(--grund);
	--nav-burger-line-color: var(--primaer-text);
	/* Variablen des lesbaren CSS-Frameworks (FARBEN, Tabellenlinien, Fett) auf die Firmenfarben legen */
	--color_1: var(--primaer); --color_2: var(--akzent); --color_3: var(--dunkel); --color_4: var(--text-leise);
	--border_color: var(--linie); --font_weight_strong: 700;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--weich); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
body {
	margin: 0; background: var(--grund); color: var(--text);
	font: 400 clamp(16px, 1.05vw + 11px, 18px)/1.65 var(--schrift-text);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primaer-text); text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .2s; }
a:hover { color: var(--primaer-hover); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 {
	font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); text-transform: var(--titel-transform);
	letter-spacing: var(--titel-abstand); line-height: 1.12; margin: 0 0 .5em; color: inherit; text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 4.6vw + .6rem, 4.4rem); }
h2 { font-size: clamp(1.8rem, 2.6vw + .7rem, 3rem); }
h3 { font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); letter-spacing: -0.01em; }
ul { padding-left: 1.2em; }
.invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Entwurfs-Hinweis ---------- */
.EntwurfHinweis { background: var(--dunkel); color: var(--auf-dunkel); font-size: 13.5px; line-height: 1.4; }
.EntwurfHinweis .innen { max-width: var(--breite); margin: 0 auto; padding: 8px var(--rand); display: flex; gap: 16px; align-items: center; justify-content: center; text-align: center; }
.EntwurfHinweis a { color: #fff; }
.EntwurfSchließen { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; padding: 2px 6px; }
.EntwurfSchließen:hover { opacity: 1; }
.EntwurfHinweis.weg { display: none; }

/* ---------- Kopf ---------- */
.Kopf { position: sticky; top: 0; z-index: 50; background: var(--kopf-grund); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s; }
.Kopf.gescrollt { border-color: var(--linie); box-shadow: 0 6px 24px var(--schatten-farbe); }
.Kopf > .innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); min-height: var(--kopf-hoehe); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: min-height .3s var(--weich); }
.Kopf.gescrollt > .innen { min-height: 68px; }
.Kopf .content-html { display: contents; }
/* „Kopf passt“ (muster.html.twig) misst kurz ohne „gescrollt“: dabei keine Übergänge, sonst wäre der Messwert ein Zwischenstand */
.Kopf.messen, .Kopf.messen * { transition: none !important; }
/* Dunkler Kopf (seite.json → "kopf": "dunkel", Klasse am Seitenlayout, Hotel Königshof 1.11.2026): für helle oder goldene Logos,
   die auf Weiß verschwinden. Gilt in jedem Layout, auch bei offenem Handymenü (sonst stünde das Logo dort wieder auf Weiß). */
body.KopfDunkel { --logo-grund: transparent; --logo-rand: 0px; --nav-color: var(--auf-dunkel); --nav-active-color: var(--akzent); --nav-burger-line-color: var(--akzent);
	--nav-mobile-background: var(--dunkel); --nav-mobile-color: var(--auf-dunkel); --nav-mobile-active-background: rgb(255 255 255 / .06);
	--nav-mobile-active-color: var(--akzent); --nav-mobile-active-border-color: var(--akzent); --nav-mobile-separator-color: rgb(255 255 255 / .12);
	--nav-submenu-background: var(--dunkel); --nav-mobile-btn-clr: var(--akzent); }
body.KopfDunkel .Kopf, body.KopfDunkel.navigation-open .Kopf { background: color-mix(in srgb, var(--dunkel) 94%, transparent); border-bottom-color: rgb(255 255 255 / .08); }
body.KopfDunkel .Kopf.gescrollt { border-color: rgb(255 255 255 / .1); box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
body.KopfDunkel .Logo, body.KopfDunkel .Logo:hover { color: #fff; }
body.KopfDunkel .Farbschalter { color: rgb(255 255 255 / .8); }
body.KopfDunkel .Farbschalter:hover { color: #fff; background: rgb(255 255 255 / .09); }
body.KopfDunkel.nav-is-desktop .navigation-main .NaviFläche { background: rgb(255 255 255 / .09); }
body.KopfDunkel.nav-is-desktop .navigation-main .level_1 > li > a:hover { color: #fff; background: rgb(255 255 255 / .09); }
body.KopfDunkel.nav-is-desktop .navigation-main .level_1 > li > strong::after { background: var(--akzent); }
body.KopfDunkel.nav-is-desktop .navigation-main .level_1 > li:last-child > :is(a, strong) { background: var(--akzent); color: var(--auf-akzent); box-shadow: none; }
body.KopfDunkel.nav-is-desktop .navigation-main .level_1 > li:last-child > a:hover { background: color-mix(in srgb, var(--akzent) 85%, #fff); color: var(--auf-akzent); }
body.KopfDunkel.nav-is-desktop .navigation-main .level_2 { background: var(--dunkel); border-color: rgb(255 255 255 / .1); }
body.KopfDunkel.nav-is-desktop .navigation-main .level_2 :is(a, strong) { color: var(--auf-dunkel); }
body.KopfDunkel.nav-is-desktop .navigation-main .level_2 a:hover, body.KopfDunkel.nav-is-desktop .navigation-main .level_2 strong { background: rgb(255 255 255 / .08); color: var(--akzent); }
body.KopfDunkel.nav-is-mobile .navigation-main { background: var(--dunkel) !important; }
body.KopfDunkel.nav-is-mobile .navigation-main .btn-toggle-submenu::after { background: var(--akzent) !important; }
.Logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.1; }
.Logo img { height: 52px; width: auto; max-width: min(320px, 58vw); object-fit: contain; object-position: left center; transition: height .3s var(--weich); } /* sehr breite Logos (Roth & Sohn) brechen sonst das Menü um */
.Kopf.gescrollt .Logo img { height: 42px; }
.LogoSvg img { height: 58px; } .Kopf.gescrollt .LogoSvg img { height: 48px; }
.Logo small { display: block; font: 500 .72rem/1.3 var(--schrift-text); color: var(--text-leise); letter-spacing: .02em; text-transform: none; }
.Logo:hover { color: var(--text); }
/* Logo als Bildelement (seit 31.10.2026): div.content-image.Logo > figure > a > img */
.Logo figure { margin: 0; } .Logo figure a { display: flex; align-items: center; }
/* Dunkelmodus: dunkle Logos (Pixel, SVG) verschwänden auf dem dunklen Kopf; sie stehen dann auf einer hellen Platte (--logo-grund, nur im Dunkeln gesetzt;
   Seiten mit dunklem Kopf, Klasse KopfDunkel, haben ihre Logos ohnehin für dunklen Grund und lassen die Platte weg) */
.Logo figure a { background: var(--logo-grund); padding: var(--logo-rand); border-radius: 8px; }

/* Sprachwechsler (seit 01.11.2026, bauen.php legt ihn bei mehreren Sprachen im Kopf an): „DE | EN“ als Text, aktive Sprache fett */
.Sprachwechsel ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; font: 600 .86rem/1 var(--schrift-text); letter-spacing: .08em; }
.Sprachwechsel li + li::before { content: "|"; color: var(--text-leise); opacity: .6; padding: 0 2px; }
.Sprachwechsel :is(a, strong) { display: inline-block; padding: 10px 8px; border-radius: 6px; text-decoration: none; }
.Sprachwechsel a { color: var(--text-leise); transition: color .2s, background .2s; }
.Sprachwechsel a:hover { color: var(--primaer-text); background: var(--flaeche); }
.Sprachwechsel strong { color: var(--primaer-text); }
body.KopfDunkel .Sprachwechsel a { color: rgb(255 255 255 / .7); }
body.KopfDunkel .Sprachwechsel a:hover { color: #fff; background: rgb(255 255 255 / .09); }
body.KopfDunkel .Sprachwechsel strong { color: var(--akzent); }
body.KopfDunkel .Sprachwechsel li + li::before { color: #fff; }
body.nav-is-mobile .Sprachwechsel { order: 2; margin-left: auto; position: relative; z-index: 61; } /* bleibt neben dem Menüknopf sichtbar, auch bei offenem Menü */
body.nav-is-mobile .Kopf:has(.Sprachwechsel) .mod_navigation { order: 3; margin-left: 0; }
/* Logo links, Menü und Sprachwechsler zusammen rechts (ohne Sprachwechsler steht das Menü ohnehin am rechten Rand) */
body.nav-is-desktop .Kopf:has(.Sprachwechsel) .mod_navigation { margin-left: auto; }
body.nav-is-desktop .Sprachwechsel { margin-left: -8px; }

/* Hell/Dunkel-Schalter (seit 01.11.2026): Knopf im Kopf rechts neben dem Sprachwechsler (nur Desktop, ab 1024 px wie das Menü) und als Zeile am Ende des
   Handy-Menüs (basis.js hängt dort eine Kopie an). Symbole = die Kartensymbole IconSonne/IconMond (eine Quelle: symbole.mjs), gezeigt wird das Ziel:
   im Hellen der Mond, im Dunklen die Sonne. Steuerung allein über data-theme am <html> bzw. prefers-color-scheme, damit nichts umspringt, bevor das Skript läuft. */
.Farbschalter { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-leise); font: inherit; cursor: pointer; transition: color .2s, background .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.Farbschalter:hover { background: var(--flaeche); color: var(--primaer-text); }
/* Symbolwechsel (Niels 2.11.2026, Vorbild entrümpelung.koeln): Mond und Sonne liegen übereinander, das gehende dreht sich weg und schrumpft,
   das kommende dreht sich herein; die Farben blenden per View Transition über (basis.js) */
.Farbsymbol { grid-area: 1 / 1; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.Farbschalter:active { transform: scale(.9); }
.Farbschalter .Farbtext { display: none; }
.Farbschalter .IconSonne { opacity: 0; transform: rotate(-90deg) scale(.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .Farbschalter .IconMond { opacity: 0; transform: rotate(90deg) scale(.5); } :root:not([data-theme="light"]) .Farbschalter .IconSonne { opacity: 1; transform: none; } }
:root[data-theme="dark"] .Farbschalter .IconMond { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .Farbschalter .IconSonne { opacity: 1; transform: none; }
html:not(.js) .Farbschalter, html:not(.js) .MenüFarbe { display: none; }
.MenüFarbe { display: none; }
/* Desktop/Handy nach den Klassen am body statt nach Breite: passt das Menü nicht in eine Zeile, schaltet die Seite schon über 1024 px aufs
   Handy-Menü (Skript „Kopf passt“ in muster.html.twig, Fahrschule Stein 2.11.2026) */
body.nav-is-desktop .Kopf .mod_navigation { margin-left: auto; }
body.nav-is-desktop .Kopf > .innen > .Farbschalter { margin-left: -10px; }
body.nav-is-desktop .Kopf .Sprachwechsel + .Farbschalter { margin-left: -14px; }
body.nav-is-mobile .Kopf > .innen > .Farbschalter { display: none; }
body.nav-is-mobile .MenüFarbe { display: block; margin-top: 8px; }
body.nav-is-mobile .MenüFarbe .Farbschalter { display: grid; grid-template-columns: 20px auto; justify-content: start; align-items: center; column-gap: 14px; width: 100%; height: auto; padding: 12px 10px; border-radius: 0; background: transparent; color: var(--nav-mobile-color); font-size: var(--nav-mobile-font-size); text-align: left; }
body.nav-is-mobile .MenüFarbe .Farbschalter:hover { color: var(--nav-mobile-active-color); }
body.nav-is-mobile .MenüFarbe .Farbtext { display: inline; grid-area: 1 / 2; }
body.nav-is-mobile .MenüFarbe .Farbschalter:active { transform: none; }

/* Desktop-Navigation */
body.nav-is-desktop .navigation-main .level_1 { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
body.nav-is-desktop .navigation-main .level_1 > li > :is(a, strong) {
	display: block; padding: 10px 14px; border-radius: 999px; font-size: var(--nav-font-size); font-weight: var(--nav-font-weight);
	color: var(--nav-color); text-decoration: none; position: relative; transition: color .2s, background .2s;
}
body.nav-is-desktop .navigation-main .level_1 > li > a:hover { background: var(--flaeche); color: var(--primaer-text); }
/* Stufen aus „Kopf passt“ (muster.html.twig), bevor das Handy-Menü kommt */
body.nav-is-desktop.kopfOhneStart .navigation-main .level_1 > li.istStart { display: none; }
body.nav-is-desktop.kopfEng .navigation-main .level_1 { gap: 0; }
body.nav-is-desktop.kopfEng .navigation-main .level_1 > li > :is(a, strong) { padding-inline: 9px; font-size: calc(var(--nav-font-size) * .94); }
body.nav-is-desktop .navigation-main .level_1 > li > strong { color: var(--nav-active-color); }
/* Gleitende Hover-Fläche (basis.js): ersetzt den Hintergrund des einzelnen Punktes, mit Skript und Maus */
.NaviFläche { display: none; }
body.nav-is-desktop .navigation-main .NaviFläche { display: block; position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; padding: 0 !important; margin: 0 !important; border: 0 !important; background: var(--flaeche); opacity: 0; pointer-events: none;
	transition: translate .32s var(--weich), width .32s var(--weich), height .32s var(--weich), opacity .2s ease; }
body.nav-is-desktop .navigation-main .naviFlächeAn > .NaviFläche { opacity: 1; }
body.nav-is-desktop .navigation-main .level_1 { position: relative; }
body.nav-is-desktop .navigation-main :is(.level_1, .level_2) > li > :is(a, strong) { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
	.js body.nav-is-desktop .navigation-main .level_1 > li:not(:last-child) > a:hover,
	.js body.nav-is-desktop .navigation-main .level_2 a:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .NaviFläche { transition: opacity .15s !important; } }
body.nav-is-desktop .navigation-main .level_1 > li > strong::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--primaer-text); }
body.nav-is-desktop .navigation-main .level_1 > li:last-child > :is(a, strong) { background: var(--primaer); color: var(--auf-primaer); margin-left: 8px; }
body.nav-is-desktop .navigation-main .level_1 > li:last-child > a:hover { background: var(--primaer-dunkel); }
body.nav-is-desktop .navigation-main .level_1 > li:last-child > strong::after { display: none; }

/* Mobile Navigation (Struktur wie contao57: .ul-wrapper + Core-navigation.css) */
body.nav-is-mobile .navigation-main :is(a, strong) { padding: 12px 10px !important; margin: 0 !important; text-decoration: none; }
body.nav-is-mobile .navigation-main ul { list-style: none; padding: 0; margin: 0; }
body.nav-is-mobile .navigation-main .level_1 > li { border-bottom: 1px solid var(--nav-mobile-separator-color); }
body.nav-is-mobile .navigation-main .level_1 > li > :is(a, strong) { display: block; font-size: var(--nav-mobile-font-size); color: var(--nav-mobile-color); }
body.nav-is-mobile .navigation-main .level_1 > li > strong { color: var(--nav-mobile-active-color); background: var(--nav-mobile-active-background); border-left: 3px solid var(--nav-mobile-active-border-color); }
.navigation-main .level_1 .ul-wrapper { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .35s var(--weich); }
/* Handy: Unterliste liegt in der Hülle; Contao blendet nur direkte Kinder ein, deshalb hier immer da und per Hülle animiert */
body.nav-is-mobile .navigation-main li > .ul-wrapper > ul { display: flex; visibility: hidden; transition: visibility .35s; }
body.nav-is-mobile .navigation-main li.nav-expanded > .ul-wrapper > ul { visibility: visible; }
.navigation-main .level_1 li.nav-expanded > .ul-wrapper { grid-template-rows: 1fr; }
/* Desktop-Untermenü (Niels 31.10.): die Hülle .ul-wrapper ist nur fürs mobile Aufklappen da; am Desktop zeigt Contao
   nur ein direktes Kind-ul (li.nav-expanded > ul), deshalb die Hülle dort auflösen */
/* Handy: backdrop-filter macht die Kopfzeile zum Bezugsrahmen für das fixe Menü, es war nur kopfhoch (bis 31.10.) */
body.navigation-open .Kopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grund); }
body.nav-is-mobile .navigation-main { padding-top: calc(var(--kopf-unten, 112px) + 12px) !important; }
body.nav-is-mobile .navigation-main .btn-toggle-submenu::after { background: var(--primaer-text) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 22px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 22px no-repeat; }
body.nav-is-desktop .navigation-main .level_1 .ul-wrapper { display: contents; }
body.nav-is-desktop .navigation-main li.nav-expanded > .ul-wrapper > ul { display: flex; }
body.nav-is-desktop .navigation-main .level_2 { min-width: 230px; padding: 6px; border-radius: var(--radius); box-shadow: var(--schatten-hoch); border: 1px solid var(--linie); top: calc(100% + 6px); }
body.nav-is-desktop .navigation-main .level_2::before { display: none; }
body.nav-is-desktop .navigation-main .level_2 li { border: 0 !important; }
body.nav-is-desktop .navigation-main .level_2 :is(a, strong) { font-size: .98rem; font-weight: 500; padding: 10px 14px; border-radius: var(--radius-klein); color: var(--text); transition: background .2s, color .2s; }
body.nav-is-desktop .navigation-main .level_2 a:hover, body.nav-is-desktop .navigation-main .level_2 strong { background: var(--flaeche); color: var(--primaer-text); }
.navigation-main .level_1 .ul-wrapper > ul { min-height: 0; }
.nav-burger { z-index: 60; }
/* Engere Menüpunkte auf JEDER Desktop-Breite: seit dem Hell/Dunkel-Schalter fehlten der Fahrschule Stein ab 1366 px 18 px (Inhalt dort fest
   1200 px, also knapper als bei 1280 px); die erste Fassung galt nur bis 1360 px und wurde nur bei 1280 px gemessen (2.11.2026).
   Reicht es trotzdem nicht, schaltet das Skript „Kopf passt“ aufs Handy-Menü; kein Umbruch in zwei Zeilen. */
body.nav-is-desktop .navigation-main .level_1 { gap: 2px; flex-wrap: nowrap; }
body.nav-is-desktop .navigation-main .level_1 > li { flex: none; }
body.nav-is-desktop .navigation-main .level_1 > li > :is(a, strong) { padding-left: 11px; padding-right: 11px; white-space: nowrap; }
body.nav-is-desktop .navigation-main .level_1 > li > strong::after { left: 11px; right: 11px; }

/* ---------- Abschnitte ---------- */
main { display: block; }
.mod_article { position: relative; }
.Abschnitt { padding: var(--abschnitt) var(--rand); position: relative; }
.Abschnitt > * { max-width: var(--breite); margin-left: auto; margin-right: auto; }
.Abschnitt.Fläche { background: var(--flaeche); }
.Abschnitt.dunkel { background: var(--dunkel); color: var(--auf-dunkel); }
/* Mehr Farbe (Niels 2.11.2026, EhrenRad: „sehr langweilig, immer nur die gleiche Hintergrundfarbe, obwohl es tolle andere Farben auf dem Flyer gibt“):
   Fläche2 = zweite Firmenfarbe hell (seite.json farben.flaeche2, sonst aus dem Akzent gemischt), Akzentfläche = die kräftige Firmenfarbe als Grund.
   Akzentfläche nur für Text-, Text-Bild- und Zitat-Abschnitte (Karten darin behalten ihre eigene Fläche). */
.Abschnitt.Fläche2 { background: var(--flaeche2); }
.Abschnitt.Akzentfläche { background: var(--akzent); color: var(--auf-akzent); --text: var(--auf-akzent); --text-leise: color-mix(in srgb, var(--auf-akzent) 82%, var(--akzent)); --primaer-text: var(--auf-akzent); }
.Abschnitt.Akzentfläche :is(h1, h2, h3, .Oberzeile) { color: var(--auf-akzent); }
.Abschnitt.Akzentfläche .Knopf:not(.zweit) { background: var(--auf-akzent); color: var(--akzent); }
.Abschnitt.dunkel a:not(.Knopf) { color: #fff; }

.AbschnittKopf, .Abschnitt .content-headline { text-align: center; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.AbschnittKopf .rte, .AbschnittKopf p { color: var(--text-leise); font-size: 1.08em; }
.dunkel .AbschnittKopf p { color: color-mix(in srgb, var(--auf-dunkel) 80%, transparent); }
.Oberzeile { display: inline-block; font: 650 .78rem/1 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--primaer-text); margin-bottom: 14px; }
.links .AbschnittKopf, .AbschnittKopf.links { text-align: left; margin-left: 0; }

/* Knöpfe (im Fließtext als <a class="knopf">) */
.Knopf, a.Knopf, .KnopfLink a, .Kontaktformular button.submit, .content-hyperlink:not(:has(img)) > a {
	display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1;
	background: var(--akzent); color: var(--auf-akzent); text-decoration: none; transition: transform .25s var(--weich), box-shadow .25s, background .2s;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--akzent) 35%, transparent);
}
.Knopf::after, .KnopfLink a::after, .Kontaktformular button.submit::after, .content-hyperlink:not(:has(img)) > a::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-pfeil) center/contain no-repeat; mask: var(--i-pfeil) center/contain no-repeat; transition: transform .25s var(--weich); }
.Knopf:hover, .KnopfLink a:hover, .Kontaktformular button.submit:hover, .content-hyperlink:not(:has(img)) > a:hover { transform: translateY(-2px); color: var(--auf-akzent); box-shadow: 0 10px 26px color-mix(in srgb, var(--akzent) 45%, transparent); }
.Knopf:hover::after, .KnopfLink a:hover::after, .Kontaktformular button.submit:hover::after, .content-hyperlink:not(:has(img)) > a:hover::after { transform: translateX(4px); }
a.Knopf.zweit { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
a.Knopf.zweit:hover { background: rgb(255 255 255 / .12); }
.Knöpfe, p:has(> .Knopf + .Knopf) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Hero ---------- */
.Abschnitt.Hero { padding: 0; min-height: min(86vh, 820px); display: grid; isolation: isolate; overflow: hidden; color: #fff; }
.Abschnitt.Hero > * { grid-area: 1 / 1; max-width: none; margin: 0; }
.Hero .content-image, .Hero .content-image figure { height: 100%; margin: 0; }
.Hero .content-image img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s var(--weich) both; }
.Hero .content-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(10 14 20 / .82) 0%, rgb(10 14 20 / .55) 45%, rgb(10 14 20 / .12) 100%); z-index: 1; }
.Hero .content-image { position: relative; z-index: -1; }
.Hero .content-text { align-self: center; width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(96px, 12vw, 160px) var(--rand); position: relative; z-index: 2; }
.Hero .content-text > * { max-width: 680px; }
.Hero .content-text h1 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.Hero .content-text p { font-size: clamp(1.05rem, .5vw + 1rem, 1.3rem); color: rgb(255 255 255 / .9); }
/* „TextOben“: Text oben, wenn das Motiv unten im Bild liegt (z. B. Skyline) */
.Hero.TextOben:not(.geteilt) .content-text { align-self: start; }
.Hero .Oberzeile { color: var(--akzent); }
.Hero a.Knopf.zweit { color: #fff; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Hero geteilt (Text links, Bild rechts) */
.Abschnitt.Hero.geteilt { color: var(--text); min-height: 0; grid-template-columns: 1.05fr 1fr; padding: clamp(48px, 7vw, 96px) var(--rand); max-width: none; gap: clamp(32px, 5vw, 72px); align-items: center; background: linear-gradient(180deg, var(--flaeche), var(--grund)); }
.Abschnitt.Hero.geteilt > * { grid-area: auto; }
/* Text bündig mit Logo und Fuß, auch auf breiten Bildschirmen (bis 1.11.2026 ab 1440 px links daneben, bei 1920 px 174 px) */
.Abschnitt.Hero.geteilt { padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Hero.geteilt .content-text { padding: 0; max-width: 620px; margin-left: auto; order: -1; }
.Hero.geteilt .content-text h1 { color: var(--text); text-shadow: none; }
.Hero.geteilt .content-text p { color: var(--text-leise); }
.Hero.geteilt .content-image { z-index: 0; max-width: 620px; }
.Hero.geteilt .content-image::after { display: none; }
.Hero.geteilt .content-image img { border-radius: calc(var(--radius) * 1.6); box-shadow: var(--schatten-hoch); aspect-ratio: 4 / 3.4; animation: none; }
.Hero.geteilt a.Knopf.zweit { color: var(--text); }

/* Seitenkopf der Unterseiten */
.Abschnitt.Seitenkopf { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); background: var(--flaeche); overflow: hidden; }
.Abschnitt.Seitenkopf::before { content: ""; position: absolute; right: -10vw; top: -30%; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primaer-tint) 16%, transparent), transparent); pointer-events: none; }
.Seitenkopf .content-text { max-width: var(--breite); }
.Seitenkopf .content-text > * { max-width: 760px; }
.Seitenkopf h1 { font-size: clamp(2.1rem, 3.6vw + .6rem, 3.6rem); }
.Seitenkopf p { color: var(--text-leise); font-size: 1.12em; }

/* ---------- Leistungen (Karten) ---------- */
.Abschnitt.Leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.Abschnitt.Leistungen > * { margin: 0; max-width: none; }
.Abschnitt.Leistungen > .AbschnittKopf { grid-column: 1 / -1; margin: 0 auto clamp(16px, 3vw, 32px); }
.Abschnitt.Leistungen { padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Karte { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(24px, 2.4vw, 32px); position: relative; transition: transform .35s var(--weich), box-shadow .35s var(--weich), border-color .35s; }
/* Karten heben sich IMMER vom Hintergrund ab (Niels 31.10.: keine weißen Kacheln auf Weiß): auf weißem Abschnitt
   getönte Fläche, auf heller Fläche weiß mit Schatten, auf dunklem Abschnitt halbtransparent hell */
.Karte { background: color-mix(in srgb, var(--primaer-tint) 6%, var(--grund)); border-color: color-mix(in srgb, var(--primaer-tint) 10%, transparent); }
.Fläche .Karte { background: var(--karte-flaeche); border-color: transparent; box-shadow: var(--schatten); }
.dunkel .Karte { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
.Karte:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); border-color: transparent; }
/* Symbol frei ohne Kachel (Niels 31.10., Vorbild jh3yy): ::before hält nur den Platz, ::after ist das Symbol */
.Karte::before { content: ""; display: block; width: 36px; height: 36px; margin-bottom: 18px; }
.Karte::after { content: ""; position: absolute; top: clamp(24px, 2.4vw, 32px); left: clamp(24px, 2.4vw, 32px); width: 36px; height: 36px; background: var(--primaer-text); -webkit-mask: var(--icon, var(--i-haken)) center/contain no-repeat; mask: var(--icon, var(--i-haken)) center/contain no-repeat; transform-origin: 50% 60%; transition: background .35s; }
.Karte:hover::after, .Karte:focus-within::after, .Karte.bentoAktiv::after { animation: symbol-wippen .7s var(--weich); }
/* Symbol als SVG (basis.js): Linien werden gezeichnet (pathLength=1), beim Hereinscrollen und bei jedem Überfahren */
.Karte.mitSymbol::after { display: none; }
.KartenSymbol { position: absolute; top: clamp(24px, 2.4vw, 32px); left: clamp(24px, 2.4vw, 32px); width: 36px; height: 36px; color: var(--primaer-text); overflow: visible; transition: color .35s; }
.Karte.zeichnen .KartenSymbol :is(path, circle, ellipse, line, polyline, polygon, rect) { stroke-dasharray: 1; animation: symbol-zeichnen 1.1s var(--weich) both; }
.Karte.zeichnen .KartenSymbol :is(path, circle, ellipse, line, polyline, polygon, rect):nth-child(2) { animation-delay: .12s; }
.Karte.zeichnen .KartenSymbol :is(path, circle, ellipse, line, polyline, polygon, rect):nth-child(n+3) { animation-delay: .24s; }
@keyframes symbol-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes symbol-wippen { 0% { transform: none; } 30% { transform: translateY(-5px) rotate(-10deg) scale(1.14); } 60% { transform: translateY(0) rotate(6deg) scale(1.04); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .Karte::after { animation: none !important; } }
.Karte.ohneIcon::before, .Karte.ohneIcon::after { display: none; }
.Bento { position: relative; isolation: isolate; }
.Bento > .Karte:nth-of-type(6n + 1) { --ton-fuell: #5b43a0; --ton-kraeftig: var(--bento-text-1); }
.Bento > .Karte:nth-of-type(6n + 2) { --ton-fuell: #8a5d00; --ton-kraeftig: var(--bento-text-2); }
.Bento > .Karte:nth-of-type(6n + 3) { --ton-fuell: #1d6a43; --ton-kraeftig: var(--bento-text-3); }
.Bento > .Karte:nth-of-type(6n + 4) { --ton-fuell: #a3304f; --ton-kraeftig: var(--bento-text-4); }
.Bento > .Karte:nth-of-type(6n + 5) { --ton-fuell: #0b5f80; --ton-kraeftig: var(--bento-text-5); }
.Bento > .Karte:nth-of-type(6n + 6) { --ton-fuell: #a3470f; --ton-kraeftig: var(--bento-text-6); }
.Bento > .Karte { --ton: color-mix(in oklab, var(--ton-fuell) var(--ton-anteil), var(--grund)); }
.BentoFläche { display: none; }
@media (hover: hover) and (pointer: fine) {
	.BentoFläche { display: block; position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; background-color: var(--ton, transparent);
		transition: translate .45s var(--weich), width .45s var(--weich), height .45s var(--weich), opacity .25s, background-color .45s; }
	.bentoLäuft > .BentoFläche { opacity: 1; }
	.BentoSprung > .BentoFläche { transition: opacity .25s; }
	.Bento > .Karte:hover { transform: none; }
	.Bento > .Karte, .js .Bento > .Karte.einblenden { transition: opacity .8s var(--weich), transform .8s var(--weich), background-color .3s, border-color .3s, box-shadow .3s; transition-delay: var(--verz, 0s), var(--verz, 0s), 0s, 0s, 0s; }
	.Bento.bentoLäuft > .Karte.bentoAktiv { background-color: transparent; border-color: transparent; box-shadow: none; }
	.Bento > .Karte.bentoAktiv::after { background: var(--ton-kraeftig); }
	.Bento > .Karte.bentoAktiv .KartenSymbol { color: var(--ton-kraeftig); }
	.Bento > .Karte.bentoAktiv a { color: var(--ton-kraeftig); }
}
@media (prefers-reduced-motion: reduce) { .BentoFläche { transition: opacity .15s, background-color .15s !important; } }
.Karte h3 { margin-bottom: .45em; }
.Karte p, .Karte li { color: var(--text-leise); font-size: .97em; }
.Karte ul { margin: .6em 0 0; padding-left: 1.1em; }

/* ---------- Text + Bild ---------- */
.Abschnitt.TextBild { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Abschnitt.TextBild > * { margin: 0; max-width: none; }
.TextBild.BildLinks > .content-image { order: -1; }
/* Hochkant-Foto neben Text (Porträt): nicht auf 5:4 quer beschneiden, Gesicht oben halten */
.TextBild.Hochformat .content-image { max-width: 460px; justify-self: center; }
.TextBild.Hochformat .content-image img { aspect-ratio: 4 / 5; object-position: 50% 18%; }
/* Bilder mit Schrift (Flyer, Banner, Plakate; bauen.php → schriftbilder.py, Niels 2.11.2026 Salon Denise): nie beschneiden, eigenes Seitenverhältnis */
.TextBild.BildGanz .content-image { align-self: center; }
.TextBild.BildGanz .content-image img { aspect-ratio: auto; height: auto; object-fit: contain; }
.Abschnitt.BildGanz:not(.TextBild, .Hero) .content-image img { aspect-ratio: auto; height: auto; max-height: none; object-fit: contain; }
/* isolation: sonst rutscht das Deko-Rechteck (z-index -1) hinter den Hintergrund von .Fläche und verschwindet */
.TextBild .content-image { position: relative; isolation: isolate; }
.TextBild .content-image img { border-radius: calc(var(--radius) * 1.4); box-shadow: var(--schatten-hoch); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.TextBild .content-image::before { content: ""; position: absolute; inset: auto -18px -18px auto; width: 55%; height: 55%; border-radius: calc(var(--radius) * 1.4); background: color-mix(in srgb, var(--akzent) 22%, transparent); z-index: -1; }
.TextBild.BildLinks .content-image::before { inset: auto auto -18px -18px; }
.TextBild .content-text ul { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 10px; }
.TextBild .content-text li { position: relative; padding-left: 34px; }
.TextBild .content-text li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--primaer-tint) 13%, transparent); }
.TextBild .content-text li::after { content: ""; position: absolute; left: 5px; top: calc(.2em + 5px); width: 12px; height: 12px; background: var(--primaer-text); -webkit-mask: var(--i-haken) center/contain no-repeat; mask: var(--i-haken) center/contain no-repeat; }

/* ---------- Zahlen ---------- */
.Abschnitt.Zahlen { background: var(--primaer); color: var(--auf-primaer); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); overflow: hidden; }
.Abschnitt.Zahlen > * { margin: 0; max-width: none; }
.Zahl { text-align: center; }
.Zahl h3 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin-bottom: .1em; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.Zahl p { opacity: .85; font-size: .98em; }

/* ---------- Ablauf ---------- */
.Abschnitt.Ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(20px, 3vw, 36px); counter-reset: schritt; padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Abschnitt.Ablauf > * { margin: 0; max-width: none; }
.Abschnitt.Ablauf > .AbschnittKopf { grid-column: 1 / -1; margin: 0 auto clamp(8px, 2vw, 24px); }
.Schritt { counter-increment: schritt; position: relative; padding-top: 72px; }
.Schritt::before { content: counter(schritt, decimal-leading-zero); position: absolute; top: 0; left: 0; font: 800 2.6rem/1 var(--schrift-titel); color: transparent; -webkit-text-stroke: 1.5px var(--primaer-text); }
.Schritt::after { content: ""; position: absolute; top: 22px; left: 76px; right: -12px; height: 1px; background: linear-gradient(90deg, var(--linie), transparent); }
.Schritt:last-child::after { display: none; }
.Schritt p { color: var(--text-leise); }

/* ---------- Galerie ---------- */
.content-gallery ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.content-gallery li { margin: 0; overflow: hidden; border-radius: var(--radius-klein); }
.content-gallery figure { margin: 0; }
.content-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--weich), filter .4s; }
.content-gallery li:hover img { transform: scale(1.06); }
.content-gallery figcaption { font-size: .85em; color: var(--text-leise); padding: 8px 2px 0; }

/* ---------- Zitat / Hinweis ---------- */
.Abschnitt.Zitat .content-text { max-width: 860px; text-align: center; }
.Abschnitt.Zitat blockquote, .Abschnitt.Zitat .content-text p:first-child { font: 500 clamp(1.3rem, 1.4vw + 1rem, 1.9rem)/1.4 var(--schrift-titel); letter-spacing: -0.01em; margin: 0 0 .8em; }

/* ---------- CTA ---------- */
.Abschnitt.Aufruf { background: var(--dunkel); color: var(--auf-dunkel); overflow: hidden; isolation: isolate; text-align: center; }
.Abschnitt.Aufruf::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primaer) 55%, transparent), transparent); z-index: -1; animation: schweben 14s ease-in-out infinite alternate; }
.Abschnitt.Aufruf .content-text { max-width: 760px; }
.Abschnitt.Aufruf h2 { color: #fff; }
.Abschnitt.Aufruf p { color: color-mix(in srgb, var(--auf-dunkel) 85%, transparent); font-size: 1.1em; }
.Abschnitt.Aufruf p:has(.Knopf) { justify-content: center; }
@keyframes schweben { to { transform: translate(-12vw, 18%); } }
/* Farbverläufe der Abschnitte treiben ganz langsam (Niels 30.10.): nur transform auf eigenen Ebenen, daher ohne Neuzeichnen.
   Hero „geteilt“: zum linearen Verlauf ein weicher Farbschein, der wandert; Seitenkopf: sein Farbfleck wandert und atmet. */
.Abschnitt.Seitenkopf::before { animation: verlauf-treiben 24s ease-in-out infinite alternate; }
.Abschnitt.Hero.geteilt { overflow: hidden; isolation: isolate; }
.Abschnitt.Hero.geteilt::before { content: ""; position: absolute; z-index: -1; left: -12%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--akzent) 16%, transparent), transparent); pointer-events: none; animation: verlauf-treiben 28s ease-in-out infinite alternate; }
@keyframes verlauf-treiben { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vw, 8%) scale(1.1); } 100% { transform: translate(-3vw, 14%) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .Abschnitt.Seitenkopf::before, .Abschnitt.Hero.geteilt::before, .Abschnitt.Aufruf::before { animation: none; } }

/* ---------- Kontakt ---------- */
.Abschnitt.Kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Abschnitt.Kontakt > * { margin: 0; max-width: none; }
.Abschnitt.Kontakt > .AbschnittKopf { grid-column: 1 / -1; margin: 0 auto 16px; }
.Kontakt .Karte a { font-weight: 600; text-decoration: none; }
/* ---------- Kärtchen (Niels 1.11.2026, Hotel Königshof „Partner und Links“): viele kurze Gruppen (Linklisten, Partner, Marken,
   kurze Fakten) als kleine Karten im Raster (nicht „Kacheln“: die Klasse hat das CSS-Framework) statt als lange schmale Textspalte. Drei je Zeile, die letzte Zeile mittig;
   vier oder acht Kärtchen: vier je Zeile. Symbol klein, Links als Zeilen mit Pfeil für „öffnet extern“. ---------- */
.Abschnitt.Kärtchen { --kärtchen-spalten: 3; --kärtchen-abstand: clamp(12px, 1.6vw, 20px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kärtchen-abstand); padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Abschnitt.Kärtchen:has(> .kompakt:nth-child(4 of .kompakt):nth-last-child(1 of .kompakt), > .kompakt:nth-child(8 of .kompakt):nth-last-child(1 of .kompakt)) { --kärtchen-spalten: 4; }
.Abschnitt.Kärtchen:has(> .kompakt:nth-child(2 of .kompakt):nth-last-child(1 of .kompakt)) { --kärtchen-spalten: 2; }
.Abschnitt.Kärtchen > * { margin: 0; max-width: none; }
.Abschnitt.Kärtchen > .AbschnittKopf { flex: 0 0 100%; margin: 0 0 clamp(12px, 2.4vw, 28px); }
.Abschnitt.Kärtchen > .AbschnittKopf > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.Abschnitt.Kärtchen > .kompakt { flex: 0 1 calc((100% - (var(--kärtchen-spalten) - 1) * var(--kärtchen-abstand)) / var(--kärtchen-spalten)); min-width: 0; }
@media (max-width: 960px) { .Abschnitt.Kärtchen { --kärtchen-spalten: 2 !important; } }
@media (max-width: 560px) { .Abschnitt.Kärtchen { --kärtchen-spalten: 1 !important; } }
.Karte.kompakt { padding: clamp(18px, 1.8vw, 24px); }
.Karte.kompakt::before { width: 24px; height: 24px; margin-bottom: 14px; }
.Karte.kompakt::after, .Karte.kompakt .KartenSymbol { width: 24px; height: 24px; top: clamp(18px, 1.8vw, 24px); left: clamp(18px, 1.8vw, 24px); }
.Karte.kompakt h3 { font-size: 1.08rem; margin-bottom: .5em; }
.Karte.kompakt ul { list-style: none; padding: 0; margin: 0; }
.Karte.kompakt li + li { border-top: 1px solid var(--linie); }
.Karte.kompakt li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .55em 0; color: var(--text); font-size: .95rem; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; transition: color .25s; }
.Karte.kompakt li a[target="_blank"]::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; opacity: .5; -webkit-mask: var(--i-extern) center/contain no-repeat; mask: var(--i-extern) center/contain no-repeat; transition: opacity .25s, transform .25s var(--weich); }
.Karte.kompakt li a:hover { color: var(--primaer-text); }
.Karte.kompakt li a:hover::after { opacity: 1; transform: translate(2px, -2px); }
.Bento > .kompakt.bentoAktiv li a { color: var(--text); }
.Bento > .kompakt.bentoAktiv li a:hover { color: var(--ton-kraeftig); }

/* Karte mit Foto (Niels 1.11.2026, Königshof): seite.json karten[].bild. Foto randlos oben, Titel und Text darunter. In der großen
   ersten Bento-Karte füllt das Foto die Fläche, die sonst zwischen Symbol und Titel leer bliebe. */
.Karte.mitBild { --karte-innen: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; padding: 0 0 var(--karte-innen); overflow: hidden; }
.Karte.mitBild > :not(figure) { padding-left: var(--karte-innen); padding-right: var(--karte-innen); }
.Karte.mitBild > figure { order: -1; position: relative; margin: 0 0 clamp(18px, 2vw, 24px); aspect-ratio: 16 / 10; overflow: hidden; }
.Karte.mitBild > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--weich); }
.Karte.mitBild:hover > figure img { transform: scale(1.04); }
@media (min-width: 901px) {
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte.mitBild:nth-child(1 of .Karte) > figure { flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .Karte.mitBild:hover > figure img { transform: none; } }

/* Bento-Raster (Niels 31.10.): Karten unterschiedlich groß, je nach Anzahl. Erste Karte zwei Zeilen hoch, Titel unten. */
@media (min-width: 901px) {
	.Abschnitt:is(.Leistungen, .Kontakt) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte) { grid-row: span 2; display: flex; flex-direction: column; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte)::before { margin-bottom: auto; padding-bottom: 48px; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte)::after, .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte) .KartenSymbol { width: 48px; height: 48px; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte) h3 { font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem); }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(2 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(1 of .Karte) { grid-column: span 2; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(n+2 of .Karte) { grid-column: span 2; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(4 of .Karte)) > .Karte:nth-child(2 of .Karte) { grid-column: span 2; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(5 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(5 of .Karte), .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(8 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(8 of .Karte) { grid-column: 1 / -1; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(6 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(6 of .Karte), .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(9 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(9 of .Karte) { grid-column: span 2; }
}
@media (min-width: 601px) and (max-width: 900px) {
	.Abschnitt:is(.Leistungen, .Kontakt) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.Abschnitt:is(.Leistungen, .Kontakt) > .Karte:nth-child(1 of .Karte) { grid-column: 1 / -1; }
	.Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(even of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-last-child(1 of .Karte) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .Abschnitt:is(.Leistungen, .Kontakt) { grid-template-columns: minmax(0, 1fr); } }


/* ---------- FAQ ---------- */
.Abschnitt.FAQ > .content-text:not(.AbschnittKopf) { max-width: 860px; border-bottom: 1px solid var(--linie); }
.FAQ .content-text:not(.AbschnittKopf) h3 { margin: 0; padding: 22px 48px 22px 0; cursor: pointer; position: relative; font-size: 1.15rem; }
.FAQ .content-text:not(.AbschnittKopf) h3::after { content: ""; position: absolute; right: 6px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--primaer-text); -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; transition: transform .35s var(--weich); }
.FAQ .offen h3::after { transform: rotate(45deg); }
.FAQ .content-text:not(.AbschnittKopf) .rte { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--weich); }
.FAQ .content-text:not(.AbschnittKopf) .rte > * { overflow: hidden; min-height: 0; }
/* offen braucht dieselbe Spezifität wie die Grundregel darüber, sonst blieb die Antwort zu (bis 31.10. auf allen Seiten) */
.FAQ .content-text.offen:not(.AbschnittKopf) .rte { grid-template-rows: 1fr; }
.FAQ .AntwortInnen { overflow: hidden; color: var(--text-leise); }
.FAQ .AntwortInnen::after { content: ""; display: block; height: 22px; } /* Abstand unten fährt mit auf und zu */

/* ---------- Fließtext-Seiten (Impressum, Datenschutz) ---------- */
.Abschnitt.Text .content-text { max-width: 820px; }
.Abschnitt.Text .content-text:not(.AbschnittKopf) h2 { font-size: 1.5rem; margin-top: 1.6em; }
.Abschnitt.Text h3 { font-size: 1.15rem; margin-top: 1.4em; }

/* ---------- Fuß ---------- */
.Fuß { background: var(--dunkel); color: var(--auf-dunkel); font-size: .95rem; box-shadow: inset 0 1px 0 var(--fuss-linie, transparent); }
.Fuß > .innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--rand) 32px; }
.Fuß .content-element-group { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.Fuß a { color: #fff; text-decoration: none; }
.Fuß a:hover { text-decoration: underline; color: #fff; }
.Fuß h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .9; margin-bottom: 1em; }
.Fuß p { color: color-mix(in srgb, var(--auf-dunkel) 78%, transparent); }
.Fuß .FußMarke { font: var(--titel-gewicht) 1.4rem/1.2 var(--schrift-titel); color: #fff; margin-bottom: .6em; text-transform: var(--titel-transform); }
.FußUnten { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / .12); padding-top: 22px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .85rem; opacity: .75; }
/* seit 30.10. ein Textelement (Kunde bearbeitet den Fuß): Absatz mit zwei Teilen, links und rechts */
.FußUnten .rte, .FußUnten p { display: contents; }
.Fuß .FußUnten::after { content: none; } /* sonst wird der Clearfix von .content-text zum dritten Flex-Element (rechter Teil rutschte in die Mitte) */
/* Soziale Netzwerke ({{kontakt::social}}, Niels 30.10.2026): Markenzeichen als runde Knöpfe; ohne Eintrag kein leerer Absatz */
.SocialAbsatz:empty, .SocialAbsatz:not(:has(a)) { display: none; }
.SocialLinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.SocialLinks a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .08); color: #fff; transition: background .25s, transform .25s var(--weich); }
.SocialLinks a:hover { background: rgb(255 255 255 / .18); transform: translateY(-2px); text-decoration: none; }
.SocialLinks svg { width: 19px; height: 19px; fill: currentColor; }
.FußUnten p > span { display: block; }

/* ---------- Bewegung: Einblenden beim Scrollen ---------- */
.js .einblenden { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--weich), transform .8s var(--weich); transition-delay: var(--verz, 0s); }
.js .einblenden.sichtbar { opacity: 1; transform: none; }
.js .Hero .content-text > * { animation: hoch .9s var(--weich) both; }
.js .Hero .content-text > :nth-child(2) { animation-delay: .12s; }
.js .Hero .content-text > :nth-child(3) { animation-delay: .24s; }
.js .Hero .content-text > :nth-child(4) { animation-delay: .36s; }
@keyframes hoch { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Icons (Masken) ---------- */
:root {
	--i-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--i-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
	--i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--i-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
/* Kartensymbole: erzeugt von werkzeuge/symbole.mjs (Lucide 0.556.0, ISC-Lizenz, lucide.dev; Kerze, Balkon und Spirale eigene). Nicht von Hand ändern. */
.IconAbschluss { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E"); }
.IconAntenne { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12 7 2'/%3E%3Cpath d='m7 12 5-10'/%3E%3Cpath d='m12 12 5-10'/%3E%3Cpath d='m17 12 5-10'/%3E%3Cpath d='M4.5 7h15'/%3E%3Cpath d='M12 16v6'/%3E%3C/svg%3E"); }
.IconAnzeige { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E"); }
.IconAuge { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.IconAuto { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.IconAutofront { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8'/%3E%3Cpath d='M7 14h.01'/%3E%3Cpath d='M17 14h.01'/%3E%3Crect width='18' height='8' x='3' y='10' rx='2'/%3E%3Cpath d='M5 18v2'/%3E%3Cpath d='M19 18v2'/%3E%3C/svg%3E"); }
.IconBalkon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='9'/%3E%3Cpath d='M12 3v9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='M4 12v8'/%3E%3Cpath d='M8 12v8'/%3E%3Cpath d='M12 12v8'/%3E%3Cpath d='M16 12v8'/%3E%3Cpath d='M20 12v8'/%3E%3C/svg%3E"); }
.IconBauhelm { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M14 6a6 6 0 0 1 6 6v3'/%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6'/%3E%3Crect x='2' y='15' width='20' height='4' rx='1'/%3E%3C/svg%3E"); }
.IconBaustelle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='8' rx='1'/%3E%3Cpath d='M17 14v7'/%3E%3Cpath d='M7 14v7'/%3E%3Cpath d='M17 3v3'/%3E%3Cpath d='M7 3v3'/%3E%3Cpath d='M10 14 2.3 6.3'/%3E%3Cpath d='m14 6 7.7 7.7'/%3E%3Cpath d='m8 6 8 8'/%3E%3C/svg%3E"); }
.IconBildschirm { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E"); }
.IconBlatt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E"); }
.IconBlitz { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E"); }
.IconBlume { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M12 10v12'/%3E%3Cpath d='M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z'/%3E%3Cpath d='M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z'/%3E%3C/svg%3E"); }
.IconBrief { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); }
.IconBrille { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='15' r='4'/%3E%3Ccircle cx='18' cy='15' r='4'/%3E%3Cpath d='M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2'/%3E%3Cpath d='M2.5 13 5 7c.7-1.3 1.4-2 3-2'/%3E%3Cpath d='M21.5 13 19 7c-.7-1.3-1.5-2-3-2'/%3E%3C/svg%3E"); }
.IconCheckliste { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
.IconDose { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='m4 8 16-4'/%3E%3Cpath d='m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8'/%3E%3C/svg%3E"); }
.IconDruck { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
.IconEi { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8 2 4 8 4 14a8 8 0 0 0 16 0c0-6-4-12-8-12'/%3E%3C/svg%3E"); }
.IconEuro { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12'/%3E%3Cpath d='M4 14h9'/%3E%3Cpath d='M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2'/%3E%3C/svg%3E"); }
.IconFarbrolle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E"); }
.IconFeuerlöscher { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6.5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3.5'/%3E%3Cpath d='M9 18h8'/%3E%3Cpath d='M18 3h-3'/%3E%3Cpath d='M11 3a6 6 0 0 0-6 6v11'/%3E%3Cpath d='M5 13h4'/%3E%3Cpath d='M17 10a4 4 0 0 0-8 0v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2Z'/%3E%3C/svg%3E"); }
.IconFlamme { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E"); }
.IconFunkeln { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E"); }
.IconGebäude { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16'/%3E%3C/svg%3E"); }
.IconGlocke { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20a1 1 0 0 1-1-1v-1a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1Z'/%3E%3Cpath d='M20 16a8 8 0 1 0-16 0'/%3E%3Cpath d='M12 4v4'/%3E%3Cpath d='M10 4h4'/%3E%3C/svg%3E"); }
.IconHagel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='M16 14v2'/%3E%3Cpath d='M8 14v2'/%3E%3Cpath d='M16 20h.01'/%3E%3Cpath d='M8 20h.01'/%3E%3Cpath d='M12 16v2'/%3E%3Cpath d='M12 22h.01'/%3E%3C/svg%3E"); }
.IconHaken { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.IconHammer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E"); }
.IconHaus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.IconHaussteuerung { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12V8.964'/%3E%3Cpath d='M14 12V8.964'/%3E%3Cpath d='M15 12a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8.5 21H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-2'/%3E%3C/svg%3E"); }
.IconHerz { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E"); }
.IconJalousie { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h18'/%3E%3Cpath d='M20 7H8'/%3E%3Cpath d='M20 11H8'/%3E%3Cpath d='M10 19h10'/%3E%3Cpath d='M8 15h12'/%3E%3Cpath d='M4 3v14'/%3E%3Ccircle cx='4' cy='19' r='2'/%3E%3C/svg%3E"); }
.IconKabel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 19a1 1 0 0 1-1-1v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a1 1 0 0 1-1 1z'/%3E%3Cpath d='M17 21v-2'/%3E%3Cpath d='M19 14V6.5a1 1 0 0 0-7 0v11a1 1 0 0 1-7 0V10'/%3E%3Cpath d='M21 21v-2'/%3E%3Cpath d='M3 5V3'/%3E%3Cpath d='M4 10a2 2 0 0 1-2-2V6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2z'/%3E%3Cpath d='M7 5V3'/%3E%3C/svg%3E"); }
.IconKerze { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c1.7 1.9 2.2 3 2.2 3.9a2.2 2.2 0 0 1-4.4 0c0-.9.5-2 2.2-3.9z'/%3E%3Cpath d='M12 8.6V10'/%3E%3Crect x='9' y='10' width='6' height='11' rx='1'/%3E%3Cpath d='M6 21h12'/%3E%3C/svg%3E"); }
.IconLamellen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E"); }
.IconLampe { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.IconLineal { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); }
.IconLkw { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.IconLüfter { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Cpath d='M12 12v.01'/%3E%3C/svg%3E"); }
.IconMond { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E"); }
.IconNetzwerk { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M12 12V8'/%3E%3C/svg%3E"); }
.IconOhr { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0'/%3E%3Cpath d='M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4'/%3E%3C/svg%3E"); }
.IconOrt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.IconParken { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 17V7h4a3 3 0 0 1 0 6H9'/%3E%3C/svg%3E"); }
.IconPinsel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.622 17.897-10.68-2.913'/%3E%3Cpath d='M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z'/%3E%3Cpath d='M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15'/%3E%3C/svg%3E"); }
.IconPlan { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13'/%3E%3Cpath d='m8 6 2-2'/%3E%3Cpath d='m18 16 2-2'/%3E%3Cpath d='m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17'/%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
.IconPräsentation { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E"); }
.IconRauchmelder { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21c0-2.5 2-2.5 2-5'/%3E%3Cpath d='M16 21c0-2.5 2-2.5 2-5'/%3E%3Cpath d='m19 8-.8 3a1.25 1.25 0 0 1-1.2 1H7a1.25 1.25 0 0 1-1.2-1L5 8'/%3E%3Cpath d='M21 3a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M6 21c0-2.5 2-2.5 2-5'/%3E%3C/svg%3E"); }
.IconRollo { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E"); }
.IconSchale { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M19.5 12 22 6'/%3E%3Cpath d='M16.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.73 1.62'/%3E%3Cpath d='M11.25 3c.27.1.8.53.74 1.36-.05.83-.93 1.2-.98 2.02-.06.78.33 1.24.72 1.62'/%3E%3Cpath d='M6.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.74 1.62'/%3E%3C/svg%3E"); }
.IconSchaufel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.56 4.56a1.5 1.5 0 0 1 0 2.122l-.47.47a3 3 0 0 1-4.212-.03 3 3 0 0 1 0-4.243l.44-.44a1.5 1.5 0 0 1 2.121 0z'/%3E%3Cpath d='M3 22a1 1 0 0 1-1-1v-3.586a1 1 0 0 1 .293-.707l3.355-3.355a1.205 1.205 0 0 1 1.704 0l3.296 3.296a1.205 1.205 0 0 1 0 1.704l-3.355 3.355a1 1 0 0 1-.707.293z'/%3E%3Cpath d='m9 15 7.879-7.878'/%3E%3C/svg%3E"); }
.IconSchere { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M8.12 8.12 12 12'/%3E%3Cpath d='M20 4 8.12 15.88'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M14.8 14.8 20 20'/%3E%3C/svg%3E"); }
.IconSchichten { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E"); }
.IconSchild { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.IconSchriftzug { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M9 20h6'/%3E%3C/svg%3E"); }
.IconSchule { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='M18 5v16'/%3E%3Cpath d='m4 6 7.106-3.79a2 2 0 0 1 1.788 0L20 6'/%3E%3Cpath d='m6 11-3.52 2.147a1 1 0 0 0-.48.854V19a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a1 1 0 0 0-.48-.853L18 11'/%3E%3Cpath d='M6 5v16'/%3E%3Ccircle cx='12' cy='9' r='2'/%3E%3C/svg%3E"); }
.IconSessel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z'/%3E%3Cpath d='M5 18v2'/%3E%3Cpath d='M19 18v2'/%3E%3C/svg%3E"); }
.IconSetzling { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3'/%3E%3Cpath d='M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); }
.IconSofa { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M2 16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z'/%3E%3Cpath d='M4 18v2'/%3E%3Cpath d='M20 18v2'/%3E%3Cpath d='M12 4v9'/%3E%3C/svg%3E"); }
.IconSonne { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); }
.IconSpirale { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 12a1.5 1.5 0 0 1 3 0a3 3 0 0 1-6 0a4.5 4.5 0 0 1 9 0a6 6 0 0 1-12 0a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.IconSpraydose { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h.01'/%3E%3Cpath d='M7 5h.01'/%3E%3Cpath d='M11 7h.01'/%3E%3Cpath d='M3 7h.01'/%3E%3Cpath d='M7 9h.01'/%3E%3Cpath d='M3 11h.01'/%3E%3Crect width='4' height='4' x='15' y='5'/%3E%3Cpath d='m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2'/%3E%3Cpath d='m13 14 8-2'/%3E%3Cpath d='m13 19 8-2'/%3E%3C/svg%3E"); }
.IconSpritze { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 2 4 4'/%3E%3Cpath d='m17 7 3-3'/%3E%3Cpath d='M19 9 8.7 19.3c-1 1-2.5 1-3.4 0l-.6-.6c-1-1-1-2.5 0-3.4L15 5'/%3E%3Cpath d='m9 11 4 4'/%3E%3Cpath d='m5 19-3 3'/%3E%3Cpath d='m14 4 6 6'/%3E%3C/svg%3E"); }
.IconSpule { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 13.44 4.442 17.082A2 2 0 0 0 4.982 21H19a2 2 0 0 0 .558-3.921l-1.115-.32A2 2 0 0 1 17 14.837V7.66'/%3E%3Cpath d='m7 10.56 12.558-3.642A2 2 0 0 0 19.018 3H5a2 2 0 0 0-.558 3.921l1.115.32A2 2 0 0 1 7 9.163v7.178'/%3E%3C/svg%3E"); }
.IconStern { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); }
.IconStoff { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E"); }
.IconSuche { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); }
.IconTasse { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M14 2v2'/%3E%3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M6 2v2'/%3E%3C/svg%3E"); }
.IconTeam { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); }
.IconTelefon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); }
.IconThermometer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E"); }
.IconTropfen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E"); }
.IconTür { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20H2'/%3E%3Cpath d='M11 4.562v16.157a1 1 0 0 0 1.242.97L19 20V5.562a2 2 0 0 0-1.515-1.94l-4-1A2 2 0 0 0 11 4.561z'/%3E%3Cpath d='M11 4H8a2 2 0 0 0-2 2v14'/%3E%3Cpath d='M14 12h.01'/%3E%3Cpath d='M22 20h-3'/%3E%3C/svg%3E"); }
.IconUhr { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.IconVase { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v5.632c0 .424-.272.795-.653.982A6 6 0 0 0 6 14c.006 4 3 7 5 8'/%3E%3Cpath d='M10 5H8a2 2 0 0 0 0 4h.68'/%3E%3Cpath d='M14 2v5.632c0 .424.272.795.652.982A6 6 0 0 1 18 14c0 4-3 7-5 8'/%3E%3Cpath d='M14 5h2a2 2 0 0 1 0 4h-.68'/%3E%3Cpath d='M18 22H6'/%3E%3Cpath d='M9 2h6'/%3E%3C/svg%3E"); }
.IconVorhang { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10s3-3 3-8'/%3E%3Cpath d='M22 10s-3-3-3-8'/%3E%3Cpath d='M10 2c0 4.4-3.6 8-8 8'/%3E%3Cpath d='M14 2c0 4.4 3.6 8 8 8'/%3E%3Cpath d='M2 10s2 2 2 5'/%3E%3Cpath d='M22 10s-2 2-2 5'/%3E%3Cpath d='M8 15h8'/%3E%3Cpath d='M2 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M14 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
.IconWärme { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 8a4 4 0 0 0-1.645 7.647'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 14.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3C/svg%3E"); }
.IconWarnung { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.IconWegweiser { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M18 6a2 2 0 0 1 1.387.56l2.307 2.22a1 1 0 0 1 0 1.44l-2.307 2.22A2 2 0 0 1 18 13H6a2 2 0 0 1-1.387-.56l-2.306-2.22a1 1 0 0 1 0-1.44l2.306-2.22A2 2 0 0 1 6 6z'/%3E%3C/svg%3E"); }
.IconWeizen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22 16 8'/%3E%3Cpath d='M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z'/%3E%3Cpath d='M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3Cpath d='M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3Cpath d='M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3C/svg%3E"); }
.IconWerkzeug { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E"); }
.IconWerkzeugkoffer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15h4'/%3E%3Cpath d='m14.817 10.995-.971-1.45 1.034-1.232a2 2 0 0 0-2.025-3.238l-1.82.364L9.91 3.885a2 2 0 0 0-3.625.748L6.141 6.55l-1.725.426a2 2 0 0 0-.19 3.756l.657.27'/%3E%3Cpath d='m18.822 10.995 2.26-5.38a1 1 0 0 0-.557-1.318L16.954 2.9a1 1 0 0 0-1.281.533l-.924 2.122'/%3E%3Cpath d='M4 12.006A1 1 0 0 1 4.994 11H19a1 1 0 0 1 1 1v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.IconZiegel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M12 9v6'/%3E%3Cpath d='M16 15v6'/%3E%3Cpath d='M16 3v6'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 15v6'/%3E%3Cpath d='M8 3v6'/%3E%3C/svg%3E"); }
/* Ende Kartensymbole */

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
	.Abschnitt.TextBild, .Abschnitt.Hero.geteilt { grid-template-columns: 1fr; }
	.TextBild.BildLinks > .content-image { order: 0; }
	.Hero.geteilt .content-text { margin: 0; }
	.Fuß .content-element-group { grid-template-columns: 1fr; gap: 28px; }
	.Schritt::after { display: none; }
	.Abschnitt.Hero { min-height: 78vh; }
	.EntwurfHinweis { font-size: 12.5px; }
	.Logo img { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js .einblenden { opacity: 1; transform: none; }
	@view-transition { navigation: none; }
}

/* Oberzeile steht im Fließtext, soll aber ÜBER der Überschrift erscheinen */
.content-text:has(.Oberzeile) { display: flex; flex-direction: column; }
.content-text:has(.Oberzeile) > .rte { display: contents; }
.content-text .Oberzeile { order: -1; }
.AbschnittKopf:has(.Oberzeile) { align-items: center; }
.AbschnittKopf.links:has(.Oberzeile), .links .AbschnittKopf:has(.Oberzeile) { align-items: flex-start; }
.Hero .content-text:has(.Oberzeile) > *, .Seitenkopf .content-text:has(.Oberzeile) > * { max-width: 680px; }
.Hero.geteilt .content-text:has(.Oberzeile) { align-items: flex-start; }

/* ---------- Logo-Vorschläge (/logos) ---------- */
.LogoRaster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .LogoRaster { grid-template-columns: 1fr; } }
.LogoVorschlag.imKopf { border-color: var(--primaer-text); box-shadow: 0 0 0 2px var(--primaer-text); }
.LogoVorschlag figcaption em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; color: var(--primaer-text); }
.LogoVorschlag { margin: 0; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--weich), box-shadow .35s; }
.LogoVorschlag:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.LogoFläche { aspect-ratio: 16 / 7; display: grid; place-items: center; padding: 28px; background: #fff; }
.LogoFläche img { max-height: 100%; max-width: 100%; width: auto; }
.LogoVorschlag figcaption { padding: 12px 18px; border-top: 1px solid var(--linie); font-size: .92rem; color: var(--text-leise); }
.LogoVorschlag figcaption strong { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primaer); color: var(--auf-primaer); margin-right: 8px; font-size: .85rem; }

/* ---------- Freie Kernelemente (Beispielseite und eigene Inhalte der Kunden) ---------- */
.Abschnitt.Text > .content-text + *, .Abschnitt.Text > * + * { margin-top: clamp(28px, 4vw, 44px); }
.Abschnitt.Text > * { max-width: 860px; }
.content-text.media--left > figure, .content-text .media--left figure { float: left; margin: 4px 28px 12px 0; max-width: 42%; }
.content-text.media--right > figure, .content-text .media--right figure { float: right; margin: 4px 0 12px 28px; max-width: 42%; }
.content-text figure img { border-radius: var(--radius-klein); }
.content-text::after { content: ""; display: table; clear: both; }
.content-list ul, .content-list ol { padding-left: 1.3em; line-height: 1.8; }
/* Liste neben einem umflossenen Bild: ohne eigenen Block rückten die Punkte bis ans Bild (Niels 30.10.) */
.content-text.media :is(ul, ol), .content-text .media :is(ul, ol) { display: flow-root; padding-left: 1.3em; }
/* breite Tabellen scrollen auf dem Handy in ihrem eigenen Kasten statt die Seite seitlich zu verschieben (Abnahme 30.10.) */
.content-table { max-width: 100%; overflow-x: auto; }
.content-table table { width: 100%; border-collapse: collapse; background: var(--grund); border-radius: var(--radius-klein); overflow: hidden; box-shadow: var(--schatten); font-size: .97em; }
.content-table th { background: var(--primaer); color: var(--auf-primaer); text-align: left; font-weight: 600; }
.content-table th, .content-table td { padding: 12px 16px; }
.content-table tbody tr:nth-child(even) td { background: var(--flaeche); }
.content-table td, .content-table th { transition: background .2s, color .2s; }
@media (hover: hover) {
	.content-table table tbody tr:hover > * { background: color-mix(in srgb, var(--primaer-tint) 9%, var(--grund)); }
	.content-table table:has(td:nth-child(1):hover) td:nth-child(1) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(1):hover) thead th:nth-child(1) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:nth-child(2):hover) td:nth-child(2) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(2):hover) thead th:nth-child(2) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:nth-child(3):hover) td:nth-child(3) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(3):hover) thead th:nth-child(3) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:nth-child(4):hover) td:nth-child(4) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(4):hover) thead th:nth-child(4) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:nth-child(5):hover) td:nth-child(5) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(5):hover) thead th:nth-child(5) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:nth-child(6):hover) td:nth-child(6) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(6):hover) thead th:nth-child(6) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:nth-child(7):hover) td:nth-child(7) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(7):hover) thead th:nth-child(7) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:nth-child(8):hover) td:nth-child(8) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); }
	.content-table table:has(td:nth-child(8):hover) thead th:nth-child(8) { background: color-mix(in srgb, var(--primaer) 82%, #000); }
	.content-table table:has(td:hover) tbody tr:hover > td:hover { background: color-mix(in srgb, var(--akzent) 24%, var(--grund)); }
}
.content-image figcaption { font-size: .88em; color: var(--text-leise); margin-top: 8px; }
.content-image img { border-radius: var(--radius-klein); }
/* Akkordeon (Contao-Kern, handorgel) */
.content-accordion { --akk-flaeche: color-mix(in srgb, var(--primaer-tint) 5%, var(--grund)); }
.Fläche .content-accordion { --akk-flaeche: var(--karte-flaeche); }
.content-accordion .handorgel__header { margin: 10px 0 0; background: var(--akk-flaeche); border-radius: var(--radius-klein); transition: border-radius .2s; }
.content-accordion .handorgel__header--open { border-radius: var(--radius-klein) var(--radius-klein) 0 0; }
.content-accordion .handorgel__header__button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; padding: 18px 60px 18px 24px; position: relative; font: var(--titel-gewicht) 1.1rem/1.3 var(--schrift-titel); color: var(--text); }
.content-accordion .handorgel__header__button::after { content: ""; position: absolute; right: 22px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--primaer-text); -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; transition: transform .35s var(--weich); }
.content-accordion .handorgel__header--open .handorgel__header__button::after { transform: rotate(45deg); }
.content-accordion .handorgel__content, .content-accordion .handorgel__content--open { transition: height .4s var(--weich); }
.content-accordion .handorgel__content { background: var(--akk-flaeche); border-top: 1px solid var(--linie); border-radius: 0 0 var(--radius-klein) var(--radius-klein); }
.content-accordion .handorgel__content__inner { padding: 18px 24px 22px; color: var(--text-leise); }
.content-accordion .handorgel__content__inner > :last-child, .content-accordion .handorgel__content__inner .rte > :last-child { margin-bottom: 0; }
/* Slider (Contao-Kern, swiper) */
.content-swiper .swiper { padding-bottom: 44px; --swiper-navigation-size: 48px; --swiper-navigation-sides-offset: 18px; --swiper-navigation-top-offset: calc(50% - 22px); }
.content-swiper .swiper-slide figure { margin: 0; }
.content-swiper img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.content-swiper .swiper-button-prev, .content-swiper .swiper-button-next { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--grund) 92%, transparent); color: var(--text); box-shadow: 0 4px 16px var(--schatten-farbe), 0 1px 3px rgb(0 0 0 / .18); transition: background .2s, color .2s, transform .25s var(--weich); }
.content-swiper .swiper-button-prev:hover, .content-swiper .swiper-button-next:hover { background: var(--primaer); color: var(--auf-primaer); transform: scale(1.06); }
.content-swiper .swiper-navigation-icon { width: 11px; height: 18px; }
.content-swiper .swiper-pagination { bottom: 8px !important; }
.content-swiper .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 5px !important; background: var(--text-leise); opacity: .35; transition: width .3s var(--weich), opacity .3s, background .3s; border-radius: 999px; }
.content-swiper .swiper-pagination-bullet-active { width: 26px; opacity: 1; background: var(--primaer-text); }
@media (max-width: 640px) { .content-swiper .swiper-button-prev, .content-swiper .swiper-button-next { width: 40px; height: 40px; } .content-swiper .swiper { --swiper-navigation-sides-offset: 10px; } }

/* ---------- Lightbox: jedes Inhaltsbild öffnet groß (basis.js) ---------- */
.LichtboxBild { cursor: zoom-in; }
.Lichtbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
/* Der dunkle Grund ist eine eigene Ebene (nicht ::backdrop): er blendet erst nach dem Flug des Bildes ein (basis.js) */
.Lichtbox::backdrop { background: transparent; }
.LichtboxGrund { position: absolute; inset: 0; background: rgb(8 10 14 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.Lichtbox[open] { display: grid; place-items: center; }
.Lichtbox figure { position: relative; margin: 0; display: grid; justify-items: center; gap: 12px; max-width: calc(100vw - 160px); }
.LichtboxRahmen { display: block; overflow: hidden; border-radius: var(--radius-klein); box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
.Lichtbox img { display: block; max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; }
/* lädt noch: nichts zeigen; ohne Flug (kein Vorschaubild im Bild, weniger Bewegung): einblenden; Blättern: neues Bild gleitet herein */
.Lichtbox.wartet > * { opacity: 0; }
.Lichtbox.blenden .LichtboxGrund { animation: lb-ein .25s var(--weich); }
.Lichtbox.blenden figure { animation: lb-bild .3s var(--weich); }
/* solange die Lightbox offen ist: Vorschaubilder ohne Hover-Zoom, sonst landet der Rückflug auf einer anderen Größe */
.lichtboxOffen .LichtboxBild { transform: none !important; transition: none !important; }
.Lichtbox.fliegt .LichtboxRahmen { will-change: transform; }
.Lichtbox figcaption { font-size: .95rem; color: rgb(255 255 255 / .85); text-align: center; }
.Lichtbox figcaption:empty { display: none; }
.Lichtbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background .2s, transform .25s var(--weich); }
.Lichtbox button:hover, .Lichtbox button:focus-visible { background: rgb(255 255 255 / .26); transform: scale(1.06); outline: none; }
.Lichtbox button svg { width: 22px; height: 22px; }
.Lichtbox .LichtboxSchließen { top: 18px; right: 18px; }
.Lichtbox .LichtboxZurück { left: 24px; top: 50%; margin-top: -26px; }
.Lichtbox .LichtboxWeiter { right: 24px; top: 50%; margin-top: -26px; }
.Lichtbox .LichtboxZahl { position: absolute; top: 30px; left: 28px; font-size: .9rem; color: rgb(255 255 255 / .7); }
.Lichtbox.einzeln .LichtboxZurück, .Lichtbox.einzeln .LichtboxWeiter, .Lichtbox.einzeln .LichtboxZahl { display: none; }
@media (max-width: 640px) {
	.Lichtbox figure { max-width: calc(100vw - 24px); }
	.Lichtbox .LichtboxZurück, .Lichtbox .LichtboxWeiter { top: auto; bottom: 20px; margin: 0; }
	.Lichtbox .LichtboxZurück { left: calc(50% - 64px); } .Lichtbox .LichtboxWeiter { right: calc(50% - 64px); }
	.Lichtbox img { max-height: calc(100vh - 180px); }
}
/* Handy (Fahrschule Stein 31.10.2026: vierte Spalte abgeschnitten, nichts zeigte das Wischen an): enger, erste Spalte bleibt
   beim Wischen stehen, rechts blendet die Tabelle aus, solange es weitergeht (.weiter setzt basis.js) */
@media (max-width: 600px) {
	.content-table th, .content-table td { padding: 10px 12px; }
	/* overflow: hidden an der Tabelle (runde Ecken) hielt die erste Spalte fest: Ecken und Schatten deshalb am scrollenden Kasten */
	.content-table { border-radius: var(--radius-klein); box-shadow: var(--schatten); }
	.content-table table { font-size: .92em; overflow: visible; border-radius: 0; box-shadow: none; }
	.content-table th:first-child, .content-table td:first-child { position: sticky; left: 0; z-index: 1; background-clip: padding-box; }
	/* jede Zelle mit eigener Fläche, damit die stehende Spalte dieselben Streifen hat wie der Rest */
	.content-table tbody td { background: var(--grund); }
	.content-table tbody tr:nth-child(even) td { background: var(--flaeche); }
	.content-table td:first-child { box-shadow: 1px 0 0 var(--linie); }
	.content-table.weiter { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
}
@keyframes lb-ein { from { opacity: 0; } }
@keyframes lb-bild { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .Lichtbox * { animation: none !important; } }

/* Aufklapp-Text aus dem Editor (TinyMCE-Knopf „Akkordeon“ = <details>), animiert wie die FAQ */
.rte details { border-bottom: 1px solid var(--linie); }
.rte details summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; position: relative; font-weight: 650; }
.rte details summary::-webkit-details-marker { display: none; }
.rte details summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--primaer-text); -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; transition: transform .35s var(--weich); }
.rte details[open] summary::after { transform: rotate(45deg); }
.rte details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--weich), content-visibility .4s allow-discrete; }
.rte details[open]::details-content { block-size: auto; }
.rte details > :not(summary) { color: var(--text-leise); }
.rte details > :last-child:not(summary) { padding-bottom: 16px; }
html { interpolate-size: allow-keywords; }

/* ---------- Video (YouTube/Vimeo mit Vorschaubild, Niels 30.10.: direkt auf der Seite abspielbar) ----------
   Contao lädt das Video erst nach dem Klick auf das Poster und nennt dabei die Übertragung der IP-Adresse. */
:is(.content-vimeo, .content-youtube) { max-width: 960px; margin-left: auto; margin-right: auto; }
:is(.content-vimeo, .content-youtube) figure { position: relative; margin: 0; border-radius: calc(var(--radius) * 1.4); overflow: hidden; box-shadow: var(--schatten-hoch); background: #000; aspect-ratio: 16 / 9; }
:is(.content-vimeo, .content-youtube) figure.aspect--4\:3 { aspect-ratio: 4 / 3; } :is(.content-vimeo, .content-youtube) figure.aspect--9\:16 { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
:is(.content-vimeo, .content-youtube) iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Spielknopf (Niels 01.11.2026, Vorbild thehumanoid.report): Milchglas-Kreis mit weißem Dreieck, beim Darüberfahren füllt er sich mit der
   Akzentfarbe und das Vorschaubild zoomt leicht; unten links ein kleiner Hinweis (Datenübertragung). Das Markup kommt aus
   templates/content_element/youtube|vimeo.html.twig (Klasse Abspielknopf); nach dem Klick startet das Video sofort (autoplay). */
:is(.content-vimeo, .content-youtube) button[data-splash-screen] { all: unset; position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; color: #fff; }
:is(.content-vimeo, .content-youtube) button[data-splash-screen]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 50%, rgb(0 0 0 / .55)); pointer-events: none; }
:is(.content-vimeo, .content-youtube) button[data-splash-screen] picture, :is(.content-vimeo, .content-youtube) button[data-splash-screen] > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
:is(.content-vimeo, .content-youtube) button[data-splash-screen] img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: transform .7s var(--weich), opacity .3s; }
:is(.content-vimeo, .content-youtube) button[data-splash-screen]:is(:hover, :focus-visible) img { transform: scale(1.03); opacity: 1; }
:is(.content-vimeo, .content-youtube) .Abspielknopf { position: relative; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .38); box-shadow: 0 8px 28px rgb(0 0 0 / .25); transition: transform .25s var(--weich), background-color .25s, border-color .25s, color .25s; }
:is(.content-vimeo, .content-youtube) .Abspielknopf svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
:is(.content-vimeo, .content-youtube) button[data-splash-screen]:is(:hover, :focus-visible) .Abspielknopf { transform: scale(1.08); background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent, #1b1b1b); }
:is(.content-vimeo, .content-youtube) button[data-splash-screen] > span:not(.Abspielknopf) { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 8px; font-size: .75rem; line-height: 1.35; color: rgb(255 255 255 / .92); text-align: left; background: rgb(0 0 0 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
@media (max-width: 640px) { :is(.content-vimeo, .content-youtube) .Abspielknopf { width: 64px; height: 64px; } :is(.content-vimeo, .content-youtube) .Abspielknopf svg { width: 24px; height: 24px; } }
:is(.content-vimeo, .content-youtube) figcaption { padding: 10px 2px 0; font-size: .92rem; color: var(--text-leise); }


/* Bildausschnitt bei beschnittenen Bildern (seite.json → Bild-Element "ausschnitt": "oben"|"unten", seit 1.11.2026) */
.AusschnittOben img { object-position: 50% 0%; }
.AusschnittUnten img { object-position: 50% 100%; }

/* ---------- Hero mit ganzem Produktfoto (Niels 01.11.2026, himershoes: „die Schuhe werden abgeschnitten“) ----------
   Klasse BildGanz am Hero „geteilt“: das Foto wird nie beschnitten (kein cover), es steht in seinem eigenen Seitenverhältnis neben dem Text,
   auch im Layout salon (dort sonst bis an den Rand und in voller Höhe) und werkbank. Gilt für jedes Foto mit Produkt, Schuhen, Fahrzeugen, Möbeln. */
.Abschnitt.Hero.geteilt.BildGanz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); min-height: 0; padding-top: clamp(40px, 6vw, 88px); padding-bottom: calc(clamp(40px, 6vw, 88px) + var(--schraege, 0px)); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Hero.geteilt.BildGanz .content-image { max-width: none; height: auto; align-self: center; }
.Hero.geteilt.BildGanz .content-text { padding-top: 0; padding-bottom: 0; }
.Hero.geteilt.BildGanz .content-text h1 { font-size: clamp(2.3rem, 4.4vw, 3.7rem); }
.Hero.geteilt.BildGanz .content-image :is(figure, picture, a) { height: auto; }
.Hero.geteilt.BildGanz .content-image img { height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 900px) { .Abschnitt.Hero.geteilt.BildGanz { grid-template-columns: 1fr; padding: 0 var(--rand) 0 0; } .Hero.geteilt.BildGanz .content-image img { aspect-ratio: auto; } }

/* ---------- Galerien (Niels 01.11.2026): seite.json → galerie/„format“ ----------
   hoch = 3:4, quadrat = 1:1, quer = 4:3, voll = ganzes Bild ohne Beschnitt. Ohne Format bleibt es beim bisherigen Raster (4:3, im Layout salon erstes Bild groß).
   Bildunterschrift (Metadaten der Datei) steht klein unter dem Bild. */
.content-gallery:is(.GalerieHoch, .GalerieQuadrat, .GalerieQuer, .GalerieVoll) ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.content-gallery.GalerieQuadrat ul, .content-gallery.GalerieQuer ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.content-gallery.GalerieVoll ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); align-items: start; }
.content-gallery:is(.GalerieHoch, .GalerieQuadrat, .GalerieQuer, .GalerieVoll) li:first-child { grid-column: auto; grid-row: auto; }
.content-gallery:is(.GalerieHoch, .GalerieQuadrat, .GalerieQuer, .GalerieVoll) li:first-child :is(figure, a) { height: auto; }
.content-gallery.GalerieHoch img { aspect-ratio: 3 / 4 !important; height: auto !important; }
.content-gallery.GalerieQuadrat img { aspect-ratio: 1 / 1 !important; height: auto !important; }
.content-gallery.GalerieQuer img { aspect-ratio: 4 / 3 !important; height: auto !important; }
.content-gallery.GalerieVoll img { aspect-ratio: auto !important; height: auto !important; object-fit: contain; background: var(--flaeche); }
.content-gallery:is(.GalerieHoch, .GalerieQuadrat, .GalerieQuer, .GalerieVoll) li { overflow: visible; }
.content-gallery:is(.GalerieHoch, .GalerieQuadrat, .GalerieQuer, .GalerieVoll) li :is(a, picture) { display: block; overflow: hidden; border-radius: inherit; }
.content-gallery:is(.GalerieHoch, .GalerieQuadrat, .GalerieQuer, .GalerieVoll) figcaption { font-size: .8rem; line-height: 1.4; padding: 8px 2px 0; }

/* ---------- Bücher mit Umschlag (Niels 01.11.2026): Abschnitt typ „buecher“ ---------- */
.Abschnitt.Bücher { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); }
.Abschnitt.Bücher > .AbschnittKopf { grid-column: 1 / -1; margin: 0 0 clamp(8px, 2vw, 24px); }
.Abschnitt.Bücher > .AbschnittKopf > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.Abschnitt.Bücher > * { margin-top: 0; max-width: none; }
.Karte.Buch { display: flex; flex-direction: column; padding: 0 0 clamp(20px, 2vw, 28px); overflow: hidden; }
.Karte.Buch > :not(figure) { padding-left: clamp(20px, 2vw, 28px); padding-right: clamp(20px, 2vw, 28px); }
.Karte.Buch > figure { order: -1; margin: 0 0 clamp(16px, 2vw, 22px); padding: clamp(22px, 3vw, 34px) 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--primaer-tint) 9%, var(--flaeche)); }
.Karte.Buch > figure :is(a, picture) { display: block; }
.Karte.Buch > figure img { width: auto; max-width: 100%; height: clamp(240px, 24vw, 320px); object-fit: contain; box-shadow: 0 14px 30px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .2); transition: transform .5s var(--weich); }
.Karte.Buch:hover > figure img { transform: translateY(-4px) rotate(-1deg); }
.Karte.Buch h3 { margin-bottom: .4em; }
@media (prefers-reduced-motion: reduce) { .Karte.Buch:hover > figure img { transform: none; } }

/* ==========================================================================
   Dunkelmodus (seit 01.11.2026, Niels: „den Dunkelmodus bitte für alle Musterseiten“)
   Die Seite folgt prefers-color-scheme; der Schalter im Kopf setzt data-theme="dark|light" am <html> (Skript im <head> der Seitenvorlage, gemerkt in
   localStorage "farbmodus"). Nur die Variablen wechseln: --grund, --flaeche, --linie, --text, --dunkel … werden neu gesetzt, --primaer/--akzent/--auf-*
   bleiben die Firmenfarben (Flächen mit heller bzw. dunkler Schrift darauf). Die Firmenfarbe als Schrift/Symbol auf dunklem Grund (--primaer-text,
   --primaer-hover, --primaer-tint) und alle Dunkelflächen leiten sich per relativer Farbsyntax (oklch) aus --primaer ab, ohne Neubau der Seite:
   gleicher Farbton, feste Helligkeit (Kontrast zu --grund/--flaeche/--karte-flaeche mindestens 4,5 : 1). Browser ohne relative Farben bekommen die
   festen Werte darüber (color-mix mit Weiß). stil.css der Firma setzt seine Variablen mit :root; die Selektoren hier sind spezifischer und gewinnen.
   Eigene Farben in css_zusatz brauchen eine dunkle Fassung (BAU-BRIEF, „Dunkelmodus“).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--grund: #14171a; --flaeche: #1a1e22; --karte-flaeche: #23282d; --linie: #343a41;
		--text: #e8ebee; --text-leise: #aeb6bf; --dunkel: #0d0f11;
		--primaer-text: color-mix(in srgb, var(--primaer) 30%, #fff);
		--primaer-hover: color-mix(in srgb, var(--primaer) 18%, #fff);
		--primaer-tint: var(--primaer-text);
		--schatten: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
		--schatten-hoch: 0 2px 4px rgb(0 0 0 / .4), 0 20px 48px rgb(0 0 0 / .55);
		--schatten-mittel: 0 18px 40px rgb(0 0 0 / .55);
		--schatten-farbe: rgb(0 0 0 / .4);
		--kopf-grund: color-mix(in srgb, var(--grund) 88%, transparent);
		--fuss-linie: rgb(255 255 255 / .08);
		--logo-grund: #fff; --logo-rand: 6px 12px;
		--ton-anteil: 30%;
		--flaeche2: color-mix(in srgb, var(--akzent) 16%, var(--grund));
		--bento-text-1: #bdacff; --bento-text-2: #f0c25e; --bento-text-3: #74d8a2; --bento-text-4: #ff9db8; --bento-text-5: #72c9ee; --bento-text-6: #ffa26b;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--grund: #14171a; --flaeche: #1a1e22; --karte-flaeche: #23282d; --linie: #343a41;
	--text: #e8ebee; --text-leise: #aeb6bf; --dunkel: #0d0f11;
	--primaer-text: color-mix(in srgb, var(--primaer) 30%, #fff);
	--primaer-hover: color-mix(in srgb, var(--primaer) 18%, #fff);
	--primaer-tint: var(--primaer-text);
	--schatten: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
	--schatten-hoch: 0 2px 4px rgb(0 0 0 / .4), 0 20px 48px rgb(0 0 0 / .55);
	--schatten-mittel: 0 18px 40px rgb(0 0 0 / .55);
	--schatten-farbe: rgb(0 0 0 / .4);
	--kopf-grund: color-mix(in srgb, var(--grund) 88%, transparent);
	--fuss-linie: rgb(255 255 255 / .08);
	--logo-grund: #fff; --logo-rand: 6px 12px;
	--ton-anteil: 30%;
	--flaeche2: color-mix(in srgb, var(--akzent) 16%, var(--grund));
	--bento-text-1: #bdacff; --bento-text-2: #f0c25e; --bento-text-3: #74d8a2; --bento-text-4: #ff9db8; --bento-text-5: #72c9ee; --bento-text-6: #ffa26b;
}
/* Neutrale Dunkelflächen im Farbton der Firma (oklch aus --primaer: Helligkeit fest, Sättigung klein) */
@supports (color: oklch(from red l c h)) {
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			--grund: oklch(from var(--primaer) .175 .014 h); --flaeche: oklch(from var(--primaer) .215 .016 h); --karte-flaeche: oklch(from var(--primaer) .26 .018 h);
			--linie: oklch(from var(--primaer) .335 .018 h); --dunkel: oklch(from var(--primaer) .125 .014 h);
			--text: oklch(from var(--primaer) .94 .006 h); --text-leise: oklch(from var(--primaer) .77 .014 h);
			--primaer-text: oklch(from var(--primaer) clamp(.76, calc(l + .32), .84) min(c, .13) h);
			--primaer-hover: oklch(from var(--primaer) clamp(.84, calc(l + .4), .92) min(c, .1) h);
		}
	}
	:root[data-theme="dark"] {
		--grund: oklch(from var(--primaer) .175 .014 h); --flaeche: oklch(from var(--primaer) .215 .016 h); --karte-flaeche: oklch(from var(--primaer) .26 .018 h);
		--linie: oklch(from var(--primaer) .335 .018 h); --dunkel: oklch(from var(--primaer) .125 .014 h);
		--text: oklch(from var(--primaer) .94 .006 h); --text-leise: oklch(from var(--primaer) .77 .014 h);
		--primaer-text: oklch(from var(--primaer) clamp(.76, calc(l + .32), .84) min(c, .13) h);
		--primaer-hover: oklch(from var(--primaer) clamp(.84, calc(l + .4), .92) min(c, .1) h);
	}
}

/* ---------- Kontaktformular, Neuigkeiten, Termine (seit 2.11.2026) ----------
   bauen.php legt sie vorbereitet und ausgeblendet an (Formular auf der Kontaktseite, Seiten „Aktuelles“ und „Termine“ unveröffentlicht);
   der Kunde schaltet sie nur ein. Farben nur über Variablen, damit Hell und Dunkel stimmen. */
.Abschnitt.Formular > :is(.ce_form, .content-form) { max-width: 760px; }
.Kontaktformular .formbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 22px; }
.Kontaktformular .widget { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; }
.Kontaktformular :is(.widget-textarea, .widget-checkbox, .widget-altcha, .widget-submit, .widget-explanation) { grid-column: 1 / -1; }
.Kontaktformular label { font-weight: 600; font-size: .95rem; color: var(--text); }
.Kontaktformular span.mandatory { color: var(--primaer-text); margin-left: 2px; }
.Kontaktformular :is(input.text, textarea) { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 13px 15px; transition: border-color .2s, box-shadow .2s; }
.Kontaktformular :is(input.text, textarea):hover { border-color: color-mix(in srgb, var(--text) 35%, var(--linie)); }
.Kontaktformular :is(input.text, textarea):focus { outline: none; border-color: var(--primaer-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaer-text) 22%, transparent); }
.Kontaktformular textarea { min-height: 170px; resize: vertical; }
.Kontaktformular fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.Kontaktformular .checkbox_container > span { display: flex; gap: 12px; align-items: flex-start; }
.Kontaktformular .checkbox_container label { font-weight: 400; font-size: .95rem; color: var(--text-leise); line-height: 1.55; }
.Kontaktformular input.checkbox { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--primaer); }
.Kontaktformular altcha-widget { --altcha-border-radius: var(--radius-klein); --altcha-color-base: var(--grund); --altcha-color-border: var(--linie); --altcha-color-text: var(--text);
	--altcha-color-border-focus: var(--primaer-text); --altcha-max-width: 320px; display: block; }
.Kontaktformular .widget-submit { align-items: flex-start; }
.Kontaktformular button.submit { border: 0; cursor: pointer; font-family: inherit; }
.Kontaktformular :is(p.error, .error > p) { margin: 0; font-size: .9rem; font-weight: 600; color: color-mix(in oklab, #e0362a 70%, var(--text)); }
.Kontaktformular :is(input.text, textarea).error { border-color: color-mix(in oklab, #e0362a 70%, var(--text)); }
.Abschnitt.Formular :is(.ce_form, .content-form) > p, .Abschnitt.Formular .confirmation { padding: 18px 22px; border-radius: var(--radius-klein); background: color-mix(in srgb, var(--primaer-tint) 10%, var(--grund)); color: var(--text); }
@media (max-width: 640px) { .Kontaktformular .formbody { grid-template-columns: minmax(0, 1fr); } }

/* Neuigkeiten: Beiträge als Karten im Raster; Leser schmal wie ein Text */
.Abschnitt.Neuigkeiten .mod_newslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 24px); }
:is(.mod_newslist .layout_latest, .mod_eventlist .event) { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--radius);
	background: color-mix(in srgb, var(--primaer-tint) 6%, var(--grund)); border: 1px solid color-mix(in srgb, var(--primaer-tint) 10%, transparent); transition: transform .35s var(--weich), box-shadow .35s var(--weich); }
:is(.mod_newslist .layout_latest, .mod_eventlist .event):hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.mod_newslist .layout_latest .info, .mod_newsreader .info, .mod_eventreader .info, .mod_eventlist .time { order: -1; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); }
:is(.mod_newslist, .mod_eventlist) h2 { font-size: 1.3rem; line-height: 1.25; margin: 0; }
:is(.mod_newslist, .mod_eventlist) h2 a { color: var(--text); text-decoration: none; }
:is(.mod_newslist, .mod_eventlist) h2 a:hover { color: var(--primaer-text); }
:is(.mod_newslist, .mod_eventlist) .content-text p { margin: 0; color: var(--text-leise); }
.mod_newslist .layout_latest figure { margin: calc(-1 * clamp(22px, 2.2vw, 30px)) calc(-1 * clamp(22px, 2.2vw, 30px)) 6px; order: -2; }
.mod_newslist .layout_latest figure img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.mod_newslist .more { margin: auto 0 0; padding-top: 4px; }
.mod_newslist .more a { font-weight: 600; color: var(--primaer-text); text-decoration: none; }
.mod_newslist .more a:hover { text-decoration: underline; }
:is(.mod_newslist, .mod_eventlist) :is(.empty, p.message) { grid-column: 1 / -1; color: var(--text-leise); margin: 0; }
.mod_newslist .pagination { grid-column: 1 / -1; }
:is(.mod_newsreader, .mod_eventreader) .layout_full { max-width: 760px; margin: 0 auto; }
:is(.mod_newsreader, .mod_eventreader) h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: .3em 0 .5em; }
:is(.mod_newsreader, .mod_eventreader) figure { margin: 0 0 1.4em; }
:is(.mod_newsreader, .mod_eventreader) figure img { border-radius: var(--radius); }
/* Termine: Datum als kleine Zeile über jedem Termin, Liste einspaltig */
.Abschnitt.Termine .mod_eventlist { display: flex; flex-direction: column; gap: 12px; }
.mod_eventlist .header { margin: 18px 0 0; font-weight: 700; color: var(--primaer-text); }
.mod_eventlist .header:first-child { margin-top: 0; }
.mod_eventlist .location, .mod_eventreader .location { margin: 0; color: var(--text-leise); }
/* „Zur Übersicht“ nur in der Leseransicht */
.Abschnitt:is(.Neuigkeiten, .Termine) > .Zurück { display: none; }
.Abschnitt:is(.Neuigkeiten, .Termine):has(:is(.mod_newsreader, .mod_eventreader)) > .Zurück { display: block; max-width: 760px; margin-top: 2em; }
.Zurück a { font-weight: 600; color: var(--primaer-text); text-decoration: none; }
.Zurück a::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--i-pfeil) center/contain no-repeat; mask: var(--i-pfeil) center/contain no-repeat; transform: scaleX(-1); }