:root { --bg:#f6f4ef; --card:#fff; --ink:#22303c; --muted:#6b7680; --line:#e4e0d6; --accent:#2f6f5e; --accent2:#e9f2ee; --danger:#b3423a; --warn:#fff5d6; }
* { box-sizing:border-box }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); line-height:1.45 }
a { color:var(--accent) }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:8px }
.topbar.admin { background:#22303c; color:#fff; border:0 }
.topbar.admin a { color:#fff }
.brand { font-weight:700; text-decoration:none; font-size:1.1rem }
.topbar nav a { margin-left:14px; text-decoration:none; font-size:.95rem }
.container { max-width:1100px; margin:0 auto; padding:20px 16px 60px }
body.admin .container { max-width:1400px }
.footer { text-align:center; color:var(--muted); font-size:.85rem; padding:20px }
h1 { font-size:1.6rem; margin:.2em 0 .5em } h2 { font-size:1.2rem; margin:1.4em 0 .5em } h3 { margin:.2em 0 .6em; font-size:1.05rem }
.lead { font-size:1.05rem } .muted { color:var(--muted) } .small { font-size:.85rem } .err { color:var(--danger) } .ok { color:var(--accent) }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:14px }
.flash { background:var(--accent2); border:1px solid #cfe3da; padding:10px 14px; border-radius:8px; margin-bottom:14px }
.error { background:#fbe9e7; border:1px solid #f0c4bf; padding:10px 14px; border-radius:8px; margin-bottom:14px }
.warn { background:var(--warn); border:1px solid #f0dfa0; padding:8px 12px; border-radius:8px; margin-bottom:8px }
.services { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px }
.service { text-decoration:none; color:inherit; display:block } .service:hover { border-color:var(--accent) }
.service p { margin:.3em 0; color:var(--muted); font-size:.92rem }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle }
.hours td { padding:2px 14px 2px 0 }
.crumbs { color:var(--muted); font-size:.9rem }
.cal-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:14px }
@media (max-width:760px) { .cal-wrap { grid-template-columns:1fr } }
.month-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px } .month-head a { text-decoration:none; font-size:1.4rem; padding:0 10px }
.month-grid { width:100%; border-collapse:collapse; text-align:center } .month-grid th { font-weight:500; color:var(--muted); font-size:.8rem; padding:4px }
.month-grid td { padding:2px }
.day { display:block; padding:8px 0; border-radius:8px; text-decoration:none } a.day { background:var(--accent2); color:var(--accent); font-weight:600 } a.day:hover, a.day.sel { background:var(--accent); color:#fff } .day.off { color:#c3c0b8 }
.slot-list { display:flex; flex-wrap:wrap; gap:8px }
.slot { display:inline-block; padding:8px 14px; border:1px solid var(--accent); border-radius:8px; text-decoration:none; font-weight:600 } .slot:hover { background:var(--accent); color:#fff } .slot.small { padding:2px 8px; font-weight:500 }
.form label { display:block; margin-bottom:10px; font-size:.92rem } .form input[type=color] { width:60px; height:34px; padding:2px; border:1px solid #cfcac0; border-radius:6px; display:block; margin-top:3px }
.form input:not([type=checkbox]):not([type=color]), .form select, .form textarea { display:block; width:100%; padding:8px 10px; border:1px solid #cfcac0; border-radius:6px; font:inherit; margin-top:3px }
.form label.check { display:flex; align-items:center; gap:8px } .form label.check input { width:auto }
.form small { display:block; margin-top:2px }
.form.narrow { max-width:420px }
.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; align-items:end }
.btn { display:inline-block; padding:8px 14px; border:1px solid var(--accent); color:var(--accent); background:#fff; border-radius:8px; text-decoration:none; font:inherit; cursor:pointer }
.btn.primary { background:var(--accent); color:#fff } .btn.danger { border-color:var(--danger); color:var(--danger) } .btn.small { padding:3px 8px; font-size:.85rem }
.terms { background:#faf8f3; padding:10px 12px; border-radius:8px; margin:10px 0 } .terms p { font-size:.9rem; margin:.3em 0 .6em }
.table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px } .table td, .table th { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top } .table th { font-size:.85rem; color:var(--muted) }
.table.small td { padding:4px 8px; font-size:.85rem }
.row { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit } .row:last-child { border:0 }
.list .card.row { padding:12px 16px }
.tag { font-size:.8rem; color:var(--muted) }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:14px }
.bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px }
.filters { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap } .filters input, .filters select { padding:7px 10px; border:1px solid #cfcac0; border-radius:6px; font:inherit }
.inline { display:inline-block; margin:4px 8px 4px 0 } .inline input, .inline select { padding:6px 8px; border:1px solid #cfcac0; border-radius:6px; font:inherit }
.service-row.inactive { opacity:.55 }
.pinned { background:var(--warn); padding:6px 10px; border-radius:6px }
.toc { font-size:.9rem }
details summary { cursor:pointer; font-weight:600; margin:8px 0 }
code { background:#eee; padding:1px 5px; border-radius:4px }
/* ugekalender */
.week { display:grid; grid-template-columns:44px repeat(7, 1fr); gap:4px; overflow-x:auto }
.timecol .hour { height:48px; font-size:.75rem; color:var(--muted); text-align:right; padding-right:4px; margin-top:0 }
.timecol { padding-top:54px }
.daycol.today .dayhead { background:var(--accent2) }
.dayhead { text-align:center; font-size:.85rem; padding:4px; border-radius:6px; height:54px } .dayhead a { text-decoration:none; font-weight:600 }
.daybody { position:relative; background:#fff; border:1px solid var(--line); border-radius:6px }
.hline { position:absolute; left:0; right:0; border-top:1px solid #f0ede6 }
.ev { position:absolute; left:2px; right:2px; color:#fff; border-radius:5px; padding:2px 5px; font-size:.75rem; overflow:hidden; text-decoration:none; line-height:1.2 }
.ev.blocked { background:repeating-linear-gradient(45deg,#ddd,#ddd 6px,#eee 6px,#eee 12px); color:#555 } .ev.google { background:#f3e7c9; color:#6b5a1e }
.chip { display:inline-block; background:var(--accent2); color:var(--accent); border-radius:12px; padding:1px 9px; font-size:.82rem; margin:1px 0 }
.chip .x { border:0; background:none; color:var(--accent); cursor:pointer; font-size:1rem; padding:0 0 0 2px }
tr.inactive td { opacity:.55 }
.chip.paid { background:#e3f1e5; color:#2e7d32 }
.ev.paid { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5) }
.ev[data-id] { cursor:grab; touch-action:none; user-select:none }
.ev.ghost { position:fixed; z-index:50; pointer-events:none; opacity:.85; box-shadow:0 6px 18px rgba(0,0,0,.3) }
.ev.dragging { opacity:.5 }
.daybody.drop { outline:2px dashed var(--accent); outline-offset:-2px }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; margin:10px 0 }
.tile { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px } .tile b { display:block; font-size:1.5rem } .tile span { font-size:.82rem; color:var(--muted) }
.barwrap { display:inline-block; width:80px; height:8px; background:#eee; border-radius:4px; vertical-align:middle; margin-left:6px } .barfill { display:block; height:8px; background:var(--accent); border-radius:4px }
tr.total td { font-weight:700; border-top:2px solid var(--ink) }

/* ===== Offentlig bookingside: rolig luksus ===== */
body.public { --bg:#f7f3ec; --card:#fffdf9; --ink:#1f2a26; --muted:#6f7a75; --line:#e6dfd2; --accent:#1f4d3f; --accent2:#e8efe9; --gold:#b8955a; --danger:#a3433a;
  font-family:"Manrope", -apple-system, "Segoe UI", sans-serif; background:var(--bg); background-image:radial-gradient(1200px 500px at 80% -10%, #fbf7ef 0%, rgba(251,247,239,0) 60%); }
body.public h1, body.public h2, body.public h3, body.public .hero .lead, body.public .quote { font-family:"Cormorant Garamond", Georgia, serif; }
body.public h1 { font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:.1em 0 .4em }
body.public h2 { font-size:1.7rem; font-weight:500 } body.public h3 { font-size:1.35rem; font-weight:500 }
body.public .container { max-width:1040px; padding:36px 20px 80px }
.site-head { display:flex; justify-content:space-between; align-items:center; padding:22px 32px; background:transparent; border:0; max-width:1100px; margin:0 auto }
.site-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-family:"Cormorant Garamond", Georgia, serif; font-size:1.35rem; font-weight:600; letter-spacing:.02em }
.site-mark { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); font-size:1.1rem }
.site-head nav a { margin-left:26px; text-decoration:none; color:var(--ink); font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; border-bottom:1px solid transparent; padding-bottom:3px }
.site-head nav a:hover { border-color:var(--gold) }
.eyebrow { font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 .6em }
.hero { display:grid; gap:36px; align-items:center; padding:30px 0 50px }
.hero.has-image { grid-template-columns:1.1fr .9fr } @media (max-width:760px) { .hero.has-image { grid-template-columns:1fr } }
.hero .lead { font-size:1.35rem; line-height:1.5; color:#3b4642; max-width:34em; margin:0 0 1.4em }
.hero-image img { width:100%; height:100%; max-height:440px; object-fit:cover; border-radius:18px; box-shadow:0 30px 60px -30px rgba(31,42,38,.45) }
.section-title { display:flex; align-items:center; gap:16px; margin:1.6em 0 .9em } .section-title::after { content:""; flex:1; height:1px; background:var(--line) }
body.public .services { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:18px }
body.public .service { position:relative; display:flex; flex-direction:column; gap:6px; padding:26px 26px 22px; background:var(--card); border:1px solid var(--line); border-radius:16px; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease }
body.public .service:hover { transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(31,42,38,.5); border-color:var(--gold) }
body.public .service strong { font-family:"Cormorant Garamond", Georgia, serif; font-size:1.5rem; font-weight:600; line-height:1.15 }
body.public .service p { margin:.2em 0 .4em; color:var(--muted); font-size:.95rem; line-height:1.5 }
.service-num { font-size:.75rem; letter-spacing:.2em; color:var(--gold); font-weight:600 }
.service-cta { margin-top:auto; padding-top:10px; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600 }
body.public .btn { border-radius:999px; padding:12px 26px; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; font-weight:600; transition:background .2s, color .2s, transform .2s }
body.public .btn.primary { background:var(--accent); border-color:var(--accent); box-shadow:0 14px 28px -16px rgba(31,77,63,.7) } body.public .btn.primary:hover { background:#173d32; transform:translateY(-1px) }
body.public .btn.danger { background:transparent }
.center { text-align:center; margin-top:1.6em }
.quote { margin:60px auto 20px; max-width:34em; text-align:center; font-size:1.55rem; font-style:italic; line-height:1.45; color:#3b4642 } .quote::before { content:"“"; color:var(--gold); font-size:2.4rem; display:block; line-height:.4; margin-bottom:.4em }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:40px; margin-top:20px }
body.public .hours td { padding:7px 22px 7px 0; border-bottom:1px solid var(--line) } body.public .hours tr:last-child td { border:0 } body.public .hours td:first-child { color:var(--muted) }
.address { font-size:1.05rem; margin:.3em 0 } .textlink { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--gold) }
body.public .card { border-radius:16px; padding:22px; box-shadow:0 18px 40px -34px rgba(31,42,38,.4) }
body.public .crumbs { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) } body.public .crumbs a { color:var(--muted); text-decoration:none } body.public .crumbs span { margin:0 6px; color:var(--gold) }
body.public a.day { background:var(--accent2); color:var(--accent) } body.public a.day:hover, body.public a.day.sel { background:var(--accent); color:#fff }
body.public .slot { border-radius:999px; border-color:var(--line); background:var(--card); font-weight:600 } body.public .slot:hover { background:var(--accent); border-color:var(--accent); color:#fff }
body.public .month-head strong { font-family:"Cormorant Garamond", Georgia, serif; font-size:1.35rem; font-weight:600 }
body.public .form input:not([type=checkbox]):not([type=color]), body.public .form select, body.public .form textarea { padding:12px 14px; border-radius:10px; border-color:var(--line); background:#fff } body.public .form input:focus, body.public .form textarea:focus { outline:2px solid var(--accent2); border-color:var(--accent) }
body.public .terms { background:#faf6ee; border:1px solid var(--line) }
body.public .flash { background:var(--accent2); border-color:#cfe0d5 }
body.public .footer { border-top:1px solid var(--line); padding:34px 20px; margin-top:20px }
.footer-inner { display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:center; font-size:.85rem; color:var(--muted) } .footer-inner a { color:var(--muted); text-decoration:none } .footer-name { font-family:"Cormorant Garamond", Georgia, serif; font-size:1.1rem; color:var(--ink) }
.site-brand { white-space:nowrap }
@media (max-width:640px) {
  .site-head { flex-direction:column; align-items:flex-start; gap:12px; padding:18px 20px 6px }
  .site-head nav { display:flex; gap:18px } .site-head nav a { margin:0 }
  body.public .container { padding-top:20px }
  body.public h1 { font-size:2.3rem }
}
.mic { vertical-align:-2px; margin-right:2px }
.terms-page h2 { font-size:1.3rem; margin:1.4em 0 .4em; padding-top:.5em; border-top:1px solid var(--line) }
.terms-page .box { background:#faf8f3; border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:10px 0 }
.terms-page table { border-collapse:collapse; width:100%; max-width:40em } .terms-page td { padding:6px 8px 6px 0; border-bottom:1px solid var(--line); vertical-align:top } .terms-page td:last-child { white-space:nowrap; text-align:right; font-weight:600 }

input.time24 { width:6.5em; text-align:center; font-variant-numeric: tabular-nums }