/* ═══════════════════════════════════════════════════════════════════
   ZooMate · forside
   Grønt som en granskov, creme som en gammel journal. Én skrift med
   stor spændvidde (Schibsted Grotesk, norsk) og én kursiv antikva til
   det ene sted, hvor der er et menneske, der taler.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* faste — mørkegrøn er husets farve i begge temaer */
  --nat:#0E2119; --nat-2:#16352A; --mint:#8FCBA6; --mint-dyb:#5FA980;

  --grund:#F7F4EC; --papir:#FFFFFF; --hylde:#EFEADE;
  --blaek:#141613; --daemp:#59605A;
  --groen:#1F4A36;
  --linje:#E1DACA;
  --skygge:20 32 26;

  --maks:72rem; --maal:34rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#12160F; --papir:#1B211C; --hylde:#232A24;
    --blaek:#ECEFE9; --daemp:#A3ABA2;
    --groen:#8FCBA6;
    --linje:#2F3830;
    --skygge:0 0 0;
  }
}
:root[data-theme="dark"]{
  --grund:#12160F; --papir:#1B211C; --hylde:#232A24;
  --blaek:#ECEFE9; --daemp:#A3ABA2;
  --groen:#8FCBA6;
  --linje:#2F3830;
  --skygge:0 0 0;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--grund); color:var(--blaek);
  font:400 1.0625rem/1.6 "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.028em; text-wrap:balance; }
h1{ font-size:clamp(2.9rem, 1.9rem + 4.2vw, 5.1rem); line-height:.98; font-weight:800; }
h2{ font-size:clamp(2rem, 1.55rem + 1.9vw, 3.1rem); line-height:1.05; }
h3{ font-size:1.375rem; line-height:1.22; }
h4{ font-size:1.0625rem; line-height:1.3; font-weight:600; letter-spacing:-.012em; }
p{ margin:0; }
a{ color:inherit; }
::selection{ background:var(--mint); color:var(--nat); }

.ramme{ width:min(100% - 2.5rem, var(--maks)); margin-inline:auto; }
.maalbredde{ max-width:var(--maal); }
.daemp{ color:var(--daemp); }

.bryn{ font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  color:var(--groen); margin-bottom:1.1rem; }

.knap{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:54px; padding:0 1.75rem; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:1.0313rem; border:1.5px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .12s; }
.knap:active{ transform:translateY(1px); }
.knap.lys{ background:var(--mint); color:var(--nat); }
.knap.lys:hover{ background:#A7D8B9; }
.knap.kant{ border-color:rgb(255 255 255/.28); color:#fff; }
.knap.kant:hover{ border-color:var(--mint); color:var(--mint); }
.knap.moerk{ background:var(--groen); color:var(--grund); }
.knap.moerk:hover{ background:var(--nat-2); color:#fff; }
:focus-visible{ outline:2.5px solid var(--mint); outline-offset:3px; border-radius:8px; }

/* ═══ toppen ═══ */
.top{ position:relative; z-index:3; padding:1.5rem 0; }
.top .ramme{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:#fff; }
.logo img{ width:36px; height:36px; border-radius:10px; display:block; }
.logo b{ font-size:1.1875rem; font-weight:700; letter-spacing:-.02em; }
.top nav{ display:flex; align-items:center; gap:1.75rem; font-size:.9688rem;
  color:rgb(255 255 255/.72); }
.top nav a{ text-decoration:none; }
.top nav a:hover{ color:#fff; }
@media (max-width:720px){ .top nav a.smaaskjul{ display:none; } }

/* ═══ hero ═══ */
.hero{ background:
    radial-gradient(120% 90% at 78% 8%, #1E4735 0%, transparent 58%),
    linear-gradient(168deg, var(--nat-2) 0%, var(--nat) 62%);
  color:#F2F6F1; position:relative; padding-bottom:5.5rem; }
.hero::after{ content:""; position:absolute; inset:auto 0 -1px 0; height:1px;
  background:var(--linje); }
.heroind{ display:grid; gap:3.5rem 4.5rem; align-items:center; padding:3rem 0 0;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.78fr); }
@media (max-width:940px){ .heroind{ grid-template-columns:1fr; padding-top:1.5rem; } }
.hero .bryn{ color:var(--mint); }
.hero h1 em{ font-style:normal; color:var(--mint); }
.hero .lede{ font-size:1.1875rem; line-height:1.55; color:rgb(242 246 241/.76);
  margin-top:1.75rem; max-width:33rem; }
.heroknap{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem; }

.beviser{ display:grid; gap:1.6rem 2.25rem; margin-top:3rem;
  padding-top:1.75rem; border-top:1px solid rgb(255 255 255/.14);
  grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); }
.beviser div{ max-width:17rem; }
.beviser div strong{ display:block; font-size:1.1875rem; font-weight:700;
  letter-spacing:-.025em; color:var(--mint); margin-bottom:.2rem; }
.beviser div span{ font-size:.875rem; line-height:1.4; display:block;
  color:rgb(242 246 241/.6); }

/* ═══ telefonen ═══ */
.telefon{ width:min(100%, 292px); margin-inline:auto; aspect-ratio:9/17.6;
  background:#0A1712; border:1px solid rgb(255 255 255/.14); border-radius:38px;
  padding:.6rem; position:relative;
  box-shadow:0 40px 80px -34px rgb(0 0 0/.75), 0 0 0 1px rgb(255 255 255/.04) inset; }
.telefon::before{ content:""; position:absolute; top:1.05rem; left:50%;
  translate:-50% 0; width:62px; height:5px; border-radius:99px;
  background:rgb(255 255 255/.14); z-index:2; }
.skaerm{ height:100%; border-radius:30px; background:#F7F4EC; color:#141613;
  overflow:hidden; display:flex; flex-direction:column;
  padding:2.15rem .75rem .5rem; gap:.5rem; }
.sk-top{ display:flex; align-items:baseline; justify-content:space-between;
  padding:0 .3rem .15rem; }
.sk-top b{ font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; }
.sk-top span{ font-size:.6rem; color:#59605A; }
.sk-band{ background:#1F4A36; color:#F7F4EC; border-radius:13px;
  padding:.6rem .7rem; }
.sk-band b{ display:block; font-size:.8125rem; font-weight:700; letter-spacing:-.01em; }
.sk-band span{ font-size:.6rem; opacity:.72; }
.sk-r{ display:flex; gap:.4rem; }
.sk-flise{ flex:1; background:#fff; border:1px solid #E1DACA; border-radius:11px;
  padding:.45rem .5rem; }
.sk-flise b{ display:block; font-size:.9375rem; font-weight:700; letter-spacing:-.02em; }
.sk-flise span{ font-size:.55rem; color:#59605A; }
.sk-linje{ background:#fff; border:1px solid #E1DACA; border-radius:11px;
  padding:.45rem .55rem; display:flex; align-items:center; gap:.45rem; }
.sk-prik{ width:7px; height:7px; border-radius:50%; background:#1F4A36; flex:none; }
.sk-prik.gul{ background:#C8912F; }
.sk-linje b{ font-size:.6875rem; font-weight:600; }
.sk-linje i{ font-style:normal; font-size:.55rem; color:#59605A; margin-left:auto; }
.sk-nav{ margin-top:auto; display:flex; padding-top:.4rem; border-top:1px solid #E1DACA; }
.sk-nav span{ flex:1; text-align:center; font-size:.5rem; font-weight:600; color:#8B918A; }
.sk-nav span.paa{ color:#1F4A36; }

/* Telefonen med et RIGTIGT skaermbillede. Rammen bliver staaende — den
   giver billedet en telefon at sidde i — men hoejden foelger billedet i
   stedet for et fast forhold, saa hverken toppen eller bundmenuen
   beskaeres. Bezelen foroven giver plads til hoejttaler-stribien. */
.telefon.foto{ aspect-ratio:auto; padding:2.05rem .55rem .55rem; }
.telefon.foto .skaerm{ height:auto; padding:0; gap:0; background:#0A1712;
  border-radius:26px; }
.telefon.foto .skaerm img{ display:block; width:100%; height:auto; }
.telefon.foto.lille{ width:min(100%, 268px); }
@media (max-width:880px){ .telefon.foto.lille{ margin-inline:auto; } }

/* ═══ almindelige afsnit ═══ */
section{ padding:5.5rem 0; }
section.hylde{ background:var(--hylde); }
.indled{ max-width:38rem; margin-bottom:3rem; }
.indled p{ color:var(--daemp); margin-top:1.1rem; font-size:1.0938rem; }

/* det den erstatter */
.erstat{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.erstat div{ padding:1.5rem 1.4rem; background:var(--papir); border-radius:16px;
  border:1px solid var(--linje); }
.erstat s{ display:block; color:var(--daemp); text-decoration-thickness:1px;
  font-size:.9375rem; margin-bottom:.4rem; }
.erstat b{ font-size:1.0625rem; font-weight:600; letter-spacing:-.015em; }

/* dyrekortet */
.kort2{ display:grid; gap:2.5rem 4rem; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:880px){ .kort2{ grid-template-columns:1fr; } }
ul.tjek{ list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); }
ul.tjek li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9688rem;
  color:var(--daemp); }
ul.tjek li::before{ content:""; width:1.05rem; height:1.05rem; margin-top:.28rem;
  flex:none; border-radius:50%; background:var(--groen); opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.6l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/108% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.6l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/108% no-repeat; }

/* funktionsgitteret */
.gitter{ display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr)); }
.felt{ background:var(--papir); border:1px solid var(--linje); border-radius:18px;
  padding:1.75rem 1.6rem; transition:border-color .2s, transform .2s; }
section.hylde .felt{ background:var(--grund); }
.felt:hover{ border-color:var(--groen); transform:translateY(-2px); }
.felt h4{ margin-bottom:.55rem; }
.felt p{ color:var(--daemp); font-size:.9688rem; }
.ikon{ width:38px; height:38px; border-radius:11px; background:var(--groen);
  display:grid; place-items:center; margin-bottom:1.1rem; }
.ikon svg{ width:20px; height:20px; stroke:var(--papir); fill:none;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
section.hylde .ikon svg{ stroke:var(--hylde); }

/* fremhævet: træningen */
.spot{ background:var(--nat); color:#F2F6F1; border-radius:26px;
  padding:clamp(2.25rem,1.4rem+3vw,3.75rem); display:grid; gap:2.5rem 4rem;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:center; }
@media (max-width:880px){ .spot{ grid-template-columns:1fr; } }
.spot .bryn{ color:var(--mint); }
/* Sølund 25/8: træningsafsnittet stod for tæt pakket. Mere luft. */
.spot h2{ line-height:1.14; }
.spot p{ color:rgb(242 246 241/.74); margin-top:1.5rem; line-height:1.68;
  max-width:34rem; }
.trin{ display:flex; flex-direction:column; gap:.5rem; }
.trin{ gap:.6rem; }
.trin div{ background:rgb(255 255 255/.055); border:1px solid rgb(255 255 255/.1);
  border-radius:13px; padding:1.05rem 1.1rem; display:flex; gap:.75rem; align-items:center; }
.trin div.naa{ background:var(--mint); border-color:transparent; color:var(--nat); }
.trin b{ font-size:.9375rem; font-weight:600; }
.trin span{ margin-left:auto; font-size:.8125rem; opacity:.62; }
.trin div.naa span{ opacity:.72; font-weight:600; }

/* citat */
.citat{ font:300 italic clamp(1.45rem,1.1rem+1.5vw,2.1rem)/1.32 "Newsreader", Georgia, serif;
  letter-spacing:-.01em; max-width:26ch; }

/* installation */
.spor{ display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
ol.skridt{ margin:1.4rem 0 0; padding:0; list-style:none; counter-reset:s;
  display:flex; flex-direction:column; gap:.9rem; }
ol.skridt li{ counter-increment:s; display:grid; grid-template-columns:auto 1fr;
  gap:.85rem; align-items:start; font-size:.9688rem; color:var(--daemp); }
ol.skridt li::before{ content:counter(s); width:1.6rem; height:1.6rem; flex:none;
  border-radius:50%; background:var(--groen); color:var(--papir);
  font-size:.8125rem; font-weight:700; display:grid; place-items:center; }
section.hylde ol.skridt li::before{ color:var(--hylde); }
#telefon .felt{ background:var(--papir); }
ol.skridt b{ color:var(--blaek); font-weight:600; }

/* folkene bag */
.folk{ display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
.person{ background:var(--papir); border:1px solid var(--linje); border-radius:18px;
  padding:1.9rem 1.75rem; }
.person .rolle{ font-size:.8125rem; font-weight:600; color:var(--groen);
  margin-bottom:.7rem; }
.person h3{ letter-spacing:-.03em; }
.person p{ color:var(--daemp); margin-top:.8rem; font-size:.9688rem; }
.medalje{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  padding:.4rem .8rem .4rem .6rem; border-radius:999px; background:var(--hylde);
  font-size:.8125rem; font-weight:600; }
.medalje svg{ width:15px; height:15px; stroke:var(--groen); fill:none; stroke-width:1.9; }

/* bunden */
footer{ background:var(--nat); color:rgb(242 246 241/.62); padding:4rem 0 3rem; }
footer .ramme{ display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:space-between; }
footer .logo{ margin-bottom:.7rem; }
footer p{ font-size:.9063rem; max-width:22rem; }
footer nav{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start; }
footer nav a{ text-decoration:none; font-size:.9375rem; }
footer nav a:hover{ color:var(--mint); }
footer .fin{ width:100%; padding-top:2rem; margin-top:1rem;
  border-top:1px solid rgb(255 255 255/.1); font-size:.8438rem;
  color:rgb(242 246 241/.42); }

/* indtoning */
/* Kun naar JavaScript koerer, maa noget vaere skjult. Uden det — en
   gammel telefon, en blokeret fil — staar hele siden der som den skal.
   Fundet af proeven: 12 afsnit laa usynlige efter et hurtigt kast ned
   gennem siden. Tekst, ingen kan laese, er vaerre end ingen animation. */
.js .ton{ opacity:0; transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); }
.js .ton.inde{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .ton{ opacity:1; transform:none; transition:none; }
  .knap,.felt{ transition:none; }
}


/* Kontakt i bunden. "Privatlivspolitik" er ude — den er ikke aktuel for
   brugere af ZooMate — og Kontakt er ikke laengere et doedt link, men
   adressen og nummeret, man rent faktisk kan naa os paa. */
footer .kontakt{ display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; }
footer .kontakt .overskrift{ font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mint); margin-bottom:.25rem; }
footer .kontakt a{ text-decoration:none; font-size:.9375rem; }
footer .kontakt a:hover{ color:var(--mint); }

/* Traeningsafsnittet: telefonen staar paa den moerke flade, saa rammen
   maa traede tydeligere frem end paa den lyse baggrund. */
.spot .telefon.foto{ border-color:rgb(255 255 255/.22); }

/* ══════════════════════════════════════════════════════════════════════
   MOBIL — 26/8 2026

   Siden var 15.349 px hoej paa en iPhone 14 (18 skaermfulde) og 23 paa
   en iPhone SE. Den var ikke daarlig — den var en skrivebordsside,
   haeldt ned i en smal spalte. Alt herunder er ét lag oven paa det
   eksisterende: der er ikke rettet ét ord, og intet er fjernet.

   Reglerne: ingen tekst under 15 px, ingen trykflade under 44 px, og
   de lange gitre bliver til vandrette snap-kort med et kig paa det
   naeste — samme indhold, én skaerm i stedet for seks.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* — luft: rytmen var sat til en 1400 px skaerm — */
  section{ padding:3.25rem 0; }
  .ramme{ width:min(100% - 2rem, var(--maks)); }
  .indled{ margin-bottom:1.75rem; }
  .felt{ padding:1.5rem 1.35rem; }

  /* — tekstgulv: intet under 15 px paa en telefon — */
  .bryn{ font-size:.9375rem; margin-bottom:.7rem; }
  .beviser div span, .felt p, ul.tjek li, ol.skridt li,
  footer p, footer nav a, footer .kontakt a{ font-size:.9688rem; }
  .indled p, .daemp{ font-size:1.0313rem; }

  /* — foerste skaerm skal baade saelge OG kunne handles paa — */
  .heroind{ padding-top:.5rem; gap:2rem; }
  h1{ font-size:clamp(2.25rem, 1.1rem + 5.6vw, 2.9rem); line-height:1.04; }
  .hero .lede{ font-size:1.0625rem; margin-top:1.15rem; }
  .heroknap{ margin-top:1.6rem; gap:.7rem; }
  .heroknap .knap{ flex:1 1 100%; }

  /* de fire beviser: 2x2 i stedet for fire blokke under hinanden */
  .beviser{ grid-template-columns:1fr 1fr; gap:1.15rem .9rem;
    margin-top:2rem; padding-top:1.4rem; }
  .beviser div{ max-width:none; }
  .beviser div strong{ font-size:1rem; margin-bottom:.15rem; }
  .beviser div span{ line-height:1.35; }

  /* — de lange gitre: vandret med snap og et kig paa det naeste —
       Kortene er lige lange nok til at man kan se, at der er flere.
       Ingen tekst forsvinder; man bladrer i stedet for at rulle. */
  .gitter, .spor, .folk{
    display:grid; grid-auto-flow:column; grid-auto-columns:82%;
    grid-template-columns:none; gap:.85rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-padding-inline:1rem;
    margin-inline:-1rem; padding:.25rem 1rem 1rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .gitter::-webkit-scrollbar, .spor::-webkit-scrollbar,
  .folk::-webkit-scrollbar{ display:none; }
  .gitter > *, .spor > *, .folk > *{ scroll-snap-align:start; }
  /* installationsvejledningen skal kunne laeses i ét stykke */
  .spor{ grid-auto-columns:88%; }

  /* et lille vink om, at der er mere til hoejre */
  .stryg{ display:flex; align-items:center; gap:.4rem; margin:.15rem 0 .9rem;
    font-size:.875rem; color:var(--daemp); }
  .stryg::after{ content:"›››"; letter-spacing:-.1em; opacity:.5; }

  /* — tjeklisten: ti raekker blev til to spalter — */
  ul.tjek{ grid-template-columns:1fr 1fr; gap:.55rem .8rem; margin-top:1.3rem; }
  ul.tjek li{ font-size:.9063rem; line-height:1.3; }
  ul.tjek li::before{ width:.9rem; height:.9rem; margin-top:.2rem; }

  /* — skaermbillederne fyldte en skaerm hver — */
  .telefon{ width:min(100%, 208px); }
  .telefon.foto.lille{ width:min(100%, 208px); }
  .kort2{ gap:1.5rem; }
  .spot{ gap:1.75rem; padding:2rem 1.4rem; }

  /* — trykflader: ni laa under 44 px — */
  .top nav{ gap:1.1rem; }
  .top nav a, footer nav a, footer .kontakt a{
    min-height:44px; display:inline-flex; align-items:center; }
  .logo img{ width:32px; height:32px; }

  /* — bunden: én spalte, og kontakten staar for sig — */
  footer{ padding:3rem 0 7.5rem; }   /* plads til bundbjaelken */
  footer .ramme{ gap:2rem; }
  footer nav{ gap:.25rem 1.5rem; }
  footer .kontakt{ gap:.1rem; }
}

/* ── bundbjaelken ────────────────────────────────────────────────────
   Siden er lang, og den handling, folk kommer for, laa i toppen. Nu
   foelger den med. To knapper, fordi mobilbrugeren enten skal LOGGE IND
   eller LAEGGE APPEN PAA TELEFONEN — og den anden laa som afsnit seks
   ud af syv. Baren staar kun paa telefoner. */
.bundbar{ display:none; }
@media (max-width:760px){
  .bundbar{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    position:fixed; inset:auto 0 0 0; z-index:40;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgb(11 26 20/.92); backdrop-filter:blur(12px);
    border-top:1px solid rgb(255 255 255/.12); }
  .bundbar .knap{ min-height:48px; font-size:.9688rem; padding:0 1rem; width:100%; }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .bundbar{ transition:transform .25s ease; }
  .bundbar[data-skjul="1"]{ transform:translateY(120%); }
}

/* De to paneler under "Dyrets profil" — Fagligt grundlag og
   Fotogenkendelse — er to sidestillede argumenter, ikke et forloeb.
   Stablet fylder de to skaerme; ved siden af hinanden fylder de én. */
@media (max-width:760px){
  .parvis{ display:grid; grid-auto-flow:column; grid-auto-columns:88%;
    gap:.85rem; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-padding-inline:1rem; margin-inline:-1rem;
    padding:.25rem 1rem 1rem; scrollbar-width:none; }
  .parvis::-webkit-scrollbar{ display:none; }
  .parvis > *{ scroll-snap-align:start; margin-top:0 !important; }

  /* rettelser efter maaling: tjeklisten laa paa 14,5 px, og logoet
     var en 32 px trykflade */
  ul.tjek li{ font-size:.9375rem; }
  .logo{ min-height:44px; }

  /* hero'en skulle ind paa en iPhone SE (667 px) med begge knapper */
  .hero{ padding-bottom:3rem; }
  .hero .lede{ font-size:1.0313rem; line-height:1.5; margin-top:1rem; }
  .beviser{ margin-top:1.6rem; padding-top:1.2rem; }
  .kort2{ gap:1.25rem; }
  .telefon, .telefon.foto.lille{ width:min(100%, 196px); }
}

/* Stryg-vinket hoerer KUN til telefonen — paa en skaerm, hvor alle
   kortene staar ved siden af hinanden, ville det vaere en loegn.
   Reglen staar her, uden for mediesporgsmaalet, saa den ogsaa gaelder,
   hvis nogen senere flytter rundt paa blokkene. */
.stryg{ display:none; }
@media (max-width:760px){
  .stryg{ display:flex; font-size:.9375rem; }
  .medalje{ font-size:.875rem; }
}

/* Brynet er et MAERKAT, ikke broedtekst — det maa gerne staa mindre end
   15 px-gulvet, som gaelder alt, man skal laese. Ved 15 px braekkede
   den lange linje i tre og skubbede overskriften ned under kanten. */
@media (max-width:760px){ .bryn{ font-size:.875rem; letter-spacing:0; } }

/* Traeningsafsnittet paa skrivebordet: teksten laa helt ude ved kanten
   af den moerke flade, saa den lignede en daarlig beskaering. Feltet er
   bredt nok til at give den luft i begge sider uden at broedteksten
   bliver for lang at laese. */
@media (min-width:881px){
  .spot{ padding-inline:clamp(3.5rem, 1.9rem + 4.2vw, 6rem); }
  .spot > div:first-child{ padding-right:1rem; }
}

/* De to mærkater sad i hver sin højde, fordi teksterne er ulige lange.
   Nu hviler de begge i bunden af deres kort, saa de laeses som ét par. */
.person{ display:flex; flex-direction:column; }
/* mærkatet ligger nu i en <details>; det er DEN, der skal i bunden */
.person .udm{ margin-top:auto; }
.person p{ margin-bottom:1rem; }

/* ── udmærkelserne kan åbnes ─────────────────────────────────────────
   Mærkatet fortæller hvad prisen hedder; et tryk fortæller hvad den er.
   Bygget som <details>, ikke JavaScript: det virker med tastatur og
   skærmlæser af sig selv, og teksten står i siden, også hvis scriptet
   aldrig når frem. */
.udm{ margin-top:auto; align-self:flex-start; max-width:100%; }
.udm > summary{ margin-top:0; cursor:pointer; list-style:none;
  user-select:none; transition:background .15s; }
.udm > summary::-webkit-details-marker{ display:none; }
.udm > summary:hover{ background:#E4DED0; }
.udm > summary i{ font-style:normal; font-weight:700; font-size:.75rem;
  width:16px; height:16px; margin-left:.15rem; border-radius:50%;
  display:inline-grid; place-items:center; flex:none;
  background:var(--groen); color:var(--papir); }
.udm[open] > summary{ background:#E4DED0; }
.udm[open] > summary i::after{ content:""; }
.udm-boks{ margin-top:.6rem; padding:.9rem 1rem; border-radius:14px;
  background:var(--papir); border:1px solid var(--linje);
  font-size:.9063rem; line-height:1.55; color:var(--daemp); }
.spot .udm-boks, .hero .udm-boks{ background:rgb(255 255 255/.06);
  border-color:rgb(255 255 255/.14); color:rgb(242 246 241/.78); }
@media (prefers-reduced-motion:no-preference){
  .udm[open] .udm-boks{ animation:udmind .18s ease both; }
  @keyframes udmind{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
}

/* Mobil: mærkatet må gerne brække i to linjer, og boksen skal have
   samme luft som resten. Og de to paneler under "Dyrets profil" bytter
   plads, så Fotogenkendelse står først. */
@media (max-width:760px){
  .udm > summary{ white-space:normal; line-height:1.35; }
  .udm-boks{ font-size:.9375rem; }
  .parvis > *:nth-child(1){ order:2; }
  .parvis > *:nth-child(2){ order:1; }
}