/* ==========================================================================
   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;
	--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);
	--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);
	--nav-item-line-height: 1.5;
	--nav-font-size: 17px;
	--nav-font-weight: 500;
	--nav-mobile-background: #fff;
	--nav-mobile-color: var(--text);
	--nav-mobile-active-background: #f8f8f8;
	--nav-mobile-active-color: var(--primaer);
	--nav-mobile-active-border-color: var(--primaer);
	--nav-mobile-btn-clr: var(--primaer);
	--nav-mobile-separator-color: #ddd;
	--nav-mobile-padding: 92px 20px 20px;
	--nav-mobile-font-size: 18px;
	--nav-mobile-backdrop-height: 0;
	--nav-submenu-background: #fff;
	--nav-burger-line-color: var(--primaer);
	/* 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%; 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-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .2s; }
a:hover { color: var(--primaer-dunkel); }
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 ---------- */
.entwurf-hinweis { background: var(--dunkel); color: var(--auf-dunkel); font-size: 13.5px; line-height: 1.4; }
.entwurf-hinweis .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; }
.entwurf-hinweis a { color: #fff; }
.entwurf-zu { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; padding: 2px 6px; }
.entwurf-zu:hover { opacity: 1; }
.entwurf-hinweis.weg { display: none; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .88); 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.kompakt { border-color: var(--linie); box-shadow: 0 6px 24px rgb(16 24 32 / .06); }
.kopf > .innen { max-width: var(--breite); 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.kompakt > .innen { min-height: 68px; }
.kopf .content-html { display: contents; }
.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; transition: height .3s var(--weich); }
.kopf.kompakt .logo img { height: 42px; }
.logo-svg img { height: 58px; } .kopf.kompakt .logo-svg 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); }

/* 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); }
body.nav-is-desktop .navigation-main .level_1 > li > strong { color: var(--nav-active-color); }
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); }
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; }
.navigation-main .level_1 li.nav-expanded > .ul-wrapper { grid-template-rows: 1fr; }
.navigation-main .level_1 .ul-wrapper > ul { min-height: 0; }
.nav-burger { z-index: 60; }

/* ---------- 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.flaeche { background: var(--flaeche); }
.abschnitt.dunkel { background: var(--dunkel); color: var(--auf-dunkel); }
.abschnitt.dunkel a:not(.knopf) { color: #fff; }

.abschnitt-kopf, .abschnitt .content-headline { text-align: center; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.abschnitt-kopf .rte, .abschnitt-kopf p { color: var(--text-leise); font-size: 1.08em; }
.dunkel .abschnitt-kopf 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); margin-bottom: 14px; }
.links .abschnitt-kopf, .abschnitt-kopf.links { text-align: left; margin-left: 0; }

/* Knöpfe (im Fließtext als <a class="knopf">) */
.knopf, a.knopf, .knopf-link a, .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, .knopf-link a::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, .knopf-link a: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, .knopf-link a: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); }
.knoepfe, 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: var(--breite); 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); }
.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; }
.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) 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 > .abschnitt-kopf { 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) 6%, var(--grund)); border-color: color-mix(in srgb, var(--primaer) 10%, transparent); }
.flaeche .karte { background: var(--grund); 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); -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.bento-an::after { animation: symbol-wippen .7s var(--weich); }
/* Symbol als SVG (basis.js): Linien werden gezeichnet (pathLength=1), beim Hereinscrollen und bei jedem Überfahren */
.karte.mit-symbol::after { display: none; }
.karten-symbol { position: absolute; top: clamp(24px, 2.4vw, 32px); left: clamp(24px, 2.4vw, 32px); width: 36px; height: 36px; color: var(--primaer); overflow: visible; transition: color .35s; }
.karte.zeichnen .karten-symbol :is(path, circle, ellipse, line, polyline, polygon, rect) { stroke-dasharray: 1; animation: symbol-zeichnen 1.1s var(--weich) both; }
.karte.zeichnen .karten-symbol :is(path, circle, ellipse, line, polyline, polygon, rect):nth-child(2) { animation-delay: .12s; }
.karte.zeichnen .karten-symbol :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.ohne-icon::before, .karte.ohne-icon::after { display: none; }
.bento { position: relative; isolation: isolate; }
.bento > .karte:nth-of-type(6n + 1) { --ton-kraeftig: #5b43a0; }
.bento > .karte:nth-of-type(6n + 2) { --ton-kraeftig: #8a5d00; }
.bento > .karte:nth-of-type(6n + 3) { --ton-kraeftig: #1d6a43; }
.bento > .karte:nth-of-type(6n + 4) { --ton-kraeftig: #a3304f; }
.bento > .karte:nth-of-type(6n + 5) { --ton-kraeftig: #0b5f80; }
.bento > .karte:nth-of-type(6n + 6) { --ton-kraeftig: #a3470f; }
.bento > .karte { --ton: color-mix(in oklab, var(--ton-kraeftig) 14%, var(--grund)); }
.bento-fl { display: none; }
@media (hover: hover) and (pointer: fine) {
	.bento-fl { 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; }
	.bento-ein > .bento-fl { opacity: 1; }
	.bento-sprung > .bento-fl { 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.bento-ein > .karte.bento-an { background-color: transparent; border-color: transparent; box-shadow: none; }
	.bento > .karte.bento-an::after { background: var(--ton-kraeftig); }
	.bento > .karte.bento-an .karten-symbol { color: var(--ton-kraeftig); }
	.bento > .karte.bento-an a { color: var(--ton-kraeftig); }
}
@media (prefers-reduced-motion: reduce) { .bento-fl { 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.text-bild { 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.text-bild > * { margin: 0; max-width: none; }
.text-bild.bild-links > .content-image { order: -1; }
.text-bild .content-image { position: relative; }
.text-bild .content-image img { border-radius: calc(var(--radius) * 1.4); box-shadow: var(--schatten-hoch); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.text-bild .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; }
.text-bild.bild-links .content-image::before { inset: auto auto -18px -18px; }
.text-bild .content-text ul { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 10px; }
.text-bild .content-text li { position: relative; padding-left: 34px; }
.text-bild .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) 13%, transparent); }
.text-bild .content-text li::after { content: ""; position: absolute; left: 5px; top: calc(.2em + 5px); width: 12px; height: 12px; background: var(--primaer); -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 > .abschnitt-kopf { 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); }
.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.cta { background: var(--dunkel); color: var(--auf-dunkel); overflow: hidden; isolation: isolate; text-align: center; }
.abschnitt.cta::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.cta .content-text { max-width: 760px; }
.abschnitt.cta h2 { color: #fff; }
.abschnitt.cta p { color: color-mix(in srgb, var(--auf-dunkel) 85%, transparent); font-size: 1.1em; }
.abschnitt.cta p:has(.knopf) { justify-content: center; }
@keyframes schweben { to { transform: translate(-12vw, 18%); } }

/* ---------- 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 > .abschnitt-kopf { grid-column: 1 / -1; margin: 0 auto 16px; }
.kontakt .karte a { font-weight: 600; text-decoration: 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) .karten-symbol { 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(.abschnitt-kopf) { max-width: 860px; border-bottom: 1px solid var(--linie); }
.faq .content-text:not(.abschnitt-kopf) h3 { margin: 0; padding: 22px 48px 22px 0; cursor: pointer; position: relative; font-size: 1.15rem; }
.faq .content-text:not(.abschnitt-kopf) h3::after { content: ""; position: absolute; right: 6px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--primaer); -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(.abschnitt-kopf) .rte { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--weich); }
.faq .content-text:not(.abschnitt-kopf) .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(.abschnitt-kopf) .rte { grid-template-rows: 1fr; }
.faq .rte-innen { overflow: hidden; color: var(--text-leise); }
.faq .rte-innen::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(.abschnitt-kopf) h2 { font-size: 1.5rem; margin-top: 1.6em; }
.abschnitt.text h3 { font-size: 1.15rem; margin-top: 1.4em; }

/* ---------- Fuß ---------- */
.fuss { background: var(--dunkel); color: var(--auf-dunkel); font-size: .95rem; }
.fuss > .innen { max-width: var(--breite); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--rand) 32px; }
.fuss .content-element-group { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: #fff; }
.fuss h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .9; margin-bottom: 1em; }
.fuss p { color: color-mix(in srgb, var(--auf-dunkel) 78%, transparent); }
.fuss .fuss-marke { font: var(--titel-gewicht) 1.4rem/1.2 var(--schrift-titel); color: #fff; margin-bottom: .6em; text-transform: var(--titel-transform); }
.fuss-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; }

/* ---------- 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-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");
}
.icon-blitz { --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-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E"); }
.icon-haus { --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-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.icon-werkzeug { --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.3a4 4 0 0 0 5 5L21 13l-8 8-3-3 1.3-1.3a4 4 0 0 0-5-5L3 10l3-3 3 3 1.3-1.3a4 4 0 0 0 4.4-2.4z'/%3E%3C/svg%3E"); }
.icon-tropfen { --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-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E"); }
.icon-schild { --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-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.icon-auge { --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-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon-brille { --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'%3E%3Ccircle cx='6.5' cy='14' r='3.5'/%3E%3Ccircle cx='17.5' cy='14' r='3.5'/%3E%3Cpath d='M10 14c1.2-1 2.8-1 4 0M3 14l1.5-6M21 14l-1.5-6'/%3E%3C/svg%3E"); }
.icon-ohr { --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'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 3-2 4-3 5.5s-1 3.5-3.5 3.5A2.5 2.5 0 0 1 9 15.5'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-1.5 2-1.5 3'/%3E%3C/svg%3E"); }
.icon-auto { --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-linejoin='round'%3E%3Cpath d='M3 16v-4l2.2-5A2 2 0 0 1 7 6h10a2 2 0 0 1 1.8 1L21 12v4a1 1 0 0 1-1 1h-1M3 16a1 1 0 0 0 1 1h1M3 12h18'/%3E%3Ccircle cx='7.5' cy='17' r='2'/%3E%3Ccircle cx='16.5' cy='17' r='2'/%3E%3C/svg%3E"); }
.icon-pinsel { --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-linejoin='round'%3E%3Cpath d='M18 3l3 3-9.5 9.5-3-3zM8.5 12.5L6 15a3 3 0 0 0-3 3c0 1.5-.5 2.5-1 3 3 0 6-.5 7-2.5a3 3 0 0 0-.5-3.5'/%3E%3C/svg%3E"); }
.icon-stern { --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-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E"); }
.icon-uhr { --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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.icon-telefon { --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-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.icon-brief { --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-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E"); }
.icon-ort { --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-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.icon-lineal { --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-linejoin='round'%3E%3Cpath d='M3 17L17 3l4 4L7 21z'/%3E%3Cpath d='M7 13l2 2M10 10l2 2M13 7l2 2'/%3E%3C/svg%3E"); }
.icon-sofa { --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-linejoin='round'%3E%3Cpath d='M5 11V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3'/%3E%3Cpath d='M3 13a2 2 0 0 1 4 0v2h10v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zM6 18v2M18 18v2'/%3E%3C/svg%3E"); }
.icon-sonne { --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'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.icon-lampe { --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='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.icon-schriftzug { --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='5' width='20' height='12' rx='1.5'/%3E%3Cpath d='M6 13l2-5 2 5M6.7 11.5h2.6M13 8v5h2.5M8 17v3M16 17v3'/%3E%3C/svg%3E"); }
.icon-druck { --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-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E"); }
.icon-ziegel { --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-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1'/%3E%3Cpath d='M3 9.3h18M3 14.7h18M9 4v5.3M15 9.3v5.4M9 14.7V20'/%3E%3C/svg%3E"); }
.icon-balkon { --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-linejoin='round'%3E%3Cpath d='M6 3h12v9H6zM12 3v9M3 12h18M4 12v8M20 12v8M3 20h18M8 12v8M12 12v8M16 12v8'/%3E%3C/svg%3E"); }
.icon-herz { --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-linejoin='round'%3E%3Cpath d='M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z'/%3E%3C/svg%3E"); }
.icon-blatt { --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='M5 19c0-9 6-14 15-14 0 9-5 15-14 15M5 19l7-7'/%3E%3C/svg%3E"); }
.icon-team { --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'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14.2A5 5 0 0 1 21 19'/%3E%3C/svg%3E"); }
.icon-euro { --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'%3E%3Cpath d='M18 6.5A7 7 0 1 0 18 17.5M4 10h10M4 14h10'/%3E%3C/svg%3E"); }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
	.abschnitt.text-bild, .abschnitt.hero.geteilt { grid-template-columns: 1fr; }
	.text-bild.bild-links > .content-image { order: 0; }
	.hero.geteilt .content-text { margin: 0; }
	.fuss .content-element-group { grid-template-columns: 1fr; gap: 28px; }
	.schritt::after { display: none; }
	.abschnitt.hero { min-height: 78vh; }
	.entwurf-hinweis { 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; }
.abschnitt-kopf:has(.oberzeile) { align-items: center; }
.abschnitt-kopf.links:has(.oberzeile), .links .abschnitt-kopf: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) ---------- */
.logo-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .logo-raster { grid-template-columns: 1fr; } }
.logo-vorschlag.im-kopf { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--primaer); }
.logo-vorschlag figcaption em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; color: var(--primaer); }
.logo-vorschlag { margin: 0; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--weich), box-shadow .35s; }
.logo-vorschlag:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.logo-flaeche { aspect-ratio: 16 / 7; display: grid; place-items: center; padding: 28px; background: #fff; }
.logo-flaeche img { max-height: 100%; max-width: 100%; width: auto; }
.logo-vorschlag figcaption { padding: 12px 18px; border-top: 1px solid var(--linie); font-size: .92rem; color: var(--text-leise); }
.logo-vorschlag 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; }
.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) 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) 5%, var(--grund)); }
.flaeche .content-accordion { --akk-flaeche: var(--grund); }
.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); -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: rgb(255 255 255 / .92); color: var(--text); box-shadow: 0 4px 16px rgb(16 24 32 / .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); }
@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) ---------- */
.lb-bild { 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; }
.lichtbox::backdrop { background: rgb(8 10 14 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lichtbox[open] { display: grid; place-items: center; animation: lb-ein .25s var(--weich); }
.lichtbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: calc(100vw - 160px); }
.lichtbox img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; border-radius: var(--radius-klein); box-shadow: 0 20px 60px rgb(0 0 0 / .5); animation: lb-bild .3s var(--weich); }
.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 .lb-zu { top: 18px; right: 18px; }
.lichtbox .lb-zurueck { left: 24px; top: 50%; margin-top: -26px; }
.lichtbox .lb-weiter { right: 24px; top: 50%; margin-top: -26px; }
.lichtbox .lb-zahl { position: absolute; top: 30px; left: 28px; font-size: .9rem; color: rgb(255 255 255 / .7); }
.lichtbox.einzeln .lb-zurueck, .lichtbox.einzeln .lb-weiter, .lichtbox.einzeln .lb-zahl { display: none; }
@media (max-width: 640px) {
	.lichtbox figure { max-width: calc(100vw - 24px); }
	.lichtbox .lb-zurueck, .lichtbox .lb-weiter { top: auto; bottom: 20px; margin: 0; }
	.lichtbox .lb-zurueck { left: calc(50% - 64px); } .lichtbox .lb-weiter { right: calc(50% - 64px); }
	.lichtbox img { max-height: calc(100vh - 180px); }
}
@keyframes lb-ein { from { opacity: 0; } }
@keyframes lb-bild { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .lichtbox[open], .lichtbox img { animation: none; } }

/* 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); -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; }