/* ==========================================================================
   Nendosplit Marktplatz — Stylesheet v2
   Design: "Marktplatz-Etikett" als Leitmotiv (Preis-Tag mit echtem
   Lochstanz-Ausschnitt per CSS), durchgehend serifenlose, moderne Grotesk
   für Überschriften wie Fließtext (Manrope), selbst gehostet — keine externen Font-Requests.
   Mobile-First: Basis-Regeln gelten für Mobile, Desktop-Anpassungen
   ausschließlich über min-width Media Queries ergänzt.
   ========================================================================== */

.km-wrap {
	--km-bg: #f4f5f0;
	--km-surface: #ffffff;
	--km-ink: #1b231d;
	--km-muted: #5c6961;
	--km-border: #dde3d8;
	--km-border-strong: #c7d0c1;
	--km-primary: #0a9396;
	--km-primary-dark: #076a6c;
	--km-primary-tint: #e7f4f5;
	--km-primary-strip: #bae1e2;
	--km-primary-contrast: #ffffff;
	--km-accent: #dba43f;
	--km-accent-dark: #96702a;
	--km-accent-ink: #362a10;
	--km-danger: #b3452f;
	--km-danger-tint: #fbeae6;

	--km-radius-sm: 3px;
	--km-radius-md: 4px;
	--km-radius-lg: 4px;

	--km-shadow-sm: 0 1px 2px rgba(20, 26, 21, 0.05), 0 1px 1px rgba(20, 26, 21, 0.04);
	--km-shadow-md: 0 10px 24px -8px rgba(20, 26, 21, 0.16), 0 2px 6px rgba(20, 26, 21, 0.05);
	--km-shadow-lg: 0 20px 40px -12px rgba(20, 26, 21, 0.24), 0 4px 10px rgba(20, 26, 21, 0.06);

	/* --km-font-serif zeigt bewusst auf denselben serifenlosen Stack wie
	   --km-font-sans (früher "Newsreader", eine Serifenschrift, für
	   Überschriften) — der Variablenname bleibt aus Kompatibilitätsgründen
	   an allen bisherigen Verwendungsstellen erhalten, verweist inhaltlich
	   aber jetzt komplett serifenlos. */
	--km-font-serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--km-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	font-family: var(--km-font-sans);
	font-size: 16px;
	color: var(--km-ink);
	line-height: 1.55;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

/* --- Vollflächiger Hintergrund (Streifen + grauer Seitenbereich) --------
   .km-wrap selbst hat bewusst kein eigenes Padding/max-width/Hintergrund
   mehr — dafür sorgen diese beiden Wrapper, jeweils nach demselben Muster:
   der äußere bricht per Full-Bleed-Trick bis zum Bildschirmrand aus (100vw,
   unabhängig von Theme-Containern), der innere zentriert den eigentlichen
   Inhalt wieder auf dieselbe Breite wie der Rest der Seite. So ist der
   Hintergrund immer randlos, während Inhalte weiterhin "boxed" wirken. --- */

.km-page-bg {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--km-bg);
}

.km-page-bg-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 4vw;
	box-sizing: border-box;
}

/* Modifier für den jeweils letzten/einzigen Inhaltsbereich einer Seite —
   mit großzügigerem oberen und unteren Abstand (entspricht dem, was früher
   .km-wrap als Padding mitgebracht hat). */
.km-page-bg-inner-content {
	padding: 20px 4vw 70px;
}

/* Zusätzlicher Bodenabstand auf Mobile, damit Inhalte nicht unter der
   fixierten Bottom-Navigation verschwinden (siehe .km-bottom-nav weiter
   unten sowie templates/parts/bottom-nav.php). */
@media (max-width: 859px) {
	.km-page-bg-inner-content {
		padding-bottom: 92px;
	}
}

.km-wrap *,
.km-wrap *::before,
.km-wrap *::after {
	box-sizing: inherit;
}

.km-wrap a {
	color: inherit;
	text-decoration: none !important;
}

.km-wrap .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.km-wrap h1,
.km-wrap h2,
.km-wrap h3 {
	font-family: var(--km-font-serif);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	color: var(--km-ink);
}

.km-wrap h1 { font-size: 2rem; }
.km-wrap h2 { font-size: 1.3rem; font-weight: 500; }
.km-wrap h3 { font-size: 1.08rem; }

@media (min-width: 640px) {
	.km-wrap h1 { font-size: 2.4rem; }
}

.km-wrap :focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(219, 164, 63, 0.55);
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.km-wrap * {
		animation: none !important;
		transition: none !important;
	}
}

/* --- Buttons -------------------------------------------------------- */

.km-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1.5px solid var(--km-border);
	background: var(--km-surface);
	color: var(--km-ink) !important;
	font-family: var(--km-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.km-btn:hover {
	border-color: var(--km-primary);
	box-shadow: var(--km-shadow-sm);
	transform: translateY(-1px);
}

.km-btn:active {
	transform: translateY(0);
}

.km-btn-primary {
	background: var(--km-primary);
	border-color: var(--km-primary);
	color: var(--km-primary-contrast) !important;
	box-shadow: var(--km-shadow-md);
}

.km-btn-primary:hover {
	background: var(--km-primary-dark);
	border-color: var(--km-primary-dark);
	box-shadow: var(--km-shadow-lg);
}

.km-btn-danger {
	color: var(--km-danger) !important;
	border-color: rgba(179, 69, 47, 0.35);
}

.km-btn-danger:hover {
	border-color: var(--km-danger);
}

.km-btn-small {
	padding: 8px 15px;
	font-size: 0.85rem;
}

.km-btn-block {
	width: 100%;
}

/* --- Login-Hinweis ---------------------------------------------------- */

.km-login-notice {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 32px 24px;
	text-align: center;
}

.km-login-notice p {
	margin: 0 0 18px;
	color: var(--km-muted);
	font-size: 1.02rem;
}

.km-login-notice .km-btn {
	margin: 0 4px;
}

/* --- Suchleiste ------------------------------------------------------ */
/* .km-searchbar ist nur der strukturelle Rahmen (Formular); die sichtbare
   Fläche (weiße Karte / Pille) trägt .km-searchbar-main allein — dadurch
   gibt es nur noch EINE sichtbare Ebene statt verschachtelter Flächen. */

.km-searchbar {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.km-top-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Mobile-Basis: KEIN eigener Rahmen/Hintergrund um die Leiste herum — die
   sichtbare Fläche ist allein die schlanke Such-Pille (.km-searchbar-search).
   Sonst entstünde der doppelte Kasten (Container + Feld), der die Leiste
   klobig und quadratisch wirken lässt. */
.km-searchbar-main {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.km-searchbar-field {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid var(--km-border-strong) !important;
	border-radius: 999px !important;
	padding: 12px 18px !important;
	background: var(--km-surface) !important;
	box-shadow: var(--km-shadow-sm) !important;
	transition: border-color 0.15s ease;
	min-width: 0;
}

.km-searchbar-field:focus-within {
	border-color: var(--km-primary) !important;
}

.km-searchbar-field svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--km-muted);
}

.km-searchbar-field input,
.km-searchbar-field select {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	flex: 1;
	min-width: 0;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--km-ink);
}

.km-searchbar-field input:focus,
.km-searchbar-field select:focus {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

.km-searchbar-field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 20px !important;
	cursor: pointer;
}

/* Teiletyp steckt auf Mobile in der Icon-Pill-Leiste darunter, in der
   Such-Pille wäre er doppelt. */
.km-searchbar-kat {
	display: none !important;
}

/* Standort-Icon rechts in der Such-Pille (Vorbild: kleinanzeigen.de-App) —
   öffnet bei Bedarf das PLZ/Umkreis-Popover. Ohne Klick wird ganz normal
   deutschlandweit gesucht, PLZ/Umkreis bleiben dann einfach leer. */
.km-searchbar-search {
	position: relative;
	padding-right: 42px !important;
}

.km-geo-trigger {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--km-muted);
	cursor: pointer;
	padding: 0;
}

.km-geo-trigger svg {
	width: 19px;
	height: 19px;
}

.km-geo-trigger-active,
.km-geo-trigger-active svg {
	color: var(--km-primary-dark);
}

.km-geo-trigger-active {
	background: var(--km-primary-tint);
}

/* PLZ + Umkreis stecken auf Mobile in einem Popover, das sich vom
   Standort-Icon aus öffnet — kein fester Platzverbrauch unter der Suche,
   wenn niemand die Umkreissuche nutzen möchte. */
.km-searchbar-main {
	position: relative;
}

.km-searchbar-geo {
	display: none;
	flex-direction: column;
	gap: 10px;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 270px;
	max-width: calc(100vw - 40px);
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 16px;
	z-index: 60;
}

.km-searchbar-geo.km-geo-open {
	display: flex;
}

.km-geo-popover-head {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--km-ink);
}

.km-searchbar-geo .km-searchbar-field {
	padding: 10px 14px !important;
}

.km-searchbar-geo .km-searchbar-divider {
	display: none;
}

.km-geo-apply {
	width: 100%;
	justify-content: center;
}

.km-searchbar-divider {
	display: none;
}

/* Auf Mobile übernimmt das Such-Overlay die Eingabe (Tippen auf das Feld
   öffnet es, siehe km-frontend.js), daher hier kein sichtbarer Button.
   Ab Desktop-Breite ist er ganz normal sichtbar und funktional wie zuvor. */
.km-searchbar-submit-btn {
	display: none;
}

/* --- Such-Overlay: Vollbild, öffnet sich beim Tippen auf die Suchleiste,
   mit Eingabefeld + "Letzte Suchen" (Vorbild: Kleinanzeigen-App). --- */

.km-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--km-surface);
	display: flex;
	flex-direction: column;
}

/* Das native [hidden]-Attribut hat als UA-Style eine niedrigere Priorität
   als jede Autor-Regel — daher muss display:none hier explizit mit
   höherer Spezifität (Klasse + Attribut) erzwungen werden, sonst bleibt
   das Overlay trotz [hidden] sichtbar (display:flex von oben gewinnt sonst). */
.km-search-overlay[hidden] {
	display: none;
}

.km-search-overlay-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1.5px solid var(--km-border);
	flex: 0 0 auto;
}

.km-search-overlay-back {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: var(--km-ink);
	cursor: pointer;
	padding: 0;
}

.km-search-overlay-back svg {
	width: 22px;
	height: 22px;
}

.km-search-overlay-field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid var(--km-border-strong);
	border-radius: var(--km-radius-sm);
	padding: 10px 14px;
	background: var(--km-bg);
}

.km-search-overlay-field svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--km-muted);
}

.km-search-overlay-field input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-size: 1rem;
	font-family: inherit;
	color: var(--km-ink);
}

.km-search-overlay-field input:focus {
	outline: none;
}

.km-search-overlay-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 18px 16px;
}

.km-search-overlay-recent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.9rem;
	color: var(--km-muted);
	margin-bottom: 10px;
}

.km-search-overlay-recent-head button {
	border: none;
	background: none;
	color: var(--km-primary-dark);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	padding: 0;
}

.km-search-overlay-recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-search-overlay-empty {
	color: var(--km-muted);
	font-size: 0.88rem;
}

.km-search-overlay-recent-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: none;
	background: none;
	padding: 11px 2px;
	font-size: 0.95rem;
	color: var(--km-ink);
	text-align: left;
	cursor: pointer;
	border-bottom: 1px solid var(--km-border);
}

.km-search-overlay-recent-item svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--km-muted);
}

/* --- Filterleiste (2. Zeile unter der Hauptsuche): Nendoroid-Nr., Serie,
   Zustand, Anbietertyp, PLZ, Umkreis. Bewusst als eigene Zeile statt in der
   Hauptsuchleiste, damit nichts überläuft oder gescrollt werden muss —
   die Chips brechen bei Bedarf einfach in mehrere Zeilen um. --- */

.km-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.km-filterbar-field {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--km-border-strong);
	border-radius: 999px;
	padding: 7px 13px;
	background: var(--km-surface);
	max-width: 100%;
}

.km-filterbar-field:focus-within {
	border-color: var(--km-primary);
}

.km-filterbar-field svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var(--km-muted);
}

.km-filterbar-field input,
.km-filterbar-field select {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	font-size: 0.85rem;
	font-family: inherit;
	color: var(--km-ink);
	min-width: 0;
	width: 108px;
	max-width: 100%;
}

.km-filterbar-field input:focus,
.km-filterbar-field select:focus {
	outline: none !important;
}

.km-filterbar-field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c6961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 18px !important;
	width: auto;
	max-width: 160px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.km-filterbar-field input {
	width: 96px;
}

@media (min-width: 640px) {
	.km-filterbar-field input,
	.km-filterbar-field select {
		font-size: 0.86rem;
	}
}

/* --- Teiletyp-Leiste: horizontal scrollbare Icon-Pills, Vorbild ist die
   Kategorienleiste der Kleinanzeigen-App. Das ist der wichtigste Filter
   und bekommt dadurch die prominenteste Position direkt unter der Suche. --- */

.km-category-pills {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 4px 2px 8px;
	margin: 2px -2px 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.km-category-pills::-webkit-scrollbar {
	display: none;
}

.km-category-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 80px;
	text-align: center;
}

.km-category-pill-icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--km-primary-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--km-primary-dark);
	transition: background 0.15s ease, color 0.15s ease;
}

.km-category-pill-icon svg {
	width: 24px;
	height: 24px;
}

.km-category-pill-label {
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--km-ink);
	max-width: 100%;
	overflow: hidden;
	overflow-wrap: anywhere;
	hyphens: auto;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.km-category-pill-active .km-category-pill-icon {
	background: var(--km-primary);
	color: #fff;
}

.km-category-pill-active .km-category-pill-label {
	color: var(--km-primary-dark);
}

/* --- "Weitere Filter"-Panel: klappt die selteneren Filter ein, damit die
   Kopfzeile auf Mobile schlank bleibt und Platz für Produkte bleibt. Nutzt
   natives <details>/<summary> — funktioniert ohne JavaScript, und Felder
   im geschlossenen Zustand werden beim Absenden trotzdem mit übertragen. --- */

.km-filter-panel {
	margin-top: 6px;
}

.km-filter-panel summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--km-primary-dark);
	list-style: none;
	padding: 4px 0;
}

.km-filter-panel summary::-webkit-details-marker {
	display: none;
}

.km-filter-chevron {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.km-filter-panel[open] .km-filter-chevron {
	transform: rotate(180deg);
}

.km-filter-panel .km-filterbar {
	margin-top: 10px;
}

/* --- Kopfzeile: Suchleiste + Inserieren/Meins (wie kleinanzeigen.de) ---
   .km-header-actions sitzt bewusst NUR neben Zeile 1 (.km-top-row), nicht
   neben der gesamten Suchleiste inkl. Filterzeile — so behält die Filter-
   zeile darunter die volle Breite und der Umkreis-Filter läuft nicht in
   eine dritte Zeile um. --- */

.km-top-bar {
	margin-bottom: 0;
}

/* Farbiger Streifen hinter Zeile 1 (Suche + Inserieren/Meins), Vorbild ist
   die grüne Kopfleiste von kleinanzeigen.de. Bricht bewusst bis zum
   Viewport-Rand aus dem sonst auf max-width begrenzten .km-wrap aus (der
   klassische "Full-Bleed"-Trick über 100vw + negative Margins), damit die
   Farbe wirklich über die volle Bildschirmbreite läuft. Der innere Wrapper
   zentriert den eigentlichen Inhalt danach wieder auf dieselbe Breite wie
   der Rest der Seite. */
.km-top-bar-strip {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--km-primary-strip);
}

.km-top-bar-strip-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 4vw;
	box-sizing: border-box;
}

/* Auf Mobile übernimmt die fixierte Bottom-Navigation (bottom-nav.php) die
   Funktion von "Teil inserieren"/"Meins" — deshalb hier standardmäßig
   ausgeblendet und erst ab Desktop-Breite wieder sichtbar (s. Media Query
   weiter unten), wo die Bottom-Navigation ihrerseits ausgeblendet ist. */
.km-header-actions {
	display: none;
}

.km-header-action {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--km-ink) !important;
	white-space: nowrap;
	text-align: center;
}

.km-header-action svg {
	width: 21px;
	height: 21px;
	color: var(--km-primary);
	flex: 0 0 auto;
}

.km-header-action:hover {
	color: var(--km-primary) !important;
}

.km-header-account {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: -12px;
}

.km-header-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0;
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-sm);
	box-shadow: var(--km-shadow-md);
	min-width: 190px;
	padding: 6px;
	z-index: 30;
}

.km-header-account:hover .km-header-dropdown,
.km-header-account:focus-within .km-header-dropdown {
	display: block;
}

.km-header-dropdown a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--km-radius-sm);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--km-ink) !important;
}

.km-header-dropdown a:hover {
	background: var(--km-primary-tint);
}

.km-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--km-muted);
	margin-bottom: 6px;
}

.km-field input,
.km-field select,
.km-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--km-border-strong);
	border-radius: var(--km-radius-sm);
	background: var(--km-bg);
	color: var(--km-ink);
	font-size: 0.96rem;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.km-field input::placeholder,
.km-field textarea::placeholder {
	color: #9aa39a;
}

#km_beschreibung_input {
	min-height: 130px;
	resize: vertical;
}

@media (min-width: 640px) {
	#km_beschreibung_input {
		min-height: 190px;
	}
}

.km-field input:focus,
.km-field select:focus,
.km-field textarea:focus {
	outline: none;
	border-color: var(--km-primary);
	background: var(--km-surface);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--km-primary) 16%, transparent);
}

.km-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
}

.km-field-hint {
	margin: 6px 0 0;
	font-size: 0.8rem;
	color: var(--km-muted);
	line-height: 1.4;
}

/* --- Kategorien-Sidebar (nur ab Tablet/Desktop; auf Mobile übernimmt die
   horizontale Teiletyp-Pill-Leiste in der Kopfzeile dieselbe Funktion,
   ohne den Platz für die Produkte wegzunehmen) ----------------------- */

.km-archive-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.km-category-sidebar {
	display: none;
	width: 100%;
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 18px;
}

.km-category-sidebar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--km-border);
}

.km-category-sidebar-head h2 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.km-category-sidebar-head a {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--km-primary);
}

.km-category-sidebar-head a:hover {
	text-decoration: underline !important;
}

.km-category-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-category-list > li {
	padding: 8px 0;
	border-bottom: 1px solid var(--km-border);
}

.km-category-list > li:first-child {
	padding-top: 0;
}

.km-category-list > li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.km-category-parent {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--km-ink);
	margin-bottom: 0;
	transition: color 0.15s ease;
}

.km-category-parent::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--km-border-strong);
	border-bottom: 2px solid var(--km-border-strong);
	transform: rotate(-45deg);
	flex: 0 0 auto;
}

.km-category-parent:hover,
.km-category-parent.km-category-active {
	color: var(--km-primary);
}

.km-category-parent.km-category-active::after {
	border-color: var(--km-primary);
}

.km-category-children {
	list-style: none;
	margin: 8px 0 0;
	padding: 0 0 0 14px;
	border-left: 1.5px solid var(--km-border);
}

.km-category-children li {
	margin-bottom: 7px;
}

.km-category-children li:last-child {
	margin-bottom: 0;
}

.km-category-children a {
	font-size: 0.86rem;
	color: var(--km-muted);
	transition: color 0.15s ease;
}

.km-category-children a:hover,
.km-category-children a.km-category-active {
	color: var(--km-primary);
}

.km-category-children .km-category-more {
	color: var(--km-primary);
	font-weight: 600;
}

/* --- "Weitere Filter"-Box in der Sidebar (nur Desktop, ersetzt dort das
   mobile Klapp-Panel) — Nendoroid-Nr., Serie, Zustand, Anbietertyp. --- */

.km-sidebar-filter {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1.5px solid var(--km-border);
}

.km-sidebar-filter h2 {
	font-family: var(--km-font-serif);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 12px;
}

.km-sidebar-filter-field {
	margin-bottom: 10px;
}

.km-sidebar-filter-field label {
	display: block;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--km-muted);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.km-sidebar-filter-field input,
.km-sidebar-filter-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1.5px solid var(--km-border-strong);
	border-radius: var(--km-radius-sm);
	font-size: 0.86rem;
	font-family: inherit;
	color: var(--km-ink);
	background: var(--km-surface);
}

.km-sidebar-filter-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	padding-right: 26px;
	cursor: pointer;
}

.km-sidebar-filter-field input:focus,
.km-sidebar-filter-field select:focus {
	outline: none;
	border-color: var(--km-primary);
}

.km-sidebar-filter .km-btn-small {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
	font-size: 0.85rem;
	padding: 9px;
}

.km-sidebar-filter-reset {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 0.8rem;
	color: var(--km-muted) !important;
	text-decoration: underline !important;
}

.km-archive-main {
	min-width: 0;
	width: 100%;
}

/* --- Ergebnisliste (Bild links, wie bei klassischen Kleinanzeigen) --- */

.km-toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 20px;
	color: var(--km-muted);
	font-size: 0.92rem;
}

@media (min-width: 640px) {
	.km-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.km-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.km-list-item {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	overflow: hidden;
	box-shadow: var(--km-shadow-sm);
}

.km-list-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow 0.15s ease;
}

.km-list-link:hover {
	box-shadow: var(--km-shadow-md);
}

.km-list-thumb {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: hidden;
	background: var(--km-surface);
	box-shadow: inset 0 0 0 1px rgba(20, 26, 21, 0.06);
	position: relative;
}

.km-list-thumb img {
	width: 100%;
	height: 100%;
	/* Siehe .km-gallery-main img: vollständige Darstellung statt Zuschnitt,
	   damit z. B. hochkant fotografierte Teile nicht angeschnitten werden. */
	object-fit: contain;
	display: block;
}

.km-list-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 10px 12px 12px;
}

.km-list-title {
	font-family: var(--km-font-serif);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	margin: 0 0 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Preis-Etikett: echtes Papier-Etikett mit Lochstanze, das Leitmotiv des Designs */
/* Preis: bewusst schlicht und typografisch statt als "Etikett"-Grafik —
   der Preis ist die wichtigste Zahl auf der Kachel und wirkt in klarer,
   kräftiger Schrift moderner und ruhiger als die frühere Etikett-Optik
   mit Zacke und Lochstanze. */
.km-price-tag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin-bottom: 6px;
	padding: 0;
	background: none;
	color: var(--km-ink);
	font-family: var(--km-font-sans);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}

.km-list-meta {
	margin-top: auto;
	font-size: 0.68rem;
	color: var(--km-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
}

.km-list-meta span:not(:last-child)::after {
	content: "•";
	margin-left: 6px;
	color: var(--km-muted);
	font-size: 0.7em;
	vertical-align: middle;
}

.km-meta-online-shop {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.km-meta-online-shop svg {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
}

/* Ab 780px: zurück zur klassischen Listenansicht (Bild links), passend zur
   Sidebar, die ab derselben Breite wieder sichtbar ist. Unter 780px bleibt
   es beim Karten-Grid oben (Vorbild: die Produktkacheln der Kleinanzeigen-
   App), damit Produkte auf dem Handy sofort ins Auge fallen. */
@media (min-width: 780px) {
	.km-list {
		display: block;
		background: var(--km-surface);
		border: 1.5px solid var(--km-border);
		border-radius: var(--km-radius-lg);
		box-shadow: var(--km-shadow-md);
		overflow: hidden;
	}

	.km-list-item {
		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid var(--km-border);
	}

	.km-list-item:last-child {
		border-bottom: none;
	}

	.km-list-link {
		flex-direction: row;
		gap: 16px;
		padding: 16px;
		align-items: flex-start;
		height: auto;
	}

	.km-list-link:hover {
		background: var(--km-primary-tint);
		box-shadow: none;
	}

	.km-list-thumb {
		flex: 0 0 96px;
		width: 96px;
		height: 96px;
		aspect-ratio: auto;
		border-radius: var(--km-radius-sm);
	}

	.km-list-body {
		padding: 0;
	}

	.km-list-title {
		font-size: 1.12rem;
		margin-bottom: 8px;
	}

	.km-price-tag {
		margin-bottom: 0;
		padding: 0;
		font-size: 1.15rem;
	}

	.km-list-meta {
		margin-top: 8px;
		font-size: 0.76rem;
		gap: 4px 8px;
	}
}

/* --- Startseiten-Kacheln: nur Bild + Titel + Preis, ohne Meta-Zeile und
   ohne Zustands-Flag — bewusst reduziert für den ersten Eindruck der
   Startseite. Gilt auf Mobile UND Desktop (überschreibt daher sowohl die
   mobile Grid-Karte als auch die Desktop-Listenansicht oben per höherer
   Spezifität). Wird nur gesetzt, wenn kein Such-/Filterbegriff aktiv ist —
   sobald gesucht oder nach Kategorie gefiltert wird, greift wieder die
   normale Listenansicht. --- */

.km-list.km-list-tiles {
	display: grid !important;
	grid-template-columns: repeat( 2, 1fr );
	gap: 10px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

@media ( min-width: 560px ) {
	.km-list.km-list-tiles {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 860px ) {
	.km-list.km-list-tiles {
		grid-template-columns: repeat( 4, 1fr );
		gap: 10px;
	}
}

@media ( min-width: 1160px ) {
	.km-list.km-list-tiles {
		grid-template-columns: repeat( 5, 1fr );
	}
}

.km-list-tiles .km-list-item {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-sm);
	overflow: hidden;
	border-bottom: 1.5px solid var(--km-border);
}

.km-list-tiles .km-list-link {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	height: 100%;
}

.km-list-tiles .km-list-link:hover {
	background: none;
}

.km-list-tiles .km-list-thumb {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
}

.km-list-tiles .km-list-body {
	padding: 8px 10px 10px;
}

.km-list-tiles .km-list-title {
	font-size: 0.88rem;
	margin-bottom: 6px;
}

.km-list-tiles .km-price-tag {
	font-size: 1rem;
	margin-bottom: 0;
}

.km-list-tiles .km-condition-flag,
.km-list-tiles .km-list-meta {
	display: none !important;
}

.km-empty {
	padding: 48px 20px;
	text-align: center;
	color: var(--km-muted);
}

/* --- Pagination -------------------------------------------------------- */

.km-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 20px;
}

.km-pagination a,
.km-pagination span {
	padding: 9px 14px;
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-sm);
	font-size: 0.9rem;
	font-weight: 600;
	background: var(--km-surface);
}

.km-pagination a:hover {
	border-color: var(--km-primary);
}

.km-pagination .current {
	background: var(--km-primary);
	border-color: var(--km-primary);
	color: #fff;
}

/* --- "Mehr laden"-Button (Startseiten-Kachelansicht) --------------------- */

.km-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.km-load-more-btn {
	min-width: 200px;
	justify-content: center;
}

.km-load-more-btn:disabled {
	opacity: 0.7;
	cursor: default;
}

/* --- Einzelanzeige ------------------------------------------------------ */

.km-single {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	min-width: 0;
}

.km-single > div {
	/* Ohne dieses min-width:0 wollen CSS-Grid-Spalten standardmäßig nie
	   schmaler werden als der breiteste unteilbare Inhalt (z. B. ein Bild,
	   eine lange URL im Shop-Link-Button oder ein langes zusammengesetztes
	   Wort in Titel/Beschreibung) — auf Mobile lief dadurch die ganze Spalte
	   seitlich aus dem Bildschirm heraus, statt zu umbrechen/zu schrumpfen. */
	min-width: 0;
}

.km-gallery-main {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--km-radius-lg);
	overflow: hidden;
	background: var(--km-surface);
	box-shadow: var(--km-shadow-md);
}

.km-gallery-main img {
	width: 100%;
	height: 100%;
	/* contain statt cover: Produktfotos haben sehr unterschiedliche
	   Seitenverhältnisse (hochkant, quer, quadratisch). Mit "cover" wurden
	   sie ins 4:3-Format gezwungen und dabei oben/unten bzw. seitlich
	   abgeschnitten. Mit "contain" wird das Bild stattdessen so weit
	   verkleinert, dass es immer vollständig sichtbar bleibt. */
	object-fit: contain;
	cursor: zoom-in;
}

.km-gallery-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.km-gallery-thumbs img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	background: var(--km-surface);
	border-radius: var(--km-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	flex: 0 0 auto;
	opacity: 0.7;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.km-gallery-thumbs img:hover {
	opacity: 1;
}

.km-gallery-thumbs img.km-active {
	border-color: var(--km-primary);
	opacity: 1;
}

.km-single-main {
	min-width: 0;
}

.km-single-side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.km-single-details {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 22px 26px;
	margin-top: 16px;
	min-width: 0;
}

.km-single-details h1 {
	font-family: var(--km-font-serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 6px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.km-single-price {
	font-family: var(--km-font-sans);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--km-ink);
	margin: 6px 0 16px;
}

.km-single-meta {
	color: var(--km-muted);
	font-size: 0.92rem;
	margin-bottom: 18px;
}

.km-single-meta div {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 6px;
}

.km-single-meta svg {
	flex: 0 0 auto;
	color: var(--km-muted);
}

.km-badge {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--km-bg);
	border: 1px solid var(--km-border);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--km-muted);
	margin-right: 6px;
	margin-bottom: 6px;
}

/* --- Zustands- und Anbietertyp-Varianten des Badges ---------------------- */

.km-badge-gewerblich {
	background: var(--km-primary-tint);
	border-color: var(--km-primary);
	color: var(--km-primary-dark);
}

.km-badge-zustand-neu {
	background: #eaf4ee;
	border-color: #3f8a5c;
	color: #235536;
}

.km-badge-zustand-gebraucht {
	background: #fbf1e0;
	border-color: var(--km-accent-dark);
	color: var(--km-accent-dark);
}

/* --- Zustands-Flag auf Vorschaubildern (Neu/Gebraucht) ------------------- */

.km-condition-flag {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	box-shadow: var(--km-shadow-sm);
}

.km-condition-neu {
	background: #3f8a5c;
}

.km-condition-gebraucht {
	background: var(--km-accent-dark);
}

/* --- Gewerblich-Tag in Listen ---------------------------------------------- */

.km-tag-gewerblich {
	font-weight: 700;
	color: var(--km-primary-dark);
}

/* --- Hautton-/Charge-Hinweisbox auf der Einzelteil-Seite ----------------- */

.km-hint-box {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--km-primary-tint);
	border: 1.5px solid var(--km-primary);
	border-radius: var(--km-radius-md);
	padding: 12px 14px;
	font-size: 0.86rem;
	color: var(--km-ink);
	margin-top: 16px;
}

.km-hint-box svg {
	flex: 0 0 auto;
	color: var(--km-primary-dark);
	margin-top: 1px;
}

.km-action-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 18px;
}

.km-action-buttons .km-btn svg {
	flex: 0 0 auto;
}

.km-favorite-btn.km-favorite-active {
	border-color: var(--km-danger);
	color: var(--km-danger) !important;
}

.km-favorite-btn.km-favorite-active svg {
	color: var(--km-danger);
}

.km-seller-box {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 20px;
}

.km-seller-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.km-seller-header img {
	border-radius: 999px;
	flex: 0 0 auto;
}

/* Profilbild: entweder ein hochgeladenes Bild oder, als Fallback, ein
   farbiger Kreis mit den Initialen (siehe km_seller_avatar()). */
.km-seller-avatar {
	flex: 0 0 auto;
	border-radius: 999px;
	object-fit: cover;
}

.km-seller-avatar-initialen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--km-primary-tint);
	color: var(--km-primary-dark);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	user-select: none;
}

/* Upload-Bereich auf der Profilseite */
.km-avatar-upload {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.km-avatar-upload .km-seller-avatar-initialen {
	font-size: 1.25rem;
}

.km-avatar-upload-controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.km-avatar-upload-controls input[type="file"] {
	font-size: 0.85rem;
	padding: 0;
	border: none;
	background: none;
	width: auto;
}

.km-avatar-remove {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--km-muted);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

.km-avatar-remove input[type="checkbox"] {
	width: auto;
	margin: 0;
}

.km-seller-name {
	font-weight: 700;
	font-size: 1.02rem;
}

.km-seller-sub {
	font-size: 0.82rem;
	color: var(--km-muted);
}

/* Kurzvorstellung des gewerblichen Anbieters: bewusst als ruhige, flächige
   Notiz gestaltet statt als klassisches Zitat mit Balken und großem
   Anführungszeichen-Icon — in der schmalen Verkäuferkarte wirkte das zu
   schwer und stand optisch zwischen den Blöcken, statt Teil der Karte zu
   sein. Der leicht getönte Hintergrund bindet den Text stattdessen sichtbar
   in die Karte ein. */
.km-seller-slogan {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--km-bg);
	border-radius: var(--km-radius-md);
	border: none;
}

.km-seller-slogan p {
	margin: 0;
	font-size: 0.86rem;
	color: var(--km-muted);
	line-height: 1.5;
}

.km-seller-facts {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--km-border);
	font-size: 0.86rem;
	color: var(--km-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.km-seller-facts a {
	color: var(--km-primary);
	font-weight: 600;
}

.km-single-id {
	font-size: 0.78rem;
	color: var(--km-muted);
	text-align: center;
}

/* --- Zurück-Link (Einzelteil-Ansicht) ------------------------------------ */

.km-back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: 10px;
	color: var(--km-ink) !important;
	text-decoration: none !important;
}

.km-back-link svg {
	width: 22px;
	height: 22px;
}

.km-back-link:hover {
	color: var(--km-primary-dark) !important;
}

/* --- Breadcrumb ---------------------------------------------------------- */

.km-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: 0.85rem;
	color: var(--km-muted);
	margin-bottom: 18px;
}

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

.km-breadcrumb-current {
	color: var(--km-ink);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 320px;
}

.km-description {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 26px;
	margin-top: 16px;
	white-space: pre-line;
	overflow-wrap: break-word;
	word-break: break-word;
	min-width: 0;
}

/* --- Formular (Anzeige erstellen) --------------------------------------- */

.km-form {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 28px 24px;
	max-width: 700px;
}

.km-form-section {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--km-border);
}

.km-form-section:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.km-form-section-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.km-form-section-head h2 {
	margin: 0;
}

.km-section-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: var(--km-radius-sm);
	background: var(--km-primary-tint);
	color: var(--km-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.km-section-icon svg {
	width: 19px;
	height: 19px;
}

.km-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 20px;
}

/* Für einen kurzen erklärenden Satz direkt unter einer Überschrift (h1 oder
   Abschnitts-Überschrift), z. B. "Du bietest an als: ..." oder "Gilt für
   alle deine Inserate: ...". Ein Fixwert statt verstreuter, uneinheitlicher
   Inline-Margins (die vorher je nach Stelle zwischen -4px und -8px
   schwankten und teils in das folgende Feld hineinragten). */
.km-section-intro {
	margin: -6px 0 22px;
	font-size: 0.9rem;
	color: var(--km-muted);
}

/* Für einen einzelnen Hinweistext zwischen zwei Formularzeilen (nicht an
   ein bestimmtes Feld gebunden, z. B. "Für gewerbliche Angebote gesetzlich
   vorgeschrieben."). Die vorausgehende .km-form-row liefert bereits den
   oberen Abstand über ihr eigenes margin-bottom — hier daher nur ein
   unterer Abstand vor der nächsten Zeile, kein zusätzlicher oberer. */
.km-standalone-hint {
	margin: 0 0 22px;
	font-size: 0.82rem;
	color: var(--km-muted);
}

.km-checkbox-row {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.94rem;
	font-weight: 500;
	margin-bottom: 12px;
}

.km-checkbox-row:last-child {
	margin-bottom: 0;
}

.km-checkbox-row input {
	width: 18px;
	height: 18px;
	accent-color: var(--km-primary);
}

.km-char-counter {
	font-size: 0.78rem;
	color: var(--km-muted);
	text-align: right;
	margin-top: 6px;
}

.km-dropzone {
	border: 1.5px dashed var(--km-border-strong);
	border-radius: var(--km-radius-lg);
	padding: 34px 20px;
	text-align: center;
	color: var(--km-muted);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.km-dropzone:hover,
.km-dropzone.km-dragover {
	border-color: var(--km-primary);
	background: var(--km-primary-tint);
}

.km-dropzone-icon {
	width: 40px;
	height: 40px;
	margin: 0 auto 12px;
	color: var(--km-primary);
}

.km-dropzone p {
	margin: 0 0 4px;
}

.km-dropzone p:first-of-type {
	font-weight: 600;
	color: var(--km-ink);
}

.km-dropzone input[type="file"] {
	display: none;
}

.km-image-previews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 14px;
}

.km-image-previews figure {
	margin: 0;
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--km-radius-sm);
	overflow: hidden;
	background: var(--km-bg);
	box-shadow: var(--km-shadow-sm);
}

.km-image-previews img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--km-surface);
}

.km-image-remove {
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(27, 35, 29, 0.72);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-size: 0.85rem;
	line-height: 1;
}

.km-form-notice {
	padding: 14px 16px;
	border-radius: var(--km-radius-sm);
	margin-bottom: 18px;
	font-size: 0.92rem;
	font-weight: 500;
}

.km-form-notice.km-success {
	background: var(--km-primary-tint);
	color: var(--km-primary-dark);
	border: 1.5px solid #bcd9c9;
}

.km-form-notice.km-error {
	background: var(--km-danger-tint);
	color: var(--km-danger);
	border: 1.5px solid #edc4b8;
}

.km-form > button[type="submit"] {
	margin-top: 28px;
}

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

.km-dashboard-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.km-dashboard-item {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-md);
	box-shadow: var(--km-shadow-sm);
	padding: 16px;
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	transition: box-shadow 0.15s ease;
}

.km-dashboard-item:hover {
	box-shadow: var(--km-shadow-md);
}

.km-dashboard-thumb {
	width: 68px;
	height: 68px;
	border-radius: var(--km-radius-sm);
	overflow: hidden;
	flex: 0 0 68px;
}

.km-dashboard-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--km-surface);
}

.km-dashboard-body {
	flex: 1;
	min-width: 160px;
	font-weight: 600;
}

.km-dashboard-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.km-status {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
	margin-top: 6px;
}

.km-status-publish {
	background: var(--km-primary-tint);
	color: var(--km-primary-dark);
}

.km-status-pending {
	background: #fbf1e0;
	color: var(--km-accent-dark);
}

.km-status-km_expired {
	background: #ececec;
	color: var(--km-muted);
}

/* --- Nachrichten (Postfach) ----------------------------------------------- */

.km-messages {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 440px;
}

.km-conversation-list {
	border-bottom: 1px solid var(--km-border);
	max-height: 320px;
	overflow-y: auto;
}

.km-conversation-item {
	padding: 13px 16px;
	border-bottom: 1px solid var(--km-border);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	transition: background 0.15s ease;
}

.km-conversation-item:hover,
.km-conversation-item.km-active-conversation {
	background: var(--km-primary-tint);
}

.km-conversation-item:last-child {
	border-bottom: none;
}

.km-conv-name {
	font-weight: 700;
	font-size: 0.93rem;
}

.km-conv-preview {
	font-size: 0.83rem;
	color: var(--km-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.km-unread-dot {
	background: var(--km-accent);
	color: var(--km-accent-ink);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 2px 8px;
	align-self: flex-start;
}

.km-chat-pane {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.km-chat-header {
	padding: 13px 16px;
	border-bottom: 1px solid var(--km-border);
	font-weight: 700;
	display: none;
}

.km-chat-header.km-visible {
	display: block;
}

.km-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-height: 320px;
}

.km-bubble {
	max-width: 78%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 0.93rem;
	line-height: 1.45;
}

.km-bubble-own {
	align-self: flex-end;
	background: var(--km-primary);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.km-bubble-other {
	align-self: flex-start;
	background: var(--km-bg);
	border-bottom-left-radius: 4px;
}

.km-chat-form {
	display: flex;
	gap: 10px;
	padding: 14px;
	border-top: 1px solid var(--km-border);
}

.km-chat-form textarea {
	flex: 1;
	resize: none;
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-sm);
	padding: 11px 14px;
	font-family: inherit;
	font-size: 0.93rem;
	max-height: 90px;
}

.km-chat-form textarea:focus {
	outline: none;
	border-color: var(--km-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--km-primary) 16%, transparent);
}

.km-empty-state {
	padding: 48px 20px;
	text-align: center;
	color: var(--km-muted);
	font-size: 0.92rem;
}

/* ==========================================================================
   Desktop-Anpassungen (min-width Media Queries, mobile Basis bleibt Standard)
   ========================================================================== */

@media (min-width: 640px) {
	.km-image-previews {
		grid-template-columns: repeat(4, 1fr);
	}

	.km-form-row.km-cols-2 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 780px) {
	.km-single {
		grid-template-columns: 1.7fr 1fr;
		align-items: start;
	}

	.km-single-side {
		position: sticky;
		top: 20px;
	}

	.km-dashboard-item {
		flex-wrap: nowrap;
	}

	.km-archive-layout {
		flex-direction: row;
	}

	.km-category-sidebar {
		display: block;
		flex: 0 0 250px;
		position: sticky;
		top: 20px;
	}

	/* Ab hier übernimmt die Sidebar (inkl. Unterkategorien) die
	   Teiletyp-Navigation, die Pill-Leiste ist dann redundant. */
	.km-category-pills {
		display: none;
	}

	/* Ab hier übernimmt die "Weitere Filter"-Box in der Sidebar
	   (km-sidebar-filter), das mobile Klapp-Panel in der Kopfzeile ist
	   dann redundant und würde nur unnötig Platz beanspruchen. */
	.km-filter-panel {
		display: none;
	}
}

@media (min-width: 860px) {
	.km-top-row {
		flex-direction: row;
		align-items: center;
		gap: 18px;
	}

	.km-header-actions {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 26px;
		flex: 0 0 auto;
	}

	/* Desktop: EINE durchgehende Pille mit Segmenten
	   Suche | Teiletyp | PLZ | Umkreis | FINDEN (Vorbild kleinanzeigen.de).
	   Die Einzelfelder verlieren dafür ihren eigenen Rahmen und werden per
	   dünnen Trennstrichen abgesetzt. */
	.km-searchbar-main {
		flex: 1;
		min-width: 0;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		background: var(--km-surface);
		border-radius: 999px;
		box-shadow: var(--km-shadow-md);
		padding: 6px 6px 6px 8px;
	}

	.km-searchbar-field {
		border: none !important;
		background: transparent !important;
		border-radius: 0 !important;
		padding: 0 16px !important;
		box-shadow: none !important;
		height: 42px;
	}

	.km-searchbar-field:focus-within {
		border: none !important;
	}

	.km-searchbar-field input,
	.km-searchbar-field select {
		font-size: 0.92rem;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	/* Der Geo-Wrapper existiert nur für den Mobile-Umbruch — auf Desktop
	   werden PLZ und Umkreis dadurch zu direkten Segmenten der einen Leiste. */
	.km-searchbar-geo {
		display: contents;
	}

	/* display:contents lässt auch diese beiden (mobile-only) Elemente als
	   direkte Kinder von .km-searchbar-main durchsickern — auf Desktop
	   ungewollt, daher hier explizit ausgeblendet. */
	.km-geo-popover-head,
	.km-geo-apply {
		display: none;
	}

	.km-searchbar-geo .km-searchbar-field {
		padding: 0 16px !important;
		flex: 0 0 auto;
	}

	.km-searchbar-geo .km-searchbar-field input,
	.km-searchbar-geo .km-searchbar-field select {
		font-size: 0.92rem;
	}

	/* Das Standort-Icon in der Pille ist nur auf Mobile nötig (öffnet dort
	   das Popover) — auf Desktop stehen PLZ/Umkreis ohnehin direkt in der
	   Leiste, daher hier ausgeblendet und das Padding zurückgesetzt. */
	.km-geo-trigger {
		display: none;
	}

	.km-searchbar-search {
		flex: 1.9;
		min-width: 0;
		padding-right: 16px !important;
	}

	.km-searchbar-kat {
		display: flex !important;
		flex: 1.1;
		min-width: 0;
	}

	.km-searchbar-plz {
		flex: 1 !important;
		min-width: 0;
	}

	.km-searchbar-umkreis {
		flex: 0 0 auto !important;
	}

	.km-searchbar-divider {
		display: block;
		width: 1px;
		align-self: center;
		height: 22px;
		background: var(--km-border-strong);
		flex: 0 0 auto;
	}

	.km-searchbar-submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: 42px;
		flex: 0 0 auto;
		align-self: center;
		border: none;
		border-radius: 999px;
		padding: 0 30px;
		margin-left: 8px;
	}
}

@media (min-width: 1040px) {
	.km-list-thumb {
		flex-basis: 128px;
		width: 128px;
		height: 128px;
	}

	.km-list-title {
		font-size: 1.2rem;
	}

	.km-form-row.km-cols-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.km-messages {
		flex-direction: row;
		min-height: 580px;
	}

	.km-conversation-list {
		flex: 0 0 310px;
		border-bottom: none;
		border-right: 1px solid var(--km-border);
		max-height: none;
	}

	.km-chat-header {
		display: block;
	}

	.km-chat-messages {
		max-height: none;
	}
}

/* --- Bottom-Navigation (Mobile): fixierte Leiste mit Suchen/Favoriten/
   Inserieren/Nachrichten/Meins, Vorbild ist die Kleinanzeigen-App. Wird nur
   auf den Marktplatz-Seiten eingebunden (siehe KM_Shortcodes::
   maybe_render_bottom_nav) und ab Desktop-Breite hier ausgeblendet, weil
   dort stattdessen die Links in der Kopfzeile (.km-header-actions) greifen. --- */

.km-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	background: #ffffff;
	border-top: 1.5px solid #dde3d8;
	box-shadow: 0 -4px 16px rgba(20, 26, 21, 0.08);
	padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.km-bottom-nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-size: 0.68rem;
	font-weight: 600;
	color: #5c6961 !important;
	text-decoration: none !important;
	padding: 3px 2px;
}

.km-bottom-nav-item svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.km-bottom-nav-item span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.km-bottom-nav-active {
	color: var(--km-primary-dark, #076a6c) !important;
}

@media (min-width: 860px) {
	.km-bottom-nav {
		display: none;
	}
}

/* --- Login-Status-Baustein für den Theme-Header-Builder (KM_Login_Widget /
   [nendosplit_login]). Rendert außerhalb von .km-wrap (im Theme-Header),
   daher bewusst mit Fallback-Farben statt zwingend auf --km-primary etc.
   angewiesen zu sein — funktioniert so unabhängig davon, wo der
   Header-Builder den Baustein platziert. Nur auf Desktop sichtbar, auf
   Mobile übernimmt "Meins" in der Bottom-Navigation denselben Zweck. --- */

.km-header-login {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.86rem;
	line-height: 1.3;
	color: #1b231d;
}

.km-header-login-status {
	white-space: nowrap;
}

.km-header-login-status strong {
	font-weight: 700;
}

.km-header-login-btn,
.km-header-login-logout {
	font-weight: 700;
	color: var(--km-primary-dark, #076a6c) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.km-header-login-btn:hover,
.km-header-login-logout:hover {
	text-decoration: underline !important;
}

.km-header-login-sep {
	color: #8a938a;
	font-weight: 400;
}

@media (max-width: 859px) {
	.km-header-login {
		display: none !important;
	}
}

/* --- Login-/Registrierungs-Karte ([nendosplit_login_form] /
   [nendosplit_register_form]): verpackt UserWPs echte Formulare (Login-
   Logik bleibt komplett bei UserWP) in unsere eigene, schmale Karten-Optik
   statt der vollen Bildschirmbreite des UserWP-Standarddesigns. Die
   Feld-/Button-Regeln darunter sind bewusst generisch gehalten (zielen auf
   HTML-Elementtypen, nicht auf geratene UserWP-Klassennamen), damit sie
   unabhängig vom genauen UserWP-Theme/-Design-Style zuverlässig greifen. --- */

.km-auth-card {
	max-width: 440px;
	margin: 20px auto;
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 32px 28px;
}

.km-auth-card h1 {
	font-family: var(--km-font-serif);
	font-size: 1.7rem;
	font-weight: 600;
	margin: 0 0 22px;
	text-align: center;
}

.km-auth-card-back {
	display: block;
	text-align: center;
	margin-top: 18px;
	font-size: 0.85rem;
	color: var(--km-muted) !important;
	text-decoration: none !important;
}

.km-auth-card-back:hover {
	text-decoration: underline !important;
}

.km-auth-card input[type="text"],
.km-auth-card input[type="email"],
.km-auth-card input[type="password"],
.km-auth-card input[type="tel"],
.km-auth-card input[type="number"],
.km-auth-card select,
.km-auth-card textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	border-radius: var(--km-radius-sm) !important;
	border: 1.5px solid var(--km-border-strong) !important;
	padding: 11px 14px !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	color: var(--km-ink) !important;
	background: var(--km-bg) !important;
	margin-bottom: 12px !important;
}

.km-auth-card input:focus,
.km-auth-card select:focus,
.km-auth-card textarea:focus {
	outline: none !important;
	border-color: var(--km-primary) !important;
	background: var(--km-surface) !important;
}

.km-auth-card button,
.km-auth-card input[type="submit"],
.km-auth-card input[type="button"],
.km-auth-card .btn {
	display: block;
	width: 100%;
	background: var(--km-primary) !important;
	border: none !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	padding: 12px 20px !important;
	margin-top: 6px;
	cursor: pointer;
	text-align: center;
	text-transform: none !important;
}

.km-auth-card button:hover,
.km-auth-card input[type="submit"]:hover,
.km-auth-card .btn:hover {
	background: var(--km-primary-dark) !important;
}

.km-auth-card a {
	color: var(--km-primary-dark) !important;
}

.km-auth-card label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--km-muted);
}

.km-auth-card form > *:last-child {
	margin-bottom: 0;
}

/* --- Passwort-Sichtbarkeits-Umschalter im Feld ---------------------------
   Ursache des Problems: Die generischen Regeln oben (u. a. width:100% und
   die Button-Styles) haben den von UserWP gerenderten Umschalter zu einem
   eigenständigen Block gemacht, der unter dem Feld landete. Hier wird das
   direkt korrigiert, statt das Element per JavaScript umzuhängen:
   Der umgebende Container wird zum Positionierungsrahmen, das Feld bekommt
   rechts Platz, und der Umschalter wird dort hineingesetzt.
   ":has()" wählt gezielt nur den Container, der ein Passwortfeld enthält. --- */

.km-auth-card :is( div, p, label ):has( > input[type="password"] ),
.km-auth-card :is( div, p, label ):has( > input[type="text"] ):has( > [class*="password"] ) {
	position: relative;
}

.km-auth-card :has( > input[type="password"] ) input {
	padding-right: 46px !important;
}

/* Alles, was direkt hinter dem Passwortfeld steht und wie ein Icon-
   Umschalter aussieht (Button, Link, Span oder <i>), wird rechts im Feld
   positioniert — unabhängig davon, welches Element UserWP konkret nutzt. */
.km-auth-card input[type="password"] ~ button,
.km-auth-card input[type="password"] ~ a,
.km-auth-card input[type="password"] ~ span,
.km-auth-card input[type="password"] ~ i,
.km-auth-card input[type="text"] ~ [class*="password"] {
	position: absolute !important;
	right: 6px !important;
	top: 6px !important;
	bottom: auto !important;
	left: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	color: var(--km-muted) !important;
	cursor: pointer;
	line-height: 1 !important;
	font-size: 15px !important;
	z-index: 3;
}

.km-auth-card input[type="password"] ~ button:hover,
.km-auth-card input[type="password"] ~ a:hover,
.km-auth-card input[type="password"] ~ span:hover {
	background: var(--km-bg) !important;
	color: var(--km-ink) !important;
}

.km-auth-card input[type="password"] ~ button svg,
.km-auth-card input[type="password"] ~ span svg,
.km-auth-card input[type="password"] ~ a svg {
	width: 18px;
	height: 18px;
}

/* --- Kontaktformular ([nendosplit_kontakt]) ------------------------------
   Eigene, etwas breitere Karte (statt der schmalen Auth-Karte), da hier
   Name/E-Mail nebeneinander stehen und ein mehrzeiliges Nachrichtenfeld
   dazukommt. --- */

.km-kontakt-card {
	max-width: 640px;
	margin: 10px auto 0;
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 32px;
}

.km-kontakt-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 24px;
}

.km-kontakt-icon {
	width: 46px;
	height: 46px;
	margin-top: 2px;
}

.km-kontakt-icon svg {
	width: 22px;
	height: 22px;
}

.km-kontakt-head h1 {
	font-size: 1.6rem;
	margin: 0 0 4px;
}

.km-kontakt-head p {
	color: var(--km-muted);
	margin: 0;
	font-size: 0.92rem;
}

.km-kontakt-context {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 10px 14px;
	background: var(--km-primary-tint);
	border-radius: var(--km-radius-sm);
	font-size: 0.88rem;
	color: var(--km-ink);
}

.km-kontakt-context svg {
	flex: 0 0 auto;
	color: var(--km-primary-dark);
}

.km-kontakt-zusatzfeld {
	background: var(--km-bg);
	border: 1.5px dashed var(--km-border-strong);
	border-radius: var(--km-radius-sm);
	padding: 12px 14px;
	margin-bottom: 14px;
}

@media (max-width: 639px) {
	.km-kontakt-card {
		padding: 22px;
	}

	.km-kontakt-head {
		gap: 10px;
	}

	.km-kontakt-icon {
		width: 38px;
		height: 38px;
	}
}

/* --- Nach-oben-Button (nur Startseiten-Kachelansicht) --------------------- */

.km-scroll-top-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--km-primary);
	color: #fff;
	box-shadow: var(--km-shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
	z-index: 60;
}

.km-scroll-top-btn.km-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.km-scroll-top-btn:hover {
	background: var(--km-primary-dark);
}

.km-scroll-top-btn svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 859px) {
	/* Über der fixierten Bottom-Navigation schweben lassen, statt sie zu
	   überlappen. */
	.km-scroll-top-btn {
		bottom: 78px;
		right: 14px;
	}
}

/* --- Kontoübersicht "Meins" ([nendosplit_meins]) -------------------------
   Vorbild: die "Meins"-Ansicht der Kleinanzeigen-App. Vor allem für Mobile
   gedacht (Bottom-Navigation hat keinen Dropdown), funktioniert aber auf
   jeder Breite. --- */

.km-account-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	padding: 20px;
	margin-top: 6px;
}

.km-account-card-name {
	font-size: 1.15rem;
	font-weight: 700;
}

.km-account-card-typ {
	font-size: 0.86rem;
	color: var(--km-muted);
	margin-top: 2px;
}

.km-account-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 14px;
}

.km-account-stats a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-md);
	padding: 14px 10px;
	text-decoration: none !important;
}

.km-account-stats strong {
	font-size: 1.3rem;
	color: var(--km-ink);
}

.km-account-stats span {
	font-size: 0.8rem;
	color: var(--km-muted);
}

.km-account-menu {
	background: var(--km-surface);
	border: 1.5px solid var(--km-border);
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-md);
	margin-top: 20px;
	overflow: hidden;
}

.km-account-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 16px;
	border-bottom: 1px solid var(--km-border);
	color: var(--km-ink) !important;
	text-decoration: none !important;
}

.km-account-menu-item:last-child {
	border-bottom: none;
}

.km-account-menu-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--km-primary-tint);
	color: var(--km-primary-dark);
	border-radius: var(--km-radius-sm);
}

.km-account-menu-icon svg {
	width: 18px;
	height: 18px;
}

.km-account-menu-label {
	flex: 1;
	font-weight: 600;
	font-size: 0.94rem;
}

.km-account-menu-chevron {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--km-muted);
}

.km-account-logout {
	margin-top: 20px;
	color: var(--km-danger) !important;
	border-color: var(--km-danger) !important;
}

.km-account-logout:hover {
	background: var(--km-danger-tint) !important;
}

/* --- Vertrauens-Box "Sicher einkaufen" (Einzelteil-Ansicht) --------------
   Bewusst als Vertrauens-Baustein gestaltet, nicht als Warnhinweis — soll
   nicht wirken, als sei ausgerechnet DIESES Inserat verdächtig, sondern als
   generelles, seriöses Marktplatz-Feature (ähnlich einem
   Käuferschutz-Hinweis). Deshalb dezente Akzentfarbe statt Warnfarbe. --- */

.km-trust-box {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--km-primary-tint);
	border: 1.5px solid var(--km-primary);
	border-radius: var(--km-radius-lg);
	padding: 14px 16px;
	text-decoration: none !important;
	color: var(--km-ink) !important;
}

.km-trust-box:hover {
	background: var(--km-primary-strip);
}

.km-trust-box-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--km-surface);
	border-radius: 999px;
	color: var(--km-primary-dark);
}

.km-trust-box-icon svg {
	width: 18px;
	height: 18px;
}

.km-trust-box-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 0.82rem;
	color: var(--km-ink);
	line-height: 1.4;
}

.km-trust-box-text strong {
	font-size: 0.9rem;
}

.km-trust-box-arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--km-primary-dark);
}