/* 
Theme Name: My Hueman Pro Child Theme  
Theme URI: https://www.difool.de/ 
Description: difool.design Theme 
Author: Difool
Author URI: https://www.difool.de/
Template: hueman-pro
Version: 1.0.0

Header = #eaeaea
Footer = #00943c / #a4c8a686 / #cfe2d0
*/

/*
Categories:
category-allgemein
category-zu-wasser
category-sponsoren
category-noerdliche-wilstermarsch
category-suedliche-wilstermarsch
category-fahrradtour
category-veranstaltungshinweis

fahrradtour = radtour
veranstaltungshinweis = hintergruendiges
wilstermarsch-erfahren = hervorgehoben
*/

/* Widget difool.design */
#custom_html-5 { background: #FEFEFE; background: linear-gradient(90deg, rgba(254, 254, 254, 1) 0%, rgba(102, 102, 102, 0.1) 100%); padding: 15px 30px 20px 30px; margin-top: 15px; }
#custom_html-5.widget > h3 { font-weight: 600; }
.difooldesign span:nth-child(1) { color: #606060; padding-left: 2px; }
.difooldesign span:nth-child(2) { color: #970007; }

/* radfahren */  .postid-793 .info-content:nth-of-type(4) a:first-of-type,
/* tierfutter */ .postid-192 .info-content:nth-of-type(3) a:first-of-type { pointer-events: none; cursor: default; color: #888888; }


.sidebar.s1 .sidebar-top { background-color: #888; }
#footer-bottom #copyright { color: #444; }

/* Blendet die Social Icons im Header und der Sidebar aus */
.sidebar .social-links { display: none !important; }
/* Stellt sicher, dass sie im Footer sichtbar bleiben */
footer .social-links { display: block !important; }
footer .social-links .fa-instagram::before { color: #222; }

.instagram.menu-item { font-size: 1.1rem; }


/* --- 1. VARIABLEN & SETUP --- */
:root {
    /* Farben */
    --color-primary: #C00D0D;    /* metropol */
    --color-secondary: #CECECE;  /* grau = allgemein */
    --color-catnoerdlich: #B4AB3D;  /* sand = noerdliche-wilstermarsch */
    --color-catsuedlich: #ADB2CD;  /* mint = suedliche-wilstermarsch */
    --color-catfahrradtour: #8F6969;  /* violett = #6D6187 - #915C5CD6 fahrradtour */
    --color-catveranstaltungshinweis: #4F4F4F;  /* plakat-blau =#3B3686 veranstaltungshinweis */
    --color-catsponsoren: #00943c;
    
    --color-accent: #009B3E;     /* gruen */
    --color-dark: #1D1D1B;       /* dark */
    --color-highlight: #ECE9CE;  /* wilstermarsch-erfahren bg */
    --color-highlighthead: #B4AB3D;  /* sand = wilstermarsch-erfahren head */
    --color-highlightbody: #ece9ce;  /* sand = wilstermarsch-erfahren article body */
    --color-catnoerdlichbody: #ece9ce;  /* sand = noerdliche-wilstermarsch article body */
    --color-catsuedlichbody: #ADB2CD68;  /* mint = suedliche-wilstermarsch article body */
    --color-catsponsorenbody: #02502117; /* grey = sponsoren article body */
    --color-fahrradtour: #8F69694F;  /* violett = #6D6187 - #915C5CD6 fahrradtour body */
    --color-veranstaltungshinweis: #4F4F4F36;  /* plakat-blau =#3B3686 veranstaltungshinweis body */
    
    --color-mint: #ADB2CD;       /* mint = zu-wasser */
    --color-red: #BF0E0E;        /* rot */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray: #606060;
    --color-text-dark: #444444;
    --color-hover: #990a0a;

    /* Abstände & Übergänge */
    --transition-smooth: 0.1s ease-in-out;
    --shadow-standard: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/*** 404 & search no results***/
.oh-no img { margin: 2rem auto 1rem auto; display: block; width: 25%; }

/*** bildergalerie ***/
.rl-gallery .rl-gallery-item {
  background-color: #f0f0f0;
  box-sizing: border-box;
  padding: .1rem;
  /* Transparenter Schatten im Normalzustand */
  box-shadow: inset 0 0 0 0px #333; 
  transition: box-shadow 0.3s ease;
}
.rl-gallery .rl-gallery-item:hover { opacity: .8; box-shadow: inset 0 0 0 5px #C00D0D; }

.rl-basicmasonry-gallery {
    column-count: 4; /* Anzahl der Spalten (anpassen nach Wunsch) */
    column-gap: 10px;
    width: 100%;
}
/* Die Fixierung für die inneren Container = Safari */
.rl-basicmasonry-gallery > div {
  -webkit-column-break-inside: avoid; /* Safari/Webkit alt */
  break-inside: avoid;               /* Moderner Standard */
  display: inline-block;             /* Zwingt Safari zur korrekten Block-Berechnung */
  width: 100%;                       /* Verhindert Layout-Verschiebungen */
}

@media (max-width: 800px) {
    .rl-basicmasonry-gallery { column-count: 2; } /* Für Tablets */
}
@media (max-width: 500px) {
    .rl-basicmasonry-gallery { column-count: 1; } /* Für Smartphones */
}


/* --- 2. BASIS & HEADER --- */
header .container { padding: 0; }

/* Header-Banner überall ausblenden */
#headerbild { display: none; }
/* Header-Banner nur auf der Startseite einblenden */
.home #headerbild,
.front-page #headerbild { display: block; }
#page { padding-bottom: 60px; margin-top: 50px; }
.home #page, .front-page #page { padding-bottom: 60px; margin-top: -60px; }

#header .hu-pad { padding: 0 0 30px 0;  }

.site-title { padding: 45px 0 10px 0; }
.site-title a img { width: 260px; top: -20px; position: relative; }
.new-site-image { box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.12) 0px 15px 12px; }
.main-inner { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 48px, rgba(0, 0, 0, 0.10) 0px 15px 12px; }


.metropolregion-hh { 
    background-color: var(--color-primary); 
    width: 100%; 
    height: auto; 
    color: var(--color-white); 
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 30px 100%); 
    box-sizing: border-box !important; 
    padding: 5px 20px 5px 50px; 
    font-weight: bold; 
    display: inline-block; 
}

.ham__navbar-toggler-two .line, 
.ham__navbar-toggler-two.active .line, 
.ham__navbar-toggler-two.focusing .line, 
.ham__navbar-toggler-two.hovering .line { background: var(--color-black);  }

/*** breadcrumbs ***/
.custom-breadcrumbs { font-family: inherit; color: #444 !important; }
.custom-breadcrumbs a { color: #ce2d30; text-decoration: none; }
.custom-breadcrumbs a:hover { text-decoration: underline; }


/* --- 3. NEWTICKER --- */

/* lauftext dity 880 */
.ditty .ditty-layout--188 .ditty-item-heading { display: none !important; }
.ditty-item__content { display: flex; /*width: 1080px;*/ color: #111; }
.home .ditty-item__content span, .home .ditty-item__content p { color: #fff; }
.ditty-item__content__before { padding-right: .6rem; font-size: inherit; font-weight: 400; display: inline-block; /*width: 40px;*/ }
.ditty-item__content p a { color: inherit; text-decoration: underline !important; }


.newsticker { overflow: hidden; display: flex; width: 100%; /*z-index: 9999;*/ left: -15px; width: 99.7%; }
.ditty-ticker { display: inline-block; white-space: nowrap; will-change: transform;}

.newsticker { /*width: 97.1%;*/ height: 58px; top: 130px; position: relative; padding: .1rem 1rem; /*background: linear-gradient(0deg, rgba(254, 254, 254, 1) 0%, rgb(153, 153, 153) 100%);*/ }
.home .newsticker, .front-page .newsticker { width: 99.9%; height: 58px; top: 117px; position: relative; background: transparent; padding: .1rem 1rem; }

.single .newsticker .ditty.ditty-ticker { /*display: none;*/ }

.ditty-item__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-white); /*max-width: 330px;*/ transition: color var(--transition-smooth); }

.ditty-item__title__link, 
.ditty-item__title:hover, 
.ditty-item__title__before { color: var(--color-gray); }
.home .ditty-item__title__link, .front-page .ditty-item__title__link, 
.home .ditty-item__title:hover, .front-page .ditty-item__title:hover,
.home .ditty-item__title__before, .front-page .ditty-item__title__before { color: var(--color-white); }

.ditty-item__title__link:hover, 
.ditty-item__title:hover, ditty-item__title__before:hover { color: var(--color-hover); }

.ditty-item__lag-after, .ditty-item__title__after { padding-left: 1rem; }
.ditty-item__title__before { padding-right: .6rem; font-size: 1.1rem; font-weight: 200; display: inline-block; }

.ditty-ticker .ditty-playPause { position: absolute; right: 0px; /*top: 62px;*/ background: hsla(0, 5.9%, 3.3%, 0.09); }
.home .ditty-ticker .ditty-playPause, .front-page .ditty-ticker .ditty-playPause { right: 10px; /*top: 52px;*/ }
.ditty-ticker .ditty-playPause svg { fill: #fff; }
.home .ditty-ticker .ditty-playPause svg, .front-page .ditty-ticker .ditty-playPause svg { fill: #fff; }

/* --- 4. ARTIKEL LAYOUTS (Stationenmarke / Badges) --- */
article, article .post-inner, .grid-item { position: relative !important; }
article .image-container { margin-bottom: 1.5rem; }

/* grauer kasten mit details */
/* Container sorgt dafür, dass die Icons sauber nebeneinander stehen */
.icon-symbole {
    display: flex;
    justify-content: flex-end; /* Schiebt alle Icons an den rechten Rand */
    flex-wrap: wrap;           /* Erlaubt Zeilenumbruch auf schmalen Bildschirmen */
    gap: 12px;                 /* Abstand zwischen den Icons */
    margin-bottom: 15px;       /* Abstand nach unten zur grauen Info-Box */
    max-width: 100%;          /* Optional: Falls die Icons bündig mit der Info-Box abschließen sollen */
}

/* Basis-Einstellungen für alle Icons */
.icon {
    display: inline-block;
    width: 44px;               /* Hier die echte Breite EINES Icons eintragen */
    height: 44px;              /* Hier die echte Höhe EINES Icons eintragen */
    background-image: url('icons/icon-symbole.webp'); /* Pfad zu deiner Bilddatei */
    background-repeat: no-repeat;
    background-size: auto 100%; /* Passt die Höhe an, Breite skaliert proportional */
}

/* Exakte Positionen für deine 6 Icons im horizontalen Streifen (Sprite) */
.icon-familie  { background-position: 0px 0; }
.icon-getraenk { background-position: -48px 0; }  /* Verschiebung um 1 Icon-Breite nach links */
.icon-grill    { background-position: -94px 0; }  /* Verschiebung um 2 Icon-Breiten nach links */
.icon-kaffee   { background-position: -142px 0; }  /* Verschiebung um 3 Icon-Breiten nach links */
.icon-kuchen   { background-position: -189px 0; } /* Verschiebung um 4 Icon-Breiten nach links */
.icon-toilette { background-position: -235px 0; } /* Verschiebung um 5 Icon-Breiten nach links */

.info-box { background-color: #f2f2f2; border: 1px solid #e2e2e2; border-radius: 6px; padding: 20px; max-width: 100%; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.5; }
.info-container { display: grid; grid-template-columns: auto 1fr; gap: 10px 15px; margin: 0; }
.info-label { font-weight: bold; white-space: nowrap; }
.info-content { margin: 0; color: #444; }


/* Badge auf der Startseite (Excerpt) */
.station-box {
    position: absolute !important;
    top: 0; left: 0; z-index: 999 !important;
    pointer-events: none;
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 32px; height: 32px;
    display: flex !important;
    align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px;
    border-radius: 4px;
    box-shadow: var(--shadow-standard);
}

/* Badge auf der Detailseite (H1) */
.post-title.entry-title { display: flex; align-items: flex-start; gap: 15px; }
/* Zeilenabstand der Beitragsüberschrift optimieren */
.single .post-title { font-size: 2.62em; letter-spacing: -1px; line-height: 1.1; padding-bottom: 1.1rem; }


.station-box-single {
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: bold; font-size: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0 0, 0.2);
    flex-shrink: 0;
    margin-top: 4px;
}

/* --- 5. GRID & CATEGORY STYLING --- */

/* ALLGEMEIN (Category: allgemein / zu wasser) */
#grid-wrapper .grid-item .post-inner .post-meta,
#grid-wrapper .grid-item .post-inner .post-title { padding: 0 1rem; }
#grid-wrapper .grid-item .post-inner .entry.excerpt { padding: 0 1rem 1rem 1rem; }
#grid-wrapper .grid-item .post-inner:first-child .entry.excerpt {  }

.post-title { hyphens: auto; }

/* Category: allgemein */
#grid-wrapper .grid-item:is(.category-allgemein) h2.post-title.entry-title { background: var(--color-secondary); padding: 0 1rem .5rem 1rem; margin: 0; line-height: 1.2em; }
#grid-wrapper .grid-item:is(.category-allgemein) h2.post-title.entry-title a { color: var(--color-white); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-allgemein:not(.category-wilstermarsch-erfahren) .post-inner { background: var(--color-secondary); }
#grid-wrapper .grid-item.category-allgemein:not(.category-wilstermarsch-erfahren) .entry.excerpt p { color: var(--color-white); }

/* Category: noerdliche-wilstermarsch */
#grid-wrapper .grid-item:is(.category-noerdliche-wilstermarsch) h2.post-title.entry-title { background: var(--color-catnoerdlich); padding: 0 1rem .5rem 1rem; margin: 0; line-height: 1.2em; }
#grid-wrapper .grid-item:is(.category-noerdliche-wilstermarsch) h2.post-title.entry-title a { color: var(--color-white); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-noerdliche-wilstermarsch:not(.category-wilstermarsch-erfahren) .post-inner { background: var(--color-catnoerdlich); }
#grid-wrapper .grid-item.category-noerdliche-wilstermarsch:not(.category-wilstermarsch-erfahren) .entry.excerpt p { color: var(--color-white); }

/* Category: suedliche-wilstermarsch */
#grid-wrapper .grid-item:is(.category-suedliche-wilstermarsch) h2.post-title.entry-title { background: var(--color-catsuedlich); padding: 0 1rem .5rem 1rem; margin: 0; line-height: 1.2em; }
#grid-wrapper .grid-item:is(.category-suedliche-wilstermarsch) h2.post-title.entry-title a { color: var(--color-white); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-suedliche-wilstermarsch:not(.category-wilstermarsch-erfahren) .post-inner { background: var(--color-catsuedlich); }
#grid-wrapper .grid-item.category-suedliche-wilstermarsch:not(.category-wilstermarsch-erfahren) .entry.excerpt p { color: var(--color-white); }

/* Category: zu wasser */
#grid-wrapper .grid-item:is(.category-zu-wasser) h2.post-title.entry-title { background: var(--color-mint); margin: 0rem 0 .3rem 0; }
#grid-wrapper .grid-item:is(.category-zu-wasser) h2.post-title.entry-title a { color: var(--color-white); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-zu-wasser:not(.category-wilstermarsch-erfahren) .post-inner { background: var(--color-mint); }
#grid-wrapper .grid-item.category-zu-wasser:not(.category-wilstermarsch-erfahren) .entry.excerpt p { color: var(--color-white); }

/* Category: wilstermarsch-erfahren */
#grid-wrapper .grid-item.category-wilstermarsch-erfahren .post-inner { background: var(--color-highlight); }
#grid-wrapper .grid-item:is(.category-wilstermarsch-erfahren) h2.post-title.entry-title { background: var(--color-highlighthead); padding: .8rem 1rem; margin: 0 0 .8rem 0; line-height: 1.3; }
#grid-wrapper .grid-item:is(.category-wilstermarsch-erfahren) h2.post-title.entry-title a { color: var(--color-white); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-wilstermarsch-erfahren .entry.excerpt p { color: var(--color-text-dark); }

/* category-fahrradtour */
#grid-wrapper .grid-item.category-fahrradtour .post-inner { background: var(--color-catfahrradtour); }
#grid-wrapper .grid-item:is(.category-fahrradtour) h2.post-title.entry-title { background: var(--color-catfahrradtour); /*padding: .8rem 1rem; margin: 0 0 .8rem 0;*/ line-height: 1.3; }
#grid-wrapper .grid-item:is(.category-fahrradtour) h2.post-title.entry-title a { color: var(--color-white); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-fahrradtour .entry.excerpt p { color: var(--color-white); }

/* category-veranstaltungshinweis schleuse #3B3686 */
#grid-wrapper .grid-item.category-veranstaltungshinweis .post-inner { background: var(--color-catveranstaltungshinweis); }
#grid-wrapper .grid-item:is(.category-veranstaltungshinweis) h2.post-title.entry-title { background: var(--color-catveranstaltungshinweis); /*padding: .8rem 1rem; margin: 0 0 .8rem 0;*/ line-height: 1.3; }
#grid-wrapper .grid-item:is(.category-veranstaltungshinweis) h2.post-title.entry-title a { color: var(--color-white); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-veranstaltungshinweis .entry.excerpt p { color: var(--color-white); }

/* category-sponsoren */
#grid-wrapper .grid-item.category-sponsoren .post-inner { background: transparent; }
#grid-wrapper .grid-item:is(.category-sponsoren) h2.post-title.entry-title { background: #fff; padding: .8rem 1rem; margin: 0 0 .8rem 0; line-height: 1.3; }
#grid-wrapper .grid-item:is(.category-sponsoren) h2.post-title.entry-title a { color: var(--color-black); font-weight: 600; text-transform: uppercase; }
#grid-wrapper .grid-item.category-sponsoren .entry.excerpt p { color: var(--color-white); }


.home #grid-wrapper .grid-item .post-meta .post-date,
.home #grid-wrapper .grid-item.category-wilstermarsch-erfahren .post-meta .post-date,
.home #grid-wrapper .grid-item .post-meta .post-category,
.home #grid-wrapper .grid-item .post-meta .post-category a { color: var(--color-white); }

.home #grid-wrapper .grid-item .post-meta .post-category a:hover { color: var(--color-red); }


/*** single page-title group bg ***/
.single .page-title li.category rel[category-fahrradtour] { background: var(--color-catfahrradtour); }

/* Färbt .page-title ein, wenn der enthaltene Link "category/fahrradtour" in der URL hat */

.single .page-title:has(a[href*="category/noerdliche-wilstermarsch"]) { background-color: var(--color-catnoerdlich); padding-bottom: 18px; }
.single .page-title:has(a[href*="category/noerdliche-wilstermarsch"]) a { color: var(--text-color-noerdliche-wilstermarsch, #ffffff); }
.single .page-title:has(a[href*="category/noerdliche-wilstermarsch"]) a:hover { color: #ffffff; }

.single .page-title:has(a[href*="category/suedliche-wilstermarsch"]) { background-color: var(--color-catsuedlich); padding-bottom: 18px; }
.single .page-title:has(a[href*="category/suedliche-wilstermarsch"]) a { color: var(--text-color-suedliche-wilstermarsch, #ffffff); }
.single .page-title:has(a[href*="category/suedliche-wilstermarsch"]) a:hover { color: #ffffff; }

.single .page-title:has(a[href*="category/wilstermarsch-erfahren"]) { background-color: var(--color-catwilstermarsch-erfahren); padding-bottom: 18px; }
.single .page-title:has(a[href*="category/wilstermarsch-erfahren"]) a { color: var(--text-color-wilstermarsch-erfahren, #ffffff); }
.single .page-title:has(a[href*="category/wilstermarsch-erfahren"]) a:hover { color: #ffffff; }

.single .page-title:has(a[href*="category/fahrradtour"]) { background-color: var(--color-catfahrradtour); padding-bottom: 18px; }
.single .page-title:has(a[href*="category/fahrradtour"]) a { color: var(--text-color-catfahrradtour, #ffffff); }
.single .page-title:has(a[href*="category/fahrradtour"]) a:hover { color: #ffffff; }

.single .page-title:has(a[href*="category/veranstaltungshinweis"]) { background-color: var(--color-catveranstaltungshinweis); padding-bottom: 18px; }
.single .page-title:has(a[href*="category/veranstaltungshinweis"]) a { color: var(--text-color-veranstaltungshinweis, #ffffff); }
.single .page-title:has(a[href*="category/veranstaltungshinweis"]) a:hover { color: #ffffff; }

.single .page-title:has(a[href*="category/sponsoren"]) { background-color: var(--color-catsponsoren); padding-bottom: 18px; }
.single .page-title:has(a[href*="category/sponsoren"]) a { color: var(--text-color-sponsoren, #ffffff); }
.single .page-title:has(a[href*="category/sponsoren"]) a:hover { color: #ffffff; }


/* related posts */
#pro-related-posts-wrapper ul.pro-rel-posts-wrap li .post { height: 190px; }
#pro-related-posts-wrapper article .related-inner h4 a { color: #fff; }

#pro-related-posts-wrapper article .related-inner { padding: 0 20px 0 10px; hyphens: auto; }
#pro-related-posts-wrapper article.category-noerdliche-wilstermarsch { background: var(--color-catnoerdlich); }
#pro-related-posts-wrapper article.category-suedliche-wilstermarsch { background: var(--color-catsuedlich); }

#pro-related-posts-wrapper article.category-fahrradtour { background: var(--color-catfahrradtour); }
#pro-related-posts-wrapper article.category-veranstaltungshinweis { background: var(--color-catveranstaltungshinweis); }

#pro-related-posts-wrapper article.category-wilstermarsch-erfahren { background: var(--color-highlighthead); }
#pro-related-posts-wrapper article.category-wilstermarsch-erfahren .related-inner h4 a { color: #fff; top: 1rem; position: relative; }
.single .pro-rel-posts-wrap .post-title { line-height: 1.2em; }

#pro-related-posts-wrapper article.category-sponsoren { background: #eee; }
#pro-related-posts-wrapper article.category-sponsoren .related-inner h4 a { color: #111; }


/* --- 6. SPEZIAL-GRID (Home & Search) --- */

/* Home: Asymmetrisches Grid */
.home .post-row.first-row-special { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0px; margin-bottom: 20px; grid-auto-rows: max-content; }

.home .post-row.first-row-special > * { min-height: 0; }

.home .first-row-special .grid-item-wrapper .grid-item, 
.home .first-row-special .grid-item-wrapper .page, 
.home .first-row-special .grid-item-wrapper .post { width: 100% !important; max-width: 100% !important; float: none !important; }

.home .post-row.first-row-special .item-0 { grid-row: span 2 !important; }
.home .post-row.first-row-special .item-0 article { /*height: 96.3%;*/ }
.home .post-row.first-row-special .item-0 .post-thumbnail { display: none !important; }
.home .post-row.first-row-special .item-0 .post-hover,
.home .post-row.first-row-special .item-0 .post-content { display: flex !important; flex-direction: column !important; height: 100% !important; }

.home .post-row.first-row-special .item-1,
.home .post-row.first-row-special .item-2 { grid-column: 2 !important; }

/* Bildhöhen & Textboxen für Home */
.home .post-row .grid-item-wrapper:not(.item-0) .post-thumbnail { height: 320px !important; overflow: hidden !important; }
.home .post-row .grid-item-wrapper:not(.item-0) .post-thumbnail img { height: 100% !important; width: 100% !important; object-fit: cover !important; }
.home .post-row .grid-item-wrapper:not(.item-0) .post-content { height: 160px !important; overflow: hidden !important; padding: 15px !important; box-sizing: border-box !important; }

/* 100 Jahre Schleuse Kasenort #post-581 */
.home .post-row .grid-item-wrapper:not(.item-0) #post-581 .post-thumbnail { /*margin-bottom: 0;*/ }
/* sponsoren #post-174 */
.home .post-row .grid-item-wrapper:not(.item-0) #post-174 .post-thumbnail img { object-fit: contain !important; }


/* Search Results Grid */
.search-results .post-row.first-row-special {  }
.search-results .post-row.first-row-special .item-0 {  }
.search-results .post-row.first-row-special .item-1,
.search-results .post-row.first-row-special .item-2 {  }

/* Archive Results Grid */

/* Single Pages Specials global */
article.post-174 .image-container { display: none; }

/* SINGLE ARTICLE in its Categorie Style */
.single article.category-allgemein {  }

/* Ändert den Hintergrund der kompletten Seite für die Kategorie 'Allgemein' */
/* Prüft NUR den ersten direkten Hauptartikel auf der Seite, um den article body einzufärben */
/* Färbt den Body NUR, wenn der HAUPT-Artikel diese Klasse hat */
/*
body.single:has(article.post.category-allgemein:not(#pro-related-posts article)) { background: var(--color-secondary); }
body.single:has(article.post.category-wilstermarsch-erfahren:not(#pro-related-posts article)) { background: var(--color-highlightbody); }
body.single:has(article.post.category-zu-wasser:not(#pro-related-posts article)) { background: var(--color-mint); }

body.single:has(article.post.category-noerdliche-wilstermarsch:not(#pro-related-posts article)) { background: var(--color-catnoerdlichbody); }
body.single:has(article.post.category-suedliche-wilstermarsch:not(#pro-related-posts article)) { background: var(--color-catsuedlichbody); }
body.single:has(article.post.category-fahrradtour:not(#pro-related-posts article)) { background: var(--color-fahrradtour); }
body.single:has(article.post.category-veranstaltungshinweis:not(#pro-related-posts article)) { background: var(--color-veranstaltungshinweis); }
body.single:has(article.post.category-sponsoren:not(#pro-related-posts article)) { background: var(--color-catsponsorenbody); }
*/

/* Sidebar Artikel list */
/* Findet das Element .post-item-inner, WENN es den aktiven Link (aria-current) enthält */
/* Findet das li, welches den aktiven Link enthält */
/* ========================================================
   WIDGET HIGHLIGHTING (BADGE-EFFEKT) FÜR NEUESTE BEITRÄGE
=========================================================== */

/* --- 1. HINTERGRÜNDE FÜR DAS LI-ELEMENT (Je nach Kategorie) --- */

/* Nördliche Wilstermarsch (Sand) */
body.single:has(main article.post.category-noerdliche-wilstermarsch:not(#pro-related-posts article)) 
#recent-posts-2 ul li:has(a[aria-current="page"]) { 
    background: var(--color-catnoerdlich) !important;
    padding-left: 0.4rem !important;
}

/* Südliche Wilstermarsch (Mint) */
body.single:has(main article.post.category-suedliche-wilstermarsch:not(#pro-related-posts article)) 
#recent-posts-2 ul li:has(a[aria-current="page"]) { 
    background: var(--color-catsuedlich) !important;
    padding-left: 0.4rem !important;
}

/* fahrradtour */
body.single:has(main article.post.category-fahrradtour:not(#pro-related-posts article)) 
#recent-posts-2 ul li:has(a[aria-current="page"]) { 
    background: var(--color-catfahrradtour) !important;
    padding-left: 0.4rem !important;
}

/* Hintergründiges */
body.single:has(main article.post.category-veranstaltungshinweis:not(#pro-related-posts article)) 
#recent-posts-2 ul li:has(a[aria-current="page"]) { 
    background: var(--color-catveranstaltungshinweis) !important;
    padding-left: 0.4rem !important;
}

/* NEU: Sponsoren (Helles, transparentes Grün) */
body.single:has(main article.post.category-sponsoren:not(#pro-related-posts article)) 
#recent-posts-2 ul li:has(a[aria-current="page"]) { 
    background: var(--color-catsponsorenbody) !important;
    padding-left: 0.4rem !important;
}

/* NEU: wilstermarsch-erfahren (--color-highlightbody) */
body.single:has(main article.post.category-wilstermarsch-erfahren:not(#pro-related-posts article)) 
#recent-posts-2 ul li:has(a[aria-current="page"]) { 
    background: var(--color-highlight) !important;
    padding-left: 0.4rem !important;
}



/* --- 2. TEXT & ICON FÜR DUNKLE/KRÄFTIGE HINTERGRÜNDE WEISS FÄRBEN --- */

/* Schließt die Sponsoren-Kategorie aus, damit der Text auf dem hellen Hintergrund lesbar bleibt */
body.single:not(:has(main article.post.category-sponsoren:not(#pro-related-posts article))) #recent-posts-2 ul li a[aria-current="page"]::before,
body.single:not(:has(main article.post.category-sponsoren:not(#pro-related-posts article))) #recent-posts-2 ul li:has(a[aria-current="page"])::before {
    color: #ffffff !important;
}

body.single:not(:has(main article.post.category-sponsoren:not(#pro-related-posts article))) #recent-posts-2 ul li a[aria-current="page"] {
    color: #ffffff !important;
}


/* --- 3. ALLGEMEINE STRUKTUR (Für alle aktiven Zustände) --- */

#recent-posts-2 ul li a[aria-current="page"] {
    display: inline-block; /* Verhindert unschöne Textumbrüche im Padding */
    width: 100%;           /* Macht den gesamten farbigen Block anklickbar */
}




/* ========================================================
   HUEMAN-WIDGET HIGHLIGHTING (FINETUNING BADGE-EFFEKT)
=========================================================== */

/* --- 1. HINTERGRÜNDE FÜR DAS INNER-ELEMENT (Je nach Kategorie) --- */

body.single:has(main article.post.category-noerdliche-wilstermarsch:not(#pro-related-posts article)) 
#alxposts-2 .post-item-inner.is-current-teaser { 
    background: var(--color-catnoerdlich) !important;
    padding-left: 0.4rem !important;
}

body.single:has(main article.post.category-suedliche-wilstermarsch:not(#pro-related-posts article)) 
#alxposts-2 .post-item-inner.is-current-teaser { 
    background: var(--color-catsuedlich) !important;
    padding-left: 0.4rem !important;
}

body.single:has(main article.post.category-fahrradtour:not(#pro-related-posts article)) 
#alxposts-2 .post-item-inner.is-current-teaser { 
    background: var(--color-catfahrradtour) !important;
    padding-left: 0.4rem !important;
}

body.single:has(main article.post.category-veranstaltungshinweis:not(#pro-related-posts article)) 
#alxposts-2 .post-item-inner.is-current-teaser { 
    background: var(--color-catveranstaltungshinweis) !important;
    padding-left: 0.4rem !important;
}

body.single:has(main article.post.category-sponsoren:not(#pro-related-posts article)) 
#alxposts-2 .post-item-inner.is-current-teaser { 
    background: var(--color-catsponsorenbody) !important;
    padding-left: 0.4rem !important;
}

body.single:has(main article.post.category-wilstermarsch-erfahren:not(#pro-related-posts article)) 
#alxposts-2 .post-item-inner.is-current-teaser { 
    background: var(--color-highlighthead) !important;
    padding-left: 0.4rem !important;
}


/* --- 2. TEXT & ICON FÜR DUNKLE HINTERGRÜNDE WEISS FÄRBEN --- */

/* Macht Titel-Links, Kategorie-Links und Icons im aktiven Element weiß (Sponsoren ausgenommen) */
body.single:not(:has(main article.post.category-sponsoren:not(#pro-related-posts article))) 
#alxposts-2 .post-item-inner.is-current-teaser a,
body.single:not(:has(main article.post.category-sponsoren:not(#pro-related-posts article))) 
#alxposts-2 .post-item-inner.is-current-teaser p,
body.single:not(:has(main article.post.category-sponsoren:not(#pro-related-posts article))) 
#alxposts-2 .post-item-inner.is-current-teaser ::before {
    color: #ffffff !important;
}


/* --- 3. ALLGEMEINE STRUKTUR-ANPASSUNG FÜR DEN AKTIVEN TEASER --- */

/* Sorgt für saubere Abstände und verhindert, dass padding das Layout verzerrt */
#alxposts-2 .post-item-inner.is-current-teaser {
    display: block;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    padding-right: 0.4rem !important;
    border-radius: 0px; /* Optional: Rundet die Ecken des farbigen Blocks leicht ab */
}

/* Verhindert unschöne Abstände der Absätze innerhalb des farbigen Blocks */
#alxposts-2 .post-item-inner.is-current-teaser p {
    margin-bottom: 2px !important;
}






/* seiten */
ul.stationsliste-container { display: flex; flex-wrap: wrap; }
ul.stationsliste-container li { list-style: none; padding: .6rem; }

.station-list-box {
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 23px; height: 23px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: bold; font-size: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0 0, 0.2);
    flex-shrink: 0;
    margin-top: 4px; margin-right: 6px;
}

/*** seiten content ***/
/* ueber uns */
.page-id-359 .entry img.alignright { padding-right: 2%; }
.page-id-359 .wp-image-614 { padding: 2% 0; }



/* schleuse */

.schleuse-programm ul li strong { margin: 2rem 0 0 0; display: block; }
.schleuse-programm strong { color: #00943c; background: #f0f0f0; padding-left: .5rem; }
/* Entfernt die Bullet-Points nur auf der ersten Ebene */
.schleuse-programm > ul > li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

/* Setzt die fettgedruckten Hauptüberschriften optisch ab */
.schleuse-programm > ul > li > strong {
    display: inline-block;
    font-size: 1.15em;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #444;
		background: none;
		text-decoration: underline;
}

/* Definiert den Abstand nach oben – erst ab dem 2. Haupteintrag */
.schleuse-programm > ul > li:nth-child(n+2) { margin-top: 20px;  }

/* Behält die normalen Bullet-Points für die Unterpunkte bei */
.schleuse-programm ul ul li { list-style-type: none; }




/* --- 7. RESPONSIVE (Media Queries) --- */

/* DESKTOP (> 1025px) */
@media screen and (min-width: 1025px) {
    #headerbild { padding-top: 3.75rem !important; }
    article.post-1 .wp-image-735 { /*margin: 18px 0 10px 0; height: 255px;*/ }
    article.post-1 em { font-size: .9rem; line-height: 4em; }
    article.post-1 .wp-image-96 { margin: 18px 0 0px 20px; }
    .engagierte-headline { margin-top: 1.6rem; }
    .engagierter-text { margin-top: .8rem; }
    /* Greift in Safari ab Version 14+ */
@supports (background: -webkit-named-image(i)) {
    .engagierter-text { margin-top: 1rem; }
}
 		.engagierte-karte {  }
    .engagierte-karte img.aligncenter { margin: 13px auto 0 auto; /*height: 230px;*/  min-height: 0; width: 100%; height: 100%; object-fit: cover; } /* 483 x 290 */
    
    .sharrre-container { left: 0px; }
    #pro-related-posts-wrapper .flickity-viewport { left: 4.5px; }
    #pro-related-posts-wrapper .flickity-viewport li.post-hover.carousel-cell.item:hover { opacity: 0.65; }
    
    /*** fahrradtour ***/
		.page-id-2 #gallery-1 .gallery-item { margin: 0 .07rem; }
    
}

/* TABLET & MOBILE (Alle kleineren Screens zusammengefasst) */
@media screen and (max-width: 1024px) {
    .site-title, 
    .site-title a img, 
    .newsticker { padding: 7px 0 0 0; }
    .site-template-title a img { max-height: 45px; }
    .newsticker { top: 44px; }
    .site-title a img { width: 150px; display: inline-block; padding-top: 25px !important; }
    .page-id-359 .entry img.alignright { padding: 0 10% 0 10%; } /* ueber uns */
    .engagierte-karte img.aligncenter { margin: 13px auto 0 auto; height: 230px;  min-height: 0; } /* 483 x 290 */

    /* iPhone Landscape / iPad Portrait etc. */
    @media (orientation: portrait) {
        .newsticker { top: 44px; }
    }
    @media (orientation: landscape) {
    #header { padding-bottom: 0px; }
    .newsticker { top: 55px !important; background: none; }
    }
}

@media only screen and (min-width: 480px) and (max-width: 1200px) {
.site-title a img { width: 150px; display: inline-block; padding: 25px 0 0 10px !important; }
.newsticker { top: 105px; }
.home .newsticker, .front-page .newsticker { top: 54px; }
.ditty-ticker .ditty-playPause { top: 60px; }
.home #header, .front-page #header { margin-bottom: -89px; }
#page { padding-bottom: 60px; margin-top: 30px; }
.home #page, .front-page #page { padding-bottom: 60px; margin-top: 30px; }
}
@media only screen and (min-width: 480px) and (max-width: 1200px) and (orientation: landscape) {
.home .newsticker, .front-page .newsticker { top: 117px; }
}

/* SMARTPHONE (max-width: 767px) */
@media screen and (max-width: 767px) {
    .header-ads-mobile #header-widgets { text-align: right; }
    .metropolregion-hh { width: auto; }
    .newsticker { top: 45px; background: none; }
    .site-title { padding: 7px 0 0 0; }
    .site-title a img { max-height: 45px; }

    /* Grid auflösen */
    .home .post-row.first-row-special, .post-row.first-row-special { display: block !important; margin-bottom: 0px; }
    .first-row-special .item-0:has(.category-wilstermarsch-erfahren),
    .first-row-special .item-1,
    .first-row-special .item-2 { width: 100% !important; max-width: 100% !important; margin-bottom: 20px !important; }

    /* Badge Stack auf Mobile */
    .post-title.entry-title { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Content Height Reset */
    .first-row-special .item-0 .post-hover,
    .first-row-special .item-0 .post-content,
    .home .post-row .grid-item-wrapper:not(.item-0) .post-thumbnail { height: auto !important; min-height: 0 !important; display: block !important; }
    .post-row .grid-item-wrapper:not(.item-0):not(:has(.category-wilstermarsch-erfahren)) .post-thumbnail { height: 200px !important; }
    
    #pro-related-posts-wrapper ul.pro-rel-posts-wrap li .post { height: 160px; }
}

@media only screen and (max-width: 719px) {
  .home #header, .front-page #header {  }
  #header .mobile-title-logo-in-header .site-title a img { width: 170px; padding-top: 60px !important; }
  #header #nav-mobile #menu-main-menu { background: var(--color-accent); }
  #header .nav-container .nav li a { color: #222; }
  .home .newsticker, .front-page .newsticker { top: 302px; }
  #page { background: #fff; padding-bottom: 60px; margin-top: 30px; }
  .home #page, .front-page #page { padding-bottom: 60px; margin-top: 30px; }
	.ditty-ticker .ditty-playPause { top: 53px; }
	.oh-no img { margin: 2rem auto 1rem auto; display: block; width: 55%; }

  }
  
  /* Erreicht Smartphones gezielt im Hochformat (Portrait) um die einzelnen Texte nicht zu umbrechen */
@media screen and (max-width: 480px) and (orientation: portrait) {
  
  /* Erzwingt die Einzeiligkeit für die Ditty-Ticker-Elemente */
  .ditty-ticker__item,
  .ditty-item, 
  .ditty-item__title,
  .ditty-item__content {
    white-space: nowrap !important; /* Verhindert das Umbrechen rigoros */
    word-break: keep-all !important; /* Verhindert Worttrennungen */
  }

  /* Verhindert, dass Flexbox-Container die Items untereinander anordnen */
  .ditty-ticker__contents,
  .ditty-ticker__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}


@media only screen and (max-width: 414px) {
.home .newsticker, .front-page .newsticker { top: 288px; }
}
@media only screen and (max-width: 410px) {
.home .newsticker, .front-page .newsticker { top: 282px; }
}
@media only screen and (max-width: 393px) {
.home .newsticker, .front-page .newsticker { top: 277px; }
}
@media only screen and (max-width: 375px) {
.home .newsticker, .front-page .newsticker { top: 268px; }
}
@media only screen and (max-width: 360px) {
.home .newsticker, .front-page .newsticker { top: 260px; }
}


/* --- 8. SONSTIGES (Utilities & Hover) --- */
.home #grid-wrapper.masonry .post-inner.post-hover:hover { 
    transform: translate(0, 0);
    outline: 1px solid #999;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.post-meta { display: none; }
.category-wilstermarsch-erfahren .post-thumbnail { margin-bottom: 0; }
.category-wilstermarsch-erfahren .post-thumbnail .thumb-icon { display: none; }