ist keine
gültige Verschachtelung: Browser brechen den äußeren Link an dieser
Stelle auf, und was danach kommt, ist nicht mehr klickbar. Deshalb ist die
Kachel hier ein , der Name trägt den Link, und die Fläche darum holt
sich das Klicken über ein ::after (siehe .kt-card-link).
========================================================================== */
/* Reiterzeile unter den Kennzahlen (kontakt_dubletten.php). Der Abstand
darunter ist derselbe, den .kpi-grid nach unten lässt – die Reiterzeile
steht damit gleich weit von den Kennzahlen darüber wie von der Liste
darunter. Nur hier, nicht an .cal-seg selbst: Der Segmentschalter steht
auch im Kalender und in der Verwaltung, dort in eigenen Zeilen mit eigenem
Abstand. Auf schmalen Bildschirmen darf geschoben werden – .cal-seg
schneidet ab (overflow: hidden), und der letzte Reiter wäre schlicht weg.
Die Leiste bleibt dabei eine Zeile: Umgebrochen zerfiele die Pille in zwei
Hälften mit halben Rändern. Der Rollbalken selbst bleibt aus – er frisst
von 34px Höhe die Hälfte.
IM ADRESSBUCH GIBT ES DIESE ZEILE NICHT MEHR, siehe gleich darunter. */
.kt-seg {
margin-bottom: 0.9rem;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.kt-seg::-webkit-scrollbar { display: none; }
.kt-seg a { flex: 0 0 auto; }
/* DIE KENNZAHLENKACHEL IST DER REITER (kontakte.php).
Hier stand einmal .kt-seg: eine zweite Zeile kleiner Segmentschalter unter
den Kacheln, mit denselben fünf Beschriftungen und denselben fünf Zahlen.
Zweimal dasselbe untereinander, und nur die kleine Reihe war anfassbar –
wer auf „Firmenkunden" in der Kachel klickte, bei dem passierte nichts.
Seit dem 05.08.2026 trägt die Kachel selbst den Verweis.
NUR AUF DIESER SEITE: .kpi steht überall in der Anwendung und ist dort
eine Anzeige, kein Schalter. Erst .kt-kpi macht aus ihr einen.
EIN ZUSTAND FUER BEIDES: Ueberfahren und Ausgewählt sehen gleich aus –
hellerer Grund, blauer Rand, sonst nichts. Die ausgewählte Kachel trug
einmal blauen Grund, dunkleren Rand, blaue Schrift und einen Streifen am
Fuß; das war neben vier ruhigen Nachbarn zu viel Betrieb für die
Auskunft „hier stehen wir gerade". Jetzt behält sie schlicht den
Hover-Ton, auch wenn die Maus weiterzieht. */
.kt-kpi {
display: block;
color: inherit;
text-decoration: none;
transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.kt-kpi:hover,
.kt-kpi:focus-visible,
.kt-kpi.is-aktiv {
color: inherit;
/* Die helle Tönung des Hauses statt des Zeilengraus, und der Rand dazu
aus derselben Familie. Der Rand stand auf --btn-blue: seit der Träger
tiefer ist (21.08.2026), war das ein dunkler Strich um eine helle
Kachel – zu laut für die Auskunft „hier stehen wir gerade". */
background: var(--blau-hauch);
border-color: var(--blau-rand);
}
.kt-kpi:focus-visible {
outline: 2px solid var(--focus-col);
outline-offset: 2px;
}
.kt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 0.6rem;
}
.kt-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.6rem;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--r-card);
padding: var(--sp-4) 0.8rem;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
/* Der Hover hängt am Link, nicht an der Kachel: Sonst leuchtete sie auch
auf, wenn die Maus nur über einem der drei Kanalknöpfe steht – und
verspräche damit einen Sprung, der dort nicht passiert. */
.kt-card:has(.kt-card-link:hover),
.kt-card:has(.kt-card-link:focus-visible) {
background: var(--brand-row);
border-color: var(--btn-blue);
}
.kt-card.is-loeschantrag {
border-color: var(--btn-red-border-light);
background: var(--btn-red-bg-light);
}
.kt-card-kopf {
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.kt-card-wort {
min-width: 0;
flex: 1 1 auto;
}
/* Der Name trägt den Link. Das ::after legt sich über die ganze Kachel und
macht sie klickbar – aber unter die Kanalknöpfe (z-index), damit „Anrufen"
auch wirklich anruft.
ER BRICHT UM, statt in drei Punkten zu enden: Ein abgeschnittener Name ist
der eine Fall, in dem die Kachel ihre Aufgabe verfehlt – man weiß dann
nicht, wen man vor sich hat, und muss die Kontaktseite öffnen, um es
herauszufinden. Zwei Zeilen sind billiger als ein Klick. Die Kacheln einer
Reihe sind gleich hoch (Grid), die längere Zeile kostet also die Reihe,
nicht die einzelne Kachel. */
.kt-card-link {
display: block;
font-weight: 600;
font-size: var(--fs-7);
line-height: 1.25;
color: var(--brand-text);
text-decoration: none;
overflow-wrap: anywhere;
}
.kt-card-link:hover,
.kt-card-link:focus-visible { color: var(--brand-text); }
.kt-card-link::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-card);
z-index: 0;
}
.kt-card-link:focus-visible::after {
outline: 2px solid var(--focus-col);
outline-offset: 1px;
}
.kt-card-sub {
font-size: var(--fs-5);
color: var(--brand-quiet);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Der Namenszusatz („geb. Weber", „jun.") direkt unter dem Namen. Farbe und
Größe kommen von .kt-card-sub – er soll leise sein wie Alter und Ort.
Anders als diese wird er aber umgebrochen statt beschnitten: Er ist ein
Stück des Namens, und ein abgeschnittener Name ist eine halbe Auskunft
(derselbe Grund wie beim Umbruch in .kt-card-link). */
.kt-card-zusatz {
overflow: visible;
white-space: normal;
overflow-wrap: anywhere;
}
/* Foto – dasselbe Maß wie das Firmenlogo auf der Startseite, damit die
beiden Uebersichten nebeneinander nicht auseinanderfallen. */
.kt-foto {
flex: 0 0 auto;
height: 44px;
width: 44px;
object-fit: cover;
border-radius: var(--r-ctl);
background: var(--brand-bg);
border: 1px solid var(--brand-border);
}
/* Ohne Foto: die Silhouette einer Person. Sie ist mit 15px ausgeliefert
(icon()) und wäre im 44er Rahmen ein Fliegendreck – hier bekommt sie das
Maß, das der Rahmen trägt. */
.kt-foto-leer {
display: flex;
align-items: center;
justify-content: center;
object-fit: unset;
background: var(--btn-blue-bg-light);
color: var(--btn-blue-dark);
}
.kt-foto-leer svg {
width: 24px;
height: 24px;
vertical-align: unset;
}
/* Kundenart – die eine Marke, die auf einen Blick sagt, worum es geht.
Firmenkunde trägt den kräftigeren Ton, weil er die Ausnahme ist.
Sie steht als eigene Zeile über dem Namen (früher rechts daneben). Damit
gehört die Namenszeile dem Namen allein, und die Marke sagt vorher, was
für ein Kontakt gleich kommt. inline-flex, damit sie nur so breit wird wie
ihre Beschriftung. */
.kt-art {
display: inline-flex;
align-items: center;
margin-bottom: 0.2rem;
position: relative;
z-index: 1;
font-size: var(--fs-2);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.15rem 0.42rem;
border-radius: var(--r-pill);
border: 1px solid transparent;
white-space: nowrap;
}
.kt-art-privat {
background: var(--btn-gray-bg);
border-color: var(--btn-gray-border);
color: var(--brand-quiet);
}
.kt-art-firma {
background: var(--btn-blue-bg-light);
border-color: var(--btn-blue-border-light);
color: var(--btn-blue-dark);
}
/* Sonstige – kein Kunde. Der leiseste Ton von allen: nur ein Umriss, keine
Füllung. So sagt die Marke „gehört nicht in die Kundenzahl", ohne dass
eine dritte Farbe die Liste unruhig macht. */
.kt-art-sonstige {
background: transparent;
border-color: var(--brand-border);
color: var(--brand-quiet);
}
/* Die Württembergische – aus dem eigenen Haus. Trägt den Akzent der
Anwendung: Diese Kontakte sind die Ausnahme in einer Liste aus Kunden, und
sie sollen sich beim Durchblättern von selbst zeigen. Keine vierte Farbe –
es ist die, die die Anwendung ohnehin führt. */
.kt-art-wuerttembergische {
background: var(--btn-red-bg-light);
border-color: var(--btn-red-border-light);
color: var(--btn-red-text);
}
/* --- Die drei Wege -------------------------------------------------------- */
/* Gleich breit, damit die Kacheln eine Spalte bilden statt eines Flickens:
Wer die Liste von oben nach unten durchgeht, findet „Anrufen" immer an
derselben Stelle. flex statt eines festen Dreierrasters, weil WhatsApp und
E-Mail Module sind – wer sie nicht freigegeben hat, sieht zwei Knöpfe oder
einen, und die sollen die Breite dann unter sich aufteilen. */
.kt-kanaele {
position: relative;
z-index: 1;
display: flex;
gap: 0.3rem;
}
.kt-kanal {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
height: var(--h-ctl-sm);
padding: 0 0.35rem;
border: 1px solid var(--btn-gray-border);
border-radius: var(--r-sm);
background: var(--btn-gray-bg);
color: var(--brand-quiet);
font-size: var(--fs-4);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.kt-kanal:hover {
background: var(--blau-hell);
border-color: var(--blau-rand);
color: var(--btn-leucht-tief);
}
.kt-kanal:focus-visible {
outline: 2px solid var(--focus-col);
outline-offset: 1px;
}
/* Kein Kanal hinterlegt: Der Knopf bleibt stehen, damit die Reihe nicht
verrutscht, ist aber sichtbar nichts – blass, ohne Rahmenwechsel, ohne
Zeiger. Ein fehlender Knopf wäre die stillere, aber schlechtere Lösung:
Dann fällt nicht auf, dass die Nummer fehlt. */
.kt-kanal.is-aus {
background: transparent;
border-style: dashed;
color: var(--brand-faint);
cursor: default;
}
/* WAS DER VERLAUF ÜBER DIESE NUMMER WEISS – am Knopf selbst (seit 04.09.2026).
Gesetzt wird die Klasse in kontakte.php aus derselben Auskunft, die auf der
Kontaktseite die .wa-marke trägt (includes/whatsapp_erreichbar.php).
NUR DAS SYMBOL FÄRBT SICH, nicht der ganze Knopf: Er ist ein Weg („schreiben"),
kein Zustand. Ein grüner Knopf in einer Reihe von drei grauen läse sich als
Empfehlung – gemeint ist eine Auskunft.
DREI ZUSTÄNDE, ABER NICHT DIE DREI FARBEN DER .wa-marke. Dort steht das
Zeichen auf weißem Grund und darf blaugrau sein; hier ist Blaugrau schon die
Grundfarbe des Knopfes (--brand-quiet) – ein „vermerkt" in dieser Farbe wäre
von „nichts bekannt" nicht zu unterscheiden, und die 7 Häkchen, die ein
junger Bestand hat, wären unsichtbar.
ALSO EINE ACHSE STATT DREIER FARBEN: bewiesen grün, nur vermerkt dunkler als
der Rest des Knopfes, widerlegt blasser. Drei Stufen, die man nebeneinander
auseinanderhält, ohne dass das Ungesicherte so aussieht wie das Bewiesene.
Der Strich, den die .wa-marke im Widerlegten trägt, fehlt hier – auf 14
Pixeln im Knopf wäre er ein Fussel. Was gemeint ist, sagt der Kurzhinweis,
und für den Vorleser steht der Satz im Knopf. */
.kt-kanal.wa-ja svg { color: #25d366; }
.kt-kanal.wa-vermerkt svg { color: var(--brand-text); }
.kt-kanal.wa-nein svg { color: var(--brand-faint); opacity: 0.55; }
.kt-card-fuss {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
padding-top: var(--sp-3);
border-top: 1px solid var(--brand-border);
margin-top: auto;
}
/* --- Anlassleiste (Geburtstage) ------------------------------------------ */
/* Kein .alert: Ein Geburtstag ist keine Warnung, sondern ein Grund anzurufen.
Deshalb der ruhige Ton der Kennzahlenkacheln – heller Grund, ein Rahmen,
kein Schatten.
HIER STAND EINE ZEILE FLIESSTEXT: „Geburtstag in den nächsten 30 Tagen:"
und dahinter vier Namen mit Datum, durch Punkte getrennt. Das war dicht,
aber nicht lesbar – vier Namen in einer Zeile sind eine Aufzählung, keine
Übersicht, und der eine Name, auf den es ankommt (heute!), sah aus wie die
drei anderen. Jetzt ist es ein Kopf mit Mikrolabel und Zahl und darunter
eine Reihe kleiner Karten: Gesicht, Name, Tag, kommendes Alter.
Die Karte ist bewusst FLACH gehalten (kein Schatten, 1px Rahmen) – sie
steht direkt über den Kontaktkacheln und darf ihnen nicht die Schau
stehlen. */
.kt-anlass {
padding: 0.55rem 0.6rem 0.6rem;
margin-bottom: 0.9rem;
border: 1px solid var(--brand-border);
border-radius: var(--r-card);
background: var(--brand-surface);
}
/* Kopfzeile: Mikrolabel wie überall (Look B), daneben leise die Spanne, und
ganz rechts die Zahl – erst sie sagt, ob unter den vier Karten noch etwas
liegt. */
.kt-anlass-kopf {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: var(--sp-3);
}
.kt-anlass-icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 22px;
height: 22px;
border-radius: var(--r-sm);
background: var(--brand-signal);
color: var(--brand-signal-ink);
}
.kt-anlass-icon svg { vertical-align: unset; width: 13px; height: 13px; }
.kt-anlass-spanne {
font-size: var(--fs-4);
color: var(--brand-faint);
}
/* Die Zahl steht rechts außen und trägt denselben Ton wie die Marke
„Privatkunde" an der Kachel – eine Auskunft, kein Signal. */
.kt-anlass-zahl {
margin-left: auto;
flex: none;
padding: 0.1rem 0.45rem;
border-radius: var(--r-pill);
background: var(--btn-gray-bg);
border: 1px solid var(--btn-gray-border);
font-size: var(--fs-3);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--brand-quiet);
}
/* DIE KACHELN SELBST STEHEN NICHT HIER, sondern als .gb-* in
02-bausteine.css: Dieselbe Reihe baut die Startseite in ihrer
Geburtstagskarte, und ein Baustein, den zwei Seiten benutzen, gehört zu
den Bausteinen. Hier bleibt nur der Rahmen drumherum. */
/* --- Mehrere markieren ---------------------------------------------------- */
/* Die Leiste bleibt beim Blättern oben stehen. Bei 600 Kacheln häkelt man
sich weit nach unten – ein Knopf, der dann ganz oben liegt, ist keiner.
SIE IST NUR DA, WENN ETWAS ANGEHAKT IST (05.08.2026). Vorher stand sie
immer über der Liste, mit einem Kästchen „alle auswählen" und der Zahl
aller Kontakte. Das war eine Zeile, die in neunundneunzig von hundert
Fällen nichts sagte: Die Zahl steht schon in der Kennzahlenkachel darüber,
und „alle 627 anhaken" ist keine Handbewegung, die jemand braucht.
Dass sie über :has kommt und nicht über das Skript, ist Absicht – ohne
JavaScript bleibt das Mehrfachbeantragen bedienbar. */
.kt-pick-bar {
display: none;
position: sticky;
top: 0;
z-index: 3;
align-items: center;
gap: 0.6rem;
padding: 0.4rem var(--sp-4);
margin-bottom: 0.6rem;
border: 1px solid var(--brand-border);
border-radius: var(--r-card);
background: var(--brand-surface);
}
.kt-liste:has(input[name="ids[]"]:checked) .kt-pick-bar { display: flex; }
/* „3 ausgewählt" – die Zahl setzt das Skript (sammelauswahl.js). Blau, weil
die Leiste überhaupt nur zu sehen ist, wenn etwas angehakt ist. */
.kt-pick-text {
font-size: var(--fs-3);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--btn-blue-dark);
}
.kt-pick-actions { display: flex; margin-left: auto; }
.kt-pick-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border: 1px solid var(--brand-border);
border-radius: var(--r-sm);
background: var(--brand-surface);
color: var(--brand-quiet);
font-size: var(--fs-4);
font-weight: 600;
line-height: 1.7;
transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.kt-pick-btn svg { width: 13px; height: 13px; }
.kt-pick-btn.is-danger:hover {
border-color: var(--btn-red-border-light);
background: var(--btn-red-bg-light);
color: var(--btn-red-text);
}
/* Das Kästchen in der Kachel. z-index, weil .kt-card-link::after die ganze
Kachel überdeckt – ohne das fängt die Klickfläche den Klick ab und
öffnet den Kontakt, statt ihn anzuhaken. */
.kt-pick {
position: relative;
z-index: 1;
flex: none;
display: flex;
align-items: flex-start;
margin: 0;
padding: 2px 0 0 2px;
cursor: pointer;
}
.kt-pick input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--btn-leucht-dark);
cursor: pointer;
opacity: 0.35;
transition: opacity var(--t-fast) var(--ease-out);
}
/* Leise, bis man sie braucht – angehakt und unter der Maus voll da. */
.kt-card:hover .kt-pick input,
.kt-pick input:checked,
.kt-pick input:focus-visible { opacity: 1; }
/* Die angehakte Kachel trägt denselben Rahmen wie die Kachel unter der Maus.
Zwei Zustände, ein Aussehen: Beide sagen „diese hier". */
.kt-card:has(input[name="ids[]"]:checked) {
background: var(--brand-row);
border-color: var(--btn-blue);
}
@media (max-width: 575.98px) {
.kt-grid { grid-template-columns: 1fr; }
.kt-kanal span { display: none; }
/* Auf dem Telefon steht der Knopf unter der Zahl statt daneben. */
.kt-pick-bar { flex-wrap: wrap; }
.kt-pick-actions { margin-left: 0; width: 100%; }
.kt-pick-btn { width: 100%; justify-content: center; }
}
/* ==========================================================================
Dublettenkontrolle (kontakt_dubletten.php)
--------------------------------------------------------------------------
Zwei Kontakte nebeneinander, Zeile für Zeile – und darunter drei Knöpfe:
diesen behalten, jenen behalten, kein Doppel.
WARUM EINE TABELLE UND NICHT ZWEI KACHELN: Entschieden wird an den
UNTERSCHIEDEN. Nebeneinander in zwei Kacheln muss das Auge die Zeilen selbst
zusammensuchen; in einer Tabelle steht jedes Feld auf einer Höhe, und die
abweichende Zeile ist die einzige, die einen Ton trägt (.is-anders). Alles
Gleiche bleibt leise – es ist der Beweis, nicht die Frage.
========================================================================== */
.du-paar {
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--r-card);
margin-bottom: 0.85rem;
overflow: hidden;
}
/* Der Kopf trägt die Stufe, die Gründe und die Punktzahl. Er ist dieselbe
Zeile wie ein .card-header und sieht deshalb so aus. */
.du-kopf {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
padding: var(--sp-3) var(--sp-4);
background: var(--card-header-bg);
border-bottom: 1px solid var(--card-header-border);
}
.du-stufe {
flex: none;
font-size: var(--fs-3);
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.32em 0.55em;
border-radius: var(--r-sm);
background: var(--btn-gray-bg);
color: var(--brand-text);
}
/* Rot ist in Look B die Ausnahme und steht für den Mangel – hier für das
Paar, das mit hoher Sicherheit doppelt erfasst ist, und für die doppelt
vergebene Nummer. Alles darunter bleibt gedeckt. */
.du-stufe.is-sicher {
background: var(--btn-red-bg-light);
color: var(--btn-red-text);
}
.du-stufe.is-konflikt {
background: var(--btn-red-bg-light);
color: var(--btn-red-text);
box-shadow: inset 0 0 0 1px var(--btn-red-border-light);
}
.du-stufe.is-wahrscheinlich {
background: var(--btn-orange-bg-light);
color: var(--btn-orange-text);
}
/* Die Gründe stehen ausgeschrieben da: Niemand soll einer Zahl glauben
müssen, und die Entscheidung fällt an ihnen. */
.du-gruende {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
min-width: 0;
}
.du-grund {
font-size: var(--fs-3);
color: var(--brand-quiet);
background: var(--brand-row);
border: 1px solid var(--brand-border);
border-radius: var(--r-sm);
padding: 0.16em 0.45em;
}
/* Was GEGEN die Dublette spricht – verschiedene Geburtsdaten, verschiedene
Vornamen. Grün, weil es Entwarnung ist und nicht Befund. */
.du-grund.is-gegen {
background: var(--btn-green-bg-light);
border-color: var(--btn-green-border-light);
color: var(--btn-green);
}
.du-punkte {
margin-left: auto;
flex: none;
font-size: var(--fs-5);
font-weight: 700;
color: var(--brand-faint);
font-variant-numeric: tabular-nums;
}
.du-vermerk {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem var(--sp-4);
font-size: var(--fs-5);
color: var(--btn-green);
background: var(--btn-green-bg-light);
border-bottom: 1px solid var(--btn-green-border-light);
}
/* Auf schmalen Schirmen darf die Gegenüberstellung scrollen, statt die
Namensspalten auf drei Zeichen zu quetschen. */
.du-tabelle-huelle { overflow-x: auto; }
.du-tabelle {
margin: 0;
font-size: var(--fs-6);
}
.du-tabelle th,
.du-tabelle td {
padding: 0.34rem var(--sp-4);
border-bottom: 1px solid var(--brand-border);
vertical-align: top;
}
.du-tabelle thead th {
border-bottom: 1px solid var(--brand-line-strong);
white-space: nowrap;
}
.du-tabelle tbody tr:last-child th,
.du-tabelle tbody tr:last-child td { border-bottom: 0; }
/* Die Feldspalte ist Beschriftung, kein Inhalt: dasselbe Mikrolabel wie
überall (.section-label), nur hier ohne eigene Klasse im HTML. */
.du-tabelle .du-feld {
width: 26%;
min-width: 130px;
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-faint);
}
.du-tabelle td { width: 37%; }
.du-tabelle .du-leer { color: var(--brand-faint); }
/* Die eine Zeile, an der entschieden wird. */
.du-tabelle tr.is-anders td {
background: var(--brand-row);
font-weight: 600;
}
.du-aktionen {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.6rem var(--sp-4);
border-top: 1px solid var(--brand-border);
background: var(--brand-row);
}
.du-nein { margin-left: auto; }
/* --- Die Vorschau --------------------------------------------------------- */
.du-plan { margin: 0; font-size: var(--fs-6); }
.du-plan th {
width: 30%;
font-weight: 600;
color: var(--brand-quiet);
}
.du-plan-art { text-align: right; white-space: nowrap; }
.du-herkunft {
display: block;
font-size: var(--fs-3);
font-weight: 400;
color: var(--brand-faint);
}
/* Was NICHT übergeht, ist der wichtigste Kasten der Vorschau – eine
Uebernahme füllt nur leere Felder. Deshalb steht er abgesetzt und nicht
als weitere Zeile in derselben Tabelle. */
.du-bleibt {
margin-top: 0.9rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--btn-orange-bg-light);
background: var(--btn-orange-bg-light);
border-radius: var(--r-card);
font-size: var(--fs-6);
}
.du-bleibt .du-plan { background: transparent; }
.du-bleibt .du-plan th,
.du-bleibt .du-plan td { border-color: rgba(179, 98, 10, 0.18); }
.du-umzug { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.du-abschluss {
display: flex;
align-items: center;
gap: 0.9rem;
flex-wrap: wrap;
padding: 0.8rem 0.9rem;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--r-card);
font-size: var(--fs-6);
}
.du-abschluss-wort { flex: 1 1 320px; min-width: 0; color: var(--brand-quiet); }
.du-abschluss-knoepfe { display: flex; gap: 0.4rem; margin-left: auto; }
@media (max-width: 575.98px) {
.du-nein, .du-abschluss-knoepfe { margin-left: 0; }
.du-aktionen .btn { width: 100%; }
.du-nein { width: 100%; }
.du-nein .btn { width: 100%; }
}
/* ==========================================================================
Der Kontaktverlauf in der Kontaktakte (privat_detail.php)
--------------------------------------------------------------------------
Eine Spur, sechs Quellen: Handnotiz, Telefon, WhatsApp, Postfach, Anfrage,
Bewerbung. Zusammengetragen wird in includes/kontaktverlauf.php.
WARUM EINE SENKRECHTE LINIE UND KEINE TABELLE: Die Zeilen sind
unterschiedlich hoch – eine Mail bringt einen Betreff und drei Zeilen Text,
ein verpasster Anruf gar nichts. In einer Tabelle stünden dazwischen leere
Zellen. Die Linie hält die Spalte trotzdem zusammen, und das Zeichen sitzt
als einziges festes Maß darauf.
WARUM DIE FARBE NUR AM ZEICHEN HAENGT: Sechs eingefärbte Zeilen wären ein
Flickenteppich. Getönt ist deshalb allein der kleine Kreis links – er
genügt, um beim Ueberfliegen die Kanäle auseinanderzuhalten, und der Text
bleibt überall gleich lesbar.
========================================================================== */
.kv-zuletzt {
margin-left: auto;
font-size: var(--fs-5);
font-weight: 400;
color: var(--brand-quiet);
}
/* --- Was mit diesem Menschen verknüpft ist ------------------------------- */
.kv-verknuepft {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0.9rem 0.6rem;
}
.kv-verknuepft .section-label { margin-right: 0.2rem; }
.kv-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.55rem;
border: 1px solid var(--brand-border);
border-radius: var(--r-ctl);
background: var(--brand-surface);
font-size: var(--fs-5);
color: var(--brand-text);
text-decoration: none;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.kv-chip:hover {
border-color: var(--brand-line-strong);
background: var(--brand-row);
color: var(--brand-text);
}
.kv-chip svg { color: var(--brand-quiet); }
.kv-chip-zeit { color: var(--brand-faint); }
/* --- Die Filterzeile ------------------------------------------------------ */
.kv-seg {
margin: 0 0.9rem 0.6rem;
flex-wrap: wrap;
}
/* --- Die Spur ------------------------------------------------------------- */
.kv-liste {
list-style: none;
margin: 0 0 0.9rem;
padding: 0;
}
.kv-zeile {
position: relative;
display: flex;
gap: 0.6rem;
padding: 0.55rem 0 0.55rem 0;
}
/* Die Linie läuft durch die ganze Spur, endet aber am letzten Zeichen –
sonst hängt sie unter dem letzten Eintrag ins Leere. */
.kv-zeile::before {
content: "";
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 1px;
background: var(--brand-border);
}
.kv-zeile:first-child::before { top: 0.9rem; }
.kv-zeile:last-child::before { bottom: auto; height: 0.9rem; }
.kv-icon {
position: relative;
z-index: 1;
flex: 0 0 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
border: 1px solid var(--brand-border);
background: var(--brand-surface);
color: var(--brand-quiet);
}
.kv-icon svg { width: 12px; height: 12px; }
.kv-zeile.is-whatsapp .kv-icon { color: var(--btn-green); border-color: var(--btn-green-border-light); background: var(--btn-green-bg-light); }
.kv-zeile.is-email .kv-icon,
.kv-zeile.is-telefon .kv-icon { color: var(--btn-blue-dark); border-color: var(--btn-blue-border-light); background: var(--btn-blue-bg-light); }
.kv-zeile.is-anfrage .kv-icon,
.kv-zeile.is-bewerbung .kv-icon { color: var(--btn-orange-text); border-color: var(--btn-orange-bg-light); background: var(--btn-orange-bg-light); }
/* Die Besichtigung ist ein Termin – dieselbe Farbe wie Anruf und Mail, weil
auch sie ein verabredetes Zusammentreffen ist und kein Vorgang, der wartet. */
.kv-zeile.is-besichtigung .kv-icon { color: var(--btn-blue-dark); border-color: var(--btn-blue-border-light); background: var(--btn-blue-bg-light); }
.kv-inhalt { flex: 1 1 auto; min-width: 0; }
.kv-kopf {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
font-size: var(--fs-5);
}
.kv-zeit { font-weight: 600; color: var(--brand-text); }
.kv-uhr { font-weight: 400; color: var(--brand-quiet); }
.kv-richtung { color: var(--brand-quiet); }
.kv-richtung.is-ein { color: var(--btn-green); }
/* Der Herkunftsvermerk („über die Anfrage vom …") ist die leiseste Angabe der
Zeile: Er erklärt, warum der Eintrag hier steht, und sonst nichts. */
.kv-ueber { color: var(--brand-faint); font-style: italic; }
.kv-werkzeug {
display: flex;
align-items: center;
gap: var(--sp-1);
margin-left: auto;
}
.kv-oeffnen {
display: inline-flex;
align-items: center;
padding: 0.2rem;
color: var(--brand-faint);
border-radius: var(--r-sm);
}
.kv-oeffnen:hover { color: var(--btn-leucht-tief); background: var(--blau-hell); }
.kv-titel { margin-top: 0.2rem; font-weight: 600; font-size: var(--fs-7); }
.kv-text {
margin: var(--sp-1) 0 0;
font-size: var(--fs-6);
color: var(--brand-text);
overflow-wrap: anywhere;
}
.kv-wer { margin-top: 0.2rem; font-size: var(--fs-4); color: var(--brand-faint); }
/* Welche Vorlage gesendet wurde – dieselbe leise Angabe wie der Herkunfts-
vermerk daneben, nur aufrecht: Es ist ein Name, keine Erläuterung. */
.kv-vorlage { color: var(--brand-quiet); }
/* Das Bild einer Nachricht steht in der Zeile über dem Text – wie in der Blase
des Gesprächs, nur kleiner: Der Verlauf ist eine Übersicht, und ein Aufsteller
im Hochformat würde ihn sonst auseinanderziehen. Die Breite ist gedeckelt statt
gefüllt, weil die Zeile keine Blase ist und über die ganze Karte liefe.
`contain`, damit ein beschnittener Aufsteller nicht seine Aussage verliert. */
.kv-bild {
display: block;
max-width: 260px;
max-height: 160px;
margin-top: var(--sp-1);
border: 1px solid var(--brand-border);
border-radius: var(--r-sm);
object-fit: contain;
background: var(--brand-row);
}
.kv-bild-gross { display: block; text-decoration: none; }
.kv-bild-gross:hover .kv-bild { border-color: var(--brand-accent); filter: brightness(0.94); }
/* Die Dateizeile für alles, was kein Bild ist – Form wie die Anhänge im
Postfach (.ml-anhaenge) und im Gesprächsverlauf (.wa-anhang). */
.kv-anhang {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
max-width: 100%;
margin-top: var(--sp-1);
padding: 0.25rem 0.5rem;
font-size: var(--fs-5);
color: var(--brand-quiet);
text-decoration: none;
border: 1px solid var(--brand-border);
border-radius: var(--r-sm);
background: var(--brand-row);
}
.kv-anhang:hover { border-color: var(--brand-accent); color: var(--brand-text); }
.kv-anhang-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kv-anhang-mass { flex: 0 0 auto; color: var(--brand-faint); }
@media (max-width: 575.98px) {
.kv-verknuepft, .kv-seg { margin-left: 0; margin-right: 0; }
.kv-werkzeug { margin-left: 0; }
}
/* --- Die geteilte Visitenkarte übernehmen (kontakt_karte.php) -------------
Die Karte selbst steht hier als Kasten wie in der Blase (.wa-karte in
01-basis.css), nur größer: Auf einer eigenen Seite ist Platz, und was
übernommen werden soll, will man vorher lesen können.
DIE ANGABEN STEHEN NEBENEINANDER, nicht untereinander wie in der Blase: Der
Kasten ist hier so breit wie die Karte darunter, und eine Beschriftung von
„Web" neben einem Wert lässt die Zeile ruhig wirken. Unter 480px kippt das
Raster auf eine Spalte. */
.kk-name {
font-size: var(--fs-8);
font-weight: 600;
color: var(--brand-text);
}
.kk-werte { margin: 0.6rem 0 0; }
.kk-werte > div {
display: grid;
grid-template-columns: 11rem 1fr;
gap: var(--sp-2);
padding: 0.35rem 0;
}
.kk-werte > div + div { border-top: 1px solid var(--brand-border); }
.kk-werte dt { color: var(--brand-quiet); font-weight: 400; font-size: var(--fs-5); }
.kk-werte dd { margin: 0; color: var(--brand-text); word-break: break-word; }
.kk-werte dd a { color: inherit; text-decoration: none; }
.kk-werte dd a:hover { color: var(--brand-accent); }
/* Mehrere Karten in einer Nachricht: eine Reihe Knöpfe, die zwischen ihnen
umschaltet. Übernommen wird immer nur die eine, die gerade offen steht. */
.kk-karten { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 480px) {
.kk-werte > div { grid-template-columns: 1fr; gap: 0; }
}
/* --- Der Kasten „Kontakt im Adressbuch" (leads.php, bewerbungen.php) ------
Steht hier bei den Kontakten und nicht im Vertriebsteil: Es ist derselbe
Handgriff auf beiden Seiten, und gerendert wird er aus einer Hand
(renderKontaktVerknuepfung()). */
.kv-verkn-steht {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
}
.kv-verkn-wort { font-size: var(--fs-5); color: var(--brand-quiet); }
.kv-vorschlaege {
list-style: none;
margin: 0 0 0.6rem;
padding: 0;
border: 1px solid var(--brand-border);
border-radius: var(--r-ctl);
overflow: hidden;
}
.kv-vorschlag {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
padding: 0.45rem 0.6rem;
font-size: var(--fs-6);
background: var(--brand-surface);
}
.kv-vorschlag + .kv-vorschlag { border-top: 1px solid var(--brand-border); }
.kv-vorschlag:nth-child(even) { background: var(--brand-row); }
.kv-vorschlag-name { font-weight: 600; color: var(--brand-text); text-decoration: none; }
.kv-vorschlag-name:hover { text-decoration: underline; }
.kv-vorschlag-ort { color: var(--brand-quiet); }
/* Der Grund ist die eigentliche Auskunft dieser Zeile: „gleiche Rufnummer"
trägt eine Verknüpfung, „gleicher Name" trägt sie nicht. */
.kv-vorschlag-grund {
margin-left: auto;
font-size: var(--fs-4);
color: var(--brand-faint);
}
.kv-vorschlag form { margin-left: 0.4rem; }
.kv-verkn-suche {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
/* Seit der aktiven Suche (26.08.2026) steht das Feld in einem eigenen Rahmen:
Die Trefferliste hängt absolut unter ihm und braucht dafür ein Element mit
`position: relative` (.suchauswahl in 02-bausteine.css). Die Breite gehört
deshalb an den Rahmen, nicht mehr ans Feld – sonst wäre die Liste so breit
wie die ganze Zeile.
DIE HALBE ZEILE, NICHT MEHR (26.08.2026, Wunsch des Nutzers): Vorher war es
`flex: 1 1 240px` – das Feld nahm alles, was übrig blieb, und der zweite Weg
(„neu anlegen") stand als Fußnote darunter. Jetzt teilen sich beide die
Zeile. `flex-grow: 0` ist dabei der eigentliche Schalter; die 50 % sind die
Basis, unter 300px wird nicht geschrumpft, sonst passt der Platzhaltertext
nicht mehr hinein. */
.kv-verkn-suche .kv-verkn-feld { flex: 0 1 50%; min-width: min(300px, 100%); }
.kv-verkn-suche input[type="search"] { width: 100%; min-width: 0; }
/* Der zweite Weg, gleichberechtigt neben der Suche: Wer ein Formular von
jemandem bekommt, der neu ist, sucht gar nicht erst. Deshalb ein Knopf und
keine Fußnote – und `margin-left: auto`, damit er am rechten Rand steht und
nicht am Suchknopf klebt. */
.kv-verkn-neu {
margin-left: auto;
white-space: nowrap;
}
/* --- Das Fenster „Neuen Kunden anlegen" ---------------------------------
Derselbe Baustein wie „Neuer Termin" (.bd-overlay/.bd-dialog in
04-arbeitsflaechen.css), nur schmaler: Hier stehen zwei Spalten kurzer
Felder, keine Kartenbeschreibung. */
.kv-neu-fenster .bd-dialog { max-width: 600px; }
.kv-neu-fenster .bd-dialog-head .section-label { display: block; margin-bottom: 0.1rem; }
.kv-neu-fenster .form-label {
margin-bottom: 0.15rem;
font-size: var(--fs-4);
color: var(--brand-quiet);
}
/* Warum hier schon etwas in den Feldern steht – ohne den Satz sieht das
vorbelegte Fenster nach einem Fehler aus (derselbe Grund wie der
Hinweiskasten in privat_form.php). */
.kv-neu-wort {
margin: 0 0 0.75rem;
font-size: var(--fs-5);
color: var(--brand-quiet);
}
.kv-neu-fuss {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--brand-border);
}
.kv-neu-hinweis {
margin-right: auto;
font-size: var(--fs-4);
color: var(--brand-faint);
}
@media (max-width: 575.98px) {
.kv-vorschlag-grund { margin-left: 0; }
.kv-verkn-steht form.ms-auto { margin-left: 0 !important; }
/* Auf dem Handy steht ohnehin alles untereinander: Dann darf das Suchfeld
die ganze Zeile haben und der Knopf die nächste. */
.kv-verkn-suche .kv-verkn-feld { flex-basis: 100%; }
.kv-verkn-neu { margin-left: 0; }
.kv-neu-hinweis { margin-right: 0; flex-basis: 100%; }
}
/* ==========================================================================
Das A–Z-Register (kontakte.php, ab 200 Kontakten)
Ein .cal-seg mit 27 Einträgen: Der Baustein ist auf eine Handvoll Segmente
gebaut (feste Höhe, kein Umbruch) – hier darf er umbrechen, sonst schöbe
sich das Alphabet auf schmalen Fenstern aus dem Bild.
========================================================================== */
.kt-register {
flex-wrap: wrap;
height: auto;
min-height: var(--h-ctl);
}
.kt-register a {
min-width: 2.1em;
justify-content: center;
}
/* ==========================================================================
DER KASTEN „KUNDENKARTE" IN DER AKTE (11.09.2026, privat_detail.php)
Präfix `kdk-` und nicht `kk-`: Das trägt weiter oben die Kontaktkarte
(kontakt_karte.php). Das hochgestellte Zeichen selbst steht in
02-bausteine.css, weil es auch in Telefon, WhatsApp und Adressbuch steht.
Links Stufe, Stand der Karte und was damit zu tun ist, rechts, was die
Stufe bekommt. Getrennt wird durch Weißraum, nicht durch Linien.
========================================================================== */
.kdk-raster {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: var(--sp-6) var(--sp-8);
align-items: start;
}
@media (max-width: 960px) {
.kdk-raster { grid-template-columns: 1fr; }
}
.kdk-kartenzeichen {
width: 15px;
height: 15px;
}
.kdk-stufe-zeile {
display: flex;
align-items: center;
gap: var(--sp-3) var(--sp-4);
flex-wrap: wrap;
margin: 0;
}
.kdk-feldname {
width: 7.5rem;
font-size: var(--fs-6);
font-weight: 500;
color: var(--brand-quiet);
}
/* Der Umschalter ist ein Formular – jeder Reiter schickt die Stufe ab. Die
Knöpfe tragen die Gestalt von .cal-seg a (02-bausteine.css). */
.kdk-seg button {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 0.8rem;
border: 0;
border-radius: var(--r-sm);
background: transparent;
white-space: nowrap;
font: 600 var(--fs-5)/1 'Plus Jakarta Sans', sans-serif;
color: var(--cal-quiet);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
transform 160ms var(--ease-out);
}
.kdk-seg button:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.kdk-seg button.active,
.kdk-seg button.active:hover {
background: var(--btn-leucht-dark);
color: #fff;
box-shadow: var(--sh-1);
}
.kdk-seg button:active { transform: scale(0.97); }
.kdk-seg button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 162, 239, 0.25);
}
.kdk-fakten {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: var(--sp-3) var(--sp-4);
margin: var(--sp-5) 0 0;
font-size: var(--fs-6);
}
.kdk-fakten dt { font-weight: 500; color: var(--brand-quiet); }
.kdk-fakten dd { margin: 0; line-height: 1.45; color: var(--brand-text); }
.kdk-fakten dd small {
display: block;
font-size: var(--fs-5);
color: var(--brand-quiet);
}
.kdk-num {
font-family: 'IBM Plex Sans', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.kdk-stufenwort { font-weight: 700; color: var(--kdk-text); }
.kdk-leer {
margin: var(--sp-5) 0 0;
font-size: var(--fs-6);
line-height: 1.5;
color: var(--brand-quiet);
}
.kdk-hinweis {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
margin: var(--sp-6) 0 0;
font-size: var(--fs-5);
line-height: 1.5;
color: var(--brand-quiet);
}
.kdk-hinweis svg { flex: none; margin-top: 2px; color: var(--btn-blue); }
.kdk-aktionen {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
margin-top: var(--sp-6);
}
.kdk-aktionen form { margin: 0; }
.kdk-aktionen .ms-auto { margin-left: auto; }
.kdk-senden { margin-top: var(--sp-6); }
.kdk-senden-wege {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-5);
margin-bottom: var(--sp-3);
font-size: var(--fs-6);
}
.kdk-leistungen-titel {
margin-bottom: var(--sp-2);
font-size: var(--fs-3);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--brand-quiet);
}
.kdk-liste {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--fs-6);
}
.kdk-liste li {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
padding: 6px 0;
line-height: 1.4;
}
.kdk-liste li svg { flex: none; margin-top: 2px; color: var(--brand-quiet); }
.kdk-liste li small {
display: block;
font-size: var(--fs-5);
color: var(--brand-quiet);
}
@media (prefers-reduced-motion: reduce) {
.kdk-seg button { transition: none; }
.kdk-seg button:active { transform: none; }
}