/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Godt for hastigheden */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.woff2') format('woff2');
}

/* roboto-regular (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

/* roboto-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.woff2') format('woff2');
}

/* Gør at disse specifikke kort fylder hele bredden */
.price-card:nth-child(n+6) { 
  grid-column: 1 / -1; 
}

:root {
  --primary-color: #b13d36;
  --primary-dark: #7f2a25;
  --accent-color: #d9b777;
  --dark-color: #121212;
  --dark-elevated: #1c1c1c;
  --light-color: #ffffff;
  --text-color: #2c2c2c;
  --muted-color: #6d6d6d;
  --light-grey-bg: #f5f4f2;
  --sand-color: #f3eee8;
  --border-color: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 18px 35px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.22);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --max-width: 1200px;
  --section-space: clamp(3rem, 5vw, 5.5rem);
  --section-space-tight: clamp(2.5rem, 4vw, 4rem);
  --font-xxl: clamp(2.6rem, 4vw, 3.6rem);
  --font-xl: clamp(2rem, 3vw, 2.6rem);
  --font-lg: clamp(1.4rem, 2vw, 1.8rem);
  --font-md: clamp(1rem, 1.5vw, 1.15rem);
  --font-sm: 0.95rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--light-color);
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
}

section {
  scroll-margin-top: 120px;
}

h1, h2, h3 {
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--dark-color);
}

h1 {
  font-size: var(--font-xxl);
}

h2 {
  font-size: var(--font-xl);
}

h3 {
  font-size: var(--font-lg);
}

p {
  margin-bottom: 1rem;
  font-size: var(--font-md);
}

ul {
  list-style: none;
}

.bg-light {
  background-color: var(--light-grey-bg);
}

.text-muted {
  color: var(--muted-color);
}

.card {
  background: var(--light-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-glass {
  background: rgba(18, 18, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--light-color);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--light-color);
  font-size: 0.85rem;
  font-weight: 600;
}

.section-title {
  max-width: 680px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:focus-visible {
  outline: 3px solid rgba(217, 183, 119, 0.75);
  outline-offset: 3px;
}

.btn-primary {
  background-color: #b13d36; 
  color: var(--light-color);
  border: none; 
  box-shadow: 0 4px 15px rgba(177, 61, 54, 0.4); 
}

.btn-primary:hover {
  background-color: #962f29; 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(177, 61, 54, 0.5);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  background: var(--dark-color);
  color: var(--light-color);
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  background: var(--dark-elevated);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--light-color);
}

.btn-nav {
  background: var(--primary-color);
  color: var(--light-color);
  padding: 0.65rem 1.3rem;
  font-size: 1rem;
}

.btn-nav:hover {
  background: var(--primary-dark);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #d9b777, #b13d36);
  z-index: 2000;
}

header {
  background-color: rgba(18, 18, 18, 0.92);
  color: var(--light-color);
  position: sticky;
  top: 0;
  z-index: 1100;
  backdrop-filter: blur(12px);
  transition: padding 0.2s ease, box-shadow 0.2s ease;
}

header.shrink {
  box-shadow: var(--shadow-sm);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem clamp(1.25rem, 3vw, 2rem);
}

.logo img {
  height: 88px;
  width: auto;
}

nav {
  position: relative;
}

nav ul.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 1.5rem;
}

nav ul.nav-menu li a {
  color: var(--light-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

nav ul.nav-menu li a:hover:not(.btn),
nav ul.nav-menu li a.active:not(.btn) {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

#burger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

#burger-menu span {
  display: block;
  width: 26px;
  height: 3px;
  background-color: var(--light-color);
  margin: 5px 0;
  transition: all 0.3s ease;
}

#burger-menu.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

#burger-menu.open span:nth-child(2) {
  opacity: 0;
}

#burger-menu.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 900;
}

.nav-overlay.show {
  opacity: 1;
  visibility: visible;
}

.hero {
  min-height: 82vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  color: var(--light-color);
  background: url('photo/billede_af_butikken.jpg.webp') center 35%/cover no-repeat;
  padding-bottom: 6rem;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(8, 8, 8, 0.88), rgba(20, 20, 20, 0.45));
}

.hero-overlay {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4vw, 3rem);
  max-width: 760px;
  border-radius: var(--radius-lg);
}

.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  font-size: 0.85rem;
  color: var(--accent-color);
  margin-bottom: 0.75rem;
}

.hero h1 {
  color: var(--light-color);
}

.hero p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0 1rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.intro-strip {
  background: var(--sand-color);
  padding: var(--section-space-tight) 0;
  border-bottom: 1px solid #e7e2dc;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  align-items: center;
}

.intro-title {
  font-weight: 700;
  font-size: 1.5rem;
}

.intro-cta {
  text-align: right;
}

.intro-cta p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #555;
}

.about {
  padding: var(--section-space) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  align-items: center;
}

.highlight-list {
  margin: 1.5rem 0;
}

.highlight-list li {
  margin-bottom: 0.6rem;
  font-weight: 500;
}

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-frame.portrait {
  aspect-ratio: 3 / 4;
}

.media-frame.wide {
  aspect-ratio: 4 / 3;
}

.media-frame.focus-top img {
  object-position: center 20%;
}

.services-overview {
  padding: var(--section-space) 0;
}

.services-overview h2 {
  text-align: center;
}

.service-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.service-item {
  background: var(--light-color);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-icon svg {
  color: var(--primary-color);
}

.experience,
.why-us,
.how-book,
.social-proof {
  padding: var(--section-space) 0;
}

.experience-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2rem;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.experience-card {
  background: var(--sand-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.photo-strip .media-frame {
  aspect-ratio: 4 / 3;
}

.cta-band {
  background: var(--dark-color);
  color: var(--light-color);
  padding: var(--section-space-tight) 0;
}

.cta-band h2 {
  color: var(--light-color);
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  align-items: center;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.why-grid,
.how-grid,
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.why-item,
.how-item,
.social-item {
  background: var(--light-color);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.faq {
  padding: var(--section-space) 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.faq-item {
  background: var(--light-grey-bg);
  padding: 1.5rem;
  border-radius: var(--radius-md);
}
.quick-contact-form {
  margin: 0 auto var(--section-space-tight);
  max-width: 720px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(145deg, #ffffff, #f6f2ec);
  border: 1px solid rgba(177, 61, 54, 0.15);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 0.9rem;
}

.quick-contact-form h2 {
  margin-bottom: 0.2rem;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.quick-contact-form input,
.quick-contact-form textarea {
  width: 100%;
  border: 1px solid #d7d2ca;
  border-radius: 12px;
  padding: 0.82rem 0.95rem;
  font: inherit;
  color: var(--text-color);
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.quick-contact-form input::placeholder,
.quick-contact-form textarea::placeholder {
  color: #8b857c;
}

.quick-contact-form input:focus,
.quick-contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(177, 61, 54, 0.16);
}

.quick-contact-form button {
  justify-self: start;
  border: none;
  border-radius: 999px;
  padding: 0.78rem 1.4rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, var(--primary-color), #ca665f);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(177, 61, 54, 0.26);
}

.quick-contact-form button:focus-visible {
  outline: 3px solid rgba(217, 183, 119, 0.75);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .quick-contact-form button {
    width: 100%;
    justify-self: stretch;
  }
}


.contact-preview {
  padding: var(--section-space) 0;
}

.contact-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  align-items: center;
}

.contact-preview-details a {
  color: var(--primary-color);
  text-decoration: none;
}

.contact-preview-card {
  background: var(--light-color);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.contact-preview-card ul {
  list-style: none;
  margin-bottom: 1rem;
}

.page-content {
  padding-top: 0;
  padding-bottom: 0 !important; 
  min-height: 60vh;
  margin-bottom: 0 !important; 
}

.page-hero {
  background: linear-gradient(120deg, rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.6)), url('photo/billede_af_butikken.jpg.webp') center/cover;
  color: var(--light-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 75vh;     
  padding-top: 4rem;
  padding-bottom: 7.5rem; 
}

.page-hero h1 {
  color: var(--light-color);
}

.experience-story,
.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  align-items: center;
  padding: var(--section-space-tight) 0;
}

.experience-story-text,
.inspiration-text {
  max-width: 560px;
}


.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 2rem;
  align-items: stretch; 
  position: relative;
  z-index: 10;
  margin-top: -5rem;
  padding-bottom: 2rem;
}

@media (max-width: 900px) {
  .contact-cards {
    grid-template-columns: 1fr;
    margin-top: -2rem; 
    gap: 1.5rem;
  }
}

.contact-card {
  background: #ffffff; 
  border-radius: var(--radius-md);
  padding: 2.5rem; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.contact-card a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 900px) {
  .contact-cards {
    grid-template-columns: 1fr; 
    margin-top: 0;
    gap: 1.5rem;
  }
}



.photo-showcase,
.signature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: var(--section-space-tight) 0;
}

.photo-card,
.signature-card,
.video-card {
  background: var(--light-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.photo-card .card-body,
.signature-card .card-body,
.video-card .card-body {
  padding: 1.5rem;
}

.signature-card .media-frame,
.photo-card .media-frame {
  aspect-ratio: 3 / 4;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: var(--section-space-tight) 0;
}

/* --- NY KODE TIL PRISER.SHTML --- */

.price-groups {
  display: grid;
  /* Dette laver 4 lige store kolonner */
  grid-template-columns: repeat(1, 1fr); 
  gap: 15px; /* Afstand mellem kortene */
  margin-top: 2rem;
}

/* Selve kortets design */
.price-card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Lidt skygge som på billedet */
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

/* Den populære pakke skal skille sig lidt ud */
.price-card.popular {
  border: 2px solid #d4af37; /* Guld kant */
  position: relative;
  transform: translateY(-10px); /* Løfter den lidt op som på billedet */
}

/* Tagget "Mest populær" */
.tag {
  background: #d4af37;
  color: #fff;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

/* Styling af listerne */
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.price-row {
  display: flex;
  justify-content: space-between; /* Skubber pris og navn ud til hver side */
  padding: 8px 0;
  border-bottom: 1px dashed #eee; /* Stiplet linje under hver pris */
}

.price-row:last-child {
  border-bottom: none;
}

/* MOBIL VISNING: Når skærmen er lille, skift til 1 kolonne */
@media (max-width: 900px) {
  .price-groups {
    grid-template-columns: repeat(2, 1fr); /* 2 på tablets */
  }
}

@media (max-width: 600px) {
  .price-groups {
    grid-template-columns: 1fr; /* 1 på mobiler */
  }
  
  .price-card.popular {
    transform: none; /* Fjern løft på mobil så det ikke roder */
  }
}


.included-list {
  display: grid;
  gap: 0.75rem;
  max-width: 680px;
  margin: 2rem auto 0;
}

.contact-layout {
  align-items: block;
}

.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Her deler vi siden op i 2 lige store dele */
  gap: 2rem;
  align-items: stretch; /* Sørger for at boksene er lige høje */
  position: relative;
  z-index: 10;
  margin-top: -4rem; /* Løfter boksene lidt op over billedet for et moderne look */
}

.contact-card {
  background: #ffffff; /* Hvid baggrund */
  border-radius: var(--radius-md);
  padding: 2.5rem; /* Mere luft inde i boksen */
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* En flottere skygge */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-card p {
  font-size: 1.1rem;      
  margin-bottom: 1.5rem;  
  line-height: 1.6;
}


.contact-card a {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.contact-card a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 900px) {
  .contact-cards {
    grid-template-columns: 1fr; /* Kun 1 kolonne på mindre skærme */
    margin-top: 0;
    gap: 1.5rem;
  }
}

/* --- SLUT PÅ NY KODE --- */
.opening-hours {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.open-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.open-status span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #35c66a;
}

.open-status.closed span {
  background: #d24b4b;
}

.contact-map iframe {
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius-md);
  border: 0;
}

.contact-actions {
  margin-top: auto;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

.contact-actions .btn {
  color: #ffffff !important; 
  font-weight: 600;
  padding: 0.8rem 1.2rem;
  flex: 1; 
  text-align: center;
}

/* Specifikt for de mørke knapper */
.contact-actions .btn-secondary {
  background-color: var(--dark-color);
  border: 1px solid transparent;
}

/* Specifikt for den røde knap */
.contact-actions .btn-primary {
  background: var(--primary-color);
}

.site-footer {
  background-color: var(--dark-color);
  color: var(--light-grey-bg);
  padding: var(--section-space-tight) 0 2rem;
  margin-top: 0 !important; 
  border-top: 4px solid var(--primary-color); 
  position: relative;
  z-index: 5;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-heading {
  font-size: 1.1rem;
  color: var(--light-color);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.5rem;
  display: inline-block;
}

.footer-links ul,
.footer-social {
  list-style: none;
}

.footer-links ul li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--light-grey-bg);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-color);
}

.footer-contact a {
  color: var(--light-grey-bg);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-social a {
  margin-right: 1rem;
  display: inline-block;
}

.footer-social img {
  transition: transform 0.3s ease;
}

.footer-social a:hover img {
  transform: scale(1.1);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  font-size: 0.9rem;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-scissor {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: var(--primary-color);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  z-index: 999;
  transition: transform 0.2s ease;
}

.scroll-scissor svg {
  width: 32px;
  height: 32px;
  stroke: var(--light-color);
  stroke-width: 3;
  fill: none;
}

.mobile-cta {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(18, 18, 18, 0.95);
  border-radius: 999px;
  padding: 0.4rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  z-index: 1200;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mobile-cta a {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.mobile-cta .cta-book {
  background: var(--primary-color);
  color: var(--light-color);
}

.mobile-cta .cta-call {
  background: rgba(255, 255, 255, 0.12);
  color: var(--light-color);
}

.mobile-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.contact-extra {
  display: flex;
  flex-direction: column;
  align-items: center;     /* Centrerer alt indhold vandret */
  text-align: center;      /* Centrerer teksten */
  gap: 2rem;               /* Afstand mellem tekst og knapper */
  
  padding-top: 4rem;       
  padding-bottom: 2rem;    
}

.contact-extra-text {
  max-width: 700px;
  margin: 0 auto;
}

.contact-extra-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .intro-cta {
    text-align: left;
  }

  .cta-actions {
    justify-content: flex-start;
  }

  .contact-extra {
    grid-template-columns: 1fr;
  }
}

/* --- FIX: TVING MENU TIL AT FYLDE HELE SKÆRMEN --- */
@media (max-width: 900px) {
    
    /* 1. Selve menu-containeren */
    nav ul.nav-menu.show, 
    nav ul.nav-menu {
        position: fixed !important;    /* Låser den fast til skærmen */
        inset: 0 !important;           /* Sætter top, bund, højre, venstre til 0 */
        width: 100vw !important;       /* 100% bredde */
        height: 100vh !important;      /* 100% højde */
        background: rgba(10, 10, 10, 0.98) !important; /* Sort baggrund */
        
        /* Layout indeni */
        flex-direction: column !important;
        justify-content: center !important; /* Centrerer lodret */
        align-items: center !important;     /* Centrerer vandret */
        
        /* Fjern "boks" looket */
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 9998 !important;      /* Ligger over alt andet */
    }

    /* 2. Sørg for at Burger-ikonet / Krydset ligger ØVERST */
    #burger-menu {
        position: fixed !important;
        top: 30px !important;
        right: 20px !important;
        z-index: 9999 !important;      /* Skal være højere end menuen! */
        display: block !important;
    }

  nav ul.nav-menu {
    display: none;
    flex-direction: column;
    background-color: var(--dark-color);
    position: absolute;
    top: 92px;
    right: 0;
    width: min(320px, 100vw);
    padding: 1.5rem 1rem 2rem;
    border-bottom-left-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  nav ul.nav-menu.show {
    display: flex;
  }

  nav ul.nav-menu li {
    margin: 0.6rem 0;
    text-align: left;
  }

  .btn-nav {
    width: 100%;
  }

  .hero-overlay {
    padding: 1.75rem;
  }

  .hero-meta,
  .trust-chips {
    flex-direction: column;
    align-items: center;
  }

  .scroll-scissor {
    bottom: 5.5rem;
    right: 1rem;
  }

  .mobile-cta {
    display: flex;
  }
}

@media (max-width: 520px) {
  .hero {
    min-height: 78vh;
  }

  .logo img {
    height: 70px;
  }

  .hero-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .btn,
  .service-item {
    transition: none;
  }
}


.contact-card ul.opening-hours {
  margin-top: 1.5rem;
  padding: 0;
}

.contact-card ul.opening-hours li {
  display: flex;
  justify-content: space-between; 
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); 
  font-size: 0.95rem;
  color: #444;
}

.contact-card ul.opening-hours li:last-child {
  border-bottom: none; 
}

.contact-card ul.opening-hours li strong {
  font-weight: 500;
  color: var(--dark-color);
}

/* --- FIX TIL BOOK NU KNAP (GÆLDER HELE SIDEN) --- */
nav ul.nav-menu li a.btn {
  /* Tvinger knappen til at bruge samme mål som de andre knapper */
  padding: 0.85rem 1.6rem !important; 
  border: none !important;            
  border-radius: 999px !important;    
  margin-bottom: 0 !important;
  
  /* Sørger for perfekt centrering af teksten */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important; /* VIGTIGT: Dette retter at teksten hænger lidt lavt */
  
  /* Farver */
  background-color: #b13d36;
  color: #ffffff !important;
  box-shadow: none !important;
  margin-top: 0; /* Nulstiller margin så den ikke hopper */
}

/* Hover effekt */
nav ul.nav-menu li a.btn:hover {
  background-color: #962f29;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(177, 61, 54, 0.3) !important;
}


/* --- NYT DESIGN TIL PRISER --- */

/* 1. Fikser afstanden mellem billedet og overskriften */
.price-section {
  padding-top: 5rem; /* Her giver vi masser af luft i toppen */
}

/* 2. Gør priskortene lækre at se på */
.price-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04); /* En helt fin kant */
}

.price-card:hover {
  transform: translateY(-5px); /* Løfter kortet lidt når man peger på det */
  box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Giver en dyb skygge */
}

/* 3. Stiplede linjer mellem tekst og pris (Klassisk menukort-look) */
.price-row {
  display: flex;
  align-items: baseline; /* Sørger for at teksten flugter på linjen */
  justify-content: space-between;
}

.price-row span:first-child {
  position: relative;
  overflow: hidden;
  flex: 1; /* Lader navnet fylde det meste */
}

.price-row span:first-child::after {
  content: "................................................................";
  position: absolute;
  padding-left: 0.5rem;
  color: #ddd; /* Lyse prikker */
  letter-spacing: 2px;
}

.price-row span:last-child {
  background-color: var(--light-color); /* Skjuler prikkerne bag prisen */
  padding-left: 0.5rem;
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--primary-color);
}

/* 4. Lækkert design til "Hvad er inkluderet" boksen */
.included-list {
  background-color: var(--sand-color); /* Sandfarvet baggrund */
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  margin-top: 4rem;
  text-align: center;
}

.included-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Pæne kolonner */
  gap: 1.5rem;
  margin-top: 2rem;
  text-align: left;
}

.included-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
}

/* Laver et tjekmærke foran hvert punkt */
.included-list li::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* --- FIX TIL INSPIRATION SIDE --- */

/* 1. Skaber afstand mellem det store billede og "Signature styles" */
.inspiration-space {
  padding-top: 5rem; 
}

/* 2. Nyt, lækkert design til FAQ-sektionen */
.faq-section-styled {
  background-color: var(--light-grey-bg); /* Hele sektionen bliver grå */
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin-top: 4rem; /* Lidt luft til sektionen ovenover */
}

.faq-section-styled h2 {
  text-align: center; /* Centrerer overskriften "FAQ..." */
  margin-bottom: 2rem;
}

/* Gør selve spørgsmålene til hvide kort med skygge */
.faq-section-styled .faq-item {
  background-color: #ffffff; 
  border-radius: var(--radius-md);
  box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Let skygge */
  padding: 2rem;
  border: 1px solid rgba(0,0,0,0.03);
}

/* Retter knapperne ind, så de står pænt i midten */
.faq-section-styled .price-cta {
  justify-content: center;
  margin-top: 3rem;
  padding-bottom: 0;
}


/* =========================================
   ULTIMATIVE RETTELSER (INDSÆT I BUNDEN)
   ========================================= */

/* --- FIX 1: FJERN DEN HVIDE STREG I FOOTEREN --- */
/* Vi tvinger border-top til at være 'none' */
.footer-bottom {
  border-top: none !important;
  padding-top: 1rem !important; /* Justerer afstanden lidt, når stregen er væk */
}


/* --- FIX 2: GØR BOKSENE PÆNE (SIGNATURE STYLES & VIDEO) --- */
/* Dette centrerer teksten og strammer designet op, så det ikke ser "goofy" ud */

/* 1. Sørg for at selve tekst-området centrerer alt indhold */
.signature-card .card-body,
.video-card .card-body {
  text-align: center !important; /* Tvinger teksten ind på midten */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Sikrer at boksen selv er centreret */
  padding-top: 1.2rem !important; /* Lidt mindre afstand op til billedet */
}

/* 2. Stram afstanden op mellem overskrift (h3) og tekst (p) inde i boksene */
.signature-card .card-body h3,
.video-card .card-body h3 {
    margin-bottom: 0.5rem !important; /* Mindre luft under overskriften */
}


/* --- FORSIDE DESIGN OPDATERING --- */

/* 1. Bedre sektions-afstande (Løser "Hvem klipper vi" problemet) */
.section-spacing-large {
  padding-top: 8rem;
  padding-bottom: 4rem;
}

/* 2. Nyt design til "Om os" (Et sted med stil...) */
.about {
  align-items: center; /* Centrerer tekst vertikalt ift. billedet */
  gap: 4rem; /* Mere luft mellem tekst og billede */
}

.about-content {
  max-width: 600px; /* Sikrer at teksten ikke bliver for bred og svær at læse */
}

/* 3. Ensartede "Kort" til Oplevelser, Hvorfor Os, Sådan Booker Du */
/* Dette får alt til at stå på linje */
.experience-card, 
.why-item, 
.how-item,
.faq-item {
  background: #ffffff; /* Hvid baggrund */
  padding: 2.5rem; /* Mere luft indeni */
  border-radius: var(--radius-md);
  box-shadow: 0 5px 20px rgba(0,0,0,0.06); /* Lækker skygge */
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.3s ease;
  height: 100%; /* Sikrer at de er lige høje */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.experience-card:hover, 
.why-item:hover, 
.how-item:hover {
  transform: translateY(-5px); /* Lille løft ved mus-over */
}

.experience-card h3, 
.why-item h3, 
.how-item h3,
.faq-item h3 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: var(--primary-color); /* Rød overskrift ser godt ud */
}

/* 4. Fix af knapperne (Afstand) */
.hero-actions, .cta-actions, .intro-cta, .price-cta {
  gap: 1.5rem; /* Sikrer god afstand mellem knapperne */
}

/* 5. Justering af billederne i "Oplevelsen" */
.photo-strip {
  margin-top: 3rem;
  gap: 1.5rem;
}

/* --- FIX AF LAYOUT OG AFSTANDE --- */

/* 1. Generel afstand til toppen af sektioner (Løser "Hvem klipper vi" problemet) */
.section-space-top {
  padding-top: 6rem !important; /* God luft op til overskriften */
  padding-bottom: 4rem;
}

/* 2. Sørger for at knapper (Book tid / Se priser) ikke klistrer sammen */
.cta-actions, .price-cta, .hero-actions {
  display: flex;
  gap: 1.5rem !important; /* VIGTIGT: Skaber luft mellem knapperne */
  flex-wrap: wrap;
}

/* 3. Retter "Et sted med stil" teksten ind, så den ikke står for bredt */
.about {
  display: grid;
  /* Her sikrer vi, at teksten og billedet deler pladsen pænt (50/50 ca) */
  grid-template-columns: 1fr 1fr; 
  gap: 4rem;
  align-items: center;
}

.about-content {
  /* Fjerner padding der måske skubbede teksten skævt */
  padding: 0 !important; 
  max-width: 100%;
}

/* 4. "STANDARD GRID" - Dette får ALLE bokse til at stå på linje */
/* Brug denne til: Hvem klipper vi, Oplevelsen, Sådan booker du */
.standard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Designet af selve kortene i grid'et (Oplevelsen, Sådan booker du, FAQ) */
.info-card, .faq-item {
  background: #f9f9f9; /* Lys grå baggrund som på dine billeder */
  padding: 2.5rem;
  border-radius: var(--radius-md);
  height: 100%; /* Sikrer de er lige høje */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left; /* Sikrer venstrestillet tekst */
  border: 1px solid rgba(0,0,0,0.05);
}

.info-card h3, .faq-item h3 {
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--dark-color);
}

/* Gør FAQ ens med de andre bokse */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* På mobil skal "Om os" billedet og teksten ligge under hinanden */
@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =========================================
   FIX: Container-padding + ens sektion-luft
   (indsæt nederst i style.css)
   ========================================= */

/* 1) Gør container robust (undgår at padding bliver nulstillet af padding-shorthand) */
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}

/* 2) Alle <section class="container ..."> får ens top/bund + sikre side-kanter
      (fixer billede 2, 3, 4, 5, 7) */
main > section.container{
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);

  /* side-kanter (så de ikke kysser kanten) */
  padding-left: clamp(1.25rem, 3vw, 2rem);
  padding-right: clamp(1.25rem, 3vw, 2rem);
}

/* 3) HERO: mere luft fra headeren (fixer billede 1) */
.hero{
  padding-top: clamp(6rem, 10vh, 8rem);
  padding-bottom: clamp(5rem, 10vh, 7rem);
}

/* Hvis boksen stadig kommer for tæt på header i nogle skærme */
.hero-overlay{
  margin-top: 1rem;
}

/* 4) "Book tid online" + "Se alle priser" skal have mere luft ned fra kortene
      (fixer billede 6) */
.price-cta{
  margin-top: 2.5rem;
}

/* (Valgfri) lidt mere luft under section titles generelt */
.section-title{
  margin-bottom: 2rem;
}

/* HERO skal passe i første view (som billede 2) */
:root{
  /* ca. header-højde (logo 88px + padding) */
  --header-offset: 104px;
}

@media (max-width: 520px){
  :root{
    --header-offset: 88px;
  }
}


/* Fallback til gamle browsere */
.hero{
  min-height: calc(100vh - var(--header-offset));
  padding: clamp(2rem, 4vh, 3rem) 0;   /* mindre end 6rem i bunden */
}

/* Bedre på mobil (svh tager højde for browser UI) */
@supports (height: 100svh){
  .hero{
    min-height: calc(100svh - var(--header-offset));
  }
}

/* Sørger for at boksen ikke “hænger” for langt nede */
.hero-overlay{
  margin: 0;
}


/* Skub tekst/knap ned i page-hero */
.page-hero .container{
  margin-top: 2.5rem;
}

@media (max-width: 768px){
  .page-hero .container{
    margin-top: 1.5rem;
  }
}

/* Kontakt: mere luft mellem hero-billede og kontakt/åbningstider */
.contact-layout{
  padding-top: 2rem;         /* giver luft under hero */
}

.contact-cards{
  margin-top: -1.5rem;       /* før: -4rem / -5rem (for tæt) */
}

/* Mobil: ingen overlap, pæn afstand */
@media (max-width: 900px){
  .contact-layout{
    padding-top: 1.5rem;
  }

  .contact-cards{
    margin-top: 0;           /* så den ikke klistrer */
  }
}

/* Layout til listen */
.footer-social .social-links {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0;
  display: flex;
  gap: 15px;
}

/* Design af selve ikon-knapperne */
.footer-social .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;          /* Bredde på knappen */
  height: 45px;         /* Højde på knappen */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Diskret lys grå kant */
  border-radius: 4px;   /* Let rundede hjørner */
  color: #ffffff;       /* Hvidt ikon */
  font-size: 1.2rem;    /* Størrelse på ikonet */
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Når musen holder over (Hover) */
.footer-social .social-links a:hover {
  border-color: #e7240a; /* Kanten bliver helt hvid */
  background-color: rgba(255, 255, 255, 0.1); /* Let lys baggrund */
  transform: translateY(-3px); /* Løfter sig lidt */
}





/* =========================================
   NYT DESIGN: PRIVATLIVSPOLITIK (LEGAL)
   ========================================= */

/* Gør Hero-billedet lidt mindre voldsomt på undersider */
.page-hero.small-hero {
  min-height: 45vh; /* Mindre højde end forsiden */
  padding-bottom: 4rem;
  background-position: center 30%; /* Justerer billedet lidt op */
}

/* Sektionen udenom "papiret" */
.legal-section {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background-color: var(--light-grey-bg); /* Sikrer grå baggrund bag "papiret" */
}

/* Selve "Papiret" - den hvide boks */
.legal-document {
  max-width: 800px; /* Optimal læsebredde (ikke for bred) */
  margin: 0rem auto 0; /* Trækker boksen lidt op over hero-billedet for lækker effekt */
  background: #ffffff;
  padding: 3.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Dyb skygge */
  position: relative;
  z-index: 10;
  border: 1px solid rgba(0,0,0,0.02);
}

/* Headeren i dokumentet */
.legal-header {
  border-bottom: 2px solid var(--sand-color);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.legal-header h2 {
  font-size: 2rem;
  color: var(--dark-color);
  margin-bottom: 0.5rem;
}

.last-updated {
  font-size: 0.9rem;
  color: var(--muted-color);
  font-style: italic;
}

/* Brødteksten */
.legal-body {
  font-size: 1.05rem;
  line-height: 1.8; /* Bedre læsbarhed */
  color: #444;
}

/* De enkelte punkter (1, 2, 3...) */
.legal-block {
  margin-top: 2.5rem;
}

.legal-block h3 {
  font-size: 1.25rem;
  color: var(--primary-color); /* Din røde farve */
  margin-bottom: 0.75rem;
  font-weight: 700;
}

/* Lister inde i dokumentet */
.legal-body ul {
  margin: 1rem 0 1.5rem 1.5rem;
  list-style: none;
}

.legal-body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Små røde prikker ud for listen */
.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

/* Links i teksten */
.legal-body a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.legal-body a:hover {
  color: var(--dark-color);
}

/* Adresse feltet style */
address {
  font-style: normal;
  background: var(--sand-color);
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  margin-top: 1rem;
  font-size: 0.95rem;
  border-left: 4px solid var(--primary-color);
}

/* MOBIL TILPASNING */
@media (max-width: 768px) {
  .legal-document {
    padding: 2rem;
    margin-top: -3rem; /* Mindre overlap på mobil */
    width: 90%; /* Sikrer margin i siderne */
  }
  
  .legal-header h2 {
    font-size: 1.5rem;
  }
}


/* MOBIL TILPASNING */
@media (max-width: 768px) {
  .legal-document {
    padding: 2rem;
    /* ÆNDRET HER: Fra -3rem til -1rem for at matche det nye look */
    margin-top: -1rem; 
    width: 90%; 
  }
  
  .legal-header h2 {
    font-size: 1.5rem;
  }
}