/* ====================  css/konto-app.css  ====================
   Gestaltung aller Seiten hinter dem Login von renekress.de — Admin (Leads, Kunden, Masterclass) und Kunden
   (Kundenportal, Masterclass, Masterclub). Entstanden mit der Lead-Übersicht V2 (10.10.2026), seit dem 11.10.2026
   eigene Datei: René, 10.10.2026 — „eigentlich alle seiten die hinter dem login (egal ob kunden oder admin) liegen“
   sollen so übersichtlich sein wie Section Monsters.
   ZWEIKLANG (30.10.2026, René: „teilweise find ich die optik von unserem portal noch viel zu komplex … bin mir auch nicht
   sicher ob das noir-design so das richtige hierfür ist“, Wahl aus drei Richtungen: „wir nehmen definitiv C – Zweiklang“):
   dunkle Leiste (Navigation, Marke), helle Arbeitsfläche (Inhalt), Violett als einzige Handlungsfarbe, Sora nur für
   Überschriften, Fließtext in der Systemschrift (16 px). Unter 1024 px wird die Leiste zur Schublade; oben eine dunkle
   Kopfleiste, unten eine Leiste mit den wichtigsten Punkten (js/zk-rahmen.js).
   FARBEN für Stände bleiben die des Lead-Boards (Section Monsters), immer zusammen mit einem Wort: Blau offen/neu, Türkis
   vorgemerkt, Gelb wartet auf jemand anderen, Violett in Arbeit, Orange Angebot/Priorität, Grün erledigt/gewonnen (nicht
   das Shopify-Grün #95bf47 der Website), Rot Problem, Grau Entwurf/abgelegt — auf hellem Grund in dunkleren Tönen.
   Das Präfix „ld-“ stammt aus der Lead-Übersicht und gilt für die ganze Konto-App, „zk-“ für den Zweiklang-Rahmen. */

/* ---------- Grundwerte: an html, damit auch das Seitenpanel (hängt am body) sie erbt ---------- */
html:has(.ld-app){
  --ld-grund: #f4f6fb;
  --ld-seite: #eef1f7;          /* Spalten im Board, Hintergründe zweiter Ebene */
  --ld-flaeche: #ffffff;
  --ld-flaeche-2: #f6f7fb;
  --ld-flaeche-3: #eceff5;
  --ld-rand: #e3e6ee;
  --ld-rand-stark: #cdd2de;
  --ld-text: #0b0d16;
  --ld-text-2: #4a5266;
  --ld-text-3: #646c80;
  --ld-link: #5b22c7;
  --zk-akzent: #6a2cd8;
  --zk-akzent-h: #5b22c7;
  --zk-akzent-hell: #f1eafe;
  --zk-ring: #cbb6f5;
  --zk-leiste: #0b0d16;
  --zk-schatten: 0 1px 2px rgba(11,13,22,.06), 0 2px 8px rgba(11,13,22,.04);
  --zk-schatten-hoch: 0 12px 32px rgba(11,13,22,.16), 0 2px 6px rgba(11,13,22,.08);
  --zk-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zk-titel: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Website-Grundwerte (welt.css), die Panel, Anmeldung und ältere Bausteine noch benutzen: auf die helle Fläche gedreht */
  --text: #0b0d16; --text-leise: #4a5266; --text-fern: #646c80; --linie: #e3e6ee; --papier: #6a2cd8;
  --raum: #f4f6fb; --raum-hoch: #ffffff;
  background: #f4f6fb;
  color-scheme: light;
}
html:has(.ld-app) body{ background: #f4f6fb; color: #0b0d16 }
/* Kopf und Fuß der Website gehören nicht in den Admin — die Seitenleiste ersetzt sie */
html:has(.ld-app) .kopf, html:has(.ld-app) .fuss{ display: none !important }
/* Der weiche Website-Hintergrund (welt.css, .ersatzgrund/.dunst) passt nicht auf die helle Fläche */
html:has(.ld-app) :is(.ersatzgrund, .dunst, #welt){ display: none !important }

.ld{ --ton: #3b82f6 }

/* ---------- Farbtöne zum Wiederverwenden: --ton für Ränder, Punkte, Knöpfe; Marken in derselben Farbe ---------- */
.ld-ton--blau{ --ton: #3b82f6 }
.ld-ton--tuerkis{ --ton: #0891b2 }
.ld-ton--gelb{ --ton: #d4a106 }
.ld-ton--violett{ --ton: #7c3aed }
.ld-ton--orange{ --ton: #ea6c10 }
.ld-ton--gruen{ --ton: #16a34a }
.ld-ton--rot{ --ton: #dc2626 }
.ld-ton--grau{ --ton: #8a91a3 }
.ld-marke--blau{ --m: #3b82f6; --m-text: #1d4ed8 }
.ld-marke--tuerkis{ --m: #0891b2; --m-text: #0e6a80 }
.ld-marke--gelb{ --m: #d4a106; --m-text: #7a5300 }
.ld-marke--violett{ --m: #7c3aed; --m-text: #5b21b6 }
.ld-marke--orange{ --m: #ea6c10; --m-text: #a8430a }
.ld-marke--gruen{ --m: #16a34a; --m-text: #146c35 }
.ld-marke--rot{ --m: #dc2626; --m-text: #a51c1c }
.ld-marke--grau{ --m: #8a91a3; --m-text: #4a5266 }
.ld-marke--gestrichelt{ border-style: dashed }

.ld-punkt{ display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ton) }

/* Strichsymbole: eine Regel für alle */
.ld-app svg, .ld-toast svg{ width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* ---------- Schrift ---------- */
.ld-app, html:has(.ld-app) .kp-panel, .ld-toast{ font-family: var(--zk-schrift) }
.ld-app :is(h1, h2, h3), html:has(.ld-app) .kp-panel :is(h1, h2){ font-family: var(--zk-titel); text-transform: none; letter-spacing: -.01em }
.ld-app :is(input, select, textarea, button), html:has(.ld-app) .kp-panel :is(input, select, textarea, button){ font-family: inherit }

/* ---------- Rahmen ---------- */
.mk.ld-app{ width: auto; margin: 0; padding: 0; min-height: 100svh; color: var(--ld-text); font-size: 16px; line-height: 1.55 }
.ld-app .mk-mitte{ min-height: 100svh; padding: 24px }
.ld-rahmen{ display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100svh }

/* Die dunkle Leiste: eigene Grundwerte, damit alles darin (Gruppen, Punkte, Fuß) hell auf dunkel steht */
.ld-seite{
  --ld-text: #eef0f8; --ld-text-2: #b9bfd0; --ld-text-3: #8e95a9; --ld-rand: rgba(255,255,255,.08); --ld-rand-stark: rgba(255,255,255,.16);
  --ld-flaeche: rgba(255,255,255,.04); --ld-flaeche-2: rgba(255,255,255,.07); --ld-flaeche-3: rgba(255,255,255,.12); --ld-link: #c4b5fd;
  position: sticky; top: 0; height: 100svh; overflow-y: auto; box-sizing: border-box; z-index: 30;
  display: flex; flex-direction: column; gap: 2px; padding: 22px 12px 16px;
  background: var(--zk-leiste); color: var(--ld-text); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.ld-logo{ display: block; padding: 4px 10px 14px; color: var(--ld-text); font-size: 17px; font-weight: 600; text-decoration: none }
.ld-logo span{ margin-left: 6px; padding: 1px 8px; border: 1px solid var(--ld-rand-stark); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ld-text-2); vertical-align: 2px }
/* Logo statt Schriftzug (René, 14.10.2026: „oben links muss doch mein logo rein in die sidebar“) — helle Fassung für den dunklen Grund */
.ld-logo--bild{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px }
.ld-logo--bild img{ display: block; width: auto; height: 20px; max-width: 200px }
.ld-logo--bild span{ margin-left: 0 }
.ld-seite-gruppe{ margin: 16px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ld-text-3) }
.ld-nav{ display: flex; flex-direction: column; gap: 1px }
.ld-nav-punkt{ position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; box-sizing: border-box; padding: 6px 12px; border-radius: 10px;
  color: #c9cedb; text-decoration: none; transition: background .15s, color .15s }
.ld-nav-punkt > svg{ width: 19px; height: 19px; stroke-width: 1.8; color: #8e95a9 }
.ld-nav-punkt span{ display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35 }
/* Erklärzeilen unter den Punkten fallen weg (René: zu viel auf einmal); sie stehen im Titel-Tooltip */
.ld-nav-punkt small{ display: none }
.ld-nav-punkt:hover{ background: var(--ld-flaeche-2); color: #fff }
.ld-nav-punkt:hover > svg{ color: #c9cedb }
.ld-nav-punkt--an{ background: rgba(255,255,255,.1); color: #fff }
.ld-nav-punkt--an span{ font-weight: 600 }
.ld-nav-punkt--an > svg{ color: #c4b5fd }
.ld-nav-punkt:focus-visible{ outline: 2px solid #c4b5fd; outline-offset: 1px }
.ld-seite .ld-zaehler, .ld-nav-punkt .kpv-nav-zahl{ margin-left: auto; background: var(--zk-akzent); color: #fff }
.ld-seite-fuss{ margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--ld-rand); display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--ld-text-2); overflow-wrap: anywhere }
.ld-seite-fuss a{ color: #e4e7f0 }
.ld-seite-fuss .mk-link{ align-self: flex-start; color: #e4e7f0 }

/* Volle Breite (René 30.10.2026: „alle seiten nutzen nicht die komplette breite der fläche und haben rechts eine lücke“) */
.ld-haupt{ min-width: 0; box-sizing: border-box; width: 100%; padding: 28px clamp(16px, 3.2vw, 44px) 80px; display: flex; flex-direction: column; gap: 18px }
.ld-kopf{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px }
.ld-app .ld-kopf h1{ margin: 0; font-family: var(--zk-titel); font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; text-transform: none; color: var(--ld-text) }
.ld-kopf p{ margin: 0; color: var(--ld-text-2); font-size: 15px; flex-basis: 100% }
.ld-app .amc-fehler{ margin: 0 }

/* ---------- Kennzahl-Karten ---------- */
.ld-zahlen{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.ld-zahl{ display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); box-shadow: var(--zk-schatten) }
.ld-zahl--an{ background: var(--zk-akzent-hell); border-color: var(--zk-ring) }
.ld-zahl-name{ font-size: 13px; font-weight: 600; color: var(--ld-text-2) }
.ld-zahl-wert{ font-family: var(--zk-titel); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ld-text); font-variant-numeric: tabular-nums }
.ld-zahl-fuss{ font-size: 12.5px; color: var(--ld-text-3) }

/* ---------- Schnellfilter ---------- */
.ld-schnell{ display: flex; flex-wrap: wrap; gap: 8px }
.ld-schnell-knopf{
  --s: #3b82f6;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche);
  color: var(--ld-text); font: inherit; font-size: 14px; font-weight: 600;
}
.ld-schnell-knopf svg{ stroke: var(--s); width: 16px; height: 16px }
.ld-schnell-knopf b{ font-weight: 700; font-variant-numeric: tabular-nums }
.ld-schnell-knopf:hover{ background: color-mix(in srgb, var(--s) 7%, #fff) }
.ld-schnell-knopf--an{ background: color-mix(in srgb, var(--s) 12%, #fff); border-color: var(--s) }
.ld-schnell--neu{ --s: #3b82f6 }
.ld-schnell--offen{ --s: #d4a106 }
.ld-schnell--gewonnen{ --s: #16a34a }

/* ---------- Werkzeugleiste ---------- */
.ld-leiste{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 2px }
.ld-ansichten{ display: inline-flex; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; padding: 3px; border-radius: 12px; background: var(--ld-flaeche-3); border: 0 }
.ld-ansicht{
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ld-text-2); font: inherit; font-size: 14px; font-weight: 600;
}
.ld-ansicht svg{ width: 16px; height: 16px }
.ld-ansicht:hover{ color: var(--ld-text) }
.ld-ansicht--an{ background: var(--ld-flaeche); color: var(--ld-text); box-shadow: 0 1px 2px rgba(11,13,22,.1) }
.ld-werkzeug{ flex: 1 1 520px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.ld-suche{ flex: 1 1 280px; position: relative; display: block; margin: 0 }
.ld-suche svg{ position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ld-text-3); pointer-events: none }
.ld-suche input{
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--ld-rand-stark); border-radius: 12px;
  background: var(--ld-flaeche); color: var(--ld-text); font: inherit; font-size: 15px;
}
.ld-suche input::placeholder{ color: var(--ld-text-3) }
.ld-suche input:focus, .ld-quelle select:focus{ outline: none; border-color: var(--zk-akzent); box-shadow: 0 0 0 3px rgba(106,44,216,.18) }
.ld-quelle{ flex: 0 1 250px; margin: 0 }
.ld-quelle select{
  width: 100%; min-height: 44px; padding: 0 34px 0 12px; appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1px solid var(--ld-rand-stark); border-radius: 12px; color: var(--ld-text); font: inherit; font-size: 15px;
  background: var(--ld-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a5266' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.ld-quelle select option{ background: #fff; color: #0b0d16 }
.ld-neu-knopf{
  margin-left: auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer; white-space: nowrap;
  background: var(--zk-akzent); color: #ffffff; font: inherit; font-size: 15px; font-weight: 600;
}
.ld-neu-knopf:hover{ background: var(--zk-akzent-h); color: #fff }
.ld-neu-knopf:focus-visible, .ld-ansicht:focus-visible, .ld-schnell-knopf:focus-visible, .ld-marke-knopf:focus-visible,
.ld-weiter:focus-visible, .ld-details:focus-visible, .ld-kz-name:focus-visible, .ld-karte-titel:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }

/* ---------- Statusmarken ---------- */
.ld-statusfilter{ display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px }
.ld-marke-knopf{
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 8px 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche); color: var(--ld-text); font: inherit; font-size: 14px; font-weight: 600;
}
.ld-marke-knopf:hover{ background: var(--ld-flaeche-2) }
.ld-marke-knopf--an{ background: var(--ld-text); border-color: var(--ld-text); color: #fff }
.ld-marke-knopf--an:hover{ background: #23273a }
.ld-marke-knopf--an .ld-zaehler{ background: #fff; color: var(--ld-text) }
.ld-leer-knopf{ opacity: .55 }
.ld-zaehler{
  min-width: 22px; box-sizing: border-box; padding: 0 7px; border-radius: 999px; background: var(--ld-flaeche-3); color: var(--ld-text-2);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; font-style: normal;
}
.ld-statuswahl{ display: none; margin-bottom: 12px }
.ld-treffer{ margin: 0 0 10px; color: var(--ld-text-2); font-size: 13.5px }
.ld-link{ padding: 0; border: 0; background: none; cursor: pointer; color: var(--ld-link); font: inherit; font-weight: 600; text-decoration: none }
.ld-link:hover{ text-decoration: underline; text-underline-offset: 3px }
.ld-leer{ margin: 0; padding: 22px 18px; border: 1px dashed var(--ld-rand-stark); border-radius: 14px; color: var(--ld-text-2); max-width: 760px; background: var(--ld-flaeche) }

/* ---------- Karten der Liste ---------- */
.ld-liste{ display: flex; flex-direction: column; gap: 12px }
/* Statt farbigem Rand links (wirkt unruhig): ein Hauch der Standfarbe im Grund und ein Punkt im Rand oben links */
.ld-kz{
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px 24px; padding: 16px 18px; border-radius: 16px; cursor: pointer;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand); box-shadow: var(--zk-schatten); transition: border-color .15s, box-shadow .15s;
}
.ld-kz::before{ content: ""; position: absolute; left: 0; top: 18px; width: 4px; height: 22px; border-radius: 0 3px 3px 0; background: var(--ton) }
.ld-kz:hover{ border-color: var(--ld-rand-stark); box-shadow: 0 2px 4px rgba(11,13,22,.06), 0 6px 18px rgba(11,13,22,.06) }

.ld-kz-haupt{ min-width: 0; display: flex; flex-direction: column; gap: 9px }
.ld-app .ld-kz-kopf{ margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: 1.3; letter-spacing: 0; text-transform: none }
.ld-kz-name{ padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ld-text); font: inherit; font-size: 17px; font-weight: 650; overflow-wrap: anywhere }
.ld-kz-name:hover{ color: var(--zk-akzent-h); text-decoration: underline; text-underline-offset: 3px }
.ld-kz-firma{ color: var(--ld-text-2); font-size: 14px }
.ld-kz-meta{ margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--ld-text-2) }
.ld-kz-meta > *{ display: inline-flex; align-items: center; gap: 6px }
.ld-kz-meta a{ color: var(--ld-link); font-weight: 600; text-decoration: none; overflow-wrap: anywhere }
.ld-kz-meta a:hover{ text-decoration: underline; text-underline-offset: 3px }
.ld-kz-marken{ margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0 }
.ld-kz-kontakt{ margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px }
.ld-kz-kontakt a{ display: inline-flex; align-items: center; gap: 7px; color: var(--ld-text); text-decoration: none; overflow-wrap: anywhere }
.ld-kz-kontakt a svg{ color: var(--ld-text-3) }
.ld-kz-kontakt a:hover{ text-decoration: underline; text-underline-offset: 3px }
.ld-kz-kontakt--leer{ color: var(--ld-text-3); font-size: 13px }
.ld-kz-verlauf{ margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ld-text-3) }
.ld-kz-verlauf svg{ margin-top: 2px; width: 14px; height: 14px }
.ld-kz-verlauf span{ min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.ld-kz-verlauf q{ color: var(--ld-text-2); quotes: "„" "“" }
.ld-kz-seite{ display: flex; flex-direction: column; gap: 8px; align-self: start; padding-left: 20px; border-left: 1px solid var(--ld-rand) }

/* Marken: woher (Formular Blau, Section Monsters Violett, von Hand neutral), Kunde Grün, Fehler Rot, Doppelt Gelb */
.ld-marke, .ld-chip{
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
/* Grau nur als Rückfall — eine Grundfarbe hier (nach .ld-marke--<ton>) hätte alle Töne überschrieben (bis 11.10.2026 so) */
.ld-marke{ color: var(--m-text, #4a5266); border: 1px solid transparent; background: color-mix(in srgb, var(--m, #8a91a3) 13%, #fff) }

.ld-chip{ border: 1px dashed var(--ld-rand-stark); color: var(--ld-text-2); font-weight: 500 }
.ld-chip svg{ width: 14px; height: 14px }

/* Stand als Auswahlfeld: farbig wie die Spalte, auch im Seitenpanel (.kp-feld setzt dort sonst eigene Werte) */
.ld-status, .kp-feld .ld-status{
  appearance: none; -webkit-appearance: none; width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 34px 0 14px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ton) 45%, #cdd2de); border-radius: 12px;
  background: color-mix(in srgb, var(--ton) 9%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a5266' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ld-text); font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.4;
}
.ld-status:hover{ border-color: var(--ton) }
.ld-status:focus{ outline: none; box-shadow: 0 0 0 3px rgba(106,44,216,.18) }
.ld-status:disabled{ opacity: .6; cursor: wait }
.ld-status option{ background: #fff; color: #0b0d16 }
.kp-feld .ld-status--gross{ min-height: 46px; font-size: 15px }

/* Hauptknopf „nächster Schritt“: eine Handlungsfarbe (Violett); die Standfarbe zeigt der kleine Punkt davor */
.ld-weiter{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 42px; padding: 4px 14px;
  border-radius: 12px; border: 0; background: var(--zk-akzent); cursor: pointer;
  color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none;
}
.ld-weiter:hover{ background: var(--zk-akzent-h); color: #fff }
.ld-weiter:disabled{ opacity: .6; cursor: wait }
.ld-weiter--klein{ min-height: 36px; margin-top: 6px; font-size: 13.5px }
.ld-details{
  width: 100%; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche); cursor: pointer;
  color: var(--ld-text); font: inherit; font-size: 14.5px; font-weight: 600;
}
.ld-details:hover{ background: var(--ld-flaeche-2); border-color: #b8bdcb }

/* ---------- Board ----------
   Neun Spalten passen auf keinen Bildschirm: Das Board rollt seitlich, die Seite nicht. */
.ld-brett{ position: relative; display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 12px; overscroll-behavior-x: contain; scroll-snap-type: x proximity }
.ld-spalte{
  flex: 0 0 264px; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; scroll-snap-align: start;
  background: var(--ld-seite); border: 1px solid var(--ld-rand);
}
.ld-spalte--raus{ flex-basis: 220px; background: transparent; border-style: dashed }
.ld-spalte-kopf{ display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 12px 4px; font-size: 14px; font-weight: 700; color: var(--ld-text) }
.ld-spalte-kopf > span:first-child{ display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld-spalte-tun{ margin: 0; padding: 0 12px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ld-text-2); border-bottom: 1px solid var(--ld-rand) }
.ld-spalte-liste{ min-height: 170px; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 0 0 16px 16px; transition: background .15s }
.ld-spalte-liste--ziel{ background: rgba(106,44,216,.07); outline: 2px dashed rgba(106,44,216,.45); outline-offset: -6px }
.ld-spalte-leer{ margin: 0; padding: 18px 6px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ld-text-3) }
.ld-trenner{ flex: 0 0 1px; align-self: stretch; margin: 0 2px; background: var(--ld-rand-stark) }
.ld-karte{
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px 14px; border-radius: 12px; cursor: grab; color: var(--ld-text);
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand); box-shadow: 0 1px 2px rgba(11,13,22,.05);
}
.ld-karte::before{ content: ""; position: absolute; left: 0; top: 14px; width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--ton) }
.ld-karte:hover{ border-color: var(--ld-rand-stark) }
.ld-karte--zieht{ opacity: .45 }
.ld-karte-titel{ padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ld-text); font: inherit; font-size: 15px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere }
.ld-karte-titel:hover{ text-decoration: underline; text-underline-offset: 3px }
.ld-karte-zeile{ font-size: 13px; color: var(--ld-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld-karte-marken{ display: flex; flex-wrap: wrap; gap: 5px; min-width: 0 }
.ld-karte-marken .ld-marke, .ld-karte-marken .ld-chip{ padding: 1px 8px; font-size: 12px }
.ld-karte-fuss{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ld-text-3); font-variant-numeric: tabular-nums }
.ld-karte-fuss svg{ width: 13px; height: 13px }
.ld-brett-fuss{ margin: 4px 0 0; max-width: 72ch; font-size: 13px; color: var(--ld-text-3) }

/* Kommentare auf Kacheln (16.10.2026): eine Zeile je Absender, Kunde Blau, René Violett, ungelesen kräftig mit „neu“.
   Der Name wird nie abgeschnitten — wer kommentiert hat, soll ganz zu lesen sein; passt er nicht neben Anzahl und Zeit,
   rutschen die rechtsbündig in die zweite Zeile.
   position: relative an der Zeile, damit die Vorlesetexte (.nur-vorlesen, absolut) nicht aus dem Board rutschen. */
.kp-kom-liste{ display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.kp-kom{
  --k: #8a91a3; --k-text: #4a5266;
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 6px; min-width: 0; padding: 3px 8px 3px 7px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; color: var(--k-text); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--k) 9%, #fff); border: 1px solid color-mix(in srgb, var(--k) 24%, #fff);
}
.kp-kom--kunde{ --k: #3b82f6; --k-text: #1d4ed8 }
.kp-kom--rene{ --k: #7c3aed; --k-text: #5b21b6 }
.kp-kom--neu{ background: color-mix(in srgb, var(--k) 16%, #fff); border-color: var(--k) }
.kp-kom-blase{ flex: 0 0 13px; width: 13px; height: 13px; margin-top: 2px; fill: var(--k) }
.kp-kom-name{ flex: 0 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere }
.kp-kom-meta{ display: flex; align-items: flex-start; gap: 6px; margin-left: auto }
.kp-kom-zahl{
  flex: 0 0 auto; min-width: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 17px; color: var(--k-text); background: color-mix(in srgb, var(--k) 20%, #fff);
}
.kp-kom-zeit{ flex: 0 0 auto; font-size: 11.5px; line-height: 17px; color: var(--ld-text-3); white-space: nowrap }
.kp-kom-neu{
  flex: 0 0 auto; margin-top: 1px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700; line-height: 16px; letter-spacing: .02em;
  color: #fff; background: var(--k);
}
/* In der Schritt-Liste der Kundenansicht: unter dem Titel nebeneinander statt untereinander */
.kpv-schritt-titel .kp-kom-liste{ flex-flow: row wrap; margin-top: 6px }

/* ---------- Meldung unten, mit „Rückgängig“ ---------- */
.ld-toast{
  /* zentriert über left/right/margin statt translateX(-50%) und 100vw: das rechnete mit Scrollleiste 7 px über den Rand (Prüfung 30.10.2026) */
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 70; margin-inline: auto; box-sizing: border-box; width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px;
  background: #0b0d16; border: 0; box-shadow: var(--zk-schatten-hoch); color: #eef0f8; font-size: 15px;
}
.ld-toast[hidden]{ display: none }
.ld-toast-knopf{ flex: none; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #a98bf0; background: transparent; cursor: pointer; color: #ddd6fe; font: inherit; font-weight: 600 }
.ld-toast-knopf:hover{ background: rgba(169,139,240,.18) }

/* ---------- Seitenpanel (aus kundenportal-teile.js, hängt am body) ---------- */
html:has(.ld-app) .kp-panel{ background: #ffffff; border-left-color: var(--ld-rand); color: var(--ld-text); box-shadow: -18px 0 48px rgba(11,13,22,.18) }

.kp-panel .kp-feld select:disabled, .kp-panel .kp-feld input:disabled{ opacity: .5 }

/* ---------- Lange Wörter brechen um, statt die Seite zu verbreitern (19.10.2026) ----------
   René: „einige seiten im portal … lassen sich nach rechts scrollen“. Ursache waren Wörter ohne Trennstelle in
   Flex-Elementen — Dateipfad in der Projektnotiz, Mailadresse am Haken „Zusätzlich per Mail“, „Auftragsverarbeitungs-
   vertrag“ im Vertragspanel und in der Vertragsansicht des Kunden. Ein Flex-Element wird nie schmaler als sein längstes
   Wort und schob so die ganze Seite (bis 423 px statt 375) oder das Panel breiter. „anywhere“ (anders als
   „break-word“, das seiten.css für h1/h2 setzt) lässt das Element schrumpfen und bricht das Wort nur, wenn es nicht passt.
   Datentabellen behalten ihre Spalten und scrollen in ihrem eigenen Rahmen. */
.ld-app, html:has(.ld-app) .kp-panel{ overflow-wrap: anywhere }
.ld-app :is(h1, h2, h3), html:has(.ld-app) .kp-panel :is(h1, h2, h3){ overflow-wrap: anywhere }
:is(.bh-tabelle-rahmen, .ld-tabelle-rahmen, .bu-tab-rahmen, .kvt-text) table{ overflow-wrap: normal }
/* Knöpfe, Kennzahlen und Nummern brechen nie mitten im Wort, sonst quetscht die Zeile sie zusammen („Schlie|ßen“ im
   Panelkopf, „11.11.20|26“ in der Kachel, „10.|1“ im Masterclass-Admin). Knöpfe mit freiem Text (Aufgaben, Kunden,
   Schritte) setzen „anywhere“ selbst in ihrer Klasse und brechen weiter um. :where hält das Gewicht bei null. */
:where(.ld-app, .kp-panel) :where(button, .ld-details, .ld-neu-knopf, .ld-weiter, .ld-zahl-wert, .ld-zaehler, .mca-lek-nr, .zk-unten-punkt){ overflow-wrap: normal }
/* Lange Fachwörter lieber mit Trennstrich („Auftragsverarbeitungs-vertrag“) */
.kp-panel-kopf .marke-zeile, .kpv-projekt-kopf h2, .kvt-haken span{ -webkit-hyphens: auto; hyphens: auto }
@media (max-width: 520px){   /* nur Überschriften: Fließtext, Namen und Links enthalten Domains, die sonst einen Trennstrich bekämen */
  .kvt-text :is(h1, h2, h3), .kvt-hinweis-text b, html:has(.ld-app) .kp-panel h2{ -webkit-hyphens: auto; hyphens: auto }
}

/* ---------- Zweiklang-Rahmen unter 1024 px: Kopfleiste, Schublade, untere Leiste (js/zk-rahmen.js legt Kopf und Leiste an) ---------- */
.zk-oben, .zk-unten, .zk-decke{ display: none }
/* Nur mit geladenem Rahmen-Skript (data-zk): Beim Ausrollen kann bis zu einer Stunde eine ältere Seite aus dem Browser-Speicher
   mit dieser Datei zusammentreffen — ohne Skript bleibt die Leiste dann wie früher oben stehen, statt unsichtbar zu werden. */
@media (max-width: 1023px){
  .ld-rahmen{ grid-template-columns: minmax(0, 1fr) }
  .ld-rahmen:not([data-zk]) .ld-seite{ position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px 14px }
  .ld-rahmen:not([data-zk]) .ld-seite-gruppe{ display: none }
  .ld-rahmen:not([data-zk]) .ld-nav{ flex-direction: row; flex-wrap: wrap; gap: 4px }
  .ld-rahmen:not([data-zk]) .ld-seite-fuss{ margin: 0 0 0 auto; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 12px }
  .ld-rahmen[data-zk]{ padding-bottom: calc(68px + env(safe-area-inset-bottom)) }
  .zk-oben{
    position: sticky; top: 0; z-index: 35; display: flex; align-items: center; gap: 8px; height: 56px; box-sizing: border-box;
    padding: 0 6px 0 16px; background: var(--zk-leiste); color: #fff;
  }
  .zk-oben-logo{ display: flex; align-items: center; min-width: 0; margin-right: auto; color: inherit; text-decoration: none }
  .zk-oben-logo img{ display: block; height: 18px; width: auto }
  .zk-oben-titel{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18);
    font-size: 14px; font-weight: 600; color: #c9cedb }
  .zk-oben-knopf{ display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
    background: transparent; color: #fff; cursor: pointer }
  .zk-oben-knopf svg{ width: 22px; height: 22px; stroke-width: 1.8 }
  .zk-oben-knopf:focus-visible{ outline: 2px solid #c4b5fd; outline-offset: -2px }
  .zk-unten{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    box-sizing: border-box; height: calc(64px + env(safe-area-inset-bottom)); padding: 4px 4px env(safe-area-inset-bottom);
    background: var(--zk-leiste); border-top: 1px solid rgba(255,255,255,.06);
  }
  .zk-unten-punkt{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 0 2px;
    border: 0; border-radius: 12px; background: transparent; color: #9aa1b3; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap }
  .zk-unten-punkt span{ max-width: 100%; overflow: hidden; text-overflow: ellipsis }
  .zk-unten-punkt svg{ width: 22px; height: 22px; stroke-width: 1.8 }
  .zk-unten-punkt--an{ color: #fff }
  .zk-unten-punkt--an svg{ color: #c4b5fd }
  .zk-unten-punkt:focus-visible{ outline: 2px solid #c4b5fd; outline-offset: -2px }
  .zk-unten-zahl{ position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
    background: var(--zk-akzent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; font-style: normal }
  /* Die Leiste wird zur Schublade von links */
  .ld-rahmen[data-zk] .ld-seite{
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); height: 100%; padding-top: 18px;
    visibility: hidden; translate: -102% 0; transition: translate .22s ease, visibility 0s linear .22s; box-shadow: 18px 0 48px rgba(0,0,0,.35);
  }
  .ld-rahmen.zk-offen .ld-seite{ visibility: visible; translate: 0 0; transition: translate .22s ease, visibility 0s }
  .zk-decke{ position: fixed; inset: 0; z-index: 55; background: rgba(11,13,22,.45) }
  .ld-rahmen.zk-offen .zk-decke{ display: block }
  .ld-haupt{ padding-top: 20px }
  .ld-app .ld-kopf h1{ font-size: 24px }
  /* Meldungen über der unteren Leiste, nicht darauf */
  .ld-toast{ bottom: calc(76px + env(safe-area-inset-bottom)) }
  html.kp-panel-auf .ld-toast{ bottom: 24px }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce){ .ld-seite, .ld-rahmen.zk-offen .ld-seite{ transition: none } }

/* ---------- Telefon und schmale Fenster ---------- */
@media (max-width: 1100px){
  .ld-zahlen{ grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 720px){
  .ld-kz{ grid-template-columns: minmax(0, 1fr); padding: 14px}
  .ld-kz-seite{ padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--ld-rand); flex-direction: row; flex-wrap: wrap}
  .ld-kz-seite > *{ flex: 1 1 180px}
  .ld-statusfilter{ display: none}
  .ld-statuswahl{ display: flex}
  .ld-neu-knopf{ margin-left: 0; flex: 1 1 auto}
  .ld-quelle{ flex: 1 1 100%}
}
@media (max-width: 520px){
  .ld-zahlen{ gap: 8px}
  .ld-zahl{ padding: 11px 12px}
  .ld-zahl-wert{ font-size: 21px}
  .ld-zahl-name, .ld-zahl-fuss{ font-size: 12px}
}

/* Knöpfe, die Links oder Spans sind (15.10.2026: Schrift saß oben statt mittig) */
a.ld-details, span.ld-details, a.ld-neu-knopf, span.ld-neu-knopf{ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none }

/* Board: mit gedrückter Maustaste seitlich ziehen, dazu eine zweite Scrollleiste oben (15.10.2026) */
.ld-brett--ziehbar{ cursor: grab }
.ld-brett--ziehbar .ld-karte, .ld-brett--ziehbar button, .ld-brett--ziehbar a{ cursor: pointer }
.ld-brett--zieht, .ld-brett--zieht *{ cursor: grabbing !important; user-select: none }
.ld-brett-oben{ overflow-x: auto; overflow-y: hidden; height: 14px; margin: 0 0 6px; scrollbar-width: thin }
.ld-brett-oben[hidden]{ display: none }
.ld-brett-oben > div{ height: 1px }

/* ---------- Briefumschlag und Glocke oben rechts — alle Login-Seiten, Kundenportal und Admin (16.10.2026) ----------
   Zweiklang: am Rechner schwebend oben rechts in der hellen Fläche; unter 1024 px sitzen sie in der dunklen Kopfleiste. */
.ld-glocken{ position: sticky; top: 12px; z-index: 40; align-self: flex-end; display: flex; gap: 4px; margin: -12px 0 -8px; padding: 4px;
  border: 1px solid var(--ld-rand); border-radius: 999px; background: var(--ld-flaeche); box-shadow: var(--zk-schatten) }
/* kein backdrop-filter: er machte die Leiste zum Bezugsrahmen der festen Liste auf dem Handy (abgeschnitten) */
.ld-glocke{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--ld-text-2); cursor: pointer }
.ld-glocke svg{ width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round }
.ld-glocke:hover, .ld-glocke:focus-visible, .ld-glocke[aria-expanded="true"]{ background: var(--ld-flaeche-3); color: var(--ld-text) }
.ld-glocke--neu{ color: var(--ld-text) }
.ld-glocke--neu[data-glocke="alle"] svg{ transform-origin: 50% 10%; animation: ld-glocke-wackeln 1.6s ease-in-out 1 }
@keyframes ld-glocke-wackeln{ 0%, 60%, 100%{ transform: rotate(0) } 10%{ transform: rotate(14deg) } 20%{ transform: rotate(-12deg) } 30%{ transform: rotate(8deg) } 40%{ transform: rotate(-5deg) } }
@media (prefers-reduced-motion: reduce){ .ld-glocke--neu[data-glocke="alle"] svg{ animation: none } }
.ld-glocke-zahl{ position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: #e5484d; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--ld-flaeche) }
.ld-glocke-zahl[hidden]{ display: none }
.ld-glocken-liste{ position: absolute; top: calc(100% + 8px); right: 0; width: min(390px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto;
  overflow-x: hidden; display: flex; flex-direction: column; border: 1px solid var(--ld-rand); border-radius: 16px; background: #fff;
  box-shadow: var(--zk-schatten-hoch) }
.ld-glocken-liste[hidden]{ display: none }
.ld-glocken-kopf{ position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--ld-rand); background: inherit; font-size: 14.5px; color: var(--ld-text) }
.ld-glocken-kopf .ld-link{ font-size: 13.5px }
.ld-glocken-eintrag{ display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--ld-rand);
  background: color-mix(in srgb, #6a2cd8 4%, #fff); color: var(--ld-text); font: inherit; text-align: left; cursor: pointer }
.ld-glocken-eintrag:hover, .ld-glocken-eintrag:focus-visible{ background: var(--ld-flaeche-2) }
a.ld-glocken-eintrag{ text-decoration: none; box-sizing: border-box }
.ld-glocken-zeile1{ display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--ld-text-2) }
.ld-glocken-zeile1 b{ min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; color: var(--ld-text); white-space: nowrap }
.ld-glocken-zeile1 > span:last-child{ min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld-glocken-art{ flex: none }
.ld-glocken-art{ display: inline-flex; color: var(--zk-akzent) }
.ld-glocken-art svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8 }
.ld-glocken-text{ font-size: 14.5px; line-height: 1.45; color: var(--ld-text); overflow-wrap: anywhere }
.ld-glocken-zeit{ font-size: 12.5px; color: var(--ld-text-3) }
.ld-glocken-leer{ margin: 0; padding: 18px 14px; font-size: 14.5px; color: var(--ld-text-2) }
.ld-glocken-fuss{ padding: 10px 14px; font-size: 13.5px }
@media (max-width: 1023px){
  /* In der dunklen Kopfleiste: fest oben rechts, links vom Menüknopf */
  .ld-glocken{ position: fixed; top: 6px; right: 52px; z-index: 36; margin: 0; padding: 2px; border: 0; background: transparent; box-shadow: none; gap: 0 }
  .ld-glocke{ width: 44px; height: 44px; color: #fff }
  .ld-glocke:hover, .ld-glocke:focus-visible, .ld-glocke[aria-expanded="true"]{ background: rgba(255,255,255,.1); color: #fff }
  .ld-glocke--neu{ color: #fff }
  .ld-glocke-zahl{ box-shadow: 0 0 0 2px var(--zk-leiste) }
  .ld-glocken-liste{ position: fixed; top: 60px; right: 12px; left: 12px; width: auto; max-height: calc(100svh - 150px) }  /* top setzt das Skript unter die Symbole */
}

/* ---------- Kette in jedem Seitenpanel: Lead · Angebot · Zusage · AB · Projekt · Verträge · Rechnungen · Bezahlt (17.10.2026) ---------- */
.ak-kette{ display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 4px; margin: 2px 0 12px }
.ak-station{ display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 220px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ton) 30%, #fff);
  background: color-mix(in srgb, var(--ton) 7%, #fff); color: var(--ld-text); text-decoration: none; line-height: 1.25 }
a.ak-station:hover, a.ak-station:focus-visible{ background: color-mix(in srgb, var(--ton) 14%, #fff) }
.ak-station.ld-ton--grau{ opacity: .75 }
.ak-titel{ font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ak-unter{ font-size: 12px; color: var(--ld-text-2); overflow-wrap: anywhere }
.ak-pfeil{ align-self: center; color: var(--ld-text-3); font-size: 14px }
.ak-warnung{ margin: -4px 0 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid #f5c2c2;
  background: #fdecec; color: #a51c1c; font-size: 13.5px }
.ak-laden{ margin: 0 0 10px; font-size: 13px; color: var(--ld-text-2) }
@media (max-width: 720px){ .ak-station{ max-width: none; flex: 1 1 140px } .ak-pfeil{ display: none } }

/* ---------- Zweiklang-Bausteine (30.10.2026): Karte, Schrittliste, Reiter, Knöpfe — Kundenportal und Admin ---------- */
.zk-karte{ box-sizing: border-box; padding: 18px 20px; border-radius: 18px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); box-shadow: var(--zk-schatten) }
.zk-karte-kopf{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px }
.ld-app .zk-karte-titel{ margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--zk-schrift); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ld-text-2) }
.zk-schritte{ padding: 0; overflow: hidden }
.zk-schritte .zk-karte-titel{ padding: 18px 20px 10px }
.zk-schritt-liste{ margin: 0; padding: 0; list-style: none }
.zk-schritt{ display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--ld-rand) }
.zk-nr{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ld-flaeche); color: var(--zk-akzent); box-shadow: inset 0 0 0 2px var(--zk-ring); font-size: 13.5px; font-weight: 700 }
.zk-nr--erst{ background: var(--zk-akzent); color: #fff; box-shadow: none }
.zk-schritt-text{ flex: 1; min-width: 0 }
.zk-schritt-text p{ margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ld-text) }
.zk-schritt-text .zk-schritt-frist{ margin-top: 3px; font-size: 13.5px; font-weight: 400; color: var(--ld-text-2) }
.zk-schritt-text .zk-schritt-frist--zu{ color: #a51c1c; font-weight: 600 }
.zk-knopf{ flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 18px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: var(--zk-akzent); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap }
.zk-knopf:hover{ background: var(--zk-akzent-h); color: #fff }
.zk-knopf--leise{ background: var(--ld-flaeche); color: var(--ld-text); box-shadow: inset 0 0 0 1px var(--ld-rand-stark) }
.zk-knopf--leise:hover{ background: var(--ld-flaeche-2); color: var(--ld-text) }
.zk-knopf:focus-visible, .zk-mehr:focus-visible, .zk-reiter-punkt:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.zk-knopf:disabled{ opacity: .55; cursor: not-allowed }
.zk-mehr{ display: block; width: 100%; min-height: 46px; border: 0; border-top: 1px solid var(--ld-rand); background: var(--ld-flaeche-2); color: var(--ld-link);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer }
.zk-mehr:hover{ background: var(--ld-flaeche-3) }
.zk-leise{ margin: 0; font-size: 14px; color: var(--ld-text-2) }
.zk-stand-name{ margin: 0 0 10px; font-family: var(--zk-titel); font-size: 17px; font-weight: 600; color: var(--ld-text) }
.zk-balken{ display: block; height: 8px; margin-bottom: 10px; border-radius: 4px; background: var(--ld-flaeche-3); overflow: hidden }
.zk-balken > span{ display: block; height: 100%; border-radius: 4px; background: var(--zk-akzent) }
.zk-hinweis-zeile{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--zk-akzent-hell);
  color: #3b1a85; font-size: 14.5px }
.zk-hinweis-zeile span{ margin-right: auto }
.zk-leise-link{ color: var(--ld-text-2) }
.zk-start-fuss{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 0; font-size: 14.5px; color: var(--ld-text-2) }
.zk-start-fuss span{ margin-left: auto }
.zk-start-fuss a{ color: var(--ld-link); font-weight: 600; text-decoration: none }
/* Reiter über gebündelten Ansichten (Unterlagen, Nachrichten): rollen auf dem Handy seitlich in ihrem Rahmen, nie die Seite */
.zk-reiter{ display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 0 2px; padding: 4px; box-sizing: border-box;
  border-radius: 14px; background: var(--ld-flaeche-3); align-self: flex-start }
.zk-reiter::-webkit-scrollbar{ display: none }
.zk-reiter-punkt{ display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; color: var(--ld-text-2);
  font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap }
.zk-reiter-punkt:hover{ color: var(--ld-text) }
.zk-reiter-punkt--an{ background: var(--ld-flaeche); color: var(--ld-text); box-shadow: 0 1px 2px rgba(11,13,22,.1) }
.zk-reiter-punkt .ld-zaehler{ background: var(--zk-akzent); color: #fff }
@media (max-width: 600px){
  .zk-karte{ padding: 16px; border-radius: 16px }
  .zk-karte.zk-schritte{ padding: 0 }
  .zk-schritte .zk-karte-titel{ padding: 16px 16px 8px }
  .zk-schritt{ flex-wrap: wrap; padding: 14px 16px; gap: 10px 12px }
  .zk-schritt-text{ flex: 1 1 calc(100% - 50px) }
  .zk-schritt .zk-knopf{ margin-left: 42px; flex: 1 1 auto }
  .zk-start-fuss span{ margin-left: 0; flex-basis: 100% }
  .zk-reiter{ align-self: stretch }
}

/* ---------- Anmelden, Laden, Passwort, Gesperrt (masterclass.css/welt.css im Website-Stil) → Zweiklang ---------- */
.ld-app .mk-mitte{ background: var(--ld-grund) }
.ld-app .mk-tafel{ background: #fff; border: 1px solid var(--ld-rand); border-radius: 20px; box-shadow: var(--zk-schatten-hoch); color: var(--ld-text) }
.ld-app .mk-tafel h1{ font-family: var(--zk-titel); font-size: 26px; font-weight: 600; letter-spacing: -.015em; text-transform: none; color: var(--ld-text) }
.ld-app .marke-zeile{ font-family: var(--zk-schrift); font-size: 12px; letter-spacing: .08em; color: var(--zk-akzent); font-weight: 600 }
.ld-app .feld span{ font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ld-text-2) }
.ld-app .feld input{ min-height: 46px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--ld-rand-stark); border-radius: 12px; background: #fff; color: var(--ld-text); font-size: 16px }
.ld-app .feld input:focus{ outline: none; border-color: var(--zk-akzent); box-shadow: 0 0 0 3px rgba(106,44,216,.18) }
.ld-app .knopf, html:has(.ld-app) .kp-panel .knopf{ display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 0; border-radius: 12px;
  background: var(--zk-akzent); color: #fff; font-weight: 600; font-size: 15px }
.ld-app .knopf:hover, html:has(.ld-app) .kp-panel .knopf:hover{ background: var(--zk-akzent-h); color: #fff }
.ld-app .mk-link{ color: var(--ld-link); font-weight: 600; text-decoration: none }
.ld-app .mk-link:hover{ color: var(--zk-akzent-h); text-decoration: underline }
.ld-seite .mk-link{ color: #e4e7f0 }
.ld-app .mk-lade-ring{ background: conic-gradient(var(--zk-akzent), #a98bf0, transparent 70%) }

/* ---------- Assistenten (30.10.2026, René: „wenn möglich gewisse sachen über wizards lösen“): Schrittanzeige, Fakten, Fuß ---------- */
.zk-stufen{ display: flex; align-items: center; gap: 0; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none }
.zk-stufe{ display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ld-text-3) }
.zk-stufe + .zk-stufe::before{ content: ""; flex: 0 1 28px; min-width: 10px; height: 2px; margin-right: 6px; border-radius: 1px; background: var(--ld-rand-stark) }
.zk-stufe--fertig + .zk-stufe::before, .zk-stufe--fertig + .zk-stufe--jetzt::before{ background: var(--zk-ring) }
.zk-stufe span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.zk-stufe-nr{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ld-rand-stark); color: var(--ld-text-3); font-size: 13px; font-weight: 700 }
.zk-stufe--jetzt{ color: var(--ld-text) }
.zk-stufe--jetzt .zk-stufe-nr{ background: var(--zk-akzent); box-shadow: none; color: #fff }
.zk-stufe--fertig{ color: var(--ld-text-2) }
.zk-stufe--fertig .zk-stufe-nr{ background: var(--zk-akzent-hell); box-shadow: none; color: var(--zk-akzent) }
.ld-app .zk-schritt-titel, html:has(.ld-app) .kp-panel .zk-schritt-titel{ margin: 0 0 6px; font-family: var(--zk-titel); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ld-text) }
.zk-fakten{ margin: 14px 0; border: 1px solid var(--ld-rand); border-radius: 14px; overflow: hidden }
.zk-fakten > div{ display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ld-rand) }
.zk-fakten > div:first-child{ border-top: 0 }
.zk-fakten dt{ font-size: 13.5px; color: var(--ld-text-2) }
.zk-fakten dd{ margin: 0; font-size: 15px; line-height: 1.45; color: var(--ld-text) }
.zk-fakten dd small{ display: block; font-size: 13px; color: var(--ld-text-2) }
.zk-hinweis-box{ margin: 0 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--zk-akzent-hell); color: #3b1a85; font-size: 14.5px; line-height: 1.45 }
.zk-fuss{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ld-rand) }
.zk-fuss .zk-knopf--leise:first-child{ margin-right: auto }
.zk-fuss-link{ margin: 10px 0 0; text-align: right; font-size: 14.5px }
.zk-knopf--rot{ background: #c22b2b }
.zk-knopf--rot:hover{ background: #a51c1c }
@media (max-width: 600px){
  .zk-stufe{ font-size: 12.5px; gap: 6px }
  .zk-stufe + .zk-stufe::before{ flex-basis: 14px; margin-right: 4px }
  .zk-stufe:not(.zk-stufe--jetzt) span:last-child{ display: none }
  .zk-stufe:not(.zk-stufe--jetzt){ flex: 0 0 auto }
  .zk-stufe--jetzt{ flex: 1 1 auto }
  .zk-fakten > div{ grid-template-columns: minmax(0, 1fr); gap: 2px }
  .zk-fuss .zk-knopf{ flex: 1 1 auto }
  .zk-fuss .zk-knopf--leise:first-child{ margin-right: 0 }
}
/* Auswahl als Knöpfe statt Zahlenfeld (kein Mausrad-Verstellen, René 10.10.2026) und Kundenauswahl in Assistenten */
.zk-wahl{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; padding: 0; border: 0 }
.zk-wahl legend{ width: 100%; margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ld-text-2) }
.zk-wahl label{ position: relative; cursor: pointer }
.zk-wahl input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.zk-wahl span{ display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--ld-rand-stark); background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ld-text) }
.zk-wahl input:checked + span{ border-color: var(--zk-akzent); background: var(--zk-akzent-hell); color: #3b1a85 }
.zk-wahl input:focus-visible + span{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.zk-wahl-suche{ display: block; margin: 0 0 12px }
.zk-wahl-liste{ display: flex; flex-direction: column; max-height: min(52vh, 460px); overflow-y: auto; border: 1px solid var(--ld-rand); border-radius: 14px }
.zk-wahl-zeile{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; box-sizing: border-box; padding: 10px 14px;
  border: 0; border-top: 1px solid var(--ld-rand); background: #fff; color: var(--ld-text); font: inherit; text-align: left; cursor: pointer }
.zk-wahl-zeile:first-child{ border-top: 0 }
.zk-wahl-zeile:hover, .zk-wahl-zeile:focus-visible{ background: var(--zk-akzent-hell); outline: none }
.zk-wahl-zeile b{ font-size: 15px; font-weight: 600 }
.zk-wahl-zeile small{ font-size: 13px; color: var(--ld-text-2) }

/* ---------- Erklärtexte kürzen (30.10.2026, René: „man wird von informationen regelrecht erschlagen“) ----------
   Erklärungen unter Überschriften und in den Reitern zeigen zwei Zeilen; ein Klick zeigt den ganzen Text (js/zk-rahmen.js). */
.ld-kopf p, .ba-erklaerung{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden }
.ld-kopf p.zk-auf, .ba-erklaerung.zk-auf{ display: block; -webkit-line-clamp: unset; overflow: visible }
.zk-kuerzbar{ cursor: pointer }
.zk-kuerzbar:hover{ color: var(--ld-text) }
/* Sehr schmale Handys (320 px): lange Beträge („2.380,00 €“) passen nicht in zwei Spalten — Zahlenkarten untereinander (Prüfung 30.10.2026) */
@media (max-width: 359px){ .ld-zahlen{ grid-template-columns: minmax(0, 1fr) } }

/* ---------- Reste des dunklen Designs (01.11.2026, René: „unten bei den boxen mit Text ist so ein schwarzer schatten oder fläche drin
   (so ne dunkle transparenz). dass muss auch bei nachrichten für kunden usw. sein“) ----------
   kundenportal.css und masterclass.css stammen aus dem Noir-Design (dunkle Website) und legen fast schwarze, halbdurchsichtige Flächen
   unter Notizen, Kommentare, Nachrichten, Bestätigungen und Formularfelder. Auf der hellen Arbeitsfläche hinter dem Login werden sie hier
   hell; die öffentliche Website bleibt, wie sie ist (alles nur unter html:has(.ld-app)). */
html:has(.ld-app) .kp-kommentar{ background: var(--ld-flaeche-2); border-left-color: var(--ld-rand-stark); border-radius: 0 10px 10px 0; color: var(--ld-text) }
html:has(.ld-app) .kp-kommentar--rene{ border-left-color: var(--zk-akzent) }
html:has(.ld-app) .kp-kommentar-kopf{ color: var(--ld-text-3) }
html:has(.ld-app) .kp-kommentar-kopf strong{ color: var(--ld-text-2) }
html:has(.ld-app) .kp-kommentar-text{ color: var(--ld-text) }
html:has(.ld-app) .kp-bestaetigen{ background: var(--ld-flaeche-2); border-color: var(--ld-rand); border-radius: 12px }
html:has(.ld-app) :is(.kpa-pos input, .kpa-pos textarea, .amc-thema-felder input, .amc-thema-felder select, .amc-thema-ziel, .amc-form select){
  background: #fff; color: var(--ld-text); border-color: var(--ld-rand-stark); border-radius: 8px }
html:has(.ld-app) .kpk-abnahme .kpk-aendern{ background: var(--ld-flaeche-2) }
html:has(.ld-app) .amc-form{ background: var(--ld-flaeche); border-color: var(--ld-rand) }
html:has(.ld-app) .mk-willkommen{ background: var(--zk-akzent-hell); border-left-color: var(--zk-akzent); color: var(--ld-text) }

/* Handy: Slide-in-Panels und Kanban (René 09.11.2026: „in der mobilen ansicht lassen sich die slide-in-panels horizontal scrollen, das darf
   nicht sein. außerdem sind sie an vielen stellen nicht responsive.“). Felder unter 16 px lassen das iPhone beim Antippen hineinzoomen, danach
   ist alles seitlich verschiebbar. Tabellen und Reiter in ihren eigenen Rahmen dürfen weiter seitlich laufen. */
.bu-lade, .bu-lade-inhalt, .wa{ overflow-x: hidden; max-width: 100% }
.kp-panel-koerper{ min-width: 0; max-width: 100% }
@media (hover: none) and (pointer: coarse){
  .ld-brett-oben{ display: none !important }   /* Am Handy wischt man das Board direkt, die zweite Leiste oben stört nur */
  .ld-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .ld-app select, .ld-app textarea,
  .kp-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .kp-panel select, .kp-panel textarea,
  .bu-lade input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .bu-lade select, .bu-lade textarea{ font-size: 16px !important }
}
@media (max-width: 640px){
  .kp-panel, .bu-lade-inhalt{ overscroll-behavior-x: none; touch-action: pan-y pinch-zoom }
  .kp-panel :where(.bh-tabelle-rahmen, .ld-tabelle-rahmen, .bu-tab-rahmen, .za-tabelle-rahmen, .zk-reiter, .ld-brett){ touch-action: auto }
  :where(.kp-panel, .bu-lade-inhalt) :where(form, fieldset, section, article, div, label, ul, ol, li, p, h2, h3){ min-width: 0 }
  :where(.kp-panel, .bu-lade-inhalt) :where(input, select, textarea, img, video, iframe, canvas, pre, table){ max-width: 100% }
  .kp-panel-kopf{ flex-wrap: wrap }
  .kp-panel .kpa-mail-knoepfe, .kp-panel .kpa-freigabe-knoepfe, .kp-panel .kpa-panel-fuss-links{ flex-wrap: wrap }
}