/* Pizza Piccolo — fælles stil for alle sider. Mint og rød, alt afrundet. */
:root{
  --mint:#BFE3D4;--mint-lys:#E4F3EB;--roed:#D8322A;--moerk:#1A1F1C;--hvid:#FBFDFC;
  --skrift:'Nunito',system-ui,sans-serif;--plakat:'Lilita One',Impact,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--mint);color:var(--moerk);font:400 17px/1.55 var(--skrift);accent-color:var(--roed)}
::selection{background:var(--roed);color:var(--hvid)}
:focus-visible{outline:3px solid var(--moerk);outline-offset:3px}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
img{display:block;width:100%;height:auto}
.ramme{max-width:1200px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* bånd */
.eksempelband{background:var(--moerk);color:var(--mint-lys);font-size:14px;line-height:1.4;padding:8px 16px;text-align:center}

/* top */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:16px 0}
.top nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-weight:700;font-size:15px}
.top nav a{text-decoration:none;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover{text-decoration:underline}
.tlf{font-weight:700;text-decoration:none;padding:8px 0;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}

/* plakat */
.plakat{text-align:center;padding:32px 0 32px}
.plakat h1{font-weight:400;font-size:64px;text-wrap:balance}
.navn{display:block;font:400 clamp(56px,13vw,148px)/.95 var(--plakat);color:var(--roed);letter-spacing:.01em;text-transform:uppercase}
.linje{display:block;margin-top:16px;font:700 clamp(18px,2.4vw,24px)/1.3 var(--skrift)}

/* fliser */
.fliser{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.fliser{grid-template-columns:repeat(3,1fr);gap:24px}}
.flise{display:block;border-radius:16px;overflow:hidden;background:var(--mint-lys);text-decoration:none;
  box-shadow:0 1px 0 rgba(26,31,28,.08);transition:transform .25s ease-out,box-shadow .25s ease-out;
  animation:fald .5s ease-out both}
.flise:hover,.flise:focus-visible{transform:translateY(-4px);box-shadow:0 12px 24px -8px rgba(26,31,28,.35)}
.flise img{aspect-ratio:1/1;object-fit:cover;background:#A9D6C4}
.flise figcaption{padding:12px 16px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline}
.flise b{font-size:18px}
.flise span{font-weight:700;white-space:nowrap}
.flise small{display:block;width:100%;font-size:15px;line-height:1.4}
.fliser li:nth-child(1) .flise{animation-delay:0ms}
.fliser li:nth-child(2) .flise{animation-delay:40ms}
.fliser li:nth-child(3) .flise{animation-delay:80ms}
.fliser li:nth-child(4) .flise{animation-delay:120ms}
.fliser li:nth-child(5) .flise{animation-delay:160ms}
.fliser li:nth-child(6) .flise{animation-delay:200ms}
.fliser li:nth-child(7) .flise{animation-delay:240ms}
.fliser li:nth-child(8) .flise{animation-delay:280ms}
.fliser li:nth-child(9) .flise{animation-delay:320ms}
.fliser li:nth-child(10) .flise{animation-delay:360ms}
@keyframes fald{from{transform:translateY(-16px)}to{transform:translateY(0)}}

/* knap */
.knap{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 40px;border-radius:999px;
  background:var(--roed);color:var(--hvid);font:700 19px/1.2 var(--skrift);text-decoration:none;white-space:nowrap}
.knap:hover{background:#C12A23}
.knap-linje{text-align:center;padding:32px 0 48px}
@media(min-width:768px){.knap-linje{padding-bottom:80px}}
.knap-linje p{margin-top:16px;font-size:15px}
.bund{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(191,227,212,.94);backdrop-filter:blur(8px);z-index:10;text-align:center}
.bund .knap{width:100%;max-width:400px}
@media(min-width:768px){.bund{display:none}}

/* sektioner */
section{padding:48px 0}
@media(min-width:768px){section{padding:80px 0}}
h2{font-size:48px;font:400 clamp(36px,5vw,64px)/1 var(--plakat);text-wrap:balance;margin-bottom:24px}

.tider{background:var(--roed);color:var(--hvid)}
.tider h2{color:var(--hvid)}
.tider ::selection{background:var(--moerk)}
.tider :focus-visible{outline-color:var(--hvid)}
.tal{display:grid;gap:24px}
@media(min-width:768px){.tal{grid-template-columns:repeat(3,1fr);gap:40px}}
.tal p{font-weight:700;font-size:16px}
.tal strong{display:block;font:400 clamp(44px,6vw,88px)/1 var(--plakat);margin-top:4px}
.tal em{font-style:normal;font-size:24px;font-family:var(--plakat)}
.afh{margin-top:40px;max-width:60ch}
.afh p+p{margin-top:8px}

.dejrad{display:grid;gap:24px;align-items:center}
@media(min-width:768px){.dejrad{grid-template-columns:3fr 2fr;gap:64px}}
.dejrad img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:var(--mint-lys)}
.boksbil{width:100%;max-width:640px;aspect-ratio:3/2;object-fit:cover;border-radius:16px;margin-top:40px;background:var(--mint-lys)}
.lokale{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:var(--mint-lys)}
.lokale-tekst{margin-top:24px;max-width:56ch}
.om{max-width:60ch}
.om p+p{margin-top:16px}

.anm .boks{background:var(--mint-lys);border-radius:16px;padding:32px 24px;max-width:60ch}
.anm .boks p+p{margin-top:8px;font-size:15px}

.find{display:grid;gap:24px}
@media(min-width:768px){.find{grid-template-columns:1fr 1fr;gap:40px}}
.find address{font-style:normal}
.find address p+p{margin-top:8px}
.find a{font-weight:700}

/* fod */
footer{background:var(--moerk);color:var(--mint-lys);padding:32px 0 96px;font-size:15px;line-height:1.6}
@media(min-width:768px){footer{padding-bottom:48px}}
footer p+p{margin-top:8px}
footer :focus-visible{outline-color:var(--mint)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flise{animation:none;transition:none}
  .flise:hover,.flise:focus-visible{transform:none}
}

/* ---- faelles chrome paa alle sider ---- */
.spring{position:fixed;top:-120px;left:0;z-index:20;background:var(--roed);color:var(--hvid);padding:16px 24px;border-radius:0 0 999px 0;min-height:48px;display:inline-flex;align-items:center;font-weight:700;text-decoration:none;transition:top .16s ease-out}
.spring:focus,.spring:focus-visible{top:0}

.top .maerke{font:400 26px/1 var(--plakat);color:var(--roed);text-decoration:none;text-transform:uppercase;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.top .hoejre{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}

/* navigation som piller */
.piller{padding-bottom:8px}
.piller ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.piller a{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border-radius:999px;
  border:2px solid var(--roed);color:var(--moerk);font-weight:700;font-size:15px;text-decoration:none;background:transparent}
.piller a:hover{background:var(--mint-lys)}
.piller a[aria-current="page"]{background:var(--roed);color:var(--hvid)}
.piller a[aria-current="page"]:hover{background:#C12A23}

/* sidehoved paa undersider */
.sidetop{text-align:center;padding:32px 0 8px}
.sidetop h1{font:400 clamp(44px,10vw,96px)/1 var(--plakat);color:var(--roed);text-transform:uppercase;text-wrap:balance}
.sidetop p{margin:16px auto 0;max-width:46ch;font-size:19px;font-weight:700;line-height:1.4}

/* to fotos ved siden af hinanden, runde hjoerner */
.duo{display:grid;gap:24px}
@media(min-width:768px){.duo{grid-template-columns:1fr 1fr;gap:40px}}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:var(--mint-lys)}
.duo figcaption{margin-top:16px;max-width:46ch}

/* trin i mint-lyse bokse */
.trin{list-style:none;display:grid;gap:16px;counter-reset:t}
@media(min-width:768px){.trin{grid-template-columns:repeat(3,1fr);gap:24px}}
.trin li{counter-increment:t;background:var(--mint-lys);border-radius:16px;padding:24px}
.trin li::before{content:counter(t);display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;background:var(--roed);color:var(--hvid);
  font:400 24px/1 var(--plakat);margin-bottom:16px}
.trin h3{font-size:20px;font-weight:700;margin-bottom:8px;line-height:1.3}

/* spoergsmaal og svar */
.qa dl{max-width:62ch}
.qa dt{font-weight:700;font-size:19px;margin-top:24px;line-height:1.3}
.qa dt:first-child{margin-top:0}
.qa dd{margin-top:4px;max-width:58ch}
@media(min-width:768px){
  .qa dl{columns:2;column-gap:64px;max-width:none}
  .qa dt{margin-top:0;break-after:avoid}
  .qa dd{margin-bottom:24px;break-inside:avoid;max-width:none}
}

/* videre-piller nederst */
.videre ul{list-style:none;display:grid;gap:16px}
@media(min-width:768px){.videre ul{grid-template-columns:1fr 1fr;gap:24px}}
.videre a{display:block;background:var(--mint-lys);border-radius:16px;padding:24px;text-decoration:none}
.videre a:hover{background:var(--hvid)}
.videre b{display:block;font:400 32px/1 var(--plakat);color:var(--roed);text-transform:uppercase}
.videre span{display:block;margin-top:8px}

@media(prefers-reduced-motion:reduce){.spring{transition:none}}

/* 21. sept 2026: menuen i kategorier, drikke som tekstliste */
.menu-h{font:400 clamp(28px,5vw,44px)/1 var(--plakat);color:var(--roed);text-transform:uppercase;margin:40px 0 16px}
.drikke{list-style:none;padding:0;margin:0;max-width:52ch}
.drikke li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:2px dotted var(--mint-lys)}
.drikke span{font-weight:700;white-space:nowrap}