/*
Theme Name:     Neve Child
Theme URI:      https://themeisle.com/themes/neve/
Template: neve
Author:         ThemeIsle
Author URI:     https://themeisle.com
Description:    Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    neve
Tags: blog, custom-logo, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles
*/

/* Theme styles are loaded from /assets/css via inc/setup.php. */
/* Allgemin */
.page .nv-post-cover { margin-bottom: 0px !important; }
/* Farben */
.bg { background: linear-gradient(180deg, #e8f6ee 0%, #cfe8d8 100%); }

/* Abstände */
.mb0 { margin-bottom:0px !important }
.mb5 { margin-bottom:5px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb25 { margin-bottom:25px !important }
.mb50 { margin-bottom:50px !important }

div.nv-related-posts.nv-cv-m.nv-cv-d > div.section-title h2 {
	font-size: 175% !important;
	color: var(--nv-primary-accent) !important;
}

#secondary  {
    background: #E6F3FA;
    padding: 25px;
    border-radius: 8px;
}

/* ==========================================================================
   ÄHNLICHE BEITRÄGE (Ausschließlich 3-spaltig auf Desktop)
   ========================================================================== */

/* Container für alle ähnlichen Beiträge */
.single-post .posts-wrapper {
    display: grid;
    /* Erzwingt 3 Spalten ab einer normalen Desktop-Breite und wechselt bei weniger Platz flexibel */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; /* Leicht reduzierter Abstand, damit 3 Spalten nebeneinander mehr Platz haben */
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Einzelne Beitrags-Karte */
.single-post .posts-wrapper .related-post {
    background-color: #E6F3FA; /* Gewünschte Hintergrundfarbe */
    border: 1px solid #01517D; /* Gewünschte Rahmenfarbe */
    border-radius: 12px; /* Abgerundete Ecken für die Karte */
    overflow: hidden; /* Verhindert, dass das Bild die Eckenrundung überlagert */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Inhalt der Beitrags-Karte */
.single-post .posts-wrapper .related-post .content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Bild-Bereich */
.single-post .posts-wrapper .related-post .th-wrap {
    display: block;
    width: 100%;
}

.single-post .posts-wrapper .related-post .th-wrap img {
    width: 100%;
    height: 180px; /* Leicht reduzierte Höhe für eine kompaktere und stimmige 3-Spalten-Optik */
    object-fit: cover; /* Schneidet Bilder sauber zu, ohne sie zu verzerren */
    display: block;
    border-radius: 11px 11px 0 0; /* Rundet nur die oberen Ecken des Bildes ab */
}

/* Text-Inhalte (Titel, Autor, Beschreibung) */
.single-post .posts-wrapper .related-post .title,
.single-post .posts-wrapper .related-post .nv-meta-list,
.single-post .posts-wrapper .related-post .description {
    padding-left: 15px; /* Von 20px auf 15px verringert, um den Texten mehr Breite zu geben */
    padding-right: 15px;
}

/* Spezifische Abstände für die Textelemente */
.single-post .posts-wrapper .related-post .title {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 1.05rem; /* Schriftgröße minimal verringert für die schmaleren Spalten */
    line-height: 1.35;
}

.single-post .posts-wrapper .related-post .title a {
    color: #01517D; /* Titel in passendem Blau */
    text-decoration: none;
}

.single-post .posts-wrapper .related-post .title a:hover {
    text-decoration: underline;
}

.single-post .posts-wrapper .related-post .nv-meta-list {
    margin-top: 0;
    margin-bottom: 10px;
    list-style: none;
    padding-left: 15px;
}

.single-post .posts-wrapper .related-post .description {
    margin-top: 0;
    margin-bottom: 15px; /* Abstand nach unten in der Karte */
    font-size: 0.9rem; /* Leicht verringert, damit die Karte bei 3 Spalten nicht extrem lang wird */
    line-height: 1.45;
    flex-grow: 1; /* Schiebt den Inhalt gleichmäßig nach unten */
}

/* Optionale Absicherung für sehr große Bildschirme: Verhindert, dass die Karten unnatürlich breit gestreckt werden */
@media (min-width: 992px) {
    .single-post .posts-wrapper {
        grid-template-columns: repeat(3, 1fr); /* Erzwingt exakt 3 Spalten auf Desktop-Bildschirmen */
    }
}

/* Styling für das "Neueste Beiträge" Widget */
.widget_recent_entries ul {
    list-style: none; /* Entfernt Standard-Punkte */
    padding-left: 0;
    margin: 0;
}

.widget_recent_entries ul li {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0; /* Dezente Trennlinie */
    line-height: 1.4;
}

/* Entfernt die Trennlinie beim letzten Element für einen sauberen Abschluss */
.widget_recent_entries ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget_recent_entries ul li:first-child {
    padding-top: 0;
}

/* Link-Styling */
.widget_recent_entries ul li a {
    color: #333333;
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease-in-out;
}

/* Hover-Effekt: Text verfärbt sich im Primärblau der Website */
.widget_recent_entries ul li a:hover {
    color: #01517D;
    text-decoration: underline;
}

/* Hervorhebung des aktuell geöffneten Beitrags (falls aria-current aktiv ist) */
.widget_recent_entries ul li a[aria-current="page"] {
    font-weight: bold;
    color: #01517D;
}

/* Container-Liste zurücksetzen */
.widget_recent_entries ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Einheitlicher Abstand zwischen den Boxen */
}

/* Jeder Beitrag als eigene kleine Karte */
.widget_recent_entries ul li {
    background-color: #f7fafd; /* Sehr helles Blau/Grau für ruhigen Hintergrund */
    border-left: 4px solid #01517D; /* Akzentlinie links im UMK-Blau */
    border-radius: 4px;
    padding: 10px 14px;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
}

/* Hover-Effekt für die gesamte Karte */
.widget_recent_entries ul li:hover {
    background-color: #E6F3FA; /* Wechselt auf das helle UMK-Blau */
    transform: translateX(3px); /* Leichte Verschiebung nach rechts beim Hovern */
}

/* Link-Styling innerhalb der Karten */
.widget_recent_entries ul li a {
    color: #2c3e50;
    text-decoration: none;
    display: block; /* Macht die gesamte Box anklickbar */
}

.widget_recent_entries ul li a:hover {
    color: #01517D;
}

/* Hervorhebung des aktuell besuchten Beitrags */
.widget_recent_entries ul li a[aria-current="page"] {
    font-weight: 600;
    color: #01517D;
}

.page .nv-page-title, .single .entry-title {
    max-width: 30ch !important;
}

h1.title.entry-title {
	font-size: clamp(2.18rem, 10.5vw, 3rem);
}

.single-post h2, .single-tribe_events h2 {
	color: #01517D !important;
	font-size: 30px !important;
}

/* Bildbreite und vertikale Abstände im Widget */
#block-32 .wp-block-latest-posts__featured-image {
    width: 100%;
    margin: 0 0 15px 0;
    float: none;
}

#block-32 .wp-block-latest-posts__featured-image img {
    display: block;
    width: 100%;
    max-width: none;
    height: 160px;
    object-fit: cover;
    object-position: center;
}

/* Abstand zwischen den einzelnen Beiträgen */
#block-32 .wp-block-latest-posts__list {
    gap: 15px;
}

/* Abstand oberhalb des Bildes und unterhalb des Datums */
#block-32 .wp-block-latest-posts__list > li {
    padding-top: 15px;
    padding-bottom: 15px;
}

div#block-33.widget.widget_block, div#block-33.widget.widget_block h2 {
	margin-bottom: 5px !important;
	text-transform: uppercase;
	color: #01517D !important;
    font-size: 27px !important;
}

.blog .wp-block-button__link, .single-post .wp-block-button__link {
	border: 1px solid var(--umk-blue);
    background: linear-gradient(180deg, var(--umk-blue) 0%, color-mix(in srgb, var(--umk-blue) 82%, var(--umk-blue-dark) 18%) 100%);
    color: #fff;
    border-radius: 10px;
}

/* Karten auf gleiche Höhe bringen */
.single-post .posts-wrapper {
    align-items: stretch;
}

.single-post .related-post {
    height: 100%;
}

.single-post .related-post .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--nv-secondary-accent);
    border-radius: 14px;
    background: var(--custom-3);
}

/* Bilder einheitlich darstellen */
.single-post .related-post .th-wrap {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.single-post .related-post .th-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Innenabstände für Textbereiche */
.single-post .related-post .title,
.single-post .related-post .content > div {
    margin-left: 16px;
    margin-right: 16px;
}

.single-post .related-post .title {
    margin-top: 16px;
}

/* Beschreibung füllt den verfügbaren Platz */
.single-post .related-post .description {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-bottom: 16px;
}

.single-post .related-post .description > p:first-child {
    margin-bottom: 20px;
}

/* Button immer am unteren Kartenrand */
.single-post .related-post .read-more {
    margin-top: auto;
    margin-bottom: 0;
}

.single-post .related-post .read-more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Doppelte Umrandung entfernen */
.single-post .related-post {
    overflow: hidden;
    border: 1px solid var(--nv-secondary-accent);
    border-radius: 14px;
    background: var(--custom-3);
}

.single-post .related-post .content {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Fließtext Apassung */
.single-post .related-post .description > p:not(.read-more) {
    display: -webkit-box;
    min-height: 10.5em;
    max-height: 10.5em;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;

    text-align: left;
    line-height: 1.5;
}

/* Datenschutzseite H2 */
.page-id-3 h2 {
	font-size: 29px !important;
}

.wp-block-themeisle-blocks-accordion-item__title h2 {
	color: #FFF !important;
}

.page-id-3 h3 {
	font-size: 24px !important;
	color: var(--nv-primary-accent)!important;
}

article img {
	border-radius: 0px !important;
}

.alternative-post {
  display: grid;
  grid-template-columns: 1fr 350px;
  align-items: stretch;
}

/* Bei jedem zweiten Beitrag Bild links */
.alternative-post:nth-child(even) {
  grid-template-columns: 350px 1fr;
}

/* Bildcontainer komplett strecken */
.alternative-post .nv-post-thumbnail-wrap {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* Link ebenfalls auf volle Höhe */
.alternative-post .nv-post-thumbnail-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bild füllt die gesamte Spalte */
.alternative-post .nv-post-thumbnail-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

/* Balken über article */
article.post {
  position: relative;
}

/* Standard: Bild links → Effekt links */
article.post::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: auto;

  width: 4.1rem;
  height: 0.3rem;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--umk-green) 88%, white 12%) 0%,
    color-mix(in srgb, var(--umk-green) 62%, white 38%) 100%
  );

  display: block;
  opacity: 1;
  visibility: visible;
  z-index: 5;
}

/* Bild rechts → Effekt rechts */
article.post:nth-child(even)::before {
  left: auto;
  right: 1rem;
}

/* News Seite Header */
#wp-block-themeisle-blocks-advanced-column-1fe4cc2b > div > div > p > a {
	text-decoration: underline !important;
	color: var(--nv-primary-accent)!important;
}

/* Überschriften Responsive Mobil */
@media (max-width: 768px) {
  article.post .alternative-post {
    display: block;
  }

  article.post .non-grid-content {
    width: 100%;
    max-width: 100%;
    padding: 1.4rem;
    overflow: visible;
  }

  article.post .blog-entry-title {
    font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.02em;

    white-space: normal;
    overflow: visible;
    text-overflow: unset;

    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  article.post .blog-entry-title a {
    display: block;
    max-width: 100%;
    white-space: normal;
  }
}