/* ============================================================
   Bettina Wismarch · Personlig Træner og Kostvejleder
   Én samlet side (okt. 2026), efter Bettinas eget layout-udkast:
   mørkt topbånd → velkomst med portræt → PT (foto + blå boks)
   → kost (laksefarvet boks + foto) → kontaktknap → uddannelser.
   ============================================================ */

/* ---------- Skrifter: ALLE ligger på siden selv (ingen Google Fonts) ----------
   Ingen besøgendes IP-adresse sendes til Google (GDPR). Siden henter ingenting
   fra andre servere — hold det sådan, se privatlivspolitikken. */

/* League Spartan (SIL Open Font License, se skrift/league-spartan-OFL.txt).
   Variabel skrift: én fil dækker alle vægte. "latin" har æ/ø/å; "latin-ext" tager
   sjældnere bogstaver (fx i navne folk skriver i formularen). Filerne er Google
   Fonts' egne woff2-udsnit (v15), hentet 2026-10-30. */
@font-face{
  font-family:'League Spartan';
  src:url('skrift/league-spartan-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'League Spartan';
  src:url('skrift/league-spartan-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kendra Signature (Picky Labs / Alma Letters) — KØBT licens 2026-10-19 (Desktop:
   "1 Website, up to 10,000 views/month"). Det er 2025-versionen (v1.001), som har
   æ ø å Æ Ø Å og &; den ældre 2022-version mangler æ. Originalpakken ligger
   git-ignoreret i /Font — kun webfilerne herunder er lagt på siden. */
@font-face{
  font-family:'Kendra Signature';
  src:url('skrift/kendra-signature.woff2') format('woff2'),
      url('skrift/kendra-signature.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --ink:#171521;
  --ink-2:#4A4655;
  --muted:#847E90;
  --line:#E2DFE8;

  /* Topbånd + kontaktknap: Bettinas præcise farvekoder (oplyst 2026-10-19), ensfarvet. */
  --nat:#1B1A4D;
  --is:#5CDBF1;          /* titel, navn og kontakt-tekst */
  --streg:#FBBCB7;       /* pink streg i toppen og rammen om kontaktknappen */
  --navnefont:'League Spartan', system-ui, sans-serif; /* Bettinas valg: League Spartan til navn og overskrifter */

  /* PT — dyb blå boks, hvid tekst */
  --pt:#2D2F8E;          /* dyb indigo — bygger bro mellem aubergine-toppen og blå */
  --pt-deep:#1E1A5C;

  /* Kost — laksefarvet boks, lilla tekst */
  --kost-boks:#FDDCCB;
  --lilla:#6D4C9B;
  --lilla-deep:#4E3373;

  /* Kontaktknap: samme blå som toppen */
  --kontakt:#1B1A4D;
  --kontakt-hover:#2A2970;
  --kruse:#F05BB5;       /* stjerne ved påkrævede felter i formularen */

  --signatur:'Kendra Signature', 'Segoe Script', cursive;
  --brod:'League Spartan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw:1080px;

  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sh:0 4px 14px rgba(23,21,33,.06), 0 22px 48px -22px rgba(23,21,33,.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0; overflow-x:clip; color:var(--ink);
  background:#fff;
  font-family:var(--brod); font-weight:300; font-size:17px; line-height:1.6; /* broedtekst: League Spartan Light */
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ padding:clamp(30px,4.6vw,64px) 0; }

/* ---------- Topbånd ----------
   Som hendes visitkort: blå bund, titlen på én linje i lyseblå signatur,
   navnet i lyseblå spærrede versaler, og den korte pink streg
   (her placeret OVER navnet, efter ønske). */
.top{
  background:var(--nat); /* ensfarvet, præcis Bettinas farve (ingen gradient) */
  color:var(--is); text-align:center;
  padding:clamp(30px,4.5vw,54px) 0 clamp(28px,4vw,46px);
}
/* Scriptfonte har kun én vægt — h1's faux-fed gør dem grødet. */
.titel{
  /* Kendra er bredere end den gamle skrift: størrelsen er sat, så titlen står på
     én linje fra ca. 900 px og opefter (ca. 17,4 × skriftstørrelsen bred). */
  font-family:var(--signatur); font-weight:400; letter-spacing:normal;
  color:var(--is); font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.3;
  margin:0 auto;
}
.titel > span{ display:inline; }
/* ---------- Bygget æ i titlen ----------
   Bettinas eget æ: Kendras "a" med halen skåret helt væk langs en skrå linje
   + Kendras "e". De tre tal er valgt af Bettina/brugeren i glide-værktøjet
   (som bruger PRÆCIS denne CSS) — skift dem kun her:
     --top  : snitlinjen ved a'ets blæk-top, andel af a'ets bredde
     --bund : snitlinjen ved a'ets blæk-bund, andel af a'ets bredde
     --epos : hvor e'et starter, andel af a'ets bredde
   Faste tal fra fontfilen (Kendra 2025): a-bredde 0,627em; a'ets blæk går fra
   0,40867em over til 0,087em under grundlinjen (højde 0,49567em).
   --b er grundlinjens afstand fra boksens top ved line-height:1 med Kendras
   typo-metrik ((1 + 1,314 − 0,834) / 2 = 0,74em; målt 0,741em ved 220 px —
   små størrelser måles skævt pga. afrunding, brug derfor den beregnede).
   Kun aktiv når Kendra faktisk er indlæst (html.kendra-klar); ellers vises et
   almindeligt æ i reserveskriften. */
.ord{ white-space:nowrap; } /* ord med bygget æ må ikke knække midt i (se api/forside.js) */
/* Bogstaverne tegnes som ::before, så de ikke står i sidens tekst (se api/forside.js) */
.ae-a::before{ content:'a'; }
.ae-e::before{ content:'e'; }
.ae-bygget{ display:none; user-select:none; -webkit-user-select:none; white-space:nowrap; }
html.kendra-klar .ae-bygget{ display:inline; }
html.kendra-klar .ae-tegn{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.ae-a{
  --top:.435;   /* valgt 2026-10-19 (var 58 % i første runde) */
  --bund:.105;
  --epos:.35;
  --b:.74em;
  --k:calc((var(--bund) - var(--top)) * .627 / .49567);   /* linjens hældning */
  display:inline-block; vertical-align:baseline; line-height:1;
  width:calc(var(--epos) * .627em);
  clip-path:polygon(
    -1em -1em,
    calc(var(--top) * .627em + var(--k) * (-1em - var(--b) + .40867em)) -1em,
    calc(var(--top) * .627em + var(--k) * (2em - var(--b) + .40867em)) 2em,
    -1em 2em
  );
}

.skille{
  border:none; border-top:2px solid var(--streg);
  width:clamp(90px,14vw,150px); margin:clamp(22px,3vw,34px) auto 0; /* luft til Kendras lange underlængder (g, j) */
  /* Ved sideindlæsning: stregen vokser ud fra midten mod begge sider og toner frem.
     Ren CSS, så den også kører uden JS; reduced-motion-reglen nederst springer den over. */
  transform-origin:center;
  animation:streg-ind 1.2s cubic-bezier(.65,0,.35,1) .35s both;
}
@keyframes streg-ind{
  from{ transform:scaleX(0); opacity:0; }
  to{ transform:scaleX(1); opacity:1; }
}
.navn{
  font-family:var(--navnefont); font-weight:400; color:var(--is);
  text-transform:uppercase; letter-spacing:.24em; text-indent:.24em;
  font-size:clamp(.95rem,1.9vw,1.3rem); line-height:1.2;
  margin:clamp(12px,1.8vw,18px) 0 0;
}

/* ---------- Velkomst ---------- */
.velkomst-indre{
  display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,40px); align-items:center; max-width:860px;
}
/* Ovalt portræt; teksten står blot ved siden af (ingen ombrydning om buen). */
.velkomst-foto{
  width:100%; aspect-ratio:3/4; height:auto; object-fit:cover; object-position:50% 30%;
  border-radius:50%; box-shadow:var(--sh);
}
.velkomst-tekst h2{
  font-size:1.12rem; font-weight:400; line-height:1.35; color:var(--ink); margin-bottom:8px;
}
.velkomst-tekst p{ font-weight:300; color:var(--ink-2); font-size:1.06rem; line-height:1.7; }

/* ---------- PT og kost ---------- */
/* Fotoet ligger OVEN PÅ boksen (Bettinas ønske): boksen strækker sig over hele
   rækken bag fotoet, så boksfarven ses på begge sider af det, og fotoet er
   altid --ud højere end boksen foroven og forneden — uanset hvor lang teksten
   er, fordi fotoet strækkes til rækkens højde (boks + 2 × --ud).
   Boksens polstring på fotosiden = fotokolonnen (40 %) + normal polstring,
   så teksten aldrig havner under fotoet. */
.ydelse-indre{
  --inset:clamp(20px,3.5vw,44px);   /* boksfarve synlig uden for fotoet */
  --ud:clamp(36px,5vw,60px);        /* hvor meget fotoet stikker ud over boksen */
  --pad:clamp(24px,3.4vw,40px);
  display:grid; grid-template-columns:40% 60%;
}
.ydelse-kost .ydelse-indre{ grid-template-columns:60% 40%; }
.ydelse-foto{
  grid-row:1; position:relative; z-index:2;
  min-height:clamp(420px,46vw,560px);
  border-radius:4px; overflow:hidden;
  box-shadow:0 6px 16px rgba(23,21,33,.12), 0 28px 56px -20px rgba(23,21,33,.45);
}
.ydelse-pt .ydelse-foto{ grid-column:1; margin-left:var(--inset); }
.ydelse-kost .ydelse-foto{ grid-column:2; margin-right:var(--inset); }
.ydelse-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Fotoene hælder let ind mod teksten. "rotate" (ikke transform), så det ikke
   kolliderer med reveal-animationens translateX på samme element. */
.ydelse-pt .ydelse-foto{ rotate:2deg; }
.ydelse-kost .ydelse-foto{ rotate:-2deg; }
.ydelse-pt .ydelse-foto img{ object-position:50% 25%; }
.ydelse-kost .ydelse-foto img{ object-position:50% 62%; }

.ydelse-boks{
  grid-row:1; grid-column:1 / -1; align-self:center; margin:var(--ud) 0;
  position:relative; z-index:1; padding:var(--pad); box-shadow:var(--sh);
}
.ydelse-pt .ydelse-boks{ padding-left:calc(40% + var(--pad)); }
.ydelse-kost .ydelse-boks{ padding-right:calc(40% + var(--pad)); }
.ydelse-boks h2{ font-size:1.15rem; font-weight:700; letter-spacing:.01em; margin-bottom:12px; }
.ydelse-boks p{ font-size:1.02rem; line-height:1.7; }

.ydelse-pt .ydelse-boks{
  background:linear-gradient(160deg, var(--pt) 0%, var(--pt-deep) 100%);
  color:#fff; border-radius:4px;
}
.ydelse-pt .ydelse-boks h2{ color:#BFE6FF; }

.ydelse-kost .ydelse-boks{
  background:var(--kost-boks); color:var(--lilla-deep); border-radius:4px;
}
.ydelse-kost .ydelse-boks h2{ color:var(--lilla); }

/* ---------- Kontaktknap med pink ramme ---------- */
.kontakt{ text-align:center; padding:clamp(20px,3vw,36px) 0 clamp(36px,5vw,64px); }
/* Samme blå og samme skrift som navnet i toppen (League Spartan, spærrede
   versaler, lyseblå), med den pink streg-farve som ramme. */
.kontakt-knap{
  position:relative; display:inline-block;
  /* Polstring ÷ 1,1, så knappen bevarer størrelsen, når teksten er 10 % større.
     Venstre + .24em: spærringen efter sidste bogstav, så ordet står midt i vandret.
     Top/bund forskudt .0995em (afstemt så både desktop og mobil står inden for en pixel): versaler har ingen underlængde, men fonten reserverer
     plads til den, så ordet sad 4 px for højt (målt på pixels ved 3x). */
  padding:.9631em 1.7273em .7641em calc(1.7273em + .24em);
  background:var(--kontakt);
  color:var(--is); border:2px solid var(--streg); border-radius:4px; /* samme runding som fotos og bokse */ cursor:pointer;
  font-family:var(--navnefont); font-weight:700; text-transform:uppercase; letter-spacing:.24em;
  font-size:clamp(1.1rem,2.09vw,1.43rem); line-height:1.2; /* 10 % større end før */
  box-shadow:var(--sh);
  transition:transform .35s var(--ease), filter .3s ease;
}
.kontakt-knap:hover{ transform:translateY(-3px); filter:brightness(1.25); }
.kontakt-knap:focus-visible{ outline:3px solid var(--kontakt); outline-offset:4px; }

/* ---------- Footer: uddannelser ---------- */
footer{ padding:clamp(16px,3vw,32px) 0 28px; }
.uddannelser h2{ font-size:.95rem; font-weight:400; margin-bottom:10px; }
.uddannelser ul{ list-style:none; padding:0; margin:0; }
.uddannelser li{ font-weight:300; font-size:.95rem; color:var(--ink); margin-bottom:6px; }
.foot-bund{
  border-top:1px solid var(--line); margin-top:clamp(28px,4vw,44px); padding-top:18px;
  display:flex; justify-content:space-between; align-items:center; gap:14px 22px; flex-wrap:wrap;
  font-size:.84rem; color:var(--muted);
}
.foot-links{ display:inline-flex; align-items:center; gap:14px; }
.foot-bund a{ color:var(--ink-2); text-decoration:none; }
.foot-bund a:hover{ color:var(--pt); }
.social{ display:inline-grid; place-items:center; width:32px; height:32px; }
.social svg{ width:18px; height:18px; }

/* ---------- Reveal-on-scroll ----------
   Skjult udseende gælder KUN når animate.js har bekræftet, at det kan vise
   elementerne igen (html.js-reveal). Uden JS er alt synligt fra start. */
html.js-reveal [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--reveal-delay, 0ms); }
html.js-reveal [data-reveal].synlig{ opacity:1; transform:translateY(0); }
html.js-reveal [data-reveal="fra-venstre"]{ transform:translateX(-24px); }
html.js-reveal [data-reveal="fra-venstre"].synlig{ transform:translateX(0); }
html.js-reveal [data-reveal="fra-hoejre"]{ transform:translateX(24px); }
html.js-reveal [data-reveal="fra-hoejre"].synlig{ transform:translateX(0); }
html.js-reveal [data-reveal="skaler"]{ transform:scale(.94); }
html.js-reveal [data-reveal="skaler"].synlig{ transform:scale(1); }

/* ---------- Knap i formularen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-family:var(--brod); font-size:1rem; font-weight:600;
  padding:14px 28px; min-height:50px; border-radius:6px; border:none;
  transition:transform .22s var(--ease), background-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--kruse); outline-offset:3px; }
.btn-primary{ background:var(--kontakt); color:#fff; }
.btn-primary:hover{ background:var(--kontakt-hover); }

/* ---------- Kontaktvindue ---------- */
.modal{ border:none; padding:0; background:transparent; max-width:520px; width:calc(100% - 32px); }
.modal::backdrop{ background:rgba(6,6,13,.55); backdrop-filter:blur(4px); }
.modal-indre{
  background:#fff; border-radius:18px; position:relative;
  box-shadow:0 30px 60px -20px rgba(23,21,33,.4);
  padding:clamp(26px,4vw,40px);
}
.modal h3{ font-family:var(--signatur); font-weight:400; font-size:2.6rem; line-height:1.1; color:var(--kontakt); margin:0 0 .7em; } /* luft til Kendras lange g-underlængde, så den ikke rammer linjen nedenunder */
.modal .under{ font-size:.93rem; color:var(--muted); margin-bottom:22px; }
.modal-luk{
  position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%;
  border:none; background:#EEEDF7; color:var(--kontakt); cursor:pointer; display:grid; place-items:center;
  transition:background .2s ease, color .2s ease;
}
.modal-luk:hover{ background:var(--kontakt); color:#fff; }
.felt{ margin-bottom:16px; }
.felt label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:6px; }
.felt .kraev{ color:var(--kruse); }
.felt input,.felt select,.felt textarea{
  width:100%; padding:12px 14px; min-height:48px; font-family:var(--brod); font-size:1rem;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.felt input:focus,.felt select:focus,.felt textarea:focus{ outline:none; border-color:var(--pt); box-shadow:0 0 0 3px #E2E1F4; }
.felt textarea{ min-height:110px; resize:vertical; }
/* Honningkrukke: flyttet helt ud af syne (ikke display:none, som nogle robotter genkender) */
.hk{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.formular-status{ margin:12px 0 0; font-size:.9rem; color:var(--ink-2); min-height:0; }
.formular-status:empty{ display:none; }
.formular-status.fejl{ color:#9B2C2C; }
.formular-status a{ color:var(--kontakt); font-weight:400; }
.formular-note{ margin:10px 0 0; font-size:.8rem; color:var(--muted); text-align:center; }
.formular-tak{ padding:8px 0 4px; }
.formular-tak .tak-overskrift{ font-size:1.25rem; font-weight:400; color:var(--kontakt); margin-bottom:6px; }
.felt .hjaelp{ font-size:.8rem; color:var(--muted); margin-top:6px; }

/* ---------- Mobil ---------- */
@media (max-width:720px){
  body{ font-size:16px; }
  /* Titlen deler sig pænt i "Personlig Træner" / "& Kostvejleder" i stedet for tilfældigt */
  .titel > span{ display:block; }
  .velkomst-indre{ grid-template-columns:1fr; }
  /* Portrættet centreres over teksten på telefonen */
  .velkomst-foto{ width:min(56vw,220px); justify-self:center; }
  /* Telefon: fotoet øverst (også i kost-sektionen), lidt smallere end boksen
     og centreret; boksen starter et stykke oppe under fotoets underkant. */
  .ydelse-indre,
  .ydelse-kost .ydelse-indre{ grid-template-columns:1fr; --op:44px; }
  .ydelse-pt .ydelse-foto,
  .ydelse-kost .ydelse-foto{
    /* Højformat som fotoene selv (de er stående) — et liggende 4:3-udsnit
       skar dødløftet over og zoomede pizzaen ind. */
    grid-row:1; grid-column:1; width:78%; margin:0; justify-self:center;
    min-height:0; aspect-ratio:4/5;
  }
  /* Pizzafotoet: lidt højere og udsnittet flyttet op, så basilikummen også ses
     (Bettinas ønske) — 4:5 med fokus forneden viste kun pizzaen. */
  .ydelse-kost .ydelse-foto{ aspect-ratio:2/3; }
  .ydelse-kost .ydelse-foto img{ object-position:50% 4%; }
  .ydelse-pt .ydelse-boks,
  .ydelse-kost .ydelse-boks{
    grid-row:2; grid-column:1;
    margin:calc(-1 * var(--op)) 0 0;
    padding:calc(var(--op) + var(--pad)) var(--pad) var(--pad);
  }
  .foot-bund{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .kontakt-knap:hover,.btn:hover{ transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
}