/* ═══════════════════════════════════════════
   Leistungsseiten im Stil der neuen Startseite (zuerst Lidstraffung, 24.10.2026)
   Gilt nur für Seiten mit <body class="… ls-neu">. Bausteine (Ablauf, Stimmen, FAQ, Raster) kommen aus css/startseite.css.
   ═══════════════════════════════════════════ */

/* Überschriften und Etiketten einheitlich */
.ls-neu main h2 { letter-spacing: -0.02em; }
.ls-neu .philosophy-section h2, .ls-neu .benefits-section h2, .ls-neu .comparison-section h2, .ls-neu .quiz-section h2,
.ls-neu .facts-section h2, .ls-neu .risks-section h2, .ls-neu .related-treatments h2, .ls-neu .anfrage-section h2, .ls-neu .hv-kopf h2 {
	font-size: clamp(2.2rem, 4.2vw, 3.3rem);
}

/* „Kennen Sie das?“ auf dem Handy einspaltig */
@media (max-width: 600px) {
	.ls-neu .ws-bento { grid-template-columns: minmax(0, 1fr); }
	.ls-neu .ws-bild { min-height: 340px; }
	.ls-neu .ws-section { padding: 3.5rem 0; }
}

/* ── Philosophie ── */
.ls-neu .philosophy-section { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.ls-neu .philosophy-quote { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
.ls-neu .philosophy-pillars { gap: 14px; margin-top: clamp(2rem, 4vw, 3rem); }
.ls-neu .philosophy-pillar { padding: 1.75rem 1.6rem; border-radius: 22px; border: 1px solid var(--color-border-light); background: var(--color-white); box-shadow: none; text-align: left; transition: transform 0.4s var(--ease-out), border-color 0.3s; }
.ls-neu .philosophy-pillar:hover { transform: translateY(-3px); border-color: rgba(196, 169, 125, 0.5); }
.ls-neu .philosophy-pillar-icon { width: 54px; height: 54px; margin: 0 0 1.1rem; border-radius: 16px; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-gold) 100%); color: #FAF8F5; font: 400 1.8rem/54px var(--font-display); text-align: center; }

/* ── Heilungsverlauf als Zeitstrahl ── */
.hv-section { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--color-bg-warm); }
.hv-kopf { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.hv-zeit { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.hv-zeit::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent)); opacity: 0.6; }
.hv-zeit li { position: relative; padding-top: 2.1rem; }
.hv-punkt { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg-warm); border: 2px solid var(--color-accent); }
.hv-zeit li:last-child .hv-punkt { background: var(--color-accent); }
.hv-wann { display: inline-block; margin-bottom: 0.7rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-white); border: 1px solid var(--color-border-light); font: 600 0.78rem/1 var(--font-body); color: var(--color-accent-text); }
.hv-zeit b { display: block; margin-bottom: 0.45rem; font: 400 1.5rem/1.2 var(--font-display); color: var(--color-text); }
.hv-zeit p { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--color-text-soft); }
@media (max-width: 900px) {
	.hv-zeit { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-left: 2rem; }
	.hv-zeit::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-accent-gold), var(--color-accent)); }
	.hv-zeit li { padding-top: 0; }
	.hv-punkt { left: -2rem; top: 0.15rem; }
}

/* ── Vorteile ── */
.ls-neu .benefits-section { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.ls-neu .benefits-list { gap: 10px; }
.ls-neu .benefit-item { align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 18px; border: 1px solid var(--color-border-light); background: var(--color-white); transition: border-color 0.3s, transform 0.4s var(--ease-out); }
.ls-neu .benefit-item:hover { border-color: rgba(196, 169, 125, 0.5); transform: translateX(4px); }
.ls-neu .benefit-icon { flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(196, 169, 125, 0.15); color: var(--color-accent-text); }
.ls-neu .benefit-content h4 { font: 400 1.35rem/1.2 var(--font-display); margin-bottom: 0.2rem; }
.ls-neu .benefit-content p { font-size: 0.9rem; color: var(--color-text-soft); }
.ls-neu .benefits-image { border-radius: var(--radius-xl); }
.ls-neu .benefits-float { border-radius: 18px; background: #2A2320; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6); }
.ls-neu .benefits-float-number { color: var(--color-accent-gold); font-family: var(--font-display); }

/* ── Vergleich ── */
.ls-neu .comparison-wrapper { margin-top: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius-xl); border: 1px solid var(--color-border-light); background: var(--color-white); overflow: hidden; }
.ls-neu .comparison-table { width: 100%; border-collapse: collapse; }
.ls-neu .comparison-table th, .ls-neu .comparison-table td { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--color-border-light); text-align: left; font-size: 0.92rem; vertical-align: top; }
.ls-neu .comparison-table thead th { font: 400 1.3rem/1.2 var(--font-display); color: var(--color-text); background: var(--color-bg); }
.ls-neu .comparison-table tbody tr:last-child td { border-bottom: 0; }
.ls-neu .comparison-label { font-weight: 600; color: var(--color-text-muted); font-size: 0.82rem !important; width: 18%; }
.ls-neu .comparison-table .comparison-highlight { background: rgba(196, 169, 125, 0.12); color: var(--color-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--color-accent-gold), inset -2px 0 0 var(--color-accent-gold); }
.ls-neu .comparison-table thead .comparison-highlight { background: #2A2320; color: #FAF8F5; box-shadow: none; }
@media (max-width: 768px) {
	.ls-neu .comparison-wrapper { overflow-x: auto; }
	.ls-neu .comparison-table { min-width: 620px; }
}

/* ── Kombination (Lidstraffung + Botulinumtoxin) ── */
.ls-neu .combi-box { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem 1.6rem; border-radius: var(--radius-xl); border: 1px solid rgba(196, 169, 125, 0.35); background: var(--color-bg-warm); }
.ls-neu .combi-box-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-gold) 100%); color: #FAF8F5; }
.ls-neu .combi-box-link { font-weight: 600; color: var(--color-accent-text); }

/* ── Selbstcheck ── */
.ls-neu .quiz-card { border-radius: var(--radius-xl); border: 1px solid var(--color-border-light); box-shadow: 0 30px 60px -40px rgba(42, 35, 32, 0.4); padding: clamp(1.5rem, 3vw, 2.25rem); }
.ls-neu .quiz-option { border-radius: 14px; border: 1px solid var(--color-border); transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.ls-neu .quiz-option:hover { border-color: var(--color-accent-gold); background: var(--color-bg-warm); transform: translateY(-1px); }
.ls-neu .quiz-progress { border-radius: 3px; overflow: hidden; }
.ls-neu .quiz-progress-bar { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-gold)); }

/* ── Fakten auf einen Blick ── */
.ls-neu .facts-section { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.ls-neu .facts-grid { gap: 12px; }
.ls-neu .fact-card { padding: 1.4rem 1.3rem; border-radius: 18px; border: 1px solid var(--color-border-light); background: var(--color-bg-warm); box-shadow: none; text-align: left; transition: transform 0.4s var(--ease-out), border-color 0.3s; }
.ls-neu .fact-card:hover { transform: translateY(-3px); border-color: rgba(196, 169, 125, 0.5); }
.ls-neu .fact-icon { margin: 0 0 0.9rem; width: 42px; height: 42px; border-radius: 12px; background: var(--color-white); color: var(--color-accent-text); }
.ls-neu .fact-value { font: 600 1.02rem/1.35 var(--font-body); color: var(--color-text); }
.ls-neu .fact-card { min-width: 0; }
.ls-neu .fact-value { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) {
	.ls-neu .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ls-neu .fact-card { padding: 1.1rem 0.9rem; }
	.ls-neu .fact-card h4 { font-size: 0.6rem; letter-spacing: 0.05em; overflow-wrap: break-word; }
}
/* Vier Fakten in einer Reihe statt 3 + 1 */
@media (min-width: 901px) { .ls-neu .facts-grid:has(> .fact-card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ls-neu .facts-grid:has(> .fact-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Sicherheit & Risiken ── */
.ls-neu .risks-section { padding: clamp(4.5rem, 9vw, 7rem) 0; background: var(--color-bg); }
.ls-neu .definition-block { border-radius: var(--radius-lg); border: 0; border-left: 3px solid var(--color-accent-gold); background: var(--color-bg-warm); padding: 1.25rem 1.5rem; }
.ls-neu .risks-grid { gap: 12px; }
.ls-neu .risk-item { padding: 1.3rem 1.25rem; border-radius: 18px; border: 1px solid var(--color-border-light); background: var(--color-white); }
.ls-neu .risk-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(196, 169, 125, 0.15); color: var(--color-accent-text); }
.ls-neu .risk-content h4 { font: 400 1.25rem/1.25 var(--font-display); }
.ls-neu .risks-note { border-radius: var(--radius-lg); background: var(--color-bg-warm); padding: 1rem 1.25rem; }

/* ── Ergänzende Behandlungen ── */
.ls-neu .related-treatments-grid { gap: 12px; }
.ls-neu .related-treatment-card { padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--color-border-light); background: var(--color-white); transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.3s; }
.ls-neu .related-treatment-card:hover { transform: translateY(-3px); border-color: rgba(196, 169, 125, 0.5); box-shadow: 0 24px 40px -30px rgba(42, 35, 32, 0.5); }
.ls-neu .related-treatment-icon { border-radius: 14px; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-gold) 100%); color: #FAF8F5; }
.ls-neu .related-treatment-content h3 { font: 400 1.45rem/1.2 var(--font-display); }

/* ── Direkt anfragen ── */
.ls-neu .anfrage-section { padding: clamp(4.5rem, 9vw, 7rem) 0; background: var(--color-bg-warm); }
/* Zeilen ausgleichen statt festem Umbruch */
.ls-neu .anfrage-section h2 { text-wrap: balance; }
.ls-neu .contact-form-box { border-radius: var(--radius-xl); border: 0; background: #2A2320; color: #FAF8F5; padding: clamp(1.75rem, 3.5vw, 2.75rem); box-shadow: 0 40px 80px -50px rgba(42, 35, 32, 0.85); }
.ls-neu .contact-form-box h3, .ls-neu .contact-form-box h2 { color: #FAF8F5; }
.ls-neu .contact-form-box .section-label { color: var(--color-accent-gold); }
.ls-neu .contact-form-box .section-label::before { background: var(--color-accent-gold); }
.ls-neu .contact-form-box p { color: rgba(250, 248, 245, 0.7); }
.ls-neu .contact-form-box label { color: rgba(250, 248, 245, 0.72); }
.ls-neu .contact-form-box input, .ls-neu .contact-form-box select, .ls-neu .contact-form-box textarea { border-radius: 12px; border: 1px solid rgba(250, 248, 245, 0.16); background: rgba(250, 248, 245, 0.06); color: #FAF8F5; }
.ls-neu .contact-form-box input::placeholder, .ls-neu .contact-form-box textarea::placeholder { color: rgba(250, 248, 245, 0.4); }
.ls-neu .contact-form-box select option { color: var(--color-text); }
.ls-neu .contact-form-box input:focus, .ls-neu .contact-form-box select:focus, .ls-neu .contact-form-box textarea:focus { border-color: var(--color-accent-gold); outline: none; box-shadow: 0 0 0 3px rgba(196, 169, 125, 0.25); }
/* Einwilligung: eigene Zeile mit gut sichtbarem Kästchen, der ganze Text ist anklickbar */
.ls-neu .contact-form-box .cf-check { align-items: flex-start; gap: 0.85rem; margin: 0.25rem 0 1.25rem; padding: 0.95rem 1.05rem; border-radius: 14px; border: 1px solid rgba(250, 248, 245, 0.12); background: rgba(250, 248, 245, 0.04); font-size: 0.84rem; line-height: 1.6; color: rgba(250, 248, 245, 0.78); transition: border-color 0.2s, background 0.2s; }
.ls-neu .contact-form-box .cf-check:has(input:checked) { border-color: rgba(196, 169, 125, 0.55); background: rgba(196, 169, 125, 0.08); }
.ls-neu .contact-form-box .cf-check label { display: block; min-height: 0; padding: 0; color: inherit; }
.ls-neu .contact-form-box .cf-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; border-radius: 7px; border: 1.5px solid rgba(196, 169, 125, 0.75); background: transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.ls-neu .contact-form-box .cf-check input[type="checkbox"]::before { content: ''; width: 12px; height: 12px; background: #2A2320; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform 0.15s var(--ease-out); }
.ls-neu .contact-form-box .cf-check input[type="checkbox"]:checked { background: var(--color-accent-gold); border-color: var(--color-accent-gold); }
.ls-neu .contact-form-box .cf-check input[type="checkbox"]:checked::before { transform: scale(1); }
.ls-neu .contact-form-box .cf-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 3px; }
.ls-neu .contact-form-box .cf-check.field-error { border-color: rgba(231, 111, 95, 0.7); }
.ls-neu .contact-form-box .cf-check.field-error label { color: #F2A397; }
.ls-neu .contact-form-box .cf-check a, .ls-neu .contact-form-box label a { color: var(--color-accent-gold) !important; text-decoration: underline; text-underline-offset: 2px; }
.ls-neu .cf-submit { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-gold) 100%); border: 0; }
.ls-neu .team-portrait { border-radius: var(--radius-xl); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.ls-neu .philosophy-pillar, .ls-neu .benefit-item, .ls-neu .fact-card, .ls-neu .related-treatment-card, .ls-neu .quiz-option { transition: none; }
}