/* ═══════════════════════════════════════════
   WALDURNE – BASIC
   Basis-Styles, Animationen, Komponenten
   ─────────────────────────────────────────── */

/* ─── Layout ─────────────────────────────── */

:root {
  --nav-h: 72px;
}

body, p, li, td, th, address {
  hyphens: auto;
  overflow-wrap: break-word;
}

.nav-main {
  height: var(--nav-h);
}

/* Scroll-Offset für fixe Navigation – verhindert dass Sections hinter der Nav verschwinden */
section[id],
div[id] {
  scroll-margin-top: var(--nav-h);
}

/* Nav ist fixed → kein Dokumentfluss → Hero braucht 100vh */
#hero {
  height: 100vh;
  min-height: 500px;
}

/* Unterseiten-Banner: schmal, unter der fixed Nav */
.page-banner {
  height: 280px;
  min-height: 200px;
  margin-top: var(--nav-h);
}

/* ─── Icon-Größen (ersetzt style="font-size:Xpx") ─── */

.icon-xs  { font-size: 16px; }
.icon-sm  { font-size: 18px; }
.icon-md  { font-size: 20px; }
.icon-lg  { font-size: 22px; }
.icon-xl  { font-size: 26px; }
.icon-2xl { font-size: 28px; }
.icon-3xl { font-size: 30px; }

/* ─── Führungen CTA Hintergrund ──────────── */

.fuehrungen-cta-bg {
  background: linear-gradient(135deg, #5a8a22 0%, #6BA332 35%, var(--color-waldgruen) 65%, var(--color-waldtief) 100%);
}

/* ─── Animationen ────────────────────────── */

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

.arrow-bounce {
  animation: bounce-slow 2s ease-in-out infinite;
}

/* ─── Eyebrow Dots ───────────────────────── */

.eyebrow-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--color-waldgruen);
  border-radius: 9999px;
  margin: 0 10px;
  vertical-align: middle;
}

/* ─── Button Shine Sweep ─────────────────── */

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}

.btn-shine:hover::before {
  left: 125%;
}

/* ─── Pfeil-Gleit-Animation ──────────────── */

.btn-shine .arrow-icon,
.link-arrow .arrow-icon {
  transition: transform 0.22s ease;
}

.btn-shine:hover .arrow-icon,
.link-arrow:hover .arrow-icon {
  transform: translateX(5px);
}

/* ─── Blattform Buttons ──────────────── */
/* Voraussetzung: SVG #leaf-clip vor </body> je Seite */

.btn-leaf {
  clip-path: url(#leaf-clip);
  border-radius: 0 !important;
}

/* Outline-Buttons: border wird durch clip-path unsichtbar →
   wird durch semi-transparentes Fill ersetzt               */
.btn-leaf-outline {
  clip-path: url(#leaf-clip);
  border-radius: 0 !important;
}