/* ============================================================================
   Startseite + Themenseiten (CMS-Blöcke): feinere, kompaktere Darstellung.
   Wird NACH den Inline-Styles von index.php / page.php geladen und überschreibt
   nur Größen und Abstände (Schrift, Innenabstand), keine Farben oder Raster.
   Zurück zur alten Größe: <link> auf diese Datei entfernen.
   ============================================================================ */

/* ── Hero ── */
.lp-hero { padding: 44px 52px 0 52px; margin: 24px auto; }
.lp-hero-eyebrow { font-size: 10px; margin-bottom: 14px; }
.lp-hero h1 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 16px; }
.lp-hero-lead { font-size: 15px; line-height: 1.7; margin-bottom: 26px; }
.lp-hero-actions { margin-bottom: 32px; }
.btn-primary, .btn-outline, .btn-ghost { font-size: 13px; padding: 9px 18px; }
.lp-stat-strip { margin: 0 -52px; }
.lp-stat { padding: 12px 20px; }
.lp-stat-num { font-size: 20px; }
.lp-stat-label { font-size: 10px; }

/* ── Intro + Abschnitte ── */
.lp-intro { padding: 22px 32px; margin-bottom: 18px; }
.lp-intro p { font-size: 15px; line-height: 1.7; }
.lp-section, .lp-two-col, .lp-customers, .lp-neue-werke { margin-bottom: 18px; }
.lp-two-col { gap: 18px; }
.lp-card, .lp-card-dark { padding: 28px 32px; }
.lp-section-label { font-size: 10px; margin-bottom: 6px; }
.lp-section-title, .lp-wysiwyg-titel { font-size: clamp(19px, 2vw, 25px); margin-bottom: 8px; }
.lp-rule { width: 32px; margin-bottom: 22px; }

/* ── Pillars ── */
.lp-pillar { padding: 20px 22px; }
.lp-pillar-num { font-size: 24px; margin-bottom: 8px; }
.lp-pillar h3 { font-size: 16px; margin-bottom: 6px; }
.lp-pillar p { font-size: 13px; line-height: 1.65; }

/* ── Why-Grid ── */
.lp-why-item { padding: 18px 22px; }
.lp-why-item h4 { font-size: 14px; margin-bottom: 4px; }
.lp-why-icon svg { width: 22px; height: 22px; }

/* ── Featured + Slider ── */
.lp-featured-content { padding: 28px 34px; gap: 12px; }
.lp-featured-titel { font-size: clamp(20px, 2.2vw, 28px); }
.lp-featured-text { font-size: 14px; line-height: 1.7; }
.lp-featured-btn { font-size: 12px; padding: 9px 18px; }
.lp-featured-bild { min-height: 0; aspect-ratio: 5 / 4; }   /* fester Bildrahmen (CMS_BILD_RATIO), Ausschnitt per Zuschnitt im Admin */
@media (min-width: 901px) {
    /* Die Bildspalte bestimmt die Höhe; der Text zählt nicht mit (contain) und wird notfalls gekürzt */
    .lp-featured:has(.lp-featured-bild) .lp-featured-content { contain: size; overflow: hidden; }   /* ohne Bild: Text bestimmt die Höhe */
    .lp-featured-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .lp-featured-text  { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}
.lp-fslider .lp-featured-content { padding-bottom: 40px; }   /* Platz für die Punkte */
.lp-fslider-arrow { width: 32px; height: 32px; font-size: 18px; }
.lp-fslider-dots { bottom: 12px; }
.lp-fslider-dot { width: 6px; height: 6px; }

/* ── Katalog-Schnipsel ── */
.lp-neue-werk-card { padding: 16px 16px 14px; }
.lp-neue-werk-komp { font-size: 11px; }
.lp-neue-werk-titel { font-size: 15px; }
.lp-top-werke { gap: 8px; margin-top: 20px; }
.lp-top-werk { padding: 5px 12px; }
.lp-catalogue-link { margin-top: 22px; font-size: 13px; }

/* ── Kunden, Notentausch, Texte ── */
.lp-orchester-item { padding: 16px 14px; min-height: 70px; }
.lp-orchester-name { font-size: 14px; }
.lp-exchange { padding: 26px 32px; margin-bottom: 24px; }
.lp-exchange h3 { font-size: 20px; }
.lp-sources-text p, .lp-aside-list li { font-size: 13.5px; }
.lp-wysiwyg p, .lp-wysiwyg ul, .lp-wysiwyg ol { font-size: 14px; line-height: 1.75; }

/* ── Zwei Angebote (cta_duo) ── */
.lp-duo { background: rgba(12,52,61,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 3px; padding: 26px 32px; }
.lp-duo-label { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 16px; }
.lp-duo-spalten { display: grid; grid-template-columns: 1fr 1fr; }
.lp-duo-eins .lp-duo-spalten { grid-template-columns: 1fr; }
.lp-duo-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 28px; }
.lp-duo-spalte + .lp-duo-spalte { padding: 0 0 0 28px; border-left: 1px solid rgba(255,255,255,.14); }
.lp-duo-spalte h3 { font: 400 20px/1.25 'DM Serif Display', Georgia, serif; color: #fff; margin: 0; }
.lp-duo-spalte p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.68); margin: 0; flex: 1; }
.lp-duo-spalte .btn-ghost { margin-top: 4px; }

@media (max-width: 900px) {
    .lp-hero { padding: 32px 24px 0 24px; margin: 16px; }
    .lp-stat-strip { margin: 0 -24px; }
    .lp-intro, .lp-card, .lp-card-dark { padding: 20px 22px; }
    .lp-featured-bild { min-height: 0; }
    .lp-exchange { padding: 22px; }
    .lp-duo { padding: 22px; }
}
@media (max-width: 680px) {
    .lp-duo-spalten { grid-template-columns: 1fr; }
    .lp-duo-spalte { padding: 0 0 20px; }
    .lp-duo-spalte + .lp-duo-spalte { padding: 20px 0 0; border-left: none; border-top: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 600px) {
    .lp-hero { padding: 26px 18px 0 18px; }
    .lp-stat-strip { margin: 0 -18px; }
}