/*
Theme Name: KRA 2 (2026)
Description: Modernized version of the KRA 2 theme for the hospital radio Attendorn (Krankenhausrundfunk Attendorn).
Version: 2.5.0
Author: Daniel Müller
Text Domain: kra2

This theme was built exclusively for the website of the Krankenhausrundfunk Attendorn.
*/

/* design tokens
---------------------------------*/

:root {
    --color-page-bg: #deecee;
    --color-accent: #ccff33;
    --color-muted-bg: #ddd;
    --color-link: #0e6f99;
    --color-text: #444;
    --color-heading: #000;
    --color-shadow: #1394cd;
    /* only for the lamps "Live On Air" (broadcast) and "Stream" (playing) */
    --color-onair: #ff4438;
    --color-stream: #ffb21a;
    /* unlit LED segments and the "On Air" lamp off air */
    --color-led-off: #1f2c31;
    --font-base: Helvetica, Verdana, sans-serif;
    /* LED display face for times, dates and labels (fonts/OFL.txt) */
    --font-led: "Share Tech Mono", ui-monospace, "DejaVu Sans Mono", monospace;
    /* dot-matrix face for the title in the player display (fonts/OFL-Doto.txt) */
    --font-dot: "Doto", var(--font-led);
    --color-ink: #10181a;
    --shadow-hard: 5px 5px 0 var(--color-shadow);
    /* short shadow for keys, page numbers and other small parts */
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    /* content width; containers add the gutter on both sides */
    --content-width: 980px;
    --gutter: 20px;
}

@font-face {
    font-family: "Doto";
    src: url(fonts/doto-700-latin.woff2) format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Share Tech Mono";
    src: url(fonts/share-tech-mono-latin.woff2) format("woff2");
    font-display: swap;
}

/* reset
---------------------------------*/

* {
    padding: 0;
    margin: 0;
}

img, iframe {
    border: 0;
}

/* global presets
---------------------------------*/

/* below a short page the back panel of the footer continues (#47) */
html {
    background-color: var(--color-ink);
}

body {
    background-color: #fff;
    font: 100% var(--font-base);
    color: var(--color-text);
}

p{
    font: 1em/1.5em Helvetica, Verdana, sans-serif;
    margin:1em 0;
    letter-spacing: normal;
}

h2{
    font: 1.6em Helvetica, Verdana, sans-serif;
    line-height: 1.6em;
    font-weight:bold;
    letter-spacing:0.02em;
    margin:1em 0 0.7em 0;
}

h2 span{
    padding:7px 7px 5px 7px;
    background:#ccff33;
}

h3{
    font: 1.4em Helvetica, Verdana, sans-serif;
    font-weight:bold;
    margin:1em 0 0.7em 0;
}

h3 span,
h3 a:link,
h3 a:hover,
h3 a:visited{
    padding:7px 7px 5px 7px;
    background:#ddd;
    text-decoration: none;
    color: #000;
}

h4{
    font: 1.2em Helvetica, Verdana, sans-serif;
    margin:1em 0 0.8em 0;
    padding-bottom:0.2em;
    border-bottom: 1px solid #ddd;
}

ul{
    margin:0 0 1em 20px;
    list-style-type:square;
}

ul li{
    color:#444;
}

/* links ------------------------*/

/* visible keyboard focus everywhere */
:focus-visible {
    outline: 3px solid var(--color-link);
    outline-offset: 2px;
}

a:link {
    color: var(--color-link);
    text-decoration: none;
}

a:visited {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

/* images ------------------------*/

img, a img {
    border: 0;
}

/* visually hidden, still read by screen readers */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* main only takes focus as the skip link target; it is not a control */
.site-main[tabindex="-1"]:focus {
    outline: 0;
}

/* skip link: hidden until it gets keyboard focus */
.skip-link:focus {
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    padding: .75em 1em;
    clip-path: none;
    background: #fff;
    color: var(--color-heading);
    font-weight: bold;
}

/* alignment ---------------------*/

.left {
    float: left;
}

.right {
    float: right;
}

.clear{
    clear: both;
}

/* layout
---------------------------------*/

/* no frame: header and navigation run over the full width, every block
   keeps its content to the same centred column */
.site-header__inner,
.main-nav__inner,
.site-body,
.site-extras,
.site-footer__bottom {
    box-sizing: border-box;
    max-width: calc(var(--content-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.site-main {
    display: flow-root;
    overflow-wrap: break-word;
    min-width: 0;
    padding-bottom: 1em;
}

.site-sidebar {
    min-width: 0;
    overflow-wrap: break-word;
    padding-bottom: 5px;
}

/* single posts and pages: the three columns of the card lists (same gap),
   reading column over two of them, the sidebar in the third, so content
   and sidebar line up with the cards and the tiles below and elsewhere */
@media (min-width: 50rem) {
    .has-sidebar .site-body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 24px;
    }

    .has-sidebar .site-main {
        grid-column: 1 / span 2;
    }

    .has-sidebar .site-sidebar {
        grid-column: 3;
    }
}

/* template "Seite mit Kategorieartikeln" (Studio A): title and text next to
   the sidebar, the post list below both over the full width. The list stays
   inside <main>; main spans all three columns and passes them on (subgrid) */
@media (min-width: 50rem) {
    .page-template-page-width-category .site-body {
        grid-template-rows: auto auto;
    }

    .page-template-page-width-category .site-main {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 1 / span 2;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

    .page-template-page-width-category .page-head {
        grid-column: 1 / span 2;
        grid-row: 1;
        min-width: 0;
    }

    .page-template-page-width-category .page_articles {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
    }

    .page-template-page-width-category .site-sidebar {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 37.49rem) {
    :root {
        --gutter: 12px;
    }
}

/* header
---------------------------------*/

/* a black display like the On-Air tile: logo, name and the level meter of an
   analogue audio device (template-parts/level-meter.php) */
.site-header {
    background: var(--color-ink);
    color: #dce8ea;
}

.site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 24px;
    padding-block: 18px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.site-brand:link,
.site-brand:visited,
.site-brand:hover {
    text-decoration: none;
}

.site-header :focus-visible {
    outline-color: #fff;
}

.site-logo {
    flex: none;
    width: 78px;
    height: 78px;
    padding: 3px;
    border-radius: 50%;
    background: #fff;
}

.site-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.site-title__name {
    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: bold;
    color: #fff;
}

.site-title__sub {
    font: .8rem/1.2 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.level-meter {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.onair {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 16px;
    margin: 0;
    font: .8rem/1.2 var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* two lamps: unlit like the LED segments; "Live On Air" red during the
   broadcast, "Stream" amber while the stream is on at laut.fm (plain lamps,
   no glow); the dot sits on the middle of the capitals, not of the line box */
.onair__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-led-off);
}

.onair__lamp {
    position: relative;
    top: -.13em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}

.is-live .onair__item--live {
    color: var(--color-onair);
}

.is-streaming .onair__item--stream {
    color: var(--color-stream);
}

.is-live .onair__item--live .onair__lamp {
    box-shadow: 0 0 0 2px rgba(255, 68, 56, .25);
}

.is-streaming .onair__item--stream .onair__lamp {
    box-shadow: 0 0 0 2px rgba(255, 178, 26, .25);
}

.level-meter__towers {
    display: flex;
    gap: 5px;
    height: 70px;
}

/* a tower: 10 segments from the bottom; the top one lights white, the peak
   hold light blue */
.tower {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    width: 14px;
}

.seg {
    flex: 1;
    background: var(--color-led-off);
}

.seg.lit {
    background: var(--color-accent);
}

.seg:last-child.lit {
    background: #fff;
}

.seg.peak {
    background: #8fd1ee;
}

/* name and meter stacked as soon as they would crowd each other */
@media (max-width: 49.99rem) {
    .site-header__inner {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 14px;
    }

    .level-meter {
        justify-items: stretch;
    }

    .onair {
        justify-content: flex-start;
    }

    .level-meter__towers {
        height: 44px;
        gap: 4px;
    }

    .tower {
        flex: 1;
        width: auto;
    }
}

@media (max-width: 37.49rem) {
    .site-logo {
        width: 58px;
        height: 58px;
    }

    .site-title__name {
        font-size: 1.15rem;
    }
}

/* navi
---------------------------------*/

/* the channel dial of a tuner (#47): "CH 01" in LED above every item, the
   current channel on the lime line, hover blue. Items never wrap; when they
   don't fit in one row, script/main-nav.js collapses the menu (.is-collapsed)
   into the key "Menü" plus the current channel, and the key opens all
   channels in an ink panel. Without JavaScript the items wrap as a whole. */
.main-nav {
    position: relative;
    z-index: 10;
    border-bottom: 2px solid var(--color-ink);
    background: #fff;
}

.main-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75em 28px;
    padding-block: .6em;
}

.main-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 28px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.main-nav.is-measured .main-nav__inner,
.main-nav.is-measured .main-nav__list {
    flex-wrap: nowrap;
}

.main-nav__list li {
    flex: none;
}

.main-nav__list a {
    display: flex;
    flex-direction: column;
    padding: 0 1px 2px;
    border-bottom: 5px solid transparent;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.3;
    white-space: nowrap;
}

.main-nav__ch {
    font: .6em/1.3 var(--font-led);
    letter-spacing: .12em;
    color: #555;
}

.main-nav__list a:link,
.main-nav__list a:visited,
.main-nav__list a:hover {
    color: var(--color-heading);
    text-decoration: none;
}

.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a {
    border-bottom-color: var(--color-accent);
}

.main-nav__list .current-menu-item > a .main-nav__ch,
.main-nav__list .current_page_item > a .main-nav__ch {
    color: var(--color-heading);
}

.main-nav__list a:hover {
    border-bottom-color: var(--color-link);
}

/* key "Menü": a small display key without a shadow, 44px high like the
   stream key next to it, filled lime while pressed (open) */
.main-nav__toggle {
    display: none;
    flex: none;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 7px;
    padding: 0 12px;
    border: 2px solid var(--color-ink);
    background: var(--color-ink);
    color: var(--color-accent);
    font: 1rem/1.2 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.main-nav__toggle[aria-expanded="true"] {
    background: var(--color-accent);
    color: #000;
}

.main-nav__toggle-icon {
    width: 14px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.main-nav.is-collapsed .main-nav__toggle {
    display: inline-flex;
}

/* collapsed: one calm row, the current page as plain text on the left,
   stream button and the key "Menü" on the right */
.main-nav__here {
    display: none;
}

.main-nav.is-measured.is-collapsed .main-nav__inner {
    align-items: center;
    column-gap: 12px;
}

.main-nav.is-collapsed .main-nav__here {
    display: block;
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.3;
    color: var(--color-heading);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.main-nav.is-collapsed .main-nav__listen {
    order: 1;
    margin-left: auto;
}

.main-nav.is-collapsed .main-nav__toggle {
    order: 2;
    margin-left: auto;
}

.main-nav.is-collapsed .main-nav__inner:has(.main-nav__listen) .main-nav__toggle {
    margin-left: 0;
}

.main-nav.is-collapsed .main-nav__listen,
.main-nav.is-collapsed .main-nav__toggle {
    margin-bottom: 0;
}

.main-nav.is-collapsed:not(.is-open) .main-nav__list {
    display: none;
}

/* the open panel: all channels in a list on ink, below the bar */
.main-nav.is-collapsed.is-open .main-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px max(var(--gutter), calc((100% - var(--content-width)) / 2)) 14px;
    border-bottom: 2px solid var(--color-ink);
    background: var(--color-ink);
}

.main-nav.is-open .main-nav__list li + li {
    border-top: 1px solid var(--color-led-off);
}

.main-nav.is-open .main-nav__list a {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 0;
}

.main-nav.is-open .main-nav__list a:link,
.main-nav.is-open .main-nav__list a:visited {
    color: #fff;
}

.main-nav.is-open .main-nav__list .main-nav__ch {
    color: #8fa9b1;
}

.main-nav.is-open .main-nav__list .current-menu-item > a,
.main-nav.is-open .main-nav__list .current_page_item > a,
.main-nav.is-open .main-nav__list .current-menu-item > a .main-nav__ch,
.main-nav.is-open .main-nav__list .current_page_item > a .main-nav__ch {
    color: var(--color-accent);
}

.main-nav.is-open .main-nav__list a:hover .main-nav__label {
    text-decoration: underline;
}

.main-nav.is-open .main-nav__list :focus-visible {
    outline-color: #fff;
}

/* stream link: a small black "display" with a play symbol */
.main-nav .main-nav__listen {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-bottom: 7px;
    padding: 6px 12px;
    border: 0;
    background: var(--color-ink);
    font: 1rem/1.2 var(--font-led);
    letter-spacing: .03em;
}

.main-nav .main-nav__listen:link,
.main-nav .main-nav__listen:visited,
.main-nav button.main-nav__listen {
    color: var(--color-accent);
}

.main-nav .main-nav__listen:hover {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px;
}

/* play icon of every link to the stream on laut.fm (#57) */
.player-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.player-toggle::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 9px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* CD-player front in the On-Air tile: status row, title in dot matrix,
   the play key (a link to laut.fm, #57) below */
.player-display {
    padding: 10px 12px 8px;
    border: 2px solid #2b383d;
    background: #0a1012;
    color: var(--color-accent);
}

.player-display__status {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font: .7rem/1.2 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #26343a;
}

.player-display__status .is-lit[data-ind="live"] {
    color: var(--color-onair);
}

.player-display__status .is-lit[data-ind="stream"] {
    color: var(--color-stream);
}

.player-display__main {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 8px;
}

.tile .player-display__title {
    flex: 1;
    min-width: 0;
    margin: 0 0 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 1rem/1.3 var(--font-dot);
    color: var(--color-accent);
}

.player-display__title.is-scrolling {
    text-overflow: clip;
}

.player-display__title.is-scrolling .player__song {
    display: inline-block;
    padding-left: 100%;
    animation: dot-scroll var(--scroll-duration, 10s) linear infinite;
}

@keyframes dot-scroll {
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .player-display__title.is-scrolling {
        text-overflow: ellipsis;
    }

    .player-display__title.is-scrolling .player__song {
        display: inline;
        padding-left: 0;
        animation: none;
    }
}

.player-transport {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.player-transport__key {
    display: grid;
    place-items: center;
    width: 52px;
    height: 40px;
    border: 2px solid #3a4a50;
    background: #1b262a;
    color: #dce8ea;
    cursor: pointer;
}

.player-transport__key svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* the play key opens laut.fm: wide, with its label */
.tile .player-transport__key--play {
    display: inline-flex;
    gap: 10px;
    width: auto;
    padding: 0 16px;
    font: .85rem/1.2 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
}

.tile .player-transport__key--play svg {
    color: var(--color-accent);
}

.tile .player-transport__key--play:link,
.tile .player-transport__key--play:visited {
    color: #dce8ea;
}

.player-transport__key:hover {
    border-color: var(--color-accent);
}

/* recordings in posts (script/audio-deck.js): the same front as the
   player in the On-Air tile, with the list of recordings; all keys of one
   size and frame, the pressed one lime */
.audio-deck {
    margin: 1.5em 5px 1.5em 0;
    padding: 0 16px 16px;
    border: 2px solid var(--color-ink);
    background: var(--color-ink);
    color: #dce8ea;
    box-shadow: var(--shadow-hard);
}

.audio-deck__head {
    display: flex;
    justify-content: space-between;
    margin: 0 -16px 12px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--color-led-off);
    font: .8rem/1.3 var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.audio-deck__head span + span {
    color: #8fa9b1;
}

.player-display__status .is-lit[data-ind="pause"] {
    color: var(--color-accent);
}

.audio-deck .player-display__title {
    flex: 1;
    min-width: 0;
    margin: 0 0 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 1.05rem/1.3 var(--font-dot);
    color: var(--color-accent);
}

.audio-deck__time {
    flex: none;
    font: 1.5rem/1 var(--font-led);
    color: #fff;
}

.audio-deck__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.audio-deck__list li + li {
    border-top: 1px solid var(--color-led-off);
}

.audio-deck__track {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .95em;
    text-align: left;
    color: #fff;
    cursor: pointer;
}

.audio-deck__no,
.audio-deck__len {
    flex: none;
    font: .8rem/1.3 var(--font-led);
    letter-spacing: .08em;
    color: #8fa9b1;
}

.audio-deck__name {
    flex: 1;
    min-width: 0;
}

.audio-deck__track[aria-current],
.audio-deck__track[aria-current] .audio-deck__no,
.audio-deck__track[aria-current] .audio-deck__len {
    color: var(--color-accent);
}

.audio-deck__track:hover .audio-deck__name {
    text-decoration: underline;
}

.audio-deck :focus-visible {
    outline-color: #fff;
}

/* every key the same: size, frame; pressed (playing) = lime */
.audio-deck .player-transport__key {
    width: 44px;
    height: 44px;
    border: 2px solid #fff;
    background: var(--color-ink);
    color: #fff;
}

.audio-deck .player-transport__key[aria-pressed="true"] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #000;
}

.audio-deck .player-transport__key:hover {
    border-color: var(--color-accent);
}

/* "Jetzt läuft" below the button, on ink (sidebar widget) */
/* .tile p and #sidebar .panel p reset margins; beat them */
.tile .player__now,
#sidebar .panel .player__now {
    margin: 16px 0 .5em;
}

.player__now {
    color: #fff;
}

.player__now-label {
    display: block;
    margin-bottom: 2px;
    font: .75rem/1.2 var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* collapsed: the stream button is a square key with only the play symbol,
   as high as the key "Menü" and in the same style (the label stays for
   screen readers in its .screen-reader-text) */
.main-nav.is-collapsed .main-nav__listen {
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--color-ink);
}

.main-nav.is-collapsed .main-nav__listen .player-toggle__label {
    display: none;
}

/* one stream link per screen: on wide screens the sidebar widget (single
   views) has it; on small screens the sidebar sits below the content, so the
   navigation keeps it. The front page has none (header.php), the On-Air tile
   links to it there */
@media (min-width: 50rem) {
    .has-sidebar .main-nav__listen {
        display: none;
    }
}

/* content
---------------------------------*/

/* titles are styled by class so the heading level can change */
.page-title {
    margin: 1em 0 .7em 0;
    font: bold 1.6em/1.6em var(--font-base);
    letter-spacing: .02em;
    color: var(--color-heading);
}

.page-title span {
    padding: 7px 7px 5px 7px;
    background: var(--color-accent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.entry-title {
    margin: 1em 0 .7em 0;
    font: bold 1.4em/1.6 var(--font-base);
    letter-spacing: normal;
    color: var(--color-heading);
}

.entry-title a:link,
.entry-title a:visited,
.entry-title a:hover {
    padding: 7px 7px 5px 7px;
    background: var(--color-muted-bg);
    text-decoration: none;
    color: var(--color-heading);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* topics and event date: below the title of a single post, above the
   title of a card; chips and date look the same in both places */
/* above the headline of a single post: topic and event date */
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 1.5em 0 0;
}

.entry-meta + .page-title {
    margin-top: .45em;
}

.entry-meta,
.card__meta {
    font: .85rem/1.3 var(--font-led);
    text-transform: uppercase;
}

/* on a single post the date is the key fact: a small display like the
   On-Air time (white digits on ink, label in lime); the title below already
   is the one lime surface */
.entry-meta {
    font-size: 1rem;
}

.entry-meta .topic-chip {
    padding: 3px 8px;
}

.entry-meta .event-date {
    display: inline-flex;
    align-items: baseline;
    gap: .6em;
    padding: 3px 10px;
    background: var(--color-ink);
    color: var(--color-accent);
    font-size: .85em;
    letter-spacing: .1em;
}

.entry-meta .event-date time {
    font-size: 1.4em;
    letter-spacing: .04em;
    color: #fff;
}

.topic-chip:link,
.topic-chip:visited {
    padding: 1px 6px;
    background: var(--color-ink);
    color: var(--color-accent);
    text-decoration: none;
}

.topic-chip:hover {
    text-decoration: underline;
}

.event-date {
    color: var(--color-heading);
}

/* single post or page; no divider of its own, the footer area below
   brings one. Floats in the content are cleared without flow-root, so the
   title margin still collapses as before */
.entry {
    margin-bottom: 1em;
}

.entry::after {
    content: "";
    display: block;
    clear: both;
}

/* content of posts and pages (#47): built from the content as it is, with
   the filters in inc/content.php. Headings inside the content are smaller
   than the page title; h1/h2 (authors used them for dates and legal
   headings) sit on the grey marker, h3 is a sub heading over a 2px line,
   and an h3 with a date or time in a post is a small display (.fact). */
.entry-content h1,
.entry-content h2 {
    margin: 1.4em 0 .6em;
    font: bold 1.25em/1.6 var(--font-base);
    letter-spacing: normal;
    color: var(--color-heading);
}

.entry-content .content-marker {
    padding: 5px 7px 3px;
    background: var(--color-muted-bg);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* the old global markers (h2 span lime, h3 span grey) don't apply here */
.entry-content h1 span:not(.content-marker),
.entry-content h2 span:not(.content-marker),
.entry-content h3 span {
    padding: 0;
    background: none;
}

.entry-content h3 {
    margin: 1.6em 0 .8em;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-ink);
    font: bold 1.1em/1.4 var(--font-base);
    color: var(--color-heading);
}

.entry-content h3 strong {
    font-weight: inherit;
}

.entry-content h4 {
    margin: 1.4em 0 .4em;
    padding: 0;
    border: 0;
    font: bold 1em/1.4 var(--font-base);
    color: var(--color-heading);
}

.entry-content h3.fact {
    position: relative;
    margin: 1.8em 0 1em;
    padding: 10px 14px 10px 36px;
    border: 0;
    background: var(--color-ink);
    font-size: 1.05em;
    color: #fff;
}

/* the lamp of the display */
.entry-content h3.fact::before {
    content: "";
    position: absolute;
    top: calc(10px + .35em);
    left: 14px;
    width: 10px;
    height: 10px;
    background: var(--color-accent);
}

/* links in headings: plain underlined links, not the old grey marker */
.entry-content h3 a:link,
.entry-content h3 a:visited,
.entry-content h3 a:hover {
    padding: 0;
    background: none;
    color: var(--color-link);
    text-decoration: underline;
}

.entry-content h3.fact + h3.fact {
    margin-top: -.6em;
}

.entry-content h3.fact a:link,
.entry-content h3.fact a:visited {
    color: #8fd1ee;
}

.entry-content h3.fact :focus-visible {
    outline-color: #fff;
}

/* red text from the old editor ("ACHTUNG", 4:1 on white, too weak) is a
   notice with the red on-air lamp on ink (class from inc/content.php,
   which also drops all other inline colours) */
.entry-content .notice {
    padding: 1px 8px 1px 6px;
    background: var(--color-ink);
    font-weight: bold;
    color: #fff;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.entry-content .notice::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--color-onair);
    vertical-align: .05em;
}

/* a notice inside a notice gets no second lamp */
.entry-content .notice .notice {
    padding: 0;
}

.entry-content .notice .notice::before {
    content: none;
}

/* images lie on the desk as tiles; with a caption the figure is the tile */
.entry-content img[class*="wp-image-"] {
    box-sizing: border-box;
    border: 2px solid var(--color-ink);
    box-shadow: var(--shadow-hard);
}

#content .entry-content .wp-caption {
    box-sizing: border-box;
    max-width: calc(100% - 5px);
    margin-bottom: 1.5em;
    border: 2px solid var(--color-ink);
    background: #fff;
    box-shadow: var(--shadow-hard);
}

#content .entry-content .wp-caption img {
    display: block;
    width: 100%;
    border: 0;
    box-shadow: none;
}

#content .entry-content .wp-caption-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px 12px;
    margin: 0;
    padding: 7px 12px 8px;
    border-top: 2px solid var(--color-ink);
    color: var(--color-heading);
}

.caption__name {
    font-weight: bold;
}

.caption__credit {
    font: .75rem/1.4 var(--font-led);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #555;
}

hr{
    border: 0;
    border-top: 2px solid #ddd;
    margin-bottom:3em;
}

/* an image in a paragraph of its own: room for its shadow, also when two
   follow each other (no divider between teaser and rest any more) */
.entry-content p:has(> img[class*="wp-image-"]) {
    margin-block: 1.75em;
}

/* media from the editor: old posts carry fixed widths (540px images,
   560px videos, inline style widths), so scale everything down */
.entry-content img {
    max-width: 100%;
    height: auto;
}

.entry-content iframe,
.entry-content video,
.entry-content [style*="width"] {
    max-width: 100%;
}

.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

#content .alignleft{
    float:left;
    padding: 6px 30px 1em 0;
}

#content .alignright{
    float:right;
    padding:6px 0 1em 30px;
}

#content .aligncenter{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#content .wp-caption{
    max-width: 100%;
}

#content .wp-caption-text{
    margin: 0.5em 0 1em 0;
    font-size: 0.8em;
}

@media (max-width: 37.49rem) {
    .page-title {
        font-size: 1.3em;
    }

    .entry-title {
        font-size: 1.25em;
    }

    #content .alignleft,
    #content .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 6px 0 1em;
    }
}

/* links inside text are underlined, not only coloured */
.entry-content a:link,
.entry-content a:visited {
    text-decoration: underline;
}

/* news ------------------------*/

.page_articles{
    padding-top:0.1em;
}

/* tiles (front page) -----------*/

/* the "studio desk": on-air display, listener requests, contact, next event;
   only these get the hard offset shadow */
.tiles {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin: 1.5em 5px 2.5em 0;
}

.tile {
    min-width: 0;
    padding: 14px 16px;
    border: 2px solid var(--color-ink);
    background: #fff;
    box-shadow: var(--shadow-hard);
}

.tile p {
    margin: 0;
}

.tile h2 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: normal;
}

.tile__label {
    font: .85rem var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tile--onair {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    background: var(--color-ink);
    color: #dce8ea;
}

.tiles:not(:has(.tile--next)) .tile--onair {
    grid-row: auto;
}

.tile--onair .tile__label {
    color: var(--color-accent);
}

.tile__time {
    margin-top: 10px;
    font: 2.6rem/1.05 var(--font-led);
    color: #fff;
}

/* below the time: the stream runs the rest of the week */
.tile .tile__stream {
    margin-top: 4px;
    font-size: 1.05em;
}

.tile__button:link,
.tile__button:visited,
button.tile__button {
    align-self: flex-start;
    padding: 9px 14px;
    background: var(--color-accent);
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

.tile__button:hover {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.tile--onair :focus-visible {
    outline-color: #fff;
}

/* the player sits below time and day (it replaced the tile's level meter);
   the note goes to the bottom of the tile */
.tile--onair .player {
    margin: 22px 0 0;
}

.tile .tile__note {
    margin-top: auto;
    padding-top: 18px;
    font-size: .85em;
    color: #a9bdc1;
}

.tile__phone {
    margin: 6px 0;
    /* one line even in the narrow 3-column tile (about 180px at 60rem) */
    font: 1.3rem/1.2 var(--font-led);
    white-space: nowrap;
}

.tile__phone a:link,
.tile__phone a:visited {
    color: var(--color-heading);
}

.tile__small {
    font-size: .88em;
}

/* contact data and social media (template-parts/contact.php): a small LED
   label above each link */
.contact-list,
#sidebar .widget ul.contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list li + li {
    margin-top: .7em;
}

.contact-list__label {
    display: block;
    font: .75rem/1.3 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #555;
}

.contact-list a {
    overflow-wrap: anywhere;
}

.tile--next {
    grid-column: span 2;
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--color-accent);
}

.tile__thumb {
    flex: none;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 2px solid var(--color-ink);
}

.tile__event {
    margin-top: 4px;
    font-weight: bold;
    font-size: 1.15em;
}

.tile__event a:link,
.tile__event a:visited {
    color: #000;
}

@media (max-width: 59.99rem) {
    .tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .tile--onair {
        grid-row: auto;
        grid-column: span 2;
    }
}

@media (max-width: 37.49rem) {
    .tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .tile--onair,
    .tile--next {
        grid-column: auto;
    }

    .tile__time {
        font-size: 2.1rem;
    }
}

/* cards (post lists) ------------*/

/* columns follow the width of the list, not of the window: 3 over the full
   width, 2 next to the sidebar (e.g. on the Studio A page) */
.card-list {
    container-type: inline-size;
    /* on the container, so it still collapses with the title margin */
    margin: 1.5em 0 2em;
}

.cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px 24px;
}

@container (min-width: 32rem) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 52rem) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* a card is a tile on the desk (#47): ink border, the hard shadow, an ink
   strip with topic and date between image and title. The title comes first
   in the markup; image and strip move above it. On hover the card lifts
   like a key. */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 5px 5px 0;
    border: 2px solid var(--color-ink);
    background: #fff;
    box-shadow: var(--shadow-hard);
    transition: transform .12s ease-out, box-shadow .12s ease-out;
}

.card:hover,
.card:focus-within {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--color-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .card {
        transition: none;
    }

    .card:hover,
    .card:focus-within {
        transform: none;
    }
}

.card__media {
    order: -2;
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-page-bg);
}

.card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.card__image--cover {
    object-fit: cover;
}

.card__image--contain {
    object-fit: contain;
}

.card__logo {
    width: 35%;
    height: auto;
    opacity: .5;
}

/* the strip: topic (lime) left, date (white) right */
.card__meta {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0;
    padding: 5px 12px;
    background: var(--color-ink);
    color: #fff;
}

.card__meta .topic-chip {
    padding: 0;
}

.card__meta .event-date {
    margin-left: auto;
    color: #fff;
}

/* above the title link that covers the card */
.card__topic {
    position: relative;
    z-index: 2;
}

/* no grey marker on cards: the tile is the frame */
.card .card__title {
    margin: 0;
    padding: 14px 14px 0;
    font-size: 1.1em;
    line-height: 1.35;
}

.card .card__title a:link,
.card .card__title a:visited,
.card .card__title a:hover {
    padding: 0;
    background: none;
}

/* the title link covers the whole card, so image and text are clickable */
.card__title a::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
}

.card:hover .card__title a {
    text-decoration: underline;
}

.card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 8px 14px 16px;
    font-size: .95em;
}

/* small cards below a single post ("Mehr aus Studio A"): three in a row next
   to the sidebar, without text */
.card-list--mini .cards {
    gap: 20px 16px;
}

@container (min-width: 32rem) {
    .card-list--mini .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card-list--mini .card__text {
    display: none;
}

.card-list--mini .card .card__title {
    padding: 10px 10px 12px;
    font-size: .95em;
}

.card-list--mini .card__meta {
    padding-inline: 10px;
    font-size: .75rem;
}

.related {
    margin: 2.5em 0 1em;
}

.related__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.2em;
    color: var(--color-heading);
}

.related__title .topic-chip {
    background: var(--color-ink);
    color: var(--color-accent);
    font: 1rem/1.3 var(--font-led);
    text-transform: uppercase;
    padding: 2px 8px;
}

.related .card-list {
    margin: 1em 0;
}

.related__all {
    margin: 0;
}

/* footer widgets (e.g. links) on the ink band of the footer ------*/

.site-extras {
    padding-block: 28px 20px;
}

.site-extras .widget + .widget {
    margin-top: 1.5em;
}

.site-extras .widget-title {
    margin: 0 0 .9em;
    font: .85rem/1.3 var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.site-extras ul {
    columns: 4 12em;
    column-gap: var(--space-3);
    margin: 0;
    list-style: none;
}

@media (max-width: 37.49rem) {
    .site-extras ul {
        columns: 2;
        font-size: .9em;
    }
}

.site-extras li {
    break-inside: avoid;
}

/* at least 24px high, so the dense link list stays easy to tap; light blue
   (the peak hold of the meter) on ink, 10:1 */
.site-extras li a {
    display: inline-block;
    padding: .15em 0;
    line-height: 1.5;
}

.site-extras a:link,
.site-extras a:visited {
    color: #8fd1ee;
    text-decoration: none;
}

.site-extras a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* paging: the tape counter of a reel-to-reel deck (#47) ------*/

.pager {
    margin: 1em 0 2em;
    text-align: center;
}

.pager__deck {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-right: 5px;
    padding: 8px;
    border: 2px solid var(--color-ink);
    background: var(--color-ink);
    box-shadow: var(--shadow-hard);
}

/* all keys the same size; the icons are SVGs of one size, not glyphs */
.pager__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 2px solid #fff;
    background: var(--color-ink);
    color: #fff;
}

.pager__key:link,
.pager__key:visited {
    color: #fff;
}

.pager__key--older:link,
.pager__key--older:visited {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #000;
}

a.pager__key:hover {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pager :focus-visible {
    outline-color: #fff;
}

/* the end of the tape: unlit keys */
.pager__key--off {
    border-color: var(--color-led-off);
    color: var(--color-led-off);
}

.pager__counter {
    margin: 0;
    padding: 0 12px;
    font: 1.4rem/1 var(--font-led);
    letter-spacing: .06em;
    color: #fff;
    white-space: nowrap;
}

.pager__label {
    font-size: .6em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8fa9b1;
}

.pager__of {
    color: #8fa9b1;
}

@media (max-width: 37.49rem) {
    .pager__key {
        width: 40px;
        height: 40px;
    }

    /* the display on top, the four keys below it */
    .pager__deck {
        justify-content: space-between;
        width: min(100%, 220px);
        box-sizing: border-box;
    }

    .pager__counter {
        order: -1;
        flex-basis: 100%;
        padding: 4px 2px 6px;
        font-size: 1.15rem;
    }
}

/* sidebar
---------------------------------*/

#sidebar ul {
    list-style-type: none;
    margin: 0;
}

#sidebar p {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* every widget is a tile like on the front page: ink border, white, the
   hard shadow; the broadcast widget is the small On-Air tile (ink surface) */
#sidebar .widget {
    display: flow-root;
    margin: 0 5px 24px 0;
    padding: 14px 16px;
    border: 2px solid var(--color-ink);
    background: #fff;
    box-shadow: var(--shadow-hard);
}

#sidebar .widget:first-child {
    margin-top: 1em;
}

/* every widget is a device in a rack (#47): its title is an ink strip with
   the name in lime LED and a lamp on the right; the lamp of "KRA 2: Sendung"
   turns red while the broadcast is on (class from script/level-meter.js).
   The tiles "Hörerwunsch" and "Kontakt" on the front page look the same. */
#sidebar .widget-title,
.tile .device-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75em;
    margin: -14px -16px 12px;
    padding: 6px 16px;
    background: var(--color-ink);
    font: .85rem/1.3 var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

#sidebar .widget-title::after,
.tile .device-head::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-led-off);
    box-shadow: 0 0 0 1px #2c3b40;
}

.kra2-onair #sidebar .widget_kra2_broadcast .widget-title::after {
    background: var(--color-onair);
    box-shadow: none;
}

#sidebar .widget ul, #sidebar .widget div {
    margin: .6em 0 0;
    padding: 0;
}

#sidebar .widget p:first-child {
    margin-top: 0;
}

#sidebar .widget > :last-child,
#sidebar .widget > div > :last-child,
#sidebar .panel > :last-child {
    margin-bottom: 0;
}

/* text widget with an image first (the book tip): when the sidebar sits
   below the content, image and text side by side */
@media (max-width: 49.99rem) {
    #sidebar .textwidget:has(> img:first-child) {
        display: grid;
        grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
        align-items: start;
        gap: 16px;
    }

    #sidebar .textwidget:has(> img:first-child) > img {
        width: 100%;
        height: auto;
    }

    #sidebar .textwidget:has(> img:first-child) > p {
        margin: 0;
    }
}

/* menu widget "Links" (#40): like the old link list, no extra indent
   from the div around its list */
#sidebar .widget_nav_menu div {
    margin: 0;
    padding: 0;
}

#sidebar .widget_links a,
#sidebar .widget_nav_menu a {
    line-height: 1.5em;
}

/* theme widgets "KRA 2: Sendung" / "KRA 2: Hörerwunsch" (inc/widgets.php) */
#sidebar .panel p {
    margin: 0 0 .5em;
}

/* time directly above its day, as in the On-Air tile */
#sidebar .widget_kra2_broadcast .panel__led {
    margin-bottom: 0;
}

#sidebar .widget_kra2_broadcast .panel__day {
    margin-bottom: .9em;
}

.panel__led {
    font: 1.3rem/1.2 var(--font-led);
    white-space: nowrap;
    color: var(--color-heading);
}

.panel__led a:link,
.panel__led a:visited {
    color: var(--color-heading);
}

.panel__small {
    font-size: .85em;
}

#sidebar .widget_kra2_broadcast {
    background: var(--color-ink);
    color: #dce8ea;
}

/* the strip sits on the ink surface: a line below separates it */
#sidebar .widget_kra2_broadcast .widget-title {
    border-bottom: 1px solid var(--color-led-off);
}

.widget_kra2_broadcast .panel__led {
    font-size: 1.9rem;
    color: #fff;
}

.widget_kra2_broadcast .panel__small {
    color: #a9bdc1;
}

.widget_kra2_broadcast :focus-visible {
    outline-color: #fff;
}

/* same button as in the On-Air tile */
.panel__listen:link,
.panel__listen:visited,
button.panel__listen {
    display: inline-flex;
    margin: .25em 0;
    padding: 8px 12px;
    background: var(--color-accent);
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

.panel__listen:hover {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* footer
---------------------------------*/

/* the back panel of the desk (#47): an ink band like the header, links on
   the left, logo and legal links in one row below */
.site-footer {
    margin-top: var(--space-4);
    background: var(--color-ink);
    color: #c4d0d3;
}

.site-footer :focus-visible {
    outline-color: #fff;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75em 1.5em;
    padding-block: 16px 20px;
    font-size: .9em;
}

.site-extras + .site-footer__bottom {
    border-top: 1px solid var(--color-led-off);
}

.site-footer p {
    margin: 0;
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    font-weight: bold;
}

.site-footer__brand:link,
.site-footer__brand:visited {
    color: #fff;
    text-decoration: none;
}

.site-footer__logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: .25em 1.25em;
}

.site-footer__legal a:link,
.site-footer__legal a:visited {
    color: #fff;
}

.site-footer__legal a:hover {
    color: var(--color-accent);
}

/* phones: the legal links in a row of their own, centred */
@media (max-width: 37.49rem) {
    .site-footer__legal {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* legal links wrap as whole links ("Datenschutz-Einstellungen") */
.site-footer__legal a {
    white-space: nowrap;
}

/* title images
---------------------------------*/

/* the photo as a tile on the desk (#47); the title sticks to its bottom
   edge like a label, the path sign (LED) sits in the top left corner.
   Long titles wrap on their markers and grow up into the photo. */
.page-title-band {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    aspect-ratio: 546 / 150;
    margin: 1em 5px 2.4em 0;
    border: 2px solid var(--color-ink);
    background: top left / cover no-repeat var(--color-page-bg);
    box-shadow: var(--shadow-hard);
}

.page-title-band__sign {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    padding: 3px 8px;
    background: var(--color-ink);
    font: .75rem/1.3 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.page-title-band .page-title {
    margin: 0 14px -.75em;
}

@media (max-width: 37.49rem) {
    .page-title-band {
        aspect-ratio: 16 / 7;
    }
}

.page-title--sendungen {
    background-image: url(img/title_bg_img/michael.jpg);
}

.page-title--wir-ueber-uns {
    background-image: url(img/title_bg_img/plattenspieler.jpg);
}

.page-title--aktuell {
    background-image: url(img/title_bg_img/aktuell_1.jpg);
}

/* team page: record sleeves (inc/team.php, #47, design B)
---------------------------------*/

/* covers in a grid; nothing on the photo (it would hide people), the guest
   below it like a track: "feat. Olaf Thon" */
.team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    gap: 30px 22px;
    margin: 1em 0 2.5em;
}

.cover {
    min-width: 0;
}

.cover__sleeve {
    aspect-ratio: 1;
    margin-right: 5px;
    overflow: hidden;
    border: 2px solid var(--color-ink);
    background: var(--color-page-bg);
    box-shadow: var(--shadow-hard);
}

.entry-content .cover__sleeve img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    /* square crop from the top: portraits lose their lower part, never a
       face (checked on every member photo) */
    object-position: center top;
    border: 0;
    box-shadow: none;
}

.entry-content .cover__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5em;
    margin: 12px 0 0;
    padding-top: 6px;
    border-top: 2px solid var(--color-ink);
}

.cover__name {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--color-heading);
}

.cover__no {
    flex: none;
    font: .75rem/1.3 var(--font-led);
    letter-spacing: .12em;
    color: #555;
}

.entry-content .cover__track {
    margin: 2px 0 0;
    font: .85rem/1.35 var(--font-led);
    letter-spacing: .04em;
    color: #3f4b4f;
}

.entry-content .cover__text {
    margin: 10px 0 0;
    font-size: .95em;
    line-height: 1.5;
}

/* people with more text: a wide "LP", photo and text side by side */
.cover--lp {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.entry-content .cover--lp .cover__head {
    margin-top: 0;
}

.cover--lp .cover__name {
    font-size: 1.35em;
}

@media (max-width: 37.49rem) {
    .cover--lp {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 16px;
    }
}

/* "Kein Signal": 404 and search (#47)
---------------------------------*/

/* the On-Air tile off air: unlit lamp, the meter lying flat; centred with
   the same space above and below */
.off-air {
    max-width: 680px;
    margin: 3em auto;
    padding: 18px 22px 22px;
    border: 2px solid var(--color-ink);
    background: var(--color-ink);
    box-shadow: var(--shadow-hard);
    color: #c4d0d3;
}

.off-air :focus-visible {
    outline-color: #fff;
}

.off-air__label {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin: 0;
    font: .85rem/1.3 var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.off-air__lamp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-led-off);
}

.off-air__lamp::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-led-off);
}

.off-air__meter {
    display: flex;
    gap: 4px;
    height: 46px;
    margin: 16px 0 18px;
}

.off-air__meter .tower {
    flex: 1;
    width: auto;
}

.off-air__title {
    margin: 0 0 .4em;
    font: bold 1.6em/1.3 var(--font-base);
    color: #fff;
}

.off-air__text {
    margin: 0 0 1em;
}

.off-air__actions {
    margin: 1em 0 0;
}

/* image gallery
---------------------------------*/

/* without JavaScript: the thumbnails as a grid of small tiles, each a link
   to the image file */
.gallery {
    margin: 1.5em 5px 1.5em 0;
}

#content .gallery__hint {
    margin: 0 0 .5em;
}

.gallery__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-item {
    max-width: 100%;
}

.gallery-item figure {
    margin: 0;
}

.gallery-item a {
    display: block;
}

.gallery-item img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 2px solid var(--color-ink);
}

.gallery-caption {
    padding: 2px 0 0;
    font-size: .8em;
}

/* the film strip (script/gallery.js, #47): a device on the desk with a
   head strip, the large image, a control bar like the player and the
   thumbnails as a strip with sprocket holes */
.filmstrip {
    border: 2px solid var(--color-ink);
    background: var(--color-ink);
    box-shadow: var(--shadow-hard);
    color: #fff;
}

.filmstrip__head {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 6px 14px;
    border-bottom: 1px solid var(--color-led-off);
    font: .8rem/1.3 var(--font-led);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.filmstrip__head span + span {
    color: #8fa9b1;
}

.filmstrip__stage {
    margin: 0;
}

.filmstrip__view {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: zoom-in;
}

.filmstrip__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

.filmstrip__caption {
    padding: 6px 14px 0;
    font-size: .9em;
    color: #dce8ea;
}

.filmstrip__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
}

.filmstrip__counter {
    margin: 0 0 0 6px;
    font: 1.2rem/1 var(--font-led);
    letter-spacing: .06em;
    white-space: nowrap;
}

.filmstrip__of {
    color: #8fa9b1;
}

.filmstrip__full {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 6px 10px;
    border: 2px solid var(--color-accent);
    background: none;
    font: .85rem/1.2 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
    cursor: pointer;
}

.filmstrip__full svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.filmstrip__full:hover {
    background: var(--color-accent);
    color: #000;
}

/* keys of the strip and the monitor: one size, one frame; "next" is lime */
.gallery-key {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #fff;
    background: var(--color-ink);
    color: #fff;
    cursor: pointer;
}

.gallery-key svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.gallery-key--lit {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #000;
}

.gallery-key:hover {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.filmstrip :focus-visible,
.monitor :focus-visible {
    outline-color: #fff;
}

/* position of the image as LED segments */
.gallery-meter {
    display: inline-flex;
    gap: 3px;
}

.gallery-meter__seg {
    width: 10px;
    height: 6px;
    background: var(--color-led-off);
}

.gallery-meter__seg.is-lit {
    background: var(--color-accent);
}

/* the thumbnails as a film strip to swipe */
.filmstrip .gallery__items {
    position: relative;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 18px 10px;
    border-top: 1px solid var(--color-led-off);
    background-color: #000;
    /* sprocket holes along both edges (inline SVG, no request) */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='6'%3E%3Crect width='12' height='6' fill='%232b3438'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='6'%3E%3Crect width='12' height='6' fill='%232b3438'/%3E%3C/svg%3E");
    background-position: 0 6px, 0 calc(100% - 6px);
    background-repeat: repeat-x;
    background-attachment: local;
    scrollbar-color: var(--color-led-off) #000;
}

.filmstrip .gallery-item {
    flex: none;
}

.filmstrip .gallery-item img {
    width: 110px;
    height: 72px;
    object-fit: cover;
    border: 0;
    opacity: .55;
}

.filmstrip .gallery-item a {
    outline-offset: -3px;
}

.filmstrip .gallery-item a[aria-current] img,
.filmstrip .gallery-item a:hover img {
    opacity: 1;
}

.filmstrip .gallery-item a[aria-current] {
    outline: 3px solid var(--color-accent);
}

.filmstrip .gallery-caption {
    display: none;
}

@media (max-width: 37.49rem) {
    .filmstrip__bar .gallery-meter {
        display: none;
    }

    .filmstrip .gallery-item img {
        width: 88px;
        height: 58px;
    }
}

/* the monitor: full view in a modal dialog */
.has-monitor {
    overflow: hidden;
}

.monitor {
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-ink);
    color: #fff;
}

.monitor[open] {
    display: flex;
    flex-direction: column;
}

.monitor::backdrop {
    background: var(--color-ink);
}

.monitor__status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-led-off);
}

.monitor__lamp {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
}

.monitor__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: .8rem/1.3 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8fa9b1;
}

.monitor__screen {
    position: relative;
    flex: 1;
    min-height: 0;
}

/* the photo scaled down to the screen, never cut */
.monitor__image {
    position: absolute;
    top: 16px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 16px);
    object-fit: contain;
}

.monitor__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 20px 16px;
}

.monitor__counter {
    margin: 0 0 0 6px;
    font: 1rem/1.2 var(--font-led);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
}

.monitor__caption {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: .95em;
    color: #c4d0d3;
}

.monitor__close {
    margin-left: auto;
}

/* print
---------------------------------*/

@media print {
    .main-nav, .site-sidebar, .site-footer, .level-meter, .tiles, .site-extras, .card__more, form {
        display: none;
    }

    body {
        background: none;
        color: #000;
    }

    .site-body, .site-header, .site-header__inner, .page-title-band {
        display: block;
        height: auto;
        aspect-ratio: auto;
        text-align: left;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .site-logo {
        width: 64px;
        height: 64px;
    }

    .site-title__name {
        font-size: 16pt;
        color: #000;
    }

    .site-title__sub {
        display: none;
    }

    p {
        font-size: 12pt;
    }

    #content p a[href^="http"]:not(.more-link)::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}