/* ===================================================================
   AKQUISE CRM, Gestaltung
   Alles Gestalterische steckt im :root Block. Der übrige Code greift
   nur auf diese Variablen zu. Für ein anderes Aussehen genügt es,
   hier oben Werte zu ändern.

   Ausnahme mit festen Farben: keine. Sollte einmal eine Farbe fest
   nötig sein (z. B. in eingebettetem SVG), gehört ein Hinweis hierher.
   =================================================================== */

:root {
  /* --- Markenfarben ------------------------------------------------ */
  --marke:            #1b3a5c;
  --marke-dunkel:     #12283f;
  --marke-hell:       #eaf0f6;

  /* --- Textfarben -------------------------------------------------- */
  --text:             #1a1d21;
  --text-leise:       #5b6572;
  --text-auf-marke:   #ffffff;

  /* --- Flächen und Linien ------------------------------------------ */
  --grund:            #f4f6f8;
  --flaeche:          #ffffff;
  --flaeche-leise:    #eef1f4;
  --linie:            #d9dee4;

  /* --- Zustandsfarben ---------------------------------------------- */
  --erfolg:           #1d6f42;
  --erfolg-flaeche:   #e4f3ea;
  --fehler:           #a32020;
  --fehler-flaeche:   #fbe9e9;
  --hinweis:          #8a5a00;
  --hinweis-flaeche:  #fdf1dc;
  --fokus:            #0b63c5;

  /* --- Statusfarben, passend zu den sechs Status ------------------- */
  --status-neu:            #5b6572;
  --status-besucht:        #0b63c5;
  --status-interessiert:   #8a5a00;
  --status-angebot:        #6d3bbf;
  --status-kunde:          #1d6f42;
  --status-kein:           #8a8f96;

  /* --- Schrift ----------------------------------------------------- */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: var(--schrift);

  --gr-klein:   clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --gr-text:    clamp(0.95rem, 0.92rem + 0.2vw, 1.02rem);
  --gr-gross:   clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --gr-titel:   clamp(1.2rem, 1.1rem + 0.8vw, 1.6rem);

  /* --- Abstände ---------------------------------------------------- */
  --a1: 0.25rem;
  --a2: 0.5rem;
  --a3: 0.75rem;
  --a4: 1rem;
  --a5: 1.5rem;
  --a6: 2rem;

  /* --- Maße -------------------------------------------------------- */
  --breite:        46rem;   /* größte Inhaltsbreite */
  --radius:        0.7rem;
  --radius-klein:  0.4rem;
  --radius-rund:   999px;
  --tippziel:      2.75rem; /* Mindesthöhe für Finger */

  /* --- Schatten und Übergänge -------------------------------------- */
  --schatten:       0 1px 2px rgba(16, 24, 40, 0.06),
                    0 2px 8px rgba(16, 24, 40, 0.06);
  --schatten-hoch:  0 -4px 24px rgba(16, 24, 40, 0.18);
  --dauer:          0.2s;
}

/* ===================================================================
   Grundlagen
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 6rem;                /* Platz für den Knopf unten */
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--gr-text);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  line-height: 1.25;
  margin: 0;
}

/* Sichtbarer Tastaturfokus, überall gleich */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Nur für Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke, erstes fokussierbares Element */
.sprungmarke {
  position: absolute;
  left: var(--a2);
  top: -3rem;
  z-index: 60;
  padding: var(--a2) var(--a3);
  background: var(--flaeche);
  color: var(--marke);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  transition: top var(--dauer) ease;
}
.sprungmarke:focus { top: var(--a2); }

/* ===================================================================
   Knöpfe
   =================================================================== */

.knopf {
  min-height: var(--tippziel);
  padding: var(--a2) var(--a4);
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--flaeche-leise);
  color: var(--text);
  transition: background var(--dauer) ease, opacity var(--dauer) ease;
}
.knopf:hover { background: var(--linie); }

.knopf--voll {
  background: var(--marke);
  color: var(--text-auf-marke);
  width: 100%;
}
.knopf--voll:hover { background: var(--marke-dunkel); }

.knopf--leer {
  background: transparent;
  color: var(--marke);
  border-color: var(--linie);
}
.knopf--leer:hover { background: var(--marke-hell); }

.knopf--gefahr {
  background: var(--fehler-flaeche);
  color: var(--fehler);
  border-color: var(--fehler);
  width: 100%;
}
.knopf--gefahr:hover { background: var(--fehler); color: var(--text-auf-marke); }

.knopf[disabled] { opacity: 0.6; cursor: progress; }

/* ===================================================================
   Formularfelder
   =================================================================== */

.feld { margin-bottom: var(--a4); }

.feld label {
  display: block;
  margin-bottom: var(--a1);
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--text-leise);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: var(--tippziel);
  padding: var(--a2) var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: var(--gr-text);   /* 16px oder mehr, verhindert Zoom auf iOS */
}
.feld textarea { resize: vertical; }

.feld__fehler {
  margin: var(--a1) 0 0;
  min-height: 0;
  font-size: var(--gr-klein);
  color: var(--fehler);
}
.feld__fehler:empty { display: none; }

.feld--fehlerhaft input,
.feld--fehlerhaft select,
.feld--fehlerhaft textarea { border-color: var(--fehler); }

/* ===================================================================
   Anmeldung
   =================================================================== */

.anmeldung {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--a4);
  background: var(--grund);
}
.anmeldung[hidden] { display: none; }

.anmeldung__box {
  width: 100%;
  max-width: 22rem;
  padding: var(--a5);
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.anmeldung__titel { font-size: var(--gr-titel); }

.anmeldung__text {
  margin: var(--a2) 0 var(--a4);
  color: var(--text-leise);
  font-size: var(--gr-klein);
}

.anmeldung__status {
  margin: var(--a3) 0 0;
  font-size: var(--gr-klein);
  color: var(--text-leise);
}
.anmeldung__status:empty { display: none; }

/* ===================================================================
   Kopfbereich
   =================================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--a3) var(--a4);
  background: var(--marke);
  color: var(--text-auf-marke);
}

.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  max-width: var(--breite);
  margin: 0 auto;
}

.kopf__titel { font-size: var(--gr-gross); }

.kopf .knopf--leer {
  background: transparent;
  color: var(--text-auf-marke);
  border-color: rgba(255, 255, 255, 0.4);
  min-height: 2.25rem;
  padding: var(--a1) var(--a3);
}
.kopf .knopf--leer:hover { background: var(--marke-dunkel); }

.kopf__reihe--name { margin-top: var(--a2); }

.kopf__reihe--name label {
  font-size: var(--gr-klein);
  font-weight: 600;
  white-space: nowrap;
}

.kopf__reihe--name input {
  flex: 1;
  min-height: 2.25rem;
  padding: var(--a1) var(--a2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-klein);
  background: var(--marke-dunkel);
  color: var(--text-auf-marke);
  font: inherit;
  font-size: var(--gr-klein);
}
.kopf__reihe--name input::placeholder { color: rgba(255, 255, 255, 0.6); }

/* ===================================================================
   Filterleiste
   =================================================================== */

.filter {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: var(--a2);
  padding: var(--a3) var(--a4);
  overflow-x: auto;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  scrollbar-width: none;
}
.filter::-webkit-scrollbar { display: none; }

.filter__knopf {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: var(--a1) var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-rund);
  background: var(--flaeche);
  color: var(--text-leise);
  font: inherit;
  font-size: var(--gr-klein);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dauer) ease, color var(--dauer) ease;
}
.filter__knopf:hover { background: var(--flaeche-leise); }

.filter__knopf[aria-pressed="true"] {
  background: var(--marke);
  border-color: var(--marke);
  color: var(--text-auf-marke);
}

.filter__anzahl { opacity: 0.8; }

/* ===================================================================
   Inhalt, Meldungen, Ladezustand
   =================================================================== */

.inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a4);
}

.meldung {
  margin: 0 0 var(--a4);
  padding: var(--a3);
  border-radius: var(--radius-klein);
  font-size: var(--gr-klein);
  background: var(--flaeche-leise);
  color: var(--text);
}
.meldung:empty { display: none; }
.meldung--fehler  { background: var(--fehler-flaeche); color: var(--fehler); }
.meldung--erfolg  { background: var(--erfolg-flaeche); color: var(--erfolg); }

.laden {
  display: flex;
  align-items: center;
  gap: var(--a2);
  padding: var(--a5) 0;
  color: var(--text-leise);
  font-size: var(--gr-klein);
}

.laden__punkt {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-rund);
  background: var(--marke);
  animation: pulsieren 1s ease-in-out infinite;
}

@keyframes pulsieren {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

.leer {
  padding: var(--a6) var(--a4);
  text-align: center;
  color: var(--text-leise);
}

/* ===================================================================
   Karten
   =================================================================== */

.karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--a3);
}

.karte {
  width: 100%;
  display: block;
  text-align: left;
  padding: var(--a4);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dauer) ease, box-shadow var(--dauer) ease;
}
.karte:hover { transform: translateY(-1px); }

/* Farbiger Streifen links nach Status */
.karte[data-status="Neu"]            { border-left-color: var(--status-neu); }
.karte[data-status="Besucht"]        { border-left-color: var(--status-besucht); }
.karte[data-status="Interessiert"]   { border-left-color: var(--status-interessiert); }
.karte[data-status="Angebot raus"]   { border-left-color: var(--status-angebot); }
.karte[data-status="Kunde"]          { border-left-color: var(--status-kunde); }
.karte[data-status="Kein Interesse"] { border-left-color: var(--status-kein); }

.karte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a2);
}

.karte__firma {
  font-size: var(--gr-gross);
  font-weight: 700;
}

.karte__branche {
  margin: var(--a1) 0 0;
  color: var(--text-leise);
  font-size: var(--gr-klein);
}

.karte__person {
  margin: var(--a2) 0 0;
  font-size: var(--gr-klein);
}

.karte__schritt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1) var(--a2);
  margin: var(--a3) 0 0;
  padding-top: var(--a3);
  border-top: 1px solid var(--linie);
  font-size: var(--gr-klein);
}

.karte__termin { font-weight: 700; color: var(--text-leise); }

/* Überfälliger Termin, deutlich hervorgehoben */
.karte__termin--faellig {
  padding: 0 var(--a2);
  border-radius: var(--radius-klein);
  background: var(--fehler-flaeche);
  color: var(--fehler);
}

/* Termin heute */
.karte__termin--heute {
  padding: 0 var(--a2);
  border-radius: var(--radius-klein);
  background: var(--hinweis-flaeche);
  color: var(--hinweis);
}

.karte__von {
  margin: var(--a2) 0 0;
  color: var(--text-leise);
  font-size: var(--gr-klein);
}

/* Telefonnummer als eigener Link, liegt über der Karte */
.karte__telefon {
  display: inline-block;
  margin: var(--a3) 0 0;
  padding: var(--a1) var(--a3);
  min-height: 2.25rem;
  line-height: 2rem;
  border-radius: var(--radius-klein);
  background: var(--marke-hell);
  color: var(--marke);
  font-size: var(--gr-klein);
  font-weight: 600;
  text-decoration: none;
}
.karte__telefon:hover { text-decoration: underline; }

/* Knopf am Ende der Karte, damit die Karte auch mit der Tastatur
   erreichbar ist. Mit Finger oder Maus funktioniert die ganze Karte. */
.karte__bearbeiten {
  display: block;
  width: 100%;
  margin-top: var(--a3);
  min-height: 2.25rem;
  padding: var(--a1) var(--a3);
  font-size: var(--gr-klein);
}

/* Status als Abzeichen */
.badge {
  flex: 0 0 auto;
  padding: var(--a1) var(--a2);
  border-radius: var(--radius-rund);
  color: var(--text-auf-marke);
  font-size: var(--gr-klein);
  font-weight: 700;
  white-space: nowrap;
}
.badge[data-status="Neu"]            { background: var(--status-neu); }
.badge[data-status="Besucht"]        { background: var(--status-besucht); }
.badge[data-status="Interessiert"]   { background: var(--status-interessiert); }
.badge[data-status="Angebot raus"]   { background: var(--status-angebot); }
.badge[data-status="Kunde"]          { background: var(--status-kunde); }
.badge[data-status="Kein Interesse"] { background: var(--status-kein); }

/* Dezente Einblendung beim Scrollen, gesteuert über die Klasse reveal */
.reveal {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--dauer) ease, transform var(--dauer) ease;
}
.reveal.sichtbar { opacity: 1; transform: none; }

/* ===================================================================
   Knopf unten zum Anlegen
   =================================================================== */

.neu {
  position: fixed;
  right: var(--a4);
  bottom: calc(var(--a4) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--a2);
  min-height: 3.25rem;
  padding: 0 var(--a5);
  border: none;
  border-radius: var(--radius-rund);
  background: var(--marke);
  color: var(--text-auf-marke);
  font: inherit;
  font-size: var(--gr-text);
  font-weight: 700;
  box-shadow: var(--schatten-hoch);
  cursor: pointer;
}
.neu:hover { background: var(--marke-dunkel); }
.neu span { font-size: var(--gr-titel); line-height: 1; }

/* ===================================================================
   Blatt von unten
   =================================================================== */

.blatt {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.blatt[hidden] { display: none; }

.blatt__grund {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.5);
  animation: einblenden var(--dauer) ease;
}

.blatt__inhalt {
  position: relative;
  width: 100%;
  max-width: var(--breite);
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--a4) var(--a4) var(--a6);
  background: var(--flaeche);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--schatten-hoch);
  animation: hochschieben var(--dauer) ease;
}

@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes hochschieben { from { transform: translateY(100%); } to { transform: none; } }

.blatt__kopf {
  position: sticky;
  top: calc(var(--a4) * -1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  margin: calc(var(--a4) * -1) calc(var(--a4) * -1) var(--a4);
  padding: var(--a4);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.blatt__kopf h2 { font-size: var(--gr-gross); }

.blatt__status {
  margin: 0 0 var(--a3);
  font-size: var(--gr-klein);
  color: var(--text-leise);
}
.blatt__status:empty { display: none; }
.blatt__status--fehler { color: var(--fehler); }

.blatt__knoepfe { display: grid; gap: var(--a3); }

/* ===================================================================
   Ohne JavaScript
   =================================================================== */

.no-js .anmeldung__box form,
.no-js .neu { display: none; }

.no-js .anmeldung::after {
  content: "Dieses Werkzeug braucht JavaScript.";
  position: absolute;
  bottom: var(--a5);
  color: var(--text-leise);
  font-size: var(--gr-klein);
}

/* Inhalte ohne JavaScript nicht durch reveal verstecken */
.no-js .reveal { opacity: 1; transform: none; }

/* ===================================================================
   Bewegung auf Wunsch abschalten
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ===================================================================
   Etwas mehr Platz auf größeren Bildschirmen
   =================================================================== */

@media (min-width: 40rem) {
  .karten { grid-template-columns: repeat(2, 1fr); }
  .blatt__knoepfe { grid-template-columns: 2fr 1fr; }
  .blatt { align-items: center; }
  .blatt__inhalt { border-radius: var(--radius); }
}