/*
 * Eigene Ergaenzungen zum uebernommenen Design.
 *
 * Die Dateien aus dem Altsystem (dashboard.css und die Plugins) bleiben
 * unangetastet. Was hier steht, wird nach ihnen geladen und aendert
 * gezielt einzelne Stellen.
 */

/* ------------------------------------------------------------------
   Team-Seite: Moderatorenbild auf dem Smartphone
   ------------------------------------------------------------------
   Im Altsystem steht die Groesse als Attribut direkt am Bild
   (max-width:255px; max-height:180px). Auf dem Desktop stimmt das,
   dort ist die Karte 255 Pixel breit.

   Auf dem Smartphone ist die Karte rund 350 Pixel breit - das Bild
   blieb bei 255 stehen und liess links und rechts einen Rand frei.
   Unterhalb der Bootstrap-Grenze von 576 Pixeln steht ohnehin nur eine
   Karte je Reihe, dort darf das Bild die volle Breite einnehmen.

   Das `!important` ist noetig, weil die Vorgabe im Altmarkup als
   Attribut am Bild steht und sich anders nicht ueberschreiben laesst.
   Die Bilder liegen mit 255 x 180 Pixeln vor und werden dabei
   vergroessert.
*/
@media (max-width: 575.98px) {
    #top_content .card > a > img.card-img-top {
        width: 100%;
        height: auto;
        max-width: 100% !important;
        max-height: none !important;
    }
}

/* ------------------------------------------------------------------
   Chat der Moderation: Sprechblasen
   ------------------------------------------------------------------
   Eigene Nachrichten stehen rechts, die der anderen links - wie man
   es aus den ueblichen Nachrichtendiensten kennt. Vorher stand dort
   dieselbe Kartenform wie in der Shoutbox, was fuer einen Dialog
   schlecht zu lesen war.

   Die Blasen wachsen mit dem Text und hoeren bei drei Vierteln der
   Breite auf, damit die Seite erkennbar bleibt, auf der sie stehen.
*/
#modbox_chat_inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-reihe {
    display: flex;
    max-width: 100%;
}

.mc-reihe.mc-eigene {
    justify-content: flex-end;
}

.mc-blase {
    max-width: 75%;
    padding: 6px 10px;
    border-radius: 12px;
    /* Die Ecke zur eigenen Seite hin bleibt eckig - daran erkennt man
       auf einen Blick, von wem die Nachricht kommt. */
    border-bottom-left-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.mc-eigene .mc-blase {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 2px;
    background: rgba(76, 175, 80, 0.30);
}

.mc-kopf {
    font-size: 11px;
    font-weight: bold;
    opacity: 0.75;
    margin-bottom: 2px;
}

/* Beim eigenen Namen steht nur die Uhrzeit - wer schreibt, weiss man
   selbst. */
.mc-eigene .mc-kopf {
    text-align: right;
}

.mc-text {
    font-size: 14px;
    line-height: 1.35;
    white-space: pre-wrap;
}

.mc-hinweis {
    align-self: center;
    font-size: 11px;
    opacity: 0.6;
    padding: 2px 10px;
    margin: 4px 0;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
}

/* Das Schreibfeld bleibt beim Blaettern stehen.

   Es liegt im selben Kasten, der scrollt. `sticky` haelt seine
   Umhuellung am oberen Rand fest, ohne dass das uebernommene Markup
   umgebaut werden muss - das div hat keine eigene Kennung, deshalb
   wird es ueber seine Lage angesprochen.

   Der Hintergrund ist noetig, damit die Blasen nicht durchscheinen,
   wenn sie darunter wegwandern. */
/* Der Kasten ist 140 Pixel hoeher als im Altmarkup - fuer eine
   Uebergabe passen dann mehr Nachrichten ins Bild.

   Kein Innenabstand oben: Ein haftendes Element klebt an der
   Innenkante, nicht an der Aussenkante. Bliebe der Abstand stehen,
   scrollten die Blasen in diesem Streifen oberhalb des Feldes vorbei
   und darueber laege ein blauer Balken. Links und rechts ebenso -
   das Schreibfeld soll die ganze Breite haben. */
#modbox_chat_outer {
    height: 680px !important;
    padding: 0 !important;
}

#modbox_chat_outer > .form-group {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
    /* Der negative Abstand stammt aus dem alten Markup und wuerde das
       Feld ueber seine Haftposition hinausziehen. */
    margin: 0 !important;
    background: #24427a;
}

/* Die Blasen brauchen den Rand, den der Kasten nicht mehr hat. */
#modbox_chat_inner {
    padding: 8px 6px;
}

/* Das Verlaufsfeld darf nicht unter das Schreibfeld rutschen - auch
   dieser Abstand kommt aus dem alten Markup. */
#modbox_chat_inner {
    margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   Mod-Chat: Titelanzeige des AutoDJs
   ------------------------------------------------------------------
   Masse und Farben aus mods/autodj_status_neu.php uebernommen: ein
   400 Pixel breiter Balken, der Titel darauf, die Restzeit rechts.

   Der Balken blinkt in den letzten zwanzig Sekunden - dann kann man
   uebernehmen, ohne mitten in den Titel zu fahren. Im Altsystem
   entschied das der Server bei jedem Abruf; hier reicht die Klasse,
   die der Browser selbst setzt.
*/
.adj-rahmen {
    position: relative;
    width: 400px;
    height: 25px;
    background-color: #0066CC;
    border-radius: 4px;
    overflow: hidden;
}

.adj-balken {
    height: 25px;
    background-color: #0984FF;
    border-radius: 4px;
    transition: width 1s linear;
}

/* Geblinkt wird nur, wenn zur Uebergabe ein Jingle eingereiht ist:
   gruen, solange noch Zeit bleibt, rot in den letzten zwanzig
   Sekunden. Farben und Takt aus mods/autodj_status_neu.php. */
.adj-balken.adj-gruen {
    animation: adj-gruen 1s infinite;
}

.adj-balken.adj-rot {
    animation: adj-rot 1s infinite;
}

@keyframes adj-gruen {
    from { background-color: #0984FF; }
    to   { background-color: green; }
}

@keyframes adj-rot {
    from { background-color: #0984FF; }
    to   { background-color: red; }
}

.adj-titel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    line-height: 25px;
    padding: 0 4px;
    color: #fff;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adj-rest {
    float: right;
    color: #fff;
    padding-left: 8px;
}

/* Die Karte des Mod-Chat-Fensters traegt im Altmarkup eine feste
   Hoehe von 355 Pixeln - der Verlauf darin ist aber hoeher und ragte
   heraus. Kopfzeile und Verlauf zusammen ergeben die neue Hoehe. */
#modbox_chat > .card {
    height: auto !important;
    max-height: 780px;
}

/* ------------------------------------------------------------------
   Kniffelblatt in der rechten Seitenleiste
   ------------------------------------------------------------------
   Die Klassen, die ich vorher benutzt hatte, gab es im uebernommenen
   CSS gar nicht - deshalb sah man nicht, wo etwas einzutragen ist.

   Das Altsystem faerbt eintragbare Felder mit #66CC99 und schwarzer
   Schrift (kniffelblatt.php). Das ist hier uebernommen und um das
   ergaenzt, was auf 250 Pixel Breite noetig ist, damit die Tabelle
   lesbar bleibt.
*/
.kb-hinweis {
    text-align: center;
    padding: 4px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    margin-bottom: 4px;
}

.kb-hinweis.kb-dran {
    background: rgba(102, 204, 153, 0.35);
    font-weight: bold;
}

.kb-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #fff;
}

.kb-tabelle th {
    padding: 4px 3px;
    font-size: 11px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.kb-tabelle th:first-child,
.kb-tabelle td:first-child {
    text-align: left;
    padding-left: 4px;
}

.kb-tabelle td {
    padding: 3px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Ein Feld, in das jetzt eingetragen werden kann. Es zeigt, was der
   Wurf dort braechte - deshalb faellt es auf. */
.kb-tabelle td.kb-offen {
    background: #66CC99;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
}

.kb-tabelle td.kb-offen:hover {
    background: #8ae0b5;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Noch frei, aber gerade nicht dran. */
.kb-tabelle td.kb-frei {
    background: rgba(255, 255, 255, 0.06);
}

.kb-tabelle td.kb-belegt {
    color: rgba(255, 255, 255, 0.75);
}

.kb-tabelle tr.kb-zwischen td,
.kb-tabelle tr.kb-summe td {
    background: rgba(0, 0, 0, 0.25);
    font-weight: bold;
}

.kb-tabelle tr.kb-summe td {
    font-size: 14px;
    border-top: 2px solid rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------------------
   Der Wuerfelbecher
   ------------------------------------------------------------------
   Der Becher steht nur vor dem ersten Wurf aufrecht. Danach bleibt er
   liegen, wo er ausgeschuettet hat - und wird von dort aus wieder
   aufgenommen, gewackelt und neu gekippt.

   Deshalb zwei Bewegungen: eine aus dem Stand, eine aus der Seitenlage.
   Beide enden gekippt.
*/
#becherpng {
    transform-origin: 50% 85%;
}

/* Die Ruhelage nach dem Wurf: auf der Seite, Muendung nach links. */
.kn-gekippt {
    transform: rotate(-78deg) translate(-16px, 6px);
}

@keyframes kn-wirft-aufrecht {
    0%   { transform: rotate(0deg) translate(0, 0); }
    8%   { transform: rotate(-16deg) translate(-3px, -7px); }
    16%  { transform: rotate(14deg) translate(3px, -3px); }
    24%  { transform: rotate(-15deg) translate(-3px, -8px); }
    32%  { transform: rotate(13deg) translate(2px, -2px); }
    40%  { transform: rotate(-12deg) translate(-2px, -6px); }
    48%  { transform: rotate(10deg) translate(2px, -1px); }
    56%  { transform: rotate(-6deg) translate(0, -3px); }
    /* kippen */
    72%  { transform: rotate(-88deg) translate(-20px, 4px); }
    /* ausschuetteln */
    82%  { transform: rotate(-70deg) translate(-13px, 8px); }
    91%  { transform: rotate(-84deg) translate(-18px, 5px); }
    /* und liegen bleiben */
    100% { transform: rotate(-78deg) translate(-16px, 6px); }
}

@keyframes kn-wirft-liegend {
    /* aufnehmen und aufrichten */
    0%   { transform: rotate(-78deg) translate(-16px, 6px); }
    14%  { transform: rotate(-10deg) translate(-2px, -6px); }
    /* wackeln */
    24%  { transform: rotate(14deg) translate(3px, -3px); }
    32%  { transform: rotate(-15deg) translate(-3px, -8px); }
    40%  { transform: rotate(13deg) translate(2px, -2px); }
    48%  { transform: rotate(-12deg) translate(-2px, -6px); }
    56%  { transform: rotate(8deg) translate(1px, -2px); }
    /* kippen */
    72%  { transform: rotate(-88deg) translate(-20px, 4px); }
    /* ausschuetteln */
    82%  { transform: rotate(-70deg) translate(-13px, 8px); }
    91%  { transform: rotate(-84deg) translate(-18px, 5px); }
    100% { transform: rotate(-78deg) translate(-16px, 6px); }
}

.kn-wirft {
    animation: kn-wirft-aufrecht 1.6s ease-in-out forwards;
}

.kn-wirft.kn-gekippt {
    animation: kn-wirft-liegend 1.6s ease-in-out forwards;
}

/* Ein Wuerfel, der aus dem gekippten Becher faellt: von rechts
   herein, ueberschlaegt sich zweimal und rollt aus. */
@keyframes kn-faellt {
    0% {
        opacity: 0;
        transform: translate(150px, -10px) rotate(-200deg) scale(0.75);
    }
    20% { opacity: 1; }
    55% {
        transform: translate(40px, 14px) rotate(-40deg) scale(1.06);
    }
    75% {
        transform: translate(6px, -6px) rotate(var(--kn-drehung, 10deg)) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--kn-drehung, 10deg)) scale(1);
    }
}

.kn-wuerfel {
    /* Die schiefe Lage bleibt immer - sie gehoert zum Wurf, nicht zur
       Bewegung. */
    transform: rotate(var(--kn-drehung, 0deg));
    margin-right: 6px;
    transition: opacity 0.2s, filter 0.2s;
}

/* Nur ein frisch geworfener Wuerfel faellt. `backwards` haelt ihn vor
   dem Start unsichtbar - sonst saehe man das Ergebnis, bevor der
   Becher gekippt hat. */
.kn-wuerfel.kn-frisch {
    animation: kn-faellt 0.75s cubic-bezier(0.25, 0.9, 0.35, 1) backwards;
    animation-delay: var(--kn-verzug, 0s);
}

/* Waehrend der Becher schuettelt, sind die Wuerfel darin - also weg. */
.kn-wuerfel.kn-imbecher {
    opacity: 0;
}

/* ------------------------------------------------------------------
   Ein Wuerfel, der liegen bleibt
   ------------------------------------------------------------------
   Vorher nur blasser - das war kaum zu sehen. Jetzt sitzt er sichtbar
   tiefer, bekommt einen Rahmen und eine Unterlage, als haette man ihn
   zur Seite gelegt.
*/
.kn-wuerfel.kn-liegt {
    opacity: 1;
    filter: brightness(0.85);
    outline: 3px solid #66CC99;
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.45);
    transform: rotate(var(--kn-drehung, 0deg)) translateY(10px) scale(0.92);
}

.kn-wuerfel:not(.kn-liegt):hover {
    filter: brightness(1.15);
    cursor: pointer;
}

#wurffeld {
    position: relative;
    padding-bottom: 14px;
}

/* Beschriftung unter dem Wuerfelfeld: was liegen bleibt. */
.kn-liegtext {
    font-size: 11px;
    color: #66CC99;
    text-align: center;
    margin-top: 2px;
    min-height: 14px;
}

/* Wuerfelfeld und Becher stehen nebeneinander in einer Zeile, die
   nicht umbrechen darf. Im Altsystem war der Bereich fest 450 Pixel
   breit; der Kasten ueber dem Chat ist aber schmaler, und dann rutschte
   der Becher unter die Wuerfel - dort war er halb abgeschnitten und
   liess sich nicht mehr anklicken. */
.kn-tisch {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.kn-tisch #wurffeld {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 100px;
    text-align: right;
    white-space: nowrap;
}

.kn-tisch #wbecher {
    flex: 0 0 auto;
    /* Gekippt legt sich der Becher gut fuenfzig Pixel nach links -
       ohne diesen Abstand liegt er dann auf den Wuerfeln. */
    margin-left: 52px;
}

/* Die Klickflaeche des Bechers.

   Gemessen: Aufrecht steht das Bild bei x 431..544 / y 52..172, gekippt
   liegt es bei x 378..519 / y 94..230 - also gut fuenfzig Pixel weiter
   links und knapp sechzig tiefer. Ein Rahmen um das Bild deckt beide
   Lagen nicht ab, deshalb spannt eine eigene Flaeche dahinter den
   ganzen Bereich auf. Sie liegt unter den Wuerfeln, damit die weiter
   anklickbar bleiben. */
#wbecher {
    position: relative;
}

#becherlink {
    position: absolute;
    left: -72px;
    top: -10px;
    right: -10px;
    bottom: -72px;
    display: block;
    z-index: 1;
}

#becherpng {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.kn-wuerfel {
    position: relative;
    z-index: 3;
}

/* Der Hinweis gehoert unter die Wuerfel, nicht unter die ganze Zeile -
   sonst legt sich der gekippte Becher darueber. */
.kn-tisch .kn-links {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 330px;
}

/* Die Wuerfel liegen auf der Hoehe, auf der der gekippte Becher seine
   Muendung hat - dort kommen sie schliesslich heraus. */
.kn-tisch #wurffeld {
    padding-top: 58px;
}

/* Nachfrage vor dem Aufgeben. */
.kn-nachfrage {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kn-nachfrage-kasten {
    background: #324277;
    color: #fff;
    border: 1px solid #7091AA;
    border-radius: 6px;
    padding: 20px 22px;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.kn-nachfrage-kasten h4 {
    margin: 0 0 8px;
    color: #fff;
}

.kn-nachfrage-kasten p {
    font-size: 13px;
    margin-bottom: 16px;
}

.kn-nachfrage-knoepfe {
    text-align: right;
}

/* Der Spieltisch unter Wuerfeln und Becher. Das Bild traegt seinen
   Holzrahmen mit, deshalb wird es auf die volle Flaeche gezogen statt
   beschnitten - bei einer ruhigen Filzflaeche faellt das Strecken
   nicht auf, ein halber Rahmen dagegen schon. */
#kniffel:not(:empty) {
    background: #16323a url(/img/wuerfel/kniffeltisch.jpg) center / 100% 100% no-repeat;
    border-radius: 6px;
}

/* Der Becher steht mittig zwischen Balken und Tischkante, damit er
   vor dem ersten Wurf nicht in der Ecke haengt. */
.kn-tisch #wbecher {
    align-self: center;
    /* Der Balken ueber der Zeile zaehlt fuer die Flexbox nicht mit,
       deshalb saesse der Becher um dessen halbe Hoehe zu hoch. */
    margin-top: 13px;
}

/* Was der Gegner wirft, gehoert ebenfalls in die Mitte der Flaeche. */
#gegner_wurffeld {
    padding: 36px 0 26px;
}

/* Steht noch nichts auf dem Tisch, sagt das Feld, wie es weitergeht. */
.kn-anstoss {
    color: #66CC99;
    font-size: 13px;
    text-align: center;
    padding-right: 10px;
    white-space: normal;
}

/* Die Kniffel-Hilfe in der Seitenleiste. */
.kn-hilfe {
    font-size: 12px;
    padding: 8px 10px;
    text-align: left;
    line-height: 1.45;
}

.kn-hilfe h4 {
    font-size: 13px;
    color: #66CC99;
    margin: 10px 0 3px;
}

.kn-hilfe p {
    margin-bottom: 6px;
}

/* Die Smiley-Auswahl der Shoutbox.

   Masse und Farben aus dem Altsystem (.smileyrechteck in index.php):
   Kacheln von 110 mal 100 Pixeln, in denen der Smiley in seiner
   eigenen Groesse sitzt. Ihn zu verkleinern nimmt ihm die Erkennbarkeit -
   viele sind gezeichnete Szenen, keine runden Gesichter. */
.smileyrechteck {
    height: 100px;
    width: 110px;
    background-image: linear-gradient(#1D096F, #210B7D);
    margin-right: 5px;
    margin-bottom: 5px;
    border: solid #7091AA;
    border-width: 1px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Was groesser ist als die Kachel, wird eingepasst - alles andere
   behaelt seine Groesse. */
.smileyrechteck img {
    max-width: 106px;
    max-height: 96px;
}

.sm-gruppe {
    color: #66CC99;
    font-size: 12px;
    text-align: left;
    margin: 10px 0 4px;
    border-bottom: 1px solid rgba(112, 145, 170, 0.4);
    padding-bottom: 3px;
    clear: both;
}

/* Die Rangfolge der Ebenen.

   Die uebernommenen Stylesheets bringen Werte mit, die nicht
   zueinander passen: Der Kopfbereich liegt beim Scrollen auf 1030,
   die Shoutbox aber auf 1131 und die rechte Leiste auf 1200 - beide
   schoben sich also ueber das Menue. Und weil die Fenster auf dem
   Bootstrap-Standard 1050 stehen, lagen sogar die Leisten darueber.

   Von unten nach oben:

     Shoutbox links      1131  (aus jside-menu.css)
     Leiste rechts       1200  (aus dashboard.css)
     Sendeplan           1999  (im Markup)
     Fenster             2200  hier

   Der Kopfbereich bleibt auf seinen 1030 und damit unter den Leisten:
   Sie sollen ganz oben stehen, mit Titel und Schliesskreuz in den
   obersten Pixeln. Geaendert wird nur, was noetig ist. */

/* Die Ebenen der Bootstrap-Fenster.
 *
 * Das Fenster selbst liegt ueber allem, auch ueber den Kaestchen an
 * den Raendern (z-index 1999).
 *
 * Der graue Schleier dahinter aber muss darunter bleiben. Er stand
 * hier eine Zeit lang auf 2190 und lag damit ueber dem
 * Sendeplanfenster (1999): Der Knopf "zum Sendeplan" traegt aus dem
 * Altsystem ein data-toggle="modal", Bootstrap legte den Schleier an,
 * und der Wochenplan lag grau und unbedienbar darunter. */
.modal {
    z-index: 2200;
}

.modal-backdrop {
    z-index: 1040;
}

/* Die Kaestchen am linken Rand: Shoutbox und Kniffel.

   Bauart und Masse von denen der Moderation am rechten Rand
   uebernommen (home.html.twig), nur seitenverkehrt. Sie ersetzen die
   beiden Knoepfe im Kopfbereich - den Burger neben dem Logo und den
   Wuerfel neben dem Profilbild. */
/* Die Knopfleiste sitzt an einem Rand und laesst sich daran entlang
   verschieben. Die Knoepfe darin stehen nicht mehr jeder fuer sich
   fest, sondern reihen sich in ihr auf. */
.pk-knopfleiste {
    position: fixed;
    z-index: 1999;
    display: flex;
    gap: 6px;
    transition: left 0.5s ease-in-out, right 0.5s ease-in-out;
}

/* An den Seitenraendern untereinander, oben und unten nebeneinander. */
.pk-knopfleiste[data-rand="links"],
.pk-knopfleiste[data-rand="rechts"] {
    flex-direction: column;
}

.pk-knopfleiste[data-rand="oben"],
.pk-knopfleiste[data-rand="unten"] {
    flex-direction: row;
}

.pk-knopfleiste[data-rand="links"] { left: 0; }
.pk-knopfleiste[data-rand="rechts"] { right: 0; }
/* Am oberen Rand heisst am Rand des Fensters, nicht unter dem Menue -
   die Leiste liegt ohnehin darueber. */
.pk-knopfleiste[data-rand="oben"] { top: 6px; }
.pk-knopfleiste[data-rand="unten"] { bottom: 6px; }

/* Waehrend des Ziehens keine Verzoegerung - sonst laeuft die Leiste
   dem Finger hinterher. */
.pk-knopfleiste.pk-zieht {
    transition: none;
    opacity: 0.85;
}

/* Der Griff zum Anfassen. */
.pk-knopfgriff {
    width: 22px;
    height: 22px;
    align-self: center;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(50, 66, 119, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    cursor: grab;
    font-size: 13px;
}

.pk-knopfleiste.pk-zieht .pk-knopfgriff {
    cursor: grabbing;
}

.pk-knopfleiste[data-rand="oben"] .pk-knopfgriff,
.pk-knopfleiste[data-rand="unten"] .pk-knopfgriff {
    transform: rotate(90deg);
}

/* Ein einzelner Knopf. Bauart und Farben von den Kaesten der
   Moderation uebernommen, nur ohne deren feste Lage - die gibt jetzt
   die Leiste vor. */
.pk-randknopf {
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    background: rgba(50, 66, 119, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    text-decoration: none;
}

.pk-randknopf:hover {
    background: rgba(66, 88, 155, 0.95);
    color: #fff;
}

.pk-randknopf i {
    font-size: 20px;
}

.pk-randknopf img {
    width: 26px;
    height: 26px;
}

/* Die Zahl sitzt immer zur Seitenmitte hin.

   Aussen an einer Randleiste steht sie halb ueber dem Bildrand und
   ist kaum zu lesen. Deshalb richtet sie sich nach dem Rand, an dem
   die Leiste haengt: links angedockt nach rechts, rechts angedockt
   nach links. */
.pk-randknopf-zahl {
    position: absolute;
    top: -6px;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    line-height: 18px;
    font-size: 11px;
    border-radius: 9px;
    z-index: 2;
}

.pk-knopfleiste[data-rand="links"] .pk-randknopf-zahl {
    right: -6px;
}

.pk-knopfleiste[data-rand="rechts"] .pk-randknopf-zahl {
    left: -6px;
    right: auto;
}

/* Oben und unten ist keine Seite naeher als die andere - dann steht
   sie rechts, wie ueberall sonst auf der Seite. */
.pk-knopfleiste[data-rand="oben"] .pk-randknopf-zahl,
.pk-knopfleiste[data-rand="unten"] .pk-randknopf-zahl {
    right: -6px;
}

.pk-knopfleiste[data-rand="unten"] .pk-randknopf-zahl {
    top: auto;
    bottom: -6px;
}



/* Die beiden Knoepfe im Kopfbereich sind ersetzt. Ausgeblendet statt
   entfernt: An `#sbbutton` haengen Funktionen des uebernommenen
   Skripts (Zaehler zuruecksetzen, Blinken abschalten), die weiter
   ueber ihre Kennung angesprochen werden. */
#sbbutton,
#kniffelbutton {
    display: none !important;
}

/* Ohne den Burger braucht seine Huelle keinen Platz mehr - das Logo
   rueckt an den linken Rand des Kopfbereichs. Die sechzig Pixel
   Abstand am Bild hielten genau diese Luecke frei. */
.header .menubar {
    display: none;
}

.header-brand-img.desktop-logo {
    margin-left: 0;
}

/* Die Leisten stehen ganz oben - Kopfzeile und Schliesskreuz sitzen
   in den obersten Pixeln, so wie im Altsystem. Im geoeffneten Zustand
   liegen sie damit ueber dem Seitenkopf und verdecken links das Logo;
   tiefer anzusetzen hiesse, oben einen leeren Streifen zu haben. */
.header-fixed {
    z-index: 1030;
}

/* Die Kaestchen fahren mit der Leiste hinaus, statt sich von ihr
   verdecken zu lassen - sie bleiben an ihrem Rand haengen. Die
   Shoutbox ist 250 Pixel breit, die rechte Leiste ebenso. */
/* Steht eine Leiste offen, rueckt die Knopfleiste daneben - sonst
   verschwaende sie dahinter. Nur wenn sie am selben Rand sitzt. */
body.pk-shoutbox-auf .pk-knopfleiste[data-rand="links"] {
    left: 250px;
}

body.pk-kniffel-auf .pk-knopfleiste[data-rand="rechts"] {
    right: 250px;
}

/* Zwei Leisten am selben Rand sollen sich nicht ueberdecken. */
.pk-knopfleiste[data-rand="links"] { left: 0; }
.pk-knopfleiste[data-rand="rechts"] { right: 0; }

/* Das Menü im Mod-Chat.

   Im Altsystem standen neun gleich aussehende Kästchen untereinander,
   jedes nur mit seinem Namen beschriftet - man musste jedes einzeln
   lesen. Hier trägt jeder Punkt ein Sinnbild und eine Zeile, die sagt,
   was er tut; Überschriften trennen die Gruppen. */
.mod-menue {
    padding: 10px 8px 14px;
    text-align: left;
}

.mod-menue-gruppe {
    color: #66CC99;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0 6px 2px;
    border-bottom: 1px solid rgba(112, 145, 170, 0.35);
    padding-bottom: 4px;
}

.mod-menue-gruppe:first-child {
    margin-top: 0;
}

.mod-menue-punkt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 5px;
    background: rgba(50, 66, 119, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s;
}

.mod-menue-punkt:hover,
.mod-menue-punkt:focus {
    background: rgba(66, 88, 155, 0.9);
    color: #fff;
    text-decoration: none;
}

/* Das Sinnbild in fester Breite, damit die Beschriftungen
   untereinander bündig stehen. */
.mod-menue-punkt > i {
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: #66CC99;
    flex: 0 0 auto;
}

.mod-menue-punkt > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mod-menue-punkt strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.mod-menue-punkt small {
    font-size: 11px;
    opacity: 0.72;
    line-height: 1.3;
}

/* Der Weg zurück gehört nicht zu den Aufgaben - er steht abgesetzt. */
.mod-menue-zurueck {
    margin-top: 14px;
    background: transparent;
    border-style: dashed;
}

/* Die Unterseiten des Mod-Menüs.

   Im Altsystem stand dort Fließtext über einer Reihe gleich
   aussehender Kästchen. Hier hat jede Seite eine Überschrift, die
   Erklärung steht in kurzen Zeilen, und Werte stehen in einer
   Tabelle statt hintereinander im Satz. */
.mod-seite {
    padding: 10px 10px 14px;
    text-align: left;
    color: #fff;
}

.mod-seite-titel {
    font-size: 15px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(112, 145, 170, 0.35);
    color: #fff;
}

.mod-seite-titel i {
    color: #66CC99;
    margin-right: 6px;
}

.mod-seite-text {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
    opacity: 0.9;
}

/* Was der Reihe nach zu tun ist. */
.mod-seite-schritte {
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 12px;
    padding-left: 18px;
}

.mod-seite-schritte li {
    margin-bottom: 4px;
    opacity: 0.9;
}

.mod-seite-schritte em {
    color: #66CC99;
    font-style: normal;
}

.mod-seite-gruppe {
    color: #66CC99;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 12px 0 5px;
}

/* Werte gehören in zwei Spalten, nicht in einen Satz. */
.mod-seite-daten {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}

.mod-seite-daten td {
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}

.mod-seite-daten td:first-child {
    width: 42%;
    opacity: 0.7;
}

.mod-seite-hinweis {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 8px;
}

/* Die Zeiten als Raster - so trifft man die richtige mit einem Blick. */
.mod-seite-zeiten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.mod-seite-zeiten a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 0 7px;
    border-radius: 5px;
    background: rgba(50, 66, 119, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}

.mod-seite-zeiten a:hover {
    background: rgba(66, 88, 155, 0.9);
    color: #fff;
}

.mod-seite-zeiten small {
    font-size: 10px;
    opacity: 0.6;
    font-weight: 400;
    margin-top: 3px;
}

/* Die eine Handlung, um die es auf der Seite geht. */
.mod-seite-tat {
    display: block;
    text-align: center;
    padding: 11px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: rgba(102, 204, 153, 0.9);
    color: #08351f;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.mod-seite-tat:hover {
    background: #66CC99;
    color: #08351f;
    text-decoration: none;
}

.mod-seite-tat i {
    margin-right: 6px;
}

/* Ist die Video-Box an, sieht man es an der Farbe. */
.mod-seite-stand {
    font-size: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background: rgba(50, 66, 119, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mod-seite-stand i {
    font-size: 9px;
    margin-right: 6px;
    opacity: 0.5;
}

.mod-seite-stand.mod-seite-an i {
    color: #66CC99;
    opacity: 1;
}

/* Die Fenster der Moderation lassen sich ziehen und in der Größe
   ändern (jQuery UI, siehe tail.html.twig).

   Beide tragen im Markup `transition-duration: 0.5s`. Beim Ziehen
   setzt jQuery UI fortlaufend `left` und `top` - und jede dieser
   Änderungen lief dann durch eine halbe Sekunde Übergang. Das Fenster
   schwamm dem Zeiger hinterher und schien träge zu reagieren.

   Während des Ziehens und des Größenänderns gilt deshalb kein
   Übergang. jQuery UI setzt dafür eigene Klassen. */
.ui-draggable-dragging,
.ui-resizable-resizing {
    transition: none !important;
}

/* Der Zeiger zeigt, dass man das Fenster anfassen kann - am Kopf,
   nicht mitten im Inhalt. */
#modbox_wubo > .card > .card-header,
#modbox_chat > .card > .card-header {
    cursor: move;
}

/* Die Anfasser zum Ändern der Fenstergröße.

   jQuery UI legt sie an, bringt sein Aussehen aber aus einem
   Stylesheet mit, das hier nicht geladen ist - sie waren also
   unsichtbar und nur blind zu treffen. Statt das ganze Theme
   nachzuladen, bekommen sie hier ihre Maße. */
.ui-resizable-handle {
    position: absolute;
    z-index: 90;
}

.ui-resizable-se {
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    /* Drei Striche, wie man sie von Größenanfassern kennt. */
    background:
        linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.5) 6px 8px, transparent 8px),
        linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,0.5) 10px 12px, transparent 12px),
        linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.5) 14px 16px, transparent 16px);
}

.ui-resizable-e { right: -3px; top: 0; width: 8px; height: 100%; cursor: e-resize; }
.ui-resizable-w { left: -3px; top: 0; width: 8px; height: 100%; cursor: w-resize; }
.ui-resizable-s { bottom: -3px; left: 0; height: 8px; width: 100%; cursor: s-resize; }
.ui-resizable-n { top: -3px; left: 0; height: 8px; width: 100%; cursor: n-resize; }

/* Der Inhalt darf nicht über den Rand hinauslaufen, sonst liegt er
   über dem Anfasser. */
#modbox_wubo,
#modbox_chat {
    overflow: hidden;
}

/* Die Liste der Hilfe-Videos.

   Jeder Eintrag zeigt ein Bild aus dem Video selbst - der Browser holt
   es sich mit `preload="metadata"`, es braucht also keine eigenen
   Vorschaudateien. Untereinander statt nebeneinander: Die Titel sind
   verschieden lang, und es kommen weitere Videos dazu. */
.hv-eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: rgba(50, 66, 119, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.hv-eintrag:hover {
    background: rgba(66, 88, 155, 0.9);
    color: #fff;
    text-decoration: none;
}

.hv-bild {
    position: relative;
    flex: 0 0 auto;
    width: 140px;
    height: 79px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    display: block;
}

.hv-bild video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Das Zeichen liegt über dem Bild - es sagt, dass hier etwas läuft. */
.hv-bild i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 34px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.hv-eintrag:hover .hv-bild i {
    color: #66CC99;
}

.hv-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hv-text strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.hv-text small {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 2px;
}

/* Was in den Spielen los ist - im Kasten unter der Höreranzeige.

   Dort standen bisher die Namen der Anwesenden. Die sieht man im
   Chat; hier lädt der Platz besser zum Mitspielen ein. Jeder Block
   führt in sein Spiel. */
.sp-uebersicht {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-block {
    display: block;
    padding: 9px 10px;
    border-radius: 6px;
    background: rgba(50, 66, 119, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.sp-block:hover {
    background: rgba(66, 88, 155, 0.9);
    color: #fff;
    text-decoration: none;
}

.sp-kopf {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}

.sp-kopf img {
    width: 20px;
    height: 20px;
}

.sp-kopf i {
    color: #66CC99;
    font-size: 17px;
    width: 20px;
    text-align: center;
}

.sp-kopf strong {
    font-size: 13px;
    font-weight: 600;
}

/* Wartet jemand, sieht man es an der Zahl - wie an den Randknöpfen. */
.sp-zahl {
    margin-left: auto;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    line-height: 18px;
    font-size: 11px;
    border-radius: 9px;
}

.sp-zeile {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.8;
}

/* Was gerade auf einen wartet, steht in Grün. */
.sp-zeile.sp-dran {
    color: #66CC99;
    opacity: 1;
}

.sp-stand {
    display: block;
    font-size: 11px;
    opacity: 0.6;
    margin-top: 3px;
}

.sp-stand b {
    opacity: 1;
    font-weight: 600;
}

/* Ein Knopf, der auf sich aufmerksam macht.

   Wer aus der Spieleübersicht zum Knobeln kommt, soll den Würfel in
   der Shoutbox sofort finden - sie ist voll mit Knöpfen. Er wippt
   dreimal und leuchtet dabei, dann ist Ruhe: Eine Bewegung, die nicht
   aufhört, stört beim Lesen. */
@keyframes pk-winkt {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(102, 204, 153, 0); }
    12%      { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(102, 204, 153, 0.45); }
    24%      { transform: scale(1); box-shadow: 0 0 0 12px rgba(102, 204, 153, 0); }
    36%      { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(102, 204, 153, 0.45); }
    48%      { transform: scale(1); box-shadow: 0 0 0 12px rgba(102, 204, 153, 0); }
    60%      { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(102, 204, 153, 0.45); }
    72%      { transform: scale(1); box-shadow: 0 0 0 12px rgba(102, 204, 153, 0); }
}

.pk-winkt {
    animation: pk-winkt 4s ease-in-out;
    position: relative;
    z-index: 5;
}

/* Wer die Bewegung abgestellt hat, bekommt stattdessen einen Rahmen -
   auffallen soll der Knopf trotzdem. */
@media (prefers-reduced-motion: reduce) {
    .pk-winkt {
        animation: none;
        outline: 3px solid #66CC99;
        outline-offset: 2px;
    }
}