/* Lerchediers – tokens og komponenter. Værdierne følger designet (flaskegrøn på jetstream). */
:root {
  --color-bg: #e9eeee;
  --color-surface: #f3f6f6;
  --color-hover: #e0e8e8;
  --color-text: #15231e;
  --color-accent: #006a4e;
  --color-accent-700: #004d38;
  --color-accent-600: #005a42;
  --color-divider: color-mix(in srgb, #15231e 18%, transparent);
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --shadow-md: 0 3px 10px rgba(45, 43, 43, 0.16);
  --margin: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 17px; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.side { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; padding: 0 var(--margin); }

/* Header */
header.top { padding: clamp(28px, 4vw, 52px) var(--margin) 0; }
.ordmaerke {
  display: block; text-align: center; font-family: var(--font-heading); font-weight: 400;
  /* Designet siger min. 44px, men det er for bredt til en telefon (vandret scroll) – derfor 28px */
  font-size: clamp(28px, 9vw, 132px); line-height: 1; letter-spacing: 0.28em; text-indent: 0.28em;
  color: var(--color-accent);
}
.tagline {
  margin: clamp(8px, 1.2vw, 14px) 0 0; text-align: center; font-family: var(--font-heading);
  font-style: italic; font-size: clamp(17px, 1.6vw, 22px); opacity: 0.8;
}
nav.menu {
  margin: clamp(22px, 3vw, 40px) 0 0; border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider); display: flex; justify-content: center;
  flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 44px); position: relative;
}
.menu-punkt { position: relative; }
.menu-punkt > a {
  display: block; padding: 14px 2px; font-family: var(--font-heading); font-size: 21px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.menu-punkt > a:hover, .menu-punkt > a[aria-current="page"] { color: var(--color-accent); }
.menu-punkt > a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.dropdown {
  display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 20;
  min-width: 180px; background: var(--color-surface); border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md); padding: 10px 0; flex-direction: column;
}
/* Åbner ved hover og ved tastaturfokus (Tab). Escape lukker via lille script i bunden. */
.menu-punkt:hover .dropdown, .menu-punkt:focus-within .dropdown { display: flex; }
.menu-punkt.lukket .dropdown { display: none; }
.dropdown a {
  display: block; padding: 8px 22px; font-family: var(--font-heading); font-style: italic;
  font-size: 20px; color: var(--color-text); text-align: center;
}
.dropdown a:hover { color: var(--color-accent); background: var(--color-hover); }

/* Typografi */
h1, h2, h3 { font-family: var(--font-heading); margin: 0; }
.brod { margin: 0; font-size: 17px; line-height: 1.7; text-align: justify; hyphens: auto; max-width: 48ch; }
.kicker { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.h1-side {
  font-weight: 300; font-size: clamp(44px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.02em; color: var(--color-accent);
}
.h1-side em { font-weight: 400; color: var(--color-text); }
.gitter-2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 80px); align-items: start; padding: clamp(32px, 5vw, 72px) 0;
}
.raekke-knapper { display: flex; gap: 14px; flex-wrap: wrap; }
.plade { margin: 0; }
.plade img { width: 100%; height: 100%; object-fit: cover; }
.tomt-felt { background: var(--color-surface); aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-family: var(--font-heading); font-style: italic; font-size: 20px; opacity: .7; }

/* Knapper: aldrig solid fyld */
.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px;
  font-family: var(--font-heading); font-weight: 600; font-size: 18px; letter-spacing: 0.04em;
  background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--color-accent);
}
.btn-primary { border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent-600) 22%, transparent); }
.btn-ghost { padding-inline: 8px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Forside */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(40px, 6vw, 96px) 0; }
.hero h1 { font-weight: 300; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -0.01em; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--color-accent); }
.hero .brod { margin-top: 28px; }
.hero .raekke-knapper { margin-top: 32px; }
.hero figure { aspect-ratio: 4/5; max-width: 520px; justify-self: end; width: 100%; }
.sektion { padding: clamp(40px, 6vw, 88px) 0; border-top: 1px solid var(--color-divider); }
.udvalgte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 32px); }
.udvalgt { display: block; color: inherit; }
.udvalgt figure { aspect-ratio: 4/5; }
.udvalgt .titel { margin: 12px 0 0; font-family: var(--font-heading); font-size: 24px; line-height: 1.15; }
.udvalgt .meta, .vaerk .meta { margin: 4px 0 0; font-size: 14px; opacity: 0.75; font-style: italic; }
.teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; padding: clamp(32px, 5vw, 72px) 0; border-top: 1px solid var(--color-divider); }
.teaser h2 { font-weight: 300; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.02; }
.teaser h2 em { font-weight: 400; color: var(--color-accent); }
.teaser .raekke-knapper { margin-top: 24px; }

/* Kategoriside */
.kat-top { padding: clamp(32px, 5vw, 72px) 0 clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px clamp(24px, 4vw, 64px); align-items: end; }
.kat-top h1 { font-weight: 300; font-size: clamp(56px, 9vw, 140px); line-height: 0.95; letter-spacing: -0.02em; color: var(--color-accent); }
.kat-top p { max-width: 46ch; }
.faner { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 40px); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.faner a { display: block; padding: 14px 2px; font-family: var(--font-heading); font-style: italic; font-size: 22px; color: var(--color-text); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.faner a:hover, .faner a[aria-current="page"] { color: var(--color-accent); }
.faner a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.faner .antal { margin: 0 0 0 auto; padding: 16px 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; font-feature-settings: "tnum" 1; }
.vaerker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 4vw, 56px) clamp(16px, 2.5vw, 32px); padding: clamp(28px, 4vw, 56px) 0; }
.vaerk figure { aspect-ratio: 4/5; }
.vaerk .raekke { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; border-bottom: 1px solid var(--color-divider); padding-bottom: 8px; }
.vaerk h3 { font-weight: 400; font-size: 26px; line-height: 1.1; }
.vaerk .pris { font-family: var(--font-heading); font-size: 20px; font-feature-settings: "tnum" 1; white-space: nowrap; color: var(--color-accent-700); }
.vaerk .meta { margin: 8px 0 0; font-size: 14px; line-height: 1.6; opacity: 0.8; }
.forespoerg { display: inline-block; margin-top: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--color-accent); }
.ingen { padding: 0 0 56px; font-family: var(--font-heading); font-style: italic; font-size: 24px; opacity: 0.7; }

/* Om, CV, kontakt */
.portraet { max-width: 480px; }
.cv { padding: clamp(32px, 5vw, 72px) 0; max-width: 880px; }
.cv-gruppe { margin-top: 40px; }
.cv-gruppe .kicker { border-bottom: 1px solid var(--color-divider); padding-bottom: 10px; margin-bottom: 0; }
.cv-raekke { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.cv-aar { font-family: var(--font-heading); font-size: 22px; font-feature-settings: "tnum" 1; color: var(--color-accent); }
.cv-titel { margin: 0; font-family: var(--font-heading); font-size: 22px; line-height: 1.2; }
.cv-sted { margin: 2px 0 0; font-size: 14px; opacity: 0.75; font-style: italic; }
.kontaktliste { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-heading); font-size: 24px; }
.kontaktliste > * { border-bottom: 1px solid var(--color-divider); padding-bottom: 10px; display: flex; justify-content: space-between; gap: 16px; margin: 0; }
.kontaktliste span:last-child { font-style: italic; color: var(--color-text); }
.formular { display: flex; flex-direction: column; gap: 18px; max-width: 480px; justify-self: end; width: 100%; }
.felt { display: flex; flex-direction: column; gap: 6px; }
.felt > span { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; /* 16px, så iOS ikke zoomer */
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 4px;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { resize: vertical; }
.skjult { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.besked-status { min-height: 1.6em; margin: 0; font-size: 15px; }
.besked-status.fejl { color: #8a2b1d; }

footer.bund { margin-top: auto; padding: 28px var(--margin) 40px; border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; letter-spacing: 0.06em; }
footer.bund .fm { font-family: var(--font-heading); font-size: 18px; letter-spacing: 0.22em; color: var(--color-accent); }
footer.bund nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer.bund .ret { opacity: 0.7; }