/* ==========================================================================
   1. GLOBALE RESETS & CONTAINER (Für alle Bildschirmgrößen)
   ========================================================================== */

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@font-face {
    font-family: 'Besley';
  src: url('fonts/Besley-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('fonts/Besley-VariableFont_wght.woff2') format('woff2'),
       url('fonts/Besley-VariableFont_wght.woff') format('woff');
  font-weight: 100 900; /* Definiert die Spanne der variablen Strichstärke */
  font-style: normal;
  font-display: swap;   /* Verhindert unsichtbaren Text beim Laden der Seite */
}
@font-face {
  font-family: 'Jost'; /* Verwenden Sie den sauberen Namen */
  src: url('fonts/Jost-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('fonts/Jost-VariableFont_wght.woff2') format('woff2'),
       url('fonts/Jost-VariableFont_wght.woff') format('woff');
  font-weight: 100 900; /* Volle Spanne von ultradünn bis tiefschwarz */
  font-style: normal;
  font-display: swap;   /* Verhindert unsichtbaren Text beim Laden */
}


body {
  background: #fff9edff;
   font-family: 'Jost Variable', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height:1.4em;
  margin: 0;
}
.fa.fa-home {
  display: inline-block;
 
    -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 576 512'%3E%3Cpath fill='%23000000' d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1l-112.2 0c-22.1 0-40-17.9-40-40l0-128c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 128c0 22.1-17.9 40-40 40l-112.2 0c-1.1 .1-2.2 .1-3.3 .1l-16 0c-22.1 0-40-17.9-40-40l0-16.2c-.3-2.7-.5-5.4-.5-8.1l.7-160.2-32 0c-17 0-32-14.1-32-32.1c0-9 3.5-17.7 9.8-24L251.6 17.7c15.4-15.6 40.5-15.6 56 0L566 231.5c6.3 6.3 9.8 15 9.8 24z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
   vertical-align: middle;
}
/* Richtet das Icon (und eventuellen Text) perfekt mittig aus */
.global-home-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none; /* Entfernt eventuelle Unterstriche */
}

/* Gibt dem Icon-Behälter eine feste Größe, die zur Schrift passt */
.global-home-link .home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
h1 {
  font-size: 32px;
  line-height: 36px; 
}

h2 {
  font-size: 24px;
  line-height: 30px; 
}

h3 {
  font-size: 20px;
  line-height: 24px; 
}

h4 {
  font-size: 16px;
  line-height: 20px; 
}

h5 {
  font-size: 14px;
  line-height: 18px; 
}

/* --- MOBILE-GRÖSSEN (Bildschirme bis 768px) --- */
@media (max-width: 768px) {
  h1 {
    font-size: 24px;
    line-height: 30px;
  }

  h2 {
    font-size: 20px;
    line-height: 26px;
  }

  h3 {
    font-size: 16px;
    line-height: 22px;
  }

  h4 {
    font-size: 14px;
    line-height: 18px;
  }

  h5 {
    font-size: 12px;
    line-height: 16px;
  }
}
.top,.outer_nav{
background:white;
}
.top{
border-top:5px solid black;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Sorgt dafür, dass das Element über anderem Inhalt liegt */
}
.scroll_div{
padding-top:130px;
}
.outer_nav{
border-top:1px solid black;
border-bottom:1px solid black;
}
.header{
font-family: 'Besley Variable', serif;
  font-weight: 250; 
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  margin:0 auto;
  max-width: 1000px;
padding:0 10px;
  
}

.nav-container {
  position: relative;
  width: 100%;
  clear: both;

}
.global-home-link {
    float: left;
    margin-right: 30px; /* Erzeugt den sichtbaren Abstand zum Menü */
    text-decoration: none;
    line-height: 1em; /* Muss exakt der Line-Height Ihrer Menülinks entsprechen */
font-size:30px;
padding:15px 15px;
color:black;
}
#menu-menue-1 {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-menue-1 a {
  display: block;
  color: black;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

#menu-menue-1 a:hover {
    color: #0073aa;
}
.fa-home{
color:black;
}
.fa-home:hover{
color:#0073aa;
}
/* Versteckt die Checkbox komplett */
input.menu-checkbox {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.header {
  font-size: 20px;
  line-height: 40px;
  text-align: center;
}

.custom-post-thumbnail {
    max-width: 300px;
    width: 100%;
}
/* Erstellt das zweispaltige Layout */
.post-body {
    display: flex;
    gap: 20px; /* Abstand zwischen Bild und Text */
    align-items: flex-start; /* Richtet Elemente oben aus */
}

/* Bild-Container auf maximal 300px begrenzen und fixieren */
.custom-post-thumbnail {
    max-width: 300px;
    width: 100%;
    flex-shrink: 0; /* Verhindert, dass das Bild gequetscht wird */
}

/* Sorgt dafür, dass das Bild sauber skaliert */
.custom-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}
/* Entfernt den oberen Abstand des allerersten Elements im Textbereich */
.post-text > *:first-child {
    margin-top: 0;
    padding-top: 0;
}
/* --- MOBIL-ERGÄNZUNG (Bildschirme bis 768px) --- */
@media (max-width: 768px) {
    /* Ändert die Richtung auf einspaltig (Bild rückt über den Text) */
    .post-body {
        flex-direction: column;
        gap: 15px;
    }

    /* Begrenzt den Container und zentriert den Inhalt horizontal */
    .custom-post-thumbnail {
        max-width: 100%;
        max-height: 200px;     /* Erhöht auf maximal 200px */
        display: flex;
        justify-content: center; /* Zentriert das Bild horizontal */
        align-items: center;     /* Zentriert das Bild vertikal */
    }

    /* Skaliert das Bild komplett herunter und zentriert es */
    .custom-post-thumbnail img {
        width: auto;           /* Verhindert Verzerrungen der Breite */
        max-width: 100%;       /* Verhindert das Ausbrechen aus dem Bildschirm */
        height: auto;          /* Erhält das korrekte Seitenverhältnis */
        max-height: 200px;     /* Deckelt die Höhe strikt bei 200px */
        object-fit: contain;   /* Zeigt das Bild immer komplett an */
    }
}
/* --- STYLING FÜR DIE ALPHABETISCHE LISTE --- */

/* Macht das Layout auf Desktops zweispaltig */
.alphabetical-posts-archive {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
}

/* Container für einen einzelnen Buchstaben-Block */
.alpha-group {
    break-inside: avoid;
    margin-bottom: 20px;
}

/* Der Buchstabe als Zwischenüberschrift */
.alpha-letter {
    font-size: 24px;
    color: #000000;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Die Beitragsliste unter dem Buchstaben */
.posts-list-alpha {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.posts-list-alpha li {
    margin-bottom: 10px;
    font-size: 16px;
}

/* Links: Schwarz und unterstrichen */
.posts-list-alpha a {
    color: #000000;
    text-decoration: underline;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Hover: Blau und NICHT unterstrichen */
.posts-list-alpha a:hover {
    color: #0073aa;
    text-decoration: none;
}

/* Mobilgeräte: Automatisch einspaltig umbrechen */
@media (max-width: 768px) {
    .alphabetical-posts-archive {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.breadcrumbs {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px; /* Abstand zur H1-Überschrift darunter */
}

.breadcrumbs a {
    color: black;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs .separator {
    color: #999;
    margin: 0 8px; /* Abstand um das Trennzeichen herum */
}

.breadcrumbs .current-item {
    color: #333;
    font-weight: bold;
}

/* Container für einen einzelnen Beitrag */
.category-post-item {
    display: flex;               /* Aktiviert das Nebeneinander-Layout */
    align-items: flex-start;     /* Richtet Bild und Text oben exakt bündig aus */
    gap: 25px;                   /* Abstand zwischen Bild und Text */
    margin-bottom: 20px;         /* Abstand zum nächsten Beitrag */
    border-bottom: 1px solid #eee; /* Optionale Trennlinie zwischen Beiträgen */
    padding-bottom: 25px;
}

/* Bild-Styling */
.category-post-item .post-thumbnail {
    flex-shrink: 0;              /* Verhindert, dass das Bild gequetscht wird */
    width: 160px;                /* Feste Breite für das Vorschaubild */
}

.category-post-item .post-thumbnail img {
    width: 100%;                 /* Bild nutzt die vollen 200px der Box */
    height: auto;                /* Behält das richtige Seitenverhältnis */
    display: block;
    object-fit: cover;
}

/* Text-Styling */
.category-post-item .post-content {
    flex-grow: 1;                /* Text nutzt den restlichen Platz */
}

/* Überschrift oben bündig machen */
.category-post-item .post-title {
    margin-top: 0 !important;    /* Entfernt Standard-Abstände des Themes nach oben */
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.2;
}

/* Link-Farbe (Schwarz & nicht unterstrichen) */
.category-post-item .post-title a {
    color: #000000 !important;
    text-decoration: none !important;
}

.category-post-item .post-title a:hover {
    color: #0073aa !important;
}

/* Vorschautext */
.category-post-item .post-excerpt {
    margin-top: 0;
    margin-bottom: 15px;
    color: #555555;
}

/* Weiterlesen-Button */
.read-more-button {
    display: inline-block;
    background-color: #000000;
    color: #ffffff !important;
    padding: 8px 18px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.read-more-button:hover {
    background: #0073aa;
}

/* Mobil-Optimierung: Auf Handys untereinander anzeigen */
@media (max-width: 600px) {
    .category-post-item {
        flex-direction: column;  /* Stapelt Bild und Text untereinander */
    }
    .category-post-item .post-thumbnail {
                flex-shrink: 0;              /* Verhindert, dass das Bild gequetscht wird */
    width: 200px;               /* Bild wird auf Handys breiter */
      margin-left: auto;       /* Schiebt das Bild nach rechts in die Mitte */
    margin-right: auto; 
    }
  }

/* ==========================================================================
   2. MOBIL-STYLING (Standard für Smartphones & Tablets)
   ========================================================================== */

.nav-container {
  height: 60px; 
}

/* Das Hamburger-Icon */
.menu-icon {
  position: relative;
  z-index: 1001;
  display: block;
  width: 30px;
  height: 24px; /* Feste Höhe für die Animation definiert */
  margin-top: 18px;
  margin-right: 20px;
  cursor: pointer;
  float: right;
}

/* Die 3 Striche des Icons */
.menu-icon span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #333;
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease; /* Weiche Animation */
}

/* MOBIL-ANIMATION: Transformation der 3 Striche in ein "X" */
.nav-container:has(.menu-checkbox:checked) .menu-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-container:has(.menu-checkbox:checked) .menu-icon span:nth-child(2) {
  opacity: 0; /* Mittlerer Strich verschwindet */
}

.nav-container:has(.menu-checkbox:checked) .menu-icon span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobil: Hauptmenü standardmäßig ausblenden */
.nav-container #menu-menue-1 {
  display: none; 
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  border-top: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  background: white;
}

#menu-menue-1 li {
  display: block;
  border-bottom: 1px solid #eee;
}

#menu-menue-1 a {
  padding: 12px 15px;
}

/* Mobil: WordPress-Untermenü */
#menu-menue-1 .sub-menu {
  display: none; /* Standardmäßig unsichtbar */
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
}

#menu-menue-1 .sub-menu li a {
  padding-left: 30px;
  font-size: 15px;
  border-bottom: 1px solid #eee;
}

/* Klick-Menü über JavaScript aktivieren & schließen */
#menu-menue-1 li.menu-item-has-children > .sub-menu {
  display: none; /* Standardmäßig immer geschlossen */
}

#menu-menue-1 li.menu-item-has-children.is-open > .sub-menu {
  display: block !important; /* Erzwingt das Einblenden nur bei aktiver Klasse */
}
/* Kleiner Pfeil nach unten für geschlossenes Untermenü */
#menu-menue-1 li.menu-item-has-children > a::after {
  content: "\25BC"; /* Dreieck nach unten (?) */
  padding-left: 12px;
  display: inline-block;
  font-size: 10px; /* Macht das Dreieck kleiner als den Text */
  vertical-align: 1px; /* Richtet es mittig an der Schriftlinie aus */
  line-height: 1; /* Verhindert ungewollte Zeilenabstände */
}

/* Pfeil nach oben für geöffnetes Untermenü */
#menu-menue-1 li.menu-item-has-children.is-open > a::after {
  content: "\25B2" !important; /* Dreieck nach oben (?) */
}

/* Hauptmenü einblenden, wenn die Hamburger-Checkbox aktiv ist */
.nav-container:has(.menu-checkbox:checked) #menu-menue-1 {
  display: block !important;
}
footer{
background:black;
padding:10px 0;
color:white;
margin-top:20px;
}
.current_page_item{
color:#ccc;
}

/* ==========================================================================
   3. DESKTOP-STYLING (Greift automatisch ab 768px Bildschirmbreite)
   ========================================================================== */
@media (min-width: 768px) {
.global-home-link {
    float: left;
    margin-right: 30px; /* Erzeugt den sichtbaren Abstand zum Menü */
    text-decoration: none;
    line-height: 1em; /* Muss exakt der Line-Height Ihrer Menülinks entsprechen */
font-size:30px;
padding:5px 15px;
color:black;
}
  
  .header {
    font-size: 42px;
    line-height: 63px;
  }
  
  .nav-container {
    height: auto;
  }

  /* Hamburger und X-Animation auf Desktop deaktivieren */
  .menu-icon {
    display: none !important;
  }

  /* Desktop-Hauptmenü dauerhaft anzeigen */
  .nav-container ul#menu-menue-1 {
    display: block !important; 
    position: static !important;          
    box-shadow: none !important;
    border-top: none !important;
   
  }

  .nav-container ul#menu-menue-1 > li {
    display: inline-block !important;
    border-bottom: none !important;
    position: relative !important;
  }

  .nav-container ul#menu-menue-1 > li > a {
    display: inline-block !important;
    padding: 10px 15px !important;
   
  }
 .nav-container ul#menu-menue-1 > li.current-menu-item > a {
   color:#aaa;
 }
 .nav-container ul#menu-menue-1 > li.current-menu-item > a:hover {
   color:#0073aa;
 }
  /* Pfeil-Indikator auf Desktop ausblenden */
  #menu-menue-1 li.menu-item-has-children > a::after {
    content: " " !important;
  }

  /* ==========================================================================
     FLYOUT / SUB-MENU STYLING (Nur auf Desktop)
     ========================================================================== */

  /* KORREKTUR: Das hiesige standardmäßige Ausblenden kollidiert nun nicht mehr mit Mobilgeräten */
  ul#menu-menue-1 .sub-menu {
    display: none; 
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
      }

  ul#menu-menue-1 .sub-menu li {
    display: block !important;
    width: 100% !important;
    border: none !important;
    text-align: left !important;
  }

  ul#menu-menue-1 .sub-menu li a {
    display: block !important;
    padding: 6px 8px !important;
    background: white !important;
    color: black;
    border-bottom: 1px solid #000 !important;
  }

  ul#menu-menue-1 .sub-menu li:last-child a {
    border-bottom: none !important;
  }
   /* Pfeil-Indikator nach unten für Desktop-Oberpunkte mit Untermenü */
  #menu-menue-1 li.menu-item-has-children > a::after {
    content: "\25BC" !important;
    padding-left: 6px;
    display: inline-block;
    font-size: 10px; /* Macht das Dreieck etwas kleiner als den Text */
    vertical-align: 1px; /* Verschiebt das Dreieck pixelgenau auf die Schrifthöhe */
    line-height: 1; /* Verhindert, dass das Zeichen die Zeilenhöhe vergrößert */
  }
  /* Hover-Effekt für Desktop-Flyout */
  ul#menu-menue-1 li.menu-item-has-children:hover > .sub-menu {
    display: block !important;
  }
   ul#menu-menue-1 .sub-menu li a:hover {
       color: #0073aa !important;
  }
}
.blog-grid-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt den automatischen Zeilenumbruch */
    gap: 20px;       /* Flexibler Abstand zwischen den Elementen */
    width: 100%;
}

/* Das einzelne Blog-Element (ersetzt col-md-2) */
.blog-teaser-item {
    /* 100% geteilt durch 6 Spalten minus den Abstand (gap) */
    flex: 0 0 calc((100% - (5 * 20px)) / 6); 
    box-sizing: border-box;
    /* Design-Anpassungen */
 background:#fff4dc;  
    padding: 15px;               
    font-size:12px;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
       }
.blog-teaser-item a{
color:black;
}
.blog-teaser-item a:hover{
color:#0073aa;
text-decoration:none;
}
/* Optionale Anpassung für mobile Geräte (Responsive Design) */
@media (max-width: 1024px) {
    .blog-teaser-item {
        flex: 0 0 calc((100% - (2 * 20px)) / 3); /* 3 Spalten auf Tablets und Smartphone */
    }
}

.footer-category-block ul li a,.sonstige-seiten ul li a{
color:white!important;
}
.footer-posts-by-category {
    display: grid;
    /* Erzwingt genau 4 gleich große Spalten auf großen Bildschirmen */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    padding: 20px;
}

.footer-category-block {
    /* Kein flex-basiertes Styling mehr nötig, das erledigt das Grid */
    width: 100%;
}

.footer-category-block h2 {
   font-size:12px;
    margin-bottom: 2px;
 
    padding-bottom: 4px;
}

.footer-category-block ul,.sonstige-seiten ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-category-block li,.sonstige-seiten li{
    margin-bottom: 8px;
}

.footer-category-block a, .sonstige-seiten a {
    color: white;
    font-size:11px;
}

.footer-category-block a:hover, .sonstige-seiten a:hover {
    text-decoration: none;
    
}
.sonstige-seiten{
margin-left:20px;
margin-top:15px;
}
/* 📱 Responsive Anpassung für mobile Geräte */
@media (max-width: 992px) {
    .footer-posts-by-category {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablets */
    }
}

@media (max-width: 576px) {
    .footer-posts-by-category {
        grid-template-columns: 1fr; /* 1 Spalte auf Smartphones */
    }
}
#scrollToTopBtn {
  display: none; /* Wird erst via JavaScript sichtbar */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  
  /* Dunkelrote Farbe */
  background-color: #0073aa; 
  color: white;
  cursor: pointer;
  
  /* Quadratische Box & Ausrichtung */
  width: 75px;
  height: 75px;
  line-height: 50px;
  padding: 0;
  text-align: center;
  border-radius: 4px;
  
  /* Pfeil fetter machen */
  font-size: 32px;
  font-weight: 900; 
  
  transition: background-color 0.3s, transform 0.2s;
}

#scrollToTopBtn:hover {
  background-color: #1184bb; /* Etwas helleres Rot beim Drüberfahren */
  transform: scale(1.1); /* Minimaler Vergrößerungs-Effekt beim Hover */
}
.big{
font-size:48px;
line-height:60px;
}
.big_h1{
font-size:64px;
line-height:72px;
}
@media (max-width: 768px) {
.big{
font-size:24px;
line-height:30px;
}
.big_h1{
font-size:32px;
line-height:36px;
}   
}
.cookie-banner-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 20px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    font-family: sans-serif;
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cookie-banner-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
    min-width: 280px;
}

.cookie-banner-content a {
    color: #fff;
    text-decoration: underline;
}

.cookie-banner-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.2s ease;
}

.cookie-btn.accept {
    background-color: #2ecc71;
    color: #fff;
}

.cookie-btn.accept:hover {
    background-color: #27ae60;
}

.cookie-btn.reject {
    background-color: #e74c3c;
    color: #fff;
}

.cookie-btn.reject:hover {
    background-color: #c0392b;
}