/* ======================================================================
   CLAUDE: hero.css - Hero-Slider Styles
   ======================================================================

   CLAUDE: Zweck
   -------
   CLAUDE: Dieses File enthält alle Styles für den Hero-Slider auf der Startseite
   CLAUDE: Implementiert Fade/Slide-Transitions, Navigation, Pagination-Dots
   CLAUDE: Nutzt CSS-Custom-Properties für dynamische Anpassungen via Customizer

   CLAUDE: Inhalt
   -------
   CLAUDE: 1) Hero-Slider Container (.hero-slider)
   CLAUDE: 2) Slider-Track & Slides (.hero-slider__track, .hero-slider__slide)
   CLAUDE: 3) Slide-Content (.hero-slider__content, __title, __description, __cta)
   CLAUDE: 4) Overlay (.hero-slider__overlay)
   CLAUDE: 5) Navigation-Buttons (.hero-slider__nav)
   CLAUDE: 6) Pagination-Dots (.hero-slider__pagination, .hero-slider__dot)
   CLAUDE: 7) Transitions & Animations (Fade/Slide)
   CLAUDE: 8) Responsive Anpassungen (Mobile, Tablet, Desktop)

   CLAUDE: Verwendung
   ----------
   CLAUDE: Wird automatisch auf Front-Page geladen via assets.php
   CLAUDE: CSS-Variablen werden via inline-style im Template gesetzt
   CLAUDE: --hero-overlay-opacity: Overlay-Deckkraft (0-1)
   CLAUDE: --hero-height: Hero-Höhe (vh, px)
   CLAUDE: --hero-nav-color: Farbe der Navigation-Buttons & Dots

   CLAUDE: Anpassen
   --------
   CLAUDE: - Transition-Geschwindigkeit: Ändere transition-Werte
   CLAUDE: - Button-Größe: Ändere width/height in .hero-slider__nav
   CLAUDE: - Dot-Größe: Ändere width/height in .hero-slider__dot
   CLAUDE: - Overlay-Farbe: Ändere background in .hero-slider__overlay

   ====================================================================== */

/* ======================================================================
   CLAUDE: 1) HERO-SLIDER CONTAINER & STATISCHES HERO
   CLAUDE: Basis-Container für gesamten Slider & statisches Hero
   ====================================================================== */

/* CLAUDE: .hero-slider & .hero-static – Hauptcontainer für Slider & statisches Hero */
/* CLAUDE: Ändern: Für andere Default-Höhen min-height anpassen */
.hero-slider,
.hero-static,
.hero-section {
	/* CLAUDE: position: relative für absolute-positionierte Child-Elemente */
	position: relative;

	/* CLAUDE: width: 100% für Full-Width-Layout */
	width: 100%;

	/* CLAUDE: min-height aus CSS-Variable (Customizer-gesteuert) */
	min-height: var(--hero-height, 70vh);

	/* CLAUDE: overflow: hidden verhindert Slide-Overflow beim Slide-Transition */
	overflow: hidden;

	/* CLAUDE: isolation: isolate für z-index-Stacking-Context */
	isolation: isolate;
}

/* ======================================================================
   CLAUDE: 2) SLIDER-TRACK & SLIDES
   CLAUDE: Track enthält alle Slides, Slides werden übereinander gelegt
   ====================================================================== */

/* CLAUDE: .hero-slider__track – Container für alle Slides */
/* CLAUDE: Ändern: Für andere Layouts display/position anpassen */
.hero-slider__track {
	/* CLAUDE: position: relative für absolute-positionierte Slides */
	position: relative;

	/* CLAUDE: width: 100% für Full-Width */
	width: 100%;

	/* CLAUDE: height: 100% für Full-Height des Containers */
	height: 100%;

	/* CLAUDE: min-height: inherit übernimmt Hero-Höhe vom Parent */
	min-height: inherit;
	
	
}

/* CLAUDE: .hero-slider__slide – Einzelnes Slide */
/* CLAUDE: Alle Slides liegen übereinander, nur aktives Slide ist sichtbar */
/* CLAUDE: WICHTIG: Hintergrundbild wird via ::before Pseudo-Element eingefügt (mit Filter) */
.hero-slider__slide {
	/* CLAUDE: position: absolute für Overlay-Effekt (alle Slides auf gleicher Position) */
	position: absolute;

	/* CLAUDE: top/left: 0 für linke obere Ecke */
	top: 0;
	left: 0;

	/* CLAUDE: width: 100% für Full-Width */
	width: 100%;

	/* CLAUDE: height: 100% für Full-Height */
	height: 100%;

	/* CLAUDE: min-height: inherit übernimmt Hero-Höhe vom Parent */
	min-height: inherit;

	/* CLAUDE: opacity: 0 versteckt inaktive Slides */
	opacity: 0;

	/* CLAUDE: pointer-events: none verhindert Clicks auf inaktive Slides */
	pointer-events: none;

	/* CLAUDE: transition für Fade-Effekt (Dauer aus Customizer via JS) */
	/* CLAUDE: Ändern: Für andere Transition-Geschwindigkeiten duration anpassen */
	transition: opacity 0.8s ease-in-out;

	/* CLAUDE: z-index: 1 für Stacking-Order (inaktive Slides unten) */
	z-index: 1;
}

/* CLAUDE: .hero-slider__slide::before & .hero-static::before – Hintergrundbild als Pseudo-Element (MIT Filter) */
/* CLAUDE: Zweck: Ermöglicht separate Filter-Anwendung auf Bild ohne Text zu beeinflussen */
/* CLAUDE: Ändern: Für andere Filter-Werte filter-Property anpassen */
.hero-slider__slide::before,
.hero-static::before,
.hero-section::before {
	/* CLAUDE: content: '' – notwendig für Pseudo-Element */
	content: '';

	/* CLAUDE: position: absolute für Full-Cover */
	position: absolute;

	/* CLAUDE: top/left/right/bottom: 0 für Full-Cover des Slides */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	/* CLAUDE: background-image wird via inline-style im Template gesetzt */
	/* CLAUDE: Ändern: Für andere background-size background-size anpassen */
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* CLAUDE: z-index: 0 – Hintergrundbild liegt UNTER Overlay & Content */
	z-index: 0;

	/* CLAUDE: FILTER – Bild wird dunkler, kontrastreicher, entsättigter für bessere Textlesbarkeit */
	/* CLAUDE: Ändern: Für andere Filter-Werte brightness/contrast/saturate anpassen */
	/* CLAUDE: brightness(70%) – Bild wird um 30% dunkler */
	/* CLAUDE: contrast(110%) – Kontrast wird um 10% erhöht */
	/* CLAUDE: saturate(80%) – Sättigung wird um 20% reduziert */
	filter: brightness(70%) contrast(110%) saturate(80%);
}

/* CLAUDE: .hero-static & .hero-section – Statisches Hero (wenn Slider deaktiviert) */
/* CLAUDE: Ändern: Für andere Positionierung/Größe position/min-height anpassen */
.hero-static,
.hero-section {
	/* CLAUDE: position: relative für absolute-positionierte Child-Elemente (Overlay, Content) */
	position: relative;

	/* CLAUDE: isolation: isolate für z-index-Stacking-Context */
	isolation: isolate;
}

/* CLAUDE: .hero-overlay – Overlay für statisches Hero */
/* CLAUDE: WICHTIG: Gleiche Styles wie .hero-slider__overlay */
.hero-overlay {
	/* CLAUDE: position: absolute für Overlay über gesamte Hero-Fläche */
	position: absolute;

	/* CLAUDE: top/left/right/bottom: 0 für Full-Cover */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	/* CLAUDE: background: linear-gradient für Verlauf (dunkel unten → hell oben) */
	/* CLAUDE: Ändern: Für anderen Verlauf rgba-Werte anpassen */
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, var(--hero-overlay-opacity, 0.4)) 100%
	);

	/* CLAUDE: z-index: 5 für Stacking über gefiltertem Hintergrundbild (::before hat z-index: 0), unter Content (z-index: 10) */
	z-index: 5;

	/* CLAUDE: pointer-events: none verhindert Clicks auf Overlay */
	pointer-events: none;
}

/* CLAUDE: .hero-content – Content-Container für statisches Hero */
/* CLAUDE: WICHTIG: Gleiche Styles wie .hero-slider__content */
.hero-content {
	/* CLAUDE: position: relative für z-index über Overlay & Hintergrundbild */
	position: relative;

	/* CLAUDE: z-index: 10 für Stacking über Overlay & Hintergrundbild */
	z-index: 10;

	/* CLAUDE: display: flex für Flexbox-Layout */
	display: flex;

	/* CLAUDE: flex-direction: column für vertikales Layout */
	flex-direction: column;

	/* CLAUDE: align-items: flex-start für linksbündige Ausrichtung */
	align-items: flex-start;

	/* CLAUDE: justify-content: center für vertikale Zentrierung */
	justify-content: center;

	/* CLAUDE: width: 100% für Full-Width */
	width: 100%;

	/* CLAUDE: min-height: inherit übernimmt Hero-Höhe vom Parent */
	min-height: inherit;

	/* CLAUDE: padding: clamp() für responsives Padding (32px-64px) */
	/* CLAUDE: Ändern: Für andere Padding-Werte clamp() anpassen */
	padding: clamp(2rem, 4vw, 4rem);

	/* CLAUDE: text-align: left für linksbündigen Text */
	text-align: left;

	/* CLAUDE: color: white für helle Textfarbe auf dunklem Hintergrund */
	color: white;
}

/* CLAUDE: .hero-title – Titel für statisches Hero */
/* CLAUDE: WICHTIG: Gleiche Styles wie .hero-slider__title */
.hero-title {
	/* CLAUDE: font-size: clamp() für responsive Font-Größe (2rem-4rem) */
	font-size: clamp(2rem, 5vw, 4rem);

	/* CLAUDE: font-weight: 700 für Bold */
	font-weight: 700;

	/* CLAUDE: line-height: 1.1 für enge Zeilenhöhe bei Headlines */
	line-height: 1.1;

	/* CLAUDE: margin-bottom: 1.5rem für Abstand zur Beschreibung */
	margin-bottom: 1.5rem;

	/* CLAUDE: max-width: 900px für begrenzte Lesebreite */
	max-width: 900px;

	/* CLAUDE: color: inherit übernimmt Farbe vom Parent */
	color: inherit;
}

/* CLAUDE: .hero-subtitle – Beschreibung für statisches Hero */
/* CLAUDE: WICHTIG: Gleiche Styles wie .hero-slider__description */
.hero-subtitle {
	/* CLAUDE: font-size: clamp() für responsive Font-Größe (1rem-1.25rem) */
	font-size: clamp(1rem, 1.5vw, 1.25rem);

	/* CLAUDE: line-height: 1.6 für gute Lesbarkeit */
	line-height: 1.6;

	/* CLAUDE: margin-bottom: 2rem für Abstand zum CTA-Button */
	margin-bottom: 2rem;

	/* CLAUDE: max-width: 700px für begrenzte Lesebreite */
	max-width: 700px;

	/* CLAUDE: color: inherit übernimmt Farbe vom Parent */
	color: inherit;

	/* CLAUDE: opacity: 0.95 für leichte Transparenz (bessere Hierarchie) */
	opacity: 0.95;
}

/* CLAUDE: .hero-slider__slide.is-active – Aktives Slide */
/* CLAUDE: Zeigt aktuelles Slide an, erhält höheren z-index */
.hero-slider__slide.is-active {
	/* CLAUDE: opacity: 1 zeigt aktives Slide */
	opacity: 1;

	/* CLAUDE: pointer-events: auto aktiviert Clicks auf aktives Slide */
	pointer-events: auto;

	/* CLAUDE: z-index: 2 für Stacking-Order (aktives Slide oben) */
	z-index: 2;
	
}

/* ======================================================================
   CLAUDE: 3) SLIDE-CONTENT (Text, CTA)
   CLAUDE: Content-Bereich mit Titel, Beschreibung, CTA-Button
   ====================================================================== */

/* CLAUDE: .hero-slider__content – Content-Container für Slide-Text */
/* CLAUDE: Ändern: Für andere Positionierung align-items/justify-content anpassen */
.hero-slider__content {
	/* CLAUDE: position: relative für z-index über Overlay & Hintergrundbild */
	position: relative;

	/* CLAUDE: z-index: 10 für Stacking über Overlay & Hintergrundbild (::before hat z-index: 0, Overlay hat z-index: 2) */
	z-index: 10;

	/* CLAUDE: display: flex für Flexbox-Layout */
	display: flex;

	/* CLAUDE: flex-direction: column für vertikales Layout */
	flex-direction: column;

	/* CLAUDE: align-items: flex-start für linksbündige Ausrichtung */
	align-items: flex-start;

	/* CLAUDE: justify-content: center für vertikale Zentrierung */
	justify-content: center;

	/* CLAUDE: width: 100% für Full-Width */
	width: 100%;

	/* CLAUDE: min-height: inherit übernimmt Hero-Höhe vom Parent */
	min-height: inherit;

	/* CLAUDE: padding: clamp() für responsives Padding (32px-64px) */
	/* CLAUDE: Ändern: Für andere Padding-Werte clamp() anpassen */
	padding: clamp(2rem, 4vw, 4rem);

	/* CLAUDE: text-align: left für linksbündigen Text */
	text-align: left;

	/* CLAUDE: color: white für helle Textfarbe auf dunklem Hintergrund */
	color: white;
}

/* CLAUDE: .hero-slider__content .site-wrapper – Site-Wrapper INNERHALB Hero-Slider */
/* CLAUDE: WICHTIG: Überschreibt globale .site-wrapper Styles von style.css */
/* CLAUDE: Stellt ursprüngliche Funktionalität wieder her (max-width, padding) */
.hero-slider__content .site-wrapper,
.hero-content .site-wrapper {
	/* CLAUDE: max-width: 1200px – begrenzt Content-Breite im Hero */
	max-width: 1200px;

	/* CLAUDE: width: 100% – volle Breite bis max-width */
	width: 100%;

	/* CLAUDE: margin: 0 auto – zentriert horizontal */
	margin: 0 auto;

	/* CLAUDE: padding: 0 – kein zusätzliches Padding (wird von .hero-slider__content übernommen) */
	padding: 0;
}

/* CLAUDE: .hero-slider__title – Slide-Titel (H1/H2) */
/* CLAUDE: Ändern: Für andere Font-Größen clamp() anpassen */
.hero-slider__title {
	/* CLAUDE: font-size: clamp() für responsive Font-Größe (2rem-4rem) */
	font-size: clamp(2rem, 5vw, 4rem);

	/* CLAUDE: font-weight: 700 für Bold */
	font-weight: 700;

	/* CLAUDE: line-height: 1.1 für enge Zeilenhöhe bei Headlines */
	line-height: 1.1;

	/* CLAUDE: margin-bottom: 1.5rem für Abstand zur Beschreibung */
	margin-bottom: 1.5rem;

	/* CLAUDE: max-width: 900px für begrenzte Lesebreite */
	max-width: 900px;

	/* CLAUDE: color: inherit übernimmt Farbe vom Parent (.hero-slider__content) */
	color: inherit;
}

/* CLAUDE: .hero-slider__description – Slide-Beschreibung (P) */
/* CLAUDE: Ändern: Für andere Font-Größen clamp() anpassen */
.hero-slider__description {
	/* CLAUDE: font-size: clamp() für responsive Font-Größe (1rem-1.25rem) */
	font-size: clamp(1rem, 1.5vw, 1.25rem);

	/* CLAUDE: line-height: 1.6 für gute Lesbarkeit */
	line-height: 1.6;

	/* CLAUDE: margin-bottom: 2rem für Abstand zum CTA-Button */
	margin-bottom: 2rem;

	/* CLAUDE: max-width: 700px für begrenzte Lesebreite */
	max-width: 700px;

	/* CLAUDE: color: inherit übernimmt Farbe vom Parent (.hero-slider__content) */
	color: inherit;

	/* CLAUDE: opacity: 0.95 für leichte Transparenz (bessere Hierarchie) */
	opacity: 0.95;
}

/* CLAUDE: .hero-slider__cta – CTA-Button-Container */
/* CLAUDE: Ändern: Für zentrierte CTAs text-align: center hinzufügen */
.hero-slider__cta {
	/* CLAUDE: margin-top: 0.5rem für zusätzlichen Abstand */
	margin-top: 0.5rem;
}

/* ======================================================================
   3b) CTA-Button – Weißer Button im Hero
   ====================================================================== */

   /* CLAUDE: CSS-Variablen für Hero-CTA-Button */
   /* CLAUDE: Ändern: Farben über CSS-Variablen anpassbar (z.B. via Customizer inline-style) */
   :root {
	/* CLAUDE: Button-Hintergrundfarbe (Weiß) */
	--hero-cta-bg: #ffffff;
	/* CLAUDE: Button-Textfarbe (Dunkelgrau) */
	--hero-cta-color: #1e1e1e;
	/* CLAUDE: Button-Border-Farbe (Hellgrau) */
	--hero-cta-border: #d9d9d9;
	/* CLAUDE: Button-Hover-Hintergrundfarbe (Helles Grau) */
	--hero-cta-hover-bg: #f5f5f5;
	/* CLAUDE: Button-Hover-Border-Farbe (Mittelgrau) */
	--hero-cta-hover-border: #bfbfbf;
	/* CLAUDE: Button-Schatten (normal) */
	--hero-cta-shadow: 0 2px 6px rgba(0,0,0,0.12);
	/* CLAUDE: Button-Schatten (hover) */
	--hero-cta-shadow-hover: 0 4px 12px rgba(0,0,0,0.18);
  }

  /* CLAUDE: Container für CTA-Buttons – Flexbox für horizontale Anordnung */
  /* CLAUDE: Ändern: Für zentrierte Buttons justify-content: center hinzufügen */
  .hero-slider__cta,
  .hero-cta {
	/* CLAUDE: display: flex für Flexbox-Layout */
	display: flex;
	/* CLAUDE: flex-wrap: wrap für mehrzeilige Anordnung bei mehreren CTAs */
	flex-wrap: wrap;
	/* CLAUDE: gap: 0.75rem für Abstand zwischen Buttons */
	gap: 0.75rem;
	/* CLAUDE: margin-top: 0.75rem für Abstand zu obigem Content */
	margin-top: 0.75rem;
  }

  /* CLAUDE: Basis-Button-Styles – gilt für alle .btn im Hero */
  /* CLAUDE: Ändern: Für andere Button-Größen padding/font-size anpassen */
  .hero-slider__cta .btn,
  .hero-cta .btn {
	/* CLAUDE: -webkit-appearance: none entfernt Browser-Standard-Styles (Safari) */
	-webkit-appearance: none;
	/* CLAUDE: appearance: none entfernt Browser-Standard-Styles */
	appearance: none;
	/* CLAUDE: display: inline-flex für Flexbox-Layout */
	display: inline-flex;
	/* CLAUDE: align-items: center für vertikale Icon/Text-Zentrierung */
	align-items: center;
	/* CLAUDE: justify-content: center für horizontale Icon/Text-Zentrierung */
	justify-content: center;
	/* CLAUDE: gap: .5rem für Abstand zwischen Icon und Text */
	gap: .5rem;
	/* CLAUDE: text-decoration: none entfernt Unterstreichung */
	text-decoration: none;
	/* CLAUDE: cursor: pointer für Hover-Cursor */
	cursor: pointer;
	/* CLAUDE: user-select: none verhindert Text-Selektion */
	user-select: none;

	/* CLAUDE: Größe & Schrift – Ändern für andere Button-Größen */
	/* CLAUDE: padding: .825rem 1.25rem für Button-Padding (oben/unten links/rechts) */
	padding: .825rem 1.25rem;
	/* CLAUDE: border-radius: .5rem für abgerundete Ecken */
	border-radius: .5rem;
	/* CLAUDE: font-size: clamp() für responsive Font-Größe (.95rem - 1rem) */
	font-size: clamp(.95rem, 1.1vw, 1rem);
	/* CLAUDE: font-weight: 600 für Semi-Bold */
	font-weight: 600;
	/* CLAUDE: line-height: 1 für enge Zeilenhöhe bei Buttons */
	line-height: 1;

	/* CLAUDE: Transition & Shadow – Ändern für andere Transition-Geschwindigkeiten */
	/* CLAUDE: transition für Hover-Effekt (Farbe, Border, Transform, Shadow) */
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .06s ease, box-shadow .2s ease;
	/* CLAUDE: box-shadow: var() für Button-Schatten (aus CSS-Variable) */
	box-shadow: var(--hero-cta-shadow);
	/* CLAUDE: border: 1px solid transparent für Border-Grundlage (wird von Modifier überschrieben) */
	border: 1px solid transparent;
  }
  
  /* CLAUDE: Weißer Button-Modifier – Standard-Style für Hero-CTAs */
  /* CLAUDE: Ändern: Für andere Button-Styles Farben anpassen */
  .hero-slider__cta .btn--white,
  .hero-cta .btn--white {
	/* CLAUDE: background-color: var() für weißen Hintergrund */
	background-color: #f7f5f2;
	/* CLAUDE: color: var() für dunkle Textfarbe */
	color: #c19a6b;
	/* CLAUDE: border-color: var() für hellgraue Border */
	border-color: #3b2a1a;
  }

  /* CLAUDE: Hover-State für weißen Button */
  /* CLAUDE: Ändern: Für andere Hover-Effekte background/border anpassen */
  .hero-slider__cta .btn--white:hover,
  .hero-cta .btn--white:hover {
	/* CLAUDE: background-color: var() für hellgrauen Hintergrund beim Hover */
	background-color: var(--hero-cta-hover-bg);
	/* CLAUDE: border-color: var() für mittelgraue Border beim Hover */
	border-color: var(--hero-cta-hover-border);
	/* CLAUDE: box-shadow: var() für stärkeren Schatten beim Hover */
	box-shadow: var(--hero-cta-shadow-hover);
  }

  /* CLAUDE: Active-State für weißen Button (beim Klicken) */
  /* CLAUDE: Ändern: Für andere Active-Effekte transform anpassen */
  .hero-slider__cta .btn--white:active,
  .hero-cta .btn--white:active {
	/* CLAUDE: transform: translateY für leichten Button-"Press"-Effekt */
	transform: translateY(1px);
  }

  /* CLAUDE: Focus-State für weißen Button (Accessibility/Keyboard-Navigation) */
  /* CLAUDE: Ändern: Für andere Focus-Styles outline anpassen */
  .hero-slider__cta .btn--white:focus-visible,
  .hero-cta .btn--white:focus-visible {
	/* CLAUDE: outline: 2px solid für sichtbaren Focus-Ring */
	outline: 2px solid var(--hero-nav-color, #C19A6B);
	/* CLAUDE: outline-offset: 3px für Abstand zwischen Button und Outline */
	outline-offset: 3px;
  }

  /* CLAUDE: Größen-Modifier für Buttons (optional) */
  /* CLAUDE: Ändern: Für andere Button-Größen padding/font-size anpassen */
  .hero-slider__cta .btn--sm,
  .hero-cta .btn--sm {
	/* CLAUDE: padding: .625rem 1rem für kleineren Button */
	padding: .625rem 1rem;
	/* CLAUDE: font-size: .9rem für kleinere Schrift */
	font-size: .9rem;
  }

  .hero-slider__cta .btn--lg,
  .hero-cta .btn--lg {
	/* CLAUDE: padding: 1rem 1.5rem für größeren Button */
	padding: 1rem 1.5rem;
	/* CLAUDE: font-size: 1.05rem für größere Schrift */
	font-size: 1.05rem;
  }

  /* CLAUDE: Transparenter Weiß-Style (Outline-Button, falls benötigt) */
  /* CLAUDE: Ändern: Für andere Outline-Styles background/border anpassen */
  .hero-slider__cta .btn--white.is-outline,
  .hero-cta .btn--white.is-outline {
	/* CLAUDE: background: transparent für transparenten Hintergrund */
	background: transparent;
	/* CLAUDE: color: #ffffff für weiße Textfarbe */
	color: #ffffff;
	/* CLAUDE: border-color: rgba für semi-transparente weiße Border */
	border-color: rgba(255,255,255,.85);
	/* CLAUDE: box-shadow: none entfernt Schatten bei Outline-Button */
	box-shadow: none;
  }

  .hero-slider__cta .btn--white.is-outline:hover,
  .hero-cta .btn--white.is-outline:hover {
	/* CLAUDE: background: rgba für semi-transparenten weißen Hintergrund beim Hover */
	background: rgba(255,255,255,.12);
	/* CLAUDE: border-color: #ffffff für volle weiße Border beim Hover */
	border-color: #ffffff;
  }

  /* CLAUDE: Mobile: Buttons mittig ausrichten bei zentriertem Text */
  /* CLAUDE: Ändern: Für andere Mobile-Layouts Breakpoint/justify-content anpassen */
  @media (max-width: 767px) {
	.hero-slider__cta,
	.hero-cta {
	  /* CLAUDE: justify-content: center für zentrierte Buttons auf Mobile */
	  justify-content: center;
	}
  }

  /* CLAUDE: Bewegungen reduzieren, wenn vom Nutzer gewünscht (Accessibility) */
  /* CLAUDE: Ändern: Für andere Reduced-Motion-Styles transition anpassen */
  @media (prefers-reduced-motion: reduce) {
	.hero-slider__cta .btn,
	.hero-cta .btn {
	  /* CLAUDE: transition: none deaktiviert Animationen bei prefers-reduced-motion */
	  transition: none;
	}
  }
  

/* ======================================================================
   CLAUDE: 4) OVERLAY (dunkle Schicht für bessere Lesbarkeit)
   CLAUDE: Overlay liegt über Hintergrundbild, unter Content
   ====================================================================== */

/* CLAUDE: .hero-slider__overlay – Dunkle Schicht über Hintergrundbild */
/* CLAUDE: Ändern: Für andere Overlay-Farben background anpassen */
.hero-slider__overlay {
	/* CLAUDE: position: absolute für Overlay über gesamte Slide-Fläche */
	position: absolute;

	/* CLAUDE: top/left/right/bottom: 0 für Full-Cover */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	/* CLAUDE: background: linear-gradient für Verlauf (dunkel unten → hell oben) */
	/* CLAUDE: Ändern: Für anderen Verlauf rgba-Werte anpassen */
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, var(--hero-overlay-opacity, 0.4)) 100%
	);

	/* CLAUDE: z-index: 5 für Stacking über gefiltertem Hintergrundbild (::before hat z-index: 0), unter Content (z-index: 10) */
	z-index: 5;

	/* CLAUDE: pointer-events: none verhindert Clicks auf Overlay */
	pointer-events: none;
}

/* ======================================================================
   CLAUDE: 5) NAVIGATION-BUTTONS (Prev/Next)
   CLAUDE: Buttons am linken/rechten Rand für manuellen Slide-Wechsel
   ====================================================================== */

/* CLAUDE: .hero-slider__navigation – Container für Prev/Next-Buttons */
/* CLAUDE: Ändern: Für andere Positionierung position/top/bottom anpassen */
.hero-slider__navigation {
	/* CLAUDE: position: absolute für Positionierung am Rand */
	position: absolute;

	/* CLAUDE: top: 50% für vertikale Zentrierung */
	top: 50%;

	/* CLAUDE: transform: translateY(-50%) für exakte Zentrierung */
	transform: translateY(-50%);

	/* CLAUDE: width: 100% für Full-Width (Buttons an Rändern) */
	width: 100%;

	/* CLAUDE: z-index: 4 für Stacking über Content */
	z-index: 4;

	/* CLAUDE: pointer-events: none verhindert Clicks auf Container */
	pointer-events: none;

	/* CLAUDE: padding: 0 2rem für Abstand vom Rand */
	/* CLAUDE: Ändern: Für andere Abstände padding anpassen */
	padding: 0 2rem;

	/* CLAUDE: display: flex für Flexbox-Layout */
	display: flex;

	/* CLAUDE: justify-content: space-between für Buttons an Rändern */
	justify-content: space-between;
}

/* CLAUDE: .hero-slider__nav – Einzelner Nav-Button (Prev/Next) */
/* CLAUDE: Ändern: Für andere Button-Größen width/height anpassen */
.hero-slider__nav {
	/* CLAUDE: pointer-events: auto aktiviert Clicks auf Buttons */
	pointer-events: auto;

	/* CLAUDE: width: 48px für Button-Breite */
	width: 48px;

	/* CLAUDE: height: 48px für Button-Höhe */
	height: 48px;

	/* CLAUDE: border-radius: 50% für runde Buttons */
	border-radius: 50%;

	/* CLAUDE: border: none entfernt Standard-Button-Border */
	border: none;

	/* CLAUDE: background: rgba für semi-transparente Hintergrundfarbe */
	/* CLAUDE: Ändern: Für andere Hintergrundfarben rgba-Werte anpassen */
	background: rgba(255, 255, 255, 0.2);

	/* CLAUDE: backdrop-filter: blur für Glassmorphism-Effekt */
	backdrop-filter: blur(8px);

	/* CLAUDE: color: white für helle Icon-Farbe */
	color: white;

	/* CLAUDE: cursor: pointer für Hover-Cursor */
	cursor: pointer;

	/* CLAUDE: display: flex für Flexbox-Layout (Icon-Zentrierung) */
	display: flex;

	/* CLAUDE: align-items: center für vertikale Icon-Zentrierung */
	align-items: center;

	/* CLAUDE: justify-content: center für horizontale Icon-Zentrierung */
	justify-content: center;

	/* CLAUDE: transition für Hover-Effekt */
	/* CLAUDE: Ändern: Für andere Transition-Geschwindigkeiten duration anpassen */
	transition: background 0.3s ease, transform 0.2s ease;

	/* CLAUDE: opacity: 0.8 für leichte Transparenz im Ruhezustand */
	opacity: 0.8;
}

/* CLAUDE: .hero-slider__nav:hover – Hover-State für Nav-Buttons */
/* CLAUDE: Ändern: Für andere Hover-Effekte background/transform anpassen */
.hero-slider__nav:hover {
	/* CLAUDE: background: rgba für hellere Hintergrundfarbe beim Hover */
	background: rgba(255, 255, 255, 0.3);

	/* CLAUDE: opacity: 1 für volle Deckkraft beim Hover */
	opacity: 1;

	/* CLAUDE: transform: scale für leichten Vergrößerungs-Effekt */
	transform: scale(1.05);
}

/* CLAUDE: .hero-slider__nav:focus – Focus-State für Keyboard-Navigation */
/* CLAUDE: Ändern: Für andere Focus-Styles outline anpassen */
.hero-slider__nav:focus {
	/* CLAUDE: outline: 2px solid für sichtbaren Focus-Ring (Accessibility) */
	outline: 2px solid var(--hero-nav-color, #C19A6B);

	/* CLAUDE: outline-offset: 4px für Abstand zwischen Button und Outline */
	outline-offset: 4px;
}

/* CLAUDE: .hero-slider__nav svg – SVG-Icons in Nav-Buttons */
/* CLAUDE: Ändern: Für andere Icon-Größen width/height anpassen */
.hero-slider__nav svg {
	/* CLAUDE: width: 24px für Icon-Breite */
	width: 24px;

	/* CLAUDE: height: 24px für Icon-Höhe */
	height: 24px;

	/* CLAUDE: stroke: currentColor übernimmt Farbe vom Parent-Button */
	stroke: currentColor;
}

/* ======================================================================
   CLAUDE: 6) PAGINATION-DOTS (Slide-Indicator)
   CLAUDE: Dots am unteren Rand zeigen Anzahl Slides und aktives Slide
   ====================================================================== */

/* CLAUDE: .hero-slider__pagination – Container für Pagination-Dots */
/* CLAUDE: Ändern: Für andere Positionierung bottom/left/right anpassen */
.hero-slider__pagination {
	/* CLAUDE: position: absolute für Positionierung am unteren Rand */
	position: absolute;

	/* CLAUDE: bottom: 2rem für Abstand vom unteren Rand */
	/* CLAUDE: Ändern: Für andere Abstände bottom anpassen */
	bottom: 2rem;

	/* CLAUDE: left: 50% für horizontale Zentrierung */
	left: 50%;

	/* CLAUDE: transform: translateX(-50%) für exakte Zentrierung */
	transform: translateX(-50%);

	/* CLAUDE: z-index: 4 für Stacking über Content */
	z-index: 4;

	/* CLAUDE: display: flex für Flexbox-Layout (horizontale Dot-Anordnung) */
	display: flex;

	/* CLAUDE: gap: 0.75rem für Abstand zwischen Dots */
	/* CLAUDE: Ändern: Für andere Abstände gap anpassen */
	gap: 0.75rem;

	/* CLAUDE: pointer-events: none verhindert Clicks auf Container */
	pointer-events: none;
}

/* CLAUDE: .hero-slider__dot – Einzelner Pagination-Dot */
/* CLAUDE: Ändern: Für andere Dot-Größen width/height anpassen */
.hero-slider__dot {
	/* CLAUDE: pointer-events: auto aktiviert Clicks auf Dots */
	pointer-events: auto;

	/* CLAUDE: width: 12px für Dot-Breite */
	width: 12px;

	/* CLAUDE: height: 12px für Dot-Höhe */
	height: 12px;

	/* CLAUDE: border-radius: 50% für runde Dots */
	border-radius: 50%;

	/* CLAUDE: border: 2px solid für Outline */
	/* CLAUDE: Ändern: Für andere Border-Farben var() anpassen */
	border: 2px solid var(--hero-nav-color, #C19A6B);

	/* CLAUDE: background: transparent für transparenten Hintergrund (inaktive Dots) */
	background: transparent;

	/* CLAUDE: cursor: pointer für Hover-Cursor */
	cursor: pointer;

	/* CLAUDE: transition für Hover/Active-Effekt */
	/* CLAUDE: Ändern: Für andere Transition-Geschwindigkeiten duration anpassen */
	transition: background 0.3s ease, transform 0.2s ease;

	/* CLAUDE: padding: 0 entfernt Button-Padding */
	padding: 0;

	/* CLAUDE: opacity: 0.6 für leichte Transparenz (inaktive Dots) */
	opacity: 0.6;
}

/* CLAUDE: .hero-slider__dot:hover – Hover-State für Pagination-Dots */
/* CLAUDE: Ändern: Für andere Hover-Effekte background/transform anpassen */
.hero-slider__dot:hover {
	/* CLAUDE: opacity: 1 für volle Deckkraft beim Hover */
	opacity: 1;

	/* CLAUDE: transform: scale für leichten Vergrößerungs-Effekt */
	transform: scale(1.15);
}

/* CLAUDE: .hero-slider__dot.is-active – Aktiver Pagination-Dot */
/* CLAUDE: Ändern: Für andere Active-Styles background anpassen */
.hero-slider__dot.is-active {
	/* CLAUDE: background: var() für ausgefüllten Hintergrund (aktiver Dot) */
	background: var(--hero-nav-color, #C19A6B);

	/* CLAUDE: opacity: 1 für volle Deckkraft (aktiver Dot) */
	opacity: 1;
}

/* CLAUDE: .hero-slider__dot:focus – Focus-State für Keyboard-Navigation */
/* CLAUDE: Ändern: Für andere Focus-Styles outline anpassen */
.hero-slider__dot:focus {
	/* CLAUDE: outline: 2px solid für sichtbaren Focus-Ring (Accessibility) */
	outline: 2px solid var(--hero-nav-color, #C19A6B);

	/* CLAUDE: outline-offset: 4px für Abstand zwischen Dot und Outline */
	outline-offset: 4px;
}

/* ======================================================================
   CLAUDE: 7) RESPONSIVE ANPASSUNGEN
   CLAUDE: Mobile-First, dann Tablet, dann Desktop
   ====================================================================== */

/* CLAUDE: Mobile (<768px) */
/* CLAUDE: Ändern: Für andere Breakpoints max-width anpassen */
@media (max-width: 767px) {
	/* CLAUDE: Hero-Slider – kleinere Höhe auf Mobile */
	.hero-slider {
		/* CLAUDE: min-height: 60vh für kompaktere Darstellung auf Mobile */
		min-height: min(var(--hero-height, 70vh), 60vh);
	}

	/* CLAUDE: Content – zentrierter Text auf Mobile */
	.hero-slider__content {
		/* CLAUDE: align-items: center für zentrierte Ausrichtung */
		align-items: center;

		/* CLAUDE: text-align: center für zentrierten Text */
		text-align: center;

		/* CLAUDE: padding: 2rem für kleineres Padding auf Mobile */
		padding: 2rem 1.5rem;
	}

	/* CLAUDE: Titel – kleinere Font-Größe auf Mobile */
	.hero-slider__title {
		/* CLAUDE: font-size: clamp() mit kleineren Werten für Mobile */
		font-size: clamp(1.75rem, 6vw, 2.5rem);

		/* CLAUDE: margin-bottom: 1rem für kleineren Abstand */
		margin-bottom: 1rem;
	}

	/* CLAUDE: Beschreibung – kleinere Font-Größe auf Mobile */
	.hero-slider__description {
		/* CLAUDE: font-size: clamp() mit kleineren Werten für Mobile */
		font-size: clamp(0.875rem, 3.5vw, 1rem);

		/* CLAUDE: margin-bottom: 1.5rem für kleineren Abstand */
		margin-bottom: 1.5rem;
	}

	/* CLAUDE: Navigation – kleinere Buttons auf Mobile */
	.hero-slider__navigation {
		/* CLAUDE: padding: 0 1rem für kleineren Abstand vom Rand */
		padding: 0 1rem;
	}

	/* CLAUDE: Nav-Buttons – kleinere Größe auf Mobile */
	.hero-slider__nav {
		/* CLAUDE: width: 40px für kleinere Button-Breite */
		width: 40px;

		/* CLAUDE: height: 40px für kleinere Button-Höhe */
		height: 40px;
	}

	/* CLAUDE: Nav-Icons – kleinere Größe auf Mobile */
	.hero-slider__nav svg {
		/* CLAUDE: width: 20px für kleinere Icon-Breite */
		width: 20px;

		/* CLAUDE: height: 20px für kleinere Icon-Höhe */
		height: 20px;
	}

	/* CLAUDE: Pagination – kleinerer Abstand auf Mobile */
	.hero-slider__pagination {
		/* CLAUDE: bottom: 1.5rem für kleineren Abstand vom unteren Rand */
		bottom: 1.5rem;

		/* CLAUDE: gap: 0.5rem für kleineren Abstand zwischen Dots */
		gap: 0.5rem;
	}

	/* CLAUDE: Dots – kleinere Größe auf Mobile */
	.hero-slider__dot {
		/* CLAUDE: width: 10px für kleinere Dot-Breite */
		width: 10px;

		/* CLAUDE: height: 10px für kleinere Dot-Höhe */
		height: 10px;
	}
}

/* CLAUDE: Tablet (768px - 1023px) */
/* CLAUDE: Ändern: Für andere Breakpoints min-width/max-width anpassen */
@media (min-width: 768px) and (max-width: 1023px) {
	/* CLAUDE: Content – linksbündiger Text auf Tablet */
	.hero-slider__content {
		/* CLAUDE: padding: 3rem für mittleres Padding auf Tablet */
		padding: 3rem 2rem;
	}

	/* CLAUDE: Titel – mittlere Font-Größe auf Tablet */
	.hero-slider__title {
		/* CLAUDE: font-size: clamp() mit mittleren Werten für Tablet */
		font-size: clamp(2.25rem, 4.5vw, 3rem);
	}

	/* CLAUDE: Beschreibung – mittlere Font-Größe auf Tablet */
	.hero-slider__description {
		/* CLAUDE: font-size: clamp() mit mittleren Werten für Tablet */
		font-size: clamp(1rem, 2vw, 1.125rem);
	}
}