/**
 * Drivhuset Eva — design
 *
 * Oversat fra designfilen drivhuset-eva.html.
 *
 * VIGTIGT OM OVERSÆTTELSEN
 * Designfilen er bygget som én enkelt side, hvor "sider" skiftes med JavaScript.
 * Den låser skærmen med overflow:hidden og scroller i en indre beholder.
 * Et WordPress-site består af rigtige sideindlæsninger, så den mekanik er
 * fjernet og erstattet af almindeligt dokument-scroll med klæbende topnavigation.
 * Se afsnittet "Ændringer i forhold til designfilen" nederst i filen.
 *
 * Klassenavnene er bevaret fra designfilen, så de to filer kan sammenlignes
 * direkte. Kontrolleret mod Kadence 25. juli 2026 — ingen reelle kollisioner.
 *
 * @package Drivhuset_Eva
 * @version 1.0
 */


/* ═══════════════════════════════════════════════════════════
   SKRIFTTYPER — selvhostede
   Google Fonts via CDN sender besøgendes IP-adresse til Google.
   Filerne ligger derfor i temaets egen assets/fonts/-mappe.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-sans-300.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-500.woff2') format('woff2');
}


/* ═══════════════════════════════════════════════════════════
   FARVER — uændret fra designfilen
   ═══════════════════════════════════════════════════════════ */

:root {
  --moss: #2c4a3e;
  --moss2: #3a6350;
  --moss-pale: #e8efec;
  --earth: #7a5c3a;
  --earth-light: #c4a882;
  --cream: #f8f5ee;
  --warm: #fdfaf4;
  --dark: #1e1e1a;
  --body: #3a3830;
  --muted: #7a7260;
  --gold: #b8940a;
  --red: #7a1f1f;
  --red2: #9a2f2f;
  --red-pale: #f5eaea;
  --border: rgba(44, 74, 62, 0.16);

  /* Topnavigationens højde. Bruges flere steder, derfor en variabel */
  --nav-h: 60px;
}


/* ═══════════════════════════════════════════════════════════
   GRUNDLAG
   ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * Lister nulstilles særskilt — og det er ikke overflødigt.
 *
 * Reglen ovenfor bruger stjernevælgeren, som er den svagest mulige i CSS.
 * En regel som "ul { margin-bottom: 1.5em }" fra Kadence vinder over den,
 * uanset hvilken fil der indlæses sidst, fordi et elementnavn vejer tungere
 * end en stjerne. Det gav en topbjælke på 86px i stedet for 63px, fordi
 * menuens <ul> slæbte 24px bundmargen med sig.
 *
 * Fundet og rettet 25. juli 2026. Sitet har ingen fritekstfelter med
 * punktopstillinger — alt indhold er ACF-felter med vores egen opmærkning —
 * så en fuld nulstilling af lister er sikker her.
 */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--warm);
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Billeder må aldrig kunne stikke ud over deres spalte */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--moss);
}

/* Tastaturbrugere skal kunne se, hvor de er */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Springlink til indhold — synligt kun når det har fokus */
.spring-til-indhold {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--moss);
  color: #fff;
  padding: 0.8rem 1.2rem;
  z-index: 200;
  font-size: 1rem;
}

.spring-til-indhold:focus {
  left: 0;
}


/* ═══════════════════════════════════════════════════════════
   TOPNAVIGATION
   Klæbende i toppen frem for låst i en flex-beholder
   ═══════════════════════════════════════════════════════════ */

#topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--moss);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  min-height: var(--nav-h);
  gap: 1.5rem;
  border-bottom: 3px solid var(--red);
}

/*
 * Administrationsbjælken — rettet 26. juli 2026.
 *
 * DEN OPRINDELIGE ANTAGELSE VAR FORKERT. Menuen fik top:32px, fordi vi
 * troede, WordPress' sorte bjælke hænger fast i toppen. Det gør den i
 * wp-admin, men IKKE på forsiden af sitet: dér er den position:absolute
 * på skærme over 600px og scroller altså væk sammen med siden.
 *
 * Resultatet var et tomt bånd på 32px over menuen, når man scrollede —
 * og indholdet kunne ses glide igennem det. Fundet ved Kontrolpunkt B3.
 *
 * Fejlen ramte kun indloggede brugere, altså Mikael og Eva. En besøgende
 * har ingen administrationsbjælke og så aldrig problemet. Derfor blev det
 * ikke opdaget i Trin A5.
 *
 * Nu: menuen klæber helt i toppen (top:0 fra reglen ovenfor), præcis som
 * for en besøgende. Kun under 600px gør WordPress bjælken fixed, og der
 * skal menuen skubbes 46px ned for ikke at havne under den.
 */
@media screen and (max-width: 600px) {
  .admin-bar #topnav { top: 46px; }
}

.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo small {
  font-family: 'DM Sans', sans-serif;
  /* Hævet fra 0.78rem og fra 28% hvid i Trin F4b.
     28% gav en kontrast på 2,2:1 mod den mosgrønne baggrund — under
     halvdelen af de 4,5:1, der kræves for normal tekst. Teksten var
     reelt ulæselig, hvilket har stået som åbent punkt siden Blok A.
     60% giver 4,7:1. Underteksten er stadig dæmpet i forhold til
     DRIVHUSET-navnet over den, men nu kan den faktisk læses. */
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-top: 0.1rem;
}

.nav-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: var(--nav-h);
  list-style: none;
}

/*
 * Hvert menupunkt ligger i et <li> af hensyn til skærmlæsere, som skal
 * kunne annoncere "liste med 6 punkter". Men et <li> er som udgangspunkt
 * ikke en flex-beholder, og derfor blev linket kun 22px højt og lagde sig
 * i toppen af bjælken i stedet for at fylde den ud og stå på linje med
 * logoet. Denne regel får linket til at fylde hele højden.
 */
.nav-links li {
  display: flex;
  align-items: stretch;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.85rem;
  /*
   * Hævet fra 0.92rem i Trin F4b.
   *
   * Menuen er sitets vigtigste navigation, men stod mindre end brødteksten
   * efter den generelle forstørrelse. Nu samme størrelse: 16px.
   *
   * FARVEN ER IKKE ÆNDRET. 65% giver 5,0:1 mod den mosgrønne baggrund og
   * ligger dermed over kravet på 4,5:1. At hæve den yderligere ville
   * udviske forskellen mellem dæmpede og aktive punkter, som er et
   * bevidst designvalg — se kommentaren nedenfor.
   */
  font-size: 1rem;
  font-weight: 500;
  /*
   * Designfilen bruger 42% hvid her. Det giver en kontrast omkring 2,6:1
   * mod den mosgrønne baggrund, hvor WCAG AA kræver 4,5:1 — menupunkterne
   * ville være svære at læse for mange, ikke mindst ældre besøgende.
   * Hævet til 65% efter aftale 25. juli 2026. Udtrykket er bevaret:
   * punkterne er stadig tydeligt dæmpede i forhold til det aktive.
   */
  color: rgba(255, 255, 255, 0.65);
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.nav-item:hover {
  color: rgba(255, 255, 255, 0.95);
}

.nav-item.active {
  color: #fff;
  border-bottom-color: var(--red);
  margin-bottom: -3px;
}

.nav-icon {
  width: 13px;
  height: 13px;
  opacity: 0.5;
  flex-shrink: 0;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-cta {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  color: #fff;
  border: 2px solid var(--red);
  padding: 0 1.4rem;
  height: 36px;
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}

.nav-cta:hover,
.nav-cta[aria-current] {
  background: var(--red);
  border-color: var(--red);
}

/* Knap til mobilmenu — skjult på desktop */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 0.4rem 0.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════
   SIDESTRUKTUR
   ═══════════════════════════════════════════════════════════ */

#main {
  background: var(--warm);
}

.page {
  min-height: calc(100vh - var(--nav-h));
  animation: pageIn 0.2s ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respektér brugere der har slået bevægelse fra i systemet */
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/*
 * Sidens indholdsramme.
 *
 * max-width plus "margin-inline: auto" centrerer indholdet på skærmen i
 * stedet for at lade det ligge klemt ude i venstre side. Besluttet
 * 26. juli 2026 — en bevidst afvigelse fra designfilen, der er tegnet
 * venstrestillet i fuld bredde.
 *
 * 1200px er valgt, så gitre med tre og fire spalter (produkter, galleri)
 * stadig har plads, mens teksten ikke bliver ulæseligt bred. Sidetyper
 * med behov for en snævrere ramme sætter deres egen max-width ovenpå —
 * se Uge-nyt nedenfor.
 *
 * margin-inline er den moderne skrivemåde for margin-left og margin-right
 * på én gang. Understøttet i alle browsere siden 2021.
 */
.page-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 2.5rem 3.5rem;
}

.page-header {
  margin-bottom: 2rem;
}

.page-eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.4rem;
}

.page-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  color: var(--dark);
  margin-bottom: 0.6rem;
  font-weight: 400;
}

.page-lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.75;
}


/* ═══════════════════════════════════════════════════════════
   KNAPPER
   ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 1px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: none;
}

.btn-moss      { background: var(--moss); color: #fff; }
.btn-moss:hover{ background: var(--moss2); color: #fff; }

.btn-red       { background: transparent; color: var(--red); border: 2px solid var(--red); }
.btn-red:hover { background: var(--red); color: #fff; }

.btn-red-fill       { background: var(--red); color: #fff; border: none; }
.btn-red-fill:hover { background: var(--red2); color: #fff; }

.btn-outline       { background: transparent; color: var(--red); border: 2px solid var(--red); }
.btn-outline:hover { background: var(--red); color: #fff; }

.btn-dark       { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }
.btn-dark:hover { border-color: #fff; color: #fff; }

.btn-sm { padding: 0.45rem 1rem; font-size: 0.92rem; }


/* ═══════════════════════════════════════════════════════════
   FORSIDE
   ═══════════════════════════════════════════════════════════ */

.page-forside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  min-height: calc(100vh - var(--nav-h));
}

.forside-hero {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--cream);
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--border);
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 1.2rem;
}

.hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  line-height: 1.12;
  color: var(--dark);
  margin-bottom: 1.4rem;
  font-weight: 400;
}

.hero-h1 em {
  font-style: italic;
  color: var(--moss);
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 380px;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.forside-img {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(145deg, #2c4a3e, #3a6350);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.forside-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Video på hero-pladsen ────────────────────────────────────────────
   Videoen fylder samme flade som billedet ville. Er der en video, ligger
   stillbilledet skjult og træder først frem på telefoner og hos brugere,
   der har slået bevægelse fra i systemet.

   VIGTIGT OM RÆKKEFØLGE: reglen om reduceret bevægelse står HER og ikke
   i blokken ved toppen af filen. Den blok ligger FØR .forside-img, og en
   regel med samme specificitet ville derfor tabe. Se mønster 13.
   ──────────────────────────────────────────────────────────────────── */
.forside-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.forside-video ~ .forside-stillbillede {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .forside-video { display: none; }
  .forside-video ~ .forside-stillbillede { display: block; }
}

.img-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
}

.forside-cards {
  grid-column: 2;
  grid-row: 2;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-content: start;
}

.quick-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1.2rem;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
  display: block;
}

.quick-card:hover {
  border-color: var(--moss);
  transform: translateY(-1px);
}

/*
 * ── Tilføjet i Trin F5, 27. juli 2026 ──
 *
 * Kortene er <a>-elementer og ikke <div> med onclick, som designfilen
 * bruger. Et rigtigt link kan åbnes i ny fane, nås med tabulatortasten og
 * virker uden JavaScript.
 */
.quick-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/*
 * Uge-nyt-kortet fremhæves med en rød venstrekant, som i designfilen.
 * Det er sitets vigtigste side og opdateres hver mandag.
 */
.quick-card-frem {
  border-left: 4px solid var(--red);
}

.quick-card-frem .qc-label {
  color: var(--red);
}

/*
 * MARGEN NULSTILLES EKSPLICIT — mønster 4.
 * Kadence giver <p> en topmargen, som ville skubbe kortenes indhold skævt
 * og bryde den lige linje mellem kortene i rækken.
 */
.qc-label,
.qc-title {
  margin-top: 0;
}

.qc-sub {
  margin: 0;
}

/* Ø-mærket med certificeringslinjen nederst i venstre side */
.hero-oeko {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-oeko-maerke {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain; /* Ø-mærket må ikke trykkes sammen eller strækkes */
  display: block;
}

.hero-oeko-tekst {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.qc-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.3rem;
}

.qc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.qc-sub {
  font-size: 0.92rem;
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════
   PRODUKTER — oversigt
   ═══════════════════════════════════════════════════════════ */

/*
 * ── Ændret i Trin E4, 27. juli 2026 ──
 *
 * Designfilen sætter kortene helt op ad hinanden med 1px mellemrum og en
 * kantfarvet baggrund bagved, så der ser ud til at være hårfine streger
 * imellem dem. Mikael bad om rigtige mellemrum i stedet.
 *
 * DET KRÆVEDE TO ÆNDRINGER, IKKE ÉN. Kortene har samme baggrundsfarve som
 * siden. I designfilen ses de udelukkende på grund af stregerne — fjerner
 * man dem uden videre, forsvinder kortene visuelt. Derfor har .prod-card
 * fået en tynd kant, som nu bærer afgrænsningen.
 */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.prod-card {
  background: var(--warm);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  display: block;
  color: inherit;
}

.prod-card:hover {
  background: var(--cream);
  border-color: var(--moss);
}

/*
 * Standardfarven på billedfeltet.
 *
 * DEN SKAL STÅ HER — FØR de seks gradienter nedenfor.
 *
 * .prod-img og .pi-veg har samme specificitet, så den regel, der står
 * sidst i filen, vinder. Første udgave havde standardfarven placeret efter
 * gradienterne, og alle seks kort blev derfor ens lysegrønne. Fanget ved
 * Kontrolpunkt E4.
 *
 * Farven findes, så en syvende kategori uden gradient ikke står som et hul
 * i gitteret.
 */
.prod-img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  background: var(--moss-pale);
}

.prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pi-veg  { background: linear-gradient(135deg, #2c4a3e, #3a6350); }
.pi-mad  { background: linear-gradient(135deg, #7a4e2a, #a07040); }
.pi-mej  { background: linear-gradient(135deg, #5a7a8a, #7a9aaa); }
.pi-brd  { background: linear-gradient(135deg, #8a6a3a, #b08a5a); }
.pi-fest { background: linear-gradient(135deg, #5a3a6a, #7a5a8a); }
.pi-kol  { background: linear-gradient(135deg, #3a5a7a, #5a7a9a); }

.prod-body {
  padding: 1.2rem;
  border-top: 1px solid var(--border);
}

.prod-tag {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.3rem;
}

.prod-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.prod-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

.prod-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prod-price {
  font-size: 0.92rem;
  color: var(--muted);
}

/*
 * ── Tilføjet i Trin E4, 27. juli 2026 ──
 */

/*
 * "Se udvalg →" nederst til højre på hvert kort.
 * Designfilen har den som inline-stil; her er den en klasse.
 *
 * Det er IKKE et link. Hele kortet er linket, og teksten er kun en visuel
 * markør — derfor et <span> i skabelonen.
 */
.prod-mere {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  white-space: nowrap;
}

/*
 * MARGEN NULSTILLES EKSPLICIT — mønster 4.
 *
 * Kadence giver <p> og <h2> en topmargen, som ville skubbe kortets indhold
 * skævt og bryde den lige linje mellem de tre kort i rækken. Samme fejl
 * som ved .cafe-name i D1 og .course-title i D2.
 */
.prod-tag,
.prod-name,
.prod-desc {
  margin-top: 0;
}

.prod-price {
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   KATEGORISIDE
   ═══════════════════════════════════════════════════════════ */

/*
 * ── Ændret i Trin E2, 27. juli 2026 ──
 *
 * .kat-layout er bragt ind i 1200px-rammen. Det var et åbent punkt fra
 * Blok B: alt andet sideindhold er centreret i .page-inner, men
 * kategorisiderne lå uden for og gik fra kant til kant. På brede skærme
 * flugtede de derfor ikke med resten af sitet.
 *
 * Designfilen er tegnet i fuld bredde. Afvigelsen er bevidst og følger
 * Mikaels beslutning ved Kontrolpunkt B3 om, at sidernes indhold
 * centreres i 1200px.
 */
.kat-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: calc(100vh - var(--nav-h));
  max-width: 1200px;
  margin-inline: auto;
}

.kat-img {
  background: var(--moss);
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

.kat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kat-content {
  padding: 3.5rem;
}

.kat-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--moss);
  margin-bottom: 2rem;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  padding: 0;
  text-decoration: none;
}

.kat-back:hover {
  color: var(--moss2);
}

.kat-eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.5rem;
}

.kat-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 1rem;
  font-weight: 400;
}

.kat-intro {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 480px;
}

.kat-section {
  margin-bottom: 2rem;
}

.kat-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--red);
  font-weight: 400;
}

.kat-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.kat-item {
  font-size: 1rem;
  color: var(--body);
  background: #fff;
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
}

.kat-price-box {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.kat-price-box h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.8rem;
  font-weight: 400;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}

.price-row:last-child {
  border-bottom: none;
}

.price-name {
  color: var(--body);
}

.price-desc {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.price-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--moss);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 1rem;
}

.kat-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}

.menu-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1rem;
}

.menu-card-title {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.6rem;
}

.menu-card ul {
  list-style: none;
  padding: 0;
}

.menu-card li {
  font-size: 1rem;
  color: var(--muted);
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.menu-card li:last-child {
  border-bottom: none;
}

.kat-cta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.kat-cta p {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/*
 * ── Tilføjet i Trin E2, 27. juli 2026 ──
 */

/*
 * Nøgletalsboksen på Festmad & catering.
 *
 * Designfilen har den som ren inline-stil UDEN klassenavne — den er derfor
 * skrevet fra bunden her. Værdierne er aflæst direkte i designfilens
 * style-attributter, så udseendet er det samme.
 *
 * flex-wrap er tilføjet: designfilen har fire nøgletal på én linje i en
 * spalte, der er halvdelen af skærmen. Inden for 1200px-rammen bliver den
 * spalte 600px, og fire kolonner ville da presse teksten sammen.
 */
.kat-stats {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
}

.kat-stat-label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 0.2rem;
}

.kat-stat-value {
  font-size: 1.05rem;
  color: var(--dark);
  margin: 0;
}

/*
 * Den lille bemærkning under en liste, fx "Udvalget varierer efter årstiden".
 * Designfilen har den som inline-stil; her er den en klasse.
 */
.kat-note {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0.8rem 0 0;
  line-height: 1.6;
}

/*
 * MARGEN OG PUNKTTEGN NULSTILLES EKSPLICIT — mønster 4.
 *
 * .kat-items og .menu-card ul er rigtige <ul>-elementer, valgt frem for
 * løse <span>, så en skærmlæser kan fortælle hvor mange varer der er, og
 * hvor listen slutter. Prisen er, at Kadences ul-regler slår igennem:
 * punkttegn, indrykning og en bundmargen på 1.5em.
 *
 * Stjerne-nulstillingen i toppen af filen er for svag til at vinde over
 * en element-vælger som `ul`. Derfor sættes det her, på klassen.
 */
.kat-items,
.menu-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kat-items li,
.menu-card li {
  margin: 0;
}

/* Overskrifterne i afsnittene og på menukortene */
.kat-section-title,
.menu-card-title {
  margin-top: 0;
}

/* Oprindelsesmarkering — "Broccoli (dk)". Sættes af drivhuset_split_oprindelse() */
.oprindelse {
  color: var(--muted);
  font-size: 0.9em;
}


/* ═══════════════════════════════════════════════════════════
   CAFÉ & BRUNCH
   ═══════════════════════════════════════════════════════════ */

.drivhuset-cafe-brunch .page-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}

.cafe-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 2px solid var(--red);
}

.cafe-row:first-child {
  border-top: 2px solid var(--red);
}

.cafe-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.15rem;
  font-weight: 400;
}

.cafe-when {
  font-size: 0.92rem;
  color: var(--muted);
}

.cafe-type {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  color: var(--muted);
}

.cafe-img {
  aspect-ratio: 3 / 4;
  background: linear-gradient(145deg, #8a6a3a, #c4a060);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cafe-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * ── Tilføjet i Trin D1, 27. juli 2026 ──
 *
 * Designfilen lægger disse fire ting som style="..." direkte på
 * elementerne. De er oversat til klasser her, som aftalt: skabelonen
 * skriver ingen inline-stilarter.
 */

/*
 * Beholderen om rækkerne.
 *
 * Den findes, for at .cafe-row:first-child ovenfor er forudsigelig.
 * Uden en navngiven beholder ville "første række" afhænge af, hvad der
 * tilfældigvis står før i HTML'en — og den røde overkant kunne udeblive.
 */
.cafe-liste {
  margin: 0;
}

/* Venstre side af rækken: navn, dato, eventuel beskrivelse */
.cafe-tekst {
  min-width: 0; /* Tillader lang tekst at ombryde i stedet for at presse rækken bredere */
}

/* Højre side af rækken: typemærkat og Tilmeld-knap ved siden af hinanden */
.cafe-handling {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0; /* Knappen må ikke klemmes sammen, når navnet er langt */
}

/*
 * Beskrivelsen under dato.
 *
 * MARGIN SÆTTES EKSPLICIT. Kadence giver alle <p> en bundmargen, og den
 * ville skubbe rækkens indhold skævt. Samme grund til nulstillingen af
 * .cafe-name og .cafe-when nedenfor — de arvede hidtil Kadences margen,
 * hvilket først bliver synligt nu, hvor der findes cafédatoer at vise.
 */
.cafe-desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0.35rem 0 0;
  max-width: 46ch;
}

.cafe-name,
.cafe-when {
  margin-top: 0;
}

.cafe-when {
  margin-bottom: 0;
}

/* Noten under listen: gårdbutikkens almindelige åbningstid */
.cafe-note {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 1.5rem 0 0;
}

.cafe-note a {
  color: var(--moss);
}

/*
 * Fyldet i billedkolonnen, når siden ikke har et fremhævet billede.
 *
 * Den lyse grønne flade ligger oven på gradienten fra .cafe-img, præcis
 * som i designfilen. Når Evas fotos kommer, sættes et fremhævet billede
 * på siden, og dette element udskrives slet ikke.
 */
.cafe-img-fyld {
  width: 100%;
  height: 100%;
  background: var(--moss-pale);
}


/* ═══════════════════════════════════════════════════════════
   KURSER & YOGA — mørk baggrund
   ═══════════════════════════════════════════════════════════ */

.drivhuset-kurser-yoga #main,
.drivhuset-kurser-yoga .page {
  background: var(--dark);
}

.drivhuset-kurser-yoga .page-h1,
.drivhuset-kurser-yoga .page-lead {
  color: rgba(255, 255, 255, 0.85);
}

.drivhuset-kurser-yoga .page-eyebrow {
  color: rgba(255, 255, 255, 0.45);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.course-card {
  background: #252520;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
}

/*
 * Kursusmærkaten.
 *
 * STANDARDFARVEN STÅR HER, ikke i farveklasserne nedenfor. Eva kan oprette
 * en ny kursustype uden at vælge farve, og mærkaten skal stadig kunne læses.
 * Uden en standard ville teksten arve den mørke brødtekstfarve og stå
 * usynligt på det mørke kort.
 */
.course-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/*
 * De otte farver, Eva kan vælge mellem på en kursustype.
 *
 * Klassenavnet sættes sammen af "ctf-" og farvens værdi i ACF-feltet:
 * vælger hun "Gylden", gemmes værdien "gul", og mærkaten får .ctf-gul.
 * Værdierne står i acf-json/group_6a70f3e2c1d20.json og SKAL stemme
 * overens med navnene herunder.
 *
 * Alle otte er afstemt mod kortets baggrund (#252520). Baggrunden er
 * gennemsigtig, så farven kun anes, mens teksten bærer den — samme
 * princip som i designfilen.
 *
 * Skal der en niende farve til, tilføjes den to steder: en linje her og
 * et valg i JSON-filen. Eva kan ikke selv tilføje farver, kun vælge
 * blandt dem — hun må ikke kunne ændre sitets udtryk.
 */
.ctf-gul    { background: rgba(184, 148, 10, 0.20); color: #d4ac2a; }
.ctf-orange { background: rgba(200, 98, 42, 0.20);  color: #e07830; }
.ctf-groen  { background: rgba(44, 74, 62, 0.40);   color: #7abf6a; }
.ctf-mos    { background: rgba(58, 99, 80, 0.40);   color: #8fc9ae; }
.ctf-jord   { background: rgba(122, 92, 58, 0.32);  color: #c4a882; }
.ctf-roed   { background: rgba(154, 47, 47, 0.32);  color: #dd8f8f; }
.ctf-blaa   { background: rgba(58, 90, 120, 0.38);  color: #8ab6d6; }
.ctf-lilla  { background: rgba(110, 80, 130, 0.32); color: #c3a8dc; }

.course-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.6rem;
  line-height: 1.3;
  font-weight: 400;
}

.course-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  margin-bottom: 1.2rem;
  flex: 1;
}

.course-meta div {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.2rem;
}

.course-meta div strong {
  color: rgba(255, 255, 255, 0.7);
}

.course-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 1.2rem;
  margin-top: 1.2rem;
}

.course-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: #fff;
}

.course-price small {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  display: block;
}

/*
 * ── Tilføjet i Trin D2, 27. juli 2026 ──
 *
 * MARGEN NULSTILLES EKSPLICIT. Kadence giver både <h3> og <p> en topmargen,
 * som ville skubbe kortets indhold ned og ødelægge den lige linje mellem de
 * tre kort. Fejlen ville have været usynlig indtil nu, fordi der ikke fandtes
 * kurser at vise — præcis som med .cafe-name i D1. Se mønster 4.
 */
.course-title {
  margin-top: 0;
}

.course-desc {
  margin-top: 0;
}

/* Meta-linjerne er <div> og ikke <p>, netop for at undgå Kadences
   afsnitsmargen. Sættes alligevel, så valget er synligt */
.course-meta {
  margin: 0 0 0.2rem;
}

/*
 * Prisens overtekst.
 *
 * Designfilen har prisen som løs tekst i .course-price med et <small>
 * nedenunder. Her er den øverste del givet sin egen klasse, så et tomt
 * prisfelt kan erstattes af "Kontakt for pris" uden at ændre opbygningen.
 */
.course-price-tal {
  display: block;
}

/*
 * Tom tilstand — ingen kurser oprettet endnu.
 *
 * Kan IKKE bruge .galleri-tom / .cafe-tom, som har cremefarvet baggrund.
 * På den mørke kursusside ville en lys kasse se ud som en fejl. Samme
 * rolige udtryk, oversat til mørk baggrund.
 */
.kurser-tom {
  background: #252520;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3rem 2rem;
  text-align: center;
  margin-top: 2rem;
}

.kurser-tom p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.75;
  max-width: 420px;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════
   BUDDHA PARKEN
   ═══════════════════════════════════════════════════════════ */

.drivhuset-buddha-parken .page-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.stupa-img {
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #4a7a5e, #2c4a3e);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stupa-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stupa-quote {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--dark);
  line-height: 1.5;
  border-left: 4px solid var(--red);
  padding-left: 1.2rem;
  margin: 1.5rem 0;
}

.stupa-body {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════
   KONTAKT & BESTILLING
   ═══════════════════════════════════════════════════════════ */

.bestil-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  align-items: start;
}

.note-box {
  background: var(--moss);
  padding: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
}

.note-box p:first-child {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.3rem;
}

/*
 * h2 er tilføjet i Trin F1.
 *
 * Designfilen bruger <h4> i disse bokse, men siden har ét <h1>, og et spring
 * derfra til <h4> bryder overskriftshierarkiet: en skærmlæser melder to
 * manglende niveauer. Skabelonen udskriver derfor <h2>, og vælgeren dækker
 * begge, så designfilens markup stadig ville virke.
 */
.note-box h4,
.note-box h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  font-weight: 400;
  color: #fff;
}

.note-box p:last-child {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.delivery-box {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 1.5rem;
}

/* h2 tilføjet i Trin F1 — se forklaringen ved .note-box ovenfor */
.delivery-box h4,
.delivery-box h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--dark);
  margin: 0 0 1rem;
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════
   ALMINDELIGE SIDER — tilføjet i Trin F3, 27. juli 2026
   Bruges af page.php, som fanger sider uden egen skabelon.
   ═══════════════════════════════════════════════════════════ */

/*
 * En snævrere ramme end de 1200px.
 *
 * Almindelige sider er ren tekst uden gitre, og en tekstlinje på 1200px er
 * for bred at læse. 860px er samme mål som Uge-nyt bruger.
 */
.page-inner-smal {
  max-width: 860px;
}

.side-billede {
  margin-bottom: 2rem;
}

.side-billede img {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * Indholdet fra WordPress' editor.
 *
 * HER SKAL DER STYLES PÅ ELEMENTER, IKKE KLASSER. Teksten kommer fra
 * editoren, og vi kender ikke på forhånd hvilke elementer den indeholder.
 * Derfor er reglerne bundet til .side-indhold, så de kun rammer her og
 * ikke lækker ud på resten af sitet.
 *
 * Kadences egne regler på ul, ol og p slår igennem her — se mønster 4 —
 * og margenerne sættes derfor eksplicit.
 */
.side-indhold {
  font-size: 1.05rem;
  color: var(--body);
  line-height: 1.8;
}

.side-indhold p {
  margin: 0 0 1.2rem;
}

.side-indhold h2,
.side-indhold h3 {
  font-family: 'Playfair Display', serif;
  color: var(--dark);
  font-weight: 400;
  margin: 2rem 0 0.8rem;
}

.side-indhold h2 { font-size: 1.4rem; }
.side-indhold h3 { font-size: 1.15rem; }

.side-indhold ul,
.side-indhold ol {
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
}

.side-indhold li {
  margin: 0 0 0.3rem;
}

.side-indhold a {
  color: var(--moss);
}

.side-indhold img {
  max-width: 100%;
  height: auto;
}


/*
 * Ø-mærket i topnavigationen — tilføjet i Trin F4.
 *
 * Erstatter den inline SVG, der stod i header.php indtil da. Størrelsen er
 * den samme, 22px, så navigationens højde er uændret.
 *
 * object-fit: contain sikrer, at mærket beholder sine proportioner, uanset
 * om filen er kvadratisk. Ø-mærket har bindende regler for netop det.
 */
.nav-oekomaerke {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Logoet i topnavigationen ─────────────────────────────────────────
   De tre gulerødder ligger på en creme skive, og det er en måling og
   ikke en smagssag: logoets grønne #006747 giver kun 1,41:1 mod den
   mosgrønne bjælke #2c4a3e, og den orange #f04a19 giver 2,64:1 — begge
   under kravet på 3:1 for grafik. På creme bliver de 6,36:1 og 3,38:1.

   Skiven er 40 px i alt (30 px logo + 5 px luft hele vejen rundt) i en
   bjælke på 60 px. Ved 22 px, som Ø-mærket havde, er de tre rødder for
   tætte til at kunne skelnes fra hinanden.

   box-sizing: content-box gør, at padding lægges UDEN OM de 30 px, så
   logoet ikke skrumper inde i skiven.
   ──────────────────────────────────────────────────────────────────── */
.nav-logo-billede {
  width: 30px;
  height: 30px;
  padding: 5px;
  box-sizing: content-box;
  background: var(--cream);
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}


/* ── Fejlsiden 404, tilføjet i Trin F4 ── */

/*
 * Genvejene er en rigtig <ul>, ikke løse links. En skærmlæser kan da
 * fortælle, hvor mange muligheder der er — nyttigt netop her, hvor den
 * besøgende er kørt fast. Punkttegnene fjernes med CSS.
 *
 * Kadences ul-regler nulstilles eksplicit, se mønster 4.
 */
.fejl-genveje {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--border);
}

.fejl-genveje li {
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.fejl-genveje a {
  display: block;
  padding: 0.9rem 0.2rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--dark);
  text-decoration: none;
  transition: color 0.15s, padding-left 0.15s;
}

.fejl-genveje a:hover {
  color: var(--moss);
  padding-left: 0.6rem;
}

.fejl-bund {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

.fejl-bund a {
  color: var(--moss);
}


/* ═══════════════════════════════════════════════════════════
   KONTAKT — tilføjet i Trin F1, 27. juli 2026
   Designfilen har hele denne side som inline-stilarter.
   Værdierne er aflæst direkte i style-attributterne.
   ═══════════════════════════════════════════════════════════ */

/* De to store kort med telefon og e-mail */
.kontakt-toppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

/*
 * Hele kortet er et link — ikke kun teksten. På en telefon åbner det
 * første opkaldsskærmen, det andet e-mailprogrammet.
 */
.kontakt-kort {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  transition: filter 0.15s, border-color 0.15s;
}

.kontakt-kort:hover {
  filter: brightness(1.08);
}

.kontakt-kort-groen {
  background: var(--moss);
  color: #fff;
}

.kontakt-kort-creme {
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--dark);
}

.kontakt-kort-creme:hover {
  border-color: var(--moss);
  filter: none;
}

.kontakt-kort-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.kontakt-kort-groen .kontakt-kort-label {
  color: rgba(255, 255, 255, 0.5);
}

.kontakt-kort-creme .kontakt-kort-label {
  color: var(--moss);
}

.kontakt-kort-vaerdi {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

/* E-mailadresser er lange og skal ikke fylde lige så meget som et telefonnummer */
.kontakt-kort-vaerdi-lille {
  font-size: 1.1rem;
  word-break: break-word;
}

.kontakt-kort-sub {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Den cremefarvede boks med prislisten */
.kontakt-boks {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 2rem;
  max-width: 480px;
}

.kontakt-boks-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 0.4rem;
}

.kontakt-boks-tekst {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* Betaling — adskilt med en tynd linje */
.kontakt-betaling {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.kontakt-betaling p:last-child {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

.kontakt-betaling strong {
  color: var(--dark);
}

/* Adressen nederst i venstre spalte */
.kontakt-adresse {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/*
 * Ø-mærke-boksen nederst på Kontakt-siden.
 *
 * Designfilen har den som ren inline-stil; værdierne er aflæst der.
 * Tilføjet i Trin F4c, da mærkets gengivelse var afklaret.
 */
.oeko-boks {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--cream);
  border: 1px solid var(--border);
  max-width: 380px;
}

/*
 * object-fit: contain holder mærkets proportioner, uanset hvilken fil der
 * bruges. Ø-mærket har bindende regler for netop det — det må ikke trykkes
 * sammen eller strækkes.
 */
.oeko-maerke {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.oeko-titel {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 0.3rem;
}

.oeko-brod {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.kontakt-lev-note {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 1rem 0 0;
  line-height: 1.6;
}

/*
 * MARGEN NULSTILLES EKSPLICIT — mønster 4.
 * Kadence giver <p> en topmargen, som ville skubbe kortenes indhold skævt.
 */
.contact-label,
.contact-val,
.contact-sub {
  margin-top: 0;
}

.del-row {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(122, 31, 31, 0.35);
}

.del-row:last-child {
  border-bottom: none;
}

.del-area { font-weight: 500; }
.del-day  { color: var(--muted); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1.5rem;
}

.contact-bar {
  width: 28px;
  height: 2px;
  background: var(--moss);
  margin-bottom: 1rem;
}

.contact-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.contact-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--dark);
  line-height: 1.6;
}

.contact-sub {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.form-input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--dark);
  outline: none;
  border-radius: 1px;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--moss);
}


/* ═══════════════════════════════════════════════════════════
   GALLERI
   I designfilen lå gitteret som en inline-stil. Det er her
   gjort til rigtige klasser, så det kan vedligeholdes ét sted.
   ═══════════════════════════════════════════════════════════ */

/*
 * Gitteret ligger inde i .page-inner og arver dermed 1200px-rammen og
 * sidepolstringen derfra. Designfilen havde galleriet uden for rammen med
 * sin egen polstring på 3.5rem — den er fjernet 26. juli 2026, da sitets
 * indhold blev centreret. Ellers ville galleriet stå smallere end alt andet.
 */
.galleri-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

/*
 * Billeder ud over de første 24 skjules, indtil der klikkes "Vis flere".
 *
 * Skjulningen hænger på klassen "js" på <html>, præcis som mobilmenuen.
 * Kører JavaScript ikke, vises ALLE billeder, og knappen skjules. Galleriet
 * er dermed aldrig utilgængeligt, uanset hvad der går galt.
 */
.js .galleri-item.skjult {
  display: none;
}

.galleri-item {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--moss-pale);
  border: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
}

.galleri-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}

.galleri-item:hover img {
  transform: scale(1.03);
}

.galleri-mere {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
}

/* Knappen giver kun mening, hvis JavaScript kan skjule noget */
.galleri-mere { display: none; }
.js .galleri-mere { display: flex; }

/*
 * Tom tilstand — fælles for galleriet og Café & brunch.
 * Samme rolige udtryk som Uge-nyt, ikke en fejlmeddelelse.
 *
 * .cafe-tom er tilføjet i Trin D1 frem for at gentage de samme værdier
 * i café-sektionen. Ændres udtrykket, ændres det ét sted.
 */
.galleri-tom,
.cafe-tom {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 3rem 2rem;
  text-align: center;
  margin-top: 2rem;
}

.galleri-tom p,
.cafe-tom p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 420px;
  margin: 0 auto;
}


/* ── Lightbox ── */

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}

#lightbox.open {
  display: flex;
}

#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

#lightbox-close,
.lightbox-nav {
  position: absolute;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-family: 'DM Sans', sans-serif;
  opacity: 0.7;
  background: none;
  border: none;
  transition: opacity 0.15s;
}

#lightbox-close {
  top: 1.5rem;
  right: 2rem;
  font-size: 2rem;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  padding: 1rem;
}

.lightbox-forrige { left: 1rem; }
.lightbox-naeste  { right: 1rem; }

#lightbox-close:hover,
.lightbox-nav:hover {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════
   BUND
   ═══════════════════════════════════════════════════════════ */

#footer {
  background: var(--moss);
  color: rgba(255, 255, 255, 0.7);
  padding: 2.5rem 3.5rem;
  font-size: 1rem;
  line-height: 1.8;
  border-top: 3px solid var(--red);
}

#footer a {
  color: rgba(255, 255, 255, 0.85);
}

#footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/*
 * Sikrer at en lang e-mailadresse eller et telefonnummer aldrig kan
 * gøre en spalte bredere end der er plads til, og dermed skubbe hele
 * siden ud i vandret scroll. min-width:0 er nødvendig, fordi elementer
 * i et gitter som udgangspunkt nægter at blive smallere end deres indhold.
 */
.footer-blok {
  min-width: 0;
  overflow-wrap: break-word;
}

.footer-titel {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}

.footer-blok strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.footer-bund {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.45);
  /*
   * ── Ændret i Trin H4, 3. august 2026 ──
   * Linjen har fået et login-ikon i højre side. Flex frem for float, så
   * de to dele kan bryde til hver sin linje på en smal skærm.
   */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/*
 * ── Tilføjet i Trin H2.5, 2. august 2026 ──
 */

/*
 * Andet afsnit i en bundspalte.
 *
 * Bruges i "Gårdbutik & bestilling", hvor åbningstid og bestillingstekst
 * står i hver sit afsnit under samme overskrift. Uden afstanden løber de
 * to sammen til én blok tekst.
 */
.footer-afsnit {
  margin-top: 0.9rem;
}

/*
 * Linklisten i bunden.
 *
 * MØNSTER 4: Kadence sætter margen og punkttegn på ul og li med en
 * elementvælger, som slår stjerne-nulstillingen. Begge dele nulstilles
 * derfor eksplicit her — ellers står listen indrykket med punkttegn og
 * et stort mellemrum under sig.
 */
.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin: 0 0 0.15rem 0;
  padding: 0;
}

.footer-nav a {
  text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  text-decoration: underline;
}

/*
 * Den afsluttende opfordring på sider uden egen CTA-blok.
 *
 * Samme udseende som .kat-cta på kategorisiderne, men med eget navn,
 * fordi .kat-* er forbeholdt produktkategorierne. Bruges på Galleri og
 * Buddha Parken, som indtil H2.5 var blindgyder uden vej videre.
 */
.side-cta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.side-cta p {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/*
 * To knapper ved siden af hinanden på Galleri. Afstanden sættes på
 * knappen frem for med gap, fordi beholderen ikke er en flex-beholder —
 * knapperne skal kunne brydes til næste linje på en smal skærm.
 */
.side-cta .btn + .btn {
  margin-left: 0.8rem;
}

/*
 * ── Tilføjet i Trin H4, 3. august 2026 ──
 */

/*
 * Tekst, kun skærmlæsere ser.
 *
 * Bruges til at give login-ikonet et navn. `display: none` ville skjule
 * teksten for skærmlæsere også — og så var linket lige så navnløst som
 * uden teksten. Derfor flyttes den ud af syne frem for at fjernes.
 */
.kun-for-skaermlaeser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Login-ikonet i bundlinjen.
 *
 * VÆLGEREN ER `#footer .footer-login`, IKKE `.footer-login` ALENE.
 * Stilarket har i forvejen `#footer a { color: rgba(255,255,255,0.85) }`.
 * Den regel har et id og vejer derfor tungere end en klasse alene —
 * en farve sat på `.footer-login` ville blive slået ihjel uden fejl og
 * uden at noget så i stykker ud. Se mønster 4.
 *
 * Ikonet er dæmpet som resten af bundlinjen og lyser op ved musen over
 * og ved tastaturfokus. Det skal kunne findes, ikke råbe.
 */
#footer .footer-login {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.15s;
  /*
   * Klikfladen gøres større, end ikonet ser ud, uden at flytte noget:
   * polstring udad, negativ margen tilbage igen.
   */
  padding: 0.4rem;
  margin: -0.4rem;
}

#footer .footer-login:hover,
#footer .footer-login:focus-visible {
  color: rgba(255, 255, 255, 0.9);
}

.footer-login-ikon {
  width: 18px;
  height: 18px;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   UGE-NYT
   Oversat fra designfilens 175 inline-stilangivelser til klasser.
   Alle klasser har præfikset "un-", så de ikke kan kollidere med
   Kadence eller med de øvrige sidetyper.
   ═══════════════════════════════════════════════════════════ */

/*
 * Siden er smallere end de øvrige — 860px mod sitets almindelige 1200px.
 *
 * Lange varelister bliver svære at læse i fuld bredde, og designfilen
 * sætter derfor max-width:860px direkte på .page-inner. Her hænges det
 * på body-klassen i stedet, så .page-inner selv forbliver generel.
 *
 * margin-inline: auto arves ikke fra reglen ovenfor, når max-width
 * overskrives — derfor gentages den her, så siden også centreres.
 */
.drivhuset-uge-nyt .page-inner {
  max-width: 860px;
  margin-inline: auto;
}

/* ── Ugenummer og periode ── */

.un-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--red);
  flex-wrap: wrap;
}

.un-badge {
  background: var(--moss);
  color: #fff;
  padding: 0.6rem 1.2rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  white-space: nowrap;
}

.un-meta {
  font-size: 1rem;
  color: var(--muted);
}

.un-meta strong {
  color: var(--dark);
  font-weight: 500;
}

/* ── To spalter ── */

.un-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

/*
 * min-width:0 er nødvendig. Uden den nægter en gitterspalte at blive
 * smallere end sit længste ord, og et langt varenavn kan derfor skubbe
 * hele siden ud i vandret scroll. Samme sikring som i .footer-blok.
 */
.un-kol {
  min-width: 0;
}

/* ── Sektionsoverskrift med rød understregning ── */

.un-titel {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--red);
}

/*
 * Overskrifter efter den første i en spalte får luft ovenover.
 * Uden det klistrer "Køkkenet denne uge" op ad boksen over den.
 */
.un-kol .un-titel + * {
  margin-top: 0;
}

.un-boks + .un-titel,
.un-fri + .un-titel {
  margin-top: 1.5rem;
}

/* ── Den lille grønne versal-etiket ── */

.un-label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.5rem;
}

/* ── Varelister ── */

.un-liste {
  list-style: none;
  margin-bottom: 1.2rem;
}

/*
 * Sidste liste i spalten skal ikke have bundmargen — ellers står der
 * et hul under "Frugt denne uge", som får de to spalter til at se
 * forskudte ud i bunden.
 */
.un-liste:last-child {
  margin-bottom: 0;
}

.un-liste li {
  font-size: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--body);
}

/* Oprindelsesmarkeringen "(dk)" bruger den fælles .oprindelse-klasse */

/* ── Cremefarvede bokse ── */

.un-boks {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 1.2rem;
  margin-bottom: 0.8rem;
}

.un-boks-tekst {
  font-size: 1rem;
  color: var(--body);
  line-height: 1.7;
}

/* ── Bagværk: fritekst uden boks ── */

.un-fri {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ── Afsluttende opfordring ── */

.un-cta {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.un-cta p {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* ── Tom tilstand ── */

/*
 * Vises når ingen uge er udgivet. Den skal se rolig og bevidst ud —
 * ikke som en fejl. Derfor samme cremefarve som boksene, centreret,
 * med god luft omkring.
 */
.un-tom {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 3rem 2rem;
  text-align: center;
}

.un-tom-titel {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--dark);
  margin-bottom: 0.8rem;
}

.un-tom p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVT
   Designfilen indeholder ingen media queries. Dette lag er
   skrevet fra bunden, så sitet virker på tablet og telefon.
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet ── */
/* ── Lille bærbar og tablet ── */
/*
 * MENUEN FOLDES SAMMEN ALLEREDE VED 1250px, IKKE FØRST VED 768px.
 *
 * Reglerne herunder stod indtil 2. august 2026 i telefon-brudpunktet.
 * Det betød, at den vandrette menubjælke skulle rumme logo, seks
 * menupunkter og handlingsknappen helt ned til 769px bredde. Det kan den
 * ikke: punkterne har white-space:nowrap, og bjælken blev bredere end
 * skærmen. Resultatet var vandret rullepanel på HELE siden.
 *
 * Fejlen fandtes også før Trin H2.5 med fem menupunkter — den lå bare
 * omkring 1100px i stedet for 1250px og var derfor sjældnere. Uge-nyt
 * gjorde den synlig, den skabte den ikke.
 *
 * 1250px er valgt ud fra en OVERSLAGSBEREGNING af punkternes bredde ved
 * 16px skrift, ikke en måling. Skulle bjælken stadig knække lige over
 * grænsen, hæves tallet — der er intet andet i vejen med den.
 *
 * Alt det øvrige i telefon-brudpunktet står uændret ved 768px.
 */
@media (max-width: 1250px) {

  #topnav {
    flex-wrap: wrap;
    padding: 0.6rem 1.2rem;
    gap: 0.8rem;
  }

  .nav-divider { display: none; }

  .nav-links {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 0.5rem;
  }

  /*
   * Menuen foldes KUN sammen, hvis JavaScript kører.
   *
   * Klassen "js" sættes på <html> af et lille script i sidens hoved.
   * Kører JavaScript ikke — fordi det er slået fra, eller fordi en fil
   * ikke blev hentet — står menuen åben, og knappen skjules. Så er
   * indholdet aldrig utilgængeligt, uanset hvad der går galt.
   */
  .js .nav-toggle { display: inline-block; }
  .js .nav-links  { display: none; }
  .js .nav-links.open { display: flex; }

  .nav-item {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1rem;
  }

  .nav-item.active {
    border-bottom-color: var(--red);
    margin-bottom: 0;
  }

  .nav-cta {
    margin-left: 0;
    order: 3;
  }
}

@media (max-width: 1024px) {

  .page-inner,
  .kat-content { padding: 2rem; }

  .prod-grid,
  .courses-grid,
  .contact-grid,
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .bestil-grid,
  .drivhuset-cafe-brunch .page-inner,
  .drivhuset-buddha-parken .page-inner { grid-template-columns: 1fr; gap: 2rem; }

  .galleri-grid { grid-template-columns: repeat(3, 1fr); }

  .forside-hero { padding: 3rem 2rem; }
}

/* ── Telefon ── */
@media (max-width: 768px) {

  /* Forsiden bliver til én spalte, hero først */
  .page-forside { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .forside-hero { grid-column: 1; grid-row: 1; border-right: none; padding: 2.5rem 1.2rem; }
  .forside-img  { grid-column: 1; grid-row: 2; min-height: 220px; }

  /* Telefon: videoen vises ikke. Med preload="none" hentes den heller
     ikke — mål det på en rigtig telefon, se kommentaren i front-page.php */
  .forside-video { display: none; }
  .forside-video ~ .forside-stillbillede { display: block; }
  .forside-cards{ grid-column: 1; grid-row: 3; grid-template-columns: 1fr; padding: 1.2rem; }

  /* Kategorisider: billedet stopper med at klæbe og lægger sig øverst */
  .kat-layout { grid-template-columns: 1fr; }
  .kat-img { position: static; height: 220px; }
  .kat-content { padding: 2rem 1.2rem; }
  .kat-menu-grid { grid-template-columns: 1fr; }

  .page-inner { padding: 2rem 1.2rem; }

  .prod-grid,
  .courses-grid,
  .contact-grid { grid-template-columns: 1fr; }

  /* Uge-nyt: de to spalter lægges under hinanden */
  .un-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Ugebadge og periode brydes til hver sin linje, hvis der er trangt */
  .un-top { gap: 0.7rem; }

  .un-tom { padding: 2.5rem 1.2rem; }

  /* Bunden bliver til én spalte. Uden dette blev de fire spalter
     presset sammen og skubbede siden ud i vandret scroll */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .galleri-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }

  /* På telefon får typemærkat og Tilmeld-knap deres egen linje under
     navnet. Uden dette blev knappen presset ud i højre kant og navnet
     ombrudt til to-tre ord pr. linje */
  .cafe-row { flex-wrap: wrap; gap: 0.5rem; }
  .cafe-tekst { flex: 1 1 100%; }

  #footer { padding: 2rem 1.2rem; }

  .lightbox-nav { font-size: 2rem; padding: 0.5rem; }
}


/* ═══════════════════════════════════════════════════════════
   ÆNDRINGER I FORHOLD TIL DESIGNFILEN
   Alle bevidste. Ingen af dem ændrer designets udseende på desktop.

   1. Låst skærmhøjde fjernet. html/body scroller normalt, og
      topnavigationen er gjort klæbende. Besluttet 25. juli 2026.
   2. .page/.page.active-mekanikken er fjernet — WordPress indlæser
      rigtige sider, så der er ingen faner at skifte imellem.
   3. .kat-img klæber nu under navigationen (top:60px) i stedet for
      i toppen af en indre beholder.
   4. Nyhedsbrevsbjælken er udeladt. Beslutning 14 i udviklingsplanen:
      ingen nyhedsbrevsløsning er valgt.
   5. Galleriets gitter er flyttet fra en inline-stil til klasser,
      og der er tilføjet frem/tilbage-knapper til lightboxen.
   6. Kursusmærkaternes farve er ikke længere bundet til typens navn.
      Designfilen har tre faste klasser (.ct-yoga, .ct-buddha,
      .ct-mind), som forudsatte tre faste kursustyper. De er erstattet
      af otte farveklasser (.ctf-gul, .ctf-orange, …), som vælges pr.
      kursustype i wp-admin. Eva kan dermed oprette nye typer, uden
      at CSS'en skal røres. Ændret i Trin D3b.
   7. Tilføjet: media queries, fokusmarkering for tastaturbrugere,
      springlink til indhold, og respekt for "reducér bevægelse".
      Designfilen indeholder ingen af delene.
   8. Bundens udseende er ikke beskrevet i designfilen. Den er holdt
      i mosgrønt med rød overkant, så den matcher topnavigationen.
      Afventer godkendelse i Trin A5.
   9. Café & brunch: designfilens fire inline-stilarter er lagt om til
      klasser (.cafe-liste, .cafe-tekst, .cafe-handling, .cafe-note,
      .cafe-img-fyld). Desuden er der tilføjet .cafe-desc, som ikke
      findes i designfilen — beskrivelsesfeltet ville ellers være
      indhold, Eva kan udfylde uden at det vises nogen steder.
      Margen på .cafe-name og .cafe-when er nulstillet eksplicit, fordi
      Kadences <p>-margen ellers slår igennem. Besluttet i Trin D1.
  10. Kurser & yoga: designfilens tre meta-linjer (Dato, Sted, Inkl.)
      er lagt om til rigtige felter — tidspunkt, sted, inkluderet —
      plus et frit felt "Andet praktisk" med én oplysning pr. linje.
      Prisens undertekst er fast tekst i alle kort, da feltgruppen
      kun har ét prisfelt. Margen på .course-title og .course-desc
      nulstillet af samme grund som i D1. .kurser-tom er en egen
      tom tilstand, fordi .cafe-tom er cremefarvet og ville se ud
      som en fejl på den mørke baggrund. Besluttet i Trin D2.
  14. SKRIFTSTØRRELSEN ER HÆVET PÅ HELE SITET. 80 af 91 font-size-
      regler er rykket ét trin op efter trappen herunder. Rejst af
      Mikael 27. juli 2026: sitets målgruppe er blandt andet ældre
      kunder, og brødteksten lå på 13-15px, de mindste etiketter på
      10px — og de er tilmed versaler med udvidet bogstavafstand,
      som er sværere at læse end små bogstaver.

        0.62-0.66 → 0.72     0.87-0.93 → 1
        0.67-0.75 → 0.78     0.94-0.96 → 1.05
        0.76-0.81 → 0.85     0.97-1.06 → 1.1
        0.82-0.86 → 0.92     over 1.1  → uændret

      Brødteksten ligger nu på 16-17px, etiketterne på 11,5-13px.

      HVORFOR IKKE BARE HÆVE ROD-STØRRELSEN med html{font-size:112.5%}?
      Fordi de faste pixelmål ikke ville følge med: 1200px-rammen,
      den 300px brede billedspalte på Café-siden, den 360px brede
      sidespalte på Kontakt og navigationens 60px højde. Teksten ville
      vokse inde i beholdere, der ikke gjorde. Med denne metode skifter
      ingen beholder størrelse.

      Overskrifterne i clamp() er BEVIDST urørt. De ligger på 27-54px,
      og forholdet til brødteksten er stadig 1,7-2,3 gange — altså
      inden for det, der læses som et tydeligt niveauskift.

      RUNDE 2, samme dag: 46 regler hævet endnu et trin, men KUN dem
      under 1rem. Begrundelsen for at stoppe dér er, at 16px er
      browserens standardstørrelse og regnes som god læsbarhed. Det,
      der stadig var småt, var versaletiketterne på 11,5px.

        0.70-0.74 → 0.78     0.81-0.88 → 0.92
        0.75-0.80 → 0.85     0.89-0.96 → 1

      DEN SAMLEDE SKALA ER NU:

        12,5px  versaletiketter, mærkater
        13,6px  eyebrows, smånoter
        14,7px  meta-linjer, varenavne
        16,0px  brødtekst
        16,8px  intro og lead
        17,6px  kortnavne
        19-22px mindre overskrifter
        32-54px sidernes hovedoverskrifter

      MINDSTE TEKST PÅ SITET ER 12,5px, mod 9,9px før i dag.

      HERFRA BØR DER IKKE HÆVES MERE uden at beholderne følger med.
      Kursuskortene på /kurser-yoga/ er de mest udsatte: tre kort i
      faste spalter, hvor meta-linjer og mærkater ombryder først.
  11. Kursustypen er flyttet fra et fast Select-felt til taksonomien
      Kursustyper, så Eva selv kan oprette nye typer og vælge farve
      blandt otte. .course-tag har fået en dæmpet standardfarve, som
      designfilen ikke har: uden den ville en type uden valgt farve
      stå med mørk tekst på mørk baggrund og være usynlig.
      Besluttet i Trin D3.
   ═══════════════════════════════════════════════════════════ */