/* House of Art · artcafe.dk */

:root{
  --ground:#F8E0BC;        /* cremen fra logoet */
  --surface:#FDF1DE;
  --surface-2:#F0D2A6;
  --ink:#432D1E;           /* brunen fra logoet */
  --ink-soft:#6B4F38;
  --muted:#9A7C5C;
  --line:#E4C79C;
  --line-moerk:#5E4430;
  --accent:#B4834F;
  --accent-ink:#FFF6E8;
  --paa-moerk:#F8E0BC;
  --paa-moerk-svag:#BFA283;
  --r:10px;
  --r-pille:999px;
  --nav-h:66px;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --label:'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  --body:'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:.01em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
/* Forsiden må gerne bruge mere af en stor skærm — så er der plads til
   flere værker i rækken og mere luft omkring billederne. */
.forside .wrap{max-width:1360px}
.smal{max-width:680px}
.skjult{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- fælles typografi ---------- */
.mark{display:block;color:currentColor}
.mark svg{width:100%;height:100%;display:block}
.wordmark{
  font-family:var(--display);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.15;
}
.eyebrow{
  font-family:var(--label);font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  padding:14px 30px;border-radius:var(--r-pille);text-decoration:none;
  font-family:var(--label);font-weight:500;font-size:.8rem;
  letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
  /* Bogstavafstanden lægger et mellemrum efter det sidste bogstav.
     Uden den her ville teksten stå et hår for langt til venstre. */
  text-indent:.15em;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--ground);transform:translateY(-1px)}
.btn.lille{padding:9px 20px;font-size:.7rem;letter-spacing:.13em}
.btn.kant{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.kant:hover{background:var(--ink);color:var(--ground)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- topnavigation ---------- */
.topnav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(248,224,188,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease,border-color .25s ease;
}
/* i toppen glider bjælken ind i hero'en; uden JavaScript bliver den bare stående fast */
.topnav.toppen{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.topnav .wrap{height:100%;display:flex;align-items:center;gap:20px}
.topnav .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none}
.topnav .mark{width:30px;height:30px}
.topnav .wordmark{font-size:.92rem}
.topnav nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.topnav nav a{
  font-family:var(--label);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;transition:color .18s ease;
  white-space:nowrap;
}
.topnav nav a:hover{color:var(--ink)}
.naar-smal{display:none}
/* Menupunkterne fylder mere, end der er plads til, når vinduet bliver
   smalt — de ryger ud, før noget begynder at stikke ud over kanten.
   Knapperne bliver stående, for det er dem, folk skal bruge. */
@media (max-width:1100px){
  .topnav nav a.link{display:none}
  .topnav nav{gap:14px}
}
@media (max-width:720px){
  .topnav nav{gap:8px}
  /* Den lange knaptekst er der ikke plads til på en telefon. */
  .topnav .naar-bred{display:none}
  .topnav .naar-smal{display:inline}
  .topnav nav .btn{padding-left:13px;padding-right:13px;letter-spacing:.08em}
}
/* Login skal kunne ses på en telefon — det er der, menupunkterne
   ovenfor er væk, og det er den eneste vej ind for medlemmer og
   instruktører. Bliver der for trangt, er det «Bliv medlem», der
   viger: den findes også som en stor knap længere nede på siden. */
@media (max-width:560px){
  .topnav nav .btn{padding-left:11px;padding-right:11px;font-size:.66rem;letter-spacing:.06em}
}
@media (max-width:430px){
  .topnav nav a.btn:not(.login):not([href="/butik/"]){display:none}
}
section[id]{scroll-margin-top:var(--nav-h)}

/* ---------- hero ----------
   Kalkvæg med skråt vindueslys, bygget i CSS. Navnet er ægte tekst,
   så det er skarpt i alle størrelser og kan rettes uden et billedprogram. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  /* Lav nok til at butikken kan ses uden at scrolle på en almindelig
     bærbar — men stadig høj nok til at fylde noget på en telefon. */
  min-height:clamp(360px,50vh,500px);
  display:grid;place-items:center;text-align:center;
  margin-top:calc(var(--nav-h) * -1);padding-block:calc(var(--nav-h) + 14px) 26px;
  background:linear-gradient(165deg,#FCEFD8 0%,#F8E0BC 48%,#EFCE9E 100%);
  color:var(--ink);
}
/* blødt lysfald fra højre, som sol ind ad et vindue */
.hero .lys{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(125% 95% at 74% 4%, rgba(255,249,236,.95), rgba(255,249,236,0) 58%),
    radial-gradient(90% 70% at 12% 96%, rgba(120,86,52,.16), rgba(120,86,52,0) 62%);
}
/* skrå skyggestriber fra vinduesrammen */
.hero .straaler{
  position:absolute;inset:-25%;z-index:-2;pointer-events:none;
  background:repeating-linear-gradient(103deg,
    rgba(110,78,48,0) 0px, rgba(110,78,48,0) 74px,
    rgba(110,78,48,.06) 96px, rgba(110,78,48,.06) 168px,
    rgba(110,78,48,0) 194px);
  filter:blur(16px);
}
/* fin kornstruktur, så fladen ikke ser digital ud */
.hero .korn{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
}
.hero-indhold{position:relative;padding-inline:24px;max-width:56rem;width:100%}
.mark.stor{width:clamp(42px,4.2vw,52px);height:clamp(42px,4.2vw,52px);margin:0 auto clamp(10px,1.4vw,14px)}
.hero-navn{
  font-family:var(--display);font-weight:500;margin:0;
  font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1;letter-spacing:.055em;
  text-transform:uppercase;
}
.hero-navn .l1,.hero-navn .l2{display:block}
.hero-navn .l2{line-height:1.04}
.hero-navn .of{font-size:.7em;letter-spacing:.07em}

/* keramik langs bunden af vaeggen */
.hero .gulv{
  position:absolute;left:0;right:0;bottom:0;z-index:-2;pointer-events:none;
  height:clamp(120px,22vh,230px);
  background:linear-gradient(180deg, rgba(120,86,52,0), rgba(120,86,52,.1));
}
.hero .opstilling{position:absolute;left:0;right:0;bottom:0;z-index:-2;pointer-events:none;line-height:0}
/* Keramikken står i to grupper, én ud mod hver kant. Højden følger
   skærmen, men aldrig så meget, at de to grupper rører hinanden: hver
   gruppe er 640 × 430, og tilsammen må de højst fylde hele bredden. */
.hero{container-type:inline-size}
.hero .opstilling{
  --h:clamp(230px,28vw,370px);
  height:var(--h);
  height:min(var(--h), 50cqw * 430 / 640);
}
.hero .opstilling img{position:absolute;bottom:0;height:100%;width:auto;z-index:1;display:block}
.hero .opstilling .venstre{left:0}
.hero .opstilling .hoejre{right:0}
/* Bordpladen under keramikken går hele vejen ud til kanterne — i samme
   farver og samme højde som i tegningen (58 af 430). */
.hero .opstilling::before{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;
  height:calc(100% * 58 / 430);
  background:linear-gradient(180deg,#E9CFA6,#DCBD91);
  box-shadow:inset 0 1.6px 0 rgba(246,228,198,.8);
}
.haarstreg{width:72px;height:1px;background:rgba(67,45,30,.32);margin:clamp(10px,1.4vw,14px) auto}
.hero .tagline{
  font-family:var(--label);font-size:clamp(.66rem,1.5vw,.78rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
}
.hero .manchet{
  margin:clamp(14px,1.8vw,18px) auto clamp(16px,2vw,20px);max-width:34rem;
  font-family:var(--display);font-size:clamp(1.08rem,2.1vw,1.3rem);
  color:var(--ink-soft);line-height:1.5;
}
/* På telefon: keramikken står lavt, og knapperne får plads over den. */
@media (max-width:640px){
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 30px) 150px}
  .hero .opstilling{height:124px;height:min(124px, 50cqw * 430 / 640)}
  /* Klistermærket står over to linjer på en telefon og skal have plads. */
  .hero .hero-knapper.med-maerkat{margin-top:62px}
  .hero .gulv{height:124px}
}

/* ---------- sektioner ---------- */
section{padding-block:clamp(60px,8vw,96px)}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:20px;line-height:1.18}
h3{font-size:1.2rem;margin-bottom:8px}
.brod{font-size:1.04rem;color:var(--ink-soft)}
.brod + .brod{margin-top:16px}
.to-kolonner{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:760px){.to-kolonner{grid-template-columns:minmax(0,1fr)}}

.lys-flade{background:var(--surface);border-block:1px solid var(--line)}

/* ---------- mørk medlemskabssektion ---------- */
.band-moerk{background:var(--ink);color:var(--paa-moerk)}
.band-moerk .eyebrow{color:var(--paa-moerk-svag)}
.band-moerk h2{color:var(--paa-moerk)}
.band-moerk .brod{color:#CFC2AF}
.band-moerk .medlem{
  display:grid;gap:clamp(36px,5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:center;
}
@media (max-width:820px){.band-moerk .medlem{grid-template-columns:minmax(0,1fr)}}
.pris-kort{
  background:var(--ground);color:var(--ink);
  border-radius:var(--r);padding:clamp(26px,4vw,36px);
}
.pris{font-family:var(--display);font-size:clamp(2.8rem,6vw,3.6rem);font-weight:600;line-height:1;margin-bottom:2px}
.pris small{font-family:var(--body);font-size:.9rem;font-weight:400;color:var(--muted);letter-spacing:0}
.liste{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px}
.liste li{display:flex;gap:12px;font-size:.95rem;color:var(--ink-soft);line-height:1.5}
.liste li::before{
  content:'';flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-top:.58em;
}
.pris-kort .btn{width:100%}

/* ---------- find os ---------- */
.fakta{display:grid;gap:20px}
.fakta div{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:6px 20px;align-items:baseline}
@media (max-width:520px){.fakta div{grid-template-columns:minmax(0,1fr);gap:2px}}
.fakta .n{
  font-family:var(--label);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.fakta .v{font-size:1.02rem}
.fakta a{text-decoration:none}
.fakta a:hover{text-decoration:underline}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paa-moerk-svag);padding-block:54px;font-size:.88rem}
footer a{color:#E3D6C3}
footer .rk{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer .wordmark{font-size:1rem;color:var(--paa-moerk);margin-bottom:10px}
footer .sm{color:var(--paa-moerk-svag);font-size:.83rem;line-height:1.85}
footer .band-moerk-top{border-top:1px solid var(--line-moerk)}

/* ---------- introhold ---------- */
.holdside{padding-block:clamp(34px,5vw,58px) clamp(56px,7vw,84px)}
.holdside h1{font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.15;margin-bottom:14px}
.holdside .lede{max-width:62ch}
.holdliste{display:grid;gap:18px;margin-top:34px}
.holdkort{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,28px);
}
.holdkort.fyldt{background:transparent;border-style:dashed;color:var(--muted)}
.holdkort.fyldt h2{color:var(--ink-soft)}
.afbudskort{border-left:4px solid var(--accent);margin-top:28px}
.holdhoved{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.holdkort h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0}
.holdtid{margin-top:5px;color:var(--ink-soft);font-size:.92rem}
.pladser{
  flex:0 0 auto;padding:5px 13px;border-radius:var(--r-pille);
  background:var(--surface-2);color:var(--ink-soft);
  font-family:var(--label);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
}
.pladser.ingen{background:transparent;border:1px solid var(--line);color:var(--muted)}
.holdnote{margin-top:12px;max-width:62ch}
.holdkort .fold{margin-top:18px}
.holdkort .fold > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--label);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);user-select:none;
}
.holdkort .fold > summary::-webkit-details-marker{display:none}
.holdkort .fold > summary::before{
  content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border:1px solid var(--line);border-radius:50%;
  font-size:1rem;line-height:1;background:var(--ground);
}
.holdkort .fold[open] > summary::before{content:"–"}
.holdform{display:grid;gap:14px;margin-top:20px;max-width:520px}
.holdform label{
  display:block;font-family:var(--label);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}
.holdform input,.holdform select,.holdform textarea{
  width:100%;margin-top:6px;font:inherit;color:var(--ink);background:var(--ground);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;
}
.holdform textarea{resize:vertical;min-height:62px;line-height:1.5}
.holdrk{display:flex;gap:14px;flex-wrap:wrap}
.holdrk label{flex:1 1 150px}
.holdform .btn{justify-self:start}
.holdform .fin{font-size:.8rem;color:var(--muted);max-width:52ch}
.holdfod{margin-top:38px;color:var(--ink-soft);max-width:62ch}
.kvittering,.advarsel{
  margin-top:22px;padding:15px 18px;border-radius:var(--r);
  background:var(--surface);border-left:4px solid var(--accent);max-width:62ch;
}
.advarsel{border-left-color:#A8452B}

/* ---------- betingelsesside ---------- */
.dok{padding-block:clamp(44px,6vw,72px) clamp(60px,8vw,92px)}
.dok h1{font-size:clamp(1.9rem,4.4vw,2.6rem);margin-bottom:6px}
.dok .opdateret{color:var(--muted);font-size:.86rem;margin-bottom:40px}
.dok h2{font-size:1.55rem;margin-top:56px;margin-bottom:16px;padding-top:26px;border-top:1px solid var(--line)}
.dok h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.dok h3{font-size:1.12rem;margin-top:32px;margin-bottom:8px}
.dok p{margin-top:12px;color:var(--ink-soft)}
.dok ul{margin-top:12px;padding-left:20px;color:var(--ink-soft)}
.dok li{margin-top:6px}
.dok .adresse{margin-top:12px;color:var(--ink-soft);line-height:1.9}
.dok .indhold-liste{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;margin-bottom:16px;
}
.dok .indhold-liste ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.dok .indhold-liste a{text-decoration:none}
.dok .indhold-liste a:hover{text-decoration:underline}

/* to knapper under heroens manchet. Den lyse ligger oven på keramikken
   i illustrationen, så den har brug for en svag flade bag teksten. */
.hero-knapper{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,30px)}
/* Plads over knapperne, så klistermærket ikke lægger sig oven i manchetten. */
.hero-knapper.med-maerkat{margin-top:clamp(96px,7.4vw,104px)}
.knapplads{position:relative;display:inline-flex}

/* Klistermærket: en lille taleboble med en hale, der peger ned på
   bookingknappen. Den er skrævet lidt, så den ligner noget, der er
   sat på i hånden. */
.boble{
  position:absolute;left:50%;bottom:calc(100% + 15px);
  transform:translateX(-50%) rotate(-2.5deg);
  display:block;width:max-content;max-width:min(78vw,27rem);
  padding:11px 17px 12px;border-radius:14px;
  background:var(--ink);color:var(--paa-moerk);text-align:center;
  box-shadow:0 10px 24px rgba(67,45,30,.22);
}
.boble b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1rem,1.9vw,1.18rem);line-height:1.25;
}
.boble small{
  display:block;margin-top:3px;color:var(--paa-moerk-svag);
  font-family:var(--label);font-size:.72rem;letter-spacing:.09em;
}
/* halen — en lille trekant, der peger ned mod knappen */
.boble::after{
  content:"";position:absolute;top:100%;left:50%;
  margin-left:-8px;border:9px solid transparent;
  border-top-color:var(--ink);border-bottom:0;
}
@media (max-width:640px){
  /* På en telefon er mærkatet en lille seddel på én linje — det skal
     fange øjet, ikke fylde halvdelen af skærmen. */
  .boble{max-width:calc(100vw - 48px);padding:6px 12px 7px;border-radius:10px;
    bottom:calc(100% + 10px);transform:translateX(-50%) rotate(-2deg)}
  .boble b{font-size:.84rem;line-height:1.2}
  .boble{width:max-content;max-width:calc(100% - 16px)}
  .boble::after{border-width:7px;margin-left:-7px}
}
.hero-knapper .btn.kant{background:rgba(255,249,236,.82);backdrop-filter:blur(3px)}
.hero-knapper .btn.kant:hover{background:var(--ink);color:var(--ground)}
@media (max-width:640px){
  .hero-knapper{flex-direction:column;align-items:stretch;gap:12px;padding-inline:8px;
    max-width:26rem;margin-inline:auto}
  /* Knappen med klistermærket skal være lige så bred som de andre,
     når de står under hinanden. */
  .knapplads{display:block}
  .knapplads .btn{display:flex;width:100%}
}

/* ---------- butiksbåndet på forsiden ---------- */
/* Båndet ligger lige under heroen og skal kunne ses uden at scrolle langt,
   så det holder sig kortere end de øvrige sektioner. */
.butiksband{padding-block:clamp(28px,3.6vw,46px)}
.butikshoved{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:22px;
}
.butikshoved .brod{max-width:52ch;margin-top:10px}
/* Pilene står ude i hver side, midt ud for billederne. Højden sættes af
   JavaScript, når kortene er målt — «--midt» er midten af fotoet. */
.butiksbaelte{position:relative}
.bladre{position:absolute;inset:0;pointer-events:none}
.pil{
  position:absolute;top:var(--midt,40%);transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;padding:0;cursor:pointer;pointer-events:auto;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:50%;
  box-shadow:0 6px 18px rgba(67,45,30,.18);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
}
.pil.venstre{left:-20px}
.pil.hoejre{right:-20px}
.pil svg{width:25px;height:25px;display:block}
.pil:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
/* Begge pile står fremme hele vejen rundt — rækken går i ring. */

/* Fire faste spalter, så kortene har samme størrelse, hvad enten der
   står ét eller fire værker i butikken. Rækken kan rulles til siden —
   med knapperne, med fingeren og med piletasterne. */
.butiksgitter{
  display:grid;gap:22px;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 66px)/4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 0 10px;margin:-6px 0 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.butiksgitter::-webkit-scrollbar{display:none}
.butiksgitter:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Prikkerne under rækken viser, hvor mange sider der er. */
.prikker{display:flex;justify-content:center;gap:9px;margin-top:16px}
.prikker button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background-color .18s ease,transform .18s ease;
}
.prikker button:hover{background:var(--muted)}
.prikker button[aria-current="true"]{background:var(--ink);transform:scale(1.3)}

@media (prefers-reduced-motion: reduce){.butiksgitter{scroll-behavior:auto}}
.butikskort{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;
}
.butikskort{scroll-snap-align:start}
.butikskort:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(67,45,30,.14)}
.butikskort img,.butikskort .intet{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.butikskort .intet{
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-family:var(--label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.butikskort .tekst{display:flex;flex-direction:column;gap:2px;padding:16px 18px 20px;flex:1 1 auto}
.butikskort .tekst b{font-family:var(--display);font-size:1.15rem;font-weight:600;line-height:1.25}
.butikskort .tekst small{color:var(--muted);font-size:.8rem}
.butikskort .beloeb{margin-top:auto;padding-top:8px;font-family:var(--label);font-size:.9rem;letter-spacing:.06em}
.tomhylde{max-width:52ch}

/* Kortet under adressen. Hentes fra OpenStreetMap, som hverken sætter
   cookies eller sporer den, der kigger. */
.kortramme{
  margin-top:22px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--surface-2);
}
.kortramme iframe{display:block;width:100%;height:320px;border:0}
.kortlink{margin-top:12px;font-family:var(--label);font-size:.82rem;letter-spacing:.06em}
@media (max-width:560px){.kortramme iframe{height:260px}}

@media (max-width:900px){
  .butiksgitter{grid-auto-columns:calc((100% - 22px)/2)}
}
@media (max-width:560px){
  .butikshoved{margin-bottom:26px}
  .butiksgitter{gap:16px;grid-auto-columns:calc((100% - 16px)/2)}
  .butikskort .tekst{padding:13px 14px 16px}
  .butikskort .tekst b{font-size:1rem}
  .pil{width:44px;height:44px}
  .pil svg{width:20px;height:20px}
  .pil.venstre{left:-15px}
  .pil.hoejre{right:-15px}
}
@media (max-width:420px){
  .butiksgitter{grid-auto-columns:78%}
}

.band-moerk .brod a{color:#E7D6BE}

/* ---------- instruktører ---------- */
.midterhoved{max-width:44rem;margin:0 auto clamp(34px,4vw,52px);text-align:center}
.midterhoved .brod{margin-top:14px}
.instruktoerer{
  display:grid;gap:clamp(24px,3vw,34px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){.instruktoerer{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.instruktoerer{max-width:26rem;margin-inline:auto}}
.instruktoer{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:0 clamp(20px,2.4vw,28px) clamp(22px,2.6vw,28px);
  display:flex;flex-direction:column;
}
.portraet{
  margin:0 calc(-1 * clamp(20px,2.4vw,28px)) clamp(18px,2vw,24px);
  border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--ground);
  aspect-ratio:317/466;
}
.portraet img{width:100%;height:100%;object-fit:cover;display:block}
.instruktoer .midte{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.instruktoer h3{
  font-family:var(--display);font-size:clamp(1.5rem,2.4vw,1.8rem);font-weight:600;
  letter-spacing:.01em;margin:0;
}
.instruktoer .rolle{
  font-family:var(--label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:6px 0 16px;
}
.instruktoer .brod{font-size:.98rem}
/* Mærkaterne sidder i bunden af kortet, også når teksterne er
   forskelligt lange — så står de tre kort på linje. */
.fokus{
  list-style:none;margin:auto 0 0;padding:22px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px;
}
.fokus li{
  font-family:var(--label);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--ground);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;
}
/* På en tablet er der ikke plads til tre kort ved siden af hinanden,
   og to gør det tredje ensomt. Der lægger vi dem i stedet ned: foto til
   venstre, tekst til højre. */
@media (max-width:900px) and (min-width:601px){
  .instruktoer{flex-direction:row;gap:clamp(22px,3vw,30px);padding:0 clamp(22px,2.6vw,28px) 0 0}
  .portraet{
    margin:0;flex:none;width:min(38%,15rem);
    border-radius:var(--r) 0 0 var(--r);aspect-ratio:auto;
  }
  .instruktoer .midte{padding:clamp(22px,3vw,28px) 0}
}

.holdlinje{
  text-align:center;margin-top:clamp(30px,3.5vw,44px);
  font-family:var(--label);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}

/* ---------- caféens bordbestilling ---------- */
.cafedage{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(26px,3vw,36px)}
.cafedag{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,30px);
}
.cafedag.fyldt{opacity:.72}
.cafeform{margin-top:20px}
.timer{border:0;padding:0;margin:0 0 22px}
.timer legend{
  font-family:var(--label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:0;margin-bottom:12px;
}
.timer{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.timer legend{grid-column:1/-1}
.time{
  display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--ground);
  padding:9px 14px;min-width:86px;transition:border-color .15s ease,background .15s ease;
}
.time input{position:absolute;opacity:0;width:0;height:0}
.time .kl{font-family:var(--display);font-size:1.22rem;font-weight:600;line-height:1.1}
.time .til{
  font-family:var(--label);font-size:.66rem;letter-spacing:.06em;color:var(--muted);
  margin-top:-1px;
}
.time:has(input:checked) .til,.time.valgt .til{color:rgba(255,246,232,.82)}
.time .fri{
  font-family:var(--label);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.time:hover{border-color:var(--accent)}
/* Den valgte time. Klassen sættes af et lille stykke JavaScript, så
   det også virker i en browser uden :has(). */
.time:has(input:checked),.time.valgt{background:var(--accent);border-color:var(--accent);color:var(--paa-moerk)}
.time:has(input:checked) .fri,.time.valgt .fri{color:rgba(255,246,232,.82)}
.time:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.time.optaget{opacity:.45;cursor:not-allowed}
/* Klippekort: hvor mange kommer I? */
.antalvalg{border:0;padding:0;margin:0 0 22px}
.antalvalg legend{font-family:var(--label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:12px}
.antalknapper{display:flex;flex-wrap:wrap;gap:8px}
.antalknapper label{cursor:pointer}
.antalknapper input{position:absolute;opacity:0;width:0;height:0}
.antalknapper span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--ground);
  font-family:var(--display);font-size:1.25rem;font-weight:600;transition:border-color .15s ease,background .15s ease}
.antalknapper label:hover span{border-color:var(--accent)}
.antalknapper input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--paa-moerk)}
.antalknapper input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.antalvalg .fin{margin-top:10px}
.time.optaget:hover{border-color:var(--line)}
.cafefelter{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.cafefelter{grid-template-columns:minmax(0,1fr)}}
.cafefelter label,.holdform label{
  display:grid;gap:6px;font-family:var(--label);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.cafefelter input,.cafefelter select{
  font:1rem/1.4 var(--body);color:var(--ink);background:var(--ground);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;width:100%;
}
.cafefelter input:focus,.cafefelter select:focus{outline:2px solid var(--accent);outline-offset:1px}
.cafefelter .bredfelt{grid-column:1/-1}
.cafefelter .smalfelt select{max-width:9rem}
.valgfrit{text-transform:none;letter-spacing:.02em;color:var(--muted)}
.cafeform .btn{margin-top:20px}
.cafeform .fin{margin-top:14px}
.knaprad{margin-top:22px}

/* ---------- værkstedet for medlemmer ---------- */
.kodekort{max-width:28rem;margin-top:1.4rem}
.kodekort .holdform input{font:1.1rem/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase}
.hvemer{font-family:var(--label);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.udform{margin:0}
.minekort{background:var(--surface-2,#F0D2A6)}
.mineliste{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.mineliste li{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:12px 0;border-top:1px solid var(--line);
}
.mineliste li:first-child{border-top:0;padding-top:0}
.vtider{display:grid;gap:10px;margin-top:18px}
.vtid{
  display:grid;gap:8px 16px;align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--ground);
}
.vtid.paa{border-color:var(--accent);background:#F6E4C8}
.vtid.fyldt{opacity:.6}
.vklok{font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.1;white-space:nowrap}
.vklok span{font-family:var(--body);font-size:.82rem;font-weight:400;color:var(--muted)}
.vhvad{display:flex;flex-direction:column;gap:3px;min-width:0}
.vhvad b{font-size:1.02rem}
.vmaerke{
  font-family:var(--label);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.vm-hold,.vm-arrangement{color:var(--accent)}
.vnoter{margin:4px 0 0;font-size:.92rem;color:var(--ink-soft)}
.vknap form{display:flex;align-items:center;gap:10px;margin:0}
@media (max-width:700px){
  .vtid{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .vplads,.vknap{grid-column:1/-1}
}
/* På en telefon er der ikke plads til klokkeslættet ved siden af
   teksten — så står det øverst, og resten får hele bredden. */
@media (max-width:520px){
  .vtid{grid-template-columns:minmax(0,1fr);gap:8px}
  .vklok{font-size:1.35rem}
  .vplads{justify-self:start}
}
.allerede{
  margin-top:16px;text-align:center;font-size:.92rem;color:var(--muted);
}
.allerede a{color:var(--ink);text-underline-offset:3px}

/* Dagene foldes ud én ad gangen, så siden ikke bliver en mur. */
details.cafedag > summary{
  list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
}
details.cafedag > summary::-webkit-details-marker{display:none}
details.cafedag > summary::after{
  content:'';margin-left:auto;width:9px;height:9px;flex:none;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;
}
details.cafedag[open] > summary::after{transform:rotate(-135deg)}
details.cafedag .dagtitel{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:600}
details.cafedag .dagtid{font-size:.92rem;color:var(--muted)}
details.cafedag .cafeform{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
details.cafedag .holdnote{margin-top:14px}

/* ---------- ugen som kolonner ---------- */
.ugebjaelke{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:clamp(24px,3vw,34px) 0 14px;
}
.ugebjaelke .ugetitel{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.3}
.ugebjaelke .ugetitel b{font-family:var(--label);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.ugebjaelke .ugetitel .mute{font-size:.86rem;color:var(--muted)}
.ugegitter{display:grid;gap:8px;grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:820px){.ugegitter{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.ugegitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ugedag{
  display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:12px 10px 13px;transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
a.ugedag:hover{border-color:var(--accent);transform:translateY(-1px)}
.ugedag .dn{font-family:var(--label);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ugedag .dd{font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.2}
.ugedag .dt{font-size:.76rem;color:var(--ink-soft);margin-top:2px}
.ugedag .ds{font-family:var(--label);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:5px}
.ugedag.lukket{background:transparent;border-style:dashed;color:var(--muted)}
.ugedag.lukket .dd{color:var(--muted);font-weight:400}
.ugedag.lukket .ds{color:var(--muted)}
.ugedag.fyldt{opacity:.62}
.ugedag.fyldt .ds{color:var(--muted)}
.ugedag.valgt{background:var(--ink);border-color:var(--ink);color:var(--paa-moerk)}
.ugedag.valgt .dn,.ugedag.valgt .dt{color:rgba(248,224,188,.75)}
.ugedag.valgt .ds{color:var(--paa-moerk)}
.valgtdag{margin-top:clamp(20px,2.6vw,28px)}
.ugetom{margin-top:22px}
.vtidblok{margin-top:clamp(26px,3vw,36px)}
.vtidblok > h2,.holdoverskrift{
  font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;margin-bottom:10px;
}
.holdoverskrift{margin-top:clamp(34px,4vw,48px)}
.vtidblok .valgtdag{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,28px)}

/* ---------- medlemmets faner ---------- */
.vfaner{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:1.5rem 0 1.5rem;
}
.vfane{
  display:inline-flex;align-items:center;gap:7px;
  padding:.6rem 1.05rem;border-radius:999px;
  border:1px solid var(--kant, rgba(90,64,40,.24));
  background:transparent;color:inherit;text-decoration:none;
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  transition:background .14s,border-color .14s,color .14s;
}
.vfane:hover{border-color:#b4834f;color:#8a5e33}
.vfane.aktiv{background:#4a3116;border-color:#4a3116;color:#fdf1de}
.vantal{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.35em;height:1.35em;padding:0 .35em;border-radius:999px;
  background:rgba(90,64,40,.14);font-size:.86em;letter-spacing:0;
}
.vfane.aktiv .vantal{background:rgba(253,241,222,.22)}
@media (max-width:520px){
  .vfaner{gap:5px;margin:1.2rem 0 1.1rem}
  .vfane{padding:.52rem .8rem;font-size:.72rem;letter-spacing:.08em}
}

/* Med faner står der én ting på siden ad gangen, og så skal der ikke
   være så meget luft mellem afsnittene som før. */
/* «section» får ellers båndafstand fra forsiden — 96 px foroven og
   forneden. Kortene sætter selv deres polstring, men de nøgne
   afsnit her gjorde ikke, og så stod der et stort tomt felt mellem
   fanebjælken og indholdet. */
/* …men kun de nøgne afsnit. Kortene (.holdkort, .cafedag) skal beholde
   deres egen polstring — ellers står overskriften klistret op ad kanten. */
.holdside section:not(.holdkort):not(.cafedag){padding-block:0}
.holdside .vtidblok{margin-top:0}
.holdside .vtidblok>h2:first-child,
.holdside .holdoverskrift{margin-top:0}
.holdside .minekort{margin-top:0}
.holdside .cafedage{margin-top:1.1rem}
.holdside .holdfod{margin-top:2rem}
.holdside .lede{margin-bottom:.4rem}

/* ---------- medlemmets egen kode ---------- */
.kodeboks {
  margin: 0 0 1.4rem;
  padding: 0;
  border: 1px solid var(--kant, rgba(90, 64, 40, .22));
  border-radius: 14px;
  background: var(--kort, #fdf3e3);
}
.kodeind { padding: 1.4rem 1.4rem 1.5rem; }
.kodeind h2 { margin: 0 0 .7rem; }
.kodeind .brod { margin-top: 0; }
.kodeform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
  margin: 1rem 0 .7rem;
}
.kodeform label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kodeform input {
  min-width: 15rem;
  padding: .7rem .85rem;
  border: 1px solid var(--kant, rgba(90, 64, 40, .3));
  border-radius: 9px;
  background: #fffaf1;
  font: inherit;
  letter-spacing: .04em;
}
@media (max-width: 520px) {
  .kodeform input { min-width: 0; width: 100%; }
  .kodeform button { align-self: flex-start; }
}

/* Et lukket arrangement — huset har værkstedet, og der kan ikke bookes. */
.vtid.lukketarr{
  background:repeating-linear-gradient(135deg,
    rgba(90,64,40,.07) 0 9px, rgba(90,64,40,.015) 9px 18px);
  border-style:dashed;
}
.vtid.lukketarr .vklok,.vtid.lukketarr .vhvad b{opacity:.8}
.vmaerke.vm-lukket{background:rgba(90,64,40,.14);color:#5a4028}

/* ---------- den fælles login-side ---------- */
.loginveje{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.6rem}
.loginhvem{
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:1.8rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line);
}
.loginhvem h3{font-family:var(--display);font-size:1.15rem;margin:0 0 .4rem}
.loginhvem .brod{font-size:.94rem}
.holdside .kodekort .fin{margin-top:.8rem}
/* På login-siden er kortet det eneste på siden — der må det gerne
   fylde spalten ud i stedet for at stå og klemme sig i venstre side. */
.loginside .kodekort{max-width:none}
.loginside .kodekort .holdform{max-width:none}
.loginside .kodekort .holdform input{max-width:22rem}

/* ---------- billeder fra huset ---------- */
.husfoto{margin:0 0 clamp(20px,2.6vw,28px)}
.husfoto img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface-2);
}
.husbaand{
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(34px,4.5vw,56px);
}
.husbaand figure{margin:0}
.husbaand img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface-2);
}
.husbaand figcaption{
  margin-top:10px;font-size:.88rem;line-height:1.5;color:var(--ink-soft);
}
@media (max-width:1000px){
  .husbaand{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .husbaand{grid-template-columns:minmax(0,1fr)}
}
/* Billedet af døren hører til kortet nedenunder — lidt mindre luft
   imellem dem end mellem afsnit. */
.doerfoto{margin-bottom:18px}
.doerfoto figcaption{margin-top:10px;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}

/* Den lille linje under knapperne i Værksted/Café-afsnittet. */
.knapnote{margin-top:10px;font-size:.84rem;color:var(--muted);max-width:44ch}

/* ==================================================================
   MEDLEMSTAVLEN OG «HVEM ER PÅ HOLDET»
   ================================================================== */

/* fornavnene under et hold */
.paaholdet{
  margin:.5rem 0 0;font-size:.85rem;line-height:1.5;
  color:var(--blaek-blod, #6b4f38);
}
.paaholdet span{
  font-family:'Josefin Sans', Arial, sans-serif;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dus, #9a7c5c);margin-right:.35rem;
}

/* tallet på fanen, når der er nyt */
.vantal.nyt{background:#b4834f;color:#fff6e8}
.vfane.aktiv .vantal.nyt{background:rgba(253,241,222,.3);color:inherit}

/* skrivefeltet øverst */
.tavle .lede{margin-bottom:1.1rem}
.skrivboks{
  border:1px solid var(--kant, rgba(90,64,40,.22));
  border-radius:14px;background:rgba(253,241,222,.7);
  padding:1rem 1.1rem 1.1rem;margin:0 0 1.5rem;
}
.skrivboks textarea,.svarform textarea{
  width:100%;font:inherit;font-size:16px;line-height:1.55;
  color:inherit;background:#fff;resize:vertical;
  border:1px solid var(--kant, rgba(90,64,40,.3));border-radius:10px;
  padding:.75rem .85rem;
}
.skrivboks textarea:focus,.svarform textarea:focus{
  outline:2px solid #b4834f;outline-offset:1px;border-color:#b4834f;
}
.skrivfod{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-top:.7rem;
}
.skrivfod .fin{margin:0}

/* selve tavlen */
.opslagsliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.opslag{
  border:1px solid var(--kant, rgba(90,64,40,.2));
  border-radius:14px;background:rgba(253,241,222,.55);
  padding:1rem 1.1rem 1.05rem;
}
.ohoved{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ohoved b{font-family:'Cormorant Garamond', Georgia, serif;font-size:1.15rem;font-weight:600}
.ohoved .mute{font-size:.8rem}
.otekst{margin:.35rem 0 0;line-height:1.6;overflow-wrap:anywhere}

/* svarene ligger foldet sammen, så tavlen kan overskues */
.osvar{margin-top:.7rem;border-top:1px solid var(--kant, rgba(90,64,40,.16));padding-top:.55rem}
.osvar > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Josefin Sans', Arial, sans-serif;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dus, #9a7c5c);
}
.osvar > summary::-webkit-details-marker{display:none}
.osvar > summary::before{content:"›";display:inline-block;transition:transform .15s ease}
.osvar[open] > summary::before{transform:rotate(90deg)}
.osvar > summary:hover{color:#8a5e33}
.etsvar{
  margin:.7rem 0 0;padding:.6rem .85rem;border-radius:10px;
  background:rgba(255,255,255,.55);
  border-left:2px solid var(--kant, rgba(90,64,40,.25));
}
.etsvar .ohoved b{font-size:1rem}
.svarform{display:flex;align-items:flex-end;gap:.7rem;margin-top:.8rem;flex-wrap:wrap}
.svarform textarea{flex:1 1 16rem}

/* fluebenene under Dine indstillinger */
.valgform{display:flex;flex-direction:column;gap:.9rem;margin-top:.9rem}
.valgform .afkryds{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer}
.valgform .afkryds input{margin-top:.28rem;width:1.05rem;height:1.05rem;flex:none;accent-color:#8a5e33}
.valgform .afkryds span{display:flex;flex-direction:column;line-height:1.45}
.valgform .afkryds small{color:var(--dus, #9a7c5c);font-size:.82rem;margin-top:.1rem}
.valgform .btn{align-self:flex-start}

@media (max-width:520px){
  .skrivboks,.opslag{padding:.9rem .9rem 1rem}
  .skrivfod{align-items:flex-start;flex-direction:column;gap:.6rem}
  .svarform .btn{width:100%;justify-content:center}
}

/* På de smalleste telefoner er der kun plads til «Log ud». */
@media (max-width:400px){
  .topnav .hvemer{display:none}
}

/* ---------- billeder og profilbilleder på tavlen ---------- */

.ansigt{
  width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;
  border:1px solid var(--kant, rgba(90,64,40,.22));background:#fdf1de;
}
.ansigt.tom{
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond', Georgia, serif;font-size:1.15rem;font-weight:600;
  color:#8a5e33;background:rgba(180,131,79,.16);
}
.ansigt.stor{width:96px;height:96px;font-size:2.4rem}
.etsvar .ansigt{width:32px;height:32px;font-size:.95rem}

/* hovedet over et opslag: ansigt, navn, og knapperne yderst */
.ohoved{display:flex;align-items:center;gap:.7rem;flex-wrap:nowrap}
.ohoved .hvem{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ohoved .hvem b{font-family:'Cormorant Garamond', Georgia, serif;font-size:1.15rem;font-weight:600}
.ohoved .hvem .mute{font-size:.78rem}
.etsvar .ohoved .hvem b{font-size:1rem}
.ohoved .mine{margin-left:auto;display:flex;align-items:center;gap:.8rem;flex:none}
.lillelink{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:'Josefin Sans', Arial, sans-serif;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dus, #9a7c5c);text-decoration:none;
}
.lillelink:hover{color:#8a5e33;text-decoration:underline}
.ilinje{display:inline-block}

/* selve billedet i et opslag */
.obillede{display:block;margin:.7rem 0 0;max-width:420px}
.obillede img{
  width:100%;height:auto;border-radius:10px;
  border:1px solid var(--kant, rgba(90,64,40,.2));
}
.obillede.lille{max-width:280px}
.obillede:hover img{border-color:#b4834f}

/* «vedhæft et billede» — selve filfeltet er gemt bag en pæn knap */
.vedhaeft{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;cursor:pointer;
  border:1px dashed var(--kant, rgba(90,64,40,.35));border-radius:999px;
  padding:.42rem .95rem;
  font-family:'Josefin Sans', Arial, sans-serif;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dus, #9a7c5c);
}
.vedhaeft:hover{border-color:#b4834f;color:#8a5e33}
.vedhaeft .klips{font-size:1rem;line-height:1}
.vedhaeft input[type=file]{
  /* Feltet skal kunne nås med tastaturet, men ikke fylde noget. */
  position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
}
.vedhaeft:focus-within{outline:2px solid #b4834f;outline-offset:2px}
.svarform .vedhaeft{margin-top:0}

/* når man retter et opslag */
.retform{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;margin-top:.6rem}
.retform textarea{
  width:100%;font:inherit;font-size:16px;line-height:1.55;color:inherit;background:#fff;
  resize:vertical;border:1px solid var(--kant, rgba(90,64,40,.3));border-radius:10px;
  padding:.75rem .85rem;
}
.retform textarea:focus{outline:2px solid #b4834f;outline-offset:1px;border-color:#b4834f}
.retform .skrivfod{width:100%}
.retbillede{display:flex;align-items:flex-end;gap:.9rem;margin-top:.7rem;flex-wrap:wrap}
.retbillede img{width:120px;height:auto;border-radius:8px;border:1px solid var(--kant, rgba(90,64,40,.2))}
.afkryds.sm{display:flex;align-items:center;gap:.45rem;font-size:.85rem;cursor:pointer}
.afkryds.sm input{width:1rem;height:1rem;accent-color:#8a5e33}

/* profilbilledet under Dine indstillinger */
.fotoboks{display:flex;align-items:flex-start;gap:1.3rem;margin-top:1rem;flex-wrap:wrap}
.fotovalg{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  flex:1 1 20rem;min-width:0}
.fotoform{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.fotoform .vedhaeft{margin-top:0}
.fotovalg .sm{margin:0;max-width:52ch}

@media (max-width:520px){
  .ohoved{flex-wrap:wrap}
  .ohoved .mine{margin-left:auto}
  .obillede,.obillede.lille{max-width:100%}
  .svarform{flex-direction:column;align-items:flex-start}
  .svarform textarea{width:100%}
  .fotoboks{gap:1rem}
}

/* Springer man til et opslag (fx for at rette det), skal det ikke
   ende oppe bag den faste bjælke. */
.opslag[id],.etsvar[id]{scroll-margin-top:calc(var(--nav-h, 64px) + 14px)}
/* Et højt portrætfoto må ikke fylde hele tavlen — hele billedet
   åbner i sit eget vindue, hvis man klikker. */
.obillede img{max-height:460px;width:auto;max-width:100%}
.obillede.lille img{max-height:300px}

/* (Mærket ved navnet på tavlen ligger nu i afregn/tavle.css som .t-rolle.) */
.ansigt.hus{color:#4a3116;background:#f4dfbf}
.ansigt.hus svg{width:58%;height:58%}

/* «Hvem kommer» på den valgte dag i den åbne værkstedstid */
.hvemkommer{
  margin:.2rem 0 1.1rem;padding:.8rem 1rem .9rem;border-radius:12px;
  background:rgba(253,241,222,.7);border:1px solid var(--kant, rgba(90,64,40,.18));
}
.hk-titel{
  margin:0 0 .45rem;font-family:'Josefin Sans', Arial, sans-serif;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dus, #9a7c5c);
}
.hk-tom{margin:0;font-size:.9rem;color:var(--dus, #9a7c5c)}
.hk-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.hk-liste li{
  display:inline-flex;align-items:baseline;gap:.4rem;
  padding:.3rem .75rem;border-radius:999px;background:#fff;
  border:1px solid var(--kant, rgba(90,64,40,.2));font-size:.88rem;
}
.hk-liste li b{font-weight:600}
.hk-liste li span{color:var(--dus, #9a7c5c);font-size:.8rem;font-variant-numeric:tabular-nums}
.hk-liste li.mig{background:#4a3116;border-color:#4a3116;color:#fdf1de}
.hk-liste li.mig span{color:rgba(253,241,222,.75)}
.hk-liste li.andre{background:transparent;border-style:dashed;color:var(--dus, #9a7c5c)}
.hk-liste li label{display:inline-flex;align-items:baseline;gap:.4rem;cursor:pointer}
.hk-liste li:has(label):hover{border-color:#b4834f;background:#fffaf2}
.hk-tip{margin:.55rem 0 0;font-size:.78rem;color:var(--dus, #9a7c5c)}
/* Samme for de små tekstknapper under «Dine indstillinger». */
.lillelink{padding:.55rem .35rem;margin:-.55rem -.35rem}

/* Heroens indhold må aldrig blive bredere end skærmen — på de
   smalleste telefoner var «Keramikværksted · Café · Galleri» med sin
   brede spatiering nok til at skubbe knapperne ud over kanten. */
.hero-indhold{min-width:0}
@media (max-width:400px){
  .hero .tagline{letter-spacing:.2em;font-size:.62rem}
}
@media (max-width:400px){
  /* «Book bord i keramikcaféen» er den længste knap — den skal kunne
     være der uden at stikke ud over kanten på en lille telefon. */
  .hero-knapper .btn{padding-inline:14px;letter-spacing:.1em;white-space:normal;text-align:center}
  .hero-knapper{padding-inline:0}
}
@media (max-width:360px){
  .boble b{font-size:.74rem}
  .boble{padding:5px 10px 6px}
}

/* ---------- «læg på hjemmeskærmen» for medlemmer ---------- */
.appinfo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;
  margin:0 0 22px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.appinfo[hidden]{display:none}
.appinfo p{margin:0;flex:1 1 280px;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.appinfo p > b:first-child{display:block;color:var(--ink);font-weight:600}
.appinfo-installer[hidden]{display:none}
.appinfo .del{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;margin:0 .1em}
.appinfo-knapper{display:flex;align-items:center;gap:10px}
.appinfo-vaek{background:none;border:0;padding:10px 6px;font:inherit;font-size:.85rem;color:var(--muted);
  text-decoration:underline;cursor:pointer}

/* ---------- guiden: få siden som app ---------- */
.appguide .wrap{max-width:760px}
.ag-allerede{margin:0 0 20px;padding:12px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.ag-allerede[hidden],.ag-installer[hidden]{display:none}
.ag-installer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 22px}
.ag-valg{display:flex;gap:8px;margin:26px 0 18px;flex-wrap:wrap}
.ag-fane{padding:10px 18px;border:1px solid var(--line-moerk);border-radius:999px;text-decoration:none;
  color:var(--ink);font-family:var(--label);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.ag-fane.valgt{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.ag-del[data-skjult]{display:none}
.ag-del h2{font-size:1.5rem;margin:0 0 14px}
.ag-trin{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ag-trin li{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:start;
  padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.ag-nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--ground);
  font-size:.85rem;font-weight:600;margin-top:2px}
.ag-ikon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--ground);
  border:1px solid var(--line);color:var(--ink)}
.ag-ikon svg{width:24px;height:24px}
.ag-trin h3{margin:2px 0 4px;font-size:1.12rem;line-height:1.3}
.ag-trin p{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.55}
.ag-medlem{margin-top:28px}
.ag-medlem h2{margin:0 0 10px}
.ag-medlem p{margin:0 0 10px}
@media (max-width:480px){
  .ag-trin li{gap:10px;padding:14px 14px 14px 12px}
  .ag-nr{width:24px;height:24px;font-size:.8rem}
  .ag-ikon{width:36px;height:36px}
  .ag-ikon svg{width:20px;height:20px}
}
.appinfo-guide{font-size:.85rem;color:var(--accent);padding:10px 4px}

/* ---------- klippekort på værkstedssiden ---------- */
.klipstatus{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin:0 0 22px;padding:14px 18px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.klipstatus p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.5}
.klipstatus p b{color:var(--ink)}
.klipstatus.tom{border-color:var(--accent)}
.klipprikker{display:flex;gap:6px;flex-wrap:wrap}
.klipprikker span{width:18px;height:18px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.klipprikker span.brugt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-moerk);opacity:.45}
.klipkort h2{margin-top:0}
.kliplog{list-style:none;margin:14px 0;padding:0}
.kliplog li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.kliplog li b{min-width:2.2em;text-align:right;font-variant-numeric:tabular-nums}
.kliplog .mute{font-size:.85rem}

/* ---------- medlemmets faner, pænere ----------
   På computeren en rolig række med små tegninger. På telefonen én række
   med lige brede felter: tegning øverst, kort navn nedenunder — så står
   fanerne ikke og knækker om på tre linjer. */
.vfaner{display:flex;flex-wrap:nowrap;gap:4px;padding:4px;margin:1.4rem 0 1.6rem;
  background:var(--surface, #fcf3e4);border:1px solid var(--kant, rgba(90,64,40,.18));border-radius:16px;overflow-x:auto;scrollbar-width:none}
.vfaner::-webkit-scrollbar{display:none}
.vfane{flex:1 1 auto;justify-content:center;border:0;border-radius:12px;padding:.7rem 1rem;white-space:nowrap;position:relative;gap:8px}
.vfane:hover{background:rgba(180,131,79,.1);color:inherit}
.vfane.aktiv{background:#4a3116;color:#fdf1de}
.vikon{display:inline-flex;width:18px;height:18px;flex:none}
.vikon svg{width:100%;height:100%}
.vfane .kort{display:none}
@media (max-width:700px){
  .vfaner{display:grid;grid-template-columns:repeat(var(--antal,5),minmax(0,1fr));overflow:visible;gap:2px;margin:1.1rem 0 1.3rem}
  .vfane{flex-direction:column;gap:4px;padding:.6rem .2rem .55rem;font-size:.62rem;letter-spacing:.04em;text-transform:none;font-weight:600}
  .vfane .lang{display:none}
  .vfane .kort{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .vikon{width:22px;height:22px}
  .vfane .vantal{position:absolute;top:4px;right:calc(50% - 22px);font-size:.62rem;min-width:1.5em;height:1.5em;background:#b4834f;color:#fff}
  .vfane.aktiv .vantal{background:#fdf1de;color:#4a3116}
}
/* Ugens dage: lukkede dage fylder mindre */
.ugedag.lukket{opacity:.7}
@media (max-width:520px){
  .ugedag.lukket{padding-top:.55rem;padding-bottom:.55rem}
  .ugedag.lukket .dd{font-size:.95rem}
}

/* ---------- Kurser & Events ---------- */
.kursus .kmaerke{display:inline-block;font-family:var(--label, 'Josefin Sans', sans-serif);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;margin-bottom:.5rem;background:rgba(180,131,79,.16);color:#8a5e33}
.kursus.k-intro .kmaerke{background:#F7EDCF;color:#8a6a12}
.kursus.k-hold .kmaerke{background:#F6E4D8;color:#9A5530}
.kursus.k-arrangement .kmaerke{background:#EFE3F0;color:#6d4775}
.kursusknapper{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:1rem}
.kursusknapper .fin{flex:1 1 220px}
/* Fire knapper i toppen skal kunne stå på én række på en computer. */
@media (min-width:900px){
  .hero-knapper{gap:10px;flex-wrap:nowrap}
  .hero-knapper .btn{padding-left:1.4rem;padding-right:1.4rem;white-space:nowrap}
}

/* ---------- Events med plakat ---------- */
.evliste{display:grid;gap:22px;margin:1.6rem 0 2.4rem}
.evkort{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,3vw,34px);align-items:start;
  background:var(--surface,#fcf3e4);border:1px solid var(--line,rgba(90,64,40,.18));border-radius:18px;padding:clamp(14px,2vw,20px);
  box-shadow:0 18px 40px -30px rgba(67,45,30,.55)}
.evkort-billede{display:block;border-radius:12px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(67,45,30,.6);transition:transform .2s ease}
.evkort-billede:hover{transform:translateY(-2px) rotate(-.4deg)}
.evkort-billede img{display:block;width:100%;height:auto}
.evkort-tekst h2{margin:.2rem 0 .3rem;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1}
.evkort-tekst h2 a{color:inherit;text-decoration:none}
.evunder{font-family:var(--label,'Josefin Sans',sans-serif);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:#8a5e33;margin:0 0 1rem}
.evkort-tider{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.6rem}
.evkort-tider li{display:grid;gap:.1rem;padding-left:.9rem;border-left:3px solid #c9a87f}
.evkort-tider b{font-size:.86rem}
.evkort-tider span{font-size:.92rem;color:var(--ink-soft,#6b4f38)}
.evkort-fod{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.evpris{font-family:var(--display,'Cormorant Garamond',serif);font-weight:600;font-size:1.9rem;line-height:1}
.kursus-overskrift{margin:2.2rem 0 1rem;font-size:1.5rem}
@media (max-width:640px){
  .evkort{grid-template-columns:110px minmax(0,1fr);gap:14px}
  .evkort-tekst h2{font-size:1.35rem}
  .evkort-fod .btn{width:100%;justify-content:center}
}
/* Selve event-siden */
.eventside{padding:clamp(18px,3vw,36px) 0 clamp(40px,6vw,70px)}
.eventside .brodkrumme{font-size:.85rem;margin-bottom:1.2rem}
.eventside .brodkrumme span{opacity:.5;margin:0 .3rem}
.evgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,4vw,56px);align-items:start}
.evplakat{margin:0;position:sticky;top:20px}
.evplakat img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 24px 50px -30px rgba(67,45,30,.7)}
.evplakat figcaption{font-size:.78rem;color:var(--muted,#9a7c5c);text-align:center;margin-top:.6rem}
.evtekst h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04;margin:.2rem 0 .5rem}
.evfakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:1.2rem 0 1.6rem}
.evfakta div{background:var(--surface,#fcf3e4);border:1px solid var(--line,rgba(90,64,40,.18));border-radius:12px;padding:.8rem 1rem;display:grid;gap:.15rem}
.evfakta span{font-family:var(--label,'Josefin Sans',sans-serif);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#9a7c5c)}
.evfakta b{font-family:var(--display,'Cormorant Garamond',serif);font-size:1.45rem;line-height:1.1}
.evfakta small{font-size:.76rem;color:var(--muted,#9a7c5c)}
.evh2{font-size:1.35rem;margin:1.8rem 0 .8rem}
.evtider{list-style:none;padding:0;margin:0 0 .6rem;display:grid;gap:.8rem}
.evtider li{display:flex;gap:.9rem;align-items:flex-start}
.evtider .evnr{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#5c3a2a;color:#fdf1de;font-weight:600;font-size:.9rem}
.evtider li div{display:grid;gap:.15rem}
.evink{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.evink li{background:#fbeee0;border:1px solid rgba(180,131,79,.3);border-radius:999px;padding:.45rem .9rem;font-size:.9rem}
.evink li::before{content:"♥ ";color:#b4834f}
.evtilmeld{margin-top:2.2rem;background:var(--surface,#fcf3e4);border:1px solid var(--line,rgba(90,64,40,.18));border-radius:18px;padding:clamp(18px,3vw,28px)}
.evtilmeld h2{margin-top:0}
.evform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.evform .bred,.evform button{grid-column:1/-1}
.evform .btn.stor{padding:1rem 1.4rem;font-size:.95rem;justify-content:center}
.evform .fin{display:block;text-transform:none;letter-spacing:0}
.evkvit{border-radius:16px;padding:clamp(16px,3vw,26px);margin-bottom:1.6rem;background:#e7f0e8;border:1px solid #b9d3bf}
.evkvit.venter,.evkvit.fortrudt{background:#fbeee0;border-color:rgba(180,131,79,.4)}
.evkvit h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 .4rem}
@media (max-width:820px){
  .evgrid{grid-template-columns:minmax(0,1fr)}
  .evplakat{position:static;max-width:300px;margin:0 auto}
  .evform{grid-template-columns:minmax(0,1fr)}
}
.evform label.afkryds{display:flex;flex-direction:row;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:.95rem}
.evform label.afkryds input{width:20px;height:20px;margin:0;flex:none}

/* Kurser: hold med illustration */
.kursus-overskrift{margin:2.6rem 0 .2rem}
.kursus-under{margin:0 0 .4rem;color:var(--ink-soft)}
.kurser .holdliste{margin-top:1.2rem}
.holdkort.medbillede{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:clamp(16px,2.4vw,28px);align-items:center}
.holdkort .kbillede{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r) - 4px);display:block}
.holdkort h3{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0}
.evkort-tekst h3{margin:.2rem 0 .3rem;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1}
.evkort-tekst h3 a{color:inherit;text-decoration:none}
.kursus.k-aaben .kmaerke{background:#E3EEDD;color:#4E7A55}
@media (max-width:620px){
  .holdkort.medbillede{grid-template-columns:1fr}
  .holdkort .kbillede{max-height:200px}
  .evkort-tekst h3{font-size:1.35rem}
}
.medlemsnyhed{display:inline-block;margin:0 0 14px;padding:8px 14px;border-radius:10px;background:var(--ink);color:var(--ground);font-family:'Cormorant Garamond',serif;font-size:1.1rem;line-height:1.3;transform:rotate(-1.5deg)}
.medlemsnyhed small{display:block;font-family:var(--label);font-size:.7rem;letter-spacing:.1em;opacity:.8}

/* ---------- Forsiden: lavere hero, shop og kurser side om side ---------- */
.hero{min-height:clamp(300px,40vh,420px);padding-bottom:clamp(60px,7vw,96px)}
.hero .opstilling{--h:clamp(170px,19vw,270px)}
.hero .gulv{height:clamp(100px,15vh,170px)}
.hero .haarstreg{margin-bottom:0}

.forsidebaand{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
.forsidebaand > div{min-width:0}
.forsidebaand h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:0}
.forsidebaand .butikshoved{align-items:flex-end;margin-bottom:18px}
.baand-shop .butiksgitter{gap:16px;grid-auto-columns:calc((100% - 32px)/3)}
.baand-shop .butikskort img,.baand-shop .butikskort .intet{aspect-ratio:1/1}
.baand-shop .butikskort .tekst{padding:11px 13px 14px}
.baand-shop .butikskort .tekst b{font-size:1rem}
.baand-shop .butikskort .tekst small{font-size:.74rem}
.baand-shop .butikskort .beloeb{font-size:.8rem;padding-top:4px}
.baand-shop .pil{width:44px;height:44px}
.baand-shop .pil svg{width:20px;height:20px}
.baand-shop .pil.venstre{left:-16px}
.baand-shop .pil.hoejre{right:-16px}

.aktuelle{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.aktuel{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px 10px 10px;
  transition:transform .18s ease,box-shadow .18s ease}
.aktuel:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(67,45,30,.12)}
.aktuel-billede{display:block;width:92px;height:92px;border-radius:calc(var(--r) - 6px);overflow:hidden;background:var(--surface-2)}
.aktuel-billede img{width:100%;height:100%;object-fit:cover;display:block}
.aktuel-billede.plakat{height:122px}
.aktuel-billede.plakat img{object-position:top}
.aktuel-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.aktuel-maerke{font-family:var(--label);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.aktuel-tekst b{font-family:var(--display);font-size:1.15rem;font-weight:600;line-height:1.2}
.aktuel-tid{font-size:.86rem;color:var(--ink-soft)}
.aktuel-info{margin-top:4px;font-family:var(--label);font-size:.74rem;letter-spacing:.08em;color:#8A5A2E;font-weight:600}

@media (max-width:980px){
  .forsidebaand{grid-template-columns:1fr}
  .baand-shop .butiksgitter{grid-auto-columns:calc((100% - 32px)/3)}
}
@media (max-width:560px){
  .baand-shop .butiksgitter{grid-auto-columns:calc((100% - 16px)/2)}
  .aktuel{grid-template-columns:72px 1fr}
  .aktuel-billede{width:72px;height:72px}
  .aktuel-billede.plakat{height:96px}
}
@media (max-width:640px){
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 24px) 120px}
}
.knaprad{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
@media (max-width:560px){.knaprad .btn{flex:1 1 100%;text-align:center}}
@media (min-width:561px){#vaerkstedet .knaprad{gap:8px}#vaerkstedet .knaprad .btn{padding-left:1.15rem;padding-right:1.15rem;letter-spacing:.12em}}
/* Streg under shoppen i stedet for prikker */
.prikker{display:flex;justify-content:center;margin-top:16px}
.prikker .spor{position:relative;display:block;width:min(160px,40%);height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.prikker .greb{position:absolute;top:0;bottom:0;left:0;border-radius:3px;background:var(--ink);transition:left .25s ease,width .25s ease}
/* Bladring i kurser & events */
.aktuelle-bladre{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.aktuelle-bladre .pil{position:static;transform:none;width:40px;height:40px}
.aktuelle-bladre .pil svg{width:18px;height:18px}
.aktuelle-side{font-family:var(--label);font-size:.78rem;letter-spacing:.12em;color:var(--ink-soft);min-width:3.5em;text-align:center}
.aktuelle > li[hidden]{display:none}
.vmaerke.vm-event{background:#F3E1C7;color:#8A5A2E}
.vtid.vevent{border-color:rgba(180,131,79,.55);background:linear-gradient(135deg,rgba(255,248,236,.95),rgba(246,228,200,.6))}
.aktuelle{align-content:start}
.aktuel-billede{height:122px}

/* ---------- Forsiden: kurser & events øverst, værkerne under — samme kort, seks på række ---------- */
.forsidebaand{display:flex;flex-direction:column;gap:clamp(36px,4.5vw,56px)}
.baand-raekke{min-width:0}
.baand-raekke .butiksgitter{gap:16px;grid-auto-columns:calc((100% - 80px)/6)}
.baand-raekke .butikskort{position:relative;border:0;box-shadow:0 1px 0 rgba(67,45,30,.06)}
.baand-raekke .butikskort img,.baand-raekke .butikskort .intet{aspect-ratio:1/1;transition:transform .5s ease}
.baand-raekke .butikskort:hover img{transform:scale(1.04)}
.baand-raekke .butikskort .tekst{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:1;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;flex:none;
  padding:7px 8px 7px 12px;border-radius:10px;
  background:rgba(255,249,238,.72);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:0 4px 14px rgba(67,45,30,.12);
}
.baand-raekke .butikskort .tekst b{font-size:.92rem;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baand-raekke .butikskort .tekst small{display:none}
.baand-raekke .butikskort .beloeb{margin:0;padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--ground);
  font-size:.7rem;letter-spacing:.06em;white-space:nowrap;flex:none}
.baand-raekke .pil{width:44px;height:44px}
.baand-raekke .pil svg{width:20px;height:20px}
.baand-raekke .pil.venstre{left:-16px}
.baand-raekke .pil.hoejre{right:-16px}
/* Hold og events: plakaten vises fra toppen, datoen står i et lille mærke øverst */
.eventkort.plakat img{object-position:top}
.eventkort .dato{position:absolute;top:8px;left:8px;z-index:1;padding:4px 10px;border-radius:999px;
  background:rgba(255,249,238,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--label);font-size:.68rem;letter-spacing:.08em;color:var(--ink);box-shadow:0 2px 8px rgba(67,45,30,.1)}
.eventkort .beloeb{max-width:52%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1200px){.baand-raekke .butiksgitter{grid-auto-columns:calc((100% - 48px)/4)}}
@media (max-width:860px){.baand-raekke .butiksgitter{grid-auto-columns:calc((100% - 32px)/3)}}
@media (max-width:560px){
  .baand-raekke .butiksgitter{grid-auto-columns:calc((100% - 16px)/2)}
  .baand-raekke .butikskort .tekst{gap:6px;padding:5px 5px 5px 9px;left:6px;right:6px;bottom:6px;border-radius:9px}
  .baand-raekke .butikskort .tekst b{font-size:.82rem}
  .baand-raekke .butikskort .beloeb{padding:3px 7px;font-size:.64rem;letter-spacing:.03em}
  .eventkort .dato{top:6px;left:6px;font-size:.62rem;padding:3px 8px}
}
/* Hold og events: titlen på første linje, pris og pladser under — så intet bliver klippet */
.baand-raekke .eventkort .tekst{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 10px 9px 12px}
.baand-raekke .eventkort .tekst b{max-width:100%}
.baand-raekke .eventkort .beloeb{max-width:100%;background:transparent;color:#8A5A2E;padding:0;font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.08em}
@media (max-width:560px){.baand-raekke .eventkort .tekst{padding:6px 8px 7px 9px}.baand-raekke .eventkort .beloeb{font-size:.62rem}}

/* ---------- Inspiration (videoer til caféens gæster) ---------- */
.insp-kat{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;margin:22px 0 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.insp-kat::-webkit-scrollbar{display:none}
.insp-kat a{flex:0 0 auto;font-family:var(--label);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pille);padding:9px 15px 8px;white-space:nowrap}
.insp-kat a span{color:var(--muted);margin-left:3px}
.insp-kat a.valgt{background:var(--ink);border-color:var(--ink);color:var(--paa-moerk)}
.insp-kat a.valgt span{color:var(--paa-moerk-svag)}
.insp-gruppe{margin:0 0 34px}
.insp-gruppe h2{font-size:clamp(1.35rem,3vw,1.7rem);margin:0 0 14px}
.insp-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.insp-kort{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.insp-kort:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(67,45,30,.45)}
.insp-billede{position:relative;display:block;aspect-ratio:16/10;background:#3a2a1e center/cover no-repeat}
.insp-kort.kilde-instagram .insp-billede:not([style]){background-image:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.insp-kort.kilde-tiktok .insp-billede:not([style]){background-image:linear-gradient(135deg,#161616,#2b2b2b 60%,#25f4ee 160%)}
.insp-kort.kilde-vimeo .insp-billede:not([style]){background-image:linear-gradient(135deg,#1ab7ea,#0b6b8a)}
.insp-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(253,241,222,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.insp-play svg{width:26px;height:26px;margin-left:3px}
.insp-kilde{position:absolute;left:10px;bottom:10px;font-family:var(--label);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);border-radius:var(--r-pille);padding:4px 9px 3px}
.insp-tekst{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.insp-tekst b{font-family:var(--display);font-size:1.22rem;font-weight:600;line-height:1.2}
.insp-tekst span{font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.insp-bund{margin-top:20px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.insp-bund .brod{max-width:52ch;margin:0}

.insp-aaben,.insp-aaben body{overflow:hidden}
.insp-vindue{position:fixed;inset:0;z-index:200;background:rgba(28,19,12,.88);display:flex;align-items:center;justify-content:center;padding:16px}
.insp-vindue[hidden]{display:none}
.insp-ramme{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.insp-afsp{background:#000;border-radius:12px;overflow:hidden}
.insp-afsp iframe{display:block;width:100%;height:100%;border:0}
.insp-afsp.bred{width:min(92vw,1000px,calc((100vh - 140px) * 16 / 9));aspect-ratio:16/9}
.insp-afsp.hoej{height:min(calc(100vh - 140px),760px);aspect-ratio:9/16;max-width:92vw}
.insp-afsp.kilde-instagram{background:#fff;aspect-ratio:auto;width:min(92vw,420px);height:min(calc(100vh - 140px),720px)}
.insp-titel{color:#FDF1DE;font-family:var(--display);font-size:1.2rem;text-align:center;margin:2px 0 0;max-width:min(92vw,700px)}
.insp-ud{font-family:var(--label);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#BFA283}
.insp-luk{position:absolute;top:-46px;right:-4px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(253,241,222,.95);color:#432D1E;font-size:1.6rem;line-height:1;cursor:pointer}
@media (max-width:560px){
  .insp-gitter{grid-template-columns:1fr 1fr;gap:12px}
  .insp-tekst{padding:9px 10px 11px}
  .insp-tekst b{font-size:1.05rem}
  .insp-tekst span{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .insp-play{width:42px;height:42px;margin:-21px 0 0 -21px}
  .insp-play svg{width:20px;height:20px}
  .insp-vindue{padding:56px 10px 16px}
  .insp-luk{top:-48px;right:0}
}
.insp-henvis{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0 6px;max-width:62ch;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.insp-henvis b{color:var(--ink);font-weight:600}
.insp-henvis .pil{flex:0 0 auto;font-family:var(--label);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.insp-henvis:hover{border-color:var(--accent)}

/* Forsiden på telefon: altid to kort ved siden af hinanden — både
   events og værker. Står til sidst og med id, så ingen ældre regel
   (fx den med 78 % bredde) kan tage over. */
@media (max-width:560px){
  #butiksrulle,#kurserrulle{grid-auto-columns:calc(50% - 8px) !important;gap:16px}
  #butiksrulle .butikskort,#kurserrulle .butikskort{min-width:0}
  #butiksrulle .butikskort .tekst small{display:none}
}
.fastkort .intet{font-size:.78rem;color:var(--ink);background:linear-gradient(135deg,var(--surface-2),var(--surface))}

/* Telefonen: kortenes bredde regnes ud fra skærmen og ikke fra rækken,
   og rækken holdes i skærmens bredde. Så kan intet i rækken skubbe den
   bredere — og der står altid to kort ved siden af hinanden. */
@media (max-width:560px){
  .forsidebaand,.baand-raekke,.baand-raekke .butiksbaelte,.baand-raekke .butiksgitter{width:100%;max-width:100%;min-width:0}
  #butiksrulle,#kurserrulle{grid-auto-columns:calc((100vw - 48px - 16px) / 2) !important;gap:16px}
}

/* Forsidens menu: logoet til venstre, og menupunkter og knapper samlet
   som én gruppe midt på siden. Er der ikke plads, ryger menupunkterne,
   og knapperne lægger sig ude til højre som før. */
.topnav .wrap:has(> .menu-samlet){display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
.topnav .wrap:has(> .menu-samlet) > .logo{justify-self:start}
.topnav .menu-samlet{grid-column:2;display:flex;align-items:center;gap:34px}
.topnav .menu-samlet nav{margin:0}
.topnav .menu-hoejre{gap:12px}
@media (max-width:1100px){
  .topnav .wrap:has(> .menu-samlet){display:flex}
  .topnav .menu-samlet{margin-left:auto}
  .topnav .menu-midt{display:none}
}
@media (max-width:720px){.topnav .menu-hoejre{gap:8px}}

/* Værkerne står på deres eget, lidt mørkere bånd, så de to rækker
   ikke flyder sammen. Båndet går helt ud til kanterne (skyggen), uden
   at siden kan rulles til siden (clip-path). */
.butiksband{padding-bottom:0}
.forsidebaand{gap:0}
.baand-kurser{padding-bottom:clamp(34px,4.5vw,54px)}
.baand-shop{
  --baand:#EFD2A8;
  background:var(--baand);
  box-shadow:0 0 0 100vmax var(--baand);
  clip-path:inset(0 -100vmax);
  padding-block:clamp(30px,4vw,48px) clamp(34px,4.5vw,54px);
}
.baand-shop .prikker .spor{background:rgba(67,45,30,.16)}
.holdform .huskmig{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-soft);margin:4px 0 2px;cursor:pointer}
.holdform .huskmig input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}

/* ---------- Åbningstider i heroen ---------- */
.aabnings-boks{position:relative;display:flex;flex-direction:column;align-items:center;margin:clamp(18px,2.4vw,26px) auto 0;z-index:30;text-align:left;width:max-content;max-width:100%}
.aabnings-boks summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px 8px 14px;border-radius:999px;background:rgba(253,241,222,.82);border:1px solid rgba(67,45,30,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--label);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  box-shadow:0 6px 18px -10px rgba(67,45,30,.4);transition:background .15s}
.aabnings-boks summary::-webkit-details-marker{display:none}
.aabnings-boks summary:hover{background:rgba(253,241,222,.97)}
.aabnings-boks .aab-prik{width:8px;height:8px;border-radius:50%;background:#B9A48E;flex:none}
.aabnings-boks.aaben .aab-prik{background:#5E8C6A;box-shadow:0 0 0 3px rgba(94,140,106,.22)}
.aabnings-boks.snart .aab-prik{background:#E1A93F;box-shadow:0 0 0 3px rgba(225,169,63,.22)}
.aabnings-boks .aab-pil{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:2px;transition:transform .2s}
.aabnings-boks[open] .aab-pil{transform:rotate(-135deg) translate(-2px,-2px)}
.aabnings-liste{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:min(320px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px 14px;
  box-shadow:0 24px 50px -18px rgba(67,45,30,.45)}
.aabnings-titel{margin:0 0 8px;font-family:var(--label);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.aabnings-liste ul{list-style:none;margin:0;padding:0}
.aabnings-liste li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink)}
.aabnings-liste li:first-child{font-weight:600}
.aabnings-liste li:last-child{border-bottom:0}
.aabnings-liste li small{color:var(--muted);font-size:.78rem;margin-left:4px;font-weight:400}
.aabnings-liste li b{font-weight:600;white-space:nowrap}
.aabnings-liste li.lukket b{color:var(--muted);font-weight:400}
.aabnings-link{display:inline-block;margin-top:10px;font-family:var(--label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.kontakt-tider{display:flex;flex-direction:column;gap:2px}
.kontakt-tider .lukket{color:var(--muted)}
@media (max-width:560px){.aabnings-boks summary{font-size:.68rem;letter-spacing:.08em;padding:8px 13px 7px 12px}}

/* Forsiden på telefon: «Bliv medlem» og «Login» i toppen (Art Shop står
   jo lige nedenunder i heroen), og de tre store knapper side om side. */
@media (max-width:640px){
  .topnav .menu-hoejre a[href="/butik/"]{display:none}
  .topnav .menu-hoejre a.btn:not(.login):not([href="/butik/"]){display:inline-flex}
  .hero-knapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none;padding-inline:0}
  .hero-knapper .btn{min-width:0;min-height:52px;padding:8px 6px;font-size:.66rem;letter-spacing:.08em;
    line-height:1.25;white-space:normal;text-align:center;display:flex;align-items:center;justify-content:center}
}
@media (max-width:360px){.hero-knapper .btn{font-size:.6rem;letter-spacing:.05em}.aabnings-boks summary{font-size:.6rem;letter-spacing:.05em;padding-inline:11px}}

/* Listen lægger sig oven på siden i stedet for at skubbe den ned. Heroen
   klipper derfor kun i siderne, så listen kan hænge ud over kanten
   forneden, og ligger øverst, så næste afsnit ikke dækker den. */
.hero{overflow:hidden;overflow-x:clip;overflow-y:visible;z-index:2}
@supports not (overflow:clip){.hero:has(.aabnings-boks[open]){overflow:visible}}
.hero .straaler{clip-path:inset(16.667%)}  /* striberne er 150 % af heroen — klip dem til heroens kant */

/* ---------- Menukortet (menu.php) ---------- */
.menuside{padding-block:clamp(26px,5vw,52px) clamp(46px,7vw,72px)}
.menukort{max-width:640px}
.mk-hoved{text-align:center;margin-bottom:22px}
.mk-hoved h1{font-size:clamp(2.2rem,7vw,3rem);margin:0}
.mk-streg{width:56px;height:1px;background:var(--accent);margin:14px auto 0}
.mk-genveje{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;margin:0 0 18px;justify-content:center;flex-wrap:wrap}
.mk-genveje::-webkit-scrollbar{display:none}
.mk-genveje a{font-family:var(--label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 13px 7px;white-space:nowrap}
.mk-afsnit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,4vw,28px) clamp(18px,4vw,30px);margin-bottom:16px;scroll-margin-top:calc(var(--nav-h) + 12px)}
.mk-afsnit h2{font-size:clamp(1.5rem,4.6vw,1.9rem);margin:0;text-align:center}
.mk-note{text-align:center;color:var(--ink-soft);font-size:.92rem;margin:6px auto 0;max-width:42ch}
.mk-afsnit ul{list-style:none;margin:16px 0 0;padding:0}
.mk-afsnit li{padding:10px 0;border-top:1px dashed var(--line)}
.mk-afsnit li:first-child{border-top:0}
.mk-linje{display:flex;align-items:baseline;gap:8px}
.mk-navn{font-family:var(--display);font-size:1.25rem;font-weight:600;line-height:1.2}
.mk-maerke{font-family:var(--label);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink);vertical-align:middle;font-weight:400;white-space:nowrap}
.mk-prikker{flex:1;border-bottom:1.5px dotted var(--muted);transform:translateY(-4px);min-width:16px;opacity:.6}
.mk-pris{font-family:var(--label);font-size:.92rem;letter-spacing:.06em;white-space:nowrap;color:var(--ink)}
.mk-tekst{margin:3px 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.mk-tom{text-align:center}
.mk-fod{text-align:center;margin-top:24px;color:var(--ink-soft);font-size:.92rem}
.mk-links a{color:var(--accent)}
.insp-henvis + .insp-henvis{margin-top:8px}

/* ---------- notifikationer (push) ---------- */
.pushramme{margin:0 0 18px}
.pushboks{background:#FDF1DE;border:1px solid #E4C79C;border-radius:14px;padding:16px 18px;color:#432D1E}
.pushboks h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.3rem;margin:0 0 6px}
.pushboks p{margin:0 0 10px;font-size:.92rem;line-height:1.5;color:#6B4F38}
.pushboks .push-svar{margin:8px 0 0;font-size:.85rem;color:#3d6b45;min-height:1em}
.pushboks .push-emner{display:grid;gap:8px;margin:4px 0 12px}
.pushboks .push-emne{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #E4C79C;border-radius:10px;padding:10px 12px;cursor:pointer;
  font-family:inherit;text-transform:none;letter-spacing:0;color:#432D1E;margin:0}
.pushboks .push-emne input{margin-top:3px;width:18px;height:18px;accent-color:#B4834F;flex:none}
.pushboks .push-emne b{display:block;font-weight:600;font-size:.92rem}
.pushboks .push-emne small{display:block;font-size:.8rem;color:#9A7C5C;line-height:1.4}
.pushboks .push-knapper{display:flex;flex-wrap:wrap;gap:8px}
.pushboks .push-knapper button{min-height:42px;padding:9px 18px;border-radius:999px;border:1px solid #B4834F;background:#B4834F;color:#FFF6E8;
  font-family:'Josefin Sans','Helvetica Neue',Arial,sans-serif;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.pushboks .push-knapper .push-test,.pushboks .push-knapper .push-fra{background:transparent;color:#432D1E;border-color:#432D1E}
.pushboks [hidden]{display:none!important}

/* ---------- tilbud om notifikationer ---------- */
.pushtilbud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#FDF1DE;border:1px solid #E4C79C;border-left:4px solid #B4834F;
  border-radius:12px;padding:12px 14px;margin:14px 0;color:#432D1E}
.pushtilbud[hidden]{display:none!important}
.pushtilbud .pt-ikon{flex:none;width:36px;height:36px;border-radius:50%;background:#F4DFBF;display:flex;align-items:center;justify-content:center;color:#8A5A2E}
.pushtilbud .pt-ikon svg{width:19px;height:19px}
.pushtilbud .pt-tekst{flex:1 1 220px;margin:0;font-size:.9rem;line-height:1.45}
.pushtilbud .pt-knapper{display:flex;gap:8px;flex:none}
.pushtilbud button{min-height:38px;padding:8px 16px;border-radius:999px;border:1px solid #B4834F;background:#B4834F;color:#FFF6E8;cursor:pointer;
  font-family:'Josefin Sans','Helvetica Neue',Arial,sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.pushtilbud .pt-nej{background:transparent;color:#6B4F38;border-color:#C9AE8C}