/* drivebro — gemeinsame Gestaltung (Demo, 04.10.2026).
   Bildsprache von carbon-it-vision: dunkle Bühnen mit Glaskacheln, helle Flächen in Warmweiss und Sand, Manrope.
   Diese Datei gehört der Hauptsitzung. Seiten ergänzen eigene Regeln in assets/seiten/<seite>.css (Klassen mit Seitenpräfix). */
@font-face{font-family:"Manrope";src:url(schrift/manrope.woff2) format("woff2");font-weight:300 800;font-display:swap}
:root{
  --weiss:#FFFFFF;--flaeche:#F4F4F5;--flaeche-2:#EEF0F1;--karte:#FFFFFF;
  --tinte:#1B1E1A;--text:#313438;--grau:#63676D;--grau-hell:#6C7076;--linie:#E4E5E7;--linie-stark:#D3D5D9;
  --nacht:#1B1E1A;--nacht-2:#15181B;--nacht-linie:color-mix(in srgb,var(--limette) 14%,transparent);--braun:#1B1E1A;
  --akzent:#23272B;--akzent-dunkel:#15181B;--akzent-hell:#9AA0A6;--akzent-flaeche:#EEF0F1;
  --blau-hell:#23272B;--blau:#23272B;--violett:#15181B;
  --verlauf:linear-gradient(100deg,var(--blau-hell),var(--blau) 45%,var(--violett));
  --gruen:#1E7A45;--gruen-flaeche:#E4F2E8;--hellgruen:#3B7D22;--hellgruen-flaeche:#EEF6E4;--bernstein:#A86400;--bernstein-flaeche:#FBF0DC;
  --rot:#C2361F;
  --radius:20px;--radius-gross:26px;--radius-feld:14px;
  --f:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --rand:clamp(16px,3.2vw,56px);--weich:cubic-bezier(.2,.8,.2,1);
  --schatten:0 44px 60px -34px rgba(20,23,27,.5),0 14px 26px -14px rgba(20,23,27,.26);
  --schatten-klein:0 1px 2px rgba(29,26,22,.06),0 10px 24px -14px rgba(29,26,22,.28);
  --kopf-h:72px;--tabbar-h:0px
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--weiss);color:var(--text);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:var(--tabbar-h)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em;color:var(--tinte);margin:0;text-wrap:balance;line-height:1.12}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.voll{fill:currentColor;stroke:none}
.innen{max-width:1360px;margin-inline:auto;padding-inline:var(--rand)}
.innen.schmal{max-width:980px}
.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}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:4px}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.stumm{color:var(--grau)}
.klein{font-size:14px}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--tinte);color:#fff;border:0;border-radius:999px;padding:14px 22px;font-weight:600;font-size:15.5px;line-height:1.2;box-shadow:0 14px 24px -14px rgba(20,23,27,.6);transition:background .25s,transform .25s var(--weich),box-shadow .25s;white-space:nowrap}
.knopf .ic{width:17px;height:17px;transition:transform .3s var(--weich)}
.knopf:hover{background:#000}
.knopf:hover .ic.weiter{transform:translateX(3px)}
.knopf.hell{background:#fff;color:var(--tinte)}
.knopf.hell:hover{background:var(--flaeche-2)}
.knopf.rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--linie-stark)}
.knopf.rand:hover{box-shadow:inset 0 0 0 1.5px var(--tinte);background:transparent}
.knopf.akzent{background:var(--akzent);color:#fff;box-shadow:0 14px 24px -14px color-mix(in srgb,var(--akzent) 70%,transparent)}
.knopf.akzent:hover{background:var(--akzent-dunkel)}
.knopf.klein{padding:10px 14px;font-size:14.5px}
.knopf.breit{width:100%}
.knopf[disabled]{opacity:.45;cursor:not-allowed}
.dunkel .knopf.rand,.buehne .knopf.rand{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.dunkel .knopf.rand:hover,.buehne .knopf.rand:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px #fff}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;color:var(--tinte);border-bottom:1.5px solid currentColor;padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.tlink .ic{width:14px;height:14px;transition:transform .3s var(--weich)}
.tlink:hover .ic{transform:translateX(3px)}
.buehne .tlink,.dunkel .tlink{color:#fff}
.symbolknopf{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--linie);background:#fff;color:var(--tinte);transition:border-color .2s,background .2s}
.symbolknopf:hover{border-color:var(--tinte)}
.symbolknopf .ic{width:19px;height:19px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(27,30,26,.96),rgba(27,30,26,.93));-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--limette) 10%,transparent),0 10px 30px -20px rgba(0,0,0,.6);color:#fff}
.kopf-innen{display:flex;align-items:center;gap:28px;height:var(--kopf-h);max-width:1360px;margin-inline:auto;padding-inline:var(--rand)}
.marke{display:inline-flex;align-items:baseline;font:800 26px/1 var(--f);letter-spacing:-.05em;color:#fff;white-space:nowrap}
.marke i{font-style:normal;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:2px;height:100%;margin-right:auto}
.nav a{display:flex;align-items:center;height:100%;padding:0 13px;font-size:15px;font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap;transition:color .2s}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--blau-hell)}
.nav-gruppe{position:relative;display:flex;height:100%}
.nav-gruppe>a{gap:6px}
.nav-gruppe .nav-pfeil{width:14px;height:14px;transition:transform .25s var(--weich)}
.nav .nav-panel{position:absolute;top:calc(100% - 6px);left:0;min-width:260px;padding:8px;display:grid;gap:2px;z-index:50;background:#fff;box-shadow:0 1px 2px rgba(27,30,26,.08),0 30px 60px -20px rgba(27,30,26,.55);opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);transform-origin:top left;transition:opacity .2s,transform .25s var(--weich),visibility 0s .25s}
.nav-gruppe:hover .nav-panel,.nav-gruppe:focus-within .nav-panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--weich)}
.nav-gruppe:hover .nav-pfeil,.nav-gruppe:focus-within .nav-pfeil{transform:rotate(180deg)}
.nav .nav-panel a{height:auto;padding:10px 12px;border-radius:12px;gap:12px;font-size:15px;font-weight:600;color:var(--tinte);box-shadow:none}
.nav .nav-panel a:hover{background:rgba(29,26,22,.06);color:var(--tinte)}
.nav .nav-panel a .ic{width:20px;height:20px;color:var(--akzent)}
.kopf-rechts{display:flex;align-items:center;gap:6px}
.kopf-symbol{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;color:rgba(255,255,255,.85);transition:background .2s,color .2s}
.kopf-symbol:hover{background:rgba(255,255,255,.08);color:#fff}
.kopf-symbol .ic{width:21px;height:21px}
.kopf-symbol .zahl{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blau);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.kopf-symbol .zahl:empty{display:none}
.kopf-rechts .knopf{margin-left:10px;padding:11px 16px;font-size:14.5px;box-shadow:none}
.kopf-konto{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:24px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.85)}
.kopf-konto:hover{background:rgba(255,255,255,.08);color:#fff}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--verlauf);color:#15181B;font-weight:800;font-size:13px;flex:none}
.menue-knopf{display:none;width:42px;height:42px;border:0;background:none;color:#fff;place-items:center;border-radius:50%}
.menue-knopf .ic{width:24px;height:24px}
.mobil-panel{position:fixed;inset:var(--kopf-h) 0 0 0;z-index:39;overflow:auto;background:var(--weiss);color:var(--tinte);padding:8px var(--rand) 120px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .25s var(--weich),visibility 0s .25s}
.mobil-panel.offen{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--weich)}
.mobil-panel h2{font-size:13px;letter-spacing:0;color:var(--grau);font-weight:600;margin:22px 0 4px}
.mobil-panel a{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--linie);font-size:18px;font-weight:600}
.mobil-panel a .ic{width:18px;height:18px;color:var(--grau-hell)}
.mobil-panel .knopf{margin-top:24px;width:100%;border:0;font-size:16px;justify-content:center;color:#fff}

/* Untere Leiste (App-Gefühl auf dem Telefon) */
.tabbar{display:none}

/* Bühne: dunkler Einstieg jeder Seite */
.buehne{position:relative;isolation:isolate;background:radial-gradient(120% 90% at 78% 40%,#23272B 0%,#15181B 38%,var(--nacht) 72%);color:rgba(255,255,255,.78);overflow:hidden}
.buehne::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 20% 110%,color-mix(in srgb,var(--akzent) 16%,transparent),transparent 70%);pointer-events:none}
.buehne .innen{padding-block:clamp(48px,7vw,104px)}
.buehne.kompakt .innen{padding-block:clamp(28px,3.4vw,48px)}
.buehne h1{font-size:clamp(40px,5.6vw,84px);line-height:1;letter-spacing:-.045em;color:#fff}
.buehne.kompakt h1{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.035em}
.buehne h1 span,.verlauf-text{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.buehne .leitsatz{font-size:clamp(19px,1.8vw,24px);font-weight:700;letter-spacing:-.02em;color:#fff;margin:18px 0 0}
.buehne .lead{font-size:clamp(16.5px,1.4vw,19px);line-height:1.55;color:rgba(255,255,255,.76);max-width:36em;margin:16px 0 0}
.buehne .knoepfe{margin-top:28px}
.pfad{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:14px}
.pfad a:hover{color:#fff}
.pfad .ic{width:12px;height:12px;align-self:center}

/* Glaskacheln (3D) */
.glas{--s:84px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.26);background:linear-gradient(155deg,#FFFFFF 0%,#F8F8F9 46%,#ECEDEF 100%);box-shadow:0 22px 40px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.6) inset,0 -6px 14px rgba(27,30,26,.25) inset,0 0 40px -6px color-mix(in srgb,var(--akzent) 35%,transparent)}
.glas::before{content:"";position:absolute;inset:4% 8% 52% 8%;border-radius:calc(var(--s)*.22) calc(var(--s)*.22) 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none}
.glas svg{position:relative;width:56%;height:56%;fill:none;stroke:url(#occ-verlauf);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 4px color-mix(in srgb,var(--akzent) 25%,transparent))}
.glas .glas-text{position:relative;font:800 calc(var(--s)*.27)/1 var(--f);letter-spacing:-.04em;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.glas.hell{box-shadow:0 18px 30px -18px rgba(29,26,22,.45),0 0 0 1px rgba(29,26,22,.05),0 -6px 14px rgba(27,30,26,.2) inset}

/* Abschnitte */
.block{padding-block:clamp(56px,6.5vw,96px)}
.block.flaeche{background:var(--flaeche)}
.block.weiss{background:var(--weiss)}
.block.dunkel,.dunkel{background:var(--braun);color:#D6CFC4}
.dunkel h2,.dunkel h3{color:#fff}
.block.eng{padding-block:clamp(36px,4vw,56px)}
.block-kopf{max-width:820px;margin-bottom:clamp(28px,3.4vw,48px)}
.block-kopf h2{font-size:clamp(28px,3vw,44px);line-height:1.08}
.block-kopf p{font-size:17.5px;color:var(--grau);max-width:56ch;margin:14px 0 0}
.dunkel .block-kopf p{color:#ACA296}
.kopf-zeile{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.kopf-zeile h2{font-size:clamp(24px,2.4vw,34px)}
.notiz{font-size:14px;color:var(--grau);max-width:75ch}

/* Formulare */
.feld{display:grid;gap:6px;min-width:0}
.feld>span,.feld>label,.feld-titel{font-size:13.5px;font-weight:600;color:var(--grau)}
.eingabe,.feld input:not([type=checkbox]):not([type=radio]):not([type=range]),.feld select,.feld textarea{width:100%;min-width:0;height:48px;padding:0 16px;border:1px solid var(--linie-stark);border-radius:var(--radius-feld);background:rgba(255,255,255,.92);font-size:15.5px;color:var(--tinte);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.feld textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.5;resize:vertical}
.feld select,select.eingabe{padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2363676D' 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}
.eingabe:hover,.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--linie-stark)}
.eingabe:focus,.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.feld-hinweis{font-size:13px;color:var(--grau)}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.haken{display:flex;align-items:flex-start;gap:10px;font-size:15px;cursor:pointer;line-height:1.4}
.haken input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--linie-stark);border-radius:5px;background:#fff;display:grid;place-items:center;transition:background .15s,border-color .15s}
.haken input[type=radio]{border-radius:50%}
.haken input:checked{background:var(--tinte);border-color:var(--tinte)}
.haken input:checked::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.haken input[type=radio]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--linie);border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;color:var(--text);transition:border-color .2s,background .2s,color .2s}
.chip:hover{border-color:var(--linie-stark)}
.chip[aria-pressed=true],.chip.an{background:var(--tinte);border-color:var(--tinte);color:#fff}
.chip .ic{width:16px;height:16px}
.segment{display:inline-flex;padding:4px;border-radius:10px;background:var(--flaeche);gap:2px}
.segment button{border:0;background:none;padding:9px 16px;border-radius:7px;font-weight:600;font-size:14.5px;color:var(--grau)}
.segment button[aria-pressed=true]{background:#fff;color:var(--tinte);box-shadow:var(--schatten-klein)}

/* Fahrzeugkarte */
.raster-fz{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(16px,2vw,28px)}
.fz{position:relative;display:flex;flex-direction:column;background:var(--karte);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten-klein);transition:box-shadow .3s var(--weich),transform .3s var(--weich)}
.fz:hover{box-shadow:0 2px 4px rgba(29,26,22,.06),0 26px 40px -24px rgba(29,26,22,.45);transform:translateY(-2px)}
.fz-bild{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,#E9E4DB,#D9D1C4);overflow:hidden}
.fz-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--weich)}
.fz:hover .fz-bild img{transform:scale(1.03)}
.fz-bild .fz-zahl{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:5px;background:rgba(27,30,26,.66);color:#fff;font-size:12.5px;font-weight:600}
.fz-bild .fz-zahl .ic{width:13px;height:13px}
.fz-marke{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.fz-merken{position:absolute;right:10px;top:10px;z-index:2;display:grid;place-items:center;width:38px;height:38px;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);transition:transform .2s var(--weich),color .2s}
.fz-merken:hover{transform:scale(1.08)}
.fz-merken .ic{width:19px;height:19px}
.fz-merken[aria-pressed=true]{color:var(--rot)}
.fz-merken[aria-pressed=true] .ic{fill:currentColor}
.fz-text{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.fz-titel{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--tinte);line-height:1.25}
.fz-titel a::after{content:"";position:absolute;inset:0;z-index:1}
.fz-version{font-size:13.5px;color:var(--grau);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-preiszeile{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.fz-preis{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--tinte)}
.fz-vorher{font-size:13.5px;color:var(--grau-hell);text-decoration:line-through}
.fz-leasing{font-size:13px;color:var(--grau)}
.fz-fakten{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;color:var(--text);margin-top:2px}
.fz-fakten span{display:inline-flex;align-items:center;gap:5px}
.fz-fakten .ic{width:14px;height:14px;color:var(--grau-hell)}
.fz-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--linie);font-size:13px;color:var(--grau)}
.fz-fuss span{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap}
.fz-fuss span:first-child{flex:none}
.fz-fuss span:last-child{display:block;overflow:hidden;text-overflow:ellipsis;text-align:right}
.fz-fuss span:last-child .ic{display:inline-block;vertical-align:-2px;margin-right:5px}
.fz-fuss .ic{width:14px;height:14px}
.fz.liste{flex-direction:row}
.fz.liste .fz-bild{width:clamp(220px,32%,340px);flex:none;aspect-ratio:auto;min-height:200px}
.fz.liste .fz-text{padding:18px 20px}

/* Preisbewertung (Wort, kein Symbol) */
.bew{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;font-size:12.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.bew::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.bew.sehr-gut{background:var(--gruen-flaeche);color:var(--gruen)}
.bew.gut{background:var(--hellgruen-flaeche);color:var(--hellgruen)}
.bew.fair{background:var(--akzent-flaeche);color:var(--akzent-dunkel)}
.bew.erhoeht{background:var(--bernstein-flaeche);color:var(--bernstein)}
.etikett{display:inline-flex;align-items:center;padding:4px 8px;border-radius:5px;background:rgba(255,255,255,.94);color:var(--tinte);font-size:12px;font-weight:700;line-height:1.3;box-shadow:0 4px 10px -6px rgba(0,0,0,.35)}
.etikett.dunkel-e{background:rgba(27,30,26,.78);color:#fff}

/* Datenlisten */
.daten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 32px;margin:0}
.daten div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:15px}
.daten dt{color:var(--grau)}
.daten dd{margin:0;font-weight:600;color:var(--tinte);text-align:right}

/* Tafel (weisse Fläche mit Rand) */
.tafel{background:#fff;border-radius:var(--radius-gross);box-shadow:var(--schatten-klein);padding:clamp(18px,2.2vw,28px)}
.tafel h2,.tafel h3{font-size:20px;margin-bottom:14px}

/* Leerer Zustand */
.leer{display:grid;justify-items:center;gap:14px;text-align:center;padding:56px 20px;color:var(--grau)}
.leer h3{font-size:21px}
.leer .glas{--s:72px}

/* Hinweis */
.hinweis{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-feld);background:var(--akzent-flaeche);color:var(--akzent-dunkel);font-size:14.5px;line-height:1.5}
.hinweis .ic{width:19px;height:19px;flex:none;margin-top:1px}
.hinweis.warm{background:var(--bernstein-flaeche);color:#7A4A00}

/* Dialog und Meldung */
.dialog{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(27,30,26,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.dialog.offen{opacity:1}
.dialog-box{position:relative;width:min(560px,100%);max-height:calc(100svh - 32px);overflow:auto;background:var(--weiss);border-radius:var(--radius-gross);box-shadow:var(--schatten);padding:clamp(22px,3vw,34px);transform:translateY(10px);transition:transform .3s var(--weich)}
.dialog.offen .dialog-box{transform:none}
.dialog-box h2{font-size:24px;margin:0 40px 14px 0}
.dialog-zu{position:absolute;right:14px;top:14px}
.meldung{position:fixed;left:50%;bottom:calc(24px + var(--tabbar-h));z-index:90;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:13px 18px;border-radius:10px;background:var(--nacht);color:#fff;font-size:15px;font-weight:600;box-shadow:var(--schatten);transform:translate(-50%,20px);opacity:0;transition:opacity .25s,transform .3s var(--weich);pointer-events:none}
.meldung.zeigen{opacity:1;transform:translate(-50%,0)}
.meldung .ic{width:18px;height:18px;color:var(--blau-hell)}

/* Fuss */
.fuss{background:var(--braun);color:#ACA296;padding-block:clamp(48px,6vw,80px) 28px;font-size:15px}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
.fuss h2{font-size:14px;letter-spacing:0;color:#fff;margin:4px 0 14px;font-weight:700}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss a:hover{color:#fff}
.fuss .marke{font-size:30px}
.fuss-satz{margin:16px 0 0;max-width:30ch;color:#ACA296}
.fuss-app{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.store-knopf{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;border:1px solid #4A443C;color:#fff;font-size:12px;line-height:1.15}
.store-knopf b{display:block;font-size:15px}
.store-knopf .ic{width:22px;height:22px}
.store-knopf:hover{border-color:#8A8278}
.fuss-recht{margin:36px 0 0;max-width:110ch;font-size:13px;line-height:1.5;color:#8A8278}
.fuss-unten{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:20px;padding-top:22px;border-top:1px solid #37322B;font-size:13.5px;color:#8A8278}


/* ---------- Liquid Glass (Apple) / Mica (Windows 11) ---------- */
/* Glasfläche auf dunklem Grund (Bühne, Fotos) */
.glas-flaeche{position:relative;isolation:isolate;border-radius:var(--radius-gross);color:#fff;
  background:linear-gradient(160deg,#23272B 0%,#15181B 55%,#15181B 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.03),0 40px 80px -40px rgba(0,0,0,.75),0 10px 30px -18px rgba(0,0,0,.5)}
.glas-flaeche::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 12% -10%,rgba(255,255,255,.28),transparent 55%),radial-gradient(80% 50% at 100% 120%,color-mix(in srgb,var(--limette) 12%,transparent),transparent 60%)}
/* Helle Glasfläche (Mica) für helle Seiten und über Fotos */
.glas-flaeche.hell{color:var(--text);background:#FFFFFF;
  border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(29,26,22,.05),0 30px 60px -36px rgba(29,26,22,.45)}
.glas-flaeche.hell::before{background:radial-gradient(120% 60% at 10% -20%,rgba(255,255,255,.9),transparent 60%)}
.glas-flaeche.weich{border-radius:var(--radius)}
/* Weisse Karte wie im Vorbild: deckend, ruhiger Schatten (Suchkarte, Formulare, Popover) */
.karte-hell{position:relative;background:#fff;color:var(--text);border-radius:var(--radius-gross);border:1px solid rgba(29,26,22,.06);
  box-shadow:0 1px 2px rgba(27,30,26,.06),0 24px 60px -28px rgba(27,30,26,.45)}
.karte-hell h1,.karte-hell h2,.karte-hell h3{color:var(--tinte)}
/* Glas-Knopf (Kapsel) */
.glas-knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 18px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px -12px rgba(0,0,0,.55);transition:background .2s,transform .2s var(--weich),box-shadow .2s}
.glas-knopf:hover{background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.12))}
.glas-knopf:active{transform:scale(.97)}
.glas-knopf .ic{width:18px;height:18px}
.glas-knopf.hell{color:var(--tinte);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));border-color:rgba(29,26,22,.08);box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgba(29,26,22,.45)}
.glas-knopf.hell:hover{background:#fff}
.glas-knopf[aria-pressed=true]{background:var(--tinte);color:#fff;border-color:var(--tinte)}
/* Hauptknopf mit Verlauf (statt Gelb) */
.knopf.verlauf{background:linear-gradient(100deg,#23272B 0%,#23272B 45%,#15181B 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 30px -14px color-mix(in srgb,var(--akzent) 75%,transparent)}
.knopf.verlauf:hover{filter:brightness(1.06);background:linear-gradient(100deg,#23272B 0%,#23272B 45%,#15181B 100%)}
/* Glas-Reiter (Segment wie iOS) */
.glas-reiter{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.glas-reiter button,.glas-reiter a{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:rgba(255,255,255,.75);padding:9px 16px;border-radius:999px;font-weight:600;font-size:14.5px;white-space:nowrap}
.glas-reiter [aria-selected=true],.glas-reiter [aria-current]{background:rgba(255,255,255,.92);color:var(--tinte);box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
.glas-reiter .ic{width:18px;height:18px}
.glas-reiter.hell{background:rgba(29,26,22,.05);border-color:rgba(29,26,22,.06)}
.glas-reiter.hell button,.glas-reiter.hell a{color:var(--grau)}
.glas-reiter.hell [aria-selected=true],.glas-reiter.hell [aria-current]{background:#fff;color:var(--tinte);box-shadow:0 4px 14px -8px rgba(29,26,22,.45)}
/* Bühne bekommt Glanzlichter, damit das Glas etwas zu brechen hat */
.buehne.glanz::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 80% 0%,color-mix(in srgb,var(--akzent) 14%,transparent),transparent 70%)}

/* ---------- Trefferzeile wie im Vorbild (Occ.karte variante:'zeile') ---------- */
.fzz{position:relative;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--linie)}
.fzz-bilder{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:4px;border-radius:16px;overflow:hidden;align-self:start;background:var(--flaeche)}
.fzz-bilder .gross{grid-column:1/-1;aspect-ratio:4/3;position:relative}
.fzz-bilder .klein{aspect-ratio:4/3}
.fzz-bilder img{width:100%;height:100%;object-fit:cover}
.fzz-bilder .fz-zahl{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(27,30,26,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:12.5px;font-weight:600}
.fzz-bilder .fz-zahl .ic{width:13px;height:13px}
.fzz-bilder .fz-marke{position:absolute;left:10px;top:10px;display:flex;gap:6px}
.fzz-text{display:flex;flex-direction:column;min-width:0}
.fzz-kopf{display:flex;gap:16px;align-items:flex-start}
.fzz-titel{flex:1;min-width:0;font-size:17.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--tinte);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fzz-titel a::after{content:"";position:absolute;inset:0;z-index:1}
.fzz-aktionen{position:relative;z-index:2;display:flex;gap:6px;flex:none}
.fzz-aktionen button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--linie);background:rgba(255,255,255,.8);color:var(--tinte);transition:border-color .2s,color .2s,background .2s}
.fzz-aktionen button:hover{border-color:var(--linie-stark);background:#fff}
.fzz-aktionen button .ic{width:19px;height:19px}
.fzz-aktionen button[aria-pressed=true]{color:var(--rot)}
.fzz-aktionen button[aria-pressed=true] .ic{fill:currentColor}
.fzz-aktionen button[data-vergleichen][aria-pressed=true]{color:#fff;background:var(--tinte);border-color:var(--tinte)}
.fzz-unter{margin-top:4px;font-size:14px;color:var(--grau);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fzz-preis{margin-top:12px;font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--tinte);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fzz-preis .fz-vorher{font-size:14px;font-weight:600}
.fzz-links{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px;margin-top:2px;font-size:14px}
.fzz-links a{color:var(--akzent);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.fzz-links a:hover{color:var(--akzent-dunkel)}
.fzz-links .ic{width:15px;height:15px}
.fzz-etiketten{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fzz-etiketten span{padding:5px 10px;border-radius:999px;background:var(--flaeche);font-size:13px;font-weight:600;color:var(--text)}
.fzz-fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;margin-top:14px;font-size:14px;color:var(--text)}
.fzz-fakten span{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzz-fakten .ic{width:16px;height:16px;color:var(--grau-hell)}
.fzz-fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:16px;font-size:14px;color:var(--grau)}
.fzz-verkaeufer{display:flex;align-items:center;gap:12px;min-width:0}
.fzz-logo{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--nacht);color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em}
.fzz-logo.privat{background:var(--flaeche);color:var(--grau)}
.fzz-logo.privat .ic{width:20px;height:20px}
.fzz-verkaeufer b{color:var(--tinte);font-weight:600}
.fzz-verkaeufer a{position:relative;z-index:2;color:var(--akzent);font-weight:600}
/* Kompaktkarte (Reihen auf der Startseite, Empfehlungen) */
.fzk{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.fzk-bild{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--flaeche);box-shadow:var(--schatten-klein)}
.fzk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--weich)}
.fzk:hover .fzk-bild img{transform:scale(1.03)}
.fzk-titel{font-size:15px;font-weight:700;color:var(--tinte);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzk-titel a::after{content:"";position:absolute;inset:0}
.fzk-preis{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--tinte)}
.fzk-fakten{display:grid;gap:2px;font-size:13.5px;color:var(--grau)}
.fzk-fakten span{display:flex;align-items:center;gap:6px}
.fzk-fakten .ic{width:14px;height:14px}
.reihe-fz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}


/* ---------- Bewegung: hochwertige Übergänge (nur mit JS und ohne «Bewegung reduzieren», Klasse html.bew) ---------- */
/* Seitenwechsel wie in einer App (Chrome, Edge, Safari 18.2+) */
@view-transition{navigation:auto}
.kopf{view-transition-name:kopf}
.tabbar{view-transition-name:tabbar}
::view-transition-old(root){animation:vt-aus .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-ein .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-aus{to{opacity:0;transform:scale(.992)}}
@keyframes vt-ein{from{opacity:0;transform:translateY(14px)}}
/* Einblenden beim Scrollen */
html.occ-bewegt [data-zeigen]:not([data-zeigen=gruppe]),html.occ-bewegt [data-zeigen=gruppe]>*{transition:opacity .8s var(--weich),transform .95s var(--weich);transition-delay:calc(var(--i,0) * 60ms)}
html.occ-bewegt [data-zeigen]:not([data-zeigen=gruppe]):not(.sichtbar),html.occ-bewegt [data-zeigen=gruppe]:not(.sichtbar)>*{opacity:0;transform:translateY(28px)}
/* Bühne: Inhalt fährt beim Laden weich herein */
html.occ-bewegt .buehne .pfad,html.occ-bewegt .buehne h1,html.occ-bewegt .buehne .leitsatz,html.occ-bewegt .buehne .lead,html.occ-bewegt .buehne .knoepfe,html.occ-bewegt .buehne>.innen>.glas-flaeche,html.occ-bewegt .buehne .glas-flaeche[data-buehne]{animation:ein-hoch 1s var(--weich) both}
html.occ-bewegt .buehne h1{animation-delay:.05s}
html.occ-bewegt .buehne .leitsatz,html.occ-bewegt .buehne .lead{animation-delay:.16s}
html.occ-bewegt .buehne .knoepfe{animation-delay:.26s}
html.occ-bewegt .buehne>.innen>.glas-flaeche{animation-delay:.22s}
@keyframes ein-hoch{from{opacity:0;transform:translateY(22px);filter:blur(8px)}}
/* Bilder blenden weich ein, sobald sie geladen sind */
html.occ-bewegt main img{transition:opacity .6s var(--weich),transform .9s var(--weich),filter .6s var(--weich)}
html.occ-bewegt main img:not(.geladen){opacity:0;filter:blur(10px)}
/* Lichtreflex, der dem Zeiger folgt (Liquid Glass) */
.glas-flaeche::after,.knopf.verlauf::after,.glas-knopf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 42%)}
.glas-flaeche.hell::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--limette) 10%,transparent),transparent 45%)}
.knopf.verlauf,.glas-knopf{position:relative;overflow:hidden}
.knopf.verlauf::after{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),transparent 60%)}
.glas-flaeche:hover::after,.knopf.verlauf:hover::after,.glas-knopf:hover::after{opacity:1}
/* Drücken fühlt sich an wie Glas */
.knopf:active,.glas-knopf:active,.chip:active,.symbolknopf:active,.kopf-symbol:active{transform:scale(.965);transition-duration:.08s}
.knopf.verlauf{background-size:160% 100%;background-position:0 0;transition:background-position .6s var(--weich),transform .25s var(--weich),box-shadow .3s}
.knopf.verlauf:hover{background-position:100% 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 20px 38px -14px color-mix(in srgb,var(--akzent) 85%,transparent)}
/* Karten und Zeilen */
.fzz{transition:background-color .3s}
.fzz-bilder img{transition:transform .9s var(--weich),opacity .6s var(--weich),filter .6s var(--weich)}
.fzz:hover .fzz-bilder .gross img{transform:scale(1.035)}
.fzk-bild{transition:box-shadow .4s var(--weich),transform .4s var(--weich)}
.fzk:hover .fzk-bild{transform:translateY(-3px);box-shadow:0 2px 4px rgba(29,26,22,.06),0 24px 40px -22px rgba(29,26,22,.5)}
/* Herz springt beim Merken */
.pop .ic{animation:herz-pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes herz-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
/* Kopf: tieferer Schatten nach dem ersten Scrollen */
.kopf{transition:box-shadow .35s,background-color .35s}
.kopf.gescrollt{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--limette) 12%,transparent),0 18px 40px -18px rgba(0,0,0,.75)}
/* Aufklappen weich (Chrome 131+, Safari 18.4+) */
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--weich),content-visibility .4s allow-discrete}
details[open]::details-content{block-size:auto}
/* Zahlen, die hochzählen, behalten ihre Breite */
[data-zaehlen],.zaehlt{font-variant-numeric:tabular-nums}
@media print{[data-zeigen],[data-zeigen]>*,main img{opacity:1!important;transform:none!important;filter:none!important}}


/* ---------- Bildlauf in Karten und Trefferzeilen ---------- */
.bl{position:relative;z-index:2;width:100%;height:100%;overflow:hidden;background:var(--flaeche)}
.bl-spur{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.bl-spur::-webkit-scrollbar{display:none}
.bl-bild{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:block}
.bl-bild img{width:100%;height:100%;object-fit:cover}
.bl-pfeil{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:38px;height:38px;margin-top:-19px;border:0;border-radius:50%;color:var(--tinte);
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 8px 20px -10px rgba(27,30,26,.6);opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s var(--weich),background .2s}
.bl-pfeil .ic{width:18px;height:18px;stroke-width:2.2}
.bl-pfeil.zurueck{left:10px}
.bl-pfeil.weiter{right:10px}
.bl-pfeil:hover{background:#fff}
.bl:hover .bl-pfeil,.bl:focus-within .bl-pfeil{opacity:1;transform:none}
.bl.am-anfang .bl-pfeil.zurueck{opacity:0;pointer-events:none}
.bl-punkte{position:absolute;left:50%;bottom:12px;z-index:3;display:flex;gap:5px;padding:5px 7px;border-radius:999px;transform:translateX(-50%);
  background:rgba(27,30,26,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.bl-punkte i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .25s,transform .25s var(--weich)}
.bl-punkte i.an{background:#fff;transform:scale(1.25)}
.bl .bl-zahl{z-index:3;pointer-events:none}
.fz-bild .bl .bl-zahl,.fzz-bilder .bl .bl-zahl{position:absolute;left:10px;bottom:10px}
.fzz-bilder .klein{padding:0;border:0;background:none;cursor:pointer;position:relative;z-index:2;overflow:hidden}
.fzz-bilder .klein img{transition:transform .5s var(--weich),opacity .6s var(--weich),filter .6s var(--weich)}
.fzz-bilder .klein:hover img{transform:scale(1.05)}
.fz:hover .fz-bild .bl img{transform:none}
@media (hover:none){.bl-pfeil{display:none}}

/* Korrektur 04.10.2026 (Mehmet): nichts schwebt mehr im Hintergrund */
.glas{animation:none!important}

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


/* ==================== drivebro: Marke «Graphit und Kupfer» (Entscheid Mehmet 06.10.2026, ersetzt Racing Green und Limette: zu nah an Comparis) ====================
   Designsprache bleibt: hell, Hanken Grotesk, Kapsel-Knöpfe, weisse Karten, nichts schwebt, keine Verläufe. Graphit #23272B als Akzent,
   Kupfer #E8873F (Text darauf #1B1E1A, nie Weiss) für Haupt-Aufrufe und als Erkennungszeichen zwei parallele Rennstreifen (breit + schmal, siehe .streifen).
   Die Variablennamen bleiben (--akzent*, --limette*): Limette = seit 06.10.2026 Kupfer. Status-Farben (--gruen, --rot, --bernstein) sind Bedeutung, keine Marke.
   Flächen seit 06.10.2026 abends Weiss und neutrales, leicht kühles Grau (kein Sand mehr). Farben nur über die Variablen unten; Tönungen und Fokusringe per color-mix().
   Diese Schicht überschreibt die frühere Carbon-Gestaltung oben; Regeln für Telefon und Tablet folgen danach. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(schrift/HankenGrotesk-400Regular.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(schrift/HankenGrotesk-600SemiBold.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(schrift/HankenGrotesk-700Bold.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url(schrift/HankenGrotesk-800ExtraBold.woff2) format("woff2")}
/* 900 (Black) für Wortmarke, grosse Titel und Preis-Plaketten; Fontsource-Teilmengen latin und latin-ext, OFL wie oben */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:900;font-display:swap;src:url(schrift/HankenGrotesk-900Black.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:900;font-display:swap;src:url(schrift/HankenGrotesk-900Black-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* Grund und Flächen: Weiss mit neutralen, leicht kühlen Grautönen (Entscheid Mehmet 06.10.2026 abends: kein Beige, dezent wie parkbro) */
  --weiss:#FFFFFF;--grund:#FFFFFF;--flaeche:#F4F4F5;--flaeche-2:#EEF0F1;--sand:#F4F4F5;--karte:#FFFFFF;
  /* Text */
  --tinte:#1B1E1A;--text:#313438;--sub:#53575D;--grau:#63676D;--grau-hell:#6C7076;--linie:#E4E5E7;--linie-stark:#D3D5D9;
  /* Marke: Graphit und Kupfer (Limette = seit 06.10.2026 Kupfer; die Namen bleiben, damit alle Seitenregeln mitziehen) */
  --akzent:#23272B;--akzent-dunkel:#15181B;--akzent-hell:#9AA0A6;--akzent-flaeche:#EEF0F1;
  --limette:#E8873F;--limette-dunkel:#D2752F;--auf-limette:#1B1E1A;--streifen-breit:var(--akzent);--streifen-schmal:var(--limette);
  /* Alte Namen (Carbon/parkbro) zeigen auf die Marke, damit ältere Seitenregeln mitziehen */
  --blau-hell:var(--akzent);--blau:var(--akzent);--violett:var(--akzent-dunkel);--verlauf:linear-gradient(100deg,var(--akzent),var(--akzent));
  /* Zustände (Erfolg, Hinweis): Status-Grün nur als Bedeutung, nie als Marke; --gruen-punkt ist der Marken-Punkt (Kupfer) */
  --gruen:#1E7A45;--gruen-flaeche:#E4F2E8;--gruen-punkt:var(--limette);--hellgruen:#3B7D22;--hellgruen-flaeche:#EEF6E4;
  --bernstein:#A86400;--bernstein-flaeche:#FBF0DC;
  --nacht:#1B1E1A;--braun:#1B1E1A;
  --f:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --weich:cubic-bezier(.22,1,.36,1);
  --radius:18px;--radius-gross:22px;--radius-feld:12px;
  --schatten:0 10px 32px rgba(27,30,26,.08),0 2px 6px rgba(27,30,26,.04);
  --schatten-klein:0 1px 2px rgba(27,30,26,.05),0 8px 24px -10px rgba(27,30,26,.16);
  --schatten-gruen:0 2px 4px color-mix(in srgb,var(--akzent-dunkel) 8%,transparent),0 24px 60px color-mix(in srgb,var(--akzent-dunkel) 18%,transparent);
  --knopf-schatten:0 10px 24px color-mix(in srgb,var(--akzent-dunkel) 22%,transparent);
  --fokus:color-mix(in srgb,var(--akzent) 55%,transparent);
  --feld-fokus:0 0 0 3px color-mix(in srgb,var(--limette) 45%,transparent)
}
body{background:var(--weiss);color:var(--text);line-height:1.5;font-family:var(--f)}
h1,h2,h3,h4{color:var(--tinte);letter-spacing:-.03em;font-weight:700}
:focus-visible{outline-color:var(--fokus)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.kicker{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent)}
.stumm{color:var(--grau)}

/* Rennstreifen, das Erkennungszeichen: breit Graphit + schmal Kupfer (auf Graphit beide Kupfer) */
.streifen{display:inline-flex;gap:4px;flex:none;vertical-align:middle}
.streifen::before,.streifen::after{content:"";display:block;height:6px;border-radius:2px}
.streifen::before{width:28px;background:var(--streifen-breit)}
.streifen::after{width:9px;background:var(--streifen-schmal)}
.streifen.lang{gap:5px}.streifen.lang::before{width:72px}.streifen.lang::after{width:22px}
.streifen.gross{gap:6px}.streifen.gross::before{width:120px;height:8px}.streifen.gross::after{width:36px;height:8px}
.auf-gruen{--streifen-breit:var(--limette);--logo-grund:#fff;--logo-rad:var(--akzent)}
.kicker-streifen{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:800;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--tinte)}
.titel-streifen{display:grid;justify-items:start;gap:8px}
/* Senkrechte Streifen über eine ganze Fläche (Premium-Karte, Bühne): letztes Kind eines position:relative-Containers mit overflow:hidden */
.rennstreifen{position:absolute;top:0;bottom:0;right:26px;z-index:3;width:32px;pointer-events:none}
.rennstreifen::before,.rennstreifen::after{content:"";position:absolute;top:0;bottom:0;background:var(--limette)}
.rennstreifen::before{right:14px;width:18px}
.rennstreifen::after{right:0;width:6px}
/* Badges und Preisschilder */
.badge-premium,.badge-xxl{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font:900 13px/1.2 var(--f);letter-spacing:0;white-space:nowrap}
.badge-premium{background:var(--limette);color:var(--auf-limette)}
.badge-xxl{background:var(--akzent);color:#fff;font-weight:800}
/* Preis als grosser fetter Text ohne Kasten, wie bei AutoScout24 (Entscheid Mehmet 06.10.2026: Wiedererkennung) */
.preis-plakette{display:inline-flex;align-items:center;align-self:flex-start;color:var(--tinte);font:850 24px/1.2 var(--f);letter-spacing:-.015em;white-space:nowrap;font-variant-numeric:tabular-nums}
.preisschild{display:inline-flex;align-items:center;padding:8px 16px;border-radius:12px;font:900 22px/1.2 var(--f);letter-spacing:-.01em;white-space:nowrap;background:var(--akzent);color:#fff}
.preisschild.limette{background:var(--limette);color:var(--auf-limette)}

/* Kopf hell, Logo B mit Rennstreifen */
.kopf{background:color-mix(in srgb,var(--weiss) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;box-shadow:none;color:var(--tinte)}
.kopf.gescrollt{box-shadow:0 1px 0 rgba(27,30,26,.06),0 12px 32px rgba(27,30,26,.10)}
.marke{display:inline-flex;align-items:center;gap:10px;font:900 24px/1 var(--f);letter-spacing:-.03em;color:var(--tinte)}
.marke-zeichen{display:block;flex:none;width:34px;height:34px}
.marke-zeichen .mz-grund{fill:var(--logo-grund,#23272B)}
.marke-zeichen .mz-streifen{fill:var(--logo-streifen,#E8873F)}
.marke-zeichen .mz-rad{stroke:var(--logo-rad,#fff)}
.marke-zeichen .mz-punkt{fill:var(--logo-punkt,#E8873F)}
.marke .gruen{transform-origin:center;transform-box:fill-box}
html.occ-bewegt .kopf .marke .gruen{animation:pb-pop .4s cubic-bezier(.34,1.3,.64,1) .5s backwards}
@keyframes pb-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.nav a{color:var(--sub);font-size:15px;font-weight:600}
.nav a:hover{color:var(--tinte)}
.nav a[aria-current]{color:var(--tinte);box-shadow:inset 0 -3px 0 var(--limette)}
.nav .nav-panel a{color:var(--tinte)}
.nav .nav-panel a:hover{background:var(--flaeche);color:var(--akzent)}
.nav .nav-panel a .ic{color:var(--akzent)}
.nav .nav-panel{border:1px solid var(--linie);border-radius:14px;box-shadow:0 10px 26px rgba(27,30,26,.14)}
.kopf-symbol{color:var(--text)}
.kopf-symbol:hover{background:var(--flaeche);color:var(--akzent)}
.kopf-symbol .zahl{background:var(--akzent);color:#fff}
.kopf-konto{color:var(--text)}
.kopf-konto:hover{background:var(--flaeche);color:var(--tinte)}
.avatar{background:var(--akzent);color:#fff}
.kopf-rechts .knopf,.kopf-rechts .knopf.hell{background:var(--limette);color:var(--auf-limette);font-weight:800;box-shadow:none}
.kopf-rechts .knopf:hover{background:var(--limette-dunkel);color:var(--auf-limette)}
.kopf-cta{gap:0}
.kopf-cta-zusatz{margin-left:.3em}
.menue-knopf{color:var(--tinte)}

/* Knöpfe: Kapseln. Standard Graphit mit Weiss, Haupt-Aufruf «Gratis inserieren» Kupfer mit dunklem Text, Zweitknopf graue Fläche, Rand-Knopf weiss mit Graphit-Rand */
.knopf{background:var(--akzent);color:#fff;font-weight:700;box-shadow:var(--knopf-schatten)}
.knopf:hover{background:var(--akzent-dunkel);color:#fff}
.knopf.limette{background:var(--limette);color:var(--auf-limette);font-weight:800;box-shadow:0 10px 24px color-mix(in srgb,var(--limette-dunkel) 30%,transparent)}
.knopf.limette:hover{background:var(--limette-dunkel);color:var(--auf-limette)}
.knopf.hell{background:var(--flaeche);color:var(--tinte);box-shadow:none}
.knopf.hell:hover{background:var(--flaeche-2);color:var(--tinte)}
.knopf.rand{background:#fff;color:var(--akzent);box-shadow:inset 0 0 0 2px var(--akzent)}
.knopf.rand:hover{background:var(--akzent-flaeche);color:var(--akzent-dunkel);box-shadow:inset 0 0 0 2px var(--akzent-dunkel)}
.knopf.akzent,.knopf.verlauf{background:var(--akzent);color:#fff;box-shadow:var(--knopf-schatten);background-size:auto}
.knopf.verlauf:hover{background:var(--akzent-dunkel);filter:none;box-shadow:0 12px 28px color-mix(in srgb,var(--akzent-dunkel) 28%,transparent)}
.knopf.verlauf::after{background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 60%)}
.tlink{color:var(--akzent)}
.tlink:hover{color:var(--akzent-dunkel)}

/* Bühne hell: graue Fläche statt Nachtblau, ohne Verlauf */
.buehne{background:var(--sand);color:var(--sub)}
.buehne::after,.buehne.glanz::before{display:none}
.buehne h1,.buehne.kompakt h1{color:var(--tinte);letter-spacing:-.035em;font-weight:900}
.buehne h1 span,.verlauf-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--akzent);-webkit-text-fill-color:currentColor}
.buehne .leitsatz{color:var(--tinte)}
.buehne .lead{color:var(--sub)}
.pfad{color:var(--sub)}
.pfad a:hover{color:var(--akzent)}
.buehne .tlink,.dunkel .tlink{color:var(--akzent)}
.dunkel .knopf.rand,.buehne .knopf.rand{color:var(--akzent);background:#fff;box-shadow:inset 0 0 0 2px var(--akzent)}
.dunkel .knopf.rand:hover,.buehne .knopf.rand:hover{background:var(--akzent-flaeche);box-shadow:inset 0 0 0 2px var(--akzent-dunkel)}
/* Frühere dunkle Abschnitte werden graue Flächen */
.block.dunkel,.dunkel{background:var(--flaeche);color:var(--text)}
.dunkel h2,.dunkel h3{color:var(--tinte)}
.dunkel .block-kopf p{color:var(--sub)}
.block.flaeche{background:var(--sand)}
.block-kopf p{color:var(--sub)}

/* Karten und Flächen */
.karte-hell,.tafel,.glas-flaeche,.glas-flaeche.hell{background:#fff;color:var(--text);border:1px solid rgba(27,30,26,.05);border-radius:var(--radius-gross);box-shadow:var(--schatten)}
.glas-flaeche::before{display:none}
.glas-flaeche::after,.glas-flaeche.hell::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--akzent) 5%,transparent),transparent 45%)}
.glas-flaeche h1,.glas-flaeche h2,.glas-flaeche h3{color:var(--tinte)}
.glas-knopf,.glas-knopf.hell{color:var(--tinte);background:#fff;border:1px solid var(--linie);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.glas-knopf:hover,.glas-knopf.hell:hover{background:var(--flaeche);color:var(--akzent)}
.glas-knopf[aria-pressed=true]{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.glas-reiter,.glas-reiter.hell{background:var(--flaeche);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.glas-reiter button,.glas-reiter a,.glas-reiter.hell button,.glas-reiter.hell a{color:var(--sub)}
.glas-reiter [aria-selected=true],.glas-reiter [aria-current],.glas-reiter.hell [aria-selected=true],.glas-reiter.hell [aria-current]{background:#fff;color:var(--akzent);box-shadow:0 2px 8px rgba(27,30,26,.10)}
/* Symbolkacheln flach und ruhig */
.glas{background:#fff;box-shadow:0 10px 26px rgba(27,30,26,.10),0 0 0 1px rgba(27,30,26,.04);border-radius:calc(var(--s)*.28)}
.glas::before{display:none}
.glas svg{filter:none;stroke:var(--akzent)}
.glas .glas-text{background:none;color:var(--akzent);-webkit-text-fill-color:currentColor}

/* Felder */
.eingabe,.feld input:not([type=checkbox]):not([type=radio]):not([type=range]),.feld select,.feld textarea{border:1.5px solid var(--linie);border-radius:var(--radius-feld);background-color:#fff}
.eingabe:focus,.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.haken input:checked{background:var(--akzent);border-color:var(--akzent)}
.chip[aria-pressed=true],.chip.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
.chip:hover{border-color:var(--akzent-hell)}
.segment{background:var(--flaeche)}
.segment button[aria-pressed=true]{color:var(--akzent)}
.hinweis{background:var(--akzent-flaeche);color:var(--akzent-dunkel)}

/* ---------- Inseratkarten (Entscheid Mehmet 06.10.2026, Vorlage Inserate.dc.html) ----------
   Karte: weiss, 1px Linie, Radius 20; Marke Modell fett, Version, Preis-Plakette, Eckdaten mit Strich-Symbolen in zwei Spalten,
   Verkäufer unten. Premium und XXL: Zeile quer oben im Foto (.fz-band), XXL dazu ein Rahmen in Kupfer; keine Rennstreifen auf Karten
   (Entscheid Mehmet 06.10.2026 abends: sie verdeckten Text und Bildpfeile). */
.raster-fz{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.fz{container:fz/inline-size;border:1px solid var(--linie);border-radius:20px;background:var(--karte);overflow:hidden;box-shadow:none}
.fz:hover{box-shadow:var(--schatten);transform:translateY(-2px)}
.fz-bild{aspect-ratio:16/10;background:var(--flaeche)}
.fz-text{gap:10px;padding:16px 20px 18px}
.fz-kopf{display:grid;gap:2px;min-width:0}
.fz-titel{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-version{font-size:14px;color:var(--sub)}
.fz-preiszeile{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:2px}
.fz-vorher{font-size:13.5px;font-weight:600;color:var(--grau);text-decoration:line-through}
.fz-leasing{font-size:13.5px;color:var(--sub)}
.fz-fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin-top:2px;font-size:14px;color:var(--tinte)}
.fz-fakten span{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-fakten .ic{display:inline-block;width:16px;height:16px;margin-right:7px;vertical-align:-3px;color:var(--sub);stroke-width:2}
.fz-fuss{display:block;margin-top:auto;padding-top:10px;border-top:1px solid var(--linie);font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-fuss b{font-weight:600;color:var(--sub)}
.fz-marke{left:14px;right:56px;top:14px;z-index:4;gap:6px;flex-wrap:wrap}
.fz-merken{z-index:4}
.fz-bild .fz-zahl,.fz-bild .bl .bl-zahl,.fzz-bilder .fz-zahl,.fzz-bilder .bl .bl-zahl{left:auto;right:12px;bottom:12px;gap:6px;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--akzent-dunkel) 85%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;font-size:12px;font-weight:700}
.fz .demo-marke,.fzz .demo-marke{right:auto;left:12px;bottom:12px}
.fz[data-paket=xxl]{border:3px solid var(--limette)}
.fz-band{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;height:30px;padding:0 14px;background:var(--akzent);box-shadow:inset 0 -2px 0 var(--limette);color:#fff;font:800 13px/1 var(--f);letter-spacing:.01em;white-space:nowrap;pointer-events:none}
.fz-band.xxl{background:var(--limette);box-shadow:none;color:var(--auf-limette)}
.fz-bild:has(.fz-band) .fz-marke,.fzz-bilder .gross:has(.fz-band) .fz-marke{top:42px}
.fz-bild:has(.fz-band) .fz-merken{top:40px}
.fz.liste .fz-bild{aspect-ratio:auto}
@container fz (max-width:310px){
  .fz-text{padding:14px 16px 16px}
  .fz-fakten{gap:5px 10px;font-size:13px}
  .fz-fakten .ic{width:14px;height:14px;margin-right:5px}
  .fz-titel{font-size:17.5px}
  .preis-plakette{font-size:21px}
}
/* Kachel für Reihen (Occ.karte variante «kompakt») und Top-Angebote (variante «top»), Vorbild AutoScout24 */
.fzk{position:relative;display:grid;align-content:start;gap:4px;min-width:0}
.fzk-bild{position:relative;aspect-ratio:4/3;margin-bottom:8px;border-radius:14px;overflow:hidden;background:var(--flaeche)}
.fzk-bild img{width:100%;height:100%;object-fit:cover;display:block}
.fzk-bild .fz-merken{top:10px;right:10px}
.fzk-bild:has(.fz-band) .fz-merken{top:38px}
.fzk-bild .demo-marke{left:10px;right:auto;bottom:10px}
.fzk-titel{margin:0;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzk-titel a{color:inherit;text-decoration:none}
.fzk-titel a::after{content:"";position:absolute;inset:0;z-index:1}
.fzk-preis{font:850 20px/1.25 var(--f);letter-spacing:-.015em;color:var(--tinte);font-variant-numeric:tabular-nums}
.fzk-fakten{display:grid;gap:3px;font-size:14px;color:var(--sub)}
.fzk-fakten .ic{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;stroke-width:2}
.fzk .fz-merken{z-index:2}
.fzk[data-paket=xxl]{padding:8px 8px 12px;border:3px solid var(--limette);border-radius:20px;background:#fff}
.fzk[data-paket=xxl] .fzk-bild{border-radius:12px}
.fzt{position:relative;min-width:0}
.fzt-link{display:grid;gap:8px;color:inherit;text-decoration:none}
.fzt-wer{font-size:14px;font-weight:700;color:var(--tinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzt-bild{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--flaeche)}
.fzt-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.fzt-link:hover .fzt-bild img{transform:scale(1.03)}
.fzt-preis{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;background:color-mix(in srgb,var(--akzent-dunkel) 88%,transparent);color:#fff;font:800 14px/1.2 var(--f);font-variant-numeric:tabular-nums}
.fzt-titel{font-size:14px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzt .demo-marke{left:8px;right:auto;top:34px;bottom:auto}
@media (prefers-reduced-motion:reduce){.fzt-bild img{transition:none}.fzt-link:hover .fzt-bild img{transform:none}}
/* Trefferzeile */
.fzz{overflow:hidden}
.fzz-preis{margin-top:12px;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:inherit}
.fzz-fakten .ic{color:var(--sub);stroke-width:2}
.fzz[data-paket=xxl]{position:relative;margin:14px 0;padding:20px;border:3px solid var(--limette);border-radius:20px;background:#fff;box-shadow:var(--schatten)}
.fzz-logo{background:var(--akzent)}
.fzz-logo.privat{background:var(--flaeche);color:var(--akzent)}
.fzz-etiketten span{background:var(--flaeche);color:var(--tinte)}
.fzz-links a{color:var(--akzent)}
/* Preisbewertung (wird nur noch im Händler-Cockpit gezeigt) */
.bew.fair{background:var(--flaeche);color:var(--akzent-dunkel)}
.bew.sehr-gut{color:var(--gruen);background:var(--gruen-flaeche)}
.bew.sehr-gut::before,.bew.gut::before{background:var(--gruen)}

/* Fuss hell */
.fuss{background:var(--weiss);color:var(--grau);border-top:1px solid var(--linie)}
.fuss h2{color:var(--tinte)}
.fuss a:hover{color:var(--akzent)}
.fuss .marke{font-size:22px;color:var(--tinte)}
.fuss-satz{color:var(--sub)}
.store-knopf{border:1px solid var(--linie);background:#fff;color:var(--tinte)}
.store-knopf:hover{border-color:var(--akzent);color:var(--akzent)}
.fuss-recht,.fuss-unten{color:var(--grau)}
.fuss-unten{border-top-color:var(--linie)}
/* Social Media (nur mit Adressen in assets/config.js «sozial») */
.fuss .fuss-sozial{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.fuss-sozial a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--linie);background:#fff;color:var(--tinte)}
.fuss-sozial a:hover{border-color:var(--akzent);color:var(--akzent)}
.fuss-sozial .ic{width:20px;height:20px}

/* Tableiste (Telefon) */
.tabbar a[aria-current]{color:var(--akzent)}
.tabbar .plus{background:var(--limette)!important;color:var(--auf-limette)!important;box-shadow:0 10px 20px -8px color-mix(in srgb,var(--akzent-dunkel) 50%,transparent)!important}
.mobil-panel a .ic{color:var(--akzent)}
.mobil-panel .knopf.limette{color:var(--auf-limette)}
.meldung{background:var(--tinte)}
.meldung .ic{color:var(--limette)}
.bl-punkte{background:rgba(27,30,26,.32)}

/* Vorschau-Hinweis bis zum Start */
.vorschau-band{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px var(--rand);background:#FFF6DD;color:#6B4E00;font-size:12.5px;line-height:1.35;text-align:center;border-bottom:1px solid #F0E2B6}
.vorschau-band .ic{width:13px;height:13px;flex:none}
/* Demo-Marke an Beispiel-Inseraten */
.demo-marke{position:absolute;right:10px;bottom:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(255,246,221,.95);color:#6B4E00;border:1px solid #F0E2B6;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.fzz-bilder .gross,.fzk-bild,.fz-bild{position:relative}
@media print{.vorschau-band{display:none}}

/* Telefon und Tablet (am Ende, damit die Regeln oben überschrieben werden) */
@media (max-width:1280px){
  .kopf-cta-zusatz{display:none}
}
@media (max-width:1100px){
  .reihe-fz{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reihe-fz>*:nth-child(n+4){display:none}
  .nav{display:none}
  .menue-knopf{display:inline-grid}
  .kopf-innen{gap:12px}
  .kopf-rechts{margin-left:auto}
  .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-raster>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--kopf-h:62px;--tabbar-h:calc(84px + env(safe-area-inset-bottom))}
  .marke{font-size:21px}
  .kopf-rechts .knopf,.kopf-konto span,.kopf-symbol.nur-gross{display:none}
  .tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;display:grid;grid-template-columns:repeat(5,1fr);height:64px;border-radius:32px;
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58));-webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9);
    border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 18px 40px -18px rgba(27,30,26,.55),0 2px 8px -4px rgba(27,30,26,.2)}
  .tabbar a{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--grau)}
  .tabbar a .ic{width:23px;height:23px}
  .tabbar a[aria-current]{color:var(--akzent)}
  .tabbar .plus{align-self:center;justify-self:center;width:50px;height:50px;border-radius:50%;background:var(--limette);color:var(--auf-limette);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 20px -10px color-mix(in srgb,var(--akzent) 90%,transparent)}
  .tabbar .plus .ic{width:24px;height:24px}
  .tabbar .zahl{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--blau);color:#fff;font-size:10px;line-height:16px;text-align:center}
  .tabbar .zahl:empty{display:none}
  .raster-fz{grid-template-columns:minmax(0,1fr)}
  .fzz{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 0}
  .fzz-fakten{gap:4px 14px}
  .reihe-fz{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .fzz[data-premium]{padding:14px 70px 14px 14px;margin:10px 0}
  .marke-zeichen{width:30px;height:30px}
  .reihe-fz>*{scroll-snap-align:start}
  .reihe-fz>*:nth-child(n+4){display:flex}
  .fz.liste{flex-direction:column}
  .fz.liste .fz-bild{width:100%;aspect-ratio:4/3;min-height:0}
  .daten{grid-template-columns:minmax(0,1fr)}
  .fuss-raster{grid-template-columns:minmax(0,1fr)}
  .feld-paar{grid-template-columns:1fr 1fr}
  .knoepfe .knopf{flex:1 1 auto}
}

/* ==================== Auswahlfelder: Occ.auswahl (Entscheid Mehmet 05.10.2026: Verhalten C, Aussehen A) ====================
   Feld ersetzt das native Auswahlfeld optisch (das Original bleibt im Formular); Liste deckend weiss unter dem Feld,
   auf dem Telefon als Blatt von unten. Liste und Blatt hängen am <body> (fixiert), damit nichts sie abschneidet. Präfix aw-. */
select.aw-nativ{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.aw-feld{position:relative;min-width:0;width:100%}
.aw-feld.aw-schmal{width:auto;max-width:100%}
.aw-feld .aw-eingabe:not(#aw){display:flex;align-items:center;width:100%;min-width:0;height:var(--aw-h,48px);margin:0;padding:0 42px 0 var(--aw-pl,16px);border:1.5px solid var(--linie);border-radius:var(--aw-r,var(--radius-feld));background:#fff;color:var(--tinte);font:inherit;font-size:var(--aw-fs,15.5px);font-weight:var(--aw-fw,400);line-height:1.2;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.aw-feld input.aw-eingabe:not(#aw){cursor:text}
.aw-feld input.aw-eingabe:not(#aw)[readonly]{cursor:pointer}
.aw-feld .aw-eingabe::placeholder{color:var(--grau);opacity:1}
.aw-feld .aw-eingabe:not(#aw):hover{border-color:var(--linie-stark)}
.aw-feld .aw-eingabe:not(#aw):focus,.aw-feld.aw-offen .aw-eingabe:not(#aw){outline:0;border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.aw-feld .aw-eingabe:not(#aw):focus-visible{outline:0}
.aw-feld .aw-eingabe:not(#aw):disabled{background-color:var(--weiss);color:var(--grau-hell);cursor:not-allowed}
.aw-feld .aw-eingabe:not(#aw)[aria-invalid=true]{border-color:var(--rot)}
.aw-wert{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-wert.aw-leerwert{color:var(--grau)}
.aw-aus .aw-wert{color:var(--grau-hell)}
.aw-pfeil{position:absolute;right:14px;top:50%;display:grid;width:18px;height:18px;margin-top:-9px;color:var(--grau);pointer-events:none;transition:transform .2s var(--weich),color .2s}
.aw-pfeil .ic{width:18px;height:18px}
.aw-feld.aw-offen .aw-pfeil{transform:rotate(180deg);color:var(--akzent)}
.aw-feld.aw-hat-wert .aw-pfeil{display:none}
.aw-aus .aw-pfeil{color:var(--grau-hell)}
.aw-leeren{position:absolute;right:8px;top:50%;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--grau);cursor:pointer;transition:background .15s,color .15s}
.aw-leeren:hover{background:var(--flaeche);color:var(--tinte)}
.aw-leeren .ic{width:16px;height:16px;stroke-width:2}
/* Eingabefeld mit Vorschlägen (aus <input list>) bleibt das Original, nur mit Pfeil */
.aw-eingabe-liste:not(#aw){padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2363676D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.aw-eingabe-liste.aw-offen:not(#aw){border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.aw-eingabe-liste[readonly]{cursor:pointer}

/* Liste (deckend weiss, unter dem Feld) */
.aw-panel{position:fixed;z-index:91;display:flex;flex-direction:column;width:320px;max-height:420px;background:#fff;color:var(--tinte);font-family:var(--f);text-align:left;
  border:1px solid rgba(40,40,35,.08);border-radius:16px;box-shadow:0 2px 6px rgba(40,40,35,.06),0 26px 60px -18px rgba(40,40,35,.3);overflow:hidden;
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top left;transition:opacity .16s ease,transform .2s var(--weich)}
.aw-panel.aw-oben{transform-origin:bottom left;transform:translateY(6px) scale(.985)}
.aw-panel.aw-offen{opacity:1;transform:none}
.aw-griff,.aw-kopf,.aw-panel:not(.aw-blatt) .aw-suche{display:none}
.aw-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px;scrollbar-width:thin;scrollbar-color:var(--linie-stark) transparent}
.aw-liste:focus{outline:0}
.aw-gruppe{padding:14px 10px 6px;font-size:13px;font-weight:600;line-height:1.3;color:var(--grau)}
.aw-liste>[role=group]:first-child>.aw-gruppe{padding-top:8px}
.aw-buchstabe{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:9px 10px 4px;background:#fff;font-size:12px;font-weight:700;line-height:1.2;color:var(--akzent)}
.aw-buchstabe::after{content:"";flex:1;height:1px;background:var(--linie)}
.aw-hinweis{padding:16px 12px 18px;color:var(--sub);font-size:14.5px;line-height:1.5}
.aw-hinweis b{color:var(--tinte)}
.aw-opt{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;padding:0 12px 0 10px;border-radius:10px;color:var(--tinte);font-size:15px;line-height:1.25;cursor:pointer;-webkit-user-select:none;user-select:none}
.aw-symbol{display:grid;place-items:center;width:18px;height:18px;color:var(--akzent);visibility:hidden}
.aw-symbol .ic{width:17px;height:17px;stroke-width:2.2}
.aw-opt[aria-selected=true] .aw-symbol,.aw-opt.aw-mit-symbol .aw-symbol{visibility:visible}
.aw-opt.aw-mit-symbol .aw-symbol{color:var(--grau-hell)}
.aw-opt.aw-mit-symbol .aw-symbol .ic{stroke-width:1.8}
.aw-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-text b{font-weight:700;color:var(--tinte)}
.aw-text small{margin-left:8px;font-size:13px;font-weight:400;color:var(--grau)}
.aw-text small b{color:var(--sub)}
.aw-anz{min-width:2ch;font-size:13.5px;font-weight:400;color:var(--grau-hell);font-variant-numeric:tabular-nums;text-align:right}
/* Markenzeichen in Markenlisten (Occ.markenLogos, Simple Icons): einfarbig in ruhigem Grau, nie in Markenfarben; der Platz bleibt auch
   ohne Zeichen frei, damit die Namen bündig stehen */
.aw-opt.aw-mit-logo{grid-template-columns:18px 20px minmax(0,1fr) auto}
.aw-logo{display:grid;place-items:center;width:20px;height:20px;color:#4E5257}
.ml-zeichen{display:block;width:100%;height:100%;fill:currentColor}
.aw-opt.aw-aktiv{background:var(--flaeche)}
.aw-opt[aria-selected=true]{background:var(--akzent-flaeche);color:var(--akzent-dunkel);font-weight:600}
.aw-opt[aria-selected=true].aw-aktiv{background:color-mix(in srgb,var(--akzent) 16%,#fff)}
.aw-opt[aria-selected=true] .aw-anz{color:var(--akzent-hell)}
.aw-opt.aw-null{color:var(--grau-hell)}
.aw-opt.aw-alle{color:var(--sub)}
.aw-opt.aw-alle[aria-selected=true]{color:var(--akzent-dunkel)}

/* Blatt von unten (Telefon bis 640 px): Griff, Titel, Schliessen, Suchfeld oben, grosse Tippflächen */
.aw-panel.aw-blatt{z-index:96;left:0!important;right:0;top:auto!important;bottom:0!important;width:auto!important;max-width:none;max-height:min(88vh,calc(100dvh - 40px))!important;border:0;border-radius:22px 22px 0 0;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 40px rgba(29,28,26,.2);opacity:1;transform:translateY(100%);transition:transform .24s var(--weich)}
.aw-panel.aw-blatt.aw-offen{transform:none}
.aw-panel.aw-blatt.aw-mit-suche{min-height:min(62vh,540px)}
.aw-blatt .aw-griff{display:block;flex:none;width:40px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--linie-stark)}
.aw-blatt .aw-kopf{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px 6px 20px}
.aw-kopf strong{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--tinte)}
.aw-zu{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--flaeche);color:var(--tinte);cursor:pointer}
.aw-zu .ic{width:20px;height:20px}
.aw-suche{position:relative;flex:none;padding:4px 16px 12px;border-bottom:1px solid var(--linie)}
.aw-suche>.ic{position:absolute;left:30px;top:19px;width:18px;height:18px;color:var(--grau);pointer-events:none}
.aw-suche input{width:100%;height:48px;margin:0;padding:0 14px 0 44px;border:1.5px solid var(--linie);border-radius:12px;background:var(--weiss);color:var(--tinte);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .15s,background .15s,box-shadow .15s}
.aw-suche input::placeholder{color:var(--grau);opacity:1}
.aw-suche input:focus{outline:0;border-color:var(--akzent);background:#fff;box-shadow:var(--feld-fokus)}
.aw-blatt .aw-liste{padding:6px 10px 14px}
.aw-blatt .aw-gruppe{padding:16px 12px 6px;font-size:13.5px}
.aw-blatt .aw-buchstabe{padding:10px 12px 4px}
.aw-blatt .aw-opt{min-height:50px;padding:0 14px 0 12px;font-size:16px;gap:12px}
.aw-blatt .aw-opt.aw-mit-logo{grid-template-columns:18px 22px minmax(0,1fr) auto}
.aw-blatt .aw-logo{width:22px;height:22px}
.aw-blatt .aw-anz{font-size:14px}
.aw-schleier{position:fixed;inset:0;z-index:95;background:rgba(29,28,26,.42);opacity:0;transition:opacity .22s ease}
.aw-schleier.aw-offen{opacity:1}
html.aw-gesperrt,html.aw-gesperrt body{overflow:hidden}

@media (max-width:640px){
  .aw-feld .aw-eingabe:not(#aw){font-size:max(16px,var(--aw-fs,16px))}
}
@media (prefers-reduced-motion:reduce){
  .aw-panel,.aw-schleier,.aw-pfeil{transition:none}
}
@media print{.aw-panel,.aw-schleier{display:none!important}}

/* ---------- Akzent auf einen Blick (Entscheid Mehmet 06.10.2026, dezent) ----------
   Elektro: das Blitz-Symbol bei den Eckdaten in Blau (Karte, Trefferzeile) bzw. eine kleine Zeile «Elektro» in der Kachel.
   Gesetzt über data-antrieb aus Occ.karte (app.js, akzente). Keine farbigen Rahmen oder Streifen mehr («zu viele Farben»). */
:root{--elektro:#2B6FD6}
[data-antrieb=elektro] .fz-fakten .ic:has(use[href="#i-blitz"]),[data-antrieb=elektro] .fzz-fakten .ic:has(use[href="#i-blitz"]){color:var(--elektro)}
.fzk-elektro{color:var(--elektro);font-weight:600}
.fzk-elektro .ic{color:var(--elektro)}