/* ═══════════════════════════════════════════════════════════════════════════
   Darstellungs-Audit, 12.10.2026

   Gemessen in Rahims Chrome auf dem MacBook Pro 16 Zoll (1728 px, und mit
   110 % Zoom 1571 px) und in iPhone-Pro-Breite (393 px): je Ansicht alle
   Elemente, die aus ihrem Kasten laufen, abgeschnitten werden oder den
   Bildschirmrand ueberschreiten. Diese Datei wird zuletzt geladen und
   sammelt die Korrekturen an einer Stelle; jede Regel nennt den Befund.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Versandprotokoll ──────────────────────────────────────────────────────
   "Abwesend bis 27.10." braucht rund 170 px, die Statusspalte hatte 116 px,
   .tk-list schneidet per overflow ab (+54 px). Die Spalte waechst jetzt mit
   ihrem Inhalt; die Hauptspalte gibt nach. */
/* Nur im breiten Kasten: darunter macht style.css aus jeder Zeile eine Karte
   (@container bis 900 px). Ohne die Klammer ueberschrieb diese Regel die
   Kartenansicht, und auf dem iPhone stand wieder das Desktop-Raster mit
   abgeschnittenen Spalten (gemeldet 12.10.2026, 19:32). */
@container (min-width: 901px) {
  .tk-header,
  .tk-row {
    grid-template-columns: minmax(260px, 2.6fr) 116px 140px 140px 96px minmax(130px, max-content);
  }
}
/* Karte auf dem iPhone (Kasten bis 520 px): drei gleiche Spalten zu 79 px,
   "2× geöffnet" braucht 87 px und lief aus dem gruenen Feld (gemeldet
   12.10.2026, 20:48). Die Uhrzeit braucht wenig, Geoeffnet und Geklickt
   bekommen den Rest; der Status nimmt zwei Spalten fuer "Abwesend bis …".
   Das Umbrechen der Abzeichen stand schon in style.css, wurde dort aber von
   der spaeter folgenden Grundregel .tk-badge { white-space: nowrap } wieder
   aufgehoben; hier, in der zuletzt geladenen Datei, greift es. */
@container (max-width: 520px) {
  .tk-row { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); }
  .tk-row > .tk-col-status { grid-column: span 2; }
  .tk-badge,
  .tk-status-chip { max-width: 100%; white-space: normal; }
}
/* Empfaenger im Versandprotokoll (gemeldet 13.10.2026): Name und Adresse
   standen in einer Zeile mit Auslassung, auf dem iPhone fehlte die Domain -
   man sah nicht, an wen die Mail ging. In der Karte jetzt drei Zeilen: Name,
   die ganze Adresse (bricht um, wird nie abgeschnitten), Firma und Domain.
   Im breiten Raster bleibt es bei einer Zeile "Name · Adresse"; die Firma
   erscheint dort nicht, damit die Zeilen nicht hoeher werden. */
.tk-firma { display: none; }
@container (max-width: 900px) {
  .tk-email { white-space: normal; overflow: visible; text-overflow: clip; }
  .tk-email .tk-name { display: block; }
  .tk-email .tk-trenner { display: none; }
  .tk-email .tk-name + .tk-trenner + .tk-adresse {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(var(--n),.72);
  }
  .tk-adresse { overflow-wrap: anywhere; }
  .tk-firma {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: rgba(var(--n),.58);
    overflow-wrap: anywhere;
  }
}
/* Ereignis-Dialog (Klick auf "geöffnet"/"geklickt"): drei Spalten, die
   rechte ("Mensch · 7 min nach Versand") durfte nicht umbrechen und schob
   die Zeile auf dem iPhone seitlich aus dem Dialog (gemeldet 12.10.2026,
   21:01). Bis dahin stand das Raster inline in js/features-ui.js. */
.tk-ev-reihe {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.tk-ev-was { min-width: 0; overflow-wrap: anywhere; }
.tk-ev-wer { font-size: 14px; white-space: nowrap; }
/* Kopf "Alle Sendungen": Zaehler, Hinweis und Knopf standen in einer Zeile,
   der Hinweis wurde auf dem iPhone zur schmalen Spalte, der Knopf ragte hinaus. */
.report-section-title { flex-wrap: wrap; row-gap: 6px; }
/* Tageskopf: acht feste Spalten zu 108 px liefen bei 1571 px 14 px ueber.
   Die Notloesung minmax(84px, 108px) liess die Spalten unter ihren Inhalt
   schrumpfen; der Text lief nach links in die Nachbarspalte ("35 gebounct1
   abgemeldet", "15.10.2026166 gesendet", gemeldet 15.10.2026). Jetzt so
   breit wie der Inhalt: die Beschriftungen sind an jedem Tag gleich und die
   Zahl hat eine Mindestbreite, also stehen die Spalten trotzdem untereinander.
   Reicht der Platz neben dem Datum nicht, rutschen die Zahlen in die
   naechste Zeile, statt sich zu ueberlagern. */
.tk-day-stats { grid-template-columns: repeat(8, max-content) minmax(0, max-content); column-gap: 12px; }
/* 2em reichen fuer drei Stellen; mit 2.4em fehlten am MacBook (1728 px) 39 px
   fuer eine Zeile neben dem Datum. */
.tk-day-stat b { min-width: 2em; }
/* Unter der Breite der acht Spalten (rund 940 px Kasten): Umbruch statt
   Raster. Gemessen am Kasten, nicht am Fenster; bei 1471 px Fenster mit
   Seitenleiste lief "Vorschauen" rechts hinaus (gemeldet 15.10.2026). */
.tk-days { container-type: inline-size; }
@container (max-width: 980px) {
  .tk-day-stats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; margin-left: 0; }
}
.tk-day > summary { flex-wrap: wrap; row-gap: 6px; }

/* ── Kontaktkarte ──────────────────────────────────────────────────────────
   900 px Hoechstbreite fuer Kopf und Karte: die sieben Knoepfe brauchten
   953 px, "E-Mail senden" und "Für Kunden freigeben" brachen zweizeilig um,
   die Leiste stand 117 px ueber den Kartenrand. */
.detail-view { max-width: 1180px; }
.detail-header { flex-wrap: wrap; row-gap: 10px; }
.detail-header .btn-primary,
.detail-header .btn-secondary,
.detail-header .btn-danger,
.detail-header button { white-space: nowrap; }
.detail-actions { flex-wrap: wrap; justify-content: flex-end; }
/* Lange Werte (LinkedIn-Adresse, "Gründerin & Geschäftsführerin …") brechen
   um, statt die Spalte breiter als die Karte zu machen. */
.detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail-row { min-width: 0; }
.detail-row-value { min-width: 0; overflow-wrap: anywhere; }

/* ── Klick-Nachfass ────────────────────────────────────────────────────────
   Die Mindestbreiten der Spalten summierten sich auf 1208 px, verfuegbar
   waren bei 110 % Zoom 1166 px (+22 px Querlauf). Statusspalte 150 px fuer
   "Geöffnet 16.09., 09:24" (+11). */
.kn-table--offen .kn-row { grid-template-columns: minmax(180px, 1.4fr) minmax(110px, 1fr) 100px minmax(150px, 1.3fr) 64px 108px minmax(150px, max-content) minmax(150px, 1.4fr); }
.kn-table--mails .kn-row { grid-template-columns: minmax(180px, 1.4fr) minmax(110px, 1fr) 96px minmax(150px, 1.3fr) 64px 108px minmax(150px, 1.4fr) minmax(150px, max-content); }
.kn-c-status { white-space: nowrap; }
/* "auf der Website wiedererkannt (396 Seiten, 3 h 21 min)": der Zusatz traegt
   .kn-sub und damit nowrap, die Kachel ist 129 px breit (+16). */
.report-kpi-label { overflow-wrap: anywhere; }
.report-kpi-label .kn-sub { white-space: normal; }

/* ── Postfach ─────────────────────────────────────────────────────────────
   Das Lade-Symbol hatte keine Groesse und fuellte die ganze Liste (iPhone:
   ein Kreis ueber die halbe Seite). Die Kontozeile wurde auf "mail@campera…"
   gekuerzt, weil sie neben den vier Reitern nur 45 % bekam. */
.eh-loading svg { width: 28px; height: 28px; }
.eh-ordner-konto { max-width: none; flex: 0 1 auto; min-width: 0; }

/* ── Kalender ──────────────────────────────────────────────────────────────
   Siehe js/ui-modules.js: die Tage einer Woche stehen jetzt in einer Zeile
   (.cal-woche). Bis dahin stand jeder Tag als eigene Zeile untereinander. */
.cal-cell { min-width: 0; }

/* ── Einstellungen ─────────────────────────────────────────────────────────
   Gemeldet am 12.10.2026 (Screenshot vom iPhone, Reiter Mitteilungen): die
   acht Reiter brauchen 882 px in einem 656 px breiten Kasten und liefen auch
   am Mac rechts hinaus; .settings-card-body hatte nirgends einen Innenabstand,
   der Text klebte am Kartenrand und wurde rechts abgeschnitten. */
/* 980 px statt 720: alle acht Reiter passen am Mac in eine Zeile. */
.settings-view { max-width: 980px; }
.settings-tabs { flex-wrap: wrap; }
.settings-card-body { padding: 20px 24px; min-width: 0; overflow-wrap: anywhere; }

/* ── Sequenzen: Kontakt-, Engagement- und Sperrlisten ──────────────────────
   Unter 900 px macht style.css aus jeder Zeile zwei Spalten. Die Zellen
   hatten keine Mindestbreite 0, eine Adresse ohne Trennstelle
   ("r.liana@mimicproductions.com") schob sich deshalb unter den Namen
   daneben (gemeldet 12.10.2026, 22:02, Engagement auf dem iPhone). */
@media (max-width: 900px) {
  .seq-contact-row > span { min-width: 0; overflow-wrap: anywhere; }
  /* Engagement als Karte: Adresse, Name und Sequenz je eine Zeile,
     darunter die drei Zahlen mit Beschriftung nebeneinander. */
  .seq-contact-row.seq-contact-row--eng { grid-template-columns: auto auto minmax(0, 1fr); gap: 2px 20px; padding: 12px 16px; align-items: end; }
  .seq-contact-row--eng > span:nth-child(-n+3) { grid-column: 1 / -1; }
  .seq-contact-row--eng > .seq-eng-sequenz { font-size: 14px; color: var(--text-secondary); margin-bottom: 6px; }
  .seq-contact-row--eng > span[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}

/* ── Sequenzen, Reiter Einstiege ───────────────────────────────────────────
   Gemeldet 12.10.2026, 22:50: das Feld mit dem Einstieg war zwei Zeilen
   hoch und scrollte innen, die Website-Beschreibung darueber nahm sechs
   Zeilen. Das Feld waechst jetzt mit dem Text (js/sequences.js), die
   Beschreibung zeigt drei Zeilen und klappt per Fingertipp auf. */
.einstieg-text { overflow: hidden; resize: none; line-height: 1.45; }
.einstieg-quelle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  cursor: pointer;
}
.einstieg-quelle.ist-offen { display: block; -webkit-line-clamp: unset; }

/* ═══════════════════════════════════════════════════════════════════════════
   iPhone-Audit, 13.10.2026 (Punkt 4 aus Rahims Liste): alle 21 Bereiche,
   Kontaktkarte, Einstellungen, Formulare und Sequenz-Detail mit echten Daten
   in 393 px gemessen und angesehen. Einige Befunde gelten fuer jede Breite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dashboard: Kacheln ohne eigene Farbe (Offene Deals, Kontakte …) zeigten
   ein leeres graues Feld. Das Symbol hatte stroke: var(--kpi-color) ohne
   Rueckfall, also gar keine Linie, und der Hintergrund mischte --on-accent
   (weiss) - im hellen Modus unsichtbar. Gilt im dunklen Modus genauso. */
.kpi-icon { background: color-mix(in srgb, var(--kpi-color, var(--fg)) 8%, transparent); }
.kpi-icon svg { stroke: var(--kpi-color, var(--text-secondary)); }

/* Auswertungen: Absaetze und Balken einer Karte standen ohne Innenabstand
   direkt an der Kartenkante (auch am Mac). Padding statt Margin, weil die
   Absaetze ihr margin inline setzen. */
.report-section > :not(.report-section-title) { padding-left: 20px; padding-right: 20px; }
.report-section > :last-child { padding-bottom: 18px; }

/* Vorlagen: vier Knoepfe in einer Zeile ohne Umbruch (408 px) - "Bearbeiten"
   ragte aus der Karte, "Loeschen" war gar nicht zu sehen. */
.template-actions { flex-wrap: wrap; }

/* Einstellungen, SMTP-Pool: "Loeschen" lief rechts aus jeder Kontokarte. */
.smtp-card-actions { flex-wrap: wrap; }

/* Sequenz-Detail, Schritte: der Textblock neben der Zeitleiste schrumpfte
   nicht, die Karte lief 18 px aus dem Kasten und schnitt "Loeschen" ab. */
.seq-step-body { min-width: 0; overflow-wrap: anywhere; }
.seq-step-actions { flex-wrap: wrap; }

/* Suche nach Kriterien: rohe Systemfelder ohne Gestaltung (auch am Mac). */
.su-kriterien input:not([type="checkbox"]):not([type="radio"]),
.su-kriterien select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(var(--n),.08);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
}
.su-kriterien select[multiple] { padding: 4px 6px; }

/* Formulare: im einspaltigen Raster wuchs ein Feld mit langer Auswahl
   ("automatisch (aus dem Vornamen)") ueber die anderen hinaus. */
.form-row > .form-group { min-width: 0; }
.form-group select { max-width: 100%; }

/* ── iPhone (bis 768 px) ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Doppelter Rand: Seite (28 px) plus eigener Rand des Bereichs kostete
     auf dem iPhone bis zu 60 px Breite (Sequenzen, Signale, Crawler,
     Auswertungen mit 32 px Lade-Abstand plus 12 px je Karte). */
  .seq-page { padding: 0 0 24px; }
  .signals-layout { padding: 0; }
  .cr-page { padding: 0 0 24px; }
  .reports-loading { padding: 0; }
  .report-section { margin: 0 0 20px; }

  /* Crawler: fuenf Kennzahlen untereinander, je eine ganze Zeile. */
  .cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Kontaktkarte: sechs Knoepfe brachen ungleich ueber fuenf Zeilen um.
     Jetzt zwei gleich breite Spalten. */
  .detail-header .detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .detail-header .detail-actions > * { width: 100%; justify-content: center; white-space: normal; }

  /* Kontaktkarte, Sequenzen: der Name stand neben "Pause" und "Entfernen"
     in einer schmalen Spalte (drei Zeilen fuer "Agenturen & Produktionen").
     Knoepfe jetzt darunter. Nur Zeilen mit Knoepfen, die Verbindungspunkte
     mit ihrem kleinen x bleiben einzeilig. */
  .vb-row:has(.lf-btn-sm) { flex-wrap: wrap; }
  .vb-row:has(.lf-btn-sm) > .vb-text { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  /* Verbindungspunkte: Felder ungleich breit, Platzhalter abgeschnitten. */
  .vb-form > select,
  .vb-form > input[type="text"],
  .vb-form > input[type="url"] { flex: 1 1 100%; min-width: 0; }
  /* Das Empfehlungs-Feld steckt in einem eigenen span (wird per hidden
     ein- und ausgeblendet); :not([hidden]), sonst haebe display das auf. */
  .vb-form > span:not([hidden]) { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; }
  .vb-form > span > input[type="text"] { width: 100%; box-sizing: border-box; min-width: 0; }

  /* Suche nach Kriterien: eigener Rand von 20 px zusaetzlich zur Seite. */
  .su-raster { padding: 0; }

  /* Formulare: im einspaltigen Raster hatte das zweite Feld einer Zeile
     keinen Abstand nach unten (form-group:last-child), die naechste
     Beschriftung klebte am Feld ("TITEL", "DU/SIE"). */
  .form-row > .form-group:last-child { margin-bottom: 14px; }

  /* Sequenz-Detail, Kontakte: Adresse in einer schmalen Spalte, mitten im
     Wort gebrochen, weil Schritt, Datum und Knoepfe rechts standen. Jetzt
     Karte: Adresse ueber die volle Breite, Angaben zu zweit, Knoepfe unten. */
  .seq-contact-row:has(.seq-contact-aktionen) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .seq-contact-row:has(.seq-contact-aktionen) > .seq-contact-email { grid-column: 1 / -1; }
  .seq-contact-row > .seq-contact-aktionen { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; margin-top: 4px; }
}

/* ── iPhone (bis 768 px) ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Versandprotokoll: der Hinweis rutscht unter Titel und Knopf. */
  .tk-days-hint { order: 10; flex-basis: 100%; margin-left: 0; }
  /* Ereignis-Dialog: "Mensch · …" rutscht unter die Uhrzeit. */
  .tk-ev-reihe { grid-template-columns: 76px minmax(0, 1fr); row-gap: 2px; }
  .tk-ev-wer { grid-column: 2; white-space: normal; }

  /* Einstellungen: der Ansichtskasten hat schon Rand, nicht noch einmal 16 px. */
  .settings-view { padding: 16px 0 32px; }
  .settings-tab { flex: 1 1 auto; padding: 7px 12px; }
  .settings-card-body { padding: 16px; }

  /* Dashboard: zwei Kacheln je Zeile liefen 29 px ueber, weil 1fr nicht
     unter die Inhaltsbreite schrumpft. */
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card { min-width: 0; padding: 14px; gap: 10px; }

  /* Aufgaben und Firmen: lange Adressen und Firmennamen ohne Leerzeichen
     ("laurentius.kollmann@elfgenpick.de") sprengten die Zeile. */
  .task-title, .company-row-name { overflow-wrap: anywhere; }
  .company-row-meta { display: none; }

  /* Signale: Kopf mit drei Knoepfen, Karten mit 320 px Mindestbreite und die
     LinkedIn-Tabelle (+716 px) liefen aus dem Bild. */
  .signals-header-actions { flex-wrap: wrap; }
  .signals-grid { grid-template-columns: minmax(0, 1fr); }
  .li-head { flex-direction: column; gap: 10px; }
  #li-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sequenzliste, Warteschlange, Auswertung: Tabellen mit sechs bis acht
     Spalten (+390 px). Das waagerechte Wischen vom 12.10. schnitt beim
     Wischen die Namen ab (gemeldet 12.10.2026, 22:20). Jetzt eine Karte je
     Zeile: Name oben, darunter die Werte mit Beschriftung, zwei je Zeile
     (bei drei brach "EINGESCHRIEBEN" mitten im Wort), Knoepfe unten. */
  .seq-table-head { display: none; }
  .seq-table .seq-table-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 14px 16px;
    align-items: start;
  }
  .seq-table-row > * { min-width: 0; overflow-wrap: anywhere; }
  .seq-table-row > .seq-name,
  .seq-table-row > .seq-row-actions { grid-column: 1 / -1; }
  .seq-table-row > .seq-row-actions { flex-wrap: wrap; }
  .seq-table-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    overflow-wrap: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .seq-table-row > .seq-rate { font-size: 15px; }

  /* Reiterknoepfe (Abmeldungen: Alle, Abgemeldet, Hard Bounce …) standen in
     einer Zeile und liefen rechts hinaus; jeder Knopf brach zweizeilig um. */
  .seq-tabs-mini { flex-wrap: wrap; gap: 6px; }
  /* Einstiege: vier Knoepfe in drei ungleichen Zeilen; jetzt fuellen sie
     ihre Zeile, der Text darin bleibt einzeilig. */
  .einstieg-aktionen > button { flex: 1 1 auto; white-space: nowrap; justify-content: center; text-align: center; }
  .seq-tab-mini { white-space: nowrap; }

  /* Sequenz-Einstellungen: sieben Tagesknoepfe und drei Felder in je einer
     Zeile ohne Umbruch, die Seite wurde dadurch seitlich wischbar (Absender
     wirkte schmal, rechts leer). Das Symbol links nimmt auf dem iPhone 50 px
     Textbreite und faellt weg. */
  .seq-settings-card { padding: 16px; }
  .seq-settings-icon { display: none; }
  .seq-settings-body { min-width: 0; }
  .seq-day-picker { flex-wrap: wrap; }
  .seq-time-row { flex-wrap: wrap; }
  .seq-time-row select { max-width: 100%; }
  .seq-stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seq-contact-row { grid-template-columns: minmax(0, 1fr) auto; }
  .seq-contact-email { overflow-wrap: anywhere; }

  /* Vorlagen: Name und Knoepfe in einer Zeile (+271 px). */
  .template-card-header { flex-wrap: wrap; gap: 8px; }
  .template-name { overflow-wrap: anywhere; }

  /* Crawler, Reiter Sonden: die Rasterregel stand hinter der Handy-Regel und
     hob sie auf (+82 px). */
  .cr-dec-zeile { grid-template-columns: minmax(0, 1fr); }

  /* Kontaktkarte: eine Spalte, Beschriftung ueber dem Wert. */
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-row { flex-wrap: wrap; align-items: flex-start; }
  .detail-row-label { min-width: 0; }
  .detail-actions { justify-content: flex-start; }
  .doc-section { min-width: 0; overflow-wrap: anywhere; padding: 16px; }
  /* Dokumente: Ueberschrift, Typauswahl und Knopf in einer Zeile; die
     Ueberschrift wurde auf Buchstabenbreite gedrueckt ("DO KU ME NT …",
     gemeldet 12.10.2026, 21:01). Jetzt eine eigene Zeile darueber. */
  .doc-section-header { flex-wrap: wrap; }
  .doc-section-title { flex: 1 1 100%; overflow-wrap: normal; }
  .doc-upload-btn { white-space: nowrap; }
}