:root {
  --bg-stille-ler: #f3ede8;
  --bg-lerbund:    #e5ddd3;
  --text-roddybde:   #3d321d;   /* Overskrifter og logo-streg */
  --text-jordstemme: #5a4a2c;   /* Sub-headers */
  --text-stilket:    #7b6a48;   /* Brødtekst */
  --text-lys:        #9e9075;   /* Lysere tone til citater/referencer */
}

html { 
  scroll-behavior: smooth; 
  font-size: 17px; 
  scroll-padding-top: 110px; 
}

body {
  background-color: var(--bg-stille-ler);
  color: var(--text-stilket);
  font-family: 'Lora', serif;
  line-height: 1.7; 
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* === LÅST TIL 560PX - CENTRERET === */
.section-inner, .nav-inner, .nav-drawer-inner {
  max-width: 560px; 
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  box-sizing: border-box;
}

/* === NAVIGATION OG BURGERMENU === */
#sitenav {
  position: fixed; 
  top: 0; 
  width: 100%; 
  height: 80px; 
  background: var(--bg-stille-ler); 
  z-index: 1000;
  display: flex; 
  align-items: center;
}

#sitenav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px; 
  max-width: 90vw; 
  height: 2px;
  background-color: rgba(61, 50, 29, 0.12);
}

.nav-inner { 
  width: 100%; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.nav-dual-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-roddybde);
  font-size: 1.0rem;
}

.nav-dual-btn a, .nav-dual-btn button {
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Lora', serif;
  font-size: 1.0rem;
  transition: opacity 0.3s ease;
}

.nav-dual-btn a:hover, .nav-dual-btn button:hover {
  opacity: 0.6;
}

.burger { 
  background: none; 
  border: none; 
  cursor: pointer; 
  display: flex; 
  flex-direction: column; 
  gap: 5px; 
  padding: 0;
}

.burger span { 
  display: block; 
  width: 25px; 
  height: 1.5px; 
  background: var(--text-roddybde); 
}

/* --- SKUFFEN (DRAWER) --- */
.nav-drawer { 
  position: fixed; 
  top: 0; 
  right: -100%; 
  width: 100%; 
  height: 100vh; 
  background: var(--bg-stille-ler); 
  z-index: 999; 
  transition: right 0.4s ease; 
}

.nav-drawer.open { 
  right: 0; 
}

.nav-drawer ul { 
  list-style: none; 
  padding: 120px 0; 
  margin: 0;
  text-align: left; 
}

.nav-drawer a { 
  text-decoration: none; 
  color: var(--text-roddybde); 
  font-size: 1.2rem; 
  display: block; 
  padding: 0.8rem 0; 
  transition: opacity 0.3s ease;
}
.nav-drawer a:hover {
  opacity: 0.6;
}

/* === HERO SEKTION === */
.hero { 
  padding-top: 80px; 
}

.hero-logo-img {
  width: 320px; 
  height: auto;
  display: block;
  margin: -80px auto -135px auto; 
  position: relative;
  z-index: 1; 
  pointer-events: none; 
}

.hero-headline { 
  color: var(--text-roddybde);
  font-size: 1.4rem; 
  margin-top: 0; 
  margin-bottom: 2rem; 
  text-align: center; 
  line-height: 1.3; 
  font-weight: 600;
  position: relative;
  z-index: 2; 
}

.hero-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.4rem 0 2rem 0; 
  position: relative;
  z-index: 2; 
}

.hero-table td {
  width: 50%;
  padding: 0.5rem;
  text-align: center;
}

.hero-intro {
  position: relative;
  z-index: 2; 
}

/* === GENERELLE KNAPPER === */
.btn-light {
  display: inline-block;
  width: 85%; 
  box-sizing: border-box;
  padding: 0.45rem 1rem; 
  border: 1px solid var(--text-roddybde);
  background: none;
  color: var(--text-roddybde);
  text-decoration: none;
  border-radius: 40px;
  font-size: 0.85rem; 
  text-align: center;
  cursor: pointer;
  font-family: 'Lora', serif;
  transition: all 0.3s ease;
}

.btn-light:hover {
  background-color: var(--text-roddybde);
  color: var(--bg-stille-ler);
}

.btn-primary {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1.4rem;
  border: none; 
  background: var(--text-roddybde);
  color: var(--bg-stille-ler);
  text-decoration: none;
  border-radius: 40px; 
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  font-family: 'Lora', serif;
  transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.85;
}

.btn-primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.5rem 1.4rem; 
  border: 1px solid rgba(61, 50, 29, 0.2); 
  background: rgba(61, 50, 29, 0.05); 
  color: var(--text-stilket);
  border-radius: 40px; 
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
  font-family: 'Lora', serif;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-ghost:hover {
  background: rgba(61, 50, 29, 0.15);
  color: var(--text-roddybde);
  border-color: var(--text-roddybde);
}

/* === OVERSKRIFTER === */
h1, h2, h3, h4, .s-title, .s-title-left {
  color: var(--text-roddybde);
  font-weight: 600;
  line-height: 1.3;
}

.s-title-left { 
  text-align: left; 
  font-size: 1.6rem; 
  margin-bottom: 1.5rem; 
}

.s-title { 
  text-align: center; 
  font-size: 1.6rem; 
  margin-bottom: 2.5rem; 
}

/* === BILLEDE (Portræt) === */
.profile-img {
  width: 100%;
  max-width: 240px; 
  height: auto;
  border-radius: 12px; 
  display: block;
  margin: 3rem auto 0 auto; 
  border: 1px solid rgba(61, 50, 29, 0.08);
}

/* === LAYOUT OG SEKTIONER === */
.section { 
  padding: 80px 0; 
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px; 
  max-width: 90vw; 
  height: 2px;
  background-color: rgba(61, 50, 29, 0.12); 
}

.body-centered { text-align: center; }
.body-left { text-align: left; }

.box-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
  margin: 2rem 0; 
}

.box { 
  background: var(--bg-lerbund); 
  padding: 1.5rem; 
  font-size: 0.85rem; 
  border-radius: 12px;
}

.sub-h { 
  color: var(--text-jordstemme); 
  font-weight: 600; 
  margin-top: 2rem; 
  display: block; 
}

/* === PUNKTOPSTILLINGER === */
.bullet-list { 
  list-style: none; 
  padding-left: 0; 
  margin: 1rem 0; 
}

.bullet-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
}

.bullet-list li::before { 
  content: "•"; 
  color: var(--text-stilket); 
  position: absolute;
  left: 0;
  top: 0;
}

/* === CITAT/REFERENCE SLIDER === */
.testimonial-slider {
  display: grid;
  cursor: pointer;
  margin-bottom: 2rem;
  color: var(--text-lys);
  font-style: italic;
  font-size: 15px;
  text-align: right; 
}
.testimonial {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1.5s ease; 
  pointer-events: none;
}
.testimonial.active {
  opacity: 1;
  pointer-events: auto;
}
.testimonial p {
  margin: 0;
  line-height: 1.6;
}

/* === BOOKING MODUL CSS === */
.booking-module {
  background: var(--bg-lerbund);
  padding: 2rem 1.5rem;
  margin: 3rem auto;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  text-align: left;
}
.bstep { display: none; }
.bstep.active { display: block; }
.type-toggle { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }

.btype-btn {
  flex: 1; 
  padding: 0.5rem 0.6rem; 
  background: var(--bg-stille-ler); 
  border: 1px solid transparent; 
  color: var(--text-stilket);
  cursor: pointer; font-family: 'Lora', serif; font-size: 0.85rem; 
  border-radius: 40px; 
  transition: all 0.3s ease;
}
.btype-btn.active { 
  border: 1px solid var(--text-roddybde); 
  color: var(--text-roddybde); 
  font-weight: 600;
}

.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-weight: 600; color: var(--text-roddybde); }
.cal-header button { background: none; border: none; font-size: 1.2rem; color: var(--text-roddybde); cursor: pointer; transition: opacity 0.2s;}
.cal-header button:hover { opacity: 0.6; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 1.5rem; }
.cal-dow { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-jordstemme); }
.cal-day {
  background: var(--bg-stille-ler); border: 1px solid transparent;
  padding: 0.5rem 0; text-align: center; cursor: pointer; font-family: 'Lora', serif;
  font-size: 0.9rem; border-radius: 40px; 
  color: var(--text-stilket);
  transition: all 0.2s ease;
}
.cal-day:hover:not(:disabled) { border-color: rgba(61, 50, 29, 0.3); }
.cal-day:disabled { opacity: 0.4; cursor: not-allowed; }
.cal-day.cal-available { border-color: var(--text-roddybde); color: var(--text-roddybde); font-weight: 600; }
.cal-day.cal-selected { 
  background: rgba(61, 50, 29, 0.12); 
  color: var(--text-roddybde); 
}
.cal-empty { background: none; border: none; cursor: default; }

.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 1.5rem; }
.time-slot {
  background: var(--bg-stille-ler); border: 1px solid var(--text-roddybde);
  padding: 0.6rem; text-align: center; cursor: pointer; border-radius: 40px; 
  font-family: 'Lora', serif; color: var(--text-roddybde);
  transition: all 0.2s ease;
}
.time-slot:hover { background: rgba(61, 50, 29, 0.05); }
.time-slot.selected { 
  background: rgba(61, 50, 29, 0.12); 
  color: var(--text-roddybde); 
}

.form-group input, .form-group textarea {
  width: 100%; padding: 0.8rem 1.2rem; margin-bottom: 0.8rem;
  font-family: 'Lora', serif; font-size: 0.9rem;
  border: 1px solid var(--text-stilket); background: var(--bg-stille-ler);
  box-sizing: border-box; color: var(--text-stilket);
  border-radius: 20px; 
}
.form-group textarea {
  border-radius: 12px; 
}

.booking-summary { background: var(--bg-stille-ler); padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.5rem; font-size: 0.9rem; border: 1px solid var(--text-stilket); }
.booking-summary p { margin: 0.2rem 0; }
.btn-group { display: flex; gap: 0.5rem; }
.error-msg { background: #f9e8e6; color: #8c3a2e; padding: 0.8rem 1.2rem; margin-bottom: 1rem; border: 1px solid #d9a5a0; font-size: 0.85rem; border-radius: 12px; }

/* === KATALOG COVER PÅ FORSIDEN === */
.katalog-container {
  margin: 3rem auto;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.katalog-header {
  margin-bottom: 1.5rem;
}
.katalog-header h3 {
  color: var(--text-roddybde);
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.katalog-cover-link {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(61, 50, 29, 0.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}
.katalog-cover-img {
  width: 100%;
  height: auto;
  display: block;
}
.katalog-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(61, 50, 29, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.katalog-overlay span {
  background: var(--bg-stille-ler);
  color: var(--text-roddybde);
  padding: 0.8rem 1.8rem;
  border-radius: 40px;
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.katalog-cover-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.katalog-cover-link:hover .katalog-overlay {
  opacity: 1;
}
.katalog-footer {
  margin-top: 1.5rem;
  text-align: center;
}

/* === SKJULT KATALOG MODAL (Display None forhindrer blokering) === */
.katalog-modal-overlay {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(40, 35, 25, 0.9);
  display: none; 
  align-items: center; 
  justify-content: center;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 2500; 
}
.katalog-modal-overlay.open { 
  opacity: 1; 
}

.katalog-modal-box {
  background: transparent;
  width: 100%; max-width: 800px; height: 90vh;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.close-katalog-btn {
  position: absolute; top: -10px; right: 0;
  background: var(--bg-stille-ler); border: none;
  font-size: 1.8rem; color: var(--text-roddybde); cursor: pointer; 
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: opacity 0.2s; z-index: 20;
}
.close-katalog-btn:hover { opacity: 0.7; }

/* Modal Slider layout */
.k-modal-slider {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y; 
}
.k-modal-slide {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: contain; 
  opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none;
}
.k-modal-slide.active {
  opacity: 1; pointer-events: auto;
}

/* Pile til navigation i modal */
.k-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(243, 237, 232, 0.95); 
  border: none; color: var(--text-roddybde);
  width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; transition: all 0.2s ease;
  z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.k-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.k-prev { left: -20px; }
.k-next { right: -20px; }

/* Tæller i bunden */
.k-counter {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  background: rgba(243, 237, 232, 0.9);
  padding: 0.4rem 1.2rem; border-radius: 20px;
  font-size: 0.9rem; color: var(--text-roddybde);
  z-index: 10; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* === GALLERI MODUL === */
.gallery-wrapper { 
  margin: 3rem auto;
  width: 100%;
  box-sizing: border-box;
}

/* === SKJULT KONTAKT MODAL (Display None forhindrer blokering) === */
.contact-modal-overlay {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(61, 50, 29, 0.7);
  display: none; 
  align-items: center; 
  justify-content: center;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 2000;
}
.contact-modal-overlay.open { 
  opacity: 1; 
}

.contact-modal {
  background: var(--bg-stille-ler);
  width: 90%; max-width: 500px; padding: 2.5rem;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  position: relative;
  text-align: left;
}
.close-modal {
  position: absolute; top: 1rem; right: 1.5rem;
  background: none; border: none; font-size: 2rem;
  color: var(--text-roddybde); cursor: pointer; line-height: 1;
  transition: opacity 0.2s;
}
.close-modal:hover { opacity: 0.6; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 0.8rem 1.2rem; font-family: 'Lora', serif; font-size: 0.9rem;
  border: 1px solid var(--text-stilket); background: var(--bg-stille-ler);
  box-sizing: border-box; color: var(--text-stilket);
  border-radius: 20px; 
}
.contact-form textarea {
  border-radius: 12px;
}
.contact-form button {
  background: var(--text-roddybde); color: var(--bg-stille-ler);
  border: none; padding: 0.9rem 1.4rem; cursor: pointer;
  font-family: 'Lora', serif; font-size: 1rem; border-radius: 40px; 
  transition: all 0.3s ease;
}
.contact-form button:hover {
  opacity: 0.85;
}

/* Footer border */
footer {
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px; 
  max-width: 90vw; 
  height: 2px;
  background-color: rgba(61, 50, 29, 0.12); 
}

/* === MOBIL OPTIMERING (Små skærme) === */
@media (max-width: 480px) {
  .hero-table td {
    display: block; width: 100%; padding: 0.2rem 0; 
  }
  .btn-light { width: 90%; }
  .box-grid { grid-template-columns: 1fr; }
  #sitenav { height: 70px; }
  
  .k-prev { left: 5px; }
  .k-next { right: 5px; }
}