/* ============================================================
   STIL: reine Darstellung, jederzeit loeschbar.
   Absicht: weiss, schwarz, eng wie ein Tabellenblatt.
   Farben nur mit Bedeutung:
     gruen = bester Wert / ueber der Linie
     rot   = Interwetten-Abzug / vorbei / Warnung
   Kein Schmuck, keine Animation.
   ============================================================ */

* { box-sizing: border-box; }
body { background: #fff; color: #000; font-family: Arial, "Segoe UI", sans-serif;
       font-size: 13px; margin: 10px; }
h1 { font-size: 18px; margin: 0 0 2px 0; }
.unter { color: #444; font-size: 12px; margin-bottom: 8px; }
.kern { border: 1px solid #c00; background: #fff; padding: 5px 8px; margin: 6px 0;
        font-size: 12.5px; }
.kern b { color: #c00; }

/* Filterleiste */
#filter { margin: 8px 0; }
#filter button { font-size: 12px; margin: 0 4px 4px 0; padding: 3px 8px;
  background: #fff; border: 1px solid #888; cursor: pointer; }
#filter button.aktiv { background: #000; color: #fff; border-color: #000; }
#filter button.schalter { border-style: dashed; }
#zaehler { font-size: 12px; color: #444; margin: 2px 0 6px 0; }

/* Tabelle wie das Original: eng, Linien, abwechselnd leicht grau */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #999; padding: 2px 5px; text-align: left;
         vertical-align: top; }
th { background: #eee; font-size: 12px; position: sticky; top: 0; }
tbody tr:nth-child(even) { background: #f7f7f7; }
td.zeit { white-space: nowrap; font-size: 12px; }
td.spiel { font-weight: bold; }
td.wette select { font-size: 12px; max-width: 200px; }
td.tabq { font-weight: bold; text-align: right; }
td.such { text-align: center; font-weight: bold; }

/* Tippgeber-Kuerzel wie die Farbknoepfe im Original */
.von { font-size: 10px; padding: 0 4px; border: 1px solid #999; }
.von.klt { background: #d9efd9; }
.von.kafa { background: #e8dff2; }
.von.david { background: #dde6f5; }

/* Anbieterzellen */
td.anbieter { width: 86px; }
td.anbieter input { width: 100%; font-size: 13px; padding: 1px 3px;
  border: 1px solid #999; }
td.anbieter .real { font-size: 10.5px; color: #444; min-height: 12px; }
td.anbieter.iw .real { color: #c00; }        /* Interwetten: Abzug sichtbar rot */
td.anbieter.bester { background: #d9efd9; }  /* bester echter Wert: gruen */
td.anbieter.bester input { border-color: #1a7a1a; border-width: 2px; }

td.ansage { font-size: 12px; }
.gruen { color: #1a7a1a; }
.doppel { color: #c00; font-size: 11px; font-weight: bold; }

/* vergangene Spiele */
tr.vorbei { color: #999; }
tr.vorbei td.spiel { text-decoration: line-through; font-weight: normal; }

/* Suchfuehrer-Kasten */
details { border: 1px solid #999; margin: 8px 0; }
details summary { background: #eee; padding: 4px 8px; cursor: pointer;
  font-weight: bold; font-size: 13px; }
details .inhalt { padding: 6px 10px; font-size: 12.5px; }
details table td:first-child { font-weight: bold; width: 90px; background: #f2f2f2; }
.fuss { margin: 12px 0; font-size: 11.5px; color: #444; border-top: 1px solid #999;
  padding-top: 6px; }

/* ---- Nachtrag 25.08.: Anbieter-Filter, Vorgabe-Zellen, keine leeren Flaechen ---- */
#anbieterfilter { margin: 2px 0 4px 0; }
#anbieterfilter .af-titel { font-weight: bold; font-size: 12px; margin-right: 6px; }
#anbieterfilter button { font-size: 12px; margin: 0 4px 4px 0; padding: 3px 8px;
  background: #fff; border: 2px solid #1a7a1a; cursor: pointer; }
#anbieterfilter button.aktiv { background: #1a7a1a; color: #fff; }

td.anbieter.empfohlen { background: #eef7ee; }           /* Vorgabe: helles Gruen */
td.anbieter.empfohlen input { border-color: #1a7a1a; }
td.anbieter .tag { font-size: 9.5px; font-weight: bold; color: #1a7a1a; }
td.anbieter.bester .tag { color: #0a5a0a; }
td.anbieter .keinmarkt { color: #c00; font-size: 11px; }
td.anbieter .duenn { color: #aa6600; font-size: 10px; }

details h3 { font-size: 13px; margin: 10px 0 4px 0; }

/* ---- Nachtrag 25.08. (2): Stand-Zeile, Warnkasten, Info-Zeilen, Links ---- */
.stand { font-size: 11.5px; color: #444; margin: 2px 0 4px 0; }
.warnkern { border: 1px solid #1a7a1a; padding: 5px 8px; margin: 6px 0; font-size: 12.5px; }
.warnkern b { color: #1a7a1a; }
a.mehr { font-size: 11px; color: #00e; }
tr.detail td { background: #fbfbf3; font-size: 12px; border-top: none; }
tr.detail ul { margin: 3px 0 3px 18px; padding: 0; }
tr.detail li { margin: 2px 0; }
tr.detail a { color: #00e; }

/* ---- Nachtrag 25.08. (3): Original-Ansicht und Rang-Filter ---- */
.ansichten { font-size: 12.5px; margin: 4px 0; }
.ansichten a { color: #00e; }
#rangfilter { margin: 2px 0 2px 0; }
#rangfilter .af-titel { font-weight: bold; font-size: 12px; margin-right: 6px; }
#rangfilter button { font-size: 12px; margin: 0 4px 4px 0; padding: 3px 8px;
  background: #fff; border: 1px solid #444; cursor: pointer; }
#rangfilter button.aktiv { background: #444; color: #fff; }
tr.storniert td { text-decoration: line-through; color: #c00; }
tr.bildtrenner td { background: #333; color: #fff; font-weight: bold; }
td.q { text-align: right; white-space: nowrap; }

/* ---- Nachtrag 25.08. (4): Ausfuell-Kasten, Kopfzeilen-Links ---- */
.fuellkern { border: 1px solid #444; padding: 5px 8px; margin: 6px 0; font-size: 12.5px; }
.fuellkern ol { margin: 4px 0 4px 20px; padding: 0; }
.fuellkern li { margin: 2px 0; }
th a { color: #00e; }

/* ---- Nachtrag 25.08. (5): Hilfe-Knoepfe, Gemeldet-Spalte, Vergleichslink ---- */
.hilf { display: inline-block; margin-left: 4px; width: 14px; height: 14px;
  line-height: 14px; text-align: center; font-size: 10px; font-weight: bold;
  border: 1px solid #444; border-radius: 50%; cursor: help; background: #fff; }
td.gemeldet { color: #444; font-size: 11px; }
a.vgl { color: #00e; font-size: 11px; }

/* ---- Nachtrag 25.08. (6): Markt-jetzt-Spalte, Zeit-Kasten ---- */
.zeitkern { border: 2px solid #c8102e; padding: 5px 8px; margin: 6px 0; font-size: 12.5px; }
.zeitkern b { color: #c8102e; }
td.markt { white-space: nowrap; font-size: 12px; }
td.markt.hoch { background: #eef7ee; }
td.markt.tief { background: #fdf3f3; }

/* ---- Nachtrag 25.08. (7): symmetrische Filterleiste, Reiter-Chips ---- */
.filterbox { border: 1px solid #999; margin: 8px 0; padding: 2px 0; }
.filterzeile { display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 8px; border-bottom: 1px solid #ddd; }
.filterzeile:last-child { border-bottom: none; }
.filterzeile .f-label { flex: 0 0 132px; font-weight: bold; font-size: 12px;
  padding-top: 4px; }
.filterzeile .f-knoepfe { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.filterzeile button { font-size: 12px; padding: 3px 9px; min-width: 82px;
  background: #fff; border: 1px solid #888; cursor: pointer; text-align: center; }
.filterzeile button.aktiv { background: #000; color: #fff; border-color: #000; }
.filterzeile .f-zahl { color: #666; font-size: 11px; }
.filterzeile button.aktiv .f-zahl { color: #ddd; }
.f-reiter button { min-width: 74px; font-weight: bold; }
.f-anbieter button { border-color: #1a7a1a; }
.f-anbieter button.aktiv { background: #1a7a1a; border-color: #1a7a1a; }
.f-rang button { border-color: #444; }
.f-rang button.aktiv { background: #444; }
.f-zeit button { border-style: dashed; }
.reiter-chip { display: inline-block; padding: 1px 5px; border: 1px solid #444;
  font-size: 10.5px; font-weight: bold; background: #f2f2f2; white-space: nowrap; }

/* ---- Nachtrag 25.08. (8): Anbieter-Zelle mit Link, Kopier-Knopf, Pruefzeit ---- */
td.anbieter { width: 116px; }
td.anbieter .z-kopf { display: flex; gap: 3px; align-items: center; margin-bottom: 2px; }
td.anbieter a.oeffnen { color: #00e; font-size: 10.5px; text-decoration: underline;
  white-space: nowrap; }
td.anbieter button.kopier { font-size: 9.5px; padding: 0 3px; border: 1px solid #888;
  background: #f2f2f2; cursor: pointer; }
td.anbieter .geprueft { font-size: 10px; color: #1a7a1a; }

/* ---- Nachtrag 25.08. (9): Quoten aus Screenshots ---- */
.ausshot { color: #7a4a00; font-size: 10.5px; }
td.anbieter.hatshot { background: #fffaf0; }

/* ---- Handbuch (schule.html) ---- */
.ergebnistafel td, .ergebnistafel th { text-align: center; font-size: 11px; padding: 3px 4px; }
.ergebnistafel td.linie { text-align: left; white-space: nowrap; background: #f2f2f2; }
.ergebnistafel td.klartext { text-align: left; font-size: 11px; }
.ergebnistafel tr.hervor td { background: #eee; font-weight: bold; }
.ergebnistafel tr.hervor td.e-gew { background: #cdebcd; }
.ergebnistafel tr.hervor td.e-ver { background: #f6d4d4; }
.mini { font-size: 9.5px; color: #555; font-weight: normal; }
.e-gew    { background: #d9efd9; color: #0a5a0a; }
.e-halbgew{ background: #eef7d9; color: #4a6a00; }
.e-zur    { background: #f0f0f0; color: #333; }
.e-halbver{ background: #fbe6d4; color: #8a4200; }
.e-ver    { background: #fdd; color: #a00; }
.legende { margin: 6px 0; font-size: 11px; }
.legende span { display: inline-block; padding: 2px 7px; margin-right: 5px; border: 1px solid #999; }
.scrollbox { overflow-x: auto; }
table.klein { width: auto; margin: 4px 0; }
table.klein td, table.klein th { font-size: 12px; padding: 3px 7px; }
.haelfte { background: #f4f8ff; text-align: center; font-weight: bold; }

/* ---- Nachtrag 25.08. (10): echte Quote gross, Foto-Quote klein ---- */
td.anbieter .realgross { font-size: 17px; line-height: 1.15; margin: 2px 0 1px 0;
  text-align: center; border-radius: 2px; }
td.anbieter .realgross.besser     { background: #d9efd9; color: #0a5a0a; }
td.anbieter .realgross.schlechter { background: #fdd;    color: #a00; }
td.anbieter .realgross.ausshotwert { border: 1px dashed #7a4a00; }
td.anbieter .realgross .leer { font-size: 12px; color: #888; font-weight: normal; }
td.anbieter .fotoklein { font-size: 10px; color: #444; text-align: center; }
td.anbieter .abzug { font-size: 9.5px; color: #777; }

/* ---- Kombi-Bau (kombis.html) ---- */
input.einst, select.einst { font-size: 13px; padding: 2px 5px; border: 1px solid #888; }
input#mind { width: 70px; font-weight: bold; }
.filterzeile label { font-size: 12px; margin-right: 10px; white-space: nowrap; }
button.haupt { background: #000; color: #fff; font-weight: bold; }
.schein { border: 1px solid #444; margin: 8px 0; page-break-inside: avoid; }
.s-kopf { background: #eee; padding: 4px 8px; font-weight: bold; font-size: 13px;
  display: flex; align-items: baseline; gap: 10px; }
.s-anb { color: #1a7a1a; }
.s-quote { margin-left: auto; }
.s-quote b { font-size: 16px; }
table.s-tab { margin: 0; }
table.s-tab td { border: none; border-top: 1px solid #ddd; font-size: 12px; padding: 3px 8px; }
td.s-zeit { white-space: nowrap; color: #444; width: 90px; }
td.s-liga { color: #444; width: 150px; }
td.s-spiel { font-weight: bold; }
td.s-wette { white-space: nowrap; }
td.s-q { text-align: right; white-space: nowrap; }
td.s-q b { font-size: 14px; }
td.s-reiter { width: 60px; text-align: center; }
.s-fuss { padding: 5px 8px; background: #f7f7f7; border-top: 1px solid #ddd; font-size: 13px; }
input.einsatz { width: 60px; font-size: 13px; padding: 1px 4px; border: 1px solid #888; }
button.merken { margin-left: 12px; font-size: 12px; padding: 2px 8px;
  border: 1px solid #1a7a1a; background: #fff; cursor: pointer; }
#reste ul { margin: 3px 0 10px 20px; font-size: 12px; }
#verlauf td { font-size: 12px; }

/* ---- Kombi-Bau, Ausbau 25.08. ---- */
.s-warn { color: #c8102e; font-weight: bold; font-size: 12px; }
.niedrigkopf { background: #fdecec; }
table.s-tab th { font-size: 10.5px; background: #f7f7f7; padding: 2px 8px; }
tr.unterquote td { background: #fdf3f3; }
td.s-ziel { text-align: right; font-weight: bold; white-space: nowrap; }
td.s-mind { text-align: right; color: #666; white-space: nowrap; }
td.s-eingabe input { width: 64px; font-size: 13px; padding: 1px 3px; border: 1px solid #888; }
td.s-eingabe input.fehler { border: 2px solid #c8102e; background: #fdd; }
td.s-raus select { font-size: 11px; }
.unterrot { color: #c8102e; font-size: 10.5px; font-weight: bold; }
.s-raus-liste { padding: 3px 8px; font-size: 11px; color: #c8102e; background: #fdf3f3; }
label.fotoknopf { margin-left: 12px; font-size: 12px; padding: 2px 8px;
  border: 1px solid #3366aa; color: #3366aa; cursor: pointer; }
.s-foto { padding: 6px 8px; background: #f7f7f7; border-top: 1px solid #ddd; }
.s-foto img { max-width: 100%; border: 1px solid #999; }
img.minifoto { max-width: 120px; border: 1px solid #999; margin-top: 3px; }
button.aufloesen { margin-left: 8px; font-size: 12px; padding: 2px 8px;
  border: 1px solid #c8102e; color: #c8102e; background: #fff; cursor: pointer; }

/* ---- Erkennungsmarken der sechs Anbieter ----
   Eigene Marken in den bekannten Hausfarben, KEINE fremden Logos. */
.marke { display: inline-block; padding: 2px 8px; font-size: 11.5px; font-weight: bold;
  letter-spacing: 0.3px; border: 1px solid #000; white-space: nowrap; }
.m-iw { background: #0a7d3e; color: #fff; border-color: #06612f; }   /* Interwetten gruen */
.m-bw { background: #111;    color: #ffd400; border-color: #000; }   /* Bwin schwarz-gelb */
.m-b3 { background: #14805e; color: #ffe400; border-color: #0b5b42; }/* Bet365 gruen-gelb */
.m-st { background: #1a2c38; color: #fff;    border-color: #0e1a22; }/* Stake dunkelblau */
select.anbwechsel { margin-left: 8px; font-size: 11px; padding: 1px 3px; }
#konto table { margin-top: 4px; }
#konto td, #konto th { font-size: 12px; text-align: right; }
#konto td:first-child, #konto th:first-child { text-align: left; }
#konto tfoot td { border-top: 2px solid #000; background: #f2f2f2; }

/* ============================================================
   DESIGN-SCHICHT 25.08. (Karams Wunsch): Kopf-Knoepfe,
   groessere Schrift, Zeilenabstand 1,5, kuerzere Textzeilen.
   Reine Optik. Dieser Block kann komplett geloescht werden,
   ohne dass irgendeine Funktion bricht.
   ============================================================ */

/* Schrift zwei Stufen groesser, Zeilenabstand 1,5 */
body { font-size: 15px; line-height: 1.5; }
p, li, .kern, .warnkern, .zeitkern, .fuellkern, .merk, .warn,
details .inhalt { line-height: 1.5; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }
.unter { font-size: 14.5px; }
th, td { font-size: 13.5px; padding: 4px 7px; }
.mini { font-size: 11px; }
details summary { font-size: 15px; padding: 7px 10px; }
details .inhalt { font-size: 14px; }
.filterzeile button { font-size: 13px; padding: 4px 10px; }
.filterzeile .f-label { font-size: 13px; flex-basis: 150px; }
td.anbieter .realgross { font-size: 18px; }
td.anbieter .fotoklein { font-size: 11px; }
#zaehler, .stand { font-size: 13px; }
.fuss { font-size: 12.5px; }

/* Volle Seitenbreite: Karam will keine weisse Luecke rechts (26.08.) */
p, .kern, .warnkern, .zeitkern, .fuellkern, .unter, .ansichten,
.merk, .warn, #meldung, details .inhalt p { max-width: none; }
p { margin: 8px 0; }
.kern, .warnkern, .zeitkern, .fuellkern { padding: 8px 12px; margin: 10px 0; }
.kern ol, .fuellkern ol { margin: 6px 0 6px 22px; }
.kern li, .fuellkern li { margin: 4px 0; }

/* Die Kopfleiste: echte Knoepfe statt Textlinks */
.navleiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px 0; }
.navleiste a.navknopf { display: inline-block; padding: 8px 18px;
  border: 2px solid #000; background: #fff; color: #000;
  font-weight: bold; font-size: 14.5px; text-decoration: none; }
.navleiste a.navknopf:hover { background: #eee; }
.navleiste a.navknopf.aktiv { background: #000; color: #fff; }
.navleiste a.navknopf.aktiv:hover { background: #000; }

/* ---- Mein Bereich: Notizen und Fotonamen ---- */
.notizzelle { min-width: 160px; }
textarea.notizfeld { width: 100%; min-height: 44px; font-size: 13px;
  font-family: inherit; border: 1px solid #888; padding: 3px 5px; }
.fotoname { font-weight: bold; font-size: 12.5px; }
.s-foto .fotoname { margin-bottom: 3px; }

/* ============================================================
   LESE-SCHICHT 26.08.: eine Leseschrift ueberall, auch in den
   Erklaer-Bereichen, plus saubere Druck-Ansicht.
   Reine Optik, komplett loeschbar.
   ============================================================ */

/* Eine ruhige, gut lesbare Schrift auf der ganzen Seite */
body, input, select, textarea, button {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

/* Die Erklaer-Bereiche ziehen mit der Grundschrift gleich */
details .inhalt { font-size: 15px; line-height: 1.5; }
details .inhalt td, details .inhalt th { font-size: 14px; line-height: 1.45; }
.bsp { font-size: 15px; line-height: 1.5; padding: 10px 14px; }
table.klein td, table.klein th { font-size: 14px; }
.fuss { line-height: 1.5; }
#reste ul, .kern ol, .fuellkern ol { line-height: 1.5; }
td.s-spiel, td.s-liga, td.s-zeit { line-height: 1.4; }
.legende span { font-size: 12.5px; }

/* Druck-Ansicht: nur der Inhalt, keine Bedienung */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 12pt; line-height: 1.4; margin: 0; }
  .navleiste, .filterbox, #filter, #reiterfilter, #rangfilter,
  #anbieterfilter, #zeitfilter, #meldung,
  button, select.anbwechsel, label.fotoknopf,
  a.mehr, .hilf, td.s-raus, .s-raus-liste { display: none !important; }
  input { border: none; font-weight: bold; }
  a { color: #000; text-decoration: none; }
  details { border: none; }
  details:not([open]) { display: none; }   /* zugeklappte Kaesten nicht mitdrucken */
  .schein, .bsp, .kern, .warnkern, .zeitkern, tr { page-break-inside: avoid; }
  h2 { page-break-after: avoid; }
  th { position: static; }                 /* klebende Kopfzeile stoert beim Druck */
}

/* ============================================================
   FARB-SCHICHT 26.08.: dunkelblauer Kopf, blaue Akzente.
   Weiss/schwarz bleibt Grundlage, gruen/rot behalten ihre
   Bedeutung. Komplett loeschbar.
   ============================================================ */
:root { --blau: #1a2c50; --blauhell: #eef1f7; }
h1 { color: var(--blau); border-bottom: 3px solid var(--blau); padding-bottom: 4px; }
h2 { color: var(--blau); border-bottom: 2px solid var(--blau); }
.navleiste a.navknopf { border-color: var(--blau); color: var(--blau); }
.navleiste a.navknopf:hover { background: var(--blauhell); }
.navleiste a.navknopf.aktiv { background: var(--blau); color: #fff; }
.navleiste a.navknopf.aktiv:hover { background: var(--blau); }
thead th { background: var(--blauhell); border-bottom: 2px solid var(--blau); }
.s-kopf { background: var(--blauhell); border-bottom: 1px solid var(--blau); }
.niedrigkopf { background: #fdecec; border-bottom: 1px solid #c8102e; }
details summary { background: var(--blauhell); border-left: 4px solid var(--blau); }
.filterbox { border-color: var(--blau); }
.filterzeile .f-label { color: var(--blau); }
#filter button.aktiv { background: var(--blau); border-color: var(--blau); }
.bildtrenner td { background: var(--blau) !important; }
tr.detail td { background: #f6f8fc; }

/* ---- Konto, Teilen, Chat (mein.html) ---- */
.kopfzeile { font-size: 14px; margin: 6px 0; }
.auth { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.auth-kasten { border: 2px solid var(--blau); padding: 12px 16px; flex: 1; min-width: 280px; }
.auth-kasten label { display: block; margin: 8px 0; font-size: 14px; }
.auth-kasten input { width: 100%; max-width: 320px; font-size: 15px; padding: 5px 8px;
  border: 1px solid #888; }
.auth-kasten button.haupt { margin-top: 8px; }
button.auge { font-size: 11px; padding: 2px 7px; margin-left: 4px; border: 1px solid #888;
  background: #f2f2f2; cursor: pointer; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; background: #c8102e;
  color: #fff; border-radius: 9px; font-size: 11px; text-align: center; }
.chatliste { border: 1px solid var(--blau); max-height: 320px; overflow-y: auto;
  padding: 6px 10px; background: #fff; }
.chatzeile { margin: 6px 0; padding: 5px 9px; background: var(--blauhell);
  border-left: 3px solid var(--blau); }
.chatzeile.vonmir { background: #e8f5e9; border-left-color: #1a7a1a; }
.chateingabe { display: flex; gap: 6px; margin-top: 6px; }
.chateingabe input { flex: 1; font-size: 15px; padding: 6px 9px; border: 1px solid #888; }

/* ---- Logo, Nachrichten-Knopf, Freunde ---- */
.logo { width: 40px; height: 40px; align-self: center; margin-right: 4px; }
.navleiste a.glocke { border-color: #1a7a1a; color: #1a7a1a; }
.navleiste a.glocke .badge { margin-left: 5px; }
button.freundknopf { font-size: 13px; padding: 4px 12px; margin: 2px 4px 2px 0;
  border: 2px solid var(--blau); background: #fff; color: var(--blau);
  font-weight: bold; cursor: pointer; }
button.freundknopf.aktiv { background: var(--blau); color: #fff; }
#freunde input { font-size: 14px; padding: 4px 8px; border: 1px solid #888; }

/* ---- Nachrichten-Fenster (Glocke) und Satz-Waehler ---- */
.navleiste a.glocke { margin-left: auto; }   /* Nachrichten-Knopf ganz rechts */
/* Das Fenster war 340 Pixel breit und ohne feste Hoehe - darin konnte man
   weder lesen noch schreiben. Jetzt: breit, hoch, und die Gespraechsliste
   nimmt nur einen schmalen Streifen, der Text bekommt den ganzen Rest. */
#glockenpanel {
  position: fixed; top: 12px; right: 12px;
  width: 880px; max-width: calc(100vw - 24px);
  height: 82vh; max-height: calc(100vh - 24px);
  display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--blau); z-index: 1000;
  box-shadow: 0 6px 26px rgba(0,0,0,0.3);
}
#gp-inhalt { flex: 1 1 auto; min-height: 0; }
.gp-kopf { background: var(--blau); color: #fff; font-weight: bold; padding: 7px 12px;
  display: flex; justify-content: space-between; align-items: center; }
.gp-zu { font-size: 11px; padding: 2px 8px; border: 1px solid #fff; background: transparent;
  color: #fff; cursor: pointer; }
/* padding entfaellt: die zwei Spalten bringen ihr eigenes mit */
.gp-freund { display: block; width: 100%; text-align: left; font-size: 14px;
  padding: 7px 10px; margin: 3px 0; border: 1px solid var(--blau); background: #fff;
  color: var(--blau); font-weight: bold; cursor: pointer; }
.gp-liste { max-height: 260px; margin: 6px 0; }
.gp-zurueck { font-size: 11px; padding: 2px 8px; border: 1px solid #888;
  background: #f2f2f2; cursor: pointer; }
.f-satz button { border: 2px solid #7a4a00; color: #7a4a00; font-weight: bold; }
.f-satz button.aktiv { background: #7a4a00; color: #fff; }

/* ---- Buchhaltung ---- */
.buch-eingabe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.buch-eingabe input, .buch-eingabe select { font-size: 14px; padding: 4px 7px;
  border: 1px solid #888; }

/* ---- Ordner-Leiste (der offene Foto-Satz) ---- */
.ordnerkarte { border: 3px solid var(--blau); margin: 8px 0 12px 0; background: #fff; }
.ordnerkopf { color: #fff; font-size: 15px; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ordneremoji { font-size: 20px; }
.ordnerzahl { margin-left: auto; font-size: 12.5px; }
.ordnerknoepfe { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 10px; }
.ordnerknopf { font-size: 13px; padding: 5px 12px; border: 1px solid #444;
  background: #fff; color: #000; cursor: pointer; text-decoration: none;
  font-weight: bold; }
.ordnerknopf:hover { background: #eee; }
.ordnernotiz { padding: 6px 12px; background: #fffbe8; border-top: 1px solid #ddd;
  font-size: 13.5px; white-space: pre-wrap; }
.ordnerpanel { padding: 8px 12px; border-top: 1px solid #ddd; }
.ordnerpanel > div { margin: 6px 0; }
.farbknopf { width: 26px; height: 26px; border: 2px solid #fff; outline: 1px solid #888;
  cursor: pointer; margin-right: 4px; }
.farbknopf.aktiv { outline: 3px solid #000; }
.ordnerliste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ordnerwahl { font-size: 13px; padding: 6px 12px; border: 2px solid var(--blau);
  background: #fff; cursor: pointer; font-weight: bold; }
.ordnerwahl.aktiv { background: var(--blauhell); }

/* ============================================================
   DESIGN-SCHICHT 26.08. (Konto-Ordner): loeschbar, nur Optik.
   ============================================================ */
.ordnerpflicht { border: 2px solid #1a2c50; background: #f2f5fb;
  padding: 10px 12px; margin-top: 8px; }
.ordnerpflicht button { margin: 6px 6px 0 0; }
.ordnerpflicht input { margin-top: 6px; }
.ordnerfilter { margin: 4px 0 8px 0; }
.ordnerfilter button { margin: 0 4px 4px 0; }
.ordnerfilter button.aktiv { background: #1a2c50; color: #fff; border-color: #1a2c50; }
.ordnerzeile { margin: 6px 0; }
tr.ohneordner td { background: #fff8e1; }

/* Personen-Kasse (Design-Schicht, loeschbar) */
.kassenkasten { border: 2px solid #1a2c50; padding: 10px 14px; margin: 10px 0; }
.kassenkasten h3 { margin-top: 0; }
.kassenkasten table { margin: 8px 0; }
.kassenwarnung { border: 2px solid #a00000; background: #fdeaea; color: #a00000;
  padding: 8px 12px; margin: 6px 0; }
.kassenformular { margin: 10px 0; padding: 8px; background: #f2f5fb; }
.warnbadge { display: inline-block; background: #a00000; color: #fff;
  border-radius: 50%; min-width: 16px; padding: 0 5px; font-weight: bold; }

/* Admin-Bereich (Design-Schicht, loeschbar) */
.adminkasten { border: 2px solid #a00000; padding: 4px 10px; margin: 8px 0; }
button.adminrot { background: #a00000; color: #fff; border-color: #a00000; }

/* Personen-Uebersicht: fertig-Markierungen und Zeigen-Auswahl (Design-Schicht) */
.fertigbadge { display: inline-block; background: #b35a00; color: #fff;
  border-radius: 9px; padding: 0 7px; font-weight: bold; font-size: 13px; }
tr.fertigzeile td { background: #ffe9cc; }
.fertighinweis { border: 2px solid #b35a00; background: #fff3e0; color: #7a3d00;
  padding: 8px 12px; margin: 6px 0; }
.fertigmark { color: #b35a00; font-weight: bold; }
.kassewahl { margin: 8px 0; padding: 6px 8px; background: #f4f4f4; }
.kassewahl label { margin-right: 12px; white-space: nowrap; }

/* Freunde-Dashboard und Anmerkungen (Design-Schicht) */
#freundepanel { position: fixed; top: 70px; right: 12px; width: 380px; max-width: 92vw;
  max-height: 75vh; overflow-y: auto; background: #fff; border: 2px solid #1a2c50;
  padding: 0 12px 12px 12px; z-index: 60; }
#freundepanel h4 { margin: 12px 0 6px 0; border-bottom: 1px solid #ccc; }
.fp-freund { margin: 5px 0; }
details.anmk { margin-top: 6px; }
details.anmk summary { cursor: pointer; }
details.anmk summary.anmk-marke { color: #b35a00; font-weight: bold; }
.anmk-zeile { border-left: 3px solid #b35a00; background: #fff8f0; padding: 4px 8px; margin: 4px 0; }
.anmk-zeile.anmk-aus { opacity: 0.55; border-left-color: #999; }
.anmk-tasten { margin-left: 8px; }
.anmk-tasten button { font-size: 12px; margin-left: 4px; }
.anmk-neu { margin-top: 4px; }
.anmk-neu input { width: 60%; }

/* Medien im Messenger (Design-Schicht) */
.medienleiste { margin-top: 6px; }
.medienleiste button, .medienleiste .fotoknopf { margin-right: 8px; }
.medienleiste .aufnahme, button.aufnahme { background: #a00000; color: #fff; }
.medienbild { max-width: 240px; max-height: 240px; display: block; margin-top: 4px; }
.medienvideo { max-width: 280px; display: block; margin-top: 4px; }
#gp-vorschau video { max-width: 100%; }

/* Anruf-Panel (Design-Schicht) */
#anrufpanel { position: fixed; bottom: 20px; right: 20px; width: 320px; max-width: 90vw;
  background: #1a2c50; color: #fff; padding: 14px; z-index: 80; border: 2px solid #000; }
#anrufpanel .anruf-tasten { margin-top: 10px; }
#anrufpanel button { margin-right: 8px; }
#anrufpanel video, #anrufpanel audio { width: 100%; margin-top: 8px; }

/* Mein Bereich in Bloecken + Admin-Seite (Design-Schicht, loeschbar) */
.mb-navi { margin: 12px 0; border-bottom: 3px solid #1a2c50; padding-bottom: 0; }
.mb-navi button { font-size: 16px; padding: 10px 22px; margin: 0 6px 0 0;
  border: 2px solid #1a2c50; border-bottom: none; background: #f2f5fb; cursor: pointer; }
.mb-navi button.aktiv { background: #1a2c50; color: #fff; font-weight: bold; }
.mb-block { display: none; }
.mb-block.offen { display: block; }
/* Eigene Ansichten (Profil, Freunde & Teilen, Chat) seit 02.09.2026:
   ist eine offen (body.mb-sonder), verschwindet der normale Bereich
   darunter. #schluesselkasten, #meldung und #bereichtabs bleiben in
   JEDER Ansicht da (Falle 7 der Umbau-Karte). */
.mb-ansicht { display: none; }
body.mb-sonder .mb-ansicht.offen { display: block; }
body.mb-sonder .mb-block,
body.mb-sonder #mb_navi,
body.mb-sonder #anbieterkopf { display: none; }
.e2ehinweis { margin: 6px 0; }
.e2ehinweis summary { cursor: pointer; }
.navknopf.adminknopf, a.adminknopf { background: #7a0000; color: #fff; border-color: #7a0000; }
.kopfzeile a.adminknopf { display: inline-block; padding: 6px 14px; margin-left: 10px;
  text-decoration: none; }

/* Foto-Lesen (Design-Schicht) */
.lesekasten { border: 2px solid #1a7a1a; background: #f3faf3; padding: 10px 12px; margin-top: 8px; }
.lesekasten.lesewarn { border-color: #a00000; background: #fdf2f2; }
.lesekasten table td { padding: 3px 10px 3px 0; }
.lesekasten button { margin-top: 6px; }

/* App-Installation (Design-Schicht) */
.navknopf.installknopf { background: #1a7a1a; color: #fff; border-color: #1a7a1a; }

/* Satz-Einlesen (Design-Schicht) */
.tabellenrand { overflow-x: auto; }
.satzkasten { border: 1px solid #999; padding: 6px 10px; margin: 8px 0; }
.satzkasten summary { cursor: pointer; }
#adm_vorschau input, #adm_saetze input { font-size: 14px; }

/* Foto-Verwaltung im Admin (Design-Schicht) */
.fotogitter { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.fotokachel { border: 1px solid #999; padding: 6px; max-width: 300px; }
.fotokachel img { max-width: 100%; display: block; margin-bottom: 4px; }

/* Doppelt hochgeladene Fotos (Design-Schicht) */
.fotokachel.fotodoppelt { border: 3px solid #a00000; background: #fdf2f2; }

/* ============================================================
   RUNDUNGS-SCHICHT 27.08. (Karams UX-Wunsch): weicher, Knöpfe
   sichtbarer - aber weiter leicht eckig. Löschbar, nur Optik.
   ============================================================ */
button, input, select, textarea, .navknopf, .kern, .warnkern, .ordnerkarte,
.mb-navi button, .adminkasten, .satzkasten, .fotokachel, .kassenkasten,
.lesekasten, .schein, .auth-kasten, .ordnerpflicht, .fertighinweis,
.kassenwarnung, .anmk-zeile, #freundepanel, #glockenpanel, #anrufpanel,
.kassenformular, .kassewahl, .unter { border-radius: 7px; }
button { cursor: pointer; padding: 7px 14px; border: 2px solid #444; background: #fff;
  transition: background 0.12s, border-color 0.12s; }
button:not(.aktiv):not(.haupt):hover { background: #eef2fa; border-color: #1a2c50; }
button.haupt { background: #1a2c50; color: #fff; border-color: #1a2c50; }
button.haupt:hover { background: #0f1c38; }
input, select, textarea { padding: 6px 8px; border: 2px solid #999; }
input:focus, select:focus, textarea:focus { border-color: #1a2c50; outline: none; }

/* Lade-Balken + Eigenbau + sticky Navigation (Design-Schicht) */
.ladebalken { margin-top: 8px; height: 26px; background: #e4e8f0; border-radius: 7px; overflow: hidden; }
.ladebalkenfuellung { height: 100%; background: #1a7a1a; color: #fff; font-weight: bold;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  transition: width 0.25s ease; min-width: 40px; border-radius: 7px; }
.eigenbaukasten { border: 2px solid #1a2c50; border-radius: 7px; padding: 10px 14px; }
.eb-zeile { display: block; padding: 5px 6px; border-radius: 5px; cursor: pointer; }
.eb-zeile:hover { background: #eef2fa; }
.mb-navi { position: sticky; top: 0; background: #fff; z-index: 40; padding: 8px 0 0 0; }
.mb-navi button { font-size: 17px; padding: 12px 26px; }
.mb-navi button.aktiv { box-shadow: 0 3px 0 #1a2c50; }

/* Ziel-Logik: 400 Euro je Kombination (Design-Schicht) */
.zielzeile { padding: 8px 12px; border-top: 1px solid #ccc; font-size: 15px; }
.ziel-gut { color: #0a5a0a; font-weight: bold; }
.ziel-offen { color: #7a3d00; }

/* Update-Knopf: fällt auf, wenn es etwas Neues gibt (Design-Schicht) */
.navknopf.updateknopf { background: #a00000; color: #fff; border-color: #a00000;
  font-weight: bold; animation: updatepuls 1.8s ease-in-out infinite; }
.navknopf.updateknopf:hover { background: #7a0000; }
@keyframes updatepuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(160, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(160, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .navknopf.updateknopf { animation: none; } }

/* Höhere Genauigkeit als die Navigations-Grundregel (sonst bleiben die
   farbigen Sonder-Knöpfe weiß) */
.navleiste a.navknopf.installknopf { background: #1a7a1a; color: #fff; border-color: #1a7a1a; }
.navleiste a.navknopf.installknopf:hover { background: #146014; }
.navleiste a.navknopf.updateknopf { background: #a00000; color: #fff; border-color: #a00000; }
.navleiste a.navknopf.updateknopf:hover { background: #7a0000; }

/* Nicht sicher erkannte Zeilen in der Vorschau (Design-Schicht) */
tr.rohzeile td { background: #fdeaea; }
tr.rohzeile td:first-child { color: #a00000; font-weight: bold; }

/* Ordner-Werkstatt im Admin (Design-Schicht) */
.ordnerwerk { border: 2px solid #1a2c50; border-radius: 7px; margin: 12px 0; background: #fff; }
.ordnerwerk > summary { padding: 12px 14px; cursor: pointer; font-size: 17px; border-radius: 7px; }
.ordnerwerk.werkoffen { border-width: 3px; }
.ordnerwerk.werkoffen > summary { background: #eef7ee; }
.werkinhalt { padding: 4px 14px 14px 14px; }
.werkleiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #ddd; margin-bottom: 10px; }

/* Schlüssel-Warnung: darf man nicht übersehen (Design-Schicht) */
.schluesselwarnung { border-width: 3px; font-size: 17px; }
.schluesselwarnung input { font-size: 17px; }

/* Geldfluss-Karte (Design-Schicht) */
.flusskarte { width: 100%; max-width: 680px; height: auto; margin: 8px 0; }
.flusskarte .fk-weg { fill: #eef2fa; stroke: #1a2c50; stroke-width: 2; }
.flusskarte .fk-anb { fill: #f3faf3; stroke: #1a7a1a; stroke-width: 2; }
.flusskarte .fk-bank { fill: #fff3e0; stroke: #b35a00; stroke-width: 2; }
.flusskarte .fk-name { font: bold 13px Arial; fill: #000; }
.flusskarte .fk-zahl { font: 12px Arial; fill: #333; }
.flusskarte .fk-titel { font: bold 12px Arial; fill: #666; }
.flusskarte .fk-hin { stroke: #1a2c50; stroke-width: 2; }
.flusskarte .fk-raus { stroke: #b35a00; stroke-width: 2; stroke-dasharray: 5 4; }
.flussliste { margin: 6px 0 6px 18px; }
.flussliste li { margin: 3px 0; }


/* ---------- Nachrechnen (Design-Schicht, gefahrlos loeschbar) ---------- */
.pruefkopf { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.pruefzahl { border-radius:999px; padding:3px 12px; font-weight:600; font-size:13px; }
.pruefzahl.rot { background:#fdecea; color:#a2231b; }
.pruefzahl.gelb { background:#fff5e0; color:#8a5a00; }
.pruefzahl.gruen { background:#e8f6ec; color:#1c6b34; }
.pruefzahl.grau { background:#eef1f6; color:#41506b; }
.pruefgruppe { margin-bottom:10px; }
.pruefzeile { border-radius:10px; padding:9px 12px; margin-bottom:6px; font-size:14px; line-height:1.45;
  border-left:4px solid #ccc; background:#f7f9fc; }
.pruefzeile.fehler { border-left-color:#c0392b; background:#fdecea; }
.pruefzeile.warnung { border-left-color:#e08a00; background:#fff8ec; }
.pruefzeile.hinweis { border-left-color:#5a7ab5; background:#f2f6fd; }
.pruefzeile.gut { border-left-color:#2e9e52; background:#e8f6ec; }
.pruefmarke { display:inline-block; background:rgba(0,0,0,.07); border-radius:6px; padding:1px 7px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-right:8px; }
.pruefwas { margin-top:10px; font-size:13px; }
.pruefwas ul { margin:6px 0 4px 18px; }
.bilanzordner { border:1px solid var(--rand,#d8dee9); border-radius:12px; padding:10px 14px; margin-bottom:10px; }
.bilanzordner summary { cursor:pointer; font-size:14px; }
.bilanzzahlen { margin:10px 0; }
.bilanzpaar { display:flex; flex-wrap:wrap; gap:14px; }
.bilanzpaar table { flex:1 1 240px; }
.bilanzscheine { margin-top:12px; }
.bilanzscheine td { vertical-align:top; }

/* ---------- Bildschirm-Ausschnitt ---------- */
.ausschnittbuehne { position:fixed; inset:0; z-index:9000; background:rgba(12,18,32,.94);
  display:flex; flex-direction:column; }
.ausschnittkopf { color:#fff; padding:10px 16px; display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; background:#16233d; }
.ausschnittkopf .mini { color:#b9c6de; }
.ausschnittknoepfe { margin-left:auto; display:flex; gap:8px; }
.ausschnittflaeche { flex:1; position:relative; overflow:auto; display:flex;
  align-items:flex-start; justify-content:center; padding:12px; }
.ausschnittflaeche img { max-width:100%; max-height:calc(100vh - 90px); cursor:crosshair;
  user-select:none; box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.ausschnittrahmen { position:absolute; border:2px dashed #ffd34d; background:rgba(255,211,77,.16);
  pointer-events:none; }
.ausschnittmass { position:absolute; background:#ffd34d; color:#2a1f00; font-size:11px;
  font-weight:700; padding:1px 6px; border-radius:5px; pointer-events:none; }


/* ============================================================
   KENN-SCHICHT 27.08.: man soll auf einen Blick sehen, in
   welchem Bereich man gerade ist.

   Reine Optik. Dieser Block kann ersatzlos geloescht werden;
   dann sieht das Programm wieder aus wie vorher und laeuft
   unveraendert weiter. Er steht ganz unten und gewinnt allein
   durch seine Lage - kein einziges !important.

   EINHEITLICH GEBAUT, JE BEREICH ANDERS GEFUELLT.
   Auf jeder der sieben Seiten sitzen dieselben vier Zeichen an
   denselben Stellen, nur mit anderen Werten:
     1. Kennkante    schmaler Farbstreifen ganz oben am Rand
     2. Kennmarke    Schild ueber der Ueberschrift: Zeichen + Wort
     3. Ueberschrift  Text und Linie darunter in der Kennfarbe
     4. Kopfleiste   der aktive Knopf der obersten Navigation
   Weiter unten aendert sich nichts. So bleiben die sieben Seiten
   erkennbar EIN Programm.

   WARUM ZEICHEN UND WORT UND NICHT NUR FARBE.
   Gruen (bester Wert), rot (Abzug, vorbei, Warnung) und braun
   (duenner Markt, aus Foto) tragen in den Tabellen Bedeutung und
   sind damit gesperrt. Uebrig bleibt nur der Bereich von Petrol
   bis Violett, und daraus lassen sich keine sieben sicher
   unterscheidbaren Toene holen (nachgerechnet: acht der
   einundzwanzig Farbpaare liegen zu nah beieinander).
   Deshalb traegt das ZEICHEN und das WORT die Erkennung, die
   Farbe ist nur der schnelle zweite Hinweis. Wer die Farben
   nicht unterscheiden kann oder schwarzweiss druckt, liest
   trotzdem sofort, wo er ist.

   WO DIE FARBE NIE HINKOMMT.
   In keine Tabelle: kein thead, kein tbody, keine Zelle, kein
   Zebrastreifen, kein Filterknopf, keine Ordnerkarte, kein
   Kasten. In diesem ganzen Block steht keine einzige Regel
   innerhalb einer Tabelle. Merksatz: die Farbe hoert oberhalb
   der Tabelle auf.

   NACHGERECHNET, NICHT GESCHAETZT (WCAG AA braucht 4,5:1):
   Marke  5,95 bis 13,02   Ueberschrift  6,79 bis 14,97
   aktiver Knopf  6,79 bis 14,97   Admin-Knopf  11,49
   ============================================================ */

/* ---- 1. Die sieben Kennungen. Nur Werte, keine Regeln. ----
   Der Haken sitzt am <body> jeder Seite: <body data-seite="tafel">.
   Fehlt er, greift dieser ganze Block nicht und die Seite sieht
   aus wie bisher.
     --kenn      kraeftige Kennfarbe, weisse Schrift darauf lesbar
     --kennhell  dieselbe Farbe stark aufgehellt, Flaeche der Marke
     --kenntext  Zeichen und Wort auf der Marke: sagt die ART der
                 Seite, wiederholt also nicht die Ueberschrift    */

body[data-seite="tafel"]    { --kenn: #1a2c50; --kennhell: #eef1f7; --kenntext: "\1F4CB  Tabelle"; }
body[data-seite="bau"]      { --kenn: #0e6273; --kennhell: #e7f2f4; --kenntext: "\1F527  Werkzeug"; }
body[data-seite="handbuch"] { --kenn: #4b2e83; --kennhell: #f0ecf8; --kenntext: "\1F4D6  Lehrtext"; }
body[data-seite="original"] { --kenn: #4a5566; --kennhell: #eef0f3; --kenntext: "\1F4C4  Vorlage"; }
body[data-seite="hilfe"]    { --kenn: #1a5e97; --kennhell: #e8f1fa; --kenntext: "\2753  Bedienung"; }
body[data-seite="mein"]     { --kenn: #6d2f70; --kennhell: #f6ecf6; --kenntext: "\1F464  Konto"; }
body[data-seite="admin"]    { --kenn: #23272f; --kennhell: #eeeff2; --kenntext: "\2699  Verwaltung"; }
/* Admin bekommt bewusst keine Buntfarbe, sondern Anthrazit: Rot ist
   im Programm die Warnfarbe, und der dunkelrote Admin-Knopf soll auf
   dieser Seite der einzige rote Punkt bleiben. */

/* ---- 2. Kennkante: der Farbstreifen ganz oben ----
   Liegt fest am Bildschirmrand und scrollt nie weg, kostet keinen
   Platz (der Seitenrand oben ist 10px) und nimmt keine Klicks an.
   z-index 50: ueber der klebenden Reiterleiste in Mein Bereich (40),
   unter dem Nachrichtenfenster (1000) und der Ausschnitt-Buehne (9000). */
body[data-seite]::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: var(--kenn);
  z-index: 50;
  pointer-events: none;
}

/* ---- 3. Kennmarke: das Schild ueber der Ueberschrift ----
   body > h1 trifft absichtlich NUR die Ueberschrift der Seite.
   Ueberschriften, die spaeter im Inhalt erzeugt werden (Mein Bereich
   baut welche), bekommen kein zweites Schild.
   Die Marke steht VOR dem Titel in derselben Zeile. Damit kostet sie
   keine einzige Zeile Hoehe ueber der Tabelle - und wird der Platz am
   Handy doch zu eng, rutscht sie von selbst in die naechste Zeile,
   statt etwas zu ueberlaufen.
   12,5px, damit die Marke nicht die kleinste Schrift der Seite ist
   (die Fusszeile hat 11,5px). */
body[data-seite] > h1::before {
  content: var(--kenntext);
  display: inline-block;
  vertical-align: 2px;
  max-width: 100%;
  margin: 0 10px 0 0;
  padding: 3px 12px 3px 9px;
  border-left: 5px solid var(--kenn);
  border-radius: 0 5px 5px 0;
  background: var(--kennhell);
  color: var(--kenn);
  font-size: 12.5px;
  font-weight: bold;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Die Verwaltung bekommt als einzige eine GEFUELLTE Marke. Das ist ein
   zweites Erkennungszeichen ganz ohne Farbe: schon an der Form sieht
   man, dass man nicht als normaler Nutzer unterwegs ist.
   Weiss auf Anthrazit ergibt 14,97:1. */
body[data-seite="admin"] > h1::before {
  background: var(--kenn);
  color: #fff;
  border-left-color: var(--kenn);
  border-radius: 5px;
  padding-left: 12px;
}

/* ---- 4. Die Ueberschrift selbst ----
   Ersatzwert #1a2c50: eine Seite ohne Kennung behaelt exakt das
   heutige Marineblau, es aendert sich also nichts. h2 bleibt
   absichtlich hausblau - die Kennfarbe zeigt sich oben an der Seite,
   nicht im ganzen Text. */
h1 { color: var(--kenn, #1a2c50); border-bottom-color: var(--kenn, #1a2c50); }

/* ---- 5. Der aktive Knopf in der obersten Kopfleiste ----
   body > .navleiste trifft nur die Kopfleiste. Die zweite Leiste in
   Mein Bereich (#bereichtabs) liegt im Inhalt und bleibt aussen vor.
   ACHTUNG bei Aenderungen: die vier Sonderknoepfe sind ausdruecklich
   ausgenommen, damit sie ihre Signalfarbe behalten (Glocke gruen,
   Admin dunkelrot, App laden gruen, Update rot). Kommt ein fuenfter
   farbiger Sonderknopf dazu, MUSS er hier in die :not()-Kette, sonst
   uebermalt die Kennfarbe seine Warnwirkung, sobald er "aktiv" traegt.
   Nicht aktive Knoepfe bleiben hausblau: so ist immer genau EIN Knopf
   farbig, und der zeigt den Bereich. */
body[data-seite] > .navleiste a.navknopf.aktiv:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf) {
  background: var(--kenn, #1a2c50);
  border-color: var(--kenn, #1a2c50);
  color: #fff;
}
body[data-seite] > .navleiste a.navknopf.aktiv:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf):hover {
  background: var(--kenn, #1a2c50);
}

/* ---- 6. Eine Reparatur, die dazugehoert ----
   Auf admin.html traegt der Admin-Knopf gleichzeitig "aktiv". Die
   Grundregel .navleiste a.navknopf.aktiv ist genauer als
   .navknopf.adminknopf und uebermalt das Dunkelrot deshalb SCHON
   HEUTE mit Hausblau - ausgerechnet auf der Seite, auf der die
   Warnfarbe am meisten zaehlt. Diese Zeile gibt sie zurueck
   (weiss auf #7a0000 = 11,49:1).
   Wer den alten Zustand lieber behalten will, loescht genau diese
   eine Regel; der Rest der Schicht bleibt davon unberuehrt. */
body[data-seite] > .navleiste a.navknopf.adminknopf {
  background: #7a0000; border-color: #7a0000; color: #fff;
}

/* ---- 7. Handy ----
   Oben zaehlt jeder Punkt: Kante und Marke werden als EINE Einheit
   etwas kleiner, damit der Kopf nicht mehr Platz frisst als heute. */
@media (max-width: 480px) {
  body[data-seite]::before { height: 3px; }
  body[data-seite] > h1::before {
    font-size: 11.5px; padding: 2px 9px 2px 7px; margin-right: 8px;
    letter-spacing: 0.04em;
  }
}

/* ---- 8. Druck ----
   Der Streifen gehoert auf den Bildschirm, nicht aufs Papier (er
   wuerde wegen print-color-adjust:exact als Farbbalken mitdrucken).
   Die Marke bleibt, aber in reinem Schwarz auf Weiss: so sieht man
   dem Ausdruck an, von welcher Seite er stammt, ohne Farbe zu
   verbrauchen. Die Kopfleiste wird beim Drucken ohnehin ausgeblendet. */
@media print {
  body[data-seite]::before { display: none; }
  body[data-seite] > h1::before,
  body[data-seite="admin"] > h1::before {
    background: #fff; color: #000; border-left-color: #000;
    border-radius: 0; padding: 2px 10px 2px 7px; letter-spacing: 0.04em;
  }
  h1 { color: #000; border-bottom-color: #000; }
}

/* ---- 9. Ruhe ----
   Diese Schicht bewegt sich nicht: keine Animation, kein Uebergang,
   kein Blinken. Die Sperre steht trotzdem hier, falls spaeter jemand
   Bewegung ergaenzt. Der einzige bewusst blinkende Knopf im Programm
   bleibt der Update-Knopf, und der wird weiter oben abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
  body[data-seite]::before, body[data-seite] > h1::before {
    animation: none; transition: none;
  }
}


/* ---------- Personendaten (Design-Schicht, loeschbar) ---------- */
.persondaten-felder { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; }
.pd-feld { font-size: 13px; flex: 1 1 220px; max-width: 320px; }
.pd-feld input, .pd-feld textarea { width: 100%; font-size: 14px; padding: 4px 7px;
  border: 1px solid #888; }
.pd-feld textarea { min-height: 54px; font-family: inherit; }
.pd-breit { flex: 1 1 100%; max-width: none; }
.pd-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.pd-doks { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.pd-dok { border: 1px solid #bbb; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }
.pd-vorschau { display: block; max-width: 190px; max-height: 130px; margin-top: 5px;
  border-radius: 5px; }


/* ---------- Tipp-Kasten des Verteilers (loeschbar) ---------- */
.tippkasten { margin-top: 8px; padding: 8px 12px; border: 1px solid #b98a00;
  background: #fffaf0; border-radius: 8px; font-size: 13px; }
.tippkasten ul { margin: 4px 0 2px 20px; }
.tippkasten li { margin: 2px 0; }

/* ============================================================
   WOHLFUEHL-SCHICHT 28.08. (Karams Wunsch: "alles schoener,
   uebersichtlicher, mehr Farben").

   Reine Optik. Dieser Block wird ans ENDE von stil.css
   angehaengt; loescht man ihn, sieht alles wieder aus wie
   vorher und laeuft unveraendert. Kein einziges !important,
   kein Eingriff in HTML oder JS.

   DER GEDANKE: mutige Farbe mit Disziplin.
   1. Jede Seite bekommt eine zarte Flaeche in ihrer Kennfarbe
      (--kennhell aus der Kenn-Schicht weiter oben). Die Kaesten
      liegen darauf als weisse Karten mit weichem Schatten.
   2. Ueberschriften, Tabellenkoepfe, Kopfleiste, Filter-Reiter,
      Haupt-Knoepfe, Fokus-Ringe und die Reiter in Mein Bereich
      uebernehmen die Kennfarbe der Seite. So hat jeder Bereich
      seine eigene Stimmung, ohne ein neues Farbsystem.
   3. Die Scheine im Kombi-Bau tragen ihren Kopf in der
      Hausfarbe des Anbieters (dieselben Farben wie die
      .marke-Schilder: Interwetten gruen, Bwin schwarz,
      Bet365 gruen-gelb, Stake dunkelblau).

   WO NICHTS PASSIERT (die Farbe hoert oberhalb der Tabelle auf):
   Innerhalb der Tabellenkoerper (tbody) aendert dieser Block
   keine einzige Farbe. Gruen (bester Wert, gewonnen), rot
   (Interwetten-Abzug, vorbei, verloren, Warnung) und braun/orange
   (duenner Markt, aus Foto, offen, fertig) bleiben pixelgleich.
   Die vier Sonderknoepfe (Glocke gruen, Admin dunkelrot,
   App laden gruen, Update rot blinkend) werden nicht angefasst,
   der rote Admin-Kasten auch nicht.

   Alles steht in @media screen: der DRUCK bleibt dadurch exakt
   wie heute. Es kommt keine Animation dazu, prefers-reduced-motion
   hat in dieser Schicht nichts zu unterdruecken.

   Alle var(...) haben einen Ersatzwert: fehlt einer Seite die
   Kennung (data-seite), faellt alles auf das Hausblau zurueck.
   ============================================================ */
@media screen {

/* ---- 1. Die Buehne: zarte Kennfarbe hinter den Karten ----
   Bewusst heller gemischt als --kennhell pur, damit Kennmarke und
   Tabellenkoepfe (die --kennhell pur tragen) sich weiter abheben.
   Ein alter Browser ohne color-mix laesst die Zeile weg, dann
   bleibt der Grund weiss wie bisher. */
body[data-seite] { background-color: color-mix(in srgb, var(--kennhell, #ffffff) 55%, #fff); }

/* Tabellen bekommen ihren weissen Grund jetzt selbst. Dadurch
   bleiben die Zeilen OHNE eigene Farbe (das Zebra-Weiss) exakt
   weiss wie heute; an den tbody-Regeln selbst aendert sich nichts. */
table { background-color: #fff; }
/* In farbig gefuellten Kaesten bleiben Tabellen durchsichtig,
   sonst wuerde das neue Weiss die Kastenfarbe verdecken. */
.lesekasten table, .ordnerpflicht table, .kassenformular table,
.kassenwarnung table, .fertighinweis table, .tippkasten table { background-color: transparent; }

/* ---- 2. Kaesten als richtige Karten ----
   Weisser Grund fuer alles, was bisher durchsichtig war. Die
   Bedeutungs-Kaesten (lesekasten gruen, fertighinweis orange,
   kassenwarnung rot, fotodoppelt rot) stehen absichtlich NICHT
   in dieser Liste und behalten ihre Farbe. */
/* details:not(.anmk): die Anmerkungs-Kaesten stecken IN Tabellenzellen
   (mein.js), dort wuerde Weiss das Zebra-Grau und das Fertig-Orange
   uebermalen - im tbody aendert diese Schicht keine Farbe. */
.warnkern, .zeitkern, .fuellkern, .filterbox, details:not(.anmk), .schein,
.auth-kasten, .kassenkasten, .adminkasten, .eigenbaukasten,
.fotokachel, .bsp { background-color: #fff; }

/* Ein weicher, doppelter Schatten macht aus den Kaesten Karten.
   Schatten liegt AUSSEN, die Innenfarben bleiben unberuehrt. */
.kern, .warnkern, .zeitkern, .fuellkern, .filterbox, .schein,
.auth-kasten, .kassenkasten, .adminkasten, .eigenbaukasten,
.ordnerkarte, .fotokachel, .lesekasten, .kassenwarnung,
.fertighinweis, .ordnerpflicht, .bsp, .chatliste, details:not(.anmk) {
  box-shadow: 0 1px 2px rgba(15, 25, 40, 0.08), 0 3px 12px rgba(15, 25, 40, 0.07);
}
.zeitkern, .fuellkern, .filterbox { border-radius: 9px; }
.bsp { border-radius: 9px; }
/* Bewusst KEIN Rand am .bsp: bei 320 px Breite wuerde schon 1px
   Rand die breiteste Beispieltabelle um 1px weiter hinausschieben
   (nachgemessen). Der Schatten traegt die Kartenwirkung allein. */
details:not(.anmk) { border-radius: 9px; }
details:not(.anmk) > summary { border-radius: 8px 8px 0 0; }

/* Neutrale Rahmen ziehen zur Kennfarbe um (rote und gruene
   Rahmen sind Bedeutung und bleiben, wie sie sind). */
.filterbox, .auth-kasten, .kassenkasten, .eigenbaukasten,
.ordnerkarte, .ordnerwahl, .ordnerwerk, .chatliste,
#glockenpanel, #freundepanel { border-color: var(--kenn, #1a2c50); }

/* ---- 3. Ueberschriften mit Farbakzent aus der Kennfarbe ---- */
body[data-seite] h2 {
  color: var(--kenn, #1a2c50);
  border-bottom-color: var(--kenn, #1a2c50);
  border-left: 6px solid var(--kenn, #1a2c50);
  padding-left: 10px;
}
body[data-seite] h3 { color: var(--kenn, #1a2c50); }
body[data-seite] h4 { color: var(--kenn, #1a2c50); }

/* ---- 4. Tabellenkoepfe in der Kennfarbe ----
   thead ist der Kopf UEBER dem Tabellenkoerper; im tbody selbst
   passiert weiterhin nichts. */
body[data-seite] thead th {
  background-color: var(--kennhell, #eef1f7);
  border-bottom: 2px solid var(--kenn, #1a2c50);
}

/* ---- 5. Aufklapp-Kaesten: Kopfzeile in der Kennfarbe ----
   .werkoffen (geoeffnete Ordner-Werkstatt, hellgruen) ist
   ausgenommen und behaelt sein Signal. */
body[data-seite] details:not(.anmk):not(.werkoffen) > summary {
  background-color: var(--kennhell, #eef1f7);
  border-left-color: var(--kenn, #1a2c50);
}

/* ---- 6. Kopfleiste: auch die ruhigen Knoepfe zeigen die
   Kennfarbe der Seite. Die vier Sonderknoepfe sind ausgenommen
   und behalten ihre Signalfarbe (gleiche Ausnahmen-Kette wie in
   der Kenn-Schicht; kommt ein fuenfter Sonderknopf dazu, muss er
   hier UND dort in die :not()-Kette). */
body[data-seite] > .navleiste a.navknopf:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf) {
  border-color: var(--kenn, #1a2c50);
  color: var(--kenn, #1a2c50);
}
body[data-seite] > .navleiste a.navknopf:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf):hover {
  background-color: var(--kennhell, #eef1f7);
}
body[data-seite] > .navleiste a.navknopf.aktiv:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf) {
  background-color: var(--kenn, #1a2c50);
  color: #fff;
}

/* ---- 7. Filterleisten: die neutralen Reiter faerben sich mit.
   Die Bedeutungs-Filter behalten ihre Farben: Anbieter gruen,
   Rang grau, Satz braun. */
body[data-seite] #filter button.aktiv {
  background-color: var(--kenn, #1a2c50);
  border-color: var(--kenn, #1a2c50);
  color: #fff;
}
body[data-seite] .filterzeile.f-reiter button.aktiv,
body[data-seite] .filterzeile.f-zeit button.aktiv {
  background-color: var(--kenn, #1a2c50);
  border-color: var(--kenn, #1a2c50);
  color: #fff;
}
.filterzeile .f-label { color: var(--kenn, #1a2c50); }

/* ---- 8. Knoepfe und Eingaben ---- */
button.haupt { background-color: var(--kenn, #1a2c50); border-color: var(--kenn, #1a2c50); }
button.haupt:hover { background-color: color-mix(in srgb, var(--kenn, #1a2c50) 82%, #000); }
button:not(.aktiv):not(.haupt):hover {
  background-color: var(--kennhell, #eef2fa);
  border-color: var(--kenn, #1a2c50);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--kenn, #1a2c50);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kenn, #1a2c50) 20%, transparent);
}
button.freundknopf { border-color: var(--kenn, #1a2c50); color: var(--kenn, #1a2c50); }
button.freundknopf.aktiv { background-color: var(--kenn, #1a2c50); color: #fff; }

/* ---- 9. Mein Bereich: Reiter, Bereichs-Knoepfe, Kassen-Leisten ---- */
body[data-seite] .mb-navi {
  background-color: color-mix(in srgb, var(--kennhell, #ffffff) 55%, #fff);
  border-bottom-color: var(--kenn, #1a2c50);
}
.mb-navi button {
  background-color: #fff;
  border-color: var(--kenn, #1a2c50);
  color: var(--kenn, #1a2c50);
}
.mb-navi button.aktiv {
  background-color: var(--kenn, #1a2c50);
  border-color: var(--kenn, #1a2c50);
  color: #fff;
  box-shadow: 0 3px 0 var(--kenn, #1a2c50);
}
#bereichtabs a.navknopf { border-color: var(--kenn, #1a2c50); color: var(--kenn, #1a2c50); }
#bereichtabs a.navknopf:hover { background-color: var(--kennhell, #eef1f7); }
#bereichtabs a.navknopf.aktiv {
  background-color: var(--kenn, #1a2c50);
  border-color: var(--kenn, #1a2c50);
  color: #fff;
}
#bereichtabs a.navknopf.aktiv:hover { background-color: var(--kenn, #1a2c50); }
/* Die Anzeigen-Leiste der Personen-Kasse (KASSE_BLOECKE) als
   farbige Zeile statt grauem Balken. */
.kassewahl {
  background-color: var(--kennhell, #f4f4f4);
  border-left: 4px solid var(--kenn, #1a2c50);
  border-radius: 7px;
}
/* Formular-Flaechen ziehen mit der Kennfarbe mit. */
.kassenformular, .ordnerpflicht { background-color: var(--kennhell, #f2f5fb); }
.kassenformular { border-radius: 7px; }
/* Chat: Sprechblasen in der Kennfarbe; die eigenen bleiben gruen. */
.chatzeile { background-color: var(--kennhell, #eef1f7); border-left-color: var(--kenn, #1a2c50); }
/* Nachrichten-Fenster: Kopf in der Kennfarbe der Seite. */
.gp-kopf { background-color: var(--kenn, #1a2c50); }
.gp-freund { border-color: var(--kenn, #1a2c50); color: var(--kenn, #1a2c50); }

/* ---- 10. Kombi-Bau: der Schein-Kopf traegt die Hausfarbe
   seines Anbieters (wie die .marke-Schilder). Das Farbband oben
   plus zarte Tonflaeche; der rote Warnkopf (.niedrigkopf,
   Quoten unter der Mindestquote) bleibt unangetastet rot.
   Browser ohne :has() zeigen einfach den Kennfarben-Kopf. */
.s-kopf:not(.niedrigkopf) { background-color: var(--kennhell, #eef1f7); border-bottom-color: var(--kenn, #1a2c50); }
.schein:has(.s-kopf .m-iw):not(:has(.niedrigkopf)) { border-top: 5px solid #0a7d3e; }
.schein:has(.s-kopf .m-bw):not(:has(.niedrigkopf)) { border-top: 5px solid #111111; }
.schein:has(.s-kopf .m-b3):not(:has(.niedrigkopf)) { border-top: 5px solid #14805e; }
.schein:has(.s-kopf .m-st):not(:has(.niedrigkopf)) { border-top: 5px solid #1a2c38; }
.schein:has(.s-kopf .m-iw) > .s-kopf:not(.niedrigkopf) { background-color: color-mix(in srgb, #0a7d3e 9%, #fff); border-bottom-color: #0a7d3e; }
.schein:has(.s-kopf .m-bw) > .s-kopf:not(.niedrigkopf) { background-color: color-mix(in srgb, #111111 6%, #fff); border-bottom-color: #111111; }
.schein:has(.s-kopf .m-b3) > .s-kopf:not(.niedrigkopf) { background-color: color-mix(in srgb, #14805e 9%, #fff); border-bottom-color: #14805e; }
.schein:has(.s-kopf .m-st) > .s-kopf:not(.niedrigkopf) { background-color: color-mix(in srgb, #1a2c38 8%, #fff); border-bottom-color: #1a2c38; }

/* ---- 10b. Nachrechnen: die Zaehl-Zahlen als richtige Kacheln.
   Die FARBEN bleiben exakt die alten (rot/gelb/gruen/grau tragen
   Bedeutung) - nur Groesse und Karten-Look kommen dazu. ---- */
.pruefkopf { gap: 10px; }
.pruefzahl { font-size: 14.5px; padding: 6px 14px;
  box-shadow: 0 1px 2px rgba(15, 25, 40, 0.08), 0 3px 10px rgba(15, 25, 40, 0.06); }

/* ---- 10c. Mein Bereich, Reste in der Kennfarbe (sonst blieben
   hausblaue Inseln im Bereichston stehen) ---- */
.ordnerfilter button.aktiv { background-color: var(--kenn, #1a2c50);
  border-color: var(--kenn, #1a2c50); color: #fff; }
.ordnerwahl.aktiv { background-color: var(--kennhell, #eef1f7); }
.ordnerpflicht { border-color: var(--kenn, #1a2c50); }
.eb-zeile:hover { background-color: var(--kennhell, #eef2fa); }

/* ---- 10d. h3/h4 mit kleinem Farbbalken als Gliederung (steht
   nie in einer Tabelle, geprueft) ---- */
body[data-seite] h3, body[data-seite] h4 {
  border-left: 4px solid var(--kenn, #1a2c50); padding-left: 8px; }

/* ---- 11. Handy: die grossen Reiter und Kopf-Knoepfe eine Spur
   kompakter, damit unter 480px nichts drueckt. ---- */
@media (max-width: 480px) {
  .mb-navi button { font-size: 15px; padding: 9px 14px; }
  .navleiste a.navknopf { padding: 7px 12px; font-size: 13.5px; }
  .pruefzahl { font-size: 13px; padding: 5px 10px; }
}

/* ---- 12. Ruhe: die Rundungs-Schicht weiter oben gibt Knoepfen
   Uebergaenge; wer Bewegung abgeschaltet hat, bekommt sie hier
   still. Diese Schicht selbst bewegt nichts. ---- */
@media (prefers-reduced-motion: reduce) {
  button, input, select, textarea, .navleiste a.navknopf { transition: none; }
}

}
/* ============================================================
   ENDE WOHLFUEHL-SCHICHT 28.08.
   ============================================================ */

/* ============================================================
   WECKER-SCHICHT 28.08. (Benachrichtigungen und Anrufe)
   Eine reine Design-Schicht: sie kann komplett geloescht werden,
   ohne dass irgendetwas aufhoert zu funktionieren. Dann sehen
   der Anruf-Vollbildschirm, die Einschalt-Frage, der Schalt-
   Kasten und der Meldebalken nur nackt aus.
   Regeln eingehalten: kein !important, keine Bedeutungsfarbe
   umgefaerbt (gruen = annehmen, rot = ablehnen, orange = Warnung
   bleiben genau das), im tbody wird nichts angefasst.
   ============================================================ */

/* ---- 1. Vollbild-Klingeln: der Anruf muss unuebersehbar sein ---- */
#weckerruf {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(10, 16, 30, 0.93);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#weckerruf .wk-karte {
  width: 380px; max-width: 94vw; background: #fff; color: #1a2c50;
  border: 3px solid #1a2c50; border-radius: 14px; padding: 26px 20px 22px 20px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
#weckerruf .wk-oben {
  font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #55627a;
}
#weckerruf .wk-kreis {
  width: 96px; height: 96px; margin: 16px auto 12px auto; border-radius: 50%;
  background: #1a2c50; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: bold;
  animation: wkpuls 1.6s ease-in-out infinite;
}
#weckerruf .wk-name { font-size: 26px; font-weight: bold; word-break: break-word; }
#weckerruf .wk-art { font-size: 14px; color: #55627a; margin-top: 2px; }
#weckerruf .wk-tonhinweis {
  margin-top: 12px; font-size: 13px; color: #7a3d00;
  background: #fff3e0; border: 1px solid #b35a00; border-radius: 7px; padding: 7px 9px;
}
#weckerruf .wk-tasten {
  margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
#weckerruf .wk-tasten button {
  flex: 1 1 130px; font-size: 17px; font-weight: bold; padding: 14px 10px;
  border-radius: 9px; color: #fff;
}
.wk-ja { background: #1a7a1a; border-color: #1a7a1a; color: #fff; }
.wk-ja:hover { background: #146014; border-color: #146014; }
.wk-nein { background: #a00000; border-color: #a00000; color: #fff; }
.wk-nein:hover { background: #7a0000; border-color: #7a0000; }
@keyframes wkpuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 44, 80, 0.5); }
  50% { box-shadow: 0 0 0 16px rgba(26, 44, 80, 0); }
}

/* ---- 2. Die freundliche Frage nach dem Anmelden ---- */
#weckerfrage {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 9500; width: 460px; max-width: 94vw;
}
#weckerfrage .wk-frage-karte {
  background: #fff; border: 2px solid #1a2c50; border-radius: 12px;
  padding: 16px 18px 14px 18px;
  box-shadow: 0 10px 34px rgba(15, 25, 40, 0.28);
}
#weckerfrage .wk-frage-karte.wk-laeuft { opacity: 0.6; }
#weckerfrage .wk-frage-kopf { font-size: 18px; font-weight: bold; color: #1a2c50; }
#weckerfrage .wk-frage-text { margin: 8px 0 6px 0; font-size: 14.5px; }
#weckerfrage .wk-frage-punkte { margin: 6px 0 4px 0; padding-left: 20px; font-size: 14px; }
#weckerfrage .wk-frage-punkte li { margin: 3px 0; }
#weckerfrage .wk-frage-schritte { margin: 6px 0; padding-left: 22px; font-size: 14px; }
#weckerfrage .wk-frage-schritte li { margin: 4px 0; }
#weckerfrage .wk-frage-tasten { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
#weckerfrage .wk-frage-tasten button { font-size: 15px; padding: 10px 16px; border-radius: 8px; }
#weckerfrage .wk-spaeter { background: #f2f5fb; }
#weckerfrage .wk-frage-fuss { margin: 10px 0 0 0; font-size: 12.5px; color: #55627a; }

/* ---- 3. Der Schalt-Kasten (Glocken-Knopf oben, jede Seite) ---- */
#weckerpanel {
  position: fixed; top: 70px; right: 12px; width: 400px; max-width: 94vw;
  max-height: 78vh; overflow-y: auto; background: #fff;
  border: 2px solid #1a2c50; border-radius: 7px;
  padding: 0 12px 12px 12px; z-index: 9400;
}
#weckerpanel .wk-zeile { margin: 10px 0; padding-bottom: 8px; border-bottom: 1px solid #e2e6ee; }
#weckerpanel .wk-zeile:last-child { border-bottom: none; }
#weckerpanel .wk-st-an { color: #1a7a1a; }
#weckerpanel .wk-st-halb, #weckerpanel .wk-st-unklar,
#weckerpanel .wk-st-gesperrt, #weckerpanel .wk-st-ios-install { color: #7a3d00; }
#weckerpanel .wk-geraet {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 5px 7px; margin: 4px 0; border: 1px solid #cdd4e2; border-radius: 6px;
}
#weckerpanel .wk-geraet.wk-dieses { border-color: #1a2c50; background: #eef2fa; }
#weckerpanel .wk-geraet button { font-size: 12px; padding: 4px 9px; }
#weckerpanel .wk-probe { min-height: 1em; }

/* Der Glocken-Knopf zeigt den Zustand, ohne zu luegen:
   gruen nur, wenn Browser UND Datenbank es bestaetigen. */
.navleiste a.navknopf.weckerknopf { font-size: 15px; }
.navleiste a.navknopf.weckerknopf.wk-k-an { border-color: #1a7a1a; }
.navleiste a.navknopf.weckerknopf.wk-k-halb { border-color: #b35a00; }
.navleiste a.navknopf.weckerknopf.wk-k-aus { opacity: 0.75; }

/* ---- 4. Der Meldebalken: was frueher still fehlschlug ---- */
#weckerbalken {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 9600; width: 520px; max-width: 94vw;
  background: #1a2c50; color: #fff; border-radius: 9px;
  padding: 11px 13px; font-size: 14px;
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  box-shadow: 0 8px 26px rgba(15, 25, 40, 0.3);
}
#weckerbalken.wk-warn { background: #7a3d00; }
#weckerbalken.wk-gut { background: #146014; }
#weckerbalken .wk-balken-text { flex: 1 1 auto; }
#weckerbalken .wk-balken-zu {
  flex: 0 0 auto; font-size: 12px; padding: 4px 9px;
  background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.5);
}
#weckerbalken .wk-balken-zu:hover { background: rgba(255, 255, 255, 0.26); }

/* ---- 5. Handy ---- */
@media (max-width: 480px) {
  #weckerruf .wk-karte { padding: 20px 14px 16px 14px; }
  #weckerruf .wk-kreis { width: 78px; height: 78px; font-size: 36px; }
  #weckerruf .wk-name { font-size: 22px; }
  #weckerfrage { left: 6px; right: 6px; bottom: 8px; transform: none; width: auto; max-width: none; }
  #weckerpanel { top: 58px; right: 6px; left: 6px; width: auto; }
  #weckerbalken { left: 6px; right: 6px; transform: none; width: auto; max-width: none; }
}

/* ---- 6. Wer Bewegung abgeschaltet hat, bekommt keine ---- */
@media (prefers-reduced-motion: reduce) {
  #weckerruf .wk-kreis { animation: none; }
}

/* ---- 7. Beim Drucken hat all das nichts verloren ---- */
@media print {
  #weckerruf, #weckerfrage, #weckerpanel, #weckerbalken, #wecker_knopf { display: none; }
}
/* ============================================================
   ENDE WECKER-SCHICHT 28.08.
   ============================================================ */

/* ---------- Ordner scannen (Design-Schicht, loeschbar) ---------- */
.scankasten { margin: 10px 0; padding: 10px 14px; border: 2px solid var(--kenn, #1a2c50);
  border-radius: 9px; background: #fff; }
.scanschritte { margin: 6px 0 6px 20px; padding: 0; }
.scanschritte li { margin: 8px 0; }
.scanschritte code { display: inline-block; padding: 3px 8px; background: #f2f4f8;
  border: 1px solid #ccd; border-radius: 5px; font-size: 13px; }
.scankasten textarea { width: 100%; font-family: monospace; font-size: 12.5px;
  margin-top: 4px; padding: 6px; border: 1px solid #888; border-radius: 5px; }

/* ============================================================
   HANDY-SCHICHT 28.08. ("Alles wird zur Karte")

   Reine Optik. Dieser Block wird ans ENDE von stil.css
   angehaengt. Loescht man ihn wieder, sieht alles aus wie
   vorher und laeuft unveraendert weiter. Kein !important,
   keine geaenderte Bedeutungsfarbe, kein Eingriff in eine
   Rechnung.

   AM RECHNER AENDERT SICH NICHTS.
   Jede einzelne Regel in dieser Schicht steht in
   @media (max-width: 700px). Ein Bildschirm ab 701 Pixel
   Breite sieht diesen Block gar nicht.

   WOFUER DAS HANDY DA IST (Karams Rangfolge):
     1. Schreiben mit Freunden
     2. Berichte und deren Fotos anschauen
     3. einzelne Kombinationen anschauen
     4. NICHT die vollen Tafeln, NICHT setzen, NICHT bauen

   DESHALB:
     - Der Chat wird Vollbild statt Briefmarke.
     - Die Kombinationen werden Karten statt Tabellenzeilen.
     - Fotos werden gross und lassen sich antippen.
     - Die Kopfleiste schrumpft auf EINE Zeile zum Schieben,
       mit den Schreib-Knoepfen ganz vorne.
     - Die grossen Tafeln bekommen einen ehrlichen Hinweis
       und lassen sich seitlich schieben, statt gequetscht
       zu werden.

   BEDEUTUNGSFARBEN: unangetastet. Gruen (bester Wert,
   gewonnen), rot (Interwetten-Abzug, vorbei, verloren,
   Warnung) und braun-orange (duenner Markt, aus Foto,
   offen, fertig) kommen in dieser Schicht als Farbwert
   NICHT EIN EINZIGES MAL vor. Innerhalb von tbody wird
   keine Farbe angefasst; die Kombinationen werden dort nur
   umgestapelt, ihre Zeilenfarben bleiben, wie sie sind.
   Die vier Sonderknoepfe (Glocke gruen, Admin dunkelrot,
   App laden gruen, Update rot blinkend) und der Wecker
   behalten ihre Signalfarbe: hier wird nur ihre GROESSE
   und ihre REIHENFOLGE geaendert.
   ============================================================ */

@media (max-width: 700px) {

/* ---- 1. Grundlage: iPhone-Raender und Daumen-Mass ----
   env(safe-area-inset-*) haelt den Inhalt aus der Rundung und
   aus dem Balken unten heraus, wenn die App vom Homebildschirm
   startet. Ein Browser, der max() oder env() nicht kennt, nimmt
   einfach die 8 Pixel aus der Zeile davor. */
body {
  margin: 8px;
  margin-left: max(8px, env(safe-area-inset-left));
  margin-right: max(8px, env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
}

/* Apple nennt 44 Pixel als kleinstes Tippziel. Das gilt hier fuer
   alles, was man wirklich trifft. Ausgenommen sind nur die
   Winzlinge, die IN einer Tabellenzelle sitzen und die Zeile
   sonst auseinanderreissen wuerden. */
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  min-height: 44px;
}
/* 16 Pixel Schrift ist die Grenze, unter der iOS beim Antippen
   ungefragt hineinzoomt. Darum tippt man hier nie unter 16. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-size: 16px;
}
/* Einzige Ausnahme: der Kopier-Knopf in der Anbieter-Zelle der grossen
   Tafel. Der sitzt zu dritt in einer Tabellenzeile und wuerde die
   ganze Tafel auseinanderreissen. */
td.anbieter button.kopier, .hilf {
  min-height: 0;
}
label.fotoknopf, .medienleiste .fotoknopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px;
}
/* Auch die Knoepfe, die AUSSERHALB der Kopfleiste stehen (zum Beispiel
   der Admin-Knopf in der Konto-Zeile von Mein Bereich). */
a.navknopf {
  display: inline-flex; align-items: center; min-height: 44px;
}
/* Haekchen und Punkte bekommen keine 44 Pixel Hoehe verpasst - dann
   waere das Kaestchen ein Rechteck. Stattdessen wird das Kaestchen
   selbst groesser und die Beschriftung drumherum wird zur Tippflaeche
   (in kombis.html und in der Kassen-Auswahl steckt das Kaestchen
   ohnehin im label). */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
.filterzeile label, .kassewahl label {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
}

/* ---- 2. Die Kopfleiste: aus neun Reihen wird EINE Zeile ----
   Sie bleibt oben kleben, damit der Nachrichten-Knopf immer da
   ist, und laesst sich mit dem Daumen seitlich schieben. Die
   Reihenfolge wird umgestellt: was man am Handy braucht, steht
   vorne. Kein Knopf verschwindet, keiner wird versteckt. */
body[data-seite] > .navleiste {
  position: sticky; top: 0; z-index: 45;
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 5px;
  margin: 0 -8px 8px -8px;
  padding: 5px 8px;
  background-color: color-mix(in srgb, var(--kennhell, #ffffff) 55%, #fff);
}
body[data-seite] > .navleiste::-webkit-scrollbar { display: none; }
/* Das Logo kostet am Handy 44 Pixel Breite und sagt nichts, was
   die Ueberschrift nicht schon sagt. */
body[data-seite] > .navleiste .logo { display: none; }
body[data-seite] > .navleiste a.navknopf {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 6px 13px;
  font-size: 14px;
  white-space: nowrap;
}
/* Reihenfolge am Handy. Alles ohne eigene Nummer landet hinten. */
body[data-seite] > .navleiste a.navknopf { order: 20; }
body[data-seite] > .navleiste a.navknopf.updateknopf  { order: 1; }
body[data-seite] > .navleiste a.navknopf#nav_nachrichten { order: 2; }
body[data-seite] > .navleiste a.navknopf#nav_freunde     { order: 3; }
body[data-seite] > .navleiste a.navknopf.weckerknopf     { order: 4; }
body[data-seite] > .navleiste a.navknopf[href="mein.html"]:not(.glocke) { order: 5; }
body[data-seite] > .navleiste a.navknopf.installknopf { order: 6; }
body[data-seite] > .navleiste a.navknopf.adminknopf   { order: 7; }
/* Der Nachrichten-Knopf ist der wichtigste der Seite: er wird
   breiter und traegt seine Zahl gut sichtbar. */
body[data-seite] > .navleiste a.navknopf#nav_nachrichten { font-size: 19px; padding: 6px 15px; }
body[data-seite] > .navleiste a.navknopf#nav_nachrichten .badge {
  font-size: 12px; min-width: 20px; padding: 1px 6px;
}
/* "margin-left:auto" schob den Nachrichten-Knopf am Rechner ganz
   nach rechts. In einer Schiebe-Zeile wuerde das eine Luecke von
   mehreren hundert Pixeln aufreissen. */
.navleiste a.glocke { margin-left: 0; }

/* Die zweite Leiste in Mein Bereich (die Bereiche der Freunde)
   wird genauso zu einer Schiebe-Zeile - aber ohne zu kleben,
   sonst haetten wir zwei Balken uebereinander. */
#bereichtabs.navleiste {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; gap: 5px;
}
#bereichtabs.navleiste::-webkit-scrollbar { display: none; }
#bereichtabs a.navknopf {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 13px; font-size: 14px; white-space: nowrap;
}
/* Die Reiter von Mein Bereich kleben am Rechner oben. Am Handy
   waere das der zweite Balken; hier laufen sie einfach mit. */
.mb-navi { position: static; }
.mb-navi button { font-size: 14px; padding: 9px 13px; min-height: 44px; }

/* ---- 3. Der Kopf der Seite: kleiner, damit unten mehr bleibt ---- */
h1 { font-size: 21px; padding-bottom: 3px; margin-bottom: 4px; }
body[data-seite] > h1::before {
  font-size: 11px; padding: 2px 8px 2px 6px; margin: 0 7px 0 0;
  letter-spacing: 0.04em;
}
.unter { font-size: 13.5px; margin-bottom: 6px; }

/* ============================================================
   4. SCHREIBEN: der Chat wird Vollbild.
   Das ist der Hauptzweck am Handy. Aus dem schwebenden
   Kaestchen oben rechts wird eine richtige Messenger-Ansicht
   ueber den ganzen Schirm: Kopf oben, Verlauf in der Mitte,
   Eingabe unten.
   100dvh statt 100vh: auf dem iPhone rechnet 100vh die
   Adressleiste NICHT mit, dann steht das Eingabefeld unter
   dem Bildschirmrand. Die 100vh-Zeile davor ist nur der
   Ersatz fuer alte Browser, die dvh nicht kennen.
   ============================================================ */
#glockenpanel, #freundepanel {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto; max-width: none;
  height: 100vh; height: 100dvh;
  max-height: none;
  margin: 0; padding: 0;
  border: none; border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex; flex-direction: column;
  z-index: 1000;
}
#glockenpanel .gp-kopf, #freundepanel .gp-kopf {
  flex: 0 0 auto;
  border-radius: 0;
  font-size: 17px;
  padding: 12px 12px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
#glockenpanel .gp-zu, #freundepanel .gp-zu {
  min-height: 44px; padding: 8px 14px; font-size: 14px;
}
/* Der Inhalt fuellt den Rest und ist selbst wieder eine Spalte:
   nur die Nachrichtenliste darin waechst mit. min-height:0 ist
   noetig, sonst weigert sich ein Flex-Kasten zu schrumpfen und
   die Eingabe rutscht unten hinaus. */
#gp-inhalt, #fp-inhalt {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#gp-inhalt > *, #fp-inhalt > * { flex: 0 0 auto; }
#gp-inhalt > .gp-zurueck { align-self: flex-start; min-height: 44px; padding: 8px 16px; font-size: 15px; }
#gp-liste, .gp-liste, #glockenpanel .chatliste {
  flex: 1 1 auto; min-height: 120px; max-height: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
/* Die Freundes-Knoepfe in der Nachrichtenliste sind jetzt
   richtige Zeilen zum Antippen. */
.gp-freund { min-height: 52px; font-size: 16px; padding: 10px 12px; margin: 5px 0; }

/* Sprechblasen statt Zeilen. Die Farben bleiben: eigene gruen,
   fremde in der Kennfarbe der Seite - nur die Form aendert sich. */
.chatzeile { font-size: 15px; padding: 8px 11px; margin: 7px 0; border-radius: 10px; }
.chatzeile.vonmir { margin-left: 14%; }
.chatzeile:not(.vonmir) { margin-right: 14%; }

/* Die Eingabezeile klebt unten am Rand des Vollbilds. */
#glockenpanel .chateingabe, #glockenpanel .medienleiste { flex: 0 0 auto; }
.chateingabe { gap: 7px; margin-top: 7px; }
.chateingabe input { font-size: 16px; min-height: 46px; padding: 8px 11px; }
.chateingabe button { min-height: 46px; padding: 8px 16px; font-size: 15px; }
.medienleiste { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.medienleiste button, .medienleiste .fotoknopf { margin-right: 0; font-size: 14px; }
/* Im Vollbild-Chat stehen Datei, Sprachnachricht, Video und die zwei
   Anruf-Knoepfe in EINER Zeile zum Schieben. Umgebrochen waeren das
   auf einem kleinen iPhone drei Zeilen, die dem Gespraech selbst
   ueber 90 Pixel wegnehmen. */
#glockenpanel .medienleiste {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
#glockenpanel .medienleiste::-webkit-scrollbar { display: none; }
#glockenpanel .medienleiste > * { flex: 0 0 auto; white-space: nowrap; }

/* Der Anruf gehoert am Handy unten hin, in voller Breite. */
#anrufpanel {
  left: 6px; right: 6px; bottom: 6px; width: auto; max-width: none;
  bottom: calc(6px + env(safe-area-inset-bottom));
  /* MUSS ueber dem Vollbild-Chat liegen (der hat 1000). Aus stil.css
     kaeme nur 80 - dann waere waehrend eines Gespraechs der Knopf
     "Auflegen" hinter dem Chat verschwunden. */
  z-index: 1100;
}
#anrufpanel button { min-height: 44px; }
/* Der Schalt-Kasten der Benachrichtigungen zieht mit (die
   Wecker-Schicht macht das ab 480 Pixel, hier ab 700). */
#weckerpanel { top: 62px; right: 6px; left: 6px; width: auto; }
/* Beide gehoeren am Handy nach OBEN. Unten liegt im Vollbild-Chat das
   Schreibfeld, und ihr z-index (9600 und 9500) ist hoeher als der des
   Chats - sie wuerden das Tippen unmoeglich machen. Das gilt ohne jedes
   JavaScript, also auch wenn handy.js gar nicht laeuft. */
#weckerbalken {
  left: 6px; right: 6px; transform: none; width: auto; max-width: none;
  top: calc(8px + env(safe-area-inset-top)); bottom: auto;
}
#weckerfrage {
  left: 6px; right: 6px; transform: none; width: auto; max-width: none;
  top: calc(8px + env(safe-area-inset-top)); bottom: auto;
}

/* ============================================================
   5. NACHSCHAUEN: aus jeder Kombination wird eine Karte.
   Nur die Kombinations-Liste in Mein Bereich (#scheine_db)
   wird umgebaut - genau das, was Karam am Handy anschaut.
   Die Tabelle bleibt eine Tabelle im HTML, sie wird nur
   anders gestapelt. Keine einzige Farbe aendert sich dabei:
   das Zebra-Grau, das Orange der fertigen Zeilen und das
   Gelb der Zeilen ohne Person bleiben genau, wie sie sind.
   ============================================================ */
#scheine_db table, #scheine_db thead, #scheine_db tbody,
#scheine_db tr, #scheine_db td { display: block; width: auto; }
#scheine_db thead { display: none; }
#scheine_db table { border-collapse: separate; border-spacing: 0; }
#scheine_db tr {
  border: 1px solid #999; border-radius: 11px;
  margin: 0 0 12px 0; padding: 2px 0; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 25, 40, 0.08), 0 3px 12px rgba(15, 25, 40, 0.07);
}
#scheine_db td {
  border: none; border-top: 1px solid rgba(0, 0, 0, 0.09);
  padding: 8px 12px; font-size: 14.5px;
}
#scheine_db tr > td:first-child { border-top: none; }
/* Die Spaltenueberschrift steht jetzt VOR dem Wert in der Zeile.
   Die Reihenfolge ist die aus zeichneScheineDb in mein.js:
   Wann, Anbieter, Person, Wetten, Quote, Einsatz, Moeglich,
   Wirklich bekommen, Stand, Notiz, Knoepfe. */
#scheine_db tbody td::before {
  display: block;
  font-size: 10.5px; font-weight: bold; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.6;
  margin-bottom: 2px;
}
#scheine_db tbody td:nth-child(1)::before { content: "Wann"; }
#scheine_db tbody td:nth-child(2)::before { content: "Anbieter"; }
#scheine_db tbody td:nth-child(3)::before { content: "Person"; }
#scheine_db tbody td:nth-child(4)::before { content: "Wetten und Foto"; }
#scheine_db tbody td:nth-child(5)::before { content: "Quote"; }
#scheine_db tbody td:nth-child(6)::before { content: "Einsatz"; }
#scheine_db tbody td:nth-child(7)::before { content: "Moeglich"; }
#scheine_db tbody td:nth-child(8)::before { content: "Wirklich bekommen"; }
#scheine_db tbody td:nth-child(9)::before { content: "Stand"; }
#scheine_db tbody td:nth-child(10)::before { content: "Notiz"; }
/* Die letzte Zelle sind nur Knoepfe, die brauchen keine Aufschrift. */
#scheine_db tbody td:nth-child(11)::before { content: none; }
#scheine_db tbody td:nth-child(11) { display: flex; flex-wrap: wrap; gap: 8px; }
/* Kurze Angaben stehen zu zweit nebeneinander statt jede auf einer
   eigenen Zeile. Sonst waere eine einzige Kombination laenger als
   zwei Bildschirme. Betroffen sind: Wann und Anbieter (1 und 2)
   sowie Quote, Einsatz, Moeglich und Wirklich bekommen (5 bis 8). */
#scheine_db tbody td:nth-child(1), #scheine_db tbody td:nth-child(2),
#scheine_db tbody td:nth-child(5), #scheine_db tbody td:nth-child(6),
#scheine_db tbody td:nth-child(7), #scheine_db tbody td:nth-child(8) {
  display: inline-block; width: 50%; vertical-align: top;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}
#scheine_db tbody td:nth-child(2) { border-left: 1px solid rgba(0, 0, 0, 0.09); }
#scheine_db tbody td:nth-child(6), #scheine_db tbody td:nth-child(8) {
  border-left: 1px solid rgba(0, 0, 0, 0.09);
}
/* Muss NACH der Zeile davor stehen: die oberste Zelle der Karte
   bekommt sonst wieder einen Strich direkt unter die Rundung. */
#scheine_db tbody tr > td:nth-child(1) { border-top: none; }
/* Die Wetten sind der Kern der Karte: gross und mit Luft. */
#scheine_db tbody td:nth-child(4) { font-size: 15.5px; line-height: 1.5; }
#scheine_db tbody td:nth-child(4) .mini { font-size: 15.5px; }
#scheine_db td select, #scheine_db td textarea { width: 100%; }
#scheine_db td.notizzelle { min-width: 0; }
#scheine_db textarea.notizfeld { min-height: 66px; font-size: 16px; }

/* ---- 6. Fotos: gross und antippbar ----
   Ein Bericht ohne sein Foto ist am Handy die Haelfte wert.
   Die Handy-Schicht (handy.js) oeffnet jedes dieser Bilder auf
   Antippen formatfuellend; hier steht nur, wie gross sie in der
   Karte selbst sind. */
img.minifoto, .s-foto img, .medienbild, .fotokachel img, .pd-vorschau {
  max-width: 100%; width: 100%; height: auto; display: block;
  margin-top: 6px; border-radius: 8px;
}
.medienvideo, #gp-vorschau video { max-width: 100%; width: 100%; }
.fotokachel { max-width: 100%; }
.fotogitter { display: block; }
.fotoname { font-size: 14px; }
/* Der Hinweis, dass da mehr kommt, wenn man tippt. */
img.minifoto, .s-foto img, .medienbild { cursor: zoom-in; }

/* ---- 7. Das Vollbild fuer ein Foto (gehoert zu handy.js) ---- */
#handyfoto {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 11000; background: rgba(10, 16, 30, 0.94);
  display: flex; flex-direction: column;
}
#handyfoto .hf-kopf {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  color: #fff; background: #16233d; font-size: 14px;
}
#handyfoto .hf-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#handyfoto .hf-zu {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; font-size: 14px;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px;
}
#handyfoto .hf-flaeche {
  flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom; display: flex; align-items: center; justify-content: center;
  padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
#handyfoto .hf-flaeche img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 6px; cursor: zoom-in;
}
#handyfoto.hf-gross .hf-flaeche { display: block; }
#handyfoto.hf-gross .hf-flaeche img {
  max-width: none; max-height: none; width: 250%; cursor: zoom-out;
}
#handyfoto .hf-fuss {
  flex: 0 0 auto; color: #b9c6de; font-size: 12px; text-align: center;
  padding: 0 12px 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* ============================================================
   8. DIE GROSSEN TAFELN: ehrlich statt gequetscht.
   Zwoelf Spalten auf 375 Pixel sind nicht lesbar, sondern nur
   schmal. Deshalb bekommen die zwei grossen Tabellen am Handy
   ihre echte Breite zurueck und lassen sich seitlich schieben -
   und darueber steht, wo die volle Tafel wirklich hingehoert.
   Die Seite selbst laeuft dabei NICHT ueber: geschoben wird
   nur innerhalb des Kastens.
   ============================================================ */
/* Ohne neues div im HTML: die Tabelle selbst wird zum Schiebe-Kasten.
   So bleibt die Schicht wirklich loeschbar - nimmt man den Block hier
   weg, ist an den Seiten nichts zurueckgeblieben. */
body[data-seite="tafel"] > table,
body[data-seite="original"] > table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 9px;
}
body[data-seite="tafel"] > table { min-width: 0; }
body[data-seite="original"] > table { min-width: 0; }
body[data-seite="tafel"] #zaehler::before,
body[data-seite="original"] #rohzaehler::before {
  content: "Am Handy zum Nachschauen. Die volle Tafel zum Arbeiten steht am Rechner. Zum Lesen die Tabelle seitlich schieben.";
  display: block;
  margin: 6px 0; padding: 8px 11px;
  border-left: 4px solid var(--kenn, #1a2c50);
  background-color: var(--kennhell, #eef1f7);
  color: var(--kenn, #1a2c50);
  border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.45; font-weight: normal;
}

/* ---- 9. Der Rest der Bedienung: weniger Gedraenge ---- */
.filterzeile { flex-wrap: wrap; gap: 5px; }
.filterzeile .f-label { flex: 1 1 100%; padding-top: 0; }
.filterzeile button { min-height: 44px; font-size: 14px; padding: 6px 12px; min-width: 0; }
.auth { gap: 10px; }
.auth-kasten { min-width: 0; flex: 1 1 100%; padding: 12px; }
.auth-kasten input { max-width: none; }
.buch-eingabe input, .buch-eingabe select { flex: 1 1 140px; }
.persondaten-felder .pd-feld { max-width: none; }
.ordnerknoepfe .ordnerknopf { min-height: 44px; display: inline-flex; align-items: center; }
.anmk-neu input { width: 100%; }
.anmk-neu { display: flex; gap: 7px; margin-top: 7px; }
.anmk-zeile { padding: 8px 10px; }
.anmk-tasten { margin-left: 0; display: inline-flex; gap: 7px; }
.anmk-tasten button { margin-left: 0; font-size: 13px; padding: 6px 11px; }
details.anmk summary { min-height: 44px; display: block; padding: 11px 0; }
/* Breite Kaesten mit Tabellen drin duerfen schieben statt quetschen. */
.tabellenrand, .scrollbox { -webkit-overflow-scrolling: touch; }

}
/* ============================================================
   ENDE HANDY-SCHICHT 28.08.
   ============================================================ */


/* ============================================================
   NACHTRAG (aus dem zweiten Entwurf uebernommen)
   ============================================================ */
@media (max-width: 700px) {
  /* Die Fragezeichen in den Tabellenkoepfen: rund und gross genug
     zum Treffen, ohne den Kopf zu sprengen. */
  .hilf { width: 26px; height: 26px; line-height: 24px; font-size: 12px; }

  /* Die uebrigen breiten Tabellen in Mein Bereich schieben in ihrem
     eigenen Kasten, statt die ganze Seite quer laufen zu lassen.
     #scheine_db steht bewusst NICHT dabei - das ist die Karte. */
  #konto_db, #buchhaltung, #ordnerbilanz, #pruefbericht,
  #personenkasse, #verlauf { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Beschriftungen in den Filterzeilen duerfen umbrechen, sonst ragt
     der Kombi-Bau seitlich hinaus. */
  .filterzeile label { white-space: normal; }
}

/* ---------- Der Scan-Auftrag als Block (Design-Schicht, loeschbar) ---------- */
.scanauftrag {
  margin: 6px 0 0 0; padding: 10px 12px; background: #f2f4f8;
  border: 1px solid #ccd; border-radius: 7px;
  font-family: monospace; font-size: 12px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}
@media (max-width: 700px) {
  .scanauftrag { font-size: 11.5px; max-height: 200px; }
}

/* ---------- Die Schalter im Klingel-Kasten (loeschbar) ---------- */
.wk-schalter {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 4px; margin: 2px 0; font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); cursor: pointer;
}
.wk-schalter:last-of-type { border-bottom: 0; }
.wk-schalter input { width: 20px; height: 20px; flex: 0 0 auto; }
@media (max-width: 700px) {
  .wk-schalter { padding: 13px 4px; font-size: 15px; }
  .wk-schalter input { width: 24px; height: 24px; }
}

/* ---------- Selbst-Diagnose im Klingel-Kasten (loeschbar) ---------- */
.wk-diag { padding: 8px 10px; margin: 6px 0; border-radius: 7px;
  border-left: 4px solid #bbb; background: #fafbfd; }
.wk-diag-gut { border-left-color: #2fa84f; }
.wk-diag-schlecht { border-left-color: #d08000; background: #fffaf0; }
.wk-diag b { display: block; margin-bottom: 2px; }
@media (max-width: 700px) {
  .wk-diag { padding: 10px 12px; font-size: 14px; }
}

/* ---------- "Leg mich auf den Home-Bildschirm" (loeschbar) ---------- */
#ablegenstreifen {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  margin: 10px 0 14px 0; padding: 12px 40px 12px 12px;
  border: 2px solid #1a2c50; border-left-width: 6px; border-radius: 10px;
  background: #f4f7fc; color: #142136; font-size: 14px; line-height: 1.5;
}
#ablegenstreifen .ab-logo {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 11px;
  box-shadow: 0 2px 6px rgba(15, 25, 40, 0.22);
}
#ablegenstreifen .ab-text { flex: 1 1 auto; min-width: 0; }
#ablegenstreifen .ab-schritte { display: flex; flex-direction: column; gap: 5px; margin: 7px 0; }
#ablegenstreifen .ab-schritte span { display: block; }
#ablegenstreifen .ab-warn {
  margin-top: 8px; padding: 8px 10px; border-radius: 7px;
  background: #fff4e0; border-left: 4px solid #b35a00; font-size: 13.5px;
}
#ablegenstreifen .ab-warum { margin-top: 7px; font-size: 12.5px; color: #445; }
#ablegenstreifen .ab-zu {
  position: absolute; top: 6px; right: 6px;
  width: 34px; height: 34px; min-height: 34px; padding: 0;
  border: 1px solid #aab; border-radius: 8px; background: #fff;
  font-size: 15px; line-height: 1; color: #445;
}
@media (max-width: 700px) {
  #ablegenstreifen { font-size: 15px; padding: 13px 46px 13px 13px; }
  #ablegenstreifen .ab-logo { width: 58px; height: 58px; }
  #ablegenstreifen .ab-zu { width: 40px; height: 40px; min-height: 40px; }
}

/* ---------- Kontrast am Handy (loeschbar, NUR am Handy) ---------- */
@media (max-width: 700px) {
  /* Nach WCAG auf einem 390er Schirm gemessen. Nur die Zahl im aktiven
     Filter-Knopf wird ausgebessert: sie steht AUSSERHALB der Tabelle.
     Der Selektor muss so genau sein wie der aus Zeile 141, sonst verliert
     er - deshalb dieselbe Kette. */
  .filterzeile button.aktiv .f-zahl { color: #fff; }
}

/* BEWUSST NICHT AUSGEBESSERT, und das ist eine Entscheidung, keine
   Vergesslichkeit: .leer (grauer Platzhalter), .abzug (Gebuehren-Hinweis)
   und .duenn (brauner "duenner Markt") liegen alle INNERHALB des
   Tabellenkoerpers. Dort wird laut Hausregel keine Farbe angefasst -
   .duenn ist sogar eine Bedeutungsfarbe. Sie liegen mit 3,5 bis 4,5 knapp
   unter der Empfehlung, und zwar auf der Kombi-Tafel, die am Handy
   ausdruecklich nicht zum Arbeiten gedacht ist. Wer das aendern will,
   aendert die Grundfarben oben - nicht hier unten mit Ausnahmen. */

/* ============================================================
   PROFIL (Design-Schicht, loeschbar).
   Die Farben hier sind AUSSCHLIESSLICH Wunschfarben fuer
   Anzeigenamen - sie haben nichts mit den Bedeutungsfarben zu
   tun und stehen deshalb nie in einer Tabelle: dort traegt der
   Name die Klasse pf-schlicht und bleibt schwarz.
   ============================================================ */
.profilname { font-weight: 600; }
.profilname.pf-schlicht,
tbody .profilname,
button .profilname,
a .profilname { color: inherit; font-family: inherit; font-weight: inherit; }

/* Wunschfarben. Alle gegen Weiss auf mindestens 4,5:1 geprueft. */
.profilname.pf-c-blau { color: #17457e; }
.profilname.pf-c-gruen { color: #14663a; }
.profilname.pf-c-rot { color: #a4111f; }
.profilname.pf-c-lila { color: #6a2a86; }
.profilname.pf-c-orange { color: #8a4a00; }
.profilname.pf-c-tuerkis { color: #0d5f66; }
.profilname.pf-c-schwarz { color: #1a1a1a; }
.profilname.pf-c-pink { color: #99205e; }

/* Zierschriften. Nur was auf den Geraeten schon da ist - es wird
   nichts nachgeladen. Fehlt eine, nimmt der Browser die Normalschrift. */
.profilname.pf-f-system { font-family: inherit; }
.profilname.pf-f-rund { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
.profilname.pf-f-schreib { font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive; }
.profilname.pf-f-fett { font-family: "Arial Black", "Helvetica Neue", Impact, sans-serif; font-weight: 900; }
.profilname.pf-f-schmal { font-family: "Arial Narrow", "Avenir Next Condensed", sans-serif; }
.profilname.pf-f-breit { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.4px; }

/* Das runde Bild */
.pf-bild {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: #dde4f0; color: #26426f;
  font-weight: 700; font-size: 17px; text-transform: uppercase;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.pf-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Der Knopf oben: mit Bild wird das Bild zum Knopf */
.navknopf.profilknopf.pf-hatbild { padding: 3px 8px; }
.pf-navbild {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  display: block; border: 2px solid currentColor;
}

/* Die Visitenkarte */
.pf-karte {
  background: #fff; border-radius: 14px; padding: 22px 20px; text-align: center;
  max-width: 340px; width: calc(100% - 32px);
  box-shadow: 0 10px 40px rgba(10, 18, 32, 0.4);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.pf-kartenname { font-size: 21px; }
.pf-kartenuser { color: #667; }
.pf-kartenbio {
  font-size: 14px; line-height: 1.5; color: #243; text-align: left;
  background: #f5f7fb; border-radius: 9px; padding: 9px 11px; width: 100%;
  white-space: pre-wrap; word-break: break-word;
}
.pf-karte button { min-height: 44px; width: 100%; }

/* Der Bearbeiten-Block */
.profilkasten { padding: 2px 0; }
.pf-hinweis {
  background: #fff4e0; border-left: 4px solid #b35a00; border-radius: 8px;
  padding: 9px 12px; margin: 8px 0 12px 0; font-size: 13.5px;
}
.pf-vorschau {
  border: 2px dashed #bcc6d8; border-radius: 10px; padding: 12px;
  margin-bottom: 14px; background: #fafbfe;
}
.pf-vorschauzeile { display: flex; align-items: center; gap: 12px; }
.pf-vorschauzeile .pf-bild { width: 54px; height: 54px; font-size: 22px; }
.pf-vorschaubio { margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.pf-feld { display: block; margin: 12px 0; }
.pf-feld > b { display: block; margin-bottom: 3px; }
.pf-feld input, .pf-feld textarea {
  width: 100%; font-size: 16px; padding: 9px 10px; margin-top: 4px;
  border: 1px solid #8a94a8; border-radius: 8px;
}
.pf-feld textarea { min-height: 76px; font-family: inherit; }
.pf-wahlreihe { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.pf-wahl {
  min-width: 52px; min-height: 44px; padding: 6px 12px;
  border: 2px solid #c3cad8; border-radius: 9px; background: #fff;
  font-size: 15px; font-weight: 600;
}
.pf-wahl.aktiv { border-color: #1a2c50; box-shadow: 0 0 0 3px rgba(26, 44, 80, 0.16); }
.pf-fotoreihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 5px; }

@media (max-width: 700px) {
  .pf-karte { padding: 20px 16px; }
  .pf-kartenname { font-size: 20px; }
  .pf-wahl { min-height: 48px; font-size: 16px; }
  .pf-feld input, .pf-feld textarea { font-size: 16px; padding: 11px 12px; }
  .pf-vorschauzeile .pf-bild { width: 62px; height: 62px; font-size: 25px; }
  .pf-navbild { width: 32px; height: 32px; }
}

/* ============================================================
   MESSENGER IN ZWEI SPALTEN (Design-Schicht, loeschbar).
   Am Rechner: links die Gespraeche, rechts das offene.
   Am Handy: immer nur eines von beiden, mit Zurueck-Pfeil.
   ============================================================ */
.gp-zwei { display: flex; align-items: stretch; min-height: 0; flex: 1 1 auto; }
.gp-spalte {
  flex: 0 0 232px; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.14); overflow-y: auto;
}
.gp-spaltekopf { padding: 7px 10px 4px 10px; font-weight: bold; color: #445; }
.gp-gespraech { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.gp-leer { padding: 22px 16px; color: #667; text-align: center; }

.gp-freund {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 8px 10px; text-align: left;
  border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent; border-radius: 0; font-size: 14.5px;
}
.gp-freund.offen { background: rgba(26, 44, 80, 0.09); }
.gp-freundname { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gp-freundname > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-freunduser { color: #778; }

.gp-gkopf {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14); flex: 0 0 auto;
}
.gp-kopfname { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.gp-zurueck { display: none; min-width: 44px; min-height: 44px; font-size: 19px; }
.gp-ruf { min-width: 44px; min-height: 44px; font-size: 17px; }
.gp-e2e { padding: 3px 10px; color: #667; flex: 0 0 auto; }
.gp-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* "schreibt gerade ..." */
/* Ganz weg statt nur flach: eine Hoehe von 0 wurde in der Flex-Spalte
   nicht durchgesetzt und liess einen leeren Streifen stehen. */
.gp-tippt { display: none; }
.gp-tippt.da {
  display: block; flex: 0 0 auto; padding: 1px 12px 3px 12px;
  font-size: 12.5px; color: #556; font-style: italic;
}

/* Die Schreibzeile: Ikonen klein, Textfeld gross */
.chateingabe { display: flex; align-items: center; gap: 6px; padding: 7px; flex: 0 0 auto; }
.chateingabe #gp-text { flex: 1 1 auto; min-width: 0; font-size: 16px; min-height: 44px; }
.gp-ikon {
  min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto;
  font-size: 18px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.gp-senden { min-width: 52px; min-height: 44px; font-size: 19px; padding: 0; flex: 0 0 auto; }

@media (max-width: 700px) {
  /* Am Handy ist immer nur EINE Spalte zu sehen. */
  .gp-spalte { flex: 1 1 auto; border-right: 0; }
  .gp-zeigt-liste .gp-gespraech { display: none; }
  .gp-zeigt-gespraech .gp-spalte { display: none; }
  .gp-zurueck { display: inline-flex; align-items: center; justify-content: center; }
  .gp-freund { min-height: 62px; font-size: 15.5px; }
  .gp-kopfname { font-size: 17px; }
  .gp-ikon { min-width: 46px; min-height: 46px; font-size: 19px; }
  .gp-senden { min-width: 56px; min-height: 46px; }
  .chateingabe #gp-text { min-height: 46px; }
}

/* ---------- Anhaenge im Chat: Kombination und Person (loeschbar) ---------- */
.ah-karte {
  display: block; margin: 4px 0 2px 0; padding: 9px 11px;
  border: 1px solid rgba(0, 0, 0, 0.18); border-left: 4px solid #1a2c50;
  border-radius: 9px; background: #f7f9fd; font-size: 13.5px; line-height: 1.45;
  max-width: 100%; word-break: break-word;
}
.ah-karte.ah-person { border-left-color: #6a2a86; }
.ah-kopf { font-weight: 700; margin-bottom: 3px; }
.ah-name { font-size: 16px; font-weight: 600; }
.ah-zeile1 { color: #334; margin-bottom: 4px; }
.ah-wetten { margin: 4px 0 5px 16px; padding: 0; }
.ah-wetten li { margin: 1px 0; }
.ah-zahlen { font-weight: 600; }
.ah-fuss { color: #778; margin-top: 4px; }

/* Der Auswahl-Kasten */
.ah-waehlkasten {
  background: #fff; border-radius: 13px; padding: 14px;
  width: calc(100% - 32px); max-width: 460px; max-height: 78vh;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 10px 40px rgba(10, 18, 32, 0.4);
}
.ah-waehlkopf { font-weight: 700; font-size: 16px; }
.ah-waehlliste { overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.ah-waehlzeile {
  display: block; width: 100%; text-align: left; min-height: 48px;
  padding: 8px 11px; border: 1px solid #c3cad8; border-radius: 9px; background: #fff;
}
.ah-waehlkasten > button:last-child { min-height: 46px; }

@media (max-width: 700px) {
  .ah-karte { font-size: 14px; }
  .ah-waehlzeile { min-height: 54px; font-size: 15px; }
}


/* ============================================================
   BUCHHALTUNG ALS BERICHT: "Das Armaturenbrett"
   (Design-Schicht, komplett loeschbar)

   Nimmt man diesen ganzen Block hier heraus, bleibt der Bericht
   vollstaendig lesbar und weiter bedienbar, nur eben nuechtern.
   Nichts hier drin rechnet, nichts aendert Reihenfolgen.

   BEDEUTUNGSFARBEN, unveraendert:
     gruen        = Plus, gewonnen
     rot          = Minus, Warnung
     braun-orange = offen, wartet noch
   Die Farbe hoert oberhalb der Tabellen auf: INNERHALB von tbody
   wird hier keine einzige Farbe angefasst.
   Alle Regeln haengen an #buchhaltung oder an .bb-... und koennen
   den Rest der Website deshalb nicht erreichen.
   ============================================================ */

/* ---- Das Urteil in einem Satz: die eine Zahl, die zaehlt ---- */
#buchhaltung .bb-urteil {
  margin: 8px 0 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #ccd3e0;
  border-left: 7px solid #6b7a90;
  background: #f7f9fc;
}
#buchhaltung .bb-urteilzahl {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
  color: #22314c;
}
#buchhaltung .bb-urteiltext {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #33415c;
  max-width: 62ch;
}

/* gruen = Plus */
#buchhaltung .bb-urteil.bb-plus { border-left-color: #1a7a1a; background: #f1f8f1; }
#buchhaltung .bb-urteil.bb-plus .bb-urteilzahl { color: #146014; }
/* rot = Minus */
#buchhaltung .bb-urteil.bb-minus { border-left-color: #a2231b; background: #fdf2f1; }
#buchhaltung .bb-urteil.bb-minus .bb-urteilzahl { color: #8f1f18; }
/* braun-orange = noch offen */
#buchhaltung .bb-urteil.bb-offen { border-left-color: #b35a00; background: #fff8ef; }
#buchhaltung .bb-urteil.bb-offen .bb-urteilzahl { color: #8a4600; font-size: 26px; }

/* ---- "Das klemmt gerade": rot, weil es eine Warnung ist ---- */
#buchhaltung .bb-abschnitt {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #5a6478;
  margin-bottom: 6px;
}
#buchhaltung .bb-klemmt {
  margin: 0 0 12px 0;
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 5px solid #a2231b;
  background: #fdf2f1;
}
#buchhaltung .bb-klemmt ul { margin: 0; padding-left: 20px; }
#buchhaltung .bb-klemmt li { margin: 4px 0; font-size: 14px; line-height: 1.5; color: #4a2a27; }

/* ---- Die Kacheln: was rein geht, was raus geht, was im Spiel ist ---- */
#buchhaltung .bb-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  margin: 0 0 12px 0;
}
#buchhaltung .bb-kachel {
  padding: 11px 12px;
  border: 1px solid #d3d9e4;
  border-top: 4px solid #97a2b5;
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}
#buchhaltung .bb-kacheltitel {
  font-size: 12.5px;
  font-weight: 600;
  color: #5a6478;
  line-height: 1.3;
}
#buchhaltung .bb-kachelwert {
  font-size: 19px;
  font-weight: 700;
  color: #22314c;
  line-height: 1.25;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
#buchhaltung .bb-kachelunter {
  font-size: 11.5px;
  color: #6d7789;
  line-height: 1.35;
  margin-top: 3px;
  min-height: 1em;
}
/* braun-orange: das Geld, das noch unterwegs ist */
#buchhaltung .bb-kachel.bb-warten { border-top-color: #b35a00; background: #fffaf3; }
#buchhaltung .bb-kachel.bb-warten .bb-kachelwert { color: #8a4600; }

/* ---- Bei wem liegt das offene Geld ---- */
#buchhaltung .bb-wem { margin: 0 0 12px 0; }
#buchhaltung .bb-wemliste { list-style: none; margin: 0; padding: 0; }
#buchhaltung .bb-wemliste li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid #e0e5ee;
  border-radius: 9px;
  background: #fff;
  margin-bottom: 5px;
}
#buchhaltung .bb-wemname { flex: 1 1 120px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
#buchhaltung .bb-wemzahl { flex: 0 0 auto; font-weight: 700; color: #8a4600; overflow-wrap: anywhere; }
#buchhaltung .bb-wemmini { flex: 0 0 auto; font-size: 12px; color: #6d7789; }

/* ---- Der Rechenweg zum Mitrechnen ---- */
#buchhaltung .bb-rechnung {
  border: 1px solid #d3d9e4;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  max-width: 520px;
}
#buchhaltung .bb-rz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid #eceff5;
  font-size: 14.5px;
}
#buchhaltung .bb-rz:last-child { border-bottom: 0; }
#buchhaltung .bb-rzname { flex: 1 1 auto; min-width: 0; color: #3c4761; }
#buchhaltung .bb-rzwert {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #22314c;
  overflow-wrap: anywhere;
  text-align: right;
}
#buchhaltung .bb-rzende { border-top: 2px solid #c9d1e0; background: #f7f9fc; font-size: 16px; }
#buchhaltung .bb-rzende .bb-rzname { font-weight: 700; }
#buchhaltung .bb-rzende .bb-rzwert { font-weight: 800; }
#buchhaltung .bb-rzende.bb-plus  { background: #f1f8f1; }
#buchhaltung .bb-rzende.bb-plus  .bb-rzwert { color: #146014; }
#buchhaltung .bb-rzende.bb-minus { background: #fdf2f1; }
#buchhaltung .bb-rzende.bb-minus .bb-rzwert { color: #8f1f18; }
#buchhaltung .bb-rzende.bb-offen { background: #fff8ef; }
#buchhaltung .bb-rzende.bb-offen .bb-rzwert { color: #8a4600; }

/* ---- Die Einzelheiten darunter: dicht, aber greifbar ---- */
#buchhaltung details.bb-teil {
  margin: 10px 0;
  border: 1px solid #dde2ec;
  border-radius: 10px;
  background: #fdfdfe;
  padding: 0 12px 10px 12px;
}
#buchhaltung details.bb-teil > summary {
  padding: 11px 0;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  font-weight: 700;
  font-size: 15px;
  color: #22314c;
  cursor: pointer;
  list-style-position: inside;
}
#buchhaltung details.bb-teil[open] > summary { border-bottom: 1px solid #eceff5; margin-bottom: 8px; }

/* Der Ansichts-Filter von Liste 1: aendert nur, WAS gezeigt wird. */
#buchhaltung .bb-filter { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
#buchhaltung .bb-filter select { font-size: 14px; padding: 5px 8px; }

/* Tabellen im Bericht duerfen seitlich schieben statt die Seite
   quer zu ziehen. Farben in tbody bleiben unangetastet. */
#buchhaltung .tabellenrand { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   AM HANDY: lesen im Stehen, Tippziele mindestens 44 Pixel.
   ============================================================ */
@media (max-width: 700px) {
  #buchhaltung .bb-urteil { padding: 14px 14px; }
  #buchhaltung .bb-urteilzahl { font-size: 30px; }
  #buchhaltung .bb-urteil.bb-offen .bb-urteilzahl { font-size: 23px; }
  #buchhaltung .bb-urteiltext { font-size: 15.5px; }

  #buchhaltung .bb-kacheln { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 7px; }
  #buchhaltung .bb-kachel { padding: 10px 11px; }
  #buchhaltung .bb-kachelwert { font-size: 18px; }

  #buchhaltung .bb-wemliste li { min-height: 44px; align-items: center; }

  #buchhaltung .bb-rz { font-size: 15px; padding: 10px 12px; }
  #buchhaltung .bb-rzende { font-size: 16.5px; }

  /* Aufklappen ist ein Tippziel, kein Fadenkreuz. */
  #buchhaltung details.bb-teil > summary { min-height: 44px; display: flex; align-items: center; font-size: 15.5px; }
  #buchhaltung .bb-bericht > summary { min-height: 44px; display: flex; align-items: center; }

  /* Eingabefelder: 16 Pixel, damit das iPhone nicht hineinzoomt. */
  #buchhaltung .buch-eingabe input,
  #buchhaltung .buch-eingabe select,
  #buchhaltung .bb-filter select { font-size: 16px; min-height: 44px; padding: 8px 10px; }
  #buchhaltung .buch-eingabe button { min-height: 44px; font-size: 15px; }

  /* Die "weg"-Knoepfe in den Listen bleiben treffbar.
     Nur die Groesse, keine Farbe. */
  #buchhaltung tbody button { min-height: 44px; min-width: 44px; }
}


/* ---------- Chat-Fenster gross und aufgeraeumt (loeschbar) ---------- */
/* Die Gespraechsliste bleibt schmal, damit der Text viel Platz hat. */
.gp-spalte { flex: 0 0 210px; }
.gp-gkopf { padding: 9px 11px; gap: 10px; }
.gp-kopfname { font-size: 17px; font-weight: 600; }
/* Wer schreibt mit wem: der Name des ANDEREN steht gross im Kopf, der
   eigene Name kommt im Gespraech gar nicht vor. */
.gp-kopfuser { color: #667; font-size: 12.5px; }
.gp-liste { padding: 8px 11px; }
.chatzeile { max-width: 78%; }

@media (max-width: 700px) {
  /* Am Handy fuellt das Fenster den ganzen Schirm. */
  #glockenpanel {
    top: 0; right: 0; left: 0; bottom: 0;
    width: auto; max-width: none; height: auto; max-height: none;
    border-width: 0; border-radius: 0;
  }
  .gp-spalte { flex: 1 1 auto; }
  .chatzeile { max-width: 88%; }
}
/* ---------- Wer schreibt mit wem (loeschbar) ---------- */
/* Karam sah im Chat seinen EIGENEN Namen und wusste nicht, mit wem er
   spricht. Jetzt steht der andere gross im Kopf, und ueber jeder Blase
   steht, von wem sie ist ("Du" oder der Name des anderen). */
.gp-kopfmitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gp-kopfmitte > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-wer {
  display: block; font-size: 11.5px; font-weight: 700;
  color: #566; margin-bottom: 1px; letter-spacing: 0.2px;
}
.chatzeile.vonmir .gp-wer { text-align: right; }
@media (max-width: 700px) { .gp-wer { font-size: 12px; } }
/* ---------- Anruf wird verbunden (loeschbar) ---------- */
.anruf-warten {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: linear-gradient(160deg, #0d1b2a, #1b3a5c);
  color: #fff;
}
.anruf-warten .aw-ring {
  width: 78px; height: 78px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.25); border-top-color: #7fd4ff;
  animation: aw-dreh 1s linear infinite;
}
@keyframes aw-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .anruf-warten .aw-ring { animation: none; } }
.anruf-warten .aw-text { font-size: 20px; font-weight: 700; }
.anruf-warten .aw-mini { font-size: 14px; opacity: 0.8; max-width: 320px; }
/* ---------- Schreibzeile: Platz zum Tippen (loeschbar) ---------- */
/* Am Laptop stehen alle Zeichen nebeneinander, das Plus wird nicht
   gebraucht. Am Handy ist es genau umgekehrt. */
.gp-extras { display: flex; align-items: center; gap: 6px; }
.chateingabe .gp-mehr { display: none; }
.chateingabe { flex-wrap: wrap; }
#gp-text { flex: 1 1 auto; min-width: 0; }

@media (max-width: 700px) {
  /* Gemessen: dem Schreibfeld blieben 24 Pixel. Deshalb wandern die
     Anhang-Zeichen hinter das Plus und kommen als eigene Zeile. */
  .chateingabe .gp-mehr { display: inline-flex; }
  .chateingabe .gp-extras { display: none; }
  .chateingabe.offen .gp-extras {
    display: flex; flex: 1 0 100%; order: -1;
    justify-content: space-around; padding-bottom: 6px;
    border-bottom: 1px solid var(--rand, #dde);
    margin-bottom: 6px;
  }
  .chateingabe.offen .gp-mehr { background: var(--blau); color: #fff; }
  #gp-text { min-width: 90px; }
}
/* ---------- Gespraech fuellt den Handy-Schirm (loeschbar) ---------- */
/* Gemessen: unter dem Schreibfeld blieben rund 300 Pixel leer, weil das
   Gespraech in der Handy-Spalte nicht mitwuchs. Nur die Nachrichtenliste
   soll rollen, nicht das ganze Fenster. */
@media (max-width: 700px) {
  #gp-inhalt.gp-zeigt-gespraech { overflow: hidden; }
  #gp-inhalt.gp-zeigt-gespraech .gp-gespraech { flex: 1 1 auto; min-height: 0; }
  #gp-inhalt.gp-zeigt-liste .gp-spalte { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* ---------- Nachrichtenliste fuellt das Fenster (loeschbar) ---------- */
/* Gemessen am Laptop: das Fenster war 656 hoch, die Nachrichtenliste
   blieb bei 260 stehen - darunter klaffte eine leere Flaeche. Schuld war
   ein altes max-height aus der Zeit, als der Chat nur ein schmaler
   Kasten war. */
#glockenpanel .gp-liste,
#glockenpanel .chatliste { max-height: none; flex: 1 1 auto; min-height: 0; }

/* ---------- Anrufbild wie am Telefon (loeschbar) ---------- */
/* Das Gesicht des Anrufers im Kreis. Solange kein Foto da ist, bleibt der
   Anfangsbuchstabe stehen - der Anruf wartet nie auf ein Bild. */
#weckerruf .wk-kreis { position: relative; overflow: hidden; }
#weckerruf .wk-foto {
  display: none; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
#weckerruf .wk-kreis.hat, #weckerruf.wk-hatfoto .wk-foto { display: block; }
#weckerruf.wk-hatfoto .wk-buchstabe { display: none; }

@media (max-width: 700px) {
  /* Am Handy soll es sich anfuehlen wie ein gewoehnlicher Anruf: dunkler
     Vollbildschirm, grosses Gesicht oben, die beiden Knoepfe unten in
     Daumennaehe. Kein Kasten mitten auf der Seite. */
  #weckerruf { padding: 0; background: #0b1220; }
  #weckerruf .wk-karte {
    width: auto; max-width: none; height: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(170deg, #16233d 0%, #0b1220 62%);
    color: #fff;
    display: flex; flex-direction: column; align-items: center;
    padding: 12vh 18px calc(28px + env(safe-area-inset-bottom, 0px)) 18px;
  }
  #weckerruf .wk-oben { color: #9fb0cc; }
  #weckerruf .wk-kreis {
    width: 132px; height: 132px; margin: 26px auto 18px auto; font-size: 58px;
    border: 3px solid rgba(255,255,255,0.22);
  }
  #weckerruf .wk-name { font-size: 30px; color: #fff; }
  #weckerruf .wk-art { color: #9fb0cc; font-size: 15px; }
  #weckerruf .wk-tonhinweis {
    background: rgba(255,243,224,0.12); color: #ffd9a3; border-color: #b35a00;
  }
  /* Die Knoepfe rutschen ans untere Ende - so wie bei jedem Telefon. */
  #weckerruf .wk-tasten {
    margin-top: auto; width: 100%; max-width: 380px;
    gap: 18px; flex-wrap: nowrap;
  }
  #weckerruf .wk-tasten button {
    flex: 1 1 0; min-height: 64px; font-size: 17px; border-radius: 40px;
    border-width: 0;
  }
}

/* ---------- Warnung: Scheine nicht lesbar (loeschbar) ---------- */
/* Muss ins Auge springen: solange sie steht, sind ALLE Geldsummen
   auf der Seite zu niedrig. */
.gesperrtwarn {
  border: 2px solid #a00000; border-left-width: 8px; border-radius: 8px;
  background: #fff5f5; color: #3a0000;
  padding: 12px 14px; margin: 10px 0 14px 0;
}
.gesperrtwarn b { color: #a00000; }
.gesperrtwarn p { margin: 8px 0 0 0; }
.gesperrtwarn .mini { color: #5a2020; }
/* ---------- Verlauf der Meldungen (loeschbar) ---------- */
.wk-verlauf { margin-top: 6px; max-height: 320px; overflow-y: auto; }
.wk-vlleeren { float: right; font-size: 12px; padding: 3px 9px; }
.vl-zeile {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-bottom: 1px solid #e6e6ee;
}
.vl-zeile:last-child { border-bottom: 0; }
.vl-bild {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: #eef1f7; display: flex; align-items: center; justify-content: center;
  font-size: 17px; overflow: hidden;
}
.vl-bild img { width: 100%; height: 100%; object-fit: cover; }
.vl-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vl-mitte > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-wann { flex: 0 0 auto; color: #667; }
/* Bedeutungsfarbe: ein verpasster Anruf ist das Einzige, was auffallen soll. */
.vl-verpasst .vl-bild { background: #ffe9e9; }
.vl-verpasst b { color: #a00000; }
.vl-anruf .vl-bild { background: #e6f5ea; }
@media (max-width: 700px) {
  .vl-zeile { padding: 10px 8px; }
  .vl-bild { flex-basis: 40px; width: 40px; height: 40px; }
}
/* ---------- Die Punkte an der eigenen Nachricht (loeschbar) ---------- */
/* Bedeutungsfarbe: grau = unterwegs, gruen = gelesen. Sonst nichts. */
.dm-haken { display: inline-flex; gap: 2px; margin-left: 7px; vertical-align: middle; }
.dm-punkt {
  width: 5px; height: 5px; border-radius: 50%;
  background: #8c93a8; display: inline-block;
}
.dm-h4 .dm-punkt { background: #1a7a1a; }
/* Noch nicht hinausgegangen: der eine Punkt ist hohl, damit man den
   Unterschied auch ohne Farbe sieht. */
.dm-h1 .dm-punkt { background: transparent; border: 1px solid #8c93a8; width: 6px; height: 6px; }
.dm-unterwegs { opacity: 0.72; }
.dm-fehlt { opacity: 1; }
.dm-fehlt .dm-punkt { border-color: #a00000; }
@media (max-width: 700px) {
  .dm-punkt { width: 6px; height: 6px; }
  .dm-h1 .dm-punkt { width: 7px; height: 7px; }
}
/* ---------- Das kleine Anruf-Fenster (loeschbar) ---------- */
#anrufpanel {
  bottom: 20px; right: 20px; width: 264px; max-width: calc(100vw - 24px);
  background: #16233d; color: #fff; border: 0; border-radius: 14px;
  padding: 0 12px 12px 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.45);
  touch-action: none;   /* sonst scrollt das Handy beim Ziehen die Seite */
}
/* Der Griff: nur hier wird gezogen, damit die Knoepfe bedienbar bleiben. */
#anrufpanel .anruf-griff {
  padding: 8px 0 6px 0; cursor: grab; display: flex; justify-content: center;
}
#anrufpanel.anruf-faehrt .anruf-griff { cursor: grabbing; }
#anrufpanel .anruf-griffbalken {
  width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3);
}
#anrufpanel .anruf-kopf { display: flex; align-items: center; gap: 9px; }
#anrufpanel .anruf-bild { flex: 0 0 auto; }
#anrufpanel .anruf-wer { display: flex; flex-direction: column; min-width: 0; }
#anrufpanel .anruf-text { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#anrufpanel .anruf-dauer { color: #9fb0cc; font-variant-numeric: tabular-nums; }
#anrufpanel .anruf-tasten { margin-top: 11px; display: flex; gap: 8px; }
#anrufpanel .anruf-taste {
  flex: 1 1 0; min-height: 44px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 13px;
  cursor: pointer; padding: 6px 4px;
}
#anrufpanel .anruf-taste:hover { background: rgba(255,255,255,0.24); }
/* Bedeutungsfarben: rot legt auf, gelb heisst "er hoert dich nicht". */
#anrufpanel .anruf-auf { background: #a00000; }
#anrufpanel .anruf-auf:hover { background: #c40000; }
/* Hoehere Gewichtung als noetig, mit Absicht: beim Messen im Browser hat
   die knappere Fassung nicht durchgegriffen. Kein !important - das wuerde
   nur die naechste Absicht brechen. */
#anrufpanel button.anruf-taste.anruf-aus { background: #b35a00; }
#anrufpanel video { border-radius: 10px; margin-top: 9px; }

@media (max-width: 700px) {
  /* Am Handy breiter und weiter oben, damit die Tastatur es nicht verdeckt. */
  #anrufpanel { width: calc(100vw - 20px); right: 10px; left: 10px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  #anrufpanel .anruf-taste { font-size: 14px; min-height: 50px; }
}
/* ============================================================
   ZEILEN-SCHICHT (loeschbar)

   Faerbt jede zweite Zeile der grossen Tabellen und kann sie
   nummerieren. Gesteuert ueber zwei Merkmale am <html>-Element,
   die zeilen.js setzt. Loescht man zeilen.js und diesen Block,
   sehen die Tabellen aus wie vorher.

   WICHTIG: die Einfaerbung sitzt auf der ZEILE, nie auf einer Zelle.
   So malt jede Zelle mit Bedeutungsfarbe (gruen fuer den besten Wert,
   rot fuer Warnungen) weiter obendrauf und gewinnt immer.
   Die Toene sind absichtlich sehr blass, damit Gruen und Rot ihre
   Bedeutung behalten und nichts mit ihnen verwechselt wird.
   ============================================================ */

.zeilenschalter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 10px 0; font-size: 13px;
}
.zeilenschalter .zl-titel { color: #55627a; margin-right: 2px; }
.zeilenschalter .zl-knopf {
  border: 1px solid #c3c9d8; background: #fff; cursor: pointer;
  padding: 5px 11px; border-radius: 7px; font-size: 13px; line-height: 1.2;
}
.zeilenschalter .zl-knopf:hover { border-color: #8c93a8; }
.zeilenschalter .zl-knopf.aktiv { border-color: #1a2c50; border-width: 2px; font-weight: bold; }
/* Der Knopf zeigt seine eigene Farbe als schmalen Streifen, damit man
   sieht, was man waehlt, ohne es ausprobieren zu muessen. */
.zeilenschalter .zl-blau { border-left: 5px solid #1a2c50; }
.zeilenschalter .zl-rot  { border-left: 5px solid #a00000; }
.zeilenschalter .zl-gelb { border-left: 5px solid #b38600; }
.zeilenschalter .zl-lila { border-left: 5px solid #5b2a86; }
.zeilenschalter .zl-nummern { display: flex; align-items: center; gap: 5px; margin-left: 6px; }
.zeilenschalter .zl-nummern input { width: 17px; height: 17px; }

/* ---- jede zweite Zeile ---- */
html[data-zeilen="blau"] tbody tr:nth-child(even) { background: rgba(26, 44, 80, 0.075); }
html[data-zeilen="rot"]  tbody tr:nth-child(even) { background: rgba(160, 0, 0, 0.055); }
html[data-zeilen="gelb"] tbody tr:nth-child(even) { background: rgba(179, 134, 0, 0.085); }
html[data-zeilen="lila"] tbody tr:nth-child(even) { background: rgba(91, 42, 134, 0.07); }

/* ---- der mittlere Teil im Kombi-Bau ---- */
/* Karam: die Scheinkarten sollen nicht weiss sein, damit man sie
   auseinanderhaelt. Sehr blass, damit die Tabelle darin lesbar bleibt. */
html[data-zeilen="blau"] body[data-seite="bau"] .schein { background: rgba(26, 44, 80, 0.045); }
html[data-zeilen="rot"]  body[data-seite="bau"] .schein { background: rgba(160, 0, 0, 0.035); }
html[data-zeilen="gelb"] body[data-seite="bau"] .schein { background: rgba(179, 134, 0, 0.055); }
html[data-zeilen="lila"] body[data-seite="bau"] .schein { background: rgba(91, 42, 134, 0.045); }

/* ---- laufende Nummer vor der Zeile ---- */
/* Nur auf den drei grossen Tabellen, nicht in Mein Bereich. Reine
   CSS-Zaehlung: es steht KEINE Nummer in den Daten, und sie hat nichts
   mit der Schein-Nummer zu tun. */
html[data-zeilennr="ja"] body[data-seite="tafel"] tbody,
html[data-zeilennr="ja"] body[data-seite="original"] tbody,
html[data-zeilennr="ja"] body[data-seite="bau"] table.s-tab tbody { counter-reset: ktzeile; }
html[data-zeilennr="ja"] body[data-seite="tafel"] tbody > tr,
html[data-zeilennr="ja"] body[data-seite="original"] tbody > tr,
html[data-zeilennr="ja"] body[data-seite="bau"] table.s-tab tbody > tr { counter-increment: ktzeile; }
html[data-zeilennr="ja"] body[data-seite="tafel"] tbody > tr > td:first-child::before,
html[data-zeilennr="ja"] body[data-seite="original"] tbody > tr > td:first-child::before,
html[data-zeilennr="ja"] body[data-seite="bau"] table.s-tab tbody > tr > td:first-child::before {
  content: counter(ktzeile) ".\00a0";
  color: #8c93a8; font-size: 11px; font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  /* Am Handy etwas kraeftiger: dort ist der Bildschirm heller und die
     Zeilen stehen enger, da geht ein zu blasser Ton unter. */
  html[data-zeilen="blau"] tbody tr:nth-child(even) { background: rgba(26, 44, 80, 0.105); }
  html[data-zeilen="rot"]  tbody tr:nth-child(even) { background: rgba(160, 0, 0, 0.08); }
  html[data-zeilen="gelb"] tbody tr:nth-child(even) { background: rgba(179, 134, 0, 0.12); }
  html[data-zeilen="lila"] tbody tr:nth-child(even) { background: rgba(91, 42, 134, 0.1); }
  /* 44 Pixel ist die Grenze, unter der man am Handy danebentippt. */
  .zeilenschalter .zl-knopf { min-height: 44px; padding: 9px 14px; }
  .zeilenschalter .zl-nummern input { width: 20px; height: 20px; }
  /* Gemessen: das Kaestchen allein war 20 Pixel hoch. Am Handy wird das
     ganze Etikett zum Tippziel, damit man es sicher trifft. */
  .zeilenschalter .zl-nummern { min-height: 44px; padding: 0 8px; }
}

/* ---------- Stand von Hand eintragen (loeschbar) ---------- */
.standfeld { display: inline-flex; gap: 4px; align-items: center; }
.standfeld input { width: 92px; padding: 4px 6px; }
.standfeld button { padding: 4px 9px; font-size: 12px; }
/* Bedeutungsfarbe: ungeklaertes Geld ist ein Hinweis, kein Fehler. */
.korrekturmarke { color: #b35a00; white-space: nowrap; }
@media (max-width: 700px) {
  .standfeld input { width: 84px; min-height: 40px; }
  .standfeld button { min-height: 40px; }
}
/* ---------- Sprung zum Verlauf (loeschbar) ---------- */
/* Kurzes Aufblitzen, damit man sieht, wo man gelandet ist. */
.hervor { outline: 3px solid var(--blau, #1a2c50); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hervor { outline-width: 2px; } }
/* ---------- Ampel an der Quote (loeschbar) ---------- */
/* Karams Regel: erreicht die echte Quote die Mindestquote, ist sie gruen;
   darunter rot. Genau auf der Grenze zaehlt als erreicht, also gruen.
   Bedeutungsfarbe, kein Schmuck - deshalb bleibt sie auch, wenn man den
   Rest der Design-Schicht loescht, indem sie hier ganz unten steht. */
.uebergruen { color: #1a7a1a; font-size: 10.5px; font-weight: bold; }
tr.unterquote td { background: #fdf3f3; }
/* ---------- Einer nach dem anderen (loeschbar) ---------- */
#einzeln:empty { display: none; }
#einzeln { margin: 10px 0 16px 0; }
.ez-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ez-schritt { background: #1a2c50; color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 13px; }
.ez-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ez-anb { border: 1px solid #c3c9d8; border-radius: 8px; padding: 4px 10px; font-size: 13px; }
/* Bedeutungsfarben: blau = hier sind wir gerade, grau durchgestrichen = durch. */
.ez-anb.dran { border-color: #1a2c50; border-width: 2px; font-weight: bold; }
.ez-anb.fertig { color: #8c93a8; text-decoration: line-through; }
.ez-tab { width: 100%; font-size: 12.5px; }
.ez-tab td, .ez-tab th { padding: 4px 7px; }
.ez-tab tr.ez-drin { outline: 2px solid #1a2c50; }
/* Der Stand je Anbieter, in Bedeutungsfarben. */
.ez-offen { color: #1a7a1a; font-weight: bold; }
.ez-gesetzt { color: #55627a; }
.ez-keine { color: #a00000; }
.ez-quote { color: #b35a00; }
.ez-niedrig { color: #8c93a8; }
@media (max-width: 700px) {
  .ez-tab { font-size: 12px; }
  .ez-kopf button { min-height: 44px; }
}
/* ============================================================
   KNOEPFE UND FOTOS (loeschbare Schicht, ganz am Ende)

   Karam: die Knoepfe sollen schoener sein und man soll sofort
   sehen, dass man sie druecken kann. Und "Foto hinzufuegen" sah
   aus wie ein Link, nicht wie ein Knopf.

   Nichts hier aendert eine Rechnung, eine Abfrage oder einen
   Ablauf. Loescht man diesen Block, sieht die Seite aus wie
   vorher und funktioniert unveraendert.
   Die Bedeutungsfarben bleiben unangetastet: gruen heisst weiter
   "erreicht", rot "zu niedrig", der rote Auflege-Knopf bleibt rot.
   ============================================================ */

button, .fotoknopf, label.fotoknopf {
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.25;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
button { border-width: 1.5px; border-color: #b7c0d4; padding: 8px 15px; }
button:hover { border-color: #1a2c50; background: #eef2fa; }
/* Man muss sehen, dass der Druck angekommen ist. */
button:active { transform: translateY(1px); }
/* Wer mit der Tastatur arbeitet, muss sehen, wo er ist. */
button:focus-visible, .fotoknopf:focus-within {
  outline: 3px solid #7fb2ff; outline-offset: 2px;
}

/* Der wichtigste Knopf einer Zeile: dunkelblau statt schwarz, damit er
   zur Seite passt und trotzdem heraussticht. */
button.haupt {
  background: #1a2c50; border-color: #1a2c50; color: #fff; font-weight: bold;
}
button.haupt:hover { background: #24406f; border-color: #24406f; }

/* FOTO HINZUFUEGEN: war ein blau umrandeter Text und sah aus wie ein Link.
   Jetzt ein richtiger Knopf mit Klammer-Zeichen davor. */
label.fotoknopf, .fotoknopf {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid #b7c0d4; background: #fff; color: #1a2c50;
  padding: 8px 15px; font-size: 14px; cursor: pointer; margin-left: 8px;
}
label.fotoknopf:hover, .fotoknopf:hover { border-color: #1a2c50; background: #eef2fa; }

/* Kleine Knoepfe in Tabellen bleiben klein, aber bekommen dieselbe Form. */
button.merken, button.aufloesen, button.auge, .zeilenschalter .zl-knopf {
  border-radius: 8px;
}
button.merken { border-color: #1a7a1a; color: #0d5a0d; }
button.merken:hover { background: #eaf7ea; border-color: #0d5a0d; }

/* Der Muell-Knopf: erkennbar gefaehrlich, aber nicht laut. */
button.knopfweg {
  border-color: #e0b4b4; color: #a00000; padding: 6px 11px; font-size: 15px;
}
button.knopfweg:hover { background: #fdf3f3; border-color: #a00000; }

/* ---------- Fotos klein, beim Antippen gross ---------- */
/* Sie nahmen die halbe Seite ein. Jetzt stehen sie klein rechts. */
img.minifoto {
  max-width: 74px; max-height: 74px; object-fit: cover;
  border: 1px solid #c3c9d8; border-radius: 8px;
  cursor: zoom-in; float: right; margin: 0 0 4px 8px;
}
.s-foto img {
  max-width: 120px; max-height: 120px; object-fit: cover;
  border-radius: 8px; cursor: zoom-in; float: right; margin: 0 0 6px 10px;
}
img.foto-gross {
  max-width: 100%; max-height: none; object-fit: contain;
  cursor: zoom-out; float: none; margin: 8px 0;
}
.s-foto { overflow: hidden; }

@media (max-width: 700px) {
  /* Am Handy grosszuegiger: 44 Pixel ist die Grenze, unter der man
     danebentippt. */
  button, label.fotoknopf, .fotoknopf { min-height: 44px; font-size: 15px; }
  button.knopfweg { min-width: 44px; }
  img.minifoto { max-width: 60px; max-height: 60px; }
}

/* Die kleinen Knoepfe in den Scheinen waren nur 21 Pixel hoch - zum
   Treffen zu wenig. Sie bleiben klein, bekommen aber Luft. */
button.merken, button.aufloesen, label.fotoknopf.klein,
.s-fuss button, .s-fuss label.fotoknopf {
  min-height: 30px; padding: 5px 12px; font-size: 12.5px;
}

/* ---------- Wo soll ich suchen? (loeschbar) ---------- */
/* Karam hatte den ganzen Abend nur bei Stake nachgesehen, waehrend ein
   Teil der Scheine laengst bei Interwetten stand. Der Anbieter steht
   deshalb jetzt als Erstes und am groessten im Kopf jedes Scheins. */
.s-wo {
  display: inline-flex; align-items: center; gap: 7px;
  background: #1a2c50; color: #fff;
  padding: 5px 12px 5px 8px; border-radius: 10px; margin-right: 10px;
}
.s-wo-name { font-size: 15px; font-weight: bold; letter-spacing: 0.2px; }
.s-wo-mini { font-size: 11px; opacity: 0.75; }
.s-kopf { flex-wrap: wrap; }
@media (max-width: 700px) {
  .s-wo { width: 100%; margin: 0 0 6px 0; justify-content: center; }
}

/* ---------- Panel oben: wo steht was (loeschbar) ---------- */
.panel { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px 0; }
.panel:empty { display: none; }
.pn-kachel {
  flex: 1 1 170px; border: 1.5px solid #c3c9d8; border-left-width: 6px;
  border-radius: 10px; padding: 10px 13px; background: #fff;
}
.pn-zahl { font-size: 25px; font-weight: bold; line-height: 1.1; }
.pn-titel { font-size: 13.5px; font-weight: bold; margin-top: 1px; }
.pn-mini { font-size: 12px; color: #55627a; margin-top: 3px; }
.pn-kachel button { margin-top: 8px; font-size: 12.5px; padding: 5px 11px; }
/* Bedeutungsfarben: blau = liegt bereit, orange = da fehlt Geld,
   gruen = erledigt. Kein Rot - nichts davon ist ein Fehler. */
.pn-offen { border-left-color: #1a2c50; }
.pn-unter { border-left-color: #b35a00; background: #fffaf3; }
.pn-unter .pn-zahl { color: #b35a00; }
.pn-voll { border-left-color: #1a7a1a; }
.pn-voll .pn-zahl { color: #1a7a1a; }
.pn-summe { border-left-color: #55627a; }
.pn-luecken {
  flex: 1 1 100%; border: 1px solid #e6d3b8; border-radius: 10px;
  padding: 9px 13px; background: #fffaf3; font-size: 13px;
}
.pn-luecken ul { margin: 5px 0 0 0; padding-left: 20px; }
@media (max-width: 700px) {
  .pn-kachel { flex-basis: 100%; }
}
/* ---------- Zwei Verlaeufe: Schalter (loeschbar) ---------- */
.vf-schalter { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 8px 0 10px 0; }
.vf-schalter:empty { display: none; }
.vf-knopf { font-size: 13.5px; padding: 6px 13px; }
.vf-knopf.aktiv { background: #1a2c50; color: #fff; border-color: #1a2c50; }
.vf-zahl { opacity: .75; font-weight: normal; }
.vf-ziel { font-size: 12.5px; color: #55627a; }
.vf-ziel input { width: 76px; padding: 4px 6px; font-size: 13px; }
.vf-fehlt { font-size: 12.5px; color: #b35a00; }
.vf-ok { font-size: 12.5px; color: #1a7a1a; }
/* Die Zeile selbst bleibt ruhig: nur ein Streifen links, keine
   Flaechenfarbe - sonst kaempft sie mit der Zebra-Schicht. */
#scheine_db tr.unterziel > td:first-child { box-shadow: inset 4px 0 0 #b35a00; }
.unterziel-mark { color: #b35a00; font-weight: bold; }
@media (max-width: 700px) {
  .vf-schalter { gap: 6px; }
  .vf-knopf { flex: 1 1 auto; }
  .vf-ziel, .vf-fehlt, .vf-ok { flex-basis: 100%; }
}
/* ---------- Merker "steht im Verlauf" (loeschbar) ---------- */
.s-drin {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border-radius: 999px; background: #e7f5e7; border: 1px solid #1a7a1a;
  color: #145c14; font-size: 12px; font-weight: bold; vertical-align: middle;
}
/* Der Speichern-Knopf tritt zurueck, wenn schon gespeichert ist: er soll
   nicht mehr der naechste selbstverstaendliche Schritt aussehen. */
button.merken.schonda { background: #f4f6fa; color: #55627a; border-color: #c3c9d8; }
@media (max-width: 700px) {
  .s-drin { display: block; margin: 5px 0 0 0; width: fit-content; }
}
/* ---------- Panel: aufklappbare Kacheln + Liste (loeschbar) ---------- */
.pn-kachel.anklick { cursor: pointer; }
.pn-kachel.anklick:hover { border-color: #1a2c50; }
.pn-kachel.anklick.offen { box-shadow: 0 0 0 2px #1a2c50 inset; }
.pn-doppelt { border-left-color: #a00000; background: #fdf3f3; }
.pn-doppelt .pn-zahl { color: #a00000; }
.pn-liste {
  flex: 1 1 100%; border: 1.5px solid #c3c9d8; border-radius: 10px;
  padding: 11px 14px; background: #fff;
}
.pn-liste > .mini { margin-bottom: 6px; }
.pn-liste ul { list-style: none; margin: 0; padding: 0; }
.pl-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 7px 0; border-top: 1px solid #eceff5;
}
.pl-kopf { flex: 1 1 220px; }
.pl-spiele { flex: 1 1 100%; color: #55627a; }
.pl-wo { color: #8a93a6; }
.pl-warn { color: #a00000; font-weight: bold; }
.pn-liste > button { margin-top: 9px; }
@media (max-width: 700px) {
  .pl-zeile { gap: 3px 8px; }
  .pl-kopf { flex-basis: 100%; }
}
/* ---------- Doppelt gespeicherte Kombinationen (loeschbar) ---------- */
/* Roter Streifen links, wie der orange bei "nicht voll" - keine
   Flaechenfarbe, sonst kaempft sie mit der Zebra-Schicht. */
#scheine_db tr.doppelzeile > td:first-child { box-shadow: inset 4px 0 0 #a00000; }
.doppelmark { font-size: 12px; color: #a00000; font-weight: bold; margin-top: 4px; }
#scheine_db tr.doppelzeile.unterziel > td:first-child {
  box-shadow: inset 4px 0 0 #a00000, inset 8px 0 0 #b35a00;
}
/* ---------- Panel-Liste: ein Kasten je Kombination (loeschbar) ---------- */
.pl-block { border-top: 1px solid #eceff5; padding: 8px 0; }
.pl-blockkopf { font-size: 13.5px; }
.pl-block > ul { margin: 2px 0 0 0; padding-left: 12px; border-left: 2px solid #eceff5; }
.pl-block .pl-zeile { border-top: none; padding: 4px 0; }
.pl-fehlt { color: #b35a00; font-weight: bold; font-size: 12.5px; }
/* ---------- Panel-Warnungen (loeschbar) ---------- */
.pn-warn {
  flex: 1 1 100%; border: 1.5px solid #a00000; border-left-width: 6px;
  border-radius: 10px; padding: 10px 13px; background: #fdf3f3;
  font-size: 13px; color: #7a0000;
}
/* ============================================================
   DESIGN-SCHICHT: Die ganze Tabelle im Kombi-Bau (30.08.2026)
   Nur Optik. Loeschbar, ohne dass etwas aufhoert zu arbeiten.
   ============================================================ */
.tb-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 8px 0 10px; }
.tb-leiste select { padding: 4px 6px; }
.tb-warnung { color: #b23; font-weight: 600; }
.tb-tafel { width: 100%; border-collapse: collapse; }
.tb-tafel th, .tb-tafel td { padding: 4px 7px; vertical-align: top; }
.tb-tafel tbody tr { border-top: 1px solid rgba(128,128,128,.25); }
/* Weitere Linie desselben Spiels: kein neuer Trennstrich, sie gehoert dazu */
.tb-tafel tr.tb-weiter { border-top: 1px dotted rgba(128,128,128,.2); }
.tb-tafel tr.tb-vorbei { opacity: .45; }
.tb-wahl { width: 28px; }
.tb-wahl input { transform: scale(1.25); cursor: pointer; }
.tb-zeit { white-space: nowrap; }
.tb-wette { font-weight: 600; }
.tb-q { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-mind { font-weight: 700; }
.tb-ersatz { opacity: .5; font-weight: 400; }
.tb-gesetzt { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; font-weight: 600; }
@media (max-width: 700px) {
  .tb-tafel th, .tb-tafel td { padding: 3px 4px; font-size: .9em; }
  /* Liga-Spalte am Handy weg. Seit 01.09. mit Zeichen-Spalte vorne ist das
     Spalte 4, und NUR in der Bau-Tabelle: in der Gesetzt-Liste (gleiche
     Klasse) waere Spalte 3 der Einsatz. */
  #eigenbau .tb-tafel th:nth-child(4), #eigenbau .tb-tafel td:nth-child(4) { display: none; }
}

/* Liste der gesetzten Kombinationen im Kombi-Bau (30.08.2026) */
.gs-tafel .gs-nr { font-weight: 700; white-space: nowrap; }
.gs-tafel .gs-wetten { font-size: .9em; line-height: 1.35; }
.gs-tafel tr.gs-unlesbar { opacity: .7; font-style: italic; }


/* ==========================================================
   Kombination von Hand anlegen / bearbeiten (personkombi.js)
   Reine Optik. Diesen Block kann man ersatzlos loeschen, das
   Formular funktioniert dann weiter, nur ungeordnet.
   ========================================================== */
.pkkasten { border: 2px solid #cfd8e3; border-radius: 10px; padding: 12px 14px;
            margin: 12px 0; background: #fbfcfe; }
.pkkasten h4 { margin: 0 0 6px; }
.pkreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 10px 0; }
.pkreihe label { display: block; font-size: 0.9em; }
.pktabelle td { padding: 3px 4px; }
.pkfeld { width: 100%; box-sizing: border-box; }
.pkkurz { max-width: 170px; }
.pkmini { max-width: 90px; }
.pkmarke { color: #7a6000; font-size: 0.8em; }
/* Am Handy wird aus jeder Wett-Zeile eine eigene Karte. Als Tabelle waren
   die Felder dort nur noch zwei Zeichen breit (gemessen bei 375 px). */
@media (max-width: 700px) {
  .pkreihe { flex-direction: column; align-items: stretch; }
  .pkkurz, .pkmini { max-width: none; }
  .pktabelle, .pktabelle tbody, .pktabelle tr, .pktabelle td { display: block; width: auto; }
  .pktabelle thead { display: none; }
  .pktabelle tr { border: 1px solid #dde3ec; border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
  .pktabelle td { padding: 3px 0; }
  .pktabelle input { width: 100%; box-sizing: border-box; }
  .pknr { font-weight: bold; color: #556; }
  .pkkasten .tabellenrand { overflow: visible; }
}
.pknr { white-space: nowrap; }

/* ============================================================
   DESIGN-SCHICHT: Anbieter-Zeichen und Kombi-Farben (01.09.2026)
   Nur Optik. Die Farben selbst kommen inline aus kombiKarte() in
   kombis.js, weil die Zebra-Regeln jede Klassenregel schlagen.
   ============================================================ */
.ab { display: inline-block; min-width: 20px; padding: 1px 5px; margin-right: 3px;
  border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  line-height: 1.5; text-align: center; border: 1px solid #000; vertical-align: middle; }
.ab-st { background: #1a2c38; color: #fff;    border-color: #0e1a22; }  /* Stake */
.ab-iw { background: #0a7d3e; color: #fff;    border-color: #06612f; }  /* Interwetten */
.ab-bw { background: #111;    color: #ffd400; border-color: #000; }     /* Bwin */
.ab-b3 { background: #14805e; color: #ffe400; border-color: #0b5b42; }  /* Bet365 */
.tb-marken { white-space: nowrap; width: 1%; }
/* Eine gesetzte Zeile (hat Kombi-Farbe) bleibt lesbar, auch wenn das Spiel laeuft */
.tb-tafel tr.tb-vorbei[style] { opacity: .85; }
.gs-tafel .ab { margin-right: 5px; }

/* Ausgaenge in der Gesetzt-Liste (01.09.2026, nur Anzeige) */
.gs-ausgang { font-size: .85em; margin-top: 2px; font-weight: 700; }
.gs-gewonnen { color: #0a7d3e; }
.gs-verloren { color: #a00000; }
.gs-unklar, .gs-offen { color: #555; font-weight: 400; }

/* ============================================================
   DESIGN-SCHICHT: Anbieter-Kopf in Mein Bereich (02.09.2026)
   Nur Optik, loeschbar. Hausfarben wie die .ab-Marken.
   ============================================================ */
.ak-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.ak-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 12px; border: 2px solid #ccc; border-radius: 8px; background: #fff;
  cursor: pointer; text-align: left; min-width: 130px; }
.ak-karte .ak-name { font-weight: 800; letter-spacing: .2px; }
.ak-karte .ak-zeile { font-size: .85em; }
.ak-st { border-color: #1a2c38; } .ak-st .ak-name { color: #1a2c38; }
.ak-iw { border-color: #0a7d3e; } .ak-iw .ak-name { color: #0a7d3e; }
.ak-bw { border-color: #111; }    .ak-bw .ak-name { color: #111; }
.ak-b3 { border-color: #14805e; } .ak-b3 .ak-name { color: #14805e; }
.ak-aktiv { outline: 3px solid var(--kenn, #0e6273); outline-offset: 1px; background: var(--kennhell, #eef1f7); }
.ak-detail { border: 1px solid #d8dee9; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.ak-summe td { border-top: 2px solid #999; }
.pk-kombihinweis { margin: 6px 0; }
@media (max-width: 700px) {
  .ak-karte { min-width: 46%; }
  .ak-detail { overflow-x: auto; }
}

/* ============================================================
   DESIGN-SCHICHT: Eigene Ansichten + Chat wie eine Gruppe
   (02.09.2026). Komplett loeschbar: ohne diese Schicht sind die
   Knoepfe schlicht und der Chat sieht aus wie vorher - alles
   funktioniert genauso. Keine Animationen: die Seite bleibt
   oft stundenlang offen (Stufe 1).
   ============================================================ */

/* -- Kopf jeder eigenen Ansicht: Zurueck + Titel -- */
.ansicht-kopf { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.ansicht-kopf h2 { margin: 0; }
.zurueckknopf { font-size: 15px; padding: 8px 16px; white-space: nowrap; }

/* -- Chat wie eine Gruppe: Sprechblasen auf JEDER Bildschirmgroesse.
      Nur auf die Chat-Ansicht gescopet: .chatliste/.chatzeile teilen
      sich sonst DM-Fenster und Glockenpanel (Falle 8). -- */
#ans_chat .chatliste {
  max-height: none;
  height: min(62vh, 640px);
  background: #edf0f6;
  border: 1px solid #d5dae4;
  border-radius: 12px;
  padding: 12px 12px 8px;
}
#ans_chat .chatzeile {
  max-width: 76%;
  width: fit-content;
  margin: 8px auto 8px 0;
  padding: 7px 12px 6px;
  background: #fff;
  border: 1px solid #dfe3ec;
  border-left: 1px solid #dfe3ec;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#ans_chat .chatzeile.vonmir {
  margin: 8px 0 8px auto;
  background: #ddf0dd;
  border-color: #c2ddc2;
  border-radius: 14px 14px 4px 14px;
}
#ans_chat .chatzeile > b { font-size: 12.5px; color: #33508a; }
#ans_chat .chatzeile.vonmir > b { color: #1a6a1a; }
#ans_chat .chatzeile .mini { font-size: 11px; color: #778; }
#ans_chat .chateingabe { margin-top: 10px; gap: 8px; }
#ans_chat .chateingabe input { border-radius: 999px; padding: 10px 16px;
  border: 2px solid #c8cfdd; background: #fff; }
#ans_chat .chateingabe input:focus { border-color: #1a2c50; }
#ans_chat .chateingabe button { border-radius: 999px; padding: 10px 20px; }
#ans_chat .medienleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#ans_chat .medienleiste button, #ans_chat .medienleiste .fotoknopf {
  margin-right: 0; border-radius: 999px; }

@media (max-width: 700px) {
  #ans_chat .chatliste { height: calc(100vh - 340px); min-height: 240px; }
  #ans_chat .chatzeile { max-width: 88%; }
}

/* ============================================================
   DESIGN-SCHICHT: Die Kopfleiste als ruhige Leiste (02.09.2026)
   Karams Wunsch: die Knoepfe sollen in einen Header passen und
   nicht so herausstechen. Nur Optik, komplett loeschbar - ohne
   diese Schicht sind es wieder die eckigen Einzel-Knoepfe.
   Die Signalknoepfe (Admin rot, App laden gruen, Update rot)
   behalten ihre Farben, hier wird nur Form und Lage vereinheitlicht.
   ============================================================ */

/* Die Leiste selbst: ein flacher Balken in der Kennfarbe der Seite. */
body[data-seite] > .navleiste {
  align-items: center;
  background-color: color-mix(in srgb, var(--kennhell, #eef1f7) 60%, #fff);
  border: 1px solid color-mix(in srgb, var(--kenn, #1a2c50) 16%, #fff);
  border-radius: 11px;
  padding: 6px 10px;
}

/* Alle Knoepfe gleich hoch und leichter: duenner Rand, ohne eigene
   weisse Flaeche - sie liegen IM Balken statt darauf. */
body[data-seite] > .navleiste a.navknopf {
  min-height: 38px;
  padding: 5px 14px;
  border-width: 1px;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
}
body[data-seite] > .navleiste a.navknopf:hover {
  background-color: color-mix(in srgb, var(--kennhell, #eef1f7) 70%, #fff);
}
/* Aktiv bleibt gefuellt (Regel der Kenn-Schicht), nur nicht mehr fett
   umrandet. Signalknoepfe kriegen ihre Flaeche zurueck: */
body[data-seite] > .navleiste a.navknopf.adminknopf { background: #7a0000; }
body[data-seite] > .navleiste a.navknopf.installknopf { background: #1a7a1a; }
body[data-seite] > .navleiste a.navknopf.updateknopf { background: #a00000; }

/* Die Glocken-Gruppe (Profil, Freunde, Nachrichten, Wecker) rueckt als
   EIN Block nach rechts. Bisher hatte JEDER dieser Knoepfe
   margin-left:auto - die freie Breite wurde dazwischen verteilt, und
   genau diese Luecken sahen "herausgerissen" aus. */
body[data-seite] > .navleiste a.navknopf[href="mein.html"]:not(.glocke) { margin-right: auto; }
body[data-seite] > .navleiste a.glocke { margin-left: 0; }
/* Die Glocken-Knoepfe als runde, stillere Zeichen. */
body[data-seite] > .navleiste a.glocke {
  border-radius: 999px;
  padding: 5px 13px;
  border-color: color-mix(in srgb, #1a7a1a 55%, #fff);
}
/* Ist eine der eigenen Ansichten offen, fuellt sich ihr Knopf gruen -
   die Glocken-Ausnahme der Kenn-Schicht laesst ihn sonst leer. */
body[data-seite] > .navleiste a.glocke.aktiv {
  background: #1a7a1a; color: #fff; border-color: #1a7a1a;
}

/* Am Handy ist die Leiste eine klebende Schiebe-Zeile ueber die volle
   Breite (Handy-Schicht) - dort keine runden Ecken und kein Rahmen,
   sonst steht ein schwebender Kasten am oberen Rand. */
@media (max-width: 700px) {
  body[data-seite] > .navleiste {
    border-radius: 0;
    border-left: none; border-right: none; border-top: none;
  }
  body[data-seite] > .navleiste a.navknopf { min-height: 44px; }
  body[data-seite] > .navleiste a.navknopf[href="mein.html"]:not(.glocke) { margin-right: 0; }
}

/* ============================================================
   DESIGN-SCHICHT: Gewonnen/verloren an jeder Kombination
   (02.09.2026, Karams Wunsch). Nur Optik, loeschbar - die Marke
   selbst kommt aus standMarke() in mein.js und bleibt ohne diese
   Schicht schlichter Text.
   ============================================================ */
.st-mark {
  display: inline-block; margin-top: 4px; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.st-mark.st-gewonnen { background: #d9efd9; color: #0a5a0a; border: 1px solid #9ccc9c; }
.st-mark.st-verloren { background: #f7dcdc; color: #8a0f0f; border: 1px solid #dfa3a3; }
.st-mark.st-offen    { background: #eef0f5; color: #556;    border: 1px solid #ccd2de; font-weight: 400; }

/* ============================================================
   DESIGN-SCHICHT: Anbieter-Blick + Misch-Knopf im Kombi-Bau
   (02.09.2026). Nur Optik, loeschbar - die Kacheln nutzen die
   ak-Klassen der Anbieter-Karten aus Mein Bereich.
   ============================================================ */
.pn-ak { align-items: stretch; margin: 0 0 10px; }
.pn-misch { border-radius: 8px; padding: 8px 18px; line-height: 1.25; text-align: center; }
.pn-misch .mini { color: #d9e2f5; font-size: 11.5px; }
.pn-mischgruppe { display: flex; align-items: stretch; gap: 8px; }
/* Aufraeum-Knopf neben dem Mischziel (Karam, 03.09.). Reine Optik -
   loeschbar, ohne dass panelOffeneLoeschen() etwas merkt. */
.pn-leeren { border-radius: 8px; padding: 8px 14px; line-height: 1.25;
  text-align: center; background: #6b7280; color: #fff; border: 0;
  font-weight: 700; cursor: pointer; }
.pn-leeren:hover { background: #4b5563; }
/* Grenzen unter dem Misch-Knopf (Karam, 03.09.). Reine Optik -
   die Zahlen kommen aus mischGrenzen(), nicht von hier. */
.pn-grenzen { flex: 1 1 100%; margin-top: 6px; font-size: 12.5px;
  line-height: 1.5; }
.pn-gr-zeile { color: #24406b; }
.pn-gr-stop { color: #a00000; }
.pn-gr-aus { color: #6b7280; }
/* Bau und Verlauf uneins (Karam, 03.09.). Nur Optik - der Knopf und
   die Liste kommen aus bauVerlaufAbweichungen(). */
.pn-abw ul { margin: 6px 0; padding-left: 20px; }
.pn-abw button { margin-top: 8px; }
.pn-leeren .mini { color: #e5e7eb; font-size: 11.5px; font-weight: 400; }
.pn-mischziel { display: flex; flex-direction: column; justify-content: center;
  text-align: center; line-height: 1.3; }
.pn-mischziel input { width: 52px; min-height: 36px; text-align: center;
  font-size: 16px; font-weight: 700; margin: 2px auto; }
.gs-filterhinweis { color: #7a3d00; }

/* Klingel-Panel (Karam, 03.09.): Verlauf zuerst, Einstellungen hinter
   dem Zahnrad. Nur Optik, IDs/Handler unveraendert. */
#weckerpanel .wk-verlauf { max-height: 42vh; overflow-y: auto; }
#wk-einstellungen-knopf { width: 100%; min-height: 44px; border-radius: 8px; }
#wk-einstellungen { border-top: 2px solid #e3e8f0; margin-top: 6px; }
#wk-probe-alle b { color: #0a5a0a; }
#wk-probe-alle b.rot { color: #a00000; }

/* Bau-Tabelle: Linien desselben Spiels ruecken zusammen, zwischen den
   Einsaetzen eine dicke Trennkante und Luft (Karam, 03.09.). Nur
   Kanten und Abstaende - KEINE Hintergruende, die Kombi-Farben und
   Zebra-Regeln bleiben unberuehrt. */
#eigenbau .tb-tafel tbody tr:not(.tb-weiter) td {
  border-top: 3px solid #aab6ca; padding-top: 8px;
}
#eigenbau .tb-tafel tbody tr.tb-weiter td {
  border-top: 1px dashed #dde3ee;
}
@media (max-width: 700px) {
  .pn-misch { flex: 1 1 100%; }
  .pn-leeren { flex: 1 1 100%; }
}

/* Der Stand-Schalter selbst faerbt sich mit: gewonnen gruen, verloren rot. */
#scheine_db td.standzelle.st-gewonnen select,
#scheine_db td.standzelle.st-gewonnen {
  color: #0a5a0a; font-weight: bold;
}
#scheine_db td.standzelle.st-gewonnen select { border-color: #1a7a1a; background: #eaf6ea; }
#scheine_db td.standzelle.st-verloren select,
#scheine_db td.standzelle.st-verloren {
  color: #8a0f0f; font-weight: bold;
}
#scheine_db td.standzelle.st-verloren select { border-color: #a00000; background: #fbecec; }

/* ============================================================
   REDESIGN-SCHICHT 02.09.2026 - Karams Rundumschlag
   ("das ganze Programm schoener, mehr Platz zum Eintragen,
   klare Grenzen, Anbieter immer mit Zeichen und Farbe").
   Komplett loeschbar. Komplett in @media screen: der Druckpfad
   bleibt unberuehrt (Muster der Wohlfuehl-Schicht).
   Leitplanken aus der Pruefung vom 02.09.:
   - KEINE Hintergruende/Farben im tbody (Zebra- und Kombi-
     Farben sind Bedeutung, Inline-Stile schlagen ohnehin alles)
   - keine z-index an fixen Kaesten, keine Kopfleisten-Margins,
   - h-Farben nur ueber var(--kenn, ...), kein !important ausser
     drei dokumentierten Gegen-Inline-Breiten.
   ============================================================ */
@media screen {

/* ---- 1. Lesbarkeit: die Kleinstschriften anheben ---- */
.mini { font-size: 11px; }
#eigenbau > p.mini, #gesetzteliste .mini, .fuss { font-size: 12.5px; line-height: 1.5; }
table.s-tab th { font-size: 11.5px; letter-spacing: 0.02em; }
td.s-raus select { font-size: 12px; }
.stand { font-size: 12.5px; }

/* ---- 2. Eintragen mit Platz und klaren Grenzen ---- */
/* Formular "Neue Buchung" in der Personen-Kasse: geordnete Reihe. */
.kassenformular { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
/* Buchhaltungs-Eingaben: die Inline-Breiten (width:110px/90px/130px im
   HTML-String) schlagen jede Schicht - hier die dokumentierte Ausnahme
   mit !important, drei Felder, sonst nichts. */
.buch-eingabe #bu_person, .buch-eingabe #bu_betrag, .buch-eingabe #ba_betrag {
  width: auto !important; flex: 1 1 120px;
}
#freunde input, #teilen input, #teilen select { min-height: 44px; font-size: 16px; }
.tag-wahl { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tag-wahl button, #tag_datum { min-height: 44px; }
.tag-teil { margin-top: 18px; }
/* Der GERECHNETE Stand (Platzhalter) unterscheidet sich jetzt sichtbar
   von einer echten Eingabe. */
.standfeld input::placeholder { opacity: 0.45; font-style: italic; }

/* ---- 3. Abschnitte mit Kante: Orientierung im langen Block ---- */
#blk_kombis > h2 { margin-top: 30px; padding-top: 16px; border-top: 2px solid #e3e8f0; }
#anbieterkopf .ak-leiste::before {
  content: "Anbieter - antippen filtert die Liste:";
  flex-basis: 100%; font-size: 12px; color: #55627a;
}
.pn-ak::before {
  content: "Gesetzt je Anbieter - antippen filtert Gesetzt-Liste und Kombis:";
  flex-basis: 100%; font-size: 12px; color: #55627a;
}
.ordnerfilter::before {
  content: "Person waehlen:";
  display: block; font-size: 12px; color: #55627a; margin-bottom: 4px;
}
#ordnerbox { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- 4. Tabellen ruhiger (ohne tbody-Farben) ---- */
#konto_db td:nth-child(n+2), #konto_db th:nth-child(n+2) {
  text-align: right; font-variant-numeric: tabular-nums;
}
#scheine_db td { vertical-align: top; }
body[data-seite="original"] td.q { font-variant-numeric: tabular-nums; }
/* Die Mindestquoten-Spalte (rechte Quotenspalte, Karams Leseregel) wird
   unverwechselbar: fett und mit markiertem Kopf - keine tbody-Farbe. */
body[data-seite="original"] td:nth-child(8) { font-weight: bold; }
body[data-seite="original"] th:nth-child(8) { background: #f3e8d2; }
/* Zeilen mit Hinweis (title) bekommen ein sichtbares Zeichen; der volle
   Text bleibt Desktop-Hover - mehr geht ohne JS nicht. */
body[data-seite="original"] tr[title] > td:first-child::after {
  content: " \24D8"; color: #1a5e97;
}

/* ---- 5. Kombi-Bau: Schein-Karten und Bau-Tabelle ---- */
.s-kopf { gap: 4px 10px; align-items: center; }
.s-fuss { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.s-fuss .knopfweg { margin-left: auto; }
#eigenbau .tabellenrand { max-height: 72vh; overflow: auto; }
#eigenbau .tb-tafel thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
#eigenbau .tb-leiste { position: sticky; top: 0; z-index: 5; background: #fff;
  padding: 6px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); }
/* "Tabelle frisch einlesen" wirft selbst Gebautes weg - das sieht man
   dem Knopf jetzt an. Faellt der Selektor ins Leere, fehlt nur Farbe. */
.filterzeile button[onclick^="neuBauen"] {
  border-color: #a00000; color: #a00000; background: #fdf6f6;
}

/* ---- 6. Anbieter IMMER mit Zeichen und Hausfarbe ---- */
/* Das kleine Zeichen (S, IW, bw, 365, AD, BTW) vor jedem Namens-Schild - dieselbe
   Optik wie die .ab-Marken im Kombi-Bau. */
.marke::before {
  display: inline-block; min-width: 18px; margin-right: 5px; padding: 0 3px;
  border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.2px;
  text-align: center; background: rgba(255, 255, 255, 0.92); vertical-align: 1px;
}
.marke.m-st::before { content: "S"; color: #1a2c38; }
.marke.m-iw::before { content: "IW"; color: #0a7d3e; }
.marke.m-bw::before { content: "bw"; color: #111; }
.marke.m-b3::before { content: "365"; color: #14805e; }
/* Die Anbieter-Karten (Mein Bereich + Kombi-Bau) tragen das Zeichen im Namen. */
.ak-karte .ak-name::before {
  display: inline-block; min-width: 20px; margin-right: 6px; padding: 1px 5px;
  border-radius: 4px; font-size: 10.5px; font-weight: 700; text-align: center;
  border: 1px solid #000; color: #fff; vertical-align: 1px;
}
.ak-st .ak-name::before { content: "S"; background: #1a2c38; border-color: #0e1a22; }
.ak-iw .ak-name::before { content: "IW"; background: #0a7d3e; border-color: #06612f; }
.ak-bw .ak-name::before { content: "bw"; background: #111; color: #ffd400; }
.ak-b3 .ak-name::before { content: "365"; background: #14805e; color: #ffe400; }
/* Der Schein-Kopf "hier suchen" faerbt sich je Anbieter (die Klasse
   m-<kz> haengt seit heute am Namen; :has wie im Bestand nur als Zier). */
.s-wo:has(.s-wo-name.m-st) { background: #1a2c38; }
.s-wo:has(.s-wo-name.m-iw) { background: #0a7d3e; }
.s-wo:has(.s-wo-name.m-bw) { background: #111; }
.s-wo:has(.s-wo-name.m-bw) .s-wo-name { color: #ffd400; }
.s-wo:has(.s-wo-name.m-b3) { background: #14805e; }
.s-wo:has(.s-wo-name.m-b3) .s-wo-name { color: #ffe400; }
/* Alt-Drift behoben (Befund der Pruefung): button.haupt bekommt wieder
   die Kennfarbe der Seite statt der Festfarbe aus der Knoepfe-Schicht. */
button.haupt { background: var(--kenn, #1a2c50); border-color: var(--kenn, #1a2c50); }
button.haupt:hover { background: color-mix(in srgb, var(--kenn, #1a2c50) 85%, #000); }

/* ---- 7. Original-Tabelle: Ordnerkopf und Listen ---- */
.ordnerkopf {
  background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ordnerliste { max-height: 40vh; overflow-y: auto; padding-right: 4px;
  -webkit-overflow-scrolling: touch; }

/* ---- 8. Die eigenen Ansichten: Profil, Freunde, Chat ---- */
#ans_profil { max-width: 660px; margin: 0 auto; }
#ans_profil .ansicht-kopf { margin-left: 0; }
#ans_profil .kern { border-color: #c3cad8; background: #fafbfe; border-radius: 10px; }
#ans_profil .kern b { color: inherit; }
#ans_profil .kern button { margin-left: 10px; }
#ans_profil .e2ehinweis { margin: 12px 0 18px; }
.profilkasten .pf-feld:last-of-type { border-top: 1px solid #dfe3ec;
  padding-top: 14px; margin-top: 18px; }
/* Die Farb- und Schriftwahl zeigt jetzt VOR dem Klick, was sie tut -
   exakt dieselben Werte wie .profilname.pf-* (Z. ~1885), keine zweite
   Farbwahrheit. Wer dort aendert, zieht hier nach. */
.pf-wahl.pf-c-blau { color: #17457e; }
.pf-wahl.pf-c-gruen { color: #14663a; }
.pf-wahl.pf-c-rot { color: #a4111f; }
.pf-wahl.pf-c-lila { color: #6a2a86; }
.pf-wahl.pf-c-orange { color: #8a4a00; }
.pf-wahl.pf-c-tuerkis { color: #0d5f66; }
.pf-wahl.pf-c-schwarz { color: #1a1a1a; }
.pf-wahl.pf-c-pink { color: #99205e; }
.pf-wahl.pf-f-rund { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
.pf-wahl.pf-f-schreib { font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive; }
.pf-wahl.pf-f-fett { font-family: "Arial Black", "Helvetica Neue", Impact, sans-serif; font-weight: 900; }
.pf-wahl.pf-f-schmal { font-family: "Arial Narrow", "Avenir Next Condensed", sans-serif; }
.pf-wahl.pf-f-breit { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.4px; }
/* Freunde & Teilen als ruhige Karten. */
#ans_freunde details { border: 1px solid #d5dae4; border-radius: 12px; }
#ans_freunde details > summary { background: transparent; border-left: none;
  font-weight: 700; font-size: 16px; }
#ans_freunde .freundknopf { min-height: 44px; padding: 8px 16px; font-size: 15px;
  border-radius: 999px; }
#ans_freunde .freundknopf .badge { margin-left: 6px; }
#teilen td { vertical-align: middle; }
/* Das DM-Fenster bekommt dieselben Sprechblasen wie der Bereichs-Chat -
   strikt auf #dmfenster gescopet (Falle 8: Klassen teilen sich sonst
   das Glockenpanel). */
#dmfenster h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#dmfenster h3 button { font-size: 13px; color: #a4111f; border-color: #a4111f; background: #fff; }
#dmfenster .chatliste { max-height: none; height: min(48vh, 480px); background: #edf0f6;
  border: 1px solid #d5dae4; border-radius: 12px; padding: 12px 12px 8px; }
#dmfenster .chatzeile { max-width: 76%; width: fit-content; margin: 8px auto 8px 0;
  padding: 7px 12px 6px; background: #fff; border: 1px solid #dfe3ec;
  border-left: 1px solid #dfe3ec; border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08); font-size: 15px; line-height: 1.35;
  overflow-wrap: anywhere; }
#dmfenster .chatzeile.vonmir { margin: 8px 0 8px auto; background: #ddf0dd;
  border-color: #c2ddc2; border-radius: 14px 14px 4px 14px; }
#dmfenster .chateingabe input { border-radius: 999px; padding: 10px 16px;
  border: 2px solid #c8cfdd; background: #fff; }
#dmfenster .chateingabe button { border-radius: 999px; padding: 10px 20px; }

/* ---- 9. Buchhaltung: die Geld-Geschichte ---- */
.bb-kindsatz { font-size: 16px; line-height: 1.55; padding: 12px 16px; margin-bottom: 12px;
  background: #fafbfe; border: 1px solid #d5dae4; border-left: 5px solid var(--kenn, #1a2c50);
  border-radius: 10px; }
.bb-grossreihe .bb-kachel.bb-gross { flex: 1 1 200px; }
.bb-kachel.bb-gross .bb-kachelwert { font-size: 26px; }
.bb-kachel.bb-gross.bb-plus .bb-kachelwert { color: #0a5a0a; }
.bb-kachel.bb-gross.bb-minus .bb-kachelwert { color: #a00000; }
.bb-kassenbuch table td { padding: 4px 8px; }
.bb-kassenbuch .tb-q { text-align: right; font-variant-numeric: tabular-nums; }
/* Berichte in der Buchhaltung (03.09.): Filterzeile + Vorschau. */
.bb-berichte .bb-filterzeile { display: flex; flex-wrap: wrap; gap: 8px 12px;
  align-items: center; margin: 8px 0; }
.bb-berichte .bb-filterzeile select, .bb-berichte .bb-filterzeile input[type="date"] {
  min-height: 40px; }
.bb-berichtschau { border: 1px solid #d5dae4; border-radius: 10px; padding: 12px 14px;
  background: #fff; overflow-x: auto; }
@media (max-width: 700px) {
  .bb-berichte .bb-filterzeile label { flex: 1 1 100%; }
  .bb-berichte .bb-filterzeile select { width: 100%; }
}

/* ---- 10. KLAPPEN: Handbuch und Erklaerungen in Kapiteln ---- */
.kl-leiste { border: 1px solid #d5dae4; border-radius: 12px; padding: 12px 14px;
  margin: 12px 0 16px; background: #fafbfe; }
.kl-titel { font-size: 12.5px; color: #55627a; margin-bottom: 8px; }
.kl-reihe { display: flex; flex-wrap: wrap; gap: 7px; }
.kl-knopf { font-size: 14px; padding: 8px 14px; border: 1px solid var(--kenn, #1a2c50);
  color: var(--kenn, #1a2c50); background: #fff; border-radius: 999px; min-height: 40px; }
.kl-knopf:hover { background: var(--kennhell, #eef1f7); }
.kl-extras { margin-top: 8px; display: flex; gap: 7px; }
.kl-extra { font-size: 12px; padding: 5px 12px; border-radius: 999px; }
.kl-abschnitt { border: 1px solid #e3e8f0; border-radius: 12px; padding: 2px 16px 10px;
  margin: 10px 0; background: #fff; }
.kl-abschnitt.zu { padding-bottom: 2px; }
.kl-abschnitt.zu > :not(h2) { display: none; }
h2.kl-kopf { cursor: pointer; border-bottom: none; user-select: none; }
h2.kl-kopf::after { content: " \25B4"; color: #8b95a8; font-size: 14px; }
.kl-abschnitt.zu > h2.kl-kopf::after { content: " \25BE aufklappen"; font-size: 12px; }

/* ---- 11. Handy: Platz zum Tippen, nichts schiebt die Seite quer ---- */
@media (max-width: 700px) {
  /* Tippziele wiederholen (Leitplanke: spaetere button-Regeln koennten
     die 44px der Handy-Schicht schlagen - hier gelten sie weiter). */
  button { min-height: 44px; }
  #scheine_db input.einsatz, #personenkasse input.einsatz {
    width: 110px; min-height: 44px; font-size: 16px;
  }
  .kassenformular input, .kassenformular select { flex: 1 1 100%; min-height: 44px; font-size: 16px; }
  #freunde input { width: 100%; }
  #teilen .inhalt { overflow-x: auto; }
  #teilen table { min-width: 420px; }
  #teilen select, #teilen td button { min-height: 44px; }
  /* Schein-Karten scrollen INNEN, nicht die ganze Seite. */
  #scheine .schein, #niedrig .schein, #einzeln .schein {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  td.s-eingabe input { width: 84px; }
  .s-kopf .s-quote { flex-basis: 100%; margin-left: 0; }
  /* Personen-Kasse: nur die Tabellen scrollen quer. */
  #personenkasse .kassenkasten table { display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  /* Panel als 2er-Raster statt Einerspalte. */
  .pn-kachel { flex: 1 1 calc(50% - 9px); }
  .pn-ak .ak-karte { flex: 1 1 calc(50% - 4px); }
  /* Bau-Tabelle: greifbare Haekchen, klebende Bauen-Leiste unter der
     klebenden Kopfleiste. */
  #eigenbau .tb-wahl { width: 38px; }
  #eigenbau .tb-wahl input { width: 26px; height: 26px; }
  #eigenbau .tb-tafel td { padding-top: 6px; padding-bottom: 6px; }
  #eigenbau .tb-leiste { top: 54px; }
  /* Gesetzt-Liste: kuerzerer Scrollweg. */
  .gs-tafel { font-size: 0.9em; }
  .gs-tafel td, .gs-tafel th { padding: 3px 5px; }
  .gs-tafel .gs-wetten { min-width: 170px; }
  /* Original-Tabelle: Kopfzeile bleibt beim Scrollen sichtbar. */
  body[data-seite="original"] > table { max-height: 78vh; overflow: auto; }
  body[data-seite="original"] thead th { z-index: 5; }
  body[data-seite="original"] td { padding: 5px 8px; line-height: 1.4; }
  .von { font-size: 12px; display: inline-block; padding: 1px 6px; border-radius: 4px; }
  /* Ordner-Suche kaempft gegen eine Inline-Breite (180px) - dokumentierte
     Ausnahme mit !important, nur Optik, oninput bleibt. */
  #ordner_suche { width: 100% !important; margin-top: 6px; }
  /* Kopfstapel straffen, damit die Tabelle frueher beginnt. */
  .ordnerkarte { margin: 6px 0 8px; }
  .ordnerknoepfe { padding: 5px 8px; }
  .ordnerkopf { padding: 6px 10px; }
  #rohzaehler::before { margin: 4px 0; padding: 6px 10px; }
  .unter { margin-bottom: 4px; }
  /* Chat-Ansicht: mehr Hoehe fuer die Nachrichten. */
  #ans_chat > p.mini { display: none; }
  #ans_chat .chatliste { height: calc(100vh - 300px); }
  #ans_chat .medienleiste button, #ans_chat .medienleiste .fotoknopf {
    padding: 6px 12px; font-size: 13px; }
  #dmfenster .chatzeile { max-width: 88%; }
  /* Buchhaltungs-Karten: zwei nebeneinander. */
  .bb-grossreihe .bb-kachel.bb-gross { flex: 1 1 calc(50% - 6px); }
  /* Klapp-Knoepfe brauchen den Daumen. */
  .kl-knopf { flex: 1 1 calc(50% - 4px); min-height: 46px; }
}

}
/* ---- ENDE REDESIGN-SCHICHT 02.09.2026 ---- */


/* ============================================================
   DESIGN-REWORK 05.09.2026 ("besser stationiert")
   Loeschbare Schicht nach Karams Trennregel: diesen Block bis
   ENDE DESIGN-REWORK loeschen (und leiste.js samt der sechs
   script-Zeilen), dann sieht alles aus wie vorher und laeuft
   unveraendert. Nur Anordnung, Abstaende, Symmetrie - keine
   Funktion, kein Rechenweg, kein Druckpfad (alles in
   @media screen ausser der einen Druck-Ausblendung der neuen
   Fussleiste ganz unten).
   ============================================================ */
@media screen {

/* ---- 1. Kopfleiste: Seiten-Knoepfe links, Persoenliches rechts.
   Karam 05.09.: "die Symbole sollen richtig stehen, richtige
   bessere Knoepfe". Profil/Freunde/Chat/Klingel bilden rechts
   eine eigene, gleich grosse Knopf-Gruppe. ---- */
.navleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 8px; }
.navleiste .logo { margin-right: 6px; }
.navleiste .navknopf { display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; box-sizing: border-box; }
.navleiste .navknopf.aktiv { box-shadow: inset 0 -3px 0 currentColor; }
/* Die persoenliche Gruppe beginnt beim Freunde-Knopf */
#nav_freunde { margin-left: auto; }
#nav_freunde, #nav_nachrichten, #nav_profil, #wecker_knopf {
  min-width: 44px; min-height: 38px; display: inline-flex; align-items: center;
  justify-content: center; gap: 4px; }

/* ---- 2. Mein Bereich: die vier Block-Knoepfe als gleich grosse,
   symmetrische Kacheln ---- */
.mb-navi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mb-navi button { min-height: 48px; width: 100%; }
@media (max-width: 700px) {
  .mb-navi { grid-template-columns: repeat(2, 1fr); }
  .mb-navi button { min-height: 52px; }
}

/* ---- 3. Bereichs-Tabs mit Pin-Knopf (die Funktion steckt in
   mein.js/supa.js - hier nur die Optik) ---- */
#bereichtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#bereichtabs .tab-pin { width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #c9c9c9; background: #f6f6f6; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0; opacity: .55; }
#bereichtabs .tab-pin:hover { opacity: .85; }
#bereichtabs .tab-pin.aktiv { opacity: 1; background: #fff3c4;
  border-color: #d4a017; box-shadow: 0 0 0 2px rgba(212, 160, 23, .25); }
@media (max-width: 700px) {
  #bereichtabs .tab-pin { width: 44px; height: 44px; }
}

/* ---- 4. Buchhaltung: Symmetrie und Ordnung bei Menge.
   Gleiche Kartenhoehen, feste Raster, ruhige Abstaende; das
   Kassenbuch rollt ab 420px in sich (Kopfzeile bleibt stehen),
   damit die Seite bei vielen Eintraegen uebersichtlich bleibt. ---- */
.bb-kacheln { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: stretch; }
.bb-kacheln.bb-grossreihe { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.bb-kachel { display: flex; flex-direction: column; justify-content: center;
  height: 100%; box-sizing: border-box; }
.bb-kachelwert { font-variant-numeric: tabular-nums; }
.bb-teil { margin: 18px 0; }
.bb-urteil, .bb-klemmt, .bb-wem { margin: 14px 0; }
.bb-wemliste li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bb-wemzahl { font-variant-numeric: tabular-nums; margin-left: auto; }
.bb-kassenbuch .tabellenrand { max-height: 420px; overflow: auto; }
.bb-kassenbuch thead th { position: sticky; top: 0; background: #fff; z-index: 1;
  box-shadow: 0 1px 0 #ddd; }
@media (max-width: 700px) {
  .bb-kacheln, .bb-kacheln.bb-grossreihe { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 5. Die Fussleiste (leiste.js): nur am Handy sichtbar.
   Maximal fuenf grosse Knoepfe, weit auseinander (Karam:
   "dass man sich nicht vertippen kann"), alles andere oben. ---- */
#fussleiste { display: none; }
@media (max-width: 700px) {
  #fussleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    background: #1a2c50; box-shadow: 0 -2px 8px rgba(0, 0, 0, .25); }
  #fussleiste .fl-knopf { min-height: 56px; border: 0; background: none; color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border-radius: 10px; font: inherit; padding: 4px 0; }
  #fussleiste .fl-knopf.aktiv { background: rgba(255, 255, 255, .18); }
  #fussleiste .fl-zeichen { font-size: 22px; line-height: 1; position: relative; }
  #fussleiste .fl-text { font-size: 11px; }
  #fussleiste .fl-zeichen .badge { position: absolute; top: -6px; right: -14px; }
  body.hat-fussleiste { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* Was unten liegt, verschwindet oben - oben bleiben Handbuch,
     Erklaerungen, Freunde und die Klingel ("alles andere oben") */
  body.hat-fussleiste .navleiste a[href="original.html"],
  body.hat-fussleiste .navleiste a[href="kombis.html"],
  body.hat-fussleiste .navleiste a.navknopf[href="mein.html"]:not(.glocke),
  body.hat-fussleiste #nav_profil,
  body.hat-fussleiste #nav_nachrichten { display: none; }
}

/* ---- 6. Maennlichere Kennfarben (Karam 05.09.: "kein Lila").
   Nur die zwei Lila-Kennungen werden uebersteuert - die
   Tippgeber-Zeilenfarben (Blau/Rot/Gelb/Lila) sind BEDEUTUNG
   und bleiben unangetastet. ---- */
body[data-seite="handbuch"] { --kenn: #4e342e; --kennhell: #f3ece9; }
body[data-seite="mein"]     { --kenn: #8a5a00; --kennhell: #f7f1e3; }

/* ---- 7. Buttons mit mehr Griff: klare Kante, leichte Tiefe,
   kraeftige Schrift. Spezifischere Alt-Regeln (Marken, Pins,
   Farbwahlen) gewinnen weiter - hier ist nur der Grundton. ---- */
button {
  border-radius: 8px;
  border: 1px solid #33404d;
  background: linear-gradient(180deg, #fbfcfd, #e8ecf0);
  color: #1c242c;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 25, 35, .18);
}
button:hover { background: linear-gradient(180deg, #ffffff, #eef2f5); }
button:active { transform: translateY(1px); box-shadow: none; }
button.haupt {
  background: var(--kenn, #1a2c50);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kenn, #1a2c50) 86%, #ffffff), var(--kenn, #1a2c50));
  color: #fff; border-color: rgba(0, 0, 0, .35);
}
.navleiste .navknopf { font-weight: 600; }

/* ---- 8. Ruhiger, dunkel angehauchter Grund statt flacher Flaeche.
   Sehr dezent - Tabellen und Karten behalten ihr Weiss, die
   Bedeutungs-Farben (Zebra, Kombi-Farben) bleiben unberuehrt. ---- */
body {
  background: linear-gradient(180deg, #eef1f4 0%, #e4e9ee 55%, #dfe5eb 100%) fixed;
}

/* ---- 9. Schnell-Rechner in der Personen-Kasse ---- */
.pk-rechner { margin: 10px 0 16px; padding: 10px 12px; border: 1px solid #cfd6dd;
  border-left: 4px solid var(--kenn, #1a2c50); border-radius: 8px; background: #fff; }
.pk-rechner input.einsatz { width: 110px; }
.pk-rechnerwert { font-variant-numeric: tabular-nums; }

/* ---- 10. Erklaerungen + Handbuch: Kapitel als Karten, Tabellen
   mit Luft - volle Breite bleibt (Karams Regel). ---- */
body[data-seite="handbuch"] .kl-abschnitt,
body[data-seite="hilfe"] .kl-abschnitt {
  background: #fff; border: 1px solid #d5dae0; border-left: 4px solid var(--kenn);
  border-radius: 10px; padding: 4px 16px 10px; margin: 14px 0;
  box-shadow: 0 1px 3px rgba(15, 25, 35, .07);
}
body[data-seite="handbuch"] table.klein td, body[data-seite="handbuch"] table.klein th,
body[data-seite="hilfe"] table td, body[data-seite="hilfe"] table th {
  padding: 7px 10px; }
body[data-seite="handbuch"] .bsp { border-radius: 10px; }

/* ---- 11. Eingeklappte Erklaerkaesten NUR am Handy (leiste.js
   setzt .knapp/.zu; die Wirkung bleibt hier auf schmale Schirme
   begrenzt, damit ein breit gezogenes Fenster nichts abschneidet) ---- */
@media (max-width: 700px) {
  .knapp { cursor: pointer; position: relative; padding-right: 30px; }
  .knapp::before { content: "\25B4"; position: absolute; top: 6px; right: 9px;
    color: #6b7683; font-size: 13px; }
  .knapp.zu::before { content: "\25BE"; }
  .knapp.zu { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
}

/* ---- 12. Logo-Schnellmenue (logoknopf.js) ---- */
.logoknopf { cursor: pointer; }
.logoknopf:hover { filter: brightness(1.15); }
.logoknopf.dreht { transition: transform .85s ease-in-out; transform: rotate(360deg); }
#logomenue { position: absolute; top: calc(100% + 6px); left: 0; z-index: 950;
  min-width: 240px; padding: 8px; border: 1px solid #33404d; border-radius: 10px;
  background: #fff; box-shadow: 0 6px 22px rgba(10, 20, 30, .28);
  display: flex; flex-direction: column; gap: 4px; }
#logomenue a, #logomenue button { display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 7px; text-decoration: none; color: #1c242c;
  background: none; border: 0; box-shadow: none; font: inherit; font-weight: 600;
  cursor: pointer; }
#logomenue a:hover, #logomenue button:hover { background: #eef2f5; }
.lm-strich { border-top: 1px solid #d5dae0; margin: 3px 0; }
.lm-fassung { padding: 4px 12px 2px; font-size: 11.5px; color: #6b7683; }
@media (max-width: 700px) {
  #logomenue a, #logomenue button { min-height: 44px; }
}

/* ---- 13. Weg mit den Pillen (Karam 05.09.: "so haesslich und so
   pillenfoermig"): die oberen Knoepfe werden kantige Werkzeug-Knoepfe
   mit klarer Unterkante - Desktop UND Handy. Die Selektoren sind
   bewusst so lang wie die der Kopfleisten-Schicht von 02.09.,
   sonst verlieren sie dort. ---- */
body[data-seite] > .navleiste a.navknopf:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf) {
  border-radius: 5px;
  border: 1px solid #33404d;
  background: linear-gradient(180deg, #ffffff, #e9edf1);
  color: #1c242c;
  box-shadow: inset 0 -2px 0 rgba(51, 64, 77, .28), 0 1px 2px rgba(15, 25, 35, .15);
}
body[data-seite] > .navleiste a.navknopf:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf):hover {
  background: linear-gradient(180deg, #ffffff, #f0f3f6);
}
body[data-seite] > .navleiste a.navknopf.aktiv:not(.glocke):not(.adminknopf):not(.installknopf):not(.updateknopf) {
  background: var(--kenn, #1a2c50);
  color: #fff;
  border-color: var(--kenn, #1a2c50);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .38);
}
body[data-seite] > .navleiste a.navknopf.glocke,
body[data-seite] .navleiste #wecker_knopf,
body[data-seite] .navleiste #nav_profil,
#bereichtabs a.navknopf {
  border-radius: 5px;
}
.mb-navi button { border-radius: 5px; }

/* ---- 14. Handy-Header aufgeraeumt: Logo links, Handbuch und
   Erklaerungen fuellen die Mitte, Freunde und Klingel rechts -
   alles gleich hoch, 44px-Tippziele. ---- */
@media (max-width: 700px) {
  body.hat-fussleiste .navleiste { display: flex; flex-wrap: nowrap;
    align-items: stretch; gap: 6px; }
  body.hat-fussleiste .navleiste .logo { align-self: center; flex: 0 0 auto; }
  body.hat-fussleiste .navleiste a[href="schule.html"],
  body.hat-fussleiste .navleiste a[href="hilfe.html"] {
    flex: 1 1 0; justify-content: center; min-height: 44px; padding: 6px 4px; }
  body.hat-fussleiste #nav_freunde { margin-left: 0; flex: 0 0 auto;
    min-width: 44px; min-height: 44px; }
  body.hat-fussleiste #wecker_knopf, body.hat-fussleiste #nav_profil {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; }
}

/* ---- 15. Tabellen am Handy: geschmeidig quer rollen, ohne dass
   die ganze Seite mitzieht ---- */
@media (max-width: 700px) {
  .tabellenrand, .scrollbox {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* ---- 16. Der Chat als Messenger (chatmodus.js schaltet die
   Vollbild-Klasse; Funktion liegt unveraendert in glocke.js) ---- */
#glockenpanel.gp-voll { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  border-radius: 0; z-index: 1200; display: flex; flex-direction: column; }
#glockenpanel.gp-voll #gp-inhalt { flex: 1; min-height: 0; }
/* Mini-Modus (Rechtsklick): kompaktes Fenster unten rechts */
@media (min-width: 701px) {
  #glockenpanel:not(.gp-voll) { position: fixed; top: auto; left: auto;
    right: 16px; bottom: 16px; width: 400px; max-width: 92vw;
    height: 560px; max-height: 82vh; border-radius: 12px;
    box-shadow: 0 10px 34px rgba(10, 20, 30, .35);
    display: flex; flex-direction: column; overflow: hidden; }
  #glockenpanel:not(.gp-voll) #gp-inhalt { flex: 1; min-height: 0; }
}
@media (max-width: 700px) {
  /* Der Chat ist am Handy eine EIGENE SEITE (Karam 06.09.: "nichts
     dahinter"): das Panel deckt den GANZEN Schirm blickdicht ab,
     der Inhalt endet per Polster ueber der Fussleiste (die liegt
     mit z-index 1300 drueber). Die .gp-voll-Fassung steht MIT hier,
     sonst gewinnt ihre Bildschirm-Regel (hoehere Spezifitaet). */
  #glockenpanel, #glockenpanel.gp-voll { position: fixed; top: 0; left: 0; right: 0;
    bottom: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom));
    box-sizing: border-box; background: #fff;
    width: auto; height: auto; max-width: none; max-height: none;
    border-radius: 0; z-index: 1200; display: flex; flex-direction: column; }
  /* Solange der Chat offen ist, scrollt die Seite dahinter NICHT mit
     (chatmodus.js setzt die Klasse) - kein Durchblitzen, kein Ruckeln. */
  body.kt-chat-offen { overflow: hidden; }
  #glockenpanel #gp-inhalt { flex: 1; min-height: 0; }
  body.hat-fussleiste #fussleiste { z-index: 1300; }
  /* Kopfzeile klein, ohne "schliessen" - zu geht per Wisch oder
     Fussleiste */
  #glockenpanel .gp-kopf { padding: 4px 10px; font-size: 12px; min-height: 0; }
  #glockenpanel .gp-kopf .gp-zu { display: none; }
}

/* Der Grund des Chats: helles Grau mit leisen Wett-Zeichen
   (Ball, Wuerfel, Pokal) - wie bei WhatsApp, nur unsere Welt. */
#glockenpanel .gp-gespraech, #ans_chat .chatliste {
  background-color: #eceff1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23d3d9dd' stroke-width='2'%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Cpath d='M30 18v6M30 36v6M18 30h6M36 30h6'/%3E%3Crect x='86' y='16' width='26' height='26' rx='6'/%3E%3Ccircle cx='94' cy='24' r='2' fill='%23d3d9dd'/%3E%3Ccircle cx='104' cy='34' r='2' fill='%23d3d9dd'/%3E%3Cpath d='M22 96h24v10a12 12 0 0 1-24 0zM28 118h12M24 124h20'/%3E%3Ccircle cx='104' cy='104' r='13'/%3E%3Cpath d='M104 91v26M91 104h26'/%3E%3C/g%3E%3C/svg%3E");
}
/* Kopf des Gespraechs wie ein Messenger: dunkel, Name gross */
#glockenpanel .gp-gkopf { background: #1a2c50; color: #fff;
  padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
#glockenpanel .gp-gkopf .gp-kopfname { font-weight: 700; font-size: 15px; }
#glockenpanel .gp-gkopf .gp-kopfuser { opacity: .75; }
#glockenpanel .gp-zurueck, #glockenpanel .gp-ruf { background: none; border: 0;
  box-shadow: none; color: #fff; font-size: 18px; min-width: 40px; min-height: 40px;
  border-radius: 50%; }
#glockenpanel .gp-zurueck:hover, #glockenpanel .gp-ruf:hover { background: rgba(255, 255, 255, .15); }
/* Die Chat-Liste: grosse, klare Zeilen mit Person im Blick */
#glockenpanel .gp-freund { display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 8px 10px; border: 0; border-bottom: 1px solid #e3e7ea;
  border-radius: 0; background: #fff; box-shadow: none; text-align: left; }
#glockenpanel .gp-freund:hover { background: #f0f3f6; }
#glockenpanel .gp-freundname { font-weight: 700; display: flex; flex-direction: column; }
#glockenpanel .gp-freunduser { font-weight: 400; }
#glockenpanel .gp-freund .badge { margin-left: auto; }
#glockenpanel .gp-bereich .gp-bkreis { width: 40px; height: 40px; border-radius: 50%;
  background: var(--kenn, #1a2c50); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
/* Schreibzeile: runde Eingabe, klarer Senden-Bereich */
#glockenpanel .chateingabe, #ans_chat .chateingabe { background: #f0f2f5;
  padding: 8px; display: flex; align-items: center; gap: 6px; }
#glockenpanel .chateingabe input[type="text"], #glockenpanel .chateingabe input:not([type]),
#ans_chat .chateingabe input[type="text"], #ans_chat .chateingabe input:not([type]) {
  border-radius: 18px; padding: 9px 14px; border: 1px solid #cfd6dd; background: #fff; flex: 1; }

/* ---- 17b. Boni-Radar im Logo-Menue ---- */
#logomenue .lm-boni { background: linear-gradient(180deg, #fff8e6, #ffefc2);
  border: 1px solid #d4a017; }
.lm-bonifeld { padding: 2px 12px 8px; display: flex; flex-direction: column; gap: 8px;
  max-width: 340px; }
.lm-bonizeile { font-size: 12.5px; line-height: 1.45; font-weight: 400; }
/* Links im Boni-Text fliessen IM Satz mit (die Menue-Grundregel
   macht Links sonst zu eigenen Zeilen) */
#logomenue .lm-bonifeld a { display: inline; width: auto; padding: 0;
  font-weight: 600; text-decoration: underline; color: #1a5e97; }
#logomenue { max-height: 82vh; overflow: auto; }
.lm-boniwarn { font-size: 11.5px; color: #8a1f1f; background: #fdeeee;
  border-radius: 6px; padding: 6px 8px; }

/* ---- 17. Blitz-Rechner im Logo-Menue ---- */
.lm-rechnerfeld { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; }
.lm-rechnerfeld .lmr { width: 76px; padding: 7px 8px; border: 1px solid #cfd6dd;
  border-radius: 6px; font: inherit; }
.lm-ergebnis { width: 100%; font-weight: 700; padding-top: 2px;
  font-variant-numeric: tabular-nums; }

/* ---- 18. FLUESSIG am Handy (Karam 05.09.: "es laggt").
   Der fest stehende Verlaufs-Grund (background fixed) zwingt Handys
   bei jedem Scrollen zum Neuzeichnen - am Handy gibt es deshalb
   eine ruhige, FLACHE Flaeche. Alle Animationen hier nutzen nur
   transform/opacity (GPU, 60 fps) und sind kurz (Stufe 2). ---- */
@media (max-width: 700px) {
  body { background: #edf0f3; }
  /* Bereichswechsel im Chat: Gespraech schiebt von rechts herein,
     die Liste von links - wie bei Apple, 180 ms, nur transform. */
  #glockenpanel .gp-zeigt-gespraech .gp-gespraech { animation: gp-vonrechts .18s ease-out; }
  #glockenpanel .gp-zeigt-liste .gp-spalte { animation: gp-vonlinks .18s ease-out; }
}
#glockenpanel { animation: gp-auf .18s ease-out; }
@keyframes gp-auf { from { opacity: 0; transform: translateY(10px); } }
@keyframes gp-vonrechts { from { opacity: .4; transform: translateX(26px); } }
@keyframes gp-vonlinks { from { opacity: .4; transform: translateX(-26px); } }

/* ---- 19. Chat-Feinschliff ---- */
#glockenpanel .gp-e2e { font-size: 10.5px; opacity: .65; text-align: center; padding: 2px 0; }
#glockenpanel .gp-tippt { font-style: italic; font-size: 12px; }
#glockenpanel .chateingabe button.haupt, #ans_chat .chateingabe button.haupt {
  border-radius: 18px; padding: 9px 16px; }
#glockenpanel .gp-gkopf { padding: 9px 12px; gap: 10px; }


/* ---- 20. Admiral, der fuenfte Anbieter (06.09.2026): Weinrot als
   Hausfarbe (klar getrennt vom Warn-Rot #a00000), dieselben
   Selektormuster wie die vier alten Marken. ---- */
.m-ad { background: #8d1b2e; color: #fff; border-color: #5f1420; }
.ab-ad { background: #8d1b2e; color: #fff; border-color: #5f1420; }
.ak-ad { border-color: #8d1b2e; } .ak-ad .ak-name { color: #8d1b2e; }
.marke.m-ad::before { content: "AD"; color: #8d1b2e; }
.ak-ad .ak-name::before { content: "AD"; background: #8d1b2e; color: #fff; }
.s-wo:has(.s-wo-name.m-ad) { background: #8d1b2e; }
.s-wo:has(.s-wo-name.m-ad) .s-wo-name { color: #fff; }
.schein:has(.s-kopf .m-ad):not(:has(.niedrigkopf)) { border-top: 5px solid #8d1b2e; }
.schein:has(.s-kopf .m-ad) > .s-kopf:not(.niedrigkopf) { background-color: color-mix(in srgb, #8d1b2e 9%, #fff); border-bottom-color: #8d1b2e; }

/* ---- 21. Betway, der sechste Anbieter (11.09.2026): Betway-Gruen
   #00a826 als Hausfarbe, aber mit SCHWARZER Schrift statt weisser.
   WARUM SCHWARZ: es gibt schon zwei dunkle Gruen (Interwetten #0a7d3e,
   Bet365 #14805e). Ein drittes dunkles Gruen waere auf einem 11px-Chip
   nicht mehr zu unterscheiden. Mit hellem Grund und dunkler Schrift ist
   Betway der EINZIGE helle Chip von allen sechs und sofort erkennbar.
   Weisse Schrift auf #00a826 waere zu blass (Kontrast rund 2,8:1).
   Fuer Text auf weissem Grund (Kartenname) das dunklere #00751f.
   Sitzt bewusst im selben @media screen wie Admiral. ---- */
.m-bt { background: #00a826; color: #0b1f10; border-color: #00751f; }
.ab-bt { background: #00a826; color: #0b1f10; border-color: #00751f; }
.ak-bt { border-color: #00a826; } .ak-bt .ak-name { color: #00751f; }
.marke.m-bt::before { content: "BTW"; color: #00751f; }
.ak-bt .ak-name::before { content: "BTW"; background: #00a826; color: #0b1f10; border-color: #00751f; }
.s-wo:has(.s-wo-name.m-bt) { background: #00a826; }
.s-wo:has(.s-wo-name.m-bt) .s-wo-name { color: #0b1f10; }
.schein:has(.s-kopf .m-bt):not(:has(.niedrigkopf)) { border-top: 5px solid #00a826; }
.schein:has(.s-kopf .m-bt) > .s-kopf:not(.niedrigkopf) { background-color: color-mix(in srgb, #00a826 12%, #fff); border-bottom-color: #00a826; }

}
@media print { #fussleiste, #logomenue { display: none !important; } }

/* Bereichswechsel wie eine App: die alte Seite schiebt hinaus, die
   neue herein - RICHTUNGSECHT (leiste.js setzt die Klassen und
   merkt sich die Wischrichtung ueber den Seitenwechsel). Nur
   transform/opacity, nur am Handy, nicht bei reduzierter Bewegung.
   Die fruehere View-Transition-Fassung ist raus - Klassen laufen
   auf JEDEM Browser gleich. */
@media screen and (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  body.lw-raus-links  { animation: lwRausLinks .13s ease-in both; }
  body.lw-raus-rechts { animation: lwRausRechts .13s ease-in both; }
  body.lw-rein-rechts { animation: lwReinRechts .22s cubic-bezier(.2,.8,.3,1); }
  body.lw-rein-links  { animation: lwReinLinks .22s cubic-bezier(.2,.8,.3,1); }
  /* Ansichten in Mein Bereich (Chat/Profil) schieben ebenfalls */
  .mb-ansicht.offen { animation: lwReinRechts .2s cubic-bezier(.2,.8,.3,1); }
}
@keyframes lwRausLinks  { to   { opacity: .25; transform: translateX(-30px); } }
@keyframes lwRausRechts { to   { opacity: .25; transform: translateX(30px); } }
@keyframes lwReinRechts { from { opacity: .3;  transform: translateX(36px); } }
@keyframes lwReinLinks  { from { opacity: .3;  transform: translateX(-36px); } }
/* ---- ENDE DESIGN-REWORK 05.09.2026 ---- */


/* ======================================================================
   SCHEIN-FUSS IN ZWEI ZEILEN (15.09.2026) - KOMPLETT LOESCHBAR
   Karams Auftrag: "die Knoepfe nebeneinander in zwei Zeilen, auch wenn
   ich das Programm auf dem halben Bildschirm habe, symmetrisch, die
   sinnvollsten Knoepfe links, und sichtbar, bei welcher Person es
   gespeichert wurde."

   Reine Optik. Es wird KEIN Knopf hinzugefuegt, keiner entfernt, keine
   Reihenfolge im HTML geaendert - nur die Anordnung auf dem Schirm.
   Loescht man diesen Block, steht wieder alles in einer Reihe, und es
   funktioniert genau gleich weiter.

   Zeile 1: Einsatz, moeglicher Gewinn, Gebuehr (das Geld).
   Zeile 2: links die taeglichen Handgriffe, rechts das Seltene und das
            Gefaehrliche.
   ====================================================================== */

.s-fuss {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px 9px; padding: 8px 10px;
}

/* Der Umbruch zwischen den beiden Zeilen: ein leeres Element ueber die
   volle Breite. Alles mit kleinerer Ordnung landet darueber, alles mit
   groesserer darunter. Ohne diesen Trick braeuchte es zusaetzliche
   Kaesten im HTML - und das waere Funktion angefasst. */
.s-fuss::after { content: ""; flex-basis: 100%; height: 0; order: 5; }

/* ---- Zeile 1: das Geld ---- */
/* Die Beschriftungen ("Einsatz", "moeglich", "EUR") sind blosser Text und
   haben von sich aus Ordnung 0 - sie bleiben also oben bei ihren Feldern. */
.s-fuss .einsatz { order: 0; width: 92px; }
.s-fuss .gewinn  { order: 0; width: 104px; }
.s-fuss .gebuehr { order: 0; margin-left: 4px; }

/* ---- Zeile 2 links: was Karam jeden Tag braucht ---- */
.s-fuss button.merken      { order: 10; font-weight: bold; }
.s-fuss label.fotoknopf    { order: 11; }
.s-fuss button.fotoknopf   { order: 12; }

/* ---- Zeile 2 rechts: selten, rueckgaengig, gefaehrlich ---- */
/* margin-left:auto schiebt diese Gruppe an den rechten Rand - daher die
   Symmetrie: linke Gruppe links, rechte Gruppe rechts, Luft dazwischen. */
.s-fuss button[onclick^="scheinTeilen"]            { order: 20; margin-left: auto; }
.s-fuss button[onclick^="verlaufEintragLoeschen"]  { order: 21; }
.s-fuss button.knopfweg                            { order: 22; margin-left: 0; }

/* ---- Bei WEM liegt die Kombination: sichtbar, nicht kleingedruckt ---- */
.s-wer.mini {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
  padding: 8px 12px; border-top: 1px solid #cfe3cf;
  background: #eef7ee; color: #145c14;
  font-size: 13.5px; font-weight: 600;
}
.s-wer.mini b { color: #0b3d0b; font-size: 14.5px; }
/* Ohne Person steht dort ein Link nach Mein Bereich - nur dann. Das faellt
   aus dem Gruen heraus, weil eine Kombination ohne Person in der
   Abrechnung durchfaellt. Kann der Browser :has() nicht, bleibt es gruen -
   der Text sagt es trotzdem. */
.s-wer.mini:has(a) {
  background: #fff6e6; border-top-color: #e3c98a; color: #7a4e05;
}
.s-wer.mini:has(a) b { color: #5d3b03; }

/* ---- Halber Bildschirm: zwei Zeilen bleiben zwei Zeilen ---- */
/* Die Knoepfe teilen sich die Breite gleichmaessig auf, statt zu einer
   ausgefransten Treppe zu werden. */
/* Sechs Knoepfe passen auf dem halben Bildschirm nicht in EINE Reihe.
   Statt einer ausgefransten Treppe brechen sie dann sauber auf drei je
   Reihe um - und weil die Ordnung oben schon nach Bedeutung sortiert
   ist, steht dann von selbst das Taegliche in der einen Reihe
   (Verlauf, Foto, Ausschnitt) und das Seltene in der anderen
   (weiterer Anbieter, zurueck aus dem Verlauf, loeschen). */
@media (max-width: 1100px) {
  .s-fuss button, .s-fuss label.fotoknopf {
    flex: 1 1 28%; text-align: center; justify-content: center;
    /* Ohne min-width:0 darf ein Knopf nie schmaler werden als seine
       laengste Beschriftung - dann passen nur zwei statt drei in die
       Reihe. Die Beschriftung darf stattdessen umbrechen. */
    min-width: 0; white-space: normal; line-height: 1.2;
    align-self: stretch;
  }
  .s-fuss button[onclick^="scheinTeilen"] { margin-left: 0; }
}
@media (max-width: 620px) {
  .s-fuss button, .s-fuss label.fotoknopf { flex: 1 1 44%; }
}
/* Ganz schmal (Handy, vierteltel Bildschirm): das Geld darf auch umbrechen. */
@media (max-width: 560px) {
  .s-fuss .einsatz, .s-fuss .gewinn { width: 84px; }
  .s-fuss .gebuehr { order: 4; flex-basis: 100%; margin-left: 0; }
}
/* ---- ENDE SCHEIN-FUSS ZWEI ZEILEN ---- */

/* ---- "bei <Person>": der Klick-Chip hinter dem Verlauf-Knopf (loeschbar) ---- */
/* Karam (15.09.2026): sichtbar, direkt hinter "in den Verlauf", anklickbar. */
.s-fuss a.s-person, .s-drin a.s-person, .s-wer a.s-person {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  background: #1a7a1a; color: #fff; font-weight: bold; font-size: 12.5px;
  border: 1px solid #145c14; min-height: 30px; box-sizing: border-box;
}
.s-fuss a.s-person b, .s-drin a.s-person b, .s-wer a.s-person b { color: #fff; }
.s-fuss a.s-person:hover, .s-wer a.s-person:hover { background: #145c14; }
a.s-person.s-person-fehlt { background: #b7791f; border-color: #8a5a12; }
a.s-person.s-person-fehlt:hover { background: #8a5a12; }
/* Im Kopf-Merker und in der Fusszeile kleiner, damit die Zeile nicht springt. */
.s-drin a.s-person, .s-wer a.s-person { min-height: 22px; padding: 2px 9px; font-size: 12px; }
/* Im Knopf-Feld: direkt hinter "in den Verlauf" (gleiche Ordnung 10). */
.s-fuss a.s-person { order: 10; }
/* Halber Bildschirm: der Chip bekommt zwischen den beiden Knopfreihen
   eine eigene volle Zeile - gross, nicht zu uebersehen. */
@media (max-width: 1100px) {
  .s-fuss a.s-person { order: 15; flex-basis: 100%; justify-content: center; }
}