/* ====================================================================================
   LEADS — der Bereich der Leadpartner (Runde 75). Namensraum ld-.
   ------------------------------------------------------------------------------------
   Zielgruppe ist ein Versicherungsberater, kein Vertriebler: er oeffnet die App vielleicht
   einmal pro Woche, meistens am Handy, und will in zwei Minuten fertig sein. Daraus folgt
   fast jede Entscheidung in dieser Datei:

     - EINE Spalte, hoechstens 760 px breit. Ein Formular ueber 1500 px zu ziehen macht es
       nicht schneller, sondern nur unuebersichtlich.
     - Feldbeschriftungen ueber dem Feld, nie daneben: nebeneinander bricht am Handy.
     - Firmennamen brechen um, statt gekuerzt zu werden. Am Handy hilft ein `title` nichts,
       dort gibt es kein Ueberfahren (dieselbe Lehre wie im ARCHIV, Runde 74).
     - Keine Tabelle fuer die Leads. Fuenf Spalten passen bei 320 px nicht nebeneinander,
       und ein waagerechter Roller ist am Handy die schlechtere Antwort als eine Karte,
       die umbricht. Tabelle gibt es nur fuer die Staffel: zwei Spalten, kurze Werte.

   Grundsatz wie im Rest der App: keine harte Farbe. Flaechen nehmen
   var(--lila|gruen|rot|amber|blau), Text die -t-Variante (--lilat, --gruent, ...). Damit
   stimmt der Nachtmodus von selbst, ohne dass hier eine einzige html.nacht-Regel noetig ist.

   Schriftgroessen der Eingabefelder stehen bewusst NICHT hier: styles.css setzt sie im
   Block „max-width: 900px" auf 18 px, damit iOS-Safari beim Antippen nicht hineinzoomt.
   Eine Regel in dieser Datei wuerde die spaeter geladene sein und genau das kaputtmachen.
   ==================================================================================== */

/* ---------- Die eine Spalte ---------- */

.ld-blatt { max-width: 760px; margin: 0 auto; }
/* 18 px, weil das der Abstand von `.card + .card` in styles.css ist: zwischen einer Karte
   und der Rueckmeldung darueber soll dieselbe Luft stehen wie zwischen zwei Karten. */
.ld-blatt > * + * { margin-top: 18px; }

/* ---------- Rueckmeldung nach dem Absenden ---------- */

/* Sie steht ueber dem Formular, traegt tabindex="-1" und bekommt nach dem Absenden den
   Fokus: wer mit der Tastatur oder einem Vorleser arbeitet, erfaehrt sonst nirgends, dass
   der Lead angekommen ist. */
.ld-ok {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: var(--gruen-soft); color: var(--gruent);
  border-radius: var(--r3); padding: var(--s4) var(--s4);
  font-size: var(--fs-text); line-height: 1.45;
}
.ld-ok:focus-visible { outline: 2px solid var(--gruent); outline-offset: 2px; }
/* Gruen bleibt das Hakensymbol und die Flaeche. Der TEXT nimmt die normale Schriftfarbe:
   --gruent auf --gruen-soft misst 4,52:1 und liegt damit nur um zwei Hundertstel ueber dem
   WCAG-Soll von 4,5:1. Das ist keine Reserve, sondern ein Zufall, und die Meldung, die man
   nach dem Absenden liest, ist der falsche Ort dafuer. */
.ld-ok b { display: block; font-size: var(--fs-karte); font-weight: 700; color: var(--text); }
.ld-ok span { display: block; margin-top: var(--s1); color: var(--text); }
.ld-ok svg { flex: none; margin-top: 2px; }

/* ---------- Das Formular ---------- */

.ld-vor {
  font-size: var(--fs-text); color: var(--tsoft); line-height: 1.5;
  margin: 0 0 var(--s4);
}
.ld-fehler {
  background: var(--rot-soft); color: var(--rott);
  border-radius: var(--r2); padding: var(--s3) var(--s4);
  font-size: var(--fs-text); font-weight: 500; line-height: 1.45;
  margin-bottom: var(--s4);
}

/* Die Firma ist das einzige Pflichtfeld und bekommt deshalb sichtbar mehr Gewicht als der
   Rest: groessere Beschriftung, groesseres Feld. Wer nur dieses eine ausfuellt, hat einen
   brauchbaren Lead abgegeben. */
.ld-gross label { font-size: var(--fs-text); color: var(--text); font-weight: 700; }
.ld-gross input { font-size: var(--fs-karte); padding: var(--s3) var(--s4); }
.ld-pflicht {
  display: inline-block; margin-left: var(--s2);
  background: var(--soft); color: var(--lilat);
  font-size: var(--fs-mikro); font-weight: 700;
  border-radius: var(--r-pille); padding: 1px 8px;
  vertical-align: 1px;
}

.ld-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
/* Die PLZ braucht nie mehr als fuenf Stellen, der Ort dagegen jedes Pixel. Feste erste
   Spalte statt 1fr 1fr: sonst steht ein halbleeres Feld neben einem zu engen. */
.ld-plzort { display: grid; grid-template-columns: 110px 1fr; gap: 0 var(--s3); }
.ld-zwei > *, .ld-plzort > * { min-width: 0; }

/* Zwischenueberschrift im Formular. Kein zweiter Schritt und kein Reiter: nur eine ruhige
   Linie, damit der zweite Teil nicht wie eine Fortsetzung des ersten aussieht. */
.ld-trenner {
  font-size: var(--fs-fein); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--lilat); border-top: 1px solid var(--line);
  padding-top: var(--s4); margin: var(--s2) 0 var(--s4);
}

/* Die Hochrechnung unter dem Monatsumsatz. Sie ist eine Schaetzung und sieht auch so aus:
   Nebentext, nicht das Lila der .hint-Klasse, die in dieser App eine Zusage markiert. */
.ld-hilf {
  font-size: var(--fs-fein); color: var(--tsoft); line-height: 1.45;
  margin-top: var(--s2);
}

/* Der Satz direkt unter der Zwischenueberschrift gehoert zum ganzen Abschnitt, nicht zu einem
   Feld. .ld-hilf ist sonst der Nebentext UNTER einem Feld und traegt deshalb nur oben Abstand;
   hier braucht er ihn unten, sonst klebt er an der naechsten Beschriftung (gemessen bei 375 px). */
.ld-trenner + .ld-hilf { margin-top: 0; margin-bottom: var(--s4); }

.ld-senden { margin-top: var(--s5); }

/* ---------- Betriebssuche (Runde 91) ---------- */

/* Die Karte selbst braucht keine eigene Regel: sie ist eine .card wie jede andere, und
   .gp-row, .row-list und .rowi kommen aus styles.css — dieselben Bausteine, mit denen der
   Vertrieb im Kundenformular sucht. Neu ist hier nur, dass eine Trefferzeile ANKLICKBAR ist.
   In app.js steht dafuer ein `style="cursor:pointer"` direkt am Element; das ist die Stelle,
   an der diese Datei es besser machen kann.

   Die Mindesthoehe ist kein Schmuck: die Zeile ist die Trefferflaeche, mit der am Handy ein
   Betrieb uebernommen wird. .rowi allein misst mit einer einzeiligen Adresse etwa 40 px,
   mit 44 px bleibt Luft, wenn Google einmal nur den Firmennamen liefert. */
/* Der leere Trefferkasten wird AUSGEBLENDET und nicht bloss nicht gefuellt. Ein sichtbares
   Element mit 0 px Hoehe ist genau der Befund, den der Messstand meldet — und er hat recht:
   es steht in der Reihenfolge der Seite, nimmt Fokus und Abstand mit und ist doch nicht da. */
.ld-suche .row-list:empty { display: none; }
.ld-suche .row-list { margin-top: var(--s3); }
.ld-treffer { cursor: pointer; border-radius: var(--r2); min-height: 44px; }
.ld-treffer:hover { background: var(--soft); }
.ld-treffer:focus-visible { outline: 2px solid var(--lilat); outline-offset: -2px; }

/* Zwei Eingabefelder nebeneinander sind bei 320 px je 101 px breit: der Platzhalter „Name des
   Betriebs" braucht 149 px und wird abgeschnitten. Gemessen, nicht geschaetzt — der Messstand
   unten meldet es als „Platzhalter passt nicht". Deshalb untereinander, wie im Formular
   darunter auch (.ld-zwei bei 700 px).
   Der Knopf bekommt seine volle Breite schon von styles.css (.gp-row .btn bei 900 px). */
@media (max-width: 700px) {
  .ld-suche .gp-row { flex-direction: column; }
}

/* ---------- „Danach uebernehmen wir" und die Regellisten ---------- */

/* Die Karte „Danach uebernehmen wir" ist Beiwerk und steht unter dem Absendeknopf. Ohne
   Schatten tritt sie hinter das Formular zurueck, statt wie ein zweiter Arbeitsschritt
   auszusehen. Die feine Linie der Grundregel behaelt sie. */
.ld-info { box-shadow: none; }

.ld-punkte { list-style: none; padding: 0; margin: 0; }
.ld-punkte li {
  position: relative; padding-left: var(--s5);
  font-size: var(--fs-text); line-height: 1.5;
}
.ld-punkte li + li { margin-top: var(--s2); }
.ld-punkte li::before {
  content: ''; position: absolute; left: var(--s2); top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lilat);
}

.ld-fuss {
  font-size: var(--fs-fein); color: var(--tsoft); line-height: 1.5;
  margin-top: var(--s3);
}
.ld-mitte { text-align: center; margin-top: var(--s3); }

.ld-hinweis {
  display: flex; align-items: flex-start; gap: var(--s2);
  background: var(--blau-soft); color: var(--blaut);
  border-radius: var(--r2); padding: var(--s3) var(--s4);
  font-size: var(--fs-text); line-height: 1.45;
}
.ld-hinweis svg { flex: none; margin-top: 2px; }

/* ---------- Listen (Meine Leads und Meine Provision) ---------- */

.ld-liste { display: flex; flex-direction: column; }
/* Oben ausgerichtet, nicht mittig: der Firmenname darf zwei oder drei Zeilen hoch werden,
   und der Statuschip beziehungsweise der Betrag daneben gehoert dann neben die ERSTE Zeile.
   Mittig gesetzt schwebt er auf halber Hoehe irgendwo neben den Nebenangaben. */
.ld-zeile {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding: var(--s3) 2px;
  border-bottom: 1px solid var(--line);
}
.ld-zeile:last-child { border-bottom: 0; }
/* flex-basis 200 px statt 0: bei 320 px rutscht der Statuschip damit in die zweite Zeile,
   statt den Firmennamen auf ein paar Pixel zusammenzudruecken. Genau dieser Fehler ist im
   ARCHIV gemessen worden (Namensblock auf 0,0 px). */
.ld-zeile-haupt { flex: 1 1 200px; min-width: 0; }
.ld-zeile-rand { flex: none; margin-left: auto; }

/* Der Firmenname bricht um und wird NICHT gekuerzt. Ein `title` ist nur die Zugabe fuer die
   Maus; am Handy gibt es kein Ueberfahren, dort muss der Name selbst vollstaendig dastehen. */
.ld-firma {
  display: block; font-size: var(--fs-text); font-weight: 600; line-height: 1.35;
  overflow-wrap: anywhere;
}
.ld-sub {
  display: block; margin-top: 2px;
  font-size: var(--fs-fein); color: var(--tsoft); line-height: 1.45;
  overflow-wrap: anywhere;
}
.ld-stand { display: block; margin-top: var(--s2); }

/* `flex: 0 1 auto` mit min-width: 0, NICHT `flex: none`. Der laengste Wert dieser Spalte ist
   die Spanne der obersten Stufe („ca. 750 - 1.250 €, wird im Einzelfall festgelegt"): bei
   320 px braucht sie mehr Platz, als die Zeile hat. Mit `flex: none` waere der Kasten auf
   seiner Inhaltsbreite stehengeblieben und haette die ganze Seite seitlich verschoben. So
   rutscht er in die naechste Zeile und der Text bricht um. */
.ld-betrag {
  flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: right;
  font-size: var(--fs-text); line-height: 1.4;
}
.ld-betrag b { font-size: var(--fs-karte); font-weight: 800; }
/* Die oberste Stufe ist eine Spanne und keine Zahl. Sie bricht um statt zu kuerzen, sonst
   endet „wird im Einzelfall festgelegt" nach zwei Woertern. */
.ld-spanne {
  display: inline-block; max-width: 220px; white-space: normal;
  color: var(--ambert); font-weight: 600; font-size: var(--fs-fein);
}
.ld-offen { color: var(--tsoft); font-size: var(--fs-fein); }

/* ---------- Kennzahlen ---------- */

/* Drei Kacheln, nicht vier: .kpi-row aus styles.css steht fest auf vier Spalten und liesse
   rechts ein Loch. Die Kachel selbst bleibt die gemeinsame .kpi. */
.ld-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.ld-kpis > * { min-width: 0; }

/* ---------- Die Staffel ---------- */

/* Zwei Spalten mit kurzen Werten, deshalb hier eine echte Tabelle. Sie steckt in .tablewrap
   und rollt notfalls in sich selbst, statt die Seite breiter zu machen. */
.ld-staffel td:last-child, .ld-staffel th:last-child { text-align: right; white-space: nowrap; }
/* `table.liste tbody tr` in styles.css setzt den Zeiger auf „klickbar" und wiegt (0,1,3).
   Ein blosses `.ld-staffel tbody tr` waere (0,1,2) und verlore: die Staffel ist aber nur
   zum Nachlesen da, ein Klick tut dort nichts. */
table.liste.ld-staffel tbody tr { cursor: default; }
/* Die oberste Stufe traegt eine Spanne. Sie wird hervorgehoben, damit niemand sie fuer eine
   feste Zahl haelt: gefaerbt wird nur die Flaeche, die Schrift bleibt die der Tabelle. */
.ld-staffel-spanne td { background: var(--amber-soft); }
.ld-staffel-spanne td:first-child { border-radius: var(--r1) 0 0 var(--r1); }
.ld-staffel-spanne td:last-child { border-radius: 0 var(--r1) var(--r1) 0; }
.ld-bonus {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-text); font-weight: 600;
}
.ld-bonus svg { color: var(--lilat); }

/* ---------- Schmale Fenster ---------- */

@media (max-width: 700px) {
  /* Zwei Felder nebeneinander sind bei 375 px je 166 px breit: zu wenig fuer eine
     Telefonnummer und viel zu wenig fuer eine E-Mail-Adresse. */
  .ld-zwei { grid-template-columns: 1fr; }
  /* „Gewonnene Leads" ueber die volle Breite, darunter die beiden Geldkacheln nebeneinander:
     drei 22-px-Zahlen nebeneinander passen bei 320 px nicht. */
  .ld-kpis { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .ld-kpis > :first-child { grid-column: 1 / -1; }
  .ld-spanne { max-width: none; }
}