/* Geist — selbst gehostet (DSG-konform, kein Google-Fonts-Request).
   Eine Familie fürs ganze Interface, wie zuvor IBM Plex. */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geist-400-latin.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geist-500-latin.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/geist-600-latin.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/geist-700-latin.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/geist-900-latin.woff2") format("woff2")}
/* Akquise-Dashboard — Design «Coaching-Journal» (1:1 übernommen)
 * Geist-Schrift, heller Ambient-Verlauf, Frosted-Glass-Kacheln, MerOn-Blau.
 *
 * Historie (überschrieben): «Swiss Grounded»
 *
 * Durchgehend hell und flach. Kein dunkler Kopfbereich, keine Farbverläufe —
 * die wirkten wie generierte KI-Oberflächen und wurden bewusst entfernt.
 * Gearbeitet wird auf warmem Papierweiss, Schrift in Anthrazit.
 *
 * Eine Akzentfarbe: Violett, flach eingesetzt (Knöpfe, Links, aktive Zustände).
 * Wichtig: Der frühere «KI-Look» kam von den Violett-VERLÄUFEN, nicht von der
 * Farbe — ein flaches Violett auf Weiss ist markant, nicht generisch. Grün
 * bleibt der Ampel vorbehalten (gut/gewonnen/frei), trägt dort Bedeutung und
 * ist dadurch klar vom Marken-Akzent getrennt. Alle Text/Grund-Paare sind auf
 * mindestens 4.5:1 gerechnet (Royal-Blau #0a52d6 auf Weiss ≈ 7:1).
 *
 * Keine Kachelraster: Abschnitte trennen Haarlinien und Weissraum, nicht Boxen.
 * Schrift ist IBM Plex Sans — selbst gehostet, kein Aufruf zu Google Fonts.
 */

/* ---------------------------------------------------------------------------
 * Schrift: IBM Plex Sans, selbst gehostet.
 *
 * Bewusst kein Google-Fonts-Aufruf: Der interne Bereich soll keine Verbindung
 * zu Dritten aufbauen und keine IP-Adressen unseres Teams weitergeben. IBM Plex
 * Sans steht unter der SIL Open Font License, Selbsthosting ist erlaubt. Die
 * Dateien (Gewichte 400/500/600/700, je latin und latin-ext) liegen unter
 * assets/fonts/. Plex trägt Vertrauen und ist auf Zahlen ausgelegt — passend
 * für ein Werkzeug, in dem man den ganzen Tag Kennzahlen liest.
 * ------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
    unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
                   U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fonts/ibm-plex-sans-400-latin-ext.woff2") format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
                   U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
    unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
                   U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
                   U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
    unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
                   U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
                   U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/ibm-plex-sans-700-latin.woff2") format("woff2");
    unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
                   U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/ibm-plex-sans-700-latin-ext.woff2") format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
                   U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* MerOn-Blau (aus Logo) für Flächen (Knöpfe, aktive Zustände, Akzent).
       Flach eingesetzt, nie als Verlauf. Die alten Marken-Namen bleiben.
       Haupt-Akzent = Royal #0a52d6 (Text auf Weiss ~7:1, WCAG AA). */
    --plum: #0a52d6;               /* Knopf-Grundfläche (Royal-Blau) */
    --violet: #0840ad;             /* Knopf-Hover, dunkler */
    --rose: #0a52d6;
    --rose-hell: #6ea8ff;          /* helles Blau für Akzent-Linien */
    --nacht: #1C1C1A;              /* Anthrazit (nur noch Rest-Chrome) */

    /* Akzent für helle Flächen — Blau, dunkel genug für Text auf Weiss (~7:1) */
    --akzent: #0a52d6;
    --akzent-dunkel: #0840ad;

    /* Arbeitsbereich — kühles Journal-Hellblau (Glas über Ambient-Verlauf) */
    --weiss: #FFFFFF;
    --tint: #f3f6fd;
    --tint-2: #eef1f8;
    --linie: #dde3ef;
    --linie-zart: #eef1f8;

    /* Schrift auf hellem Grund — Journal-Ink */
    --ink: #1c2534;
    --text: #34343c;
    --text-2: #5c6678;
    --text-3: #6b7488;

    /* Journal-Glas + Verlauf */
    --glass: linear-gradient(158deg, rgba(255,255,255,.86), rgba(255,255,255,.6));
    --glass-border: 1px solid rgba(255,255,255,.85);
    --glass-blur: blur(18px) saturate(1.35);
    --grad: linear-gradient(135deg,#0070f0,#0a52d6);
    --grad-hover: linear-gradient(135deg,#1f8bff,#1550d8);

    /* Helle Schrift — für Scrim/Overlay */
    --hell: #F5F5F2;
    --hell-2: rgba(245, 245, 242, .84);
    --hell-3: rgba(245, 245, 242, .70);

    /* Ampel — Werte für hellen Grund */
    --gruen: #15803D;
    --gelb: #96620A;
    --rot: #C0304A;

    --radius: 14px;
    --radius-sm: 9px;
    --schnell: .18s cubic-bezier(.16, 1, .3, 1);

    /* Eingabefelder — 1:1 wie das Journal-Cockpit (MerOn-Corporate-Design):
       feste Höhe 40px, horizontaler Innenabstand 12px, 1.5px Rahmen, r=8px,
       14px/500. Alle Textfelder tragen damit dieselbe Grösse. */
    --feld-h: 40px;
    --feld-px: 12px;
    --feld-font: 14px;
    --feld-weight: 500;
    --feld-r: 8px;

    /* Eine Familie für alles. Die Hierarchie tragen
       Gewicht, Grösse und Laufweite, nicht ein zweiter Schriftschnitt. */
    --sans: "Geist", "Roboto", -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --serif: var(--sans);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background:
        radial-gradient(1100px 640px at 4% -12%, rgba(0,112,240,.30), transparent 56%),
        radial-gradient(980px 640px at 106% -4%, rgba(47,155,255,.28), transparent 55%),
        radial-gradient(820px 720px at 62% 122%, rgba(10,82,214,.18), transparent 60%),
        #e9edfb;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3 {
    font-family: var(--sans);
    font-weight: 800;              /* Journal-Überschriften, kräftig */
    letter-spacing: -.02em;        /* tracking-tight */
    color: var(--ink);
}

h1 { font-weight: 700; }

.kz-num, .score-num, .paket-preis {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.intern-chip {
    display: inline-block;
    border: 1px solid #a9c9ff;
    background: #dbe8ff;
    color: #0840ad;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 8px;
    vertical-align: middle;
}

/* ---------- Anmeldung: hell, mit violettem Akzentstreifen ---------- */

.page-auth {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--text);
    background: var(--tint);
}

.auth-wrap {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 32px;
    display: flex;
    align-items: center;
}

.auth-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; width: 100%; align-items: center; }

.brand-mark {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--akzent);
    margin: 0 0 14px;
}

.brand-hero h1 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.08; margin: 0 0 18px; color: var(--ink); }
.brand-lead { color: var(--text-2); margin: 0 0 28px; max-width: 46ch; }

.brand-checks { list-style: none; padding: 0; margin: 0 0 30px; }
.brand-checks li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--text-2); }

.brand-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 12px;
    height: 1px;
    background: var(--akzent);
}

.brand-contact { color: var(--text-3); font-size: .86rem; margin: 0; }

.auth-card {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(28, 28, 26, .04), 0 12px 32px rgba(28, 28, 26, .08);
    padding: 38px 36px;
    color: var(--text);
}

.auth-card h2 { margin: 0 0 6px; font-size: 1.55rem; }
.auth-sub { margin: 0 0 26px; color: var(--text-3); font-size: .9rem; }
.auth-card .intern-chip { border-color: #a9c9ff; background: #dbe8ff; color: var(--akzent); }

label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.auth-card label { margin-bottom: 7px; }

/* Die Liste zählt die Typen einzeln auf, damit Kästchen und Schalter nicht
   mitgefasst werden. Sie war unvollständig: «search» (Pipeline-Suche), «date»
   (Wiedervorlage) und «tel»/«url» fielen heraus und wurden vom Browser
   voreingestellt gezeichnet — 13px hoch, ohne Rahmen, auf dem iPad kaum zu
   treffen und beim Antippen mit Zoom. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
input[type="tel"], input[type="url"], select, textarea {
    width: 100%;
    height: var(--feld-h);
    padding: 0 var(--feld-px);
    border: 1.5px solid var(--linie);
    border-radius: var(--feld-r);
    background: var(--tint);
    color: var(--ink);
    font-size: var(--feld-font);
    font-family: inherit;
    font-weight: var(--feld-weight);
    transition: border-color var(--schnell), box-shadow var(--schnell);
    /* Nicht stauchen, falls das Feld ein Flex-Kind im <label> ist (wie im Journal) */
    flex: none;
}

/* Mehrzeilig: feste Höhe wäre falsch, der Innenabstand ist optisch angeglichen. */
textarea {
    height: auto;
    min-height: 64px;
    padding: 10px var(--feld-px);
    line-height: 1.5;
    resize: vertical;
}

.auth-card input { margin-bottom: 18px; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--akzent);
    background: var(--weiss);
    box-shadow: 0 0 0 3px rgba(10, 82, 214, .15);
}

input::placeholder, textarea::placeholder { color: #9A9A90; }
input[type="checkbox"] { accent-color: var(--akzent); width: 16px; height: 16px; cursor: pointer; }

.btn-primary {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--grad);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--schnell), transform var(--schnell);
}

.btn-primary:hover { background: var(--violet); }
.btn-primary:active { transform: scale(.985); }

.auth-alt { margin: 20px 0 0; font-size: .88rem; color: var(--text-3); text-align: center; }

.alert, .notice {
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    margin-bottom: 20px;
    font-size: .89rem;
    border-left: 3px solid;
}

.alert { background: #FDECEF; border-color: var(--rot); color: #8A1F33; }
.alert p { margin: 0 0 4px; }
.alert p:last-child { margin-bottom: 0; }

.notice { background: var(--tint-2); border-color: var(--akzent); color: #2F4A2A; }

.auth-footer { text-align: center; color: var(--text-3); font-size: .8rem; padding: 0 32px 32px; }
.auth-footer p { margin: 0; }

/* ---------- Kopfzone: hell und flach ---------- */

/* Flacher heller Kopf mit Haarlinie unten — kein Verlauf, keine dunkle Zone.
   Ein dünner grüner Streifen oben gibt der Seite eine Kante ohne Farbfläche. */
.app-header {
    padding: 40px 0 34px;
    color: var(--text);
    background: var(--weiss);
    border-top: 3px solid var(--akzent);
    border-bottom: 1px solid var(--linie);
}

.app-header h1 { margin: 0 0 20px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; color: var(--ink); }
/* Volle Breite statt halber Spalte — bei 1180px sind das rund zwei Zeilen
   statt vier, und rechts bleibt keine leere Fläche stehen. 105ch deckelt es
   auf sehr breiten Bildschirmen, damit die Zeile lesbar bleibt. */
.app-lead {
    color: var(--text-2);
    max-width: 105ch;
    margin: 0 0 32px;
    font-size: 1.06rem;
    line-height: 1.7;
}
.app-header .brand-mark { color: var(--akzent); }

.crumb { margin: 0 0 22px; font-size: .84rem; }
.crumb a { color: var(--akzent); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.usp-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    font-size: .82rem;
    line-height: 2.1;
    color: var(--text-3);
}

.usp-row li { padding: 0 18px; border-left: 1px solid var(--linie); }
.usp-row li:first-child { padding-left: 0; border-left: 0; }

/* Hero-Kennzahl im Kopf der Detailseite: grosser Fit-Score + Ampel-Pill.
   Ersetzt die Text-Aufzählung durch eine Zahl, die man von weitem liest. */
.lead-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 20px;
}
.lead-score { display: flex; align-items: baseline; gap: 10px; }
.lead-score-num {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.lead-score-lbl { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

.lead-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lead-status { font-size: .9rem; color: var(--text-2); }
.lead-status strong { color: var(--ink); font-weight: 600; }

.ampel-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
}
.ampel-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.ampel-pill-gruen  { background: #E6F4EE; border-color: #A9D9C4; color: #0B5F3E; }
.ampel-pill-gruen  .dot { background: var(--gruen); }
.ampel-pill-gelb   { background: #FBF0DC; border-color: #E3C68A; color: #7A4F08; }
.ampel-pill-gelb   .dot { background: var(--gelb); }
.ampel-pill-rot    { background: #FCE9EC; border-color: #EFB6C0; color: #93233A; }
.ampel-pill-rot    .dot { background: var(--rot); }
.ampel-pill-unklar { background: var(--tint-2); border-color: var(--linie); color: var(--text-2); }
.ampel-pill-unklar .dot { background: #B9B9AE; }

/* Trichter: die Status-Stufen als Überblick oben in der Pipeline. Jede Stufe
   ist zugleich ein Filter (wie die alten Kacheln), nur gross und ablesbar.
   Bewusst gleich breite Segmente statt schmaler werdender Balken — die Zahlen
   sind eine Momentaufnahme je Status, kein Kohorten-Trichter; abnehmende
   Breiten würden eine Umwandlung behaupten, die die Daten nicht hergeben. */
.trichter {
    display: flex;
    flex-wrap: wrap;
    margin: 28px 0 10px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    overflow: hidden;
    background: var(--weiss);
}
.tr-stufe {
    flex: 1;
    min-width: 116px;
    padding: 15px 18px;
    text-decoration: none;
    color: inherit;
    border-left: 1px solid var(--linie-zart);
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background var(--schnell);
}
.tr-stufe:first-child { border-left: 0; }
.tr-stufe:hover { background: var(--tint); }
.tr-num {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.tr-lbl { font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.tr-stufe-aktiv { background: var(--tint-2); box-shadow: inset 0 -3px 0 var(--akzent); }
.tr-stufe-ziel .tr-num { color: var(--akzent); }
.tr-stufe-ziel .tr-lbl { color: var(--akzent); font-weight: 700; }
.trichter-quote { font-size: .87rem; color: var(--text-2); margin: 12px 2px 0; }
.trichter-quote strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Gruppen-Kopf in der Pipeline-Tabelle: farbige Status-Pille mit Zähler. */
.gruppe-kopf td {
    background: var(--tint) !important;
    padding: 11px 18px !important;
    border-bottom: 1px solid var(--linie) !important;
}
.gruppe-kopf .ampel-pill { padding: 4px 12px; font-size: .8rem; }
.gruppe-kopf .gruppe-zahl { margin-left: 8px; color: var(--text-3); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* ---------- Arbeitsbereich auf Weiss ---------- */

.section-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid var(--linie);
}

.section-nav .wrap { display: flex; gap: 2px; overflow-x: auto; }

.section-nav a {
    padding: 14px 16px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--schnell), border-color var(--schnell);
}

.section-nav a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }

main.wrap { padding-top: 52px; padding-bottom: 88px; }

.card { border-top: 1px solid var(--linie); padding: 32px 0 10px; margin-bottom: 40px; scroll-margin-top: 76px; }
.card > h2 { margin: 0 0 14px; font-size: 1.55rem; }

/* Einklappbarer Abschnitt: <details class="card"> mit <summary> als Kopf.
   Nachschlage-Sektionen stehen zu, das eine Kennzahl-Wort bleibt sichtbar —
   das kürzt langes Scrollen, ganz ohne JavaScript. */
details.card > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 2px;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after {
    content: "";
    margin-left: auto;
    align-self: center;
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    transform: rotate(45deg);
    transition: transform var(--schnell);
}
details.card[open] > summary::after { transform: rotate(-135deg); }
details.card > summary:hover { color: var(--akzent); }
details.card > summary .kz-hint {
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-3);
}
details.card[open] > summary { margin-bottom: 14px; }

.muted { color: var(--text-3); font-size: .93rem; line-height: 1.7; max-width: 105ch; }
.sub-h { margin: 34px 0 14px; font-size: 1.15rem; }

/* Kennzahlen: Zeile mit Haarlinien statt Kacheln */

.kennzahlen {
    display: flex;
    flex-wrap: wrap;
    margin: 34px 0 30px;
    border-top: 1px solid var(--linie-zart);
    border-bottom: 1px solid var(--linie-zart);
    padding: 26px 0;
}

.kz {
    padding: 0 32px;
    border-left: 1px solid var(--linie-zart);
    text-decoration: none;
    color: inherit;
    transition: color var(--schnell);
}

.kz:first-child { padding-left: 0; border-left: 0; }

/* Die Kacheln sind Filter — das muss man ihnen ansehen */
a.kz:hover .kz-num, a.kz:hover .kz-lbl { color: var(--akzent); }

.kz-aktiv .kz-num { color: var(--akzent); }
.kz-aktiv .kz-lbl { color: var(--akzent); font-weight: 700; }

/* Fälligkeiten */
.faellig-warn {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--rot);
}

.faellig-heute {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--akzent);
}
.kz-num { display: block; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }

.kz-lbl {
    display: block;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 8px;
}

/* Tabellen
 *
 * Datentabellen bekommen eine eigene Tafel: Rahmen, Kopfzeile mit Fläche und
 * abwechselnd getönte Zeilen. Auf blankem Weiss verliert das Auge beim Wandern
 * über die Zeile die Spur — genau das war der Grund für die Umstellung. */

.table-scroll {
    overflow-x: auto;
    margin: 24px 0;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(34, 19, 42, .04), 0 10px 28px rgba(34, 19, 42, .06);
}

table { width: 100%; border-collapse: collapse; font-size: .9rem; }

thead th {
    text-align: left;
    padding: 0 14px 11px 0;
    color: var(--text-3);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}

tbody td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--linie-zart); vertical-align: top; color: var(--text-2); }
tbody tr:last-child td { border-bottom: 0; }

/* Innerhalb der Tafel: Kopfzeile mit Fläche, Zeilen mit Innenabstand */

.table-scroll thead th {
    background: var(--tint-2);
    padding: 13px 18px;
    color: var(--text-2);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-scroll tbody td { padding: 15px 18px; border-bottom: 1px solid var(--linie-zart); }
.table-scroll tbody tr:nth-child(even) td { background: var(--tint); }
.table-scroll tbody tr:hover td { background: #eef4ff; }
.table-scroll tbody tr:last-child td { border-bottom: 0; }

/* Erste Spalte anbinden: Zeilennummer gedämpft, Betrieb als Anker */
.lead-table tbody td:first-child { color: var(--text-3); font-variant-numeric: tabular-nums; }

.lead-link {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 82, 214, .4);
    transition: color var(--schnell), border-color var(--schnell);
}

.lead-link:hover { color: var(--akzent); border-bottom-color: var(--akzent); }
.zeiten { font-size: .82rem; color: var(--text-2); }

.lead-ort, .lead-rolle { display: block; font-size: .76rem; color: var(--text-3); line-height: 1.5; margin-top: 3px; }

.score-cell { display: flex; align-items: center; gap: 10px; min-width: 116px; }
.score-num { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.bar { display: inline-block; flex: 1; height: 3px; min-width: 54px; background: var(--tint-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; }
.bar-gruen { background: var(--gruen); }
.bar-gelb { background: var(--gelb); }
.bar-rot { background: var(--rot); }
.bar-unklar { background: #B9A9C2; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.dot-gruen { background: var(--gruen); }
.dot-gelb { background: var(--gelb); }
.dot-rot { background: var(--rot); }
.dot-unklar { background: #B9A9C2; }

/* Hinweise, Personen, Schlüssel-Wert */

.hinweis {
    border-left: 3px solid var(--akzent);
    background: var(--tint);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 16px 20px;
    font-size: .91rem;
    color: var(--text-2);
    margin: 22px 0;
}

.hinweis strong { color: var(--ink); }

.profile { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--tint); padding: 26px 28px; margin-top: 22px; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.profile h3 { margin: 0 0 12px; font-size: 1.22rem; }
.profile-head h3 { margin: 0; }

.profile h4 {
    margin: 22px 0 10px;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--akzent);
    font-family: var(--sans);
    font-weight: 700;
}

.profile-kurz { color: var(--text-2); font-size: .93rem; margin: 12px 0 18px; }
.profile-cta { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.badge { font-size: .74rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.badge-gruen { background: #E6F4EE; border-color: #A9D9C4; color: #0B5F3E; }
.badge-gelb  { background: #FBF0DC; border-color: #E3C68A; color: #7A4F08; }
.badge-rot   { background: #FCE9EC; border-color: #EFB6C0; color: #93233A; }
.badge-unklar { background: var(--tint-2); border-color: var(--linie); color: var(--text-2); }

.person {
    border-left: 3px solid var(--akzent);
    background: var(--tint);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 22px 26px;
    margin-top: 20px;
}

.person-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.person-head h3 { margin: 0; font-size: 1.3rem; }
.person-rolle { margin: 6px 0 16px; font-weight: 600; color: var(--akzent); font-size: .93rem; }

.kv { width: 100%; font-size: .9rem; }

.kv th {
    text-align: left;
    width: 210px;
    padding: 10px 18px 10px 0;
    color: var(--text-3);
    font-weight: 600;
    vertical-align: top;
    border-bottom: 1px solid var(--linie-zart);
    text-transform: none;
    letter-spacing: 0;
    font-size: .9rem;
    white-space: normal;
}

.kv td { padding: 10px 0; border-bottom: 1px solid var(--linie-zart); color: var(--text-2); }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }

.status {
    display: inline-block;
    margin-top: 5px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 2px 7px;
    border: 1px solid;
}

.status-verifiziert { background: #E6F4EE; border-color: #A9D9C4; color: #0B5F3E; }
.status-teilweise   { background: #FBF0DC; border-color: #E3C68A; color: #7A4F08; }
.status-unklar      { background: var(--tint-2); border-color: var(--linie); color: var(--text-3); }

/* Bewertung */

.dims { margin: 22px 0; }
.dim { display: flex; align-items: center; gap: 14px; margin-bottom: 9px; font-size: .84rem; }
.dim .bar { max-width: 320px; }
.dim-label { width: 84px; color: var(--text-2); font-weight: 600; }
.dim-num { width: 50px; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }

.pain-table { font-size: .89rem; }

.aufhaenger {
    margin: 20px 0 0;
    padding: 18px 22px;
    background: var(--tint-2);
    border-radius: var(--radius-sm);
    font-size: .93rem;
    color: var(--text-2);
}

.aufhaenger strong { color: var(--akzent); }

/* Aufklappbare Texte */

details { border-bottom: 1px solid var(--linie-zart); }

summary {
    cursor: pointer;
    padding: 15px 0;
    font-size: .91rem;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    transition: color var(--schnell);
}

summary:hover { color: var(--akzent); }
summary::-webkit-details-marker { display: none; }

summary::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 12px;
    border-right: 1.5px solid var(--akzent);
    border-bottom: 1.5px solid var(--akzent);
    transform: rotate(-45deg) translateY(-2px);
    transition: transform var(--schnell);
}

details[open] summary::before { transform: rotate(45deg) translateY(-2px); }
details > p, details > pre { margin: 0 0 18px; }

.mailtext {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    font-size: .91rem;
    line-height: 1.7;
    background: var(--tint);
    border-left: 3px solid var(--linie);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 20px 24px;
    color: var(--text);
}

/* Einwandbehandlung */

/* Aufklapper für lange Textsammlungen — Einwände wie Werbetexte.
   Zugeklappt sieht man das Verzeichnis auf einen Blick, aufgeklappt nur das
   eine, das man gerade braucht. Reines HTML, kein Skript. */
.klapp {
    border: 1px solid var(--linie);
    border-radius: var(--radius-sm);
    margin-top: 10px;
    background: var(--weiss);
}

.klapp > summary {
    padding: 15px 18px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--ink);
}

.klapp[open] > summary {
    border-bottom: 1px solid var(--linie-zart);
    color: var(--akzent);
}

.klapp-inhalt { padding: 4px 18px 18px; }
.klapp-inhalt .avbf { margin-top: 10px; }
.klapp-inhalt .mailtext { margin-top: 0; }

.avbf { list-style: none; padding: 0; margin: 0; }
.avbf li { padding: 12px 0; border-bottom: 1px solid var(--linie-zart); font-size: .93rem; color: var(--text-2); }
.avbf li:last-child { border-bottom: 0; }

.step {
    display: inline-block;
    min-width: 104px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--akzent);
    margin-right: 10px;
}

/* Werbetexte */

.hero-h { font-weight: 600; letter-spacing: -.02em; font-size: 1.35rem; color: var(--ink); margin: 0 0 12px; }

.cta-chip {
    display: inline-block;
    background: var(--grad);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--schnell);
}

a.cta-chip:hover { background: var(--violet); color: #fff; }

.plain-list { margin: 0; padding-left: 20px; font-size: .93rem; color: var(--text-2); }
.plain-list li { margin-bottom: 8px; }
.plain-list.check { list-style: none; padding-left: 0; }
.plain-list.check li { position: relative; padding-left: 24px; }

.plain-list.check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: 12px;
    height: 1px;
    background: var(--gruen);
}

.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { background: var(--tint); border: 1px solid var(--linie); border-radius: var(--radius-sm); padding: 8px 13px; font-size: .87rem; color: var(--text-2); }
.len { display: inline-block; margin-left: 8px; font-size: .7rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Pakete */

.pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 6px; }
.paket { border-left: 1px solid var(--linie-zart); padding: 24px 28px; }
.paket:first-child { border-left: 0; padding-left: 0; }

.paket-name { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); margin: 0 0 12px; font-weight: 700; }
.paket-preis { font-size: 1.7rem; margin: 0 0 4px; }
.paket-dauer { font-size: .8rem; color: var(--text-3); margin: 0 0 18px; }
.paket ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--text-2); }
.paket li { margin-bottom: 8px; }

/* Anruf-Ergebnisknöpfe: bewusst gross und nebeneinander — sie werden mit dem
   Hörer am Ohr geklickt, nicht in Ruhe ausgewählt. */

/* Das Notizfeld sitzt im selben Formular wie die Knöpfe, damit Getipptes beim
   Klick mitgeht. Deshalb hier eigene Masse statt .statusform. */
.anrufform { margin: 20px 0 8px; }
.anrufform label { max-width: 460px; }

.anrufknoepfe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 16px 0 8px;
}

.anrufknopf {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    text-align: left;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--schnell), background var(--schnell);
}

.anrufknopf:hover { border-color: var(--akzent); background: var(--tint); }

.ak-titel { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); }
.ak-folge { display: block; font-size: .78rem; color: var(--text-3); margin-top: 3px; }

.anrufknopf-aus:hover { border-color: var(--rot); background: #FCE9EC; }
.anrufknopf-aus .ak-titel { color: #93233A; }

/* Notiz-Fenster
 *
 * Öffnet über :target — ein Link auf #notiz zeigt es, ein Link auf #zu blendet
 * es wieder aus. Reines CSS, kein Skript: Das Fenster ist immer im Dokument,
 * nur unsichtbar. Der Nachteil ist ein Eintrag im Browserverlauf, der Vorteil,
 * dass es ohne JavaScript funktioniert wie alles andere hier auch.
 */
.popout {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 24px;
    align-items: center;
    justify-content: center;
}

.popout:target { display: flex; }

.popout-hintergrund {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 26, .5);
    backdrop-filter: blur(3px);
}

.popout-karte {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--weiss);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(20, 6, 24, .38);
    padding: 30px 32px;
    max-height: 86vh;
    overflow-y: auto;
}

.popout-karte h3 { margin: 0 0 8px; font-size: 1.3rem; }
.popout-karte .muted { margin-bottom: 20px; }
.popout-karte label { margin-bottom: 0; }
.popout-karte textarea { margin-top: 8px; resize: vertical; }

.popout-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 20px 0 0;
}

.popout-knoepfe .btn-start { border: 0; font-family: inherit; cursor: pointer; }

/* Pipeline und Aktionen */

/* Titel links, Aktionen rechts. Die Textspalte wird gedeckelt, damit die
   Knöpfe auf einer Zeile bleiben und nicht darunter rutschen. */
.pipeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px 32px;
    margin-bottom: 4px;
}

.pipeline-head > div:first-child { flex: 1 1 480px; min-width: 0; max-width: 64%; }
.pipeline-head h2 { margin-bottom: 10px; }
.pipeline-head .muted { max-width: 74ch; margin: 0; }

.start-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

.btn-start {
    flex: none;
    background: var(--grad);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    transition: background var(--schnell);
}

.btn-start:hover { background: var(--violet); color: #fff; }

.btn-start-2 { background: var(--weiss); color: var(--plum); border: 1px solid var(--linie); }
.btn-start-2:hover { background: var(--tint-2); color: var(--plum); }

.skill-chip {
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    border: 1px solid var(--linie);
    color: var(--text-3);
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 3px 8px;
}

.aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 24px 0 0; }

.btn-loeschen, .btn-loeschen-klein {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #EFB6C0;
    background: #FCE9EC;
    color: #93233A;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--schnell);
}

.btn-loeschen { padding: 12px 22px; font-size: .92rem; }
.btn-loeschen-klein { padding: 9px 16px; font-size: .85rem; }
.btn-loeschen:hover, .btn-loeschen-klein:hover { background: #F8D7DD; }

.loeschen-link { color: var(--rot); }
.loeschen-link:hover { color: #93233A; }

.karte-warnung { border-top-color: #EFB6C0; }
.karte-warnung h2 { color: #93233A; }

.loesch-warnung {
    background: #FCE9EC;
    border-left: 3px solid var(--rot);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 20px 24px;
    margin-bottom: 24px;
    font-size: .92rem;
    color: #8A1F33;
}

.loesch-warnung p { margin: 0 0 12px; }
.loesch-warnung .plain-list { margin-bottom: 16px; color: #8A1F33; }
.loesch-warnung .statusform { margin: 0; }

.zeile-bekannt { opacity: .5; }

/* Formulare */

.form-card { border-top: 1px solid var(--linie); padding-top: 34px; }

.form-card h2 {
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-family: var(--sans);
    font-weight: 700;
    color: var(--akzent);
    margin: 40px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linie-zart);
}

.form-card h2:first-of-type { margin-top: 0; }

.feldgruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 22px; margin-bottom: 10px; }
.form-card label { margin-bottom: 0; }
.form-card input, .form-card select, .form-card textarea { margin-top: 7px; }

.checkliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px 22px; margin: 12px 0 8px; }

label.check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-weight: 400;
    font-size: .89rem;
    color: var(--text-2);
    background: var(--tint);
    border: 1px solid var(--linie);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color var(--schnell), background var(--schnell);
}

label.check:hover { border-color: var(--akzent); background: var(--tint-2); }
label.check input { margin-top: 3px; flex: none; }
label.check.inline { background: none; border: 0; padding: 0; align-items: center; }

.statusform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 20px 0 24px; }
.statusform label { flex: 1 1 200px; }

/* Der Notiz-Knopf steht neben dem Submit-Knopf und muss exakt gleich hoch sein.
   Link und Button erben unterschiedliche Zeilenhoehen, sonst ragt einer heraus. */
.statusform .btn-start {
    padding: 10px 22px;
    font-size: 1rem;
    line-height: 1.25;
}
.statusform input, .statusform select { margin-top: 7px; }

/* Wie «+ Akquise starten» im Pipeline-Kopf, nur kleiner: dieselbe Handlung
   soll überall gleich aussehen.
   appearance:none ist nötig, weil Safari und iOS sonst ihre eigene Knopfoptik
   über die Farbe legen — dann steht dort ein blassblaues Systemelement statt
   unseres Knopfs. */
.mini-knopf {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    background: var(--grad);
    background-image: none;
    border: 1px solid var(--plum);
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    margin: 0;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(34, 19, 42, .12);
    transition: background var(--schnell), border-color var(--schnell);
}

.mini-knopf:hover { background: var(--violet); border-color: var(--violet); }
.mini-knopf:active { transform: translateY(1px); }

/* Abschnittstitel mit Aktion daneben: der Knopf gehoert zur Ueberschrift,
   nicht in eine eigene Zeile darunter — dort wirkte er wie ein Fremdkoerper. */
.kopf-mit-knopf { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.kopf-mit-knopf .mini-knopf { font-weight: 600; text-decoration: none; padding: 7px 14px; }

.mini-link { font-size: .84rem; font-weight: 600; color: var(--akzent); text-decoration: none; }
.mini-link:hover { color: var(--akzent-dunkel); text-decoration: underline; }

/* Fussbereich */

.app-footer { border-top: 1px solid var(--linie); padding: 32px 0 44px; font-size: .85rem; color: var(--text-3); }
.app-footer p { margin: 0 0 8px; }
.app-footer a { color: var(--akzent); }
.app-footer .small { font-size: .78rem; max-width: 88ch; margin: 0; }

/* Responsiv */

@media (max-width: 900px) {
    .auth-grid { grid-template-columns: 1fr; gap: 40px; }
    .pakete { grid-template-columns: 1fr; }
    .paket { border-left: 0; border-top: 1px solid var(--linie-zart); padding-left: 0; }
    .paket:first-child { border-top: 0; }
    .kz { padding: 0 24px; }

    /* Mobil sitzt oben die Menü-Schaltfläche (.sm-knopf, ~49px) sticky. Die
       Abschnittsleiste muss darunter andocken, sonst verschwindet sie dahinter. */
    .section-nav { top: 49px; }
    .card { scroll-margin-top: 118px; }
}

/* «Nach oben»: dezent, fest unten rechts, springt an den Seitenanfang.
   Auf jeder App-Seite (aus dem Menü gerendert), rein per Anker, kein JS. */
.nach-oben {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--weiss);
    border: 1px solid var(--linie);
    box-shadow: 0 1px 2px rgba(28, 28, 26, .06), 0 8px 20px rgba(28, 28, 26, .08);
    color: var(--text-2);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
    transition: color var(--schnell), border-color var(--schnell);
}
.nach-oben:hover { color: var(--akzent); border-color: #C4B5FD; }

@media (max-width: 620px) {
    .wrap { padding: 0 20px; }
    .auth-wrap { padding: 36px 20px; }
    .auth-card { padding: 28px 22px; }
    .app-header { padding: 34px 0 48px; }
    .card { padding-top: 26px; margin-bottom: 34px; }
    .profile { padding: 20px; }
    .kennzahlen { gap: 20px 0; }
    .kz { flex: 1 0 42%; padding: 0 16px; }
    .kz:nth-child(odd) { padding-left: 0; border-left: 0; }
    .usp-row { gap: 4px 0; }
    .usp-row li { padding: 0; border-left: 0; flex: 1 0 100%; }
    .usp-row li::before { content: "— "; color: var(--rose-hell); }
    .dim { flex-wrap: wrap; }
    .dim-label { width: auto; }
    .step { min-width: auto; display: block; margin-bottom: 4px; }
    .mailtext { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* Blätterleiste der Pipeline. Erscheint erst ab der zweiten Seite — bei
   zwanzig Leads wäre sie nur Ballast. */
.blaetterleiste {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 0;
}
.blaetterleiste .mini-knopf { text-decoration: none; }

/* Suchleiste über der Pipeline */
.suchleiste {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
}
.suchleiste .suchfeld { flex: 1 1 320px; }
.suchleiste .suchfeld span { display: block; margin-bottom: 4px; }
.suchleiste .spacer { flex: 1 1 auto; }
.suchleiste .mini-knopf { text-decoration: none; }

/* ===========================================================================
 * Seitenmenü — vertikal, links, auf jeder angemeldeten Seite (_lib/seitenmenu.php)
 *
 * Hell und ruhig: weisse Leiste, Anthrazit-Schrift, Tannengrün nur für den
 * aktiven Punkt. Kein Farbverlauf, keine dunkle Fläche — das Menü tritt zurück
 * und lässt den Arbeitsbereich vorne. Fest positioniert; der Seiteninhalt
 * bekommt links Platz über padding auf .page-app. Unter 900px wird daraus ein
 * Ausklapp-Menü (reiner CSS-Schalter).
 * ------------------------------------------------------------------------- */

.seitenmenu {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 236px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 22px 16px 18px;
    overflow-y: auto;
    color: var(--text-2);
    background: var(--weiss);
    border-right: 1px solid var(--linie);
}

.sm-marke {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 20px;
    text-decoration: none;
    color: var(--ink);
}
.sm-chip {
    font-size: .64rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    color: #0840ad;
    border: 1px solid #a9c9ff;
    background: #dbe8ff;
    padding: 3px 7px;
    border-radius: 6px;
}
.sm-firma { font-weight: 600; font-size: .96rem; letter-spacing: -.01em; }

.sm-gruppe { display: flex; flex-direction: column; gap: 3px; }

.sm-titel {
    margin: 20px 8px 7px;
    font-size: .67rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sm-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--text-2);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background var(--schnell), color var(--schnell);
}
.sm-link:hover { background: var(--tint-2); color: var(--ink); }
.sm-link .sm-icon { width: 19px; height: 19px; flex: none; opacity: .7; }

.sm-aktiv, .sm-aktiv:hover {
    background: #dbe8ff;
    color: #0840ad;
    box-shadow: inset 3px 0 0 var(--akzent);
}
.sm-aktiv .sm-icon { opacity: 1; color: var(--akzent); }

.sm-fuss { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie-zart); }
.sm-benutzer {
    margin: 12px 8px 9px;
    font-size: .78rem;
    color: var(--text-3);
}
.sm-benutzer strong { color: var(--text); font-weight: 600; }

.sm-abmelden {
    display: block;
    padding: 11px 12px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--akzent);
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid var(--linie);
    text-align: center;
    transition: background var(--schnell), border-color var(--schnell);
}
.sm-abmelden:hover { background: var(--tint-2); border-color: #a9c9ff; color: var(--akzent-dunkel); }

/* Hersteller-Marke «Ein Produkt von MerOn-Tech» — dezent, tritt zurück.
   Das bunte Logo trägt als kleine Marke, ohne mit dem ruhigen Design zu
   konkurrieren. Getrennt vom Kundennamen (der steht oben). */
.hersteller-marke {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-3);
    font-size: .72rem;
    line-height: 1.3;
    transition: color var(--schnell);
}
.hersteller-marke img { width: auto; height: 22px; flex: none; display: block; }
/* Weißer Mark auf der dunklen Sidebar, farbig im hellen Footer */
.hersteller-menu img { filter: brightness(0) invert(1); opacity: .92; }
.hersteller-marke strong { color: var(--text-2); font-weight: 600; }
.hersteller-marke:hover { color: var(--text-2); }
.hersteller-marke:hover strong { color: var(--akzent); }

.hersteller-menu { margin: 14px 8px 2px; }
.hersteller-footer { margin-top: 10px; justify-content: center; }

/* Inhalt neben das Menü rücken. */
body.page-app { padding-left: 236px; }


/* Der mobile Schalter ist auf Desktop unsichtbar. */
.sm-knopf { display: none; }
.sm-overlay { display: none; }

@media (max-width: 900px) {
    body.page-app { padding-left: 0; }

    .sm-knopf {
        position: sticky;
        top: 0;
        z-index: 43;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 13px 20px;
        background: var(--weiss);
        color: var(--ink);
        border-bottom: 1px solid var(--linie);
        font-size: .88rem;
        font-weight: 600;
        cursor: pointer;
    }
    .sm-knopf span {
        width: 18px; height: 2px; border-radius: 2px; background: var(--akzent);
        box-shadow: 0 6px 0 var(--akzent), 0 -6px 0 var(--akzent);
        margin-right: 6px;
    }
    .sm-knopf span + span, .sm-knopf span + span + span { display: none; }

    .seitenmenu {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 260px;
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.16, 1, .3, 1);
        z-index: 42;
    }
    .sm-schalter:checked ~ .seitenmenu { transform: translateX(0); }

    /* Verdunkelung hinter dem offenen Menü. Eigenes Label: ein Klick darauf
       schliesst das Menü wieder. Kein 100vmax-Schatten (Paint-Artefakte). */
    .sm-schalter:checked ~ .sm-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 41;
        background: rgba(20, 8, 20, .5);
    }
}

/* ===========================================================================
 * Team-Dashboard (team.php, nur Verwalter): Kacheln je Mitarbeiter.
 * ------------------------------------------------------------------------- */

.zeitwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 20px; }
.zeitwahl-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.zeit-chip {
    padding: 6px 14px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    font-size: .84rem;
    color: var(--text-2);
    text-decoration: none;
    transition: border-color var(--schnell), background var(--schnell), color var(--schnell);
}
.zeit-chip:hover { border-color: #a9c9ff; color: var(--akzent); }
.zeit-chip-aktiv, .zeit-chip-aktiv:hover {
    background: #dbe8ff;
    border-color: #a9c9ff;
    color: var(--akzent-dunkel);
    font-weight: 600;
}

/* Team-Summe: eine Zeile mit den Gesamtzahlen des Zeitraums. */
.team-summe {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--linie);
    border-radius: 12px;
    overflow: hidden;
    background: var(--weiss);
    margin-bottom: 28px;
}
.ts-feld { flex: 1; min-width: 116px; padding: 15px 18px; border-left: 1px solid var(--linie-zart); display: flex; flex-direction: column; gap: 5px; }
.ts-feld:first-child { border-left: 0; }
.ts-num { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ts-lbl { font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.team-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 16px;
}
.team-kachel {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 12px;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
}
.team-kachel-inaktiv { opacity: .62; }

.tk-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tk-avatar {
    width: 40px; height: 40px; flex: none;
    border-radius: 50%;
    background: #dbe8ff;
    color: var(--akzent-dunkel);
    font-size: .86rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.tk-ident { min-width: 0; }
.tk-name { margin: 0 0 4px; font-weight: 600; font-size: 1.02rem; color: var(--ink); line-height: 1.2; }

.rolle-pill {
    display: inline-block;
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; border: 1px solid;
}
.rolle-verwalter { background: #dbe8ff; border-color: #a9c9ff; color: var(--akzent-dunkel); }
.rolle-bearbeiter { background: var(--tint-2); border-color: var(--linie); color: var(--text-2); }
.rolle-gesperrt { background: #FCE9EC; border-color: #EFB6C0; color: #93233A; margin-left: 4px; }

.tk-summe { display: flex; align-items: baseline; gap: 8px; padding: 4px 0 14px; border-bottom: 1px solid var(--linie-zart); margin-bottom: 12px; }
.tk-summe-num { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--akzent); }
.tk-summe-lbl { font-size: .74rem; color: var(--text-3); }

.tk-metriken { list-style: none; margin: 0; padding: 0; }
.tk-metriken li { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: .88rem; color: var(--text-2); }
.tk-metriken strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-metriken .tk-null { color: var(--text-3); font-weight: 400; }

/* Aufschlüsselung je Kachel einklappbar — Summe/Abschlüsse/Quote bleiben sichtbar. */
.tk-klapp { margin-top: 4px; }
.tk-klapp > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: .78rem;
    color: var(--text-3);
}
.tk-klapp > summary::-webkit-details-marker { display: none; }
.tk-klapp > summary::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3);
    transform: rotate(45deg);
    transition: transform var(--schnell);
}
.tk-klapp[open] > summary::after { transform: rotate(-135deg); }
.tk-klapp > summary:hover { color: var(--akzent); }

.tk-fuss { margin: 12px 0 0; font-size: .76rem; color: var(--text-3); }

/* Team: Ergebnis-Kennzahlen (Abschlüsse, Antwortquote) — Ertrag, getrennt vom Aufwand. */
.team-ergebnis-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: -12px 2px 26px;
    font-size: .9rem;
    color: var(--text-2);
}
.team-ergebnis-zeile strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.team-ergebnis-zeile .teg-sep { color: var(--linie); }
.team-ergebnis-zeile .muted { font-size: .82rem; }

.tk-ergebnis {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--linie-zart);
}
.tk-erg-feld { flex: 1; }
.tk-erg-num { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tk-erg-gewinn { color: var(--gruen); }
.tk-erg-lbl { display: block; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-top: 5px; }

/* ===========================================================================
 * Lade-Overlay der Umkreissuche (umkreis.php): rotierender Kreis + Hinweis,
 * während live OpenStreetMap abgefragt wird. Zeigt sich beim Absenden.
 * ------------------------------------------------------------------------- */
.such-laden {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(250, 250, 247, .82);
    backdrop-filter: blur(3px);
}
.such-laden.an { display: flex; }

.such-laden-karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28, 28, 26, .04), 0 20px 50px rgba(28, 28, 26, .12);
    padding: 34px 40px;
    max-width: 400px;
    text-align: center;
}

.spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    border: 4px solid var(--tint-2);
    border-top-color: var(--akzent);
    border-radius: 50%;
    animation: spinner-dreh .8s linear infinite;
}
@keyframes spinner-dreh { to { transform: rotate(360deg); } }

.such-laden-titel { margin: 0 0 8px; font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.such-laden-sub { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-2); }

/* Weniger Bewegung: statt Drehung ein ruhiges Pulsieren. */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: spinner-puls 1.2s ease-in-out infinite; }
    @keyframes spinner-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

/* Aktivität schnell festhalten (kampagne.php): «Anruf notiert» / «Mail verschickt».
   Trägt die Team-Kennzahlen, wenn ausserhalb des Werkzeugs gearbeitet wird. */
.notier-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 4px 0 22px;
    padding: 14px 16px;
    background: var(--tint);
    border: 1px solid var(--linie);
    border-radius: var(--radius-sm);
}
.notier-label { font-size: .88rem; color: var(--text-2); font-weight: 500; }
.notier-knopf {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-sm);
    padding: 9px 15px;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--schnell), background var(--schnell), color var(--schnell);
}
.notier-knopf svg { width: 17px; height: 17px; color: var(--akzent); }
.notier-knopf:hover { border-color: #a9c9ff; background: #dbe8ff; color: var(--akzent-dunkel); }
.notier-knopf:hover svg { color: var(--akzent-dunkel); }
.notier-knopf:active { transform: scale(.98); }

/* ══════════════════════════════════════════════════════════════════════════
   Journal-Design (1:1) — Glas-Kacheln + dunkle Verlauf-Sidebar
   Übernommen aus dem Coaching Journal (meron-Theme).
   ══════════════════════════════════════════════════════════════════════════ */
.auth-card,.table-scroll{
  background:var(--glass)!important;
  border:var(--glass-border)!important;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px -22px rgba(40,60,120,.32)!important;
  border-radius:16px!important;
}
.auth-card{border-top:3px solid var(--akzent)!important}
.table-scroll thead th{background:rgba(255,255,255,.5)}
.btn-primary:hover,.cta-chip:hover,.btn-start:hover{background:var(--grad-hover)!important}

/* Dunkle Sidebar mit Logo-Verlauf (oben dunkel → unten Royalblau) */
.seitenmenu{
  background:linear-gradient(180deg,#0a0f1e 0%,#0f1d3f 38%,#163484 72%,#1c46b8 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;color:#aeb8d0!important;
}
.seitenmenu .sm-marke,.seitenmenu .sm-firma,.seitenmenu .sm-benutzer strong{color:#fff!important}
.seitenmenu .sm-titel{color:#8892ae!important}
.seitenmenu .sm-benutzer{color:#9aa4bd!important}
.seitenmenu .sm-link{color:#aeb8d0!important}
.seitenmenu .sm-link:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.seitenmenu .sm-aktiv,.seitenmenu .sm-aktiv:hover{
  background:linear-gradient(135deg,#2f9bff,#0a52d6)!important;color:#fff!important;
  box-shadow:0 6px 18px -6px rgba(10,82,214,.55)!important}
.seitenmenu .sm-aktiv .sm-icon{color:#fff!important;opacity:1}
.seitenmenu .sm-fuss{border-top-color:rgba(255,255,255,.09)!important}
.seitenmenu .sm-abmelden{color:#c9d3ea!important}
.seitenmenu .sm-abmelden:hover{background:rgba(255,255,255,.08)!important}
.seitenmenu .sm-chip{color:#fff!important;background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.28)!important}

/* ═══════════════════════════════════════════════════════════════════════════
 * Touch-Betrieb — vor allem das iPad
 *
 * Das Dashboard wird unterwegs auf dem iPad bedient: Liste durchgehen, Status
 * setzen, anrufen. Vier Dinge standen dem im Weg — alle gemessen, nicht
 * vermutet:
 *
 *   1. Jedes Antippen eines Eingabefelds zoomte die Seite hinein. Safari auf
 *      iPadOS tut das bei jeder Schriftgrösse unter 16px; die Felder massen
 *      14px. Danach stand die Ansicht verschoben da und musste von Hand
 *      zurückgezogen werden. Auf Touch sind die Felder darum 16px gross.
 *   2. Die Ziele waren zu klein. Apples Richtwert sind 44px. Gemessen:
 *      «Bearbeiten» in der Tabelle 16px, Auswahlkästchen 16px, Lead-Namen
 *      19px, Menüpunkte 39px.
 *   3. Die Lead-Tabelle ist rund 1070px breit. Auf keinem iPad — quer so wenig
 *      wie hoch — passt sie ins Fenster; es blieb seitliches Wischen in einem
 *      Kasten, der selbst schon scrollt. Unter 1240px werden die Zeilen darum
 *      zu gestapelten Blöcken, jeder Wert mit seiner Spaltenbeschriftung.
 *   4. Grossflächiges backdrop-filter (Tafeln, Abschnittsleiste) und
 *      background-attachment: fixed kosten auf iPadOS bei jedem Scrollbild
 *      eine Neuberechnung. Am Schreibtisch fällt das nicht auf, auf dem Tablet
 *      als Ruckeln.
 *
 * Alles hier greift nur über (pointer: coarse) oder schmale Fenster. Mit Maus
 * am Schreibtisch bleibt die Oberfläche Pixel für Pixel dieselbe.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* iPadOS bläht Text in der Querlage sonst eigenmächtig auf. */
html { -webkit-text-size-adjust: 100%; }

@media (pointer: coarse) {

    /* --- 1. Eingabefelder: kein Auto-Zoom, Fingergrösse ------------------ */
    :root {
        --feld-h: 48px;
        --feld-font: 16px;
        --feld-px: 14px;
    }

    /* Kästchen und Schalter fasst --feld-h nicht; sie brauchen eigene Masse.
       22px Grafik plus Innenabstand im umgebenden Label ergibt ein Ziel, das
       man im Stehen trifft. */
    input[type="checkbox"], input[type="radio"] {
        width: 22px;
        height: 22px;
    }
    label.check { padding: 14px 16px; gap: 12px; }

    /* Datum: iPadOS zeichnet das Feld sonst deutlich niedriger als der Rest. */
    input[type="date"] { -webkit-appearance: none; appearance: none; }

    /* --- 2. Tippziele auf mindestens 44px ------------------------------- */
    .mini-knopf,
    .mini-link,
    .cta-chip,
    .zeit-chip,
    .notier-knopf,
    .btn-start,
    .btn-primary,
    .btn-loeschen-klein,
    .anrufknopf,
    .sm-abmelden,
    .crumb a,
    .blaetterleiste .mini-knopf {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Ohne die Obergrenze wächst ein Flex-Behälter auf die Breite seines
           längsten Wortes: .btn-start trägt flex:none und schoss damit
           gemessene 356px breit aus einem 335px-Kasten heraus. */
        max-width: 100%;
        text-align: center;
    }
    .anrufknopf { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

    .sm-link { min-height: 46px; }
    .sm-knopf { min-height: 52px; }

    /* Der Lead-Name ist das meistgetippte Ziel der ganzen Anwendung. Die Höhe
       kommt aus Innenabstand, nicht aus line-height — Letzteres hätte auch
       zweizeilige Namen auseinandergerissen. */
    .lead-link {
        display: inline-block;
        padding: 10px 0;
    }

    /* Aufklapper (details/summary) sind reine Tippflächen. Bewusst ohne Flex:
       der Pfeil ist ein ::before im normalen Fluss, und als Flex-Behälter
       verlor die Zeile ihre Umbruchstelle. */
    summary,
    details.card > summary,
    .klapp > summary,
    .tk-klapp > summary { min-height: 44px; }

    /* Der graue Aufblitz beim Tippen liegt neben unseren eigenen Zuständen. */
    a, button, summary, label { -webkit-tap-highlight-color: transparent; }
    .mini-knopf:active, .btn-start:active, .cta-chip:active,
    .zeit-chip:active, .lead-link:active { opacity: .7; }

    /* --- 3. Abschnittsleiste als Wischstreifen -------------------------- */
    .section-nav a { padding: 15px 16px; }
    .section-nav .wrap {
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .section-nav .wrap::-webkit-scrollbar { display: none; }
    .section-nav a { scroll-snap-align: start; }

    /* Verlauf am rechten Rand: zeigt, dass hinter «Angebot» noch etwas liegt.
       Ohne ihn wirkt die Leiste zu Ende, wo bloss das Fenster zu Ende ist. */
    .section-nav::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 42px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255,255,255,0), #fff);
    }

    /* --- 4. Ruhiges Scrollen: teure Effekte weg ------------------------- */
    .section-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
    }
    .table-scroll {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, .94) !important;
    }
    /* Der Ambient-Verlauf bleibt stehen — aber als eigene, feste Ebene statt
       als background-attachment: fixed am mitscrollenden Körper. */
    body {
        background-attachment: scroll;
        background-image: none;
        background-color: #e9edfb;
    }
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(1100px 640px at 4% -12%, rgba(0,112,240,.30), transparent 56%),
            radial-gradient(980px 640px at 106% -4%, rgba(47,155,255,.28), transparent 55%),
            radial-gradient(820px 720px at 62% 122%, rgba(10,82,214,.18), transparent 60%),
            #e9edfb;
    }

    /* --- 5. Angetippt heisst nicht überfahren --------------------------- */
    /* Safari lässt :hover nach dem Tippen stehen, bis woanders getippt wird.
       Eine hellblau markierte Zeile, die nicht mehr weggeht, liest sich wie
       eine Auswahl — genau das ist sie nicht. */
    .table-scroll tbody tr:hover td { background: transparent; }
    .table-scroll tbody tr:nth-child(even):hover td { background: var(--tint); }
    .tr-stufe:hover { background: transparent; }
    .tr-stufe-aktiv:hover { background: var(--tint-2); }
    .kz:hover .kz-num, .kz:hover .kz-lbl { color: inherit; }

    /* --- 6. Dichte: mehr Inhalt je Bildschirm --------------------------- */
    /* Auf dem iPad hoch füllte allein die Kopfzone das halbe Fenster. */
    .app-header { padding: 30px 0 34px; }
    .app-header h1 { margin-bottom: 14px; }
    main.wrap { padding-top: 34px; }

    /* Der Abstandhalter drückte «Als CSV herunterladen» in eine eigene Zeile
       ganz rechts, weit weg vom Suchfeld. */
    .suchleiste .spacer { display: none; }
}

/* Trichter: sechs Segmente nebeneinander brechen unter 900px die
   Beschriftungen um. Zwei Reihen zu dritt bleiben lesbar. */
@media (max-width: 900px) {
    .trichter { display: grid; grid-template-columns: repeat(3, 1fr); }
    .tr-stufe:nth-child(3n+1) { border-left: 0; }
    .tr-stufe:nth-child(n+4) { border-top: 1px solid var(--linie-zart); }
}
@media (max-width: 560px) {
    .trichter { grid-template-columns: repeat(2, 1fr); }
    .tr-stufe:nth-child(3n+1) { border-left: 1px solid var(--linie-zart); }
    .tr-stufe:nth-child(2n+1) { border-left: 0; }
    .tr-stufe:nth-child(n+3) { border-top: 1px solid var(--linie-zart); }
}

/* ---------------------------------------------------------------------------
 * Lead-Tabellen gestapelt
 *
 * Greift nur bei <table class="lead-table karten">. Die Marke ist Absicht: Das
 * Verfahren setzt voraus, dass jede Zelle ihre Beschriftung mitbringt
 * (data-label) und die Hauptzelle markiert ist (data-haupt). Eine Tabelle ohne
 * diese Angaben würde als Reihe unbeschrifteter Werte auseinanderfallen —
 * schlechter als das seitliche Wischen, das sie ersetzt. Solche Tabellen
 * (import.php) behalten darum die Tafel.
 *
 * Reihenfolge im Block: Name zuerst (order -1), dann die beschrifteten Werte
 * paarweise, zuletzt die Aktionszelle über die volle Breite (order 1). Die
 * DOM-Reihenfolge bleibt unangetastet — sie ist für Tastatur und Vorlesehilfe
 * die richtige und wird nur für das Auge umgestellt.
 * ------------------------------------------------------------------------- */

@media (max-width: 1240px), (pointer: coarse) {
    /* Der Tabellenkopf bleibt im Quelltext stehen (Vorlesehilfen lesen ihn),
       verschwindet aber aus dem Bild — die Beschriftung steht jetzt an jedem
       Wert. position:relative am Tisch hält den ausgeblendeten Kopf drin;
       ohne ihn zählte seine Breite zur Scrollbreite der Tafel. */
    .karten { position: relative; }
    .karten thead {
        position: absolute;
        top: 0; left: 0;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .karten, .karten tbody, .karten tr, .karten td { display: block; }

    /* auto-fit statt fester Spaltenzahl: im Split View eine Spalte, hoch zwei
       bis drei, quer vier. Ein Block bleibt so überall etwa gleich hoch —
       gestapelt heisst nicht, dass jeder Wert eine eigene Zeile braucht. */
    .karten tr {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 7px 22px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--linie);
    }
    .karten tbody tr:last-child { border-bottom: 0; }

    /* Die Zebra-Streifung trug die Spur über die Zeile hinweg. Getrennte
       Blöcke brauchen sie nicht mehr — sie würde nur unruhig wirken. */
    .table-scroll .karten tbody tr:nth-child(even) td,
    .table-scroll .karten tbody tr:hover td { background: none; }

    .table-scroll .karten tbody td {
        padding: 0;
        border-bottom: 0;
        color: var(--text-2);
        /* Beides nötig: min-width 0 erlaubt der Rasterspalte zu schrumpfen,
           overflow-wrap bricht dann lange Mailadressen und Web-Adressen um.
           Ohne das zweite steht die Spalte schmal da und der Text ragt heraus. */
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Beschriftung neben den Wert, nicht darüber. Eine eigene Zeile je
       Beschriftung verdoppelte die Blockhöhe — 308px je Lead, gemessen. Der
       Block wurde damit höher als die alte Tabellenzeile breit war. */
    .karten td[data-label] {
        font-size: .87rem;
        line-height: 1.5;
    }
    /* Bewusst inline und kein Flex-Behälter: .lead-rolle und .lead-ort sind
       Blöcke und sollen unter dem Wert stehen. Als Flex-Kinder landeten sie
       daneben und brachen dort buchstabenweise um («Inhaberi / n»). */
    .karten td[data-label]::before {
        content: attr(data-label);
        display: inline;
        margin-right: 7px;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .04em;
        color: var(--text-3);
    }

    /* Hauptzelle: Betriebsname, volle Breite, zuoberst. */
    .karten td[data-haupt] {
        order: -1;
        grid-column: 1 / -1;
    }
    .karten td[data-haupt] .lead-link,
    .karten td[data-haupt] strong { font-size: 1.06rem; }

    /* Zellen ohne Beschriftung sind die Aktionen — zuunterst, aber in der
       Spur: eine eigene volle Zeile für ein «Bearbeiten» wäre verschenkt. */
    .karten td:not([data-label]):not([data-haupt]) { order: 1; }
    .karten td:not([data-label]):not([data-haupt]):empty { display: none; }

    /* Das Auswahlkästchen gehört zu den Aktionen, nicht zu den Angaben —
       sonst reisst es mitten in den Werten eine Lücke auf. Seine Beschriftung
       braucht es nicht: ein Kästchen erklärt sich. */
    /* grid-column: 1 zwingt eine neue Zeile — damit stehen Kästchen und
       «Bearbeiten» nebeneinander und nicht in zwei getrennten Ecken.
       «Übernehmen» ist dasselbe in der Umkreissuche. */
    .karten td[data-label="Auswahl"],
    .karten td[data-label="Übernehmen"] { order: 1; grid-column: 1; }
    .karten td[data-label="Auswahl"]::before,
    .karten td[data-label="Übernehmen"]::before { content: none; }

    /* Gruppenkopf der Pipeline bleibt eine durchgehende Zeile. */
    .karten .gruppe-kopf { display: block; padding: 0; }
    .karten .gruppe-kopf td { grid-column: 1 / -1; }
    .karten .gruppe-kopf td[data-label]::before { content: none; }

    /* Leermeldungen («keine Treffer») über die volle Breite. */
    .karten td[colspan] { grid-column: 1 / -1; }

    /* Kein Kasten-im-Kasten mehr: die Tafel scrollt nicht länger seitwärts. */
    .table-scroll:has(.karten) { overflow-x: visible; }

    /* Statt eines Kästchens steht dort teils «erfasst» oder «Kette». */
    .karten td[data-label="Übernehmen"] .status { align-self: flex-start; }

    /* Der Score steht neben seiner Beschriftung, nicht darunter: .score-cell
       ist ein Flex-Block und begänne sonst eine eigene Zeile. Der Balken
       bekommt eine Obergrenze, sonst zöge er sich über die ganze Spalte und
       behauptete eine Genauigkeit, die drei Pixel Fortschritt nicht haben. */
    .karten .score-cell {
        display: inline-flex;
        min-width: 0;
        vertical-align: middle;
    }
    .karten .score-cell .bar { max-width: 88px; }

    /* Lange Komposita («Dienstleistungsunternehmen») brechen in einer 230px
       breiten Spalte sonst mitten im Wort ohne Trennstrich. */
    .karten td { hyphens: auto; }

}

/* Auf dem Telefon (und im Split View des iPads) reicht die Breite für zwei
   Wertspalten nicht mehr — dort steht alles untereinander. */
@media (max-width: 560px) {
    .karten tr { grid-template-columns: 1fr; gap: 12px; }
}

/* Das Auswahlkästchen ist in der Pipeline und in der Umkreissuche die
   eigentliche Aktion der Zeile. Es misst 22px; das umschliessende Label macht
   daraus ein Ziel in Fingergrösse, ohne das Kästchen aufzublasen. Ein Klick
   irgendwo im Label schaltet es — das übernimmt der Browser. */
.zell-wahl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
@media (pointer: coarse) {
    .zell-wahl { min-height: 44px; min-width: 44px; }
    .nach-oben { width: 44px; height: 44px; }
}