/* ==========================================================================
   KENBES.de — Fileservice-Landeseite und Fahrzeugseiten
   --------------------------------------------------------------------------
   Eigene Datei, nur von fileservice.php und fahrzeuge/ geladen. Baut auf
   style.css auf (Farben, Raster, Karten, Knoepfe) und ergaenzt, was es dort
   nicht gibt: Live-Zaehler, Preistabelle, Paketkarten, Werkzeugchips,
   Fahrzeugtabellen.
   ========================================================================== */

/* --- Live-Zaehler im Hero -------------------------------------------------- */
.fs-stand{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:2px;
  margin-top:44px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--line-soft);
}
.fs-stand > div{ background:var(--glas); padding:18px 20px; }
.fs-stand dt{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3);
}
.fs-stand dd{
  font-family:var(--display); margin:6px 0 0; font-size:1.9rem; font-weight:700;
  line-height:1.1; color:var(--fg);
}
.fs-stand dd small{ display:block; font-family:var(--font); font-size:.8rem; font-weight:400; color:var(--fg-3); margin-top:4px; letter-spacing:0; }
.fs-stand dd.fs-gold{ color:var(--accent); }

.fs-puls{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 0 rgba(61,220,132,.6);
  vertical-align:middle; margin-right:8px;
  animation:fs-puls 1.8s ease-out infinite;
}
.fs-puls--aus{ background:var(--fg-3); box-shadow:none; animation:none; }
@keyframes fs-puls{
  0%{ box-shadow:0 0 0 0 rgba(61,220,132,.55); }
  100%{ box-shadow:0 0 0 12px rgba(61,220,132,0); }
}
@media (prefers-reduced-motion: reduce){ .fs-puls{ animation:none; } }

.fs-stand__hinweis{ margin-top:10px; font-size:.82rem; color:var(--fg-3); }

/* --- Preistabelle ---------------------------------------------------------- */
.fs-tabelle{ overflow-x:auto; margin-top:32px; border:1px solid var(--line); border-radius:var(--radius); }
.fs-tabelle table{ width:100%; border-collapse:collapse; min-width:560px; }
.fs-tabelle th, .fs-tabelle td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.fs-tabelle th{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); background:var(--bg-2); font-weight:500; }
.fs-tabelle tr:last-child td{ border-bottom:0; }
.fs-tabelle td.zahl, .fs-tabelle th.zahl{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fs-tabelle td.zahl strong{ color:var(--accent-2); font-size:1.05rem; }
.fs-tabelle .fs-gruppe td{ background:var(--bg-2); font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.02em; color:var(--fg); }
.fs-tabelle .fs-text{ display:block; color:var(--fg-3); font-size:.88rem; margin-top:2px; }
.fs-chip{
  display:inline-block; font-size:.72rem; font-family:var(--mono); letter-spacing:.06em;
  padding:2px 8px; border:1px solid var(--line-stark); border-radius:999px; color:var(--fg-2);
  margin-left:8px; vertical-align:middle; white-space:nowrap;
}

/* --- Pakete ---------------------------------------------------------------- */
.fs-pakete{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; margin-top:28px; }
.fs-paket{
  background:var(--glas); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px; position:relative;
}
.fs-paket--best{ border-color:var(--accent); }
.fs-paket__band{
  position:absolute; top:-11px; left:18px; background:var(--accent); color:#0b0c0e;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; font-weight:700;
}
.fs-paket__menge{ font-family:var(--display); font-size:1.5rem; font-weight:700; }
.fs-paket__preis{ font-size:1.25rem; margin-top:6px; color:var(--accent-2); font-weight:600; }
.fs-paket__je{ font-size:.85rem; color:var(--fg-3); margin-top:4px; }
.fs-paket__spar{ display:inline-block; margin-top:10px; font-size:.78rem; color:var(--ok); font-family:var(--mono); letter-spacing:.06em; }

/* --- Werkzeugchips --------------------------------------------------------- */
.fs-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none; }
.fs-chips li{
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-size:.95rem; color:var(--fg);
}
.fs-chips li.fs-chips__slave{ border-color:var(--accent); color:var(--accent-2); }

/* --- Empfehlung ------------------------------------------------------------ */
.fs-empfehlung{
  margin-top:40px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  background:linear-gradient(135deg, var(--accent-dim), var(--bg-2)); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 30px;
}
.fs-empfehlung h3{ margin:0 0 .35em; }
.fs-empfehlung p{ margin:0; color:var(--fg-2); max-width:62ch; }
@media (max-width:700px){ .fs-empfehlung{ grid-template-columns:1fr; } }

/* --- Abschluss ------------------------------------------------------------- */
.fs-abschluss{
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  border:1px solid var(--accent); border-radius:var(--radius); padding:34px 36px;
  background:var(--glas);
}
.fs-abschluss h2{ margin:0 0 .3em; border:0; padding:0; }
.fs-abschluss p{ margin:0; color:var(--fg-2); }
@media (max-width:700px){ .fs-abschluss{ grid-template-columns:1fr; padding:26px 22px; } }

/* --- Fahrzeugseiten -------------------------------------------------------- */
.fz-marken{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; margin:24px 0 0; padding:0; list-style:none; }
.fz-marken li a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--glas); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 16px; color:var(--fg); min-height:48px;
}
.fz-marken li a:hover{ border-color:var(--accent); text-decoration:none; color:var(--accent-2); }
.fz-marken li a small{ color:var(--fg-3); font-family:var(--mono); font-size:.72rem; }
/* Fahrzeug-Datenbank: einheitliche, schoene Markenkachel. Alle gleich hoch
   (min-height), grosser Markenname (Saira Condensed) oben, Zaehlung klein
   und mono unten festgezurrt, Gold-Chevron oben rechts, Hover mit Lift und
   Gold-Rand. Scoped auf .fz-art — andere .fz-marken-Nutzungen bleiben, wie
   sie sind. Das fixe Layout haelt lange Namen (Alfa Romeo, Great Wall / GWM,
   DS Automobiles) sauber im Raster. */
.fz-art .fz-marken{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.fz-art .fz-marken li a{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  gap:8px; min-height:96px; padding:16px 34px 15px 17px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3));
  border:1px solid var(--line); border-radius:var(--radius); position:relative; overflow:hidden;
  font-family:var(--display); font-weight:700; font-size:1.14rem; letter-spacing:.2px;
  line-height:1.08; color:var(--fg);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.fz-art .fz-marken li a::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(232,192,68,.55),transparent);
  opacity:0; transition:opacity .18s ease;
}
.fz-art .fz-marken li a::after{
  content:"→"; position:absolute; top:14px; right:15px;
  font-family:var(--font); font-weight:600; color:var(--line-stark);
  transition:color .18s ease, transform .18s ease;
}
.fz-art .fz-marken li a:hover{
  border-color:var(--accent); transform:translateY(-2px);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); color:var(--fg);
}
.fz-art .fz-marken li a:hover::before{ opacity:1; }
.fz-art .fz-marken li a:hover::after{ color:var(--accent); transform:translateX(2px); }
.fz-art .fz-marken li a small{
  font-family:var(--mono); font-weight:400; font-size:.67rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--fg-3); line-height:1.2;
}
.fz-art{ margin-top:44px; }
.fz-art h2{ margin-bottom:0; }

.fz-modell{ margin-top:44px; }
.fz-modell h2{ margin-bottom:.4em; }
.fz-gen{ margin-top:22px; }
.fz-gen h3{ font-size:1rem; color:var(--fg-2); margin:0 0 10px; font-family:var(--mono); letter-spacing:.04em; font-weight:500; }
.fz-tabelle{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.fz-tabelle table{ width:100%; border-collapse:collapse; min-width:620px; }
.fz-tabelle th, .fz-tabelle td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--line-soft); }
.fz-tabelle th{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); background:var(--bg-2); font-weight:500; }
.fz-tabelle tr:last-child td{ border-bottom:0; }
.fz-tabelle td.zahl, .fz-tabelle th.zahl{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fz-tabelle td.fz-nach{ color:var(--accent-2); font-weight:600; }
.fz-tabelle td.fz-plus{ color:var(--ok); }
.fz-brot{ font-family:var(--mono); font-size:.78rem; color:var(--fg-3); margin:0 0 18px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.fz-brot li + li::before{ content:"/"; margin-right:6px; color:var(--line-stark); }
.fz-brot a{ color:var(--fg-2); }
.fz-ruf{ margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }
.fz-ruf .card h3{ margin-top:0; }

/* --- Fachabschnitte: Lesegeraete, Steuergeraete, Glossar, Zielgruppen -------- */
.fs-liste{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:14px; margin-top:24px; }
.fs-liste > div{ background:var(--glas); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.fs-liste h3, .fs-liste h4{ margin:0 0 .35em; font-size:1.05rem; font-family:var(--display); letter-spacing:.01em; }
.fs-liste p{ margin:0; color:var(--fg-2); font-size:.95rem; line-height:1.55; }
.fs-glossar{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:2px; margin:28px 0 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--line-soft); }
.fs-glossar > div{ background:var(--glas); padding:16px 20px; }
.fs-glossar dt{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--accent-2); margin-bottom:4px; }
.fs-glossar dd{ margin:0; color:var(--fg-2); font-size:.93rem; line-height:1.55; }
#fahrzeuge .fz-marken{ margin-top:10px; }
#fahrzeuge h3{ margin-bottom:0; }

/* --- Klappblock (Markenlisten je Fahrzeugart) ------------------------------ */
.fs-klapp{ margin-top:22px; border-top:1px solid var(--line-soft); padding-top:14px; }
.fs-klapp summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; }
.fs-klapp summary::-webkit-details-marker{ display:none; }
.fs-klapp summary::before{ content:"+"; font-family:var(--mono); color:var(--accent); font-size:1.2rem; width:22px; }
.fs-klapp[open] summary::before{ content:"\2013"; }
.fs-klapp summary h3{ margin:0; font-size:1.1rem; }
.fs-klapp summary h3 small{ color:var(--fg-3); font-family:var(--mono); font-size:.72rem; margin-left:8px; }
.fs-klapp summary:hover h3{ color:var(--accent-2); }

/* --- Ticker: zuletzt fertige Auftraege ------------------------------------- */
.fs-ticker{ margin-top:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--glas); padding:16px 20px; }
.fs-ticker h3{ margin:0 0 10px; font-size:.95rem; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); font-weight:500; }
.fs-ticker h3 small{ text-transform:none; letter-spacing:0; font-family:var(--font); font-size:.8rem; margin-left:8px; }
.fs-ticker ul{ list-style:none; margin:0; padding:0; }
.fs-ticker li{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:14px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:.93rem; align-items:baseline; }
.fs-ticker li:first-child{ border-top:0; }
.fs-ticker__fz{ color:var(--fg); }
.fs-ticker__mod{ color:var(--accent-2); }
.fs-ticker__zeit{ color:var(--fg-3); font-family:var(--mono); font-size:.78rem; white-space:nowrap; }
@media (max-width:640px){ .fs-ticker li{ grid-template-columns:1fr; gap:2px; } }

/* --- Projekt-Feed ---------------------------------------------------------- */
.pj-fakten{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:2px; margin:0 0 36px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--line-soft); }
.pj-fakten > div{ background:var(--glas); padding:14px 18px; }
.pj-fakten dt{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.pj-fakten dd{ margin:4px 0 0; color:var(--fg); font-weight:600; }
.pj-werte{ margin-top:18px; }
.pj-liste{ list-style:none; margin:18px 0 0; padding:0; }
.pj-liste li{ padding:10px 0; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:10px 18px; }
.pj-liste li span{ color:var(--fg-3); font-size:.9rem; }