/* WebStärke · Leistungsseiten (Webdesign, SEO & GEO, Kostenlose Vorschau, Website-Betreuung) – SEO/GEO 08.10.2026.
   Baut auf recht.css auf (gleiche Kopfzeile, Einstieg mit begrenztem Himmelsfeld, redaktionelle Abschnitte, Fuß) und ergänzt Markenelemente:
   Brotkrumen, Aktionsknopf in Tintenblau, Preisfeld, Schrittliste ohne Nummern, Fragen als bedienbare Zeilen (Antworten stehen im HTML) und einen
   Abschluss auf dem Himmel mit tiefblauer Lasur (weiße Schrift ohne Schatten, Kontrast ≥ 4,5:1). Keine Startseiten-Animation, keine Textwände. */

/* Kopfzeile: Leistungen als Textnavigation (aktive Seite unterstrichen), rechts der Weg zum Formular */
.lt-kopf .rk__nav { gap: 24px; }
.lt-kopf .rk__nav a { white-space: nowrap; }
.lt-kurz { display: none; }
.lt-knopf { display: inline-flex; align-items: center; gap: .55em; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--rt-blau); color: #FFFFFF; text-decoration: none;
  font: 620 15px/1 var(--rt-lese); font-stretch: 110%; letter-spacing: .005em; box-shadow: 0 10px 24px -16px rgba(11, 38, 77, .7); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.recht-seite main a.lt-knopf, .lt-kopf .lt-knopf { color: #FFFFFF; text-decoration: none; }
.lt-knopf:hover { background: #163A6E; }
.lt-knopf:hover .rk__pfeil, .lt-knopf:focus-visible .rk__pfeil { transform: translateX(3px); }
.lt-knopf--klein { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
.lt-knopf--hell, .recht-seite main a.lt-knopf--hell { background: #FFFFFF; color: var(--rt-blau); box-shadow: 0 10px 26px -18px rgba(4, 14, 40, .8); }
.lt-knopf--hell:hover { background: #EAF1FA; }
.lt-textlink { font-weight: 560; }

/* Einstieg: Brotkrumen statt Rubrik, mehrzeiliger Titel in passender Größe */
.lt-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: clamp(14px, 2svh, 22px); color: var(--rt-neben); font: 520 14px/1.3 var(--rt-lese); }
.lt-pfad a { color: var(--rt-neben); text-decoration: underline; text-decoration-color: rgba(70, 80, 100, .35); text-underline-offset: .22em; }
.lt-pfad [aria-current] { color: var(--rt-text); font-weight: 600; }
.rh__titel.lt-titel { max-width: 19em; font-size: clamp(40px, 4.7vw, 70px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.lt-inhalt > .rt-abschnitt:first-child { border-top: 0; padding-top: 0; } /* die feine Linie unter dem Einstieg genügt */
.lt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }

/* Abschnitte: Listen, Schritte (ohne Nummern), Preisfeld */
.lt-liste, .lt-schritte { list-style: none; margin: 0; padding: 0; }
.lt-liste li, .lt-schritte li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--rt-linie); }
.lt-liste li:last-child, .lt-schritte li:last-child { border-bottom: 1px solid var(--rt-linie); }
.lt-liste li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 8px; height: 8px; border-radius: 50%; background: var(--rt-blau); }
.lt-schritte li::before { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--rt-blau), rgba(11, 38, 77, .25)); }
.lt-liste strong, .lt-schritte strong { display: block; color: var(--rt-blau); font-weight: 640; }
.lt-liste + p, .lt-schritte + p { margin-top: 1em; }
.lt-preis { margin: 0 0 1.1em; padding: 22px 24px; border-radius: 8px; background: var(--rt-blau); color: #FFFFFF; }
.lt-preis__marke { display: inline-block; padding: 5px 10px; border-radius: 999px; background: #B53F4A; color: #FFFFFF; font: 620 12.5px/1 var(--rt-lese); font-stretch: 112%; letter-spacing: .04em; }
.lt-preis--hell { background: #EEF4FB; color: var(--rt-text); box-shadow: inset 0 0 0 1px var(--rt-linie); }
.lt-preis--hell .lt-preis__marke { background: transparent; color: var(--rt-neben); padding: 0; letter-spacing: .12em; text-transform: uppercase; }
.lt-preis__betrag { margin-top: 10px; font: 680 clamp(36px, 3.6vw, 52px)/1 var(--display); font-stretch: 122%; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.lt-preis--hell .lt-preis__betrag { color: var(--rt-blau); }
.lt-preis__betrag span { font: 560 17px/1 var(--rt-lese); letter-spacing: 0; }
.lt-preis__betrag .lt-preis__ab { font-size: .45em; }
.lt-preis__text { margin-top: 10px; }
.lt-preis__steuer { margin-top: 6px; font-size: .9em; opacity: .9; }
.rt .lt-preis p + p { margin-top: 10px; }

/* Fragen: bedienbare Zeilen mit feinen Linien – die Antworten stehen im HTML */
.lt-fragen { border-top: 1px solid var(--rt-linie); }
.lt-frage { border-bottom: 1px solid var(--rt-linie); }
.lt-frage summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
  color: var(--rt-blau); font: 620 clamp(17px, 1.3vw, 19px)/1.35 var(--rt-lese); font-stretch: 106%; }
.lt-frage summary::-webkit-details-marker { display: none; }
.lt-frage summary:focus-visible { outline: 2px solid var(--rt-blau); outline-offset: 2px; border-radius: 4px; }
.lt-frage__zeichen { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rt-linie-stark); }
.lt-frage__zeichen::before, .lt-frage__zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; background: var(--rt-blau); transition: transform .25s var(--ease); }
.lt-frage__zeichen::after { transform: rotate(90deg); }
.lt-frage[open] .lt-frage__zeichen::after { transform: rotate(0deg); }
.lt-frage__antwort { padding: 0 44px 18px 0; }

/* Abschluss auf dem Himmel: tiefblaue Lasur sichert die Lesbarkeit der weißen Schrift (ohne Textschatten) */
.lt-schluss { max-width: calc(var(--rt-max) + 2 * var(--rt-rand)); margin: 0 auto clamp(56px, 8svh, 96px); padding: 0 var(--rt-rand); }
.lt-schluss__innen { padding: clamp(36px, 6svh, 64px) clamp(24px, 4vw, 64px); border-radius: 10px; color: #FFFFFF;
  background: linear-gradient(rgba(11, 38, 77, .66), rgba(11, 38, 77, .66)), #2F5C9E url('../img/himmel/inhalt-d.webp') 60% 45% / cover no-repeat; }
.lt-schluss h2 { max-width: 18em; font: 680 clamp(30px, 3.4vw, 50px)/1.04 var(--display); font-stretch: 122%; letter-spacing: -.03em; }
.lt-schluss p { max-width: 46em; margin-top: 14px; font-size: 1.04em; }
.lt-direkt { color: rgba(255, 255, 255, .9); }
.lt-textlink--hell, .recht-seite main a.lt-textlink--hell { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .6); }

/* schmalere Bildschirme */
@media (max-width: 1100px) { .lt-kopf .rk__nav { gap: 18px; } .lt-lang { display: none; } .lt-kurz { display: inline; } }
@media (max-width: 600px) {
  .lt-kopf { row-gap: 6px; }
  .lt-kopf .rk__nav { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 0 16px; border-top: 1px solid var(--rt-linie); }
  .lt-kopf .rk__nav a { font-size: 14px; font-stretch: 100%; }
  .lt-kopf .rk__nav { justify-content: space-between; column-gap: 10px; }
  .lt-kopf .lt-knopf--klein { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .rh__titel.lt-titel { font-size: clamp(32px, 9vw, 44px); }
  .lt-frage__antwort { padding-right: 0; }
  .lt-schluss__innen { background-position: 70% 40%; }
}
@media print { .lt-kopf .lt-knopf, .lt-schluss .lt-aktionen, .lt-pfad { display: none !important; } .lt-schluss__innen { background: none; color: #000; padding: 0; } .lt-preis { background: none; color: #000; box-shadow: none; padding: 0; } }