/* ==========================================================================
   Matera Guide – Stilvorlage
   Farbwelt: Tuffstein, Terrakotta, Höhlenschatten
   Schriften liegen im Template, nichts wird von fremden Servern geladen.
   ========================================================================== */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Tuffstein hell nach dunkel */
	--stein-000: #FDFAF5;
	--stein-100: #F7F1E7;
	--stein-200: #EFE6D8;
	--stein-300: #E3D6C3;
	--stein-400: #C9B99F;

	/* Schrift und Höhlenschatten */
	--tinte: #241F1C;
	--tinte-weich: #5C534C;
	--tinte-leise: #8A7F76;
	--hoehle: #17130F;
	/* Dunkelblau des Seitensymbols – Fuß und theme-color tragen denselben Ton */
	--fuss: #003D68;
	--fuss-leise: #B8C6D2;

	/* Akzente */
	--terrakotta: #B4502A;
	--terrakotta-dunkel: #8E3C1E;
	--terrakotta-hell: #F0DDD2;
	--murgia: #6C7A57;
	--gold: #C08F31;

	--linie: #E0D4C0;
	--schatten-weich: 0 1px 2px rgba(36, 31, 28, .05), 0 8px 24px -12px rgba(36, 31, 28, .18);
	--schatten-hoch: 0 2px 6px rgba(36, 31, 28, .07), 0 24px 48px -24px rgba(36, 31, 28, .30);

	--radius: 10px;
	--radius-gross: 18px;
	--breite: 1220px;
	--breite-text: 46rem;

	--serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Weicher Übergang beim Seitenwechsel (auch beim Umschalten der Sprache).
   Browser ohne Unterstützung laden die Seite wie bisher. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* --- Grundlagen ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--stein-100);
	color: var(--tinte);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-feature-settings: 'kern' 1;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.012em;
	color: var(--tinte);
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }

a { color: var(--terrakotta-dunkel); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--terrakotta); }

img { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 100;
	background: var(--hoehle); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--terrakotta); outline-offset: 2px; border-radius: 3px; }

/* --- Kopfbereich --------------------------------------------------------- */

.topbar {
	background: var(--hoehle);
	color: var(--stein-200);
	font-size: .85rem;
}
.topbar a { color: var(--stein-100); text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__inner { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; min-height: 2.6rem; }

.kopf {
	background: var(--stein-000);
	border-bottom: 1px solid var(--linie);
}
.kopf--sticky { position: sticky; top: 0; z-index: 40; }

.kopf__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.75rem;
}

.marke {
	display: inline-flex; align-items: center; gap: .7rem;
	text-decoration: none; color: var(--tinte);
	flex: 0 0 auto;
}
.marke__zeichen { color: var(--terrakotta); display: inline-flex; }
.marke__name {
	display: block;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.05;
}
.marke__name { white-space: nowrap; }
.marke__claim {
	display: block; font-size: .74rem; color: var(--tinte-leise);
	letter-spacing: .06em; text-transform: uppercase;
	white-space: nowrap; line-height: 1.2;
}

/* Name, Webadresse und Slogan untereinander (seit 13.9.2026) */
.marke__text { display: flex; flex-direction: column; gap: .12rem; }
.marke__adresse {
	display: block; font-size: .82rem; font-weight: 500; line-height: 1.1;
	letter-spacing: .01em; color: var(--terrakotta-dunkel); white-space: nowrap;
}
.marke__zeichen svg { width: 40px; height: 40px; }
.kopf__inner { min-height: 5.4rem; }

/* Erst wenn der Platz wirklich knapp wird, tritt der Untertitel zurück.
 * Gemessen: Logo, Wetter mit Text und Suche passen ab 1000 px nebeneinander. */
@media (max-width: 999px) {
	.marke__claim { display: none; }
}

/* Besucherzaehler in der Markenzeile
 *
 * Rechts neben der Suche, die vier Werte untereinander: Beschriftung links,
 * Zahl rechtsbuendig darunter ausgerichtet. Zwei schmale Spalten statt vier
 * breiter – so bleibt die Kopfzeile trotz vier Zeilen niedrig.
 *
 * Die Schrift ist bewusst klein: Der Zaehler ist eine Nebeninformation und
 * soll die Marke nicht bedraengen. Ziffern laufen mit fester Breite, damit
 * die Spalte beim Hochzaehlen nicht zappelt.
 *
 * Unter 1100 px wird der Kopf eng – dort tritt der Zaehler zurueck. */

.kopf__zaehler { flex: 0 0 auto; display: none; }

/* Wetter jetzt, mittig zwischen Logo und Suche (mod_matera_wetter, Layout „kopf“)
 *
 * Nimmt den freien Platz der Kopfzeile ein und stellt sich darin mittig.
 * Gezeigt werden Symbol und Temperatur, auf ganz schmalen Schirmen nur die
 * Temperatur. Alles Weitere steht im Titel der Verknüpfung. */
.kopf__wetter { flex: 1 1 auto; display: flex; align-items: center; gap: .35rem; justify-content: center; min-width: 0; }

/* Kartensymbol neben der Temperatur (25.9.2026): führt zur Karte von Matera.
   Auf dem Handy bleibt es bei dem Symbol in der zweiten Kopfzeile. */
.kopf__kartelink {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 999px;
	color: var(--tinte-weich); text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.kopf__kartelink:hover,
.kopf__kartelink:focus-visible { background: var(--stein-200); color: var(--terrakotta-dunkel); }
@media (max-width: 999px) { .kopf__kartelink { display: none; } }
.kopfwetter { display: inline-flex; color: var(--tinte-weich); text-decoration: none; border-radius: 999px; }
a.kopfwetter:hover .kopfwetter__lage,
a.kopfwetter:focus-visible .kopfwetter__lage { color: var(--terrakotta-dunkel); }
.kopfwetter__innen { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem; }
.kopfwetter__symbol { flex: 0 0 auto; color: var(--gold); }
.kopfwetter__temp { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1; color: var(--tinte); }
/* Nur die Temperatur (20.9.2026): Lage, Wind und „Matera · jetzt“ bleiben im
 * Titel der Verknüpfung und für Vorleseprogramme erhalten, sichtbar ist im
 * Kopf nur noch Symbol und Grad. */
.kopfwetter__text { display: none; }
.kopfwetter__ort { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); }
@media (max-width: 999px) {
	.kopf__wetter { justify-content: flex-end; }
	.kopfwetter__innen { padding: .2rem .4rem; gap: .35rem; }
	.kopfwetter__temp { font-size: 1.1rem; }
	/* Der Menüknopf rückt direkt neben das Wetter */
	.kopf__wetter + .nav-schalter { margin-left: .25rem; }
}

/* Handy: Marke und Wetter dürfen sich nicht überschneiden (20.9.2026)
 *
 * Vorher war die Marke starr (flex: 0 0 auto, kein Umbruch) und nur das
 * Wetter durfte schrumpfen. Wurde es eng, fiel dessen Rahmen unter die eigene
 * Breite, und weil der Inhalt rechtsbündig sitzt, schob er sich nach links
 * über die Marke. Jetzt behält das Wetter seine Breite, und die Marke gibt
 * notfalls nach – im äußersten Fall mit Auslassungspunkten. */
@media (max-width: 599px) {
	.kopf__inner { gap: .6rem; }
	.marke { flex: 0 1 auto; min-width: 0; }
	.marke__text { min-width: 0; }
	.marke__name,
	.marke__adresse { overflow: hidden; text-overflow: ellipsis; }
	.kopf__wetter { flex: 0 0 auto; }
}

/* Sehr schmale Geräte (ab iPhone SE abwärts): Platz sparen, damit Name und
 * Webadresse ganz dastehen. Gemessen bei 320 px – darunter greifen die
 * Auslassungspunkte von oben. */
@media (max-width: 420px) {
	.kopf__inner { gap: .45rem; padding-left: 1rem; padding-right: 1rem; }
	.marke { gap: .45rem; }
	.marke__zeichen svg { width: 28px; height: 28px; }
	.marke__name { font-size: 1.15rem; }
	.marke__adresse { font-size: .6rem; letter-spacing: 0; }
	.kopfwetter__symbol { display: none; }
	.kopfwetter__innen { padding: .2rem .25rem; }
	.nav-schalter { padding: .45rem; }
}

.zaehler {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0 .5rem;
	align-items: baseline;
	line-height: 1.25;
}

.zaehler__marke {
	font-size: .62rem; letter-spacing: .05em; text-transform: uppercase;
	color: var(--tinte-leise);
	white-space: nowrap;
}

.zaehler__wert {
	font-size: .68rem; font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tinte);
	text-align: right;
}

@media (min-width: 1100px) {
	.kopf__zaehler { display: block; }
}

/* Suche in der Markenzeile */
.kopf__suche { margin-left: auto; flex: 0 0 auto; display: none; }
.kopf__suche .mod-finder { margin: 0; }
.kopf__suche label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kopf__suche input[type="text"] {
	width: 13rem;
	padding: .45rem .9rem;
	border-radius: 999px;
	background: var(--stein-100);
	font-size: .9rem;
}
.kopf__suche input[type="text"]:focus { background: var(--stein-000); }
.kopf__suche .awesomplete { display: block; position: relative; }
.kopf__suche .awesomplete > ul {
	background: var(--stein-000); border: 1px solid var(--linie);
	border-radius: var(--radius); box-shadow: var(--schatten-hoch);
}

/* Navigationsleiste unter der Marke */
.navleiste { background: var(--stein-200); border-top: 1px solid var(--linie); }
.navleiste__inner { display: flex; align-items: center; }

.navleiste ul { list-style: none; margin: 0; padding: 0; }
.navleiste > .wrap > ul,
.navleiste__inner > ul { display: flex; flex-wrap: wrap; gap: .1rem; align-items: stretch; }
.navleiste__inner > ul > li { position: relative; }

.navleiste a, .navleiste .nav-header {
	display: block;
	padding: .8rem .85rem;
	color: var(--tinte);
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}
.navleiste__inner > ul > li > a:hover { background: var(--stein-300); }
/* Mittlere Breiten: stufenweise enger, damit alle Hauptpunkte in eine Zeile
   passen. Seit „Webcams“ (21.9.2026) und „Immobilien“ (22.9.2026) im
   Hauptmenü stehen, passt die Standardgröße (1306 px) auch in die volle
   Seitenbreite nicht mehr; ab 1250 px gilt deshalb die erste Stufe. Die
   Stufen sind an der deutschen Fassung gemessen, der längsten; benötigte
   Breite je Stufe: 1186 px, 1092, 1036, 977, 938 (verfügbar ist
   Fensterbreite − 60, höchstens die Seitenbreite). Unter 1000 px klappt das
   Menü ein (siehe unten). */
@media (min-width: 1250px) {
	.navleiste__inner > ul > li > a, .navleiste__inner > ul > li > .nav-header { padding-left: .6rem; padding-right: .6rem; font-size: .92rem; }
}
@media (min-width: 1155px) and (max-width: 1249px) {
	.navleiste__inner > ul > li > a, .navleiste__inner > ul > li > .nav-header { padding-left: .45rem; padding-right: .45rem; font-size: .88rem; }
}
@media (min-width: 1100px) and (max-width: 1154px) {
	.navleiste__inner > ul > li > a, .navleiste__inner > ul > li > .nav-header { padding-left: .38rem; padding-right: .38rem; font-size: .85rem; }
}
@media (min-width: 1040px) and (max-width: 1099px) {
	.navleiste__inner > ul > li > a, .navleiste__inner > ul > li > .nav-header { padding-left: .3rem; padding-right: .3rem; font-size: .82rem; }
}
@media (min-width: 1000px) and (max-width: 1039px) {
	.navleiste__inner > ul > li > a, .navleiste__inner > ul > li > .nav-header { padding-left: .25rem; padding-right: .25rem; font-size: .8rem; }
}

.navleiste__inner > ul > li.current > a,
.navleiste__inner > ul > li.active > a {
	color: var(--terrakotta-dunkel);
	border-bottom-color: var(--terrakotta);
	background: var(--stein-100);
}

/* Untermenüs */
.navleiste__pfeil { display: none; }

.navleiste .parent > ul {
	position: absolute; top: 100%; left: 0; min-width: 15rem;
	background: var(--stein-000);
	border: 1px solid var(--linie);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--schatten-hoch);
	padding: .4rem;
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	z-index: 30;
	flex-direction: column;
}
.navleiste .parent:hover > ul,
.navleiste .parent.ist-offen > ul { opacity: 1; visibility: visible; transform: none; }

/* Die letzten Punkte der Leiste klappen nach links auf – sonst steht ihr
 * Untermenü über dem rechten Fensterrand (gemessen bei 1024 px, 20.9.2026). */
.navleiste__inner > ul > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }

/* Punkte mit Untermenü öffnen beim Klick nur das Untermenü (template.js).
   Das Winkelzeichen zeigt, dass sich dahinter etwas aufklappt. */
.navleiste__inner > ul > .parent > a,
.navleiste__inner > ul > .parent > .nav-header { cursor: pointer; }
.navleiste__inner > ul > .parent > a::after,
.navleiste__inner > ul > .parent > .nav-header::after {
	content: ''; display: inline-block; width: .38em; height: .38em; margin-left: .45em;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-.2em) rotate(45deg); transition: transform .15s ease; opacity: .7;
}
.navleiste__inner > ul > .parent.ist-offen > a::after,
.navleiste__inner > ul > .parent.ist-offen > .nav-header::after { transform: translateY(.05em) rotate(-135deg); }
.navleiste .parent > ul a { font-weight: 400; padding: .55rem .75rem; border: 0; border-radius: var(--radius); }
.navleiste .parent > ul a:hover { background: var(--stein-200); }

.nav-schalter {
	margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; border: 1px solid var(--linie); background: var(--stein-000);
	border-radius: var(--radius); cursor: pointer; position: relative;
}
.nav-schalter__balken,
.nav-schalter__balken::before,
.nav-schalter__balken::after {
	display: block; width: 18px; height: 2px; background: var(--tinte); border-radius: 2px;
	transition: transform .18s ease, opacity .18s ease;
}
.nav-schalter__balken::before, .nav-schalter__balken::after { content: ''; position: absolute; }
.nav-schalter__balken::before { transform: translateY(-6px); }
.nav-schalter__balken::after { transform: translateY(6px); }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken { background: transparent; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::before { transform: rotate(45deg); }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::after { transform: rotate(-45deg); }

/* Eingeklappt unter 1000 px (bis 21.9.2026: unter 900 px). Zwischen 900 und
 * 999 px stand die Sprachwahl schon in der Leiste und nahm den Hauptpunkten
 * den Platz – „Kontakt“ rutschte in eine zweite Zeile. */
@media (max-width: 999px) {
	.navleiste { display: none; }
	.navleiste.ist-offen { display: block; }
	.navleiste__inner { display: block; }
	.navleiste__inner > ul { flex-direction: column; gap: 0; }
	.navleiste a { border-bottom: 1px solid var(--linie); }
	.navleiste .parent > ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 0 1rem; background: transparent;
		display: none;
	}
	/* Schmal: zugeklappt, bis der Punkt angetippt wird */
	.navleiste .parent.ist-offen > ul { display: block; }
	.navleiste__inner > ul > .parent > a,
	.navleiste__inner > ul > .parent > .nav-header { display: flex; align-items: center; justify-content: space-between; }

	/* Der Pfeil klappt auf, der Name daneben führt auf die eigene Seite */
	.navleiste__inner > ul > .parent { display: flex; flex-wrap: wrap; align-items: stretch; }
	.navleiste__inner > ul > .parent > a,
	.navleiste__inner > ul > .parent > .nav-header { flex: 1 1 auto; }
	.navleiste__inner > ul > .parent > a::after { display: none; }
	.navleiste__inner > ul > .parent > ul { flex: 0 0 100%; }
	.navleiste__pfeil {
		flex: 0 0 auto; width: 3.25rem;
		display: inline-flex; align-items: center; justify-content: center;
		background: none; border: 0; border-bottom: 1px solid var(--linie);
		color: var(--tinte-weich); cursor: pointer;
	}
	.navleiste__pfeil span {
		width: .55rem; height: .55rem; margin-top: -.2rem;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); transition: transform .15s ease;
	}
	.navleiste__inner > ul > .parent.ist-offen > .navleiste__pfeil span { transform: translateY(.18rem) rotate(-135deg); }

	/* Aufgeklapptes Menü nie höher als der Bildschirm (20.9.2026)
	 *
	 * Die Leiste steckt im festgehefteten Kopf. Klappte ein Untermenü auf,
	 * wurde der Kopf höher als das Fenster und schob sich über den Inhalt –
	 * die Seite ließ sich kaum noch bedienen. Jetzt teilt sich der Kopf die
	 * Fensterhöhe, und das Menü scrollt in sich. */
	.kopf--sticky { display: flex; flex-direction: column; max-height: 100dvh; }
	.navleiste.ist-offen { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1000px) {
	.nav-schalter { display: none; }
}
@media (min-width: 900px) {
	.kopf__suche { display: block; }
}

/* --- Kopfband: Foto oder gezeichnete Silhouette --------------------------- */

/*
 * Das Band steht auf Inhaltsbreite, buendig mit dem Menue darueber und den
 * Kacheln darunter. .wrap liefert Breite und Seitenabstand; hier kommen nur
 * die Rundung und der Abstand nach oben und unten dazu.
 */
.kopfband {
	line-height: 0;
	overflow: hidden;
	border-radius: var(--radius-gross);
	margin-block: clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * Das Foto ist ein sehr breites Panorama. Feste Bandhoehe plus object-fit
 * heisst: kein Springen beim Laden, und auf schmalen Bildschirmen wird
 * seitlich beschnitten statt das Band zu einem Streifen zu quetschen.
 */
.kopfband__foto {
	display: block;
	width: 100%;
	height: clamp(150px, 17vw, 300px);
	object-fit: cover;
	object-position: center 55%;
}

.silhouette__svg {
	width: 100%;
	height: clamp(110px, 14vw, 210px);
	display: block;
	background: linear-gradient(180deg, var(--stein-000) 0%, var(--stein-100) 55%, var(--stein-200) 100%);
}
.silhouette__hinten { fill: var(--stein-300); }
.silhouette__mitte  { fill: var(--stein-400); }
.silhouette__vorne  { fill: #9E8A6E; }
.silhouette__details { fill: rgba(23, 19, 15, .18); }
.silhouette__vorne .silhouette__details { fill: rgba(23, 19, 15, .26); }

/* --- Bänder und Raster --------------------------------------------------- */

.band { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.band--teaser { background: var(--stein-200); border-block: 1px solid var(--linie); }

.inhalt {
	display: grid;
	/* minmax(0, 1fr) statt der Voreinstellung: Sonst wächst die Spalte bis zum
	 * breitesten Inhalt (etwa einer Vergleichstabelle), und die ganze Seite
	 * ließ sich auf dem Handy seitlich schieben (20.9.2026). */
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 3vw, 3rem);
	padding-block: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.inhalt__haupt { min-width: 0; }
.layout--with-sidebar .inhalt {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
	.layout--with-sidebar .inhalt { grid-template-columns: minmax(0, 1fr) 20rem; }
	.layout--with-sidebar .inhalt__oben,
	.layout--with-sidebar .inhalt__unten { grid-column: 1 / -1; }
	.layout--with-sidebar .inhalt__seite { position: sticky; top: 6rem; }
}

.inhalt__oben, .inhalt__unten { display: grid; gap: 1.5rem; }
@media (min-width: 768px) {
	.inhalt__oben, .inhalt__unten { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

/* Fließtext bleibt lesbar schmal */
.inhalt__haupt > .com-content-article p,
.inhalt__haupt > .com-content-article ul,
.inhalt__haupt > .com-content-article ol,
.inhalt__haupt .beitrag__text > p,
.inhalt__haupt .beitrag__text > ul,
.inhalt__haupt .beitrag__text > ol { max-width: var(--breite-text); }

/* --- Karten -------------------------------------------------------------- */

.karte {
	background: var(--stein-000);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	padding: 1.5rem;
	box-shadow: var(--schatten-weich);
}
.karte__titel {
	font-family: var(--serif);
	font-size: 1.15rem;
	margin: 0 0 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--terrakotta-hell);
}
.karte ul { list-style: none; margin: 0; padding: 0; }
.karte li + li { border-top: 1px solid var(--linie); }
.karte li a { display: block; padding: .55rem 0; text-decoration: none; color: var(--tinte); font-size: .96rem; }
.karte li a:hover { color: var(--terrakotta-dunkel); }

/* Kachelraster für Rubriken */
/* Ueberschrift ueber den Rubriken.
 *
 * Sie schliesst die Luecke in der Ebenenfolge: Vorher stand die H1 der
 * Startseite direkt vor den H3 der Kacheln, was Vorlesegeraete und der
 * HTML-Pruefer als Sprung beanstanden. */
.rubriken__titel {
	font-family: var(--serif);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	margin: 0 0 1.1rem;
	color: var(--tinte);
}

.kacheln { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.kachel {
	position: relative;
	background: var(--stein-000);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	padding: 1.4rem;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: var(--stein-400); }
.kachel h3 { margin-bottom: .35rem; }
.kachel h3 a { text-decoration: none; color: inherit; }
.kachel h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.kachel p { color: var(--tinte-weich); font-size: .94rem; margin: 0; }
.kachel__zeichen { color: var(--terrakotta); margin-bottom: .8rem; display: block; font-size: 1.5rem; }
/* Bild statt Zeichen, etwa die Pergamentkarte auf der Kachel „Karte“.
 * Bewusst groesser als ein Zeichen: In Zeichengroesse bliebe von einem
 * Bild nur ein Fleck. */
.kachel__bild { display: block; width: auto; height: 3.75rem; margin-bottom: .8rem; }

/* Kacheln mit großem Bild oben (seit 13.9.2026, quadratisch seit 27.9.2026)
 *
 * Das Bild füllt die Kachel von Kante zu Kante, alle im Quadrat – so sind
 * die Kacheln einer Reihe gleich hoch. Die Vorlagen sind Hochformat und
 * werden etwas oberhalb der Mitte zugeschnitten; siehe
 * tools/kachelbilder-quadrat.py. */
.kachel--bild { display: flex; flex-direction: column; overflow: hidden; padding-top: 0; }
.kachel--bild .kachel__bild {
	width: calc(100% + 2.8rem); max-width: none; height: auto;
	aspect-ratio: 1 / 1; object-fit: cover;
	margin: 0 -1.4rem 1rem; border-radius: 0;
}

/* --- Schaltflächen ------------------------------------------------------- */

.btn, .button, button.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .68rem 1.25rem;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--terrakotta);
	color: #fff;
	font: inherit; font-weight: 600; font-size: .95rem;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.btn:hover, .button:hover { background: var(--terrakotta-dunkel); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--leise, .btn-secondary {
	background: transparent; color: var(--tinte); border-color: var(--stein-400);
}
.btn--leise:hover, .btn-secondary:hover { background: var(--stein-200); color: var(--tinte); }

/* --- Formulare (Joomla-Klassen) ------------------------------------------ */

.form-control, .inputbox, input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="url"], input[type="number"], select, textarea {
	width: 100%;
	padding: .6rem .8rem;
	font: inherit;
	color: var(--tinte);
	background: var(--stein-000);
	border: 1px solid var(--stein-400);
	border-radius: var(--radius);
}
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--terrakotta); }
label, .control-label { font-weight: 500; font-size: .92rem; display: inline-block; margin-bottom: .3rem; }

/* --- Meldungen ----------------------------------------------------------- */

joomla-alert, .alert {
	display: block;
	border: 1px solid var(--linie);
	border-left: 4px solid var(--terrakotta);
	background: var(--stein-000);
	border-radius: var(--radius);
	padding: .9rem 1.1rem;
	margin-bottom: 1.5rem;
}
.alert-success { border-left-color: var(--murgia); }

/* --- Brotkrumen und Blätterfunktion -------------------------------------- */

.brotkrumen { padding-top: 1.25rem; font-size: .85rem; color: var(--tinte-leise); }
.brotkrumen ol, .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.brotkrumen li + li::before { content: '›'; margin-right: .45rem; color: var(--stein-400); }
.brotkrumen a { color: var(--tinte-weich); text-decoration: none; }
.brotkrumen a:hover { color: var(--terrakotta-dunkel); }

.pagination { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 2rem 0 0; }
.pagination a, .pagination span {
	display: inline-block; padding: .45rem .8rem; border: 1px solid var(--linie);
	border-radius: var(--radius); text-decoration: none; color: var(--tinte); background: var(--stein-000);
}
.pagination .active span { background: var(--terrakotta); color: #fff; border-color: var(--terrakotta); }

/* --- Sprachumschalter im Kopf ------------------------------------------ */

.kopf__sprache { flex: 0 0 auto; }
.sprachwahl__liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; }
.sprachwahl__liste li + li::before { content: '·'; color: var(--stein-400); margin: 0 .3rem 0 .2rem; }
.sprachwahl__liste a { color: var(--tinte-leise); text-decoration: none; padding: .2rem .15rem; border-radius: 4px; }
.sprachwahl__liste a:hover, .sprachwahl__liste a:focus-visible { color: var(--terrakotta-dunkel); }
.sprachwahl__aktiv { color: var(--terrakotta-dunkel); padding: .2rem .15rem; border-bottom: 2px solid var(--terrakotta); }
/* Kleine Landesflagge über dem Kürzel – dezent, die aktive Sprache kräftiger */
.sprachwahl__liste a, .sprachwahl__aktiv { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; line-height: 1; }
.sprachwahl__flagge { display: block; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(36, 31, 28, .12); opacity: .7; transition: opacity .15s ease; }
.sprachwahl__liste a:hover .sprachwahl__flagge, .sprachwahl__liste a:focus-visible .sprachwahl__flagge, .sprachwahl__aktiv .sprachwahl__flagge { opacity: 1; }
.sprachwahl__liste li + li::before { align-self: flex-end; margin-bottom: .1rem; }
.navleiste__sprache { display: none; }

@media (max-width: 999px) {
	.kopf__sprache { display: none; }
	.navleiste__sprache { display: block; padding: .75rem .75rem 1rem; border-top: 1px solid var(--linie); }
	.navleiste__sprache .sprachwahl__liste { font-size: .95rem; gap: .35rem; flex-direction: row; flex-wrap: nowrap; }
	.navleiste__sprache .sprachwahl__liste li { display: flex; align-items: center; width: auto; border: 0; margin: 0; padding: 0; background: none; }
	.navleiste__sprache .sprachwahl__liste a, .navleiste__sprache .sprachwahl__aktiv { padding: .35rem .5rem; }
}

/* Zweite Kopfzeile: nur auf dem Handy eine eigene Reihe, sonst lösen sich
 * ihre Kinder auf und sitzen wie bisher direkt in der Kopfzeile. */
.kopf__zeile2 { display: contents; }
.kopf__karte { display: none; }

/* Konto der Anbieter (20.9.2026)
 *
 * Wer eine Anzeige hat, muss sie auch wiederfinden. Auf breiten Schirmen
 * steht deshalb neben der Sprachwahl ein Knopf mit Wort, auf dem Handy nur
 * das Symbol – dort ist die Zeile sonst zu voll. */
.kopf__konto {
	display: inline-flex; align-items: center; gap: .4rem;
	flex: 0 0 auto; padding: .35rem .7rem;
	color: var(--terrakotta-dunkel); text-decoration: none; white-space: nowrap;
	font-size: .85rem; font-weight: 600;
	border: 1px solid var(--linie); border-radius: var(--radius, 10px);
	background: var(--stein-000);
}
.kopf__konto:hover,
.kopf__konto:focus-visible { color: var(--stein-000); background: var(--terrakotta-dunkel); border-color: transparent; }
.kopf__konto svg { flex: 0 0 auto; }

/* „Abmelden“ ist ein Formular (siehe index.php), sieht aber aus wie ein Verweis */
.kopf__abmelden { flex: 0 0 auto; margin: 0; }
.kopf__abmelden button {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; font-size: .78rem; color: var(--tinte-leise);
	border-bottom: 1px solid transparent;
}
.kopf__abmelden button:hover,
.kopf__abmelden button:focus-visible { color: var(--terrakotta-dunkel); border-bottom-color: currentColor; }

/* Unter 1200 px wird die Kopfzeile eng: Dann bleibt vom Konto nur das
 * Symbol, sonst schiebt „Meine Anzeigen“ das Wetter in die Sprachwahl. */
@media (max-width: 1200px) {
	.kopf__konto { padding: .35rem .5rem; }
	.kopf__konto-text { display: none; }
}

/* Handy: Sprachwahl in den Kopf, direkt unter das Logo (20.9.2026)
 *
 * Der Kopf bricht dafür in zwei Zeilen um – oben Marke, Wetter und
 * Menüknopf, darunter DE · IT · EN. Im aufgeklappten Menü entfällt der
 * zweite Umschalter. Steht nach der 999-px-Regel, damit sie hier gewinnt. */
@media (max-width: 599px) {
	.kopf__inner { flex-wrap: wrap; row-gap: .1rem; padding-bottom: .4rem; }
	.marke { order: 1; }
	.kopf__wetter { order: 2; }
	.nav-schalter { order: 3; }
	.kopf__zeile2 {
		order: 4; display: flex; align-items: center; justify-content: space-between;
		flex: 0 0 100%; gap: .75rem;
	}
	.kopf__sprache { display: block; }
	.kopf__sprache .sprachwahl__liste { justify-content: flex-start; font-size: .82rem; }
	.navleiste__sprache { display: none; }

	/* Kartensymbol am rechten Rand derselben Zeile */
	.kopf__karte {
		display: inline-flex; align-items: center; justify-content: center;
		/* So groß wie der Menüknopf daneben */
		flex: 0 0 auto; width: 2.75rem; height: 2.75rem;
		color: var(--terrakotta-dunkel); text-decoration: none;
		border: 1px solid var(--linie); border-radius: var(--radius, 10px);
		background: var(--stein-000);
	}
	.kopf__karte:hover,
	.kopf__karte:focus-visible { color: var(--stein-000); background: var(--terrakotta-dunkel); border-color: transparent; }

	/* Konto: auf dem Handy nur das Symbol, so groß wie das Kartensymbol */
	.kopf__konto {
		width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center;
		margin-left: auto;
	}
	.kopf__konto-text { display: none; }
	.kopf__abmelden button { font-size: .72rem; }
}

/* Kategorieseiten auf dem Handy: schnell zu den Unterkategorien (20.9.2026)
 *
 * Joomlas Hinweis „Es gibt keine Beiträge in dieser Kategorie …“ und die
 * Zwischenüberschrift „Unterkategorien“ kosten auf kleinen Schirmen nur Platz –
 * darunter stehen die Unterkategorien ohnehin sichtbar. */
@media (max-width: 599px) {
	.com-content-category-blog > .alert,
	.com-content-category > .alert { display: none; }
	.com-content-category-blog__children > h3:not(.item-title) { display: none; }
	.com-content-category-blog__children { margin-top: .5rem; }
}

/* --- Hinweis unter der Startseiten-Überschrift (Position start-hinweis) --- */

.starthinweis { margin-top: .9rem; margin-bottom: 1.4rem; }
.testhinweis {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
	padding: .8rem 1.1rem; background: var(--stein-000);
	border: 1px solid var(--linie); border-left: 3px solid var(--murgia);
	border-radius: var(--radius);
}
.testhinweis__neu {
	background: var(--murgia); color: #fff; font-size: .7rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px;
}
.testhinweis__text { margin: 0; flex: 1 1 20rem; font-size: .95rem; color: var(--tinte-weich); }
.testhinweis__text strong { color: var(--tinte); font-weight: 600; }
.testhinweis__knopf {
	white-space: nowrap; font-weight: 600; font-size: .92rem; text-decoration: none;
	color: #fff; background: var(--terrakotta); padding: .5rem 1rem; border-radius: 999px;
}
.testhinweis__knopf:hover, .testhinweis__knopf:focus-visible { background: var(--terrakotta-dunkel); color: #fff; }

/* --- Fußbereich ---------------------------------------------------------- */

.fuss { background: var(--fuss); color: var(--stein-300); margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* Kompakt: zwei Spalten auf mittleren Bildschirmen, vier ab 1000 px.
   Lange Linklisten (ab sieben Einträgen, etwa „Magazin & Service“) laufen
   zweispaltig und bekommen dafür doppelt so viel Platz. */
.fuss__spalten {
	display: grid; gap: 1.5rem 2.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: clamp(1.6rem, 3vw, 2rem) 0 clamp(1.3rem, 2.5vw, 1.6rem);
}
.fussspalte:has(li:nth-child(7)) { grid-column: span 2; }
.fussspalte:has(li:nth-child(7)) ul { columns: 2; column-gap: 2rem; }
.fussspalte:has(li:nth-child(7)) li { break-inside: avoid; }

@media (min-width: 1000px) {
	.fuss__spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.4fr); }
	.fussspalte:has(li:nth-child(7)) { grid-column: auto; }
}

@media (max-width: 520px) {
	.fuss__spalten { gap: 1.25rem 1.5rem; }
	.fussspalte:not(:has(li)) { grid-column: 1 / -1; }
}

.fussspalte__titel {
	font-family: var(--serif); font-size: .95rem; color: var(--stein-100);
	margin: 0 0 .55rem; letter-spacing: .01em;
}
.fussspalte ul { list-style: none; margin: 0; padding: 0; }
.fussspalte li { margin-bottom: .3rem; line-height: 1.45; }
.fussspalte a { color: var(--stein-300); text-decoration: none; font-size: .88rem; }
.fussspalte a:hover { color: #fff; text-decoration: underline; }
.fussspalte p { font-size: .88rem; line-height: 1.55; margin: 0 0 .5rem; }
.fussspalte p:last-child { margin-bottom: 0; }

.fuss__unten { border-top: 1px solid rgba(255, 255, 255, .12); }
.fuss__unten-inner { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .8rem 0; font-size: .8rem; }
.fuss__unten-inner p { margin: 0; }
.fuss__unten-inner a { color: var(--stein-300); text-decoration: none; }
.fuss__unten-inner a:hover { color: #fff; text-decoration: underline; }
.fuss__copy { margin: 0; color: var(--fuss-leise); }
.nach-oben { color: var(--stein-300); text-decoration: none; }
.nach-oben:hover { color: #fff; }

/* --- Kleinigkeiten ------------------------------------------------------- */

.site--nackt { background: var(--stein-000); }

::selection { background: var(--terrakotta-hell); color: var(--tinte); }

/* --- Beiträge: Blog-Übersicht und Einzelansicht ------------------------- */

.com-content-category-blog__items,
.blog-items {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: 1.5rem;
}
@media (min-width: 820px) {
	.blog-items.masonry-2, .blog-items.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Drei Spalten ab 900 px (24.9.2026: vorher erst ab 1000), darunter zwei –
   auf dem Handy bleibt es bei einer, sonst werden die Karten unlesbar schmal */
@media (min-width: 560px) {
	.blog-items.masonry-3, .blog-items.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.blog-items.masonry-3, .blog-items.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Dreispaltige Karten (Startseite): Bild randlos oben wie bei den Kacheln,
   kleinere Überschrift, „Mehr über …“ immer unten. Der Steckbrief gehört in
   den Beitrag, nicht in die Karte – er machte einzelne Karten sehr lang. */
.blog-items.masonry-3 .blog-item,
.blog-items.columns-3 .blog-item {
	--karte-rand: 1.25rem;
	display: flex; flex-direction: column; padding: var(--karte-rand); overflow: hidden;
}
.blog-items.masonry-3 .item-image,
.blog-items.columns-3 .item-image {
	float: none; margin: calc(-1 * var(--karte-rand)) calc(-1 * var(--karte-rand)) 1rem; max-width: none;
}
.blog-items.masonry-3 .item-image img,
.blog-items.columns-3 .item-image img {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0;
}
.blog-items.masonry-3 .item-content,
.blog-items.columns-3 .item-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.blog-items.masonry-3 .item-title,
.blog-items.columns-3 .item-title { font-size: 1.3rem; line-height: 1.25; }
.blog-items.masonry-3 .item-content p,
.blog-items.columns-3 .item-content p { font-size: .95rem; }
.blog-items.masonry-3 .fields-container,
.blog-items.columns-3 .fields-container { display: none; }
.blog-items.masonry-3 .readmore,
.blog-items.columns-3 .readmore { margin-top: auto; padding-top: .9rem; }

/* Der angeführte Beitrag steht über der Spaltenaufteilung */
.blog-items.items-leading { grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.blog-items.items-leading .blog-item { background: var(--stein-000); }
.blog-items.items-leading .item-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }

.blog-item {
	background: var(--stein-000);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	padding: clamp(1.25rem, 2.5vw, 1.9rem);
	box-shadow: var(--schatten-weich);
	transition: box-shadow .16s ease, transform .16s ease;
}
.blog-item:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); }

/* Anriss- und Beitragsbilder bekommen dieselben weichen Ecken wie die Galerie */
.item-image img,
.com-content-article .item-image img { border-radius: var(--radius-gross); }

/* Foto aus der Bilder-App als Vorschaubild der Karte: randlos oben, wie bei
   den dreispaltigen Karten – auch in den ein- und zweispaltigen Übersichten */
.blog-item .item-image--foto {
	float: none; max-width: none;
	margin: calc(-1 * clamp(1.25rem, 2.5vw, 1.9rem)) calc(-1 * clamp(1.25rem, 2.5vw, 1.9rem)) 1.1rem;
	border-radius: var(--radius-gross) var(--radius-gross) 0 0; overflow: hidden;
}
.blog-item .item-image--foto img {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0;
}
.blog-items.items-leading .item-image--foto img { aspect-ratio: 5 / 2; }

.item-title, .page-header h1, .page-header h2 { margin-bottom: .4rem; }
.item-title a, .page-header a { color: var(--tinte); text-decoration: none; }
.item-title a:hover { color: var(--terrakotta-dunkel); }

/* Joomlas Infozeile aufräumen */
.article-info { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .9rem; padding: 0; font-size: .82rem; color: var(--tinte-leise); }
.article-info-term { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.article-info dd { margin: 0; }
.article-info a { color: var(--tinte-weich); text-decoration: none; border-bottom: 1px solid var(--stein-400); }
.article-info a:hover { color: var(--terrakotta-dunkel); border-bottom-color: var(--terrakotta); }
.category-name::before { content: '›'; margin-right: .3rem; color: var(--stein-400); }

.readmore, .com-content-article__readmore { margin: 1rem 0 0; }
.readmore .btn, .com-content-article__readmore .btn {
	background: transparent; color: var(--terrakotta-dunkel);
	border-color: var(--stein-400); font-size: .88rem; padding: .45rem 1rem;
	/* Immer einzeilig: In einer Kartenreihe sollen alle Knöpfe gleich hoch
	   sein. Passt der Titel nicht, endet er mit Auslassungspunkten – der
	   vollständige Titel steht im aria-label. */
	display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
}
.readmore .btn > [class^="icon-"], .com-content-article__readmore .btn > [class^="icon-"] { flex: 0 0 auto; }
.readmore__text {
	display: block; min-width: 0; overflow: hidden;
	white-space: nowrap; text-overflow: ellipsis;
}
.readmore .btn:hover { background: var(--terrakotta); color: #fff; border-color: var(--terrakotta); }

/* Einzelbeitrag */
.com-content-article .page-header h1,
.item-page > .page-header h1 { margin-bottom: .3rem; }

.com-content-article p,
.item-page p,
.com-content-article ul,
.item-page ul,
.com-content-article ol,
.item-page ol { max-width: var(--breite-text); }

.com-content-article h2,
.item-page h2 { margin-top: 2rem; }

.com-content-article blockquote,
.item-page blockquote {
	margin: 1.5rem 0; padding: .9rem 1.25rem;
	border-left: 3px solid var(--terrakotta);
	background: var(--stein-200); border-radius: 0 var(--radius) var(--radius) 0;
	max-width: var(--breite-text);
}

.com-content-article em, .item-page em { color: var(--tinte-weich); }

/* Kategoriebeschreibung über der Liste */
.category-desc, .com-content-category-blog__category {
	max-width: var(--breite-text);
	color: var(--tinte-weich);
	font-size: 1.08rem;
}

/* Weitere Beiträge als schlichte Liste */
.items-more, .com-content-category-blog__navigation { margin-top: 2rem; }
.items-more h3 { font-size: 1.05rem; }
.items-more ol, .items-more ul { list-style: none; padding: 0; margin: 0; }
.items-more li { border-top: 1px solid var(--linie); }
.items-more li a { display: block; padding: .6rem 0; text-decoration: none; color: var(--tinte); }
.items-more li a:hover { color: var(--terrakotta-dunkel); }

/* Suchergebnisse und sonstige Listen */
.com-finder__results .result__title a { text-decoration: none; }

/* Unterkategorien als Kachelreihe */
.cat-children { margin-top: clamp(2rem, 4vw, 3rem); }
.cat-children > h3 {
	font-size: 1.15rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--terrakotta-hell);
	margin-bottom: 1.25rem;
}
.cat-children .com-content-category-blog__child,
.cat-children > div:not([class]) {
	display: block;
}
.cat-children {
	--kinder-spalten: repeat(auto-fill, minmax(15rem, 1fr));
}
.cat-children > .com-content-category-blog__child {
	background: var(--stein-000);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	padding: 1.25rem;
	margin-bottom: 1rem;
}
@supports (display: grid) {
	.cat-children {
		display: grid;
		grid-template-columns: var(--kinder-spalten);
		gap: 1rem;
		align-items: start;
	}
	.cat-children > h3 { grid-column: 1 / -1; }
	.cat-children > .com-content-category-blog__child { margin-bottom: 0; }
}
.cat-children .item-title { font-size: 1.1rem; margin-bottom: .3rem; }
.cat-children .category-desc { font-size: .93rem; color: var(--tinte-weich); }
.cat-children .category-desc p { margin: 0; }

/* Blättern zwischen Beiträgen */
.pagenavigation, .pager, .pagination-wrapper {
	display: flex; justify-content: space-between; gap: 1rem;
	margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie);
	list-style: none;
}
.pagenavigation .btn, .pager .btn {
	background: transparent; color: var(--tinte); border-color: var(--stein-400);
	font-size: .9rem; font-weight: 500;
}
.pagenavigation .btn:hover { background: var(--stein-200); color: var(--terrakotta-dunkel); }
.pagenavigation .icon-chevron-left, .pagenavigation .icon-chevron-right { display: none; }
.pagenavigation .previous { margin-right: auto; }
.pagenavigation .next { margin-left: auto; }

/* Kennzeichnung bezahlter Inhalte */
.anzeigen-hinweis {
	display: inline-block;
	margin: 0 0 .6rem;
	padding: .15rem .7rem;
	background: var(--stein-300);
	color: var(--tinte-weich);
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Werbeplätze – zurückhaltend abgesetzt und als solche erkennbar */
.werbeplatz { margin: 1.5rem 0; }
.werbeplatz::before {
	content: attr(data-label);
	display: block;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinte-leise);
	margin-bottom: .35rem;
}
.werbeplatz--oben { margin-top: 1.5rem; }
.werbeplatz--seite { margin-top: 1.5rem; }
.werbeplatz img { border-radius: var(--radius); }
.werbeplatz .bannergroup { margin: 0; }
.werbeplatz .banneritem + .banneritem { margin-top: 1rem; }

/* Steckbrief einer Sehenswürdigkeit (Joomla-Felder) */
.fields-container {
	margin: 2rem 0;
	max-width: 34rem;
	background: var(--stein-000);
	border: 1px solid var(--linie);
	border-left: 4px solid var(--terrakotta);
	border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
	padding: 1.25rem 1.5rem;
}
.fields-container .field-entry { display: flex; flex-wrap: wrap; gap: .5rem; padding: .45rem 0; }
.fields-container .field-entry + .field-entry { border-top: 1px solid var(--linie); }
.fields-container .field-label {
	flex: 0 0 10rem;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tinte-leise);
	font-weight: 600;
}
.fields-container .field-value { flex: 1 1 12rem; }
.fields-container .field-value p { margin: 0; }

@media (max-width: 520px) {
	.fields-container .field-label { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
 * Bildergalerie im Beitrag
 *
 * Text links, Galerie rechts. Die Spalte zielt auf 640 Pixel – so breit ist
 * das grosse Bild gedacht – gibt aber nach, wenn der Platz nicht reicht.
 * Unter 62rem stehen die beiden untereinander, Galerie zuerst.
 *
 * Die Miniaturenreihe hat sieben feste Spalten. Bei acht Bildern – eines
 * gross, sieben klein – fuellt sie damit genau die Breite des grossen
 * Bildes. Sind es weniger, bleiben die Miniaturen gleich gross und die
 * Reihe wird kuerzer; sie sollen nicht mitwachsen.
 * ---------------------------------------------------------------------- */

.beitrag--mit-galerie { display: grid; gap: 2rem; align-items: start; }

/* Einspaltig steht die Galerie oben: erst sehen, dann lesen. Sonst käme
   sie erst nach der ganzen Textstrecke. */
.beitrag--mit-galerie .beitrag__galerie { order: -1; }

@media (min-width: 62rem) {
	.beitrag--mit-galerie {
		grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
	}
	.beitrag--mit-galerie .beitrag__galerie {
		order: 0; position: sticky; top: 6rem;
	}
}

.galerie { margin: 0; }

.galerie__gross {
	display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
	position: relative; background: var(--stein-200);
	border-radius: var(--radius-gross); overflow: hidden; line-height: 0;
}

.galerie__gross img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 640 / 400; object-fit: cover;
}

.galerie__lupe {
	position: absolute; right: .6rem; bottom: .6rem;
	display: grid; place-items: center; width: 2rem; height: 2rem;
	border-radius: 50%; background: rgba(36, 31, 28, .62); color: #fff;
	font-size: 1rem; line-height: 1; opacity: 0; transition: opacity .15s;
}

.galerie__gross:hover .galerie__lupe,
.galerie__gross:focus-visible .galerie__lupe { opacity: 1; }

.galerie__reihe {
	list-style: none; margin: .5rem 0 0; padding: 0;
	display: grid; gap: .5rem;
	grid-template-columns: repeat(var(--spalten, 7), minmax(0, 1fr));
}

/* Auf schmalen Geraeten waeren sieben Kacheln nebeneinander briefmarkengross. */
@media (max-width: 40rem) {
	.galerie__reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.galerie__mini {
	display: block; line-height: 0; border-radius: var(--radius);
	overflow: hidden; border: 2px solid transparent; transition: border-color .15s;
}

/* Das Bild, das gerade groß zu sehen ist, ist in der Reihe markiert */
.galerie__mini.ist-aktiv { border-color: var(--terrakotta); }
.galerie__mini.ist-aktiv img { opacity: .75; }

.galerie__mini img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
}

.galerie__mini:hover { border-color: var(--stein-400); }
.galerie__mini.ist-aktiv { border-color: var(--terrakotta); }

/* Video
 *
 * Die Kachel zeigt das Standbild aus dem Video selbst (der Browser holt es
 * ueber preload="metadata" und die Sprungmarke #t=0.1), darueber liegt das
 * Abspielzeichen. Steht kein einziges Bild im Beitrag, ruecken Abspieler
 * und Bedienleiste an den grossen Platz. */

.galerie__mini--video { position: relative; background: var(--hoehle); }

.galerie__mini--video video {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover; pointer-events: none;
}

.galerie__abspielen {
	position: absolute; inset: 0; margin: auto;
	display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
	border-radius: 50%; background: rgba(20, 17, 15, .62); color: #fff;
	font-size: .7rem; line-height: 1; padding-left: .1em;
}

.galerie__mini--video:hover .galerie__abspielen { background: var(--terrakotta); }

.galerie__gross--video { cursor: default; }

.galerie__gross--video video {
	display: block; width: 100%; height: auto;
	aspect-ratio: 640 / 400; background: #000;
}

/* Vollbild – bewusst ohne Fremdbibliothek, wie bei der Karte */
.galerievollbild {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; place-items: center; padding: 1.5rem;
	background: rgba(20, 17, 15, .9);
}

.galerievollbild[hidden] { display: none; }

.galerievollbild img,
.galerievollbild video {
	max-width: min(100%, 1600px); max-height: 88vh;
	border-radius: var(--radius); background: var(--stein-200);
}

.galerievollbild video { width: min(100%, 1600px); background: #000; }
.galerievollbild [hidden] { display: none !important; }

.galerievollbild__zu {
	position: absolute; top: 1rem; right: 1rem;
	width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .16); color: #fff;
	font-size: 1.5rem; line-height: 1; cursor: pointer;
}

.galerievollbild__zu:hover { background: rgba(255, 255, 255, .3); }

/* Blaettern
 *
 * Links und rechts am Rand, senkrecht mittig. Am Rechner liegen sie
 * neben dem Bild auf der dunklen Flaeche; auf schmalen Geraeten ragt
 * das Bild bis an den Rand, dort liegen sie darauf. Deshalb bekommen
 * sie dort eine dunkle statt einer aufhellenden Fuellung – sonst waeren
 * sie auf einem hellen Foto kaum zu sehen. */

.galerievollbild__pfeil {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 3rem; height: 3rem; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .16); color: #fff;
	font-size: 2rem; line-height: 1; cursor: pointer;
	display: grid; place-items: center;
	transition: background .15s;
}

.galerievollbild__pfeil:hover { background: rgba(255, 255, 255, .32); }
.galerievollbild__pfeil:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.galerievollbild__pfeil--zurueck { left: 1rem; padding-right: .18em; }
.galerievollbild__pfeil--vor { right: 1rem; padding-left: .18em; }

@media (max-width: 46rem) {
	.galerievollbild__pfeil {
		width: 2.6rem; height: 2.6rem; font-size: 1.7rem;
		background: rgba(20, 17, 15, .62);
		box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
	}
	.galerievollbild__pfeil:hover { background: rgba(20, 17, 15, .8); }
	.galerievollbild__pfeil--zurueck { left: .4rem; }
	.galerievollbild__pfeil--vor { right: .4rem; }
}

body.hat-galerievollbild { overflow: hidden; }

.galerievollbild__rahmen {
	margin: 0; display: grid; gap: .6rem; justify-items: center;
}

.galerievollbild__zaehler {
	color: rgba(255, 255, 255, .7); font-size: .85rem; letter-spacing: .04em;
}

/* Überschrift der Startseite. Sie benennt das Thema der Seite – ohne sie
   fehlte der Startseite eine H1. Bewusst zurückhaltend gesetzt, damit sie
   das Kopfbild nicht erschlägt. */
.startkopf { margin-block: clamp(1.5rem, 3vw, 2.5rem) 0; }

.startkopf__titel {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
	line-height: 1.15; letter-spacing: -.02em;
	margin: 0; max-width: 30ch; color: var(--tinte);
}

/* Freier Inhalt unter der Überschrift der Startseite: Modul „Eigene
   Inhalte“ in der Position start-text. Text auf Lesebreite wie in den
   Beiträgen, Bilder und Videos dürfen die ganze Breite nutzen. */
.starttext { margin-block: clamp(.9rem, 2vw, 1.4rem) clamp(1.5rem, 3vw, 2.25rem); }
.starttext .mod-custom > :first-child { margin-top: 0; }
.starttext .mod-custom > :last-child { margin-bottom: 0; }
/* Der Starttext nutzt die ganze Inhaltsbreite (seit 13.9.2026 – vorher auf Lesebreite begrenzt) */
.starttext h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); margin: 1.5rem 0 .5rem; }
.starttext h3 { font-size: 1.15rem; margin: 1.25rem 0 .4rem; }
.starttext img { border-radius: var(--radius); }
.starttext img[style*="float: left"], .starttext img[style*="float:left"] { margin: .2rem 1.25rem .75rem 0; }
.starttext img[style*="float: right"], .starttext img[style*="float:right"] { margin: .2rem 0 .75rem 1.25rem; }
.starttext .mod-custom::after { content: ""; display: block; clear: both; }
.starttext iframe, .starttext video { max-width: 100%; border: 0; border-radius: var(--radius); }
/* Auf schmalen Geraeten umfliesst Text ein Bild nur noch in einer
   Handbreit-Spalte. Dann steht das Bild lieber allein. Der Editor schreibt
   die Ausrichtung als style-Attribut, deshalb !important. */
@media (max-width: 40rem) {
	.starttext img[style*="float"] { float: none !important; margin: 0 0 .9rem !important; }
}

/* Stellenangebote (automatisch übernommen von ARLAB): Angaben als Liste
   Bezeichnung – Wert, auf schmalen Geräten untereinander. */
.stellenangebot {
	display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
	gap: .55rem 1.25rem; margin: 1.5rem 0 2rem; max-width: var(--breite-text);
	padding: 1.25rem 1.5rem; background: var(--stein-000); border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
}
.stellenangebot dt { font-weight: 600; color: var(--tinte-weich); font-size: .92rem; }
.stellenangebot dd { margin: 0; }
.stellenangebot dd ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 40rem) {
	.stellenangebot { grid-template-columns: 1fr; gap: .15rem; }
	.stellenangebot dd { margin-bottom: .6rem; }
}
.stellenangebot__quelle { font-size: .85rem; color: var(--tinte-leise); }

/* --- Wetter ---------------------------------------------------------------
   Der Streifen auf der Startseite spannt sich über die ganze Reihe, damit
   die Tage nebeneinander Platz haben. Die Symbole sind gezeichnet (SVG in
   Textfarbe), es wird nichts von fremden Servern geladen. */

.inhalt__wetter { display: grid; }
.inhalt__videos { display: grid; }

.wetter { display: grid; gap: 1rem; }
.wetter--streifen { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; }
@media (max-width: 52rem) { .wetter--streifen { grid-template-columns: minmax(0, 1fr); } }

.wetter__jetzt {
	display: grid; grid-template-columns: auto auto; gap: 0 .75rem; align-items: center;
	padding-right: 1.25rem; border-right: 1px solid var(--linie);
}
@media (max-width: 52rem) { .wetter__jetzt { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--linie); padding-bottom: .9rem; } }
.wetter__jetzt--breit { border: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--linie); }
.wetter__jetzt p { margin: 0; }
.wetter__symbol { color: var(--terrakotta); flex: 0 0 auto; }
.wetter__symbol--gross { width: 3.25rem; height: 3.25rem; grid-row: span 3; }
.wetter__temp { font-family: var(--serif); font-size: 2.1rem; line-height: 1.05; color: var(--tinte); }
.wetter__temp span { font-size: .95rem; color: var(--tinte-leise); margin-left: .15rem; }
.wetter__lage { font-size: .95rem; color: var(--tinte-weich); }
.wetter__zusatz { font-size: .82rem; color: var(--tinte-leise); }

.wetter__tage {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(4.5rem, 1fr); gap: .35rem;
	overflow-x: auto; scrollbar-width: thin;
}
.wettertag {
	display: grid; justify-items: center; gap: .15rem;
	padding: .5rem .25rem; border-radius: var(--radius); text-align: center;
}
.wettertag:hover { background: var(--stein-100); }
.wettertag__name { font-size: .8rem; font-weight: 600; color: var(--tinte-weich); }
.wettertag__symbol { color: var(--terrakotta); line-height: 0; }
.wettertag__werte { font-size: .95rem; }
.wettertag__min { color: var(--tinte-leise); margin-left: .2rem; font-size: .85rem; }
.wettertag__regen { font-size: .78rem; color: var(--murgia); }
.wettertag__regen--leer { color: var(--stein-400); }

.wetter__fuss { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--tinte-leise); }
.wetter__mehr { font-weight: 500; }
.wetter__hinweis { margin: 0; font-size: .88rem; color: var(--tinte-weich); }

/* Tabelle auf der Wetterseite */
.wetter__rolle { overflow-x: auto; }
.wettertabelle { width: 100%; border-collapse: collapse; font-size: .94rem; }
.wettertabelle th, .wettertabelle td { padding: .5rem .6rem; text-align: left; vertical-align: middle; }
.wettertabelle thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-leise); font-weight: 600; }
.wettertabelle tbody tr + tr { border-top: 1px solid var(--linie); }
.wettertabelle tbody th { font-weight: 600; white-space: nowrap; }
.wettertabelle__datum { display: block; font-size: .78rem; color: var(--tinte-leise); font-weight: 400; }
.wettertabelle__lage { display: flex; align-items: center; gap: .45rem; color: var(--tinte-weich); }
.wettertabelle__lage svg { color: var(--terrakotta); }
.wettertabelle__temp { white-space: nowrap; }
.wettertabelle__temp span { color: var(--tinte-leise); margin-left: .25rem; }
.wettertabelle__balken { width: 7rem; min-width: 5rem; }
.wettertabelle__klein { font-size: .8rem; color: var(--tinte-leise); }

/* Balken von der Tiefst- zur Höchsttemperatur, gemessen an der ganzen Woche */
.wetterbalken { display: block; height: .4rem; border-radius: 999px; background: var(--stein-200); position: relative; }
.wetterbalken::after {
	content: ''; position: absolute; top: 0; bottom: 0;
	left: var(--von, 0%); right: calc(100% - var(--bis, 100%));
	border-radius: 999px; background: linear-gradient(90deg, var(--murgia), var(--gold), var(--terrakotta));
}

/* „In der Nähe“: kleine Karte und Liste am Fuß eines Beitrags */
.naehe { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.naehe__titel { margin: 0 0 .3rem; }
.naehe__hinweis { margin: 0 0 1.1rem; font-size: .9rem; color: var(--tinte-leise); max-width: var(--breite-text); }
.naehe__inhalt { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) {
	.naehe__inhalt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
.naehe__karte { border-radius: var(--radius-gross); overflow: hidden; border: 1px solid var(--linie); }
.naehe__liste { list-style: none; margin: 0; padding: 0; }
.naehe__eintrag {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75rem;
	padding: .55rem 0; border-bottom: 1px solid var(--linie);
}
.naehe__eintrag:first-child { border-top: 1px solid var(--linie); }
.naehe__link { grid-column: 1; font-weight: 500; text-decoration: none; color: var(--tinte); }
.naehe__link:hover { color: var(--terrakotta-dunkel); }
.naehe__rubrik { grid-column: 1; font-size: .8rem; color: var(--tinte-leise); }
.naehe__entfernung {
	grid-column: 2; grid-row: 1 / span 2; align-self: center;
	font-size: .9rem; color: var(--terrakotta-dunkel); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.naehe__empfohlen { margin-top: 1.1rem; }
.naehe__listen > .naehe__empfohlen:first-child { margin-top: 0; }
.naehe__untertitel {
	font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: #8A6420; margin: 0 0 .45rem;
}
.naehe__eintrag--empfohlen .naehe__link::after {
	content: ''; display: inline-block; width: .5rem; height: .5rem; margin-left: .45rem;
	border-radius: 50%; background: var(--gold); vertical-align: middle;
}

/* Rundgang: Karte mit nummerierten Stationen und die Liste dazu */
.rundgang { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.rundgang__titel { margin: 0 0 .3rem; }
.rundgang__hinweis-oben { margin: 0 0 1.1rem; font-size: .9rem; color: var(--tinte-leise); max-width: var(--breite-text); }
.rundgang__inhalt { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) {
	.rundgang__inhalt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
.rundgang__karte { border-radius: var(--radius-gross); overflow: hidden; border: 1px solid var(--linie); }
.rundgang__liste { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rundgang__station {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 .7rem;
	align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--linie);
}
.rundgang__station:first-child { border-top: 1px solid var(--linie); }
.rundgang__nummer {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.6rem; height: 1.6rem; border-radius: 50%;
	background: var(--terrakotta); color: var(--stein-000);
	font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rundgang__text { display: block; min-width: 0; }
.rundgang__link { display: block; font-weight: 500; text-decoration: none; color: var(--tinte); }
.rundgang__link:hover { color: var(--terrakotta-dunkel); }
.rundgang__rubrik,
.rundgang__hinweis { display: block; font-size: .8rem; color: var(--tinte-leise); }
.rundgang__weiter {
	font-size: .82rem; color: var(--tinte-leise);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Anbieterkarten (Anreise): Verkehrsunternehmen mit Kontakt und Fahrplan
 *
 * Das Zeichen links ist ein Monogramm aus dem Firmennamen – eigene Logos
 * dürfen nur mit Erlaubnis der Unternehmen eingesetzt werden. Wo eines
 * vorliegt, ersetzt ein <img class="anbieter__logo"> das Monogramm. */
.anbieter { display: grid; gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 46rem) {
	.anbieter { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
}
.anbieter__karte {
	display: flex; flex-direction: column; gap: .75rem;
	padding: 1.1rem 1.2rem;
	background: var(--stein-000); border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
}
.anbieter__karte { overflow: hidden; }

/* Bild oben in der Karte, von Kante zu Kante wie die Kacheln der Startseite.
 * Ohne Bilddatei ein Platzhalter mit Symbol; siehe parts/anbieterbilder.php */
.anbieter__bild {
	display: block; width: calc(100% + 2.4rem); max-width: none; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
	margin: -1.1rem -1.2rem .1rem;
}
.anbieter__bild--leer {
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--terrakotta) 12%, var(--stein-100));
	color: color-mix(in srgb, var(--terrakotta) 70%, var(--stein-100));
}
.anbieter__bild--bahn { background: color-mix(in srgb, var(--murgia) 14%, var(--stein-100)); color: color-mix(in srgb, var(--murgia) 75%, var(--stein-100)); }
.anbieter__bild--taxi { background: color-mix(in srgb, var(--gold) 16%, var(--stein-100)); color: color-mix(in srgb, var(--gold) 80%, var(--tinte)); }
.anbieter__kopf { display: flex; align-items: center; gap: .75rem; }
.anbieter__zeichen {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.9rem; height: 2.9rem; border-radius: .8rem;
	background: var(--terrakotta); color: var(--stein-000);
	font-family: var(--serif, inherit);
	font-size: 1rem; font-weight: 700; letter-spacing: .02em;
}
.anbieter__karte--bahn .anbieter__zeichen { background: var(--murgia); }
.anbieter__karte--taxi .anbieter__zeichen { background: var(--gold); }
.anbieter__logo { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; object-fit: contain; border-radius: .5rem; background: #fff; }
.anbieter__titel { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.anbieter__name { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.anbieter__art { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }

/* Handy: Die leeren Bildflächen (nur Symbol) fressen den halben Bildschirm –
 * sie entfallen, echte Fotos werden flacher. Die Rubrik rutscht unter den
 * Namen, statt rechts abgeschnitten zu werden. */
@media (max-width: 599px) {
	.anbieter__bild--leer { display: none; }
	.anbieter__bild { aspect-ratio: 16 / 9; }
	.anbieter__kopf { flex-wrap: wrap; row-gap: .25rem; }
	.anbieter__titel,
	.anbieter__art { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
}

.anbieter__fakten { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; font-size: .9rem; }
.anbieter__fakten dt { color: var(--tinte-leise); }
.anbieter__fakten dd { margin: 0; }

.anbieter__kontakt { list-style: none; margin: auto 0 0; padding: .75rem 0 0; border-top: 1px solid var(--linie); font-size: .9rem; }
.anbieter__kontakt li { padding: .15rem 0; }
.anbieter__kontakt a { text-decoration: none; }
.anbieter__kontakt a:hover { text-decoration: underline; }

/* Vergleichstabelle „Auf einen Blick“ */
.vergleich { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .93rem; }
.vergleich th, .vergleich td { padding: .55rem .6rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.vergleich thead th { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); }
.vergleich tbody tr:hover { background: var(--stein-100); }
.vergleich td:nth-child(2), .vergleich td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.beitrag__text .vergleich-rahmen { overflow-x: auto; max-width: 100%; }

/* Handy: Die vier Spalten sollen ganz ins Bild passen, statt seitlich
 * verschoben zu werden – kleinere Schrift, feste Spaltenbreiten, Umbruch
 * auch bei Fahrzeit und Preis. */
@media (max-width: 599px) {
	.vergleich { font-size: .78rem; table-layout: fixed; }
	.vergleich th,
	.vergleich td { padding: .4rem .3rem; overflow-wrap: anywhere; }
	.vergleich td:nth-child(2),
	.vergleich td:nth-child(3) { white-space: normal; }
}

/* Kontaktformular (mod_matera_kontakt) */
.kontaktform { margin-top: 2rem; padding: clamp(1.1rem, 3vw, 1.75rem); background: var(--stein-000); border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.kontaktform__raster { display: grid; gap: .9rem 1.25rem; }
@media (min-width: 40rem) {
	.kontaktform__raster { grid-template-columns: 1fr 1fr; }
	.kontaktform__feld--breit { grid-column: 1 / -1; }
}
.kontaktform__feld label { display: block; }
.kontaktform__feld label span { color: var(--terrakotta); }
.kontaktform textarea { resize: vertical; min-height: 9rem; }
.kontaktform .ist-fehlerhaft { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179, 38, 30, .12); }
.kontaktform__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kontaktform__hinweis { margin: 1rem 0 0; font-size: .85rem; color: var(--tinte-leise); }
.kontaktform__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.1rem; }
.kontaktform__status { margin: 0; font-size: .95rem; }
.kontaktform__status--ok { color: var(--murgia); font-weight: 500; }
.kontaktform__status--fehler { color: #b3261e; }
.kontaktform.ist-gesendet .kontaktform__raster,
.kontaktform.ist-gesendet .kontaktform__hinweis { opacity: .5; }

/* Bild zu einem Abschnitt im Beitragstext (z. B. Fotospots).
 * Höchstens 32rem breit: Die Motive sind 512–768 px gross und würden in
 * voller Spaltenbreite unscharf. */
.beitrag__text .fotospot { margin: .5rem 0 1.1rem; }
.beitrag__text .fotospot img {
	display: block; width: 100%; max-width: 32rem; height: auto;
	border-radius: var(--radius, 10px);
	box-shadow: 0 2px 10px rgba(36, 31, 28, .12);
}

/* ------------------------------------------------- Konto-Seiten (com_users)
 *
 * Joomlas Formulare für Anmeldung, Registrierung und Profil bringen
 * Bootstrap-Klassen mit (input-group, list-group, w-100), die diese Vorlage
 * nicht kennt. Ohne die folgenden Regeln klebt der Knopf „Passwort anzeigen“
 * unter dem Feld, die Schaltflächen sitzen aufeinander und die Verweise unter
 * dem Formular laufen in einer Zeile zusammen. (20.9.2026) */
.com-users-login__form fieldset,
.com-users-registration form fieldset,
.com-users-reset form fieldset,
.com-users-remind form fieldset { border: 0; margin: 0; padding: 0; }

.com-users-login__input,
.com-users-login__remember { margin-bottom: 1rem; }

/* Der Umschalter steht unter dem Feld, nicht daneben: Nebeneinander wird er
 * auf schmalen Schirmen zusammengequetscht und der Text läuft über das Feld. */
.password-group .input-group { display: block; }
.password-group .input-group .form-control { width: 100%; }
/* Der Knopf trägt die Klasse .btn und wäre sonst ein großer runder Farbklecks.
 * Joomlas Augen-Symbol kommt aus einer Symbolschrift, die diese Vorlage nicht
 * lädt – deshalb steht hier der Text „Passwort anzeigen“ statt eines leeren
 * Kästchens. */
.password-group button.input-password-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; margin-top: .45rem; padding: .35rem .7rem; cursor: pointer;
	background: var(--stein-000); color: var(--tinte-weich);
	font-size: .82rem; font-weight: 500;
	border: 1px solid var(--linie); border-radius: var(--radius, 10px);
}
.password-group button.input-password-toggle:hover,
.password-group button.input-password-toggle:focus-visible { color: var(--terrakotta-dunkel); border-color: var(--terrakotta); background: var(--stein-000); }
.password-group .input-password-toggle [class^="icon-"] { display: none; }
/* Die allgemeine Regel für versteckten Text trägt !important – hier muss die
 * Beschriftung sichtbar werden, sonst ist der Knopf leer und 24 Pixel breit. */
.password-group .input-password-toggle .visually-hidden {
	position: static !important; width: auto; height: auto; margin: 0; overflow: visible;
	clip: auto; clip-path: none; white-space: nowrap;
}

/* „Angemeldet bleiben“: Kästchen und Beschriftung in einer Zeile */
.com-users-login__remember .form-check { display: flex; align-items: center; gap: .5rem; }
.com-users-login__remember .form-check-input { width: auto; margin: 0; }

/* Abstand zwischen den Schaltflächen – sie standen bisher aufeinander */
.com-users-login__submit { margin: 0 0 .8rem; }
.com-users-login__submit:last-of-type { margin-bottom: 0; }
.com-users-login__submit .btn { width: auto; }
.com-users-login__submit .btn.w-100 { width: 100%; }

/* Verweise unter dem Formular: untereinander statt in einer Zeile */
.com-users-login__options { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.4rem; padding: 0; }
.com-users-login__options .list-group-item {
	display: inline-block; width: auto; padding: 0;
	background: none; border: 0; color: var(--terrakotta-dunkel);
}
.com-users-login__options .list-group-item:hover,
.com-users-login__options .list-group-item:focus-visible { text-decoration: underline; }

@media (min-width: 40rem) {
	.com-users-login__options { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.6rem; }
}