/*
 * Die Handy-Huelle der Startseite.
 *
 * Alles hier greift nur unter 754 Pixeln Breite UND nur, wenn mobil.js
 * dem body die Klasse `pk-mobil` gegeben hat. Am Desktop aendert sich
 * nichts - die Elemente der Huelle sind dort ausgeblendet, und keine
 * Regel trifft ohne die Klasse.
 *
 * 754 Pixel ist die Grenze, die das Altsystem schon fuer die Chatkarte
 * benutzt hat.
 */

/* Am Desktop nicht da. */
.mob-player,
.mob-reiter,
.mob-mehr,
.mob-galerie,
.mob-anwesende,
.mob-chat-zu,
.mob-schriftzug,
.mob-programm {
    display: none;
}

/* Das Farbschema des Grundgeruests faerbt die Kopfzeile auf schmalen
   Bildschirmen blau-lila - das passt nicht zum Blau der Seite. Hier
   das Blau der Reiterleiste unten, damit oben und unten zusammengehen. */
@media only screen and (max-width: 992px) {
    body.color11 .header.header-fixed {
        background: linear-gradient(to bottom, #1e3c72 0%, #122343 100%);
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
    }
}

@media only screen and (max-width: 754px) {

    /* ---- Grundmasse ------------------------------------------------- */
    body.pk-mobil {
        --mob-kopf: 4.5rem;      /* der feste Kopfbereich des Grundgeruests */
        --mob-player: 48px;
        --mob-reiter: 58px;
    }

    /* Platz fuer Player-Zeile oben und Reiter unten. */
    body.pk-mobil .page {
        padding-top: calc(var(--mob-kopf) + var(--mob-player)) !important;
        padding-bottom: calc(var(--mob-reiter) + env(safe-area-inset-bottom, 0px));
    }

    /* ---- Kopfbereich: nur Burger, Logo, Vollbild, Profil ------------- */
    /* Das Grundgeruest blendet auf dem Handy das Logo aus und zeigt
       stattdessen ein gruenes "Shoutbox"-Schild; dazu kamen ein
       Home-Knopf und der Kniffel-Wuerfel. Die Shoutbox hat jetzt
       ihren Reiter, das Logo kommt zurueck. */
    body.pk-mobil .header .header-brand-img.desktop-logo {
        display: block !important;
        /* Das Logo ist 650 x 68 - es soll sein Verhaeltnis behalten und
           sich in die Luecke zwischen Burger und Knoepfen einpassen,
           statt in die Hoehe gequetscht zu werden. */
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 2.2rem;
    }

    body.pk-mobil .header .header-brand:has(.desktop-logo) {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        /* Der Burger liegt absolut am linken Rand (12 + 35 px) - das
           Logo beginnt dahinter. */
        margin: 0 10px 0 46px;
        display: flex;
        align-items: center;
    }

    body.pk-mobil .header .mobile-view-logo,
    body.pk-mobil .header .homemobil,
    body.pk-mobil .header .homedesk,
    body.pk-mobil .header .header-toggler,
    body.pk-mobil .header .notification-1 {
        display: none !important;
    }

    /* Klappt das Burgermenue auf, liegt es als Ganzes ueber der Seite -
       die Player-Zeile weicht so lange. Die Reiterleiste bleibt: Sie
       liegt ueber dem Menue und ist von ueberall der Weg zurueck. */
    body.pk-mobil.active .mob-player {
        display: none !important;
    }

    /* ---- Player-Zeile ---------------------------------------------- */
    body.pk-mobil .mob-player {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        top: var(--mob-kopf);
        left: 0;
        right: 0;
        height: var(--mob-player);
        padding: 0 10px;
        z-index: 1300;
        background: linear-gradient(to right bottom, #1e3c72 0%, #122343 100%);
        color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    }

    body.pk-mobil .mob-ton {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .5);
        background: rgba(38, 194, 247, .35);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    body.pk-mobil .mob-ton.mob-stumm {
        background: rgba(249, 90, 90, .35);
        border-color: rgba(249, 90, 90, .9);
    }

    body.pk-mobil .mob-titel {
        flex: 1 1 auto;
        min-width: 0;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 13px;
        line-height: 1.25;
    }

    body.pk-mobil #mob_titel {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }

    body.pk-mobil .mob-hoerer {
        font-size: 11px;
        opacity: .8;
    }

    /* ---- Reiterleiste ---------------------------------------------- */
    body.pk-mobil .mob-reiter {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(var(--mob-reiter) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Ueber allem, auch ueber Burgermenue und Fenstern: Die Leiste
           ist der feste Weg zurueck. */
        z-index: 2500;
        background: linear-gradient(to top, #122343 0%, #1e3c72 100%);
        border-top: 1px solid rgba(255, 255, 255, .2);
        box-shadow: 0 -2px 6px rgba(0, 0, 0, .35);
    }

    body.pk-mobil .mob-knopf {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 10px;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }

    body.pk-mobil .mob-knopf i {
        font-size: 22px;
        line-height: 1;
    }

    body.pk-mobil .mob-knopf img {
        width: 22px;
        height: 22px;
    }

    body.pk-mobil .mob-knopf.mob-aktiv {
        color: #26c2f7;
    }

    body.pk-mobil .mob-knopf:hover,
    body.pk-mobil .mob-knopf:focus {
        color: #fff;
        text-decoration: none;
    }

    body.pk-mobil .mob-zahl {
        position: absolute;
        top: 6px;
        left: calc(50% + 6px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #dc3545;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        font-weight: bold;
    }

    /* ---- Was auf welchem Reiter zu sehen ist ------------------------ */
    /* mobil.js verteilt die Bloecke der Seite: data-mob="chat",
       "programm" oder "mehr". Sichtbar ist nur, was zum Reiter gehoert. */
    body.pk-mobil [data-mob] {
        display: none !important;
    }

    body.pk-mobil.mob-reiter-chat [data-mob="chat"],
    body.pk-mobil.mob-reiter-programm [data-mob="programm"],
    body.pk-mobil.mob-reiter-mehr [data-mob="mehr"] {
        display: block !important;
    }

    body.pk-mobil.mob-reiter-mehr .mob-mehr {
        display: block;
    }

    /* Die Spalten der Startseite fuellen das Handy in voller Breite. */
    body.pk-mobil [data-mob] {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ---- Chat ------------------------------------------------------- */
    body.pk-mobil #chatcard.chatdiv {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 8px;
    }

    /* Die Randknoepfe fuer Shoutbox und Kniffel ersetzt die Reiterleiste. */
    body.pk-mobil #shoutbox_auf,
    body.pk-mobil #kniffel_auf {
        display: none !important;
    }

    /* ---- Shoutbox und Kniffel als Vollbild --------------------------- */
    body.pk-mobil #leftmenu,
    body.pk-mobil #sidebar_rechts {
        width: 100% !important;
        top: calc(var(--mob-kopf) + var(--mob-player)) !important;
        bottom: calc(var(--mob-reiter) + env(safe-area-inset-bottom, 0px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        z-index: 1250 !important;
    }

    body.pk-mobil #leftmenu {
        left: -100% !important;
    }

    body.pk-mobil #leftmenu.open {
        left: 0 !important;
    }

    body.pk-mobil #sidebar_rechts {
        right: 0 !important;
        transform: translate(100%, 0) !important;
    }

    body.pk-mobil #sidebar_rechts.sidebar-open {
        transform: translate(0, 0) !important;
    }

    /* Die Schliesskreuze der Leisten braucht es nicht - geschlossen wird
       ueber die Reiter. Sie blieben sonst als Weg ins Leere. */
    body.pk-mobil #leftmenu .close-button a[onclick*="remove('open')"],
    body.pk-mobil #sidebar_rechts .close-button {
        display: none !important;
    }

    /* ---- Der Reiter "Mehr" ------------------------------------------ */
    body.pk-mobil .mob-mehr {
        padding: 6px 10px 0;
        color: #fff;
    }

    body.pk-mobil .mob-ueberschrift {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        margin: 6px 0 8px;
    }

    body.pk-mobil .mob-sendungen {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 14px;
    }

    body.pk-mobil .mob-sendung {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 8px;
        border-radius: 8px;
        background: rgba(10, 22, 48, .55);
        border: 1px solid rgba(255, 255, 255, .18);
        color: #fff;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        line-height: 1.3;
    }

    body.pk-mobil .mob-sendung img {
        flex: 0 0 auto;
        width: 56px;
        height: 37px;
        object-fit: cover;
        border-radius: 5px;
        background: #000;
    }

    body.pk-mobil .mob-sendung strong {
        display: block;
        font-size: 13px;
    }

    body.pk-mobil .mob-sendung .mob-wann {
        color: #9fd3ff;
        font-weight: bold;
    }

    body.pk-mobil .mob-leer {
        font-size: 12px;
        opacity: .8;
    }
}


/* =====================================================================
 * Schritt 2: der Chat selbst, Ticker, Spiele, Galerien
 * ===================================================================== */
@media only screen and (max-width: 754px) {

    /* ---- Ticker und Begruessung: nicht auf dem Handy ------------------ */
    body.pk-mobil .page-header,
    body.pk-mobil .offers.ticker,
    body.pk-mobil [data-mob="weg"],
    body.pk-mobil #ctgallery ~ br {
        display: none !important;
    }

    /* ---- Der Chat in Handy-Anordnung ---------------------------------- */
    /* Kein Skalieren mehr: Der Chat fuellt die Breite und die Hoehe
       zwischen Player-Zeile und Reitern. Die Presets bringen ihre
       Koordinaten fuer 722 Pixel mit; die gelten hier nicht - jedes
       Element bekommt seinen festen Platz, das Hintergrundbild bleibt. */
    body.pk-mobil #chatdiv,
    body.pk-mobil #chatdiv.chatiframe {
        height: auto !important;
        overflow: visible !important;
    }

    body.pk-mobil .chatraum {
        width: 100% !important;
        height: calc(100vh - var(--mob-kopf) - var(--mob-player) - var(--mob-reiter) - 10px) !important;
        height: calc(100dvh - var(--mob-kopf) - var(--mob-player) - var(--mob-reiter) - 10px) !important;
        min-height: 320px;
        transform: none !important;
        background-size: cover !important;
        background-position: center top !important;
        border-radius: 0.5rem;
    }

    /* Was auf dem Handy keinen Platz hat. */
    body.pk-mobil .chatraum #ch_begruessung,
    body.pk-mobil .chatraum #ch_textfeld1,
    body.pk-mobil .chatraum #ch_textfeld2,
    body.pk-mobil .chatraum #ch_hoererzahl,
    body.pk-mobil .chatraum #ch_chatterzahl,
    body.pk-mobil .chatraum #ch_uhr,
    body.pk-mobil .chatraum #ch_runter,
    body.pk-mobil .chatraum #ch_wetter,
    body.pk-mobil .chatraum #ch_dimmer,
    body.pk-mobil .chatraum #ch_chatgrund,
    body.pk-mobil .chatraum #ch_overlay,
    body.pk-mobil .chatraum #ch_videoebene,
    body.pk-mobil .chatraum #ch_ton {
        display: none !important;
    }

    /* Der Verlauf: oben, bis ueber die Eingabe. */
    body.pk-mobil .chatraum #ch_verlauf {
        left: 6px !important;
        top: 6px !important;
        right: 6px !important;
        bottom: 106px !important;
        width: auto !important;
        height: auto !important;
        padding: 8px 8px 8px 8px !important;
        background: rgba(8, 16, 36, .74);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 14px rgba(0, 0, 0, .4);
        /* Ohne !important: A+ und A- setzen die Groesse am Element,
           und das soll gewinnen. */
        font-size: 14px;
        color: #fff;
    }

    /* Die Eingabe: fest ueber der Knopfleiste. */
    body.pk-mobil .chatraum #ch_eingabe {
        left: 6px !important;
        right: 6px !important;
        top: auto !important;
        bottom: 60px !important;
        width: auto !important;
        height: 40px !important;
        background: rgba(255, 255, 255, .08) !important;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 10px;
    }

    body.pk-mobil .chatraum #ch_feld {
        height: 40px !important;
        line-height: 40px;
        font-size: 16px !important;   /* unter 16px zoomt iOS beim Tippen */
        padding: 0 10px;
        color: #fff;
        width: 100%;
    }

    /* Die Knopfleiste: eine Zeile am Boden, gleich breite Knoepfe.
       Am Desktop sind die Knoepfe durchsichtig, ihre Beschriftung ist
       ins Preset gemalt - hier bekommen sie ihre eigene. */
    /* Ein deckender Balken am Boden, damit das Preset-Bild nicht
       durch die Knoepfe schimmert. */
    body.pk-mobil .chatraum #ch_leiste {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 54px;
        padding: 7px 6px;
        box-sizing: border-box;
        display: flex;
        gap: 5px;
        z-index: 4;
        background: linear-gradient(to top, #0b1730 0%, #16305c 100%);
        border-top: 1px solid rgba(255, 255, 255, .22);
        border-radius: 0 0 0.5rem 0.5rem;
    }

    body.pk-mobil .chatraum #ch_leiste .ch-flaeche,
    body.pk-mobil .chatraum #ch_emojiknopf {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: 40px !important;
        flex: 1 1 0;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 10px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .35);
        color: #fff;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 15px;
        font-weight: bold;
        line-height: 38px;
        text-align: center;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    body.pk-mobil .chatraum #ch_emojiknopf {
        background-image: none !important;
    }

    body.pk-mobil .chatraum #ch_leiste .ch-flaeche:active {
        background: rgba(38, 194, 247, .35) !important;
    }

    body.pk-mobil .chatraum #ch_leiste .ch-flaeche.ch-an {
        background: linear-gradient(to bottom, rgba(38, 194, 247, .65) 0%, rgba(38, 194, 247, .35) 100%) !important;
        border-color: rgba(38, 194, 247, .9);
    }

    /* Die Symbole: Feather-Zeichen aus dem Grundgeruest (`fe-*`),
       fett und kursiv als Buchstaben, wie in jedem Editor. */
    body.pk-mobil .chatraum #ch_anmelden::before,
    body.pk-mobil .chatraum #ch_farbe::before,
    body.pk-mobil .chatraum #ch_groesser::before,
    body.pk-mobil .chatraum #ch_kleiner::before {
        font-family: 'feather' !important;
        font-weight: normal;
        font-size: 20px;
    }

    body.pk-mobil .chatraum #ch_anmelden::before   { content: "\e986"; }   /* log-in */
    body.pk-mobil .chatraum #ch_farbe::before      { content: "\e956"; }   /* droplet */
    body.pk-mobil .chatraum #ch_fett::before       { content: "B"; font-family: Georgia, serif; font-size: 19px; }
    body.pk-mobil .chatraum #ch_kursiv::before     { content: "I"; font-family: Georgia, serif; font-style: italic; font-size: 19px; }
    body.pk-mobil .chatraum #ch_groesser::before   { content: "\ea05"; }   /* zoom-in */
    body.pk-mobil .chatraum #ch_kleiner::before    { content: "\ea06"; }   /* zoom-out */
    body.pk-mobil .chatraum #ch_smileys::before    { content: "\263A"; font-size: 24px; line-height: 38px; }
    body.pk-mobil .chatraum #ch_emojiknopf::before {
        content: "\1F600";
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
        font-size: 22px;
    }

    /* Der Emoji-Knopf (Emojis einfliegen lassen) steht ausserhalb der
       Leiste im Markup; mobil.js haengt ihn hinein. */

    /* Smiley- und Emoji-Fenster: ueber der Eingabe, volle Breite. */
    body.pk-mobil .chatraum #ch_smileyfenster,
    body.pk-mobil .chatraum #ch_emojifenster {
        left: 6px !important;
        right: 6px !important;
        top: auto !important;
        bottom: 106px !important;
        width: auto !important;
        height: 55% !important;
        max-height: 320px;
    }

    /* Der einfliegende Balken: ueber der Eingabe, volle Breite. */
    body.pk-mobil .chatraum #ch_emojianzeige {
        left: 0 !important;
        top: auto !important;
        bottom: 106px !important;
        width: 100% !important;
        height: 64px !important;
        padding-left: 0 !important;
    }

    /* Die Anwesenden: hinter einem Knopf, dann als Liste ueber dem
       Verlauf. */
    body.pk-mobil .chatraum #ch_anwesende {
        display: none !important;
    }

    body.pk-mobil .chatraum.mob-anwesende-auf #ch_anwesende {
        display: block !important;
        left: 6px !important;
        top: 60px !important;
        right: 6px !important;
        bottom: 106px !important;
        width: auto !important;
        height: auto !important;
        background: rgba(8, 16, 36, .94);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 12px;
        padding: 6px !important;
        overflow-y: auto;
        z-index: 6;
        font-family: Verdana, Geneva, sans-serif;
        text-shadow: none;
    }

    body.pk-mobil .chatraum #ch_anwesende .ch-wer {
        height: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        white-space: nowrap;
    }

    body.pk-mobil .chatraum #ch_anwesende .ch-wer:last-child {
        border-bottom: 0;
    }

    body.pk-mobil .chatraum #ch_anwesende .ch-ausblenden {
        float: none;
        line-height: 0;
        flex: 0 0 auto;
    }

    body.pk-mobil .chatraum #ch_anwesende .ch-ausblenden img {
        width: 24px;
        height: 24px;
    }

    body.pk-mobil .chatraum #ch_anwesende .ch-name {
        display: block;
        margin-left: 0;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 17px;
        line-height: 1.3;
    }

    body.pk-mobil .chatraum #ch_anwesende .ch-zeichen {
        width: 20px;
        height: 20px;
    }

    body.pk-mobil .chatraum #ch_anwesende .ch-sendet {
        width: 24px;
        height: 24px;
    }

    /* Sitzt auf der Plakette, die das Hintergrundbild oben rechts
       mitbringt. */
    body.pk-mobil .mob-anwesende {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 7;
        height: 40px;
        padding: 0 16px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, .55);
        background: linear-gradient(to bottom, rgba(30, 60, 114, .95) 0%, rgba(18, 35, 67, .95) 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
        color: #fff;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 16px;
        font-weight: bold;
        -webkit-tap-highlight-color: transparent;
    }

    body.pk-mobil .mob-anwesende i {
        font-size: 20px;
    }

    body.pk-mobil .chatraum.mob-anwesende-auf .mob-anwesende {
        background: rgba(38, 194, 247, .6);
    }

    /* ---- Spiele im Reiter "Mehr" ------------------------------------ */
    body.pk-mobil .mob-spiele {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 14px;
    }

    /* Die Kacheln tragen ein Bild (img/mobil), der Text steht unten auf
       einem dunklen Verlauf, damit er auf jedem Motiv lesbar bleibt. */
    body.pk-mobil .mob-spiel {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 150px;
        padding: 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .25);
        color: #fff;
        text-decoration: none;
        text-align: left;
        font-family: Verdana, Geneva, sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    body.pk-mobil .mob-spiel::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 70%;
        background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    body.pk-mobil .mob-spiel-kniffel {
        background-image: url("/img/mobil/kniffel.jpg");
    }

    body.pk-mobil .mob-spiel-knobeln {
        background-image: url("/img/mobil/knobeln.jpg");
    }

    body.pk-mobil .mob-spiel img {
        display: none;
    }

    body.pk-mobil .mob-spiel-text {
        position: relative;
        z-index: 1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    }

    body.pk-mobil .mob-spiel strong {
        display: block;
        font-size: 16px;
    }

    body.pk-mobil .mob-spiel small {
        display: block;
        font-size: 11px;
        line-height: 1.3;
        opacity: .85;
    }

    body.pk-mobil .mob-spiel:hover,
    body.pk-mobil .mob-spiel:focus {
        color: #fff;
        text-decoration: none;
    }

    /* ---- Bildergalerien: unten, zum Aufklappen ---------------------- */
    body.pk-mobil .mob-galerie {
        display: block;
        width: calc(100% - 20px);
        margin: 4px 10px 14px;
        padding: 12px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, .25);
        background: linear-gradient(to right bottom, #1e3c72 0%, #122343 100%);
        color: #fff;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        font-weight: bold;
    }

    body.pk-mobil #ctgallery {
        display: none !important;
    }

    body.pk-mobil.mob-reiter-mehr #ctgallery.mob-auf {
        display: block !important;
    }
}


/* =====================================================================
 * Schritt 3: dauerhafte Leiste, keine Randknoepfe, Vollbild-Chat
 * ===================================================================== */
@media only screen and (max-width: 754px) {

    /* Die Randknoepfe mit ihren Verschiebe-Griffen (Shoutbox, Kniffel,
       Wuensche, Uebergabe-Chat) gibt es nur am Desktop. */
    body.pk-mobil #pk-knopfleiste,
    body.pk-mobil #pk-knopfleiste-mod {
        display: none !important;
    }

    /* Fenster (Bewerbung, Impressum ...) enden ueber der Reiterleiste. */
    body.pk-mobil .modal .modal-dialog {
        margin-bottom: 70px;
    }

    /* ---- Der Chat im Vollbild ---------------------------------------- */
    /* Wer ins Schreibfeld tippt, bekommt den Chat ueber die ganze
       Flaeche. Mit `interactive-widget=resizes-content` im Viewport
       und der Hoehe in dvh schrumpft er mit der Tastatur: Der Verlauf
       bleibt lesbar, die Eingabe sitzt direkt ueber den Tasten - wie
       in einem Messenger. Vorher scrollte der Browser das Feld ins
       Bild und der Verlauf verschwand nach oben. */
    body.pk-mobil.mob-vollbild {
        overflow: hidden;
    }

    body.pk-mobil.mob-vollbild .chatraum {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        z-index: 2600 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    body.pk-mobil.mob-vollbild .mob-chat-zu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 8;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .55);
        background: linear-gradient(to bottom, rgba(30, 60, 114, .95) 0%, rgba(18, 35, 67, .95) 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
        color: #fff;
        font-size: 22px;
        padding: 0;
    }

    /* Der Verlauf beginnt unter Pill und Kreuz. */
    body.pk-mobil .chatraum #ch_verlauf {
        top: 60px !important;
    }
}


/* =====================================================================
 * Die Programmliste
 * ===================================================================== */
@media only screen and (max-width: 754px) {
    body.pk-mobil .mob-programm {
        display: block;
        padding: 4px 4px 0;
        color: #fff;
    }

    body.pk-mobil .mob-tag {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #9fd3ff;
        margin: 12px 0 6px;
        padding-bottom: 3px;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
    }

    body.pk-mobil .mob-sendung .mob-zeit {
        flex: 0 0 74px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
    }

    body.pk-mobil .mob-sendung .mob-farbe {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
        border: 1px solid rgba(255, 255, 255, .5);
    }

    body.pk-mobil .mob-sendung .mob-mod {
        font-size: 13px;
    }

    body.pk-mobil .mob-sendung .mob-thema {
        display: block;
        font-weight: bold;
        font-size: 13px;
    }

    body.pk-mobil .mob-sendung img {
        margin-left: auto;
    }
}


/* =====================================================================
 * Fenster ueber dem Vollbild, Tastatur-Modus
 * ===================================================================== */
@media only screen and (max-width: 754px) {
    /* Anmeldung, Farbwahl, Profil: Die Fenster des Chats lagen unter
       dem Vollbild (1080 gegen 2600) - Login und Farbe taten scheinbar
       nichts. */
    body.pk-mobil .ch-modal {
        z-index: 2700 !important;
    }

    /* Ist die Tastatur oben, weicht die Knopfleiste: Das Schreibfeld
       sitzt dann direkt ueber den Tasten. Klappt die Tastatur zu,
       kommen die Knoepfe zurueck. */
    body.pk-mobil.mob-tippt .chatraum #ch_leiste {
        display: none !important;
    }

    body.pk-mobil.mob-tippt .chatraum #ch_eingabe {
        bottom: 6px !important;
    }

    body.pk-mobil.mob-tippt .chatraum #ch_verlauf,
    body.pk-mobil.mob-tippt .chatraum #ch_smileyfenster,
    body.pk-mobil.mob-tippt .chatraum #ch_emojifenster,
    body.pk-mobil.mob-tippt .chatraum #ch_emojianzeige,
    body.pk-mobil.mob-tippt .chatraum.mob-anwesende-auf #ch_anwesende {
        bottom: 52px !important;
    }
}


/* =====================================================================
 * Hintergrund, Profilbild
 * ===================================================================== */
@media only screen and (max-width: 754px) {
    /* Ein eigenes Bild fuer den Handy-Chat: Platte als Teller,
       Kochmuetze, Kopfhoerer, Mikrofon - Plattenkueche. Oben ruhig
       und dunkel, damit Pill und Kreuz darauf sitzen; die Plakette
       oben rechts ist fuer den Pill gedacht. Das Preset setzt sein
       Bild am Element, deshalb !important. */
    body.pk-mobil .chatraum {
        background-image: url("/img/mobil/chat-hg.jpg") !important;
        background-color: #08111f !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    /* Das Profilbild im Kopf: rund. */
    body.pk-mobil .header #profilbild {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, .5) !important;
        background: #122343 !important;
    }
}


/* =====================================================================
 * Zonen: Kopfleiste, Verlauf, Boden-Block
 * ===================================================================== */
@media only screen and (max-width: 754px) {
    /* Die Kopfleiste: ein dunkler Glasstreifen ueber dem Bild, darauf
       Schriftzug, Pill und Kreuz. */
    body.pk-mobil .chatraum::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 62px;
        z-index: 2;
        background: linear-gradient(to bottom, rgba(6, 12, 28, .92) 0%, rgba(6, 12, 28, .75) 70%, rgba(6, 12, 28, 0) 100%);
        pointer-events: none;
    }

    /* Der Boden-Block: Eingabe und Knoepfe auf einem Stueck. */
    body.pk-mobil .chatraum::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 108px;
        z-index: 2;
        background: linear-gradient(to top, #0b1730 0%, #16305c 100%);
        border-top: 1px solid rgba(255, 255, 255, .22);
        border-radius: 0 0 0.5rem 0.5rem;
        pointer-events: none;
    }

    /* Die Knopfleiste liegt auf dem Block, braucht keinen eigenen Grund. */
    body.pk-mobil .chatraum #ch_leiste {
        background: transparent;
        border-top: 0;
    }

    /* Der Schriftzug: klein, mittig in der Kopfleiste. */
    body.pk-mobil .mob-schriftzug {
        display: block;
        position: absolute;
        top: 14px;
        left: 60px;
        right: 110px;
        height: 36px;
        z-index: 7;
        text-align: center;
        pointer-events: none;
    }

    body.pk-mobil .mob-schriftzug img {
        max-height: 36px;
        max-width: 100%;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
    }

    body.pk-mobil.mob-vollbild .mob-schriftzug {
        left: 60px;
    }

    /* Ist die Tastatur oben, verschwindet der Boden-Block bis auf die
       Eingabe. */
    body.pk-mobil.mob-tippt .chatraum::after {
        height: 52px;
    }

    /* Das Profilbild: ein Kreis, was immer das Grundgeruest daraus
       machen will. */
    body.pk-mobil .header #profilbild,
    body.pk-mobil .header .avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        aspect-ratio: 1 / 1;
        border-radius: 50% !important;
        clip-path: circle(50% at 50% 50%);
        object-fit: cover !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 36px !important;
        overflow: hidden;
    }
}


/* =====================================================================
 * Smiley- und Emoji-Fenster als Bodenblatt
 * ===================================================================== */
@media only screen and (max-width: 754px) {
    /* Das Blatt faehrt ueber dem Boden-Block hoch: volle Breite,
       deckender Grund, grosse Reiter, grosse Kacheln - mit dem Daumen
       zu treffen. */
    body.pk-mobil .chatraum #ch_smileyfenster,
    body.pk-mobil .chatraum #ch_emojifenster {
        left: 6px !important;
        right: 6px !important;
        top: auto !important;
        bottom: 112px !important;
        width: auto !important;
        height: 62% !important;
        max-height: 420px;
        padding: 8px !important;
        background: linear-gradient(to bottom, #16305c 0%, #0b1730 100%) !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        border-radius: 14px !important;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .55);
        z-index: 30 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        overscroll-behavior: contain;
    }

    body.pk-mobil .chatraum .ch-fenster .ch-fensterkopf {
        margin: -8px -8px 8px;
        padding: 10px 14px;
        font-size: 16px;
        background: rgba(255, 255, 255, .08);
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        border-radius: 14px 14px 0 0;
    }

    body.pk-mobil .chatraum .ch-fenster .ch-fensterzu {
        font-size: 28px;
        padding: 0 6px;
    }

    /* Die Kategorien: eine Reihe grosser Reiter, seitlich wischbar. */
    body.pk-mobil .chatraum .ch-fenster .ch-reiter {
        display: flex;
        flex: 0 0 auto;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 2px 2px 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.pk-mobil .chatraum .ch-fenster .ch-reiter::-webkit-scrollbar {
        display: none;
    }

    body.pk-mobil .chatraum .ch-fenster .ch-reiter img {
        flex: 0 0 auto;
        width: 46px !important;
        height: 46px !important;
        object-fit: contain;
        padding: 7px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .15);
    }

    body.pk-mobil .chatraum .ch-fenster .ch-reiter img.ch-an {
        background: linear-gradient(to bottom, rgba(38, 194, 247, .65) 0%, rgba(38, 194, 247, .35) 100%);
        border-color: rgba(38, 194, 247, .9);
    }

    /* Die Smileys: gleich grosse Kacheln im Fluss. Kein Raster - die
       Kategorie-Seiten tragen ihr display am Element (block/none),
       und das gewinnt gegen jedes Stylesheet; ein Raster wurde so
       nie eines, und die Kacheln mit voller Breite fuellten je eine
       Zeile. */
    body.pk-mobil .chatraum .ch-fenster .ch-inhalt {
        flex: 1 1 auto;
        min-height: 0;
        padding: 2px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        text-align: left;
        line-height: 0;
    }

    body.pk-mobil .chatraum .ch-fenster .ch-inhalt img {
        display: inline-block;
        width: 54px !important;
        height: 54px !important;
        object-fit: contain;
        margin: 3px !important;
        padding: 7px !important;
        box-sizing: border-box;
        border-radius: 12px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .12);
        vertical-align: top;
        -webkit-tap-highlight-color: transparent;
    }

    body.pk-mobil .chatraum .ch-fenster .ch-inhalt img:active {
        background: rgba(38, 194, 247, .4);
    }

    body.pk-mobil .chatraum .ch-fenster .ch-inhalt p {
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        line-height: 1.4;
        padding: 20px 0;
    }

    /* Nichts im Chat gibt sein Scrollen an die Seite weiter. */
    body.pk-mobil .chatraum,
    body.pk-mobil .chatraum #ch_verlauf,
    body.pk-mobil .chatraum .ch-fenster .ch-reiter,
    body.pk-mobil .chatraum #ch_anwesende {
        overscroll-behavior: contain;
    }

    /* Das Emoji-Fenster listet seine Bilder ohne den Reiter-Kopf. */
    body.pk-mobil .chatraum #ch_emojifenster img[data-grafik] {
        width: 76px;
        height: 76px;
        object-fit: contain;
        margin: 4px;
        padding: 6px;
        box-sizing: border-box;
        border-radius: 12px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .12);
    }

    /* Ist die Tastatur oben, sitzt das Blatt tiefer. */
    body.pk-mobil.mob-tippt .chatraum #ch_smileyfenster,
    body.pk-mobil.mob-tippt .chatraum #ch_emojifenster {
        bottom: 56px !important;
    }
}


/* =====================================================================
 * Programm: nur die Liste, Karten je Sendung
 * ===================================================================== */
@media only screen and (max-width: 754px) {
    /* "Jetzt laeuft", "Danach", Titel und Online-Zahlen stehen schon in
       der Player-Zeile und in der Liste - hier nicht noch einmal. */
    body.pk-mobil #rightcards > .card {
        display: none !important;
    }

    body.pk-mobil .mob-programm {
        padding: 2px 6px 0;
    }

    body.pk-mobil .mob-programm .mob-ueberschrift {
        font-size: 18px;
        margin: 6px 2px 10px;
    }

    body.pk-mobil .mob-tag {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #9fd3ff;
        margin: 14px 2px 8px;
        padding-bottom: 4px;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    body.pk-mobil .mob-sendungen {
        gap: 8px;
    }

    body.pk-mobil .mob-sendung {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        border-radius: 14px;
        background: linear-gradient(to right, rgba(30, 60, 114, .55) 0%, rgba(18, 35, 67, .55) 100%);
        border: 1px solid rgba(255, 255, 255, .18);
        border-left: 5px solid var(--mob-modfarbe, #26c2f7);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
        color: #fff;
        font-family: Verdana, Geneva, sans-serif;
        line-height: 1.3;
    }

    body.pk-mobil .mob-sendung.mob-laeuft {
        background: linear-gradient(to right, rgba(38, 194, 247, .35) 0%, rgba(18, 35, 67, .7) 100%);
        border-color: rgba(38, 194, 247, .8);
        box-shadow: 0 0 0 1px rgba(38, 194, 247, .5), 0 2px 12px rgba(38, 194, 247, .3);
    }

    body.pk-mobil .mob-sendung-bild {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(0, 0, 0, .35);
        border: 1px solid rgba(255, 255, 255, .2);
    }

    body.pk-mobil .mob-sendung-bild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0;
        border-radius: 0;
        border: 0;
    }

    body.pk-mobil .mob-sendung-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    body.pk-mobil .mob-sendung .mob-zeit {
        flex: none;
        font-size: 12px;
        font-weight: bold;
        color: #9fd3ff;
    }

    body.pk-mobil .mob-sendung.mob-laeuft .mob-zeit {
        color: #26c2f7;
    }

    body.pk-mobil .mob-sendung .mob-mod {
        font-size: 16px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.pk-mobil .mob-sendung .mob-thema {
        font-size: 13px;
        font-weight: normal;
        opacity: .92;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media only screen and (max-width: 754px) {
    /* Das Fenster wird per display:block am Element geoeffnet - dann
       gilt kein Flex, und der Inhalt braucht eine feste Hoehe, sonst
       laeuft er unten aus dem Fenster und laesst sich nicht zu Ende
       scrollen. Reiterzeile plus Abstaende: 78 Pixel. */
    body.pk-mobil .chatraum #ch_smileyfenster .ch-inhalt {
        height: calc(100% - 78px);
        max-height: calc(100% - 78px);
    }
}


/* Die Reiter-Symbole bringen ihren dunkelblauen Grund selbst mit und
 * fuellen die Kachel ganz aus. */
body.pk-mobil .chatraum .ch-fenster .ch-reiter img[src*="/reiter/"] {
    padding: 0 !important;
    object-fit: cover;
}


/* =====================================================================
 * Der Wochen-Sendeplan
 *
 * Am Desktop eine Tabelle, 750 Punkte breit, mittig ueber der Seite.
 * Auf dem Handy wird daraus ein Blatt in voller Breite zwischen
 * Player und Reiterleiste: jeder Tag ein Block, darin die zehn
 * Zeitfenster in zwei Spalten. Der Tabellenkopf faellt weg, das
 * Zeitfenster steht als Beschriftung vor jedem Feld (data-zeit).
 * Die Farben setzt sendeplan.js weiter wie am Desktop.
 * ===================================================================== */
@media only screen and (max-width: 754px) {
    body.pk-mobil #sendeplan_woche {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(var(--mob-kopf) + var(--mob-player)) !important;
        bottom: var(--mob-reiter) !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 2400 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: radial-gradient(#348bdc, #3568b4);
    }

    body.pk-mobil #sendeplan_woche > div {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    body.pk-mobil #sendeplan_woche .card {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent !important;
    }

    /* Kopfzeile: Titel links, Schliessen rechts - der Knopf war am
       Desktop-Markup unter 768 Punkten ausgeblendet. */
    body.pk-mobil #sendeplan_woche .d-none {
        display: block !important;
    }

    body.pk-mobil #sendeplan_woche .d-flex.table-responsive {
        padding: 10px 12px !important;
        overflow: visible;
        align-items: center;
    }

    body.pk-mobil #sendeplan_woche #titel_woche {
        font-size: 15px;
        margin: 0;
        line-height: 1.3;
    }

    body.pk-mobil #sendeplan_woche .card-options-remove {
        font-size: 24px;
        color: #fff;
        margin-left: 8px;
    }

    /* Aus der Tabelle werden Bloecke. */
    body.pk-mobil #sendeplan_woche .table-responsive {
        overflow: visible;
    }

    body.pk-mobil #sendeplan_woche table,
    body.pk-mobil #sendeplan_woche tbody,
    body.pk-mobil #sendeplan_woche tr,
    body.pk-mobil #sendeplan_woche td {
        display: block;
        width: 100%;
        white-space: normal;
    }

    body.pk-mobil #sendeplan_woche thead {
        display: none;
    }

    body.pk-mobil #sendeplan_woche table {
        margin: 0 0 6px;
        border-collapse: separate;
    }

    body.pk-mobil #sendeplan_woche tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
        width: auto;
        height: auto !important;
        margin: 0 8px 10px;
        padding: 6px 8px 8px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, .15);
    }

    /* Die Tageszelle wird zur Ueberschrift des Blocks. */
    body.pk-mobil #sendeplan_woche tbody td:not([data-zeit]) {
        grid-column: 1 / -1;
        width: auto !important;
        padding: 0 0 4px !important;
        font-size: 15px !important;
        text-align: left;
        border: 0;
    }

    body.pk-mobil #sendeplan_woche tbody td[data-zeit] {
        display: flex;
        align-items: center;
        gap: 6px;
        max-width: none !important;
        padding: 0 !important;
        border: 0;
    }

    body.pk-mobil #sendeplan_woche tbody td[data-zeit]::before {
        content: attr(data-zeit);
        flex: 0 0 38px;
        font-size: 11px;
        font-weight: bold;
        color: #d5eaff;
        text-align: right;
    }

    body.pk-mobil #sendeplan_woche tbody td[data-zeit] a.btn {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        padding: 6px 4px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Die Wochenknoepfe unten in voller Breite. */
    body.pk-mobil #sendeplan_woche .btn-group.ml-auto {
        margin: 0 !important;
        width: 100%;
    }

    body.pk-mobil #sendeplan_woche .btn-group.ml-auto .btn {
        width: 100%;
        font-size: 14px;
        padding: 10px;
    }

    body.pk-mobil #sendeplan_woche .d-flex.table-responsive:last-child {
        padding-bottom: 16px !important;
    }

    /* Der Knopf zur ganzen Woche ueber der Programmliste. */
    body.pk-mobil .mob-programm-kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    body.pk-mobil .mob-programm-kopf .mob-ueberschrift {
        margin: 6px 0;
    }

    body.pk-mobil .mob-wochenknopf {
        flex: 0 0 auto;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 999px;
        background: linear-gradient(to bottom, #348bdc, #2a5fa8);
        color: #fff;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        padding: 7px 12px;
        cursor: pointer;
    }
}


/* Der neue Wochen-Sendeplan auf dem Handy: dieselbe Blatt-Anordnung wie
 * oben (jeder Tag ein Block), nur die Farben der neuen Gestaltung. */
@media only screen and (max-width: 754px) {
    body.pk-mobil #sendeplan_woche.sp-neu .sp-kasten {
        max-height: none;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
        border: 0;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-hinweis {
        margin: 10px 8px 0;
        font-size: 12px;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-tabellenhuelle {
        padding: 8px 0 0;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-tabelle {
        border-spacing: 0;
    }

    body.pk-mobil #sendeplan_woche.sp-neu tbody tr {
        background: rgba(255, 255, 255, .06);
    }

    body.pk-mobil #sendeplan_woche.sp-neu tbody tr.sp-heute {
        background: rgba(38, 194, 247, .14);
        border-color: rgba(38, 194, 247, .6);
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-tagname {
        width: auto;
        color: #fff;
    }

    body.pk-mobil #sendeplan_woche.sp-neu tr.sp-heute .sp-tagname {
        color: #26c2f7;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-zelle {
        width: auto !important;
        min-height: 40px;
        flex: 1 1 auto;
        align-items: flex-start;
        text-align: left;
        padding: 4px 8px;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-legende {
        display: none;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-fuss .btn-group {
        width: 100%;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-fuss .sp-knopf {
        width: 100%;
        justify-content: center;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-inhalt {
        padding: 12px 10px 16px;
    }

    body.pk-mobil #sendeplan_woche.sp-neu .sp-kasten .d-none {
        display: block !important;
    }
}


/* Die Befehlsliste auf dem Handy: ueber dem Schreibfeld, so breit wie
 * der Chat, hoechstens die halbe Hoehe. */
@media only screen and (max-width: 754px) {
    body.pk-mobil .chatraum #ch_befehlshilfe {
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
        top: auto !important;
        bottom: 106px !important;
        max-height: 45vh;
        z-index: 60;
    }

    body.pk-mobil.mob-tippt .chatraum #ch_befehlshilfe {
        bottom: 52px !important;
    }

    body.pk-mobil .chatraum .ch-befehl-name {
        flex-basis: 120px;
    }
}


/* =====================================================================
 * Die Shoutbox am Handy
 * =====================================================================
 *
 * Am Schreibtisch ist die Shoutbox eine schmale Leiste von 240 Pixeln
 * neben dem Chat. Am Handy nimmt sie den ganzen Bildschirm ein - die
 * Masse der Leiste blieben aber stehen: Das Schreibfeld hoerte nach
 * zwei Dritteln der Breite auf, daneben lag toter Raum, und die vier
 * Knoepfe drueckten sich als Block nach links.
 *
 * Hier bekommt sie die Breite, die sie hat. Sie muss nicht aussehen
 * wie am Schreibtisch; sie muss mit dem Daumen zu bedienen sein.
 */
@media only screen and (max-width: 754px) {

    /* Der Rollkasten der Vorlage rechnet in Leistenbreite.
       Die 250 Pixel stecken schon im `nav.menu-container` darueber -
       ohne den bliebe alles darin bei 100 Prozent von 250. */
    body.pk-mobil #leftmenu .menu-container,
    body.pk-mobil #leftmenu .mCustomScrollBox,
    body.pk-mobil #leftmenu .mCSB_container,
    body.pk-mobil #leftmenu .mCSB_container > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.pk-mobil #leftmenu .mCSB_container {
        padding: 0 8px;
        box-sizing: border-box;
    }

    /* Die Leiste liegt am Schreibtisch ueber dem Chat und darf dort
       durchscheinen. Am Handy fuellt sie den Bildschirm, und was
       darunter liegt - die Fusszeile der Startseite mit Impressum und
       Datenschutz - stand quer durch die Ueberschrift. */
    /* Die Leiste liegt am Schreibtisch ueber dem Chat und ist deshalb
       leicht durchscheinend. Am Handy fuellt sie den Bildschirm - und
       durch sie hindurch stand die Fusszeile der Startseite, quer
       durch die Ueberschrift: Impressum, Datenschutz, Cookies.

       Das Hintergrundbild der Vorlage bleibt (es ist der blaue
       Verlauf der Seite und kommt ohnehin per Inline-Stil, den kein
       Stylesheet ueberschreibt). Nur die Durchsicht muss weg. */
    body.pk-mobil #leftmenu.left-sidemenu {
        opacity: 1 !important;
    }

    /* ---- Das Schreibfeld --------------------------------------------
     *
     * Eine Zeile reicht: Was laenger wird, rollt im Feld. Vier Zeilen
     * Hoehe nahmen dem Verlauf Platz weg, und geschrieben wird hier
     * ohnehin meist ein Satz.
     *
     * 16 Pixel Schrift sind Absicht - darunter zoomt iOS beim
     * Antippen in das Feld hinein, und danach steht die Seite schief.
     */
    body.pk-mobil #shouteingabe {
        width: 100% !important;
        margin: 0;
    }

    body.pk-mobil #shoutbox_input {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px;
        padding: 12px 14px !important;
        border-radius: 10px;
        font-size: 16px !important;
        line-height: 1.3;
        resize: none;
    }

    /* ---- Die vier Knoepfe darunter -----------------------------------
     *
     * Sie trugen feste 57 Pixel aus der Leistenansicht. Jetzt teilen
     * sie sich die Zeile zu gleichen Teilen und sind 46 Pixel hoch -
     * genug, um sie sicher zu treffen.
     */
    body.pk-mobil #shouteingabe + .d-flex {
        display: flex !important;
        gap: 6px;
        margin-top: 8px !important;
    }

    body.pk-mobil #shouteingabe + .d-flex > button {
        flex: 1 1 0;
        width: auto !important;
        height: 46px !important;
        margin: 0 !important;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.pk-mobil #shouteingabe + .d-flex > button svg {
        width: 26px !important;
        height: 26px !important;
    }

    /* "Chat verschieben" rueckt am Schreibtisch den Chat zur Seite,
       damit die Leiste danebenpasst. Am Handy gibt es kein Daneben -
       der Knopf verschoebe nur den Block unter dem Reiter. */
    body.pk-mobil #shouteingabe + .d-flex > button[onclick*="schieben"] {
        display: none !important;
    }

    /* ---- Die Beitraege ----------------------------------------------
     *
     * Sie stehen schon als Karten da; am Handy waren sie nur zu
     * luftig - drei Beitraege fuellten den Bildschirm. Enger gesetzt,
     * mit Umbruch fuer lange Woerter und Links, damit nichts seitlich
     * hinauslaeuft.
     */
    /* Derselbe seitliche Rand wie ueber dem Schreibfeld - sonst
       laufen die Beitraege bis an die Kante, waehrend Feld und
       Knoepfe eingerueckt stehen.

       Der Verlauf haengt an einem festen Abstand von oben, der fuer
       das vierzeilige Schreibfeld der Leiste gerechnet war. Mit
       einer Zeile und flacheren Knoepfen bleiben darueber 55 Pixel
       leer - die gehoeren den Beitraegen. */
    body.pk-mobil #shouttext {
        top: 158px !important;
        padding: 0 8px !important;
        margin-top: 0 !important;
    }

    body.pk-mobil #shouttext .card {
        margin-bottom: 8px !important;
        padding: 0 !important;
        border-radius: 10px;
    }

    body.pk-mobil #shouttext .card-body {
        padding: 8px 10px !important;
    }

    body.pk-mobil #shouttext .card-title {
        margin: 0 0 4px !important;
        font-size: 13px !important;
    }

    body.pk-mobil #shouttext .card-text {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: 0;
        overflow-wrap: anywhere;
    }

    /* Der Name steht in einer Pille. Sie darf nicht so leuchten, dass
       sie den Beitrag selbst uebertoent. */
    body.pk-mobil #shouttext .badge {
        font-size: 12px;
        font-weight: normal;
        padding: 3px 8px;
    }

    /* Bilder im Beitrag - Smileys, Wuerfel - bleiben im Rahmen. */
    body.pk-mobil #shouttext img {
        max-width: 100%;
        height: auto;
    }
}


/* =====================================================================
 * Das Bild aus dem Studio am Handy
 * =====================================================================
 *
 * Am Schreibtisch steht der Videokasten als Fenster unten rechts. Am
 * Handy ist daneben kein Platz: Er legt sich ueber die Breite, dicht
 * unter die Player-Zeile, und laesst die Reiterleiste frei - der Chat
 * bleibt einen Griff entfernt.
 */
@media only screen and (max-width: 754px) {
    body.pk-mobil #custom {
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
        max-width: none !important;
        top: calc(var(--mob-kopf) + var(--mob-player) + 6px) !important;
        bottom: auto !important;
        z-index: 1600 !important;
    }

    body.pk-mobil #custom .card {
        margin-bottom: 0;
    }

    body.pk-mobil #custom_inner {
        /* Platz fuer Kopfzeile, Player-Zeile und die Reiter unten. */
        max-height: calc(100dvh - var(--mob-kopf) - var(--mob-player) - var(--mob-reiter) - 70px) !important;
        padding: 8px !important;
    }

    body.pk-mobil #twitchstream {
        min-height: 0;
    }

    /* Der Tonschalter ist am Handy der wichtigste Knopf des Abends -
       gross genug fuer den Daumen. */
    body.pk-mobil .pk-video-knopf {
        min-height: 42px;
        flex: 1 1 auto;
        justify-content: center;
    }

    body.pk-mobil .pk-video-leiste {
        gap: 6px;
    }
}