/*
 * Discovery Panel Core – Abo-Leiste und Seite „Hören"
 * Datei: assets/css/dp-abo.css
 * Präfix dp-abo. Dunkler Modus über html.dp-dark. Nutzt --dp-* Tokens mit Rückfallwerten.
 * Gestaltung zweite Runde: Kartenoptik wie die Seitenleisten-Karten der Episodenseite (weiß, warmer Rand,
 * Radius 12 px, leiser Schatten, Eyebrow mit Trennlinie). Hauptwege Spotify/Apple groß mit Marken-Symbol,
 * Nebenwege klein. Ruhige Flächen, damit nichts mit dem pinkfarbenen Player konkurriert.
 * Mobil: höchstens zwei Zeilen Knöpfe, keine Überbreite bei 320 px, Ziele mindestens 44 px.
 */

.dp-abo, .dp-abo *, .dp-abo-seite, .dp-abo-seite * { box-sizing: border-box; }

.dp-abo, .dp-abo-seite {
    --abo-flaeche: var(--dp-surface-raised, #fff);
    --abo-rand: #e8e2d8;
    --abo-linie: #ede7dc;
    --abo-schatten: 0 1px 3px rgba(80, 60, 30, .07), 0 1px 2px rgba(80, 60, 30, .04);
    --abo-eyebrow: #8a7a64;
    --abo-text: var(--dp-text-body, #303652);
    --abo-stark: var(--dp-text-heading, #0d1020);
    --abo-leise: #6b6358;
    --abo-knopf: #faf8f4;
    --abo-knopf-rand: #e3dccf;
    --abo-knopf-hover: #fff;
    --abo-knopf-hover-rand: #c9bfae;
    --abo-link: var(--dp-primary, #304a98);
    --abo-fokus: var(--dp-primary, #304a98);
    --abo-ok: var(--dp-success, #1a7f37);
}

/* ── Grundkarte (Kontext episode) ─────────────────────────────────────────── */
.dp-abo {
    max-width: 100%;
    margin: 1rem 0 1.25rem;
    padding: 1.1rem 1.35rem 1.2rem;
    background: var(--abo-flaeche);
    color: var(--abo-text);
    border: 1px solid var(--abo-rand);
    border-radius: 12px;
    box-shadow: var(--abo-schatten);
    font-family: var(--dp-font-ui, 'Figtree', system-ui, sans-serif);
    line-height: 1.4;
}
.dp-abo__kopf { margin: 0 0 .9rem; }
.dp-abo__eyebrow {
    margin: 0 0 .7rem; padding: 0 0 .6rem; border-bottom: 1px solid var(--abo-linie);
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
    color: var(--abo-eyebrow);
}
.dp-abo__titel { margin: 0; font-size: .98rem; line-height: 1.45; color: var(--abo-text); }
.dp-abo__titel strong { font-weight: 700; color: var(--abo-stark); }

.dp-abo__wege { display: flex; flex-direction: column; gap: .65rem; }
.dp-abo__liste { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dp-abo__punkt { margin: 0; padding: 0; min-width: 0; list-style: none; }
.dp-abo__punkt::marker { content: ""; }
.dp-abo__punkt::before { content: none !important; }

.dp-abo a.dp-abo__weg {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 44px; max-width: 100%;
    color: var(--abo-stark) !important; text-decoration: none !important;
    font-weight: 600; line-height: 1.2;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.dp-abo a.dp-abo__weg:focus-visible { outline: 3px solid var(--abo-fokus); outline-offset: 2px; }
.dp-abo__logo { flex: 0 0 auto; display: block; }
.dp-abo__name { min-width: 0; }
.dp-abo__pfeil { flex: 0 0 auto; display: block; transition: transform .15s; }

/* Hauptwege: zwei gleich breite Kacheln nebeneinander */
.dp-abo__liste--haupt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.dp-abo a.dp-abo__weg--haupt {
    display: flex; width: 100%; min-height: 60px; padding: .6rem .9rem; gap: .75rem;
    background: var(--abo-knopf); border: 1px solid var(--abo-knopf-rand); border-radius: 12px;
}
.dp-abo a.dp-abo__weg--haupt:hover {
    background: var(--abo-knopf-hover); border-color: var(--abo-knopf-hover-rand);
    box-shadow: 0 4px 14px rgba(80, 60, 30, .10); transform: translateY(-1px);
}
.dp-abo__weg--haupt .dp-abo__name { display: flex; flex-direction: column; }
.dp-abo__verb { font-size: .76rem; font-weight: 500; color: var(--abo-leise); }
.dp-abo__marke { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; color: var(--abo-stark); }

/* Nebenwege: YouTube als kleine Pille, RSS und „Alle Wege" als Textlinks */
.dp-abo__liste--neben { align-items: center; gap: .25rem .4rem; }
.dp-abo a.dp-abo__weg--neben { padding: 0 .55rem; gap: .4rem; font-size: .88rem; border-radius: 999px; }
.dp-abo a.dp-abo__weg--youtube.dp-abo__weg--neben { padding: 0 .9rem 0 .75rem; border: 1px solid var(--abo-knopf-rand); background: var(--abo-knopf); }
.dp-abo a.dp-abo__weg--rss, .dp-abo a.dp-abo__weg--hoeren { color: var(--abo-leise) !important; }
.dp-abo a.dp-abo__weg--neben:hover { background: var(--abo-knopf-hover); border-color: var(--abo-knopf-hover-rand); color: var(--abo-stark) !important; }
.dp-abo a.dp-abo__weg--rss:hover, .dp-abo a.dp-abo__weg--hoeren:hover { background: var(--abo-knopf); }
.dp-abo__punkt--hoeren { margin-left: auto; }
.dp-abo a.dp-abo__weg:hover .dp-abo__pfeil { transform: translateX(2px); }
.dp-abo a.dp-abo__weg.is-kopiert { background: var(--abo-ok); border-color: var(--abo-ok); color: #fff !important; }

.dp-abo__status { display: block; min-height: 0; font-size: .85rem; font-weight: 600; color: var(--abo-ok); }
.dp-abo__status:not(:empty) { min-height: 1.2em; margin-top: .45rem; }

/* ── Kontext: Begrüßungsbox – eine Zeile, Teil der Box ────────────────────── */
.dp-abo--clipbox {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem;
    margin: .35rem 0 0; padding: .75rem 0 0; background: transparent; box-shadow: none;
    border: 0; border-top: 1px dashed #e8c87a; border-radius: 0; color: inherit;
}
.dp-abo--clipbox .dp-abo__titel { flex: 0 1 auto; font-size: .9rem; font-weight: 600; color: inherit; }
.dp-abo--clipbox .dp-abo__liste { align-items: center; gap: .45rem; }
.dp-abo--clipbox a.dp-abo__weg[aria-label] {
    justify-content: center; width: 44px; height: 44px; padding: 0;
    background: #fffdf7; border: 1px solid #ecdcb0; border-radius: 12px;
}
.dp-abo--clipbox a.dp-abo__weg[aria-label]:hover { background: #fff; border-color: #c9a326; box-shadow: 0 3px 10px rgba(160, 120, 48, .16); transform: translateY(-1px); }
.dp-abo--clipbox a.dp-abo__weg:focus-visible { outline-color: #c9a326; }
.dp-abo--clipbox .dp-abo__punkt--mehr { margin-left: .2rem; }
.dp-abo--clipbox a.dp-abo__weg--hoeren { gap: .3rem; padding: 0 .25rem; font-size: .88rem; font-weight: 600; color: #8a6a00 !important; }
.dp-abo--clipbox a.dp-abo__weg--hoeren:hover .dp-abo__name { text-decoration: underline; }
.dp-abo--clipbox .dp-abo__status { flex-basis: 100%; margin: 0; }
/* In der Box mit Clip-Vorschau steht die Zeile über die volle Breite (siehe clipbox-CSS: grid-column 1 / -1) */

/* ── Kontext: Footer – einfarbige Marken-Symbole, mittig wie die Social-Media-Knöpfe darunter ── */
.dp-abo--footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; text-align: center;
    margin: 1.25rem 0 0; padding: 1rem 0 0; background: transparent; color: inherit; box-shadow: none;
    border: 0; border-top: 1px solid rgba(127, 127, 127, .28); border-radius: 0;
}
.dp-abo--footer .dp-abo__titel { margin: 0; color: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.dp-abo--footer .dp-abo__liste { justify-content: center; gap: .4rem; }
.dp-abo--footer a.dp-abo__weg {
    justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid rgba(127, 127, 127, .32); border-radius: 50%; color: inherit !important; opacity: .88;
}
.dp-abo--footer a.dp-abo__weg:hover { opacity: 1; border-color: currentColor; background: rgba(127, 127, 127, .10); }
.dp-abo--footer .dp-abo__status { flex-basis: 100%; margin: 0; }

/* ── Seite /hoeren/ ───────────────────────────────────────────────────────── */
.dp-abo-seite { max-width: 100%; font-family: var(--dp-font-ui, 'Figtree', system-ui, sans-serif); color: var(--abo-text); line-height: 1.5; }
.dp-abo-seite a:focus-visible { outline: 3px solid var(--abo-fokus); outline-offset: 2px; }

.dp-abo-held { display: flex; align-items: center; gap: 1.5rem; margin: 0 0 1.75rem; }
.dp-abo-held__bild { flex: 0 0 auto; display: flex; }
.dp-abo-held__bild img { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.dp-abo-held__bild--duo img { width: 104px; height: 104px; background: #fff; box-shadow: 0 0 0 4px var(--abo-flaeche); }
.dp-abo-held__bild--duo img + img { margin-left: -22px; }
.dp-abo-held__text { min-width: 0; }
.dp-abo-held__eyebrow { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--abo-eyebrow); }
.dp-abo-seite .dp-abo-held__titel { margin: 0 0 .45rem; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--abo-stark); }
.dp-abo-held__intro { margin: 0; font-size: 1.02rem; line-height: 1.6; max-width: 38rem; }

.dp-abo-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.dp-abo-karte {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-width: 0; margin: 0;
    padding: 1.35rem 1.35rem 1.35rem; overflow: hidden;
    background: var(--abo-flaeche); border: 1px solid var(--abo-rand); border-radius: 14px; box-shadow: var(--abo-schatten);
}
.dp-abo-karte::marker, .dp-abo-zeile::marker { content: ""; }
.dp-abo-karte::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--abo-marke, #ccc); }
.dp-abo-karte--spotify { --abo-marke: #1DB954; --abo-marke-weich: rgba(29, 185, 84, .10); }
.dp-abo-karte--apple   { --abo-marke: #9933CC; --abo-marke-weich: rgba(153, 51, 204, .09); }
.dp-abo-karte__symbol { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: .2rem; border-radius: 18px; background: var(--abo-marke-weich, #f3f0ea); }
.dp-abo-seite .dp-abo-karte__titel { margin: 0; font-size: 1.3rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--abo-stark); }
.dp-abo-karte__text { margin: 0 0 .5rem; flex: 1 1 auto; font-size: .95rem; line-height: 1.55; }
.dp-abo-seite a.dp-abo-karte__knopf, .dp-abo-seite a.dp-abo-rss__knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; max-width: 100%;
    padding: .6rem 1.15rem; border-radius: 999px; border: 0;
    background: var(--abo-stark); color: #fff !important; font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none !important;
    transition: background-color .15s, transform .15s;
}
.dp-abo-seite a.dp-abo-karte__knopf:hover, .dp-abo-seite a.dp-abo-rss__knopf:hover { background: var(--dp-primary, #304a98); }
.dp-abo-seite a.dp-abo-karte__knopf:hover .dp-abo__pfeil { transform: translateX(2px); }

.dp-abo-seite .dp-abo-seite__zwischen { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--abo-eyebrow); }
.dp-abo-zeilen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.dp-abo-zeile { margin: 0; padding: 0; min-width: 0; }
.dp-abo-seite a.dp-abo-zeile__link {
    display: flex; align-items: center; gap: .85rem; height: 100%; min-height: 44px; padding: .85rem 1rem;
    background: var(--abo-knopf); border: 1px solid var(--abo-knopf-rand); border-radius: 12px;
    color: var(--abo-text) !important; text-decoration: none !important; transition: background-color .15s, border-color .15s;
}
.dp-abo-seite a.dp-abo-zeile__link:hover { background: var(--abo-knopf-hover); border-color: var(--abo-knopf-hover-rand); }
.dp-abo-zeile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.dp-abo-zeile__titel { font-weight: 700; color: var(--abo-stark); }
.dp-abo-zeile__info { font-size: .88rem; line-height: 1.4; color: var(--abo-leise); }
.dp-abo-zeile .dp-abo__pfeil { color: var(--abo-leise); }

.dp-abo-ohne { padding: 1.25rem 1.35rem; background: #f7f4ee; border: 1px solid var(--abo-linie); border-radius: 14px; }
.dp-abo-seite .dp-abo-ohne__titel { margin: 0 0 .8rem; font-size: 1.15rem; font-weight: 800; color: var(--abo-stark); }
.dp-abo-ohne__liste { display: grid; gap: .7rem; margin: 0 0 1.1rem; padding: 0; list-style: none; line-height: 1.55; }
.dp-abo-ohne__liste li { display: flex; align-items: flex-start; gap: .7rem; margin: 0; }
.dp-abo-ohne__liste li::marker { content: ""; }
.dp-abo-ohne__liste .dp-abo__logo { margin-top: .15rem; color: var(--abo-eyebrow); }
.dp-abo-ohne__liste strong { color: var(--abo-stark); }
.dp-abo-ohne a:not(.dp-abo-rss__knopf) { color: var(--abo-link); }
.dp-abo-rss { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.dp-abo-rss__adresse {
    flex: 1 1 14rem; min-width: 0; padding: .7rem .85rem; font-family: var(--dp-font-mono, monospace); font-size: .85rem;
    background: var(--abo-flaeche); color: var(--abo-stark); border: 1px solid var(--abo-knopf-rand); border-radius: 10px;
    overflow-wrap: anywhere; word-break: break-all;
}
.dp-abo-seite a.dp-abo-rss__knopf.is-kopiert { background: var(--abo-ok); }
.dp-abo-rss .dp-abo__status { flex-basis: 100%; }

/* ── Schmal ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .dp-abo { padding: .95rem .95rem 1rem; }
    .dp-abo__titel { font-size: .93rem; }
    .dp-abo__liste--haupt { gap: .5rem; }
    .dp-abo a.dp-abo__weg--haupt { min-height: 56px; padding: .5rem .55rem; gap: .5rem; }
    .dp-abo a.dp-abo__weg--haupt .dp-abo__logo { width: 24px; height: 24px; }
    .dp-abo__marke { font-size: .95rem; letter-spacing: -.015em; }
    .dp-abo__liste--neben { gap: .2rem; }
    .dp-abo a.dp-abo__weg--neben { padding: 0 .45rem; }
    .dp-abo--clipbox { gap: .5rem .6rem; }
    .dp-abo-held { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .dp-abo-held__bild--duo img { width: 84px; height: 84px; }
    /* Kacheln kompakter: Symbol links neben dem Titel */
    .dp-abo-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem .85rem; padding: 1.15rem; }
    .dp-abo-karte__symbol { width: 52px; height: 52px; margin: 0; border-radius: 14px; }
    .dp-abo-karte__symbol .dp-abo__logo { width: 32px; height: 32px; }
    .dp-abo-karte__text, .dp-abo-seite a.dp-abo-karte__knopf { grid-column: 1 / -1; }
    .dp-abo-karte__text { margin: 0 0 .2rem; }
    .dp-abo-seite a.dp-abo-karte__knopf { width: 100%; }
    .dp-abo-ohne { padding: 1.1rem 1rem; }
    .dp-abo-seite a.dp-abo-rss__knopf { width: 100%; }
}
@media (max-width: 360px) {
    .dp-abo a.dp-abo__weg--haupt { padding: .5rem; gap: .45rem; }
    .dp-abo a.dp-abo__weg--haupt .dp-abo__logo { width: 22px; height: 22px; }
    .dp-abo__marke { font-size: .92rem; }
    .dp-abo__verb { font-size: .7rem; }
    .dp-abo { padding-inline: .8rem; }
    .dp-abo__liste--neben { gap: 0; }
    .dp-abo a.dp-abo__weg--neben { padding: 0 .35rem; font-size: .84rem; }
    .dp-abo a.dp-abo__weg--youtube.dp-abo__weg--neben { padding: 0 .6rem 0 .5rem; }
}
/* Schmal: „Hören" über den Symbolen, beides mittig */
@media (max-width: 768px) {
    .dp-abo--footer .dp-abo__titel { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dp-abo a.dp-abo__weg, .dp-abo__pfeil, .dp-abo-seite a { transition: none; }
    .dp-abo a.dp-abo__weg:hover, .dp-abo--clipbox a.dp-abo__weg[aria-label]:hover { transform: none; }
}

/* ── Dunkler Modus: ruhiges Violett wie die Seitenleisten-Karten, kein Magenta-Rand ── */
html.dp-dark .dp-abo, html.dp-dark .dp-abo-seite {
    --abo-flaeche: #2d1a48;
    --abo-rand: #42286a;
    --abo-linie: rgba(229, 223, 240, .28);
    --abo-schatten: none;
    --abo-eyebrow: #e5dff0;
    --abo-text: #e5dff0;
    --abo-stark: #f8f5fc;
    --abo-leise: #c8b8e0;
    --abo-knopf: #36214f;
    --abo-knopf-rand: #4e3378;
    --abo-knopf-hover: #3e275c;
    --abo-knopf-hover-rand: #7a5cb0;
    --abo-link: #c9b6ff;
    --abo-fokus: #f0c060;
    --abo-ok: #6ee7b7;
}
html.dp-dark .dp-abo a.dp-abo__weg--haupt:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
html.dp-dark .dp-abo a.dp-abo__weg.is-kopiert { color: #1d1230 !important; }
html.dp-dark .dp-abo--clipbox { border-top-color: rgba(240, 192, 96, .35); }
html.dp-dark .dp-abo--clipbox a.dp-abo__weg[aria-label] { background: #3a2258; border-color: #5a3b88; }
html.dp-dark .dp-abo--clipbox a.dp-abo__weg[aria-label]:hover { background: #452a68; border-color: #f0c060; box-shadow: none; }
html.dp-dark .dp-abo--clipbox a.dp-abo__weg--hoeren { color: #f0c060 !important; }
html.dp-dark .dp-abo--clipbox a.dp-abo__weg:focus-visible { outline-color: #f0c060; }
html.dp-dark .dp-abo--footer { border-top-color: rgba(200, 184, 224, .2); }
html.dp-dark .dp-abo-seite .dp-abo-held__eyebrow, html.dp-dark .dp-abo-seite .dp-abo-seite__zwischen { color: #c8b8e0; }
html.dp-dark .dp-abo-held__bild--duo img { box-shadow: 0 0 0 4px #2d1a48; }
html.dp-dark .dp-abo-karte--spotify { --abo-marke-weich: rgba(29, 185, 84, .14); }
html.dp-dark .dp-abo-karte--apple   { --abo-marke-weich: rgba(190, 120, 240, .16); }
html.dp-dark .dp-abo-seite a.dp-abo-karte__knopf, html.dp-dark .dp-abo-seite a.dp-abo-rss__knopf { background: #f8f5fc; color: #1d1230 !important; }
html.dp-dark .dp-abo-seite a.dp-abo-karte__knopf:hover, html.dp-dark .dp-abo-seite a.dp-abo-rss__knopf:hover { background: #ddd0f5; }
html.dp-dark .dp-abo-seite a.dp-abo-rss__knopf.is-kopiert { background: #6ee7b7; }
html.dp-dark .dp-abo-ohne { background: #231338; border-color: #42286a; }
html.dp-dark .dp-abo-ohne__liste .dp-abo__logo { color: #c8b8e0; }
html.dp-dark .dp-abo-rss__adresse { background: #1a0e2b; border-color: #4e3378; color: #e5dff0; }