/* Kommentare unter den Podcast-Folgen – im Stil der Folgen-Karten und Plattform-Pillen */
.komm { margin-top: 1.1rem; }
.komm-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 0.4rem 0.9rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35); background: transparent;
    font: inherit; font-size: 0.9rem; letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85); cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.komm-toggle:hover, .komm-toggle:focus-visible { color: var(--accent); border-color: rgba(255, 255, 255, 0.6); outline: none; }
.komm-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }

.komm-box {
    margin-top: 1rem; padding: 1.1rem 1.1rem 1.2rem;
    border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.03);
}
.komm-list { display: grid; gap: .75rem; }
.komm-item {
    padding: .8rem 1rem; border-radius: 12px;
    border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.03);
}
.komm-item strong { font-size: 1rem; color: var(--text-main); }
.komm-item small { margin-left: .4rem; font-size: 0.85rem; opacity: 0.7; color: var(--text-main); }
.komm-item p { margin: .4rem 0 0; color: var(--text-muted); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.komm-empty { margin: 0; color: var(--text-muted); }

.komm-form { display: grid; gap: .8rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border-subtle); max-width: 560px; }
.komm-form label {
    display: grid; gap: .35rem;
    font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.komm-form input[type=text], .komm-form textarea {
    background: rgba(255, 255, 255, 0.03); color: var(--text-main);
    border: 1px solid var(--border-subtle); border-radius: 12px; padding: .65rem .85rem;
    font: inherit; font-size: 1rem; letter-spacing: normal; text-transform: none;
}
.komm-form input::placeholder, .komm-form textarea::placeholder { color: rgba(255,255,255,.35); }
.komm-form input:focus, .komm-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(247, 176, 255, .18); }
.komm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.komm-send {
    justify-self: start; padding: 0.45rem 1.2rem; border-radius: 999px;
    border: 1px solid var(--accent); background: transparent; color: var(--accent);
    font: inherit; font-size: .95rem; letter-spacing: .04em; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.komm-send:hover:not(:disabled), .komm-send:focus-visible { background: var(--accent); color: #12101a; outline: none; }
.komm-send:disabled { opacity: .5; cursor: default; }
.komm-hint { margin: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.komm-hint a { color: var(--accent); }
.komm-status { margin: 0; min-height: 1.2em; font-size: .9rem; color: var(--text-main); }

/* Musik-Playlist: gleiche Größe wie die anderen Plattform-Knöpfe, nur mit Akzent */
.platforms-title--music { margin-top: 1.1rem; }
.platform-pill--hl { border-color: var(--accent-strong); color: var(--accent); }
.platform-pill--hl:hover, .platform-pill--hl:focus { border-color: var(--accent); color: var(--text-main); }
.platform-pill--soon { opacity: .45; cursor: default; border-style: dashed; }

/* =========================================
   PLAYER im Stil der Seite
   ========================================= */
.pl { display: flex; align-items: center; gap: .6rem .7rem; flex-wrap: wrap; margin-top: .9rem; padding: .6rem .9rem; max-width: 640px;
      border: 1px solid var(--border-subtle); border-radius: 999px; background: rgba(255, 255, 255, 0.03); }
.pl audio { display: none; }
.pl-play { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-strong); background: transparent; color: var(--accent);
           display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s ease, color .2s ease; }
.pl-play svg { width: 22px; height: 22px; fill: currentColor; }
.pl-play .ic-pause { display: none; }
.pl.is-playing .pl-play { background: var(--accent-strong); color: #12101a; }
.pl.is-playing .pl-play .ic-play { display: none; }
.pl.is-playing .pl-play .ic-pause { display: block; }
.pl-play:hover, .pl-play:focus-visible { background: var(--accent); color: #12101a; outline: none; }
.pl-skip, .pl-speed { flex: 0 0 auto; background: transparent; border: 0; padding: .3rem .45rem; border-radius: 999px; font: inherit; font-size: .8rem; letter-spacing: .04em;
                      color: var(--text-muted); cursor: pointer; transition: color .2s ease; }
.pl-skip:hover, .pl-speed:hover, .pl-skip:focus-visible, .pl-speed:focus-visible { color: var(--accent); outline: none; }
.pl-speed { border: 1px solid var(--border-subtle); min-width: 3.1rem; }
.pl-bar { flex: 1 1 140px; min-width: 120px; height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.pl-bar::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--accent-strong) var(--p), rgba(255,255,255,.18) var(--p)); }
.pl-bar::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); }
.pl-bar::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent-strong); }
.pl-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 0; box-shadow: 0 0 0 4px rgba(247,176,255,.2); }
.pl-bar::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 0; }
.pl-bar:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; border-radius: 6px; }
.pl-time { flex: 0 0 auto; font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .pl { border-radius: 24px; } .pl-bar { order: 5; flex-basis: 100%; } }

/* Antworten und Emoji-Reaktionen */
.komm-reply { margin: .7rem 0 0 .6rem; padding: .6rem .9rem; border-left: 2px solid var(--accent-strong); border-radius: 0 12px 12px 0; background: rgba(247, 176, 255, 0.06); }
.komm-reply strong { font-size: .9rem; color: var(--accent); }
.komm-reply p { margin: .25rem 0 0; color: var(--text-muted); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.komm-react { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.komm-emo { display: inline-flex; align-items: center; gap: .15rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-main); font: inherit; font-size: .9rem; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.komm-emo:hover, .komm-emo:focus-visible { border-color: rgba(255,255,255,.5); outline: none; }
.komm-emo.on { border-color: var(--accent-strong); background: rgba(255, 79, 163, .12); }
.komm-emo span { font-size: .8rem; color: var(--text-muted); min-width: .6rem; }