/* ============================================================
   Zurück zur Mitte — /leistungen (Register) + Themen-Detailseiten
   Keine Boxen, keine Kacheln, keine Rahmen, keine Schatten.
   Nur Weißraum, hauchdünne Linien und der hauchdünne CTA-Rahmen.
   Keine Beträge auf diesen Seiten (eherne Regel 2, Preis-Sperre).
   ============================================================ */

.ls {
  background: var(--farbe-beige);
}

/* Sektionen: großzügiges Padding, Inhalt auf der Bühne zentriert */
.ls-sektion {
  padding: clamp(3rem, 8vh, 8rem) var(--rand-buehne);
}

.ls-sektion + .ls-sektion {
  margin-top: var(--abstand-elemente);
}

.ls-fliesstext > * + * {
  margin-top: 1.1em;
}

.ls-fliesstext p {
  max-width: var(--spaltenbreite-text);
}

/* ------------------------------------------------------------
   Sektion 1 — Der Einstieg: ruhige Eröffnung
   ------------------------------------------------------------ */

/* Bewusst keine Mindesthöhe: der Einstieg fließt direkt ins Register,
   damit zwischen Headline und Themen keine leere Fläche entsteht */
.ls-einstieg {
  padding-bottom: clamp(2rem, 5vh, 4rem);
}

/* Einstiegstext läuft über die gesamte Bühnenbreite,
   nicht in der schmalen 38ch-Lesespalte */
.ls-einstieg .ls-fliesstext p {
  max-width: none;
}

.ls-einstieg .metatext {
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

/* Rückweg zur Startseite oben: still, mit deutlicher Luft zum Einstieg
   (Muster wie .ld-rueckweg auf den Themen-Seiten, hier großzügiger) */
.ls-rueckweg {
  margin-bottom: clamp(3.5rem, 9vh, 6rem);
}

.ls-einstieg__headline {
  font-size: clamp(2rem, 4.2vw, 4.25rem);
  line-height: var(--zeilenhoehe-headline);
  max-width: 22ch;
  margin-bottom: clamp(2rem, 5vh, 4rem);
}

/* ------------------------------------------------------------
   Sektion 2 — Das Themenregister: 20 Einträge als ruhige,
   mehrspaltige Namensliste — kein Grid, keine Kacheln.
   Die Spaltenzahl ergibt sich aus dem Platz (CSS Columns).
   ------------------------------------------------------------ */

/* Direkt an den Einstieg anschließen — der Sektionsabstand (15vh)
   gilt erst wieder zwischen Register und Abschluss */
.ls-einstieg + .ls-register {
  margin-top: 0;
  padding-top: 0;
}

.ls-register__liste {
  list-style: none;
  padding: 0;
  column-width: 20ch;
  column-gap: clamp(3rem, 8vw, 8rem);
}

.ls-register__eintrag {
  break-inside: avoid;
}

.ls-register__eintrag + .ls-register__eintrag {
  margin-top: clamp(1.5rem, 3vh, 2rem);
}

/* Der ganze Eintrag ist Link — still, ohne Unterstreichung */
.ls-register__link {
  display: block;
  text-decoration: none;
  color: var(--farbe-anthrazit);
}

/* Nummer im Metatext-Stil, klein über dem Titel */
.ls-register__nummer {
  display: block;
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
}

.ls-register__titel {
  display: block;
  font-family: var(--schrift-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.25;
}

/* Hover/Fokus: hauchdünne Unterstreichung des Titels, sonst nichts */
.ls-register__link:hover .ls-register__titel,
.ls-register__link:focus-visible .ls-register__titel {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--farbe-gold-text);
}

.ls-register__link:focus-visible {
  outline-offset: 0.35em;
}

/* ------------------------------------------------------------
   Sektion 3 — Der Abschluss: Verweis auf den Rahmen, CTA
   ------------------------------------------------------------ */

/* Bewusst keine Mindesthöhe — der Abschluss folgt dem Register direkt,
   getrennt nur durch dessen unteres Sektions-Padding */
.ls-register + .ls-abschluss {
  margin-top: 0;
  padding-top: 0;
}

.ls-abschluss {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(2.5rem, 6vh, 4rem);
}

.ls-abschluss__verweis p {
  margin-inline: auto;
}

/* Verweis auf /zusammenarbeit: Metatext-Stil, feine Unterstreichung
   (Muster wie a.vertiefen auf der Startseite) */
.ls-verweislink {
  display: inline-block;
  font-family: var(--schrift-sans);
  font-size: var(--groesse-metatext);
  font-weight: 500;
  letter-spacing: var(--laufweite-metatext);
  text-transform: uppercase;
  color: var(--farbe-gold-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.6em;
}

.ls-verweislink:hover,
.ls-verweislink:focus-visible {
  text-underline-offset: 0.35em;
}

/* Abstand zwischen Verweis und CTA bewusst größer als der Sektions-gap */
.ls-abschluss .cta-outline {
  margin-top: clamp(2rem, 6vh, 4rem);
}

/* CTA: hauchdünne Outline (dupliziert aus screens.css, damit diese
   Seite ohne screens.css auskommt) */
a.cta-outline {
  display: inline-block;
  padding: 1.1em 2.75em;
  background: transparent;
  border: 1px solid rgba(44, 44, 44, 0.65); /* ≥ 3:1 auf Beige (WCAG 1.4.11) */
  color: var(--farbe-anthrazit);
  font-family: var(--schrift-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

a.cta-outline:hover,
a.cta-outline:focus-visible {
  border-color: var(--farbe-anthrazit);
}

/* ============================================================
   Themen-Detailseite (Template "leistung"): eine ruhige
   Lesespalte — Rückweg, Kopf, Abschnitte, Hinweis, Abschluss
   ============================================================ */

.ld {
  background: var(--farbe-beige);
}

.ld-artikel {
  padding: clamp(3rem, 8vh, 8rem) var(--rand-buehne);
}

/* Rückweg oben: still, mit Luft zum Kopf */
.ld-rueckweg {
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

.ld-kopf .metatext {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.ld-titel {
  font-size: clamp(2.2rem, 4.5vw, 4.5rem);
  line-height: var(--zeilenhoehe-headline);
  max-width: 18ch;
}

/* Abschnitte: Zweispalter — Überschrift links, Text rechts
   (Muster wie die Fundament-Liste auf /zusammenarbeit);
   zwischen den Abschnitten nur hauchdünne Linien */
.ld-abschnitt {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  margin-top: clamp(3rem, 7vh, 5rem);
}

.ld-abschnitt + .ld-abschnitt {
  border-top: var(--linie-dunkel);
  padding-top: clamp(3rem, 7vh, 5rem);
}

.ld-abschnitt__titel {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  max-width: 16ch;
}

/* Die Lesespalte rechts darf breiter laufen als die 38ch-Basisspalte */
.ld-abschnitt .ls-fliesstext p {
  max-width: 60ch;
}

/* Wichtiger Hinweis: etwas leiser — kein Kasten */
.ld-hinweis {
  font-size: 0.9em;
  opacity: 0.85;
}

/* Abschluss: CTA zuerst, darunter der Rückweg zur Übersicht —
   mittig gesetzt wie der Abschluss der Registerseite */
.ld-abschluss {
  margin-top: clamp(4rem, 12vh, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2rem, 5vh, 3rem);
}

/* ------------------------------------------------------------
   Mobil: engere Register-Abstände
   ------------------------------------------------------------ */

@media (max-width: 800px) {
  .ls-register__eintrag + .ls-register__eintrag {
    margin-top: 1.5rem;
  }

  .ld-abschnitt {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }
}

/* ------------------------------------------------------------
   Reduzierte Bewegung: keine Transitions
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .ls-verweislink {
    transition: text-underline-offset 0.3s ease;
  }

  a.cta-outline {
    transition: border-color 0.3s ease;
  }

  .ls-register__titel {
    transition: text-decoration-color 0.3s ease;
  }
}