@font-face {
  font-family: 'Gotham Light';
  src: url('../fonts/gotham-light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Trajan Pro Regular';
  src: url('../fonts/trajan-pro-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

  .custom-toggler .navbar-toggler-icon {
  width: 40px; 
  height: 40px; 
  background-size: 40px 40px;
  }
  
/* Media Query für Desktop-Geräte */
@media (min-width: 768px) {
  .custom-navbar.mobil {
   display: none;
  }
}

@media (max-width: 768px) {
  .custom-navbar.desktop {
   display: none;
  }
}


.container-fluid {
    display: grid; /* Grid-Layout aktivieren */
    grid-template-columns: auto 1fr; /* Bild links und Navigation rechts */
    align-items: center; /* Zentriert die Elemente vertikal */
}



.navbar {
  background-color: #69c3be; /* Dezentes Türkis */
}

.navbar-nav {
    display: grid; /* Grid für die Navbar aktivieren */
    grid-auto-flow: column; /* Elemente in einer Zeile anordnen */
    list-style-type: none; /* Aufzählungszeichen entfernen */
    padding: 0; /* Innenabstand entfernen */
    margin: 0; /* Außenabstand entfernen */
    align-items: center;
}

.nav-item {
    margin: 0 15px;
    align-items: center;
}

.nav-item:hover {
	color:black;
	}

.nav-link {
    text-decoration: none; /* Unterstreichung der Links entfernen */
    color: white; /* Textfarbe */
    text-align: center; /* Text zentrieren */
}

.nav-link:hover {
  text-decoration: underline;
}

.navbar-image {
    height: 80px; /* Feste Höhe für Desktop-Geräte */
  }

@media (max-width: 767px) {
.navbar-image {
    max-width: 100%; /* Bildbreite auf 100% für mobile Geräte */
    height: 45px; /* Feste Höhe für mobile Geräte */
					}
.navbar-image.desktop {
	 display: none; /* Verstecke den Inhalt */
		    }
  }

.tab-content {
  max-width: 1400px; /* Maximale Breite für den Inhalt */
  margin: 0 auto; /* Zentriert den Inhalt */
  padding: 20px; /* Innenabstand */
  font-family: 'Gotham Light', sans-serif; /* Schriftart für die Überschrift */
  color: #333; /* Textfarbe */
  opacity: 0; /* Start mit unsichtbar */
  transition: opacity 1.5s ease; /* Übergang für die Opazität */
  height: 0; /* Start mit Höhe 0 */
  #overflow: hidden; /* Verstecke den Inhalt */
  visibility: hidden; /* Verstecke den Inhalt */
}

.tab-content.show {
    opacity: 1; /* Sichtbar */
    height: auto; /* Höhe anpassen */
    visibility: visible; /* Sichtbar */
}

.welcome-title {
  text-align: center; /* Zentriert die Überschrift */
  font-family: 'Trajan Pro Regular', serif; /* Standard Schriftart für Fließtext */
  font-size: 3em; /* Schriftgröße der Überschrift */
  margin-bottom: 20px; /* Abstand unter der Überschrift */
  color: #007B7F; /* Farbe der Überschrift */
}



.welcome-title.small {
  font-size: 1em; /* Schriftgröße der Überschrift */
  display: flex; /* Flexbox aktivieren */
  align-items: flex-end; /* Text am unteren Rand ausrichten */
  height: 100%; /* Sicherstellen, dass die Höhe des Containers definiert ist */
}

/* Media Query für Desktop-Geräte */
@media (max-width: 768px) {
  .welcome-title {
    font-size: 2em; /* Größere Schriftgröße für Desktop */
  }
    .welcome-title.small {
    font-size: 1em; /* Größere Schriftgröße für Desktop */
  }
}
/* Media Query für Desktop-Geräte */
@media (max-width: 768px) {
  .welcome-title.subtitle {
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
/* Media Query für Desktop-Geräte */
@media (min-width: 768px) {
  .welcome-title.subtitle {
    margin-top: 50px;
  }
}




.welcome-text {
  font-size: 1.0em;
  line-height: 1.5;
  margin-bottom: 15px;
  text-align: justify;
  text-justify: inter-word;
}

.welcome-text.large {
	font-size: 1.75em;
	line-height:1.2;
	}

/* Media Query für Desktop-Geräte */
@media (min-width: 768px) {
  .welcome-text {
    font-size: 1.5em; /* Größere Schriftgröße für Desktop */
    hyphens: auto; 
  }
  .welcome-text.small {
   font-size: 1em;
	}
}

@media (max-width: 768px) {
  .welcome-text {
  line-height: 1.25; /* Zeilenhöhe für bessere Lesbarkeit */
  }
  .welcome-text.large {
	font-size:1.5em;  
	  }
}

@media (max-width: 768px) {
  .welcome-text.leftbound {
  line-height: 1.25; /* Zeilenhöhe für bessere Lesbarkeit */
  text-align: left;
  }
}

.subtitle-h3 {
  font-family: 'Trajan Pro Regular', serif; /* Standard Schriftart für Fließtext */
  font-size: 1.5em; /* Schriftgröße der Überschrift */
  margin-bottom: 15px; /* Abstand unter der Überschrift */
  color: #007B7F; /* Farbe der Überschrift */
}

@media (max-width: 768px) {
  .subtitle-h3 {
   text-align: center; /* Zentriert die Überschrift */
  }
}

.welcome-image {
  display: block; /* Bild als Blockelement */
  width: 100%; /* Bildbreite auf 100% des Containers setzen */
  max-width: 1400px; /* Maximale Breite des Bildes */
  height: auto; /* Höhe automatisch anpassen */
  margin-top: 20px; /* Abstand über dem Bild */
}

.psy-image {
  max-width: 400px; /* Maximale Breite des Bildes */
  margin-left: auto;
  height: auto; /* Höhe automatisch anpassen */
  margin-top: 20px; /* Abstand über dem Bild */
  margin-bottom: 20px; /* Abstand über dem Bild */
  height: auto; /* Höhe automatisch anpassen */
}

@media (max-width: 768px) {
  .psy-image {
  margin-right: auto;
   max-width: 250px; /* Maximale Breite des Bildes */
  }
}

@media (min-width: 768px) {
  .psy-image {
  margin-left: 5%;
  margin-right: 5%;
  }
}

.content-wrapper {
  display: flex;
  flex-direction: row; /* Standardmäßig nebeneinander */
  justify-content: space-between; /* Platz zwischen Text und Bild */
  align-items: flex-start; /* Elemente oben ausrichten */
  margin: 20px 0; /* Abstand oben und unten */
}

.content-wrapper.leftimage {
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    margin: 10% 0;
	}

@media (max-width: 768px) {
  .content-wrapper {	
	flex-direction: column;  /* Stellt sicher, dass die Elemente untereinander angeordnet sind */
  }
  .content-wrapper.leftimage {
	  margin: 20px 0;
  }
}

.text-container {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    margin-left: 20px; /* Abstand zwischen Bild und Text */
}

.card-container {
    display: grid; /* Verwende Grid für das Layout */
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 20px; /* Abstand zwischen den Kästchen */
    padding: 20px; /* Innenabstand für den Container */
}

.card-container.double {
    display: grid; /* Verwende Grid für das Layout */
    grid-template-columns: repeat(2, 1fr); /* 3 Spalten */
    gap: 20px; /* Abstand zwischen den Kästchen */
    padding: 20px; /* Innenabstand für den Container */
}

.card-container.landingpage {
    display: grid; /* Verwende Grid für das Layout */
    grid-template-columns: repeat(5, 1fr); /* 3 Spalten */
    gap: 10px; /* Abstand zwischen den Kästchen */
    padding: 10px; /* Innenabstand für den Container */
    cursor: pointer; /* Zeiger-Cursor */
}

.card-container.double li {
		font-size: 1.4em;
}

@media (max-width: 768px) {
.card-container.double {
    grid-template-columns: repeat(1, 1fr); /* 3 Spalten */
}
.card-container.double li {
		font-size: 1.2em;
}
.card-container.landingpage {
	grid-template-columns: repeat(1, 1fr); /* 3 Spalten */
	gap: 2px; /* Abstand zwischen den Kästchen */
    padding: 2px; /* Innenabstand für den Container */
}
}

.card-container.large {
    display: grid; /* Grid-Layout aktivieren */
    grid-template-columns: 1fr; 
    justify-items: center; /* Zentriert die Inhalte in der Spalte */
}

.container-large-list {
    list-style-type: none; /* Keine Aufzählungszeichen */
    padding: 0; /* Innenabstand entfernen */
    margin: 0; /* Außenabstand entfernen */
    text-align: center; /* Text innerhalb der Liste zentrieren */
}

.container-large-list li {
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    margin: 15px 0; /* Abstand zwischen den Listenelementen */
    padding: 5px 5px; /* Innenabstand */
    width: 100%; /* Breite auf 100% setzen */
    min-height: 60px; /* Höhe definieren, um vertikale Zentrierung zu ermöglichen */
}

.card-container.large li {
    font-size: 1.4em;
}

.leftimage {
    width: 100%; /* Bildbreite auf 50% setzen */
    height: auto; /* Höhe automatisch anpassen */
    object-fit: cover; /* Bild proportional zuschneiden */
}

@media (max-width: 768px) {
.leftimage {
	display:none;
	}
.card.image.mobile {
	display:none;
	}

}

.card {
	width: 100%; /* Breite auf 100% setzen */
    background-color: #f9f2d2; /* Hintergrundfarbe der Karte */
    border: 1px solid #ccc; /* Rahmen um die Karte */
    border-radius: 8px; /* Abgerundete Ecken */
    padding: 15px; /* Innenabstand innerhalb der Karte */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für einen 3D-Effekt */
    transition: background-color 0.3s ease, transform 0.5s; /* Übergang für Hintergrundfarbe und Vergrößerung */
}

.card.odd {
	background-color: #92d3cf;
}

.card.image {
	background-color: white;
	border: none;
	padding: 25px;
	display: flex;
    height: 100%; /* Höhe des Containers */
    text-align: center; /* Textzentrierung */ 
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
}


.card.image:hover {
    transform: none; /* Vergrößert die Karte beim Hover */
}

.card:hover {
    transform: scale(1.05); /* Vergrößert die Karte beim Hover */
}

.card h3 {
    margin-top: 0; /* Entfernt den oberen Rand des Überschrift */
}

.card p {
    margin-bottom: 0; /* Entfernt den unteren Rand des Textes */
}

@media (max-width: 768px) {
    .card-container {
        display: flex; /* Flexbox für die mobile Ansicht */
        flex-direction: column; /* Elemente untereinander anordnen */
    }

    .card {
        margin-bottom: 20px; /* Abstand zwischen den Karten */
    }
    .card.mobcolor {
		background-color: #f9f2d2;
    }
    .card.image.desktop {
		display:none;
	}
}

.photo-card-container {
    display: grid; /* Verwende Grid für das Layout */
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    gap: 20px; /* Abstand zwischen den Karten */
    padding: 20px; /* Innenabstand für den Container */
}

.photo-card {
    background-color: #fff; /* Hintergrundfarbe der Karte */
    border: 1px solid #ccc; /* Rahmen um die Karte */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für einen 3D-Effekt */
    overflow: hidden; /* Versteckt Überlauf */
    text-align: center; /* Zentriert den Text */
    position: relative; /* Positionierung für das Bild */
}

.photo {
    width: 100%; /* Bildbreite auf 100% der Karte setzen */
    height: auto; /* Höhe automatisch anpassen */
    object-fit: cover; /* Bild wird skaliert, um den Container zu füllen */
    max-height: 300px; /* Maximale Höhe für das Bild */
}

.photo-title {
    margin: 10px 0 5px; /* Abstand um die Überschrift */
    font-size: 1.5em; /* Schriftgröße der Überschrift */
}

.photo-description {
    margin: 0 10px 10px; /* Abstand um den Beschreibungstext */
    font-size: 1em; /* Schriftgröße des Beschreibungstextes */
}

/* Mobile Darstellung */
@media (max-width: 768px) {
    .photo-card-container {
        grid-template-columns: 1fr; /* 1 Spalte für mobile Geräte */
    }

}

ul.custom-list {
  list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
  padding: 0; /* Entfernt den Standard-Padding */
  margin: 0; /* Entfernt den Standard-Margin */
  background-color: #f9f9f9; /* Hintergrundfarbe der großen Karte */
  border: 1px solid #ddd; /* Rahmen um die große Karte */
  border-radius: 8px; /* Abgerundete Ecken */
  padding: 15px; /* Innenabstand für die große Karte */
}

ul.custom-list li {
  font-size: 1.45em; /* Schriftgröße */
  line-height: 1.8; /* Zeilenhöhe */
  text-align: justify; /* Textausrichtung */
  margin-bottom: 15px; /* Abstand zwischen den Listenelementen */
}

@media (max-width: 768px) {
  .custom-list li {
    font-size: 1.0em !important; /* Schriftgröße für mobile Geräte */
    text-align: left !important; /* Textausrichtung für mobile Geräte */
    line-height: 1.3 !important; /* Zeilenhöhe für mobile Geräte */
  }
}

ul.custom-list li::before {
  content: ''; /* Entfernt das benutzerdefinierte Aufzählungszeichen */
}

@media (max-width: 768px) {
  .custom-list li::before {
    content: ''; /* Entfernt das benutzerdefinierte Aufzählungszeichen für mobile Geräte */
  }
}

.psy-image.desktop {
    display: block; /* Bild standardmäßig anzeigen */
}

@media (max-width: 768px) {
    .psy-image.desktop {
        display: none; /* Bild in der mobilen Ansicht ausblenden */
    }
}

.psy-image.mobile {
    display: block; /* Bild standardmäßig anzeigen */
}
@media (min-width: 768px) {
    .psy-image.mobile {
        display: none; /* Bild in der mobilen Ansicht ausblenden */
    }
    .photo {
    height: 300px; /* Maximale Höhe für das Bild */
}
}

.hover-container {
    position: relative; /* Ermöglicht die Positionierung der Liste relativ zum Container */
    display: inline-block; /* Damit der Container nur so viel Platz einnimmt wie nötig */
}

.hover-list {
    display: none; /* Standardmäßig versteckt */
    position: absolute; /* Positioniert die Liste relativ zum Container */
    bottom: 100%; /* Platziert die Liste über dem Text */
    left: 0; /* Aligniert die Liste links */
    background-color: white; /* Hintergrundfarbe der Liste */
    border: 1px solid #ccc; /* Rahmen um die Liste */
    z-index: 10; /* Stellt sicher, dass die Liste über anderen Elementen angezeigt wird */
}

.hover-container:hover .hover-list {
    display: block; /* Zeigt die Liste an, wenn der Container gehovt wird */
}

.popup-overlay {
    display: none; /* Standardmäßig verborgen */
    position: fixed; /* Fixiert auf dem Bildschirm */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Verfinsterung */
    z-index: 1000; /* Über anderen Elementen */
    justify-content: center; /* Zentrieren */
    align-items: center; /* Zentrieren */
}

.popup-content {
    background-color: white; /* Hintergrundfarbe des Infofeldes */
    padding: 20px; /* Innenabstand */
    border-radius: 8px; /* Abgerundete Ecken */
    max-width: 500px; /* Maximale Breite */
    text-align: left; /* Textausrichtung */
}

button {
    margin-top: 10px; /* Abstand zum oberen Inhalt */
    padding: 10px 15px; /* Innenabstand des Buttons */
    cursor: pointer; /* Zeiger-Cursor */
}

#popup-trigger {
    cursor: pointer; /* Zeiger-Cursor für das span-Element */
}

.map-container {
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%; /* Breite auf 100% setzen */
    max-width: 820px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert den Container */
}

.mapouter {
    position: relative;
    width: 100%; /* Breite auf 100% setzen */
    padding-top: 56.25%; /* Verhältnis 16:9 (Höhe = 56.25% der Breite) */
    overflow: hidden; /* Überlauf verstecken */
}

.osm_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Breite auf 100% setzen */
    height: 100%; /* Höhe auf 100% setzen */
}

#osm_canvas {
    width: 100%; /* Breite auf 100% setzen */
    height: 100%; /* Höhe auf 100% setzen */
    border: 0; /* Rahmen entfernen */
}


/* Media Query für mobile Geräte */
@media (max-width: 600px) {
    .mapouter {
        padding-top: 75%; /* Verhältnis anpassen für kleinere Bildschirme */
    }
}




/* Für Footer/Bottom-Bar etwas kleinere Rundung und Randabstand */
.bottom-bar {
  border-radius: 10px;
  margin: 1rem 0;                  /* Abstand ober/unterhalb */
  padding: 0.25rem 0;              /* Extra vertikaler Raum falls nötig */
}

.bottom-bar .bottom-nav {
  list-style: none;       /* keine Aufzählungszeichen */
  margin: 0;
  padding: 0;
  gap: 1.25rem;           /* Abstand zwischen Einträgen */
  display: flex;          /* Flexbox (falls bootstrap util-classes fehlen) */
  justify-content: center;
  align-items: center;
}

.bottom-bar .bottom-nav .nav-item {
  display: inline-block;
}

.bottom-bar .bottom-nav .nav-link {
     /* gleiche Farbe wie Navbar */
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

.bottom-bar .bottom-nav .nav-link:hover {
  text-decoration: underline;
}



.bottom-group {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;             /* distance from bottom of sidebar */
  display: flex;
  justify-content: center;  /* center the three items horizontally */
  gap: 0.75rem;             /* space between items */
  padding: 0 0.5rem;
  pointer-events: auto;     /* ensure clicks work */
}

/* style each item like your nav items */
.bottom-group .nav-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* links */
.bottom-group .nav-link {
  font-size: 0.8em;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  transition: background-color .15s, transform .08s;
}

.nav-link {
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  transition: background-color .15s, transform .08s;
}


.nav-link:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.nav-link.js-show-tab.desktop:hover {
    color: white; /* Erbt die Farbe vom übergeordneten Element */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

.nav-link:active { transform: translateY(0); }


       # contactForm {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: auto;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        textarea {
            resize: vertical;
            height: 100px;
        }

        input[type="submit"] {
            background-color: #69c3be;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }

        input[type="submit"]:hover {
            background-color: #37c3be;
        }

        .error-message {
            color: red;
            font-size: 14px;
            display: none;
        }

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f1f1f1;
    color: black; /* Semikolon hinzugefügt */
    padding: 20px;
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
	transition: height 0.8s ease, opacity 0.8s ease, padding 0.8s ease;
    z-index: 1000; 
}

.cookie-consent.collapsed {
    font-size: 0.8em;
    height: 30px; /* Höhe des zusammengefalteten Kästchens */
    overflow: hidden;
    text-align: left;
    padding: 5px 10px; /* Weniger Padding im zusammengefalteten Zustand */
    opacity: 0.8; /* Optional: Füge eine Opazität hinzu */
    position: fixed; /* Fixiere das Element */
    left: 0; /* Positioniere es an der linken Seite */
}

}


.cookiebutton {

	}

.cookiebutton.collapsed {
	display: none;
	}

/* Media Query für mobile Geräte */
@media (max-width: 600px) {
    .cookie-consent.collapsed {
        padding-bottom: 10px;
    }
}
@media (min-width: 600px) {
    .cookie-consent.collapsed {
	width: 25%; /* Setze die Breite auf 25% */
    max-width: 25%; /* Maximalbreite auf 25% beschränken */
		}
	}

.disabled {
    pointer-events: none;
    opacity: 0.2;
}

.contactForm {
    display: block; /* oder block-level Element */
    width: 75%;/* Lässt das Element wachsen */
    text-align: center;
    margin: 0 auto; 
}

.contactForm > * {
    display: inline-block; /* Macht die direkten Kinder zu Inline-Block-Elementen */
    text-align: center; /* Zentriert den Text innerhalb der Kinder */
}


.spacer {
	padding: 15px;
	}
	
.nachricht {
	padding: 10px;
	text-align: left;
	vertical-align: top;
	height: 300px;
	max-height: 300px;
	}

.seo-title {
	display: none;
	}