/* ==========================================================================
   Dorfschänke Hüttenthal – Eigenes Stylesheet
   --------------------------------------------------------------------------
   TailwindCSS übernimmt das Layout (Raster, Abstände, Farben).
   Diese Datei ergänzt:
     0.  Webfonts (lokal eingebunden, kein Google-Fonts-CDN)
     1.  Design-Tokens (Farbvariablen)
     2.  Grundlagen (Schrift, Scroll-Verhalten, Auswahlfarbe)
     3.  Hilfsklassen (Abschnitte, Überschriften, Links)
     4.  Kopfbereich & Navigation
     5.  Hero-Bereich inkl. Einflug-Animation
     6.  Scroll-Animationen (Intersection Observer)
     7.  Karten (Info, Feature, Zimmer, Event, Menü)
     8.  Preistabelle
     9.  Galerie & Lightbox
     10. Formular
     11. Fußzeile
     12. Scroll-to-Top-Button
     13. Barrierefreiheit & reduzierte Bewegung
   ========================================================================== */


/* ==========================================================================
   0. WEBFONTS
   Fraunces und Inter liegen als variable Schriftdateien lokal unter
   css/fonts/ (keine Google-Fonts-CDN-Anfrage – datenschutzfreundlich, da
   der Besucherbrowser keine Verbindung zu fonts.gstatic.com aufbaut).
   Beide Dateien sind "variable fonts": eine einzige Datei deckt per
   wght-Achse alle im Projekt genutzten Schriftschnitte ab, deshalb genügt
   je Familie ein @font-face mit einer Gewichtsspanne (font-weight: a b).
   Der Unicode-Bereich U+0000–00FF entspricht dem Google-"latin"-Subset
   und deckt deutsche Umlaute (ä ö ü Ä Ö Ü ß) vollständig ab.
   ========================================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;         /* deckt die genutzten Schnitte 400/600/700 ab */
  font-display: swap;
  src: url('fonts/fraunces-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;         /* deckt die genutzten Schnitte 300–700 ab */
  font-display: swap;
  src: url('fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}


/* ==========================================================================
   1. DESIGN-TOKENS
   Die vier Projektfarben als CSS-Variablen, damit sie auch außerhalb der
   Tailwind-Klassen (z. B. in Verläufen und Schatten) verfügbar sind.
   ========================================================================== */
:root {
  --farbe-primaer:    #22c55e;  /* Tailwind green-500   – Buttons, Akzente     */
  --farbe-sekundaer:  #2dd4bf;  /* Tailwind teal-400    – Highlights, Icons    */
  --farbe-hintergrund:#a7f3d0;  /* Tailwind emerald-200 – Flächen, Chips       */
  --farbe-text:       #022c22;  /* Tailwind emerald-950 – Fließtext, Dunkelbox */

  --radius-gross: 2rem;         /* Einheitlicher Radius für Boxen & Bilder     */
  --header-hoehe: 5rem;         /* Höhe des Sticky-Headers (für Ankersprünge)  */
}


/* ==========================================================================
   2. GRUNDLAGEN
   ========================================================================== */

/* Sanftes Scrollen bei Klick auf Anker-Links (#zimmer, #kontakt …) */
html {
  scroll-behavior: smooth;
}

/* Verhindert horizontales Scrollen durch überlappende Deko-Elemente */
body {
  overflow-x: hidden;
}

/* Damit Abschnitte beim Ankersprung nicht unter dem Header verschwinden,
   wird oben ein Sicherheitsabstand reserviert. */
section[id] {
  scroll-margin-top: var(--header-hoehe);
}

/* Markierte Textstellen in den Projektfarben */
::selection {
  background-color: var(--farbe-primaer);
  color: #ffffff;
}

/* Dezente Bildlaufleiste passend zum Farbschema (WebKit-Browser) */
::-webkit-scrollbar        { width: 10px; }
::-webkit-scrollbar-track  { background: #f1f5f4; }
::-webkit-scrollbar-thumb  { background: #86c9a8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--farbe-primaer); }


/* ==========================================================================
   3. HILFSKLASSEN FÜR ABSCHNITTE
   ========================================================================== */

/* Einheitlicher vertikaler Abstand aller Hauptabschnitte */
.section-spacing {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
  .section-spacing {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* Kleine Kategorie-Zeile über jeder Überschrift ("Über uns", "Preise" …) */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #059669;                      /* emerald-600 – gut lesbarer Akzent */
}
.section-eyebrow i {
  color: var(--farbe-primaer);
}

/* Hauptüberschrift eines Abschnitts */
.section-title {
  margin-top: 1rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--farbe-text);
}

/* Textlink mit Unterstrich, der beim Hover mitwächst */
.link-underline {
  color: var(--farbe-text);
  text-decoration: underline;
  text-decoration-color: rgba(34, 197, 94, 0.4);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}
.link-underline:hover {
  color: #16a34a;                      /* green-600 */
  text-decoration-color: var(--farbe-primaer);
}

/* Kleine abgerundete Schlagworte (z. B. "Regionale Produkte") */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background-color: var(--farbe-hintergrund);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--farbe-text);
}
.chip i {
  color: #059669;
}


/* ==========================================================================
   4. KOPFBEREICH & NAVIGATION
   Der Header ist zunächst transparent (er liegt über dem Hero-Bild) und
   bekommt erst beim Scrollen einen weißen Hintergrund. Die Klasse
   .is-scrolled wird dafür in script.js gesetzt.
   ========================================================================== */
.site-header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease,
              backdrop-filter 0.35s ease;
}

/* Zustand ganz oben: transparent, helle Schrift */
.site-header .brand-name,
.site-header .brand-sub {
  color: #ffffff;
  transition: color 0.35s ease;
}
.site-header .brand-sub {
  color: var(--farbe-sekundaer);
}

/* Zustand nach dem Scrollen: weiße Leiste mit Schatten */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -12px rgba(2, 44, 34, 0.18);
}
.site-header.is-scrolled .brand-name {
  color: var(--farbe-text);
}
.site-header.is-scrolled .brand-sub {
  color: #059669;
}

/* Navigationslinks mit animiertem Unterstrich */
.nav-link {
  position: relative;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.925rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.25s ease;
}
.site-header.is-scrolled .nav-link {
  color: rgba(2, 44, 34, 0.75);
}

/* Der Unterstrich wächst von der Mitte nach außen */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--farbe-sekundaer);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}
/* Über dem Hero (transparenter Header): volle Deckkraft in Weiß */
.nav-link:hover,
.nav-link.is-active {
  color: #ffffff;
}
/* Auf weißem Header: dunkle Schrift statt Weiß */
.site-header.is-scrolled .nav-link:hover,
.site-header.is-scrolled .nav-link.is-active {
  color: var(--farbe-text);
}

/* Hamburger-Button (nur mobil sichtbar) */
.menu-toggle {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.site-header.is-scrolled .menu-toggle {
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
}

/* Ausklappbares Mobilmenü: Höhe wird animiert (grid-template-rows-Trick) */
.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease,
              visibility 0.3s ease;
}
.mobile-menu > * {
  overflow: hidden;
}
.mobile-menu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

/* Einzelner Link im Mobilmenü */
.mobile-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  font-weight: 500;
  color: var(--farbe-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.mobile-link:hover,
.mobile-link:focus-visible {
  background-color: var(--farbe-hintergrund);
}
.mobile-link i {
  color: #059669;
}


/* ==========================================================================
   5. HERO-BEREICH
   ========================================================================== */

/* Dunkler Verlauf über dem Foto, damit die weiße Schrift lesbar bleibt */
.hero-overlay {
  background:
    linear-gradient(to right,
      rgba(2, 44, 34, 0.55) 10%,
      rgba(2, 44, 34, 0.25) 40%),
    linear-gradient(to top,
      rgba(2, 44, 34, 0.75) 0%,
      rgba(2, 44, 34, 0) 10%);
}

/* Ganz leichtes Heranzoomen des Hero-Bildes beim Laden (Ken-Burns-Effekt) */
.hero-media img {
  animation: heroZoom 12s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* --- Einflug-Animationen der Textelemente -------------------------------
   Alle Hero-Elemente starten unsichtbar (opacity: 0) und werden nacheinander
   mit einer kleinen Verzögerung eingeblendet.                              */

/* Kleine Auszeichnung über dem Titel: von unten einblenden */
.hero-eyebrow {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

/* Der Haupttitel fliegt zeilenweise von LINKS ein */
.hero-title-line {
  opacity: 0;
  animation: flyInLeft 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-title-line:nth-child(1) { animation-delay: 0.35s; }
.hero-title-line:nth-child(2) { animation-delay: 0.55s; }

/* Untertitel und Buttons folgen versetzt von unten */
.hero-subtitle {
  opacity: 0;
  animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}
.hero-actions {
  opacity: 0;
  animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}
.hero-scroll {
  opacity: 0;
  animation: fadeIn 1s ease 1.6s forwards;
}

/* Keyframes: Einflug von links (mit leichter Startverkleinerung) */
@keyframes flyInLeft {
  from {
    opacity: 0;
    transform: translateX(-4rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyframes: Einblenden von unten */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframes: reines Einblenden */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}

/* Panorama-Band (Abschnitt "Mitten im Grünen") */
.panorama-band {
  height: 24rem;
}
@media (min-width: 1024px) {
  .panorama-band { height: 30rem; }
}
.panorama-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(2, 44, 34, 0.9) 0%,
    rgba(2, 44, 34, 0.55) 55%,
    rgba(2, 44, 34, 0.2) 100%);
}


/* ==========================================================================
   6. SCROLL-ANIMATIONEN
   Elemente mit der Klasse .reveal sind zunächst unsichtbar und leicht nach
   unten verschoben. Sobald sie in den sichtbaren Bereich scrollen, fügt
   script.js die Klasse .is-visible hinzu und der Übergang startet.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Varianten: Einblenden von links bzw. von rechts */
.reveal.reveal-left  { transform: translateX(-3rem); }
.reveal.reveal-right { transform: translateX(3rem); }

/* Sichtbarer Endzustand – für alle Varianten identisch */
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Gestaffelte Verzögerung für Karten in einem Raster.
   Im HTML über data-delay="1" | "2" | "3" gesteuert. */
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }


/* ==========================================================================
   7. KARTEN
   ========================================================================== */

/* --- Info-Karten direkt unter dem Hero --- */
.info-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(2, 44, 34, 0.18);
}

/* --- Ausstattungs-Karten (Icon-Raster) --- */
.feature-card {
  padding: 2rem;
  border-radius: var(--radius-gross);
  background-color: #ffffff;
  box-shadow: 0 10px 30px -18px rgba(2, 44, 34, 0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 45px -20px rgba(2, 44, 34, 0.4);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background-color: var(--farbe-text);
  color: var(--farbe-sekundaer);
  font-size: 1.15rem;
  transition: background-color 0.35s ease, color 0.35s ease;
}
/* Beim Überfahren wechselt das Icon auf die Primärfarbe */
.feature-card:hover .feature-icon {
  background-color: var(--farbe-primaer);
  color: #ffffff;
}
.feature-title {
  margin-top: 1.25rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
}
.feature-text {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(2, 44, 34, 0.7);
}

/* --- Zimmerkarten --- */
.room-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-gross);
  background-color: #ffffff;
  box-shadow: 0 20px 45px -25px rgba(2, 44, 34, 0.45);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.room-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 60px -30px rgba(2, 44, 34, 0.5);
}

/* Bildbereich der Zimmerkarte */
.room-media {
  position: relative;
  height: 15rem;
  overflow: hidden;
}
.room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
/* Bild zoomt beim Überfahren der Karte leicht heran */
.room-card:hover .room-media img {
  transform: scale(1.06);
}

/* Kategorie-Kennzeichnung auf dem Bild */
.room-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--farbe-text);
}
.room-badge-accent {
  background-color: var(--farbe-primaer);
  color: #ffffff;
}

/* Textbereich der Zimmerkarte */
.room-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.75rem;
}

/* Ausstattungsliste innerhalb der Karte */
.room-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(2, 44, 34, 0.75);
}
.room-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.room-features i {
  width: 1rem;
  color: var(--farbe-primaer);
}

/* Preiszeile am Kartenende – wird durch margin-top:auto nach unten gedrückt,
   damit alle Karten gleich hoch wirken. */
.room-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.75rem;
}
.room-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  background-color: var(--farbe-hintergrund);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--farbe-text);
  transition: background-color 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.room-cta:hover {
  background-color: var(--farbe-primaer);
  color: #ffffff;
  gap: 0.85rem;
}

/* --- Veranstaltungskarten --- */
.event-card {
  padding: 2rem;
  border-radius: var(--radius-gross);
  background-color: #ffffff;
  box-shadow: 0 20px 45px -28px rgba(2, 44, 34, 0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -30px rgba(2, 44, 34, 0.5);
}
/* Datumsblock im Stil eines Kalenderblatts */
.event-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1.25rem;
  background-color: var(--farbe-text);
  color: #ffffff;
  line-height: 1;
}
.event-day {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
}
.event-month {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe-sekundaer);
}
.event-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(2, 44, 34, 0.08);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(2, 44, 34, 0.65);
}
.event-meta i {
  color: var(--farbe-primaer);
}

/* --- Speise-/Frühstückskarten --- */
.menu-card {
  padding: 2.25rem;
  border-radius: var(--radius-gross);
  background-color: #ffffff;
  box-shadow: 0 20px 45px -28px rgba(2, 44, 34, 0.4);
  border: 1px solid rgba(2, 44, 34, 0.06);
}
@media (min-width: 640px) {
  .menu-card { padding: 2.75rem; }
}
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--farbe-hintergrund);
}
.menu-tag {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: var(--farbe-hintergrund);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--farbe-text);
}
.menu-list {
  margin-top: 1.5rem;
}
/* Jede Position: Bezeichnung links, Preis rechts */
.menu-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(2, 44, 34, 0.12);
}
.menu-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.menu-item {
  display: block;
  font-weight: 600;
}
.menu-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(2, 44, 34, 0.6);
}
.menu-price {
  flex-shrink: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #16a34a;
}


/* ==========================================================================
   8. PREISTABELLE
   ========================================================================== */
.price-table {
  width: 100%;
  min-width: 34rem;               /* erzwingt bei Bedarf horizontales Scrollen */
  border-collapse: collapse;
  text-align: left;
}
.price-table thead th {
  padding: 1.35rem 1.75rem;
  background-color: var(--farbe-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}
.price-table tbody th,
.price-table tbody td {
  padding: 1.5rem 1.75rem;
  border-top: 1px solid rgba(2, 44, 34, 0.08);
  vertical-align: middle;
}
.price-table tbody tr {
  transition: background-color 0.25s ease;
}
.price-table tbody tr:hover {
  background-color: rgba(167, 243, 208, 0.35);
}
/* Zusatzinfo unter dem Zimmernamen */
.price-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(2, 44, 34, 0.55);
}
/* Der günstigere Langzeitpreis wird farblich hervorgehoben */
.price-highlight {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: var(--farbe-hintergrund);
  font-weight: 700;
  color: #065f46;
}


/* ==========================================================================
   9. GALERIE & LIGHTBOX
   ========================================================================== */
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-gross);
  cursor: pointer;
  background-color: var(--farbe-hintergrund);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-item:hover img {
  transform: scale(1.07);
}

/* Grüner Schleier mit Lupensymbol beim Überfahren */
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: rgba(2, 44, 34, 0.55);
  color: #ffffff;
  font-size: 1.4rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay {
  opacity: 1;
}

/* --- Lightbox (Vollbildansicht) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(2, 44, 34, 0.95);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox-image {
  max-width: min(1100px, 92vw);
  max-height: 85vh;
  border-radius: var(--radius-gross);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  transform: scale(0.94);
  transition: transform 0.35s ease;
}
.lightbox.is-open .lightbox-image {
  transform: scale(1);
}

/* Schließen- und Navigationsschaltflächen */
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.1rem;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background-color: var(--farbe-primaer);
  transform: scale(1.08);
}
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev  { left: 1.5rem; }
.lightbox-next  { right: 1.5rem; }


/* ==========================================================================
   10. FORMULAR
   ========================================================================== */
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--farbe-text);
}

/* Einheitliches Feld-Design für input, select und textarea */
.form-input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(2, 44, 34, 0.14);
  border-radius: 1rem;
  background-color: #f8fdfb;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--farbe-text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
              background-color 0.25s ease;
}
.form-input::placeholder {
  color: rgba(2, 44, 34, 0.4);
}
/* Fokus-Zustand mit grünem Leuchtring */
.form-input:focus {
  outline: none;
  border-color: var(--farbe-primaer);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}
/* Fehlerzustand – wird per JS über die Klasse .has-error gesetzt */
.form-input.has-error {
  border-color: #dc2626;
  background-color: #fef2f2;
}
.form-error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #dc2626;
}
.form-error.is-visible {
  display: block;
}

/* Checkbox in den Projektfarben */
.form-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
}

/* Erfolgsmeldung nach dem Absenden */
.form-feedback {
  display: none;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background-color: var(--farbe-hintergrund);
  font-size: 0.9rem;
  font-weight: 500;
  color: #065f46;
}
.form-feedback.is-visible {
  display: block;
  animation: fadeInUp 0.5s ease forwards;
}


/* ==========================================================================
   11. FUSSZEILE
   ========================================================================== */
.footer-link {
  color: rgba(236, 253, 245, 0.7);
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer-link:hover {
  color: var(--farbe-sekundaer);
}

/* Kontaktzeilen in der dunklen Kontaktbox */
.contact-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.9rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--farbe-sekundaer);
}
.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 253, 245, 0.5);
}
.contact-value {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ffffff;
  transition: color 0.25s ease;
}

/* WICHTIG: "Impressum" und "Datenschutz" sind bewusst KEINE Links.
   Sie werden nur wie Links gestaltet, damit der Kunde sie später selbst
   verlinken kann. Deshalb: kein href, kein Zeiger-Cursor. */
.legal-placeholder {
  color: rgba(236, 253, 245, 0.6);
  cursor: default;
  transition: color 0.25s ease;
}
.legal-placeholder:hover {
  color: rgba(236, 253, 245, 0.9);
}


/* ==========================================================================
   12. SCROLL-TO-TOP-BUTTON
   Sitzt fest unten rechts. Standardmäßig unsichtbar und leicht nach unten
   versetzt; script.js fügt ab ca. 400 px Scrolltiefe die Klasse .is-visible
   hinzu, wodurch er sanft einblendet.
   ========================================================================== */
.scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background-color: var(--farbe-primaer);
  color: #ffffff;
  font-size: 1.05rem;
  box-shadow: 0 15px 30px -10px rgba(34, 197, 94, 0.6);

  /* Ausgangszustand: ausgeblendet */
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.9);
  transition: opacity 0.35s ease, visibility 0.35s ease,
              transform 0.35s ease, background-color 0.25s ease;
}

/* Sichtbarer Zustand */
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover: dunkleres Grün und leichtes Anheben */
.scroll-top:hover {
  background-color: #16a34a;
  transform: translateY(-4px) scale(1.05);
}
.scroll-top:focus-visible {
  outline: 3px solid var(--farbe-sekundaer);
  outline-offset: 3px;
}

/* Auf größeren Bildschirmen etwas mehr Abstand zum Rand */
@media (min-width: 640px) {
  .scroll-top {
    right: 2rem;
    bottom: 2rem;
    width: 3.5rem;
    height: 3.5rem;
  }
}


/* ==========================================================================
   13. BARRIEREFREIHEIT & REDUZIERTE BEWEGUNG
   ========================================================================== */

/* Sprunglink: nur sichtbar, wenn er per Tastatur fokussiert wird */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 1rem 1rem;
  background-color: var(--farbe-primaer);
  font-weight: 600;
  color: #ffffff;
  transition: top 0.25s ease;
}
.skip-link:focus {
  top: 0;
}

/* Nutzer, die in ihrem System weniger Bewegung eingestellt haben,
   bekommen alle Inhalte sofort und ohne Animation zu sehen. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Wichtig: Elemente, die per Animation eingeblendet werden, müssen
     trotzdem sichtbar sein. */
  .hero-eyebrow,
  .hero-title-line,
  .hero-subtitle,
  .hero-actions,
  .reveal {
    opacity: 1;
    transform: none;
  }
}