:root {
    --baggrund: #f5f6f8;
    --kort: #ffffff;
    --tekst: #1c2430;
    --dæmpet: #5d6b7a;
    --kant: #dde2e8;
    --primær: #1f5fa8;
    --primær-mørk: #17497f;
    --fare: #a83232;
    --fejl-bg: #fdecec;
    --fejl-kant: #f0b8b8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--baggrund);
    color: var(--tekst);
    line-height: 1.55;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem;
    background: var(--kort);
    border-bottom: 1px solid var(--kant);
}

.logo {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--primær);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.topbar-form { margin: 0; }

.indhold {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.kort {
    background: var(--kort);
    border: 1px solid var(--kant);
    border-radius: 10px;
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.kort.dæmpet { background: #fafbfc; }

.formularkort { max-width: 440px; margin-inline: auto; }

h1 { font-size: 1.6rem; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }

.manchet { color: var(--dæmpet); margin: 0 0 1.25rem; }

.hjaelpetekst {
    color: var(--dæmpet);
    font-size: 0.875rem;
    margin: 0.35rem 0 0;
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 1rem 0 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--kant);
    border-radius: 7px;
    font-size: 1rem;
    background: #fff;
    color: var(--tekst);
}

input:focus {
    outline: 2px solid var(--primær);
    outline-offset: 1px;
    border-color: var(--primær);
}

.knap {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.knap.primær { background: var(--primær); color: #fff; }
.knap.primær:hover { background: var(--primær-mørk); }

.knap.sekundær {
    background: #fff;
    color: var(--tekst);
    border-color: var(--kant);
}
.knap.sekundær:hover { background: #f0f2f5; }

.knap.fare { background: #fff; color: var(--fare); border-color: var(--fare); }
.knap.fare:hover { background: var(--fejl-bg); }

.knap.bred { width: 100%; margin-top: 1.5rem; }
.knap.lille { padding: 0.35rem 0.75rem; font-size: 0.85rem; }

.knaprække { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.besked {
    padding: 0.75rem 1rem;
    border-radius: 7px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.besked.fejl {
    background: var(--fejl-bg);
    border: 1px solid var(--fejl-kant);
    color: #7d2020;
}

.besked ul { margin: 0; padding-left: 1.1rem; }

.sessionsliste { list-style: none; margin: 1rem 0 0; padding: 0; }

.sessionsrække {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--kant);
}

.sessionsrække .hjaelpetekst { display: block; }

.afstand-over { margin-top: 1.25rem; }

.bund {
    text-align: center;
    color: var(--dæmpet);
    font-size: 0.85rem;
    padding: 1.5rem;
}

@media (max-width: 480px) {
    .kort { padding: 1.25rem; }
    .sessionsrække { flex-direction: column; align-items: flex-start; }
}

/* ---------- Ansøgninger ---------- */

.indhold.bredere { max-width: 760px; }

.sidehoved {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sidehoved h1 { margin-bottom: 0.15rem; }
.sidehoved .manchet { margin-bottom: 0; }

.topnav { display: flex; align-items: center; gap: 1rem; }
.topnav a { color: var(--tekst); text-decoration: none; font-size: .9rem; font-weight: 600; }
.topnav a:hover { color: var(--primær); }

.statuslinje {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.statuschip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--kant);
    border-radius: 999px;
    background: #fff;
    color: var(--tekst);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}

.statuschip:hover { border-color: var(--primær); }
.statuschip.valgt { background: var(--primær); border-color: var(--primær); color: #fff; }
.statuschip .tal { opacity: .7; font-weight: 400; }

.soegeformular { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.soegeformular input[type="search"] {
    flex: 1;
    padding: .55rem .7rem;
    border: 1px solid var(--kant);
    border-radius: 7px;
    font-size: .95rem;
    background: #fff;
    color: var(--tekst);
}

.ansoegningsliste { list-style: none; margin: 0; padding: 0; }

.ansoegningsrække {
    background: var(--kort);
    border: 1px solid var(--kant);
    border-radius: 9px;
    margin-bottom: .6rem;
}

.ansoegningsrække:hover { border-color: var(--primær); }

.ansoegningslink {
    display: block;
    padding: .9rem 1.1rem;
    text-decoration: none;
    color: inherit;
}

.ansoegning-hoved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .2rem;
}

.ansoegning-detaljer { color: var(--dæmpet); font-size: .875rem; }

.mærkat {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.mærkat.stor { font-size: .85rem; padding: .3rem .8rem; }

.status-kladde  { background:#eef0f3; color:#4a5563; border-color:#dbe0e6; }
.status-soegt   { background:#e8f0fa; color:#1f5fa8; border-color:#c6dcf3; }
.status-samtale { background:#fdf2dc; color:#8a5d0a; border-color:#f2ddaa; }
.status-tilbud  { background:#e4f5e9; color:#1f7a3d; border-color:#bce3c9; }
.status-afslag  { background:#fdecec; color:#a83232; border-color:#f0c4c4; }
.status-trukket { background:#f2eef7; color:#5f4a86; border-color:#ded3ec; }

.statuschip.status-kladde.valgt,
.statuschip.status-soegt.valgt,
.statuschip.status-samtale.valgt,
.statuschip.status-tilbud.valgt,
.statuschip.status-afslag.valgt,
.statuschip.status-trukket.valgt {
    background: var(--primær);
    border-color: var(--primær);
    color: #fff;
}

.detaljeliste {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: .4rem 1rem;
    margin: 1.25rem 0 0;
    font-size: .92rem;
}

.detaljeliste dt { color: var(--dæmpet); font-weight: 600; }
.detaljeliste dd { margin: 0; overflow-wrap: anywhere; }
.detaljeliste a { color: var(--primær); }

.noter { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--kant); }
.noter p { white-space: pre-wrap; margin: 0; }

.kort.tom { text-align: center; padding: 2.5rem 1.75rem; }
.kort.tom .knap { margin-top: 1rem; }

.formularkort.bred { max-width: 100%; }

.feltpar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

select, textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--kant);
    border-radius: 7px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--tekst);
}

select:focus, textarea:focus, input[type="search"]:focus, input[type="date"]:focus {
    outline: 2px solid var(--primær);
    outline-offset: 1px;
    border-color: var(--primær);
}

input[type="date"], input[type="url"] {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--kant);
    border-radius: 7px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--tekst);
}

textarea { resize: vertical; min-height: 6rem; }

.valgfri { font-weight: 400; color: var(--dæmpet); font-size: .85em; }

.genvejskort { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

@media (max-width: 560px) {
    .feltpar { grid-template-columns: 1fr; }
    .sidehoved { flex-direction: column; }
    .soegeformular { flex-wrap: wrap; }
}

/* ---------- Konto ---------- */

.besked.ok {
    background: #e4f5e9;
    border: 1px solid #bce3c9;
    color: #1f7a3d;
}

.kort.farezone { border-color: #e8c4c4; }
.kort.farezone h2 { color: var(--fare); }

/* ---------- Dokumentsider ---------- */

.dokument { max-width: 100%; }
.dokument h2 { margin: 2rem 0 .6rem; font-size: 1.15rem; }
.dokument h3 { margin: 1.4rem 0 .4rem; font-size: 1rem; }
.dokument h2:first-of-type { margin-top: 1.5rem; }
.dokument p { margin: 0 0 .9rem; }
.dokument ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.dokument li { margin-bottom: .4rem; }
.dokument a { color: var(--primær); }

.dokument address {
    font-style: normal;
    background: #fafbfc;
    border: 1px solid var(--kant);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin: 0 0 1rem;
    line-height: 1.7;
}

.fremhaevet {
    background: #fdf6e6;
    border-left: 3px solid #d9a520;
    padding: .85rem 1rem;
    border-radius: 0 6px 6px 0;
}

.bund a { color: var(--dæmpet); }
.bund a:hover { color: var(--primær); }