/* ===================================================================
   Pixelwerk Theme – Custom Overrides
   Theme-spezifische Styles für das pixelwerk Theme.
   =================================================================== */

/* ===================================================================
   Fliesstext: Grösse und Zeilenhöhe kommen aus SuluPixel › Content («Content Font Size», «Content Line Height»,
   in base.html.twig als --content-font-size und --content-line-height gesetzt). Die Blöcke setzen keine eigene
   Grösse für Fliesstext, sondern .pw-copy (bzw. .pw-lead für grössere Einleitungen). Unter 640 px gilt 90 %
   der eingestellten Grösse, wie im Plexify-Original (text-lg mobil, sm:text-xl ab 640 px).
   Absichtlich ohne Layer: schlägt die Tailwind-Utilities (text-lg, leading-…) im Element.
   =================================================================== */
:root {
    --pw-copy-size: calc(var(--content-font-size, 1rem) * .9);
    --pw-copy-leading: var(--content-line-height, 1.5);
}
@media (min-width: 640px) {
    :root { --pw-copy-size: var(--content-font-size, 1rem) }
}
.pw-copy { font-size: var(--pw-copy-size); line-height: var(--pw-copy-leading) }
.pw-lead { font-size: calc(var(--pw-copy-size) * 1.2); line-height: var(--pw-copy-leading) }

/* ===================================================================
   Schriften: alles Kanit wie auf pixelwerk.swiss (Stand Oktober 2026): Text 200, Überschriften und Buttons 400.
   Die Plexify-Variablen --font-base und --font-title sind im Theme-Tailwind auf Kanit gesetzt
   (themes/pixelwerk/assets/css/tailwind.css), die sulupixel-Blöcke nehmen Kanit aus den Theme Settings
   (headingFont). Space Grotesk, Space Mono und Roboto bleiben als Auswahl für die Theme Settings verfügbar.
   Selbst gehostet statt fonts.googleapis.com (keine IP-Übermittlung an Google).
   Dateien aus @fontsource-variable/space-grotesk 5.3.0, @fontsource/space-mono 5.3.0, @fontsource/kanit 5.3.0
   und @fontsource-variable/roboto 5.3.0, identisch mit den Google-Fonts-Dateien; nur latin und latin-ext,
   Lizenz: ../fonts/*-OFL.txt.
   Weitere Familien aus den Theme Settings lädt base.html.twig weiterhin von Google;
   wer hier eine Familie ergänzt, muss sie in base.html.twig in _localFonts eintragen.
   =================================================================== */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-latin-ext-400-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-latin-ext-700-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/kanit-latin-ext-200-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/kanit-latin-200-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/kanit-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/kanit-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/kanit-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/kanit-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/kanit-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/kanit-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/kanit-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/kanit-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/kanit-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/kanit-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

/* Schriftstärken wie auf pixelwerk.swiss: Fliesstext 200, Buttons 400 (Überschriften setzt plexify.css auf 400).
   In den Cascade-Layern von plexify.css, damit Tailwind-Klassen (font-medium usw.) weiterhin Vorrang haben. */
@layer base {
    body, p { font-weight: 200 }
}
@layer components {
    .btn { font-weight: 400 }
}

/* Enge Laufweite (tracking-tight der sulupixel-Blöcke) nur in Überschriften; Text und Buttons lesen sich mit
   normaler Laufweite besser. :not(…) erhöht die Spezifität über die Utility-Klasse. */
.tracking-tight:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) *) {
    letter-spacing: normal;
}

/* --- Layout & Utilities --- */
/* Fokus und Sprungziele nicht unter dem fixierten Header verstecken (WCAG 2.4.11):
   .main-bar-wraper ist im Zustand .is-fixed 85px hoch, plus etwas Luft */
html { scroll-padding-top: 100px }
.sulupixel-skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px; z-index: 100000; transition: top .3s }
.sulupixel-skip-link:focus { top: 0 }
/* Schalter «Bewegte Inhalte anhalten» eingeschaltet: sichtbar anders (hell mit Rahmen und Häkchen); das Häkchen hat
   einen leeren Alternativtext, der Name des Schalters bleibt gleich (Zustand über aria-pressed) */
.sulupixel-skip-link[aria-pressed="true"] { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000 }
.sulupixel-skip-link[aria-pressed="true"]::before { content: "\2713\00a0" / "" }
.sulupixel-boxed { max-width: var(--content-max-width, none); margin: 0 auto }
.sulupixel-content-boxed { max-width: var(--content-max-width, none); margin: 0 auto }
.sulupixel-fullbleed { width: 100% }
.sulupixel-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch }
.sulupixel-table-wrapper:focus-visible, [data-sulupixel-scroll-region]:focus-visible { outline: 2px solid currentColor; outline-offset: -2px }
/* Seiten ohne Blöcke (sulupixel pages/default: nur der Titel): Titel unter den Header schieben, der über dem ersten
   Block liegt (sonst stösst der Titel ans Logo) */
#main-content > .max-w-4xl.py-16:first-child { padding-top: 140px }
.dark #main-content > .max-w-4xl.py-16:first-child h1 { color: #fff }
.dark #main-content > .max-w-4xl.py-16:first-child .prose { color: var(--color-textlight) }

/* --- Navigation --- */
.sulupixel-nav-sticky { position: sticky; top: 0; z-index: 9998 }
.sulupixel-nav-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 9998 }
.sulupixel-nav-overlay-sticky { position: sticky; top: 0; z-index: 9998 }
.sulupixel-nav-overlay-sticky.is-scrolled { background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px) }

/* --- Richtext --- */
/* Lange Bezeichner in <code> (z.B. pw_services_carousel) und Wörter in Überschriften, die breiter sind als die Zeile
   («Sprungnavigation» auf 320 px), brechen um statt über den Rand zu ragen. In @layer base, damit Stile mit eigener
   Regel (Tailwind-Klasse [overflow-wrap:anywhere]) gewinnen. */
@layer base {
    #main-content code { overflow-wrap: anywhere }
    #main-content :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word }
}
.sulupixel-richtext { line-height: var(--pw-copy-leading) }
/* Richtext der sulupixel-Standardstile (Blöcke ohne pw_-Stil, ausserhalb von .pw-plexify) in der Fliesstextgrösse wie
   .pw-copy: Die Blöcke setzen text-lg, md:text-xl, leading-relaxed usw. (sulupixel-scoped.css, gleiche Spezifität und im
   @scope näher), der :not(…)-Teil hebt die Spezifität darüber. Grosse Zitate (font-heading, text-2xl und grösser, Grösse
   im style-Attribut wie im Referenz-Slider) und kleine Zusatztexte (text-sm, text-xs) behalten ihre Grösse. */
@scope (#main-content) to (.pw-plexify) {
    .sulupixel-richtext:not(.font-heading, .text-xs, .text-sm, [class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"], [style*="font-size"]) {
        font-size: var(--pw-copy-size);
        line-height: var(--pw-copy-leading);
    }
}
.sulupixel-richtext h1,
.sulupixel-richtext h2,
.sulupixel-richtext h3,
.sulupixel-richtext h4 { margin-top: 1.5em; margin-bottom: .5em }
.sulupixel-richtext p { margin-bottom: 1em }
/* Richtext-Absätze übernehmen die Textfarbe des Blocks: Die Theme-Regel p { color: bodytext } (base/global.css) machte
   sie sonst dunkel, auch wo der Block hellen Text auf dunklem Grund setzt (z.B. Beschreibung im Hero «Slide»). Nur bei
   heller Schrift (Klasse text-white oder text-white/…, nicht Varianten wie selection:text-white am body) am Richtext oder
   einem Elternelement; sonst bleibt bodytext. */
:is([class^="text-white"], [class*=" text-white"]) .sulupixel-richtext p,
.sulupixel-richtext:is([class^="text-white"], [class*=" text-white"]) p { color: inherit }
.sulupixel-richtext ul,
.sulupixel-richtext ol { margin-bottom: 1em; padding-left: 1.5em }
.sulupixel-richtext img { max-width: 100%; height: auto }

/* --- Blockfarbe Hellviolett ---
   Blöcke mit der Blockfarbe #E5DEED (Hellviolett der Vorlage, z. B. aus redaktion/landingpages) zeigen statt dessen den
   hellen Ton der Primärfarbe (--bglight, base.html.twig). sulupixel setzt die Blockfarbe inline; pw_band.html.twig
   behandelt #e5deed weiter als helle Fläche. */
.sulupixel-block-bg[style*="#e5deed" i] { background-color: var(--bglight) !important }

/* --- Block Spacing ---
   Abstand der Blöcke aus den Theme-Einstellungen (Content › Block Spacing = --block-spacing, Block Spacing Position
   «nur oben» / «oben und unten» = body.sulupixel-spacing-both), für sulupixel-Blöcke (sulupixel-scoped.css, endet an
   .pw-plexify) und Plexify-Stile gleich. Plexify-Stile setzen keine eigenen Aussenabstände; ihre <section> trägt
   .pw-spaced (Hero-Stile nicht: sie behalten ihre Abstände wie die sulupixel-Heroes). Regeln (themes/pixelwerk/BLOCKS.md):
   - oben der Blockabstand, unten nur beim letzten Block oder im Modus «oben und unten» (wie sulupixel)
   - Sektion mit eigener Fläche (.pw-band, data-pw-band, includes/partials/pw_band.html.twig): oben und unten, damit
     der Inhalt nicht an der Kante klebt; der Block davor bekommt unten den Abstand. Zwei gleiche Flächen
     nacheinander: dazwischen nur einmal der Abstand (Modus «nur oben»)
   - Trennlinie oben (.pw-line) oder Hero: der Block davor bekommt unten den Abstand
   - erster Block: Abstand unter dem überlagernden Header (--pw-header-h)
   - Spacer «beidseitig»: kein Abstand oben im folgenden Block (ausser bei einer Fläche oder Trennlinie oben)
   - leere Blöcke (rendern nichts) zählen nicht (.sulupixel-empty, base.html.twig)
   - ausserhalb der Block-Liste (z.B. Artikel): oben und unten */
:root { --pw-header-h: 105px }
.sulupixel-spaced > section:not(.pw-plexify),
.sulupixel-spaced > .sulupixel-content-boxed > section:not(.pw-plexify) { padding-top: var(--block-spacing, 6rem); padding-bottom: var(--block-spacing, 6rem) }
section.pw-spaced { padding-top: var(--block-spacing, 6rem); padding-bottom: var(--block-spacing, 6rem) }
.sulupixel-spaced > section.pw-spaced,
.sulupixel-spaced > .sulupixel-content-boxed > section.pw-spaced { padding-bottom: 0 }
.sulupixel-spaced-last > section.pw-spaced,
.sulupixel-spaced-last > .sulupixel-content-boxed > section.pw-spaced,
.sulupixel-spaced:not(:has(~ div > *)) > section.pw-spaced,
.sulupixel-spaced:not(:has(~ div > *)) > .sulupixel-content-boxed > section.pw-spaced,
body.sulupixel-spacing-both .sulupixel-spaced > section.pw-spaced,
body.sulupixel-spacing-both .sulupixel-spaced > .sulupixel-content-boxed > section.pw-spaced,
.sulupixel-spaced > section.pw-spaced.pw-band,
.sulupixel-spaced > .sulupixel-content-boxed > section.pw-spaced.pw-band { padding-bottom: var(--block-spacing, 6rem) }
/* Block vor einer Fläche, einer Trennlinie oben (.pw-line) oder einem Hero: unten der Abstand, auch bei einem
   sulupixel-Block (dessen padding-bottom:0 !important hier übersteuert wird). Leere Blöcke dazwischen (rendern nichts,
   .sulupixel-empty aus base.html.twig) werden übersprungen. Spacer (Sektion mit pt-/py-) zählen nicht als Hero. */
.sulupixel-spaced:has(+ div > section:is(.pw-band, .pw-line), + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"])) > section,
.sulupixel-spaced:has(+ div > section:is(.pw-band, .pw-line), + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section:is(.pw-band, .pw-line), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section:is(.pw-band, .pw-line), + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"]), + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div:not(.sulupixel-spaced, .sulupixel-spacer-both, .sulupixel-empty) > section:not([class^="pt-"], [class^="py-"])) > .sulupixel-content-boxed > section { padding-bottom: var(--block-spacing, 6rem) !important }
/* zwei gleiche Flächen nacheinander («nur oben»): die erste ohne Abstand unten; bei einer Blockfarbe entscheidet das
   Partial pw_band (gleiche Farbe im nächsten Block = custom-joined) */
body:not(.sulupixel-spacing-both) .sulupixel-spaced:has(> section[data-pw-band="light"], > .sulupixel-content-boxed > section[data-pw-band="light"]):has(+ div > section[data-pw-band="light"], + div > .sulupixel-content-boxed > section[data-pw-band="light"], + .sulupixel-empty + div > section[data-pw-band="light"], + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="light"], + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="light"], + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="light"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="light"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="light"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="light"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="light"]) :is(section[data-pw-band="light"]),
body:not(.sulupixel-spacing-both) .sulupixel-spaced:has(> section[data-pw-band="white"], > .sulupixel-content-boxed > section[data-pw-band="white"]):has(+ div > section[data-pw-band="white"], + div > .sulupixel-content-boxed > section[data-pw-band="white"], + .sulupixel-empty + div > section[data-pw-band="white"], + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="white"], + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="white"], + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="white"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="white"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="white"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="white"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="white"]) :is(section[data-pw-band="white"]),
body:not(.sulupixel-spacing-both) .sulupixel-spaced:has(> section[data-pw-band="dark"], > .sulupixel-content-boxed > section[data-pw-band="dark"]):has(+ div > section[data-pw-band="dark"], + div > .sulupixel-content-boxed > section[data-pw-band="dark"], + .sulupixel-empty + div > section[data-pw-band="dark"], + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="dark"], + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="dark"], + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="dark"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="dark"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="dark"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > section[data-pw-band="dark"], + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + .sulupixel-empty + div > .sulupixel-content-boxed > section[data-pw-band="dark"]) :is(section[data-pw-band="dark"]),
body:not(.sulupixel-spacing-both) #main-content .sulupixel-spaced > section[data-pw-band="custom-joined"],
body:not(.sulupixel-spacing-both) #main-content .sulupixel-spaced > .sulupixel-content-boxed > section[data-pw-band="custom-joined"] { padding-bottom: 0 !important }
/* erster Block unter dem Header */
#main-content > div:first-child > section.pw-spaced,
#main-content > div:first-child > .sulupixel-content-boxed > section.pw-spaced { padding-top: calc(var(--pw-header-h) + var(--block-spacing, 6rem)) }
/* Spacer «beidseitig» davor (nicht bei einer Fläche oder einer Trennlinie oben: der Inhalt klebte sonst an der Kante) */
.sulupixel-spacer-both + div > section.pw-spaced:not(.pw-band, .pw-line),
.sulupixel-spacer-both + div > .sulupixel-content-boxed > section.pw-spaced:not(.pw-band, .pw-line) { padding-top: 0 }
/* Fokusrahmen am letzten Bedienelement eines Blocks: Ohne Abstand unten ragt er über den Block hinaus, und der
   folgende Block (AOS macht jeden Wrapper zur eigenen Ebene) läge darüber */
#main-content > div:has(:focus-visible) { position: relative; z-index: 2 }
/* Sektionen, deren Inhalt seitlich übersteht (Slider-Spur, Deko): nur seitlich abschneiden, damit der Fokusrahmen am
   letzten Element (ohne Abstand unten) sichtbar bleibt; senkrecht ragt nichts heraus. flow-root wie vorher bei
   overflow:hidden (eigener Formatierungskontext). */
.pw-focus-clip { overflow-x: clip; overflow-y: visible; display: flow-root }

/* --- Footer Watermark --- */
.sulupixel-footer-watermark { position: relative; overflow: hidden }

/* --- Headline Fix --- */
.headline { opacity: 1 !important }

/* --- Body --- */
.pixelwerk-body { background-color: var(--page-bg, #f3f4f6); transition: background-color .3s ease, color .3s ease }
html.dark .pixelwerk-body { background-color: var(--color-dark, #0a0a23); color: #fff }

/* ===================================================================
   Header: Logo & Sticky
   =================================================================== */
.pixelwerk-logo { transition: filter .3s ease }
html.dark .pixelwerk-logo { filter: brightness(0) invert(1) }

/* Header-Light: wenn Hero dunklen Hintergrund hat */
.pixelwerk-header-light .pixelwerk-logo { filter: brightness(0) invert(1) }
.pixelwerk-header-light .site-header .menu-btn { background: rgba(255, 255, 255, .15); backdrop-filter: blur(4px) }
.pixelwerk-header-light .site-header .menu-btn span span { background: #fff }
.pixelwerk-header-light .site-header .text-secondary { color: #fff }
.pixelwerk-header-light .site-header .stroke-secondary { stroke: #fff }
.pixelwerk-header-light .site-header .text-2xl { color: #fff }

/* Sticky Header */
.site-header.is-fixed .main-bar-wraper {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    animation: pwHeaderIn .95s ease forwards;
    z-index: 9999;
}
.site-header.is-fixed .pixelwerk-logo { filter: none }
.pixelwerk-header-light .site-header.is-fixed .pixelwerk-logo { filter: none }
.site-header.is-fixed .menu-btn { background: #fff !important }
.site-header.is-fixed .menu-btn span span { background: #000 !important }
.site-header.is-fixed .text-secondary,
.site-header.is-fixed .text-2xl { color: var(--secondary, #191B1D) !important }
.site-header.is-fixed .stroke-secondary { stroke: var(--secondary, #191B1D) !important }
html.dark .site-header.is-fixed .main-bar-wraper { background: rgba(0, 0, 0, .5) }

/* Einfahren wie headerSlideDown der Vorlage (plexify.css: margin-top -150px -> 0, .95s ease), aber über transform:
   gleiches Bild, ohne das Layout in jedem Frame neu zu berechnen */
@keyframes pwHeaderIn {
    from { transform: translateY(-150px) }
    to   { transform: none }
}

/* ===================================================================
   Footer: Box Background
   =================================================================== */
.pixelwerk-footer-box { background: var(--footer-bg-color, #fff) }
html.dark .pixelwerk-footer-box { background: var(--footer-bg-color, var(--color-card, #1a1a2e)) }

/* ===================================================================
   Footer: Light Mode (kein Custom-BG)
   =================================================================== */
.pw-footer-heading { color: var(--primary, #6E5887) }
.pw-footer-title { color: #1a1a2e }
.pw-footer-link,
.pw-footer-text { color: rgba(0, 0, 0, .75) }
/* .6 statt .5: 5,7:1 auf Weiss (WCAG AA 4,5:1) */
.pw-footer-muted { color: rgba(0, 0, 0, .6) }
.pw-footer-strong { color: #1a1a2e }
.pw-footer-scrolltop { background: var(--secondary, #191B1D) }
.pw-footer-scrolltop:hover { background: #000 }
.pw-footer-arrow-fill { fill: #fff }
.pw-footer-arrow-stroke { stroke: #fff }

/* ===================================================================
   Footer: Dark Mode (kein Custom-BG)
   =================================================================== */
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-heading,
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-title { color: #fff }
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-link,
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-text { color: rgba(255, 255, 255, .7) }
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-muted { color: rgba(255, 255, 255, .5) }
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-strong { color: #fff }
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-scrolltop { background: #fff }
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-scrolltop:hover { background: var(--bglight, #E5DEED) }
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-arrow-fill { fill: var(--secondary, #191B1D) }
html.dark .sulupixel-footer-dark-text:not(.sulupixel-footer-has-bg) .pw-footer-arrow-stroke { stroke: var(--secondary, #191B1D) }
html.dark .pixelwerk-ticker-text { color: rgba(255, 255, 255, .5) }

/* ===================================================================
   Footer: Custom-BG dunkel → heller Text
   =================================================================== */
.sulupixel-footer-light-text .pw-footer-heading,
.sulupixel-footer-light-text .pw-footer-title { color: #fff }
.sulupixel-footer-light-text .pw-footer-link,
.sulupixel-footer-light-text .pw-footer-text { color: rgba(255, 255, 255, .7) }
.sulupixel-footer-light-text .pw-footer-link:hover { color: var(--primary, #6E5887) }
/* .6 statt .5: 5:1 auf #3f3f3f (WCAG AA 4,5:1) */
.sulupixel-footer-light-text .pw-footer-muted { color: rgba(255, 255, 255, .6) }
.sulupixel-footer-light-text .pw-footer-strong { color: #fff }
.sulupixel-footer-light-text .pw-footer-scrolltop { background: #fff }
.sulupixel-footer-light-text .pw-footer-scrolltop:hover { background: var(--bglight, #E5DEED) }
.sulupixel-footer-light-text .pw-footer-arrow-fill { fill: var(--secondary, #191B1D) }
.sulupixel-footer-light-text .pw-footer-arrow-stroke { stroke: var(--secondary, #191B1D) }

/* ===================================================================
   Footer: Custom-BG hell → dunkler Text
   =================================================================== */
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-heading { color: var(--primary, #6E5887) }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-title { color: #1a1a2e }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-link,
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-text { color: rgba(0, 0, 0, .75) }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-link:hover { color: var(--primary, #6E5887) }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-muted { color: rgba(0, 0, 0, .6) }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-strong { color: #1a1a2e }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-scrolltop { background: var(--secondary, #191B1D) }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-scrolltop:hover { background: #000 }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-arrow-fill { fill: #fff }
.sulupixel-footer-dark-text.sulupixel-footer-has-bg .pw-footer-arrow-stroke { stroke: #fff }

/* --- Block Spacing "oben und unten" (Theme Settings > General > Block Spacing Position) ---
   sulupixel-scoped.css setzt in @scope (#main-content) padding-bottom:0!important. Diese Regel liegt im
   selben Scope und gewinnt über die höhere Spezifität; die Body-Klasse ausserhalb des Scope-Roots wird
   über ":scope" als dessen Vorfahre abgefragt. */
@scope (#main-content) to (.pw-plexify) {
    body.sulupixel-spacing-both :scope .sulupixel-spaced > section,
    body.sulupixel-spacing-both :scope .sulupixel-spaced > .sulupixel-content-boxed > section { padding-bottom: var(--block-spacing, 6rem) !important }
}

/* ===================================================================
   Kontrast (WCAG AA 4,5:1) für Bundle-Templates, nur so weit wie nötig
   =================================================================== */
/* Karten-Metadaten (Tags/Datum in news/grid, cards, list …): text-gray-400 hat auf Weiss nur 2,5:1,
   gray-500 (#6b7280) 4,8:1. Nicht in dunklen Bereichen (.text-white, Dark Mode), dort passt gray-400. */
html:not(.dark) #main-content .text-xs.text-gray-400:not(.text-white *) { color: #6b7280 }
/* Teaser-Label über dem Titel (teaser_nav/teaser card/overlap, portfolio/about overlap): opacity-50 der
   Primärfarbe hat auf Weiss knapp 4:1, .6 ergibt mit #000 5,7:1 */
#main-content p.tracking-widest.uppercase.opacity-50[style*="--primary-color"] { opacity: .6 }

/* ===================================================================
   Bewegung: Laufbänder und Einblend-Animationen
   =================================================================== */
/* Laufbänder (Logos, Footer-Ticker) halten bei Hover an */
.animate-ticker:hover { animation-play-state: paused }

/* Reduzierte Bewegung (Systemeinstellung): keine Animationen, Inhalte sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    /* AOS: Blöcke ohne Einblenden zeigen (base.html.twig deaktiviert AOS zusätzlich per JS) */
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important }
    /* Laufbänder stehen still */
    .animate-ticker { animation: none !important }
    /* Logo-Laufband: alle Logos umbrechend zeigen, die Duplikate für die Endlosschleife ausblenden */
    .animate-ticker:not([aria-hidden="true"]) { flex-wrap: wrap; justify-content: center }
    .animate-ticker:not([aria-hidden="true"]) > [aria-hidden="true"] { display: none }
    /* Sticky Header ohne Einfahr-Animation */
    .site-header.is-fixed .main-bar-wraper { animation: none }
}

/* Fokusrahmen sofort zeigen: Links haben aus der Vorlage duration-500 für alle Eigenschaften (plexify.css, a{…}),
   sonst wächst die Outline beim Tabben über 0,5 s und ist im ersten Moment kaum sichtbar (WCAG 2.4.7). */
a:focus-visible { transition-property: none }

/* Drucken: Blöcke, die noch nicht ins Bild gescrollt wurden, stehen bei AOS noch auf opacity 0 */
@media print {
    [data-aos] { opacity: 1 !important; transform: none !important }
}

/* ===================================================================
   Formular: Feld nur bei einer Auswahl («[wenn Anderes]» im Platzhalter, _pw_form.html.twig)
   Die Zelle des Auswahlfelds (data-pw-cf-toggle) und die Zelle des Felds (data-pw-cf-when) stehen direkt
   nebeneinander im selben Raster. Ist die Option mit data-pw-cf-show nicht gewählt, fehlt das Feld ganz
   (display: none: nicht in der Tab-Reihenfolge, nicht vorgelesen, keine Lücke). Ohne :has() bleibt es sichtbar.
   Ohne @layer, damit keine Tailwind-Klasse der Zelle (plexify.css, in Ebenen) die Regel überstimmt.
   =================================================================== */
@supports selector(:has(*)) {
    [data-pw-cf-toggle]:not(:has(option[data-pw-cf-show]:checked)) + [data-pw-cf-when] { display: none }
}

/* ===================================================================
   Buttons der sulupixel-Blöcke (z. B. Hero «Zentriert»/«Slide» der Startseiten): feine weisse Linie
   wie die Kacheln. Ergänzt die Regel aus sulupixel-scoped.css (gleicher Scope und Selektor, dort ohne border).
   =================================================================== */
@scope (#main-content) to (.pw-plexify) {
    a.sulupixel-btn,
    a[style*=background-color][class*=rounded],
    button.sulupixel-btn,
    button[style*=background-color][class*=rounded] {
        border: 0.02rem solid #fff;
    }
}