/* ==========================================================
   Hilfe – hjemmeside
   Farverne er de samme som i appen (src/lib/theme.js → DESIGN_PALETTES)
   Se HÅNDBOG.md for hvor du ændrer hvad.
   ========================================================== */

/* Skrifttyperne ligger på vores egen server (fonts/), så den besøgendes IP-adresse ikke sendes til Google (GDPR).
   Begge er "variable" skrifttyper: én fil dækker alle tykkelser. Kun latinske tegn (inkl. æ ø å og ı). */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/playfair-display-latin.woff2) format("woff2");
}

:root {
  /* Orange (Solskin – Hilfes standardtema) */
  --orange: #F4853C;
  --orange-deep: #E2601C;
  --orange-light: #FFD280;
  --orange-pale: #FFE3AE;

  /* Himlen øverst på siderne (samme som appens SKY_COLORS.orange) */
  --sky-1: #FFCB80;
  --sky-2: #FFBA6A;
  --sky-3: #FFA95C;
  --sky-4: #FF9A50;

  /* Bakkerne i bunden af himlen */
  --hill-back: #FFD08A;
  --hill-front: var(--orange-pale);
  --hill-front-app: #F7853A;           /* den mørke bakke foran i appen (theme.js → HILL_COLORS.orange) */

  /* Hjertet og punktummet i "Hilfe." (lys, mørk) */
  --mark-light: #FFE6BF;
  --mark-dark: #E2601C;

  /* Pink (Skyet landskab) */
  --pink: #E84A82;
  --pink-deep: #D63B74;
  --pink-light: #FB7EA4;
  --pink-pale: #FDBFD3;

  /* Grøn (Natur og jord) */
  --green: #4CB872;
  --green-dark: #2C7F49;
  --green-mid: #8ED197;
  --green-pale: #DDE5CF;

  /* Lilla (månen) */
  --purple: #8B4CF0;

  --ink: #3a2a2a;
  --white: #fff;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 22px;
  --shadow: 0 18px 40px rgba(90, 40, 20, .18);
  --container: 1120px;

  /* Toppen er målt i mockuppens enhed: 1 % af skærmens bredde – men højst 11,5 px,
     så den holder op med at vokse på brede computerskærme (ret 11.5px for at gøre den større/mindre) */
  --u: min(1vw, 11.5px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 100px; }   /* menupunkterne lander med overskriften lige under den svævende menu */

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--orange-pale);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1.1em; }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
.narrow { max-width: 760px; }

/* ---------- Typografi ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--pink);
}
.display-light { color: var(--white); }
.display-green { color: var(--green); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.12;
  margin: 0 0 .7em;
}

.eyebrow { font-weight: 500; letter-spacing: .02em; margin-bottom: .6em; }
.muted { opacity: .85; font-size: .95rem; }

/* ---------- Ordmærket "Hilfe." (som i appen: HilfeWordmark.jsx) ---------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--white);
  margin: 0;
}
.wm-heart { position: relative; display: inline-block; width: 0; height: 0; filter: drop-shadow(.012em .02em .01em rgba(150, 70, 20, .28)); }
.wm-heart > span {
  position: absolute;
  width: .24em; height: .24em;
  left: -.252em; bottom: .57em;
  background: linear-gradient(90deg, var(--mark-light) 0 50%, var(--mark-dark) 50% 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5 C5.5 16.8 1.5 13 1.5 8.4 C1.5 5 4 2.5 7.2 2.5 C9.3 2.5 11 3.6 12 5.3 C13 3.6 14.7 2.5 16.8 2.5 C20 2.5 22.5 5 22.5 8.4 C22.5 13 18.5 16.8 12 21.5 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5 C5.5 16.8 1.5 13 1.5 8.4 C1.5 5 4 2.5 7.2 2.5 C9.3 2.5 11 3.6 12 5.3 C13 3.6 14.7 2.5 16.8 2.5 C20 2.5 22.5 5 22.5 8.4 C22.5 13 18.5 16.8 12 21.5 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wm-period {
  display: inline-block;
  width: .15em; height: .15em;
  margin-left: .05em;
  border-radius: 50%;
  transform: translateY(.045em);
  background: linear-gradient(45deg, var(--mark-dark) 0 50%, var(--mark-light) 50% 100%);
  filter: drop-shadow(.012em .02em .01em rgba(150, 70, 20, .28));
}

/* ---------- Knapper ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85em 1.8em;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: #B5480C;   /* mørkere end --orange-deep, så teksten kan læses (kontrast 5,4:1) */
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: transform .2s, box-shadow .2s, background .2s, opacity .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-ghost { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.85); box-shadow: none; }
.btn-ghost:hover { background: rgba(255,255,255,.15); }
.btn-small { padding: .5em 1.2em; font-size: .95rem; }
.btn-orange { background: #C2510F; color: var(--white); }   /* mørk orange, så den hvide tekst kan læses (kontrast 4,7:1) */

/* ---------- Navigation: hvid bar med orange tekst og orange logo (ens på alle sider) ----------
   Baren ligger fast øverst (position: fixed). Knappen "Tilmeld dig lancering" står til højre for baren. */
.site-header { position: static; }
:root {
  --nav-pad: max(20px, calc(2.4 * var(--u)));                         /* afstand til skærmens kant */
  --nav-edge: calc(50vw - min(50vw, 50 * var(--u)) + var(--nav-pad));  /* samme bredde som toppen */
  --nav-cta-w: 210px;
}
.nav {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: var(--nav-edge);
  right: calc(var(--nav-edge) + var(--nav-cta-w) + 12px);
  height: 54px;
  display: flex;
  align-items: center;
  padding: 0 1.3rem 0 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--orange-deep);
  box-shadow: 0 8px 24px rgba(90, 40, 20, .1);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
}
.nav-logo { width: 30px; height: auto; filter: brightness(0) saturate(100%) invert(45%) sepia(86%) saturate(1900%) hue-rotate(352deg) brightness(97%); }   /* orange logo */
.nav-menu { flex: 1; display: flex; align-items: center; justify-content: center; gap: max(1.4rem, calc(4 * var(--u))); list-style: none; margin: 0; padding: 0; }
.nav-menu a { text-decoration: none; font-weight: 700; font-size: max(.95rem, calc(1.05 * var(--u))); }
.nav-menu a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-toggle { display: none; }
/* Knappen "Tilmeld dig lancering" til højre for baren – farveforløbet lilla → gul → pink */
.nav-cta {
  position: fixed;
  z-index: 51;
  top: 12px;
  right: var(--nav-edge);
  width: var(--nav-cta-w);
  height: 54px;
  white-space: nowrap;
}
.btn-launch {
  background: linear-gradient(90deg, #A68CF5 0%, #FFC97A 50%, #F77DB0 100%);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 0 1px 4px rgba(150, 60, 90, .35);
  box-shadow: 0 6px 18px rgba(170, 70, 90, .25);
}

@media (max-width: 860px) {
  .nav { right: var(--nav-edge); top: 10px; height: 52px; justify-content: space-between; }
  .nav-cta { display: none; }   /* på mobil: "Få besked" i nedtællingen gør det samme */
  .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--orange-deep); border-radius: 2px; transition: .25s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Menuen folder ud under baren – hvid med orange tekst */
  .nav-menu {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.4rem 20px 1.6rem;
    border-radius: 26px;
    background: #fff;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: .25s;
  }
  .nav-menu.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-menu a { font-size: 1.05rem; }
}

/* ---------- Himmel, skyer og bakker (som i appen: HilfeSky.jsx) ---------- */
.sky {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 70%, var(--sky-4) 100%);
  color: var(--white);
}
.cloud-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cloud {
  position: absolute;
  height: auto;
  aspect-ratio: 560 / 350;
  will-change: transform;
  animation: cloud-float 11s ease-in-out infinite alternate;
}
.cloud-layer .cloud:nth-child(2n) { animation-delay: -4s; }
.cloud-layer .cloud:nth-child(3n) { animation-delay: -8s; animation-duration: 13s; }
@keyframes cloud-float {
  from { transform: translateX(-16px); }
  to   { transform: translateX(16px); }
}
.hills { position: absolute; bottom: -1px; left: 0; width: 100%; height: clamp(90px, 16vw, 200px); z-index: 0; }
.hill-back { fill: var(--hill-back); }
.hill-front { fill: var(--hill-front); }

/* ---------- Toppen (hero) – 1:1 efter mockuppen ----------
   Målene er regnet om fra mockuppen (963 px bred) til vw: 1 px i mockuppen = 0,calc(1038 * var(--u)).
   Så står alt det samme sted i forhold til hinanden på alle computerskærme. */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(max(36px, calc(3.4 * var(--u))) + 44px) 0 calc(28 * var(--u) + 44px + 1.2 * var(--u));   /* + 44px til den svævende menu – også i bunden. Bakkerne skal dække armens afskårne ende */
  text-align: center;
  color: var(--white);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 70%, var(--sky-4) 100%);   /* appens himmel (SKY_COLORS.orange) */
}
.hero-inner { position: relative; z-index: 1; padding-inline: 20px; }

/* Ordmærket "Hilfe" – uden punktum, med et større hjerte over i'et (placering som i appen: HilfeWordmark.jsx) */
.hero-title {
  font-size: max(5.5rem, calc(21.6 * var(--u)));
  letter-spacing: -.02em;
}
/* Udgangspunkt som i appen: left = .153 + .03 - .315 - .30/2 · bottom = .69 - .30/2 (DOT_X, NUDGE, I_WIDTH, DOT_Y) */
.hero-title .wm-heart > span { width: .3em; height: .3em; left: -.301em; bottom: .54em; }   /* målt: hjertets midte = midt mellem H og l */
.hero-tagline { font-size: max(1.05rem, calc(2.03 * var(--u))); font-weight: 400; line-height: 1.2; margin: 0; }

/* Hånden i midten og to kort på hver side (kolonner: 214 / 240 / 246 px i mockuppen) */
.hero-stage {
  display: grid;
  grid-template-columns: calc(22.2 * var(--u)) var(--pw) calc(25.5 * var(--u));
  justify-content: center;
  align-items: start;
  column-gap: calc(6.5 * var(--u));
  margin-top: calc(2.6 * var(--u));
  --pw: calc(24 * var(--u));                                /* telefonens bredde */
  --ph: calc(49.6 * var(--u));                              /* telefonens højde */
}
.hero-cards { display: flex; flex-direction: column; gap: calc(1.6 * var(--u)); padding-top: calc(8.1 * var(--u)); }
.hero-cards-left  { align-items: flex-start; }
.hero-cards-right { align-items: flex-end; }
.hero-card {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: calc(11.4 * var(--u));
  margin: 0;
  padding: calc(1.6 * var(--u)) calc(3 * var(--u));
  border-radius: calc(2.3 * var(--u));
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 calc(1 * var(--u)) calc(2.6 * var(--u)) rgba(200, 90, 20, .1);
  font-size: max(.8rem, calc(1.14 * var(--u)));
  font-weight: 300;
  line-height: 1.35;
}
.hero-card-small { min-height: calc(9.5 * var(--u)); }
.hero-cards-left .hero-card-small  { width: calc(19.3 * var(--u)); }
.hero-cards-right .hero-card-small { width: calc(23 * var(--u)); }
/* Det runde ikon, der stikker op over kortet */
.hero-card-badge {
  position: absolute;
  top: calc(-3.3 * var(--u));
  width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u));
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.badge-right .hero-card-badge { right: 0; }
.badge-left  .hero-card-badge { left: 0; }
.hero-card-badge svg { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); fill: var(--white); }
.hero-card-badge circle + circle, .hero-card-badge path + circle { fill: #F7A55A; }
.hero-card-badge .clock-hand { fill: none; stroke: #F7A55A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hånden med telefonen (img/hero-haand.webp). Kassen .hero-phone er præcis telefonens størrelse – billedet
   (med hånd og arm) ligger forskudt bag den. Telefonen fylder 30,5 % af billedets bredde og 63 % af højden
   og starter 16,8 % inde og 3,1 % nede. Som i mockuppen er billedet en anelse bredere end originalen. */
.hero-phone { position: relative; width: var(--pw); height: var(--ph); }
.hero-hand-clip {
  position: absolute;
  left: calc(var(--pw) * -.551);
  top: calc(var(--ph) * -.0486);
  width: calc(var(--pw) / .305);
  height: calc(var(--ph) + calc(42 * var(--u)));           /* armen fortsætter ned bag bakkerne */
  overflow: hidden;
  pointer-events: none;
  /* Vippet bagover som i Figma (toppen mod venstre) – drejer om telefonens midte */
  rotate: -4.5deg;
  transform-origin: calc(var(--pw) * 1.051) calc(var(--ph) * .5486);
}
.hero-hand { display: block; max-width: none; width: 100%; height: calc(var(--ph) / .6295); }

/* Bakkerne i bunden – ligger oven på armen */
.hero-hills { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 100%; height: calc(20 * var(--u)); }
.hill-front-app { fill: var(--hill-front-app); }

/* ---------- Lancering: nedtælling og "Hilfe lanceres snart" (under bakkerne) ---------- */
/* Nedtællingen lige under bakkerne: starter i bakkernes orange (#FFAA55) og fortsætter ned i Mission */
.countdown-wrap { padding: 2rem 0 1rem; background: linear-gradient(180deg, #FFAA55 0%, #FFBE75 100%); text-align: center; }

/* "Hilfe lanceres snart": fortsætter fra nedtællingen og bliver lysere – Om Hilfe tager over med lyserød */
.launch { position: relative; overflow: hidden; padding: 2.5rem 0 1rem; background: linear-gradient(180deg, #FFBE75 0%, #FFDDA8 60%, #FFD4B0 100%); text-align: center; }
.launch > .container { z-index: 1; }

.countdown {
  position: relative;
  overflow: hidden;
  max-width: 1060px;
  margin: 0 auto;
  padding: 2.2rem clamp(1.2rem, calc(4 * var(--u)), 3rem) 2.6rem;
  border-radius: clamp(28px, calc(6 * var(--u)), 72px);
  background: linear-gradient(100deg, #FF9A52 0%, #FFAA55 40%, #FFC36E 75%, #FFD280 100%);   /* appens orange nuancer */
  box-shadow: 0 24px 50px rgba(170, 80, 20, .22);
  color: var(--white);
}
.countdown > :not(.cloud-layer) { position: relative; z-index: 1; }
.countdown [hidden] { display: none; }
.countdown-label { font-size: clamp(1rem, calc(2 * var(--u)), 1.15rem); font-weight: 300; margin-bottom: .9rem; }
.countdown-grid { display: flex; justify-content: center; }
.cd-box {
  padding: .1rem clamp(.6rem, calc(1.8 * var(--u)), 1.2rem);
  font-size: clamp(1.3rem, calc(3 * var(--u)), 2.2rem);
  line-height: 1.2;
  white-space: nowrap;
}
.cd-box + .cd-box { border-left: 1.5px solid rgba(255, 255, 255, .55); }
.cd-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-unit { font-weight: 300; }
.countdown-done { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin: 0; }
.btn-soft { margin-top: 1.8rem; min-width: 210px; background: var(--orange-pale); color: #A8430B; box-shadow: 0 6px 16px rgba(170, 80, 20, .12); }

.hero-invite { padding: 0; color: var(--pink); }
.invite-eyebrow { font-size: clamp(1rem, calc(2 * var(--u)), 1.15rem); font-weight: 300; margin-bottom: 1.2rem; }
.invite-head { display: inline-block; text-align: left; }
.invite-sub { margin: 1.6rem 0 0; text-align: center; font-size: max(.95rem, calc(1.7 * var(--u))); font-weight: 300; color: #E2457F; }
.invite-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(2.3rem, calc(5.4 * var(--u)));
  line-height: 1.05;
  margin: 0;
}

/* Toppen på tablet/mobil: hånden først, kortene under hinanden, nedtællingen i 2 × 2 */
@media (max-width: 860px) {
  .hero { padding: 92px 0 0; }
  .hero-stage { grid-template-columns: 1fr; row-gap: 2.6rem; margin-top: 2rem; --pw: min(250px, 58vw); --ph: calc(var(--pw) * 2.07); }
  .hero-phone { order: -1; justify-self: center; }
  .hero-hand-clip { height: calc(var(--ph) * 1.12); -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .hero-cards { align-items: center !important; gap: 2.6rem; padding: 0 20px; }
  .hero-card, .hero-cards-left .hero-card-small, .hero-cards-right .hero-card-small { width: 100%; max-width: 420px; min-height: 0; padding: 1.6rem 1.4rem; border-radius: 20px; font-size: .9rem; }
  .hero-card.has-badge { padding-top: 2.2rem; }
  .hero-card-badge { top: -26px; width: 52px; height: 52px; }
  .hero-card-badge svg { width: 28px; height: 28px; }
  .hero-cards-right { margin-bottom: 1rem; }
  .hero-hills { position: relative; display: block; height: 70px; margin-top: 1rem; }
}
@media (max-width: 560px) {
  .countdown-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: .5rem; }
  .cd-box { font-size: 1.45rem; padding: 0 .4rem; }
  .cd-box + .cd-box { border-left: 0; }
  .cd-box:nth-child(even) { border-left: 1.5px solid rgba(255, 255, 255, .55); }
}

/* ---------- Telefonerne: en iPhone i 3D med appens rigtige skærmbilleder (img/app/) ----------
   Forsiden er titaniumrammen + den sorte kant + skærmen. Bagved lægger js/main.js tynde lag
   (.phone-slice), så telefonen får rigtig tykkelse, når den drejes i 3D. --w = telefonens bredde. */
.phone {
  --w: 250px;
  --frame: calc(var(--w) * .016);                 /* titaniumkanten */
  --bezel: calc(var(--w) * .03);                  /* den sorte kant om skærmen */
  --radius: calc(var(--w) * .18);
  --depth: calc(var(--w) * .075);                 /* telefonens tykkelse */
  position: relative;
  width: var(--w);
  margin: 0;
  padding: var(--frame);
  border-radius: var(--radius);
  transform-style: preserve-3d;
  background:
    linear-gradient(135deg, #f4f4f6 0%, #a7a8ad 14%, #e9e9ec 30%, #8c8d92 48%, #d6d7db 66%, #7f8085 84%, #e3e3e7 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 calc(var(--frame) * .7) rgba(0,0,0,.08);
}
/* Lagene bag forsiden = telefonens side (titanium, mørkere bagud) */
.phone-slice {
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: hsl(230 3% calc(78% - var(--i) * 3%));
  transform: translateZ(calc(var(--depth) / -14 * var(--i)));
  pointer-events: none;
}
/* Knapperne på siden: handlingsknap + lydstyrke til venstre, tænd/sluk til højre (midt i tykkelsen) */
.phone-btn {
  position: absolute;
  width: calc(var(--w) * .014);
  border-radius: 2px;
  background: linear-gradient(90deg, #8e8f94, #d9dade 50%, #8e8f94);
  transform: translateZ(calc(var(--depth) / -2));
  pointer-events: none;
}
.phone-btn.action { left: calc(var(--w) * -.012); top: 18%; height: 4.5%; }
.phone-btn.vol-up { left: calc(var(--w) * -.012); top: 26%; height: 8%; }
.phone-btn.vol-dn { left: calc(var(--w) * -.012); top: 36%; height: 8%; }
.phone-btn.power  { right: calc(var(--w) * -.012); top: 28%; height: 12%; }

.screen {
  position: relative;
  overflow: hidden;
  border: var(--bezel) solid #050506;
  border-radius: calc(var(--radius) - var(--frame));
  background: #050506;
  transform: translateZ(.5px);
}
.screen img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; }
/* Dynamic Island med kamera */
.screen::before {
  content: "";
  position: absolute; z-index: 6;
  top: calc(var(--w) * .028); left: 50%;
  translate: -50% 0;
  width: 32%; height: calc(var(--w) * .088);
  border-radius: 999px;
  background:
    radial-gradient(circle at 80% 50%, #2a3d63 0 calc(var(--w) * .008), #0b1222 calc(var(--w) * .014), transparent calc(var(--w) * .017)),
    #000;
}
/* Glassets refleks */
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 36%);
}

/* Knapperne i skærmbillederne bevæger sig som i appen (src/index.css → breathe og breathe-alarm).
   .pulse er et udsnit af samme skærmbillede (kun knappen), der vokser 4-5 % og falder tilbage.
   .pulse-glow er ringen, der breder sig ud fra knappen. Placering: --x/--y = knappens midte, --r = radius
   (i % af skærmens bredde) – målt på skærmbillederne i img/app/. */
.pulse, .pulse-glow { position: absolute; pointer-events: none; }
.pulse {
  inset: 0;
  background: center / 100% 100% no-repeat;
  clip-path: circle(calc(var(--r) / 1.685) at 50% var(--y));
  transform-origin: 50% var(--y);
  animation: app-breathe var(--speed) ease-in-out infinite;
}
.pulse-glow {
  left: 50%; top: var(--y);
  width: calc(var(--r) * 2); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  animation: app-glow var(--speed) ease-in-out infinite;
}
.pulse-sun   { --y: 45.1%;  --r: 31.5%; --speed: 3.4s; --scale: 1.04; --glow: hsl(24 89% 60% / .35); --ring: 14px; }
.pulse-alarm { --y: 22.75%; --r: 21.3%; --speed: 1.4s; --scale: 1.05; --glow: hsl(0 72% 52% / .4);  --ring: 16px; }
@keyframes app-breathe { 50% { transform: scale(var(--scale)); } }
@keyframes app-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow); }
  50% { box-shadow: 0 0 0 var(--ring) transparent; }
}

/* MVP-afsnittet: tre telefoner i en vifte – alarmen i midten */
.mvp-phones { position: relative; height: 580px; filter: drop-shadow(0 26px 30px rgba(120, 30, 70, .3)); }
.mvp-phones .phone { position: absolute; }
.phone-center { z-index: 2; --w: 230px; left: 50%; top: 0; translate: -50% 0; transform: perspective(1800px) rotateX(4deg); }
.phone-side { z-index: 1; --w: 200px; top: 60px; }
.phone-l { left: 0; transform: perspective(1800px) rotateY(24deg) rotateZ(-5deg); }
.phone-r { right: 0; transform: perspective(1800px) rotateY(-24deg) rotateZ(5deg); }
.mvp-phones figcaption {
  position: absolute; left: 0; right: 0; bottom: -2.2rem;
  text-align: center;
  color: var(--white);
  font-size: .95rem;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(180, 40, 90, .35);
}

/* ---------- Om Hilfe (anden del) ----------
   Kommer efter "Hilfe lanceres snart": lys fersken → lyserød → pink (Mission tager over) */
.about {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 7rem;
  background: linear-gradient(180deg, #FFD4B0 0%, #FFBEC2 16%, #FFAFC8 32%, #FDA0C3 48%, #F77FB0 62%, #EE6197 74%, var(--pink) 84%, #F68DB2 94%, #FFA9C6 100%);   /* slutter lyserødt, så How/Why tager over */
  color: var(--white);
}

/* To telefoner: Log ind (skrå) til venstre og Check in til højre. Placering i % af rammen (640 × 520) */
.about-phones {
  --fw: min(calc(78 * var(--u)), 100vw - 40px);   /* rammens bredde (som i Figma) */
  position: relative;
  width: var(--fw);
  aspect-ratio: 640 / 540;
  margin: 0 auto;
}
.about-phone { position: absolute; filter: drop-shadow(0 30px 34px rgba(150, 50, 60, .32)); }
.about-phone-left  { left: 6%;  top: 19%; }
.about-phone-right { left: 54%; top: 2%; }
.about-phone-left .phone {
  --w: calc(var(--fw) * .31);
  transform: perspective(2200px) matrix3d(.791, -.083, .605, 0, -.245, .864, .44, 0, -.559, -.496, .663, 0, 0, 0, 0, 1);
}
.about-phone-right .phone { --w: calc(var(--fw) * .33); transform: perspective(1800px) rotateY(-6deg) rotateZ(1deg); }

.about-text { max-width: 560px; margin: 2.5rem auto 0; text-align: left; }
.about-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  color: #E2457F;
  margin: 0 0 1.4rem;
}
.about-text p { max-width: max(300px, calc(38.8 * var(--u))); margin-left: calc(2.3 * var(--u)); color: var(--white); font-weight: 300; font-size: max(.95rem, calc(1.45 * var(--u))); line-height: 1.35; }

/* De tre kort – målt i Figma (sektionen er 652 px bred: 1 px = 0,153 · --u).
   Tallet sidder i en fane, der stikker op (venstre / midten / højre) */
.about-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(2 * var(--u));
  max-width: calc(76 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
}
.about-card {
  --card: #F9BD72;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(23.5 * var(--u));
  padding: calc(4.9 * var(--u)) calc(3.7 * var(--u)) calc(2.8 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--card);
  box-shadow: 0 18px 40px rgba(170, 40, 90, .22);
  text-align: center;
}
/* Hover: kortet løfter sig og skifter til en dybere udgave af sin farve (--card-hover); knappen bliver hvid */
@property --card { syntax: "<color>"; inherits: true; initial-value: #F9BD72; }
.card-orange { --card: #F9BD72; --card-hover: #F59A3E; }
.card-pink   { --card: #EE78A6; --card-hover: #DE4F88; }
.card-green  { --card: #A7D6A0; --card-hover: #62B870; }
.about-card { transition: --card .35s ease, translate .35s ease, box-shadow .35s ease; }
.about-card:hover { --card: var(--card-hover); translate: 0 -8px; box-shadow: 0 28px 54px rgba(170, 40, 90, .32); }
.about-card .btn-outline { transition: background .3s, color .3s, border-color .3s; }
.about-card:hover .btn-outline { background: var(--white); color: var(--card-hover); border-color: var(--white); }
.about-card p { flex: 1; align-self: stretch; margin: 0 0 1.4em; font-size: max(.85rem, calc(1.3 * var(--u))); font-weight: 400; line-height: 1.45; }
.card-orange p, .card-green p { text-align: left; }   /* som i Figma: kort 1 og 3 venstrestillet, kort 2 centreret */
.about-card-num {
  position: absolute;
  top: calc(-4.6 * var(--u));
  width: calc(8.7 * var(--u)); height: calc(8.6 * var(--u));
  display: grid; place-items: center;
  border-radius: calc(4.35 * var(--u)) calc(4.35 * var(--u)) 0 0;
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(1.8rem, calc(4.6 * var(--u)));
  line-height: 1;
}
.tab-left   .about-card-num { left: 0; border-radius: calc(3 * var(--u)) calc(4.35 * var(--u)) 0 0; }
.tab-center .about-card-num { left: 50%; translate: -50% 0; }
.tab-right  .about-card-num { right: 0; border-radius: calc(4.35 * var(--u)) calc(3 * var(--u)) 0 0; }
.btn-outline {
  width: max(150px, calc(17 * var(--u)));
  height: max(40px, calc(5 * var(--u)));
  padding: 0 1em;
  font-size: max(.85rem, calc(1.2 * var(--u)));
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: none;
}
.btn-outline:hover { background: rgba(255, 255, 255, .18); box-shadow: none; }

@media (max-width: 720px) {
  .about-cards { grid-template-columns: 1fr; gap: 4rem; max-width: 420px; margin-top: 4.5rem; }
  .about-text { margin-top: 1.5rem; }
}

/* ---------- Mission ---------- */
.mission {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 6rem;
  background: linear-gradient(180deg, var(--pink) 0%, #F27AA8 40%, #F7A3C2 66%, var(--pink) 100%);   /* fortsætter i pink fra Om Hilfe */
}
.mission-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.mission-head .display { max-width: 10ch; }
.mission-logo { width: clamp(120px, 20vw, 230px); height: auto; opacity: .85; flex-shrink: 0; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 1rem 0 4rem; }
.pillar { text-align: center; padding: 1.8rem 1rem; border-radius: var(--radius); background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pillar-icon { width: 52px; height: 52px; margin: 0 auto .8rem; color: var(--pink-deep); }
.pillar-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { font-family: var(--font-display); color: var(--pink-deep); font-size: 1.2rem; line-height: 1.3; margin: 0 0 .3rem; }
.pillar p { margin: 0; font-size: .9rem; color: #8a3e55; }
/* Brede skærme: overskrift og tekst på én linje i alle tre kort */
@media (min-width: 1180px) { .pillar h3, .pillar p { white-space: nowrap; } }

.mission-body { max-width: 980px; }
.mission-text { columns: 2 320px; column-gap: 3.5rem; color: var(--white); font-size: 1.08rem; text-shadow: 0 1px 8px rgba(180, 40, 90, .25); }
.mission-text p { break-inside: avoid; }
.mission-text strong { font-weight: 600; }

/* ---------- MVP ---------- */
.mvp {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
  background: linear-gradient(180deg, var(--pink) 0%, var(--pink-light) 40%, #F7D3D2 70%, var(--green-pale) 100%);
}
.mvp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.mvp-text { color: var(--white); text-shadow: 0 1px 8px rgba(180, 40, 90, .25); }

.steps-wrap {
  margin-top: 4rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: calc(var(--radius) * 1.4);
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(44,127,73,.12);
}
.steps-title { font-family: var(--font-display); color: var(--green); font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2; margin: 0 0 .6rem; }
.steps-lead { max-width: 680px; }
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
}
.step h4 { margin: .2rem 0 .3rem; color: var(--green-dark); font-size: 1.08rem; }
.step p { margin: 0; font-size: .95rem; }

/* ---------- Historie ---------- */
.story { padding: 6rem 0; background: linear-gradient(180deg, var(--green-pale) 0%, #C9E3BC 50%, var(--green-mid) 85%, var(--green) 100%); }
.story-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.story-text { color: #2a5a39; }
.signature { font-style: italic; font-weight: 500; color: var(--green-dark); }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.founder { margin: 0; text-align: center; }
.founder-photo, .founder img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--white);
  box-shadow: var(--shadow);
}
.founder-photo {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--orange-light), var(--pink-light));
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--white);
}
.founder figcaption { margin-top: .8rem; line-height: 1.3; }
.founder figcaption strong { display: block; color: #234a30; }
.founder figcaption span { font-size: .9rem; opacity: .75; }

.purpose { margin: 5rem 0; text-align: center; }
.purpose-root {
  display: inline-block;
  padding: 1.2rem 2.6rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--green-mid), var(--green));
  color: var(--white);
  box-shadow: 0 12px 30px rgba(44,127,73,.25);
}
.purpose-root h3 { font-family: var(--font-display); font-size: 2rem; margin: 0; line-height: 1; }
.purpose-root p { margin: .3rem 0 0; font-size: .95rem; }
.purpose-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; position: relative; }
.purpose-items::before {
  content: "";
  position: absolute;
  top: -1.5rem; left: 16%; right: 16%;
  height: 1.5rem;
  border: 2px dashed rgba(44,127,73,.45);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}
.purpose-item { padding: 1.4rem; border-radius: var(--radius); background: linear-gradient(180deg, #A7DD86, #68C273); color: var(--white); }
.purpose-item span { font-weight: 600; display: block; margin-bottom: .3rem; }
.purpose-item p { margin: 0; font-size: .95rem; }

.business-title { font-family: var(--font-display); text-align: center; max-width: 820px; margin: 0 auto 2rem; font-size: clamp(1.3rem, 2.8vw, 1.75rem); line-height: 1.3; color: #1f4a2c; }
.business { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.biz-card { display: flex; flex-direction: column; padding: 1.8rem 1.8rem 1.6rem; border-radius: var(--radius); background: var(--green-pale); box-shadow: 0 10px 30px rgba(31,74,44,.12); }
.biz-card h4 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 .3rem; color: #1f4a2c; }
.biz-card p { margin: 0; }
.biz-art { display: block; width: auto; height: 170px; max-width: 100%; margin: 1.4rem auto 0; object-fit: contain; }
.business-note { text-align: center; margin: 2.5rem auto 0; max-width: 680px; color: var(--white); font-weight: 500; }

/* ---------- CTA ---------- */
.cta { padding: 6rem 0; text-align: center; }
.cta-logo { width: 110px; margin: 0 auto 1.5rem; }

/* ---------- Kontaktside ---------- */
.contact-hero { padding: 130px 0 0; text-align: center; }
.contact-hero-inner { padding-bottom: clamp(80px, 12vw, 150px); }
.contact-hero .display { margin-bottom: .3em; }

.contact { padding: 1rem 0 6rem; background: var(--orange-pale); }
.contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }

.contact-form {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: calc(var(--radius) * 1.2);
  background: var(--white);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; color: var(--orange-deep); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 2px solid #F6DCC2;
  border-radius: 14px;
  background: #FFFBF5;
  font: inherit;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(244,133,60,.18); }
.field .invalid, .field [aria-invalid="true"] { border-color: #D63B3B; }
.consent { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 1.5rem; font-size: .92rem; cursor: pointer; }
.consent input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 1rem 0 0; font-weight: 500; min-height: 1.5em; }
.form-status.ok { color: var(--green-dark); }
.form-status.error { color: #C02F2F; }

.contact-info {
  padding: 2rem;
  border-radius: calc(var(--radius) * 1.2);
  background: rgba(255,255,255,.55);
  text-align: center;
}
.contact-logo { width: 90px; margin: 0 auto 1rem; }
.contact-info h2 { font-family: var(--font-display); color: var(--orange-deep); margin: 0 0 .3rem; font-size: 2rem; }
.contact-info ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.contact-info li strong { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-deep); }

/* ---------- Footer (bunden – laves af scripts/indhold.mjs, ens på alle sider) ----------
   Mørk bund i fire kolonner: logo + tekst | genveje | kontakt med ikoner | "Få besked" (e-mailfelt).
   Nederst en mørkere linje med © og privatlivspolitik til venstre, sociale medier og en orange
   "til toppen"-knap til højre.
   Øverst bølger (som bakkerne i toppen, spejlvendt): en orange bakke bagved og en mørk foran, der glider
   over i bunden. Bunden trækkes op over den sidste sektion, så sidens egen baggrund ses bag bølgerne –
   derfor passer den til alle sider. Den sidste sektion får tilsvarende mere luft i bunden. */
:root { --footer-hills: clamp(64px, 10vw, 140px); }
main > section:not([hidden]):not(:has(~ section:not([hidden]))) { padding-bottom: calc(5rem + var(--footer-hills)); }   /* den sidste synlige sektion */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--footer-hills));
  color: rgba(255,255,255,.62);
  font-size: .92rem;
}
.footer-hills { display: block; width: 100%; height: var(--footer-hills); margin-bottom: -1px; }
.footer-hill-back { fill: var(--footer-hill-back, var(--hill-front-app)); }   /* appens mørke orange bakke – grøn på sider, der slutter grønt (se nedenfor) */
.footer-hill-front { fill: var(--ink); }
.footer-body { background: var(--ink); }
.site-footer a { text-decoration: none; transition: color .2s; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--orange-light); }
.site-footer :focus-visible { outline: 2px solid var(--orange-light); outline-offset: 3px; border-radius: 4px; }

.footer-top {
  display: grid; grid-template-columns: 1.25fr .9fr 1.1fr 1.35fr; gap: 2.5rem;
  padding-top: 1.4rem; padding-bottom: 3.6rem;
}
.footer-brand .nav-brand { color: #fff; font-size: 1.7rem; }
.footer-brand .nav-logo { width: 34px; }
.footer-tagline { margin: 1.1rem 0 0; max-width: 28ch; line-height: 1.6; font-weight: 300; }

.footer-heading {
  margin: .45rem 0 1.2rem; color: #fff;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: .01em;
}
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer-links a[aria-current="page"], .footer-contact a[aria-current="page"] { color: #fff; }

.footer-contact a { display: flex; align-items: center; gap: .7rem; }
.footer-contact svg { flex: none; color: var(--orange); transition: color .2s; }
.footer-contact a:hover svg { color: var(--orange-light); }

.footer-signup p { margin: 0 0 1.1rem; line-height: 1.6; font-weight: 300; }
.footer-form {
  display: flex; align-items: center; gap: .4rem; max-width: 320px;
  padding: .3rem .3rem .3rem 1.1rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  transition: border-color .2s, background .2s;
}
.footer-form:focus-within { border-color: var(--orange); background: rgba(255,255,255,.1); }
.footer-form input {
  flex: 1; min-width: 0; border: 0; background: none; color: #fff;
  font: inherit; font-size: .9rem; padding: .5rem 0;
}
.footer-form input::placeholder { color: rgba(255,255,255,.45); }
.footer-form input:focus { outline: none; }
.footer-form button {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--orange); color: #fff; cursor: pointer; transition: background .2s, translate .2s;
}
.footer-form button:hover { background: var(--orange-deep); translate: 2px 0; }

.footer-bottom { background: rgba(0,0,0,.2); }
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.copyright { margin: 0; font-size: .82rem; color: rgba(255,255,255,.5); }
.copyright a { color: rgba(255,255,255,.75); }
.footer-bottom-right { display: flex; align-items: center; gap: 1.4rem; }
.footer-social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-social a { display: grid; place-items: center; color: rgba(255,255,255,.7); transition: color .2s, translate .2s; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--orange); translate: 0 -2px; }
.footer-totop {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--orange); color: #fff !important; transition: background .2s, translate .2s;
}
.footer-totop:hover { background: var(--orange-deep); translate: 0 -3px; }

@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.6rem 2rem; padding-top: 1.6rem; padding-bottom: 2.8rem; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.2rem; }
  .footer-brand, .footer-signup { grid-column: 1 / -1; }
  .footer-form { max-width: none; }
  .footer-bottom-inner { flex-direction: column-reverse; align-items: flex-start; }
  .footer-bottom-right { width: 100%; justify-content: space-between; }
}

/* ---------- Scroll-animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsivt ---------- */
@media (max-width: 960px) {
  .mvp-grid, .story-grid, .contact-grid { grid-template-columns: 1fr; }
  /* width: 100 % – ellers klapper rammen sammen til 0 px (telefonerne er absolut placeret) og de står oven i hinanden */
  .mvp-phones { width: 100%; max-width: 560px; margin: 1rem auto 3rem; }
}


@media (max-width: 720px) {
  body { font-size: 1rem; }
  .pillars, .steps, .purpose-items, .business { grid-template-columns: 1fr; }
  .purpose-items::before { display: none; }
  .mission-head { flex-direction: column-reverse; }
  .mission-logo { width: 110px; }
  /* På mobil: samme vifte som på computeren, bare skaleret ned i samme forhold (computer: 560 px bred,
     alarmen 230 px, siderne 200 px), så telefonerne kun overlapper lidt i kanten. --mw = viftens bredde. */
  .mvp-phones { --mw: calc(100vw - 40px); height: calc(var(--mw) * 1.04); margin-bottom: 1.5rem; }
  .phone-center { --w: calc(var(--mw) * .41); }
  .phone-side { --w: calc(var(--mw) * .357); top: calc(var(--mw) * .107); }
  .mvp-phones figcaption { bottom: -1.8rem; font-size: .8rem; }

  /* Mindre luft mellem afsnittene, så siden ikke føles tom på en telefon */
  .about { padding: .5rem 0 4rem; }
  .mission, .story, .cta { padding: 4rem 0; }
  .mvp { padding: 4rem 0 3.5rem; }
  .steps-wrap { margin-top: 2.5rem; }
  .pillars { margin-bottom: 2.5rem; }
  .purpose { margin: 3.5rem 0; }
  .story-grid, .mvp-grid { gap: 2rem; }
  .biz-art { height: 140px; }
  /* På mobil: færre og svagere skyer, så de ikke ligger hen over teksten */
  .cloud-layer .cloud { max-width: 3.6rem; opacity: .4 !important; }
  .cloud-layer .cloud:nth-child(n+4) { display: none; }
}


/* ---------- Mission: "Vi er alle én" (som i Figma) ----------
   Stor hvid tekst og en knap til venstre, en skrå telefon til højre. Telefonens skærm: img/app/humoer.jpg */
.mission-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
.mission-hero-text { position: relative; }
.mission-slogan {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(2.3rem, calc(7 * var(--u)));
  line-height: 1.18;
  color: var(--white);
  max-width: 10.5ch;
}
/* Knappen står ud for sidste linje ("én."), stor og lysende som i Figma */
.mission-btn {
  position: absolute;
  left: calc(17 * var(--u));
  bottom: calc(1.2 * var(--u));
  min-width: max(220px, calc(30 * var(--u)));
  height: max(48px, calc(6 * var(--u)));
  font-size: max(1rem, calc(1.35 * var(--u)));
  box-shadow: 0 0 calc(2.6 * var(--u)) rgba(255, 255, 255, .55), 0 10px 24px rgba(150, 30, 80, .25);
}
/* Telefonen med en blød, varm glød omkring (som gløden om hånden i Figma) */
.mission-phone { justify-self: end; filter: drop-shadow(0 0 calc(2.4 * var(--u)) rgba(255, 190, 140, .75)) drop-shadow(0 26px 30px rgba(140, 30, 70, .3)); }
.mission-phone .phone { --w: max(200px, calc(25 * var(--u))); transform: perspective(1800px) rotateY(-10deg) rotateZ(8deg); }
/* De tre punkter under – uden kasser, som i Figma */
.mission .pillar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 1rem .5rem; }
@media (max-width: 720px) {
  .mission-hero { grid-template-columns: 1fr; text-align: center; }
  .mission-slogan { margin-inline: auto; }
  .mission-btn { position: static; margin-top: 1.6rem; }
  .mission-phone { justify-self: center; }
  .mission-phone { margin-top: 1rem; }
}

/* ---------- Toppen: tilføjelser fra Figma ---------- */
/* Ikonerne på kortene: en hånd (venstre) og Hilfe-logoet (højre – "så det ligner appen") */
.hero-card-badge .badge-line { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-card-badge .badge-logo { width: calc(3.8 * var(--u)); min-width: 28px; height: auto; }

/* "Lad mig vide, når I lancerer!" – nede til venstre ved armen (som i Figma: 18,9 % inde) */
.hero-stage { position: relative; }
.hero-notify {
  position: absolute;
  z-index: 3;
  left: calc(50% - 31.1 * var(--u));
  top: calc(var(--ph) + 7.4 * var(--u));   /* under telefonen, lige over bakkerne */
  min-width: max(240px, calc(31 * var(--u)));
  height: max(50px, calc(6.4 * var(--u)));
  background: linear-gradient(90deg, #E84A82 0%, #F5806A 55%, #FFB36B 100%);
  color: var(--white);
  font-weight: 400;
  font-size: max(1rem, calc(2 * var(--u)));
  border-radius: max(16px, calc(1.8 * var(--u)));
  box-shadow: 0 0 calc(2.4 * var(--u)) rgba(255, 255, 255, .6), 0 10px 24px rgba(200, 60, 80, .25);
}
.hero-notify:hover { box-shadow: 0 0 calc(3.2 * var(--u)) rgba(255, 255, 255, .8), 0 14px 28px rgba(200, 60, 80, .3); }

/* Solknappen i hånden pulserer som i appen. Laget har skærmens størrelse (390 × 844) og lægges i samme
   perspektiv som skærmen i billedet af js/main.js. --y/--r: solens midte og radius på check-in-haand.webp */
.hero-screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; pointer-events: none; }
.pulse-hand { --y: 48.16%; --r: 30.19%; }

@media (max-width: 860px) {
  .hero-notify { position: static; justify-self: center; margin: 0 auto 1.5rem; }
}

/* ---------- Forsiden: nedtællingen svæver halvt ind over bakkerne (binder toppen og næste sektion sammen) ---------- */
.countdown-wrap {
  position: relative;
  z-index: 3;
  margin-top: calc(-11 * var(--u));
  padding: 0 0 1rem;
  background: linear-gradient(180deg, transparent 0 calc(11 * var(--u)), #FFAA55 calc(11 * var(--u)), #FFBE75 100%);
}
@media (max-width: 860px) {
  .countdown-wrap { margin-top: -2rem; background: linear-gradient(180deg, transparent 0 2rem, #FFAA55 2rem, #FFBE75 100%); }
}

/* ==========================================================
   ANDEN DEL AF SIDEN (How/Why → Mission → Om Hilfe → Sådan virker det) – bygget 1:1 efter Figma.
   Målene er regnet om fra Figma (610 px bred): 1 px = 0,164 · --u
   ========================================================== */

/* ---------- How / Why ---------- */
.why-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFA9C6 0%, #FFB0C0 30%, #FFBC98 66%, #FFC57E 100%);
  color: var(--white);
}
.why-stage { position: relative; z-index: 1; width: calc(100 * var(--u)); height: calc(119 * var(--u)); margin: 0 auto; }
.why-bg {
  position: absolute;
  left: calc(25.9 * var(--u)); top: calc(12.4 * var(--u));
  font-size: calc(22.2 * var(--u));
  opacity: .45;
  letter-spacing: -.02em;
}
.why-bg .wm-heart > span { width: .3em; height: .3em; left: -.301em; bottom: .54em; }
.why-title {
  position: absolute;
  left: calc(36.1 * var(--u)); top: calc(5.8 * var(--u));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(13.2 * var(--u));
  line-height: 1.37;
  text-shadow: 0 6px 24px rgba(200, 80, 110, .15);
}
.why-title span { display: block; }
.why-tagline {
  position: absolute;
  left: calc(53.4 * var(--u)); top: calc(42.9 * var(--u));
  margin: 0;
  font-size: calc(2.3 * var(--u));
  font-weight: 300;
  color: var(--pink);
}
/* Fire iPhones (billeder med gennemsigtig baggrund). Målt i Figma: synlig telefon 17,4 % bred, 41,4 % høj –
   højde/placering herunder er regnet om, så billedets tomme kant ikke tæller med */
.why-phone { position: absolute; width: auto; filter: drop-shadow(0 22px 24px rgba(150, 60, 70, .28)); }
.why-phone-1 { left: calc(10 * var(--u));    top: calc(33.46 * var(--u)); height: calc(46.7 * var(--u)); }
.why-phone-2 { left: calc(30.31 * var(--u)); top: calc(40.82 * var(--u)); height: calc(49.25 * var(--u)); }
.why-phone-3 { left: calc(49.96 * var(--u)); top: calc(52.05 * var(--u)); height: calc(45.64 * var(--u)); }
.why-phone-4 { left: calc(68.09 * var(--u)); top: calc(60.85 * var(--u)); height: calc(45.46 * var(--u)); }
/* De to kort med logo-ikon */
.why-card {
  position: absolute;
  z-index: 2;
  padding: calc(2.2 * var(--u)) calc(2 * var(--u)) calc(1.8 * var(--u));
  border-radius: calc(2.3 * var(--u));
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.why-card-1 { left: calc(12.3 * var(--u)); top: calc(89.6 * var(--u)); width: calc(25.9 * var(--u)); min-height: calc(11.8 * var(--u)); }
.why-card-2 { left: calc(14.8 * var(--u)); top: calc(107 * var(--u)); width: calc(23.4 * var(--u)); min-height: calc(9.5 * var(--u)); }
.why-card h3 { margin: 0 0 .35em calc(4.2 * var(--u)); font-family: var(--font-display); font-size: max(.95rem, calc(1.65 * var(--u))); white-space: nowrap; }
.why-card p { margin: 0; font-size: max(.78rem, calc(1.2 * var(--u))); font-weight: 300; line-height: 1.35; }
.why-card-badge {
  position: absolute;
  left: calc(-1 * var(--u)); top: calc(-3.1 * var(--u));
  width: calc(6.2 * var(--u)); height: calc(6.2 * var(--u));
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #F77DB0, #FFC27C);
  box-shadow: 0 6px 16px rgba(200, 80, 110, .25);
}
.why-card-badge img { width: 62%; }
.why-card-2 .why-card-badge { background: linear-gradient(135deg, #EDE48C, #B9DB8E); }   /* kort 2 har et gulgrønt ikon i Figma */

/* ---------- Fælles at gøre tryghed til allemandseje ---------- */
.faelles { background: linear-gradient(180deg, #FFC57E 0%, #FFC97A 100%); color: #4a3a36; }
.faelles-inner { width: calc(100 * var(--u)); margin: 0 auto; padding: 0 calc(9.6 * var(--u)) calc(4 * var(--u)) calc(5.7 * var(--u)); }
.faelles-head { position: relative; }
.faelles-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(2.6rem, calc(13.05 * var(--u)));
  line-height: 1.33;
  color: #FF8F52;
}
/* Den runde cirkel med hjerte-logoet */
.faelles-logo {
  position: absolute;
  left: calc(50.8 * var(--u)); top: calc(-2.8 * var(--u));
  width: calc(29.2 * var(--u)); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 62%, rgba(255, 255, 255, .3) 62% 100%);
}
.faelles-logo img { width: 52%; opacity: .75; filter: sepia(.6) saturate(2) hue-rotate(-15deg) brightness(1.05); }
.faelles-cols { display: grid; grid-template-columns: 38.6fr 40.8fr; gap: calc(5.3 * var(--u)); margin-top: calc(1.5 * var(--u)); font-size: max(.95rem, calc(1.75 * var(--u))); font-weight: 300; line-height: 1.38; }
.faelles-sub { margin: 0; font: inherit; }
.faelles-cols p { margin: 0 0 1em; }
.faelles-quote {
  position: relative;
  margin: 0 0 1.4em;
  padding-left: calc(2.6 * var(--u));
  border-left: 1.5px solid #8C93B8;
  color: #4a3a36;
}
.faelles-quote::before { content: "\201C"; position: absolute; left: calc(-3.2 * var(--u)); top: -.25em; font-family: var(--font-display); font-size: 2.2em; color: #8C93B8; }

/* ---------- Invitationen: to telefoner + "Hilfe lanceres snart" (orange, bølge i bunden) ---------- */
.invite2 { position: relative; background: linear-gradient(180deg, #FFC97A 0%, #FFB565 38%, #FFA552 100%); }
.invite2-stage { position: relative; z-index: 1; width: calc(100 * var(--u)); height: calc(96 * var(--u)); margin: 0 auto; }
.invite2-phone { position: absolute; filter: drop-shadow(0 26px 30px rgba(140, 60, 20, .3)); }
.invite2-phone-right { left: calc(57 * var(--u)); top: calc(1.6 * var(--u)); }
.invite2-phone-right .phone { --w: calc(29.5 * var(--u)); }
.invite2-phone-left { left: calc(14 * var(--u)); top: calc(16 * var(--u)); }
.invite2-phone-left .phone { --w: calc(27 * var(--u)); transform: perspective(2200px) matrix3d(.791, -.083, .605, 0, -.245, .864, .44, 0, -.559, -.496, .663, 0, 0, 0, 0, 1); }
.invite2-heart {
  position: absolute;
  left: calc(46 * var(--u)); top: calc(65.6 * var(--u));
  width: calc(5.7 * var(--u)); height: calc(5.2 * var(--u));
  background: linear-gradient(90deg, var(--mark-light) 0 50%, #FF9A0C 50% 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21.5 C5.5 16.8 1.5 13 1.5 8.4 C1.5 5 4 2.5 7.2 2.5 C9.3 2.5 11 3.6 12 5.3 C13 3.6 14.7 2.5 16.8 2.5 C20 2.5 22.5 5 22.5 8.4 C22.5 13 18.5 16.8 12 21.5 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21.5 C5.5 16.8 1.5 13 1.5 8.4 C1.5 5 4 2.5 7.2 2.5 C9.3 2.5 11 3.6 12 5.3 C13 3.6 14.7 2.5 16.8 2.5 C20 2.5 22.5 5 22.5 8.4 C22.5 13 18.5 16.8 12 21.5 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.invite2-title {
  position: absolute;
  left: calc(27.9 * var(--u)); top: calc(73.6 * var(--u));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(1.8rem, calc(5 * var(--u)));
  line-height: 1.15;
  color: var(--white);
}
.invite2-wave { position: absolute; z-index: 1; left: 0; bottom: -1px; width: 100%; height: calc(9 * var(--u)); }
.invite2-btn {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: calc(-4 * var(--u));
  translate: -50% 0;
  min-width: max(220px, calc(31 * var(--u)));
  height: max(46px, calc(6.2 * var(--u)));
  font-size: max(1rem, calc(1.4 * var(--u)));
  box-shadow: 0 0 calc(2.4 * var(--u)) rgba(255, 255, 255, .6), 0 8px 20px rgba(150, 60, 90, .2);
}

/* ---------- Mission + Sådan virker det (lysegrøn) ---------- */
.mission2 { position: relative; overflow: hidden; padding: calc(8 * var(--u)) 20px calc(6 * var(--u)); background: linear-gradient(180deg, #E8E6C6 0%, #DCE6C6 40%, #C3E1B8 78%, #ADD9A4 100%); color: #277A43; scroll-margin-top: 90px; }
.mission2-inner { position: relative; z-index: 1; max-width: calc(50 * var(--u)); min-width: min(100%, 300px); margin: 0 auto; font-size: max(1rem, calc(2.05 * var(--u))); line-height: 1.32; font-weight: 300; }
.mission2-inner > p, .mission2-inner > .cms-list > p { margin: 0 0 1.2em; }   /* .cms-list = afsnit, der kan rettes på redigeringssiden */
.howto { margin: calc(4 * var(--u)) calc(-2 * var(--u)) calc(5 * var(--u)) calc(3.3 * var(--u)); font-size: max(.8rem, calc(1.15 * var(--u))); font-weight: 400; color: #246F3E; scroll-margin-top: 90px; }
.howto p { margin: 0 0 .9em; }
.howto-title { margin: 0 0 .6em; font-family: var(--font-display); font-size: max(1.15rem, calc(2.2 * var(--u))); line-height: 1.25; }
.howto-steps { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; gap: 1.4em; }
.howto-steps li { display: flex; gap: .9em; align-items: flex-start; }
.howto-steps svg { flex-shrink: 0; width: max(28px, calc(3.6 * var(--u))); height: auto; fill: none; stroke: #246F3E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.howto-steps h4 { margin: 0 0 .15em; font-size: 1.05em; font-weight: 600; }
.howto-steps p { margin: 0; }

/* ---------- Side 2 på tablet/mobil: elementerne stables i stedet for at stå frit ---------- */
@media (max-width: 860px) {
  .why-hero { padding-top: 84px; }
  .why-stage { width: auto; height: auto; padding: 0 20px 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; justify-items: center; }
  .why-bg { display: none; }
  .why-title, .why-tagline, .why-card, .why-phone { position: static; }
  .why-title { grid-column: 1 / -1; font-size: 4.2rem; line-height: 1.05; text-align: center; }
  .why-tagline { grid-column: 1 / -1; font-size: 1.1rem; margin-bottom: .5rem; }
  .why-phone { height: auto; width: min(170px, 42vw); }
  .why-card { grid-column: 1 / -1; width: 100%; max-width: 420px; padding: 2rem 1.4rem 1.4rem; border-radius: 20px; margin-top: 1.4rem; }
  .why-card-badge { width: 46px; height: 46px; top: -22px; left: 16px; }
  .faelles-inner { width: auto; padding: 2rem 20px 2.5rem; }
  .faelles-logo { display: none; }
  .faelles-cols { grid-template-columns: 1fr; }
  .faelles-quote::before { left: -.15em; top: -.6em; }
  .invite2-stage { width: auto; height: auto; padding: 2rem 20px 6rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
  .invite2-phone, .invite2-heart, .invite2-title { position: static; }
  .invite2-phone-left { display: none; }
  .invite2-phone-right .phone { --w: min(220px, 55vw); }
  .invite2-heart { width: 34px; height: 31px; margin-top: 1rem; }
  .invite2-wave { height: 50px; }
  .invite2-btn { bottom: -40px; }
  .mission2 { padding-top: 4rem; }
  .mission2-inner { max-width: 560px; }
}

/* ---------- Kortene "Hilfe skaber rammerne": overskriften starter lige efter ikonet, brødteksten til venstre (som i Figma) ---------- */
.why-card { padding: calc(2.2 * var(--u)) calc(2 * var(--u)) calc(1.8 * var(--u)) calc(2.7 * var(--u)); text-align: left; }
.why-card h3 { margin: 0 0 .5em calc(3.3 * var(--u)); font-size: max(.9rem, calc(1.4 * var(--u))); white-space: nowrap; line-height: 1.2; }
.why-card p { margin: 0; }

/* ---------- Solen ved "Fælles at gøre tryghed til allemandseje" – som solen i appen (SunButton.jsx) ----------
   Tre runde lag (ydre ring, mellemring, kerne), hver todelt: hvid til venstre, en anelse orange til højre.
   Kun solen "trækker vejret" (appens breathe: 3,4 sek., 4 % større og en ring, der breder sig ud). Hjertet sidder i midten. */
.faelles-logo {
  display: block;
  padding: 6%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .62) 0 50%, color-mix(in srgb, rgba(255, 255, 255, .62) 88%, #FF9A52) 50% 100%);
  box-shadow: 0 16px 34px -14px rgba(100, 40, 15, .5);
  animation: sun-breathe 3.4s ease-in-out infinite;
}
.faelles-logo .sun-mid {
  display: block; width: 100%; height: 100%;
  padding: 8%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .78) 0 50%, color-mix(in srgb, rgba(255, 255, 255, .78) 88%, #FF9A52) 50% 100%);
}
.faelles-logo .sun-core {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, color-mix(in srgb, white 92%, #FFD280) 0 50%, color-mix(in srgb, white 88%, #FF9A52) 50% 100%);
}
/* Hjertet: farvet som solens tekst i appen (temafarven, en anelse lysere) og præcis i midten */
.faelles-logo .sun-core img { width: 56%; opacity: 1; translate: 0 4%;   /* optisk midte: et hjerte ser højt ud */ filter: brightness(0) saturate(100%) invert(68%) sepia(56%) saturate(1100%) hue-rotate(335deg) brightness(102%); }
@keyframes sun-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 16px 34px -14px rgba(100, 40, 15, .5), 0 0 0 0 hsl(24 89% 60% / .35); }
  50% { transform: scale(1.04); box-shadow: 0 16px 34px -14px rgba(100, 40, 15, .5), 0 0 0 calc(2.2 * var(--u)) hsl(24 89% 60% / 0); }
}
@media (prefers-reduced-motion: reduce) { .faelles-logo { animation: none; } }
/* Solen er en skjult knap til kontaktsiden: ingen synlig knap, men hånd-markør, og den vokser lidt ved hover */
a.faelles-logo { cursor: pointer; transition: scale .3s ease; }
a.faelles-logo:hover, a.faelles-logo:focus-visible { scale: 1.07; animation-play-state: paused; }
a.faelles-logo:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

/* Tekst kun for Google og skærmlæsere (usynlig på skærmen) – bruges i hovedoverskriften */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Privatlivspolitik (privatlivspolitik.html) ---------- */
.legal { padding: 1rem 20px 6rem; background: var(--orange-pale); }
.legal-card {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: calc(var(--radius) * 1.2);
  background: var(--white);
  box-shadow: var(--shadow);
  line-height: 1.6;
}
.legal-card h2 { margin: 2rem 0 .5rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--orange-deep); }
.legal-card ul { padding-left: 1.2rem; }
.legal-card li { margin-bottom: .5rem; }
.legal-card a { color: var(--orange-deep); }
.legal-updated { margin-top: 0; font-size: .9rem; color: #8a5a3c; }
.consent a { color: var(--orange-deep); }

/* ---------- 404-siden (404.html) ---------- */
.notfound { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.notfound-logo { width: 72px; margin: 0 auto 1rem; display: block; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; position: relative; z-index: 1; }

/* ---------- Læsbarhed (kontrast) ----------
   Hvid tekst på de lyse orange og pink flader er svær at læse for nogle. Uden at ændre farverne
   får den hvide brødtekst en svag, varm skygge og en anelse tykkere skrift. */
.hero-card, .about-text p, .about-card p, .invite-title, .invite2-title, .why-card p, .hero-lead, .cta p {
  text-shadow: 0 1px 3px rgba(130, 45, 15, .28);
}
.hero-card, .about-text p { font-weight: 400; }

/* ---------- Spørgsmål og svar (.faq) – fortsætter den grønne baggrund fra missionsteksten ----------
   Hvert spørgsmål er en <details>, der folder sig ud, når man trykker. Svarene står i index.html. */
.faq { position: relative; padding: 0 20px max(150px, calc(16 * var(--u))); background: linear-gradient(180deg, #ADD9A4 0%, #ADD9A4 calc(100% - max(220px, calc(22 * var(--u)))), #D9D79A calc(100% - max(90px, calc(9 * var(--u)))), var(--sky-1) 100%);   /* glider over i den orange himmel nedenunder */ color: #1F4F2E; scroll-margin-top: 90px; }
.faq-inner { max-width: max(300px, calc(56 * var(--u))); margin: 0 auto; }
.faq-title { margin: 0 0 1.2rem; font-family: var(--font-display); font-weight: 700; font-size: max(1.7rem, calc(3.4 * var(--u))); color: #1F5E35; text-align: center; }
.faq-item {
  margin-bottom: .75rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 6px 18px -10px rgba(30, 90, 50, .35);
  transition: background .25s;
}
.faq-item[open] { background: rgba(255, 255, 255, .85); }
.faq-item summary {
  position: relative;
  padding: 1.05rem 3.2rem 1.05rem 1.3rem;
  font-weight: 500;
  font-size: max(1rem, calc(1.45 * var(--u)));
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Plus, der bliver til minus */
.faq-item summary::before, .faq-item summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%;
  width: 14px; height: 2px; border-radius: 2px; background: #2C7F49;
  transition: transform .25s;
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0deg); }
.faq-item summary:focus-visible { outline: 3px solid #2C7F49; outline-offset: 2px; border-radius: 18px; }
.faq-item p { margin: 0; padding: 0 1.3rem 1.2rem; font-weight: 300; font-size: max(.95rem, calc(1.3 * var(--u))); line-height: 1.5; }
.faq-item a { color: #1F5E35; font-weight: 500; }

/* Mobil: kortene "Hilfe skaber rammerne" får plads til ikonet over overskriften
   (reglerne ovenfor uden @media overskrev ellers mobilens luft, så ikonet dækkede ordet "Hilfe") */
@media (max-width: 860px) {
  .why-card { padding: 2.1rem 1.4rem 1.4rem; }
  .why-card h3 { margin-left: 0; white-space: normal; font-size: 1.1rem; }
  .why-card p { font-size: .95rem; }
}

/* Logoet i bunden skal være hvidt (i menuen er det sort, fordi sort bliver gennemsigtigt der) */
.site-footer .nav-logo { filter: none; }

/* Små telefoner: lange overskrifter (fx "Privatlivspolitik") skal kunne være på én linje */
@media (max-width: 420px) {
  .contact-hero .display { font-size: clamp(2rem, 10.5vw, 2.8rem); overflow-wrap: anywhere; }
}

/* Mobil: overskrifterne flyder naturligt (de faste linjeskift fra computer-designet giver enlige ord på små skærme),
   undertitlen under "How / Why" centreres som overskriften, og nedtællingen får lidt mere luft */
@media (max-width: 860px) {
  .why-tagline { text-align: center; }
}
@media (max-width: 420px) {
  .invite-title br, .about-title br { display: none; }
  .invite-title { font-size: min(2.3rem, 10.5vw); text-wrap: balance; }
  .about-title { font-size: min(2.2rem, 10vw); text-wrap: balance; }
  .cd-box { font-size: min(1.45rem, 6.6vw); padding: 0 .3rem; }
}

/* Læsbarhed på kontakt- og privatlivssiden: feltnavne, links og små overskrifter i mørkere orange (kontrast over 4,5:1) */
.field label, .consent a, .legal-card a, .contact-info li strong { color: #B5480C; }
.contact-info li strong { color: #A8430B; }

/* Elementer, der er slået fra på myhilfe.dk/admin (hidden), vises aldrig – heller ikke hvis anden CSS siger andet */
[hidden] { display: none !important; }

/* ---------- Banner med en kort besked (myhilfe.dk/admin → Visning) ---------- */
.cms-banner {
  position: fixed; z-index: 60; left: 50%; bottom: 18px; translate: -50% 0;
  display: flex; align-items: center; gap: .6rem;
  width: max-content; max-width: calc(100vw - 24px);
  padding: .7rem .7rem .7rem 1.2rem;
  border-radius: 999px;
  background: #fff; color: #3a2a2a;
  box-shadow: 0 12px 30px rgba(90, 40, 20, .25);
  font-size: .95rem; line-height: 1.35;
}
.cms-banner p { margin: 0; }
.cms-banner a { color: #B5480C; font-weight: 600; white-space: nowrap; }
.cms-banner-luk { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #FFE3AE; color: #B5480C; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cms-banner-luk:focus-visible { outline: 3px solid #B5480C; outline-offset: 2px; }
@media (max-width: 600px) { .cms-banner { border-radius: 18px; bottom: 12px; } }

/* ---------- Knapper til App Store og Google Play (vises, når links er udfyldt på /admin) ---------- */
.store-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1.2rem 0 0; position: relative; z-index: 1; }
.store-btn { min-width: 200px; }

/* ---------- Artikler (public/artikler/ – laves af scripts/indhold.mjs) ---------- */
.artikel-hero .display { font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.08; text-wrap: balance; }
.artikel-meta { margin: 0 0 1rem; }
.artikel-meta a { color: #fff; font-weight: 600; text-decoration: none; text-shadow: 0 1px 3px rgba(130, 45, 15, .28); }
.artikel-meta a:hover { text-decoration: underline; }
.artikel-billede { margin: 0 0 1.6rem; }
.artikel-billede img, .artikel-tekst img { display: block; width: 100%; height: auto; border-radius: 16px; }
.artikel-tekst { font-size: 1.08rem; line-height: 1.7; }
.artikel-tekst h2 { margin: 2rem 0 .6rem; font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: #B5480C; }
.artikel-tekst h3, .artikel-tekst h4 { margin: 1.6rem 0 .4rem; font-size: 1.15rem; color: #8a3a0c; }
.artikel-tekst blockquote { margin: 1.4rem 0; padding: .4rem 0 .4rem 1.2rem; border-left: 4px solid #FFC36E; font-style: italic; color: #5a4038; }
.artikel-tekst figure { margin: 1.6rem 0; }
.artikel-tekst a { color: #B5480C; }
.artikel-tekst hr { margin: 2rem 0; border: 0; border-top: 2px solid #FFE3AE; }
.artikel-cta { margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-radius: 18px; background: #FFF4E0; text-align: center; }
.artikel-cta p { margin: 0 0 .9rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #8a3a0c; }
.artikel-liste { list-style: none; display: grid; gap: 1rem; padding: 0; }
.artikel-kort a { display: block; padding: 1.4rem 1.6rem; border-radius: 20px; background: #fff; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: translate .25s, box-shadow .25s; }
.artikel-kort a:hover { translate: 0 -3px; box-shadow: 0 22px 44px rgba(90, 40, 20, .22); }
.artikel-kort h2 { margin: .2rem 0 .4rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.6rem); color: #B5480C; }
.artikel-kort p { margin: 0; line-height: 1.5; }
.artikel-dato { font-size: .85rem; color: #8a5a3c; }


/* ════════════════════════════════════════════════════════════════════
   FORSIDEN og UNDERSIDERNE "Vores vision" og "Spørgsmål og svar"
   ════════════════════════════════════════════════════════════════════ */

/* ---------- Forsiden: "Hilfe er skabt til dig" ----------
   Starter i nedtællingens fersken og ender i dyb pink, som "Vi er alle én" fortsætter */
.about {
  padding-top: 3.5rem;
  background: linear-gradient(180deg, #FFBE75 0%, #FFCFAE 12%, #FFBEC2 26%, #FDA7C5 42%, #F78AB6 58%, #EE6A9C 74%, #E8508A 90%, #E64C87 100%);
}
.about-intro { max-width: 640px; margin: 0 auto 1rem; }
.about-intro .about-title { margin-bottom: .6rem; }
.about-sub { margin: 0; color: #E2457F; font-weight: 400; font-size: max(.95rem, calc(1.45 * var(--u))); }

/* Taleboblen over den venstre telefon (orange, med en lille spids nedad) */
.about-bubble {
  position: absolute; z-index: 2; left: 0; top: 6%;
  max-width: 34%; margin: 0; padding: .75em 1em;
  border-radius: 14px; background: rgba(247, 133, 58, .88); color: #fff;
  font-size: max(.75rem, calc(1.1 * var(--u))); line-height: 1.35;
  box-shadow: 0 10px 24px rgba(200, 80, 30, .25);
}
.about-bubble::after {
  content: ""; position: absolute; left: 1.4em; bottom: -9px;
  border: 10px solid transparent; border-bottom: 0; border-top-color: rgba(247, 133, 58, .88);
}

/* "Hjælp lige ved hånden, hvor end du er" */
.about-text { max-width: 640px; }
.about-title-2 { margin-top: 1rem; }

@media (max-width: 720px) {
  .about-bubble { position: relative; left: auto; top: auto; max-width: none; margin: 0 0 1.5rem; }
  .about-phones { aspect-ratio: auto; height: calc((100vw - 40px) * .85); }
}

/* ---------- Forsiden: "Vi er alle én" (pink) ----------
   Fortsætter den dybe pink fra "Hjælp lige ved hånden". Hånden med telefonen stikker ud over højre kant */
.together {
  position: relative; overflow: hidden;
  padding: 3rem 0 4rem;
  background: linear-gradient(180deg, #E64C87 0%, #E8598F 35%, #EE7AA6 65%, #F894B7 85%, #FFA9C6 100%);   /* slutter i How/Why-farven */
  color: #fff;
}
.together-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2rem;
}
.together-title {
  margin: 0 0 2.2rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.12; letter-spacing: -.01em;
  color: #fff;
}
.together-btn { min-width: min(100%, 300px); }
.together-phone {
  width: 100%; max-width: 460px; height: auto; justify-self: end;
  margin-right: calc(-1 * max(20px, (100vw - var(--container)) / 2) - 10px);   /* ud til skærmens kant */
  filter: drop-shadow(0 30px 40px rgba(140, 20, 60, .3));
}
.together-points {
  position: relative; z-index: 1;
  list-style: none; margin-top: 3.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  text-align: center;
}
.together-point svg { display: block; margin: 0 auto .6rem; color: rgba(255, 255, 255, .9); }
.together-point h3 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: clamp(1.1rem, 1.9vw, 1.4rem); color: #fff; }
.together-point p { margin: 0; font-size: .95rem; font-weight: 300; color: rgba(255, 255, 255, .92); }

@media (max-width: 860px) {
  .together-inner { grid-template-columns: 1fr; text-align: center; }
  .together-phone { justify-self: center; max-width: 340px; margin-right: 0; }
  .together-points { grid-template-columns: 1fr; gap: 1.8rem; margin-top: 2.5rem; }
}

/* ---------- Vores vision: den grønne del ("Vores ambitioner") ----------
   En overskrift, en større indledning, de tre trin som et lyst kort og en fremhævet sidste sætning */
.mission2 { padding-top: calc(6 * var(--u)); }
.mission2-inner { max-width: 680px; }
.mission2-title {
  margin: 0 0 1.4rem; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.1;
  color: #1F6B39;
}
.mission2-inner > .cms-list:first-of-type > p:first-child { font-size: 1.18em; font-weight: 400; color: #1F6B39; }

.howto {
  position: relative; left: 50%; translate: -50% 0;
  width: min(1000px, calc(100vw - 40px)); margin: 3rem 0 3.4rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: 32px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 20px 50px rgba(40, 110, 60, .14);
  text-align: center;
  font-size: 1rem; line-height: 1.5;
}
.howto-title { font-size: clamp(1.4rem, 2.8vw, 2rem); color: #1F6B39; }
.howto > .cms-list { max-width: 620px; margin: 0 auto; }
.howto-steps { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.howto-steps li {
  flex-direction: column; align-items: center; gap: .8rem;
  padding: 1.6rem 1.2rem; border-radius: 22px; background: rgba(255, 255, 255, .75);
}
.howto-steps svg {
  width: 58px; height: 58px; padding: 13px; box-sizing: border-box;
  border-radius: 50%; background: #DDEFD6;
}
.howto-steps h4 { font-size: 1.05rem; color: #1F6B39; }
.howto-steps p { font-size: .95rem; }

/* Sidste sætning ("Vi tror på, at selv de mindste handlinger …") fremhæves */
.mission2-inner > .cms-list:last-child > p:last-child {
  margin-top: 2rem; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25em; line-height: 1.35; color: #1F6B39;
}

@media (max-width: 860px) {
  .howto-steps { grid-template-columns: 1fr; }
}

/* ---------- Spørgsmål og svar (egen side) ---------- */
.faq-hill { fill: #ADD9A4; }          /* bakken glider over i den grønne baggrund under spørgsmålene */
.page-faq .faq { padding-top: 1rem; }


/* ---------- Kontaktsiden: toppen, fire emner, "Vores vision rækker langt" og formularen ---------- */
.kontakt-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-pad, 20px) + 6.5rem) 0 2.5rem;
  background: linear-gradient(180deg, #E9E8CB 0%, #DFE7CA 100%);
  color: #1D2B24;
}
.kontakt-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem; }
.kontakt-title {
  margin: 0 0 1.6rem;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.08; letter-spacing: -.01em;
  max-width: 9.5em;
}
.kontakt-bubble {
  display: inline-block; margin: 0 0 1.2rem; padding: .9rem 1.3rem;
  border-radius: 20px 20px 20px 6px;
  background: rgba(255, 255, 255, .6); box-shadow: 0 10px 26px rgba(60, 90, 50, .1);
  font-size: 1.05rem; color: #4B5A50;
}
.kontakt-lead { max-width: 30em; margin: 0; font-weight: 300; line-height: 1.55; }
.kontakt-phone { justify-self: center; width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 30px 40px rgba(40, 60, 40, .25)); }

.kontakt-emner { padding: 2.5rem 0 5rem; background: linear-gradient(180deg, #DFE7CA 0%, #D6E6C6 100%); color: #1D2B24; }
.kontakt-emner-title {
  margin: 0 0 2.8rem; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15;
}
.kontakt-emner-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.kontakt-emne {
  display: block; height: 100%; padding: 1.2rem 1rem 1.4rem; border-radius: 24px;
  color: inherit; text-decoration: none;
  transition: background .25s, translate .25s, box-shadow .25s;
}
.kontakt-emne svg { display: block; margin-bottom: 1rem; color: #2C5F55; transition: color .25s, scale .25s; }
.kontakt-emne h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700; }
.kontakt-emne p { margin: 0; font-size: .92rem; font-weight: 300; line-height: 1.5; }
.kontakt-emne:hover, .kontakt-emne:focus-visible { background: rgba(255, 255, 255, .55); translate: 0 -4px; box-shadow: 0 16px 34px rgba(50, 90, 60, .12); }
.kontakt-emne:hover svg { color: #1F6B39; scale: 1.06; }
.kontakt-emne:focus-visible { outline: 3px solid #2C5F55; outline-offset: 3px; }

.kontakt-vision { padding: 4.5rem 0; background: linear-gradient(180deg, #FFE7C2 0%, #FFE3AE 100%); color: #3A2A2A; }
.kontakt-vision-title {
  margin: 0 0 2rem;
  font-family: var(--font-body); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1;
}
.kontakt-vision-img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 28px; margin-bottom: 2rem; box-shadow: var(--shadow); }
.kontakt-vision-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.kontakt-vision-row p { max-width: 34em; margin: 0; font-size: 1.1rem; font-weight: 300; line-height: 1.6; }
.kontakt-vision-btn { flex: none; min-width: 240px; }

.kontakt-form-section { padding-top: 4rem; background: linear-gradient(180deg, #B5DDA9 0%, #9FD398 100%); }
.kontakt-side-title { margin: .4rem 0 1.6rem; font-family: var(--font-body); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; color: #1D2B24; }

@media (max-width: 860px) {
  .kontakt-hero { padding-top: 6.5rem; }
  .kontakt-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .kontakt-title { margin-inline: auto; }
  .kontakt-lead { margin-inline: auto; }
  .kontakt-phone { max-width: 260px; }
  .kontakt-emner-list { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .kontakt-vision-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .kontakt-emner-list { grid-template-columns: 1fr; }
}

/* ---------- "Hilfe er skabt til dig": størrelser og farver ----------
   Større overskrift og undertitel, lys creme øverst (bliver lyserød ved telefonerne) og større telefoner */
.about {
  background: linear-gradient(180deg, #FFBE75 0%, #FFDCA6 7%, #FFE3B2 18%, #FFD3BC 34%, #FFC0C6 46%, #FDA7C5 56%, #F78AB6 66%, #EE6A9C 78%, #E8508A 92%, #E64C87 100%);
}
.about-intro { max-width: 820px; margin-bottom: 1.6rem; text-align: center; }
.about-intro .about-title { font-size: clamp(2.2rem, 4.6vw, 4.1rem); line-height: 1.04; margin-bottom: 1.2rem; color: #E8538A; }
.about-sub { font-size: clamp(1rem, 1.55vw, 1.32rem); font-weight: 300; color: #E8538A; }
.about-phones { --fw: min(calc(92 * var(--u)), 100vw - 40px); }
.about-phone-left  { left: 12%; top: 16%; }
.about-phone-right { left: 56%; top: 0; }
.about-phone-left .phone  { --w: calc(var(--fw) * .33); }
.about-phone-right .phone { --w: calc(var(--fw) * .36); }
.about-bubble { left: 6%; top: 3%; max-width: 34%; font-size: max(.9rem, calc(1.45 * var(--u))); line-height: 1.4; padding: 1em 1.3em; border-radius: 18px; }
@media (max-width: 720px) {
  .about-bubble { position: relative; left: auto; top: auto; max-width: 52%; margin: 0; font-size: .82rem; }
  .about-phones { height: calc((100vw - 40px) * 1.05); }
  .about-phone-right { top: 16%; }
  .about-phone-left { top: 34%; }
}

/* "Hjælp lige ved hånden, hvor end du er" og teksten under den: centreret (som "Hilfe er skabt til dig") */
.about-text { text-align: center; }
.about-text p { margin-left: auto; margin-right: auto; }

/* ---------- "Vi er alle én" – strammere opsætning ----------
   Telefonen står ved teksten (ikke ude ved skærmkanten), overskriften må ikke efterlade et ord alene,
   og de tre punkter er tydelige kort med ikonet i en hvid cirkel */
.together { padding: 3.5rem 0 3.5rem; }
.together-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.5rem; max-width: 1080px; }
.together-title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); text-wrap: pretty; }
.together-phone { max-width: 380px; margin-right: 0; justify-self: center; }
.together-points { margin-top: 2.5rem; gap: 1.4rem; max-width: 1080px; }
.together-point {
  padding: 1.8rem 1.5rem 1.6rem; border-radius: 26px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 16px 36px rgba(150, 30, 70, .16);
}
.together-icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: 50%; background: #fff; color: #E64C87;
  box-shadow: 0 8px 20px rgba(150, 30, 70, .2);
}
.together-point h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: .4rem; }
.together-point p { font-size: 1rem; font-weight: 400; color: #fff; }
@media (max-width: 860px) {
  .together-inner { grid-template-columns: 1fr; }
  .together-phone { max-width: 300px; }
}
.together-icon svg { margin: 0; color: #E64C87; }   /* ikonet i den hvide cirkel */
/* Hånden er skåret af i højre side og i bunden af billedet – den toner blødt ud, så kanten ikke ses */
.together-phone {
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 99%), linear-gradient(to bottom, #000 72%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 78%, transparent 99%), linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-composite: intersect;
}
/* Ingen skygge på hånden (billedet har sin egen glød, og skyggen blev skåret af udtoningen) */
.together-phone { filter: none; }
/* De tre punkter fremhævet: hvide kort, pink overskrift og et hvidt ikon i en pink cirkel */
.together-point { background: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .9); box-shadow: 0 18px 40px rgba(150, 30, 70, .22); }
.together-icon { width: 76px; height: 76px; background: linear-gradient(135deg, #F06A9C, #E2457F); box-shadow: 0 10px 22px rgba(226, 69, 127, .35); }
.together-icon svg { width: 36px; height: 36px; color: #fff; }
.together-point h3 { color: #D63B74; }
.together-point p { color: #6E3550; }

/* ---------- Invitationen ("Hilfe lanceres snart"): to telefoner, der fortæller historien ----------
   1. Alarmen tæller ned (venstre, drejet lidt mod venstre) → 2. vennens låseskærm med beskeden (højre, lidt lavere).
   Telefonerne står tæt og overlapper en smule; et mærke ved hver forklarer, hvad man ser. Overskriften centreres under. */
.invite2-stage { height: auto; padding: calc(6 * var(--u)) 20px calc(14 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.invite2-pair { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; }
.invite2-phone, .invite2-phone-left, .invite2-phone-right { position: relative; left: auto; top: auto; }
.invite2-phone .phone { --w: min(calc(25 * var(--u)), 280px); }
.invite2-phone-left .phone  { transform: perspective(1800px) rotateY(10deg) rotateZ(-7deg); }
.invite2-phone-right .phone { transform: perspective(1800px) rotateY(-10deg) rotateZ(6deg); }
.invite2-phone-left  { z-index: 1; margin-right: calc(-2.5 * var(--u)); }
.invite2-phone-right { z-index: 2; margin-left: calc(-2.5 * var(--u)); margin-top: calc(7 * var(--u)); }
.invite2-tag {
  position: absolute; z-index: 3; margin: 0; padding: .65em 1.1em;
  border-radius: 999px; background: #fff; color: #C2510F;
  font-size: max(.85rem, calc(1.2 * var(--u))); font-weight: 500; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(150, 60, 20, .22);
}
.invite2-tag strong { color: #E2601C; font-weight: 700; margin-right: .15em; }
.invite2-tag-left  { right: 78%; top: 30%; }
.invite2-tag-right { left: 78%; top: 56%; }
.invite2-heart { position: static; margin-top: calc(5 * var(--u)); }
.invite2-title { position: static; margin-top: calc(1.6 * var(--u)); text-align: center; }

@media (max-width: 860px) {
  .invite2-stage { padding: 3rem 20px 6rem; }
  .invite2-phone-left { display: block; }
  .invite2-phone .phone { --w: min(165px, 40vw); }
  .invite2-phone-right { margin-top: 2.5rem; }
  .invite2-tag { position: static; display: inline-block; margin-top: 1.2rem; white-space: normal; text-align: center; max-width: 42vw; }
  .invite2-phone { display: flex; flex-direction: column; align-items: center; }
}

/* Invitationen med tre telefoner i en vifte: den midterste (alarmen) forrest og højest, siderne drejet udad og lidt lavere */
.invite2-trio .phone { --w: min(calc(22 * var(--u)), 250px); }
.invite2-trio .invite2-phone-left  { z-index: 1; margin: calc(6 * var(--u)) calc(-3 * var(--u)) 0 0; }
.invite2-trio .invite2-phone-mid   { z-index: 3; margin: 0; }
.invite2-trio .invite2-phone-right { z-index: 2; margin: calc(6 * var(--u)) 0 0 calc(-3 * var(--u)); }
.invite2-trio .invite2-phone-left .phone  { transform: perspective(1800px) rotateY(14deg) rotateZ(-8deg); }
.invite2-trio .invite2-phone-mid .phone   { transform: none; }
.invite2-trio .invite2-phone-right .phone { transform: perspective(1800px) rotateY(-14deg) rotateZ(8deg); }
.invite2-trio .invite2-tag-left  { right: 72%; left: auto; top: 22%; }
.invite2-trio .invite2-tag-mid   { left: 50%; translate: -50% 0; top: auto; bottom: -1.6rem; }
.invite2-trio .invite2-tag-right { left: 72%; top: 60%; }
@media (max-width: 860px) {
  .invite2-trio { flex-wrap: wrap; row-gap: 1.5rem; }
  .invite2-trio .phone { --w: min(140px, 30vw); }
  .invite2-trio .invite2-phone-left, .invite2-trio .invite2-phone-right { margin: 1.5rem 0 0; }
  .invite2-trio .invite2-tag-mid { translate: none; }
  .invite2-trio .invite2-tag { font-size: .78rem; max-width: 30vw; padding: .5em .7em; }
}

/* Låseskærmen i invitationen: dato og klokkeslæt er rigtig tekst (den besøgendes tid – sættes af js/main.js).
   Målene følger skærmbilledet (780 × 1688): datoen står ca. 9 % nede, klokkeslættet ca. 12,5 % nede. */
.invite2 .screen { container-type: inline-size; }
.lock-clock { position: absolute; inset: 0; pointer-events: none; color: #F4F1F4; font-family: var(--font-body); text-align: center; }
.lock-date, .lock-time { position: absolute; left: 0; right: 0; line-height: 1; }
.lock-date { top: 18.4cqw; font-size: 5.5cqw; font-weight: 500; letter-spacing: .01em; opacity: .92; }   /* målt: datoen står 150–181 px nede på 780 px bredde */
.lock-time { top: 24.6cqw; font-size: 19.6cqw; font-weight: 600; letter-spacing: -.01em; }              /* målt: tallene står 212–321 px nede */

/* Mærkerne ved de tre telefoner: diskrete billedtekster under telefonerne (ikke hen over skærmene).
   Et hvidt tal i en cirkel og hvid tekst – alle tre på samme linje (sidetelefonerne står lavere, så deres
   tekst rykkes mindre ned end den midterste). */
.invite2-trio { padding-bottom: 6.5rem; }
.invite2-trio .invite2-tag {
  top: calc(100% + 1.4rem); bottom: auto; left: 50%; right: auto; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  width: max(170px, calc(17 * var(--u))); padding: 0; white-space: normal; text-align: center;
  background: none; box-shadow: none; border-radius: 0;
  color: #fff; font-size: max(.9rem, calc(1.2 * var(--u))); font-weight: 400; line-height: 1.35;
  text-shadow: 0 1px 8px rgba(160, 70, 20, .25);
}
.invite2-trio .invite2-phone-mid .invite2-tag { top: calc(100% + 1.4rem + 6 * var(--u)); }
.invite2-trio .invite2-tag strong {
  display: grid; place-items: center; width: 2.1em; height: 2.1em; margin: 0;
  border-radius: 50%; background: #fff; color: #E2601C;
  font-size: .95em; font-weight: 700; text-shadow: none;
  box-shadow: 0 6px 16px rgba(160, 70, 20, .22);
}
@media (max-width: 860px) {
  .invite2-trio { padding-bottom: 0; }
  .invite2-trio .invite2-tag, .invite2-trio .invite2-phone-mid .invite2-tag {
    position: static; translate: none; width: auto; max-width: 30vw; margin-top: .9rem; font-size: .8rem;
  }
}

/* Tallet i alarmen (invitationen): et fast 5 i den røde cirkel (det faste tal er fjernet fra billedet).
   Målt i skærmbilledet (660 × 1428): tallet står midt i cirklen, 341–407 px nede, skrevet med Playfair. */
.alarm-count {
  position: absolute; z-index: 3; left: 0; right: 0; top: 46.6cqw;
  font-family: var(--font-display); font-weight: 700; font-size: 17.6cqw; line-height: 1;
  text-align: center; color: #fff; pointer-events: none;
}
/* Afstand mellem invitationen og den grønne del */
.invite2-stage { padding-bottom: calc(10 * var(--u)); }
.mission2 { padding-top: calc(3.5 * var(--u)); }

/* Bølgerne i bunden følger det sidste synlige afsnit: slutter siden grønt (ambitionerne på forsiden, Spørgsmål og svar,
   formularen på kontaktsiden), er den bagerste bakke en dybere grøn – ellers Hilfes orange.
   (Den bagerste bakke er en dybere tone af farven over den, som bakkerne i toppen.) */
/* (to separate :has – CSS tillader ikke :has inde i :has) */
body:has(main > section:is(.mission2, .faq, .kontakt-form-section):not([hidden])):not(:has(main > section:is(.mission2, .faq, .kontakt-form-section):not([hidden]) ~ section:not([hidden]):not(.mission2, .faq, .kontakt-form-section, .vision-page, .vision-cta))) {
  --footer-hill-back: #5FAF6B;
}

/* Landingspunktet: overgangen til den grønne formular-sektion lander midt i topbaren (top 12px + halv højde 27px) */
#kontaktformular { scroll-margin-top: 39px; }
@media (max-width: 860px) { #kontaktformular { scroll-margin-top: 36px; } }   /* mobil: top 10px + halv højde 26px */

/* ════════ Kontaktsiden: farver, emner, vision og formular ════════ */
.kontakt-hero { padding-bottom: 0; background: linear-gradient(180deg, #E6E9CB 0%, #DCE6CF 60%, #D3E4D7 100%); color: #141A17; }
.kontakt-hero-inner { grid-template-columns: 1.05fr .95fr; align-items: end; }
.kontakt-hero-text { padding-bottom: 4.5rem; }
.kontakt-title { font-weight: 400; font-size: clamp(2.8rem, 6.6vw, 5.4rem); line-height: 1.12; letter-spacing: -.015em; max-width: 7em; margin-bottom: 2rem; }
.kontakt-bubble {
  display: block; width: fit-content; max-width: 15em; margin-bottom: 1rem; padding: 1.1rem 1.5rem;
  border-radius: 24px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.35; color: #3D4A42;
}
.kontakt-lead { max-width: 24em; font-size: 1rem; color: #3D4A42; }
/* Telefonen hviler på kanten ned mod emnerne */
.kontakt-phone { align-self: end; max-width: 440px; margin-top: 2rem; margin-bottom: -2.5rem; position: relative; z-index: 2; filter: none; }

.kontakt-emner { padding: 5rem 0 5rem; background: linear-gradient(180deg, #D3E4D7 0%, #CBE2DC 50%, #C5E0E2 100%); color: #141A17; }
.kontakt-emner-title { color: #141A17; font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin-bottom: 3rem; }
.kontakt-emne { padding: 1.4rem 1.2rem 1.6rem; }
.kontakt-emne-ikon { display: block; width: auto; height: clamp(80px, 9vw, 112px); margin-bottom: 1.4rem; transition: scale .25s; }
.kontakt-emne:hover .kontakt-emne-ikon { scale: 1.06; }
.kontakt-emne h3 { font-weight: 500; font-size: 1.08rem; }
.kontakt-emne p { color: #4A5650; }
.kontakt-emne:hover, .kontakt-emne:focus-visible { background: rgba(255, 255, 255, .5); }

/* "Vores vision rækker langt": tekst til venstre, til højre et foto eller de fire hjerter fra visionssiden */
.kontakt-vision { padding: 5rem 0; background: linear-gradient(180deg, #C5E0E2 0%, #C0DFEC 100%); color: #141A17; }
.kontakt-vision-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.kontakt-vision-title { font-size: clamp(2.2rem, 4.8vw, 3.8rem); margin-bottom: 1.4rem; }
.kontakt-vision-text p { max-width: 30em; margin: 0 0 2rem; font-size: 1.12rem; line-height: 1.65; font-weight: 300; }
.kontakt-vision-img { margin: 0; max-height: 420px; }
.kontakt-vision-hjerter { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-decoration: none; }
.kontakt-vision-hjerter span {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 26px;
  background: rgba(255, 255, 255, .55); box-shadow: 0 14px 30px rgba(40, 90, 110, .12);
  transition: translate .3s, background .3s;
}
.kontakt-vision-hjerter span:nth-child(2) { translate: 0 1.4rem; }
.kontakt-vision-hjerter span:nth-child(4) { translate: 0 1.4rem; }
.kontakt-vision-hjerter img { width: 62%; height: auto; }
.kontakt-vision-hjerter:hover span { background: rgba(255, 255, 255, .8); }

/* Formularen på lyseblå (som i Figma) */
.kontakt-form-section { padding-top: 5rem; background: linear-gradient(180deg, #C0DFEC 0%, #B2DAF4 40%, #A3D3F7 100%); }
.kontakt-side-title { color: #141A17; }
.page-kontakt .contact-info { background: #FFF4DF; box-shadow: 0 16px 36px rgba(40, 90, 130, .14); }
.kontakt-side-h3 { margin: 2.2rem 0 1rem; font-family: var(--font-body); font-weight: 500; font-size: 1.5rem; color: #163E5C; }
.kontakt-mentorer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kontakt-mentorer-list li { display: flex; gap: .8rem; align-items: flex-start; }
.kontakt-mentorer-list svg { flex: none; color: #fff; filter: drop-shadow(0 2px 6px rgba(20, 60, 100, .25)); }
.kontakt-mentorer-list strong { display: block; font-weight: 600; font-size: 1.05rem; color: #163E5C; }
.kontakt-mentorer-list span { display: block; font-size: .88rem; line-height: 1.45; color: #2F5674; }
.kontakt-stoette-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.kontakt-stoette-list li { display: grid; place-items: center; padding: .7rem 1rem; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(40, 90, 130, .12); }
.kontakt-stoette-list img { display: block; height: 42px; width: auto; max-width: 150px; object-fit: contain; }

/* Bakken i bunden er blå på kontaktsiden (siden slutter lyseblå) */
body.page-kontakt:has(#kontaktformular) { --footer-hill-back: #6FB3E0; }

@media (max-width: 860px) {
  .kontakt-hero-inner { grid-template-columns: 1fr; }
  .kontakt-hero-text { padding-bottom: 0; }
  .kontakt-bubble { margin-inline: auto; }
  .kontakt-phone { justify-self: center; max-width: 280px; margin-bottom: -1.5rem; }
  .kontakt-emner { padding-top: 3.5rem; }
  .kontakt-vision-inner { grid-template-columns: 1fr; gap: 2rem; }
  .kontakt-vision-hjerter { max-width: 360px; }
}
/* Telefonens skygge er skåret af i billedets kant – den toner blødt ud mod højre og nedad */
.kontakt-phone {
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%), linear-gradient(to bottom, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 80%, transparent 100%), linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-composite: intersect;
}
.kontakt-vision-hjerter { max-width: 400px; justify-self: end; width: 100%; }
@media (max-width: 860px) { .kontakt-vision-hjerter { justify-self: start; max-width: 320px; } }

/* Toppen af kontaktsiden: telefonen står helt synlig og midt ud for teksten.
   Kun skyggen yderst til højre toner ud – den er skåret af i selve billedet. */
.kontakt-hero { padding-bottom: 3.5rem; }
.kontakt-hero-inner { align-items: center; gap: 1rem; }
.kontakt-hero-text { padding-bottom: 0; }
.kontakt-phone {
  align-self: center; justify-self: center; width: 100%; max-width: 470px; margin: 0;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}
.kontakt-emner { padding-top: 3.5rem; }
@media (max-width: 860px) {
  .kontakt-hero { padding-bottom: 1.5rem; }
  .kontakt-phone { max-width: 300px; margin: 1rem auto 0; }
}

/* ---------- Kontaktsiden, toppen ----------
   Telefonen og teksten flugter (begge centreret lodret), telefonen får luft til menuen og står på en blød, lys
   "sol" (som i appen). Taleboblen er en rigtig taleboble med hale, og emnerne er centreret under overskriften. */
.kontakt-hero { padding-top: calc(var(--nav-pad, 20px) + 8rem); padding-bottom: 2rem; }
.kontakt-hero-inner { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.kontakt-title { font-size: clamp(2.8rem, 6vw, 5rem); max-width: 8.5em; margin-bottom: 1.8rem; }
.kontakt-phone-wrap { position: relative; display: grid; place-items: center; }
.kontakt-phone-wrap::before {
  content: ""; position: absolute; z-index: 0; width: min(88%, 430px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, 0) 70%);
}
.kontakt-phone { position: relative; z-index: 1; max-width: 390px; }

.kontakt-bubble {
  position: relative; margin: 0 0 1.4rem; padding: .95rem 1.4rem;
  border: 0; border-radius: 22px 22px 22px 6px;
  background: #fff; color: #2F3B34; box-shadow: 0 14px 30px rgba(60, 90, 70, .14);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}
.kontakt-bubble::after {
  content: ""; position: absolute; left: 0; bottom: -10px;
  border-left: 14px solid #fff; border-bottom: 12px solid transparent;
}
.kontakt-lead { font-size: 1.08rem; line-height: 1.6; max-width: 26em; }

.kontakt-emner { padding-top: 3rem; }
.kontakt-emner-title { margin-bottom: 2.4rem; }
.kontakt-emne { text-align: center; }
.kontakt-emne-ikon { margin-inline: auto; }
.kontakt-emne p { max-width: 17em; margin-inline: auto; }

@media (max-width: 860px) {
  .kontakt-hero { padding-top: 6.5rem; }
  .kontakt-hero-inner { grid-template-columns: 1fr; }
  .kontakt-bubble { margin-inline: auto; }
  .kontakt-phone { max-width: 280px; }
  .kontakt-phone-wrap::before { width: 320px; }
}
/* Billedets svage dis går helt ud til kanten – den toner ud til højre og nedad, så der ikke ses en firkant */
.kontakt-phone {
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.kontakt-emner { padding-bottom: 3.5rem; }

/* ════════ Kontaktsiden: lilla-blåt tema (pink → lavendel → dyb lilla-blå) ════════ */
.page-kontakt { --k-ink: #4A41D4; --k-ink-soft: #6A62DF; }
.kontakt-hero { background: linear-gradient(180deg, #FFAFC9 0%, #FDB4CF 35%, #EDB8DE 75%, #DDBCEA 100%); }
.kontakt-title { color: var(--k-ink); }
.kontakt-lead { color: var(--k-ink-soft); }
.kontakt-bubble { color: #4B4470; padding-left: 1.6rem; }
/* Et lille Hilfe-hjerte på taleboblens hjørne */
.kontakt-bubble::before {
  content: ""; position: absolute; left: -16px; top: -16px; width: 38px; height: 38px; border-radius: 50%;
  background: #FF9DBD url("../img/hilfe-logo-white.webp") center / 62% no-repeat;
  box-shadow: 0 6px 14px rgba(200, 60, 120, .3);
}
.kontakt-phone-wrap::before { background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .3) 45%, rgba(255, 255, 255, 0) 70%); }
/* Navneskiltet ved telefonen */
.kontakt-phone-label {
  position: absolute; z-index: 2; left: 2%; top: 30%; margin: 0; padding: .65rem 1rem;
  display: flex; flex-direction: column; gap: .1rem;
  border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 12px 26px rgba(90, 60, 160, .2);
  font-size: .82rem; line-height: 1.25; color: #6B6590;
}
.kontakt-phone-label strong { font-size: .98rem; font-weight: 600; color: var(--k-ink); }

.kontakt-emner { background: linear-gradient(180deg, #DDBCEA 0%, #CDC0F0 55%, #BEC6F5 100%); }
.kontakt-emner-title { color: #2C2766; }
.kontakt-emne h3 { color: #2C2766; }
.kontakt-emne p { color: #5D5A85; }

.kontakt-vision { background: linear-gradient(180deg, #BEC6F5 0%, #B8C3F6 100%); }
.kontakt-vision-title { color: #2C2766; }
.kontakt-vision-text p { color: #3D3A66; }
/* Hjerterne fra visionssiden farves lilla, så de passer til temaet */
.kontakt-vision-hjerter img { filter: hue-rotate(115deg) saturate(1.3); }
.kontakt-vision-hjerter span { background: rgba(255, 255, 255, .5); box-shadow: 0 14px 30px rgba(70, 60, 170, .14); }

.kontakt-form-section { background: linear-gradient(180deg, #B8C3F6 0%, #A9AEF4 35%, #8C86EC 70%, #6F66E6 100%); }
.kontakt-side-title { color: #2C2766; }
.kontakt-side-h3 { color: #fff; }
.kontakt-mentorer-list strong { color: #fff; }
.kontakt-mentorer-list span { color: rgba(255, 255, 255, .85); }
.kontakt-mentorer-list svg { color: #fff; }

/* "Mød os her" */
.kontakt-social { padding: 3rem 0 4rem; background: linear-gradient(180deg, #6F66E6 0%, #5A50E2 100%); text-align: center; color: #fff; }
.kontakt-social-title { margin: 0 0 1.6rem; font-family: var(--font-body); font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: #fff; }
.kontakt-social-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; }
.kontakt-social-app {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px;
  background: #fff; color: #fff; box-shadow: 0 12px 26px rgba(30, 20, 120, .3);
  transition: translate .25s, box-shadow .25s;
}
.kontakt-social-app:hover, .kontakt-social-app:focus-visible { translate: 0 -4px; box-shadow: 0 18px 34px rgba(30, 20, 120, .38); }
.kontakt-social-app svg { width: 34px; height: 34px; stroke-width: 2; }
.app-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.app-tiktok { background: #111; }
.app-linkedin { background: #0A66C2; }
.app-facebook { background: #1877F2; }
.app-youtube { background: #FF0000; }
.app-x, .app-twitter { background: #000; }
.app-andet { background: var(--k-ink); }

/* Bakken i bunden er dyb lilla-blå på kontaktsiden */
body.page-kontakt:has(#kontaktformular) { --footer-hill-back: #4338CA; }

@media (max-width: 860px) {
  .kontakt-phone-label { left: 0; top: auto; bottom: 12%; }
}

/* Kontaktsiden: kortet med grundlæggerne over telefonen + et svagt Hilfe-hjerte bagved (som i Figma) */
.kontakt-phone-wrap::after {
  content: ""; position: absolute; z-index: 0; right: -4%; top: -10%; width: 46%; aspect-ratio: 1;
  background: url("../img/hilfe-logo-white.webp") center / contain no-repeat; opacity: .45;
}
.kontakt-stiftere {
  position: absolute; z-index: 2; top: 2%; right: 0; margin: 0; padding: .9rem 1.1rem;
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.4rem;
  border-radius: 18px; background: rgba(255, 237, 214, .92); box-shadow: 0 14px 30px rgba(120, 60, 120, .2);
  font-size: .78rem; line-height: 1.3;
}
.kontakt-stiftere li { display: flex; flex-direction: column; }
.kontakt-stiftere strong { font-weight: 600; font-size: .86rem; color: #3A2A2A; }
.kontakt-stiftere span { color: #B5480C; font-weight: 500; }
/* "Find os her" */
.kontakt-social-title { margin-bottom: .4rem; font-family: var(--font-display); font-weight: 700; }
.kontakt-social-handle { margin: 0 0 1.6rem; font-weight: 600; color: rgba(255, 255, 255, .9); letter-spacing: .02em; }
@media (max-width: 860px) {
  .kontakt-stiftere { position: relative; top: auto; right: auto; margin: 0 auto 1rem; order: -1; }
  .kontakt-phone-wrap { display: flex; flex-direction: column; align-items: center; }
}

/* ---------- Kontaktsiden: grundlægger-kortet med e-mails, den skjulte sol og den blå infoboks ---------- */
.kontakt-title { text-shadow: 0 0 22px rgba(255, 160, 90, .55), 0 0 2px rgba(255, 170, 100, .4); }   /* den orange glød fra Figma */
.kontakt-stiftere-kort {
  position: absolute; z-index: 2; top: 0; right: 0; padding: 1rem 1.2rem 1.1rem;
  border-radius: 18px; background: rgba(255, 228, 205, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 14px 30px rgba(120, 60, 120, .2);
}
.kontakt-stiftere-kort .kontakt-stiftere { position: static; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.kontakt-mails { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: .8rem; color: #3A2A2A; }
.kontakt-mails ul { list-style: none; margin: 0; padding: 0; text-align: center; font-size: .82rem; line-height: 1.5; }
.kontakt-mails a { color: #3A2A2A; text-decoration: none; }
.kontakt-mails a:hover { text-decoration: underline; color: var(--k-ink); }

/* Solen over infoboksen (logoet er flyttet ud af boksen) – en skjult knap */
.kontakt-sol {
  display: grid; place-items: center; width: min(240px, 70%); aspect-ratio: 1; margin: 0 auto 1.4rem; padding: 6%;
  border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0 50%, rgba(240, 225, 245, .55) 50% 100%);
  box-shadow: 0 16px 34px -14px rgba(60, 40, 140, .45);
  animation: sun-breathe 3.4s ease-in-out infinite; transition: scale .3s;
}
.kontakt-sol .sun-mid { display: block; width: 100%; height: 100%; padding: 8%; border-radius: 50%; background: linear-gradient(90deg, rgba(255, 255, 255, .75) 0 50%, rgba(245, 230, 245, .75) 50% 100%); }
.kontakt-sol .sun-core { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(90deg, #FFF2E0 0 50%, #FBE4D3 50% 100%); }
.kontakt-sol .sun-core img { width: 58%; translate: 0 4%; filter: brightness(0) saturate(100%) invert(72%) sepia(40%) saturate(900%) hue-rotate(330deg) brightness(103%); opacity: .8; }
.kontakt-sol:hover, .kontakt-sol:focus-visible { scale: 1.06; animation-play-state: paused; }
.kontakt-sol:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .kontakt-sol { animation: none; } }
.kontakt-hemmelig {
  position: relative; margin: -.4rem auto 1.4rem; max-width: 26em; padding: 1rem 1.3rem; text-align: center;
  border-radius: 20px; background: #fff; color: #3D3A66; box-shadow: 0 14px 30px rgba(60, 40, 140, .18);
  animation: hemmelig-ind .35s ease-out;
}
.kontakt-hemmelig a { color: var(--k-ink); font-weight: 600; }
@keyframes hemmelig-ind { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

/* Infoboksen i blå */
.page-kontakt .contact-info { background: linear-gradient(180deg, #E7ECFF 0%, #DCE3FF 100%); box-shadow: 0 16px 36px rgba(60, 60, 170, .16); }
.page-kontakt .contact-info h2 { color: var(--k-ink); }
.page-kontakt .contact-info li strong { color: #6A62DF; }
.page-kontakt .contact-info a { color: #2C2766; }

@media (max-width: 860px) {
  .kontakt-stiftere-kort { position: relative; top: auto; right: auto; margin: 0 auto 1rem; order: -1; }
}

/* Kontaktsiden, toppen: orange glød på overskriften, en halvgennemsigtig lyserød
   taleboble med lilla tekst og orange hjerte, og en varm orange glød midt i grundlægger-kortet */
.kontakt-title { text-shadow: 0 0 18px rgba(255, 150, 70, .75), 0 0 42px rgba(255, 170, 90, .45); }
/* Taleboblen har en fast farve, så halen nederst til venstre flugter med boblen */
.kontakt-bubble { background: #F8D9EC; border: 0; color: #6A55D8; box-shadow: 0 14px 30px rgba(150, 70, 140, .14); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kontakt-bubble::after { border-left-color: #F8D9EC; bottom: -11px; }
.kontakt-bubble::before { background-color: #FFAA6B; background-image: url("../img/hilfe-logo-white.webp"); box-shadow: 0 6px 16px rgba(230, 120, 60, .4); width: 46px; height: 46px; left: -22px; top: -22px; }
.kontakt-stiftere-kort { background: radial-gradient(ellipse at 50% 55%, rgba(255, 170, 110, .95) 0%, rgba(255, 205, 180, .9) 45%, rgba(255, 215, 215, .85) 100%); }
/* Hjertet øverst, kortet med grundlæggerne under det og telefonen under kortet */
.kontakt-phone-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 3.5rem; }
.kontakt-phone-wrap::after { right: auto; left: 50%; translate: -50% 0; top: 0; width: 34%; }
.kontakt-stiftere-kort { position: relative; top: auto; right: auto; z-index: 2; margin: 0 0 1.2rem; }
.kontakt-phone { max-width: 330px; }
.kontakt-phone-wrap::before { top: 42%; }
.kontakt-stiftere-kort { order: -1; }   /* kortet står over telefonen (det kommer efter billedet i HTML'en) */

/* Kontaktsiden, højre side af toppen:
   ingen lys cirkel bag telefonen (den blev skåret af ved næste afsnit), hjertet står helt synligt over kortet,
   og telefonen står midt under kortet (billedet har skyggen til højre, så telefonen rykkes lidt til højre) */
.kontakt-phone-wrap::before { content: none; }
.kontakt-phone-wrap { padding-top: 7.5rem; }
.kontakt-phone-wrap::after { top: 0; width: 120px; left: 50%; translate: -50% 0; right: auto; opacity: .55; }
.kontakt-phone { max-width: 320px; translate: 9% 0; }
@media (max-width: 860px) {
  .kontakt-phone-wrap { padding-top: 6.5rem; }
  .kontakt-phone-wrap::after { width: 96px; }
}

/* ════════ Kontaktsiden: toppen og emnerne efter kundens mockup ════════ */
/* Toppen: overskriften på tre linjer; til højre kortet med grundlæggerne og telefonen under kortet */
.kontakt-hero-inner { grid-template-columns: 1fr 1fr; align-items: start; }
.kontakt-hero-text { padding-top: 1rem; }
.kontakt-title { font-size: clamp(3rem, 6.4vw, 5.4rem); max-width: 5.8em; line-height: 1.14; margin-bottom: 2.2rem; }
.kontakt-lead { padding-left: 2rem; font-size: 1rem; }
.kontakt-phone-wrap { align-items: flex-end; padding-top: 5.5rem; }
.kontakt-phone-wrap::after { content: none; }   /* intet hjerte bag kortet */
.kontakt-stiftere-kort { margin: 0 4% 1rem 0; }
.kontakt-phone { max-width: 300px; translate: 18% 0; margin-right: 0; }

/* Emnerne venstrestillet (som i mockuppen) */
.kontakt-emne { text-align: left; }
.kontakt-emne-ikon { margin-inline: 0; }
.kontakt-emne p { margin-inline: 0; }
.kontakt-emner-title { color: #141A17; }

@media (max-width: 860px) {
  .kontakt-hero-inner { grid-template-columns: 1fr; }
  .kontakt-title { max-width: none; }
  .kontakt-lead { padding-left: 0; }
  .kontakt-phone-wrap { align-items: center; }
  .kontakt-stiftere-kort { margin: 0 auto 1rem; }
  .kontakt-phone { translate: 0 0; }
}

/* "Find os her": glider fra formularens lilla-blå over i lyslilla, mørkeblå skrift og en mørk lilla bakke i bunden */
.kontakt-social { background: linear-gradient(180deg, #6F66E6 0%, #A98BF2 30%, #D09EF8 60%, #D29CF8 100%); }
.kontakt-social-title { color: #1C1660; font-size: clamp(2.6rem, 5.6vw, 4.2rem); }
.kontakt-social-handle { color: #1C1660; }
body.page-kontakt:has(#kontaktformular) { --footer-hill-back: #4A2FA8; }

/* Mentorerne: centreret under formularen */
.kontakt-mentorer { max-width: 560px; margin: 3.5rem auto 0; }
.kontakt-mentorer .kontakt-side-h3 { text-align: center; margin-top: 0; }
/* Infoboksen står nederst i kolonnen, så dens bund flugter med formularens bund (kun når de står side om side) */
@media (min-width: 861px) {
  .page-kontakt .contact-grid { align-items: stretch; }
  .page-kontakt .kontakt-side { display: flex; flex-direction: column; }
  .page-kontakt .kontakt-side .contact-info { margin-top: 1.5rem; margin-bottom: 0; }
  /* Hjertet (solen) står midt mellem toppen af formularen og toppen af den blå boks – overskriften tæller ikke med */
  .page-kontakt .kontakt-side { position: relative; }
  .page-kontakt .kontakt-side-title { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
  .page-kontakt .kontakt-side .kontakt-sol { margin-block: auto; }
}
/* Kortet med grundlæggerne står midt over telefonen (som i originalen) */
@media (min-width: 861px) { .kontakt-stiftere-kort { translate: -24% 0; } }
/* Hjertet på taleboblens hjørne må ikke skæres af ved skærmens kant */
@media (min-width: 861px) { .kontakt-bubble { margin-left: 1.5rem; } }

/* ════════ Vores vision (vision.html) – lyserød øverst, der glider over i fersken og gul (som i Figma) ════════ */
.page-vision { --v-pink: #E8478A; --v-pink-soft: #EE5F98; --v-orange: #FF9800; }
.vision-side {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-pad, 20px) + 6.5rem) 0 4rem;
  background: linear-gradient(180deg, #FFA3C5 0%, #FFAFC6 28%, #FFC2BC 55%, #FFD6B0 78%, #FFE3AE 100%);
  color: var(--v-pink-soft);
}
.vision-col { position: relative; z-index: 1; max-width: 760px; }
.vision-ikon { display: block; width: clamp(160px, 22vw, 230px); height: auto; margin: 0 auto 2rem; }
.vision-title { margin: 0 auto 2.6rem; max-width: 22em; text-align: center; font-family: var(--font-body); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--v-pink); }
.vision-lead, .vision-tekst p { max-width: 34em; margin: 0 auto 1.2em; font-size: 1rem; line-height: 1.55; font-weight: 300; }
.vision-citat { margin: 2.4rem auto 2.8rem; max-width: 9.6em; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.3rem); line-height: 1.2; color: var(--v-pink); }
.vision-tekst { margin-bottom: 3rem; }

/* Trinene: fed titel og tekst, rykket lidt ind */
.vision-trin { list-style: none; max-width: 30em; margin: 0 auto 5rem; padding: 0 0 0 4rem; display: grid; gap: 2.6rem; }
.vision-trin h3 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--v-pink); }
.vision-trin p { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 300; }

/* De nummererede punkter: "01 · titel" til venstre, teksten rykket ind til højre under */
.vision-spor { list-style: none; max-width: 36em; margin: 0 auto 4rem; padding: 0; display: grid; gap: 4rem; }
.vision-spor h3 { margin: 0 0 .3rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--v-pink); }
.vision-spor-nr { font-variant-numeric: oldstyle-nums; }
.vision-spor p { margin: 0 0 0 auto; max-width: 21em; font-size: .95rem; line-height: 1.5; font-weight: 300; }

/* Afslutningen: orange hjerte med håndtryk og teksten – fører til kontaktformularen */
.vision-afslutning { display: block; max-width: 36em; margin: 0 auto; text-decoration: none; color: var(--v-orange); }
.vision-afslutning-ikon { display: block; width: clamp(110px, 13vw, 140px); height: auto; margin: 0 auto 2.4rem; transition: transform .25s; }
.vision-afslutning span { display: block; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.35; }
.vision-afslutning:hover .vision-afslutning-ikon, .vision-afslutning:focus-visible .vision-afslutning-ikon { transform: scale(1.06); }

/* Bakken i bunden får en dybere tone af sidens gule bund */
body.page-vision { --footer-hill-back: #FFC979; }

@media (max-width: 720px) {
  .vision-side { padding-top: 6.5rem; }
  .vision-trin { padding-left: 1.2rem; }
  .vision-spor p { margin-left: 1.2rem; max-width: none; }
}
.vision-side { color: #DB4682; }   /* brødteksten lidt mørkere end overskrifterne er lyse – så den kan læses på lyserød */
.vision-spor { gap: 3rem; }
@media (max-width: 720px) { .vision-title br { display: none; } }   /* på mobil brydes overskriften af sig selv */

/* ---------- Vores vision: finpudsning – bredere spalter, tidslinje ved trinene, skillelinjer og bløde detaljer ---------- */
.vision-col { max-width: 920px; }

/* Hjertet øverst: et blødt lys bagved, og det svæver stille (som skyerne) */
.vision-ikon { position: relative; filter: drop-shadow(0 18px 30px rgba(232, 71, 138, .25)); animation: vision-svaev 7s ease-in-out infinite; }
.vision-side::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--nav-pad, 20px) + 4rem); translate: -50% 0;
  width: min(520px, 90vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 40%, rgba(255, 255, 255, 0) 68%);
}
@keyframes vision-svaev { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .vision-ikon { animation: none; } }

.vision-title { max-width: 24em; margin-bottom: 1.6rem; letter-spacing: -.005em; }
/* En lille lyserød streg mellem overskriften og teksten */
.vision-title::after { content: ""; display: block; width: 56px; height: 3px; margin: 1.6rem auto 0; border-radius: 3px; background: linear-gradient(90deg, #FF7AB4, #FF1F7A); opacity: .7; }
.vision-lead { max-width: 40em; text-align: center; font-size: 1.12rem; line-height: 1.7; }

.vision-citat { max-width: none; width: fit-content; margin: 4.5rem auto 3.4rem; letter-spacing: -.01em; text-shadow: 0 10px 30px rgba(232, 71, 138, .12); }
.vision-tekst { max-width: 42em; margin: 0 auto 5rem; }
.vision-tekst p { max-width: none; font-size: 1.06rem; line-height: 1.75; }
.vision-tekst p:first-child { font-size: 1.22rem; line-height: 1.6; font-weight: 400; color: var(--v-pink); }

/* Trinene som en tidslinje: en tynd lyserød linje med små hjerter ud for hvert trin */
.vision-trin { position: relative; max-width: 38em; padding-left: 3.4rem; gap: 2.4rem; margin-bottom: 6rem; }
.vision-trin::before { content: ""; position: absolute; left: 11px; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(232, 71, 138, .5), rgba(232, 71, 138, .12)); }
.vision-trin li { position: relative; }
.vision-trin li::before {
  content: ""; position: absolute; left: calc(-3.4rem + 1px); top: .05rem; width: 22px; height: 22px; border-radius: 50%;
  background: #FFE9F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF1F7A' d='M12 21s-7.5-4.6-9.5-9.3C1 8.2 3.2 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.7 0 5.9 3.7 4.4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 4px 12px rgba(232, 71, 138, .25);
}
.vision-trin h3 { font-size: 1.08rem; }
.vision-trin p { font-size: 1.02rem; line-height: 1.6; }

/* De nummererede punkter: tynde skillelinjer, titel til venstre og teksten i en bredere spalte til højre */
.vision-spor { max-width: 46em; gap: 0; margin-bottom: 5.5rem; }
.vision-spor li { padding: 2.2rem 0; border-top: 1px solid rgba(232, 71, 138, .22); }
.vision-spor li:last-child { border-bottom: 1px solid rgba(232, 71, 138, .22); }
.vision-spor h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-bottom: .6rem; }
.vision-spor-nr { color: #FF7AB4; }
.vision-spor p { max-width: 27em; font-size: 1.02rem; line-height: 1.65; }

/* Afslutningen: hjertet hopper lidt, og teksten får en orange streg under, når man peger på den */
.vision-afslutning { max-width: 40em; text-align: center; }
.vision-afslutning-ikon { filter: drop-shadow(0 14px 24px rgba(255, 152, 0, .3)); margin-bottom: 2rem; }
.vision-afslutning span { display: inline; font-weight: 500; background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; transition: background-size .35s ease; }
.vision-afslutning:hover span, .vision-afslutning:focus-visible span { background-size: 100% 2px; }
.vision-afslutning:hover .vision-afslutning-ikon, .vision-afslutning:focus-visible .vision-afslutning-ikon { transform: scale(1.06) rotate(-3deg); }

@media (max-width: 720px) {
  .vision-citat { width: auto; margin-top: 3rem; }
  .vision-trin { padding-left: 2.6rem; }
  .vision-trin li::before { left: calc(-2.6rem + 1px); }
  .vision-spor p { margin-left: 0; }
}

/* ════════ Farver fra /admin → "Farver" ════════
   Standardfarverne står her. scripts/indhold.mjs sætter de valgte farver ind i <head> (<style id="cms-farver">).
   Hvert afsnit slutter med den farve, det næste begynder med – så overgangene altid er bløde. */
:root {
  --kf-top: #FFAFC9; --kf-emner: #DDBCEA; --kf-midt: #BEC6F5; --kf-formular: #6F66E6; --kf-bund: #D29CF8; --kf-overskrift: #4A41D4; --kf-bakke: #4A2FA8;
  --vf-top: #FFA3C5; --vf-midt: #FFC2BC; --vf-bund: #FFE3AE; --vf-overskrift: #E8478A; --vf-tekst: #DB4682; --vf-afslutning: #FF9800; --vf-bakke: #FFC979;
}
/* Kontaktsiden */
.page-kontakt { --k-ink: var(--kf-overskrift); }
.kontakt-hero { background: linear-gradient(180deg, var(--kf-top) 0%, color-mix(in oklab, var(--kf-top), var(--kf-emner) 45%) 40%, var(--kf-emner) 100%); }
.kontakt-emner { background: linear-gradient(180deg, var(--kf-emner) 0%, var(--kf-midt) 100%); }
.kontakt-vision { background: var(--kf-midt); }
.kontakt-form-section { background: linear-gradient(180deg, var(--kf-midt) 0%, color-mix(in oklab, var(--kf-midt), var(--kf-formular) 50%) 55%, var(--kf-formular) 100%); }
.kontakt-social { background: linear-gradient(180deg, var(--kf-formular) 0%, color-mix(in oklab, var(--kf-formular), var(--kf-bund) 55%) 30%, var(--kf-bund) 62%, var(--kf-bund) 100%); }
body.page-kontakt:has(#kontaktformular) { --footer-hill-back: var(--kf-bakke); }
/* Vores vision */
.page-vision { --v-pink: var(--vf-overskrift); --v-orange: var(--vf-afslutning); }
.vision-side {
  color: var(--vf-tekst);
  background: linear-gradient(180deg, var(--vf-top) 0%, color-mix(in oklab, var(--vf-top), var(--vf-midt) 40%) 28%, var(--vf-midt) 55%, color-mix(in oklab, var(--vf-midt), var(--vf-bund) 55%) 78%, var(--vf-bund) 100%);
}
.vision-trin::before { background: linear-gradient(180deg, color-mix(in srgb, var(--v-pink) 50%, transparent), color-mix(in srgb, var(--v-pink) 12%, transparent)); }
.vision-spor li { border-top-color: color-mix(in srgb, var(--v-pink) 22%, transparent); }
.vision-spor li:last-child { border-bottom-color: color-mix(in srgb, var(--v-pink) 22%, transparent); }
.vision-spor-nr { color: color-mix(in oklab, var(--v-pink), #fff 30%); }
body.page-vision { --footer-hill-back: var(--vf-bakke); }
/* Teksterne på kontaktsiden følger overskriftsfarven (lysere eller mørkere toner af den) */
.kontakt-lead { color: color-mix(in oklab, var(--kf-overskrift), #fff 18%); }
.kontakt-bubble { color: color-mix(in oklab, var(--kf-overskrift), #fff 12%); }
.kontakt-vision-title, .kontakt-side-title { color: color-mix(in oklab, var(--kf-overskrift), #000 35%); }
.kontakt-social-title, .kontakt-social-handle { color: color-mix(in oklab, var(--kf-overskrift), #000 55%); }