/* 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: #7D688A;      /* vorher #8E7A9A: 3,9:1 auf Weiß, unter AA für 11-12px; jetzt 5:1 */
  --pink: #FF4F9A;
  --pink-dunkel: #D92672;
  --pink-hell: #FFE6F0;
  --linkedin: #0A66C2;      /* LinkedIn-Blau, nur für Links aufs Profil (Renzo, 27.10.2026) */
  --linkedin-dunkel: #004182;
  --gelb: #FFD93D;
  --grund: #FFFFFF;
  --flaeche: #FFFFFF;
  --linie: rgba(43, 11, 63, .10);
  --spur: #F5F3F7;

  /* Verlauf: vier Reihen in fester Reihenfolge, nur Markenfarben (Renzo, 23.10.2026: „nie unser
     Branding verlassen“). Getrennt über die Helligkeit: dunkel, hell, mittel, Pink. Gelb liegt
     unter 3:1 Kontrast auf Weiß, deshalb gibt es zum Diagramm immer die Tabelle. */
  --reihe-1: #2B0B3F;   /* Einladungen */
  --reihe-2: #FFD93D;   /* Angenommen */
  --reihe-3: #8E5BA8;   /* 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 }
.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) {
  .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: #F3EAF8 }
.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, .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) }
.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%); z-index: 30; display: flex; align-items: center; gap: 10px;
  background: var(--tinte); color: #fff; padding: 10px 16px 10px 14px; border-radius: var(--radius-m, 12px); font-size: 13px; font-weight: 500; line-height: 1.35;
  width: max-content; max-width: min(440px, calc(100vw - 32px)); box-shadow: 0 8px 24px rgba(44, 11, 65, .3) }
.meldung::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pink) }
.meldung.fehler { background: var(--tinte) }
.meldung.fehler::before { 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 }
/* Trichter: oben breit, unten schmal, Farbe von Aubergine zu Pink (Renzo, 26.10.2026) */
.funnel-form { display: grid; gap: 3px; margin: 6px 0 4px }
.funnel-stufe { display: grid; grid-template-columns: 130px 1fr 110px; gap: 12px; align-items: center; min-height: 36px }
.funnel-band { display: block; height: 36px; background: color-mix(in srgb, var(--pink) var(--anteil), var(--reihe-1)) }
.funnel-name { display: flex; flex-direction: column; font-size: 13px; line-height: 1.25 }
.funnel-name b { font-size: 16px; font-variant-numeric: tabular-nums }
.funnel-quote { display: flex; flex-direction: column; text-align: right; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums }
.funnel-quote small, .schritt-zeile small { color: var(--tinte-2); font-size: 11px }
/* Nur der Trichter und der Abschnitt darunter: die Menüs im Kopf sind auch details und würden sonst 0 breit */
.funnel-form, .trichter > details.konten-filter { container-type: inline-size }
.trichter > details.konten-filter { margin-top: 14px }
@container (max-width: 460px) {
  .funnel-stufe { grid-template-columns: 1fr auto; gap: 2px 8px; grid-template-areas: "name quote" "band band" }
  .funnel-name { grid-area: name; flex-direction: row; align-items: baseline; gap: 6px }
  .funnel-quote { grid-area: quote; flex-direction: row; align-items: baseline; gap: 4px }
  .funnel-band { grid-area: band; height: 22px }
  .schritt-zeile { grid-template-columns: 1fr 1fr } .schritt-bahn { grid-column: 1 / -1; order: 3 }
}
/* Je Schritt der Sequenz: Antworten aufgeteilt in positiv, offen, Absage */
.schritt-legende { display: flex; gap: 14px; font-size: 12px; color: var(--tinte-2); margin: 8px 0 }
.schritt-legende span { display: inline-flex; align-items: center; gap: 5px }
.schritt-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block }
.schritt-zeile { display: grid; grid-template-columns: 120px 130px 1fr 110px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 13px }
.schritt-zeile > span { display: flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums }
.schritt-positiv { text-align: right }
.schritt-bahn { flex-direction: row !important; height: 14px; border-radius: 4px; overflow: hidden; background: var(--spur) }
.schritt-bahn i { display: block; height: 100% }
.schritt-zeile.klickbar { cursor: pointer; border-radius: 8px; margin-left: -6px; margin-right: -6px; padding: 4px 6px }
.schritt-zeile.klickbar:hover, .schritt-zeile.klickbar:focus-visible { background: var(--spur) }
.schritt-zeile.klickbar .schritt-bahn i:hover { filter: brightness(1.12) }
/* Fenster mit den Gesprächen hinter einem Schritt */
.schritt-dialog { width: min(560px, calc(100vw - 32px)) }
.schritt-dialog .wahl { margin-bottom: 10px }
.schritt-chats { display: grid; gap: 2px; max-height: min(60vh, 520px); overflow-y: auto; margin-bottom: 14px }
.schritt-chat { display: grid; gap: 3px; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--tinte); font: inherit }
.schritt-chat:hover, .schritt-chat:focus-visible { background: var(--spur) }
.schritt-chat-kopf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px }
.schritt-chat-kopf small { color: var(--tinte-2); font-size: 12px }
.schritt-chat-zitat { color: var(--tinte-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.schritt-chat i { width: 8px; height: 8px; border-radius: 50%; flex: none }
.schritt-chat .punkt-positiv { background: var(--pink) }
.schritt-chat .punkt-offen { background: var(--reihe-3) }
.schritt-chat .punkt-absage { background: var(--tinte-3) }
.schritt-bahn i.positiv, .schritt-legende i.positiv { background: var(--pink) }
.schritt-bahn i.offen, .schritt-legende i.offen { background: var(--reihe-3) }
.schritt-bahn i.absage, .schritt-legende i.absage { background: var(--tinte-3) }

/* 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(--spur) }   /* --grund ist Weiß wie das Menü: Fokus war unsichtbar */
.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(--spur) }
button.stift { border: 0; background: none; font: inherit; vertical-align: middle; margin-left: 2px }
.menue-trenner { height: 1px; background: var(--linie); margin: 4px 6px }
.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 }
.dialog-label { display: grid; font-size: 12px; font-weight: 700; color: var(--tinte-2) }
.dialog-label .dialog-feld { margin: 4px 0 12px; font-weight: 400 }
.dialog .fehler { color: var(--krit); font-size: 13px; margin: 0 0 12px }
.neu-dialog { width: min(460px, calc(100vw - 32px)); padding: 28px 26px 20px }
.neu-titel { text-align: center; font-size: 26px !important; line-height: 1.2; margin: 4px 0 22px !important }
.neu-titel span { color: var(--pink) }
.neu-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 18px }
.neu-liste li { display: flex; align-items: flex-start; gap: 14px }
.neu-liste li > span:last-child { display: grid; gap: 2px; font-size: 14px; line-height: 1.4 }
.neu-ikon { flex: none; width: 36px; display: flex; justify-content: center; color: var(--pink) }
.neu-ikon .ikon { width: 26px; height: 26px }
.neu-weiter { width: 100%; justify-content: center; height: 44px; border-radius: 999px }
.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 }
.stellen-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 4px 0 4px }
.stellen-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; min-width: 0 }
a.stellen-karte:hover { border-color: var(--tinte) }
/* Sonderkampagne: schlichter lila Rand, Aubergine hell (Renzo, 26.10.2026) */
.stellen-karte.sonder, .stelle-kopf.sonder { border-color: var(--reihe-3) }
a.stellen-karte.sonder:hover { border-color: var(--reihe-3); box-shadow: inset 0 0 0 1px var(--reihe-3) }
.stellen-text { min-width: 0 }
/* Alle Karten gleich hoch: Rolle in einer Zeile, Plätze unten bündig */
.stellen-karte .stellen-text > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.stellen-fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto }
.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) }
/* Seite Kampagnen (28.10.2026): eine Karte je Stadt und Rolle, Konten als Zeilen */
.kampagne-gruppe { display: flex; flex-direction: column; gap: 10px }
.kampagne-gruppe .kampagnen-kopf a { color: inherit }
.kampagne-satz { margin: 0; font-size: 13px; color: var(--tinte-2); border-left: 2px solid var(--linie); padding-left: 10px }
.kampagne-konten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.kampagne-konten li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }

.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-konto:has(+ .chat-li) { margin-right: 0 }
.chat-li { flex: none; margin-right: auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: var(--linkedin); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer }
.chat-li:hover { background: var(--linkedin-dunkel) }
.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: var(--reihe-3) }
.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 }
/* Name im Kopf öffnet das Menü zur Person (Call gebucht, Ins ATS, Umbenennen, Lead-Seite) */
.name-knopf { border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; padding: 2px 6px; margin-left: -6px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; text-align: left }
.name-knopf .ikon { width: 14px; height: 14px; color: var(--tinte-3) }
.name-knopf:hover, .name-knopf:focus-visible, .name-knopf[aria-expanded="true"] { background: var(--spur) }
.faden-tun .abstand { flex: 1 }
.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) }
.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 }
.anhang-wahl { display: flex; flex-wrap: wrap; gap: 6px }
.anhang-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--linie); border-radius: 999px; font-size: 13px; max-width: 100% }
.anhang-chip > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px }
.anhang-chip > .leise { white-space: nowrap }
.blase-datei { display: flex; align-items: center; gap: 6px; font-weight: 500 }
.blase-gif { display: block; max-width: 220px; border-radius: 8px; margin-bottom: 4px }
.blase-anhang { font-style: italic; opacity: .75 }
@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) }
.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(--spur) }

/* --- 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-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, Erledigt, Not a fit, Später, Archiv: fünf Sekunden (RUECKGAENGIG_MS), dann geht es an den Server */
.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: 10px 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 }
.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) }
.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 }

.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 }
.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 */
.deutsch-regler { margin: 0 0 14px; display: grid; gap: 8px }
.deutsch-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.deutsch-regler p { margin: 0 }
.wahl button:disabled { cursor: default; opacity: .6 }
.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 { 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) }
.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-voll { grid-column: 1 / -1 }
@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 .zahl .w { font-size: 32px }
}

.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.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 { display: inline-flex; align-items: center; gap: 8px }
.klappe-kopf .marke-icon { margin-right: 2px }
.leer-gross { display: grid; justify-items: center; gap: 14px; text-align: center }

/* 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; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; color: var(--tinte-2) }   /* fünf Zahlen passen nicht in 375px */
.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) }
.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 }
.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-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 }
@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-knopf .ikon { width: 20px; height: 20px; margin: 0 1px }
.seite-knopf.dreht .ikon { animation: drehen 1s linear infinite }
.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-fuss { border-top: 1px solid var(--linie) }
.ich-wer { color: var(--tinte) }
/* Sidra im Schriftzug des GENZ4GTM-Logos (Renzo, 24.10.2026): gelb, dünn schwarz umrandet,
   dicker pinker Rand, Aubergine-Schatten nach rechts unten */
.wort.sidra { font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1;
  color: var(--gelb); -webkit-text-stroke: 1.5px #000; paint-order: stroke fill;
  text-shadow: 3px 0 0 var(--pink), -3px 0 0 var(--pink), 0 3px 0 var(--pink), 0 -3px 0 var(--pink),
    2px 2px 0 var(--pink), -2px 2px 0 var(--pink), 2px -2px 0 var(--pink), -2px -2px 0 var(--pink),
    5px 5px 0 var(--tinte), 6px 6px 0 var(--tinte) }
.wort.sidra.kurz { display: none }
body.seite-zu .seite .wort.sidra.kurz { display: inline; font-size: 24px }
body.login .wort.sidra { font-size: 46px }
@media (max-width: 759px) { .seite .wort.sidra { font-size: 20px } }
.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 } }
/* "Noch offen" über den Calls dieser Woche, und der Call auf der Lead-Seite (19.10.2026) */
.call-gruppe { margin: 16px 4px 0; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-2) }
.call-gruppe:first-child { margin-top: 4px }
.lead-calls { display: grid; gap: 8px; width: 100% }
.lead-calls:empty { display: none }
.lead-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; background: var(--spur); border-radius: 10px; padding: 8px 8px 8px 12px }
.lead-call-wann { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.lead-call-wann small { display: block; color: var(--tinte-2); font-weight: 400; font-size: 12px }
.lead-call .segment { background: var(--flaeche) } .lead-call .seg { white-space: nowrap }
.lead-aufgaben { display: grid; gap: 6px; width: 100% }
.lead-aufgaben-titel { color: var(--tinte-2); font-size: 12px }
.lead-aufgabe { display: flex; align-items: center; gap: 10px; background: var(--spur); border-radius: 10px; padding: 6px 6px 6px 12px }
.lead-aufgabe.faellig { box-shadow: inset 3px 0 0 var(--pink) }
.lead-aufgabe-wann { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.lead-aufgabe-was { flex: 1; min-width: 0; overflow-wrap: anywhere }
.lead-aufgabe-was small { display: block; color: var(--tinte-2); font-size: 11px }
.lead-aufgabe-neu { display: grid; gap: 6px }
.lead-aufgabe-neu input[type="text"], .lead-aufgabe-neu textarea, .lead-aufgabe-neu input[type="date"] { width: 100%; border: 1px solid var(--linie-stark); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; background: var(--flaeche) }
.lead-aufgabe-tage { display: flex; flex-wrap: wrap; gap: 4px; align-items: center }
.lead-aufgabe-tage input[type="date"] { width: auto; flex: 1 1 130px }
.aufgabe-chip { border: 1px solid var(--linie-stark); background: var(--flaeche); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: inherit }
.aufgabe-chip:hover { border-color: var(--pink) }
.lead-aufgabe-neu .knopf { justify-self: start }

/* 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 }
@media (max-width: 1100px) { .board { overflow-x: auto } .spalte { flex: 0 0 300px } }
/* Neun Spalten seit dem Recruitly-Abgleich (22.10.2026): das Brett scrollt quer, jede Spalte bleibt lesbar */
.board { overflow-x: auto; scroll-snap-type: x proximity }
@media (min-width: 560px) { .spalte { flex: 0 0 260px } }
.stufe-ats_warte header b::before, .stufe-ats_bestaetigung header b::before, .stufe-ats_kunde header b::before,
.stufe-ats_angebot header b::before { background: var(--pink) }
.lead-stufe.stufe-ats_warte, .lead-stufe.stufe-ats_bestaetigung, .lead-stufe.stufe-ats_kunde,
.lead-stufe.stufe-ats_angebot { background: var(--pink-hell); color: var(--pink-dunkel) }
.pille.stufe-ats_warte, .pille.stufe-ats_bestaetigung, .pille.stufe-ats_kunde, .pille.stufe-ats_angebot { background: var(--gut-bg) }
.karte-job { color: var(--pink-dunkel); font-weight: 600 }
@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; overflow-x: auto }   /* breite Tabelle scrollt in sich, nicht die Seite */
.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: #F3EAF8; 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 }
#chat-zahl { margin-bottom: 10px } #chat-zahl:empty { display: none }
.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 }
  /* Volle Breite: die Lesebreite für große Schirme (unten, margin auto) ließ den Flex-Bereich auf ~900px schrumpfen (22.10.2026) */
  #antworten:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: none; margin-left: 0; margin-right: 0 }
  #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) }

/* =====================================================================================
   Designsystem v2 (21.10.2026). Eine Schicht über allem oben, ändert kein Verhalten.
   Grundsätze (Linear, Stripe, Attio): eine Akzentfarbe (Pink), sonst ruhige Neutraltöne;
   Fläche auf leicht getöntem Grund statt Weiß auf Weiß; Tiefe durch feine Schatten statt
   dicker Rahmen; ein Radius-, Abstands- und Schriftraster; 120–200 ms Übergänge;
   sichtbarer Fokus für Tastatur; nichts bewegt sich bei prefers-reduced-motion.
   ===================================================================================== */
:root {
  --grund: #F7F6F9;                 /* Seitengrund, leicht getönt: Karten heben sich ab */
  --flaeche: #FFFFFF;
  --spur: #F1EEF4;
  --linie: rgba(43, 11, 63, .09);
  --linie-stark: rgba(43, 11, 63, .16);
  --radius: 16px; --radius-m: 12px; --radius-s: 8px;
  --schatten-1: 0 1px 2px rgba(43, 11, 63, .04), 0 1px 1px rgba(43, 11, 63, .03);
  --schatten-2: 0 2px 4px rgba(43, 11, 63, .04), 0 6px 16px rgba(43, 11, 63, .06);
  --schatten-3: 0 12px 32px rgba(43, 11, 63, .12), 0 2px 6px rgba(43, 11, 63, .06);
  --ring: 0 0 0 3px rgba(255, 79, 154, .28);
  --schnell: 140ms; --kurve: cubic-bezier(.23, 1, .32, 1);
  --schrift: Inter, "Inter Variable", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
}

body { background: var(--grund); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01", "ss03" }
::selection { background: rgba(255, 79, 154, .32); color: var(--tinte) }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px }

/* Dünne, ruhige Scrollbalken */
* { scrollbar-width: thin; scrollbar-color: rgba(43, 11, 63, .18) transparent }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background: rgba(43, 11, 63, .16); border-radius: 99px; border: 3px solid transparent; background-clip: content-box }
::-webkit-scrollbar-thumb:hover { background-color: rgba(43, 11, 63, .3) }
::-webkit-scrollbar-track { background: transparent }

/* Inhalt: begrenzte Lesebreite auf sehr großen Schirmen, mehr Luft oben */
main { padding: 32px 44px 80px }
@media (min-width: 1800px) { main > .bereich { max-width: 1560px; margin-left: auto; margin-right: auto } }
@media (max-width: 759px) { main { padding: 20px 16px 72px } }

/* Flächen: Karte = weiß, feine Linie, feiner Schatten */
.panel, .zahl, .stapel, .chats, .kampagnen-karte, .arm, .lead-profil, .lead-gespraech, .lead-tabelle {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-1) }
.panel { padding: 20px 24px }
a.zahl, .s-offen { transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve), transform var(--schnell) var(--kurve) }
a.zahl:hover, .s-offen:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-2); transform: translateY(-1px) }
.zahl .l { font-size: 12.5px; font-weight: 600; color: var(--tinte-2) }
.zahl .w, .arm-wert { font-variant-numeric: tabular-nums; letter-spacing: -.03em }
.s-kacheln { gap: 16px }
.s-kacheln .zahl { padding: 20px 22px }
.s-kacheln .zahl .w { font-size: 40px; font-weight: 750 }

/* Überschriften */
.gruss h1 { font-size: 40px; font-weight: 750; letter-spacing: -.022em; line-height: 1.1 }
.insights-kopf h1 { font-size: 30px; font-weight: 750 }
h3 { font-size: 11px; font-weight: 700; letter-spacing: .16em }

/* Knöpfe: klares Primär/Sekundär, spürbares Drücken */
.knopf { font-weight: 600; padding: 8px 15px; transition: background-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve), transform 80ms var(--kurve), color var(--schnell) }
.knopf:not(.zweit):not(.leise) { box-shadow: 0 1px 2px rgba(217, 38, 114, .25), inset 0 1px 0 rgba(255, 255, 255, .18) }
.knopf:active:not(:disabled) { transform: scale(.97) }
.knopf.zweit { border-color: var(--linie-stark); box-shadow: var(--schatten-1) }
.knopf.zweit:hover { background: var(--grund); border-color: rgba(43, 11, 63, .22) }
.knopf:focus-visible { outline: 0; box-shadow: var(--ring) }
.knopf.klein { padding: 5px 12px }

/* Eingabefelder: einheitlich, klarer Fokus */
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input:not([type]), textarea, select, .wahlfeld {
  transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve) }
.filter select, .filter input[type="search"], .tun select, .wahlfeld, .notiz-feld textarea, .feld input, .feld textarea, .dialog-feld, body.login input { border-color: var(--linie-stark) }
.filter input[type="search"]:hover, .wahlfeld:hover, select:hover, textarea:hover { border-color: rgba(43, 11, 63, .26) }
input:focus, textarea:focus, select:focus, .dialog-feld:focus { outline: 0; border-color: var(--pink) !important; box-shadow: var(--ring) }
::placeholder { color: var(--tinte-3); opacity: .8 }

/* Segmente und Umschalter */
.wahl { background: var(--spur); border-radius: 999px; padding: 3px }
.wahl button { padding: 4px 12px; transition: background-color var(--schnell), color var(--schnell), box-shadow var(--schnell) }
.wahl button:hover { color: var(--tinte) }
.wahl button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(43, 11, 63, .10), 0 0 0 1px rgba(43, 11, 63, .05) }

/* Pillen etwas feiner */
.pille, .lead-stufe { font-weight: 600; letter-spacing: .005em }
.zahl-chip { font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(217, 38, 114, .3) }

/* Tabellen: feste Kopfzeile, Zeilen-Hover, Zahlen rechtsbündig in gleicher Breite */
th { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--tinte-3) }
td { color: var(--tinte) }
tbody tr { transition: background-color var(--schnell) }
.panel tbody tr:hover, .lead-tabelle tbody tr:hover { background: var(--grund) }
.lead-tabelle { padding: 4px 8px }
.lead-tabelle thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 1 }
.lead-tabelle td { padding: 11px 12px }

/* Seitenleiste: aktiver Punkt mit pinker Marke links, ruhiges Hover */
.seite { background: var(--flaeche); box-shadow: 1px 0 0 var(--linie); border-right: 0 }
.seite-nav a, .seite-knopf { font-weight: 550; font-size: 14.5px; padding: 9px 12px; border-radius: 10px; position: relative;
  transition: background-color var(--schnell) var(--kurve), color var(--schnell) }
.seite-nav a .ikon, .seite-knopf .ikon { color: var(--tinte-2); transition: color var(--schnell) }
.seite-nav a:hover .ikon, .seite-knopf:hover .ikon { color: var(--tinte) }
.seite-nav a[aria-current="page"] { background: var(--spur); box-shadow: none; font-weight: 650 }
.seite-nav a[aria-current="page"] .ikon { color: var(--pink) }
.seite-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pink) }
body.seite-zu .seite-nav a[aria-current="page"]::before { left: -10px }
.seite-gruppe { font-size: 10.5px; letter-spacing: .18em; color: rgba(43, 11, 63, .42); padding: 16px 12px 6px }
.seite-fuss { padding-top: 14px }
.seite-zu-knopf { border-radius: 8px; transition: background-color var(--schnell) }
@media (max-width: 759px) {
  .seite { box-shadow: 0 1px 0 var(--linie); background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px) }
  .seite-nav a[aria-current="page"]::before { display: none }
}

/* Antworten: Liste und Gespräch */
.chats { border-radius: var(--radius) }
.chat-liste { padding: 8px; background: var(--flaeche) }
.chat-zeile { padding: 10px; border-radius: 10px; transition: background-color var(--schnell) }
.chat-zeile.aktiv { background: var(--pink-hell); box-shadow: inset 3px 0 0 var(--pink) }
.blase { background: var(--spur); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 14px; line-height: 1.45 }
.blase.aus { background: var(--pink-hell); border-radius: 14px 14px 4px 14px }
blockquote { background: var(--spur) }
blockquote.aus { background: var(--pink-hell) }
.avatar { box-shadow: 0 0 0 1px rgba(43, 11, 63, .06) }

/* Pipeline */
.spalte { background: rgba(43, 11, 63, .035); border: 1px solid var(--linie); border-radius: var(--radius) }
.karte { border-radius: var(--radius-m) }
.karte:hover { box-shadow: var(--schatten-2) }

/* Menüs, Dialoge, Meldungen, Tooltip: schweben über allem */
.menue-liste { transform-origin: top left; border-radius: var(--radius-m); box-shadow: var(--schatten-3); animation: aufgehen 140ms var(--kurve) }
.dialog { border-radius: var(--radius); box-shadow: var(--schatten-3); animation: aufgehen 180ms var(--kurve) }
.dialog::backdrop { background: rgba(28, 6, 42, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px) }
.meldung, .rueckgaengig { box-shadow: var(--schatten-3) }
.meldung:not([hidden]) { animation: hochkommen 200ms var(--kurve) }
.tooltip { border-radius: 8px; box-shadow: var(--schatten-3) }
@keyframes aufgehen { from { opacity: 0; transform: translateY(-4px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes hochkommen { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* Bereichswechsel: kurzes Einblenden statt Springen */
.bereich:not([hidden]) { animation: einblenden 180ms var(--kurve) }
@keyframes einblenden { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* Leere Zustände und Laden */
.leer { color: var(--tinte-3); padding: 32px 12px; font-size: 14px }

/* Anmeldeseite: Karte auf getöntem Grund */
body.login main { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; box-shadow: var(--schatten-2); padding: 32px 28px }
body.login input { padding: 10px 13px }

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}

/* Befehlspalette (⌘K) */
kbd { font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--tinte-2); background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; display: inline-block; min-width: 18px; text-align: center }
#palette-knopf kbd { margin-left: auto }
.dialog.palette { width: min(620px, calc(100vw - 32px)); padding: 0; margin-top: 12vh; overflow: hidden }
.pa-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linie) }
.pa-kopf > .ikon { width: 18px; height: 18px; color: var(--tinte-3) }
.pa-feld { flex: 1; border: 0 !important; box-shadow: none !important; font-size: 16px; padding: 4px 0; background: none; min-width: 0 }
.pa-feld:focus { outline: 0 }
.pa-liste { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 420px); overflow-y: auto }
.pa-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer }
.pa-zeile.aktiv { background: var(--spur) }
.pa-zeile .avatar { width: 28px; height: 28px; font-size: 10px }
.pa-ikon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--spur); color: var(--tinte-2); flex: none }
.pa-zeile.aktiv .pa-ikon { background: var(--pink-hell); color: var(--pink-dunkel) }
.pa-text { display: grid; min-width: 0; flex: 1 }
.pa-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pa-text small { color: var(--tinte-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pa-leer { padding: 24px; text-align: center; color: var(--tinte-3) }
.pa-fuss { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--linie); font-size: 12px; color: var(--tinte-3); background: var(--grund) }
.pa-fuss kbd { margin-right: 3px }
@media (max-width: 759px) { #palette-knopf kbd, .pa-fuss { display: none } .dialog.palette { margin-top: 8vh } }

/* Laden: Platzhalterzeilen, erst nach 300 ms (schnelle Antworten flackern nicht) */
.skelett { display: grid; gap: 12px; padding: 8px 0; opacity: 0; animation: einblenden 200ms var(--kurve) 300ms forwards }
.skelett-zeile { height: 52px; border-radius: var(--radius-m); background: linear-gradient(90deg, var(--spur) 0%, #F8F6FA 50%, var(--spur) 100%); background-size: 200% 100%; animation: schimmer 1.4s ease-in-out infinite }
.skelett-zeile:nth-child(2) { width: 92% } .skelett-zeile:nth-child(3) { width: 84% } .skelett-zeile:nth-child(4) { width: 70% }
@keyframes schimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }

/* Trend gegenüber den 7 Tagen davor, neben der Kachel-Überschrift */
.zahl .l .trend { margin-left: auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 1px 7px; white-space: nowrap }
.trend.hoch { background: var(--gut-bg); color: #0a7a0a }
.trend.runter { background: var(--krit-bg); color: #b02e2e }
.trend.gleich { background: var(--spur); color: var(--tinte-2) }

/* Antworten · Calls · Nachfassen (21.10.2026): eine Zeile je Call mit Marken */
.call-zeile { align-items: flex-start }
.call-zeile.ohne-chat .avatar { opacity: .6 }
.call-zeile .call-zeit { color: var(--tinte); font-weight: 700 }
.call-marken { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; min-width: 0 }
.cm { font-size: 11px; font-weight: 600; color: var(--tinte-2); background: var(--spur); border-radius: 999px; padding: 1px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
.cm.gut { background: #e3f5ea; color: #1d6b3c }
.cm.warn { background: var(--warn-bg); color: #8a5a00 }
.cm.schlecht { background: var(--krit-bg); color: var(--krit) }
.cm.job b { font-weight: 800 }
.call-streifen { border-bottom: 1px solid var(--linie); padding: 8px 14px; display: grid; gap: 6px; background: var(--spur) }
.stellen-streifen { border-bottom: 1px solid var(--linie); padding: 7px 14px; font-size: 13px }
.stellen-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; list-style: none }
.stellen-kopf::-webkit-details-marker { display: none }
.stellen-mehr { display: grid; gap: 8px; padding: 8px 0 2px 22px }
.stellen-mehr p { margin: 0 }
.stelle-vorschlag { display: grid; gap: 2px }
.stellen-knoepfe { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap }
.stelle-vorschlag .haken { color: #8a5a00 }
.call-streifen-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px }
.call-streifen-zeile .call-marken { margin: 0 }
.call-streifen .segment { background: var(--flaeche) } .call-streifen .seg { padding: 4px 12px; white-space: nowrap }
.call-ohne-text { padding: 16px; overflow-y: auto; display: grid; gap: 8px; align-content: start }
.call-ohne-text h3 { margin: 0; font-size: 15px }
.call-ohne-text p { margin: 0; font-size: 14px }
.vorschlaege { display: grid; gap: 6px; margin-top: 4px }
.vorschlag { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--linie); background: var(--flaeche); padding: 10px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit }
.vorschlag:hover { border-color: var(--pink); background: var(--pink-hell) }

/* --- Stellen: Seite je offene Stelle mit ihren Kampagnen (23.10.2026) --- */
.stelle-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px }
.stelle-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.stelle-kopf h2 { margin: 0 }
.stelle-kopf .lead-info { width: auto; margin-left: auto; font-size: 13px }
.kampagne-teil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0 }
.kampagne-teil-kopf { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap }
.kampagne-teil-kopf h3 { margin: 0; margin-right: 4px }
.stand-balken { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--spur); gap: 2px }
.stand-balken span { min-width: 3px }
.stand-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--tinte-2) }
.stand-legende b { color: var(--tinte) }
.stand-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0 }
.sb-schlange { background: var(--kalt) } .sb-einladung { background: var(--reihe-1) } .sb-sequenz { background: var(--reihe-3) }
.sb-geantwortet { background: var(--reihe-4) } .sb-durch { background: var(--tinte-3) } .sb-abgelehnt { background: var(--warn) } .sb-raus { background: var(--krit) }
.ablauf { display: grid; padding: 8px 0 4px; overflow-x: auto }
.ablauf-zeile, .ablauf-kante { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) minmax(0, 1fr); align-items: start; column-gap: 14px }
.ablauf-kachel { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--linie); background: var(--spur); color: var(--tinte); font: inherit; font-size: 14px; text-align: center }
.ablauf-kachel .ikon { flex: none; width: 18px; height: 18px }
.ablauf-kachel .pille { white-space: nowrap }
.kachel-text { display: grid; line-height: 1.25 } .kachel-text .leise { font-size: 12px }
.ablauf-kachel .pille.gut { background: var(--pink-hell); color: var(--pink-dunkel) }
.ablauf-kachel.k-nachricht { background: var(--pink); border-color: var(--pink); color: #fff }
.ablauf-kachel.k-aktion { background: var(--tinte); border-color: var(--tinte); color: #fff }
.ablauf-kachel.k-nachricht .pille, .ablauf-kachel.k-aktion .pille { background: rgba(255, 255, 255, .22); color: #fff }
.ablauf-kachel.k-weiche { background: var(--flaeche); border-style: dashed; border-color: var(--pink) }
.ablauf-kachel.k-ende { background: var(--pink-hell); border-color: var(--pink-hell); color: var(--tinte) }
button.ablauf-kachel { cursor: pointer } button.ablauf-kachel:hover { filter: brightness(1.06) }
button.ablauf-kachel > .ikon:last-child { width: 16px; height: 16px; margin-left: 4px; transition: transform .15s }
button.ablauf-kachel[aria-expanded="true"] > .ikon:last-child { transform: rotate(180deg) }
.ablauf-kachel.klein { padding: 7px 10px; font-size: 13px }
.ablauf-nachricht { display: grid; gap: 8px }
.ablauf-blase { margin: 0; max-width: none; font-size: 14px; white-space: pre-wrap }
.ablauf-blase .blase-gif { display: block; max-width: 220px; border-radius: 8px; margin-bottom: 6px }
.ablauf-linie { justify-self: center; position: relative; width: 2px; height: 34px; background: var(--pink-hell) }
.ablauf-linie .ablauf-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); white-space: nowrap }
.ablauf-label { font-size: 12px; color: var(--tinte-2) }
.ablauf-seite { display: grid; gap: 8px; align-self: center }
.ablauf-zweig { display: grid; gap: 6px; padding-left: 12px; border-left: 2px dashed var(--pink-hell) }
@media (max-width: 700px) {
  .ablauf-zeile, .ablauf-kante { grid-template-columns: minmax(0, 1fr) }
  .ablauf-zeile > div:first-child, .ablauf-kante > div:not(.ablauf-linie) { display: none }
  .ablauf-seite { margin-top: 8px }
}
.lead-tabelle tbody tr.ohne-klick { cursor: default }
.stelle-seite .lead-tabelle td:nth-child(2) { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 700px) { .stelle-kopf .lead-info { margin-left: 0 } }
.stelle-fakten dd { font-weight: 400; line-height: 1.45 }
.stelle-infos h3 { margin-top: 0 }
.stelle-abschnitt { margin: 8px 0 -4px; font-size: 18px }
@media (max-width: 700px) { .stelle-fakten { grid-template-columns: 1fr } .stelle-fakten dt { margin-top: 6px } }

/* Stellen: Verteilung der Einladungen (Renzo, 23.10.2026). Pink = heute geplant, Tinte = letzte 7 Tage. */
#stellen > .panel + .panel { margin-top: 16px }
.kapazitaet { display: flex; flex-direction: column; gap: 4px }
.kap-balken { height: 6px; border-radius: 999px; background: var(--spur); overflow: hidden }
.kap-balken > span { display: block; height: 100%; border-radius: 999px; min-width: 0 }
.kap-plan { background: var(--pink) }
.kap-ist { background: var(--tinte) }
.kapazitaet .kampagnen-zahlen { margin-top: 2px }
.leise.klein, .kap-legende { font-size: 12px }
.kap-legende { display: flex; gap: 16px; margin: 4px 0 12px }
.kap-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px }
.kap-tabelle { display: flex; flex-direction: column; gap: 10px }
.kap-reihe { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 64px; gap: 14px; align-items: center }
.kap-name { font-weight: 600; font-size: 14px }
.kap-balken-paar { display: flex; flex-direction: column; gap: 4px }
.kap-zahl { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; line-height: 1.25 }
@media (max-width: 600px) { .kap-reihe { grid-template-columns: 1fr 56px } .kap-balken-paar { grid-column: 1 / -1; grid-row: 2 } }
/* Vormerken (23.10.2026): Grund und Jahre untereinander, lange Gründe brechen um */
/* th, td sind global nowrap und rechtsbündig: ohne normal lief ein langer Grund über „Wieder prüfen“ */
.lead-tabelle td.vm-warum { max-width: 420px; line-height: 1.35; text-align: left; white-space: normal }
#vormerken .lead-tabelle td { text-align: left }
.vm-warum span, .vm-warum small { display: block }
.vm-warum small { margin-top: 2px; font-size: 12px; color: var(--tinte-2) }

/* Lead von Hand (24.10.2026) */
.lh-auf { margin-left: auto }
.lh { display: grid; gap: 10px; margin-bottom: 14px }
.lh input[type=search] { flex: 1 1 260px; min-width: 0 }
.lh-treffer { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.lh-treffer li { display: flex; align-items: center; gap: 8px }
.lh-person { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: inherit; font: inherit }
.lh-person:hover { background: var(--spur) }
.lh-person small, .lh-pruefung .lead-name small { display: block; color: var(--tinte-2) }
.lh-pruefung { display: grid; gap: 10px; border-top: 1px solid var(--linie); padding-top: 12px }
.lh-pruefung .lead-name { display: flex; align-items: center; gap: 10px }

/* Leads von Hand, mehrere auf einmal (24.10.2026) */
.lh-modus { display: flex; gap: 6px; margin: 0 0 10px }
.lh-modus .abstand { flex: 1 }
.lb-feld { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; font-family: inherit; resize: vertical }
.lb-tabelle { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px }
.lb-tabelle td { padding: 6px 8px; border-top: 1px solid var(--linie); vertical-align: middle }
.lb-tabelle td:nth-child(2) { width: 45% }
.lb-tabelle td.warnzeile { padding: 6px 8px; margin: 0 }

/* --- Anleitung in den Einstellungen ------------------------------------------- */
.anleitung p { margin: 0 0 8px; max-width: 72ch; line-height: 1.5 }
.anleitung dl { margin: 4px 0 0; max-width: 72ch }
.anleitung dt { font-weight: 700; margin-top: 10px }
.anleitung dd { margin: 2px 0 0; color: var(--tinte-2); line-height: 1.5 }
.anleitung table { width: 100%; border-collapse: collapse; font-size: 13px }
.anleitung th, .anleitung td { text-align: left; vertical-align: top; padding: 7px 8px; border-top: 1px solid var(--linie); white-space: normal }
.anleitung th { color: var(--tinte-2); font-weight: 700; border-top: 0 }
.klappe-kopf .ikon { vertical-align: -3px }

/* Offene Einladungen in den Konten (25.10.2026) */
.einladungen { display: flex; flex-direction: column; gap: 10px; padding-top: 4px }
.einl-alle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tinte-2); cursor: pointer }
.einl-tabelle { width: 100%; border-collapse: collapse; font-size: 13px }
.einl-tabelle td { padding: 7px 8px; border-top: 1px solid var(--linie); text-align: left; vertical-align: top; white-space: normal }
.einl-tabelle td:first-child { width: 28px; padding-right: 0 }
.einl-tabelle td.rechts { text-align: right; white-space: nowrap }
.einl-tabelle a { color: var(--tinte); font-weight: 700; text-decoration: none }
.einl-tabelle a:hover { text-decoration: underline }

/* =====================================================================================
   Designsystem v3 (25.10.2026, Renzo, nach einem Video über SaaS-Oberflächen: „alles umsetzen,
   was Sinn macht“). Die Regeln stehen in 06_auswertungen/designregeln-app.md, wer hier etwas
   ändert, hält sich daran. Schicht über allem oben, ändert kein Verhalten.
   ===================================================================================== */
:root {
  --radius: 14px;        /* Flächen: Panel, Kachel, Tabelle, Chat, Spalte, Dialog */
  --radius-m: 10px;      /* in einer Fläche: Karte, Menü, Feld, Blase, Hinweis */
  --radius-s: 6px;       /* klein: Logo, Taste, Mini-Chip */
}

/* Ein Radius je Ebene. Rund (999px) bleiben nur Knöpfe, Pillen, Segmente und Suchfelder. */
.stellen-karte, .kampagnen-karte, .arm, .karte, .menue-liste, .kontext-menue, .regler, .kurz-legende, .auto-block,
.notiz-feld textarea, .feld input, .feld textarea, .dialog-feld, .chat-eingabe textarea, .karte textarea, body.login input,
blockquote, .warnzeile, .heute-text.rein, .chat-zeile, .klappe-kopf, .tooltip, .meldung, .skelett-zeile { border-radius: var(--radius-m) }
.panel, .zahl, .stapel, .chats, .lead-profil, .lead-gespraech, .lead-tabelle, .spalte, .woche, .heute-liste, .dialog { border-radius: var(--radius) }
.logo, kbd, .karte-konto, .karte-ats, .gif-kachel, .blase-gif, .auto-gif, .gif-gewaehlt img, .stift, .name-knopf, .seite-zu-knopf { border-radius: var(--radius-s) }
.marke-icon { border-radius: var(--radius-s) } .marke-icon.gross { border-radius: var(--radius-m) }

/* Stufen: ruhige Pille mit Punkt. Die Farbe sitzt nur im Punkt, das Wort sagt den Rest
   (wie Attio und Linear). Vorher war jede Stufe eine eigene Fläche, die Leads-Liste ein Flickenteppich. */
.pille[class*="stufe-"], .lead-stufe[class*="stufe-"] { display: inline-flex; align-items: center; gap: 6px; background: var(--flaeche); color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--linie-stark); font-size: 12px; font-weight: 600; padding: 2px 9px 2px 8px; border-radius: 999px }
.pille[class*="stufe-"]::before, .lead-stufe[class*="stufe-"]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--punkt, var(--tinte-3)) }
.stufe-geantwortet { --punkt: var(--tinte-3) }
.stufe-interessiert { --punkt: var(--reihe-3) }
.stufe-termin { --punkt: var(--pink) }
.stufe-ats_warte, .stufe-ats_bestaetigung, .stufe-ats_kunde, .stufe-ats_angebot { --punkt: var(--pink-dunkel) }
.stufe-platziert { --punkt: var(--gut) }
.stufe-abgesagt { --punkt: transparent }
.pille.stufe-abgesagt, .lead-stufe.stufe-abgesagt { color: var(--tinte-2) }
.pille.stufe-abgesagt::before, .lead-stufe.stufe-abgesagt::before { box-shadow: inset 0 0 0 1.5px var(--tinte-3) }
/* Spaltenköpfe der Pipeline mit denselben Punkten */
.spalte header b::before { background: var(--punkt, var(--tinte-3)) }
.stufe-abgesagt header b::before { box-shadow: inset 0 0 0 1.5px var(--tinte-3) }

/* Keine Deko: das Datum über der Begrüßung ist Text, keine gelbe Pille mit Stern */
.gruss-datum { font-size: 13px; font-weight: 600; color: var(--tinte-2); font-variant-numeric: tabular-nums }

/* Leere Zustände: ein kleines Markenicon und ein Satz, kein Riesenbild */
.marke-icon.riesig { width: 56px; height: 56px; border-radius: var(--radius-m); opacity: .85 }
.leer-gross { gap: 10px }

/* Icons statt Emojis */
.blase-anhang { display: inline-flex; align-items: center; gap: 6px }
.blase-anhang .ikon { width: 14px; height: 14px }
.cm .ikon { width: 12px; height: 12px; margin-left: 4px; vertical-align: -2px; color: #8a5a00 }
.seite-zu-knopf .ikon { width: 16px; height: 16px; display: block }

/* Rückgängig: Haken heißt „hat geklappt“, die Linie läuft in RUECKGAENGIG_MS ab, dann ist es
   endgültig. So muss niemand neu laden, um zu sehen, ob es geklappt hat. */
.rueckgaengig .ikon { width: 16px; height: 16px; color: var(--pink); stroke-width: 2.6 }
.rg-zeit { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pink); transform-origin: left; animation: rg-ablauf linear forwards }
@keyframes rg-ablauf { from { transform: scaleX(1) } to { transform: scaleX(0) } }
@media (prefers-reduced-motion: reduce) { .rg-zeit { animation: none; display: none } }

/* Wochenbilanz auf der Startseite (25.10.2026) */
.s-bilanz h3 { margin: 0 0 10px }

/* =====================================================================================
   Apple-Schicht (25.10.2026, Renzo: „bau die App, wie Apple sie bauen würde“, ohne die Marke zu
   ändern). Nach Apples Human Interface Guidelines (Sidebars, Layout) und den WWDC-Talks zu
   Designprinzipien: Wo bin ich, wohin kann ich, was ist hier. Regeln in designregeln-app.md.
   ===================================================================================== */

/* Sidebar wie in Mail und Musik: Suche ganz oben, dann die Arbeit von heute, dann Gruppen */
.seite-suche { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 7px 10px;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-m); background: var(--grund); color: var(--tinte-3);
  font: inherit; font-size: 13.5px; text-align: left; cursor: text; transition: border-color var(--schnell) var(--kurve) }
.seite-suche:hover { border-color: rgba(43, 11, 63, .26) }
.seite-suche .ikon { width: 16px; height: 16px; color: var(--tinte-3) }
.seite-suche kbd { margin-left: auto; min-width: 0; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte-2) }
body.seite-zu .seite-suche { justify-content: center; padding: 9px 0 }
.seite-nav .seite-gruppe { padding: 18px 12px 6px }
.seite-unten { margin-top: auto; padding-top: 8px }
.seite-fuss { margin-top: 8px }

/* Zähler wie in Mail: eine leise Zahl am Rand. Pink bleibt dem, was man jetzt tun soll. Eingeklappt
   braucht es die kleine Marke, sonst sieht man die Zahl nicht. */
.seite-nav .zahl-chip:not(.warn) { background: none; box-shadow: none; color: var(--tinte-2); font-size: 12.5px; font-weight: 600; padding: 0; min-width: 0 }
.seite-nav a[aria-current="page"] .zahl-chip:not(.warn) { color: var(--tinte) }
body.seite-zu .seite-nav .zahl-chip:not(.warn) { background: var(--pink); color: #fff; padding: 0 4px; font-size: 9px }

@media (max-width: 759px) {
  .seite-suche { width: auto; margin: 0; padding: 8px; border: 0; background: none }
  .seite-suche .ikon { width: 20px; height: 20px; color: var(--tinte-2) }
  .seite-unten { margin-top: 0; padding-top: 0 }
  .seite-fuss { margin-top: 0 }
  /* Eingeklappt am Rechner gemerkt: auf dem Handy trotzdem die volle Zeile */
  body.seite-zu .seite { width: auto; padding: 8px 10px }
  /* Nur Icons: die Zahl als kleine Marke am Icon, wie in der Tab-Leiste von iOS */
  .seite-nav a { position: relative }
  .seite-nav .zahl-chip:not(.warn) { position: absolute; top: 1px; right: -2px; background: var(--pink); color: #fff; font-size: 9px; padding: 0 4px; min-width: 0 }
}

/* Jede Seite trägt ihren Namen oben, wie ein Fenstertitel (gesetzt in zeigeReiter, data-titel) */
.bereich[data-titel]::before { content: attr(data-titel); display: block; flex: none; margin: 0 0 16px;
  font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.021em; color: var(--tinte) }
@media (max-width: 759px) { .bereich[data-titel]::before { font-size: 24px; margin-bottom: 12px } }

/* Rückmeldung beim Drücken, nicht erst beim Loslassen */
.chat-zeile:active, .seite-nav a:active, .seite-knopf:active, .seite-suche:active, .klappe-kopf:active,
.lead-tabelle tbody tr:active, .stellen-karte:active { background-color: var(--spur); transition: none }
.stellen-karte:active, .karte:active { transform: scale(.99) }

/* Bedienungshilfen des Systems: mehr Kontrast, weniger Transparenz */
@media (prefers-contrast: more) {
  :root { --linie: rgba(43, 11, 63, .28); --linie-stark: rgba(43, 11, 63, .5); --tinte-2: #4A3358; --tinte-3: #5A4567 }
  .knopf.zweit, .seite-suche { border-color: var(--tinte) }
}
@media (prefers-reduced-transparency: reduce) {
  .seite { background: var(--flaeche) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
  .dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 6, 42, .5) }
}

/* =====================================================================================
   Dark Mode (25.10.2026, Renzo: „in unseren Markenfarben, der der Systemeinstellung folgt“).
   AUS seit 27.10.2026 (Renzo: „kein darkmode“, Arian will ihn nicht): die App ist immer hell,
   die Blöcke stehen unter @media not all und greifen nie. Wieder an: zurück auf
   @media (prefers-color-scheme: dark) und index.html color-scheme „light dark“.
   Grund ist Aubergine statt Schwarz, Pink und Gelb bleiben, wie sie sind. Alles über die Tokens;
   die Regeln darunter fangen nur die Stellen, die Farben fest eingetragen haben. Neue Regeln
   nehmen immer Tokens, dann gilt der Dark Mode von selbst (designregeln-app.md).
   ===================================================================================== */
@media not all {
  :root {
    color-scheme: dark;
    --grund: #14051D;          /* Seitengrund: tiefe Aubergine */
    --flaeche: #1F0E2A;        /* Karte, Panel, Leiste */
    --flaeche-hoch: #2C1739;   /* schwebt: Menü, Dialog, Tooltip, Meldung */
    --spur: #2A1636;
    --linie: rgba(246, 230, 252, .10);
    --linie-stark: rgba(246, 230, 252, .18);
    --tinte: #F7F0FA;
    --tinte-2: #CDB9D8;
    --tinte-3: #A891B5;
    --pink-dunkel: #FF7DB4;    /* als Schrift heller, damit es auf dunklem Grund trägt */
    --pink-hell: rgba(255, 79, 154, .17);
    --reihe-1: #EADCF2;        /* Einladungen: auf dunklem Grund hell statt Aubergine */
    --reihe-3: #B98AD3;
    --gut: #45D27A;  --gut-bg: rgba(69, 210, 122, .15);
    --warn: #FFC23D; --warn-bg: rgba(255, 194, 61, .15);
    --krit: #FF6B6B; --krit-bg: rgba(255, 107, 107, .16);
    --kalt: #A9B6CC; --kalt-bg: rgba(169, 182, 204, .14);
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .35);
    --schatten-2: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
    --schatten-3: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
    --ring: 0 0 0 3px rgba(255, 79, 154, .4);
  }

  /* Flächen, die Tinte als Grund hatten (weiße Schrift darauf): jetzt die gehobene Fläche */
  .reiter a[aria-current="page"], .ich .einst[aria-current="page"], .tooltip, .meldung, .meldung.fehler, .rueckgaengig,
  .logo.ersatz, .avatar, .schalter.an, .ablauf-kachel.k-aktion, .kap-ist { background-color: var(--flaeche-hoch); border-color: var(--flaeche-hoch) }
  .tooltip, .meldung, .rueckgaengig { box-shadow: var(--schatten-3), inset 0 0 0 1px var(--linie) }
  .menue-liste, .kontext-menue, .dialog { background: var(--flaeche-hoch); box-shadow: var(--schatten-3), inset 0 0 0 1px var(--linie) }
  .dialog::backdrop { background: rgba(5, 0, 9, .6) }

  /* Leiste */
  .seite { background: var(--flaeche) }
  .seite-gruppe, .ich-wer .textknopf, .seite-zu-knopf { color: var(--tinte-3) }
  .seite-nav a[aria-current="page"] { box-shadow: none }
  @media (max-width: 759px) { .seite { background: rgba(31, 14, 42, .9) } }
  @media (max-width: 759px) and (prefers-reduced-transparency: reduce) { .seite { background: var(--flaeche) !important } }

  /* Wortmarke: der Aubergine-Schatten verschwindet auf Aubergine, darum fast Schwarz */
  .wort.sidra { text-shadow: 3px 0 0 var(--pink), -3px 0 0 var(--pink), 0 3px 0 var(--pink), 0 -3px 0 var(--pink),
    2px 2px 0 var(--pink), -2px 2px 0 var(--pink), 2px -2px 0 var(--pink), -2px -2px 0 var(--pink), 5px 5px 0 #050009, 6px 6px 0 #050009 }

  /* Fest eingetragene helle Flächen */
  .pille.stufe-interessiert, .pille.stufe-platziert { background: var(--flaeche) }
  .auto-block, .auto-kasten { background: var(--pink-hell); border-color: rgba(255, 79, 154, .3) }
  .auto-zeile:hover, .auto-zeile.aktiv, .seg.an.erschienen { background: var(--spur) }
  .spalte { background: rgba(255, 255, 255, .025) }
  .spalte.ziel { background: var(--pink-hell); box-shadow: inset 0 0 0 2px rgba(255, 79, 154, .45) }
  .bericht-leiste .mini:hover:not(:disabled) { background: var(--spur) }
  .gruss-pille { background: rgba(255, 217, 61, .14) }
  .skelett-zeile { background: linear-gradient(90deg, var(--spur) 0%, #352042 50%, var(--spur) 100%); background-size: 200% 100% }
  .nur-lesen-hinweis { background: #3A2E10; color: var(--tinte); border-color: rgba(255, 194, 61, .3) }

  /* Fest eingetragene dunkle Schrift: auf dunklem Grund die helle Fassung */
  .pille.aus, .cm.warn, .stelle-vorschlag .haken, .cm .ikon, .naechste.wir.gelb { color: var(--warn) }
  .cm.gut { background: var(--gut-bg); color: var(--gut) }
  .trend.runter { color: var(--krit) }
  .marke-nicht, .nicht-zeile { color: var(--krit) }

  /* Linien und Hover, die mit Tinte-Transparenz gebaut waren */
  .knopf.zweit:hover, .filter input[type="search"]:hover, .wahlfeld:hover, select:hover, textarea:hover, .seite-suche:hover { border-color: rgba(246, 230, 252, .3) }
  .wahl button[aria-pressed="true"] { background: var(--flaeche-hoch); box-shadow: 0 1px 2px rgba(0, 0, 0, .4) }
  .karte, .karte.gelb, .karte.rot { box-shadow: var(--schatten-1) }
  .karte:hover { box-shadow: var(--schatten-2) }
  .avatar { box-shadow: 0 0 0 1px var(--linie) }
  input[type="range"]::-webkit-slider-thumb { border-color: var(--flaeche) }
  input[type="range"]::-moz-range-thumb { border-color: var(--flaeche) }
  ::-webkit-scrollbar-thumb { background-color: rgba(246, 230, 252, .16) }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(246, 230, 252, .3) }
  * { scrollbar-color: rgba(246, 230, 252, .2) transparent }

  /* Firmenlogos brauchen ihren hellen Grund, sonst verschwinden schwarze Logos */
  .logo:not(.ersatz) { background: #fff; border-color: transparent }
  img.blase-gif, .gif-kachel img { background: var(--spur) }
}
@media not all {
  :root { --linie: rgba(246, 230, 252, .3); --linie-stark: rgba(246, 230, 252, .5); --tinte-2: #E4D6EC; --tinte-3: #C7B3D3 }
  .knopf.zweit, .seite-suche { border-color: var(--tinte) }
}

/* =====================================================================================
   Weniger Text (25.10.2026, Renzo: „viel zu viel Text … extrem subtil … das meiste ausklappbar“,
   wie apple.com). Eine Zahl statt eines Satzes, Erklärungen im Tooltip oder bei Frag Sidra.
   ===================================================================================== */
.s-offen { font-size: 17px; gap: 10px }
.s-offen-zahl { font-size: 28px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1 }
.s-offen > span:not(.abstand) { color: var(--tinte-2); font-weight: 500 }
.s-offen > .ikon:last-child { color: var(--tinte-3); width: 18px; height: 18px }
.s-offen:hover > .ikon:last-child { color: var(--pink) }

/* Grund in „Kein passender Job“: eine Zeile, ganz im Tooltip */
.vm-warum span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }

/* Aufgabe anlegen erst auf Klick */
.lead-aufgabe-klappe > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: var(--tinte-2); padding: 4px 0 }
.lead-aufgabe-klappe > summary::-webkit-details-marker { display: none }
.lead-aufgabe-klappe > summary .ikon { width: 14px; height: 14px }
.lead-aufgabe-klappe[open] > summary { color: var(--tinte); margin-bottom: 6px }

/* Leeres Gesprächsfeld: nur ein leiser Satz */
.leer-faden .leer { color: var(--tinte-3) }
/* Konto unten: nur der Name, Passwort ändern und Abmelden nach einem Klick */
.seite-fuss:not(.auf) .ich-wer .textknopf { display: none }
#ich-name, #ich-avatar { cursor: pointer }
#ich-name:hover { text-decoration: underline; text-underline-offset: 3px }

/* Frag Sidra: ein ruhiges Fenster, Fragen rechts, Antworten links wie in Nachrichten */
.dialog.frag { width: min(560px, calc(100vw - 32px)); padding: 0; margin-top: 12vh; overflow: hidden; display: none; flex-direction: column; max-height: 72vh }
.dialog.frag[open] { display: flex }
.fr-kopf { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--linie) }
.fr-kopf b { font-size: 15px }
.sidra-bild { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px var(--pink) }
.fr-kopf .sidra-bild { width: 30px; height: 30px }
.fr-liste { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 140px }
.fr-zug { max-width: 88%; display: grid; gap: 8px; justify-items: start }
.fr-zug p { margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--spur); font-size: 14px; line-height: 1.45; white-space: pre-wrap }
.fr-zug.ich { align-self: flex-end; justify-items: end }
.fr-zug.ich p { background: var(--pink-hell); border-radius: 14px 14px 4px 14px }
.fr-zug.fehler p { background: var(--krit-bg) }
.fr-leer { display: grid; gap: 8px; margin: auto 0 }
.fr-beispiel { text-align: left; border: 1px solid var(--linie-stark); background: none; border-radius: var(--radius-m); padding: 8px 12px; font-size: 13.5px; color: var(--tinte-2); cursor: pointer }
.fr-beispiel:hover { color: var(--tinte); border-color: var(--pink) }
.fr-eingabe { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--linie) }
.fr-feld { flex: 1; resize: none; border: 1px solid var(--linie-stark); border-radius: var(--radius-m); padding: 8px 12px; font-size: 14px; background: var(--flaeche); max-height: 120px }
.fr-eingabe .knopf { padding: 8px 12px }
/* Frag Sidra lernt: Bewertung unter der Antwort, offene Fragen in den Einstellungen */
.fr-bewerten { display: flex; gap: 2px; margin-left: -6px }
.fr-bewerten .knopf { color: var(--tinte-3); font-weight: 500; padding: 3px 8px }
.fr-bewerten .knopf:hover { color: var(--tinte) }
.fr-bewerten .ikon { width: 13px; height: 13px }
.fr-danke { color: var(--tinte-3); font-size: 12px }
.fr-korrektur { display: grid; gap: 6px; width: 100%; justify-items: start }
.fr-korrektur .fr-feld { width: 100% }
.fr-offen { display: grid; gap: 14px; padding-top: 4px }
.fr-offen-zeile { display: grid; gap: 4px; justify-items: start }
.fr-offen-zeile .fr-feld { width: 100%; max-width: 640px }

/* X fragt nach dem Grund (25.10.2026): vier Zeilen, Sidras Vorschlag markiert */
.x-wahl { min-width: 300px }
.x-wahl .menue-gruppe { padding: 6px 10px 4px; font-size: 12px; color: var(--tinte); opacity: .7 }
.x-wahl .x-grund { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; text-align: left }
.x-wahl .x-taste { width: 22px; height: 22px; border-radius: var(--radius-s); border: 1px solid var(--linie-stark); display: grid; place-items: center; font-size: 12px }
.x-wahl .x-text { display: grid; gap: 1px }
.x-wahl .x-text small { font-size: 12px; opacity: .7 }
a.vorschlag { text-decoration: none }
.x-wahl .vorschlag { box-shadow: inset 0 0 0 1px var(--pink) }
.x-wahl .x-vorschlag { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--pink-hell); color: var(--pink-dunkel) }

/* Sendestand unter der letzten eigenen Nachricht, wie bei iMessage (26.10.2026) */
.sende-stand { align-self: flex-end; margin: -2px 2px 0 auto; font-size: 11px; color: var(--tinte-3); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px }
.sende-balken { display: block; width: 120px; height: 3px; border-radius: 2px; background: var(--spur); overflow: hidden; position: relative }
.sende-balken::after { content: ""; position: absolute; inset: 0; background: var(--pink); transform-origin: left; transform: scaleX(0); animation: sende-fuellen linear forwards; animation-duration: inherit }
@keyframes sende-fuellen { to { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .sende-balken::after { animation: none; transform: scaleX(1); opacity: .5 } }

/* Anmeldeseite im Stil von genz4gtm.com (Renzo, 26.10.2026: „cooler, im GENZ4GTM-Stil, man soll
   Sidra sehen“). Sticker-Karte mit Aubergine-Rand und hartem Versatzschatten, Sidra als Sticker
   oben drauf, pinke Überzeile, Markenicons schweben angeschnitten am Rand wie das Asterisk der
   Website. Nur hier, die App selbst bleibt ruhig. */
body.login { position: relative; overflow-x: hidden; padding: 72px 16px 40px; background: var(--grund) }
.login-deko { position: fixed; inset: 0; z-index: 0; pointer-events: none }
.login-deko img { position: fixed; z-index: 0; pointer-events: none; opacity: .9 }
.login-deko img:nth-child(1) { width: 300px; top: -70px; left: -80px; transform: rotate(-24deg) }
.login-deko img:nth-child(2) { width: 260px; bottom: -60px; right: -50px; transform: rotate(14deg) }
.login-deko img:nth-child(3) { width: 120px; top: 14%; right: 9%; transform: rotate(22deg) }
@media (max-width: 759px) {
  .login-deko img:nth-child(1) { width: 170px; top: -60px; left: -60px }
  .login-deko img:nth-child(2) { width: 150px; bottom: -50px; right: -40px }
  .login-deko img:nth-child(3) { display: none }
}
body.login main { position: relative; z-index: 1; width: min(380px, 100%); text-align: center;
  background: var(--flaeche); border: 2px solid var(--tinte); border-radius: 24px;
  box-shadow: 6px 6px 0 var(--tinte); padding: 72px 28px 28px; animation: login-rein .4s cubic-bezier(.22, 1, .36, 1) both }
body.login .marke { margin: 2px 0 22px }
body.login form.panel { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; gap: 14px }
body.login label { font-size: 12px; font-weight: 600; color: var(--tinte-2) }
body.login input { height: 44px; border: 1.5px solid var(--linie-stark); border-radius: 12px; padding: 0 14px; font-size: 15px;
  background: var(--flaeche); color: var(--tinte); transition: border-color .15s, box-shadow .15s }
body.login input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-hell) }
body.login .knopf.voll { justify-content: center; height: 46px; margin-top: 6px; font-size: 15px; font-weight: 800;
  border: 2px solid var(--tinte); box-shadow: 3px 4px 0 var(--tinte); transition: transform .12s, box-shadow .12s }
body.login .knopf.voll:hover { background: var(--pink); transform: translateY(-1px); box-shadow: 4px 5px 0 var(--tinte) }
body.login .knopf.voll:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--tinte) }
body.login .knopf.zweit.voll { background: var(--flaeche); color: var(--tinte); box-shadow: none; border: 1.5px solid var(--linie-stark); margin-top: 0; font-weight: 600 }
body.login .knopf.zweit.voll:hover, body.login .knopf.zweit.voll:active { transform: none; box-shadow: none; border-color: var(--tinte) }
body.login .fehler { background: var(--krit-bg); color: var(--krit); border-radius: 10px; padding: 8px 12px; font-size: 13px }
.login-ueber { margin: 0 0 6px; color: var(--pink); font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase }

/* Sidra sitzt halb über der Karte, leicht gedreht, wippt langsam */
.login-sidra { position: absolute; top: -56px; left: 50%; transform: translateX(-50%) }
.login-sidra img { display: block; width: 104px; height: 104px; transform: rotate(-5deg);
  filter: drop-shadow(3px 4px 0 var(--tinte)); animation: login-wippen 4s ease-in-out infinite }
.login-hallo { position: absolute; left: 92px; top: 4px; white-space: nowrap; background: var(--gelb); color: #2B0B3F;
  border: 2px solid var(--tinte); border-radius: 999px 999px 999px 4px; padding: 4px 11px; font-size: 12px; font-weight: 800;
  transform: rotate(4deg); box-shadow: 2px 3px 0 var(--tinte) }
@media (max-width: 380px) { .login-hallo { display: none } }
@keyframes login-wippen { 50% { transform: rotate(-5deg) translateY(-5px) } }
@keyframes login-rein { from { opacity: 0; transform: translateY(16px) } }
@media (prefers-reduced-motion: reduce) { body.login main, .login-sidra img { animation: none } }

@media not all {
  /* Tinte ist im Dunkeln hell: Rand und Schatten nehmen fast Schwarz, die Karte bekommt einen pinken Rand */
  body.login main { border-color: var(--pink); box-shadow: 6px 6px 0 #050009 }
  .login-sidra img { filter: drop-shadow(3px 4px 0 #050009) }
  .login-hallo { border-color: #050009; box-shadow: 2px 3px 0 #050009 }
  body.login .knopf.voll { border-color: #050009; box-shadow: 3px 4px 0 #050009 }
  body.login .knopf.voll:hover { box-shadow: 4px 5px 0 #050009 }
  body.login .knopf.voll:active { box-shadow: 1px 2px 0 #050009 }
  body.login .knopf.zweit.voll { border-color: var(--linie-stark) }
  body.login input:focus { box-shadow: 0 0 0 3px rgba(255, 79, 154, .25) }
  .login-deko img { opacity: .55 }
}

/* --- Logo: Sidra als Memoji (Renzo, 26.10.2026: „in seinen verschiedenen Formen“, der Schriftzug
   sah in der Farbe blöd aus). Bei jedem Bereichswechsel eine andere Pose in einer der acht Lagen,
   wie ein neu aufgeklebter Sticker. Klassen statt style=, die CSP erlaubt keine Inline-Stile. */
.logo-sidra { display: block; width: 124px; height: 124px; object-fit: contain; border-radius: 14px; transform-origin: 50% 70%;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) }
.seite .marke .logo-sidra { width: 124px; height: 124px; margin: -10px 0 -6px -8px }   /* gegen .seite .marke img { height: 36px } */
body.seite-zu .seite .marke .logo-sidra { width: 48px; height: 48px; margin: 0 }
@media (max-width: 759px) { .seite .marke .logo-sidra { width: 42px; height: 42px; border-radius: 9px } }
@media (prefers-reduced-motion: reduce) { .logo-sidra { transition: none } }
.logo-sidra.pos-1 { transform: rotate(-6deg) translate(-2px, 1px) }
.logo-sidra.pos-2 { transform: rotate(4deg) translate(4px, -1px) }
.logo-sidra.pos-3 { transform: rotate(-2deg) translate(8px, 2px) scale(1.04) }
.logo-sidra.pos-4 { transform: rotate(7deg) translate(0, 2px) scale(.96) }
.logo-sidra.pos-5 { transform: rotate(-9deg) translate(6px, 3px) }
.logo-sidra.pos-6 { transform: rotate(2deg) translate(-3px, -2px) scale(1.06) }
.logo-sidra.pos-7 { transform: rotate(-4deg) translate(12px, 0) }
.logo-sidra.pos-8 { transform: rotate(9deg) translate(2px, -1px) scale(.98) }

/* LinkedIn-Knopf im Kopf des Gesprächs: blau wie LinkedIn (Renzo, 27.10.2026) */
.knopf.linkedin { background: var(--linkedin); color: #fff; border: 1px solid var(--linkedin) }
.knopf.linkedin:hover { background: var(--linkedin-dunkel); border-color: var(--linkedin-dunkel) }

/* Auswahl: Klick aufs Bild wählt einen Chat aus, die Leiste oben legt alle zusammen ab (Renzo, 30.10.2026) */
.auswahl-bild { position: relative; flex: none; display: grid; border-radius: 50%; cursor: pointer }
.auswahl-haken { position: absolute; inset: 0; display: none; place-items: center; border-radius: 50%; background: var(--pink); color: var(--flaeche) }
.auswahl-haken .ikon { width: 18px; height: 18px; stroke-width: 3 }
.auswahl-bild.an .auswahl-haken { display: grid }
.auswahl-bild:not(.an):hover .auswahl-haken { display: grid; background: var(--flaeche); color: var(--pink); box-shadow: inset 0 0 0 2px var(--pink) }
.chat-zeile.gewaehlt { background: var(--pink-hell) }
.sammel-leiste { position: sticky; top: -8px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: -8px -8px 6px; padding: 10px 12px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie) }
.sammel-leiste .knopf .ikon { width: 14px; height: 14px }

/* Wissen auf der Seite der Stelle (stellen_wissen.py, 30.10.2026) */
.wissen-frage { display: grid; gap: 8px; padding: 14px 16px; margin-bottom: 10px }
.stelle-infos .lb h3 { margin-top: 16px }

/* To-dos (30.10.2026): eigener Bereich, Zeilen wie die Aufgaben auf der Lead-Seite */
.todo-neu { display: grid; gap: 6px; max-width: 640px }
.todo-gruppe { display: grid; gap: 6px; max-width: 640px }
.todo-gruppe h3 { margin: 0 0 4px }
.lead-aufgabe.todo { padding: 8px 6px 8px 12px; align-items: flex-start }
.lead-aufgabe.todo .lead-aufgabe-wann { min-width: 48px }
.lead-aufgabe-was small a { color: inherit; text-decoration: underline; text-underline-offset: 2px }
.lead-aufgabe-was .todo-notiz { white-space: pre-wrap; margin-top: 2px }