/* HÖPPNER Cockpit — gemeinsames Stylesheet für Kern und Module.
   Übernommen aus dem Angebotstool (hmc-angebote/assets/app.css, Stil nach Vorbild
   pipedrive/auftragsvolumen.php). Cockpit-eigene Teile stehen am Ende. Nur heller Modus. */
:root {
  color-scheme: light;
  --bg: #f1f5f9;
  --flaeche: #ffffff;
  --flaeche-2: #f8fafc;
  --rand: #e2e8f0;
  --rand-2: #f1f5f9;
  --text: #1e293b;
  --text-stark: #0f172a;
  --text-2: #475569;
  --gedaempft: #64748b;
  --leise: #94a3b8;
  --navy: #1d3b7b;
  --navy-2: #2f55a4;
  --gruen-marke: #76b82a;
  --indigo: #6366f1;
  --dunkel: #1e293b;
  --schatten: 0 2px 8px rgba(0,0,0,0.05);
  --schatten-hoch: 0 12px 32px rgba(0,0,0,0.10);
  --verlauf-navy: linear-gradient(135deg, #1d3b7b, #3b63b8);
  --verlauf-gruen: linear-gradient(135deg, #10b981, #059669);
  --verlauf-indigo: linear-gradient(135deg, #6366f1, #8b5cf6);
  --verlauf-gelb: linear-gradient(135deg, #f59e0b, #d97706);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h, 0px) + 8px); }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); min-height: 100vh;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(99,102,241,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 85%, rgba(16,185,129,0.06) 0%, transparent 50%);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }

/* Sidebar (unverändert im Content-Hub-Stil) ------------------------------- */
.sidebar {
  background: #fafafa; border-right: 1px solid #ebebee;
  padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 15px;
  color: #18181b; -webkit-font-smoothing: antialiased;
}
.marke { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 8px 6px; text-decoration: none; }
.marke-logo { height: 62px; width: auto; display: block; margin-left: -6px; }
.marke-claim { font-size: 13px; color: #1d3b7b; letter-spacing: -0.1px; padding-left: 2px; }
.marke-titel { padding: 10px 8px 12px; margin: 0 0 4px; border-bottom: 1px solid #ebebee; }
.marke-titel b { font-size: 15.5px; font-weight: 600; display: block; }
.marke-titel span { font-size: 13px; color: #8a8a93; }
.neu-btn { width: 100%; justify-content: center; margin: 12px 0 2px; padding: 8px 12px; font-size: 14px; }
.sidebar .btn.primaer { background: #1d3b7b; box-shadow: none; transform: none; border-radius: 8px; }
.sidebar .btn.primaer:hover { background: #16306a; }
.nav-gruppe { margin-top: 14px; }
.nav-label { font-size: 12.5px; font-weight: 500; color: #8a8a93; padding: 0 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-decoration: none;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; text-align: left; color: #52525b;
}
.nav-item svg { stroke-width: 1.7; }
.nav-item:hover { background: #f1f1f3; color: #18181b; }
.nav-item[aria-current="page"] { background: #e9e9ec; color: #18181b; font-weight: 600; }
.badge { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #8a8a93; font-variant-numeric: tabular-nums; }
.nav-angebot { align-items: flex-start; padding: 6px 10px; }
.nav-angebot .punkt { margin-top: 7px; }
.nav-angebot-txt { min-width: 0; display: block; }
.nav-angebot-txt b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-angebot-txt small { display: block; font-size: 12.5px; color: #8a8a93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-angebot[aria-current="page"] b { font-weight: 600; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punkt.ok { background: #22c55e; } .punkt.entwurf { background: #dcdce0; border: 1.5px solid #8a8a93; }
.sidebar-fuss { margin-top: auto; padding-top: 12px; border-top: 1px solid #ebebee; }
.nutzer { display: flex; align-items: center; gap: 10px; padding: 2px 4px 0 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #1d3b7b; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.nutzer-name { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nutzer-profil { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: -4px 0 -4px -6px; padding: 4px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.nutzer-profil:hover { background: #f1f1f3; }
.nutzer-profil[aria-current="page"] { background: #e9e9ec; font-weight: 600; }

/* Kopf --------------------------------------------------------------------- */
.haupt { padding: 32px 32px 60px; min-width: 0; }
.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
.kopf h1 { font-size: 28px; font-weight: 700; color: var(--text-stark); letter-spacing: -0.5px; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kopf p { margin: 6px 0 0; font-size: 14px; color: var(--gedaempft); }
.kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.claim { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 20px; color: var(--navy); letter-spacing: -0.2px; white-space: nowrap; }
.kopf-aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.kopf.klebend {
  position: sticky; top: 0; z-index: 30; margin: -32px -32px 28px; padding: 20px 32px 18px;
  background: rgba(241,245,249,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s; align-items: center;
}
.kopf.klebend.gescrollt { border-bottom-color: var(--rand); box-shadow: 0 6px 20px rgba(15,23,42,0.06); }
.kopf.klebend .kopf-rechts { flex-direction: row; align-items: center; }
.kopf.klebend h1 { font-size: 22px; }

.header-badge, .speicherstatus {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--rand); border-radius: 100px;
  padding: 6px 14px; font-size: 12px; color: var(--gedaempft); white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.speicherstatus .dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.speicherstatus.laeuft .dot { background: #f59e0b; animation: pulse 1.2s infinite; }
.speicherstatus.fehler { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.speicherstatus.fehler .dot { background: #dc2626; }
.speicherstatus.wartet .dot { background: #94a3b8; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
/* Editor-Kopf bleibt beim Speichern stehen: Status mit fester Breite, Knöpfe brechen nicht um, die Prüfliste nimmt den Rest */
@media (min-width: 1001px) {
  .kopf.klebend > div:first-child { flex: 1 1 auto; min-width: 0; }
  .kopf.klebend .kopf-rechts { flex: none; }
  .kopf.klebend .kopf-aktionen { flex-wrap: nowrap; }
  .kopf.klebend .speicherstatus { width: 205px; }
  .kopf.klebend .speicherstatus .dot { flex: none; }
  .kopf.klebend .speicherstatus .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 16px; font-size: 13px;
  font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid var(--rand); background: #fff; color: var(--gedaempft);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: all .2s; white-space: nowrap; line-height: 1.3;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--flaeche-2); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primaer { background: var(--verlauf-navy); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(29,59,123,0.25); }
.btn.primaer:hover { box-shadow: 0 6px 18px rgba(29,59,123,0.35); transform: translateY(-1px); color: #fff; }
.btn.leise { border-color: transparent; background: none; box-shadow: none; color: var(--gedaempft); }
.btn.leise:hover { background: var(--rand-2); color: var(--text); }
.btn.gefahr { color: #dc2626; }
.btn.gefahr:hover { background: #fef2f2; color: #b91c1c; }
/* Höhen passend zu den Feldern: .btn wie ein Eingabefeld (39 px), .klein wie die kompakten Felder in Tabellen (34 px) */
.btn.klein { padding: 8px 12px; font-size: 12px; border-radius: 8px; }
.btn.icon { padding: 10px; }
.btn.klein.icon { padding: 8px; }
.btn.gross { padding: 11px 18px; font-size: 14px; width: 100%; justify-content: center; }
/* Links mit data-laden (z. B. „Aktualisieren“) zeigen nach dem Klick, dass geladen wird (app.js) */
.btn.laedt { pointer-events: none; opacity: .7; }
.btn.laedt svg { animation: btn-drehen .8s linear infinite; }
@keyframes btn-drehen { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; color: var(--indigo); font-weight: 600; font-size: 13px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Pills / Badges ----------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--rand-2); color: var(--text-2);
}
.pill svg { width: 12px; height: 12px; stroke-width: 2.6; }
.pill.gruen { background: #dcfce7; color: #166534; }
.pill.gelb { background: #fef9c3; color: #a16207; }
.pill.rot { background: #fee2e2; color: #b91c1c; }
.pill.blau { background: #eef2ff; color: #4338ca; }
.pill.navy { background: var(--navy); color: #fff; }
.pill.klein { font-size: 11px; padding: 1px 8px; }
.gedaempft { color: var(--gedaempft); }
.zahl { font-variant-numeric: tabular-nums; }

.hinweis-box {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-radius: 12px; padding: 10px 16px; font-size: 13px;
  margin-bottom: 18px; background: #fff; border: 1px solid var(--rand); color: var(--text-2);
}
.hinweis-box svg { width: 16px; height: 16px; }
.hinweis-box.warn { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.hinweis-box.info { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.hinweis-box.gelb { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.hinweis-box.gruen { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

/* Prüfliste im Editor-Kopf: was fehlt noch fürs PDF? */
.pruefliste { display: flex; flex-wrap: wrap; gap: 6px; }
.pruef {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 999px;
  padding: 2px 10px 2px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.6;
}
.pruef svg { width: 12px; height: 12px; stroke-width: 2.8; }
.pruef b { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: 10px; color: #fff; }
.pruef.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.pruef.fehlt { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.pruef.fehlt b { background: #dc2626; }
.pruef.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.pruef.warn b { background: #f59e0b; }
.feld small.feld-warnung { color: #92400e; font-weight: 500; }
textarea.warn, textarea.warn:hover { border-color: #fbbf24; background: #fffdf5; }

/* KPI-Karten --------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kpi {
  background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 18px 20px 16px; position: relative; overflow: hidden;
  box-shadow: var(--schatten); display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) { .kpi:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); } }
.kpi::after { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: var(--glow); border-radius: 50%; filter: blur(40px); pointer-events: none; opacity: .5; }
.kpi .card-icon { position: absolute; top: 16px; right: 16px; z-index: 1; width: 32px; height: 32px; border-radius: 9px; background: var(--grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px var(--glow); color: #fff; }
.kpi .card-icon svg { width: 17px; height: 17px; stroke-width: 2; }
.kpi small { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--leise); margin-bottom: 8px; padding-right: 40px; }
.kpi b { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 6px; }
.kpi b em { font-style: normal; font-size: 16px; letter-spacing: 0; font-weight: 700; }
.kpi span { font-size: 12px; color: var(--gedaempft); }
.kpi.navy { --grad: var(--verlauf-navy); --glow: rgba(29,59,123,0.35); }
.kpi.gruen { --grad: var(--verlauf-gruen); --glow: rgba(16,185,129,0.35); }
.kpi.indigo { --grad: var(--verlauf-indigo); --glow: rgba(99,102,241,0.35); }
.kpi.gelb { --grad: var(--verlauf-gelb); --glow: rgba(245,158,11,0.35); }

/* Sektionen & Karten ------------------------------------------------------- */
.abschnitt { margin: 40px 0 16px; font-size: 16px; font-weight: 700; color: var(--text-stark); display: flex; align-items: center; gap: 10px; }
.abschnitt::after { content: ''; flex: 1; height: 1px; background: var(--rand); }
.abschnitt a { order: 2; font-size: 13px; font-weight: 600; color: var(--gedaempft); text-decoration: none; }
.abschnitt a:hover { color: var(--indigo); }

.karte { background: #fff; border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--schatten); min-width: 0; }
.karte + .karte { margin-top: 18px; }
.karte-kopf { display: flex; align-items: center; gap: 10px; padding: 18px 22px 0; flex-wrap: wrap; }
.karte-kopf h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; }
.karte-kopf p { margin: 0; font-size: 12px; color: var(--leise); }
.karte-kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.karte-inhalt { padding: 14px 22px 20px; }
.schritt { width: 24px; height: 24px; border-radius: 8px; background: var(--verlauf-navy); color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0; box-shadow: 0 3px 8px rgba(29,59,123,.25); }

/* Formulare ---------------------------------------------------------------- */
.feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--gedaempft); }
.feld small { font-size: 12px; color: var(--leise); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input:not([type]), select, textarea {
  width: 100%; border: 1.5px solid var(--rand); border-radius: 10px; background: #fff;
  padding: 8px 12px; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--leise); }
/* Safari (iOS) gibt Datumsfeldern sonst eine Mindestbreite aus dem Inhalt: das Feld ragt aus der Karte */
input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; min-height: 38px; }
input[type=date]::-webkit-date-and-time-value { text-align: left; }
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
input:hover, select:hover, textarea:hover { border-color: #cbd5e1; }
input:focus, select:focus, textarea:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
input:disabled { background: var(--flaeche-2); color: var(--gedaempft); }
.nummer-feld { position: relative; }
.nummer-feld input { padding-right: 38px; }
.nummer-knopf { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--gedaempft); cursor: pointer; }
.nummer-knopf:hover { background: rgba(99,102,241,0.1); color: var(--indigo); }
.nummer-knopf[hidden] { display: none; }
.nummer-knopf svg { width: 15px; height: 15px; }
.raster { display: grid; gap: 14px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.voll { grid-column: 1 / -1; }
.schalter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; color: var(--text-2); }
.schalter input { width: 16px; height: 16px; accent-color: var(--navy); }
.format-hilfe { font-size: 12px; color: var(--leise); margin-top: 2px; }
.format-hilfe code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--rand-2); color: var(--text-2); padding: 1px 5px; border-radius: 5px; }

/* Aufklappbare Bereiche */
details.klappe { background: #fff; border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--schatten); margin-top: 18px; }
details.klappe > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 22px;
  font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px;
}
details.klappe > summary::-webkit-details-marker { display: none; }
details.klappe > summary { white-space: nowrap; }
details.klappe > summary .zusammenfassung { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--leise); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
details.klappe > summary::after {
  content: ''; margin-left: auto; width: 12px; height: 12px; flex: none; transition: transform .2s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/12px no-repeat;
}
details.klappe[open] > summary::after { transform: rotate(180deg); }
details.klappe[open] > summary { border-bottom: 1px solid var(--rand-2); }
details.klappe .karte-inhalt { padding-top: 18px; }

/* Tabellen & Filter -------------------------------------------------------- */
.tabelle-wrap { overflow-x: auto; border: 1px solid var(--rand); border-radius: 16px; background: #fff; box-shadow: var(--schatten); }
.karte .tabelle-wrap, .tabelle-wrap.flach { border: 0; box-shadow: none; border-radius: 0 0 16px 16px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th {
  background: #f1f5f9; padding: 14px 14px 12px; text-align: left; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); border-bottom: 1px solid var(--rand); white-space: nowrap; vertical-align: middle;
}
@media (min-width: 1001px) {
  .tabelle th:first-child, .tabelle td:first-child { padding-left: 22px; }
  .tabelle th:last-child, .tabelle td:last-child { padding-right: 22px; }
}
.tabelle-wrap.oben { border-radius: 16px 16px 0 0; }
.th-modul { display: inline-flex; align-items: center; gap: 8px; }
.th-modul svg {
  width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: #fff; color: var(--navy); stroke-width: 2;
  box-shadow: 0 0 0 1px var(--rand);
}
.tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--rand-2); color: #374151; vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }
.tabelle .r { text-align: right; }
.tabelle .aktionen { white-space: nowrap; text-align: right; }
.tabelle .aktionen .btn { margin-left: 4px; }
.tabelle .aktionen .btn.ohne-profil { opacity: .4; }
.tabelle .aktionen .btn.ohne-profil:hover { opacity: 1; }
.tabelle a.zeilen-link { font-weight: 600; color: var(--text-stark); text-decoration: none; }
.tabelle a.zeilen-link:hover { color: var(--indigo); }
.tabelle .sub { display: block; font-size: 12px; color: var(--leise); margin-top: 2px; }
.nr-chip { font-family: ui-monospace, monospace; font-weight: 700; color: var(--text-2); background: var(--rand-2); padding: 2px 7px; border-radius: 6px; font-size: 11.5px; white-space: nowrap; }
.leer { color: var(--leise); text-align: center; padding: 40px 16px; font-size: 13px; }
.leer b { display: block; color: var(--text-stark); font-size: 15px; margin-bottom: 4px; }

.filterleiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.grp-pill, .segment a, .segment button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1.5px solid var(--rand); border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--gedaempft); background: #fff; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s; white-space: nowrap; line-height: 1.2;
}
.segment { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.grp-pill:hover, .segment a:hover, .segment button:hover { border-color: var(--leise); color: var(--text); }
.grp-pill.active, .grp-pill.active:hover, .segment a[aria-pressed="true"], .segment button[aria-pressed="true"] { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }
.segment .anz { font-weight: 700; opacity: .7; }
.filterleiste select { width: auto; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--gedaempft); padding: 6px 32px 6px 14px; }
.suchfeld { position: relative; min-width: 220px; }
.suchfeld svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--leise); width: 15px; height: 15px; }
.suchfeld input { padding-left: 36px; }
.filterleiste .suchfeld { margin-left: auto; width: 380px; }
.filterleiste .suchfeld input { border-radius: 20px; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.filter-info { font-size: 12px; color: var(--leise); }

/* Editor ------------------------------------------------------------------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.editor-haupt { min-width: 0; }
/* Bausteine-Spalte dockt unter der Aktionsleiste an (--kopf-h aus app.js) und ist so kurz, dass sie am Seitenende nicht darunter rutscht */
.katalog { position: sticky; top: calc(var(--kopf-h, 78px) + 28px); max-height: calc(100vh - var(--kopf-h, 78px) - 88px); display: flex; flex-direction: column; }
.katalog .karte-inhalt { overflow-y: auto; padding-top: 6px; flex: 1; min-height: 0; }
.katalog-gruppe { margin-top: 12px; }
.katalog-gruppe > b { display: block; font-size: 11px; font-weight: 600; color: var(--leise); padding: 6px 6px; text-transform: uppercase; letter-spacing: 1px; }
.katalog-gruppe { margin-top: 4px; }
.katalog-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--gedaempft); text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 6px; border-radius: 8px;
}
.katalog-kopf:hover:not(:disabled) { background: var(--flaeche-2); color: var(--text); }
.katalog-kopf:disabled { cursor: default; }
.katalog-kopf span:first-child { flex: 1; }
.katalog-kopf .anz { font-weight: 600; color: var(--leise); letter-spacing: 0; }
.katalog-kopf svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; }
.katalog-gruppe.offen .katalog-kopf svg { transform: none; }
.katalog-kopf:disabled svg { display: none; }
.katalog-gruppe.offen { margin-bottom: 8px; }
.katalog-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 1px solid transparent; background: none;
  border-radius: 10px; padding: 8px; cursor: pointer; text-align: left; transition: background .15s, border-color .15s;
}
.katalog-item:hover { background: var(--flaeche-2); border-color: var(--rand); }
.katalog-item .plus { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #eef2ff; color: #4338ca; flex: none; }
.katalog-item .plus svg { width: 14px; height: 14px; stroke-width: 2.4; }
.katalog-item .txt { min-width: 0; flex: 1; }
.katalog-item .txt b { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--text); }
.katalog-item .txt small { display: block; font-size: 11.5px; color: var(--leise); margin-top: 2px; }
.katalog-item.drin .plus { background: #dcfce7; color: #166534; }

/* Kundensuche */
.kunden-suche { position: relative; }
.kunden-suche input { padding: 12px 14px 12px 40px; font-size: 15px; border-radius: 12px; }
.kunden-suche > svg { position: absolute; left: 14px; top: 14px; color: var(--leise); }
.vorschlaege {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--rand);
  border-radius: 14px; box-shadow: var(--schatten-hoch); padding: 6px; max-height: 360px; overflow-y: auto;
}
.vorschlag { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 10px; text-align: left; cursor: pointer; }
.vorschlag:hover, .vorschlag.aktiv { background: #eef2ff; }
.vorschlag b { font-weight: 600; color: var(--text-stark); display: block; }
.vorschlag small { color: var(--leise); font-size: 12px; }
.vorschlag .nr-chip { margin-left: auto; }
.verkn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--rand-2); padding: 2px 8px 2px 4px; border-radius: 6px; white-space: nowrap; }
.verkn img { width: 16px; height: 16px; display: block; }
#kundeZepNr { font-family: ui-monospace, monospace; }
.vorschlag-fuss { font-size: 12px; color: var(--leise); padding: 8px 10px 4px; border-top: 1px solid var(--rand-2); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.vorschlag-fuss .link-btn { margin-left: auto; font-size: 12px; }
.kunde-karte { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--rand); border-radius: 14px; background: linear-gradient(135deg, #f8fafc, #fff); }
.kunde-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--verlauf-navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; box-shadow: 0 4px 12px rgba(29,59,123,.25); }
.kunde-info { flex: 1; min-width: 0; }
.kunde-info .firma { font-size: 17px; font-weight: 700; color: var(--text-stark); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kunde-info .adresse { font-size: 13px; color: var(--gedaempft); margin-top: 2px; }
.kunde-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.kunde-aktionen { display: flex; gap: 4px; margin-left: auto; }
.manuell { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rand); }

/* Tag-Eingabe (mehrere Ansprechpartner) */
.tag-feld { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1.5px solid var(--rand); border-radius: 10px; padding: 5px 8px; background: #fff; cursor: text; transition: border-color .15s, box-shadow .15s; }
.tag-feld:hover { border-color: #cbd5e1; }
.tag-feld:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.tag-feld #tags { display: contents; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border-radius: 100px; background: #eef2ff; color: #3730a3; font-size: 13px; font-weight: 600; }
.tag button { border: 0; background: rgba(67,56,202,.12); color: inherit; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; font-size: 13px; }
.tag button:hover { background: rgba(67,56,202,.25); }
.tag-feld input#tagInput { flex: 1; min-width: 180px; border: 0; box-shadow: none; padding: 5px 4px; background: transparent; }
.tag-feld input#tagInput:focus { box-shadow: none; }
.vorschlag-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--leise); }
.vorschlag-status.fehler { color: #b91c1c; }
.vorschlag-status .link-btn { margin-left: auto; font-size: 12px; }
.vorschlag .quell-logo { width: 16px; height: 16px; margin-left: auto; flex: none; }
.dreher { width: 13px; height: 13px; border: 2px solid var(--rand); border-top-color: var(--indigo); border-radius: 50%; animation: dreh .7s linear infinite; flex: none; }
@keyframes dreh { to { transform: rotate(360deg); } }
.vorschlag.neu b { color: var(--indigo); }

/* Positionen */
.positionen { display: flex; flex-direction: column; gap: 10px; }
.position { border: 1px solid var(--rand); border-radius: 14px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.position:hover { border-color: #cbd5e1; }
.position:focus-within { border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,0.08); }
.position.zieht { opacity: .4; }
.position.ziel-oben { box-shadow: 0 -3px 0 var(--indigo); }
.position.ziel-unten { box-shadow: 0 3px 0 var(--indigo); }
.position-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 8px; }
.griff { cursor: grab; color: #cbd5e1; padding: 4px 0; display: flex; }
.griff:hover { color: var(--leise); }
.griff:active { cursor: grabbing; }
.pos-nr { width: 26px; height: 26px; border-radius: 8px; background: var(--verlauf-navy); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.position-kopf .titel-input { font-weight: 600; font-size: 14.5px; color: var(--text-stark); border-color: transparent; background: transparent; padding: 6px 8px; }
.position-kopf .titel-input:hover { border-color: var(--rand); }
.position-kopf .titel-input:focus { border-color: var(--indigo); background: #fff; }
.position-kopf .betrag { font-weight: 800; font-size: 15px; color: var(--text-stark); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 96px; text-align: right; }
.position-kopf .werkzeuge { display: flex; }
.position-koerper { padding: 0 14px 14px 46px; display: grid; gap: 12px; }
.position-zeile { display: flex; align-items: center; gap: 14px; }
.position-zeile .meta { color: var(--leise); font-size: 12px; }
.position-mehr { display: grid; grid-template-columns: 100px 220px 160px; gap: 10px; align-items: end; padding: 12px; background: var(--flaeche-2); border-radius: 10px; }
.position-mehr[hidden] { display: none; }
.position-mehr .zeile-voll { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.position.optional .pos-nr { background: #fff; color: var(--gedaempft); border: 1.5px dashed var(--leise); }
.position.eingeklappt .position-koerper { display: none; }
.position.abschnitt { display: block; margin: 10px 0 0; font-size: inherit; background: var(--flaeche-2); border-style: dashed; }
.position.abschnitt::after { content: none; }
.position.abschnitt .titel-input { text-transform: uppercase; letter-spacing: .5px; font-size: 12.5px; color: var(--navy); }
.positionen-leer { border: 2px dashed var(--rand); border-radius: 14px; padding: 30px; text-align: center; color: var(--leise); font-size: 13px; }
.positionen-aktionen { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }

.summen { margin-top: 20px; margin-left: auto; max-width: 380px; font-size: 13.5px; }
.summen div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 2px; font-variant-numeric: tabular-nums; }
.summen .turnus { color: var(--gedaempft); }
.summen .netto { border-top: 1px solid var(--rand); margin-top: 4px; padding-top: 10px; font-weight: 700; color: var(--text-stark); }
.summen .brutto { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--verlauf-navy); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 4px 12px rgba(29,59,123,.2); }
.summen .opt { color: var(--leise); font-size: 12.5px; }

.stand-info { font-size: 13px; color: var(--gedaempft); line-height: 1.7; }
.stand-info b { color: var(--text); font-weight: 600; }
.exporte { list-style: none; margin: 10px 0 0; padding: 0; }
.exporte li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand-2); font-size: 13px; }
.exporte li:first-child { border-top: 0; }
.exporte li a { margin-left: auto; }

/* Dialog ------------------------------------------------------------------- */
dialog { border: 1px solid var(--rand); border-radius: 20px; padding: 0; background: #fff; color: var(--text); width: min(720px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(15,23,42,.25); }
dialog::backdrop { background: rgba(15, 23, 42, .35); backdrop-filter: blur(3px); }
.dialog-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--rand-2); }
.dialog-kopf h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-stark); }
.dialog-kopf .btn { margin-left: auto; }
.dialog-inhalt { padding: 18px 22px; display: grid; gap: 14px; max-height: 70vh; overflow-y: auto; }
.dialog-fuss { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--rand-2); background: var(--flaeche-2); border-radius: 0 0 20px 20px; }
.dialog-fuss .links { margin-right: auto; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100;
  background: var(--dunkel); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(15,23,42,.3);
}
.toast.fehler { background: #dc2626; }

/* Login -------------------------------------------------------------------- */
.login-seite { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-karte { position: relative; z-index: 1; width: min(420px, 100%); background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 30px; display: grid; gap: 14px; box-shadow: var(--schatten-hoch); overflow: hidden; }
.login-logo { height: 90px; width: auto; justify-self: start; margin: -8px 0 -8px -10px; }
.login-claim { font-family: 'Inter', sans-serif; color: var(--navy); font-size: 17px; margin-top: -4px; }
.login-karte h1 { font-size: 22px; font-weight: 700; color: var(--text-stark); margin: 8px 0 0; letter-spacing: -0.3px; }
.login-karte p { margin: -6px 0 0; font-size: 13px; }

/* Vorlagen-Auswahl */
.vorlagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.vorlage-karte {
  display: flex; flex-direction: column; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--rand); border-radius: 20px;
  box-shadow: var(--schatten); text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) { .vorlage-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); } }
.vorlage-karte.leer-start { border-style: dashed; background: transparent; box-shadow: none; }
.vorlage-karte b { font-size: 16px; color: var(--text-stark); margin-top: 6px; }
.vorlage-karte p { margin: 0; font-size: 13px; color: var(--gedaempft); flex: 1; }
.vorlage-meta { font-size: 12px; font-weight: 600; color: var(--leise); margin-top: 8px; }
.vorlage-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--rand-2); color: var(--gedaempft); }
.vorlage-icon.navy { background: var(--verlauf-navy); color: #fff; box-shadow: 0 4px 12px rgba(29,59,123,.25); }
.vorlage-icon svg { width: 19px; height: 19px; stroke-width: 2; }

/* Menge × Preis direkt im Positionskopf, Kapitel */
.mp { display: inline-flex; align-items: center; gap: 6px; color: var(--leise); font-size: 13px; flex: none; }
.mp input.mini { width: 56px; padding: 5px 8px; font-size: 13px; color: var(--text-stark); text-align: right; font-variant-numeric: tabular-nums; border-radius: 8px; }
.mp input.mini.preis { width: 92px; }
.position.eingeklappt .position-koerper { display: none; }
.position.kapitel.aus { opacity: .55; background: var(--flaeche-2); }
.position.kapitel .position-kopf .schalter input { width: 17px; height: 17px; }

.position-kopf.pk { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; row-gap: 0; padding: 10px 10px 10px 8px; }
.pk .griff, .pk .pos-nr { grid-row: 1; align-self: start; margin-top: 2px; }
.pk .griff { width: 14px; justify-content: center; }
.pk .griff svg { width: 14px; height: 14px; }
.pk .titel-input { grid-column: 3; resize: none; overflow: hidden; line-height: 1.35; min-height: 0; padding: 4px 8px; display: block; }
.pk .betrag { grid-column: 4; grid-row: 1; align-self: start; padding-top: 5px; }
.pk .werkzeuge { grid-column: 5; grid-row: 1; align-self: start; }
/* Zweite Zeile über die volle Breite, linke Kante = Titeltext = Beschreibungsfeld (8 + 14 + 8 + 26 + 8 + 8 = 72px) */
.pk .zeile2 { grid-column: 3 / -1; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0 0 8px; }
.position-koerper { padding: 0 12px 14px 72px; }
textarea[data-auto-hoehe] { overflow: hidden; resize: none; }
.position.abschnitt .pk .titel-input { grid-row: 1 / span 2; align-self: center; }
.position.abschnitt .pk .griff { grid-row: 1 / span 2; align-self: center; margin-top: 0; }
.position.abschnitt .pk .werkzeuge { align-self: center; }
.position.abschnitt .pk > span:empty { width: 26px; } /* Platz der Positionsnummer, Text bündig mit den Titeln */

/* Dauer in Tagen × Tagessatz je Position */
.mp[hidden] { display: none; }
.mp.mp-tage { gap: 5px; }
.mp input.mini.abweichend { border-color: var(--akzent, #6366f1); background: #f5f6ff; }
.tagessatz-zeile { display: flex; align-items: flex-end; gap: 14px 28px; flex-wrap: wrap; margin-bottom: 16px; }
.tagessatz-zeile .feld { width: 220px; max-width: 100%; margin: 0; }
.tagessatz-zeile .schalter-preise { margin-bottom: 0; min-height: 38px; }

/* Kippschalter statt Checkbox */
.schalter.kipp input { appearance: none; -webkit-appearance: none; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: var(--rand); position: relative; cursor: pointer; transition: background .18s; }
.schalter.kipp input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25); transition: transform .18s; }
.schalter.kipp input:checked { background: var(--navy); }
.schalter.kipp input:checked::before { transform: translateX(16px); }
.schalter.kipp input:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }

/* Einleitung: Überschrift direkt über dem Text */
.einleitung-gruppe .einleitung-titel { font-weight: 600; color: var(--text-stark); }
.tagessatz-zeile small { color: var(--leise); font-size: 12px; max-width: 420px; line-height: 1.4; padding-bottom: 8px; }

/* =========================================================================
   Mobil & Tablet
   ========================================================================= */
.mobil-leiste, .nav-zu, .katalog-schleier, .nav-schleier { display: none; }
.nur-mobil { display: none !important; }
/* Kundenkarte: Aktionen rutschen bei wenig Platz unter die Adresse */
.kunde-karte { flex-wrap: wrap; }
.kunde-info { flex: 1 1 220px; }
.btn-kurz { display: none; }
.raster .span2 { grid-column: span 2; }
.kontakt-weg { align-self: end; }
body.scroll-sperre { overflow: hidden; }
.kopf-platzhalter { display: none; }

@media (max-width: 1300px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor { grid-template-columns: minmax(0, 1fr) 300px; }
  /* Editor-Kopf: Nebenaktionen nur als Symbol, damit alles in eine Zeile passt */
  .kopf.klebend .btn:not(.primaer) .btn-txt { display: none; }
  .kopf.klebend .kopf-aktionen .btn:not(.primaer) { padding: 9px; }
  .kopf.klebend .kopf-aktionen { flex-wrap: nowrap; }
  /* Tabellen enger, damit sie auf Laptops ohne seitliches Scrollen passen */
  .tabelle th, .tabelle td { padding-left: 10px; padding-right: 10px; }
}

/* ---- bis 1000 px: Navigation als Schublade, Katalog als Bottom-Sheet ---- */
@media (max-width: 1000px) {
  /* Kopfleiste fest statt klebend: position: sticky springt in Safari (iOS) beim Ein- und
     Ausblenden der Adressleiste und verschwindet teilweise. Die Höhe ist fest, .app hält den Platz frei. */
  :root { --leiste-h: calc(49px + max(8px, env(safe-area-inset-top))); }
  html { scroll-padding-top: calc(var(--leiste-h) + var(--kopf-h, 0px) + 8px); }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding-top: var(--leiste-h); }
  .nur-desktop { display: none !important; }
  .nur-mobil { display: inline-flex !important; }
  .karte-kopf .rechts.nur-mobil { display: flex !important; }

  .mobil-leiste {
    display: flex; align-items: center; gap: 8px; position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--leiste-h);
    padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
    background: rgba(250,250,250,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #ebebee;
  }
  .mobil-leiste .btn.icon { padding: 9px; }
  .mobil-leiste .btn.icon svg { width: 20px; height: 20px; }
  .mobil-marke { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; margin-right: auto; }
  .mobil-marke img { height: 36px; width: auto; display: block; }
  .mobil-marke span { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 15px; color: #18181b; padding-left: 10px; border-left: 1px solid #e4e4e7; }
  .mobil-leiste .btn.primaer { padding: 8px 12px; font-size: 13px; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90; width: min(300px, 86vw); height: 100vh; height: 100dvh;
    transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 0 40px rgba(15,23,42,.2);
    padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .app.nav-offen .sidebar { transform: none; visibility: visible; transition-delay: 0s; }
  .nav-zu { display: inline-flex; position: absolute; top: max(12px, env(safe-area-inset-top)); right: 10px; padding: 8px; }
  .nav-schleier { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(15,23,42,.35); backdrop-filter: blur(2px); }
  .nav-schleier[hidden] { display: none; }
  .sidebar .nav-item { padding: 10px 10px; }
  .sidebar .nav-angebot { padding: 8px 10px; }

  .haupt { padding: 24px 20px 48px; }
  .kopf { flex-direction: column; gap: 14px; margin-bottom: 24px; }
  .kopf-rechts { align-items: flex-start; }
  .kopf-aktionen { justify-content: flex-start; }
  /* Aktionsleiste im Editor: fest unter der Kopfleiste, der Platzhalter (app.js) hält ihre Höhe frei */
  .kopf.klebend { position: fixed; top: var(--leiste-h); left: 0; right: 0; margin: 0; padding: 12px 20px; gap: 10px; align-items: stretch; }
  .kopf-platzhalter { display: block; height: var(--kopf-h, 0px); margin: -24px 0 20px; }
  .kopf.klebend .kopf-rechts { width: 100%; }
  .kopf.klebend .speicherstatus { min-width: 0; margin-right: auto; }
  .kopf.klebend .speicherstatus .txt { overflow: hidden; text-overflow: ellipsis; }

  .editor { grid-template-columns: minmax(0, 1fr); }
  .raster.drei, .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Katalog als Bottom-Sheet */
  .katalog {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 75; margin: 0;
    height: 82vh; height: 82dvh; max-height: none; border-radius: 20px 20px 0 0; border-bottom: 0;
    transform: translateY(105%); transition: transform .28s ease, visibility 0s linear .28s; box-shadow: 0 -12px 40px rgba(15,23,42,.18);
    padding-bottom: env(safe-area-inset-bottom); visibility: hidden;
  }
  .katalog.offen { transform: none; visibility: visible; transition-delay: 0s; }
  .katalog::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: #cbd5e1; margin: 8px auto 0; }
  .katalog .karte-kopf { padding-top: 8px; }
  .katalog .karte-inhalt { overscroll-behavior: contain; }
  .katalog-item { padding: 10px 8px; }
  .katalog-schleier { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(15,23,42,.35); }
  .katalog-schleier[hidden] { display: none; }
  .katalog-fab {
    position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    padding: 12px 18px; font-size: 14px; border-radius: 100px; box-shadow: 0 8px 24px rgba(29,59,123,.35);
  }
  body:has(.katalog-fab) .haupt { padding-bottom: 96px; }
  body:has(.katalog-fab) .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---- bis 1000 px (Tablet und Handy): Tabellen werden zu Karten ---- */
@media (max-width: 1000px) {
  .tabelle-wrap { overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle thead { display: none; }
  .tabelle tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: #fff; border: 1px solid var(--rand);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--schatten);
  }
  .tabelle td { display: block; padding: 0; border: 0; background: none !important; min-width: 0; }
  .tabelle td.mob-haupt { flex: 1 1 100%; order: -2; font-size: 14px; }
  .tabelle td.mob-haupt .zeilen-link { font-size: 15px; }
  .tabelle td.mob-nr { order: -1; }
  .tabelle td.r { margin-left: auto; }
  .tabelle td.mob-zeit { flex: 1 1 100%; font-size: 12px; color: var(--gedaempft); }
  .tabelle td.mob-einheit { flex: 1 1 auto; font-size: 12px; color: var(--gedaempft); }
  .tabelle td.mob-zeit .sub, .tabelle td.mob-einheit .sub { display: inline; margin-left: 4px; }
  .tabelle td.mob-zeit .sub::before, .tabelle td.mob-einheit .sub::before { content: '· '; }
  .tabelle td[data-mob]::before { content: attr(data-mob) ': '; color: var(--gedaempft); }
  .tabelle td.aktionen {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; text-align: left;
    padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--rand-2);
  }
  .tabelle .aktionen .btn { margin-left: 0; }
  .tabelle .aktionen .btn:first-child { margin-right: auto; }
  .tabelle td[colspan] { flex: 1 1 100%; }
  .tabelle tr:has(td[colspan]) { padding: 0; }
  /* Tabellen in Karten (z. B. Zugänge): schlichte Zeilen statt Karten */
  .karte .tabelle tr { border: 0; border-top: 1px solid var(--rand-2); border-radius: 0; box-shadow: none; margin: 0; padding: 12px 18px; }
  .karte .tabelle tr:first-child { border-top: 0; }
}

/* ---- bis 640 px: Smartphone ---- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  /* 16 px verhindert das automatische Hineinzoomen von iOS beim Fokussieren */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input:not([type]), select, textarea { font-size: 16px; padding: 10px 12px; }
  input[type=date] { min-height: 44px; }
  .katalog-tabelle input[type=text], .katalog-tabelle td select, .rechte-tabelle select, .kontakt-tabelle input, .kontakt-tabelle select { font-size: 16px; }

  .haupt { padding: 18px 16px 40px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .kopf h1 { font-size: 23px; }
  .kopf p { font-size: 13.5px; }
  .kopf-aktionen { width: 100%; }
  .kopf-aktionen .btn { flex: 1 1 auto; justify-content: center; padding: 10px 14px; }
  /* Stand-Anzeigen als schlichte Zeilen über den Knöpfen */
  .kopf-aktionen .header-badge { flex: 1 1 100%; padding: 0 2px; background: none; border: 0; box-shadow: none; white-space: normal; }

  /* Klebende Aktionsleiste im Editor: Titel oben, darunter Status + Symbol-Buttons */
  .kopf.klebend { padding: 10px 16px; gap: 8px; }
  .kopf-platzhalter { margin: -18px 0 16px; }
  .kopf.klebend h1 { font-size: 17px; gap: 6px; letter-spacing: -0.2px; }
  .kopf.klebend h1 .pill { font-size: 11px; padding: 2px 8px; }
  .kopf.klebend .kopf-aktionen { flex-wrap: nowrap; gap: 6px; }
  .kopf.klebend .kopf-aktionen .btn { flex: none; padding: 9px; }
  .kopf.klebend .kopf-aktionen .btn.primaer { padding: 9px 14px; }
  .kopf.klebend .btn-txt { display: none; }
  .kopf.klebend .btn-kurz { display: inline; }
  .kopf.klebend .speicherstatus { flex: 1 1 auto; min-width: 0; padding: 6px 10px; margin-right: auto; }
  .kopf.klebend .speicherstatus .txt { overflow: hidden; text-overflow: ellipsis; }
  .kopf.klebend p:has(.pruefliste) { margin-top: 4px; }
  .pruef.ok { display: none; } /* auf dem Handy nur zeigen, was noch fehlt */

  .btn.klein { padding: 8px 12px; font-size: 13px; }
  .btn.klein.icon, .btn.icon { padding: 8px; }
  .btn.klein.icon svg { width: 17px; height: 17px; }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px 14px 12px; border-radius: 16px; }
  .kpi .card-icon { top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 8px; }
  .kpi .card-icon svg { width: 14px; height: 14px; }
  .kpi small { font-size: 10.5px; letter-spacing: .5px; padding-right: 30px; }
  .kpi b { font-size: 30px; letter-spacing: -1px; }
  .kpi b em { font-size: 13px; }
  .kpi span { font-size: 11.5px; }
  .abschnitt { margin-top: 28px; }

  .raster.zwei, .raster.drei, .raster.vier, .kunde-wahl { grid-template-columns: minmax(0, 1fr); }
  .raster .span2 { grid-column: auto; }
  .karte-kopf { padding: 16px 16px 0; }
  .karte-inhalt { padding: 12px 16px 18px; }
  details.klappe > summary { padding: 14px 16px; }

  /* Aufklapper: Titel darf umbrechen, Zusammenfassung in eigener Zeile */
  details.klappe > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; white-space: normal; }
  details.klappe > summary .zusammenfassung { grid-column: 1; grid-row: 2; }
  details.klappe > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  /* Filter: Suche zuerst und volle Breite */
  .filterleiste { gap: 10px; }
  .filterleiste .suchfeld { order: -1; width: 100%; min-width: 0; margin-left: 0; flex: 1 1 100%; }
  .suchfeld input { padding-left: 36px; }
  .filterleiste .suchfeld input { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
  .grp-pill, .segment a, .segment button { padding: 8px 14px; font-size: 13px; }
  .filterleiste select { font-size: 14px; padding: 8px 32px 8px 14px; }

  /* Kunde */
  .kunden-suche input { font-size: 16px; padding: 12px 14px 12px 40px; }
  .vorschlaege { max-height: 50vh; max-height: 50dvh; }
  .vorschlag { padding: 11px 10px; }
  .kunde-karte { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .kunde-icon { width: 38px; height: 38px; font-size: 15px; }
  .kunde-info { flex: 1 1 calc(100% - 50px); }
  .kunde-info .firma { font-size: 16px; }
  .kunde-aktionen { flex: 1 1 100%; justify-content: flex-end; gap: 6px; }
  .tag-feld input#tagInput { min-width: 120px; font-size: 16px; }
  .tag { font-size: 14px; padding: 5px 6px 5px 12px; }
  .tag button { width: 22px; height: 22px; }

  /* Positionen: Nummer + Titel / Mengen / Werkzeuge + Betrag */
  .position-kopf.pk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
  .pk .griff, .position.abschnitt .pk > span:empty { display: none; }
  .pk .pos-nr { order: 1; align-self: flex-start; margin-top: 3px; }
  .pk .titel-input { order: 2; flex: 1 1 calc(100% - 40px); min-width: 0; font-size: 16px; padding: 4px 6px; }
  .pk .zeile2 { order: 3; flex: 1 1 100%; padding: 0; gap: 8px; }
  .pk .werkzeuge { order: 4; margin-left: -6px; }
  /* Betrag rechtsbündig; ist er zu lang (Tagesspanne), bekommt er eine eigene Zeile */
  .pk .betrag { order: 5; flex: 1 0 auto; text-align: right; padding-top: 0; min-width: 0; font-size: 16px; }
  .position.abschnitt .pk .titel-input { flex-basis: 100%; font-size: 16px; }
  .mp, .mp.mp-tage { font-size: 13px; gap: 4px; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }
  .mp input.mini { width: 50px; font-size: 16px; padding: 7px 6px; }
  .mp input.mini.preis { width: 94px; }
  .position-koerper { padding: 0 12px 14px; }
  .position-mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .position.kapitel .position-kopf { flex-wrap: wrap; padding: 10px 12px; }
  .position.kapitel .titel-input { flex: 1 1 calc(100% - 40px); min-width: 0; font-size: 16px; }
  .position.kapitel .werkzeuge { margin-left: auto; }
  .position.kapitel .position-koerper { padding-left: 12px !important; }
  .positionen-aktionen .btn { flex: 1 1 auto; justify-content: center; }
  .tagessatz-zeile .feld { width: 100%; }
  .tagessatz-zeile small { padding-bottom: 0; }
  .summen { max-width: none; font-size: 14px; }

  /* Dialoge: fast volle Breite, Inhalt scrollt, Buttons umbrechen */
  dialog { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); border-radius: 16px; }
  dialog > form, dialog { display: flex; flex-direction: column; }
  dialog:not([open]) { display: none; }
  .dialog-kopf { padding: 14px 16px; }
  .dialog-inhalt { padding: 16px; max-height: none; flex: 1 1 auto; min-height: 0; }
  dialog > form { min-height: 0; flex: 1 1 auto; }
  .dialog-fuss { flex-wrap: wrap; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-radius: 0 0 16px 16px; }
  .dialog-fuss .btn { flex: 1 1 auto; justify-content: center; padding: 10px 14px; }
  .dialog-fuss .links { flex-basis: 100%; order: 3; }

  .toast { left: 16px; right: 16px; transform: none; text-align: center; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .hinweis-box { padding: 10px 14px; }
  .vorlagen-raster { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vorlage-karte { padding: 16px; border-radius: 16px; }
  .leer { padding: 28px 12px; }

  .login-seite { padding: 16px; align-items: start; padding-top: max(32px, env(safe-area-inset-top)); }
  .login-karte { padding: 24px 20px; }
  .login-karte .btn.gross { padding: 13px 18px; font-size: 15px; }
}

/* Reine Leistungsbeschreibung ohne Preise */
.schalter-preise { margin-bottom: 14px; font-weight: 600; color: var(--text-stark); }
.schalter.klein { font-size: 12px; gap: 6px; }
.schalter.klein input { width: 14px; height: 14px; }
.mp .link-btn { font-size: 12px; margin-left: 2px; }

/* Preisart je Position: Tage | Festpreis | Text */
.preis-modus { display: inline-flex; background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 8px; padding: 2px; flex: none; }
.preis-modus button {
  border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--gedaempft);
  padding: 3px 9px; border-radius: 6px; cursor: pointer;
}
.preis-modus button:hover { color: var(--text); }
.preis-modus button[aria-pressed="true"] { background: #fff; color: var(--text-stark); box-shadow: 0 1px 2px rgba(15,23,42,0.12); }
.mp input.mini.text { width: 170px; text-align: left; }
@media (max-width: 640px) {
  .preis-modus { flex: 1 1 100%; min-width: 0; }
  .preis-modus button { flex: 1; padding: 6px 4px; font-size: 13px; }
  .mp input.mini.text { width: 100%; }
  .mp.mp-text { flex: 1 1 auto; }
}
.ohne-preise [data-preis] { display: none !important; }

.mini-select { width: auto; padding: 4px 26px 4px 10px; font-size: 12.5px; font-weight: 600; border-radius: 8px; color: var(--text-2); background-color: var(--flaeche-2); }
/* Preiszeile: einheitliche Höhe, Turnus abgesetzt */
.pk .zeile2 .turnus-trenner { width: 1px; height: 18px; background: var(--rand); }
@media (min-width: 641px) {
  .pk .zeile2 .preis-modus, .pk .zeile2 .mp input.mini, .pk .zeile2 .mini-select { height: 30px; box-sizing: border-box; }
  .pk .zeile2 .preis-modus button { height: 24px; }
  .pk .zeile2 .mp.mp-tage { gap: 4px; }
  .pk .zeile2 .mp input.mini { width: 50px; }
  .pk .zeile2 .mp input.mini.preis { width: 84px; }
  .pk .zeile2 .mp input.mini.text { width: 170px; }
}

/* „⋯“-Menü im Editor-Kopf */
.menue-wrap { position: relative; }
.menue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; background: #fff;
  border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.14); padding: 6px;
}
.menue[hidden] { display: none; }
.menue button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--text); padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; white-space: nowrap;
}
.menue button:hover, .menue button:focus-visible { background: var(--flaeche-2); outline: none; }
.menue svg { width: 16px; height: 16px; color: var(--gedaempft); }

/* Vorlage im Editor wechseln */
.vorlage-wahl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--leise); }
.vorlage-wahl[hidden] { display: none !important; }
.vorlage-wahl select { width: auto; padding: 5px 30px 5px 10px; font-size: 13px; }

/* Hinweis: frühere Angebote dieses Kunden */
.hinweis-box.frueher { margin: 14px 0 0; align-items: center; }
.hinweis-box.frueher > span:first-of-type { flex: 1 1 260px; }
.frueher-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Auswahl im Vorlagen-Dialog */
.wahl-liste { display: grid; gap: 8px; }
.wahl { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--rand); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.wahl:has(input:checked) { border-color: var(--indigo); background: #f5f6ff; }
.wahl input { margin-top: 3px; accent-color: var(--navy); }
.wahl b { display: block; font-size: 14px; color: var(--text-stark); }
.wahl small { display: block; font-size: 12.5px; color: var(--gedaempft); margin-top: 2px; }
.feld[hidden] { display: none; }

/* ZEP-Suche: „ohne ZEP übernehmen“ per Enter */
.vorschlag-fuss [data-ohne].aktiv { background: #eef2ff; border-radius: 6px; padding: 2px 6px; }
.vorschlag-fuss kbd { font: 10.5px ui-monospace, Menlo, monospace; border: 1px solid var(--rand); border-radius: 4px; padding: 0 4px; margin-left: 4px; color: var(--gedaempft); }

/* Bausteinsuche ------------------------------------------------------------- */
.kat-chips { margin-bottom: 18px; }
.baustein-liste { display: grid; gap: 10px; }
.baustein-liste .karte + .karte { margin-top: 0; }
.baustein > summary { display: flex; align-items: center; gap: 16px; padding: 14px 20px; cursor: pointer; list-style: none; }
.baustein > summary::-webkit-details-marker { display: none; }
.baustein > summary:hover { background: var(--flaeche-2); border-radius: 16px; }
.baustein[open] > summary { border-bottom: 1px solid var(--rand-2); border-radius: 16px 16px 0 0; }
.baustein-nr { flex: none; width: 76px; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--gedaempft); }
.baustein-titel { flex: 1; min-width: 0; }
.baustein-titel b { display: block; color: var(--text-stark); font-size: 14px; }
.baustein-preis { flex: none; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.baustein-titel small, .baustein-preis small { display: block; font-weight: 400; font-size: 12px; color: var(--leise); margin-top: 2px; }
.baustein-text { padding: 14px 20px 18px 112px; font-size: 13.5px; line-height: 1.55; }
.baustein-text h4 { margin: 14px 0 4px; font-size: 13px; color: var(--text-stark); }
.baustein-text p, .baustein-text ul { margin: 0 0 8px; }
.baustein-text ul { padding-left: 18px; }
.baustein-text .nummern { margin: 0 0 8px; }
.baustein-text .nr-punkt { position: relative; margin: 0 0 3px; padding-left: 30px; }
.baustein-text .nr-punkt .nr { position: absolute; left: 0; font-weight: 600; }
.baustein-text .nr-punkt.ebene-1 { font-weight: 600; margin-top: 8px; padding-left: 20px; }
.baustein-text .nr-punkt.ebene-1:first-child { margin-top: 0; }
.baustein-text .nr-punkt.ebene-2 { margin-left: 20px; }
.baustein-text .nr-punkt.ebene-3 { margin-left: 50px; padding-left: 40px; }
.baustein-aktionen { margin-top: 12px; }
@media (max-width: 720px) {
  .baustein > summary { flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
  .baustein-nr { width: auto; }
  .baustein-titel { flex-basis: 100%; order: 3; }
  .baustein-preis { margin-left: auto; }
  .baustein-text { padding: 12px 16px 16px; }
}


/* Cockpit ------------------------------------------------------------------ */
/* Sidebar im Cockpit: größeres Logo ohne Claim, Claim steht über dem Namen */
.sidebar .marke { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #ebebee; }
.sidebar .marke-logo { height: 84px; }
.fuss-claim { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--navy); letter-spacing: -0.1px; padding: 0 8px 10px; }
.nav-folgt { cursor: default; color: #a1a1aa; }
.nav-folgt:hover { background: none; color: #a1a1aa; }

/* Eingeklappte Navigation (nur Desktop): schmale Leiste mit Symbolen */
.marke-zeichen { display: none; }
.nav-schmal-btn { position: absolute; top: 14px; right: 10px; padding: 6px; color: #8a8a93; }
.nav-schmal-btn:hover { color: #18181b; }
@media (min-width: 1001px) {
  .app { transition: grid-template-columns .2s ease; }
  .app.nav-schmal { grid-template-columns: 64px minmax(0, 1fr); }
  .nav-schmal .sidebar { padding: 14px 10px; overflow-x: hidden; }
  .nav-schmal .sidebar .marke { align-items: center; padding: 0 0 12px; }
  .nav-schmal .marke-logo { display: none; }
  .nav-schmal .sidebar .marke-zeichen { display: block; width: 34px; height: 34px; }
  .nav-schmal .nav-schmal-btn { position: static; align-self: center; margin-top: 8px; }
  .nav-schmal .nav-label, .nav-schmal .badge, .nav-schmal .fuss-claim, .nav-schmal .nutzer-name { display: none; }
  .nav-schmal .nav-gruppe { margin-top: 10px; }
  .nav-schmal .nav-gruppe:has(.nav-angebot) { display: none; }
  .nav-schmal .nav-item { justify-content: center; padding: 9px 0; }
  .nav-schmal .nav-item > span { display: none; }
  .nav-schmal .neu-btn { padding: 8px 0; gap: 0; font-size: 0; }
  .nav-schmal .nutzer { flex-direction: column; gap: 6px; padding: 0; }
  .nav-schmal .nutzer-profil { flex: none; margin: 0; padding: 4px; }
}
@media (max-width: 1000px) { .nav-schmal-btn { display: none; } }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.kachel {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--rand); border-radius: 16px;
  box-shadow: var(--schatten); text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  a.kachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: #c7d2fe; }
  a.kachel:hover .kachel-pfeil { background: var(--navy); color: #fff; transform: translateX(2px); }
}
.kachel .kachel-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--verlauf-navy); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(29,59,123,.25); }
.kachel .kachel-icon svg { width: 21px; height: 21px; stroke-width: 2; }
.kachel b { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--text-stark); }
.kachel .kachel-pfeil { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--flaeche-2); color: var(--navy); display: grid; place-items: center; transition: background .2s ease, color .2s ease, transform .2s ease; }
.kachel .kachel-pfeil svg { width: 15px; height: 15px; stroke-width: 2.2; }
.kachel.folgt { background: transparent; border-style: dashed; border-color: #cbd5e1; box-shadow: none; }
.kachel.folgt .kachel-icon { background: #e2e8f0; color: var(--leise); box-shadow: none; }
.kachel.folgt b { color: var(--gedaempft); font-weight: 600; }
.kachel .kachel-marke { font-size: 11px; font-weight: 600; color: var(--leise); background: var(--rand-2); border-radius: 999px; padding: 3px 9px; }

/* (i)-Hinweis: Erklärung nur beim Darüberfahren oder bei Fokus, nie als Fließtext */
.info { position: relative; display: inline-flex; vertical-align: middle; color: var(--leise); cursor: help; margin-left: 2px; }
.info svg { width: 15px; height: 15px; stroke-width: 2; }
.info:hover, .info:focus-visible { color: var(--navy); outline: none; }
/* Die Erklärung selbst ist ein fest positioniertes Element (app.js), damit sie nie über den Bildschirmrand ragt */
.tipp {
  position: fixed; z-index: 120; max-width: min(280px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 8px;
  background: var(--dunkel); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left;
  box-shadow: var(--schatten-hoch); pointer-events: none; opacity: 0; transition: opacity .15s;
}
.tipp.sichtbar { opacity: 1; }

.rechte-tabelle select { min-width: 150px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.rechte-tabelle td.mob-haupt { min-width: 190px; }
.rechte-tabelle select.geaendert { border-color: var(--indigo); }
.kontakt-tabelle input { min-width: 150px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.kontakt-tabelle td.mob-haupt { min-width: 190px; }
.kontakt-tabelle select { min-width: 170px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.pd-verknuepft { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pd-verknuepft:empty { display: none; }
.pd-verknuepft .tag a { color: inherit; }
.kontakt-tabelle select.pd-fehlt { border-color: #f59e0b; background-color: #fffbeb; }
.rechte-legende td.mob-haupt { white-space: nowrap; min-width: 190px; }
.funktion-knoepfe { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
.rechte-legende tr:not(.bearbeiten) .funktion-bearbeiten { opacity: .55; }
.rechte-legende tr:hover .funktion-bearbeiten { opacity: 1; }
.rechte-legende tr.bearbeiten .funktion-knoepfe { display: flex; margin: 8px 0 0; }
/* Funktion bearbeiten: Zeile wechselt von Text zu Auswahlfeldern */
.rechte-legende .funktion-wahl, .rechte-legende .funktion-aktion { display: none; }
.rechte-legende tr.bearbeiten .funktion-wahl { display: block; min-width: 125px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.rechte-legende tr.bearbeiten .funktion-aktion { display: inline-flex; }
.rechte-legende tr.bearbeiten .stufe-text, .rechte-legende tr.bearbeiten .funktion-bearbeiten { display: none; }
.rechte-legende tr.bearbeiten td { background: #fafbff; }
.formular-fuss { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--rand-2); }
.login-karte form { display: grid; gap: 14px; }
.login-trenner { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--gedaempft); }
.login-trenner::before, .login-trenner::after { content: ''; flex: 1; border-top: 1px solid var(--rand); }
.login-fuss { font-size: 13px; color: var(--gedaempft); text-align: center; line-height: 1.7; }
.login-fuss a { color: var(--navy); font-weight: 600; text-decoration: none; }

/* Startseite: Datum, Geburtstage und Abwesenheiten */
.start-heute { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); background: #fff; border: 1px solid var(--rand); border-radius: 999px; padding: 7px 14px; box-shadow: var(--schatten); }
.start-heute svg { width: 15px; height: 15px; stroke-width: 2; color: var(--navy); }
.start-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-top: 28px; align-items: start; }
.start-raster .karte + .karte { margin-top: 0; }
.start-raster .karte-kopf { padding-bottom: 4px; }
.start-raster .karte-kopf h3 { color: var(--text-stark); }
.karte-symbol { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #e0e7ff; color: var(--navy); }
.karte-symbol.gruen { background: #ecfccb; color: #4d7c0f; }
.karte-symbol svg { width: 16px; height: 16px; stroke-width: 2; }
.start-zahl { font-size: 12px; font-weight: 600; color: var(--navy); background: #e0e7ff; border-radius: 999px; padding: 4px 10px; }
.start-leer { margin: 0; padding: 8px 0; font-size: 14px; color: var(--gedaempft); }

.avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.avatar.f1 { background: #e0e7ff; color: #3730a3; }
.avatar.f2 { background: #dcfce7; color: #166534; }
.avatar.f3 { background: #fef3c7; color: #92400e; }
.avatar.f4 { background: #fce7f3; color: #9d174d; }
.avatar.f5 { background: #e0f2fe; color: #075985; }
.avatar.f6 { background: #f1f5f9; color: #334155; }

.gb-liste { list-style: none; margin: 0; padding: 0; }
.gb-liste li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; }
.gb-liste li + li { border-top: 1px solid var(--rand-2); }
.gb-blatt { flex: 0 0 auto; width: 42px; border-radius: 9px; overflow: hidden; border: 1px solid var(--rand); background: #fff; text-align: center; display: flex; flex-direction: column; }
.gb-blatt b { font-size: 16px; font-weight: 700; color: var(--text-stark); line-height: 1; padding: 6px 0 3px; font-variant-numeric: tabular-nums; }
.gb-blatt small { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: var(--navy); padding: 2px 0; order: -1; }
.gb-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-stark); display: flex; flex-direction: column; }
.gb-name small { font-size: 12px; font-weight: 400; color: var(--gedaempft); margin-top: 1px; }
.gb-wann { flex: 0 0 auto; font-size: 12px; color: var(--leise); white-space: nowrap; }
.gb-liste li.bald .gb-wann { color: var(--navy); font-weight: 600; }
.gb-liste li.heute { background: linear-gradient(90deg, #f7fee7, #ecfccb); border-top-color: transparent; }
.gb-liste li.heute + li { border-top-color: transparent; }
.gb-liste li.heute .gb-blatt small { background: var(--gruen-marke); }
.gb-liste li.heute .gb-wann { color: #fff; background: var(--gruen-marke); font-weight: 700; border-radius: 999px; padding: 3px 10px; }

.ab-woche { --spalte: 46px; }
.ab-zeile { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, var(--spalte)); align-items: center; column-gap: 0; padding: 8px 0; }
.ab-zeile + .ab-zeile:not(.ab-kopf) { border-top: 1px solid var(--rand-2); }
.ab-kopf { padding: 0 0 6px; }
.ab-tag { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .3px; }
.ab-tag b { font-size: 13px; color: var(--text-2); margin-top: 2px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; text-transform: none; letter-spacing: 0; }
.ab-tag.heute { color: var(--navy); }
.ab-tag.heute b { background: var(--navy); color: #fff; }
.ab-person { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 12px; }
.ab-name { min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-stark); display: flex; flex-direction: column; }
.ab-name small { font-size: 12px; font-weight: 400; color: var(--gedaempft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-zelle { height: 34px; position: relative; display: block; }
.ab-zelle.heute { background: rgba(29,59,123,.06); }
.ab-zeile.ab-kopf .ab-tag.heute { background: rgba(29,59,123,.06); border-radius: 10px 10px 0 0; padding-top: 4px; margin-top: -4px; }
.ab-zelle.an::after { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 12px; background: var(--farbe, #94a3b8); opacity: .85; }
.ab-zelle.an.anfang::after { left: 5px; border-radius: 6px 0 0 6px; }
.ab-zelle.an.ende::after { right: 5px; border-radius: 0 6px 6px 0; }
.ab-zelle.an.anfang.ende::after { border-radius: 6px; }
.ab-zelle.an.halb::after { opacity: .45; }

@media (max-width: 760px) {
  .kacheln { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kachel { padding: 14px; gap: 10px; }
  .kachel .kachel-icon { width: 38px; height: 38px; }
  .kachel .kachel-pfeil, .kachel .kachel-marke { display: none; }
  .kachel b { font-size: 14px; }
}
@media (max-width: 420px) {
  .start-raster { grid-template-columns: 1fr; }
  .ab-woche { --spalte: 28px; }
  .ab-person .avatar { display: none; }
}

/* Mitarbeiterfotos */
.avatar.foto { overflow: hidden; background: #e2e8f0; }
.avatar.foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.person-zelle { display: flex; align-items: center; gap: 12px; }
.foto-feld { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.foto-feld > div { flex: 1; min-width: 0; }
input[type=file] { display: block; width: 100%; max-width: 100%; font-size: 13px; color: var(--gedaempft); }
input[type=file]::file-selector-button {
  margin-right: 12px; border: 1px solid var(--rand); border-radius: 10px; background: #fff; padding: 8px 14px;
  font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: background .2s;
}
input[type=file]::file-selector-button:hover { background: var(--flaeche-2); color: var(--text); }
.foto-loeschen { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--leise); }

/* Mitarbeiterprofil (profil.php) */
.profil-formular .karte + .karte { margin-top: 18px; }
.profil-formular .formular-fuss { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); border: 1px solid var(--rand); border-radius: 16px; }
.profil-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0; }
.profil-zeile + .profil-zeile { border-top: 1px solid var(--rand-2); }
.profil-zeile:first-child { padding-top: 0; }
.profil-zeile-felder { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.profil-zeile .zeile-knoepfe { display: flex; gap: 2px; flex-shrink: 0; padding-top: 18px; }
.projekt .zeile-knoepfe { padding-top: 4px; }
.profil-liste .profil-zeilen:not(:empty) { margin-bottom: 14px; }
.feld > span small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--leise); margin-left: 4px; }

/* Zeitraum: Monat und Jahr als Auswahl, „bis heute“ */
.zeitraum-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.datum-feld { display: inline-flex; gap: 6px; }
.datum-feld select { width: auto; min-width: 84px; }
.datum-feld select + select { min-width: 92px; }
.feld.bis.gesperrt .datum-feld { opacity: .4; }
.heute-haken { display: flex; align-items: center; gap: 6px; height: 38px; font-size: 13px; color: var(--text-2); cursor: pointer; }

/* Projekte */
.kurzzeile { display: flex; align-items: center; gap: 12px; }
.kurzzeile input[type=text] { flex: 1; min-width: 0; }
.kurz-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gedaempft); cursor: pointer; white-space: nowrap; }
.kurztext { font-size: 13px; }
.kurz-knopf { color: var(--leise); white-space: nowrap; }
.kurz-knopf svg { width: 13px; height: 13px; }
.kurz-knopf.gesetzt { color: #3730a3; background: #eef2ff; }

/* Skills */
.skill-gruppe { padding: 14px 0; }
.skill-gruppe + .skill-gruppe { border-top: 1px solid var(--rand-2); }
.skill-gruppe:first-child { padding-top: 0; }
.skill-titel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--gedaempft); margin-bottom: 8px; }
.skill-auswahl { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-auswahl:not(:empty) { margin-bottom: 10px; }
.skill-marke { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 100px; background: #eef2ff; color: #3730a3; font-size: 13px; font-weight: 500; }
.skill-marke .btn.icon { padding: 2px; color: inherit; }
.skill-marke .btn.icon svg { width: 13px; height: 13px; }
.skill-marke[draggable="true"] { cursor: grab; }
.skill-marke.wird-gezogen { opacity: .35; }
.skill-marke.mit-jahr { gap: 6px; }
.skill-marke input.skill-jahr { width: 62px; padding: 1px 6px; font-size: 12px; border: 1px solid #c7d2fe; border-radius: 100px; background: #fff; color: inherit; -moz-appearance: textfield; }
.skill-marke input.skill-jahr::-webkit-inner-spin-button, .skill-marke input.skill-jahr::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.skill-marke input.skill-jahr:disabled { background: transparent; border-color: transparent; }
.skill-marke .btn.icon + .btn.icon { margin-left: -4px; }
.skill-bereich[data-kurz="1"] .ins-kurz, .skill-bereich[data-kurz="0"] .aus-kurz { display: none; }
.skill-bereiche { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.skill-bereich { border: 1px dashed var(--rand); border-radius: 12px; padding: 10px 12px; }
.skill-bereich[data-kurz="1"] { border-style: solid; background: #f8faff; }
.bereich-titel { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.skill-bereich .skill-auswahl { min-height: 26px; margin-bottom: 0; }
.skill-hinzu .vorschlag-suche { width: 360px; max-width: 100%; margin-bottom: 8px; }
.skill-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; max-height: 136px; overflow-y: auto; }
.skill-vorschlag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px 3px 8px; border: 1px dashed #c7d2fe; border-radius: 100px; background: #fff; color: var(--text-2); font-size: 13px; cursor: pointer; }
.skill-vorschlag svg { width: 12px; height: 12px; color: #6366f1; }
.skill-vorschlag:hover { border-style: solid; background: #eef2ff; color: #3730a3; }
.skill-vorschlag.gewaehlt, .skill-vorschlag[hidden] { display: none; }
.skill-vorschlag.neu { border-style: solid; color: #3730a3; font-weight: 600; }
.such-wahl { position: relative; width: 360px; max-width: 100%; }
.such-wahl .such-eingabe { width: 100%; }
.such-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--rand); border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.12); }
.such-liste[hidden] { display: none; }
.such-liste li { padding: 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.such-liste li.aktiv { background: #eef2ff; color: #3730a3; }
.such-liste .such-neu { color: #3730a3; font-weight: 600; }
.such-liste .such-gruppe, .such-liste .such-leer { cursor: default; color: var(--gedaempft); }
.such-liste .such-gruppe { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 10px 10px 4px; }
.blinken { animation: blinken .9s; }
@keyframes blinken { 0%, 60% { box-shadow: 0 0 0 3px #fbbf24; } 100% { box-shadow: none; } }
.import-leiste { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.import-leiste label.btn { cursor: pointer; }

/* Profilliste mit Filter */
.filter-leiste { margin-bottom: 18px; }
.filter-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-zeile .feld.suche { flex: 1; min-width: 240px; }
.person-zelle > div { min-width: 140px; } /* Namen nicht in schmale Spalten quetschen */
.person-zelle .sub { overflow-wrap: anywhere; }
.filter-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
@media (max-width: 720px) {
  .profil-formular .raster.zwei { grid-template-columns: 1fr; }
  .profil-formular .raster .span2 { grid-column: auto; }
  .profil-zeile { flex-wrap: wrap; }
  .such-wahl, .skill-hinzu .vorschlag-suche { width: 100%; }
  .filter-zeile > .feld { flex: 1 1 100%; min-width: 0; }
}

/* Skill-Katalog (skills.php) */
.katalog-tabelle td:first-child { width: 45%; }
.katalog-tabelle input[type=text] { width: 100%; min-width: 200px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.katalog-tabelle td select { min-width: 150px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.zusammen-feld { display: inline-flex; gap: 6px; align-items: center; }
.zusammen-feld select { max-width: 200px; }
.katalog-fuss { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); border: 1px solid var(--rand); border-radius: 16px; }