/*
 * ghde2026.css – zentrales Stylesheet des Child-Themes (Phase 1, Schritt A2.5, 2026-09-27)
 *
 * Enthaelt das CSS, das vorher als Inline-<style> auf JEDER Seite ausgegeben wurde, in exakt der
 * bisherigen Reihenfolge. Geladen per <link> an derselben Stelle im <head> (wp_head, Prio 20, siehe
 * functions.php), von Autoptimize ausgenommen – die Kaskade bleibt dadurch unveraendert.
 * CSS dieser Bereiche NUR HIER aendern (nicht mehr in den Modulen). Reihenfolge der Abschnitte nicht umstellen.
 */

/* ==== ghde-archive-grid-2026-css – frueher Inline-<style> aus inc/design/archive-grid-2026.php ==== */
	/* WICHTIG: border-radius/box-shadow/overflow:hidden gehoeren auf den AEUSSEREN Wrapper
	   (.progression-studios-default-blog-overlay), NICHT auf .progression-studios-feaured-image.
	   Grund: Titel-Overlay (.overlay-progression-blog-content) und Gradient
	   (.overlay-blog-gradient) sind im Template SIBLINGS von .progression-studios-feaured-image,
	   nicht Kinder davon — ein Radius/Clip nur auf der Feaured-Image-Box liess Titel/Gradient
	   unten eckig ueberstehen, da sie ausserhalb dieser Box lagen. Der aeussere Wrapper umschliesst
	   Bild UND Gradient UND Titel gemeinsam und clipt daher alles einheitlich. */
	.progression-studios-default-blog-overlay{overflow:hidden}
	/* Der alte weisse Play-Kreis (.blog-play-icon) entfaellt — im Slider gibt es dieses Element
	   bewusst nicht, hier also aus Konsistenzgruenden ebenfalls ausgeblendet statt neu gebaut. */
	.progression-studios-feaured-image .blog-play-icon{display:none!important}
	/* Alter "Shine"-Hover-Effekt (diagonaler Lichtstreifen-Sweep) komplett abgeschaltet — kommt
	   von einem :before-Pseudo-Element + CSS-Keyframe-Animation
	   (.progression-studios-blog-image-zoom-shine in style.css), das ueber die Klasse am
	   .progression-studios-default-blog-overlay-Wrapper ausgeloest wird. content:none entfernt
	   das Pseudo-Element komplett (kein Rendering-/Animationsaufwand mehr beim Hover), statt nur
	   die Sichtbarkeit zu verstecken. Ersetzt durch den schlankeren Bild-Zoom oben. */
	.progression-studios-feaured-image:before{content:none!important;display:none!important;animation:none!important}
	/* Theme setzt hier padding-bottom:0 (nur links/rechts 10px), Text sitzt daher fast direkt am
	   unteren Rand — wirkt neben den 10px links deutlich unausgewogen. */
	/* 2026-09-25: Titel links und unten gleich weit vom Kartenrand (vorher mobil 5/8px, Desktop 10/9px). */
	.overlay-progression-blog-content-padding{padding:0 12px 12px!important}
	@media (max-width:767px){.overlay-progression-blog-content-padding{padding:0 10px 10px!important}}
	/* .progression-post-meta (Autor/Datum) und .overlay-blog-floating-comments-viewcount
	   (Kommentare/Views) sind fuer diesen CPT/diese Einstellungen leer, nehmen als Block-Level-
	   Elemente aber trotzdem Zeilenhoehe ein — das druecke den Titel sichtbar nach oben, obwohl
	   die Titel-Box selbst korrekt unten anliegt. Im Slider gibt es diese Meta-Zeile ohnehin
	   nicht, also hier konsequent entfernt statt nur leer mitgefuehrt. Bewusst als Nachkommen-
	   Selektor NUR innerhalb der Titel-Box, damit .progression-post-meta anderswo (z.B. echte
	   Blog-Posts) unberuehrt bleibt. */
	.overlay-progression-blog-content-padding .progression-post-meta,
	.overlay-progression-blog-content-padding .overlay-blog-floating-comments-viewcount{display:none!important}
	/* Der h2-Titel selbst traegt zusaetzlich noch eigenes padding-bottom:5px + margin-top:2px aus
	   dem Theme-CSS (Quelle nicht eindeutig identifizierbar, vermutlich ein generischer Heading-
	   Reset). Da die Titel-Box UNTEN verankert ist (bottom:0), zaehlt JEDE zusaetzliche Hoehe
	   (egal ob oben oder unten am Text) direkt gegen den Abstand des Titels zum unteren
	   Cover-Rand — mehr Innenraum im Titel = Text ruckt insgesamt weiter nach oben. Volle
	   Kontrolle uebernehmen statt nur margin-bottom zu setzen. */
	.overlay-progression-blog-title{margin:0!important;padding:0!important}
	/* Bild: Hover-Zoom (5%, wie im Flickity-Slider) + sanftes Einblenden beim Lazy-Load. Ohne
	   Lazy-Klasse (z.B. das erste, eager geladene Bild ueber der Falz) bleibt es normal sichtbar
	   — nur Bilder MIT der lazysizes-"lazyload"-Startklasse starten unsichtbar und blenden nach
	   dem Laden ein, damit nie ein Cover dauerhaft unsichtbar bleibt. */
	.progression-studios-feaured-image img{transition:opacity .4s ease, transform .35s ease;will-change:transform}
	.progression-studios-feaured-image img.lazyload,.progression-studios-feaured-image img.lazyloading{opacity:0}
	.progression-studios-feaured-image img.lazyloaded{opacity:1}
	.progression-studios-default-blog-overlay:hover .progression-studios-feaured-image img{transform:scale(1.05)}
	/* Theme hat ein eigenes Hover-"Aufhellen" per Customizer-Setting
	   (progression_studios_blog_image_opacity, hier auf 0.75 gesetzt): reduziert die Bild-Opacity
	   beim Hover, wodurch der weisse Seitenhintergrund durchscheint. Zurueckgesetzt auf volle
	   Deckkraft, damit nur noch unser eigener Zoom als Hover-Effekt sichtbar ist. */
	.progression-studios-default-blog-overlay:hover a img{opacity:1!important}
	/* Typ-Badge (DOWNLOAD/STREAM/PODCAST/YOUTUBE) oben rechts: Hintergrund-Layer des alten
	   Zwei-Layer-Tricks ausblenden, Text-Layer als sauberes transparentes Badge stylen — exakt
	   wie im Flickity-Slider (Position/Farbe). ".englisch"-Flagge und ".deal"-Tag (links
	   positioniert bzw. solide #2d729b) bleiben unberuehrt. */
	.progression-studios-feaured-image .overlay-blog-meta-category-list[style*="background-color:#112D3B"]{display:none!important}
	/* Theme-Basis-CSS setzt zusaetzlich margin:0 8px 0 8px auf den inneren span (fuer die
	   Original-Badges gedacht) — das kommt zu unserem Div-Padding oben drauf und liess das Badge
	   viel zu geraeumig wirken. Auf 0 zurueckgesetzt. */
	/* Theme-Basis-CSS setzt line-height:2.5 auf den span (fuer die Original-Badges gedacht) — bei
	   font-size 12px ergibt das eine 30px hohe Zeilenbox und blaeht das Badge unabhaengig vom
	   Div-Padding zusaetzlich stark auf. Der Slider-Badge setzt GAR kein eigenes line-height
	   (nutzt den Browser-Standard, ~19px bei 11px Schrift) — line-height:1 hier war zu eng und
	   wirkte gedraengt. normal statt 1, damit es exakt wie im Slider aussieht. */
	/* Raster per CSS-Grid statt Isotope (2026-09-25): Das Theme versteckte alle Cover (opacity 0), bis
	   Isotope das Raster nach dem Skript-Bundle berechnet hatte, und positionierte sie absolut. Jetzt steht
	   das Raster sofort und fest, Isotopes Inline-Positionen werden ueberstimmt. Voraussetzung fuer
	   "Mehr laden" (angehaengte Kacheln laufen einfach mit). Spalten wie vorher im Theme: 4 / 3 / 3 / 2. */
	.progression-studios-isotope-animation{opacity:1!important}
	.progression-blog-index-masonry:has(> .progression-masonry-col-4){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));height:auto!important;position:relative!important}
	.progression-blog-index-masonry:has(> .progression-masonry-col-4) > .progression-masonry-item{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:auto!important;float:none!important;min-width:0}
	@media only screen and (max-width:1024px){.progression-blog-index-masonry:has(> .progression-masonry-col-4){grid-template-columns:repeat(3,minmax(0,1fr))}}
	@media only screen and (max-width:479px){.progression-blog-index-masonry:has(> .progression-masonry-col-4){grid-template-columns:repeat(2,minmax(0,1fr))}}

	/* "Mehr laden" auf Archivseiten (2026-09-25) - Stil wie auf /suche/ */
	ul.page-numbers.ghde-pag-js{display:none}
	/* 2026-09-27: Flex-Zeile statt text-align, damit "Mehr laden" und "Nach oben" gleich hoch nebeneinander stehen */
	.ghde-archive-more{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px;margin:22px 0 10px;clear:both}
	.ghde-archive-loadmore{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #2d729b;border-radius:14px;padding:12px 26px;font-family:'Fira Sans Condensed',sans-serif;font-size:17px;font-weight:700;color:#2d729b!important;text-decoration:none!important;transition:background .15s ease,color .15s ease;cursor:pointer}
	.ghde-archive-loadmore span{font-weight:400;font-size:14px;opacity:.8}
	.ghde-archive-loadmore:hover{background:#2d729b;color:#fff!important}
	.ghde-archive-loadmore.is-busy{pointer-events:none;background:#2d729b;color:#fff!important}
	.ghde-archive-loadmore.is-busy span{display:none}
	.ghde-archive-loadmore.is-busy::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ghdeArchSpin .7s linear infinite}
	@keyframes ghdeArchSpin{to{transform:rotate(360deg)}}
	/* "Nach oben" neben "Mehr laden" (Backlog 19, 2026-09-27). Gilt fuer die Archive (JS in
	   inc/design/archive-grid-2026.php) UND den Hoerspiel-Finder /suche/ (mu-plugins/ghde2026-finder.php
	   nutzt dieselbe Klasse). Sekundaer-/Outline-Stil exakt wie "Mehr laden" (Rand 1.5px #2d729b, Radius 14px,
	   Fira Sans Condensed 17px/700), Hover fuellt blau wie "Mehr laden", gedrueckt #235a7c. Echter <button>
	   statt <a href="#...">: kein Anker-Sprung, den ghde2026-anchor-offset.php / "Page scroll to id" abfangen.
	   Hoehe: beide Knoepfe sind Flex-Kinder mit align-items:stretch -> immer exakt gleich hoch.
	   Mobil (360-767px): nur Pfeil (>=44px Touch-Ziel), Text bleibt fuer Screenreader; steht der Knopf
	   allein (letzte Seite geladen), zeigt er auch mobil den Text. Unter 360px: gestapelt, volle Breite. */
	.ghde-totop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;margin:0;border:1.5px solid #2d729b;border-radius:14px;padding:12px 22px;background:transparent;font-family:'Fira Sans Condensed',sans-serif;font-size:17px;font-weight:700;line-height:1.2;color:#2d729b;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;text-transform:none;letter-spacing:normal;transition:background .15s ease,color .15s ease,border-color .15s ease;animation:ghdeTopIn .3s ease both}
	.ghde-totop[hidden]{display:none!important}
	@media (hover:hover){.ghde-totop:hover{background:#2d729b;color:#fff}}
	.ghde-totop:active{background:#235a7c;border-color:#235a7c;color:#fff}
	.ghde-totop:focus-visible{outline:2px solid #2d729b;outline-offset:2px}
	.ghde-totop-ico{flex:0 0 auto;display:block;width:16px;height:16px}
	@keyframes ghdeTopIn{from{opacity:0}to{opacity:1}}
	@media (prefers-reduced-motion:reduce){.ghde-totop{animation:none}}
	@media (min-width:360px) and (max-width:767px){.ghde-totop{padding:12px 15px}.ghde-totop:not(:only-child) .ghde-totop-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
	/* Sehr schmale Handys (<360px): passt nicht nebeneinander -> beide Knoepfe volle Breite untereinander */
	@media (max-width:359px){.ghde-archive-more>*,.ghde-finder-foot>*{flex:1 1 100%;justify-content:center}}
	/* "Mehr laden" verschwindet nach der letzten Seite per Ausblenden, "Nach oben" bleibt stehen */
	.ghde-archive-loadmore.is-gone,.ghde-finder-loadmore.is-gone{opacity:0;transition:opacity .2s ease;pointer-events:none}
	/* Sprungziel (H1 bzw. Suchzeile) bekommt per JS tabindex=-1: kein Fokusrahmen nach Maus-/Touch-Klick */
	[data-ghde-totop-target]:focus:not(:focus-visible){outline:none}
	.ghde-archive-ad{grid-column:1/-1;margin:8px 0}
	/* Nachgeladene Cover gleiten gestaffelt von unten ein statt aufzublitzen */
	.progression-masonry-item.ghde-rise{animation:ghdeArchRise .6s ease both}
	@keyframes ghdeArchRise{from{opacity:0}to{opacity:1}}
	@media (prefers-reduced-motion:reduce){.progression-masonry-item.ghde-rise{animation:none}}
	.ghde-archive-ad:has(.rhs-ad-slot[data-rhs-state="empty"]){display:none}

	/* Filter-/Sortierleiste ueber dem Raster (ghde2026_archive_toolbar(), 2026-09-25) — ersetzt das alte
	   <select onchange>-Menue. Stil wie die 2026-Pillen (Scroll-Pills/Extern-Badge im Player): Fira Sans
	   Condensed 700, #2d729b, Segment-Hintergrund #eef4f8, Menue-Karte mit dem Player-Schatten-Token.
	   margin-bottom 34px: das Raster zieht sich per margin-top:-20px (Theme) wieder hoch -> 14px + 5px
	   Kachel-Innenabstand Luft bis zu den Covern. z-index 25: ueber den Cover-Overlays (bis 20), unter dem
	   Kopfbereich (#masthead-pro 50). */
	.ghde2026-archbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 34px;font-family:'Fira Sans Condensed',sans-serif;position:relative;z-index:25}
	.ghde2026-archbar-seg{display:inline-flex;background:#eef4f8;border-radius:999px;padding:3px;gap:2px;margin:0;list-style:none}
	.ghde2026-archbar-seg a{display:block;font-size:13px;font-weight:700;line-height:1.2;color:#2d729b!important;padding:7px 14px;border-radius:999px;text-decoration:none!important;white-space:nowrap;transition:background .15s ease,color .15s ease}
	.ghde2026-archbar-seg a:hover{background:#dde9f1}
	.ghde2026-archbar-seg a[aria-current="page"]{background:#2d729b;color:#fff!important}
	.ghde2026-archbar-sort{position:relative;margin-left:auto}
	.ghde2026-archbar-sort summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;font-size:13px;font-weight:700;line-height:1.2;color:#2d729b;border:1.5px solid #2d729b;border-radius:999px;padding:6px 13px;background:#fff;transition:background .15s ease,color .15s ease;user-select:none}
	.ghde2026-archbar-sort summary::-webkit-details-marker{display:none}
	.ghde2026-archbar-sort summary:hover,.ghde2026-archbar-sort[open] summary{background:#2d729b;color:#fff}
	.ghde2026-archbar-sort summary .fa-chevron-down{font-size:10px;transition:transform .15s ease}
	.ghde2026-archbar-sort[open] summary .fa-chevron-down{transform:rotate(180deg)}
	.ghde2026-archbar-sort summary:focus-visible,.ghde2026-archbar-seg a:focus-visible,.ghde2026-archbar-menu a:focus-visible{outline:2px solid #2d729b;outline-offset:2px}
	.ghde2026-archbar-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(17,45,59,.18);z-index:20}
	.ghde2026-archbar-menu li{margin:0;padding:0;list-style:none}
	.ghde2026-archbar-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:700;color:#112D3B!important;text-decoration:none!important;transition:background .15s ease,color .15s ease}
	.ghde2026-archbar-menu a:hover{background:#eef4f8;color:#2d729b!important}
	.ghde2026-archbar-menu a[aria-current="true"]{color:#2d729b!important}
	.ghde2026-archbar-menu a .fa-check{font-size:11px;visibility:hidden}
	.ghde2026-archbar-menu a[aria-current="true"] .fa-check{visibility:visible}
	.ghde2026-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
	@media (max-width:479px){.ghde2026-archbar-seg a{padding:7px 11px}}
	

/* ==== ghde-favorites-2026-css – frueher Inline-<style> aus inc/design/favorites-2026.php ==== */
	.ghde-fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;list-style:none;margin:0!important;padding:0!important}
	.ghde-fav-item{list-style:none;margin:0!important}
	.ghde-fav-item > a{display:block;text-decoration:none}
	.ghde-fav-cover{position:relative;display:block;overflow:hidden;}
	.ghde-fav-cover img{width:100%;height:auto;display:block;margin:0!important;transition:opacity .4s ease, transform .35s ease;will-change:transform}
	.ghde-fav-cover img.lazyload{opacity:0}
	.ghde-fav-cover img.lazyloaded{opacity:1}
	.ghde-fav-item > a:hover .ghde-fav-cover img{transform:scale(1.05)}
	.ghde-fav-gradient{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,0) 100%);pointer-events:none}
	.ghde-fav-title{position:absolute;left:0;right:0;bottom:0;padding:0 12px 6px;margin:0!important;color:#fff;font-family:"Fira Sans Condensed",Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;line-height:1.25}
	/* Merken/Gemerkt-Button: unter dem Cover statt seitlich daneben, wie von Stefan gewuenscht.
	   Hintergrundfarbe kommt weiterhin per Inline-style aus den Plugin-eigenen
	   Farbeinstellungen (simplefavorites_display > button_colors) — hier nur Form/Abstand/
	   Typografie, damit es wie ein kompaktes Badge statt wie der grosse Theme-.button wirkt. */
	.ghde-fav-btn{margin-top:10px;text-align:center}
	.simplefavorite-button{display:inline-flex;align-items:center;gap:6px;font-family:"Fira Sans Condensed",Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;padding:8px 18px;border-radius:20px;cursor:pointer;border:none;transition:opacity .2s ease}
	.simplefavorite-button:hover{opacity:.85}
	.simplefavorite-button.active{opacity:1}
	@media (max-width:479px){.ghde-fav-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
	

/* ==== ghde2026-arbox-css – frueher Inline-<style> aus inc/boxes/archiv-box.php ==== */
	.ghde2026-arbox, .ghde2026-arbox *, .ghde2026-arbox *::before, .ghde2026-arbox *::after { box-sizing: border-box; }
	/* margin-bottom:40px wie im Original ".progression-author-container" -- Abstand zum
	   naechsten Element (Stefan, Audit nach Rollout aufgedeckt, 2026-09-23). */
	.ghde2026-arbox { font-family: 'Arimo', sans-serif; max-width: 100%; overflow-x: hidden; margin-bottom: 40px; }
	.ghde2026-arbox-inner {
		background: #f2f3f5; border-radius: 16px;
		padding: 32px; display: grid; grid-template-columns: 270px 1fr; column-gap: 32px;
		grid-template-areas: "side heading" "side intro" "side main";
		grid-template-rows: min-content min-content 1fr;
		align-items: start; max-width: 100%;
		overflow: hidden;
	}
	.ghde2026-arbox-heading-wrap { grid-area: heading; }
	.ghde2026-arbox-intro { grid-area: intro; }
	.ghde2026-arbox-side { grid-area: side; min-width: 0; }
	.ghde2026-arbox-badge-row { text-align: center; margin-bottom: 12px; }
	.ghde2026-arbox-exklusiv {
		display: inline-block; background: #2d729b; color: #fff; font-size: 10px; font-weight: 800;
		letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
	}
	.ghde2026-arbox-cover-wrap{ position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 14px; }
	/* Graustufen+Transparenz wie die alte ".abgelaufen"-Klasse (style.css) -- 1:1 derselbe
	   visuelle Hinweis, nur direkt in der Box statt als globale Utility-Klasse. */
	.ghde2026-arbox-cover { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); opacity: .75; }
	.ghde2026-arbox-cover-ribbon {
		position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 8px 6px;
		background: rgba(17,45,59,.82); color: #fff; font-family: 'Fira Sans Condensed', sans-serif;
		font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
	}
	.ghde2026-arbox-steckbrief { background: #f7f9fa; border-radius: 12px; padding: 16px 20px; }
	.ghde2026-arbox-grid { display: flex; flex-direction: column; gap: 10px; }
	.ghde2026-arbox-k { font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase; font-size: 12.5px; letter-spacing: .5px; line-height: 1.3; color: #1a1a1a; font-weight: 300; }
	.ghde2026-arbox-v { font-size: 13.5px; line-height: 1.3; color: #171e22; font-weight: 400; }
	.ghde2026-arbox-v a, .ghde2026-arbox-v a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-arbox-v a:hover { color: #235a7c; }

	.ghde2026-arbox-main { grid-area: main; min-width: 0; }
	.ghde2026-arbox-heading { font-family: 'Fira Sans Condensed', sans-serif; margin: 0 0 4px 0; font-size: 22px; font-weight: 800; color: #1c2b3a; }
	.ghde2026-arbox-heading-bar { height: 3px; width: 44px; background: #2d729b; margin: 10px 0 16px 0; }
	.ghde2026-arbox-intro { color: #171e22; font-size: 15px; line-height: 1.5; margin: 0 0 16px 0; }
	.ghde2026-arbox-ad-slot:empty { display: none; }
	.ghde2026-arbox-ad-slot { margin: 0 0 16px 0; }

	.ghde2026-arbox-faq { margin: 0 0 24px 0; border-top: 1px solid #e5e9eb; }
	.ghde2026-arbox-faq .ghde-faq__item { border-bottom: 1px solid #e5e9eb; }
	.ghde2026-arbox-faq .ghde-faq__item summary {
		list-style: none; cursor: pointer; padding: 12px 30px 12px 0; position: relative;
		font-weight: 700; font-size: 14.5px; line-height: 1.3; color: #112D3B;
	}
	.ghde2026-arbox-faq .ghde-faq__item summary::-webkit-details-marker { display: none; }
	.ghde2026-arbox-faq .ghde-faq__toggle { position: absolute; right: 4px; top: 9px; font-size: 20px; line-height: 1; color: #2d729b; font-weight: 400; transition: transform .2s ease; }
	.ghde2026-arbox-faq .ghde-faq__item[open] .ghde-faq__toggle { transform: rotate(180deg); }
	.ghde2026-arbox-faq .ghde-faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; font-size: 13px; color: #6b7680; line-height: 1.5; }
	.ghde2026-arbox-faq .ghde-faq__a-inner { padding: 0 0 14px 0; }
	.ghde2026-arbox-faq .ghde-faq__a a, .ghde2026-arbox-faq .ghde-faq__a a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-arbox-faq .ghde-faq__a a:hover { color: #235a7c; }

	/* ===== Affiliate-Alternativen: der eigentliche CTA-Bereich dieser Box, deutlich
	   praesenter als die winzigen Logo-Kaestchen des Original-Blocks (float:left, 120x58px,
	   duenner grauer Rand). Karten im selben "aus einem Guss"-Look wie die Buttons der
	   anderen drei Boxen (weisser/heller Grund, Radius, Hover-Lift). ===== */
	.ghde2026-arbox-alt { margin: 0; padding-top: 4px; }
	.ghde2026-arbox-alt-heading {
		font-family: 'Fira Sans Condensed', sans-serif; font-size: 16px; font-weight: 800;
		color: #1c2b3a; text-align: center; margin: 20px 0 4px 0;
	}
	.ghde2026-arbox-alt-sub { font-size: 12.5px; color: #6b7680; text-align: center; margin: 0 0 14px 0; }
	.ghde2026-arbox-alt-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
	/* FESTE Kartengroesse (statt min-width) -- die Partner-Logos haben stark unterschiedliche
	   Seitenverhaeltnisse (BookBeat z.B. 2.7:1, Nextory 3.3:1), wodurch bei einer nur am eigenen
	   Logo bemessenen Kartenbreite jede Karte unterschiedlich viel Leerraum um das Logo zeigt --
	   feste Breite/Hoehe macht alle Karten gleich gross, das Logo wird per object-fit:contain
	   darin zentriert (Stefan: "BookBeat hat zu viel Abstand rechts"). */
	.ghde2026-arbox-alt-card {
		display: flex; align-items: center; justify-content: center; width: 148px; height: 62px;
		padding: 10px 16px; background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(17,45,59,.1);
		/* Transparente Border in derselben Staerke wie der Hover-Zustand (statt border erst beim
		   Hover hinzuzufuegen) -- box-sizing:border-box haelt die Kartengroesse so in beiden
		   Zustaenden identisch, kein Sprung beim Ein-/Ausblenden. */
		border: 2px solid transparent; transition: border-color .15s ease;
	}
	.ghde2026-arbox-alt-card:hover { border-color: #2d729b; }
	.ghde2026-arbox-alt-logo { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; display: block; }
	.ghde2026-arbox-disclosure { margin-top: 12px; font-size: 12px; line-height: 1.4; color: #6b7680; text-align: center; }

	@media (max-width: 780px) {
		.ghde2026-arbox-inner {
			grid-template-columns: 1fr;
			grid-template-areas: "heading" "intro" "side" "main";
			grid-template-rows: min-content min-content min-content 1fr;
			padding: 20px; row-gap: 16px;
		}
		.ghde2026-arbox-cover-wrap{ max-width: 220px; margin-left: auto; margin-right: auto; }
		.ghde2026-arbox-heading-bar { margin-bottom: 12px; }
		.ghde2026-arbox-alt-card { min-width: 110px; }
	}
	.ghde2026-arbox-v, .ghde2026-arbox-faq .ghde-faq__a-inner, .ghde2026-arbox-intro, .ghde2026-arbox-faq .ghde-faq__item summary {
		overflow-wrap: break-word; word-break: break-word;
	}
	

/* ==== ghde2026-dlbox-css – frueher Inline-<style> aus inc/boxes/download-box.php ==== */
	.ghde2026-dlbox, .ghde2026-dlbox *, .ghde2026-dlbox *::before, .ghde2026-dlbox *::after { box-sizing: border-box; }
	/* margin-bottom:40px wie im Original ".progression-author-container" -- Abstand zum
	   naechsten Element (Stefan, Audit nach Rollout aufgedeckt, 2026-09-23). */
	.ghde2026-dlbox { font-family: 'Arimo', sans-serif; max-width: 100%; overflow-x: hidden; margin-bottom: 40px; }
	/* Grid statt Flex, extra Feld fuer die Ueberschrift (siehe .ghde2026-dlbox-heading-wrap):
	   Desktop -- Ueberschrift oben in der rechten Spalte, Mobile -- Ueberschrift zuerst,
	   noch vor dem Cover. */
	.ghde2026-dlbox-inner {
		/* #f2f3f5 ist das Original-Grau von .progression-author-container (der alten Box)
		   und .sidebar-item (Sidebar-Widgets) -- bewusst dasselbe Grau statt Weiss. */
		background: #f2f3f5; border-radius: 16px;
		padding: 32px; display: grid; grid-template-columns: 270px 1fr; column-gap: 32px;
		grid-template-areas: "side heading" "side intro" "side main";
		/* grid-template-rows explizit setzen (min-content fuer Ueberschrift- und Intro-Zeile) --
		   sonst verteilt der Browser die Hoehe des ueber alle Zeilen gespannten "side"-Feldes
		   anteilig auf ALLE Zeilen und reisst eine Luecke unter der Ueberschrift/dem Intro auf,
		   sobald der Steckbrief (side) laenger ist als Ueberschrift+Intro+Anfang von main
		   zusammen (z.B. bei vielen gesetzten Feldern). */
		grid-template-rows: min-content min-content 1fr;
		align-items: start; max-width: 100%;
		/* Sicherheitsnetz: garantiert abgerundete Ecken auch dann, wenn irgendein Kind
		   (z.B. durch die max-height-Animation der FAQ) kurzzeitig ueber den Rand hinaus reicht. */
		overflow: hidden;
	}
	.ghde2026-dlbox-heading-wrap { grid-area: heading; }
	.ghde2026-dlbox-intro { grid-area: intro; }
	.ghde2026-dlbox-side { grid-area: side; min-width: 0; }
	.ghde2026-dlbox-badge-row { text-align: center; margin-bottom: 12px; }
	.ghde2026-dlbox-exklusiv {
		display: inline-block; background: #2d729b; color: #fff; font-size: 10px; font-weight: 800;
		letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
	}
	.ghde2026-dlbox-cover-wrap{ width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 10px; }
	.ghde2026-dlbox-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
	/* position:relative + z-index, damit der Merken-Button ueber dem box-shadow des
	   Covers liegt (der Schatten von .ghde2026-dlbox-cover-wrap ragt sonst leicht drueber). */
	.ghde2026-dlbox-merk { text-align: center; margin-bottom: 14px; position: relative; z-index: 2; }
	/* Der Merken-Button kommt vom Simple-Favorites-Plugin (.simplefavorite-button) mit eckigen
	   Ecken und grauem Hover aus dessen eigenem CSS -- hier gezielt nur innerhalb unserer Box
	   ueberschrieben, damit er wie die Download-Buttons aussieht (gleicher Radius/Hover-Fade),
	   ohne den Button anderswo auf der Seite (z.B. Artikel-Sidebar) zu veraendern. Das Plugin hat
	   sitenweit noch eine eigene, weniger spezifische Regel mit einem Opacity-Hover ohne
	   Uebergang (".simplefavorite-button:hover{opacity:.85}") -- die haerte den Fade ab, deshalb
	   hier zusaetzlich opacity fest auf 1 gepinnt, damit nur unser Background-Fade wirkt. */
	.ghde2026-dlbox-merk .simplefavorite-button {
		border-radius: 14px !important; transition: background .15s ease !important; opacity: 1 !important;
	}
	.ghde2026-dlbox-merk .simplefavorite-button:hover {
		background: #235a7c !important; opacity: 1 !important;
	}
	.ghde2026-dlbox-merk-link { margin-top: 6px; text-align: center; line-height: 1.2; }
	/* exakt der "PROBLEME BEIM DOWNLOAD?"-Stil (.ghde2026-dlbox-problem-link a) -- statt des
	   frueheren schlichten Arimo-Links: Grossbuchstaben, Fira Sans Condensed, duenn, mit
	   Buchstabenabstand, unser Marken-Blau #2d729b (bewusst nicht das violette Theme-Blau
	   #4145ee), :visited explizit gesetzt gegen Browser-Standard-Besuchtfarbe. */
	.ghde2026-dlbox-merk-link a, .ghde2026-dlbox-merk-link a:visited {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-weight: 300; letter-spacing: .5px; font-size: 13.5px; color: #2d729b;
		text-decoration: none; transition: color .15s ease;
	}
	.ghde2026-dlbox-merk-link a:hover { color: #235a7c; }
	.ghde2026-dlbox-price { text-align: center; margin-bottom: 14px; padding: 10px; background: #fff5f5; border-radius: 10px; }
	/* Wie im Original (.author-heading, ein h5 -- daher automatisch fett+Fira-Sans-Condensed
	   ueber die Theme-Basisregel fuer h1-h6): die ganze Zeile ist fett, nur die Zahl zusaetzlich
	   rot+durchgestrichen. line-height eng gesetzt, sonst reisst die geerbte Body-Zeilenhoehe
	   (1.75) eine grosse Luecke zur naechsten Zeile auf. */
	.ghde2026-dlbox-price-was { font-family: 'Fira Sans Condensed', sans-serif; font-size: 20px; line-height: 1.3; font-weight: 700; color: #1a1a1a; }
	.ghde2026-dlbox-price-strike { color: #c0392b; text-decoration: line-through; }
	.ghde2026-dlbox-price-now { font-size: 13.5px; color: #1a1a1a; font-weight: 400; margin-top: 2px; }
	.ghde2026-dlbox-code { text-align: center; margin-bottom: 14px; padding: 10px; background: #f7f9fa; border-radius: 10px; }
	.ghde2026-dlbox-code-repeat { background: transparent; padding: 0; margin-bottom: 20px; }
	.ghde2026-dlbox-code-label { font-size: 13.5px; line-height: 1.3; color: #1a1a1a; font-weight: 400; }
	.ghde2026-dlbox-code-value { font-family: 'Fira Sans Condensed', sans-serif; font-size: 20px; line-height: 1.3; color: #112D3B; font-weight: 700; margin-top: 2px; }
	.ghde2026-dlbox-code-value-lg { font-size: 22px; }
	.ghde2026-dlbox-kinderboxen { margin-bottom: 14px; padding: 12px 14px; background: #f7f9fa; border-radius: 10px; }
	.ghde2026-dlbox-kinderboxen-label { font-family: 'Fira Sans Condensed', sans-serif; font-size: 12.5px; font-weight: 300; color: #1a1a1a; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 0; }
	/* gap:0 statt 2px -- so entsteht zwischen den Zeilen exakt derselbe Abstand wie zwischen
	   zwei umgebrochenen Zeilen eines .ghde2026-dlbox-v-Werts (beide nur ueber line-height:1.3
	   der jeweiligen Zeilenbox, keine zusaetzliche Luecke obendrauf). */
	.ghde2026-dlbox-kinderboxen-list { display: flex; flex-direction: column; gap: 0; font-size: 13.5px; line-height: 1.3; font-weight: 400; color: #171e22; }
	.ghde2026-dlbox-kinderboxen-list a, .ghde2026-dlbox-kinderboxen-list a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-dlbox-kinderboxen-list a:hover { color: #235a7c; }
	/* Farbe nur fuers Icon, nicht fuer den Text -- Hoerbert/Tigerbox Touch sind keine Links
	   und sollen wie die Dauer-Ausgabe darunter schwarz bleiben, nur Toniebox ist ein echter
	   Link (siehe eigene a-Regel unten). */
	.ghde2026-dlbox-check { display: flex; align-items: center; gap: 6px; color: #171e22; }
	.ghde2026-dlbox-check svg { flex-shrink: 0; color: #2d729b; }
	.ghde2026-dlbox-steckbrief { background: #f7f9fa; border-radius: 12px; padding: 16px 20px; }
	.ghde2026-dlbox-grid { display: flex; flex-direction: column; gap: 10px; }
	/* Testweise: gleicher Stil wie die "QUELLE:"-Beschriftung im Button -- Grossbuchstaben,
	   Fira Sans Condensed, duenn, Buchstabenabstand, statt der bisherigen schlichten
	   Arimo-Kleinschreibung. */
	.ghde2026-dlbox-k { font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase; font-size: 12.5px; letter-spacing: .5px; line-height: 1.3; color: #1a1a1a; font-weight: 300; }
	.ghde2026-dlbox-v { font-size: 13.5px; line-height: 1.3; color: #171e22; font-weight: 400; }
	.ghde2026-dlbox-v a, .ghde2026-dlbox-v a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-dlbox-v a:hover { color: #235a7c; }

	.ghde2026-dlbox-main { grid-area: main; min-width: 0; }
	/* Ueberschrift + Balken 1:1 aus dem Newsletter-Template uebernommen (dort
	   "Diese Woche neu": #1c2b3a, 800, 22px, darunter ein 3x44px-Balken in
	   Markenblau #2d729b) -- Schriftart bleibt aber Fira Sans Condensed statt der
	   E-Mail-sicheren Fallback-Schrift, weil auf der echten Seite (anders als im
	   E-Mail-Client) alle Ueberschriften darueber laufen. */
	.ghde2026-dlbox-heading { font-family: 'Fira Sans Condensed', sans-serif; margin: 0 0 4px 0; font-size: 22px; font-weight: 800; color: #1c2b3a; }
	.ghde2026-dlbox-heading-bar { height: 3px; width: 44px; background: #2d729b; margin: 10px 0 16px 0; }
	/* Gleicher Stil fuer die "Inhaltsangabe"-Ueberschrift in content-single.php (ausserhalb jeder
	   Box) -- 1:1 dieselben Werte wie .ghde2026-dlbox-heading/-heading-bar, damit die Seite ein
	   einheitliches Ueberschriften-Bild hat (Stefan, 2026-09-23). Bewusst hier statt in einer
	   eigenen Datei, da dieser wp_head-Hook unabhaengig von der Kategorie auf jeder Single-Seite
	   laeuft. */
	.ghde2026-content-heading { font-family: 'Fira Sans Condensed', sans-serif; margin: 0 0 4px 0; font-size: 22px; font-weight: 800; color: #1c2b3a; }
	.ghde2026-content-heading-bar { height: 3px; width: 44px; background: #2d729b; margin: 10px 0 16px 0; }
	.ghde2026-dlbox-intro { color: #171e22; font-size: 15px; line-height: 1.5; margin: 0 0 16px 0; }
	.ghde2026-dlbox-ad-slot:empty { display: none; }
	.ghde2026-dlbox-ad-slot { margin: 0 0 16px 0; }

	.ghde2026-dlbox-faq { margin: 0 0 20px 0; border-top: 1px solid #e5e9eb; }
	.ghde2026-dlbox-faq .ghde-faq__item { border-bottom: 1px solid #e5e9eb; }
	.ghde2026-dlbox-faq .ghde-faq__item summary {
		list-style: none; cursor: pointer; padding: 12px 30px 12px 0; position: relative;
		font-weight: 700; font-size: 14.5px; line-height: 1.3; color: #112D3B;
	}
	.ghde2026-dlbox-faq .ghde-faq__item summary::-webkit-details-marker { display: none; }
	.ghde2026-dlbox-faq .ghde-faq__toggle { position: absolute; right: 4px; top: 9px; font-size: 20px; line-height: 1; color: #2d729b; font-weight: 400; transition: transform .2s ease; }
	.ghde2026-dlbox-faq .ghde-faq__item[open] .ghde-faq__toggle { transform: rotate(180deg); }
	/* Sanftes Auf-/Zuklappen statt des abrupten nativen details-Verhaltens -- Hoehe wird per
	   JS (siehe wp_footer weiter unten) animiert, dafuer hier max-height als Transition-Basis. */
	.ghde2026-dlbox-faq .ghde-faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; font-size: 13px; color: #6b7680; line-height: 1.5; }
	.ghde2026-dlbox-faq .ghde-faq__a-inner { padding: 0 0 14px 0; }
	.ghde2026-dlbox-faq .ghde-faq__a a, .ghde2026-dlbox-faq .ghde-faq__a a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-dlbox-faq .ghde-faq__a a:hover { color: #235a7c; }

	/* flex-direction:column -- Download-Button(s) und ARD-Sounds-Button IMMER in getrennten
	   Zeilen, unabhaengig davon ob ein oder zwei Download-Buttons da sind (siehe Kommentar im
	   Markup). Die Download-Buttons selbst (Teil 1/Teil 2) bekommen ihre eigene Row-Wrap-Zeile
	   ueber .ghde2026-dlbox-cta-downloads. */
	.ghde2026-dlbox-cta-row { display: flex; flex-direction: column; gap: 12px; align-items: center; }
	.ghde2026-dlbox-cta-downloads { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
	/* min-height: ohne gesetzte Quelle faellt bei .ghde2026-dlbox-btn die zweite Zeile
	   (Quelle-Beschriftung) komplett weg -- der Button wird dann ca. 51px statt 68px hoch und
	   wirkt neben dem immer einzeiligen ARD-Sounds-Button (~53px) kleiner. min-height + zentrierte
	   Ausrichtung sorgen dafuer, dass beide Button-Typen immer gleich hoch sind, egal ob Quelle
	   gesetzt ist oder nicht. */
	.ghde2026-dlbox-btn {
		display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		padding: 12px 24px; border-radius: 14px; background: #2d729b; min-height: 54px;
		text-decoration: none !important;
		transition: background .15s ease;
	}
	.ghde2026-dlbox-btn:hover { background: #235a7c; }
	/* 23px statt 22px: weisse Schrift auf gesaettigtem Blau rendert beim Browser-Antialiasing
	   optisch duenner/kleiner als dunkle Schrift auf hellem Grund (die ARD-Sounds-Variante) --
	   bei identischer font-size sahen beide Buttons unterschiedlich gross aus, 1px Ausgleich
	   macht das optisch wieder gleich. */
	/* line-height fehlte -- erbte die Body-Zeilenhoehe 1.75, was bei 23px Schrift ca. 8px
	   "unsichtbaren" Leerraum UEBER dem Text erzeugte (die Quelle-Zeile darunter hat schon ihr
	   eigenes enges line-height:1.2) -- dadurch wirkte der Abstand oben groesser als unten. */
	.ghde2026-dlbox-btn-label { font-family: 'Fira Sans Condensed', sans-serif; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 23px; font-weight: 700; line-height: 1.2; }
	.ghde2026-dlbox-btn-label i { font-size: 18px; }
	/* 1:1 aus der Original-Klasse ".quelle" (style.css) -- die "Quelle: X"-Beschriftung im
	   Button war dort GROSSBUCHSTABEN, Fira Sans Condensed, 12px, duenn (300), mit
	   Buchstabenabstand -- nicht einfach eine kleinere/transparentere Version des Button-Texts. */
	.ghde2026-dlbox-btn-quelle {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-size: 12px; font-weight: 300; letter-spacing: .5px; line-height: 1.2; color: #fff;
	}
	/* ARD-Markenblau (#264b80) statt unserem Player-Blau -- ARD Sounds ist ein fremdes Angebot,
	   soll optisch auch dessen eigene Farbe tragen (aehnlich wie BookBeat-Lila). */
	.ghde2026-dlbox-btn-secondary {
		font-family: 'Fira Sans Condensed', sans-serif;
		display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px;
		border-radius: 14px; min-height: 54px;
		border: 1.5px solid #264b80; color: #264b80; font-size: 15px; font-weight: 700; align-self: center;
		text-decoration: none !important; transition: background .15s ease, color .15s ease;
	}
	.ghde2026-dlbox-btn-secondary:hover { background: #264b80; color: #fff; }
	/* margin-top auf 6px statt 12px: die verbleibenden ~6px Differenz zu den echten
	   Button-Button-12px kommen aus dem Font-Leading von Fira Sans Condensed (Ascent/Descent
	   ueber line-height:1.2 hinaus), das sich per line-height/margin allein nicht ganz
	   wegrechnen laesst -- 6px Kompensation gleicht das gemessene Delta genau aus. */
	.ghde2026-dlbox-problem-link { margin-top: 6px; text-align: center; line-height: 1.2; }
	/* exakt der Quellenlink-Stil (.ghde2026-dlbox-quelle-row .ghde2026-dlbox-v a) -- line-height
	   explizit eng gesetzt, sonst erbt der Link die Body-Zeilenhoehe 1.75 und der Text bekommt
	   unsichtbaren Leerraum UEBER dem Glyph, wodurch der Abstand zum Button darueber trotz
	   korrektem margin-top optisch groesser wirkt als der Button-zu-Button-Abstand. */
	.ghde2026-dlbox-problem-link a, .ghde2026-dlbox-problem-link a:visited {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-weight: 300; letter-spacing: .5px; font-size: 13.5px; color: #2d729b;
		text-decoration: none; transition: color .15s ease;
	}
	.ghde2026-dlbox-problem-link a:hover { color: #235a7c; }

	@media (max-width: 780px) {
		.ghde2026-dlbox-inner {
			grid-template-columns: 1fr;
			grid-template-areas: "heading" "intro" "side" "main";
			grid-template-rows: min-content min-content min-content 1fr;
			padding: 20px; row-gap: 16px;
		}
		.ghde2026-dlbox-cover-wrap{ max-width: 220px; margin-left: auto; margin-right: auto; }
		.ghde2026-dlbox-heading-bar { margin-bottom: 12px; }
	}
	/* Sicherheitsnetz gegen "zu breite Textbloecke" auf Mobile: lange Woerter/URLs (Quelle-
	   Link, FAQ-Antworten) duerfen die Box nicht horizontal aufsprengen. */
	.ghde2026-dlbox-v, .ghde2026-dlbox-faq .ghde-faq__a-inner, .ghde2026-dlbox-intro, .ghde2026-dlbox-faq .ghde-faq__item summary {
		overflow-wrap: break-word; word-break: break-word;
	}
	

/* ==== ghde2026-global-button-style – frueher Inline-<style> aus inc/design/ghde2026-global-button-style.php ==== */
	#boxed-layout-pro .form-submit input#submit,
	#boxed-layout-pro input.button,
	.tml-submit-wrap input.button-primary,
	.acf-form-submit input.button,
	.tml input#wp-submit,
	#boxed-layout-pro #customer_login input.button,
	#boxed-layout-pro .woocommerce-checkout-payment input.button,
	#boxed-layout-pro button.button,
	#boxed-layout-pro a.button,
	#newsletter-form-fields input.button,
	a.progression-studios-button,
	.post-password-form input[type=submit],
	#respond input#submit,
	.wpcf7-form input.wpcf7-submit,
	#boxed-layout-pro .simplefavorite-button {
		border-radius: 14px !important;
	}
	#boxed-layout-pro button.button:hover,
	#boxed-layout-pro a.button:hover,
	#newsletter-form-fields input.button:hover,
	a.progression-studios-button:hover,
	.post-password-form input[type=submit]:hover,
	#respond input#submit:hover,
	.wpcf7-form input.wpcf7-submit:hover {
		color: #ffffff !important;
		border-color: #235a7c !important;
		background: #235a7c !important;
	}
	#boxed-layout-pro .simplefavorite-button:hover,
	#boxed-layout-pro .simplefavorite-button.active {
		color: #ffffff !important;
		background: #235a7c !important;
	}
	/* Elementor-Buttons (z.B. "Alle Hörbücher »" auf Taxonomie-/Landingpages) -- Elementors
	   eigenes Site-Kit setzt Radius/Hover-Farbe global ueber eine eigene generierte CSS-Datei mit
	   hoher Spezifitaet, daher hier ebenfalls !important (Stefan, 2026-09-23). */
	.elementor-button {
		border-radius: 14px !important;
	}
	/* Einige Button-Widgets haben zusaetzlich einen eigenen "Background Overlay" auf dem
	   umschliessenden .elementor-widget-container (Elementor-Widget-Einstellung, eckig, 0px
	   Radius) -- ohne diesen mitzurunden steckt der abgerundete Button sichtbar in einem groesseren
	   eckigen Rechteck (Stefan meldete das anhand der "Alle Streams"-Startseiten-Buttons,
	   2026-09-23). Bewusst auf Button-Widgets *scoped* (nicht generell jeden
	   .elementor-widget-container), damit andere Widget-Typen (Bilder, Text) nicht ungewollt
	   mitgerundet werden. */
	.elementor-widget-button .elementor-widget-container {
		border-radius: 14px !important;
		overflow: hidden;
	}
	/* Elementors "Background Overlay"-Feature hat eine EIGENE, vom Button unabhaengige
	   Hover-Farbe direkt auf dem Widget-Container (per Element-ID generiert, z.B.
	   ".elementor-element-b8c3fdc:hover .elementor-widget-container{background-color:rgb(76,76,76)}"
	   -- graues Standard-Hover aus dem Elementor-Kit). Ohne diese Regel bleibt der Container beim
	   Hover grau, waehrend nur der Button selbst blau wird (Stefan meldete das, 2026-09-23). Ueber
	   die wiederverwendbare .elementor-widget-button-Klasse erreicht statt jeder einzelnen
	   Element-ID, damit es fuer JEDEN Button-Widget gilt, nicht nur die aktuell bekannten. */
	.elementor-widget-button:hover .elementor-widget-container {
		background-color: #235a7c !important;
	}
	/* Der Button selbst ist bei JEDEM Button-Widget sitewide immer transparent (die sichtbare
	   Fuellfarbe kommt vom .elementor-widget-container drumherum, siehe Regel oben) --
	   background-color hier NICHT mitsetzen, sonst faerbt sich der Button beim Hover als eigene,
	   zusaetzliche Rechteck-Ebene ein und der Uebergang wirkt doppelt/ungleichmaessig, weil
	   Container und Button unterschiedliche Transition-Dauern haben (Stefan meldete das sichtbare
	   "Fading"-Delta, 2026-09-23). Nur Textfarbe/Border angleichen, Hintergrund bleibt transparent. */
	.elementor-button:hover,
	.elementor-button:focus {
		border-color: #235a7c !important;
		color: #ffffff !important;
	}
	/* Happy-Addons-Buttons (".ha-btn", z.B. "Werbung ausblenden" im Header) -- hier sitzt die
	   Fuellfarbe (anders als beim Elementor-Button-Widget oben) direkt auf .ha-btn selbst, keine
	   separate Container-Ebene noetig. Radius+Hover analog zur "Flickity 2026"-Designsprache,
	   Link-Variante (".ha-btn--link", reiner Textlink ohne Fuellung) bewusst wie im
	   Happy-Addons-eigenen CSS getrennt behandelt: nur Textfarbe, kein Hintergrund (Stefan,
	   2026-09-23). */
	.ha-btn {
		border-radius: 14px !important;
	}
	.ha-btn:not(.ha-btn--link):hover,
	.ha-btn:not(.ha-btn--link):focus {
		background-color: #235a7c !important;
		color: #ffffff !important;
	}
	.ha-btn.ha-btn--link:hover,
	.ha-btn.ha-btn--link:focus {
		color: #235a7c !important;
	}
	

/* ==== ghde2026-global-heading-style – frueher Inline-<style> aus inc/design/ghde2026-global-heading-style.php ==== */
	.elementor-heading-title.elementor-size-large {
		font-family: 'Fira Sans Condensed', sans-serif !important;
		font-size: 29px !important;
		font-weight: 800 !important;
		color: #1c2b3a;
	}
	.elementor-heading-title.elementor-size-large::after {
		content: '';
		display: block;
		height: 3px;
		width: 44px;
		background: #2d729b;
		margin: 10px 0 16px 0;
	}
	/* Die 3 Bild-Hintergrund-Promo-Sektionen auf der Startseite (u.a. "IN 80 KRIMIS UM DIE WELT")
	   abgerundet, passend zur restlichen "Flickity 2026"-Optik (16px wie die grossen
	   Box-Container) -- kein gemeinsames Marker-Klasse vorhanden, daher gezielt ueber die 3
	   Element-IDs auf der Startseite (Elementor-Seiten-ID 29982), statt generisch ueber
	   ".elementor-section-full_width" (das traegt sitenweit viel mehr, nicht bg-image-Sektionen).
	   Stefan, 2026-09-23. */
	.elementor-29982 .elementor-element-6f2bb970,
	.elementor-29982 .elementor-element-29b70fba,
	.elementor-29982 .elementor-element-167e6238,
	/* Sitewide-Sweep 2026-09-23: alle weiteren gefundenen Bild-Hintergrund-Sektionen
	   (Live-Pages + Elementor-Templates-Bibliothek, per DB-Scan von _elementor_data
	   gefunden), Stefan freigegeben ausser "Werbung Audible" (post_id 75984). */
	.elementor-24699 .elementor-element-349973fd,
	.elementor-28864 .elementor-element-36bef5b7,
	.elementor-28864 .elementor-element-1a5832e8,
	.elementor-30786 .elementor-element-190f2f2c,
	.elementor-41154 .elementor-element-60e1de2f,
	.elementor-45336 .elementor-element-1237b781,
	.elementor-49771 .elementor-element-6578f4a,
	.elementor-50482 .elementor-element-4ac3755,
	.elementor-63817 .elementor-element-6578f4a,
	.elementor-50140 .elementor-element-18edfa07,
	.elementor-51416 .elementor-element-1d941e8c,
	.elementor-52116 .elementor-element-3481150c,
	.elementor-52119 .elementor-element-3e5806db,
	.elementor-52576 .elementor-element-2e0b6f17,
	.elementor-52583 .elementor-element-537380d0,
	.elementor-52728 .elementor-element-42f37853,
	.elementor-53355 .elementor-element-4672af79,
	.elementor-55041 .elementor-element-69b89a9b,
	.elementor-56080 .elementor-element-27f84d7e,
	.elementor-56083 .elementor-element-41a4eb25,
	.elementor-56489 .elementor-element-c402819,
	.elementor-56737 .elementor-element-7a92f5d8,
	.elementor-57032 .elementor-element-568b13e1,
	.elementor-57035 .elementor-element-7efa2cec,
	.elementor-58738 .elementor-element-625a3629,
	.elementor-60163 .elementor-element-7d36aa01,
	.elementor-60169 .elementor-element-23f1d63c,
	.elementor-60173 .elementor-element-43ca91f4,
	.elementor-64936 .elementor-element-36c63345,
	.elementor-75874 .elementor-element-26d2dc48,
	.elementor-83233 .elementor-element-27a30fa3,
	.elementor-83338 .elementor-element-65d7cc1 {
		border-radius: 16px;
		overflow: hidden;
	}
	/* Seiten-Untertitel im Theme-Titelbereich: page.php/index.php geben ihn seit 2026-09-24 als <p> statt <h4>
	   aus (SEO: Einleitungstext ist keine Ueberschrift; 41 Seiten, u.a. Toniebox). Optik des bisherigen
	   Theme-H4 hier 1:1 nachgebaut (gemessen: Fira Sans Condensed 17px/1.4, 400, #eee, 15px oben, zentriert). */
	#page-title-pro p.progression-sub-title {
		font-family: 'Fira Sans Condensed', sans-serif; font-size: 17px; font-weight: 400; line-height: 1.4;
		color: #eeeeee; margin: 15px 0 0 0; padding: 0; text-align: center; letter-spacing: normal; text-transform: none;
	}
	/* Logo: header.php gibt es seit 2026-09-25 nur noch auf der Startseite als <h1>, sonst als <div> aus
	   (SEO: sonst zwei H1 pro Seite). Die Theme-Regeln fuer h1#logo-pro (style.css) hier 1:1 fuer div#logo-pro. */
	header#masthead-pro div#logo-pro { z-index: 55; margin: 0; padding: 0; line-height: 1; font-size: 5px; border: none; float: left; }
	.progression-studios-logo-position-right header#masthead-pro div#logo-pro,
	.progression-studios-logo-position-right div#logo-pro { float: right; margin-left: 25px; margin-right: 0; }
	body .progression-studios-logo-position-center header#masthead-pro div#logo-pro,
	body .progression-studios-logo-position-center div#logo-pro { float: none; margin: 0 auto; text-align: center; }
	body .progression-studios-logo-position-center div#logo-pro img { margin: 0 auto; }
	header#masthead-pro div#logo-pro a { display: block; }
	header#masthead-pro.progression-studios-nav-left div#logo-pro { margin-right: 30px; }
	

/* ==== ghde2026-pcbox-css – frueher Inline-<style> aus inc/boxes/podcast-box.php ==== */
	.ghde2026-pcbox, .ghde2026-pcbox *, .ghde2026-pcbox *::before, .ghde2026-pcbox *::after { box-sizing: border-box; }
	/* margin-bottom:40px wie im Original ".progression-author-container" -- Abstand zum
	   naechsten Element (Stefan, Audit nach Rollout aufgedeckt, 2026-09-23). */
	.ghde2026-pcbox { font-family: 'Arimo', sans-serif; max-width: 100%; overflow-x: hidden; margin-bottom: 40px; }
	.ghde2026-pcbox-inner {
		background: #f2f3f5; border-radius: 16px;
		padding: 32px; display: grid; grid-template-columns: 270px 1fr; column-gap: 32px;
		grid-template-areas: "side heading" "side intro" "side main";
		grid-template-rows: min-content min-content 1fr;
		align-items: start; max-width: 100%;
		overflow: hidden;
	}
	.ghde2026-pcbox-heading-wrap { grid-area: heading; }
	.ghde2026-pcbox-intro { grid-area: intro; color: #171e22; font-size: 15px; line-height: 1.5; margin: 0 0 16px 0; }
	.ghde2026-pcbox-side { grid-area: side; min-width: 0; }
	.ghde2026-pcbox-main { grid-area: main; min-width: 0; }
	.ghde2026-pcbox-badge-row { text-align: center; margin-bottom: 12px; }
	.ghde2026-pcbox-exklusiv {
		display: inline-block; background: #2d729b; color: #fff; font-size: 10px; font-weight: 800;
		letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
	}
	.ghde2026-pcbox-heading { font-family: 'Fira Sans Condensed', sans-serif; margin: 0 0 4px 0; font-size: 22px; font-weight: 800; color: #1c2b3a; }
	.ghde2026-pcbox-heading-bar { height: 3px; width: 44px; background: #2d729b; margin: 10px 0 16px 0; }
	.ghde2026-pcbox-cover-wrap{ width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 10px; }
	.ghde2026-pcbox-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
	.ghde2026-pcbox-merk { text-align: center; margin-bottom: 14px; position: relative; z-index: 2; }
	.ghde2026-pcbox-merk .simplefavorite-button { border-radius: 14px !important; transition: background .15s ease !important; opacity: 1 !important; }
	.ghde2026-pcbox-merk .simplefavorite-button:hover { background: #235a7c !important; opacity: 1 !important; }
	.ghde2026-pcbox-merk-link { margin-top: 6px; text-align: center; line-height: 1.2; }
	.ghde2026-pcbox-merk-link a, .ghde2026-pcbox-merk-link a:visited {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-weight: 300; letter-spacing: .5px; font-size: 13.5px; color: #2d729b;
		text-decoration: none; transition: color .15s ease;
	}
	.ghde2026-pcbox-merk-link a:hover { color: #235a7c; }
	.ghde2026-pcbox-price { text-align: center; margin-bottom: 14px; padding: 10px; background: #fff5f5; border-radius: 10px; }
	.ghde2026-pcbox-price-was { font-family: 'Fira Sans Condensed', sans-serif; font-size: 20px; line-height: 1.3; font-weight: 700; color: #1a1a1a; }
	.ghde2026-pcbox-price-strike { color: #c0392b; text-decoration: line-through; }
	.ghde2026-pcbox-price-now { font-size: 13.5px; color: #1a1a1a; font-weight: 400; margin-top: 2px; }
	.ghde2026-pcbox-code { text-align: center; margin-bottom: 14px; padding: 10px; background: #f7f9fa; border-radius: 10px; }
	.ghde2026-pcbox-code-repeat { background: transparent; padding: 0; margin-bottom: 20px; }
	.ghde2026-pcbox-code-label { font-size: 13.5px; line-height: 1.3; color: #1a1a1a; font-weight: 400; }
	.ghde2026-pcbox-code-value { font-family: 'Fira Sans Condensed', sans-serif; font-size: 20px; line-height: 1.3; color: #112D3B; font-weight: 700; margin-top: 2px; }
	.ghde2026-pcbox-code-value-lg { font-size: 22px; }
	.ghde2026-pcbox-steckbrief { background: #f7f9fa; border-radius: 12px; padding: 16px 20px; }
	.ghde2026-pcbox-grid { display: flex; flex-direction: column; gap: 10px; }
	.ghde2026-pcbox-k { font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase; font-size: 12.5px; letter-spacing: .5px; line-height: 1.3; color: #1a1a1a; font-weight: 300; }
	.ghde2026-pcbox-v { font-size: 13.5px; line-height: 1.3; color: #171e22; font-weight: 400; }
	.ghde2026-pcbox-v a, .ghde2026-pcbox-v a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-pcbox-v a:hover { color: #235a7c; }
	.ghde2026-pcbox-faq .ghde-faq__item summary { list-style:none; cursor:pointer; padding:12px 30px 12px 0; position:relative; font-weight:700; font-size:14.5px; line-height:1.3; color:#112D3B; }
	.ghde2026-pcbox-faq .ghde-faq__toggle { position: absolute; right: 4px; top: 9px; font-size: 20px; line-height: 1; color: #2d729b; font-weight: 400; transition: transform .2s ease; }
	.ghde2026-pcbox-faq .ghde-faq__item[open] .ghde-faq__toggle { transform: rotate(180deg); }
	.ghde2026-pcbox-faq .ghde-faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; font-size: 13px; color: #6b7680; line-height: 1.5; }
	.ghde2026-pcbox-faq .ghde-faq__a-inner { padding: 0 0 14px 0; }
	.ghde2026-pcbox-faq .ghde-faq__a a, .ghde2026-pcbox-faq .ghde-faq__a a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-pcbox-faq .ghde-faq__a a:hover { color: #235a7c; }
	/* CTA: mehrere gleichzeitige Plattform-Buttons statt einer Prioritaetskette -- daher
	   flex-wrap statt der strikten column-Aufteilung von Download/Stream. */
	.ghde2026-pcbox-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
	.ghde2026-pcbox-cta-row-rss { margin-bottom: 12px; }
	.ghde2026-pcbox-btn {
		display: inline-flex; align-items: center; gap: 10px;
		padding: 12px 22px; border-radius: 14px; background: #2d729b; min-height: 54px;
		text-decoration: none !important; transition: background .15s ease;
	}
	.ghde2026-pcbox-btn:hover { background: #235a7c; }
	.ghde2026-pcbox-btn-podimo { background: #794cf8; }
	.ghde2026-pcbox-btn-podimo:hover { background: #6339d6; }
	.ghde2026-pcbox-btn-label { font-family: 'Fira Sans Condensed', sans-serif; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; max-width: 260px; }
	.ghde2026-pcbox-btn-label i { font-size: 18px; flex-shrink: 0; }
	/* Standard-Markenblau (#2d729b) fuer die "echten" Podcast-Anbieter (Spotify/Apple/Deezer) --
	   ARD Sounds ist ein fremdes Angebot und behaelt bewusst sein eigenes Markenblau
	   (.ghde2026-pcbox-btn-ard weiter unten ueberschreibt Border/Farbe/Hover), Stefan. */
	.ghde2026-pcbox-btn-secondary {
		font-family: 'Fira Sans Condensed', sans-serif;
		display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 14px;
		min-height: 54px; border: 1.5px solid #2d729b; color: #2d729b; font-size: 15px; font-weight: 700;
		text-decoration: none !important; transition: background .15s ease, color .15s ease;
	}
	/* Icon-Groesse fehlte -- das <i> erbte sonst die 15px Button-Schrift statt der 18px, die
	   RSS-Feed/Podimo ueber .ghde2026-pcbox-btn-label i bekommen (Stefan: Apple-Logo wirkte
	   "gestaucht"). Jetzt fuer alle sekundaeren Buttons (Spotify/Apple/Deezer/ARD) einheitlich. */
	.ghde2026-pcbox-btn-secondary i { font-size: 18px; flex-shrink: 0; }
	/* fab fa-deezer ist in der auf der Seite geladenen FA-Version 5.6.3 nicht enthalten -- daher
	   stattdessen die von Stefan selbst zugeschnittene und gehostete Datei (nur Herz-Bildmarke)
	   als CSS mask-image statt <img>: so faerbt sich die Form ueber background-color genauso wie
	   die Font-Awesome-<i>-Icons daneben (Marken-Blau, im Hover Weiss), keine Grafikdaten hier
	   im Code, nur die URL-Referenz. */
	.ghde2026-pcbox-deezer-icon {
		display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
		background-color: currentColor;
		-webkit-mask-image: url('https://www.gratis-hoerspiele.de/wp-content/uploads/2026/09/icon_deezer.svg');
		mask-image: url('https://www.gratis-hoerspiele.de/wp-content/uploads/2026/09/icon_deezer.svg');
		-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
		-webkit-mask-position: center; mask-position: center;
		-webkit-mask-size: contain; mask-size: contain;
	}
	.ghde2026-pcbox-btn-secondary:hover { background: #2d729b; color: #fff; }
	.ghde2026-pcbox-btn-ard { border-color: #264b80; color: #264b80; }
	.ghde2026-pcbox-btn-ard:hover { background: #264b80; color: #fff; }
	.ghde2026-pcbox-problem-link { margin-top: 6px; text-align: center; line-height: 1.2; }
	.ghde2026-pcbox-problem-link a, .ghde2026-pcbox-problem-link a:visited {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-weight: 300; letter-spacing: .5px; font-size: 13.5px; color: #2d729b;
		text-decoration: none; transition: color .15s ease;
	}
	.ghde2026-pcbox-problem-link a:hover { color: #235a7c; }

	@media (max-width: 780px) {
		.ghde2026-pcbox-inner {
			grid-template-columns: 1fr;
			grid-template-areas: "heading" "intro" "side" "main";
			grid-template-rows: min-content min-content min-content 1fr;
			padding: 20px; row-gap: 16px;
		}
		.ghde2026-pcbox-cover-wrap{ max-width: 220px; margin-left: auto; margin-right: auto; }
		.ghde2026-pcbox-heading-bar { margin-bottom: 12px; }
	}
	.ghde2026-pcbox-v, .ghde2026-pcbox-faq .ghde-faq__a-inner, .ghde2026-pcbox-intro, .ghde2026-pcbox-faq .ghde-faq__item summary {
		overflow-wrap: break-word; word-break: break-word;
	}
	

/* ==== ghde2026-stbox-css – frueher Inline-<style> aus inc/boxes/stream-box.php ==== */
	.ghde2026-stbox, .ghde2026-stbox *, .ghde2026-stbox *::before, .ghde2026-stbox *::after { box-sizing: border-box; }
	/* margin-bottom:40px wie im Original ".progression-author-container" -- Abstand zum
	   naechsten Element (Stefan, Audit nach Rollout aufgedeckt, 2026-09-23). */
	.ghde2026-stbox { font-family: 'Arimo', sans-serif; max-width: 100%; overflow-x: hidden; margin-bottom: 40px; }
	.ghde2026-stbox-inner {
		background: #f2f3f5; border-radius: 16px;
		padding: 32px; display: grid; grid-template-columns: 270px 1fr; column-gap: 32px;
		grid-template-areas: "side heading" "side intro" "side main";
		grid-template-rows: min-content min-content 1fr;
		align-items: start; max-width: 100%;
		overflow: hidden;
	}
	.ghde2026-stbox-heading-wrap { grid-area: heading; }
	.ghde2026-stbox-intro { grid-area: intro; color: #171e22; font-size: 15px; line-height: 1.5; margin: 0 0 16px 0; }
	.ghde2026-stbox-side { grid-area: side; min-width: 0; }
	.ghde2026-stbox-main { grid-area: main; min-width: 0; }
	.ghde2026-stbox-heading { font-family: 'Fira Sans Condensed', sans-serif; margin: 0 0 4px 0; font-size: 22px; font-weight: 800; color: #1c2b3a; }
	.ghde2026-stbox-heading-bar { height: 3px; width: 44px; background: #2d729b; margin: 10px 0 16px 0; }
	.ghde2026-stbox-cover-wrap{ width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 10px; }
	.ghde2026-stbox-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
	.ghde2026-stbox-merk { text-align: center; margin-bottom: 14px; position: relative; z-index: 2; }
	.ghde2026-stbox-merk .simplefavorite-button { border-radius: 14px !important; transition: background .15s ease !important; opacity: 1 !important; }
	.ghde2026-stbox-merk .simplefavorite-button:hover { background: #235a7c !important; opacity: 1 !important; }
	.ghde2026-stbox-merk-link { margin-top: 6px; text-align: center; line-height: 1.2; }
	.ghde2026-stbox-merk-link a, .ghde2026-stbox-merk-link a:visited {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-weight: 300; letter-spacing: .5px; font-size: 13.5px; color: #2d729b;
		text-decoration: none; transition: color .15s ease;
	}
	.ghde2026-stbox-merk-link a:hover { color: #235a7c; }
	.ghde2026-stbox-price { text-align: center; margin-bottom: 14px; padding: 10px; background: #fff5f5; border-radius: 10px; }
	.ghde2026-stbox-price-was { font-family: 'Fira Sans Condensed', sans-serif; font-size: 20px; line-height: 1.3; font-weight: 700; color: #1a1a1a; }
	.ghde2026-stbox-price-strike { color: #c0392b; text-decoration: line-through; }
	.ghde2026-stbox-price-now { font-size: 13.5px; color: #1a1a1a; font-weight: 400; margin-top: 2px; }
	.ghde2026-stbox-code { text-align: center; margin-bottom: 14px; padding: 10px; background: #f7f9fa; border-radius: 10px; }
	.ghde2026-stbox-code-repeat { background: transparent; padding: 0; margin-bottom: 20px; }
	.ghde2026-stbox-code-label { font-size: 13.5px; line-height: 1.3; color: #1a1a1a; font-weight: 400; }
	.ghde2026-stbox-code-value { font-family: 'Fira Sans Condensed', sans-serif; font-size: 20px; line-height: 1.3; color: #112D3B; font-weight: 700; margin-top: 2px; }
	.ghde2026-stbox-code-value-lg { font-size: 22px; }
	.ghde2026-stbox-steckbrief { background: #f7f9fa; border-radius: 12px; padding: 16px 20px; }
	.ghde2026-stbox-grid { display: flex; flex-direction: column; gap: 10px; }
	.ghde2026-stbox-k { font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase; font-size: 12.5px; letter-spacing: .5px; line-height: 1.3; color: #1a1a1a; font-weight: 300; }
	.ghde2026-stbox-v { font-size: 13.5px; line-height: 1.3; color: #171e22; font-weight: 400; }
	.ghde2026-stbox-v a, .ghde2026-stbox-v a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-stbox-v a:hover { color: #235a7c; }
	.ghde2026-stbox-faq .ghde-faq__item summary { list-style:none; cursor:pointer; padding:12px 30px 12px 0; position:relative; font-weight:700; font-size:14.5px; line-height:1.3; color:#112D3B; }
		.ghde2026-stbox-faq .ghde-faq__toggle { position: absolute; right: 4px; top: 9px; font-size: 20px; line-height: 1; color: #2d729b; font-weight: 400; transition: transform .2s ease; }
	.ghde2026-stbox-faq .ghde-faq__item[open] .ghde-faq__toggle { transform: rotate(180deg); }
		.ghde2026-stbox-faq .ghde-faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; font-size: 13px; color: #6b7680; line-height: 1.5; }
	.ghde2026-stbox-faq .ghde-faq__a-inner { padding: 0 0 14px 0; }
	.ghde2026-stbox-faq .ghde-faq__a a, .ghde2026-stbox-faq .ghde-faq__a a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-stbox-faq .ghde-faq__a a:hover { color: #235a7c; }
	.ghde2026-stbox-cta-row { display: flex; flex-direction: column; gap: 12px; align-items: center; }
	.ghde2026-stbox-btn {
		display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		padding: 12px 24px; border-radius: 14px; background: #2d729b; min-height: 54px;
		text-decoration: none !important;
		transition: background .15s ease;
	}
	.ghde2026-stbox-btn:hover { background: #235a7c; }
	.ghde2026-stbox-btn-label { font-family: 'Fira Sans Condensed', sans-serif; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 23px; font-weight: 700; line-height: 1.2; }
	.ghde2026-stbox-btn-label i { font-size: 18px; }
	.ghde2026-stbox-btn-quelle {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-size: 12px; font-weight: 300; letter-spacing: .5px; line-height: 1.2; color: #fff;
	}
	.ghde2026-stbox-problem-link { margin-top: 6px; text-align: center; line-height: 1.2; }
	.ghde2026-stbox-problem-link a, .ghde2026-stbox-problem-link a:visited {
		font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase;
		font-weight: 300; letter-spacing: .5px; font-size: 13.5px; color: #2d729b;
		text-decoration: none; transition: color .15s ease;
	}
	.ghde2026-stbox-problem-link a:hover { color: #235a7c; }

	@media (max-width: 780px) {
		.ghde2026-stbox-inner {
			grid-template-columns: 1fr;
			grid-template-areas: "heading" "intro" "side" "main";
			grid-template-rows: min-content min-content min-content 1fr;
			padding: 20px; row-gap: 16px;
		}
		.ghde2026-stbox-cover-wrap{ max-width: 220px; margin-left: auto; margin-right: auto; }
		.ghde2026-stbox-heading-bar { margin-bottom: 12px; }
	}
	.ghde2026-stbox-v, .ghde2026-stbox-faq .ghde-faq__a-inner, .ghde2026-stbox-intro, .ghde2026-stbox-faq .ghde-faq__item summary {
		overflow-wrap: break-word; word-break: break-word;
	}
	

/* ==== ghde2026-portrait-float – frueher Inline-<style> aus inc/design/ghde2026-elementor-rhythm.php ==== */
	img.ghde-portrait-float { float: right; width: 140px !important; height: 140px !important; margin: 4px 0 12px 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(17,45,59,.2); }
	@media (max-width: 767px) { img.ghde-portrait-float { width: 96px !important; height: 96px !important; margin: 4px 0 10px 16px; } }
	

/* ==== ghde2026-flickity-wheel-scroll (ohne id) – frueher Inline-<style> aus inc/design/ghde2026-flickity-wheel-scroll.php (frueher wp_head Prio 10, sitewide; wirkt nur vor der Flickity-Initialisierung) ==== */
	/* Nachtrag 5 2026-09-24 (Stefan, bei langsamer Verbindung): Bevor Flickitys JS laeuft (siehe
	   Nachtrag oben zu "docReady"/setTimeout -- kann bei langsamer Verbindung spuerbar dauern),
	   sind die Zellen nur normale <div>-Blockelemente ohne horizontales Layout und stapeln sich
	   kurz untereinander, bevor Flickity sie in die Zeile "springen" laesst (FOUC = Flash Of
	   Unstyled Content). Fix: solange ".flickity-enabled" fehlt, per CSS schon vorab horizontal
	   anordnen (display:flex, overflow versteckt die ueberzaehligen Zellen) -- sobald Flickity
	   initialisiert, uebernimmt es mit eigener Positionierung/Transform, unsere Regel greift dann
	   nicht mehr (":not(.flickity-enabled)"). Sitenweit, nicht nur mobil -- betrifft jede
	   Verbindungsgeschwindigkeit. */
	.ghde-mfs-carousel:not(.flickity-enabled),
	.ghde-mfn-carousel:not(.flickity-enabled),
	.ghde-t10s-carousel:not(.flickity-enabled),
	.main-carousel:not(.flickity-enabled) {
		display: flex;
		overflow: hidden;
	}
	/* Nachtrag 2026-09-28 (Stefan: Kacheln hingen vor dem Start noch ineinander): Flex-Kinder duerfen sonst
	   schrumpfen -> jede Zelle behaelt schon vorab ihre endgueltige Breite + Abstand (kommt aus dem Preset). */
	.ghde-mfs-carousel:not(.flickity-enabled) > *,
	.ghde-mfn-carousel:not(.flickity-enabled) > *,
	.ghde-t10s-carousel:not(.flickity-enabled) > *,
	.main-carousel:not(.flickity-enabled) > * { flex: 0 0 auto; }
	/* Touch: Flickity bekommt nach dem Start links eine 15px-Platzhalter-Zelle (wp_footer-Skript im Modul) -> vorab gleich einruecken */
	@media (hover: none), (pointer: coarse) {
		.ghde-mfs-carousel:not(.flickity-enabled),
		.ghde-mfn-carousel:not(.flickity-enabled),
		.ghde-t10s-carousel:not(.flickity-enabled),
		.main-carousel:not(.flickity-enabled) { padding-left: 15px; }
	}
	/* Nur Desktop-Trackpad/Maus (hover:hover + pointer:fine) -- auf Touchscreens NICHT aktiv,
	   siehe Nachtrag 2026-09-24 oben (iOS-Safari-Scroll-Bug mit overflow-x:hidden auf body). */
	@media (hover: hover) and (pointer: fine) {
		html, body { overscroll-behavior-x: none; overflow-x: hidden; overflow-x: clip; } /* clip (2026-09-28): schneidet genauso ab, macht body aber nicht zum Scroll-Container -> position:sticky der Sidebar funktioniert; alte Browser nehmen hidden */
	}
	/* Touch-Geraete: kein overflow-x:hidden (iOS-Bug, siehe Nachtrag 2), stattdessen rein
	   browserseitige Gesten-Einschraenkung ohne Scroll-Container-Mechanismus. */
	@media (hover: none), (pointer: coarse) {
		html, body { touch-action: pan-y pinch-zoom; }
		/* Wurzel-Fix (Nachtrag 3): Flickitys Prev/Next-Pfeile ragen 25px ueber den Carousel-Rand
		   hinaus (Theme-CSS) und erzeugen dadurch echten horizontalen Dokument-Overflow auf Mobile.
		   Auf Touch-Geraeten sitenweit ausblenden -- man zieht/wischt ohnehin statt zu klicken. */
		.flickity-prev-next-button { display: none !important; }
	}
	/* Nachtrag 4: Cover-Carousel auf Mobile komplett randlos -- der linke Anfangs-Abstand kommt
	   jetzt ueber eine echte Platzhalter-Zelle (siehe wp_footer-Skript unten), nicht mehr per
	   Container-Padding, damit man in BEIDE Richtungen bis zum echten Rand scrollen kann. */
	@media (max-width: 767px) {
		.ghde-mfs-carousel, .ghde-mfn-carousel, .ghde-t10s-carousel, .main-carousel {
			width: 100vw;
			margin-left: calc( -50vw + 50% );
			margin-right: calc( -50vw + 50% );
		}
	}
	

/* ==== ghde2026-browse-css – frueher Inline-<style> aus inc/pages/ghde2026-browse-pages.php (frueher nur auf /genres/ und /themen-und-sammlungen/; Selektoren seitenspezifisch) ==== */
	.ghde2026-brw{margin:0 0 40px 0}
	.ghde2026-brw-lead{color:#171e22;font-size:16px;line-height:1.6;margin:0 0 24px 0}
	.ghde2026-brw-heading{font-family:'Fira Sans Condensed',sans-serif;font-weight:800;font-size:22px;line-height:1.2;color:#1c2b3a;margin:40px 0 4px 0;text-transform:none;letter-spacing:0}
	.ghde2026-brw-heading-bar{height:3px;width:44px;background:#2d729b;margin:10px 0 16px 0}
	.ghde2026-brw-sub{color:#6b7680;font-size:14.5px;line-height:1.5;margin:-4px 0 18px 0}
	.ghde2026-brw a,.ghde2026-brw a:visited{color:#2d729b;text-decoration:none;transition:color .15s ease}
	.ghde2026-brw a:hover{color:#235a7c}

	.ghde2026-brw-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px 0}
	.ghde2026-brw-toc a,.ghde2026-brw-toc a:visited{font-family:'Fira Sans Condensed',sans-serif;font-size:15px;font-weight:700;color:#2d729b;border:1.5px solid #2d729b;border-radius:14px;padding:6px 14px;transition:background .15s ease,color .15s ease}
	.ghde2026-brw-toc a:hover{background:#2d729b;color:#fff}

	/* Kacheln: Flickity-2026-Cover (modern-flickity-preset.php) */
	.ghde2026-brw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
	.ghde2026-brw-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
	.ghde2026-brw-tile{margin:0;padding:0}
	.ghde2026-brw-tile::before{content:none!important}
	.ghde2026-brw-cover{display:block}
	.ghde2026-brw-square{position:relative;display:block;width:100%;padding-top:100%;overflow:hidden;background:#e5e9eb}
	.ghde2026-brw-square img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;object-fit:cover;display:block;margin:0;transition:transform .35s ease;will-change:transform}
	.ghde2026-brw-cover:hover img{transform:scale(1.05)}
	.ghde2026-brw-gradient{position:absolute;left:0;right:0;bottom:0;height:65%;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,0) 100%);z-index:2;pointer-events:none}
	.ghde2026-brw-title{position:absolute;left:0;right:0;bottom:0;padding:0 12px 10px;color:#fff;font-family:'Fira Sans Condensed',Arial,Helvetica,sans-serif;font-weight:700;font-size:19px;line-height:1.15;z-index:3}
	.ghde2026-brw-grid--4 .ghde2026-brw-title{font-size:16px}
	.ghde2026-brw-teaser{margin:8px 2px 0;font-size:13.5px;line-height:1.45;color:#6b7680}

	/* Sammlungs-Chips */
	.ghde2026-brw-group{background:#f2f3f5;border-radius:16px;padding:22px 24px;margin:0 0 16px 0}
	.ghde2026-brw-group h3{font-family:'Fira Sans Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:#1c2b3a;margin:0 0 12px 0}
	.ghde2026-brw-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
	.ghde2026-brw-chips li{margin:0;padding:0}
	.ghde2026-brw-chips li::before{content:none!important}
	.ghde2026-brw .ghde2026-brw-chips a,.ghde2026-brw .ghde2026-brw-chips a:visited{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid transparent;border-radius:14px;padding:6px 12px;font-family:'Fira Sans Condensed',sans-serif;font-size:15px;font-weight:600;color:#1c2b3a;box-shadow:0 1px 3px rgba(17,45,59,.1);transition:border-color .15s ease}
	.ghde2026-brw .ghde2026-brw-chips a:hover{border-color:#2d729b;color:#1c2b3a}
	.ghde2026-brw-chips a span{font-size:12px;font-weight:700;color:#2d729b}

	/* Mehr entdecken */
	.ghde2026-brw-more{list-style:none;margin:0 0 32px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.ghde2026-brw-more li{margin:0;padding:0}
	.ghde2026-brw-more li::before{content:none!important}
	.ghde2026-brw .ghde2026-brw-more a{display:flex;align-items:center;gap:14px;background:#f2f3f5;border:2px solid transparent;border-radius:14px;padding:14px 18px;transition:border-color .15s ease}
	.ghde2026-brw .ghde2026-brw-more a:hover{border-color:#2d729b}
	.ghde2026-brw-more i{font-size:22px;color:#2d729b;width:26px;text-align:center}
	.ghde2026-brw-more strong{display:block;font-family:'Fira Sans Condensed',sans-serif;font-size:17px;font-weight:700;color:#1c2b3a;line-height:1.2}
	.ghde2026-brw-more small{display:block;font-size:13px;color:#6b7680;line-height:1.3}

	@media (max-width:1023px){.ghde2026-brw-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
	@media (max-width:767px){
		.ghde2026-brw-grid,.ghde2026-brw-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
		.ghde2026-brw-title{font-size:16px;padding:0 10px 8px}
		.ghde2026-brw-teaser{font-size:13px}
		.ghde2026-brw-more{grid-template-columns:1fr}
		.ghde2026-brw-group{padding:18px}
	}
	

/* ==== ghde2026-faqpage-css – frueher Inline-<style> aus inc/pages/ghde2026-faq-page.php (frueher nur auf /faq/) ==== */
	.ghde2026-faqpage { max-width: 820px; margin: 0 0 40px 0; }
	.ghde2026-faqpage-meta { font-family: 'Fira Sans Condensed', sans-serif; text-transform: uppercase; font-size: 12.5px; letter-spacing: .5px; font-weight: 300; color: #1a1a1a; margin: 0 0 10px 0; }
	.ghde2026-faqpage-lead { color: #171e22; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0; }
	.ghde2026-faqpage-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px 0; }
	.ghde2026-faqpage-toc a, .ghde2026-faqpage-toc a:visited {
		font-family: 'Fira Sans Condensed', sans-serif; font-size: 15px; font-weight: 700; color: #2d729b;
		border: 1.5px solid #2d729b; border-radius: 14px; padding: 6px 14px; text-decoration: none;
		transition: background .15s ease, color .15s ease;
	}
	.ghde2026-faqpage-toc a:hover { background: #2d729b; color: #fff; }
	.ghde2026-faqpage-section { background: #f2f3f5; border-radius: 16px; padding: 32px; margin: 0 0 24px 0; }
	.ghde2026-faqpage-heading { font-family: 'Fira Sans Condensed', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; color: #1c2b3a; margin: 0 0 4px 0; }
	.ghde2026-faqpage-heading-bar { height: 3px; width: 44px; background: #2d729b; margin: 10px 0 16px 0; }
	.ghde2026-faqpage-faq { border-top: 1px solid #e5e9eb; }
	.ghde2026-faqpage-faq .ghde-faq__item { border-bottom: 1px solid #e5e9eb; }
	.ghde2026-faqpage-faq .ghde-faq__item summary {
		list-style: none; cursor: pointer; padding: 14px 30px 14px 0; position: relative;
		font-weight: 700; font-size: 16px; line-height: 1.35; color: #112D3B;
	}
	.ghde2026-faqpage-faq .ghde-faq__item summary::-webkit-details-marker { display: none; }
	.ghde2026-faqpage-faq .ghde-faq__toggle { position: absolute; right: 4px; top: 12px; font-size: 20px; line-height: 1; color: #2d729b; font-weight: 400; }
	.ghde2026-faqpage-faq .ghde-faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; font-size: 15px; color: #6b7680; line-height: 1.6; }
	.ghde2026-faqpage-faq .ghde-faq__a-inner { padding: 0 0 16px 0; }
	.ghde2026-faqpage-faq .ghde-faq__a ul { margin: 0 0 8px 18px; padding: 0; }
	.ghde2026-faqpage-faq .ghde-faq__a li { margin: 0 0 4px 0; }
	.ghde2026-faqpage-faq .ghde-faq__a a, .ghde2026-faqpage-faq .ghde-faq__a a:visited,
	.ghde2026-faqpage-contact a, .ghde2026-faqpage-contact a:visited { color: #2d729b; text-decoration: none; transition: color .15s ease; }
	.ghde2026-faqpage-faq .ghde-faq__a a:hover, .ghde2026-faqpage-contact a:hover { color: #235a7c; }
	.ghde2026-faqpage-contact { color: #171e22; font-size: 16px; margin: 8px 0 0 0; }
	@media (max-width: 780px) {
		.ghde2026-faqpage-section { padding: 20px; }
	}
	

/* ==== ghde-top10-css – frueher Inline-<style> aus inc/w4/top10-shortcode.php (frueher im Seiteninhalt beim Shortcode [top10]) ==== */
    .ghde-top10-list{display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;padding:0!important}
    .ghde-top10-row{display:flex!important;align-items:flex-start;gap:24px!important;padding:28px 0!important;margin:0!important;border-bottom:1px solid #eee}
    .ghde-top10-row:first-child{padding-top:0!important}
    .ghde-top10-row:last-child{border-bottom:none}
    .ghde-top10-rankcover{position:relative;flex:0 0 335px;width:335px;height:240px;margin:0!important;padding:0!important}
    .ghde-top10-rank{font-family:"Fira Sans Condensed",Arial,Helvetica,sans-serif;font-weight:800;font-size:228px;line-height:1;color:#2d729b;position:absolute;right:calc(240px - 25px);top:50%;transform:translateY(-50%);white-space:nowrap;margin:0}
    .ghde-top10-rankcover.two-digit .ghde-top10-rank{font-family:"Fira Sans Condensed",Arial,Helvetica,sans-serif;letter-spacing:-0.05em;right:186px}
    .ghde-top10-cover{position:absolute;z-index:2;right:0;top:50%;transform:translateY(-50%);display:block;width:240px;height:240px;overflow:hidden;background:#f2f2f2;margin:0!important}
    /* will-change:transform + Hover-Zoom wie im Flickity-Slider (modern-flickity-preset.php) —
       Bild waechst 5% innerhalb des bestehenden overflow:hidden-Rahmens, kein Breakpoint-Filter,
       darf auch mobil per Touch passieren. */
    .ghde-top10-cover img{width:100%;height:100%;object-fit:cover;display:block;margin:0!important;transition:transform .35s ease;will-change:transform}
    .ghde-top10-cover:hover img{transform:scale(1.05)}
    /* Badge jetzt auf dem Cover selbst statt neben dem Titel — Position/Farbe 1:1 vom
       Flickity-Slider uebernommen (oben rechts, Marken-Hellblau halbtransparent), da hier wie
       dort auf einem Foto sitzend statt auf weissem Grund. */
    .ghde-top10-meta{flex:1 1 auto;min-width:0;padding-top:4px;margin:0!important}
    .ghde-top10-meta h3{font-family:"Fira Sans Condensed",Arial,Helvetica,sans-serif;margin:0 0 8px!important;font-size:19px;line-height:1.3;font-weight:700;color:#1c2b3a}
    .ghde-top10-meta h3 a{color:inherit;text-decoration:none}
    .ghde-top10-meta h3 a:hover{color:#2d729b}
    .ghde-top10-desc{margin:0 0 14px!important;font-size:15px;line-height:1.6;color:#444;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
    .ghde-top10-meta .button{display:inline-flex;align-items:center;margin:0!important}
    .ghde-top10-meta .button i{padding-right:10px}
    @media (max-width:560px){
      /* Bewusst OHNE flex-direction:column + gap — nutzt stattdessen normalen Blockfluss mit
         margin-bottom. flexbox "gap" ist relativ neu und die Unterstuetzung/Konsistenz
         zwischen Browsern/Versionen war hier nicht verlaesslich; margin ist die zuverlaessigste,
         am laengsten unterstuetzte Variante. */
      .ghde-top10-row{display:block!important;padding:24px 0!important}
      .ghde-top10-rankcover{display:block;width:295px;height:210px;margin:0 0 24px 0!important}
      .ghde-top10-rank{font-size:200px;right:calc(210px - 22px)}
      .ghde-top10-rankcover.two-digit .ghde-top10-rank{right:163px}
      .ghde-top10-cover{width:210px;height:210px}
      .ghde-top10-meta{display:block;padding-top:0!important;width:100%}
    }
    @media (max-width:400px){
      .ghde-top10-rankcover{width:240px;height:170px}
      .ghde-top10-rank{font-size:162px;right:calc(170px - 18px)}
      .ghde-top10-rankcover.two-digit .ghde-top10-rank{right:132px}
      .ghde-top10-cover{width:170px;height:170px}
    }

/* ==== ghde2026-archive-heading – Chip ueber dem Archivtitel (Phase 2, Design-Punkt 1, 2026-09-27, Variante B „Marke“) ==== */
.ghde-arch-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ghde-arch-chip{display:inline-flex;align-items:center;gap:7px;font-family:'Fira Sans Condensed',sans-serif;font-weight:500;font-size:13px;letter-spacing:.6px;text-transform:uppercase;line-height:1;color:#fff;padding:8px 14px;border-radius:999px;background:#2d729b;box-shadow:0 2px 8px rgba(0,0,0,.25);text-decoration:none}
a.ghde-arch-chip{transition:background-color .15s ease}
a.ghde-arch-chip:hover,a.ghde-arch-chip:focus{background:#235a7c;color:#fff}
.ghde-arch-chip i{font-size:12px}
@media (max-width:767px){.ghde-arch-chip{font-size:12px;padding:7px 12px}.ghde-arch-chips{margin-bottom:10px}}
/* Strich unter dem Archivtitel wie auf der Einzelseite, im Verhaeltnis zur groesseren Schrift skaliert
   (Einzelseite 32px -> 44x3, Archiv 42px -> 58x4; mobil 26px -> 44x3, Archiv 32px -> 54x4), links unter dem Titelanfang */
body.archive #page-title-pro h1.page-title::after{content:'';display:block;position:static;left:auto;right:auto;bottom:auto;height:4px;width:58px;background:#2d729b;margin:5px 0 0} /* Luecke Text->Strich ~15px wie Einzelseite (gemessen), links buendig unter dem Titelanfang (Stefan); Theme hat hier ein eigenes, absolut positioniertes ::after -> Position zuruecksetzen */
@media (max-width:767px){body.archive #page-title-pro h1.page-title::after{width:54px;margin-top:7px}}

/* ==== ghde2026-single-titlebar – Titelzeile Einzelseite (Phase 2, Design-Punkt 2, 2026-09-27, V2 „gestuft“) ==== */
.ghde-sbar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:0 0 14px}
.ghde-sbar-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ghde-sbar-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ghde-sbar-meta--desk{margin-left:auto}
.ghde-sbar-meta--mob{display:none}
.ghde-sbar-meta--mob.ghde-sbar-meta--always{display:flex;margin:14px 0 0} /* Magazin: auch Desktop unter dem Titel */
.ghde-schip,.ghde-smeta{display:inline-flex;align-items:center;gap:7px;font-family:'Fira Sans Condensed',sans-serif;font-weight:500;font-size:13px;letter-spacing:.6px;text-transform:uppercase;line-height:1;padding:8px 14px;border-radius:999px;text-decoration:none;white-space:nowrap}
.ghde-schip i,.ghde-smeta i{font-size:12px}
.ghde-schip{color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.7);transition:background-color .15s ease,border-color .15s ease}
a.ghde-schip:hover,a.ghde-schip:focus{background:#2d729b;border-color:#2d729b;color:#fff}
.ghde-schip--key{background:#2d729b;border-color:#2d729b;box-shadow:0 2px 8px rgba(0,0,0,.25)}
a.ghde-schip--key:hover,a.ghde-schip--key:focus{background:#235a7c;border-color:#235a7c}
.ghde-schip--static{cursor:default}
.ghde-schip--toggle{display:none;cursor:pointer;font-family:'Fira Sans Condensed',sans-serif;border-style:dashed;text-transform:none;letter-spacing:.2px}
.ghde-schip--toggle:hover,.ghde-schip--toggle:focus{background:rgba(255,255,255,.15)}
.ghde-sbar-chips.is-opening .ghde-schip--more{animation:ghdeSchipIn .35s ease both}
@keyframes ghdeSchipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ghde-smeta{color:#fff;background:rgba(22,56,76,.6);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-transform:none;letter-spacing:.2px;font-size:13.5px}
a.ghde-smeta:hover,a.ghde-smeta:focus{background:rgba(22,56,76,.95);color:#fff}
/* Strich unter dem Beitragstitel wie unter den 2026-Ueberschriften (44x3, #2d729b) */
#blog-post-title-meta-container h1.blog-page-title::after{content:'';display:block;height:3px;width:44px;background:#2d729b;margin:7px 0 0} /* 15px Grundlinie->Strich wie Archiv (gemessen, Stefan 27.09.: war optisch zu weit unten) */
@media (max-width:767px){
 .ghde-sbar{margin-bottom:10px}
 .ghde-sbar-meta--desk{display:none}
 .ghde-sbar-meta--mob{display:flex;margin:14px 0 0}
 .ghde-schip,.ghde-smeta{font-size:12px;padding:7px 12px}
 .ghde-schip--more{display:none}
 .ghde-sbar-chips.has-more .ghde-schip--toggle{display:inline-flex} /* nur wenn das Skript kürzen muss (dritte Zeile) */
 .ghde-sbar-chips.is-open .ghde-schip--more{display:inline-flex}
 .ghde-sbar-chips.is-open .ghde-schip--toggle{display:none}
 #blog-post-title-meta-container h1.blog-page-title::after{margin-top:6px}
}

/* ==== ghde2026-cover-badge – EINE Badge-Pille fuer alle Cover (2026-09-27, Stefan: Variante B „Glas dunkel“ in Logo-Navy #16384c, 60 % deckend – Stefan 27.09.) ====
   Gilt fuer: W4-Karussells (mfs, t10s), Archiv-Grid/Finder/404/Aehnliche (Theme-Overlay), [top10]-Liste, Magazin-Karten
   (ghde-card__badge, HTML im Artikel), Stoebern-Kacheln (Anzahl). Frueher 6 Einzelregeln, jetzt nur noch hier aendern.
   Gleiche Farbe fuer alle Typen, nur das Icon wechselt. Glas-Familie = Information auf Bildern (auch Meta-Pillen im Titel). */
.ghde-mfs-badge,.ghde-t10s-badge,.ghde-top10-badge,.ghde-card__badge,.ghde2026-brw-badge{position:absolute;top:8px;right:8px;z-index:4;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:'Fira Sans Condensed',Arial,Helvetica,sans-serif;font-weight:500;font-size:11px;letter-spacing:.6px;text-transform:uppercase;line-height:1;color:#fff;padding:5px 10px;border-radius:999px;background:rgba(22,56,76,.6);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ghde-mfs-badge i,.ghde-t10s-badge i,.ghde-top10-badge i,.ghde-card__badge i,.ghde2026-brw-badge i{margin:0;font-size:10px}
.progression-studios-feaured-image .overlay-blog-meta-category-list[style*="right:5px"]:not([style*="opacity"]){top:8px!important;right:8px!important;z-index:4!important;display:inline-flex!important;align-items:center;padding:5px 10px!important;border-radius:999px!important;background:rgba(22,56,76,.6)!important;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);line-height:1!important}
.progression-studios-feaured-image .overlay-blog-meta-category-list[style*="right:5px"]:not([style*="opacity"]) span{display:inline-flex!important;align-items:center;gap:5px;font-family:'Fira Sans Condensed',Arial,Helvetica,sans-serif;font-size:11px!important;font-weight:500!important;letter-spacing:.6px!important;text-transform:uppercase;color:#fff;border-bottom:0!important;margin:0!important;padding:0!important;line-height:1!important}
.progression-studios-feaured-image .overlay-blog-meta-category-list[style*="right:5px"]:not([style*="opacity"]) i{margin:0;font-size:10px}

/* ==== ghde2026-cover-stufen – Radius + Schatten aller Cover zentral (2026-09-27, Stefan: Cover-Plan) ====
   Frueher in jeder Stelle einzeln (W4-Vorlagen, Archiv-Grid, Merkliste, Stoebern, Top-10-Liste, Magazin, Boxen).
   Nur hier aendern. Der Cue-Player (mu-plugin) hat dieselben Hero-Werte in seiner eigenen Datei (.ghde2026-cover). */
/* Kachel: kleine Cover in Karussells und Rastern */
.ghde-mfs-square,.ghde-mfn-square,.ghde-t10s-square,.progression-studios-default-blog-overlay,.ghde-fav-cover,.ghde2026-brw-square{border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.24)}
/* Liste: grosse 240px-Cover in Top-10-Liste und Magazin-Karten */
.ghde-top10-cover,.ghde-card__cover{border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.16)}
/* Hero: grosse Einzel-Cover in den Boxen, identisch zum Cue-Player-Cover */
.ghde2026-dlbox-cover-wrap,.ghde2026-stbox-cover-wrap,.ghde2026-pcbox-cover-wrap,.ghde2026-arbox-cover-wrap{border-radius:16px;box-shadow:0 10px 24px rgba(17,45,59,.22)}

/* ==== ghde2026-player-pills – „Inhaltsangabe“/„Download-Infos“ IN der Player-Karte (Design-Punkt 2, Stefan 27.09.) ====
   Desktop: Die Pillenzeile (h6.ghde2026-scroll-bar, steht im Template direkt VOR der Karte) wird im Textfluss per
   Aussenabstand in die Karte geschoben: oben rechts auf Hoehe des Pop-up-Knopfs (14px), im Stil des Pop-up-Knopfs.
   Kein position:absolute, weil oberhalb unterschiedlich hohe Anzeigen stehen. Gilt nur, wenn direkt eine Karte folgt:
   Cue-Player (.cue-playlist-container) oder nachgebaute Karte (.ghde2026-noplay-card, dazwischen ein leeres <p>).
   Mobil + Seiten ohne Karte (Stream-Embeds, Deals) unveraendert. Karte bleibt an ihrer Position (vorher 29px Zeile + 8px Abstand = 37px). */
@media (min-width:768px){
 .ghde2026-scroll-bar:has(+ .cue-playlist-container),
 .ghde2026-scroll-bar:has(+ .ghde2026-noplay-card),
 .ghde2026-scroll-bar:has(+ p + .ghde2026-noplay-card){position:relative;z-index:6;display:flex;justify-content:flex-end;gap:6px;height:30px;margin:51px 0 -44px 0!important;padding-right:14px;line-height:1;pointer-events:none}
 .ghde2026-scroll-bar:has(+ .cue-playlist-container){padding-right:52px} /* Platz fuer den Pop-up-Knopf (30px + 8px Abstand) */
 .ghde2026-scroll-bar:is(:has(+ .cue-playlist-container),:has(+ .ghde2026-noplay-card),:has(+ p + .ghde2026-noplay-card)) small{margin:0;display:block;pointer-events:auto}
 .ghde2026-scroll-bar:is(:has(+ .cue-playlist-container),:has(+ .ghde2026-noplay-card),:has(+ p + .ghde2026-noplay-card)) .ghde2026-scroll-pill{background:rgba(17,45,59,.06)!important;box-shadow:none!important;color:#2d729b!important;height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 12px!important;font-size:12px;line-height:1}
 .ghde2026-scroll-bar:is(:has(+ .cue-playlist-container),:has(+ .ghde2026-noplay-card),:has(+ p + .ghde2026-noplay-card)) .ghde2026-scroll-pill:hover{background:#2d729b!important;color:#fff!important}
}
/* Popup-Knopf im Cue-Player im gleichen Blau wie die Pillen daneben (Stefan, 2026-09-27) */
.cue-playlist .ghde2026-popup-btn{color:#2d729b}
.cue-playlist .ghde2026-popup-btn:hover{background:#2d729b;color:#fff}
/* YouTube-Hinweis direkt unter einem eingebetteten Video: das -12px-Margin der Zeile (gedacht fuer den
   Abstand unter dem Player) liess sie in das Video ragen (Stefan, 2026-09-27) */
.fluid-width-video-wrapper + .ghde2026-youtube-cta{margin-top:16px}
/* Direkt eingebettete YouTube-Videos wie die Odesli-/Spotify-Einbettung: 16px rund + Karten-Schatten (Stefan, 2026-09-27) */
.single-post .fluid-width-video-wrapper{border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(17,45,59,.14)}
/* Pillen über extern eingebundenen Playern (Odesli, Spotify, YouTube direkt) – Variante A „helles Glas“
   (Stefan, 2026-09-27): gleiche Form wie die Pillen im Player (30px, 12px, kein Schatten), auf dem Titelfoto */
.ghde2026-scroll-bar:not(:has(+ .cue-playlist-container)):not(:has(+ .ghde2026-noplay-card)):not(:has(+ p + .ghde2026-noplay-card)) .ghde2026-scroll-pill{height:30px;display:inline-flex!important;align-items:center;gap:6px;padding:0 12px!important;font-size:12px;line-height:1;box-shadow:none!important;background:rgba(255,255,255,.85)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.5);color:#2d729b!important}
.ghde2026-scroll-bar:not(:has(+ .cue-playlist-container)):not(:has(+ .ghde2026-noplay-card)):not(:has(+ p + .ghde2026-noplay-card)) .ghde2026-scroll-pill:hover{background:#2d729b!important;border-color:#2d729b;color:#fff!important}
/* Mobil stehen auch die Pillen der Player-/Karten-Seiten außen auf dem Titelfoto -> gleicher Glas-Stil wie oben (Stefan, 2026-09-27) */
@media (max-width:767px){
 .ghde2026-scroll-bar .ghde2026-scroll-pill{height:30px;display:inline-flex!important;align-items:center;gap:6px;padding:0 12px!important;font-size:12px;line-height:1;box-shadow:none!important;background:rgba(255,255,255,.85)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.5);color:#2d729b!important}
 .ghde2026-scroll-bar .ghde2026-scroll-pill:hover{background:#2d729b!important;border-color:#2d729b;color:#fff!important}
}

/* ==== ghde-callout – Tipp-/Anleitungs-Kasten mit Elementor-Bordmitteln (ersetzt Element Pack „Call-out“, 2026-09-27) ====
   Im Editor: Innere Sektion mit CSS-Klasse „ghde-callout“, links Widget „Icon-Box“ (Icon, Titel, Beschreibung, Link),
   rechts Widget „Button“. Aussehen wie der bisherige Kasten auf der Toniebox-Seite (Flickity-2026-Stil). */
.elementor-section.ghde-callout{background:linear-gradient(135deg,#eef5f9 0%,#f7fafc 100%);border:1px solid #dbe8f0;border-radius:16px;padding:28px 32px;overflow:hidden}
.ghde-callout > .elementor-container{align-items:center;gap:32px;flex-wrap:nowrap}
.ghde-callout > .elementor-container > .elementor-column{width:auto!important}
.ghde-callout > .elementor-container > .elementor-column:first-child{flex:1 1 auto;min-width:0}
.ghde-callout > .elementor-container > .elementor-column:last-child{flex:0 0 auto}
.ghde-callout .elementor-widget-wrap{padding:0!important}
.ghde-callout .elementor-widget:not(:last-child){margin-bottom:0}
.ghde-callout .elementor-icon-box-wrapper{display:grid!important;grid-template-columns:64px minmax(0,1fr);gap:0 20px!important;align-items:start!important;text-align:left!important} /* Elementor setzt je Element gap:15px -> ueberschreiben */
.ghde-callout .elementor-icon-box-icon{grid-column:1;grid-row:1 / span 2;margin:0!important;line-height:0}
.ghde-callout .elementor-icon{width:64px;height:64px;border-radius:16px;background:#2d729b;color:#fff!important;fill:#fff!important;font-size:26px!important;display:grid!important;place-items:center;box-shadow:0 6px 16px rgba(45,114,155,.28)}
.ghde-callout .elementor-icon i,.ghde-callout .elementor-icon svg{width:26px;height:26px;font-size:26px;line-height:1;color:#fff;fill:#fff}
.ghde-callout .elementor-icon-box-content{display:contents}
.ghde-callout .elementor-icon-box-title{grid-column:2;grid-row:1;margin:0!important;color:#1c2b3a!important;text-transform:none!important;font:700 24px/1.2 'Fira Sans Condensed',sans-serif!important}
.ghde-callout .elementor-icon-box-title a{color:inherit!important}
.ghde-callout .elementor-icon-box-title::after{content:'';display:block;height:3px;width:44px;background:#2d729b;margin:7px 0 0}
.ghde-callout .elementor-icon-box-description{grid-column:2;grid-row:2;margin:14px 0 0!important;color:#171e22!important;font:400 14.5px/1.55 'Arimo',sans-serif!important}
.ghde-callout .elementor-button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 24px!important;border-radius:14px!important;background:#2d729b!important;color:#fff!important;font:500 20px/1 'Fira Sans Condensed',sans-serif!important;white-space:nowrap;box-shadow:none!important;transition:background .15s ease}
.ghde-callout .elementor-button:hover,.ghde-callout .elementor-button:focus{background:#235a7c!important;color:#fff!important}
@media (max-width:767px){
 .elementor-section.ghde-callout{padding:20px}
 .ghde-callout > .elementor-container{flex-wrap:wrap;gap:20px}
 .ghde-callout > .elementor-container > .elementor-column{width:100%!important;flex:1 1 100%!important}
 .ghde-callout .elementor-icon-box-wrapper{grid-template-columns:48px minmax(0,1fr);gap:0 14px!important;align-items:center!important}
 .ghde-callout .elementor-icon-box-icon{grid-row:1}
 .ghde-callout .elementor-icon{width:48px;height:48px;border-radius:12px}
 .ghde-callout .elementor-icon i,.ghde-callout .elementor-icon svg{width:20px;height:20px;font-size:20px}
 .ghde-callout .elementor-icon-box-title{font-size:20px!important}
 .ghde-callout .elementor-icon-box-description{grid-column:1 / -1}
 .ghde-callout .elementor-widget-button .elementor-button{width:100%}
}

/* ==== ghde-feature – Hervorhebungs-Karte mit Elementor-Bordmitteln (ersetzt Happy Addons „Card“, 2026-09-27) ====
   Im Editor: Innere Sektion mit CSS-Klasse „ghde-feature“; links Widget „Bild“ (mit Link), rechts „Überschrift“ mit
   Klasse „ghde-feature-kicker“ (kleines Label, z. B. „Tipp der Woche“), „Überschrift“ H2 (Titel), „Text-Editor“, „Button“.
   Optik wie die bisherigen Karten „Tipp der Woche“/„Werbefrei“ (Flickity-2026: weiß, Radius 16, Cue-Player-Schatten). */
.elementor-top-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .ghde-feature) > .elementor-container > .elementor-column:not(:has(.elementor-widget)){display:none}
.elementor-top-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .ghde-feature) > .elementor-container > .elementor-column:has(.ghde-feature){width:100%!important;max-width:1040px;margin:0 auto}
.elementor-column:has(> .elementor-widget-wrap > .ghde-feature) > .elementor-widget-wrap{padding:0!important}
.elementor-section.ghde-feature{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(17,45,59,.14);padding:28px}
.ghde-feature > .elementor-container{display:grid!important;grid-template-columns:300px minmax(0,1fr);column-gap:36px;align-items:center}
.ghde-feature > .elementor-container > .elementor-column{width:auto!important;min-width:0}
.ghde-feature .elementor-widget-wrap{padding:0!important;display:block!important}
.ghde-feature .elementor-widget:not(:last-child){margin-bottom:0!important}
.ghde-feature .elementor-widget-image .elementor-widget-container{border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(17,45,59,.2);line-height:0}
.ghde-feature .elementor-widget-image a{display:block}
.ghde-feature .elementor-widget-image img{width:100%!important;height:auto!important;max-width:none!important;aspect-ratio:1;object-fit:cover;border-radius:0!important;display:block;transition:transform .35s ease}
.ghde-feature .elementor-widget-image a:hover img{transform:scale(1.05)}
.ghde-feature .ghde-feature-kicker .elementor-heading-title{display:inline-block;margin:0 0 12px!important;padding:5px 10px;border-radius:999px;background:#e8f1f7;color:#2d729b!important;font:700 12.5px/1 'Fira Sans Condensed',sans-serif!important;letter-spacing:.6px;text-transform:uppercase!important}
.ghde-feature .ghde-feature-title .elementor-heading-title{font:700 26px/1.15 'Fira Sans Condensed',sans-serif!important;color:#1c2b3a!important;text-transform:none!important;margin:0 0 4px!important}
.ghde-feature .ghde-feature-title .elementor-heading-title a{color:inherit!important}
.ghde-feature .ghde-feature-title .elementor-heading-title::after{content:'';display:block;width:44px;height:3px;background:#2d729b;margin:8px 0 16px} /* 15px Grundlinie->Strich wie Einzelseite/Archiv (gemessen) */
.ghde-feature .elementor-widget-text-editor,.ghde-feature .elementor-widget-text-editor p{font-family:'Arimo',sans-serif!important;font-size:14.5px!important;line-height:1.6!important;color:#171e22!important;margin:0!important}
.ghde-feature .elementor-button{display:inline-flex;align-items:center;gap:10px;margin-top:22px;min-height:54px;padding:12px 26px!important;border-radius:14px!important;background:#2d729b!important;color:#fff!important;font:500 21px/1 'Fira Sans Condensed',sans-serif!important;text-transform:none!important;border:0!important;box-shadow:none!important;transition:background .15s ease}
.ghde-feature .elementor-button:hover,.ghde-feature .elementor-button:focus{background:#235a7c!important;color:#fff!important}
.ghde-feature .elementor-button-content-wrapper{gap:10px;align-items:center}
@media (max-width:767px){
 .elementor-section.ghde-feature{padding:18px}
 .ghde-feature > .elementor-container{grid-template-columns:1fr;row-gap:20px}
 .ghde-feature .ghde-feature-title .elementor-heading-title{font-size:22px!important}
 .ghde-feature .elementor-widget-button .elementor-button{width:100%;justify-content:center;font-size:20px!important}
}
/* ghde-feature/ghde-callout: Die sitewide Regel „.elementor-widget-button:hover .elementor-widget-container“ (Fuellfarbe
   sitzt dort auf dem Container) wuerde hier die ganze Spaltenbreite einfaerben – in den Komponenten traegt der Button selbst
   die Farbe, der Container bleibt durchsichtig (Stefan, 2026-09-27). */
:is(.ghde-feature,.ghde-callout) .elementor-widget-button .elementor-widget-container,
:is(.ghde-feature,.ghde-callout) .elementor-widget-button:hover .elementor-widget-container{background:transparent!important;border-radius:0!important;overflow:visible}
/* ghde-feature--klein: kompakte Variante (Bild oben, Text darunter) fuer mehrere Karten nebeneinander, z. B. drei Tipps
   auf der Sherlock-Holmes-Seite (ersetzt Boosted-Flip-Boxen, 2026-09-27). Im Editor zusaetzlich Klasse „ghde-feature--klein“. */
.elementor-section.ghde-feature.ghde-feature--klein{padding:18px;height:100%}
.ghde-feature--klein > .elementor-container{grid-template-columns:1fr;grid-template-rows:auto 1fr;row-gap:18px;align-items:stretch;align-content:stretch;height:100%}
.ghde-feature--klein > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap{display:flex!important;flex-direction:column;align-items:flex-start;height:100%}
.ghde-feature--klein > .elementor-container > .elementor-column{align-self:stretch!important;height:auto!important}
.ghde-feature--klein > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap{align-self:stretch;justify-content:flex-start!important;align-content:flex-start!important}
.ghde-feature--klein .elementor-widget-button{margin-top:auto}
.ghde-feature--klein .ghde-feature-title .elementor-heading-title{font-size:21px!important}
.ghde-feature--klein .ghde-feature-title .elementor-heading-title::after{margin:7px 0 12px}
.ghde-feature--klein .elementor-widget-text-editor,.ghde-feature--klein .elementor-widget-text-editor p{font-size:14px!important;line-height:1.55!important}
.ghde-feature--klein .elementor-button{margin-top:18px;min-height:46px;padding:10px 20px!important;font-size:18px!important}
.elementor-top-section:has(.ghde-feature--klein) > .elementor-container{align-items:stretch}
.elementor-top-section:has(.ghde-feature--klein) > .elementor-container > .elementor-column > .elementor-widget-wrap{height:100%}
.elementor-top-section:has(.ghde-feature--klein) > .elementor-container > .elementor-column > .elementor-widget-wrap > .ghde-feature--klein{width:100%}
@media (max-width:767px){
 .ghde-feature--klein > .elementor-container{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto;column-gap:14px;row-gap:0;align-items:start}
 .elementor-section.ghde-feature.ghde-feature--klein{padding:16px}
 .ghde-feature--klein .ghde-feature-kicker .elementor-heading-title{margin-bottom:8px!important}
 .ghde-feature--klein .ghde-feature-title .elementor-heading-title{font-size:19px!important}
 .ghde-feature--klein .elementor-button{margin-top:14px;min-height:42px;font-size:17px!important;width:auto!important}
 .elementor-top-section:has(.ghde-feature--klein) > .elementor-container > .elementor-column + .elementor-column{margin-top:16px}
}
@media (min-width:768px){
 .elementor-top-section:has(.ghde-feature--klein) > .elementor-container{gap:24px}
 .elementor-top-section:has(.ghde-feature--klein) > .elementor-container > .elementor-column{width:auto!important;flex:1 1 0;min-width:0}
 .elementor-top-section:has(.ghde-feature--klein) > .elementor-container > .elementor-column > .elementor-widget-wrap{padding:0!important}
}
@media (max-width:767px){
 .ghde-feature.ghde-feature--klein .elementor-widget-button .elementor-button{width:auto!important;font-size:16px!important;padding:10px 16px!important;white-space:nowrap}
}
@media (min-width:768px){ .ghde-feature--klein .elementor-widget-image .elementor-widget-container{width:60%;margin:0 auto} } /* Stefan 28.09.: Cover kleiner */

/* ==== ghde-coverreihe – Cover-Reihe mit Elementor-Bordmitteln (ersetzt Boosted „Image Grid“, 2026-09-28) ====
   Im Editor: Widget „Einfache Galerie“ mit CSS-Klasse „ghde-coverreihe“ (Spalten 5 / Tablet 3 / Mobil 3). Cover wie die
   Kachel-Stufe (Radius 10, Schatten), Bildunterschrift = Beschriftung der Mediendatei. */
.ghde-coverreihe .gallery{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin:0!important}
.ghde-coverreihe .gallery-item{margin:0!important;padding:0!important;width:auto!important;max-width:none!important;text-align:left}
.ghde-coverreihe .gallery-icon img{width:100%!important;height:auto!important;aspect-ratio:1;object-fit:cover;border:0!important;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.24);display:block}
.ghde-coverreihe .gallery-caption{margin:10px 0 0!important;padding:0!important;font:400 13px/1.4 'Arimo',sans-serif!important;color:#4a5560!important;text-align:left!important}
@media (max-width:1024px){.ghde-coverreihe .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.ghde-coverreihe .gallery{gap:14px}}

/* ==== ghde-stimmenpaar – zwei Bilder nebeneinander mit Namen (ersetzt Boosted „Image Comparison“, 2026-09-28) ====
   Im Editor: Innere Sektion mit CSS-Klasse „ghde-stimmenpaar“, zwei Spalten mit je einem Bild-Widget, Beschriftung „Eigene“ =
   Name (erscheint als Glas-Pille oben links, wie die Cover-Badges). Z. B. Hollywood-Star | deutsche Synchronstimme. */
.elementor-section.ghde-stimmenpaar{max-width:560px;margin:0 auto}
.ghde-stimmenpaar > .elementor-container{display:grid!important;grid-template-columns:1fr 1fr;gap:12px}
.ghde-stimmenpaar > .elementor-container > .elementor-column{width:auto!important;min-width:0}
.ghde-stimmenpaar .elementor-widget-wrap{padding:0!important}
.ghde-stimmenpaar figure.wp-caption{position:relative;margin:0!important;line-height:0}
.ghde-stimmenpaar img{width:100%!important;height:auto!important;aspect-ratio:1;object-fit:cover;object-position:center 25%;border-radius:12px!important;box-shadow:0 6px 18px rgba(0,0,0,.16);display:block}
.ghde-stimmenpaar figcaption.widget-image-caption{position:absolute;left:10px;top:10px;margin:0!important;padding:5px 10px;border-radius:999px;background:rgba(22,56,76,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);color:#fff!important;font:500 11px/1.2 'Arimo',sans-serif!important;letter-spacing:.3px;text-transform:uppercase;text-align:left}

/* ==== ghde2026-magazin-uebersicht – Magazin-Seite /magazin/ (W4-Presets „Magazin 2026 Aufmacher/Raster“, 2026-09-28) ====
   Kachel wie die Magazin-Kachel im Newsletter: Bild 3:2 oben rund, direkt darunter grauer Kasten mit Titel + Trennstrich,
   Datum als Meta-Pille (wie Einzelseite), Anreißer, Button. Aufmacher oben: groß, Bild links + Kasten rechts. */
.w4pl-ghde-magazin{margin:0}
.ghde-mag-lead,.ghde-mag-card{display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(17,45,59,.12);overflow:hidden}
.ghde-mag-lead__img,.ghde-mag-card__img{display:block;line-height:0;overflow:hidden}
.ghde-mag-lead__img img,.ghde-mag-card__img img{width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .35s ease}
.ghde-mag-lead__img:hover img,.ghde-mag-card__img:hover img{transform:scale(1.04)}
.ghde-mag-box{flex:1;display:flex;flex-direction:column;align-items:flex-start;background:#f1f4f6;padding:22px 24px 24px}
.ghde-mag-kicker{display:inline-block;margin:0 0 12px;padding:5px 10px;border-radius:999px;background:#e1ebf2;color:#2d729b;font:700 12.5px/1 'Fira Sans Condensed',sans-serif;letter-spacing:.6px;text-transform:uppercase}
.ghde-mag-title{margin:0 0 12px!important;font:700 22px/1.2 'Fira Sans Condensed',sans-serif!important;color:#1c2b3a!important;text-transform:none!important;letter-spacing:0!important}
.ghde-mag-title a{color:inherit!important;text-decoration:none!important}
.ghde-mag-title a:hover{color:#2d729b!important}
.ghde-mag-title::after{content:'';display:block;width:44px;height:3px;background:#2d729b;margin:8px 0 0}
/* Datum: exakt die Meta-Pille der Einzelseite (.ghde-smeta, Abschnitt ghde2026-single-titlebar) */
.ghde-mag-date{align-self:flex-start;background:rgba(22,56,76,.92)!important;border-color:rgba(22,56,76,.92)!important} /* auf hellem Kasten fast deckend, damit es wie auf dem Titelfoto der Einzelseite wirkt (Glas 60 % wurde hier grau) */
.ghde-mag-teaser{margin:14px 0 0!important;font:400 14.5px/1.6 'Arimo',sans-serif!important;color:#3a4550!important}
.ghde-mag-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:auto;min-height:46px;padding:10px 22px;border-radius:14px;background:#2d729b;color:#fff!important;font:500 18px/1 'Fira Sans Condensed',sans-serif;text-decoration:none!important;transition:background .15s ease}
.ghde-mag-teaser + .ghde-mag-btn{margin-top:20px}
.ghde-mag-box .ghde-mag-btn{margin-top:auto}
.ghde-mag-box .ghde-mag-teaser{margin-bottom:20px!important}
.ghde-mag-btn:hover,.ghde-mag-btn:focus{background:#235a7c;color:#fff!important}
.ghde-mag-lead{margin:0 0 32px}
.ghde-mag-lead .ghde-mag-title{font-size:28px!important}
.ghde-mag-lead .ghde-mag-teaser{font-size:15px!important}
@media (min-width:1025px){
 .ghde-mag-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
 .ghde-mag-lead__img img{height:100%!important;aspect-ratio:auto;min-height:100%}
 .ghde-mag-lead .ghde-mag-box{padding:28px 30px 30px}
}
.ghde-mag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:767px){
 .ghde-mag-grid{grid-template-columns:1fr;gap:22px}
 .ghde-mag-box{padding:18px 18px 20px}
 .ghde-mag-lead .ghde-mag-title{font-size:23px!important}
 .ghde-mag-title{font-size:20px!important}
 .ghde-mag-btn{width:100%}
}
/* Magazin „Mehr laden“: Button = .ghde-archive-loadmore (wie Hörfinder/Archiv), neue Kacheln steigen ein wie im Finder */
.ghde-mag-more{margin-top:32px;text-align:center}
.ghde-mag-more .navigation{display:contents}
.ghde-mag-card.ghde-mag-rise{animation:ghdeMagRise .6s ease both}
@keyframes ghdeMagRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ghde-mag-card.ghde-mag-rise{animation:none}}

/* ==== ghde2026-cover-skelett – Lade-Skelett fuer Cover-Kacheln, 2026-09-28 ====
   Gilt fuer die W4-Karussells (Flickity 2026 Standard / ohne Badge / Top 10) UND die Theme-Kacheln
   (.progression-studios-default-blog-overlay: „Ähnliche Downloads“ auf Einzelseiten, Archiv-Raster).
   Solange das Cover noch laedt (img.lazyload / .lazyloading von lazysizes), steht eine Kachel im Marken-Navy #16384c mit 6 %
   (Schimmer 3 %) da – derselbe Ton wie die Pillen im Player; Badge, Verlauf, Titel erscheinen erst mit dem Bild.
   Bewusst an .lazyload/.lazyloading gekoppelt (nicht an .lazyloaded), damit ohne lazysizes (z. B. eingeloggt) nichts verborgen bleibt. */
:root{--ghde-skel:#f1f3f4;--ghde-skel-shine:#f8f9fa}
:is(.ghde-mfs-square,.ghde-mfn-square,.ghde-t10s-square),.progression-studios-default-blog-overlay .progression-studios-feaured-image{background:var(--ghde-skel)}
:is(.ghde-mfs-square,.ghde-mfn-square,.ghde-t10s-square):has(img.lazyload,img.lazyloading),
.progression-studios-default-blog-overlay .progression-studios-feaured-image:has(img.lazyload,img.lazyloading){background:linear-gradient(100deg,var(--ghde-skel) 30%,var(--ghde-skel-shine) 50%,var(--ghde-skel) 70%);background-size:200% 100%;animation:ghdeCoverShimmer 1.4s ease-in-out infinite}
:is(.ghde-mfs-square,.ghde-mfn-square,.ghde-t10s-square) :is(.ghde-mfs-badge,.ghde-mfs-gradient,.ghde-mfs-title,.ghde-mfn-gradient,.ghde-mfn-title,.ghde-t10s-gradient,.ghde-t10s-title),
.progression-studios-default-blog-overlay :is(.overlay-blog-meta-category-list,.blog-play-icon,.overlay-progression-blog-content,.overlay-blog-gradient){transition:opacity .4s ease}
:is(.ghde-mfs-square,.ghde-mfn-square,.ghde-t10s-square):has(img.lazyload,img.lazyloading) :is(.ghde-mfs-badge,.ghde-mfs-gradient,.ghde-mfs-title,.ghde-mfn-gradient,.ghde-mfn-title,.ghde-t10s-gradient,.ghde-t10s-title),
.progression-studios-default-blog-overlay:has(img.lazyload,img.lazyloading) :is(.overlay-blog-meta-category-list,.blog-play-icon,.overlay-progression-blog-content,.overlay-blog-gradient){opacity:0}
@keyframes ghdeCoverShimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){:is(.ghde-mfs-square,.ghde-mfn-square,.ghde-t10s-square):has(img.lazyload,img.lazyloading),.progression-studios-default-blog-overlay .progression-studios-feaured-image:has(img.lazyload,img.lazyloading){animation:none}}

/* ==== ghde2026-theme-gruen – Reste des Original-Themes: Kategorie-/Taxonomie-Links hatten einen gruenen Unterstrich (#39c686 aus dem
   Customizer: Kachel-Overlays, Einzelseite, Startseiten-Slider). Soll nirgends erscheinen -> ausgeblendet (Stefan, 2026-09-28). ==== */
.blog-meta-category-list a,.overlay-blog-meta-category-list span,.progression-studios-feaured-image .overlay-blog-meta-category-list span,
.single-blog-meta-category-list a,.slider-category-list span{border-bottom:0!important;padding-bottom:0}

/* ==== ghde2026-main-carousel-schatten – Theme-Karussells („Ähnliche Downloads“, „Mehr aus dieser Kategorie“): Flickitys Viewport
   ist exakt kachelhoch und schnitt den Kachelschatten (0 2px 6px) oben/unten ab – wie frueher bei den W4-Slidern. Zellen bekommen
   Luft fuer den Schatten, der Aussenabstand wird um denselben Betrag kleiner (Gesamtabstand bleibt), 2026-09-28. ==== */
.main-carousel .carousel-cell{padding-top:4px;padding-bottom:10px}
.main-carousel{padding-top:6px!important;padding-bottom:0!important}

/* ==== ghde2026-share-linie – Design-Punkt 3 (Stefan, 2026-09-28): die bunte Teilen-Leiste des Themes unter dem Titelfoto
   (Twitter/Facebook/Pinterest/E-Mail) entfaellt; an ihrer Stelle eine 6px-Linie in Markenblau ueber die volle Breite. ==== */
.blog-single-social-sharing{display:none!important}
.blog-single-social-sharing-container{height:6px!important;min-height:0!important;margin:0!important;padding:0!important;background:#2d729b!important;overflow:hidden;box-shadow:none!important;position:relative;z-index:5;opacity:1!important} /* ueber Foto-Verlauf und Schatten der Nachbarn -> voll deckend */


/* ==== ghde2026-comments – Design-Punkt 4 (Stefan, 2026-09-28): Kommentare als runde graue Karten ohne Einzug,
   Zipfel unten links = Pfad aus der Logo-Blase (Maske, Farbe folgt der Karte), Stefans Antworten hellblau mit
   Logo-Zeichen im Kreis (Klasse ghde-owner + Anzeigename aus inc/design/ghde2026-comments.php),
   Formular als graue Box mit weissen Feldern, Ueberschriften im 2026-Stil. comments.php bleibt Theme-Original. ==== */
#comments h4.comments-title{font-family:'Fira Sans Condensed',sans-serif;font-weight:800;font-size:22px;line-height:1.25;color:#1c2b3a;text-transform:none;margin:10px 0 0}
#comments h4.comments-title .comment-count-title{color:#1c2b3a}
#comments h4.comments-title::after{content:'';display:block;width:44px;height:3px;background:#2d729b;margin:10px 0 20px}
#comments .comment-list{margin:0 0 36px}
#comments .comment-list li.comment{margin:0 0 34px;padding:0}
#comments .comment-list .children>li{margin:34px 0 0 0}
#comments .comment-list #respond.comment-respond{margin:34px 0 0} /* Antwortformular unter einem Kommentar: Platz fuer den Zipfel */
#comments .comment-list .comment-body{position:relative;margin-left:0;background:#f2f3f5;border-radius:16px 16px 16px 12px;padding:20px 24px 16px;font-size:15px;line-height:1.65;color:#171e22}
#comments .comment-list li.ghde-owner>.comment-body{background:#e8f1f7}
#comments .comment-list .comment-body::before{display:none}
#comments .comment-list .comment-body::after{content:'';position:absolute;left:35px;bottom:-20px;width:37px;height:23px;background:inherit;border-radius:0;-webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2288%20380%2092%2058%22%3E%3Cpath%20d%3D%22M88%20380L180%20380L180%20388L177%20388A10%2010%200%200%200%20171.3%20389.8L103.1%20436.8A7.2%207.2%200%200%201%2092.3%20428.3L102.6%20401.6A10%2010%200%200%200%2093.3%20388L88%20388Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E') center/100% 100% no-repeat;mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2288%20380%2092%2058%22%3E%3Cpath%20d%3D%22M88%20380L180%20380L180%20388L177%20388A10%2010%200%200%200%20171.3%20389.8L103.1%20436.8A7.2%207.2%200%200%201%2092.3%20428.3L102.6%20401.6A10%2010%200%200%200%2093.3%20388L88%20388Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E') center/100% 100% no-repeat}
#comments .comment-author cite{font-family:'Fira Sans Condensed',sans-serif;font-weight:600;font-size:17px;color:#1c2b3a;padding:0}
#comments .comment-author cite a{color:#1c2b3a}
#comments .comment-list li.ghde-owner>.comment-body .comment-author cite::after{content:'';display:inline-block;width:26px;height:26px;margin-left:8px;border-radius:50%;vertical-align:-6px;background:#2d729b url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-1%20-1%20102%20113%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%2020A20%2020%200%200%201%2020%200L80%200A20%2020%200%200%201%20100%2020L100%2072A14%2014%200%200%201%2086%2086L73.4%2086A5%205%200%200%200%2070.8%2086.7L33.1%20109.7A3.6%203.6%200%200%201%2028.1%20104.8L34.7%2093.5A5%205%200%200%200%2030.3%2086L19.5%2086A19.5%2019.5%200%200%201%200%2066.5Z%20M%2079.66%2043.11%20Q%2079.66%2052.38%2076.05%2059.39%20Q%2072.44%2066.41%2065.75%2070.18%20Q%2059.06%2073.96%2050%2073.96%20Q%2036.19%2073.96%2028.26%2065.87%20Q%2020.33%2057.78%2020.33%2042.89%20Q%2020.33%2033.61%2023.95%2026.6%20Q%2027.56%2019.59%2034.25%2015.81%20Q%2040.94%2012.04%2050%2012.04%20Q%2063.81%2012.04%2071.74%2020.13%20Q%2079.66%2028.22%2079.66%2043.11%20Z%20M%2039.74%2033.09%20A%203.53%203.53%200%200%201%2045.01%2030.02%20L%2062.48%2039.94%20A%203.53%203.53%200%200%201%2062.48%2046.03%20L%2045.01%2055.99%20A%203.53%203.53%200%200%201%2039.74%2052.92%20Z%22/%3E%3C/svg%3E') 52% 56%/13px auto no-repeat}
#comments .commentmetadata{font-size:12.5px;margin:2px 0 10px;padding:0}
#comments .commentmetadata a{color:#6b7680}
#comments .comment-body p{margin:0 0 10px}
#comments .reply{text-align:right;margin-top:4px}
#comments .reply a.comment-reply-link{position:static;display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 12px;border-radius:999px;font-family:'Fira Sans Condensed',sans-serif;font-weight:500;font-size:13px;letter-spacing:.3px;color:#2d729b;border:1.5px solid #2d729b;background:transparent;transition:background .15s,color .15s}
#comments .reply a.comment-reply-link:hover{background:#2d729b;color:#fff}
#comments .reply a.comment-reply-link::before{padding:0;top:0;font-size:11px}
#respond.comment-respond{margin-top:10px;background:#f2f3f5;border-radius:16px;padding:28px 32px}
#comments h3.comment-reply-title{font-family:'Fira Sans Condensed',sans-serif;font-weight:800;font-size:22px;color:#1c2b3a;margin:0}
#comments h3.comment-reply-title::after{content:'';display:block;width:44px;height:3px;background:#2d729b;margin:10px 0 16px}
#respond .comment-notes{font-size:14px;color:#6b7680;margin-bottom:16px}
#respond textarea,#respond input[type=text],#respond input[type=email]{width:100%;box-sizing:border-box;border-radius:10px;background:#fff;border:1.5px solid #dfe4e8;padding:11px 14px;font-size:15px}
#respond textarea:focus,#respond input[type=text]:focus,#respond input[type=email]:focus{border-color:#2d729b;outline:none}
#respond .comment-form-author input,#respond .comment-form-email input{max-width:480px}
#respond .comment-form label{font-family:'Fira Sans Condensed',sans-serif;font-size:14px;font-weight:500;color:#1c2b3a}
#respond .comment-form-comment>label,#respond .comment-form-author>label,#respond .comment-form-email>label{padding-left:16px} /* buendig mit dem Feldtext, wie Newsletter-Formular */
#respond .comment-form-cookies-consent,#respond .tnp-comments{position:relative;padding-left:26px;font-size:14px;line-height:1.5;margin:0 0 14px}
#respond .comment-form-cookies-consent input,#respond .tnp-comments input{position:absolute;left:0;top:1px;width:auto;margin:3px 0 0}
#respond .comment-form-cookies-consent label,#respond .tnp-comments label{display:inline;padding:0;font-family:inherit;font-size:14px;font-weight:400;color:inherit}
#respond .tnp-comments label{margin-left:-.28em} /* Newsletter-Plugin setzt &nbsp; hinter die Checkbox */
@media (min-width:768px){#comments .comment-list .comment-body{max-width:60%}} /* Stefan: Kommentare meist kurz -> Bubble auf Desktop schmaler */
@media (max-width:767px){
 #comments .comment-list .comment-body{padding:16px 16px 12px;font-size:14.5px}
 #respond.comment-respond{padding:20px 16px}
}


/* ==== ghde2026-sidebar – Design-Punkt 5 (Stefan, 2026-09-28): V1 graue runde Karten, Ueberschriften im 2026-Stil,
   Listen ohne Trennlinien/Theme-Pfeile: „Neue Downloads“ mit kleinem Cover (Widget-Option Vorschaubild),
   „Am beliebtesten“ nummeriert mit Kreisen wie .ghde-card__num im Magazin, Einzel-Links als Textlink mit Pfeil.
   Newsletter-Widget wie Newsletter-Seite, Deal-Karte abgerundet. Backend: inc/design/ghde2026-widgets.php ==== */
body .sidebar .sidebar-item{border-radius:16px;margin-bottom:16px;padding:28px 28px 20px}
body .sidebar .sidebar-divider-pro{display:none}
body .sidebar .sidebar-item h4.widget-title{font-family:'Fira Sans Condensed',sans-serif;font-weight:800;font-size:21px;line-height:1.2;color:#1c2b3a;text-transform:none;letter-spacing:0;margin:0 0 18px}
body .sidebar .sidebar-item h4.widget-title::after{content:'';display:block;width:44px;height:3px;background:#2d729b;margin-top:10px}
body .sidebar .sidebar-item ul{margin-bottom:10px}
body .sidebar .sidebar-item ul li{border:0;padding:0;margin:0 0 2px;line-height:1.3}
body .sidebar .sidebar-item ul li:before{display:none}
body .sidebar .sidebar-item ul li a{color:#1c2b3a;font-size:15.5px;transition:color .15s,background .15s}
body .sidebar .sidebar-item ul li a:hover{color:#2d729b}
/* Einzel-Links (Newsletter-Intro, Werbefrei) */
body .sidebar .widget_newsletterwidget>ul li a,body .sidebar .widget_custom_html ul li a,body .sidebar .widget_text .textwidget>ul li a{color:#2d729b}
body .sidebar .widget_newsletterwidget>ul li a[href]::after,body .sidebar .widget_custom_html ul li a[href]::after,body .sidebar .widget_text .textwidget>ul li a[href]::after{content:' \2192'}
body .sidebar .widget_newsletterwidget>ul li a:hover,body .sidebar .widget_custom_html ul li a:hover,body .sidebar .widget_text .textwidget>ul li a:hover{color:#235a7c}
body .sidebar .widget_newsletterwidget>ul{margin-bottom:18px}
/* Listen mit Zeilen */
body .sidebar .rpwwt-widget ul li,body .sidebar .widget_post_views_counter_list_widget ul li{overflow:visible;margin:0 0 2px}
body .sidebar .rpwwt-widget ul li a,body .sidebar .widget_post_views_counter_list_widget ul li a{display:flex;align-items:center;gap:12px;padding:6px 8px;margin:0 -8px;border-radius:10px}
body .sidebar .rpwwt-widget ul li a:hover,body .sidebar .widget_post_views_counter_list_widget ul li a:hover{background:#fff}
body .sidebar .rpwwt-widget ul li img{float:none;display:block;flex:none;width:48px!important;height:48px!important;margin:0;border-radius:8px;object-fit:cover;box-shadow:0 1px 4px rgba(17,45,59,.15)}
body .sidebar .rpwwt-post-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .sidebar .widget_post_views_counter_list_widget ul{counter-reset:ghdepop}
body .sidebar .widget_post_views_counter_list_widget ul li{counter-increment:ghdepop}
body .sidebar .widget_post_views_counter_list_widget ul li a::before{content:counter(ghdepop);display:inline-flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#2d729b;color:#fff;font:700 13px/1 'Fira Sans Condensed',sans-serif}
/* Newsletter-Widget */
body .sidebar .tnp-widget label{font-family:'Fira Sans Condensed',sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;color:#1c2b3a;padding-left:16px;margin-bottom:6px;display:block}
body .sidebar .tnp-widget .tnp-field-checkbox label,body .sidebar .tnp-widget .tnp-privacy-field label{text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;padding-left:0;display:flex;align-items:center;gap:8px}
body .sidebar .tnp-widget .tnp-privacy-field a{color:#1c2b3a}
body .sidebar .tnp-widget input[type=text],body .sidebar .tnp-widget input[type=email]{width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #dfe4e8;border-radius:10px;padding:10px 14px;font-size:15px;height:auto}
body .sidebar .tnp-widget input[type=text]:focus,body .sidebar .tnp-widget input[type=email]:focus{border-color:#2d729b;outline:none}
body .sidebar .tnp-widget input.tnp-submit{width:100%;background:#2d729b;color:#fff;border:0;border-radius:14px;padding:13px 20px;font-family:'Fira Sans Condensed',sans-serif;font-weight:500;font-size:15px;cursor:pointer;transition:background .15s}
body .sidebar .tnp-widget input.tnp-submit:hover{background:#235a7c}
/* Deal-Tipp (Deal-Karten/-Seite als eigenes Thema spaeter, Backlog) */
body .sidebar .affcoups-coupon{border-radius:12px;overflow:hidden;border:0;box-shadow:0 2px 12px rgba(17,45,59,.08)}
body .sidebar .affcoups-coupon__discount{border-radius:6px}
body .sidebar .affcoups-coupon__button,body .sidebar .affcoups-coupon a.affcoups-coupon__button{border-radius:12px}
body .sidebar .affcoups-coupon__code{border-radius:10px;overflow:hidden}
/* DP5 Nachtrag (Stefan, 2026-09-28 abends) */
body .sidebar .sidebar-item:last-child{margin-bottom:0}
body .sidebar .widget_custom_html ul li a:not([href]){color:#1c2b3a;cursor:default} /* „Vielen Dank …“ (Steady-Mitglieder) ist kein Link */
body .sidebar .widget_custom_html .textwidget>ul{margin:0 0 14px}
body .sidebar .widget_post_views_counter_list_widget ul li a{box-sizing:border-box;min-height:52px} /* alle 5 Zeilen gleich hoch (= zwei Zeilen) */
/* Cover in „Neue Downloads“: Rahmen-Span per JS (inc/design/ghde2026-widgets.php), Zoom wie die grossen Kacheln */
body .sidebar .ghde-sb-cover{display:block;flex:none;width:48px;height:48px;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(17,45,59,.15);transform:translateZ(0)}
body .sidebar .ghde-sb-cover img{width:100%!important;height:100%!important;border-radius:0;box-shadow:none;object-fit:cover;transition:transform .35s ease}
body .sidebar .rpwwt-widget ul li a:hover .ghde-sb-cover img{transform:scale(1.05)}
/* Newsletter-Widget: eigene Fehlermeldungen statt Browser-Kaestchen (wie Formular auf /newsletter/) */
body .sidebar .tnp-widget .ghde-nl-err{overflow:hidden;animation:ghdeReveal .3s ease both;display:block;color:#b3261e;font:400 13.5px/1.35 'Arimo',sans-serif;text-transform:none;letter-spacing:0;margin:6px 0 0 16px}
body .sidebar .tnp-widget .tnp-privacy-field .ghde-nl-err{margin:4px 0 0 21px}
body .sidebar .tnp-widget .is-invalid input[type=text],body .sidebar .tnp-widget .is-invalid input[type=email]{border-color:#b3261e}
/* Mitscrollen: position:sticky statt Sticky-Kit des Themes (Steuerung per JS nur beim Richtungswechsel) */
@media (min-width:960px){#content-pro .sidebar.sticky-sidebar-progression.ghde-sb-sticky{position:sticky}} /* kein Aussenabstand unten: letzter Kasten schliesst buendig mit dem Inhalt (z. B. Kommentarformular) ab, darunter 50px Seitenabstand */
.ghde-sb-spacer{height:0}
@media (max-width:959px){.ghde-sb-spacer{display:none}}
/* Aufklapp-Effekt fuer nach Klick eingeblendete Inhalte (GRUNDSATZ Stefan 2026-09-28): Hoehe aufziehen + einblenden.
   Nutzbar ueberall per animation:ghdeReveal; .is-leaving klappt wieder zu. */
@keyframes ghdeReveal{from{opacity:0;max-height:0;transform:translateY(-4px)}to{opacity:1;max-height:60px;transform:none}}
@keyframes ghdeCollapse{from{opacity:1;max-height:60px}to{opacity:0;max-height:0;margin-top:0}}
body .sidebar .tnp-widget .ghde-nl-err.is-leaving{animation:ghdeCollapse .22s ease both}
@media (prefers-reduced-motion:reduce){body .sidebar .tnp-widget .ghde-nl-err,body .sidebar .tnp-widget .ghde-nl-err.is-leaving{animation:none}}
/* Newsletter-Widget wie Formular auf /newsletter/ (Stefan 2026-09-28): Beschriftungen/Optionen per JS in inc/design/ghde2026-widgets.php */
body .sidebar .tnp-widget label em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:#6b7680}
body .sidebar .tnp-widget .ghde-nl-hidden,body .sidebar .tnp-widget .tnp-field-list:has(input[value="1"]){display:none}
body .sidebar .tnp-widget .tnp-field-checkbox label,body .sidebar .tnp-widget .tnp-privacy-field label{display:flex;align-items:flex-start;gap:10px;font:400 14px/1.45 'Arimo',sans-serif;color:#3d4a54;text-transform:none;letter-spacing:0;padding-left:0;margin:0 0 8px;cursor:pointer}
body .sidebar .tnp-widget .tnp-field-checkbox label input,body .sidebar .tnp-widget .tnp-privacy-field label input{flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;accent-color:#2d729b}
body .sidebar .tnp-widget .tnp-field-checkbox label strong{font-weight:700;color:#1c2b3a}
body .sidebar .tnp-widget .tnp-privacy-field a{color:#2d729b;text-decoration:underline;text-underline-offset:2px;font-family:inherit;font-size:inherit;font-weight:400}
body .sidebar .tnp-widget .tnp-privacy-field .ghde-nl-err{margin:2px 0 0 28px}
body .sidebar .tnp-widget .tnp-lists{margin-top:14px}
