/* ==========================================================================
   ProjectWizards — Global CSS
   Replaces: Bootstrap 3, SCSS pipeline, main.css
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; background: transparent; box-shadow: none; }
/* Anchor-Links berücksichtigen den sticky-Header (60px) + Atemspielraum,
   damit Targets nicht unter der Topnav verschwinden. */
html { scroll-padding-top: 80px; }

/* ==========================================================================
   Bild-Ausrichtung (KirbyTags class:alignleft|alignright|aligncenter)
   Globale Regeln, gelten in allen Prose-Containern.
   ========================================================================== */
.alignleft,
figure.alignleft,
img.alignleft {
	float: left;
	margin: var(--pw-space-xs) 22px 14px 0;
	max-width: 100%;
	height: auto;
}
.alignright,
figure.alignright,
img.alignright {
	float: right;
	margin: var(--pw-space-xs) 0 14px 22px;
	max-width: 100%;
	height: auto;
}
.aligncenter,
figure.aligncenter,
img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	float: none;
	clear: both;
	text-align: center;
}
figure.aligncenter picture {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	vertical-align: top;
}
figure.aligncenter > img,
figure.aligncenter picture img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}
img.aligncenter { max-width: 100%; height: auto; }
figure.alignleft picture,
figure.alignright picture {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}
/* Float-Bilder ohne explizite Display-Breite (kein style="width:…") füllen den
   figure-Container. Die intrinsischen width/height-HTML-Attribute (für Aspect-
   Ratio) werden bewusst ignoriert — sie sagen nichts über die gewünschte
   Render-Breite aus. */
figure.alignleft img:not([style*="width"]),
figure.alignright img:not([style*="width"]) {
	width: 100%;
	max-width: 100%;
}
figure.alignleft img,
figure.alignright img,
figure.alignleft picture img,
figure.alignright picture img {
	height: auto;
	display: block;
	margin: 0;
	max-width: 100%;
}
/* Lightboximage-Galerie: aufeinanderfolgende lightboximages mit Inline-Width
   (z. B. width:33%) rendern als Reihe nebeneinander. Single-Lightboximages
   bleiben block-level (default figure-Verhalten).
   Der negative margin-right kompensiert den ~4px Whitespace zwischen
   Inline-Block-Elementen (Newline im Markdown-Output), damit 33%+33%+33%
   wieder genau die Containerbreite passt. */
figure.lightboximage[style*="width"]:has(+ figure.lightboximage[style*="width"]),
figure.lightboximage[style*="width"] + figure.lightboximage[style*="width"] {
	display: inline-block;
	vertical-align: top;
	margin: 0 -4px 28px 0;
}
figure.lightboximage[style*="width"]:has(+ figure.lightboximage[style*="width"]) picture,
figure.lightboximage[style*="width"] + figure.lightboximage[style*="width"] picture {
	display: block;
	max-width: 100%;
}
figure.lightboximage[style*="width"]:has(+ figure.lightboximage[style*="width"]) picture img,
figure.lightboximage[style*="width"] + figure.lightboximage[style*="width"] picture img {
	width: 100%;
	height: auto;
	display: block;
}

ul { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }

/* ----------------------------------------------------------------
   Links — zentrale Regel
   ----------------------------------------------------------------
   Standard: alle Links sind neutral (Farbe erbt, kein Unterstrich).
   Damit haben Buttons, Cards, Kacheln und Navigation per Default
   keinen Effekt. Der Wipe-Underline kommt ausschließlich per
   Opt-in — entweder über `.pw-link` am Link selbst oder dadurch,
   dass der Link in einem Prose-Container steht.
   ---------------------------------------------------------------- */
a { color: inherit; text-decoration: none; }

/* Opt-in: Wipe-Underline bei Hover.
   Prose-Container hier erweitern, wenn weitere Fließtext-Bereiche
   denselben Effekt bekommen sollen. */
a.pw-link,
.nb-article__content a,
.gl-term__content a,
.sh-faq-detail__content a,
.pw-grid-detail__text a,
.pw-default__content a,
.sh-doc__entry-text a,
.news-content a,
.mp-faq__a a,
.sidenote__body a {
	position: relative;
}
a.pw-link::after,
.nb-article__content a::after,
.gl-term__content a::after,
.sh-faq-detail__content a::after,
.pw-grid-detail__text a::after,
.pw-default__content a::after,
.sh-doc__entry-text a::after,
.news-content a::after,
.mp-faq__a a::after,
.sidenote__body a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}
a.pw-link:hover::after,
.nb-article__content a:hover::after,
.gl-term__content a:hover::after,
.sh-faq-detail__content a:hover::after,
.pw-grid-detail__text a:hover::after,
.pw-default__content a:hover::after,
.sh-doc__entry-text a:hover::after,
.news-content a:hover::after,
.mp-faq__a a:hover::after,
.sidenote__body a:hover::after {
	transform: scaleX(1);
}

/* ============================================================
   DESIGN TOKENS — single source of truth for the whole site.
   Page-specific CSS files MUST NOT redeclare any --pw-* token;
   they only consume what is defined here.

   Two surface contexts coexist:
   - Light context (--pw-bg, --pw-text, ...): default theme,
     flips on prefers-color-scheme: dark.
   - Dark inverted context (--pw-bg-0/1/2, --pw-fg, ...): always
     dark, used for hero sections, footer, CTA — independent of
     the color scheme.
   ============================================================ */
:root {
	/* Brand */
	--pw-brand: #F99D1B;              /* Brand-Orange (warm, Juni 2026) */
	--pw-brand-hover: #D88200;        /* Hover-Orange (dunklere Variante), einheitlich in allen Modi */
	--pw-accent: #53b5f3;
	--pw-link: #378ed1;

	/* Light surface — flips with prefers-color-scheme */
	--pw-text: #1d1d1f;
	--pw-text-secondary: #6e6e73;
	--pw-text-muted: #86868b;
	--pw-bg: #fff;
	--pw-bg-alt: #f5f5f7;
	--pw-border: #e5e5ea;
	--pw-border-light: #d2d2d7;

	/* Dark inverted surface — always dark (hero, footer, CTA) */
	--pw-bg-dark: #0b1020;            /* solid dark surface */
	--pw-bg-dark-gradient: linear-gradient(180deg, #0b1020 0%, #111a33 40%, #1a2545 100%);
	--pw-fg: #f5f5f7;
	--pw-fg-muted: #9aa3b4;
	--pw-fg-dim: #6f7892;
	--pw-line: rgba(255,255,255,0.09);

	/* Neutrale Dark-Skala für Flächen/Borders in @media (prefers-color-scheme: dark).
	   Konstante Werte (kein Flip); getrennt vom blaustichigen --pw-bg-dark Hero/Footer-System. */
	--pw-dark-1: #141416;             /* tiefste Fläche */
	--pw-dark-2: #1a1a1a;             /* Karten-/Surface */
	--pw-dark-3: #2a2a2a;             /* Border / leicht erhöhte Fläche */

	/* Layout */
	--pw-max-width: 1200px;
	--pw-container-padding: 32px;

	/* Radii */
	--pw-radius-sm: 8px;
	--pw-radius-md: 12px;
	--pw-radius-lg: 20px;
	--pw-radius-pill: 999px;

	/* Shadows */
	--pw-shadow-sm:    0 4px 12px rgba(0,0,0,0.05);
	--pw-shadow-md:    0 8px 24px rgba(0,0,0,0.06);
	--pw-shadow-lg:    0 12px 32px rgba(0,0,0,0.08);
	--pw-shadow-brand:       0 4px 12px rgba(249,157,27,0.25);
	--pw-shadow-brand-hover: 0 8px 20px rgba(249,157,27,0.3);   /* großer Lift-Hover */
	--pw-shadow-brand-glow:  0 4px 12px rgba(249,157,27,0.3);   /* dezenter Hover-Glow */

	/* Spacing */
	--pw-space-xs:  4px;
	--pw-space-sm:  8px;
	--pw-space-md:  16px;
	--pw-space-lg:  24px;
	--pw-space-xl:  32px;
	--pw-space-2xl: 48px;
	--pw-space-3xl: 80px;

	/* Motion */
	--pw-duration-fast:   0.15s;
	--pw-duration-normal: 0.2s;
	--pw-easing-default:  ease;

	/* Z-Index */
	--pw-z-dropdown:       50;
	--pw-z-sticky-header:  100;
	--pw-z-mobile-menu:    110;
	--pw-z-modal-backdrop: 190;
	--pw-z-modal:          200;

	/* Font sizes (body scale; headings use clamp() below) */
	--pw-fs-base: 16px;
	--pw-fs-lg:   17px;

	/* Section padding (desktop) */
	--pw-section-hero:     96px 0 80px;
	--pw-section-standard: 80px 0;
	--pw-section-compact:  48px 0;

	/* Typography */
	--pw-font: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
}

/* ============================================================
   BREAKPOINTS — kanonische Skala (Konvention, KEINE Tokens:
   CSS-Variablen funktionieren nicht in @media, kein Build-Step).
   Neue @media-Regeln sollen einen dieser Werte verwenden:
     600px   — sm: Mobile -> Tablet
     768px   — md: Tablet (Topnav-Umbruch)
     1024px  — lg: Desktop
     1200px  — xl: = --pw-max-width, Content-Grenze
   Geduldete Sonderfälle (eigene Layout-Logik, nicht mergen):
     640px, 900px
   ============================================================ */

@media (prefers-color-scheme: dark) {
	:root {
		--pw-text: #f5f5f7;
		--pw-text-secondary: #b0b3ba;     /* heller Sekundärtext für p/Cards auf Dark */
		--pw-text-muted: #9aa0a8;          /* Nav-Links/Icons: gedimmt, aber lesbar */
		--pw-bg: #18181b;                 /* nicht pures Schwarz: leichter Grau-Offset */
		--pw-bg-alt: #202024;             /* alternierende Sektion, geringer Kontrast zu --pw-bg */
		--pw-border: rgba(255,255,255,0.16);      /* deutlichere Card-/Trennlinien im Dark Mode */
		--pw-border-light: rgba(255,255,255,0.22);
		--pw-link: #53b5f3;
	}
}

/* --- Typography --- */
html {
	font-family: var(--pw-font);
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: lining-nums;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--pw-font);
	color: var(--pw-text-secondary);
	background: var(--pw-bg);
	line-height: 1.6;
	font-size: 16px;
}

::selection {
	background: var(--pw-brand);
	color: #fff;
}
::-moz-selection {
	background: var(--pw-brand);
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pw-font);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--pw-text);
	line-height: 1.2;
}

h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }

p { margin: 0 0 var(--pw-space-md); }
a { transition: color 0.15s; }

/* --- Layout --- */
.pw-container {
	max-width: var(--pw-max-width);
	margin: 0 auto;
	padding: 0 var(--pw-container-padding);
}
/* Breiten-Modifier: eine zentrale Container-Klasse, abweichende Content-Breiten
   nur über Modifier (statt eigener namespaced Container je Seite).
   Desktop-Maße exakt wie zuvor; Mobile-Gutter einheitlich (≤768px → 20px). */
.pw-container--wide   { max-width: 1120px; }
.pw-container--mid    { max-width: 1100px; }
.pw-container--narrow { max-width: 960px; }
.pw-container--text   { max-width: 820px; }
/* wide/narrow nutzen den schmaleren 24px-Gutter (mid/text erben die 32px-Basis) */
.pw-container--wide,
.pw-container--narrow { padding-inline: var(--pw-space-lg); }
@media (max-width: 768px) {
	.pw-container--wide,
	.pw-container--narrow { padding-inline: 20px; }
}

#content {
	background: var(--pw-bg);
	padding-bottom: 40px;
}

/* --- Buttons --- */
.btn, .pw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pw-space-sm);
	padding: 12px var(--pw-space-lg);
	border-radius: var(--pw-radius-md);
	font-size: 16px;
	font-weight: 600;
	transition: all 0.2s;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	font-family: inherit;
	line-height: normal;
}
.btn svg, .pw-btn svg { width: 16px; height: 16px; }

/* Buttons — gemeinsame Reset-Regel: niemals Underline, niemals Article-Link-Color durchschlagen lassen */
.btn,
.btn:hover,
.btn:focus,
.btn:visited,
.btn:active,
.pw-btn,
.pw-btn:hover,
.pw-btn:focus,
.pw-btn:visited,
.pw-btn:active,
.nb-article__content a.btn,
.nb-article__content a.btn:hover,
.nb-article__content a.btn:focus,
.nb-article__content a.btn:visited,
.nb-article__content a.pw-btn,
.nb-article__content a.pw-btn:hover { text-decoration: none; }
.btn::after,
.btn::before,
.pw-btn::after,
.pw-btn::before,
.nb-article__content a.btn::after,
.nb-article__content a.btn::before { content: none; display: none; }

/* Primary — Haupt-CTA, orange gefüllt, weißer Text */
.btn-primary,
.btn-orange,
.btn-green,
.pw-btn--primary,
.nb-article__content a.btn-primary,
.nb-article__content a.btn-orange,
.nb-article__content a.btn-green,
.nb-article__content a.pw-btn--primary {
	background: var(--pw-brand);
	color: #fff;
	border: 1px solid transparent;
	box-shadow: var(--pw-shadow-brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:visited,
.btn-orange:hover, .btn-orange:focus, .btn-orange:visited,
.btn-green:hover, .btn-green:focus, .btn-green:visited,
.pw-btn--primary:hover, .pw-btn--primary:focus, .pw-btn--primary:visited,
.nb-article__content a.btn-primary,
.nb-article__content a.btn-primary:hover,
.nb-article__content a.btn-primary:visited,
.nb-article__content a.btn-orange,
.nb-article__content a.btn-orange:hover,
.nb-article__content a.btn-green,
.nb-article__content a.btn-green:hover { color: #fff; text-decoration: none; }
.btn-primary:hover,
.btn-orange:hover,
.btn-green:hover,
.pw-btn--primary:hover {
	background: var(--pw-brand-hover);
	transform: translateY(-1px);
	box-shadow: var(--pw-shadow-brand-hover);
}

/* Secondary — weiß mit oranger Border + Text, Hover füllt orange + weißer Text */
.btn-secondary,
.pw-btn--secondary,
.pw-btn--ghost,
.nb-article__content a.btn-secondary,
.nb-article__content a.pw-btn--secondary,
.nb-article__content a.pw-btn--ghost {
	background: #fff;
	color: var(--pw-brand);
	border: 1px solid var(--pw-brand);
	box-shadow: none;
	text-decoration: none;
}
.btn-secondary:visited,
.nb-article__content a.btn-secondary:visited { color: var(--pw-brand); text-decoration: none; }
.btn-secondary:hover,
.pw-btn--secondary:hover,
.pw-btn--ghost:hover,
.nb-article__content a.btn-secondary:hover,
.nb-article__content a.pw-btn--secondary:hover,
.nb-article__content a.pw-btn--ghost:hover {
	background: var(--pw-brand);
	color: #fff;
	border-color: var(--pw-brand);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(249,157,27,0.20);
}

/* Ghost (helle Fläche) — transparent, neutrale Border, neutraler Hover. Reiner Modifier: Layout kommt von .pw-btn */
.pw-btn--ghost-light,
.nb-article__content a.pw-btn--ghost-light {
	background: transparent;
	color: var(--pw-text);
	border: 1px solid var(--pw-border-light);
	box-shadow: none;
}
.pw-btn--ghost-light:hover,
.nb-article__content a.pw-btn--ghost-light:hover {
	background: var(--pw-bg-alt);
	border-color: var(--pw-text-muted);
	color: var(--pw-text);
}

/* Ghost (dunkle Fläche) — transparent auf dunklem Hintergrund, weißer Text. Reiner Modifier: Layout kommt von .pw-btn */
.pw-btn--ghost-dark {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.22);
	box-shadow: none;
}
.pw-btn--ghost-dark:hover {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.4);
	color: #fff;
}

/* Text — minimal, transparenter Hintergrund, oranger Text, KEIN Underline auch auf Hover */
.btn-text,
.pw-btn--text,
.nb-article__content a.btn-text,
.nb-article__content a.pw-btn--text {
	background: transparent;
	color: var(--pw-brand);
	border: 0;
	box-shadow: none;
	padding: var(--pw-space-sm) var(--pw-space-xs);
	text-decoration: none;
}
.btn-text:visited,
.nb-article__content a.btn-text:visited { color: var(--pw-brand); }
.btn-text:hover,
.pw-btn--text:hover,
.nb-article__content a.btn-text:hover,
.nb-article__content a.pw-btn--text:hover {
	color: var(--pw-brand-hover);
	background: transparent;
	text-decoration: none;
	transform: none;
	box-shadow: none;
}

.pw-link {
	font-size: 16px;
	font-weight: 600;
	color: var(--pw-brand);
}
.pw-link:hover { color: var(--pw-brand-hover); }

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	.btn-secondary,
	.pw-btn--secondary,
	.pw-btn--ghost,
	.nb-article__content a.btn-secondary,
	.nb-article__content a.pw-btn--secondary,
	.nb-article__content a.pw-btn--ghost {
		background: transparent;
		color: var(--pw-brand-hover);
		border-color: var(--pw-brand-hover);
	}
	.btn-secondary:hover,
	.pw-btn--secondary:hover,
	.pw-btn--ghost:hover,
	.nb-article__content a.btn-secondary:hover {
		background: var(--pw-brand-hover);
		color: #1d1d1f;
		border-color: var(--pw-brand-hover);
	}
	.btn-text,
	.pw-btn--text,
	.nb-article__content a.btn-text { color: var(--pw-brand-hover); }
	.btn-text:hover,
	.pw-btn--text:hover,
	.nb-article__content a.btn-text:hover { color: var(--pw-brand-hover); }
}

/* --- Header + Topbar --- */
/* WICHTIG: nur den Topnav-Header sticky machen, NICHT alle <header>-Tags
   (sonst kleben Article-Header, Page-Header und Review-Card-Header
   ebenfalls am viewport-top und überlappen den Topnav). */
header.pw-sticky-header {
	background: var(--pw-bg);
	border-bottom: 1px solid var(--pw-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.pw-topbar {
	display: flex;
	align-items: center;
	height: 60px;
	gap: var(--pw-space-lg);
}

.pw-topbar__logo {
	flex-shrink: 0;
}
.pw-topbar__logo a, .pw-topbar__logo img { display: block; }
.pw-topbar__logo img { height: 24px; width: auto; }

.pw-topbar__menu {
	flex: 1;
}

.pw-topbar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Main menu */
.pw-topbar__menu, .menu, .mainmenu { display: none; }
@media (min-width: 768px) {
	.pw-topbar__menu, .menu, .mainmenu { display: block; }
}
.topmenu ul {
	display: flex;
	gap: var(--pw-space-lg);
	align-items: center;
	margin: 0;
}
.topmenu ul li { display: inline-block; }
.topmenu ul li a {
	color: var(--pw-text-muted);
	font-size: 16px;
	font-weight: 500;
	transition: color 0.15s;
}
.topmenu ul li a:hover,
.topmenu ul li a.active { color: var(--pw-text); }

/* Nav CTA button */
.pw-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 20px;
	background: var(--pw-brand);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--pw-radius-sm);
	text-decoration: none !important;
	transition: all 0.2s;
	white-space: nowrap;
}
.pw-nav-cta:hover {
	background: var(--pw-brand-hover);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: var(--pw-shadow-brand-glow);
}

/* Header action triggers (search, language) */
.pw-topbar__actions .trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: var(--pw-radius-sm);
	color: var(--pw-text-muted);
	transition: color 0.15s, background 0.15s;
}
.pw-topbar__actions .trigger:hover {
	color: var(--pw-text);
	background: var(--pw-bg-alt);
}

/* Dropdown */
.pw-dropdown { position: relative; }
.pw-dropdown__menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--pw-bg);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-sm);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	padding: var(--pw-space-sm) 0;
	min-width: 160px;
	z-index: 200;
}
.pw-dropdown.is-open .pw-dropdown__menu { display: block; }
.pw-dropdown__menu li { list-style: none; }
.pw-dropdown__menu a {
	display: block;
	padding: var(--pw-space-sm) var(--pw-space-md);
	font-size: 14px;
	color: var(--pw-text-secondary);
}
.pw-dropdown__menu a:hover {
	background: var(--pw-bg-alt);
	color: var(--pw-text);
}
.pw-dropdown__menu li.active a { color: var(--pw-text); font-weight: 600; }

/* Inline search in topbar */
.pw-topbar__search {
	position: relative;
	display: flex;
	align-items: center;
}
.pw-topbar__search .searchform {
	position: absolute;
	right: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	height: 36px;
	width: 0;
	padding: 0;
	overflow: hidden;
	background: var(--pw-bg-alt);
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: width 0.28s ease, opacity 0.18s ease, padding 0.28s ease;
	box-sizing: border-box;
}
.pw-topbar__search.is-open .searchform {
	width: 300px;
	padding: 0 var(--pw-space-xs) 0 14px;
	opacity: 1;
	pointer-events: auto;
}
.pw-topbar__search .searchfield {
	flex: 1;
	min-width: 0;
	padding: 0 6px;
	background: transparent;
	border: none;
	color: var(--pw-text);
	font: inherit;
	line-height: 1;
}
.pw-topbar__search .searchfield::placeholder { color: var(--pw-text-muted); }
.pw-topbar__search .searchfield:focus { outline: none; }
.pw-topbar__search .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px; height: 28px;
	margin-left: var(--pw-space-xs);
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--pw-text-muted);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}
.pw-topbar__search .search-submit:hover {
	color: var(--pw-text);
	background: var(--pw-border);
}

/* Search form in dropdown */
.pw-dropdown .searchform { display: flex; padding: var(--pw-space-sm); }
.pw-dropdown .searchfield {
	flex: 1; min-width: 200px;
	padding: var(--pw-space-sm) 12px;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-sm);
	font-size: 14px; font-family: inherit;
	background: var(--pw-bg);
	color: var(--pw-text);
}
.pw-dropdown .searchfield:focus { outline: none; border-color: var(--pw-accent); }
.pw-dropdown .search-submit { display: none; }

/* --- Mobile menu trigger --- */
#mobile-menu-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--pw-text);
	cursor: pointer;
	margin-left: auto;
	border-radius: var(--pw-radius-sm);
	transition: background 0.15s;
}
#mobile-menu-trigger:hover { background: var(--pw-bg-alt); }
@media (min-width: 768px) {
	#mobile-menu-trigger { display: none; }
}

/* --- Mobile menu (slide-in drawer) --- */
.mobilemenu[hidden] { display: none; }
.mobilemenu {
	position: fixed;
	inset: 0;
	z-index: 110;
}
.mobilemenu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mobilemenu.is-open .mobilemenu__backdrop { opacity: 1; }
.mobilemenu__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 88vw;
	max-width: 360px;
	background: var(--pw-bg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}
.mobilemenu.is-open .mobilemenu__panel { transform: translateX(0); }

/* Header */
.mobilemenu__header {
	display: flex;
	align-items: center;
	gap: var(--pw-space-sm);
	padding: 12px 12px 12px var(--pw-space-md);
	border-bottom: 1px solid var(--pw-border);
	flex-shrink: 0;
}
.mobilemenu__search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--pw-space-sm);
	height: 40px;
	padding: 0 12px;
	background: var(--pw-bg-alt);
	border-radius: 999px;
}
.mobilemenu__search-icon { color: var(--pw-text-muted); flex-shrink: 0; }
.mobilemenu__search-field {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--pw-text);
	font: inherit;
	font-size: 15px;
}
.mobilemenu__search-field::placeholder { color: var(--pw-text-muted); }
.mobilemenu__search-field:focus { outline: none; }
.mobilemenu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	flex-shrink: 0;
	background: transparent;
	border: none;
	border-radius: var(--pw-radius-sm);
	color: var(--pw-text);
	cursor: pointer;
	transition: background 0.15s;
}
.mobilemenu__close:hover { background: var(--pw-bg-alt); }

/* Nav */
.mobilemenu__nav {
	flex: 1;
	overflow-y: auto;
	padding: var(--pw-space-sm) 0;
}
.mobilemenu__list { margin: 0; padding: 0; list-style: none; }
.mobilemenu__item { position: relative; }
.mobilemenu__link {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 56px 12px var(--pw-container-padding);
	font-size: 17px;
	font-weight: 600;
	color: var(--pw-text);
	text-decoration: none;
}
.mobilemenu__link.is-active { color: var(--pw-brand); }
.mobilemenu__link--sub {
	min-height: 44px;
	padding: 10px var(--pw-container-padding);
	font-size: 15px;
	font-weight: 400;
	color: var(--pw-text-secondary);
}
.mobilemenu__link--sub.is-active { color: var(--pw-brand); }
.mobilemenu__expand {
	position: absolute;
	top: 4px;
	right: calc(var(--pw-container-padding) - 12px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--pw-radius-sm);
	color: var(--pw-text-muted);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.mobilemenu__expand:hover {
	background: var(--pw-bg-alt);
	color: var(--pw-text);
}
.mobilemenu__expand svg { transition: transform 150ms ease; }
.mobilemenu__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
.mobilemenu__sublist {
	margin: var(--pw-space-xs) var(--pw-container-padding) var(--pw-space-sm);
	padding: var(--pw-space-xs) 0;
	list-style: none;
	background: var(--pw-bg-alt);
	border-radius: var(--pw-radius-md);
}
.mobilemenu__sublist .mobilemenu__link--sub {
	padding-left: var(--pw-space-md);
	padding-right: var(--pw-space-md);
}
.mobilemenu__sublist[hidden] { display: none; }

/* Footer */
.mobilemenu__footer {
	flex-shrink: 0;
	padding: var(--pw-space-md) var(--pw-container-padding) calc(var(--pw-space-md) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--pw-border);
	display: flex;
	flex-direction: column;
	gap: var(--pw-space-md);
}
.mobilemenu__cta {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 12px 20px;
}
.mobilemenu__langs {
	display: flex;
	justify-content: center;
	gap: var(--pw-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobilemenu__lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 32px;
	padding: 0 10px;
	border-radius: var(--pw-radius-sm);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.mobilemenu__lang:hover { background: var(--pw-bg-alt); color: var(--pw-text); }
.mobilemenu__lang.is-active { color: var(--pw-text); background: var(--pw-bg-alt); }

@media (prefers-reduced-motion: reduce) {
	.mobilemenu__backdrop,
	.mobilemenu__panel,
	.mobilemenu__expand svg { transition: none; }
}

/* Hide actions on mobile, show in mobilemenu */
@media (max-width: 768px) {
	.pw-topbar__actions { display: none; }
}

/* --- Secondary header (Legacy — hidden on new pages) --- */
.secondaryheader {
	text-align: center;
	padding: 20px 0;
}
section.submenu {
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--pw-border);
}

/* --- Utility --- */
.sr-only, .visually-hidden {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}

/* --- Cookie disclaimer --- */
.disclaimer {
	background: #ffca93;
	border-bottom: 1px solid #f5ab5d;
	padding: 10px var(--pw-space-md);
	text-align: center;
	font-size: 14px;
}
.disclaimer a { color: #9f5303; }

/* --- Tables (Comparison / Feature) --- */
table { border-collapse: collapse; width: 100%; margin: 0 0 var(--pw-space-xl); }
table th, table td {
	padding: 12px var(--pw-space-md);
	text-align: left;
	border-bottom: 1px solid var(--pw-border);
	font-size: 14px;
	vertical-align: middle;
}
table thead th {
	font-weight: 700;
	font-size: 13px;
	color: var(--pw-text);
	background: var(--pw-bg-alt);
	white-space: nowrap;
}
table tbody td { color: var(--pw-text-secondary); }
table tbody td:first-child { color: var(--pw-text); font-weight: 500; }

/* Vergleichs-Tabellen (Produkt-Feature-Matrix) behalten zentrierte Checkmark-Spalten */
.comparison thead th:not(:first-child),
.comparison tbody td:not(:first-child) { text-align: center; }
/* img ist global display:block — daher zusätzlich margin:auto fürs Zentrieren */
.comparison tbody td:not(:first-child) > img { margin-left: auto; margin-right: auto; }
table tbody tr.odd { background: var(--pw-bg-alt); }

/* Globaler Reset: kein Hover-Effekt auf Tabellenzeilen, nirgends.
   Hintergrund pro Zeile (inkl. .odd) bleibt beim Hover unveraendert. */
table tr,
table tbody tr,
table thead tr,
table tfoot tr { transition: none; }
table tr:hover,
table tbody tr:hover,
table thead tr:hover,
table tfoot tr:hover,
table tbody tr.odd:hover { background: var(--pw-bg); }
table tbody tr.odd,
table tbody tr.odd:hover { background: var(--pw-bg-alt); }
table td:hover,
table th:hover { background: inherit; }

/* Grouptitle rows — stärker hervorgehoben als Sektions-Header */
.comparison .grouptitle {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pw-text);
	background: var(--pw-bg-alt);
	padding: 22px var(--pw-space-md) 14px;
	border-top: 2px solid var(--pw-border);
	border-bottom: 2px solid var(--pw-border);
}

/* Feature rows — leicht unter den Kategorien, kompakter */
.comparison tbody td {
	padding: var(--pw-space-sm) var(--pw-space-md);
	font-size: 13px;
}
.comparison tbody tr.feature-title td:first-child {
	padding-left: var(--pw-space-xl);
	color: var(--pw-text);
	font-weight: 400;
}
/* kirbytext() wraps first-column labels in <p>; reset margin so text stays
   vertically centered on the same line as the checkmark images. */
.comparison tbody td > p { margin: 0; }

/* Checkmark images */
table td picture, table td picture img {
	display: inline-block;
	width: 18px;
	height: 18px;
}

/* Feature description rows */
table tr.feature-desc td {
	font-size: 13px;
	color: var(--pw-text-muted);
	padding-top: 0;
	padding-bottom: var(--pw-space-md);
	line-height: 1.5;
}

/* Column header images (product icons) */
table thead th img {
	display: block;
	margin: 0 auto 6px;
	max-height: 36px;
	width: auto;
}
table thead th .column-name {
	display: block;
	font-size: 12px;
	line-height: 1.3;
}

/* Sticky table header */
.comparison { border-collapse: separate; border-spacing: 0; }
.comparison thead th {
	position: sticky;
	top: 60px;
	z-index: 5;
	background: var(--pw-bg);
	border-bottom: 2px solid var(--pw-border);
}

/* Responsive table */
@media (max-width: 600px) {
	table th, table td { padding: 10px var(--pw-space-sm); font-size: 13px; }
	table thead th { font-size: 11px; }
	table thead th img { max-height: 28px; }
}

/* --- Accordion (replaces Bootstrap Collapse) --- */
.pw-accordion__group { display: flex; flex-direction: column; }
.pw-accordion__item {
	border-bottom: 1px solid var(--pw-border);
}
.pw-accordion__header {
	display: flex; align-items: center; gap: 12px;
	padding: 18px 0; cursor: pointer;
	list-style: none; font-size: 17px; font-weight: 600;
	color: var(--pw-text); transition: color 0.15s;
}
.pw-accordion__header::-webkit-details-marker { display: none; }
.pw-accordion__header:hover { color: var(--pw-brand); }
.pw-accordion__question { flex: 1; }
.pw-accordion__arrow::after { content: "+"; font-size: 22px; color: var(--pw-text-muted); }
.pw-accordion__item[open] .pw-accordion__arrow::after { content: "−"; }
.pw-accordion__body {
	padding: 0 0 20px;
	font-size: 16px; line-height: 1.6; color: var(--pw-text-secondary);
}
.pw-accordion__body p { margin: 0 0 12px; }
.pw-accordion__body a { color: var(--pw-link); }
.pw-accordion__icon { width: 24px; height: 24px; flex-shrink: 0; }

/* Accordion — Documentation variant */
.pw-accordion__doc-content {
	display: grid; grid-template-columns: 120px 1fr; gap: var(--pw-space-lg);
	align-items: start;
}
.pw-accordion__doc-cover img { width: 100%; height: auto; border-radius: var(--pw-radius-sm); }
.pw-accordion__doc-files { margin-top: 12px; }
.docwrap { margin: 0 0 var(--pw-space-sm); display: flex; align-items: center; gap: var(--pw-space-sm); flex-wrap: wrap; }
.doctype { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px var(--pw-space-sm); border-radius: 4px; background: var(--pw-bg-alt); color: var(--pw-text-muted); }
.doclang { font-size: 14px; font-weight: 600; color: var(--pw-link); }
.doclang:hover { text-decoration: underline; }

/* Accordion — Vote buttons */
.pw-accordion__vote { display: flex; gap: 12px; margin-top: 12px; }
.pw-accordion__vote .vote { cursor: pointer; font-size: 20px; opacity: 0.6; transition: opacity 0.15s; }
.pw-accordion__vote .vote:hover { opacity: 1; }
.pw-accordion__vote .vote.voted { opacity: 1; pointer-events: none; }

/* Legacy Bootstrap panel compat — maps old classes to new styles */
.panel { border: none; box-shadow: none; margin: 0; background: transparent; border-radius: 0; }
.panel-heading { padding: 0; border: none; background: transparent; }
.panel-body { padding: 0 0 20px; }
.panel-collapse { overflow: hidden; }
.panel-collapse.in, .panel-collapse.is-open { display: block; }

@media (max-width: 768px) {
	.pw-accordion__doc-content { grid-template-columns: 1fr; gap: var(--pw-space-md); }
	.pw-accordion__doc-cover { max-width: 120px; }
}

/* --- Carousel (replaces Bootstrap Carousel) --- */
.pw-carousel { position: relative; overflow: hidden; }
.pw-carousel__track { position: relative; }
.pw-carousel__slide { display: none; }
.pw-carousel__slide--active { display: block; animation: pwCarouselFade 0.5s ease; }
.pw-carousel__slide img { width: 100%; height: auto; display: block; }
@keyframes pwCarouselFade { from { opacity: 0; } to { opacity: 1; } }
.pw-carousel__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.1);
	color: var(--pw-text-secondary); width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 24px; transition: all 0.2s;
	backdrop-filter: blur(4px);
}
.pw-carousel__arrow:hover { background: var(--pw-brand); color: #fff; border-color: var(--pw-brand); }
.pw-carousel__arrow--prev { left: 16px; }
.pw-carousel__arrow--next { right: 16px; }
.pw-carousel__dots {
	display: flex; justify-content: center; gap: 10px;
	padding: var(--pw-space-md) 0;
}
.pw-carousel__dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: rgba(0,0,0,0.2); border: none; cursor: pointer;
	transition: all 0.2s; padding: 0;
}
.pw-carousel__dot:hover { background: rgba(0,0,0,0.4); }
.pw-carousel__dot--active { background: var(--pw-brand); transform: scale(1.3); }

/* --- Lightbox (replaces Magnific Popup) --- */
.pw-lightbox {
	border: none; padding: 0; margin: 0;
	max-width: 100vw; max-height: 100vh;
	width: 100vw; height: 100vh;
	background: transparent;
}
.pw-lightbox::backdrop { background: rgba(0,0,0,0.8); }
.pw-lightbox__backdrop {
	position: fixed; inset: 0; cursor: pointer;
}
.pw-lightbox__content {
	position: fixed; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.pw-lightbox__img {
	max-width: 90vw; max-height: 85vh;
	width: auto; height: auto;
	border-radius: var(--pw-radius-sm);
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	pointer-events: auto;
}
.pw-lightbox__close {
	position: fixed; top: 20px; right: 24px;
	background: rgba(255,255,255,0.15); border: none;
	color: #fff; font-size: 28px; line-height: 1;
	width: 44px; height: 44px; border-radius: 50%;
	cursor: pointer; pointer-events: auto;
	transition: background 0.15s;
	z-index: 10;
}
.pw-lightbox__close:hover { background: rgba(255,255,255,0.3); }
.screenshot-lightbox { cursor: zoom-in; }

/* --- Print --- */
@media print {
	#content img { max-width: 50%; margin: 0 auto; }
	#content picture { text-align: center; width: 100%; }
	header, footer, .mobilemenu, .secondaryheader, .submenu { display: none !important; }
}

/* --- Focus styles --- */
:focus-visible {
	outline: 2px solid var(--pw-accent);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	:root {
		--pw-container-padding: 20px;
		--pw-section-hero: 56px 0 40px;   /* Hero-Padding mobil, einheitlich für alle Token-Heroes */
	}
}

/* ============================================================
   COLUMNS — CSS-Grid für Kirbytext `(columns…)` Tag
   Ersetzt alte Bootstrap col-xs-12/col-sm-*-Klassen.
   ============================================================ */
.pw-columns {
	display: grid;
	gap: var(--pw-space-lg);
	margin: var(--pw-space-lg) 0;
}
.pw-columns--1 { grid-template-columns: 1fr; }
.pw-columns--2 { grid-template-columns: repeat(2, 1fr); }
.pw-columns--3 { grid-template-columns: repeat(3, 1fr); }
.pw-columns--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
	.pw-columns--2,
	.pw-columns--3,
	.pw-columns--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   SIDENOTE — globaler Informationskasten, z. B. Merlin-Hinweise
   Nutzung via Snippet: (snippet: sidenote title: "…" text: "…")
   ============================================================ */
.sidenote {
	position: relative;
	background: var(--pw-bg-alt);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-md);
	padding: 20px var(--pw-space-lg) 22px;
	margin: 28px 0;
	font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.sidenote__title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pw-text);
	margin: 0 0 6px;
	line-height: 1.3;
}
.sidenote--with-image .sidenote__title {
	margin-top: var(--pw-space-md);
	padding-right: 0;
}
/* Sidenote-CTA nutzt globalen .btn .btn-secondary — hier nur Logo + Label-Hooks */
.sidenote__cta { margin-top: var(--pw-space-md); }
.nb-article__content .sidenote__cta::after,
.sidenote__cta::after,
.sidenote__cta::before { content: none; display: none; }
.sidenote__cta-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	margin: -4px 0;
}
.sidenote__cta-logo img {
	width: 32px;
	height: 32px;
	max-width: 32px;
	margin: 0;
	display: block;
	object-fit: contain;
	border-radius: 0;
	background: transparent;
}
.sidenote__cta-label { display: inline-block; text-decoration: none; }
.sidenote__body {
	font-size: 15px;
	line-height: 1.55;
	color: #3a3a3c;
	margin: 0;
}
.sidenote__body p { margin: 0 0 10px; }
.sidenote__body p:last-child { margin-bottom: 0; }
.sidenote__body a { color: var(--pw-brand); }
.sidenote__body a:hover { color: var(--pw-brand-hover); }
.sidenote__figure {
	margin: 0 0 var(--pw-space-xs);
	padding: 0;
	overflow: hidden;
	border-radius: 10px;
	background: transparent;
	border: none;
}
.sidenote__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
	border-radius: 10px;
}
@media (max-width: 600px) {
	.sidenote { padding: 18px 18px 20px; }
}
@media (prefers-color-scheme: dark) {
	.sidenote { background: var(--pw-bg-alt); border-color: var(--pw-border); }
	.sidenote__title { color: var(--pw-text); }
	.sidenote__body { color: var(--pw-text-secondary); }
	.sidenote__body a { color: var(--pw-brand-hover); }
	.sidenote__body a:hover { color: var(--pw-brand-hover); }
	.sidenote__figure { background: transparent; border: none; }
	.sidenote__cta { background: var(--pw-bg-alt); color: var(--pw-text); border-color: var(--pw-border); }
	.sidenote__cta:hover { background: var(--pw-border); color: var(--pw-text); border-color: var(--pw-border-light); }
}

/* ============================================================
   BLOCKQUOTE — zentraler Zitat-Stil mit grauem „-Zeichen links
   ============================================================ */
blockquote {
	position: relative;
	padding: 6px 0 6px 52px;
	margin: var(--pw-space-xl) 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--pw-text);
	font-style: italic;
	font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
blockquote::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -22px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 96px;
	line-height: 1;
	color: var(--pw-border-light);
	font-style: normal;
	font-weight: 400;
}
blockquote p { margin: 0 0 10px; }
blockquote p:last-child { margin-bottom: 0; }
blockquote cite,
blockquote footer {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-style: normal;
	color: #6e6e73;
}
@media (max-width: 600px) {
	blockquote { padding-left: 40px; font-size: 17px; }
	blockquote::before { font-size: 72px; top: -14px; }
}
@media (prefers-color-scheme: dark) {
	blockquote { color: var(--pw-fg); }
	blockquote::before { color: #3a3a3c; }
	blockquote cite,
	blockquote footer { color: var(--pw-text-secondary); }
}

/* ==========================================================================
   PROSE — zentrale Typografie für alle Kirbytext-Container.
   Single source of truth für Links, Headings, Paragraphs, Bilder, Listen
   in Fließtext-Bereichen (Blog, Glossary, FAQ, Grid-Detail, Default, Doc).
   Page-spezifische CSS-Dateien dürfen die nachfolgenden Regeln nur dann
   überschreiben, wenn ein bewusster Sonderfall vorliegt (z.B. Blog-h2
   mit scroll-margin-top für Sticky-Header oder FAQ-h2 mit clear: both).
   ========================================================================== */
.nb-article__content,
.gl-term__content,
.sh-faq-detail__content,
.pw-grid-detail__text,
.pw-default__content,
.sh-doc__entry-text {
	font-size: 17px;
	line-height: 1.7;
	color: var(--pw-text);
}
.nb-article__content > *:first-child,
.gl-term__content > *:first-child,
.sh-faq-detail__content > *:first-child,
.pw-grid-detail__text > *:first-child,
.pw-default__content > *:first-child,
.sh-doc__entry-text > *:first-child { margin-top: 0; }
.nb-article__content > *:last-child,
.gl-term__content > *:last-child,
.sh-faq-detail__content > *:last-child,
.pw-grid-detail__text > *:last-child,
.pw-default__content > *:last-child,
.sh-doc__entry-text > *:last-child { margin-bottom: 0; }

.nb-article__content h2,
.gl-term__content h2,
.sh-faq-detail__content h2,
.pw-grid-detail__text h2,
.pw-default__content h2,
.sh-doc__entry-text h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 40px 0 var(--pw-space-md);
	letter-spacing: -0.01em;
}
.nb-article__content h3,
.gl-term__content h3,
.sh-faq-detail__content h3,
.pw-grid-detail__text h3,
.pw-default__content h3,
.sh-doc__entry-text h3 {
	font-size: 19px;
	font-weight: 700;
	margin: var(--pw-space-xl) 0 12px;
}
.nb-article__content h4,
.gl-term__content h4,
.sh-faq-detail__content h4,
.pw-grid-detail__text h4,
.pw-default__content h4,
.sh-doc__entry-text h4 {
	font-size: 17px;
	font-weight: 700;
	margin: var(--pw-space-lg) 0 10px;
}

.nb-article__content p,
.gl-term__content p,
.sh-faq-detail__content p,
.pw-grid-detail__text p,
.pw-default__content p,
.sh-doc__entry-text p { margin: 0 0 18px; }

.nb-article__content a,
.gl-term__content a,
.sh-faq-detail__content a,
.pw-grid-detail__text a,
.pw-default__content a,
.sh-doc__entry-text a { color: var(--pw-brand); }
.nb-article__content a:hover,
.gl-term__content a:hover,
.sh-faq-detail__content a:hover,
.pw-grid-detail__text a:hover,
.pw-default__content a:hover,
.sh-doc__entry-text a:hover { color: var(--pw-brand-hover); }

.nb-article__content img,
.gl-term__content img,
.sh-faq-detail__content img,
.pw-grid-detail__text img,
.pw-default__content img,
.sh-doc__entry-text img {
	border-radius: var(--pw-radius-md);
	margin: var(--pw-space-lg) 0;
}

.nb-article__content ul, .nb-article__content ol,
.gl-term__content ul, .gl-term__content ol,
.sh-faq-detail__content ul, .sh-faq-detail__content ol,
.pw-grid-detail__text ul, .pw-grid-detail__text ol,
.pw-default__content ul, .pw-default__content ol,
.sh-doc__entry-text ul, .sh-doc__entry-text ol {
	margin: 0 0 20px;
	padding-left: var(--pw-space-lg);
	list-style: revert;
}
.nb-article__content li,
.gl-term__content li,
.sh-faq-detail__content li,
.pw-grid-detail__text li,
.pw-default__content li,
.sh-doc__entry-text li { margin-bottom: var(--pw-space-sm); }

.nb-article__content hr,
.gl-term__content hr,
.sh-faq-detail__content hr,
.pw-grid-detail__text hr,
.pw-default__content hr,
.sh-doc__entry-text hr {
	border: 0;
	border-top: 1px solid var(--pw-border);
	margin: 40px 0;
}

/* Buttons innerhalb von Prose-Containern resetten den Prose-Link-Stil */
.nb-article__content a.btn, .nb-article__content a.pw-btn,
.gl-term__content a.btn, .gl-term__content a.pw-btn,
.sh-faq-detail__content a.btn, .sh-faq-detail__content a.pw-btn,
.pw-grid-detail__text a.btn, .pw-grid-detail__text a.pw-btn,
.pw-default__content a.btn, .pw-default__content a.pw-btn,
.sh-doc__entry-text a.btn, .sh-doc__entry-text a.pw-btn {
	text-decoration: none;
}
.nb-article__content a.btn::after, .nb-article__content a.pw-btn::after,
.gl-term__content a.btn::after, .gl-term__content a.pw-btn::after,
.sh-faq-detail__content a.btn::after, .sh-faq-detail__content a.pw-btn::after,
.pw-grid-detail__text a.btn::after, .pw-grid-detail__text a.pw-btn::after,
.pw-default__content a.btn::after, .pw-default__content a.pw-btn::after,
.sh-doc__entry-text a.btn::after, .sh-doc__entry-text a.pw-btn::after {
	content: none;
	display: none;
}

/* ==========================================================================
   Page Header — einheitlicher Hero für Detail-Seiten
   (Glossar-Term, FAQ-Detail, FAQ-Group, ...)
   ========================================================================== */
.pw-pageheader {
	/* 96px Top-Padding: einheitlich mit den Hero-Wrappern (.sh-hero, .rv-hero,
	   .ih-hero, .pw-default). Verhindert, dass der Page-Header in Detail-Seiten
	   direkt unter den sticky-Header (60px) klebt. */
	padding: 96px 0 var(--pw-space-lg);
	margin: 0 0 56px;
	border-bottom: 1px solid var(--pw-border);
}
.pw-pageheader__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--pw-text-muted);
	margin: 0 0 var(--pw-space-xl);
	transition: color 0.2s;
}
.pw-pageheader__back::before {
	content: '\2190';
	font-size: 16px;
}
.pw-pageheader__back:hover { color: var(--pw-brand); }
.pw-pageheader__eyebrow {
	font-size: 12px;
	font-weight: 700;
	color: var(--pw-brand);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 12px;
}
.pw-pageheader__title {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	color: var(--pw-text);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
}
.pw-pageheader__alt {
	font-size: 17px;
	color: var(--pw-text-secondary);
	font-weight: 500;
	margin: var(--pw-space-sm) 0 0;
}
.pw-pageheader__breadcrumb {
	margin-top: 12px;
}
.pw-pageheader__breadcrumb .sh-breadcrumb { margin: 0; }
@media (max-width: 768px) {
	.pw-pageheader { padding-top: 64px; }
}
@media (max-width: 600px) {
	.pw-pageheader { margin-bottom: 40px; }
	.pw-pageheader__back { margin-bottom: 20px; }
}

/* ==========================================================================
   Default Template — generischer Fallback für Seiten ohne eigenes Template
   ========================================================================== */
.pw-default,
.errorpage {
	padding: var(--pw-section-hero);
}
.pw-default__header {
	max-width: 760px;
	margin: 0 auto var(--pw-space-2xl);
	text-align: center;
}
.pw-default__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
	margin: 0 0 12px;
}
.pw-default__title {
	font-size: clamp(32px, 5vw, 48px);
	letter-spacing: -0.03em;
	margin: 0 0 var(--pw-space-md);
	color: var(--pw-text);
}
.pw-default__lead {
	font-size: clamp(18px, 2vw, 21px);
	line-height: 1.5;
	color: var(--pw-text-secondary);
	margin: 0;
}
.pw-default__lead p { margin: 0; }
.pw-default__content {
	max-width: 760px;
	margin: 0 auto;
}
@media (max-width: 600px) {
	.pw-default { padding: 40px 0 56px; }
	.pw-default__header { margin-bottom: var(--pw-space-xl); }
}

/* ============================================================
   PW-CARD — globale Karten-Basis
   Modulare Komponente: Background, Border, Radius, Padding, Transition,
   Hover-Lift. Page-spezifische Card-Klassen (.mp-feature-card,
   .pricing-card, .gl-term-card, .rv-card, …) erben diese Basis,
   indem im Markup beide Klassen gesetzt werden: class="pw-card mp-feature-card"
   ============================================================ */
.pw-card {
	background: var(--pw-bg);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-md);
	padding: 20px;
	transition: transform var(--pw-duration-normal) var(--pw-easing-default),
	            box-shadow var(--pw-duration-normal) var(--pw-easing-default),
	            border-color var(--pw-duration-normal) var(--pw-easing-default);
	color: inherit;
}
.pw-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pw-shadow-md);
}
.pw-card--no-hover:hover {
	transform: none;
	box-shadow: none;
}
.pw-card--accent {
	border-color: var(--pw-brand);
	border-width: 2px;
}
.pw-card--flat {
	box-shadow: none;
	padding: var(--pw-space-md);
}

/* ============================================================
   PW-INPUT — globale Form-Input-Basis
   Modulare Komponente für E-Mail, Text, Search.
   Modifier:
     .pw-input--newsletter (Pill-Form, in Footer)
     .pw-input--search (Pill-Form, in Topbar/Hero)
   ============================================================ */
.pw-input {
	display: block;
	width: 100%;
	padding: 10px 14px;
	font-size: var(--pw-fs-base);
	font-family: inherit;
	background: var(--pw-bg);
	color: var(--pw-text);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-sm);
	transition: border-color var(--pw-duration-fast) var(--pw-easing-default);
}
.pw-input:focus {
	outline: none;
	border-color: var(--pw-accent);
}
.pw-input::placeholder { color: var(--pw-text-muted); }

.pw-input--newsletter,
.pw-input--search {
	border-radius: var(--pw-radius-pill);
	padding: 10px 18px;
}

/* ============================================================
   PW-HERO — globale Hero-Basis
   Padding-Skala über Tokens. Modifier:
     .pw-hero (Default 96/0/80)
     .pw-hero--compact (48/0)
     .pw-hero--dark (Dark gradient, helle Schrift)
   Page-spezifische Hero-Klassen (.mp-hero, .nb-hero, .sh-hero,
   .ih-hero, …) können diese Basis zusätzlich nutzen.
   ============================================================ */
.pw-hero {
	padding: var(--pw-section-hero);
}
.pw-hero--compact {
	padding: var(--pw-section-compact);
}
.pw-hero--dark {
	background: var(--pw-bg-dark-gradient);
	color: var(--pw-fg);
}
.pw-hero--dark h1,
.pw-hero--dark h2 { color: var(--pw-fg); }
.pw-hero--dark p { color: var(--pw-fg-muted); }

/* ============================================================
   PW-SECTION — wiederverwendbares Standard-Padding für Sektionen
   ============================================================ */
.pw-section {
	padding: var(--pw-section-standard);
}
.pw-section--compact {
	padding: var(--pw-section-compact);
}
.pw-section--hero {
	padding: var(--pw-section-hero);
}
@media (max-width: 600px) {
	.pw-hero--compact { padding: var(--pw-space-xl) 0; }
	.pw-section { padding: 40px 0; }
	.pw-section--compact { padding: var(--pw-space-xl) 0; }
}