/* ============================================================
   Fresstipp Vertrieb - eigener Bereich fuer Cathy und Robert

   Zuerst fuers Handy gebaut, nicht fuer den Schreibtisch. Robert
   telefoniert ueber den Tag verteilt und traegt direkt nach dem
   Anruf ein - alles, was dabei mit dem Daumen erreichbar sein
   muss, sitzt unten. Der grosse Bildschirm bekommt ab 900px
   mehr Spalten, aber keine andere Bedienung.

   Farben aus der Akademie uebernommen, damit es sich nicht wie
   ein fremdes Programm anfuehlt.
   ============================================================ */

:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #111726;
    --bg-erhoben: #18203355;

    --accent-primary: #2d6a4f;
    --accent-primary-hover: #40916c;

    --accent-secondary: #d97706;

    --text-primary: #ffffff;
    --text-secondary: #a0aec0;
    --text-muted: #718096;

    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.18);

    --success: #10b981;
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.12);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.12);

    --fuss-hoehe: 62px;
    --radius: 14px;

    /* Der Fortschritts- und der Trichterbalken benutzen
       var(--transition-normal), definiert war die Variable nie. Eine
       undefinierte Variable macht die ganze transition-Zeile ungueltig -
       die Balken sprangen also auf ihre neue Breite, statt zu wachsen. */
    --transition-normal: 0.25s ease;
}

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;               /* kleiner nicht: iOS zoomt sonst beim Tippen */
    line-height: 1.45;
    overscroll-behavior-y: none;
}

.hidden { display: none !important; }

/* ── Laden ───────────────────────────────────────────────── */
.lade {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px; color: var(--text-muted);
}
.lade-punkt {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary-hover);
    animation: dreh 0.9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ── Anmeldung ───────────────────────────────────────────── */
.anmeldung {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.anmelde-karte {
    width: 100%; max-width: 380px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 28px 22px;
    display: flex; flex-direction: column; gap: 16px;
}
.anmelde-kopf { text-align: center; margin-bottom: 4px; }
.anmelde-zeichen { font-size: 2.2rem; display: block; }
.anmelde-kopf h1 { font-size: 1.35rem; margin: 8px 0 2px; }
.anmelde-kopf p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.anmelde-fuss { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
.anmelde-fuss a { color: var(--accent-primary-hover); }

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > span { font-size: 0.85rem; color: var(--text-secondary); }
.feld-mit-auge { position: relative; display: block; }
.feld-mit-auge input { width: 100%; padding-right: 46px; }
.auge {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--text-muted);
    font-size: 1.15rem; cursor: pointer; padding: 8px;
}

input, select, textarea {
    width: 100%;
    padding: 12px 13px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent-primary-hover);
}
textarea { resize: vertical; min-height: 68px; }

/* ── Knoepfe ─────────────────────────────────────────────── */
.knopf {
    background: var(--accent-primary);
    color: #fff; border: 0; border-radius: 10px;
    padding: 12px 16px; font: inherit; font-weight: 600;
    cursor: pointer; min-height: 46px;
}
.knopf:hover  { background: var(--accent-primary-hover); }
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf-voll   { width: 100%; }
.knopf-still  { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
.knopf-still:hover { background: var(--bg-erhoben); border-color: var(--border-hover); }

/* ── Geruest ─────────────────────────────────────────────── */
.anwendung { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--fuss-hoehe) + env(safe-area-inset-bottom)); }

.kopf {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    background: rgba(10, 14, 23, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
}
.kopf h1 { flex: 1; margin: 0; font-size: 1.15rem; }
.kopf-knopf, .kopf-zurueck {
    background: none; border: 0; color: var(--text-secondary);
    font-size: 1.3rem; cursor: pointer; padding: 4px 8px;
}
.kopf-zurueck { font-size: 1.9rem; line-height: 1; }

.inhalt { padding: 14px 14px 24px; max-width: 900px; margin: 0 auto; }

.fussleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex;
    background: rgba(10, 14, 23, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-color);
    padding-bottom: env(safe-area-inset-bottom);
}
.fuss-punkt {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 8px 0 7px;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.68rem; min-height: var(--fuss-hoehe);
}
.fuss-punkt.aktiv { color: var(--accent-primary-hover); }
.fuss-zeichen { font-size: 1.25rem; line-height: 1; }

/* ── Abschnitte und Karten ───────────────────────────────── */
.abschnitt { margin-bottom: 22px; }
.abschnitt-kopf {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0 0 9px; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.abschnitt-kopf.warn  { color: var(--warning); }
.abschnitt-kopf .zahl { color: var(--text-muted); font-weight: 500; letter-spacing: 0; }

.karte {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 13px 14px;
    margin-bottom: 9px;
}
.karte.dringend { border-left: 3px solid var(--error); }
.karte.signal   { border-left: 3px solid var(--warning); }

.karte-kopf { display: flex; align-items: baseline; gap: 8px; }
.karte-name { font-weight: 650; font-size: 1.02rem; flex: 1; }
.karte-tag  { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

/* Der eine Satz, der sagt, warum diese Person heute dran ist. */
.karte-warum {
    margin: 3px 0 0; font-size: 0.88rem; color: var(--text-secondary);
}
.karte-fakt {
    margin: 5px 0 0; font-size: 0.79rem; color: var(--text-muted);
}
.karte-fakt.still { color: var(--warning); }

.karte-knoepfe { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.karte-knoepfe .knopf { flex: 1; min-width: 96px; font-size: 0.9rem; padding: 10px 12px; }

.marke {
    display: inline-block; padding: 1px 7px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 600; vertical-align: 1px;
}
.marke-warn  { background: var(--warning-bg); color: var(--warning); }
.marke-fehl  { background: var(--error-bg);   color: var(--error); }
.marke-still { background: var(--bg-erhoben); color: var(--text-muted); }

.leer {
    text-align: center; padding: 40px 20px; color: var(--text-muted);
}
.leer-zeichen { font-size: 2.4rem; display: block; margin-bottom: 10px; }

.meldung { padding: 10px 12px; border-radius: 10px; font-size: 0.88rem; margin: 0; }
.meldung.fehler { background: var(--error-bg); color: #fca5a5; }

/* ── Gespraechsblatt ─────────────────────────────────────── */
.blatt-hintergrund {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0, 0, 0, 0.6);
}
.blatt {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    max-height: 92dvh; overflow-y: auto;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-hover);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    animation: hoch 0.22s ease-out;
}
@keyframes hoch { from { transform: translateY(100%); } }
.blatt-griff {
    width: 38px; height: 4px; border-radius: 3px;
    background: var(--border-hover); margin: 4px auto 12px;
}
.blatt h2 { margin: 0 0 4px; font-size: 1.1rem; }

.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.wahl-knopf {
    padding: 13px 8px; border-radius: 10px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    color: var(--text-secondary); font: inherit; font-weight: 600;
    cursor: pointer; min-height: 50px;
}
.wahl-knopf.gewaehlt {
    background: var(--accent-primary); border-color: var(--accent-primary);
    color: #fff;
}
.wahl-drei { grid-template-columns: repeat(3, 1fr); }
.wahl-drei .wahl-knopf { font-size: 0.85rem; padding: 11px 4px; }

.blatt-feld { margin-top: 13px; }
.blatt-feld > label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 5px;
}

/* Der Mikrofonknopf sitzt in der Beschriftung, nicht im Feld: Im Feld
   verdeckte er den Text, sobald etwas darin steht. */
.diktat {
    margin-left: auto; background: none; border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-secondary);
    font-size: 0.95rem; line-height: 1; padding: 5px 9px; cursor: pointer;
}
.diktat:hover { border-color: var(--border-hover); }
.diktat.hoert {
    border-color: var(--error); color: var(--error);
    animation: pulsen 1.1s ease-in-out infinite;
}
@keyframes pulsen { 50% { opacity: 0.45; } }

/* Leitfaden: drei Fragen, je nachdem warum angerufen wird. */
.leitfaden {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 11px; padding: 4px 12px 10px; margin-bottom: 4px;
}
.leitfaden > summary {
    cursor: pointer; padding: 9px 0; list-style: none;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-muted);
}
.leitfaden > summary::-webkit-details-marker { display: none; }
.leitfaden-frage {
    display: block; width: 100%; text-align: left;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 9px; color: var(--text-primary);
    font: inherit; font-size: 0.88rem; padding: 9px 11px; margin-bottom: 6px;
    cursor: pointer;
}
.leitfaden-frage:hover { border-color: var(--accent-primary-hover); }
.leitfaden-frage.benutzt { color: var(--text-muted); border-style: dashed; }

.ankreuz {
    display: flex; align-items: center; gap: 9px;
    margin-top: 16px; font-size: 0.88rem; color: var(--text-secondary);
    cursor: pointer;
}
.ankreuz input { width: auto; margin: 0; }

/* Nachrichtenvorlagen. Die passende steht oben und ist abgesetzt -
   sonst liest niemand sieben Kaesten durch. */
.vorlage {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 11px; padding: 12px 13px; margin-bottom: 10px;
}
.vorlage.passend { border-color: var(--accent-primary); }
.vorlage-kopf {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.vorlage-text {
    margin: 0 0 11px; font-size: 0.89rem; line-height: 1.5;
    color: var(--text-secondary);
}
.vorlage .karte-knoepfe .knopf { font-size: 0.85rem; padding: 8px 12px; min-height: 38px; }

/* Anruflisten-Modus: eine Person, zwei grosse Knoepfe. */
.fortschritt {
    height: 4px; border-radius: 3px; background: var(--border-color);
    overflow: hidden; margin-bottom: 16px;
}
.fortschritt-fuellung {
    height: 100%; background: var(--accent-primary-hover);
    transition: width var(--transition-normal);
}
.anruf-karte { padding: 20px 16px; }
.anruf-name { margin: 0 0 8px; font-size: 1.4rem; line-height: 1.25; }
.anruf-karte .karte-knoepfe .knopf { min-height: 54px; font-size: 1rem; }
.knopf-durchgang { margin-bottom: 18px; }
.blatt-feld .zusatz { color: var(--text-muted); font-weight: 400; }

/* Rueckmeldung direkt unter einem Feld - etwa was aus der Rufnummer wird. */
.feld-hinweis {
    margin: 5px 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4;
}

/* "bearbeiten" rechts in der Abschnittsueberschrift. */
.kopf-aktion {
    margin-left: auto; color: var(--accent-primary-hover); text-decoration: none;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    padding: 2px 6px;
}
.kopf-aktion:hover { text-decoration: underline; }

/* Zugeklappte Zusatzfelder: Beim Anlegen bleibt die Maske kurz, beim
   Bearbeiten steht alles offen. Ein neuer Kontakt braucht einen Namen -
   der Rest darf warten. */
.mehr { margin-top: 16px; border-top: 1px solid var(--border-color); padding-top: 4px; }
.mehr > summary {
    cursor: pointer; padding: 10px 2px; list-style: none;
    font-size: 0.85rem; font-weight: 600; color: var(--accent-primary-hover);
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::before { content: '▸ '; }
.mehr[open] > summary::before { content: '▾ '; }

/* Loeschen sieht anders aus als alles andere - und liegt weit unten. */
.knopf-gefahr {
    background: transparent; border: 1px solid var(--error); color: var(--error);
}
.knopf-gefahr:hover { background: var(--error-bg); }

/* Werbewiderspruch: das Erste, was man auf dem Blatt sieht. Nicht als
   dezenter Hinweis - wer hier anruft, handelt sich eine Abmahnung ein. */
.sperre-band {
    display: block; margin-bottom: 14px; padding: 12px 14px;
    background: var(--error-bg); border: 1px solid var(--error);
    border-radius: var(--radius); color: #fca5a5;
}
.sperre-band strong { display: block; margin-bottom: 4px; color: var(--error); }
.sperre-band span { font-size: 0.85rem; line-height: 1.5; }

/* ── Kontaktblatt ────────────────────────────────────────── */
.stand {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-bottom: 14px;
}
.stand-kachel {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 11px; padding: 10px 12px;
}
.stand-wert { font-size: 1.3rem; font-weight: 700; }
.stand-wort { font-size: 0.72rem; color: var(--text-muted); }

.zeile { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.zeile:last-child { border-bottom: 0; }
.zeile-wort { width: 40%; color: var(--text-muted); font-size: 0.85rem; }
.zeile-wert { flex: 1; font-size: 0.92rem; word-break: break-word; }

.verlauf-punkt {
    border-left: 2px solid var(--border-color);
    padding: 0 0 15px 13px; margin-left: 5px; position: relative;
}
.verlauf-punkt::before {
    content: ''; position: absolute; left: -5px; top: 5px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-primary-hover);
}
.verlauf-kopf { font-size: 0.76rem; color: var(--text-muted); }
.verlauf-text { margin: 2px 0 0; font-size: 0.9rem; }
.verlauf-feedback {
    margin: 6px 0 0; padding: 7px 10px;
    background: var(--warning-bg); border-radius: 8px;
    font-size: 0.86rem; color: #fcd34d;
}

/* Eine Ruecklmeldung, hinter der ein Kontakt steht: Ein Tipper fuehrt
   dorthin. Wo kein Kontakt existiert, bleibt der Eintrag stumm - ein
   Zeiger, der nirgendwohin fuehrt, ist schlimmer als keiner. */
.verlauf-punkt.anklickbar { cursor: pointer; }
.verlauf-punkt.anklickbar:hover { border-left-color: var(--accent-primary-hover); }
.verlauf-punkt.anklickbar:hover .verlauf-text { color: var(--accent-primary-hover); }

/* Trichter: waagerechte Balken von oben nach unten. Man muss sehen
   koennen, wo es eng wird - eine Zahlenkolonne zeigt das nicht. */
.trichter-stufe { margin-bottom: 11px; }
.trichter-kopf {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px;
}
.trichter-zahl { font-weight: 700; color: var(--text-primary); }
.trichter-verlust { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; }
.trichter-balken {
    height: 10px; border-radius: 5px; background: var(--accent-primary);
    transition: width var(--transition-normal);
}
.trichter-balken.eng { background: var(--warning); }

.balken { display: flex; align-items: flex-end; gap: 3px; height: 62px; margin: 10px 0 4px; }
.balken-stab { flex: 1; background: var(--accent-primary); border-radius: 3px 3px 0 0; min-height: 2px; }

.hinweis {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--fuss-hoehe) + 16px); z-index: 60;
    background: var(--accent-primary); color: #fff;
    padding: 11px 18px; border-radius: 22px;
    font-size: 0.9rem; font-weight: 600;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

.suchzeile { display: flex; gap: 8px; margin-bottom: 12px; }
.suchzeile input { flex: 1; }
.suchzeile select { width: auto; flex: 0 0 auto; }
.suchzeile .knopf { flex: 0 0 auto; padding: 10px 13px; font-size: 1rem; }

/* Kleine Knoepfe innerhalb einer Zeile - zurueckholen, zusammenfuehren. */
.knopf-schmal {
    min-height: 0; padding: 3px 9px; margin-left: 9px;
    font-size: 0.76rem; font-weight: 600; border-radius: 7px;
}

/* Register ueber den drei Listen: Personen, Haeuser, Messen sind zusammen
   das Adressbuch. Dadurch bleibt die Fussleiste bei vier Punkten - auf
   einem Handy ist jeder weitere einer zu viel. */
.reiter {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 14px; padding-bottom: 2px;
    border-bottom: 1px solid var(--border-color);
}
.reiter-punkt {
    padding: 9px 12px; color: var(--text-muted); text-decoration: none;
    font-size: 0.92rem; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -3px;
}
.reiter-punkt.aktiv {
    color: var(--text-primary); border-bottom-color: var(--accent-primary-hover);
}
.reiter-neu {
    margin-left: auto; color: var(--accent-primary-hover);
    text-decoration: none; font-size: 1.35rem; line-height: 1;
    padding: 6px 10px; border-radius: 9px;
}
.reiter-neu:hover { background: var(--bg-erhoben); }

/* ── Alle / Berater / Kunden ──────────────────────────────────
   Knoepfe statt Klappmenue: Was man sieht, benutzt man. Die
   Umschaltung teilt die Liste in ihre beiden wichtigsten Haelften
   und gehoert deshalb nach oben, nicht in die Suchzeile zum
   Stufenfilter - der schraenkt ein, dieser hier sortiert.

   Die Zahl steht IM Knopf und nicht daneben, damit "Berater" und
   "9" beim Ueberfliegen ein Ding bleiben. */
.artwahl {
    display: flex; gap: 6px; margin: 0 0 14px;
}
.artwahl-punkt {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-erhoben); color: var(--text-muted);
    font-size: 0.92rem; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.artwahl-punkt:hover { color: var(--text-primary); }
.artwahl-punkt.aktiv {
    background: var(--accent-primary-hover); border-color: var(--accent-primary-hover);
    color: #fff;
}
.artwahl-zahl {
    font-size: 0.82rem; font-weight: 700; opacity: 0.75;
    font-variant-numeric: tabular-nums;
}
/* Leer, solange die Zahl noch laedt - dann soll der Knopf nicht
   um die Breite einer Ziffer springen. */
.artwahl-zahl:empty { min-width: 0.6em; display: inline-block; }

/* ── Grosser Bildschirm: mehr Spalten, gleiche Bedienung ── */
@media (min-width: 900px) {
    .inhalt { max-width: 1080px; padding: 22px 24px 30px; }
    .stand  { grid-template-columns: repeat(4, 1fr); }
    .karten-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .karten-raster .karte { margin-bottom: 0; }
    .blatt {
        left: 50%; right: auto; bottom: auto; top: 50%;
        transform: translate(-50%, -50%);
        width: 520px; max-height: 86vh;
        border-radius: 16px; border: 1px solid var(--border-hover);
        animation: none;
    }
    .blatt-griff { display: none; }
}

/* ── Rundgang ────────────────────────────────────────────────
   Liegt ueber allem (das Gespraechsblatt endet bei 41, der
   Hinweis bei 60). Die Huelle faengt jeden Klick ab - waehrend
   des Rundgangs soll nichts in der Anwendung ausgeloest werden.

   Das Abdunkeln macht nicht die Huelle, sondern der riesige
   Schlagschatten des Lochs. So bleibt genau das Ziel hell,
   ohne dass es aus seinem Stapel gehoben werden muesste - ein
   z-index am fremden Element haette die Fussleiste zerlegt. */
.rundgang {
    position: fixed; inset: 0; z-index: 200;
    background: transparent;
    transition: background 0.15s ease;
}
.rundgang.ohne-loch { background: rgba(4, 7, 13, 0.78); }

.rg-loch {
    position: fixed; display: none;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(4, 7, 13, 0.78),
                0 0 0 2px var(--accent-primary-hover) inset;
    pointer-events: none;
    transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.rg-karte {
    position: fixed; left: 50%; transform: translateX(-50%);
    width: min(460px, calc(100vw - 24px));
    background: var(--bg-secondary);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius);
    padding: 15px 16px 13px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
/* Die Fussleiste liegt immer unten. Zeigt der Rundgang dorthin,
   muss die Karte nach oben - sonst deckt sie zu, was sie erklaert. */
.rg-karte.oben   { top: max(14px, env(safe-area-inset-top)); }
.rg-karte.unten  { bottom: calc(var(--fuss-hoehe) + 18px); }
.rg-karte.mittig { top: 50%; transform: translate(-50%, -50%); }

.rg-kopf {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 7px;
}
.rg-kopf strong { font-size: 1.02rem; line-height: 1.25; }
.rg-zeichen { font-size: 1.25rem; line-height: 1; }
.rg-zaehler {
    margin-left: auto; flex-shrink: 0;
    color: var(--text-muted); font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.rg-karte p {
    margin: 0; color: var(--text-secondary);
    font-size: 0.93rem; line-height: 1.5;
}
.rg-karte p strong { color: var(--text-primary); font-weight: 600; }

.rg-knoepfe {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px;
}
.rg-vor { margin-left: auto; display: flex; gap: 8px; }
.rg-knoepfe .knopf { min-height: 40px; padding: 9px 14px; font-size: 0.9rem; }
.rg-weg { font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
    .rg-loch, .rundgang { transition: none; }
}

/* ── Verschieben in der Zeile ────────────────────────────────
   Klein und leise: Der Hauptweg bleibt das Gespraechsblatt. Diese
   Zeile ist fuer den Fall "heute nicht, aber nicht vergessen" -
   und sie muss billiger sein als das Ignorieren, sonst wird
   ignoriert. */
.schlummer {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--border-color);
}
.schlummer-wort {
    color: var(--text-muted); font-size: 0.8rem; margin-right: 2px;
}
.schlummer-knopf {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-secondary); border-radius: 8px;
    padding: 6px 10px; font: inherit; font-size: 0.82rem;
    cursor: pointer; min-height: 34px;
}
.schlummer-knopf:hover:not(:disabled) {
    background: var(--bg-erhoben); border-color: var(--border-hover);
    color: var(--text-primary);
}
.schlummer-knopf:disabled { opacity: 0.45; cursor: default; }

/* Die Karte geht weg - das ist die Rueckmeldung, keine Meldung noetig. */
.karte.geht-weg {
    opacity: 0; transform: translateX(14px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ── Wer war zuletzt dran ────────────────────────────────────
   Beiwerk, kein Hauptinhalt: leiser als der Grund, aus dem der
   Kontakt hier steht. */
.beruehrung { margin-top: 7px; }
#blatt-inhalt .beruehrung { margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
    .karte.geht-weg { transition: none; }
}

/* ── Liegen geblieben ────────────────────────────────────────
   Eine Luecke an Ort und Stelle fuellen, ohne in den
   Bearbeitungsmodus zu wechseln. Ein Formular, das mehr verlangt
   als man gerade hat, wird nicht ausgefuellt - dann steht der
   Kontakt gar nicht drin. */
.fuellen {
    display: flex; gap: 8px; align-items: center;
    margin-top: 10px;
}
.fuellen input {
    flex: 1; min-width: 0;
    padding: 10px 12px; border-radius: 10px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    color: var(--text-primary); font: inherit;
}
.fuellen .knopf { min-height: 42px; padding: 10px 14px; white-space: nowrap; }

/* Der Griff "stimmt nicht" neben einer Nummer. Leise - er ist die
   Ausnahme, nicht der Regelfall. */
.zeile-griff {
    margin-left: 10px; padding: 3px 8px;
    background: transparent; border: 1px solid var(--border-color);
    border-radius: 7px; color: var(--text-muted);
    font: inherit; font-size: 0.74rem; cursor: pointer;
    white-space: nowrap;
}
.zeile-griff:hover:not(:disabled) {
    border-color: var(--error); color: var(--error);
}
.zeile-griff:disabled { opacity: 0.45; cursor: default; }
.zeile-wert { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }

/* ── Woran es lag ──────────────────────────────────────────── */
.grund-zeile { padding: 9px 0; border-bottom: 1px solid var(--border-color); }
.grund-zeile:last-child { border-bottom: 0; }
.grund-kopf {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; margin-bottom: 6px; font-size: 0.92rem;
}
.grund-kopf .still { color: var(--text-muted); font-size: 0.82rem; }
.grund-balken {
    height: 7px; border-radius: 4px;
    background: var(--bg-erhoben); overflow: hidden;
}
.grund-balken span {
    display: block; height: 100%; border-radius: 4px;
    background: var(--accent-secondary);
}

/* ── Reaktionsuhr ────────────────────────────────────────────
   Der linke Rand traegt die Dringlichkeit. Farbe allein waere zu
   wenig - die Marke daneben sagt sie auch in Worten. */
.karte.uhr { border-left: 3px solid var(--border-color); }
.karte.uhr-frisch { border-left-color: var(--success); }
.karte.uhr-bald   { border-left-color: var(--warning); }
.karte.uhr-spaet  { border-left-color: var(--error); }

/* ── Gespeicherte Listen ─────────────────────────────────────
   Eine Zeile Kacheln ueber der Suche. Am Handy schiebbar statt
   umgebrochen - sonst frisst sie den halben Bildschirm. */
.kachelzeile {
    display: flex; gap: 8px; margin-bottom: 10px;
    overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
}
.kachelzeile::-webkit-scrollbar { display: none; }
.listenkachel {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: 999px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-secondary); font: inherit; font-size: 0.85rem;
    cursor: pointer; white-space: nowrap;
}
.listenkachel:hover { border-color: var(--border-hover); color: var(--text-primary); }
.listenkachel-zahl {
    color: var(--text-muted); font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}
.listenkachel-weg {
    color: var(--text-muted); font-size: 0.78rem; padding: 0 2px;
    border-radius: 4px;
}
.listenkachel-weg:hover { color: var(--error); }

/* ── Auswahl und Sammelaktionen ──────────────────────────────
   Der Haken sitzt oben rechts in der Karte und faengt seinen Klick
   selbst ab; die Karte darunter bleibt anklickbar. */
.haken {
    position: absolute; top: 8px; right: 8px;
    padding: 6px; margin: -6px; cursor: pointer;
    line-height: 0;
}
.haken input { width: 20px; height: 20px; accent-color: var(--accent-primary); cursor: pointer; }
.karte { position: relative; }
.karte .karte-kopf { padding-right: 30px; }
.karte.gewaehlt {
    border-color: var(--accent-primary-hover);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
}

/* Liegt ueber der Fussleiste, solange etwas ausgewaehlt ist. */
.auswahl-leiste {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--fuss-hoehe) + env(safe-area-inset-bottom));
    z-index: 35;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(17, 23, 38, 0.98);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-hover);
}
.auswahl-kopf {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.auswahl-kopf .knopf { min-height: 34px; padding: 6px 12px; font-size: 0.82rem; }
.auswahl-knoepfe { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.auswahl-knoepfe::-webkit-scrollbar { display: none; }
.auswahl-knoepfe .knopf {
    flex: 0 0 auto; min-height: 40px; padding: 9px 14px; font-size: 0.88rem;
}
.grund-zeile .karte-fakt { margin: 5px 0 0; font-size: 0.8rem; }

/* ── Die oeffentliche Eintragsseite ──────────────────────────
   Der Honigtopf darf NICHT display:none sein - manche
   Ausfuellhelfer ueberspringen genau das. Er wird stattdessen
   aus dem Bild geschoben und aus der Vorlesereihenfolge
   genommen (aria-hidden im HTML, tabindex -1 am Feld). */
.honig {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.zustimmung {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 16px; cursor: pointer;
    color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5;
}
.zustimmung input {
    flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
    accent-color: var(--accent-primary); cursor: pointer;
}
.pflicht { color: var(--error); font-style: normal; }

/* ── Erlaubnis vor dem Anruf ─────────────────────────────────
   Die Farbe traegt nie die Aussage allein - daneben steht immer
   der Satz, worauf sich das stuetzt. Wer die Punkte nicht
   unterscheiden kann, liest denselben Inhalt im Text. */
.ampel-zeile {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--border-color);
}
.ampel-zeile:last-child { border-bottom: 0; }
.ampel {
    flex: 0 0 auto; width: 11px; height: 11px; margin-top: 4px;
    border-radius: 50%; background: var(--text-muted);
}
.ampel-gruen { background: var(--success); }
.ampel-gelb  { background: var(--warning); }
.ampel-rot   { background: var(--error); }
.ampel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ampel-text strong { font-size: 0.92rem; }
.ampel-text .still { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
.ampel-zeile .schlummer-knopf { flex: 0 0 auto; align-self: center; }

/* Der Balken im Gespraechsblatt - vor dem Waehlen, nicht danach. */
.erlaubnis-balken {
    margin: 0 0 12px; padding: 9px 11px; border-radius: 9px;
    font-size: 0.84rem; line-height: 1.45;
    border: 1px solid var(--border-color); color: var(--text-secondary);
}
.erlaubnis-balken.gruen { border-color: var(--success); }
.erlaubnis-balken.gelb  { border-color: var(--warning); background: var(--warning-bg); }
.erlaubnis-balken.rot   { border-color: var(--error);   background: var(--error-bg);
                          color: var(--text-primary); font-weight: 600; }

/* Fuenf Reiter passen am Handy nicht mehr nebeneinander. Schiebbar
   statt umgebrochen - eine zweite Zeile Reiter frisst den halben
   Bildschirm und sieht aus wie ein Fehler. */
.reiter { overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter-punkt { flex: 0 0 auto; white-space: nowrap; }

/* Dieselbe Ueberlegung fuer die Umschaltung. Mit dem vierten Knopf
   "Sonstige" wird es am Handy eng - schiebbar statt umgebrochen. */
.artwahl { overflow-x: auto; scrollbar-width: none; }
.artwahl::-webkit-scrollbar { display: none; }
.artwahl-punkt { flex: 0 0 auto; white-space: nowrap; }

/* ── Nachfass-Strecken ───────────────────────────────────────── */
.schritt-zeile {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border-color);
}
.schritt-zeile:last-child { border-bottom: 0; }
.schritt-tag {
    flex: 0 0 auto; min-width: 52px; padding: 3px 8px;
    border-radius: 999px; background: var(--bg-erhoben);
    color: var(--text-secondary); font-size: 0.76rem; text-align: center;
    font-variant-numeric: tabular-nums;
}
.schritt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.schritt-text strong { font-size: 0.9rem; }
.schritt-text .still { color: var(--text-muted); font-size: 0.78rem; }

/* Der Versandschalter. Rot solange aus - das ist hier der GUTE
   Zustand, deshalb steht der Satz daneben und nicht nur die Farbe. */
.versand-karte { border-left: 3px solid var(--warning); }
.versand-karte.an { border-left-color: var(--error); }

/* Die einmalige Frage nach der Erlaubnis fuer den Symbolzaehler.
   Eine Zeile, kein Kasten - sie erscheint genau einmal und soll
   nicht wie eine Stoerung aussehen. */
.symbol-frage {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 12px; padding: 9px 11px;
    border: 1px solid var(--border-color); border-radius: 9px;
}