/* ==========================================================================
   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. Die Textmarkierung kommt ausschliesslich per
   Opt-in dadurch, dass der Link in einem Prose-Container steht.

   Prinzip: Das Markenorange sitzt in der Unterstreichung, NICHT in
   der Schriftfarbe. Orangefarbener Text erreicht auf Weiss nur
   2,13:1 und faellt damit durch WCAG 1.4.3. Der Linktext bleibt
   deshalb schwarz, die Linie traegt die Marke.

   Prose-Container in den drei :is()-Listen erweitern, wenn weitere
   Fliesstext-Bereiche denselben Effekt bekommen sollen.
   ---------------------------------------------------------------- */
a { color: inherit; text-decoration: none; }

/* Orange Unterstreichung, im Ruhezustand sichtbar.
   Sie liegt auf ::before, nicht auf ::after: damit bleibt ::after fuer den
   Pfeil bei externen Zielen frei. */
:is(.nb-article__content, .gl-term__content, .sh-faq-detail__content,
    .pw-grid-detail__text, .pw-grid-detail__company, .pw-default__content,
    .sh-doc__entry-text, .news-content, .mp-faq__a, .sidenote__body,
    .pw-highlight__body) a:not(.btn):not(.pw-btn):not(.pw-link--soft) {
	/* Explizit --pw-text statt inherit: in Kaesten wie Sidenote, Highlight und
	   FAQ ist der Fliesstext gedimmt (#555 / --pw-text-secondary). Der Link
	   soll dort auf voller Textfarbe stehen. Hover aendert die Schrift nicht. */
	color: var(--pw-text);
	position: relative;
}
:is(.nb-article__content, .gl-term__content, .sh-faq-detail__content,
    .pw-grid-detail__text, .pw-grid-detail__company, .pw-default__content,
    .sh-doc__entry-text, .news-content, .mp-faq__a, .sidenote__body,
    .pw-highlight__body) a:not(.btn):not(.pw-btn):not(.pw-link--soft)::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 2px;
	background: var(--pw-link-rule);
}

/* Hover: die Linie laeuft nach rechts aus dem Wort heraus und kommt sofort von
   links zurueck. Der Wechsel von transform-origin in der Mitte der Keyframes
   macht aus zwei Teilbewegungen eine durchgehende; der Leermoment dazwischen
   liest sich als Bewegung, nicht als Aus und An.

   Bewusst transform statt background-size oder width: transform laeuft auf dem
   Compositor, wird also nicht in jedem Frame neu gezeichnet. Und bewusst
   Animation statt Transition, weil der Ruhezustand die volle Linie ist: beim
   Verlassen springt sie ohne Ruecklauf sofort wieder auf 100 %. */
:is(.nb-article__content, .gl-term__content, .sh-faq-detail__content,
    .pw-grid-detail__text, .pw-grid-detail__company, .pw-default__content,
    .sh-doc__entry-text, .news-content, .mp-faq__a, .sidenote__body,
    .pw-highlight__body) a:not(.btn):not(.pw-btn):not(.pw-link--soft):hover::before {
	animation: pwLinkPass 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes pwLinkPass {
	0%   { transform: scaleX(1); transform-origin: right center; }
	48%  { transform: scaleX(0); transform-origin: right center; }
	52%  { transform: scaleX(0); transform-origin: left center; }
	100% { transform: scaleX(1); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
	:is(.nb-article__content, .gl-term__content, .sh-faq-detail__content,
	    .pw-grid-detail__text, .pw-grid-detail__company, .pw-default__content,
	    .sh-doc__entry-text, .news-content, .mp-faq__a, .sidenote__body,
	    .pw-highlight__body) a:not(.btn):not(.pw-btn):not(.pw-link--soft):hover::before { animation: none; }
}

/* ----------------------------------------------------------------
   .pw-link--soft — die leise Variante
   ----------------------------------------------------------------
   Fuer dichte Kontexte, in denen die orange Linie die Zeile aufreisst:
   Tabellen, Rechner, Kleintext, Bildunterschriften. Der Rechner auf
   /blog/tco-apple-vs-windows ist der Referenzfall.

   Zwei Unterschiede zur Standardvariante:
   1. color: inherit statt --pw-text. Der Link nimmt die Schriftfarbe
      seiner Umgebung an, also z. B. --pw-text-secondary in einer
      Definitionsliste, und faellt nicht mehr aus der Zeile.
   2. Die Linie liegt auf currentColor und ist 1px statt 2px. Sie folgt
      damit automatisch derselben Farbe, auch im Dark Mode und auf
      dunklen Sektionen.

   Bewusst nicht auf Prose-Container beschraenkt: die Klasse soll
   ueberall funktionieren, wo sie im Markup gesetzt wird. Die drei
   Standardregeln oben schliessen sie per :not() aus.
   ---------------------------------------------------------------- */
a.pw-link--soft {
	color: inherit;
	position: relative;
	text-decoration: none;
}
a.pw-link--soft::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: currentColor;
}
a.pw-link--soft:hover::before {
	animation: pwLinkPass 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
	a.pw-link--soft:hover::before { animation: none; }
}

/* Externe Ziele bekommen den Pfeil nach rechts oben (U+2197). currentColor
   statt Orange: der Pfeil ist Bedeutungstraeger, kein Dekor, und muss den
   Textkontrast mittragen. Gilt auch fuer .pw-link--soft. */
:is(.nb-article__content, .gl-term__content, .sh-faq-detail__content,
    .pw-grid-detail__text, .pw-grid-detail__company, .pw-default__content,
    .sh-doc__entry-text, .news-content, .mp-faq__a, .sidenote__body,
    .pw-highlight__body) a[target="_blank"]:not(.btn):not(.pw-btn)::after {
	content: "\2197";
	margin-left: 0.14em;
	font-size: 0.85em;
	line-height: 1;
	font-weight: 600;
}

/* Bild-Links (ein Link, der ein Bild umschliesst) bekommen weder Linie
   noch Pfeil. */
a:has(img)::before,
a:has(img)::after { display: none !important; }

/* ============================================================
   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-accent-hover: #7cc4f5;       /* hellere Accent-Variante (Hover) */
	--pw-link: #378ed1;
	/* RGB-Basiswerte fuer rgba()-Nutzung. Single Source fuer Brand-Refresh:
	   muessen mit --pw-brand / --pw-accent uebereinstimmen. */
	--pw-brand-rgb: 249, 157, 27;     /* = #F99D1B */
	--pw-accent-rgb: 83, 181, 243;    /* = #53b5f3 */

	/* Schrift auf oranger Flaeche (Primary-Button, Nav-CTA, aktive Pills).
	   6,97:1 auf --pw-brand; Weiss erreicht dort nur 2,13:1. */
	--pw-on-brand: #3B2200;

	/* Fliesstext-Links: Markenorange sitzt in der Unterstreichung, nicht in der
	   Schriftfarbe. Der Linktext bleibt damit auf voller Textfarbe (16,8:1).
	   Alternative mit 3,55:1 statt 2,13:1, falls die Linie kraeftiger sein
	   soll: #C57500. */
	--pw-link-rule: var(--pw-brand);

	/* 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(var(--pw-brand-rgb),0.25);
	--pw-shadow-brand-hover: 0 8px 20px rgba(var(--pw-brand-rgb),0.3);   /* großer Lift-Hover */
	--pw-shadow-brand-glow:  0 4px 12px rgba(var(--pw-brand-rgb),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;
		/* --pw-link-rule bleibt --pw-brand: auf --pw-bg (#18181b) erreicht das
		   volle Orange 8,6:1 und braucht keine dunklere Variante. */
	}
}

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

/* --- Dark Hero — geteiltes Primitiv ---
   Derselbe blaue Verlauf wie .pw-closing (CTA/Footer) und die dunklen
   Hero-/Section-Flächen auf Home, Merlin Project und Industries: zwei
   radiale Akzente über --pw-bg-dark-gradient, plus feines Punktraster.
   Page-CSS ergänzt nur Padding und Typo (z. B. .ab-hero).
   Inhalt gehört in ein Kind mit position: relative, damit er über dem
   ::before-Raster liegt. */
.pw-hero--dark {
	position: relative;
	color: var(--pw-fg);
	background:
		radial-gradient(1000px 600px at 85% 0%, rgba(var(--pw-accent-rgb),0.12), transparent 60%),
		radial-gradient(800px 500px at 10% 100%, rgba(var(--pw-brand-rgb),0.10), transparent 60%),
		var(--pw-bg-dark-gradient);
	overflow: hidden;
}
.pw-hero--dark::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}
.pw-hero--dark h1,
.pw-hero--dark h2 { color: var(--pw-fg); }
.pw-hero--dark p { color: var(--pw-fg-muted); }

/* --- 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-sm);
	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: var(--pw-on-brand);
	border: 1px solid transparent;
	box-shadow: var(--pw-shadow-brand);
}
.btn-primary:focus, .btn-primary:visited,
.btn-orange:focus, .btn-orange:visited,
.btn-green:focus, .btn-green:visited,
.pw-btn--primary:focus, .pw-btn--primary:visited,
.nb-article__content a.btn-primary,
.nb-article__content a.btn-primary:visited,
.nb-article__content a.btn-orange,
.nb-article__content a.btn-green { color: var(--pw-on-brand); text-decoration: none; }

/* Hover kehrt den Button um, statt das Orange abzudunkeln: die Flaeche wird
   transparent, die Marke bleibt als Linie stehen, der Text uebernimmt die
   Schriftfarbe der Sektion. --pw-brand-hover kommt bei Buttons damit nicht
   mehr vor.

   Bewusst transparent und inherit statt --pw-bg und --pw-text: der Button
   steht auch auf den immer dunklen Flaechen (Hero, CTA, Newsletter-Band).
   Dort soll der Verlauf durchscheinen und der Text hell bleiben, statt dass
   eine weisse Flaeche mit schwarzer Schrift ins Bild springt. */
.btn-primary:hover,
.btn-orange:hover,
.btn-green:hover,
.pw-btn--primary:hover,
.nb-article__content a.btn-primary:hover,
.nb-article__content a.btn-orange:hover,
.nb-article__content a.btn-green:hover {
	background: transparent;
	color: inherit;
	border-color: var(--pw-brand);
	text-decoration: none;
	box-shadow: none;
}

/* ------------------------------------------------------------------
   Schrift auf oranger Flaeche — EINE Quelle fuer die ganze Site.
   ------------------------------------------------------------------
   Jedes Element, das --pw-brand oder --pw-brand-hover als Flaeche
   nutzt und ein Textlabel traegt, holt seine Schriftfarbe hier.
   Page-CSS setzt fuer diese Buttons nur noch Flaeche, Schatten und
   Geometrie, NIE mehr color: darauf achten, wenn eine neue Variante
   dazukommt, sonst faellt sie wieder auf 2,13:1 zurueck.

   .pw-btn--primary / .btn-primary / .btn-orange / .btn-green sind
   oben schon abgedeckt; kontextabhaengige Ueberschreibungen wie
   .pw-cta .pw-btn--primary oder .hp-hero-dark .pw-btn--primary
   erben von dort, weil sie kein eigenes color mehr setzen. */
.pw-newsletter__submit,
.nb-cta__btn,
.sf-search__submit,
.sh-search__submit,
.sh-tcal__btn,
.nb-hero__search-btn,
.sh-share__copy,
.rv-cta__btn { color: var(--pw-on-brand); }
/* Der Nav-CTA braucht !important: .topmenu ul li a ist mit (0,3,1) spezifischer. */
.pw-nav-cta { color: var(--pw-on-brand) !important; }

/* Dieselbe Umkehr im Hover wie bei .pw-btn--primary. */
.pw-newsletter__submit:hover,
.nb-cta__btn:hover,
.sf-search__submit:hover,
.sh-search__submit:hover,
.sh-tcal__btn:hover,
.nb-hero__search-btn:hover,
.sh-share__copy:hover,
.rv-cta__btn:hover,
.pw-nav-cta:hover {
	background: transparent;
	color: inherit;
	border-color: var(--pw-brand);
	box-shadow: none;
}
.pw-nav-cta:hover { color: inherit !important; }

/* Die Linie ist im Ruhezustand schon da, nur transparent. Sonst waechst der
   Button beim Hover um 2px und alles drumherum ruckt. */
.pw-newsletter__submit,
.nb-cta__btn,
.sf-search__submit,
.sh-search__submit,
.sh-tcal__btn,
.nb-hero__search-btn,
.sh-share__copy,
.rv-cta__btn,
.pw-nav-cta { border: 1px solid transparent; }

/* ------------------------------------------------------------------
   Outline-Buttons und Pills — EINE Quelle fuer die Zustandslogik.
   ------------------------------------------------------------------
   Vier Zustaende, site-weit identisch:

     Ruhe        Flaeche transparent/neutral, Text --pw-text
     Hover       nur die Border wird orange, Text bleibt --pw-text
     Aktiv       Flaeche --pw-brand, Text --pw-on-brand
     Aktiv+Hover unveraendert gefuellt

   Oranger Text kommt in keinem Zustand vor: auf Weiss sind das
   2,13:1. Page-CSS setzt fuer diese Elemente nur noch Geometrie
   (Padding, Radius, Schriftgroesse) und Bewegung, NIE color oder
   background. Neue Varianten hier eintragen, nicht dort loesen. */

/* Ruhe: orange Border, dunkler Text. Der Unterschied zu den Pills weiter
   unten ist nur, dass die Border schon im Ruhezustand orange ist. */
.btn-secondary,
.pw-btn--ghost,
.btn-secondary:visited,
.nb-article__content a.btn-secondary,
.nb-article__content a.pw-btn--ghost,
.nb-article__content a.btn-secondary:visited {
	background: transparent;
	color: var(--pw-text);
	border: 1px solid var(--pw-brand);
	box-shadow: none;
	text-decoration: none;
}
.btn-secondary:hover,
.pw-btn--ghost:hover,
.nb-article__content a.btn-secondary:hover,
.nb-article__content a.pw-btn--ghost:hover {
	background: var(--pw-brand);
	color: var(--pw-on-brand);
	border-color: var(--pw-brand);
	text-decoration: none;
	box-shadow: var(--pw-shadow-brand-hover);
}

/* Pills und Tabs: neutrale Border im Ruhezustand, orange erst im Hover.
   Betrifft die Features-Tabs (Merlin Project und Express), die Common
   Requests im Support, die FAQ-Filter und die Grid-Detail-Aktionen. */
.mp-tab:hover,
.sh-quick-link:hover,
.sh-faq-filter:hover,
.pw-grid-detail__btn:hover {
	border-color: var(--pw-brand);
	color: var(--pw-text);
}
/* Basis- und Modifier-Klasse zusammen notiert (0,2,0). Ohne das zweite
   Glied waeren die Modifier einklassig und wuerden von den Basisregeln in
   support.css / grid.css verlieren, die spaeter geladen werden. */
.mp-tab.active,
.sh-quick-link.sh-quick-link--primary,
.sh-faq-filter.sh-faq-filter--active,
.pw-grid-detail__btn.pw-grid-detail__btn--primary,
.mp-tab.active:hover,
.sh-quick-link.sh-quick-link--primary:hover,
.sh-faq-filter.sh-faq-filter--active:hover,
.pw-grid-detail__btn.pw-grid-detail__btn--primary:hover {
	background: var(--pw-brand);
	border-color: var(--pw-brand);
	color: var(--pw-on-brand);
}
/* Aktive Pills bleiben im Hover gefuellt und aendern sich nicht. Die Umkehr
   der Buttons waere hier falsch: ein aktiver Tab, der beim Ueberfahren weiss
   wird, liest sich als abgewaehlt. --pw-brand-hover entfaellt auch hier. */
@media (prefers-color-scheme: dark) {
	.mp-tab:hover,
	.sh-quick-link:hover,
	.sh-faq-filter:hover,
	.pw-grid-detail__btn:hover { color: var(--pw-fg); }
}

/* 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: var(--pw-brand);
	color: #fff;
}

/* Text — minimal, transparenter Hintergrund, oranger Text, KEIN Underline auch auf Hover */
.btn-text,
.nb-article__content a.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,
.nb-article__content a.btn-text:hover {
	color: var(--pw-brand);
	background: transparent;
	text-decoration: none;
	transform: none;
	box-shadow: none;
}

/* Kein Dark-Mode-Block mehr fuer Buttons: --pw-text, --pw-bg und --pw-brand
   tragen beide Modi. --pw-brand-hover wurde hier frueher als hellere Variante
   fuer Dark gebraucht und kommt bei Buttons jetzt nirgends mehr vor. */

/* --- 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);
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--pw-radius-sm);
	text-decoration: none !important;
	transition: all 0.2s;
	white-space: nowrap;
}
/* Flaeche, Rahmen und Farbe im Hover kommen aus der Button-Regel weiter oben. */

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

/* Kein Hover-Effekt auf Tabellenzeilen: es gibt bewusst keine tr:hover-Regel,
   damit jede Zeile beim Ueberfahren ihren normalen Hintergrund behaelt.
   (Zebra-Streifen .odd siehe oben.) */
table tr,
table tbody tr,
table thead tr,
table tfoot tr { transition: none; }

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

/* --- 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; }
/* Links im Kasten: Farbe und Auszeichnung kommen komplett aus der zentralen
   Link-Regel oben (--pw-text + orange Unterstreichung). Hier bewusst keine eigene Regel. */
.sidenote__figure {
	/* auto-Ränder zentrieren das Bild, sobald picturewidth es schmaler macht */
	margin: 0 auto var(--pw-space-xs);
	padding: 0;
	overflow: hidden;
	border-radius: 10px;
	background: transparent;
	border: none;
	/* Breite optional per (snippet: sidenote … picturewidth: 50) begrenzbar */
	max-width: var(--sidenote-figure-width, 100%);
}
.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; }
	/* Auf schmalen Viewports zählt jeder Pixel: begrenzte Bilder wieder voll */
	.sidenote__figure { max-width: 100%; }
}
/* ============================================================
   HIGHLIGHT — der Störer der ganzen Site.
   Grauer Kasten mit oranger Akzentlinie links, für Hinweise,
   Empfehlungen und Querverweise im Fließtext.

   Nutzung:
     (snippet: highlight text: "…")          -> Einzeiler/Absatz
     <div class="pw-highlight">…</div>       -> mehrteiliger Inhalt
     .pw-highlight--media                    -> Bild links, Text rechts

   Steht bewusst hier und nicht in blog-post.css: der Störer wird
   auch auf FAQ-, Support- und Default-Seiten gebraucht, die kein
   Page-CSS laden (siehe shared/head.php).

   Legacy-Aliase: .bp-callout(--info/--neutral), .support-recommendation
   und .merlin-recommendation rendern identisch, damit Bestandsartikel
   nicht angefasst werden müssen. Für Neues immer .pw-highlight nutzen.
   ============================================================ */
.pw-highlight,
.bp-callout,
.bp-callout--info,
.bp-callout--neutral,
.support-recommendation,
.merlin-recommendation {
	padding: 22px 24px;
	margin: var(--pw-space-lg) 0;
	background: var(--pw-bg-alt);
	border: 1px solid #e5e5ea;
	border-left: 3px solid var(--pw-brand);
	border-radius: 0 var(--pw-radius-md) var(--pw-radius-md) 0;
	color: var(--pw-text);
	overflow: hidden;
}
.pw-highlight::after,
.bp-callout::after,
.bp-callout--info::after,
.bp-callout--neutral::after,
.support-recommendation::after,
.merlin-recommendation::after {
	content: "";
	display: block;
	clear: both;
}
.pw-highlight > :first-child,
.bp-callout > :first-child { margin-top: 0; }
.pw-highlight p:last-child,
.bp-callout p:last-child,
.bp-callout--info p:last-child,
.bp-callout--neutral p:last-child,
.support-recommendation p:last-child,
.merlin-recommendation p:last-child { margin-bottom: 0; }

.pw-highlight__title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pw-text);
	margin: 0 0 6px;
	line-height: 1.3;
}
.pw-highlight__body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--pw-text);
	margin: 0;
}
.pw-highlight__body p { margin: 0 0 10px; }
.pw-highlight__body p:last-child { margin-bottom: 0; }
/* wie bei der Sidenote: Farbe und Marker kommen aus der zentralen Link-Regel */

/* Legacy-Recommendations: Hintergrund-Icon links, Box-Optik wie oben */
.support-recommendation,
.merlin-recommendation {
	min-height: 160px;
	padding-left: 192px;
	background-repeat: no-repeat;
	background-position: 24px center;
	background-size: 140px auto;
}
.support-recommendation {
	background-image: url("/assets/images/support/support.png");
}
.merlin-recommendation {
	background-image: url("/assets/images/merlin-project/icon_merlin-project.png");
}

/* Media-Variante: Bild links, Text rechts daneben */
.pw-highlight--media,
.bp-callout--media {
	display: flex;
	align-items: flex-start;
	gap: var(--pw-space-lg);
	flex-wrap: nowrap;
}
.pw-highlight--media .pw-highlight__media,
.pw-highlight--media figure.pw-highlight__media,
.bp-callout--media .bp-callout__media,
.bp-callout--media figure.bp-callout__media {
	flex: 0 0 200px;
	max-width: 200px;
	margin: 0;
	padding: 0;
	float: none;
}
.pw-highlight--media .pw-highlight__media img,
.bp-callout--media .bp-callout__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--pw-radius-sm);
	margin: 0;
}
.pw-highlight--media .pw-highlight__body,
.bp-callout--media .bp-callout__body {
	flex: 1 1 auto;
	min-width: 0;
}
.pw-highlight--media .pw-highlight__body > :first-child,
.bp-callout--media .bp-callout__body > :first-child { margin-top: 0; }
.pw-highlight--media .pw-highlight__body > :last-child,
.bp-callout--media .bp-callout__body > :last-child { margin-bottom: 0; }

/* Float-Variante für reine .alignleft/.alignright Bilder ohne --media-Wrapper */
.pw-highlight:not(.pw-highlight--media) .alignleft,
.bp-callout:not(.bp-callout--media) .alignleft,
.bp-callout--info:not(.bp-callout--media) .alignleft,
.bp-callout--neutral:not(.bp-callout--media) .alignleft,
.support-recommendation .alignleft,
.merlin-recommendation .alignleft {
	float: left;
	margin: 0 18px var(--pw-space-sm) 0;
	max-width: 140px;
}
.pw-highlight:not(.pw-highlight--media) .alignright,
.bp-callout:not(.bp-callout--media) .alignright,
.bp-callout--info:not(.bp-callout--media) .alignright,
.bp-callout--neutral:not(.bp-callout--media) .alignright,
.support-recommendation .alignright,
.merlin-recommendation .alignright {
	float: right;
	margin: 0 0 var(--pw-space-sm) 18px;
	max-width: 140px;
}
.pw-highlight figure.alignleft,
.pw-highlight figure.alignright,
.bp-callout figure.alignleft,
.bp-callout figure.alignright,
.bp-callout--info figure.alignleft,
.bp-callout--info figure.alignright,
.bp-callout--neutral figure.alignleft,
.bp-callout--neutral figure.alignright,
.support-recommendation figure.alignleft,
.support-recommendation figure.alignright,
.merlin-recommendation figure.alignleft,
.merlin-recommendation figure.alignright { margin-bottom: 0; }
.pw-highlight .alignleft img,
.pw-highlight .alignright img,
.bp-callout .alignleft img,
.bp-callout .alignright img,
.bp-callout--info .alignleft img,
.bp-callout--info .alignright img,
.bp-callout--neutral .alignleft img,
.bp-callout--neutral .alignright img,
.support-recommendation .alignleft img,
.support-recommendation .alignright img,
.merlin-recommendation .alignleft img,
.merlin-recommendation .alignright img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0;
}

@media (max-width: 600px) {
	.pw-highlight,
	.bp-callout,
	.bp-callout--info,
	.bp-callout--neutral { padding: 18px 18px 18px 20px; }
	.pw-highlight--media,
	.bp-callout--media { flex-wrap: wrap; gap: 14px; }
	.pw-highlight--media .pw-highlight__media,
	.pw-highlight--media figure.pw-highlight__media,
	.bp-callout--media .bp-callout__media,
	.bp-callout--media figure.bp-callout__media { flex: 0 0 auto; max-width: 160px; }
	.support-recommendation,
	.merlin-recommendation {
		min-height: 0;
		padding-left: 22px;
		padding-top: 140px;
		background-position: 24px 22px;
		background-size: 96px auto;
	}
}

@media (prefers-color-scheme: dark) {
	.pw-highlight,
	.bp-callout,
	.bp-callout--info,
	.bp-callout--neutral,
	.support-recommendation,
	.merlin-recommendation {
		background-color: var(--pw-dark-1);
		border-color: var(--pw-dark-3);
		border-left-color: var(--pw-brand-hover);
		color: var(--pw-fg);
	}
	.pw-highlight__body { color: var(--pw-text-secondary); }
	.support-recommendation {
		background-image: url("/assets/images/support/support_dark.png");
	}
	.merlin-recommendation {
		background-image: url("/assets/images/merlin-project/icon_merlin-project_dark.png");
	}
}

@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__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; }

/* Linkfarbe fuer alle Prose-Container: siehe zentrale Link-Regel ganz oben.
   Hier stand frueher color: var(--pw-brand) — oranger Linktext erreicht auf
   Weiss nur 2,13:1 und faellt durch WCAG 1.4.3. */

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