/* 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: #2B0B3F;
  --tinte-2: #6B527A;
  --tinte-3: #8E7A9A;
  --pink: #FF4F9A;
  --pink-dunkel: #D92672;
  --pink-hell: #FFE6F0;
  --gelb: #FFD93D;
  --grund: #FFFFFF;
  --flaeche: #FFFFFF;
  --linie: rgba(43, 11, 63, .10);
  --spur: #F5F3F7;

  /* 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: #FF4F9A;   /* 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: 24px;
}

* { 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: none; margin: 0; padding: 12px 40px; 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: 1 1 100%; min-width: 0; flex-wrap: wrap }
  .reiter a { padding: 6px 10px; font-size: 13px }
  .ich { margin-left: auto }
}

main { max-width: none; margin: 0; padding: 28px 40px 80px }
.bereich > * + * { margin-top: 18px }

/* --- Text --------------------------------------------------------------------- */
h3 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); margin: 18px 0 8px }
.stand { font-size: 12px; color: var(--tinte-3); white-space: nowrap }
.stand-fuss { text-align: right; margin: 6px 0 0 }
.leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.leise { color: var(--tinte-2); font-size: 13px }
.leer { color: var(--tinte-2); text-align: center; padding: 24px 8px }
.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.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.warn { background: var(--warn-bg) }
.pille.gut { background: var(--gut-bg) }
.pille.krit { background: var(--krit-bg) }
/* 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-termin { background: var(--gut-bg) }
.pille.stufe-platziert { background: #FFF6CC }
.pille.stufe-abgesagt { background: var(--kalt-bg) }
.knopf .ikon { width: 14px; height: 14px; stroke-width: 2.4 }

/* --- Kennzahlen --------------------------------------------------------------- */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px }
.zahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 9px 13px; 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 .w { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2 }
.zahl.schlecht .w { color: var(--krit) }
.zahl .s { font-size: 12px; color: var(--tinte-2) }

.panel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 22px }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.punkte li { position: relative; padding-left: 16px; font-size: 14px }
.punkte li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--tinte-3) }
.punkte li.krit::before { background: var(--krit) }
.punkte li.warn::before { background: var(--warn) }

/* --- Aufklappen --------------------------------------------------------------- */
.stapel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 4px 12px }
.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: 9px 8px; text-align: left; cursor: pointer }
.klappe-kopf:hover { background: var(--grund) }
.klappe-kopf b { font-weight: 800 }
.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-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 }
.schnell { display: flex; flex-wrap: wrap; 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.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% }
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 }

/* --- Filter und Gesprächs-Bausteine ------------------------------------------- */
.filter { display: flex; flex-wrap: wrap; gap: 10px 12px; 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: 16px; padding: 3px; flex-wrap: wrap; max-width: 100% }
.wahl-zahl { margin-left: 5px; font-weight: 800; color: var(--pink-dunkel); font-variant-numeric: tabular-nums }
.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 }
.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 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 .einst[aria-current="page"] { background: var(--tinte); color: #fff }
.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 } }
.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 (Einstellungen) --------------------------------------------------- */
.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 }
.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 }

/* 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 }

/* 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 }

/* Eigene Dropdowns (menueWahl, kontenMenue): ein Aussehen für alle */
.menue { display: inline-block }
details.menue:not([open]) > .menue-liste { display: none }
.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 }


/* 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) }

.kampagnen-status { margin-left: auto; align-self: flex-start }
.pille.aus { background: var(--warn-bg); color: #8a5a00 }

/* --- Antworten: Liste links, Gespräch rechts. Auf dem Telefon eins nach dem anderen. --- */
.chats { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; margin-top: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); height: calc(100vh - 150px); min-height: 420px; overflow: hidden }
.chat-liste { border-right: 1px solid var(--linie); overflow-y: auto; padding: 6px }
.chat-zeile { min-width: 0; display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 12px 10px; border-radius: 12px; 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; grid-template-columns: minmax(0, 1fr); 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 }
.marke-entwurf, .marke-heiss { font-size: 11px; font-weight: 800; margin-right: 6px; color: var(--pink-dunkel) }
.marke-entwurf { color: #2a78d6 }
.marke-nicht { font-size: 11px; font-weight: 700; margin-right: 6px; color: #c8414b }
.nicht-zeile { font-size: 12px; color: #c8414b; margin: 0 0 6px }
.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 }
@media (max-width: 760px) {
  .chats { grid-template-columns: minmax(0, 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 }
.kontext-menue .menue-punkt { padding: 8px 10px; font-size: 14px }
.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: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 } }

/* --- Heute (in den Details des Stands) ---------------------------------------- */
.heute-liste { list-style: none; margin: 0; padding: 0 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius) }
.heute-zeile { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--linie) }
.heute-zeile:last-child { border-bottom: 0 }
.heute-zeile time { color: var(--tinte-2); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px }
.heute-inhalt { min-width: 0 }
.heute-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px }
.heute-art { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--tinte-2) }
.heute-text { margin-top: 4px; font-size: 13px; color: var(--tinte-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer }
.heute-text.offen { -webkit-line-clamp: unset; display: block }
.heute-text.rein { color: var(--tinte); background: var(--grund); border-radius: 10px; padding: 6px 10px }
@media (max-width: 560px) { .heute-zeile { grid-template-columns: 40px 1fr } .heute-zeile > .schnell { grid-column: 2; padding: 0 } }
/* Die ganze Zeile öffnet das Gespräch */
.heute-zeile.klickbar { cursor: pointer; border-radius: 8px }
.heute-zeile.klickbar:hover { background: var(--spur) }
.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 }

/* --- Antworten ------------------------------------------------------------------ */
.faden-ort { display: contents }
.faden-tun { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--linie) }
.chat-vorschau .marke-heiss:empty { display: none }
.liste-umschalt { display: block; margin: 4px 8px 8px }
.kurz-legende { display: grid; gap: 3px; margin: 2px 2px 8px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; font-size: 12px; color: var(--tinte-2) }
.kurz-legende span { display: flex; gap: 8px; align-items: baseline }
kbd { font: 700 11px var(--schrift); min-width: 42px; color: var(--tinte); background: var(--spur); border-radius: 5px; padding: 0 5px; text-align: center }
.stapel.innen { border: 0; padding: 0 }
.ich .einst { position: relative }
.ich .einst .zahl-chip { position: absolute; top: -4px; right: -6px; padding: 0 5px; min-width: 16px; font-size: 10px }
.dialog textarea.dialog-feld { resize: vertical; font-size: 14px }

/* Automatische Antworten: nur da, wenn etwas offen ist */
.auto-block { border: 1px solid #FFC9DE; background: #FFF6FA; border-radius: 12px; padding: 8px 10px; margin: 2px 2px 8px; display: grid; gap: 8px }
.auto-titel { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 13px }
.auto-eintrag + .auto-eintrag { border-top: 1px solid #FFC9DE; padding-top: 8px }
.auto-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px }
.auto-kopf .textknopf.name { font-size: 13px; color: var(--tinte); text-decoration: none; font-weight: 800 }
.auto-uhr { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px }
.auto-text { margin: 4px 0 6px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere }

/* Rückgängig nach „Senden“: acht Sekunden, dann geht die Nachricht raus */
.rueckgaengig { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 31; display: flex; align-items: center; gap: 14px; overflow: hidden;
  background: var(--tinte); color: #fff; border-radius: 999px; padding: 9px 10px 9px 18px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(44, 11, 65, .3); max-width: calc(100vw - 32px) }
.rg-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rg-knopf { border: 0; border-radius: 999px; background: var(--gelb); color: var(--tinte); font-weight: 800; font-size: 13px; padding: 5px 12px; cursor: pointer; flex: none }
.rg-uhr { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pink); animation: countdown linear forwards }
@keyframes countdown { from { width: 100% } to { width: 0 } }
@media (prefers-reduced-motion: reduce) { .rg-uhr { animation: none } }
.rueckgaengig:not([hidden]) ~ .meldung { bottom: 76px }

/* Telefon: Liste, ein Tipp öffnet die Karte */
.karte { display: grid; gap: 12px }
.karte-kopf { display: flex; align-items: center; gap: 10px }
.karte-kopf .faden-wer { flex: 1; min-width: 0; display: grid }
.karte blockquote { font-size: 15px; white-space: pre-wrap; max-height: 40vh; overflow-y: auto }
.karte textarea { width: 100%; border: 1px solid var(--linie); border-radius: 10px; padding: 10px; font-size: 16px; resize: vertical; background: var(--flaeche); min-height: 140px }
.karte textarea.ki { border-color: var(--pink); background: var(--pink-hell) }
.karte-knoepfe { display: grid; gap: 8px }
.karte-knoepfe .knopf { font-size: 15px; padding: 13px }
@media (max-width: 559px) {
  .chats { height: auto; min-height: 0; overflow: visible }
  .chat-liste { overflow: visible }
  .filter input[type="search"] { max-width: none }
}

/* Stand: oben die Calls der Woche */
.woche { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 4px }
.woche-calls { display: flex; align-items: baseline; gap: 10px }
.woche-calls b { font-size: 34px; line-height: 1; color: var(--pink-dunkel) }
.woche-rest { color: var(--tinte-2); font-size: 13px }
.woche-rest .gut { color: var(--gut); font-weight: 600 }
.woche-konten { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--tinte-2) }

.call-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px }
.call-liste li { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--linie) }
.call-liste li:last-child { border-bottom: 0 }
.call-status { color: var(--tinte-2) }
.call-noshow .call-status, .woche-rest .schlecht { color: var(--krit); font-weight: 600 }
.call-erschienen .call-status { color: var(--gut) }
.knopf.an { border-color: var(--tinte); font-weight: 700 }
@media (max-width: 559px) { .call-liste li { grid-template-columns: 1fr auto; } .call-liste .schnell { grid-column: 1 / -1 } }

/* Einstellungen: Automatik von A bis Z */
.funnel { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 6px }
.funnel li { line-height: 1.4 }
.funnel b { display: inline-block; min-width: 110px; margin-right: 8px }
@media (max-width: 559px) { .funnel b { display: block; min-width: 0 } }
.rollen.automatik th, .rollen.automatik td { text-align: left; vertical-align: top; white-space: normal }

/* Pipeline als Board */
.board-rahmen { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start }
.board-rahmen.mit-tafel { grid-template-columns: 1fr 300px }
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start }
.spalte { flex: 1 0 220px; min-width: 220px; background: var(--spur); border-radius: var(--radius); padding: 10px; border-top: 3px solid var(--linie) }
.spalte.ziel { outline: 2px dashed var(--pink); outline-offset: -2px }
.spalte header { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 8px; font-size: 14px }
.spalte-karten { display: grid; gap: 10px; max-height: calc(100vh - 210px); overflow-y: auto }
.stufe-geantwortet { border-top-color: #9aa3b5 } .stufe-interessiert { border-top-color: var(--reihe-3) }
.stufe-termin { border-top-color: var(--pink) } .stufe-platziert { border-top-color: var(--gut) } .stufe-abgesagt { border-top-color: var(--krit) }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px; cursor: grab; display: grid; gap: 8px; box-shadow: 0 1px 2px rgba(44, 11, 65, .06) }
.karte:hover { box-shadow: 0 2px 8px rgba(44, 11, 65, .12) }
.karte.aktiv { border-color: var(--pink) }
.karte.zieht { opacity: .5 }
.karte-name { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0 }
.karte-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.karte-rolle { font-size: 12px; color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.karte-fuss { display: flex; gap: 6px; align-items: center; font-size: 11px }
.karte-fuss .leise { margin-left: auto }
.karte-konto { background: var(--spur); border-radius: 6px; padding: 1px 6px; color: var(--tinte-2) }
.karte-ats { background: var(--gut-bg); color: var(--gut); border-radius: 6px; padding: 1px 6px; font-weight: 600 }
.punkt { width: 8px; height: 8px; border-radius: 50%; flex: none }
.punkt.heiss { background: var(--pink) }
.tafel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; position: sticky; top: 70px }
.tafel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.pipe-zahlen { font-size: 13px }
@media (max-width: 900px) { .board-rahmen.mit-tafel { grid-template-columns: 1fr } .tafel { position: static } }
@media (max-width: 559px) { .spalte { flex-basis: 78vw; min-width: 78vw } }
.karte-kopf { display: flex; gap: 10px; align-items: center; min-width: 0 }
.karte-kopf .avatar { width: 32px; height: 32px; font-size: 11px }
.karte-wer { min-width: 0; display: grid; gap: 1px }
.zahl { padding: 14px 18px }

/* Desktop: Stand füllt die ganze Breite, Kacheln im Raster (Renzo, 15.10.2026: "Let it breathe") */
.stand-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; align-items: stretch }
.s-woche { grid-column: span 5; padding: 22px 26px }
.s-zahlen { grid-column: span 7; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }
.s-zahlen .zahl { display: flex; flex-direction: column; justify-content: center; padding: 22px 26px }
.s-zahlen .zahl .w { font-size: 44px; line-height: 1.1 }
.s-heute { grid-column: span 8 }
.s-hinweise { grid-column: span 4 }
.s-voll { grid-column: 1 / -1 }
.woche-calls b { font-size: 56px }
@media (max-width: 1200px) { .s-woche, .s-zahlen, .s-heute, .s-hinweise { grid-column: 1 / -1 } }
@media (max-width: 559px) {
  main { padding: 16px 16px 72px } .kopf-innen { padding: 10px 16px }
  .s-zahlen { grid-template-columns: 1fr } .s-zahlen .zahl .w { font-size: 32px }
}

.auto-eintrag { cursor: pointer; border-radius: 10px; transition: background .15s }
.auto-eintrag:hover { background: var(--pink-hell) }
.auto-eintrag.aktiv { background: var(--pink-hell); box-shadow: inset 3px 0 0 var(--pink) }
.auto-gif { max-height: 90px; border-radius: 8px; display: block; margin: 4px 0 8px }

/* Markenicons */
.marke-icon { width: 22px; height: 22px; flex: none; border-radius: 6px; vertical-align: middle }
.marke-icon.im-reiter { width: 20px; height: 20px; flex: none; margin: 0 }
.marke-icon.gross { width: 52px; height: 52px; border-radius: 12px; align-self: center }
.marke-icon.riesig { width: 120px; height: 120px; border-radius: 24px }
.zahl .l { display: flex; align-items: center; gap: 8px }
.zahl .l .marke-icon { width: 26px; height: 26px }
h3 .marke-icon { width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px }
.spalte-titel, .panel-titel { display: inline-flex; align-items: center; gap: 8px }
.panel-titel { margin-bottom: 10px }
.klappe-kopf .marke-icon { margin-right: 2px }
.leer-gross { display: grid; justify-items: center; gap: 14px; text-align: center }
.woche-calls { align-items: center; gap: 14px }

/* Pipeline-Board v2 (15.10.2026): breite Spalten, Luft, Alter, Overlay statt Seitenleiste */
.pipe-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 48px }
.pipe-zahlen { display: flex; gap: 22px; font-size: 15px; color: var(--tinte-2) }
.pipe-zahlen b { color: var(--tinte); font-size: 20px; margin-right: 4px }
.pipe-zahlen .rot b, .pipe-zahlen .rot { color: var(--krit) }
.schalter.an { background: var(--tinte); color: #fff; border-color: var(--tinte) }
.board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; scroll-snap-type: x proximity }
.spalte { flex: 1 1 320px; min-width: 280px; padding: 12px; scroll-snap-align: start }
.spalte header { padding: 4px 6px 12px; font-size: 15px }
.spalte-zahl { font-weight: 700; color: var(--tinte-2); background: var(--flaeche); border-radius: 999px; padding: 1px 10px; font-size: 13px }
.spalte-karten { gap: 12px; max-height: calc(100vh - 230px) }
.karte { padding: 14px 16px; gap: 10px; border-radius: 14px; position: relative }
.karte.gelb { border-left: 4px solid var(--warn) }
.karte.rot { border-left: 4px solid var(--krit) }
.karte-kopf .avatar { width: 36px; height: 36px; font-size: 12px }
.karte-name { font-size: 15px }
.karte-rolle { font-size: 13px }
.karte-fuss { font-size: 12px; gap: 8px }
.naechste { margin-left: auto; white-space: nowrap; font-weight: 600 }
.naechste.sie { color: var(--tinte-2); font-weight: 500 }
.naechste.wir { color: var(--pink-dunkel) }
.naechste.wir.gelb { color: #b07a00 }
.naechste.wir.rot { color: var(--krit) }
.naechste.call { color: var(--reihe-3) }
.karte-aktionen { display: none; gap: 6px; flex-wrap: wrap }
.karte:hover .karte-aktionen, .karte:focus-within .karte-aktionen { display: flex }
.spalte-leer { display: grid; justify-items: center; gap: 10px; padding: 28px 8px; color: var(--tinte-2); font-size: 13px; text-align: center }
.marke-icon.blass { width: 44px; height: 44px; opacity: .35; border-radius: 10px }
.mehr-karten { justify-self: center; padding: 6px }
.abgesagt-zone { display: none; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, 90vw); height: 64px; border: 2px dashed var(--krit); border-radius: 16px; background: var(--krit-bg); color: var(--krit); font-weight: 700; place-items: center; z-index: 30 }
body.zieht-karte .abgesagt-zone { display: grid }
.abgesagt-zone.ziel { background: var(--krit); color: #fff }
.tafel-hinter { position: fixed; inset: 0; background: rgba(43, 11, 63, .18); z-index: 40; display: flex; justify-content: flex-end }
.tafel-hinter .tafel { position: static; width: min(440px, 100vw); height: 100%; overflow-y: auto; border-radius: 0; border: 0; border-left: 1px solid var(--linie); padding: 22px; gap: 14px; box-shadow: -12px 0 32px rgba(44, 11, 65, .12) }
.tafel-kopf { gap: 12px }
.tafel-wer { flex: 1; min-width: 0 }
.tafel-naechste { display: flex; justify-content: space-between; align-items: center; background: var(--spur); border-radius: 10px; padding: 10px 12px }
.tafel-naechste .naechste { margin-left: 0 }
.tafel-verlauf { display: grid; gap: 8px; max-height: 42vh; overflow-y: auto }
.tafel-antwort textarea { width: 100%; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; font-size: 14px; resize: vertical; background: var(--flaeche) }
.tafel-antwort .tun { justify-content: space-between; margin-top: 6px }
.tafel-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: 12px }
@media (max-width: 559px) { .spalte { flex: 0 0 86vw; min-width: 86vw } .karte-aktionen { display: flex } }

/* --- Seitenleiste (Renzo, 15.10.2026: wie Close, viel einfacher) ------------------------- */
:root { --seite-breit: 236px; --seite-schmal: 68px }
.kopf { display: none }
.seite { position: fixed; inset: 0 auto 0 0; width: var(--seite-breit); background: var(--tinte); color: rgba(255, 255, 255, .86);
  display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 14px; z-index: 20; transition: width .18s ease }
.seite .marke { padding: 4px 10px 22px; flex-wrap: wrap; row-gap: 2px }
.seite .unter { color: rgba(255, 255, 255, .55) }
.seite .wort { -webkit-text-stroke: 1.5px #000 }
.seite-nav { display: grid; gap: 2px }
.seite-nav a, .seite-knopf { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: rgba(255, 255, 255, .82);
  text-decoration: none; font-weight: 600; font-size: 15px; background: none; border: 0; cursor: pointer; text-align: left; width: 100%; font-family: inherit }
.seite-nav a:hover, .seite-knopf:hover { background: rgba(255, 255, 255, .08); color: #fff }
.seite-nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff }
.seite-nav .zahl-chip { margin-left: auto }
.seite-nav .marke-icon.im-reiter { width: 22px; height: 22px }
.seite-knopf .ikon { width: 20px; height: 20px; margin: 0 1px }
.seite-knopf.dreht .ikon { animation: drehen 1s linear infinite }
.seite-trenner { height: 1px; background: rgba(255, 255, 255, .12); margin: 14px 10px }
.seite-fuss { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255, 255, 255, .12) }
.ich-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; flex: none; text-transform: uppercase }
.ich-wer { display: grid; min-width: 0; font-size: 13px; color: #fff }
.ich-wer .textknopf { color: rgba(255, 255, 255, .6); font-size: 12px; padding: 0; text-align: left }
.seite-zu-knopf { margin-left: auto; background: none; border: 0; color: rgba(255, 255, 255, .6); font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: 6px }
.seite-zu-knopf:hover { background: rgba(255, 255, 255, .08); color: #fff }
main { margin-left: var(--seite-breit); transition: margin-left .18s ease }
.meldung, .rueckgaengig { margin-left: calc(var(--seite-breit) / 2) }
/* eingeklappt: nur Icons */
body.seite-zu .seite { width: var(--seite-schmal); padding-left: 10px; padding-right: 10px }
body.seite-zu main { margin-left: var(--seite-schmal) }
body.seite-zu .seite-text, body.seite-zu .seite .unter, body.seite-zu .seite .wort { display: none }
body.seite-zu .seite .marke img { height: 22px }
body.seite-zu .seite-nav a, body.seite-zu .seite-knopf { justify-content: center; padding: 10px 0; position: relative }
body.seite-zu .seite-nav .zahl-chip { position: absolute; top: 2px; right: 2px; font-size: 9px; padding: 0 4px; min-width: 0 }
body.seite-zu .seite-fuss { flex-direction: column; padding-left: 0; padding-right: 0 }
body.seite-zu .seite-zu-knopf { margin: 0; transform: scaleX(-1) }
/* Handy: Leiste als schmale Zeile oben */
@media (max-width: 759px) {
  .seite { position: sticky; top: 0; inset: auto; width: auto; height: auto; flex-direction: row; align-items: center; padding: 8px 10px; gap: 4px; overflow-x: auto }
  .seite .marke { padding: 0 8px 0 0 } .seite .unter, .seite-trenner, .seite-text, .ich-wer, .seite-zu-knopf { display: none }
  .seite-nav { display: flex; gap: 2px } .seite-nav a, .seite-knopf { padding: 8px; width: auto }
  .seite-fuss { margin: 0 0 0 auto; border: 0; padding: 0 }
  main, body.seite-zu main { margin-left: 0 } .meldung, .rueckgaengig { margin-left: 0 }
}
.seite-nav .ikon { width: 20px; height: 20px; margin: 0 1px }

/* --- Marke (15.10.2026, nach dem GENZ4GTM-Designsystem und genz4gtm.com/app) ------------------ */
/* Weiße Seitenleiste, lila Text, Lucide-Linienicons, graue Gruppen-Überschriften, aktiver Punkt hellgrau. */
.seite { background: #fff; color: var(--tinte); border-right: 1px solid var(--linie); padding: 22px 16px 14px }
.seite .marke { padding: 0 8px 18px; margin: 0 -16px 10px; padding-left: 24px; border-bottom: 1px solid var(--linie) }
.seite .marke img { height: 36px }
.seite .unter { display: none }
.seite-gruppe { font-size: 11px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: rgba(43, 11, 63, .45); padding: 14px 12px 8px }
.seite-nav a, .seite-knopf { color: var(--tinte); font-weight: 700; font-size: 15px; padding: 11px 14px; border-radius: 16px }
.seite-nav a:hover, .seite-knopf:hover { background: var(--spur); color: var(--tinte) }
.seite-nav a[aria-current="page"] { background: var(--spur); color: var(--tinte); box-shadow: 0 1px 2px rgba(43, 11, 63, .06) }
.seite-nav .ikon, .seite-knopf .ikon { width: 20px; height: 20px; stroke-width: 2 }
.seite-trenner { background: var(--linie); margin: 10px 8px }
.seite-fuss { border-top: 1px solid var(--linie) }
.ich-wer { color: var(--tinte) }
.ich-wer .textknopf { color: rgba(43, 11, 63, .55) }
.seite-zu-knopf { color: rgba(43, 11, 63, .55); border: 1px solid var(--linie); border-radius: 12px; font-size: 15px; padding: 6px 9px }
.seite-zu-knopf:hover { background: var(--spur); color: var(--tinte) }
body.seite-zu .seite .marke img { height: 22px }
body.seite-zu .seite-gruppe { display: none }
@media (max-width: 759px) { .seite { border-right: 0; border-bottom: 1px solid var(--linie) } .seite .marke { border: 0; margin: 0; padding: 0 8px 0 0 } .seite-gruppe { display: none } }
/* Überschriften als pinke Overline in Versalien */
h3 { color: var(--pink); font-size: 12px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase }
/* Begrüßung oben im Stand */
.gruss { grid-column: 1 / -1; display: grid; gap: 10px; padding: 4px 2px 6px }
.gruss-pille { justify-self: start; display: inline-flex; align-items: center; gap: 8px; background: #FFF6D1; color: var(--tinte); border-radius: 999px;
  padding: 7px 16px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase }
.gruss-pille .ikon { color: var(--pink) }
.gruss h1 { margin: 0; font-size: 46px; line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--tinte) }
.gruss p { margin: 0; color: var(--tinte-2); font-size: 17px }
@media (max-width: 559px) { .gruss h1 { font-size: 32px } }
.karte { border-radius: 16px }
.naechste .ikon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px }

/* Stand: alle Kennzahlen als gleich große Kacheln in einer Reihe, ohne Unterzeilen */
.s-kacheln { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px }
.s-kacheln .zahl { padding: 22px 26px; display: flex; flex-direction: column; gap: 6px }
.s-kacheln .zahl .w { font-size: 44px; line-height: 1.05 }
.zahl.schlecht .w { color: var(--krit) }

/* Calls: eine Zeile je Call, Status als Umschalter */
.call-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0 }
.call-liste li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--linie); font-size: 15px }
.call-wann { color: var(--tinte-2); font-variant-numeric: tabular-nums; white-space: nowrap }
.call-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.call-geplant { color: var(--tinte-2); font-size: 13px; padding-right: 8px }
.segment { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; padding: 3px; background: var(--spur) }
.seg { border: 0; background: none; border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 13px; font-weight: 700; color: var(--tinte-2); cursor: pointer }
.seg:hover { color: var(--tinte) }
.seg.an.erschienen { background: #fff; color: var(--gut); box-shadow: 0 1px 3px rgba(43, 11, 63, .12) }
.seg.an.noshow { background: var(--krit); color: #fff }
@media (max-width: 559px) { .call-liste li { grid-template-columns: 1fr auto; } .call-wann { grid-column: 1 / -1; font-size: 13px } }

/* Geht automatisch raus: kompakte Liste, Details im Chat */
.auto-block { border: 1px solid var(--linie); background: #FFF7FB; border-radius: 18px; padding: 10px 8px 6px; margin: 0 0 12px; display: grid; gap: 2px }
.auto-titel { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px 6px; font-size: 14px }
.auto-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer; background: none; box-shadow: none }
.auto-zeile:hover, .auto-zeile.aktiv { background: #fff }
.auto-zeile.aktiv { box-shadow: inset 3px 0 0 var(--pink) }
.auto-zeile .avatar { width: 32px; height: 32px; font-size: 11px }
.auto-mitte { display: grid; min-width: 0; gap: 1px }
.auto-kopf { display: flex; align-items: center; gap: 8px; min-width: 0 }
.auto-kopf b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.auto-text { font-size: 13px; color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 }
.auto-uhr { font-size: 12px; font-weight: 700; color: var(--pink-dunkel); white-space: nowrap }
.auto-stopp { visibility: hidden; border: 0; background: none; color: var(--tinte-2); border-radius: 8px; padding: 4px; cursor: pointer; display: grid }
.auto-zeile:hover .auto-stopp, .auto-zeile:focus-within .auto-stopp { visibility: visible }
.auto-stopp:hover { background: var(--krit-bg); color: var(--krit) }
.auto-kasten { margin: 0 16px 12px; border: 1px solid #F8C9DF; background: #FFF7FB; border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px }
.auto-kasten-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 14px }
.auto-blase { margin: 0; justify-self: end; max-width: 85%; background: var(--pink-hell); border-radius: 16px 16px 4px 16px; padding: 9px 13px; font-size: 14px; white-space: pre-wrap }
.auto-kasten .tun { justify-content: flex-end }
@media (hover: none) { .auto-stopp { visibility: visible } }
.auto-kopf .chat-konto { flex: none; display: inline-block }

/* Pipeline v3 (15.10.2026): keine Querscroll-Spalten, ruhiger, organischer */
.board { overflow-x: visible; gap: 18px }
.spalte { flex: 1 1 0; min-width: 0; border-top: 0; background: var(--spur); border-radius: 20px; padding: 12px 10px 10px }
.spalte header b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: #9aa3b5 }
.stufe-interessiert header b::before { background: var(--reihe-3) }
.stufe-termin header b::before { background: var(--pink) }
.stufe-platziert header b::before { background: var(--gut) }
.spalte-karten { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; padding: 2px 2px 6px }
.karte, .karte.gelb, .karte.rot { min-width: 0; border: 1px solid var(--linie); border-left: 1px solid var(--linie); box-shadow: 0 1px 2px rgba(43, 11, 63, .05);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), box-shadow .24s cubic-bezier(.22, 1, .36, 1) }
.karte:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(43, 11, 63, .10) }
.karte.zieht { opacity: .9; transform: rotate(2deg) scale(1.02); box-shadow: 0 14px 32px rgba(43, 11, 63, .18) }
.karte-fuss { min-width: 0 }
.naechste { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.spalte.ziel { outline: 0; background: #FDEBF4; box-shadow: inset 0 0 0 2px #F8C9DF }
.karte-aktionen { display: flex; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .24s ease, opacity .2s ease }
.karte:hover .karte-aktionen, .karte:focus-within .karte-aktionen { max-height: 48px; opacity: 1 }
@media (max-width: 1100px) { .board { overflow-x: auto } .spalte { flex: 0 0 300px } }
@media (max-width: 559px) { .spalte { flex: 0 0 86vw } .karte-aktionen { max-height: 48px; opacity: 1 } }

/* Leads: Liste und Seite je Lead (15.10.2026) */
a.karte { display: grid; color: inherit; text-decoration: none; cursor: pointer }
.lead-tabelle { padding: 8px 12px }
.lead-tabelle table { width: 100%; border-collapse: collapse }
.lead-tabelle th { text-align: left; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-2); padding: 10px 12px; border-bottom: 1px solid var(--linie) }
.lead-tabelle td { padding: 12px; border-bottom: 1px solid var(--linie); vertical-align: middle }
.lead-tabelle tbody tr { cursor: pointer; transition: background .15s }
.lead-tabelle tbody tr:hover { background: var(--spur) }
.lead-tabelle .naechste { margin-left: 0 }
.lead-name { display: flex; align-items: center; gap: 12px; min-width: 0 }
.lead-name small { display: block; color: var(--tinte-2); font-size: 12px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lead-stufe { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--spur) }
.lead-stufe.stufe-interessiert { background: #E6F0FB; color: var(--reihe-3) }
.lead-stufe.stufe-termin { background: var(--pink-hell); color: var(--pink-dunkel) }
.lead-stufe.stufe-platziert { background: var(--gut-bg); color: var(--gut) }
.lead-stufe.stufe-abgesagt { background: var(--krit-bg); color: var(--krit) }
.zurueck-link { display: inline-block; margin-bottom: 14px; font-weight: 700; color: var(--tinte-2); text-decoration: none }
.zurueck-link:hover { color: var(--tinte) }
.lead-raster { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 22px; align-items: start }
.lead-profil { display: grid; gap: 14px; justify-items: start; padding: 26px }
.lead-profil .avatar { width: 72px; height: 72px; font-size: 22px }
.lead-profil h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px }
.lead-rolle { margin: -8px 0 0; color: var(--tinte-2) }
.lead-profil .tafel-naechste { width: 100%; box-sizing: border-box }
.lead-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; width: 100% }
.lead-info dt { color: var(--tinte-2) } .lead-info dd { margin: 0; font-weight: 600 }
.lead-profil .notiz-feld { width: 100% }
.lead-gespraech { display: grid; gap: 14px; padding: 22px 26px }
.lead-verlauf { display: grid; gap: 8px; max-height: calc(100vh - 360px); overflow-y: auto; padding-right: 4px }
@media (max-width: 1000px) { .lead-raster { grid-template-columns: 1fr } }

.stufe-abgesagt header b::before { background: var(--krit) }
.stufe-abgesagt .karte { opacity: .75 }

/* Insights (Renzo, 15.10.2026): Berichte in Sechzigsteln, umbrechend */
.insights-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px }
.insights-kopf h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--tinte) }
.insights-hilfe { margin: -8px 0 14px }
.insights-raster { --g: 22px; display: flex; flex-wrap: wrap; gap: var(--g); align-items: stretch }
.insights-raster.bearbeiten { row-gap: 38px; padding-top: 16px }
.bericht { flex: 0 0 calc((100% + var(--g)) * var(--w) / 60 - var(--g)); min-width: 0; position: relative; display: flex; flex-direction: column }
.bericht > .zahl, .bericht > .panel { flex: 1 }
.bericht.ist-zahl .zahl { padding: 22px 26px; display: flex; flex-direction: column; gap: 6px }
.bericht.ist-zahl .zahl .w { font-size: 40px; line-height: 1.05 }
.bericht-panel { overflow: hidden }
.bericht-panel > h3 { margin-top: 0 }
.bearbeiten .bericht { cursor: grab; outline: 2px dashed transparent; outline-offset: 4px; border-radius: var(--radius); transition: outline-color .15s, opacity .15s }
.bearbeiten .bericht:hover { outline-color: var(--linie) }
.bearbeiten .bericht.ziel { outline-color: var(--pink) }
.bearbeiten .bericht.zieht { opacity: .4 }
.bearbeiten .bericht > .zahl, .bearbeiten .bericht > .panel { pointer-events: none }
.bericht-leiste { position: absolute; top: -15px; right: 14px; z-index: 2; display: flex; gap: 4px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 3px 6px; box-shadow: 0 4px 14px rgba(43,11,63,.08) }
.bericht-leiste .griff { color: var(--tinte-2); padding: 0 4px; letter-spacing: -2px; cursor: grab }
.bericht-leiste .mini { width: 26px; height: 26px; border-radius: 999px; border: 0; background: transparent; color: var(--tinte); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.bericht-leiste .mini:hover:not(:disabled) { background: var(--grund-2, #F4F0F7) }
.bericht-leiste .mini:disabled { opacity: .3; cursor: default }
.bericht-leiste .mini .ikon { width: 14px; height: 14px }
@media (max-width: 1100px) { .bericht { flex-basis: calc((100% + var(--g)) * max(var(--w), 30) / 60 - var(--g)) } }
@media (max-width: 700px) { .bericht { flex-basis: 100% } .bericht.ist-zahl { flex-basis: calc(50% - var(--g) / 2) } }
/* Startseite: was wartet */
.s-offen { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); font-size: 18px }
.s-offen:hover { border-color: var(--pink) }
.s-offen .ikon { color: var(--pink) }
.s-offen-los { color: var(--pink); font-weight: 700 }

/* Login nur zum Ansehen (APP_NUR_LESEN) */
.nur-lesen-hinweis { position: sticky; top: 0; z-index: 50; padding: 8px 16px; text-align: center; font-weight: 600;
  background: #fff4cc; color: #5c4400; border-bottom: 1px solid #f0dc8a; }
body.nur-lesen #antwort-feld, body.nur-lesen .senden, body.nur-lesen button.knopf:not(.zweit) { pointer-events: none; opacity: .45; }

/* Login: keine Seitenleiste, also kein Abstand links (war nach rechts verschoben) */
body.login main, body.login.seite-zu main { margin: 0 auto }

/* Follow-ups: Zahl über den Filtern */
.fu-kopf { display: grid; gap: 8px }
.fu-zahl { font-size: 14px; color: var(--tinte-2) } .fu-zahl b { color: var(--tinte); font-size: 16px } .fu-zahl b.heiss { color: var(--krit) }

/* Antworten füllt genau das Fenster: die Seite selbst scrollt nicht, nur Liste und Verlauf. */
@media (min-width: 560px) {
  main:has(> #antworten:not([hidden])) { height: 100vh; height: 100dvh; padding-bottom: 20px; display: flex; flex-direction: column; overflow: hidden }
  #antworten:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column }
  #antworten .chats { flex: 1; height: auto; min-height: 0 }
}
@media (min-width: 560px) and (max-width: 759px) {
  main:has(> #antworten:not([hidden])) { height: calc(100dvh - 56px) }
}

/* Pipeline auf dem Handy: Stufen-Leiste, Spalten rasten ein */
.stufen-pills { display: none }
@media (max-width: 560px) {
  .stufen-pills { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none }
  .stufen-pills .pille { white-space: nowrap; flex: none }
  #pipeline .board { scroll-snap-type: x mandatory; overflow-x: auto }
  #pipeline .board .spalte { scroll-snap-align: start; min-width: 86vw }
}

/* Zu tun nach Abschnitten: Heiß · Call festmachen, Antworten, Nachfassen (15.10.2026) */
.liste-abschnitt { display: flex; justify-content: space-between; align-items: center; margin: 14px 10px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2) }
.liste-abschnitt:first-child, .auto-block + .liste-abschnitt { margin-top: 4px }
.liste-abschnitt .anzahl { background: var(--spur); color: var(--tinte-2); border-radius: 999px; padding: 1px 8px; letter-spacing: 0 }
.liste-abschnitt.heiss { color: var(--pink-dunkel) } .liste-abschnitt.heiss .anzahl { background: var(--pink-hell); color: var(--pink-dunkel) }