/* Runtime themes. NRW uses the existing base styles; only these two opt in. */
:root[data-design="klarblick"] {
  --portal-text-accent: #5141a3; --portal-primary: #6554c0; --portal-primary-hover: #5141a3;
  --portal-ink: #29243d; --portal-muted: #625e74;
  --portal-background: #f7f6fb; --portal-tint: #efecfa;
  --portal-border: #ddd9eb; --portal-footer: #29233e;
  --portal-accent: #b17b17; --portal-focus: #6554c0;
  --portal-shadow: 0 5px 20px #38276508;
}
:root[data-design="schulkompass"] {
  --portal-text-accent: #056875; --portal-primary: #087f8c; --portal-primary-hover: #056875;
  --portal-ink: #183c40; --portal-muted: #526c6d;
  --portal-background: #f8f7f2; --portal-tint: #e5f3f0;
  --portal-border: #d7e4df; --portal-footer: #183c40;
  --portal-accent: #8b661c; --portal-focus: #087f8c;
  --portal-shadow: 0 5px 20px #164d4008;
}

html:is([data-design="klarblick"], [data-design="schulkompass"]) { --nrw-navy: var(--portal-primary); --nrw-red: var(--portal-focus); --nrw-green: var(--portal-primary); --green: var(--portal-primary); --accent: var(--portal-primary); --muted: var(--portal-muted); --border: var(--portal-border); background: var(--portal-background); color: var(--portal-ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) body { background: var(--portal-background); color: var(--portal-ink); font-family: inherit; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) :focus-visible { outline-color: var(--portal-focus); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .site-header { background: #fff; color: var(--portal-ink); border-bottom: 1px solid var(--portal-border); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .header-inner > .brand { background: transparent; color: var(--portal-ink); padding-left: 0; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .brand-icon { background: var(--portal-primary); border-radius: 10px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .brand-nrw { color: var(--portal-muted); letter-spacing: .6px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .site-header nav button { color: var(--portal-muted); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .site-header .nav-active { color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .site-header .nav-active:after { background: var(--portal-primary); border-radius: 2px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .saved-nav b { color: var(--portal-primary); background: var(--portal-tint); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-intro { background: var(--portal-background); color: var(--portal-ink); border-image: none; border-bottom: 3px solid transparent; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-intro h1 { color: var(--portal-ink); letter-spacing: -.9px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-intro p { color: var(--portal-muted); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-areas { background: white; border: 1px solid var(--portal-border); border-radius: 14px; padding: 4px; gap: 4px; box-shadow: var(--portal-shadow); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-areas button { border: 0; border-radius: 10px; color: var(--portal-muted); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-areas button + button { border: 0; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-areas button[aria-current="page"] { background: var(--portal-primary); color: white; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-areas button:hover { background: var(--portal-tint); color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-areas button[aria-current="page"]:hover { background: var(--portal-primary-hover); color: white; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-sidebar { background: white; border-color: var(--portal-border); border-radius: 16px; box-shadow: var(--portal-shadow); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-form-option { color: var(--portal-ink); border-radius: 8px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-form-option:hover,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-form-option:has(input:checked) { background: var(--portal-tint); color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-form-count { background: var(--portal-tint); color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .sidebar-help,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-help,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .catalog-source-hint,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-map > p,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .profile-sources,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .offer-notice,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .offer-groups li span { color: var(--portal-muted); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-section,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-sidebar .status-filter,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-sidebar .catalog-source-hint,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-sidebar-body.is-open { border-color: var(--portal-border); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .catalog-field select,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .catalog-field input,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-sidebar .catalog-field select,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-sidebar .catalog-field input { background: #fff; border: 1px solid var(--portal-border); border-radius: 8px; color: var(--portal-ink); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-panel { border: 1px solid var(--portal-border); border-radius: 16px; box-shadow: var(--portal-shadow); background: white; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-input,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-input input { color: var(--portal-ink); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-input input::placeholder { color: var(--portal-muted); opacity: 1; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .search-panel:focus-within { border-color: var(--portal-primary); box-shadow: 0 0 0 3px var(--portal-tint); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-pill { background: var(--portal-tint); border-color: var(--portal-border); color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .clear-filters,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .sort select { color: var(--portal-muted); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-card,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .compare-card,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .profile,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .empty { border-radius: 16px; border-color: var(--portal-border); box-shadow: var(--portal-shadow); background: white; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-card:hover { border-color: var(--portal-primary); box-shadow: 0 7px 24px #26203912; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-title,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .results-heading h2,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .collection-heading h1,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .profile-heading h1 { color: var(--portal-ink); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-title:hover { color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-type,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .offer-groups h3 span { background: var(--portal-tint); color: var(--portal-primary); border-radius: 6px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .primary,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .show-filter-results { background: var(--portal-primary); color: white; border-radius: 10px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .primary:hover,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .show-filter-results:hover { background: var(--portal-primary-hover); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .save-button { border-color: var(--portal-border); border-radius: 9px; color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .save-button.is-saved { background: var(--portal-tint); border-color: var(--portal-primary); color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .guidance { border: 1px solid var(--portal-border); border-radius: 16px; background: var(--portal-tint); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .guide-icon { background: white; color: var(--portal-primary); border-radius: 12px; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .selection-bar { border-radius: 16px; border-color: var(--portal-border); box-shadow: 0 6px 30px #26203920; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) footer { background: var(--portal-footer); color: white; border-top: 0; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .footer-inner:before,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .footer-inner:after { display: none; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .footer-bottom { border-color: #ffffff38; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) footer :focus-visible { outline-color: #fff; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) body > header { background: white; border-bottom: 1px solid var(--portal-border); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) body > header a { color: var(--portal-ink); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) body > main h1,
html:is([data-design="klarblick"], [data-design="schulkompass"]) body > main h2 { color: var(--portal-ink); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) body > main a { color: var(--portal-primary); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .notice { background: var(--portal-tint); border-left-color: var(--portal-primary); border-radius: 0 12px 12px 0; }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .guidance p,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .location,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .street,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .card-bottom,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .source-note,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .eyebrow { color: var(--portal-muted); }

html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-form-option:hover,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-form-option:has(input:checked),
html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-form-count,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .filter-pill,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .school-type,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .offer-groups h3 span,
html:is([data-design="klarblick"], [data-design="schulkompass"]) .saved-nav b { color: var(--portal-text-accent); }

/* Preserve selected states when the operating system replaces background colors. */
@media (forced-colors: active) {
  html[data-design] .search-areas button[aria-current="page"] {
    outline: 2px solid Highlight;
    outline-offset: -4px;
  }
  html[data-design] .site-header .nav-active:after { border-bottom: 2px solid Highlight; }
  html[data-design] .school-form-option:has(input:checked) { color: Highlight; }
}