/* ==========================================================================
   Min Børnehave — site-refinement.css
   --------------------------------------------------------------------------
   Formål      Ét samlet, vedligeholdeligt lag der strammer hierarki, læsbarhed,
               tilgængelighed og ensartethed på tværs af sitet UDEN at ændre
               markup, id'er, name-attributter, aria-tilstande, data-attributter
               eller JavaScript.
   Indlæsning  SIDST i <head>, efter alle ældre stylesheets (også
               premium-experience.css), med versionsparameter:
                 <link rel="stylesheet" href="/site-refinement.css?v=YYYYMMDD">
               Absolut sti (ikke ./ eller ../), så den virker fra alle mapper.
   Afgrænsning ALT er scopet under .site-ui (body-klassen som generatorerne
               allerede sætter). Sider uden .site-ui (apps/, børne-apps, Milo-
               spil) påvirkes derfor ikke, selv hvis filen skulle blive linket.
               Ingen @import, ingen eksterne fonte/billeder, ingen url().
   Specificitet Samme specificitet som ældre regler vinder via rækkefølge.
               !important bruges KUN de steder der er dokumenteret i
               afsnit 22 (ældre lag bruger !important på samme egenskaber).
   Hjælpemønstre
               • Elementer som JS/utility-klasser (.hidden, md:flex …) skjuler
                 og viser får ALDRIG en ubetinget display-værdi herfra. Hvor
                 layout er nødvendigt bruges  :not(.hidden):not([hidden]).
               • Leaflet/kort, canvas og børne-apps røres ikke ud over
                 #daycare-map { isolation }.
               • Min Skole beholder sin grønne identitet (se afsnit 20).
   Valgfri hook  <body data-primary-funnel="plan|pladsjagt"> afgør hvilken af
               de to funnel-CTA'er der får primær styling (afsnit 4). Uden
               attributten ændres ingenting i forhold til den nuværende HTML.
   Familie-mapping (eksisterende body-klasser, intet nyt påkrævet):
               homepage · find-institution-page · city-page ·
               institutioner-hub-page · guides-hub-page · guide-article-page ·
               seo-intent-page · startklar-page · shop-page · locale-page /
               locale-hub-page · account-page · auth-page · cart-page ·
               checkout-page · favorites-page · notifications-page ·
               legal-page · page-404.  Plan, institutionsdetalje og Min Skole
               afgrænses via deres egne rodklasser (.plan-shell,
               .institution-detail-*, .min-skole-*).
   Indhold     1 Tokens  2 Base og værn  3 Tekst  4 Knapper  5 Formularer
               6 Header/navigation  7 Footer  8 Cookiebanner  9 Fælles primitiver
               10 Forside  11 Launch-hero  12 Pasningsplan  13 Søg/kort
               14 Byhubs  15 Guides  16 Institution  17 Sprogsider
               18 Startklar/Shop  19 Konto/auth/favoritter  20 Min Skole
               21 Print/forced-colors/reduced-motion  22 !important-register
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   Fladt blåt/lyst/hvidt/navy-system. Alle tekst/baggrund-par er målt ≥ 4,5:1,
   kantlinjer på felter ≥ 3:1.
   ========================================================================== */
.site-ui {
  --sr-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sr-navy: #172033;
  --sr-text: #2a3447;
  --sr-muted: #536076;
  --sr-line: #d6deea;
  --sr-line-strong: #7d8aa1;
  --sr-field-border: #6f7d95;
  --sr-wash: #f5f8fc;
  --sr-band: #eaf1fd;
  --sr-band-line: #b9cdf2;
  --sr-blue: #1267e8;
  --sr-action: #1558c8;
  --sr-action-hover: #174bb8;
  --sr-focus: #1558c8;
  --sr-success: #1d7f57;
  --sr-danger: #b42318;
  --sr-radius: 12px;
  --sr-radius-lg: 16px;
  --sr-tap: 2.75rem;
  --sr-gutter: clamp(1rem, 4vw, 1.5rem);
  --sr-wrap: 72rem;
  --sr-prose: 44rem;

  /* Older layout hooks resolve to the active design, including dynamic UI. */
  --color-action: var(--sr-action);
  --color-action-hover: var(--sr-action-hover);
  --color-text: var(--sr-text);
  --color-text-muted: var(--sr-muted);
  --color-surface: #ffffff;
  --color-surface-muted: var(--sr-wash);
  --color-line: var(--sr-line);
  --mb-primary: var(--sr-action);
  --mb-primary-hover: var(--sr-action-hover);
  --mb-primary-soft: var(--sr-band);
  --primary: var(--sr-action);

  /* Knaprolle "primær" og "sekundær" — omdefineres pr. kontekst (afsnit 4). */
  --p-bg: var(--sr-action);
  --p-bd: var(--sr-action);
  --p-fg: #ffffff;
  --p-bgh: var(--sr-action-hover);
  --s-bg: #ffffff;
  --s-bd: var(--sr-line-strong);
  --s-fg: var(--sr-navy);
  --s-bgh: var(--sr-band);

  font-family: var(--sr-font);
}


/* ==========================================================================
   2. BASE OG VÆRN
   ========================================================================== */

/* Elementer med hidden-attributten skal forblive skjulte, uanset hvilken
   display ældre CSS sætter på dem. */
.site-ui [hidden] {
  display: none !important;
}

/* Sticky header (4 rem) må ikke dække anker-mål. */
html:has(body.site-ui) {
  scroll-padding-top: 5rem;
}

.site-ui :target {
  scroll-margin-top: 5rem;
}

.site-ui img,
.site-ui svg {
  max-width: 100%;
}

.site-ui img {
  height: auto;
}

/* Kort-containeren isoleres så Leaflet-lag ikke lægger sig over header,
   dropdowns eller cookiebanner. Intet andet på kortet røres. */
.site-ui #daycare-map {
  isolation: isolate;
}

.site-ui .leaflet-container {
  font-family: inherit;
}

/* Synligt fokus overalt. Hvid indeni blå bånd (afsnit 10–11 sætter farven). */
.site-ui :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--sr-focus);
  outline-offset: 2px;
}

.site-ui :is(.hero-premium, .launch-hero:not(.startklar-hero):not(.guides-hub-hero)) :is(a, button, summary):focus-visible {
  outline-color: #ffffff;
}

/* Inde i hvide kort i et blåt bånd skal ringen igen være blå. */
.site-ui :is(.hero-premium-card, .urgent-branch) :is(a, button, input, select):focus-visible {
  outline-color: var(--sr-focus);
}


/* ==========================================================================
   3. TEKST
   Farver sættes kun i indholdsflader (ikke globalt), så hvide hero-overskrifter
   forbliver hvide.
   ========================================================================== */
.site-ui :is(.launch-section, .guide-card, .guide-article, .plan-card, .soft-card, .seo-intent-body, .institution-detail-hero) :is(h1, h2, h3, h4) {
  color: var(--sr-navy);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.site-ui :is(.launch-section, .guide-card, .guide-article, .plan-card, .soft-card, .seo-intent-body) :is(p, li, dd) {
  color: var(--sr-text);
}

.site-ui .section-title,
.site-ui .launch-section h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.2;
  font-weight: 700;
}

.site-ui .section-kicker,
.site-ui .eyebrow:not(.launch-hero *),
.site-ui .city-intro-card__kicker,
.site-ui .urgent-branch__eyebrow {
  color: var(--sr-action);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Links i brødtekst: understreget og tydelige uden at blive knapper. */
.site-ui :is(.guide-article, .seo-intent-body, .guide-faq, .institution-detail-disclaimer, .legal-page main) p a:not(.mb-btn),
.site-ui :is(.guide-article, .seo-intent-body, .guide-faq) li a:not(.mb-btn) {
  color: var(--sr-action);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.site-ui :is(.guide-article, .seo-intent-body, .guide-faq) :is(p, li) a:not(.mb-btn):hover {
  color: var(--sr-action-hover);
  text-decoration-thickness: 2px;
}


/* ==========================================================================
   4. KNAPPER
   Hierarki styres af to roller (--p-* og --s-*), som kontekster omdefinerer.
   Rolle-variablerne anvendes ét sted (nederst i afsnittet, med !important).
   Min Skole er undtaget og beholder sin egen grønne knapstil.
   ========================================================================== */

/* Rolle pr. knaptype */
.site-ui .mb-btn {
  --bg: var(--s-bg);
  --bd: var(--s-bd);
  --fg: var(--s-fg);
  --bgh: var(--s-bgh);
}

.site-ui .mb-btn-primary {
  --bg: var(--p-bg);
  --bd: var(--p-bd);
  --fg: var(--p-fg);
  --bgh: var(--p-bgh);
}

/* Hierarki-hook: hvilken funnel er primær?  Uden attribut: uændret. */
body.site-ui[data-primary-funnel="plan"] .mb-btn[data-plan-cta],
body.site-ui[data-primary-funnel="pladsjagt"] .mb-btn:is([data-placement-start], [data-urgent-branch-click]) {
  --bg: var(--p-bg);
  --bd: var(--p-bd);
  --fg: var(--p-fg);
  --bgh: var(--p-bgh);
}

body.site-ui[data-primary-funnel="plan"] .mb-btn:is([data-placement-start], [data-urgent-branch-click]),
body.site-ui[data-primary-funnel="pladsjagt"] .mb-btn[data-plan-cta] {
  --bg: var(--s-bg);
  --bd: var(--s-bd);
  --fg: var(--s-fg);
  --bgh: var(--s-bgh);
}

/* Roller i blå bånd (forside-hero og simple launch-heroes) */
.site-ui :is(.hero-premium, .launch-hero:not(.startklar-hero):not(.guides-hub-hero)) {
  --p-bg: #ffffff;
  --p-bd: #ffffff;
  --p-fg: var(--sr-action);
  --p-bgh: var(--sr-band);
  --s-bg: transparent;
  --s-bd: rgba(255, 255, 255, 0.9);
  --s-fg: #ffffff;
  --s-bgh: rgba(255, 255, 255, 0.16);
}

/* …og tilbage til standardroller i hvide kort der ligger i et blåt bånd. */
.site-ui .hero-premium-card,
.site-ui .urgent-branch,
.site-ui .launch-hero .soft-card,
.site-ui .launch-hero .guide-card {
  --p-bg: var(--sr-action);
  --p-bd: var(--sr-action);
  --p-fg: #ffffff;
  --p-bgh: var(--sr-action-hover);
  --s-bg: #ffffff;
  --s-bd: var(--sr-line-strong);
  --s-fg: var(--sr-navy);
  --s-bgh: var(--sr-band);
}

/* Søgeknappen på forsiden er eksplicit sekundær (.hero-search-card--secondary):
   outline, så Pladsjagt/Plan forbliver den ene primære handling. */
.site-ui .hero-search-card.hero-search-card--secondary {
  --p-bg: #ffffff;
  --p-bd: var(--sr-navy);
  --p-fg: var(--sr-navy);
  --p-bgh: var(--sr-band);
}

/* Geometri (ingen løft/skygge, 44 px mål) */
body.site-ui .mb-btn {
  min-height: var(--sr-tap);
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.site-ui .mb-btn:hover,
body.site-ui .mb-btn:active {
  transform: none;
  box-shadow: none;
}

body.site-ui .mb-btn:is(:disabled, [aria-disabled="true"]) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Farver — se afsnit 22 for begrundelse for !important. */
body.site-ui .mb-btn:not(:is(.min-skole-hero, .min-skole-section) *) {
  background: var(--bg) !important;
  border: 1.5px solid var(--bd) !important;
  color: var(--fg) !important;
}

body.site-ui .mb-btn:not(:is(.min-skole-hero, .min-skole-section) *):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  background: var(--bgh) !important;
}

/* Tekstlignende knapper i plan-flowet */
.site-ui .plan-nav__back.mb-btn,
.site-ui .plan-nav__skip.mb-btn {
  --bg: transparent;
  --bd: transparent;
  --fg: var(--sr-action);
  --bgh: var(--sr-band);
}


/* ==========================================================================
   5. FORMULARER
   Kun egenskaber der er sikre: ingen padding-shorthand (ikoner i felter
   bruger padding-inline fra ældre CSS), ingen display.
   ========================================================================== */
.site-ui :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="color"]), select, textarea) {
  min-height: var(--sr-tap);
  padding-block: 0.6rem;
  border: 1.5px solid var(--sr-field-border);
  border-radius: 10px;
  background-color: #ffffff;
  color: var(--sr-navy);
  font-family: inherit;
  font-size: max(1rem, 16px);
  line-height: 1.4;
  box-shadow: none;
}

.site-ui textarea {
  min-height: 7rem;
}

.site-ui :is(input, textarea)::placeholder {
  color: #6b778c;
  opacity: 1;
}

.site-ui :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus-visible {
  border-color: var(--sr-action);
  outline: 3px solid rgba(21, 88, 200, 0.35);
  outline-offset: 1px;
}

.site-ui :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--sr-danger);
}

.site-ui :is(input, select, textarea):disabled {
  background-color: var(--sr-wash);
  color: var(--sr-muted);
  cursor: not-allowed;
}

.site-ui :is(input[type="checkbox"], input[type="radio"]) {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--sr-action);
}

/* Label rundt om afkrydsning/radio får fuldt 44 px mål. */
.site-ui label:has(> input[type="checkbox"], > input[type="radio"]) {
  min-height: var(--sr-tap);
  padding-block: 0.25rem;
  cursor: pointer;
}

.site-ui :is(.plan-field, .startklar-configurator__field) > label,
.site-ui .startklar-configurator__label,
.site-ui .plan-field__label {
  color: var(--sr-navy);
  font-weight: 600;
}

.site-ui :is(.plan-field__hint, .form-hint) {
  color: var(--sr-muted);
  font-size: 0.875rem;
}

.site-ui .plan-field__error {
  color: var(--sr-danger);
  font-size: 0.9375rem;
  font-weight: 600;
}


/* ==========================================================================
   6. HEADER, NAVIGATION, MOBILMENU
   Selektorerne følger shell-layout.css (".site-ui header …"), så de vinder
   ved samme specificitet + rækkefølge. Markup <a><button class="nav-btn">
   bevares. Aktiv side: .active (nu) eller aria-current="page" (anbefalet).
   Ældre lag har mint/grønne hårdkodede farver (#F2FEF9, #B9F0DD, #0B6B50)
   og grøn gradient på aktivt link (!important) — erstattes af blå tokens.
   ========================================================================== */
.site-ui header.site-header,
.site-ui header.locale-header {
  min-height: 4rem !important;
  border-bottom: 1px solid var(--sr-line);
  box-shadow: none;
}

.site-ui header .site-header__bar {
  box-sizing: border-box;
  height: 4rem !important;
  min-height: 4rem;
  padding-block: 0;
}

/* Logo uden ring/løft */
.site-ui header .site-brand-mark,
.site-ui header .site-brand:hover .site-brand-mark,
.site-ui header .site-brand:focus-visible .site-brand-mark {
  box-shadow: none;
  transform: none;
}

.site-ui header .site-brand {
  min-height: var(--sr-tap);
}

/* Piller-containere (nav og værktøjer) flades ud */
.site-ui header nav.site-nav,
.site-ui header nav[aria-label="Hovednavigation"],
.site-ui header nav[aria-label="Main navigation"],
.site-ui header nav[aria-label="Hauptnavigation"],
.site-ui header nav[aria-label="Huvudnavigation"] {
  gap: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 640px) {
  .site-ui header .site-header__tools,
  .site-ui header > .max-w-7xl > .flex.justify-between.items-center.h-16 > .flex.items-center.gap-2 {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

.site-ui header nav.site-nav > a,
.site-ui header nav[aria-label] > a {
  border-radius: 8px;
}

/* Navigationslinks: flad tekst, understreg på aktiv side */
.site-ui header .nav-btn {
  min-height: var(--sr-tap);
  padding: 0.5rem 0.75rem !important;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sr-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  transform: none;
}

.site-ui header .nav-btn:not(.active):not(.nav-btn-cta):hover {
  background: var(--sr-wash) !important;
  color: var(--sr-action) !important;
  border-color: transparent !important;
  box-shadow: none;
  transform: none;
}

.site-ui header .nav-btn.active,
.site-ui header .nav-btn.active:hover,
.site-ui header .nav-btn[aria-current="page"],
.site-ui header a[aria-current="page"] > .nav-btn {
  background: transparent !important;
  color: var(--sr-action) !important;
  border-color: transparent !important;
  border-bottom-color: var(--sr-action) !important;
  box-shadow: none !important;
  transform: none;
}

/* Sprogsidernes CTA-link i nav: outline, ikke grøn gradient */
.site-ui header .nav-btn.nav-btn-cta,
.site-ui header .nav-btn.nav-btn-cta:hover {
  background: #ffffff !important;
  color: var(--sr-action) !important;
  border: 1.5px solid var(--sr-action) !important;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
}

.site-ui header .nav-btn.nav-btn-cta:hover {
  background: var(--sr-band) !important;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-ui header .nav-btn {
    padding-inline: 0.5rem !important;
    font-size: 0.875rem !important;
  }
}

/* Fokus: ældre lag bruger mint 2 px (≈ 2:1 på hvid) — erstattes af 3 px blå.
   Selektorlisten spejler shell-layout.css. */
.site-ui .site-footer-nav a:focus-visible,
.site-ui header .nav-btn:focus-visible,
.site-ui .mobile-nav-link:focus-visible,
.site-ui .mb-btn:focus-visible,
.site-ui .nav-login-link:focus-visible,
.site-ui #mobile-menu-btn:focus-visible,
.site-ui .map-filter-btn:focus-visible,
.site-ui header nav.site-nav > a:focus-visible {
  outline: 3px solid var(--sr-focus);
  outline-offset: 2px;
}

.site-ui header .nav-btn:focus-visible {
  outline-offset: -3px;
}

/* Log ind: roligt outline-link, ikke en konkurrerende primær knap. */
.site-ui header .nav-login-link {
  min-height: var(--sr-tap);
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--sr-line-strong);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  color: var(--sr-navy);
  font-size: 0.9375rem;
  font-weight: 600;
}

.site-ui header .nav-login-link:hover,
.site-ui header .nav-login-link--active {
  border-color: var(--sr-action);
  background: var(--sr-band);
  box-shadow: none;
  color: var(--sr-action);
}

/* Mellem 768 og 1279 px viser ældre CSS hamburger KUN på .app-page; på alle
   andre sider vises i stedet hele 5-punkts-navigationen uden login (login er
   skjult < 1280 px med !important). Her gives alle sider samme opførsel som
   .app-page: navigationen ligger i menuen, så Log ind er nåbar. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .site-ui:not(.app-page) header nav.site-nav {
    display: none !important;
  }

  .site-ui:not(.app-page) header #mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .site-ui:not(.app-page) header #mobile-menu:not(.hidden) {
    display: block !important;
  }
}

/* Menu-knap (mobil): 44 px, blå interaktion */
.site-ui header .site-header__menu-btn,
.site-ui header #mobile-menu-btn {
  width: var(--sr-tap);
  height: var(--sr-tap);
  border: 1.5px solid var(--sr-line-strong);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  color: var(--sr-navy);
}

.site-ui header .site-header__menu-btn:hover,
.site-ui header #mobile-menu-btn:hover,
.site-ui header .site-header__menu-btn[aria-expanded="true"],
.site-ui header #mobile-menu-btn[aria-expanded="true"] {
  border-color: var(--sr-action);
  background: var(--sr-band);
  box-shadow: none;
  color: var(--sr-action);
}

/* Mobilmenu-panelet: ingen display herfra (JS/.hidden styrer visning). */
.site-ui header .site-header__drawer,
.site-ui header #mobile-menu:not(.hidden) {
  border-radius: 0;
  border-top: 1px solid var(--sr-line);
  box-shadow: 0 12px 24px rgba(23, 32, 51, 0.12);
}

.site-ui header #mobile-menu {
  overscroll-behavior: contain;
}

.site-ui #mobile-menu a:is(:active, :focus-visible) {
  background: var(--sr-band);
  color: var(--sr-action);
}

.site-ui header #mobile-menu .mobile-nav-link {
  border-radius: 10px;
  color: var(--sr-navy);
  font-size: 1rem;
  font-weight: 600;
}

.site-ui header #mobile-menu .mobile-nav-link:hover {
  border-color: var(--sr-line);
  background: var(--sr-wash);
  color: var(--sr-action);
}

.site-ui header #mobile-menu .mobile-nav-link.mobile-nav-active,
.site-ui header #mobile-menu .mobile-nav-link.mobile-nav-active:hover,
.site-ui header #mobile-menu .mobile-nav-link[aria-current="page"] {
  border-color: var(--sr-band-line) !important;
  background: var(--sr-band) !important;
  color: var(--sr-action) !important;
  box-shadow: none;
}

.site-ui header #mobile-menu .mobile-nav-link[data-nav-page="login"] {
  margin-top: 0.5rem;
  border: 1.5px solid var(--sr-line-strong);
  justify-content: center;
}

.site-ui header .mobile-menu-lang__heading {
  color: var(--sr-muted);
}

.site-ui header .mobile-lang-option:hover {
  border-color: var(--sr-band-line);
  background: var(--sr-band);
}

.site-ui header .mobile-lang-option.is-active {
  border-color: var(--sr-action);
  background: var(--sr-band);
  color: var(--sr-action);
}

/* Sprogvælger i desktop-header */
.site-ui header .site-header__lang-btn,
.site-ui header #lang-toggle {
  min-height: var(--sr-tap);
}

.site-ui .site-header__lang-toggle[aria-expanded="true"] {
  border-color: var(--sr-action);
  background: var(--sr-band);
  color: var(--sr-action);
}


/* ==========================================================================
   7. FOOTER
   Rettelse: juridisk tekst (CVR, e-mail) var næsten usynlig (hvid 50 %
   !important på lys baggrund). Footer får lys flade, navy tekst og et
   responsivt linkgitter med 44 px mål. Min Skoles egen footer røres ikke.
   ========================================================================== */
.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) {
  background: var(--sr-wash);
  border-top: 1px solid var(--sr-line);
  color: var(--sr-text);
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--sr-wrap);
  margin-inline: auto;
  padding: 2.5rem var(--sr-gutter) 2rem;
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-inner {
  text-align: start;
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-brand strong {
  color: var(--sr-navy);
  font-size: 1.125rem;
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-brand p {
  max-width: 40rem;
  color: var(--sr-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sr-line);
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-nav a {
  display: flex;
  align-items: center;
  min-height: var(--sr-tap);
  color: var(--sr-navy);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-nav a:hover {
  color: var(--sr-action);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-ui footer.site-footer .site-footer-legal {
  margin-top: 0.75rem !important;
  color: var(--sr-muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.5;
}

.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sr-tap);
  color: var(--sr-action);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 480px) {
  .site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   8. COOKIEBANNER
   Mål: banneret må ikke gøre sidens primære handling ulæselig. Scrim bliver
   let og uden sløring; de tre valg får SAMME visuelle vægt (ingen grøn
   "Accepter alle" mod outline-knapper). Markup, ids og JS er uændrede.
   ========================================================================== */
.site-ui #cookie-consent-overlay:not([hidden]) {
  background: rgba(23, 32, 51, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-ui #cookie-consent-overlay .mb-cookie-banner {
  max-width: 56rem !important;
  margin-inline: auto !important;
  padding: 1rem 1.25rem 1.25rem !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: var(--sr-radius-lg) !important;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.14) !important;
}

.site-ui #cookie-consent-overlay .mb-cookie-banner h2 {
  color: var(--sr-navy);
  font-size: 1.0625rem;
}

.site-ui #cookie-consent-overlay .mb-cookie-banner p {
  color: var(--sr-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.site-ui #cookie-consent-overlay .mb-cookie-banner a {
  color: var(--sr-action) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Lige vægt: alle tre knapper hvide med navy ramme. */
.site-ui #cookie-consent-overlay .cookie-actions .mb-btn.cookie-btn,
.site-ui #cookie-consent-overlay .cookie-actions .mb-btn-primary.cookie-btn,
.site-ui #cookie-consent-overlay .cookie-actions .mb-btn-secondary.cookie-btn {
  background: #ffffff !important;
  border: 1.5px solid var(--sr-navy) !important;
  color: var(--sr-navy) !important;
  min-height: var(--sr-tap);
}

.site-ui #cookie-consent-overlay .cookie-actions .mb-btn.cookie-btn:hover {
  background: var(--sr-band) !important;
}

.site-ui #cookie-consent-overlay .cookie-cat-grid label {
  border: 1.5px solid var(--sr-line);
  background: var(--sr-wash);
}

@media (max-width: 640px) {
  .site-ui #cookie-consent-overlay .mb-cookie-banner {
    padding: 0.875rem 1rem 1rem !important;
    max-height: 70vh;
    max-height: 70dvh;
  }
}


/* ==========================================================================
   9. FÆLLES PRIMITIVER (alle familier)
   ========================================================================== */
.site-ui .launch-content {
  width: 100%;
  max-width: var(--sr-wrap);
  margin-inline: auto;
  padding-inline: var(--sr-gutter);
  box-sizing: border-box;
}

.site-ui .launch-section {
  padding-block: clamp(2rem, 4.5vw, 3rem);
}

/* Kort: flade, 1 px ramme, ingen løft */
.site-ui :is(.guide-card, .soft-card, .question-card, .city-intro-card, .plan-card, .startklar-configurator-block) {
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-lg);
  background: #ffffff;
  box-shadow: none;
}

.site-ui :is(.guide-card, .soft-card, .question-card):hover {
  transform: none;
  box-shadow: none;
}

.site-ui a.guide-card:hover,
.site-ui a.soft-card:hover {
  border-color: var(--sr-action);
}

.site-ui .guide-card-grid,
.site-ui .guide-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

/* Brødkrumme */
.site-ui .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.site-ui :is(main, .guide-article) .breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sr-tap);
  color: var(--sr-action);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-ui .breadcrumb > span:not(:last-child) {
  color: var(--sr-muted);
}

/* FAQ (details/summary) */
.site-ui .guide-faq details,
.site-ui .seo-find-faq details {
  border-bottom: 1px solid var(--sr-line);
}

.site-ui .guide-faq summary,
.site-ui .seo-find-faq summary {
  min-height: var(--sr-tap);
  padding-block: 0.75rem;
  color: var(--sr-navy);
  font-weight: 600;
  cursor: pointer;
}

.site-ui .guide-faq details > :not(summary),
.site-ui .seo-find-faq details > :not(summary) {
  padding-bottom: 0.75rem;
}

/* Piller/chips */
.site-ui :is(.age-group-pill, .plan-chip):not(button) {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--sr-band-line);
  border-radius: 999px;
  background: var(--sr-band);
  color: var(--sr-navy);
  font-size: 0.875rem;
  font-weight: 600;
}

.site-ui button.plan-chip {
  min-height: var(--sr-tap);
  padding: 0.375rem 1rem;
  border: 1.5px solid var(--sr-field-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--sr-navy);
  font-weight: 600;
  cursor: pointer;
}

.site-ui button.plan-chip:is([aria-pressed="true"], .is-selected, .is-active) {
  border-color: var(--sr-action);
  background: var(--sr-band);
  color: var(--sr-action);
}

/* Tomtilstande */
.site-ui .ec-empty-state {
  padding: 2rem 1rem;
  border: 1px dashed var(--sr-line-strong);
  border-radius: var(--sr-radius-lg);
  background: var(--sr-wash);
  color: var(--sr-text);
  text-align: center;
}

/* Knaprække i indhold */
.site-ui .guide-cta-row,
.site-ui .launch-actions,
.site-ui .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 480px) {
  .site-ui :is(.guide-cta-row, .launch-actions, .hero-actions) > .mb-btn {
    flex: 1 1 100%;
  }
}

.site-ui .trust-note-inline {
  color: var(--sr-muted);
  font-size: 0.875rem;
}


/* ==========================================================================
   10. FORSIDE (.homepage / .hero-premium)
   Fladt blåt bånd, ingen aurora/gradient, mindre overskrift så handlingen
   ligger i første skærm på 375 px. Begge funnel-CTA'er er bevaret
   (se --primary-funnel i afsnit 4).
   ========================================================================== */
.site-ui .hero-premium {
  position: relative;
  padding: clamp(1.75rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3.25rem);
  background: var(--sr-blue) !important;
  color: #ffffff;
}

.site-ui .hero-premium-bg {
  background: none !important;
}

/* These ornaments belonged to the retired theme, not to the shared hero. */
.site-ui.homepage .hero-premium::after,
.site-ui.homepage .hero-premium-bg::before,
.site-ui.homepage .hero-premium-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.site-ui.homepage #mobile-sticky-hero {
  display: none !important;
}

/* Dekorationen skjules via opacity (ikke display) så evt. animationend-
   lyttere i JS stadig udløses. */
.site-ui .hero-premium-aurora {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none;
}

.site-ui .hero-premium-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  max-width: var(--sr-wrap);
  margin-inline: auto;
  padding-inline: var(--sr-gutter);
  box-sizing: border-box;
}

@media (min-width: 960px) {
  .site-ui .hero-premium-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
  }
}

.site-ui .hero-premium-badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-ui .hero-premium h1 {
  max-width: 20ch;
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

body.site-ui.homepage .hero-premium #hero-headline-accent {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.site-ui .hero-premium-lead {
  max-width: 38rem;
  margin: 0 0 1.25rem;
  color: #ffffff;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}

.site-ui .hero-plan-cta:not(.hidden):not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.site-ui .hero-plan-cta__btn {
  flex: 0 1 auto;
}

@media (max-width: 480px) {
  .site-ui .hero-plan-cta__btn {
    flex: 1 1 100%;
  }
}

.site-ui .hero-plan-cta__note {
  flex: 1 0 100%;
  order: 5;
  margin: 0;
  color: #ffffff;
  font-size: 0.875rem;
}

/* Hvis plan-funnelen vælges som primær, kommer den først i rækken. */
body.site-ui[data-primary-funnel="plan"] .hero-plan-cta .mb-btn[data-plan-cta] {
  order: -1;
}

.site-ui .hero-search-divider {
  margin: 1rem 0 0.75rem;
  color: #ffffff;
  font-size: 0.875rem;
  opacity: 0.92;
}

.site-ui .hero-search-card {
  max-width: 38rem;
  padding: 0.75rem;
  border: 1px solid var(--sr-band-line);
  border-radius: var(--sr-radius-lg);
  background: #ffffff;
  box-shadow: none;
}

.site-ui .hero-premium-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-ui .hero-premium-search input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
}

.site-ui .hero-premium-search .mb-btn {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .site-ui .hero-premium-search .mb-btn {
    flex: 1 1 100%;
  }
}

/* Fordelslinks: rolige tekstlinks i stedet for kort/knapper. */
.site-ui .hero-premium-features-wrap {
  padding-inline: 0;
  margin-inline: 0;
}

.site-ui .hero-premium-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.site-ui .hero-premium-features > li {
  margin: 0;
  padding: 0;
}

.site-ui .hero-premium-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--sr-tap);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-ui .hero-premium-feature-link:hover {
  background: transparent;
  text-decoration-thickness: 2px;
}

/* Panelet (Milo/forældrebillede) er pynt: lavere på mobil, aldrig før
   handlingen. Synlighed styres fortsat af Milo-gaten. */
.site-ui .hero-premium-panel {
  order: 2;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .site-ui .hero-premium-panel {
    max-height: 11rem;
    overflow: hidden;
  }
}

.site-ui .hero-parent-image {
  border-radius: var(--sr-radius-lg);
  object-fit: cover;
}


/* ==========================================================================
   11. LAUNCH-HERO (find-institution, byhubs, sprogsider, intent-sider …)
   To varianter:
     • Blå bånd  — kun h1 + brødtekst + knapper (standard)
     • Lyst bånd — komplekse heroes med sidepanel/highlights:
                   .startklar-hero og .guides-hub-hero
   ========================================================================== */
.site-ui .launch-hero {
  padding: clamp(1.5rem, 4.5vw, 3rem) 0 clamp(1.75rem, 4.5vw, 2.75rem);
  background: var(--sr-blue) !important;
  background-image: none !important;
  color: #ffffff;
}

.site-ui .launch-hero:not(.startklar-hero):not(.guides-hub-hero):not(.institutioner-hub-hero) h1 {
  max-width: 24ch;
  margin: 0 0 0.75rem;
  color: #ffffff;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.site-ui .launch-hero.institutioner-hub-hero h1 {
  max-width: 24ch;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  text-wrap: balance;
}

.site-ui .launch-hero .home-hero-copy,
.site-ui .launch-hero .launch-content > p {
  max-width: 44rem;
  color: #ffffff;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
}

.site-ui .launch-hero .eyebrow,
.site-ui .launch-hero:not(.startklar-hero):not(.guides-hub-hero) .eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-ui main .launch-hero:not(.startklar-hero):not(.guides-hub-hero) .breadcrumb a {
  color: #ffffff;
}

.site-ui .launch-hero:not(.startklar-hero):not(.guides-hub-hero) .breadcrumb > span {
  color: #ffffff;
}

.site-ui .launch-hero .guide-cta-row,
.site-ui .launch-hero .launch-actions {
  margin-top: 1.25rem;
}

/* Lyse heroes */
.site-ui .launch-hero:is(.startklar-hero, .guides-hub-hero) {
  background: var(--sr-band) !important;
  color: var(--sr-navy);
}

.site-ui .launch-hero:is(.startklar-hero, .guides-hub-hero) :is(h1, h2, h3) {
  color: var(--sr-navy);
  text-wrap: balance;
}

.site-ui .launch-hero:is(.startklar-hero, .guides-hub-hero) h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.site-ui .launch-hero:is(.startklar-hero, .guides-hub-hero) :is(p, li, .home-hero-copy) {
  color: var(--sr-text);
}

.site-ui .launch-hero:is(.startklar-hero, .guides-hub-hero) .eyebrow {
  color: var(--sr-action);
}

.site-ui main .launch-hero:is(.startklar-hero, .guides-hub-hero) .breadcrumb a {
  color: var(--sr-action);
}

.site-ui .launch-hero:is(.startklar-hero, .guides-hub-hero) :is(.guides-hub-hero__aside, .startklar-hero__highlights) {
  border: 1px solid var(--sr-band-line);
  border-radius: var(--sr-radius-lg);
  background: #ffffff;
  box-shadow: none;
}


/* ==========================================================================
   12. PASNINGSPLAN (/plan, /plan/min) — .plan-shell
   Ét felt/valg ad gangen, tydelig fremdrift, én primær handling pr. trin.
   .plan-step og .plan-progress__bar får hverken display eller width herfra
   (styres af .is-active hhv. inline-stil fra JS).
   ========================================================================== */
.site-ui .plan-shell {
  max-width: 42rem;
  margin-inline: auto;
  padding: 0 var(--sr-gutter) 3rem;
  box-sizing: border-box;
}

.site-ui .plan-shell--wide {
  max-width: var(--sr-wrap);
}

.site-ui .plan-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--sr-line);
}

.site-ui .plan-topbar__brand {
  color: var(--sr-action);
  font-weight: 700;
  text-decoration: none;
}

.site-ui .plan-topbar__exit {
  display: inline-flex;
  align-items: center;
  min-height: var(--sr-tap);
  color: var(--sr-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-ui .plan-progress__label {
  color: var(--sr-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.site-ui .plan-progress__track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sr-band);
}

.site-ui .plan-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--sr-action);
  transition: width 0.25s ease;
}

.site-ui .plan-card {
  padding: clamp(1rem, 4vw, 1.75rem);
}

.site-ui .plan-card h1,
.site-ui .plan-card h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.2;
}

.site-ui .plan-step__help {
  color: var(--sr-muted);
  font-size: 0.9375rem;
}

.site-ui .plan-field {
  margin-block: 1.25rem;
}

.site-ui .plan-field :is(input, select, textarea) {
  width: 100%;
  box-sizing: border-box;
}

.site-ui .plan-kommune-hint {
  margin-top: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: var(--sr-radius);
  background: var(--sr-band);
  color: var(--sr-navy);
  font-size: 0.9375rem;
}

.site-ui .plan-privacy-note {
  margin-top: 1rem;
  color: var(--sr-muted);
  font-size: 0.875rem;
}

.site-ui .plan-options {
  display: grid;
  gap: 0.75rem;
}

.site-ui .plan-option {
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--sr-field-border);
  border-radius: var(--sr-radius);
  background: #ffffff;
  color: var(--sr-navy);
  cursor: pointer;
}

.site-ui .plan-option:hover {
  border-color: var(--sr-action);
}

.site-ui .plan-option:is(:has(input:checked), .is-selected, [aria-checked="true"], [aria-pressed="true"]) {
  border-color: var(--sr-action);
  background: var(--sr-band);
  box-shadow: inset 0 0 0 1px var(--sr-action);
}

.site-ui .plan-option:has(input:focus-visible) {
  outline: 3px solid var(--sr-focus);
  outline-offset: 2px;
}

.site-ui .plan-nav:not(.hidden):not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
}

.site-ui .plan-nav .mb-btn-primary {
  margin-inline-start: auto;
}

@media (max-width: 480px) {
  .site-ui .plan-nav:not(.hidden):not([hidden]) {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .site-ui .plan-nav .mb-btn {
    width: 100%;
    margin-inline-start: 0;
  }
}

.site-ui .plan-empty {
  padding: 2rem 1rem;
  text-align: center;
}


/* ==========================================================================
   13. SØG OG KORT (forside #institution-search, /find-institution)
   Resultatkort og filtre bygges af JS med klasser der ikke er leveret som
   prøve; her røres kun det generiske (selects, fokus, kortisolering).
   ========================================================================== */
.site-ui #institution-search {
  scroll-margin-top: 5rem;
}

.site-ui .mb-select__trigger {
  min-height: var(--sr-tap);
  border: 1.5px solid var(--sr-field-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--sr-navy);
}

.site-ui .seo-find-faq {
  max-width: var(--sr-prose);
}


/* ==========================================================================
   14. BYHUBS (/daginstitutioner/*, .city-page)
   Hero: blå (afsnit 11). Her: Pladsjagt-grenen, intro-kort, trin.
   ========================================================================== */
.site-ui .urgent-branch {
  margin: 0;
  max-width: none;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
  border: 0;
  border-bottom: 1px solid var(--sr-line);
  border-radius: 0;
  background: var(--sr-wash);
  box-shadow: none;
}

.site-ui .urgent-branch__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: none;
  width: min(920px, calc(100% - 2rem));
  margin-inline: auto;
  box-sizing: border-box;
}

.site-ui .urgent-branch__inner > div:first-child {
  flex: 1 1 22rem;
  max-width: 40rem;
}

.site-ui .urgent-branch h2 {
  margin: 0 0 0.375rem;
  color: var(--sr-navy);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

.site-ui .urgent-branch p {
  color: var(--sr-text);
}

.site-ui .urgent-branch__trust {
  color: var(--sr-muted);
  font-size: 0.875rem;
}

.site-ui .urgent-branch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-ui .city-page-intro {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .site-ui .city-page-intro {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: start;
  }
}

.site-ui .city-intro-card {
  padding: clamp(1rem, 3vw, 1.5rem);
}

.site-ui .city-intro-card--featured {
  border-color: var(--sr-band-line);
  background: var(--sr-wash);
}

.site-ui .city-intro-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.75rem;
  margin-block: 1rem;
}

.site-ui .city-intro-stat {
  padding: 0.75rem;
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius);
  background: #ffffff;
}

.site-ui .city-intro-stat__value {
  display: block;
  color: var(--sr-navy);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.site-ui .city-intro-stat__label {
  display: block;
  color: var(--sr-muted);
  font-size: 0.875rem;
}

.site-ui .guide-step--actions .guide-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.site-ui .guide-step__btn {
  min-height: var(--sr-tap);
}


/* ==========================================================================
   15. GUIDES (hub + artikler)
   Artikel: læsebredde ~44 rem, lyst introbånd, roligt Milo-motiv der aldrig
   skubber teksten (synlighed styres fortsat af Milo-gaten).
   ========================================================================== */
.site-ui .guides-hub-hero__inner {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .site-ui .guides-hub-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    align-items: start;
  }
}

.site-ui .guides-hub-hero__aside {
  padding: 1rem 1.25rem;
}

.site-ui .guides-hub-hero__aside-label {
  color: var(--sr-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-ui .guides-seo-intro {
  max-width: var(--sr-prose);
  color: var(--sr-text);
}

.site-ui .guide-article.launch-content {
  max-width: 46rem;
}

.site-ui .guide-article-hero {
  margin-bottom: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--sr-band-line);
  border-radius: var(--sr-radius-lg);
  background: var(--sr-band);
}

.site-ui .guide-article-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--sr-navy);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.site-ui .guide-article-hero :is(.guide-article-hero__lede, .home-hero-copy, p) {
  color: var(--sr-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.site-ui .guide-article-hero .eyebrow {
  color: var(--sr-action);
}

.site-ui .guide-article-hero .milo-deco__img,
.site-ui .guide-article-hero .pack-topic__milo img {
  max-width: 7rem;
  height: auto;
}

.site-ui .guide-article :is(p, li) {
  max-width: 68ch;
  line-height: 1.7;
}

.site-ui .guide-article h2 {
  margin-top: 2rem;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.625rem);
  line-height: 1.25;
}

.site-ui .guide-article h3 {
  margin-top: 1.5rem;
  font-size: 1.1875rem;
}

.site-ui .guide-article :is(ul, ol) {
  padding-inline-start: 1.25rem;
}

.site-ui .guide-article li + li {
  margin-top: 0.375rem;
}

.site-ui .guide-intro-card {
  padding: 1rem 1.25rem;
  border-color: var(--sr-band-line);
  background: var(--sr-wash);
}

.site-ui .guide-checklist li {
  min-height: 1.5rem;
}


/* ==========================================================================
   16. INSTITUTIONSDETALJE (/institution/*, genereret)
   ========================================================================== */
.site-ui .institution-detail-hero {
  margin-bottom: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--sr-band-line);
  border-radius: var(--sr-radius-lg);
  background: var(--sr-band);
}

.site-ui .institution-detail-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--sr-navy);
  font-size: clamp(1.625rem, 1.25rem + 1.8vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.site-ui .institution-detail-hero .eyebrow {
  color: var(--sr-action);
}

.site-ui .institution-detail-hero .ec-editorial-figure {
  margin: 0 0 1rem;
}

.site-ui .ec-editorial-img {
  width: 100%;
  max-height: 16rem;
  border-radius: var(--sr-radius);
  object-fit: cover;
}

.site-ui .institution-detail-meta {
  color: var(--sr-text);
  font-size: 0.9375rem;
}

.site-ui :is(dl.institution-detail-meta, .institution-detail-meta dl) {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  margin: 0.75rem 0;
}

.site-ui .institution-detail-meta dt {
  color: var(--sr-muted);
  font-weight: 600;
}

.site-ui .institution-detail-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .site-ui :is(dl.institution-detail-meta, .institution-detail-meta dl) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .site-ui .institution-detail-meta dd {
    margin-bottom: 0.5rem;
  }
}

.site-ui .institution-detail-meta a {
  color: var(--sr-action);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-ui .age-group-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-ui .institution-detail-disclaimer {
  margin-block: 1rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--sr-radius);
  background: #ffffff;
  color: var(--sr-text);
  font-size: 0.9375rem;
}

.site-ui .institution-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.site-ui #institution-favorite-btn {
  min-height: var(--sr-tap);
}

.site-ui #institution-favorite-btn[aria-pressed="true"] {
  --bg: var(--sr-band);
  --bd: var(--sr-action);
  --fg: var(--sr-action);
}

.site-ui :is(.institution-detail-overview, .institution-detail-shortlist, .institution-detail-next-steps) {
  margin-top: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}


/* ==========================================================================
   17. SPROGSIDER (/en, /de, /sv — .locale-page / .locale-hub-page)
   ========================================================================== */
.site-ui .locale-hero__coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0;
  padding: 0;
  color: #ffffff;
  font-size: 0.9375rem;
  list-style: none;
}

.site-ui .locale-extra {
  max-width: var(--sr-prose);
}

.site-ui .soft-card .mb-btn {
  margin-top: 0.75rem;
}


/* ==========================================================================
   18. STARTKLAR / PAKKELISTE / SHOP
   Neutral udstyrsliste og egne produkter bevares. Ingen partner-styling
   tilføjes; eksisterende partnermodul røres kun for tilgængelighed.
   ========================================================================== */
.site-ui .startklar-hero__inner {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .site-ui .startklar-hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: start;
  }
}

.site-ui .startklar-configurator-block {
  padding: clamp(1rem, 3vw, 1.75rem);
}

.site-ui .startklar-configurator__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

.site-ui .startklar-configurator__field :is(input, select) {
  width: 100%;
  box-sizing: border-box;
}

.site-ui .shop-intro-banner,
.site-ui #shop-pack-banner {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--sr-band-line);
  border-radius: var(--sr-radius-lg);
  background: var(--sr-band);
  color: var(--sr-navy);
}

.site-ui :is(.shop-collection-product, .shop-featured-product) {
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius);
  background: #ffffff;
  box-shadow: none;
}

.site-ui :is(.shop-collection-product, .shop-featured-product):hover {
  border-color: var(--sr-action);
  box-shadow: none;
}

.site-ui .shop-partner-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-ui .shop-partner-shortcuts a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sr-tap);
}


/* ==========================================================================
   19. KONTO, AUTH, FAVORITTER, NOTIFIKATIONER, KURV/CHECKOUT
   Dybden i JS-renderede flader er ikke leveret som prøve; her dækkes kun
   fælles felter, knapper og mål. Ingen layout røres.
   ========================================================================== */
.site-ui :is(.saved-action-button, .saved-action-queue-card) {
  min-height: var(--sr-tap);
}

.site-ui :is(#account-app, #favorites-app, #notifications-app) :is(h1, h2, h3) {
  color: var(--sr-navy);
}

.site-ui :is(.auth-page, .checkout-page, .cart-page) form label {
  color: var(--sr-navy);
  font-weight: 600;
}


/* ==========================================================================
   20. MIN SKOLE
   Beholder grøn identitet (#1F6F5B / #185847). Her flyttes kun fokus og
   tilgængelighed; knapper er undtaget i afsnit 4.
   ========================================================================== */
.site-ui:is(.min-skole-page, [data-family="min-skole"]) {
  --sr-action: #1f6f5b;
  --sr-action-hover: #185847;
  --sr-focus: #1f6f5b;
  --sr-band: #e6f1ed;
  --sr-band-line: #b9d6cc;
}

.site-ui :is(.min-skole-hero, .min-skole-section) :is(a, button, summary, input, select, textarea):focus-visible {
  outline-color: #1f6f5b;
}

.site-ui .min-skole-hero :is(a, button):focus-visible {
  outline-color: #ffffff;
}


/* ==========================================================================
   21. PRINT, FORCED COLORS, REDUCED MOTION
   ========================================================================== */
@media print {
  .site-ui .site-header,
  .site-ui .locale-header,
  .site-ui .site-footer,
  .site-ui #cookie-consent-overlay,
  .site-ui .skip-link,
  .site-ui .mobile-sticky-cta--fab,
  .site-ui .mobile-sticky-hero-switch,
  .site-ui .milo-deco,
  .site-ui .hero-premium-panel {
    display: none !important;
  }

  .site-ui .launch-hero,
  .site-ui .hero-premium {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .site-ui .launch-hero :is(h1, p, a, .eyebrow, .breadcrumb *),
  .site-ui .hero-premium :is(h1, p, a, span) {
    color: #000000 !important;
  }

  .site-ui .guide-card,
  .site-ui .plan-card {
    border-color: #999999;
    break-inside: avoid;
  }
}

@media (forced-colors: active) {
  .site-ui .mb-btn,
  .site-ui .nav-login-link,
  .site-ui .plan-option,
  .site-ui button.plan-chip {
    border: 2px solid ButtonText;
  }

  .site-ui .plan-option:is(:has(input:checked), .is-selected, [aria-checked="true"]) {
    border-color: Highlight;
    outline: 2px solid Highlight;
  }

  .site-ui .plan-progress__bar {
    forced-color-adjust: none;
    background: Highlight;
  }

  .site-ui .plan-progress__track {
    border: 1px solid CanvasText;
  }

  .site-ui .nav-btn:is(.active, [aria-current="page"]) {
    border-bottom-color: Highlight;
  }

  .site-ui :is(a, button, input, select, textarea, summary):focus-visible {
    outline-color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-ui *,
  .site-ui *::before,
  .site-ui *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   22. !IMPORTANT-REGISTER (alt andet i filen er uden !important)
   a  .site-ui [hidden]                       værn mod ældre display-regler
   b  .mb-btn background/border/color         ældre lag sætter disse med
                                              !important (cookie, hero, kort);
                                              roller (--p-*/--s-*) giver ét
                                              kontrolpunkt i stedet for mange
   c  .hero-premium / .launch-hero baggrund   sættes i ikke-leverede filer
      (traction/premium-ui/premium-experience/seo-intent-layout) — flad blå
   d  .hero-premium-bg / -aurora              pynt slås fra (opacity, ikke
                                              display, så animationend bevares)
   e  footer .site-footer-legal               ældre kode har !important på
                                              farve/størrelse (usynlig tekst)
   f  cookie-banner + -knapper                ældre kode har !important på
                                              padding/ramme/radius/skygge/link-
                                              farve (site-ui.css) og knapper
   g  reduced-motion                          bevidst global, kun under .site-ui
   h  print-skjul                             kun i @media print
   i  header .nav-btn padding/hover/aktiv     shell-layout.css har !important på
      .nav-btn.nav-cta                        padding, aktiv/hover og CTA (grøn gradient)
   j  .site-ui:not(.app-page) header nav/…    spejler ældre !important for
                                              .app-page (768–1279 px)
   ========================================================================== */


/* ==========================================================================
   Min Børnehave — site-refinement-milo-addendum.css
   --------------------------------------------------------------------------
   Tillæg til site-refinement.css (bytes/SHA for den komplette oprindelige
   fil står i leveringsnoten). Indlæses/appendes EFTER site-refinement.css.

   Formål      Placeringer til maskotten Milo (kun eksisterende illustrationer),
               rent dekorative: pointer-events:none, ingen fokus, ingen
               tekst. Alt-tekst og aria-hidden sættes i markup (se noten).

   Sameksistens med restaureringen / ældre suppressioner
     • Dette tillæg sætter ALDRIG display, visibility, opacity,
       content-visibility eller clip på Milo-hooks. Synlighed styres fortsat
       alene af Milo-gaten og af evt. ældre suppressioner, så den anden
       reviewer kan fjerne dem ét sted uden at dette lag modarbejder det.
       Hvis et element stadig er skjult efter at tillægget er indlæst, er det
       en ældre regel — ikke dette lag.
     • Tillægget erstatter tre bevidste regler i site-refinement.css afsnit
       10, som ellers ville beskære Milo:
         (1) mobil max-height + overflow:hidden på .hero-premium-panel
         (2) object-fit:cover + border-radius på .hero-parent-image
         (3) panelets rækkefølge/størrelse
       De overstyres her med højere specificitet; selve filen er uændret.
     • Ingen !important. Ingen nye farver, fonte, billeder eller url().
     • Alle regler er scopet under .site-ui.

   Hooks (begge navnesæt dækkes, fordi markup og nævnte hooks afviger):
     hero:        .hero-parent-figure | .hero-parent-visual
                  .hero-parent-image  | .hero-parent-visual__img
                  .hero-milo-float, .hero-milo-float__img
     søgehint:    .home-search-milo-hint   (inde i #hero-search-card)
     I nærheden:  .nearby-milo-peek        (barn af pillen/knappen)
     generisk:    .milo-deco, .milo-deco__img (+ --guide-aside, --hero-end)

   Overlapregler (bevidst konstrueret, ikke tilfældige):
     1. Hero: panelet er egen gitterkolonne ≥ 960 px og ligger EFTER
        indholdet på mobil; indholdet har højere z-index.
     2. Søgehint: overlapper max .5 rem af kortets 0,75 rem polstring —
        aldrig feltet eller knappen — og kortet får plads over sig.
     3. Guide/Startklar: ornamenter ligger i hero-polstringen øverst til
        højre; brødkrumme og eyebrow får højre-polstring på mobil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   A. Fælles for alle Milo-dekorationer
   -------------------------------------------------------------------------- */
.site-ui :is(.hero-milo-float, .home-search-milo-hint, .nearby-milo-peek, .milo-deco, .hero-parent-figure, .hero-parent-visual) {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.site-ui :is(.hero-milo-float, .home-search-milo-hint, .nearby-milo-peek, .milo-deco) :is(picture, img) {
  max-width: 100%;
}

.site-ui :is(.hero-milo-float__img, .home-search-milo-hint img, .nearby-milo-peek img, .milo-deco__img) {
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: bottom;
}


/* --------------------------------------------------------------------------
   B. Forsidehero — illustration i højre del af det blå bånd
   Desktop (≥ 960 px): højre gitterkolonne i .hero-premium-inner (afsnit 10).
   Mobil: lille ornament EFTER indholdet — CTA'erne og søgefeltet ligger
   uændret i første skærm.
   -------------------------------------------------------------------------- */
.site-ui .hero-premium .hero-premium-content {
  position: relative;
  z-index: 2;
}

.site-ui .hero-premium .hero-premium-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 6.5rem);
  max-height: none;
  margin: 0.25rem 0 0 auto;
  overflow: visible;
}

.site-ui .hero-premium :is(.hero-parent-figure, .hero-parent-visual) {
  position: relative;
  margin: 0;
}

.site-ui .hero-premium :is(.hero-parent-image, .hero-parent-visual__img) {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(30rem, 62vh);
  margin-inline: auto;
  object-fit: contain;
  border-radius: 0;
  vertical-align: bottom;
}

.site-ui .hero-premium .hero-milo-float {
  position: absolute;
  z-index: 2;
  top: -0.5rem;
  left: -0.75rem;
  width: 2.75rem;
  margin: 0;
}

@media (min-width: 960px) {
  .site-ui .hero-premium .hero-premium-panel {
    align-self: center;
    justify-self: end;
    width: min(100%, 26rem);
    margin: 0;
  }

  .site-ui .hero-premium .hero-milo-float {
    top: -1.25rem;
    left: -1.25rem;
    width: clamp(5rem, 8vw, 7.5rem);
  }
}

/* Rolig svæven, kun når brugeren ikke har bedt om mindre bevægelse. */
@keyframes sr-milo-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: no-preference) {
  .site-ui .hero-premium .hero-milo-float__img {
    animation: sr-milo-bob 6s ease-in-out infinite;
  }
}


/* --------------------------------------------------------------------------
   C. Søgehint — Milo peger/kigger over søgekortets øvre kant
   Markup: <span class="home-search-milo-hint" aria-hidden="true"> som sidste
   barn i #hero-search-card. Kortet er positioneringsanker.
   -------------------------------------------------------------------------- */
.site-ui .hero-search-card {
  position: relative;
}

.site-ui .hero-search-card:has(.home-search-milo-hint) {
  margin-top: 2.75rem; /* hint 3 rem − 0,5 rem overlap + 0,25 rem luft */
}

.site-ui .hero-search-card .home-search-milo-hint {
  position: absolute;
  right: 1rem;
  bottom: calc(100% - 0.5rem);
  width: 3rem;
  margin: 0;
  line-height: 0;
}

@media (min-width: 640px) {
  .site-ui .hero-search-card .home-search-milo-hint {
    right: 1.5rem;
    width: 3.75rem;
  }

  .site-ui .hero-search-card:has(.home-search-milo-hint) {
    margin-top: 3.5rem; /* hint 3,75 rem − 0,5 rem overlap + 0,25 rem luft */
  }
}


/* --------------------------------------------------------------------------
   D. "I nærheden" — lille Milo kigger op over pillen
   Markup: <span class="nearby-milo-peek" aria-hidden="true"> som barn af
   pillen/knappen. Pillen får plads over sig og bliver positioneringsanker.
   Elementet har pointer-events:none, så klik rammer pillen.
   -------------------------------------------------------------------------- */
.site-ui :is(button, a, span, div, li, label):has(> .nearby-milo-peek) {
  position: relative;
  margin-top: 2.5rem; /* peek 2,5 rem − 0,3 rem overlap + 0,2 rem luft */
}

.site-ui .nearby-milo-peek {
  position: absolute;
  left: 1rem;
  bottom: calc(100% - 0.3rem);
  width: 2.5rem;
  margin: 0;
  line-height: 0;
}


/* --------------------------------------------------------------------------
   E. Generiske dekorationer (.milo-deco): guides og Startklar
   Ornamenter ligger i hero-polstringen øverst til højre.
   -------------------------------------------------------------------------- */
.site-ui .milo-deco {
  margin: 0;
  line-height: 0;
}

/* Guide-artikel: peger ved siden af overskriften */
.site-ui .guide-article-hero--with-milo {
  position: relative;
}

.site-ui .guide-article-hero--with-milo .milo-deco--guide-aside {
  position: absolute;
  z-index: 0;
  top: 0.75rem;
  right: 0.75rem;
  width: 3.25rem;
}

.site-ui .guide-article-hero--with-milo :is(.breadcrumb, .eyebrow) {
  padding-right: 4rem;
}

@media (min-width: 640px) {
  .site-ui .guide-article-hero--with-milo {
    padding-right: 7.75rem;
  }

  .site-ui .guide-article-hero--with-milo .milo-deco--guide-aside {
    top: 1rem;
    right: 1.25rem;
    width: 5.5rem;
  }

  .site-ui .guide-article-hero--with-milo :is(.breadcrumb, .eyebrow) {
    padding-right: 0;
  }
}

/* Startklar-hero (lyst bånd): lille flyvende Milo i polstringen */
.site-ui .launch-hero.startklar-hero {
  position: relative;
  padding-top: 3.75rem;
}

.site-ui .startklar-hero .milo-deco--hero-end {
  position: absolute;
  z-index: 0;
  top: 0.5rem;
  right: var(--sr-gutter);
  width: 3.25rem;
}

@media (min-width: 960px) {
  .site-ui .startklar-hero .milo-deco--hero-end {
    width: 4.5rem;
  }
}

/* Thumbs-up i cirkel (badge): kun form og standardstørrelse. Placeringen
   afgøres af skabelonen, hvor figuren lægges (ikke valgt her). */
.site-ui .milo-deco--badge {
  width: 4rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
}

/* ==========================================================================
   Min Børnehave — site-refinement-hero-extension.css
   --------------------------------------------------------------------------
   Appendes EFTER site-refinement.css og site-refinement-milo-addendum.css.
   Bygger på de målte problemer i den rigtige stak (hero-premium.css,
   homepage-sections.css, premium-experience.css). Ingen nye billeder, fonte,
   url() eller afhængigheder. Ingen ændring af tekst, markup-hooks, tracking,
   cookievalg, betaling eller noindex.

   Indhold (afsnitsnumre = afsnit i filen)
     0  Rettelser til mine egne tidligere regler: order:2 + max-height/
        overflow på .hero-premium-panel (Milo nederst og beskåret), min
        sr-milo-bob mod jeres hero-milo-float-drift, margin-top på "I nærheden".
     1  Fokusring: #76a9f6 !important (premium-experience) giver 2,4 : 1 mod
        hvidt og 2,1 : 1 mod #1267e8 (målt). Hvid i blå flader, #084cae ellers.
     2  Forsidehero fælles: eyebrow, h1, lead, CTA'er, #hero-live-stats,
        #hero-trust-line, fordelsliste.
     3  Søgekort #hero-search-card (fuld inputbredde, sekundær knap).
     4  Milo i hero: grundregler (ingen skyggeboks, ingen beskæring).
     5  Mobil/tablet < 960 px: kompakt hero, lille synlig Milo øverst til højre.
     6  Desktop >= 960 px: stor illustration til højre.
     7  Footer: jeres mørke footer er facit (min lyse footer + muted legal-farve
        gav 2,87 : 1 på Min Skole).
     8  Lyse .launch-hero, guide-hub (blå), Tailwind-grå hjælpetekst.
     9  Familier base-CSS ikke dækkede: Pladsjagt, beregner, Minder, checkout,
        login, Syg/rask, Min Skole-kilder (kun mål/fokus/[hidden]/læsbarhed).
    10  Print, forced-colors, reduced motion.

   Specificitet: premium-experience.css bruger !important næsten overalt.
   Her bruges !important kun, hvor en !important-regel i jeres stak ellers
   vinder. Alle regler er scopet under body.site-ui (0,1,1) eller dybere.
   ========================================================================== */


/* ==========================================================================
   0. RETTELSER TIL MINE EGNE TIDLIGERE REGLER
   ========================================================================== */

/* Nær-Milo: jeres .site-ui.homepage .nearby-milo-slot / -peek ejer
   placeringen (left:50% + translateX). Mit margin-top fra tillæg D fjernes. */
.site-ui :is(button, a, span, div, li, label):has(> .nearby-milo-peek) {
  margin-top: 0;
}

/* Hero-Milo: jeres drift-animation er facit; min bob erstattes. */
@media (prefers-reduced-motion: no-preference) {
  .site-ui .hero-premium .hero-milo-float__img {
    animation: hero-milo-float-drift 5.5s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-ui .hero-premium .hero-milo-float__img {
    animation: none;
  }
}


/* ==========================================================================
   1. FOKUSRING (WCAG 1.4.11 / 2.4.7)
   ========================================================================== */
body.site-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #084cae !important;
  outline-offset: 3px !important;
}

/* Blå/mørke flader: hvid ring (5,1 : 1 mod #1267e8, 17 : 1 mod #0b1528). */
body.site-ui :is(.hero-premium, .section-band-blue, .site-footer,
  .guides-hub-hero, .min-skole-hero, .current-stage-card--pladsjagt) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #ffffff !important;
}

/* Hvide kort INDE i blå flader: tilbage til mørkeblå. */
body.site-ui :is(.hero-premium-card, .hero-search-card, .hero-premium-panel .hero-premium-card) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #084cae !important;
}


/* ==========================================================================
   2. FORSIDEHERO — FÆLLES (alle bredder)
   ========================================================================== */

/* Eyebrow: prikken (::before) er en pulserende pynteprik uden betydning. */
body.site-ui.homepage .hero-premium .hero-premium-badge::before {
  content: none;
}

body.site-ui.homepage .hero-premium .hero-premium-badge {
  display: block;
  margin: 0;
  color: #ffffff !important;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.site-ui.homepage .hero-premium :is(h1, #hero-headline) {
  max-width: 22ch;
  margin: 0.5rem 0 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

body.site-ui.homepage .hero-premium .hero-premium-lead {
  max-width: 36rem;
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

body.site-ui.homepage .hero-premium .hero-plan-cta {
  margin: 1rem 0 0;
}

body.site-ui.homepage .hero-premium .hero-plan-cta__btn {
  min-height: 48px;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  animation: none;
}

body.site-ui.homepage .hero-premium .hero-plan-cta__note {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

body.site-ui.homepage .hero-premium .hero-search-divider {
  margin: 1rem 0 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* Jeres stats-boks: samme struktur, kun kompakt. Ingen display/visibility på
   #hero-live-stats eller børnene; aria-live og id'er røres ikke. */
body.site-ui.homepage .hero-premium .hero-premium-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 0.75rem;
}

body.site-ui.homepage .hero-premium .hero-premium-stat:last-child {
  grid-column: auto;
}

body.site-ui.homepage .hero-premium .hero-premium-stat {
  padding: 0.5rem 0.375rem;
  border-radius: 6px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

body.site-ui.homepage .hero-premium .hero-premium-stat strong {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0;
}

body.site-ui.homepage .hero-premium .hero-premium-stat span {
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 600;
}

/* Tillidslinjen: legacy .hero-premium #hero-trust-line (1,1,0) er hvid 75 % =
   3,65 : 1 på #1267e8. Hel hvid = 5,08 : 1. */
body.site-ui.homepage .hero-premium #hero-trust-line {
  margin: 0.75rem 0 0;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Fordelsliste. Samme markup (links ELLER ulinket liste, begge virker). */
body.site-ui.homepage .hero-premium .hero-premium-features-wrap {
  margin: 0;
  padding: 0;
}

body.site-ui.homepage .hero-premium .hero-premium-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

body.site-ui.homepage .hero-premium .hero-premium-features > li {
  margin: 0;
  padding: 0;
}

body.site-ui.homepage .homepage-blue-stack .hero-premium-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.25rem 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

body.site-ui.homepage .homepage-blue-stack a.hero-premium-feature-link {
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.site-ui.homepage .homepage-blue-stack a.hero-premium-feature-link:hover {
  text-decoration-thickness: 2px;
}


/* ==========================================================================
   3. SØGEKORT #hero-search-card
   Fladt hvidt kort; den indre lyseblå "pille" (.hero-premium-search) fjernes,
   så inputtet får hele kortets bredde. Knappen er sekundær (kun ÉN primær
   handling i hero: Start Pladsjagt / data-primary-funnel).
   ========================================================================== */
body.site-ui.homepage .hero-premium .hero-search-card {
  max-width: 34rem;
  margin: 0;
  padding: 0.75rem;
}

body.site-ui.homepage .hero-premium .hero-premium-form {
  gap: 0;
}

body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search .institution-combobox {
  flex: 1 1 auto;
  min-width: 0;
}

body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  text-overflow: ellipsis;
}

body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search button.mb-btn {
  flex: 0 0 auto;
  justify-self: stretch;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  border: 1.5px solid #1558c8 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #1558c8 !important;
  font-weight: 700;
}

body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search button.mb-btn:hover {
  background: #eef5ff !important;
  color: #084cae !important;
}

@media (min-width: 560px) {
  body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search {
    flex-direction: row;
    align-items: stretch;
  }

  body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search button.mb-btn {
    width: auto;
  }
}

/* Dropdown med forslag må aldrig skubbe kortet eller klippes af det. */
body.site-ui.homepage .hero-premium .hero-search-card .institution-suggestions {
  z-index: 5;
}


/* ==========================================================================
   4. MILO I HERO — grundregler (begge breakpoints)
   Milo-gaten er uændret: html[data-milo-public-visible="false"] viser
   foto-fallback. Intet display/visibility/opacity på Milo-hooks herfra.
   ========================================================================== */
body.site-ui.homepage .hero-premium .hero-parent-figure {
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

body.site-ui.homepage .hero-premium .hero-parent-figure::before {
  content: none;
}

body.site-ui.homepage .hero-premium .hero-parent-image {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  filter: none;
}


/* ==========================================================================
   5. MOBIL / TABLET (< 960 px)
   Milo ligger i øverste højre hjørne af .hero-premium-inner (absolut), uden
   for gitterets flow. Eyebrow reserverer pladsen, så intet overlapper.
   ========================================================================== */
@media (max-width: 959.98px) {
  body.site-ui.homepage .hero-premium {
    padding: 1.25rem 0 1.5rem;
  }

  body.site-ui.homepage .hero-premium .hero-premium-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0.875rem;
    width: calc(100% - 2rem);
    max-width: 46rem;
    padding-inline: 0;
  }

  body.site-ui.homepage .hero-premium .hero-premium-content,
  body.site-ui.homepage .hero-premium .hero-premium-stats,
  body.site-ui.homepage .hero-premium #hero-trust-line {
    grid-column: 1;
    grid-row: auto;
  }

  body.site-ui.homepage .hero-premium :is(h1, #hero-headline) {
    font-size: 1.75rem;
  }

  body.site-ui.homepage .hero-premium .hero-plan-cta {
    display: grid;
    gap: 0.5rem;
  }

  body.site-ui.homepage .hero-premium #hero-trust-line {
    text-align: start;
  }

  /* Milo synlig: lille, øverst til højre. */
  html:not([data-milo-public-visible="false"]) body.site-ui.homepage .hero-premium .hero-premium-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: block;
    order: 0;
    width: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  html:not([data-milo-public-visible="false"]) body.site-ui.homepage .hero-premium .hero-parent-figure {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
  }

  html:not([data-milo-public-visible="false"]) body.site-ui.homepage .hero-premium .hero-parent-image {
    height: 3.75rem;
    max-height: none;
  }

  html:not([data-milo-public-visible="false"]) body.site-ui.homepage .hero-premium .hero-milo-float {
    top: -0.25rem;
    right: auto;
    left: -1.375rem;
    width: 2rem;
  }

  /* Plads til Milo: eyebrow er 2 linjer ved siden af, mindst Milos højde. */
  html:not([data-milo-public-visible="false"]) body.site-ui.homepage .hero-premium .hero-premium-badge {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    max-width: calc(100% - 5.25rem);
    min-height: 3.5rem;
  }

  /* Foto-fallback (gate false): i flow, lavt og beskåret. */
  html[data-milo-public-visible="false"] body.site-ui.homepage .hero-premium .hero-premium-panel {
    position: static;
    order: 0;
    margin: 0;
  }

  html[data-milo-public-visible="false"] body.site-ui.homepage .hero-premium .hero-photo-fallback {
    max-width: 100%;
  }

  html[data-milo-public-visible="false"] body.site-ui.homepage .hero-premium .hero-photo-fallback img {
    width: 100%;
    max-height: 9rem;
    object-fit: cover;
  }
}

@media (min-width: 481px) and (max-width: 959.98px) {
  body.site-ui.homepage .hero-premium :is(h1, #hero-headline) {
    font-size: 2.125rem;
  }

  body.site-ui.homepage .hero-premium .hero-plan-cta {
    display: flex;
    flex-wrap: wrap;
  }

  html:not([data-milo-public-visible="false"]) body.site-ui.homepage .hero-premium .hero-parent-image {
    height: 5rem;
  }

  html:not([data-milo-public-visible="false"]) body.site-ui.homepage .hero-premium .hero-premium-badge {
    min-height: 5rem;
    max-width: calc(100% - 7rem);
  }
}


/* ==========================================================================
   6. DESKTOP (>= 960 px) — stor illustration til højre
   ========================================================================== */
@media (min-width: 960px) {
  body.site-ui.homepage .hero-premium {
    padding: 2rem 0 2rem;
  }

  body.site-ui.homepage .hero-premium .hero-premium-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1rem;
    align-items: start;
    width: min(1240px, calc(100% - 3rem));
    max-width: none;
    padding-inline: 0;
  }

  body.site-ui.homepage .hero-premium .hero-premium-content {
    grid-column: 1;
    grid-row: 1;
  }

  body.site-ui.homepage .hero-premium .hero-premium-stats {
    grid-column: 1;
    grid-row: 2;
  }

  body.site-ui.homepage .hero-premium #hero-trust-line {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: center;
  }

  body.site-ui.homepage .hero-premium :is(h1, #hero-headline) {
    font-size: clamp(2.25rem, 1rem + 2.2vw, 3rem);
  }

  body.site-ui.homepage .hero-premium .hero-premium-lead {
    font-size: 1.125rem;
  }

  body.site-ui.homepage .hero-premium .hero-plan-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  body.site-ui.homepage .hero-premium .hero-premium-badge {
    margin-bottom: 0;
  }

  body.site-ui.homepage .hero-premium .hero-premium-panel {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    justify-self: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 34rem;
    max-height: none;
    margin: 0;
    overflow: visible;
  }

  body.site-ui.homepage .hero-premium .hero-parent-figure {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }

  body.site-ui.homepage .hero-premium .hero-parent-image {
    height: auto;
    max-height: min(34rem, max(20rem, calc(100vh - 11rem)));
    max-height: min(34rem, max(20rem, calc(100svh - 11rem)));
  }

  body.site-ui.homepage .hero-premium .hero-milo-float {
    top: -1rem;
    right: 0;
    left: auto;
    width: clamp(5.5rem, 9vw, 8.5rem);
  }

  html[data-milo-public-visible="false"] body.site-ui.homepage .hero-premium .hero-premium-panel {
    align-self: center;
  }
}


/* ==========================================================================
   7. FOOTER — jeres mørke footer er facit på alle .site-ui-sider
   premium-experience.css har samme værdier med !important; her gentages de
   for sider UDEN premium-experience (fx Pladsjagt) og for at slå min egen
   .site-footer-legal-farve (!important, afsnit 7 i base-CSS).
   Min Skoles egen footer (.site-footer-brand--min-skole) røres ikke.
   ========================================================================== */
body.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) {
  border-top: 0;
  background: #0b1528 !important;
  color: #dce8f7 !important;
}

body.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-brand strong {
  color: #ffffff !important;
}

body.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-brand p {
  color: #aebed2 !important;
}

/* Også Min Skoles footer: premium-experience gør den mørk, og min
   .site-footer-legal-farve (muted, !important) gav 2,87 : 1. */
body.site-ui footer.site-footer .site-footer-legal {
  color: #aebed2 !important;
}

body.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) :is(.site-footer-nav a, .site-footer-legal a) {
  color: #e7eff9 !important;
}

body.site-ui footer.site-footer:not(:has(.site-footer-brand--min-skole)) .site-footer-nav {
  border-top-color: rgba(255, 255, 255, 0.22);
}

body.site-ui footer.site-footer .site-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* ==========================================================================
   8. .launch-hero — lys blå flade + ink-tekst er facit
   (premium-experience: .launch-hero:not(.hero-premium) { background:
   var(--mb-blue-wash) !important; h1 ink !important }). Mine hvide farver
   gælder derfor kun de heroes, hvor deres regel ikke rammer (.hero-premium).
   ========================================================================== */
body.site-ui .launch-hero:not(.hero-premium):not(.startklar-hero):not(.guides-hub-hero):not(.min-skole-hero) {
  --sr-hero-ink: #0b1528;
  background: #eef5ff !important;
  color: var(--sr-hero-ink);
}

body.site-ui .launch-hero:not(.hero-premium):not(.startklar-hero):not(.guides-hub-hero):not(.min-skole-hero) :is(h1, .home-hero-copy, .launch-content > p, li) {
  color: var(--sr-hero-ink);
}

body.site-ui .launch-hero:not(.hero-premium):not(.startklar-hero):not(.guides-hub-hero):not(.min-skole-hero) .eyebrow {
  color: #084cae;
}

body.site-ui main .launch-hero:not(.hero-premium):not(.startklar-hero):not(.guides-hub-hero):not(.min-skole-hero) .breadcrumb :is(a, span) {
  color: #084cae;
}

/* Knapperne i de lyse heroes: standardroller (blå primær, hvid sekundær).
   Base-CSS gav dem blå-bånd-roller (hvid tekst på gennemsigtig) = 1,10 : 1. */
body.site-ui .launch-hero:not(.hero-premium):not(.guides-hub-hero):not(.min-skole-hero) {
  --p-bg: var(--sr-action, #1558c8);
  --p-bd: var(--sr-action, #1558c8);
  --p-fg: #ffffff;
  --p-bgh: var(--sr-action-hover, #084cae);
  --s-bg: #ffffff;
  --s-bd: var(--sr-line-strong, #8aa0bd);
  --s-fg: var(--sr-navy, #0b1528);
  --s-bgh: var(--sr-band, #eef5ff);
}

/* Guide-hub: jeres hero er BLÅ med hvid tekst (!important). Min lyse
   .guides-hub-hero-regel i base-CSS gav hvid tekst på lys flade (1,03 : 1). */
body.site-ui.guides-hub-page .launch-hero.guides-hub-hero {
  background: #1267e8 !important;
  color: #ffffff;
}

/* Tailwind-grå hjælpetekst på lyse blå flader: #6b7280 på #eef5ff = 4,41 : 1. */
body.site-ui.app-page main .text-gray-500 {
  color: #4a5b73;
}


/* ==========================================================================
   9. FAMILIER DER IKKE VAR DÆKKET (kun de selectors, der er set i samples)
   Markup- og CSS-filer for placement-layout, pladsjagt-brand, minder-layout,
   coming-soon-layout, beregner-layout, forms-layout og pladsanvisning-wizard
   er IKKE leveret. Reglerne herunder rører derfor kun mål, fokus, [hidden],
   læsbarhed og bevægelse — ikke farver/layout i jeres egne familiefiler.
   ========================================================================== */

/* 9a. Pladsjagt (/pladsjagt, /pladsjagt/start) — loader IKKE premium-experience */
.site-ui .placement-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  text-align: center;
}

.site-ui :is(.placement-field input, .placement-field select, .placement-field textarea) {
  min-height: 48px;
  font-size: 1rem;
}

.site-ui :is(.placement-error-summary, .placement-field__error)[hidden] {
  display: none !important;
}

.site-ui :is(.placement-trust-line, .placement-disclaimer, .placement-progress__label) {
  font-size: 0.875rem;
  line-height: 1.5;
}

.site-ui .placement-hero__visual img,
.site-ui .placement-native-photo img {
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site-ui :is(.placement-progress__bar, .placement-step, .placement-button) {
    transition: none !important;
    animation: none !important;
  }
}

/* 9b. Beregner (/beregner) */
.site-ui .beregner-help {
  color: #4a5b73;
  font-size: 0.875rem;
  line-height: 1.5;
}

.site-ui .beregner-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

.site-ui .beregner-toggle[aria-checked="true"] {
  font-weight: 700;
  box-shadow: inset 0 0 0 2px #1558c8;
}

/* 9c. Minder (/minder, /minder/tidslinje) */
.site-ui .minder-lead {
  max-width: 44rem;
  line-height: 1.6;
}

.site-ui .minder-kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 9d. Checkout (/checkout) — ingen ændring af betalingsflow */
.site-ui .checkout-form[hidden],
.site-ui .checkout-optional[hidden] {
  display: none !important;
}

.site-ui .checkout-form__price {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.site-ui .checkout-step {
  color: #4a5b73;
  font-size: 0.875rem;
  font-weight: 600;
}

.site-ui .status-badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1px solid #1558c8;
  border-radius: 999px;
  background: #ffffff;
  color: #1558c8;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* 9e. Login (/login) — blå hero (.auth-hero-shader) har hvid tekst */
.site-ui .auth-hero-shader :is(a, button, input):focus-visible {
  outline-color: #ffffff !important;
}

.site-ui .auth-form-card :is(a, button, input, select):focus-visible {
  outline-color: #084cae !important;
}

/* 9f. Syg/rask-tjek (.pathfinder-hero) og Min Skole-kilder: følger afsnit 8 */
.site-ui .pathfinder-hero .eyebrow {
  letter-spacing: 0.06em;
}


/* ==========================================================================
   10. PRINT / FORCED-COLORS / REDUCED MOTION
   ========================================================================== */
@media print {
  body.site-ui.homepage .hero-premium .hero-premium-panel,
  body.site-ui.homepage .hero-premium .hero-milo-float {
    display: none !important;
  }

  body.site-ui.homepage .hero-premium,
  body.site-ui.homepage .hero-premium :is(h1, #hero-headline, .hero-premium-lead, .hero-plan-cta__note, .hero-search-divider, #hero-trust-line, .hero-premium-stat strong, .hero-premium-stat span, .hero-premium-feature-link) {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body.site-ui footer.site-footer {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body.site-ui footer.site-footer * {
    color: #000000 !important;
  }
}

@media (forced-colors: active) {
  body.site-ui.homepage .hero-premium .hero-search-card .hero-premium-search button.mb-btn {
    border-color: ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }

  body.site-ui.homepage .hero-premium .hero-premium-stat {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
  }

  body.site-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight !important;
  }

  body.site-ui footer.site-footer {
    border-top: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-ui.homepage .hero-premium :is(.hero-premium-badge, .hero-plan-cta, .hero-premium-stats, .hero-premium-panel, .hero-parent-figure, .hero-milo-float__img) {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Min Børnehave — site-refinement-guides-minskole-patch.css
   --------------------------------------------------------------------------
   Lille patch efter visuel QA. Loades EFTER de tre site-refinement-filer:
     site-refinement.css → site-refinement-milo-addendum.css →
     site-refinement-hero-extension.css → DENNE FIL
   Ingen body-ændring nødvendig. Tilføj IKKE guides-hub-page på guidesiderne
   (den klasse aktiverer premium-experience.css' blå guide-hub-regler).

   A. Min Skole: grøn hero i stedet for den almindelige launch-hero-blå.
   B. Guidehubs: Milo i egen plads (ingen overlap) + h1 uden bindestreg.

   Hooks (kun eksisterende):
     A  body.site-ui.min-skole-page  +  section.min-skole-hero
        ELLER section.launch-hero i main#main-content (Min Skoles hero er ikke
        leveret som markup; begge varianter dækkes).
     B  .launch-hero.launch-hero--with-milo med
        > .milo-deco--hero-end og > .launch-content > .eyebrow + h1 +
        .home-hero-copy + .hero-actions, på body.site-ui.app-page uden
        min-skole-page / homepage / guide-article-page.

   Rører IKKE: forside (.hero-premium / .homepage), plan, kort, bøger, apps,
   Min Skoles footer, header, nogen sektion under heroen, tekster, ids,
   aria, data-attributter, [hidden]/[disabled], billeder eller links.
   Milo: ingen display/visibility/opacity — kun placering, størrelse,
   pointer-events:none. Reduced motion er allerede dækket af
   milo-decorations.css (animation:none på .milo-deco__img).
   ========================================================================== */


/* --------------------------------------------------------------------------
   A. Min Skole — grøn hero
   Facit fra min-skole-layout.css: skov #123822 → grøn #2f6b44, hvid tekst,
   hvid primærknap med skovgrøn tekst, glas-sekundærknap.
   Afvigelse: gradientens lyse stop #79ad87 (hvid tekst 2,6 : 1) er udeladt;
   #2f6b44 giver hvid tekst 6,3 : 1 overalt i fladen.
   Baggrundsbilledet milo-watching.webp er ikke gentaget her (kun gradient),
   så der ikke kan opstå dobbelt-Milo, hvis hero-markup'en har egen figur.
   -------------------------------------------------------------------------- */
@media screen {
  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) {
    --ms-hero-ink: #ffffff;
    background-color: #123822 !important;
    background-image: linear-gradient(145deg, #123822 0%, #2f6b44 100%) !important;
    color: var(--ms-hero-ink) !important;
    border-color: transparent !important;
    /* knapperne arver Min Skoles roller (base-CSS' lyse-hero-roller er blå) */
    --p-bg: #ffffff;
    --p-bd: #ffffff;
    --p-fg: #123822;
    --p-bgh: #eef8f0;
    --s-bg: rgba(255, 255, 255, 0.12);
    --s-bd: rgba(255, 255, 255, 0.55);
    --s-fg: #ffffff;
    --s-bgh: rgba(255, 255, 255, 0.2);
  }
  /* Tekst, layout, kicker og H1-størrelse er premium-experience.css' (uændret);
     "børnehave-hverdagen" brydes i den bogstavelige bindestreg i teksten og er
     ikke en CSS-fejl. */

  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) :is(h1, .min-skole-hero__lead, .home-hero-copy, .launch-content > p, .eyebrow, .min-skole-kicker, li) {
    color: #ffffff !important;
  }

  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) :is(.min-skole-hero__lead, .home-hero-copy) {
    color: rgba(255, 255, 255, 0.94) !important;
  }

  /* Proof-pillerne: mørkegrøn flade, så hvid tekst har ≥ 10 : 1 */
  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) .min-skole-proof > * {
    background: #17452a !important;
    border-color: #79ad87 !important;
    color: #ffffff !important;
  }

  /* Knapper i hero: tekstfarve skal følge rollen, ikke arves fra heroens hvide */
  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) .mb-btn-primary {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #123822 !important;
  }

  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) .mb-btn-primary:is(:hover, :focus-visible) {
    background: #eef8f0 !important;
    border-color: #eef8f0 !important;
    color: #123822 !important;
  }

  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) .mb-btn-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
  }

  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) .mb-btn-secondary:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
  }

  /* Fokusring: hvid på grøn (hero-extension kender kun .min-skole-hero som
     klasse; her dækkes også launch-hero-varianten). 7,9 : 1 mod #2f6b44 er
     ikke nødvendigt — hvid mod #2f6b44 er 6,3 : 1, mod #123822 14 : 1. */
  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
  }
}


/* --------------------------------------------------------------------------
   B. Guidehubs — Milo i egen plads + h1 uden bindestreg
   Fejl: .milo-deco--hero-end er position:absolute; bottom:.5rem; right:… og
   ligger oven på .hero-actions på mobil. Her får Milo en reserveret plads
   øverst til højre i heroen, og indholdet gør plads (padding), så figuren
   aldrig deler flade med eyebrow, H1, brødtekst eller knapper.
   -------------------------------------------------------------------------- */

/* Mobil / tablet (< 768 px): Milo 68 px øverst til højre, eyebrow stopper
   før figuren, H1 starter under figurens underkant. */
@media screen and (max-width: 767px) {
  body.site-ui.app-page:not(.min-skole-page):not(.homepage):not(.guide-article-page) .launch-hero.launch-hero--with-milo:not(.hero-premium):has(> .launch-content > .hero-actions) {
    padding-top: calc(4.25rem + 1.25rem) !important;
  }

  body.site-ui.app-page:not(.min-skole-page):not(.homepage):not(.guide-article-page) .launch-hero.launch-hero--with-milo:not(.hero-premium):has(> .launch-content > .hero-actions) > .milo-deco--hero-end {
    top: 0.75rem !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    width: 4.25rem !important;
    min-width: 44px;
    pointer-events: none !important;
    z-index: 0;
  }

  body.site-ui.app-page:not(.min-skole-page):not(.homepage):not(.guide-article-page) .launch-hero.launch-hero--with-milo:not(.hero-premium):has(> .launch-content > .hero-actions) > .milo-deco--hero-end .milo-deco__img {
    width: 100%;
    height: auto;
  }
}

/* Mobil-h1 (også uden Milo-slot): institutionsstart må ikke deles. 17 tegn
   skal rummes i 288 px (320 px skærm): 8,4 vw ≈ 27 px → ca. 250 px. */
@media screen and (max-width: 767px) {
  body.site-ui.app-page:not(.min-skole-page):not(.homepage):not(.guide-article-page) .launch-hero.launch-hero--with-milo:not(.hero-premium):has(> .launch-content > .hero-actions) .launch-content > h1 {
    font-size: clamp(1.7rem, 8.4vw, 2.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    hyphens: none !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }
}

/* Desktop (≥ 768 px): Milo i højre kolonne i heroen, indholdet får
   højre-polstring svarende til figurens bredde + luft. */
@media screen and (min-width: 768px) {
  body.site-ui.app-page:not(.min-skole-page):not(.homepage):not(.guide-article-page) .launch-hero.launch-hero--with-milo:not(.hero-premium):has(> .launch-content > .hero-actions) .launch-content {
    padding-right: clamp(9.5rem, 21vw, 15rem) !important;
    box-sizing: border-box;
  }

  body.site-ui.app-page:not(.min-skole-page):not(.homepage):not(.guide-article-page) .launch-hero.launch-hero--with-milo:not(.hero-premium):has(> .launch-content > .hero-actions) > .milo-deco--hero-end {
    top: auto !important;
    bottom: 1.5rem !important;
    left: auto !important;
    right: max(1.5rem, calc((100% - 1120px) / 2)) !important;
    width: clamp(8.5rem, 18vw, 13.75rem) !important;
    pointer-events: none !important;
    z-index: 0;
  }
}

/* Reduced motion: milo-decorations.css stopper allerede
   .milo-deco__img-animationen; her kun positions-transitions. */
@media (prefers-reduced-motion: reduce) {
  body.site-ui.app-page .launch-hero.launch-hero--with-milo > .milo-deco--hero-end {
    transition: none !important;
  }
}

/* Højkontrast: Milo er dekorativ (aria-hidden) og skjules ikke; ingen
   farveregler i denne fil kræver forced-colors-værn, da farver sættes af
   systemet. Tving ikke baggrunde i forced-colors. */
@media (forced-colors: active) {
  body.site-ui.app-page.min-skole-page main#main-content > :is(section.min-skole-hero, section.launch-hero) {
    background-image: none !important;
    forced-color-adjust: auto;
  }
}

/* Print: .milo-deco skjules og .launch-hero gøres hvid af site-refinement.css
   §21; alle skærmregler her er @media screen og slår dem ikke ud. Kun Min
   Skoles hero (premium: blå !important) får hvid flade + sort tekst. */
@media print {
  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body.site-ui.app-page.min-skole-page:not(.guide-article-page) main#main-content > :is(section.min-skole-hero, section.launch-hero) :is(h1, p, li, a, .eyebrow, .min-skole-kicker, .min-skole-hero__lead, .min-skole-proof > *) {
    color: #000000 !important;
    background: transparent !important;
  }
}

/* ==========================================================================
   Min Børnehave — brand-mærke (tre lodrette striber) · CSS-appendix
   --------------------------------------------------------------------------
   Lægges EFTER de eksisterende regler i BÅDE site-refinement.css og
   site-refinement-isolated.css (samme tekst begge steder; reglerne er
   idempotente og afhænger ikke af .site-ui).

   Kontrakt (uændret):
     <svg class="mb-stripe-mark" data-brand-mark="milo-stripes"
          viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"
          focusable="false">
       <rect class="mb-stripe-mark__blue" x="0"  y="0" width="6" height="24" rx="1" fill="#2563eb"/>
       <rect class="mb-stripe-mark__blue" x="9"  y="0" width="6" height="24" rx="1" fill="#2563eb"/>
       <rect class="mb-stripe-mark__ink"  x="18" y="0" width="6" height="24" rx="1" fill="#172033"/>
     </svg>

   Scope (entydig markør sat af normaliseringshelperen på ALLE ændrede
   brand-links; originale classes/href/ids/aria/tekst er bevaret):
     a[data-brand-link="milo-stripes"]
       > svg[data-brand-mark="milo-stripes"]                    (direkte)
       > div|span:has(> svg[data-brand-mark="milo-stripes"])    (gammel plade/wrapper)
   Dækker .site-brand, .plan-topbar__brand, .locale-header__brand, .book-brand,
   .placement-brand, print-topbarens a.brand og klasseløse legacy-locale-links.
   Rører IKKE: .wordmark::before (barselssiden), hovedheaderens højde, grids,
   menuer, navnetekst, links, ids, favicon/metadata, Milo-maskotten.

   Farver er SVG'ens egne attributter (#2563eb / #172033). Intet gættes ud fra
   body. Mørk header: tilføj eksplicit .mb-stripe-mark--on-dark på SVG'en
   (kun den mørke stribe vendes til hvid; de blå er uændret).
   ========================================================================== */

/* 1. Selve mærket: præcis 24 × 24, aldrig strakt, klippet eller dekoreret.
   Dobbelt klasse + !important slår ældre img/.site-brand-logo-regler
   (width/height 100 %, 36 px !important, object-fit, radius, skygge). */
svg.mb-stripe-mark.mb-stripe-mark[data-brand-mark="milo-stripes"] {
  display: block !important;
  box-sizing: content-box !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  overflow: visible !important;
  vertical-align: middle;
  pointer-events: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* 2. Gammel runding/plade om mærket (kun når wrapperen indeholder SVG'en):
   fjernes; 24 × 24, ingen klipning, ingen skygge/løft. */
a[data-brand-link="milo-stripes"] > :is(div, span):has(> svg[data-brand-mark="milo-stripes"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}

/* 3. Brand-linket: inline-flex (også klasseløse legacy-locale-links), rolig
   10 px forbindelse til navnet (inden for 8–12), lodret centreret, 44 px mål.
   Overstyrer Tailwinds gap-2 (8 px) uden at røre header, grid eller menuer. */
a[data-brand-link="milo-stripes"] {
  display: inline-flex;
  align-items: center;
  column-gap: 10px !important;
  gap: 10px !important;
  min-height: 44px;
  box-sizing: border-box;
}

/* 4. Ingen hoverløft/skygge på mærket via linkets hover/fokus. */
a[data-brand-link="milo-stripes"]:is(:hover, :focus-visible) svg.mb-stripe-mark[data-brand-mark="milo-stripes"],
a[data-brand-link="milo-stripes"]:is(:hover, :focus-visible) > :is(div, span):has(> svg[data-brand-mark="milo-stripes"]) {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 5. Eksplicit reverse — KUN hvis en faktisk mørk header kræver det og SVG'en
   har modifieren. Kun den mørke stribe vendes; ingen body-gæt. */
svg.mb-stripe-mark.mb-stripe-mark--on-dark[data-brand-mark="milo-stripes"] .mb-stripe-mark__ink {
  fill: #ffffff;
}

/* 6. Højkontrast: systemfarver, så mærket er synligt på enhver Canvas. */
@media (forced-colors: active) {
  svg.mb-stripe-mark[data-brand-mark="milo-stripes"] .mb-stripe-mark__blue {
    fill: LinkText;
  }

  svg.mb-stripe-mark[data-brand-mark="milo-stripes"] .mb-stripe-mark__ink {
    fill: CanvasText;
  }
}