/* Tema for demoen til Agder Kattepensjonat. Fargene er hentet fra agderkattepensjonat.com (19.10.2026):
   beige bakgrunn, olivengrønt og mørk meny. Tittelen på nettsiden er håndskrevet, så overskriftene bruker
   en håndskrift (Gochi Hand er Styrbars valg, ikke skriften deres). Brødteksten er Arial som på nettsiden. */
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
:root {
  --merke: #6f6f3c;
  --merke-mork: #272727;
  --tint: #efeddf;
  --aksent: #a6a563;
  --ok: #6f6f3c;
  --ok-tint: #f1f0e4;
  --bakgrunn: #e2d4cb;
  --flate: #faf7f4;
  --papir: #ffffff;
  --tekst: #1f1f1f;
  --dempet: #5f5b57;
  --linje: #e6ddd6;
  --font-display: 'Gochi Hand', 'Comic Sans MS', cursive;
  --font-sans: Arial, Helvetica, sans-serif;
}
/* Roligere uttrykk: små hjørner, tynne linjer, ingen pynt bak prisen. Tall i vanlig skrift så de er lette å lese.
   «html» foran gjør at reglene vinner over motorens stilark, som lastes etter temaet. Menyen er mørk som på nettsiden. */
html h1 { font-size: 2.1rem; line-height: 1.1; font-weight: 400; }
html .velkommen h1 { font-size: 2.4rem; }
html header, html .topp { background: var(--merke-mork); }
html header .linje i { background: var(--aksent); }
html .kort, html .teller, html .kalender, html .dato, html .felt { border-radius: 8px; box-shadow: none; border: 1px solid var(--linje); }
html .valg, html .bryter { border-radius: 8px; border-width: 1px; }
html .valg[aria-pressed="true"], html .bryter[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--merke); }
html .pris-hero { border-radius: 8px; box-shadow: none; background: var(--merke-mork); }
html .pris-hero::after { display: none; }
html .pris-hero .belop, html .rad.sum b, html .teller output, html .status b, html .tall b { font-family: var(--font-sans); font-weight: 700; }
html .pris-hero .belop { font-size: 2.4rem; }
html .neste, html .knapp { border-radius: 6px; }
html .neste { height: 52px; }
html .status { border-radius: 6px; box-shadow: none; border: 1px solid var(--linje); }
html .teller button { border-radius: 6px; width: 56px; height: 56px; border-width: 1px; }
html .brikke, html .merk, html .demo-merke { border-radius: 6px; border-width: 1px; }
html .varsel, html .tips { border-radius: 4px; }