/*
 * e-bikes.de – Grundregeln und Bausteine.
 *
 * Die Gestaltung der Seiten steht als Einzelklassen in atoms.css (eine Klasse je Deklaration aus dem
 * Prototyp, erzeugt von tools/dc2php.py). Damit diese Klassen wie Inline-Stile im Prototyp immer
 * gewinnen, stehen alle Grundregeln hier in :where() (Spezifität 0).
 */

:root {
	--eb-ink: #141414;
	--eb-green: #0ee90b;
	--eb-green-h: #0bd408;
	--eb-green-t: #0a7a08;
	--eb-muted: #5a5a57;
	--eb-line: #e2e2df;
	--eb-line-soft: #ebebe8;
	--eb-line-input: #d6d6d2;
	--eb-surface: #f2f2f0;
	--eb-surface-2: #f5f5f3;
	--eb-img: #ececea;
	--eb-warn-bg: #fff3dc;
	--eb-warn: #8a5a00;
	--eb-err-bg: #fde8e6;
	--eb-err: #b3261e;
}

/* Grundregeln wie im <style> jeder Prototyp-Seite */
:where(html) { -webkit-text-size-adjust: 100%; }
:where(body) { margin: 0; background: #fff; font-family: 'Barlow', system-ui, sans-serif; color: #141414; -webkit-font-smoothing: antialiased; min-height: 100vh; }
*, *::before, *::after { box-sizing: border-box; }
:where(a) { color: #141414; }
:where(a:hover) { color: #0a7a08; }
:where(button, input, select, textarea) { font-family: inherit; }
:where(img, svg) { vertical-align: middle; }
/* Kein globales img{max-width:100%} (gibt es im Prototyp nicht – Logos in Flex-Zeilen würden schrumpfen);
   nur Bilder aus dem Editor passen sich an. */
:where(.eb-prosa, .eb-recht-prosa) img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
	:where(button, select, input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]), textarea, a.d-flex, a.d-inline-flex, a.d-grid) { min-height: 44px; }
}

/* Auswahlfelder mit Pfeil wie im Prototyp */
select:not(.eb-select-nativ) {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: calc(100% - 12px) 50% !important;
	background-size: 14px 14px !important;
	padding-right: 38px !important;
}
select.eb-select-hell {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Sichtbarer Fokus für Tastatur */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #0a7a08; outline-offset: 2px; }

/* Nur für Screenreader */
.eb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Breitenabhängig sichtbar (wie die Breitenprüfung im Kopf des Prototyps) */
@media (max-width: 639.98px) { .eb-ab-640 { display: none !important; } }
@media (min-width: 640px) { .eb-bis-640 { display: none !important; } }
@media (max-width: 1149.98px) { .eb-ab-1150 { display: none !important; } }
@media (min-width: 1150px) { .eb-bis-1150 { display: none !important; } }
@media (max-width: 1319.98px) { .eb-ab-1320 { display: none !important; } }
@media (min-width: 1320px) { .eb-bis-1320 { display: none !important; } }
@media (max-width: 639.98px), (min-width: 1320px) { .eb-640-1320 { display: none !important; } }

[hidden] { display: none !important; }

/* Bildplatz (wie <image-slot>): Foto füllt den Platz; Fotonachweise stehen gesammelt in der Datenschutzerklärung */
.eb-foto { display: block; overflow: hidden; background: rgba(127, 127, 127, .08); }
.eb-foto--leer { background: #ececea; }
.eb-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; display: block; }
.eb-foto:not(.pos-absolute):not(.pos-relative):not(.pos-fixed) { position: relative; }

/*
 * Handy (unter 640 px): Hilfsklassen für Stellen, an denen der Prototyp kein Handy-Layout hat. Mit !important, weil
 * sie die Einzelklassen aus atoms.css überstimmen sollen; ab 640 px wirken sie nicht.
 */
@media (max-width: 639.98px) {
	/* position: relative, damit versteckte Kontrollkästchen (.eb-sr, absolut) in der Leiste bleiben und die Seite nicht verbreitern */
	.eb-m-wisch { position: relative; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
	.eb-m-wisch::-webkit-scrollbar { display: none; }
	.eb-m-wisch > * { flex-shrink: 0 !important; }
	.eb-m-stapel { flex-direction: column !important; align-items: stretch !important; }
	.eb-m-stapel > a, .eb-m-stapel > button { justify-content: center; }
	.eb-m-voll { width: 100% !important; justify-content: center !important; }
	.eb-m-1sp { grid-template-columns: minmax(0, 1fr) !important; }
	.eb-m-2sp { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.eb-m-3sp { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.eb-m-rand { padding-left: 16px !important; padding-right: 16px !important; }
	.eb-m-weg { display: none !important; }
	.eb-m-tabelle { overflow-x: auto; }
	.eb-m-tabelle > table { min-width: 560px; }
	.eb-m-innen { padding: 18px !important; }
	/* Wischzeile bis an den Bildschirmrand (der nächste Eintrag schaut heraus) */
	.eb-m-wisch-rand { margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; padding-right: 16px !important; }
	/* Brotkrümel: Links mit größerer Tippfläche, Trenner mittig */
	.eb-m-krumen { align-items: center; }
	.eb-m-krumen a { padding: 12px 0; }
	.eb-m-minw0 { min-width: 0 !important; }
	/* Tabellenzeilen als Karte: erste Zelle (Name) und letzte (Aktionen) über die volle Breite, dazwischen beschriftete Werte */
	.eb-m-zeilenkarte { display: flex !important; flex-wrap: wrap; gap: 8px 16px !important; padding: 12px 14px !important; }
	.eb-m-zeilenkarte > :first-child, .eb-m-zeilenkarte > :last-child { flex: 1 1 100%; }
	.eb-m-zeilenkarte > :last-child { justify-content: flex-start !important; }
	.eb-m-zeilenkarte > [data-kopf] { display: flex; flex-direction: column; gap: 1px; }
	.eb-m-zeilenkarte > [data-kopf]::before { content: attr(data-kopf); font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--eb-muted); }
	/* Merken-Herz auf Karten: quadratisch 44 × 44 (sonst 38 breit und durch die 44-px-Regel 44 hoch) */
	[data-eb-merken].w-38 { width: 44px; height: 44px; }
	/* 404: Suchfeld und Knopf in einer Zeile */
	.eb-404-suche { flex-wrap: nowrap; }
	.eb-404-suche > input { flex: 1 1 0; min-width: 0; }
	/* Zurück | Weiter: Weiter doppelt so breit, ohne Lücke dazwischen */
	.eb-m-schritte > .flex-1 { display: none !important; }
	.eb-m-schritte > * { flex: 2 1 0 !important; justify-content: center; padding-left: 12px !important; padding-right: 12px !important; }
	.eb-m-schritte > :first-child { flex: 1 1 0 !important; }
	/* Schritt-Reiter (Verkaufen, Händler werden): nur Ziffern, der aktuelle Schritt mit Namen */
	.eb-vk-chip-schritt:not([data-zustand="cur"]), .eb-reg-chip:not([aria-current="step"]), .eb-k-chip:not([aria-current="step"]) { flex: 0 0 48px !important; }
	.eb-vk-chip-schritt:not([data-zustand="cur"]) .eb-chip-name, .eb-reg-chip:not([aria-current="step"]) .eb-chip-name, .eb-k-chip:not([aria-current="step"]) .eb-chip-name { display: none; }
	.eb-m-umbruch { white-space: normal !important; height: auto !important; min-height: 46px; padding-top: 10px !important; padding-bottom: 10px !important; text-align: center; }
	.eb-m-tippen { display: inline-flex !important; align-items: center; min-height: 44px; }
	/* Auswahlknöpfe als gleich breite Spalten (statt umbrechender Reihe) */
	.eb-m-raster2, .eb-m-raster3, .eb-m-raster4 { display: grid !important; gap: 6px !important; }
	.eb-m-raster2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.eb-m-raster3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.eb-m-raster4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.eb-m-raster2 > *, .eb-m-raster3 > *, .eb-m-raster4 > * { justify-content: center; text-align: center; padding-left: 8px !important; padding-right: 8px !important; min-width: 0; }
	/* Kartenraster als Reihe zum Wischen (Karten 82 % breit, die nächste schaut heraus) */
	.eb-m-karten { display: flex !important; gap: 12px !important; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
	.eb-m-karten::-webkit-scrollbar { display: none; }
	.eb-m-karten > * { flex: 0 0 82% !important; scroll-snap-align: start; }
	/* Foto-Bühnen: Verlauf von unten statt von links (Text steht über die ganze Breite) */
	.eb-m-verlauf { background: linear-gradient(180deg, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, .75) 45%, rgba(10, 10, 10, .9) 100%) !important; }
	/* Regler: Tippfläche 44 px hoch (die Spur bleibt schmal) */
	input[type="range"] { height: 44px; }
	/* Abschnitte mit festem 32-px-Rand aus dem Prototyp: 16 px wie alle übrigen; weniger Luft darüber und vor dem Fuß */
	.p-0-32-96, .p-16-32, .p-20-32-0, .p-20-32-88, .p-24-32-0, .p-24-32-88, .p-24-32-96, .p-28-32-0, .p-28-32-88, .p-32-32-0, .p-32-32-96, .p-36-32-0, .p-40-32-0, .p-56-32-0, .p-56-32-88, .p-64-32-0, .p-72-32-0, .p-88-32-0, .p-96-32-0, .p-96-32-120 { padding-left: 16px; padding-right: 16px; }
	.p-88-32-0, .p-96-32-0, .p-96-32-120 { padding-top: 56px; }
	.p-64-32-0, .p-72-32-0 { padding-top: 48px; }
	.p-56-32-0, .p-56-32-88 { padding-top: 40px; }
	.p-0-32-96, .p-20-32-88, .p-24-32-88, .p-24-32-96, .p-28-32-88, .p-32-32-96, .p-56-32-88 { padding-bottom: 64px; }
	.p-96-32-120 { padding-bottom: 72px; }
	.p-28-clamp-16-4vw-32-88, .p-32-clamp-16-4vw-32-88, .p-32-clamp-16-4vw-32-96, .p-40-clamp-16-4vw-32-96, .p-48-clamp-16-4vw-32-96, .p-56-clamp-16-4vw-32-88, .p-72-clamp-16-4vw-32-96, .p-88-clamp-16-4vw-32-104, .p-88-clamp-16-4vw-32-96, .p-96-clamp-16-4vw-32-104 { padding-bottom: 64px; }
	.p-72-clamp-16-4vw-32-96 { padding-top: 48px; }
	.p-88-clamp-16-4vw-32-104, .p-88-clamp-16-4vw-32-96, .p-96-clamp-16-4vw-32-104 { padding-top: 56px; }
	/* Ausgeblendetes bleibt ausgeblendet, auch wenn eine Hilfsklasse oben display mit !important setzt */
	[hidden] { display: none !important; }
}

/* Der Kopf läuft nicht mit (Briefing Runde 2, Punkt 01): Sprungziele (#kontakt, #karte …) brauchen nur etwas Luft.
   smt-96 stammt aus dem Prototyp (Platz für den klebenden Kopf) und wird hier auf denselben Abstand gesetzt. */
:where(html) { scroll-padding-top: 16px; }
.smt-96 { scroll-margin-top: 24px; }

/* Gemeinsame Hilfsklassen (nicht aus den Inline-Stilen des Prototyps) */
.eb-d-contents { display: contents; } /* Formular ohne eigene Box: Kinder bleiben Teil des Flex-Layouts */
.eb-flex { display: flex; }
.bg-green-t { background: #0a7a08; } /* Zustand „Suchauftrag aktiv ✓“ */
.eb-schrift-auf-foto { text-shadow: 0 1px 3px rgba(10, 10, 10, .85); } /* Rechtliches unten auf dem Anmelde-Foto */
@media (max-width: 640px) {
	.eb-knopfartig { min-height: 44px; } /* Links, die im Prototyp <button> sind */
}

/* Fuß auf dem Handy: Links mit größerer Tippfläche (Abstand der Zeilen ~38 px statt 30 px) */
@media (max-width: 639.98px) {
	.eb-fuss-spalte { gap: 2px; }
	.eb-fuss-spalte > div { margin-bottom: 6px; }
	.eb-fuss-spalte > a { padding: 8px 0; }
	.eb-fuss-links { column-gap: 18px; row-gap: 0; }
	.eb-fuss-links > a { padding: 8px 0; }
}

/* Standort: Vorschläge beim Tippen (eb.js ortVorschlaege) */
.eb-orte-huelle { position: relative; }
.eb-orte {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 6px; list-style: none;
	max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--eb-line); border-radius: 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .18); text-transform: none; font-style: normal; letter-spacing: normal;
}
.eb-orte__eintrag {
	display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 6px; cursor: pointer;
	color: #141414; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: left;
}
.eb-orte__eintrag b { font-weight: 800; font-variant-numeric: tabular-nums; }
.eb-orte__eintrag:hover, .eb-orte__eintrag[aria-selected="true"] { background: var(--eb-surface); }

/* Kopf zwischen 1150 und 1440 px: Navigation etwas enger (im Prototyp ist die Zeile dort bis zu 36 px zu breit,
   „Inserieren“ wurde z. B. bei 1333 oder 1366 px abgeschnitten); ab 1440 px wie im Prototyp. */
@media (min-width: 1150px) and (max-width: 1439.98px) {
	.eb-kopf > div { gap: 14px; }
	.eb-kopf nav > a { padding-left: 7px; padding-right: 7px; }
	.eb-kopf nav > a > span { left: 7px; right: 7px; }
}

/* Kopf: Menü auf schmalen Bildschirmen */
.eb-kopf__menue { display: none; }
.eb-kopf.ist-offen .eb-kopf__menue { display: flex; }
@media (max-width: 639.98px) {
	/* Handy: Menü-Knopf ganz rechts, Menü über die ganze Breite (Prototyp: Knopf neben dem Logo) */
	.eb-kopf [data-eb-menue] { order: 1; }
	.eb-kopf__menue { left: 16px; right: 16px; width: auto; }
}

/* Hinweis unten in der Mitte (Toast, 2,8 s) – wie im Händler-Dashboard */
.eb-toast {
	position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 1300;
	background: #141414; color: #fff; border-radius: 8px; padding: 14px 18px; display: flex; gap: 10px; align-items: center;
	font-size: 15px; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px);
	opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.eb-toast.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }
.eb-toast__punkt { width: 10px; height: 10px; border-radius: 99px; background: #0ee90b; flex-shrink: 0; }
.eb-toast--fehler .eb-toast__punkt { background: #ff5a4f; }

/* Kurze Rückmeldung neben Überschriften (3,2 s) */
[data-eb-notiz] { transition: opacity .2s; }
[data-eb-notiz]:empty { display: none; }

/* Cookie-Hinweis: Seite dahinter unscharf */
.eb-cookies { position: fixed; inset: 0; z-index: 1200; }

/* Schalter (44 × 26, Knopf 20 px; an = Ink mit grünem Knopf) */
.eb-schalter { cursor: pointer; }

/* Weiche Übergänge für Zustandswechsel per Skript */
[data-eb-an] { transition: background-color .12s, color .12s, border-color .12s; }

/* Inhalte aus dem Editor (Ratgeber, Rechtstexte) */
.eb-prosa > * + * { margin-top: 14px; }
.eb-prosa p, .eb-prosa li { font-size: 17px; line-height: 1.65; color: #3b3a36; }
.eb-prosa ul { padding-left: 20px; }

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

/* Inseratkarte (parts/b-inserat-karte.php) – in Marktplatz, Modellseite und Konto. Upgrade „Highlight“: hervorgehobener
   Rahmen (gleiche Größe wie die normale Karte). */
.eb-gb-hl { border-color: #0ee90b; box-shadow: 0 0 0 1px #0ee90b; }
.eb-gb-hl:hover { box-shadow: 0 0 0 1px #0ee90b, 0 14px 34px rgba(0, 0, 0, .10); }
/* Zustand in gemischten Listen („Neu“ / „Gebraucht“ neben der Marke) */
.eb-mp-art { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #f3f2ee; color: #141414; font-size: 12px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; }
.eb-mp-art.ist-neu { background: #0ee90b; }
@media (max-width: 639.98px) {
	/* Inseratkarten quer: Foto links, Angaben rechts (sonst ~525 px je Karte) */
	.eb-gb-karte { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
	.eb-gb-karte > a:first-child { aspect-ratio: auto; height: 100%; }
	.eb-gb-karte > button { top: auto; right: auto; bottom: 8px; left: 8px; }
	.eb-gb-karte > a:last-child { padding: 12px 14px; gap: 8px; }
	.eb-gb-karte > a:last-child > span:nth-child(1) > span:last-child { font-size: 18px; }
	.eb-gb-karte > a:last-child > span:nth-child(2) > span:first-child > span:last-child { font-size: 19px; }
	.eb-gb-karte > a:last-child > span:nth-child(3) { gap: 6px; padding: 8px 0; }
	.eb-gb-karte > a:last-child > span:nth-child(3) > span > span:first-child { font-size: 11px; letter-spacing: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
	.eb-gb-karte > a:last-child > span:nth-child(3) > span > span:last-child { font-size: 15px; }
	.eb-gb-karte > a:last-child > span:nth-child(4) > span:first-child { font-size: 22px; }
	.eb-gb-karte > a:last-child > span:nth-child(4) > span:last-child { font-size: 12px; }
}