/* Den Lille Musikskole — design.
   Palet, font og kant-stil afledt af bogen "Sommerfuglens kys" (se design/).
   Varmt, lyst og roligt udtryk: cremet papir, varm blæk-tekst, sommerfugl-rød
   accent og emerald-grøn sekundær. Overskrifter i Fraunces, brødtekst i Spectral
   — begge SELVHOSTede som woff2 (CSP 'self', ingen CDN). UI (nav/knapper/felter)
   forbliver i system-sans for skarphed. Kant-stilen ligger nederst i filen. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 400 650; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;
  --dlm-bg: #FBF6EC;
  --dlm-surface: #FFFCF6;
  --dlm-tint: #F3E9D8;
  --dlm-ink: #271F16;
  --dlm-ink-soft: #6B563E;
  --dlm-accent: #B4501E;
  --dlm-accent-2: #2F6F5A;
  --dlm-gold: #C0922F;
  --dlm-line: #E7DAC2;
  --dlm-shadow: 0 18px 40px -22px rgba(39, 31, 22, 0.40);
  --dlm-radius: 16px;
  --dlm-maxw: 1140px;
  /* Sommerfugle-vingens udvidede accenter (illustrativ brug: tags, ikoner) */
  --dlm-bf-red: #B4501E; --dlm-bf-orange: #C56A24; --dlm-bf-gold: #D8A322;
  --dlm-bf-leaf: #5E7E2E; --dlm-bf-emerald: #2F6F50; --dlm-bf-teal: #2E7488;
  --dlm-bf-blue: #2E5F84; --dlm-bf-violet: #7C5A8E; --dlm-bf-brown: #6B563E;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-body: "Spectral", Georgia, ui-serif, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--dlm-bg);
  color: var(--dlm-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--dlm-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: color-mix(in srgb, var(--dlm-accent) 80%, black); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; font-weight: 600; color: var(--dlm-ink); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 .5em; }
h3 { font-size: 1.25rem; margin: 0 0 .35em; }
p { margin: 0 0 1em; }

.dlm-container { width: 100%; max-width: var(--dlm-maxw); margin: 0 auto; padding: 0 24px; }
.dlm-narrow { max-width: 760px; }

/* Skip-link til tastatur-/skærmlæser-brugere: skjult indtil fokus. */
.dlm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--dlm-accent); color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.dlm-skip:focus { left: 0; }

/* ---------- Sticky topbar (kampagnebanner + header) ---------- */
.dlm-topbar { position: sticky; top: 0; z-index: 100; }
.dlm-banner {
  display: block; text-align: center; text-decoration: none;
  background: var(--dlm-accent); color: #fff;
  font-weight: 600; font-size: .95rem; line-height: 1.35; letter-spacing: .01em;
  padding: 9px 18px;
}
.dlm-banner:hover { background: color-mix(in srgb, var(--dlm-accent) 86%, black); color: #fff; }

/* ---------- Header ---------- */
.dlm-header {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--dlm-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--dlm-line);
}
.dlm-bar { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.dlm-brand { display: inline-flex; align-items: center; text-decoration: none; }
.dlm-logo { display: inline-grid; place-items: center; line-height: 0; }
.dlm-logo img { display: block; height: 42px; width: auto; }
/* Det originale logo er en hvid wordmark → læg den på en terrakotta-chip, så den
   er synlig på lyse baggrunde (og fortsat på mørke). */
.dlm-logo-chip {
  background: var(--dlm-accent); padding: 7px 13px; border-radius: 12px;
  box-shadow: var(--dlm-shadow);
}
.dlm-footer-brand .dlm-logo img { height: 54px; }
.dlm-nav { display: flex; align-items: center; gap: 26px; }
.dlm-navlink { color: var(--dlm-ink); text-decoration: none; font-weight: 500; font-size: 1rem; position: relative; padding: 6px 0; }
.dlm-navlink:hover { color: var(--dlm-accent); }
.dlm-navlink.is-active { color: var(--dlm-accent); }
.dlm-navlink.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--dlm-accent); border-radius: 2px;
}
.dlm-navtoggle, .dlm-burger { display: none; }

/* ---------- Buttons ---------- */
.dlm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .08s ease, background .15s ease, color .15s ease;
}
.dlm-btn:active { transform: translateY(1px); }
.dlm-btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.dlm-btn-primary { background: var(--dlm-accent); color: #fff; }
.dlm-btn-primary:hover { background: color-mix(in srgb, var(--dlm-accent) 86%, black); color: #fff; }
.dlm-btn-ghost { background: transparent; color: var(--dlm-ink); border-color: var(--dlm-ink); }
.dlm-btn-ghost:hover { background: var(--dlm-ink); color: #fff; }
.dlm-nav-cta { padding: 9px 18px; }

/* ---------- Hero ---------- */
.dlm-hero {
  position: relative; color: #fff; isolation: isolate;
  background: var(--dlm-ink) center / cover no-repeat;
  background-image: var(--hero-img, none);
  padding: clamp(72px, 14vw, 150px) 0 clamp(56px, 10vw, 110px);
}
.dlm-hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(33,28,43,.34) 0%, rgba(33,28,43,.62) 100%);
}
.dlm-hero:not([style]) .dlm-hero-veil,
.dlm-hero[style*="none"] .dlm-hero-veil {
  background: linear-gradient(120deg, var(--dlm-ink), var(--dlm-accent-2));
}
.dlm-hero-inner { max-width: 820px; }
.dlm-hero-title { color: #fff; margin-bottom: .25em; text-shadow: 0 2px 20px rgba(0,0,0,.28); }
.dlm-hero-lead { font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: rgba(255,255,255,.94); margin-bottom: 1.4em; max-width: 40ch; }
.dlm-eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700;
  color: var(--dlm-gold); margin: 0 0 1em;
}
.dlm-hero .dlm-eyebrow { color: #f3d28c; }

/* ---------- Sections ---------- */
.dlm-section { padding: clamp(48px, 8vw, 92px) 0; }
.dlm-section-tint { background: var(--dlm-tint); }
.dlm-section-head { max-width: 640px; margin: 0 auto clamp(28px, 5vw, 52px); text-align: center; }
.dlm-section-head p { color: var(--dlm-ink-soft); font-size: 1.1rem; margin: 0; }
.dlm-lead { font-size: 1.22rem; color: var(--dlm-ink-soft); }
.dlm-lead p:first-child { margin-top: 0; }

.dlm-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.dlm-split-rev > .dlm-media { order: 2; }
.dlm-media {
  background: var(--dlm-tint) center / cover no-repeat;
  border-radius: var(--dlm-radius); min-height: 340px; box-shadow: var(--dlm-shadow);
}

.dlm-quote { font-family: var(--font-display); }
.dlm-quote blockquote {
  margin: 0; font-size: 1.5rem; line-height: 1.4; color: var(--dlm-accent-2);
  border-left: 4px solid var(--dlm-gold); padding-left: 22px; font-style: italic;
}

/* ---------- Pillars ---------- */
.dlm-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dlm-pillar {
  background: var(--dlm-surface); border: 1px solid var(--dlm-line);
  border-radius: var(--dlm-radius); padding: 28px; box-shadow: var(--dlm-shadow);
}
.dlm-pillar h3 { color: var(--dlm-accent); font-size: 1.4rem; }
.dlm-pillar-body { color: var(--dlm-ink-soft); font-size: .98rem; }

/* ---------- Cards (forløb) ---------- */
.dlm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dlm-card {
  display: flex; flex-direction: column; background: var(--dlm-surface);
  border: 1px solid var(--dlm-line); border-radius: var(--dlm-radius); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--dlm-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.dlm-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -24px rgba(33,28,43,.55); }
.dlm-card-img { height: 190px; background: var(--dlm-tint) center / cover no-repeat; }
.dlm-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.dlm-card-age { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dlm-accent-2); }
.dlm-card-body h3 { margin: .3em 0 .4em; }
.dlm-card-body p { color: var(--dlm-ink-soft); font-size: .98rem; flex: 1; }
.dlm-card-more { color: var(--dlm-accent); font-weight: 600; margin-top: 12px; }

/* ---------- Teachers ---------- */
.dlm-teachers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dlm-teacher {
  display: flex; gap: 18px; align-items: center; background: var(--dlm-surface);
  border: 1px solid var(--dlm-line); border-radius: var(--dlm-radius); padding: 20px 22px;
}
.dlm-teacher-avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600;
  background: color-mix(in srgb, var(--dlm-accent-2) 16%, white); color: var(--dlm-accent-2); font-size: 1.15rem;
}
.dlm-teacher h3 { margin: 0; font-size: 1.1rem; }
.dlm-teacher-role { margin: 2px 0 4px; color: var(--dlm-accent); font-weight: 600; font-size: .92rem; }
.dlm-teacher-teaches { color: var(--dlm-ink-soft); font-size: .9rem; }

/* ---------- FAQ ---------- */
.dlm-faq { display: flex; flex-direction: column; gap: 12px; }
.dlm-faq-item {
  background: var(--dlm-surface); border: 1px solid var(--dlm-line);
  border-radius: 12px; padding: 4px 20px;
}
.dlm-faq-item summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.dlm-faq-item summary::-webkit-details-marker { display: none; }
.dlm-faq-item summary::after { content: "+"; color: var(--dlm-accent); font-size: 1.4rem; line-height: 1; }
.dlm-faq-item[open] summary::after { content: "–"; }
.dlm-faq-a { padding-bottom: 14px; color: var(--dlm-ink-soft); }
.dlm-faq-a p:last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */
/* Formular i fuld bredde; "Kontakt direkte" placeres UNDER (så hold-feltets fulde
   tekst kan ses). Stables altid lodret — også på små telefoner. */
.dlm-contactgrid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.dlm-form { display: flex; flex-direction: column; gap: 16px; }
.dlm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dlm-field { display: flex; flex-direction: column; gap: 6px; }
.dlm-field > span { font-weight: 600; font-size: .92rem; }
.dlm-field input, .dlm-field select, .dlm-field textarea {
  font: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--dlm-line);
  border-radius: 10px; background: var(--dlm-surface); color: var(--dlm-ink); width: 100%;
}
.dlm-field input:focus, .dlm-field select:focus, .dlm-field textarea:focus {
  outline: none; border-color: var(--dlm-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dlm-accent) 18%, transparent);
}
.dlm-field-err { color: var(--dlm-accent); font-size: .88rem; font-weight: 600; }
.dlm-form-note { color: var(--dlm-ink-soft); font-size: .85rem; }
/* Brugernavn: read-only input + »Ændr«-knap side om side */
.dlm-username-row { display: flex; gap: 10px; align-items: stretch; }
.dlm-username-row input { flex: 1 1 auto; }
.dlm-username-row .dlm-btn { flex: 0 0 auto; white-space: nowrap; }
.dlm-field input[readonly] { background: var(--dlm-tint); color: var(--dlm-ink-soft); }
/* Hold-vælgeren er låst, indtil fødselsdatoen er skrevet ind (sættes af JS). */
.dlm-field select:disabled { opacity: .55; cursor: not-allowed; background: var(--dlm-tint); }
.dlm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Fødselsdato: kalender-vælger oven på dd/mm/åååå-tekstfeltet ---- */
.dlm-date-wrap { position: relative; display: block; }
.dlm-date-wrap > input[name="child_birthdate"] { padding-right: 46px; }
.dlm-date-pick { position: absolute; top: 0; right: 0; height: 100%; width: 42px;
  display: grid; place-items: center; cursor: pointer; }
.dlm-date-icon { width: 20px; height: 20px; color: var(--dlm-ink-soft); pointer-events: none; }
.dlm-date-pick:hover .dlm-date-icon { color: var(--dlm-accent); }
.dlm-date-native { position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; min-width: 0; }
.dlm-date-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer; }

/* ---- Lille bekræft-modal (privat email) ---- */
.dlm-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: grid;
  place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--dlm-ink) 55%, transparent);
  animation: dlm-modal-fade .15s ease both; }
.dlm-modal { width: 100%; max-width: 430px; background: var(--dlm-surface); color: var(--dlm-ink);
  border: 1.5px solid var(--dlm-line); border-radius: var(--dlm-radius); box-shadow: var(--dlm-shadow);
  padding: 28px 30px; font-family: var(--font-sans);
  animation: dlm-modal-rise .18s cubic-bezier(.2,.8,.3,1) both; }
.dlm-modal h3 { font-family: var(--font-display); font-size: 1.32rem; margin: 0 0 10px; line-height: 1.2; }
.dlm-modal p { margin: 0 0 22px; color: var(--dlm-ink-soft); line-height: 1.55; }
.dlm-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
@keyframes dlm-modal-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dlm-modal-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .dlm-modal-overlay, .dlm-modal { animation: none } }
.dlm-contactside {
  background: var(--dlm-tint); border-radius: var(--dlm-radius); padding: 26px 28px;
}
.dlm-contactside h3 { color: var(--dlm-accent-2); }
.dlm-contactside p, .dlm-contactside address { margin: 0 0 .5em; font-style: normal; }

.dlm-confirm { text-align: center; padding: 24px 0; }
.dlm-confirm-mark {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--dlm-accent-2); color: #fff; font-size: 2rem;
}

/* ---------- Prose / dashboard ---------- */
.dlm-prose h2 { margin-top: 1.4em; }
.dlm-prose ul { padding-left: 1.2em; }
.dlm-prose li { margin-bottom: .4em; }
.dlm-dash-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.dlm-dash-list a {
  display: block; padding: 14px 18px; background: var(--dlm-surface);
  border: 1px solid var(--dlm-line); border-radius: 10px; text-decoration: none; font-weight: 600;
}

/* ---------- Holdplan (fag-undersider) ---------- */
.dlm-holdliste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dlm-hold {
  background: var(--dlm-surface); border: 1px solid var(--dlm-line);
  border-radius: var(--dlm-radius); padding: 20px 22px;
}
.dlm-hold-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dlm-hold-head h3 { margin: 0; }
.dlm-hold-age { color: var(--dlm-ink-soft); font-size: .85rem; white-space: nowrap; }
.dlm-hold-for { color: var(--dlm-ink-soft); font-size: .92rem; margin: 4px 0 0; }
.dlm-hold-slots { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.dlm-hold-slots li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--dlm-line);
}
.dlm-slot-when { font-weight: 600; flex: 1 1 auto; }
.dlm-slot-info { color: var(--dlm-accent-2); font-weight: 600; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.dlm-slot-info:hover { text-decoration: underline; }
.dlm-slot-link { font-weight: 600; white-space: nowrap; }
/* Lille knap-variant (TILMELD i hold-rækker) */
.dlm-btn-sm { padding: 8px 16px; font-size: .9rem; }
.dlm-slot-closed { color: var(--dlm-ink-soft); font-style: italic; font-weight: 600; }
.dlm-slot-start {
  color: var(--dlm-ink-soft); font-size: .85rem; font-weight: 600; white-space: nowrap;
  background: var(--dlm-tint); padding: 2px 10px; border-radius: 999px;
}
.dlm-slot-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 18px; }
.dlm-slot-text p { margin: 0 0 .7em; }
.dlm-slot-text p:last-child { margin-bottom: 0; }

/* ---------- Admin: tilkendegivelser ---------- */
.dlm-admin-table { width: 100%; border-collapse: collapse; margin: 6px 0 0; font-size: .95rem; }
.dlm-admin-table th, .dlm-admin-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--dlm-line); vertical-align: top;
}
.dlm-admin-table th { color: var(--dlm-ink-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.dlm-admin-table td { overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.dlm-footer { background: var(--dlm-ink); color: #e8e2ee; margin-top: 0; padding: 60px 0 28px; }
.dlm-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.dlm-footer h3 { color: #fff; font-size: 1.05rem; margin-bottom: .7em; }
.dlm-footer a { color: #f0c9b9; display: block; margin-bottom: .4em; text-decoration: none; overflow-wrap: anywhere; }
.dlm-footer a:hover { color: #fff; }
.dlm-footer-brand { font-family: var(--font-display); font-size: 1.3rem; color: #fff; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.dlm-footer-addr { font-style: normal; color: #c9c2d2; }
.dlm-footer-col p { margin: 0 0 .4em; color: #c9c2d2; overflow-wrap: anywhere; }
.dlm-social { margin-top: 12px; }
.dlm-footer-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; color: #9d96aa; font-size: .9rem; }

/* ---------- Floating edit button ---------- */
.dlm-editbtn {
  position: fixed; right: 18px; bottom: 18px; z-index: 1000;
  background: var(--dlm-ink); color: #fff; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.5);
}
.dlm-editbtn:hover { background: var(--dlm-accent); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .dlm-split, .dlm-contactgrid { grid-template-columns: 1fr; }
  .dlm-split-rev > .dlm-media { order: 0; }
  .dlm-pillars, .dlm-cards, .dlm-teachers { grid-template-columns: 1fr; }
  .dlm-holdliste { grid-template-columns: 1fr; }
  .dlm-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .dlm-media { min-height: 240px; }

  .dlm-burger { display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .dlm-burger span { width: 26px; height: 2px; background: var(--dlm-ink); border-radius: 2px; }
  .dlm-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--dlm-bg); border-bottom: 1px solid var(--dlm-line);
    padding: 8px 24px 20px; max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .dlm-navtoggle:checked ~ .dlm-nav { max-height: 70vh; }
  .dlm-navlink { padding: 14px 0; border-bottom: 1px solid var(--dlm-line); }
  .dlm-nav-cta { margin-top: 14px; }
}

@media (max-width: 520px) {
  .dlm-field-row { grid-template-columns: 1fr; }
  body { font-size: 17px; }
}

/* ===========================================================================
   STORYBOOK-DESIGN — "Sommerfuglens kys"-paletten brugt BOLDT.
   Farvede bånd + vinge-farver pr. element + rene organiske SVG-bølgekanter
   (ingen pixel-displacement) + penselstrøg som motiv. Indhold altid skarpt.
   =========================================================================== */

/* UI-chrome i system-sans; brødtekst i Spectral. */
.dlm-banner, .dlm-nav, .dlm-navlink, .dlm-btn, .dlm-eyebrow, .dlm-card-age,
.dlm-hold-age, .dlm-form-note, .dlm-admin-table,
.dlm-field, .dlm-field input, .dlm-field select, .dlm-field textarea,
.dlm-footer-base { font-family: var(--font-sans); }

/* ---- Brush-underline under overskrifter: følger HVER linjes længde, også når
        overskriften ombrydes. Inline + box-decoration-break => penselstrøget
        klones og skaleres pr. linje (teksten ligger naturligt over baggrunden). ---- */
.dlm-section-head h2, .dlm-band h2 {
  display: inline;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding-bottom: .16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M6 10 C70 5 150 5 210 8 S280 12 294 7' fill='none' stroke='%23B4501E' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .30em;
}
/* På det mørke bånd: gult penselstrøg så det popper mod emerald. */
.dlm-band h2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M6 10 C70 5 150 5 210 8 S280 12 294 7' fill='none' stroke='%23E8B53A' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---- HERO: varm, branded overlay + ren cremet bølgekant i bunden ---- */
.dlm-hero .dlm-hero-veil {
  /* Neutral, varm mørkning (ingen farvestik) — kun til tekst-læsbarhed; billedet
     bevarer sine egne farver. (Tidligere emerald/terrakotta-veil gav grønt skær.) */
  background: linear-gradient(180deg, rgba(30,24,18,.30) 0%, rgba(30,24,18,.62) 100%);
}
.dlm-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0 28 C160 8 320 44 540 30 C760 16 980 46 1200 30 C1320 22 1400 30 1440 26 L1440 54 L0 54 Z' fill='%23FBF6EC'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

/* ---- Vibrante søjler (Hjerte/Krop/Hjerne) med hver sin vinge-farve ---- */
.dlm-pillars .dlm-pillar {
  border: 0; border-top: 5px solid var(--c, var(--dlm-accent));
  background: var(--dlm-surface); box-shadow: var(--dlm-shadow);
}
.dlm-pillars .dlm-pillar:nth-child(1) { --c: var(--dlm-bf-red); }
.dlm-pillars .dlm-pillar:nth-child(2) { --c: var(--dlm-bf-teal); }
.dlm-pillars .dlm-pillar:nth-child(3) { --c: var(--dlm-bf-leaf); }
.dlm-pillars .dlm-pillar h3 { color: var(--c); font-size: 1.5rem; }

/* ---- Forløbs-kort: farvede alders-tags + farvet hover/link ---- */
.dlm-cards .dlm-card .dlm-card-age {
  display: inline-block; align-self: flex-start; color: #fff;
  background: var(--c, var(--dlm-accent-2)); padding: 4px 12px; border-radius: 999px;
}
.dlm-cards .dlm-card:nth-child(1) { --c: var(--dlm-bf-violet); }
.dlm-cards .dlm-card:nth-child(2) { --c: var(--dlm-bf-teal); }
.dlm-cards .dlm-card:nth-child(3) { --c: var(--dlm-bf-orange); }
.dlm-cards .dlm-card:hover { border-color: var(--c, var(--dlm-accent)); }
.dlm-cards .dlm-card-more { color: var(--c, var(--dlm-accent)); }

/* ---- Farverige alders-pills på hold-listen (/alle-hold, /undervisning) ---- */
.dlm-holdliste .dlm-hold-head { align-items: center; }
.dlm-holdliste .dlm-hold-age {
  display: inline-block; color: #fff; background: var(--c, var(--dlm-accent-2));
  padding: 4px 12px; border-radius: 999px; font-weight: 700;
  font-size: .72rem; letter-spacing: .03em; white-space: nowrap;
}
/* Pille-farver: KUN kølige toner, så de ikke forveksles med den varme terrakotta
   TILMELD-knap (rød/orange udeladt bevidst). */
.dlm-holdliste .dlm-hold:nth-child(5n+1) { --c: var(--dlm-bf-teal); }
.dlm-holdliste .dlm-hold:nth-child(5n+2) { --c: var(--dlm-bf-leaf); }
.dlm-holdliste .dlm-hold:nth-child(5n+3) { --c: var(--dlm-bf-violet); }
.dlm-holdliste .dlm-hold:nth-child(5n+4) { --c: var(--dlm-bf-blue); }
.dlm-holdliste .dlm-hold:nth-child(5n+5) { --c: var(--dlm-bf-emerald); }

/* ---- BOLD farvebånd (Høreleg-sektionen): emerald, cremet tekst, bølgekanter,
        og citatet får et gult lodret penselstrøg (image #5-ønsket) ---- */
.dlm-band { position: relative; background: var(--dlm-bf-emerald); color: #FBF6EC; }
.dlm-band h2, .dlm-band h3, .dlm-band strong { color: #fff; }
.dlm-band p { color: rgba(255,255,255,.93); }
.dlm-band a { color: #F4D58A; }
.dlm-band::before, .dlm-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50px; z-index: 1;
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}
.dlm-band::before {
  top: -49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C180 8 380 42 600 26 C820 10 1020 44 1240 26 C1340 18 1400 28 1440 22 L1440 50 L0 50 Z' fill='%232F6F50'/%3E%3C/svg%3E");
}
.dlm-band::after {
  bottom: -49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C180 42 380 8 600 24 C820 40 1020 6 1240 24 C1340 32 1400 22 1440 28 L1440 0 L0 0 Z' fill='%232F6F50'/%3E%3C/svg%3E");
}
.dlm-band .dlm-quote blockquote {
  color: #fff; border: 0; padding-left: 30px; font-style: italic;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 120' preserveAspectRatio='none'%3E%3Cpath d='M8 6 C6 40 10 80 8 114' fill='none' stroke='%23E8B53A' stroke-width='6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left center / 16px 86% no-repeat;
}

/* ---- Bryd ALLE flade sektions-linjer: tonede sektioner får organiske
        bølgekanter (tint-farve) top+bund, så cream↔tint-overgange aldrig er en
        lige streg. Gælder alle sider. ---- */
.dlm-section-tint { position: relative; }
.dlm-section-tint > * { position: relative; z-index: 2; }
.dlm-section-tint::before, .dlm-section-tint::after {
  content: ""; position: absolute; left: 0; right: 0; height: 46px; z-index: 1;
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}
.dlm-section-tint::before {
  top: -45px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C180 8 380 42 600 26 C820 10 1020 44 1240 26 C1340 18 1400 28 1440 22 L1440 50 L0 50 Z' fill='%23F3E9D8'/%3E%3C/svg%3E");
}
.dlm-section-tint::after {
  bottom: -45px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C180 42 380 8 600 24 C820 40 1020 6 1240 24 C1340 32 1400 22 1440 28 L1440 0 L0 0 Z' fill='%23F3E9D8'/%3E%3C/svg%3E");
}
/* Sidste indholdssektion støder op til footeren (som selv har sin blæk-bølge)
   → drop tint-bølgen dér, så de to bølger ikke overlapper. */
#indhold > .dlm-section-tint:last-child::after { display: none; }

/* ---- FOOTER: dyb blæk med ren organisk bølget topkant ---- */
.dlm-footer { position: relative; }
.dlm-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 46px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C200 8 420 40 640 24 C860 8 1080 40 1300 24 C1370 18 1410 26 1440 22 L1440 46 L0 46 Z' fill='%23271F16'/%3E%3C/svg%3E") no-repeat top / 100% 100%;
}

/* ---- Genbrugeligt brush-utility (til editor-indhold m.m.) ---- */
.dlm-brush { display: inline-block; position: relative; z-index: 0; }
.dlm-brush::after {
  content: ""; position: absolute; left: -8px; right: -8px; bottom: -.12em; height: .34em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M6 10 C70 5 150 5 210 8 S280 12 294 7' fill='none' stroke='%23B4501E' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---------- Mørk indstilling (prefers-color-scheme: dark) ----------
   Respektér brugerens mørke browserindstilling med et varmt mørkt tema. Uden det
   force-darker browseren selv siden og lader de lyse bølge-SVG'er stå tilbage og
   glo. --dlm-ink flippes til lys tekst; de få steder hvor ink før var "den mørke
   farve" (hero/footer/ghost-knap/edit-knap) genpinnes til --dlm-dark. De cremede
   bølgekanter genfarves til de mørke sektionsfarver. Det emerald BOLD-bånd beholdes
   bevidst som farveblok i begge temaer. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --dlm-bg: #1B1712;
    --dlm-surface: #241D16;
    --dlm-tint: #2C2418;
    --dlm-ink: #F0E6D6;
    --dlm-ink-soft: #C3B39A;
    --dlm-accent-2: #4FA589;
    --dlm-gold: #D8AD52;
    --dlm-line: #382E22;
    --dlm-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
    --dlm-dark: #140F0A;        /* fast mørk til "mørke" dekorationer */
  }
  /* Links skal lyses op for at være læsbare på mørk baggrund (accent er ellers
     for mørk som tekstfarve; knapper beholder den mørkere accent + hvid tekst). */
  a { color: #E8895A; }
  a:hover { color: color-mix(in srgb, #E8895A 75%, white); }
  /* Genpin de steder hvor var(--dlm-ink) før var "den mørke farve". */
  .dlm-hero { background-color: var(--dlm-dark); }
  .dlm-hero:not([style]) .dlm-hero-veil,
  .dlm-hero[style*="none"] .dlm-hero-veil {
    background: linear-gradient(120deg, var(--dlm-dark), var(--dlm-accent-2));
  }
  .dlm-btn-ghost:hover { background: var(--dlm-ink); color: var(--dlm-dark); }
  .dlm-footer { background: var(--dlm-dark); }
  .dlm-editbtn { background: var(--dlm-dark); }
  /* Bølgekanter genfarves, så de matcher de mørke sektioner i stedet for at glo. */
  .dlm-hero::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0 28 C160 8 320 44 540 30 C760 16 980 46 1200 30 C1320 22 1400 30 1440 26 L1440 54 L0 54 Z' fill='%231B1712'/%3E%3C/svg%3E");
  }
  .dlm-section-tint::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C180 8 380 42 600 26 C820 10 1020 44 1240 26 C1340 18 1400 28 1440 22 L1440 50 L0 50 Z' fill='%232C2418'/%3E%3C/svg%3E");
  }
  .dlm-section-tint::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C180 42 380 8 600 24 C820 40 1020 6 1240 24 C1340 32 1400 22 1440 28 L1440 0 L0 0 Z' fill='%232C2418'/%3E%3C/svg%3E");
  }
  .dlm-footer::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C200 8 420 40 640 24 C860 8 1080 40 1300 24 C1370 18 1410 26 1440 22 L1440 46 L0 46 Z' fill='%23140F0A'/%3E%3C/svg%3E");
  }
}