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;
}
.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-pill);
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); }
@media (max-width: 575.98px) {
.kv-verknuepft, .kv-seg { margin-left: 0; margin-right: 0; }
.kv-werkzeug { margin-left: 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;
}
.kv-verkn-suche input[type="search"] { flex: 1 1 240px; min-width: 0; }
@media (max-width: 575.98px) {
.kv-vorschlag-grund { margin-left: 0; }
.kv-verkn-steht form.ms-auto { margin-left: 0 !important; }
}
/* ==========================================================================
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;
}