/* Landingpages (gestaltete Hörseiten) – vier Designs, Akzentfarbe aus --akzent, Textfarbe darauf --akzent-text */
.lp-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #f3f5ff; color: #22283d; }
.lp-buehne { position: relative; color: var(--akzent); }
.lp-kopf { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 18px; display: flex; align-items: center; min-height: 48px; }
.lp-logo { max-height: 44px; max-width: 220px; width: auto; height: auto; display: block; }
.lp-marke { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--akzent); }
.lp-main { flex: 1; width: min(680px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 28px; position: relative; z-index: 1; }
.lp-karte { background: #fff; border-radius: 28px; padding: clamp(22px, 4vw, 36px); box-shadow: 0 18px 50px #2c2a5a12; }
.lp-absender { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.lp-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 4px 14px #0001; }
.lp-foto-leer { display: grid; place-items: center; background: color-mix(in srgb, var(--akzent) 14%, #fff); color: var(--akzent); }
.lp-foto-leer .icon { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lp-karte h1 { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 4px; }
.lp-meta { margin: 0; font-size: 13.5px; color: #697087; }
.lp-text { font-size: 15.5px; line-height: 1.65; color: #3f4257; margin: 8px 0 18px; }
.lp-player { margin: 14px 0 6px; }
.lp-karte .player { background: color-mix(in srgb, var(--akzent) 7%, #fff); border-color: color-mix(in srgb, var(--akzent) 16%, #fff); }
.lp-karte .play-button { background: var(--akzent); color: var(--akzent-text); }
.lp-karte .player-wave span.played { background: var(--akzent); }
.lp-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; }
.lp-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; min-height: 48px; border-radius: 50px; font-size: 14.5px; font-weight: 650; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: transform .15s, filter .15s; }
.lp-knopf:hover { transform: translateY(-1px); filter: brightness(1.05); }
.lp-knopf .icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.lp-knopf-haupt { background: var(--akzent); color: var(--akzent-text); box-shadow: 0 8px 18px color-mix(in srgb, var(--akzent) 30%, transparent); }
.lp-knopf-neben { background: color-mix(in srgb, var(--akzent) 10%, #fff); color: var(--akzent); }
.lp-lead { margin: 22px 0 4px; padding: 20px 22px; border-radius: 18px; background: color-mix(in srgb, var(--akzent) 6%, #fff); border: 1px solid color-mix(in srgb, var(--akzent) 14%, #fff); }
.lp-lead h2 { font-size: 17px; margin: 0 0 12px; letter-spacing: -.01em; }
.lp-lead-form { display: grid; gap: 10px; }
.lp-lead-form input[type="text"], .lp-lead-form input[type="email"] { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid #ded8f3; border-radius: 12px; background: #fff; }
.lp-lead-form input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.lp-einverstanden { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #697087; line-height: 1.5; }
.lp-einverstanden input { margin-top: 2px; accent-color: var(--akzent); }
.lp-lead-danke { margin: 0; font-weight: 600; color: #1d6b43; }
.lp-fehler { margin: 0 0 10px; color: #a22; font-size: 13px; }
.lp-unten { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid #eeedf7; font-size: 13.5px; }
.lp-unten a { display: inline-flex; align-items: center; gap: 7px; color: var(--akzent); font-weight: 600; text-decoration: none; }
.lp-unten .lp-laden { color: #697087; font-weight: 500; }
.lp-unten .icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lp-fuss { text-align: center; margin: 22px auto 0; font-size: 12px; color: #8a8fa8; line-height: 1.6; }
.lp-fuss-text { margin: 0 0 6px; color: #697087; }
.lp-fuss a { color: inherit; }
.lp-fuss-klein { margin: 0; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Design „Farbband“: Band in Akzentfarbe, Karte ragt hinein */
.d-karte .lp-buehne, .d-welle .lp-buehne { background: var(--akzent); color: var(--akzent-text); }
.d-karte .lp-marke, .d-welle .lp-marke { color: var(--akzent-text); }
.d-karte .lp-kopf { padding: 24px 0 70px; }
.d-karte .lp-main { margin-top: -52px; }

/* Design „Welle“: große Bühne mit Welle unten */
.d-welle .lp-buehne { padding-bottom: 120px; }
.d-welle .lp-kopf { padding: 30px 0 40px; justify-content: center; }
.d-welle .lp-welle { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; color: #f3f5ff; }
.d-welle .lp-main { margin-top: -120px; }
.d-welle .lp-karte { box-shadow: 0 24px 60px #1a174a22; }

/* Design „Dunkel“ */
.d-dunkel .lp-body, .d-dunkel body { background: #15132a; color: #f3f2fb; }
.d-dunkel .lp-karte { background: #1f1c3b; box-shadow: 0 20px 60px #0006; color: #f3f2fb; }
.d-dunkel .lp-karte h1 { color: #fff; }
.d-dunkel .lp-text, .d-dunkel .lp-meta, .d-dunkel .lp-fuss-text { color: #c9c5e6; }
.d-dunkel .lp-karte .player { background: #2a2650; border-color: #3a3566; color: #f3f2fb; }
.d-dunkel .d-karte .player .audio-name, .d-dunkel .d-karte .player .total-time, .d-dunkel .d-karte .player .current-time { color: #f3f2fb; }
.d-dunkel .d-karte .player-wave span { background: #4a4580; }
.d-dunkel .transcript { border-color: #3a3566; } .d-dunkel .transcript-body { background: #2a2650; color: #d9d6f0; border-color: #3a3566; } .d-dunkel .transcript-toggle { color: #f3f2fb; }
.d-dunkel .lp-lead { background: #2a2650; border-color: #3a3566; } .d-dunkel .lp-lead-form input { background: #15132a; border-color: #3a3566; color: #fff; }
.d-dunkel .lp-unten { border-color: #3a3566; } .d-dunkel .lp-unten .lp-laden { color: #c9c5e6; }
.d-dunkel .lp-knopf-neben { background: #2a2650; color: #fff; }
.d-dunkel .lp-fuss { color: #8c88b3; }
.d-dunkel .lp-marke { color: #fff; }

/* Design „Schlicht“: nur eine Karte auf hellem Grund, Logo klein oben */
.d-schlicht .lp-kopf { justify-content: center; padding: 30px 0 14px; }
.d-schlicht .lp-karte { box-shadow: 0 10px 30px #2c2a5a0d; border: 1px solid #ebeaf6; }

@media (max-width: 600px) {
  .lp-kopf, .lp-main { width: calc(100% - 24px); }
  .lp-karte { border-radius: 22px; }
  .lp-absender { gap: 12px; } .lp-foto { width: 52px; height: 52px; }
  .lp-knoepfe .lp-knopf { width: 100%; }
}
/* Dunkel: Hintergrundverlauf aus speeeak.css abschalten, Transkript-Knopf und Marke anpassen */
.d-dunkel body::before { background: radial-gradient(ellipse at 14% 12%, #26224a 0, transparent 56%), linear-gradient(125deg, #15132a, #1a1736); }
.d-dunkel .transcript-toggle { background: #2a2650; color: #f3f2fb; }
.d-dunkel .transcript-toggle .transcript-label strong { color: #fff; } .d-dunkel .transcript-toggle .transcript-label small { color: #c9c5e6; }
.d-dunkel .transcript-icon { background: #3a3566; color: #fff; }
.d-dunkel .lp-karte .player .audio-name { color: #fff; } .d-dunkel .lp-karte .player .audio-kind { background: #3a3566; color: #e6e2ff; }
.d-dunkel .lp-fuss-text { color: #a9a4cf; }
.d-dunkel .lp-kopf .lp-marke { color: #fff; }
.d-dunkel .lp-unten a.lp-antwort { color: color-mix(in srgb, var(--akzent) 60%, #fff); }

.lp-vorschau-leiste { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 10px 18px; background: #22283d; color: #fff; font-size: 13px; }
.lp-vorschau-leiste a { color: #fff; font-weight: 600; }
.lp-eingebettet .lp-kopf { padding-top: 16px; }

/* Eingebettet in fremde Seite: kein Seitenhintergrund, Bühne kompakt, Karte bündig */
.lp-eingebettet { background: transparent; min-height: 0; }
.lp-eingebettet body::before, body.lp-eingebettet::before { display: none; }
.lp-eingebettet .lp-kopf { padding: 14px 0 10px; min-height: 0; }
.d-karte .lp-eingebettet .lp-kopf, .d-welle .lp-eingebettet .lp-kopf { padding-bottom: 56px; }
.d-welle .lp-eingebettet .lp-buehne { padding-bottom: 40px; }
.d-welle .lp-eingebettet .lp-main { margin-top: -60px; }
.lp-eingebettet .lp-main, .lp-eingebettet .lp-kopf { width: min(680px, calc(100% - 8px)); }
.lp-eingebettet .lp-main { padding-bottom: 8px; }
.lp-eingebettet .lp-fuss { margin-top: 12px; }

/* In Tafel/Popup der Einbettung: Hülle hat schon Rahmen und Schatten – Karte flach, kein Doppelfenster */
.lp-ohne-rahmen .lp-karte { box-shadow: none; border: 0; border-radius: 18px; padding: 40px clamp(16px, 3vw, 24px) clamp(16px, 3vw, 24px); }
.lp-ohne-rahmen .lp-main { padding-top: 8px; }

.lp-ohne-rahmen .lp-main, .lp-ohne-rahmen .lp-kopf { width: calc(100% - 4px); }
.lp-ohne-rahmen .lp-kopf { padding-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-ohne-kopf .lp-main { margin-top: 0; padding-top: 24px; }
.lp-ohne-kopf.lp-ohne-rahmen .lp-main { padding-top: 0; }