/*
 * ============================================================================
 *  Bergstolz — Template-eigene Ergaenzungen
 * ============================================================================
 *
 *  Diese Datei wird NACH style.css geladen (siehe joomla.asset.json) und
 *  enthaelt ausschliesslich Korrekturen und Ergaenzungen zum ausgelieferten
 *  Design-CSS. style.css bleibt unveraendert — so laesst sich ein Update des
 *  Designs jederzeit einspielen, ohne die Anpassungen zu verlieren.
 *
 *  Inhalt:
 *    1. Farben der Navigation und der Subline
 *    2. Einheitliche Bildformate
 *    3. Megamenue-Panels
 *    4. Kategorie-Blogansicht
 *    5. Pagination
 *    6. Beitrags-Detailseite
 *    7. Fixierter Header
 *    8. Mobile Ansicht bis 575px
 *    9. Archiv-Kategorieansicht
 *   10. Suchergebnisse
 *   11. Touren und Reisen
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * 1. FARBEN
 * ---------------------------------------------------------------------------
 * Das Design-CSS faerbt die Navigation grau:
 *   - Hauptnavigation      #878787 (hell) bzw. #9F9F9F (dark mode)
 *   - Megamenue-Navigation var(--color-midgray) = #878787
 *   - Unterpunkte          var(--color-midgray) = #878787
 * Gewuenscht ist weisser Navigationstext. Alle Regeln haengen bewusst an
 * body.active-dark-mode: nur dort ist der Hintergrund dunkel (#111111). Ist
 * der Dark Mode in der Template-Konfiguration abgeschaltet, sind Header und
 * Dropdowns weiss — weisse Schrift waere dann unlesbar, deshalb bleibt es
 * dort beim Grau des Designs.
 * ------------------------------------------------------------------------- */

/* Hauptnavigation */
body.active-dark-mode .mainmenu-nav ul.mainmenu > li > a {
	color: var(--color-white);
}

body.active-dark-mode .mainmenu-nav ul.mainmenu > li:hover > a,
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.active > a {
	color: var(--color-primary);
}

/*
 * Klassisches Dropdown.
 *
 * Bewusst mit Kind-Kombinator (> li > a): das Design-CSS benutzt hier
 * Nachfahren-Selektoren und faerbt damit JEDEN Link innerhalb eines
 * .ngl-submenu — im Megamenue also auch die Beitragstitel und Sublines.
 * Diese Ergaenzung soll nur die eigentlichen Menuepunkte treffen.
 */
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.menu-item-has-children > .ngl-submenu > li > a,
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.menu-item-has-children > .ngl-submenu > li > a.hover-flip-item-wrapper span::before {
	color: var(--color-white);
}

body.active-dark-mode .mainmenu-nav ul.mainmenu > li.menu-item-has-children > .ngl-submenu > li:hover > a {
	color: var(--color-primary);
}

/* Vertikale Navigation im Megamenue */
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.megamenu-wrapper .megamenu-sub-menu .megamenu-item .ngl-vertical-nav .vertical-nav-item a,
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.megamenu-wrapper .megamenu-sub-menu .megamenu-item .ngl-vertical-nav .vertical-nav-item a.hover-flip-item-wrapper span::before {
	color: var(--color-white);
}

body.active-dark-mode .mainmenu-nav ul.mainmenu > li.megamenu-wrapper .megamenu-sub-menu .megamenu-item .ngl-vertical-nav .vertical-nav-item.active a,
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.megamenu-wrapper .megamenu-sub-menu .megamenu-item .ngl-vertical-nav .vertical-nav-item:hover a,
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.megamenu-wrapper .megamenu-sub-menu .megamenu-item .ngl-vertical-nav .vertical-nav-item.active a.hover-flip-item-wrapper span::before,
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.megamenu-wrapper .megamenu-sub-menu .megamenu-item .ngl-vertical-nav .vertical-nav-item:hover a.hover-flip-item-wrapper span::before {
	color: var(--color-primary);
}

/* Trennlinie im Megamenue an den dunklen Hintergrund anpassen */
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.megamenu-wrapper .megamenu-sub-menu .megamenu-item .ngl-vertical-nav {
	border-right-color: #333333;
}

/* Mobiles Menue */
body.active-dark-mode .popup-mobilemenu-area .mainmenu li a {
	color: var(--color-white);
}

body.active-dark-mode .popup-mobilemenu-area .mainmenu li a:hover {
	color: var(--color-primary);
}

/*
 * Megamenue im mobilen Menue.
 *
 * Das Design-CSS kennt dort nur .ngl-submenu. Das Megamenue traegt bewusst
 * NUR .megamenu-sub-menu (sonst faerben die Dropdown-Regeln die Subline um,
 * siehe html/mod_menu/default.php), deshalb bekommt es hier dieselben
 * Eigenschaften: eingeklappt, eingerueckt. Aufgeklappt wird per slideToggle
 * in main.js.
 */
.popup-mobilemenu-area .mainmenu .menu-item-has-children .megamenu-sub-menu {
	display: none;
	padding-left: 20px;
	padding-top: 10px;
}

.popup-mobilemenu-area .mainmenu .menu-item-has-children .megamenu-sub-menu li {
	margin-top: 0;
	margin-bottom: 0;
}

.popup-mobilemenu-area .mainmenu .menu-item-has-children .megamenu-sub-menu li a {
	padding: 8px 0;
	display: block;
	font-size: 14px;
	line-height: 18px;
}

/* Im mobilen Menue steht die Vertikal-Nav als einfache Liste, ohne Rahmen */
.popup-mobilemenu-area .megamenu-item .ngl-vertical-nav {
	min-width: 0;
	width: auto;
	border: 0;
	padding: 0;
}

/*
 * Subline (Custom Field "subline-content").
 * Das Design gibt sie ueber .post-cat > .post-cat-list aus. Sichtbar ist ab
 * 1200px nicht der Span selbst, sondern sein ::before-Pseudoelement — beide
 * werden hier auf Gelb festgelegt, damit die Farbe unabhaengig vom Kontext
 * (Megamenue, Tabs, Videos, Listen) identisch ist.
 */
.post-content .post-cat .post-cat-list a,
.post-content .post-cat .post-cat-list span.hover-flip-item-wrapper,
.post-header .post-cat .post-cat-list a,
.post-header .post-cat .post-cat-list span.hover-flip-item-wrapper {
	color: var(--color-secondary);
}

@media (min-width: 1200px) {
	.post-content .post-cat .post-cat-list a.hover-flip-item-wrapper span::before,
	.post-content .post-cat .post-cat-list span.hover-flip-item-wrapper span::before,
	.post-header .post-cat .post-cat-list a.hover-flip-item-wrapper span::before,
	.post-header .post-cat .post-cat-list span.hover-flip-item-wrapper span::before {
		color: var(--color-secondary);
	}

	.post-content .post-cat .post-cat-list a.hover-flip-item-wrapper span::after,
	.post-header .post-cat .post-cat-list a.hover-flip-item-wrapper span::after {
		color: var(--color-primary);
	}
}


/* ---------------------------------------------------------------------------
 * 2. EINHEITLICHE BILDFORMATE
 * ---------------------------------------------------------------------------
 * Im Design haben alle Bilder eines Bereichs exakt dasselbe Seitenverhaeltnis
 * (die Beispielbilder wurden passend zugeschnitten). In Joomla laedt die
 * Redaktion beliebige Formate hoch — ohne feste Vorgabe hat jede Kachel eine
 * andere Hoehe.
 *
 * Loesung: pro Bereich das Seitenverhaeltnis des Entwurfs festschreiben und
 * das Bild mit object-fit: cover mittig beschneiden. Die Werte stammen aus den
 * Originalbildern des Entwurfs und lassen sich hier zentral aendern.
 * ------------------------------------------------------------------------- */

:root {
	--bergstolz-ratio-megamenu: 20 / 13;   /* mega-post-*.jpg   200 x 130 */
	--bergstolz-ratio-grid: 3 / 2;         /* allgemeine Kachel            */
	--bergstolz-ratio-list: 59 / 50;       /* post-list-*.jpg   295 x 250 */
	--bergstolz-ratio-square: 1 / 1;       /* trend-post, blog-sm, Rider   */
	--bergstolz-ratio-slider: 2 / 1;       /* gallery-post-*.jpg 1230x615 */
	--bergstolz-ratio-hero: 3 / 2;         /* Hero: Home-Slider, Kategorie,
	                                          Beitragsseite                 */
	--bergstolz-ratio-cover: 283 / 439;    /* cover-no*.jpg     283 x 439 */
	--bergstolz-ratio-touren: 3 / 2;       /* Touren/Reisen, Querformat    */
}

/* Grundregel fuer jedes Beitragsbild */
.content-block .post-thumbnail img,
.content-block .post-thumbnail a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--bergstolz-ratio-grid);
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
}

/* Megamenue */
.ngl-vertical-nav-content .content-block .post-thumbnail img,
.ngl-vertical-nav-content .content-block .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-megamenu);
}

/*
 * Hero-Slider der Startseite.
 *
 * Eigene Variable, NICHT --bergstolz-ratio-slider: dieselbe Zahl steckt auch
 * in den grossen Kacheln der Kategorielisten, und dort ist sie mit dem
 * Seitenverhaeltnis des Video-iframes in _blogbasis.php gekoppelt (50 % = 2:1).
 * Waeren beide an einer Variablen, wuerde eine Aenderung am Hero die Bild- und
 * Videokacheln einer Reihe unterschiedlich hoch machen.
 */
.ngl-slider-area .content-block .post-thumbnail img,
.ngl-slider-area .content-block .post-thumbnail a img,
.slider-activation .content-block .post-thumbnail img,
.slider-activation .content-block .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-hero);
}

/*
 * Rider-Profile: Text links, rundes Bild rechts.
 *
 * Das Design-CSS gibt der Bildspalte nur eine MINDESTbreite (250px) und laesst
 * sie ansonsten so breit werden, wie das Bild gross ist. Bei einem gross
 * hochgeladenen Foto schluckt das Bild dadurch den halben Text.
 *
 * Deshalb auf dem Desktop eine harte Obergrenze von 50 % der Kachel. Wichtig:
 * min-width muss dafuer zurueckgesetzt werden — in CSS gewinnt min-width gegen
 * max-width, die Mindestbreite des Designs wuerde die Grenze sonst aushebeln.
 * Unterhalb von 992px bleibt alles wie im Entwurf (dort stapelt das Layout
 * ohnehin).
 */
.content-block.content-direction-column .post-thumbnail img,
.content-block.content-direction-column .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-square);
}

@media only screen and (min-width: 576px) {
	.content-block.content-direction-column .post-thumbnail {
		/* min-width des Designs zuruecknehmen — sonst gewinnt sie gegen max-width */
		min-width: 0;
		max-width: 50%;
		/*
		 * 0 0 auto statt 0 1 50%: die Spalte richtet sich nach der Bildbreite
		 * (bis zur Obergrenze) und wird von einer langen Ueberschrift daneben
		 * nicht zusammengedrueckt. Ein kleineres Bild bleibt klein, ein grosses
		 * hoert bei der Haelfte auf.
		 */
		-webkit-flex: 0 0 auto;
		    -ms-flex: 0 0 auto;
		        flex: 0 0 auto;
	}
}

/*
 * Unter 576px stapelt das Design: Bild unter dem Text. Das Rider-Modul steht
 * dort allerdings ZWEISPALTIG (col-6) — und das Design gibt der Bildspalte eine
 * Mindestbreite von 160px. Auf einem 360px-Geraet ist die halbe Spalte nach
 * Abzug der Innenabstaende schmaler als das, wodurch das Bild rechts aus der
 * Kachel herausragte.
 *
 * Deshalb auch hier die Mindestbreite zuruecknehmen und hart auf die volle
 * Spaltenbreite deckeln.
 */
@media only screen and (max-width: 575px) {
	.content-block.content-direction-column .post-thumbnail {
		min-width: 0;
		max-width: 100%;
	}

	.content-block.content-direction-column .post-thumbnail a,
	.content-block.content-direction-column .post-thumbnail img {
		max-width: 100%;
	}
}

/*
 * "Aktuelles"-Tabs: das Vorschaubild liegt absolut positioniert neben der
 * Liste (top:0/bottom:0). Es bekommt daher keine feste Ratio, sondern fuellt
 * den vorgegebenen Rahmen formatfuellend aus.
 */
.content-block.trend-post .post-thumbnail img,
.content-block.trend-post .post-thumbnail a img {
	height: 100%;
	aspect-ratio: auto;
}

/* Test-Bereich (Listenansicht) */
.content-block.post-list-view .post-thumbnail img,
.content-block.post-list-view .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-list);
}

/* Verlosung, rechte Spalte (kleines quadratisches Vorschaubild) */
.content-block.post-medium .post-thumbnail img,
.content-block.post-medium .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-square);
}

/* Archiv-Slider (Heftcover im Hochformat) */
.content-block.modern-post-style .post-thumbnail img,
.content-block.modern-post-style .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-cover);
}

/*
 * Video-Bereich: iframe und Rueckfallbild liegen im selben .ratio-Rahmen
 * (Bootstrap). Die Ratio kommt dort aus der Klasse ratio-16x9 / ratio-4x3,
 * die Grundregel oben darf sie nicht ueberschreiben.
 */
.content-block .post-thumbnail .ratio img,
.content-block .post-thumbnail .ratio a img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.content-block .post-thumbnail .ratio > a {
	display: block;
	overflow: hidden;
}


/* ---------------------------------------------------------------------------
 * 3. MEGAMENUE-PANELS
 * ---------------------------------------------------------------------------
 * Jedes Modul der Position menu-featured wird in ein eigenes
 * .ngl-vertical-inner gerendert. Sichtbar ist beim Aufklappen nur das erste;
 * main.js blendet beim Hover ueber die Navigationspunkte links das jeweils
 * zugehoerige Panel ein. Damit beim Wechsel nichts springt, bekommen alle
 * Panels dieselbe Mindesthoehe.
 * ------------------------------------------------------------------------- */

.ngl-vertical-nav-content {
	position: relative;
}

.ngl-vertical-nav-content .ngl-vertical-inner.active {
	display: block;
}

.megamenu-placeholder {
	margin: 0;
	padding: 20px 0;
}


/* ---------------------------------------------------------------------------
 * 4. KATEGORIE-BLOGANSICHT
 * ---------------------------------------------------------------------------
 * Override: html/com_content/category/blog.php
 * ------------------------------------------------------------------------- */

/*
 * Hero — Optik des Home-Sliders, aber ohne Slick. Das Design legt .post-content
 * als 570px breite Box absolut auf das Bild. Bei einer langen
 * Kategoriebeschreibung waechst die Box nach oben und wuerde das Bild sprengen,
 * deshalb wird der Text auf vier Zeilen begrenzt.
 */
.category-hero .content-block .post-thumbnail img,
.category-hero .content-block .post-thumbnail a img {
	/* Der Kategoriekopf folgt dem Home-Slider — so war er von Anfang an gedacht */
	aspect-ratio: var(--bergstolz-ratio-hero);
}

.category-hero .post-content .category-desc {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.category-hero .post-content .category-desc > *:last-child {
	margin-bottom: 0;
}

/*
 * Ohne Kategoriebild gibt es nichts, worauf die Box liegen koennte —
 * dann steht sie im Fluss und nimmt die volle Breite ein.
 */
.category-hero-plain .ngl-slide.slider-style-1 .content-block {
	padding-bottom: 0;
}

.category-hero-plain .ngl-slide.slider-style-1 .content-block .post-content {
	position: static;
	width: 100%;
	right: auto;
	padding-right: 42px;
}

.category-hero-plain .post-content .category-desc {
	-webkit-line-clamp: none;
	overflow: visible;
}

/* Kacheln: grosser Beitrag im Slider-Format, halbe Kacheln im 3:2-Format */
.content-block.post-grid .post-thumbnail img,
.content-block.post-grid .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-grid);
}

.content-block.post-grid.post-grid-large .post-thumbnail img,
.content-block.post-grid.post-grid-large .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-slider);
}

/*
 * Zweite Kachel-Variante: Textblock UNTER dem Bild
 * (Layout bergstolzBlogUnten). Der Rahmen ist .post-default statt .post-grid,
 * damit .post-content im Fluss steht statt absolut ueber dem Bild.
 */
.ngl-post-list-area .content-block.post-default .post-content,
.category-blog-unten .content-block.post-default .post-content {
	padding-top: 20px;
}

.content-block.post-default .post-content .title {
	margin-bottom: 0;
}

/* Grosser Beitrag dieser Variante: Bild im Slider-Format wie im Overlay-Stil */
.content-block.ngl-post-below-large .post-thumbnail img,
.content-block.ngl-post-below-large .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-slider);
}

/* Beitraege, die der Menuepunkt nur als Link ausgibt */
.post-link-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-link-list li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(135, 135, 135, 0.25);
}

.no-articles {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 5. PAGINATION
 * ---------------------------------------------------------------------------
 * Joomla gibt die Blaetterleiste als Bootstrap-Pagination aus
 * (ul.pagination > li.page-item > a.page-link). Bootstrap 5.3 steuert deren
 * Aussehen komplett ueber CSS-Variablen — deshalb wird hier nur umgefaerbt und
 * KEIN Layout-Override von Joomla ersetzt. Das bleibt auch nach einem
 * Joomla-Update stabil.
 * ------------------------------------------------------------------------- */

.ngl-pagination-wrapper .pagination {
	--bs-pagination-color: var(--color-midgray);
	--bs-pagination-bg: transparent;
	--bs-pagination-border-width: 1px;
	--bs-pagination-border-color: rgba(135, 135, 135, 0.35);
	--bs-pagination-border-radius: var(--radius);
	--bs-pagination-padding-x: 18px;
	--bs-pagination-padding-y: 10px;
	--bs-pagination-font-size: var(--font-size-b2);

	--bs-pagination-hover-color: var(--color-white);
	--bs-pagination-hover-bg: var(--color-primary);
	--bs-pagination-hover-border-color: var(--color-primary);

	--bs-pagination-focus-color: var(--color-white);
	--bs-pagination-focus-bg: var(--color-primary);
	--bs-pagination-focus-box-shadow: none;

	--bs-pagination-active-color: var(--color-white);
	--bs-pagination-active-bg: var(--color-primary);
	--bs-pagination-active-border-color: var(--color-primary);

	--bs-pagination-disabled-color: rgba(135, 135, 135, 0.6);
	--bs-pagination-disabled-bg: transparent;
	--bs-pagination-disabled-border-color: rgba(135, 135, 135, 0.2);

	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ngl-pagination-wrapper .page-link {
	border-radius: var(--radius);
	font-weight: var(--p-medium);
}

.ngl-pagination-wrapper .counter {
	margin: 16px 0 0;
	color: var(--color-midgray);
	font-size: var(--font-size-b3);
}

body.active-dark-mode .ngl-pagination-wrapper .pagination {
	--bs-pagination-color: var(--color-white);
	--bs-pagination-border-color: #333333;
	--bs-pagination-disabled-border-color: #262626;
}


/* ---------------------------------------------------------------------------
 * 5b. PAGINATION — Pfeile
 * ---------------------------------------------------------------------------
 * Joomla setzt fuer Anfang / Zurueck / Weiter / Ende ein leeres <span> mit
 * einer eigenen Icon-Klasse (icon-angle-left, icon-first, …). Die dazugehoerige
 * Icon-Schrift gehoert zu Joomlas Backend-Template und wird im Frontend dieses
 * Templates NICHT geladen — deshalb blieben die Pfeile leer bzw. sahen aus wie
 * Kaestchen, waehrend die Seitenzahlen korrekt aussahen.
 *
 * Hier werden diese Klassen auf Font Awesome 6 gemappt, das im Template
 * ohnehin vollstaendig eingebunden ist (media/fonts/fa-light-300.woff2).
 * Sollte Joomla in einer Version Klartext statt Icons ausgeben, greift diese
 * Regel schlicht nicht und der Text steht normal da.
 * ------------------------------------------------------------------------- */

.ngl-pagination-wrapper .page-link [class^="icon-"],
.ngl-pagination-wrapper .page-link [class*=" icon-"] {
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	font-weight: 300;
	font-style: normal;
	line-height: 1;
	display: inline-block;
	speak: never;
}

.ngl-pagination-wrapper .page-link .icon-angle-double-left::before,
.ngl-pagination-wrapper .page-link .icon-angles-left::before,
.ngl-pagination-wrapper .page-link .icon-first::before,
.ngl-pagination-wrapper .page-link .icon-backward::before {
	content: "\f100";           /* fa-angles-left */
}

.ngl-pagination-wrapper .page-link .icon-angle-left::before,
.ngl-pagination-wrapper .page-link .icon-chevron-left::before,
.ngl-pagination-wrapper .page-link .icon-previous::before,
.ngl-pagination-wrapper .page-link .icon-arrow-left::before {
	content: "\f104";           /* fa-angle-left */
}

.ngl-pagination-wrapper .page-link .icon-angle-right::before,
.ngl-pagination-wrapper .page-link .icon-chevron-right::before,
.ngl-pagination-wrapper .page-link .icon-next::before,
.ngl-pagination-wrapper .page-link .icon-arrow-right::before {
	content: "\f105";           /* fa-angle-right */
}

.ngl-pagination-wrapper .page-link .icon-angle-double-right::before,
.ngl-pagination-wrapper .page-link .icon-angles-right::before,
.ngl-pagination-wrapper .page-link .icon-last::before,
.ngl-pagination-wrapper .page-link .icon-forward::before {
	content: "\f101";           /* fa-angles-right */
}

/* Pfeil-Buttons gleich breit wie die Zahlen halten */
.ngl-pagination-wrapper .page-item:first-child .page-link,
.ngl-pagination-wrapper .page-item:last-child .page-link {
	min-width: 46px;
	text-align: center;
}

/* Joomlas versteckte Beschriftungen nicht doppelt anzeigen */
.ngl-pagination-wrapper .page-link .visually-hidden,
.ngl-pagination-wrapper .page-link .sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}


/* ---------------------------------------------------------------------------
 * 6. BEITRAGS-DETAILSEITE
 * ---------------------------------------------------------------------------
 * Override: html/com_content/article/default.php
 * ------------------------------------------------------------------------- */

.post-single-hero {
	padding-top: 30px;
}

.post-single-hero .post-thumbnail {
	/* Bezugsrahmen fuer die Bildunterschrift, die darauf liegt */
	position: relative;
}

.post-single-hero .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--bergstolz-ratio-hero);
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
	border-radius: var(--radius);
}

.post-single-hero .post-thumbnail .ratio {
	border-radius: var(--radius);
	overflow: hidden;
}

/*
 * Bildunterschrift: liegt UNTEN RECHTS auf dem Bild.
 *
 * Ein Foto kann an der Stelle hell oder dunkel sein, deshalb steht der Text
 * nicht blank darauf, sondern auf einer halbtransparenten dunklen Flaeche —
 * sonst waere die Zeile je nach Motiv unlesbar. Die Flaeche waechst mit dem
 * Text und bleibt auf dem Handy innerhalb des Bildes.
 */
.post-single-hero .post-caption {
	position: absolute;
	right: 15px;
	bottom: 15px;
	max-width: calc(100% - 30px);
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--radius);
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-white);
	font-size: var(--font-size-b3);
	line-height: 1.4;
	text-align: right;
}

@media only screen and (max-width: 575px) {
	.post-single-hero .post-caption {
		right: 10px;
		bottom: 10px;
		max-width: calc(100% - 20px);
		padding: 4px 8px;
	}
}

/* Breadcrumb-Modul: Joomlas Standardausgabe an das Design angleichen */
.post-breadcrumb ol,
.post-breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-b3);
	color: var(--color-midgray);
}

.post-breadcrumb a {
	color: var(--color-midgray);
}

.post-breadcrumb a:hover {
	color: var(--color-primary);
}

.ngl-post-details .post-header {
	margin-bottom: 28px;
}

.ngl-post-details .post-header .title {
	margin-bottom: 0;
}

.ngl-post-details .post-header .post-meta-wrapper {
	margin-top: 12px;
}

.ngl-post-details .post-header .post-cat {
	margin-bottom: 12px;
}

/*
 * Anreisstext optisch vom Volltext abheben.
 * Achtung: body traegt bereits --font-size-b1 (18px) — mit dieser Variable
 * waere der Anreisser exakt so gross wie der Fliesstext und der Unterschied
 * unsichtbar. Deshalb hier eine eigene Stufe.
 */
.ngl-post-details .post-intro {
	font-size: 21px;
	line-height: 1.55;
	font-weight: var(--p-medium);
	margin-bottom: 28px;
	/*
	 * BEWUSST ohne eigene Farbe: --color-heading ist #000000 und wird im Dark
	 * Mode nicht ueber die Variable, sondern je Selektor umgestellt. Ein
	 * color: var(--color-heading) waere hier schwarz auf dunklem Grund.
	 * Ohne Angabe erbt der Absatz die Textfarbe des Body — in beiden Modi
	 * richtig.
	 */
}

@media only screen and (max-width: 767px) {
	.ngl-post-details .post-intro {
		font-size: 19px;
	}
}

.ngl-post-details .post-fulltext img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* Vor / Zurueck */
.post-navigation {
	border-top: 1px solid rgba(135, 135, 135, 0.25);
	padding-top: 24px;
}

.post-navigation .nav-label {
	display: block;
	font-size: var(--font-size-b3);
	color: var(--color-midgray);
	margin-bottom: 4px;
}

.post-navigation .nav-title {
	display: block;
	font-weight: var(--s-bold);
}

.post-navigation a {
	display: inline-block;
	max-width: 100%;
}

.post-navigation a:hover .nav-title {
	color: var(--color-primary);
}

body.active-dark-mode .post-navigation {
	border-top-color: #333333;
}


/* ---------------------------------------------------------------------------
 * 7. FIXIERTER HEADER
 * ---------------------------------------------------------------------------
 * Die Template-Option "Header beim Scrollen fixieren" setzt am <header> die
 * Klasse .header-sticky. Im ausgelieferten Design-CSS gibt es zu dieser Klasse
 * jedoch KEINE einzige Regel und in main.js keine Zeile Code — im Entwurf ist
 * der Header schlicht nicht fixiert. Deshalb war der Schalter im Backend ohne
 * Wirkung. Hier ist die fehlende Umsetzung.
 *
 * Der Stolperstein: das Design-CSS setzt "body { overflow: hidden }", um
 * horizontales Ueberlaufen zu unterdruecken. Damit wird der Body zum
 * Scroll-Container — und position: sticky wirkt darin nicht mehr. Ersetzt wird
 * das durch overflow-x: clip: es schneidet genauso ab, erzeugt aber keinen
 * Scroll-Container. (Browser ohne clip-Unterstuetzung ignorieren die Zeile und
 * verhalten sich wie bisher: Header nicht fixiert, sonst alles normal.)
 * ------------------------------------------------------------------------- */

body {
	overflow-x: clip;
	overflow-y: visible;
}

.header.header-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* Design-CSS gibt dem Header bereits z-index 99 — hier nur absichern */
	z-index: 99;
}

/*
 * Schatten erst, wenn wirklich gescrollt wurde (Klasse kommt aus main.js).
 * Ungescrollt soll der Header wie im Entwurf ohne Kante sitzen.
 */
.header.header-sticky.is-sticky {
	-webkit-box-shadow: var(--shadow-primary);
	        box-shadow: var(--shadow-primary);
}

body.active-dark-mode .header.header-sticky.is-sticky {
	-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/*
 * Das mobile Menue legt sich als Overlay ueber die Seite und muss ueber dem
 * fixierten Header liegen.
 */
.popup-mobilemenu-area {
	z-index: 999;
}


/* ---------------------------------------------------------------------------
 * 8. MOBILE ANSICHT BIS 575px
 * ---------------------------------------------------------------------------
 * Kopfzeile einzeilig: Burger — Logo — Suche.
 *
 * Im Markup stehen Logo und Suchbereich in zwei verschiedenen Bootstrap-Spalten,
 * Burger und Suche zusaetzlich im selben Wrapper. Um daraus EINE Zeile mit
 * dieser Reihenfolge zu machen, werden die Zwischencontainer per
 * display: contents aufgeloest — Logo, Suche und Burger werden dadurch direkte
 * Flex-Kinder der Kopfzeile und lassen sich per order sortieren. Das Markup
 * bleibt fuer alle groesseren Breiten unveraendert.
 *
 * .mobile-search-wrapper wird bewusst NICHT aufgeloest: darin haengt das
 * ausklappbare Suchfeld, das beim Klick auf die Lupe erscheint.
 * ------------------------------------------------------------------------- */

@media only screen and (max-width: 575px) {
	.ngl-header .header-wrap > .row {
		-webkit-flex-wrap: nowrap;
		    -ms-flex-wrap: nowrap;
		        flex-wrap: nowrap;
		-webkit-box-align: center;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.ngl-header .header-wrap > .row > [class*="col-"] {
		display: contents;
	}

	/*
	 * !important ist hier unvermeidbar: .header-search traegt im Markup
	 * Bootstraps Utility-Klasse .d-flex, und die ist als
	 * "display: flex !important" definiert. Ohne !important bliebe der
	 * Wrapper ein Flex-Container und Burger/Suche liessen sich nicht neben
	 * das Logo sortieren.
	 */
	.ngl-header .header-search {
		display: contents !important;
	}

	.ngl-header .hamburger-menu {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1;
		margin: 0;
	}

	.ngl-header .logo {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		    -ms-flex-order: 2;
		        order: 2;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 auto;
		    -ms-flex: 1 1 auto;
		        flex: 1 1 auto;
		text-align: center;
		/* Abstand des Designs entfaellt — es gibt keine zweite Zeile mehr */
		margin-bottom: 0;
	}

	.ngl-header .mobile-search-wrapper {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		    -ms-flex-order: 3;
		        order: 3;
	}

	/* Das Suchfeld klappt ueber die volle Kopfzeilenbreite auf */
	.ngl-header .header-search .mobile-search-wrapper .header-search-form {
		left: 0;
		right: 0;
	}
}


/* ---------------------------------------------------------------------------
 * 9. ARCHIV-KATEGORIEANSICHT
 * ---------------------------------------------------------------------------
 * Override: html/com_content/category/blogarchiv.php
 *
 * Die Kachel ist bewusst dieselbe wie im Archiv-Modul
 * (.content-block.modern-post-style), damit Bildformat, Innenabstaende und
 * Hover identisch sind — das Cover-Hochformat steht bereits in Abschnitt 2.
 *
 * Zu ergaenzen bleibt nur, was im Modul der Slider erledigt: dort sind alle
 * Kacheln gleich hoch, weil slick die Spuren auf gleiche Hoehe zieht. Im
 * Bootstrap-Raster passiert das nicht von selbst, und weil der Textblock oben
 * steht, wuerden die Cover je nach Titellaenge unterschiedlich hoch anfangen.
 * ------------------------------------------------------------------------- */

.ngl-archive-grid > [class*="col-"] {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.ngl-archive-grid .content-block.ngl-archive-tile {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

/*
 * Der Textblock waechst, das Bild sitzt buendig am unteren Rand. So beginnen
 * die Cover einer Reihe auf derselben Linie, egal wie lang die Titel sind.
 */
.ngl-archive-grid .content-block.ngl-archive-tile .post-content {
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 auto;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
}

.ngl-archive-grid .content-block.ngl-archive-tile .post-thumbnail {
	margin-top: auto;
}

/*
 * Fuehrender Beitrag. Er laeuft ueber die volle Breite der Inhaltsspalte —
 * ein Cover im Hochformat waere dort riesig. Deshalb wird die Kachel selbst
 * begrenzt und mittig gestellt; der Titel bleibt die groessere Ueberschrift.
 */
.ngl-archive-lead {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 767px) {
	.ngl-archive-lead {
		max-width: 100%;
	}
}


/* ---------------------------------------------------------------------------
 * 10. SUCHERGEBNISSE
 * ---------------------------------------------------------------------------
 * Override: html/com_finder/search/default.php
 *
 * Bild links, Text rechts im Verhaeltnis 4 zu 8. Bewusst NICHT mit der
 * Design-Klasse .post-list-view aufgebaut: die gibt der Bildspalte eine feste
 * Breite von 295px (min-width UND max-width), was ein Bootstrap-Raster
 * aushebelt. Hier zaehlen die Spalten, also bekommt der Block eine eigene
 * Klasse und nur die Regeln, die er wirklich braucht.
 *
 * Das Seitenverhaeltnis ist dasselbe wie in der Test-Liste des Entwurfs
 * (295 x 250), damit die Suche nicht aus der Reihe faellt.
 * ------------------------------------------------------------------------- */

.content-block.ngl-search-result .post-thumbnail img,
.content-block.ngl-search-result .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-list);
	border-radius: var(--radius);
}

.content-block.ngl-search-result .post-thumbnail {
	overflow: hidden;
	border-radius: var(--radius);
}

/* Zoom beim Ueberfahren — wie in den uebrigen Listenbloecken des Entwurfs */
.content-block.ngl-search-result .post-thumbnail a img {
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.content-block.ngl-search-result:hover .post-thumbnail a img {
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
}

/* Auf dem Handy stehen Bild und Text untereinander — dann Abstand dazwischen */
@media only screen and (max-width: 767px) {
	.content-block.ngl-search-result .post-thumbnail {
		margin-bottom: 20px;
	}
}

/*
 * Die indizierte Adresse. Joomla gibt sie nur aus, wenn die Menuepunkt-Option
 * "URL anzeigen" eingeschaltet ist; im Magazinlayout soll sie sich
 * zurueckhalten.
 */
.ngl-search-result .ngl-search-url {
	margin-top: 10px;
	font-size: 14px;
	word-break: break-all;
	color: var(--color-midgray);
}

/*
 * Ueberschrift der Trefferliste. Sie ist eine h1 — im Entwurf hat der Kopf
 * einer Unterseite aber die Groesse einer h3, deshalb traegt sie zusaetzlich
 * die Bootstrap-Klasse .h3.
 */
.ngl-search-results .section-title .title {
	margin-bottom: 0;
}

/* Trefferzahl, wenn der Menuepunkt bereits eine eigene Ueberschrift setzt */
.ngl-search-results .ngl-search-count {
	margin-top: 10px;
	color: var(--color-midgray);
}

/* Trefferliste ohne Ergebnis */
.ngl-search-results .no-articles {
	margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
 * 11. TOUREN UND REISEN
 * ---------------------------------------------------------------------------
 * Override: html/mod_articles/bergstolzTouren.php
 * Modulposition: home-touren, zwischen Video- und Test-Bereich
 *
 * Ein Slider mit drei sichtbaren Kacheln. Bild im Querformat, darunter
 * Subline und Titel — deshalb .content-block.post-default.image-rounded, der
 * Block des Entwurfs, bei dem der Text UNTER dem Bild steht.
 *
 * Slick setzt jedem Slide eine feste Breite; die Kacheln muessen sich darin
 * gleich hoch verhalten, sonst springt die Zeile je nach Titellaenge.
 * ------------------------------------------------------------------------- */

.ngl-touren-area .content-block.ngl-touren-item .post-thumbnail img,
.ngl-touren-area .content-block.ngl-touren-item .post-thumbnail a img {
	aspect-ratio: var(--bergstolz-ratio-touren);
}

/*
 * Den Abstand zwischen den Kacheln bringt das Design schon mit:
 * .slick-layout-wrapper hat margin: 0 -15px, .slick-single-layout padding:
 * 0 15px. Deshalb stehen die beiden Klassen im Layout — hier nichts doppeln.
 */
.ngl-touren-item .post-content {
	margin-top: 20px;
}

.ngl-touren-item .post-content .title {
	margin-bottom: 0;
}

/*
 * Gleiche Hoehe je Zeile: slick stellt die Slides als Flex-Elemente
 * nebeneinander, die Kachel darin muss die volle Hoehe fuellen.
 */
.ngl-touren-activation .slick-track {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.ngl-touren-activation .slick-slide {
	height: auto;
}

.ngl-touren-activation .slick-single-layout,
.ngl-touren-item {
	height: 100%;
}