/* Nanofassadendaemmung - Interner Bereich. Helles B2B-Design (Primaerblau
   #0b4f8a, Inter), uebernommen vom Vorgaenger. Gilt fuer die oeffentlichen
   Seiten (body.nano-auth) und fuer die eigenen Seiten im Panel (.nano). */

:root {
  --nano-bg: #eef2f6;
  --nano-surface: #ffffff;
  --nano-surface-hover: #f2f6fa;
  --nano-line: #dde3e9;
  --nano-line-strong: #b9c4cf;
  --nano-text: #2a333d;
  --nano-text-muted: #5b6672;
  --nano-text-faint: #8996a5;
  --nano-accent: #0b4f8a;
  --nano-accent-dim: #083b68;
  --nano-accent-glow: rgba(11, 79, 138, 0.1);
  --nano-danger: #b4232a;
  --nano-danger-dim: rgba(180, 35, 42, 0.08);
  --nano-warn: #b9782b;
  --nano-ok: #1f7a4d;
  --nano-radius: 10px;
  --nano-radius-lg: 16px;
  --nano-shadow: 0 14px 36px -16px rgba(16, 32, 52, 0.28);
  --nano-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --nano-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* ============================================================ Oeffentliche Seiten */

body.nano-auth {
  margin: 0;
  min-height: 100vh;
  background: var(--nano-bg);
  color: var(--nano-text);
  font-family: var(--nano-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.nano-auth *, body.nano-auth *::before, body.nano-auth *::after { box-sizing: border-box; }
body.nano-auth h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
body.nano-auth p { margin: 0 0 1rem; }
body.nano-auth a { color: var(--nano-accent); text-decoration: none; }
body.nano-auth a:hover { text-decoration: underline; }
body.nano-auth .shell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 2rem 1.25rem;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(11, 79, 138, 0.08), transparent 70%), var(--nano-bg);
}
body.nano-auth .panel {
  width: 100%; max-width: 25rem; padding: 2rem; background: var(--nano-surface);
  border: 1px solid var(--nano-line); border-radius: var(--nano-radius-lg); box-shadow: var(--nano-shadow);
}
body.nano-auth .brand { display: block; text-align: center; }
body.nano-auth .brand img { height: 40px; width: auto; margin: 0 auto; }
body.nano-auth .panel__head { margin: 1.25rem 0 1.5rem; }
body.nano-auth .panel__sub { margin: 0.45rem 0 0; font-size: 0.88rem; color: var(--nano-text-muted); }
body.nano-auth .foot { margin: 1.5rem 0 0; font-size: 0.78rem; color: var(--nano-text-faint); }
body.nano-auth .alt { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--nano-line); font-size: 0.85rem; color: var(--nano-text-muted); text-align: center; }

/* ============================================================ Gemeinsame Bausteine */

.nano, body.nano-auth { font-family: var(--nano-font); color: var(--nano-text); }
.nano *, .nano *::before, .nano *::after { box-sizing: border-box; }

.nano .field, body.nano-auth .field { display: block; margin-bottom: 1rem; }
.nano .field > label, body.nano-auth .field > label {
  display: block; margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; color: var(--nano-text-muted);
}

.nano input[type='text'], .nano input[type='email'], .nano input[type='password'], .nano input[type='tel'],
.nano input[type='number'], .nano input[type='date'], .nano input[type='search'], .nano input[type='url'],
.nano input:not([type]), .nano select, .nano textarea,
body.nano-auth input[type='text'], body.nano-auth input[type='email'], body.nano-auth input[type='password'],
body.nano-auth select, body.nano-auth textarea {
  width: 100%; padding: 0.65rem 0.8rem; background: #fff; border: 1px solid var(--nano-line-strong);
  border-radius: var(--nano-radius); color: var(--nano-text); font-family: inherit; font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nano input::placeholder { color: var(--nano-text-faint); }
.nano input:focus, .nano select:focus, .nano textarea:focus,
body.nano-auth input:focus, body.nano-auth select:focus, body.nano-auth textarea:focus {
  outline: none; border-color: var(--nano-accent); box-shadow: 0 0 0 3px var(--nano-accent-glow);
}
.nano input[type='checkbox'], .nano input[type='radio'], .nano input[type='file'] { width: auto; }
.nano input[type='file'] { padding: 0; border: 0; background: transparent; font-size: 0.85rem; }
/* Der Knopf der Dateiauswahl. Filaments Grundstil (Tailwind) nimmt ihm Rahmen,
   Hintergrund und Innenabstand - uebrig blieb „Datei auswählen" als blosser Text
   neben „Keine ausgewählt" (gemeldet 14.09.2026). */
.nano input[type='file']::file-selector-button {
  margin: 0 0.6rem 0 0; padding: 0.35rem 0.7rem; border: 1px solid var(--nano-line-strong); border-radius: var(--nano-radius);
  background: var(--nano-surface); color: var(--nano-accent); font-family: inherit; font-size: 0.8rem; font-weight: 600;
  line-height: 1.3; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.nano input[type='file']::file-selector-button:hover { background: var(--nano-surface-hover); border-color: var(--nano-accent); }
.nano input[type='file']:disabled::file-selector-button { opacity: 0.5; cursor: not-allowed; }
.nano select { appearance: auto; }

.nano .hint, body.nano-auth .hint { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--nano-text-faint); }
.nano p.hint { margin-bottom: 0.6rem; }

.nano .btn, body.nano-auth .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.62rem 1.1rem;
  border: 1px solid transparent; border-radius: var(--nano-radius); background: var(--nano-accent); color: #fff;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nano .btn:hover, body.nano-auth .btn:hover { background: var(--nano-accent-dim); color: #fff; text-decoration: none; }
.nano .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nano .btn--full, body.nano-auth .btn--full { width: 100%; }
.nano .btn--ghost { background: transparent; border-color: var(--nano-line-strong); color: var(--nano-text); }
.nano .btn--ghost:hover { background: var(--nano-surface-hover); border-color: var(--nano-accent); color: var(--nano-text); }
.nano .btn--danger { background: transparent; border-color: rgba(180, 35, 42, 0.4); color: var(--nano-danger); }
.nano .btn--danger:hover { background: var(--nano-danger-dim); color: var(--nano-danger); }
.nano .btn--sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; }

.nano .notice, body.nano-auth .notice {
  margin-bottom: 1.1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--nano-line); border-left-width: 3px;
  border-radius: var(--nano-radius); font-size: 0.88rem;
}
.nano .notice--error, body.nano-auth .notice--error { border-color: rgba(180, 35, 42, 0.3); border-left-color: var(--nano-danger); background: var(--nano-danger-dim); color: #7f1d1d; }
.nano .notice--ok, body.nano-auth .notice--ok { border-color: rgba(31, 122, 77, 0.3); border-left-color: var(--nano-ok); background: rgba(31, 122, 77, 0.08); color: #14532d; }
.nano .notice--info, body.nano-auth .notice--info { border-left-color: var(--nano-accent); background: var(--nano-accent-glow); color: var(--nano-accent-dim); }
/* Vier Ansichten fragen seit jeher nach `notice--warn` - die Regel gab es nie.
   Die Warnung stand damit ohne Farbe da und las sich wie Fliesstext, also wie
   das, was sie gerade nicht ist. Das Merkmal --nano-warn war laengst vergeben
   und wurde nirgends benutzt. */
.nano .notice--warn, body.nano-auth .notice--warn { border-color: rgba(185, 120, 43, 0.35); border-left-color: var(--nano-warn); background: rgba(185, 120, 43, 0.09); color: #7c4a10; }

.nano .card {
  background: var(--nano-surface); border: 1px solid var(--nano-line); border-radius: var(--nano-radius-lg);
  padding: 1.4rem; box-shadow: 0 1px 2px rgba(16, 32, 52, 0.04);
}
.nano .card + .card { margin-top: 1.2rem; }
/* ... aber nicht im Raster: dort bestimmt das Raster den Abstand. Ein
   zusaetzlicher oberer Rand schoebe jede Karte ausser der ersten nach
   unten und machte sie genau um diesen Betrag kuerzer - daher die
   unterschiedlich hohen Kacheln.

   WER EIN NEUES KARTENRASTER BAUT, TRAEGT ES HIER EIN. Die Werbung stand
   mehrere Tage schief, ohne dass es jemandem auffiel: „Jetzt ist Hochkant
   auch tiefer?" (18.09.2026). Die zweite Karte einer Zeile sass genau
   1,2 rem tiefer als die erste - sichtbar erst, als der Abstand ueber dem
   Raster stimmte. */
.nano .kacheln .card + .card,
.nano .werbung__raster > .card + .card,
.nano .split50 > .card + .card { margin-top: 0; }

/* Zwei Spalten fuer die kurzen Karten (18.09.2026, gewuenscht: „Kannst Du
   Zugeordnete Kontakte, weitere E-Mails, Notizen, und die weiteren, wenn
   sinnvoll zweispaltig fuer die Uebersicht").

   ZWEI STAPEL, KEIN ZEILENRASTER - und das ist der Unterschied, der am selben
   Tag auffiel („Warum stehen Projekte unter Freigaben?"): Ein Raster ordnet
   zeilenweise. Ist eine Karte hoeher als ihre Nachbarin, klafft daneben ein
   Loch, und die naechste Karte beginnt erst darunter eine neue Zeile. Zwei
   Spalten, die jede fuer sich fliessen, haben das Problem nicht: Jede Karte
   steht direkt unter ihrer Vorgaengerin.

   Unter 62 rem wird daraus ein Stapel - auf dem Telefon aendert sich nichts. */
.nano .karten-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.nano .karten-zwei__spalte > .card + .card { margin-top: 1.2rem; }
/* Der Abstand nach oben und unten fehlte (18.09.2026: „Der Abstand von
   Einspaltig zu zweispaltig ist ohne Lücke?"). `.card + .card` greift hier
   nicht - der Kasten der Spalten ist selbst keine Karte. */
.nano .card + .karten-zwei,
.nano .karten-zwei + .card,
.nano .karten-zwei + .karten-zwei { margin-top: 1.2rem; }
/* JEDE SPALTE MUSS SCHRUMPFEN DUERFEN, und `1fr` allein darf das nicht
   (20.09.2026: „die Spalten sind verschoben?"). Eine Spalte ist ein
   Rasterfeld; ohne `minmax(0, ...)` waechst sie bis zur kleinstmoeglichen
   Breite ihres Inhalts. Im Kontakt stand rechts eine Projektzeile mit einer
   langen Anschrift - die Spalte nahm 796 statt 559 Pixel, die linke bekam
   nur den Rest. Dass die Tabelle in einem `.table-wrap` steckt, half nicht:
   Der Kasten scrollt zwar, seine kleinstmoegliche Breite gibt er trotzdem
   nach oben weiter. `.split50` und `.werbung__raster` machen es seit jeher
   richtig. */
@media (min-width: 62rem) {
  .nano .karten-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.nano .card h2 { margin: 0 0 0.9rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; }
.nano .card h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; }
.nano .card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.1rem; }
.nano .card__head h2 { margin: 0; }
.nano .card__head p { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--nano-text-muted); }

.nano .head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.nano .head h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; display: flex; align-items: center; gap: 0.5rem; }
.nano .head p { margin: 0.3rem 0 0; color: var(--nano-text-muted); font-size: 0.9rem; }
.nano .back { display: inline-block; font-size: 0.85rem; color: var(--nano-text-muted); margin-bottom: 0.4rem; }

.nano .table-wrap { overflow-x: auto; margin: 0 -0.4rem; padding: 0 0.4rem; }
.nano table { width: 100%; border-collapse: collapse; font-size: 0.88rem; white-space: nowrap; }
.nano th {
  padding: 0.5rem 0.7rem 0.5rem 0; border-bottom: 1px solid var(--nano-line-strong); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--nano-text-faint); text-align: left;
}
.nano td { padding: 0.7rem 0.7rem 0.7rem 0; border-bottom: 1px solid var(--nano-line); vertical-align: middle; }
.nano tr:last-child td { border-bottom: none; }
.nano td input, .nano td select { padding: 0.4rem 0.5rem; font-size: 0.85rem; }
/* Auswahlfelder in einer Liste brauchen eine Mindestbreite (18.09.2026:
   „Die Auswahlfelder sind zu klein. Da muss nicht alles erkennbar sein,
   aber nur ein Buchstabe ist zu wenig"). Die Tabelle rechnet mit
   `table-layout: auto`: Name und Kontakt nehmen sich den Platz, und was
   schrumpfen kann, schrumpft - bis auf ein Zeichen. Der Kasten darum
   scrollt waagerecht, die Breite kostet also nichts. */
.nano .liste td select { min-width: 10rem; }

/* EIN LANGER NAME BRICHT UM, statt die Zeile nach rechts zu schieben
   (22.09.2026: „anstelle die Zeile nach rechts zu verschieben ab einer
   gewissen Breite den Namen in die zweite Zeile").

   Ursache ist `white-space: nowrap` fuer jede Tabelle (oben). Bei
   `table-layout: auto` ist die kleinstmoegliche Breite einer Zelle damit
   ihr GANZER Text - „Alexander Herding - Enerflix Energie- und
   Unternehmensberatung" schob die Liste so weit nach rechts, dass Mail und
   Telefon aus dem Bild fielen.

   Mit `normal` ist die kleinstmoegliche Breite nur noch das laengste Wort;
   die Spalte darf schrumpfen und der Name rutscht in die zweite Zeile. Die
   Mindestbreite haelt sie davor, bei einer Liste voller kurzer Namen auf
   eine Spalte aus Einzelwoertern zusammenzufallen.

   GILT SEIT DEM 28.09.2026 AUCH FUER DIE BELEGZELLE der Provisionsseite: Dort
   steht unter der Belegnummer die Quelle der Grundlage ("Technische Betreuung
   (ausfuehrer): 2 % von 2.022,50 EUR netto"), und die ist noch laenger als
   ein langer Name. Ein waagerechter Rollbalken allein half nicht - er
   scrollte, statt zu passen. */
.nano .td-name { white-space: normal; min-width: 12rem; }

.nano .zeile-klickbar { cursor: pointer; }
.nano tr.zeile-klickbar:hover td { background: var(--nano-surface-hover); }
.nano .zeile-klickbar:focus-visible { outline: 2px solid var(--nano-accent); outline-offset: -2px; }

.nano .cell-strong { color: var(--nano-text); font-weight: 500; }
.nano .cell-muted { color: var(--nano-text-muted); }
.nano .mono, body.nano-auth .mono { font-family: var(--nano-font-mono); font-size: 0.85em; letter-spacing: 0.03em; }

.nano .badge {
  display: inline-block; padding: 0.12rem 0.5rem; border: 1px solid var(--nano-line-strong); border-radius: 999px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; color: var(--nano-text-muted); white-space: nowrap;
}
.nano .badge--accent { border-color: rgba(11, 79, 138, 0.3); background: var(--nano-accent-glow); color: var(--nano-accent); }
.nano .badge--ok { border-color: rgba(31, 122, 77, 0.3); color: var(--nano-ok); }
.nano .badge--muted { color: var(--nano-text-faint); }
.nano .badge--danger { border-color: rgba(180, 35, 42, 0.3); color: var(--nano-danger); }

.nano .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.nano .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .nano .grid-2 { grid-template-columns: 1fr; } }
.nano .empty { padding: 2rem 1rem; border: 1px dashed var(--nano-line-strong); border-radius: var(--nano-radius); color: var(--nano-text-faint); font-size: 0.9rem; text-align: center; }
.nano .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nano .link { border: none; background: none; color: var(--nano-text); font-family: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.3rem 0; }
.nano .link--danger { color: var(--nano-danger); }
.nano .link:disabled { color: var(--nano-text-faint); cursor: not-allowed; }
.nano a { color: var(--nano-accent); text-decoration: none; }
.nano a:hover { text-decoration: underline; }
.nano .w-sm { width: 6rem; max-width: 7rem; }
.nano .w-md { width: 8rem; }
.nano .w-num { max-width: 7rem; }
.nano .w-name { min-width: 12rem; }
.nano .w-kurz { max-width: 9rem; }
.nano .w-bez { max-width: 12rem; }
.nano .check { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0; font-size: 0.88rem; }
/* Das Kaestchen schrumpft nie: Auf dem Handy drueckte ein langer Hinweis im
   selben Label den WhatsApp-Schalter der Werbung auf einen Punkt zusammen
   (gemeldet 15.09.2026). Der Hinweis rutscht stattdessen in die naechste Zeile. */
.nano .check input { width: auto; margin: 0; flex: 0 0 auto; }
.nano .check .hint { flex: 1 1 12rem; margin: 0; }
.nano fieldset { border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.6rem 0.9rem 0.9rem; margin: 0 0 1rem; }
.nano legend { font-size: 0.82rem; font-weight: 600; color: var(--nano-text-muted); padding: 0 0.3rem; }
/* Durchsuchbares Auswahlfeld: EIN Feld, in dem man tippt und die Treffer
   direkt darunter sieht. Loest das Paar aus Suchfeld und <select> ab, bei dem
   die Wirkung des Tippens unsichtbar blieb. */
.nano .nano-combo { position: relative; }
.nano .nano-combo__feld { display: block; width: 100%; padding: 0.35rem 0.55rem; border: 1px solid var(--nano-line-strong); border-radius: 0.35rem; background: var(--nano-surface); font: inherit; font-size: 0.85rem; }
.nano .nano-combo__feld:focus { outline: 2px solid var(--nano-accent); outline-offset: -1px; }
.nano .nano-combo__feld--fehlt { border-color: var(--nano-danger); background: var(--nano-danger-dim); }
.nano .nano-combo__liste { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 0.2rem 0 0; padding: 0.2rem; max-height: 15rem; overflow-y: auto; list-style: none; background: var(--nano-surface); border: 1px solid var(--nano-line-strong); border-radius: var(--nano-radius); box-shadow: var(--nano-shadow); }
.nano .nano-combo__treffer { padding: 0.35rem 0.5rem; border-radius: 0.3rem; font-size: 0.85rem; cursor: pointer; }
.nano .nano-combo__treffer:hover,
.nano .nano-combo__treffer--aktiv { background: var(--nano-surface-hover); }
.nano .nano-combo__leer { padding: 0.35rem 0.5rem; color: var(--nano-text-faint); font-size: 0.85rem; }

/* Formular-Raster (feste Spalten statt auto-fit - Chromium-Leerflaechen-Bug). */
.nano .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem 1rem; }
.nano .grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nano .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nano .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .nano .grid, .nano .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .nano .grid, .nano .grid--6, .nano .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .nano .grid, .nano .grid--6, .nano .grid--3, .nano .grid--2 { grid-template-columns: 1fr; } }
.nano .grid > label { display: block; font-size: 0.8rem; color: var(--nano-text-muted); }
.nano .grid > label input, .nano .grid > label select { display: block; width: 100%; margin-top: 0.2rem; }
.nano .col2 { grid-column: span 2; }
.nano .col-wide { grid-column: 1 / -1; }

/* Dashboard */
.nano .hero { margin-bottom: 1.6rem; }
.nano .hero h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.nano .hero p { max-width: 46rem; margin: 0.6rem 0 0; color: var(--nano-text-muted); }
.nano .stat { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; }
.nano a.stat:hover { text-decoration: none; border-color: var(--nano-accent); }
.nano .stat__value { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: var(--nano-accent); }
.nano .stat__label { font-size: 0.82rem; color: var(--nano-text-muted); }
.nano .next { margin-top: 1.2rem; }
.nano .next p { max-width: 46rem; color: var(--nano-text-muted); margin: 0.5rem 0 1rem; }

/* Konto / Profil */
.nano .ident { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.nano .ident__name { font-weight: 700; font-size: 1.05rem; }
.nano .ident__mail { color: var(--nano-text-muted); font-size: 0.9rem; }
.nano .ident__roles { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.3rem 0; }
.nano .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--nano-line); flex-shrink: 0; }
.nano .avatar--empty { display: inline-flex; align-items: center; justify-content: center; background: var(--nano-accent); color: #fff; font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }
.nano .details dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; }
@media (max-width: 900px) { .nano .details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nano .details dt, .nano .konfig dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nano-text-faint); margin-bottom: 0.2rem; }
.nano .details dd, .nano .konfig dd { margin: 0; color: var(--nano-text); }
.nano .konfig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0; }
.nano .konfig dd { font-family: var(--nano-font-mono); font-size: 0.9rem; word-break: break-all; }
.nano .foto { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.nano .foto__ctrl { display: flex; flex-direction: column; gap: 0.3rem; }
.nano .save-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.nano .autosave-status { font-size: 0.85rem; color: var(--nano-text-muted); }
.nano .pw-form { max-width: 26rem; }
.nano .pw { display: flex; gap: 0.35rem; align-items: center; }
.nano .pw input { font-size: 0.82rem; padding: 0.35rem 0.5rem; width: auto; }
.nano .codes { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.nano .codes li { border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.6rem 0.8rem; }
.nano .code-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
/* Feste Einladungslinks (10.09.2026): Kopf- und Fusszeile je Rolle. Sie
   teilen sich die Kartenliste .codes - eine zweite Liste mit denselben
   Raendern waere nur eine zweite Stelle zum Nachziehen. */
.nano .elink__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.nano .elink__fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.nano .elink__fuss form { margin: 0; }
.nano .teilen { display: flex; gap: 0.5rem; align-items: center; }
.nano .teilen__feld { flex: 1 1 18rem; min-width: 0; font-size: 0.82rem; }
.nano .teilen__btn { flex: 0 0 auto; }
.nano .teilen__hint { margin: 0.3rem 0 0.6rem; }
.nano .qr { margin-bottom: 0.6rem; }
.nano .qr > summary { cursor: pointer; font-size: 0.85rem; color: var(--nano-text-muted); }
.nano .qr__inhalt { display: flex; gap: 1rem; align-items: flex-start; margin-top: 0.6rem; flex-wrap: wrap; }
.nano .qr__bild { width: 180px; height: 180px; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); background: #fff; }
.nano .qr__aktionen { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.nano .code-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.nano .code-edit label { display: block; font-size: 0.78rem; color: var(--nano-text-muted); }
.nano .code-edit input, .nano .code-add input { margin-top: 0.15rem; }
.nano .code-edit input[type='date'], .nano .code-add input[type='date'] { width: auto; }
.nano .code-del { margin-top: 0.35rem; }
.nano .code-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--nano-line); }
.nano .code-add .mini { display: flex; flex-direction: column; font-size: 0.78rem; color: var(--nano-text-muted); }
.nano .code-add input[name='code'] { flex: 1 1 12rem; width: auto; }
.nano .vereinbarung { max-width: 70ch; }
.nano .vereinbarung h3 { font-size: 0.95rem; margin: 1rem 0 0.35rem; }
.nano .vereinbarung p { margin: 0 0 0.6rem; color: var(--nano-text-muted); font-size: 0.9rem; }
.nano .vereinbarung-form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--nano-line); }
.nano .vereinbarung-form .btn { align-self: flex-start; }
.nano .vereinbarung-details { margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--nano-line); }
.nano .vereinbarung-details summary { cursor: pointer; font-size: 0.85rem; color: var(--nano-text-muted); }
.nano .verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.88rem; }
.nano .verlauf li { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.nano .verlauf-zeit { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.nano .verlauf-nutzer { flex: 0 0 auto; font-weight: 600; }
.nano .verlauf-text { flex: 1 1 auto; min-width: 12rem; }
.nano .mgmt { padding: 0.5rem 0; border-bottom: 1px solid var(--nano-line); margin-bottom: 0.6rem; }
.nano .mgmt select { display: block; width: 100%; max-width: 22rem; margin: 0.2rem 0 0.4rem; }
.nano .menu-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--nano-text-muted); margin-bottom: 0.3rem; }
.nano .rollen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 0.8rem; margin-bottom: 0.5rem; }
@media (max-width: 900px) { .nano .rollen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nano .rollen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nano .rolle-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; cursor: pointer; }
.nano .rolle-check input { width: auto; margin: 0; }
.nano .rolle-check--fix { color: var(--nano-text-muted); }
.nano .betreuer label { display: block; font-size: 0.78rem; color: var(--nano-text-muted); margin: 0.25rem 0; }
.nano .konto-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.nano .code-zeile { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.nano .code-feld { flex: 1 1 auto; min-width: 0; font-family: var(--nano-font-mono); font-size: 0.82rem; }
.nano .logo-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.nano .logo { max-width: 220px; max-height: 120px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.4rem; background: #fff; }
.nano .logo--empty { display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 100px; color: var(--nano-text-muted); font-size: 0.85rem; }
.nano .logo-controls { display: flex; flex-direction: column; gap: 0.4rem; }

/* Rechner */
.nano .layout { display: grid; grid-template-columns: 22rem 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 820px) { .nano .layout { grid-template-columns: 1fr; } }
.nano .form--sticky { position: sticky; top: 5rem; }
.nano .rechner__h { font-size: 1.1rem; margin: 0 0 0.4rem; }
.nano .sys-list { display: flex; flex-direction: column; margin: 0.6rem 0 1rem; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); overflow: hidden; }
.nano .sys-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; }
.nano .sys-row + .sys-row { border-top: 1px solid var(--nano-line); }
.nano .sys-row__name { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; }
.nano .sys-row__m2 { flex: 0 0 4.5rem; width: 4.5rem; text-align: right; padding: 0.4rem 0.5rem; }
.nano .sys-row__unit { flex: 0 0 1.2rem; font-size: 0.8rem; color: var(--nano-text-muted); }
.nano .stufe-wahl { margin: 0.6rem 0 0.9rem; }
.nano .stufe-wahl__label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--nano-text-muted); margin-bottom: 0.35rem; }
.nano .stufe-wahl__opts { display: flex; flex-wrap: wrap; border: 1px solid var(--nano-line-strong); border-radius: var(--nano-radius); overflow: hidden; }
.nano .stufe-opt { flex: 1 1 0; text-align: center; padding: 0.45rem 0.4rem; font-size: 0.85rem; cursor: pointer; color: var(--nano-text); background: var(--nano-surface); user-select: none; position: relative; }
.nano .stufe-opt + .stufe-opt { border-left: 1px solid var(--nano-line); }
.nano .stufe-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.nano .stufe-opt--active { background: var(--nano-accent); color: #fff; font-weight: 600; }
.nano .result { display: flex; flex-direction: column; gap: 1rem; }
.nano .pricebox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: var(--nano-radius-lg); background: linear-gradient(135deg, var(--nano-accent), var(--nano-accent-dim)); color: #fff; }
.nano .pricebox__big { display: block; font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.nano .pricebox__m2 { display: block; font-size: 0.9rem; opacity: 0.9; }
.nano .rechner-tabelle td:last-child, .nano .rechner-tabelle th:last-child, .nano .rechner-tabelle td:nth-child(2), .nano .rechner-tabelle th:nth-child(2) { text-align: right; }
.nano .rechner-tabelle th:first-child, .nano .rechner-tabelle td:first-child { text-align: left; }
.nano tr.sum td { font-weight: 700; border-top: 1px solid var(--nano-line-strong); }
.nano tr.group td { background: var(--nano-surface-hover); font-weight: 600; font-size: 0.85rem; text-align: left; }
.nano tr.line td { border-top: 1px solid var(--nano-line); }
.nano .intern { border-color: rgba(180, 35, 42, 0.35); background: linear-gradient(180deg, rgba(180, 35, 42, 0.04), transparent 40%), var(--nano-surface); }
.nano .intern table td:last-child { font-variant-numeric: tabular-nums; }

/* AUFKLAPPBARE KAESTEN MIT VERTRAULICHEN ZAHLEN (22.09.2026: „und zwar
   aufklappbar"). Der Pfeil steht vor der Ueberschrift, die Ueberschrift
   selbst sieht aus wie jede andere Kartenueberschrift - sonst faende sie
   niemand wieder. Eingeklappt, weil Margen nicht mitlaufen sollen, wenn
   jemand den Bildschirm teilt oder ein Foto der Kalkulation macht. */
.nano .intern-klapp > summary {
  cursor: pointer;
  list-style: none;
  /* Zugeklappt braucht die Zeile keinen Abstand nach unten - sonst steht
     der Kasten halb leer da. */
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nano .intern-klapp > summary::-webkit-details-marker { display: none; }
.nano .intern-klapp > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 0.36rem solid currentColor;
  border-top: 0.28rem solid transparent;
  border-bottom: 0.28rem solid transparent;
  transition: transform 0.15s ease;
}
.nano .intern-klapp[open] > summary::before { transform: rotate(90deg); }
.nano .intern-klapp[open] > summary { margin-bottom: 0.9rem; }
.nano .farben { display: block; font-size: 0.85rem; color: var(--nano-text-muted); margin: 0.5rem 0 0.8rem; }
.nano .farben input { display: block; width: 6rem; margin-top: 0.2rem; }
.nano .flaeche { font-size: 0.85rem; font-weight: 400; }
.nano .tarif-tabelle td:not(:first-child), .nano .tarif-tabelle th:not(:first-child) { text-align: right; }
.nano .tarif-tabelle td { vertical-align: top; }
.nano .pos { color: #1a7f4b; font-weight: 600; }
.nano .neg { color: var(--nano-danger); font-weight: 600; }
.nano .prov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1000px) { .nano .prov-grid { grid-template-columns: 1fr; } }
.nano .prov-karte { border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.8rem 0.9rem; }
.nano .prov-karte h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.nano .prov-topf { font-size: 0.85rem; color: var(--nano-text-muted); margin-bottom: 0.5rem; }
.nano .prov-tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: normal; }
.nano .prov-tabelle td { padding: 0.25rem 0; vertical-align: top; border: 0; }
.nano .prov-betrag { text-align: right; white-space: nowrap; }
.nano .prov-summe td { border-top: 1px solid var(--nano-line); padding-top: 0.4rem; color: var(--nano-text-muted); }
.nano .prov-rest td { font-weight: 700; }

/* AUF DEM HANDY BRECHEN DIE RECHNERTABELLEN IN BLOECKE (22.09.2026: „in der
   mobilen Ansicht der Internen Preisrechner könnte er die Preise nicht
   sehen"). Gemessen bei 375 Pixel: Die Kalkulation wurde 565 Pixel breit,
   der sichtbare Kasten war 315 - die Spalte „Betrag netto" begann erst bei
   406, also 55 Pixel hinter dem Rand, und „brutto" noch weiter. Seitlich
   wischen ging zwar, aber wer nicht darauf kommt, sieht keinen Preis.

   Ursache ist `white-space: nowrap` fuer jede Tabelle (oben) zusammen mit
   vier bis sechs Spalten, von denen zwei langen Text tragen. Statt Spalten
   zu kuerzen oder eine wegzulassen - beides waere ein Informationsverlust -
   wird jede Zeile ein Block.

   DIE BESCHRIFTUNG KOMMT AUS `data-label`, nicht aus `nth-child`: In der
   Tarif-Tabelle blendet `rechner.margen` drei Spalten ein oder aus, und eine
   Nummerierung stuende danach an der falschen Zelle.

   NICHT FUER JEDE TABELLE. Der Intern-Kasten misst 303 Pixel und passt; als
   Bloecke braeuchte er dreimal so viel Hoehe fuer dieselbe Auskunft. */
@media (max-width: 40rem) {
  .nano .tab-bricht { white-space: normal; }
  .nano .tab-bricht thead { display: none; }
  .nano .tab-bricht tbody,
  .nano .tab-bricht tr,
  .nano .tab-bricht td { display: block; width: auto; }
  .nano .tab-bricht tr { padding: 0.55rem 0; border-bottom: 1px solid var(--nano-line); }
  .nano .tab-bricht tr:last-child { border-bottom: none; }
  .nano .tab-bricht td,
  .nano .tab-bricht td:last-child,
  .nano .tab-bricht td:nth-child(2),
  .nano .tab-bricht td:not(:first-child) { border: none; padding: 0.1rem 0; text-align: left; }
  .nano .tab-bricht td[data-label]::before { content: attr(data-label) ": "; color: var(--nano-text-faint); font-size: 0.78rem; }
  /* Die erste Spalte traegt den Namen - sie beschriftet sich selbst. */
  .nano .tab-bricht td:first-child::before { content: none; }
  .nano .tab-bricht td:first-child { padding-bottom: 0.2rem; }
  .nano .tab-bricht tr.group { padding: 0.4rem 0.5rem; background: var(--nano-surface-hover); font-weight: 600; }
  .nano .tab-bricht tr.sum { border-top: 1px solid var(--nano-line-strong); font-weight: 700; }
  .nano .tab-bricht tr.sum td, .nano .tab-bricht tr.line td, .nano .tab-bricht tr.group td { border-top: none; }
}

/* Rechner-Einstellungen */
.nano .sys { padding: 0.9rem; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); }
.nano .sys + .sys { margin-top: 0.8rem; }
.nano .sys__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.nano .sys__head .check { margin: 0; }
.nano .sys__layers { display: flex; flex-direction: column; gap: 0.5rem; }
.nano .layer { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.nano .layer select { max-width: 16rem; width: auto; }
.nano .layer input { width: auto; }
.nano .prov-perioden { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 0.7rem; }
.nano .prov-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.6rem; align-items: end; }
.nano .prov-row label { display: block; font-size: 0.78rem; color: var(--nano-text-muted); }
.nano .prov-row input { display: block; width: 100%; margin-top: 0.15rem; }
.nano .prov-del { border: none; background: none; color: var(--nano-danger); cursor: pointer; font-family: inherit; font-size: 0.82rem; padding: 0 0 0.55rem; }
@media (max-width: 640px) { .nano .prov-row { grid-template-columns: 1fr 1fr; } }
.nano .actions { margin-top: 1.2rem; }
.nano .reset { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--nano-line); }
.nano .margen-block .w-sm { width: 5rem; }

/* Projekte */
.nano .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }
.nano .split .card + .card { margin-top: 1.2rem; }
.nano .split50 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }
@media (max-width: 900px) { .nano .split, .nano .split50 { grid-template-columns: 1fr; } }
.nano .pdata--stack { display: flex; flex-direction: column; align-items: stretch; gap: 0.9rem; }
.nano .pdata--stack .field { margin-bottom: 0; }
.nano .pdata--stack .btn { align-self: flex-start; }
.nano .notiz-form { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; margin-bottom: 1rem; }
.nano .notiz-form textarea { width: 100%; resize: vertical; }
.nano .notizen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.nano .notizen li { border-top: 1px solid var(--nano-line); padding-top: 0.7rem; }
.nano .notiz-meta { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.85rem; }
.nano .notiz-text { white-space: pre-line; margin: 0.25rem 0 0; }
/* Kommentare zu Social-Beitraegen (13.09.2026): je Beitrag Faeden aus Kommentar und Antworten. */
.nano .kommentare-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0; }
.nano .kommentare + .kommentare { margin-top: 1.1rem; }
.nano .kommentar--antwort { margin-left: 1.6rem; }
.nano .kommentar--offen { border-top-color: var(--nano-accent); }
.nano .kommentar-aktion { margin: 0.15rem 0 0; }
.nano .kommentar-aktionen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.1rem; }
.nano .kommentar-antwort summary { display: inline; list-style: none; }
.nano .kommentar-antwort summary::-webkit-details-marker { display: none; }
.nano .kommentar-antwort[open] { flex: 1 1 100%; order: 10; }
.nano .kommentar-antwort .notiz-form { margin: 0.4rem 0 0.3rem; }
.nano .kommentare-fehler { color: var(--nano-danger); overflow-wrap: anywhere; }
/* Sprung aus der Beitragsliste (Q5): Die Kopfleiste des Panels steht oben fest und verdeckte sonst den Kopf der Karte. */
.nano .card[id^="beitrag-"] { scroll-margin-top: 5.5rem; }
.nano .kommentar-verweis { margin-left: 0.4rem; font-size: 0.82rem; white-space: nowrap; }
.nano .anfrage-fakten { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 0.9rem; }
.nano .anfrage-fakten dt { font-weight: 600; font-size: 0.88rem; }
.nano .anfrage-fakten dd { margin: 0; font-size: 0.9rem; color: var(--nano-text-muted); min-width: 0; overflow-wrap: anywhere; }
.nano .anfrage-block { border-top: 1px solid var(--nano-line); padding-top: 0.7rem; margin-top: 0.7rem; }
.nano .anfrage-block h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.nano .anfrage-mehrzeilig { white-space: pre-line; color: var(--nano-text-muted); margin: 0; }
.nano .doks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.nano .doks li { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.nano .doks__datum { margin-left: auto; }
.nano .datei-tabs, .nano .komm-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
/* Trennt das Schreiben von der Ablage - beides steht in einem Streifen. */
.nano .komm-tabs__trenner { align-self: stretch; width: 1px; margin: 0.1rem 0.35rem; background: var(--nano-line-strong); }
.nano .datei-tab, .nano .komm-tab { padding: 0.35rem 0.8rem; border: 1px solid var(--nano-line); border-radius: 999px; background: var(--nano-surface); color: var(--nano-text-muted); font-size: 0.85rem; cursor: pointer; font-family: inherit; }
.nano .datei-tab:hover, .nano .komm-tab:hover { border-color: var(--nano-line-strong); color: var(--nano-text); }
.nano .datei-tab--aktiv, .nano .komm-tab--aktiv, .nano .datei-tab--aktiv:hover, .nano .komm-tab--aktiv:hover { background: var(--nano-accent-glow); border-color: var(--nano-accent); color: var(--nano-accent); }
.nano .bild-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
@media (max-width: 640px) { .nano .bild-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nano .bild-kachel { margin: 0; }
.nano .bild-kachel img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--nano-radius); border: 1px solid var(--nano-line); display: block; }
.nano .bild-kachel figcaption { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.75rem; margin-top: 0.25rem; align-items: baseline; }
.nano .bild-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nano-text-muted); }
.nano .datei-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.88rem; }
.nano .datei-liste li { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; }
.nano .datei-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nano .upload-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.9rem; border-top: 1px solid var(--nano-line); padding-top: 0.9rem; }
.nano .upload-hinweis { font-size: 0.78rem; margin: 0.3rem 0 0; }
.nano .kontakt-neu { margin-top: 1rem; }
.nano .kontakt-neu > summary { display: inline-block; list-style: none; cursor: pointer; }
.nano .kontakt-neu > summary::-webkit-details-marker { display: none; }
.nano .kontakt-neu__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; margin-top: 0.8rem; }
.nano .kontakt-neu__form .field { margin-bottom: 0; flex: 1 1 14rem; max-width: 22rem; }
.nano .kontakt-neu__hinweis { margin: 0.6rem 0 0; font-size: 0.82rem; }
/* Der Schalter braucht die ganze Zeile, sonst quetscht er sich neben ein Feld. */
.nano .kontakt-neu__form .field--schalter { max-width: none; display: flex; align-items: flex-start; gap: 0.5rem; flex: 1 1 100%; font-size: 0.86rem; line-height: 1.35; cursor: pointer; }
.nano .kontakt-neu__form .field--schalter input { width: auto; margin: 0.15rem 0 0; }

/* Seitenkopf der Kontaktseite: links wer das ist, rechts was man aendert.
   Gewuenscht am 18.09.2026: Stand und Tippgeber oben rechts. Die Regeln
   nennen .fi-header MIT - Filaments Stylesheet wird nach diesem geladen und
   gewaenne sonst jeden Gleichstand. */
.kontakt-kopf.fi-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 1rem 2.5rem; }
.kontakt-kopf.fi-header > .kontakt-kopf__links { flex: 1 1 18rem; min-width: 0; }
.kontakt-kopf .fi-header-heading { margin: 0.15rem 0 0; }
.kontakt-kopf .fi-header-subheading { margin: 0.15rem 0 0; }
.kontakt-kopf .kontakt-kopf__aktion { margin-top: 0.9rem; }
/* Vor und zurueck in derselben Liste (18.09.2026). Der ausgegraute Knopf
   bleibt stehen, statt zu verschwinden - sonst huepfen die anderen. */
.kontakt-kopf .kontakt-kopf__blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.85rem; }
.kontakt-kopf .kontakt-kopf__blaettern .is-aus { opacity: 0.45; cursor: default; }
.kontakt-kopf.fi-header > .kontakt-kopf__wahl { flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 0.6rem; }
.kontakt-kopf .kontakt-kopf__feld { flex: 0 1 13rem; min-width: 9rem; }
.kontakt-kopf .kontakt-kopf__feld label { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nano-text-faint); }
.kontakt-kopf .kontakt-kopf__feld select { width: 100%; }

/* Sprungmarken in den Kontakten (18.09.2026): Suche, Blaettern und jede
   Statusaenderung laden die Seite neu und landeten ganz oben. Der Abstand
   haelt das Ziel unter der Kopfleiste hervor. */
.nano #kontakte, .nano .liste tr[id^="k-"], .nano .kanban__karte[id^="k-"] { scroll-margin-top: 5rem; }

/* Seitenkopf des Projekts: links die Identitaet, rechts die Bearbeitung.
   Die Regeln nennen .fi-header MIT: Filaments Stylesheet wird nach diesem
   geladen und gewaenne sonst jeden Gleichstand - der Kopf blieb dann
   einspaltig und das Titelfeld schmal. */
.projekt-kopf.fi-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 1rem 2.5rem; }
.projekt-kopf.fi-header > .projekt-kopf__links { flex: 0 0 auto; min-width: 0; }
.projekt-kopf .fi-header-heading { margin: 0.15rem 0 0; }
.projekt-kopf .fi-header-subheading { margin: 0.15rem 0 0; }

/* Rueckweg als leiser Link ueber der Nummer, nicht als Schalter daneben. */
.projekt-kopf .projekt-kopf__zurueck { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nano-text-faint); text-decoration: none; }
.projekt-kopf .projekt-kopf__zurueck:hover { color: var(--nano-accent); }
.projekt-kopf .projekt-kopf__aktion { margin-top: 0.9rem; }

/* Vor und zurueck zwischen Vorhaben (22.09.2026) - dieselbe Leiste wie in
   den Kontakten, damit beide Seiten sich gleich bedienen lassen. */
.projekt-kopf .projekt-kopf__blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.85rem; }
.projekt-kopf .projekt-kopf__blaettern .is-aus { opacity: 0.45; cursor: default; }

/* Das Titelfeld nimmt den freien Platz im Kopf. */
/* Titel oben ueber die volle Breite, Status und Speichern darunter -
   die Adresse ist das laengste Feld im Kopf und braucht den Platz. */
.projekt-kopf.fi-header > .projekt-kopf__form { flex: 1 1 24rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; min-width: 0; }
.projekt-kopf .projekt-kopf__form .field { margin-bottom: 0; min-width: 0; }
.projekt-kopf .projekt-kopf__form .field--titel { width: 100%; }
.projekt-kopf .projekt-kopf__form label { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nano-text-faint); }

/* Status und Speichern nebeneinander - das spart eine Zeile. */
/* Status und Speichern bleiben nebeneinander, rechtsbuendig unter dem Titel. */
.projekt-kopf .projekt-kopf__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 0.6rem; }
.projekt-kopf .projekt-kopf__zeile .field--status { flex: 0 0 10rem; }
.projekt-kopf .projekt-kopf__hinweis { padding-bottom: 0.45rem; color: var(--nano-ok); font-size: 0.8rem; white-space: nowrap; animation: nano-verblassen 6s ease-out forwards; }

@keyframes nano-verblassen { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .projekt-kopf .projekt-kopf__hinweis { animation: none; } }

/* Tippgeberzusagen: welcher Stand galt wann */
.nano .zusagen { margin: 0.2rem 0 1rem; }
.nano .zusagen__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nano-text-faint); }
.nano .zusagen__kopf .cell-muted { font-weight: 400; letter-spacing: 0; text-transform: none; }
.nano .zusagen__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.nano .zusagen__liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; }

/* Vertriebsadresse: feste Teile als Text, tippbar ist nur das Kuerzel */
.nano .vertrieb__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.nano .vertrieb__fest { font-family: var(--nano-mono, ui-monospace, monospace); font-size: 0.88rem; color: var(--nano-text-muted); white-space: nowrap; }
.nano .vertrieb__feld { flex: 0 1 12rem; min-width: 6rem; width: auto; font-family: var(--nano-mono, ui-monospace, monospace); }
.nano .vertrieb .hint { margin-top: 0.4rem; }

/* Signatur unter dem Nachrichtenfeld - Lesefeld, kein Eingabefeld */
.nano .signatur { margin: 0.6rem 0; border: 1px solid var(--nano-line); border-left: 3px solid var(--nano-line-strong); border-radius: 0.5rem; background: var(--nano-surface-hover); }
.nano .signatur__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--nano-line); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nano-text-faint); }
.nano .signatur__kopf .cell-muted { font-weight: 400; letter-spacing: 0; text-transform: none; }
.nano-signatur { margin: 0; font-family: inherit; font-size: 0.86rem; line-height: 1.45; white-space: pre-wrap; }
.nano .signatur__text { margin: 0; padding: 0.6rem 0.7rem; font-family: inherit; font-size: 0.86rem; line-height: 1.45; white-space: pre-wrap; color: var(--nano-text-muted); }

/* Kundenansicht: eigene Projekte */
.nano .kunde-projekte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.8rem; }
.nano .kunde-projekt { display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: inherit; }
.nano .kunde-projekt:hover { border-color: var(--nano-accent); }
.nano .kunde-projekt__titel { font-weight: 600; }
.nano .kunde-projekt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.84rem; }
.nano .kunde-kontakt { display: flex; flex-direction: column; gap: 0.1rem; }
.nano .kunde-kontakt a { width: fit-content; }

/* Dashboard-Kacheln: was jemand anfassen muss, steht oben */
.nano .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.nano .stat--akzent { border-color: var(--nano-accent); }
.nano .stat--akzent .stat__value { color: var(--nano-accent); }
.nano .stat--warnung { border-color: rgba(185, 28, 28, 0.4); }
.nano .stat--warnung .stat__value { color: #b91c1c; }

/* Beteiligte Profile: links die Funktion, rechts die Namen als Fliesstext */
.nano .rollen { display: flex; flex-direction: column; gap: 0; margin: 0; }
.nano .rollen__zeile { display: grid; grid-template-columns: minmax(9rem, 1fr) 3fr; gap: 0.5rem 1.2rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--nano-line); }
.nano .rollen__zeile:first-child { border-top: 0; }
.nano .rollen__name { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nano-text-faint); }
.nano .rollen__wert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; margin: 0; min-width: 0; }
.nano .rollen__profile { display: inline; }
.nano .rollen__profil { display: inline; white-space: nowrap; }
.nano .rollen__profil form { display: inline; }
.nano .rollen__trenner { margin: 0 0.35rem; color: var(--nano-text-faint); }

.nano .rollen__plus { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 1px solid var(--nano-line-strong); border-radius: 999px; background: var(--nano-surface); color: var(--nano-text-muted); font-size: 0.95rem; line-height: 1; cursor: pointer; font-family: inherit; }
.nano .rollen__plus:hover { border-color: var(--nano-accent); color: var(--nano-accent); }
.nano .rollen__weg { margin-left: 0.25rem; padding: 0; border: 0; background: none; color: var(--nano-text-faint); font-size: 0.9rem; line-height: 1; cursor: pointer; font-family: inherit; }
.nano .rollen__weg:hover { color: var(--nano-danger, #b91c1c); }

.nano .rollen__waehlen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; flex: 1 1 16rem; min-width: 0; }
.nano .rollen__waehlen select, .nano .rollen__waehlen .nano-combo { flex: 1 1 12rem; min-width: 0; }

/* Kleines Auswahlfenster */
dialog.nano-dialog { width: min(30rem, calc(100vw - 2rem)); padding: 1.1rem 1.2rem; border: 1px solid var(--nano-line-strong); border-radius: 0.7rem; background: var(--nano-surface); color: var(--nano-text); font-family: inherit; }
dialog.nano-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
dialog.nano-dialog h3 { margin: 0 0 0.8rem; font-size: 1rem; }
dialog.nano-dialog .field { margin-bottom: 0.8rem; }
dialog.nano-dialog label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nano-text-faint); }
dialog.nano-dialog input, dialog.nano-dialog select { width: 100%; }
.nano-dialog__fuss { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

/* Anhaenge waehlen (Notiz und E-Mail) */
.nano .anhang { margin: 0.2rem 0 0.6rem; border: 1px solid var(--nano-line); border-radius: 0.6rem; background: var(--nano-surface); }
.nano .anhang__auf { padding: 0.45rem 0.75rem; list-style: none; cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--nano-text-muted); }
.nano .anhang__auf::-webkit-details-marker { display: none; }
.nano .anhang__auf::before { content: '▸'; display: inline-block; margin-right: 0.4rem; transition: transform 0.15s; }
.nano .anhang[open] > .anhang__auf::before { transform: rotate(90deg); }
.nano .anhang__inhalt { padding: 0 0.75rem 0.75rem; border-top: 1px solid var(--nano-line); }
.nano .anhang__inhalt .datei-tabs { margin: 0.7rem 0 0.6rem; }
.nano .anhang__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; max-height: 14rem; overflow-y: auto; }
.nano .anhang__liste label { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.86rem; cursor: pointer; }
.nano .anhang__liste input { width: auto; margin: 0; flex: 0 0 auto; }
/* Drei Bloecke nebeneinander: Liefer-, Ausfuehrungsadresse, Ansprechpartner. */
.nano .adress-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 0.8rem; }
@media (max-width: 900px) { .nano .adress-spalten { grid-template-columns: 1fr; } }
.nano .adress-block { display: grid; gap: 0.35rem; align-content: start; }
.nano .adress-block .hint { margin: 0; }
/* Die Anschrift im Bestellblock des Rechners - derselbe Aufbau, nur allein statt in drei Spalten. */
.nano .bestell-adresse { margin: 0.5rem 0 0.7rem; }
.nano .anhang__hinweis { margin: 0.5rem 0 0; font-size: 0.8rem; }
.nano .anhang__neu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--nano-line); }
.nano .anhang__neu .field { margin-bottom: 0; flex: 1 1 16rem; }
.nano .anhang__neu .anhang__hinweis { flex: 1 1 100%; margin: 0; }
/* Die gewaehlten Dateien stehen unter dem Knopf, nicht im Browserfeld: Dort
   war die Auswahl ein graues "3 Dateien" und im Zweifel abgeschnitten. */
.nano .anhang__waehlen { display: inline-block; cursor: pointer; }
.nano .anhang__gewaehlt { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.nano .anhang__gewaehlt li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; }
.nano .anhang__gewaehlt li > span:first-child { overflow-wrap: anywhere; }
.nano .anhang__weg { margin-left: auto; flex: 0 0 auto; }

/* Anhaenge unter einem Eintrag der Zeitleiste */
.nano .anhang-liste { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nano .anhang-liste__stueck a, .nano .anhang-liste__stueck > span { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border: 1px solid var(--nano-line); border-radius: 999px; background: var(--nano-surface); font-size: 0.8rem; text-decoration: none; color: var(--nano-text-muted); }
.nano .anhang-liste__stueck a:hover { border-color: var(--nano-accent); color: var(--nano-accent); }

/* EIN SUCHFORMULAR IST EINE ZEILE (21.09.2026: „die 3 Sachen können
   sicherlich auch in eine Zeile"). Bis dahin stand jedes Feld auf einer
   eigenen, und die Knöpfe auf einer dritten.

   Der Grund war eine halbe Regel: `.link-form` setzte `flex-wrap`, aber
   nichts setzte `display: flex`. Ohne Flex-Kasten tut `wrap` nichts, und die
   Zeile darunter (`.field { flex: … }`) wartete seit jeher auf einen. Nur
   dort, wo `.upload-form` daneben stand, brachte die ihn mit - deshalb fiel
   es an der einen Stelle nie auf.

   Das erste Feld wächst (die Suche), die weiteren bleiben so breit, wie sie
   sein müssen, die Knöpfe stehen am Ende. Wird es eng, bricht es um. Die
   Knöpfe richten sich an der Unterkante der Felder aus, nicht an deren
   Mitte: Sonst schwebten sie neben der Beschriftung. */
.nano .link-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.7rem; }
.nano .link-form .field { margin-bottom: 0; flex: 1 1 14rem; }
.nano .link-form > label.mini { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; flex: 0 1 12rem; min-width: 0; font-size: 0.78rem; color: var(--nano-text-muted); }
.nano .link-form > label.mini:first-of-type { flex: 1 1 16rem; }
.nano .link-form > label.mini > * { width: 100%; }

/* Notizen am Profil (18.09.2026) - der Text bricht um, Zeit und Name nicht */
.nano .notiz-text { flex: 1 1 18rem; white-space: normal; }
.nano #notizen .notiz-form { margin-bottom: 0.9rem; }
/* Die Auswahl hinter dem @ (18.09.2026). Sie liegt ueber dem Feld, nicht
   darunter im Fluss: Sonst schoebe sie bei jedem Tastendruck die halbe Karte.

   Das Feld nimmt die ganze Breite („mach das Notizfeld breiter, wie den
   Txt") - ein Textfeld, das schmaler ist als der Hinweis darunter, sieht aus
   wie ein Versehen. */
/* Die Empfehlungen eines Tippgebers (21.09.2026): eine Auflistung, keine
   Tabelle - es steht je Zeile ein Name, ein Datum und was daraus wurde. Die
   Vorhaben ruecken ein und haengen an einer Linie, damit sichtbar bleibt,
   zu welchem Namen sie gehoeren. */
.nano .empfehlungen { list-style: none; margin: 0; padding: 0; }
.nano .empfehlungen > li { padding: 0.55rem 0; border-bottom: 1px solid var(--nano-line); }
.nano .empfehlungen > li:last-child { border-bottom: none; }
.nano .empfehlungen__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
/* Name und Stand gehoeren zusammen und bleiben links; „seit …" haelt rechts
   die Kante (23.09.2026). */
.nano .empfehlungen__wer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; min-width: 0; }
.nano .empfehlungen__name { font-weight: 600; overflow-wrap: anywhere; }
.nano .empfehlungen__vorhaben { list-style: none; margin: 0.4rem 0 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--nano-line-strong); display: flex; flex-direction: column; gap: 0.3rem; }
.nano .empfehlungen__vorhaben li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; font-size: 0.85rem; color: var(--nano-text-muted); }
.nano .empfehlungen__vorhaben .mono { font-size: 0.8rem; }

/* Der Kasten nimmt die ganze Breite, auch in `.notiz-form`: Die ist eine
   Spalte mit `align-items: flex-start`, und darin schrumpft ein Kind auf
   seinen Inhalt. Vorher war das Textfeld selbst das Kind und trug sein
   `width: 100%`; jetzt steht dieser Kasten dazwischen (18.09.2026). */
.nano .erwaehnung-feld { position: relative; width: 100%; align-self: stretch; }
.nano .erwaehnung-feld textarea { width: 100%; display: block; box-sizing: border-box; }
.nano .erwaehnung-wahl { position: absolute; z-index: 30; left: 0; right: 0; margin: 0.15rem 0 0; padding: 0.25rem; list-style: none; max-height: 14rem; overflow-y: auto; background: var(--nano-surface); border: 1px solid var(--nano-line-strong); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.nano .erwaehnung-wahl__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 0.35rem; cursor: pointer; font-size: 0.9rem; }
.nano .erwaehnung-wahl__zeile:hover, .nano .erwaehnung-wahl__zeile.ist-gewaehlt { background: var(--nano-surface-hover); }
.nano .erwaehnung-wahl__name { font-weight: 600; }
.nano .erwaehnung-wahl__rolle { font-size: 0.8rem; }

/* Zugeordnete Kontakte und weitere Adressen am Kontakt (17.09.2026) */
.nano .firma-liste { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.nano .firma-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--nano-line); }
.nano .firma-liste form { margin-left: auto; }

/* Blaettern und Ankreuzen in langen Listen (17.09.2026, „Meine Kontakte") */
.nano .seitenwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.8rem 0; }
.nano .massen-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.8rem 0 0; }
.nano .liste th input[type="checkbox"], .nano .liste td input[type="checkbox"] { width: auto; margin: 0; }
.nano dialog.nano-dialog ul.hint { margin: 0 0 0.8rem; padding-left: 1.1rem; }
.nano .massen-leiste dialog label.check { text-transform: none; letter-spacing: normal; font-size: 0.88rem; color: var(--nano-text); }

/* Vorschau fuer Bilder und PDF */
body.vorschau-offen { overflow: hidden; }
.vorschau { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 3.5rem 1rem 1rem; background: rgba(15, 23, 42, 0.85); }
.vorschau[hidden] { display: none; }
.vorschau__leiste { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; color: #f8fafc; font-size: 0.88rem; }
.vorschau__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschau__zaehler { flex: 0 0 auto; opacity: 0.7; font-variant-numeric: tabular-nums; }
.vorschau__knopf { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 0.4rem; background: rgba(248, 250, 252, 0.12); color: #f8fafc; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; }
.vorschau__knopf:hover { background: rgba(248, 250, 252, 0.24); }
.vorschau__pfeil { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: rgba(248, 250, 252, 0.12); color: #f8fafc; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.vorschau__pfeil:hover { background: rgba(248, 250, 252, 0.24); }
.vorschau__buehne { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; }
.vorschau__buehne img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.4rem; background: #fff; }
.vorschau__buehne iframe { width: 100%; height: 100%; border: 0; border-radius: 0.4rem; background: #fff; }

@media (max-width: 640px) {
  .vorschau__pfeil { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; }
}

/* Kanban */
.nano .kanban-hinweis { margin: 0 0 0.9rem; color: var(--nano-text-muted); font-size: 0.82rem; }
.nano .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 0.8rem; overflow-x: auto; padding-bottom: 0.4rem; }
.nano .spalte { min-width: 0; }
.nano .spalte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--nano-line-strong); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nano-text-faint); }
.nano .spalte__zahl { padding: 0 0.4rem; border-radius: 999px; background: var(--nano-surface-hover); color: var(--nano-text-muted); font-size: 0.72rem; letter-spacing: 0; }
.nano .spalte__liste { display: flex; flex-direction: column; gap: 0.5rem; min-height: 5rem; padding: 0.3rem; border: 1px dashed transparent; border-radius: 0.5rem; }
.nano .spalte__liste--ziel { border-color: var(--nano-accent); background: var(--nano-surface-hover); }
.nano .spalte__leer { margin: 0.4rem 0.2rem; color: var(--nano-text-faint); font-size: 0.8rem; }
.nano .karte { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem; border: 1px solid var(--nano-line); border-radius: 0.5rem; background: var(--nano-surface); }
.nano .karte:hover { background: var(--nano-surface-hover); }
.nano .karte--zieht { opacity: 0.45; }
.nano .karte__nr { font-size: 0.72rem; color: var(--nano-text-muted); }
.nano .karte__titel { font-weight: 500; white-space: normal; }
.nano .karte__meta { color: var(--nano-text-muted); font-size: 0.76rem; white-space: normal; }
/* Der Auftraggeber traegt kein Wort davor - er steht fett und in der Textfarbe,
   damit die Karte in einer Zeile sagt, um wen es geht. */
.nano .karte__auftraggeber { color: var(--nano-text); font-size: 0.8rem; font-weight: 600; white-space: normal; }
.nano .ansicht-wahl { display: flex; gap: 0.4rem; }
.nano .new { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem; }
.nano .new .field { margin-bottom: 0; }
.nano .new .grow { flex: 1 1 20rem; }

/* Verkauf */
/* minmax(0, ...) statt 2fr 1fr: "2fr" heisst minmax(AUTO, 2fr), die Spalte
   kann also nicht unter ihre min-content-Breite schrumpfen. Eine lange
   Adresse im Nachrichtentext hat keine Umbruchstelle - die Spalte wuchs
   mit ihr und schob die rechte Karte aus dem Bild. */
.nano .cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 820px) { .nano .cols { grid-template-columns: 1fr; } }
.nano .kopf label, .nano .rechner-form label { display: block; font-size: 0.8rem; color: var(--nano-text-muted); margin-bottom: 0.6rem; }
.nano .kopf input, .nano .kopf select, .nano .kopf textarea { margin-top: 0.2rem; width: 100%; }
.nano .row2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.8rem; }
@media (max-width: 1000px) { .nano .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nano .row2 { grid-template-columns: 1fr; } }
/* Ein Knopf in einer Feldzeile steht auf der Grundlinie der Felder, nicht
   ueber ihre ganze Hoehe gezogen. In einer schmalen Spalte bricht die
   Beschriftung des Nachbarfeldes um, und der Knopf wurde zum Block
   (18.09.2026: „Der Projektknopf ist zu gross"). */
.nano .row2 > .btn, .nano .row2 > button { align-self: end; justify-self: start; }
.nano .side h2 { font-size: 1rem; margin-bottom: 0.6rem; }
.nano .folge { margin-bottom: 0.4rem; }
.nano .pos-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; }
.nano .pos-tabelle tfoot .sum td { font-weight: 700; border-top: 1px solid var(--nano-line-strong); }
.nano .pos-tabelle tfoot td { border-bottom: none; }
.nano .add-pos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; align-items: center; }
.nano .add-pos input { padding: 0.35rem 0.5rem; width: auto; }
.nano .add-pos input[name='bezeichnung'] { flex: 1 1 12rem; }
.nano .rechner-add { margin-top: 0.8rem; }
.nano .rechner-add summary { display: inline-block; list-style: none; cursor: pointer; }
.nano .rechner-add summary::-webkit-details-marker { display: none; }
.nano .rechner-form { margin-top: 0.6rem; padding: 0.6rem; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); }
.nano .rechner-form input, .nano .rechner-form select { width: auto; margin-top: 0.2rem; }
.nano .sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.8rem; margin-bottom: 0.6rem; }
@media (max-width: 1000px) { .nano .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nano .sys-grid { grid-template-columns: 1fr; } }
.nano .fresh { border-color: rgba(11, 79, 138, 0.35); background: linear-gradient(180deg, var(--nano-accent-glow), transparent 60%), var(--nano-surface); }
.nano .fresh p { margin: 0.4rem 0 0.9rem; font-size: 0.88rem; color: var(--nano-text-muted); }
.nano .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; }
.nano .filters .field { margin-bottom: 0; flex: 1 1 12rem; }
.nano .count { margin: 0 0 0.7rem; color: var(--nano-text-muted); font-size: 0.85rem; }
.nano .role-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.nano .pruef-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; padding-top: 0.9rem; }
.nano .pruef-form + .pruef-form { border-top: 1px solid var(--nano-line); margin-top: 0.6rem; }
.nano .pruef-form .field { margin: 0; flex: 1 1 18rem; }
.nano .detail { font-family: var(--nano-font-mono); font-size: 0.85rem; opacity: 0.85; }
.nano .perms { margin: 1.1rem 0; padding: 0.9rem 1rem; }
.nano .perm { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0; cursor: pointer; }
.nano .perm input { width: auto; margin-top: 0.25rem; }
.nano .perm strong { display: block; font-weight: 500; }
.nano .perm__desc { display: block; font-size: 0.82rem; color: var(--nano-text-muted); }

/* Nachrichten: Kopfdaten, Text und Zuordnung einer Nachricht. */
.nano .nachricht-fakten { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.9rem; margin: 0 0 1rem; }
.nano .nachricht-fakten > div { display: contents; }
.nano .nachricht-fakten dt { color: var(--nano-text-muted); font-size: 0.82rem; }
.nano .nachricht-fakten dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.nano .nachricht-fakten--klein dd { font-size: 0.78rem; word-break: break-all; }

/* Wohin eine Nachricht weitergereicht wurde - je Weiterleitung eine Zeile,
   damit die zweite nicht neben der ersten verschwindet. */
.nano .weiterleitung { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.nano .weiterleitung + .weiterleitung { margin-top: 0.2rem; }

/* Zeilenumbrueche des Verfassers bleiben erhalten. */
.nano .nachricht-text { white-space: pre-line; overflow-wrap: anywhere; font-size: 0.92rem; line-height: 1.55; border-top: 1px solid var(--nano-line); padding-top: 0.9rem; }

.nano .zuordnungen { list-style: none; margin: 0; padding: 0; }
.nano .zuordnungen li { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--nano-line); font-size: 0.85rem; }
.nano .zuordnungen li:last-child { border-bottom: none; }

/* Kommunikationsspalte im Projekt: Notizen und E-Mails in einer Zeitleiste. */

.nano .mail-form { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.nano .mail-form textarea, .nano .mail-form input[type="text"] { width: 100%; }
.nano .mail-form > label { display: block; font-size: 0.82rem; color: var(--nano-text-muted); }
.nano .mail-form button { align-self: flex-start; }
.nano .mail-empfaenger { border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.6rem 0.8rem; margin: 0; }
.nano .mail-empfaenger legend { padding: 0 0.3rem; font-size: 0.78rem; color: var(--nano-text-muted); }
.nano .mail-empfaenger label { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.85rem; padding: 0.15rem 0; }
/* Das Kaestchen erbt sonst `width: 100%` aus der Formularregel fuer .kopf input und schob den Namen an den rechten Rand (gemeldet am 09.09.2026). */
.nano .mail-empfaenger input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 0.2rem 0 0; }
/* Die beiden Auswahlfelder der E-Mail-Vorlagen nebeneinander, auf dem Handy
   untereinander (16.09.2026). */
.nano .mail-vorlage { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.nano .mail-vorlage > label { flex: 1 1 14rem; margin: 0; }
/* Der Hinweis der Vorlage (18.09.2026) nimmt die ganze Zeile - er steht
   ueber dem Text und geht nie mit der Mail hinaus. */
.nano .mail-vorlage__hinweis { flex: 1 1 100%; margin: 0; font-size: 0.85rem; }
.nano .mail-empfaenger label > span { flex: 1 1 auto; min-width: 0; }

.nano .komm-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.nano .komm-eintrag { border-top: 1px solid var(--nano-line); padding-top: 0.7rem; }
.nano .komm-mehr { margin: 0.3rem 0 0; font-size: 0.8rem; }
/* Lange Nachrichten einklappen - ohne JavaScript, damit es auch dann geht,
   wenn ein Skript nicht laedt, und die Browsersuche den Rest findet. */
.nano .komm-text > summary { list-style: none; cursor: pointer; }
.nano .komm-text > summary::-webkit-details-marker { display: none; }
.nano .komm-text__mehr { display: inline-block; margin-top: 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--nano-accent); }
.nano .komm-text__mehr::before { content: '▸ '; }
.nano .komm-text[open] > summary .komm-text__mehr::before { content: '▾ '; }
.nano .komm-text[open] > summary .komm-text__mehr { color: var(--nano-text-faint); }
.nano .komm-text[open] > summary .komm-text__mehr::after { content: ' (einklappen)'; font-weight: 400; }
.nano .komm-text__rest { margin-top: 0; }
.nano .komm-betreff { margin: 0.3rem 0 0; font-weight: 500; }
.nano .komm-betreff a { text-decoration: underline; }
.nano .komm-aktionen { margin: 0.2rem 0 0; font-size: 0.85rem; }

/* Lesezustand: geschlossener roter Umschlag = ungelesen, offener weisser =
   gelesen. Traegt dieselbe Aussage wie der fette Betreff in der Liste, nur
   sofort erkennbar. */
.nano .post {
  display: inline-flex;
  align-items: center;
}
.nano .post-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}
.nano .post-icon--zu {
  color: #b91c1c;
}
.nano .post-icon--auf {
  color: #94a3b8;
}

/* Die tatsaechliche Herkunft einer Nachricht. Steht klein und sachlich da -
   auffaellig wird sie nur, wenn die Pruefung des Mailservers nicht aufging. */
.nano .herkunft {
  display: grid;
  gap: 0.15rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.nano .herkunft--warnung {
  border-left: 3px solid #b91c1c;
  padding-left: 0.6rem;
}
.nano .herkunft .hint {
  margin: 0.3rem 0 0;
  color: #b91c1c;
}

/* Lange Adressen und Kennungen umbrechen, statt die Spalte zu sprengen. */
.nano .notiz-text, .nano .komm-betreff, .nano .nachricht-fakten dd { overflow-wrap: anywhere; }

/* Weitere Adressen eines Profils - schlichte Liste mit Entfernen daneben. */
.nano .adressen__liste { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.3rem; }
.nano .adressen__liste li { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }

/* Anhänge unter dem Text einer Nachricht. */
.nano .nachricht-anhaenge { margin-top: 1rem; }

/* Follower: liest mit oder ist nur vermerkt - ein Klick schaltet um. */
.nano .rollen__mitlesen { border: 1px solid var(--nano-line); background: transparent; border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.7rem; color: var(--nano-text-muted); cursor: pointer; }
.nano .rollen__mitlesen.ist-an { border-color: var(--nano-accent); color: var(--nano-accent); }

/* Dateiauswahl als Link: der native Knopf steht quer im Formular. */
.nano .dateiwahl { display: inline-flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; cursor: pointer; }
.nano .dateiwahl input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nano .dateiwahl__link { color: var(--nano-accent); text-decoration: underline; font-size: 0.85rem; }
.nano .dateiwahl:hover .dateiwahl__link { text-decoration-thickness: 2px; }
.nano .dateiwahl input[type="file"]:focus-visible ~ .dateiwahl__link { outline: 2px solid var(--nano-accent); outline-offset: 2px; border-radius: 2px; }
.nano .dateiwahl__name { font-size: 0.78rem; color: var(--nano-text-muted); overflow-wrap: anywhere; }

/* Abnahme: das Formular, mit dem die Baustelle in die Akte kommt.
   Zwei Besonderheiten gegenueber den anderen Formularen hier - die
   Maengelzeilen stehen paarweise (Text und Frist), und die beiden
   Vorbehalts-Haekchen tragen ihre Begruendung mit. Deshalb flex-start statt
   center: bei zwei Zeilen Text saesse das Kaestchen sonst in der Mitte. */
.nano .abnahme-neu { margin-top: 1rem; }
.nano .abnahme-neu > summary { display: inline-block; list-style: none; cursor: pointer; color: var(--nano-accent); }
.nano .abnahme-neu > summary::-webkit-details-marker { display: none; }
.nano .formgrid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; margin-top: 0.8rem; }
.nano .formgrid .field { margin-bottom: 0; flex: 1 1 14rem; max-width: 22rem; }
.nano .formgrid .field--breit { flex: 1 1 100%; max-width: none; }
.nano .mangel-zeile { display: flex; gap: 0.5rem; margin-bottom: 0.35rem; }
.nano .mangel-zeile input[type="text"] { flex: 1 1 auto; }
.nano .mangel-zeile input[type="date"] { flex: 0 0 10rem; }
.nano .formgrid .check { align-items: flex-start; line-height: 1.4; }
.nano .formgrid .check input { margin-top: 0.2rem; }
.nano .formgrid .check strong { color: var(--nano-text); }

/* Meldungen: eine Liste, keine Tabelle - der Text ist verschieden lang, und
   eine Spalte, die sich nach der laengsten Zeile richtet, macht die kurzen
   unlesbar. Ungelesenes traegt links einen Balken statt Fettschrift: Der
   Titel ist ohnehin schon der laute Teil. */
.nano .meldungen { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.nano .meldung { border-top: 1px solid var(--nano-line); padding: 0.7rem 0 0.7rem 0.8rem; border-left: 3px solid transparent; }
.nano .meldung--neu { border-left-color: var(--nano-accent); background: rgba(0, 0, 0, 0.015); }
.nano .meldung__kopf { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; font-size: 0.78rem; }
.nano .meldung__art { color: var(--nano-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.nano .meldung__titel { margin-top: 0.15rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.nano .meldung--neu .meldung__titel { font-weight: 600; }
.nano .meldung__text { margin-top: 0.2rem; font-size: 0.85rem; color: var(--nano-text-muted); overflow-wrap: anywhere; }
.nano .meldung__form { margin-top: 0.3rem; }
.nano .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Handbuch: Fliesstext, keine Tabelle. Ein Absatz, den man liest, braucht
   eine Zeilenlaenge, bei der das Auge zurueckfindet - deshalb ein Deckel. */
.nano .handbuch section { margin-bottom: 1.1rem; }
.nano .handbuch h3 { font-size: 0.95rem; margin: 0 0 0.35rem; color: var(--nano-accent); }
.nano .handbuch p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.55; max-width: 46rem; }
.nano .handbuch-inhalt { margin: 0.8rem 0 0; padding-left: 1.1rem; }
.nano .handbuch-inhalt li { margin-bottom: 0.3rem; font-size: 0.9rem; line-height: 1.45; }

/* Der Fragezeichen-Knopf im Seitenkopf. Klein und ruhig: Er soll da sein,
   wenn man ihn sucht, und sonst nicht auffallen. */
.hilfe-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  border: 1px solid var(--nano-line, #d7dbe0); color: var(--nano-text-muted, #5b6672);
  font-size: 0.85rem; font-weight: 600; text-decoration: none; line-height: 1;
}
.hilfe-knopf:hover { border-color: var(--nano-accent, #0b4f8a); color: var(--nano-accent, #0b4f8a); }
/* Der Vorlesetext gehoert ans Ohr, nicht auf den Schirm. `.sr-only` stand
   zweimal im Stylesheet, aber beide Male unter `.nano` - der Hilfeknopf haengt
   ueber einen Render-Hook AUSSERHALB dieser Huelle im Filament-Kopf. Er bekam
   also gar keine Regel, und "Hilfe zu Post schreiben und ablegen" stand als
   umbrechender Text quer ueber dem Seitentitel. */
.hilfe-knopf .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Nachrichtenkopf: der Betreff bekommt seine eigene Zeile.
   Der Filament-Standard setzt Titel und Schalter nebeneinander; bei einem
   langen Betreff bleibt fuer den Titel eine handbreite Spalte, in der er
   sechsmal umbricht. */
.fi-header.nachricht-kopf { display: block; }
.nachricht-kopf .nachricht-kopf__betreff { margin: 0; }
.nachricht-kopf .nachricht-kopf__zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.2rem;
  margin: 0.35rem 0 0.9rem; font-size: 0.88rem; color: var(--nano-text-muted, #5b6672);
}
.nachricht-kopf .nachricht-kopf__zeile a { color: inherit; }
.nachricht-kopf .nachricht-kopf__zeile a:hover { color: var(--nano-accent, #0b4f8a); }
.nachricht-kopf .nachricht-kopf__hilfe { margin-left: auto; }
/* Blaettern im Ordner (11.09.2026). Das Ende des Ordners bleibt stehen,
   nur blass - ein Knopf, der verschwindet, sieht aus wie ein Fehler. */
.nano .nachricht-kopf__blaettern { display: inline-flex; align-items: center; gap: 0.75rem; }
.nano .nachricht-kopf__ende { color: var(--nano-text-faint, #9aa4b2); }

/* Einordnen: im rechten Kasten, untereinander statt in einer Reihe -
   die Karte ist schmal, und die Beschriftungen sind lang. */
.nano .nachricht-einordnen { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--nano-line); }
.nano .nachricht-einordnen .fi-ac { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.nano .nachricht-einordnen .fi-btn { justify-content: flex-start; }

/* Die Aktionsspalte der Vertragsuebersicht: Knoepfe nebeneinander, aber sie
   duerfen umbrechen - bei vier Stueck wird die Spalte sonst breiter als der
   Vertragstitel daneben. */
.nano .vertrag-aktionen { white-space: normal; }
.nano .vertrag-aktionen > * { display: inline-block; margin: 0 0.25rem 0.25rem 0; vertical-align: middle; }

/* Der Versandblock steht in voller Breite unter den Positionen: Adressen
   links, Kopie rechts, Betreff und Nachricht darunter ueber die ganze
   Breite. In der schmalen Seitenspalte war das Nachrichtenfeld ein
   Guckloch (gemeldet am 08.09.2026). */
.nano .versand-adressen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.2rem; align-items: start; }
@media (max-width: 700px) { .nano .versand-adressen { grid-template-columns: 1fr; } }
.nano #versand textarea { min-height: 11rem; }

/* Die Bestellübersicht und das Unterschriftfeld im Kundenportal (09.09.2026).
   Die Übersicht steht unmittelbar über dem Knopf, weil § 312j Abs. 2 BGB das
   so verlangt - sie ist deshalb abgesetzt und nicht nur ein Absatz mehr. */
.nano .bestellung-uebersicht { border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.9rem 1rem; margin: 1rem 0; background: var(--nano-bg-weich, #fafafa); }
.nano .bestellung-uebersicht h3 { margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 600; }
.nano .bestellung-uebersicht ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; }
.nano .bestellung-uebersicht li { display: flex; justify-content: space-between; gap: 1rem; }
.nano .bestellung-summe { margin: 0.7rem 0 0.2rem; font-size: 1rem; }
.nano .unterschriftfeld { margin: 1rem 0; }
.nano .unterschriftfeld__kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: var(--nano-text-muted); margin-bottom: 0.3rem; }
.nano .unterschriftfeld canvas { width: 100%; max-width: 30rem; height: 8rem; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); background: #fff; touch-action: none; cursor: crosshair; }

/* Die Rueckmeldung bleibt im Bild (09.09.2026). Seit die Seite nach dem
   Absenden dort stehen bleibt, wo gearbeitet wurde, laege sie sonst oben
   ausserhalb des Sichtfeldes - und niemand erfuehre, ob es geklappt hat. */
.nano .nano-meldungen { position: sticky; top: 0.5rem; z-index: 20; }
.nano .nano-meldungen .notice { box-shadow: 0 2px 8px rgb(0 0 0 / 0.10); }

/* Weiterempfehlen (09.09.2026): Wahl in einer Zeile, Textfeld breit, Knoepfe
   umbrechend. [hidden] ausdruecklich, weil .btn und label eigene
   display-Werte tragen und das Attribut sonst verliert. */
.nano .empfehlung__wahl { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: flex-start; margin-bottom: 0.6rem; }
.nano .empfehlung__gruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.nano .empfehlung__gruppe legend { font-size: 0.8rem; color: var(--nano-text-muted); padding: 0; margin-bottom: 0.2rem; }
.nano .empfehlung__gruppe .check { display: inline-flex; margin: 0 0.9rem 0 0; }
.nano .empfehlung textarea { width: 100%; min-height: 12rem; resize: vertical; font-size: 0.92rem; line-height: 1.45; }
.nano .empfehlung__knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.9rem; }
.nano .empfehlung [hidden] { display: none !important; }

/* Werbung fuer Tippgeber (10.09.2026). Die Leinwaende tragen ihre echten
   Masse (1080 px und mehr) und werden nur per CSS verkleinert - das Bild in
   der Datei soll exakt so gross sein, wie die Netzwerke es wollen. */
.nano .werbung__wahl { display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem; align-items: flex-start; }
.nano .werbung__gruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Jedes Haekchen auf eine eigene Zeile (18.09.2026: „Foto mit Haken in die
   naechste Zeile"). Der Hinweis hinter „WhatsApp zeigen" ist lang; daneben
   rutschte „Foto zeigen" an den rechten Rand und sah aus, als gehoerte es
   nicht dazu. */
.nano .werbung__wahl > .check { flex: 1 1 100%; margin: 0; }
.nano .werbung__gruppe legend { font-size: 0.8rem; color: var(--nano-text-muted); padding: 0; margin-bottom: 0.2rem; }
.nano .werbung__gruppe .check { display: inline-flex; margin: 0 0.9rem 0 0; }
.nano .werbung__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .nano .werbung__raster { grid-template-columns: 1fr; } }
/* Der Abstand zur Karte darueber fehlte (18.09.2026: „ueber dem Quadrat
   fehlt der Abstand"). `.card + .card` greift nicht - das Raster ist selbst
   keine Karte. Dieselbe Luecke wie bei `.karten-zwei`. */
.nano .card + .werbung__raster,
.nano .werbung__raster + .card { margin-top: 1.2rem; }
.nano .werbung__karte--breit { grid-column: 1 / -1; }
.nano .werbung__canvas { width: 100%; height: auto; display: block; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); background: #fff; }
.nano .werbung__karte--hoch .werbung__canvas { max-height: 34rem; width: auto; margin: 0 auto; }
.nano .werbung__druck { width: 100%; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); background: #fff; }
.nano .werbung__druck--flyer { aspect-ratio: 148 / 220; min-height: 24rem; }
.nano .werbung__druck--karte { aspect-ratio: 85 / 130; min-height: 18rem; }
.nano .werbung__knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.4rem; }
.nano .werbung__reiter-leiste { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.nano .werbung__reiter { border: 1px solid var(--nano-line); background: var(--nano-surface); color: var(--nano-text-muted); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.85rem; cursor: pointer; }
.nano .werbung__reiter--aktiv { background: var(--nano-accent); border-color: var(--nano-accent); color: #fff; }
.nano .werbung__textfeld { width: 100%; min-height: 16rem; resize: vertical; font-size: 0.9rem; line-height: 1.45; }
.nano .werbung [hidden] { display: none !important; }

/* Firmenzugehoerigkeit im Profil (10.09.2026): der Weg zur Firma neben dem
   Zuordnen, nicht darunter. */
.nano .firma-jetzt { margin: 0 0 0.6rem; }
.nano .firma-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }

/* Schalter (13.09.2026) - ein Kontrollkaestchen im Kleid eines Schiebers.
   Das Kaestchen bleibt im Formular und fuer Tastatur und Vorleser erreichbar;
   gezeichnet wird nur die Bahn daneben. */
.nano .schalter-liste { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.55rem; }
.nano .schalter-zeile form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0; }
.nano .schalter { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 12rem; cursor: pointer; position: relative; font-weight: 600; margin: 0; }
.nano .schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nano .schalter__bahn { flex: none; position: relative; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: #cfd8e1; transition: background 0.15s; }
.nano .schalter__bahn::after { content: ''; position: absolute; top: 0.17rem; left: 0.17rem; width: 1.06rem; height: 1.06rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 52, 0.3); transition: transform 0.15s; }
.nano .schalter input:checked + .schalter__bahn { background: var(--nano-accent); }
.nano .schalter input:checked + .schalter__bahn::after { transform: translateX(1.1rem); }
.nano .schalter input:focus-visible + .schalter__bahn { outline: 2px solid var(--nano-accent); outline-offset: 2px; }
.nano .schalter input:disabled + .schalter__bahn { opacity: 0.6; }
.nano .schalter input:disabled ~ .schalter__text { cursor: default; }

/* Eingehende Post, wie der Absender sie gestaltet hat (13.09.2026). */
.nano .nachricht-ansicht { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border-top: 1px solid var(--nano-line); padding-top: 0.9rem; margin-bottom: 0.75rem; }
.nano .nachricht-ansicht__knopf { display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid var(--nano-line); border-radius: 999px; font-size: 0.85rem; text-decoration: none; color: inherit; }
.nano .nachricht-ansicht__knopf.is-aktiv { background: var(--nano-accent); border-color: var(--nano-accent); color: #fff; }
.nano .nachricht-ansicht__tab { margin-left: auto; font-size: 0.85rem; }
.nano .nachricht-bilder { margin: 0 0 0.75rem; }
/* Keine automatische Hoehe: Ohne Skript im Rahmen kennt die Seite die Hoehe
   des Inhalts nicht. Der Rahmen laesst sich aufziehen; ein iframe selbst kann
   das nicht, deshalb die Huelle. */
.nano .nachricht-html-rahmen { height: 70vh; min-height: 22rem; resize: vertical; overflow: hidden; border: 1px solid var(--nano-line); border-radius: 8px; background: #fff; }
.nano .nachricht-html { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* Aufgaben (Teil U, 15.09.2026). Ein bernsteinfarbenes Abzeichen gab es
   bisher nicht - rollenantraege.blade.php benutzte die Klasse schon. */
.nano .badge--warn { border-color: rgba(185, 120, 43, 0.4); color: var(--nano-warn); }
.nano .bezug-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0.35rem 0.25rem 0; padding: 0.1rem 0.55rem 0.1rem 0.45rem; border: 1px solid var(--nano-line); border-radius: 999px; background: var(--nano-surface); font-size: 0.8rem; white-space: normal; }
.nano .bezug-chip__typ { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nano-text-faint); }
.nano .aufgabe-text { margin: 0 0 1rem; font-size: 0.92rem; overflow-wrap: anywhere; }
.nano .aufgabe-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 1.2rem; margin: 0 0 1rem; }
.nano .aufgabe-daten dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nano-text-faint); }
.nano .aufgabe-daten dd { margin: 0.1rem 0 0; font-size: 0.92rem; }
.nano .aufgabe-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.nano .aufgabe-knoepfe form { margin: 0; }
.nano .aufgabe-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.88rem; }
.nano .aufgabe-liste li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nano .aufgabe-liste form { margin: 0; }
.nano .aufgabe-weg { width: 1.4rem; height: 1.4rem; padding: 0; border: 1px solid var(--nano-line-strong); border-radius: 999px; background: var(--nano-surface); color: var(--nano-text-muted); font-size: 0.95rem; line-height: 1; cursor: pointer; font-family: inherit; }
.nano .aufgabe-weg:hover { border-color: var(--nano-danger); color: var(--nano-danger); }
.nano a.komm-tab:hover { text-decoration: none; }
dialog.nano-dialog--breit { width: min(40rem, calc(100vw - 2rem)); }
dialog.nano-dialog textarea { width: 100%; }
dialog.nano-dialog .bezug-chip { margin-top: 0.2rem; }
/* An der Meldung: „als gelesen markieren" und „Aufgabe daraus anlegen" in einer Zeile. */
.nano .meldung__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.2rem; margin-top: 0.3rem; }
.nano .meldung__aktionen .meldung__form { margin-top: 0; }
/* Die Monatsansicht (U4): sieben feste Spalten, auf dem Handy scrollt der Rahmen. */
.nano .kalender__kopf { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.nano .kalender__kopf h3 { margin: 0; font-size: 1rem; }
.nano table.kalender { width: 100%; min-width: 38rem; table-layout: fixed; border-collapse: collapse; }
.nano table.kalender th { padding: 0.3rem 0.4rem; text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nano-text-faint); }
.nano table.kalender td { height: 5.5rem; padding: 0.3rem 0.4rem; border: 1px solid var(--nano-line); vertical-align: top; font-size: 0.8rem; }
.nano .kalender__tag--fremd { background: var(--nano-bg); color: var(--nano-text-faint); }
.nano .kalender__tag--heute { box-shadow: inset 0 0 0 2px var(--nano-accent); }
.nano .kalender__zahl { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.nano .kalender__aufgabe { display: block; margin: 0 0 0.2rem; padding: 0.1rem 0.35rem; border-radius: 6px; background: var(--nano-accent-glow); color: var(--nano-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nano .kalender__aufgabe:hover { background: var(--nano-accent); color: #fff; text-decoration: none; }
.nano .kalender__aufgabe--zu { background: transparent; color: var(--nano-text-faint); text-decoration: line-through; }
/* Die Kontakte eines Vorhabens im Aufgaben-Dialog: Kaestchen untereinander,
   die gewaehlten als Chips darunter (15.09.2026). */
.nano .aufgabe-kontaktwahl { display: flex; flex-direction: column; gap: 0.15rem; }
.nano .aufgabe-kontaktwahl:empty { display: none; }
.nano .aufgabe-kontaktwahl .bezug-chip { align-self: flex-start; }
dialog.nano-dialog .aufgabe-kontaktwahl { max-height: 11rem; overflow-y: auto; }

/* Kontakte zusammenlegen (16.09.2026): die beiden Profile nebeneinander,
   darunter was mitwandert. Unter 700 px untereinander - das bleibende oben. */
.nano .zusammenlegen__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 0.8rem; align-items: end; }
@media (max-width: 820px) { .nano .zusammenlegen__wahl { grid-template-columns: 1fr; } }
.nano .zusammenlegen__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .nano .zusammenlegen__paar { grid-template-columns: 1fr; } }
.nano .zusammenlegen__profil { border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.8rem 0.9rem; min-width: 0; }
.nano .zusammenlegen__profil--ziel { border-color: var(--nano-accent); }
.nano .zusammenlegen__profil h3 { margin: 0 0 0.5rem; font-size: 1rem; overflow-wrap: anywhere; }
.nano .zusammenlegen__profil dd { overflow-wrap: anywhere; }
.nano .zusammenlegen__zahlen { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.nano .zusammenlegen__zahlen li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--nano-line); }
.nano .zusammenlegen__hinweise { margin: 0; padding-left: 1.1rem; }
.nano .zusammenlegen__hinweise li + li { margin-top: 0.35rem; }
.nano .zusammenlegen__adressen { border: 0; margin: 0 0 0.8rem; padding: 0; min-width: 0; }
.nano .zusammenlegen__adressen legend { font-weight: 600; margin-bottom: 0.3rem; }
.nano .zusammenlegen__adressen .check span:first-of-type { overflow-wrap: anywhere; }

/* Kontakte einlesen: Betreuer je Kontakt im Bericht (16.09.2026). */
.nano .import-betreuer { margin: 0.9rem 0; border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.5rem 0.8rem; }
.nano .import-betreuer summary { cursor: pointer; padding: 0.2rem 0; }
.nano .import-betreuer summary .cell-muted { margin-left: 0.6rem; }
.nano .import-betreuer[open] summary { margin-bottom: 0.6rem; }
/* Offen darf die Liste den Knopf darunter nicht wegschieben: bei 2 700 Zeilen waeren es Meter. */
.nano .import-betreuer .table-wrap { max-height: 28rem; overflow-y: auto; }
.nano .import-stand { display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; align-items: center; margin-top: 0.35rem; }
/* Handelsvertreter wechseln über der Laufliste (16.09.2026). */
.nano .import-wechsel { border: 1px solid var(--nano-line); border-radius: var(--nano-radius); padding: 0.6rem 0.8rem; margin: 0 0 0.9rem; }
.nano .import-wechsel__zeile { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; margin-bottom: 0.4rem; }
.nano .import-wechsel__zeile .mini { min-width: 14rem; }
.nano .import-warnung { color: #7c4a10; font-weight: 500; }
.nano .import-bestand { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; margin: 0 0 0.9rem; }

/* KI-Zugang (16.09.2026): Schlüssel und Befehl zum Kopieren, Werkzeugliste, Protokoll. */
.nano .ki-block { display: block; margin: 0.4rem 0 0.6rem; padding: 0.55rem 0.75rem; background: var(--nano-bg); border: 1px solid var(--nano-line); border-radius: var(--nano-radius); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.nano .ki-neu { border-color: var(--nano-ok); }
.nano .ki-werkzeuge { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.nano .ki-werkzeuge li { padding: 0.5rem 0; border-bottom: 1px solid var(--nano-line); }
.nano .ki-argumente { max-width: 28rem; overflow-wrap: anywhere; }

/* Die Auszahlung anhaken (24.09.2026): Rechnungsnummer und Knopf gehoeren in
   eine Zeile - in einer Tabellenzelle bricht sonst beides untereinander. */
/* DIE ABRECHNUNGSLISTE PASST WIEDER (29.09.2026: „ich muss nach rechts
   mach das kompakter … Das sich die Dinge Überlagern ist nicht hilfreich").

   Drei Ursachen kamen zusammen. Erstens `white-space: nowrap` fuer jede
   Tabelle: Eine Zelle mit Formular kann damit nicht schrumpfen, und drei
   davon nebeneinander schieben die Liste aus dem Bild. Zweitens Eingabefelder
   in ihrer Standardbreite - ein Textfeld ist gut zwanzig Zeichen breit, auch
   wenn nur eine Adresse hineinsoll. Drittens Formulare als Blockelemente:
   Feld und Knopf standen nebeneinander, ohne umbrechen zu duerfen, und der
   Knopf rutschte unter die Nachbarzelle.

   `prov-zelle` loest alle drei: umbrechen erlaubt, Breite gedeckelt, und die
   Formulare darin sind Flex-Kaesten, die umbrechen statt zu ueberlappen. */
.nano .prov-zelle { white-space: normal; min-width: 11rem; max-width: 17rem; }
.nano .prov-zelle form { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.3rem 0 0; }
.nano .prov-zelle input[type="text"] { flex: 1 1 8rem; min-width: 0; max-width: 11rem; font-size: 0.82rem; }
.nano .prov-zelle input[type="file"] { flex: 1 1 8rem; min-width: 0; max-width: 11rem; font-size: 0.78rem; }
.nano .prov-zelle .btn { flex: 0 0 auto; }
.nano .prov-zelle .cell-muted { display: block; font-size: 0.78rem; line-height: 1.3; }

.nano .prov-bezahlt { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.nano .prov-bezahlt input { flex: 1 1 8rem; min-width: 0; max-width: 11rem; }