/* Verzeichnis – Lokale, Unterkünfte, Anbieter */

.verzeichnis__rubriken { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.verzeichnis__knopf {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .95rem; border: 1px solid var(--linie, #E0D4C0); border-radius: 999px;
	background: var(--stein-000, #fff); color: var(--tinte, #241F1C);
	text-decoration: none; font-size: .9rem; font-weight: 500;
}
.verzeichnis__knopf:hover { background: var(--stein-200, #EFE6D8); color: var(--tinte, #241F1C); }
.verzeichnis__knopf.ist-aktiv {
	background: var(--terrakotta, #B4502A); border-color: var(--terrakotta, #B4502A); color: #fff;
}
.verzeichnis__anzahl { font-size: .78rem; opacity: .7; }

.verzeichnis__filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 2rem; }
.verzeichnis__filter input[type="search"] { flex: 1 1 14rem; }
.verzeichnis__filter select { flex: 0 1 13rem; }

.verzeichnis__leer {
	background: var(--stein-000, #fff); border: 1px dashed var(--stein-400, #C9B99F);
	border-radius: var(--radius-gross, 18px); padding: 2rem; text-align: center;
}

.eintraege {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.eintrag {
	position: relative;
	background: var(--stein-000, #fff);
	border: 1px solid var(--linie, #E0D4C0);
	border-radius: var(--radius-gross, 18px);
	padding: 1.4rem;
	transition: box-shadow .16s ease, transform .16s ease;
}
.eintrag:hover { box-shadow: var(--schatten-hoch, 0 10px 30px rgba(0,0,0,.12)); transform: translateY(-2px); }

/* Premium: ruhig hervorgehoben, nicht marktschreierisch */
.eintrag--premium {
	border-color: var(--gold, #C08F31);
	box-shadow: 0 0 0 1px rgba(192, 143, 49, .25);
	grid-column: span 1;
}
.eintrag__abzeichen {
	display: inline-block; margin-bottom: .5rem;
	background: var(--gold, #C08F31); color: #fff;
	font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: .15rem .6rem; border-radius: 999px;
}

.eintrag__titel { font-size: 1.2rem; margin: 0 0 .3rem; }
.eintrag__titel a { color: var(--tinte, #241F1C); text-decoration: none; }
.eintrag__titel a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.eintrag__titel a:hover { color: var(--terrakotta-dunkel, #8E3C1E); }

.eintrag__meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; font-size: .83rem; color: var(--tinte-leise, #8A7F76); }
.eintrag__rubrik {
	background: var(--terrakotta-hell, #F0DDD2); color: var(--terrakotta-dunkel, #8E3C1E);
	padding: .1rem .5rem; border-radius: 999px; font-weight: 500;
}
.eintrag__teil::before { content: '📍'; margin-right: .2rem; }
.eintrag__preis { font-weight: 600; color: var(--tinte-weich, #5C534C); }

.eintrag__text { margin: 0 0 .6rem; font-size: .94rem; color: var(--tinte-weich, #5C534C); }

.eintrag__merkmale { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .6rem; padding: 0; }
.eintrag__merkmale li {
	font-size: .76rem; border: 1px solid var(--linie, #E0D4C0); border-radius: 999px;
	padding: .1rem .55rem; color: var(--tinte-weich, #5C534C);
}

.eintrag__kontakt { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; font-size: .82rem; color: var(--tinte-leise, #8A7F76); }

/* Einzelansicht */
.ort__zurueck { font-size: .9rem; }
.ort__zurueck a { text-decoration: none; }
.ort__rubrik {
	display: inline-block; margin: 0 0 .4rem;
	background: var(--terrakotta-hell, #F0DDD2); color: var(--terrakotta-dunkel, #8E3C1E);
	padding: .15rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 500;
}
.ort__meta { display: flex; gap: 1rem; color: var(--tinte-leise, #8A7F76); font-size: .9rem; }
.ort__einleitung { font-size: 1.1rem; color: var(--tinte-weich, #5C534C); max-width: 46rem; }
.ort__text { max-width: 46rem; }
.ort__merkmale { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.5rem; }
.ort__merkmale li {
	border: 1px solid var(--linie, #E0D4C0); border-radius: 999px;
	padding: .25rem .8rem; font-size: .85rem; background: var(--stein-000, #fff);
}
.ort__daten {
	background: var(--stein-000, #fff); border: 1px solid var(--linie, #E0D4C0);
	border-radius: var(--radius-gross, 18px); padding: 1.25rem 1.5rem; max-width: 34rem;
}
.ort--premium .ort__daten { border-color: var(--gold, #C08F31); }
.ort__daten dt {
	font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--tinte-leise, #8A7F76); margin-top: 1rem;
}
.ort__daten dt:first-child { margin-top: 0; }
.ort__daten dd { margin: .15rem 0 0; }

/* Bilder */
.eintrag__bild { margin: -1.4rem -1.4rem 1rem; position: relative; }

/* Etikett auf dem Bild: oben links, mit etwas Schatten, damit es auch auf
 * hellen Fotos lesbar bleibt (21.9.2026) */
.eintrag__bild .eintrag__abzeichen {
	position: absolute; top: .8rem; left: .8rem; margin: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
/* Beispiel „Basis“: zurückhaltend dunkel, Premium bleibt golden */
.eintrag__abzeichen--basis { background: var(--tinte, #241F1C); }
/* Kopfbild der Karte. Seit 21.9.2026 eine kleine Bildschau: Alle Bilder liegen
 * übereinander, das aktive wird weich eingeblendet und zoomt dabei langsam
 * heran. Der Rahmen gibt Höhe und Rundung vor, die Bilder füllen ihn aus. */
.eintrag__bild {
	height: 10rem; overflow: hidden;
	border-radius: var(--radius-gross, 18px) var(--radius-gross, 18px) 0 0;
}
.eintrag__bild img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.eintrag__folie { opacity: 0; transition: opacity 1.4s ease; }
.eintrag__folie.ist-aktiv { opacity: 1; }
.eintrag__bild--schau .eintrag__folie.ist-aktiv { animation: eintragZoom 6s ease-out forwards; }
@keyframes eintragZoom { from { transform: scale(1); } to { transform: scale(1.15); } }

/* Punkte: zeigen, wie viele Bilder es gibt und welches gerade läuft */
.eintrag__punkte {
	position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%); z-index: 1;
	display: flex; gap: .3rem; padding: .25rem .45rem; border-radius: 999px;
	background: rgba(27, 25, 23, .35);
}
.eintrag__punkte i {
	display: block; width: .38rem; height: .38rem; border-radius: 999px;
	background: rgba(255, 255, 255, .55); transition: width .3s ease, background .3s ease;
}
.eintrag__punkte i.ist-aktiv { width: 1rem; background: #fff; }
/* Punkte und Etikett sind nur Anzeige – der Klick geht weiter an die Karte */
.eintrag__bild .eintrag__abzeichen { z-index: 1; }
.eintrag__punkte, .eintrag__bild .eintrag__abzeichen { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.eintrag__folie { transition: none; }
	.eintrag__bild--schau .eintrag__folie.ist-aktiv { animation: none; }
}
.ort__bild { margin: 0 0 1.5rem; max-width: 46rem; }
.ort__bild img { width: 100%; border-radius: var(--radius-gross, 18px); }

/* --- Interaktive Karte, eingepasst in die Farbwelt der Seite ------------- */

.matera-karte__flaeche {
	width: 100%;
	min-height: 300px;
	border: 1px solid var(--linie, #E0D4C0);
	border-radius: var(--radius-gross, 18px);
	background: var(--stein-200, #EFE6D8);
	z-index: 0;
	overflow: hidden;
}

.matera-karte__zaehler {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
	margin: 0 0 .75rem; font-size: .85rem; color: var(--tinte-weich, #5C534C);
}
.matera-karte__legende { display: inline-flex; align-items: center; gap: .4rem; }
.matera-karte__punkt {
	width: .8rem; height: .8rem; border-radius: 50%;
	border: 2px solid var(--stein-000, #fff);
	box-shadow: 0 0 0 1px rgba(36, 31, 28, .2);
}
.matera-karte__punkt--sehenswuerdigkeit { background: var(--terrakotta, #B4502A); }
.matera-karte__punkt--verzeichnis { background: var(--murgia, #6C7A57); }
.matera-karte__punkt--premium { background: var(--gold, #C08F31); }
.matera-karte__anzahl { margin-left: auto; color: var(--tinte-leise, #8A7F76); }
.matera-karte__hinweis { margin-top: .75rem; font-size: .84rem; color: var(--tinte-leise, #8A7F76); }

/* Eigene Stecknadel statt des Leaflet-Standardbildes */
.kartennadel { background: none; border: 0; }
.kartennadel__punkt {
	display: block; width: 18px; height: 18px;
	background: var(--nadel, #B4502A);
	border: 3px solid var(--stein-000, #fff);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 2px 5px rgba(36, 31, 28, .35);
}

/* Gebündelte Marker
 *
 * Dunkles Terrakotta-Braun mit hellem Rand wie bei den Stecknadeln, die Zahl
 * hell darauf (Kontrast etwa 7:1).
 *
 * Die Zahl wird absolut in den Kreis gelegt statt per Flexbox: leaflet.css
 * wird nach dieser Datei geladen und setzt .leaflet-marker-icon auf
 * display: block – die Flex-Zentrierung griff deshalb nie, und die Zahl
 * stand oben links. Die doppelte Klasse haelt zusaetzlich gegen. */
.leaflet-marker-icon.kartenbuendel {
	display: block;
	background: var(--terrakotta-dunkel, #8E3C1E);
	border: 2px solid var(--stein-000, #FDFAF5);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(36, 31, 28, .35);
	box-sizing: border-box;
}
.kartenbuendel__zahl {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: inherit;
	font-weight: 700; font-size: .95rem; line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--stein-000, #FDFAF5);
}
.leaflet-marker-icon.kartenbuendel:hover { background: var(--terrakotta, #B4502A); }

/* Station eines Rundgangs: die Nummer im Marker.
 *
 * Gleicher Aufbau wie beim Buendel – die Zahl liegt absolut im Kreis,
 * weil leaflet.css nach dieser Datei geladen wird. */
.leaflet-marker-icon.kartennummer {
	display: block;
	background: var(--nadel, #B4502A);
	border: 2px solid var(--stein-000, #FDFAF5);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(36, 31, 28, .35);
	box-sizing: border-box;
}
.kartennummer__kreis {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: inherit;
	font-weight: 700; font-size: .9rem; line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--stein-000, #FDFAF5);
}
.leaflet-marker-icon.kartennummer:hover { background: var(--terrakotta-dunkel, #8E3C1E); }

/* Sprechblase */
.leaflet-container { font: inherit; }
.leaflet-popup-content-wrapper {
	border-radius: var(--radius, 10px);
	background: var(--stein-000, #fff);
	color: var(--tinte, #241F1C);
	box-shadow: var(--schatten-hoch, 0 10px 30px rgba(0,0,0,.2));
}
.leaflet-popup-tip { background: var(--stein-000, #fff); }
.leaflet-popup-content { margin: .9rem 1.1rem; }
.karte-blase__abzeichen {
	display: inline-block; margin-bottom: .35rem;
	background: var(--gold, #C08F31); color: #fff;
	font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: .1rem .5rem; border-radius: 999px;
}
.karte-blase__name { display: block; font-family: var(--serif, Georgia, serif); font-size: 1.05rem; }
.karte-blase__rubrik { font-size: .8rem; color: var(--terrakotta-dunkel, #8E3C1E); }
.karte-blase__adresse { font-size: .8rem; color: var(--tinte-leise, #8A7F76); margin-top: .15rem; }
.karte-blase__link { display: inline-block; margin-top: .5rem; font-size: .85rem; }

/* Bedienelemente */
.leaflet-bar a {
	background: var(--stein-000, #fff);
	color: var(--tinte, #241F1C);
	border-bottom-color: var(--linie, #E0D4C0);
}
.leaflet-bar a:hover { background: var(--stein-200, #EFE6D8); }
.leaflet-control-attribution {
	background: rgba(253, 250, 245, .85) !important;
	color: var(--tinte-leise, #8A7F76);
	font-size: .7rem;
}
.leaflet-control-attribution a { color: var(--terrakotta-dunkel, #8E3C1E); }

/* Bildmarker: runder Ausschnitt im farbigen Ring statt der Stecknadel */
.kartenbild { background: none; border: 0; }
.kartenbild__ring {
	display: block;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 3px solid var(--nadel, #B4502A);
	background: var(--stein-000, #fff);
	box-shadow: 0 2px 6px rgba(36, 31, 28, .35);
	overflow: hidden;
	position: relative;
	transition: transform .12s ease;
}
.kartenbild__ring img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
/* Kleine Spitze, damit der Kreis den Ort genau anzeigt */
.kartenbild__ring::after {
	content: '';
	position: absolute; left: 50%; bottom: -9px;
	width: 0; height: 0;
	transform: translateX(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--nadel, #B4502A);
}
.kartenbild:hover .kartenbild__ring { transform: scale(1.08); }

/* Bild in der Sprechblase: Knopf, der die Vollansicht öffnet */
.karte-blase__bild {
	display: block; position: relative;
	width: 100%; padding: 0; border: 0; background: none;
	border-radius: var(--radius, 10px);
	margin-bottom: .6rem; overflow: hidden; cursor: zoom-in;
}

.karte-blase__bild img {
	display: block; width: 100%; height: 7rem; object-fit: cover;
	transition: transform .25s ease;
}

.karte-blase__bild:hover img,
.karte-blase__bild:focus-visible img { transform: scale(1.05); }

.karte-blase__lupe {
	position: absolute; right: .4rem; bottom: .4rem;
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.6rem; height: 1.6rem;
	border-radius: 50%;
	background: rgba(36, 31, 28, .72); color: #fff;
	font-size: .82rem; line-height: 1;
}

/* Vollansicht eines Kartenbildes */
.kartenvollbild {
	position: fixed; inset: 0; z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(24, 20, 18, .88);
	backdrop-filter: blur(2px);
	cursor: zoom-out;
}

.kartenvollbild[hidden] { display: none; }

.kartenvollbild__rahmen {
	margin: 0; max-width: min(1100px, 100%); max-height: 100%;
	display: flex; flex-direction: column; gap: .7rem;
	cursor: default;
}

.kartenvollbild__rahmen img {
	display: block; max-width: 100%;
	max-height: calc(100vh - 8rem);
	width: auto; height: auto;
	object-fit: contain;
	border-radius: var(--radius, 10px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
	background: #241F1C;
}

.kartenvollbild__rahmen figcaption {
	color: #F4EDE6; text-align: center;
	font-size: .92rem; line-height: 1.4;
}

.kartenvollbild__rahmen figcaption:empty { display: none; }

.kartenvollbild__zu {
	position: absolute; top: .8rem; right: .9rem;
	width: 2.6rem; height: 2.6rem;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .14); color: #fff;
	font-size: 1.7rem; line-height: 1; cursor: pointer;
	transition: background .2s ease;
}

.kartenvollbild__zu:hover { background: rgba(255, 255, 255, .28); }

body.hat-vollbild { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.karte-blase__bild img { transition: none; }
	.karte-blase__bild:hover img,
	.karte-blase__bild:focus-visible img { transform: none; }
}

/* --- Anzeige aufgeben ----------------------------------------------------- */

.anzeigeformular { max-width: 46rem; }
.anzeigeformular--pakete { max-width: 52rem; }
.anzeigeformular__einleitung { font-size: 1.05rem; color: var(--tinte-weich, #5C534C); margin-bottom: 1.75rem; }

.anzeigeformular__block {
	background: var(--stein-000, #FDFAF5);
	border: 1px solid var(--linie, #E0D4C0);
	border-radius: var(--radius-gross, 18px);
	padding: 1.25rem 1.5rem 1.4rem;
	margin: 0 0 1.25rem;
	min-width: 0;
}
.anzeigeformular__block legend {
	float: left; width: 100%;
	font-family: var(--serif, Georgia, serif);
	font-size: 1.2rem; margin: 0 0 1rem; padding: 0;
	color: var(--tinte, #241F1C);
}
.anzeigeformular__block legend + * { clear: both; }

.anzeigeformular .control-group { margin-bottom: 1rem; }
.anzeigeformular .control-group:last-child { margin-bottom: 0; }
.anzeigeformular .control-label label,
.anzeigeformular .control-label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.anzeigeformular .star { color: var(--terrakotta, #B4502A); }
.anzeigeformular .controls input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.anzeigeformular .controls select,
.anzeigeformular .controls textarea { width: 100%; }
.anzeigeformular .form-text,
.anzeigeformular small { display: block; margin-top: .3rem; font-size: .82rem; color: var(--tinte-leise, #8A7F76); }

.anzeigeformular__paar { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.anzeigeformular__paar .control-group:last-child { margin-bottom: 1rem; }

.anzeigeformular__bild {
	display: block; width: 100%; max-width: 20rem; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--radius, 10px); margin-bottom: .6rem; background: var(--stein-200, #EFE6D8);
}

/* Merkmale als Kacheln zum Anhaken */
.anzeigeformular__merkmale fieldset { border: 0; margin: 0; padding: 0; }
.anzeigeformular__merkmale .form-check,
.anzeigeformular__merkmale .checkboxes > div { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .4rem .5rem 0; }
.anzeigeformular__merkmale input[type="checkbox"] { accent-color: var(--terrakotta, #B4502A); }
.anzeigeformular__merkmale label { font-weight: 400; font-size: .92rem; }

/* Pakete: nebeneinander vergleichbar, Premium ruhig hervorgehoben */
.anzeigeformular__pakete {
	display: grid; gap: 1rem; align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-top: .35rem;
}
.paketkarte {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid var(--linie, #E0D4C0); border-radius: var(--radius-gross, 18px);
	padding: 1.35rem 1.35rem 1.25rem; background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.paketkarte:hover { box-shadow: var(--schatten-weich, 0 8px 24px -12px rgba(36, 31, 28, .18)); }
.paketkarte--premium {
	border-color: var(--gold, #C08F31);
	box-shadow: 0 0 0 1px rgba(192, 143, 49, .35), var(--schatten-weich, 0 8px 24px -12px rgba(36, 31, 28, .18));
	background: linear-gradient(180deg, #FBF5E9 0, #fff 7rem);
}
.paketkarte:focus-within { box-shadow: 0 0 0 1px var(--terrakotta, #B4502A), 0 0 0 4px rgba(180, 80, 42, .18); }

.paketkarte__abzeichen {
	position: absolute; top: 0; right: 1.2rem; transform: translateY(-50%);
	background: var(--gold, #C08F31); color: #fff;
	font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	padding: .2rem .7rem; border-radius: 999px;
}
.anzeigeformular .paketkarte__name {
	font-family: var(--sans, system-ui, sans-serif); font-size: .82rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .35rem;
	color: var(--tinte-weich, #5C534C);
}
.paketkarte--premium .paketkarte__name { color: #8A6420; }
.paketkarte__preis { margin: 0 0 .4rem; color: var(--tinte-weich, #5C534C); font-size: .95rem; }
.paketkarte__preis strong {
	font-family: var(--serif, Georgia, serif); font-size: 2.1rem; font-weight: 600; line-height: 1.1;
	color: var(--tinte, #241F1C);
}
.paketkarte__text { margin: 0 0 1rem; font-size: .9rem; color: var(--tinte-weich, #5C534C); min-height: 2.8em; }

.paketkarte__leistungen {
	list-style: none; margin: 0 0 1.25rem; padding: 1rem 0 0; flex: 1 1 auto;
	border-top: 1px solid var(--linie, #E0D4C0);
	display: grid; gap: .45rem; align-content: start; font-size: .9rem;
}
.paketkarte__leistungen li { position: relative; padding-left: 1.55rem; line-height: 1.4; }
.paketkarte__leistungen li::before {
	content: ''; position: absolute; left: .1rem; top: .28em;
	width: .95rem; height: .95rem; border-radius: 50%;
	background: var(--stein-200, #EFE6D8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%238E3C1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.paketkarte--premium .paketkarte__leistungen li::before {
	background-color: #F3E6C8;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%238A6420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.paketkarte__leistungen .paketkarte__alles { font-weight: 600; }

/* Name, Preis, Text, Liste und Knopf beider Karten auf gleicher Höhe */
@supports (grid-template-rows: subgrid) {
	.paketkarte { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
}

/* „… wählen“ führt zum Formular des Pakets */
.paketkarte__knopf {
	display: flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .7rem 1rem; border-radius: 999px;
	font-weight: 600; font-size: .95rem; text-align: center; text-decoration: none;
	border: 1px solid var(--stein-400, #C9B99F); color: var(--tinte, #241F1C); background: transparent;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.paketkarte__knopf:hover { background: var(--stein-200, #EFE6D8); color: var(--tinte, #241F1C); }
.paketkarte--premium .paketkarte__knopf { background: var(--terrakotta, #B4502A); border-color: var(--terrakotta, #B4502A); color: #fff; }
.paketkarte--premium .paketkarte__knopf:hover { background: var(--terrakotta-dunkel, #8E3C1E); color: #fff; }

@media (max-width: 599px) {
	.anzeigeformular__block { padding: 1.1rem 1rem 1.2rem; }
	.anzeigeformular__pakete { gap: 1.4rem; }
	.paketkarte__text { min-height: 0; }
	.paketkarte__preis strong { font-size: 1.85rem; }
}

.anzeigeformular__hinweis { font-size: .88rem; color: var(--tinte-weich, #5C534C); margin: .9rem 0 0; }

.anzeigeformular__haken { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; margin-bottom: .6rem; }
.anzeigeformular__haken input { margin-top: .3rem; accent-color: var(--terrakotta, #B4502A); flex: 0 0 auto; }

.anzeigeformular__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }

/* Schrittanzeige über Paketwahl und Formular */
.anzeigeschritte {
	list-style: none; margin: 0 0 1.5rem; padding: 0;
	display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; counter-reset: schritt;
	font-size: .88rem; color: var(--tinte-leise, #8A7F76);
}
.anzeigeschritte li { counter-increment: schritt; display: inline-flex; align-items: center; gap: .45rem; }
.anzeigeschritte li::before {
	content: counter(schritt);
	display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
	border: 1px solid var(--stein-400, #C9B99F); font-size: .78rem; font-weight: 600;
}
.anzeigeschritte .ist-aktiv { color: var(--tinte, #241F1C); font-weight: 600; }
.anzeigeschritte .ist-aktiv::before { background: var(--terrakotta, #B4502A); border-color: var(--terrakotta, #B4502A); color: #fff; }
.anzeigeschritte .ist-erledigt::before { content: '✓'; background: var(--terrakotta-hell, #F0DDD2); border-color: var(--terrakotta-hell, #F0DDD2); color: var(--terrakotta-dunkel, #8E3C1E); }
.anzeigeschritte a { color: inherit; }

/* Gewähltes Paket über dem Formular */
.paketleiste {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem;
	border: 1px solid var(--linie, #E0D4C0); border-left: 4px solid var(--stein-400, #C9B99F);
	border-radius: var(--radius, 10px); background: #fff; padding: .85rem 1.1rem; margin: 0 0 1.25rem;
}
.paketleiste--premium { border-left-color: var(--gold, #C08F31); background: linear-gradient(90deg, #FBF5E9, #fff 60%); }
.paketleiste__wahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.paketleiste__etikett { font-size: .82rem; color: var(--tinte-leise, #8A7F76); }
.paketleiste__name { font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
.paketleiste--premium .paketleiste__name { color: #8A6420; }
.paketleiste__preis { font-size: .9rem; color: var(--tinte-weich, #5C534C); }
.paketleiste__mehr { margin: 0; font-size: .86rem; color: var(--tinte-weich, #5C534C); flex: 1 1 18rem; text-align: right; }
.paketleiste__mehr span { display: block; }
.paketleiste__mehr a { font-weight: 600; }

.anzeigeformular__erklaerung { margin: -.35rem 0 1rem; font-size: .88rem; color: var(--tinte-weich, #5C534C); }
.anzeigeformular__hinweis--oben { margin: 0 0 .9rem; }

/* Bilder */
.bilderwahl__liste {
	list-style: none; margin: 0 0 .9rem; padding: 0;
	display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.bilderwahl__liste:empty { display: none; }
.bilderwahl__bild { position: relative; border-radius: var(--radius, 10px); overflow: hidden; background: var(--stein-200, #EFE6D8); }
.bilderwahl__bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bilderwahl__bild--neu { outline: 2px dashed var(--stein-400, #C9B99F); outline-offset: -2px; }
.bilderwahl__bild.ist-weg img { opacity: .3; filter: grayscale(1); }
.bilderwahl__weg {
	position: absolute; left: .3rem; bottom: .3rem;
	display: inline-flex; align-items: center; gap: .3rem;
	background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .1rem .5rem .1rem .35rem;
	font-size: .75rem; font-weight: 500; cursor: pointer;
}
.bilderwahl__weg input { accent-color: var(--terrakotta, #B4502A); margin: 0; }
.bilderwahl__titel {
	position: absolute; left: .3rem; top: .3rem;
	background: var(--tinte, #241F1C); color: #fff; border-radius: 999px;
	font-size: .68rem; font-weight: 600; letter-spacing: .04em; padding: .08rem .5rem;
}
.bilderwahl__meldung { margin: .4rem 0 0; font-size: .86rem; font-weight: 600; color: var(--terrakotta-dunkel, #8E3C1E); }
.bilderwahl__meldung:empty { display: none; }

/* Standort im Anzeigenformular */
.nadelwahl--anzeige { margin: .25rem 0 1.1rem; }
.nadelwahl--anzeige .nadelwahl__titel { font-weight: 600; font-size: .92rem; margin: 0 0 .2rem; }
.nadelwahl--anzeige .nadelwahl__hinweis { color: var(--tinte-leise, #8A7F76); font-size: .82rem; }
.nadelwahl--anzeige .nadelwahl__karte { border-color: var(--linie, #E0D4C0); border-radius: var(--radius, 10px); margin-bottom: .5rem; }
.nadelwahl--anzeige .btn.btn--leise {
	background: transparent; color: var(--tinte, #241F1C); border-color: var(--stein-400, #C9B99F);
	padding: .35rem .85rem; font-size: .84rem;
}
.nadelwahl--anzeige .btn.btn--leise:hover { background: var(--stein-200, #EFE6D8); }

/* Eintragsseite: Galerie, Aktionen, Angebote, Social Media */
.galerie.ort__galerie { max-width: 46rem; margin: 0 0 1.5rem; }
.ort__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem; }
.ort__knopf,
.ort__knopf--kontakt a {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .55rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none;
	border: 1px solid var(--stein-400, #C9B99F); color: var(--tinte, #241F1C); background: #fff;
}
.ort__knopf:hover { background: var(--stein-200, #EFE6D8); color: var(--tinte, #241F1C); }
.ort__knopf--kontakt { padding: 0; border: 0; background: none; }
.ort__knopf--kontakt a { background: var(--terrakotta, #B4502A); border-color: var(--terrakotta, #B4502A); color: #fff; }
.ort__knopf--kontakt a:hover { background: var(--terrakotta-dunkel, #8E3C1E); color: #fff; }
.ort__angebote {
	max-width: 46rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem;
	border-radius: var(--radius-gross, 18px); background: #FBF5E9; border: 1px solid rgba(192, 143, 49, .45);
}
.ort__angebote-titel { font-size: 1.05rem; margin: 0 0 .35rem; color: #8A6420; }
.ort__angebote p { margin: 0; }
.ort__maps { font-size: .88rem; }
.ort__social { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.ort__social a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; font-size: .92rem; }
.ort__social svg { flex: 0 0 auto; }

.meineanzeige__umstieg { font-weight: 600; }

@media (max-width: 599px) {
	.paketleiste__mehr { text-align: left; }
	.ort__aktionen { flex-direction: column; align-items: stretch; }
	.ort__knopf, .ort__knopf--kontakt a { justify-content: center; width: 100%; box-sizing: border-box; }
	.ort__knopf--kontakt, .ort__knopf--kontakt joomla-hidden-mail { display: block; width: 100%; }
}

/* Kostenloser Testmonat (Basis) */
.paketkarte__test {
	display: block; margin: .75rem 0 0; padding: .55rem .75rem;
	border-radius: var(--radius, 10px); background: #F1F4EC; border: 1px solid #D3DCC6;
	color: #45522F; font-size: .86rem; line-height: 1.45;
}
.paketkarte__test strong { display: block; color: #36422A; font-size: .92rem; }
.paketkarte__knoepfe { display: grid; gap: .45rem; align-content: end; }
.paketkarte__knopf--test { background: var(--murgia, #6C7A57); border-color: var(--murgia, #6C7A57); color: #fff; }
.paketkarte__knopf--test:hover { background: #56633F; color: #fff; }
.paketkarte__nebenlink { text-align: center; font-size: .86rem; }
.paketkarte > .paketkarte__knopf { align-self: end; }

.testerklaerung {
	margin: 1.25rem 0 0; padding: 1rem 1.25rem;
	border-radius: var(--radius-gross, 18px); background: #F6F8F2; border: 1px solid #D3DCC6;
}
.testerklaerung__titel { font-size: 1.05rem; margin: 0 0 .5rem; }
.testerklaerung__liste { margin: 0; padding-left: 1.2rem; font-size: .92rem; color: var(--tinte-weich, #5C534C); }
.testerklaerung__liste li { margin-bottom: .2rem; }

.paketleiste--test { border-left-color: var(--murgia, #6C7A57); background: linear-gradient(90deg, #F1F4EC, #fff 60%); }
.paketleiste--test .paketleiste__name { color: #45522F; }
.statusmarke--test { background: #E4EADB; color: #45522F; }
.meineanzeige__testende {
	grid-column: 1 / -1; margin: 0 0 .6rem; padding: .5rem .75rem; border-radius: var(--radius, 10px);
	background: #F1F4EC; color: #45522F; font-size: .88rem;
}

/* --- Meine Anzeigen ------------------------------------------------------- */

.meineanzeigen { max-width: 52rem; }
.meineanzeigen__kopf { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.meineanzeigen__kopf h1 { margin: 0; }
.meineanzeigen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.meineanzeige {
	display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.1rem;
	background: var(--stein-000, #FDFAF5); border: 1px solid var(--linie, #E0D4C0);
	border-radius: var(--radius-gross, 18px); padding: 1rem;
}
@media (max-width: 34rem) { .meineanzeige { grid-template-columns: 1fr; } }
.meineanzeige__bild { border-radius: var(--radius, 10px); overflow: hidden; background: var(--stein-200, #EFE6D8); aspect-ratio: 3 / 2; }
.meineanzeige__bild img { width: 100%; height: 100%; object-fit: cover; }
.meineanzeige__status { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .35rem; }
.meineanzeige__titel { font-size: 1.2rem; margin: 0 0 .2rem; }
.meineanzeige__meta { font-size: .86rem; color: var(--tinte-leise, #8A7F76); margin: 0 0 .5rem; }
.meineanzeige__aktionen { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; font-size: .9rem; }
.meineanzeige__zurueck { color: var(--tinte-leise, #8A7F76); }

.statusmarke {
	display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: .15rem .6rem; border-radius: 999px; background: var(--stein-200, #EFE6D8); color: var(--tinte-weich, #5C534C);
}
.statusmarke--online { background: var(--murgia, #6C7A57); color: #fff; }
.statusmarke--pruefung { background: var(--gold, #C08F31); color: #fff; }
.statusmarke--offen { background: var(--terrakotta-hell, #F0DDD2); color: var(--terrakotta-dunkel, #8E3C1E); }
.statusmarke--bezahlt { background: #E4EADB; color: #4A5639; }

.meineanzeigen__zahlung {
	margin-top: 1.5rem; padding: 1.1rem 1.4rem; border-radius: var(--radius-gross, 18px);
	background: var(--terrakotta-hell, #F0DDD2); border: 1px solid #E5C4B3;
}
.meineanzeigen__zahlung h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.meineanzeigen__zahlung p { margin: 0; }
.meineanzeigen__hinweis { margin-top: 1.25rem; font-size: .88rem; color: var(--tinte-leise, #8A7F76); }

/* Hinweis im Verzeichnis */
.verzeichnis__werben {
	margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-gross, 18px);
	border: 1px dashed var(--stein-400, #C9B99F); background: var(--stein-000, #FDFAF5);
	display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
}
.verzeichnis__werben p { margin: 0; }

/* Kopf der Verzeichnisseite: Überschrift, darunter der dezente Hinweis für Anbieter */
.verzeichnis__kopf { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; margin-bottom: 1.25rem; }
.verzeichnis__kopf h1 { margin: 0; }

/* Hinweisleiste „Ihr Geschäft in Matera?“ */
.werbeleiste {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
	padding: .8rem 1.1rem;
	background: var(--stein-000, #FDFAF5);
	border: 1px solid var(--linie, #E0D4C0); border-left: 3px solid var(--terrakotta, #B4502A);
	border-radius: var(--radius, 10px);
}
.werbeleiste__zeichen { display: inline-flex; color: var(--terrakotta, #B4502A); }
.werbeleiste__text { margin: 0; flex: 1 1 20rem; font-size: .95rem; color: var(--tinte-weich, #5C534C); }
.werbeleiste__text strong { color: var(--tinte, #241F1C); font-weight: 600; }
.werbeleiste__knopf {
	white-space: nowrap; font-weight: 600; font-size: .92rem; text-decoration: none;
	color: var(--terrakotta-dunkel, #8E3C1E);
	padding: .45rem .9rem; border: 1px solid var(--stein-400, #C9B99F); border-radius: 999px;
	transition: background .15s ease;
}
.werbeleiste__knopf:hover, .werbeleiste__knopf:focus-visible { background: var(--stein-200, #EFE6D8); }

/* Umschalter Karte / Satellit im Stil der Seite */
.leaflet-control-layers {
	background: var(--stein-000, #FDFAF5);
	border: 1px solid var(--linie, #E0D4C0);
	border-radius: var(--radius, 10px);
	box-shadow: var(--schatten-weich, 0 2px 8px rgba(0,0,0,.12));
	padding: .35rem .55rem;
	font-size: .88rem;
}
.leaflet-control-layers-base label { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; cursor: pointer; }
.leaflet-control-layers-base input { accent-color: var(--terrakotta, #B4502A); }
.leaflet-control-layers-base label:hover { color: var(--terrakotta-dunkel, #8E3C1E); }
.leaflet-control-layers-separator { display: none; }

/* Standortwahl im Backend-Formular (nadel-setzen.js) */
.nadelwahl { margin-top: 1.5rem; }
.nadelwahl__titel { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.nadelwahl__hinweis { margin: 0 0 .6rem; font-size: .875rem; color: #6c757d; }
/* Eigene Stapelebene: Leaflet setzt seine Ebenen auf z-index 400–1000 und
   läge sonst beim Scrollen über dem mitlaufenden Seitenkopf (z-index 40). */
.nadelwahl__karte { position: relative; z-index: 0; border: 1px solid #dfe3e7; border-radius: .5rem; overflow: hidden; cursor: crosshair; }
.nadelwahl__felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-top: .75rem; }
.nadelwahl__felder .control-group { margin-bottom: .5rem; }

/* ------------------------------------------------------------------
 * Gesundheit: Krankenhaus, Notaufnahme, Apotheken, Ärzte
 * ------------------------------------------------------------------ */
.kartensymbol { background: none; border: 0; }
.kartensymbol__kreis {
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--nadel, #1565C0);
	border: 2px solid var(--stein-000, #fff);
	box-shadow: 0 2px 5px rgba(36, 31, 28, .35);
	color: #fff;
}
.kartensymbol__kreis svg { width: 15px; height: 15px; fill: currentColor; }
/* Parafarmacia: gleiche Farbe wie Apotheke, aber hell – ohne Rezeptmedikamente */
.kartensymbol__kreis--hell { background: var(--stein-000, #fff); color: var(--nadel); border-color: var(--nadel); }
.kartensymbol--legende .kartensymbol__kreis { width: 20px; height: 20px; border-width: 1.5px; box-shadow: none; }
.kartensymbol--legende .kartensymbol__kreis svg { width: 11px; height: 11px; }

.gesundheitshinweis {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
	margin: 0 0 1rem; padding: .8rem 1rem;
	border-left: 4px solid #C62828; border-radius: 6px;
	background: #FBEFEE; color: var(--tinte, #241F1C);
	font-size: .92rem;
}
.gesundheitshinweis p { margin: 0; }
.gesundheitshinweis__notruf { font-weight: 600; }
.gesundheitshinweis__nummer {
	display: inline-block; margin-left: .35rem; padding: .05rem .55rem;
	border-radius: 999px; background: #C62828; color: #fff; text-decoration: none; font-weight: 700;
}
.gesundheitshinweis__nummer:hover, .gesundheitshinweis__nummer:focus-visible { background: #8E1B1B; color: #fff; }
.gesundheitshinweis__notdienst a { color: #8E1B1B; }

.karte-blase__hinweis { font-size: .78rem; font-weight: 600; color: #8E1B1B; margin-top: .1rem; }
.karte-blase__zeiten { font-size: .78rem; color: var(--tinte-weich, #5C534C); margin-top: .3rem; line-height: 1.35; }
.karte-blase__aktionen { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.karte-blase__aktion {
	display: inline-block; padding: .2rem .6rem; border-radius: 999px;
	border: 1px solid var(--linie, #D9D0C5); font-size: .8rem; text-decoration: none;
}
.karte-blase__aktion--haupt { background: var(--terrakotta-dunkel, #8E3C1E); border-color: transparent; color: #fff !important; }
.karte-blase__nummer { font-weight: 400; opacity: .85; white-space: nowrap; }

/* ------------------------------------------------------------------ Webcams
   Drei Kacheln je Zeile, auf dem Tablet zwei, auf dem Handy eine. Das Bild
   sitzt in einem Rahmen mit festem Seitenverhältnis, damit die Seite beim
   Nachladen nicht springt. */
.webcams__einleitung { max-width: 46rem; color: var(--tinte-weich, #5C534C); }

.webcams__liste {
	list-style: none; margin: 1.4rem 0 0; padding: 0;
	display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}

.webcam {
	border: 1px solid var(--linie, #D9D0C5); border-radius: .6rem; overflow: hidden;
	background: var(--papier, #fff); display: flex; flex-direction: column;
}
.webcam--ruht { opacity: .78; }

.webcam__bild { position: relative; aspect-ratio: 16 / 9; background: #1B1917; }
.webcam__bild img, .webcam__rahmen { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }

/* Startfläche: das eigene Bild des Anbieters mit Abspielpfeil darüber */
.webcam__start {
	width: 100%; height: 100%; padding: 0; border: 0; background: #1B1917;
	cursor: pointer; display: block; position: relative;
}
.webcam__start img { opacity: .8; transition: opacity .2s; }
.webcam__start:hover img, .webcam__start:focus-visible img { opacity: 1; }
.webcam__pfeil {
	position: absolute; inset: 0; margin: auto; width: 3.4rem; height: 3.4rem;
	display: flex; align-items: center; justify-content: center;
	background: rgba(27, 25, 23, .72); color: #fff; border-radius: 50%;
	font-size: 1.3rem; padding-left: .2rem;
}
.webcam__start:hover .webcam__pfeil { background: var(--terrakotta-dunkel, #8E3C1E); }

/* Anbieter ohne eigenes Bild: Statt schwarzer Fläche die Bildunterschrift */
.webcam__platzhalter {
	position: absolute; left: 0; right: 0; bottom: 1rem; padding: 0 1rem;
	color: rgba(255, 255, 255, .7); font-size: .9rem; text-align: center;
}

/* Oben rechts: Viele Kameras blenden oben links Ort und Uhrzeit ein – das
 * Etikett soll diese Angaben nicht verdecken (21.9.2026). */
.webcam__zustand {
	position: absolute; top: .6rem; right: .6rem;
	background: rgba(27, 25, 23, .78); color: #fff;
	font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: .15rem .6rem; border-radius: 999px;
}
.webcam__zustand--live { background: #B3261E; }
.webcam__zustand--live::before {
	content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem;
	border-radius: 50%; background: #fff; vertical-align: middle;
}

.webcam__text { padding: .8rem .9rem 1rem; }
.webcam__titel { font-size: 1.05rem; margin: 0 0 .25rem; }
.webcam__ort { margin: 0 0 .5rem; font-size: .83rem; color: var(--tinte-leise, #8A7F76); }
.webcam__quelle, .webcam__original, .webcam__hinweis {
	margin: 0 0 .25rem; font-size: .82rem; color: var(--tinte-weich, #5C534C);
}
.webcam__hinweis { color: var(--tinte-leise, #8A7F76); }

.webcams__leer { padding: 1.2rem; border: 1px dashed var(--linie, #D9D0C5); border-radius: .6rem; }

.webcams__fuss {
	margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie, #D9D0C5);
	font-size: .86rem; color: var(--tinte-weich, #5C534C);
}

/* Auf der Detailseite steht die Kamera als eigener Abschnitt – genau so
 * breit wie das große Galeriebild darüber und ohne eigenen Rahmen, damit
 * beide bündig untereinander stehen (21.9.2026). */
.ort__webcam { margin: 1.6rem 0; max-width: 46rem; border: 0; border-radius: 0; background: none; overflow: visible; }
.ort__webcam .webcam__bild { border-radius: var(--radius-gross, 18px); overflow: hidden; }
/* Ein Standbild behält sein eigenes Seitenverhältnis: Kameras liefern 4:3
 * oder 16:9, und beim Zuschneiden fielen Zeitstempel und Einblendungen weg.
 * Ein YouTube-Rahmen bleibt bei 16:9. */
.ort__webcam .webcam__bild:has(.webcam__standbild) { aspect-ratio: auto; }
.ort__webcam .webcam__standbild { height: auto; }
.ort__webcam .webcam__quelle { margin-top: .6rem; }

@media (max-width: 62rem) {
	.webcams__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
	.webcams__liste { grid-template-columns: minmax(0, 1fr); }
}

/* Stand der eigenen Kamera im Anzeigenformular */
.webcamstand {
	margin: 0 0 .8rem; padding: .5rem .8rem; border-radius: .4rem;
	border: 1px solid var(--linie, #D9D0C5); font-size: .88rem;
}
.webcamstand--live { border-color: #2E7D4F; background: #EDF6F0; color: #1D5334; }
.webcamstand--offline, .webcamstand--pruefung { background: var(--stein-100, #F6F1E9); }
.webcamstand--abgelehnt { border-color: #B3261E; background: #FBEDEC; color: #8E1B1B; }

/* Galerie der Anzeigen: auch auf dem Handy fünf Kacheln je Reihe – zehn
 * Premium-Bilder bleiben so zwei ordentliche Reihen (21.9.2026) */
@media (max-width: 40rem) {
	.galerie__reihe.galerie__reihe--anzeige { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
}

/* Werbebanner im Kamerabild (21.9.2026)
 *
 * Klein, rund, unten rechts – wie bei den großen Webcam-Portalen. Es liegt
 * über dem eigenen Standbild bzw. dem Vorschaubild. Läuft eine YouTube-Kamera,
 * rückt es unter das Video: YouTube untersagt, etwas über den Player zu legen,
 * und unten rechts sitzen dort ohnehin die Bedienknöpfe. */
.webcam__buehne { position: relative; }
.webcam__banner {
	position: absolute; right: .8rem; bottom: .8rem; z-index: 2;
	display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden;
	background: #fff; border: 2px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.webcam__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.webcam__banner:hover,
.webcam__banner:focus-visible { transform: scale(1.06); box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.webcam__buehne.ist-gestartet .webcam__banner { position: static; margin: .5rem 0 0 auto; }
.ort__webcam .webcam__banner { width: 5.5rem; height: 5.5rem; right: 1rem; bottom: 1rem; }
@media (max-width: 40rem) {
	.webcam__banner, .ort__webcam .webcam__banner { width: 3.6rem; height: 3.6rem; right: .6rem; bottom: .6rem; }
}

/* Formular: Bannerwahl */
.bannerwahl { margin: 1rem 0; padding: 1rem; border: 1px dashed var(--linie, #D9D0C5); border-radius: .6rem; }
.bannerwahl__titel { margin: 0 0 .3rem; font-weight: 600; }
.bannerwahl__bisher { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.bannerwahl__bisher img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--linie, #D9D0C5); }

/* --- Immobilien (22.9.2026) ---------------------------------------------- */

/* Filter: beschriftete Felder in einem Raster, der Knopf unten rechts */
.immofilter {
	display: grid; gap: .75rem 1rem; width: 100%;
	grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); align-items: end;
}
.immofilter__feld { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.immofilter__feld span { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--tinte-weich, #5C534C); }
.immofilter .btn { justify-self: start; }
/* Die allgemeinen Filterregeln (flex-basis) würden hier die Höhe aufblähen */
.immofilter select,
.immofilter input { flex: none; width: 100%; box-sizing: border-box; }
.immofilter input { height: 41px; }

/* Karte: Preis groß, darunter die Eckdaten */
.immokarte__preis {
	margin: -.1rem 0 .15rem; font-size: 1.35rem; font-weight: 700; line-height: 1.2;
	color: var(--terrakotta-dunkel, #8E3C1E); font-variant-numeric: tabular-nums;
}
.immokarte__eckdaten { margin: 0 0 .55rem; font-size: .9rem; font-weight: 600; color: var(--tinte, #241F1C); }
.immokarte__fuss {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .2rem 0 0;
	font-size: .8rem; color: var(--tinte-leise, #8A7F76);
}

/* Energieklassen: die übliche Farbskala von Grün (sparsam) nach Rot */
.energieklasse {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.1rem; height: 1.45rem; padding: 0 .4rem; border-radius: 4px;
	font-size: .75rem; font-weight: 700; color: #fff; line-height: 1;
}
.energieklasse--a4 { background: #00733A; }
.energieklasse--a3 { background: #008C3F; }
.energieklasse--a2 { background: #23A346; }
.energieklasse--a1 { background: #6CB43F; }
.energieklasse--b  { background: #A5C63B; color: #1E2A10; }
.energieklasse--c  { background: #E1D531; color: #2E2A08; }
.energieklasse--d  { background: #F4B32C; color: #33240A; }
.energieklasse--e  { background: #EC8A2A; }
.energieklasse--f  { background: #E2561F; }
.energieklasse--g  { background: #C8241D; }

/* Kopf der Anzeige: Preis, Eckdaten, Anfrage-Knopf */
.immokopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem; margin-top: .6rem; }
.immokopf__preis {
	margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700;
	color: var(--terrakotta-dunkel, #8E3C1E); font-variant-numeric: tabular-nums;
}
.immokopf__eckdaten { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--tinte, #241F1C); }
.immokopf .ort__knopf { margin-left: auto; align-self: center; }

/* Steckbrief und Energie nebeneinander, auf dem Handy untereinander */
.immodaten {
	display: grid; gap: 1.25rem 2rem; margin: 1.75rem 0;
	padding: 1.25rem 1.5rem; background: var(--stein-000, #fff);
	border: 1px solid var(--linie, #E0D4C0); border-radius: var(--radius-gross, 18px);
}
.immodaten > h2 { margin: 0; font-size: 1.25rem; }
@media (min-width: 820px) {
	.immodaten { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.immodaten > h2 { grid-column: 1 / -1; }
}
.immodaten__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.immodaten__liste dt {
	font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--tinte-leise, #8A7F76);
}
.immodaten__liste dd { margin: .1rem 0 0; font-weight: 600; }

.energie__titel { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-leise, #8A7F76); margin: 0 0 .6rem; }
.energie__skala { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.energie__skala .energieklasse { min-width: 0; flex: 1 1 0; height: 1.9rem; opacity: .35; border-radius: 3px; font-size: .7rem; }
.energie__skala .energieklasse.ist-aktiv {
	opacity: 1; flex-grow: 1.8; height: 2.4rem; margin-top: -.25rem; font-size: .9rem;
	box-shadow: 0 0 0 2px var(--stein-000, #fff), 0 0 0 4px var(--tinte, #241F1C);
}
.energie__wert { margin: .7rem 0 0; font-size: .88rem; color: var(--tinte-weich, #5C534C); }

/* Anfrage an den Anbieter */
.anfrage {
	margin: 2rem 0 1rem; padding: clamp(1.25rem, 3vw, 2rem); max-width: 46rem;
	background: var(--stein-000, #fff); border: 1px solid var(--linie, #E0D4C0);
	border-radius: var(--radius-gross, 18px); scroll-margin-top: 6rem;
}
.anfrage__titel { margin: 0 0 .35rem; font-size: 1.35rem; }
.anfrage__hinweis { margin: 0 0 1.1rem; color: var(--tinte-weich, #5C534C); font-size: .92rem; }
.anfrage__form { display: grid; gap: .9rem; }
.anfrage__paar { display: grid; gap: .9rem; }
@media (min-width: 640px) { .anfrage__paar { grid-template-columns: 1fr 1fr; } }
.anfrage__feld { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.anfrage__feld span { font-size: .85rem; font-weight: 600; }
.anfrage__form .btn { justify-self: start; }
.anfrage__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.immohinweis { margin: 1.5rem 0 0; font-size: .82rem; color: var(--tinte-leise, #8A7F76); max-width: 46rem; }

@media (max-width: 639px) {
	.immokopf .ort__knopf { margin-left: 0; }
}
.immokopf__knopf { background: var(--terrakotta, #B4502A); border-color: var(--terrakotta, #B4502A); color: #fff; }
.immokopf__knopf:hover { background: var(--terrakotta-dunkel, #8E3C1E); color: #fff; }

/* Paketauswahl: eigene Preise für Immobilien */
.immopreise {
	margin: 1.5rem 0; padding: 1.1rem 1.4rem; border-radius: var(--radius-gross, 18px);
	background: var(--stein-000, #fff); border: 1px solid var(--linie, #E0D4C0);
}
.immopreise__titel { margin: 0 0 .35rem; font-size: 1.1rem; }
.immopreise p { margin: 0; color: var(--tinte-weich, #5C534C); }
.immopreise__preise { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .5rem !important; color: var(--tinte, #241F1C) !important; }