:root { --green:#307351; --light:#D6F8D6; --line:#d8e7dc; --text:#242325; --muted:#61756b; --danger:#b42318; }

* { box-sizing:border-box; }

body {
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    background:#fff;
    position:relative;
}

.top { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:var(--green); color:#fff; flex-wrap:wrap; gap:12px; }

.brand { font-weight:700; font-size:22px; color:#fff; text-decoration:none; }

nav { display:flex; gap:12px; flex-wrap:wrap; }

nav a { color:#fff; text-decoration:none; font-weight:600; }

.wrap { max-width:1100px; margin:0 auto; padding:24px; }

.foot { text-align:center; color:var(--muted); padding:32px; border-top:1px solid var(--line); margin-top:40px; }

.card { background:var(--light); border:1px solid var(--line); border-radius:14px; padding:18px; margin:16px 0; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }

.btn, button { display:inline-block; padding:10px 14px; border-radius:10px; border:0; background:var(--green); color:white; text-decoration:none; cursor:pointer; font-weight:700; }

.btn.secondary { background:#63766b; }

.btn.danger { background:var(--danger); }

input, select { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; margin:6px 0 12px; }

label { font-weight:700; }

table { width:100%; border-collapse:collapse; margin-top:16px; background:white; }

th, td { border-bottom:1px solid var(--line); padding:10px; text-align:left; vertical-align:top; }

th { background:var(--light); }

.status { font-weight:700; }

.muted { color:var(--muted); }

.error { color:var(--danger); font-weight:700; }

.success { color:var(--green); font-weight:700; }

/* Storke */

.floating-img{
    position:absolute;
    width:160px;
    pointer-events:none;
    z-index:5;
}

.float1{
    top:120px;
    right:20px;
    transform:rotate(12deg);
}

.float2{
    top:550px;
    left:-40px;
    transform:rotate(-15deg);
}

.float3{
    top:1000px;
    right:40px;
    transform:rotate(8deg);
}

.float4{
    top:1500px;
    left:60%;
    transform:rotate(-10deg);
}

.brand img {
    width: min(320px, 80vw);
    height: auto;
}

@media (max-width: 768px) {

    .top {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 16px;
    }

    .brand {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
    }

    .brand img {
        height: 90px; /* Prøv evt. 100px eller 110px */
        width: auto;
    }

    nav {
        justify-content: center;
    }

}