@font-face {
    font-family: 'Chewy';
    src: url('../fonts/Chewy-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Patrick Hand';
    src: url('../fonts/PatrickHand-Regular.ttf') format('truetype');
    font-display: swap;
}

:root {
    --lime: #CBDC41;
    --husroed: #B84347;
    --sort: #231F20;
    --hvid: #FFFFFF;

    --skrift-overskrift: 'Chewy', 'Arial Rounded MT Bold', system-ui, sans-serif;
    --skrift-haandskrift: 'Patrick Hand', 'Segoe Print', cursive;
    --skrift-brod: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --luft: 1rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hvid);
    color: var(--sort);
    font-family: var(--skrift-brod);
    font-size: 1.0625rem;
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--skrift-overskrift);
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1.1;
}

a { color: var(--husroed); }

/* Større trykflade på telefon uden at flytte teksten: lodret padding på inline-links ændrer ikke linjehøjden. */
.hus-indhold a:not(.knap) { padding-block: .5em; }

/* Knapper uden klassen knap (fx "Log ud", "Meld fra") får også en trykflade på mindst 44 px. */
button:not(.knap) {
    font: inherit;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    border: 2px solid var(--sort);
    background: var(--hvid);
    color: var(--sort);
    cursor: pointer;
}

.haandskrift {
    font-family: var(--skrift-haandskrift);
    font-size: 1.4rem;
}

.hus-top {
    background: var(--lime);
    color: var(--sort);
    padding: var(--luft);
}

.hus-navn {
    font-family: var(--skrift-overskrift);
    font-size: 1.6rem;
    text-transform: uppercase;
    color: var(--sort);
    text-decoration: none;
}

.hus-indhold {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--luft);
}

/* Formularer */
.felt { margin: 0 0 var(--luft); }
.felt label, .felt legend { display: block; font-weight: bold; margin-bottom: .25rem; }
.felt input[type=text], .felt input[type=email], .felt input[type=tel] {
    width: 100%;
    font: inherit;
    padding: .6rem;
    border: 2px solid var(--sort);
    background: var(--hvid);
    color: var(--sort);
}
.felt .fejl { color: var(--husroed); margin: .25rem 0 0; }
.valg { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; min-height: 2.75rem; cursor: pointer; }
.valg input { width: 1.4rem; height: 1.4rem; }
fieldset.felt { border: 2px solid var(--sort); padding: var(--luft); }
.knap {
    display: inline-block;
    font: inherit;
    font-weight: bold;
    background: var(--lime);
    color: var(--sort);
    border: 2px solid var(--sort);
    padding: .7rem 1.4rem;
    cursor: pointer;
    text-decoration: none;
}
/* Skjult for mennesker, synligt for robotter */
.lokkefelt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Vagter */
.felt input[type=datetime-local], .felt input[type=number], .felt select, .felt textarea {
    width: 100%;
    font: inherit;
    padding: .6rem;
    border: 2px solid var(--sort);
    background: var(--hvid);
    color: var(--sort);
}
.hjaelp-hvornaar { font-weight: bold; }
.opgaver { list-style: none; padding: 0; margin: 0; }
.opgave {
    border: 2px solid var(--sort);
    padding: var(--luft);
    margin: 0 0 var(--luft);
}
.opgave p { margin: 0 0 .5rem; }
.opgave summary { font-weight: bold; cursor: pointer; }
.opgave-navn { font-size: 1.2rem; font-weight: bold; }
.opgave-ledig { border-left: .6rem solid var(--lime); }
.opgave-daekket { opacity: .75; }
.opgave .knap { display: block; width: 100%; text-align: center; }
.aflyst {
    display: inline-block;
    font-family: var(--skrift-overskrift);
    font-size: 1.6rem;
    text-transform: uppercase;
    background: var(--husroed);
    color: var(--hvid);
    padding: .2rem .8rem;
}
.fejl { color: var(--husroed); }
.lille { font-size: .9rem; }
.link { overflow-wrap: anywhere; }