/* ==========================================================================
   kenbesperformancesha.com — Ergaenzungen zum KENBES-Stil
   --------------------------------------------------------------------------
   style.css, start-praktisch.css und fahrzeug-ordner.css sind unveraenderte
   Kopien von kenbes.de. Alles, was diese Seite anders braucht, steht hier —
   dann laesst sich ein neuer Stand von kenbes.de einfach drueberkopieren.
   ========================================================================== */

/* --- Preis in der Startkarte ---------------------------------------------- */
.start-service p.start-preis{
  font-family:var(--display);
  font-size:1.05rem; color:var(--fg-2);
  margin:4px 0 10px;
}
.start-preis b{ font-size:2.1rem; color:var(--accent); font-weight:700; }

/* --- Fuenf Leistungen: oben zwei breite, darunter drei -------------------- */
.leistung-grid--fuenf{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.leistung-grid--fuenf > .leistung{ grid-column:span 2; }
.leistung-grid--fuenf > .leistung:nth-child(-n+2){ grid-column:span 3; }

.leistung p.leistung-preis{
  margin:auto 0 14px !important;
  font-family:var(--display); color:var(--fg-2); font-size:1rem;
}
.leistung-preis b{ color:var(--accent); font-size:1.7rem; font-weight:700; }
.leistung .leistung-preis + a{ margin-top:0; }
.leistung-hinweis a{ display:inline; margin:0; font-size:inherit; }
.leistung-hinweis{
  font-size:.84rem !important; color:var(--fg-3) !important;
  border-left:2px solid var(--line); padding-left:10px;
  margin:-8px 0 20px !important;
}
.preis-hinweis{ margin:16px 0 0; }
.nowrap{ white-space:nowrap; }

@media(max-width:1100px){
  .leistung-grid--fuenf{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .leistung-grid--fuenf > .leistung,
  .leistung-grid--fuenf > .leistung:nth-child(-n+2){ grid-column:auto; }
  .leistung-grid--fuenf > .leistung:first-child{ grid-column:1 / -1; }
}
@media(max-width:540px){
  .leistung-grid--fuenf{ grid-template-columns:1fr; }
}

/* --- Galerie -------------------------------------------------------------- */
.galerie{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.galerie__gross{ grid-column:span 2; grid-row:span 2; }
.galerie figure{
  margin:0; position:relative; height:100%;
  border:1px solid var(--line); background:var(--bg-2);
  overflow:hidden; aspect-ratio:1 / 1;
}
.galerie img{ width:100%; height:100%; object-fit:cover; display:block; }
.galerie figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 10px;
  font-family:var(--display); font-weight:600; font-size:.9rem;
  letter-spacing:.04em; color:var(--fg);
  background:linear-gradient(transparent, rgba(0,0,0,.78));
}
@media(max-width:800px){
  .galerie{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .galerie__gross{ grid-column:1 / -1; grid-row:auto; }
  .galerie__gross figure{ aspect-ratio:4 / 3; }
}

/* Goldener Knopf im Menue: .nav a (style.css) wiegt mehr als .btn--primary,
   ohne body.praktisch stand dort grau bzw. weiss auf Gold (1,3:1), und beim
   Ueberfahren verschwand die Schrift. */
.nav a.btn--primary,
.nav a.btn--primary:hover{ color:#0b0c0e; }
.nav a.btn--primary:hover{ background:var(--accent-2, var(--accent)); }

/* --- Standorte ------------------------------------------------------------ */
.standorte{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line-soft); }
.standorte h3{ font-size:1.1rem; margin:0 0 12px; color:var(--fg-2); }
.standorte__liste{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.standorte__liste li{
  padding:7px 14px; border:1px solid var(--line); background:var(--bg-2);
  font-family:var(--display); font-weight:600; font-size:.95rem;
}
.standorte__liste li.ist-heimat{ border-color:var(--accent); color:var(--accent); }

/* --- Kontakt: vier Wege statt drei ---------------------------------------- */
/* Vier Wege in zwei Spalten: in vier Spalten wurden Mail-Adresse und
   Instagram-Name mit … abgeschnitten (style.css setzt nowrap). */
.praktisch .direkt--vier{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:800px){ .praktisch .direkt--vier{ grid-template-columns:1fr; } }

.karten-links{ display:flex; flex-direction:column; gap:8px; margin:6px 0 4px; }
.karten-links .btn{ justify-content:space-between; width:100%; white-space:normal; text-align:left; }

/* --- Startkarte auf dem Tablet: Preis gehoert in die rechte Spalte -------- */
@media(max-width:800px) and (min-width:541px){
  .start-service p.start-preis{ margin:0; }
  .start-service h2{ grid-row:2 / 5; }
}

/* --- Haftungsausschluss: Unterschriftszeilen ------------------------------ */
.unterschrift{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:2.4em; }
.unterschrift div{ border-top:1px solid var(--fg-3); padding-top:6px; font-size:.86rem; color:var(--fg-3); }
.doc ul.punkte li{ margin-bottom:.6em; }
@media(max-width:540px){ .unterschrift{ grid-template-columns:1fr; } }
@media print{
  .unterschrift div{ border-top-color:#000; color:#000; }
  .druck-aus{ display:none !important; }
}

/* --- Aufbau nach Alexanders Originalseite (02.10.2026) ------------------- */
.hintergrund__marke{ display:none !important; }
.held-bild{ margin:0; border:1px solid var(--line); background:var(--bg-2); overflow:hidden; }
.held-bild img{ display:block; width:100%; height:100%; max-height:520px; object-fit:cover; }
.start-layout .held-bild img{ aspect-ratio:16 / 10; }
.zwei-spalten{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center; }
.zwei-spalten--oben{ align-items:start; }
.zwei-spalten .btn{ margin-top:8px; }
@media(max-width:800px){ .zwei-spalten{ grid-template-columns:1fr; } }
.bilder-reihe{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bilder-reihe img{ display:block; width:100%; aspect-ratio:2 / 3; object-fit:cover; border:1px solid var(--line); }
.logo-bild{ margin:18px 0 0; max-width:320px; }
.logo-bild img{ display:block; width:100%; height:auto; }
.praktisch .direkt--zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:540px){ .praktisch .direkt--zwei{ grid-template-columns:1fr; } }
.auswahl{ border:0; padding:0; margin:0 0 20px; min-width:0; }
.auswahl legend{ font-size:.92rem; font-weight:600; margin-bottom:10px; padding:0; }
.auswahl__liste{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
@media(max-width:540px){ .auswahl__liste{ grid-template-columns:1fr; } }
.foot-sozial{ display:flex; gap:18px; margin-top:12px; }
.brand-logo img{ width:auto; height:54px; }
.foot-logo{ width:200px; height:auto; }
.leistung[id]{ scroll-margin-top:96px; }
.doc address{ font-style:normal; }

.standort-zeile{ color:var(--accent); }
.standort-zeile span{ color:var(--fg-3); margin:0 .4ch; }

/* Handy: Alexanders Logo ist breiter als das von kenbes.de (147 statt ~100 px
   bei 54 px Hoehe) und nahm dem Slogan den Platz — bei 375 px stand dort
   "Deine Motors…". Kleiner gesetzt passt "KENBES – Deine Motorsoftware." ganz. */
@media(max-width:1000px){ .brand-logo img{ height:36px; } }
.zwei-spalten > *{ min-width:0; }
.zwei-spalten .btn{ white-space:normal; }
@media(max-width:374px){ .brand-logo img{ height:30px; } .kopf-slogan{ font-size:.8rem; } }