/* RaveOne.FM, öffentliche Seite
   Schwarz und Anthrazit als Träger, ein kraeftiges Violett als Akzent,
   heller Contentbereich als Kontrast. Die Statusleiste oben ist das
   Wiedererkennungsmerkmal der Marke. */

:root {
    /* Gemeinsame Breite von Kopfbereich, Inhalt und Fuss. Die beiden
       Spalten im Kopf ergeben zusammen genau die Inhaltsbreite. */
    --inhalt:       1060px;
    --seitenrand:     20px;
    --spalte-marke:  660px;
    --spalte-konto:  400px;

    --ink:       #222227;
    --ink-2:     #28282e;
    --bar:       #212124;
    --panel:     #2c2c34;
    --line:      #3c3c47;
    --violet:    #9b26e6;
    --violet-hi: #c15cff;
    --text:      #eeeef5;
    --muted:     #9797ac;
    --paper:     #f4f4f8;
    --paper-ink: #16161f;
    --ok:        #2be08a;
    --err:       #ff4d6d;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Ohne diese Regel setzt sich ein display aus einer Klasse gegen das
   Attribut hidden durch, dann stehen etwa Cover und Ersatzbild uebereinander. */
[hidden] { display: none !important; }

body.site {
    margin: 0;
    font-family: var(--font);
    background: var(--ink);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--violet-hi); }

:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: 2px; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--violet); color: #fff; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Statusleiste, das Erkennungszeichen der alten Seite */

.statusbar { background: var(--bar); border-bottom: 1px solid var(--line); }

.statusbar-inner {
    max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); margin: 0 auto; padding: 9px 20px;
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

.statusbar-slot { margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.statusbar-slot-right { text-align: right; }

.statusbar-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.2em; color: var(--muted); white-space: nowrap;
}
.statusbar-value { font-size: 13px; overflow-wrap: anywhere; }

/* Markenkopf */

.masthead { padding: 0; }

.masthead-inner {
    max-width: calc(var(--inhalt) + 2 * var(--seitenrand));
    margin: 0 auto;
    padding: 40px var(--seitenrand) 28px;
    display: flex; align-items: center; gap: 0;
}

/* Linke Spalte: Wortmarke, in ihrer Spalte zentriert. */
.masthead-brand {
    flex: 0 0 var(--spalte-marke); max-width: var(--spalte-marke);
    text-align: center; min-width: 0;
}

/* Rechte Spalte: Anmeldebereich, ebenfalls zentriert. */
.masthead-konto {
    flex: 0 0 var(--spalte-konto); max-width: var(--spalte-konto);
    display: flex; justify-content: center; min-width: 0;
}

.wordmark { display: inline-block; text-decoration: none; }

/* Die Bildmarke traegt den Verlauf bereits in sich, siehe assets/img/logo.svg.
   Der Schein darunter greift die alte Neonanmutung auf, ohne aufdringlich zu
   werden. */
.wordmark-logo {
    display: block;
    width: min(420px, 100%);
    height: auto;
    filter: drop-shadow(0 0 26px rgba(155, 38, 230, 0.42));
}

.wordmark-rule {
    display: block; height: 2px; margin-top: 12px;
    background: linear-gradient(90deg, transparent, var(--violet), transparent);
}

.wordmark-dot { color: var(--violet-hi); }

.claim {
    margin: 12px 0 0; font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.32em;
}

/* Inhalt als heller Bereich gegen den dunklen Rahmen */

.site-main { max-width: 780px; margin: 0 auto; padding: 0 20px 60px; }

.panel-public {
    background: var(--paper); color: var(--paper-ink);
    border-radius: 14px; padding: 34px 30px;
}

.page-title { margin: 0 0 10px; font-size: 27px; letter-spacing: -0.02em; }
.page-lead { margin: 0 0 26px; color: #4a4a5a; }

.closed-note {
    padding: 20px; border-radius: 10px;
    background: #efe7fb; border: 1px solid #d9c6f5;
}
.closed-title { margin: 0 0 6px; font-weight: 700; color: #5d1a95; }
.closed-note p:last-child { margin: 0; }

.messages { margin-bottom: 18px; }
.message {
    margin: 0 0 8px; padding: 13px 16px; border-radius: 10px; font-size: 14.5px;
    background: var(--panel); border: 1px solid var(--line);
}
.message-success { border-color: rgba(43, 224, 138, 0.5); background: rgba(43, 224, 138, 0.12); }
.message-error   { border-color: rgba(255, 77, 109, 0.5); background: rgba(255, 77, 109, 0.12); }

/* Formular */

.public-form .field { margin-bottom: 20px; }

.public-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }

.public-form input[type="text"],
.public-form input[type="email"],
.public-form input[type="password"],
.public-form input[type="number"],
.public-form input[type="search"],
.public-form input[type="url"],
.public-form input[type="tel"],
.public-form input[type="date"],
.public-form input[type="time"],
.public-form input[type="datetime-local"],
.public-form textarea,
.public-form select {
    width: 100%; padding: 12px 14px;
    font: inherit; font-size: 15px;
    color: var(--paper-ink); background: #fff;
    border: 1px solid #cfcfda; border-radius: 9px;
}
.public-form input:focus, .public-form textarea:focus, .public-form select:focus {
    border-color: var(--violet); outline: none;
    box-shadow: 0 0 0 3px rgba(155, 38, 230, 0.16);
}

/* Einheitliches Checkbox-Design auch auf den oeffentlichen Formularen. */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    min-width: 25px;
    margin: 0;
    display: inline-grid;
    place-content: center;
    flex: none;
    background: #2c2c34;
    border: 1px solid #9b26e6;
    border-radius: 5px;
    cursor: pointer;
    vertical-align: middle;
}
input[type="checkbox"]::before {
    content: "";
    width: 7px;
    height: 12px;
    border: solid #9b26e6;
    border-width: 0 3px 3px 0;
    transform: translateY(-1px) rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.12s ease;
}
input[type="checkbox"]:checked::before {
    transform: translateY(-1px) rotate(45deg) scale(1);
}
input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Einheitlicher Datei-Upload fuer alle sichtbaren Formulare. */
input[type="file"]:not(.visually-hidden) {
    width: 100%;
    min-height: 46px;
    padding: 5px 7px;
    background: #2c2c34;
    border: 1px solid #9b26e6;
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
input[type="file"]:not(.visually-hidden)::file-selector-button {
    margin-right: 12px;
    padding: 8px 13px;
    background: #2c2c34;
    border: 1px solid #9b26e6;
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
input[type="file"]:not(.visually-hidden):hover::file-selector-button {
    background: rgba(155, 38, 230, 0.16);
}

.field-hint { margin: 6px 0 0; font-size: 13px; color: #6a6a7c; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

.public-fieldset {
    border: 1px solid #ddddea; border-radius: 10px;
    padding: 18px; margin: 0 0 20px;
}
.public-fieldset legend { padding: 0 8px; font-size: 14px; font-weight: 700; }

.field-check .check { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: 14px; }
.field-check input[type="checkbox"] { margin-top: 1px; }

.btn-public {
    padding: 13px 30px; border: 0; border-radius: 9px;
    background: var(--violet); color: #fff;
    font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.btn-public:hover { background: #8a1dd2; }

/* Honigtopf, für Menschen unsichtbar, für Screenreader ausgeblendet */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Fuß */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 34px 20px; text-align: center;
}
.footer-logo {
    display: block; width: 168px; height: auto; margin-bottom: 8px;
    filter: drop-shadow(0 0 14px rgba(155, 38, 230, 0.28));
}
.footer-claim {
    margin: 6px 0 0; font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.28em;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Infotext oberhalb des Bewerbungsformulars */

.intro-text {
    margin: 0 0 26px; padding: 20px 22px;
    background: #efe7fb; border-left: 3px solid var(--violet);
    border-radius: 10px; color: #33253f;
}
.intro-text > *:first-child { margin-top: 0; }
.intro-text > *:last-child { margin-bottom: 0; }
.intro-text h2 { font-size: 19px; margin: 1.2em 0 0.4em; }
.intro-text h3 { font-size: 16px; margin: 1.1em 0 0.3em; }
.intro-text ul, .intro-text ol { padding-left: 1.3em; }
.intro-text a { color: #7a1ac2; }
.intro-text img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---------------------------------------------------------------
   Navigation, Player und Inhaltsflaechen
   --------------------------------------------------------------- */

.mainnav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }

.mainnav-list {
    list-style: none; margin: 0 auto; padding: 0;
    max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); display: flex; justify-content: center; flex-wrap: wrap; gap: 4px;
}

.mainnav-link {
    display: block; padding: 14px 22px;
    color: var(--text); text-decoration: none;
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
}
.mainnav-link:hover { color: var(--violet-hi); }

/* Der aktive Punkt war schon auf der alten Seite eine violette Taste. */
.mainnav-link.is-active {
    background: var(--violet); color: #fff;
    border-radius: 6px 6px 0 0;
}

.mainnav-toggle {
    display: none; width: calc(100% - 40px); margin: 12px 20px;
    padding: 11px 16px; gap: 10px; align-items: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.mainnav-bars, .mainnav-bars::before, .mainnav-bars::after {
    display: block; width: 16px; height: 2px; background: var(--text); content: ''; position: relative;
}
.mainnav-bars::before { position: absolute; top: -5px; }
.mainnav-bars::after { position: absolute; top: 5px; }

/* Player */

.player {
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(180deg, #2b2b36, #26262d);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.player-inner {
    max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

.player-cover { flex: none; }
.player-art {
    width: 72px; height: 72px; display: block;
    border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: var(--panel);
}
.player-art-empty {
    display: grid; place-items: center;
    background: var(--panel);
    background-image: radial-gradient(circle at 50% 45%, rgba(155, 38, 230, 0.35), transparent 62%);
}
/* Ersatzmotiv, wenn kein Cover geliefert wird */
.player-art-empty::after {
    content: 'R1';
    font-size: 22px; font-weight: 800; letter-spacing: 0.08em;
    color: var(--violet-hi); opacity: 0.85;
}

.player-meta { flex: 1; min-width: 180px; }
.player-label {
    margin: 0 0 3px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.2em; color: var(--violet-hi);
}
.player-track { margin: 0; font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.player-artist { margin: 2px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }

.player-progress {
    margin-top: 8px; height: 3px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.09); overflow: hidden;
}
.player-bar { display: block; height: 100%; width: 0; background: var(--violet); }

.player-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.player-play {
    width: 54px; height: 54px; flex: none;
    display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--violet); color: #fff;
    box-shadow: 0 0 22px rgba(155, 38, 230, 0.45);
}
.player-play:hover { background: #8a1dd2; }

.player-icon-play {
    width: 0; height: 0; margin-left: 4px;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.player-icon-pause {
    width: 14px; height: 17px;
    border-left: 5px solid #fff; border-right: 5px solid #fff;
}

.player-mute {
    padding: 8px 14px; border-radius: 7px; cursor: pointer;
    background: transparent; border: 1px solid var(--line);
    color: var(--text); font: inherit; font-size: 13px;
}
.player-mute.is-muted { color: var(--err); border-color: rgba(255, 77, 109, 0.4); }

.player-volume input {
    width: 108px; accent-color: var(--violet); cursor: pointer;
}

.player-listeners { margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.player-message {
    max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); margin: 0 auto; padding: 0 20px 12px;
    font-size: 13px; color: var(--muted);
}
.player-message.is-error { color: var(--err); }

/* Inhaltsflaechen */

.site-main { max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); }
.site-main.is-loading { opacity: 0.55; transition: opacity 0.15s ease; }
.site-main:focus { outline: none; }

.paper {
    background: var(--paper); color: var(--paper-ink);
    border-radius: 14px; padding: 30px; margin-bottom: 22px;
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.section-title { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.section-title-small { font-size: 18px; margin: 28px 0 12px; }
.section-more { font-size: 14px; font-weight: 600; color: #7a1ac2; }
.section-note { margin: 0 0 18px; font-size: 14px; color: #5c5c6e; }

.empty-public {
    margin: 0; padding: 30px; text-align: center;
    border: 1px dashed #cfcfda; border-radius: 10px; color: #6a6a7c;
}

.onair-strip {
    max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); margin: 22px auto; padding: 0 20px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.onair-card {
    background: var(--panel); border: 1px solid var(--line);
    border-left: 3px solid var(--violet); border-radius: 10px; padding: 16px 18px;
}
.strip-label {
    margin: 0 0 4px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted);
}
.strip-title { margin: 0; font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.strip-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }

.onair-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }

.cta {
    display: block; padding: 12px 18px; text-align: center;
    border-radius: 8px; text-decoration: none; font-weight: 650; font-size: 14px;
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.cta:hover { border-color: var(--violet); }
.cta-primary { background: var(--violet); border-color: var(--violet); color: #fff; }
.cta-primary:hover { background: #8a1dd2; }

.live-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--err); box-shadow: 0 0 9px rgba(255, 77, 109, 0.85);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.dot { margin: 0 5px; }

.intro-block > *:first-child { margin-top: 0; }
.intro-block > *:last-child { margin-bottom: 0; }

/* Neuigkeiten – redaktionelle Liste statt Kartenraster */

.news-list { display: flex; flex-direction: column; }

.news-list-item {
    display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px;
    align-items: start; padding: 25px 0; border-bottom: 1px solid #dedee8;
}
.news-list-item:first-child { padding-top: 4px; }
.news-list-item:last-child { padding-bottom: 4px; border-bottom: 0; }
.news-list-item-no-image { grid-template-columns: minmax(0, 1fr); }

/* Hervorgehobene Meldungen bleiben Teil der Liste, bekommen aber einen dezenten redaktionellen Akzent. */
.news-list-item.is-featured {
    position: relative;
    margin: 8px -12px 0;
    padding: 20px 12px 22px 17px;
    border-bottom-color: rgba(155, 38, 230, 0.16);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(155, 38, 230, 0.075) 0%, rgba(155, 38, 230, 0.025) 58%, rgba(155, 38, 230, 0) 100%);
}
.news-list-item.is-featured::before {
    content: "";
    position: absolute;
    left: 0; top: 18px; bottom: 18px;
    width: 3px;
    border-radius: 999px;
    background: #9b26e6;
    box-shadow: 0 0 12px rgba(155, 38, 230, 0.18);
}
.news-featured-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px;
    border: 1px solid rgba(155, 38, 230, 0.18);
    border-radius: 999px;
    background: rgba(155, 38, 230, 0.075);
    color: #7a1ac2;
    font-size: 9px; font-weight: 800; line-height: 1;
    letter-spacing: 0.09em;
}
.news-featured-badge::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #9b26e6;
}

.news-list-image {
    display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 10px; background: #e8e8f0;
}
.news-list-image img {
    width: 100%; height: 100%; display: block; object-fit: cover;
    transition: transform 0.2s ease;
}
.news-list-image:hover img { transform: scale(1.02); }
.news-list-content { min-width: 0; padding-top: 1px; }

.news-list-kicker {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    margin: 0 0 6px; color: #7a1ac2; font-size: 10.5px; font-weight: 750;
    text-transform: uppercase; letter-spacing: 0.13em;
}
.news-list-separator { color: #a4a4b3; }
.news-list-title { margin: 0 0 8px; font-size: 21px; line-height: 1.28; letter-spacing: -0.015em; }
.news-list-title a { color: var(--paper-ink); text-decoration: none; }
.news-list-title a:hover { color: #7a1ac2; }
.news-list-teaser { margin: 0 0 10px; max-width: 720px; font-size: 14.5px; line-height: 1.55; color: #505061; }
.news-list-author { margin: 0; color: #808093; font-size: 12.5px; }
.news-list-more {
    display: inline-block; margin-top: 9px; color: #7a1ac2;
    font-size: 13px; font-weight: 700; text-decoration: none;
}
.news-list-more:hover { color: #5d118f; }

/* Wird auf der eigentlichen Beitragsseite weiterhin für die Kategorie genutzt. */
.card-category {
    margin: 0 0 6px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em; color: #7a1ac2;
}

@media (max-width: 860px) {
    .news-list-item { grid-template-columns: 230px minmax(0, 1fr); gap: 20px; }
    .news-list-item-no-image { grid-template-columns: minmax(0, 1fr); }
    .news-list-title { font-size: 19px; }
}

@media (max-width: 680px) {
    .news-list-item,
    .news-list-item-no-image { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 22px 0; }
    .news-list-item.is-featured { margin: 6px -6px 0; padding: 18px 10px 20px 14px; }
    .news-list-item.is-featured::before { top: 15px; bottom: 15px; }
    .news-list-image { aspect-ratio: 16 / 8; max-height: 230px; }
    .news-list-title { font-size: 18px; }

    .article-head { margin-bottom: 18px; }
    .article-lead { font-size: 15.5px; }
    .article-cover-inline {
        float: none; width: 290px; max-width: 100%;
        margin: 0 0 18px;
    }
}

.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.chip {
    display: block; padding: 6px 14px; border-radius: 20px;
    border: 1px solid #d8d8e6; color: #4c4c5c; text-decoration: none; font-size: 13.5px;
}
.chip:hover { border-color: var(--violet); color: #7a1ac2; }
.chip.is-active { background: var(--violet); border-color: var(--violet); color: #fff; }

.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.pager-link {
    padding: 9px 18px; border-radius: 8px; text-decoration: none;
    border: 1px solid #d8d8e6; color: #4c4c5c; font-size: 14px;
}
.pager-link:hover { border-color: var(--violet); color: #7a1ac2; }
.pager-state { font-size: 13.5px; color: #74748a; }

/* Beitrag */

.breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; font-size: 13px; color: #74748a; }
.breadcrumb a { color: #7a1ac2; }

.article-head { max-width: 900px; margin-bottom: 22px; }
.article-title { margin: 0 0 8px; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; }
.article-meta { margin: 0 0 14px; font-size: 13.5px; color: #74748a; }
.article-lead {
    max-width: 880px; margin: 0; color: #505061;
    font-size: 17px; line-height: 1.65;
}
.article-cover { height: auto; border-radius: 10px; display: block; object-fit: cover; }
.article-cover-inline {
    float: left; width: 290px; max-width: 100%; aspect-ratio: 16 / 9;
    margin: 4px 28px 18px 0;
}
.article-body-flow::after { content: ''; display: block; clear: both; }

.article-body { font-size: 16.5px; line-height: 1.75; }
.article-body p { margin: 0 0 1.1em; }
.article-body h2 { font-size: 22px; margin: 1.6em 0 0.5em; }
.article-body h3 { font-size: 18px; margin: 1.4em 0 0.4em; }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.article-body li { margin-bottom: 0.4em; }
.article-body a { color: #7a1ac2; }
.article-body img { max-width: 100%; height: auto; border-radius: 9px; }
.article-body figure { margin: 1.6em 0; }
.article-body figcaption { font-size: 13.5px; color: #74748a; margin-top: 6px; }
.article-body blockquote {
    margin: 1.5em 0; padding: 4px 0 4px 18px;
    border-left: 3px solid var(--violet); color: #4c4c5c; font-style: italic;
}
.article-body pre {
    background: #ecebf3; padding: 14px; border-radius: 8px; overflow-x: auto; font-size: 14px;
}

/* Sendeplan – Hybrid Cards (Etappe 8a) */

.schedule-paper { overflow: hidden; }
.schedule-head { align-items: flex-start; }
.schedule-note { margin: 6px 0 0; }

.plan { display: grid; gap: 22px; margin-top: 24px; }

.plan-day { min-width: 0; }
.plan-daytitle {
    margin: 0 0 12px; padding: 0 0 10px;
    border-bottom: 1px solid #dddde7;
    display: flex; align-items: baseline; gap: 10px;
    font-size: 15px; color: #24242d;
}
.plan-day.is-today .plan-daytitle { border-bottom-color: rgba(155, 38, 230, 0.34); }
.plan-dayname { font-weight: 750; }
.plan-daydate { color: #74748a; font-size: 13.5px; font-weight: 400; }
.plan-todaymark {
    margin-left: auto; padding: 2px 9px; border-radius: 20px;
    background: var(--violet); color: #fff; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
}

.plan-empty {
    margin: 0; padding: 12px 14px;
    border: 1px dashed #d8d8e3; border-radius: 9px;
    color: #868696; background: #fafafd; font-size: 13.5px;
}

.plan-list { display: flex; flex-direction: column; gap: 12px; }

.plan-slot {
    display: flex; align-items: stretch; gap: 22px;
    padding: 12px;
    border: 1px solid #2e2e39; border-radius: 13px;
    background: #1c1c24; color: #f6f6fa;
    box-shadow: 0 5px 16px rgba(25, 22, 34, 0.12);
    overflow: hidden;
}
.plan-slot.is-live {
    border-color: rgba(255, 77, 109, 0.44);
    box-shadow: inset 3px 0 var(--err), 0 5px 16px rgba(25, 22, 34, 0.12);
}
.plan-slot.is-next { border-color: rgba(155, 38, 230, 0.42); }

.plan-art {
    width: 285px; max-width: 42%; flex: 0 0 285px;
    aspect-ratio: 3 / 2; overflow: hidden;
    border-radius: 9px; background: #121218;
}
.plan-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-art-empty {
    display: grid; place-items: center; padding: 18px;
    background:
        radial-gradient(circle at 18% 25%, rgba(193, 92, 255, 0.34), transparent 22%),
        linear-gradient(135deg, #17131d 0%, #2b1438 52%, #121218 100%);
}
.plan-art-brand { text-align: center; min-width: 0; }
.plan-art-brand > span {
    display: block; color: #fff; font-size: 20px; font-weight: 900;
    letter-spacing: -0.04em;
}
.plan-art-brand > span strong { color: var(--violet-hi); }
.plan-art-brand small {
    display: block; margin-top: 8px; color: #b6b6c4;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; overflow-wrap: anywhere;
}

.plan-copy {
    min-width: 0; flex: 1;
    padding: 9px 14px 9px 0;
    display: flex; flex-direction: column; justify-content: center;
}
.plan-time {
    margin: 0; color: var(--violet-hi);
    font-size: 12.5px; font-weight: 800; letter-spacing: 0.035em;
}
.plan-plus {
    display: inline-block; margin-left: 4px; padding: 0 5px;
    border-radius: 3px; background: rgba(155, 38, 230, 0.18);
    color: #d592ff; font-size: 10.5px;
}
.plan-show {
    margin: 4px 0 7px; color: #fff;
    font-size: 20px; line-height: 1.15; font-weight: 820;
    letter-spacing: -0.02em;
}
.plan-dj { margin: 0; color: #ededf3; font-size: 13.5px; }
.plan-dj a { color: #d18aff; text-decoration: none; }
.plan-dj a:hover { text-decoration: underline; }
.plan-genre { margin: 3px 0 0; color: #a4a4b3; font-size: 12px; }
.plan-text {
    margin: 9px 0 0; max-width: 560px;
    color: #c2c2cd; font-size: 13px; line-height: 1.55;
}
.plan-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.plan-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 20px;
    font-size: 9.5px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em;
    background: rgba(155, 38, 230, 0.16); color: #cf78ff;
}
.plan-badge .live-dot { width: 6px; height: 6px; box-shadow: none; }
.plan-badge-live { background: #e93a4f; color: #fff; }
.plan-badge-next { background: rgba(155, 38, 230, 0.2); color: #d897ff; }
.plan-badge-special { background: rgba(255, 176, 32, 0.13); color: #ffc65e; }

.week-switch { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Team */

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }

.member { text-align: center; }
.member-link { display: block; text-decoration: none; color: var(--paper-ink); }

.member-photo {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    display: block; margin: 0 auto 12px; border: 3px solid #ece0fb;
}
.member-photo-empty {
    display: grid; place-items: center;
    background: #ece0fb; color: #7a1ac2; font-size: 44px; font-weight: 800; text-transform: uppercase;
}
.member-name { margin: 0; font-size: 17px; }
.member-link:hover .member-name { color: #7a1ac2; }
.member-role { margin: 3px 0 8px; font-size: 12.5px; font-weight: 700; color: #7a1ac2; text-transform: uppercase; letter-spacing: 0.1em; }
.member-bio { margin: 0 0 6px; font-size: 14px; color: #4c4c5c; }
.member-genres { margin: 0; font-size: 12.5px; color: #74748a; }

.team-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; }
.team-chip {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 108px; text-decoration: none; color: var(--paper-ink);
}
.team-chip img, .team-chip-initial {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block;
}
.team-chip-initial {
    display: grid; place-items: center;
    background: #ece0fb; color: #7a1ac2; font-size: 22px; font-weight: 800; text-transform: uppercase;
}
.team-chip-name { font-size: 13.5px; font-weight: 650; text-align: center; }
.team-chip-role { font-size: 11px; color: #74748a; text-align: center; }

/* Profil */

.profile-head { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 24px; }
.profile-photo {
    width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
    flex: none; border: 3px solid #ece0fb;
}
.profile-photo-empty {
    display: grid; place-items: center;
    background: #ece0fb; color: #7a1ac2; font-size: 52px; font-weight: 800; text-transform: uppercase;
}
.profile-name { margin: 0; font-size: 28px; letter-spacing: -0.02em; }
.profile-role { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: #7a1ac2; text-transform: uppercase; letter-spacing: 0.1em; }
.profile-genres { margin: 0 0 10px; font-size: 14px; color: #4c4c5c; }
.profile-bio { font-size: 16px; line-height: 1.7; }

.profile-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.profile-links a {
    display: block; padding: 6px 14px; border-radius: 20px;
    border: 1px solid #d8d8e6; color: #7a1ac2; text-decoration: none; font-size: 13.5px;
}
.profile-links a:hover { border-color: var(--violet); }

.show-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.show-list li { padding: 11px 14px; background: #f7f6fb; border-radius: 8px; font-size: 14.5px; }
.show-genre { color: #74748a; margin-left: 8px; font-size: 13px; }

/* Fehlerseite */

.error-public { text-align: center; }
.error-number { margin: 0; font-size: 68px; font-weight: 800; line-height: 1; color: var(--violet); letter-spacing: -0.04em; }
.error-public-text { margin: 10px 0 24px; color: #4c4c5c; font-size: 16px; }
.error-public-detail {
    text-align: left; padding: 14px; background: #ecebf3;
    border-radius: 8px; overflow-x: auto; font-size: 12.5px; margin-bottom: 22px;
}
.error-public-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.error-public-actions .cta { display: inline-block; }

/* Fuß */

.footer-inner {
    max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px;
    text-align: left; padding: 0 20px;
}
.footer-brand { min-width: 0; }
.footer-heading {
    margin: 0 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--text);
}
.footer-list, .footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.footer-list a, .footer-social a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.footer-list a:hover, .footer-social a:hover { color: var(--violet-hi); }
.footer-social { flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

.footer-claim { text-align: left; }
.footer-note { max-width: calc(var(--inhalt) + 2 * var(--seitenrand)); margin: 30px auto 0; padding: 0 20px; font-size: 12.5px; color: var(--muted); }

/* Kleine Bildschirme */

@media (max-width: 860px) {
    .mainnav-toggle { display: flex; }
    .mainnav-list { display: none; flex-direction: column; padding: 0 20px 14px; }
    .mainnav-list.is-open { display: flex; }
    .mainnav-link { padding: 12px 14px; border-radius: 7px; }
    .mainnav-link.is-active { border-radius: 7px; }

    .player-inner { gap: 14px; }
    .player-meta { order: 3; flex-basis: 100%; }
    .player-volume { display: none; }

    /* Sendegrafik und Beschreibung stapeln sich mobil. */
    .schedule-head { flex-direction: column; gap: 14px; }
    .week-switch { justify-content: flex-start; }
    .plan-slot { flex-direction: column; gap: 0; }
    .plan-art { width: 100%; max-width: none; flex-basis: auto; }
    .plan-copy { padding: 14px 8px 8px; }
    .paper { padding: 22px 18px; }
    .site-main { padding: 0 14px 50px; }
    .article-title { font-size: 24px; }
}

.onair-hint {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 0 0 20px; padding: 12px 16px;
    background: #f0e9fb; border-radius: 9px; font-size: 14.5px; color: #3d2b52;
}
.test-hint {
    margin: 0 0 18px; padding: 11px 15px;
    background: #fdf3dd; border: 1px solid #ecd9a8; border-radius: 9px;
    font-size: 14px; color: #6b4e00;
}
.closed-links { margin: 12px 0 0; }
.closed-links a { color: #7a1ac2; }
.link-alt { align-self: center; font-size: 14px; color: #7a1ac2; }
.form-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Flaeche unterhalb des Players

   Glatt gehalten. Der violette Schimmer laeuft vom Player nach unten aus
   und setzt den Inhaltsbereich vom Kopfbereich ab, ohne eine harte Kante
   zu ziehen.
   --------------------------------------------------------------- */

.page-body {
    position: relative;
    background-color: var(--ink);

    /* Die Kachel wird einmalig serverseitig erzeugt, siehe
       bin/generate-noise.php. Sie kennt genau zwei Toene: den Grundton der
       Seite und einen einzigen, dezent helleren Ton fuer die Koernung.

       Sie ist 96 Pixel gross und wird auf 192 Pixel gestreckt, dadurch ist
       jedes Korn ein Block aus vier Bildpunkten. Ohne image-rendering
       glaettet der Browser beim Strecken und aus dem Korn wird
       Weichzeichnung. */
    background-image: url('../img/noise.png');
    background-repeat: repeat;
    background-size: 192px 192px;
    image-rendering: pixelated;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    overflow: hidden;
}

/* Schimmer von oben, breit und weich auslaufend. */
.page-body::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 340px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(155, 38, 230, 0.20), transparent 70%),
        linear-gradient(180deg, rgba(155, 38, 230, 0.10), transparent);
    pointer-events: none;
}

/* Ein zweiter, sehr schwacher Anklang am unteren Ende, damit die Flaeche
   nicht ins Nichts ausblendet. */
.page-body::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 200px;
    background: linear-gradient(0deg, rgba(155, 38, 230, 0.07), transparent);
    pointer-events: none;
}

.page-body > * { position: relative; z-index: 1; }

/* Die hellen Inhaltsflaechen heben sich mit einem weichen Schatten ab. */
.paper, .panel-public {
    box-shadow: 0 2px 22px rgba(0, 0, 0, 0.32);
}

/* Kopfbereich und Fuss bleiben glatte Flaechen. */
.site-footer { background: var(--ink-2); }

/* ---------------------------------------------------------------
   Anmeldebereich im Kopf

   Angelehnt an die historische Seite: Begruessung, kurzer Hinweis,
   zwei Felder nebeneinander mit der Anmeldetaste, darunter die beiden
   farbigen Schaltflaechen.
   --------------------------------------------------------------- */

.konto {
    width: 100%; max-width: 340px;
    text-align: left;
}

.konto-gruss {
    margin: 0 0 6px; font-size: 14.5px; font-weight: 650; color: var(--text);
}

.konto-text {
    margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}

.konto-felder { display: flex; gap: 6px; flex-wrap: wrap; }

.konto-felder input {
    flex: 1 1 110px; min-width: 0;
    padding: 8px 11px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
    color: var(--text); font: inherit; font-size: 13px;
}
.konto-felder input:focus {
    outline: none; border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-dim);
}
.konto-felder input::placeholder { color: var(--muted); }

.konto-btn {
    display: inline-block; padding: 8px 16px;
    border: 0; border-radius: 6px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 650;
    text-decoration: none; text-align: center; white-space: nowrap;
}

.konto-btn-primary { background: var(--violet); color: #fff; }
.konto-btn-primary:hover { background: #8a1dd2; }

/* Die beiden Farben stammen von der historischen Seite. */
.konto-btn-register { background: #2f7fd6; color: #fff; flex: 1; }
.konto-btn-register:hover { background: #2a71bd; }

.konto-btn-help { background: #e08a2a; color: #fff; }
.konto-btn-help:hover { background: #c9781f; }

.konto-btn-ghost {
    background: transparent; border: 1px solid var(--line); color: var(--muted);
}
.konto-btn-ghost:hover { color: var(--text); border-color: var(--violet); }

.konto-aktionen { display: flex; gap: 6px; margin-top: 8px; }
.konto-form-inline { margin: 0; }

/* Registrierungsformulare stehen fuer sich, nicht ueber die volle Breite. */
.panel-schmal { max-width: 620px; margin-left: auto; margin-right: auto; }

.token-feld {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase;
}

@media (max-width: 1099px) {
    /* Nebeneinander ist kein Platz mehr, die Spalten stapeln sich. */
    .masthead-inner { flex-direction: column; gap: 26px; padding-top: 32px; }
    .masthead-brand,
    .masthead-konto { flex: 0 0 auto; max-width: 100%; width: 100%; }
    .masthead-konto { justify-content: center; }
    .konto-gruss, .konto-text { text-align: center; }
}

.profile-equipment { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: #4c4c5c; }