/* pc.css — forsiden og opstarten på en stor skærm (30-10-2026, ejeren: "tjek registreringen igennem på pc'en").
   Begge var telefon-sider strakt ud: "Opret bruger" lå under folden, og opstarten var en smal søjle med knappen
   helt nede i bunden. Skærmen deles nu: det man læser til venstre, det man udfylder på en hvid flade til højre.
   Telefonen er uændret; alt der flytter noget står bag en min-width. */

.forside-form { margin-top: 26px; }
.forside-form .fejltekst { margin-bottom: 8px; }

/* Fluebenet var isblåt på hvidt og kunne næsten ikke ses. */
.samtykke i { box-shadow: inset 0 0 0 2px var(--dis-2); }
.samtykke input:checked + i { box-shadow: none; }

/* De tre beholdere findes kun for pc'ens skyld; på telefonen står indholdet i .opstart som før. */
.opstart-side, .opstart-spoerg, .opstart-krop { display: contents; }
.opstart-side .ordmaerke, .opstart-side .buddy-fig { display: none; }

@media (hover: hover) {
    .forside .tekstknap:hover { text-decoration: underline; text-underline-offset: 3px; }
    .opstart .chip:not(.valgt):hover, .opstart .valg button:not(.valgt):hover { background: var(--dis); }
}

/* ---------------------------------------------------- forsiden */
@media (min-width: 880px) {
    .forside-top, .forside-krop { max-width: 1180px; }
    /* Formularen op i højre side, så den står over folden. display: contents gør overskrift, tekst og
       formular til rækker i samme gitter som tråden, uden at telefonens rækkefølge ændres. */
    .forside-krop { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: clamp(48px, 6vw, 80px); row-gap: 0; padding-top: 44px; }
    .forside-krop > div:first-child { display: contents; }
    .forside h1 { grid-column: 1; font-size: clamp(44px, 4.7vw, 64px); }
    .forside .under { grid-column: 1; }
    .forside-krop .traad { grid-column: 1; grid-row: 3; margin-top: 30px; max-width: 540px; }
    .forside-form { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding: 26px 28px 28px; border-radius: var(--r-l); }
    .forside-form h2 { font-size: 26px; }
    .forside-krop .punkter { margin-top: 60px; }
    .forside-krop .forside-fod { margin-top: 36px; }
    .forside-tilbud { padding-top: max(40px, 14dvh); }
}

/* ---------------------------------------------------- opstarten */
@media (min-width: 1040px) {
    /* Fladen har fast højde, så "Videre" bliver stående under musen fra trin til trin. Den står midt i skærmen,
       og på en lav skærm krymper den, så knappen stadig kan ses uden at rulle. */
    .opstart {
        --hoejde: min(680px, calc(100dvh - 48px));
        max-width: 1160px; min-height: 100dvh; padding: max(24px, calc((100dvh - var(--hoejde)) / 2)) 40px;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: clamp(48px, 6vw, 80px); align-items: start;
    }
    .opstart-side { display: flex; flex-direction: column; min-height: var(--hoejde); }
    .opstart-side .ordmaerke { display: block; font-size: 26px; }
    .opstart-spoerg { display: block; margin-top: 64px; }
    .opstart-side .buddy-fig { display: block; margin-bottom: 18px; }
    .opstart h1 { font-size: clamp(38px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.022em; line-height: 1.04; margin-bottom: 12px; text-wrap: balance; }
    .opstart-spoerg .daempet { font-size: 18px; max-width: 26em; text-wrap: pretty; }
    .opstart .bane { order: 1; margin: auto 0 22px; max-width: 340px; width: 100%; }

    .opstart-krop { display: flex; flex-direction: column; min-height: var(--hoejde); padding: 18px 36px 32px; background: var(--hvid); border-radius: var(--r-l); box-shadow: var(--skygge); }

    /* Telefonens hvide kort ville forsvinde på den hvide flade, så tonerne vender. */
    .opstart .valg button { background: var(--himmel); box-shadow: none; }
    .opstart .valg button.valgt { background: var(--hvid); box-shadow: 0 0 0 3px var(--blaa); }
    .opstart .chip { background: var(--himmel); box-shadow: none; }
    .opstart .chip.valgt { background: var(--blaa); }
    .opstart .felt input, .opstart .felt select { background: var(--himmel); box-shadow: none; }
    .opstart .felt input:focus, .opstart .felt select:focus { background: var(--hvid); }
    .opstart .samtykke i { background: var(--himmel); box-shadow: inset 0 0 0 2px var(--dis-2); }
    .opstart .samtykke input:checked + i { box-shadow: none; }

    /* Figuren står allerede til venstre, så teksten er ikke en boble nummer to på siden. */
    .opstart-krop .buddy-hilsen { display: block; }
    .opstart-krop .buddy-fig { display: none; }
    .opstart-krop .boble { background: var(--himmel); color: var(--marine); border-radius: var(--r-m); font-size: 20px; }
}