/* ==========================================================================
   proXtic – Gestaltung
   Ein einziges Stylesheet, keine Fremdbibliothek. Was hier gebraucht wird,
   sind ein Raster, eine Farbskala und ein Dutzend Bausteine – dafür ein
   Framework zu laden hiesse, 200 KB für 8 KB Nutzen auszuliefern.
   Helles und dunkles Aussehen richten sich nach der Einstellung des Systems.
   ========================================================================== */

:root {
    --grund:       #f4f5f7;
    --flaeche:     #ffffff;
    --flaeche-2:   #f8f9fb;
    --rand:        #e3e5e9;
    --rand-stark:  #cfd3da;
    --schrift:     #1d2129;
    --schrift-2:   #646c7a;
    --schrift-3:   #8b929e;
    --akzent:      #2f5bea;
    --akzent-weich:#e8eeff;
    --akzent-tief: #1d40b8;
    --gruen:       #17864b;
    --gruen-weich: #e2f5ea;
    --gelb:        #9a6700;
    --gelb-weich:  #fdf3d7;
    --rot:         #c22a2a;
    --rot-weich:   #fdeaea;
    --lila:        #6b3fd4;
    --lila-weich:  #efe9fd;
    --schatten:    0 1px 2px rgba(20,25,40,.06), 0 4px 14px rgba(20,25,40,.05);
    --rundung:     10px;
    --leiste-breit: 15rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:       #14171d;
        --flaeche:     #1b1f27;
        --flaeche-2:   #21262f;
        --rand:        #2c323d;
        --rand-stark:  #3d4552;
        --schrift:     #e7eaef;
        --schrift-2:   #a3abb9;
        --schrift-3:   #7d8695;
        --akzent:      #6b8dff;
        --akzent-weich:#1f2b4d;
        --akzent-tief: #8ea9ff;
        --gruen:       #5fd08d;
        --gruen-weich: #12331f;
        --gelb:        #e5b64a;
        --gelb-weich:  #3a2f12;
        --rot:         #f2807e;
        --rot-weich:   #3d1c1c;
        --lila:        #b39aff;
        --lila-weich:  #2a2145;
        --schatten:    0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--schrift);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

h1 { font-size: 1.4rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: .9rem; margin: 0 0 .5rem; color: var(--schrift-2); font-weight: 600; }

/* == Grundgerüst ========================================================= */

.huelle { display: flex; min-height: 100vh; }

.leiste {
    width: var(--leiste-breit);
    flex: 0 0 var(--leiste-breit);
    background: var(--flaeche);
    border-right: 1px solid var(--rand);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.marke {
    display: flex; align-items: center; gap: .625rem;
    padding: 1.05rem 1.1rem;
    color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--rand);
}
.marke:hover { text-decoration: none; }
.marke-zeichen {
    width: 2rem; height: 2rem; flex: 0 0 2rem;
    display: grid; place-items: center;
    background: var(--akzent); color: #fff;
    border-radius: 8px; font-weight: 700; font-size: .8rem; letter-spacing: -.02em;
}
.marke-text { display: flex; flex-direction: column; font-weight: 650; line-height: 1.2; }
.marke-text small { font-weight: 400; font-size: .72rem; color: var(--schrift-3); }

.menue { padding: .625rem; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }

.menue-punkt {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .65rem;
    border-radius: 7px;
    color: var(--schrift-2);
    font-weight: 500; font-size: .9rem;
}
.menue-punkt:hover { background: var(--flaeche-2); color: var(--schrift); text-decoration: none; }
.menue-punkt.ist-aktiv { background: var(--akzent-weich); color: var(--akzent); font-weight: 600; }
.symbol { width: 1.05rem; height: 1.05rem; flex: 0 0 1.05rem; }
.menue-punkt .zahl {
    margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700;
    background: var(--akzent); color: #fff;
    min-width: 1.25rem; text-align: center;
    padding: .1rem .35rem; border-radius: 999px;
}
.menue-punkt.ist-aktiv .zahl { background: var(--akzent); }

.leiste-fuss { border-top: 1px solid var(--rand); padding: .625rem; }
.konto { display: flex; align-items: center; gap: .6rem; padding: .4rem; border-radius: 7px; color: inherit; }
.konto:hover { background: var(--flaeche-2); text-decoration: none; }
.konto-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.konto-text strong { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-text small { font-size: .72rem; color: var(--schrift-3); }
.abmelden { display: block; padding: .4rem .4rem 0; font-size: .78rem; color: var(--schrift-3); }

.inhalt { flex: 1; min-width: 0; padding: 1.5rem 1.75rem 4rem; max-width: 78rem; }
.inhalt.breit { max-width: none; }

.seitenkopf { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.seitenkopf h1 { flex: 1; min-width: 0; }
.zurueck { font-size: .85rem; color: var(--schrift-2); }
.menue-knopf { display: none; }

/* == Die Glocke ==========================================================

   OHNE SKRIPT: Das Aufklappen macht <details>. Die Inhaltsrichtlinie
   erlaubt kein Inline-Skript (script-src 'self'), und ein eigenes
   Aufklappwerk in app.js waere mehr Code fuer dasselbe Ergebnis.

   Das Dreieck von <summary> muss weg - sonst steht neben der Glocke ein
   zweites Symbol, das niemand erklaeren kann.
   ====================================================================== */

.glocke { position: relative; flex: 0 0 auto; }

.glocke > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    position: relative; padding: .4rem; border-radius: 8px; color: var(--schrift-2);
}
.glocke > summary::-webkit-details-marker { display: none; }
.glocke > summary:hover { background: var(--flaeche-2); color: var(--schrift); }
.glocke[open] > summary { background: var(--flaeche-2); color: var(--schrift); }

.glocke-zahl {
    position: absolute; top: -.1rem; right: -.1rem; min-width: 1.05rem;
    padding: 0 .22rem; border-radius: 999px; background: var(--rot); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}

.glocke-liste {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40;
    width: 21rem; max-width: calc(100vw - 2rem);
    background: var(--flaeche); border: 1px solid var(--rand-stark);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    padding: .3rem; max-height: 70vh; overflow-y: auto;
}

.glocke-zeile { margin: 0; }

.glocke-knopf {
    display: flex; flex-direction: column; gap: .12rem; width: 100%;
    background: none; border: 0; text-align: left; cursor: pointer;
    padding: .5rem .55rem; border-radius: 7px; color: inherit; font: inherit;
}
.glocke-knopf:hover { background: var(--flaeche-2); }
.glocke-text { font-size: .86rem; line-height: 1.35; }
.glocke-zeit { font-size: .75rem; color: var(--schrift-3); }

.glocke-leer { margin: 0; padding: .7rem .55rem; font-size: .85rem; color: var(--schrift-3); }

.glocke-fuss {
    margin: 0; padding: .5rem .55rem; font-size: .8rem;
    border-top: 1px solid var(--rand); color: var(--schrift-3);
}

.installation {
    background: var(--rot); color: #fff; font-weight: 600; font-size: .8rem;
    padding: .45rem .75rem; border-radius: 7px; margin-bottom: 1rem; text-align: center;
}

/* == Karten und Raster =================================================== */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.1rem;
}
.karte.schmal { padding: .85rem 1rem; }
.karte > h2:first-child { margin-top: 0; }

.raster { display: grid; gap: 1.1rem; }
.raster.zwei   { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.raster.drei   { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.raster.kennzahl { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }

.kennwert { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rundung);
            padding: .9rem 1rem; box-shadow: var(--schatten); }
.kennwert .zahl-gross { font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kennwert .beschriftung { font-size: .78rem; color: var(--schrift-2); margin-top: .15rem; }
.kennwert.ist-warnung .zahl-gross { color: var(--rot); }
.kennwert.ist-gut .zahl-gross { color: var(--gruen); }
a.kennwert:hover { border-color: var(--rand-stark); text-decoration: none; }

/* == Tabellen ============================================================ */

.tabellenhuelle { overflow-x: auto; margin: 0 -1.2rem; padding: 0 1.2rem; }

table.liste { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.liste th {
    text-align: left; font-weight: 600; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--schrift-3);
    padding: 0 .65rem .5rem; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
table.liste td { padding: .6rem .65rem; border-bottom: 1px solid var(--rand); vertical-align: middle; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover { background: var(--flaeche-2); }
table.liste .nummer { font-variant-numeric: tabular-nums; color: var(--schrift-3); font-size: .82rem; white-space: nowrap; }
table.liste .haupt { font-weight: 600; }
table.liste .haupt a { color: inherit; }
table.liste .eng { width: 1%; white-space: nowrap; }
table.liste .rechts { text-align: right; }
.nebensatz { color: var(--schrift-3); font-size: .78rem; display: block; margin-top: .1rem; }

/* == Schildchen ========================================================== */

.schild {
    display: inline-block; padding: .16rem .5rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; white-space: nowrap; line-height: 1.4;
    background: var(--flaeche-2); color: var(--schrift-2); border: 1px solid var(--rand);
}
.schild.s-neu          { background: var(--akzent-weich); color: var(--akzent);  border-color: transparent; }
.schild.s-offen        { background: var(--gelb-weich);   color: var(--gelb);    border-color: transparent; }
.schild.s-in_arbeit    { background: var(--lila-weich);   color: var(--lila);    border-color: transparent; }
.schild.s-wartet_kunde { background: var(--flaeche-2);    color: var(--schrift-2); }
.schild.s-geloest      { background: var(--gruen-weich);  color: var(--gruen);   border-color: transparent; }
.schild.s-geschlossen  { background: var(--flaeche-2);    color: var(--schrift-3); }

.schild.p-aktiv         { background: var(--gruen-weich);  color: var(--gruen);  border-color: transparent; }
.schild.p-geplant       { background: var(--akzent-weich); color: var(--akzent); border-color: transparent; }
.schild.p-pausiert      { background: var(--gelb-weich);   color: var(--gelb);   border-color: transparent; }
.schild.p-abgeschlossen { background: var(--flaeche-2);    color: var(--schrift-3); }
.schild.p-abgebrochen   { background: var(--rot-weich);    color: var(--rot);    border-color: transparent; }

.schild.pr-dringend { background: var(--rot-weich);  color: var(--rot);  border-color: transparent; }
.schild.pr-hoch     { background: var(--gelb-weich); color: var(--gelb); border-color: transparent; }
.schild.pr-normal,
.schild.pr-niedrig  { background: transparent; color: var(--schrift-3); }

/* == Merkzeichen ========================================================= */

.merkzeichen {
    width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem;
    display: inline-grid; place-items: center;
    border-radius: 999px;
    font-size: .68rem; font-weight: 700; letter-spacing: -.01em;
    background: hsl(var(--ton, 220) 55% 92%);
    color: hsl(var(--ton, 220) 55% 30%);
    vertical-align: middle;
}
@media (prefers-color-scheme: dark) {
    .merkzeichen { background: hsl(var(--ton, 220) 35% 26%); color: hsl(var(--ton, 220) 60% 82%); }
}
.merkzeichen.ist-leer { background: var(--flaeche-2); color: var(--schrift-3); border: 1px dashed var(--rand-stark); font-weight: 400; }
.merkzeichen-reihe { display: inline-flex; }
.merkzeichen-reihe .merkzeichen { margin-left: -.4rem; border: 2px solid var(--flaeche); }
.merkzeichen-reihe .merkzeichen:first-child { margin-left: 0; }

/* == Knöpfe und Formulare ================================================ */

.knopf, button.knopf, input[type=submit] {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--akzent); color: #fff;
    border: 1px solid transparent; border-radius: 8px;
    padding: .5rem .9rem;
    font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.knopf:hover { background: var(--akzent-tief); text-decoration: none; color: #fff; }
.knopf.still { background: var(--flaeche); color: var(--schrift); border-color: var(--rand-stark); }
.knopf.still:hover { background: var(--flaeche-2); color: var(--schrift); }
.knopf.gefahr { background: var(--flaeche); color: var(--rot); border-color: var(--rot); }
.knopf.gefahr:hover { background: var(--rot-weich); color: var(--rot); }
.knopf.klein { padding: .3rem .6rem; font-size: .78rem; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.knopfreihe.rechts { justify-content: flex-end; }

label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--schrift-2); }
label.neben { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--schrift); margin: 0; }
label.neben input { margin: 0; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=search], input[type=tel], input[type=number], select, textarea {
    width: 100%;
    background: var(--flaeche);
    color: var(--schrift);
    border: 1px solid var(--rand-stark);
    border-radius: 8px;
    padding: .5rem .65rem;
    font: inherit; font-size: .9rem;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--akzent-weich);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
input[type=file] { font-size: .85rem; color: var(--schrift-2); }

.feld { margin-bottom: .9rem; }
.feld small { display: block; color: var(--schrift-3); font-size: .78rem; margin-top: .25rem; }
.feldreihe { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.filter { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filter .feld { margin: 0; }
.filter select, .filter input { min-width: 9rem; width: auto; }
.filter .wachsen { flex: 1; min-width: 12rem; }
.filter .wachsen input { width: 100%; }

/* == Meldungen =========================================================== */

.meldung {
    padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem;
    font-size: .88rem; border: 1px solid transparent;
}
.meldung ul { margin: 0; padding-left: 1.1rem; }
.meldung.ist-gut    { background: var(--gruen-weich);  color: var(--gruen);  }
.meldung.ist-fehler { background: var(--rot-weich);    color: var(--rot);    }
.meldung.ist-hinweis{ background: var(--akzent-weich); color: var(--akzent); }
.meldung.ist-warnung{ background: var(--gelb-weich);   color: var(--gelb);   }

.leer { text-align: center; padding: 2.5rem 1rem; color: var(--schrift-3); }
.leer p { margin: 0 0 1rem; }

/* == Nachfragen ==========================================================

   DER BROWSERDIALOG STAND AUSSERHALB DER SEITE. window.confirm() klebt
   oben am Fensterrand, bringt seine eigene Schrift mit, kennt unsere
   Farben nicht und leuchtet im dunklen Erscheinungsbild grellweiss auf.
   Ausgerechnet bei der Frage, die am meisten Aufmerksamkeit verdient -
   "wirklich löschen?" -, sah die Anwendung aus wie eine fremde.

   <dialog> statt eines nachgebauten Kastens aus <div>: Der Browser
   bringt damit alles mit, was ein solcher Kasten braucht und was man
   von Hand vergisst - Fokusfalle, Escape zum Abbrechen, der Rest der
   Seite wird für Hilfsmittel unerreichbar.
   ====================================================================== */

dialog.nachfrage {
    width: min(27rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: var(--rundung);
    background: var(--flaeche);
    color: var(--schrift);
    box-shadow: var(--schatten);
}
dialog.nachfrage::backdrop { background: rgba(20, 25, 40, .45); }

.nachfrage .inhalt { padding: 1.15rem 1.2rem 0; }
.nachfrage p { margin: 0; line-height: 1.55; font-size: .95rem; }
.nachfrage input[type=text] { margin-top: .8rem; font-size: .85rem; }

/* Die Knopfreihe rechts: der bestaetigende Knopf liegt dort, wo der
   Daumen ohnehin hinwandert - und "Abbrechen" davor, nicht dahinter. */
.nachfrage .knopfreihe { padding: 1.15rem 1.2rem 1.2rem; justify-content: flex-end; }

/* OHNE DIESE ZEILE BLEIBT "ABBRECHEN" STEHEN, auch wenn der Kasten nur
   einen Knopf haben soll (ein Hinweis statt einer Frage). Das hidden-
   Attribut setzt display:none im Stil des Browsers - und .knopf setzt
   display:inline-flex in unserem. Die Klasse gewinnt. Gesehen, nicht
   ueberlegt: Im Kopierhinweis standen "Abbrechen" und "Schliessen"
   nebeneinander. */
.nachfrage .knopf[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
    dialog.nachfrage::backdrop { background: rgba(0, 0, 0, .6); }
}

/* Am Telefon stehen die Knoepfe untereinander und in voller Breite -
   nebeneinander werden zwei lange Beschriftungen sonst zu zwei schmalen
   Zielen, und danebengetippt wird ausgerechnet hier.

   column-reverse und nicht column: Der bestaetigende Knopf steht oben,
   "Abbrechen" unten am Daumen. Wer das Geraet einhaendig haelt, trifft
   unten am sichersten - und unten soll das stehen, was nichts kaputt
   macht. */
@media (max-width: 420px) {
    .nachfrage .knopfreihe { flex-direction: column-reverse; }
    .nachfrage .knopfreihe .knopf { width: 100%; }
}

/* == Fortschritt ========================================================= */

.balken { height: 6px; background: var(--flaeche-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--rand); }
.balken > span { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.balken.ist-fertig > span { background: var(--gruen); }

/* == Ticketverlauf ======================================================= */

.gespraech { display: flex; flex-direction: column; gap: .9rem; }

.beitrag { border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); overflow: hidden; }
.beitrag-kopf {
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .9rem; background: var(--flaeche-2);
    border-bottom: 1px solid var(--rand); font-size: .82rem;
}
.beitrag-kopf .wer { font-weight: 650; }
.beitrag-kopf .wann { margin-left: auto; color: var(--schrift-3); font-size: .78rem; white-space: nowrap; }
.beitrag-text { padding: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.beitrag.ist-intern { border-color: var(--gelb); background: var(--gelb-weich); }
.beitrag.ist-intern .beitrag-kopf { background: transparent; border-bottom-color: var(--gelb); }
.beitrag.ist-kunde .beitrag-kopf { background: var(--akzent-weich); border-bottom-color: transparent; }

.anhaenge { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .9rem .9rem; }
.anhang {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--rand-stark); border-radius: 7px;
    padding: .3rem .55rem; font-size: .8rem; color: var(--schrift-2); background: var(--flaeche);
}
.anhang:hover { border-color: var(--akzent); color: var(--akzent); text-decoration: none; }
.anhang small { color: var(--schrift-3); }

.verlauf { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--schrift-2); }
.verlauf li { padding: .35rem 0; border-bottom: 1px solid var(--rand); }
.verlauf li:last-child { border-bottom: 0; }
.verlauf .wann { color: var(--schrift-3); font-size: .76rem; }

/* == Zwei Spalten auf der Ticketseite ==================================== */

.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.1rem; align-items: start; }
.spalten .seitlich { position: sticky; top: 1.5rem; }

.werteliste { display: grid; grid-template-columns: auto 1fr; gap: .45rem .75rem; font-size: .85rem; align-items: baseline; }
.werteliste dt { color: var(--schrift-3); font-size: .78rem; }
.werteliste dd { margin: 0; overflow-wrap: anywhere; }

/* == Offene Seiten (Anmeldung, Gastformular) ============================= */

.offen { max-width: 36rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.offen.weit { max-width: 48rem; }
.offen-karte {
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: 14px; box-shadow: var(--schatten); padding: 1.5rem;
}
.offen-kopf { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.25rem; }
.offen-kopf strong { display: block; font-size: 1rem; }
.offen-kopf small { color: var(--schrift-3); font-size: .8rem; }
.offen-fuss { text-align: center; font-size: .78rem; color: var(--schrift-3); margin: 1.25rem 0 0; }
.offen-fuss a { color: var(--schrift-3); }

/* Honigtopf: für Menschen unsichtbar, für einfache Skripte ein Feld, das
   sie brav ausfüllen – und damit auffliegen. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* == Klein ============================================================== */

@media (max-width: 860px) {
    .spalten { grid-template-columns: 1fr; }
    .spalten .seitlich { position: static; }
}

@media (max-width: 720px) {
    .leiste {
        position: fixed; z-index: 30; left: 0; top: 0;
        transform: translateX(-100%); transition: transform .18s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.25);
    }
    body.menue-offen .leiste { transform: none; }
    .inhalt { padding: 1rem 1rem 3rem; }
    .menue-knopf {
        display: block; order: -1;
        background: var(--flaeche); border: 1px solid var(--rand-stark);
        border-radius: 8px; padding: .3rem .55rem; font-size: 1.05rem;
        color: var(--schrift); cursor: pointer;
    }
    .tabellenhuelle { margin: 0 -1rem; padding: 0 1rem; }
    table.liste { font-size: .84rem; }
    .verbergen-klein { display: none; }

    /* Menüknopf und Zurück-Link in die erste Zeile, die Überschrift in die
       zweite. Nebeneinander drängen sie sich bei einem langen Titel wie
       „JP-2026-002 · Kassensystem Rosenhof" um dieselben 200 Pixel, und der
       Titel bricht um den Knopf herum. */
    .seitenkopf { gap: .5rem .75rem; }
    .menue-knopf { order: 1; }
    .zurueck { order: 2; }
    /* Die Glocke bleibt in der oberen Zeile, rechts - die Ueberschrift
       rutscht darunter. Sonst stuende sie unter dem Titel und waere das
       erste, was man auf dem Telefon sucht und nicht findet. */
    .glocke { order: 2; margin-left: auto; }
    .seitenkopf h1 { order: 3; flex: 1 0 100%; font-size: 1.15rem; }
    .glocke-liste { width: calc(100vw - 2rem); }
}

/* ==========================================================================
   AUF DEM TELEFON IST EINE TABELLE KEINE TABELLE MEHR.

   Bei 375 px teilen sich Nummer, Betreff und Status den Platz so, dass vom
   Betreff drei Wörter je Zeile übrig bleiben – gemessen, nicht vermutet.
   Waagrechtes Scrollen wäre die bequeme Antwort und die schlechtere: In
   einer Liste, durch die man senkrecht wischt, findet niemand den seitlich
   versteckten Rest.

   Deshalb wird hier jede Zeile zu einem kleinen Block: Nummer klein darüber,
   Betreff groß, die Schildchen darunter nebeneinander.
   ========================================================================== */
@media (max-width: 560px) {
    table.liste thead { display: none; }

    table.liste,
    table.liste tbody,
    table.liste tr,
    table.liste td { display: block; width: auto; }

    table.liste tr {
        padding: .7rem 0;
        border-bottom: 1px solid var(--rand);
    }
    table.liste tr:last-child { border-bottom: 0; }
    table.liste tbody tr:hover { background: transparent; }

    table.liste td {
        border: 0;
        padding: .1rem 0;
    }

    /* Leere Zellen (etwa die Priorität bei „normal") würden sonst als
       Lücken erscheinen. */
    table.liste td:empty { display: none; }

    /* Die schmalen Zellen tragen Schildchen und Merkzeichen - die gehören
       in EINE Zeile nebeneinander, nicht untereinander.
       
       "width: auto" ist hier das Entscheidende: `.eng` trägt oben width: 1%,
       damit die Spalte in der Tabelle schmal bleibt. Als inline-block wären
       das 1% der Kartenbreite - die Schildchen lägen übereinander. Genau so
       sah es beim Prüfen aus: „In Arbeit" und „Dringend" als ein Knäuel. */
    table.liste td.eng {
        display: inline-block;
        width: auto;
        margin: .3rem .4rem 0 0;
        vertical-align: middle;
    }

    table.liste td.nummer.eng {
        display: block;
        width: auto;
        margin: 0;
        font-size: .72rem;
    }

    table.liste .haupt { font-size: .95rem; }
    .nebensatz { margin-top: .15rem; }
}

@media print {
    .leiste, .menue-knopf, .knopfreihe, .filter { display: none; }
    body { background: #fff; }
    .karte, .beitrag { box-shadow: none; break-inside: avoid; }
}

/* == QR-Code ============================================================
   Der Code wird als SVG direkt ins HTML geschrieben (siehe totp_qr()).

   WEISSER GRUND UND WEISSER RAHMEN SIND PFLICHT, auch im dunklen
   Erscheinungsbild: Ein QR-Leser erwartet dunkle Module auf hellem Grund
   und eine ruhige Zone ringsum. Auf dunklem Grund ohne Rahmen scheitern
   viele Telefonkameras - das ist kein Schönheitsfehler, sondern ein
   unlesbarer Code.
   ====================================================================== */
.qr {
    display: inline-block;
    background: #fff;
    padding: .55rem;
    border: 1px solid var(--rand);
    border-radius: 10px;
    line-height: 0;
}
.qr svg { display: block; width: 11.5rem; height: 11.5rem; }

@media (max-width: 560px) {
    .qr svg { width: 13.5rem; height: 13.5rem; }
}