/*
 * 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;
}

@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;
        height: 2.2rem;
        width: auto;
    }

    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;
}