/* ==================================================================
 * Live-Voting
 *
 * Das Banner fuer alle (pk-abst-*) und die Oberflaeche der Leitung
 * (ab-*). Die Farben kommen vom Cookie-Hinweis, damit beides wie aus
 * einem Guss wirkt: dunkles Blau im Verlauf, ein tuerkiser Rand, und
 * als Akzent das Tuerkis und das Gold des Logos.
 *
 * Das Banner sitzt unten links. Unten rechts stehen schon der
 * Cookie-Hinweis und das Hilfefenster; links unten ist auf jedem
 * gemessenen Bildschirm frei - unter dem Chat, neben der Knopfleiste.
 *
 * Am Handy oben in der Kopfzeile, anstelle des Logos. Unten stand es
 * einmal ueber der Reiterleiste - und damit auf den Knoepfen des
 * Chats: Anmelden, fett, kursiv. Oben verdeckt es nichts, was man
 * braucht: Das Logo ist nur ein Weg zur Startseite, auf der man
 * ohnehin ist.
 *
 * Die Ebene (1070) liegt ueber der Kopfzeile (1030), sonst liesse sich
 * das Logo nicht ueberdecken - aber unter dem Handymenue (1250), den
 * Chatfenstern (1080) und allen Fenstern der Seite (2200). Hier stand
 * einmal 11000; dann lag das Voting auch ueber einem geoeffneten
 * Fenster.
 * ================================================================== */

.pk-abst {
    --abst-tuerkis: #26c2f7;
    --abst-gold:    #f2c94c;
    --abst-gruen:   #6ee7b7;
    --abst-rot:     #ff4d6a;
    --abst-schrift: #e8eef7;
    --abst-blass:   #9fb0c8;

    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1070;
    width: min(400px, calc(100vw - 32px));
    color: var(--abst-schrift);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.pk-abst[hidden] {
    display: none !important;
}

.pk-abst--offen {
    width: min(440px, calc(100vw - 32px));
}

.pk-abst--klein {
    width: auto;
    max-width: calc(100vw - 32px);
}

/* Am Handy: in der Kopfzeile, zwischen Menue (links) und Vollbild und
   Anmeldung (rechts). Genau dort steht sonst das Logo. */
body.pk-mobil .pk-abst {
    top: 5px;
    left: 56px;
    right: 106px;
    bottom: auto;
    width: auto;
    max-width: none;
}

/* Klappt das Burgermenue auf, weicht das Voting - wie die Radiozeile
   (mobil.css). Sonst schwebte es ueber dem oberen Rand des Menues. */
body.pk-mobil.active .pk-abst {
    display: none !important;
}

/* Aufgeklappt: als Blatt unter Kopfzeile und Radiozeile, auf ganzer
   Breite. Unter der Radiozeile, nicht darueber: Sie liegt auf einer
   hoeheren Ebene (1300) und verdeckte sonst den Kopf des Blatts samt
   dem Knopf zum Verkleinern. So bleibt auch der Stummschalter immer
   erreichbar. Wo die Radiozeile endet, misst abstimmung.js nach und
   legt es in --abst-oben ab; die Rechnung dahinter gilt nur, falls
   das Messen einmal nichts findet. */
body.pk-mobil .pk-abst--offen {
    top: var(--abst-oben, calc(var(--mob-kopf, 64px) + var(--mob-player, 48px) + 6px));
    left: 8px;
    right: 8px;
}

/* ---- Die Karte --------------------------------------------------- */

.pk-abst-karte {
    position: relative;
    overflow: hidden;
    padding: 14px 16px 16px;
    border-radius: 16px;
    border: 1px solid rgba(38, 194, 247, .45);
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(38, 194, 247, .16) 0%, rgba(38, 194, 247, 0) 60%),
        linear-gradient(165deg, #1b3a6e 0%, #0f2346 55%, #0a1630 100%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: pk-abst-rein .38s cubic-bezier(.2, .8, .2, 1);
}

.pk-abst--offen .pk-abst-karte {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.pk-mobil .pk-abst--offen .pk-abst-karte {
    max-height: calc(100vh - var(--abst-oben, 118px) - var(--mob-reiter, 58px)
                     - env(safe-area-inset-bottom, 0px) - 14px);
    animation: pk-abst-runter .3s cubic-bezier(.2, .8, .2, 1);
}

@keyframes pk-abst-runter {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}

/* Die Leiste in der Kopfzeile: so hoch wie das Logo, eckiger als die
   Pille am Rechner, damit sie in die Zeile passt. */
body.pk-mobil .pk-abst-pille-rahmen {
    height: 54px;
}

body.pk-mobil .pk-abst-pille {
    flex: 1;
    max-width: none;
    height: 100%;
    padding: 6px 10px;
    gap: 8px;
    border-radius: 12px;
}

body.pk-mobil .pk-abst-pille-text span {
    max-width: none;
    font-size: 12.5px;
}

body.pk-mobil .pk-abst-pille-text strong {
    font-size: 10px;
}

/* Der Pfeil kostet in der engen Zeile mehr, als er sagt. */
body.pk-mobil .pk-abst-pille-pfeil {
    display: none;
}

body.pk-mobil .pk-abst-pille-zu {
    width: 26px;
    height: 26px;
}

/* Eben erschienen: dreimal aufleuchten, dann Ruhe. */
.pk-abst--neu .pk-abst-pille {
    animation: pk-abst-rein .3s cubic-bezier(.2, .8, .2, 1),
               pk-abst-aufmerksam 1.1s ease-in-out .3s 3;
}

@keyframes pk-abst-aufmerksam {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); border-color: rgba(38, 194, 247, .55); }
    50%      { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 5px rgba(38, 194, 247, .35); border-color: #26c2f7; }
}

@keyframes pk-abst-rein {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* Der Hinweis ist flach: Er erscheint von selbst ueber dem Chat. */
.pk-abst--hinweis .pk-abst-karte {
    padding: 12px 16px 13px;
}

.pk-abst--hinweis .pk-abst-frage {
    margin: 8px 0 0;
}

.pk-abst-hinweisfuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
}

.pk-abst-hinweisfuss .pk-abst-knoepfe {
    flex: 0 1 auto;
    margin-top: 0;
}

.pk-abst-hinweisfuss .pk-abst-knopf {
    flex: 0 0 auto;
    padding: 8px 14px;
}

.pk-abst-hinweisfuss .pk-abst-unter {
    margin: 0 0 0 auto;
    white-space: nowrap;
}

/* ---- Kopf: Live-Zeichen, Uhr, Knoepfe ---------------------------- */

.pk-abst-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.pk-abst-marke {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--abst-tuerkis);
}

.pk-abst--vorbei .pk-abst-marke {
    color: var(--abst-blass);
}

.pk-abst-puls {
    position: relative;
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--abst-rot);
}

.pk-abst-puls::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--abst-rot);
    animation: pk-abst-puls 1.6s ease-out infinite;
}

@keyframes pk-abst-puls {
    0%   { transform: scale(.55); opacity: .9; }
    100% { transform: scale(1.7);  opacity: 0; }
}

.pk-abst-punkt-aus {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7a90;
}

.pk-abst-uhr {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #cfe3ff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pk-abst-uhr:empty {
    display: none;
}

.pk-abst-uhr-knapp {
    background: rgba(255, 77, 106, .2);
    color: #ffc2cc;
}

.pk-abst-kopfknoepfe {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.pk-abst-rund {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--abst-schrift);
    cursor: pointer;
    transition: background .15s;
}

.pk-abst-rund:hover,
.pk-abst-rund:focus-visible {
    background: rgba(255, 255, 255, .18);
    outline: none;
}

/* Die ablaufende Zeit als duenner Strich unter dem Kopf. */
.pk-abst-zeitleiste {
    height: 3px;
    margin: 9px -16px 0;
    background: rgba(255, 255, 255, .06);
}

.pk-abst-zeitleiste > div {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--abst-tuerkis), #8be6ff);
    transition: width 1s linear;
}

/* ---- Frage und Unterzeile ---------------------------------------- */

.pk-abst-frage {
    margin: 10px 0 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pk-abst-frage-gross {
    font-size: 17px;
}

.pk-abst-unter {
    margin: 4px 0 0;
    color: var(--abst-blass);
    font-size: 12px;
}

.pk-abst-gezaehlt {
    color: var(--abst-gruen);
    font-weight: 600;
}

/* ---- Knoepfe ----------------------------------------------------- */

.pk-abst-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pk-abst-knopf {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: var(--abst-schrift);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}

.pk-abst-knopf:hover:not(:disabled),
.pk-abst-knopf:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
    outline: none;
}

.pk-abst-knopf:active:not(:disabled) {
    transform: scale(.98);
}

.pk-abst-knopf-haupt {
    border-color: transparent;
    background: linear-gradient(180deg, #45d2fc 0%, #1ba6df 100%);
    color: #05213a;
    box-shadow: 0 6px 18px rgba(38, 194, 247, .35);
}

.pk-abst-knopf-haupt:hover:not(:disabled),
.pk-abst-knopf-haupt:focus-visible {
    background: linear-gradient(180deg, #6adcfd 0%, #26b3ea 100%);
    border-color: transparent;
}

.pk-abst-knopf:disabled {
    opacity: .45;
    cursor: default;
    box-shadow: none;
}

.pk-abst-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--abst-gold);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Reiter: Abstimmen | Ergebnis -------------------------------- */

.pk-abst-reiter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 12px 0 14px;
    padding: 3px;
    border-radius: 11px;
    background: rgba(0, 0, 0, .28);
}

.pk-abst-reiter button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--abst-blass);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pk-abst-reiter button:hover {
    color: #fff;
}

.pk-abst-reiter .pk-abst-reiter-an {
    background: rgba(38, 194, 247, .18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(38, 194, 247, .45);
}

.pk-abst-reiter-schloss {
    color: var(--abst-gold);
}

/* ---- Abstimmen --------------------------------------------------- */

.pk-abst-anleitung {
    margin: 0 0 8px;
    color: var(--abst-blass);
    font-size: 12px;
}

.pk-abst-wahl {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pk-abst-antwort {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: var(--abst-schrift);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}

.pk-abst-antwort:hover:not(:disabled),
.pk-abst-antwort:focus-visible {
    border-color: var(--abst-farbe, var(--abst-tuerkis));
    background: rgba(255, 255, 255, .07);
    outline: none;
}

.pk-abst-antwort:active:not(:disabled) {
    transform: scale(.99);
}

.pk-abst-antwort-an {
    border-color: var(--abst-farbe, var(--abst-tuerkis));
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 4px 0 0 var(--abst-farbe, var(--abst-tuerkis));
}

.pk-abst-antwort:disabled {
    cursor: default;
}

.pk-abst-antwort:disabled:not(.pk-abst-antwort-an) {
    opacity: .6;
}

.pk-abst-antwort-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Rund fuer eine Antwort, eckig fuer mehrere - wie man es von
   Formularen kennt. */
.pk-abst-haken {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    transition: border-color .15s, background .15s;
}

.pk-abst-antwort-mehr .pk-abst-haken {
    border-radius: 6px;
}

.pk-abst-antwort-an .pk-abst-haken {
    border-color: var(--abst-farbe, var(--abst-tuerkis));
    background: var(--abst-farbe, var(--abst-tuerkis));
}

.pk-abst-antwort-an .pk-abst-haken::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #0a1630;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.pk-abst-meldung {
    margin: 10px 0 0;
    color: #ffb4b4;
    font-size: 12.5px;
}

.pk-abst-meldung-gut {
    color: var(--abst-gruen);
    font-weight: 600;
}

.pk-abst-gezaehlt-gross {
    margin: 12px 0 0;
    color: var(--abst-gruen);
    font-size: 14px;
    font-weight: 600;
}

.pk-abst-anmelden {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(242, 201, 76, .35);
    border-radius: 10px;
    background: rgba(242, 201, 76, .1);
    color: #f7e3a3;
    font-size: 12.5px;
}

/* ---- Ergebnis: Balken -------------------------------------------- */

.pk-abst-balken {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pk-abst-balken-zeile {
    margin-bottom: 13px;
}

.pk-abst-balken-zeile:last-child {
    margin-bottom: 0;
}

.pk-abst-balken-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

.pk-abst-balken-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pk-abst-vorn .pk-abst-balken-text,
.pk-abst-vorn .pk-abst-legende-text {
    color: #fff;
    font-weight: 700;
}

.pk-abst-balken-wert {
    flex: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pk-abst-balken-wert b {
    color: #fff;
    font-weight: 700;
}

.pk-abst-balken-wert small {
    margin-left: 6px;
    color: var(--abst-blass);
    font-size: 11px;
}

.pk-abst-balken-bahn {
    height: 10px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}

.pk-abst-balken-fuellung {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--abst-farbe, var(--abst-tuerkis));
    background: linear-gradient(90deg,
        var(--abst-farbe, var(--abst-tuerkis)) 0%,
        color-mix(in srgb, var(--abst-farbe, var(--abst-tuerkis)) 65%, #fff) 100%);
    box-shadow: 0 0 14px -3px var(--abst-farbe, var(--abst-tuerkis));
    transition: width .75s cubic-bezier(.2, .8, .2, 1);
}

.pk-abst-deine {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(110, 231, 183, .2);
    color: #6ee7b7;
    font-size: 10px;
    font-weight: 700;
    vertical-align: 1px;
}

/* ---- Ergebnis: Kreis --------------------------------------------- */

.pk-abst-kreis {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pk-abst-ring {
    position: relative;
    flex: none;
    width: 150px;
}

.pk-abst-ring svg {
    display: block;
    width: 100%;
    height: auto;
}

.pk-abst-bogen {
    transition: stroke-dasharray .75s cubic-bezier(.2, .8, .2, 1),
                stroke-dashoffset .75s cubic-bezier(.2, .8, .2, 1);
}

.pk-abst-ring-mitte {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.pk-abst-ring-mitte b {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pk-abst-ring-mitte span {
    margin-top: 3px;
    color: var(--abst-blass);
    font-size: 11px;
}

.pk-abst-legende {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pk-abst-legende li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.pk-abst-legende i {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.pk-abst-legende-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pk-abst-legende b {
    flex: none;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Schmal: Ring oben, Legende darunter. */
@media (max-width: 420px) {
    .pk-abst .pk-abst-kreis {
        flex-direction: column;
        align-items: stretch;
    }

    .pk-abst .pk-abst-ring {
        width: 140px;
        margin: 0 auto;
    }
}

/* ---- Ergebnis: verdeckt ------------------------------------------ */

.pk-abst-verdeckt {
    padding: 14px 8px 6px;
    text-align: center;
}

.pk-abst-schloss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(242, 201, 76, .12);
    color: var(--abst-gold, #f2c94c);
}

.pk-abst-verdeckt strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.pk-abst-verdeckt span {
    display: block;
    margin-top: 4px;
    color: var(--abst-blass, #9fb0c8);
    font-size: 12.5px;
}

/* ---- Die Pille: verkleinert, aber immer da ----------------------- */

.pk-abst-pille-rahmen {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pk-abst-pille {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 330px;
    padding: 9px 14px 9px 13px;
    border: 1px solid rgba(38, 194, 247, .55);
    border-radius: 999px;
    background: linear-gradient(135deg, #1b3a6e 0%, #0e1f3f 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    color: var(--abst-schrift);
    font: inherit;
    text-align: left;
    cursor: pointer;
    animation: pk-abst-rein .3s cubic-bezier(.2, .8, .2, 1);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.pk-abst--live .pk-abst-pille {
    animation: pk-abst-rein .3s cubic-bezier(.2, .8, .2, 1), pk-abst-winken 4s ease-in-out 1s infinite;
}

.pk-abst-pille:hover,
.pk-abst-pille:focus-visible {
    border-color: var(--abst-tuerkis);
    transform: translateY(-1px);
    outline: none;
}

/* Ein leises Leuchten alle paar Sekunden: Es laeuft noch etwas. */
@keyframes pk-abst-winken {
    0%, 70%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
    80%           { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 4px rgba(38, 194, 247, .25); }
}

.pk-abst-pille .pk-abst-puls {
    margin-right: 0;
}

.pk-abst-pille-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.pk-abst-pille-text strong {
    color: var(--abst-tuerkis);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pk-abst--vorbei .pk-abst-pille-text strong {
    color: var(--abst-blass);
}

.pk-abst-pille-text span {
    overflow: hidden;
    max-width: 220px;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pk-abst-pille-zeit {
    margin-left: 8px;
    color: #cfe3ff;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.pk-abst-pille-zeit:empty {
    display: none;
}

.pk-abst-pille-zeit.pk-abst-uhr-knapp {
    color: #ffc2cc;
}

.pk-abst-pille-pfeil {
    flex: none;
    opacity: .7;
}

.pk-abst-pille-zu {
    flex: none;
    background: rgba(10, 22, 48, .85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

/* ---- Weniger Bewegung, wer das so eingestellt hat ---------------- */

@media (prefers-reduced-motion: reduce) {
    .pk-abst *,
    .pk-abst *::before,
    .pk-abst *::after,
    .ab-leitung * {
        animation: none !important;
        transition: none !important;
    }
}
/* ==================================================================
 * Die Oberflaeche der Leitung
 *
 * Im Chat in einem schmalen Fenster, in der Verwaltung auf der
 * ganzen Breite. Beide Orte sind dunkel; die Karten heben sich mit
 * einem Hauch Weiss ab statt mit einer eigenen Farbe.
 * ================================================================== */

.ab-leitung {
    --abst-tuerkis: #26c2f7;
    --abst-gold:    #f2c94c;
    --abst-gruen:   #6ee7b7;
    --abst-rot:     #ff4d6a;
    --abst-schrift: #e8eef7;
    --abst-blass:   #9fb0c8;

    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--abst-schrift);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

.ab-im-admin {
    max-width: 760px;
}

.ab-karte {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.ab-karte-aktuell {
    border-color: rgba(38, 194, 247, .45);
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(38, 194, 247, .14) 0%, rgba(38, 194, 247, 0) 60%),
        rgba(255, 255, 255, .035);
}

.ab-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.ab-zahl {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: var(--abst-blass);
    font-size: 11px;
    font-weight: 600;
}

.ab-klein {
    margin: 8px 0 0;
    color: var(--abst-blass);
    font-size: 12px;
}

.ab-leer {
    margin: 0;
    color: var(--abst-blass);
    font-size: 12.5px;
}

.ab-laedt {
    padding: 10px 0;
    color: var(--abst-blass);
    font-size: 12px;
}

/* ---- Meldungen --------------------------------------------------- */

.ab-meldung {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.ab-meldung-gut {
    border: 1px solid rgba(110, 231, 183, .4);
    background: rgba(110, 231, 183, .1);
    color: var(--abst-gruen);
}

.ab-meldung-weh {
    border: 1px solid rgba(255, 77, 106, .45);
    background: rgba(255, 77, 106, .12);
    color: #ffc2cc;
}

/* ---- Was gerade laeuft ------------------------------------------- */

.ab-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ab-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ab-status-laeuft {
    background: rgba(255, 77, 106, .15);
    color: #ff9aac;
}

.ab-status-beendet {
    background: rgba(255, 255, 255, .08);
    color: var(--abst-blass);
}

.ab-puls {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--abst-rot);
}

.ab-puls::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--abst-rot);
    animation: pk-abst-puls 1.6s ease-out infinite;
}

.ab-uhr {
    margin-left: auto;
    color: #cfe3ff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ab-frage {
    margin: 10px 0 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ab-merkmale {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.ab-merkmale li {
    padding: 2px 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: var(--abst-blass);
    font-size: 11.5px;
}

.ab-merkmale .ab-merkmal-warm {
    border-color: rgba(242, 201, 76, .45);
    color: #f7e3a3;
}

.ab-diagramm {
    margin-top: 4px;
}

.ab-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ---- Knoepfe ----------------------------------------------------- */

.ab-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ab-knopf {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: var(--abst-schrift);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ab-knopf:hover:not(:disabled),
.ab-knopf:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
    outline: none;
}

.ab-knopf:disabled {
    opacity: .5;
    cursor: default;
}

.ab-knopf-haupt {
    border-color: transparent;
    background: linear-gradient(180deg, #45d2fc 0%, #1ba6df 100%);
    color: #05213a;
}

.ab-knopf-haupt:hover:not(:disabled),
.ab-knopf-haupt:focus-visible {
    background: linear-gradient(180deg, #6adcfd 0%, #26b3ea 100%);
    border-color: transparent;
}

.ab-knopf-gold {
    border-color: transparent;
    background: linear-gradient(180deg, #f7d875 0%, #e0b12f 100%);
    color: #3a2a00;
}

.ab-knopf-gold:hover:not(:disabled) {
    background: linear-gradient(180deg, #fae29a 0%, #e9bd45 100%);
    border-color: transparent;
}

.ab-knopf-leise {
    border-color: transparent;
    background: none;
    color: var(--abst-blass);
}

.ab-knopf-leise:hover:not(:disabled) {
    background: rgba(255, 77, 106, .12);
    color: #ffc2cc;
    border-color: transparent;
}

.ab-knopf-klein {
    padding: 6px 11px;
    font-size: 12px;
}

/* Balken | Kreis */
.ab-umschalter {
    display: inline-flex;
    padding: 3px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .28);
}

.ab-umschalter button {
    padding: 5px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--abst-blass);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ab-umschalter .ab-an {
    background: rgba(38, 194, 247, .2);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(38, 194, 247, .45);
}

/* ---- Das Formular ------------------------------------------------ */

.ab-feld {
    display: block;
    margin: 0 0 14px;
}

.ab-feldname {
    display: block;
    margin-bottom: 6px;
    color: var(--abst-blass);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ab-eingabe {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font: inherit;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

.ab-eingabe::placeholder {
    color: rgba(255, 255, 255, .35);
}

.ab-eingabe:focus {
    border-color: var(--abst-tuerkis);
    box-shadow: 0 0 0 3px rgba(38, 194, 247, .2);
    outline: none;
}

.ab-auswahl {
    width: auto;
    min-width: 200px;
    font-size: 13px;
}

.ab-auswahl option {
    background: #10203d;
    color: #fff;
}

.ab-antworten {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ab-antwort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ab-antwort-nr {
    flex: none;
    width: 20px;
    color: var(--abst-blass);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ab-antwort-weg {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--abst-blass);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ab-antwort-weg:hover:not(:disabled) {
    background: rgba(255, 77, 106, .15);
    color: #ffc2cc;
}

.ab-antwort-weg:disabled {
    visibility: hidden;
}

.ab-dazu {
    margin: 8px 0 0 28px;
    padding: 6px 12px;
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 9px;
    background: none;
    color: var(--abst-tuerkis);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.ab-dazu:hover:not(:disabled) {
    border-color: var(--abst-tuerkis);
    background: rgba(38, 194, 247, .08);
}

.ab-dazu:disabled {
    opacity: .4;
    cursor: default;
}

.ab-einstellungen {
    margin: 4px 0 16px;
    padding: 12px 14px 6px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
}

/* Schalter statt Kaestchen: an oder aus, auf einen Blick. */
.ab-schalter {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    font-weight: normal;
    cursor: pointer;
}

.ab-schalter + .ab-schalter,
.ab-unterfeld + .ab-schalter {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.ab-schalter input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ab-schalter-bahn {
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    margin-top: 1px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    transition: background .2s;
}

.ab-schalter-bahn::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.ab-schalter input:checked + .ab-schalter-bahn {
    background: var(--abst-tuerkis);
}

.ab-schalter input:checked + .ab-schalter-bahn::after {
    transform: translateX(16px);
}

.ab-schalter input:focus-visible + .ab-schalter-bahn {
    box-shadow: 0 0 0 3px rgba(38, 194, 247, .35);
}

.ab-schalter-text strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.ab-schalter-text small {
    display: block;
    margin-top: 1px;
    color: var(--abst-blass);
    font-size: 11.5px;
    line-height: 1.4;
}

.ab-unterfeld {
    padding: 0 0 10px 50px;
}

.ab-zeile-einstellung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-weight: normal;
}

.ab-zeile-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.ab-formknoepfe {
    margin-top: 4px;
}

.ab-formknoepfe .ab-knopf-haupt {
    padding: 10px 20px;
}

/* ---- Listen: Entwuerfe und Vergangene ---------------------------- */

.ab-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

.ab-eintrag-text {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    min-width: 0;
}

.ab-eintrag-text strong {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ab-eintrag-text small {
    margin-top: 2px;
    color: var(--abst-blass);
    font-size: 11.5px;
}

.ab-eintrag-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ab-eintrag-vergangen {
    flex-direction: column;
    align-items: stretch;
}

.ab-aufklapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ab-pfeil {
    flex: none;
    margin-left: auto;
    color: var(--abst-blass);
    transition: transform .2s;
}

.ab-aufklapper[aria-expanded="true"] .ab-pfeil {
    transform: rotate(180deg);
}

.ab-ergebnis {
    padding: 12px 2px 2px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.ab-eintrag-vergangen .ab-eintrag-knoepfe {
    justify-content: flex-end;
}

/* ---- Wer leiten darf --------------------------------------------- */

.ab-wahlzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    font-weight: normal;
    cursor: pointer;
}

.ab-wahlzeile:has(input:checked) {
    border-color: rgba(38, 194, 247, .5);
    background: rgba(38, 194, 247, .08);
}

.ab-wahlzeile input {
    accent-color: var(--abst-tuerkis);
}

/* Im schmalen Chatfenster: Kreis und Legende untereinander. */
.ch-modinhalt .pk-abst-kreis {
    flex-wrap: wrap;
    justify-content: center;
}