/*
 * Startseite (Korrekturbriefing 27.10.2026, Runde 2 vom 03.11.2026). Bühne niedriger als im Prototyp (640 px): die
 * Überschrift steht am Desktop in drei statt vier Zeilen, die Bühne ist höchstens 480 px hoch und auf niedrigen
 * Bildschirmen so, dass der Suchkasten im ersten Bild bleibt (Kopf 73 + Bühne + Suchkasten-Überstand ≈ 100vh − 60 px).
 * Unter 640 px eigenes Handy-Layout.
 */
.eb-start-held { height: clamp(440px, calc(100vh - 190px), 480px); }
/* Bild aus dem Briefing: die Fahrer stehen rechts – beim Beschneiden auf schmalen Bildschirmen im Bild behalten */
.eb-start-held .eb-foto img { object-position: 72% 50%; }
/* Überschrift links auf hellem Himmel: Verlauf etwas kräftiger als im Prototyp */
.eb-start-verlauf { background: linear-gradient(90deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .48) 45%, rgba(10, 10, 10, 0) 78%); }
/* „DEIN NÄCHSTES / E-BIKE. FINDEN, / KAUFEN, LOSFAHREN.“ – feste Umbrüche erst ab 900 px, darunter frei */
@media (max-width: 899.98px) { .eb-start-umbruch { display: none; } }

/* Neu | Gebraucht als echte Auswahl (funktioniert ohne JavaScript): gewählt dunkel wie im Prototyp */
.eb-start-art input + span { color: var(--eb-muted, #6b6a65); background: transparent; }
.eb-start-art input:checked + span { color: #fff; background: #141414; }
.eb-start-art input:focus-visible + span { outline: 2px solid #18b20f; outline-offset: 2px; }

/* Suchknopf: Anzahl, Text und Pfeil immer in einer Zeile, feste Mindestbreite – die Felder verschieben sich nicht */
.eb-start-los { min-width: 236px; }

/* Top Angebote und Händler: Desktop vier je Zeile, darunter weniger Spalten */
@media (max-width: 1099.98px) and (min-width: 640px) { .eb-start-vier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 859.98px) and (min-width: 640px) { .eb-start-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Beliebte Marken: zwölf Kacheln, Desktop sechs Spalten in zwei Zeilen; Logo einheitlich groß über dem Namen */
.eb-start-marken { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023.98px) { .eb-start-marken { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eb-start-markenlogo { height: 48px; }
.eb-start-markenlogo img { max-width: 78%; max-height: 44px; width: auto; height: auto; object-fit: contain; }

/* Magazin: neuester Artikel groß (Bild links, Text rechts), darunter vier im Zweispalter mit kleinen Bildern */
.eb-start-mag-gross { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.eb-start-mag-klein { grid-template-columns: 168px minmax(0, 1fr); }

/* Suchkasten mit fünf Feldern, bei „Gebraucht“ sechs (Kilometerstand bis): ab 1150 px eine Zeile, darunter
   umbrechend; der Knopf bleibt rechts außen. */
[data-eb-startsuche] > .eb-start-feld { flex: 1 1 130px; }
.eb-start-sechs > .eb-start-feld { padding-left: 14px; padding-right: 14px; }
.eb-start-sechs > .eb-start-feld select { font-size: 16px; }
.w-160 { width: 160px; }
.gtc-72-minmax-0-1fr-auto { grid-template-columns: 72px minmax(0, 1fr) auto; }
.gtc-repeat-auto-fill-minmax-150-1fr { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.flex-0-1-150 { flex: 0 1 150px; }
.eb-start-text h2 + p, .eb-start-text h3 + p { margin-top: -6px; }
.eb-start-text h3 { margin-top: 8px; }
.eb-start-text p { margin: 0; font-size: 17px; line-height: 1.6; color: #3c3c3a; }
.eb-start-text a { font-weight: 700; color: #141414; }

@media (max-width: 1149.98px) {
	[data-eb-startsuche] > .eb-start-feld { flex-basis: 30%; }
	[data-eb-startsuche] > button[type="submit"] { flex: 1 1 100%; justify-content: center; margin-top: 6px; }
}

@media (max-width: 639.98px) {
	/* Bühne: niedriger, Verlauf von unten statt von links (Text steht über die ganze Breite) */
	.eb-start-held { height: 500px; }
	.eb-start-held p { font-size: 17px; }
	.eb-start-verlauf { background: linear-gradient(180deg, rgba(10, 10, 10, .2) 0%, rgba(10, 10, 10, .45) 40%, rgba(10, 10, 10, .85) 100%); }

	/* Suchkasten: Neu | Gebraucht nebeneinander, Felder untereinander mit Trennlinie, Knopf über die ganze Breite */
	[data-eb-startsuche] { flex-direction: column; padding: 10px; }
	[data-eb-startsuche] > .eb-start-art { flex-direction: row; gap: 4px; padding: 4px; margin-bottom: 4px; background: var(--eb-surface); border-radius: 8px; }
	[data-eb-startsuche] > .eb-start-art > label { flex: 1 1 0; }
	[data-eb-startsuche] > .eb-start-art > label > span { height: 44px; justify-content: center; }
	[data-eb-startsuche] > label { flex: none; padding: 10px 8px; border-left: 0; }
	[data-eb-startsuche] > label + label { border-top: 1px solid var(--eb-line); }
	[data-eb-startsuche] > button[type="submit"] { justify-content: center; min-height: 56px; margin-top: 6px; min-width: 0; }

	/* Abschnitte: Rand 16 px wie Kopf und Bühne, weniger Luft dazwischen, Überschriften kleiner */
	.eb-start-abschnitt { padding: 56px 16px 0; }
	.eb-start-abschnitt.eb-start-letzter { padding-bottom: 64px; }
	.eb-start-abschnitt h2 { font-size: 34px; }

	/* Beliebte Kategorien: zwei Kacheln je Zeile */
	.eb-start-rides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.eb-start-rides > a > span:last-child { left: 14px; right: 14px; bottom: 14px; gap: 4px; }
	.eb-start-rides > a > span:last-child > span:first-child { font-size: 26px; }
	.eb-start-rides > a > span:last-child > span:last-child { font-size: 13px; }

	/* Kartenreihen (Heute verfügbar, Top Angebote, Magazin): waagerecht zum Wischen statt volle Karten untereinander */
	.eb-start-karten { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
	.eb-start-karten::-webkit-scrollbar { display: none; }
	.eb-start-karten > a { flex: 0 0 82%; scroll-snap-align: start; }

	/* Magazin: großer Artikel mit Bild oben, die vier weiteren untereinander mit kleinem Bild links */
	.eb-start-mag-gross { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.eb-start-mag-text { padding: 16px 18px 18px; }
	.eb-start-mag-liste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.eb-start-mag-klein { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; }
	.eb-start-mag-klein > span:last-child > span:nth-child(2) { font-size: 16px; }

	/* E-Bike-Check: Felder untereinander, Knopf über die ganze Breite; Knöpfe untereinander */
	.eb-start-check-felder > label { flex: 1 1 100%; }
	.eb-start-check-felder > button { flex: 1 1 100%; height: 50px; }
	.eb-start-knoepfe > a { flex: 1 1 100%; justify-content: center; }

	/* Händler in der Umgebung: Standortformular über die ganze Breite, Karten einspaltig */
	.eb-start-abschnitt > div > form { flex: 1 1 100%; }
	.eb-start-abschnitt > div > form > label { flex: 1 1 auto; }
	.eb-start-abschnitt > div > form input { width: 100%; }
	.eb-start-haendler { grid-template-columns: minmax(0, 1fr); }

	/* Marken: drei je Zeile */
	.eb-start-marken { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.eb-start-marken > a { padding: 12px 6px; gap: 8px; }
	.eb-start-markenlogo { height: 36px; }
	.eb-start-markenlogo img { max-height: 32px; }
	.eb-start-marken > a > span:last-child { font-size: 12px; }
	.eb-start-text h2 { font-size: 26px; }
}


/* Händler-Logo (Dashboard → Händlerprofil → Fotos → Logo): ganz zeigen, nicht beschneiden */
.eb-start-logo img { object-fit: contain; padding: 6px; }

/* Einzelklassen, die im Prototyp nicht vorkommen (nicht in atoms.css) */
.fs-11 { font-size: 11px; }
.p-18-12 { padding: 18px 12px; }
.p-24-28-24-0 { padding: 24px 28px 24px 0; }
.gtc-repeat-auto-fill-minmax-240-1fr { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.h-auto { height: auto; }
.maxw-860 { max-width: 860px; }
.p-10-14 { padding: 10px 14px; }
.p-3-8 { padding: 3px 8px; }