/* Linda Blomster – lindablomster.dk
   Farver og regler: docs/ux-haandbog.md §4–5 */

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Reserveskrift med tilpassede mål (size-adjust m.m.), så overskrifterne ikke hopper, når Cormorant Garamond er hentet. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 88%;
  ascent-override: 95%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/great-vibes.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Reserveskrift til logoet med tilpassede mål, så topbjælken ikke hopper, når Great Vibes er hentet (logoet preloades ikke). */
@font-face {
  font-family: "Great Vibes Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 76%;
  ascent-override: 85%;
  descent-override: 35%;
  line-gap-override: 0%;
}

:root {
  /* Klassisk og luksuriøs (Christian 10. okt. 2026): bordeaux og guld på creme/hvid bund. Ingen grøn i designet.
     Kontraster står i docs/ux-haandbog.md §4. Gamle navne er bevaret, hvor de stadig giver mening. */
  --bund: #F8F3E8;             /* creme – hovedbaggrund */
  --rosa-stoev: #F1E3DA;       /* varm rosa-creme – skiftende sektioner (sektion--dyb) */
  --flade: #F0E8D6;            /* mørkere creme – kort, formular og bokse på lys bund */
  --rosa: #E3C9C0;             /* blød rosa-creme flade, aldrig tekst */
  --lys: #FFFCF6;              /* varm hvid – topbjælke og den hvide sektion (Kvalitet) */
  --bordeaux: #7A1F2E;         /* knapper, links, den røde tråd */
  --bordeaux-moerk: #5A1522;   /* hover og aktiv */
  --gammelrosa: var(--bordeaux);              /* gammelt navn: knapper og links */
  --gammelrosa-moerk: var(--bordeaux-moerk);  /* gammelt navn: hover og aktiv */
  --guld: #96701F;             /* streger og ornamenter på lys bund, aldrig tekst */
  --guld-lys: #D9BC78;         /* streger, ornamenter og små accenter på bordeaux-moerk (sidefoden) */
  --rosa-accent: var(--guld);  /* gammelt navn: dekorative streger */
  --tekst: #2E2926;            /* varm mørkegrå – al tekst */
  --tekst-moerkere: #1A1614;
  --tekst-sekundaer: #5C5450;  /* dæmpet tekst: billedtekster, etiketter */
  --tekst-paa-bordeaux: #F8F3E8; /* creme tekst på bordeaux-moerk (sidefoden) */
  --felt-kant: #7F7873;
  --placeholder: #6B6460;
  --hvid: #FFFFFF;
  --fejl: #A0282B;
  --fejl-bund: #F8E3E0;
  --groen: #3F6B45;            /* kun semantisk "ok": "rettet"-kant og flueben i formularen, statusboks ok */
  --groen-bund: #E8F0E4;
  /* Dybde: bløde, grønlige skygger og en tynd guldramme om fotos */
  --skygge: 0 0.5rem 1.75rem rgba(70, 30, 30, 0.16);
  --skygge-lille: 0 0.2rem 0.75rem rgba(70, 30, 30, 0.14);
  /* Ornament: tynd streg med en lille rudekrone i midten (maske, så farven kan skiftes pr. sektion) */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6H49M71 6H120' stroke='%23000' stroke-width='1' fill='none'/%3E%3Cpath d='M60 1L65 6L60 11L55 6Z' fill='%23000'/%3E%3Cpath d='M46 6L49 3.5M46 6L49 8.5M74 6L71 3.5M74 6L71 8.5' stroke='%23000' stroke-width='1' fill='none'/%3E%3C/svg%3E");

  --skrift-overskrift: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --skrift-broed: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --skrift-logo: "Great Vibes", "Great Vibes Fallback", cursive, Georgia, serif;

  /* Layout og mål (docs/ux-haandbog.md §6a) */
  --maks-bredde: 72rem;        /* brede sektioner: forside, Om Linda, kort, Kvalitet */
  --smal-bredde: 48rem;        /* én kolonne: Forløb, kontaktformular, spørgsmål, privatliv – samme venstrekant */
  --luft: clamp(3.5rem, 8vw, 6rem); /* luft over og under hver sektion: 56 px på mobil, 96 px på store skærme */
  --radius-billede: 10px;      /* alle fotos (Christians ønske 8. okt. 2026) */
  --radius: var(--radius-billede); /* kort, formular og bokse – samme runding som fotos, så kortfotos flugter med kortet */
  --radius-lille: 0.5rem;      /* formularfelter, statusbokse, spørgsmål */
  --kort-luft: clamp(1.25rem, 2.5vw, 1.5rem); /* indvendig luft i kort */
  /* Fotos fylder aldrig hele skærmen: stående fotos (4:5) højst 26rem brede og højst ca. 60 % af skærmhøjden. */
  --foto-staaende-maks: min(26rem, 48vh);
  --foto-kvadrat-maks: min(24rem, 60vh);
  /* Mindste tryk-flade på telefon (44 × 44 px, docs/ux-haandbog.md §6a). */
  --tryk-min: 2.75rem;
  /* Luft over forsiden: lidt mindre på telefon, så H1, ingress og "Bliv kontaktet" ses uden at scrolle. */
  --forside-top: clamp(1.75rem, 7vw, 5rem);
  --header-hoejde: 4.25rem;
  /* Headerens højde, når logo og menu brydes over to linjer (målt 7. okt. 2026: 105 px ved 300–365 px, 102 px ved 900–910 px). */
  --header-hoejde-brudt: 6.75rem;
  /* Den højde, ankerlinks skal holde fri af. Sættes til den brudte højde i de bredder, hvor headeren brydes. */
  --header-scroll: var(--header-hoejde);
}
/* Headeren brydes kun over to linjer under ca. 320 px (menuen er foldet sammen under 56rem; fra 56rem er menuen kompakt og står på én linje, 10. okt. 2026: fem punkter)
   (8. okt. 2026: et mindre logo under 24rem holder logo og menuknap på én linje fra ca. 312 px og op).
   (8. okt. 2026: et mindre logo under 24rem holder logo og menuknap på én linje fra ca. 312 px og op).
   Intervallerne er sat med god margen, så små forskelle i skrift og zoom ikke får headeren til at dække målet. */
@media (max-width: 20rem) {
  :root { --header-scroll: var(--header-hoejde-brudt); }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-scroll) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bund);
  color: var(--tekst);
  font-family: var(--skrift-broed);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Et ord, der er bredere end skærmen (fx "BLOMSTERARRANGEMENTER" ved 320 px og 200 % zoom), brydes i stedet for
     at give vandret scroll. Virker kun, når ordet ikke kan være der, så almindelige linjer er uændrede. */
  overflow-wrap: break-word;
}
/* Telefonnumre deles ikke over to linjer ("40 82 54 / 43"). */
a[href^="tel:"] { white-space: nowrap; }

img { max-width: 100%; height: auto; display: block; }

/* Klassisk typografi (10. okt. 2026): Cormorant Garamond til overskrifter (h1–h3), Work Sans til brødtekst, menu, knapper,
   formular og overlinjer, Great Vibes til logo og Lindas håndskrevne accent (max 3 fonte). Cormorant har lille x-højde, så overskrifterne er ca. 15 % større
   og i vægt 500–600. Tre tydelige niveauer: h1 stor, h2 mellemstor med et guld-ornament under, h3 lille og kraftig. */
h1, h2, h3 {
  font-family: var(--skrift-overskrift);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bordeaux-moerk);
  margin: 0 0 0.65em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 6.6vw, 4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.1rem, 4vw, 2.8rem); font-weight: 500; line-height: 1.12; letter-spacing: 0; margin-bottom: 1.35rem; }
h2::after {
  content: "";
  display: block;
  width: 7.5rem;
  height: 0.75rem;
  margin-top: 0.8rem;
  background: var(--guld);
  -webkit-mask: var(--ornament) no-repeat left center / 100% 100%;
  mask: var(--ornament) no-repeat left center / 100% 100%;
}
h3 { color: var(--tekst); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.005em; line-height: 1.2; }
p { margin: 0 0 1em; max-width: 65ch; }

a { color: var(--bordeaux); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover,
a:active { color: var(--gammelrosa-moerk); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 2px;
}

.skjult {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Spring til indhold */
.spring-over {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  background: var(--bordeaux-moerk);
  color: var(--bund);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}
.spring-over:focus { top: 1rem; color: var(--bund); }

/* Knapper */
.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 2px solid var(--bordeaux);
  border-radius: 999px;
  background: var(--bordeaux);
  box-shadow: var(--skygge-lille);
  letter-spacing: 0.02em;
  color: var(--hvid);
  font: 600 1.0625rem/1.2 var(--skrift-broed);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.knap:hover { background: var(--gammelrosa-moerk); border-color: var(--gammelrosa-moerk); color: var(--hvid); text-decoration: none; }
.knap--sekundaer { background: transparent; color: var(--bordeaux); border-color: var(--bordeaux); box-shadow: none; }
.knap--sekundaer:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--hvid); }
.knap--lille { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 1rem; }
.knap:active { background: var(--gammelrosa-moerk); border-color: var(--gammelrosa-moerk); }
.knap--sekundaer:active { background: var(--bordeaux-moerk); border-color: var(--bordeaux-moerk); color: var(--hvid); }
/* Et lille "tryk" på knapperne – kun hvis brugeren ikke har bedt om mindre bevægelse. */
@media (prefers-reduced-motion: no-preference) {
  .knap:active { transform: translateY(1px); }
}
.knap[disabled] { opacity: 0.6; cursor: progress; }
/* Mens formularen sendes (main.js): knappen beholder fokus og farver, teksten skifter til "Sender …". */
.knap[aria-disabled="true"] { cursor: progress; }
.knap[aria-disabled="true"]:active { transform: none; }
.knaprække { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.linkknap {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* Header */
.sidehoved {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--lys) 96%, transparent);
  color: var(--tekst);
  border-bottom: 2px solid var(--guld);
  box-shadow: 0 0.25rem 1rem rgba(70, 30, 30, 0.12);
  backdrop-filter: blur(6px);
}
.sidefod :focus-visible { outline-color: var(--guld-lys); }
.sidehoved__indre {
  max-width: var(--maks-bredde);
  margin: 0 auto;
  padding: 0.6rem 1rem;
  min-height: var(--header-hoejde);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bordeaux-moerk);
  text-decoration: none;
  /* Logoet står i Great Vibes (Christians valg 12. okt. 2026), så det ligner, at Linda har skrevet det. */
  font-family: var(--skrift-logo);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
}
.logo:hover { color: var(--bordeaux); }

.hovedmenu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.hovedmenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.hovedmenu ul a {
  font-family: var(--skrift-overskrift);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--tekst);
  text-decoration: none;
  padding: 0.35rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  border-bottom: 2px solid transparent;
}
/* Små streg-ikoner foran menupunkterne (inline-SVG i index.php, aria-hidden). Samme størrelse og stregtykkelse. */
.menuikon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--bordeaux);
}
.hovedmenu ul a:hover { border-bottom-color: var(--guld); }
/* Den sektion, man er i (main.js sætter aria-current). Understregningen er en form, ikke kun en farve. */
.hovedmenu ul a[aria-current="true"] { border-bottom-color: var(--bordeaux); }
.hovedmenu ul a:active { border-bottom-color: var(--bordeaux-moerk); }

/* Vises kun på mobil og kun med JavaScript (ellers er menuen altid synlig) */
.menuknap {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--bordeaux);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst);
  font: 600 1rem var(--skrift-broed);
  cursor: pointer;
}
.menuknap__ikon,
.menuknap__ikon::before,
.menuknap__ikon::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  position: relative;
}
.menuknap__ikon::before,
.menuknap__ikon::after { content: ""; position: absolute; left: 0; }
.menuknap__ikon::before { top: -6px; }
.menuknap__ikon::after { top: 6px; }

/* Mobil: menuen foldes sammen, når JavaScript er aktivt */
@media (max-width: 56rem) {
  .js .menuknap { display: inline-flex; min-height: var(--tryk-min); }
  .js .hovedmenu { display: none; width: 100%; padding: 0.5rem 0 1rem; }
  /* Den åbne menu kan altid scrolles, også når telefonen ligger ned, og menuen er højere end skærmen. */
  .js .hovedmenu.er-aaben {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(100vh - var(--header-hoejde));
    max-height: calc(100dvh - var(--header-hoejde));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .hovedmenu ul { flex-direction: column; width: 100%; }
  .js .hovedmenu ul a { padding: 0.6rem 0; font-size: 1.45rem; min-height: var(--tryk-min); }
  .knap--lille { min-height: var(--tryk-min); }
  .logo { min-height: var(--tryk-min); font-size: 2.1rem; }
}
/* Smalle telefoner: logo og menuknap står på én linje, så headeren ikke fylder dobbelt.
   Under 24rem (384 px) mindre mellemrum; under 22.5rem (360 px) også et lidt mindre logo og en smallere menuknap. */
@media (max-width: 24rem) {
  .sidehoved__indre { gap: 0.5rem; }
  .logo { font-size: 1.9rem; }
}
@media (max-width: 22.5rem) {
  .logo { font-size: 1.7rem; gap: 0.4rem; }
  .logo img { width: 1.75rem; height: 1.75rem; }
  .menuknap { padding: 0.4rem 0.75rem; }
}
@media (min-width: 56.01rem) {
  .menuknap { display: none !important; }
}
/* Fem menupunkter (10. okt. 2026): mellem 56 og 70rem er der ikke plads til ikoner og de normale mellemrum, så de kompakte mål
   holder headeren på én linje fra 896 px (testet 896–1100 px). */
@media (min-width: 56.01rem) and (max-width: 70rem) {
  .sidehoved__indre { gap: 0.5rem 1rem; }
  .logo { font-size: 2.1rem; }
  .hovedmenu { gap: 0.5rem 0.9rem; }
  .hovedmenu ul { gap: 0.25rem 0.85rem; }
  .hovedmenu ul a { font-size: 1.2rem; }
  .menuikon { display: none; }
  .hovedmenu .knap--lille { padding: 0.5rem 0.9rem; }
}

/* Generelle sektioner */
/* Skiftende baggrunde (10. okt. 2026): creme, varm rosa-creme (--dyb) og varm hvid (--lys). Et tyndt guld-spor og en lille
   guldrude markerer overgangen mellem sektionerne. Ornamentet ligger i overgangen, aldrig bag tekst. */
.sektion { padding: var(--luft) 1rem; position: relative; }
.sektion + .sektion::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--guld) 20%, var(--guld) 80%, transparent);
}
.sektion + .sektion::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 0.7rem; height: 0.7rem;
  background: var(--guld);
  transform: translate(-50%, -50%) rotate(45deg);
}
.sektion--dyb { background: var(--rosa-stoev); }
.sektion--lys { background-color: var(--lys); }

/* Guld linjetegning som pynt (10. okt. 2026, v4: ét fast system, docs/ux-haandbog.md §6a). Ren CSS-baggrund (ingen alt-tekst,
   intet i DOM). REGLEN: hver sektion har præcis ÉN tegning, som vokser op fra sektionens nederste kant, dvs. fra det
   gyldne skillespor og den lille rude, der åbner næste sektion. Alle tegninger har samme bredde (--s), samme synlige højde
   (--bt, bunden af tegningen skæres af kanten), samme farve og opacitet (guld, 90 % i SVG'en) og ingen rotation.
   Siderne skifter: forside venstre (pion), Hvem er jeg? højre (gren), Jeres fest venstre, Dekorationer højre, Kvalitet venstre,
   Forløb højre, Kontakt venstre, Spørgsmål højre. Tegningen står på indholdets yderkant (max(1rem, margenen)) og ligger i
   sektionens bundluft (--luft), som aldrig har tekst, så den aldrig er bag tekst. To tegninger: guld-pion.svg (venstre) og
   guld-gren.svg (højre). Vil du bytte tegning eller størrelse, så ret variablerne her. */
:root {
  --m: calc(50vw - 36rem);                          /* bredden af den frie margen ved siden af indholdet (72rem) */
  --m2: calc(50vw - 24rem);                         /* margen ved siden af den smalle FAQ (48rem) */
  --bt: calc(var(--luft) - 0.75rem);                /* synlig højde: bundluften minus lidt afstand til indholdet */
  --s: calc(var(--bt) / 0.6);                       /* tegningens bredde: de øverste 60 % (selve blomsten) er synlige */
  --d-pion: url("../images/guld-pion.svg");
  --d-gren: url("../images/guld-gren.svg");
  --d-pion-ned: url("../images/guld-pion-ned.svg");      /* pion drejet 180°: hænger ned fra sektionens øverste kant */
  --d-gren-ned: url("../images/guld-gren-ned.svg");
  --s2: calc(var(--s) * 1.6);                           /* de store tegninger i margenerne (kun de fremhævede sektioner) */
  --bt-top: calc(var(--forside-top) - 0.75rem);          /* synlig højde i forsidens toplus */
  --s-top: calc(var(--bt-top) / 0.6);
}
#top, #fester, #holdbare, #kontakt, #om, #dekorationer, #forloeb, #spoergsmaal { background-repeat: no-repeat; }
#fester, #holdbare, #kontakt {
  background-image: var(--d-pion);
  background-position: left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s));
  background-size: var(--s) auto;
}
#om, #dekorationer, #forloeb, #spoergsmaal {
  background-image: var(--d-gren);
  background-position: right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92);
  background-size: var(--s) auto;
}
/* FREMHÆVEDE SEKTIONER (11. okt. 2026): forside, Kvalitet og Spørgsmål har 3 tegninger i stedet for 1, i samme system (samme
   guld, opacitet og skala): et par i bundluften (pion til venstre, gren til højre) og en tredje i den modsatte diagonal:
   hængende fra topkanten (Kvalitet øverst til højre, forsiden øverst ved 42 %) eller stor i margenen (Spørgsmål). */
#holdbare {
  background-image: var(--d-pion), var(--d-gren), var(--d-gren-ned);
  background-position:
    left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)),
    right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
    right max(1rem, var(--m)) top calc(var(--bt) - var(--s) * 0.92);
  background-size: var(--s) auto, var(--s) auto, var(--s) auto;
}
#spoergsmaal {
  background-image: var(--d-gren), var(--d-pion);
  background-position:
    right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
    left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s));
  background-size: var(--s) auto, var(--s) auto;
}
@media (min-width: 66rem) {
  #spoergsmaal {
    background-image: var(--d-gren), var(--d-pion), var(--d-pion);
    background-position:
      right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
      left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)),
      right calc(var(--m2) - var(--s2) - 0.5rem) top 12%;
    background-size: var(--s) auto, var(--s) auto, var(--s2) auto;
  }
}
.indhold { max-width: var(--maks-bredde); margin: 0 auto; }
.indhold--smal { max-width: var(--smal-bredde); }
.sektion__intro { font-size: 1.2rem; margin-bottom: 2rem; }
.overlinje {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 0.75rem;
}

/* Fotos (laves med "npm run billeder", docs/fotoguide.md).
   width/height i HTML giver pladsen på forhånd, og aspect-ratio her låser formatet, så intet hopper (CLS).
   object-fit: cover beskærer pænt, hvis formatet ikke passer helt. Baggrunden ses kun, mens billedet hentes. */
.foto { margin: 0; }
.foto img,
.flise__foto img,
.dekoration__foto img {
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--flade);
}
.foto img { border-radius: var(--radius-billede); }
/* Dybde: bløde skygger og en tynd guldramme om alle fotos */
.foto img,
.flise__foto img,
.dekoration__foto img,
.midlertidig img { box-shadow: var(--skygge), 0 0 0 1px rgba(150, 112, 31, 0.55); }

/* Midlertidige billeder (tegninger, indtil der er et foto) */
.midlertidig { margin: 0; }
.midlertidig img {
  background: var(--flade);
  border-radius: var(--radius-billede);
}
.midlertidig figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--tekst-sekundaer);
}

/* Forside: fuldbredde-hero med blød gradient (ingen mønster bag teksten) og et tyndt guldspor i bunden */
.hero {
  background-color: var(--bund);
  background-image:
    var(--d-pion),
    var(--d-gren),
    radial-gradient(ellipse 55% 90% at 88% 25%, rgba(241, 227, 218, 0.95), transparent 70%),
    linear-gradient(180deg, var(--bund) 0%, #F4ECDD 100%);
  background-repeat: no-repeat;
  background-position:
    left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)),
    right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
    0 0, 0 0;
  background-size: var(--s) auto, var(--s) auto, auto, auto;
  border-bottom: 1px solid var(--guld);
}
/* Fra 64rem er forsidens topluft stor nok til en tredje tegning, der hænger ned fra topkanten */
@media (min-width: 64rem) {
  .hero {
    background-image:
      var(--d-pion),
      var(--d-gren),
      var(--d-pion-ned),
      radial-gradient(ellipse 55% 90% at 88% 25%, rgba(241, 227, 218, 0.95), transparent 70%),
      linear-gradient(180deg, var(--bund) 0%, #F4ECDD 100%);
    background-position:
      left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)),
      right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
      left 42% top calc(var(--bt-top) - var(--s-top)),
      0 0, 0 0;
    background-size: var(--s) auto, var(--s) auto, var(--s-top) auto, auto, auto;
  }
}

.forside {
  max-width: var(--maks-bredde);
  margin: 0 auto;
  padding: var(--forside-top) 1rem var(--luft);
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.ingress { font-size: 1.2rem; }
/* Telefon og e-mail under knapperne (10. okt. 2026): små links med ikon, mindst 44 px høje på telefon */
.forside__kontakt { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.forside__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tryk-min);
  font-weight: 500;
  color: var(--bordeaux);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.forside__kontakt a:hover { color: var(--bordeaux-moerk); text-decoration: underline; text-underline-offset: 0.18em; }
.forside__kontakt svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--guld); }
.forside__billede { width: 100%; max-width: var(--foto-staaende-maks); justify-self: start; }
.forside__billede img { aspect-ratio: 4 / 5; }
/* Telefon (under 48rem): fotoerne flugter med tekstens venstrekant (justify-self: start ovenfor og i Om Linda/Kvalitet),
   ikke centreret. Fra 48rem gælder de godkendte gitre. */
@media (min-width: 48rem) {
  .forside { grid-template-columns: 1.15fr 0.85fr; }
  /* Fotoet flugter med højre kant (samme kant som headerens knap), ikke midt i kolonnen. */
  .forside__billede { justify-self: end; }
}

/* "Jeres fest" (#fester, 11. okt. 2026, v2): billedfliser uden overlap. Hver flise er ét kort (--lys, 10 px hjørner, 3 px guld
   topkant, fælles skygge): fotoet (4:3, 10 px hjørner, tynd guldramme) står helt og rent øverst, og tekstpladen ligger lige
   UNDER det, adskilt af en tynd guldstreg. Intet dækker nogen del af fotoet. Tekst 14:1, links 9,9:1 mod --lys. Tre kolonner
   fra 48rem, ellers stablet. Fliserne strækkes til samme højde, så linket "Fortæl mig om …" flugter nederst i alle tre. */
.fliser { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .fliser { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.flise {
  display: flex;
  flex-direction: column;
  padding: 0.625rem;
  background: var(--lys);
  border-radius: var(--radius);
  border-top: 3px solid var(--guld);
  box-shadow: var(--skygge);
}
.flise__foto { display: block; }
.flise__foto img { aspect-ratio: 4 / 3; border-radius: var(--radius-billede); box-shadow: 0 0 0 1px rgba(150, 112, 31, 0.55); }
.flise__plade {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0.75rem 0 0;
  padding: var(--kort-luft) 0.625rem 0.625rem;
  border-top: 1px solid rgba(150, 112, 31, 0.55);
}
.flise__plade h3 { margin-top: 0; }

.flise__plade .kortikon { margin-top: 0.25rem; }
.flise__plade p:last-child { margin-bottom: 0; }
.flise__plade p.flise__handling { margin: auto 0 0; padding-top: 0.75rem; }
.flise__handling a { display: inline-block; padding: 0.25rem 0; font-weight: 600; }
@media (max-width: 56rem) {
  .flise__handling a { display: inline-flex; align-items: center; min-height: var(--tryk-min); padding: 0; }
  .flise__plade p.flise__handling { padding-top: 0.25rem; }
}

/* "Dekorationer" (#dekorationer, 10. okt. 2026): zigzag-rækker. Fra 48rem foto og tekst side om side (2fr / 3fr), fotoet
   skifter side for hver række; under 48rem stablet med foto først. Foto 4:3, 10 px hjørner. Teksten står direkte på bunden.
   Rød tråd mellem rækkerne: inline-SVG (--gammelrosa, 5,0:1 mod --rosa-stoev) bag fotoerne (z-index 1), skalerer med
   bredden (viewBox + height: auto). Bred version fra 48rem: negative marginer i % af bredden (12 af 1000 enheder).
   Under 48rem: smal lodret tråd. Sidste række fører tråden ned under boksen "En rød tråd". */
.dekorationsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dekoration { --dek-gap: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 1.25rem; align-items: stretch; }
.dekoration__foto { display: block; position: relative; z-index: 1; align-self: start; }
.dekoration__foto img { aspect-ratio: 4 / 3; border-radius: var(--radius-billede); }
/* Tekstkortet (11. okt. 2026): varm hvid flade med 10 px hjørner og guld topkant, lodret centreret og strakt til fotoets højde.
   Det overlapper fotoets kant en smule (desktop: 1,25rem ind over fotoet; telefon: 1rem op over fotoets nederste kant), så
   foto og kort læses som ét element. Kortet ligger over fotoet (z-index 2), men tråden ligger stadig bag begge. Tekst 14:1. */
.dekoration__tekst {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -2.25rem;                 /* 1,25rem rækkegab + 1rem op over fotoets nederste kant (telefon) */
  padding: 1.5rem 1.25rem;
  background: var(--lys);
  border-radius: var(--radius);
  border-top: 3px solid var(--guld);
  box-shadow: var(--skygge);
}
.dekoration__tekst h3 { margin-top: 0; }
/* Fælles udtryk for tekstkortene i Dekorationer og Jeres fest (12. okt. 2026): rundt guldrammet ikon, stor Cormorant-overskrift
   (600, bordeaux-mørk) med guld-ornament under og lidt større brødtekst. Overskrift 12:1+, brødtekst 14:1 mod --lys. */
.kortikon {
  display: block;
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1px solid var(--guld);
  background: var(--bund);
  color: var(--bordeaux);
}
.dekoration__tekst h3,
.flise__plade h3 {
  font-size: clamp(1.6rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bordeaux-moerk);
  margin-bottom: 1.1rem;
}
.dekoration__tekst h3::after,
.flise__plade h3::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 0.7rem;
  margin-top: 0.65rem;
  background: var(--guld);
  -webkit-mask: var(--ornament) no-repeat left center / 100% 100%;
  mask: var(--ornament) no-repeat left center / 100% 100%;
}
.dekoration__tekst p,
.flise__plade p { font-size: 1.075rem; }
.dekoration__tekst p:last-child { margin-bottom: 0; }
.dekoration__traad { display: block; height: auto; }
.dekoration__traad--bred { display: none; width: 100%; }
.dekoration__traad--smal { width: 6rem; margin: -0.25rem 0 -0.75rem 0.5rem; }
.dekoration__traad path,
.roed-traad__linje {
  fill: none;
  stroke: var(--bordeaux);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dekoration__traad--smal path { stroke-width: 2.4; }
.dekoration__traad--bred path { stroke-width: 2.4; }
/* Stregen skal være lige tyk på begge sider af overgangen til boksen. Den brede tråd skalerer med bredden, så den
   får lidt mere i viewBox-enheder på 48–64rem, hvor boksens lodrette tegning står i skala 1 (2,4 px). */
@media (min-width: 48rem) and (max-width: 55.99rem) {
  .dekoration__traad--bred path { stroke-width: 3.1; }
}
@media (min-width: 56rem) and (max-width: 63.99rem) {
  .dekoration__traad--bred path { stroke-width: 2.6; }
}
.dekorationsliste + .roed-traad { position: relative; z-index: 1; margin-top: 0; }
@media (min-width: 48rem) {
  .dekoration { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 var(--dek-gap); }
  .dekoration__tekst {
    margin: 0 0 0 calc(-1 * var(--dek-gap) - 1.25rem);       /* 1,25rem ind over fotoets kant */
    padding: 1.75rem 2rem 1.75rem 3rem;
  }
  .dekoration:nth-child(even) .dekoration__tekst { margin: 0 calc(-1 * var(--dek-gap) - 1.25rem) 0 0; padding: 1.75rem 3rem 1.75rem 2rem; }
  .dekoration:nth-child(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .dekoration:nth-child(even) .dekoration__foto { order: 2; }
  .dekoration__traad--smal { display: none; }
  .dekoration__traad--bred { display: block; grid-column: 1 / -1; order: 3; margin: -1.2% 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .dekoration__traad.er-klar path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .dekoration__traad.er-tegnet path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s ease-in-out; }
  /* Sidste række fører tråden videre ind i boksen "En rød tråd": den slutter i fuld fart (se .roed-traad). */
  .dekoration:last-child .dekoration__traad.er-tegnet path { transition-timing-function: cubic-bezier(0.45, 0, 0.7, 0.4); }
}

.fremhaevet {
  margin-top: 2.5rem;
  padding: 1.75rem;
  border-left: 4px solid var(--guld);
  background: var(--bund);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--skygge);
}
.sektion:not(.sektion--dyb) .fremhaevet { background: var(--flade); }
.fremhaevet p:last-child { margin-bottom: 0; }

/* "En rød tråd" (9. okt. 2026): en tegnet tråd forbinder bordet, indgangen og lokalet.
   Tråd og ikoner i --gammelrosa (6,1:1 mod boksens lyse bund), ordene i --tekst. Under 30rem står tråden lodret.
   Animation: main.js sætter .er-klar (tråden skjult) og .er-tegnet (tråden tegnes), men kun uden
   prefers-reduced-motion. Uden JavaScript står tråden færdigtegnet. */
/* Én sammenhængende tråd (10. okt. 2026, v2): boksens tråd starter præcis, hvor rækkernes tråd slutter.
   - Under 48rem: rækkernes tråd slutter 3rem fra venstre. Den lodrette tegning (altid 13,75rem bred, skala 1) står øverst
     i boksen og starter i x = 20 enheder (1,75rem polstring + 1,25rem = 3rem).
   - Fra 48rem: rækkernes tråd slutter i 50 %. Boksen er to lige kolonner uden polstring; tegningen står øverst i højre
     kolonne (bred fra 64rem, ellers lodret flyttet 1,25rem til venstre). Lodret tegning op til 64rem (tekst min. ca. 15 px). */
.roed-traad { display: grid; gap: 1.5rem; align-items: center; border-left: 0; border-radius: var(--radius); }
.roed-traad__tekst p { margin-bottom: 0; }
.roed-traad__tegning { display: block; height: auto; overflow: visible; }
.roed-traad__tegning--bred { display: none; width: 100%; max-width: 30rem; }
.roed-traad__tegning--smal { width: 13.75rem; max-width: none; order: -1; margin-top: -1.75rem; }
.roed-traad__linje { stroke-width: 2.4; }
@media (min-width: 48rem) {
  .roed-traad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; align-items: start; }
  .roed-traad__tekst { grid-column: 1; grid-row: 1; align-self: center; padding: 1.75rem 2rem 1.75rem 1.75rem; }
  .roed-traad__tegning { grid-column: 2; grid-row: 1; margin: 0 1.75rem 1.5rem 0; }
  .roed-traad__tegning--smal { margin-left: -1.25rem; }
}
@media (min-width: 64rem) {
  .roed-traad__tegning--smal { display: none; }
  .roed-traad__tegning--bred { display: block; width: calc(100% - 1.75rem); }
  .roed-traad__tegning--bred .roed-traad__linje { stroke-width: 2.6; }
}
.roed-traad__punkt circle { fill: var(--bund); stroke: var(--bordeaux); stroke-width: 1.6; }
.roed-traad__punkt path {
  fill: none;
  stroke: var(--bordeaux);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.roed-traad__tegning text {
  fill: var(--tekst);
  font-family: var(--skrift-broed);
  font-size: 15px;
  font-weight: 500;
  text-anchor: middle;
}
.roed-traad__tegning--bred text { font-size: 16px; }
.roed-traad__tegning--smal text { text-anchor: start; font-size: 16px; }
/* Animationen fortsætter, hvor tråden ovenfor slap (main.js venter, til rækkens tråd er tegnet færdig):
   rækkens sidste stykke accelererer (ease-in), og boksens tråd tager over i fuld fart og bremser til sidst (ease-out).
   Ikonerne og ordene toner frem, cirka når tråden når dem. */
@media (prefers-reduced-motion: no-preference) {
  .roed-traad.er-klar .roed-traad__linje { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .roed-traad.er-klar .roed-traad__punkt,
  .roed-traad.er-klar .roed-traad__tegning text { opacity: 0; }
  .roed-traad.er-tegnet .roed-traad__linje { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(0.3, 0.6, 0.55, 1); }
  .roed-traad.er-tegnet .roed-traad__punkt,
  .roed-traad.er-tegnet .roed-traad__tegning text { opacity: 1; transition: opacity 0.25s ease; }
  .roed-traad.er-tegnet .roed-traad__punkt:nth-of-type(1),
  .roed-traad.er-tegnet text:nth-of-type(1) { transition-delay: 0.05s; }
  .roed-traad.er-tegnet .roed-traad__punkt:nth-of-type(2),
  .roed-traad.er-tegnet text:nth-of-type(2) { transition-delay: 0.35s; }
  .roed-traad.er-tegnet .roed-traad__punkt:nth-of-type(3),
  .roed-traad.er-tegnet text:nth-of-type(3) { transition-delay: 0.7s; }
}

/* Kvalitet (11. okt. 2026, v2): foto og tekstkort står som to jævnbyrdige felter af samme højde, uden overlap og med lige stort
   mellemrum. Kortet (--bund på den varme hvide sektion, 10 px hjørner, 3 px guld topkant, skygge) har overskrift med
   guld-ornament, intro og de tre punkter som ens felter (--lys, tynd guldkant, guld-blad, fed første linje i Work Sans og
   beskrivelsen under). Fotoet (nærbillede af hvide roser, guldramme og skygge) strækkes til kortets højde (object-fit: cover).
   Fra 48rem to kolonner (1,05fr / 0,95fr), så fotoet er næsten lige så bredt som kortet; telefon: kort og foto stablet i
   samme bredde (højst 30rem), fotoet 1:1. Kvalitet står på --lys, naboerne på rosa-creme (Dekorationer) og creme (Forløb). */
.kvalitet { --kv-gap: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: var(--kv-gap); align-items: stretch; max-width: 30rem; margin: 0; }
.kvalitet__tekst {
  padding: 1.5rem 1.25rem;
  background: var(--bund);
  border-radius: var(--radius);
  border-top: 3px solid var(--guld);
  box-shadow: var(--skygge);
}
.kvalitet__tekst p { margin-bottom: 0; }
.kvalitet__billede { width: 100%; }
.kvalitet__billede img { aspect-ratio: 1 / 1; }
.punkter { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; }
.punkter li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 3.7rem;
  background: var(--lys);
  border: 1px solid rgba(150, 112, 31, 0.55);
  border-radius: var(--radius-lille);
}
.punkter li strong { display: block; font-weight: 600; color: var(--bordeaux-moerk); }
.punkter .punktikon {
  position: absolute;
  left: 0.85rem;
  top: 0.75rem;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.38rem;
  border-radius: 50%;
  border: 1px solid var(--guld);
  background: var(--bund);
  color: var(--bordeaux);
}
@media (min-width: 48rem) {
  .kvalitet { max-width: var(--maks-bredde); margin: 0 auto; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .kvalitet__tekst { padding: 2rem; }
  /* Fotoet fylder hele cellen (samme højde som kortet); højden kommer fra kortet, så der ikke sker noget layoutspring. */
  .kvalitet__billede { position: relative; min-height: 20rem; }
  .kvalitet__billede picture { position: absolute; inset: 0; display: block; }
  .kvalitet__billede img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 45%; }
}

/* Trin */
.trin {
  list-style: none;
  counter-reset: trin;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.trin li {
  counter-increment: trin;
  position: relative;
  padding: 0 0 1.75rem 3.75rem;
}
.trin li::before {
  content: counter(trin);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bordeaux);
  color: var(--hvid);
  box-shadow: 0 0 0 3px var(--bund), 0 0 0 4px var(--guld);
  font: 600 1.1rem var(--skrift-broed);
}
.trin li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.75rem;
  bottom: 0.25rem;
  width: 2px;
  background: linear-gradient(var(--guld), rgba(150, 112, 31, 0.25));
}
/* På rosa-creme bund holder cirklens ring samme farve som sektionen. */
.sektion--dyb .trin li::before { box-shadow: 0 0 0 3px var(--rosa-stoev), 0 0 0 4px var(--guld); }
.trin h3 { margin-bottom: 0.25rem; padding-top: 0.3rem; }
.trin p { margin: 0; }
/* Trinene afsløres ét ad gangen, når læseren når hvert trin (10. okt. 2026, v2), som den røde tråd: main.js (startTrin)
   sætter .er-klar på hvert trin (skjult: opacity/transform, stykket streg ned til næste "ikke tegnet") og .er-tegnet på
   et trin, når det er ca. halvvejs inde i skærmen. Så toner tallet og teksten blidt ind, og stregen ned til næste trin
   tegnes. Trinene starter i rækkefølge (et trin starter aldrig før trinnet over det); hopper man direkte ned, står de
   foregående færdige uden animation. Kun opacity og transform, så intet hopper (ingen CLS). Teksten ligger hele tiden i DOM
   og er ikke skjult for skærmlæsere. Uden JavaScript og med "reducer bevægelse" står alt færdigt. */
@media (prefers-reduced-motion: no-preference) {
  .trin li.er-klar::before { opacity: 0; transform: scale(0.8); }
  .trin li.er-klar > * { opacity: 0; transform: translateY(0.6rem); }
  .trin li.er-klar:not(:last-child)::after { transform: scaleY(0); transform-origin: top; }
  .trin li.er-tegnet::before { opacity: 1; transform: none; transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s; }
  .trin li.er-tegnet > * { opacity: 1; transform: none; transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; }
  .trin li.er-tegnet:not(:last-child)::after { transform: none; transition: transform 0.4s ease-in-out 0.3s; }
}

/* Forløb med foto af Linda på værkstedet (10. okt. 2026). Samme bredde og gitter som "Om Linda", så fotoerne går i
   zigzag: Om Linda venstre, Kvalitet højre, Forløb venstre. Telefon: fotoet står efter trinene (DOM-rækkefølgen), så
   trinene kommer lige under overskriften, og to store fotos (Kvalitet og Forløb) ikke står lige efter hinanden. */
.forloeb { display: grid; gap: 2.5rem; align-items: start; }
.forloeb__billede { width: 100%; max-width: var(--foto-staaende-maks); justify-self: start; }
.forloeb__billede img { aspect-ratio: 4 / 5; }
@media (min-width: 48rem) {
  .forloeb { grid-template-columns: 0.8fr 1.2fr; }
  /* Fotoet følger med ned gennem alle 7 trin (som ved formularen), 20rem (320 × 400 px), aldrig under headeren.
     Negativ bundmargin lader det stå lidt ned i bundluften, men aldrig helt ud til næste sektion (1,5rem fri). */
  .forloeb__billede {
    order: -1;
    position: sticky;
    top: calc(var(--header-scroll) + 1.5rem);
    max-width: 20rem;
    margin-bottom: calc(1.5rem - var(--luft));
  }
}

/* Om Linda / "Hvem er jeg?" (10. okt. 2026, v2): foto og tekst i ét lyst panel (--bund, 10 px hjørner). Fotoet (4:5, højst
   --foto-staaende-maks og 40vw) fylder panelets venstre side kant til kant; teksten står lodret centreret til højre.
   Telefon (under 48rem): tekst øverst, foto nederst i fuld panelbredde (max 26rem, venstrestillet). Ingen links i fotoet. */
.om {
  display: grid;
  align-items: center;
  background: var(--bund);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--skygge);
  border-top: 3px solid var(--guld);
}
.om__billede { width: 100%; }
.om__billede img { box-shadow: none; }
.om__billede img { aspect-ratio: 4 / 5; }
.om__tekst { padding: clamp(1.5rem, 4vw, 2.5rem); }
.om__tekst p:last-child { margin-bottom: 0; }
@media (max-width: 47.99rem) {
  .om { max-width: 26rem; margin: 0; }
  .om__tekst { order: -1; }
}
@media (min-width: 48rem) {
  .om { grid-template-columns: min(var(--foto-staaende-maks), 40vw) minmax(0, 1fr); }
  .om__tekst { padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem); max-width: 42rem; }
  /* Bliver teksten højere end fotoet (smalle skærme), strækkes fotoet med (object-fit: cover), så det stadig fylder panelets side. */
  .om__billede { align-self: stretch; }
  .om__billede picture { display: block; height: 100%; }
  .om__billede img { height: 100%; }
}
.haandskrift {
  font-family: var(--skrift-logo);          /* Lindas håndskrevne accent står i Great Vibes (max 3 fonte: Cormorant, Great Vibes, Work Sans) */
  font-size: 2.2rem;
  line-height: 1.35;
  margin-top: 1.5rem;
  color: var(--bordeaux);
  padding-left: 1rem;
  border-left: 2px solid var(--guld);
}
.signatur { display: block; margin-top: 0.25rem; }

/* Kontakt
   Rækkefølge: overskrift og intro → formular → telefon/e-mail/Instagram. Formularen er førstevalget; de andre
   kontaktmåder står bagefter og er mindre fremtrædende. Lindas foto (9. okt. 2026):
   - under 62rem: et lille foto (6,5rem) til højre for overskriften, så formularen ikke skubbes ned,
   - fra 62rem: to kolonner, formularen til venstre og fotoet (20rem) til højre ud for overskriften. */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "intro foto"
    "formular formular"
    "alternativ alternativ";
  gap: 2rem 1rem;
  max-width: var(--smal-bredde);
}
.kontakt__intro { grid-area: intro; align-self: start; }
.kontakt__formular { grid-area: formular; min-width: 0; }
.kontakt__alternativ { grid-area: alternativ; }
.kontakt__foto { grid-area: foto; width: 6.5rem; align-self: start; }
.kontakt__foto img { aspect-ratio: 4 / 5; }
@media (max-width: 22.5rem) {
  .kontakt__foto { width: 5.25rem; }
}
@media (min-width: 62rem) {
  .kontakt {
    max-width: var(--maks-bredde);
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-areas:
      "intro foto"
      "formular foto"
      "alternativ foto";
    column-gap: 3rem;
  }
  /* Fotoet følger med ned langs den lange formular (aldrig under headeren). */
  .kontakt__foto { width: 100%; position: sticky; top: calc(var(--header-scroll) + 1.5rem); }
}
/* Mål for "Bliv kontaktet"-knapperne (#bliv-kontaktet). html's scroll-padding-top holder målet fri af
   den faste header. scroll-margin-top fylder op, så afstanden over overskriften altid svarer til den brudte header + 1 rem
   (samme afstand i alle bredder, så formularen kommer lige så højt op som før). */
.kontakt__intro { scroll-margin-top: calc(var(--header-hoejde-brudt) - var(--header-scroll)); }
.kontakt__intro p:last-child { margin-bottom: 0; }
/* main.js giver målet fokus (tabindex="-1"), når man bruger kortlinkene eller den faste knap. Det er ikke et
   interaktivt element, så det får ingen fokusring; næste Tab går videre ind i formularen. */
.kontakt__intro:focus { outline: none; }
/* Kontaktblokken under formularen (11. okt. 2026): samme kort som formularen (flade, guld topkant, 10 px hjørner), med et ikon
   ved hvert punkt og trykflader på mindst 44 px. */
.kontakt__alternativ {
  background: var(--bund);
  border-radius: var(--radius);
  border-top: 3px solid var(--guld);
  box-shadow: var(--skygge);
  padding: clamp(1.25rem, 4vw, 2rem);
  font-size: 1rem;
}
.sektion:not(.sektion--dyb) .kontakt__alternativ { background: var(--flade); }
.kontakt__alternativ p { margin-bottom: 1rem; }
.kontaktliste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
.kontaktliste li { flex: 0 1 auto; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 0.85rem; min-height: 3rem; }
.kontaktliste__tekst { min-width: 0; display: flex; flex-direction: column; }
.kontaktikon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border-radius: 50%;
  border: 1px solid var(--guld);
  background: var(--lys);
  color: var(--bordeaux);
}
.kontaktliste__etiket {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tekst-sekundaer);
}
.kontaktliste a { font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: var(--tryk-min); }
@media (max-width: 56rem) {
  .kontaktliste { gap: 0.25rem 1.5rem; }
}

/* Formular */
.formular {
  background: var(--flade);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem);
  border-top: 3px solid var(--guld);
  box-shadow: var(--skygge);
}
/* På rosa-creme sektion (kontakt) står formularen på lys creme */
.sektion--dyb .formular { background: var(--bund); }
.formular__note { font-size: 0.95rem; }
.felt { margin-bottom: 1.25rem; }
.felt-raekke { display: grid; gap: 0 1.25rem; }
@media (min-width: 36rem) {
  .felt-raekke { grid-template-columns: 1fr 1fr; }
}
.felt label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.krav { color: var(--bordeaux); }
.felt input,
.felt select,
.felt textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 2px solid var(--felt-kant);
  border-radius: var(--radius-lille);
  background: var(--hvid);
  color: var(--tekst);
  font: inherit;
}
.felt textarea { resize: vertical; min-height: 9rem; }
/* Valgliste og datovælger får samme højde som tekstfelterne (iOS Safari gør et tomt datofelt lavere). */
.felt select,
.felt input[type="date"] { min-height: 3.5rem; }
.felt input[type="date"] { display: block; text-align: left; text-align: start; }
/* Den valgte dato står venstrejusteret med samme indrykning som pladsholderen og de andre felter (12. okt. 2026). Webkit (iOS Safari og
   Chrome) centrerer ellers værdien. Højde og polstring er uændrede (min-height 3,5rem). */
.felt input[type="date"]::-webkit-date-and-time-value { text-align: left; text-align: start; margin: 0; min-height: 1.3em; }
.felt input[type="date"]::-webkit-datetime-edit { padding: 0; }
@supports (-webkit-touch-callout: none) {
  .felt input[type="date"] { -webkit-appearance: none; appearance: none; }
}
/* Datofelt på iOS (12. okt. 2026): iOS Safari viser ingen tekst i et tomt date-input. main.js sætter .er-ios (kun iOS) og .er-tom
   (feltet er tomt og ikke i fokus); så vises en dæmpet "dd-mm-åååå" oven på feltet. Teksten blokerer ikke tryk, er skjult for
   skærmlæsere (aria-hidden) og står i placeholderfarven (5,8:1 mod hvid). Uden JavaScript vises den aldrig. */
.datofelt { position: relative; }
.datofelt__tekst { display: none; }
.datofelt.er-ios.er-tom .datofelt__tekst {
  display: block;
  position: absolute;
  left: calc(0.85rem + 2px);
  top: 50%;
  transform: translateY(-50%);
  font: inherit;
  font-style: italic;
  color: var(--placeholder);
  pointer-events: none;
}
.felt input:hover,
.felt select:hover,
.felt textarea:hover,
.felt input:focus-visible,
.felt select:focus-visible,
.felt textarea:focus-visible { border-color: var(--bordeaux); }
/* Et felt, der havde en fejl og nu er rettet (main.js): grøn kant (6,0:1 mod hvid, 4,8:1 mod formularens baggrund)
   og et flueben efter feltets navn, så det ikke kun vises med farve. Fluebenet læses ikke op (alt-tekst ""),
   skærmlæsere får besked ved, at aria-invalid fjernes. */
.felt.er-rettet input,
.felt.er-rettet select,
.felt.er-rettet textarea { border-color: var(--groen); }
.felt.er-rettet > label::after {
  content: "\2713";
  content: "\2713" / "";
  margin-left: 0.4em;
  color: var(--groen);
  font-weight: 700;
}
.felt input[aria-invalid="true"],
.felt select[aria-invalid="true"],
.felt textarea[aria-invalid="true"] { border-color: var(--fejl); border-width: 3px; }
/* Eksempeltekst i felterne: dæmpet og kursiv, så den ikke ligner udfyldt tekst. --placeholder giver 5,7:1 på hvid. */
.felt input::placeholder,
.felt textarea::placeholder { color: var(--placeholder); font-style: italic; opacity: 1; }
.felt__hjaelp { font-size: 0.95rem; margin: 0.35rem 0 0; }
/* Står lige under Send-knappen (9. okt. 2026). */
.formular__tryghed { font-weight: 600; margin: 0.75rem 0 0; }
.felt__fejl { color: var(--fejl); font-weight: 600; font-size: 0.95rem; margin: 0.35rem 0 0; }
.felt__fejl::before { content: "⚠ "; }
/* Tegntæller under "Ønsker" (main.js viser den først nær grænsen). */
.felt__taeller { font-size: 0.95rem; margin: 0.35rem 0 0; }
.felt__taeller--fuld { font-weight: 600; }
/* Afkrydsningsfelt ("Jeg bekræfter …"): feltet til venstre, teksten til højre, fejlen under begge.
   Selve feltet er 24×24 px, og hele teksten kan også klikkes. accent-color giver krydset sidens knapfarve. */
.felt--afkryds { display: grid; grid-template-columns: auto 1fr; gap: 0 0.75rem; align-items: start; }
.felt--afkryds input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.05rem 0 0;
  padding: 0;
  accent-color: var(--bordeaux);
  cursor: pointer;
}
.felt--afkryds label { margin: 0; cursor: pointer; }
.felt--afkryds .felt__fejl { grid-column: 1 / -1; }
/* Telefon: teksten (som også sætter krydset) fylder mindst 44 px i højden og går helt ind til feltet,
   så der ikke er et dødt mellemrum mellem felt og tekst. */
@media (max-width: 56rem) {
  .felt--afkryds { gap: 0; }
  .felt--afkryds input { margin-top: 0.65rem; }
  .felt--afkryds label { padding: 0.6rem 0 0.6rem 0.75rem; min-height: var(--tryk-min); }
}
.felt--afkryds input[aria-invalid="true"] { outline: 3px solid var(--fejl); outline-offset: 2px; }
.felt--afkryds input:focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 3px; }
.felt--skjult { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.statusboks {
  border-radius: var(--radius-lille);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
  border: 2px solid var(--bordeaux-moerk);
  background: var(--bund);
}
.statusboks p:last-child { margin-bottom: 0; }
.statusboks--ok { border-color: var(--groen); background: var(--groen-bund); }
/* Bekræftelsen efter afsendelse: korte afsnit, linket til forløbet tæt på og med god trykflade */
.statusboks--ok p + p { margin-top: 0.5rem; }
.tak__slut a { display: inline-flex; align-items: center; min-height: var(--tryk-min); font-weight: 600; }
.statusboks--fejl { border-color: var(--fejl); background: var(--fejl-bund); }

/* Spørgsmål og svar (inkl. privatliv og cookies) */
details {
  background: var(--bund);
  border-radius: var(--radius-lille);
  border-left: 3px solid var(--guld);
  margin-bottom: 0.75rem;
  padding: 0 1.25rem;
}
summary {
  cursor: pointer;
  font-weight: 600;
  padding: 1rem 0;
}
summary:hover { color: var(--bordeaux-moerk); text-decoration: underline; text-underline-offset: 0.18em; }
details[open] { padding-bottom: 0.5rem; }
/* På lys sektion (fx "Spørgsmål og svar") får boksene den lyse grå flade, så de kan ses. */
.sektion:not(.sektion--dyb) details { background: var(--flade); }

/* "Spørgsmål og svar": én lang liste, almindelige spørgsmål først, derefter privatliv og cookies. */
/* To små grupper ("Om bestilling" / "Om dine oplysninger") med en lille etiket i samme stil som overlinjer.
   Bevidst ikke en overskrift: det er stadig én liste (Christians ønske). Farve 4,9:1 på støvet rosa. */
.spoergsmaal__gruppe {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin: 0 0 0.75rem;
}
details + .spoergsmaal__gruppe { margin-top: 2rem; }
.spoergsmaal__mere { margin-top: 1.5rem; }
code { font-family: inherit; font-size: 0.95em; background: var(--flade); padding: 0.05em 0.3em; border-radius: 0.25rem; }

/* Footer */
.sidefod {
  background-color: var(--bordeaux-moerk);
  color: var(--tekst-paa-bordeaux);
  padding: 3rem 1rem;
  border-top: 3px solid var(--guld);
}
.sidefod a,
.sidefod .linkknap { color: var(--tekst-paa-bordeaux); }
.sidefod a:hover { color: var(--guld-lys); }
.sidefod__navn { font-family: var(--skrift-logo); font-size: 2.6rem; line-height: 1.1; letter-spacing: 0.01em; }
.sidefod__indre { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .sidefod__indre { grid-template-columns: repeat(3, auto); justify-content: space-between; }
}
.sidefod__navn { margin: 0; }
/* Navnet i sidefoden er et link til toppen (11. okt. 2026): samme udseende som før, hover i lys guld (7,3:1), mindst 44 px høj */
.sidefod__navn a { display: inline-flex; align-items: center; min-height: var(--tryk-min); text-decoration: none; color: var(--tekst-paa-bordeaux); }
.sidefod__navn a:hover { color: var(--guld-lys); }
/* Great Vibes bruges kun til logoet og Lindas egen stemme (citatet i #om), ikke til taglinen. */
.sidefod__tagline { font-size: 1rem; font-weight: 300; letter-spacing: 0.02em; margin: 0.25rem 0 0; }
.sidefod address { font-style: normal; }
.sidefod__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; align-content: start; }
/* Telefon: links og knappen i sidefoden er mindst 44 px høje, så de er lette at ramme med en finger. */
@media (max-width: 56rem) {
  .sidefod__indre { gap: 1.5rem; }
  .sidefod__links { gap: 0; }
  .sidefod__links a,
  .sidefod__links .linkknap { display: inline-flex; align-items: center; min-height: var(--tryk-min); }
  .sidefod address a { display: inline-flex; align-items: center; min-height: var(--tryk-min); }
}

/* Cookiebanner */
.samtykke {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  max-width: 40rem;
  margin-inline: auto;
  /* Ved 200 % zoom eller en lav skærm må banneret ikke blive højere end skærmen. */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--bund);
  color: var(--tekst);
  border: 2px solid var(--bordeaux-moerk);
  border-top: 4px solid var(--guld);
  border-radius: var(--radius);
  box-shadow: 0 0.5rem 2rem rgba(70, 30, 30, 0.35);
}
.samtykke__indre { padding: 1.25rem 1.5rem; }
.samtykke__titel { font-size: 1.6rem; margin-bottom: 0.5rem; }
.samtykke__titel::after { display: none; }
.samtykke p { font-size: 0.98rem; }
.samtykke__knapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
/* Lave eller smalle skærme: kompakt banner, så det dækker mindst muligt (knapperne er stadig mindst 44 px høje). */
@media (max-width: 40rem), (max-height: 40rem) {
  .samtykke { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; max-height: calc(100vh - 1rem); }
  .samtykke__indre { padding: 0.75rem 1rem; }
  .samtykke__titel { font-size: 1.3rem; margin-bottom: 0.25rem; }
  .samtykke p { font-size: 0.9rem; margin-bottom: 0.5rem; }
}
/* Accept og afvis ser ens ud – ingen af dem skubbes frem */
.knap--valg { background: var(--bordeaux-moerk); border-color: var(--bordeaux-moerk); color: var(--bund); width: 100%; }
.knap--valg:hover { background: var(--tekst-moerkere); border-color: var(--tekst-moerkere); color: var(--hvid); }

/* Fast "Bliv kontaktet"-knap på mobil.
   Har hidden-attributten i HTML, så den aldrig vises uden JavaScript. main.js fjerner hidden på smalle skærme
   og styrer .er-synlig. Ligger under header (50) og cookiebanner (90), og main.js skjuler den, mens banneret er åbent. */
.fast-knap[hidden] { display: none; }
.fast-knap {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  max-width: 24rem;
  margin-inline: auto;
  box-shadow: 0 0.35rem 1.25rem rgba(70, 30, 30, 0.4);
  transform: translateY(calc(100% + 2rem));
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.15s, border-color 0.15s;
}
.fast-knap.er-synlig {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s, background-color 0.15s, border-color 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .fast-knap, .fast-knap.er-synlig { transform: none; transition: none; }
}
@media (min-width: 56.01rem) {
  .fast-knap { display: none !important; }
}
/* Luft i bunden, mens knappen vises, så den ikke dækker sidens sidste indhold. */
.har-fast-knap .sidefod { padding-bottom: calc(3rem + 5rem + env(safe-area-inset-bottom, 0px)); }

/* Fejlside fra kontakt.php uden JavaScript */
.fejlside { max-width: var(--smal-bredde); margin: 0 auto; padding: 4rem 1rem; }

/* BLOMSTER I SIDERNE (12. okt. 2026): fra 78rem (margenen er mindst ca. 48 px) har hver sektion 2 tegninger i de lodrette sider,
   en til venstre ved 22 % og en til højre ved 66 % af sektionens højde. Samme tegninger, guld og opacitet som i resten af
   systemet, ingen rotation. Siderne skifter pr. sektion: ulige sektioner (forside, Jeres fest, Kvalitet, Kontakt) har pion til
   venstre og gren til højre, lige sektioner (Hvem er jeg?, Dekorationer, Forløb, Spørgsmål) omvendt. Tegningerne stikker
   op til 60 % ind over skærmkanten (afskåret), så der ved 1280 px (margen 64 px) vises ca. 56 px og ved brede skærme hele
   tegningen (højst --s2 = 1,6 × --s) ved siden af indholdet. --mx er margenen (FAQ'en er smal og har --m2). Under 78rem (tablet
   og telefon) bruges kun bånd i top-/bundluften. */
@media (min-width: 78rem) {
  .hero, .sektion {
    --mx: var(--m);
    --s3: max(0px, min(var(--s2), calc((var(--mx) - 0.5rem) / 0.4)));          /* bredde: 40 % af tegningen vises ved smal margen */
    --sk: max(calc(var(--s3) * -0.6), calc(var(--mx) - var(--s3) - 0.5rem));   /* kantafstand: højst 60 % afskåret, aldrig ind over indholdet */
  }
  #spoergsmaal { --mx: var(--m2); }
  .hero {
    background-image: var(--d-pion), var(--d-gren), var(--d-pion-ned), var(--d-pion), var(--d-gren),
      radial-gradient(ellipse 55% 90% at 88% 25%, rgba(241, 227, 218, 0.95), transparent 70%),
      linear-gradient(180deg, var(--bund) 0%, #F4ECDD 100%);
    background-position:
      left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)),
      right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
      left 42% top calc(var(--bt-top) - var(--s-top)),
      left var(--sk) top 22%, right var(--sk) top 66%, 0 0, 0 0;
    background-size: var(--s) auto, var(--s) auto, var(--s-top) auto, var(--s3) auto, var(--s3) auto, auto, auto;
  }
  #om {
    background-image: var(--d-gren), var(--d-gren), var(--d-pion);
    background-position: right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92), left var(--sk) top 22%, right var(--sk) top 66%;
    background-size: var(--s) auto, var(--s3) auto, var(--s3) auto;
  }
  #fester {
    background-image: var(--d-pion), var(--d-pion), var(--d-gren);
    background-position: left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)), left var(--sk) top 22%, right var(--sk) top 66%;
    background-size: var(--s) auto, var(--s3) auto, var(--s3) auto;
  }
  #dekorationer {
    background-image: var(--d-gren), var(--d-gren), var(--d-pion);
    background-position: right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92), left var(--sk) top 22%, right var(--sk) top 66%;
    background-size: var(--s) auto, var(--s3) auto, var(--s3) auto;
  }
  #holdbare {
    background-image: var(--d-pion), var(--d-gren), var(--d-gren-ned), var(--d-pion), var(--d-gren);
    background-position:
      left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)),
      right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
      right max(1rem, var(--m)) top calc(var(--bt) - var(--s) * 0.92),
      left var(--sk) top 22%, right var(--sk) top 66%;
    background-size: var(--s) auto, var(--s) auto, var(--s) auto, var(--s3) auto, var(--s3) auto;
  }
  #forloeb {
    background-image: var(--d-gren), var(--d-gren), var(--d-pion);
    background-position: right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92), left var(--sk) top 22%, right var(--sk) top 66%;
    background-size: var(--s) auto, var(--s3) auto, var(--s3) auto;
  }
  #kontakt {
    background-image: var(--d-pion), var(--d-pion), var(--d-gren);
    background-position: left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)), left var(--sk) top 22%, right var(--sk) top 66%;
    background-size: var(--s) auto, var(--s3) auto, var(--s3) auto;
  }
  #spoergsmaal {
    background-image: var(--d-gren), var(--d-pion), var(--d-gren), var(--d-pion);
    background-position:
      right max(1rem, var(--m)) bottom calc(var(--bt) - var(--s) * 0.92),
      left max(1rem, var(--m)) bottom calc(var(--bt) - var(--s)),
      left var(--sk) top 22%, right var(--sk) top 66%;
    background-size: var(--s) auto, var(--s) auto, var(--s3) auto, var(--s3) auto;
  }
}

/* Logo på de smalleste telefoner (320 px): mindre, så logo og menuknap står på én linje */
@media (max-width: 20rem) {
  .logo { font-size: 1.5rem; }
}