/* =========================================================================
   Vereint Unterföhring – Theme und Layout auf Basis von KERN UX.
   Regeln und Herleitung: docs/07-design.md. Farbwerte nur hier ändern.
   Load order: kern.min.css -> fira-sans.css -> this file.
   ========================================================================= */

/* --- 1. Unterföhring palette (primitives, from unterfoehring.de CI) -------- */
:root {
  --vu-blue-900: #0a2c48;
  --vu-blue-700: #0f426b;   /* Gemeinde Dunkelblau: primary action, headings */
  --vu-blue-300: #8fb8e0;   /* primary action in dark mode */
  --vu-blue-100: #dce7f1;
  --vu-blue-050: #eef4f9;
  --vu-green-700: #5c7307;  /* Gemeinde Grün, darkened for AA text */
  --vu-green-500: #7f9d0a;  /* decorative only (3.1:1) */
  --vu-green-100: #ecf1d2;
  --vu-red-600: #d10b11;
  --vu-cyan-700: #00728e;
  --vu-yellow-500: #f8b122; /* decorative only */
  --vu-sand-050: #f6f3f0;   /* Gemeinde warm light surface */
  --vu-sand-100: #ece7e1;
  --vu-ink: #1d1d1b;        /* body text */
  --vu-ink-muted: #5f6b7a;  /* secondary text, 5.4:1 on white */
  /* Dark mode surfaces: blue-tinted greys instead of KERN's pure black */
  --vu-night-900: #141922;
  --vu-night-800: #1b2230;
  --vu-night-700: #222b3a;
  --vu-night-600: #34405a;
  --vu-snow: #eef2f7;
  --vu-snow-muted: #aeb8c8;
  --vu-header-accent: var(--vu-blue-700);
  --vu-nav-current: var(--vu-blue-700);
  --vu-shadow: 0 8px 24px rgba(15, 66, 107, 0.12);
}

/* --- 2. Light theme (scoped so KERN's dark palette survives) --------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-kern-theme="dark"]) {
    --kern-color-action-default: var(--vu-blue-700);
    --kern-color-action-on-default: #ffffff;
    --kern-color-action-focus-default: var(--vu-ink);
    --kern-color-decorative-brand-default: var(--vu-blue-700);
    --kern-color-layout-text-default: var(--vu-ink);
    --kern-color-layout-text-muted: var(--vu-ink-muted);
    --kern-color-layout-background-hued: var(--vu-sand-050);
    --kern-color-layout-background-level-1: var(--vu-sand-050);
    --kern-color-layout-background-default-surface: var(--vu-sand-050);
    --kern-color-feedback-danger: var(--vu-red-600);
    --kern-color-feedback-success: var(--vu-green-700);
    --kern-color-feedback-success-background: var(--vu-green-100);
  }
}
[data-kern-theme="light"],
.kern-light {
  --kern-color-action-default: var(--vu-blue-700);
  --kern-color-action-on-default: #ffffff;
  --kern-color-action-focus-default: var(--vu-ink);
  --kern-color-decorative-brand-default: var(--vu-blue-700);
  --kern-color-layout-text-default: var(--vu-ink);
  --kern-color-layout-text-muted: var(--vu-ink-muted);
  --kern-color-layout-background-hued: var(--vu-sand-050);
  --kern-color-layout-background-level-1: var(--vu-sand-050);
  --kern-color-layout-background-default-surface: var(--vu-sand-050);
  --kern-color-feedback-danger: var(--vu-red-600);
  --kern-color-feedback-success: var(--vu-green-700);
  --kern-color-feedback-success-background: var(--vu-green-100);
}

/* --- 3. Dark theme: brand accents and blue-grey surfaces ------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-kern-theme="light"]) {
    --kern-color-action-default: var(--vu-blue-300);
    --kern-color-action-on-default: var(--vu-blue-900);
    --kern-color-action-focus-default: var(--vu-snow);
    --kern-color-decorative-brand-default: var(--vu-blue-300);
    --kern-color-layout-text-default: var(--vu-snow);
    --kern-color-layout-text-muted: var(--vu-snow-muted);
    --kern-color-layout-background-default: var(--vu-night-900);
    --kern-color-layout-background-hued: var(--vu-night-800);
    --kern-color-layout-background-default-surface: var(--vu-night-800);
    --kern-color-layout-background-level-1: var(--vu-night-800);
    --kern-color-layout-background-level-1-surface: var(--vu-night-700);
    --kern-color-layout-background-level-2: var(--vu-night-700);
    --kern-color-layout-background-level-2-surface: var(--vu-night-800);
    --kern-color-layout-border-level-1: var(--vu-night-600);
    --kern-color-layout-border-level-2: var(--vu-night-600);
    --kern-color-form-input-background: var(--vu-night-700);
    --kern-color-feedback-success: #b5cf3a;
    --vu-header-accent: var(--vu-blue-300);
    --vu-nav-current: var(--vu-blue-300);
    --vu-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}
[data-kern-theme="dark"],
.kern-dark {
  --kern-color-action-default: var(--vu-blue-300);
  --kern-color-action-on-default: var(--vu-blue-900);
  --kern-color-action-focus-default: var(--vu-snow);
  --kern-color-decorative-brand-default: var(--vu-blue-300);
  --kern-color-layout-text-default: var(--vu-snow);
  --kern-color-layout-text-muted: var(--vu-snow-muted);
  --kern-color-layout-background-default: var(--vu-night-900);
  --kern-color-layout-background-hued: var(--vu-night-800);
  --kern-color-layout-background-default-surface: var(--vu-night-800);
  --kern-color-layout-background-level-1: var(--vu-night-800);
  --kern-color-layout-background-level-1-surface: var(--vu-night-700);
  --kern-color-layout-background-level-2: var(--vu-night-700);
  --kern-color-layout-background-level-2-surface: var(--vu-night-800);
  --kern-color-layout-border-level-1: var(--vu-night-600);
  --kern-color-layout-border-level-2: var(--vu-night-600);
  --kern-color-form-input-background: var(--vu-night-700);
  --kern-color-feedback-success: #b5cf3a;
  --vu-header-accent: var(--vu-blue-300);
  --vu-nav-current: var(--vu-blue-300);
  --vu-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Visited links keep the link colour (Kevin 2026-10-30: "alles wird violett,
   wenn ich es angeklickt habe"). KERN marks visited links violet, a habit of
   long government texts; in an app with navigation, cards and breadcrumbs it
   reads like an error. Same selectors as the theme blocks, later in the
   cascade, so it wins in light, dark and high contrast. */
:root, [data-kern-theme], .kern-light, .kern-dark {
  --kern-color-action-visited: var(--kern-color-action-default);
  --kern-color-action-visited-contextual: var(--kern-color-action-default);
}
/* Links without a class (e.g. "Passwort vergessen?" in allauth templates)
   would get the browser defaults #00e and purple: style them like kern-link. */
a:not([class]), a:not([class]):visited {
  color: var(--kern-color-action-default);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:not([class]):hover { text-decoration-thickness: 2px; }

/* --- 4. Density: one notch finer than KERN's defaults ----------------------
   KERN sizes are rem based, so a 15px root scales every token. Headings are
   reduced further; weights stay semibold (600), never bold. ---------------- */
html { font-size: 15px; font-family: var(--kern-typography-font-family-default); }
:root {
  --kern-typography-font-size-2x-large-adaptive: 2rem;
  --kern-typography-line-height-2x-large-adaptive: 2.5rem;
  --kern-typography-font-size-x-large-adaptive: 1.625rem;
  --kern-typography-line-height-x-large-adaptive: 2.125rem;
  --kern-typography-font-size-large-adaptive: 1.4rem;
  --kern-typography-line-height-large-adaptive: 1.875rem;
  --kern-typography-font-size-medium-adaptive: 1.125rem;
  --kern-typography-line-height-medium-adaptive: 1.5rem;
  --kern-typography-font-size-large-static: 1.125rem;
  --kern-typography-line-height-large-static: 1.5rem;
  --kern-typography-font-size-medium-static: 1rem;
}
.kern-heading-large, .kern-heading-medium, .kern-heading-small, .kern-title { letter-spacing: -0.005em; }
.kern-title { font-size: 1.0625rem; line-height: 1.45; }
.kern-card__container { padding: var(--kern-16); gap: var(--kern-12); }
.kern-card--large .kern-card__container { padding: var(--kern-24); gap: var(--kern-16); }
.kern-card { border-radius: 2px; }
.kern-btn { min-height: 2.5rem; padding-inline: 0.875rem; border-radius: 2px; }
.kern-btn .kern-label { font-size: 0.9375rem; line-height: 1.25; padding: 0; }
.kern-btn--small { min-height: 2.125rem; padding-inline: 0.625rem; margin: 0; }
.kern-btn--small .kern-label { font-size: 0.875rem; }
.kern-form-input .kern-label { font-size: 0.9375rem; margin-bottom: 0.25rem; padding: 0; }
.kern-form-input__input { height: 2.5rem; min-height: 2.5rem; padding: 0 0.75rem; font-size: 0.9375rem; line-height: 2.5rem; }
textarea.kern-form-input__input { height: auto; min-height: 5rem; padding: 0.5rem 0.75rem; line-height: 1.5; }
input[type="file"].kern-form-input__input { height: auto; padding: 0.5rem 0.75rem; line-height: 1.5; }
.kern-form-input__select-wrapper { height: 2.5rem; }
.kern-form-input__select { font-size: 0.9375rem; }
.kern-form-input__select-wrapper::after { top: 1.25rem; }
.kern-hint, .kern-error .kern-body { font-size: 0.875rem; }
.kern-table__cell { padding: 0.5rem 0.75rem; font-size: 0.9375rem; vertical-align: middle; }
.kern-table__header .kern-table__cell { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kern-color-layout-text-muted); font-weight: 600; }
.kern-badge { font-size: 0.8125rem; line-height: 1.5rem; padding-block: 0; vertical-align: middle; }
.kern-badge--small { font-size: 0.75rem; line-height: 1.25rem; }
.kern-alert { border-radius: 2px; }
.kern-alert .kern-title { font-size: 1rem; }
.kern-body { font-size: 0.9375rem; }
.kern-body--small { font-size: 0.8125rem; }
.kern-link { text-underline-offset: 0.15em; }
.kern-description-list { display: block; width: 100%; align-self: stretch; margin: 0; }
.kern-description-list-item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: baseline; padding: 0.375rem 0; width: 100%; }
.kern-description-list-item + .kern-description-list-item { border-top: 1px solid var(--kern-color-layout-border-level-2); }
.kern-description-list-item__key, .kern-description-list-item__value { width: auto; max-width: none; word-break: normal; overflow-wrap: anywhere; }
.kern-description-list-item__key { font-weight: 600; font-size: 0.875rem; color: var(--kern-color-layout-text-muted); }
.kern-description-list-item__value { margin: 0; }
.kern-card .kern-subline { font-weight: 400; font-size: 0.875rem; color: var(--kern-color-layout-text-muted); }

/* --- 5. Page skeleton ----------------------------------------------------- */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--kern-color-layout-text-default); line-height: 1.5; }
.vu-main { flex: 1; width: 100%; }
.vu-container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 48rem) { .vu-container { padding-inline: 1.5rem; } }
.vu-main > .vu-container { padding-block: 1.75rem 3rem; }

.vu-skip-link { position: absolute; left: 1rem; top: -100%; z-index: 100; padding: 0.5rem 1rem; background: var(--kern-color-action-default); color: var(--kern-color-action-on-default); font-weight: 600; text-decoration: none; border-radius: 0 0 4px 4px; }
.vu-skip-link:focus { top: 0; outline: 3px solid var(--kern-color-action-focus-default); outline-offset: 2px; }

/* --- 6. Header: brand row + navigation row --------------------------------- */
.vu-header { background: var(--kern-color-layout-background-default); border-top: 3px solid var(--vu-header-accent); }
.vu-header__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 3.5rem; padding-block: 0.5rem; }
.vu-header__brands { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.vu-brand { display: flex; flex-direction: column; justify-content: center; text-decoration: none; color: inherit; line-height: 1; }
.vu-brand__name { font-size: 1.125rem; font-weight: 600; color: var(--kern-color-action-default); letter-spacing: 0.005em; }
.vu-brand__place { margin-top: 0.2rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--kern-color-layout-text-muted); }
.vu-brand:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: 4px; border-radius: 2px; }
.vu-header__partner { display: none; padding-inline-start: 1rem; border-inline-start: 1px solid var(--kern-color-layout-border-level-2); line-height: 0; }
.vu-header__partner img { height: 2.25rem; width: auto; }
@media (min-width: 40rem) { .vu-header__partner { display: block; } }
.vu-header__tools { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }

.vu-header__navrow { border-top: 1px solid var(--kern-color-layout-border-level-2); border-bottom: 1px solid var(--kern-color-layout-border-level-2); background: var(--kern-color-layout-background-default); }
.vu-nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 0.25rem; margin-block: 0; list-style: none; }
.vu-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--kern-color-layout-text-muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-radius: 0; }
.vu-nav__link:hover { color: var(--kern-color-layout-text-default); }
.vu-nav__link[aria-current="page"] { color: var(--kern-color-layout-text-default); font-weight: 600; }
.vu-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -1px; height: 2px; background: var(--vu-nav-current); }
.vu-nav__link:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: -3px; }
.vu-nav > li:first-child > .vu-nav__link { padding-left: 0; }
.vu-nav > li:first-child > .vu-nav__link::after { left: 0; }

/* --- 7. Menus (details/summary, enhanced by vereint.js) -------------------- */
.vu-menu { position: relative; }
.vu-menu > summary { list-style: none; cursor: pointer; }
.vu-menu > summary::-webkit-details-marker { display: none; }
.vu-menu__button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 0.625rem; border: 1px solid transparent; border-radius: 2px; color: var(--kern-color-layout-text-default); font-size: 0.875rem; line-height: 1.2; }
.vu-menu__button:hover, .vu-menu[open] > .vu-menu__button { background: var(--kern-color-layout-background-hued); border-color: var(--kern-color-layout-border-level-2); }
.vu-menu__button:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: 2px; }
.vu-menu__kicker { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--kern-color-layout-text-muted); }
.vu-menu__value { font-weight: 500; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vu-menu__value--name { display: none; }
@media (min-width: 48rem) { .vu-menu__value--name { display: inline; } }
.vu-menu__chevron { width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
.vu-menu[open] .vu-menu__chevron { transform: translateY(1px) rotate(-135deg); }
.vu-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--vu-blue-100); color: var(--vu-blue-700); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.vu-menu__panel { position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 50; min-width: 16rem; padding: 0.375rem; background: var(--kern-color-layout-background-default); border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 2px; box-shadow: var(--vu-shadow); }
.vu-menu__panel--right { left: auto; right: 0; }
.vu-menu__head { margin: 0; padding: 0.5rem 0.75rem 0.625rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; border-bottom: 1px solid var(--kern-color-layout-border-level-2); }
.vu-menu__muted { font-weight: 400; color: var(--kern-color-layout-text-muted); font-size: 0.8125rem; }
.vu-menu__label { margin: 0; padding: 0.625rem 0.75rem 0.125rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--kern-color-layout-text-muted); }
.vu-menu__item { display: block; width: 100%; padding: 0.4375rem 0.75rem; border: 0; border-radius: 2px; background: none; color: var(--kern-color-layout-text-default); font: inherit; font-size: 0.9375rem; text-align: left; text-decoration: none; cursor: pointer; }
.vu-menu__item:hover { background: var(--kern-color-layout-background-hued); }
.vu-menu__item:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: -2px; }
.vu-menu__item[aria-current="true"] { font-weight: 600; color: var(--kern-color-action-default); }
.vu-menu form { margin: 0; }
.vu-club-pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 0.625rem; font-size: 0.875rem; font-weight: 500; }

/* --- 8. Content patterns -------------------------------------------------- */
.vu-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; margin-block-end: 1.5rem; }
/* Title line box = button height (2.5rem): actions beside it are centred on
   the title without magic offsets. KERN heading padding is dropped here. */
.vu-page-header h1 { margin: 0; padding: 0; min-height: 2.5rem; display: flex; align-items: center; }
.vu-page-header > .vu-actions, .vu-page-header > .kern-btn { margin-top: 0; min-height: 2.5rem; }
.vu-page-header > .kern-badge { margin-top: 0.5rem; }
.vu-kicker { margin: 0 0 0.25rem; color: var(--kern-color-layout-text-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.vu-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0.25rem 0 0; color: var(--kern-color-layout-text-muted); font-size: 0.9375rem; }
.vu-overline { margin: 0 0 0.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--kern-color-action-default); color: var(--kern-color-action-default); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.vu-section { margin-top: 2rem; }
.vu-list-reset { list-style: none; margin: 0; padding: 0; }
.vu-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.vu-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.vu-grid--filters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; gap: 0.75rem 1rem; }
.vu-grid > li > .kern-card { height: 100%; }
.vu-span-all { grid-column: 1 / -1; }
.vu-stack > * + * { margin-block-start: 1rem; }
.vu-stack--tight > * + * { margin-block-start: 0.5rem; }
.vu-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.vu-actions--between { justify-content: space-between; align-items: baseline; } /* heading and link on one line */
.vu-actions--center { justify-content: center; }
.vu-narrow { max-width: 36rem; margin-inline: auto; }
.vu-narrow--left { margin-inline: 0; }
.vu-messages { margin-block-end: 1.25rem; display: grid; gap: 0.75rem; }
.vu-messages .kern-alert { margin: 0; }
.vu-table-wrap, .vu-form, .kern-card__container > .vu-overline { width: 100%; align-self: stretch; }
/* Flex children default to min-width:auto and would grow with a wide table;
   min-width:0 keeps the scroll container inside the card. */
/* position:relative so absolutely positioned descendants (e.g. .kern-sr-only) are
   clipped by this scroll container instead of widening the page. */
.vu-table-wrap { position: relative; overflow-x: auto; min-width: 0; max-width: 100%; }
.vu-table-wrap .kern-table { min-width: 36rem; }
.kern-card__container, .vu-catalog__results, .vu-main, .vu-container, .vu-grid > *, .kern-card { min-width: 0; max-width: 100%; }
.vu-table-wrap .kern-table__cell--action { white-space: nowrap; text-align: right; }
.vu-inline-form { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.vu-text-danger { color: var(--kern-color-feedback-danger); }
.vu-empty { padding: 2rem 1.5rem; text-align: center; color: var(--kern-color-layout-text-muted); border: 1px dashed var(--kern-color-layout-border-level-2); border-radius: 2px; }
.vu-muted { color: var(--kern-color-layout-text-muted); }
.vu-m0 { margin: 0; }
.vu-prewrap { white-space: pre-line; }
.vu-media { max-width: 100%; border-radius: 2px; }
.vu-count { margin: 1.25rem 0 0.75rem; }
.vu-check-row { margin-top: 0.75rem; }

/* Form layout */
.vu-error-summary ul { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; }
.vu-error-summary a { color: inherit; font-weight: 600; }
.vu-form .kern-form-input + .kern-form-input, .vu-form .kern-form-check + .kern-form-input, .vu-form .kern-form-input + .kern-form-check { margin-block-start: 1rem; }
.vu-form__actions { margin-block-start: 1.5rem; }
.vu-form--inline .vu-form__actions { margin-block-start: 0; }

/* --- 9. Footer ------------------------------------------------------------ */
.vu-footer { margin-block-start: 3rem; background: var(--kern-color-layout-background-hued); border-top: 1px solid var(--kern-color-layout-border-level-2); font-size: 0.875rem; }
.vu-footer__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-block: 1.25rem; }
.vu-footer__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.vu-footer__links a, .vu-footer__links a:visited { color: var(--kern-color-layout-text-default); min-height: 2.25rem; display: inline-flex; align-items: center; }
.vu-footer__credits { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; }
.vu-footer__credit { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--kern-color-layout-text-muted); text-decoration: none; font-size: 0.8125rem; }
.vu-footer__credit img { height: 1.75rem; width: auto; }
.vu-footer__credit img.vu-logo--gemeinde { height: 2.25rem; }
.vu-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-kern-theme="light"]) .vu-logo--light { display: none; }
  :root:not([data-kern-theme="light"]) .vu-logo--dark { display: block; }
}
[data-kern-theme="dark"] .vu-logo--light { display: none; }
[data-kern-theme="dark"] .vu-logo--dark { display: block; }

/* --- 10. Motion and print ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .vu-header, .vu-footer, .vu-skip-link, .vu-actions, .vu-menu { display: none !important; }
}

/* --- 11. Navigation rows: modules + search, module sub navigation ---------- */
.vu-navrow__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vu-navrow__inner > .vu-nav { padding-inline: 0; flex: 1 1 auto; min-width: 0; }
.vu-nav__link--planned { color: var(--kern-color-layout-text-muted); opacity: 0.55; cursor: default; font-weight: 400; }
.vu-header__search { display: flex; align-items: center; flex: 0 1 18rem; min-width: 10rem; height: 2.125rem; border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 2px; background: var(--kern-color-layout-background-hued); }
.vu-header__search:focus-within { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: 1px; }
.vu-header__search-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 0.625rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: 0.875rem; }
.vu-header__search-input:focus { outline: none; }
.vu-header__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vu-header__search-button { display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 100%; border: 0; background: transparent; color: var(--kern-color-layout-text-muted); cursor: pointer; }
.vu-header__search-button .kern-icon { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; min-height: 1.125rem; }
.vu-header__search-button:hover { color: var(--kern-color-action-default); }
.vu-header__subrow { background: var(--kern-color-layout-background-hued); border-bottom: 1px solid var(--kern-color-layout-border-level-2); }
.vu-subnav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-block: 0; list-style: none; }
.vu-subnav__link { display: inline-flex; align-items: center; min-height: 2.375rem; color: var(--kern-color-layout-text-muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; }
.vu-subnav__link:hover { color: var(--kern-color-layout-text-default); }
.vu-subnav__link[aria-current="page"] { color: var(--kern-color-action-default); border-bottom-color: var(--kern-color-action-default); }
.vu-subnav__link:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: -2px; }

/* --- 12. Start page: hero, tiles, steps ------------------------------------- */
.vu-hero { padding: 1.5rem 0 0.5rem; max-width: 44rem; }
.vu-hero__title { margin: 0 0 0.375rem; font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.vu-hero__text { margin: 0 0 1rem; color: var(--kern-color-layout-text-muted); font-size: 1rem; }
.vu-hero__search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.vu-hero__input { flex: 1 1 12rem; width: auto; min-width: 0; }
.vu-hero__search .kern-btn { flex: 0 0 auto; }
@media (max-width: 30rem) { .vu-hero__search .kern-btn { flex: 1 1 100%; } }
.vu-hero__search .kern-btn { height: 2.5rem; }
.vu-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.vu-tile .kern-title { margin: 0; }
/* all tiles the same: icon, title, sentence; equal height per row */
.vu-tiles > li > .vu-tile { height: 100%; }
.vu-tile .kern-card__container { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; }
.vu-tile__badge { align-self: flex-start; margin-top: auto; }
.vu-tile__links { margin-top: 0.25rem; color: var(--kern-color-layout-text-muted); font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.vu-tile__links li + li::before { content: "\00B7"; margin-right: 0.5rem; }
.vu-tile--planned { border-style: dashed; background: var(--kern-color-layout-background-hued); }
.vu-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.vu-steps li { position: relative; padding-left: 2.5rem; font-size: 0.9375rem; color: var(--kern-color-layout-text-muted); }
.vu-steps li strong { display: block; color: var(--kern-color-layout-text-default); font-weight: 600; }
.vu-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--vu-blue-100); color: var(--vu-blue-700); font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; }
.vu-section--tight { margin-top: 0.75rem; }
.vu-results { display: grid; gap: 0.75rem; }
.vu-result { padding: 0.75rem 1rem; border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 2px; background: var(--kern-color-layout-background-default); }
.vu-result__title { font-weight: 600; }
.vu-result__meta { display: block; margin-top: 0.125rem; color: var(--kern-color-layout-text-muted); font-size: 0.8125rem; }

/* --- 13. Display settings menu --------------------------------------------- */
.vu-display-icon { font-weight: 600; font-size: 0.8125rem; letter-spacing: -0.02em; }
.vu-display-group { margin: 0; padding: 0 0 0.25rem; border: 0; min-width: 0; }
.vu-display-options { display: flex; gap: 0.25rem; padding: 0.125rem 0.5rem 0.375rem; }
.vu-display-option { flex: 1 1 0; min-height: 2rem; padding: 0 0.5rem; border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 2px; background: var(--kern-color-layout-background-default); color: var(--kern-color-layout-text-default); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.vu-display-option:hover { background: var(--kern-color-layout-background-hued); }
.vu-display-option[aria-pressed="true"] { background: var(--kern-color-action-default); border-color: var(--kern-color-action-default); color: var(--kern-color-action-on-default); font-weight: 600; }
.vu-display-option:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: 1px; }
.vu-menu__item--small { font-size: 0.8125rem; color: var(--kern-color-layout-text-muted); border-top: 1px solid var(--kern-color-layout-border-level-2); border-radius: 0; margin-top: 0.25rem; padding-top: 0.5rem; }

/* --- 14. User preferences: font size and high contrast --------------------- */
html[data-vu-font="large"] { font-size: 17px; }
html[data-vu-font="xlarge"] { font-size: 19px; }
html[data-vu-contrast="high"] {
  --kern-color-layout-text-default: #000000;
  --kern-color-layout-text-muted: #1f1f1f;
  --kern-color-layout-background-default: #ffffff;
  --kern-color-layout-background-hued: #ffffff;
  --kern-color-layout-background-level-1: #ffffff;
  --kern-color-layout-background-default-surface: #ffffff;
  --kern-color-layout-border-level-1: #000000;
  --kern-color-layout-border-level-2: #000000;
  --kern-color-action-default: #002d5a;
  --kern-color-action-focus-default: #000000;
  --vu-header-accent: #002d5a;
  --vu-nav-current: #002d5a;
}
html[data-vu-contrast="high"][data-kern-theme="dark"],
html[data-vu-contrast="high"].kern-dark {
  --kern-color-layout-text-default: #ffffff;
  --kern-color-layout-text-muted: #e6e6e6;
  --kern-color-layout-background-default: #000000;
  --kern-color-layout-background-hued: #000000;
  --kern-color-layout-background-level-1: #000000;
  --kern-color-layout-background-level-1-surface: #000000;
  --kern-color-layout-background-level-2: #000000;
  --kern-color-layout-background-default-surface: #000000;
  --kern-color-layout-border-level-1: #ffffff;
  --kern-color-layout-border-level-2: #ffffff;
  --kern-color-action-default: #ffd54a;
  --kern-color-action-on-default: #000000;
  --kern-color-action-focus-default: #ffffff;
  --vu-header-accent: #ffd54a;
  --vu-nav-current: #ffd54a;
}
html[data-vu-contrast="high"] a:not(.kern-btn) { text-decoration: underline; }
html[data-vu-contrast="high"] .kern-card, html[data-vu-contrast="high"] .vu-result { border-width: 2px; }
html[data-vu-contrast="high"] :focus-visible { outline-width: 3px !important; }

/* --- 16. Catalog: search bar, facets, chips, result cards ------------------
   Pattern: sidebar facets on wide screens, collapsible "Filter" panel on
   small screens, applied filters as removable chips (docs/07-design.md §5a). */
.vu-searchbar { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.vu-searchbar__input { flex: 1 1 auto; width: auto; min-width: 0; height: 2.75rem; font-size: 1rem; }
.vu-searchbar__button { height: 2.75rem; gap: 0.375rem; }
.vu-searchbar__button .kern-icon { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; min-height: 1.125rem; }

.vu-catalog { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.vu-filters { border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 2px; background: var(--kern-color-layout-background-default); }
.vu-filters > summary { list-style: none; }
.vu-filters > summary::-webkit-details-marker { display: none; }
.vu-filters__toggle { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.vu-filters__toggle .kern-icon { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; min-height: 1.125rem; }
.vu-filters__toggle .vu-menu__chevron { margin-left: auto; }
.vu-filters__toggle:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: -2px; border-radius: 2px; }
.vu-filters__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: var(--kern-color-action-default); color: var(--kern-color-action-on-default); font-size: 0.75rem; font-weight: 600; }
.vu-filters__panel { padding: 0.25rem 0.875rem 0.875rem; }
.vu-filters[open] .vu-filters__toggle { border-bottom: 1px solid var(--kern-color-layout-border-level-2); }
.vu-facet { margin: 0; padding: 0.75rem 0; border: 0; border-bottom: 1px solid var(--kern-color-layout-border-level-2); min-width: 0; }
.vu-facet:last-of-type { border-bottom: 0; }
.vu-facet__title { padding: 0; margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kern-color-layout-text-muted); }
.vu-facet__option { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; cursor: pointer; font-size: 0.9375rem; }
.vu-facet__option input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--kern-color-action-default); flex: 0 0 auto; }
.vu-facet__option input:focus-visible { outline: 2px solid var(--kern-color-action-focus-default); outline-offset: 2px; }
.vu-facet__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vu-facet__count { color: var(--kern-color-layout-text-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.vu-facet__option--empty { color: var(--kern-color-layout-text-muted); opacity: 0.6; cursor: default; }
.vu-filters__actions { display: grid; gap: 0.5rem; justify-items: center; padding-top: 0.75rem; }
.vu-filters__actions .kern-btn { width: 100%; }

.vu-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 2.5rem; margin-bottom: 0.75rem; }
.vu-toolbar__count { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--kern-color-layout-text-muted); display: inline-flex; align-items: center; gap: 0.5rem; }
.vu-toolbar__sort { display: inline-flex; align-items: center; gap: 0.5rem; }
.vu-toolbar__label { font-size: 0.8125rem; color: var(--kern-color-layout-text-muted); }
.vu-toolbar__select { height: 2.25rem; min-width: 11rem; }
.vu-toolbar__select .kern-form-input__select { font-size: 0.875rem; }
.vu-toolbar__select::after { top: 1.125rem; }
.vu-indicator { width: 0.875rem; height: 0.875rem; border: 2px solid var(--kern-color-layout-border-level-2); border-top-color: var(--kern-color-action-default); border-radius: 50%; animation: vu-spin 0.8s linear infinite; opacity: 0; }
.htmx-request .vu-indicator, .htmx-request.vu-indicator { opacity: 1; }
@keyframes vu-spin { to { transform: rotate(360deg); } }

.vu-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.vu-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.875rem; padding: 0 0.625rem; border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 999px; background: var(--kern-color-layout-background-hued); color: var(--kern-color-layout-text-default); font-size: 0.8125rem; text-decoration: none; }
.vu-chip:hover { border-color: var(--kern-color-action-default); }
.vu-chip__x { font-size: 1rem; line-height: 1; color: var(--kern-color-layout-text-muted); }
.vu-chips__reset { margin-left: 0.25rem; }

.vu-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
@media (max-width: 30rem) { .vu-grid--cards { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .vu-asset-card .kern-card__container { padding: 0.625rem; } .vu-asset-card__meta { font-size: 0.8125rem; } }
.vu-asset-card { overflow: hidden; }
.vu-thumb { position: relative; width: 100%; align-self: stretch; aspect-ratio: 4 / 3; background: var(--kern-color-layout-background-hued); border-bottom: 1px solid var(--kern-color-layout-border-level-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vu-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vu-thumb__initial { font-size: 2.5rem; font-weight: 600; color: var(--kern-color-layout-border-level-2); }
.vu-thumb__badge { position: absolute; left: 0.5rem; bottom: 0.5rem; }
.vu-asset-card .kern-card__container { gap: 0.25rem; padding: 0.875rem; }
.vu-asset-card__kicker { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kern-color-layout-text-muted); }
.vu-asset-card__meta { margin: 0.375rem 0 0; font-size: 0.875rem; }
.vu-asset-card__price { font-weight: 600; }

/* --- 17. Catalog on wide screens (after the base rules so they win) -------- */
@media (min-width: 56rem) {
  .vu-catalog { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; }
  .vu-filters { position: sticky; top: 1rem; }
  .vu-filters__toggle { display: none; }
  .vu-filters[open] .vu-filters__toggle { display: none; }
  .vu-filters__panel { display: block; padding-top: 0.25rem; }
  .vu-filters__actions .kern-btn { display: none; }
  .vu-filters__actions { padding-top: 0.5rem; }
}

/* --- 15. Small screens (must come last to win over the base rules) --------- */
@media (max-width: 40rem) {
  .vu-header__tools { flex-wrap: wrap; justify-content: flex-start; gap: 0.25rem 0.5rem; }
  .vu-menu__value { max-width: 8rem; }
  .vu-club-pill .vu-menu__kicker { display: none; }
  .vu-hero__title { font-size: 1.5rem; }
  .vu-main > .vu-container { padding-block: 1.25rem 2rem; }
}
@media (max-width: 48rem) {
  .vu-header__search { display: none; }
  .vu-navrow__inner > .vu-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vu-navrow__inner > .vu-nav::-webkit-scrollbar { display: none; }
  .vu-nav__link { white-space: nowrap; }
  .vu-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vu-subnav::-webkit-scrollbar { display: none; }
  .vu-subnav__link { white-space: nowrap; }
}
@media (max-width: 30rem) {
  .vu-hero__search { flex-direction: column; }
  .vu-hero__search .vu-hero__input { flex: none; width: 100%; height: 2.75rem; }
  .vu-hero__search .kern-btn { width: 100%; }
}

/* =========================================================================
   18. Visual refresh (2026-10-30, Kevin: "zu sehr Behörde")
   Softer radii, real bordered inputs instead of KERN's underline fields,
   white cards on a light page, calmer section titles, a brand mark.
   Appended last so it wins over the KERN defaults above.
   ========================================================================= */
:root { --vu-radius-s: 2px; --vu-radius-m: 2px; --vu-radius-l: 2px; --vu-shadow-card: 0 1px 2px rgba(15, 66, 107, 0.05), 0 1px 1px rgba(15, 66, 107, 0.03); --vu-shadow-hover: 0 6px 18px rgba(15, 66, 107, 0.10); }
@media (prefers-color-scheme: light) { :root:not([data-kern-theme="dark"]) { --kern-color-layout-background-default: #f6f7f9; --kern-color-layout-background-hued: #eef0f4; --kern-color-layout-background-level-1-surface: #ffffff; --kern-color-layout-background-level-2: #ffffff; } }
[data-kern-theme="light"], .kern-light { --kern-color-layout-background-default: #f6f7f9; --kern-color-layout-background-hued: #eef0f4; --kern-color-layout-background-level-1-surface: #ffffff; --kern-color-layout-background-level-2: #ffffff; }
body { background: var(--kern-color-layout-background-default); }

/* header: white, soft shadow, no hard accent bar */
.vu-header { border-top: 0; background: #ffffff; box-shadow: 0 1px 0 var(--kern-color-layout-border-level-2); }
[data-kern-theme="dark"] .vu-header, .kern-dark .vu-header { background: var(--vu-night-800); }
@media (prefers-color-scheme: dark) { :root:not([data-kern-theme="light"]) .vu-header { background: var(--vu-night-800); } }
.vu-header__navrow, .vu-header__subrow { background: transparent; border-top: 0; }
.vu-header__subrow { border-bottom: 1px solid var(--kern-color-layout-border-level-2); background: var(--kern-color-layout-background-hued); }
.vu-brand { flex-direction: row; align-items: center; gap: 0.5rem; }
.vu-brand__mark { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
.vu-brand__text { display: flex; flex-direction: column; line-height: 1; }
.vu-brand__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.vu-brand__place { margin-top: 0.15rem; font-size: 0.5625rem; letter-spacing: 0.16em; }

/* surfaces */
.kern-card { border-radius: var(--vu-radius-m); background: var(--kern-color-layout-background-level-1-surface); box-shadow: var(--vu-shadow-card); border-color: var(--kern-color-layout-border-level-2); }
.kern-card--interactive { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.kern-card--interactive:hover { box-shadow: var(--vu-shadow-hover); transform: translateY(-1px); }
.vu-thumb { border-radius: var(--vu-radius-m) var(--vu-radius-m) 0 0; }
.vu-filters, .vu-menu__panel, .vu-result, .vu-empty { border-radius: var(--vu-radius-m); }
.vu-filters { box-shadow: var(--vu-shadow-card); background: var(--kern-color-layout-background-level-1-surface); }
.vu-result, .vu-empty { background: var(--kern-color-layout-background-level-1-surface); }
.vu-tile--planned { background: transparent; box-shadow: none; }

/* buttons */
.kern-btn { border-radius: var(--vu-radius-s); }
.kern-btn--primary { box-shadow: 0 1px 2px rgba(15, 66, 107, 0.2); }
.kern-btn--secondary { background: var(--kern-color-layout-background-level-1-surface); }

/* inputs: bordered fields with focus ring (replaces KERN's underline look) */
.kern-form-input__input, .kern-form-input__select-wrapper, .vu-header__search { border: 1px solid var(--kern-color-layout-border-level-1); border-radius: var(--vu-radius-s); background: var(--kern-color-layout-background-level-1-surface); box-shadow: none; outline: none; }
.kern-form-input__input:hover, .kern-form-input__select-wrapper:hover { border-color: var(--kern-color-action-default); border-width: 1px; box-shadow: none; outline: none; padding-top: 0; }
.kern-form-input__input:focus, .kern-form-input__input:focus-visible, .kern-form-input__select-wrapper:focus-within { border: 1px solid var(--kern-color-action-default); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kern-color-action-default) 22%, transparent); outline: none; padding-bottom: 0; }
.kern-form-input__select { border: 0; background: transparent; }
.kern-form-input__select-wrapper:hover { border-bottom: 1px solid var(--kern-color-action-default); }
.kern-form-input__input--error { border-color: var(--kern-color-feedback-danger); }
textarea.kern-form-input__input:focus { padding: 0.5rem 0.75rem; }
.vu-searchbar__input, .vu-hero__input { border-radius: var(--vu-radius-s); }

/* section titles: sentence case instead of tracked uppercase */
.vu-overline { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.625rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kern-color-layout-text-default); }
.kern-card__container > .vu-overline { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.kern-table__header .kern-table__cell { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
.vu-facet__title { text-transform: none; letter-spacing: 0; font-size: 0.875rem; color: var(--kern-color-layout-text-default); }
.vu-menu__label, .vu-menu__kicker, .vu-kicker, .vu-asset-card__kicker { letter-spacing: 0.08em; }

/* start page hero as a soft panel */
.vu-hero { max-width: none; padding: 1.5rem 1.5rem 1.625rem; border-radius: var(--vu-radius-l); background: linear-gradient(135deg, var(--vu-blue-050) 0%, #ffffff 65%); border: 1px solid var(--kern-color-layout-border-level-2); }
@media (prefers-color-scheme: dark) { :root:not([data-kern-theme="light"]) .vu-hero { background: linear-gradient(135deg, var(--vu-night-700), var(--vu-night-800)); } }
[data-kern-theme="dark"] .vu-hero, .kern-dark .vu-hero { background: linear-gradient(135deg, var(--vu-night-700), var(--vu-night-800)); }
.vu-hero__greeting { margin: 0 0 0.125rem; font-size: 0.875rem; font-weight: 500; color: var(--kern-color-layout-text-muted); }
.vu-hero__title { font-size: 1.625rem; }
.vu-hero__search { max-width: 40rem; }
.vu-tile__icon { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: var(--vu-radius-s); background: var(--vu-blue-050); color: var(--vu-blue-700); margin-bottom: 0.25rem; }
.vu-tile__icon svg { width: 1.25rem; height: 1.25rem; }
.vu-steps li::before { border-radius: var(--vu-radius-s); }

/* catalog: search sits above the results column, not across the page */
.vu-searchbar { max-width: 36rem; margin-bottom: 0; }
.vu-toolbar { margin-top: 0.25rem; }
.vu-chip { border-radius: 2px; background: var(--vu-blue-050); border-color: transparent; color: var(--vu-blue-700); }
.vu-chip:hover { background: var(--vu-blue-100); }
@media (prefers-color-scheme: dark) { :root:not([data-kern-theme="light"]) .vu-chip, :root:not([data-kern-theme="light"]) .vu-tile__icon { background: var(--vu-night-700); color: var(--vu-blue-300); } :root:not([data-kern-theme="light"]) .vu-tile__icon { background: color-mix(in srgb, var(--vu-blue-300) 18%, transparent); } }
/* same when dark is chosen in the "Aa" menu, not by the system */
[data-kern-theme="dark"] .vu-chip, [data-kern-theme="dark"] .vu-tile__icon { background: var(--vu-night-700); color: var(--vu-blue-300); }
[data-kern-theme="dark"] .vu-tile__icon { background: color-mix(in srgb, var(--vu-blue-300) 18%, transparent); }
.vu-tile--planned .vu-tile__icon { opacity: 0.6; }
.vu-footer { background: transparent; }

/* thumbnails must not shrink inside the card's flex column */
.vu-thumb { flex: 0 0 auto; }
/* planned module tiles stay compact */
.vu-menu--display .vu-menu__panel { min-width: 19.5rem; }
.vu-display-option { white-space: nowrap; }

/* =========================================================================
   19. Layout system (docs/07-design.md §4b): content width tiers, field
   widths by expected input, fieldsets, catalog header row.
   ========================================================================= */
.vu-container.vu-page--narrow { max-width: calc(44rem + 3rem); }
.vu-container.vu-page--medium { max-width: calc(64rem + 3rem); }

/* input width follows expected content (GOV.UK) */
.vu-field--xs .kern-form-input__input, .vu-field--xs .kern-form-input__select-wrapper { width: 9rem; max-width: 100%; }
.vu-field--s .kern-form-input__input, .vu-field--s .kern-form-input__select-wrapper { width: 13rem; max-width: 100%; }
.vu-field--m .kern-form-input__input, .vu-field--m .kern-form-input__select-wrapper { width: 20rem; max-width: 100%; }
.vu-field--xs, .vu-field--s, .vu-field--m { align-items: flex-start; }

/* fieldsets */
.vu-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.vu-fieldset + .vu-fieldset { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--kern-color-layout-border-level-2); }
/* floated legend = normal block, so the fieldset border-top is not cut by it */
.vu-fieldset__legend { float: left; width: 100%; padding: 0; margin-bottom: 0.75rem; font-size: 1rem; font-weight: 600; }
.vu-fieldset__legend + * { clear: both; }
.vu-fieldset > .kern-form-input + .kern-form-input, .vu-fieldset > .kern-form-check + .kern-form-input, .vu-fieldset > .kern-form-input + .kern-form-check, .vu-fieldset > .kern-form-check + .kern-form-check { margin-top: 1rem; }
.vu-form--tight .kern-form-input + .kern-form-input { margin-top: 0.75rem; }
.vu-form--tight .vu-form__actions { margin-top: 1rem; }

/* checkbox with hint: control + label on one row, hint below the label */
.vu-check { display: block; }
.vu-check__row { display: flex; align-items: center; gap: 0.625rem; min-height: 2rem; }
.vu-check__row .kern-form-check__checkbox { flex: 0 0 auto; }
/* hint and error start under the label text: checkbox, gap and the label padding */
.vu-check__hint { margin: 0.125rem 0 0 3.6125rem; }
.vu-check .kern-error { margin-left: 3.6125rem; }

/* catalog header row: filter title left, search right, same height */
.vu-catalog__filters-title { font-size: 1rem; font-weight: 600; }
.vu-grid--thumbs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }

/* =========================================================================
   20. Catalog grid, final definition (2026-10-30, round 7). Left column: the
   facet panel spans all rows and starts at the search bar's top edge; its
   "Filter" head is as high as the search bar. Right column: search, toolbar
   (count, sort, chips), cards.
   ========================================================================= */
.vu-catalog { grid-template-areas: "search" "filters" "toolbar" "results"; row-gap: 1rem; }
.vu-catalog__search { grid-area: search; }
.vu-catalog__filters { grid-area: filters; min-width: 0; }
.vu-catalog__toolbar { grid-area: toolbar; min-width: 0; }
.vu-catalog__results { grid-area: results; }
.vu-toolbar { margin: 0; min-height: 2.5rem; }
.vu-chips { margin: 0.5rem 0 0; }
.vu-searchbar__input, .vu-searchbar__button { height: 2.75rem; }
@media (min-width: 56rem) {
  .vu-catalog { grid-template-areas: "filters search" "filters toolbar" "filters results"; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 2rem; row-gap: 0.75rem; }
  .vu-catalog__filters { align-self: start; position: sticky; top: 1rem; }
  .vu-filters { margin-top: 0; }
  /* always open on wide screens: the summary becomes the panel head */
  .vu-filters__toggle, .vu-filters[open] .vu-filters__toggle { display: flex; min-height: 2.75rem; pointer-events: none; }
  .vu-filters__toggle .vu-menu__chevron, .vu-filters__toggle .kern-icon { display: none; }
}

/* --- header brands (2026-10-30, round 6): "Vereint" wordmark, Gemeinde logo,
   "by Netsession". The place name under the wordmark is gone. --- */
.vu-header__brands { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.vu-brand { gap: 0.5rem; }
.vu-brand__name { font-size: 1.1875rem; line-height: 1; }
.vu-header__partner { display: flex; align-items: center; height: 2.5rem; padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--kern-color-layout-border-level-2); line-height: 1; }
.vu-header__partner img { height: 2.25rem; width: auto; }
/* Netsession horizontal lockup: style guide minimum 120 px wide on screen
   (docs/02_Logo.md), clear space one key height (~1.2rem) around it, so the
   "by" label keeps its distance. 2.5rem high = 121 px wide at 15 px root. */
.vu-header__partner--by { gap: 1.125rem; }
.vu-header__partner--by img { height: 2.5rem; }
.vu-header__by { font-size: 0.75rem; font-weight: 500; color: var(--kern-color-layout-text-muted); }
@media (max-width: 40rem) { .vu-header__partner { display: none; } }
@media (min-width: 40rem) and (max-width: 56rem) { .vu-header__partner--by { display: none; } }

/* --- Audit log (ADR-0007): filter row and pager ---------------------------- */
.vu-audit-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
.vu-audit-filters .kern-form-input { margin: 0; min-width: 14rem; }
.vu-audit__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vu-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.75rem; font-size: 0.875rem; }

/* --- Support access bar (ADR-0007): never overlooked, on every page -------- */
.vu-support-bar { background: var(--kern-color-feedback-warning-background, #fff3cd); border-bottom: 2px solid var(--kern-color-feedback-warning, #b36b00); color: var(--kern-color-layout-text-default); }
.vu-support-bar__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: space-between; padding-block: 0.625rem; }
.vu-support-bar__text { margin: 0; display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; font-size: 0.9375rem; }
/* default text colour: muted grey reached only 4.48:1 on the yellow bar */
.vu-support-bar__reason { color: inherit; }
.vu-support-bar__actions { display: flex; gap: 1rem; align-items: center; }
.vu-support-bar__link { color: inherit; font-weight: 600; }