/* ---------- Landingssider (sept. 2026, Sara/Line/Oliver) ---------- */
/* /aula, /dbu, /holdsport, /gammel-ipad, /bedsteforaeldre, /deleboern, /vaeg
   og /holdleder bygger på forsidens klasser i style.css (Forside 2.0/3.0).
   Her står KUN det, forsiden ikke har: siden som almindeligt dokument (ikke
   forsidens faste lag), kildemærker og fremhævning i mini-tavlen, kun-se-
   bjælken, iPad-rammen, to-hjem-visningen, den sekundære knap og et par
   små bokse. Ingen nye farver: alt er forsidens tokens og de samme hex. */

/* Forsidens .welcome er et fast lag oven på tavlen (position: fixed). En
   landingsside har ingen tavle nedenunder, så den er et almindeligt dokument:
   body ruller, ankre og skærmbilleder virker som på enhver anden side. */
html.landing body { background: #f4efe7; height: auto; min-height: 100%; }
.landing .welcome { position: static; inset: auto; z-index: auto; overflow: clip; min-height: 100vh; }
/* Landingssidernes H1 er længere end forsidens og har to led; lidt mindre, så den bliver på 2–3 linjer på en bred skærm. */
.landing .hero .marketing-h1 { font-size: clamp(30px, 3.1vw, 44px); }
.landing .marketing-fod { width: 100%; }
/* De tre indvendinger står som kort (samme .fordel som forsiden), men
   overskriften er et citat og må gerne fylde to linjer. */
.indvendinger .fordel h2 { font-size: 18px; line-height: 1.3; }
.indvendinger .fordel p { font-size: 15px; }
.fordel code, .landing-boks code { overflow-wrap: anywhere; }

/* Sekundær handling ved siden af knappen (fx "Tjek jeres iPad på 10 sekunder"). */
.landing-sekundaer {
  display: inline-flex; align-items: center; min-height: 54px; padding: 0 1.3em; border-radius: 999px;
  border: 1.5px solid rgba(44, 111, 111, .45); background: rgba(255, 255, 255, .75);
  color: #2c6f6f; font-weight: 700; font-size: 16px; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.landing-sekundaer:hover { border-color: #2c6f6f; background: #fff; }
.landing-sekundaer:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 720px) { .landing-sekundaer { width: 100%; justify-content: center; } }

/* Kildemærke i mini-tavlen: "Aula", "DBU", "Holdsport" i hjørnet af en aftale.
   Kun tekst, aldrig logo (aula-og-partnere.md). Skjules ikke på telefonen:
   det er sidens bevis. */
.mt-event .t { flex-wrap: wrap; row-gap: .15em; }
.mt-kilde {
  margin-left: auto; padding: .05em .55em; border-radius: 999px; line-height: 1.5;
  font-size: .82em; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--mt-accent, #0a7272) 10%, transparent); color: var(--mt-accent-text, #0a7272);
}
/* Den kalender, siden handler om, får en tydeligere kant (data-fremhaev sættes i HTML). */
.mini-tavle[data-fremhaev] .mt-event.mt-fremhaev { box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--mt-accent) 40%, transparent); }
.mini-tavle[data-fremhaev] .mt-event.mt-fremhaev .mt-kilde { background: var(--mt-accent); color: #fff; }
.mini-tavle[data-fremhaev="dbu"] .mt-event.mt-fremhaev .mt-kilde, .mini-tavle[data-fremhaev="holdsport"] .mt-event.mt-fremhaev .mt-kilde { background: #b4541f; }
.mini-tavle[data-fremhaev="dbu"] .mt-event.mt-fremhaev, .mini-tavle[data-fremhaev="holdsport"] .mt-event.mt-fremhaev { box-shadow: inset 0 0 0 .1em rgba(180, 84, 31, .4); }
@media (max-width: 600px) { .mt-idag .mt-kilde { margin-left: 0; } }

/* Kun-se-bjælken øverst i mini-tavlen (/bedsteforaeldre): det, mormor ser. */
.mt-kunse {
  flex: none; display: flex; align-items: center; gap: .5em; margin: -.3em -.4em .1em; padding: .35em .8em;
  border-radius: 999px; background: color-mix(in srgb, var(--mt-accent) 12%, var(--mt-panel)); color: var(--mt-accent-text);
  font-size: .85em; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; align-self: flex-start;
}
.mt-kunse svg { width: 1.3em; height: 1.3em; }
.mt-kunse-hvem { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mt-soft); }
.mt-kunse-hvem::before { content: '·'; margin-right: .5em; }

/* iPad-rammen (/gammel-ipad): 4:3, tykkere kant og en hjemknap, så tavlen
   ligner det, den er. Overstyrer forsidens 16:9-ramme, også på telefonen. */
.hero-tavle-ramme.ramme-ipad {
  aspect-ratio: 4 / 3; padding: 22px 16px 34px; border-radius: 28px;
  background: linear-gradient(160deg, #3b424c, #1c2129);
  box-shadow: 0 40px 80px rgba(29, 44, 48, .26), 0 12px 24px rgba(29, 44, 48, .12), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 3px #0f1318;
}
.ramme-ipad .mini-tavle { border-radius: 6px; font-size: 2.2cqw; }
.ipad-knap {
  position: absolute; left: 50%; bottom: 8px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: #0f1318; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); pointer-events: none; z-index: 2;
}
@media (max-width: 600px) {
  .hero-tavle-ramme.ramme-ipad { padding: 16px 12px 28px; border-radius: 22px; }
  .ramme-ipad .mini-tavle { font-size: 3cqw; }
  .ipad-knap { width: 14px; height: 14px; margin-left: -7px; bottom: 7px; }
}
/* I 4:3 på en bred skærm er der plads til alle seks dage; forsidens 16:9 skjuler de sidste tre på telefonen. */
@media (min-width: 601px) { .ramme-ipad .mt-uge { grid-template-rows: repeat(2, minmax(0, 1fr)); } }

/* To hjem (/deleboern): to små tavler side om side med Emmas aftaler ens i
   begge, og resten af familiens aftaler mærket "deles ikke". Ren HTML/CSS. */
.to-hjem { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; position: relative; padding-bottom: 26px; }
.hjem {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; border-radius: 18px;
  background: #fff; box-shadow: 0 30px 60px rgba(29, 44, 48, .16), 0 4px 10px rgba(29, 44, 48, .08), 0 0 0 1px rgba(29, 44, 48, .05);
  text-align: left; color: var(--ink);
}
.hjem-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; color: #1d2c30; }
.hjem-h svg { width: 20px; height: 20px; color: #2c6f6f; flex: none; }
.hjem-h > span { white-space: nowrap; }
.hjem-h small { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.hj-event {
  --dot: var(--ink-soft); display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: #faf7f2; border-left: 4px solid var(--dot); border-radius: 8px; padding: 6px 9px;
}
.hj-event .t { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-size: 11.5px; font-weight: 650; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hj-event .n { font-size: 13.5px; font-weight: 560; line-height: 1.25; }
.hj-event .mt-kilde { font-size: 9.5px; --mt-accent: #0a7272; --mt-accent-text: #0a7272; }
.hj-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #b4541f; padding: .1em .55em; border-radius: 999px; }
.hj-flyttet { background: #f9efe8; }
.hj-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b5f52; background: #efe8de; padding: .1em .55em; border-radius: 999px; }
.hj-privat { border-left-style: dashed; background: #f3efe8; }
.hj-privat .n { color: var(--ink-soft); font-weight: 500; }
.hj-egen .hj-tag { color: #2d4f8a; background: #e5ecfa; }
.hjem-link { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; color: #2c6f6f; font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1.2; }
.hjem-link svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(44, 111, 111, .12); }
.to-hjem .hero-callouts { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; grid-column: 1 / -1; margin: -6px 0 0; pointer-events: auto; }
.to-hjem .callout { position: static; white-space: normal; }
@media (max-width: 520px) {
  .to-hjem { grid-template-columns: minmax(0, 1fr); }
  .hjem-link { flex-direction: row; width: auto; justify-self: center; }
  .hjem-link svg { transform: rotate(90deg); }
}

/* Holdleder: teksten til forældrene som bevis i heroens højre kolonne. */
.hero-side { position: relative; margin: 0; }
.kopi-kort { background: #fff; border-radius: 20px; padding: 18px 20px 20px; box-shadow: 0 30px 60px rgba(29, 44, 48, .16), 0 4px 10px rgba(29, 44, 48, .08), 0 0 0 1px rgba(29, 44, 48, .05); text-align: left; }
.kopi-kort-h { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2c6f6f; }
.kopi { margin: 0; padding: 14px 16px; border-radius: 12px; background: #f5f8f7; border: 1px dashed #b9c9c7; white-space: pre-wrap; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.plads { background: #fbeed8; color: #7a4700; padding: 0 4px; border-radius: 4px; }
button.marketing-cta { appearance: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
button.marketing-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 899px) { .hero-side { margin-top: 8px; } }

/* Små bokse under folden (samme ramme som Aula-klyngen på forsiden). */
.landing-boks h3 { margin: 0 0 6px; font-size: 16px; font-weight: 750; }
.landing-boks > p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.landing-boks > p strong { color: var(--ink); }
.landing-boks a { color: var(--accent); font-weight: 650; }
.landing-trin, .landing-liste, .landing-boks ul { margin: 0 0 10px; padding-left: 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.landing-trin li + li, .landing-liste li + li, .landing-boks ul li + li { margin-top: 8px; }
.landing-trin strong { color: var(--ink); }
.landing-to-kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; margin-bottom: 6px; }
.landing-boks code { font-size: 14px; background: #f5f8f7; padding: 1px 6px; border-radius: 6px; }

/* Ro først. */
@media (prefers-reduced-motion: reduce) {
  .landing-sekundaer { transition: none; }
}

/* Fotos (sept. 2026): ét foto lige under heroen på hver landingsside, samme
   fotoserie som forsidens hero. Selve billedet (.foto: runde hjørner, blød
   skygge) står i style.css. Liggende fotos fylder bredden med billedteksten
   under; stående står ved siden af teksten på en bred skærm og centreret over
   den på telefonen. loading="lazy" + width/height, så intet hopper. */
.landing-foto { width: 100%; max-width: 980px; margin: 0 auto; display: grid; gap: 14px; text-align: left; }
.landing-foto picture { display: block; }
.landing-foto figcaption { max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--f-soft); }
.landing-foto-staaende { max-width: 860px; }
.landing-foto-staaende picture { width: 100%; max-width: 400px; justify-self: center; }
@media (min-width: 761px) {
  .landing-foto-staaende { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 44px; align-items: center; }
  .landing-foto-staaende figcaption { font-family: var(--f-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--f-ink); }
}