/* ==========================================================================
   PortfolioWerkStadt – 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; }
/* Dunkler Modus: im Header die weiße Variante */
[data-theme="dark"] .pws-header .pws-logo.has-light .pws-logo__img--dark { opacity: 0; }
[data-theme="dark"] .pws-header .pws-logo.has-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-c-bg); color: var(--pws-c-primary);
	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; }

/* Umschalter Heller/Dunkler Modus (erster Punkt im Footer-Menü) */
.pws-theme-toggle { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
	font: inherit; font-size: var(--pws-fs-small); line-height: var(--pws-lh-small); font-weight: var(--pws-fw-small); }
.pws-theme-toggle:hover { color: var(--pws-c-accent); }
.pws-theme-toggle__to-light { display: none; }
[data-theme="dark"] .pws-theme-toggle__to-dark { display: none; }
[data-theme="dark"] .pws-theme-toggle__to-light { display: inline; }
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; color: var(--pws-c-primary); }
.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)); } }

.pws-hero__word {
	position: absolute; left: 0; top: 50%; z-index: 3;
	font-size: var(--pws-fs-wordmark, calc(var(--hero-end) * 1.36)); line-height: var(--pws-lh-wordmark, 1); font-weight: var(--pws-fw-wordmark, 500); letter-spacing: -.01em;
	color: var(--pws-c-primary); white-space: nowrap;
	transform: translate(100vw, -50%); will-change: transform;
}

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

/* ---------- Accordion als Kacheln (Masonry). Klick vergrößert nur diese Kachel auf volle Breite ----------
   Positionen rechnet main.js (initAccTiles): Kacheln in Spalten (wie bei den Tools), die geöffnete Kachel
   über die ganze Breite, die Kacheln darüber werden so verlängert, dass keine Lücke bleibt.
   Ohne JavaScript: einfache Liste aufklappbarer Kacheln. --h = Grundhöhe der Kachel (versetzt). */
.pws-at { --at-bg: var(--pws-c-tools, var(--pws-c-navy, #012141)); --at-ease: cubic-bezier(.65, 0, .35, 1); }
.pws-at__grid { display: grid; gap: 16px; }
.pws-at.is-js .pws-at__grid { display: block; position: relative; transition: height .6s var(--at-ease); }
.pws-at.is-js .pws-at__tile { position: absolute; transition: left .6s var(--at-ease), top .6s var(--at-ease), width .6s var(--at-ease), height .6s var(--at-ease), background-color .2s; }
.pws-at.no-anim .pws-at__grid, .pws-at.no-anim .pws-at__tile { transition: none !important; }
.pws-at__tile { display: flex; flex-direction: column; border-radius: 14px; background: var(--at-bg); color: #fff; overflow: hidden; isolation: isolate; }
.pws-at:not(.is-js) .pws-at__tile { min-height: calc(var(--h) * 1px * .7); }
.pws-at__head { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(14px, 3vw, 24px);
	padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px); cursor: pointer; list-style: none; }
.pws-at__head::-webkit-details-marker { display: none; }
.pws-at__tile:not([open]):hover { background-color: color-mix(in srgb, var(--at-bg) 84%, #fff); }
.pws-at__head:focus-visible { outline: 2px solid var(--pws-c-accent, #F0145A); outline-offset: -2px; border-radius: 14px; }
.pws-at__num { font-size: 13px; letter-spacing: .08em; opacity: .55; }
.pws-at__title { max-width: 18ch; padding-right: 8px; font-size: clamp(16px, 1.5vw, 22px); hyphens: auto; line-height: 1.2; font-weight: 500; text-wrap: balance; }
.pws-at__icon { position: absolute; right: clamp(14px, 1.8vw, 20px); top: clamp(14px, 1.8vw, 20px); width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); transition: transform .45s var(--at-ease), background-color .2s; }
.pws-at__icon::before, .pws-at__icon::after { content: ""; position: absolute; left: 9px; right: 9px; top: 14.25px; height: 1.5px; background: currentColor; }
.pws-at__icon::after { transform: rotate(90deg); }
.pws-at__tile[open] .pws-at__icon { transform: rotate(45deg); background: rgba(255, 255, 255, .12); }
.pws-at__tile[open] .pws-at__head { flex: none; gap: 10px; padding-bottom: 6px; }
.pws-at__tile[open] .pws-at__title { max-width: none; padding-right: 48px; font-size: clamp(22px, 2vw, 30px); }
.pws-at__body { padding: 8px clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 28px); color: rgba(255, 255, 255, .88); }
.pws-at__body a { color: #fff; }
.pws-at__body > :last-child { margin-bottom: 0; }
.pws-at__tile[open] .pws-at__body { animation: pws-at-in .45s .25s both; }
.pws-at.is-js .pws-at__tile[open] { cursor: pointer; }   /* Klick auf die Fläche schließt */
@keyframes pws-at-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pws-at__icon, .pws-at__tile[open] .pws-at__body { transition: none; animation: none; } .pws-at.is-js .pws-at__grid, .pws-at.is-js .pws-at__tile { transition: none; } }

.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; }

/* Horizontale Tracks (Team, Zitate, Tools). Ohne JS: wischbar. */
.pws-track { display: flex; gap: clamp(20px, 3vw, 60px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pws-track > * { scroll-snap-align: start; flex: 0 0 auto; }
[data-pws-hscroll].is-ready .pws-track, .pws-tools.is-ready .pws-track { overflow: visible; scroll-snap-type: none; }

.pws-hs__title { margin-bottom: 48px; }
.pws-team__card { width: 300px; border-radius: 4px; overflow: hidden; background: var(--pws-c-team, var(--pws-c-navy, #012141)); color: #fff; display: flex; flex-direction: column; }
.pws-team__img { aspect-ratio: 1; background: #333; }
@media (max-width: 767px) { .pws-team__card { width: 260px; } }
.pws-team__img img { width: 100%; height: 100%; object-fit: cover; }
/* Name immer mittig in der Höhe: Titel oben, Funktion unten – egal wie lang */
.pws-team__meta { flex: 1; min-height: 140px; padding: 16px 24px; display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; }
.pws-team__degree { align-self: end; padding-bottom: 4px; }
.pws-team__bottom { align-self: start; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.pws-team__role, .pws-team__mail { display: block; }
.pws-team__degree { font-size: var(--pws-fs-teamdegree, 10px); line-height: var(--pws-lh-teamdegree, 1.4); font-weight: var(--pws-fw-teamdegree, 400); }
.pws-team__role { font-size: var(--pws-fs-teamrole, 10px); line-height: var(--pws-lh-teamrole, 1.4); font-weight: var(--pws-fw-teamrole, 600); }
.pws-team__name { margin: 0; color: #fff; font-size: var(--pws-fs-teamname, 17px); line-height: var(--pws-lh-teamname, 1.3); font-weight: var(--pws-fw-teamname, 500); }
.pws-team__mail { font-size: 12px; }
/* Team als Raster: 3 Spalten, Tablet 2, mobil 1 */
.pws-team--grid .pws-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 60px); overflow: visible; scroll-snap-type: none; }
.pws-team--grid .pws-team__card { width: auto; }
.pws-team--grid .pws-hs__title { margin-bottom: clamp(24px, 4vw, 48px); }
@media (max-width: 1023px) { .pws-team--grid .pws-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .pws-team--grid .pws-track { grid-template-columns: 1fr; } }

.pws-quote { margin: 0; width: clamp(280px, 32vw, 480px); }
.pws-quote:nth-child(even) { margin-top: 32px; }
.pws-quote__bubble { position: relative; margin: 0 0 40px; padding: 36px 36px 28px; border-radius: 4px; background: var(--pws-c-quote); color: #fff; }
/* Spitze: sauberes Dreieck, gerade linke Kante, ohne Rundung */
.pws-quote__bubble::after { content: ""; position: absolute; left: 26px; top: calc(100% - 1px); width: 36px; height: 29px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pws-quote__bubble p { margin: 0; font-size: var(--pws-fs-quote, 15px); line-height: var(--pws-lh-quote, 1.45); font-weight: var(--pws-fw-quote, 400); }
.pws-quote__by { padding-left: 36px; }
.pws-quote__name { display: block; font-size: var(--pws-fs-quotename, 12px); line-height: var(--pws-lh-quotename, 1.7); font-weight: var(--pws-fw-quotename, 700); }
.pws-quote__role { display: block; font-size: var(--pws-fs-quoterole, 12px); line-height: var(--pws-lh-quoterole, 1.7); font-weight: var(--pws-fw-quoterole, 400); }

.pws-tools .pws-track { align-items: stretch; position: relative; }
/* Tools: so breit wie das Raster; Höhe 16:9, aber nie höher als 78 % des Bildschirms */
.pws-tool { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; max-height: 78svh; overflow: hidden; border-radius: 15px; isolation: isolate; background: var(--pws-c-navy, var(--pws-c-primary)); color: #fff; }
@media (max-width: 767px) { .pws-tool { aspect-ratio: 3 / 4; max-height: 70svh; } }
.pws-tool__img, .pws-tool__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pws-tool__img img { transition: filter .45s ease, transform .45s ease; }
.pws-tool.is-open .pws-tool__img img { filter: blur(14px) brightness(.6); transform: scale(1.06); }
.pws-tool__body { position: absolute; left: clamp(20px, 4%, 44px); right: clamp(20px, 4%, 44px); bottom: clamp(20px, 6%, 44px); max-width: 420px; }
.pws-tool__check { margin-bottom: 24px; }
@media (max-width: 767px) {
	/* Mobil: ohne Beschreibung → alle Titel unten auf gleicher Höhe, mehr Platz für die Checkliste */
	.pws-tool__text { display: none; }
	.pws-tool__body { top: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
	.pws-tool__check { margin-bottom: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
.pws-tool__check .pws-check li { font-size: var(--pws-fs-toolcheck, 13px); line-height: var(--pws-lh-toolcheck, 1.45); font-weight: var(--pws-fw-toolcheck, 400); padding-block: .25em; }
.pws-acc__body .pws-check { margin: 0 0 1em; }
.pws-tool__check:not([hidden]) { animation: pws-fade-up .35s ease both; }
.pws-tool__head { display: flex; align-items: center; gap: 16px; }
.pws-tool__icon { flex: 0 0 auto; display: inline-flex; }
.pws-tool__icon svg, .pws-tool__icon img { width: 28px; height: 28px; overflow: visible; }
.pws-tool__name { margin: 0; font-size: 18px; color: #fff; flex: 1; }
.pws-tool__name a { text-decoration: none; }
.pws-tool__text { margin: 8px 0 0 44px; font-size: 12px; line-height: 1.6; }
.pws-tool__toggle { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.pws-tool__toggle::before, .pws-tool__toggle::after { content: ""; position: absolute; left: 6px; right: 6px; top: 15px; height: 1.5px; background: currentColor; transition: transform .3s; }
.pws-tool__toggle::after { transform: rotate(90deg); }
.pws-tool__toggle[aria-expanded="true"]::after { transform: rotate(0); } /* Plus → Minus */
@keyframes pws-fade-up { from { opacity: 0; transform: translateY(10px); } }

.pws-svg { max-width: var(--w-d, 100%); }
.pws-svg__img--dark { display: none; }
[data-theme="dark"] .pws-svg.has-dark .pws-svg__img--default { display: none; }
[data-theme="dark"] .pws-svg.has-dark .pws-svg__img--dark { display: block; }
.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; }

/* ==========================================================================
   Karte + Zahlen
   ========================================================================== */
.pws-map { position: relative; overflow: hidden; }
.pws-map__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.pws-map__inner { position: absolute; inset: 0; will-change: transform; }
/* Folgt die Karte direkt auf den Hero, läuft sie in dessen Animation mit (siehe animations.js). */
.pws-hero__stage > .pws-map__inner { z-index: 1; }
.pws-map.is-linked .pws-map__stage { display: none; }
.pws-map__svg, .pws-map__svgel { position: absolute; inset: 0; width: 100%; height: 100%; }
.pws-map__svgel .land { fill: var(--pws-c-map); }
.pws-map__svgel .land--active { fill: var(--pws-c-mapactive, #012141); stroke: var(--pws-c-mapline, #fff); }
/* Outline in Bildschirm-Pixeln, unabhängig von der Kartenskalierung */
.pws-map__svgel .land--active, .pws-map__svgel .land--active * { stroke-width: var(--pws-map-line-w, 2px); vector-effect: non-scaling-stroke; }

.pws-map__nums { list-style: none; margin: 0; padding: 0; }
.pws-map__num { position: absolute; left: var(--x); top: var(--y); color: var(--pws-c-primary); will-change: transform; }
.pws-map__value { display: block; font-size: var(--pws-fs-number); line-height: var(--pws-lh-number); font-weight: var(--pws-fw-number); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pws-map__suffix { font-weight: 300; }
.pws-map__label { display: block; margin-top: .35em; font-size: 17px; line-height: 1.45; }

/* Hochformat: Karte oben, Zahlen als 2×2-Raster darunter */
@media (max-aspect-ratio: 1/1) {
	.pws-map__svg { bottom: auto; height: 58%; }
	.pws-map__nums {
		position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
		width: min(var(--pws-grid), 100% - 2 * var(--pws-gutter)); margin-inline: auto;
		display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 28px 20px;
	}
	.pws-map__num { position: static; }
	.pws-map__label { font-size: 14px; }
}

/* Icons (werden in inc/map.php aus den Kreis-Markern erzeugt) */
.pws-ico { fill: none; stroke: var(--pws-c-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pws-map__inner.is-animated .rotor { transform-box: fill-box; transform-origin: 50% 50%; animation: pws-spin var(--s, 6s) linear infinite var(--d, 0s); }
.pws-map__inner.is-animated .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pws-flicker 1.6s ease-in-out infinite alternate var(--d, 0s); }
.pws-map__inner.is-animated .bolt  { animation: pws-flash 4.2s steps(1) infinite var(--d, 0s); }
.pws-map__inner.is-paused * { animation-play-state: paused !important; }
@keyframes pws-spin    { to { transform: rotate(360deg); } }
@keyframes pws-flicker {
	0%   { transform: scale(1, 1) skewX(0); }
	35%  { transform: scale(.96, 1.06) skewX(-3deg); }
	70%  { transform: scale(1.03, .94) skewX(2deg); }
	100% { transform: scale(.98, 1.03) skewX(-1deg); }
}
@keyframes pws-flash   { 0%, 84%, 90%, 100% { opacity: 1; } 86%, 92% { opacity: .15; } }

/* ==========================================================================
   Scroll-Grafiken (Baustein „Scroll-Grafik“) – volle Rasterbreite, ohne Hintergrund.
   Drei Fassungen je Grafik, damit die Beschriftung auf jedem Bildschirm lesbar bleibt.
   ========================================================================== */
.pwsg { margin-inline: 0; margin-block: 0; }
.pwsg__chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--pws-font); }
.pwsg__v--m, .pwsg__v--s { display: none !important; }
@media (max-width: 1023px) { .pwsg__v--l { display: none !important; } .pwsg__v--m { display: block !important; } }
@media (max-width: 767px)  { .pwsg__v--m { display: none !important; } .pwsg__v--s { display: block !important; } }

.pwsg-grid { stroke: color-mix(in srgb, var(--pws-c-primary) 14%, transparent); stroke-width: 1; }
.pwsg-tick { fill: color-mix(in srgb, var(--pws-c-primary) 62%, transparent); font-size: var(--fs); }
.pwsg-axis { fill: color-mix(in srgb, var(--pws-c-primary) 62%, transparent); font-size: var(--fs); }
.pwsg-note { fill: var(--pws-c-primary); font-size: calc(var(--fs) * 1.06); font-weight: 500; }
.pwsg-warn { fill: var(--pws-c-city); }
.pwsg-line { fill: none; stroke: var(--pws-c-primary); stroke-linejoin: round; }
.pwsg-forecast { fill: none; stroke: color-mix(in srgb, var(--pws-c-primary) 55%, transparent); stroke-dasharray: 7 6; }
.pwsg-fix { fill: none; stroke: var(--pws-c-accent); stroke-linejoin: round; }
.pwsg-dot { fill: var(--pws-c-accent); stroke: var(--pws-c-primary); }
.pwsg-drop { stroke: var(--pws-c-primary); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; }
.pwsg-quota { fill: var(--pws-c-accent); stroke: var(--pws-c-primary); stroke-width: 1.2; }
.pwsg-band { fill: color-mix(in srgb, var(--pws-c-quote) 14%, transparent); }
.pwsg-avg { stroke: var(--pws-c-quote); stroke-dasharray: 9 6; }
[data-theme="dark"] .pwsg-avg { stroke: var(--pws-c-accent); }
.pwsg-pill { fill: var(--pws-c-primary); }
.pwsg-pilltext { fill: var(--pws-c-bg); font-size: var(--fs); font-weight: 600; }
.pwsg-dev { fill: var(--pws-c-city); opacity: .22; }
.pwsg-dev2 { fill: var(--pws-c-city); opacity: .55; }

.pwsg__steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
	counter-reset: pwsg; font-size: var(--pws-fs-body); line-height: 1.5; }
.pwsg__step { counter-increment: pwsg; padding-top: 12px; border-top: 2px solid color-mix(in srgb, var(--pws-c-primary) 18%, transparent); transition: opacity .3s, border-color .3s; }
.pwsg__step::before { content: counter(pwsg); display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .6; }
.pwsg__step strong { font-weight: 600; }
.pwsg__note { margin-top: 14px; font-size: var(--pws-fs-small); opacity: .65; }
@media (max-width: 1023px) { .pwsg__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Scroll-Aufbau aktiv (animations.js): aktueller Schritt hervorgehoben */
.pwsg.is-live .pwsg__step { opacity: .38; }
.pwsg.is-live .pwsg__step.is-on { opacity: 1; border-top-color: var(--pws-c-accent); }
.pwsg.is-live [data-step] { will-change: opacity, transform; }
/* Handy: nur der aktuelle Schritttext, alle an derselben Stelle – spart Höhe */
@media (max-width: 767px) {
	.pwsg.is-live .pwsg__steps { grid-template-columns: 1fr; }
	.pwsg.is-live .pwsg__step { grid-area: 1 / 1; opacity: 0; }
	.pwsg.is-live .pwsg__step.is-on { opacity: 1; }
	.pwsg:not(.is-live) .pwsg__steps { grid-template-columns: 1fr; }
}

/* Ablauf „Automatisch + Klick“ (main.js → initGraphicAuto): Schritte bauen sich auf, Klick auf einen Schritt zeigt ihn.
   Am aktiven Schritt läuft ein feiner Balken mit, der die Zeit bis zum nächsten Wechsel zeigt. */
.pwsg.is-auto [data-step] { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.pwsg.is-auto [data-step="1"], .pwsg.is-auto [data-step].is-shown { opacity: 1; transform: none; }
.pwsg.is-auto .pwsg__step { position: relative; cursor: pointer; }
.pwsg.is-auto .pwsg__step:hover { opacity: .75; }
/* Graue Linie 1 px, darüber der grüne Fortschrittsbalken 5 px – beide vollständig abgerundet, mittig übereinander */
.pwsg.is-auto .pwsg__step { border-top: 0; padding-top: 16px;
	background: linear-gradient(color-mix(in srgb, var(--pws-c-primary) 18%, transparent), color-mix(in srgb, var(--pws-c-primary) 18%, transparent)) 0 2px / 100% 1px no-repeat; }
.pwsg.is-auto .pwsg__step.is-on { opacity: 1; }
.pwsg.is-auto .pwsg__step::after { content: ""; position: absolute; left: 0; top: 0; height: 5px; width: 0; border-radius: 999px; background: var(--pws-c-accent); }
.pwsg.is-auto .pwsg__step.is-on::after { width: 100%; animation: pwsg-progress var(--pwsg-int, 3s) linear both; }
.pwsg.is-auto .pwsg__step:focus-visible { outline: 2px solid var(--pws-c-accent); outline-offset: 4px; }
@keyframes pwsg-progress { from { width: 0; } to { width: 100%; } }
.pwsg__dots { display: none; justify-content: center; gap: 4px; margin-top: 12px; }
.pwsg__dots button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.pwsg__dots button::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: color-mix(in srgb, var(--pws-c-primary) 25%, transparent); transition: background-color .2s, transform .2s; }
.pwsg__dots button[aria-current="true"]::before { background: var(--pws-c-accent); transform: scale(1.25); }
@media (max-width: 767px) { .pwsg.is-auto .pwsg__dots { display: flex; } }
@media (prefers-reduced-motion: reduce) {
	.pwsg.is-auto [data-step] { transition: none; transform: none; }
	.pwsg.is-auto .pwsg__step.is-on::after { animation: none; width: 100%; }
}

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

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

/* ==========================================================================
   Themenring (Baustein „Themenring“)
   Ohne JS: Form mit allen Begriffen, Inhalte darunter. .is-live = per Skript animiert.
   ========================================================================== */
.pws-ring {
	--ring-c: var(--pws-c-accent);
	--ring-d: min(920px, 86lvh, 100vw - 2 * var(--pws-gutter, 60px));
	--ring-fs: clamp(12px, calc(var(--ring-d) * .0195), 17px);
	position: relative;
}
.pws-ring__stage { width: var(--ring-d); aspect-ratio: 1; margin-inline: auto; }
.pws-ring__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pws-ring__blob { fill: var(--ring-c); opacity: .62; }
.pws-ring__t { font-family: var(--pws-font); font-size: 50px; font-weight: 400; fill: var(--pws-c-navy, #012141); letter-spacing: -.005em; }
.pws-ring__label.is-active .pws-ring__t { font-weight: 700; }
.pws-ring__t--bottom { display: none; }
.pws-ring__panels { display: grid; gap: 40px; max-width: 640px; margin: 48px auto 0; }
.pws-ring__term { font-size: var(--pws-fs-h4); line-height: var(--pws-lh-h4); font-weight: 700; margin: 0 0 .5em; }
.pws-ring__lead { margin: 0 0 1.2em; font-weight: 600; }
.pws-ring__panel .pws-check { margin: 0; }

/* Desktop & Tablet: Inhalte in der Mitte der Form */
@media (min-width: 768px) {
	.pws-ring.is-live { display: grid; place-items: center; }
	.pws-ring.is-live > * { grid-area: 1 / 1; }
	.pws-ring.is-live .pws-ring__panels {
		display: grid; width: calc(var(--ring-d) * .5); max-width: none; margin: 0; gap: 0; align-items: center;
		font-size: var(--ring-fs); text-align: center; z-index: 1;
	}
	.pws-ring.is-live .pws-ring__panel { grid-area: 1 / 1; transition: opacity .25s linear; }
	.pws-ring.is-live .pws-ring__panel:not(.is-shown) { opacity: 0; visibility: hidden; }
	.pws-ring.is-live .pws-ring__term { display: none; }
	.pws-ring.is-live .pws-ring__lead { font-size: calc(var(--ring-fs) * 1.2); line-height: 1.55; }
	.pws-ring.is-live .pws-check { display: inline-block; text-align: left; }
	.pws-ring.is-live .pws-check li { font-size: var(--ring-fs); padding-block: .3em; }
}

/* Mobil: nur der untere Rand der Form bleibt oben stehen, die Inhalte laufen darunter durch */
@media (max-width: 767px) {
	.pws-ring { --ring-d: calc(100vw - 2 * var(--pws-gutter, 20px)); }
	.pws-ring.is-live .pws-ring__stage {
		position: sticky; top: 0; z-index: 2; width: auto; aspect-ratio: auto; height: 40vw;
		margin-inline: calc(var(--pws-gutter, 20px) * -1); overflow: hidden; background: var(--ring-bg, var(--pws-c-bg));
	}
	.pws-ring.is-live .pws-ring__svg { position: absolute; left: 50%; bottom: 0; width: 150vw; max-width: none; height: 150vw; transform: translateX(-50%); }
	.pws-ring.is-live .pws-ring__t--top { display: none; }
	.pws-ring.is-live .pws-ring__t--bottom { display: inline; }
	.pws-ring.is-live .pws-ring__t { font-size: 46px; }
	.pws-ring.is-live .pws-ring__panels { margin-top: 28px; gap: 0; }
	.pws-ring.is-live .pws-ring__panel { padding-block: 28px 36px; }
	.pws-ring.is-live .pws-ring__panel + .pws-ring__panel { border-top: 1px solid color-mix(in srgb, var(--pws-c-primary) 15%, transparent); }
	.pws-ring.is-live .pws-ring__term { display: none; }
	/* Variante „Texte ein- und ausblenden“: Seite hält an, nur der aktive Text ist sichtbar */
	.pws-ring.is-swap .pws-ring__stage { position: relative; }
	.pws-ring.is-swap .pws-ring__panels { display: grid; margin-top: 20px; }
	.pws-ring.is-swap .pws-ring__panel { grid-area: 1 / 1; padding: 0; transition: opacity .25s linear; }
	.pws-ring.is-swap .pws-ring__panel + .pws-ring__panel { border-top: 0; }
	.pws-ring.is-swap .pws-ring__panel:not(.is-shown) { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   Tools-Übersicht (Kacheln) – Baustein „toolgrid“, Skript: assets/js/tool-grid.js
   ========================================================================== */
.pws-tg { --tg-bg: var(--pws-c-tools, var(--pws-c-navy, #012141)); --tg-ease: cubic-bezier(.65, 0, .35, 1); position: relative; }
/* ohne JavaScript: einfaches Raster */
.pws-tg:not(.is-js) { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.pws-tg:not(.is-js) .pws-tg__tile { min-height: 140px; }
.pws-tg__tile { position: relative; overflow: hidden; border-radius: 14px; background: var(--tg-bg); color: #fff; isolation: isolate; }
.pws-tg.is-js { transition: height .7s var(--tg-ease); }
.pws-tg.is-js .pws-tg__tile { position: absolute; transition: left .7s var(--tg-ease), top .7s var(--tg-ease), width .7s var(--tg-ease), height .7s var(--tg-ease), border-radius .7s var(--tg-ease), background-color .2s; }
.pws-tg.no-anim, .pws-tg.no-anim .pws-tg__tile, .pws-tg.no-anim .pws-tg__name { transition: none !important; }
.pws-tg__chart { position: absolute; left: 0; top: 0; display: block; transition: filter .45s ease, opacity .45s ease; }
.pws-tg.is-detail .pws-tg__tile:not(.is-open) .pws-tg__chart,
.pws-tg.is-detail .pws-tg__tile.is-open.has-media .pws-tg__chart { filter: blur(10px); opacity: 0; }
.pws-tg__media { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.pws-tg__media img, .pws-tg__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pws-tg__tile.is-open .pws-tg__media { opacity: 1; transition-delay: .45s; }
.pws-tg__btn { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.pws-tg__btn:focus-visible { outline: 2px solid var(--pws-c-accent); outline-offset: 2px; }
.pws-tg__name {
	position: absolute; left: clamp(14px, 1.6vw, 22px); top: clamp(14px, 1.6vw, 22px); transform: translateY(0);
	font-size: clamp(12px, .95vw, 15px); line-height: 1.2; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
	transition: top .7s var(--tg-ease), transform .7s var(--tg-ease), opacity .3s;
}
/* Button-Zustand */
.pws-tg__tile.is-pill { border-radius: 20px; }
.pws-tg__tile.is-pill .pws-tg__name { top: 50%; transform: translateY(-50%); }
.pws-tg__tile.is-pill:hover { background-color: color-mix(in srgb, var(--tg-bg) 82%, #fff); }
.pws-tg__tile.is-open .pws-tg__name { opacity: 0; }
.pws-tg__tile.is-open .pws-tg__btn { cursor: pointer; }   /* Klick auf die offene Kachel schließt sie */
/* Kennzahlen in den Kacheln (Baustein-Feld „Kennzahlen“: A = oben, B = unten / in der Grafik).
   Wert in Tabellenziffern, Einheit kleiner mit schmalem Leerzeichen, Live-Punkt und Tendenz dezent. */
.pws-tg { --tg-pad: clamp(14px, 1.6vw, 22px); --tg-live: #39d98a; --tg-mag: #F0145A; }
.pws-tg__kpi { position: absolute; left: var(--tg-pad); right: var(--tg-pad); display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	pointer-events: none; transition: opacity .3s; }
.pws-tg__klabel { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(11px, .85vw, 13px); line-height: 1.2; font-weight: 500; opacity: .72; white-space: nowrap; }
.pws-tg__live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tg-live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-live) 60%, transparent); animation: pws-tg-live 2.4s ease-out infinite; }
@keyframes pws-tg-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-live) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.pws-tg__kval { display: inline-flex; align-items: baseline; font-size: clamp(16px, calc(2.5vw - 10px), 30px); line-height: 1.05; font-weight: 300; letter-spacing: -.005em;
	font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pws-tg__kunit { font-size: .6em; font-weight: 300; letter-spacing: 0; opacity: .82; }
.pws-tg__ktrend { align-self: center; margin-left: .45em; font-size: .45em; line-height: 1; }
.pws-tg__ktrend.is-up { color: var(--tg-live); }
.pws-tg__ktrend.is-down { color: var(--tg-mag); }
.pws-tg__knote { font-size: clamp(11px, .85vw, 13px); line-height: 1.3; opacity: .72; white-space: nowrap; }
.pws-tg__tile.is-pill .pws-tg__kpi, .pws-tg__tile.is-open .pws-tg__kpi, .pws-tg:not(.is-js) .pws-tg__kpi { opacity: 0; }

/* A · Kopfzeile: Name links, Bezeichnung mit Live-Punkt rechts in derselben Zeile, darunter Wert und Zusatz.
   Die Grafik beginnt unter dem Text (tool-grid.js misst die Höhe). */
.pws-tg--kpi-top .pws-tg__kpi { top: var(--tg-pad); padding-top: clamp(26px, 2.4vw, 34px); }
.pws-tg--kpi-top .pws-tg__klabel { position: absolute; top: 0; right: 0; }

/* B · Fußzeile: Name oben, Grafik in der Mitte, Bezeichnung + Wert + Zusatz unten links
   (tool-grid.js lässt die Grafik über dem Text enden – nichts überlappt). */
.pws-tg--kpi-bottom .pws-tg__kpi { bottom: var(--tg-pad); }

@media (max-width: 767px) {
	.pws-tg__kval { font-size: 14px; }
	.pws-tg__knote { display: none; }
	.pws-tg--kpi-top .pws-tg__kpi { padding-top: 22px; }
	.pws-tg--kpi-top .pws-tg__klabel { position: static; order: 2; font-size: 11px; }
	.pws-tg--kpi-bottom .pws-tg__klabel { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .pws-tg__live { animation: none; } }

/* Zurück zur Übersicht */
.pws-tg__close {
	position: absolute; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
	background: rgba(1, 33, 65, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff;
	animation: pws-tg-in .4s .55s both;
}
.pws-tg__close span::before, .pws-tg__close span::after { content: ""; position: absolute; left: 12px; right: 12px; top: 19px; height: 2px; background: currentColor; transform: rotate(45deg); }
.pws-tg__close span::after { transform: rotate(-45deg); }
.pws-tg__close:hover { background: var(--pws-c-city, #F0145A); }
@keyframes pws-tg-in { from { opacity: 0; transform: scale(.8); } }
@media (max-width: 767px) {
	.pws-tg__tile { border-radius: 12px; }
	.pws-tg__tile.is-pill { border-radius: 19px; }
	.pws-tg__name { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.pws-tg.is-js, .pws-tg.is-js .pws-tg__tile, .pws-tg__name, .pws-tg__chart, .pws-tg__media { transition-duration: .01s !important; }
}

/* ==========================================================================
   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: var(--pws-c-city, #F0145A); }
.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: var(--pws-c-city, #F0145A); font-size: var(--pws-fs-small); }

/* FAQ: Prüfvermerk, Direktlink, Einzelseite */
.pws-faq__review { font-size: var(--pws-fs-small); line-height: var(--pws-lh-small); opacity: .75; }
.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; }