/**
 * basis – Template-Stylesheet
 * @license GNU General Public License version 2 or later
 *
 * Gestaltung nach „Klar“: viel Weiß, schwarze Überschriften (Outfit), Fließtext Inter,
 * schwarze Pillen-Buttons, feine Linien. Farbe nur als kleiner Akzent.
 *
 * Ebenen (später deklarierte gewinnen):
 *   tokens      – Design-Tokens (--ui-*), öffentliche Schnittstelle für Erweiterungen (docs/SCHNITTSTELLE.md)
 *   base        – Reset, Typografie, Fokus
 *   compat      – Bootstrap-Klassennamen aus der Joomla-Kernausgabe auf eigene Tokens abgebildet (kein Bootstrap)
 *   layout      – Kopf, Navigation, Spalten, Fuß, Modul-Chromes
 *   components  – Bausteine (ww-*) für Module und Beiträge (docs/BAUSTEINE.md)
 *   motion      – Scroll-Animationen, reduzierte Bewegung
 * user.css (optional) liegt außerhalb der Ebenen und gewinnt immer.
 * „design“ ist die Ebene für Kind-Templates (media/templates/site/<kind>/css/design.css):
 * sie schlägt alle Ebenen des Templates, die Farbfelder der Template-Einstellungen gewinnen aber weiter.
 */
@layer tokens, base, compat, layout, components, motion, design;

/* Schriften: lokal, SIL Open Font License (fonts/LICENSE-fonts.txt). Geladen wird nur, was die Seite braucht. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/outfit-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: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/outfit-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: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-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;
 
}

/* Ersatzschriften mit angepassten Maßen: Arial nimmt die Laufweite und Zeilenhöhe von Inter/Outfit an,
   damit beim Nachladen der Webschrift nichts springt (CLS). Werte berechnet aus den Schriftdateien. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.62%;
  ascent-override: 90.01%;
  descent-override: 22.41%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 100.23%;
  ascent-override: 99.77%;
  descent-override: 25.94%;
  line-gap-override: 0%;
}

/* ==================================================================== tokens */
@layer tokens {
  :root {
    /* Marke – per Template-Parameter überschrieben */
    --ui-color-primary: #111111;
    --ui-color-on-primary: #ffffff;
    --ui-color-accent: #2db36f;
    --ui-color-on-accent: #ffffff;

    /* Handlungsfarbe für Buttons: im Hellen = Primärfarbe, im Dunkeln aufgehellt */
    --ui-color-action: var(--ui-color-primary);
    --ui-color-on-action: var(--ui-color-on-primary);
    --ui-color-action-hover: color-mix(in oklab, var(--ui-color-action) 82%, white);

    /* Flächen und Text (hell) */
    --ui-color-bg: #ffffff;
    --ui-color-surface: #f7f7f7;
    --ui-color-surface-2: #ededed;
    --ui-color-text: #1a1a1a;
    --ui-color-heading: #111111;
    --ui-color-text-muted: #666666;
    --ui-color-border: #e7e7e7;
    --ui-color-border-strong: #c9c9c9;
    --ui-color-link: var(--ui-color-heading);
    --ui-color-link-hover: var(--ui-color-text-muted);

    /* Status (Text auf Weiß ≥ 4.5:1) und Signalpunkte */
    --ui-color-success: #1b7a3d;
    --ui-color-warning: #9a6200;
    --ui-color-danger: #b42318;
    --ui-color-info: #1a1a1a;
    --ui-color-dot-green: #2db36f;
    --ui-color-dot-orange: #e8a33c;
    --ui-color-dot-red: #d94c3d;

    /* Schrift */
    --ui-font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ui-font-heading: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ui-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

    --ui-text-sm: 0.875rem;
    --ui-text-base: 1rem;
    --ui-text-lg: 1.15rem;
    /* Überschriften: Stufen wie bei gängigen Templates (h1 ≈ 40, h2 ≈ 28, h3 ≈ 20 px am Laptop) */
    --ui-text-h3: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
    --ui-text-h2: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
    --ui-text-h1: clamp(1.9rem, 1.45rem + 1.4vw, 2.5rem);
    --ui-leading: 1.6;
    --ui-leading-tight: 1.08;

    /* Abstände */
    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.5rem;
    --ui-space-6: 2rem;
    --ui-space-7: 3rem;
    --ui-space-8: clamp(3rem, 2rem + 4vw, 6rem);

    /* Form */
    --ui-radius-sm: 10px;
    --ui-radius: 16px;
    --ui-radius-lg: 24px;
    --ui-radius-pill: 999px;
    --ui-shadow: 0 14px 34px rgb(0 0 0 / 0.07);
    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-color-heading) 30%, transparent);

    /* Raster */
    --ui-container: 1320px;
    --ui-container-narrow: 46rem;
    --ui-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
    --ui-sidebar: 19rem;

    /* Bewegung */
    --ui-duration: 150ms;
    --ui-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    color-scheme: light;
  }

  /* Dunkles Schema: fest gewählt oder „auto“ + Systemeinstellung */
  :root[data-color-scheme="dark"] {
    --ui-color-bg: #111214;
    --ui-color-surface: #1a1b1e;
    --ui-color-surface-2: #232428;
    --ui-color-text: #e6e6e6;
    --ui-color-heading: #ffffff;
    --ui-color-text-muted: #a0a0a0;
    --ui-color-border: #2c2d31;
    --ui-color-border-strong: #45464b;
    --ui-color-link: var(--ui-color-heading);
    --ui-color-link-hover: var(--ui-color-text-muted);
    --ui-color-action: color-mix(in oklab, var(--ui-color-primary) 12%, white);
    --ui-color-on-action: #111111;
    --ui-color-action-hover: color-mix(in oklab, var(--ui-color-action) 85%, black);
    --ui-color-success: #5cc489;
    --ui-color-warning: #e8b04a;
    --ui-color-danger: #f0776c;
    --ui-color-info: #e6e6e6;
    --ui-shadow: 0 14px 34px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] {
      --ui-color-bg: #111214;
      --ui-color-surface: #1a1b1e;
      --ui-color-surface-2: #232428;
      --ui-color-text: #e6e6e6;
      --ui-color-heading: #ffffff;
      --ui-color-text-muted: #a0a0a0;
      --ui-color-border: #2c2d31;
      --ui-color-border-strong: #45464b;
      --ui-color-link: var(--ui-color-heading);
      --ui-color-link-hover: var(--ui-color-text-muted);
      --ui-color-action: color-mix(in oklab, var(--ui-color-primary) 12%, white);
      --ui-color-on-action: #111111;
      --ui-color-action-hover: color-mix(in oklab, var(--ui-color-action) 85%, black);
      --ui-color-success: #5cc489;
      --ui-color-warning: #e8b04a;
      --ui-color-danger: #f0776c;
      --ui-color-info: #e6e6e6;
      --ui-shadow: 0 14px 34px rgb(0 0 0 / 0.45);
      color-scheme: dark;
    }
  }

  /* Icon-Bibliothek: --ui-i-<name> (Strichstärke 1.75, 24er Raster). Nutzung über Klassen, siehe components. */
  :root {
    --ui-i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7M21 3v6h-6'/%3E%3C/svg%3E");
    --ui-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3zM12 9v4M12 16h.01'/%3E%3C/svg%3E");
    --ui-i-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3zM19 17l.8 2.2L22 20l-2.2.8L19 23l-.8-2.2L16 20l2.2-.8L19 17z'/%3E%3C/svg%3E");
    --ui-i-puzzle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4a2 2 0 1 1 4 0v1h4v4h1a2 2 0 1 1 0 4h-1v4h-4v-1a2 2 0 1 0-4 0v1H6v-4H5a2 2 0 1 1 0-4h1V5h4V4z'/%3E%3C/svg%3E");
    --ui-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E");
    --ui-i-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM4 10h16M10 10v9'/%3E%3C/svg%3E");
    --ui-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8zM9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
    --ui-i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7l-4 4-3-3 4-4a5 5 0 0 0-6.5 6.5L4 18l2 2 7.5-7.5A5 5 0 0 0 21 7z'/%3E%3C/svg%3E");
    --ui-i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E");
    --ui-i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --ui-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9L12 3z'/%3E%3C/svg%3E");
    --ui-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --ui-i-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v12H4zM9 8V5h6v3M4 13h16'/%3E%3C/svg%3E");
    --ui-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM12 8v4l3 2'/%3E%3C/svg%3E");
    --ui-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3l9-16zM12 10v4M12 17h.01'/%3E%3C/svg%3E");
    --ui-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
    --ui-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    --ui-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6'/%3E%3C/svg%3E");
    --ui-i-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v3a2 2 0 0 0 0 4v3H4v-3a2 2 0 0 0 0-4V8zM14 8v10'/%3E%3C/svg%3E");
    --ui-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --ui-i-eye-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM3 3l18 18'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --ui-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
    --ui-i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    --ui-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
    --ui-i-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a1 1 0 0 1-1-1v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E");
    --ui-i-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16zM13 7l4 4'/%3E%3C/svg%3E");
    --ui-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    --ui-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
    --ui-i-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    --ui-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --ui-i-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
    --ui-i-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
    --ui-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    --ui-i-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6l-6 6 6 6M18 6l-6 6 6 6'/%3E%3C/svg%3E");
    --ui-i-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l6 6-6 6M12 6l6 6-6 6'/%3E%3C/svg%3E");
    --ui-i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1'/%3E%3C/svg%3E");
    --ui-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9H4zM10 20v-6h4v6'/%3E%3C/svg%3E");
    --ui-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  }
}

/* ====================================================================== base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 6rem;
  }

  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ui-color-bg);
    color: var(--ui-color-text);
    font: var(--ui-text-base) / var(--ui-leading) var(--ui-font-body);
    -webkit-font-smoothing: antialiased;
    /* lange Wörter und URLs brechen am Rand um statt überzulaufen (Safari bricht sonst nicht) */
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
    margin: 0 0 var(--ui-space-4);
    color: var(--ui-color-heading);
    font-family: var(--ui-font-heading);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  h1, .h1 { font-size: var(--ui-text-h1); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
  h2, .h2 { font-size: var(--ui-text-h2); line-height: var(--ui-leading-tight); letter-spacing: -0.02em; }
  h3, .h3 { font-size: var(--ui-text-h3); }
  h4 { font-size: 1.1rem; }
  h5, h6 { font-size: var(--ui-text-base); }

  /* Unterseiten: Überschrift etwas kleiner als auf der Startseite */
  .view-article .page-header h1, .view-category .page-header h1, .com-contact h1, .com-users h1, .com-finder h1, .com-tags h1 {
    font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.25rem);
  }

  p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 var(--ui-space-4); }
  p { text-wrap: pretty; }
  ul, ol { padding-inline-start: 1.25em; }
  strong, b { font-weight: 600; }

  a { color: var(--ui-color-link); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
  a:hover { color: var(--ui-color-link-hover); }

  img, svg, video, iframe { max-width: 100%; height: auto; }
  img { vertical-align: middle; }

  hr { border: 0; border-top: 1px solid var(--ui-color-border); margin: var(--ui-space-6) 0; }

  blockquote {
    padding-inline-start: var(--ui-space-4);
    border-inline-start: 3px solid var(--ui-color-heading);
    color: var(--ui-color-text-muted);
  }

  code, kbd, pre { font-family: var(--ui-font-mono); font-size: 0.9em; }
  pre { overflow-x: auto; padding: var(--ui-space-4); background: var(--ui-color-surface); border-radius: var(--ui-radius-sm); }

  details { margin-bottom: var(--ui-space-3); }
  summary { cursor: pointer; font-weight: 600; }

  :focus-visible { outline: 2px solid var(--ui-color-heading); outline-offset: 3px; }
  [tabindex="-1"]:focus { outline: none; }

  ::selection { background: color-mix(in srgb, var(--ui-color-heading) 18%, transparent); }

  .ui-skip {
    position: absolute;
    inset-inline-start: var(--ui-space-4);
    top: -100px;
    z-index: 1000;
    padding: var(--ui-space-2) var(--ui-space-4);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-action);
    color: var(--ui-color-on-action);
  }
  .ui-skip:focus { top: var(--ui-space-2); }
}

/* ==================================================================== compat */
/* Nur Klassennamen, die der Joomla-Kern ausgibt. Kein Bootstrap-Nachbau. */
@layer compat {
  .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .hidden, [hidden] { display: none !important; }

  .list-unstyled, .mod-list, .mod-articles-items, .mod-articles { list-style: none; padding-inline-start: 0; }
  .list-inline { list-style: none; padding-inline-start: 0; }
  .list-inline-item { display: inline-block; }
  .list-inline-item:not(:last-child) { margin-inline-end: var(--ui-space-2); }

  .float-start, .pull-left { float: inline-start; margin-inline-end: var(--ui-space-4); margin-bottom: var(--ui-space-3); }
  .float-end, .pull-right { float: inline-end; margin-inline-start: var(--ui-space-4); margin-bottom: var(--ui-space-3); }
  .float-none { float: none; }
  .clearfix::after { content: ""; display: table; clear: both; }
  .img-fluid { max-width: 100%; height: auto; }
  .w-100 { width: 100%; }
  .text-muted, .small, small { color: var(--ui-color-text-muted); }
  .small, small { font-size: var(--ui-text-sm); }

  /* Icons des Kerns (<span class="icon-…" aria-hidden="true">, sonst Font Awesome) als Masken.
     Unbekannte Icons bleiben unsichtbar statt als Quadrat. */
  [class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
    background: currentColor;
    -webkit-mask: var(--ui-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
    mask: var(--ui-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
  }
  .icon-eye, .icon-hits { --ui-icon: var(--ui-i-eye); }
  .icon-eye-slash { --ui-icon: var(--ui-i-eye-slash); }
  .icon-search, .icon-search-plus { --ui-icon: var(--ui-i-search); }
  .icon-calendar { --ui-icon: var(--ui-i-calendar); }
  .icon-user, .icon-users { --ui-icon: var(--ui-i-user); }
  .icon-folder, .icon-folder-open, .icon-folder-close { --ui-icon: var(--ui-i-folder); }
  .icon-tag, .icon-tags { --ui-icon: var(--ui-i-tag); }
  .icon-envelope, .icon-mail { --ui-icon: var(--ui-i-mail); }
  .icon-print { --ui-icon: var(--ui-i-print); }
  .icon-edit, .icon-pencil { --ui-icon: var(--ui-i-edit); }
  .icon-lock { --ui-icon: var(--ui-i-lock); }
  .icon-chevron-down { --ui-icon: var(--ui-i-chevron-down); }
  .icon-chevron-up, .icon-arrow-up { --ui-icon: var(--ui-i-chevron-up); }
  .icon-chevron-left, .icon-arrow-left, .icon-angle-left { --ui-icon: var(--ui-i-chevron-left); }
  .icon-chevron-right, .icon-arrow-right, .icon-angle-right { --ui-icon: var(--ui-i-chevron-right); }
  /* Seitennavigation des Kerns: erste/letzte Seite */
  .icon-angle-double-left { --ui-icon: var(--ui-i-chevrons-left); }
  .icon-angle-double-right { --ui-icon: var(--ui-i-chevrons-right); }
  .icon-times, .icon-cancel, .icon-cancel-2, .icon-delete, .icon-trash { --ui-icon: var(--ui-i-x); }
  .icon-plus, .icon-plus-2, .icon-new { --ui-icon: var(--ui-i-plus); }
  .icon-check, .icon-publish, .icon-checkmark, .icon-save, .icon-ok { --ui-icon: var(--ui-i-check); }
  .icon-warning, .icon-exclamation-triangle { --ui-icon: var(--ui-i-alert); }
  .icon-address, .icon-location { --ui-icon: var(--ui-i-map-pin); }
  .icon-phone, .icon-mobile, .icon-fax { --ui-icon: var(--ui-i-phone); }
  .icon-home { --ui-icon: var(--ui-i-home); }
  .icon-link, .icon-out-2, .icon-new-tab { --ui-icon: var(--ui-i-link); }

  /* Hilfsklassen mit Bootstrap-Namen, wie sie der Kern ausgibt (z. B. Mehr-Faktor-Seiten, Profil).
     Bewusst klein: Anzeige, Flex, Abstände (Bootstrap-Skala), Rahmen, Text. */
  .d-none { display: none !important; } .d-block { display: block !important; } .d-inline { display: inline !important; }
  .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-grid { display: grid !important; }
  .flex-wrap { flex-wrap: wrap !important; } .flex-column { flex-direction: column !important; } .flex-row { flex-direction: row !important; }
  .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-fill { flex: 1 1 auto !important; }
  .align-items-start { align-items: flex-start !important; } .align-items-center { align-items: center !important; } .align-items-end { align-items: flex-end !important; }
  .justify-content-start { justify-content: flex-start !important; } .justify-content-center { justify-content: center !important; }
  .justify-content-end { justify-content: flex-end !important; } .justify-content-between { justify-content: space-between !important; }
  .gap-0 { gap: 0 !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; }
  .m-0 { margin: 0 !important; } .m-1 { margin: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .m-3 { margin: 1rem !important; } .m-4 { margin: 1.5rem !important; } .m-5 { margin: 3rem !important; }
  .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; }
  .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
  .ms-0 { margin-inline-start: 0 !important; } .ms-1 { margin-inline-start: 0.25rem !important; } .ms-2 { margin-inline-start: 0.5rem !important; } .ms-3 { margin-inline-start: 1rem !important; } .ms-4 { margin-inline-start: 1.5rem !important; } .ms-5 { margin-inline-start: 3rem !important; }
  .me-0 { margin-inline-end: 0 !important; } .me-1 { margin-inline-end: 0.25rem !important; } .me-2 { margin-inline-end: 0.5rem !important; } .me-3 { margin-inline-end: 1rem !important; } .me-4 { margin-inline-end: 1.5rem !important; } .me-5 { margin-inline-end: 3rem !important; }
  .mx-0 { margin-inline-start: 0 !important; margin-inline-end: 0 !important; } .mx-1 { margin-inline-start: 0.25rem !important; margin-inline-end: 0.25rem !important; } .mx-2 { margin-inline-start: 0.5rem !important; margin-inline-end: 0.5rem !important; } .mx-3 { margin-inline-start: 1rem !important; margin-inline-end: 1rem !important; } .mx-4 { margin-inline-start: 1.5rem !important; margin-inline-end: 1.5rem !important; } .mx-5 { margin-inline-start: 3rem !important; margin-inline-end: 3rem !important; }
  .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .p-0 { padding: 0 !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; }
  .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pt-5 { padding-top: 3rem !important; }
  .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 3rem !important; }
  .ps-0 { padding-inline-start: 0 !important; } .ps-1 { padding-inline-start: 0.25rem !important; } .ps-2 { padding-inline-start: 0.5rem !important; } .ps-3 { padding-inline-start: 1rem !important; } .ps-4 { padding-inline-start: 1.5rem !important; } .ps-5 { padding-inline-start: 3rem !important; }
  .pe-0 { padding-inline-end: 0 !important; } .pe-1 { padding-inline-end: 0.25rem !important; } .pe-2 { padding-inline-end: 0.5rem !important; } .pe-3 { padding-inline-end: 1rem !important; } .pe-4 { padding-inline-end: 1.5rem !important; } .pe-5 { padding-inline-end: 3rem !important; }
  .px-0 { padding-inline-start: 0 !important; padding-inline-end: 0 !important; } .px-1 { padding-inline-start: 0.25rem !important; padding-inline-end: 0.25rem !important; } .px-2 { padding-inline-start: 0.5rem !important; padding-inline-end: 0.5rem !important; } .px-3 { padding-inline-start: 1rem !important; padding-inline-end: 1rem !important; } .px-4 { padding-inline-start: 1.5rem !important; padding-inline-end: 1.5rem !important; } .px-5 { padding-inline-start: 3rem !important; padding-inline-end: 3rem !important; }
  .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .ms-auto { margin-inline-start: auto !important; } .me-auto { margin-inline-end: auto !important; } .mx-auto { margin-inline: auto !important; }
  .border { border: 1px solid var(--ui-color-border) !important; } .border-0 { border: 0 !important; } .border-1 { border-width: 1px !important; }
  .border-top { border-top: 1px solid var(--ui-color-border) !important; } .border-bottom { border-bottom: 1px solid var(--ui-color-border) !important; }
  .rounded, .rounded-2 { border-radius: var(--ui-radius-sm) !important; } .rounded-3 { border-radius: var(--ui-radius) !important; } .rounded-pill { border-radius: var(--ui-radius-pill) !important; }
  .bg-light { background: var(--ui-color-surface) !important; } .bg-white { background: var(--ui-color-bg) !important; }
  .text-start { text-align: start !important; } .text-center { text-align: center !important; } .text-end { text-align: end !important; }
  .fw-bold { font-weight: 600 !important; } .fw-normal { font-weight: 400 !important; } .text-nowrap { white-space: nowrap !important; }
  .h4 { font-size: 1.1rem; } .h5 { font-size: 1rem; } .h6 { font-size: 0.9rem; }

  /* Mehr-Faktor-Anmeldung: Methoden-Logos klein halten */
  .com-users-methods-list-method-image img, .com-users-method-edit-image img, .users-mfa-captive-method-image img { width: auto; max-height: 2.5rem; }
  .com-users-methods-list-method .card-header h2 { font-size: 1.15rem; }

  .page-header { margin-bottom: var(--ui-space-5); }
  .page-header h1, .page-header h2 { margin-bottom: 0; }

  /* Buttons: Pillen. primary = schwarz gefüllt, secondary = Umriss, der beim Hover schwarz wird */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border: 1.5px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-color-heading);
    font: inherit;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
  }
  .btn:hover, .btn-secondary:hover, [class*="btn-outline-"]:hover {
    background: var(--ui-color-action);
    border-color: var(--ui-color-action);
    color: var(--ui-color-on-action);
  }
  .btn:focus-visible { outline: 2px solid var(--ui-color-heading); outline-offset: 3px; }
  .btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }
  .btn-primary { background: var(--ui-color-action); border-color: var(--ui-color-action); color: var(--ui-color-on-action); }
  .btn-primary:hover { background: var(--ui-color-action-hover); border-color: var(--ui-color-action-hover); color: var(--ui-color-on-action); }
  .btn-success { background: var(--ui-color-success); border-color: var(--ui-color-success); color: #fff; }
  .btn-danger { background: var(--ui-color-danger); border-color: var(--ui-color-danger); color: #fff; }
  .btn-link { min-height: 0; padding-inline: 0; border-color: transparent; color: var(--ui-color-link); text-decoration: underline; }
  .btn-link:hover { background: none; border-color: transparent; color: var(--ui-color-link-hover); }
  .btn-sm { min-height: 0; padding: 0.45rem 1rem; font-size: 0.9rem; }
  .btn-lg { min-height: 52px; padding: 0.85rem 1.8rem; font-size: 1.05rem; }

  /* Formulare */
  .form-control, .form-select,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="url"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-color-bg);
    color: var(--ui-color-text);
    font: inherit;
    line-height: 1.4;
  }
  .form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ui-color-heading);
    box-shadow: var(--ui-focus-ring);
  }
  textarea { min-height: 8rem; resize: vertical; }
  input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--ui-color-heading); }

  fieldset { border: 0; padding: 0; margin: 0 0 var(--ui-space-5); min-width: 0; }
  legend { font-size: 0.95rem; color: var(--ui-color-text-muted); margin-bottom: var(--ui-space-3); }

  .control-group, .form-group { margin-bottom: var(--ui-space-4); }
  .control-label, .form-label, label { display: inline-block; margin-bottom: var(--ui-space-1); font-weight: 400; }
  .controls { min-width: 0; }
  .form-check { display: flex; align-items: center; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
  /* Einzelnes Kontrollkästchen mit eigener Beschriftung (z. B. „Kopie an mich“): Kästchen links neben dem Text */
  .control-group:has(> .controls > .form-check:only-child > input[type="checkbox"]:only-child) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: var(--ui-space-2);
  }
  .control-group:has(> .controls > .form-check:only-child > input[type="checkbox"]:only-child) :is(.form-check, label) { margin: 0; }
  .control-group:has(> .controls > .form-check:only-child > input[type="checkbox"]:only-child) label { font-weight: 400; }

  /* Suche: Kern-CSS setzt „.com-finder * { margin-bottom: 0 }“ – Abstände deshalb über gap */
  .com-finder .filter-branch, .com-finder__advanced .filter-branch { display: grid; gap: var(--ui-space-4); clear: both; padding-top: var(--ui-space-4); }
  .com-finder .control-label { padding-bottom: var(--ui-space-1); }

  /* Bootstrap-JS-Komponenten, die der Kern einzeln nachlädt (ohne Bootstrap-CSS):
     collapse → „Erweiterte Suche“, dropdown → Sortierung der Suchergebnisse, tooltip → Profil/Mehr-Faktor */
  .collapse:not(.show) { display: none; }
  .collapsing { height: 0; overflow: hidden; transition: height var(--ui-duration) ease; }
  .dropdown { position: relative; }
  .dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 12rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    border: 1px solid var(--ui-color-border);
    border-radius: 12px;
    background: var(--ui-color-bg);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.08);
  }
  .dropdown-menu.show { display: block; }
  .dropdown-item { display: block; padding: 0.45rem 0.75rem; border-radius: var(--ui-radius-sm); color: var(--ui-color-heading); text-decoration: none; white-space: nowrap; }
  .dropdown-item:hover, .dropdown-item:focus-visible, .dropdown-item.active { background: var(--ui-color-surface); color: var(--ui-color-heading); }
  .dropdown-toggle::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-inline-start: 0.4rem;
    border-right: 1.75px solid currentColor;
    border-bottom: 1.75px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .tooltip { position: absolute; z-index: 1080; display: block; font-size: 0.8rem; opacity: 0; transition: opacity var(--ui-duration); }
  .tooltip.show { opacity: 1; }
  .tooltip-inner { max-width: 20rem; padding: 0.4rem 0.65rem; border-radius: var(--ui-radius-sm); background: var(--ui-color-action); color: var(--ui-color-on-action); }
  .tooltip-arrow { display: none; }
  /* modal → z. B. Datenschutzerklärung im Kontaktformular (Inhalt - Bestätigung), sonst stünde der Dialog offen im Formular */
  .modal { position: fixed; inset: 0; z-index: 1055; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; }
  .modal.show { display: block; }
  .modal-dialog { position: relative; width: auto; max-width: min(56rem, calc(100% - 2rem)); margin: 1.75rem auto; transition: transform var(--ui-duration) ease; }
  .modal.fade:not(.show) .modal-dialog { transform: translateY(-1rem); }
  .modal-content { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ui-radius-lg); background: var(--ui-color-bg); box-shadow: var(--ui-shadow); }
  .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-4) var(--ui-space-5); border-bottom: 1px solid var(--ui-color-border); }
  .modal-title { margin: 0; font-size: var(--ui-text-lg, 1.15rem); }
  .modal-body { position: relative; flex: 1 1 auto; padding: var(--ui-space-4) var(--ui-space-5); }
  .modal-body:has(> iframe) { padding: 0; }
  .modal-body > iframe { display: block; width: 100%; height: 100%; border: 0; }
  .jviewport-height70 { height: 70vh; }
  .modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: #000; opacity: 0; transition: opacity var(--ui-duration); }
  .modal-backdrop.show { opacity: 0.5; }
  .modal-open { overflow: hidden; }
  .btn-close { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-color-heading); cursor: pointer; }
  .btn-close::before { content: ""; display: block; width: 1rem; height: 1rem; margin: auto; background: currentColor; -webkit-mask: var(--ui-i-x) center / contain no-repeat; mask: var(--ui-i-x) center / contain no-repeat; }
  .btn-close:hover { background: var(--ui-color-surface); }
  .com-finder .result__title-url, .com-finder .result__taxonomy { overflow-wrap: anywhere; }
  /* Kern-CSS (com_finder) färbt Datum und Adresse fest #575757 – im Dunkelschema unlesbar */
  .com-finder .result__date, .com-finder .result__title-url { color: var(--ui-color-text-muted) !important; }
  .com-finder .result__item + .result__item { border-top-color: var(--ui-color-border) !important; }
  .form-check-label { margin: 0; font-weight: 400; }
  .form-text, .form-control-feedback { display: block; margin-top: var(--ui-space-1); font-size: var(--ui-text-sm); color: var(--ui-color-text-muted); }
  .star { color: var(--ui-color-danger); }
  .invalid, .form-control.invalid, .is-invalid { border-color: var(--ui-color-danger) !important; }
  label.invalid { color: var(--ui-color-danger); }
  .invalid-feedback { color: var(--ui-color-danger); font-size: var(--ui-text-sm); }

  .input-group { display: flex; align-items: stretch; }
  .input-group > .form-control { flex: 1 1 auto; min-width: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
  .input-group > .btn, .input-group > .input-group-text { border-radius: 0; }
  .input-group > :last-child { border-start-end-radius: var(--ui-radius-sm); border-end-end-radius: var(--ui-radius-sm); }
  .input-group > .btn { min-height: 0; }
  /* Autovervollständigung der Suche (awesomplete) packt das Feld zur Laufzeit in ein <div> */
  .input-group > .awesomplete { flex: 1 1 auto; min-width: 0; display: block; }
  .input-group > .awesomplete > .form-control { border-start-end-radius: 0; border-end-end-radius: 0; }
  /* Knöpfe neben Feldern (Passwort-Auge, Suche, Kalender): eine Linie statt zwei */
  .input-group > .btn { border-width: 1px; }
  .input-group > .btn:not(.btn-primary) { border-color: var(--ui-color-border-strong); }
  .input-group > :is(.btn, .input-group-text):not(:first-child) { border-inline-start-width: 0; }
  /* Drei Elemente (z. B. Suchfeld + Suchen + Erweiterte Suche): auf schmalen Bildschirmen
     wandert das dritte in eine eigene Zeile, sonst bleibt für das Feld kein Platz */
  @media (max-width: 35.99rem) {
    .input-group:has(> :nth-child(3):last-child) { flex-wrap: wrap; row-gap: var(--ui-space-2); }
    .input-group:has(> :nth-child(3):last-child) > :first-child { flex: 1 1 0; }
    .input-group:has(> :nth-child(3):last-child) > :nth-child(2) { border-start-end-radius: var(--ui-radius-sm); border-end-end-radius: var(--ui-radius-sm); }
    .input-group:has(> :nth-child(3):last-child) > :last-child { flex: 1 1 100%; border-inline-start-width: 1px; border-radius: var(--ui-radius-pill); }
  }
  /* Suchfeld im Kopf als Pille: Feld und Knopf bilden eine Form */
  .ui-header .input-group > .form-control, .ui-header .input-group > .awesomplete > .form-control {
    padding-inline-start: 1.1rem;
    border-start-start-radius: var(--ui-radius-pill);
    border-end-start-radius: var(--ui-radius-pill);
  }
  .ui-header .input-group > .btn:last-child {
    padding-inline: 1.1rem 1.3rem;
    border-start-end-radius: var(--ui-radius-pill);
    border-end-end-radius: var(--ui-radius-pill);
  }
  .input-group-text { display: flex; align-items: center; padding: 0 0.85em; border: 1px solid var(--ui-color-border-strong); border-inline-start: 0; background: var(--ui-color-surface); color: var(--ui-color-text-muted); }
  .input-password-toggle { padding-inline: 0.85em; }

  /* Hinweise und Systemmeldungen (<joomla-alert> bringt eigenes Verhalten mit) */
  .alert, joomla-alert {
    display: block;
    position: relative;
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
    border: 1px solid var(--ui-color-border);
    border-inline-start: 4px solid currentColor;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-color-surface);
    color: var(--ui-color-info);
  }
  .alert > *, joomla-alert > * { color: var(--ui-color-text); }
  .alert-success, joomla-alert[type="success"] { color: var(--ui-color-success); }
  .alert-warning, joomla-alert[type="warning"] { color: var(--ui-color-warning); }
  .alert-danger, .alert-error, joomla-alert[type="danger"], joomla-alert[type="error"] { color: var(--ui-color-danger); }
  .alert-heading { margin-bottom: var(--ui-space-2); font-size: var(--ui-text-base); }
  joomla-alert .alert-heading { color: inherit; }
  joomla-alert .joomla-alert--close {
    position: absolute;
    inset-inline-end: var(--ui-space-2);
    top: var(--ui-space-2);
    border: 0;
    background: none;
    color: var(--ui-color-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  /* Tabellen: nur Linien */
  .table, table.category, main table {
    width: 100%;
    border-collapse: collapse;
  }
  .table th, .table td, table.category th, table.category td, main table th, main table td {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--ui-color-border);
    text-align: start;
    vertical-align: top;
  }
  .table thead th, table.category thead th, main table thead th {
    border-bottom-color: var(--ui-color-heading);
    color: var(--ui-color-heading);
    font-family: var(--ui-font-heading);
    font-weight: 400;
  }
  .table-striped tbody tr:nth-child(odd) { background: var(--ui-color-surface); }
  .table-hover tbody tr:hover { background: var(--ui-color-surface); }
  .table-responsive { overflow-x: auto; }

  /* Badges */
  .badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-surface-2);
    color: var(--ui-color-heading);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .badge.bg-primary, .badge.bg-info, .badge.bg-dark { background: var(--ui-color-action); color: var(--ui-color-on-action); }
  .badge.bg-success { background: var(--ui-color-success); color: #fff; }
  .badge.bg-warning { background: var(--ui-color-warning); color: #fff; }
  .badge.bg-danger { background: var(--ui-color-danger); color: #fff; }

  /* Seitennavigation */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1);
    list-style: none;
    padding: 0;
    margin: var(--ui-space-5) 0;
  }
  .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-1);
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    text-decoration: none;
  }
  .page-item.active .page-link { background: var(--ui-color-action); border-color: var(--ui-color-action); color: var(--ui-color-on-action); }
  .page-item.disabled .page-link { color: var(--ui-color-text-muted); border-color: var(--ui-color-border); pointer-events: none; }
  .counter { color: var(--ui-color-text-muted); font-size: var(--ui-text-sm); }

  /* Brotkrumen: klein und grau */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    list-style: none;
    padding: 0 !important;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ui-color-text-muted);
  }
  .breadcrumb a { color: var(--ui-color-text-muted); }
  .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-inline-end: var(--ui-space-2); }
  .mod-breadcrumbs__here { float: none; margin: 0; }

  /* Karten aus Kernausgaben */
  .card { border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ui-color-bg); }
  .card-header { padding: var(--ui-space-4) var(--ui-space-5); border-bottom: 1px solid var(--ui-color-border); background: none; }
  .card-body { padding: var(--ui-space-5); }

  /* Beitrags-Metadaten und Bilder */
  .article-info { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-4); margin: 0 0 var(--ui-space-4); color: var(--ui-color-text-muted); font-size: 0.9rem; }
  .article-info dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .article-info dd { margin: 0; }
  .article-info a { color: inherit; }
  .item-image, .page-header + figure { margin-bottom: var(--ui-space-4); }
  .item-image img { border-radius: var(--ui-radius); }
  figcaption { margin-top: var(--ui-space-2); font-size: var(--ui-text-sm); color: var(--ui-color-text-muted); }
  .tags { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); list-style: none; padding: 0; }
  .readmore { margin-top: var(--ui-space-3); }

  /* Blog und Beitragsmodul als Karten */
  .blog-items { display: grid; gap: var(--ui-space-5); }
  /* Führende Beiträge und Spaltenreihe sind getrennte Container: Abstand dazwischen */
  .blog-items:not(:last-child) { margin-bottom: var(--ui-space-5); }
  /* Spaltenzahl aus dem Menüpunkt ist die Obergrenze; schmalere Bildschirme bekommen weniger Spalten */
  .blog-items.columns-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(20rem, (100% - var(--ui-space-5)) / 2)), 1fr)); }
  .blog-items.columns-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(16rem, (100% - 2 * var(--ui-space-5)) / 3)), 1fr)); }
  .blog-items.columns-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, (100% - 3 * var(--ui-space-5)) / 4)), 1fr)); }
  .blog-item, .mod-articles-items .mod-articles-item {
    height: 100%;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: var(--ui-color-bg);
    overflow: hidden;
  }
  .blog-item .item-content, .mod-articles-item-content { padding: var(--ui-space-5); }
  .blog-item > figure, .blog-item .item-image { margin: 0; }
  .blog-item .item-image img { border-radius: 0; width: 100%; }
  .blog-item .item-content > :last-child, .mod-articles-item-content > :last-child { margin-bottom: 0; }
  .blog-item h2, .mod-articles-title { font-size: 1.25rem; letter-spacing: -0.01em; }
  .blog-item h2 a, .mod-articles-title a { text-decoration: none; }
  .mod-articles-item .mod-articles-image img { width: 100%; border-radius: var(--ui-radius-sm); }
  /* Liste ohne Rahmen (z. B. Archiv, ältere Beiträge) */
  .mod-articles-items:not(.mod-articles-grid) .mod-articles-item { height: auto; border: 0; border-radius: 0; border-bottom: 1px solid var(--ui-color-border); }
  .mod-articles-items:not(.mod-articles-grid) .mod-articles-item-content { padding: var(--ui-space-3) 0; }

  /* Tabs (<joomla-tab>) */
  joomla-tab { display: block; }
  joomla-tab > div[role="tablist"] { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); border-bottom: 1px solid var(--ui-color-border); }
  joomla-tab > div[role="tablist"] button {
    padding: var(--ui-space-2) var(--ui-space-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ui-color-text);
    font: inherit;
    cursor: pointer;
  }
  joomla-tab > div[role="tablist"] button[aria-expanded="true"] { border-bottom-color: var(--ui-color-heading); font-weight: 600; }
  joomla-tab-element { display: none; padding: var(--ui-space-4) 0; }
  joomla-tab-element[active] { display: block; }

  /* Gruppen und Listen aus Kernausgaben (Login-Optionen, Tags, Filterleisten) */
  .btn-group, .btn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin-bottom: var(--ui-space-4); }
  .btn-group > input, .btn-group > .form-control, .btn-group > .inputbox { flex: 1 1 16rem; width: auto; }
  .btn-group.float-end { margin-inline-start: auto; }
  .list-group { display: flex; flex-direction: column; gap: var(--ui-space-2); list-style: none; padding: 0; margin: 0 0 var(--ui-space-4); }
  .list-group-item { display: block; }
  ul.list-group { gap: 0; clear: both; }
  ul.list-group > .list-group-item { padding: var(--ui-space-3) 0; border-bottom: 1px solid var(--ui-color-border); }
  ul.list-group > .list-group-item:first-child { border-top: 1px solid var(--ui-color-border); }
  .list-group-item h3 { margin: 0; font-size: 1.1rem; }
  .list-group-item h3 a { text-decoration: none; }

  /* Frontend-Bearbeitung (nur für angemeldete Redakteure): Kern fügt in jedes Modul
     <a class="jmodedit"> + <div role="tooltip"> ein, Beiträge bekommen Bearbeiten-Links mit Tooltip.
     Modul-Symbole erscheinen erst beim Überfahren des Moduls (mit Rahmen), damit sie keinen Text verdecken;
     ohne Maus (Touch) bleiben sie sichtbar. Per Tastatur erreichbar sind sie immer. */
  :has(> .jmodedit) { position: relative; }
  .jmodedit {
    position: absolute;
    z-index: 20;
    top: var(--ui-space-1);
    inset-inline-end: var(--ui-space-1);
    min-height: 0;
    padding: 0.3rem;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-bg);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
    color: var(--ui-color-heading);
    line-height: 1;
  }
  @media (hover: hover) {
    .jmodedit { opacity: 0; transition: opacity 0.15s; }
    :has(> .jmodedit):hover { outline: 1px dashed var(--ui-color-border-strong); outline-offset: -1px; }
    :has(> .jmodedit):hover > .jmodedit, .jmodedit:focus-visible { opacity: 1; }
  }
  .ui-nav .jmodedit, .ui-header .jmodedit { top: 0.15rem; inset-inline-end: 0.15rem; padding: 0.2rem; }
  [role="tooltip"]:not(.show) { display: none; }
  :is(a, button):is(:hover, :focus-visible) + [role="tooltip"] {
    display: block;
    position: absolute;
    z-index: 21;
    max-width: 20rem;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-color-action);
    color: var(--ui-color-on-action);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: start;
  }
  .jmodedit:is(:hover, :focus-visible) + [role="tooltip"] { top: 2.6rem; inset-inline-end: var(--ui-space-1); }
  /* „Bearbeiten“ eines Beitrags schwebt oben rechts über dem Inhalt; angedockt (float) würde ein Slider, Bild oder
     Raster am Beitragsanfang ausweichen und schmaler werden */
  .com-content-article, .blog-item { position: relative; }
  :is(.com-content-article, .blog-item) > .icons {
    position: absolute;
    z-index: 25;
    top: var(--ui-space-2);
    inset-inline-end: var(--ui-space-2);
    margin: 0;
  }
  :is(.com-content-article, .blog-item) > .icons a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-bg);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    color: var(--ui-color-heading);
    font-size: 0.875rem;
    text-decoration: none;
  }

  /* Definitionslisten in Kernausgaben (Kontakt-Adresse, Profil) */
  dl.dl-horizontal, .com-users-profile dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--ui-space-1) var(--ui-space-4);
  }
  :is(dl.dl-horizontal, .com-users-profile dl) > dt { grid-column: 1; color: var(--ui-color-text-muted); font-weight: 400; }
  :is(dl.dl-horizontal, .com-users-profile dl) > dd { grid-column: 2; margin: 0; }
  /* Mehrere dd gehören zu einem dt: Abstand nur vor einer neuen Gruppe */
  dl.dl-horizontal > dt:not(:first-child), dl.dl-horizontal > dt:not(:first-child) + dd { margin-top: var(--ui-space-3); }

  /* Spam-Schutz „POW Captcha“ (ALTCHA, ab Joomla 6.1): nur über Variablen anbinden.
     Braucht HTTPS – auf reinen HTTP-Seiten bleibt es bei „Überprüfen…“ stehen. */
  altcha-widget {
    --altcha-border-radius: var(--ui-radius);
    --altcha-border-width: 1px;
    --altcha-color-base: var(--ui-color-bg);
    --altcha-color-text: var(--ui-color-text);
    --altcha-color-border: var(--ui-color-border-strong);
    --altcha-color-border-focus: var(--ui-color-action);
    --altcha-color-active: var(--ui-color-action);
    --altcha-color-error-text: var(--ui-color-danger);
    --altcha-color-footer-bg: var(--ui-color-surface);
    --altcha-max-width: 20rem;
    display: block;
  }

  /* Suchauswahl (joomla-field-fancy-select / choices.js). Das Kern-CSS liegt außerhalb der Ebenen
     und gewinnt, liest aber Variablen – darüber wird es an die Tokens angebunden statt überschrieben. */
  :root {
    --choices-bg-color: var(--ui-color-bg);
    --choices-bg-color-dropdown: var(--ui-color-bg);
    --choices-bg-color-disabled: var(--ui-color-surface);
    --choices-keyline-color: var(--ui-color-border-strong);
    --choices-text-color: var(--ui-color-text);
    --choices-item-color: var(--ui-color-text);
    --choices-primary-color: var(--ui-color-action);
    --choices-highlighted-color: var(--ui-color-surface);
    --choices-highlight-color: var(--ui-color-heading);
    --choices-border-radius: var(--ui-radius-sm);
    --choices-border-radius-item: var(--ui-radius-pill);
    --choices-font-size-lg: 1rem;
    --choices-font-size-md: 0.95rem;
    --choices-font-size-sm: 0.85rem;
    --choices-guttering: 0;
    --choices-inner-one-padding: 0.45rem;
    --choices-z-index: 30;
  }
  .choices__inner { min-height: 48px; }
  .choices.is-focused .choices__inner, .choices.is-open .choices__inner { border-color: var(--ui-color-heading); }
  .choices__button_joomla {
    position: relative;
    padding: 0 10px;
    border: 0;
    background: none;
    color: inherit;
    text-indent: -9999px;
    opacity: 0.5;
    appearance: none;
    cursor: pointer;
  }
  .choices__button_joomla::before { content: "×"; position: absolute; inset: 0; display: block; text-align: center; text-indent: 0; }
  .choices__button_joomla:is(:hover, :focus-visible) { opacity: 1; }

  /* Suchtreffer hervorheben */
  mark, .highlight { padding: 0 0.1em; border-radius: 3px; background: color-mix(in srgb, var(--ui-color-dot-green) 28%, transparent); color: inherit; }

  /* Tag-Wolke */
  .tagspopular ul, .tagscloud { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); list-style: none; padding: 0; }
  .tagscloud .tag-name, .tagspopular a { display: inline-block; padding: 0.3rem 0.85rem; border: 1px solid var(--ui-color-border-strong); border-radius: var(--ui-radius-pill); font-size: 0.9rem; text-decoration: none; }
  .tagscloud .tag-count { margin-inline-start: var(--ui-space-1); }
}

/* ==================================================================== layout */
@layer layout {
  .ui-container {
    width: 100%;
    max-width: calc(var(--ui-container) + 2 * var(--ui-gutter));
    margin-inline: auto;
    padding-inline: var(--ui-gutter);
  }

  /* Topbar: dezente Hinweisleiste */
  .ui-topbar { background: var(--ui-color-surface); border-bottom: 1px solid var(--ui-color-border); color: var(--ui-color-text-muted); font-size: 0.88rem; }
  .ui-topbar .ui-container { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-5); justify-content: space-between; padding-block: 0.4rem; }
  .ui-topbar p { margin: 0; }
  .ui-topbar strong, .ui-topbar a { color: var(--ui-color-heading); }
  .ui-topbar .mod-languages { margin-inline-start: auto; }

  /* Sprachumschalter (mod_languages) */
  .mod-languages__list { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); list-style: none; margin: 0; padding: 0; }
  /* Kern-CSS (media/mod_languages, außerhalb der Ebenen) setzt hellgrauen Hintergrund (#f0f0f0), Ränder und
     Innenabstände – deshalb !important. Hervorhebung aus der Textfarbe, passt auf hell, dunkel und dunklen Bändern. */
  .mod-languages__list li { margin: 0 !important; background: none !important; }
  .mod-languages__list a { display: inline-flex; align-items: center; gap: var(--ui-space-1); padding: 0.3rem 0.45rem !important; border-radius: var(--ui-radius-sm); color: inherit; text-decoration: none; }
  .mod-languages__list a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .mod-languages__list .lang-active a { background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
  /* Flaggen kommen ohne width/height: feste Größe, sonst zeigt der Browser bis zum Laden den
     Alternativtext, die Topbar wird hoch und die ganze Seite springt (gemessen: CLS 0,56 mobil) */
  .mod-languages img { width: 16px; height: 11px; overflow: hidden; }

  /* Kopf: weiß, Marke links, Menü rechts */
  .ui-header {
    position: relative;
    z-index: 100;
    background: var(--ui-color-bg);
    border-bottom: 1px solid var(--ui-color-border);
    view-transition-name: ui-header;
  }
  .ui-header.is-sticky { position: sticky; top: 0; }
  .ui-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3) var(--ui-space-5);
    min-height: 4.75rem;
    padding-block: var(--ui-space-2);
  }
  .ui-brand { display: inline-flex; flex-direction: column; margin-inline-end: auto; color: var(--ui-color-heading); text-decoration: none; }
  .ui-brand:hover { color: var(--ui-color-heading); }
  .ui-brand__title { font-family: var(--ui-font-heading); font-size: 1.4rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }
  .ui-brand__tagline { font-size: var(--ui-text-sm); color: var(--ui-color-text-muted); }
  .ui-brand__logo { max-height: 48px; width: auto; }

  /* Zeichen vor dem Markennamen (Einstellung „Zeichen“): Akzentfläche mit Linien in der Schriftfarbe darauf */
  .ui-brand.has-mark { flex-direction: row; align-items: center; gap: 0.7rem; }
  .ui-brand__text { display: flex; flex-direction: column; }
  .ui-brand__mark { flex: none; width: 2.25rem; height: 2.25rem; }
  .ui-brand__mark-bg { fill: var(--ui-color-action); }
  .ui-brand__mark-line { fill: none; stroke: var(--ui-color-on-action); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .ui-brand__mark-dot { fill: var(--ui-color-on-action); }
  .ui-brand:hover .ui-brand__mark-bg { fill: var(--ui-color-action-hover); }

  /* Ausrichtung des Hauptmenüs (Einstellung „Menü-Ausrichtung“). Fremde Menümodule (z. B. Mega-Menü) füllen
     den freien Platz, ihre Hauptpunkte werden deshalb innerhalb verschoben; das Joomla-Menü steht ohnehin rechts. */
  @media (min-width: 62rem) {
    .ui-header--menu-end .ui-header__menu :is(.emm-root, .mod-menu) { justify-content: flex-end; }
    .ui-header--menu-center .ui-header__menu :is(.emm-root, .mod-menu) { justify-content: center; }
    .ui-header--menu-center .ui-nav, .ui-header--menu-start .ui-nav { flex: 1 1 0; }
    .ui-header--menu-center .ui-nav > :is(ul, .mod-menu), .ui-header--menu-center .ui-nav > * > .mod-menu { justify-content: center; }
  }
  /* Zwei Logos (hell/dunkel): das passende zum aktuellen Schema zeigen */
  .ui-brand__logo--dark { display: none; }
  :root[data-color-scheme="dark"] .ui-brand__logo--light { display: none; }
  :root[data-color-scheme="dark"] .ui-brand__logo--dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] .ui-brand__logo--light { display: none; }
    :root[data-color-scheme="auto"] .ui-brand__logo--dark { display: block; }
  }

  /* Umschalter Hell/Dunkel: Mond im hellen Schema, Sonne im dunklen. Ohne JavaScript ausgeblendet (hidden). */
  .ui-scheme-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-bg);
    color: var(--ui-color-heading);
    cursor: pointer;
    transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
  }
  .ui-scheme-toggle[hidden] { display: none; }
  .ui-scheme-toggle:hover { background: var(--ui-color-surface); border-color: var(--ui-color-heading); }
  .ui-scheme-toggle svg { display: block; }
  .ui-scheme-toggle__sun { display: none !important; }
  :root[data-color-scheme="dark"] .ui-scheme-toggle__moon { display: none !important; }
  :root[data-color-scheme="dark"] .ui-scheme-toggle__sun { display: block !important; }
  @media (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] .ui-scheme-toggle__moon { display: none !important; }
    :root[data-color-scheme="auto"] .ui-scheme-toggle__sun { display: block !important; }
  }
  /* Am Desktop ganz rechts im Kopf, mobil neben dem Menüknopf */
  @media (min-width: 62rem) { .ui-scheme-toggle { order: 1; } }
  .ui-header__actions { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; }
  /* Fremdes Menümodul (z. B. Mega-Menü) mit eigener Navigation: nur Platz geben, nicht gestalten */
  .ui-header__menu { flex: 1 1 0; min-width: 0; }
  .ui-header__actions > * { margin: 0; }
  /* Suchfeld im Kopf am Desktop schmal halten, damit Menü und Suche in eine Zeile passen */
  @media (min-width: 62rem) {
    /* Suchknopf im Kopf nur mit Lupe (Platz für Menü und Umschalter); der Text bleibt für Screenreader im Knopf */
    .ui-header__actions .mod-finder .btn { font-size: 0; padding-inline: 0.95rem; }
    .ui-header__actions .mod-finder .btn .icon-search { width: 1.1rem; height: 1.1rem; }

    /* Kompakte Suche (nav.js setzt data-compact): nur die Lupe im Kopf, das Feld klappt beim Klick nach links
       über das Menü auf. Ohne JavaScript bleibt das normale Suchfeld. */
    .ui-header__actions .mod-finder[data-compact] .mod-finder__search { position: relative; }
    /* !important: das CSS der Autovervollständigung (awesomplete, außerhalb der Ebenen) setzt position: relative */
    .ui-header__actions .mod-finder[data-compact] .mod-finder__search > :is(.awesomplete, .js-finder-search-query) {
      position: absolute !important;
      overflow: hidden;
      inset-block: 0;
      inset-inline-end: calc(100% - 1px);
      z-index: 5;
      width: 0;
      opacity: 0;
      visibility: hidden;
      transition: width var(--ui-duration) var(--ui-ease), opacity var(--ui-duration) var(--ui-ease), visibility 0s linear var(--ui-duration);
    }
    .ui-header__actions .mod-finder[data-compact].is-open .mod-finder__search > :is(.awesomplete, .js-finder-search-query) {
      overflow: visible;
      width: min(18rem, 40vw);
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }
    .ui-header__actions .mod-finder[data-compact] .js-finder-search-query { width: 100%; height: 100%; background: var(--ui-color-bg); box-shadow: var(--ui-shadow); }
    .ui-header__actions .mod-finder[data-compact]:not(.is-open) .btn { border-radius: var(--ui-radius-pill); }
    /* Lupe im Stil des Hell/Dunkel-Umschalters: heller Grund, feiner Rahmen, dunkles Symbol */
    .ui-header__actions .mod-finder[data-compact] .btn {
      width: 2.75rem;
      height: 2.75rem;
      padding: 0;
      /* Flex statt Grid: der unsichtbare Text „Suchen“ bekäme im Grid eine eigene Zeile und schöbe die Lupe nach oben */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      line-height: 0;
      border: 1px solid var(--ui-color-border-strong);
      background: var(--ui-color-bg);
      color: var(--ui-color-heading);
      box-shadow: none;
    }
    .ui-header__actions .mod-finder[data-compact] .btn:hover,
    .ui-header__actions .mod-finder[data-compact].is-open .btn { background: var(--ui-color-surface); border-color: var(--ui-color-heading); color: var(--ui-color-heading); }
    .ui-header__actions .mod-finder[data-compact] .btn .icon-search { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
  }
  /* Laptops (bis 1365 px): etwas engere Abstände im Kopf */
  @media (min-width: 62rem) and (max-width: 85.3rem) {
    .ui-header__inner { column-gap: var(--ui-space-4); }
  }

  /* Hauptnavigation (Kernausgabe von mod_menu) */
  .ui-nav ul { list-style: none; margin: 0; padding: 0; }
  .ui-nav > ul, .ui-nav > .mod-menu, .ui-nav > * > .mod-menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1); }
  .ui-nav li { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
  .ui-nav a, .ui-nav .mod-menu__heading, .ui-nav .mod-menu__separator {
    display: block;
    padding: var(--ui-space-2) 0.65rem;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-color-heading);
    font-weight: 400;
    font-size: 0.98rem;
    text-decoration: none;
  }
  .ui-nav > ul > li > a, .ui-nav .mod-menu > li > a { text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
  .ui-nav > ul > li > a:hover, .ui-nav .mod-menu > li > a:hover,
  .ui-nav .mod-menu > li.active > a, .ui-nav a[aria-current="page"] { color: var(--ui-color-heading); text-decoration-line: underline; }
  .ui-nav .mod-menu__sub a:hover { background: var(--ui-color-surface); color: var(--ui-color-heading); }

  /* Menüpunkt als Button: Link-Klasse „ww-btn-nav“ im Menüeintrag */
  .ui-nav a.ww-btn-nav {
    margin-inline-start: var(--ui-space-2);
    padding: 0.55rem 1.2rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-action);
    color: var(--ui-color-on-action);
    font-weight: 600;
    text-decoration: none !important;
  }
  .ui-nav a.ww-btn-nav:hover, .ui-nav a.ww-btn-nav:focus-visible { background: var(--ui-color-action-hover); color: var(--ui-color-on-action); }

  /* Untermenü-Knopf aus dem Kern (.mod-menu__toggle-sub). Pfeil kommt aus CSS. */
  .ui-nav .mod-menu__toggle-sub {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: var(--ui-space-2);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: none;
    color: var(--ui-color-heading);
    font: inherit;
    font-weight: 400;
    cursor: pointer;
  }
  .ui-nav a + .mod-menu__toggle-sub { margin-inline-start: calc(-1 * var(--ui-space-3)); }
  .ui-nav .mod-menu__toggle-sub .icon-chevron-down { display: none; }
  .ui-nav .mod-menu__toggle-sub .mod-menu__heading { padding: 0; }
  /* Menüpunkt ohne Link (Überschrift) im Knopf: gleicher Einzug wie die Links */
  .ui-nav .mod-menu__toggle-sub:has(> .mod-menu__heading) { padding-inline: 0.65rem var(--ui-space-2); }
  .ui-nav .mod-menu__toggle-sub::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-inline: 0.3rem;
    border-right: 1.75px solid currentColor;
    border-bottom: 1.75px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--ui-duration) var(--ui-ease);
  }
  .ui-nav .mod-menu__toggle-sub[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .ui-nav .mod-menu__sub { font-size: inherit; }

  /* Mobil-Umschalter – nur sichtbar, wenn nav.js geladen ist */
  .ui-nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-bg);
    color: var(--ui-color-heading);
    cursor: pointer;
  }
  .ui-nav-toggle__bars, .ui-nav-toggle__bars::before, .ui-nav-toggle__bars::after {
    display: block;
    width: 1.1rem;
    height: 1.75px;
    margin: auto;
    background: currentColor;
    transition: transform var(--ui-duration) var(--ui-ease), opacity var(--ui-duration);
  }
  .ui-nav-toggle__bars { position: relative; }
  .ui-nav-toggle__bars::before, .ui-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .ui-nav-toggle__bars::before { top: -5px; }
  .ui-nav-toggle__bars::after { top: 5px; }
  [data-nav-open] .ui-nav-toggle__bars { background: transparent; }
  [data-nav-open] .ui-nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
  [data-nav-open] .ui-nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

  @media (max-width: 61.99rem) {
    /* Zeile 1: Marke + Menüknopf · Zeile 2: Aktionen (Suche, Login) · Zeile 3: aufgeklappte Navigation */
    [data-nav="ready"] .ui-nav-toggle:not([hidden]) { display: grid; place-items: center; }
    .ui-header__actions { order: 3; flex-basis: 100%; }
    .ui-header__actions > * { flex: 1 1 auto; min-width: 0; }
    [data-nav="ready"] .ui-nav { display: none; order: 4; flex-basis: 100%; padding-bottom: var(--ui-space-3); }
    [data-nav="ready"][data-nav-open] .ui-nav { display: block; }
    .ui-nav > ul, .ui-nav > .mod-menu, .ui-nav > * > .mod-menu { flex-direction: column; align-items: stretch; }
    .ui-nav li > ul { flex-basis: 100%; padding-inline-start: var(--ui-space-4); }
    .ui-nav a.ww-btn-nav { margin: var(--ui-space-2) 0 0; text-align: center; }
  }

  @media (min-width: 62rem) {
    .ui-nav li > ul {
      position: absolute;
      top: 100%;
      inset-inline-start: 0;
      z-index: 10;
      display: none;
      min-width: 15rem;
      padding: 0.4rem;
      border: 1px solid var(--ui-color-border);
      border-radius: 12px;
      background: var(--ui-color-bg);
      box-shadow: 0 16px 40px rgb(0 0 0 / 0.08);
    }
    .ui-nav li li > ul { top: 0; inset-inline-start: 100%; }
    .ui-nav li > ul > li { display: flex; }
    .ui-nav li > ul a { flex: 1; padding: 0.45rem 0.75rem; font-size: 0.95rem; }
    /* Geöffnet steuert der Kern über aria-hidden. Hover zusätzlich für Maus; !important schlägt das ungelayerte Kern-CSS. */
    @media (hover: hover) and (pointer: fine) {
      .ui-nav li:hover > ul { display: block !important; }
    }
  }

  /* Bereiche und Spalten */
  .ui-area--breadcrumbs { padding-block: var(--ui-space-4) 0; }

  .ui-body {
    flex: 1 0 auto;
    display: grid;
    gap: var(--ui-space-7);
    padding-block: var(--ui-space-6) var(--ui-space-7);
  }
  @media (min-width: 62rem) {
    .has-sidebar .ui-body { grid-template-columns: minmax(0, 1fr) var(--ui-sidebar); }
    .has-sidebar.sidebar-left .ui-body { grid-template-columns: var(--ui-sidebar) minmax(0, 1fr); }
    .sidebar-left .ui-sidebar { order: -1; }
  }
  .ui-main { min-width: 0; }
  .ui-main > :last-child { margin-bottom: 0; }
  .ui-sidebar { display: grid; gap: var(--ui-space-5); align-content: start; }

  /* Modul-Chrome: section – volle Breite, Inhalt im Container */
  .ui-section { padding-block: clamp(2rem, 1rem + 4vw, 4rem); }
  .ui-section__title { margin-bottom: var(--ui-space-5); }
  .ui-section__inner > :last-child { margin-bottom: 0; }
  .ui-section.is-muted { background: var(--ui-color-surface); }
  .ui-section.is-accent, .ui-section.is-dark {
    background: var(--ui-color-action);
    color: var(--ui-color-on-action);
    --ui-color-heading: var(--ui-color-on-action);
    --ui-color-text: var(--ui-color-on-action);
    --ui-color-link: var(--ui-color-on-action);
    --ui-color-link-hover: var(--ui-color-on-action);
    --ui-color-text-muted: color-mix(in srgb, var(--ui-color-on-action) 72%, transparent);
    --ui-color-border: color-mix(in srgb, var(--ui-color-on-action) 18%, transparent);
    --ui-color-action: var(--ui-color-on-primary);
    --ui-color-on-action: var(--ui-color-primary);
  }
  .ui-section.is-narrow .ui-section__inner { max-width: calc(var(--ui-container-narrow) + 2 * var(--ui-gutter)); }
  .ui-section.is-wide .ui-section__inner { max-width: none; }
  .ui-section.is-flush { padding-block: 0; }
  .ui-section.is-tight { padding-block: var(--ui-space-4); }
  .ui-area--hero .ui-section { padding-block: clamp(1rem, 3vw, 2.5rem); }
  /* Abschluss-Aufruf unter dem Inhalt: weniger Luft nach oben, der Inhalt endet schon mit Abstand */
  /* Oben kommt noch der Abstand des letzten Inhalts dazu – unten entsprechend mehr, damit beide gleich wirken */
  .ui-area--bottom .ui-section { padding-block: clamp(1.25rem, 0.75rem + 1.5vw, 2rem) clamp(2.5rem, 2rem + 1.75vw, 3.5rem); }
  /* Folgt der Abschluss-Aufruf direkt, entfällt der untere Seitenabstand – sonst stünde die Box weit vom Inhalt ab */
  .ui-body:has(+ .ui-area--bottom) { padding-bottom: 0; }

  /* Modul-Chrome: card */
  .ui-card { padding: var(--ui-space-5); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ui-color-bg); }
  .ui-main > .ui-card { margin-bottom: var(--ui-space-5); }
  /* Module unter dem Inhalt (main-bottom) mit Abstand zum Beitrag bzw. zur Blogliste */
  .ui-main > :not(.ui-card) + .ui-card { margin-top: var(--ui-space-6); }
  .ui-card__title { font-size: 1.15rem; margin-bottom: var(--ui-space-3); }
  .ui-card__body > :last-child { margin-bottom: 0; }
  .ui-card.is-muted { background: var(--ui-color-surface); border-color: transparent; }
  .ui-card.is-accent { border: 1.5px solid var(--ui-color-heading); }
  .ui-card .mod-menu a { display: block; padding-block: var(--ui-space-1); }

  /* Modul-Chrome: plain */
  .ui-plain__title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.6rem; }
  .ui-plain .mod-menu a { display: block; padding-block: var(--ui-space-1); }

  /* Fuß: hell, feine Linie */
  .ui-footer { margin-top: auto; padding-block: var(--ui-space-7) var(--ui-space-6); background: var(--ui-color-surface); border-top: 1px solid var(--ui-color-border); font-size: 0.95rem; }
  .ui-footer a { color: var(--ui-color-text-muted); text-decoration: none; }
  .ui-footer a:hover { color: var(--ui-color-heading); text-decoration: underline; }
  .ui-footer__grid { display: grid; gap: var(--ui-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); margin-bottom: var(--ui-space-5); }
  .ui-footer__grid ul { list-style: none; padding: 0; }
  .ui-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--ui-space-3) var(--ui-space-5); align-items: center; justify-content: space-between; padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-color-border); color: var(--ui-color-text-muted); font-size: 0.82rem; }
  .ui-footer__bottom p, .ui-footer__bottom ul { margin: 0; }
  .ui-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-5); list-style: none; padding: 0; }
  .ui-footer .mod-menu.nav { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-5); }

  /* Fehlerseite */
  .ui-error { text-align: center; padding-block: var(--ui-space-8); }
  .ui-error__code { margin: 0; color: var(--ui-color-heading); font-family: var(--ui-font-heading); font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
  .ui-error__debug { margin-top: var(--ui-space-6); text-align: start; overflow-x: auto; font-size: var(--ui-text-sm); }

  /* Nach-oben-Knopf: erscheint nach etwas Scrollen (nav.js setzt data-visible) */
  .ui-backtop {
    position: fixed;
    z-index: 90;
    inset-inline-end: var(--ui-gutter);
    bottom: var(--ui-gutter);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-action);
    color: var(--ui-color-on-action);
    font-size: 1.1rem;
    box-shadow: var(--ui-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity var(--ui-duration) ease, transform var(--ui-duration) ease, visibility var(--ui-duration);
  }
  .ui-backtop[data-visible] { opacity: 1; visibility: visible; transform: none; }
  .ui-backtop:hover { background: var(--ui-color-action-hover); color: var(--ui-color-on-action); }

  /* tmpl=component */
  .ui-component__main { padding: var(--ui-space-5); }

  @media print {
    .ui-notice, .ui-header, .ui-topbar, .ui-footer, .ui-sidebar, .ui-skip, .ui-area--breadcrumbs { display: none !important; }
    .ui-body { display: block; padding: 0; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  }
}

/* ================================================================ components */
/* Bausteine aus „Klar“. Klassen ww-* bleiben unverändert, damit vorhandene Inhalte weiterlaufen.
   Dokumentation und HTML-Beispiele: docs/BAUSTEINE.md */
@layer components {
  /* --- Icons: <span class="ww-ico ww-ico--shield"></span> oder an Bausteinen per Klasse ww-ico--<name> */
  .ww-ico, a.ww-entry::before, .ww-kpi::before, .ww-check h2::before, .ww-topbar strong::before,
  .ww-entry__foot::after, .ww-list li::before, .ww-plan li::before, .ww-scope li::before, .ww-tiles--two .ww-tile li::before {
    background-color: currentColor;
    -webkit-mask: var(--ww-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
    mask: var(--ww-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
  }
  /* Symbole im Text (Kopfzeile, Fuß, Kontakt): passend zur Schriftgröße, mit Abstand zum Text */
  .ww-ico { display: inline-block; width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; margin-inline-end: 0.45em; }
  /* Standard-Icons über :where(), damit eine ww-ico--<name>-Klasse am Baustein immer gewinnt */
  :where(a.ww-entry) { --ww-icon: var(--ui-i-arrow-right); }
  :where(.ww-check) { --ww-icon: var(--ui-i-search); }
  :where(.ww-topbar) { --ww-icon: var(--ui-i-alert); }
  .ww-ico--refresh { --ww-icon: var(--ui-i-refresh); }
  .ww-ico--shield { --ww-icon: var(--ui-i-shield); }
  .ww-ico--spark { --ww-icon: var(--ui-i-spark); }
  .ww-ico--puzzle { --ww-icon: var(--ui-i-puzzle); }
  .ww-ico--search { --ww-icon: var(--ui-i-search); }
  .ww-ico--layout { --ww-icon: var(--ui-i-layout); }
  .ww-ico--bag { --ww-icon: var(--ui-i-bag); }
  .ww-ico--wrench { --ww-icon: var(--ui-i-wrench); }
  .ww-ico--layers { --ww-icon: var(--ui-i-layers); }
  .ww-ico--arrow-right { --ww-icon: var(--ui-i-arrow-right); }
  .ww-ico--star { --ww-icon: var(--ui-i-star); }
  .ww-ico--calendar { --ww-icon: var(--ui-i-calendar); }
  .ww-ico--briefcase { --ww-icon: var(--ui-i-briefcase); }
  .ww-ico--clock { --ww-icon: var(--ui-i-clock); }
  .ww-ico--alert { --ww-icon: var(--ui-i-alert); }
  .ww-ico--check { --ww-icon: var(--ui-i-check); }
  .ww-ico--x { --ww-icon: var(--ui-i-x); }
  .ww-ico--mail { --ww-icon: var(--ui-i-mail); }
  .ww-ico--ticket { --ww-icon: var(--ui-i-ticket); }
  .ww-ico--eye { --ww-icon: var(--ui-i-eye); }
  .ww-ico--eye-slash { --ww-icon: var(--ui-i-eye-slash); }
  .ww-ico--user { --ww-icon: var(--ui-i-user); }
  .ww-ico--folder { --ww-icon: var(--ui-i-folder); }
  .ww-ico--tag { --ww-icon: var(--ui-i-tag); }
  .ww-ico--print { --ww-icon: var(--ui-i-print); }
  .ww-ico--edit { --ww-icon: var(--ui-i-edit); }
  .ww-ico--lock { --ww-icon: var(--ui-i-lock); }
  .ww-ico--phone { --ww-icon: var(--ui-i-phone); }
  .ww-ico--map-pin { --ww-icon: var(--ui-i-map-pin); }
  .ww-ico--chevron-down { --ww-icon: var(--ui-i-chevron-down); }
  .ww-ico--chevron-up { --ww-icon: var(--ui-i-chevron-up); }
  .ww-ico--chevron-left { --ww-icon: var(--ui-i-chevron-left); }
  .ww-ico--chevron-right { --ww-icon: var(--ui-i-chevron-right); }
  .ww-ico--link { --ww-icon: var(--ui-i-link); }
  .ww-ico--home { --ww-icon: var(--ui-i-home); }
  .ww-ico--plus { --ww-icon: var(--ui-i-plus); }

  /* --- Grundbausteine */
  .ww-muted { color: var(--ui-color-text-muted); }
  .ww-lead { max-width: 34em; color: var(--ui-color-text-muted); font-size: var(--ui-text-lg); line-height: 1.55; }
  .ww-section { margin: 4rem 0; }
  .ww-section:first-child { margin-top: 0; }
  /* Startbereich (Slider/Hero) darüber: etwas mehr Luft bis zum Inhalt (≈ 60 px am Laptop) */
  .ui-area--hero ~ .ui-body { padding-top: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); }
  /* Zwischenüberschriften im Fließtext: oben mehr Luft als unten, damit sie zum folgenden Absatz gehören */
  :where(.com-content-article__body, .item-page, .category-desc) > :is(h2, h3):not(:first-child) { margin-top: 1.6em; }
  .ww-section > h2 { margin-bottom: var(--ui-space-5); }
  .ww-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); margin: var(--ui-space-5) 0 0; }

  .ww-tile {
    padding: var(--ui-space-5);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: var(--ui-color-bg);
    color: var(--ui-color-text);
  }
  .ww-tile > :last-child { margin-bottom: 0; }
  .ww-tile--navy { border: 0; background: transparent; }
  .ww-tile--navy p, .ww-tile--navy .ww-muted { color: var(--ui-color-text-muted); }
  .ww-tile--blue { border: 0; background: var(--ui-color-surface); }
  .ww-tile--tint { border-color: transparent; background: var(--ui-color-surface); }
  .ww-tile--lg { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--ui-radius-lg); }

  .ww-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.25rem; }
  .ww-tiles--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .ww-tiles--two { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

  /* Nie 3 + 1: Vier Elemente stehen untereinander, 2 × 2 oder alle in einer Reihe.
     Gemessen an der verfügbaren Breite (Container), nicht am Fenster – gilt also auch neben der Seitenleiste. */
  .ui-main, .ui-section__inner { container-type: inline-size; }
  @container (min-width: 30rem) and (max-width: 69.99rem) {
    .ww-tiles:has(> :nth-child(4):last-child), .ww-steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container (min-width: 70rem) {
    .ww-tiles:has(> :nth-child(4):last-child), .ww-steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* --- Buttons */
  .ww-btn, a.ww-btn {
    display: inline-block;
    min-height: 48px;
    padding: 0.8rem 1.6rem;
    border: 1.5px solid var(--ui-color-action);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-action);
    color: var(--ui-color-on-action);
    font-family: var(--ui-font-body);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-duration) ease, color var(--ui-duration) ease, border-color var(--ui-duration) ease;
  }
  .ww-btn:hover, a.ww-btn:hover, .ww-btn:focus-visible {
    background: var(--ui-color-action-hover);
    border-color: var(--ui-color-action-hover);
    color: var(--ui-color-on-action);
  }
  .ww-btn--outline, a.ww-btn--outline { background: transparent; border-color: var(--ui-color-border-strong); color: var(--ui-color-heading); }
  .ww-btn--outline:hover, a.ww-btn--outline:hover, .ww-btn--outline:focus-visible {
    background: var(--ui-color-action);
    border-color: var(--ui-color-action);
    color: var(--ui-color-on-action);
  }

  /* --- Hinweis-Pille mit grünem Punkt */
  .ww-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.85rem 0.3rem 0.65rem;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-bg);
    color: var(--ui-color-text-muted);
    font-size: 0.85rem;
  }
  .ww-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-color-dot-green); }

  /* --- Hero: Text links, Bild rechts (Variante A) oder Vollbild mit Verlauf (ww-hero--breit) */
  .ww-hero { position: relative; --ww-hero-bild: url("../images/hero-platzhalter.svg"); --ww-hero-muster: url("../images/hero-muster.svg"); --ww-hero-bild-position: right center; }
  .ww-hero.ww-tile--lg { padding-inline: 0; padding-top: clamp(1rem, 3vw, 2.5rem); }
  .ww-hero h1 { max-width: 11em; margin: var(--ui-space-4) 0 1.25rem; }
  .ww-hero .ww-lead { max-width: 30em; }
  .ww-hero::before {
    content: "";
    position: absolute;
    inset: -1.5rem -1rem;
    z-index: 0;
    background: var(--ww-hero-muster) right center / cover no-repeat;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 22%, #000 55%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 22%, #000 55%, #000 100%);
  }
  .ww-hero > * { position: relative; z-index: 1; }
  /* Das Linienmuster ist für helle Flächen gezeichnet; im Dunkelschema gedämpft */
  :root[data-color-scheme="dark"] .ww-hero:not(.ww-hero--breit)::before { opacity: 0.25; }
  @media (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] .ww-hero:not(.ww-hero--breit)::before { opacity: 0.25; }
  }
  .ww-hero::after {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    margin: var(--ui-space-5) auto 0;
    background: var(--ww-hero-bild) center / contain no-repeat;
  }
  .ww-hero--ohne-bild::after { display: none; }
  @media (min-width: 62rem) {
    .ww-hero.ww-tile--lg { min-height: 460px; padding-right: 46%; }
    .ww-hero--ohne-bild.ww-tile--lg { padding-right: 0; min-height: 0; }
    .ww-hero::after { position: absolute; top: 50%; right: 0; width: 43%; max-width: 600px; margin: 0; transform: translateY(-50%); }
  }
  .ww-hero--breit.ww-tile--lg { min-height: 520px; padding-inline: clamp(1.5rem, 4vw, 3rem); overflow: hidden; border-radius: var(--ui-radius-lg); }
  .ww-hero--breit::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
    transform: none;
    background: var(--ww-hero-bild) var(--ww-hero-bild-position) / cover no-repeat;
  }
  .ww-hero--breit::before {
    inset: 0;
    z-index: 1;
    -webkit-mask-image: none;
    mask-image: none;
    background: linear-gradient(to right, var(--ui-color-bg) 0%, var(--ui-color-bg) 38%, color-mix(in srgb, var(--ui-color-bg) 94%, transparent) 50%, color-mix(in srgb, var(--ui-color-bg) 60%, transparent) 68%, transparent 86%);
  }
  .ww-hero--breit > * { z-index: 2; }
  @media (min-width: 62rem) {
    .ww-hero--breit h1 { max-width: 9.5em; }
    .ww-hero--breit .ww-lead { max-width: 26em; }
  }
  @media (max-width: 47.99rem) {
    .ww-hero::before { display: none; }
    .ww-hero--breit::before { display: block; }
    .ww-hero--breit.ww-tile--lg { min-height: 600px; }
    .ww-hero--breit::before {
      background:
        linear-gradient(to bottom, var(--ui-color-bg) 0%, var(--ui-color-bg) 56%, color-mix(in srgb, var(--ui-color-bg) 85%, transparent) 74%, color-mix(in srgb, var(--ui-color-bg) 25%, transparent) 100%),
        var(--ww-hero-muster) center / cover no-repeat;
    }
  }

  /* Versionsreihe (z. B. 3 4 5 6) */
  .ww-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; margin-top: 2.25rem; }
  .ww-versions__row { display: flex; gap: var(--ui-space-2); }
  .ww-versions__row span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: 12px;
    background: var(--ui-color-bg);
    color: var(--ui-color-text-muted);
    font-family: var(--ui-font-heading);
    font-weight: 600;
    font-size: 1.4rem;
  }
  .ww-versions__row span.is-current { background: var(--ui-color-action); border-color: var(--ui-color-action); color: var(--ui-color-on-action); }
  .ww-versions__text { max-width: 18em; color: var(--ui-color-text-muted); font-size: 0.95rem; }

  /* --- Kennzahlen: Zahl über Linie, kein Kasten */
  .ww-tile.ww-kpi { padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--ui-color-heading); border-radius: 0; background: transparent; }
  .ww-kpi::before { content: none; display: block; width: 1.4rem; height: 1.4rem; margin-bottom: 0.6rem; }
  .ww-kpi[class*="ww-ico--"]::before { content: ""; }
  .ww-kpi .ww-kpi__value { display: block; color: var(--ui-color-heading); font-family: var(--ui-font-heading); font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; }
  .ww-kpi p { margin: 0.4rem 0 0; color: var(--ui-color-text-muted); font-size: 0.95rem; }
  .ww-tiles:has(> .ww-kpi) { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  @media (max-width: 47.99rem) { .ww-kpi .ww-kpi__value { font-size: 1.75rem; } }

  /* --- Einstiege: Karten als Links */
  a.ww-entry {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 200px;
    padding: 1.6rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: var(--ui-color-bg);
    color: var(--ui-color-text);
    text-decoration: none;
    transition: border-color var(--ui-duration) ease, box-shadow var(--ui-duration) ease, transform var(--ui-duration) ease;
  }
  a.ww-entry:hover, a.ww-entry:focus-visible { border-color: var(--ui-color-heading); box-shadow: var(--ui-shadow); transform: translateY(-2px); color: var(--ui-color-text); }
  a.ww-entry::before { content: ""; display: block; width: 2rem; height: 2rem; margin-bottom: 0.35rem; color: var(--ui-color-heading); }
  a.ww-entry h3 { margin: 0; font-size: 1.2rem; }
  a.ww-entry p { margin: 0; color: var(--ui-color-text-muted); font-size: 0.95rem; }
  .ww-entry__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); margin-top: auto; padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-color-border); font-weight: 400; font-size: 0.92rem; }
  .ww-entry__foot::after { content: ""; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; --ww-icon: var(--ui-i-arrow-right); transition: transform var(--ui-duration) ease; }
  a.ww-entry:hover .ww-entry__foot::after { transform: translateX(4px); }
  a.ww-entry--navy { background: var(--ui-color-action); border-color: var(--ui-color-action); color: var(--ui-color-on-action); }
  a.ww-entry--navy:hover, a.ww-entry--navy:focus-visible { background: var(--ui-color-action-hover); color: var(--ui-color-on-action); }
  a.ww-entry--navy::before, a.ww-entry--navy h3 { color: var(--ui-color-on-action); }
  /* volle Textfarbe: abgeschwächt (70 %) lag der Kontrast auf Orange bei 3:1 */
  a.ww-entry--navy p { color: var(--ui-color-on-action); }
  a.ww-entry--navy .ww-entry__foot { border-top-color: color-mix(in srgb, var(--ui-color-on-action) 18%, transparent); }

  /* --- Ablauf in Schritten (Nummerierung automatisch) */
  .ww-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--ui-space-5); counter-reset: ww-step; }
  .ww-steps > div { padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-color-heading); }
  .ww-steps > div::before { counter-increment: ww-step; content: counter(ww-step, decimal-leading-zero); display: block; margin-bottom: var(--ui-space-2); color: var(--ui-color-text-muted); font-family: var(--ui-font-heading); font-size: 0.9rem; font-weight: 600; }
  .ww-steps h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
  .ww-steps p { margin: 0; color: var(--ui-color-text-muted); font-size: 0.95rem; }

  /* --- Kundenstimmen */
  .ww-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--ui-space-5); }
  .ww-quote { display: flex; flex-direction: column; gap: var(--ui-space-3); margin: 0; padding: 1.75rem; border-radius: var(--ui-radius); background: var(--ui-color-surface); }
  .ww-quote blockquote { flex: 1; margin: 0; padding: 0; border: 0; color: var(--ui-color-text); font-size: 1.05rem; line-height: 1.6; }
  .ww-quote blockquote p { margin: 0; }
  .ww-quote blockquote::before { content: "\201E"; display: block; height: 0.7em; margin-bottom: 0.5rem; color: var(--ui-color-heading); font-family: var(--ui-font-heading); font-size: 3rem; line-height: 0.6; }
  .ww-quote figcaption { color: var(--ui-color-text-muted); font-size: 0.9rem; }
  .ww-quote figcaption strong { display: block; color: var(--ui-color-heading); font-size: 1rem; }
  .ww-stars { color: var(--ui-color-heading); font-size: 1.05rem; letter-spacing: 0.15em; }

  /* --- Bild und Text (zweispaltig), Bild links oder mit --rechts rechts */
  .ww-split { display: grid; gap: var(--ui-space-5) clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .ww-split > :first-child { margin: 0; }
  .ww-split img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ui-radius-lg); }
  .ww-split__text > :last-child { margin-bottom: 0; }
  @media (min-width: 48rem) {
    .ww-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ww-split--rechts > :first-child { order: 2; }
  }

  /* --- Startbereich geteilt: Text links, Bild rechts (z. B. als Modul auf „hero“ statt Slider) */
  .ww-hero-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 1rem + 4vw, 4.5rem); }
  .ww-hero-split h1 { margin: 0.75rem 0 1rem; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -0.035em; }
  .ww-hero-split .ww-lead { max-width: 34rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
  .ww-hero-split .ww-actions { margin-top: 1.5rem; }
  .ww-hero-split__media img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--ui-radius-lg); }
  @media (min-width: 56rem) { .ww-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

  /* --- Abschnittskopf zentriert (Überschrift + Einleitung über Karten) */
  .ww-section--center > h2, .ww-section--center > .ww-lead { margin-inline: auto; max-width: 44rem; text-align: center; }
  .ww-section--center > .ww-lead { margin-bottom: var(--ui-space-6); }

  /* --- Logo-Band: „Vertrauen von …“ mit einfarbigen Namen/Logos */
  .ww-logos { text-align: center; }
  .ww-logos > p { margin: 0 0 var(--ui-space-5); color: var(--ui-color-text-muted); font-size: var(--ui-text-sm); font-weight: 500; }
  .ww-logos__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-4) clamp(1.5rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; }
  .ww-logos__list li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ui-color-text-muted); font-family: var(--ui-font-heading); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; opacity: 0.85; }
  .ww-logos__list img { height: 28px; width: auto; filter: grayscale(1); opacity: 0.7; }

  /* --- Karten mit Bild (Leistungen, Beiträge): ganze Karte klickbar */
  .ww-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.25rem; }
  .ww-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ui-color-bg); color: var(--ui-color-text); text-decoration: none; transition: border-color var(--ui-duration) ease; }
  a.ww-card:hover, a.ww-card:focus-visible { border-color: var(--ui-color-heading); color: var(--ui-color-text); }
  .ww-card__media { display: block; overflow: hidden; }
  /* Karten-Modul in einer Modulkarte: kein doppelter Rahmen */
  .ui-card:has(.ww-cards--articles) { padding: 0; border: 0; background: none; }
  .ww-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s var(--ui-ease); }
  a.ww-card:hover .ww-card__media img { transform: scale(1.04); }
  .ww-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.4rem 1.4rem; }
  .ww-card__meta { color: var(--ui-color-text-muted); font-size: var(--ui-text-sm); }
  .ww-card__title { margin: 0; color: var(--ui-color-heading); font-size: 1.15rem; line-height: 1.3; }
  .ww-card__text { color: var(--ui-color-text-muted); font-size: 0.95rem; }
  .ww-card__link { margin-top: auto; padding-top: 0.6rem; color: var(--ui-color-heading); font-weight: 600; font-size: 0.95rem; }
  .ww-card__link::after { content: " →"; color: var(--ui-color-accent); }
  /* Bild unten (Leistungskarten wie bei Brex): Text oben, Bild schließt die Karte ab */
  .ww-card--image-bottom { flex-direction: column-reverse; justify-content: flex-end; }
  .ww-card--image-bottom .ww-card__media { margin: 0 1.4rem 1.4rem; border-radius: calc(var(--ui-radius) - 4px); }
  @container (min-width: 70rem) { .ww-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @container (min-width: 30rem) and (max-width: 69.99rem) { .ww-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* --- Großes Zitat (eine Kundenstimme als eigener Abschnitt) */
  .ww-bigquote { max-width: 48rem; margin: 0 auto; text-align: center; }
  .ww-bigquote blockquote { margin: 0 0 var(--ui-space-5); padding: 0; border: 0; }
  .ww-bigquote blockquote p { margin: 0; color: var(--ui-color-heading); font-family: var(--ui-font-heading); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
  .ww-bigquote figcaption { color: var(--ui-color-text-muted); font-size: var(--ui-text-sm); }
  .ww-bigquote figcaption strong { display: block; color: var(--ui-color-heading); font-size: 1rem; }

  /* --- Pakete / Preise */
  .ww-plan { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.75rem; }
  .ww-plan--featured { border: 1.5px solid var(--ui-color-heading); }
  .ww-plan h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin: 0; font-size: 1.1rem; }
  .ww-badge, .ww-plan .ww-badge { padding: 0.2rem 0.6rem; border-radius: var(--ui-radius-pill); background: var(--ui-color-action); color: var(--ui-color-on-action); font-family: var(--ui-font-body); font-size: 0.75rem; font-weight: 600; }
  .ww-plan__price { color: var(--ui-color-heading); font-family: var(--ui-font-heading); font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; }
  .ww-plan__price small { color: var(--ui-color-text-muted); font-family: var(--ui-font-body); font-weight: 400; font-size: 0.9rem; }
  .ww-plan > p { margin: 0; font-size: 0.95rem; }
  .ww-plan ul { margin: 0.25rem 0 var(--ui-space-4); color: var(--ui-color-text-muted); font-size: 0.95rem; }
  .ww-plan .ww-btn { margin-top: auto; }

  /* Haken-Listen: in Paketen, „Enthalten“ und zweispaltigen Kacheln; .ww-list für freie Nutzung */
  .ww-list, .ww-plan ul, .ww-scope ul, .ww-tiles--two .ww-tile ul { list-style: none; padding-inline-start: 0; }
  .ww-list li, .ww-plan li, .ww-scope li, .ww-tiles--two .ww-tile li { position: relative; margin-bottom: 0.4rem; padding-inline-start: 1.7rem; }
  .ww-list li::before, .ww-plan li::before, .ww-scope li::before, .ww-tiles--two .ww-tile li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.3em;
    width: 1.05rem;
    height: 1.05rem;
    --ww-icon: var(--ui-i-check);
    background-color: var(--ui-color-dot-green);
  }
  .ww-list--nein li::before, .ww-scope .ww-tile--tint li::before, .ww-tiles--two .ww-tile--tint li::before { --ww-icon: var(--ui-i-x); background-color: var(--ui-color-text-muted); }

  /* Enthalten / nicht enthalten */
  .ww-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.25rem; }
  .ww-scope ul { margin: var(--ui-space-2) 0 0; color: var(--ui-color-text-muted); }

  /* --- Häufige Fragen: nur Linien */
  .ww-faq details { margin: 0; padding: var(--ui-space-4) 0; border-top: 1px solid var(--ui-color-border); }
  .ww-faq details:last-of-type { border-bottom: 1px solid var(--ui-color-border); }
  .ww-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); list-style: none; color: var(--ui-color-heading); font-family: var(--ui-font-heading); font-weight: 600; font-size: 1.1rem; }
  .ww-faq summary::-webkit-details-marker { display: none; }
  /* Plus/Minus als zwei gezeichnete Linien – sitzt exakt mittig im Kreis (das Schriftzeichen „+“ saß je nach Schrift versetzt) */
  .ww-faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: 50%;
    background:
      linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
    transition: transform var(--ui-duration) ease;
  }
  .ww-faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat; }
  .ww-faq details p { max-width: 60em; margin: var(--ui-space-3) 0 0; color: var(--ui-color-text-muted); }

  /* --- Abschluss-Aufruf: die eine dunkle Fläche */
  .ww-cta, .ww-tile--navy.ww-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem var(--ui-space-6);
    margin: 0;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-color-action);
    color: var(--ui-color-on-action);
  }
  .ww-cta h2 { margin: 0 0 0.35rem; color: var(--ui-color-on-action); }
  .ww-cta p { margin: 0; color: color-mix(in srgb, var(--ui-color-on-action) 72%, transparent); }
  .ww-cta .ww-btn, .ww-cta a.ww-btn { background: var(--ui-color-on-action); border-color: var(--ui-color-on-action); color: var(--ui-color-action); }
  .ww-cta .ww-btn:hover, .ww-cta a.ww-btn:hover { background: color-mix(in oklab, var(--ui-color-on-action) 88%, var(--ui-color-action)); color: var(--ui-color-action); }

  /* --- Prüf-/Anfrage-Fläche mit Beispielergebnis */
  .ww-check h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
  .ww-check h2::before { content: ""; display: block; width: 2.2rem; height: 2.2rem; margin-bottom: 0.9rem; }
  .ww-check > p { font-size: 0.98rem; }
  .ww-check .ww-result { margin: 1.25rem 0; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--ui-color-bg); box-shadow: 0 10px 30px rgb(0 0 0 / 0.05); font-size: 0.92rem; }
  .ww-check .ww-result div { display: flex; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-1) 0; }
  .ww-check .ww-result div span { color: var(--ui-color-text-muted); }
  .ww-check .ww-result strong { font-weight: 400; text-align: end; }
  .ww-check .ww-result .ww-price { display: block; margin-top: var(--ui-space-2); padding-top: 0.6rem; border-top: 1px solid var(--ui-color-border); }
  .ww-check .ww-result .ww-price strong { display: block; text-align: start; font-family: var(--ui-font-heading); font-weight: 600; font-size: 1.6rem; line-height: 1.2; }
  .ww-check .ww-btn { width: 100%; }
  .ww-check .ww-note { margin: 0.6rem 0 0; color: var(--ui-color-text-muted); font-size: 0.85rem; }
  @media (min-width: 62rem) {
    .ww-check.ww-tile--lg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: center; }
    .ww-check > *:not(.ww-result) { grid-column: 1; max-width: 34em; }
    .ww-check .ww-result { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
    .ww-check.ww-tile--lg .ww-btn { width: auto; min-width: 16rem; justify-self: start; margin-top: var(--ui-space-2); }
  }

  /* --- Status-Punkte (z. B. Support-Status) */
  .ww-bar { display: block; width: 10px; height: 10px; margin-bottom: var(--ui-space-4); border-radius: 50%; }
  .ww-bar--red { background: var(--ui-color-dot-red); }
  .ww-bar--orange { background: var(--ui-color-dot-orange); }
  .ww-bar--green { background: var(--ui-color-dot-green); }
  .ww-status { display: inline-block; margin: 0.15rem 0 0.35rem; color: var(--ui-color-text); font-size: 0.9rem; font-weight: 400; }
  .ww-version-tile { padding: 1.5rem 1.5rem 1.25rem; }
  .ww-version-tile h3 { margin: 0 0 0.15rem; font-size: 1.5rem; }
  .ww-version-tile p { margin: 0; font-size: 0.9rem; }

  /* --- Topbar-Inhalt und Fußzeilen-Spalten (für mod_custom) */
  /* Inhaltsmodul der Kopfzeile über die ganze Breite: erster Teil links, zweiter rechts */
  .ui-topbar .ui-container > :has(> .ww-topbar) { flex: 1 1 auto; }
  .ww-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-1) var(--ui-space-5); width: 100%; }
  .ww-topbar strong::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-inline-end: 0.4rem; vertical-align: -0.15em; }
  /* Links in der Kopfzeile wie der übrige Text, ohne Unterstreichung; beim Überfahren unterstrichen */
  .ww-topbar a { color: inherit !important; text-decoration: none; }
  .ww-topbar a:hover, .ww-topbar a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
  .ww-topbar > span { display: inline-flex; align-items: center; flex-wrap: wrap; }
  /* Trennpunkt zwischen Angaben (z. B. Telefon · E-Mail) mit Luft */
  .ww-sep { margin-inline: 0.75em; opacity: 0.6; }
  .ww-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--ui-space-5); width: 100%; }
  .ww-footer h3 { margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 600; }
  .ww-footer ul { list-style: none; margin: 0; padding: 0; }
  .ww-footer li { margin: 0 0 0.4rem; font-size: 0.95rem; }
  .ww-footer__note { grid-column: 1 / -1; margin-top: var(--ui-space-2); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-color-border); color: var(--ui-color-text-muted); font-size: 0.82rem; }

  /* --- Bildplatzhalter */
  .ww-placeholder { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: var(--ui-space-4); border-radius: var(--ui-radius); background: var(--ui-color-surface); color: var(--ui-color-text-muted); font-size: 0.95rem; text-align: center; }

  /* --- Kontaktformular des Kerns */
  .com-contact > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ==================================================================== motion */
@layer motion {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }

  @keyframes ui-auftauchen {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: none; }
  }

  /* Opt-in über die Klasse .einblenden. Ohne Browser-Unterstützung ist der Inhalt sofort sichtbar. */
  @supports (animation-timeline: view()) {
    .ui-motion-scroll .einblenden {
      animation: ui-auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .ui-motion-scroll .einblenden { animation: none !important; }
    a.ww-entry:hover { transform: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

/* ==========================================================================
   Designvorlage „Kontrast“ (Template-Einstellung „Design“)
   Nach Brex: weiße Flächen, hellgraue Abschnitte, dunkle Bänder oben und unten,
   flache Karten mit 12 px Rundung, Inter auch für Überschriften, ein Orange als einzige Farbe.
   Eine Designvorlage ist nur ein zweiter Satz Werte – Aufbau und Bausteine bleiben gleich.
   ========================================================================== */
@layer tokens {
  /* Grundwerte: Akzent und Band kommen aus den Template-Einstellungen (index.php setzt sie nur,
     wenn sie vom Standard abweichen). Alles andere wird daraus abgeleitet. */
  :root[data-design="kontrast"] {
    --ui-color-accent: #e8552f;
    --ui-color-on-accent: #15191e;
    /* dunklere Töne des Akzents: Knöpfe mit weißer Schrift (≥ 4,5:1) und kleine Links auf Weiß */
    --ui-accent-strong: #ce4420;
    --ui-accent-ink: #b83a18;
    /* hellerer Ton für dunkle Flächen */
    --ui-accent-soft: color-mix(in oklab, var(--ui-color-accent) 70%, white);
    --ui-band-bg: #15191e;
    --ui-band-deep: color-mix(in oklab, var(--ui-band-bg) 30%, #000510);

    --ui-color-primary: var(--ui-band-bg);
    --ui-color-on-primary: #ffffff;
    --ui-color-action: var(--ui-accent-strong);
    --ui-color-on-action: #ffffff;
    --ui-color-action-hover: color-mix(in oklab, var(--ui-accent-strong) 86%, black);

    --ui-color-bg: #ffffff;
    --ui-color-surface: #f3f3f7;
    --ui-color-surface-2: #e8e8ee;
    --ui-color-text: #1c2024;
    --ui-color-heading: #0b0d10;
    --ui-color-text-muted: #60646c;
    --ui-color-border: #e4e4e9;
    --ui-color-border-strong: #b9bbc6;
    --ui-color-link: var(--ui-accent-ink);
    --ui-color-link-hover: #0b0d10;
    --ui-color-dot-green: var(--ui-color-accent);

    --ui-font-heading: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ui-text-h1: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
    --ui-text-h2: clamp(1.45rem, 1.2rem + 0.7vw, 1.875rem);

    --ui-radius-sm: 8px;
    --ui-radius: 12px;
    --ui-radius-lg: 16px;
    /* Knöpfe und Felder wie bei Brex: 12 px statt Pille */
    --ui-radius-pill: 12px;
    --ui-shadow: 0 12px 30px rgb(16 24 40 / 0.06);
  }

  :root[data-design="kontrast"][data-color-scheme="dark"] {
    --ui-color-bg: #0b0d10;
    --ui-color-surface: #15191e;
    --ui-color-surface-2: #1e232a;
    --ui-color-text: #e4e6ea;
    --ui-color-heading: #ffffff;
    --ui-color-text-muted: #9ba1a9;
    --ui-color-border: #252a31;
    --ui-color-border-strong: #3a4048;
    --ui-color-link: var(--ui-accent-soft);
    --ui-color-link-hover: #ffffff;
    --ui-color-action: var(--ui-color-accent);
    --ui-color-on-action: var(--ui-color-on-accent);
    --ui-color-action-hover: var(--ui-accent-soft);
    --ui-band-bg: color-mix(in oklab, #15191e 30%, #000510);
  }

  @media (prefers-color-scheme: dark) {
    :root[data-design="kontrast"][data-color-scheme="auto"] {
      --ui-color-bg: #0b0d10;
      --ui-color-surface: #15191e;
      --ui-color-surface-2: #1e232a;
      --ui-color-text: #e4e6ea;
      --ui-color-heading: #ffffff;
      --ui-color-text-muted: #9ba1a9;
      --ui-color-border: #252a31;
      --ui-color-border-strong: #3a4048;
      --ui-color-link: var(--ui-accent-soft);
      --ui-color-link-hover: #ffffff;
      --ui-color-action: var(--ui-color-accent);
      --ui-color-on-action: var(--ui-color-on-accent);
      --ui-color-action-hover: var(--ui-accent-soft);
      --ui-band-bg: color-mix(in oklab, #15191e 30%, #000510);
    }
  }
}

@layer layout {
  /* Dunkle Bänder: Werte innerhalb des Bandes auf „dunkel“ umstellen, alles darin passt sich an */
  [data-design="kontrast"] :is(.ui-topbar, .ui-footer) {
    --ui-color-text: rgb(255 255 255 / 0.82);
    --ui-color-heading: #ffffff;
    --ui-color-text-muted: rgb(255 255 255 / 0.62);
    --ui-color-border: rgb(255 255 255 / 0.12);
    --ui-color-border-strong: rgb(255 255 255 / 0.24);
    --ui-color-link: #ffffff;
    --ui-color-link-hover: var(--ui-accent-soft);
    --ui-color-surface: rgb(255 255 255 / 0.06);
    --ui-color-bg: transparent;
    --ui-color-action: var(--ui-color-accent);
    --ui-color-on-action: var(--ui-color-on-accent);
    color: var(--ui-color-text);
  }
  [data-design="kontrast"] .ui-topbar { background: var(--ui-band-bg); border-bottom: 0; }
  [data-design="kontrast"] .ui-footer { background: var(--ui-band-deep); border-top: 0; padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--ui-space-6); }
  [data-design="kontrast"] .ui-footer a:hover { color: var(--ui-accent-soft); }

  /* Hinweisleiste in der Akzentvariante: dunkles Band mit orangem Link (wie die Ankündigung bei Brex) */
  /* Modul-CSS liegt außerhalb der Ebenen – !important innerhalb der Ebene gewinnt trotzdem */
  /* Hinweisleiste „Akzent“: zarter Ton der Akzentfarbe – hebt sich von der dunklen Kopfzeile ab */
  [data-design="kontrast"] .basis-hinweis--accent {
    --_bg: color-mix(in oklab, var(--ui-color-accent) 16%, var(--ui-color-bg)) !important;
    --_fg: var(--ui-color-heading) !important;
    border-bottom: 1px solid color-mix(in oklab, var(--ui-color-accent) 30%, var(--ui-color-bg));
  }
  [data-design="kontrast"] .basis-hinweis--accent a { color: var(--ui-color-link) !important; }

  /* Kopf: weiß, dünne Linie; Menüpunkte etwas kleiner und mittig */
  [data-design="kontrast"] .ui-header { border-bottom-color: var(--ui-color-border); }

  /* Startbereich in voller Breite: Slider bzw. Hero von Rand zu Rand */
  .ui-area--hero.is-full .ui-section { padding-block: 0; }
  .ui-area--hero.is-full .ui-section__inner { max-width: none; padding-inline: 0; }
  /* Geteilter Startbereich im randlosen Bereich: Inhalt bleibt im Raster */
  .ui-area--hero.is-full .ww-hero-split { max-width: var(--ui-container); margin-inline: auto; padding-inline: var(--ui-gutter); }
  .ui-area--hero.is-full .basis-slider { --as-t-radius: 0px !important; border-radius: 0 !important; }
  .ui-area--hero.is-full .ww-hero.ww-tile--lg { border-radius: 0; border-inline: 0; }
  .ui-area--hero.is-full .ww-hero--breit.ww-tile--lg { padding-inline: max(var(--ui-gutter), calc((100vw - var(--ui-container)) / 2 + var(--ui-gutter))); }
}

@layer components {
  /* Abschluss-Aufruf: dunkle Fläche mit orangem Knopf statt oranger Fläche */
  [data-design="kontrast"] :is(.ww-cta, .ww-tile--navy.ww-cta) { background: var(--ui-band-bg); color: #ffffff; }
  [data-design="kontrast"] .ww-cta h2 { color: #ffffff; }
  [data-design="kontrast"] .ww-cta p { color: rgb(255 255 255 / 0.72); }
  [data-design="kontrast"] :is(.ww-cta .ww-btn, .ww-cta a.ww-btn) { background: var(--ui-accent-strong); border-color: var(--ui-accent-strong); color: #ffffff; }
  [data-design="kontrast"] :is(.ww-cta .ww-btn, .ww-cta a.ww-btn):hover { background: color-mix(in oklab, var(--ui-accent-strong) 86%, black); border-color: color-mix(in oklab, var(--ui-accent-strong) 86%, black); color: #ffffff; }

  /* Karten flach: keine Schatten, Tiefe über Hellgrau auf Weiß */
  [data-design="kontrast"] :is(.ww-tile, .ui-card, a.ww-entry) { box-shadow: none; }
  [data-design="kontrast"] h1 { letter-spacing: -0.035em; }
  [data-design="kontrast"] h2 { letter-spacing: -0.025em; }

  /* Hervorgehobenes Wort in Überschriften: <span class="ww-betont">…</span> */
  .ww-betont { color: var(--ui-color-accent); }
}

/* ==========================================================================
   Bewegung (Template-Einstellung „Bewegung“) – Startzustände setzt media/js/motion.js
   ========================================================================== */
@layer motion {
  :root[data-motion] { --rv-y: 18px; --rv-ease: cubic-bezier(0.16, 1, 0.3, 1); }
  :root[data-motion="lebendig"] { --rv-y: 36px; }

  /* Einblenden beim Scrollen, Geschwister gestaffelt (--rv-i aus dem Skript) */
  .ui-rv {
    opacity: 0;
    translate: 0 var(--rv-y);
    transition:
      opacity 0.7s var(--rv-ease) calc(var(--rv-i, 0) * 80ms),
      translate 0.9s var(--rv-ease) calc(var(--rv-i, 0) * 80ms);
  }
  .ui-rv.is-in { opacity: 1; translate: 0 0; }
  :root[data-motion="lebendig"] .ui-tiles-scale .ui-rv, :root[data-motion="lebendig"] .ww-tiles > .ui-rv { scale: 0.97; transition-property: opacity, translate, scale; }
  :root[data-motion="lebendig"] .ww-tiles > .ui-rv.is-in { scale: 1; }

  /* Überschriften Wort für Wort aus einer Maske */
  .ui-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .ui-w > span { display: inline-block; translate: 0 110%; transition: translate 0.9s var(--rv-ease) calc(var(--w, 0) * 55ms); }
  .ui-words.is-in .ui-w > span { translate: 0 0; }

  /* Startbereich baut sich beim Laden auf (reines CSS, kein Aufblitzen) */
  @keyframes ui-auf { from { opacity: 0; translate: 0 22px; } }
  @keyframes ui-zoom { from { scale: 1.06; } }
  :root[data-motion] :is(.ww-hero > *, .ui-area--hero .basis-slider__slide.is-active .basis-slider__content) {
    animation: ui-auf 0.9s var(--rv-ease) both;
  }
  :root[data-motion] .ww-hero > :nth-child(2) { animation-delay: 80ms; }
  :root[data-motion] .ww-hero > :nth-child(3) { animation-delay: 160ms; }
  :root[data-motion] .ww-hero > :nth-child(4) { animation-delay: 240ms; }
  :root[data-motion="lebendig"] .ui-area--hero .basis-slider__slide.is-active .basis-slider__media img { animation: ui-zoom 7s ease-out both; }

  /* Mitlaufender Kopf: weich ein- und ausblenden, beim Scrollen leicht durchscheinend */
  :root[data-motion] .ui-header.is-sticky { transition: translate 0.35s var(--rv-ease), background-color 0.3s ease; }
  .ui-header.is-sticky.is-scrolled { background: color-mix(in srgb, var(--ui-color-bg) 86%, transparent); backdrop-filter: blur(12px); }
  .ui-header.is-sticky.is-hidden { translate: 0 -100%; }
  .ui-header.is-sticky:focus-within { translate: none; }

  /* Karten heben sich beim Darüberfahren leicht an */
  :root[data-motion="lebendig"] a.ww-entry { transition: translate 0.35s var(--rv-ease), border-color 0.2s, background-color 0.2s; }
  :root[data-motion="lebendig"] a.ww-entry:hover { translate: 0 -4px; }

  @media (prefers-reduced-motion: reduce) {
    .ui-rv, .ui-w > span { opacity: 1 !important; translate: none !important; scale: none !important; }
    .ui-header.is-sticky.is-hidden { translate: none; }
  }
}