/* ----------  Schriftarten einbinden   ----------------------------- */
@font-face {
   font-family: 'dieKittieb_sans';
   src: url('assets/fonts/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
   font-weight: 300 800;
   font-style: normal;
}
@font-face {
   font-family: 'dieKittieb_sans';
   src: url('assets/fonts/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
   font-weight: 300 800;
   font-style: italic;
}
@font-face {
   font-family: 'dieKittieb_serif';
   src: url('assets/fonts/Lora-VariableFont_wght.ttf') format('truetype');
   font-weight: 400 700;
   font-style: normal;
}
@font-face {
   font-family: 'dieKittieb_serif';
   src: url('assets/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
   font-weight: 400 700;
   font-style: italic;
}
@font-face {
   font-family: 'dieKittieb_typewriter';
   src: url('assets/fonts/SpecialElite.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}
@font-face {
   font-family: 'dieKittieb_handwriting';
   src: url('assets/fonts/Caveat-VariableFont_wght.ttf') format('truetype');
   font-weight: 400 700;
   font-style: normal;
}
/* --------- V A R I A B L E N D E F I N I T I O N -------------------*/
:root {

   /* --- Schriften ---------------------------------------------------- */
   --tf-text: "dieKittieb_sans", sans;
   --tf-headings: "dieKittieb_serif", serif;

   /* --- Farbpalette -------------------------------------------------- */
   --color-diff: 0.08;
   --color-primary-h: 39;
   --color-primary-s: 0.87;
   --color-primary-l: 0.62;
   
   --color-fastschwarz: #1c2226;
   --color-fastweiss: #dddddc;
   --color-secondary-h: 27;
   --color-secondary-s: 0.81;
   --color-secondary-l: 0.58;


   --color-primary: #e08f2c;
   --color-primary-more: #b37223;
   --color-primary-less: #ecbc80;
   --color-secondary: #ea8d89;
   --color-secondary-more: #bb716e;
   --color-secondary-less: #f2bbb8;

   /* --- Farbzuweisungen ---------------------------------------------- */
   --color-dark-bg: var(--color-fastschwarz);
   --color-dark-fg: var(--color-fastweiss);
   --color-dark-link: var(--color-primary);
   --color-dark-link-more: var(--color-primary-more);
   --color-dark-link-less: var(--color-primary-less);
   --color-bright-bg: var(--color-fastweiss);
   --color-bright-fg: var(--color-fastschwarz);
   --color-bright-link: var(--color-primary);
   --color-bright-link-more: var(--color-primary-more);
   --color-bright-link-less: var(--color-primary-less);


}
/* --------- erste Zuweisungen -------------------------------------- */
body {
   font-family: var(--tf-text);
   font-size: max(1rem, 18px);
   font-weight: 500;
   margin: 0;
   padding: 0;
   color: var(--color-bright-fg);
   background-color: var(--color-bright-bg);
}

#contentbereich {
   color: var(--color-bright-fg);
   background-color: antiquewhite;
   position: relative;
   margin: 30px auto 0px auto;
   max-width: 75rem;
}
.dark {
   color: var(--color-dark-fg);
   background-color: var(--color-dark-bg);
}
.bright {
   color: var(--color-bright-fg);
   background-color: var(--color-bright-bg);
}
.tf-xxl {
   font-size: xx-large;
   font-weight: bold;
}
.centered {
   text-align: center;
}
.handwritten {
   font-family: "dieKittieb_handwriting", serif;
}
li {
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
}
/* ----------   F O O T E R   --------------------------------------- */
footer {
   position: relative;
}
footer h1 {
   font-size: 1.15rem;
}
footer ul, footer li {
   list-style: none;
   margin: 0;
   padding: 0;
}
.footer-spalten {
   display: flex;
   justify-content: space-between;
   gap: 2rem;
}
.footer-spalten > div {
   flex: 1;
   padding: 2rem;
}
.social-media {
   display: flex; /* Flexbox auf die Liste anwenden */
   gap: 1rem; /* Abstand zwischen den Icons */
}
.social-media li {
   margin: 0; /* Entfernt Standard-Margin */
   font-size: 1.9rem;
}
.footer-spalten a {
   transition: color 0.3s;
   color: var(--color-primary);
}
.footer-spalten a:hover {
   color: var(--color-primary-less);
}
.footer-bottom {
   text-align: center;
   font-size: smaller;
   padding: 1rem;
}
@media (max-width: 768px) {
   .footer-spalten {
      flex-direction: column;
      align-items: center;
   }
   .social-media {
      justify-content: center; /* Zentriert die Icons bei kleineren Bildschirmen */
   }
}
/* ----------   H E A D E R   --------------------------------------- */
header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 0;
   position: relative;
   font-size: 1.3rem;
   background-color: var(--color-fastschwarz);
   color: var(--color-fastweiss);
}
.logo img {
   max-height: 120px;
}
nav {
   display: flex;
   align-items: flex-end;
   padding-right: 2rem;
}
.nav-toggle {
   display: none;
   background: none;
   border: none;
   font-size: 1.5rem;
}
.nav-list {
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
   gap: 1rem;
}
.nav-list a {
   color: var(--color-primary);
   font-weight: 800;
   text-decoration: none;
   padding: 0.5rem 1rem;
   transition: background 0.3s;
}
.nav-list a.active {
   border-bottom: 5px solid var(--color-primary-more);
}
.nav-list a:hover,
.nav-list a:focus {
   color: var(--color-primary-more);
   outline: none;
}
@media (max-width: 768px) {
   /* Verstecke die Liste standardmäßig */
   .nav-list {
      display: none;
      position: absolute; /* Positioniere das Menü absolut */
      top: 100%; /* Setze die Position unterhalb des Headers */
      left: 0;
      width: 100%; /* Vollständige Breite */
      background-color: var(--color-fastschwarz); /* Hintergrundfarbe anpassen */
      padding: 1rem 0; /* Platz um den Text herum */
      z-index: 1; /* Stelle sicher, dass das Menü über anderen Inhalten liegt */
   }

   /* Ändere die Anzeige, wenn die Klasse 'active' vorhanden ist */
   .nav-list.active {
      display: flex;
      flex-direction: column;
      align-items: stretch; /* Zentriere die Elemente vertikal */
   }

   /* Stil für die Hamburger-Schaltfläche */
   .nav-toggle {
      display: block;
      color: var(--color-secondary);
   }
}
/* ---------------   M A I N  --------------------------------------- */
main {
   position: relative;
}
/* ------------------------- Hero Section / CTA / UNIQE anpassen! --- */
.hero-section {
   position: relative;
   background-image: url('images/hero_schiffsboden.jpg');
   background-size: cover;
   background-position: center; /* hier Fokus des Bildes setzen */
   padding: 70px 0; /* Anpassen des Abstands nach Bedarf */
}
.hero-content {
   max-width: 800px; /* Maximale Breite des Inhalts */
   margin: 0 auto; /* Zentrieren des Inhalts horizontal */
   background-color: #ecbc8070;
   padding: 3rem 4rem;
}
.hero-content h1 {
   font-size: 3em;
   margin-bottom: 20px;
}
.hero-content p {
   font-size: 1.2em;
   margin-bottom: 30px;
}
.cta-button {
   display: inline-block;
   padding: 15px 30px;
   text-decoration: none;
   border-radius: 5px;
   transition: background-color 0.3s;
}
.cta-button:hover {

}
/* ---------------------------------------- Image-text-container -----*/
.image-text-section {
   display: flex;
   align-items: center; /* Zentriert die Inhalte vertikal */
}
.image-text-section .image-container {
   flex: 1; /* Nimmt den verfügbaren Platz ein */
}
.image-text-section .image-container img {
   max-width: 100%; /* Stellt sicher, dass das Bild innerhalb seines Containers bleibt */
   height: auto; /* Behält das Seitenverhältnis des Bildes bei */
}
.image-text-section .text-container {
   flex: 1; /* Nimmt den verfügbaren Platz ein */
}
.image-text-section .text-container h1 {
   padding: 0rem 4rem;
}
.image-text-section .text-container p {
   padding: 0rem 4rem;
}
/*------------------------------------------- Drei Karten ------------*/
.card-section {
padding: 2em;
   display: flex;
   flex-wrap: wrap; /* Ermöglicht den Zeilenumbruch bei schmaleren Viewports */
   align-items: stretch;
   justify-content: space-around;
   gap: 2rem;
}
.card {
   flex: 1 0 18rem; /* Nimmt etwa ein Drittel der Breite ein und passt sich dynamisch an */
   padding: 1rem;
   background-color: var(--color-primary-less);
   border-radius: 0.5rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-section img {
   width: 100%;
   height: auto;
   box-shadow: 4px 4px 8px rgba(0,0,0,0.1);
}

/*------------------------------------------------ Spacer ------------*/
.spacer {
   position: relative;
   height: 2rem;
}
/* ---------------------------------------- einspaltig -----*/
.einspaltig {
   display: relative;
   align-items: center; /* Zentriert die Inhalte vertikal */
   padding: 0rem 4rem;
   background-color: antiquewhite;
}
/* ---------------------------------------- Image-text-container -----*/
.image-image-section {
   display: flex;
   align-items: center; /* Zentriert die Inhalte vertikal */
}
.image-image-section .image-container {
   flex: 1; /* Nimmt den verfügbaren Platz ein */
   padding: 2rem;
}
.image-image-section .image-container img {
   max-width: 100%; /* Stellt sicher, dass das Bild innerhalb seines Containers bleibt */
   width: 100%;
   height: auto; /* Behält das Seitenverhältnis des Bildes bei */
}