/* ==========================================================================
   Anleitungen -- Übersicht und Einzelseite
   Werte aus tokens.css.
   ========================================================================== */

.kfz-anl,
.kfz-anl-detail{
  max-width: var(--kfz-container);
  margin: 0 auto var(--kfz-sp-9);
  padding: 0 15px;
}

/* --- Übersicht ----------------------------------------------------------- */

.kfz-anl__intro{ max-width: var(--kfz-measure); margin-bottom: var(--kfz-sp-7); }
.kfz-anl__intro h1{
  font-size: var(--kfz-fs-h1);
  font-weight: var(--kfz-fw-bold);
  letter-spacing: var(--kfz-track-head);
  color: var(--kfz-text);
  margin: var(--kfz-sp-2) 0 var(--kfz-sp-3);
}
.kfz-anl__intro p{
  font-size: var(--kfz-fs-body);
  line-height: var(--kfz-lh-body);
  color: var(--kfz-body);
  margin: 0;
}

.kfz-anl__liste{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kfz-sp-5);
}

.kfz-anl__karte{
  display: flex;
  flex-direction: column;
  background: var(--kfz-paper);
  border: 1px solid var(--kfz-line);
  border-radius: var(--kfz-r-lg);
  overflow: hidden;
}
.kfz-anl__karte:hover{ border-color: var(--kfz-steel); }

.kfz-anl__bild{
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--kfz-fog);
  overflow: hidden;
}
.kfz-anl__bild img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.kfz-anl__bild--leer{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #b3c0d0;
}

.kfz-anl__text{ padding: var(--kfz-sp-4) var(--kfz-sp-5) var(--kfz-sp-5); }
.kfz-anl__text h2{
  font-size: var(--kfz-fs-h4);
  font-weight: var(--kfz-fw-semi);
  line-height: var(--kfz-lh-head);
  margin: 0 0 var(--kfz-sp-2);
}
.kfz-anl__text h2 a{ color: var(--kfz-text); text-decoration: none; }
.kfz-anl__text h2 a:hover{ color: var(--kfz-link); }
.kfz-anl__text p{
  font-size: var(--kfz-fs-sm);
  line-height: var(--kfz-lh-body);
  color: var(--kfz-body);
  margin: 0;
}

.kfz-anl__meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--kfz-sp-2) var(--kfz-sp-4);
  margin-top: var(--kfz-sp-3);
  font-size: var(--kfz-fs-xs);
  color: var(--kfz-muted);
}

.kfz-anl__leer{
  max-width: var(--kfz-measure);
  padding: var(--kfz-sp-7) 0 var(--kfz-sp-9);
}
.kfz-anl__leer h2{ font-size: var(--kfz-fs-h3); font-weight: var(--kfz-fw-bold); margin: 0 0 var(--kfz-sp-3); }
.kfz-anl__leer p{ font-size: var(--kfz-fs-body); line-height: var(--kfz-lh-body); color: var(--kfz-body); margin: 0 0 var(--kfz-sp-3); }
.kfz-anl__leer a{ color: var(--kfz-link); }

/* --- Einzelseite --------------------------------------------------------- */

.kfz-anl-detail{ max-width: 78ch; }

.kfz-anl-detail__weg{ margin: var(--kfz-sp-2) 0 var(--kfz-sp-3); font-size: var(--kfz-fs-xs); }
.kfz-anl-detail__weg a{ color: var(--kfz-muted); text-decoration: none; }
.kfz-anl-detail__weg a:hover{ color: var(--kfz-link); }

.kfz-anl-detail h1{
  font-size: var(--kfz-fs-h1);
  font-weight: var(--kfz-fw-bold);
  letter-spacing: var(--kfz-track-head);
  line-height: var(--kfz-lh-tight);
  color: var(--kfz-text);
  margin: 0 0 var(--kfz-sp-3);
}
.kfz-anl-detail__lead{
  font-size: var(--kfz-fs-lg);
  line-height: var(--kfz-lh-body);
  color: var(--kfz-body);
  margin: 0 0 var(--kfz-sp-6);
}

.kfz-anl-detail__fakten{
  display: flex;
  flex-wrap: wrap;
  gap: var(--kfz-sp-6);
  padding: var(--kfz-sp-4) var(--kfz-sp-5);
  background: var(--kfz-fog);
  border-radius: var(--kfz-r-md);
  margin-bottom: var(--kfz-sp-6);
}
.kfz-anl-detail__fakten dt{
  font-size: var(--kfz-fs-xs);
  font-weight: var(--kfz-fw-semi);
  color: var(--kfz-muted);
  margin-bottom: 2px;
}
.kfz-anl-detail__fakten dd{ margin: 0; font-size: var(--kfz-fs-sm); color: var(--kfz-text); }
.kfz-anl-detail__fakten ul{ margin: 0; padding-left: 18px; }
.kfz-anl-detail__fakten li{ margin-bottom: 2px; }

.kfz-anl-detail__bild{
  width: 100%;
  height: auto;
  border-radius: var(--kfz-r-lg);
  margin-bottom: var(--kfz-sp-6);
}

.kfz-anl-detail__text{
  font-size: 17px;
  line-height: 1.72;
  color: var(--kfz-body);
}
.kfz-anl-detail__text h2{
  font-size: var(--kfz-fs-h3);
  font-weight: var(--kfz-fw-bold);
  color: var(--kfz-text);
  margin: var(--kfz-sp-7) 0 var(--kfz-sp-3);
}
.kfz-anl-detail__text h3{
  font-size: var(--kfz-fs-h4);
  font-weight: var(--kfz-fw-semi);
  color: var(--kfz-text);
  margin: var(--kfz-sp-6) 0 var(--kfz-sp-2);
}
.kfz-anl-detail__text p{ margin: 0 0 var(--kfz-sp-4); }
.kfz-anl-detail__text ul,
.kfz-anl-detail__text ol{ margin: 0 0 var(--kfz-sp-4); padding-left: 22px; }
.kfz-anl-detail__text li{ margin-bottom: var(--kfz-sp-2); }
.kfz-anl-detail__text img{ max-width: 100%; height: auto; border-radius: var(--kfz-r-md); margin: var(--kfz-sp-4) 0; }
.kfz-anl-detail__text a{ color: var(--kfz-link); }
.kfz-anl-detail__text strong{ font-weight: 650; color: var(--kfz-text); }

.kfz-anl-detail__teile,
.kfz-anl-detail__hilfe,
.kfz-anl-detail__weitere{
  margin-top: var(--kfz-sp-8);
  padding-top: var(--kfz-sp-5);
  border-top: 1px solid var(--kfz-line);
}
.kfz-anl-detail__teile h2,
.kfz-anl-detail__hilfe h2,
.kfz-anl-detail__weitere h2{
  font-size: var(--kfz-fs-h3);
  font-weight: var(--kfz-fw-bold);
  color: var(--kfz-text);
  margin: 0 0 var(--kfz-sp-3);
}
.kfz-anl-detail__hilfe p{ font-size: var(--kfz-fs-body); line-height: var(--kfz-lh-body); color: var(--kfz-body); margin: 0; }
.kfz-anl-detail__hilfe a{ color: var(--kfz-link); }

.kfz-anl-detail__chips{ display: flex; flex-wrap: wrap; gap: var(--kfz-sp-2); }
.kfz-anl-detail__chips a{
  display: inline-flex;
  align-items: center;
  gap: var(--kfz-sp-2);
  padding: 9px 16px;
  font-size: var(--kfz-fs-sm);
  font-weight: var(--kfz-fw-medium);
  color: var(--kfz-text);
  background: var(--kfz-fog);
  border: 1px solid transparent;
  border-radius: var(--kfz-r-pill);
  text-decoration: none;
}
.kfz-anl-detail__chips a:hover{ background: var(--kfz-paper); border-color: var(--kfz-steel); }
.kfz-anl-detail__chips span{ font-size: var(--kfz-fs-xs); color: var(--kfz-muted); }

.kfz-anl-detail__weitere ul{ margin: 0; padding-left: 20px; }
.kfz-anl-detail__weitere li{ margin-bottom: var(--kfz-sp-2); font-size: var(--kfz-fs-body); }
.kfz-anl-detail__weitere a{ color: var(--kfz-link); }

@media (max-width: 991px){
  .kfz-anl__liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px){
  .kfz-anl__liste{ grid-template-columns: 1fr; }
  .kfz-anl__intro h1,
  .kfz-anl-detail h1{ font-size: 25px; }
  .kfz-anl-detail__lead{ font-size: var(--kfz-fs-body); }
  .kfz-anl-detail__text{ font-size: var(--kfz-fs-body); }
  .kfz-anl-detail__fakten{ flex-direction: column; gap: var(--kfz-sp-4); }
}

/* Hinweis auf maschinell erstellten, ungeprueften Anleitungen */
.kfz-anl-detail__ki{
  margin: 0 0 var(--kfz-sp-6);
  padding: var(--kfz-sp-3) var(--kfz-sp-4);
  font-size: var(--kfz-fs-sm);
  line-height: var(--kfz-lh-body);
  color: var(--kfz-body);
  background: var(--kfz-hinweis-bg);
  border: 1px solid var(--kfz-hinweis-line);
  border-radius: var(--kfz-r-md);
}
.kfz-anl-detail__ki a{ color: var(--kfz-link); }

/* Wartezimmer fuer angeforderte Anleitungen */
.kfz-anl-auftrag{
  max-width: var(--kfz-measure);
  margin: var(--kfz-sp-6) auto var(--kfz-sp-9);
  padding: 0 15px;
}
.kfz-anl-auftrag h1{
  font-size: var(--kfz-fs-h1);
  font-weight: var(--kfz-fw-bold);
  letter-spacing: var(--kfz-track-head);
  color: var(--kfz-text);
  margin: 0 0 var(--kfz-sp-3);
}
.kfz-anl-auftrag p{ font-size: var(--kfz-fs-body); line-height: var(--kfz-lh-body); color: var(--kfz-body); margin: 0 0 var(--kfz-sp-4); }
.kfz-anl-auftrag a{ color: var(--kfz-link); }
.kfz-anl-auftrag__teil{ font-weight: var(--kfz-fw-semi); color: var(--kfz-text) !important; }
.kfz-anl-auftrag__laeuft{
  display: flex; gap: var(--kfz-sp-3); align-items: flex-start;
  padding: var(--kfz-sp-4); background: var(--kfz-fog); border-radius: var(--kfz-r-md);
}
.kfz-anl-auftrag__punkt{
  flex: 0 0 auto; width: 12px; height: 12px; margin-top: 6px;
  border-radius: 50%; background: var(--kfz-steel);
  animation: kfz-puls 1.2s ease-in-out infinite;
}
@keyframes kfz-puls{ 0%,100%{ opacity: .25; } 50%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .kfz-anl-auftrag__punkt{ animation: none; } }
@media (max-width: 575px){ .kfz-anl-auftrag h1{ font-size: 25px; } }