/* Lead-App - mobil zuerst. Grosse Flaechen, hoher Kontrast:
   Peter bedient das mit Arbeitshaenden, oft draussen bei Sonne.

   Farben und Schrift von bodensprick.de uebernommen (geprueft am 18.07.2026):
     Logo-Rot       #bd173a  (Logoblock der Website)
     Aktions-Rot    #cc0000  ("Jetzt individuelles Angebot anfordern")
     Fliesstext     #000, Sekundaertext #666
     Ueberschriften Ubuntu, Fliesstext System-Schrift

   WICHTIG: Ubuntu wird NICHT von Google Fonts nachgeladen. Das waere eine
   Datenuebertragung an Google bei jedem Aufruf - genau das, was wir bei
   Bewerberdaten nicht wollen. Ist Ubuntu lokal installiert, wird es benutzt,
   sonst faellt die App sauber auf die System-Schrift zurueck. */

:root {
  /* FARBREGEL (Stef, 18.07.): Rot bedeutet WARNUNG - und sonst nichts.
     Einzige Ausnahme ist die Kopfzeile, die die Marke traegt.
       gruen  = tun, positiv        (Anrufen, neu, Fortschritt)
       blau   = ruhige Nebenaktion  (SMS, Notiz speichern)
       bernstein = hakt, dranbleiben (nicht erreicht, faellige Wiedervorlage)
       dunkelgrau = ausgewaehlt      (Filter, Statuskachel)
       rot    = NUR Loeschen                                                */
  --rot: #bd173a;          /* Vorgabe; wird je Kunde ueberschrieben (konfig) */
  --rot-warnung: #cc0000;  /* ausschliesslich Loeschen */
  --gruen: #15803d;        /* tun, neu, positiv */
  --gruen-dunkel: #116232;
  --gruen-blass: #e6f4ea;
  --gruen-rand: #a8d5b5;
  --blau: #1d4ed8;         /* ruhige Nebenaktion */
  --blau-blass: #eef2ff;
  --bernstein: #b45309;    /* Handlungsbedarf - klar von Rot unterscheidbar */
  --bernstein-blass: #fef3e2;
  --dunkel: #2b2b2e;       /* ausgewaehlt */
  --grau: #666;
  --grau-hell: #f4f4f5;
  --rand: #e2e2e5;
  --text: #000;
  --flaeche: #fff;

  --schrift: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
             Cantarell, "Helvetica Neue", sans-serif;
  --schrift-titel: Ubuntu, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* iOS gibt Knoepfen ein eigenes Aussehen - das abstellen, damit die App auf
   allen Geraeten gleich aussieht. Die FARBE setzen wir jeweils selbst.
   Antippbares ist blau, Gelesenes schwarz (Stef, 20.07.): Auf dem Handy sieht
   man so sofort, was Knopf ist und was Formularantwort. */
button, input, select, textarea {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  background: var(--grau-hell);
  padding-bottom: 4rem;
}

h1, h2, h3, .d-name { font-family: var(--schrift-titel); font-weight: 400; }

/* --- Kopfzeile mit Wortmarke --------------------------------------------- */
#kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .6rem;
  padding: max(.55rem, env(safe-area-inset-top)) .9rem .55rem;
  background: var(--rot); color: #fff;
}
.wortmarke {
  font-family: var(--schrift-titel);
  font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
}
.wortmarke .boden { font-weight: 400; }
.wortmarke .sprick { font-weight: 700; }
#kopf h1 {
  flex: 1; margin: 0; font-size: .95rem; font-weight: 400;
  opacity: .85; padding-left: .6rem; border-left: 1px solid rgba(255,255,255,.35);
}
#kopf select {
  background: rgba(255,255,255,.16); color: #fff; border: 0;
  border-radius: 6px; padding: .4rem .5rem; font-size: .9rem;
}
#kopf select option { color: #000; }
.zurueck {
  background: none; border: 0; color: #fff;
  font-size: 2rem; line-height: 1; padding: 0 .2rem 0 0; cursor: pointer;
}

main { padding: .8rem; max-width: 44rem; margin: 0 auto; }

/* --- Heute --- */
.heute {
  background: var(--gruen-blass); border: 1px solid var(--gruen-rand);
  border-left: 4px solid var(--gruen);
  border-radius: 6px; padding: .8rem .9rem; margin-bottom: .9rem;
}
.heute h2 { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gruen); font-weight: 500; }
.heute-zeile { display: flex; gap: .5rem; align-items: baseline;
  padding: .15rem 0; font-size: .95rem; }
.heute-zahl { font-weight: 700; color: var(--gruen); min-width: 1.3rem; }

/* --- Filter --- */
.filter { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .7rem;
  scrollbar-width: none; }
.filter::-webkit-scrollbar { display: none; }
.filter button {
  flex: 0 0 auto; border: 1px solid var(--rand); background: var(--flaeche);
  color: var(--text); border-radius: 4px; padding: .45rem .85rem;
  font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.filter button.aktiv { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }
.filter .anzahl { opacity: .6; margin-left: .3rem; }

/* --- Gruppen + Karten --- */
.gruppe { margin-bottom: 1.1rem; }
.gruppe > h2 {
  margin: 0 0 .45rem; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau); font-weight: 500;
}

.karte {
  display: block; width: 100%; text-align: left;
  background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--rand);
  border-radius: 6px; padding: .75rem .85rem; margin-bottom: .5rem;
  font: inherit; color: inherit; cursor: pointer;
}
.karte:active { background: var(--grau-hell); }
.karte.faellig { border-left-color: var(--bernstein); }
.karte.neu { border-left-color: var(--gruen); }
.karte-kopf { display: flex; align-items: baseline; gap: .5rem; }
.karte-name { font-weight: 600; flex: 1; }
.karte-zeit { font-size: .8rem; color: var(--grau); white-space: nowrap; }
.karte-zeile2 { display: flex; align-items: center; gap: .45rem;
  margin-top: .35rem; flex-wrap: wrap; font-size: .85rem; color: var(--grau); }

.marke {
  display: inline-block; padding: .12rem .5rem; border-radius: 3px;
  font-size: .78rem; font-weight: 600; background: var(--grau-hell); color: var(--grau);
}
/* Farbregel: grün = neu/positiv, bernstein = Handlungsbedarf,
   blaugrau = geparkt, grau = abgeschlossen ohne Weiterverfolgung. */
.marke.s-neu { background: var(--gruen-blass); color: var(--gruen); }
.marke.s-vorstellungsgespraech,
.marke.s-eingestellt { background: #e6f4ea; color: var(--gruen); }
.marke.s-nicht_erreicht { background: var(--bernstein-blass); color: var(--bernstein); }
.marke.s-talentpool { background: #e8eef4; color: #33526e; }
.marke.s-aussortiert { background: var(--grau-hell); color: var(--grau); }

.faellig-hinweis { color: var(--bernstein); font-weight: 600; }
.frisch-hinweis { color: var(--gruen); font-weight: 600; }
.liegt-hinweis { color: var(--bernstein); font-weight: 600; }

/* --- Detail --- */
.d-kopf { background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 6px; padding: .9rem; margin-bottom: .8rem; }
.d-name { margin: 0; font-size: 1.4rem; }
.d-meta { margin: .3rem 0 0; font-size: .85rem; color: var(--grau); }
.d-kontakt { margin: .5rem 0 0; font-size: 1rem; }
.d-telefon { font-weight: 600; }
.d-email { color: var(--grau); font-size: .9rem; }

.knopfreihe { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .8rem 0; }
.knopf {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 3.4rem; border-radius: 4px; border: 0;
  font-family: var(--schrift); font-size: 1.05rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
/* Anrufen = die Haupthandlung: gruen. */
.knopf-anruf { background: var(--gruen); color: #fff; }
.knopf-anruf:active { background: var(--gruen-dunkel); }
/* SMS = ruhige Nebenaktion: blau. */
.knopf-sms { background: var(--blau); color: #fff; }
.knopf-breit { grid-column: 1 / -1; }
.knopf-nichterreicht {
  background: var(--bernstein-blass); color: var(--bernstein);
  border: 1.5px solid var(--bernstein); min-height: 3rem; font-size: 1rem;
}

.block { background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 6px; padding: .9rem; margin-bottom: .8rem; }
.block > h3 { margin: 0 0 .6rem; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau); font-weight: 500; }

.antwort { padding: .5rem 0; border-bottom: 1px solid var(--grau-hell); }
.antwort:last-child { border-bottom: 0; }
.antwort dt { font-size: .82rem; color: var(--grau); margin-bottom: .1rem; }
.antwort dd { margin: 0; font-weight: 500; }
.antwort dd.auswahl {
  margin-top: .25rem; font-size: .78rem; font-weight: 400;
  color: #8a8a90; line-height: 1.5;
}
.auswahl-vorspann { font-style: italic; }
.auswahl-gewaehlt { color: var(--text); font-weight: 600; }

.status-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.status-gitter button {
  min-height: 2.9rem; border-radius: 4px; border: 1px solid var(--rand);
  background: var(--flaeche); font: inherit; font-size: .92rem; cursor: pointer;
  color: var(--blau);          /* antippbar - hebt sich vom gelesenen Text ab */
}
.status-gitter button.aktiv { background: var(--dunkel); border-color: var(--dunkel);
  color: #fff; font-weight: 600; }

textarea {
  width: 100%; min-height: 4.5rem; padding: .6rem; font: inherit;
  border: 1px solid var(--rand); border-radius: 4px; resize: vertical;
}
textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--blau); outline-offset: 1px;
}
.block .knopf-notiz {
  margin-top: .5rem; min-height: 2.8rem; width: 100%;
  background: var(--blau); color: #fff; border: 0; border-radius: 4px;
  font: inherit; font-weight: 600; cursor: pointer;
}

.knopf-sprechen {
  min-height: 2.8rem; padding: 0 1rem;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: 4px;
  font: inherit; font-size: .95rem; cursor: pointer;
}
.knopf-sprechen.laeuft {
  background: var(--bernstein); border-color: var(--bernstein); color: #fff; font-weight: 600;
}

.notiz-eintrag { padding: .5rem 0; border-bottom: 1px solid var(--grau-hell); }
.notiz-eintrag:last-child { border-bottom: 0; }
.notiz-meta { font-size: .78rem; color: var(--grau); }

.verlauf-eintrag { font-size: .85rem; color: var(--grau); padding: .2rem 0; }

.dsgvo { display: flex; gap: .5rem; }
.dsgvo a, .dsgvo button {
  flex: 1; text-align: center; padding: .6rem; border-radius: 4px;
  border: 1px solid var(--rand); background: var(--flaeche);
  font: inherit; font-size: .88rem; color: var(--text);
  text-decoration: none; cursor: pointer;
}
.dsgvo .gefahr { color: var(--rot-warnung); border-color: #f3c2cc; font-weight: 600; }

select.rolle { width: 100%; padding: .6rem; font: inherit;
  border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche); }

/* --- Eingeklappte Bereiche (Talentpool / Abgeschlossen je Rolle) --- */
.klappe { margin-top: 1rem; }
.klappe > summary {
  cursor: pointer; list-style: none;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau); font-weight: 500; padding: .5rem 0;
}
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before { content: "▸ "; }
.klappe[open] > summary::before { content: "▾ "; }

.sanfter-hinweis {
  margin: .4rem 0 .8rem; padding: .6rem .7rem;
  background: #e8eef4; border-left: 3px solid #33526e;
  border-radius: 4px; font-size: .85rem; color: #33526e;
}

/* --- Sonstiges --- */
.leer { text-align: center; color: var(--grau); padding: 2rem 0; }
.fuss { text-align: center; font-size: .75rem; color: var(--grau); padding: 1rem; }

.hinweis {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: .6rem 1rem;
  border-radius: 4px; font-size: .9rem; z-index: 50; max-width: 90vw;
}

@media (min-width: 34rem) {
  .status-gitter { grid-template-columns: repeat(4, 1fr); }
}


/* --- Anmeldeseite --------------------------------------------------------- */
.anmeldeseite { background: var(--rot); }
.anmeldung {
  max-width: 22rem; margin: 12vh auto; padding: 1.6rem;
  background: var(--flaeche); border-radius: 8px;
}
.anmeldung h1 { margin: 0 0 .2rem; font-size: 1.5rem; }
.anmelde-text { margin: 0 0 1.2rem; color: var(--grau); font-size: .9rem; }
.anmelde-fehler {
  margin: 0 0 1rem; padding: .6rem .7rem; border-radius: 4px;
  background: #fdeef1; color: var(--rot-warnung); font-size: .88rem; font-weight: 600;
}
.anmeldung label { display: block; margin-bottom: .9rem; font-size: .85rem; color: var(--grau); }
.anmeldung input {
  display: block; width: 100%; margin-top: .3rem; padding: .7rem;
  font: inherit; border: 1px solid var(--rand); border-radius: 4px;
}
.anmeldung button {
  width: 100%; min-height: 3rem; margin-top: .4rem;
  background: var(--gruen); color: #fff; border: 0; border-radius: 4px;
  font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer;
}
.abmelden { color: #fff; opacity: .8; font-size: .8rem; text-decoration: none; }


/* --- Rückfrage nach dem Anruf -------------------------------------------- */
/* Als Blatt von unten: der Daumen ist unten, und der Name bleibt sichtbar. */
.rueckfrage {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--flaeche);
  border-top: 3px solid var(--gruen);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  padding: 1rem .9rem max(1rem, env(safe-area-inset-bottom));
  animation: hoch .18s ease-out;
}
@keyframes hoch { from { transform: translateY(100%); } to { transform: none; } }

.rueckfrage-titel {
  margin: 0; font-size: 1.25rem; font-weight: 600;
  font-family: var(--schrift-titel);
}
.rueckfrage-name { margin: .1rem 0 .9rem; color: var(--grau); font-size: .95rem; }
.rueckfrage-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

.rueckfrage-knopf {
  flex: 1 1 45%; min-height: 3.4rem; padding: 0 .8rem;
  border-radius: 4px; border: 1px solid var(--rand);
  background: var(--flaeche); color: var(--text);
  font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer;
}
.rueckfrage-knopf.ja { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.rueckfrage-knopf.nein {
  background: var(--bernstein-blass); border-color: var(--bernstein);
  color: var(--bernstein);
}
.rueckfrage-knopf.leise {
  flex: 1 1 100%; min-height: 2.6rem; border: 0;
  background: none; color: var(--grau); font-weight: 400; font-size: .9rem;
}