/* Schriftart festlegen */
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed-Regular.eot');
    src: url('../fonts/BarlowCondensed-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BarlowCondensed-Regular.woff2') format('woff2'),
         url('../fonts/BarlowCondensed-Regular.woff') format('woff'),
         url('../fonts/BarlowCondensed-Regular.ttf')  format('truetype'),
         url('../fonts/BarlowCondensed-Regular.svg#BarlowCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed-Bold.eot');
    src: url('../fonts/BarlowCondensed-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BarlowCondensed-Bold.woff2') format('woff2'),
         url('../fonts/BarlowCondensed-Bold.woff') format('woff'),
         url('../fonts/BarlowCondensed-Bold.ttf')  format('truetype'),
         url('../fonts/BarlowCondensed-Bold.svg#BarlowCondensed') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed-Italic.eot');
    src: url('../fonts/BarlowCondensed-Italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BarlowCondensed-Italic.woff2') format('woff2'),
         url('../fonts/BarlowCondensed-Italic.woff') format('woff'),
         url('../fonts/BarlowCondensed-Italic.ttf')  format('truetype'),
         url('../fonts/BarlowCondensed-Italic.svg#BarlowCondensed') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed-BoldItalic.eot');
    src: url('../fonts/BarlowCondensed-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BarlowCondensed-BoldItalic.woff2') format('woff2'),
         url('../fonts/BarlowCondensed-BoldItalic.woff') format('woff'),
         url('../fonts/BarlowCondensed-BoldItalic.ttf')  format('truetype'),
         url('../fonts/BarlowCondensed-BoldItalic.svg#BarlowCondensed') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'CormorantGaramond';
    src: url('../fonts/CormorantGaramond-Regular.eot');
    src: url('../fonts/CormorantGaramond-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CormorantGaramond-Regular.woff2') format('woff2'),
         url('../fonts/CormorantGaramond-Regular.woff') format('woff'),
         url('../fonts/CormorantGaramond-Regular.ttf')  format('truetype'),
         url('../fonts/CormorantGaramond-Regular.svg#CormorantGaramond-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CormorantGaramond';
    src: url('../fonts/CormorantGaramond-Bold.eot');
    src: url('../fonts/CormorantGaramond-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CormorantGaramond-Bold.woff2') format('woff2'),
         url('../fonts/CormorantGaramond-Bold.woff') format('woff'),
         url('../fonts/CormorantGaramond-Bold.ttf')  format('truetype'),
         url('../fonts/CormorantGaramond-Bold.svg#CormorantGaramond-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'CormorantGaramond';
    src: url('../fonts/CormorantGaramond-Italic.eot');
    src: url('../fonts/CormorantGaramond-Italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CormorantGaramond-Italic.woff2') format('woff2'),
         url('../fonts/CormorantGaramond-Italic.woff') format('woff'),
         url('../fonts/CormorantGaramond-Italic.ttf')  format('truetype'),
         url('../fonts/CormorantGaramond-Italic.svg#CormorantGaramond-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'CormorantGaramond';
    src: url('../fonts/CormorantGaramond-BoldItalic.eot');
    src: url('../fonts/CormorantGaramond-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CormorantGaramond-BoldItalic.woff2') format('woff2'),
         url('../fonts/CormorantGaramond-BoldItalic.woff') format('woff'),
         url('../fonts/CormorantGaramond-BoldItalic.ttf')  format('truetype'),
         url('../fonts/CormorantGaramond-BoldItalic.svg#CormorantGaramond-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

/* Schriftart und Größe per Default */
body {
    	font-family: 'BarlowCondensed';
	font-size: 16pt;
}

/* Primäre Farben definieren */
:root {
  --cassiopeia-color-primary: #283D20;
  --cassiopeia-color-hover: #283D20;
  --cassiopeia-color-link: #283D20;
}

/* Beginn des Designs der Sektionen */
/* Hauptfarbe im Kopf- und Fußbereich */
.container-header, .container-footer {
	background-color: #283D20;
	background-image: none;
  	color: #e6e6e6;
	text-align: left;
}

.container-topbar a {
  color: #a48e78;
  text-decoration: none; /* Keine Unterstreichung */
}

.container-topbar a:hover {
  color: #a48e78;
  text-decoration: none; /* Keine Unterstreichung */
}

.container-topbar a:visited {
  color: #a48e78;
  text-decoration: none; /* Keine Unterstreichung */
}

/* Logo Container designen */
.container-topbar {
   	text-align: left;
}

/* Logo ausrichten */
.container-topbar img {
    	width: 200px;
    	height: 200px;
    	object-fit: contain; /* Bild behält sein Seitenverhältnis */
    	text-align: left; /* Logo zentral ausrichten */
    	display: block;
    	margin: 0 auto; /* Horizontal zentrieren */
}

/* Header Design */
.logo-wrapper {
	display: flex; /* Setzt die Elemente nebeneinander */
  	align-items: center; /* Vertikale Zentrierung */
  	gap: 100px; /* Abstand zwischen Logo und Titel */
    	justify-content: center;   /* Zentriert den Inhalt horizontal */
	margin-bottom: 20px;
}

.logo img {
  	display: block; /* Verhindert zusätzlichen Abstand durch Inline-Element */
}

.titel-wrapper {
	display: flex; 
	flex-direction: column;
}

.logo-titel {
  	justify-content: center; /* Vertikale Zentrierung */
  	text-align: left; /* Links ausrichten */
	color: #a48e78;
        border: 0px;
	font-family: 'CormorantGaramond';
	font-size: 32pt;
  	font-weight: bold;
  	margin: 0; /* Kein zusätzlicher Abstand */
}

.untertitel-wrapper {
	display: flex; /* Setzt die Elemente nebeneinander */
	align-items: center;
}

.logo-untertitel {
        font-family: 'BarlowCondensed';
	font-size: 20pt;
	color: #a48e78;
  	margin: 5px 0 0 0; /* Abstand zwischen Titel und Untertitel */
}

.dot {
  	display: inline-block;
  	width: 5px;
  	height: 5px;
  	margin: 0 8px; /* Abstand zum Text */
        background-color: #a48e78;
        border-radius: 50%; /* Macht es zu einem Punkt */
	align-items: center; /* Zentriert den Punkt vertikal */
	justify-content: center; 
	vertical-align: middle; /* Zentriert den Punkt vertikal im Text */
   }

/* Überschriften der Module */
.card-header {
    	font-family: 'BarlowCondensed';
	font-size: 36pt;
	color: #a48e78;    	
	text-align: left; /* Zentriert den Titel */
    	margin: 0; /* Optional: Entfernt den Standardabstand */
    	background-color: transparent; /* Keine Hintergrundfarbe */
}

/* Design der Moduke */
.module-leistungen, .module-kurzgutachten {
    	background-color: #283D20; /* dunkles Grün */
    	color: #e6e6e6;
    	border-radius: 15px; /* Runde Ecken */
    	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schattierung */
    	padding: 20px; /* Innenabstand */
    	margin: 20px 0; /* Außenabstand */
}

.module-kurzgutachten .card-header {
    	border-bottom: 1px solid #e6e6e6; 
}

.module-leistungen .card-header {
    	border-bottom: 1px solid #e6e6e6; 
}

.module-ansatz, .module-kontakt, .module-team {
	background-color: #e6e6e6; /* grau */
	color: #283D20;
	border-radius: 15px; /* Runde Ecken */
    	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schattierung */
    	padding: 20px; /* Innenabstand */
    	margin: 20px 0; /* Außenabstand */
}

.team {
    	color: #283D20;
    	padding: 10px; /* Innenabstand */
    	flex: 1 1 48%; /* Jeder Container nimmt 48% der Gesamtbreite ein */
}

/* Standard-Link */
.team a {
  color: #283D20;
  text-decoration: none; /* Keine Unterstreichung */
}

.kontakt a {
  color: #283D20;
  text-decoration: none; /* Keine Unterstreichung */
}

.logo-untertitel a {
  color: #a48e78;
  text-decoration: none; /* Keine Unterstreichung */
}

.impressum a {
  color: #000000;
  text-decoration: none; /* Keine Unterstreichung */
}

/* Link beim Hovern */
.team a:hover {
  color: #283D20;
  text-decoration: none; /* Unterstreichung beim Hovern */
}

.kontakt a:hover {
  color: #283D20;
  text-decoration: none; /* Unterstreichung beim Hovern */
}

.logo-untertitel a:hover {
  color: #a48e78;
  text-decoration: none; /* Keine Unterstreichung */
}

.impressum a:hover {
  color: #000000;
  text-decoration: none; /* Keine Unterstreichung */
  }

/* Besuchter Link */
.team a:visited {
  color: #283D20;
  text-decoration: none;
}

.kontakt a:visited {
  color: #283D20;
  text-decoration: none;
}

.logo-untertitel a:visited {
  color: #a48e78;
  text-decoration: none; /* Keine Unterstreichung */
}

.impressum a:visited {
  color: #000000;
  text-decoration: none; /* Keine Unterstreichung */
}

.team-wrapper {
    	display: flex; /* Aktiviert Flexbox für den Wrapper */
    	justify-content: space-between; /* Verteilt die Container mit Abstand */
    	gap: 20px; /* Abstand zwischen den Containern */
    	width: 100%; /* Die Breite des Wrappers ist 100% der Seite */
}

/* Unterstrich der Module definieren */
.module-ansatz .card-header{
	border-bottom: 1px solid #283D20; 
}

.module-kontakt .card-header{
	border-bottom: 1px solid #283D20; 
}

.module-team .card-header{
	border-bottom: 1px solid #283D20; 
}

/* Design von Zitaten */
blockquote {
    	font-style: italic; /* Kursiver Text */
    	border-left: 5px solid #ccc; /* Graue linke Grenze */
    	background-color: white; /* Heller Hintergrund */
    	color: #283D20;
  border-radius: 15px; /* Runde Ecken */
    	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
  	position: relative;
  	padding-left: 3rem; /* Platz für das große Zitatzeichen */
  	margin: 1rem 0;
	margin-bottom: 1rem;
  	text-indent: -1.5rem; /* Damit die erste Zeile beginnt, wo die anderen eingerückt sind */
}

blockquote::before {
    	content: '“'; /* Das Symbol für den Anfang eines Zitats */
    	font-size: 3em; /* Größeres Symbol */
    	color: #e6e6e6; /* Graue Farbe für das Symbol */
  	font-weight: bold;
  	position: absolute;
    	left: 2rem; /* Positioniere das Zitatzeichen innerhalb des Containers */
    	top: 2rem; /* Kleinere Anpassung, damit es gut aussieht */
  	line-height: 1;
}

.maps-frame {
	width: 400px;
	height: 250px;
    	border-radius: 15px; /* Runde Ecken */
    	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schattierung */
}

li::marker {
  font-weight: bold;
}

.footer1 {
    	flex: 1 1 48%; /* Jeder Container nimmt 48% der Gesamtbreite ein */
}

.footer2{
    	flex: 1 1 48%; /* Jeder Container nimmt 48% der Gesamtbreite ein */
  	text-align: right;
}

.mod-footer {
  	display: flex;
  	justify-content: space-between;
    	gap: 20px; /* Abstand zwischen den Containern */
    	width: 100%; /* Die Breite des Wrappers ist 100% der Seite */
}

@media (min-width: 768px) {

    footer div.mod-footer {
    flex-direction: row;
  }
}

@media (max-width: 768px) {

.logo-wrapper {
        flex-direction: column; /* Container untereinander anordnen */
        align-items: center; /* Zentriert die Container */
	gap: 20px; /* Abstand zwischen den Elementen */
	/*margin-left: 20px;*/
 	text-align: center; /* Sorgt für zentrierte Schrift */
}

.logo-titel {
	font-size: 24pt;
	flex: 1 1 100%; /* Jeder Container nimmt jetzt 100% der Breite ein */
        margin: 10px 0; /* Etwas weniger Außenabstand für kleinere Bildschirme */
        box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite einberechnet werden */
        overflow: hidden; /* Verhindert Overflow des Inhalts */
	text-align: center; /* Zentriert den Text */
}

.logo-untertitel {
	font-size: 18pt;
  	margin: 5px 0 0 0; /* Abstand zwischen Titel und Untertitel */
	text-align: center; /* Zentriert den Text */
}

    .logo {
        flex: 1 1 100%; /* Jeder Container nimmt jetzt 100% der Breite ein */
        margin: 10px 0; /* Etwas weniger Außenabstand für kleinere Bildschirme */
        box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite einberechnet werden */
        overflow: hidden; /* Verhindert Overflow des Inhalts */
    }

    .titel-wrapper {
        align-items: center; /* Zentriert die Inhalte */
        text-align: center;
    }

    .untertitel-wrapper {
        justify-content: center; /* Zentriert die Untertitel und Punkte */
    }

   .card-header {
	font-size: 28pt;
	}

  .team-wrapper {
        flex-direction: column; /* Container untereinander anordnen */
        align-items: center; /* Zentriert die Container */
    }

    .team {
        flex: 1 1 100%; /* Jeder Container nimmt jetzt 100% der Breite ein */
        margin: 10px 0; /* Etwas weniger Außenabstand für kleinere Bildschirme */
        box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite einberechnet werden */
        overflow: hidden; /* Verhindert Overflow des Inhalts */
    }

.maps-frame {
	width: 300px;
	height: 250px;
}

  .mod-footer{
            flex-direction: column; /* Container untereinander anordnen */
        align-items: center; /* Zentriert die Container */
  }

  .footer1{
            flex: 1 1 100%; /* Jeder Container nimmt jetzt 100% der Breite ein */
        box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite einberechnet werden */
        overflow: hidden; /* Verhindert Overflow des Inhalts */
  }

  .footer2 {
            flex: 1 1 100%; /* Jeder Container nimmt jetzt 100% der Breite ein */
        box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite einberechnet werden */
        overflow: hidden; /* Verhindert Overflow des Inhalts */
  }
}
@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}