:root {
    --primær: #195E95;
    --primær-grad: linear-gradient(90deg, #195E95 0%, #36b3f5 100%);
    --accent: #ff5c93;
    --grå: #f5f7fa;
    --lys-blå: #e9f1fa;
    --hvid: #fff;
    --skygge: 0 4px 24px rgba(25,94,149,0.13), 0 1px 6px rgba(0,0,0,0.06);
    --skygge-lys: 0 1.5px 7px rgba(25,94,149,0.07);
    --radius: 14px;
    --transition: 0.18s cubic-bezier(.47,1.64,.41,.8);
    --tekst: #162a45;
    --tekst-lys: #5984b3;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    margin: 0;
    background: #f6fafd;
    color: var(--tekst);
    min-height: 100vh;
    letter-spacing: 0.01em;
    transition: background 0.4s;
    animation: bgfade 1.1s;
}
@keyframes bgfade {
    from { background: #e3eaf2; }
    to   { background: #f6fafd; }
}
.header {
    background: var(--primær-grad);
    color: var(--hvid);
    padding: 1.5em 1em 1em 1em;
    border-radius: 0 0 20px 20px;
    text-align: center;
    box-shadow: 0 2px 18px rgba(25,94,149,0.13);
    margin-bottom: 2.8rem;
    position: relative;
    z-index: 1;
    animation: headerfade 1s;
}
@keyframes headerfade {
    from { opacity:0; transform: translateY(-18px);}
    to   { opacity:1; transform: none;}
}
.header h1 {
    font-size: 2.15rem;
    margin-bottom:0.5em;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-shadow: 0 2px 18px rgba(0,0,0,0.05);
}
.header p {
    font-size: 1.11rem;
    margin: 0;
    color: #e6ecf7;
    opacity: 0.95;
}
.grid4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
    margin: 2.2em auto;
    max-width: 1500px;
}
@media (max-width:1100px) {
    .grid4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width:700px) {
    .grid4 { grid-template-columns: 1fr; }
}
.col-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 22px #195e9520;
    padding: 30px 28px 22px 28px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.19s, transform 0.17s;
    position: relative;
    overflow: visible;
}
.col-box:hover {
    box-shadow: 0 10px 36px #195e9530, 0 2px 8px #195e9511;
    transform: translateY(-3px) scale(1.015);
}
.col-box h2 {
    color: #195E95;
    font-size: 1.23em;
    margin-top:0; 
    margin-bottom: 1em;
}
.col-box ul { list-style: none; margin:0; padding:0;}
.col-box li {margin-bottom: 13px;}
.col-box .meta {font-size:0.92em; color:#6b90ad;}
.col-box .emne {font-weight:500;}
.kommersnart {color:#bbb; font-style:italic; text-align:center; margin-top:50px;}
.besked-item {
    cursor: pointer;
    border-radius:7px;
    padding:8px 8px 7px 12px;
    transition:background 0.13s;
}
.besked-item:hover { background: #e6f1fa; }
.besked-titel { font-weight:600; color:#195E95;}
.besked-tid { font-size:0.91em; color:#7a7a7a; }
/* Modal styling */
.modal {
    display: none;
    position: fixed; 
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.28);
    z-index: 9999;
}
.modal-box {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 40px #195e9550;
    max-width: 410px;
    margin: 8vh auto;
    position: relative;
    padding: 36px 28px 26px 28px;
    z-index: 10000;
    animation: fadein .5s;
}
.modal-close {
    position: absolute; 
    top: 10px; right: 14px;
    font-size: 23px;
    cursor: pointer;
    color: #195E95;
    background: none;
    border: none;
}
.modal-hoved {
    font-size: 1.1em;
    color: #195E95;
    font-weight:600;
    margin-bottom:8px;
}
.modal-afsender { color:#444; margin-bottom:9px; }
.modal-tid { font-size:0.92em; color:#7a7a7a; }
.modal-besked { margin:18px 0 18px 0; white-space:pre-line;}
.modal-svar-form textarea {
    width:99%;
    border-radius:6px;
    min-height:54px;
    resize:vertical;
}
.modal-svar-form button {
    background:#195E95;
    color:#fff;
    border:none;
    padding:7px 16px;
    margin-top:8px;
    border-radius:7px;
    font-weight:500;
    cursor:pointer;
    transition: background 0.17s;
}
.modal-svar-form button:hover { background:#113e62; }
.modal-svar-besked {margin-top:9px;}
/* Aktivitets-modal */
#aktModal {
    display:none;
    position:fixed;
    left:0; top:0;
    width:100vw; height:100vh;
    background:rgba(10,30,55,0.25);
    z-index:1001;
    align-items:center;
    justify-content:center;
}
#aktModalBox {
    background:#fff;
    max-width:430px;
    width:95vw;
    border-radius:18px;
    box-shadow:0 6px 32px rgba(0,0,0,0.19);
    padding:32px 28px 18px 28px;
    position:relative;
    animation: fadein .5s;
}
#aktModalBox button {
    position:absolute;top:14px;right:14px;
    border:none;background:#195E95;color:#fff;
    font-size:17px;padding:6px 16px;border-radius:8px;
    cursor:pointer;
    transition: background 0.19s;
}
#aktModalBox button:hover { background:#113e62;}
::-webkit-scrollbar { width: 11px; background: #e9f1fa; }
::-webkit-scrollbar-thumb {
    background: #c8d7e9;
    border-radius: 11px;
    box-shadow: 0 1px 7px #b2c7de33;
}
/* Responsivitet */
@media (max-width: 800px) {
    .container { padding: 20px 6px 32px 6px;}
    .modal-box, #aktModalBox { max-width: 95vw; padding:24px 7px 24px 14px; }
    .menu { grid-template-columns: 1fr; gap: 18px;}
}
@media (max-width: 600px) {
    .container { margin: 0; border-radius: 0; }
    .menu { grid-template-columns: 1fr;}
}