/* PST Pulverbeschichtung. Schriften kommen aus theme.json (lokal), das Raster aus bootstrap.min.css. Nur CI-Farben: Blau, Hellblau, Graphit. */

:root { --blau:#2A4E94; --blau-dunkel:#1F3C73; --hellblau:#6088C0; --hauch:#E7EDF7; --graphit:#353535; --grau:#636363; --dunst:#F3F5F9; --tinte:#1E2430; --linie:#DCE2EC; --weiss:#fff; }
:root { --container:1200px; --rand-min:clamp(1.25rem, 4.5vw, 4rem); --rand:max(var(--rand-min), calc((100vw - var(--container)) / 2)); --kopf-hoehe:5rem; --radius:2px; --tempo:.18s; }
:root { --bs-body-font-family:Poppins, system-ui, sans-serif; --bs-body-color:var(--tinte); --bs-body-bg:var(--weiss); --bs-body-font-size:1rem; --bs-body-line-height:1.65; --bs-link-color:var(--blau); --bs-link-hover-color:var(--blau-dunkel); --bs-gutter-x:2.5rem; }

html { scroll-padding-top:calc(var(--kopf-hoehe) + 1rem); scroll-behavior:smooth; }
body { display:flex; flex-direction:column; min-height:100vh; font-family:var(--bs-body-font-family); font-weight:400; color:var(--tinte); background:var(--weiss); -webkit-font-smoothing:antialiased; }
main { flex:1 0 auto; }
.admin-bar .seitenkopf { top:32px; }
::selection { background:#CFDCEF; color:var(--tinte); }
img, svg { max-width:100%; }
a { text-underline-offset:.2em; }
:focus-visible { outline:3px solid var(--hellblau); outline-offset:3px; }
.wrap { padding-inline:var(--rand); }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ic { width:1.25em; height:1.25em; flex:none; vertical-align:-.25em; }
.skip-link { position:absolute; left:var(--rand); top:-4rem; z-index:2000; padding:.6rem 1rem; background:var(--blau); color:var(--weiss); font-weight:600; text-decoration:none; }
.skip-link:focus { top:.75rem; }

/* Kopf */
.seitenkopf { position:sticky; top:0; z-index:1000; background:var(--weiss); border-bottom:1px solid var(--linie); transition:box-shadow .25s; }
.seitenkopf.gescrollt { box-shadow:0 .35rem 1.1rem rgba(30, 36, 48, .08); }
.kopf-zeile { display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:var(--kopf-hoehe); }
.marke { display:block; flex:none; line-height:0; }
.marke img { height:3.5rem; width:auto; }
.hauptnav { margin-left:auto; }
.nav-liste, .nav-liste ul { list-style:none; margin:0; padding:0; }
.nav-liste { display:flex; align-items:center; gap:.25rem; }
.nav-liste > li { position:relative; display:flex; align-items:center; }
.nav-liste a { display:block; padding:.75rem .9rem; color:var(--tinte); font-weight:500; font-size:.9375rem; text-decoration:none; }
.nav-liste a:hover, .nav-liste .current-menu-item > a, .nav-liste .current-menu-ancestor > a { color:var(--blau); }
.nav-liste > li > a { box-shadow:inset 0 -3px 0 transparent; transition:box-shadow var(--tempo), color var(--tempo); }
.nav-liste > li > a:hover { box-shadow:inset 0 -3px 0 var(--hellblau); }
.nav-liste > li:hover > a, .nav-liste > li.menu-item-has-children:focus-within > a, .nav-liste > li.offen > a { color:var(--blau); box-shadow:inset 0 -3px 0 var(--hellblau); }
.nav-liste > .current-menu-item > a, .nav-liste > .current-menu-ancestor > a { box-shadow:inset 0 -3px 0 var(--blau); }
.nav-liste > .menu-tel { margin-left:.5rem; }
.nav-liste > .menu-tel > a { display:flex; align-items:center; gap:.5rem; font-weight:600; white-space:nowrap; }
.nav-liste > .menu-tel .ic { width:1.1rem; height:1.1rem; color:var(--blau); }
.nav-liste > .menu-cta { margin-left:.75rem; }
.nav-liste > .menu-cta > a { display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.25rem; border-radius:var(--radius); background:var(--blau); color:var(--weiss); box-shadow:none; }
.nav-liste > .menu-cta > a:hover, .nav-liste > .menu-cta:hover > a { background:var(--blau-dunkel); color:var(--weiss); box-shadow:none; }
.nav-liste > .menu-cta .ic { width:1.05rem; height:1.05rem; transition:transform var(--tempo); }
.nav-liste > .menu-cta > a:hover .ic { transform:translate(.15rem, -.15rem); }
.sub-knopf { display:grid; place-items:center; width:1.75rem; height:1.75rem; margin-left:-.5rem; padding:0; border:0; background:none; color:var(--grau); cursor:pointer; }
.sub-knopf .ic { transition:transform var(--tempo); }
.sub-knopf[aria-expanded="true"] .ic { transform:rotate(180deg); }
.nav-liste .sub-menu { position:absolute; left:0; top:100%; min-width:15rem; padding:.5rem 0; background:var(--weiss); border:1px solid var(--linie); border-top:3px solid var(--blau); display:block; visibility:hidden; opacity:0; transform:translateY(-.4rem); transition:opacity var(--tempo), transform var(--tempo), visibility 0s var(--tempo); }
.nav-liste li:hover > .sub-menu, .nav-liste li:focus-within > .sub-menu, .nav-liste li.offen > .sub-menu { visibility:visible; opacity:1; transform:none; transition-delay:0s; }
.nav-liste .sub-menu a { padding:.55rem 1.1rem; font-weight:400; }
.nav-liste .sub-menu a:hover { background:var(--dunst); }
.nav-schalter { display:none; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:1px solid var(--linie); border-radius:var(--radius); background:var(--weiss); color:var(--blau); cursor:pointer; }
.nav-schalter .icon-zu, .nav-schalter[aria-expanded="true"] .icon-auf { display:none; }
.nav-schalter[aria-expanded="true"] .icon-zu { display:block; }

/* Texte */
.seite { padding-block:clamp(2.5rem, 6vw, 5rem); }
.seite-kopf { margin-bottom:clamp(1.5rem, 4vw, 3rem); }
h1, h2, h3, h4 { color:var(--tinte); line-height:1.15; font-weight:600; letter-spacing:-.02em; }
h1 { font-size:clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight:700; margin:0 0 1rem; color:var(--blau); }
h2 { font-size:clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); margin:0 0 1rem; }
h3 { font-size:1.25rem; margin:0 0 .5rem; letter-spacing:-.01em; }
.meta { color:var(--grau); font-size:.875rem; margin:0; }
.lead { font-size:clamp(1.125rem, 1.02rem + .5vw, 1.375rem); font-weight:300; line-height:1.6; }
.inhalt > * + * { margin-top:1.25rem; }
.inhalt > h2, .inhalt > h3 { margin-top:2.5rem; }
.inhalt-frei > * + * { margin-top:0; }
.inhalt p, .inhalt li { overflow-wrap:break-word; }
.inhalt a:where(:not([class])) { color:var(--blau); }
.inhalt a:where(:not([class])):hover { color:var(--blau-dunkel); }
.inhalt hr { border:0; border-top:1px solid var(--linie); opacity:1; margin:2.5rem 0; }
.inhalt img { height:auto; }
.beitragsbild { margin-bottom:2rem; }
.beitragsbild img { width:100%; height:auto; display:block; }

/* Bereiche für Seiten im HTML-Editor */
.bereich { padding:clamp(3.5rem, 8vw, 7rem) var(--rand); }
.bereich-dunst { background:var(--dunst); }
.bereich-blau { background:var(--blau); color:var(--weiss); }
.bereich-blau h1, .bereich-blau h2, .bereich-blau h3 { color:var(--weiss); }
.bereich-blau a:not(.knopf) { color:var(--weiss); }
.bereich-blau .lead { color:#E7EDF7; }

/* Knöpfe */
.knopf { display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.5rem; border:0; border-radius:var(--radius); background:var(--blau); color:var(--weiss) !important; font:inherit; font-weight:500; text-decoration:none !important; cursor:pointer; transition:background var(--tempo), box-shadow var(--tempo); }
.knopf:hover { background:var(--blau-dunkel); }
.knopf .ic { transition:transform var(--tempo); }
.knopf:hover .ic { transform:translateX(.2rem); }
.knopf-aus { background:transparent; box-shadow:inset 0 0 0 2px var(--blau); color:var(--blau) !important; }
.knopf-aus:hover { background:var(--blau); color:var(--weiss) !important; }
.knopf-hell { background:var(--weiss); color:var(--blau) !important; }
.knopf-hell:hover { background:var(--hauch); }
.knopf-linie { background:transparent; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); color:var(--weiss) !important; }
.knopf-linie:hover { background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 2px var(--weiss); }

/* Startseite: Hero, Foto aus Pulverpunkten */
.hero-zeile { position:relative; min-height:clamp(30rem, 74vh, 44rem); background:var(--hauch) url(../img/hero-feinstruktur.webp) center / cover no-repeat; }
.hero-text { position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 7vw, 6rem) var(--rand); }
.hero h1 { margin:0 0 1.75rem; color:var(--tinte); font-size:clamp(2.5rem, .5rem + 4.2vw, 4.5rem); font-weight:600; line-height:1.04; letter-spacing:-.035em; hyphens:manual; }
.hero .lead { margin:0 0 2.25rem; }
.hero-aktionen { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; }
.hero-bild { position:relative; min-height:22rem; }
.pulver { position:absolute; inset:0; overflow:hidden; }
.pulver img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:90% 50%; }
.js .pulver:not(.pulver-fehler) img { opacity:0; }
html:not(.js) .pulver img + img { display:none; }
.pulver canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-regler { position:absolute; left:1rem; bottom:1rem; z-index:2; display:flex; align-items:center; gap:.1rem; padding:.2rem .5rem .2rem .25rem; border-radius:2rem; background:rgba(255, 255, 255, .88); }
.regler-punkt { display:grid; place-items:center; width:1.6rem; height:1.6rem; padding:0; border:0; background:none; cursor:pointer; }
.regler-punkt::before { content:""; width:.55rem; height:.55rem; border-radius:50%; box-shadow:inset 0 0 0 2px var(--hellblau); transition:width var(--tempo), height var(--tempo), background var(--tempo), box-shadow var(--tempo); }
.regler-punkt:hover::before { background:var(--hellblau); }
.regler-punkt[aria-current="true"]::before { width:.85rem; height:.85rem; background:var(--blau); box-shadow:none; }
.regler-pause { display:grid; place-items:center; width:1.8rem; height:1.8rem; margin-left:.35rem; padding:0; border:0; border-left:1px solid var(--linie); border-radius:0; background:none; color:var(--blau); cursor:pointer; }
.regler-pause .ic { width:1rem; height:1rem; }
.regler-pause .play { display:none; }
.regler-pause[aria-pressed="true"] .play { display:block; }
.regler-pause[aria-pressed="true"] .pause { display:none; }
.textlink { display:inline-flex; align-items:center; gap:.4rem; color:var(--blau); font-weight:500; text-decoration:none; }
.textlink:hover { color:var(--blau-dunkel); text-decoration:underline; }
.textlink .ic { transition:transform var(--tempo); }
.textlink:hover .ic { transform:translateX(.2rem); }

.hero-leiste { position:relative; list-style:none; margin:0; padding:0 var(--rand); display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); background:var(--blau); color:var(--weiss); overflow:hidden; }
.hero-leiste::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(255, 255, 255, .2) 2.2px, transparent 2.9px) 0 0 / 18px 18px; mask-image:linear-gradient(270deg, #000 0%, transparent 55%); pointer-events:none; }
.leiste-punkt { position:relative; display:flex; align-items:center; gap:1rem; padding:1.5rem 1.75rem; border-left:1px solid rgba(255, 255, 255, .22); line-height:1.35; transition:background var(--tempo); }
.leiste-punkt:first-child { margin-left:-1.75rem; border-left:0; }
.leiste-icon { display:grid; place-items:center; flex:none; width:3rem; height:3rem; border-radius:50%; background:rgba(255, 255, 255, .16); transition:background var(--tempo), color var(--tempo); }
.leiste-icon .ic { width:1.4rem; height:1.4rem; }
.leiste-text, .leiste-text a { flex:1 1 auto; min-width:0; font-size:1.0625rem; font-weight:600; letter-spacing:-.005em; overflow-wrap:anywhere; }
.leiste-punkt a, .leiste-punkt a:hover { color:inherit; text-decoration:none; }
.leiste-punkt a::after { content:""; position:absolute; inset:0; }
.leiste-pfeil { flex:none; opacity:.55; transition:opacity var(--tempo), transform var(--tempo); }
.leiste-pfeil .ic { width:1.25rem; height:1.25rem; }
.leiste-punkt:hover { background:rgba(255, 255, 255, .12); }
.leiste-punkt:hover .leiste-icon { background:var(--weiss); color:var(--blau); }
.leiste-punkt:hover .leiste-pfeil { opacity:1; transform:translateX(.25rem); }
.leiste-punkt:focus-within { outline:3px solid var(--hellblau); outline-offset:-3px; }
.leiste-punkt a:focus-visible { outline:0; }

/* Startseite: Leistungen, links Aussage und Bild, rechts Zeilen */
.leistung-kopf { display:flex; flex-direction:column; }
.muster { position:relative; flex:1 1 auto; min-height:17rem; margin:1.5rem 0 0; overflow:hidden; background:var(--hauch) url(../img/hero-feinstruktur.webp) center / cover no-repeat; }
.muster::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, var(--blau) 1.7px, transparent 2.3px) 0 0 / 16px 16px; opacity:.55; mask-image:linear-gradient(225deg, #000 0%, transparent 62%); }
.muster img { position:absolute; inset:0 auto 0 0; width:86%; height:100%; object-fit:cover; object-position:left center; }
.zeilen { list-style:none; margin:0; padding:0; border-top:1px solid var(--linie); }
.zeilen li { border-bottom:1px solid var(--linie); }
.zeile { display:grid; grid-template-columns:3.25rem minmax(0, 1fr) 2rem; align-items:center; gap:1.25rem; padding:1.6rem clamp(.5rem, 1.5vw, 1.25rem); color:var(--tinte); text-decoration:none; transition:background var(--tempo), box-shadow var(--tempo); }
.zeile:hover { background:var(--dunst); box-shadow:inset 3px 0 0 var(--blau); }
.zeile:focus-visible { outline:3px solid var(--hellblau); outline-offset:-3px; }
.zeile-symbol { display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:50%; background:var(--hauch); color:var(--blau); transition:background var(--tempo), color var(--tempo); }
.zeile-symbol .ic { width:1.45rem; height:1.45rem; }
.zeile:hover .zeile-symbol { background:var(--blau); color:var(--weiss); }
.zeile-titel, .zeile-text { display:block; }
.zeile-titel { margin-bottom:.3rem; font-size:clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.zeile-text { max-width:46ch; color:var(--grau); }
.zeile > .ic { justify-self:end; width:1.5rem; height:1.5rem; color:var(--blau); transition:transform var(--tempo); }
.zeile:hover > .ic { transform:translateX(.35rem); }

/* Startseite: Ablauf, ein durchgehendes Punktband: aus losem Pulver wird eine geschlossene Fläche */
.ablauf-band { position:relative; height:4.5rem; margin-bottom:2.25rem; background:radial-gradient(circle, var(--blau) 1.4px, transparent 2.1px) 0 0 / 14px 14px; }
.ablauf-band::before, .ablauf-band::after { content:""; position:absolute; inset:0; }
.ablauf-band::before { background:radial-gradient(circle, var(--blau) 3.8px, transparent 4.5px) 0 0 / 14px 14px; mask-image:linear-gradient(90deg, transparent 15%, #000 48%); }
.ablauf-band::after { background:linear-gradient(90deg, transparent 88%, var(--blau) 97%), radial-gradient(circle, var(--blau) 7.4px, transparent 8px) 0 0 / 14px 14px; mask-image:linear-gradient(90deg, transparent 55%, #000 86%); }
.ablauf-liste { list-style:none; margin:0; padding:0; }
.schritt h3 { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.schritt .nr { display:grid; place-items:center; flex:none; width:2.25rem; height:2.25rem; border-radius:50%; box-shadow:inset 0 0 0 2px var(--hellblau); color:var(--blau); font-size:1rem; font-weight:600; letter-spacing:0; }
.schritt:last-child .nr { background:var(--blau); box-shadow:none; color:var(--weiss); }
.schritt p { margin:0; color:var(--grau); }
.ablauf-weiter { margin:2.5rem 0 0; }

/* Startseite: Angaben zum Betrieb */
.betrieb-kopf { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); grid-template-rows:auto 1fr; }
.betrieb-text { grid-column:1; grid-row:1; padding-right:3rem; }
.betrieb-bild { position:relative; grid-column:2; grid-row:1 / 3; margin:0; min-height:24rem; overflow:hidden; background:var(--graphit); }
.betrieb-bild img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.betrieb-bild::after { content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(255, 255, 255, .55) 2.2px, transparent 2.9px) 0 0 / 18px 18px; mask-image:radial-gradient(circle at 0 0, #000 0%, transparent 58%); pointer-events:none; }
.kontakt-tafel { position:relative; z-index:1; grid-column:1; grid-row:2; align-self:end; width:calc(100% + 3rem); overflow:hidden; padding:1.75rem 2rem .5rem; border-radius:var(--radius); background:var(--blau); color:var(--weiss); }
.kontakt-tafel::before { content:""; position:absolute; top:0; right:0; width:75%; height:70%; background:radial-gradient(circle, rgba(255, 255, 255, .22) 2.2px, transparent 2.9px) 0 0 / 18px 18px; mask-image:radial-gradient(circle at 100% 0, #000 0%, transparent 72%); pointer-events:none; }
.kontakt-name { position:relative; margin:0 0 1.25rem; font-size:1.5rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.kontakt-liste { position:relative; list-style:none; margin:0; padding:0; }
.kontakt-liste li { position:relative; display:flex; align-items:center; gap:1rem; margin-inline:-2rem; padding:1.1rem 2rem; border-top:1px solid rgba(255, 255, 255, .22); line-height:1.4; transition:background var(--tempo); }
.kontakt-liste li:hover { background:rgba(255, 255, 255, .12); }
.kontakt-liste li:focus-within { outline:3px solid var(--hellblau); outline-offset:-3px; }
.kontakt-icon { display:grid; place-items:center; flex:none; width:2.75rem; height:2.75rem; border-radius:50%; background:rgba(255, 255, 255, .16); transition:background var(--tempo), color var(--tempo); }
.kontakt-icon .ic { width:1.3rem; height:1.3rem; }
.kontakt-liste li:hover .kontakt-icon { background:var(--weiss); color:var(--blau); }
.kontakt-text, .kontakt-text a { flex:1 1 auto; min-width:0; font-size:1.0625rem; font-weight:600; overflow-wrap:anywhere; }
.kontakt-text a, .kontakt-text a:hover { color:inherit; text-decoration:none; }
.kontakt-text a::after { content:""; position:absolute; inset:0; }
.kontakt-text a:focus-visible { outline:0; }
.kontakt-pfeil { flex:none; opacity:.55; transition:opacity var(--tempo), transform var(--tempo); }
.kontakt-pfeil .ic { width:1.25rem; height:1.25rem; }
.kontakt-liste li:hover .kontakt-pfeil { opacity:1; transform:translateX(.25rem); }
.produkte-kopf { margin-top:clamp(3.5rem, 7vw, 6rem); align-items:end; }
.produkte-ueberschrift { margin:0; font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing:-.02em; }
.produkte-kopf p { margin:0; max-width:52ch; color:var(--grau); }
.produkte { list-style:none; margin:2.25rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--linie); border-left:1px solid var(--linie); }
.produkte li { border-right:1px solid var(--linie); border-bottom:1px solid var(--linie); }
.produkt { display:flex; flex-direction:column; height:100%; padding:1.5rem 1.5rem 1.75rem; color:var(--tinte); text-decoration:none; transition:background var(--tempo); }
.produkt:hover { background:var(--dunst); }
.produkt:focus-visible { outline:3px solid var(--hellblau); outline-offset:-3px; }
.produkt-bild { display:block; aspect-ratio:4 / 3; margin-bottom:.75rem; }
.produkt-bild img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .35s ease; }
.produkt:hover .produkt-bild img { transform:scale(1.04); }
.produkt-titel { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:1.25rem; font-weight:600; letter-spacing:-.015em; line-height:1.25; }
.produkt-pfeil { flex:none; color:var(--blau); transition:transform var(--tempo); }
.produkt-pfeil .ic { width:1.25rem; height:1.25rem; }
.produkt:hover .produkt-pfeil { transform:translate(.15rem, -.15rem); }
.produkt-text { margin-top:.4rem; color:var(--grau); font-size:.9375rem; line-height:1.55; }
.produkte-weiter { margin:1.75rem 0 0; }

/* Startseite: Anfrage */
#anfrage { position:relative; overflow:hidden; }
.anfrage-knopf { margin:1.75rem 0 0; }
.anfrage-kontakte { list-style:none; margin:1.75rem 0 0; padding:0; }
.anfrage-kontakte li { display:flex; align-items:center; gap:.75rem; padding:.3rem 0; font-size:1.125rem; font-weight:600; }
.anfrage-kontakte .ic { width:1.35rem; height:1.35rem; }
.anfrage-kontakte a { text-decoration:none; }
.anfrage-kontakte a:hover { text-decoration:underline; text-underline-offset:.25em; }
.anfrage-bild { position:relative; margin:0; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--radius); background:var(--hauch) url(../img/hero-feinstruktur.webp) center / cover no-repeat; }
.anfrage-bild::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, var(--blau) 1.7px, transparent 2.3px) 0 0 / 16px 16px; opacity:.5; mask-image:linear-gradient(225deg, #000 0%, transparent 60%); }
.anfrage-bild img { position:absolute; inset:7% 6%; width:88%; height:86%; object-fit:contain; }
.band-aktionen { display:flex; flex-wrap:wrap; gap:.75rem 1rem; }

/* Unterseiten: Kopf mit Brotkrumen */
.kopf-seite { position:relative; overflow:hidden; padding-block:clamp(2.25rem, 5vw, 4.5rem); background:var(--hauch) url(../img/hero-feinstruktur.webp) center / cover no-repeat; border-bottom:1px solid var(--linie); }
.kopf-seite h1 { margin:0 0 1.25rem; color:var(--tinte); font-size:clamp(2rem, 1.2rem + 2.8vw, 3.5rem); font-weight:600; line-height:1.08; letter-spacing:-.03em; hyphens:manual; }
.kopf-seite .lead { margin:0; }
.kopf-aktionen { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; margin-top:1.75rem; }
.brot { margin-bottom:1.25rem; }
.brot ol { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .75rem; margin:0; padding:0; list-style:none; color:var(--grau); font-size:.875rem; }
.brot li + li::before { content:""; display:inline-block; width:.3rem; height:.3rem; margin-right:.75rem; border-radius:50%; background:var(--hellblau); vertical-align:middle; }
.brot a { color:var(--blau); text-decoration:none; }
.brot a:hover { text-decoration:underline; }
.kopf-bild { position:relative; margin:0; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--radius); background:rgba(255, 255, 255, .72); box-shadow:inset 0 0 0 1px var(--linie); }
.kopf-bild::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, var(--blau) 1.7px, transparent 2.3px) 0 0 / 16px 16px; opacity:.5; mask-image:linear-gradient(225deg, #000 0%, transparent 60%); }
.kopf-bild img { position:absolute; inset:7% 6%; width:88%; height:86%; object-fit:contain; }
.kopf-bild-foto img { inset:0; width:100%; height:100%; object-fit:cover; }
.kopf-bild-foto::before { display:none; }

/* Unterseiten: Fließtext, Randspalte, Fragen, Schritte, Tabelle, Farbfelder */
.fliesstext > * + * { margin-top:1.25rem; }
.fliesstext h2 { margin-top:3rem; font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
.fliesstext > h2:first-child { margin-top:0; }
.fliesstext h3 { margin-top:2rem; }
.fliesstext ul, .fliesstext ol { margin-bottom:0; padding:0; list-style:none; }
.fliesstext li { position:relative; padding-left:1.5rem; }
.fliesstext li + li { margin-top:.6rem; }
.fliesstext ul > li::before { content:""; position:absolute; left:.1rem; top:.72em; width:.4rem; height:.4rem; border-radius:50%; background:var(--blau); }
.fliesstext ol { counter-reset:nr; }
.fliesstext ol > li { counter-increment:nr; padding-left:2.4rem; }
.fliesstext ol > li::before { content:counter(nr); position:absolute; left:0; top:.1rem; display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; box-shadow:inset 0 0 0 2px var(--hellblau); color:var(--blau); font-size:.8125rem; font-weight:600; }
.fliesstext strong { font-weight:600; }
.fakten { position:sticky; top:calc(var(--kopf-hoehe) + 1.5rem); border-top:3px solid var(--blau); }
.fakten-titel { margin:0; padding:1rem 0 .75rem; font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.fakten ul { list-style:none; margin:0; padding:0; }
.fakten li { display:flex; gap:.8rem; padding:.9rem 0; border-top:1px solid var(--linie); font-size:.9375rem; line-height:1.5; }
.fakten li .ic { width:1.15rem; height:1.15rem; margin-top:.2rem; color:var(--blau); }
.fakten li strong { display:block; font-weight:600; }
.fakten li span { color:var(--grau); }
.fakten .knopf { margin-top:1.25rem; }
.zeilen-info li { display:grid; grid-template-columns:3.25rem minmax(0, 1fr); gap:1.25rem; padding:1.4rem clamp(.5rem, 1.5vw, 1.25rem); }
.zeilen-info .zeile-titel { font-size:1.2rem; }
.verwandt h2 { margin-bottom:2rem; font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
.verwandt-liste { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2.5rem clamp(1.5rem, 3.5vw, 3.5rem); list-style:none; margin:0; padding:0; }
.verwandt-n2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.verwandt-n4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.verwandt-liste li { display:flex; }
.verwandt-link { position:relative; display:flex; flex-direction:column; width:100%; padding-top:1.5rem; border-top:1px solid var(--linie); color:var(--tinte); text-decoration:none; }
.verwandt-link::before { content:""; position:absolute; top:-2px; left:0; width:3rem; height:3px; background:var(--blau); transition:width .3s ease; }
.verwandt-link:hover::before, .verwandt-link:focus-visible::before { width:100%; }
.verwandt-link:focus-visible { outline:3px solid var(--hellblau); outline-offset:4px; }
.verwandt-titel { margin-bottom:.6rem; font-size:1.3rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.verwandt-text { flex:1; margin-bottom:1.5rem; color:var(--grau); font-size:.9375rem; line-height:1.6; }
.verwandt-pfeil { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--hauch); color:var(--blau); transition:background var(--tempo), color var(--tempo), transform var(--tempo); }
.verwandt-pfeil .ic { width:1.2rem; height:1.2rem; }
.verwandt-link:hover .verwandt-pfeil, .verwandt-link:focus-visible .verwandt-pfeil { background:var(--blau); color:var(--weiss); transform:translateX(.3rem); }
.verwandt-link:hover .verwandt-titel { color:var(--blau); }
.bild { margin:0; }
.bild-rahmen { display:block; aspect-ratio:var(--verh, 4 / 3); overflow:hidden; border-radius:var(--radius); background:var(--dunst); }
.bild-rahmen img { display:block; width:100%; height:100%; object-fit:cover; }
.bild figcaption { margin-top:.7rem; color:var(--grau); font-size:.875rem; line-height:1.5; }
.bildkopf { margin-bottom:2rem; }
.bildkopf h2 { margin:0 0 .6rem; font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
.bildkopf p { max-width:60ch; margin:0; color:var(--grau); }
.bildreihe { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2rem clamp(1.25rem, 2.5vw, 2.5rem); }
.bildreihe-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.bild-seite { margin-top:1.75rem; }
.fakten-spalte { position:sticky; top:calc(var(--kopf-hoehe) + 1.5rem); }
.fakten-spalte .fakten { position:static; }
.fragen { border-top:1px solid var(--linie); }
.fragen details { border-bottom:1px solid var(--linie); }
.fragen summary { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.15rem .25rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em; list-style:none; cursor:pointer; transition:color var(--tempo); }
.fragen summary::-webkit-details-marker { display:none; }
.fragen summary::after { content:""; flex:none; width:1.7rem; height:1.7rem; border-radius:50%; box-shadow:inset 0 0 0 2px var(--hellblau); background:linear-gradient(var(--blau), var(--blau)) center / .75rem 2px no-repeat, linear-gradient(var(--blau), var(--blau)) center / 2px .75rem no-repeat; transition:background-size var(--tempo); }
.fragen details[open] summary::after { background-size:.75rem 2px, 0 0; }
.fragen summary:hover { color:var(--blau); }
.fragen details p { margin:0 0 1.25rem; padding:0 3rem 0 .25rem; color:var(--grau); }
.schritte { list-style:none; margin:0; padding:0; counter-reset:schritt; border-top:1px solid var(--linie); }
.schritte > li { display:grid; grid-template-columns:3.25rem minmax(0, 1fr); gap:1.25rem; padding:1.75rem clamp(.5rem, 1.5vw, 1.25rem); border-bottom:1px solid var(--linie); }
.schritte > li::before { counter-increment:schritt; content:counter(schritt); display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:50%; box-shadow:inset 0 0 0 2px var(--hellblau); color:var(--blau); font-size:1.2rem; font-weight:600; }
.schritte > li:last-child::before { background:var(--blau); box-shadow:none; color:var(--weiss); }
.schritte h3 { margin-bottom:.4rem; font-size:1.35rem; }
.schritte p { margin:0; color:var(--grau); }
.schritte p + p { margin-top:.6rem; }
.tabelle { overflow-x:auto; border-top:3px solid var(--blau); }
.tabelle table { width:100%; min-width:38rem; border-collapse:collapse; font-size:.9375rem; line-height:1.55; }
.tabelle th, .tabelle td { padding:.95rem 1rem; border-bottom:1px solid var(--linie); text-align:left; vertical-align:top; }
.tabelle thead th { background:var(--dunst); font-weight:600; }
.tabelle tbody th { font-weight:600; white-space:nowrap; }
.farbfelder { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.5rem 1.25rem; }
.farbfeld-chip { display:block; aspect-ratio:3 / 2; border-radius:var(--radius); background:var(--c); box-shadow:inset 0 0 0 1px rgba(30, 36, 48, .2); }
.farbfeld-name { display:block; margin-top:.55rem; font-size:.9375rem; font-weight:600; line-height:1.3; }
.farbfeld-nr { display:block; color:var(--grau); font-size:.8125rem; }
.anfrage-band { position:relative; overflow:hidden; }
.anfrage-band::after { content:""; position:absolute; top:0; right:0; bottom:0; width:40%; background:radial-gradient(circle, rgba(255, 255, 255, .2) 1.8px, transparent 2.5px) 0 0 / 16px 16px; mask-image:linear-gradient(270deg, #000 0%, transparent 85%); pointer-events:none; }
.anfrage-band > * { position:relative; z-index:1; }
.anfrage-band h2 { margin-bottom:1rem; }
.kontakt-allein { width:auto; }
.kontakt-allein .kontakt-liste li { margin-inline:-2rem; }

/* Anfrageformular */
.formular { margin-top:1.5rem; }
.formular-falle { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formular-altcha { --altcha-color-primary:var(--blau); --altcha-color-primary-content:var(--weiss); --altcha-max-width:100%; --altcha-spinner-color:var(--blau); }
.formular-altcha altcha-widget { display:block; max-width:22rem; }
.feld { display:block; }
.feld > span:first-child { display:block; margin-bottom:.4rem; font-size:.9375rem; font-weight:600; }
.feld input, .feld textarea { display:block; width:100%; padding:.8rem 1rem; border:1px solid #B7C1D3; border-radius:var(--radius); background:var(--weiss); color:var(--tinte); font:inherit; transition:border-color var(--tempo), box-shadow var(--tempo); }
.feld input:hover, .feld textarea:hover { border-color:var(--hellblau); }
.feld input:focus, .feld textarea:focus { outline:0; border-color:var(--blau); box-shadow:0 0 0 3px rgba(96, 136, 192, .35); }
.feld textarea { min-height:9rem; resize:vertical; }
.feld ::placeholder { color:#7C8696; }
.feld [aria-invalid="true"], .zustimmung [aria-invalid="true"] { border-color:var(--graphit); box-shadow:0 0 0 2px var(--graphit); }
.feld-fehler { display:block; margin-top:.4rem; color:var(--graphit); font-size:.875rem; font-weight:600; }
.datei { position:relative; display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border:1px dashed var(--hellblau); border-radius:var(--radius); background:var(--dunst); cursor:pointer; transition:background var(--tempo), border-color var(--tempo); }
.datei:hover, .datei:focus-within { background:var(--hauch); border-color:var(--blau); }
.datei input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.datei-symbol { display:grid; place-items:center; flex:none; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--hauch); color:var(--blau); }
.datei-symbol .ic { width:1.3rem; height:1.3rem; }
.datei-text { display:flex; flex-direction:column; min-width:0; font-size:.875rem; color:var(--grau); overflow-wrap:anywhere; }
.datei-text strong { color:var(--tinte); font-size:1rem; font-weight:600; }
.zustimmung { display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; line-height:1.5; color:var(--grau); }
.zustimmung input { flex:none; width:1.25rem; height:1.25rem; margin-top:.15rem; accent-color:var(--blau); }
.formular-aktion { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; margin:1.5rem 0 0; }
.formular-aktion .knopf { cursor:pointer; }
.formular-aktion .knopf:disabled { opacity:.7; cursor:progress; }
.formular-hinweis { color:var(--grau); font-size:.875rem; }
.formular-meldungen:not(:empty) { margin-bottom:1.25rem; }
.formular-meldung { display:flex; align-items:flex-start; gap:.9rem; padding:1rem 1.25rem; border-left:4px solid var(--blau); background:var(--hauch); }
.formular-meldung p { margin:0; }
.formular-meldung .ic { flex:none; width:1.4rem; height:1.4rem; margin-top:.1rem; color:var(--blau); }
.formular-fehler { border-left-color:var(--graphit); background:var(--dunst); }

/* Listen, Suche, Blättern */
.liste { list-style:none; margin:0; padding:0; }
.liste-eintrag { padding-block:1.75rem; border-top:1px solid var(--linie); }
.liste-eintrag:last-child { border-bottom:1px solid var(--linie); }
.liste-eintrag h2 { font-size:1.35rem; }
.liste-eintrag h2 a { color:var(--tinte); text-decoration:none; }
.liste-eintrag h2 a:hover { color:var(--blau); }
.liste-eintrag p:last-child { margin-bottom:0; }
.suchform { display:flex; gap:.5rem; margin-top:1rem; }
.suchform input { flex:1 1 auto; padding:.75rem 1rem; border:1px solid var(--linie); border-radius:var(--radius); font:inherit; }
.nav-links { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:2.5rem; }
.nav-links a, .nav-links span { padding:.45rem .9rem; border:1px solid var(--linie); border-radius:var(--radius); color:var(--tinte); text-decoration:none; }
.nav-links .current { background:var(--blau); border-color:var(--blau); color:var(--weiss); }
.nav-links a:hover { border-color:var(--blau); color:var(--blau); }

/* Fuß */
.seitenfuss { background:var(--dunst); border-top:3px solid var(--blau); font-size:.9375rem; }
.fuss-oben { padding-block:clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.seitenfuss a { color:var(--tinte); text-decoration:none; }
.seitenfuss a:hover { color:var(--blau); text-decoration:underline; text-underline-offset:.2em; }
.seitenfuss ul { list-style:none; margin:0; padding:0; }
.fuss-logo { display:inline-block; line-height:0; }
.fuss-logo img { display:block; height:3.25rem; width:auto; }
.fuss-text { max-width:28ch; margin:1.25rem 0 1.5rem; color:var(--grau); }
.fuss-kontakt li { display:flex; align-items:flex-start; gap:.75rem; line-height:1.5; }
.fuss-kontakt li + li { margin-top:.65rem; }
.fuss-kontakt .ic { width:1.15rem; height:1.15rem; margin-top:.2rem; color:var(--blau); }
.fuss-titel { margin:0 0 1rem; font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--tinte); }
.fuss-liste li + li { margin-top:.6rem; }
.fuss-unten { background:var(--blau-dunkel); color:rgba(255, 255, 255, .85); font-size:.8125rem; }
.fuss-unten-zeile { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 2rem; padding-block:1.1rem; }
.fuss-unten a, .seitenfuss .fuss-unten a { color:rgba(255, 255, 255, .85); text-decoration:none; }
.fuss-unten a:hover, .seitenfuss .fuss-unten a:hover { color:var(--weiss); text-decoration:underline; text-underline-offset:.2em; }
.fuss-rechtliches { margin-right:auto; }
.fuss-rechtliches ul { display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; }
.fuss-copy { white-space:nowrap; }
.fuss-agentur a { text-decoration:underline; text-decoration-color:rgba(255, 255, 255, .35); text-underline-offset:.2em; }
.fuss-agentur a:hover { text-decoration-color:currentColor; }

/* WordPress-Pflichtklassen */
.alignleft { float:left; margin:0 1.5rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1.5rem; }
.aligncenter { display:block; margin-inline:auto; }
.wp-caption-text, figcaption { color:var(--grau); font-size:.875rem; margin-top:.5rem; }
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.nav-liste > .menu-tel { display:none; }
}

@media (max-width: 1199.98px) {
	.verwandt-n4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
	:root { --kopf-hoehe:4.25rem; }
	.admin-bar .hauptnav { max-height:calc(100vh - var(--kopf-hoehe) - 46px); }
	.marke img { height:2.9rem; }
	.nav-schalter { display:grid; }
	.hauptnav { position:absolute; left:0; right:0; top:100%; display:none; max-height:calc(100vh - var(--kopf-hoehe)); overflow-y:auto; margin:0; padding:.5rem var(--rand) 1.25rem; background:var(--weiss); border-bottom:1px solid var(--linie); }
	.seitenkopf.nav-offen .hauptnav { display:block; }
	.nav-liste { flex-direction:column; align-items:stretch; gap:0; }
	.nav-liste > li { flex-wrap:wrap; border-top:1px solid var(--linie); }
	.nav-liste > li:first-child { border-top:0; }
	.nav-liste > li > a { flex:1 1 0; padding:.9rem 0; box-shadow:none !important; }
	.nav-liste > .menu-cta { margin:.75rem 0 0; border-top:0; }
	.nav-liste > .menu-cta > a { justify-content:center; padding:.9rem 1.25rem; text-align:center; }
	.nav-liste > .menu-tel { margin-left:0; }
	.nav-liste > .menu-tel > a { padding:.9rem 0; }
	.sub-knopf { width:2.75rem; height:2.75rem; margin-left:0; }
	.nav-liste .sub-menu { position:static; flex:0 0 100%; min-width:0; padding:0 0 .5rem 1rem; border:0; display:none; visibility:visible; opacity:1; transform:none; transition:none; }
	.nav-liste li:hover > .sub-menu, .nav-liste li:focus-within > .sub-menu, .nav-liste li.offen > .sub-menu { display:block; }
	.hero-zeile { min-height:0; }
	.hero-text { padding-inline:var(--rand); }
		.hero-bild { min-height:19rem; }
	.fakten { position:static; }
	.kopf-bild { aspect-ratio:16 / 10; }
	.leiste-punkt { gap:.75rem; padding:1.1rem 1rem; }
	.leiste-punkt:first-child { margin-left:-1rem; }
	.leiste-icon { width:2.5rem; height:2.5rem; }
	.leiste-text { font-size:1rem; }
	.muster { min-height:0; aspect-ratio:4 / 3; flex:none; }
	.betrieb-kopf { display:block; }
	.betrieb-text { padding-right:0; }
	.betrieb-bild { min-height:0; aspect-ratio:16 / 10; margin-top:1.5rem; }
	.kontakt-tafel { width:auto; margin:-2.5rem 1rem 0; }
	.produkte { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.admin-bar .seitenkopf { top:46px; }
}

@media (max-width: 767.98px) {
	.hero-leiste { grid-template-columns:1fr; }
	.hero-leiste { padding-inline:0; }
	.leiste-punkt, .leiste-punkt:first-child { margin-left:0; padding:.95rem var(--rand); border-left:0; }
	.leiste-punkt + .leiste-punkt { border-top:1px solid rgba(255, 255, 255, .22); }
	.leiste-pfeil { opacity:.8; }
	.verwandt-liste { grid-template-columns:minmax(0, 1fr); }
	.verwandt-n2, .verwandt-n4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.admin-bar .seitenkopf { top:0; }
}

@media (max-width: 575.98px) {
	.fuss-copy { white-space:normal; }
	.verwandt-liste, .verwandt-n2, .verwandt-n4 { grid-template-columns:minmax(0, 1fr); gap:2rem; }
	.bildreihe, .bildreihe-2 { grid-template-columns:minmax(0, 1fr); }
	.fuss-rechtliches { margin-right:0; flex:1 1 100%; }
	.suchform { flex-direction:column; }
	.alignleft, .alignright { float:none; margin:0 0 1rem; }
	.kontakt-tafel { margin-inline:0; padding:1.5rem 1.25rem .25rem; }
	.kontakt-liste li { margin-inline:-1.25rem; padding:1rem 1.25rem; }
	.kontakt-pfeil { opacity:.8; }
	.produkte { grid-template-columns:minmax(0, 1fr); }
	.produkt { padding:1.25rem; }
	.produkt-bild { aspect-ratio:16 / 10; }
	.zeile { grid-template-columns:2.75rem minmax(0, 1fr) 1.5rem; gap:.9rem; }
	.zeile-symbol { width:2.75rem; height:2.75rem; }
	.zeile-symbol .ic { width:1.25rem; height:1.25rem; }
	.zeilen-info li { grid-template-columns:2.75rem minmax(0, 1fr); gap:.9rem; }
	.schritte > li { grid-template-columns:2.75rem minmax(0, 1fr); gap:.9rem; }
	.schritte > li::before { width:2.75rem; height:2.75rem; font-size:1.05rem; }
	.farbfelder { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.fragen details p { padding-right:0; }
	.tabelle { overflow:visible; border-top:0; }
	.tabelle table { min-width:0; }
	.tabelle thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
	.tabelle tr { display:block; padding:1.25rem 0; border-top:3px solid var(--blau); }
	.tabelle tr + tr { border-top:1px solid var(--linie); }
	.tabelle th, .tabelle td { display:block; padding:.15rem 0; border:0; }
	.tabelle tbody th { margin-bottom:.4rem; font-size:1.125rem; }
	.tabelle td::before { content:attr(data-label); display:block; margin-top:.5rem; color:var(--grau); font-size:.8125rem; font-weight:600; }
	.kontakt-allein { padding-inline:1.25rem; }
	.kontakt-allein .kontakt-liste li { margin-inline:-1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}