/* GENZ4GTM Outreach. Farben und Schrift von genz4gtm.com: Tinte #2C0B41, Pink #FF4D97,
   Gelb #FFD83D, Inter in schweren Schnitten, runde Knöpfe. Alles Markenbezogene steht
   in diesem Block und nirgends sonst. */
:root {
  color-scheme: light;
  --tinte: #2C0B41;
  --tinte-2: #6B527A;
  --tinte-3: #8E7A9A;
  --pink: #FF4D97;
  --pink-dunkel: #D92672;
  --pink-hell: #FFE6F0;
  --gelb: #FFD83D;
  --grund: #FBF8FD;
  --flaeche: #FFFFFF;
  --linie: #EAE2EF;
  --spur: #F1EAF5;

  /* Verlauf: vier Reihen in fester Reihenfolge. Geprüft auf Farbfehlsichtigkeit: in dieser
     Reihenfolge liegt das schwächste Nachbarpaar bei ΔE 10,6 (Ziel 8). Grün und Pink dürfen
     nie nebeneinander stehen, das Paar fällt bei Rot-Grün-Schwäche auf ΔE 2,3. Grün liegt
     unter 3:1 Kontrast auf Weiß, deshalb gibt es zum Diagramm immer die Tabelle. */
  --reihe-1: #4a3aa7;   /* Einladungen */
  --reihe-2: #1baf7a;   /* Angenommen */
  --reihe-3: #2a78d6;   /* Nachrichten */
  --reihe-4: #FF4D97;   /* Antworten, das Markenpink */

  /* Zustand: immer mit Symbol und Wort, nie Farbe allein */
  --gut: #0ca30c;      --gut-bg: #E8F6E8;
  --warn: #fab219;     --warn-bg: #FFF4D6;
  --krit: #d03b3b;     --krit-bg: #FBE7E7;
  --kalt: #7A8CA8;     --kalt-bg: #EDF1F6;

  --schrift: Inter, "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 15px/1.5 var(--schrift) }
[hidden] { display: none !important }
a { color: inherit }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px }
.ikon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* --- Kopf -------------------------------------------------------------------- */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5 }
.kopf-innen { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 8px 18px; flex-wrap: nowrap }
.marke { display: flex; align-items: baseline; gap: 8px; text-decoration: none }
.marke img { height: 30px; align-self: center }
.wort { font-weight: 900; font-size: 22px; letter-spacing: .02em; color: var(--gelb);
  -webkit-text-stroke: 1.5px var(--tinte); paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--pink), 3px 3px 0 var(--tinte) }
.unter { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-2) }
.reiter { display: flex; gap: 4px; flex: 1 0 auto }
.reiter a { text-decoration: none; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--tinte-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.reiter a:hover { background: var(--spur) }
.reiter a[aria-current="page"] { background: var(--tinte); color: #fff }
.zahl-chip { background: var(--pink); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; min-width: 20px; text-align: center }
.zahl-chip.warn { background: var(--krit) }
.ich { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tinte-2); white-space: nowrap; flex: none }
@media (max-width: 960px) {
  .kopf-innen { flex-wrap: wrap }
  .reiter { order: 3; flex-basis: 100%; flex-wrap: wrap }
  .reiter a { padding: 6px 10px; font-size: 13px }
  .ich { margin-left: auto }
}

main { max-width: 980px; margin: 0 auto; padding: 20px 16px 72px }
.bereich > * + * { margin-top: 14px }

/* --- Text --------------------------------------------------------------------- */
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 0 }
h3 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); margin: 18px 0 8px }
.titelzeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px }
.stand { font-size: 12px; color: var(--tinte-3) }
.leise { color: var(--tinte-2); font-size: 13px }
.fussnote { color: var(--tinte-2); font-size: 12px; margin: 8px 0 0; max-width: 72ch }
.leer { color: var(--tinte-2); text-align: center; padding: 24px 8px }
.ruhig { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 14px }
.warnzeile { width: fit-content; max-width: 100%; font-size: 13px; background: var(--warn-bg); border-radius: 8px; padding: 5px 10px; margin: 0 }

/* --- Knöpfe und Pillen -------------------------------------------------------- */
.knopf { border: 0; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 700; font-size: 13px; padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.knopf:hover { background: var(--pink-dunkel) }
.knopf.klein { font-size: 12px; padding: 5px 11px }
.knopf.zweit { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie) }
.knopf.zweit:hover { background: var(--spur) }
.knopf.leise { background: transparent; color: var(--tinte-2) }
.knopf.leise:hover { background: var(--spur) }
.knopf.dunkel { background: var(--tinte) }
.knopf.voll { width: 100%; justify-content: center; padding: 10px }
.knopf.mehr { display: flex; margin: 12px auto 0 }
.knopf:disabled { opacity: .45; cursor: default }

.pille { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 1px 9px; background: var(--spur); white-space: nowrap; flex: none }
.pille .ikon { width: 13px; height: 13px; stroke-width: 2.4; color: var(--tinte-2) }
.pille.heiss { background: var(--pink-hell) } .pille.heiss .ikon { color: var(--pink-dunkel) }
.pille.mittel, .pille.warn { background: var(--warn-bg) } .pille.mittel .ikon, .pille.warn .ikon { color: #A86F00 }
.pille.kalt { background: var(--kalt-bg) } .pille.kalt .ikon { color: #5B6E8C }
.pille.gut { background: var(--gut-bg) } .pille.gut .ikon { color: #0A850A }
.pille.krit { background: var(--krit-bg) } .pille.krit .ikon { color: var(--krit) }
/* Stufen: eigene Farben, damit "Call" nicht wie die Wärme "heiß" aussieht */
.pille.stufe-geantwortet { background: var(--spur) }
.pille.stufe-interessiert { background: #E6F0FB } .pille.stufe-interessiert .ikon { color: #2a78d6 }
.pille.stufe-termin { background: var(--gut-bg) } .pille.stufe-termin .ikon { color: #0A850A }
.pille.stufe-platziert { background: #FFF6CC } .pille.stufe-platziert .ikon { color: #8A6800 }
.pille.stufe-abgesagt { background: var(--kalt-bg) } .pille.stufe-abgesagt .ikon { color: #5B6E8C }
.knopf .ikon { width: 14px; height: 14px; stroke-width: 2.4 }
.reiter a .ikon { width: 15px; height: 15px }

/* --- Kennzahlen --------------------------------------------------------------- */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px }
.zahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 15px; text-decoration: none; display: block; min-width: 0 }
a.zahl:hover { border-color: var(--pink) }
.zahl .l { font-size: 12px; color: var(--tinte-2); font-weight: 600; display: flex; align-items: center; gap: 6px }
.zahl .l .ikon { color: var(--pink); width: 15px; height: 15px }
.zahl .w { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2 }
.zahl .s { font-size: 12px; color: var(--tinte-2) }

.panel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 15px }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.punkte li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; font-size: 14px }
.punkte .pille { margin-top: 1px; justify-self: start }

/* --- Aufklappen --------------------------------------------------------------- */
.stapel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 8px }
.stapel > .klappe + .klappe { border-top: 1px solid var(--linie) }
.klappe-zeile { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap }
.klappe-kopf { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  background: none; border: 0; border-radius: 10px; padding: 12px 8px; text-align: left; cursor: pointer }
.klappe-kopf:hover { background: var(--grund) }
.klappe-kopf b { font-weight: 800 }
.klappe-kopf > .ikon { color: var(--tinte-2) }
.pfeil { width: 7px; height: 7px; border-right: 2px solid var(--tinte-3); border-bottom: 2px solid var(--tinte-3); transform: rotate(-45deg); transition: transform .15s; flex: none; margin: 0 4px 0 2px }
.klappe-kopf[aria-expanded="true"] > .pfeil { transform: rotate(45deg) }
.teaser { margin-left: auto; color: var(--tinte-2); font-size: 13px }
.klappe-inhalt { padding: 0 8px 16px 31px }
.klappe-inhalt > * + * { margin-top: 10px }
.klappe.klein .klappe-kopf { padding: 6px 4px; font-size: 13px; color: var(--tinte-2) }
.klappe.klein .klappe-kopf b { font-weight: 700 }
.klappe.klein .klappe-kopf > .ikon { width: 14px; height: 14px }
.klappe.klein .klappe-inhalt { padding: 2px 0 6px 22px }
.panel > .klappe.klein { margin-top: 6px; margin-left: -4px }
.name { font-weight: 800 }
.konto-chip { font-size: 12px; font-weight: 800; border: 1.5px solid var(--tinte); border-radius: 999px; padding: 0 8px; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 4px }
.konto-chip .ikon { width: 12px; height: 12px; stroke-width: 2.4 }
.lage { display: inline-flex; align-items: center; gap: 5px }
.lage .ikon { width: 14px; height: 14px }
.schnell { display: flex; gap: 6px; padding-right: 6px }
@media (max-width: 560px) {
  .klappe-inhalt { padding-left: 8px }
  .schnell { padding: 0 0 10px 30px }
}

/* --- Trichter ----------------------------------------------------------------- */
.fzeile { display: grid; grid-template-columns: 110px 1fr 150px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px }
.fzeile .bahn { height: 14px }
.fzeile .bahn i { display: block; height: 100%; background: var(--pink); border-radius: 0 4px 4px 0; min-width: 2px }
.fzeile.zweit .bahn i { background: var(--reihe-3) }
.fzeile.dritt .bahn i { background: var(--reihe-1) }
.fzeile .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums }
.fzeile small { display: block; color: var(--tinte-2); font-size: 11px; font-weight: 500; line-height: 1.2 }
@media (max-width: 520px) { .fzeile { grid-template-columns: 90px 1fr 110px } }

/* --- Verlauf ------------------------------------------------------------------ */
.diagramm svg { display: block; width: 100%; height: auto; overflow: visible }
.diagramm .gitter { stroke: var(--linie); stroke-width: 1; opacity: .5 }
.diagramm .achse { fill: var(--tinte-3); font-size: 11px; font-family: var(--schrift) }
.diagramm .linie { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round }
.diagramm .punkt { stroke: var(--flaeche); stroke-width: 2 }
.diagramm .faden { stroke: var(--tinte-3); stroke-width: 1 }
.legende { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--tinte-2); align-items: center }
.legende span { display: inline-flex; align-items: center; gap: 6px }
.legende i { width: 14px; height: 2px; border-radius: 2px; display: inline-block }
.legende .knopf { margin-left: auto }
.tooltip { position: fixed; z-index: 20; background: var(--tinte); color: #fff; border-radius: 10px; padding: 8px 11px; font-size: 12px; pointer-events: none; box-shadow: 0 6px 20px rgba(44, 11, 65, .25); max-width: 260px }
.tooltip .t { font-weight: 700; margin-bottom: 4px }
.tooltip .r { display: grid; grid-template-columns: 14px auto 1fr; gap: 7px; align-items: center }
.tooltip .r i { height: 2px; border-radius: 2px }
.tooltip .r b { font-variant-numeric: tabular-nums }
.tooltip .r span { color: rgba(255, 255, 255, .72) }

/* --- Tabellen ----------------------------------------------------------------- */
.rollen { overflow-x: auto }
table { border-collapse: collapse; width: 100% }
table.schmal { width: auto; min-width: 320px }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--linie); white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums }
th:first-child, td:first-child { text-align: left; padding-left: 0 }
th { font-size: 10px; font-weight: 800; color: var(--tinte-2); text-transform: uppercase; letter-spacing: .1em }
tr.summe td { font-weight: 800; border-bottom: 0 }
tr.gruppe td { padding-top: 14px; font-size: 11px; font-weight: 800; color: var(--tinte-2); text-transform: uppercase; letter-spacing: .08em }
td.schlecht { color: var(--krit); font-weight: 700 }

/* --- Follow-up ---------------------------------------------------------------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.filter select, .filter input[type="search"], .tun select { border: 1px solid var(--linie); border-radius: 999px; padding: 5px 12px; background-color: var(--flaeche); font-size: 13px }
.filter input[type="search"] { flex: 1; min-width: 140px; max-width: 240px }
.wahl { display: inline-flex; background: var(--spur); border-radius: 999px; padding: 3px; flex-wrap: wrap }
.wahl button { border: 0; background: transparent; border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 700; color: var(--tinte-2); cursor: pointer; white-space: nowrap }
.wahl button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px rgba(44, 11, 65, .14) }

blockquote { margin: 0; padding: 8px 12px; background: var(--grund); border-radius: 10px; font-size: 14px; overflow-wrap: anywhere }
blockquote.aus { background: var(--pink-hell) }
blockquote small { display: block; color: var(--tinte-3); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px }
.grund { font-size: 13px; color: var(--tinte-2); margin: 0 }
.tun { display: flex; flex-wrap: wrap; gap: 6px }
.notiz-feld { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap }
.notiz-feld textarea, .vorlage textarea, .feld input, .feld textarea { flex: 1 1 260px; border: 1px solid var(--linie); border-radius: 10px; padding: 7px 10px; font-size: 13px; resize: vertical; background: var(--flaeche) }
.vorlage { display: grid; gap: 6px; justify-items: start }
.vorlage select { border: 1px solid var(--linie); border-radius: 999px; padding: 5px 12px; background-color: var(--flaeche); font-size: 13px }
.vorlage textarea { width: 100% }
.feld { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--tinte-2) }
.feld input, .feld textarea { font-weight: 400; color: var(--tinte); width: 100% }
.ich .einst { padding: 6px 8px }
.ich .neu-laden { padding: 6px 8px }
.neu-laden.dreht .ikon { animation: drehen 1s linear infinite }
@keyframes drehen { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .neu-laden.dreht .ikon { animation: none } .neu-laden.dreht { opacity: .5 } }
.ich .einst[aria-current="page"] { background: var(--tinte); color: #fff }
.verlauf { display: grid; gap: 6px }
.blase { max-width: 78%; padding: 7px 11px; border-radius: 12px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--grund) }
.blase.aus { margin-left: auto; background: var(--pink-hell) }
.blase time { display: block; font-size: 10px; color: var(--tinte-3); margin-top: 2px }

/* --- Konten ------------------------------------------------------------------- */
.regler { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px }
.regler.geaendert { border-color: var(--pink) }
.regler .kopfzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.regler .kopfzeile .knopf { margin-left: auto }
.regler .kopfzeile b { display: inline-flex; align-items: center; gap: 6px }
.regler .kopfzeile b .ikon { color: var(--pink) }
.schieber { display: grid; grid-template-columns: 56px 1fr 44px; gap: 10px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--tinte-2) }
.schieber output { text-align: right; font-weight: 800; font-size: 14px; color: var(--tinte); font-variant-numeric: tabular-nums }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0 }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: var(--bahn, var(--spur)) }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--bahn, var(--spur)) }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(44, 11, 65, .35); margin-top: -6px; cursor: grab }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(44, 11, 65, .35); cursor: grab }
.ereignisse { list-style: none; margin: 0; padding: 0; font-size: 13px }
.ereignisse li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--linie) }
.ereignisse time { color: var(--tinte-2); font-variant-numeric: tabular-nums }

.meldung { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; z-index: 30; box-shadow: 0 8px 24px rgba(44, 11, 65, .3); max-width: calc(100vw - 32px) }
.meldung.fehler { background: var(--krit) }

/* --- Anmeldung (Seite aus app-server.py) --------------------------------------- */
body.login { display: grid; place-items: center; min-height: 100vh }
body.login main { width: min(360px, calc(100vw - 32px)); padding: 0 }
body.login .marke { justify-content: center; margin-bottom: 18px }
body.login .wort { font-size: 34px }
body.login form { display: grid; gap: 12px }
body.login label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--tinte-2) }
body.login input { border: 1px solid var(--linie); border-radius: 10px; padding: 9px 12px; font-size: 15px }
body.login .fehler { color: var(--krit); font-size: 13px; margin: 0 }
.konto-wahl { margin-bottom: 6px }
.knopf.leise[aria-pressed="true"] { background: var(--pink-hell); color: var(--pink-dunkel) }

/* Verlauf, ruhige Kopfzeile */
.diagramm-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 4px }
.diagramm-kopf .legende { gap: 4px 14px; flex: 1 }
.textknopf { border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--tinte-3); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px }
.textknopf:hover { color: var(--tinte) }
.konten-filter { margin: 0 0 6px; font-size: 12px; color: var(--tinte-3) }
.konten-filter summary { cursor: pointer; width: fit-content }
.konten-filter .konto-wahl { margin: 6px 0 0 }

/* Auswahlfelder: eigener Pfeil mit Luft zum Rand, überall gleich */
select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E7A9A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px !important }
.wahlfeld { border: 1px solid var(--linie); border-radius: 999px; padding: 5px 14px; background-color: var(--flaeche); font-size: 13px; color: var(--tinte); list-style: none; white-space: nowrap }
summary.wahlfeld { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E7A9A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer }
summary.wahlfeld::-webkit-details-marker { display: none }
.menue { position: relative }
.menue-liste { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; min-width: 180px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(44, 11, 65, .08) }
.menue-liste label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer }
.menue-liste label:hover { background: var(--grund) }
.abstand { flex: 1 }
.zeitwahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 8px }
.zeitwahl .textknopf { text-decoration: none }
.zeitwahl .textknopf[aria-pressed="true"] { color: var(--tinte); font-weight: 700 }
.legende { margin: 2px 0 6px }
.nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px }
@media (max-width: 640px) { .nebeneinander { grid-template-columns: 1fr } }
.nebeneinander h3 { margin-top: 10px }
.arm { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 15px }
.arm-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px }
.arm-wert { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums }
.arm dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 10px 0 0; font-size: 13px }
.arm dt { color: var(--tinte-2) }
.arm dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums }
.trichter .fzeile { grid-template-columns: 100px 1fr 70px }
.trichter select.wahlfeld { max-width: 260px; text-overflow: ellipsis }

/* Eigene Dropdowns (menueWahl, kontenMenue): ein Aussehen für alle */
.menue { display: inline-block }
.menue-liste { max-height: min(60vh, 420px); overflow-y: auto; max-width: min(340px, 90vw) }
.menue-punkt { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px 6px 30px; border-radius: 8px; font-size: 13px; cursor: pointer; position: relative; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.menue-punkt:hover, .menue-punkt:focus-visible { background: var(--grund); outline: none }
.menue-punkt[aria-selected="true"] { font-weight: 700 }
.menue-punkt[aria-selected="true"]::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 5px; border-left: 2px solid var(--pink); border-bottom: 2px solid var(--pink); transform: translateY(-70%) rotate(-45deg) }
.menue-gruppe { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); padding: 10px 10px 4px }
.menue-liste label { padding-left: 10px }
.trichter .menue .wahlfeld { max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: block }
.stift { display: inline-flex; align-items: center; padding: 3px; margin-left: -4px; border-radius: 6px; color: var(--tinte-3); cursor: pointer; opacity: .55 }
.stift .ikon { width: 13px; height: 13px }
.stift:hover, .stift:focus-visible { opacity: 1; color: var(--tinte); background: var(--grund); outline: none }
.liegen { list-style: none; margin: 6px 0 0; padding: 0; max-width: 360px }
.liegen li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--linie) }

/* Eigener Dialog (frage) statt confirm/prompt des Browsers */
.dialog { border: 0; border-radius: 16px; padding: 22px 22px 18px; width: min(420px, calc(100vw - 32px)); background: var(--flaeche); color: var(--tinte); box-shadow: 0 20px 60px rgba(44, 11, 65, .25) }
.dialog::backdrop { background: rgba(44, 11, 65, .35) }
.dialog h2 { margin: 0 0 6px; font-size: 17px }
.dialog p { margin: 0 0 14px }
.dialog-feld { width: 100%; box-sizing: border-box; border: 1px solid var(--linie); border-radius: 10px; padding: 9px 12px; margin: 4px 0 16px; font-size: 15px }
.dialog-feld:focus { outline: 2px solid var(--pink); outline-offset: 1px }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px }
.knopf.gefahr { background: var(--pink-dunkel); color: #fff }

/* Belohnungen */
.serie { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; padding: 2px 10px; border-radius: 999px; background: #FFF1E6; color: #B4441F; cursor: default; white-space: nowrap }
.serie.aus { background: var(--grund); color: var(--tinte-3) }
.knopf.ton { padding: 4px 6px; font-size: 14px }
.plus-eins { position: fixed; z-index: 30; pointer-events: none; font-weight: 800; font-size: 18px; color: var(--pink); transform: translate(-50%, -50%); animation: plus-eins .9s ease-out forwards }
@keyframes plus-eins { to { transform: translate(-50%, -150%); opacity: 0 } }
.konfetti { position: fixed; inset: 0; z-index: 40; pointer-events: none }
.feier { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(44, 11, 65, .25); animation: feier-ein .2s ease-out }
.feier-karte { background: var(--flaeche); border-radius: 20px; padding: 26px 30px 22px; text-align: center; min-width: min(340px, calc(100vw - 32px)); box-shadow: 0 24px 70px rgba(44, 11, 65, .3); animation: feier-pop .35s cubic-bezier(.2, 1.4, .4, 1) }
.feier-titel { font-size: 26px; font-weight: 900; margin-bottom: 4px }
.feier-karte p { margin: 0 0 16px; color: var(--tinte-2) }
@keyframes feier-ein { from { opacity: 0 } }
@keyframes feier-pop { from { transform: scale(.7); opacity: 0 } }
.heiss-karte { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #FFF1F6; border: 1px solid #FFC9DE; border-radius: var(--radius); padding: 12px 15px; margin-bottom: 14px }
@media (prefers-reduced-motion: reduce) { .plus-eins, .feier, .feier-karte { animation: none } }
.serie .ikon { width: 14px; height: 14px; color: #E2541B }
.serie.aus .ikon { color: var(--tinte-3) }
.knopf.ton { display: inline-flex; align-items: center; color: var(--tinte-2) }
.feier-ikon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 999px; background: var(--pink-hell) }
.feier-ikon .ikon { width: 26px; height: 26px; color: var(--pink-dunkel) }
.heiss-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.heiss-text .ikon { color: var(--pink-dunkel) }
.wahl-zahl { margin-left: 6px; font-weight: 800; color: var(--pink-dunkel); font-variant-numeric: tabular-nums }
.legende .schnitt { font-weight: 800; color: var(--tinte); margin-left: 2px; font-variant-numeric: tabular-nums }
.umschalt { cursor: pointer; border-radius: 6px; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--tinte-3) }
.umschalt:hover, .umschalt:focus-visible { background: var(--grund); outline: none }

/* Erfolge */
a.serie { text-decoration: none; cursor: pointer }
.serie .heute { font-weight: 600; color: var(--tinte-2); margin-left: 4px; padding-left: 8px; border-left: 1px solid rgba(180, 68, 31, .25) }
.trophaeen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px }
.trophae { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; opacity: .75 }
.trophae.frei { opacity: 1; border-color: #FFC9DE; box-shadow: 0 6px 18px rgba(255, 77, 151, .08) }
.trophae p { margin: 0 0 4px }
.trophae-ikon { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--grund); margin-bottom: 4px }
.trophae-ikon .ikon { width: 22px; height: 22px; color: var(--tinte-3) }
.trophae.frei .trophae-ikon { background: var(--pink-hell) }
.trophae.frei .trophae-ikon .ikon { color: var(--pink-dunkel) }
.fortschritt { position: relative; width: 100%; height: 6px; border-radius: 999px; background: var(--grund); margin-top: auto }
.fortschritt i { display: block; height: 100%; border-radius: 999px; background: var(--pink) }
.fortschritt small { position: absolute; right: 0; top: 8px; font-size: 11px; color: var(--tinte-3) }
.trophae .fortschritt { margin-bottom: 14px }

/* Trophäenhalle */
.halle { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 14px }
.vitrine { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; font: inherit; color: inherit; transition: transform .15s, box-shadow .15s }
.vitrine:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(44, 11, 65, .08) }
.vitrine .medaille { width: 92px; height: 92px; margin-bottom: 4px; filter: drop-shadow(0 4px 8px rgba(44, 11, 65, .18)) }
.vitrine small { font-size: 12px; line-height: 1.3 }
.vitrine .fortschritt { width: 80% }
.medaille svg { width: 100%; height: 100%; display: block }
.medaille.gesperrt { filter: grayscale(1) opacity(.35) !important }
.halle-buehne { position: fixed; inset: 0; z-index: 36; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #2a0a3d, #0c0213); animation: feier-ein .2s ease-out }
.halle-karte { text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px }
.halle-karte h2 { margin: 18px 0 0; font-size: 24px }
.halle-karte .leise, .halle-karte .fussnote { color: rgba(255, 255, 255, .75) }
.halle-karte .knopf { margin-top: 10px }
.dreh-rahmen, .medaille, .vitrine { -webkit-user-select: none; user-select: none }

/* Neue Trophäe: dunkel, Scheinwerfer, Medaille fliegt herein */
.halle-buehne.neu { background: radial-gradient(circle at 50% 34%, rgba(255, 216, 61, .16) 0, rgba(255, 77, 151, .10) 14%, rgba(28, 6, 40, .97) 34%, rgba(10, 2, 16, .98) 70%); z-index: 45 }
.halle-buehne.neu .neu-titel { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gelb); margin-bottom: 8px; animation: feier-ein .6s ease-out }
@keyframes medaille-ein { from { transform: scale(.2) translateY(60px); opacity: 0 } }
.tun.mitte { justify-content: center; margin-top: 10px }
@media (prefers-reduced-motion: reduce) { .halle-buehne.neu .dreh-rahmen { animation: none } }

/* Firmenlogos und laufende Kampagnen */
.logos { display: inline-flex; align-items: center }
.logos > * + * { margin-left: -6px }
.logo { width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--linie); object-fit: contain; padding: 2px; box-sizing: border-box; flex: none }
.logo.klein { width: 18px; height: 18px; border-radius: 5px; padding: 1px }
.logo.gross { width: 38px; height: 38px; border-radius: 10px; padding: 4px }
.logo.ersatz { display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; color: #fff; background: var(--tinte); border-color: var(--tinte) }
.logo.gross.ersatz { font-size: 16px }
.menue-punkt.mit-logo { display: flex; align-items: center; gap: 8px }
.kampagnen-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 4px 0 8px }
.kampagnen-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px }
.kampagnen-karte.auslaufend { opacity: .7 }
.kampagnen-kopf { display: flex; align-items: center; gap: 12px }
.kampagnen-konten { display: flex; flex-wrap: wrap; gap: 6px }
.konto-chip.aus { border-color: var(--tinte-3); color: var(--tinte-3) }
.kampagnen-zahlen { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--tinte-2) }
.kampagnen-zahlen b { color: var(--tinte) }

/* Gebogene Medaille aus Streifen */
.dreh-rahmen { position: relative; perspective: 1000px; cursor: grab; touch-action: none }
.dreh-rahmen::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: -26px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(10px) }
.dreh-rahmen:active { cursor: grabbing }
.dreh { position: absolute; inset: 0; transform-style: preserve-3d }
.streifen { position: absolute; top: 0; transform-style: preserve-3d }
.flaeche { position: absolute; inset: 0; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden }
.flaeche.kante { backface-visibility: visible; -webkit-backface-visibility: visible }
.flaeche.licht { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .22) 54%, transparent 62%); background-size: 260% 100%; background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none }
.kampagnen-status { margin-left: auto; align-self: flex-start }
.klein-text { font-size: 12px; margin-top: -4px }
.pille.aus { background: var(--warn-bg); color: #8a5a00 }

/* Fortschritt in der Trophäenhalle: Balken und Zahl in einer Zeile */
.fortschritt-zeile { display: flex; align-items: center; gap: 8px; width: 88%; margin-top: 4px }
.fortschritt-zeile .fortschritt { flex: 1; margin: 0; height: 5px }
.fortschritt-zahl { font-size: 11px; font-weight: 600; color: var(--tinte-2); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1 }
.vitrine .fortschritt-zeile .fortschritt { width: auto }
.vitrine .fortschritt-zeile { margin-top: auto; padding-top: 6px }

/* --- Chats: Liste links, Gespräch rechts. Auf dem Telefon eins nach dem anderen. --- */
.chats { display: grid; grid-template-columns: 320px 1fr; gap: 0; margin-top: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); height: calc(100vh - 230px); min-height: 420px; overflow: hidden }
.chat-liste { border-right: 1px solid var(--linie); overflow-y: auto; padding: 6px }
.chat-zeile { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 9px 8px; border-radius: 10px; cursor: pointer }
.chat-zeile:hover { background: var(--spur) }
.chat-zeile.aktiv { background: var(--pink-hell) }
.chat-zeile.ungelesen b { font-weight: 900 }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--tinte); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center }
.chat-text { flex: 1; min-width: 0; display: grid; gap: 1px }
.chat-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 14px }
.chat-kopf b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chat-konto { flex: none; margin-right: auto; font-size: 10px; font-weight: 700; color: var(--tinte-2); background: var(--spur); border-radius: 999px; padding: 1px 7px; align-self: center }
.chat-kopf time { flex: none; font-size: 11px; color: var(--tinte-3) }
.chat-vorschau { font-size: 12px; color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chat-zeile.ungelesen .chat-vorschau { color: var(--tinte); font-weight: 600 }
.chat-liste .mehr { margin: 8px auto; display: flex }
.chat-faden { display: flex; flex-direction: column; min-width: 0; min-height: 0 }
.leer-faden { justify-content: center }
.faden-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linie); flex-wrap: wrap }
.faden-wer { flex: 1; min-width: 0; display: grid }
.faden-wer .leise { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.faden-kopf .zurueck { display: none }
.chat-verlauf { flex: 1; overflow-y: auto; padding: 14px; align-content: start }
.chat-verlauf .blase { font-size: 14px }
.tag-trenner { text-align: center; font-size: 11px; color: var(--tinte-3); margin: 8px 0 2px }
.chat-eingabe { border-top: 1px solid var(--linie); padding: 10px 14px; display: grid; gap: 8px }
.chat-eingabe textarea { width: 100%; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; font-size: 14px; resize: vertical; background: var(--flaeche); min-height: 64px }
.chat-eingabe .tun { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.chat-eingabe .tun .knopf:last-child { margin-left: auto }
.klein-text { font-size: 12px }
@media (max-width: 760px) {
  .chats { grid-template-columns: 1fr; height: calc(100vh - 200px) }
  .chats.faden-offen .chat-liste { display: none }
  .chats:not(.faden-offen) .chat-faden { display: none }
  .chat-liste { border-right: 0 }
  .faden-kopf .zurueck { display: inline-flex }
}
.avatar.gross { width: 40px; height: 40px }
.chat-marke { display: flex; margin: 1px 0 }
.chat-marke .pille { font-size: 11px; padding: 1px 7px }
.knopf.abbrechen { background: var(--tinte); position: relative; overflow: hidden }
.knopf.abbrechen::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pink); animation: countdown 2s linear forwards }
@keyframes countdown { from { width: 100% } to { width: 0 } }
@media (prefers-reduced-motion: reduce) { .knopf.abbrechen::after { animation: none } }
.kontext-menue { position: fixed; z-index: 30; min-width: 220px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 8px 24px rgba(44, 11, 65, .16); padding: 4px; display: grid }
.kontext-menue .menue-punkt { display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer }
.kontext-menue .menue-punkt:hover, .kontext-menue .menue-punkt:focus-visible { background: var(--spur); outline: none }
.gif-menue { position: relative }
.gif-menue .gif-liste { bottom: calc(100% + 6px); top: auto; width: 380px; max-width: min(380px, calc(100vw - 32px)); max-height: 440px; overflow-y: auto; padding: 8px; display: grid; gap: 8px }
.gif-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.gif-kachel { border: 1px solid var(--linie); border-radius: 8px; padding: 0; background: var(--grund); cursor: pointer; aspect-ratio: 1; overflow: hidden }
.gif-kachel:hover, .gif-kachel:focus-visible { border-color: var(--pink) }
.gif-kachel img { width: 100%; height: 100%; object-fit: cover; display: block }
.gif-gewaehlt { display: flex; align-items: center; gap: 8px }
.gif-gewaehlt img { height: 56px; border-radius: 8px }
.blase-gif { display: block; max-width: 220px; border-radius: 8px; margin-bottom: 4px }
@media (max-width: 560px) { .gif-menue .gif-liste { width: min(320px, calc(100vw - 32px)) } }
.gif-liste input[type="search"] { width: 100%; border: 1px solid var(--linie); border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--flaeche) }
.gif-titel { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin: 8px 0 4px }
.gif-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; bottom: -8px; background: var(--flaeche); padding: 6px 0 2px }
.entwurf-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 0 }
.entwurf-zeile:empty { display: none }
.chat-eingabe textarea.ki { border-color: var(--pink); background: var(--pink-hell) }
.entwurf-laeuft::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); margin-right: 6px; animation: puls 1s ease-in-out infinite }
@keyframes puls { 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .entwurf-laeuft::before { animation: none } }