/* ==========================================================================
   Gripfruit – Basis
   Breakpoints: Mobil < 768 · Tablet 768–1023 · Desktop ≥ 1024 · Raster fix ab 1600
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--pws-c-bg, #fff); color: var(--pws-c-text, #012141);
	font-family: var(--pws-font, system-ui, sans-serif);
	font-size: var(--pws-fs-body, 16px); line-height: var(--pws-lh-body, 1.75); font-weight: var(--pws-fw-body, 400);
	-webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Silbentrennung: per Theme-Einstellung (Allgemein) an/aus */
.pws-no-hyphens { -webkit-hyphens: none; hyphens: none; word-break: normal; overflow-wrap: normal; }
.pws-hyphens { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.pws-hyphens .pws-slide-heading, .pws-hyphens .pws-hero__word, .pws-hyphens .pws-map__value { -webkit-hyphens: none; hyphens: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pws-c-accent); outline-offset: 3px; }
/* „Zum Inhalt springen“ – nur für Tastatur-/Screenreader-Nutzer, erscheint ausschließlich per Tab-Taste */
.pws-skip { position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 16px; background: var(--pws-c-primary); color: var(--pws-c-bg);
	clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.pws-skip:focus-visible { clip-path: none; width: auto; height: auto; overflow: visible; }

.pws-container { width: min(var(--pws-grid, 1500px), 100% - 2 * var(--pws-gutter, 60px)); margin-inline: auto; }

/* Typografie ------------------------------------------------------------ */
h1, h2, h3, h4 { margin: 0 0 .6em; color: var(--pws-c-primary); }
h1, .pws-h1 { font-size: var(--pws-fs-h1); line-height: var(--pws-lh-h1); font-weight: var(--pws-fw-h1); }
h2, .pws-h2 { font-size: var(--pws-fs-h2); line-height: var(--pws-lh-h2); font-weight: var(--pws-fw-h2); }
h3, .pws-h3 { font-size: var(--pws-fs-h3); line-height: var(--pws-lh-h3); font-weight: var(--pws-fw-h3); }
h4, .pws-h4 { font-size: var(--pws-fs-h4); line-height: var(--pws-lh-h4); font-weight: var(--pws-fw-h4); }
.pws-richtext > :first-child { margin-top: 0; }
.pws-richtext > :last-child { margin-bottom: 0; }
.pws-richtext p { margin: 0 0 1em; }

/* Menüs ------------------------------------------------------------------ */
.pws-menu, .pws-footmenu, .pws-mobile-nav__main { list-style: none; margin: 0; padding: 0; }
.pws-menu { display: flex; gap: clamp(24px, 3vw, 56px); }
.pws-menu a { text-decoration: none; font-size: var(--pws-fs-menu, 15px); line-height: var(--pws-lh-menu, 1.3); font-weight: var(--pws-fw-menu, 500); }
.pws-menu a:hover { color: var(--pws-c-accent); }
/* Menüpunkt mit CSS-Klasse „is-button“ (Design → Menüs → Ansicht-Optionen → CSS-Klassen): umrandeter Button */
.pws-menu .is-button > a { padding: .45em 1.2em; margin-block: -.45em; border: 1.5px solid currentColor; border-radius: 999px; }
.pws-menu .is-button > a::after { display: none; }
.pws-menu .is-button > a:hover { color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); }
/* Aktiver Menüpunkt (Onepager, per Skript beim Scrollen gesetzt). Die unsichtbare Kopie in Fett
   hält die Breite fest, damit die Nachbarn beim Wechsel nicht verrutschen. */
.pws-menu a, .pws-footmenu a { display: inline-flex; flex-direction: column; }
.pws-menu a::after, .pws-footmenu a::after, .pws-mobile-nav__main a::after {
	content: attr(data-label); display: block; font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none;
}
.pws-menu a.is-active, .pws-footmenu a.is-active, .pws-mobile-nav__main a.is-active, .pws-hero__nav .pws-menu a.is-active { font-weight: 700; }

.pws-footmenu { display: flex; justify-content: space-between; gap: 8px 24px; }
.pws-footmenu a { text-decoration: none; font-size: var(--pws-fs-small); line-height: var(--pws-lh-small); font-weight: var(--pws-fw-small); }
.pws-footmenu a:hover { color: var(--pws-c-accent); }
@media (max-width: 1023px) { .pws-footmenu { display: grid; grid-template-columns: repeat(4, 1fr); } }   /* Tablet: 2 Zeilen */
@media (max-width: 767px)  { .pws-footmenu { grid-template-columns: repeat(2, 1fr); } }                 /* Mobil: 2 Spalten */

/* Sticky-Header (erscheint beim Hochscrollen) ------------------------------ */
.pws-header {
	position: fixed; inset: 0 0 auto; z-index: 100; height: 60px; display: flex; align-items: center;
	background: var(--pws-c-bg); color: var(--pws-c-primary);
	transform: translateY(-100%); transition: transform .35s ease, background-color .3s;
}
.pws-header.is-visible, body:not(.has-pws-hero) .pws-header.is-top { transform: none; }
.pws-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pws-header__logo { width: var(--pws-logo-l, 240px); }
.pws-hero__logo .pws-logo { width: var(--pws-logo-s, 220px); }
.pws-logo svg, .pws-logo img { width: 100%; height: auto; }
.pws-logo { display: inline-grid; text-decoration: none; }
.pws-logo__img { grid-area: 1 / 1; display: block; transition: opacity .35s ease; }
.pws-logo__img--light { opacity: 0; }
.pws-logo.use-light .pws-logo__img--dark { opacity: 0; }
.pws-logo.use-light .pws-logo__img--light { opacity: 1; }
.pws-logo__text { font-weight: 600; font-size: 22px; color: var(--pws-c-primary); }
body:not(.has-pws-hero) #pws-main { padding-top: 60px; }

.pws-burger { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.pws-burger span, .pws-burger span::before, .pws-burger span::after {
	position: absolute; left: 8px; right: 8px; height: 2px; background: currentColor; content: ""; transition: transform .25s, opacity .25s;
}
.pws-burger span { top: 19px; }
.pws-burger span::before { left: 0; right: 0; top: -7px; }
.pws-burger span::after { left: 0; right: 0; top: 7px; }
.pws-burger[aria-expanded="true"] span { background: transparent; }
.pws-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.pws-burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1023px) {
	.pws-header__nav, .pws-hero__nav { display: none; }
	.pws-burger { display: block; }
}

.pws-mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--pws-c-bg); padding: 110px 0 40px; overflow-y: auto; }
.pws-mobile-nav__main a { display: block; padding: 10px 0; font-size: 28px; font-weight: 500; text-decoration: none; color: var(--pws-c-primary); }
.pws-mobile-nav .pws-footmenu { margin-top: 48px; }
body.pws-nav-open { overflow: hidden; }
body.pws-nav-open .pws-header { transform: none; }

/* Footer-Leiste: erscheint zusammen mit dem Header beim Hochscrollen (ab Tablet) */
.pws-footbar {
	position: fixed; inset: auto 0 0; z-index: 100; height: 60px; display: flex; align-items: center;
	background: var(--pws-footer-bg, #0B0E1A); color: var(--pws-footer-fg, #FFFFFF);
	transform: translateY(100%); transition: transform .35s ease, background-color .3s;
}
.pws-footbar.is-visible:not(.is-covered) { transform: none; }
@media (max-width: 767px) { .pws-footbar { display: none; } }
body.pws-nav-open .pws-footbar { transform: translateY(100%); }

/* Videoscroll: Standphase – die Bühne bleibt oben kleben, solange die Seite um --vs-pin weiterscrollt */
.pws-videoscroll { height: calc(100vh + var(--vs-pin, 0vh)); height: calc(100lvh + var(--vs-pin, 0vh)); }
/* Handy: Bühne so hoch wie der Bildschirm mit eingeklappter Adressleiste (lvh) – sonst entsteht beim Scrollen
   unten ein Streifen. Logo, Menü und Texte bleiben trotzdem im kleinsten sichtbaren Bereich (svh). */
.pws-videoscroll .pws-hero__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; }
@supports (height: 100svh) {
	.pws-videoscroll .pws-hero__ui { bottom: calc(var(--f) + (100lvh - 100svh)); }
}

/* Kreis am unteren Rand (Videoscroll): rein per CSS positioniert (sticky), damit nichts nachruckelt.
   Die Spur reicht einen halben Kreis über das Modul hinaus. Der Kreis klebt mit seinem Mittelpunkt an der
   Unterkante des Bildschirms – anfangs halb verdeckt – und rollt nach der Standphase mit der Seite ganz ins Bild,
   bis sein Mittelpunkt auf der Unterkante des Moduls liegt. Drehung: main.js (weich nachgeführt). */
.pws-videoscroll { position: relative; z-index: 2; }
.pws-circle-track { --s: var(--size, 180px); position: absolute; inset: 0 0 calc(var(--s) / -2); z-index: 3; pointer-events: none; }
.pws-circle {
	position: sticky; top: calc(100vh - var(--s) / 2); top: calc(100svh - var(--s) / 2);
	width: var(--s); height: var(--s); margin-left: calc(var(--x, 38%) - var(--s) / 2); color: #fff;
}
.pws-circle__rot, .pws-circle svg, .pws-circle__rot img { width: 100%; height: 100%; }
.pws-circle__rot { will-change: transform; transform: translateZ(0); }
.pws-circle text { fill: currentColor; font-family: var(--pws-font); font-weight: 500; letter-spacing: .02em; }
/* Tablet/Mobil: Kreis rechts, Texte im Hero rücken um den halben Kreis nach oben */
@media (max-width: 1023px) {
	.pws-circle { margin-left: calc(100% - var(--pws-gutter, 24px) - var(--s)); }
	.pws-videoscroll:has(.pws-circle) .pws-hero__content { padding-bottom: calc(var(--circ, 180px) * .5 + 12px); }
}
@media (max-width: 767px) {
	.pws-circle-track { --s: calc(var(--size, 180px) * .7); }
	.pws-videoscroll:has(.pws-circle) .pws-hero__content { padding-bottom: calc(var(--circ, 180px) * .35 + 12px); }
}
/* Einrückung einzelner Zeilen in Überschriften (Leerzeichen am Zeilenanfang) */
.pws-indent { display: inline-block; padding-left: calc(var(--in, 0) * .2em); }

/* Videoscroll: Übergang in die Content-Farbe. Unterste Zeile immer 100 % Deckkraft → nahtlos bei jedem Videobild.
   Leicht geschwungene Kurve statt linearem Verlauf, damit keine sichtbare Kante am oberen Ende entsteht. */
.pws-videoscroll.has-fade { --vs-fade-c: var(--vs-fade, var(--vs-fade-auto, var(--pws-c-bg))); }
.pws-videoscroll.has-fade .pws-hero__media::after {
	content: ""; position: absolute; inset: auto 0 -1px; height: var(--vs-fade-h, 35%); pointer-events: none;
	opacity: var(--vs-fade-o, 1);   /* 0 am Anfang der Standphase, 1 sobald die Seite zu scrollen beginnt (main.js) */
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--vs-fade-c) 0%, transparent) 0%,
		color-mix(in srgb, var(--vs-fade-c) 12%, transparent) 25%,
		color-mix(in srgb, var(--vs-fade-c) 38%, transparent) 50%,
		color-mix(in srgb, var(--vs-fade-c) 72%, transparent) 75%,
		var(--vs-fade-c) 100%);
}

/* Seiten, die mit einem Videoscroll-Modul beginnen: Header und Footer-Leiste ohne Hintergrund */
.has-pws-videoscroll .pws-header, .has-pws-videoscroll .pws-footbar { background: transparent; }
/* Seite mit „Logo und Menü immer weiß“: kein Farbwechsel, Header durchsichtig mit weißer Schrift */
.pws-ui-light .pws-header, .pws-ui-light .pws-footbar { background: transparent; color: #fff; }
.pws-ui-light .pws-hero__nav .pws-menu a, .pws-ui-light .pws-hero__nav.is-on-light .pws-menu a,
.pws-ui-light .pws-burger--hero, .pws-ui-light .pws-burger--hero.is-on-light,
.pws-ui-light .pws-header .pws-menu a, .pws-ui-light .pws-header .pws-burger, .pws-ui-light .pws-logo__text { color: #fff; }
.pws-ui-light .pws-logo.has-light .pws-logo__img--dark { opacity: 0; }
.pws-ui-light .pws-logo.has-light .pws-logo__img--light { opacity: 1; }
body.pws-ui-light.pws-nav-open .pws-header { background: var(--pws-c-bg); color: var(--pws-c-primary); }
body.pws-ui-light.pws-nav-open .pws-header .pws-burger { color: var(--pws-c-primary); }
body.pws-ui-light.pws-nav-open .pws-header .pws-logo.has-light .pws-logo__img--dark { opacity: 1; }
body.pws-ui-light.pws-nav-open .pws-header .pws-logo.has-light .pws-logo__img--light { opacity: 0; }

body { transition: background-color .3s, color .3s; }

/* Seiten-Hülle für das Anhalten der Seite (animations.js → createFreeze) */
#pws-page { position: relative; background: var(--pws-c-bg); }
/* Haltepunkte verschieben #pws-page per margin-top: kein Zusammenfallen der Ränder, keine automatische Scroll-Korrektur des Browsers */
#pws-page-holder { display: flow-root; overflow-anchor: none; }

/* Footer ----------------------------------------------------------------- */
.pws-footer { padding: 22px 0 28px; background: var(--pws-footer-bg, #0B0E1A); color: var(--pws-footer-fg, #FFFFFF); }
.pws-footer .pws-footmenu a:hover, .pws-footbar .pws-footmenu a:hover { color: inherit; opacity: .7; }
.pws-footer:empty, .pws-footer:not(:has(li)) { display: none; }
html[style*="--pws-overscroll"], html[style*="--pws-overscroll"] body { background: var(--pws-overscroll); }

/* ==========================================================================
   Hero
   ========================================================================== */
.pws-hero { --hero-end: var(--hero-end-d, 200px); --f: var(--hero-frame, 60px); position: relative; color: #fff; }
@media (max-width: 1023px) { .pws-hero { --hero-end: var(--hero-end-t, 160px); } }
@media (max-width: 767px)  { .pws-hero { --hero-end: var(--hero-end-m, 110px); --f: min(var(--hero-frame, 60px), var(--pws-gutter)); } }

.pws-hero__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--pws-c-bg); }
.pws-hero__media { position: absolute; inset: var(--f); will-change: transform; transform-origin: 50% 50%; }
.pws-hero__media img, .pws-hero__media video, .pws-hero__media picture { width: 100%; height: 100%; object-fit: cover; }
/* Video: absolut über die ganze Fläche, 1px Überstand gegen Rundungskanten (Safari).
   Dahinter liegt das Posterbild – falls ein Browser einen Streifen nicht füllt, sieht man das Bild statt Grau. */
.pws-hero__media { overflow: hidden; background: var(--pws-c-navy, #012141) var(--hero-poster, none) center / cover no-repeat; }
.pws-hero__media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: center; }
.pws-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,20,40,var(--hero-overlay,.2)), transparent 60%); }

/* Rahmen: Das Bild sitzt exakt im Fenster (Bildschirm minus Rahmen), der weiße Rand ist Seitenhintergrund.
   Das Rahmen-Element trägt nur das Footer-Menü und skaliert beim Scrollen nach außen. */
.pws-hero__frame { position: absolute; inset: var(--f); pointer-events: none; will-change: transform; }
.pws-hero__footnav { position: absolute; left: calc(-1 * var(--f)); right: calc(-1 * var(--f)); top: 100%; height: var(--f); display: flex; align-items: center; pointer-events: auto; color: var(--pws-c-primary); overflow: hidden; } /* bei Rahmen 0 px komplett unsichtbar */
@media (max-width: 767px) { .pws-hero__footnav { display: none; } }

.pws-hero .pws-container { width: min(var(--pws-grid, 1500px), 100% - 2 * (var(--f) + var(--pws-gutter))); }
/* Abstand oben (Bildkante → Logo/Menü): nach Bildschirmbreite skaliert, nie größer als der bisherige Wert.
   390px → 40px · 1700px → 80px · ab ca. 1920px wieder der bisherige Wert (12vh, max. 140px). */
.pws-hero__ui {
	--hero-top-max: clamp(40px, 12vh, 140px);
	--hero-top: min(var(--hero-top-max), clamp(40px, calc(40px + (100vw - 390px) * 0.0305), 80px));
	position: absolute; inset: var(--f) 0; display: flex; flex-direction: column; justify-content: space-between;
	padding-block: var(--hero-top) clamp(40px, 11vh, 110px);
}
@media (min-width: 1700px) {
	.pws-hero__ui { --hero-top: min(var(--hero-top-max), calc(80px + (100vw - 1700px) * 0.27)); }
}
.pws-hero__top { display: flex; align-items: center; justify-content: space-between; }
.pws-hero__nav .pws-menu a { color: #fff; transition: color .35s ease; font-size: var(--pws-fs-heromenu, 15px); line-height: var(--pws-lh-heromenu, 1.3); font-weight: var(--pws-fw-heromenu, 500); }
.pws-burger--hero { color: #fff; transition: color .35s ease; }
/* Heller Hintergrund hinter dem Menü (automatisch per Skript erkannt) → Dunkelblau, unabhängig vom dunklen Modus */
.pws-hero__nav.is-on-light .pws-menu a, .pws-burger--hero.is-on-light { color: var(--pws-c-navy); }
.pws-hero__content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--pws-gutter); align-items: end; }
.pws-hero__headline { margin: 0; color: #fff; }
.pws-hero__text {
	margin: 0; max-width: 34em; text-align: left;
	justify-self: end; /* rechte Kante bündig mit Menü und Footer-Menü, Text bleibt linksbündig */
	font-size: var(--pws-fs-herotext, 15px); line-height: var(--pws-lh-herotext, 2); font-weight: var(--pws-fw-herotext, 300);
}
@media (max-width: 1023px) { .pws-hero__content { grid-template-columns: 1fr; } .pws-hero__text { justify-self: start; } }
/* Videoscroll: eigene Schrift nur in diesem Modul (Felder „Schrift nur in diesem Modul“) */
.pws-videoscroll .pws-hero__headline { font-weight: var(--vs-hw, var(--pws-fw-h1)); }
.pws-videoscroll .pws-hero__text { font-size: var(--vs-ts, var(--pws-fs-herotext, 15px)); line-height: var(--vs-tlh, var(--pws-lh-herotext, 2)); font-weight: var(--vs-tw, var(--pws-fw-herotext, 300)); }
@media (max-width: 767px) { .pws-videoscroll .pws-hero__text { font-size: var(--vs-ts-m, var(--pws-fs-herotext, 15px)); } }

/* ==========================================================================
   Module & Bausteine
   ========================================================================== */
.pws-module { padding-block: var(--mod-pt, 120px) var(--mod-pb, 120px); overflow-x: clip; }
@media (max-width: 767px) { .pws-module { padding-block: calc(var(--mod-pt, 120px) * .6) calc(var(--mod-pb, 120px) * .6); } }
.pws-b + .pws-b { margin-top: 48px; }
/* Inhalt-Modul mit dunklem Hintergrund: helle Schrift (Feld „Schrift“, automatisch nach Hintergrundfarbe) */
.pws-on-dark { --pws-c-text: #fff; --pws-c-primary: #fff; color: #fff; }
.pws-on-dark .pws-check li::before { background: currentColor; }

.pws-slide-heading {
	margin: 0; white-space: nowrap; color: var(--pws-c-primary);
	font-size: var(--sl, var(--pws-fs-slide)); line-height: var(--pws-lh-slide); font-weight: var(--pws-fw-slide); letter-spacing: -.015em;
}
/* Eigene Größe pro Baustein (Felder im Baustein „Schiebe-Überschrift“), sonst Theme-Einstellung */
.pws-slide { --sl: var(--sl-d, var(--pws-fs-slide)); }
@media (max-width: 1500px) { .pws-slide { --sl: var(--sl-l, var(--sl-d, var(--pws-fs-slide))); } }
@media (max-width: 1023px) { .pws-slide { --sl: var(--sl-t, var(--pws-fs-slide)); } }
@media (max-width: 767px)  { .pws-slide { --sl: var(--sl-m, var(--pws-fs-slide)); } }
.pws-slide-heading__inner { display: inline-block; will-change: transform; }


.pws-cols { display: flex; flex-wrap: wrap; gap: var(--gap, 60px); align-items: flex-start; }
.pws-cols--center { align-items: center; }
.pws-cols--end { align-items: flex-end; }
.pws-col { --w: var(--w-d, 50); flex: 0 0 calc(var(--w) * 1% - var(--gap, 60px) * (1 - var(--w) / 100)); min-width: 0; }
@media (max-width: 1023px) { .pws-col { --w: var(--w-t, 100); } }
@media (max-width: 767px)  { .pws-col { --w: var(--w-m, 100); } .pws-cols--rev { flex-direction: column-reverse; } }

.pws-acc__item { border-bottom: 1px solid color-mix(in srgb, var(--pws-c-primary) 20%, transparent); }
.pws-acc__title { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none;
	font-size: var(--pws-fs-h4); line-height: var(--pws-lh-h4); font-weight: var(--pws-fw-h4); color: var(--pws-c-primary); }
.pws-acc__title::-webkit-details-marker { display: none; }
.pws-acc__icon { position: relative; flex: 0 0 14px; height: 14px; }
.pws-acc__icon::before, .pws-acc__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; transition: transform .25s; }
.pws-acc__icon::after { transform: rotate(90deg); }
.pws-acc__item[open] .pws-acc__icon::after, .pws-acc__item.is-open .pws-acc__icon::after { transform: rotate(0); }
.pws-acc__item.is-closing .pws-acc__icon::after { transform: rotate(90deg); }
.pws-acc__body { padding: 0 0 20px; }
@media (min-width: 1024px) { .pws-acc__body { max-width: 85%; } }

.pws-check { list-style: none; margin: 0; padding: 0; }
.pws-check li { position: relative; padding: .375em 0 .375em 2em; font-size: var(--pws-fs-check, 16px); line-height: var(--pws-lh-check, 1.5); font-weight: var(--pws-fw-check, 400); }
.pws-check li::before {
	content: ""; position: absolute; left: 0; top: .5em; width: 1.15em; height: 1.15em; background: var(--pws-c-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5l3.5 3.5L15 4.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5l3.5 3.5L15 4.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pws-check--light { color: #fff; }
.pws-richtext .pws-check { margin: 0 0 1em; }

/* Buttons nebeneinander */
.pws-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 16px); }
.pws-btns--center { justify-content: center; }
.pws-btns--end { justify-content: flex-end; }
@media (max-width: 767px) {
	.pws-btns--stack { flex-direction: column; align-items: stretch; }
	.pws-btns--stack.pws-btns--center { align-items: center; }
}
.pws-check--light li::before { background: #fff; }

.pws-acc__body .pws-check { margin: 0 0 1em; }

.pws-svg { max-width: var(--w-d, 100%); }
.pws-svg svg, .pws-svg img { width: 100%; height: auto; }
@media (max-width: 1023px) { .pws-svg { max-width: var(--w-t, var(--w-d, 100%)); } }
@media (max-width: 767px)  { .pws-svg { max-width: var(--w-m, var(--w-t, var(--w-d, 100%))); } }

.pws-spacer { height: var(--h-d); }
@media (max-width: 1023px) { .pws-spacer { height: var(--h-t); } }
@media (max-width: 767px)  { .pws-spacer { height: var(--h-m); } }
.pws-b + .pws-spacer, .pws-spacer + .pws-b { margin-top: 0; }

/* Reduzierte Bewegung ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   FAQ (Baustein „FAQ“)
   ========================================================================== */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pws-faq__tools { display: grid; gap: 20px; margin-bottom: clamp(32px, 5vw, 64px); }
.pws-faq__search input {
	width: 100%; max-width: 560px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--pws-c-primary) 30%, transparent); border-radius: 999px;
	background: transparent; color: var(--pws-c-text); font: inherit; font-size: var(--pws-fs-body); -webkit-appearance: none; appearance: none;
}
.pws-faq__search input:focus { outline: none; border-color: var(--pws-c-primary); }
.pws-faq__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.pws-faq__nav a {
	padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--pws-c-primary) 25%, transparent); border-radius: 999px; text-decoration: none;
	font-size: var(--pws-fs-small); line-height: 1.3; font-weight: var(--pws-fw-small); color: var(--pws-c-primary); transition: border-color .2s, background .2s, color .2s;
}
.pws-faq__nav a:hover { background: var(--pws-c-primary); border-color: var(--pws-c-primary); color: var(--pws-c-bg); }
.pws-faq__group + .pws-faq__group { margin-top: clamp(48px, 7vw, 96px); }
.pws-faq__heading { font-size: var(--pws-fs-h3); line-height: var(--pws-lh-h3); font-weight: var(--pws-fw-h3); margin-bottom: .5em; }
.pws-faq__group, .pws-faq .pws-acc__item { scroll-margin-top: 110px; }
.pws-faq__lead { font-weight: 600; }
.pws-faq__src { font-size: var(--pws-fs-small); line-height: var(--pws-lh-small); opacity: .8; }
.pws-faq__src a { color: inherit; }
.pws-faq__empty { margin: 24px 0 0; }
.pws-faq [hidden] { display: none !important; }
@media (max-width: 767px) {
	/* Mobil: Kategorien als wischbare Zeile statt 12 Zeilen Buttons */
	.pws-faq__nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pws-gutter) * -1); padding-inline: var(--pws-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.pws-faq__nav::-webkit-scrollbar { display: none; }
	.pws-faq__nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ==========================================================================
   Downloads & passwortgeschützte Downloads
   ========================================================================== */
.pws-dl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pws-c-primary); }
.pws-dl__item { border-bottom: 1px solid var(--pws-c-primary); }
.pws-dl__link {
	display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 16px clamp(24px, 6vw, 100px);
	padding: 22px 0; text-decoration: none; color: var(--pws-c-primary);
}
.pws-dl__title { min-width: 0; overflow-wrap: break-word; font-size: var(--pws-fs-h4); line-height: var(--pws-lh-h4); font-weight: var(--pws-fw-h4); }
.pws-dl__ext { font-size: var(--pws-fs-small); line-height: 1; font-weight: 400; opacity: .9; }
.pws-dl__icon { width: 24px; height: 26px; justify-self: end; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .25s ease; overflow: visible; }
.pws-dl__link:hover { color: var(--pws-c-accent); }
.pws-dl__link:hover .pws-dl__icon { transform: translateY(4px); }
.pws-dl__link:focus-visible { outline-offset: 4px; }
@media (max-width: 767px) {
	.pws-dl__link { grid-template-columns: 1fr auto 18px; gap: 10px 12px; padding: 18px 0; }
	.pws-dl__icon { width: 18px; height: 20px; }
	body:not(.pws-no-hyphens) .pws-dl__title { hyphens: auto; }
}

/* Passwortfeld (Pille) mit Pfeil-Button */
.pws-dlp__field { position: relative; display: block; width: min(100%, 360px); }
.pws-dlp__field input {
	width: 100%; height: 56px; padding: 0 60px 0 24px; border: 1.5px solid var(--pws-c-primary); border-radius: 999px;
	background: transparent; color: var(--pws-c-text); font: inherit; font-size: var(--pws-fs-body); letter-spacing: .12em;
	-webkit-appearance: none; appearance: none;
}
.pws-dlp__field input::placeholder { color: color-mix(in srgb, var(--pws-c-primary) 40%, transparent); letter-spacing: 0; }
.pws-dlp__field input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pws-c-accent) 45%, transparent); }
.pws-dlp__field input[aria-invalid="true"] { border-color: #FF4D6A; }
.pws-dlp__go {
	position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
	display: grid; place-items: center; background: var(--pws-c-primary); color: var(--pws-c-bg); transition: background .2s;
}
.pws-dlp__go:hover, .pws-dlp__go:focus-visible { background: var(--pws-c-accent); color: var(--pws-c-navy, #012141); }
.pws-dlp__arrow { width: 18px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pws-dlp__error { margin: 12px 0 0; color: #FF4D6A; font-size: var(--pws-fs-small); }

/* FAQ: Prüfvermerk, Direktlink, Einzelseite */
.pws-faq__permalink { font-size: var(--pws-fs-small); line-height: var(--pws-lh-small); }
.pws-faq__permalink a { color: inherit; }
.pws-faq-single .pws-container { max-width: 900px; }
.pws-faq-single__crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: clamp(24px, 4vw, 48px); font-size: var(--pws-fs-small); line-height: var(--pws-lh-small); }
.pws-faq-single__crumbs a { color: inherit; text-decoration: none; opacity: .75; }
.pws-faq-single__crumbs a:hover { opacity: 1; color: var(--pws-c-accent); }
.pws-faq-single__q { font-size: var(--pws-fs-h2); line-height: var(--pws-lh-h2); font-weight: var(--pws-fw-h2); margin: 0 0 .8em; }
.pws-faq-single__a .pws-faq__lead { font-size: calc(var(--pws-fs-body) * 1.15); }
.pws-faq-single__more { margin-top: clamp(48px, 7vw, 96px); }
.pws-faq-single__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--pws-c-primary) 20%, transparent); }
.pws-faq-single__list li { border-bottom: 1px solid color-mix(in srgb, var(--pws-c-primary) 20%, transparent); }
.pws-faq-single__list a { display: block; padding: 14px 0; color: var(--pws-c-primary); text-decoration: none; font-size: var(--pws-fs-h4); line-height: var(--pws-lh-h4); font-weight: var(--pws-fw-h4); }
.pws-faq-single__list a:hover { color: var(--pws-c-accent); }
.pws-faq-single__back { margin-top: 40px; }

/* ==========================================================================
   Modul „Surf-Wachs“ – 3D-Modell, Sortentexte, Weltkarte (inc/surf.php)
   Ohne Skript / „weniger Bewegung“: alle Sorten untereinander, ohne Modell.
   ========================================================================== */
.pws-surf { position: relative; background: var(--surf-bg); color: var(--surf-fg); overflow-x: clip; }
.pws-surf__stage {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr);
	/* Mittlere Zeile = Höhe von Name + Text links. Rechts sitzen Beschreibung (oben bündig mit dem Namen)
	   und Karte (unten bündig mit dem Text) in derselben Zelle. */
	grid-template-areas: ". m ." "l m side" ". m ."; grid-template-rows: 1fr auto 1fr; align-items: center; column-gap: var(--pws-gutter, 60px);
	padding-block: clamp(60px, 10vh, 110px) clamp(50px, 8vh, 90px);
}
.pws-surf__l { grid-area: l; }
.pws-surf__m { grid-area: m; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vh, 36px); align-self: stretch; justify-content: center; }
.pws-surf__r { grid-area: side; align-self: start; }
/* Desktop: Text unter dem Namen beginnt auf Höhe der Balken. Er folgt direkt auf den Namen,
   den Abstand (--tag-gap) misst animations.js (initSurf → alignTag) bei jeder Größenänderung nach. */
@media (min-width: 1024px) {
	.pws-surf.is-live .pws-surf__l .pws-surf__panel { justify-content: flex-start; }
	.pws-surf.is-live .pws-surf__tag { margin-top: var(--tag-gap, clamp(32px, 7vh, 90px)); }
}
/* Bestell-Button: mehr Luft nach oben (Handy bleibt kompakt) */
@media (min-width: 768px) { .pws-surf__bars + .pws-surf__btn { margin-top: clamp(12px, 2.5vh, 28px); } }
/* Desktop: mehr Abstand zwischen Balken/Modell und den Texten links und rechts (+ Karte) */
@media (min-width: 1024px) {
	.pws-surf { --surf-pad-r: clamp(16px, 3vw, 56px); }
	.pws-surf__l { padding-right: var(--surf-pad-r); }
	.pws-surf__r { padding-left: var(--surf-pad-r); }
	.pws-surf__map { margin-left: var(--surf-pad-r); width: calc(100% - var(--surf-pad-r)); }
}
.pws-surf__map { grid-area: side; position: relative; width: 100%; max-width: 420px; aspect-ratio: 1000 / 436; align-self: end; }

.pws-surf__name { margin: 0; color: var(--surf-fg); font-size: clamp(56px, 7.4vw, 132px); line-height: .9; font-weight: 600; letter-spacing: -.02em; }
.pws-surf__line { display: block; padding-left: calc(var(--in, 0) * .2em); }
.pws-surf__tag { margin: clamp(32px, 7vh, 90px) 0 0; font-size: clamp(17px, 1.65vw, 26px); line-height: 1.25; font-weight: 600; }
.pws-surf__label, .pws-surf__temp { margin: 0; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.2; text-wrap: balance; }
.pws-surf__label { color: var(--c); font-weight: 700; }
.pws-surf__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px clamp(20px, 3vw, 48px); margin: clamp(20px, 4vh, 48px) 0 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.4; }
.pws-surf__facts dt { margin: 0; opacity: .85; }
.pws-surf__facts dd { margin: 0; }

.pws-surf__model { position: relative; width: 100%; height: min(70vh, 680px); }
.pws-surf__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Balken zwischen Modell und Button: bleiben stehen, fahren auf die Werte der aktiven Sorte, Farbe = Wachsfarbe */
.pws-surf__bars { width: min(100%, 440px); display: grid; gap: clamp(8px, 1.6vh, 16px); }
.pws-surf__bar { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); align-items: center; column-gap: clamp(14px, 1.6vw, 28px); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.4; }   /* wie die Eigenschaften */
.pws-surf__bar-t { position: relative; height: var(--bar-h, 8px); }
.pws-surf__bar-t::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--surf-fg); opacity: .9; }
.pws-surf__bar-f { position: absolute; inset: 0 auto 0 0; width: max(var(--bar-h, 8px), calc(var(--v, 0) * 1%)); border-radius: 999px; background: var(--wax);
	transition: width .9s cubic-bezier(.2, .7, .2, 1), background-color .6s ease; }
.pws-surf__m:has(.pws-surf__bars) .pws-surf__model { height: min(56vh, 560px); }
.pws-surf:not(.is-live) .pws-surf__bars { display: none; }   /* ohne JavaScript: Sorten untereinander, Balken passen dann zu keiner */
@media (prefers-reduced-motion: reduce) { .pws-surf__bar-f { transition: background-color .3s ease; } }
.pws-surf__btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.5em; border: 2px solid var(--wax); border-radius: 999px;
	color: var(--wax); text-decoration: none; font-size: 16px; font-weight: 600; transition: border-color .4s, color .4s, background-color .2s;
}
.pws-surf__btn:hover { background: color-mix(in srgb, var(--wax) 16%, transparent); }

/* Karte: Land als Maske (Farbe frei wählbar), Reviere als Overlay */
.pws-surf__land { position: absolute; inset: 0; background: var(--surf-land);
	-webkit-mask: var(--map) center / 100% 100% no-repeat; mask: var(--map) center / 100% 100% no-repeat; }
.pws-surf__hot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pws-surf__spots { opacity: 0; transition: opacity .6s ease; }
.pws-surf__spots.is-active { opacity: 1; }
.pws-surf__country { fill: var(--c); fill-opacity: .9; stroke: var(--c); stroke-width: 1.5; }
.pws-surf__dot { fill: var(--c); }
.pws-surf__pulse { fill: none; stroke: var(--c); stroke-width: 2.5; transform-box: fill-box; transform-origin: center;
	animation: pws-surf-pulse 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes pws-surf-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pws-surf__pulse { animation: none; opacity: .5; transform: scale(2); } }

/* Live: Sorten liegen übereinander, Wechsel per Klasse (animations.js) */
.pws-surf.is-live .pws-surf__stage { height: 100vh; height: 100lvh; min-height: 560px; box-sizing: border-box; }
.pws-surf.is-live .pws-surf__l, .pws-surf.is-live .pws-surf__r { display: grid; }
.pws-surf.is-live .pws-surf__panel { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear .8s; }
.pws-surf.is-live .pws-surf__panel.is-active { visibility: visible; transition: visibility 0s; }
/* Name oben, Text unten – so schließt die Karte rechts immer bündig mit dem Text ab, auch wenn er bei einer Sorte länger ist */
.pws-surf.is-live .pws-surf__l .pws-surf__panel { display: flex; flex-direction: column; justify-content: space-between; }
/* Texte einzeln: hinaus ohne Versatz, herein nacheinander (Name, Text, Temperatur, Eigenschaften – Abstand im Backend).
   Desktop: links nach links, rechts nach rechts. Tablet/Mobil: alles von links. */
.pws-surf { --out-l: translateX(calc(-100% - var(--pws-gutter, 60px))); --out-r: translateX(calc(100% + var(--pws-gutter, 60px))); }
.pws-surf.is-live .pws-surf__in { opacity: 0; transform: var(--out); transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .4s ease; }
.pws-surf.is-live .pws-surf__l .pws-surf__in { --out: var(--out-l); }
.pws-surf.is-live .pws-surf__r .pws-surf__in { --out: var(--out-r); }
.pws-surf.is-live .is-active .pws-surf__in {
	opacity: 1; transform: none;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .6s ease;
	transition-delay: calc(.3s + var(--n, 0) * var(--stagger, 120ms));
}
.pws-surf:not(.is-live) .pws-surf__model { display: none; }
.pws-surf:not(.is-live) .pws-surf__panel + .pws-surf__panel { margin-top: 48px; }
.pws-surf:not(.is-live) .pws-surf__spots { opacity: 1; }

/* Tablet + Mobil: links Texte untereinander, rechts das Modell */
@media (max-width: 1023px) {
	.pws-surf__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l m" "r m" "map m"; grid-template-rows: auto auto auto;
		align-content: center; column-gap: clamp(24px, 4vw, 40px); row-gap: clamp(16px, 3vh, 32px); padding-block: 72px 40px; }
	.pws-surf__r { grid-area: r; }
	.pws-surf.is-live .pws-surf__r .pws-surf__in { --out: var(--out-l); }
	.pws-surf__map { grid-area: map; align-self: start; }
	.pws-surf__m { grid-area: m; }
	.pws-surf__name { font-size: clamp(40px, 10vw, 84px); }
	.pws-surf__tag { margin-top: clamp(14px, 2.5vh, 28px); font-size: clamp(15px, 2.2vw, 20px); }
	.pws-surf__label, .pws-surf__temp { font-size: clamp(17px, 2.6vw, 24px); }
	.pws-surf__facts { margin-top: clamp(10px, 2vh, 20px); font-size: 12px; gap: 3px 14px; }
	.pws-surf__bar { font-size: 12px; }
	.pws-surf__model { height: min(66vh, 600px); }
	.pws-surf__tag br { display: none; }   /* feste Umbrüche nur am Desktop */
	.pws-surf__map { max-width: none; }
	.pws-surf__btn { font-size: 14px; min-height: 40px; }
}
@media (max-width: 1023px) { .pws-surf.is-live .pws-surf__stage { height: 100vh; height: 100svh; } }
/* Handy (Vorlage surf-mobil.pdf): Name links | Text rechts, darunter das liegende Modell + Button,
   Temperatur, dann Eigenschaften links | Karte rechts – alles in einer Ansicht.
   Name, Temperatur, Eigenschaften blenden nach links aus, der Text rechts nach rechts; die Karte bleibt stehen.
   Die Sorten-Panels lösen sich auf (display: contents), damit ihre Teile direkt im Raster sitzen; Sichtbarkeit erben sie weiter. */
@media (max-width: 767px) {
	.pws-surf.is-live .pws-surf__stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "name tag" "m m" "head head" "facts map";
		grid-template-rows: auto minmax(0, 1fr) auto auto;
		align-content: stretch; column-gap: 20px; row-gap: 0;
		padding-block: clamp(56px, 10svh, 88px) clamp(16px, 4svh, 40px);
		min-height: 0;
	}
	.pws-surf.is-live .pws-surf__l, .pws-surf.is-live .pws-surf__r,
	.pws-surf.is-live .pws-surf__l .pws-surf__panel, .pws-surf.is-live .pws-surf__r .pws-surf__panel { display: contents; }
	.pws-surf.is-live .pws-surf__name { grid-area: name; align-self: start; font-size: clamp(30px, min(11vw, 7svh), 56px); }
	.pws-surf.is-live .pws-surf__tag { grid-area: tag; align-self: start; margin: .3em 0 0; font-size: clamp(13px, min(4.1vw, 2.6svh), 17px); line-height: 1.3; }
	.pws-surf.is-live .pws-surf__l .pws-surf__tag.pws-surf__in { --out: var(--out-r); }   /* Text rechts → nach rechts */
	.pws-surf.is-live .pws-surf__m { grid-area: m; grid-row: auto; min-height: 0; gap: clamp(4px, 1.5svh, 16px); padding-block: 0 clamp(10px, 3svh, 32px); margin-top: calc(-1 * clamp(4px, 1.5svh, 14px)); }
	.pws-surf.is-live .pws-surf__model { flex: 1 1 auto; min-height: 90px; height: auto; max-height: 300px; }
	.pws-surf.is-static .pws-surf__model { flex: none; height: 56vw; max-height: 260px; }
	.pws-surf.is-live .pws-surf__head { grid-area: head; }
	.pws-surf.is-live .pws-surf__label, .pws-surf.is-live .pws-surf__temp { font-size: clamp(15px, min(5.4vw, 3.4svh), 22px); }
	.pws-surf.is-live .pws-surf__btn { min-height: 36px; }
	.pws-surf.is-live .pws-surf__bars + .pws-surf__btn { margin-top: clamp(10px, 2.6svh, 24px); }   /* mehr Luft zwischen Balken und Button */
	.pws-surf.is-live .pws-surf__bars { width: 100%; grid-template-columns: repeat(var(--bars, 3), minmax(0, 1fr)); column-gap: 14px; }
	.pws-surf.is-live .pws-surf__bar { grid-template-columns: minmax(0, 1fr); row-gap: 5px; font-size: clamp(11px, 1.9svh, 12px); white-space: nowrap; }
	.pws-surf.is-live .pws-surf__bar-l { overflow: hidden; text-overflow: ellipsis; }
	.pws-surf.is-live .pws-surf__bar-t { height: max(2px, calc(var(--bar-h, 8px) * .75)); }
	.pws-surf.is-live .pws-surf__facts { grid-area: facts; align-self: start; margin-top: clamp(6px, 1.6svh, 18px); font-size: clamp(11px, 1.9svh, 12px); gap: 2px 12px; }
	.pws-surf.is-live .pws-surf__map { grid-area: map; align-self: center; margin-top: clamp(6px, 1.6svh, 18px); max-width: none; }
}
/* „Bewegung reduzieren“: Sorten per Schalter, kein Anhalten (main.js → initSurfStatic) */
.pws-surf.is-static .pws-surf__stage { height: auto; min-height: 0; }
.pws-surf.is-static .pws-surf__panel, .pws-surf.is-static .pws-surf__in, .pws-surf.is-static .is-active .pws-surf__in { transition: none; }
.pws-surf__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pws-surf__tabs button { min-height: 44px; padding: 0 1em; border: 1.5px solid var(--c); border-radius: 999px; background: none; color: var(--surf-fg); font: inherit; font-size: 14px; cursor: pointer; }
.pws-surf__tabs button[aria-pressed="true"] { background: var(--c); color: var(--surf-bg); }

/* =========================================================
   Modul „Inhaltsstoffe“: drin (anklickbar) / nicht drin
   ========================================================= */
.pws-ing { background: var(--ing-bg); color: var(--ing-fg); padding-block: var(--ing-pt, 100px) var(--ing-pb, 140px); }
.pws-ing__intro { max-width: 820px; margin-bottom: clamp(32px, 5vw, 64px); }
.pws-ing__head { margin: 0; color: var(--ing-fg); font-size: clamp(40px, 6vw, 96px); line-height: .95; font-weight: 600; letter-spacing: -.02em; }
.pws-ing__lead { margin: clamp(16px, 2vw, 28px) 0 0; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.4; opacity: .85; }
.pws-ing__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.pws-ing__card { --c: var(--ing-yes); border: 1.5px solid color-mix(in srgb, var(--ing-fg) 14%, transparent); border-radius: clamp(20px, 2vw, 32px); padding: clamp(24px, 3vw, 48px); }
.pws-ing__card--no { --c: var(--ing-no); }
.pws-ing__title { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(20px, 2.4vw, 32px); color: var(--ing-fg); font-size: clamp(22px, 2vw, 32px); line-height: 1.15; font-weight: 600; }
.pws-ing__icon { flex: none; display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--c); }
.pws-ing__icon svg { width: 62%; height: 62%; fill: none; stroke: var(--ing-bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pws-ing__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pws-ing__chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; border: 1.5px solid var(--c); border-radius: 999px; background: none; color: var(--ing-fg);
	font: inherit; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.2; transition: background-color .25s ease, color .25s ease; }
button.pws-ing__chip { cursor: pointer; }
button.pws-ing__chip:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
button.pws-ing__chip[aria-pressed="true"] { background: var(--c); color: var(--ing-bg); }
button.pws-ing__chip:focus-visible { outline: 2px solid var(--ing-fg); outline-offset: 3px; }
/* nicht drin: dezent, durchgestrichen in der Warnfarbe */
.pws-ing__chip--no { border-color: color-mix(in srgb, var(--c) 55%, transparent); color: color-mix(in srgb, var(--ing-fg) 80%, transparent);
	text-decoration: line-through; text-decoration-color: var(--c); text-decoration-thickness: 1.5px; }
.pws-ing__detail { margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(20px, 2.2vw, 32px); border-radius: clamp(16px, 1.6vw, 24px); background: color-mix(in srgb, var(--c) 9%, transparent); }
.pws-ing__name { margin: 0; color: var(--c); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; font-weight: 600; }
.pws-ing__text { margin: .5em 0 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; opacity: .85; }
.pws-ing__detail.is-swap .pws-ing__name, .pws-ing__detail.is-swap .pws-ing__text { opacity: 0; transform: translateY(6px); }
.pws-ing__name, .pws-ing__text { transition: opacity .3s ease, transform .3s ease; }
@media (max-width: 1023px) { .pws-ing__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
	.pws-ing { padding-block: calc(var(--ing-pt, 100px) * .6) calc(var(--ing-pb, 140px) * .6); }
	.pws-ing__chips { gap: 8px; }
	.pws-ing__chip { min-height: 40px; padding: 0 .95em; }
}
@media (prefers-reduced-motion: reduce) { .pws-ing__name, .pws-ing__text, .pws-ing__chip { transition: none; } }

/* =========================================================
   Modul „FAQ“: Intro links (mitlaufend), Fragen rechts
   ========================================================= */
.pws-fq { background: var(--fq-bg); color: var(--fq-fg); padding-block: var(--fq-pt, 100px) var(--fq-pb, 140px); }
.pws-fq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.pws-fq--plain .pws-fq__grid { grid-template-columns: minmax(0, 1fr); }
.pws-fq__intro { position: sticky; top: 120px; }
.pws-fq__head { margin: 0; color: var(--fq-fg); font-size: clamp(40px, 6vw, 96px); line-height: .95; font-weight: 600; letter-spacing: -.02em; }
.pws-fq__lead { margin: clamp(16px, 2vw, 28px) 0 0; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.4; opacity: .85; max-width: 30ch; }
.pws-fq__btn {
	display: inline-flex; align-items: center; min-height: 44px; margin-top: clamp(24px, 3vw, 40px); padding: 0 1.5em; border: 2px solid var(--fq-c); border-radius: 999px;
	color: var(--fq-c); text-decoration: none; font-size: 16px; font-weight: 600; transition: background-color .2s;
}
.pws-fq__btn:hover { background: color-mix(in srgb, var(--fq-c) 16%, transparent); }
.pws-fq__btn:focus-visible { outline: 2px solid var(--fq-fg); outline-offset: 3px; }

.pws-fq__list { border-top: 1.5px solid color-mix(in srgb, var(--fq-fg) 14%, transparent); }
.pws-fq .pws-fq__item { --c: var(--fq-c); border-bottom: 1.5px solid color-mix(in srgb, var(--fq-fg) 14%, transparent); transition: border-color .3s; }
.pws-fq .pws-fq__item.is-open { border-bottom-color: var(--c); }
.pws-fq .pws-fq__q {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: clamp(14px, 1.6vw, 24px);
	padding: clamp(18px, 1.8vw, 28px) 0; color: var(--fq-fg); font-size: clamp(19px, 1.6vw, 26px); line-height: 1.25; font-weight: 600;
}
.pws-fq__nr { min-width: 2ch; color: var(--c); font-size: .6em; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; transform: translateY(-.15em); }
.pws-fq__qt { transition: opacity .25s; }
.pws-fq .pws-fq__q:hover .pws-fq__qt { opacity: .75; }
.pws-fq .pws-fq__q:focus-visible { outline: 2px solid var(--fq-fg); outline-offset: 4px; border-radius: 4px; }
/* Plus → Minus im Kreis in der Akzentfarbe */
.pws-fq__icon { position: relative; align-self: center; flex: none; width: 1.5em; height: 1.5em; border: 1.5px solid var(--c); border-radius: 50%; transition: background-color .25s; }
.pws-fq__icon::before, .pws-fq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 2px; margin: -1px 0 0 -21%; border-radius: 1px; background: var(--c); transition: transform .3s, background-color .25s; }
.pws-fq__icon::after { transform: rotate(90deg); }
.pws-fq__item.is-open .pws-fq__icon { background: var(--c); }
.pws-fq__item.is-open .pws-fq__icon::before, .pws-fq__item.is-open .pws-fq__icon::after { background: var(--fq-bg); }
.pws-fq__item.is-open .pws-fq__icon::after { transform: rotate(0); }
.pws-fq__item.is-closing .pws-fq__icon { background: transparent; }
.pws-fq__item.is-closing .pws-fq__icon::before, .pws-fq__item.is-closing .pws-fq__icon::after { background: var(--c); }
.pws-fq__item.is-closing .pws-fq__icon::after { transform: rotate(90deg); }
.pws-fq .pws-fq__a { max-width: none; padding: 0 calc(1.5em + clamp(14px, 1.6vw, 24px)) clamp(22px, 2.2vw, 32px) calc(2ch * .6 + clamp(14px, 1.6vw, 24px) + .4em);
	font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; }
.pws-fq .pws-fq__a > * { margin: 0; }
.pws-fq .pws-fq__a > * + * { margin-top: .8em; }
.pws-fq__a p, .pws-fq__a li { opacity: .85; }
.pws-fq__a .pws-faq__lead { opacity: 1; font-weight: 600; }
.pws-fq__a ul { padding-left: 1.2em; }
.pws-fq__a li::marker { color: var(--c); }
.pws-fq__a a { color: var(--c); }
.pws-fq__a strong { font-weight: 600; opacity: 1; }
.pws-fq__item { scroll-margin-top: 110px; }

@media (max-width: 1023px) {
	.pws-fq__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); }
	.pws-fq__intro { position: static; }
	.pws-fq__lead { max-width: 40ch; }
}
@media (max-width: 767px) {
	.pws-fq { padding-block: calc(var(--fq-pt, 100px) * .6) calc(var(--fq-pb, 140px) * .6); }
	.pws-fq .pws-fq__q { gap: 12px; }
	.pws-fq .pws-fq__a { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .pws-fq__item, .pws-fq__qt, .pws-fq__icon, .pws-fq__icon::before, .pws-fq__icon::after { transition: none; } }

/* =========================================================
   Modul „Maße & Form“: Maßzeichnung links, Text rechts
   Positionen der Beschriftung = Ausgabe von assets/img/src/bar-drawing.py (in % der Zeichnung)
   ========================================================= */
.gf-dim { background: var(--dm-bg); color: var(--dm-fg); padding-block: var(--dm-pt, 100px) var(--dm-pb, 120px); overflow-x: clip; }
.gf-dim__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.gf-dim__fig { min-width: 0; }
.gf-dim__toggle { display: inline-flex; padding: 3px; border: 1.5px solid color-mix(in srgb, var(--dm-fg) 35%, transparent); border-radius: 999px; margin-bottom: clamp(16px, 2vw, 28px); }
.gf-dim__toggle button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--dm-fg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s; }
.gf-dim__toggle button[aria-pressed="true"] { background: var(--dm-fg); color: var(--dm-bg); }
.gf-dim__toggle button:focus-visible { outline: 2px solid var(--dm-fg); outline-offset: 3px; }

.gf-dim__draw { position: relative; margin: 0; max-width: 640px; color: var(--dm-fg); }
.gf-dim-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gf-dim__cap, .gf-dim__lbl { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1.2; }
.gf-dim__cap { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.gf-dim__cap--front { left: 33.58%; top: 4.17%; }
.gf-dim__cap--side { left: 84.81%; top: 4.17%; }
.gf-dim__lbl { display: flex; align-items: baseline; gap: .5em; font-size: clamp(13px, 1.15vw, 16px); }
.gf-dim__lbl--len { left: 6.14%; top: 46.15%; transform: translate(-50%, -50%) rotate(-90deg) translateY(-1.1em); }
.gf-dim__lbl--wid { left: 33.58%; top: calc(91.67% + 1.3em); }
.gf-dim__lbl--dep { left: 84.81%; top: calc(91.67% + 1.3em); }
/* Gewählte Einheit vorne und kräftig, die andere klein daneben */
.gf-dim__u { transition: opacity .25s; }
.gf-dim__u--cm, [data-unit="in"] .gf-dim__u--in { order: 0; font-weight: 600; opacity: 1; font-size: 1em; }
.gf-dim__u--in, [data-unit="in"] .gf-dim__u--cm { order: 1; font-weight: 400; opacity: .55; font-size: .85em; }
.gf-dim__weight { display: flex; align-items: baseline; gap: .6em; margin: clamp(8px, 1.4vw, 20px) 0 0; font-size: 16px; }
.gf-dim__k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-right: .4em; }

.gf-dim__tag { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.gf-dim__head { margin: 0; color: var(--dm-fg); font-size: clamp(40px, 6vw, 96px); line-height: .95; font-weight: 600; letter-spacing: -.02em; }
.gf-dim__lead { margin: clamp(18px, 2vw, 28px) 0 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; opacity: .85; max-width: 34em; }
.gf-dim__pts { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; border-top: 1.5px solid color-mix(in srgb, var(--dm-fg) 14%, transparent); }
.gf-dim__pts li { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1.5px solid color-mix(in srgb, var(--dm-fg) 14%, transparent); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; }
.gf-dim__pts b { font-weight: 600; }
.gf-dim__pts span { opacity: .75; }

/* Hereinscrollen: Umriss zeichnet sich, dann erscheinen Oberfläche und Maße (nur mit JS) */
.pws-js .gf-dim .gf-dim-outline path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
.pws-js .gf-dim .gf-dim-surface, .pws-js .gf-dim .gf-dim-lines, .pws-js .gf-dim .gf-dim__lbl, .pws-js .gf-dim .gf-dim__cap { opacity: 0; transition: opacity .9s ease .9s; }
.pws-js .gf-dim.is-in .gf-dim-outline path { stroke-dashoffset: 0; }
.pws-js .gf-dim.is-in .gf-dim-surface, .pws-js .gf-dim.is-in .gf-dim-lines, .pws-js .gf-dim.is-in .gf-dim__lbl { opacity: 1; }
.pws-js .gf-dim.is-in .gf-dim__cap { opacity: .55; }

@media (max-width: 1023px) {
	.gf-dim__grid { grid-template-columns: minmax(0, 1fr); }
	.gf-dim__draw { margin-inline: auto; }
}
@media (max-width: 767px) {
	.gf-dim { padding-block: calc(var(--dm-pt, 100px) * .6) calc(var(--dm-pb, 120px) * .6); }
	.gf-dim__pts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.gf-dim__cap { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.pws-js .gf-dim .gf-dim-outline path { stroke-dashoffset: 0; transition: none; }
	.pws-js .gf-dim .gf-dim-surface, .pws-js .gf-dim .gf-dim-lines, .pws-js .gf-dim .gf-dim__lbl, .pws-js .gf-dim .gf-dim__cap { opacity: 1; transition: none; }
}