/**
 * Webstudio – Design-Datei des Kind-Templates von „basis“
 * @license GNU General Public License version 2 or later
 *
 * Reduzierte Fassung (webstudio-v2): nur Schwarz-Weiß, weißer Hintergrund, keine Farbe. Geist und Geist Mono,
 * eng gesetzte Überschriften (Gewicht 500, nie fett), volle Breite mit breitem Seitenrand, Knöpfe leicht abgerundet.
 *
 * Template-Einstellungen dazu: Designvorlage „Kontrast“ (dunkle Bänder), Schrift „System“
 * (basis lädt dann weder Inter noch Outfit vor; Geist setzt diese Datei mit !important gegen die Inline-Werte).
 *
 * Die Token-Namen (--ui-color-accent, --ui-accent-ink …) stammen aus basis; hier tragen sie Schwarz bzw. Weiß.
 */

/* Schriften: lokal, SIL Open Font License (fonts/LICENSE-geist.txt); variable Schnitte, je Familie zwei Dateien */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-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: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-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: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-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: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-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;
}

@layer design {
  /* ================================================================ Tokens hell: Schwarz-Weiß, weißer Hintergrund
     Keine Farbe. Was in der orangen Fassung Akzent war, ist hier Schwarz (Flächen, Linien, Quadrate) bzw. Grau
     (Schluss großer Überschriften, .ws-akzent). Kontraste: Text #111 auf Weiß 18,9:1, Grau #6b6b6b auf Weiß 5,3:1. */
  :root {
    --ui-color-accent: #111111;
    --ui-color-on-accent: #ffffff;
    --ui-accent-strong: #111111;
    --ui-accent-ink: #111111;
    --ui-accent-soft: #ffffff;
    --ws-akzent-text: #6b6b6b;

    --ui-color-action: #111111;
    --ui-color-on-action: #ffffff;
    --ui-color-action-hover: #3a3a3a;

    --ui-color-bg: #ffffff;
    --ui-color-surface: #f4f4f4;
    --ui-color-surface-2: #ffffff;
    --ui-color-text: #111111;
    --ui-color-heading: #111111;
    --ui-color-text-muted: #5c5c5c;
    --ui-color-border: #e4e4e4;
    --ui-color-border-strong: #c2c2c2;
    --ui-color-link: #111111;
    --ui-color-link-hover: #5c5c5c;

    /* Signalfarben ohne Farbe: Abstufungen von Schwarz bis Hellgrau (Bedeutung trägt der Text daneben) */
    --ui-color-dot-red: #111111;
    --ui-color-dot-orange: #8a8a8a;
    --ui-color-dot-green: #d0d0d0;

    /* Dunkle Bänder (Hinweisleiste, Fuß) */
    --ui-band-bg: #111111;
    --ui-band-deep: #111111;
    --ui-color-primary: var(--ui-band-bg);
    --ui-color-on-primary: #ffffff;

    /* Eigene Werte */
    --ws-karte: #ffffff;
    /* Fehlerzustand von Formularfeldern: kräftiges Rot (auf Weiß 6,5:1) – die einzige Farbe im Schwarz-Weiß-Stil */
    --ws-fehler: #b3261e;

    /* Schrift: !important schlägt die Inline-Werte der Einstellung „System“ (außerhalb der Ebenen) */
    --ui-font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    --ui-font-heading: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    --ui-font-mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    --ui-text-base: 1rem;
    --ui-text-lg: 1.125rem;
    --ui-text-h1: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
    --ui-text-h2: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    --ui-text-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --ui-leading: 1.6;
    --ui-leading-tight: 0.98;

    /* Form: leicht abgerundet, Knöpfe fast eckig (keine Pille) */
    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 8px;
    --ui-radius-pill: 999px;
    --ui-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.16);
    --ui-focus-ring: 0 0 0 3px rgb(0 0 0 / 0.3);

    /* Volle Breite: kein schmaler Container, nur Seitenrand (1,5 / 2,5 / 4 rem) */
    --ui-container: 160rem;
    --ui-gutter: 1.5rem;

    color-scheme: light;
  }

  @media (min-width: 48rem) { :root { --ui-gutter: 2.5rem; } }
  @media (min-width: 80rem) { :root { --ui-gutter: 4rem; } }

  /* ================================================================ Tokens dunkel (fest gewählt oder System): umgekehrt */
  :root[data-color-scheme="dark"] {
    --ui-color-accent: #f2f2f2;
    --ui-color-on-accent: #111111;
    --ui-accent-strong: #f2f2f2;
    --ui-accent-ink: #f2f2f2;
    --ws-akzent-text: #9a9a9a;
    --ui-color-action: #f2f2f2;
    --ui-color-on-action: #111111;
    --ui-color-action-hover: #cfcfcf;
    --ui-color-bg: #0e0e0e;
    --ui-color-surface: #1a1a1a;
    --ui-color-surface-2: #161616;
    --ui-color-text: #f2f2f2;
    --ui-color-heading: #f2f2f2;
    --ui-color-text-muted: rgb(242 242 242 / 0.7);
    --ui-color-border: rgb(242 242 242 / 0.14);
    --ui-color-border-strong: rgb(242 242 242 / 0.3);
    --ui-color-link: #f2f2f2;
    --ui-color-link-hover: rgb(242 242 242 / 0.7);
    --ui-color-dot-red: #f2f2f2;
    --ui-color-dot-orange: #8a8a8a;
    --ui-color-dot-green: #3a3a3a;
    --ui-band-bg: #000000;
    --ui-band-deep: #000000;
    --ui-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.6);
    --ui-focus-ring: 0 0 0 3px rgb(255 255 255 / 0.35);
    --ws-karte: #161616;
    --ws-fehler: #ff8a80;
    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] {
      --ui-color-accent: #f2f2f2;
      --ui-color-on-accent: #111111;
      --ui-accent-strong: #f2f2f2;
      --ui-accent-ink: #f2f2f2;
      --ws-akzent-text: #9a9a9a;
      --ui-color-action: #f2f2f2;
      --ui-color-on-action: #111111;
      --ui-color-action-hover: #cfcfcf;
      --ui-color-bg: #0e0e0e;
      --ui-color-surface: #1a1a1a;
      --ui-color-surface-2: #161616;
      --ui-color-text: #f2f2f2;
      --ui-color-heading: #f2f2f2;
      --ui-color-text-muted: rgb(242 242 242 / 0.7);
      --ui-color-border: rgb(242 242 242 / 0.14);
      --ui-color-border-strong: rgb(242 242 242 / 0.3);
      --ui-color-link: #f2f2f2;
      --ui-color-link-hover: rgb(242 242 242 / 0.7);
      --ui-color-dot-red: #f2f2f2;
      --ui-color-dot-orange: #8a8a8a;
      --ui-color-dot-green: #3a3a3a;
      --ui-band-bg: #000000;
      --ui-band-deep: #000000;
      --ui-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.6);
      --ui-focus-ring: 0 0 0 3px rgb(255 255 255 / 0.35);
      --ws-karte: #161616;
      --ws-fehler: #ff8a80;
      color-scheme: dark;
    }
  }

  /* ================================================================ Grundlagen */
  html { background-color: var(--ui-color-bg); scroll-behavior: smooth; }
  body { font-family: var(--ui-font-body); }

  /* Klickbare Elemente zeigen die Hand */
  :is(button:not(:disabled), [role="button"], summary, label:has(> input[type="checkbox"]), input[type="checkbox"], input[type="radio"], input[type="file"]) { cursor: pointer; }
  /* Knöpfe in der Seitenschrift statt der Browser-Schrift (Arial); nur die Familie, Größen bleiben bei den Bausteinen */
  button { font-family: inherit; }

  /* Überschriften: Gewicht 500, eng gesetzt, nie fett */
  :is(h1, .h1, h2, .h2) { font-weight: 500; letter-spacing: -0.045em; line-height: var(--ui-leading-tight); text-wrap: balance; }
  :is(h3, .h3) { font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
  :is(h4, h5, h6) { font-weight: 500; letter-spacing: -0.01em; }
  :is(strong, b) { font-weight: 600; }

  /* Schluss einer Überschrift in Grau (nur große Schrift): <span class="ws-akzent">…</span> */
  .ws-akzent { color: var(--ws-akzent-text); }

  /* Kennung über Abschnitten: ■ 01 / LEISTUNGEN */
  .ws-kennung {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    color: var(--ui-color-text-muted);
    font-family: var(--ui-font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .ws-kennung::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--ui-color-accent); }
  .ws-kennung--akzent { color: var(--ui-accent-ink); }

  /* Einleitung und Fließtext: lesbare Zeilenlänge trotz voller Breite (rund 75–80 Zeichen; „ch“ misst bei Geist die
     breite Ziffer 0 und ergäbe über 100 Zeichen, darum feste rem-Werte: 36rem bei 16 px, 40rem bei 18 px) */
  .ww-lead, .ws-lead { max-width: 40rem; color: var(--ui-color-text-muted); font-size: var(--ui-text-lg); }
  .ws-textbreite { max-width: 36rem; }

  /* Mono-Hinweis, z. B. „Wartung, ab 49 € im Monat“ */
  .ws-mono { font-family: var(--ui-font-mono); font-size: 0.875rem; }

  /* ================================================================ Knöpfe: Pille, Haupt gefüllt, Neben mit Rahmen */
  /* balance: bricht ein langer Knopftext doch um, werden beide Zeilen etwa gleich lang */
  :is(.ww-btn, a.ww-btn, .btn) { font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
  :is(.ww-btn--outline, a.ww-btn--outline, .btn-secondary) {
    border-color: var(--ui-color-border-strong);
    background: transparent;
    color: var(--ui-color-heading);
  }
  :is(.ww-btn--outline, a.ww-btn--outline, .btn-secondary):hover {
    border-color: var(--ui-color-heading);
    background: transparent;
    color: var(--ui-color-heading);
  }

  /* ================================================================ Karten: Rahmen, Off-White, beim Überfahren anheben */
  :is(a.ww-entry, .ww-tile:not(.ww-tile--navy), .ui-card, .ww-quote) {
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: var(--ws-karte);
    box-shadow: none;
  }
  :is(a.ww-entry, a.ww-card, .ws-karte--link) {
    transition: transform 0.3s var(--ui-ease), border-color 0.3s var(--ui-ease), box-shadow 0.3s var(--ui-ease);
  }
  :is(a.ww-entry, a.ww-card, .ws-karte--link):hover {
    transform: translateY(-4px);
    border-color: var(--ui-color-accent);
    box-shadow: var(--ui-shadow);
  }

  /* ================================================================ Kopf */
  .ui-header {
    background: var(--ui-color-bg);
    border-bottom: 1px solid var(--ui-color-border);
    transition: transform 0.35s ease, background-color 0.3s ease;
  }
  .ui-header.is-scrolled {
    background: color-mix(in srgb, var(--ui-color-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  /* Tastaturnutzer sehen den Kopf immer */
  .ui-header:focus-within { transform: none !important; }
  .ui-header__inner { min-height: 4.5rem; }

  /* Marke Jomluna: Zeichen (Kreis mit Mond als Linie, wie der Hell-/Dunkel-Knopf) + Name als Text.
     Das Zeichen ist eine Maske in der Farbe des Schriftzugs – nachtblau, schwarz oder im dunklen Modus weiß.
     Gleiches Zeichen als Favicon: media/images/favicon.svg. Quelle: entwuerfe/logo (Entwurf L, Schwarz-Weiß). */
  .ui-brand { flex-direction: row; align-items: center; gap: 0.65rem; }
  .ui-brand:not(.has-mark):not(:has(.ui-brand__logo))::before {
    content: "";
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    background: currentColor;
    -webkit-mask: var(--ws-marke) center / contain no-repeat;
    mask: var(--ws-marke) center / contain no-repeat;
  }
  .ui-brand {
    --ws-marke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 48 48' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='22' stroke-width='3.6'/%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z' transform='translate(17.6 17.6) scale(1.2)' stroke-width='2.5'/%3E%3C/svg%3E");
  }
  .ui-brand__title { font-family: var(--ui-font-body); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.035em; }
  /* Seit 03.11.2026 Logo als Schriftzug-Datei (Template-Stil → Marke: jomluna-schriftzug.svg, Jom schwarz, luna gelb):
     dann ohne Mond-Zeichen. Ohne Logo-Datei erscheint wieder Mond + Text wie vorher. */
  .ui-brand:has(.ui-brand__logo)::before { display: none; }
  .ui-brand__logo { width: auto; height: 2.2rem; max-height: none; }
  @media (max-width: 47.99rem) { .ui-brand__logo { height: 1.75rem; } }

  .ui-scheme-toggle { border-color: var(--ui-color-border); background: transparent; }

  /* Mega-Menü (Modul-CSS liegt außerhalb der Ebenen → !important) */
  .ext-megamenu .emm-link1 { font-weight: 450 !important; letter-spacing: -0.01em; }
  .ext-megamenu .emm-item--cta > .emm-link1 {
    padding: 0.55rem 1.25rem !important;
    border-radius: var(--ui-radius-pill) !important;
    background: var(--ui-color-action) !important;
    color: var(--ui-color-on-action) !important;
    font-weight: 600 !important;
  }
  .ext-megamenu .emm-item--cta > .emm-link1:hover { background: var(--ui-color-action-hover) !important; }
  .ext-megamenu .emm-group-title {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    color: var(--ui-color-text-muted) !important;
    font-family: var(--ui-font-mono) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
  }
  .ext-megamenu .emm-group-title::before { content: ""; width: 0.375rem; height: 0.375rem; background: var(--ui-color-accent); }
  .ext-megamenu .emm-sublink-title { font-weight: 500 !important; }
  .ext-megamenu .emm-sublink-desc { color: var(--ui-color-text-muted) !important; font-size: 0.875rem !important; }
  .ext-megamenu .emm-promo { border-radius: var(--ui-radius) !important; background: var(--ui-color-surface) !important; }
  .ext-megamenu .emm-promo-title { font-size: 1.5rem !important; font-weight: 500 !important; letter-spacing: -0.025em; line-height: 1.15; }
  .ext-megamenu .emm-promo-btn { color: var(--ui-accent-ink) !important; font-weight: 600 !important; }

  /* ================================================================ Hinweisleiste oben (dunkles Band) */
  .ui-notice .basis-hinweis {
    background: var(--ui-band-bg) !important;
    color: rgb(245 243 239) !important;
    font-size: 0.875rem !important;
  }
  .ui-notice .basis-hinweis__inner { max-width: none !important; padding-inline: var(--ui-gutter) !important; }
  .ui-notice .basis-hinweis__text { display: flex; flex: 1; flex-wrap: wrap; gap: 0.25rem 1.5rem; justify-content: space-between; }
  .ui-notice .basis-hinweis__text p { margin: 0; }
  .ui-notice .basis-hinweis a { color: inherit !important; text-decoration: none !important; }
  .ui-notice .basis-hinweis a:hover { text-decoration: underline !important; }

  /* ================================================================ Bereiche */
  .ui-body { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
  .ui-section.is-muted { background: var(--ui-color-surface); }

  /* Beitragstexte: Zeilenlänge rund 78 Zeichen (36rem), Überschriften etwas breiter; Blöcke (Raster, Karten,
     Tabellen) dürfen breiter. Antworten im FAQ-Block ebenso. */
  .com-content-article__body > :is(p, ul, ol, blockquote, dl, details):not([class]),
  .ui-main .item-page > :is(p, ul, ol),
  .ww-faq details > :is(p, ul, ol) { max-width: 36rem; }
  .com-content-article__body > :is(h2, h3, h4):not([class]) { max-width: 46rem; }
  .com-content-article__body > h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); margin-top: 2.5em; }
  .com-content-article__body > h3 { margin-top: 2em; }
  .com-content-article__body a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

  /* Tabellen (Preise): bei Bedarf waagrecht scrollbar statt die Seite zu verbreitern */
  .ws-tabelle { max-width: 100%; margin-top: 1.5rem; overflow-x: auto; }
  .ws-tabelle:focus-visible { outline: 2px solid var(--ui-color-heading); outline-offset: 2px; }
  .com-content-article__body table { width: 100%; max-width: 70rem; border-collapse: collapse; font-size: 0.95rem; }
  /* Tabellen mit drei und mehr Spalten (Wartungspakete): Mindestbreite, am Handy waagrecht verschiebbar statt
     zusammengequetscht. Jede Wertespalte mindestens 8rem, damit kurze Werte („48 Std.“, „1 Std. im Monat“) nicht
     umbrechen; lange Beschreibungen dürfen umbrechen. Zweispaltige Tabellen mit langen Texten bleiben fließend. */
  .com-content-article__body table:has(th:nth-child(3), td:nth-child(3)) { min-width: 44rem; }
  .com-content-article__body table:has(th:nth-child(3), td:nth-child(3)) :is(th, td):first-child { min-width: 10rem; }
  .com-content-article__body table:has(th:nth-child(3), td:nth-child(3)) :is(th, td):not(:first-child) { min-width: 8rem; }
  .com-content-article__body :is(th, td) { padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--ui-color-border); text-align: start; vertical-align: top; }
  .com-content-article__body th { font-weight: 500; }
  /* Zweispaltige Preistabellen: Preisspalte nicht schmaler als 8rem („249 € je Termin“ bricht sonst Wort für Wort) */
  .com-content-article__body table:not(:has(th:nth-child(3), td:nth-child(3))) :is(th, td):last-child:not(:first-child) { min-width: 8rem; }

  /* Wartungstabelle (/preise): Preiszeilen hervorgehoben, Spalte „Standard“ leicht eingefärbt; am Handy bleibt
     die erste Spalte beim Wischen stehen, ein Hinweis sagt, dass Standard und Komplett rechts folgen */
  .ws-tabelle--pakete .ws-paket__marke { display: inline-block; margin-left: 0.25rem; vertical-align: 0.1em; }
  .ws-tabelle--pakete :is(th, td):nth-child(3) { padding-left: 0.75rem; background: var(--ui-color-surface); }
  .ws-tabelle--pakete th { font-weight: 600; }
  .ws-tabelle--pakete .ws-tabelle__preis td { font-weight: 600; }
  .ws-tabelle--pakete .ws-tabelle__preis td:not(:first-child) { font-size: 1.25rem; letter-spacing: -0.02em; }
  .ws-tabelle__wischen { display: none; margin: 1.5rem 0 0; color: var(--ui-color-text-muted); font-family: var(--ui-font-mono); font-size: 0.8125rem; }
  .ws-tabelle__wischen + .ws-tabelle { margin-top: 0.5rem; }
  @media (max-width: 47.99rem) {
    .ws-tabelle__wischen { display: block; }
    .ws-tabelle--pakete :is(th, td):first-child { position: sticky; left: 0; z-index: 1; min-width: 9rem; max-width: 9rem; background: var(--ui-color-bg); box-shadow: 6px 0 8px -6px rgb(0 0 0 / 0.25); }
  }

  /* ================================================================ Beitrag: Kopf, Bild, Projektdaten */
  .ws-beitrag__kopf { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .ws-beitrag__kopf h1, .ws-uebersicht__kopf h1 { margin: 0; font-size: var(--ui-text-h1); }
  @media (min-width: 64rem) {
    .ws-beitrag__kopf.has-bild { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  }
  .ws-beitrag__bild { margin: 2rem 0 0; }
  @media (min-width: 64rem) { .ws-beitrag__bild { margin: 0; } }
  .ws-beitrag__bild img, .ws-beitrag__breitbild img { display: block; width: 100%; height: auto; border-radius: var(--ui-radius); }
  .ws-beitrag__breitbild { max-width: 70rem; margin: 0 0 3rem; }
  .com-content-article__body .ws-bild { max-width: 56rem; margin: 2.5rem 0; }
  .com-content-article__body .ws-bild img { display: block; width: 100%; height: auto; border-radius: var(--ui-radius); }

  .ws-beitrag__titel .ws-lead { margin: 1.5rem 0 0; }
  /* Leistungen: Knöpfe im Kopf; das große Icon zeigt nur die Variante „Joomla-Farben“ (user.css) */
  .ws-beitrag__titel .ww-actions { margin-top: 2rem; }
  .ws-beitrag__skizze { display: none; }

  .ws-projektdaten { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: 0 0 2.5rem; padding: 1.25rem 0; border-block: 1px solid var(--ui-color-border); }
  .ws-projektdaten dt { margin-bottom: 0.25rem; color: var(--ui-color-text-muted); font-family: var(--ui-font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .ws-projektdaten dd { margin: 0; }

  .ws-kennzahlen { margin-bottom: 3rem; }
  .ws-kennzahlen .ww-kpi { padding: 1.5rem 1.75rem; }
  .ws-kennzahlen .ww-kpi__value { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); font-weight: 500; letter-spacing: -0.04em; }
  .ws-kennzahlen .ww-kpi p { margin: 0.25rem 0 0; color: var(--ui-color-text-muted); }

  /* ================================================================ Übersichten */
  .ws-uebersicht__kopf { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
  .ws-uebersicht__kopf .ws-lead { margin-top: 1.5rem; }
  .ws-uebersicht__kopf .ws-lead p { margin: 0; }

  .ws-gruppe + .ws-gruppe { margin-top: 3.5rem; }
  .ws-karten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  .ws-karte {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: var(--ws-karte);
    color: var(--ui-color-text);
    text-decoration: none;
  }
  .ws-karte:hover { color: var(--ui-color-text); }
  .ws-karte__titel { margin: 0; font-size: 1.5rem; }
  .ws-karte__text { display: block; flex: 1; margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }
  .ws-karte__hinweis { margin: 2rem 0 0; color: var(--ui-accent-ink); }

  .ws-karte--bild { padding: 0; overflow: hidden; }
  .ws-karte__bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ui-color-surface); }
  .ws-karte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 0.6s var(--ui-ease); }
  .ws-karte--bild:hover .ws-karte__bild img { scale: 1.03; }
  .ws-karte__inhalt { display: flex; flex: 1; flex-direction: column; padding: 1.75rem 2rem 2rem; }
  .ws-karte__inhalt .ws-kennung { margin-bottom: 1rem; }
  @media (min-width: 64rem) { .ws-karten--projekte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .ws-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
  .ws-filter[hidden] { display: none; }
  .ws-filter__knopf {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-color-heading);
    font: inherit;
    font-size: 0.9rem;
  }
  .ws-filter__knopf:hover { border-color: var(--ui-color-heading); }
  .ws-filter__knopf[aria-pressed="true"] { border-color: var(--ui-color-heading); background: var(--ui-color-heading); color: var(--ui-color-bg); }
  .ws-karten [hidden] { display: none; }

  .ws-newsliste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-color-border); }
  .ws-newsliste__eintrag { position: relative; display: grid; gap: 1rem 3rem; padding-block: 2rem; border-bottom: 1px solid var(--ui-color-border); }
  @media (min-width: 48rem) { .ws-newsliste__eintrag { grid-template-columns: 8rem minmax(0, 1fr) 16rem; align-items: start; } }
  .ws-newsliste__datum { padding-top: 0.4rem; color: var(--ui-color-text-muted); }
  .ws-newsliste__text h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; }
  .ws-newsliste__text h2 a { color: var(--ui-color-heading); text-decoration: none; }
  /* Ganze Zeile klickbar über den Titel-Link */
  .ws-newsliste__text h2 a::after { content: ""; position: absolute; inset: 0; }
  .ws-newsliste__text p { max-width: 36rem; margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }
  .ws-newsliste__mehr { color: var(--ui-accent-ink) !important; font-weight: 600; }
  .ws-newsliste__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ui-radius-sm); }
  .ws-newsliste__eintrag:hover h2 a { color: var(--ui-accent-ink); }

  /* ================================================================ Startseite: Startbereich (Modul auf „hero“) */
  .ui-area--hero.is-full .ui-section { padding-block: 0; }
  .ws-start { position: relative; overflow: hidden; padding-bottom: 4rem; }
  .ws-start__text { position: relative; z-index: 2; padding: 3.5rem var(--ui-gutter) 0; }
  .ws-start__text h1 { margin: 2rem 0 0; font-size: clamp(3rem, 1.6rem + 5vw, 4.5rem); }
  .ws-start__text .ws-lead { margin-top: 2.5rem; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); }
  .ws-start__text .ww-actions { margin-top: 2.5rem; }
  .ws-start__bild { position: relative; width: 175%; margin: 2.5rem 0 0 -75%; }
  @media (min-width: 40rem) { .ws-start__bild { width: 140%; margin-left: -40%; } }
  @media (min-width: 80rem) {
    .ws-start { display: flex; align-items: center; min-height: calc(100svh - 7rem); padding-bottom: 0; }
    /* Verlauf von links in den Seitenhintergrund, damit der Text lesbar bleibt */
    .ws-start::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to right, var(--ui-color-bg) 0%, var(--ui-color-bg) 30%, color-mix(in srgb, var(--ui-color-bg) 75%, transparent) 40%, transparent 56%);
      pointer-events: none;
    }
    .ws-start__text { max-width: calc(42% + var(--ui-gutter)); padding-top: 0; pointer-events: none; }
    .ws-start__text > * { pointer-events: auto; }
    .ws-start__text h1 { font-size: clamp(3.5rem, 1rem + 3.4vw, 4.5rem); }
    .ws-start__bild { position: absolute; right: 0; bottom: 0; width: 112%; margin: 0; }
  }

  .ws-laptop { position: relative; aspect-ratio: 1344 / 576; }
  .ws-laptop__foto { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
  .ws-laptop__skizze { position: absolute; color: var(--ui-color-heading); }
  .ws-laptop__skizze svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .ws-laptop__skizze [data-fuellen] { fill: var(--ui-color-accent); }
  /* Beim Malen ersetzt der Stift den Mauszeiger; ab 1280 px malt auch der Finger (darunter bleibt Wischen frei) */
  .ws-laptop__skizze[data-modus="malen"] svg { cursor: none; }
  @media (min-width: 80rem) and (prefers-reduced-motion: no-preference) { .ws-laptop__skizze svg { touch-action: none; } }

  /* Wörter großer Überschriften gleiten aus einer Maske (design.js teilt sie auf) */
  .ws-w { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  /* Lange deutsche Wörter („Geschäftsbedingungen“) dürfen in großen Überschriften getrennt werden, kurze nicht
     (sonst trennt Chrome mit deutschem Wörterbuch „Up-dates“, „War-tung“; der Testbrowser hat kein Wörterbuch) */
  :is(h1, .ws-ueber__satz) { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
  /* max-width: ein einzelnes langes Wort („Datenschutzerklärung“ am Handy) wird getrennt statt abgeschnitten */
  .ws-w > span { display: inline-block; max-width: 100%; animation: ws-wort 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.1s + var(--w, 0) * 60ms); }
  @keyframes ws-wort { from { translate: 0 110%; } }
  .ws-laptop__blende { position: absolute; inset-inline: 0; pointer-events: none; }
  .ws-laptop__blende--oben { top: 0; height: 25%; background: linear-gradient(to bottom, var(--ui-color-bg), transparent); }
  .ws-laptop__blende--unten { bottom: 0; height: 17%; background: linear-gradient(to top, var(--ui-color-bg), transparent); }
  :root[data-color-scheme="dark"] .ws-laptop__foto { filter: brightness(0.5) saturate(0.85); }
  @media (prefers-color-scheme: dark) { :root[data-color-scheme="auto"] .ws-laptop__foto { filter: brightness(0.5) saturate(0.85); } }

  /* ================================================================ Startseite: Abschnitte */
  .ws-startseite .ui-body { padding-top: 0; }
  .ws-startseite .com-content-article__body > p:empty { display: none; }
  .ws-abschnitt { margin: clamp(5rem, 3rem + 5vw, 8rem) 0 0; }
  .ws-abschnitt > h2 { max-width: 20ch; margin: 0 0 3.5rem; font-size: var(--ui-text-h2); }
  .ws-abschnitt > .ww-lead { margin: -2rem 0 3rem; }
  .ws-abschnitt--linie { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); padding-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); border-top: 1px solid var(--ui-color-border); }
  /* Abschnitte mit Knopf rechts neben der Überschrift (Projekte, News) */
  .ws-abschnitt--knopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: end; }
  .ws-abschnitt--knopf > :not(.ws-abschnitt__knopf) { grid-column: 1 / -1; }
  .ws-abschnitt--knopf > .ws-kennung { grid-row: 1; }
  .ws-abschnitt--knopf > h2 { grid-column: 1; grid-row: 2; }
  .ws-abschnitt--knopf > .ws-abschnitt__knopf { grid-column: 2; grid-row: 2; align-self: end; margin-bottom: 3.5rem; }
  @media (max-width: 47.99rem) {
    .ws-abschnitt--knopf > .ws-abschnitt__knopf { grid-column: 1; grid-row: auto; order: 9; justify-self: start; margin: 2rem 0 0; }
  }
  /* Volle Breite: Fläche bzw. dunkles Band von Rand zu Rand */
  :is(.ws-abschnitt--flaeche, .ws-abschnitt--dunkel) {
    margin-inline: calc(-1 * var(--ui-gutter));
    padding: clamp(4.5rem, 3rem + 4vw, 7rem) var(--ui-gutter);
    scroll-margin-top: 5rem;
  }
  .ws-abschnitt--flaeche { background: var(--ui-color-surface); }
  .ws-abschnitt--dunkel {
    --ui-color-text: rgb(245 243 239);
    --ui-color-heading: rgb(245 243 239);
    --ui-color-text-muted: rgb(245 243 239 / 0.72);
    --ui-color-border: rgb(245 243 239 / 0.16);
    --ui-accent-ink: rgb(245 243 239);
    --ws-karte: rgb(255 255 255 / 0.04);
    background: var(--ui-band-bg);
    color: var(--ui-color-text);
  }

  /* Laufband */
  .ws-laufband { overflow: hidden; margin-inline: calc(-1 * var(--ui-gutter)); padding-block: 1.5rem; border-block: 1px solid var(--ui-color-border); }
  .ws-laufband__spur { display: flex; width: max-content; animation: ws-laufband 40s linear infinite; }
  .ws-laufband:hover .ws-laufband__spur { animation-play-state: paused; }
  .ws-laufband__spur > span { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; color: var(--ui-color-text-muted); font-size: clamp(1.875rem, 1.6rem + 1vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; }
  .ws-laufband__spur > span::after { content: ""; width: 0.625rem; height: 0.625rem; background: var(--ui-color-accent); rotate: 45deg; }
  @keyframes ws-laufband { to { translate: -50% 0; } }

  /* Fakten */
  .ws-fakten { display: grid; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 40rem) { .ws-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .ws-fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ws-fakten__eintrag { padding-block: 2.5rem; border-bottom: 1px solid var(--ui-color-border); }
  @media (min-width: 64rem) {
    .ws-fakten__eintrag { padding-inline: 2rem; border-bottom: 0; border-right: 1px solid var(--ui-color-border); }
    .ws-fakten__eintrag:first-child { padding-left: 0; }
    .ws-fakten__eintrag:last-child { border-right: 0; }
  }
  /* Einheit bricht als Ganzes unter die Zahl, wenn die Spalte zu schmal ist */
  .ws-fakten__zahl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; margin: 0; font-size: clamp(3.75rem, 3rem + 2vw, 4.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
  .ws-fakten__zahl .ww-kpi__value { font: inherit; color: var(--ui-color-heading); }
  .ws-fakten__einheit { color: var(--ui-color-accent); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); letter-spacing: -0.03em; }
  .ws-fakten__text { margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }

  /* Leistungskarten (Anliegen) */
  .ws-anliegen { display: grid; gap: 1.5rem; }
  @media (min-width: 40rem) { .ws-anliegen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 80rem) { .ws-anliegen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .ws-anliegen__karte {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: var(--ws-karte);
    color: var(--ui-color-text);
    text-decoration: none;
    transition: transform 0.3s var(--ui-ease), border-color 0.3s var(--ui-ease), box-shadow 0.3s var(--ui-ease);
  }
  .ws-anliegen__karte:hover { transform: translateY(-4px); border-color: var(--ui-color-accent); box-shadow: var(--ui-shadow); color: var(--ui-color-text); }
  .ws-anliegen__kopf { display: flex; align-items: flex-start; justify-content: space-between; }
  .ws-anliegen__nr { display: flex; align-items: center; gap: 0.75rem; color: var(--ui-accent-ink); font-family: var(--ui-font-mono); font-size: 0.8125rem; }
  .ws-anliegen__nr::after { content: ""; width: 2.5rem; height: 0.25rem; background: var(--ui-color-accent); transform-origin: left; transition: transform 0.3s var(--ui-ease); }
  .ws-anliegen__karte:hover .ws-anliegen__nr::after { transform: scaleX(1.5); }
  .ws-anliegen__frage { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
  .ws-anliegen__text { flex: 1; margin-top: 0.75rem; color: var(--ui-color-text-muted); }
  .ws-anliegen__hinweis { margin-top: 2rem; color: var(--ui-accent-ink); font-family: var(--ui-font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .ws-skizzen-icon { display: block; width: 4rem; height: 4rem; overflow: visible; color: var(--ui-color-heading); }

  /* Projektliste mit Vorschaubild am Mauszeiger */
  .ws-projektliste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-color-border); }
  .ws-projektliste__zeile {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    padding-block: 2rem;
    border-bottom: 1px solid var(--ui-color-border);
    color: var(--ui-color-text);
    text-decoration: none;
  }
  @media (min-width: 40rem) { .ws-projektliste__zeile { grid-template-columns: 4rem minmax(0, 1fr) auto auto; } }
  .ws-projektliste__zeile:hover { color: var(--ui-color-text); }
  .ws-projektliste__nr { color: var(--ui-accent-ink); }
  .ws-projektliste__titel { display: block; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; transition: translate 0.3s var(--ui-ease); }
  .ws-projektliste__zeile:hover .ws-projektliste__titel { translate: 0.5rem 0; }
  .ws-projektliste__kurz { display: block; max-width: 36rem; margin-top: 0.5rem; color: var(--ui-color-text-muted); }
  .ws-projektliste__art { display: none; margin: 0; }
  .ws-projektliste__art::before { display: none; }
  @media (min-width: 40rem) { .ws-projektliste__art { display: block; } }
  .ws-projektliste__pfeil { font-size: 1.5rem; transition: translate 0.3s var(--ui-ease), color 0.3s; }
  .ws-projektliste__zeile:hover .ws-projektliste__pfeil { translate: 0.25rem -0.25rem; color: var(--ui-accent-ink); }
  .ws-vorschau {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 26rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 30px 60px -15px rgb(0 0 0 / 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .ws-vorschau.is-sichtbar { opacity: 1; }
  .ws-vorschau img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

  /* Joomla-Check (Override von mod_joomlacheck; dessen CSS liegt außerhalb der Ebenen → !important wo nötig) */
  .ws-check { display: grid; gap: 2.5rem; }
  @media (min-width: 64rem) { .ws-check { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
  .ws-check .jcheck__form { display: grid !important; gap: 1.25rem !important; max-width: 34rem !important; margin: 0 !important; }
  .ws-check .jcheck__feld label { color: var(--ui-color-heading); font-size: 0.95rem !important; font-weight: 500; }
  .ws-check .jcheck__optional { color: var(--ui-color-text-muted); opacity: 1 !important; font-weight: 400; }
  .ws-check .jcheck__feld input {
    border: 1px solid var(--ui-color-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ws-karte) !important;
    color: var(--ui-color-text) !important;
  }
  .ws-check .jcheck__feld input:focus { outline: none !important; border-color: var(--ui-color-accent) !important; box-shadow: var(--ui-focus-ring); }
  .ws-check .jcheck__einwilligung { color: var(--ui-color-text-muted); font-size: 0.875rem !important; }
  .ws-check .jcheck__knopf { justify-self: start; }
  .ws-check__ausgabe { max-width: none !important; margin: 0 !important; }
  .ws-check .jcheck__karte {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.25rem !important;
    padding: 2rem !important;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: var(--ws-karte);
    color: var(--ui-color-text);
  }
  .ws-check .jcheck__karte .ws-kennung { margin: 0 0 0.5rem; }
  .ws-check .jcheck__karte > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ui-color-border); }
  .ws-check .ww-result__label, .ws-check .ww-muted { color: var(--ui-color-text-muted) !important; font-size: 0.875rem; }
  .ws-check .jcheck__karte strong { color: var(--ui-color-heading) !important; font-weight: 500; text-align: end; }
  .ws-check .ww-price { display: grid; gap: 0.25rem; color: var(--ui-color-heading) !important; }
  .ws-check .ww-price strong { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.1; text-align: start; }
  .ws-check .ww-note { margin: 0.5rem 0 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  /* Streifen links je Support-Stand (Farbe aus den Signalfarben des Templates) */
  .ws-check :is(.jcheck__karte--rot, .jcheck__karte--orange, .jcheck__karte--gruen, .jcheck__karte--grau) { padding-left: 2rem !important; border-left: 6px solid var(--ws-streifen) !important; }
  .ws-check .jcheck__karte--grau { --ws-streifen: var(--ui-color-border-strong); }
  .ws-check .jcheck__karte--rot { --ws-streifen: var(--ui-color-dot-red); }
  .ws-check .jcheck__karte--orange { --ws-streifen: var(--ui-color-dot-orange); }
  .ws-check .jcheck__karte--gruen { --ws-streifen: var(--ui-color-dot-green); }
  .ws-check :is(.jcheck__rat, .jcheck__fuss, .jcheck__meldung, .jcheck__befunde) { max-width: 36rem; color: var(--ui-color-text); }
  .ws-check .jcheck__fuss { color: var(--ui-color-text-muted); opacity: 1 !important; }
  .ws-check .jcheck__meldung--fehler { color: var(--ws-fehler); }
  .ws-check .jcheck__chips span { border-color: var(--ui-color-border) !important; color: var(--ui-color-text-muted); }
  .ws-check .jcheck__cta { margin-top: 0.5rem; }

  /* ================================================================ Formulare (Kontaktseite, Anfrage-Pop-up) */
  .ws-formular { display: grid; gap: 1.25rem; }
  @media (min-width: 40rem) { .ws-formular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ws-formular__breit { grid-column: 1 / -1; }
  .ws-formular__pflicht { margin: 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-feld { display: grid; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
  .ws-feld > label, .ws-feld > legend { color: var(--ui-color-heading); font-weight: 600; }
  .ws-feld > label span, .ws-feld > legend span { color: var(--ui-color-text-muted); font-weight: 400; }
  .ws-feld :is(input:not([type="checkbox"]), textarea) {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ui-color-border);
    border-radius: 0.75rem;
    background: var(--ws-karte);
    color: var(--ui-color-text);
    font: inherit;
  }
  .ws-feld :is(input:not([type="checkbox"]), textarea):focus { outline: none; border-color: var(--ui-color-accent); box-shadow: var(--ui-focus-ring); }
  .ws-feld textarea { resize: vertical; }
  .ws-feld input[type="file"] { padding: 0.75rem; border-style: dashed; color: var(--ui-color-text-muted); font-size: 0.875rem; cursor: pointer; }
  .ws-feld input[type="file"]::file-selector-button {
    margin-right: 1rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-surface);
    color: var(--ui-color-heading);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .ws-feld__hinweis { margin: 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-feld__dateien { margin: 0; padding: 0; color: var(--ui-color-text-muted); font-size: 0.875rem; list-style: none; }

  /* Chips „Worum geht es?“ (Kontrollkästchen bleibt für Tastatur und Screenreader erhalten) */
  .ws-chips__liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
  .ws-chip { position: relative; cursor: pointer; }
  .ws-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .ws-chip span {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ws-karte);
    font-size: 0.875rem;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  }
  .ws-chip:hover span { border-color: var(--ui-color-heading); }
  .ws-chip input:checked + span { border-color: var(--ui-color-action); background: var(--ui-color-action); color: var(--ui-color-on-action); }
  .ws-chip input:focus-visible + span { box-shadow: var(--ui-focus-ring); }

  .ws-einwilligung { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--ui-color-text); font-size: 0.875rem; }
  .ws-einwilligung input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--ui-color-action); }
  .ws-einwilligung a { color: var(--ui-accent-ink); }
  .ws-formular__meldung { margin: 1rem 0 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-formular__meldung:empty { display: none; }
  .ws-formular__meldung.is-fehler { color: var(--ui-accent-ink); font-weight: 600; }
  .ws-formular [data-ws-knopf]:disabled { cursor: wait; opacity: 0.6; }

  .ws-danke { padding: 2rem; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ws-karte); }
  .ws-danke__text { margin: 0.75rem 0 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
  .ws-danke__hinweis { margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }
  .ws-danke .ww-btn { margin-top: 1.5rem; }

  /* Kontaktseite: Formular und Seitenspalte */
  .ws-kontakt { display: grid; gap: 3rem; margin-top: 3rem; }
  @media (min-width: 64rem) { .ws-kontakt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4rem; } }
  .ws-kontakt__titel { margin: 0 0 1.5rem; font-size: 1.875rem; letter-spacing: -0.025em; }
  .ws-kontakt__seite { display: grid; gap: 1.5rem; align-content: start; }
  .ws-kontakt__box { padding: 1.5rem; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ws-karte); }
  .ws-kontakt__box h2 { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
  .ws-kontakt__box p { margin: 0.5rem 0 0; color: var(--ui-color-text-muted); }
  .ws-kontakt__box .ws-mehr { display: inline-block; margin-top: 1rem; }

  /* Anfrage-Pop-up */
  .ws-dialog {
    width: min(44rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--ui-color-border);
    border-radius: 1.25rem;
    background: var(--ui-color-bg);
    color: var(--ui-color-text);
    opacity: 0;
    translate: 0 1rem;
    transition: opacity 0.3s ease, translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
  }
  .ws-dialog[open] { opacity: 1; translate: 0 0; }
  @starting-style { .ws-dialog[open] { opacity: 0; translate: 0 1rem; } }
  .ws-dialog::backdrop { background: rgb(0 0 0 / 0); transition: background 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete; }
  .ws-dialog[open]::backdrop { background: rgb(0 0 0 / 0.45); }
  @starting-style { .ws-dialog[open]::backdrop { background: rgb(0 0 0 / 0); } }
  .ws-dialog__innen { position: relative; padding: 1.5rem; }
  @media (min-width: 40rem) { .ws-dialog__innen { padding: 2.5rem; } }
  .ws-dialog__zu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--ui-color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--ui-color-heading);
  }
  .ws-dialog__zu:hover { border-color: var(--ui-color-heading); }
  .ws-dialog .ws-kennung { margin-bottom: 0.75rem; }
  .ws-dialog__titel { margin: 0; padding-right: 3rem; font-size: clamp(1.875rem, 1.5rem + 1vw, 2.25rem); }
  .ws-dialog__einleitung { margin: 0.75rem 0 2rem; color: var(--ui-color-text-muted); }
  .ws-dialog__details { border: 1px solid var(--ui-color-border); border-radius: 0.75rem; background: var(--ws-karte); }
  .ws-dialog__details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
  .ws-dialog__details summary::-webkit-details-marker { display: none; }
  .ws-dialog__details summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; transition: rotate 0.2s; }
  .ws-dialog__details[open] summary::after { rotate: -135deg; }
  .ws-dialog__details summary [data-angebot-abschnitt-zusatz] { color: var(--ui-color-text-muted); }
  .ws-dialog__inhalt { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--ui-color-border); font-size: 0.875rem; }
  .ws-dialog__inhalt dl { margin: 0; }
  .ws-dialog__inhalt dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--ui-color-border); }
  .ws-dialog__inhalt dl > div.is-lang { display: block; }
  .ws-dialog__inhalt dt { color: var(--ui-color-text-muted); }
  .ws-dialog__inhalt dd { margin: 0; font-weight: 600; text-align: end; }
  .ws-dialog__inhalt .is-lang dd { margin-top: 0.25rem; font-weight: 400; text-align: start; }
  .ws-dialog__listentitel { margin: 1rem 0 0.5rem; font-weight: 600; }
  .ws-dialog__inhalt ul { margin: 0; padding-left: 1.1rem; color: var(--ui-color-text-muted); }
  .ws-dialog__hinweis { margin: 0.75rem 0 0; color: var(--ui-color-text-muted); font-family: var(--ui-font-mono); font-size: 0.8125rem; }

  /* Fehlerseite (404) */
  .ws-fehler { padding-block: clamp(3rem, 2rem + 6vw, 8rem); }
  .ws-fehler h1 { margin: 0; font-size: var(--ui-text-h1); }
  .ws-fehler .ws-lead { margin: 1.5rem 0 0; }
  .ws-fehler .ww-actions { margin-top: 2.5rem; }

  /* Honigtopf: für Menschen unsichtbar, auch für Screenreader (aria-hidden) */
  .ws-honig { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .ws-nowrap { white-space: nowrap; }

  /* Joomla-Zeitleiste */
  .ws-zeitleiste { position: relative; display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-color-accent); }
  @media (min-width: 40rem) { .ws-zeitleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .ws-zeitleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ws-zeitleiste__station { padding-block: 2rem; border-bottom: 1px solid var(--ui-color-border); }
  @media (min-width: 64rem) {
    .ws-zeitleiste__station { padding-inline: 2rem; border-bottom: 0; border-right: 1px solid var(--ui-color-border); }
    .ws-zeitleiste__station:first-child { padding-left: 0; }
    .ws-zeitleiste__station:last-child { border-right: 0; }
  }
  .ws-zeitleiste__status { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ui-color-text-muted); font-family: var(--ui-font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .ws-zeitleiste__punkt { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ui-color-dot-red); }
  .ws-zeitleiste__station--auslaufend .ws-zeitleiste__punkt { background: var(--ui-color-dot-orange); }
  .ws-zeitleiste__station--aktuell .ws-zeitleiste__punkt { background: var(--ui-color-dot-green); }
  .ws-zeitleiste h3 { margin: 1rem 0 0; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.25rem); letter-spacing: -0.045em; }
  .ws-zeitleiste__zeitraum { margin: 0.5rem 0 0; color: var(--ui-color-text-muted); }
  .ws-zeitleiste__quelle { max-width: 34rem; margin: 1rem 0 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-beitrag .ws-joomla { margin-top: clamp(4rem, 3rem + 3vw, 6rem); }

  /* Ablauf */
  .ws-schritte { display: grid; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 40rem) { .ws-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .ws-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ws-schritte > li { padding-top: 2rem; border-top: 1px solid var(--ui-color-accent); }
  .ws-schritte__nr { color: var(--ui-accent-ink); font-family: var(--ui-font-mono); font-size: 0.875rem; }
  .ws-schritte h3 { margin: 1rem 0 0; font-size: 1.5rem; }
  .ws-schritte p { margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }

  /* Technik (dunkles Band) */
  .ws-technik { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 64rem) { .ws-technik { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .ws-technik > li { padding: 2.5rem; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ws-karte); }
  .ws-technik h3 { margin: 0; font-size: 3rem; letter-spacing: -0.045em; line-height: 1; }
  .ws-technik__fuer { margin: 1rem 0 0; color: var(--ui-accent-ink); font-family: var(--ui-font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .ws-technik p:last-child { margin: 1.5rem 0 0; color: var(--ui-color-text-muted); }

  /* Wartungspakete */
  .ws-pakete { display: grid; gap: 1.5rem; }
  @media (min-width: 48rem) { .ws-pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .ws-paket { display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ws-karte); }
  .ws-paket--empfohlen { border-color: var(--ui-color-accent); box-shadow: 0 0 0 1px var(--ui-color-accent); }
  .ws-paket__name { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.25rem; }
  .ws-paket__marke { padding: 0.15rem 0.6rem; border-radius: var(--ui-radius-pill); background: var(--ui-color-action); color: var(--ui-color-on-action); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; }
  .ws-paket__preis { margin: 1rem 0 0; font-size: 3.75rem; font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
  .ws-paket__preis span { color: var(--ui-color-text-muted); font-size: 1rem; letter-spacing: 0; }
  .ws-paket__reaktion { margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }
  .ws-paket__liste { flex: 1; margin: 1.5rem 0 0; padding: 0; list-style: none; }
  .ws-paket__liste li { display: flex; gap: 0.5rem; }
  .ws-paket__liste li + li { margin-top: 0.5rem; }
  .ws-paket__liste li::before { content: "✓"; color: var(--ui-accent-ink); }
  .ws-paket__knopf { justify-content: center; margin-top: 2rem; }
  .ws-pakete__hinweis { max-width: 34rem; margin: 1rem 0 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-beitrag .ws-pakete { margin-block: 2rem 0; }

  /* Über mich (Startseite) */
  .ws-ueber { display: grid; gap: 2.5rem; }
  @media (min-width: 64rem) { .ws-ueber { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; } }
  .ws-ueber__bild a { display: block; overflow: hidden; margin-top: 2rem; border-radius: var(--ui-radius); }
  .ws-ueber__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 0.5s var(--ui-ease); }
  .ws-ueber__bild a:hover img { scale: 1.05; }
  @media (min-width: 64rem) { .ws-ueber__text { padding-top: 3.5rem; } }
  .ws-ueber__satz { max-width: 20ch; margin: 0; font-size: clamp(1.875rem, 1.2rem + 2vw, 3rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; }
  .ws-ueber__text .ws-lead { margin-top: 2rem; }
  .ws-ueber__text p:not(.ws-ueber__satz) { max-width: 40rem; color: var(--ui-color-text-muted); font-size: var(--ui-text-lg); }
  .ws-mehr { color: var(--ui-accent-ink); font-weight: 600; text-decoration: none; }
  .ws-mehr:hover { text-decoration: underline; }

  /* News-Karten */
  .ws-newskarten { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 48rem) { .ws-newskarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .ws-newskarten__karte { position: relative; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ws-karte); }
  .ws-newskarten__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .ws-newskarten__inhalt { display: block; padding: 2rem; }
  .ws-newskarten__inhalt time { color: var(--ui-color-text-muted); font-size: 0.8125rem; }
  .ws-newskarten h3 { margin: 0.75rem 0 0; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }
  .ws-newskarten h3 a { color: var(--ui-color-heading); text-decoration: none; }
  .ws-newskarten h3 a::after { content: ""; position: absolute; inset: 0; }
  .ws-newskarten__karte:hover h3 a { color: var(--ui-accent-ink); }
  .ws-newskarten__text { display: block; margin-top: 0.75rem; color: var(--ui-color-text-muted); font-size: 0.875rem; }

  /* ================================================================ Kontakt-Block vor dem Fuß */
  .ui-area--bottom .ui-section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--ui-color-border); }
  .ws-anfrage h2 { max-width: 18ch; margin: 0; font-size: var(--ui-text-h1); }
  .ws-anfrage .ws-lead { margin-top: 1.5rem; }
  .ws-anfrage .ww-actions { margin-top: 2.5rem; }

  /* ================================================================ Mega-Menü: volle Breite unter der Kopfzeile, Link „Alle …“
     Wie in der Astro-Version: Das Panel richtet sich nach der ganzen Kopfzeile (.ui-header), nicht nach dem schmalen
     Platz des Menüs zwischen Logo und Umschalter. Dafür verliert das Menü am Desktop seine eigene Position. */
  .ext-megamenu.emm-is-desktop { position: static !important; }
  .ext-megamenu.emm-is-desktop .emm-mega {
    top: 100% !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    background: var(--ui-color-bg) !important;
    box-shadow: 0 40px 60px -30px rgb(0 0 0 / 0.25) !important;
  }
  /* Unsichtbare Brücke vom Menüpunkt bis zum Panel, damit es beim Hinüberfahren offen bleibt */
  .ext-megamenu.emm-is-desktop .emm-mega::before { top: -2rem !important; height: 2rem !important; }
  .ext-megamenu.emm-is-desktop .emm-mega-inner { max-width: none !important; padding: 2.5rem var(--ui-gutter) !important; }
  /* Spalten links, Hinweis-Karte rechts, „Alle … im Überblick“ darunter über die ganze Breite */
  .ext-megamenu.emm-is-desktop .emm-mega-inner--promo, .ext-megamenu.emm-is-desktop .emm-mega-inner:has(.ws-mega-alle) { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr); gap: 2rem 3rem !important; }
  .ext-megamenu .ws-mega-alle { grid-column: 1 / -1; }
  .ext-megamenu .emm-promo-btn {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--ui-accent-ink) !important;
  }
  .ext-megamenu .emm-promo-btn:hover { text-decoration: underline !important; }
  .ext-megamenu .emm-col > .emm-group-title:not(:first-child) { margin-top: 2rem !important; }
  .ws-mega-alle { flex-basis: 100%; color: var(--ui-accent-ink); font-weight: 600; text-decoration: none; }
  .ws-mega-alle:hover { text-decoration: underline; }
  .ext-megamenu .emm-promo .ws-kennung { margin-bottom: 0.75rem; }
  .ext-megamenu .emm-promo { display: flex !important; flex-direction: column; }
  .ws-mega-skizze { display: block; margin: 1rem 0 1.25rem; }
  .ext-megamenu.emm-is-desktop .emm-promo { align-self: start; }
  .ws-mega-skizze svg { display: block; width: 7rem; height: 7rem; overflow: visible; color: var(--ui-color-heading); }

  /* Handy: Beim Scrollen schiebt sich die Kopfzeile weg (transform). Dann richtet sich das geschlossene Menü-Panel
     (position: fixed, rechts außerhalb) nach der Kopfzeile statt nach dem Fenster und macht die Seite seitlich
     scrollbar. „clip“ schneidet das ab, ohne einen Scroll-Container zu erzeugen (die Kopfzeile bleibt sticky). */
  html, body { overflow-x: clip; }

  /* ================================================================ Fuß (dunkles Band) */
  .ui-footer {
    --ui-color-text: rgb(245 243 239);
    --ui-color-heading: rgb(245 243 239);
    --ui-color-text-muted: rgb(245 243 239 / 0.72);
    --ui-color-border: rgb(245 243 239 / 0.16);
    padding-block: 4rem 1.5rem;
    background: var(--ui-band-deep);
    border-top: 0;
    color: var(--ui-color-text);
    font-size: 0.875rem;
  }
  .ui-footer .ui-container { max-width: none; }
  .ui-footer :is(h2, h3, .ui-plain__title) {
    margin-bottom: 1rem;
    color: var(--ui-color-text-muted) !important;
    font-family: var(--ui-font-mono);
    font-size: 0.8125rem !important;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .ui-footer a { color: var(--ui-color-text); text-decoration: none; }
  .ui-footer a:hover, .ui-footer a:focus-visible { color: var(--ui-accent-soft); text-decoration: none; }
  .ui-footer__grid { gap: 2.5rem; margin-bottom: 3rem; }
  .ui-footer__grid li + li { margin-top: 0.5rem; }
  /* Menüs im Fuß als Liste untereinander (basis setzt sie nebeneinander) */
  .ui-footer__grid .mod-menu.nav { display: block; }
  .ui-footer__grid .mod-menu li { margin-inline: 0; }
  .ws-fuss-marke { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; }
  .ws-fuss-text { max-width: 20rem; margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }
  @media (min-width: 64rem) { .ui-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }
  @media (min-width: 20rem) and (max-width: 63.99rem) {
    .ui-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
    .ui-footer__grid > :first-child { grid-column: 1 / -1; }
  }
  .ui-footer__bottom { padding-right: 4rem; color: var(--ui-color-text-muted); font-size: 0.8125rem; }

  .ui-backtop { background: var(--ui-color-action); color: var(--ui-color-on-action); }

  /* ================================================================ Formulare */
  :is(.form-control, .form-select, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea) {
    border-color: var(--ui-color-border);
    background: var(--ws-karte);
  }
  input[type="checkbox"]:is([aria-invalid="true"], :user-invalid) { outline: 2px solid var(--ws-fehler); outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ui-header { transition: none; }
    :is(a.ww-entry, a.ww-card, .ws-karte--link, .ws-anliegen__karte):hover { transform: none; }
    .ws-laufband__spur { animation: none; }
    .ws-dialog, .ws-dialog::backdrop { transition: none; }
    .ws-w > span { animation: none; }
    .ws-projektliste__zeile:hover :is(.ws-projektliste__titel, .ws-projektliste__pfeil) { translate: none; }
    .ws-ueber__bild a:hover img, .ws-karte--bild:hover .ws-karte__bild img { scale: none; }
  }
}

/* ======================================================================================================
   Reduzierte Fassung (webstudio-v2): Bausteine der neuen Seiten, Schwarz-Weiß-Ersatz für Farbsignale
   ====================================================================================================== */
@layer design {
  /* Typografischer Startbereich (erster Abschnitt der Startseite, kein Bild) */
  .ws-held { padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  /* .ws-held__titel: gleiche Größe für die Überschriften weiterer Slides (dort h2, die h1 gehört zum ersten Slide) */
  .ws-held :is(h1, .ws-held__titel) { max-width: 16ch; margin: 1.5rem 0 0; font-size: clamp(3rem, 1.6rem + 5vw, 5.5rem); }
  .ws-held .ws-lead { margin-top: 2rem; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem); }
  .ws-held .ww-actions { margin-top: 2.5rem; }
  .ws-held__zusage { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-held__zusage::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ui-color-heading); }
  /* Zeichnung im Startbereich nur in der Variante „Joomla-Farben“ (user.css) */
  .ws-held__skizze { display: none; }

  /* Startbereich als Slider (mod_basis_slider, Darstellung „held“ dieses Templates): jeder Slide ist ein vollständiger
     Startbereich, alle liegen im selben Rasterfeld (Höhe = höchster Slide, nichts springt). Das Stylesheet des Sliders
     wird hier nicht geladen (es liegt außerhalb der Ebenen und ginge sonst vor); das Skript des Sliders schaltet nur
     .is-active, .is-paused und aria-current. Punkte und Pause-Knopf unten links. */
  .ws-held-slider { position: relative; isolation: isolate; }
  .ws-held-slider .basis-slider__track { display: grid; touch-action: pan-y; }
  .ws-held-slider .basis-slider__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
  .ws-held-slider .basis-slider__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.7s ease, visibility 0s linear 0s; }
  .ws-held-slider .ws-held { box-sizing: border-box; height: 100%; padding-bottom: calc(clamp(2.5rem, 2rem + 3vw, 4.5rem) + 2.5rem); }
  .ws-held-slider .ws-held__text { align-self: start; }
  /* Handy: weniger Luft oben und unten, damit der Startbereich samt Steuerleiste in den ersten Bildschirm passt */
  @media (max-width: 47.99rem) {
    .ws-held-slider .ws-held { padding-top: 2rem; padding-bottom: 4.5rem; }
    .ws-held-slider .ws-held .ws-lead { margin-top: 1.5rem; }
    .ws-held-slider .ws-held .ww-actions { margin-top: 2rem; }
    .ws-held-slider .basis-slider__nav { bottom: 1rem; }
  }
  .ws-held-slider .basis-slider__nav { position: absolute; left: 0; bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem); z-index: 3; display: flex; gap: 0.25rem; align-items: center; }
  .ws-held-slider .basis-slider__dots { display: flex; gap: 0.1rem; }
  /* 24 × 24 px Klickfläche, sichtbarer Punkt 10 px */
  .ws-held-slider :is(.basis-slider__dot, .basis-slider__pause) { position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
  .ws-held-slider .basis-slider__dot::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ui-color-border-strong); transform: translate(-50%, -50%); transition: background-color 0.2s ease, transform 0.2s ease; }
  .ws-held-slider .basis-slider__dot[aria-current="true"]::before { background: var(--ui-color-heading); transform: translate(-50%, -50%) scale(1.25); }
  .ws-held-slider .basis-slider__pause::before,
  .ws-held-slider .basis-slider__pause::after { content: ""; position: absolute; top: 50%; width: 0.2rem; height: 0.65rem; background: var(--ui-color-heading); transform: translateY(-50%); }
  .ws-held-slider .basis-slider__pause::before { left: calc(50% - 0.3rem); }
  .ws-held-slider .basis-slider__pause::after { left: calc(50% + 0.1rem); }
  .ws-held-slider.is-paused .basis-slider__pause::before { left: calc(50% - 0.2rem); width: 0; height: 0; border-style: solid; border-width: 0.35rem 0 0.35rem 0.55rem; border-color: transparent transparent transparent var(--ui-color-heading); background: transparent; }
  .ws-held-slider.is-paused .basis-slider__pause::after { display: none; }
  .ws-held-slider :is(.basis-slider__dot, .basis-slider__pause):focus-visible { outline: 2px solid var(--ui-color-heading); outline-offset: 2px; }
  /* Pfeile in der Steuerleiste: runde Knöpfe zwischen Pause und Punkten */
  .ws-held-slider .ws-held-pfeil { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--ui-color-border-strong); border-radius: 50%; background: transparent; color: var(--ui-color-heading); cursor: pointer; }
  .ws-held-slider .ws-held-pfeil:hover { border-color: var(--ui-color-heading); }
  .ws-held-slider .ws-held-pfeil svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ws-held-slider .ws-held-pfeil:focus-visible { outline: 2px solid var(--ui-color-heading); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    .ws-held-slider .basis-slider__slide, .ws-held-slider .basis-slider__slide.is-active { transition: none; }
  }

  /* Vertrauensleiste: schmale Zeile mit echten Angaben */
  .ws-vertrauen { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--ui-color-border); }
  .ws-vertrauen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 64rem) { .ws-vertrauen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ws-vertrauen li { padding: 1rem 1rem 1rem 0; color: var(--ui-color-text-muted); font-size: 0.95rem; }
  .ws-vertrauen strong { display: block; color: var(--ui-color-heading); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }

  /* Folgen ohne Sicherheitsupdates */
  .ws-folgen { display: grid; gap: 1.5rem; margin: 3rem 0 0; padding: 0; list-style: none; }
  @media (min-width: 48rem) { .ws-folgen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } }
  .ws-folgen li { padding-top: 1rem; border-top: 1px solid var(--ui-color-heading); color: var(--ui-color-text-muted); }
  .ws-folgen strong { display: block; margin-bottom: 0.25rem; color: var(--ui-color-heading); font-weight: 500; }
  .ws-abschnitt .ws-joomla { margin-top: 0; }

  /* Drei Einstiege: immer drei Spalten ab Tablet */
  @media (min-width: 48rem) { .ws-anliegen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* Referenzen: Karte mit Screenshot, Kontext und Zahl */
  .ws-referenzen { display: grid; gap: 1.5rem; }
  @media (min-width: 64rem) { .ws-referenzen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .ws-referenz { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ws-karte); }
  .ws-referenz img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--ui-color-border); }
  .ws-referenz__inhalt { display: flex; flex: 1; flex-direction: column; padding: 1.75rem; }
  .ws-referenz__inhalt .ws-kennung { margin-bottom: 0.75rem; }
  .ws-referenz h3 { margin: 0; font-size: 1.375rem; }
  .ws-referenz__zahl { margin: 0.75rem 0 0; font-family: var(--ui-font-mono); font-size: 0.875rem; }
  .ws-referenz__inhalt > p:not([class]) { flex: 1; margin: 0.75rem 0 0; color: var(--ui-color-text-muted); }
  .ws-referenz__daten { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ui-color-border); font-size: 0.875rem; }
  .ws-referenz__daten dt { color: var(--ui-color-text-muted); }
  .ws-referenz__daten dd { margin: 0; }

  /* Beispielseite (Baustein „demo“): Bildschirmfoto Computer, Smartphone davor; daneben Text und Knopf */
  .ws-demo { display: grid; gap: 2rem; margin-top: 1.5rem; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ui-color-surface); }
  @media (min-width: 64rem) { .ws-demo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 3rem; } }
  .ws-demo__bilder { position: relative; padding: 0 8% 8% 0; }
  .ws-demo__bilder img { display: block; height: auto; border: 1px solid var(--ui-color-border); background: #fff; }
  .ws-demo__computer { width: 100%; border-radius: var(--ui-radius-sm); box-shadow: var(--ui-shadow); }
  .ws-demo__handy { position: absolute; right: 0; bottom: 0; width: 24%; border-radius: 0.9rem; box-shadow: var(--ui-shadow); outline: 4px solid var(--ui-color-heading); outline-offset: -1px; }
  .ws-demo__inhalt h3 { margin: 0; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
  .ws-demo__branche { display: block; margin-top: 0.25rem; color: var(--ui-color-text-muted); font-size: 1rem; font-weight: 400; }
  .ws-demo__inhalt > p:not([class]) { margin: 1rem 0 0; color: var(--ui-color-text-muted); }
  .ws-demo__punkte { margin: 1.25rem 0 0; padding: 0; list-style: none; }
  .ws-demo__punkte li { position: relative; padding-left: 1.5rem; }
  .ws-demo__punkte li + li { margin-top: 0.4rem; }
  .ws-demo__punkte li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ui-color-accent); }
  .ws-demo__aktion { margin: 1.75rem 0 0; }
  .ws-demo__hinweis { max-width: 34rem; margin: 0.75rem 0 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-demo__weitere { margin: 1.25rem 0 0; font-size: 0.95rem; }

  /* Auswahl „Beispiele nach Branche“ (Baustein „demo auswahl“) */
  .ws-demos { display: grid; gap: 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
  @media (min-width: 48rem) { .ws-demos { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
  .ws-demos__karte { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ws-karte); }
  .ws-demos__karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--ui-color-border); }
  .ws-demos__inhalt { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
  .ws-demos__inhalt .ws-kennung { margin-bottom: 0.5rem; }
  .ws-demos__inhalt h3 { margin: 0; font-size: 1.3rem; }
  .ws-demos__inhalt p:not([class]) { flex: 1; margin: 0.6rem 0 0; color: var(--ui-color-text-muted); }
  .ws-demos__link { margin-top: 1.25rem; font-weight: 600; }
  /* Ganze Karte klickbar */
  .ws-demos__link::after { content: ""; position: absolute; inset: 0; }
  .ws-demos__karte:has(.ws-demos__link:focus-visible) { outline: 3px solid var(--ui-color-accent); outline-offset: 2px; }

  .com-content-article__body > .ws-schritte { margin-block: 2rem 1rem; }

  /* Enthalten / nicht enthalten */
  .ws-umfang { display: grid; gap: 1.5rem; margin-block: 1.5rem; }
  @media (min-width: 48rem) { .ws-umfang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ws-umfang > div { padding: 1.75rem; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); }
  .ws-umfang h3 { margin: 0 0 1rem !important; font-size: 1.25rem; }
  .ws-umfang ul { margin: 0; padding: 0; list-style: none; }
  .ws-umfang h4 { margin: 0 0 0.75rem; font-size: 1rem; }
  .ws-umfang ul + h4 { margin-top: 1.5rem; }
  .ws-umfang li { position: relative; padding-left: 1.4rem; }
  .ws-umfang li + li { margin-top: 0.5rem; }
  .ws-umfang li::before { content: "\2713"; position: absolute; left: 0; color: var(--ui-accent-ink); font-weight: 600; }
  .ws-umfang__nein li { color: var(--ui-color-text-muted); }
  .ws-umfang__nein li::before { content: "\2013"; color: inherit; }
  /* Bedingungen: neutraler Punkt statt Häkchen */
  .ws-umfang__info li::before { content: "\2022"; color: var(--ui-color-text-muted); font-weight: 400; }

  /* Update-Termin (tmpl/updatetermin.php): Karte über die volle Breite, Text und Knopf in Lesebreite */
  .ws-updatetermin { margin-top: 1.5rem; }
  .ws-updatetermin__takt { max-width: 36rem; margin: 1rem 0 0; }
  .ws-updatetermin .ws-umfang { align-items: start; }
  .ws-updatetermin .ws-pakete__hinweis { max-width: 36rem; }
  .ws-updatetermin .ws-paket__knopf { align-self: flex-start; width: auto; max-width: 22rem; }
  @media (max-width: 47.99rem) {
    .ws-updatetermin .ws-umfang > div { padding: 0; border: 0; }
  }
  /* Hinweise zur ganzen Paketgruppe (2. Website, Laufzeit) deutlich von der Karte absetzen */
  :is(.ws-updatetermin, .ws-pakete) + .ws-pakete__hinweis { margin-top: 2.5rem; }

  /* Joomla-Check auf der Upgrade-Seite: abgesetzte Fläche */
  .ws-check-abschnitt { margin-block: clamp(4.375rem, 3.5rem + 2.4vw, 6.25rem); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--ui-radius); background: var(--ui-color-surface); scroll-margin-top: 6rem; }
  .ws-check-abschnitt > h2 { margin-top: 0 !important; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
  .ws-check-abschnitt > p { max-width: 36rem; }

  /* Abschluss der Startseite: Kurzformular und Termin nebeneinander */
  .ws-abschluss__raster { display: grid; gap: 2rem; }
  @media (min-width: 64rem) { .ws-abschluss__raster { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4rem; } }

  /* Kontaktseite: zwei Wege nebeneinander */
  .ws-kontaktwege { display: grid; gap: 3rem; margin-top: 2.5rem; }
  @media (min-width: 64rem) { .ws-kontaktwege { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4rem; } }
  .ws-kontaktweg { scroll-margin-top: 6rem; }
  .ws-kontaktweg h2 { margin: 0 0 1rem !important; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem) !important; }
  .ws-kontaktweg > p { max-width: 36rem; }
  .ws-kontaktweg .ws-kontaktweg__zweit { margin-top: 3rem !important; }

  /* Terminbox */
  .ws-termin { padding: 1.75rem; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); }
  .ws-termin__dauer { margin: 0; }
  .ws-termin__hinweis { margin: 1rem 0 1.25rem; color: var(--ui-color-text-muted); font-size: 0.95rem; }

  /* Formulare der reduzierten Fassung */
  .ws-formular--einspaltig { grid-template-columns: 1fr !important; }
  .ws-feld select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ws-karte);
    color: var(--ui-color-text);
    font: inherit;
  }
  .ws-feld :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { border-radius: var(--ui-radius-sm); }
  .ws-chip input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .ws-chip input:checked + span { border-color: var(--ui-color-action); background: var(--ui-color-action); color: var(--ui-color-on-action); }
  .ws-chip input:is([aria-invalid="true"], :user-invalid) + span { border-color: var(--ws-fehler); border-style: dashed; box-shadow: inset 0 0 0 1px var(--ws-fehler); }
  .ws-chip span { border-radius: var(--ui-radius-pill); }
  .ws-formular__datenschutz { margin: 0.75rem 0 0; color: var(--ui-color-text-muted); font-size: 0.875rem; }
  .ws-formular__datenschutz a { color: inherit; }
  .ws-formular__meldung.is-fehler { color: var(--ws-fehler); }
  /* Fehlerzustand (vom Formularskript per aria-invalid, sonst vom Browser nach dem Absenden): roter Rahmen, per Schatten
     auf 2 px verstärkt, ohne dass sich das Feld verschiebt; der Fokusring bleibt zusätzlich sichtbar */
  :is(input, textarea, select):is([aria-invalid="true"], :user-invalid):not([type="checkbox"]):not([type="radio"]) { border-color: var(--ws-fehler) !important; box-shadow: 0 0 0 1px var(--ws-fehler); }
  :is(input, textarea, select):is([aria-invalid="true"], :user-invalid):not([type="checkbox"]):not([type="radio"]):focus { box-shadow: 0 0 0 1px var(--ws-fehler), var(--ui-focus-ring); }

  /* Knöpfe: dunkel gefüllt, beim Überfahren grau */
  :is(.ww-btn, a.ww-btn):not(.ww-btn--outline) { border-color: var(--ui-color-action); background: var(--ui-color-action); color: var(--ui-color-on-action); }
  :is(.ww-btn, a.ww-btn):not(.ww-btn--outline):hover { border-color: var(--ui-color-action-hover); background: var(--ui-color-action-hover); color: var(--ui-color-on-action); }

  /* Zeitleiste ohne Farbe: Form statt Farbe – voll (aktuell), halb (läuft aus), Ring (ohne Support) */
  .ws-zeitleiste { border-top-color: var(--ui-color-heading); }
  .ws-zeitleiste__punkt { box-sizing: border-box; background: transparent !important; border: 2px solid var(--ui-color-heading); }
  .ws-zeitleiste__station--auslaufend .ws-zeitleiste__punkt { background: linear-gradient(90deg, var(--ui-color-heading) 50%, transparent 50%) !important; }
  .ws-zeitleiste__station--aktuell .ws-zeitleiste__punkt { background: var(--ui-color-heading) !important; }

  /* Joomla-Check: Streifen ohne Farbe, Helligkeit statt Farbe */
  .ws-check .jcheck__karte--rot { --ws-streifen: var(--ui-color-heading); }
  .ws-check .jcheck__karte--orange { --ws-streifen: var(--ui-color-text-muted); }
  .ws-check .jcheck__karte--gruen { --ws-streifen: var(--ui-color-border-strong); }

  /* Handy: Menü-Knopf mit Beschriftung statt nur drei Striche (Modul-CSS außerhalb der Ebenen) */
  /* Raster: drei Striche untereinander in Spalte 1, Beschriftung über alle Zeilen in Spalte 2 */
  .ext-megamenu.emm-is-mobile .emm-burger {
    display: inline-grid !important;
    grid-template-columns: 1rem auto;
    grid-template-rows: repeat(3, 2px);
    align-content: center;
    align-items: center;
    gap: 4px 0.6rem;
    width: auto !important;
    height: auto !important;
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem !important;
    border: 1px solid var(--ui-color-border-strong) !important;
    border-radius: var(--ui-radius-pill) !important;
  }
  .ext-megamenu.emm-is-mobile .emm-burger-line { grid-column: 1; width: 1rem !important; margin: 0 !important; }
  .ext-megamenu.emm-is-mobile .emm-burger::after { content: "Men\00FC"; grid-column: 2; grid-row: 1 / span 3; color: var(--ui-color-heading); font-size: 0.95rem; font-weight: 500; line-height: 1; }
  /* Geschlossenes Handy-Menü: kein Schatten am rechten Rand */
  .ext-megamenu.emm-is-mobile:not(.is-mobile-open) .emm-panel { box-shadow: none !important; }

  /* Skizzen-Icons zeichnen sich per CSS (pathLength="1"); Startzustand nur, wenn design.js die Bewegung einschaltet */
  :root.ws-zeichnen [data-skizzen-icon] [data-icon-strich] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s ease-in-out; }
  :root.ws-zeichnen [data-skizzen-icon] [data-icon-strich]:nth-child(2) { transition-delay: 0.15s; }
  :root.ws-zeichnen [data-skizzen-icon] [data-icon-strich]:nth-child(3) { transition-delay: 0.3s; }
  :root.ws-zeichnen [data-skizzen-icon] [data-icon-strich]:nth-child(4) { transition-delay: 0.45s; }
  :root.ws-zeichnen [data-skizzen-icon].is-gezeichnet [data-icon-strich] { stroke-dashoffset: 0; }

  @media (prefers-reduced-motion: reduce) {
    :root.ws-zeichnen [data-skizzen-icon] [data-icon-strich] { stroke-dashoffset: 0; transition: none; }
  }

  /* An- und Abmelden (/login): schmale Karte statt Felder über die ganze Breite */
  :is(.com-users-login, .com-users-logout) {
    max-width: 28rem;
    margin: clamp(2.5rem, 2rem + 4vw, 5rem) auto;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-color-surface-2, var(--ui-color-bg));
  }
  :is(.com-users-login, .com-users-logout) :is(.page-header, h1) { margin: 0; }
  :is(.com-users-login, .com-users-logout) h1 { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); }
  :is(.com-users-login, .com-users-logout) .ws-kennung { margin: 0 0 1rem; }
  :is(.com-users-login__description, .com-users-logout__description) { margin: 1rem 0 1.5rem; color: var(--ui-color-text-muted); }
  .com-users-login__options { margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
  .com-users-login :is(button[type="submit"], .btn-primary), .com-users-logout .btn-primary { width: 100%; justify-content: center; }

  /* Frontend-Bearbeitung (nur angemeldet; Grundregeln im Basis-Template). Das Mega-Menü ist absichtlich ohne eigenen
     Bezugsrahmen (volle Breite beim Aufklappen); sein Symbol sitzt deshalb oben rechts im Kopfbereich */
  .ui-header .ext-megamenu > .jmodedit { top: 0.35rem; inset-inline-end: 0.35rem; padding: 0.25rem; }
  /* Handy: Menü-Knopf hat einen eigenen Bezugsrahmen; Symbol außen an seine Ecke, damit „Menü“ lesbar bleibt */
  .ui-header .ext-megamenu:not(.emm-is-desktop) > .jmodedit { top: -0.75rem; inset-inline-end: -0.6rem; padding: 0.15rem; }
  /* Slider im Startbereich: Symbol links oben, weil rechts der Beitragsknopf „Bearbeiten“ sitzt */
  .ws-held-slider > .jmodedit { top: var(--ui-space-2); inset-inline-start: var(--ui-space-2); inset-inline-end: auto; }
}