/* landing.css — landingpage-specifikke tilføjelser.
   Bygger udelukkende på tokens.css. Ingen nye farver.
   Symbolerne er en typologi der bærer betydning, ikke ikonpynt. */

.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}

/* ---- Hero med foto ---- */
.hero--photo{position:relative;background:var(--watch-900);isolation:isolate}
.hero--photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img);background-size:cover;background-position:center 62%}
.hero--photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(16,22,31,.94) 0%,rgba(16,22,31,.86) 46%,rgba(16,22,31,.55) 100%)}
.hero__inner{padding-block:clamp(4.5rem,11vw,8rem);max-width:52rem}
.hero__inner h1{font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.12;margin:.4em 0 .5em}
.hero__lead{font-size:clamp(1.02rem,1.8vw,1.18rem);max-width:44rem;color:rgba(246,245,242,.88);
  margin-bottom:2rem}

/* ---- Sektionsrytme ---- */
.section{padding-block:clamp(3.5rem,7vw,5.5rem)}
.section--band{background:var(--paper-200,#EFEDE8)}
.container--narrow{max-width:46rem}
.lede{font-size:1.08rem;max-width:48rem;color:var(--ink-600)}
.note{font-size:.92rem;color:var(--ink-600);max-width:52rem}

.grid-2--media{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.grid-2--reverse .media{order:-1}
.media{margin:0}
.media img{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 1px 0 rgba(20,24,29,.10),0 18px 40px -28px rgba(20,24,29,.5)}

.cluster--center{justify-content:center;margin-top:2.5rem}

.stat-callout{border-left:3px solid var(--brass-500);padding:.2rem 0 .2rem 1.1rem;
  font-family:var(--font-serif);font-size:1.12rem;line-height:1.5;color:var(--ink-800)}

/* ---- Symboler: fire opgavetyper ---- */
/* Nulstil de gamle geometriske former fra site.css — de bar ingen betydning. */
.xtable .svc-glyph,
.svc-glyph{display:inline-block;width:1.15em;height:1.15em;margin-right:.55em;
  vertical-align:-.22em;background-color:transparent!important;border:0!important;
  border-radius:0!important;transform:none!important;box-shadow:none!important;
  background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.9}
.svc-glyph::before,.svc-glyph::after{content:none!important}
/* hus — boligen og bygningen */
.svc-glyph--hus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6A2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3.5l9 7'/%3E%3Cpath d='M5.2 12.2V20h13.6v-7.8'/%3E%3Cpath d='M10 20v-4.6h4V20'/%3E%3C/svg%3E")}
/* nøgle — beboere, adgang, overdragelse */
.svc-glyph--beboer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6A2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='4.3'/%3E%3Cpath d='M11.6 11.6 20 20'/%3E%3Cpath d='M16.2 16.2 18.4 14'/%3E%3Cpath d='M18.4 18.4 20.6 16.2'/%3E%3C/svg%3E")}
/* regnskabsbog — økonomi */
.svc-glyph--ledger{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6A2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 17.2h14'/%3E%3Cpath d='M9 8.2h6M9 11.4h6'/%3E%3C/svg%3E")}
/* ur — frister */
.svc-glyph--frist{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6A2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.6' r='7.6'/%3E%3Cpath d='M12 8.4v4.4l2.9 1.9'/%3E%3Cpath d='M9.4 2.8h5.2'/%3E%3C/svg%3E")}
/* talerstol — møder og beslutninger */
.svc-glyph--beslutning{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6A2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.4h16'/%3E%3Cpath d='M6.6 6.4 8 19.4h8l1.4-13'/%3E%3Cpath d='M12 6.4V3.4'/%3E%3Cpath d='M9 12.4h6'/%3E%3C/svg%3E")}

/* ---- Krydslisten ---- */
.xtable-wrap{overflow-x:auto;margin-top:2rem;
  border:1px solid var(--line-300,#DFDCD5);border-radius:3px;background:var(--paper-100,#F6F5F2)}
.xtable{width:100%;border-collapse:collapse;font-size:.95rem;min-width:41rem}
.xtable th,.xtable td{padding:.78rem .95rem;text-align:left;
  border-bottom:1px solid var(--line-300,#DFDCD5);vertical-align:top}
.xtable thead th{background:var(--watch-900);color:var(--paper-100,#F6F5F2);
  font-family:var(--font-sans);font-weight:600;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:0}
.xtable thead th:nth-child(2){background:var(--watch-800,#1E2733)}
.xtable tbody th{font-weight:500;color:var(--ink-800);width:38%}
.xtable td{color:var(--ink-600);white-space:nowrap}
.xtable tbody tr:last-child th,.xtable tbody tr:last-child td{border-bottom:0}
.xtable tbody tr:nth-child(even){background:rgba(20,24,29,.022)}
.xtable .yes{color:var(--frist-ok,#2B6B45);font-weight:600}
.xtable .yes::before{content:"● ";font-size:.78em;vertical-align:.12em}
.xtable .part{color:var(--frist-naer,#94530A)}
.xtable .part::before{content:"◐ ";font-size:.78em;vertical-align:.12em}
.xtable .no{color:var(--ink-600);opacity:.75}
.xtable .no::before{content:"○ ";font-size:.78em;vertical-align:.12em}

/* ---- Systemet: mockup-tease ---- */
.grid-2--tease{display:grid;gap:clamp(1.8rem,3.5vw,2.8rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));margin-top:2.2rem}
.tease__caption{margin-top:1rem;font-size:.97rem;color:var(--ink-600);max-width:30rem}
.tease__figures{margin:.1rem 0 .35rem;font-size:.95rem;color:var(--ink-600)}
.tease__figures strong{font-family:var(--font-serif);font-size:1.5rem;color:var(--frist-ok,#2B6B45);
  margin-right:.5rem}
.tease__figures--muted strong{color:var(--ink-800)}
.ph-table--mini{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:.9rem;
  color:var(--ink-600)}
.ph-table--mini td{padding:.34rem .5rem;border-top:1px solid var(--line-300,#DFDCD5)}
.ph-table--mini td:nth-child(3),.ph-table--mini td:nth-child(4){text-align:right}
.banner__meta{font-size:.82rem;opacity:.8}
.ph-frame--crop .ph-frame__body{max-height:19rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}

/* ---- Skift-forløb ---- */
.switch-track{list-style:none;margin:2.2rem 0 0;padding:0;max-width:44rem;
  border-left:2px solid var(--line-300,#DFDCD5)}
.switch-step{display:flex;gap:1.1rem;padding:0 0 1.6rem 1.4rem;position:relative}
.switch-step:last-child{padding-bottom:0}
.switch-step__who{flex:0 0 auto;min-width:2.6rem;height:1.7rem;display:inline-flex;
  align-items:center;justify-content:center;font-size:.72rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;border-radius:2px;
  background:var(--brass-600,#8B6A2F);color:var(--paper-100,#F6F5F2)}
.switch-step__who--us .switch-step__who{background:var(--watch-900);color:var(--paper-100,#F6F5F2)}
.switch-step strong{display:block;color:var(--ink-800)}
.switch-step p{margin:.2rem 0 0;font-size:.94rem;color:var(--ink-600)}

/* ---- FAQ ---- */
.faq{margin-top:2rem}
.faq dt{font-family:var(--font-serif);font-size:1.14rem;font-weight:600;color:var(--ink-800);
  margin-top:1.7rem;padding-top:1.7rem;border-top:1px solid var(--line-300,#DFDCD5)}
.faq dt:first-of-type{margin-top:0;padding-top:0;border-top:0}
.faq dd{margin:.5rem 0 0;color:var(--ink-600);max-width:44rem}

/* ---- Person ---- */
.person{margin-top:1.9rem;padding:1.5rem 1.6rem;background:var(--paper-100,#F6F5F2);
  border:1px solid var(--line-300,#DFDCD5);border-radius:3px;
  border-top:3px solid var(--brass-500,#B08D4F)}
.person__name{font-family:var(--font-serif);font-size:1.3rem;font-weight:600;
  color:var(--ink-800);margin:0}
.person__role{margin:.15rem 0 .8rem;font-size:.86rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brass-600,#8B6A2F)}
.person__bio{margin:0 0 1rem;font-size:.96rem;color:var(--ink-600)}
.person__contact{margin:0 0 .8rem;font-size:1.06rem}
.person__contact a{color:var(--ink-800);text-decoration-color:var(--brass-500,#B08D4F);
  text-underline-offset:3px}

@media (max-width:820px){
  .grid-2--media,.grid-2--tease{grid-template-columns:1fr}
  .grid-2--reverse .media{order:0}
}

/* ---- MOBIL: tabellen bliver til kort ----
   Fund fra høringen: ved 390 px lå kolonne 3 og 4 uden for skærmen, og tabellens
   min-width skubbede hele siden bredere end viewporten. Sammenligningen var dermed
   usynlig præcis dér hvor målgruppen læser — om aftenen, på en telefon. */
@media (max-width:700px){
  html,body{overflow-x:hidden}
  .xtable-wrap{overflow:visible;border:0;background:transparent}
  .xtable,.xtable tbody,.xtable tr,.xtable th,.xtable td{display:block;width:auto;min-width:0}
  .xtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .xtable tbody tr{background:var(--paper-raised,#fff);border:1px solid var(--line,#E3DFD6);
    border-radius:3px;margin-bottom:.85rem;padding:.9rem 1rem}
  .xtable tbody tr:nth-child(even){background:var(--paper-raised,#fff)}
  .xtable tbody th{width:auto;font-size:1.02rem;font-weight:600;color:var(--ink,#14181D);
    border-bottom:1px solid var(--line,#E3DFD6);padding:0 0 .6rem;margin-bottom:.6rem}
  .xtable tbody td{padding:.3rem 0;white-space:normal;font-size:.95rem;
    display:grid;grid-template-columns:8.2rem minmax(0,1fr);gap:.4rem 1rem;
    align-items:baseline;border-bottom:0;min-width:0;overflow-wrap:anywhere}
  /* Statusprikken og kolonnenavnet delte samme pseudo-element. På mobil vinder
     kolonnenavnet — farven bærer allerede status. Højere specificitet end .yes::before. */
  .xtable tbody td.yes::before,
  .xtable tbody td.part::before,
  .xtable tbody td.no::before,
  .xtable tbody td::before{content:attr(data-kol);color:var(--ink-soft,#454B52);
    font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
    vertical-align:baseline}
  /* Ingen af kortene må være bredere end skærmen */
  .xtable tbody th{overflow-wrap:anywhere}
  .container{padding-left:1.15rem;padding-right:1.15rem}
  .honest{padding:1.3rem 1.25rem}
  .ph-frame,.ph-frame__body,.ph-table--mini{max-width:100%;overflow-wrap:anywhere}
  .ph-table--mini{table-layout:fixed}
}

/* ---- Rettelser efter høringen 10/8 ---- */
/* Kontrast: brass-400 (#B08D4F) gav kun 2,85 mod papir — under AA. Skiftet til brass-600 (4,59). */
.person__role{color:var(--brass-600,#8B6A2F)}
/* Dæmpet tekst på sandfarvet bånd lå på 4,21 — hævet til ink-soft (8,09). */
.section--band .note,.section--band .tease__caption,.section--band .lede{color:var(--ink-soft,#454B52)}

/* Mærkat i tabellen: gør undtagelserne synlige i selve rækken */
.tag{display:inline-block;margin-left:.5em;padding:.1em .5em;font-size:.7rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--brass-600,#8B6A2F);
  border:1px solid var(--brass-600,#8B6A2F);border-radius:2px;vertical-align:.12em}

/* "Vi er nye"-boksen — Bentes vigtigste fund: sig det selv, og svar på pengespørgsmålet */
.honest{margin-top:2.6rem;padding:1.6rem 1.8rem;background:var(--watch-900);
  color:var(--paper,#F6F5F2);border-radius:3px;max-width:46rem}
.honest h3{font-family:var(--font-serif);font-size:1.22rem;margin:0 0 .7rem;
  color:var(--brass-400,#B08D4F)}
.honest p{margin:0 0 .8rem;color:rgba(246,245,242,.9);font-size:1rem}
.honest p:last-child{margin-bottom:0}

/* ---- KONTAKTFORMULAR (tilføjet 11/8-2026) --------------------------------
   Formularen gik live UDEN styling: klasserne stod i index.html, men ingen af
   de fire stylesheets definerede dem. Resultatet var browserens default —
   labels og felter side om side på samme linje, textarea før sin egen label,
   og honeypot-feltet fuldt synligt med teksten "Lad dette felt stå tomt".
   Sidens eneste konverteringspunkt var altså ubrugeligt.

   Selve felterne bruger designsystemets .field-komponent (components.css) og
   arver dermed 2 px kant, --radius-sm og 18 px skrift — den skriftstørrelse er
   valgt bevidst for 45+-målgruppen, og en parallel formular-CSS her ville
   stille og roligt vandre fra den. Herunder står KUN det, .field ikke dækker. */

.kform{margin:1.8rem 0 0;max-width:34rem}
.kform__intro{margin:0 0 1.4rem;font-size:1rem;line-height:1.55;color:var(--ink-soft,#454B52)}

/* To felter på en linje. .field har selv max-width:480px, som grid'et styrer. */
.kform__split{display:grid;gap:0 1.1rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kform__split .field{max-width:none}

/* Select mister sin pil, når appearance nulstilles i components.css.
   Tegnet som baggrund, så den ikke afhænger af et ikonbibliotek. */
.kform select{padding-right:2.4rem;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23454B52' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}

.kform__hint{font-weight:400;color:var(--ink-faint,#6B7178)}

/* Honeypot: skal ALDRIG kunne ses eller nås. Lå synligt på den live side. */
.kform__hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

.kform__note{margin:.9rem 0 0;font-size:.85rem;line-height:1.5;color:var(--ink-soft,#454B52)}

@media (max-width:600px){
  .kform__split{grid-template-columns:1fr}
}

/* ---- SKÆRMBILLEDER (11/8-2026) ------------------------------------------
   Erstatter de stiliserede HTML-attrapper i "Systemet bag". Lasse: "vi
   skriver at vi viser klip fra skærme — det gør vi jo ikke rigtigt."
   Nu er det rigtige skærmbilleder fra de flader der faktisk kører. */
/* Grid-børn har min-width:auto som standard og kan derfor ikke krympe under
   deres eget indhold. Med et 1180 px bredt skærmbillede indeni sprængte
   kolonnerne gridet og lagde sig oven i hinanden. */
.grid-2--tease > .tease { min-width: 0; }

.skaerm { margin: 0 0 1rem; }
.skaerm img {
  width: 100%; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line, #E3DFD6); border-radius: 3px;
  box-shadow: 0 1px 0 rgba(20,24,29,.08), 0 18px 40px -28px rgba(20,24,29,.45);
}