/* =========================================================
   ZUR ERLENINSEL – Gestaltung
   Diese eine Datei steuert das Aussehen aller sechs Seiten.
   Farben, Schriften und Abstände stehen unten am Anfang –
   änderst du sie hier, ändern sie sich überall.
   ========================================================= */

/* ---------- 1. Farben ---------- */
:root {
  --background: oklch(0.99 0.003 100);        /* Seitenhintergrund       */
  --foreground: oklch(0.28 0.035 154);        /* Text                    */
  --primary: oklch(0.36 0.065 157);           /* Dunkelgrün, Knöpfe      */
  --primary-foreground: oklch(0.99 0.004 110);/* Text auf Dunkelgrün     */
  --secondary: oklch(0.95 0.017 110);         /* helle Bänder            */
  --muted: oklch(0.96 0.009 110);             /* abgehobener Abschnitt   */
  --muted-foreground: oklch(0.51 0.022 150);  /* graugrüner Text         */
  --accent: oklch(0.91 0.028 125);            /* Hover-Fläche            */
  --border: oklch(0.88 0.012 130);            /* Linien                  */
  --destructive: oklch(0.52 0.16 25);         /* Fehlermeldung           */
  --hero-foreground: oklch(0.99 0.006 100);   /* Text auf dem Titelbild  */
  --season: oklch(0.5 0.045 118);             /* Saison-Punkt            */
  --hero-shade: linear-gradient(90deg, oklch(0.15 0.04 155 / 68%), oklch(0.15 0.04 155 / 8%) 85%);
  --shadow-soft: 0 12px 35px oklch(0.2 0.03 150 / 7%);
  --shadow-btn: 0 1px 2px oklch(0 0 0 / 5%);
  /* Mischstufen für Hover-Zustände */
  --primary-90: oklch(0.36 0.065 157 / 90%);
  --hero-foreground-50: oklch(0.99 0.006 100 / 50%);
  --hero-foreground-10: oklch(0.99 0.006 100 / 10%);
}

/* ---------- 2. Schriften ---------- */
:root {
  --font-sans: 'DM Sans', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- 3. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); }

/* ---------- 4. Seitenumbruch ---------- */
.container-wide { max-width: 1240px; margin-inline: auto; padding-inline: 48px; }

/* ---------- 5. Kopfzeile ---------- */
.site-header { height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--primary); flex-shrink: 0; }
.brand-symbol { width: 45px; height: 45px; }
.brand-name { font-family: var(--font-display); font-size: 31px; line-height: 1; display: block; }
.brand-caption { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; display: block; margin-top: 8px; }
.nav-desktop { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: 13px; padding-block: 12px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav-link:hover, .nav-link[data-active='true'] { border-color: var(--primary); }
.mobile-menu { display: none; }
.mobile-nav { display: none; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-block: 20px; }
body.menu-open .mobile-nav { display: flex; }
.icon-close { display: none; }
body.menu-open .icon-open { display: none; }
body.menu-open .icon-close { display: inline-flex; }

/* ---------- 6. Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; border-radius: 4px; border: 1px solid transparent;
  height: 36px; padding-inline: 16px; font-size: 14px; font-weight: 500;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.btn-lg { height: 48px; padding-inline: 20px; font-size: 12px; }
.btn-icon { height: 36px; width: 36px; padding: 0; }
.btn-later { margin-top: 24px; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--primary-90); }
.btn-hero { background: var(--primary-foreground); color: var(--primary); box-shadow: var(--shadow-btn); }
.btn-hero:hover { background: var(--secondary); }
.btn-hero-outline { background: transparent; border-color: var(--hero-foreground-50); color: var(--hero-foreground); }
.btn-hero-outline:hover { background: var(--hero-foreground-10); }
.btn-outline { background: var(--background); border-color: var(--border); box-shadow: var(--shadow-btn); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--accent); }

/* ---------- 7. Titelbild (Startseite) ---------- */
.hero { position: relative; height: 600px; min-height: 530px; color: var(--hero-foreground); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: var(--hero-shade); }
.hero-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 22px; }
.hero h1 { font-size: 86px; line-height: 1; margin-top: 22px; }
.hero-subtitle { font-family: var(--font-display); font-size: 42px; font-style: italic; margin-top: 2px; line-height: 1.25; }
.hero-description { font-size: 14px; line-height: 1.9; max-width: 390px; margin-top: 21px; opacity: .9; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.hero-location { position: absolute; bottom: 25px; right: 48px; display: flex; gap: 8px; align-items: center; font-size: 11px; }
.hero-scroll { position: absolute; bottom: 26px; left: 48px; display: flex; gap: 10px; align-items: center; font-size: 10px; letter-spacing: 1px; }
.wide-only { display: none; }
@media (min-width: 640px) { .wide-only { display: inline; } }

/* ---------- 8. Kleine Überschrift über Abschnitten ---------- */
.eyebrow { text-transform: uppercase; font-size: 10px; letter-spacing: 2.3px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.eyebrow-rule { display: inline-block; width: 28px; height: 1px; background: var(--hero-foreground); opacity: .7; }

/* ---------- 9. Saisonhinweis ---------- */
.season-band { background: var(--secondary); padding: 19px 24px; font-size: 12px; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.season-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--season); }
.season-strong { font-weight: 500; }
.season-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 10. Abschnitte ---------- */
.section { padding-block: 78px; }
.section-heading { font-size: 48px; line-height: 1.15; margin-top: 14px; }
.section-copy { font-size: 14px; color: var(--muted-foreground); line-height: 1.9; }
.text-primary { color: var(--primary); }
.copy-after { margin-top: 12px; }
.copy-later { margin-top: 20px; }
.stack-lg { margin-top: 64px; }
.narrow { max-width: 768px; }
.bg-muted { background: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; margin-top: 20px; }
.hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-foreground); margin-top: 20px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.section-head-note { display: none; font-size: 12px; color: var(--muted-foreground); padding-bottom: 8px; }
@media (min-width: 640px) { .section-head-note { display: block; } }

/* ---------- 11. Zweispaltige Blöcke ---------- */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.intro-grid.items-start { align-items: start; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.visit-photo { width: 100%; aspect-ratio: 1.25; object-fit: cover; border-radius: 4px; }

/* ---------- 12. Vierzeile (Zelte, Wasser, ...) ---------- */
.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; border-top: 1px solid var(--border); margin-top: 45px; padding-top: 26px; }
.feature { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.feature svg { width: 22px; height: 22px; stroke-width: 1.4; color: var(--primary); }

/* ---------- 13. Erlebnis-Karten ---------- */
.experience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 35px; }
.experience-card { display: block; }
.photo-frame { overflow: hidden; border-radius: 4px; }
.experience-photo { width: 100%; aspect-ratio: 1.45; object-fit: cover; border-radius: 4px; transition: transform .5s; }
.experience-card:hover .experience-photo { transform: scale(1.04); }
.experience-index { text-transform: uppercase; font-size: 10px; letter-spacing: 2.3px; font-weight: 600; color: var(--muted-foreground); margin-top: 24px; }
.experience-title { font-size: 29px; margin-top: 20px; }
.experience-text { margin-top: 8px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 12px; color: var(--primary); }
.card-bottom svg { width: 18px; height: 18px; }

/* ---------- 14. Hakenlisten ---------- */
.detail-list { display: grid; gap: 13px; font-size: 13px; margin-block: 24px; }
.detail-list li { display: flex; align-items: center; gap: 10px; }
.detail-list svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 15. Preise ---------- */
.price-list { margin-top: 20px; }
.price-row { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.price-row strong { white-space: nowrap; font-weight: 500; }
.divider { margin-top: 64px; border-top: 1px solid var(--border); padding-top: 32px; }
.heading-md { font-size: 30px; }
.space-2 p + p { margin-top: 8px; }

/* ---------- 16. Kontaktangaben ---------- */
.contact-list { display: grid; gap: 13px; font-size: 13px; margin-block: 24px; }
.contact-line { display: flex; align-items: flex-start; gap: 12px; }
.contact-line svg { width: 19px; height: 19px; flex-shrink: 0; }
.contact-later { margin-top: 28px; }
.contact-after { margin-top: 16px; }

/* ---------- 17. Unterseiten-Überschrift ---------- */
.inner-title { background: var(--secondary); padding-block: 60px; }
.inner-title h1 { font-size: 60px; margin-top: 12px; }
.inner-title-text { margin-top: 16px; max-width: 672px; }

/* ---------- 18. Anfrageformular ---------- */
.inquiry-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.field-wide { grid-column: span 2; }
.field input, .field select, .field textarea {
  background: var(--background); border: 1px solid var(--border); border-radius: 4px;
  padding: 12px; font: inherit; color: var(--foreground); width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); border-color: var(--primary); }
.form-error { font-size: 14px; color: var(--destructive); margin-top: 16px; }
.form-note { margin-top: 20px; }
.form-status { background: var(--secondary); padding: 20px; margin-top: 20px; font-size: 14px; line-height: 28px; }
.form-status-head { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.form-status-head svg { width: 17px; height: 17px; }
.underline { text-decoration: underline; text-underline-offset: 4px; }
.aside-note { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 24px; font-size: 14px; color: var(--muted-foreground); line-height: 1.9; }
.aside-strong { color: var(--foreground); font-weight: 500; }

/* ---------- 19. Fußzeile ---------- */
.footer { border-top: 1px solid var(--border); padding-top: 46px; padding-bottom: 22px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-intro { margin-top: 20px; max-width: 320px; }
.footer-head { font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.footer-text { display: block; font-size: 12px; line-height: 28px; color: var(--muted-foreground); }
.footer-block { display: block; }
.footer-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; }
.footer-note { font-size: 12px; margin-top: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 45px; padding-top: 21px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 10px; }
.footer-links { display: flex; gap: 24px; }

/* ---------- 20. Große Bildschirme ---------- */
@media (min-width: 1440px) { .hero { height: 650px; } }

/* ---------- 21. Tablet und kleine Laptops ---------- */
@media (max-width: 900px) {
  .container-wide { padding-inline: 28px; }
  .site-header { height: 88px; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .hero { height: 580px; }
  .hero h1 { font-size: 72px; }
  .intro-grid, .visit-grid { gap: 40px; }
  .feature-row { gap: 18px; }
  .feature { font-size: 10px; gap: 8px; }
  .section { padding-block: 60px; }
  .section-heading { font-size: 40px; }
  .hero-location { right: 28px; }
  .hero-scroll { left: 28px; }
}

/* ---------- 22. Telefon ---------- */
@media (max-width: 600px) {
  .container-wide { padding-inline: 22px; }
  .site-header { height: 82px; }
  .brand-name { font-size: 28px; }
  .brand-symbol { width: 36px; }
  .brand-caption { font-size: 8px; }
  .hero { height: 570px; min-height: 0; }
  .hero-photo { object-position: 60% center; }
  .hero h1 { font-size: 67px; }
  .hero-subtitle { font-size: 32px; }
  .hero-description { font-size: 13px; max-width: 300px; }
  .hero-location { right: 22px; bottom: 23px; font-size: 9px; }
  .hero-scroll { left: 22px; font-size: 8px; }
  .hero-actions { flex-wrap: wrap; }
  .season-band { font-size: 11px; gap: 9px; text-align: center; padding-inline: 20px; }
  .intro-grid, .visit-grid, .inquiry-grid, .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .section { padding-block: 48px; }
  .section-heading { font-size: 38px; }
  .feature-row { grid-template-columns: 1fr 1fr; gap: 23px; margin-top: 30px; }
  .feature { font-size: 11px; }
  .experience-grid { grid-template-columns: 1fr; gap: 34px; }
  .experience-photo { aspect-ratio: 1.6; }
  .footer-bottom { flex-direction: column; gap: 14px; }
  .inner-title h1 { font-size: 45px; }
  .inner-title { padding-block: 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
}

/* ---------- 23. Sanfte Ankunft ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner { animation: arrive .8s ease-out both; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}