.feature-box h2.content-headline {
  margin-bottom: 30px;
}

h2, h3, h4{
	font-family: var(--base-font-family-3);
}

#header .inside,
#header .container {
  position: relative;
}

/* 2. Den Toggler innerhalb dieses Containers rechts bündig ausrichten */
.nav-toggler {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1002;
  pointer-events: auto;
  color: var(--links-color);
}
  @media screen and (min-width: 52em)
.nav-toggler {
  display: block;
}




#feature-box-outer {
  position: relative;
  z-index: 10;           
  margin-bottom: -150px;
  margin-top: 60px; 
}
.feature-image.content-image img {
  border-radius: 50%;
  border: 10px solid #1c71a7;
  background: #ffffff;
}
.fullwidth-image.top-line{
	border-top: 10px solid #1c71a7;
}
.stats.fullwidth-image.top-line.content-image {
  height: 700px;
}





/* Container über die volle Breite mit fester Höhe */
.fullwidth-image.content-image {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 520px; 
  overflow: hidden;
}

/* WICHTIG: Das figure-Tag dazwischen auf volle Höhe zwingen */
.fullwidth-image.content-image figure {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* Bild füllt nun das figure-Tag exakt aus */
.fullwidth-image.content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Zentriert den Bildausschnitt */
  display: block;
}






.mod_booknav {
  grid-column: 10; /* Platziert das Element exakt in Spalte 9 */
  /* Oder falls du z.B. Spalte 9 bis 12 nutzen möchtest: grid-column: 9 / 13; */
}

/* Container auf einer Zeile ausrichten */
.mod_booknav ul {
  display: flex;
  justify-content: space-between; /* Links, Mitte, Rechts ausrichten */
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Basis-Styles für die Links */
.mod_booknav li a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mod_booknav li a:hover{
	color: #777777;
}

.mod_booknav li.previous a,
.mod_booknav li.next a {
  font-size: 0; /* Versteckt den Text "Sortimentvielfalt" etc. */
}

/* Vor-Pfeil (Links) */
.mod_booknav li.previous a::before {
  content: "❮";
  font-size: 24px; /* Größe des Pfeils */
  color: #1c71a7; /* Pfeilfarbe */
}

/* Nach-Pfeil (Rechts) */
.mod_booknav li.next a::before {
  content: "❯"; 
  font-size: 24px;
  color: #1c71a7;
}

/* "Nach oben"-Link anpassen (Mitte) */
.mod_booknav li.up a {
  font-size: 14px; /* Text sichtbar lassen */
  color: #1c71a7;
}

.mod_booknav li.up a {
  font-size: 0;
}
.mod_booknav li.up a::before {
  content: "▲";
  font-size: 20px;
}









.swiper-pagination .swiper-pagination-bullet {
  background-color: #dfcc82; 
  opacity: 1;                
}

.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #111111; /
}

.swiper-pagination .swiper-pagination-bullet {
  width: 24px;
  height: 24px;
  margin: 0 8px; /* Abstand links und rechts */
}

.swiper-button-prev .swiper-navigation-icon {
  transform: rotate(180deg);
}

.swiper-button-next {
  left: auto;
  right: var(--swiper-navigation-sides-offset,40px);
  background: #fff !important;
  border-radius: 50%;
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset,40px);
  right: auto;
  background: #fff !important;
  border-radius: 50%;
}

/* ==========================================================================
   1. FULL-WIDTH SWIPER SLIDER
   ========================================================================== */

/* Ausbruch auf volle Bildschirmbreite */
#full-width .content-swiper,
.ce_sliderStart {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* Feste Höhe für Slides & Swiper-Wrapper */
#full-width .content-swiper .swiper-wrapper,
#full-width .content-swiper .swiper-slide,
.ce_sliderStart .swiper-wrapper,
.ce_sliderStart .swiper-slide {
  width: 100%;
  height: 100; /* Wunschhöhe für Desktop */
}

@media (max-width: 768px) {
  #full-width .content-swiper .swiper-wrapper,
  #full-width .content-swiper .swiper-slide,
  .ce_sliderStart .swiper-wrapper,
  .ce_sliderStart .swiper-slide {
    height: 380px; /* Reduzierte Höhe für Mobilgeräte */
  }
}

/* Bilder vollflächig und ohne Verzerren anpassen */
#full-width .content-swiper img,
.ce_sliderStart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}






/* --------------------------------------------------------------------------
   STICKY-HEADER (Mit geschmeidigem Einblenden)
   -------------------------------------------------------------------------- */

/* Base-Header: Transition vorbereiten */
#header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* Sticky-Zustand: Mit sanfter Slide-In Animation */
#header.is-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  z-index: 9999 !important;
  
  /* Animation für das sanfte Reingleiten */
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Keyframes: Animiert den Header von -100% (oben versteckt) auf 0 (sichtbar) */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* WICHTIG: Container & Hintergründe weiß halten */
#header.is-sticky .inside,
#header.is-sticky .container,
#header.is-sticky .row {
  background-color: #ffffff !important;
  box-shadow: none !important;
  z-index: 2;
}

/* Logo sanft verkleinern */
#header.is-sticky .home-logo img,
#header.is-sticky .head-landing img,
#header.is-sticky .logo img {
  max-height: 100px;
  width: auto;
  transition: max-height 0.3s ease;
}







/* --------------------------------------------------------------------------
   LOGO & ÜBERSTEHENDE ELEMENTE AUF UNTERSEITEN ANPASSEN
   -------------------------------------------------------------------------- */
/* Schiebt den Inhaltsbereich (#main) auf Unterseiten unter den Header weg,
   damit der Text beim Laden nicht HINTER der Navigation klebt */
body:not(:has(.content-swiper)):not(:has(.ce_sliderStart)) #main {
  padding-top: 120px; /* Anpassen an die tatsächliche Header-Höhe */
}

/* Verhindert, dass übergroße Logos/Grafiken im Header beim Scrollen 
   nach unten aus dem weißen Balken heraushängen */
#header.is-sticky .home-logo img,
#header.is-sticky .head-landing img {
  max-height: 50px; /* Skaliert das Logo im Sticky-Zustand sauber herunter */
  width: auto;
  transition: all 0.3s ease;
}




/* --------------------------------------------------------------------------
   STICKY-ZUSTAND
   -------------------------------------------------------------------------- */
#header.is-sticky,
body:has(.content-swiper) #header.is-sticky,
body:has(.ce_sliderStart) #header.is-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  will-change: transform; 
  z-index: 1000 !important;
}

/* WICHTIG: Den inneren Contao-Container ebenfalls weiß schalten */
#header.is-sticky .inside,
body:has(.content-swiper) #header.is-sticky .inside,
body:has(.ce_sliderStart) #header.is-sticky .inside {
  background: #ffffff !important;
  box-shadow: none !important;
  z-index: 2;
}

/* WICHTIG: Wenn kein Slider da ist, braucht der Wrapper ein Padding, 
   damit der Inhalt beim Wechsel zu position:fixed nicht nach oben springt */
body:not(:has(.content-swiper)):not(:has(.ce_sliderStart)) #wrapper {
  padding-top: 100px; /* Höhe deines Headers hier anpassen */
}

/* Sicherstellen, dass Wrapper und Main die Höhe nicht begrenzen */
#wrapper, #container, #main {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
}
/* --------------------------------------------------------------------------
   STICKY-ZUSTAND (wird durch das JavaScript ab 50px Scrollen aktiviert)
   -------------------------------------------------------------------------- */
#header.is-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Schrift beim Scrollen wieder auf Dunkel schalten */
#header.is-sticky .nav--main a,
#header.is-sticky .nav--main strong {
  color: #222222 !important;
}








/* Galerie-Container auf volle Bildschirmbreite ausdehnen (Full Width Breakout) */
#full-width .content-gallery {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  box-sizing: border-box;
}

/* Die Liste der Galeriebilder als 3-Spalten Grid aufbauen */
#full-width .content-gallery ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Genau 3 gleich große Spalten */
  gap: 1rem;                             /* Abstand zwischen den Kacheln */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Bilder sauber skalieren und Kacheln ausfüllen */
#full-width .content-gallery ul li {
  margin: 0;
  padding: 0;
}

#full-width .content-gallery ul li figure {
  margin: 0;
  height: 100%;
}

#full-width .content-gallery ul li img {
	width: 100%;
	height: auto;          /* Richtet sich nach den Bildmaßen aus Contao */
	aspect-ratio: 1 / 1;   /* Erzwingt im Browser ein perfektes Quadrat (1:1) */
	object-fit: cover;     /* Schneidet das Bild sauber ab, falls nötig */
	display: block;
}

/* Responsive Anpassung für Mobilgeräte */
@media (max-width: 768px) {
  #full-width .content-gallery ul {
    grid-template-columns: 1fr; /* Mobil 1-spaltig untereinander */
  }
}




.content-image.border-r-8 img, .content-gallery.border-r-8 img {
  border-radius: 8px;
}
.content-gallery a:hover {
  opacity: 0.6;
}

.content-text .rte {
  color: #444444;
}

.content-headline {
	margin: 0;
}

b, strong {
  font-weight: 700 !important;
  font-family: 'Merriweather' !important;
}


.nav-toggler__button .menu-icon__inner::after {
  bottom: -10px;
}

.nav-toggler__button .menu-icon__inner::before {
  top: -10px;
}

.nav-toggler__button .menu-icon__inner::after {
  bottom: -10px;
}

.nav-toggler__button {
  color: #555555;
}



.mod_navigation.nav.nav--horizontal.nav--right.nav--main.nav--mobile.block {
  font-family: 'Barlow Condensed';
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 400;
}

.nav--horizontal a, .nav--horizontal strong.active, .nav--horizontal strong.trail, .nav--horizontal strong.forward {
  font-family: 'Barlow Condensed' !important;
  font-size: 1.3em;
}

.content-image.border-r-12 img{
border-radius: 12px
}

/* bei Mouse-hover Figurecaption im Bild anzeigen */
.img-hover-text img:hover {
  transform: none !important;
  -ms-transform: none !important;
  transition: none !important;
  z-index: inherit;
}
.img-hover-text figure:hover figcaption {
  opacity: 0.8;
  visibility: visible;
  z-index: +1;
}
.img-hover-text figcaption {
position: absolute;
background-color: #555555;
color: white;
padding: 5px;
transition: .8s;
opacity: 0;
font-size: inherit;
font-weight: 600;
width: 440px;
top: inherit;
margin-top: -40px;
}


blockquote h2 {
  display: block;
  width: 80px;
  border-right: 5px solid;
}

.img-round img {
  border-radius: 20px;
}

#header,
#container {
  background-image: url("/files/peterhof/images/peterhof_layout/pattern-main.png") !important;
}

[id="footer"] {
  border-top: none;
  background-color: #1c71a7;
}

.ce_form {
  --card-padding: 0;
  background-image: url("/files/peterhof/images/peterhof_layout/bg-image.png");
}

input.text, input.captcha, textarea.textarea, select.select {
  background-color: #666666;
}


p a, ul a, ol a {
  text-decoration: none;
}
.logo{
	position: relative;
	top: 20px;
}

.logo img{
	weight: 220px !important;
}

[id="header"] .inside {;
  padding-bottom: 0px;
}

.mod_article > .inside{
	padding-top: 20px;
	padding-bottom: 20px;
}

cto-toolbar {
  display: none;
}
#footer p, #footer a{
	font-size: 0.7rem;
	color: #ffffff;
}

[id="footer"] .inside {
  padding-top: 10px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

#footer h4 {
  color: #999999;
  font-family: 'Barlow Condensed';
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   DESKTOP & MOBILE NAV-TOGGLER (Inklusive Sichtbarkeit & Dropdown)
   ========================================================================== */

/* 1. TOGGLER-BUTTON IMMER SICHTBAR MACHEN (Hebt Theme-Sperre ab 52em auf) */
.nav-toggler,
.nav-toggler__button {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2. HORIZONTALE STANDARD-NAVIGATION AUF DESKTOP (im geschlossenen Zustand) */
@media screen and (min-width: 52em) {
  #header nav.mod_navigation:not(.is-open):not(.active):not(.nav--mobile--active) {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    padding: 0 !important;
  }

  #header nav.mod_navigation:not(.is-open):not(.active):not(.nav--mobile--active) ul.level_1 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
  }

  #header nav.mod_navigation:not(.is-open):not(.active):not(.nav--mobile--active) ul.level_1 li {
    display: inline-block !important;
    width: auto !important;
  }
}

/* 3. MOBIL-STANDARDS (Unter 52em im geschlossenen Zustand ausblenden) */
@media screen and (max-width: 51.9375em) {
  #header nav.mod_navigation:not(.is-open):not(.active):not(.nav--mobile--active) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-15px) !important;
  }
}

/* 4. GEÖFFNETER TOGGLER-ZUSTAND (Gilt für Mobil & Desktop gleichermaßen) */
#header nav.mod_navigation.is-open,
#header nav.mod_navigation.active,
#header nav.mod_navigation.nav--mobile--active,
.nav-toggler.is-open ~ nav.mod_navigation {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  z-index: 9999 !important;
  padding: 20px 30px !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Menüpunkte im geöffneten Toggler-Zustand immer vertikal ausrichten */
#header nav.mod_navigation.is-open ul.level_1,
#header nav.mod_navigation.active ul.level_1,
#header nav.mod_navigation.nav--mobile--active ul.level_1,
.nav-toggler.is-open ~ nav.mod_navigation ul.level_1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

#header nav.mod_navigation.is-open ul.level_1 li,
#header nav.mod_navigation.active ul.level_1 li,
#header nav.mod_navigation.nav--mobile--active ul.level_1 li,
.nav-toggler.is-open ~ nav.mod_navigation ul.level_1 li {
  display: block !important;
  width: 100% !important;
}