/* drivebro — Suche (suche.html). Klassen mit Präfix su-. Glas-Bausteine aus basis.css. Medienabfragen am Ende. */

.innen.su-mitte{max-width:1120px}

/* Bühne als ruhiges Band, weisse Suchkarte ragt in den hellen Bereich */
.buehne.kompakt.su-buehne .innen{padding-block:22px 128px}
.su-buehne .pfad{margin:0}
.su-karte-band{position:relative;z-index:2;margin-top:-104px}
.su-karte-suche{display:grid;gap:16px;padding:clamp(18px,2.2vw,28px)}
.su-karte-kopf{display:grid;gap:4px}
.su-karte-kopf h1{font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.035em}
.su-zahl{color:var(--akzent)}
.su-lead{margin:0;font-size:15.5px;color:var(--grau)}
.su-reiter{max-width:100%;overflow-x:auto;scrollbar-width:none;justify-self:start}
.su-reiter::-webkit-scrollbar{display:none}
.su-reiter small{font-size:12px;font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
.su-suchfeld{display:flex;align-items:center;gap:6px;padding:0 8px 0 6px;border-radius:999px;background:#fff;border:1px solid var(--linie-stark);transition:border-color .2s,box-shadow .2s}
.su-suchfeld:hover{border-color:var(--grau-hell)}
.su-suchfeld:focus-within{border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.su-suchfeld-ic{display:grid;place-items:center;width:40px;flex:none;color:var(--grau)}
.su-suchfeld-ic .ic{width:21px;height:21px}
.su-suchfeld input{flex:1;min-width:0;height:52px;border:0;background:none;color:var(--tinte);font-size:16px;outline:0;-webkit-appearance:none;appearance:none}
.su-suchfeld input::placeholder{color:var(--grau-hell)}

/* Filterraster: vier Spalten heller Auswahlfelder, jedes öffnet ein Popover */
.su-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.su-felder[hidden]{display:none}
.su-feld{position:relative;display:grid;align-content:center;gap:1px;min-height:58px;padding:8px 40px 8px 16px;border-radius:var(--radius-feld);border:1px solid var(--linie-stark);background:#fff;color:var(--tinte);text-align:left;transition:border-color .2s,box-shadow .2s,background .2s}
.su-feld:hover{border-color:var(--grau)}
.su-feld[aria-expanded=true]{border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.su-feld>.ic{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--grau);transition:transform .25s var(--weich)}
.su-feld[aria-expanded=true]>.ic{transform:rotate(180deg)}
.su-feld-titel{font-size:12.5px;font-weight:600;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-feld-wert{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-feld.aktiv{border-color:var(--akzent);background:var(--akzent-flaeche)}
.su-feld.aktiv .su-feld-titel{color:var(--akzent-dunkel)}
.su-mehr-knopf{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 16px;background:#fff;border:1.5px solid var(--akzent);color:var(--akzent);font-weight:700;font-size:15px}
.su-mehr-knopf:hover{background:var(--flaeche);border-color:var(--akzent)}
.su-mehr-knopf .ic{position:static;width:18px;height:18px;margin:0;color:var(--akzent)}
.su-mehr-zahl:not(:empty){display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--akzent);color:#fff;font-size:12px;font-weight:800}

/* Fusszeile der Suchkarte */
.su-karte-fuss{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;padding-top:16px;border-top:1px solid var(--linie)}
.su-sort{display:flex;align-items:center;gap:8px;margin-right:auto}
.su-sort label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--grau)}
.su-sort label .ic{width:17px;height:17px}
.su-sort select{height:42px;padding:0 36px 0 14px;border-radius:999px;border:1px solid var(--linie-stark);-webkit-appearance:none;appearance:none;font-weight:700;font-size:14.5px;color:var(--tinte);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236C655C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center}
.su-sort select:hover{border-color:var(--grau)}
.su-sort select:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.su-karte-aktionen{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.su-textknopf{padding:6px 2px;border:0;background:none;font-size:14.5px;font-weight:600;color:var(--tinte);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.su-textknopf:hover{color:var(--akzent-dunkel)}
.su-erweitert{display:inline-flex;align-items:center;gap:6px}
.su-erweitert .ic{width:16px;height:16px}
.su-abo-knopf{padding:11px 18px;font-size:15px}
.su-abo-knopf .ic,.su-blatt-knopf .ic{width:17px;height:17px}
.su-treffer-knopf{min-width:170px}
.su-blatt-knopf{display:none}

/* Popover je Feld: deckend weiss, über allem */
.su-pop{position:absolute;z-index:75;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);box-shadow:0 2px 6px rgba(40,40,35,.06),0 18px 48px rgba(40,40,35,.18);opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .22s var(--weich)}
.su-pop.offen{opacity:1;transform:none}
.su-pop-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 6px 20px}
.su-pop-kopf h2{font-size:16.5px}
.su-pop-zu{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--flaeche);color:var(--tinte)}
.su-pop-zu:hover{background:var(--flaeche-2)}
.su-pop-zu .ic{width:18px;height:18px}
.su-pop-inhalt{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:12px;align-content:start;padding:8px 20px 16px}
.su-pop-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 14px 20px;border-top:1px solid var(--linie);background:#fff}
.su-pop-fuss .knopf{padding:11px 18px}
.su-panel-raster{display:grid;gap:12px}
.su-optionen{display:grid;gap:9px}
.su-optionen-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.su-opt{align-items:center;font-size:15px}
.su-opt>span:first-of-type{flex:1;min-width:0}
.su-anz{font-size:13px;color:var(--grau-hell);font-variant-numeric:tabular-nums}
.su-opt.su-null{color:var(--grau-hell)}
.su-farben{gap:6px}
.su-farbe{padding:7px 11px 7px 8px;font-size:14px;gap:7px}
.su-farbe .su-anz{margin-left:2px}
.su-farbe[aria-pressed=true] .su-anz{color:rgba(255,255,255,.7)}
.su-farbpunkt{width:16px;height:16px;border-radius:50%;background:var(--farbe);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.feld select[disabled]{background-color:var(--flaeche);color:var(--grau);cursor:not-allowed}

/* Klebende schmale Filterleiste: deckend weiss mit feiner Linie */
.su-klebe{position:fixed;left:0;right:0;top:var(--kopf-h);z-index:38;padding:8px 0;background:#fff;border-bottom:1px solid var(--linie);box-shadow:0 12px 32px rgba(40,40,35,.10)}
.su-klebe[hidden]{display:none}
.su-klebe-innen{display:flex;align-items:center;gap:10px;max-width:1120px}
.su-klebe-filter{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--akzent);color:#fff}
.su-klebe-filter .ic{width:19px;height:19px}
.su-klebe-zahl:not(:empty){position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--tinte);color:#fff;font-size:11px;font-weight:700;line-height:18px}
.su-klebe-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.su-klebe-chips::-webkit-scrollbar{display:none}
.su-chipfeld{display:inline-flex;align-items:center;gap:6px;flex:none;padding:9px 12px 9px 15px;border-radius:999px;border:1px solid var(--linie-stark);background:#fff;color:var(--tinte);font-size:14px;font-weight:600;white-space:nowrap;transition:border-color .2s,background .2s}
.su-chipfeld:hover{border-color:var(--tinte)}
.su-chipfeld .su-feld-titel{font-size:14px;color:inherit}
.su-chipfeld .su-feld-wert{display:none}
.su-chipfeld>.ic{width:15px;height:15px}
.su-chipfeld.aktiv{background:var(--akzent);border-color:var(--akzent);color:#fff}
.su-chipfeld[aria-expanded=true]{border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.su-chip-mehr{padding-left:12px}

/* Ergebnis */
.su-block{padding-top:clamp(24px,2.6vw,36px)}
.su-kopf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:14px}
.su-anzahl{font-size:clamp(20px,1.8vw,24px);font-variant-numeric:tabular-nums}
.su-anzahl:focus{outline:0}
.su-ansicht{background:#fff;box-shadow:inset 0 0 0 1px var(--linie);border-radius:999px}
.su-ansicht button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px}
.su-ansicht button[aria-pressed=true]{background:var(--akzent);color:#fff}
.su-ansicht .ic{width:17px;height:17px}
.su-aktiv{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:8px}
.su-aktiv[hidden]{display:none}
.su-aktiv-liste{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.su-aktiv-chip{padding:7px 10px 7px 14px;font-size:14px;background:#fff;border-color:var(--linie-stark)}
.su-aktiv-chip .ic{width:14px;height:14px;color:var(--grau)}
.su-aktiv-chip:hover{border-color:var(--tinte)}
.su-alle-weg{font-size:14px}
.su-liste .raster-fz{margin-top:16px}
/* Vergleichen im Raster: runder Knopf unter dem Herz (unten liegen Fotoanzahl, Punkte und Demo-Marke) */
.su-vgl{position:absolute;right:10px;top:56px;z-index:4;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--tinte);box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.su-vgl span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.su-vgl .ic{width:18px;height:18px}
.fz-bild:has(.fz-band) ~ .su-vgl,.fz:has(.fz-band) .su-vgl{top:86px}
.su-vgl[aria-pressed=true]{background:var(--akzent);color:#fff}

/* Etiketten über dem Foto (Zeile «Premium»/«XXL» und Rahmen in basis.css «Inseratkarten») */
.su-et{box-shadow:0 2px 8px rgba(40,40,35,.18)}
.su-et-top{background:var(--akzent);color:#fff}
.fzz .fz-marke,.fz .fz-marke{z-index:4}

.su-gs{display:inline-flex;align-items:center;gap:4px;margin:0 2px 0 8px;padding:1px 8px;border-radius:999px;background:var(--gruen-flaeche);color:var(--gruen);font-size:12.5px;font-weight:700;white-space:nowrap;vertical-align:1px}
.su-gs .ic{width:12px;height:12px;stroke-width:2.6}
.su-gs-neu{background:var(--flaeche);color:var(--akzent-dunkel)}

/* Teaser zwischen den Treffern */
.su-teaser{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 24px;margin:24px 0;padding:22px 26px;border-radius:var(--radius);background:var(--flaeche);border:0;box-shadow:none}
.su-teaser h3{font-size:19px}
.su-teaser p{margin:4px 0 0;color:var(--grau);font-size:15px}

/* Händler-Hinweis */
.su-haendler{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;margin-bottom:22px;padding:16px 20px;border-radius:var(--radius)}
.su-haendler-text{flex:1;min-width:200px}
.su-haendler-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.su-haendler-name{margin:0;font-size:18px;font-weight:700;color:var(--tinte);letter-spacing:-.02em}
.su-haendler-info{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font-size:14px;color:var(--grau)}
.su-stern{display:inline-flex;align-items:center;gap:5px;color:var(--tinte);font-weight:600}
.su-stern .ic{width:15px;height:15px;color:#E0A100}

/* Leerer Zustand */
.su-leer{margin-top:16px;background:#fff;border-radius:var(--radius-gross);box-shadow:var(--schatten-klein);padding:48px 20px}
.su-leer p{max-width:44ch;margin:0}
.su-vorschlaege{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:8px;width:min(460px,100%)}
.su-vorschlag{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:1px solid var(--linie-stark);border-radius:var(--radius-feld);background:var(--weiss);text-align:left;font-size:15px;color:var(--tinte);transition:border-color .2s,background .2s}
.su-vorschlag:hover{border-color:var(--tinte);background:#fff}
.su-vorschlag span{flex:1;min-width:0}
.su-vorschlag b{font-size:14px;color:var(--akzent-dunkel);white-space:nowrap}
.su-vorschlag .ic{width:16px;height:16px;color:var(--grau)}

/* Seitennavigation */
.su-seiten{display:grid;justify-items:center;gap:10px;margin-top:36px}
.su-seiten:empty{display:none}
.su-seiten-knoepfe{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px}
.su-seite{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--linie-stark);border-radius:999px;background:#fff;font-weight:700;font-size:15px;color:var(--tinte);font-variant-numeric:tabular-nums;transition:border-color .2s}
.su-seite:hover:not([disabled]){border-color:var(--tinte)}
.su-seite[aria-current=page]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.su-seite[disabled]{opacity:.4;cursor:not-allowed}
.su-seite .ic{width:17px;height:17px}
.su-seite-luecke{padding:0 4px;color:var(--grau)}
.su-seiten-text{margin:0;font-size:14px;color:var(--grau)}
.su-pflicht{margin:28px 0 0}

/* Karte */
.su-karte{position:relative;margin-top:16px;border-radius:var(--radius-gross);overflow:hidden;box-shadow:var(--schatten-klein);background:#EBECEE}
.su-karte[hidden]{display:none}
.su-karte-flaeche{height:clamp(480px,68vh,720px);width:100%}
.su-karte .leer{height:100%;align-content:center}
.su-pin{display:grid!important;place-items:center;border-radius:50%;background:var(--akzent);color:#fff;font:800 13.5px/1 var(--f);box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(40,40,35,.45);transition:transform .2s var(--weich)}
.su-pin:hover,.su-pin:focus-visible{transform:scale(1.1);background:var(--akzent-dunkel)}
.su-pin-ich{border-radius:50%;background:var(--akzent);box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 25%,transparent),0 0 0 2px #fff inset}
.su-popup .leaflet-popup-content-wrapper{border-radius:16px;padding:0;box-shadow:var(--schatten)}
.su-popup .leaflet-popup-content{margin:0;width:auto!important;font-family:var(--f)}
.su-mpop-kopf{margin:0;padding:12px 14px 10px;font-weight:700;font-size:14px;color:var(--tinte);border-bottom:1px solid var(--linie)}
.su-mpop ul{list-style:none;margin:0;padding:6px;max-height:280px;overflow:auto}
.su-mpop-fz{display:flex;gap:10px;align-items:center;padding:6px;border-radius:10px;color:var(--tinte)!important}
.su-mpop-fz:hover{background:var(--flaeche)}
.su-mpop-bild{width:72px;height:54px;flex:none;border-radius:8px;overflow:hidden;background:var(--flaeche)}
.su-mpop-bild img{width:100%;height:100%;object-fit:cover}
.su-mpop-text{display:grid;gap:1px;min-width:0;font-size:13px;line-height:1.3}
.su-mpop-text b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-mpop-text>span{font-weight:700}
.su-mpop-text small{color:var(--grau);font-size:12.5px}
.su-karte .leaflet-control-attribution{font:11px/1.4 var(--f)}

.su-schleier{position:fixed;inset:0;z-index:65;background:rgba(29,28,26,.4)}
.su-schleier[hidden]{display:none}

/* Vergleichsleiste */
.su-vleiste{position:fixed;left:50%;bottom:calc(16px + var(--tabbar-h));z-index:44;transform:translateX(-50%);width:min(680px,calc(100% - 24px))}
.su-vleiste[hidden]{display:none}
.su-vleiste-innen{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 12px;border-radius:999px;background:#fff;color:var(--tinte);border:1px solid var(--linie);box-shadow:0 10px 32px rgba(40,40,35,.14)}
.su-vleiste-bilder{display:flex;gap:6px;flex:none}
.su-vleiste-bild{display:grid;place-items:center;width:52px;height:40px;border-radius:12px;overflow:hidden;background:var(--flaeche)}
.su-vleiste-bilder .su-vleiste-bild:first-child{border-radius:999px 12px 12px 999px}
.su-vleiste-bild img{width:100%;height:100%;object-fit:cover}
.su-vleiste-frei{box-shadow:inset 0 0 0 1.5px var(--linie);background:none;color:var(--grau-hell)}
.su-vleiste-frei .ic{width:16px;height:16px}
.su-vleiste-text{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.35;color:var(--sub)}
.su-vleiste-text b{color:var(--tinte)}
.su-vleiste .knopf .ic{width:16px;height:16px}
.su-vleiste-zu{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:50%;background:none;color:var(--grau)}
.su-vleiste-zu:hover{background:var(--flaeche);color:var(--akzent)}
.su-vleiste-zu .ic{width:18px;height:18px}

/* Suchabo-Dialog */
.su-abo-form{display:grid;gap:16px}
.su-abo-form>p{margin:0}
.su-abo-filter{display:grid;gap:8px}
.su-abo-chip{padding:6px 11px;font-size:13.5px;background:var(--flaeche);border-color:transparent}
.su-fehler:not(:empty){color:var(--rot)}
.su-abo-ok{display:grid;justify-items:start;gap:16px}
.su-abo-ok p{margin:0}

html.su-gesperrt{overflow:hidden}

/* Tablet */
/* Treibstoff-Gruppen (Hybrid, Gas …): Werte eingerückt unter der Gruppe; Mehrfarbig als geteilter Punkt */
.su-unter{display:grid;gap:9px;padding-left:28px;margin-top:-2px}
.su-unter .su-opt{font-size:14.5px}
.su-unter input:disabled+span{color:var(--sub)}
.su-farbpunkt-mehr{background:conic-gradient(#B3261E 0 25%,#E5C12E 0 50%,#2F6B47 0 75%,#E07B24 0)}

@media (max-width:1100px){
  .su-felder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .su-ansicht button span{display:none}
  .su-ansicht button{padding:8px 11px}
}

/* Telefon */
@media (max-width:760px){
  .buehne.kompakt.su-buehne .innen{padding-block:14px 80px}
  .su-karte-band{margin-top:-62px}
  .su-karte-kopf h1{font-size:clamp(26px,7.4vw,32px)}
  .su-lead{font-size:14.5px}
  .su-karte-suche{gap:12px;padding:16px;border-radius:var(--radius)}
  .su-reiter button{padding:8px 12px;font-size:14px}
  .su-suchfeld input{height:48px;font-size:16px}
  .su-felder,.su-mehr{display:none!important}
  .su-karte-fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:12px}
  .su-blatt-knopf{display:inline-flex;min-height:42px;padding:8px 14px}
  .su-sort{margin:0;min-width:0}
  .su-sort label span{display:none}
  .su-sort select{flex:1;min-width:0;width:100%}
  .su-karte-aktionen{grid-column:1/-1;justify-content:space-between}
  .su-abo-knopf{padding:9px 14px;font-size:14.5px}
  .su-treffer-knopf{display:none}
  .su-klebe{padding:6px 0}
  .su-klebe-innen{gap:8px}
  .su-chipfeld{padding:8px 11px 8px 13px;font-size:13.5px}
  .su-pop.su-pop-blatt{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:75;max-height:82svh;border-radius:24px 24px 0 0;transform:translateY(16px)}
  .su-pop.su-pop-blatt.offen{transform:none}
  .su-pop-fuss{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .su-optionen-2{grid-template-columns:minmax(0,1fr)}
  .su-teaser{grid-template-columns:auto minmax(0,1fr);padding:18px}
  .su-teaser .glas{--s:52px!important}
  .su-teaser .knopf{grid-column:1/-1}
  .su-haendler{padding:14px 16px}
  .su-vleiste{bottom:calc(10px + var(--tabbar-h))}
  .su-vleiste-innen{gap:10px;padding:8px}
  .su-vleiste-bild{width:40px;height:32px}
  .su-vleiste-bilder .su-vleiste-frei{display:none}
  .su-vleiste-text{display:none}
  .su-vleiste .knopf{flex:1}
  .su-karte-flaeche{height:min(70svh,560px)}
  .su-seite{min-width:42px;height:42px}
}
/* Abgasnorm (07.10.2026): «ab Euro X», darunter die genauen Stufen zum Aufklappen */
.su-euro-genau{margin-top:12px;border-top:1px solid var(--linie);padding-top:10px}
.su-euro-genau>summary{cursor:pointer;font-size:14.5px;font-weight:700;color:var(--tinte);padding:4px 0 8px}