/* ==========================================================================
   Die gemeinsamen Bausteine
   --------------------------------------------------------------------------
   Seitenkopf (.cal-masthead), Kennzahlen (.kpi-grid), Leerzustand (.leer),
   Segmentschalter (.cal-seg). Wer eine neue Seite baut, benutzt diese vier
   und erfindet nichts daneben.

   TEIL 2 VON 9 von assets/css/style.css.

   ACHTUNG, REIHENFOLGE: CSS ist kaskadierend. Diese Dateien werden in
   includes/header.php in genau dieser Nummerierung eingebunden, und die
   Nummer im Dateinamen IST die Reihenfolge. Wer eine Datei dazwischen
   schiebt oder die Einbindung umsortiert, ändert stillschweigend, welche
   Regel bei gleicher Spezifität gewinnt.
   ========================================================================== */

/* Kalender-Monatsraster */
/* ==========================================================================
   Kalender – Look B „Arbeitsfläche": flach, dicht, kühl-neutral.
   Signatur: Rot = HEUTE (das eine laute Element), sonst ruhig & präzise.

   Die --cal-* Marken standen früher auf .cal-page. Das war ein Fehler:
   Seitenkopf (.cal-masthead) und Segmentschalter (.cal-seg) stehen auf
   fast jeder Seite, aber .cal-page gibt es nur im Kalender – überall sonst
   waren die Variablen also nicht definiert, und die Regeln fielen still
   aus (kein Trennstrich unter dem Kopf, dunkles Mikrolabel, keine Fuge
   zwischen den Segmenten). Sie gehören deshalb ins :root, siehe ganz oben.
   ========================================================================== */

/* ==========================================================================
   Seitenkopf – auf jeder angemeldeten Seite derselbe (siehe seitenkopf()
   in includes/functions.php): Mikrolabel, Titel mit leisem Zusatz, optional
   eine Unterzeile; rechts die Aktionen der Seite.
   ========================================================================== */
.cal-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--cal-line);
    margin-bottom: var(--sp-6);
    /* Für den kurzen Strich darunter (siehe ::after). */
    position: relative;
}
/* Der Anstrich unter dem Titel: die ersten 44 Pixel der Trennlinie im
   Leuchtblau des Hauses. Er ist die einzige Stelle, an der auf jeder Seite
   dieselbe Farbe an derselben Stelle steht – zusammen mit dem Mikrolabel
   darüber gibt er sechzig sonst sehr verschiedenen Seiten denselben Anfang.
   Zwei Pixel, nicht mehr: Er soll den Blick anlegen, nicht ihn halten. */
.cal-masthead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--btn-leucht);
}
.cal-masthead-titel {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.cal-masthead-wort { min-width: 0; }
.cal-masthead-medien { flex: none; }
/* Kurze Merkmale unter dem Titel (Rechtsform, Branche, Alter, Beruf …) */
.cal-masthead-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}
/* Die Aktionen der Seite. Sie stehen rechts – auch dann noch, wenn sie in
   eine eigene Zeile rutschen.

   WARUM `flex: 1 1 auto` (25.08.2026): .cal-masthead ist eine umbrechende
   Flexspur mit space-between. Wird die Knopfreihe zu breit, bricht sie um –
   und ein Flexelement ist auf der neuen Zeile nur so breit wie sein Inhalt.
   Das `justify-content: flex-end` darin hatte damit nichts mehr zu verteilen,
   und die Knöpfe standen plötzlich LINKS unter dem Titel. Aufgefallen ist das
   auf der Startseite, als im Anpassen-Modus ein siebter Knopf dazukam
   („Wetterort"). Mit dem Wachsen füllt die Reihe die Zeile und bleibt
   rechtsbündig; in der ersten Zeile ändert sich dadurch nichts, weil die
   Knöpfe ohnehin am rechten Rand sitzen. */
.cal-masthead-aktionen {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}
.cal-masthead-aktionen:empty { display: none; }
/* Das Mikrolabel über dem Titel („ÜBERSICHT", „ADRESSBUCH", „KALENDERWOCHE
   34"). Es trägt seit dem 21.08.2026 das tiefe Blaugrau statt des
   Sekundärgraus: Es ist der Bereich, in dem man steht, und stand als graue
   Zeile über einem grauen Titel wie eine Fußnote da. */
.cal-eyebrow {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-titel);
    opacity: 0.72;
    margin-bottom: 0.15rem;
}
/* Der Titel im dunklen Blaugrau (--brand-titel), nicht im Tintenton des
   Fließtextes: So hebt sich das Wort der Seite – „Dashboard", „Kontakte",
   „Telefon" – vom Text darunter ab, ohne zu leuchten. Der Zusatz daneben
   (.cal-year) bleibt blass, das Mikrolabel darüber grau. */
.cal-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: var(--fs-10);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--brand-titel);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.cal-title .cal-year { color: var(--brand-faint); font-weight: 500; }
/* Ruhige Unterzeile unter dem Titel (Stand, Zählung, kurze Erklärung) */
.cal-sub {
    margin: 0.15rem 0 0;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}

/* ==========================================================================
   DER GRUSS AUF DER STARTSEITE (22.08.2026)

   Die eine Zeile, die ein Kunde beim ersten Aufschlagen liest. Sie ist KEIN
   neuer Block über dem Seitenkopf – dann sagte die Seite zweimal
   hintereinander, wo man ist. Sie IST der Titel: Das Mikrolabel „Übersicht"
   bleibt darüber, das Wort „Dashboard" fällt weg (auf der Startseite weiß
   das ohnehin jeder), und die Lage wird die Unterzeile, die seitenkopf()
   längst kann.

   Nur hier größer, nicht überall: --fs-12 ist die Bühnenzeile der
   öffentlichen Seiten. Auf sechzig Arbeitsseiten wäre sie zu laut; auf der
   einen, die morgens als erste aufgeht, ist sie richtig.
   ========================================================================== */
.cal-masthead.ist-gruss .cal-title { font-size: var(--fs-12); }
.cal-masthead.ist-gruss .cal-title .cal-year { font-weight: 400; }
/* Das Datum unter dem Gruß – die Einordnung, mehr nicht. Was offen ist,
   steht als Zusatz im Titel und ausführlich in den Kacheln darunter; hier
   stand es eine Zeit lang ein drittes Mal (erst als Satz, dann als Knöpfe)
   und ist am 24.08.2026 wieder herausgenommen worden. */
.gruss-lage {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}

/* Bedienelemente im Seitenkopf sind überall gleich hoch (--h-ctl), egal ob
   die Seite btn oder btn-sm geschrieben hat. Eine Regel statt einer
   Verabredung, an die sich die nächste Seite doch nicht hält.
   -------------------------------------------------------------------------
   SEIT DEM 22.08.2026 GILT DASSELBE FÜR DIE LEISTE DARUNTER (.ml-bar im
   Postfach, bei den Nachrichten, am Telefon, bei Objekten, Bewerbungen,
   Formularen und Leads; .cal-toolbar im Kalender und auf dem Board). Dort
   standen Segmentschalter (34px, weil .cal-seg seine Höhe selbst setzt) und
   Knöpfe nebeneinander, die die Seite als `btn-sm` geschrieben hatte – rund
   31px. Drei Pixel Unterschied liest man nicht als Absicht, sondern als
   schiefe Zeile: Die Oberkanten trafen sich nicht, und beim Umschalten von
   einer Seite zur nächsten sprang die Leiste.

   MERKSATZ: Alles, was in der Kopfzone einer Seite steht – Seitenkopf und
   die Leiste darunter –, ist --h-ctl hoch und trägt --fs-5. Was eine Seite
   im Markup schreibt, entscheidet nur über Farbe und Wort, nicht über das
   Maß. */
.cal-masthead .btn,
.cal-masthead .form-select,
.cal-masthead .form-control,
.ml-bar .btn,
.ml-bar .form-select,
.ml-bar .form-control,
.cal-toolbar .btn,
.cal-toolbar .form-select,
.cal-toolbar .form-control {
    height: var(--h-ctl);
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-5);
    border-radius: var(--r-ctl);
    padding-top: 0;
    padding-bottom: 0;
}
.cal-masthead .btn,
.ml-bar .btn,
.cal-toolbar .btn { padding-left: 0.8rem; padding-right: 0.8rem; }
.cal-masthead form,
.ml-bar form,
.cal-toolbar form { margin: 0; }

/* Zweispaltiges Layout mit einklappbarer Seitenleiste */
.cal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: var(--sp-5);
    align-items: start;
    transition: grid-template-columns var(--t-slow) var(--ease-in-out);
}
.cal-page.side-collapsed .cal-layout {
    grid-template-columns: minmax(0, 1fr) 0px;
    gap: 0;
}
.cal-main { min-width: 0; }
.cal-side {
    min-width: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
    transition: opacity var(--t-fast) var(--ease-out);
}
.cal-page.side-collapsed .cal-side {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.cal-side::-webkit-scrollbar { width: 8px; }
.cal-side::-webkit-scrollbar-thumb { background: var(--cal-line); border-radius: 4px; }

/* Toolbar über dem Raster */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.cal-toolbar-end { display: flex; align-items: center; gap: 0.6rem; }

/* Panel-Umschalter */
.cal-side-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--h-ctl);
    padding: 0 var(--sp-4);
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
    background: var(--cal-paper);
    color: var(--cal-quiet);
    font-size: var(--fs-5);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.cal-side-toggle:hover { color: var(--btn-leucht-tief); background: var(--blau-hell); }
.cal-side-toggle svg { transition: transform var(--t-slow) var(--ease-in-out); }
.cal-page.side-collapsed .cal-side-toggle svg { transform: rotate(180deg); }

/* Seitenleisten-Panels (Planer-Sprache statt Bootstrap-Karten) */
.cal-panel {
    background: var(--cal-paper);
    border: 1px solid var(--cal-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
    overflow: hidden;
}
.cal-panel + .cal-panel { margin-top: var(--sp-4); }
.cal-panel-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--cal-line);
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cal-quiet);
    /* Der Kopf ist zugleich der Griff zum Umsortieren (wie im Aufgaben-Board) */
    cursor: grab;
    user-select: none;
}
.cal-panel-head:active { cursor: grabbing; }
.cal-panel-head::before {
    content: '⠿';
    margin-right: -0.1rem;
    font-size: var(--fs-6);
    line-height: 1;
    letter-spacing: 0;
    color: var(--brand-faint);
    opacity: 0.5;
}
.cal-panel.is-dragging {
    opacity: 0.45;
    box-shadow: var(--sh-2);
}
.cal-panel-head svg { color: var(--cal-quiet); }
/* Ein-/Ausklappen je Panel */
.cal-panel-toggle {
    margin-left: auto;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-sm);
    background: var(--brand-surface);
    color: var(--cal-quiet);
    font-size: var(--fs-7);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.cal-panel-toggle:hover {
    background: var(--blau-hell);
    border-color: var(--blau-rand);
    color: var(--btn-leucht-tief);
}
.cal-panel-toggle:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; }
.cal-panel.is-collapsed .cal-panel-body { display: none; }
.cal-panel.is-collapsed .cal-panel-head { border-bottom: 0; }
.cal-panel-body { padding: var(--sp-4); }
.cal-panel-note { font-size: var(--fs-4); color: var(--cal-quiet); line-height: 1.5; }

/* Steuerelemente: 34px hoch, 8px Radius – gleiche Sprache wie die Buttons */
.cal-nav {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
    overflow: hidden;
    background: var(--cal-paper);
}
.cal-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: var(--h-ctl);
    padding: 0 0.7rem;
    color: var(--cal-quiet);
    text-decoration: none;
    font-size: var(--fs-5);
    font-weight: 600;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
/* Dieselbe Tönung wie am Segmentschalter darunter – beide stehen in
   derselben Leiste und dürfen nicht zwei verschiedene Blau anzeigen. */
.cal-nav a:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.cal-nav a + a { border-left: 1px solid var(--cal-line); }
.cal-nav .cal-today-btn { color: var(--cal-today); }
.cal-nav .cal-today-btn:hover { background: var(--brand-chip-bg); color: var(--cal-today); }

.cal-seg {
    display: inline-flex;
    align-items: center;
    background: var(--cal-paper);
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
    overflow: hidden;
    height: var(--h-ctl);
}
.cal-seg a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 0.8rem;
    /* EIN REITER IST EINE ZEILE (22.08.2026). Der Schalter ist --h-ctl hoch
       und schneidet ab (overflow: hidden) – ein umbrechendes Wort ist hier
       also nie eine zweite Zeile, sondern ein halb abgeschnittenes Wort. Am
       Telefon stand „Ohne Zuordnung" genau so da, sobald der Schalter aufs
       Kachelraster einrastete und der Platz für das lange Wort knapp wurde. */
    white-space: nowrap;
    font-size: var(--fs-5);
    font-weight: 600;
    text-decoration: none;
    color: var(--cal-quiet);
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-seg a + a { border-left: 1px solid var(--cal-line); }
/* ZUR FARBE (22.08.2026): Der Schalter stand im Blaugrau des Hauses – der
   gewählte Reiter auf --btn-blue-dark, der Zeiger auf --btn-blue-bg-light.
   Seit der gefüllte Knopf (.btn-primary in 01-basis.css) das helle Blau der
   Werbeseite trägt, war das der zweite blaue Ton auf demselben Bildschirm:
   In der Leiste über dem Postfach stand „Alle | Ungelesen | Ohne Zuordnung"
   blaugrau neben einem leuchtblauen Knopf, und keiner der beiden Töne
   bedeutete etwas anderes als der andere. Der Schalter trägt jetzt dieselbe
   Fassung wie der Knopf: die Tönung (--blau-hell) unter dem Zeiger, das
   tiefe Leuchtblau (--btn-leucht-dark, Weiß darauf 4,1 : 1) am gewählten
   Reiter. Flach, nicht im Verlauf: Der Verlauf gehört dem einen Knopf, um
   den es auf einer Seite geht – ein Schalter aus vier Feldern wäre damit
   vier gefüllte Knöpfe nebeneinander. */
.cal-seg a:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.cal-seg a.active,
.cal-seg a.active:hover { background: var(--btn-leucht-dark); color: #fff; }

/* ==========================================================================
   DER GEWÄHLTE BEREICH ALS PILLE (22.08.2026)

   Er stand als scharfkantiges Rechteck von Rand zu Rand in der Leiste – ein
   Feld unter anderen, nur farbig. Als Pille mit einem Hauch Erhebung sieht
   man auf einen Blick, dass er OBEN liegt und die anderen darunter.

   Der Innenabstand von drei Pixeln macht den Platz dafür; die Trennlinien
   zwischen den Feldern fallen damit weg, weil eine Pille sich selbst
   abgrenzt und zwei Begrenzungen nebeneinander wie ein Fehler aussehen.
   ========================================================================== */
.cal-seg { padding: 3px; gap: 2px; }
.cal-seg a { border-radius: var(--r-sm); }
.cal-seg a + a { border-left: 0; }
/* Die Erhebung aus der gemeinsamen Leiter und nicht als eigener Wert: Ein
   fester `rgba(24, 44, 66, …)` wäre auf dunklem Grund ein Schleier statt
   eines Schattens – --sh-1 kennt beide Fassungen (includes/farbschema.php). */
.cal-seg a.active,
.cal-seg a.active:hover { box-shadow: var(--sh-1); }
/* Zahl hinter der Beschriftung (Reiter Firmen-/Privatkunden auf der Startseite) */
.cal-seg .seg-zahl {
    margin-left: 0.45rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
}
.cal-seg a.active .seg-zahl { opacity: 0.85; }

/* ==========================================================================
   WhatsApp-Marke – das kleine Zeichen hinter einer Mobilnummer
   --------------------------------------------------------------------------
   Steht auf der Kontaktseite (privat_detail.php). Erzeugt wird sie in einer Hand von
   whatsappErreichbarZeichen() (includes/whatsapp_erreichbar.php).

   DREI ZUSTAENDE, DREI ANSICHTEN – und das ist der ganze Sinn der Sache. Ein
   einziges Zeichen für „könnte sein" und „ist bewiesen" wäre bequemer und
   sagte weniger als nichts: Man verlässt sich darauf und schreibt ins Leere.

     ist-bestätigt  grün. Der Nachrichtenverlauf beweist es.
     ist-vermerkt    blaugrau. Jemand hat das Häkchen gesetzt, mehr nicht.
     ist-aus         blass und durchgestrichen. Eine Nachricht kam nicht an.

   GRUEN IST HIER ERLAUBT, obwohl Look B von Blaugrau getragen wird: Es ist
   keine Zierde, sondern ein Zustand – dieselbe Ausnahme wie beim Zustellhaken
   im Verlauf, und es ist genau die Farbe, die jeder von WhatsApp kennt
   (.text-whatsapp in 01-basis.css tragt denselben Wert).
   ========================================================================== */
.wa-marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 0.3rem;
    border-radius: var(--r-sm);
    vertical-align: -4px;
    cursor: help;
}
.wa-marke.ist-bestaetigt {
    color: #25d366;
    background: rgba(37, 211, 102, 0.12);
}
.wa-marke.ist-vermerkt {
    color: var(--brand-quiet);
    background: var(--btn-gray-bg);
}
/* Widerlegt: still, aber nicht unsichtbar. Der Strich liegt über dem Zeichen
   statt daneben – ein Wort dafür wäre in einer Zeile mit vier Nummern eine
   Zeile zu viel; was er bedeutet, sagt der Kurzhinweis. */
.wa-marke.ist-aus {
    color: var(--brand-faint);
    background: transparent;
    position: relative;
}
.wa-marke.ist-aus::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 50%;
    height: 1px;
    background: currentColor;
    transform: rotate(-20deg);
}

/* ==========================================================================
   Querabgleich (includes/querabgleich.php)
   --------------------------------------------------------------------------
   Der Kasten, der beim Anlegen einer Firma oder einer Person dazwischengeht:
   „Diese Rufnummer steht schon bei jemandem." Er sitzt IM Formular, dessen
   Absenden er aufgehalten hat, und seine Knöpfe schicken dasselbe Formular
   noch einmal – deshalb ist er ein Baustein und keine eigene Seite.

   ZWEI STUFEN, und der Unterschied ist Absicht: Ein gleicher Name ist ein
   Hinweis (blass), eine doppelt vergebene Rufnummer ist ein Fehler mit Folgen
   (`.is-schwer`, warmer Ton wie die bekannte Zeile im Import). Wäre beides
   gleich laut, würde die laute Fassung nach der dritten Namensgleichheit
   weggeklickt.
   ========================================================================== */
.qa-kasten {
    margin: 0 0 var(--sp-6);
    padding: .85rem var(--sp-5);
    border: 1px solid var(--btn-gray-border);
    border-left: 3px solid var(--brand-line-strong);
    border-radius: var(--r-card);
    background: var(--brand-row);
}
.qa-kasten.is-schwer {
    border-color: var(--btn-orange-border-light);
    border-left-color: var(--btn-orange-text);
    background: var(--btn-orange-bg-light);
}
.qa-kopf {
    display: flex;
    align-items: center;
    font-size: var(--fs-7);
}
.qa-kasten.is-schwer .qa-kopf { color: var(--btn-orange-text); }
.qa-text {
    margin: .35rem 0 .75rem;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}
.qa-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.qa-zeile {
    padding: .55rem .7rem;
    border: 1px solid var(--btn-gray-border);
    border-radius: var(--r-sm);
    background: var(--brand-surface);
}
.qa-wer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: var(--fs-7);
}
.qa-art  { font-size: var(--fs-5); color: var(--brand-quiet); }
.qa-feld { font-size: var(--fs-5); color: var(--brand-faint); }
/* Die Angaben des Treffers stehen in einer Zeile, durch Mittelpunkte getrennt.
   Untereinander wäre der Kasten bei vier Nummern höher als das Formular. */
.qa-daten {
    margin-top: .2rem;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    overflow-wrap: anywhere;
}
.qa-tat,
.qa-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.qa-tat  { margin-top: .5rem; }
.qa-fuss { margin-top: .9rem; }

/* ==========================================================================
   Geburtstagskacheln (.gb-*)
   --------------------------------------------------------------------------
   Gesicht, Name, Tag, kommendes Alter – eine Kachel je Mensch. Gebaut wird
   sie in geburtstagsKachel() (includes/functions/oberflaeche.php), gezeigt an
   zwei Stellen: als Leiste über dem Adressbuch (.kt-anlass in
   08-kontakte.css) und in der Geburtstagskarte der Startseite. Deshalb steht
   sie hier bei den Bausteinen und nicht in einer der beiden Seitendateien.

   VORHER WAREN ES ZWEI DARSTELLUNGEN: im Adressbuch eine Zeile Fließtext mit
   vier Namen, auf der Startseite eine Liste aus Textzeilen (.birthday-row).
   Zweimal dieselbe Auskunft in zwei Formen – wer von der einen Seite auf die
   andere ging, musste neu hinsehen. .birthday-row war die zweite Form; sie ist
   am 10.08.2026 mit dem Firmenbereich weggefallen.
   ========================================================================== */

/* Die Reihe: gleich breite Felder, die sich auf schmalen Schirmen umbrechen.
   RASTER, NICHT FLEX: Mit flex-wrap zieht sich die Kachel, die als einzige in
   die zweite Zeile rutscht, über deren ganze Breite – ein Name in einem
   Banner, während die drei darüber handtellergroß sind. Im Raster behält
   jede Kachel ihre Spalte, egal in welcher Zeile sie steht; bleibt eine
   Spalte leer, bleibt sie eben leer. */
.gb-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.4rem;
}
.gb-karte {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-row);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
/* Der Hover zieht den Rand nur halb zum Blau: Ein voller Signalrand um eine
   Kachel, über der man beim Lesen ohnehin hängt, war mehr Betrieb als
   Auskunft. */
.gb-karte:hover,
.gb-karte:focus-visible {
    color: inherit;
    background: var(--brand-surface);
    border-color: color-mix(in srgb, var(--btn-blue) 50%, var(--brand-border));
}
.gb-karte:focus-visible {
    outline: 2px solid var(--focus-col);
    outline-offset: 2px;
}
/* Das Bild ist das gemeinsame .avatar-sm (36px) aus 01-basis.css, hier eine
   Nummer kleiner: Die Kachel ist eine Randnotiz, kein Kontaktbogen. */
.gb-karte .avatar-sm {
    height: 32px;
    width: 32px;
}
.gb-karte .avatar-placeholder svg { width: 17px; height: 17px; }
/* Grün hinterlegt heißt: Bei diesem Menschen steht eine Handynummer, der
   Glückwunsch kann hinausgehen (gesetzt in dashboardGeburtstageAnreichern(),
   nur auf der Startseite). Es ist der gedeckte Hausgrün-Ton, nicht das
   Signalgrün: Die Kachel meldet nichts, sie sagt nur, was möglich ist. Ohne
   Nummer bleibt es beim gewohnten Blaugrau. */
.gb-karte .avatar-placeholder.is-mobil {
    background-color: var(--btn-green-bg-light);
    color: var(--btn-green-dark);
}

.gb-wort {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
/* Alle drei Zeilen werden beschnitten, nicht umgebrochen: Die Kachel führt
   zum Menschen, und alles steht noch einmal im Zeiger (title). Eine zweite
   Zeile für einen langen Namen machte die ganze Reihe höher. */
.gb-name {
    font-size: var(--fs-5);
    font-weight: 600;
}
.gb-wann {
    font-size: var(--fs-3);
    color: var(--brand-quiet);
    font-variant-numeric: tabular-nums;
}
.gb-herkunft {
    font-size: var(--fs-3);
    color: var(--brand-faint);
}
.gb-name,
.gb-wann,
.gb-herkunft {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Heute und morgen – die beiden Tage, an denen der Anruf noch etwas wert ist.
   DAS SIGNAL LIEGT IN DER FLAECHE UND IM WORT, NICHT MEHR IM RAND: Bis zum
   10.08.2026 trug die heutige Kachel einen roten Rahmen und links eine 3px
   breite rote Kante (als Innenschatten). Drei rote Linien um eine handteller-
   große Kachel, daneben ruhige Nachbarn – das las sich wie eine Warnung,
   dabei ist ein Geburtstag eine freundliche Nachricht. Geblieben ist der
   blasse Grund, noch einmal mit Weiß gebrochen, und das gefärbte Wort
   („heute" / „morgen") in der zweiten Zeile. Der Rand ist überall derselbe
   neutrale wie an jeder anderen Kachel.

   SEIT DEM 21.08.2026 BLAU STATT ROT UND ORANGE: Die Tönung blieb bis dahin
   die der Warnfarben – blass zwar, aber aus derselben Familie wie „Vertrag
   gekündigt" und „Frist läuft ab". Heute trägt die nächste Kachel das
   helle Blau der Werbeseite (--btn-leucht, dieselbe 9-%-Tönung wie die
   offene Kachel der Handy-App), morgen das Blaugrau des Hausgrundtons
   (--btn-blue-bg-light). Damit steht auf der Startseite kein Alarm mehr, wo
   eine freundliche Nachricht steht, und die beiden Tage bleiben trotzdem
   auseinanderzuhalten: Der eine Ton leuchtet, der andere ist still.
   (Dieselben zwei Töne standen bis zum 05.08.2026 an .birthday-row in
   01-basis.css – der Zeilenform, aus der diese Kachel hervorging.) */
.gb-karte.is-heute {
    background: color-mix(in srgb, var(--btn-leucht) 9%, var(--brand-surface));
}
.gb-karte.is-morgen {
    background: var(--btn-blue-bg-light);
}
/* Das Wort trägt jetzt allein, was vorher drei Ränder sagten – deshalb
   bleibt es voll gefärbt, aber ohne Fettung: Es steht als einziges Farbige
   in der Kachel und fällt auch so auf.
   NICHT --btn-leucht SELBST: Auf der hellen Tönung läge der reine Ton bei
   2,4 : 1, die dritte Stufe --btn-leucht-tief bei 5,3 : 1 – und 0,72rem
   Schrift braucht 4,5 : 1. „Morgen" nimmt das dunkle Blaugrau der
   Ueberschriften (6,7 : 1 auf seinem Grund). */
.gb-karte.is-heute .gb-wann {
    color: var(--btn-leucht-tief);
}
.gb-karte.is-morgen .gb-wann {
    color: var(--brand-titel);
}
/* Der Hover darf die Tönung nicht wegwischen: Sonst verlöre die eine
   Kachel, auf die es ankommt, ihr Signal genau in dem Moment, in dem man sie
   anfasst. Er vertieft sie stattdessen eine Spur. */
.gb-karte.is-heute:hover,
.gb-karte.is-heute:focus-visible {
    background: color-mix(in srgb, var(--btn-leucht) 18%, var(--brand-surface));
}
.gb-karte.is-morgen:hover,
.gb-karte.is-morgen:focus-visible {
    background: color-mix(in srgb, var(--btn-blue) 18%, var(--brand-surface));
}

/* Das Kanalzeichen am rechten Rand (nur auf der Startseite, nur heute): Es
   sagt, dass dieser Klick nicht zur Akte führt, sondern zu WhatsApp. Blass
   und klein – die Kachel bleibt der Name, nicht der Knopf. Beim Hover zieht es
   auf die volle Farbe an, wie jeder andere Kanal auch. */
.gb-kanal {
    margin-left: auto;
    display: flex;
    color: var(--brand-faint);
}
.gb-kanal svg {
    width: 15px;
    height: 15px;
}
.gb-karte:hover .gb-kanal,
.gb-karte:focus-visible .gb-kanal {
    color: var(--btn-green-dark);
}

/* Die Restkachel („+3 weitere", nur im Adressbuch) ist kein Link und sieht
   auch nicht aus wie einer: gestrichelt und blass, wie ein Kanal ohne
   Nummer. */
.gb-karte.is-rest {
    justify-content: center;
    background: transparent;
    border-style: dashed;
    color: var(--brand-faint);
    font-size: var(--fs-4);
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

/* Schmale Schirme: engeres Maß, damit zwei nebeneinander passen. Unter
   190px bleibt vom Namen zu wenig übrig, deshalb erst hier. */
@media (max-width: 575.98px) {
    .gb-reihe { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================================
   Suchauswahl (.suchauswahl*)
   --------------------------------------------------------------------------
   Ein Feld zum Tippen, darunter die Treffer – gebaut von
   assets/js/suchauswahl.js. Zwei Stellen benutzen es, und beide sollen gleich
   aussehen: der Dialog „Neue Konversation" in WhatsApp (dort wird eine
   Auswahlliste dazu umgebaut) und die Kontaktsuche im Versandkasten der
   Formulare (dort fragt das Feld beim Tippen den Server).

   Bis zum 11.08.2026 hieß die Familie `.wa-suchauswahl*` und stand in
   05-vertrieb.css – also im WhatsApp-Abschnitt, obwohl mit dem Versandkasten
   eine zweite Fläche dasselbe braucht. Sie liegt deshalb hier bei den
   Bausteinen; die Werte sind unverändert übernommen.
   ========================================================================== */
.suchauswahl { position: relative; }
.suchauswahl-liste {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    box-shadow: var(--shadow-pop);
}
.suchauswahl-treffer {
    padding: 5px 8px;
    border-radius: var(--r-sm);
    font-size: var(--fs-5);
    line-height: 1.3;
    cursor: pointer;
}
.suchauswahl-treffer.is-aktiv,
.suchauswahl-treffer:hover { background: var(--blau-hell); }
.suchauswahl-detail {
    display: block;
    color: var(--brand-quiet);
    font-size: var(--fs-3);
}
.suchauswahl-hinweis {
    padding: 5px 8px;
    color: var(--brand-quiet);
    font-size: var(--fs-5);
}

/* Das Personenzeichen vor dem Namen (die Formulare setzen es; in WhatsApp
   steht dort nichts). Es sitzt IM .suchauswahl-name, damit die zweite Zeile
   darunter bündig bleibt. */
.suchauswahl-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.suchauswahl-name > svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--brand-quiet);
}
.suchauswahl-treffer.is-aktiv .suchauswahl-name > svg,
.suchauswahl-treffer:hover .suchauswahl-name > svg { color: var(--btn-leucht-dark); }