/* ==========================================================================
   kundeadmin-v2.css — kundefladen v2 (F057, flaget F057_kundeflade_v2)

   Indlæses SIDST og kun af Kundeadmin-layoutet med flaget tændt; roden er
   da <body class="flade-kunde v2">. Alt herunder er derfor under
   `.flade-kunde.v2` — portalen og tenantadmin rammes ikke, og med flaget
   slukket findes arket slet ikke i dokumentet.

   Værdierne er graphic-design/F057_visual_v1.md. Hex-værdier og skygger står
   KUN i token-blokken; komponenterne bruger var(--…). Ingen webfont, ingen
   url(), ingen JavaScript (CSP: font-src 'self', script-src 'none').

   Sproget kommer mest af at overskrive de tokens, grundlag.css §2 tillader
   («forskellen er ti tokens», VIS-003). Resten er de få komponenter, hvis form
   ændres. Skærmreglerne står i `@media screen`, så udskriften stadig styres
   af print.css.
   ========================================================================== */

.flade-kunde.v2 {
  /* --- Nye v2-tokens ---------------------------------------------------- */
  --v2-accent-900:   #0a303e;   /* kun .kort--moerk (højst ét pr. skærm, #44) */
  --v2-accent-800:   #0e4555;   /* aktiv tekst: rail, chip, fane, Opret      */
  --v2-accent-700:   #0a5866;   /* links, stille knap, :active på primær     */
  --v2-accent:       #0b6e7f;   /* primærknap, stribe, logomærke, markør     */
  --v2-accent-hover: #095e6d;
  --v2-accent-300:   #8cc4cc;   /* etiket og knapkant i .kort--moerk         */
  --v2-accent-200:   #c4e1e5;   /* brød i .kort--moerk, avatar, Opret åben   */
  --v2-accent-100:   #e6f2f4;   /* aktiv bund, hover på række og menupunkt   */
  --v2-gul:          #e9a23b;   /* kun rail-badgen, altid med 900-tekst      */
  --v2-bund:         #f5f7f9;
  --v2-kort:         #ffffff;
  --v2-kant:         #d7dde3;   /* dekorative kanter (= --kant-fin)          */
  --v2-farlig-hover: #731117;
  --v2-skygge-sm: 0 1px 2px rgba(10, 48, 62, 0.08);
  --v2-skygge-md: 0 8px 24px rgba(10, 48, 62, 0.16);
  --v2-skygge-lg: 0 12px 40px rgba(10, 48, 62, 0.25);
  --v2-skygge-baggrund: rgba(10, 48, 62, 0.45);

  --v2-tekst-titel:       1.875rem;  /* 30 px — sidetitel, hovedtal      */
  --v2-tekst-titel-lille: 1.5rem;    /* 24 px — sidetitel under 768 px   */
  --v2-tekst-celle:       0.875rem;  /* 14 px — tabelcelle, brugernavn   */

  /* --- Eksisterende tokens, som grundlag.css §2 tillader overskrevet ----- */
  --signatur:         var(--v2-accent);
  --primaer:          var(--v2-accent);
  --primaer-moerk:    var(--v2-accent-hover);
  --primaer-tint:     var(--v2-accent-100);
  /* --link er regnet ud på :root ud fra rodens --primaer og skal derfor
     sættes igen her, ellers arver den den gamle blå. */
  --link:             var(--v2-accent-700);
  /* Ingen lilla i v2: et besøgt link har linkets farve (VIS-020). */
  --link-besogt:      var(--v2-accent-700);
  --chrome-bund:      var(--v2-kort);
  --chrome-kant:      var(--v2-kant);
  --rail-bund:        var(--v2-kort);
  --rail-aktiv-bund:  var(--v2-accent-100);
  --rail-aktiv-tekst: var(--v2-accent-800);
  --kant-kort:        var(--v2-kant);
  --sideflade:        var(--v2-bund);
  --radius-lille: 9px;
  --radius:       14px;
  --radius-stor:  16px;
  --skygge-kort:   var(--v2-skygge-sm);
  --skygge-dialog: var(--v2-skygge-lg);
  --rail-bredde:  240px;
}

@media screen {

  /* ------------------------------------------------------------------------
     SKELET
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .indhold { padding: 28px 32px 48px; }

  /* ------------------------------------------------------------------------
     TOPBJÆLKEN (#44) — lys, 4 px stribe + 56 px indhold. Første kolonne
     flugter med railen; midterkolonnen er tom, indtil søgningen kommer.
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .topbaand {
    display: grid;
    grid-template-columns: minmax(var(--rail-bredde), auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 60px;
    padding: 4px 20px 0 0;
    border-bottom: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .topbaand__identitet {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 24px;
  }
  .flade-kunde.v2 .topbaand__identitet > .miljoemaerkat { margin-left: 2px; }
  .flade-kunde.v2 .topbaand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--v2-accent);
    color: var(--hvid);
    font-size: var(--tekst-brod);
    font-weight: var(--vaegt-fed);
  }
  .flade-kunde.v2 .topbaand__navne {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
  }
  .flade-kunde.v2 .topbaand__produkt {
    font-size: var(--tekst-brod);
    font-weight: var(--vaegt-halvfed);
    color: var(--tekst-overskrift);
    white-space: nowrap;
  }
  .flade-kunde.v2 .topbaand__tenant {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--tekst-lille);
    color: var(--tekst-daempet);
  }
  .flade-kunde.v2 .topbaand__hoejre {
    grid-column: 3;
    margin-left: 0;
    gap: 12px;
  }

  /* «Opret» og brugeren: <details>, åbner uden JavaScript. */
  .flade-kunde.v2 .opret,
  .flade-kunde.v2 .bruger { position: relative; }
  .flade-kunde.v2 .opret > summary,
  .flade-kunde.v2 .bruger > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--klikmaal);
    border-radius: 9px;
    list-style: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--overgang), border-color var(--overgang);
  }
  .flade-kunde.v2 .opret > summary::-webkit-details-marker,
  .flade-kunde.v2 .bruger > summary::-webkit-details-marker { display: none; }
  .flade-kunde.v2 .opret > summary > .ikon,
  .flade-kunde.v2 .bruger > summary > .ikon { width: 16px; height: 16px; flex: 0 0 auto; }
  /* Chevronen er sidste barn: 90° peger ned, 270° peger op, når den er åben. */
  .flade-kunde.v2 .opret > summary > .ikon:last-child,
  .flade-kunde.v2 .bruger > summary > .ikon:last-child {
    transform: rotate(90deg);
    transition: transform var(--overgang);
  }
  .flade-kunde.v2 .opret[open] > summary > .ikon:last-child,
  .flade-kunde.v2 .bruger[open] > summary > .ikon:last-child { transform: rotate(270deg); }

  /* Opret er en chrome-knap i accent-tint, ikke en primærknap (UI-012). */
  .flade-kunde.v2 .opret > summary {
    padding: 0 14px;
    border: 1px solid var(--v2-accent);
    background: var(--v2-accent-100);
    color: var(--v2-accent-800);
    font-size: var(--tekst-brod);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .opret > summary:hover,
  .flade-kunde.v2 .opret[open] > summary { background: var(--v2-accent-200); }

  .flade-kunde.v2 .bruger > summary {
    padding: 0 8px 0 4px;
    background: transparent;
    color: var(--tekst-krop);
  }
  .flade-kunde.v2 .bruger > summary:hover,
  .flade-kunde.v2 .bruger[open] > summary { background: var(--v2-bund); }
  .flade-kunde.v2 .bruger > summary > .ikon:last-child { color: var(--tekst-daempet); }
  .flade-kunde.v2 .bruger__navn {
    font-size: var(--v2-tekst-celle);
    font-weight: var(--vaegt-halvfed);
    color: var(--tekst-krop);
  }

  .flade-kunde.v2 .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--v2-accent-200);
    color: var(--v2-accent-900);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-fed);
  }

  .flade-kunde.v2 .menupanel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 240px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--v2-kort);
    border: 1px solid var(--v2-kant);
    border-radius: 14px;
    box-shadow: var(--v2-skygge-md);
  }
  .flade-kunde.v2 .menupanel--bruger { min-width: 280px; }
  .flade-kunde.v2 .menupanel__punkt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--klikmaal);
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--tekst-krop);
    font: inherit;
    font-size: var(--tekst-brod);
    font-weight: var(--vaegt-normal);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .flade-kunde.v2 .menupanel__punkt:hover {
    background: var(--v2-accent-100);
    color: var(--v2-accent-800);
    text-decoration: none;
  }
  .flade-kunde.v2 .menupanel__punkt > .ikon { width: 18px; height: 18px; flex: 0 0 auto; }
  .flade-kunde.v2 .bruger__hvem {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 10px 12px;
  }
  .flade-kunde.v2 .bruger__fuldt {
    font-size: var(--tekst-brod);
    font-weight: var(--vaegt-halvfed);
    color: var(--tekst-overskrift);
  }
  .flade-kunde.v2 .bruger__rolle {
    font-size: var(--tekst-tabel);
    color: var(--tekst-daempet);
    overflow-wrap: anywhere;
  }
  .flade-kunde.v2 .menupanel__skille {
    height: 1px;
    margin: 6px 0;
    background: var(--v2-kant);
  }


  /* ------------------------------------------------------------------------
     RAILEN — 240 px, lys. Aktiv = bund + vægt + markør (3 × 20 px), fordi
     aktiv-bunden alene kun står 1,14:1 mod hvid (VIS-002).
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .rail {
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    background: var(--v2-kort);
    border-right: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .rail > ul {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  .flade-kunde.v2 .rail__gruppe > ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .flade-kunde.v2 .rail__gruppe + .rail__gruppe { margin-top: 16px; }
  .flade-kunde.v2 .rail__gruppe > .etikette { padding: 4px 12px 6px; }
  .flade-kunde.v2 .rail__punkt > a {
    position: relative;
    gap: 10px;
    min-height: var(--klikmaal);
    padding: 0 12px;
    border-left: 0;
    border-radius: 9px;
    color: var(--tekst-krop);
    font-size: var(--tekst-brod);
    transition: background-color var(--overgang);
  }
  .flade-kunde.v2 .rail__punkt > a:hover {
    background: var(--v2-bund);
    text-decoration: none;
  }
  .flade-kunde.v2 .rail__punkt > a[aria-current="page"] {
    background: var(--v2-accent-100);
    color: var(--v2-accent-800);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .rail__punkt > a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 20px;
    margin-top: -10px;
    border-radius: 2px;
    background: var(--v2-accent);
  }
  .flade-kunde.v2 .rail :focus-visible { border-radius: 9px; }
  .flade-kunde.v2 .rail__badge {
    height: 20px;
    min-width: 20px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: var(--v2-gul);
    color: var(--v2-accent-900);
    font-family: var(--skrift);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-fed);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    line-height: 20px;
  }
  /* Skillelinjen og foden står nederst i railen. */
  .flade-kunde.v2 .rail__skille {
    height: 1px;
    margin: auto 12px 0;
    background: var(--v2-kant);
  }
  /* Sidste gruppe står lige før skillelinjen og foden: 12 px luft. */
  .flade-kunde.v2 .rail > ul > .rail__gruppe:nth-last-child(3) { padding-bottom: 12px; }
  .flade-kunde.v2 .rail__sekundaer {
    padding: 14px 12px 4px;
    font-size: var(--tekst-lille);
    color: var(--tekst-daempet);
    overflow-wrap: anywhere;
  }

  /* ------------------------------------------------------------------------
     TYPOGRAFI OG TAL
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .kort h2,
  .flade-kunde.v2 .kort__titel { font-size: var(--tekst-mellem); line-height: 1.3; }

  /* Tabulærtal i systemskriften; monospace kun til koder og nøgler. */
  .flade-kunde.v2 .beloeb,
  .flade-kunde.v2 .dato,
  .flade-kunde.v2 .tal,
  .flade-kunde.v2 .tabel .kol-tal,
  .flade-kunde.v2 .tabel .kol-beloeb,
  .flade-kunde.v2 .tabel .kol-dato,
  .flade-kunde.v2 .maalerkort__tal,
  .flade-kunde.v2 .maerke__tal,
  .flade-kunde.v2 .chip__tal,
  .flade-kunde.v2 .kort__meta,
  .flade-kunde.v2 .kunde__nr,
  .flade-kunde.v2 .koegruppe__tal,
  .flade-kunde.v2 .blikkort__tal,
  .flade-kunde.v2 .godkendelser__gruppetal,
  .flade-kunde.v2 .nytabonnement__kundenr,
  .flade-kunde.v2 .dialog__noegletal dd.beloeb {
    font-family: var(--skrift);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }

  /* ------------------------------------------------------------------------
     K-16 · SIDEOVERSKRIFT — ingen bundstreg i v2
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .sideoverskrift {
    gap: 24px;
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 24px;
  }
  .flade-kunde.v2 .sideoverskrift h1 {
    font-size: var(--v2-tekst-titel);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .flade-kunde.v2 .sideoverskrift__meta {
    margin-top: 6px;
    font-size: var(--tekst-brod);
  }
  .flade-kunde.v2 .sideoverskrift__handlinger { gap: 8px; }
  .flade-kunde.v2 .brodkrumme { font-size: var(--tekst-tabel); }

  /* ------------------------------------------------------------------------
     KORT · K-3 MÅLERKORT
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .kort { padding: 20px 24px; }
  .flade-kunde.v2 .maalerkort {
    gap: 6px;
    padding: 18px 20px;
  }
  .flade-kunde.v2 a.maalerkort:hover {
    border-color: var(--kant-felt);
    box-shadow: var(--v2-skygge-md);
  }
  .flade-kunde.v2 .maalerkort__etiket {
    font-size: var(--tekst-tabel);
    font-weight: var(--vaegt-normal);
    letter-spacing: normal;
    text-transform: none;
  }
  .flade-kunde.v2 .maalerkort__tal {
    font-size: var(--v2-tekst-titel);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  /* ------------------------------------------------------------------------
     K-1 · TABEL — hoved uden fyld, ingen zebra, hover i accent-tint
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .tabel-ramme { box-shadow: var(--v2-skygge-sm); }
  .flade-kunde.v2 .tabel {
    font-size: var(--v2-tekst-celle);
    line-height: 1.4;
  }
  .flade-kunde.v2 .tabel thead th {
    padding: 12px 16px;
    background: var(--v2-kort);
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-halvfed);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .tabel tbody td {
    height: 44px;
    padding: 12px 16px;
  }
  .flade-kunde.v2 .tabel th:first-child,
  .flade-kunde.v2 .tabel td:first-child { padding-left: 24px; }
  .flade-kunde.v2 .tabel th:last-child,
  .flade-kunde.v2 .tabel td:last-child { padding-right: 24px; }
  .flade-kunde.v2 .tabel--zebra tbody tr:nth-child(even) { background: none; }
  .flade-kunde.v2 .tabel tbody tr:hover { background: var(--v2-accent-100); }
  .flade-kunde.v2 .tabel tfoot td {
    background: var(--v2-bund);
    border-top: 1px solid var(--v2-kant);
    font-size: var(--tekst-tabel);
    color: var(--tekst-daempet);
  }

  /* ------------------------------------------------------------------------
     K-2 · STATUSMÆRKE SOM PILLE — kantformen (VIS-002) bevares
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .maerke {
    gap: 4px;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
  }

  /* ------------------------------------------------------------------------
     CHIPS — neutrale filtre; aktiv = tint + kant
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .chip {
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--v2-kort);
    color: var(--tekst-krop);
    font-weight: var(--vaegt-normal);
  }
  .flade-kunde.v2 .chip:hover { background: var(--v2-bund); }
  /* Aktiv bærer mere end farve (VIS-002): vægt 600 og en kant på i alt
     2 px. Fluebenet foran teksten kommer med opmærkningen i fase c. */
  .flade-kunde.v2 .chip[aria-current],
  .flade-kunde.v2 .chip[aria-pressed="true"],
  .flade-kunde.v2 .chip--aktiv {
    background: var(--v2-accent-100);
    border-color: var(--v2-accent);
    box-shadow: inset 0 0 0 1px var(--v2-accent);
    color: var(--v2-accent-800);
    font-weight: var(--vaegt-halvfed);
  }

  /* Små indlejrede elementer beholder 3 px — ellers ligner de K-2-pillen. */
  .flade-kunde.v2 code,
  .flade-kunde.v2 kbd,
  .flade-kunde.v2 samp,
  .flade-kunde.v2 .sti,
  .flade-kunde.v2 .haendelses-id,
  .flade-kunde.v2 .miljoemaerkat { border-radius: 3px; }

  /* ------------------------------------------------------------------------
     KNAPPER — radius 9. Varianternes hover står efter .knap:hover, fordi
     de har samme specificitet.
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .knap {
    gap: 8px;
    padding: 0 16px;
    border-radius: 9px;
    transition: background-color var(--overgang), border-color var(--overgang);
  }
  .flade-kunde.v2 .knap:hover {
    background: var(--v2-bund);
    border-color: var(--tekst-daempet);
  }
  .flade-kunde.v2 .knap:active { background: var(--fyld-svag); }
  .flade-kunde.v2 .knap--primaer {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: var(--hvid);
  }
  .flade-kunde.v2 .knap--primaer:hover {
    background: var(--v2-accent-hover);
    border-color: var(--v2-accent-hover);
  }
  .flade-kunde.v2 .knap--primaer:active {
    background: var(--v2-accent-700);
    border-color: var(--v2-accent-700);
  }
  .flade-kunde.v2 .knap--stille {
    padding: 0 8px;
    border-color: transparent;
    background: none;
    color: var(--v2-accent-700);
  }
  .flade-kunde.v2 .knap--stille:hover {
    background: var(--v2-accent-100);
    border-color: transparent;
  }
  .flade-kunde.v2 .knap--farlig:hover {
    background: var(--v2-farlig-hover);
    border-color: var(--v2-farlig-hover);
  }
  .flade-kunde.v2 .knap--lille {
    min-height: 32px;
    padding: 0 12px;
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .knap[disabled],
  .flade-kunde.v2 .knap[aria-disabled="true"] {
    background: var(--fyld-svag);
    border-color: var(--graa-400);
    color: var(--tekst-deaktiv);
  }

  /* ------------------------------------------------------------------------
     DET MØRKE HOVEDTAL-KORT — højst ét pr. skærm (#44). Står EFTER
     knapsektionen: dens :hover/:active har samme specificitet og ville
     ellers give tekst under 3:1 på petrol. Alle tilstande er sat her.
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .kort--moerk {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 0;
    background: var(--v2-accent-900);
    color: var(--v2-accent-200);
  }
  .flade-kunde.v2 .kort--moerk .maalerkort__etiket { color: var(--v2-accent-300); }
  .flade-kunde.v2 .kort--moerk .maalerkort__tal { color: var(--hvid); }
  .flade-kunde.v2 .kort--moerk a { color: var(--hvid); }
  .flade-kunde.v2 .kort--moerk :focus-visible { outline-color: var(--hvid); }
  .flade-kunde.v2 .kort--moerk .knap {
    background: transparent;
    border-color: var(--v2-accent-300);
    color: var(--hvid);
  }
  .flade-kunde.v2 .kort--moerk .knap:hover {
    background: var(--v2-accent-800);
    border-color: var(--v2-accent-300);
  }
  .flade-kunde.v2 .kort--moerk .knap:active {
    background: var(--v2-accent-800);
    border-color: var(--v2-accent-300);
  }
  .flade-kunde.v2 .kort--moerk .knap--primaer {
    background: var(--hvid);
    border-color: var(--hvid);
    color: var(--v2-accent-900);
  }
  .flade-kunde.v2 .kort--moerk .knap--primaer:hover {
    background: var(--v2-accent-100);
    border-color: var(--hvid);
    color: var(--v2-accent-900);
  }
  .flade-kunde.v2 .kort--moerk .knap--primaer:active {
    background: var(--v2-accent-200);
    border-color: var(--hvid);
    color: var(--v2-accent-900);
  }
  /* Deaktiveret i det mørke kort (graphic review v2, finding 1): (0,5,0)
     vinder over kortets .knap og dens hover — en deaktiveret knap må ikke
     ligne en aktiv konturknap. */
  .flade-kunde.v2 .kort--moerk .knap[disabled],
  .flade-kunde.v2 .kort--moerk .knap[aria-disabled="true"] {
    background: var(--fyld-svag);
    border-color: var(--graa-400);
    color: var(--tekst-deaktiv);
  }
  /* Målerkortets dæmpede tekst er grå på hvidt — på petrol står den i 200. */
  .flade-kunde.v2 .kort--moerk .maalerkort__under { color: var(--v2-accent-200); }
  /* «—» arver ellers grundlagets dæmpede grå, cirka 2:1 på petrol (graphic F065 finding 1). */
  .flade-kunde.v2 .kort--moerk .tom-vaerdi { color: var(--v2-accent-200); }
  /* Grundens .haendelses-id har hvid bund (--kortflade); på petrol skal
     id'et og dets kant stå direkte på kortet (graphic F058 review, finding 1). */
  .flade-kunde.v2 .kort--moerk .haendelses-id {
    background: transparent;
    color: var(--v2-accent-200);
  }

  /* ------------------------------------------------------------------------
     OVERBLIK (F058) — kundefladens forside i v2
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .overblik > * + * { margin-top: 24px; }
  .flade-kunde.v2 .overblik__status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -12px 0 0;
    color: var(--tekst-krop);
    font-size: var(--tekst-brod);
  }
  .flade-kunde.v2 .overblik__status > .ikon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  .flade-kunde.v2 .overblik__status--ok > .ikon { color: var(--tone-ok); }
  .flade-kunde.v2 .overblik__status--ukendt > .ikon { color: var(--tone-opmaerksom); }

  /* Det mørke kort (Aktive) og to K-3-kort: 3 → mørkt i fuld bredde + 2 → 1. */
  .flade-kunde.v2 .overblik__kort {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .flade-kunde.v2 .overblik__kort > .maalerkort { min-height: 132px; }
  .flade-kunde.v2 .maalerkort__tal--tekst {
    font-size: var(--tekst-mellem);
    line-height: 1.3;
  }

  .flade-kunde.v2 .overblik__spalter {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
  }
  .flade-kunde.v2 .overblik__spalte > * + * { margin-top: 24px; }

  /* «Venter på dig» og «Udløber snart»: rækker med glyf + tekst (VIS-002). */
  .flade-kunde.v2 .overblik__raekker {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .flade-kunde.v2 .overblik__raekke {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .overblik__raekke > .ikon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--tekst-daempet);
  }
  .flade-kunde.v2 .overblik__raekke-tekst {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .flade-kunde.v2 .overblik__raekke-navn { font-weight: var(--vaegt-halvfed); }
  .flade-kunde.v2 .overblik__raekke-detalje {
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .overblik__raekke-handling {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }
  .flade-kunde.v2 .overblik__raekke-handling > .knap-forklaring {
    max-width: 32ch;
    margin: 0;
    font-size: var(--tekst-lille);
  }

  /* «Kræver opmærksomhed»: tonens venstrekant + glyf — farven er ikke alene. */
  .flade-kunde.v2 .overblik__opmaerksom { border-left: 4px solid var(--tone-opmaerksom); }
  .flade-kunde.v2 .overblik__opmaerksom h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
  }
  .flade-kunde.v2 .overblik__opmaerksom h2 > .ikon { color: var(--tone-opmaerksom); }
  .flade-kunde.v2 .overblik__opmaerksom ul {
    margin: 0;
    padding-left: 26px;
  }
  .flade-kunde.v2 .overblik__opmaerksom li + li { margin-top: 4px; }

  /* Aktørchippen i tidslinjen (K-7). Ingen tonefarve: en aktør er ikke en tilstand. */
  .flade-kunde.v2 .overblik__aktoer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 10px;
    border: 1px solid var(--v2-kant);
    border-radius: 999px;
    background: var(--v2-bund);
    color: var(--tekst-krop);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .overblik__aktoer > .ikon { width: 12px; height: 12px; }

  /* ------------------------------------------------------------------------
     ABONNEMENTER OG ABONNEMENT (F060) — F057 fase c
     ------------------------------------------------------------------------ */
  /* Chippens flueben (UI-018) og tal: tallet er dæmpet og normal vægt. */
  .flade-kunde.v2 .chip > .ikon {
    flex: none;
    width: 14px;
    height: 14px;
  }
  /* Tallene staar i den faelles tal-regel (TYPOGRAFI OG TAL). */
  .flade-kunde.v2 .chip__tal {
    color: var(--tekst-daempet);
    font-weight: var(--vaegt-normal);
  }
  .flade-kunde.v2 .chip[aria-current] .chip__tal { color: var(--v2-accent-800); }
  .flade-kunde.v2 .chipraekke + .filterlinje { margin-top: 16px; }
  /* Linjen under chipsene: hvad «Alle» udelader, og vejen dertil. */
  .flade-kunde.v2 .chiplinje {
    margin: 12px 0 0;
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .chiplinje + .filterlinje { margin-top: 16px; }
  .flade-kunde.v2 .filterlinje + .tabel-ramme,
  .flade-kunde.v2 .filterlinje + .tilstand { margin-top: 16px; }

  /* Kundecellen: avatar 30 + navn. */
  .flade-kunde.v2 .kundecelle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .flade-kunde.v2 .avatar--tabel {
    width: 30px;
    height: 30px;
    font-size: var(--tekst-lille);
  }
  .flade-kunde.v2 .avatar--stor {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 20px;
  }
  .flade-kunde.v2 .produktcelle__nr {
    display: block;
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
  }

  /* Detaljen: hovedkortet og det ene mørke kort side om side. Det mørke kort
     er kun så højt, som indholdet kræver (#44: et accentpunkt), mindst 132. */
  .flade-kunde.v2 .abonnement > * + * { margin-top: 24px; }
  .flade-kunde.v2 .abonnement__top {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .flade-kunde.v2 .abonnement__pr-maaned { min-height: 132px; }
  .flade-kunde.v2 .abonnement__identitet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }
  .flade-kunde.v2 .abonnement__navne {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .flade-kunde.v2 .abonnement__navne p { margin: 0; }
  .flade-kunde.v2 .abonnement__erp,
  .flade-kunde.v2 .abonnement__produkt {
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .kort--moerk .beloeb__valuta { color: var(--v2-accent-200); }

  /* Livsforløbet: lige trin (CSP: ingen procent-placering). Kæden har intet
     loft, så trinene brydes i rækker i stedet for at blive smallere. */
  .flade-kunde.v2 .forloeb {
    display: grid;
    grid-auto-flow: row;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Mere luft mellem rækkerne end inde i trinet, så hvert trin læses som én
     gruppe, når kæden brydes (graphic F063 finding 1). */
  @media (min-width: 768px) {
    .flade-kunde.v2 .forloeb { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); row-gap: 20px; }
  }
  .flade-kunde.v2 .forloeb__trin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 12px;
    border-top: 3px solid var(--v2-kant);
    font-size: var(--tekst-tabel);
  }
  /* Den viste periode: tykkere kant i accent + teksten «Denne periode» —
     farven er ikke alene (VIS-002). */
  .flade-kunde.v2 .forloeb__trin--nu { border-top-color: var(--v2-accent); }
  .flade-kunde.v2 .forloeb__her {
    color: var(--v2-accent-800);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-halvfed);
  }

  /* ------------------------------------------------------------------------
     FELTER — radius 9 kommer fra --radius-lille; kanten forbliver
     --kant-felt (WCAG 1.4.11)
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover:enabled,
  .flade-kunde.v2 select:hover:enabled,
  .flade-kunde.v2 textarea:hover:enabled { border-color: var(--tekst-daempet); }
  .flade-kunde.v2 input:not([type="checkbox"]):not([type="radio"]):focus,
  .flade-kunde.v2 select:focus,
  .flade-kunde.v2 textarea:focus { border-color: var(--v2-accent); }
  .flade-kunde.v2 .felt--fejl input,
  .flade-kunde.v2 .felt--fejl select,
  .flade-kunde.v2 .felt--fejl textarea { border-color: var(--tone-alvorlig); }

  /* ------------------------------------------------------------------------
     K-8 · DIALOG · K-9 · KVITTERING
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .dialog-baggrund { background: var(--v2-skygge-baggrund); }
  .flade-kunde.v2 .dialog {
    padding: 24px;
    border-color: var(--v2-kant);
  }
  .flade-kunde.v2 .dialog__titel { margin-bottom: 16px; }
  .flade-kunde.v2 .dialog__noegletal { border-color: var(--v2-kant); }
  .flade-kunde.v2 .dialog__handlinger {
    gap: 8px;
    margin-top: 24px;
  }
  .flade-kunde.v2 .dialog__konsekvens { border-radius: 9px; }

  .flade-kunde.v2 .kvittering {
    gap: 12px;
    padding: 14px 18px;
  }
  .flade-kunde.v2 .kvittering--neutral { background: var(--v2-bund); }

  /* ------------------------------------------------------------------------
     F062 KUNDER OG PRODUKTER — F057 fase e
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .kunde > * + *,
  .flade-kunde.v2 .produktside > * + * { margin-top: 24px; }

  /* Kundekortet: avatar 56 + navn + kundenr. + kildepillen. */
  .flade-kunde.v2 .kunde__identitet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  .flade-kunde.v2 .kunde__navne {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .flade-kunde.v2 .kunde__navne p { margin: 0; }
  .flade-kunde.v2 .kunde__nr,
  .flade-kunde.v2 .kort__meta {
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  /* Kilden er en chip med aktørchippens mønster — ingen tonefarve, for en
     kilde er ikke en tilstand (graphic F062 finding 6). */
  .flade-kunde.v2 .kildechip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 10px;
    border: 1px solid var(--v2-kant);
    border-radius: 999px;
    background: var(--v2-bund);
    color: var(--tekst-krop);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .kildechip > .ikon { width: 12px; height: 12px; }
  /* Lange navne bryder inden for kortet og cellen (graphic F062 finding 1). */
  .flade-kunde.v2 .produktkort__navn,
  .flade-kunde.v2 .kunde__navne .kort__titel,
  .flade-kunde.v2 .kundecelle a,
  .flade-kunde.v2 .brodkrumme li {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  /* Overskrift og tal til venstre, handlingen til højre. */
  .flade-kunde.v2 .kort__hoved > .kort__meta { margin-right: auto; }

  /* Formularen i et kort: felterne to og to, handlingerne nederst. */
  .flade-kunde.v2 .formularkort > * + * { margin-top: 16px; }
  .flade-kunde.v2 .formularkort > .kort__titel + * { margin-top: 12px; }
  .flade-kunde.v2 .formularkort > .kort__titel:not(:first-child) { margin-top: 28px; }
  /* Den skjulte Enter-knap (UI-002) er formularens første barn; afsnittet
     efter den står lige under kortets padding, som overskriften på Kunde. */
  .flade-kunde.v2 .formularkort > .visuelt-skjult:first-child + * { margin-top: 0; }
  .flade-kunde.v2 .formularkort__felter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  .flade-kunde.v2 .formularkort__handlinger {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
  }

  /* .segment (graphic-design F057 beslutning 8): radioerne ligger visuelt
     skjult FØR deres label; rammen står 3:1 (WCAG 1.4.11). */
  .flade-kunde.v2 .felt--segment {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .flade-kunde.v2 .segment {
    position: relative;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 3px;
    min-height: 40px;
    padding: 3px;
    border: 1px solid var(--kant-felt);
    border-radius: 9px;
    background: var(--v2-bund);
  }
  .flade-kunde.v2 .segment__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .flade-kunde.v2 .segment__valg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--tekst-krop);
    font-size: var(--tekst-tabel);
    font-weight: var(--vaegt-normal);
    text-align: center;
    cursor: pointer;
  }
  .flade-kunde.v2 .segment__input:not(:checked) + .segment__valg:hover { background: var(--v2-accent-100); }
  .flade-kunde.v2 .segment__input:checked + .segment__valg {
    border-color: var(--v2-accent);
    background: var(--v2-kort);
    box-shadow: var(--v2-skygge-sm);
    color: var(--tekst-overskrift);
    font-weight: var(--vaegt-halvfed);
  }
  /* Ringen ligger inde i muligheden, så den ikke rører naboen eller rammen. */
  .flade-kunde.v2 .segment__input:focus-visible + .segment__valg {
    outline: 2px solid var(--tekst-overskrift);
    outline-offset: -2px;
  }
  /* Samme fejlbærere som de andre felter: kant, venstrekant 3 px og tint. */
  .flade-kunde.v2 .felt--fejl .segment {
    border-color: var(--tone-alvorlig);
    border-left-width: 3px;
    background: var(--tone-alvorlig-tint);
  }

  /* Produktkortene: 3 → 2 → 1. */
  .flade-kunde.v2 .produktgitter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }
  .flade-kunde.v2 .produktgitter > li { display: flex; }
  .flade-kunde.v2 .produktkort {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .flade-kunde.v2 .produktkort p { margin: 0; }
  .flade-kunde.v2 .produktkort__piller {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
  }
  .flade-kunde.v2 .produktkort__nr,
  .flade-kunde.v2 .produktkort__kilde,
  .flade-kunde.v2 .produktkort__etiket {
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .produktkort__kilde {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .flade-kunde.v2 .produktkort__kilde > .ikon { width: 14px; height: 14px; }
  /* En teknisk nøgle uden mellemrum bryder inden for kortet (graphic F066 finding 2). */
  .flade-kunde.v2 .kildechip > span,
  .flade-kunde.v2 .produktkort__kilde > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .flade-kunde.v2 .produktkort__navn {
    font-size: var(--tekst-mellem);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .produktkort__pris {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
  }
  .flade-kunde.v2 .produktkort__abonnementer { font-size: var(--tekst-tabel); }
  /* Inaktiv bærer sin pille (glyf + tekst); kanten er stiplet som K-3's
     «ikke målt» — formen, ikke farven, siger det. */
  .flade-kunde.v2 .produktkort--inaktiv { border-style: dashed; border-color: var(--kant-felt); }
  .flade-kunde.v2 .produktgitter + .tabel-sidefod { margin-top: 16px; }

  /* ------------------------------------------------------------------------
     FANER («Fejl der kræver dig», «Automatik») — links mellem ruter
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .faner {
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .faner a {
    min-height: var(--klikmaal);
    margin-bottom: -1px;
    padding: 0 16px;
    border-radius: 9px 9px 0 0;
    color: var(--tekst-krop);
    font-size: var(--tekst-brod);
  }
  .flade-kunde.v2 .faner a:hover { background: var(--v2-bund); }
  .flade-kunde.v2 .faner a[aria-current="true"],
  .flade-kunde.v2 .faner a[aria-current="page"] {
    border-bottom-color: var(--v2-accent);
    color: var(--v2-accent-800);
    font-weight: var(--vaegt-halvfed);
  }

  /* ------------------------------------------------------------------------
     LOG IND OG FEJLSIDE (VIS-013 bevares; ingen stribe i kundefladen)
     ------------------------------------------------------------------------ */
  .flade-kunde.v2 .kort--login {
    padding: 32px;
    border-radius: 16px;
    box-shadow: var(--v2-skygge-md);
  }
  .flade-kunde.v2 .login-maerke__logo {
    border-radius: 9px;
    background: var(--v2-accent);
  }
}

/* --------------------------------------------------------------------------
   UNDER 1024 PX — railen bliver en række piller under topbjælken.
   Rækkerettelsen (grid-row) fra kundeadmin.css gælder fortsat.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .flade-kunde.v2 .indhold { padding: 20px 20px 40px; }
  .flade-kunde.v2 .topbaand { grid-template-columns: auto minmax(0, 1fr) auto; }
  .flade-kunde.v2 .rail {
    padding: 8px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .rail > ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
  }
  .flade-kunde.v2 .rail__gruppe {
    flex: 0 1 auto;
    flex-direction: row;
    gap: 6px;
  }
  .flade-kunde.v2 .rail__gruppe + .rail__gruppe { margin-top: 0; }
  .flade-kunde.v2 .rail__gruppe > ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .flade-kunde.v2 .rail__gruppe > .etikette { padding: 0 2px 0 6px; }
  .flade-kunde.v2 .rail__punkt > a {
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
  }
  .flade-kunde.v2 .rail__punkt > a > .ikon { width: 16px; height: 16px; }
  .flade-kunde.v2 .rail__punkt > a[aria-current="page"] { border-color: var(--v2-accent); }
  .flade-kunde.v2 .rail__punkt > a[aria-current="page"]::before { content: none; }
  /* Foden står i brugermenuen. */
  .flade-kunde.v2 .rail__skille,
  .flade-kunde.v2 .rail__skille + li { display: none; }
  /* Overblik: det mørke kort i fuld bredde, de to andre ved siden af
     hinanden; spalterne stables. */
  .flade-kunde.v2 .overblik__kort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flade-kunde.v2 .overblik__kort > .kort--moerk { grid-column: 1 / -1; }
  .flade-kunde.v2 .overblik__spalter { grid-template-columns: minmax(0, 1fr); }
  /* Abonnement: hovedkortet og det mørke kort stables. */
  .flade-kunde.v2 .abonnement__top { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   UNDER 768 PX
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .flade-kunde.v2 .indhold { padding: 16px 16px 40px; }
  .flade-kunde.v2 .topbaand {
    min-height: 56px;
    gap: 8px;
    padding: 4px 12px 0 0;
  }
  .flade-kunde.v2 .topbaand__identitet {
    gap: 8px;
    padding-left: 12px;
  }
  /* Produktnavnet viger for tenantnavnet; brugerens navn for avataren. Begge
     står stadig i dokumentet. */
  .flade-kunde.v2 .topbaand__navne--med-tenant .topbaand__produkt,
  .flade-kunde.v2 .bruger__navn {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .flade-kunde.v2 .topbaand__navne--med-tenant .topbaand__tenant {
    max-width: 40vw;
    color: var(--tekst-krop);
    font-size: var(--tekst-tabel);
    font-weight: var(--vaegt-halvfed);
  }
  /* Panelet hænger under topbjælken (ikke under vinduets top), så et bånd
     over bjælken aldrig lægger panelet hen over knappen, der lukker det. */
  .flade-kunde.v2 .topbaand { position: relative; }
  .flade-kunde.v2 .opret,
  .flade-kunde.v2 .bruger { position: static; }
  .flade-kunde.v2 .menupanel {
    position: absolute;
    top: 100%;
    right: 12px;
    left: 12px;
    min-width: 0;
  }
  .flade-kunde.v2 .sideoverskrift h1 { font-size: var(--v2-tekst-titel-lille); }
  .flade-kunde.v2 .sideoverskrift__handlinger { flex: 1 1 100%; }
  .flade-kunde.v2 .chip { min-height: var(--klikmaal); }
  .flade-kunde.v2 .overblik__kort { grid-template-columns: minmax(0, 1fr); }
  .flade-kunde.v2 .overblik__raekke-handling { margin-left: 30px; justify-content: flex-start; }
  /* Livsforløbet bliver en lodret liste med kanten til venstre. */
  .flade-kunde.v2 .forloeb { grid-auto-flow: row; }
  .flade-kunde.v2 .forloeb__trin {
    padding: 0 0 0 12px;
    border-top: 0;
    border-left: 3px solid var(--v2-kant);
  }
  .flade-kunde.v2 .forloeb__trin--nu { border-left-color: var(--v2-accent); }
}

/* F062 Kunder og produkter — under 1024 og under 768 px. */
@media screen and (max-width: 1023px) {
  .flade-kunde.v2 .produktgitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .flade-kunde.v2 .produktgitter,
  .flade-kunde.v2 .formularkort__felter { grid-template-columns: minmax(0, 1fr); }
  .flade-kunde.v2 .segment { grid-auto-flow: row; }
  .flade-kunde.v2 .segment__valg { min-height: var(--klikmaal); }
  .flade-kunde.v2 .formularkort__handlinger { justify-content: stretch; }
  .flade-kunde.v2 .formularkort__handlinger > .knap { flex: 1 1 auto; }
}
/* Det valgte segment bærer en tyk kant — også i tvungne farver. */
@media (forced-colors: active) {
  .flade-kunde.v2 .segment__input:checked + .segment__valg { border: 2px solid Highlight; }
}

/* Den aktive markør er et pseudo-element og forsvinder i tvungne farver. */
@media (forced-colors: active) {
  .flade-kunde.v2 .rail__punkt > a[aria-current="page"] { border: 1px solid CanvasText; }
}

/* Det mørke kort på papir: hvid tekst på hvidt papir ville forsvinde. */
@media print {
  .flade-kunde.v2 .kort--moerk,
  .flade-kunde.v2 .kort--moerk * {
    background: var(--hvid);
    color: var(--graa-900);
  }
  .flade-kunde.v2 .kort--moerk { border: 1px solid var(--graa-900); }
}

/* ==========================================================================
   F061 Godkendelser — F057 fase d (køen, gruppen og punktet)
   To kolonner ≥ 1024 px: grupperne til venstre, det valgte til højre.
   Under 1024 px stables de. Valgt = tint + inset-kant + vægt 600 (VIS-002).
   ========================================================================== */
@media screen {
  .flade-kunde.v2 .godkendelser__regel {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -12px 0 24px;
    color: var(--tekst-daempet);
    font-size: var(--tekst-brod);
  }
  .flade-kunde.v2 .godkendelser__regel > .ikon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  .flade-kunde.v2 .godkendelser {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px;
    align-items: start;
  }
  .flade-kunde.v2 .godkendelser__valgt > * + * { margin-top: 16px; }
  .flade-kunde.v2 .godkendelser__grupper .kort__titel { margin: 0 0 8px; }

  .flade-kunde.v2 .koegrupper,
  .flade-kunde.v2 .koepunkter {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .flade-kunde.v2 .koegruppe { border-top: 1px solid var(--v2-kant); }
  .flade-kunde.v2 .koegruppe__link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: var(--klikmaal);
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--tekst-krop);
    text-decoration: none;
  }
  .flade-kunde.v2 .koegruppe__link:hover { background: var(--v2-accent-100); }
  .flade-kunde.v2 .koegruppe__link > .ikon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--tekst-daempet);
  }
  .flade-kunde.v2 .koegruppe__tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .flade-kunde.v2 .koegruppe__tal {
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  /* Lange navne (en e-mailadresse, et firmanavn i ét ord) brydes i kortet. */
  .flade-kunde.v2 .koegruppe__navn,
  .flade-kunde.v2 .koepunkt__navn,
  .flade-kunde.v2 .sideoverskrift__meta {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .flade-kunde.v2 .koegruppe__link[aria-current] {
    background: var(--v2-accent-100);
    box-shadow: inset 3px 0 0 var(--v2-accent);
    color: var(--v2-accent-800);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .koepunkter { margin: 4px 0 8px 28px; }
  .flade-kunde.v2 .koepunkt > a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 8px 12px;
    border-radius: 9px;
    color: var(--tekst-krop);
    font-size: var(--tekst-tabel);
    text-decoration: none;
  }
  .flade-kunde.v2 .koepunkt > a:hover { background: var(--v2-bund); }
  .flade-kunde.v2 .koepunkt > a[aria-current="page"] {
    background: var(--v2-accent-100);
    box-shadow: inset 3px 0 0 var(--v2-accent);
    color: var(--v2-accent-800);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .koepunkter__fod {
    margin: 0 0 8px 28px;
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
  }

  /* Det ene mørke kort: «Ligner sidste måned». Etiketten er en h2. */
  .flade-kunde.v2 .godkendelser__ligner .maalerkort__etiket { margin: 0; }
  .flade-kunde.v2 .godkendelser__ligner p { margin: 0; }
  .flade-kunde.v2 .godkendelser__ligner .knap-forklaring { color: var(--v2-accent-200); }
  /* Handlingen staar 12 px under teksten (6 px gab + 6 px), ikke klistret til den. */
  .flade-kunde.v2 .godkendelser__ligner p:has(> .knap),
  .flade-kunde.v2 .godkendelser__ligner .knap-forklaring { margin-top: 6px; }
  .flade-kunde.v2 .godkendelser__enhed { font-size: var(--tekst-brod); }

  .flade-kunde.v2 .godkendelser__blik > h2 { margin: 8px 0 12px; }
  .flade-kunde.v2 .blikkort + .blikkort { margin-top: 12px; }
  .flade-kunde.v2 .blikkort--spaerret { border-left: 4px solid var(--tone-opmaerksom); }
  .flade-kunde.v2 .blikkort__titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: var(--tekst-mellem);
  }
  .flade-kunde.v2 .blikkort__titel > .ikon { color: var(--tekst-daempet); }
  .flade-kunde.v2 .blikkort__tal,
  .flade-kunde.v2 .godkendelser__gruppetal {
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }

  .flade-kunde.v2 .godkendelsespunkt__saetning {
    margin: 0 0 12px;
    color: var(--tekst-overskrift);
    font-size: var(--tekst-mellem);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .tjekliste {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .flade-kunde.v2 .tjekliste__led {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
  }
  .flade-kunde.v2 .tjekliste__led > .ikon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  .flade-kunde.v2 .tjekliste__led--ja > .ikon { color: var(--tone-ok); }
  .flade-kunde.v2 .tjekliste__led--nej > .ikon { color: var(--tone-alvorlig); }
  .flade-kunde.v2 .godkendelsespunkt__tekniske { margin-top: 12px; }
  .flade-kunde.v2 .godkendelsespunkt__tekniske > summary {
    min-height: var(--klikmaal);
    color: var(--link);
    cursor: pointer;
  }
  /* Lange noegler og JSON-vaerdier holder sig i hver sin kolonne. */
  .flade-kunde.v2 .godkendelsespunkt__tekniske .forklaring__bevis {
    grid-template-columns: minmax(0, 14ch) minmax(0, 1fr);
  }
  .flade-kunde.v2 .godkendelsespunkt__tekniske .forklaring__bevis dt,
  .flade-kunde.v2 .godkendelsespunkt__tekniske .forklaring__bevis dd { overflow-wrap: anywhere; }
}

/* Det valgte staar foerst i DOM'en; fra 1024 px staar listen til venstre. */
@media screen and (min-width: 1024px) {
  .flade-kunde.v2 .godkendelser { grid-template-areas: "liste valgt"; }
  .flade-kunde.v2 .godkendelser__liste { grid-area: liste; }
  .flade-kunde.v2 .godkendelser__valgt { grid-area: valgt; }
}

@media screen and (max-width: 1023px) {
  .flade-kunde.v2 .godkendelser { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   F064 Fakturering og Automatik — F057 fase f
   Fakturering: K-16 med «Beregn» og «Gennemgå N», kørselslisten (K-1) og
   detaljens tre felter, hvor kun «Beløb i alt» er det mørke kort (#44).
   Automatik: reglen som sætning, indstillingen som K-2-pille og «Fast i
   produktet» med lås + tekst (VIS-002). Tallene står i den fælles tal-regel
   (.maalerkort__tal, .tal, .beloeb) — ingen lokal font-variant-numeric.
   ========================================================================== */
@media screen {
  .flade-kunde.v2 .fakturering__hjaelp {
    margin: -12px 0 24px;
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .fakturering__beregn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .flade-kunde.v2 .fakturering__periode {
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .fakturering__beregn > select { width: auto; }
  .flade-kunde.v2 .fakturering__beregn > .knap-forklaring {
    flex: 1 1 100%;
    margin: 0;
  }
  .flade-kunde.v2 .fakturering__tidligere > h2 {
    margin: 0 0 12px;
    font-size: var(--tekst-mellem);
  }
  /* Beløbet får den bredeste kolonne: «245.380,00 DKK» kan ikke bryde
     (.beloeb er nowrap), så det må ikke løbe ud af det mørke kort. */
  .flade-kunde.v2 .fakturering__felter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 16px;
    margin: 16px 0 24px;
    align-items: stretch;
  }
  .flade-kunde.v2 .fakturering__felter > .maalerkort {
    min-width: 0;
    min-height: 132px;
  }
  .flade-kunde.v2 .fakturering__forskel {
    margin: -8px 0 24px;
    color: var(--tekst-krop);
    font-size: var(--tekst-brod);
  }

  /* Lange opgavenavne og sætninger brydes i cellen i stedet for at skubbe
     tabellen ud i vandret rul. */
  .flade-kunde.v2 .automatik__opgave,
  .flade-kunde.v2 .automatik__regel {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .flade-kunde.v2 .automatik__opgave { font-weight: var(--vaegt-halvfed); }
  .flade-kunde.v2 .automatik__kilde {
    display: block;
    margin-top: 2px;
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  /* Pillen og «Fast i produktet» brydes sammen og flugter til venstre. */
  .flade-kunde.v2 .automatik__pille {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .flade-kunde.v2 .automatik__fast {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .automatik__fast > .ikon {
    flex: none;
    width: 14px;
    height: 14px;
  }
  .flade-kunde.v2 .automatik__ingen-ret {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
  }
  .flade-kunde.v2 .automatik__formular { margin-top: 24px; }
  /* Nødstopbåndet står 12 px under K-16 og 24 px over tabellen, så de to
     kanter ikke rører hinanden (graphic F070 finding 1). */
  .flade-kunde.v2 .indhold > .baand--alvorlig { margin: -12px 0 24px; }
  /* «—» i «Ikke målt» står i kortets grå som på Overblik (graphic F070 finding 2). */
  .flade-kunde.v2 .maalerkort--ikke-maalt .tom-vaerdi { color: inherit; }
}

/* Under 1024 px: «Gitre → 2» som på Overblik, og det mørke kort i fuld bredde. */
@media screen and (max-width: 1023px) {
  .flade-kunde.v2 .fakturering__felter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flade-kunde.v2 .fakturering__felter > .kort--moerk { grid-column: 1 / -1; }
}

@media screen and (max-width: 767px) {
  .flade-kunde.v2 .fakturering__felter { grid-template-columns: minmax(0, 1fr); }
  .flade-kunde.v2 .fakturering__beregn { flex: 1 1 100%; }
  .flade-kunde.v2 .fakturering__beregn > .knap { flex: 1 1 auto; }
}

/* ==========================================================================
   F073 K-6 · forklaringspanelet i kundens ord
   «Koder til support» ligger i foldningen «Sådan kom vi hertil» efter
   trinnene: etiket over koden som i beviset, og koder og UUID'er brydes
   inden for panelet. Under 768 px står etiketten over koden.
   ========================================================================== */
@media screen {
  .flade-kunde.v2 .forklaring__bevis dd { min-width: 0; overflow-wrap: anywhere; }
  .flade-kunde.v2 .forklaring__trin > .etikette { margin-top: var(--rum-3); }
  .flade-kunde.v2 .forklaring__koder {
    display: grid;
    grid-template-columns: 14ch minmax(0, 1fr);
    gap: var(--rum-1) var(--rum-3);
    margin: var(--rum-2) 0 0;
  }
  .flade-kunde.v2 .forklaring__koder dt {
    grid-column: 1;
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .forklaring__koder dd {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    font-size: var(--tekst-lille);
  }
  .flade-kunde.v2 .forklaring__trin .kode { overflow-wrap: anywhere; }
  /* «Kopiér forklaring» står sidst i foldningen efter koderne (H038). */
  .flade-kunde.v2 .forklaring__trin > .felt { margin-top: var(--rum-3); }
  /* Fristen er en sekundær linje under udfaldet: lille og normal vægt
     (`.forklaring__udfald p` slår ellers `.lille`, graphic F073 finding 2). */
  .flade-kunde.v2 .forklaring__udfald p.lille { font-size: var(--tekst-lille); font-weight: var(--vaegt-normal); margin-top: var(--rum-1); }
}

@media screen and (max-width: 767px) {
  .flade-kunde.v2 .forklaring__koder { grid-template-columns: minmax(0, 1fr); }
  .flade-kunde.v2 .forklaring__koder dt,
  .flade-kunde.v2 .forklaring__koder dd { grid-column: 1; }
  /* Beviset stables som koderne: etiketten over teksten, luft mellem
     grupperne (graphic F073 finding 1). */
  .flade-kunde.v2 .forklaring__bevis { grid-template-columns: minmax(0, 1fr); }
  .flade-kunde.v2 .forklaring__bevis dd + dt { margin-top: var(--rum-2); }
}

/* ==========================================================================
   F071 Nyt abonnement / Redigér kladde (S20) — F057 fase g
   Samme formular som S20 i v1 i et v2-kort (.formularkort, som Kunde og
   Produktside): tre afsnit, felterne to og to, fornyelsen som .segment med
   hjælpeteksten inde i hver mulighed (R16), og handlingerne nederst.
   Kun tokens; tallene står i den fælles tal-regel.
   ========================================================================== */
@media screen {
  .flade-kunde.v2 .nytabonnement > * + * { margin-top: 24px; }
  .flade-kunde.v2 .nytabonnement__afsnit > * + * { margin-top: 12px; }
  /* Hvorfor-teksten hører til overskriften: 4 over, 16 til indholdet. */
  .flade-kunde.v2 .nytabonnement__afsnit > .kort__titel + .nytabonnement__hjaelp { margin-top: 4px; }
  .flade-kunde.v2 .nytabonnement__afsnit > .nytabonnement__hjaelp + * { margin-top: 16px; }
  /* VIS-022: stregen mellem afsnittene med 24 over og 24 under. */
  .flade-kunde.v2 .nytabonnement__afsnit + .nytabonnement__afsnit {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .nytabonnement__afsnit > .kort__titel { margin: 0; }
  .flade-kunde.v2 .nytabonnement__hjaelp {
    max-width: 60ch;
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  /* «Søg» og «Hent listepris» står ud for kontrollen, ikke ud for feltets
     hjælp eller fejl: toppen af gruppen plus etiketrækken og gabet. */
  .flade-kunde.v2 .nytabonnement .knapgruppe { align-items: flex-start; }
  .flade-kunde.v2 .nytabonnement .knapgruppe > .knap {
    margin-top: calc(var(--tekst-brod) * var(--linje-brod) + var(--rum-1));
  }
  /* Brydes knappen ned under feltet, står den 8 px under feltet og ikke
     midt imellem to felter: hver gruppe er sin egen container, og under
     cirka 26rem fylder feltet linjen (graphic H037 finding 1, H038). */
  .flade-kunde.v2 .nytabonnement .knapgruppe { container-type: inline-size; }
  @container (max-width: 26rem) {
    .flade-kunde.v2 .nytabonnement .knapgruppe > .felt { flex-basis: 100%; }
    .flade-kunde.v2 .nytabonnement .knapgruppe > .knap { margin-top: 0; }
  }
  /* Produktvælgeren og «Hent listepris» står sammen i én celle og bryder. */
  .flade-kunde.v2 .nytabonnement__produkt {
    flex-wrap: wrap;
    min-width: 0;
  }
  .flade-kunde.v2 .nytabonnement__produkt > .felt {
    flex: 1 1 16rem;
    min-width: 0;
  }
  .flade-kunde.v2 .nytabonnement select { max-width: 100%; }
  /* Fornyelsen fylder hele bredden: tre muligheder med hver sin sætning. */
  .flade-kunde.v2 .nytabonnement__segment { grid-column: 1 / -1; }
  .flade-kunde.v2 .nytabonnement__segment .segment__valg {
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
  }
  .flade-kunde.v2 .segment__hjaelp {
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-normal);
  }
  /* Lange kunde- og produktnavne bryder inden for kortet (F071-AK4). */
  .flade-kunde.v2 .nytabonnement .kvittering--ok__navn,
  .flade-kunde.v2 .nytabonnement__fund,
  .flade-kunde.v2 .nytabonnement p.kvittering--ok > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .flade-kunde.v2 .nytabonnement__kundenr {
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
    white-space: nowrap;
  }
  .flade-kunde.v2 .nytabonnement__handlinger {
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .nytabonnement__handlinger > p {
    flex: 1 1 20ch;
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  .flade-kunde.v2 .nytabonnement__handlinger > p { flex-basis: 100%; }
}

/* ==========================================================================
   F075 Import (S14) og Klar til drift (S17) — F057 fase g
   Hver del af skærmen er et kort med h2.kort__titel; formularerne er
   .formularkort (UI-019) med handlingerne nederst. Motorens tekst og koder
   står i en teknisk foldning (UI-020). Lange navne, begrundelser og
   bilagstekster bryder inden for kortet og cellen.
   Kun tokens; tallene står i den fælles tal-regel.
   ========================================================================== */
@media screen {
  .flade-kunde.v2 .importside > * + *,
  .flade-kunde.v2 .klartildrift > * + * { margin-top: 24px; }
  .flade-kunde.v2 .importside .kort > * + *,
  .flade-kunde.v2 .klartildrift .kort > * + * { margin-top: 12px; }
  .flade-kunde.v2 .importside .kort > .kort__titel,
  .flade-kunde.v2 .klartildrift .kort > .kort__titel { margin: 0; }
  .flade-kunde.v2 .importside__hjaelp,
  .flade-kunde.v2 .klartildrift__hjaelp {
    max-width: 60ch;
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  .flade-kunde.v2 .importside .kort > .kort__titel + .importside__hjaelp,
  .flade-kunde.v2 .klartildrift .kort > .kort__titel + .klartildrift__hjaelp { margin-top: 4px; }
  /* Lange navne bryder inden for kortet og cellen (F075-AK4). .def__vaerdi
     bryder i forvejen. */
  .flade-kunde.v2 .importside__navn,
  .flade-kunde.v2 .klartildrift__navn,
  .flade-kunde.v2 .klartildrift__liste,
  .flade-kunde.v2 .importside .valg {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* «Indlæsning fra {kilde}»: kildens kode kan være lang og uden mellemrum. */
  .flade-kunde.v2 .sideoverskrift:has(+ .importside) h1 { overflow-wrap: anywhere; }
  .flade-kunde.v2 .importside__nr {
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
    white-space: nowrap;
  }
  .flade-kunde.v2 .importside__spaerringer > li { overflow-wrap: anywhere; }
  /* Spærringerne hører til båndet over dem og læses som punkter. */
  .flade-kunde.v2 .importside > .baand + .importside__spaerringer {
    margin-top: 8px;
    padding-left: 20px;
    list-style: disc;
  }
  /* «Fra bilaget» og «Sådan har systemet læst det»: et niveau under kortets titel. */
  .flade-kunde.v2 .importside .kort > .importside__underoverskrift {
    margin-top: 16px;
    font-size: var(--tekst-brod);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .importside .chipraekke + .filterlinje { margin-top: 16px; }
  /* Den tekniske foldning: til support, foldet sammen. */
  .flade-kunde.v2 .importside__tekniske > summary,
  .flade-kunde.v2 .klartildrift__tekniske > summary {
    min-height: var(--klikmaal);
    color: var(--link);
    cursor: pointer;
  }
  .flade-kunde.v2 .importside__tekniske dl {
    display: grid;
    grid-template-columns: minmax(0, 18ch) minmax(0, 1fr);
    gap: 4px 16px;
    margin: 8px 0 0;
  }
  .flade-kunde.v2 .importside__tekniske dd {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .flade-kunde.v2 .importside__tekniske dt { color: var(--tekst-daempet); }
  .flade-kunde.v2 .klartildrift__tekniske .kode { overflow-wrap: anywhere; }
  .flade-kunde.v2 .klartildrift__tekniske > p { margin: 4px 0 0; }
  /* Begrundelsen i perioderettelsen fylder kortets bredde under felterne. */
  .flade-kunde.v2 .importside__formular > .formularkort__felter + .felt { margin-top: 16px; }
  .flade-kunde.v2 .importside__formular .formularkort__handlinger,
  .flade-kunde.v2 .klartildrift__beslutning .dialog__handlinger { align-items: center; }
  /* VIS-022: stregen over handlingerne kun i de lange formularkort. */
  .flade-kunde.v2 .importside__formular--lang .formularkort__handlinger {
    padding-top: 20px;
    border-top: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .importside__formular .knap-forklaring,
  .flade-kunde.v2 .klartildrift__beslutning .knap-forklaring {
    flex: 1 1 100%;
    margin: 0;
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
    text-align: right;
  }
}

@media screen and (max-width: 767px) {
  .flade-kunde.v2 .importside__tekniske dl { grid-template-columns: minmax(0, 1fr); }
  .flade-kunde.v2 .importside__formular .knap-forklaring,
  .flade-kunde.v2 .klartildrift__beslutning .knap-forklaring { text-align: left; }
}


/* ==========================================================================
   F074 Regnskabssystem og Driftssystemer — F057 fase g
   Samme formularer som i v1 i v2-kort (.formularkort, UI-019): afsnit med
   hvorfor-tekst, en streg mellem afsnittene (VIS-022) og handlingerne
   nederst. Systemets egne ord står i en teknisk foldning (UI-020). Lange
   navne (regnskab, modul, adresse) bryder inden for kortet.
   Kun tokens; tallene står i den fælles tal-regel.
   ========================================================================== */
@media screen {
  .flade-kunde.v2 .regnskabsside > * + *,
  .flade-kunde.v2 .driftsside > * + * { margin-top: 24px; }
  .flade-kunde.v2 .regnskabsside .kort__titel,
  .flade-kunde.v2 .driftsside .kort__titel { margin: 0; }
  .flade-kunde.v2 .regnskabsside__hjaelp,
  .flade-kunde.v2 .driftsside__hjaelp {
    max-width: 60ch;
    margin: 4px 0 0;
    color: var(--tekst-daempet);
    font-size: var(--tekst-tabel);
  }
  /* Afsnittene i et formularkort: overskrift, hvorfor, felterne. */
  .flade-kunde.v2 .regnskabsside__afsnit > * + *,
  .flade-kunde.v2 .driftsside__afsnit > * + * { margin-top: 12px; }
  .flade-kunde.v2 .regnskabsside__afsnit > .regnskabsside__hjaelp,
  .flade-kunde.v2 .driftsside__afsnit > .driftsside__hjaelp { margin-top: 4px; }
  /* Et niveau under kortets h2 (17/600): 15/600. */
  .flade-kunde.v2 .regnskabsside__afsnitstitel,
  .flade-kunde.v2 .driftsside__afsnitstitel {
    margin: 0;
    font-size: var(--tekst-brod);
    font-weight: var(--vaegt-halvfed);
    color: var(--tekst-overskrift);
  }
  /* VIS-022: stregen mellem afsnittene med 24 over og 24 under. */
  .flade-kunde.v2 .regnskabsside__afsnit + .regnskabsside__afsnit,
  .flade-kunde.v2 .driftsside__afsnit + .driftsside__afsnit {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--v2-kant);
  }
  /* Handlingerne nederst: forklaringen til venstre, knappen til højre. */
  .flade-kunde.v2 .regnskabsside__handlinger,
  .flade-kunde.v2 .driftsside__handlinger { align-items: center; }
  /* VIS-022: stregen over handlingerne vælges til. Lange formularkort er netop
     dem, hvor handlingsrækken står lige efter et afsnit; korte kort har kun
     overskriften. */
  .flade-kunde.v2 .regnskabsside__afsnit + .regnskabsside__handlinger,
  .flade-kunde.v2 .driftsside__afsnit + .driftsside__handlinger {
    padding-top: 20px;
    border-top: 1px solid var(--v2-kant);
  }
  .flade-kunde.v2 .regnskabsside__handlinger > p,
  .flade-kunde.v2 .driftsside__handlinger > p {
    flex: 1 1 20ch;
    margin: 0;
  }
  /* CSRF og det skjulte navn står før titlen (samme feltorden som v1):
     titlen står alligevel lige under kortets padding. */
  .flade-kunde.v2 .formularkort > input[type="hidden"] + .kort__titel { margin-top: 0; }
  /* Hvorfor-teksten hører til overskriften: 4 px under den. */
  .flade-kunde.v2 .formularkort > .kort__titel + .regnskabsside__hjaelp,
  .flade-kunde.v2 .formularkort > .kort__titel + .driftsside__hjaelp { margin-top: 4px; }
  .flade-kunde.v2 .driftsside__hjaelp + .tabel-ramme,
  .flade-kunde.v2 .driftsside__hjaelp + .tilstand { margin-top: 16px; }
  /* Forbind-kortet er en handling, ikke en tabel. */
  .flade-kunde.v2 .regnskabsside .kort--forbind { max-width: 640px; }
  /* Den tekniske foldning: etiket over systemets tekst, der bryder. */
  .flade-kunde.v2 .regnskabsside__teknisk > * + *,
  .flade-kunde.v2 .driftsside__teknisk > * + * { margin-top: 12px; }
  .flade-kunde.v2 .regnskabsside__koder {
    display: grid;
    grid-template-columns: 14ch minmax(0, 1fr);
    gap: 4px 12px;
  }
  .flade-kunde.v2 .regnskabsside__koder dt {
    color: var(--tekst-daempet);
    font-size: var(--tekst-lille);
    font-weight: var(--vaegt-halvfed);
  }
  .flade-kunde.v2 .regnskabsside__koder dd {
    min-width: 0;
    margin: 0;
    font-size: var(--tekst-lille);
  }
  .flade-kunde.v2 .regnskabsside__ikke-hentet { margin: 12px 0 0; padding-left: 20px; }
  /* Lange navne bryder inden for kortet og cellen (F074-AK4). */
  .flade-kunde.v2 .regnskabsside .def__vaerdi,
  .flade-kunde.v2 .regnskabsside .sideoverskrift__meta,
  .flade-kunde.v2 .regnskabsside .kort__titel,
  .flade-kunde.v2 .regnskabsside__koder dd,
  .flade-kunde.v2 .regnskabsside__ikke-hentet li,
  .flade-kunde.v2 .driftsside h1,
  .flade-kunde.v2 .driftsside__navn,
  .flade-kunde.v2 .driftsside .proevefejl dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .flade-kunde.v2 .driftsside select { max-width: 100%; }
}

@media screen and (max-width: 767px) {
  .flade-kunde.v2 .regnskabsside__handlinger > p,
  .flade-kunde.v2 .driftsside__handlinger > p { flex-basis: 100%; }
  .flade-kunde.v2 .regnskabsside__koder { grid-template-columns: minmax(0, 1fr); }
  /* Et retningspar er længere end en telefon er bred: det må bryde. */
  .flade-kunde.v2 .regnskabsside .retningspar { white-space: normal; }
}