/* ============================================================
   You're Not Alone — tema (rolig blå-grøn). Alt defineret ét sted.
   Mobil-først, vanilla CSS, ingen framework.
   ============================================================ */
:root {
    --teal:#2f6f6b;        /* primær */
    --teal-dark:#235451;
    --teal-700:#1f4845;
    --sage:#7fa99b;        /* sekundær */
    --sage-soft:#dfe9e4;
    --paper:#ffffff;
    --paper-2:#f6f4ef;     /* varm off-white baggrund */
    --paper-3:#eef1ee;
    --ink:#2b2b2e;
    --ink-soft:#55585c;
    --muted:#63676b;   /* mørk nok til 4,5:1 kontrast på både hvid og --paper-2 (WCAG AA) */
    --line:#e6e3dd;
    --line-2:#d7dbd6;
    --accent:#e0a458;      /* varm fremhævning (sparsomt) */
    --danger:#b5524a;
    --ok:#3f8a6e;

    --radius:16px;
    --radius-sm:10px;
    --radius-pill:999px;
    --shadow-sm:0 1px 2px rgba(31,72,69,.06), 0 2px 8px rgba(31,72,69,.05);
    --shadow:0 8px 30px rgba(31,72,69,.10);
    --shadow-lg:0 18px 50px rgba(31,72,69,.16);
    --maxw:2560px;   /* fylder store skærme; centreres kun på ultra-wide > 2560px */
    --header-h:80px;
    --sidebar-w:280px;

    --font-display:'Fraunces',Georgia,'Times New Roman',serif;
    --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

    /* Typografi-skala — ét sted at skrue på al tekststørrelse (kundens ønske: større skrift). */
    --fs-xs:clamp(.8rem,.75rem + .15vw,.88rem);      /* mikro-labels, tooltips, badges */
    --fs-sm:clamp(.92rem,.87rem + .2vw,1rem);        /* meta, small, tabeller */
    --fs-base:clamp(1.04rem,1rem + .25vw,1.14rem);   /* brødtekst */
    --fs-lg:clamp(1.14rem,1.08rem + .3vw,1.28rem);   /* lead, fremhævet tekst */
    --fs-h3:clamp(1.28rem,1.18rem + .4vw,1.5rem);
    --fs-h2:clamp(1.7rem,1.4rem + 1.6vw,2.4rem);
    --fs-h1:clamp(2.1rem,1.7rem + 2.4vw,3.3rem);

    /* Ikon-størrelser — styres ét sted (kundens ønske: større ikoner). */
    --ic-size:30px;        /* glyf i top-ikoner */
    --ic-btn:58px;         /* selve top-ikon-knappen */
    --ic-side:24px;        /* sidebar-ikoner */
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* ---------- Mørk tilstand ---------- */
html[data-theme="dark"] {
    --paper:#1e2224;
    --paper-2:#15191a;
    --paper-3:#242a2c;
    --ink:#e7e8ea;
    --ink-soft:#b4b9bc;
    --muted:#899094;
    --line:#2c3234;
    --line-2:#3a4143;
    --sage-soft:#22302a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.28);
    --shadow:0 8px 30px rgba(0,0,0,.42);
    --shadow-lg:0 18px 50px rgba(0,0,0,.52);
}
html[data-theme="dark"] .site-header { background:rgba(21,25,26,.85); }
html[data-theme="dark"] .header-search { background:var(--paper-3); }
html[data-theme="dark"] img.map-canvas, html[data-theme="dark"] .map-canvas { filter:none; }

body {
    margin:0;
    font-family:var(--font-body);
    font-size:var(--fs-base);
    color:var(--ink);
    background:var(--paper-2);
    line-height:1.55;   /* lidt tættere linjer = mere kompakt trods større skrift */
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.15; color:var(--ink); margin:0 0 .5em; letter-spacing:-.01em; }
h1 { font-size:var(--fs-h1); }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); }
p { margin:0 0 1rem; color:var(--ink-soft); }
a { color:var(--teal); text-decoration:none; }
a:hover { color:var(--teal-dark); }
/* Navn der linker til en bruger-profil: arver farven fra teksten, får underline ved hover. */
.link-name { color:inherit; text-decoration:none; }
.link-name:hover { color:inherit; text-decoration:underline; text-underline-offset:3px; }
img { max-width:100%; display:block; }
small { font-size:var(--fs-sm); }

/* ---------- Knapper ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent;
    padding:.7em 1.3em; border-radius:var(--radius-pill); transition:.18s ease;
    white-space:nowrap; line-height:1;
}
.btn-primary { background:var(--teal); color:#fff; }
.btn-primary:hover { background:var(--teal-dark); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-ghost { background:transparent; color:var(--teal); border-color:var(--line-2); }
.btn-ghost:hover { background:var(--paper); border-color:var(--sage); }
.btn-staff { background:var(--sage-soft); color:var(--teal-dark); border-color:var(--sage); font-weight:650; }
.btn-staff:hover { background:#d2e0d9; border-color:var(--teal); color:var(--teal-dark); }
.btn-soft { background:var(--sage-soft); color:var(--teal-700); }
.btn-soft:hover { background:#d2e0d9; color:var(--teal-dark); }
.btn-block { width:100%; }
.btn-sm { padding:.5em 1em; font-size:var(--fs-sm); }
.btn[disabled] { background:var(--paper-3); color:var(--muted); border-color:var(--line-2); cursor:not-allowed; }
.btn[disabled]:hover { transform:none; box-shadow:none; background:var(--paper-3); color:var(--muted); }

/* ---------- Header ---------- */
.site-header {
    position:sticky; top:0; z-index:1000;
    background:rgba(255,255,255,.82); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}
.header-inner {
    max-width:var(--maxw); margin:0 auto; height:var(--header-h);
    display:flex; align-items:center; gap:1rem; padding:0 clamp(16px,3vw,48px);
}
.brand { display:flex; align-items:center; gap:.55rem; font-family:var(--font-display);
    font-weight:600; font-size:1.32rem; color:var(--ink); flex-shrink:0; }
.brand:hover { color:var(--ink); }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
    background:var(--teal); color:#fff; box-shadow:var(--shadow-sm); }
.brand-text span { color:var(--teal); }

.top-icons { display:flex; align-items:center; gap:.2rem; margin:0 auto; }
.icon-btn {
    position:relative; display:grid; place-items:center; width:var(--ic-btn); height:var(--ic-btn);
    border-radius:16px; color:var(--ink-soft); transition:.16s ease;
}
.icon-btn .ic { width:var(--ic-size); height:var(--ic-size); transition:.16s ease; }
.icon-btn:hover { background:var(--sage-soft); color:var(--teal-dark); transform:translateY(-1px); }
.icon-btn.active { background:var(--teal); color:#fff; }
/* Visuelt skjult, men læses af skærmlæsere — display:none fjernede linkets tilgængelige navn. */
.icon-btn .icon-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Rød notifikations-badge på et menu-ikon (fx ventende venneanmodninger) */
.nav-badge { display:none; position:absolute; top:2px; right:2px; min-width:1.15em; height:1.15em;
    padding:0 .3em; border-radius:999px; background:#dc2626; color:#fff; font-size:.62rem; font-weight:700;
    line-height:1.15em; text-align:center; box-shadow:0 0 0 2px var(--paper); }
.nav-badge.has-badge { display:block; }
.icon-btn.active .nav-badge { box-shadow:0 0 0 2px var(--teal); }
/* tooltip */
.icon-btn::after {
    content:attr(data-tip);
    position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
    background:var(--ink); color:#fff; font-size:var(--fs-xs); font-weight:500; white-space:nowrap;
    padding:.42em .7em; border-radius:8px; opacity:0; pointer-events:none; transition:.16s ease; z-index:5;
}
.icon-btn::before {
    content:""; position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-bottom-color:var(--ink); opacity:0; transition:.16s ease;
}
.icon-btn:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.icon-btn:hover::before { opacity:1; }

.header-search { display:flex; align-items:center; gap:.45rem; flex-shrink:1; min-width:0; max-width:240px;
    background:var(--paper-2,#f4f7f5); border:1px solid var(--line-2); border-radius:var(--radius-pill);
    padding:.4em .8em; color:var(--muted); }
.header-search:focus-within { border-color:var(--teal); box-shadow:0 0 0 3px var(--sage-soft); color:var(--teal); }
.header-search input { border:0; background:none; font:inherit; font-size:var(--fs-sm); color:var(--ink);
    outline:none; width:100%; min-width:0; }
@media (max-width:1100px) { .header-search { display:none; } }
/* Søgefelt i sidemenuen — kun når header-søgningen er skjult (≤1100px). */
.side-search { display:none; }
@media (max-width:1100px) {
    .side-search { display:flex; align-items:center; gap:.45rem; margin:0 0 1rem;
        background:var(--paper-2,#f4f7f5); border:1px solid var(--line-2); border-radius:var(--radius-pill);
        padding:.5em .9em; color:var(--muted); }
    .side-search:focus-within { border-color:var(--teal); box-shadow:0 0 0 3px var(--sage-soft); color:var(--teal); }
    .side-search input { border:0; background:none; font:inherit; font-size:var(--fs-sm); color:var(--ink);
        outline:none; width:100%; min-width:0; }
}
.header-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
/* "Profil"-dropdown i headeren */
.nav-dropdown { position:relative; }
.nav-dropdown > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35em; }
.nav-dropdown > summary::-webkit-details-marker { display:none; }
.nav-dropdown[open] > summary svg { transform:rotate(180deg); }
.nav-dropdown > summary svg { transition:transform .15s ease; }
.nav-dropdown-menu { position:absolute; right:0; top:calc(100% + 6px); background:var(--paper);
    border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:.4rem; min-width:190px;
    z-index:1001; display:flex; flex-direction:column; gap:.1rem; }
.nav-dropdown-menu a { padding:.55rem .7rem; border-radius:8px; color:var(--ink); font-size:var(--fs-sm);
    font-weight:500; white-space:nowrap; }
.nav-dropdown-menu a:hover { background:var(--sage-soft); color:var(--teal-dark); }
.menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; background:none; border:0; cursor:pointer; padding:8px; flex-shrink:0; }
.menu-toggle span { width:26px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
/* Vis som "X" når menuen er åben — føles som en rigtig til/fra-knap. */
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Layout: sidebar + content ---------- */
.layout { max-width:var(--maxw); margin:0 auto; display:flex; align-items:flex-start; padding:0 clamp(16px,3vw,48px); }
.sidebar {
    position:sticky; top:var(--header-h); flex-shrink:0;
    width:var(--sidebar-w); height:calc(100vh - var(--header-h));
    padding:1.4rem 1rem; display:flex; flex-direction:column; gap:1.2rem;
    border-right:1px solid var(--line); overflow-y:auto;
    transition:width .25s ease, padding .25s ease, opacity .2s ease;
}
/* Desktop: klik på menuknappen klapper sidemenuen sammen — indholdet fylder så hele bredden. */
@media (min-width:1025px) {
    body.sidebar-collapsed .sidebar {
        width:0; padding-left:0; padding-right:0; opacity:0;
        border-right:0; overflow:hidden; pointer-events:none;
    }
}
.side-heading { font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:.7rem; }
.side-nav { display:flex; flex-direction:column; gap:.3rem; }
.side-link {
    display:flex; align-items:center; gap:.8rem; padding:.75rem .8rem; border-radius:12px;
    color:var(--ink); transition:.15s ease;
}
.side-link svg { color:var(--teal); flex-shrink:0; width:var(--ic-side); height:var(--ic-side); }
.side-link span { display:flex; flex-direction:column; line-height:1.25; }
.side-link strong { font-weight:600; font-size:var(--fs-base); }
.side-link small { color:var(--muted); font-size:var(--fs-xs); }
.side-link:hover { background:var(--paper); color:var(--ink); box-shadow:var(--shadow-sm); }
.side-link.active { background:var(--sage-soft); }
.side-link.active strong { color:var(--teal-dark); }
/* Rolle-links (Medarbejder/Admin) i mobilmenuen — fremhævet så de skiller sig ud. */
.side-link-staff { background:var(--sage-soft); border:1px solid var(--sage); margin-bottom:.2rem; }
.side-link-staff svg { width:var(--ic-side); height:var(--ic-side); color:var(--teal); flex-shrink:0; }
.side-link-staff strong { color:var(--teal-dark); }
.side-link-staff small { color:var(--teal-700); opacity:.85; }
.side-link-staff:hover { background:#d2e0d9; box-shadow:var(--shadow-sm); }

.side-cta { margin-top:auto; background:var(--teal); color:#fff; border-radius:var(--radius); padding:1.1rem; }
.side-cta p { color:rgba(255,255,255,.9); font-weight:600; margin:0 0 .7rem; }
.side-cta .btn { white-space:normal; height:auto; min-height:2.6em; line-height:1.25; text-align:center; }

.content { flex:1; min-width:0; padding:clamp(1rem,2.5vw,2rem); }

/* ---------- Generiske byggesten ---------- */
.section { margin-bottom:clamp(1.6rem,4vw,3rem); }
.page-head { max-width:680px; margin-bottom:1.4rem; }
.page-head .eyebrow { color:var(--teal); font-weight:600; font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase; }
.page-head p { font-size:var(--fs-lg); }
.lead { font-size:var(--fs-lg); color:var(--ink-soft); }

.card {
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.2rem; box-shadow:var(--shadow-sm); transition:.18s ease;
}
.card.hover:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--sage); }
.grid { display:grid; gap:1.2rem; }
/* minmax(0,1fr) frem for 1fr: ellers kan brede børn (inputs, tabeller) presse sporet
   bredere end skærmen på mobil — 1fr = minmax(auto,1fr), og auto = min-content. */
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-auto { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
/* Bred hovedkolonne + smal sidekolonne (peer-profil, ansøg job, point) — én kolonne på mobil. */
.grid-split { display:grid; gap:1.6rem; align-items:start; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.grid-split.wide { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }

.badge {
    display:inline-flex; align-items:center; gap:.35em; font-size:var(--fs-xs); font-weight:600;
    padding:.3em .7em; border-radius:var(--radius-pill); background:var(--sage-soft); color:var(--teal-700);
}
.badge.area-Diagnoser { background:#dcebe6; color:#1f5a4d; }
.badge.area-Kriminalitet { background:#e7e0ef; color:#5b4a78; }
.badge.area-Misbrug { background:#f3e4d6; color:#8a5a2b; }
.badge.area-Overgreb { background:#f1dede; color:#8a4040; }
.badge-outline { background:transparent; border:1px solid var(--line-2); color:var(--ink-soft); }
.badge-ok { background:#dcefe5; color:var(--ok); }
.tag-row { display:flex; flex-wrap:wrap; gap:.4rem; }

/* ---------- Hero ---------- */
.hero {
    position:relative; background:linear-gradient(135deg,var(--teal-700),var(--teal) 60%,var(--sage));
    color:#fff; border-radius:24px; padding:clamp(2rem,5vw,3.6rem); overflow:hidden; margin-bottom:2.4rem;
}

/* ---------- Notifikationer ---------- */
.notif-item.unread { border-color:var(--sage); background:var(--sage-soft); }
.notif-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.notif-dot.on { background:#dc2626; }

/* ---------- Notifikations-dropdown (klokken) ---------- */
/* justify-content: .nav-dropdown>summary's inline-flex vinder over .icon-btn's grid — uden denne klistrer klokken til venstre i boksen. */
.notif-dropdown > summary { position:relative; justify-content:center; }
.notif-dropdown[open] > summary svg { transform:none; }   /* klokken skal ikke rotere som pil-dropdowns */
.notif-menu { width:min(480px, 92vw); padding:.5rem; color:var(--ink); }   /* egen farve — panel-headeren er hvid-på-mørk */
.notif-menu-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem;
    padding:.2rem .3rem .5rem; border-bottom:1px solid var(--line); margin-bottom:.2rem; }
.notif-menu a { white-space:normal; }
.notif-menu-item { display:flex; gap:.55rem; align-items:flex-start; font-weight:400; line-height:1.35; }
.notif-menu-item .notif-dot { margin-top:.4em; }
.notif-menu-item.unread { background:var(--sage-soft); }
.notif-menu-item small { display:block; color:var(--muted); font-size:.76rem; margin-top:.1rem; }
.notif-menu-all { text-align:center; border-top:1px solid var(--line); margin-top:.2rem; font-weight:600; }
.panel-header .notif-dropdown > summary { color:#fff; }
/* Menuen ligger på hvid bund — også i det mørke panel-header, hvor .btn-ghost ellers er hvid. */
.panel-header .notif-menu .btn-ghost { color:var(--ink-soft); border-color:var(--line-2); }
.panel-header .notif-menu .btn-ghost:hover { background:var(--sage-soft); border-color:var(--line-2); }

/* ---------- Favorit/gem-knapper ---------- */
.fav-toggle, .save-toggle { background:none; border:0; cursor:pointer; color:var(--line-2); font-size:1.2rem;
    line-height:1; padding:.2rem; transition:.12s ease; }
.fav-toggle:hover, .save-toggle:hover { color:var(--sage); transform:scale(1.1); }
.fav-toggle.on { color:#dc2626; }
.save-toggle.on { color:var(--accent); }
.peer-card { position:relative; }
.peer-card .fav-toggle { position:absolute; top:.7rem; right:.7rem; z-index:1; }

/* ---------- Stjerne-rating ---------- */
.stars { --val:0; display:inline-block; position:relative; font-size:1rem; line-height:1;
    color:var(--line-2); white-space:nowrap; }
.stars::before { content:"★★★★★"; }
.stars::after { content:"★★★★★"; color:var(--accent); position:absolute; left:0; top:0;
    width:calc(var(--val) / 5 * 100%); overflow:hidden; }
.star-input { display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; font-size:1.6rem; }
.star-input input { position:absolute; opacity:0; width:0; }
.star-input label { color:var(--line-2); cursor:pointer; padding:0 .04em; transition:color .1s ease; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color:var(--accent); }

/* ---------- Indstillinger (to kolonner) ---------- */
.settings-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.4rem; align-items:start; }
.settings-aside { display:flex; flex-direction:column; gap:1.4rem; }
@media (max-width:860px) { .settings-layout { grid-template-columns:1fr; } }

/* ---------- Onboarding (vælg kaldenavn) ---------- */
.onboard-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:1.6rem; align-items:start; }
.onboard-aside { display:flex; flex-direction:column; gap:1.2rem; }
.onboard-hero { position:relative; overflow:hidden; color:#fff; border-radius:var(--radius); padding:1.6rem 1.7rem;
    background:linear-gradient(135deg,var(--teal-700),var(--teal) 60%,var(--sage)); box-shadow:var(--shadow-sm); }
.onboard-hero::after { content:""; position:absolute; right:-50px; bottom:-70px; width:220px; height:220px;
    background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%); }
.onboard-hero .heart { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px;
    border-radius:50%; background:rgba(255,255,255,.16); margin-bottom:.9rem; }
.onboard-hero h2 { position:relative; z-index:1; color:#fff; font-size:1.3rem; margin:0 0 .4rem; }
.onboard-hero p { position:relative; z-index:1; color:rgba(255,255,255,.92); margin:0; }
@media (max-width:820px) { .onboard-layout { grid-template-columns:1fr; } }
.hero::after { content:""; position:absolute; right:-80px; bottom:-120px; width:360px; height:360px;
    background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); }
.hero h1 { color:#fff; max-width:14ch; }
.hero p { color:rgba(255,255,255,.92); font-size:var(--fs-lg); max-width:46ch; }
.hero .btn-ghost { color:#fff; border-color:rgba(255,255,255,.5); }
.hero .btn-ghost:hover { background:rgba(255,255,255,.12); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.hero-quote { position:relative; z-index:1; margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.2);
    font-family:var(--font-display); font-size:var(--fs-lg); max-width:40ch; }

/* ---------- Peer-kort ---------- */
.peer-card { display:flex; flex-direction:column; gap:.8rem; }
.peer-top { display:flex; gap:.9rem; align-items:center; }
.avatar { width:56px; height:56px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
    font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:#fff;
    background:linear-gradient(135deg,var(--teal),var(--sage)); }
.avatar.has-photo { background-size:cover; background-position:center; color:transparent; font-size:0; }
.peer-name { font-weight:600; font-size:var(--fs-lg); }
.peer-title { color:var(--muted); font-size:var(--fs-sm); }
.peer-meta { display:flex; align-items:center; gap:.4rem; color:var(--ink-soft); font-size:var(--fs-sm); }
.peer-bio { font-size:var(--fs-sm); color:var(--ink-soft); }
.peer-foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.4rem; }
.video-flag { display:inline-flex; align-items:center; gap:.35em; color:var(--teal); font-size:var(--fs-xs); font-weight:600; }

/* ---------- Filtre ---------- */
.filterbar { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:1rem 1.2rem; margin-bottom:1.6rem; box-shadow:var(--shadow-sm); }
.filter-label { font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; display:block; }
.chip {
    display:inline-flex; align-items:center; gap:.4em; font-size:var(--fs-sm); font-weight:500;
    padding:.45em .9em; border-radius:var(--radius-pill); border:1px solid var(--line-2);
    background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:.15s ease; user-select:none;
}
.chip:hover { border-color:var(--sage); color:var(--teal-dark); }
.chip.on { background:var(--teal); border-color:var(--teal); color:#fff; }
.chip-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-label-gap { margin-top:1.1rem; }
.filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.filter-field { display:flex; flex-direction:column; }
.filter-select {
    font:inherit; font-size:var(--fs-sm); color:var(--ink); background:var(--paper);
    border:1px solid var(--line-2); border-radius:var(--radius-pill);
    padding:.55em 1em; cursor:pointer; transition:.15s ease; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%235c6b66' stroke-width='1.6' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 1em center; padding-right:2.4em;
}
.filter-select:hover { border-color:var(--sage); }
.filter-select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--sage-soft); }

/* ---------- Kort (Leaflet + OpenStreetMap) ---------- */
.map-wrap { display:grid; grid-template-columns:1.3fr 1fr; gap:1.6rem; align-items:start; }
.map-stage { position:relative; background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:.4rem; box-shadow:var(--shadow-sm); }
.map-canvas { height:560px; border-radius:calc(var(--radius) - 4px); overflow:hidden; z-index:1; }
.map-canvas .leaflet-container { height:100%; width:100%; font:inherit; background:#dde9e4; }
.map-canvas .leaflet-popup-content { font:inherit; }
.map-canvas .leaflet-popup-content a { color:var(--teal); font-weight:600; }

/* Dråbe-formet pin (som Google Maps) med foto eller initialer inde i "hovedet". */
.peer-pin-wrap { background:transparent; border:0; }
.peer-pin {
    position:relative; width:64px; height:64px; cursor:pointer;
    transform-origin:50% 100%; transition:transform .16s ease;
    filter:drop-shadow(0 5px 6px rgba(31,72,69,.4));
}
.peer-pin::after {                 /* spidsen der peger på lokationen */
    content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
    border-left:12px solid transparent; border-right:12px solid transparent;
    border-top:18px solid #fff;
}
.peer-pin-face {
    position:relative; z-index:1; display:grid; place-items:center;
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--sage)); color:#fff;
    font-family:var(--font-display); font-weight:600; font-size:1.3rem;
    border:3px solid #fff;
}
.peer-pin-face.photo { background-size:cover; background-position:center; color:transparent; font-size:0; }
.leaflet-marker-icon.active .peer-pin,
.peer-pin:hover { transform:scale(1.14); }
.map-list { display:flex; flex-direction:column; gap:.7rem; max-height:560px; overflow-y:auto; padding-right:.3rem; }
.map-item { display:flex; gap:.8rem; align-items:center; padding:.7rem; border:1px solid var(--line);
    border-radius:12px; background:var(--paper); cursor:pointer; transition:.15s ease; }
.map-item:hover, .map-item.active { border-color:var(--sage); box-shadow:var(--shadow-sm); background:#fbfcfb; }
.map-item.hide { display:none; }
.map-contact { margin-left:auto; flex:0 0 auto; align-self:center; }
.map-empty { color:var(--muted); padding:1.5rem; text-align:center; }

/* ---------- Kalender / tider ---------- */
.slot-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.slot { padding:.5em .9em; border-radius:10px; border:1px solid var(--line-2); background:var(--paper);
    font-size:var(--fs-sm); font-weight:500; cursor:pointer; transition:.15s ease; }
.slot:hover { border-color:var(--teal); color:var(--teal-dark); }
.slot.taken { color:var(--muted); text-decoration:line-through; cursor:not-allowed; background:var(--paper-3); }
/* Optaget tid: stadig synlig, men tydeligt rød så skemaet er let at overskue. */
.slot.booked { color:#b3261e; background:#fdeceb; border-color:#f3c9c5; text-decoration:line-through;
    cursor:not-allowed; font-weight:600; }
.slot.booked:hover { border-color:#f3c9c5; color:#b3261e; }
.slot-legend { display:flex; align-items:center; gap:.45rem; margin:.7rem 0 0; font-size:var(--fs-xs); color:var(--muted); }
.slot-legend-dot { width:.8em; height:.8em; border-radius:3px; background:#fdeceb; border:1px solid #f3c9c5; }
.cal { display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; }
.cal-day { text-align:center; }
.cal-day .d { font-size:var(--fs-xs); color:var(--muted); margin-bottom:.4rem; }
.cal-day .slot { display:block; width:100%; margin-bottom:.4rem; text-align:center; }
.booking-row.hide { display:none; }

/* ---------- Forms ---------- */
.form-grid { display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field.full { grid-column:1/-1; }
.field label { font-weight:600; font-size:var(--fs-sm); }
.field .hint { color:var(--muted); font-size:var(--fs-xs); }
.field input, .field select, .field textarea {
    font:inherit; padding:.7em .85em; border:1px solid var(--line-2); border-radius:var(--radius-sm);
    background:var(--paper); color:var(--ink); transition:.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--sage-soft);
}
.field textarea { resize:vertical; min-height:120px; }
.toggle-row { display:flex; gap:.7rem; }
.toggle-card { flex:1; border:1px solid var(--line-2); border-radius:12px; padding:1rem; cursor:pointer; transition:.15s ease; }
.toggle-card:hover { border-color:var(--sage); }
.toggle-card.on { border-color:var(--teal); background:var(--sage-soft); }
.toggle-card strong { display:block; }
.toggle-card small { color:var(--muted); }
.upload-zone { border:2px dashed var(--line-2); border-radius:var(--radius); padding:1.8rem; text-align:center; color:var(--muted);
    background:var(--paper); transition:.15s ease; cursor:pointer; }
.upload-zone:hover { border-color:var(--sage); color:var(--teal-dark); }

/* ---------- Min profil (Facebook-stil) ---------- */
.profile-page { max-width:1040px; margin-inline:auto; }
.profile-cover { height:210px; border-radius:var(--radius) var(--radius) 0 0;
    background:linear-gradient(120deg,var(--teal-700),var(--teal) 55%,var(--sage)); position:relative; overflow:hidden; }
.profile-cover::after { content:""; position:absolute; right:-60px; bottom:-90px; width:300px; height:300px;
    background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); }
.profile-header { position:relative; z-index:1; background:var(--paper); border:1px solid var(--line); border-top:0;
    border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-sm);
    padding:0 1.8rem 1.4rem; margin-bottom:1.5rem; }
.profile-headrow { display:flex; align-items:flex-end; gap:1.3rem; margin-top:-60px; flex-wrap:wrap; }
.avatar-xl { width:136px; height:136px; font-size:3rem; border:4px solid var(--paper); box-shadow:var(--shadow-sm); }
.profile-id { flex:1; min-width:0; padding-bottom:.5rem; }
.profile-name-row { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.profile-name { font-family:var(--font-display); font-weight:700; font-size:1.85rem; line-height:1.15; }
/* Tydeligt badge der markerer at brugeren også er peer-til-peer-medarbejder. */
.badge-peer { display:inline-flex; align-items:center; gap:.42rem; padding:.36em .72em .36em .56em;
    background:linear-gradient(135deg, var(--teal), var(--teal-dark)); color:#fff;
    font-size:.82rem; font-weight:650; letter-spacing:.005em; line-height:1; white-space:nowrap;
    border-radius:var(--radius-pill); box-shadow:0 1px 3px rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.18); }
.badge-peer svg { width:15px; height:15px; flex:none; }
.profile-meta { color:var(--muted); font-size:var(--fs-sm); margin-top:.25rem; display:flex; flex-wrap:wrap;
    gap:.4rem .8rem; align-items:center; }
.profile-actions { display:flex; gap:.6rem; padding-bottom:.6rem; flex-wrap:wrap; }

.profile-grid { display:grid; grid-template-columns:360px minmax(0,1fr); gap:1.4rem; align-items:start; }
.profile-side { display:flex; flex-direction:column; gap:1.4rem; position:sticky; top:calc(var(--header-h) + 1rem); }
.profile-card-head { font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:0 0 .8rem; }
.info-list { display:flex; flex-direction:column; gap:.7rem; }
.info-list li { list-style:none; display:flex; gap:.6rem; align-items:center; font-size:var(--fs-sm); color:var(--ink-soft); }
.info-list li svg { flex:0 0 auto; color:var(--muted); }
.profile-bio-text { white-space:pre-wrap; color:var(--ink-soft); }
.profile-bio-empty { color:var(--muted); font-style:italic; }

.edit-details { margin-top:1rem; border-top:1px solid var(--line); padding-top:1rem; }
.edit-details > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.5em;
    font-weight:600; font-size:var(--fs-sm); color:var(--teal); }
.edit-details > summary::-webkit-details-marker { display:none; }
.edit-details > summary:hover { color:var(--teal-dark); }
.edit-details[open] > summary { margin-bottom:1rem; }

.connection-list { display:flex; flex-direction:column; gap:.3rem; }
.connection { display:flex; align-items:center; gap:.7rem; padding:.45rem; border-radius:10px;
    transition:.12s ease; color:inherit; }
.connection:hover { background:var(--paper-2, #f4f7f5); color:inherit; }
.connection-name { font-weight:600; font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.profile-feed { display:flex; flex-direction:column; gap:1rem; }
.feed-post { display:block; }
.feed-post:hover { border-color:var(--sage); box-shadow:var(--shadow-sm); }
.feed-empty { color:var(--muted); text-align:center; padding:2.4rem 1rem; }

@media (max-width:820px){
    .profile-grid { grid-template-columns:1fr; }
    .profile-side { position:static; }
    .profile-name { font-size:1.5rem; }
}

/* ---------- Booking-flow ---------- */
.booking-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:1.5rem; align-items:start; }
.booking-main { display:flex; flex-direction:column; gap:1.2rem; }
.book-step { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm); }
.step-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem; }
.step-num { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
    background:var(--sage-soft); color:var(--teal-700); font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.step-title { font-family:var(--font-display); font-weight:600; font-size:1.12rem; line-height:1.25; }
.step-title small { display:block; font-family:var(--font-body); font-weight:400; font-size:var(--fs-xs); color:var(--muted); }

.slot.on { background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:var(--shadow-sm); }

/* Kalender til datovalg */
.cal-layout { display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:1.8rem; }
.cal-widget { user-select:none; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.cal-month { font-family:var(--font-display); font-weight:600; font-size:1.05rem; text-transform:capitalize; }
.cal-nav { width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper);
    cursor:pointer; font-size:1.15rem; line-height:1; color:var(--ink-soft); transition:.15s ease;
    display:grid; place-items:center; }
.cal-nav:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
.cal-nav:disabled { opacity:.35; cursor:not-allowed; }
.cal-weekdays, .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; }
.cal-weekdays { margin-bottom:.45rem; }
.cal-weekdays span { text-align:center; font-size:var(--fs-xs); color:var(--muted); font-weight:600; }
.cal-cell { aspect-ratio:1; display:grid; place-items:center; border-radius:50%; border:1px solid transparent;
    background:transparent; font:inherit; font-size:var(--fs-sm); color:var(--ink); cursor:default; transition:.12s ease; }
.cal-cell.empty { visibility:hidden; }
.cal-cell.is-disabled { color:var(--line-2); }
.cal-cell.is-available { cursor:pointer; font-weight:600; border-color:var(--sage); color:var(--teal-dark); }
.cal-cell.is-available:hover { background:var(--sage-soft); }
.cal-cell.on { background:var(--teal); color:#fff; border-color:var(--teal); }

.time-panel { border-left:1px solid var(--line); padding-left:1.8rem; min-width:0; }
.time-panel-head { font-weight:600; font-size:var(--fs-sm); margin-bottom:.9rem; }
.time-panel-head span { color:var(--teal-dark); }
.time-empty { color:var(--muted); font-size:var(--fs-sm); display:grid; place-items:center;
    min-height:180px; text-align:center; padding:1rem; }
.time-panel .slot-grid .slot { min-width:70px; text-align:center; padding:.65em 1.1em; border-radius:var(--radius-pill); }

/* Fylder det tomme rum under de ledige tider */
.time-panel-extra { margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:1.3rem; }
.about-head { font-family:var(--font-display); font-weight:600; font-size:1.02rem; margin-bottom:.5rem; }
.about-block .peer-bio { margin:0 0 .8rem; }
.expect-card { align-items:flex-start; }
.expect-title { display:block; font-size:.98rem; margin-bottom:.5rem; color:var(--teal-dark); }
.expect-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.expect-list li { position:relative; padding-left:1.6rem; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.4; }
.expect-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--teal); font-weight:700; }

@media (max-width:640px){
    .cal-layout { grid-template-columns:1fr; }
    .time-panel { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:1.2rem; margin-top:.3rem; }
}

.pay-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; }
.pay-card { position:relative; display:flex; flex-direction:column; gap:.2rem; border:1px solid var(--line-2);
    border-radius:14px; padding:1rem 1.05rem; cursor:pointer; transition:.15s ease; }
.pay-card:hover { border-color:var(--sage); }
.pay-card.on { border-color:var(--teal); background:var(--sage-soft); box-shadow:var(--shadow-sm); }
.pay-card .pay-ico { font-size:1.35rem; line-height:1; margin-bottom:.15rem; }
.pay-card strong { font-size:.98rem; }
.pay-card small { color:var(--muted); font-size:var(--fs-xs); }
/* Betalingsmulighed man ikke har (ingen klip/abonnement): nedtonet + køb-link i stedet for radio. */
.pay-card.unavailable { cursor:default; background:var(--paper-2); border-style:dashed; }
.pay-card.unavailable:hover { border-color:var(--line-2); }
.pay-card.unavailable strong { color:var(--muted); }
.pay-buy { margin-top:.3rem; font-size:var(--fs-xs); font-weight:600; color:var(--teal); text-decoration:none; }
.pay-buy:hover { text-decoration:underline; }

/* Saldo-strip (Mine bookinger): klip + abonnements-samtaler tilbage. */
.balance-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:.75rem; margin-bottom:1.2rem; }
.balance-card { display:flex; align-items:center; gap:.85rem; border:1px solid var(--line-2); border-radius:14px;
    padding:.85rem 1.05rem; background:var(--paper); }
.balance-card .balance-ico { font-size:1.3rem; line-height:1; }
.balance-card strong { font-size:.98rem; display:block; }
.balance-card small { color:var(--muted); font-size:var(--fs-xs); }
.balance-card .pay-buy { margin:0 0 0 auto; white-space:nowrap; }

.booking-summary { position:sticky; top:calc(var(--header-h) + 1rem); background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1rem; }
.summary-peer { display:flex; gap:.85rem; align-items:center; }
.summary-rows { display:flex; flex-direction:column; gap:.55rem; }
.summary-line { display:flex; justify-content:space-between; gap:1rem; font-size:var(--fs-sm); }
.summary-line .lbl { color:var(--muted); }
.summary-line .val { font-weight:600; text-align:right; }
.summary-divider { height:1px; background:var(--line); }
.summary-total { display:flex; justify-content:space-between; align-items:baseline; }
.summary-total .amt { font-family:var(--font-display); font-weight:700; font-size:1.45rem; color:var(--teal-dark); }
.booking-summary .btn-block { margin-top:.2rem; }

@media (max-width:820px){
    .booking-layout { grid-template-columns:1fr; }
    .booking-summary { position:static; }
}

/* ---------- Prisplaner ---------- */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch; }
.price-card { display:flex; flex-direction:column; position:relative; }
.price-card.featured { border-color:var(--teal); box-shadow:var(--shadow); }
.price-ribbon { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent);
    color:#3a2a10; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; padding:.3em .9em; border-radius:var(--radius-pill); }
.price-kind { color:var(--teal); font-weight:600; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; }
.price-amount { font-family:var(--font-display); font-size:2.4rem; color:var(--ink); margin:.2rem 0; }
.price-amount span { font-size:var(--fs-sm); color:var(--muted); font-family:var(--font-body); }
.price-features { list-style:none; padding:0; margin:1rem 0 1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.price-features li { display:flex; gap:.55rem; font-size:var(--fs-sm); color:var(--ink-soft); }
.price-features li::before { content:"✓"; color:var(--ok); font-weight:700; }
.price-card .btn { margin-top:auto; }

/* ---------- Steps / proces ---------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; }
.step { position:relative; padding-left:.4rem; }
.step .num { width:38px; height:38px; border-radius:50%; background:var(--sage-soft); color:var(--teal-dark);
    display:grid; place-items:center; font-family:var(--font-display); font-weight:600; margin-bottom:.7rem; }

/* ---------- Chat-side ---------- */
.chat-page { padding-top:1.2rem; padding-bottom:1.2rem; }
.chat-page .page-head { margin-bottom:1.1rem; }
.chat-page .page-head h1 { font-size:var(--fs-h2); margin:.1rem 0 .3rem; }
.chat-page .page-head p { margin:0; font-size:var(--fs-sm); max-width:none; }
.chat-shell { display:grid; grid-template-columns:320px 1fr; grid-template-rows:minmax(0,1fr); gap:0; border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden; background:var(--paper); box-shadow:var(--shadow);
    height:calc(100vh - var(--header-h) - 220px); min-height:520px; }
.chat-rooms { border-right:1px solid var(--line); padding:1rem .9rem; background:var(--paper-2); overflow-y:auto;
    display:flex; flex-direction:column; gap:.15rem; min-height:0; }
.room-form { margin:0; }
.room { display:flex; gap:.7rem; align-items:center; width:100%; padding:.5rem .6rem; border:0; background:none;
    border-radius:12px; cursor:pointer; font:inherit; color:var(--ink); text-align:left; transition:background .15s; }
.room:hover { background:var(--paper); }
.room.on { background:var(--sage-soft); }
.room-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:var(--fs-sm); }
.peer-chip { flex:0 0 auto; font-size:.62rem; background:var(--sage-soft); color:var(--teal-dark); padding:.15em .55em;
    border-radius:999px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.chat-search { position:relative; margin:0 0 .5rem; }
.chat-search svg { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.chat-search input { width:100%; border-radius:var(--radius-pill); padding:.5rem .9rem .5rem 2.2rem; font-size:var(--fs-sm); }
.chat-sec { margin-top:.7rem; }
.chat-rooms [hidden] { display:none !important; }
.conv { display:flex; align-items:center; gap:.7rem; width:100%; padding:.5rem .6rem; border:0; background:none;
    border-radius:12px; cursor:pointer; font:inherit; color:var(--ink); text-align:left; text-decoration:none; transition:background .15s; }
.conv:hover { background:var(--paper); }
.conv.on { background:var(--sage-soft); }
.conv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.05rem; }
.conv-name { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-weight:600; font-size:var(--fs-sm);
    overflow:hidden; }
.conv-name time { color:var(--muted); font-size:.72rem; font-weight:500; flex-shrink:0; }
.conv-prev { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:var(--fs-xs); }
.conv-prev > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv.unread .conv-prev > span:first-child { color:var(--ink); font-weight:650; }
.conv-badge { flex:0 0 auto; background:#dc2626; color:#fff; border-radius:999px; font-size:.66rem;
    min-width:1.4em; text-align:center; padding:.1em .45em; font-weight:700; line-height:1.3; }
.chat-head-main { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.chat-presence { font-size:var(--fs-xs); color:var(--muted); }
.chat-presence.online { color:var(--ok); font-weight:600; }
.av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--sage),var(--teal));
    color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.95rem; flex-shrink:0; }
.av.av-sm { width:30px; height:30px; font-size:.8rem; }
.av-wrap { position:relative; flex-shrink:0; display:inline-flex; }
.av-wrap .dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
    background:var(--line-2); border:2px solid var(--paper-2); }
.chat-req { display:flex; align-items:center; gap:.55rem; padding:.35rem .3rem; }
.chat-req-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); font-weight:600; }
.chat-req form { margin:0; display:flex; }
.chat-pending { display:flex; align-items:center; gap:.55rem; padding:.3rem .3rem; color:var(--muted); font-size:var(--fs-sm); }
.chat-addfriend { margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line); }
.chat-addfriend label { font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); }
.chat-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.chat-head { padding:.8rem 1.3rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.7rem; background:var(--paper); }
.chat-head strong { font-family:var(--font-display); font-size:var(--fs-lg); }
.chat-body { flex:1; min-height:0; padding:1.3rem clamp(1.3rem,4vw,3rem); display:flex; flex-direction:column; gap:.55rem; background:var(--paper-2); overflow-y:auto; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
    text-align:center; background:var(--paper-2); padding:2rem; }
.chat-empty-icon { width:64px; height:64px; border-radius:50%; background:var(--sage-soft); color:var(--teal);
    display:grid; place-items:center; }
.bubble { max-width:min(70%,620px); padding:.6em 1em; border-radius:18px; font-size:var(--fs-sm); box-shadow:var(--shadow-sm); overflow-wrap:break-word; width:fit-content; }
.bubble.them { background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:6px; align-self:flex-start; }
.bubble.me { background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; border-bottom-right-radius:6px; align-self:flex-end; }
.bubble .who { font-size:var(--fs-xs); color:var(--muted); margin-bottom:.2rem; font-weight:600; }
.bubble time, .cw-bubble time { display:block; font-size:.62rem; margin-top:.2rem; text-align:right; line-height:1; }
.bubble.them time, .cw-bubble.them time { color:var(--muted); }
.bubble.me time, .cw-bubble.me time { color:rgba(255,255,255,.75); }
.chat-input { padding:.8rem 1rem; border-top:1px solid var(--line); display:flex; gap:.6rem; background:var(--paper); }
.chat-input input { flex:1; border-radius:var(--radius-pill); padding-left:1.1rem; }
.chat-input .btn { border-radius:var(--radius-pill); }

/* ---------- Strategi-opslag ---------- */
.note-grid { columns:3 260px; column-gap:1.2rem; }
.note { break-inside:avoid; margin-bottom:1.2rem; background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow-sm); }
.note h3 { font-size:var(--fs-lg); }
.note .who { color:var(--muted); font-size:var(--fs-xs); margin-top:.8rem; display:flex; justify-content:space-between; align-items:center; }

/* ---------- Modal ---------- */
.modal { position:fixed; inset:0; z-index:1100; display:none; place-items:center; padding:1rem;
    background:rgba(31,72,69,.45); backdrop-filter:blur(3px); }
.modal.open { display:grid; }
.modal-card { background:var(--paper); border-radius:20px; max-width:560px; width:100%; padding:1.8rem;
    box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto; position:relative; animation:pop .2s ease; }
.modal-card.lg { max-width:760px; }   /* bredere variant, fx booking-detaljer i kalenderen */
@keyframes pop { from { transform:scale(.96); opacity:0; } }
.modal-close { position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%; border:0;
    background:var(--paper-2); cursor:pointer; font-size:1.2rem; color:var(--ink-soft); }
.modal-close:hover { background:var(--line); }
.video-ph { aspect-ratio:16/9; border-radius:14px; background:linear-gradient(135deg,var(--teal-700),var(--sage));
    display:grid; place-items:center; color:#fff; margin-bottom:1rem; cursor:pointer; }
.video-ph .play { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; }

/* ---------- Info-callout ---------- */
/* ---- Mine bookinger ---- */
.bk-section { margin-top:2.2rem; }
/* Kort i kolonner på brede skærme (layout-bredde-udnyttelse.md) — én kolonne på smalle. */
.bk-list { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(min(520px,100%),1fr)); align-items:start; }
.bk-item { display:flex; align-items:flex-start; gap:1.1rem; }
/* Kalenderblad — datoen er det man scanner efter. */
.bk-date { flex:none; width:62px; text-align:center; border:1px solid var(--line-2); border-radius:var(--radius-sm);
    background:var(--paper-2); padding:.45rem .2rem .5rem; }
.bk-date .dw { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.bk-date .d { display:block; font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.1; color:var(--teal-700); }
.bk-date .m { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.bk-info { flex:1; min-width:0; }
.bk-name { font-weight:650; }
.bk-name .badge { margin-left:.45rem; vertical-align:2px; }
.bk-meta { font-size:var(--fs-sm); color:var(--muted); margin-top:.15rem; }
.bk-note { margin:.5rem 0 0; font-size:var(--fs-sm); color:var(--ink-soft); font-style:italic; }
.bk-actions { display:flex; flex-direction:column; gap:.45rem; align-items:flex-end; flex:none; }
.bk-dim .bk-date, .bk-dim .bk-name, .bk-dim .bk-meta { opacity:.55; }

/* Din næste tid — fremhævet teal-kort. */
.bk-next { display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap; padding:1.5rem 1.6rem; margin-bottom:.4rem;
    border-radius:var(--radius); background:linear-gradient(120deg,var(--teal),var(--teal-dark)); color:#fff; box-shadow:var(--shadow-sm); }
.bk-next .bk-date { width:76px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
.bk-next .bk-date .d { color:#fff; font-size:1.8rem; }
.bk-next .bk-date .dw, .bk-next .bk-date .m { color:rgba(255,255,255,.78); }
.bk-next-info { flex:1; min-width:220px; }
.bk-next-name { font-family:var(--font-display); font-weight:700; font-size:1.5rem; margin-top:.4rem; }
.bk-next a, .bk-next .link-name:hover { color:#fff; }
.bk-next-meta { color:rgba(255,255,255,.85); font-size:var(--fs-sm); margin-top:.15rem; }
.bk-next .bk-note { color:rgba(255,255,255,.8); }
.bk-chip { display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
    border-radius:var(--radius-pill); padding:.24em .85em; font-size:var(--fs-xs); font-weight:600; }
.bk-chip-warn { background:var(--accent); border-color:var(--accent); color:#3d2c12; }
.btn-on-dark { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn-on-dark:hover { background:rgba(255,255,255,.26); color:#fff; }

.badge-warn { background:#fbf3e8; color:#96682b; border:1px solid #f0e0c8; }
.badge-muted { background:var(--paper-3); color:var(--muted); }

@media (max-width:560px) {
    .bk-item, .bk-next { flex-wrap:wrap; }
    .bk-actions { flex-direction:row; width:100%; align-items:center; justify-content:flex-start; }
}

.callout { display:flex; gap:.9rem; padding:1.1rem 1.3rem; border-radius:var(--radius); border:1px solid var(--line);
    background:var(--paper); }
.callout.warm { background:#fbf3e8; border-color:#f0e0c8; }
.callout.teal { background:var(--sage-soft); border-color:#cfe0d8; }
.callout .ico { flex-shrink:0; color:var(--teal); }
/* Links i brødtekst skal kunne skelnes uden farvesyn (WCAG 1.4.1) — ikke kun via teal-farven. */
.callout a { text-decoration:underline; text-underline-offset:2px; }

/* ---------- Toasts (kvitteringer efter handlinger — _Toast.cshtml) ---------- */
.toast-stack { position:fixed; right:1rem; bottom:1rem; z-index:1200; display:flex; flex-direction:column;
    gap:.6rem; max-width:min(420px, calc(100vw - 2rem)); }
.toast { display:flex; align-items:flex-start; gap:.7rem; padding:.9rem 1rem; border-radius:var(--radius);
    border:1px solid var(--line); box-shadow:var(--shadow); font-size:var(--fs-sm);
    opacity:1; transition:opacity .35s ease, transform .35s ease; }
.toast.ok { background:var(--sage-soft); border-color:#cfe0d8; }
.toast.error { background:#fbf3e8; border-color:#f0e0c8; }
.toast-hide { opacity:0; transform:translateY(6px); }
.toast-close { margin-left:auto; border:0; background:none; cursor:pointer; font-size:1.05rem;
    line-height:1; color:var(--muted); padding:.1em .25em; }
.toast-close:hover { color:var(--ink); }
@media (prefers-reduced-motion:reduce) { .toast { transition:none; } }

/* ---------- Submit-guard: knappen låses og viser en lille ring imens ---------- */
.btn-loading { pointer-events:none; opacity:.75; }
.btn-loading::after { content:""; display:inline-block; width:.9em; height:.9em; margin-left:.5em;
    vertical-align:-.1em; border:2px solid currentColor; border-right-color:transparent;
    border-radius:50%; animation:btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .btn-loading::after { animation:none; opacity:.5; } }

/* ---------- Tom-tilstand med handling (fælles for lister uden indhold) ---------- */
.empty-state { text-align:center; padding:2.2rem 1.4rem; background:var(--paper); border:1px dashed var(--line-2);
    border-radius:var(--radius); color:var(--muted); }
.empty-state .ico { color:var(--sage); margin-bottom:.5rem; }
.empty-state p { margin:0 0 .9rem; }

/* ---------- Felt-fejl fra validering (asp-validation-for) ---------- */
.field-error { display:block; color:#a05656; font-size:var(--fs-xs); margin-top:.25rem; }
.field-error:empty { display:none; }
input.input-validation-error, textarea.input-validation-error { border-color:#c98484; }

/* ---------- Skip-link (a11y): synlig kun ved tastaturfokus ---------- */
.skip-link { position:absolute; left:-999px; top:.6rem; z-index:2000; background:var(--teal); color:#fff;
    padding:.6em 1.1em; border-radius:var(--radius-pill); font-weight:600; }
.skip-link:focus { left:.6rem; }
/* Fælles fokus-standard for tastaturbrugere (musen ser ingen forskel). */
:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }

/* ---------- Footer ---------- */
.site-footer { margin-top:3rem; border-top:1px solid var(--line); padding-top:2rem; }
.footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:1.6rem; }
.footer-cols strong { display:block; margin-bottom:.5rem; font-family:var(--font-display); }
.footer-cols p { font-size:var(--fs-sm); }
.footer-base { display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 0 2rem;
    border-top:1px solid var(--line); color:var(--muted); font-size:var(--fs-sm); flex-wrap:wrap; }

/* ---------- Tabel-wrap (responsiv) ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
table.data { width:100%; border-collapse:collapse; min-width:560px; }
table.data th, table.data td { text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
table.data th { background:var(--paper-2); font-weight:600; color:var(--ink-soft); font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; }
table.data tr:last-child td { border-bottom:0; }

/* ---------- Admin-panel ---------- */
.admin-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.7rem 1rem; margin-bottom:1.4rem;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.admin-nav-title { font-family:var(--font-display); font-weight:600; color:var(--teal); margin-right:.6rem; }
.admin-nav a { padding:.4em .8em; border-radius:var(--radius-pill); color:var(--ink-soft); font-size:var(--fs-sm); font-weight:500; }
.admin-nav a:hover { background:var(--sage-soft); color:var(--teal-dark); }
.admin-nav a.active { background:var(--teal); color:#fff; }
.admin-actions { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.inactive-row { opacity:.5; }

/* ---------- Dedikeret admin-/medarbejder-panel-layout ---------- */
.panel-body { margin:0; background:var(--paper-3); min-height:100vh; }
.panel-header { position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:0 clamp(16px,3vw,32px); height:64px; background:var(--teal-700); color:#fff;
    box-shadow:var(--shadow-sm); }
.panel-brand { display:flex; align-items:center; gap:.6rem; color:#fff; font-family:var(--font-display);
    font-weight:600; font-size:1.15rem; }
.panel-brand:hover { color:#fff; }
.panel-brand .brand-mark { background:rgba(255,255,255,.15); color:#fff; width:36px; height:36px; }
.panel-actions { display:flex; gap:.4rem; }
.panel-header .btn-ghost { color:#fff; border-color:rgba(255,255,255,.4); }
.panel-header .btn-ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }
/* Fuld bredde (jf. layout-bredde-udnyttelse.md): panelet udnytter hele skærmen,
   kun med luft i siderne — ingen store tomme margener på brede skærme. */
.panel-main { width:100%; margin:0 auto; padding:clamp(1rem,2vw,2rem) clamp(1rem,3vw,3.5rem); }
.panel-main .page-head { max-width:none; }
/* Sektioner side om side på brede skærme — falder pænt tilbage til én kolonne. */
.panel-cols { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr)); align-items:start; }
/* Bred venstre + smal højre (fx tabel + opret-formular). */
.panel-split { display:grid; gap:1.4rem; grid-template-columns:minmax(0,2fr) minmax(min(340px,100%),1fr); align-items:start; }
@media (max-width:1100px) { .panel-split { grid-template-columns:minmax(0,1fr); } }
/* Kort-lister (ansøgere, sitetekster) fordeler sig over bredden. */
.panel-cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(min(520px,100%),1fr)); align-items:start; }
/* Formularfelter fordeler sig over hele bredden i panelerne (falder selv tilbage på mobil). */
.panel-main .form-grid { grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }

/* Drag & drop-rækkefølge (admin → Spørgeskema) */
.q-handle { cursor:grab; color:var(--muted); font-size:1.05rem; text-align:center; user-select:none; }
.q-row.dragging { opacity:.45; background:var(--sage-soft); cursor:grabbing; }
.q-order-flash { display:none; font-size:var(--fs-sm); font-weight:600; color:var(--teal);
    padding:.35rem .7rem; border-radius:8px; background:var(--sage-soft); margin-bottom:.6rem; }
.q-order-flash.show { display:inline-block; }
.q-order-flash.err { color:#b91c1c; background:#fee2e2; }

.mt-0 { margin-top:0; } .mb-0 { margin-bottom:0; }
.center { text-align:center; }
.muted { color:var(--muted); }

/* ---------- Global chat-widget (Facebook-stil) ---------- */
.cw-dock { position:fixed; right:16px; bottom:16px; z-index:1400; display:flex; align-items:flex-end; gap:.7rem; }
.cw-launcher { position:relative; display:flex; align-items:center; gap:.55rem; color:#fff; border:0; cursor:pointer;
    background:linear-gradient(135deg,var(--teal),var(--teal-dark));
    border-radius:var(--radius-pill); padding:.7rem 1.25rem; font:inherit; font-weight:650; font-size:var(--fs-sm);
    box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease; }
.cw-launcher:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.cw-launcher:active { transform:translateY(0); }
/* Ulæst-notifikation: skjult uden ulæste, rød med antal når der er nogen. */
.cw-badge { display:none; background:#dc2626; color:#fff; border-radius:999px; font-size:.7rem;
    min-width:1.35em; text-align:center; padding:.1em .45em; font-weight:700; line-height:1.3;
    box-shadow:0 0 0 2px var(--teal-dark); }
.cw-badge.has-unread { display:inline-block; }
/* Panelet ligger dér hvor chat-knappen er; knappen skjules mens panelet er åbent. */
.cw-contacts { position:fixed; right:16px; bottom:16px; z-index:1400; width:320px; max-height:min(620px,78vh); display:none;
    flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); overflow:hidden; }
.cw-contacts.open { display:flex; animation:pop .18s ease; }
.cw-dock:has(.cw-contacts.open) .cw-launcher { display:none; }
.cw-contacts-head { padding:.75rem 1rem; display:flex; justify-content:space-between; align-items:center;
    background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; }
.cw-contacts-head strong { font-family:var(--font-display); font-size:var(--fs-lg); }
.cw-close { background:rgba(255,255,255,.14); border:0; color:#fff; cursor:pointer; font-size:1rem; line-height:1;
    width:26px; height:26px; border-radius:50%; display:grid; place-items:center; transition:background .12s; }
.cw-close:hover { background:rgba(255,255,255,.28); }
.cw-search { position:relative; padding:.6rem .6rem .3rem; }
.cw-search svg { position:absolute; left:1.4rem; top:50%; transform:translateY(calc(-50% + .15rem)); color:var(--muted); pointer-events:none; }
.cw-search input { width:100%; border-radius:var(--radius-pill); padding:.45rem .8rem .45rem 2.1rem; font-size:var(--fs-sm); }
.cw-list { overflow-y:auto; padding:.5rem; }
.cw-conv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.05rem; }
.cw-conv-name { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-weight:600;
    font-size:var(--fs-sm); overflow:hidden; }
.cw-conv-name time { color:var(--muted); font-size:.7rem; font-weight:500; flex-shrink:0; }
.cw-conv-prev { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:var(--fs-xs); }
.cw-conv-prev > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-conv.has-unread .cw-conv-prev > span:first-child { color:var(--ink); font-weight:650; }
.cw-group-head { font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
    font-weight:600; padding:.55rem .6rem .3rem; }
.cw-av-wrap { position:relative; flex-shrink:0; display:inline-flex; }
.cw-av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--sage),var(--teal));
    color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.88rem; }
.cw-av-wrap .cw-dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px;
    border:2px solid var(--paper); }
.cw-bubble { position:relative; }
.cw-msg-del { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
    border:0; background:#dc2626; color:#fff; font-size:.7rem; line-height:1; cursor:pointer; display:none; }
.cw-bubble.me:hover .cw-msg-del { display:block; }
.cw-request { display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; }
.cw-request-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); font-weight:600; }
.cw-req-btn { flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2);
    background:var(--paper); cursor:pointer; font-size:.85rem; line-height:1; display:grid; place-items:center; transition:.12s ease; }
.cw-req-btn.accept { color:var(--teal); border-color:var(--sage); }
.cw-req-btn.accept:hover { background:var(--sage-soft); }
.cw-req-btn.decline { color:var(--muted); }
.cw-req-btn.decline:hover { border-color:#dc2626; color:#dc2626; }
.cw-contact { display:flex; align-items:center; gap:.65rem; width:100%; border:0; background:none; text-align:left;
    cursor:pointer; padding:.45rem .6rem; border-radius:12px; font:inherit; color:var(--ink); transition:background .12s; }
.cw-contact:hover { background:var(--sage-soft); }
.cw-contact-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); }
.cw-contact.has-unread .cw-contact-name { font-weight:700; }
.cw-contact-badge { flex:0 0 auto; background:#dc2626; color:#fff; border-radius:999px; font-size:.68rem;
    min-width:1.4em; text-align:center; padding:.1em .45em; font-weight:700; line-height:1.3; }
.cw-dot { width:9px; height:9px; border-radius:50%; background:var(--line-2); flex-shrink:0; }
.cw-dot.on { background:var(--ok); }
.cw-mini { font-size:var(--fs-xs); color:var(--muted); }
.cw-toolbar { padding:.55rem .8rem; border-top:1px solid var(--line); background:var(--paper-2);
    display:flex; gap:.4rem; align-items:center; justify-content:space-between; }

/* Chat-popups (stakkes til venstre for docken) */
.cw-popups { position:fixed; right:16px; bottom:78px; z-index:1400; display:flex; gap:.7rem; align-items:flex-end; pointer-events:none; }
#chat-widget:has(.cw-contacts.open) ~ .cw-popups { right:352px; bottom:16px; }
.cw-pop { pointer-events:auto; width:380px; height:min(560px,78vh); background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius) var(--radius) 0 0; box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
    overflow:hidden; animation:pop .18s ease; }
.cw-pop-head { background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; padding:.55rem .7rem;
    display:flex; align-items:center; gap:.55rem; }
.cw-pop-head .cw-av { width:28px; height:28px; font-size:.75rem; box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.cw-pop-head strong, .cw-pop-title { font-size:var(--fs-sm); flex:1; min-width:0; }
.cw-pop-title { color:#fff; font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-pop-title:hover { color:#fff; text-decoration:underline; }
.cw-pop-head button { background:rgba(255,255,255,.14); border:0; color:#fff; cursor:pointer; font-size:1rem;
    line-height:1; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; transition:background .12s; }
.cw-pop-head button:hover { background:rgba(255,255,255,.28); }
.cw-pop-body { flex:1; overflow-y:auto; padding:.8rem; display:flex; flex-direction:column; gap:.45rem; background:var(--paper-2); }
.cw-pop-input { display:flex; gap:.45rem; padding:.6rem; border-top:1px solid var(--line); background:var(--paper); }
.cw-pop-input input { flex:1; border-radius:var(--radius-pill); padding-left:1rem; }
.cw-pop-input .btn { border-radius:var(--radius-pill); }
.cw-bubble { max-width:80%; padding:.5em .85em; border-radius:16px; font-size:var(--fs-sm); box-shadow:var(--shadow-sm); overflow-wrap:break-word; }
.cw-bubble.them { background:var(--paper); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; }
.cw-bubble.me { background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.cw-bubble .who { font-size:var(--fs-xs); color:var(--muted); margin-bottom:.15rem; font-weight:600; }
@media (max-width:520px) {
    .cw-pop { width:calc(100vw - 24px); height:70vh; }
    .cw-popups { right:12px; left:12px; }
}
@media (max-width:640px) {
    .cw-dock { right:12px; bottom:12px; }
    .cw-launcher { gap:0; padding:0; width:52px; height:52px; border-radius:50%; justify-content:center; }
    .cw-launcher-label { display:none; }
    .cw-launcher svg { width:22px; height:22px; }
    .cw-badge.has-unread { position:absolute; top:-3px; right:-3px; }
    .cw-contacts { right:12px; left:12px; width:auto; }
}

/* ============================================================
   Responsivt
   ============================================================ */
/* Konto-sektionen i sidebaren er kun til mobil/tablet (desktop har header-actions).
   Base-reglen SKAL stå før media-queries, ellers vinder den over display:flex. */
.side-account { display:none; }
@media (max-width:1024px) {
    :root { --ic-btn:50px; --ic-size:26px; }
    .map-wrap { grid-template-columns:1fr; }
    .price-grid { grid-template-columns:1fr; max-width:440px; }
    .price-card.featured { order:-1; }

    /* Header bliver kompakt: skjul knap-rækken og skift til hamburger-menu,
       så header-indholdet aldrig flyder over på tablets/mindre skærme. */
    .header-actions { display:none; }
    .menu-toggle { display:flex; }
    .brand-text { display:none; }

    /* sidebar bliver off-canvas */
    .sidebar {
        position:fixed; top:var(--header-h); left:0; z-index:900; height:calc(100vh - var(--header-h));
        width:280px; background:var(--paper); transform:translateX(-105%); transition:transform .25s ease;
        box-shadow:var(--shadow-lg);
    }
    .sidebar.open { transform:translateX(0); }
    .sidebar-scrim { position:fixed; inset:var(--header-h) 0 0 0; z-index:800; background:rgba(31,72,69,.35); }
    .sidebar-scrim[hidden] { display:none; }
    /* Konto-handlinger i sidebaren erstatter de skjulte header-actions. */
    .side-account { display:flex; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
}
@media (max-width:860px) {
    html, body { overflow-x:clip; }
    /* Ikonrækken er bredere end skærmen — den scroller i sig selv i stedet for
       at skubbe hele siden bredere (usynlig scrollbar, ikonerne beholder størrelsen). */
    .top-icons { gap:0; flex:1 1 auto; min-width:0; overflow-x:auto;
        scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .top-icons::-webkit-scrollbar { display:none; }
    .icon-btn { flex:0 0 auto; }
    .header-inner { gap:.5rem; }
    .menu-toggle, .brand, .notif-dropdown { flex-shrink:0; }
    :root { --ic-btn:46px; --ic-size:25px; }
    .grid-2, .grid-3, .grid-split, .grid-split.wide { grid-template-columns:minmax(0,1fr); }
    .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .form-grid { grid-template-columns:minmax(0,1fr); }
    /* File-inputs har bred intrinsic størrelse ("Der er ikke valgt nogen fil") — må aldrig
       skubbe layoutet ud over skærmen. */
    input[type="file"] { min-width:0; max-width:100%; }
    /* Chat på mobil: venneliste vises som en panel-drawer i toppen (ikke skjult),
       så man stadig kan vælge en samtale. */
    .chat-shell { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:calc(100vh - var(--header-h) - 140px); min-height:480px; }
    .chat-rooms { border-right:0; border-bottom:1px solid var(--line); max-height:32vh; overflow-y:auto; }
    .note-grid { columns:1; }
    .footer-cols { grid-template-columns:1fr; gap:1.2rem; }
    /* Admin-tabeller: gør sidescroll tydelig på telefon. */
    .table-wrap { -webkit-overflow-scrolling:touch; }
    table.data { min-width:480px; }
}
@media (max-width:520px) {
    :root { --ic-btn:40px; --ic-size:22px; }
    .icon-btn { border-radius:12px; }
    .hero { padding:1.6rem; }
    .toggle-row { flex-direction:column; }
}

/* ---------- Aktivitets-kort med billede (offentlig /Activities) ---------- */
.act-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr)); }
.act-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.act-media { position:relative; aspect-ratio:5/3; overflow:hidden; }
.act-media img { width:100%; height:100%; object-fit:cover; display:block; }
/* Intet billede endnu → rolig teal-gradient med aktivitetens forbogstav. */
.act-media-fallback { display:grid; place-items:center;
    background:linear-gradient(135deg,var(--sage) 0%,var(--teal) 70%,var(--teal-dark,#24544f) 100%); }
.act-media-fallback > span { font-family:var(--font-display); font-size:3.4rem; color:rgba(255,255,255,.85); }
.act-joined { position:absolute; top:.7rem; right:.7rem; box-shadow:var(--shadow-sm); }
.act-body { padding:1.1rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.act-body > form:last-child, .act-body > a.btn:last-child { margin-top:auto; }
.act-body form { margin-top:auto; }

/* ---------- Medarbejderpanel: dagens bånd + sektioner (redesign) ----------
   Signatur: et dybt teal "dagens bånd" øverst på Overblik — samme identitet som
   forsidens hero (gradient + Fraunces + guld-accent), men roligt og uden video. */
.emp-hero { position:relative; border-radius:24px; overflow:hidden; color:#f6f4ef;
    background:linear-gradient(135deg,#2f6f6b 0%,#24544f 55%,#1d443f 100%);
    padding:clamp(1.4rem,2.5vw,2.4rem); margin-bottom:1.6rem;
    display:flex; gap:2rem; flex-wrap:wrap; align-items:stretch; justify-content:space-between; }
.emp-hero-left { display:flex; flex-direction:column; gap:.35rem; min-width:min(300px,100%); }
.emp-hero .emp-date { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em;
    color:rgba(246,244,239,.7); }
.emp-hero h1 { color:#fff; margin:0; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.15; }
.emp-hero .emp-role { color:rgba(246,244,239,.85); font-size:var(--fs-sm); margin:0; }
/* Næste samtale — dagens vigtigste information, fremhævet med guld. */
.emp-next { margin-top:auto; padding:.65rem .9rem .65rem 1rem; border-left:3px solid var(--accent,#d9a94e);
    background:rgba(246,244,239,.08); border-radius:0 12px 12px 0; font-size:var(--fs-sm);
    display:inline-flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; max-width:max-content; }
.emp-next strong { color:#f0c98a; font-family:var(--font-display); font-size:1.05rem; }
.emp-hero-right { display:flex; flex-direction:column; gap:.9rem; align-items:flex-end;
    justify-content:space-between; flex:1 1 340px; min-width:min(300px,100%); }
.emp-hero-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.6rem; width:100%; }
.emp-stat { background:rgba(246,244,239,.09); border:1px solid rgba(246,244,239,.14);
    border-radius:14px; padding:.7rem .8rem .6rem; text-align:center; }
.emp-stat strong { display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1.1; color:#fff; }
.emp-stat span { display:block; margin-top:.15rem; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.06em; color:rgba(246,244,239,.7); }
.emp-hero .btn-ghost { color:#fff; border-color:rgba(255,255,255,.45); }
.emp-hero .btn-ghost:hover { background:rgba(255,255,255,.12); }
@media (max-width:860px) {
    .emp-hero { gap:1.2rem; }
    .emp-hero-right { align-items:stretch; }
    .emp-hero-right form { align-self:flex-start; }
}

/* Ensartet sektions-hoved i panelet: titel til venstre, handlinger til højre. */
.emp-section-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
    gap:.5rem; margin-bottom:.4rem; }
.emp-section-head h3 { margin:0; }

/* Simple rækker (dagens program, anmeldelser) — afløser inline border-bottom-styles. */
.emp-list { display:flex; flex-direction:column; }
.emp-row { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; padding:.6rem 0;
    border-bottom:1px solid var(--line); }
.emp-row:last-child { border-bottom:0; }
.emp-row-time { font-family:var(--font-display); font-weight:700; color:var(--teal-700); flex-shrink:0; }
.emp-row .muted { font-size:.85rem; }

/* Mine brugere: udfoldelige forløb med historik + private noter. */
.emp-user-list { display:flex; flex-direction:column; gap:.8rem; }
.emp-user > summary { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; cursor:pointer; list-style:none; }
.emp-user > summary::-webkit-details-marker { display:none; }
.emp-user > summary::before { content:"▸"; color:var(--sage); flex-shrink:0; transition:transform .15s ease; }
.emp-user[open] > summary::before { transform:rotate(90deg); }
.emp-user-next { margin-left:auto; font-size:var(--fs-xs); }
.emp-user-write { flex-shrink:0; }
/* Privat note — kun for medarbejderens øjne; markeres tydeligt anderledes end brugerens tekst. */
.emp-private-note { background:var(--sage-soft); border-left:3px solid var(--teal);
    padding:.35rem .6rem; border-radius:0 8px 8px 0; margin-top:.25rem; font-size:var(--fs-sm); }
@media (prefers-reduced-motion:reduce) { .emp-user > summary::before { transition:none; } }

/* ---------- Medarbejder-panel: booking-kort ---------- */
.mbk-group { margin-bottom:1.6rem; }
.mbk-group-head { font-family:var(--font-display); font-size:1.15rem; margin-bottom:.8rem; display:flex; align-items:baseline; gap:.5rem; }
.mbk-group-head span { font-size:.85rem; font-weight:400; color:#fff; background:var(--teal); border-radius:999px;
    padding:.05em .6em; }
/* Afholdte samtaler uden gennemført/udeblevet-markering — må ikke kunne overses. */
.mbk-group-attention { border:1px solid #f0e0c8; border-radius:var(--radius);
    padding:.9rem 1rem .7rem; background:#fbf3e8; }
.mbk-group-attention .mbk-group-head span { background:#96682b; }
.mbk-list { display:flex; flex-direction:column; gap:.7rem; }

/* Ét booking-kort: farvet statuskant til venstre + dato / info / handlinger på én linje. */
.mbk { background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--line-2);
    border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:.15s ease; }
.mbk:hover { box-shadow:var(--shadow); border-color:var(--sage); }
.mbk.is-confirmed { border-left-color:var(--teal-700); }
.mbk.is-pending   { border-left-color:var(--accent); }
.mbk.is-done      { border-left-color:color-mix(in srgb, var(--teal-700) 45%, #fff); }
.mbk.is-cancelled { border-left-color:#d9b6b6; }
.mbk.is-cancelled .mbk-date, .mbk.is-cancelled .mbk-name { opacity:.7; }

.mbk-top { display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; }
.mbk-date { flex:0 0 66px; text-align:center; background:var(--paper-2); border:1px solid var(--line);
    border-radius:10px; padding:.4rem .3rem; }
.mbk-date .dw { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); line-height:1.3; }
.mbk-date .tm { display:block; font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--teal-700); line-height:1.15; }
.mbk-info { flex:1; min-width:0; }
.mbk-name-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.mbk-name { font-size:1.02rem; }
.mbk-note { margin:.35rem 0 0; font-size:var(--fs-sm); color:var(--ink-soft); font-style:italic; }
.mbk-actions { flex:0 0 auto; display:flex; gap:.4rem; align-items:center; }
.mbk-status-form { display:flex; gap:.4rem; }

/* Bundlinje: sekundære værktøjer (flyt tid / privat note) — ens justeret, diskret. */
.mbk-foot { display:flex; gap:1.4rem; flex-wrap:wrap; align-items:flex-start;
    padding:.5rem 1.1rem .7rem calc(66px + 1rem + 1.1rem); border-top:1px solid var(--line); background:var(--paper-2); }
.mbk-tool { min-width:0; }
.mbk-tool > summary { cursor:pointer; font-size:.85rem; font-weight:500; color:var(--muted); list-style:none;
    padding:.15rem 0; white-space:nowrap; }
.mbk-tool > summary::-webkit-details-marker { display:none; }
.mbk-tool > summary::before { content:"✎ "; opacity:.6; }
.mbk-tool > summary:hover { color:var(--teal-dark); }
.mbk-tool-form { display:flex; gap:.5rem; align-items:end; margin-top:.5rem; flex-wrap:wrap; }
.mbk-tool-form textarea { flex:1; min-width:220px; }

.bk-history-more { margin-top:.7rem; }
.bk-history-more > summary { cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--teal-dark);
    list-style:none; padding:.5rem .8rem; background:var(--paper); border:1px solid var(--line); border-radius:10px;
    display:inline-block; }
.bk-history-more > summary::-webkit-details-marker { display:none; }
.bk-history-more > summary::before { content:"▸ "; color:var(--muted); }
.bk-history-more[open] > summary::before { content:"▾ "; }
.bk-history-more > summary:hover { border-color:var(--sage); color:var(--teal); }

@media (max-width:620px) {
    .mbk-top { flex-wrap:wrap; }
    .mbk-actions { width:100%; justify-content:flex-start; padding-left:calc(66px + 1rem); }
    .mbk-foot { padding-left:1.1rem; }
}

/* ---------- Kollega-vælger (kalender) ---------- */
.kal-picker { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; margin-top:1rem;
    background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-pill);
    padding:.4rem .5rem .4rem 1rem; max-width:100%; }
.kal-picker-label { font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.kal-search { display:flex; align-items:center; gap:.45rem; background:var(--paper); border:1px solid var(--line-2);
    border-radius:var(--radius-pill); padding:.45em .85em; transition:.15s ease; }
.kal-search svg { color:var(--muted); flex-shrink:0; }
.kal-search input { border:0; background:none; font:inherit; font-size:var(--fs-sm); color:var(--ink);
    outline:none; width:140px; min-width:0; }
.kal-search input::-webkit-search-cancel-button { cursor:pointer; }
.kal-search:focus-within { border-color:var(--teal); box-shadow:0 0 0 3px var(--sage-soft); }
.kal-select { position:relative; display:flex; align-items:center; }
.kal-select select { appearance:none; -webkit-appearance:none; font:inherit; font-size:var(--fs-sm); font-weight:500;
    padding:.55em 2.4em .55em 1em; border:1px solid var(--line-2); border-radius:var(--radius-pill);
    background:var(--paper); color:var(--ink); cursor:pointer; outline:none; transition:.15s ease; max-width:230px;
    text-overflow:ellipsis; }
.kal-select select:hover { border-color:var(--sage); }
.kal-select select:focus { border-color:var(--teal); box-shadow:0 0 0 3px var(--sage-soft); }
.kal-select::after { content:""; position:absolute; right:1.05em; top:50%; width:.5em; height:.5em; pointer-events:none;
    border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); }

/* ---------- Medarbejder-panel: uge-kalender ---------- */
.week-cal { --wc-row:2.3rem; --wc-rows:17; --wc-days:7;
    display:grid; grid-template-columns:3.2rem repeat(var(--wc-days),1fr); gap:3px; overflow-x:auto; }
.week-cal .wc-head { height:1.9rem; display:flex; align-items:center; justify-content:center;
    font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.wc-today .wc-head { color:#fff; background:var(--teal-700); border-radius:8px; }
.wc-weekend .wc-head { color:var(--muted); }
.wc-times-body { display:grid; grid-template-rows:repeat(var(--wc-rows),var(--wc-row)); grid-auto-rows:0;
    padding-bottom:.7em; }
.wc-times-body span { font-size:.68rem; color:var(--muted); text-align:right; padding-right:.35rem;
    transform:translateY(-.5em); }
.wc-body { display:grid; grid-template-rows:repeat(var(--wc-rows),var(--wc-row)); position:relative; border-radius:8px;
    background:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--wc-row) - 1px),
        var(--line) calc(var(--wc-row) - 1px), var(--line) var(--wc-row));
    border:1px solid var(--line); background-color:#fff; }
.wc-weekend .wc-body { background-color:color-mix(in srgb, var(--line) 18%, #fff); }
.wc-today .wc-body { border-color:var(--teal-700); box-shadow:0 0 0 1px var(--teal-700);
    background-color:color-mix(in srgb, var(--sage-soft) 25%, #fff); }
.wc-body > * { grid-column:1; margin:0 2px; border-radius:6px; }
.wc-now { position:absolute; left:0; right:0; margin:0; height:0; border-top:2px solid #d0654f;
    z-index:4; pointer-events:none; border-radius:0; }
/* Aktiviteter i kalenderen (vaert/tilmeldt) - guld-accent saa de skiller sig fra bookinger. */
.wc-activity { background:#faf3e4; border:1px solid var(--accent,#d9a94e); border-left:4px solid var(--accent,#d9a94e);
    padding:.15rem .35rem; font-size:.68rem; line-height:1.25; overflow:hidden; z-index:2; color:var(--ink); }
.wc-activity strong { display:block; font-size:.7rem; }
html[data-theme="dark"] .wc-activity { background:color-mix(in srgb, var(--accent,#d9a94e) 18%, var(--paper)); }
.wc-now::before { content:""; position:absolute; left:-1px; top:-4px; width:6px; height:6px;
    border-radius:50%; background:#d0654f; }
.wc-avail { background:color-mix(in srgb, var(--sage-soft) 70%, transparent); }
.wc-off { z-index:3; opacity:.55; background:repeating-linear-gradient(45deg,
    #f1dede 0, #f1dede 6px, transparent 6px, transparent 12px); border:1px dashed #c99; }
.wc-book { z-index:2; overflow:hidden; font-size:.68rem; line-height:1.3; padding:.2rem .35rem;
    background:var(--teal-700); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.wc-book .wc-book-name { display:block; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wc-book.wc-pending_payment { background:#fff; color:var(--ink-soft); border:1.5px dashed var(--teal-700); box-shadow:none; }
.wc-book.wc-completed { background:color-mix(in srgb, var(--teal-700) 45%, #fff); }
.wc-legend { display:inline-block; width:.9em; height:.9em; border-radius:3px; vertical-align:-.1em; }
.wc-legend-avail { background:var(--sage-soft); border:1px solid var(--line); }
.wc-legend-book { background:var(--teal-700); }
.wc-legend-pending { border:1.5px dashed var(--teal-700); }
.wc-legend-off { background:repeating-linear-gradient(45deg,#f1dede 0,#f1dede 3px,transparent 3px,transparent 6px); border:1px dashed #c99; }

/* ---------- Panel (medarbejder/admin) mobil ---------- */
.panel-brand-suffix { color:var(--muted); font-weight:400; }
.panel-brand > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:720px) {
    .panel-header { gap:.5rem; padding:0 14px; }
    .panel-brand { font-size:1.02rem; min-width:0; }
    .panel-brand-suffix { display:none; }
    .panel-hide-sm { display:none; }
    .panel-actions { gap:.3rem; flex-shrink:0; }
    .panel-actions .btn-sm { padding:.4em .7em; }
    .panel-main { padding:1rem .8rem; }
    /* Medarbejder/admin-fanerne: én swipe-bar række i stedet for at wrappe til flere linjer. */
    .admin-nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .admin-nav > a, .admin-nav-title { white-space:nowrap; flex:0 0 auto; }
    /* Uge-kalender: giv dagene læsbar min-bredde og lad det scrolle vandret. */
    .week-cal { grid-template-columns:2.5rem repeat(var(--wc-days,7), minmax(78px, 1fr)); }
}

/* ============================================================
   FORSIDE-DESIGN & ANIMATIONER (flettet ind fra site-v2.css)
   Scroll-/mask-reveal bruges på alle sider via animations.js;
   v3-hero/marquee/stats/band + vm-kortene bruges af forsiden.
   ============================================================ */


/* ---------- Scroll-reveal + mask-reveal ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; }
.mask { display:block; overflow:hidden; padding-bottom:.08em; }
.mask > * { display:block; transform:translateY(110%); transition:transform 1s cubic-bezier(.22,1,.36,1); }
.mask.in > * { transform:none; }
.mask.d1 > * { transition-delay:.1s; }
@media (prefers-reduced-motion:reduce) { .reveal,.mask>* { opacity:1; transform:none; } }

/* ---------- Animeret teal-hero med baggrunds-video ---------- */
.v3-hero { position:relative; border-radius:24px; overflow:hidden; min-height:min(82vh,660px);
    display:flex; align-items:center; color:#fff; padding:clamp(2rem,5vw,4rem); margin-bottom:2rem;
    /* Fallback-baggrund: heroen ser rigtig ud selv hvis videoen mangler/fejler eller er slået fra. */
    background:linear-gradient(135deg,#2f6f6b 0%,#24544f 55%,#1d443f 100%); }
.v3-hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; will-change:transform; }
.v3-hero .v3-ov { position:absolute; inset:0; z-index:0;
    background:linear-gradient(120deg,rgba(31,72,69,.90),rgba(47,111,107,.60) 65%,rgba(127,169,155,.40)); }
.v3-hero .v3-ov::after { content:""; position:absolute; inset:0; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.v3-hero .inner { position:relative; z-index:1; max-width:42ch; }
.v3-hero .eyebrow { color:var(--accent); }
.v3-hero h1 { color:#fff; font-size:clamp(2.4rem,5.2vw,4rem); margin:1rem 0 1.2rem; }
.v3-hero h1 .em { font-style:italic; color:#f0c98a; }
.v3-hero p.lead { color:rgba(255,255,255,.92); font-size:clamp(1.1rem,1.7vw,1.32rem); }
.v3-hero .hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.v3-hero .btn-ghost { color:#fff; border-color:rgba(255,255,255,.5); }
.v3-hero .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:#fff; }
.v3-hero .hero-quote { margin-top:2rem; padding-left:1.2rem; border-left:2px solid var(--accent);
    color:rgba(255,255,255,.95); text-shadow:0 1px 8px rgba(0,0,0,.25);
    font-family:var(--font-display); font-style:italic; font-size:clamp(1.12rem,1.9vw,1.45rem); max-width:38ch; }
@media (max-width:640px) {
    .v3-hero { padding:1.9rem 1.3rem; min-height:auto; align-items:flex-start; border-radius:20px; }
    .v3-hero .inner { max-width:100%; }
    .v3-hero h1 { margin:.7rem 0 .9rem; }
    .v3-hero .hero-quote { margin-top:1.5rem; max-width:100%; }
}

/* ---------- Marquee ---------- */
.v3-marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--paper); border-radius:14px; padding:1rem 0; margin-bottom:2.4rem; }
.v3-marquee-track { display:flex; width:max-content; white-space:nowrap; animation:marq3 34s linear infinite; }
.v3-marquee:hover .v3-marquee-track { animation-play-state:paused; }
.v3-marquee-track > span { font-family:var(--font-display); font-size:1.35rem; color:var(--ink-soft); display:inline-flex; align-items:center; }
.v3-marquee-track .sep { color:var(--accent); margin:0 1.3rem; }
@keyframes marq3 { to { transform:translateX(-50%); } }

/* ---------- Vision & mission ---------- */
.vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.vm-card { padding:2rem; border-top:3px solid var(--accent); }
.vm-badge { display:inline-block; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
    color:var(--teal); background:var(--sage-soft); border-radius:999px; padding:.35em 1em; margin-bottom:1rem; }
.vm-card h3 { font-family:var(--font-display); font-size:var(--fs-h3); margin-bottom:.6rem; }
.vm-card p { margin-bottom:0; }
@media (max-width:860px) { .vm-grid { grid-template-columns:1fr; } }

/* ---------- Tæller-stats ---------- */
.v3-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.v3-stat { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; text-align:center; box-shadow:var(--shadow-sm); }
.v3-stat .num { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3rem); color:var(--teal); line-height:1; }
.v3-stat .num .suf { color:var(--accent); }
.v3-stat .lbl { color:var(--muted); font-size:var(--fs-sm); margin-top:.5rem; }

/* ---------- Fuldbredde teal video-band ---------- */
.v3-band { position:relative; border-radius:20px; overflow:hidden; min-height:54vh; display:flex; align-items:center;
    color:#fff; padding:clamp(2rem,5vw,3.5rem); }
.v3-band video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; will-change:transform; }
.v3-band .v3-ov { position:absolute; inset:0; z-index:0;
    background:linear-gradient(90deg,rgba(31,72,69,.92),rgba(47,111,107,.55) 70%,rgba(127,169,155,.3)); }
.v3-band .inner { position:relative; z-index:1; max-width:46ch; }
.v3-band h2 { color:#fff; font-size:clamp(1.8rem,4vw,3rem); margin-bottom:1rem; }
.v3-band .eyebrow { color:var(--accent); }
.v3-band p { color:rgba(255,255,255,.92); }

/* ---------- Responsivt ---------- */
@media (max-width:860px) {
    .v3-stats { grid-template-columns:repeat(2,1fr); }
}