/* Verbesserungen 11.10.2026 – nur in index v2.html eingebunden */

/* 1 Hero: Bereichstext kräftiger */
.st-voll__lead { color: var(--text-on-terra); font-weight: var(--weight-semibold, 600); }
.st-panel[data-aktiv] .st-voll { opacity: 1; }

/* 2 Willkommen: Fotos gross mit Name und Rolle */
.st-willkommen__team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 760px; margin: 40px auto 0; padding: 0; list-style: none; }
.st-willkommen__person { display: grid; gap: 4px; justify-items: center; text-align: center; margin: 0; }
.st-willkommen__person img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 48px rgba(64, 31, 8, 0.16); margin-bottom: 14px; }
.st-willkommen__name { font-size: 20px; font-weight: var(--weight-bold); color: var(--text-strong); }
.st-willkommen__rolle { font-size: 15px; color: var(--text-body); }

/* 3 Ablauf: drei Spalten */
@media (min-width: 820px) {
  .sv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 0; }
  .sv-steps li { align-items: flex-start; text-align: left; padding: 28px 0 0; border-bottom: 0; border-top: 2px solid var(--terra-500); gap: 14px; }
  .sv-steps div { justify-items: start; }
  .sv-steps p { text-wrap: pretty; }
}

/* 4 Kundenstimme: Anführungszeichen hinter den Text, oben rechts frei */
.ks-karte::before { font-size: 110px !important; line-height: 1 !important; top: 2px !important; right: 32px !important; z-index: 0; }
.ks-karte__zitat { padding-top: 12px; }

/* 5 Schlussteil und Fusszeile trennen */
/* Schlussteil ruhiger: weniger Leuchten, tieferes Terracotta */
.sv-final { background: linear-gradient(180deg, #A83A08 0%, #862A03 100%); }
.sv-final::before { opacity: .35; }
/* Fusszeile: drei Varianten */
.sv-footer { border-top: 0; background: #862A03; }
html[data-fuss="tief"] .sv-footer { background: #5E1D02; }
html[data-fuss="rotbraun"] .sv-footer { background: #862A03; border-top: 1px solid rgba(255, 240, 230, 0.18); }
html[data-fuss="sand"] .sv-footer { background: var(--sand-200); color: var(--text-strong); }
html[data-fuss="sand"] .sv-footer a, html[data-fuss="sand"] .sv-footer__links a, html[data-fuss="sand"] .sv-footer__top { color: var(--text-strong); }
html[data-fuss="sand"] .sv-footer p { color: var(--text-body); }
html[data-fuss="sand"] .sv-footer__social a { background: rgba(28, 22, 19, 0.08); }
html[data-fuss="sand"] .sv-footer__logo img, html[data-fuss="creme"] .sv-footer__logo img { content: url("../../assets/logo-lockup-terra.svg"); }
/* Ein Block: Fusszeile setzt den Schlussteil nahtlos fort */
html[data-fuss="block"] .sv-footer { background: #862A03; }
html[data-fuss="block"] .sv-footer__inner { border-top: 1px solid rgba(255, 240, 230, 0.22); }
/* Creme: helle Fusszeile wie der Seitengrund */
html[data-fuss="creme"] .sv-footer { background: var(--cream-100); color: var(--text-strong); }
html[data-fuss="creme"] .sv-footer a, html[data-fuss="creme"] .sv-footer__links a, html[data-fuss="creme"] .sv-footer__top { color: var(--text-strong); }
html[data-fuss="creme"] .sv-footer p { color: var(--text-body); }
html[data-fuss="creme"] .sv-footer__social a { background: rgba(178, 82, 34, 0.1); color: var(--terra-500); }
html[data-fuss="sand"] .sv-footer__social a { color: var(--terra-500); }

/* 6 Fusszeile: Adresse als saubere Zeile, «Nach oben» eigene Zeile */
.sv-footer__adresse { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; text-align: center; }
.sv-footer__adresse > span { white-space: nowrap; }
.sv-footer__adresse > span + span::before { content: "·"; margin: 0 .45em; }
@media (max-width: 700px) { .sv-footer__adresse > span + span::before { content: none; } }
.sv-footer__top { width: 100%; text-align: center; }
@media (max-width: 700px) { .sv-footer__adresse { flex-direction: column; align-items: center; } }

/* ---- Neuer Seitenabschluss (Varianten A/B/C) ---- */
.vb-fuss__inner, .vb-fuss__basis, .vb-karte { box-sizing: border-box; }
.vb-fuss { background: #862A03; color: var(--text-on-terra); }
.vb-fuss__inner { width: min(100%, var(--content-max)); margin: 0 auto; padding: 64px 32px 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.vb-fuss__marke { display: grid; gap: 20px; align-content: start; }
.vb-fuss__marke .sv-footer__social { justify-content: flex-start; width: auto; }
.vb-fuss__adresse { margin: 0; line-height: 1.6; color: var(--text-on-terra-soft); }
.vb-fuss__spalte { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.vb-fuss__titel { margin: 0 0 6px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-terra-soft); }
.vb-fuss a { color: var(--text-on-terra); text-decoration: none; }
.vb-fuss a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vb-fuss__basis { width: min(100%, var(--content-max)); margin: 0 auto; padding: 20px 32px 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; border-top: 1px solid rgba(255, 240, 230, 0.2); font-size: 14px; color: var(--text-on-terra-soft); }
.vb-fuss__basis nav { display: flex; gap: 20px; }
.vb-fuss__wer { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 14px; }
.vb-koepfe { display: inline-flex; }
.vb-koepfe img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream-card); }
.vb-koepfe img + img { margin-left: -12px; }
@media (max-width: 820px) { .vb-fuss__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 48px 20px 32px; } .vb-fuss__marke { grid-column: 1 / -1; } .vb-fuss__basis { padding: 20px; } }
/* A: Schlussteil als helle Karte */
.vb-karte-sektion { padding-bottom: 96px; }
.vb-karte { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px; background: var(--cream-card); border-radius: 32px; box-shadow: 0 30px 60px rgba(64, 31, 8, 0.12); }
.vb-karte__text { display: grid; gap: 12px; text-align: left; }
.vb-karte__text .sv-title, .vb-karte__text .sv-lead { margin: 0; text-align: left; }
.vb-karte__aktion { display: grid; gap: 14px; justify-items: start; padding-left: 40px; border-left: 1px solid var(--border-strong); }
.vb-karte__aktion .vb-koepfe img { width: 64px; height: 64px; }
.vb-karte__wer { margin: 0; color: var(--text-body); }
@media (max-width: 820px) { .vb-karte { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; } .vb-karte__aktion { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--border-strong); } }
/* B: Schlussteil und Fusszeile als ein Block */
html[data-ende="block"] .sv-final { background: linear-gradient(180deg, #A83A08 0%, #862A03 100%); padding-bottom: 72px; }
html[data-ende="block"] .vb-fuss__inner { border-top: 1px solid rgba(255, 240, 230, 0.2); }
/* C: helle Fusszeile */
html[data-ende="hell"] .vb-fuss { background: var(--cream-50); color: var(--text-strong); }
html[data-ende="hell"] .vb-fuss a { color: var(--text-strong); }
html[data-ende="hell"] .vb-fuss__titel { color: var(--terra-500); }
html[data-ende="hell"] .vb-fuss__adresse, html[data-ende="hell"] .vb-fuss__basis { color: var(--text-body); }
html[data-ende="hell"] .vb-fuss__basis { border-top-color: var(--border-strong); }
html[data-ende="hell"] .vb-fuss .sv-footer__logo img { content: url("../../assets/logo-lockup-terra.svg"); }
html[data-ende="hell"] .vb-fuss .sv-footer__social a { background: rgba(178, 82, 34, 0.1); color: var(--terra-500); }

/* 11.10.: Schlussteil hell, Fusszeile Terracotta – Hintergründe wechseln sich ab */
.sv-final { background: var(--cream-card) !important; color: var(--text-strong); border-top: 1px solid var(--border-strong); }
.sv-final::before { display: none; }
.sv-final .sv-kicker--on-terra { color: var(--terra-500); }
.sv-final .sv-title--on-terra { color: var(--text-strong); }
.sv-final .sv-lead--on-terra { color: var(--text-body); }
.sv-final .sv-button--light { background: var(--cta-bg); color: #FFFFFF; }
.sv-final .sv-button--light:hover { background: var(--cta-bg-hover); }
.sv-final a:not(.sv-button) { color: var(--link); }
.vb-fuss { background: linear-gradient(180deg, #A83A08 0%, #862A03 100%) !important; }

.sv-final .sv-button--glass { color: var(--terra-600); border-color: var(--border-strong); background: transparent; backdrop-filter: none; }
.sv-final .sv-button--glass:hover, .sv-final .sv-button--glass:focus-visible { background: var(--peach-150); color: var(--terra-700); }