/* ═══════════════════════════════════════════════════════════════
   Akquise – Gestaltung
   Bewusst schlicht: eine Tabelle, die auch mit 2000 Zeilen
   noch lesbar ist, und Formulare, die auf dem Handy nicht brechen.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --papier:    #ffffff;
  --grund:     #f4f5f7;
  --linie:     #d8dbe0;
  --text:      #1d2330;
  --leise:     #667085;
  --akzent:    #1f4e79;
  --akzent-hell:#e8eff6;
  --gruen:     #1b7f4b;
  --rot:       #b3261e;
  --gelb:      #8a6100;
  --gelb-hell: #fdf3d8;
}

* { box-sizing: border-box; }

/* Wichtig: Ohne diese Zeile setzen eigene display-Regeln das
   hidden-Merkmal ausser Kraft - versteckte Bereiche waeren dann
   trotzdem zu sehen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--grund);
}

h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.2rem; margin: 0; }
h3 { font-size: 1rem; margin: 1.6em 0 .6em; }

/* ── Knöpfe und Felder ───────────────────────────────────────── */
button, .knopf {
  font: inherit;
  padding: .45em 1em;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .knopf:hover { filter: brightness(1.12); }
button.still, .knopf.still {
  background: var(--papier); color: var(--akzent);
}
button.gefahr { background: var(--rot); border-color: var(--rot); }
button:disabled { opacity: .5; cursor: default; }

input, select, textarea {
  font: inherit;
  padding: .4em .55em;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--papier);
  color: var(--text);
  max-width: 100%;
}
input[readonly] { background: var(--grund); color: var(--leise); }
label { display: block; margin: .7em 0; color: var(--leise); font-size: .88rem; }
label input, label select, label textarea { display: block; width: 100%; margin-top: .25em;
  color: var(--text); font-size: 1rem; }
label.haken { display: flex; align-items: center; gap: .5em; color: var(--text); font-size: .95rem; }
label.haken input { width: auto; margin: 0; }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1em; }
.fehler   { color: var(--rot); min-height: 1.4em; }
.meldung  { color: var(--gruen); margin-left: 1em; }
.hinweis  { background: var(--gelb-hell); color: var(--gelb);
            padding: .5em .7em; border-radius: 6px; font-size: .88rem; }

/* ── Anmeldung ───────────────────────────────────────────────── */
.anmeldung {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.anmeldung form {
  background: var(--papier); padding: 2em; border-radius: 10px;
  border: 1px solid var(--linie); width: min(360px, 90vw);
}
.anmeldung input { width: 100%; margin: .5em 0 1em; }
.anmeldung button { width: 100%; }

/* ── Kopf ────────────────────────────────────────────────────── */
.kopf {
  display: flex; flex-wrap: wrap; gap: 1em; align-items: center;
  justify-content: space-between;
  padding: 1em 1.5em; background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.kopf-knoepfe { display: flex; gap: .5em; flex-wrap: wrap; }

/* ── Kacheln ─────────────────────────────────────────────────── */
.kacheln {
  display: flex; gap: .6em; flex-wrap: wrap;
  padding: 1em 1.5em 0;
}
.kachel {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 8px; padding: .6em 1em; cursor: pointer;
  min-width: 108px; text-align: left; color: var(--text);
}
.kachel:hover { border-color: var(--akzent); filter: none; }
.kachel.aktiv { border-color: var(--akzent); background: var(--akzent-hell); }
.kachel .zahl { display: block; font-size: 1.35rem; font-weight: 600; }
.kachel .wofuer { font-size: .8rem; color: var(--leise); }
.kachel.wichtig .zahl { color: var(--gelb); }

/* ── Suche und Auswahl ───────────────────────────────────────── */
.suchleiste {
  display: flex; gap: .6em; flex-wrap: wrap; align-items: center;
  padding: 1em 1.5em .5em;
}
.suchleiste #suche { flex: 1 1 320px; }
.anzahl { color: var(--leise); font-size: .88rem; }

.auswahlleiste {
  display: flex; gap: .6em; flex-wrap: wrap; align-items: center;
  margin: 0 1.5em; padding: .7em 1em;
  background: var(--akzent-hell); border: 1px solid var(--akzent);
  border-radius: 8px;
}
.auswahlleiste label { margin: 0; display: flex; gap: .4em; align-items: center; }
.auswahlleiste label input { margin: 0; width: auto; }

/* ── Liste ───────────────────────────────────────────────────── */
.liste {
  width: calc(100% - 3em); margin: 1em 1.5em;
  border-collapse: collapse; background: var(--papier);
  border: 1px solid var(--linie); border-radius: 8px; overflow: hidden;
}
.liste th, .liste td {
  text-align: left; padding: .55em .8em;
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.liste th { background: var(--grund); font-size: .82rem; color: var(--leise);
            text-transform: uppercase; letter-spacing: .03em; }
.liste tbody tr:hover { background: var(--akzent-hell); }
.liste tbody tr.gewaehlt { background: var(--akzent-hell); }
.liste .schmal { width: 2.4em; }
.liste .name { font-weight: 600; cursor: pointer; }
.liste .name:hover { text-decoration: underline; }
.liste .zweitzeile { display: block; color: var(--leise); font-size: .82rem;
                     font-weight: 400; }
.liste .faellig { color: var(--rot); font-weight: 600; }

.marke {
  display: inline-block; padding: .1em .6em; border-radius: 999px;
  font-size: .78rem; border: 1px solid var(--linie); background: var(--grund);
  white-space: nowrap;
}
.marke.gut     { border-color: var(--gruen); color: var(--gruen); }
.marke.schlecht{ border-color: var(--rot);   color: var(--rot); }
.marke.offen   { border-color: var(--akzent); color: var(--akzent); }
.pruefzeichen { color: var(--gelb); cursor: help; }

.blaetterleiste {
  display: flex; gap: .5em; align-items: center; justify-content: center;
  padding: 0 1.5em 2em;
}

/* ── Überdeckungen: Einzelansicht und Import ─────────────────── */
.ueberdeckung {
  position: fixed; inset: 0; background: rgba(20,25,35,.45);
  display: flex; justify-content: flex-end; z-index: 10;
}
.detail {
  background: var(--papier); width: min(560px, 100vw); height: 100%;
  overflow-y: auto;
}
.detail > header, .dialog > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1em 1.5em; border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; background: var(--papier); z-index: 1;
}
.detail-inhalt { padding: 0 1.5em 3em; }
.schliessen {
  background: none; border: none; color: var(--leise);
  font-size: 1.6rem; line-height: 1; padding: 0 .2em; cursor: pointer;
}
.schliessen:hover { color: var(--text); filter: none; }

.anrede-block {
  background: var(--grund); border-radius: 8px; padding: .2em 1em 1em; margin-top: 1em;
}
.anrede-knoepfe { display: flex; gap: .4em; }
.anrede-knoepfe button { background: var(--papier); color: var(--akzent); }

.detail-knoepfe {
  display: flex; gap: .6em; align-items: center; flex-wrap: wrap; margin-top: 1.4em;
}

.notiz-neu { display: flex; gap: .5em; }
.notiz-neu input { flex: 1; }

.verlauf { list-style: none; padding: 0; margin: 1em 0 0; }
.verlauf li {
  border-left: 3px solid var(--linie); padding: .3em 0 .8em 1em; margin: 0;
}
.verlauf .wann { display: block; color: var(--leise); font-size: .8rem; }

/* ── Menü im Kopf ────────────────────────────────────────────── */
.menue { display: flex; gap: .3em; align-items: center; flex: 1; }

.menuepunkt {
  background: none; border: 1px solid transparent; color: var(--text);
  padding: .45em .9em; border-radius: 6px;
}
.menuepunkt:hover { background: var(--grund); filter: none; }
.menuepunkt.aktiv {
  background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent);
  font-weight: 600;
}
.pfeil { font-size: .8em; opacity: .7; }

.klappmenue { position: relative; }
.klappinhalt {
  position: absolute; top: calc(100% + .3em); left: 0; z-index: 5;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(20,25,35,.14);
  min-width: 15em; padding: .3em;
}
.klappinhalt button, .klappinhalt a {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  padding: .5em .8em; border-radius: 6px; text-decoration: none; font: inherit;
  cursor: pointer;
}
.klappinhalt button:hover, .klappinhalt a:hover {
  background: var(--akzent-hell); filter: none;
}

/* ── Ansicht "Liste einlesen" ───────────────────────────────── */
.ansicht-kopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1em; padding: 1.4em 1.5em .4em;
}
.karte {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 8px; padding: 1.2em 1.5em 1.6em; margin: 1em 1.5em;
}
.dateiname { color: var(--leise); }
.leise { color: var(--leise); font-size: .88rem; }
.schon-da-liste { margin: .3em 0; padding-left: 1.2em; color: var(--text); }
.schon-da-liste li { margin: .15em 0; }
#schon-da { margin-top: 1.8em; border-top: 1px solid var(--linie); padding-top: .4em; }

.vorschau {
  width: 100%; border-collapse: collapse; font-size: .82rem;
  display: block; overflow-x: auto; white-space: nowrap;
}
.vorschau th, .vorschau td {
  border: 1px solid var(--linie); padding: .3em .5em; text-align: left;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.vorschau th { background: var(--grund); }

.zuordnung { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 1em; }

#import-bericht { line-height: 1.8; }
#import-bericht .warnung { color: var(--gelb); }

/* ── Handy ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .zwei { grid-template-columns: 1fr; }
  .liste { width: calc(100% - 1em); margin: 1em .5em; font-size: .92rem; }
  .liste th:nth-child(3), .liste td:nth-child(3),
  .liste th:nth-child(4), .liste td:nth-child(4) { display: none; }
  .kacheln, .suchleiste, .kopf { padding-left: .8em; padding-right: .8em; }
  .auswahlleiste { margin: 0 .5em; }
  .menue { order: 3; width: 100%; }
  .karte, .ansicht-kopf { margin-left: .5em; margin-right: .5em;
                          padding-left: 1em; padding-right: 1em; }
}