:root {
    color-scheme: dark;
    font-family: system-ui, sans-serif;
    background: #111018;
    color: #f7f3ef;
}

* { box-sizing: border-box; }

body { margin: 0; background: radial-gradient(circle at 50% -15%, #45457f, #111018 55%); }

main { width: min(70rem, calc(100% - 2.5rem)); margin: 0 auto; }

.hero { max-width: 54rem; padding: clamp(5rem, 14vw, 9rem) 0 4rem; }

.eyebrow {
    margin: 0;
    color: #ffdf5d;
    font-weight: 700;
    letter-spacing: .2em;
}

h1 { max-width: 12ch; font-size: clamp(3.4rem, 11vw, 7.2rem); line-height: .92; margin: .35em 0; letter-spacing: -.06em; }

h2 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.045em; line-height: 1; }

.intro { max-width: 34rem; font-size: clamp(1.25rem, 3vw, 1.75rem); }

.hint { color: #c8c5d4; }

.topics { padding: 3rem 0 5rem; }

.section-heading { margin-bottom: 2rem; }

.topic-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.topic-card { min-height: 18rem; padding: 1.7rem; border: 1px solid #565689; border-radius: 1.25rem; background: linear-gradient(145deg, #292957, #19192c); box-shadow: 0 1.5rem 3rem #0003; color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }

.topic-card:hover, .topic-card:focus-visible { border-color: #ffdf5d; transform: translateY(-.3rem); outline: none; }

.topic-card h3 { margin: .4rem 0 .8rem; font-size: 1.6rem; line-height: 1.05; }

.topic-card > span { display: block; margin-top: 2rem; color: #ffdf5d; font-size: .85rem; font-weight: 700; }
.topic-card-deadline { margin-top: .55rem !important; color: #e1deeb !important; font-weight: 600 !important; }

.topic-card-polaroid {
    display: block;
    width: 100%;
    margin: 0 0 1.2rem;
    padding: .45rem .45rem 1.15rem;
    background: #f6f2e9;
    color: #1c1c1c;
    text-align: center;
    box-shadow: .35rem .55rem 1.2rem #0008;
    transform: rotate(-1.4deg);
}
.topic-card-polaroid .polaroid-photo-wrap { margin: 0; }
.topic-card-polaroid .polaroid-caption {
    padding-top: .45rem;
    font-size: 1.1rem;
    transform: rotate(-1.8deg);
}

.topic-number { color: #ffdf5d; font-size: .72rem; font-weight: 800; letter-spacing: .15em; }

.status { padding: 2rem; border-radius: 1rem; background: #ffffff0d; }

.promise { margin: 0 -1.25rem; padding: 4rem 1.25rem 6rem; text-align: center; }

.promise p { max-width: 40rem; margin: 0 auto; color: #c8c5d4; }

.topic-detail { max-width: 50rem; padding: clamp(3rem, 8vw, 6rem) 0; }

.back-link { display: inline-block; margin-bottom: 4rem; color: #ffdf5d; font-weight: 700; text-decoration: none; }

.recording-brief, .rules { margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1.25rem; background: #ffffff0d; }

.recording-brief > p:not(.topic-number) { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }

.recording-limit { color: #ffdf5d; font-weight: 800; }
.submission-deadline {
    margin: 1rem 0 0;
    padding: .85rem 1rem;
    border: 1px solid #ffdf5d66;
    border-radius: .75rem;
    background: #ffdf5d14;
    color: #ffdf5d;
    font-weight: 800;
}
/* Instant-Film Look: warm, leicht verwaschen, ohne externe Grafik */
.polaroid-photo-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    background: #ddd;
}
.polaroid-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 42%, transparent 52%, #3a281866 100%),
        linear-gradient(180deg, #fff6e220 0%, transparent 28%, transparent 72%, #2a180c28 100%);
    mix-blend-mode: multiply;
}
.polaroid-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    filter: sepia(.28) saturate(.78) contrast(1.12) brightness(1.04) hue-rotate(-6deg);
}

.polaroid-caption {
    display: block;
    padding-top: .7rem;
    color: #14161c;
    font-family: "Nerko One", "Comic Sans MS", cursive;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.15;
    text-align: center;
    transform: rotate(-1.5deg);
}

.topic-polaroid {
    display: block;
    width: min(100%, 30rem);
    min-height: 0;
    margin: 2rem auto;
    padding: .7rem .7rem 2.2rem;
    border: 0;
    border-radius: 0;
    background: #f6f2e9;
    color: #222;
    text-align: center;
    text-decoration: none;
    box-shadow: .6rem .9rem 2rem #0007;
    transform: rotate(-1deg);
    cursor: zoom-in;
    font: inherit;
    font-weight: inherit;
}
.topic-polaroid .polaroid-caption { font-size: 1.45rem; }
.topic-polaroid:focus-visible { outline: 3px solid #ffdf5d; outline-offset: .4rem; }
.admin-preview-topic .topic-polaroid { cursor: default; }

.polaroid-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 1.25rem;
    border: 0;
    background: #0b0b14f2;
    color: #222;
    overflow: hidden;
}
.polaroid-dialog[open] {
    display: grid;
    place-items: center;
    animation: polaroid-fade-in .22s ease;
}
.polaroid-dialog::backdrop { background: transparent; }
.polaroid-dialog-frame {
    position: relative;
    width: min(86vw, calc(100dvh - 7.5rem), 34rem);
    padding: .85rem .85rem 1.8rem;
    background: #f6f2e9;
    box-shadow: 0 1.5rem 4rem #000a;
    transform: rotate(-1.2deg);
    animation: polaroid-pop-in .28s cubic-bezier(.2, .8, .2, 1);
}
.polaroid-dialog-frame .polaroid-caption {
    padding-top: .85rem;
    font-size: clamp(1.25rem, 3.8vw, 1.7rem);
}
.polaroid-dialog-close {
    position: fixed;
    top: max(.8rem, env(safe-area-inset-top));
    right: max(.8rem, env(safe-area-inset-right));
    z-index: 3;
    min-height: 2.8rem;
    min-width: 2.8rem;
    padding: 0;
    border-radius: 999px;
    background: #ffdf5d;
    color: #191923;
    font-size: 1.55rem;
    line-height: 1;
    box-shadow: 0 .4rem 1.2rem #0006;
}
html.polaroid-open,
html.polaroid-open body { overflow: hidden; overscroll-behavior: none; }

@keyframes polaroid-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes polaroid-pop-in {
    from { opacity: 0; transform: rotate(-1.2deg) scale(.92); }
    to { opacity: 1; transform: rotate(-1.2deg) scale(1); }
}

.rules li { margin: .7rem 0; color: #e1deeb; }

.studio-link { display: inline-block; margin-top: 1.2rem; color: #ffdf5d; font-weight: 800; text-decoration: none; }

body.studio-page {
    background: #07080f;
    overflow-x: hidden;
}

.studio {
    width: min(30rem, 100%);
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.studio h1 { margin-inline: auto; padding: 2rem 1.25rem 0; }
.studio .intro { margin-inline: auto; padding: 0 1.25rem; }

.studio-console {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    background: #0a0b12;
}

.studio-top {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: max(.75rem, env(safe-area-inset-top)) 1rem .5rem;
}

.studio-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .35rem 1rem;
    border: 1px solid #ffffff2e;
    border-radius: 999px;
    background: #0d0e18cc;
    color: #f7f3ef;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.studio-topic {
    margin: 0;
    max-width: 60%;
    color: #e8e5f0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: right;
    text-shadow: 0 .2rem .8rem #000a;
}

.studio-stage {
    position: relative;
    z-index: 1;
    min-height: 0;
    overflow: hidden;
}

.studio-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.studio-glow {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #07080f66 0%, transparent 28%, transparent 58%, #07080fd9 100%);
    transition: background .25s ease;
}

.studio-microphone {
    position: absolute;
    z-index: 2;
    left: 50%;
    /* höher, damit das kleinere VU darunter Luft hat */
    bottom: 26%;
    width: min(46%, 12.5rem);
    height: auto;
    max-height: 58%;
    object-fit: contain;
    transform: translateX(-50%);
    /* Schwarzer WebP-Hintergrund fällt auf der dunklen Kulisse weg. */
    mix-blend-mode: screen;
    filter: drop-shadow(0 1rem 1.6rem #000c);
    transition: filter .25s ease;
    pointer-events: none;
    user-select: none;
}

.studio-signs {
    position: absolute;
    z-index: 4;
    top: .45rem;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .55rem;
    padding: 0 1rem;
    color: #d4d2dc;
    /* ca. +20% gegenüber vorher */
    font-size: clamp(.84rem, 2.9vw, 1.02rem);
    font-weight: 900;
    letter-spacing: .08em;
    text-shadow: 0 .15rem .6rem #000a;
}
.studio-rec-lamp { justify-self: start; opacity: .55; }
.studio-rec-lamp::first-letter { color: #9e3945; }
.studio-timer { justify-self: end; font-variant-numeric: tabular-nums; }
.studio-on-air {
    display: grid;
    /* ca. +20% */
    width: clamp(6.5rem, 26vw, 10.2rem);
    opacity: .28;
    filter: grayscale(1) brightness(.55);
    transition: filter .25s ease, opacity .25s ease;
}
.studio-on-air img {
    display: block;
    width: 100%;
    height: auto;
}

.studio-feedback {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: .65rem;
    width: min(94%, 22rem);
    padding: .55rem .7rem .65rem;
    border: 1px solid #ffffff28;
    border-radius: .85rem;
    background: #0c0d18d6;
    box-shadow: 0 .5rem 1.5rem #0008, inset 0 1px #ffffff14;
    backdrop-filter: blur(8px);
    transform: translateX(-50%);
}

.studio-meters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    align-items: center;
    margin: 0 0 .4rem;
}

.studio-vu,
.studio-digi {
    position: relative;
    width: 100%;
    aspect-ratio: 2702 / 2400;
}
.studio-vu-bg,
.studio-vu-overlay,
.studio-digi-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.studio-vu-bg,
.studio-digi-bg {
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
.studio-vu-overlay {
    overflow: visible;
    pointer-events: none;
}

.studio-digi-screen {
    position: absolute;
    z-index: 1;
    left: 12%;
    top: 16%;
    width: 76%;
    height: 68%;
    display: grid;
    place-items: center;
    padding: .35rem .4rem;
    background: transparent;
}
.studio-digi-readout {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #042608;
    font-family: "Courier New", Consolas, "Lucida Console", ui-monospace, monospace;
    font-size: clamp(.68rem, 2.9vw, .92rem);
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    text-shadow: none;
}
.studio-digi-readout[data-digi-mode="time"] {
    display: grid;
    justify-items: center;
    gap: .2em;
    font-size: inherit;
    line-height: 1.15;
    color: #031c06;
}
.studio-digi-label {
    display: block;
    font-size: clamp(.58rem, 2.4vw, .72rem);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.15;
    color: #042608;
}
.studio-digi-value {
    display: block;
    font-size: clamp(1.26rem, 6.24vw, 1.74rem);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    color: #031c06;
}
.studio-digi-readout[data-digi-mode="play"] {
    display: grid;
    justify-items: center;
    gap: .12em;
    font-size: clamp(.72rem, 3vw, .92rem);
    line-height: 1.1;
    color: #031c06;
}
.studio-digi-play-line {
    display: block;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.studio-dock {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    gap: .35rem;
    padding: .85rem .7rem max(1rem, env(safe-area-inset-bottom));
    border-top: 1px solid #ffffff18;
    background: #0b0c14f2;
    backdrop-filter: blur(10px);
}

.studio-control {
    display: grid;
    place-items: center;
    align-content: center;
    width: clamp(3.5rem, 15vw, 4.1rem);
    height: clamp(3.5rem, 15vw, 4.1rem);
    min-height: 0;
    padding: .25rem;
    border: 1px solid #ffffff28;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #3a3c52, #171826 62%);
    color: #f7f3ef;
    box-shadow:
        0 .35rem .7rem #0009,
        inset 0 .1rem .2rem #ffffff22,
        inset 0 -.25rem .4rem #0008;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    text-align: center;
    line-height: 1.05;
}
.studio-control-icon {
    display: block;
    margin: 0;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 700;
    color: #e4e5ec;
}
.studio-control-label {
    display: block;
    margin-top: .08rem;
    font-size: .5rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #c9cad4;
    opacity: .95;
}
.studio-dock .record-button .studio-control-icon,
.studio-dock .record-button .studio-control-label {
    color: #f3f4f8;
}
.studio-control:not(:disabled):active {
    transform: translateY(.12rem) scale(.94);
    box-shadow:
        0 .1rem .25rem #000a,
        inset 0 .2rem .45rem #000a;
}
.studio-dock .record-button {
    border-color: #ff7a86;
    background:
        radial-gradient(circle at 35% 30%, #ff7a86, #ff3348 68%);
    color: #fff;
    box-shadow:
        0 .35rem .8rem #ff314866,
        inset 0 .1rem .2rem #ffffff44,
        inset 0 -.25rem .4rem #0006;
}
.studio-dock .secondary-button {
    background:
        radial-gradient(circle at 35% 30%, #3a3c52, #171826 62%);
    color: #f7f3ef;
}
.studio-control-rec {
    animation: studio-rec-breathe 1.6s ease-in-out infinite;
}
.studio-console[data-recorder-state="recording"] .studio-control-rec,
.studio-console[data-recorder-state="recorded"] .studio-control-rec,
.studio-console[data-recorder-state="playing"] .studio-control-rec,
.studio-console[data-recorder-state="sent"] .studio-control-rec,
.studio-console[data-recorder-state="error"] .studio-control-rec {
    animation: none;
}

.studio-console > audio[data-recorder-audio] { display: none; }

.studio-consent {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    align-items: end;
    background: #07080fcc;
    padding: 1rem;
}
.studio-consent[hidden] { display: none !important; }
.studio-consent-panel {
    position: relative;
    max-height: min(88svh, 42rem);
    overflow: auto;
    padding: 1.25rem 1.15rem 1.4rem;
    border: 1px solid #ffffff22;
    border-radius: 1.25rem 1.25rem .9rem .9rem;
    background: linear-gradient(160deg, #1d1e30, #11121c 70%);
    text-align: left;
    box-shadow: 0 -1rem 3rem #000a;
}
.studio-consent-panel h2 {
    margin: 0 1.8rem .5rem 0;
    font-size: 1.45rem;
    letter-spacing: -.03em;
}
.studio-consent-panel .hint { margin: 0 0 1rem; }
.studio-consent-panel audio { width: 100%; margin-bottom: 1rem; }
.studio-consent-close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    min-height: 2.4rem;
    min-width: 2.4rem;
    padding: 0;
    border-radius: 999px;
    background: #ffdf5d;
    color: #191923;
    font-size: 1.35rem;
    line-height: 1;
}

.studio-console[data-recorder-state="recording"] .studio-on-air {
    opacity: 1;
    filter: none;
    animation: studio-on-air-pulse 1.4s ease-in-out infinite;
}
.studio-console[data-recorder-state="recording"] .studio-rec-lamp {
    opacity: 1;
    color: #ff6270;
    text-shadow: 0 0 .65rem #ff263b;
}
.studio-console[data-recorder-state="recording"] .studio-glow {
    background:
        radial-gradient(ellipse at 50% 58%, #ff314866, transparent 46%),
        linear-gradient(180deg, #07080f55 0%, transparent 28%, transparent 58%, #07080fd9 100%);
}
.studio-console[data-recorder-state="recording"] .studio-microphone {
    filter: drop-shadow(0 1rem 1.6rem #000c) drop-shadow(0 0 1.35rem #ff3148bb);
}
.studio-console[data-recorder-state="recording"] .studio-feedback {
    border-color: #ff657155;
    box-shadow: 0 .5rem 1.5rem #0008, 0 0 1.2rem #ff314833, inset 0 1px #ffffff14;
}
@keyframes studio-on-air-pulse { 50% { filter: brightness(1.25); } }
@keyframes studio-rec-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 .35rem .8rem #ff314866, inset 0 .1rem .2rem #ffffff44, inset 0 -.25rem .4rem #0006; }
    50% { transform: scale(1.08); box-shadow: 0 .45rem 1.1rem #ff3148aa, inset 0 .1rem .2rem #ffffff55, inset 0 -.25rem .4rem #0006; }
}

button { min-height: 3.2rem; padding: .7rem 1.15rem; border: 0; border-radius: .75rem; font: inherit; font-weight: 800; cursor: pointer; }

button:disabled { cursor: not-allowed; opacity: .48; }

.record-button { background: #ff4d5e; color: #fff; }

.secondary-button { background: #eeece6; color: #191923; }

.playback { margin-top: 2rem; }

.playback audio { width: min(100%, 30rem); }

.submission-form { display: grid; gap: 1rem; max-width: 34rem; margin: 2rem auto 0; text-align: left; }
.submission-form label:not(.check) { font-weight: 800; }
.submission-form label span { color: #c8c5d4; font-weight: 400; }
.submission-form input[type="text"], .submission-form select { width: 100%; min-height: 3rem; padding: .7rem; border: 1px solid #aaa8bd; border-radius: .6rem; background: #111018; color: inherit; font: inherit; }
.check { display: flex; gap: .7rem; align-items: flex-start; color: #e1deeb; line-height: 1.35; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: 0 0 auto; }
.field-hint { margin: -.6rem 0 0; color: #c8c5d4; font-size: .9rem; }
.submission-status { min-height: 1.5rem; margin: 0; color: #ffdf5d; font-weight: 700; }

.admin { width: min(74rem, calc(100% - 2.5rem)); margin: 0 auto; padding: 3rem 0 6rem; }
.admin-login { width: min(32rem, calc(100% - 2.5rem)); margin: max(4rem, 13vh) auto; padding: clamp(2rem, 7vw, 4rem); border: 1px solid #67679d; border-radius: 1.6rem; background: linear-gradient(145deg, #303162 0%, #1b1b32 58%, #151523 100%); box-shadow: 0 2rem 5rem #0009, inset 0 1px #ffffff18; text-align: center; }
.admin-login::before { content: '80S'; display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1.5rem; border: 2px solid #ffdf5d; border-radius: 50%; color: #ffdf5d; font-weight: 900; letter-spacing: -.08em; transform: rotate(-9deg); box-shadow: 0 0 1.8rem #ffdf5d33; }
.admin-login h1 { max-width: none; margin-bottom: .9rem; font-size: clamp(2.5rem, 10vw, 4rem); }
.admin-login .eyebrow { font-size: .7rem; }
.admin-login .admin-form { margin: 2.2rem auto 0; text-align: left; }
.admin-login .admin-form input { border-color: #7676a8; background: #0e0e19; }
.admin-login .record-button { margin-top: .5rem; box-shadow: 0 .6rem 1.5rem #ff4d5e44; }
.admin-header { display: flex; justify-content: space-between; gap: 2rem; align-items: start; padding-bottom: 2rem; border-bottom: 1px solid #565689; }
.admin-header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.admin-header a, .admin-panel a { color: #ffdf5d; font-weight: 800; }
.admin-panel { max-width: 62rem; margin: 2rem 0; padding: 1.5rem; border: 1px solid #565689; border-radius: 1rem; background: #171728cc; }
.admin-form { display: grid; gap: 1rem; max-width: 42rem; }
.admin-form label { display: grid; gap: .4rem; font-weight: 800; }
.admin-form input, .admin-form select, .admin-form textarea { width: 100%; min-height: 2.8rem; padding: .65rem; border: 1px solid #aaa8bd; border-radius: .5rem; background: #111018; color: inherit; font: inherit; }
.admin-form textarea { resize: vertical; }
.admin-panel audio { width: min(100%, 36rem); margin-bottom: 1.5rem; }
.danger-button { background: #6b2330; color: #fff; }
.admin-error, .admin-ok { padding: .8rem 1rem; border-radius: .5rem; }
.admin-error { background: #6b2330; }
.admin-ok { background: #1f4d3a; }
.admin-hint { margin: 0; color: #c8c5d4; font-size: .95rem; font-weight: 400; }
.admin-warning {
    color: #ffdf5d;
    background: #3a3110;
    border: 1px solid #7a651f;
    border-radius: .5rem;
    padding: .6rem .9rem;
    margin: 0 0 1rem;
}
.admin-hint a { color: #ffdf5d; }
.admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 42rem;
    margin-top: 1.5rem;
}
.admin-actions button { width: 100%; min-height: 3.2rem; }
.admin-image-preview {
    width: min(100%, 12rem);
    padding: .45rem .45rem 1.2rem;
    background: #f6f2e9;
    color: #1c1c1c;
    text-align: center;
    box-shadow: .3rem .45rem 1rem #0006;
    transform: rotate(-1deg);
}
.admin-image-preview .polaroid-caption {
    padding-top: .45rem;
    font-size: 1.05rem;
}
.admin-form input[type="file"] { padding: .45rem; }

.admin-edit-block {
    margin: 1.5rem 0 2.5rem;
    padding: 1.25rem;
    border: 1px solid #ffdf5d66;
    border-radius: .9rem;
    background: #221f3acc;
}
.admin-accordion { border: 1px solid #565689; border-radius: .9rem; background: #12121f; }
.admin-accordion-spaced { margin-top: 2rem; }
.admin-section-title { margin: 2rem 0 1rem; }
.admin-accordion summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.2rem;
    font-weight: 800;
    color: #ffdf5d;
}
.admin-accordion summary::-webkit-details-marker { display: none; }
.is-hidden { display: none; }
.admin-accordion summary::after {
    content: '+';
    float: right;
    color: #c8c5d4;
    font-weight: 700;
}
.admin-accordion[open] summary::after { content: '−'; }
.admin-accordion-body { padding: 0 1.2rem 1.4rem; border-top: 1px solid #565689; }

.admin-status-field { gap: .55rem; }
.admin-status-select,
.admin-status-badge {
    font-weight: 800;
    letter-spacing: .02em;
}
.admin-status-select {
    border-width: 2px !important;
    min-height: 3.1rem !important;
}
.admin-status-badge {
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: .45rem;
    border: 1px solid transparent;
    font-size: .85rem;
}
.admin-status-draft { background: #353554 !important; border-color: #8d8db8 !important; color: #d7d7ef !important; }
.admin-status-planned,
.admin-status-scheduled { background: #4a3d12 !important; border-color: #ffdf5d !important; color: #ffdf5d !important; }
.admin-status-active,
.admin-status-selected,
.admin-status-published { background: #164433 !important; border-color: #4ade80 !important; color: #8dffb5 !important; }
.admin-status-expired,
.admin-status-rejected,
.admin-status-withdrawn { background: #5a2410 !important; border-color: #ff8a4c !important; color: #ffb089 !important; }
.admin-status-archived,
.admin-status-submitted,
.admin-status-review { background: #2a2a35 !important; border-color: #8a8a9a !important; color: #c0c0cc !important; }
.admin-status-review { border-color: #7aa7ff !important; color: #9fc0ff !important; }

.admin-tags-block { margin: 1.75rem 0; }
.admin-tag-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: .8rem 0 1rem; }
.admin-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .35rem .55rem .35rem .7rem;
    border: 1px solid #7676a8;
    border-radius: 999px;
    background: #22223a;
}
.admin-tag-chip span { font-weight: 700; }
.admin-tag-chip button {
    min-height: 1.6rem;
    min-width: 1.6rem;
    padding: 0;
    border-radius: 999px;
    background: #3a3a55;
    color: #fff;
    line-height: 1;
}
.admin-tag-add { max-width: 28rem; }
.admin-filter-row { display: flex; gap: 1rem; margin-bottom: 1.2rem; }
.admin-filter-row label { display: grid; gap: .35rem; font-weight: 800; }
.admin-filter-row select {
    min-height: 2.8rem;
    padding: .55rem;
    border: 1px solid #aaa8bd;
    border-radius: .5rem;
    background: #111018;
    color: inherit;
    font: inherit;
}
.admin-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 0; }
.admin-inline-form input {
    min-height: 2.6rem;
    padding: .45rem .65rem;
    border: 1px solid #aaa8bd;
    border-radius: .5rem;
    background: #111018;
    color: inherit;
    font: inherit;
}
.admin-table-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    vertical-align: middle;
}
table th, table td { vertical-align: middle; }
.admin-preview-link { font-weight: 800; }
.admin-preview-panel .topic-card { max-width: 22rem; }
.admin-preview-grid { grid-template-columns: minmax(0, 22rem); }
.admin-preview-topic { max-width: 46rem; padding: 0; }
.admin-preview-topic h1 { max-width: none; }
.admin-markdown { color: #e1deeb; line-height: 1.45; }
.admin-markdown p { margin: .6rem 0; }
.admin-markdown ul { margin: .6rem 0; padding-left: 1.2rem; }

.admin-rank-field { gap: .55rem; }
.admin-rank-select {
    border-width: 2px !important;
    min-height: 3.1rem !important;
    font-weight: 800;
}
.admin-rank-badge {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: .2rem .45rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    font-weight: 900;
}
.admin-rank-1 { background: #164433 !important; border-color: #4ade80 !important; color: #8dffb5 !important; }
.admin-rank-2 { background: #1c3f55 !important; border-color: #7aa7ff !important; color: #9fc0ff !important; }
.admin-rank-3 { background: #4a3d12 !important; border-color: #ffdf5d !important; color: #ffdf5d !important; }
.admin-rank-4 { background: #5a2410 !important; border-color: #ff8a4c !important; color: #ffb089 !important; }
.admin-rank-5 { background: #353554 !important; border-color: #8d8db8 !important; color: #d7d7ef !important; }
.admin-sort-link { color: #c8c5d4; text-decoration: none; font-weight: 800; }
.admin-sort-link.is-active { color: #ffdf5d; text-decoration: underline; }

.admin-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.2rem;
}
.admin-calendar-nav a { color: #ffdf5d; font-weight: 900; text-decoration: none; font-size: 1.4rem; }
.admin-calendar-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; color: #c8c5d4; font-size: .9rem; }
.admin-calendar-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.admin-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .35rem;
}
.admin-calendar-weekday {
    text-align: center;
    color: #ffdf5d;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.admin-calendar-day {
    min-height: 4.2rem;
    padding: .45rem;
    border: 1px solid #565689;
    border-radius: .55rem;
    background: #12121f;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.admin-calendar-day.is-empty { border-color: transparent; background: transparent; }
.admin-calendar-day.has-items { border-color: #ffdf5d66; }
.admin-calendar-day.is-selected { border-color: #ffdf5d; box-shadow: inset 0 0 0 1px #ffdf5d; }
.admin-calendar-day strong { font-size: .95rem; }
.admin-calendar-markers { display: flex; gap: .25rem; min-height: .7rem; }
.dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #8d8db8;
}
.dot.cal-sendetermin,
.dot.sendetermin { background: #4ade80; }
.dot.cal-einsendeschluss,
.dot.einsendeschluss { background: #ff8a4c; }
/* Klasse bewusst ohne „info“ – Adblocker blenden .info oft aus. */
.dot.cal-hinweis { background: #ffdf5d; }
.admin-calendar-day.is-today { background: #1a1a2e; }
.admin-calendar-note {
    margin: 1rem 0;
    padding: 1rem;
    border-left: 4px solid #ffdf5d;
    background: #ffffff0d;
    border-radius: .4rem;
}
.admin-calendar-note.marker-cal-hinweis { border-left-color: #ffdf5d; }
.admin-calendar-note.marker-cal-sendetermin { border-left-color: #4ade80; }
.admin-calendar-note.marker-cal-einsendeschluss { border-left-color: #ff8a4c; }
.admin-calendar-edit { margin: .6rem 0 .4rem; }
.admin-calendar-edit .admin-table-actions { margin-top: .5rem; }
.admin-cal-hinweis {
    background: #4a3d12 !important;
    border-color: #ffdf5d !important;
    color: #ffdf5d !important;
}

.admin-stats-wide { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.admin-metric-row { margin: 1.2rem 0 1.6rem; }
.admin-metric-label { margin: 0 0 .45rem; font-weight: 800; }
.admin-metric-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8px, 1fr));
    gap: 2px;
    align-items: end;
    height: 80px;
    padding: .4rem;
    border: 1px solid #565689;
    border-radius: .6rem;
    background: #12121f;
}
.admin-metric-bar { display: flex; align-items: end; height: 100%; }
.admin-metric-bar span {
    display: block;
    width: 100%;
    min-height: 2px;
    height: 0%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #ffdf5d, #ff4d5e);
}
/* CSP-freundliche Balkenhoehen statt inline style="height:..." (in 5%-Schritten) */
.admin-metric-bar span.bar-h-0 { height: 0%; }
.admin-metric-bar span.bar-h-5 { height: 5%; }
.admin-metric-bar span.bar-h-10 { height: 10%; }
.admin-metric-bar span.bar-h-15 { height: 15%; }
.admin-metric-bar span.bar-h-20 { height: 20%; }
.admin-metric-bar span.bar-h-25 { height: 25%; }
.admin-metric-bar span.bar-h-30 { height: 30%; }
.admin-metric-bar span.bar-h-35 { height: 35%; }
.admin-metric-bar span.bar-h-40 { height: 40%; }
.admin-metric-bar span.bar-h-45 { height: 45%; }
.admin-metric-bar span.bar-h-50 { height: 50%; }
.admin-metric-bar span.bar-h-55 { height: 55%; }
.admin-metric-bar span.bar-h-60 { height: 60%; }
.admin-metric-bar span.bar-h-65 { height: 65%; }
.admin-metric-bar span.bar-h-70 { height: 70%; }
.admin-metric-bar span.bar-h-75 { height: 75%; }
.admin-metric-bar span.bar-h-80 { height: 80%; }
.admin-metric-bar span.bar-h-85 { height: 85%; }
.admin-metric-bar span.bar-h-90 { height: 90%; }
.admin-metric-bar span.bar-h-95 { height: 95%; }
.admin-metric-bar span.bar-h-100 { height: 100%; }

@media (max-width: 700px) {
    .admin-calendar-day { min-height: 3.2rem; padding: .3rem; }
    .admin-calendar-day strong { font-size: .8rem; }
}
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.admin-stats div { padding: 1.5rem; border-radius: 1rem; background: #292957; }
.admin-stats strong, .admin-stats span { display: block; }
.admin-stats strong { color: #ffdf5d; font-size: 2.5rem; }
table { width: 100%; border-collapse: collapse; } th, td { padding: .8rem; border-bottom: 1px solid #565689; text-align: left; }

@media (max-width: 430px) {
    .studio { width: 100%; }
    .studio-signs { gap: .3rem; font-size: .8rem; }
    .studio-on-air { width: clamp(6rem, 28vw, 8.4rem); }
    .studio-dock { gap: .2rem; padding-inline: .45rem; }
    .studio-control { width: 3.45rem; height: 3.45rem; }
    .studio-control-icon { font-size: 1.55rem; }
    .studio-control-label { font-size: .46rem; }
    .studio-microphone { width: min(50%, 11.5rem); bottom: 24%; max-height: 54%; }
    .studio-feedback { width: min(94%, 20rem); padding: .5rem .55rem; }
    .studio-meters { gap: .35rem; }
    .studio-digi-readout { font-size: .66rem; }
    .studio-digi-label { font-size: .55rem; }
    .studio-digi-value { font-size: 1.26rem; }
    .studio-digi-readout[data-digi-mode="play"] { font-size: .82rem; }
}

@media (min-width: 701px) {
    .studio {
        display: grid;
        place-items: center;
        width: min(26rem, 100%);
        min-height: 100svh;
        min-height: 100dvh;
        padding: 1.25rem 0;
    }
    .studio-console {
        width: 100%;
        height: min(90dvh, 52rem);
        min-height: min(90dvh, 52rem);
        border: 1px solid #ffffff1f;
        border-radius: 1.4rem;
        box-shadow: 0 1.5rem 4rem #000a;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-console *,
    .studio-console *::before,
    .studio-console *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 700px) {
    .topic-grid { grid-template-columns: 1fr; }
    .topic-card { min-height: auto; }
    .admin-header { flex-direction: column; }
    .admin-stats { grid-template-columns: 1fr; }
    .admin-actions { grid-template-columns: 1fr; }
    table { font-size: .85rem; }
}