/* AVEO Demo-Übersicht — dieselbe Bildsprache wie das Cockpit, aber ohne dessen Daten.
   Bewusst schlank: eine Karte pro Demo, Suche, Filter. Mehr braucht die Seite nicht,
   und alles Weitere wäre Ballast auf dem Handy des Kunden. */
:root{
  --brand:#F9851F; --brand-ink:#b45c09; --brand-wash:#fff6ec; --brand-line:#f6d3ab;
  --navy:#0a1128;
  --n0:#fff; --n1:#fafafa; --n2:#f5f5f6; --n3:#ececee; --n4:#d9dade;
  --ink:#15171c; --ink2:#494d57; --ink3:#7c828e;
  --hair:#e7e8ec; --ok:#12855a; --ok-wash:#e9f6f0;
  --r:12px; --r-sm:8px; --r-pill:999px;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh:0 1px 2px rgba(13,18,24,.05),0 10px 24px -14px rgba(13,18,24,.14);
}
@media (prefers-color-scheme:dark){
  :root{--n0:#16181d; --n1:#1b1e24; --n2:#212530; --n3:#2a2f3a; --n4:#3a4150;
    --ink:#f2f3f5; --ink2:#b9bec9; --ink3:#858c99; --hair:#2b3039;
    --brand-wash:#2a1b0c; --brand-line:#5c3d15; --ok-wash:#122a20;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--n1);color:var(--ink);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

.top{background:var(--n0);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.brand{font-family:Montserrat,sans-serif;font-weight:800;letter-spacing:.16em;font-size:19px;color:var(--ink)}
.brand b{color:var(--brand)}
.brand span{margin-left:14px;padding-left:14px;border-left:1px solid var(--hair);
  font-family:'Geist',sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3)}
.meta{font-family:var(--mono);font-size:12px;color:var(--ink3);white-space:nowrap}

.tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 16px}
.such{position:relative;flex:1;min-width:220px;max-width:340px}
.such svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  fill:none;stroke:var(--ink3);stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.such input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--n0);color:var(--ink);font:inherit;font-size:13.5px;outline:none;
  transition:border-color .16s var(--ease)}
.such input:focus{border-color:var(--brand)}
.filter{display:flex;gap:6px;flex-wrap:wrap}
.fbtn{padding:7px 13px;border:1px solid var(--hair);border-radius:var(--r-pill);background:var(--n0);
  color:var(--ink2);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}
.fbtn:hover{border-color:var(--n4)}
.fbtn.on{background:var(--brand-wash);border-color:var(--brand-line);color:var(--brand-ink);font-weight:600}
.fbtn i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.65;margin-left:5px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;padding-bottom:34px}
.card{display:flex;flex-direction:column;background:var(--n0);border:1px solid var(--hair);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--sh);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.card:hover{transform:translateY(-2px);border-color:var(--n4);
  box-shadow:0 2px 6px rgba(13,18,24,.07),0 18px 34px -18px rgba(13,18,24,.24)}
.card .bild{aspect-ratio:16/10;background:var(--n2) center/cover no-repeat;position:relative}
/* Farbiger Streifen oben: der Akzent der jeweiligen Demo. Macht die Kachelwand auf einen
   Blick unterscheidbar, ohne dass ein Vorschaubild geladen werden muss. */
.card .streifen{position:absolute;inset:0 0 auto 0;height:4px}
.card .txt{padding:13px 15px 15px}
.card h3{margin:0 0 3px;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.card .sub{font-size:12.5px;color:var(--ink3)}
.card .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{padding:3px 8px;border-radius:var(--r-pill);font-size:10.5px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;background:var(--n2);color:var(--ink3)}
.chip.echt{background:var(--ok-wash);color:var(--ok)}
.chip.bsp{background:var(--brand-wash);color:var(--brand-ink)}
.leer{text-align:center;color:var(--ink3);padding:40px 0}
.foot{padding:22px 20px 40px;border-top:1px solid var(--hair);margin-top:10px}
.foot p{margin:0;font-size:12.5px;color:var(--ink3);max-width:640px}

@media (max-width:560px){
  .top .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-direction:column;align-items:flex-start;gap:6px}
  .brand span{margin-left:10px;padding-left:10px}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}