/* -------------------------------------------
   1. GRUNDEINSTELLUNGEN
-------------------------------------------- */
body {
    background-color: #0a3876; /* Hintergrundfarbe außerhalb des Containers */
    margin: 0;
    padding: 0 20px; /* Abstand zum Rand */
    font-family: "Yu Gothic UI Light", "Yu Gothic UI", sans-serif;
    min-height: 100vh;
}

.page-container {
    max-width: 1200px;
    width: 100%;
    background-color: white;
    margin: 0 auto;
    padding: 0;
}

.responsive-img {
    display: block;
    margin: 0 auto;
    max-width: 800px; /* Maximal 400px, aber auf kleinen Bildschirmen kleiner */
    width: 100%;      /* Immer an die Bildschirmgröße anpassen */
    height: auto;     /* Seitenverhältnis bewahren */
}


/* -------------------------------------------
   2. HEADER & NAVIGATION
-------------------------------------------- */
.header {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #156082;
    color: white;
    text-align: center;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu {
    display: flex;
    justify-content: center;
    background-color: #156082;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.menu ul li {
    position: relative;
}

.menu ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
    transition: background-color 0.3s;
}

/* Aktive Seite */
.menu ul li a.active {
    background-color: #002766;
    color: white;
    border-radius: 5px;
    padding: 10px 15px;
}

/* Hover-Effekt */
.menu ul li a:hover {
    background-color: #156082;
}

/* -------------------------------------------
   3. MOBILE NAVIGATION (max-width: 860px)
-------------------------------------------- */
.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
    text-align: center;
    background-color: #156082;
    padding: 10px;
    margin-left: auto;
}

@media (max-width: 860px) {
    .menu {
        display: none; /* Menü anfangs verstecken */
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: #156082;
    }
    .menu-toggle {
        display: block;
    }
    .menu.show {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .menu ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .menu ul li {
        width: 100%;
        text-align: center;
    }
}

/* -------------------------------------------
   4. LOGO (zentriert, responsive)
-------------------------------------------- */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px auto;
}

.logo img {
    max-width: 250px;
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 600px) {
    .logo img {
        max-width: 180px;
    }
}

/* -------------------------------------------
   5. CONTENT SECTION: Bild & Text
-------------------------------------------- */
.content-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 20px auto;
    gap: 20px;
}

.content-section.reverse {
    flex-direction: row-reverse;
}

/* Text-Bereich */
.text-section {
    flex: 1;
    max-width: 50%;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    margin-left: 20px; /* Auf großen Bildschirmen 20px linker Rand */
    word-wrap: break-word; /* Verhindert Überlaufen langer Wörter */
}

h1 { font-size:20pt;
	 text-align: center;
     color: darkblue;
     padding-left 20px;
     }

h2 { font-size:16pt;
	 text-align: center;
     color: darkblue;
     padding-left 20px;
     }




/* -------------------------------------------
   6. BILDER: ABOUT-SEITE vs. BLOG-SEITE
-------------------------------------------- */
/* ABOUT => 40% / BLOG => 50% (bzw. 60% -> 50% 
   je nach Wunsch anpassen)
*/

/* ABOUT-BILDER => Standard auf großen Bildschirmen ~40% */
.about-image {
    display: block;
    max-width: 40%;
    width: auto;
    height: auto;
}

/* BLOG-BILDER => Standard auf großen Bildschirmen ~50% */
.blog-image {
    display: block;
    max-width: 50%;
    width: auto;
    height: auto;
}

/* -------------------------------------------
   7. MOBILE ANSICHT (max-width: 800px)
-------------------------------------------- */
@media (max-width: 800px) {
    .content-section {
        flex-direction: column; /* Bild & Text untereinander */
        text-align: left;
        align-items: flex-start;
    }
    .text-section {
        max-width: 100%;
        margin-left: 0; 
        margin-top: 10px; 
        padding: 0 20px; /* 20px links/rechts => kein Überlaufen */
    }

    /* ABOUT + BLOG => 100% Breite auf Handy */
    .about-image,
    .blog-image {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* -------------------------------------------
   8. FOOTER
-------------------------------------------- */
footer {
    background-color: #0a3876;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

footer p {
    margin: 0;
    line-height: 1.5;
}

footer a {
    color: white;
    text-decoration: underline;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #cceeff;
}

/* -------------------------------------------
   9. WHATSAPP FLOATING BUTTON
-------------------------------------------- */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.whatsapp-float img {
    width: 50px;
    height: 50px;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}

.img-text-width {
    max-width: 100%; /* Verhindert, dass das Bild breiter als sein Container wird */
    width: 100%; /* Sorgt dafür, dass es sich der Containerbreite anpasst */
    height: auto; /* Behält das Seitenverhältnis bei */
    display: block; /* Verhindert unerwünschte Abstände */
    margin: 0 auto; /* Zentriert das Bild */
}


/* -------------------------------------------
   10. SECTION-TITLE 
-------------------------------------------- */
.section-title {
    font-size: 25px;
    font-weight: bold;
    color: #156082;
    word-wrap: break-word; /* Falls extrem lange Wörter */
}

/***********************************************
   BLOG-SEITE: 50% / 50% Layout
***********************************************/

/* Ganze Reihe/Block */
.blog-row {
    display: flex;
    flex-wrap: nowrap;       /* Kein Umbruch auf großen Bildschirmen */
    align-items: center;     /* Vertikale Zentrierung => Bild & Text in der Mitte */
    justify-content: space-between; 
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;       /* Zentriert den Block */
    padding: 20px 0;         /* Gleicher Abstand oben & unten => text mittig */
    box-sizing: border-box;
}

/* Um Bild rechts, Text links zu vertauschen */
.blog-row.reverse {
    flex-direction: row-reverse;
}

/* Bildcontainer => 50% */
.blog-img-container {
    width: 50%;                /* Fester 50-%-Bereich */
    min-width: 200px;          /* Nicht zu schmal */
    display: flex;
    align-items: center;       /* Bild vertikal in der Mitte (innerhalb Container) */
    justify-content: center;   /* Bild horizontal zentriert im Container */
    box-sizing: border-box;
}

/* Bild selbst */
.blog-img {
    display: block;
    max-width: 100%;   /* Bild skaliert innerhalb Container */
    height: auto;
}

/* Text => 50% */
.blog-text {
    width: 50%;
    text-align: center;    /* Zentrierter Text (horizontal) */
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    word-wrap: break-word;
    /* => So hat text oben/unten den gleichen Abstand 
       wegen .blog-row {padding: 20px 0;} */
}

/* =======================
   MOBILE (max-width: 800px)
   => Bild + Text je 100%, 
   untereinander
========================= */
@media (max-width: 800px) {
    .blog-row {
        flex-wrap: wrap; 
        flex-direction: column;  /* Stapeln */
        align-items: center;     /* zentriert horizontal */
        padding: 20px 0;
    }
    .blog-img-container,
    .blog-text {
        width: 100% !important;  
        margin: 0;
        padding: 0 20px;         /* 20px Rand links & rechts => nichts überläuft */
    }
    .blog-text {
        margin-top: 20px;        /* Abstand unter dem Bild */
        text-align: center;      /* Bleibt zentriert */
    }
}

/* Container um horizontales Scrollen zu verhindern */
.table-container {
  overflow-x: auto;
  margin: 20px 0;
}

/* Elegante, responsive Tabelle */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

/* Tabellenkopf */
.responsive-table thead th {
  background-color: #156082;
  color: #ffffff;
  padding: 12px 15px;
  font-size: 16px;
  text-align: left;
  border-bottom: 2px solid #002766;
}

/* Zellen im Kopf- und Body-Bereich */
.responsive-table th,
.responsive-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

/* Zebra-Streifen für den Tabellenkörper */
.responsive-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Hover-Effekt für Body-Zeilen */
.responsive-table tbody tr:hover {
  background-color: #f1f1f1;
}

/* Standard-Text in Zellen */
.responsive-table td {
  font-size: 14px;
  color: #333;
  text-align: left;
}

/* Rechtsbündig für numerische Spalten (2. und 3. Spalte) */
.responsive-table th:nth-child(2),
.responsive-table th:nth-child(3),
.responsive-table td:nth-child(2),
.responsive-table td:nth-child(3) {
  text-align: right;
}


.blog-frame {
  border: 2px solid #156082; /* Rahmenfarbe */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 15px; /* Innenabstand */
  margin: 20px 0; /* Abstand zwischen den Rahmen */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
  background: #fff; /* Hintergrundfarbe */
}

/* Du kannst hier natürlich eigene Farben verwenden oder die Werte anpassen. */

/* Tabellenstil */
table {
  font-family: "Yu Gothic UI Light", "Yu Gothic UI", sans-serif;
  width: 60%;
  margin: 20px auto;
  border-collapse: collapse;
  text-align: left;
  font-family: Arial, sans-serif;
  background-color: #f8fcff; /* Heller Blauton für Tabellenhintergrund */
  font-size: 16px;
}

/* Tabellenzellen */
th,
td {
  border: 2px solid #bcd4e6; /* Hellblaue Umrandung */
  padding: 10px 15px;
}

/* Tabellenkopf-Hintergrund */
thead {
  background-color: #cce4f6; /* Deutlichere Färbung für Tabellenkopf */
}

/* Abwechselnde Zeilenfärbung */
tbody tr:nth-child(odd) {
  background-color: #e4f1fb;
}

/* Hover-Effekt */
tbody tr:hover {
  background-color: #d4e7f5;
}

/* Optionale Zentrierung des Tabellenkopfs */
th {
  text-align: center;
}

/* 1. Spalte linksbündig */
table th:nth-child(1),
table td:nth-child(1) {
  text-align: left;
}

/* 2. und 3. Spalte zentrieren */
table th:nth-child(2),
table td:nth-child(2),
table th:nth-child(3),
table td:nth-child(3) {
  text-align: center;
}

/* Videos */
.video-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Verhältnis */
    background: black;
}

.video-thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    cursor: pointer;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    font-size: 24px;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.play-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.video-iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}


/* ==== WEGE: 2 Spalten, 3 Reihen, saubere Abstände, volle Breite ==== */
#wege {
  margin: 40px auto;             /* Luft zur Sektion oben/unten */
  max-width: 1200px;             /* an deinen Content angelehnt */
  width: 100%;
  box-sizing: border-box;
}

/* Hart auf Grid festnageln + Lücken definieren */
#wege .cards {
  display: grid !important;                     /* überschreibt evtl. flex/block */
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 36px !important;                         /* gleicher Abstand in X/Y */
  width: 100%;
  padding: 36px 0;                              /* Abstand zum oberen/unteren Rand der Sektion */
  box-sizing: border-box;
  justify-items: stretch;
  align-items: stretch;
}

/* Mobil: 1 Spalte, gleichmäßige Lücken */
@media (max-width: 980px) {
  #wege .cards {
    grid-template-columns: 1fr;
    gap: 28px !important;
    padding: 28px 0;
  }
}

/* Karten: keine Außenabstände, weißer Hintergrund, gleich hoch pro Zeile */
#wege .card {
  margin: 0 !important;                         /* verhindert Zusammenkleben/Überschreiben */
  background: #fff !important;                  /* statt beige */
  border: 1px solid rgba(139,69,19,.15);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  height: 100%;                                  /* füllt Zeilenhöhe */
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* Keine Top-Linie/Accent */
#wege .card::before { content: none !important; }

/* Typo/Buttons */
#wege .card h3 { margin: 0 0 12px; color:#8B4513; font-weight:700; }
#wege .card p { margin: 8px 0; line-height:1.6; color:#333; }
#wege .card p strong { color:#8B4513; }
#wege .card .btn {
  align-self: flex-start;
  margin-top: auto;                              /* Button an Kartenende */
  background:#8B4513; color:#fff;
  text-decoration:none; padding:10px 18px; border-radius:999px; font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transition: background-color .2s ease, transform .1s ease;
}
#wege .card .btn:hover { background:#A05A2B; transform: translateY(-1px); }



/* EN Seite (#paths) bekommt exakt die gleichen Styles wie #wege */
#wege, #paths { margin: 40px auto; max-width: 1200px; width: 100%; box-sizing: border-box; }

#wege .cards, #paths .cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 36px !important;
  width: 100%;
  padding: 36px 0;
  box-sizing: border-box;
  justify-items: stretch;
  align-items: stretch;
}

@media (max-width: 980px) {
  #wege .cards, #paths .cards { grid-template-columns: 1fr; gap: 28px !important; padding: 28px 0; }
}

#wege .card, #paths .card {
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(139,69,19,.15);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

#wege .card::before, #paths .card::before { content: none !important; }

#wege .card h3, #paths .card h3 { margin: 0 0 12px; color:#8B4513; font-weight:700; }
#wege .card p,  #paths .card p  { margin: 8px 0; line-height:1.6; color:#333; }
#wege .card p strong, #paths .card p strong { color:#8B4513; }
#wege .card .btn, #paths .card .btn {
  align-self: flex-start;
  margin-top: auto;
  background:#8B4513; color:#fff;
  text-decoration:none; padding:10px 18px; border-radius:999px; font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transition: background-color .2s ease, transform .1s ease;
}
#wege .card .btn:hover, #paths .card .btn:hover { background:#A05A2B; transform: translateY(-1px); }
