.icon {
    width: 80px; /* Icon-Größe */
    height: 80px; /* Icon-Größe */
    margin-bottom: 20px; /* Abstand nach unten */
}

.mc4wp-form-fields input {
    margin-top: 10px; /* Abstand zwischen Eingabefeld und Text */
}

.entry-content {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.left-column {
  width: 30%; /* Schmale linke Spalte */
}

.right-column {
  width: 65%; /* Breitere rechte Spalte */
}

h4 {
  margin-bottom: 10px;
}

p {
  margin-bottom: 15px;
}
/* suche icon resposiv vorne */
.search-icon-wrap {
    position: relative; /* Oder absolute, falls notwendig */
    z-index: 1000; /* Ein hoher Wert, um sicherzustellen, dass es über anderen Elementen liegt */
}
/* suche icon resposiv vorne */

 #responseMessage {
        font-size: 20px;  /* Definiert die Textgröße */
        color: #000000f;      /* Setzt die Textfarbe */
        padding: 10px;    /* Fügt Abstand um den Text hinzu */
        margin-top: 20px; /* Fügt Abstand nach oben hinzu */
        text-align: center;   /* Text wird zentriert */
    }

/* Bloggalerie 2x2/ */

.unique-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    grid-gap: 10px; /* Space between grid items */
    margin-top: 10px; /* Top margin for the grid */
}

.unique-gallery .gallery-item {
    display: block; /* Ensure each item is block level */
    margin: 0; /* Remove any default margin */
}

.unique-gallery .gallery-img {
    width: 100%; /* Full width of its container */
    height: auto; /* Maintain aspect ratio */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .unique-gallery {
        grid-template-columns: 1fr; /* Stack items vertically */
    }

    .unique-gallery .gallery-item {
        margin-top: 10px; /* Ensure consistent top margin in vertical layout */
    }

    .unique-gallery .gallery-item:first-child,
    .unique-gallery .gallery-item:nth-child(2) {
        margin-top: 0; /* Remove top margin for the first two items in vertical layout */
    }
}

/* Beiträge einblenden */
.post_hide {
    display: none;
}

.post-show {
    display: block;
}
/* Button homeseite mehr Beiträge Anfang*/
@font-face {
    font-family: "Ionicons"; /* Name der Schriftart */
    src: url("fonts/ionicons.woff") format("woff"), /* WOFF Format */
         url("fonts/ionicons.ttf") format("truetype"); /* TTF Format */
    font-weight: normal; /* Normaler Schriftgrad */
    font-style: normal; /* Normaler Stil */
}

.link-wrap .custom-btn {
    font-family: "Ionicons", sans-serif; 
    font-size: 14px !important; /* Höhere Priorität */
    text-decoration: none;
    color: #fff;
    background-color: #fff;
    border: 1px solid #222222;
    padding: 12px 12px;
    border-radius: 0px;
    cursor: pointer;
}

.link-wrap .custom-btn:hover {
    background-color: #222222;
    color: #fff;
    border-color: #f0f0f0;
}

/* Button homeseite mehr Beiträge Ende */

.sticky {
    position: sticky;
    top: 0; /* Passt je nach Bedarf an */
}


.corona_badge {
    display: block;
       position: absolute; /* Badge bewegt sich nicht mit dem Scrollen */
    top: 30%; /* Vertikale Position */
    left: 81%; /* Horizontale Position */
    z-index: 999;
}

.corona_badge img {
    width: 250px; /* Standardbreite für größere Bildschirme */
    max-width: 100%; /* Begrenzung der Breite auf Containergröße */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    max-height: 250px; /* Begrenzung der maximalen Höhe */
}

/* Anpassungen für kleinere Bildschirme (z. B. Tablets) */
@media only screen and (max-width: 768px) {
    .corona_badge {
        top: 20%; /* Neue vertikale Position für kleinere Bildschirme */
        left: 60%; /* Neue horizontale Position für kleinere Bildschirme */
    }

    .corona_badge img {
        width: 200px; /* Korrigierte Breite für Tablets */
        height: auto; /* Beibehaltung des Seitenverhältnisses */
    }
}

/* Anpassungen für noch kleinere Bildschirme (z. B. Smartphones) */
@media only screen and (max-width: 480px) {
    .corona_badge {
        top: 50%; /* Neue vertikale Position für noch kleinere Bildschirme */
        left: 50%; /* Neue horizontale Position für noch kleinere Bildschirme */
        transform: translate(-50%, -50%); /* Zentriert das Badge */
    }

    .corona_badge img {
        width: 150px; /* Noch kleinere Breite für Smartphones */
        height: auto; /* Beibehaltung des Seitenverhältnisses */
    }
}

/* Animation (falls benötigt) */
@keyframes badgeMove {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(10px);
    }
}


/* Instagrambox bei den Rezepten) */

.custom-box {
    display: flex;
    align-items: center;
    background-color: #000000;
    color: #ffffff;
    padding: 20px;
    margin: ;
    border-radius: 0px; /* Runde Ecken */
    gap: 20px; /* Standardabstand zwischen den Flex-Elementen */
}

.custom-box-logo {
    width: 60px; /* Größe des Logos anpassen */
    height: 60px;
    padding: 2px;
    object-fit: cover; /* Sorgt dafür, dass das Bild skaliert wird */
    border-radius: 0%; /* Macht das Logo rund */
    margin-right: 40px; /* Zusätzlicher Abstand zwischen Logo und Text */
}

.custom-box-text {
    flex: 1; /* Sorgt dafür, dass der Text den verbleibenden Platz einnimmt */
}

.custom-box-text h3b {
    
    margin: 0;
    font-size: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
}

.custom-box-text p3 {
    margin: 8px 0 0 0;
    font-size: 1em;
    color: #ffffff;
}

.custom-box-text a {
    color: #ffffff;
    text-decoration: underline;
}

.custom-box-text a:hover {
    color: #d4d4d4; /* Hover-Farbe der Links */
}

/* Responsive Design */
@media (max-width: 600px) {
    .custom-box {
        flex-direction: column; /* Box wird vertikal ausgerichtet */
        text-align: center; /* Text wird zentriert */
        gap: 10px; /* Weniger Abstand im mobilen Layout */
    }

    .custom-box-logo {
        margin-right: 0; /* Abstand rechts entfernen, da das Logo über dem Text liegt */
        margin-bottom: 10px; /* Abstand zwischen Logo und Text */
    }
}



.buttonblog {
    width: 250px; /* Breite des Bildes */
    height: auto; /* Höhe proportional zur Breite */
    cursor: pointer; /* Zeigt einen klickbaren Link an */
}


 .like-container {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Herz und Text */
  }

  .like-icon {
    cursor: pointer;
    transition: transform 0.3s, fill 0.3s, stroke 0.3s;
  }

  .like-icon:hover {
    transform: scale(1.2);
  }

  /* Standardzustand: Nur Rahmen */
  .like-icon {
    fill: none; /* Herz ist leer */
    stroke: gray; /* Rahmenfarbe */
  }

  /* Aktiver Zustand: Gefülltes Herz */
  .liked .like-icon {
    fill: red; /* Herz wird gefüllt */
    stroke: red; /* Rahmen wird rot */
  }

  .like-info {
    display: flex;
    align-items: center;
    gap: 5px; /* Abstand zwischen der Zahl und "LIKE" */
  }

  .counter {
    font-size: 18px;
    color: #333;
  }

  .like-text {
    font-size: 16px;
    color: #555;
    font-weight: bold;
  }



  /* TRENNLINIE */
 .trennliniepunkt {
     border: none;              /* Entfernt die Standard-Grenze */
            border-top: 2px dotted black; /* Gepunktete Linie oben */
            margin: 20px 0;            /* Abstand oben und unten */
        }
   /* TRENNLINIE */

 /* TEXT HINTERGRUND SCHWARZ */
  .entry-title a {
           background: #FFF;
    /* Old browsers */
   
    /*background-color: #000;*/
    color: #3a3a3a !important;
      /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to right, black 50%, white 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
        
        .entry-title a:hover {
         color: #fff !important;
	 background-position: left;
}
 /* TEXT HINTERGRUND SCHWARZ */
 /* TEXT HINTERGRUND SCHWARZ */

.result-text a {
           background: #FFF;
    /* Old browsers */
   
    /*background-color: #000;*/
    color: #3a3a3a !important;
      /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to right, black 50%, white 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
        
        .result-text a:hover {
         color: #fff !important;
	 background-position: left;
}
  /* TEXT HINTERGRUND SCHWARZ */      

.bild-hinweis {
    text-align: center;
    font-size: 13px;
    color: gray;
    margin-top: 0px;
    font-style: italic;
}

   /* VERTICAL TEXT IM INDEX */ 
 .vertical-text {
    background-color: #101020;
    width: auto; /* Breite passt sich der Textlänge an */
    height: 100px;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
  }
   /* VERTICAL TEXT IM INDEX */