/* Hours forside — nyt indhold (S: Hours på mobil → Mindre administration, mere kontrol)
   Kræver sitets eksisterende css/style.css (.container, .display, .section-label, .btn m.fl.) */
.flow-line-in { stroke-dasharray:1; stroke-dashoffset:1; animation:lineIn 10s linear infinite; }
.flow-line-out { stroke-dasharray:1; stroke-dashoffset:1; animation:lineOut 10s linear infinite; }
@keyframes lineIn { 0%{stroke-dashoffset:1; opacity:0;} 4%{opacity:1;} 30%{stroke-dashoffset:0; opacity:1;} 42%{opacity:0;} 100%{stroke-dashoffset:0; opacity:0;} }
@keyframes lineOut { 0%,46%{stroke-dashoffset:1; opacity:0;} 50%{opacity:1;} 72%{stroke-dashoffset:0; opacity:1;} 88%{opacity:0;} 100%{stroke-dashoffset:0; opacity:0;} }
@keyframes hubOn { 0%,30%{ box-shadow:0 1px 4px rgba(26,25,22,.08); } 36%,64%{ box-shadow:0 0 0 6px rgba(31,157,85,.14), 0 1px 4px rgba(26,25,22,.08); } 72%,100%{ box-shadow:0 1px 4px rgba(26,25,22,.08); } }
@keyframes nodeOn { 0%,48%{ transform:translateY(0); box-shadow:0 1px 4px rgba(26,25,22,.06); color:#6b6560; } 56%,84%{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(26,25,22,.10); color:#0e6640; } 92%,100%{ transform:translateY(0); box-shadow:0 1px 4px rgba(26,25,22,.06); color:#6b6560; } }
@keyframes caretBlink { 0%,55%{ opacity:1; } 56%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .flow-line-in, .flow-line-out { animation:none; stroke-dashoffset:0; opacity:.6; }
  .flow-node, .flow-hub { animation:none !important; }
  /* Eksportens regel daekkede ikke urets visere i navet - de har deres egen
     inline-animation og koerte videre. */
  .clock-hour, .clock-min { animation:none !important; }
  /* og markoeren i soegefeltet */
  .jur-caret, [style*="caretBlink"] { animation:none !important; }
}

/* ── Responsivt lag ────────────────────────────────────────────────────────
   Eksporten er tegnet til desktop og indeholdt ingen media queries: flere
   kompositioner staar med faste px-koordinater (telefonens flydende kort,
   flowets nav paa left:512px, kontraktsektionens badge paa left:402px). Under
   1280px skubbede de siden op til 409px ud over kanten paa mobil.
   Herunder foldes de faste kompositioner ud i en stak i stedet. Desktop er
   uaendret - reglerne traeder foerst i kraft under de angivne bredder. */

/* Rent dekorative lag med faste px-koordinater kan ikke reflowe. */
@media (max-width: 1100px) { .fi-deko { display: none !important; } }

/* Telefonen: teksterne laegger sig under telefonen i stedet for at ligge bag den. */
@media (max-width: 900px) {
  .fi-scene--tel {
    display: flex !important; flex-direction: column; align-items: center;
    min-height: 0 !important; gap: 26px;
  }
  .fi-tel-tekst {
    position: static !important; width: 100% !important; max-width: 420px;
    text-align: center; inset: auto !important;
  }
  .fi-scene--tel > .fi-tel { order: -1; }
}

/* Systemflowet: kilder, nav og udfald stables. Forbindelseslinjerne har et
   fast viewBox med px-placerede knudepunkter og giver ikke mening stablet. */
@media (max-width: 900px) {
  .fi-scene--flow { height: auto !important; display: flex; flex-direction: column;
                    align-items: center; gap: 22px; }
  .fi-flow-linjer { display: none; }
  .fi-flow-kilder, .fi-flow-udfald, .flow-hub {
    position: static !important; inset: auto !important;
  }
  .fi-flow-kilder, .fi-flow-udfald { width: auto !important; }
  /* Navet skal blive ved med at vaere en cirkel - kun placeringen nulstilles. */
  .flow-hub { flex-shrink: 0; }
  .fi-flow-kilder {
    display: grid !important; grid-template-columns: repeat(4, 64px);
    justify-content: center; gap: 8px;
  }
  .fi-flow-kilder > div { display: contents !important; }
  .fi-flow-udfald { width: 100% !important; max-width: 360px; gap: 8px; }
  .fi-flow-udfald .flow-node { text-align: center; }
  .flow-hub { animation: none !important; }
}

/* De fire lag. */
@media (max-width: 1000px) { .fi-lag { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .fi-lag { grid-template-columns: 1fr !important; } }

/* ── Modulsektionerne paa mobil ──────────────────────────────────────────
   De tre modulsektioner stod i et 44/56-gitter uden nogen media query, saa
   tekstsoejlen blev klemt ned til ca. 58 % af en telefonskaerm og mockup'en
   til en 240 px stump, hvor selve dashboardet var klippet helt vaek.
   De stables nu, med teksten foerst og mockup'en under. */
@media (max-width: 900px) {
  .fi-modul { grid-template-columns: 1fr !important; gap: 34px !important; }
  /* I loensektionen staar mockup'en foerst i markup. Teksten skal stadig
     laeses foerst paa en telefon. */
  .fi-modul--omvendt .fi-modul > *:first-child { order: 2; }

  /* Mockup'en faar hele bredden. Den laeses som et indtryk af produktet -
     formen, fladerne og de faa store badges - ikke som noget man laeser linje
     for linje. Et zoomet udsnit blev proevet foerst, men skar ordene midt
     over og lignede en fejl. */
  .fi-scene--mockup { overflow: clip; }
}

/* Tryk-maal paa touch. "Laes mere"-linkene i lagkortene var 20 px hoeje;
   under de ca. 44 px en finger rammer paalideligt. De faar polstring i
   stedet for stoerre skrift, saa kortenes typografi er uaendret. */
@media (hover: none) and (pointer: coarse) {
  .fi-kortlink {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 4px 2px; margin-left: -2px;
  }
}

/* Brancher: fire kolonner blev staaende hele vejen ned, saa kortene endte paa
   ca. 80 px med afskaarne overskrifter ("RESTAURA", "HAANDVAER") og ét ord pr.
   linje. */
@media (max-width: 900px) { .fi-brancher { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .fi-brancher { grid-template-columns: 1fr !important; } }

/* Amber-fladen er 16/9.6. Paa en telefon bliver det en 218 px hoej stribe,
   hvor skelettet inden i ikke laeses som noget. Den faar et hoejere format,
   saa fladen har samme vaegt som paa desktop. */
@media (max-width: 760px) {
  .fi-amber-flade { aspect-ratio: 16 / 13 !important; }
  #amber { padding-bottom: clamp(64px, 12vw, 96px) !important; }
}

/* Laesetekst der var under 14 px paa telefon. Branchekortenes broedtekst laa
   paa 12,5 px og billedteksten under soegefeltet paa 12,2 px - begge er hele
   saetninger, man skal laese, ikke etiketter.
   Sektionsetiketterne (.section-label, 11,5 px) er sitets egen stil paa alle
   sider og roeres ikke herfra. */
@media (max-width: 900px) {
  .fi-branche-tekst { font-size: .95rem !important; line-height: 1.5 !important; }
  .fi-billedtekst   { font-size: .88rem !important; line-height: 1.5 !important; }
}

/* ── Laerredet under footeren ─────────────────────────────────────────────
   Fladen bag selve dokumentet. Uden en baggrund paa html forplanter body'ens
   hvide sig hertil, og naar man scroller forbi bunden - gummibaandet paa
   telefon og trackpad - ser man en hvid flade under den moerke footer.
   Footeren ser dermed ud til at stoppe foer sidens bund.

   Forsiden er mint i toppen og moerk i bunden, saa én farve er forkert i den
   ene ende. Laerredet faar derfor en overgang: mintens tone oeverst, footerens
   --ink nederst. Overscroll viser altid naermeste kant, saa toppen forbliver
   mint og bunden bliver moerk. Farven #a9c4b2 er maalt paa hero-billedets
   oeverste pixelraekke, saa overgangen ikke kan ses.

   Reglen ligger her og ikke i style.css, fordi denne fil kun indlaeses af
   forsiden. To af sitets oevrige sider har lys top og ville faa en moerk
   flade over sig ved overscroll i toppen.
   2026-09: forsiden er nu hvid i toppen (hero'en er et indfaeldet panel paa
   hvid flade), saa toppen af laerredet er hvid i stedet for mint. */
html { background: linear-gradient(to bottom, #ffffff 0 50%, var(--ink) 50% 100%); }