/* ============================================================
   HANS BAUR GMBH — Leistungsseiten
   leistung-kern.css — Abschnitt 01 ohne Foto (eingebaut 29.10.2026)

   Das große Foto steht jetzt im Titel; in Abschnitt 01 stand es noch
   einmal. Dort jetzt nur Schrift: Überschrift über die Breite, darunter
   der Fließtext (breit zweispaltig), darunter die Leistungen als
   Register – Spalten je nach Zahl der Einträge (--lk-sp), über jedem Eintrag seine Nummer groß als
   blaue Kontur. Die Nummern setzt ein CSS-Zähler; im Text stehen sie nicht.

   Auftritt: js/site.js gibt der Liste .is-in, sobald sie ins Bild kommt;
   dann kommen die Einträge nacheinander. Ohne Skript und bei
   „Bewegung reduzieren" stehen sie sofort da.
   ============================================================ */
.lkern { row-gap: clamp(22px, 3vh, 34px); }
.lkern .sec-head { margin-bottom: 0; }

/* Fließtext: breit zweispaltig, damit er nicht 140 Zeichen lang läuft */
@media (min-width: 901px) {
  .lkern-text { column-count: 2; column-gap: clamp(32px, 4vw, 64px); }
  .lkern-text p { break-inside: avoid; max-width: none; }
  .lkern-text p:last-of-type { margin-bottom: 0; }
}

/* ---------- Register ---------- */
.lkern-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lkpos;
  display: grid;
  /* --lk-sp: Spalten, je Seite passend zur Zahl der Einträge */
  grid-template-columns: repeat(var(--lk-sp, 3), minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
}
.lkern-liste > li {
  counter-increment: lkpos;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0 26px;
  border-top: 1px solid var(--grey-line);
  transition: opacity 520ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* Nummer als Kontur. Bei Ziffern zeichnet der Strich der variablen
   Schrift keine inneren Kanten (anders als bei W, M, A). */
.lkern-liste > li::before {
  content: counter(lkpos, decimal-leading-zero);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--blue-lift);
  transition: color 240ms var(--ease), -webkit-text-stroke-color 240ms var(--ease);
}
.lkern-liste > li > span {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  /* nur wirklich lange Wörter (Hochwasserschutzmaßnahmen) dürfen in schmalen
     Spalten trennen, statt über den Rand zu laufen – „öffentlichen" nicht */
  hyphens: auto;
  hyphenate-limit-chars: 18 6 6;
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 6;
  overflow-wrap: break-word;
  max-width: 100%;
  transition: color 240ms var(--ease), transform 300ms var(--ease);
}
.lkern-liste > li:hover > span { color: var(--blue); transform: translateX(6px); }
.lkern-liste > li:hover::before { color: var(--blue); -webkit-text-stroke-color: var(--blue); }

/* Auftritt: Einträge kommen nacheinander, sobald die Liste im Bild ist */
html.js .lkern-liste:not(.is-in) > li { opacity: 0; transform: translateY(14px); }

@media (max-width: 900px) { .lkern-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lkern-liste { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .lkern-liste > li { transition: none; }
}

/* Einleitungssatz, der auf die Liste hinführt (Transportbeton): eine Spalte */
.lkern-ein p { margin-bottom: 0; }
/* Zwischenüberschrift zwischen zwei Registern (Betonblocksteine) */
.lkern h3.display-m { margin: 0; }
/* Das zweite Foto (Betonblocksteine) nie größer als seine Datei */
.lkern .lshot { max-width: 830px; margin-top: 0; }