/* ============================================================
ZENTRUM · Designsystem
------------------------------------------------------------
Helles Layout nach Apple-Vorbild: fast weiße Fläche, viel Luft,
Haarlinien statt Schatten, Typografie mit negativer Laufweite,
genau EINE farbige Aktionsfarbe.
Diese eine Farbe ist der Akzent des Kunden (--accent). Struktur,
Typografie, Radien und Abstände sind fest, die Farbe nicht —
damit bleibt das White-Labeling aus dem Briefing erhalten.
============================================================ */
:root {
/* Akzent – wird beim Start aus den Einstellungen gesetzt */
--accent: #28D0B8;
--accent-line: #1c9e8c; /* Umrandete Aktion, dunkler für Kontrast */
--accent-soft: rgba(40, 208, 184, .12);
--on-accent: #ffffff; /* Textfarbe auf dem Akzent, je nach Helligkeit */
/* Neutrale Töne */
--carbon: #1d1d1f;
--ink: #1d1d1f;
--ash: #6e6e73;
--mist: #86868b;
--line: #d2d2d7;
--line-soft:#e8e8ed;
--frost: #f5f5f7;
--surface: #ffffff;
--pebble: #e8e8ed;
--gut: #1d8a5c;
--hinweis: #9a6b00;
--fehler: #c7362c;
--gut-bg: rgba(29,138,92,.10);
--hinweis-bg: rgba(154,107,0,.10);
--fehler-bg: rgba(199,54,44,.10);
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
--r-card: 12px;
--r-input: 10px;
--r-pill: 980px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 40px; --sp-10: 56px;
--bar-h: 52px;
--page: 1160px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Muss vor allen display-Regeln stehen: sonst überschreibt ein
display:grid das hidden-Attribut und der Anmeldebildschirm bleibt
über der Anwendung liegen. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
margin: 0;
overflow-x: hidden;
background: var(--frost);
color: var(--ink);
font-family: var(--font);
font-size: 15px;
line-height: 1.47;
letter-spacing: -.012em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: 34px; line-height: 1.12; }
h2 { font-size: 21px; line-height: 1.24; }
h3 { font-size: 17px; line-height: 1.3; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent-line); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ============================================================
1 · Gerüst
============================================================ */
.app { display: none; min-height: 100%; flex-direction: column; }
.app.on { display: flex; }
.topbar {
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,.82);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--line);
}
.topbar-in {
max-width: var(--page); margin: 0 auto; height: var(--bar-h);
display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5);
}
.wordmark {
font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.wordmark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
/* Zweite Leiste unter der Kopfzeile – die Produktnavigation.
Bewusst NICHT in der Kopfzeile: deren backdrop-filter würde auf dem
Handy den Bezugsrahmen für die untere Leiste bilden. */
.nav {
position: sticky; top: var(--bar-h); z-index: 39;
display: flex; align-items: center; gap: 2px;
background: rgba(255,255,255,.82);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--line);
padding: 7px max(20px, calc((100% - var(--page)) / 2 + 20px));
overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav button {
appearance: none; border: 0; background: none; font: inherit;
font-size: 13px; letter-spacing: -.01em; color: var(--ash);
padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
}
.nav button:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.nav button.on { color: var(--ink); background: var(--pebble); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.topbar-in .wordmark { margin-right: auto; }
.avatar {
width: 30px; height: 30px; border-radius: 50%;
background: var(--accent); color: var(--on-accent);
display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0;
border: 0; cursor: pointer; flex: none;
}
/* Die Symbolleiste oben: Schnellzugriffe, die auf jeder Seite
stehen. Sie sieht aus wie die Glocke und ordnet sich ihr damit
unter — die Leiste soll nicht zur zweiten Navigation werden.
Ein Trennstrich dahinter, damit „was ich tue" und „was mir
gemeldet wird" nicht ineinanderlaufen. */
.kopfleiste { display: flex; align-items: center; gap: 2px; }
.kopfleiste:not(:empty) {
margin-right: var(--sp-2);
padding-right: var(--sp-2);
border-right: 1px solid var(--line);
}
.kopf-knopf {
width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: transparent; color: var(--muted); cursor: pointer;
transition: background .15s, color .15s;
}
.kopf-knopf:hover { background: var(--pebble); color: var(--ink); }
.kopf-knopf .sym { width: 19px; height: 19px; }
@media (pointer: coarse) { .kopf-knopf { width: 40px; height: 40px; } }
/* Die Glocke sitzt links neben dem Namenskreis. Sie fällt nur auf,
wenn es etwas gibt — eine dauerhaft farbige Glocke ist nach drei
Tagen unsichtbar. */
.glocke {
position: relative; width: 34px; height: 34px; flex: none;
border: 0; background: transparent; color: var(--ash);
border-radius: 999px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.glocke:hover { background: var(--pebble); color: var(--ink); }
.glocke.hat-neues { color: var(--ink); }
.glocke-sym { display: inline-flex; }
.glocke-sym .sym { width: 19px; height: 19px; }
.glocke-zahl {
position: absolute; top: 1px; right: 0;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 999px; background: var(--fehler); color: #fff;
font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
box-shadow: 0 0 0 2px var(--surface);
}
@media (pointer: coarse) { .glocke { width: 40px; height: 40px; } }
/* Eine Zeile im Nachrichtenblatt */
.nachricht.gelesen { opacity: .62; }
.nachricht-punkt {
width: 8px; height: 8px; border-radius: 999px; flex: none; margin-top: 6px;
background: var(--accent); align-self: flex-start;
}
.nachricht-punkt.warnung { background: var(--hinweis); }
.nachricht-punkt.fehler { background: var(--fehler); }
.nachricht-punkt.gut { background: var(--gut); }
.nachricht.gelesen .nachricht-punkt { background: var(--line); }
.page { flex: 1; max-width: var(--page); width: 100%; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-10); }
.page-head { margin-bottom: var(--sp-6); display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 220px; }
.page-head .ansicht-knoepfe { margin-left: auto; align-items: center; }
.page-head .lede { color: var(--ash); font-size: 17px; font-weight: 300; letter-spacing: -.016em; margin-top: 6px; }
/* Umschalter innerhalb einer Seite. Ein Modul mit drei Ansichten
bekommt damit EINEN Eintrag in der Navigation statt drei. */
.page-segmente { flex: 1 0 100%; margin-top: var(--sp-4); }
.segmente {
display: inline-flex; gap: 2px; padding: 2px;
background: var(--frost); border-radius: var(--r-pill); max-width: 100%;
overflow-x: auto; scrollbar-width: none;
}
.segmente::-webkit-scrollbar { display: none; }
.segmente .seg {
appearance: none; border: 0; background: none; font: inherit;
font-size: 14px; letter-spacing: -.01em; color: var(--ash);
padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer;
white-space: nowrap; min-height: 34px;
}
.segmente .seg:hover { color: var(--ink); }
.segmente .seg.on {
background: #fff; color: var(--ink); font-weight: 600;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* Suchwahl — Auswahlfeld, in dem getippt wird */
.suchwahl { position: relative; }
.suchwahl .such-eingabe { width: 100%; padding-right: 42px; }
.suchwahl .such-weg {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
appearance: none; border: 0; background: none; cursor: pointer;
color: var(--ash); font-size: 15px; line-height: 1;
width: 34px; height: 34px; border-radius: 50%;
}
.suchwahl .such-weg:hover { background: var(--frost); color: var(--ink); }
/* Gesperrt heißt gesperrt — auch beim Wegnehmen der Wahl. */
.suchwahl.gesperrt .such-weg { display: none; }
.such-liste {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 262px; overflow-y: auto; padding: 5px;
}
.such-zeile { padding: 9px 11px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.such-zeile:hover, .such-zeile.auf { background: var(--frost); }
.such-zeile .t { font-size: 14.5px; }
.such-zeile .s { font-size: 12.5px; }
.such-leer { padding: 12px; font-size: 13.5px; color: var(--mist); }
/* „Mehr" — der Überlauf der Navigation */
.nav .nav-mehr { color: var(--ash); }
.nav-mehr-ic { line-height: 0; color: var(--ash); flex: none; }
.nav-mehr-ic .sym { width: 20px; height: 20px; }
.rows .row.on { background: var(--frost); }
.rows .check-row { gap: 12px; align-items: center; cursor: pointer; min-height: 46px; }
.rows .check-row.aus { opacity: .45; }
.nav-anpassen { font-size: 13.5px; min-height: 34px; display: inline-flex; align-items: center; }
.eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--accent-line); margin-bottom: var(--sp-2);
}
.section-title {
font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--mist); display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-3);
}
.section-title:after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ============================================================
2 · Flächen
============================================================ */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-card); padding: var(--sp-6);
}
.card { min-width: 0; }
.card.tight { padding: var(--sp-4); }
.card.flat { background: transparent; border-color: transparent; padding: 0; }
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-head h3 { flex: 1; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .num { font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.stat .lbl { font-size: 13px; color: var(--ash); }
.stat .sub { font-size: 12px; color: var(--mist); }
/* Kacheln im Bearbeiten-Modus: Titel oben, Werkzeuge darunter.
Muss auch in einer Viertel-Breite-Kachel sauber umbrechen. */
.kachel-bearbeiten { display: flex; flex-direction: column; gap: var(--sp-3); }
.kachel-kopf h3 { line-height: 1.25; }
.kachel-info { font-size: 13px; color: var(--mist); margin-top: 4px; }
.kachel-werkzeuge {
display: flex; align-items: center; gap: var(--sp-2);
flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-2);
border-top: 1px solid var(--line-soft);
}
.kachel-werkzeuge .schieben { display: flex; gap: 4px; flex: none; }
.kachel-werkzeuge .icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; }
.kachel-werkzeuge .icon-btn:disabled { opacity: .3; cursor: default; background: none; }
.kachel-werkzeuge .entfernen { color: var(--fehler); margin-left: 10px; }
.kachel-werkzeuge .entfernen:hover { background: var(--fehler-bg); border-color: var(--fehler); }
.kachel-werkzeuge .breite-wahl {
flex: 1 1 128px; min-width: 128px; width: auto; max-width: 100%;
font-size: 13px; padding: 7px 30px 7px 10px; border-radius: 8px;
}
.empty { text-align: center; color: var(--mist); padding: var(--sp-8) var(--sp-4); font-size: 14px; }
.empty .big { font-size: 17px; color: var(--ash); font-weight: 300; margin-bottom: 6px; }
/* ============================================================
3 · Aktionen — genau eine gefüllte Farbe
============================================================ */
.btn {
appearance: none; font: inherit; font-size: 15px; letter-spacing: -.014em;
border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer;
border: 1px solid transparent; background: transparent; color: var(--accent-line);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: background .15s, opacity .15s; white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 400; }
.btn-primary:hover:not(:disabled) { opacity: .86; }
.btn-outline { border-color: var(--accent-line); color: var(--accent-line); }
.btn-outline:hover:not(:disabled) { background: var(--accent-soft); }
.btn-quiet { color: var(--ash); border-color: var(--line); }
.btn-quiet:hover:not(:disabled) { background: rgba(0,0,0,.04); color: var(--ink); }
.btn-ghost { padding: 6px 10px; color: var(--accent-line); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn-danger { color: var(--fehler); border-color: var(--line); }
.btn-danger:hover:not(:disabled) { background: var(--fehler-bg); border-color: var(--fehler); }
.btn-sm { font-size: 13px; padding: 6px 14px; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.tag {
display: inline-flex; align-items: center; gap: 5px;
border-radius: var(--r-pill); padding: 3px 11px; font-size: 12px; letter-spacing: -.01em;
background: var(--pebble); color: var(--ash); white-space: nowrap;
}
.tag.ok { background: var(--gut-bg); color: var(--gut); }
.tag.warn { background: var(--hinweis-bg); color: var(--hinweis); }
.tag.bad { background: var(--fehler-bg); color: var(--fehler); }
.tag.accent { background: var(--accent-soft); color: var(--accent-line); }
/* ============================================================
4 · Felder
============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 12px; color: var(--ash); letter-spacing: -.006em; }
.field .hint { font-size: 12px; color: var(--mist); }
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local], input[type=url],
input[type=number], input[type=search], input[type=color], select, textarea {
font: inherit; font-size: 16px; /* 16px verhindert das Zoomen auf iOS */
letter-spacing: -.014em;
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-input);
background: var(--surface); color: var(--ink); width: 100%;
transition: border-color .15s, box-shadow .15s;
}
/* ALLE Eingaben gleich hoch und gleich breit — auch die, die der
Browser selbst zeichnet.
Safari auf dem iPhone behandelt Datums-, Zeit- und Auswahlfelder
anders als Textfelder: sie richten sich nach ihrem INHALT statt
nach ihrem Kasten, werden dadurch schmaler und ein paar Pixel
flacher — und in einem Formular mit acht Feldern sieht man
genau das. `min-width: 0` nimmt der Inhaltsbreite den Vorrang,
`appearance: none` die eingebaute Darstellung, und eine
gemeinsame Mindesthöhe macht aus acht verschiedenen Kästen acht
gleiche.
Am Rechner ändert sich dadurch nichts — dort waren sie schon
gleich. Das ist der Grund, warum es niemandem aufgefallen ist,
der nicht mit dem Telefon davorsteht. */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local], input[type=url],
input[type=number], input[type=search], select {
min-width: 0;
box-sizing: border-box;
/* Eine feste Zeilenhöhe statt einer, die sich der Browser je
Feldart selbst ausdenkt: 24 px Inhalt + 2 × 10 px Polster +
2 × 1 px Rahmen sind bei JEDEM Feld 46 px. Ohne sie sind
Datumsfelder 44 und Zeitfelder 45 — zwei Pixel, die man in
einer Spalte aus acht Feldern sieht. */
line-height: 24px;
min-height: 46px;
}
/* Datums- und Zeitfelder zeichnet der Browser selbst und gibt
ihrem Inneren eigene Maße. Eine feste Höhe ohne senkrechtes
Polster nimmt ihm die Entscheidung ab: dann sind sie so hoch
wie jedes Textfeld daneben, in jedem Browser. */
input[type=date], input[type=time], input[type=datetime-local] {
-webkit-appearance: none; appearance: none;
height: 46px; padding-top: 0; padding-bottom: 0;
}
/* Safari setzt den Wert eines Datumsfeldes mittig und schiebt das
Kalendersymbol daneben — links ausgerichtet steht er wie in
jedem anderen Feld auch. */
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value {
text-align: left;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { margin-left: auto; }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; box-sizing: border-box; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=color] { padding: 4px; height: 42px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; min-height: 34px; min-width: 34px; }
.check input { appearance: none; width: 22px; height: 22px; flex: none; margin: 0;
border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; position: relative; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked:after {
content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Der Schalter selbst ist 26 Pixel hoch — das sieht richtig aus, ist
als Trefferfläche aber zu wenig. Das Etikett drumherum bekommt
deshalb die Höhe, die der Daumen braucht; angeklickt wird ohnehin
das ganze Etikett. */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 34px; }
@media (pointer: coarse) { .switch { min-height: 44px; } }
.switch input { appearance: none; width: 44px; height: 26px; border-radius: var(--r-pill);
background: var(--pebble); position: relative; margin: 0; cursor: pointer; transition: background .18s; }
.switch input:after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked { background: var(--accent); }
.switch input:checked:after { left: 21px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid .w2 { grid-column: span 2; }
.searchbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
/* ---- Filterleiste ----
Der Knopf sieht aus wie die übrigen ruhigen Knöpfe, solange nichts
gesetzt ist, und färbt sich, sobald etwas greift. Die Zahl daneben
sagt, wie viel — man muss nicht aufklappen, um das zu wissen. */
.filter-knopf.an { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-line); }
.filter-zahl {
min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
background: var(--accent); color: var(--on-accent);
}
.filter-kasten {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--sp-3) var(--sp-4);
padding: var(--sp-4); margin-bottom: var(--sp-4);
border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.filter-kasten[hidden] { display: none; }
.filter-feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-feld > input, .filter-feld > select, .filter-feld > button { width: 100%; }
/* Ein Feld mit Vorschlagsliste: das datalist selbst ist unsichtbar,
der Kasten drumherum darf die Breite nicht verlieren. */
.filter-mit-liste { display: block; }
.filter-mit-liste > input { width: 100%; }
.filter-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.filter-hinweis { font-size: 12px; color: var(--muted); }
/* Zugeklappt bleibt sichtbar, was gilt — sonst rätselt man, warum
von dreihundert Kunden noch vier da sind. */
.filter-marken { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filter-marken:empty { display: none; }
.filter-marke {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; min-height: 30px;
border: 1px solid var(--accent); border-radius: var(--r-pill);
background: var(--accent-soft); color: var(--accent-line);
font-size: 13px; cursor: pointer;
}
.filter-marke:hover { background: var(--pebble); }
.filter-weg { font-size: 12px; opacity: .7; }
.filter-alle { border-color: var(--line); background: transparent; color: var(--muted); }
.searchbar input, .searchbar select { width: auto; min-width: 160px; flex: 0 1 auto; font-size: 15px; padding: 8px 12px; }
.searchbar .grow { flex: 1 1 200px; min-width: 0; }
/* ============================================================
5 · Listen und Tabellen
============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th {
text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--mist); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.list td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover { background: var(--frost); }
table.list td.right, table.list th.right { text-align: right; }
table.list .mono { font-variant-numeric: tabular-nums; color: var(--ash); white-space: nowrap; }
.strong { color: var(--ink); font-weight: 500; }
.muted { color: var(--mist); }
.rows { display: flex; flex-direction: column; }
.row {
display: flex; align-items: center; gap: var(--sp-3);
padding: 12px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.row:last-child { border-bottom: none; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 15px; }
.row .s { font-size: 13px; color: var(--mist); }
.row .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.person { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3);
border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); cursor: pointer; }
.person:hover { border-color: var(--mist); }
.person .ini { width: 40px; height: 40px; border-radius: 50%; flex: none;
background: var(--pebble); color: var(--ash); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
/* ============================================================
6 · Sheet (Bearbeiten) — auf dem Handy von unten
============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 60;
opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet {
position: fixed; z-index: 61; background: var(--surface);
top: 0; right: 0; bottom: 0; width: min(560px, 100%);
border-left: 1px solid var(--line);
display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.sheet.wide { width: min(920px, 100%); }
.sheet.on { transform: none; }
.sheet-head {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); flex: none;
}
.sheet-head h2 { flex: 1; min-width: 0; font-size: 19px; }
/* Der weiche Rand unten sagt, dass noch etwas kommt. Ohne ihn endet
das Blatt scheinbar mit dem letzten sichtbaren Feld, und was
darunter steht, sucht niemand. */
.sheet-body {
flex: 1; overflow: auto; padding: var(--sp-5); -webkit-overflow-scrolling: touch;
background:
linear-gradient(var(--surface) 30%, rgba(255,255,255,0)) top / 100% 22px no-repeat local,
linear-gradient(rgba(255,255,255,0), var(--surface) 70%) bottom / 100% 22px no-repeat local,
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.10), rgba(0,0,0,0)) top / 100% 10px no-repeat scroll,
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.10), rgba(0,0,0,0)) bottom / 100% 10px no-repeat scroll;
}
.sheet-foot {
flex: none; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line);
display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
background: var(--surface);
}
.icon-btn { appearance: none; border: 0; background: none; cursor: pointer; color: var(--ash);
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; flex: none; }
.icon-btn:hover { background: rgba(0,0,0,.05); color: var(--ink); }
/* ============================================================
7 · Klappbare Abschnitte (Formulare)
============================================================ */
.acc { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); margin-bottom: var(--sp-3); overflow: hidden; }
.acc-head {
display: flex; align-items: center; gap: var(--sp-3); width: 100%;
padding: 14px var(--sp-4); background: none; border: 0; font: inherit; cursor: pointer; text-align: left;
}
.acc-head:hover { background: var(--frost); }
.acc-head .ic { font-size: 17px; flex: none; }
.acc-head .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.acc-head .n { font-size: 12px; color: var(--mist); font-variant-numeric: tabular-nums; }
.acc-head .chev { color: var(--mist); transition: transform .2s; flex: none; }
.acc.open .acc-head .chev { transform: rotate(90deg); }
.acc-body { display: none; padding: 0 var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); }
.acc.open .acc-body { display: block; }
.progress { height: 3px; background: var(--pebble); border-radius: var(--r-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.photo { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--pebble); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%;
background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer; font-size: 13px; line-height: 1; }
.photo-add {
display: grid; place-items: center; aspect-ratio: 4/3; border: 1px dashed var(--line);
border-radius: 8px; color: var(--mist); font-size: 13px; cursor: pointer; background: var(--frost); text-align: center; padding: 8px;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent-line); }
/* ============================================================
Wissensdatenbank
Die Suche ist die Hauptsache und sieht auch so aus.
============================================================ */
.wissen-suche { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
/* Die Lupe liegt IM Feld, also braucht sie einen eigenen Bezugsrahmen —
sonst rutscht sie weg, sobald die Zeile am Handy umbricht. */
.wissen-feldbox { position: relative; flex: 1 1 240px; min-width: 0; display: flex; }
.wissen-lupe {
position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
display: inline-flex; pointer-events: none; color: var(--mist);
}
.wissen-lupe .sym { width: 19px; height: 19px; }
input.wissen-feld {
flex: 1 1 auto; min-width: 0; font-size: 17px; padding: 14px 16px 14px 44px;
border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
}
input.wissen-feld:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
/* Dieselbe Suche, aber in einer Kachel — dort wäre die große
Seitenvariante zu wuchtig neben den anderen Kacheln. */
input.wissen-feld-k { font-size: 15px; padding: 10px 14px 10px 40px; }
.wissen-feldbox-k .wissen-lupe { left: 13px; }
.wissen-feldbox-k .wissen-lupe .sym { width: 17px; height: 17px; }
/* Der Ausschnitt in der Kachel bleibt einzeilig; soll dabei
nicht wie ein Textmarker wirken, sondern nur betonen. */
.wissen-k-aus mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.wissen-zahl { font-size: 13px; margin-bottom: var(--sp-2); }
.wissen-treffer { display: flex; flex-direction: column; gap: var(--sp-2); }
.wissen-t {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
padding: var(--sp-4); cursor: pointer; transition: border-color .15s;
}
.wissen-t:hover { border-color: var(--accent); }
.wissen-t-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wissen-t-kopf h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; color: var(--accent-line); }
.wissen-t-aus { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.wissen-t-aus mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.wissen-t-fuss { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 13px; }
.wissen-t-fuss .quelle { color: var(--accent-line); }
.wissen-text { white-space: pre-wrap; font-size: 16px; line-height: 1.65; }
/* ============================================================
Dokumentfenster — PDFs ansehen statt herunterladen
============================================================ */
.doku {
position: fixed; inset: 24px; z-index: 60;
display: flex; flex-direction: column;
background: var(--surface); border-radius: 16px; overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,.28);
opacity: 0; transform: scale(.985); transition: opacity .18s, transform .18s;
}
.doku.on { opacity: 1; transform: none; }
.doku[hidden] { display: none; }
.doku-kopf {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); flex: none;
}
.doku-kopf h2 { flex: 1; min-width: 0; font-size: 17px; letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doku-werkzeuge { display: flex; gap: var(--sp-2); flex: none; }
.doku-body { flex: 1; min-height: 0; background: var(--pebble); }
.doku-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.doku-mobil { display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--sp-4); height: 100%; padding: var(--sp-6); text-align: center; background: var(--surface); }
/* Eingebettete Vorschau in der Artikelansicht */
.pdf-rahmen {
border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
background: var(--pebble); height: min(70vh, 780px);
}
.pdf-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdf-kopf { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.pdf-kopf .grow { min-width: 0; }
@media (max-width: 760px) {
.doku { inset: 0; border-radius: 0; }
.pdf-rahmen { height: auto; }
}
/* PDF ablegen */
.wissen-ablage {
display: flex; align-items: center; gap: var(--sp-3);
border: 1px dashed var(--line); border-radius: var(--r-card);
padding: var(--sp-4); margin-bottom: var(--sp-3);
background: var(--frost); transition: border-color .15s, background .15s;
}
.wissen-ablage.klein { padding: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.wissen-ablage .sym-wrap .sym { width: 22px; height: 22px; }
.wissen-ablage.zieht, .wissen-flaeche.zieht .wissen-ablage {
border-color: var(--accent); border-style: solid; background: var(--accent-soft);
}
/* Zieht jemand über die Seite, hebt sich die ganze Fläche ab —
man zielt beim Ziehen selten genau auf den Kasten. */
.wissen-flaeche { border-radius: var(--r-card); transition: outline-color .15s; outline: 2px solid transparent; outline-offset: 8px; }
.wissen-flaeche.zieht { outline-color: var(--accent); }
.wissen-arbeit {
font-size: 13px; color: var(--accent-line); margin: calc(var(--sp-3) * -1) 0 var(--sp-3);
}
button.link {
appearance: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
color: var(--accent-line); text-decoration: underline;
}
@media (max-width: 640px) {
.wissen-suche { flex-wrap: wrap; }
.wissen-suche > .btn { width: 100%; }
input.wissen-feld { font-size: 16px; }
}
/* Anhänge an Aufgaben */
.sym-wrap { display: inline-flex; flex: none; color: var(--ash); }
.sym-wrap .sym { width: 18px; height: 18px; }
.anhang-zahl { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--ash); font-size: 13px; }
.anhang-zahl .sym { width: 15px; height: 15px; }
/* ---- Wiederkehrende Aufgaben ------------------------------
Die Wochentage sind Schalter, keine Mehrfachauswahl in einem
Listenfeld: am Handy ist „Mo Di Mi“ zum Antippen deutlich
schneller als eine aufgeklappte Liste mit Strg-Taste. */
.wtage { display: flex; flex-wrap: wrap; gap: 6px; }
.wtag {
min-width: 44px; height: 36px; padding: 0 12px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--surface); color: var(--ink);
font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wtag:hover { border-color: var(--mist); }
.wtag.an { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wtag:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.wdh-zeile { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wdh-zeile input[type="number"] { width: 88px; flex: none; }
.wdh-zeile select { flex: 1 1 150px; min-width: 0; }
.wdh-zeile > span { color: var(--ash); font-size: 14px; }
/* ============================================================
7a2 · Kalender
------------------------------------------------------------
Das Monatsraster trägt am Rechner die Termine im Klartext. Am
Handy ist dafür kein Platz — dort bleiben Punkte stehen, und
der angetippte Tag klappt darunter als Liste auf. Ein Raster
mit sieben Spalten quer zu scrollen wäre auf dem Bau keine
Bedienung.
============================================================ */
.kal-kopf { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* Ohne Breitenbegrenzung nimmt sich jedes Auswahlfeld die ganze
Zeile und die Kopfleiste wird zum Formular. */
.kal-kopf select { width: auto; min-width: 132px; flex: 0 0 auto; font-size: 15px; padding: 8px 12px; }
.kal-kopf .btn { flex: 0 0 auto; }
.kal-kopf .grow { flex: 1 1 12px; min-width: 0; }
.kal-monat { font-size: 20px; font-weight: 600; letter-spacing: -.02em; min-width: 168px; }
.kal-pfeile { display: inline-flex; gap: 6px; }
.kal-woche {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
border-bottom: 1px solid var(--line-soft);
}
/* Kalenderwochen: eine schmale Spalte links, abschaltbar in der
Verwaltung. Wer nach KW plant, plant nur nach KW. */
.kal-woche.mit-kw, .kal-raster.mit-kw { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); }
.kal-woche .kw { color: var(--mist); }
.kal-kw {
border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
display: flex; align-items: flex-start; justify-content: center;
padding-top: 6px; font-size: 12px; color: var(--mist);
font-variant-numeric: tabular-nums; background: var(--frost); cursor: pointer;
}
.kal-kw:hover { color: var(--accent-line); }
.kal-woche > div {
padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 600;
color: var(--mist); text-transform: uppercase; letter-spacing: .04em;
}
.kal-raster {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
}
.kal-tag {
border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
min-height: 108px; padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 3px;
background: var(--surface); cursor: pointer; min-width: 0;
}
.kal-tag:hover { background: var(--frost); }
.kal-tag.fremd { background: #fbfbfd; }
.kal-tag.fremd .kal-zahl { color: var(--mist); }
.kal-tag.gewaehlt { background: var(--accent-soft); }
.kal-zahl {
font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ash);
align-self: flex-start; line-height: 22px; min-width: 22px; text-align: center;
}
.kal-tag.heute .kal-zahl {
background: var(--accent); color: var(--on-accent); border-radius: 999px; font-weight: 600;
}
.kal-chip {
display: flex; align-items: baseline; gap: 5px; min-width: 0;
font-size: 12px; line-height: 1.35; padding: 2px 6px; border-radius: 6px;
background: var(--frost); color: var(--ink); border-left: 3px solid var(--line);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.kal-chip .zeit { color: var(--ash); font-variant-numeric: tabular-nums; flex: none; }
.kal-chip .txt { overflow: hidden; text-overflow: ellipsis; }
.kal-chip.erledigt .txt { text-decoration: line-through; color: var(--mist); }
.kal-mehr { font-size: 12px; color: var(--ash); padding: 0 6px; }
/* Die Farben sind eine feste kleine Auswahl. Ein Farbrad würde
jeden Kalender nach drei Wochen zum Tortendiagramm machen.
Jede Klasse setzt eine Variable — dieselbe Farbe trägt damit
den Balken im Raster, den Strich in der Liste und den Punkt am
Handy, ohne dass es drei Listen zu pflegen gäbe. */
.t-akzent { --f: var(--accent); --fw: var(--accent-soft); }
.t-marine { --f: #2a4b8d; --fw: rgba(42,75,141,.10); }
.t-blau { --f: #3b73d6; --fw: rgba(59,115,214,.10); }
.t-tuerkis { --f: #1a9c9c; --fw: rgba(26,156,156,.11); }
.t-gruen { --f: #1d8a5c; --fw: rgba(29,138,92,.10); }
.t-oliv { --f: #6b8f2e; --fw: rgba(107,143,46,.12); }
.t-senf { --f: #a58400; --fw: rgba(165,132,0,.13); }
.t-orange { --f: #b3701a; --fw: rgba(179,112,26,.12); }
.t-terrakotta { --f: #b3563c; --fw: rgba(179,86,60,.11); }
.t-rot { --f: #c7362c; --fw: rgba(199,54,44,.10); }
.t-bordeaux { --f: #8f2540; --fw: rgba(143,37,64,.10); }
.t-pink { --f: #bf3f87; --fw: rgba(191,63,135,.11); }
.t-lila { --f: #7a5cc4; --fw: rgba(122,92,196,.12); }
.t-braun { --f: #7a5c46; --fw: rgba(122,92,70,.12); }
.t-schiefer { --f: #4a5568; --fw: rgba(74,85,104,.11); }
.t-grau { --f: #86868b; --fw: rgba(134,134,139,.12); }
.t-aufgabe { --f: var(--ash); --fw: transparent; }
/* Mitarbeiterfilter */
.leute-knopf { display: inline-flex; align-items: center; gap: 7px; }
.leute-knopf .sym { width: 16px; height: 16px; }
.leute-knopf.an { border-color: var(--accent); color: var(--accent-line); }
/* Anzeige der geltenden Farbe im Terminblatt — gewählt wird sie
dort nicht mehr, sie kommt von der Gruppe. */
.farb-spiegel { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ash); min-height: 40px; }
.farb-punkt { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--f, var(--line)); }
/* Farbwähler: ein Raster aus Feldern statt einer Liste mit Namen.
Bei sechzehn Farben ist Sehen schneller als Lesen. */
.farbwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.farbwahl button {
width: 34px; height: 34px; padding: 0; flex: none; cursor: pointer;
border-radius: 9px; border: 1px solid rgba(0,0,0,.10);
background: var(--f, var(--line));
transition: transform .12s ease, box-shadow .12s ease;
}
.farbwahl button:hover { transform: scale(1.06); }
.farbwahl button[aria-pressed="true"] {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--f);
}
.farbwahl button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }
@media (pointer: coarse) { .farbwahl button { width: 40px; height: 40px; } }
/* Jeder Farbklasse ihre Wirkung — außer der gestrichelten Aufgabe,
die gleich darunter überschrieben wird. */
.kal-chip[class*="t-"] { border-left-color: var(--f, var(--line)); background: var(--fw, var(--frost)); }
/* Eine fällige Aufgabe ist kein Termin — gestrichelt statt gefüllt. */
.kal-chip.t-aufgabe { border-left-color: var(--ash); background: transparent; border-left-style: dashed; }
.kal-punkte { display: none; gap: 3px; flex-wrap: wrap; justify-content: center; padding-top: 2px; }
.kal-punkt { width: 6px; height: 6px; border-radius: 999px; background: var(--f, var(--line)); }
.kal-punkt.p-akzent { --f: var(--accent); }
.kal-punkt.p-blau { --f: #3b73d6; }
.kal-punkt.p-gruen { --f: #1d8a5c; }
.kal-punkt.p-orange { --f: #b3701a; }
.kal-punkt.p-rot { --f: #c7362c; }
.kal-punkt.p-lila { --f: #7a5cc4; }
.kal-punkt.p-grau { --f: #86868b; }
.kal-punkt.p-aufgabe{ background: transparent; border: 1.5px solid var(--ash); }
/* ---- Zeitgitter: Woche und Tag ----------------------------
Der Kopf mit den Tagen steht fest, nur das Raster darunter
rollt. Sonst verliert man beim Scrollen die Zuordnung, welche
Spalte welcher Tag ist. */
.zg-rolle { overflow-x: auto; }
.zg { min-width: 660px; }
.zg.zg-eintag { min-width: 0; }
.zg-kopf, .zg-ganztag { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.zg-eintag .zg-kopf, .zg-eintag .zg-ganztag { grid-template-columns: 56px minmax(0, 1fr); }
.zg-ecke { display: flex; align-items: flex-end; justify-content: center; padding: 0 4px 8px;
font-size: 11px; color: var(--mist); font-variant-numeric: tabular-nums; }
.zg-tagkopf {
padding: 8px 4px; text-align: center; cursor: pointer;
border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 1px;
}
.zg-tagkopf:hover { background: var(--frost); }
.zg-tagkopf .wt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.zg-tagkopf .zahl { font-size: 17px; font-variant-numeric: tabular-nums; }
.zg-tagkopf.heute .zahl { color: var(--accent-line); font-weight: 600; }
.zg-ganztag { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); }
.zg-gt-kante { font-size: 11px; color: var(--mist); padding: 6px 6px 0 0; text-align: right; }
.zg-gt-tag { border-left: 1px solid var(--line-soft); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 30px; }
.zg-gt-tag.heute { background: var(--accent-soft); }
.zg-scroll { max-height: 62vh; overflow-y: auto; position: relative; }
.zg-fest { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.zg-koerper { display: flex; position: relative; }
.zg-zeiten { width: 56px; flex: none; }
.zg-stunde { position: relative; }
.zg-stunde span {
position: absolute; top: -8px; right: 8px; font-size: 11px;
color: var(--mist); font-variant-numeric: tabular-nums;
}
.zg-spalten { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1 1 auto; min-width: 0; }
.zg-eintag .zg-spalten { grid-template-columns: minmax(0, 1fr); }
.zg-tag { position: relative; border-left: 1px solid var(--line-soft); min-width: 0; }
.zg-tag.heute { background: rgba(40, 208, 184, .04); }
.zg-linie { border-top: 1px solid var(--line-soft); }
.zg-block {
position: absolute; overflow: hidden; border-radius: 7px; padding: 3px 6px;
font-size: 12px; line-height: 1.3; cursor: pointer;
background: var(--fw, var(--frost)); border-left: 3px solid var(--f, var(--line));
box-shadow: 0 0 0 1px rgba(255,255,255,.9);
}
.zg-block .zeit { color: var(--ash); font-variant-numeric: tabular-nums; font-size: 11px; }
.zg-block .txt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-block .ort { color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-block:hover { filter: brightness(.97); }
/* Die Linie „jetzt". Bewusst der Akzent und nicht Rot: Rot heißt
in dieser Oberfläche überall Fehler. */
.zg-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); pointer-events: none; z-index: 2; }
.zg-jetzt:before {
content: ""; position: absolute; left: -4px; top: -3px;
width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
}
/* Ziehen */
.ziehbar { touch-action: pan-y; }
.zieht { opacity: .85; box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 5; }
body.zieht-gerade { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.zieht-gerade .zg-block, body.zieht-gerade .kal-chip { cursor: grabbing; }
/* Zeitspalte in den Tageskacheln */
.zeitspalte {
flex: none; min-width: 74px; font-size: 13px; color: var(--ash);
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.zg-scroll { max-height: 56vh; }
.zg-kopf, .zg-ganztag { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.zg-eintag .zg-kopf, .zg-eintag .zg-ganztag { grid-template-columns: 44px minmax(0, 1fr); }
.zg-zeiten { width: 44px; }
.zeitspalte { min-width: 64px; font-size: 12px; }
}
/* Filterleiste: Gruppen, Abos und Aufgaben ein- und ausblenden.
Sie ist zugleich die Legende — zwei Reihen mit denselben Namen
nebeneinander wären Verschwendung. */
.kal-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); align-items: center; }
.kal-f {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 13px; min-height: 34px;
border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--surface); color: var(--ink);
font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
transition: opacity .15s ease, border-color .15s ease;
}
.kal-f:hover { border-color: var(--mist); }
.kal-f i { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--f, var(--mist)); }
.kal-f i.leer { background: var(--mist); }
.kal-f i.offen { background: transparent; border: 1.5px dashed var(--ash); border-radius: 3px; }
.kal-f.aus { opacity: .45; }
.kal-f.aus span { text-decoration: line-through; }
.kal-f:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
@media (pointer: coarse) {
.kal-f { min-height: 40px; padding: 8px 14px; }
}
/* Tagesliste unter dem Raster */
.kal-tagesliste { margin-top: var(--sp-4); }
.kal-tagestitel { font-size: 15px; font-weight: 600; margin-bottom: var(--sp-2); }
.kal-strich { width: 4px; align-self: stretch; min-height: 30px; border-radius: 999px; background: var(--f, var(--line)); flex: none; }
@media (max-width: 640px) {
.kal-woche.mit-kw, .kal-raster.mit-kw { grid-template-columns: 28px repeat(7, minmax(0, 1fr)); }
.kal-kw { font-size: 11px; padding-top: 4px; }
.kal-tag { min-height: 62px; align-items: center; gap: 2px; padding: 5px 2px; }
.kal-zahl { align-self: center; }
/* Nur im Monatsraster: dort ist kein Platz für Text. Im
Zeitgitter bleiben die Ganztagsstreifen sichtbar. */
.kal-tag .kal-chip, .kal-tag .kal-mehr { display: none; }
.kal-punkte { display: flex; }
.kal-monat { min-width: 0; font-size: 18px; }
}
@media (pointer: coarse) {
.kal-tag { min-height: 64px; }
}
/* Urheberzeile oben in einem Blatt: wer hat das gestellt? */
.urheber {
display: flex; align-items: center; gap: var(--sp-3);
padding: 12px 14px; margin-bottom: var(--sp-4);
background: var(--frost); border-radius: var(--r-card);
}
.urheber-kreis {
width: 38px; height: 38px; flex: none; border-radius: 999px;
background: var(--accent); color: var(--on-accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.urheber-name { font-size: 15px; font-weight: 600; }
.urheber-wann { font-size: 13px; color: var(--ash); }
/* Überschrift über einer Gruppe verfügbarer Kacheln */
.kachel-gruppe {
font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--mist); margin: var(--sp-4) 0 var(--sp-2);
}
.kachel-gruppe:first-of-type { margin-top: var(--sp-2); }
/* ---- Rechte im Mitarbeiterblatt ---------------------------
Nach Bereichen gebündelt statt als eine Liste aus zwanzig
Häkchen: erst dadurch sieht man, was zusammengehört. */
.recht-block { border: 1px solid var(--line-soft); border-radius: var(--r-card); margin-bottom: var(--sp-2); overflow: hidden; }
.recht-kopf {
display: flex; align-items: center; gap: var(--sp-2);
padding: 9px 12px; background: var(--frost); border-bottom: 1px solid var(--line-soft);
}
.recht-kopf .recht-name { font-weight: 600; font-size: 14px; flex: 1 1 auto; min-width: 0; }
.recht-kopf .recht-zahl { font-size: 12px; color: var(--ash); font-variant-numeric: tabular-nums; flex: none; }
.recht-kopf .btn { flex: none; }
.recht-liste { padding: 4px 12px 8px; }
.recht-zeile { padding: 3px 0; }
/* ============================================================
7b · Verwaltung: Bereiche
============================================================ */
.bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.bereich {
display: flex; align-items: center; gap: var(--sp-3); text-align: left;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
padding: var(--sp-4); cursor: pointer; font: inherit; color: inherit; width: 100%;
transition: border-color .15s, background .15s;
}
.bereich:hover { border-color: var(--mist); background: var(--frost); }
.bereich-sym { flex: none; color: var(--ash); display: grid; place-items: center; width: 26px; }
.bereich-sym .sym { width: 22px; height: 22px; }
.bereich-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bereich-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.bereich-info { font-size: 13px; color: var(--mist); }
.bereich-pfeil { flex: none; color: var(--mist); font-size: 18px; }
/* ============================================================
7c · Schnellzugriffe über den Kacheln
============================================================ */
.schnellzugriffe { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.kurz {
display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
padding: 9px 16px 9px 13px; cursor: pointer; color: var(--ink); white-space: nowrap;
transition: border-color .15s, background .15s;
}
.kurz:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-line); }
.kurz .sym { width: 17px; height: 17px; color: var(--accent-line); }
.kurz-wahl { opacity: .55; }
.kurz-wahl.an { opacity: 1; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-line); }
/* Voll: der Knopf bleibt sichtbar, damit man weiß, dass es ihn gibt —
nur nicht anklickbar, solange oben kein Platz frei ist. */
.kurz-wahl.aus { opacity: .3; cursor: not-allowed; }
.kopf-wahl { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Überschriften in der Tageskachel. Klein und ruhig: sie sollen die
Liste gliedern, nicht mit ihr um Aufmerksamkeit streiten. Die Zahl
daneben beantwortet die Frage, die man beim Überfliegen stellt —
„wie viel ist das?" — ohne zu zählen. */
.tages-gruppe {
display: flex; align-items: center; gap: var(--sp-2);
margin: var(--sp-4) 0 var(--sp-1);
font-size: 12px; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted);
}
.tages-gruppe:first-child { margin-top: 0; }
.tages-gruppe-zahl {
font-weight: 500; letter-spacing: 0;
padding: 1px 7px; border-radius: 999px;
background: var(--pebble); color: var(--muted);
}
/* Schnellzugriffe umsortieren: derselbe Griff wie bei den Kacheln. */
.kurz-reihe { margin-bottom: var(--sp-4); }
.kurz-sortier { padding: 6px 8px 6px 6px; cursor: default; touch-action: none; }
.kurz-sortier:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.kurz-sortier.zieht { opacity: .9; box-shadow: 0 8px 22px rgba(0,0,0,.16); z-index: 5; position: relative; }
.kurz-griff {
appearance: none; border: 0; background: none; padding: 0; cursor: grab;
color: var(--mist); line-height: 0; width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.kurz-griff:hover { background: var(--frost); color: var(--ink); }
.kurz-griff:active { cursor: grabbing; }
.kurz-griff .sym { width: 16px; height: 16px; color: inherit; }
.kurz-sym { line-height: 0; }
.kurz-weg {
appearance: none; border: 0; background: none; cursor: pointer; color: var(--ash);
font-size: 14px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; flex: none;
}
.kurz-weg:hover { background: var(--frost); color: var(--ink); }
/* ============================================================
7d · Kacheln verschieben
============================================================ */
.kachel-griff {
display: flex; align-items: center; gap: 8px; margin: -4px -4px var(--sp-2);
padding: 6px 8px; border-radius: 8px; cursor: grab; color: var(--mist);
touch-action: none; user-select: none; -webkit-user-select: none;
background: none; border: 0; font: inherit; width: calc(100% + 8px); text-align: left;
}
.kachel-griff:hover { background: var(--frost); color: var(--ash); }
.kachel-griff:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kachel-griff .sym { width: 18px; height: 18px; flex: none; }
.kachel-griff .hinweis { font-size: 12px; letter-spacing: .04em; }
.kachel-bearbeiten { transition: box-shadow .15s, transform .06s; }
.kachel-bearbeiten.zieht {
z-index: 5; cursor: grabbing; box-shadow: 0 12px 32px rgba(0,0,0,.18);
border-color: var(--accent); background: var(--surface);
}
.kachel-bearbeiten.zieht .kachel-griff { cursor: grabbing; }
.kachel-platz { border: 1px dashed var(--accent); background: var(--accent-soft); border-radius: var(--r-card); }
/* ============================================================
8 · Rückmeldungen
============================================================ */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
padding-bottom: env(safe-area-inset-bottom); width: min(440px, calc(100% - 32px)); }
.toast {
background: var(--carbon); color: #fff; border-radius: var(--r-pill);
padding: 11px 20px; font-size: 14px; letter-spacing: -.01em; text-align: center;
box-shadow: 0 8px 28px rgba(0,0,0,.22); animation: rise .22s ease-out; max-width: 100%;
}
.toast.bad { background: var(--fehler); }
.toast.ok { background: var(--gut); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.note { border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; font-size: 14px; background: var(--surface); }
.note.warn { border-color: rgba(154,107,0,.35); background: var(--hinweis-bg); color: #7a5500; }
.note.bad { border-color: rgba(199,54,44,.35); background: var(--fehler-bg); color: #97281f; }
.note.info { background: var(--frost); color: var(--ash); }
/* Ein Hinweis, der etwas ankündigt statt zu warnen: die Probezeit
läuft, und das ist eine gute Nachricht mit einem Datum daran. */
.note.accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line);
border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--sp-8); color: var(--mist); font-size: 14px; }
/* ============================================================
9 · Anmeldung
============================================================ */
.login { min-height: 100%; display: grid; place-items: center; padding: var(--sp-5); background: var(--frost); }
.login-box { width: min(400px, 100%); text-align: center; }
.login-box .mark { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-line); }
.login-box h1 { font-size: 40px; margin: var(--sp-3) 0 var(--sp-1); letter-spacing: -.03em; }
.login-box .sub { color: var(--ash); font-size: 19px; font-weight: 300; letter-spacing: -.02em; margin-bottom: var(--sp-8); }
.login-box .fields { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.login-box .btn { width: 100%; margin-top: var(--sp-4); }
.login-foot { margin-top: var(--sp-8); font-size: 12px; color: var(--mist); }
/* ============================================================
9b · Ersteinrichtung
============================================================ */
.einrichtung-box { width: min(620px, 100%); text-align: left; }
.einrichtung-kopf { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.einrichtung-kopf .mark {
font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--accent-line); flex: 1;
}
.schritte { display: flex; gap: 8px; }
.schritt-punkt {
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
font-size: 12px; font-weight: 600; color: var(--mist);
border: 1px solid var(--line); background: var(--surface);
}
.schritt-punkt.an { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.schritt-punkt.fertig { border-color: var(--accent); color: var(--accent-line); }
.einrichtung-box h1 { font-size: 32px; letter-spacing: -.03em; margin-bottom: var(--sp-2); }
.einrichtung-box .sub { color: var(--ash); font-size: 17px; font-weight: 300; letter-spacing: -.016em; margin-bottom: var(--sp-6); }
.einrichtung-box .login-foot { text-align: left; margin-top: var(--sp-6); }
@media (max-width: 640px) {
.einrichtung-box h1 { font-size: 26px; }
.einrichtung-box .sub { font-size: 15px; }
.einrichtung-box .btn-row { justify-content: stretch !important; }
.einrichtung-box .btn-row .btn { flex: 1; }
}
/* ============================================================
10 · Handy
============================================================ */
@media (max-width: 860px) {
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-3, .span-4 { grid-column: span 2; }
.form-grid { grid-template-columns: 1fr; }
.form-grid .w2 { grid-column: span 1; }
h1 { font-size: 28px; }
.page { padding: var(--sp-5) var(--sp-4) var(--sp-10); }
}
@media (max-width: 640px) {
/* backdrop-filter macht die Kopfzeile zum Bezugsrahmen für
position:fixed – die untere Navigation bliebe sonst oben kleben. */
.grid { grid-template-columns: minmax(0, 1fr); }
.span-1, .span-2, .span-3, .span-4 { grid-column: span 1; }
.topbar-in { padding: 0 var(--sp-4); gap: var(--sp-3); }
.nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45;
background: rgba(255,255,255,.94);
border-top: 1px solid var(--line); border-bottom: none;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
justify-content: space-between; gap: 0; }
/* Höchstens fünf Knöpfe – vier Bereiche und „Mehr". Alles
nebeneinander zu quetschen endet bei 39 px je Eintrag: das liest
niemand mehr, und mit jedem Modul wird es enger. */
.nav button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
font-size: 11px; letter-spacing: -.01em; padding: 7px 2px; }
.nav .navlang { display: none; }
.nav .navkurz { display: block; width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav button.on { background: none; color: var(--accent-line); font-weight: 500; }
.nav .navic { display: block; line-height: 0; }
.nav .sym { width: 22px; height: 22px; margin: 0 auto; }
.page-segmente { margin-top: var(--sp-3); }
.segmente { display: flex; width: 100%; }
.segmente .seg { flex: 1 1 0; min-width: 0; padding: 8px 10px; min-height: 38px;
overflow: hidden; text-overflow: ellipsis; }
.page { padding-bottom: 96px; }
.sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 94vh;
border-left: 0; border-top-left-radius: 16px; border-top-right-radius: 16px;
transform: translateY(100%); }
.sheet.on { transform: none; }
.sheet-foot .btn { flex: 1; }
.card { padding: var(--sp-4); }
.toasts { bottom: 88px; }
}
@media (min-width: 641px) { .navic, .navkurz { display: none; } }
.sym { width: 22px; height: 22px; display: block; }
/* ============================================================
11 · Finger statt Maus
Zeigegeräte ohne Genauigkeit bekommen größere Schaltflächen.
Gilt für Handy und Tablet, nicht für die Maus am Schreibtisch.
============================================================ */
@media (pointer: coarse) {
.avatar { width: 40px; height: 40px; font-size: 13px; }
.btn { padding: 12px 20px; min-height: 44px; }
.btn-sm { padding: 10px 17px; min-height: 42px; }
.btn-ghost { padding: 10px 13px; min-height: 42px; }
.kachel-werkzeuge .breite-wahl { padding: 10px 30px 10px 10px; }
.check { min-height: 44px; min-width: 44px; }
.check input { width: 26px; height: 26px; border-radius: 7px; }
.check input:checked:after { left: 8px; top: 3px; width: 7px; height: 13px; }
.switch { min-height: 44px; }
.switch input { width: 52px; height: 31px; }
.switch input:after { width: 25px; height: 25px; }
.switch input:checked:after { left: 24px; }
.icon-btn { width: 44px; height: 44px; }
.kachel-werkzeuge .icon-btn { width: 44px; height: 40px; }
/* Das Entfernen-Kreuz auf einem Foto war mit 24px zu klein zum Treffen. */
.photo .x { width: 40px; height: 40px; top: 4px; right: 4px; font-size: 15px; }
.wtag { height: 44px; min-width: 48px; }
.kachel-griff { padding: 12px 10px; }
.btn-sm { padding: 9px 16px; }
.acc-head { padding: 16px var(--sp-4); }
table.list tbody tr { min-height: 44px; }
}
/* Tablet: breite Navigation, aber mit Fingermaßen */
@media (pointer: coarse) and (min-width: 641px) {
.nav button { padding: 11px 15px; }
.nav { padding-top: 6px; padding-bottom: 6px; }
}
/* ============================================================
12 · Tabellen auf dem Handy
Eine Tabelle mit sieben Spalten quer zu scrollen ist auf dem
Bau keine Bedienung. Jede Zeile wird deshalb zur Karte, die
Spaltenüberschrift steht als Beschriftung davor (data-l).
============================================================ */
/* Umschalter zwischen Tabelle und kompakter Liste */
.nur-schmal { display: none; }
/* ------------------------------------------------------------
DIE TABELLE AM TELEFON (seit 2.41.0)
------------------------------------------------------------
Bis dahin wurde am Telefon aus jeder Tabelle eine Kartenliste:
Name oben, alles Übrige klein darunter in einer Zeile. Das
liest sich gut und lässt sich NICHT sortieren — und wer im
Auto vor der Baustelle steht und den Kunden aus Bremen sucht,
will nach Ort sortieren.
Also bleibt es eine Tabelle, aber eine kürzere: Spalten mit
`schmal-weg` fallen unter 640 px heraus. Übrig bleiben die
zwei bis drei, die man auf einem Telefon wirklich liest —
samt Sortierköpfen, die dieselben sind wie am Rechner. Was
wegfällt, steht ohnehin in der Akte, und dorthin führt die
Zeile.
------------------------------------------------------------ */
@media (max-width: 640px) {
/* `bleibt-tabelle` sagt: DIESE Tabelle wird am Telefon nicht zu
Karten gestapelt. Sie steht nach den Stapelregeln weiter
unten und muss sie deshalb einzeln zurücknehmen — bei
gleicher Absicht gewinnt nicht die richtigere Regel, sondern
die spezifischere. */
table.list.bleibt-tabelle th.schmal-weg,
table.list.bleibt-tabelle td.schmal-weg { display: none; }
/* Enger stellen: am Telefon zählt jedes Pixel Breite. */
table.list.bleibt-tabelle th,
table.list.bleibt-tabelle td { padding-left: 8px; padding-right: 8px; }
table.list.bleibt-tabelle .crm-sortkopf { font-size: 12px; }
/* Die zweite Zeile in einer Namenszelle darf umbrechen — sie
trägt am Telefon, was die weggefallenen Spalten sagten. */
table.list.bleibt-tabelle .crm-namensfeld .s { white-space: normal; }
}
@media (max-width: 640px) {
.nur-breit { display: none; }
.nur-schmal { display: block; }
.bereiche { grid-template-columns: 1fr; }
.schnellzugriffe { gap: 8px; }
.kurz { flex: 1 1 calc(50% - 4px); justify-content: center; }
.kurz-sortier { flex: 1 1 100%; justify-content: flex-start; }
.nur-schmal .row { align-items: flex-start; }
.nur-schmal .row .s { white-space: normal; }
.nur-schmal .row .tag { margin-top: 3px; }
.breite-hinweis { flex: 1 1 100%; font-size: 12px; color: var(--mist); }
.searchbar { gap: var(--sp-2); }
.searchbar input, .searchbar select { flex: 1 1 calc(50% - 4px); min-width: 0; }
.searchbar .grow, .searchbar > .btn { flex: 1 1 100%; }
.table-wrap { border: none; background: none; border-radius: 0; overflow-x: visible; }
table.list { border-collapse: separate; border-spacing: 0; }
table.list thead { display: none; }
table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
table.list tr {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-card); margin-bottom: 10px; overflow: hidden;
}
table.list tbody tr:hover { background: var(--surface); }
table.list td {
display: flex; gap: var(--sp-3); align-items: baseline;
padding: 10px var(--sp-4); border-bottom: 1px solid var(--line-soft);
text-align: left !important; white-space: normal;
}
table.list td:last-child { border-bottom: none; }
table.list td:before {
content: attr(data-l); flex: 0 0 38%; min-width: 0;
font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
color: var(--mist); line-height: 1.5;
}
table.list td[data-l=""]:before { display: none; }
table.list td > * { flex: 1; min-width: 0; }
table.list .mono { white-space: normal; }
/* ---- und die Ausnahme: eine Tabelle, die Tabelle bleibt ----
Kontakte und Belege werden am Telefon sortiert — dafür
braucht es Spaltenköpfe. Alles oben Gestapelte wird hier
zurückgenommen. */
.table-wrap.bleibt { border: 1px solid var(--line); background: var(--surface);
border-radius: var(--r-card); overflow-x: auto; }
table.list.bleibt-tabelle { border-collapse: collapse; }
table.list.bleibt-tabelle thead { display: table-header-group; }
table.list.bleibt-tabelle tbody { display: table-row-group; }
table.list.bleibt-tabelle tr { display: table-row; background: none; border: none;
border-radius: 0; margin: 0; overflow: visible; }
table.list.bleibt-tabelle td, table.list.bleibt-tabelle th {
display: table-cell; width: auto; gap: 0;
border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
table.list.bleibt-tabelle td:before { display: none; }
table.list.bleibt-tabelle td > * { flex: none; }
/* Trefferflächen: die Sortierköpfe bleiben Knöpfe und müssen
die Hausgrenze halten, auch wenn die Schrift kleiner wird. */
table.list.bleibt-tabelle .crm-sortkopf { min-height: 30px; }
}
@media print {
.topbar, .nav, .sheet-foot, .btn, .toasts { display: none !important; }
body { background: #fff; }
.card { border: none; padding: 0; }
.page { max-width: none; padding: 0; }
}
/* ---------- Feedback ----------------------------------------
Zwei Knöpfe zur Auswahl statt eines Auswahlfelds: es sind genau
zwei, und beide sollen beim Öffnen sichtbar sein. */
.fb-arten { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-art {
display: flex; align-items: center; min-height: 44px; padding: 0 18px;
border: 1px solid var(--line); border-radius: 980px; background: var(--surface);
cursor: pointer; font-size: 15px; user-select: none;
}
.fb-art:hover { border-color: #b8b8be; }
.fb-art.an { border-color: var(--accent); background: var(--accent-soft); font-weight: 500; }
.fb-hinweis {
margin-top: 4px; padding: 13px 15px; border-radius: 12px;
background: var(--frost); font-size: 13px; line-height: 1.5; color: var(--ash);
}
.fb-hinweis b { color: var(--ink); }
.fb-trenner {
margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--line);
font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ash);
}
/* ---------- Notizen -----------------------------------------
Eine Wand aus Zetteln, keine Tabelle. Die Spaltenzahl richtet
sich nach der Breite, nicht nach einer festen Zahl — auf dem
Handy bleibt eine Spalte übrig, ohne eigene Regel. */
.notiz-wand {
display: grid; gap: var(--sp-4);
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.notiz {
border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
padding: 16px 17px; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
position: relative; min-height: 118px;
}
.notiz:hover { border-color: #b8b8be; }
.notiz.angeheftet { box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.notiz-nadel { position: absolute; top: 13px; right: 14px; color: var(--ash); }
.notiz-nadel .sym { width: 16px; height: 16px; }
.notiz-titel { font-weight: 600; letter-spacing: -.01em; padding-right: 22px; }
.notiz-text {
font-size: 14px; line-height: 1.5; color: var(--ash); white-space: pre-wrap;
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.notiz-fortschritt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ash); }
.notiz-fortschritt .sym { width: 15px; height: 15px; }
.notiz-fuss { margin-top: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.notiz-zeit { margin-left: auto; font-size: 12px; color: var(--mist); white-space: nowrap; }
.notiz-leiste {
display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
margin-bottom: var(--sp-4);
}
.notiz-farbleiste { display: flex; gap: 7px; flex-wrap: wrap; }
.notiz-farbwahl {
width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
background: var(--surface); cursor: pointer; padding: 0;
}
.notiz-farbwahl.ohne { background: repeating-linear-gradient(45deg, #fff, #fff 5px, #ededf0 5px, #ededf0 10px); }
.notiz-farbwahl.an { outline: 2px solid var(--accent); outline-offset: 2px; }
.notiz-farbwahl:disabled { opacity: .5; cursor: not-allowed; }
.notiz-punkte { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.notiz-punkt { display: flex; align-items: center; gap: 9px; width: 100%; }
/* Das Label ist das Tippziel, nicht das Kästchen: 20px trifft
auf dem Handy niemand zuverlässig. */
.notiz-hak {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; flex: 0 0 auto; margin-left: -8px; cursor: pointer;
}
.notiz-hak input[type=checkbox] { width: 21px; height: 21px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* ---- Auswahlkästchen in einer Tabellenzeile ----
Das Kästchen selbst ist 22 px groß — die Fläche, die auf einen
Fingertipp reagiert, 40. Ein nacktes ist
im Browser 13 px breit; das trifft am Telefon niemand
zuverlässig, und wer danebentippt, öffnet die Zeile statt sie
anzukreuzen. Deshalb steht es immer in dieser Hülle. */
.wahlzelle {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; cursor: pointer; margin: 0;
}
/* Die Spalte muss die Fläche auch hergeben: in einer engen Tabelle
schrumpft der Browser die Zelle sonst auf die Breite des
Kästchens zusammen, und die 40 px stehen nur im Stylesheet. */
/* Der Wähler steht in table.list, und dort gilt `padding: 13px 16px`
— eine Regel mit HÖHERER Gewichtung als `td.wahlspalte`. Ohne
den Tabellennamen davor blieben die 32 px Polster stehen, die
Spalte wurde 72 statt 48 px breit, und die Tabelle schob sich
über den Rand: bei 1208 px musste man seitlich scrollen.
Bei gleicher Absicht gewinnt nicht die richtigere Regel,
sondern die spezifischere. */
table.list th.wahlspalte, table.list td.wahlspalte {
width: 48px; min-width: 48px; max-width: 48px;
padding-left: 4px; padding-right: 4px; text-align: center;
}
.wahlzelle input[type=checkbox] {
width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer;
}
.notiz-punkt.ab input[type=text] { text-decoration: line-through; color: var(--mist); }
.notiz-dateien { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.notiz-datei { display: flex; align-items: center; gap: 9px; width: 100%; font-size: 14px; }
.notiz-datei .sym { width: 17px; height: 17px; color: var(--ash); flex: 0 0 auto; }
.notiz-leute { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.notiz-anheften { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.notiz-anheften input { width: 20px; height: 20px; accent-color: var(--accent); }
@media (max-width: 640px) {
.notiz-wand { grid-template-columns: 1fr; }
.notiz-leiste { gap: 10px; }
}
/* ---------- CRM ---------------------------------------------- */
.crm-art { display: inline-flex; color: var(--ash); flex: none; }
.crm-art .sym { width: 18px; height: 18px; }
.crm-art.person { color: var(--accent-line); }
.crm-kopf { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.crm-kopf h1 { margin: 6px 0 4px; }
.crm-unter { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--ash); font-size: 14px; }
/* Zwei Spalten: Stammdaten links, was passiert ist rechts. */
.crm-akte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-4); align-items: start; }
.crm-spalte { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.crm-daten-zeile { display: flex; gap: 14px; padding: 7px 0; font-size: 14px; align-items: baseline; }
.crm-label { flex: 0 0 88px; color: var(--ash); font-size: 13px; }
.crm-notiz { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.crm-wert { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.crm-quote { font-variant-numeric: tabular-nums; color: var(--ash); font-size: 13px; }
.crm-erledigt { opacity: .55; }
.crm-erledigt .t { text-decoration: line-through; }
/* ---- Das Brett ----
Die Regeln stehen unter ihren CRM-Namen, weil sie dort entstanden
sind. Seit 2.25.0 zieht auch das Projektmodul Karten von Spalte zu
Spalte, und `class="crm-karte"` an einem Projekt wäre schlicht
gelogen. Deshalb neutrale Zweitnamen — dieselben Regeln, ein Name,
der nicht nach CRM klingt. Umbenannt wird das CRM erst, wenn es
ohnehin an der Reihe ist; ein Umbau quer durch zwei Module bringt
heute nichts außer Risiko. */
/* Das Brett scrollt waagerecht, die Seite nicht. */
.crm-brett, .brett { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: 10px;
-webkit-overflow-scrolling: touch; }
.crm-spalte-brett, .brett-spalte { flex: 0 0 260px; background: var(--frost); border-radius: 14px;
padding: 13px 12px; display: flex; flex-direction: column; min-height: 160px; }
.crm-spalte-brett.drueber, .brett-spalte.drueber { outline: 2px solid var(--accent); outline-offset: -2px; }
.crm-spalte-kopf, .brett-kopf { display: flex; align-items: center; gap: 8px; }
.crm-spalte-name, .brett-name { font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-spalte-zahl, .brett-zahl { font-size: 12px; color: var(--ash); background: var(--surface);
border-radius: 980px; padding: 1px 8px; }
.crm-spalte-summe, .brett-unter { font-size: 12.5px; color: var(--ash); margin: 3px 0 10px 18px;
font-variant-numeric: tabular-nums; }
.crm-punkt, .brett-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--f, var(--line)); flex: none; }
.crm-stapel, .brett-stapel { display: flex; flex-direction: column; gap: 9px; }
.crm-leer, .brett-leer { text-align: center; color: var(--mist); font-size: 13px; padding: 14px 0; }
.crm-karte, .brett-karte { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
padding: 11px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
touch-action: manipulation; }
.crm-karte:hover, .brett-karte:hover { border-color: #b8b8be; }
.crm-karte:focus-visible, .brett-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-karte-titel, .brett-karte-titel { font-weight: 500; font-size: 14px; line-height: 1.35; }
.crm-karte-kunde, .brett-karte-unter { font-size: 12.5px; color: var(--ash); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.crm-karte-fuss, .brett-karte-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.crm-karte-wer, .brett-karte-wer { font-size: 12px; color: var(--mist); }
.crm-zieht, .brett-zieht { opacity: .35; }
.crm-notiz-zeile { color: var(--ash); font-style: italic; margin-top: 2px; }
/* Anrufen, WhatsApp, E-Mail — die drei Wege zum Kunden */
/* Anrufen, WhatsApp, E-Mail — nur die Zeichen. Runde Knöpfe wie
oben in der Leiste: dieselbe Sprache für „ein Handgriff, kein
Text". Der Name steht im Tooltip und im aria-label. */
/* Die drei stehen IMMER nebeneinander, nie untereinander. In der
Tabelle entscheidet das über die Zeilenhöhe: umbrechende Knöpfe
machen aus einer Zeile drei, und die Liste wird zur Treppe. */
.crm-wege { margin-top: var(--sp-3); gap: 4px; flex-wrap: nowrap; }
.crm-wege.klein { margin-top: 0; }
.crm-weg {
width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); background: var(--surface); color: var(--muted);
text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.crm-weg:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-line); }
.crm-weg .sym-wrap { color: inherit; }
.crm-weg .sym { width: 16px; height: 16px; }
@media (pointer: coarse) { .crm-weg { width: 38px; height: 38px; } }
/* Die Spalte ist so schmal wie ihr Inhalt (width: 1%), darf ihn
aber nicht zusammenquetschen: die drei Knöpfe plus Abstände
brauchen ihre Breite, sonst weicht der Browser in die Höhe aus. */
/* Jede Zeile gleich hoch. Zwei Dinge machen sie ungleich: ein Name
mit Zusatzzeile ist höher als einer ohne, und ein langer Zusatz
bricht um. Deshalb feste Höhe für die Zeile und je eine Zeile für
Name und Zusatz — in einer Tabelle wirkt height wie ein Mindestmaß,
die Zeile wächst also nicht plötzlich zurück.
Der Nutzen ist nicht Schönheit: in einer Liste mit gleichen
Abständen findet das Auge die nächste Zeile, ohne zu suchen. */
table.crm-liste tbody td { height: 68px; }
.crm-namensfeld { min-width: 0; }
.crm-namensfeld .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-wege-spalte { white-space: nowrap; width: 1%; }
.crm-wege-spalte .btn-row { justify-content: flex-end; flex-wrap: nowrap; }
.crm-wege-spalte .crm-weg { flex: none; }
.crm-filterzeile { align-items: center; }
.crm-filterzeile .grow { flex: 1; }
/* ---- Aktivitäten als Zeitstrahl ----------------------------
Links das Datum, daneben eine durchgehende Linie mit einem Punkt
je Eintrag. Das Datum vorn macht aus einer Liste einen Verlauf:
man sieht auf einen Blick, was wann war und was noch kommt. */
.crm-zeitzeile { align-items: stretch; gap: 0; }
.crm-zeit {
flex: 0 0 74px; text-align: right; padding: 2px 12px 0 0;
font-size: 12.5px; line-height: 1.3; color: var(--ash);
font-variant-numeric: tabular-nums; white-space: nowrap;
display: flex; flex-wrap: wrap; gap: 0 4px;
align-items: baseline; justify-content: flex-end; align-content: flex-start;
}
.crm-zeit-tag { font-weight: 600; color: var(--ink); }
.crm-zeit-mon { color: var(--ash); }
.crm-zeit-jahr { font-size: 11px; color: var(--mist); flex-basis: 100%; text-align: right; }
.crm-zeit.ueber .crm-zeit-tag { color: var(--fehler); }
.crm-zeit.heute .crm-zeit-tag { color: var(--accent-line); }
.crm-zeit-leer .crm-zeit-tag { color: var(--mist); font-weight: 400; }
/* Die Linie läuft über die ganze Zeilenhöhe, damit aus den einzelnen
Punkten ein durchgehender Strahl wird. */
.crm-strahl { flex: 0 0 20px; position: relative; align-self: stretch; }
.crm-strahl::before {
content: ""; position: absolute; left: 9px; top: -12px; bottom: -12px;
width: 1px; background: var(--line);
}
.crm-zeitzeile:first-child .crm-strahl::before { top: 4px; }
.crm-zeitzeile:last-child .crm-strahl::before { bottom: calc(100% - 12px); }
.crm-strahl-punkt {
position: absolute; left: 5px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
background: var(--surface); border: 1.5px solid var(--mist); box-sizing: border-box;
}
.crm-strahl-punkt.offen { border-color: var(--accent); }
.crm-strahl-punkt.heute { border-color: var(--accent); background: var(--accent); }
.crm-strahl-punkt.ueber { border-color: var(--fehler); background: var(--fehler); }
.crm-strahl-punkt.zu { border-color: var(--line); background: var(--line); }
.crm-zeitzeile .crm-art { margin-right: var(--sp-3); align-self: flex-start; margin-top: 1px; }
.crm-zeitzeile .grow { align-self: center; }
.crm-mini { display: inline-flex; align-items: center; gap: 6px; }
.crm-mini .crm-mini-sym { display: none; line-height: 0; }
.crm-mini .sym { width: 17px; height: 17px; }
@media (max-width: 640px) {
/* Nur noch das Symbol: spart je Knopf rund 45 px. */
.crm-mini { padding-left: 10px; padding-right: 10px; }
.crm-mini .crm-mini-sym { display: inline-flex; }
.crm-mini .crm-mini-text { display: none; }
/* Tag über Monat: die Spalte kommt so mit 34 px aus, und der
Betreff behält seine Breite. */
.crm-zeit { flex-basis: 34px; padding-right: 8px; font-size: 12px; line-height: 1.15; }
.crm-zeit-tag, .crm-zeit-mon, .crm-zeit-jahr { flex-basis: 100%; text-align: right; }
.crm-zeit-mon { font-size: 11px; }
.crm-strahl { flex-basis: 16px; }
.crm-strahl::before { left: 7px; }
.crm-strahl-punkt { left: 3px; }
}
/* Pipeline als Liste — dieselben Chancen ohne Seitwärtsscrollen */
.crm-pipe-kopf { align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.crm-liste td { cursor: pointer; }
.crm-num { text-align: right; white-space: nowrap; }
.crm-liste tr.crm-zu td { color: var(--ash); }
.crm-ueberfaellig { color: var(--fehler); }
.crm-phase-marke { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.crm-sortkopf {
appearance: none; border: 0; background: none; font: inherit; color: inherit;
padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
min-height: 30px;
}
.crm-sortkopf:hover { color: var(--ink); }
.crm-sortkopf.an { color: var(--ink); font-weight: 600; }
.crm-sortpfeil { font-size: 11px; color: var(--accent-line); width: 9px; }
.crm-liste .crm-num .crm-sortkopf { justify-content: flex-end; width: 100%; }
.crm-liste-fuss {
display: flex; gap: var(--sp-4); align-items: baseline; flex-wrap: wrap;
margin-top: var(--sp-4); padding: 0 2px; font-size: 14px; font-variant-numeric: tabular-nums;
}
.crm-liste-fuss span:nth-child(2) { font-weight: 600; }
.crm-geist, .brett-geist { position: fixed; z-index: 200; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.18);
transform: rotate(1.5deg); }
.crm-balken-zeile { padding: 8px 0; }
.crm-balken-kopf { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin-bottom: 5px; }
.crm-balken { height: 7px; border-radius: 999px; background: var(--pebble); overflow: hidden; }
.crm-balken-fuell { height: 100%; border-radius: 999px; background: var(--f, var(--accent)); min-width: 2px; }
/* In der Akte stehen Telefonnummern und Adressen. Auf dem Telefon sind
das keine Textzeilen, sondern Knöpfe — sie müssen sich treffen lassen. */
.crm-kopf .link, .crm-unter .link, .crm-daten-zeile .link {
display: inline-flex; align-items: center; min-height: 34px; }
.crm-daten-zeile { align-items: center; }
/* Sieben Bedienelemente nebeneinander passen auf kein Telefon. */
.crm-phasen-zeile { flex-wrap: wrap; row-gap: 8px; }
.crm-phasen-name { min-width: 150px; }
/* Überschriften über die Spalten des Phaseneditors — ohne sie rät
man, wofür die Zahl und die beiden Kreise da sind. */
.crm-phasen-kopf {
padding-bottom: 6px; border-bottom: 1px solid var(--line); cursor: default;
font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--mist);
}
.crm-phasen-kopf .crm-ph-sort { flex: 0 0 auto; width: 84px; }
.crm-phasen-kopf .crm-ph-name { flex: 1; min-width: 150px; }
.crm-phasen-kopf .crm-ph-farbe { flex: 0 0 128px; }
.crm-phasen-kopf .crm-ph-wahr { flex: 0 0 76px; }
.crm-phasen-kopf .crm-ph-gew,
.crm-phasen-kopf .crm-ph-ver { flex: 0 0 auto; width: 74px; }
.crm-phasen-kopf .crm-ph-weg { flex: 0 0 40px; }
.crm-ph-mini { display: none; font-size: 11px; color: var(--mist); margin-bottom: 3px; }
@media (max-width: 900px) {
.crm-akte { grid-template-columns: 1fr; }
.crm-karte, .brett-karte { cursor: pointer; }
}
@media (max-width: 640px) {
.crm-label { flex-basis: 74px; }
.crm-spalte-brett, .brett-spalte { flex-basis: 224px; }
.crm-phasen-zeile { align-items: stretch; }
.crm-phasen-name { flex: 1 1 100%; }
.crm-phasen-zeile .check { min-height: 40px; }
/* Umgebrochen hilft eine Kopfzeile nicht mehr — dort trägt das
eine Feld, das man ihm nicht ansieht, seine eigene Beschriftung.
(Ein ::before am gäbe es nicht: ersetzte Elemente haben
keine Pseudoelemente.) */
.crm-phasen-kopf { display: none; }
.crm-ph-mini { display: block; }
.crm-ph-wahr-box { flex: 0 0 auto; }
}
/* ============================================================
14 · Projekte
============================================================ */
/* Die Projektnummer ist eine Kennung, keine Prosa: gleiche
Zeichenbreite, damit untereinander stehende Nummern eine Spalte
ergeben und nicht ausfransen. */
.pj-nummer {
font-variant-numeric: tabular-nums; font-size: 12.5px;
color: var(--ash); letter-spacing: .01em;
}
/* Der Fortschritt ist gezählt, nicht geschätzt — deshalb darf er
auch schmal sein. Ein dicker Balken verspricht Genauigkeit, die
„4 von 7 Aufgaben" nicht hat. */
.pj-balken {
height: 4px; border-radius: 980px; background: var(--pebble);
overflow: hidden; margin-top: 2px;
}
.pj-balken-fuellung { height: 100%; background: var(--accent); border-radius: 980px; }
.pj-fortschritt { display: flex; align-items: center; gap: 8px; min-width: 90px; }
.pj-fortschritt .pj-balken { flex: 1; margin-top: 0; }
.pj-prozent { font-size: 12.5px; color: var(--ash); font-variant-numeric: tabular-nums; }
/* Die vier Zahlen oben in der Projektakte. Kein Raster mit fester
Spaltenzahl: bei drei Zahlen sollen es drei sein, nicht drei und
eine Lücke. */
.pj-zahlen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--sp-3); margin: var(--sp-4) 0;
}
.pj-zahl {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-card); padding: 14px 16px;
}
.pj-zahl-wert { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.pj-zahl-titel { font-size: 13px; color: var(--ash); margin-top: 2px; }
.pj-zahl-unter { font-size: 12px; color: var(--mist); margin-top: 2px; }
.pj-zahl.schlecht .pj-zahl-wert { color: var(--fehler); }
.stat.pj-schlecht .num { color: var(--fehler); }
/* Beschreibung und Notiz stehen so da, wie sie eingetippt wurden —
mit ihren Absätzen. */
.pj-text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
/* Die Karten in der Projektakte stehen untereinander. .card selbst
bringt keinen Abstand mit — überall sonst macht ihn das Raster
drumherum, und doppelt wäre er dort zu viel. */
.pj-karten { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
/* ---- Statuseditor ----
Spaltenbreiten wie beim Phaseneditor der Pipeline: die Zeile ist
eine .row, die Überschrift darüber teilt sich dieselben Breiten,
damit beides untereinander steht. */
/* Weniger Sperrung als sonst bei Überschriften: „Reihenfolge" muss
über zwei Pfeilknöpfe passen, und abgeschnitten sagt es nichts. */
.pj-st-kopf {
font-size: 11px; font-weight: 600; letter-spacing: .03em;
text-transform: uppercase; color: var(--mist);
}
/* Die Überschriften sind breiter als das, was darunter steht —
„Abgebrochen" über einem Haken. Sie dürfen deshalb nicht in die
Nachbarspalte laufen, sondern enden mit Auslassungspunkten. */
.pj-st-kopf > span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-st-kopf .pj-st-sort { flex: 0 0 auto; width: 104px; }
.pj-st-kopf .pj-st-name { flex: 1; min-width: 150px; }
.pj-st-kopf .pj-st-farbe { flex: 0 0 128px; }
.pj-st-kopf .pj-st-merk { flex: 0 0 auto; width: 136px; }
.pj-st-kopf .pj-st-zahl { flex: 0 0 auto; width: 70px; }
.pj-st-kopf .pj-st-weg { flex: 0 0 40px; }
.pj-st-zeile { flex-wrap: wrap; row-gap: 8px; }
.pj-st-zeile .pj-st-sort { flex: 0 0 auto; width: 104px; gap: 2px; }
.pj-st-zeile .pj-st-name { flex: 1; min-width: 150px; }
.pj-st-zeile .pj-st-farbe { flex: 0 0 128px; width: 128px; }
.pj-st-zeile .pj-st-merk { flex: 0 0 auto; width: 136px; }
.pj-st-zeile .pj-st-zahl { flex: 0 0 auto; width: 70px; font-size: 12px; }
.pj-st-zeile .pj-st-weg { flex: 0 0 40px; }
@media (max-width: 900px) {
/* Umbrochen ist die Reihenfolge der Felder nicht mehr abzulesen —
die Überschrift darüber steht dann über der falschen Spalte. */
.pj-st-kopf { display: none; }
.pj-st-zeile { align-items: stretch; }
.pj-st-zeile .pj-st-name { flex: 1 1 100%; min-width: 0; }
.pj-st-zeile .pj-st-farbe { flex: 0 0 128px; }
/* „abgebrochen" ist breiter als 124 px. Umbrochen hat die Spalte
ohnehin keine feste Breite mehr zu halten. */
.pj-st-zeile .pj-st-merk { flex: 0 0 auto; width: auto; }
}
.pj-kopfzeile { align-items: center; }
.pj-kopfzeile .grow { flex: 1; }
@media (max-width: 640px) {
/* Auf dem Telefon zwei Zahlen nebeneinander statt vier winziger. */
.pj-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-zahl-wert { font-size: 19px; }
}
/* ============================================================
15 · Monatsraster, Balkenplan
============================================================ */
/* ---- Monatsraster ----
Das schlichte Gitter für alle außer dem Kalendermodul, das sein
eigenes, gewachsenes hat. */
.mr-leiste { align-items: center; margin-bottom: var(--sp-3); }
.mr-monat { font-weight: 600; font-size: 15px; margin-left: var(--sp-2); }
.mr { border: 1px solid var(--line); border-radius: var(--r-card);
overflow: hidden; background: var(--surface); }
.mr-kopf, .mr-gitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mr-kopf { background: var(--frost); border-bottom: 1px solid var(--line); }
.mr-wtag {
padding: 7px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--mist); text-align: center;
}
.mr-tag {
min-height: 92px; padding: 5px 6px 7px; border-right: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.mr-tag:nth-child(7n) { border-right: 0; }
.mr-gitter > .mr-tag:nth-last-child(-n+7) { border-bottom: 0; }
/* Tage aus dem Nachbarmonat stehen mit, damit die Wochen vollständig
sind — sie sollen aber nicht mitreden. */
.mr-tag.fremd { background: var(--frost); }
.mr-tag.fremd .mr-zahl { color: var(--mist); }
.mr-zahl { font-size: 12px; color: var(--ash); font-variant-numeric: tabular-nums; }
.mr-tag.heute .mr-zahl {
background: var(--accent); color: var(--on-accent); border-radius: 50%;
width: 21px; height: 21px; display: inline-flex; align-items: center;
justify-content: center; align-self: flex-start;
}
.mr-eintrag {
display: flex; align-items: center; gap: 4px; width: 100%;
border: 0; background: var(--pebble); color: var(--ink);
border-radius: 5px; padding: 2px 5px; font-size: 11.5px;
cursor: pointer; text-align: left; min-width: 0;
}
/* Was anklickbar ist, ist hoch genug zum Anklicken. Was nur etwas
anzeigt, bleibt schmal — sonst wird aus einem Kalender eine
Liste mit Zwischenraeumen. */
.mr-klick { min-height: 30px; }
.mr-eintrag:hover { background: var(--mist); color: #fff; }
.mr-eintrag:not(.mr-klick):hover { background: var(--pebble); color: var(--ink); cursor: default; }
.mr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mr-zeichen { flex: none; font-size: 10px; }
.mr-anfang { background: var(--accent-soft); color: var(--accent-line); }
.mr-ende { background: var(--pebble); }
.mr-ende-ueber { background: var(--fehler-bg); color: var(--fehler); }
.mr-erledigt { opacity: .55; text-decoration: line-through; }
.mr-aufgabe { background: transparent; padding-left: 0; }
/* Ein Abschnitt läuft über mehrere Tage: durchgehender Streifen,
Name nur am ersten Tag — sonst steht er fünfmal untereinander. */
/* Der weiche Ton, nicht der kräftige: über fünf Tage ist ein
voller Farbstreifen in einer Kalenderzelle zu laut, und der Name
darauf wäre kaum zu lesen. */
.mr-balken {
border-radius: 0; margin: 0 -6px; padding-left: 6px; padding-right: 6px;
background: var(--fw, var(--pebble)); color: var(--ink);
min-height: 17px;
}
.mr-balken:hover { background: var(--fw, var(--pebble)); color: var(--ink); }
.mr-balken.anfang { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left: 0; }
.mr-balken.schluss { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-right: 0; }
.mr-legende {
display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
margin-top: var(--sp-3); font-size: 12.5px; color: var(--ash);
}
.mr-legende > span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 700px) {
/* Sieben Spalten auf 375 px sind 50 px je Tag — für Namen zu
wenig. Der Text fällt weg, das Zeichen bleibt: man sieht, DASS
an dem Tag etwas ist, und tippt darauf. */
/* Und weil man darauf tippt, braucht der Eintrag Höhe: 16 px
trifft niemand mit dem Daumen. Die Zelle wächst dafür mit. */
.mr-tag { min-height: 62px; padding: 4px 3px 5px; }
.mr-text { display: none; }
.mr-eintrag { justify-content: center; padding: 2px; min-height: 30px; }
.mr-zeichen { font-size: 13px; }
.mr-balken { margin: 0 -3px; }
}
/* ---- Balkenplan ---- */
.gantt-rahmen { border: 1px solid var(--line); border-radius: var(--r-card);
background: var(--surface); overflow-x: auto; }
.gantt { min-width: 520px; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.gantt-zeile, .gantt-kopfzeile { display: flex; align-items: center; gap: var(--sp-3); }
.gantt-zeile { min-height: 30px; }
.gantt-name {
flex: 0 0 150px; width: 150px; font-size: 13px; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gantt-feld { flex: 1; position: relative; height: 22px; min-width: 0; }
.gantt-kopfzeile .gantt-feld { height: 22px; }
.gantt-skala { position: absolute; inset: 0; }
.gantt-monat {
position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-soft);
font-size: 11px; color: var(--mist); padding-left: 4px; overflow: hidden; white-space: nowrap;
}
.gantt-monat:first-child { border-left: 0; }
/* Die Linie für heute läuft durch alle Zeilen — ohne sie sagt ein
Balken nicht, ob er noch bevorsteht oder längst hätte fertig sein
müssen. */
/* Je Zeile ein Stück, aber über die Lücken hinaus — zusammen
ergibt das eine durchgehende Linie, ohne dass der Balkenplan
eine zweite Ebene zum Überlagern braucht. */
/* Das Raster: eine dünne Linie je Monatsgrenze, durch alle
Zeilen. Sehr blass — es soll den Blick führen, nicht ihn auf
sich ziehen; der Balken bleibt das, was man liest. */
.gantt-raster { position: absolute; inset: 0; pointer-events: none; }
.gantt-linie { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--line-soft); }
/* Und eine waagerechte Führung je Zeile — bei zwölf Abschnitten
verrutscht der Blick sonst eine Zeile nach oben. */
.gantt-zeile + .gantt-zeile .gantt-feld:before {
content: ""; position: absolute; left: 0; right: 0; top: -5px;
border-top: 1px solid var(--line-soft);
}
.gantt-heute {
position: absolute; top: -8px; bottom: -8px; width: 2px;
background: var(--fehler); opacity: .55; pointer-events: none;
}
.gantt-legende-heute { width: 12px; height: 2px; background: var(--fehler); opacity: .55; }
/* Der Balken ist ein Flexkasten, damit die Schrift in seiner Mitte
sitzt. Ohne das legt die Zeilenhöhe die Grundlinie unter den
Balkenrand — die Beschriftung stand bis 2.29.0 halb abgeschnitten
unter ihrem eigenen Balken. */
.gantt-balken {
position: absolute; top: 2px; height: 18px; border: 0; border-radius: 4px;
background: var(--f, var(--accent)); cursor: default; overflow: hidden;
padding: 0 6px; text-align: left; min-width: 4px;
display: flex; align-items: center;
}
/* Weiß auf dem kräftigen Ton — alle Farben der Palette sind dunkel
genug dafür. Beim Projektbalken (heller Kies) bleibt es dunkel.
Was nicht hineinpasst, endet mit Auslassungspunkten: ein Wort, das
am Balkenrand einfach aufhört, sieht aus wie ein Fehler. */
.gantt-balken-text {
font-size: 11px; line-height: 1; color: #fff; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.gantt-projekt .gantt-balken-text { color: var(--ash); }
.gantt-balken.erledigt { opacity: .45; }
.gantt-projekt { background: var(--pebble); outline: 1px solid var(--line); }
.gantt-projekt.ueber { outline-color: var(--fehler); }
/* Der Punkt ist 11 px groß, der Knopf darum 30 — sonst trifft ihn
auf dem Telefon niemand. Sichtbar ist nur der Punkt; die
Trefferfläche liegt unsichtbar darum. 2.26.0 hatte 28 px, zwei zu
wenig: im Haus gelten 30, und die Layoutprüfung misst genau das. */
.gantt-punkt {
position: absolute; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; margin-left: -15px;
border: 0; background: transparent; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.gantt-punkt:before {
content: ""; width: 11px; height: 11px; border-radius: 50%;
border: 2px solid var(--accent); background: var(--surface);
}
.gantt-punkt.fertig:before { border-color: var(--mist); background: var(--mist); }
.gantt-punkt.ueber:before { border-color: var(--fehler); background: var(--fehler); }
.gantt-trenner { margin-top: var(--sp-3); min-height: 24px; }
.gantt-trenner .gantt-name {
font-size: 11px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--mist);
}
/* ---- Abschnitte pflegen ---- */
/* Im Blatt ist wenig Breite. Die Datumsfelder tragen ihre
Beschriftung deshalb selbst und teilen sich den Platz, statt
auf eine Kopfzeile zu warten, die dort nie hinpasst. */
/* Zwei Zeilen je Abschnitt: der Name über die volle Breite, darunter
Reihenfolge, Zeitraum und „fertig". Alles in eine Zeile zu zwingen
lässt für den Namen vierzig Pixel — und `.row .grow` (0,2,0) sticht
jede Breitenangabe einer einzelnen Klasse. */
.pj-ab-zeile {
padding: 12px 0; border-bottom: 1px solid var(--line-soft);
display: flex; flex-direction: column; gap: 8px;
}
.pj-ab-zeile:last-child { border-bottom: none; }
.pj-ab-kopf { display: flex; align-items: center; gap: var(--sp-2); }
.pj-ab-kopf > .pj-ab-name { flex: 1 1 auto; min-width: 0; }
.pj-ab-fuss { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-2); }
.pj-ab-sort { flex: 0 0 auto; gap: 2px; }
.pj-ab-datum { flex: 1 1 130px; min-width: 118px; display: flex; flex-direction: column; gap: 2px; }
.pj-ab-datum > input { width: 100%; }
.pj-ab-mini { font-size: 11px; color: var(--mist); }
/* Ein Feld, das feststeht: sieht aus wie ein Feld, ist aber keins.
Ein ausgegrautes Eingabefeld sähe kaputt aus, nackter Text
verlöre die Zeile. */
.pj-fest { padding: 9px 0; font-size: 15px; }
.pj-ab-fertig { flex: 0 0 auto; padding-bottom: 6px; }
@media (max-width: 700px) {
.gantt-name { flex: 0 0 108px; width: 108px; font-size: 12px; }
}
/* ============================================================
BELEGE
============================================================ */
/* Zustandsleiste über den Karten: links, was der Beleg gerade
ist, rechts, was man mit ihm machen kann. */
.bl-zustand {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
margin: 0 0 16px; padding: 12px 14px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.bl-zustand-titel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
/* ============================================================
LAGER · Bestand, Codes, Auszug
============================================================ */
/* Die Bestandszahl in der Liste: groß genug, um sie im Vorbeigehen
zu lesen, und rot, wenn sie unter null steht. Ein negativer
Bestand ist kein Fehler, aber er gehört gesehen. */
.lg-stand { font-variant-numeric: tabular-nums; }
.lg-stand.minus, .lg-zahl.minus, .lg-auszug td.minus { color: var(--fehler); }
.lg-kopfzahl { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lg-zahl { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Der Auszug liest sich wie ein Kontoauszug — deshalb steht der
Stand nach jeder Buchung daneben und nicht nur die Menge. */
table.lg-auszug { width: 100%; border-collapse: collapse; }
table.lg-auszug th {
font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mist);
text-align: left; padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.lg-auszug th.r, table.lg-auszug td.r { text-align: right; }
table.lg-auszug td {
padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-soft);
vertical-align: top; font-size: 13px; font-variant-numeric: tabular-nums;
}
table.lg-auszug td.nw { white-space: nowrap; }
/* Das Mengenfeld beim Buchen und beim Zählen: schmal, rechts,
und groß genug für einen Daumen. */
.lg-buchmenge { display: inline-flex; align-items: center; gap: 6px; }
.lg-buchmenge input { width: 92px; text-align: right; min-height: 34px; }
.lg-buchliste .row { gap: var(--sp-2); }
/* Die Codes am Artikel. Der Wert steht in Schreibmaschinenschrift:
in einer Proportionalschrift sieht 0 wie O aus, und genau das
tippt dann jemand ab. */
.lg-codes { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.lg-code {
display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-feld);
background: var(--frost);
}
.lg-code-wert { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .02em; }
.lg-code-neu { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.lg-code-neu input { flex: 1 1 200px; min-width: 0; }
.lg-bc-gross { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-feld); padding: 16px; text-align: center; }
.lg-bc-gross svg { max-width: 100%; height: auto; }
/* Die Sucherfläche beim Scannen. Das Bild bleibt im Rahmen, die
Linie zeigt, wo gelesen wird — quer, nicht längs. */
.sc-rahmen {
position: relative; margin: 14px 0 8px; border-radius: var(--r-feld);
overflow: hidden; background: #000; aspect-ratio: 16 / 9;
}
.sc-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-linie {
position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
background: var(--fehler); opacity: .8; transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.sc-rahmen::after {
content: ''; position: absolute; inset: 33% 4%; border: 2px solid rgba(255,255,255,.7);
border-radius: 6px; pointer-events: none;
}
.sc-hinweis { margin-top: 6px; }
/* Ein Verweis auf einen anderen Beleg sieht aus wie Text und ist
ein Knopf. Die Hausgrenze von 30 px gilt trotzdem — ein
Textstück von 22 px trifft auf dem Tablet niemand. */
.bl-bezuege { display: flex; flex-direction: column; align-items: flex-start; }
.link.bl-bezug {
display: inline-flex; align-items: center; min-height: 30px;
text-align: left;
}
/* Belege in einer fremden Akte, nach Art gruppiert: ein kleiner
Titel mit Anzahl über jeder Gruppe. Die Art steht damit einmal
über der Gruppe statt in jeder Zeile. */
.bl-akte-gruppe + .bl-akte-gruppe { margin-top: 18px; }
.bl-akte-titel {
display: flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
color: var(--mist); margin: 0 0 6px;
}
.bl-akte-zahl {
font-size: 11px; letter-spacing: 0; padding: 0 6px; border-radius: 999px;
background: var(--frost); color: var(--ash);
}
/* Der Riegel über den Positionen einer Rechnung. Ein Entwurf
liegt ruhig da; eine Rechnung, deren Inhalt nicht mehr zum
Festschreib-Hash passt, schreit — das ist der eine Fall, der
nicht im Protokoll versauern darf. */
.bl-entwurf { border-style: dashed; }
.bl-versehrt { border-color: var(--fehler); background: var(--fehler-bg); }
.bl-versehrt .bl-zustand-titel, .bl-versehrt .s { color: var(--fehler); }
/* Was von einer Auftragszeile schon berechnet oder geliefert
ist — als Satz unter der Leistung, nicht als zwei weitere
Spalten in einer Tabelle, die schon zehn hat. */
.bl-mengen { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 30px; }
.bl-menge-marke {
font-size: 11px; line-height: 1.5; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--line); color: var(--mist); background: var(--frost);
}
.bl-menge-marke.voll { color: var(--gut); background: var(--gut-bg); border-color: transparent; }
.bl-menge-marke.teil { color: var(--ash); }
/* Das Blatt „Rechnung aus Auftrag": eine Tabelle, in der man
von links nach rechts liest — was beauftragt war, was schon
berechnet ist, was jetzt dazukommt. */
table.bl-fk { width: 100%; border-collapse: collapse; }
table.bl-fk th {
font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mist);
text-align: left; padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.bl-fk th.r, table.bl-fk td.r { text-align: right; }
table.bl-fk td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13px; }
table.bl-fk tr.bl-fk-gr td { background: var(--frost); font-weight: 600; }
table.bl-fk input.bl-fk-menge { width: 96px; text-align: right; }
/* Der Rückweg ist auf dem Telefon ein Knopf, kein Textstück —
dieselbe Regel wie in der Kundenakte. */
.crm-kopf .zurueck { display: inline-flex; align-items: center; min-height: 34px; }
.bl-loeschen { color: var(--fehler); }
/* Die Positionen stehen als Raster — eine Zeile je Position, mit
einer Kopfzeile darüber. Bis 2.30.0 war es ein Stapel aus zwei
Zeilen je Position mit einem immer sichtbaren Beschreibungsfeld:
dreißig Positionen füllten damit drei Bildschirme, und was wo
stand, musste man an den Beschriftungen ablesen.
Auf schmalen Bildschirmen bricht dasselbe Raster in Blöcke um;
dort trägt jedes Feld wieder seine eigene kleine Beschriftung,
weil es keine Kopfzeile mehr gibt. */
.bl-pos { display: flex; flex-direction: column; }
/* ---------- Positionen ------------------------------------
Seit 2.34.0 eine echte Tabelle: fester Kopf, ausgerichtete
Spalten, sortierbar. Auf schmalen Bildschirmen bleibt sie eine
Tabelle im HTML, wird aber zu gestapelten Blöcken — eine
zwölfspaltige Tabelle quer zu scrollen ist auf dem Bau keine
Bedienung. */
.bl-pos-leiste {
display: flex; gap: var(--sp-2); align-items: center;
margin: 0 0 10px;
}
.bl-pos-suche { flex: 1 1 auto; min-width: 0; max-width: 320px; }
/* Am Telefon gibt es keinen Tabellenkopf zum Anklicken — dort
führt dieses Feld zur Sortierung. */
.bl-pos-sort { flex: 0 1 auto; min-width: 0; max-width: 200px; }
/* Sortiert oder gefiltert heißt: das hier ist nicht der Beleg,
sondern ein Blick darauf. */
.bl-blick {
display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
padding: 8px 12px; margin: 0 0 10px;
background: var(--accent-soft); border-radius: var(--r-feld);
font-size: 13px;
}
table.bl-tab { width: 100%; border-collapse: collapse; }
table.bl-tab th {
font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mist);
text-align: left; border-bottom: 1px solid var(--line); padding: 0 6px 6px 0;
white-space: nowrap;
}
table.bl-tab th.r { text-align: right; }
table.bl-tab th.r .crm-sortkopf { justify-content: flex-end; }
table.bl-tab td {
padding: 2px 2px 2px 0; border-bottom: 1px solid var(--line-soft);
vertical-align: middle;
}
/* Gleiche Höhe für jede Zeile, ob mit oder ohne Auswahlfeld —
sonst hüpft die Liste beim Durchsehen. */
table.bl-tab tr.bl-zeile > td { height: 40px; }
table.bl-tab tr:last-child td { border-bottom: none; }
table.bl-tab td.r { text-align: right; }
table.bl-tab td.nw { white-space: nowrap; }
.bl-c-griff { width: 34px; }
.bl-c-nr { width: 30px; }
.bl-c-weg { width: 34px; }
/* Die Leistung bekommt, was übrig bleibt — sie ist die Spalte,
in der der Text steht. Die Zahlenspalten sind so breit, wie
Zahlen breit sind; ohne feste Breiten teilte der Browser gleich
auf und schnitt „Wandhängender Gasbrennwertkessel" nach dem
G ab. */
.bl-c-bez { min-width: 200px; width: auto; }
table.bl-tab .bl-s-menge { width: 88px; }
table.bl-tab .bl-s-einheit { width: 118px; }
table.bl-tab .bl-s-preis { width: 116px; }
table.bl-tab .bl-s-rabatt { width: 92px; }
table.bl-tab .bl-s-steuer { width: 84px; }
table.bl-tab .bl-s-ek { width: 116px; }
table.bl-tab .bl-s-db { width: 104px; }
table.bl-tab .bl-betrag { width: 120px; }
/* ------------------------------------------------------------
Die ruhige Tabelle (2.36.0)
Vorher stand in jeder Zeile ein Stapel Eingabekästen: acht
Rahmen nebeneinander, dreißigmal untereinander. Das ist kein
Beleg mehr, das ist ein Formular — und man sucht die Zeile,
die man ändern wollte.
Jetzt tragen die Felder keinen Rahmen. Sie sehen aus wie der
Text, der sie sind, und bekommen ihren Rahmen erst, wenn man
hineinklickt. Die Tabelle liest sich damit wie das fertige
Angebot; bedienen lässt sie sich wie vorher.
Nicht unsichtbar, nur ruhig: beim Überfahren hellt das Feld
auf, damit man sieht, dass dort etwas zu ändern ist. Ein Feld,
das man erst durch Anklicken findet, wäre schlimmer als ein
Rahmen zu viel.
------------------------------------------------------------ */
table.bl-tab input, table.bl-tab select, table.bl-tab textarea {
width: 100%; min-width: 0;
border-color: transparent; background: transparent;
padding: 7px 8px; border-radius: 7px;
}
table.bl-tab input:hover, table.bl-tab select:hover, table.bl-tab textarea:hover {
background: var(--frost);
}
table.bl-tab input:focus, table.bl-tab select:focus, table.bl-tab textarea:focus {
border-color: var(--accent); background: var(--surface);
}
/* Ein leeres Feld ohne Rahmen ist ein Loch. Der Platzhalter sagt,
was hineingehört — deshalb steht er hier deutlicher als sonst. */
table.bl-tab input::placeholder { color: var(--line); }
/* Das Auswahlfeld trägt seinen Pfeil nur, wenn man hinsieht:
dreißig Pfeile untereinander sind dieselbe Unruhe wie dreißig
Rahmen. */
table.bl-tab select { background-image: none; padding-right: 8px; }
table.bl-tab select:hover, table.bl-tab select:focus {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px;
}
table.bl-tab input.r { text-align: right; font-variant-numeric: tabular-nums; }
/* Die runden Knöpfe im Haus sind 44 px breit — in einer Spalte von
34 px stehen sie über. Sie füllen ihre Zelle und bleiben mit
32 px Höhe über der Trefferflächengrenze.
Das min-width hält die Spalte auf: eine Tabellenspalte ist
34 px nur als Wunsch, und wenn daneben mehr hineinwill, drückt
der Browser sie zusammen — der Griff war danach 22 px breit,
das Kreuz 15. Der Mindestwert des Knopfes ist die Untergrenze
der Spalte. */
table.bl-tab .icon-btn { width: 100%; min-width: 28px; height: 32px; padding: 0; }
.bl-nr { color: var(--mist); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.bl-betrag {
text-align: right; font-weight: 600; white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.bl-feld { min-width: 0; }
/* Auf breiten Bildschirmen steht die Beschriftung im Tabellenkopf
— hier wäre sie dieselbe Angabe zum zweiten Mal. */
.bl-feld-mini { font-size: 11px; color: var(--mist); margin-bottom: 2px; }
.bl-lesefeld { min-width: 0; }
.bl-lesetext { font-size: 13px; color: var(--mist); white-space: pre-line; }
.bl-spaltenwahl { display: flex; flex-direction: column; gap: 6px; }
.bl-spaltenwahl input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
/* Bezeichnung mit Vorschlagsliste */
.bl-bez { display: flex; gap: 4px; align-items: center; min-width: 0; }
.bl-bez-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.bl-vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; }
.bl-mehr {
flex: 0 0 auto; width: 26px; height: 30px; border: 1px solid var(--line);
background: var(--surface); border-radius: 8px; color: var(--mist);
cursor: pointer; font-size: 15px; line-height: 1;
}
.bl-mehr:hover { color: var(--ink); border-color: var(--mist); }
.bl-besch { margin: 4px 0 2px; min-height: 40px; font-size: 13px; }
/* Der Knopf zeigt an, dass eine Beschreibung dahintersteckt —
sonst klappt man dreißig Positionen auf, um eine zu finden. */
.bl-mehr.hat { color: var(--accent-line); border-color: var(--accent-line); }
/* Gruppen heben sich ab — sie sind die Zwischenüberschrift, nach
der der Kunde das Angebot liest. */
.bl-gruppenzeile > td { background: var(--accent-soft); }
.bl-gruppenzeile > td:first-child { border-top-left-radius: var(--r-feld); border-bottom-left-radius: var(--r-feld); }
.bl-gruppenzeile > td:last-child { border-top-right-radius: var(--r-feld); border-bottom-right-radius: var(--r-feld); }
.bl-gr-innen { display: flex; gap: 8px; align-items: center; min-width: 0; }
/* Alle drei Felder der Gruppenzeile stehen gegen die allgemeine
Tabellenregel „Eingaben auf volle Breite" — deshalb überall die
Tabelle davor, sonst rechnet jedes Feld mit 100 % der Zelle. */
table.bl-tab .bl-gr-innen .bl-gr-name { flex: 1 1 0; min-width: 120px; width: auto; font-weight: 600; }
table.bl-tab .bl-gr-innen select { flex: 0 0 auto; width: auto; min-width: 180px; }
.bl-gr-rab { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
/* Das Nachlassfeld bleibt schmal — sonst gewinnt die allgemeine
Tabellenregel (Eingaben auf volle Breite) und die Gruppenzeile
wird breiter als die Zelle. Darum hier mit Tabelle davor. */
table.bl-tab .bl-gr-rab input, .bl-gr-rab input { width: 56px; text-align: right; }
/* Einrücken macht Zugehörigkeit sichtbar. Der Strich links ist
die Klammer: alles, was daran hängt, gehört zur Gruppe darüber —
und wo er aufhört, ist die Gruppe zu Ende. */
.bl-unter > td { background: var(--frost); }
.bl-unter .bl-bez, .bl-unter .bl-lesefeld, .bl-unter .bl-lesetext {
padding-left: 18px; border-left: 2px solid var(--accent-line); margin-left: 2px;
}
/* „Unterpositionen nicht zeigen": die Zeile wird weiter bearbeitet
und gerechnet, steht aber nicht auf dem Beleg. Blass, nicht weg —
verschwinden dürfte sie nur, wenn sie auch nicht mehr zählte. */
.bl-verdeckt > td { opacity: .6; }
.bl-einzug {
flex: 0 0 auto; width: 26px; height: 30px; border: 1px solid var(--line);
background: var(--surface); border-radius: 8px; color: var(--mist);
cursor: pointer; font-size: 14px; line-height: 1;
}
.bl-einzug:hover:not(:disabled) { color: var(--ink); border-color: var(--mist); }
.bl-einzug.an { color: var(--accent-line); border-color: var(--accent-line); }
.bl-einzug:disabled { opacity: .35; cursor: default; }
.bl-textfeld { min-height: 40px; font-size: 13px; }
/* Ziehen: der Griff ist der einzige Anfasser — in der Zeile stehen
Eingabefelder, und wer ein Wort markiert, will nichts verschieben. */
.zieh-griff { cursor: grab; color: var(--mist); touch-action: none; }
/* Sortiert oder gefiltert: der Griff verschwindet, statt eine
Bewegung anzubieten, die an eine Stelle führt, die es im Beleg
nicht gibt. */
table.bl-tab.blick .zieh-griff { visibility: hidden; pointer-events: none; }
.zieh-griff:active { cursor: grabbing; }
.bl-zeile.zieht { opacity: .5; }
.zieh-platz {
border: 1px dashed var(--accent-line); border-radius: var(--r-feld);
background: var(--accent-soft); margin: 2px 0;
}
@media (max-width: 900px) {
/* Aus der Tabelle werden Blöcke: Bezeichnung über die volle
Breite, darunter die Zahlen nebeneinander. Die Tabelle bleibt
im HTML eine Tabelle — nur ihre Darstellung ändert sich. */
table.bl-tab, table.bl-tab tbody, table.bl-tab tr, table.bl-tab td { display: block; }
table.bl-tab thead { display: none; }
table.bl-tab tr.bl-zeile {
display: grid;
grid-template-columns: 34px 20px minmax(0, 1fr) 34px;
gap: 6px; row-gap: 6px; padding: 12px 0;
border-bottom: 1px solid var(--line-soft);
}
table.bl-tab td { border-bottom: none; padding: 0; }
table.bl-tab td.bl-c-bez { grid-column: 3 / 4; }
table.bl-tab td.bl-feld { grid-column: 3 / 4; }
table.bl-tab td.bl-betrag, table.bl-tab td.bl-db-zelle { grid-column: 3 / 4; text-align: left; }
table.bl-tab td.r { text-align: left; }
.bl-gruppenzeile > td { border-radius: 0; }
.bl-gruppenzeile > td.bl-c-bez { border-radius: var(--r-feld); padding: 6px; }
/* Schmal stapeln sich Name, Anzeigeart und Nachlass — nebeneinander
bräuchten sie 243 px, und ein iPhone 14 hat für die Zelle 204. */
.bl-gr-innen { flex-wrap: wrap; }
table.bl-tab .bl-gr-innen .bl-gr-name { flex: 1 1 100%; min-width: 0; width: 100%; }
table.bl-tab .bl-gr-innen select { flex: 1 1 100%; min-width: 0; width: 100%; }
.bl-gr-rab { flex: 0 0 auto; align-items: baseline; }
.bl-unter .bl-bez, .bl-unter .bl-lesefeld, .bl-unter .bl-lesetext { padding-left: 10px; }
}
/* Alternativen und Optionen: Zeilen, die auf dem Beleg stehen und
nicht in die Summe gehen. Sie müssen sich beim Durchsehen von
selbst abheben — sonst rechnet man sie im Kopf mit. Kein Rot:
sie sind kein Fehler, nur noch nicht verkauft. */
.bl-wertmarke {
font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--mist); border: 1px solid var(--line); border-radius: 4px;
padding: 1px 6px; white-space: nowrap; align-self: center; flex: none;
}
/* Die Marke ist auch der Schalter: anklicken dreht sie weiter.
Solange die Zeile normal zählt, steht sie blass da — sichtbar
genug, um sie zu finden, leise genug, um dreißigmal
untereinander nicht zu stören. */
.bl-wertknopf {
appearance: none; cursor: pointer; font: inherit;
font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
background: none; line-height: 1.6; min-height: 30px;
display: inline-flex; align-items: center; justify-content: center;
}
.bl-wertknopf:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent-line); }
.bl-wertknopf:disabled { cursor: default; opacity: .75; }
/* Der neutrale Zustand ist ein Ring, kein Wort: schmal genug,
um der Leistung die Breite zu lassen — aber nicht so schmal,
dass ein Daumen ihn verfehlt. 28 × 30 ist die Untergrenze im
Haus, und ein Zeichen von 12 px erreicht sie nicht von selbst. */
.bl-wertmarke-aus {
color: var(--line); border-color: var(--line-soft);
padding: 1px 4px; letter-spacing: 0; font-size: 12px; line-height: 1;
min-width: 28px; min-height: 30px;
display: inline-flex; align-items: center; justify-content: center;
}
.bl-wertknopf.bl-wertmarke-aus:hover:not(:disabled) { color: var(--ash); border-color: var(--line); }
tr.bl-nichtzaehlt > td { background: #fafafc; }
tr.bl-nichtzaehlt .bl-betrag { color: var(--mist); }
/* Der leise Hinweis an einer Gruppe, zu der nichts gehört. */
.bl-gr-hinweis {
font-size: 11.5px; color: var(--hinweis); padding: 0 0 4px 8px;
}
.bl-sum-hinweis.bl-nicht-drin {
margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft);
text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
}
/* Der Aufklapper einer Zeile: Beschreibung und Wertung. Beides
betrifft die Zeile als Ganzes und hat in keiner Spalte Platz. */
.bl-zusatz { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px; }
.bl-zusatz-feld { display: flex; align-items: center; gap: 8px; }
.bl-zusatz-feld .bl-feld-mini { margin-bottom: 0; flex: none; }
table.bl-tab .bl-zusatz-feld select { width: auto; min-width: 0; max-width: 100%; }
/* Die Summen stehen rechts unter den Positionen — da sucht sie
jeder, der ein Angebot in der Hand hatte. */
.bl-summen { margin: 18px 0 0 auto; min-width: 260px; max-width: 340px; }
.bl-sum-zeile { display: flex; gap: var(--sp-3); padding: 4px 0; font-size: 13.5px; }
.bl-sum-t { color: var(--mist); flex: 1 1 auto; }
.bl-sum-w { white-space: nowrap; }
.bl-sum-zeile.gesamt {
border-top: 1px solid var(--ink); margin-top: 6px; padding-top: 8px;
font-weight: 600; font-size: 15px;
}
.bl-sum-zeile.gesamt .bl-sum-t { color: var(--ink); }
.bl-sum-hinweis { font-size: 12px; color: var(--mist); padding: 4px 0; }
/* Der Rohertrag steht abgesetzt unter der Summe: er gehört dem
Betrieb, nicht dem Kunden — und auf dem Blatt steht er nie. */
.bl-roh {
display: flex; gap: var(--sp-3); padding: 8px 0 2px; margin-top: 8px;
border-top: 1px dashed var(--line); font-size: 13.5px;
}
.bl-roh .bl-sum-t { flex: 1 1 auto; }
.bl-gruppe {
font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
color: var(--mist); padding: 14px 0 4px;
}
/* Ein stillgelegter Artikel steht weiter da — er hängt an alten
Belegen. Blass genug, um ihn beim Suchen zu übergehen. */
.bl-still td { color: var(--mist); }
/* Der Deckungsbeitrag: eine Zahl, die man auf einen Blick lesen
soll. Rot heißt, der Artikel kostet Geld — das darf man nicht
überlesen. */
/* Die Zeile in der Artikelwahl führt in die Stammdaten, das Plus
in den Beleg. Zwei Ziele, deshalb zwei Trefferflächen. */
.bl-artikelwahl { cursor: pointer; }
.bl-plus {
flex: 0 0 auto; width: 34px; height: 34px; font-size: 20px; line-height: 1;
border: 1px solid var(--accent-line); color: var(--accent-line);
}
.bl-plus:hover { background: var(--accent-soft); }
.bl-db { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gut); }
.bl-db.minus { color: var(--fehler); }
.bl-db.gross { font-weight: 600; font-size: 15px; }
.bl-db-zeile { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 2px 0 4px; }
/* Eine Spalte, nach der nicht sortiert wird, trägt keinen Knopf —
ein Element ohne onclick ist im Haus kein button. */
.crm-sortkopf-tot { display: inline-block; padding: 4px 0; }
.bl-bald { color: var(--hinweis); }
/* Das Angebot unter dem Anschriftfeld: der Kunde hat eine andere
Adresse im CRM als die, die hier steht. Es steht da, es löscht
nichts, und ein Klick übernimmt. */
.bl-anschrift-angebot {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: -6px 0 2px;
}
/* ---------- Belegvorlage (Verwaltung) ----------------------
Links die Bausteine, rechts das Blatt. Nebeneinander, weil man
die Wirkung sehen will, während man schaltet — untereinander
scrollt man zwischen Ursache und Wirkung hin und her. */
.bl-layout { display: flex; gap: var(--sp-4); align-items: flex-start; }
.bl-layout-links { flex: 1 1 340px; min-width: 0; }
/* Die Vorschau bekommt mehr Platz als die Bausteine: sie ist das,
worauf man schaut. */
.bl-layout-rechts { flex: 1.4 1 460px; min-width: 0; position: sticky; top: 12px; }
/* Die Bühne schneidet ab, das Blatt darin wird verkleinert. So
sieht die Vorschau aus wie der Beleg — nur kleiner — statt in
einem zu engen Fenster umzubrechen. */
.bl-vorschau-buehne { overflow: hidden; width: 100%; }
.bl-vorschau {
height: 900px; border: 1px solid var(--line);
border-radius: var(--r-feld); background: #fff;
transform-origin: top left; display: block;
}
@media (max-width: 900px) {
.bl-layout { display: block; }
.bl-layout-rechts { position: static; margin-top: var(--sp-4); }
}
/* Ein Baustein ist EIN Kasten: Kopfzeile und seine Stellschrauben
darin. Vorher standen beide als Geschwister untereinander, und
bei drei aufgeklappten Bausteinen sah man nicht mehr, welches
Feld zu welchem gehörte. */
.bl-block {
border: 1px solid var(--line); border-radius: var(--r-feld);
background: var(--surface); margin-bottom: 8px; overflow: hidden;
}
.bl-block-kopf { display: flex; gap: var(--sp-2); align-items: center; padding: 8px 10px; }
.bl-block-text { flex: 1 1 auto; min-width: 0; }
.bl-block-name { font-weight: 600; font-size: 14px; }
.bl-block-was { font-size: 12px; color: var(--mist); margin-top: 1px; overflow-wrap: anywhere; }
.bl-block .zieh-griff { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; }
.bl-block-schalter { flex: 0 0 auto; }
.bl-block-fest { font-size: 12px; color: var(--mist); white-space: nowrap; }
/* Abgeschaltet heißt blass, nicht weg — man muss sehen, was man
wieder anschalten kann. */
.bl-block.aus { background: var(--frost); }
.bl-block.aus .bl-block-name, .bl-block.aus .bl-block-was { opacity: .5; }
.bl-block-opt {
padding: 12px 12px 14px 48px; border-top: 1px solid var(--line-soft);
background: var(--frost);
}
.bl-block-opt .form-grid { margin: 0; }
.bl-hakenreihe { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bl-hakenreihe .check { font-size: 13px; gap: 6px; }
.bl-hakenreihe input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
.bl-vorschau-quelle { font-size: 12px; color: var(--mist); margin: 0 0 10px; }
@media (max-width: 700px) {
.bl-block-opt { padding-left: 12px; }
}
.bl-budget {
display: flex; gap: var(--sp-2); align-items: center; margin-top: 12px;
padding: 10px 12px; border-radius: var(--r-feld);
background: var(--accent-soft); font-size: 13px;
}
.bl-budget.drueber { background: var(--fehler-bg); color: var(--fehler); }
@media (max-width: 900px) {
/* Aus dem Raster werden Blöcke: Bezeichnung über die volle
Breite, darunter die Zahlen nebeneinander. */
.bl-kopfzeile { display: none; }
.bl-zeile {
grid-template-columns: 34px 20px minmax(0, 1fr) 34px;
gap: 6px; row-gap: 6px; padding: 12px 0;
}
.bl-zeile .bl-feld { grid-column: 3 / 4; }
.bl-zeile .bl-betrag { grid-column: 3 / 4; text-align: left; }
.bl-zeile > .bl-besch { grid-column: 1 / -1; }
.bl-gruppenzeile, .bl-textzeile-bearbeiten { grid-template-columns: 34px 20px minmax(0, 1fr) 34px; }
.bl-gr-schalter { grid-column: 3 / 4; flex-wrap: wrap; }
/* Schmal wird der Einzug flacher — 18 px sind hier ein Fünftel
der Zeilenbreite. */
.bl-unter .bl-bez, .bl-unter .bl-lesefeld { padding-left: 10px; }
}
@media (max-width: 700px) {
.bl-summen { margin-left: 0; max-width: none; }
}
/* Logo in der Verwaltung: die Vorschau zeigt es so groß, wie es
auf dem Beleg steht — sonst rät man an der Pixelzahl herum. */
.logo-vorschau {
padding: 16px; border: 1px solid var(--line); border-radius: var(--r-feld);
background: #fff; display: flex; align-items: center; justify-content: center;
min-height: 90px;
}
.logo-vorschau img { max-width: 100%; height: auto; display: block; }
/* Die Bestandszelle im Artikelstamm: Zahl und Ampel nebeneinander,
ohne dass die Ampel die Zahl aus der Spalte drückt. */
.lg-standzelle { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.lg-standzelle .marke { flex: none; }
/* Das Suchfeld im Kalenderkopf. Schmal genug, dass die
Ansichtswahl daneben passt, breit genug für einen Kundennamen. */
.kal-suche { min-width: 170px; max-width: 260px; flex: 1 1 170px; }
@media (max-width: 720px) { .kal-suche { max-width: none; flex-basis: 100%; } }