/* 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%; }
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; }

/* 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); } }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 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; }
.btn.klein { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.icon { padding: 6px; }
.btn.klein.icon { padding: 5px; }
.btn.gross { padding: 11px 18px; font-size: 14px; width: 100%; justify-content: center; }
.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); }
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); }
.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: 721px) {
  .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 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, .segment [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: 300px; }
.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; }
.katalog { position: sticky; top: 104px; max-height: calc(100vh - 124px); 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; }
.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.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 { background: var(--flaeche-2); border-style: dashed; }
.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; 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 / span 2; align-self: start; margin-top: 2px; }
.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 / span 2; align-self: start; padding-top: 5px; }
.pk .werkzeuge { grid-column: 5; grid-row: 1 / span 2; align-self: start; }
.pk .zeile2 { grid-column: 3; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 2px 8px 0; }
.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; }

/* 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; flex-wrap: wrap; margin-bottom: 16px; }
.tagessatz-zeile .feld { width: 320px; max-width: 100%; margin: 0; }
.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; }

@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; }
}

/* ---- bis 1000 px: Navigation als Schublade, Katalog als Bottom-Sheet ---- */
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .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: sticky; top: 0; z-index: 50;
    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;
  }
  /* Im Editor klebt die Aktionsleiste – die Kopfleiste scrollt dort mit weg */
  body:has(.kopf.klebend) .mobil-leiste { position: relative; }
  .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; }
  .kopf.klebend { margin: -24px -20px 20px; padding: 12px 20px; gap: 10px; align-items: stretch; }
  .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 720 px: Tabellen werden zu Karten ---- */
@media (max-width: 720px) {
  .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]::after { 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; }

  .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; }

  /* Klebende Aktionsleiste im Editor: Titel oben, darunter Status + Symbol-Buttons */
  .kopf.klebend { margin: -18px -16px 16px; padding: 10px 16px; gap: 8px; }
  .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: 7px 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; }
  .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%; }
  .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 24px 4px 8px; font-size: 12.5px; border-radius: 8px; color: var(--leise); }

/* „⋯“-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-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; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.kachel {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 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) { a.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); } }
.kachel .kachel-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--verlauf-navy); color: #fff; display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 4px 12px rgba(29,59,123,.25); }
.kachel .kachel-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.kachel b { font-size: 17px; font-weight: 700; color: var(--text-stark); }
.kachel span { font-size: 13px; color: var(--gedaempft); }
.kachel .kachel-fuss { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--navy); }
.kachel .kachel-fuss svg { width: 14px; height: 14px; }
.kachel.folgt { background: var(--flaeche-2); box-shadow: none; }
.kachel.folgt .kachel-icon { background: #cbd5e1; box-shadow: none; }
.kachel.folgt .kachel-fuss { color: var(--leise); }

/* (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; }
.info::after {
  content: attr(data-tipp); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 60;
  width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--dunkel); color: #fff;
  font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: var(--schatten-hoch); opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
}
.info:hover::after, .info:focus-visible::after { opacity: 1; visibility: visible; }

.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); }
.rechte-legende td.mob-haupt { white-space: nowrap; min-width: 210px; }
.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-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; }