/* =====================================================================
   Online-Unterschrift – nur für /intern (Mitarbeiter) und
   /unterschreiben (Kunde). Baut auf styles.css auf (Farben, Karten,
   Buttons, Formularfelder) und ergänzt nur, was es dort nicht gibt.
   ===================================================================== */

.us-hero{padding:56px 0 28px;}
.us-hero h1{font-size:clamp(32px, 4.4vw, 52px);line-height:1.08;font-weight:800;letter-spacing:-0.025em;margin:0 0 14px;}
.us-hero p{font-size:19px;line-height:1.55;color:var(--text-dim);max-width:720px;margin:0;}
.us-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
.us-eyebrow svg{color:var(--accent);}
.us-wrap{padding-bottom:96px;}

/* ----- Karten ----- */
.us-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:28px;}
.us-card h2{font-size:24px;line-height:1.2;margin:0 0 6px;}
.us-card h2 + p{margin:0 0 20px;color:var(--text-dim);font-size:16.5px;line-height:1.55;}
.us-narrow{max-width:520px;}

/* Passwortfeld sieht aus wie die übrigen Felder (styles.css kennt type=password nicht) */
.field input[type="password"]{
  min-height:54px;padding:12px 18px;border:1px solid var(--line-strong);border-radius:var(--radius-xs);font-size:17px;
  font-family:inherit;color:var(--text);background:rgba(255,255,255,0.06);width:100%;
}
.field input[type="password"]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.us-field-hint{font-size:14.5px;color:var(--text-dimmer);line-height:1.45;}
.us-stack{display:flex;flex-direction:column;gap:18px;}
.us-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.us-full{width:100%;}
button[disabled].btn-primary, button[disabled].btn-secondary{opacity:.45;cursor:not-allowed;transform:none;}

/* Meldungen */
.us-msg{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;border-radius:var(--radius-sm);padding:14px 18px;margin:0;}
.us-msg svg{margin-top:3px;}
.us-msg-error{background:rgba(218,41,39,0.14);border:1px solid rgba(218,41,39,0.55);color:#fff;}
.us-msg-ok{background:var(--accent-green-soft);border:1px solid rgba(95,220,158,0.45);color:#fff;}
.us-msg-ok svg{color:var(--accent-green);}

/* ----- Bereiche (Digitale Unterschrift / Meldebögen) ----- */
.us-module{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;margin:0 0 26px;}
.us-module a{display:flex;align-items:center;gap:16px;min-height:84px;padding:16px 20px;border-radius:var(--radius-md);background:var(--card-bg);border:1px solid var(--card-border);color:var(--text);text-decoration:none;transition:background-color .15s ease, border-color .15s ease;}
.us-module a:hover{background:var(--card-bg-strong);border-color:var(--line-strong);color:var(--text);}
.us-module a.aktiv{background:var(--feature-bg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.us-module strong{display:block;font-size:18px;line-height:1.25;}
.us-module small{display:block;margin-top:2px;font-size:14.5px;color:var(--text-dimmer);line-height:1.35;}
.us-modul-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:50px;height:50px;border-radius:16px;background:var(--icon-tile);color:var(--accent);}
.us-module a.aktiv .us-modul-icon{background:var(--accent);color:var(--accent-ink);}

/* ----- Unterpunkte: Neues Dokument / Versendete Dokumente ----- */
.us-tabs{display:inline-flex;gap:4px;padding:5px;margin:0 0 28px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid var(--card-border);max-width:100%;}
.us-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;font-size:16.5px;font-weight:700;color:var(--text-dim);text-decoration:none;text-align:center;line-height:1.15;hyphens:none;}
.us-tabs a:hover{color:var(--text);}
.us-tabs a.aktiv{background:var(--accent);color:var(--accent-ink);}
.us-doku-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:22px;}
.us-doku-kopf .field{flex:1 1 280px;max-width:420px;}
.us-doku-kopf .btn-secondary{min-height:54px;padding:10px 24px;font-size:17px;}
.us-list a.us-link-btn{display:inline-flex;align-items:center;}
.us-link-btn.us-del{color:#ff9d9b;}
.us-link-btn.us-del:hover{color:#ffc4c3;}
.us-link-btn.us-del.sicher{color:#fff;background:var(--accent-red);text-decoration:none;padding:0 14px;border-radius:999px;min-height:36px;}
.us-del[disabled]{opacity:.6;cursor:default;}

/* ----- Schritte ----- */
.us-steps{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 28px;padding:0;}
.us-steps li{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 8px;border-radius:999px;font-size:15.5px;font-weight:600;color:var(--text-dimmer);background:rgba(255,255,255,0.04);border:1px solid var(--card-border);}
.us-steps li span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.1);font-size:14.5px;font-weight:700;color:var(--text);}
.us-steps li.aktiv{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft);}
.us-steps li.aktiv span{background:var(--accent);color:var(--accent-ink);}
.us-steps li.fertig span{background:var(--accent-green);color:var(--accent-green-ink);}

/* ----- Ablagefläche ----- */
.us-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  min-height:300px;padding:40px 24px;border-radius:var(--radius-xl);cursor:pointer;
  background:var(--feature-bg);border:2px dashed var(--accent-line);
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.us-drop:hover, .us-drop:focus-visible{border-color:var(--accent);outline:none;}
.us-drop.zieht{border-color:var(--accent);border-style:solid;background:rgba(127,227,240,0.2);transform:scale(1.01);}
.us-drop-icon{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:24px;background:var(--icon-tile);color:var(--accent);margin-bottom:6px;}
.us-drop strong{font-size:24px;line-height:1.2;font-weight:800;}
.us-drop span{font-size:17px;color:var(--text-dim);}
.us-drop small{font-size:14.5px;color:var(--text-dimmer);}

/* ----- Editor: Dokument links, Angaben rechts ----- */
.us-editor{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;}
.us-side{position:sticky;top:104px;}
.us-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:14px;}
.us-file{display:flex;align-items:center;gap:10px;min-width:0;font-size:16px;font-weight:600;color:var(--text);}
.us-file svg{color:var(--accent);}
.us-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;hyphens:none;}
.us-link-btn{background:none;border:none;padding:0;min-height:44px;font:inherit;font-size:15.5px;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.us-link-btn:hover{color:var(--accent-hover);}
.us-howto{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--text-dim);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:16px;}
.us-howto svg{color:var(--accent);margin-top:3px;}
.us-howto strong{color:var(--text);}

/* Automatisch erkannte Unterschriftsfelder */
.us-vorschlag{align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.us-vorschlag span{flex:1 1 240px;}
.us-vorschlag .us-link-btn{min-height:32px;white-space:nowrap;}
.us-mark.vorschlag{border-style:dashed;}

/* Feldart wählen */
.us-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.us-tools button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,0.06);color:var(--text);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;}
.us-tools button::before{content:"";width:12px;height:12px;border-radius:3px;background:#7fe3f0;}
.us-tools button[data-typ="km"]::before{background:#5fdc9e;}
.us-tools button[data-typ="iban"]::before{background:#b9a5ff;}
.us-tools button:hover{background:rgba(255,255,255,0.12);}
.us-tools button.aktiv{background:#fff;border-color:#fff;color:var(--accent-ink);}
.us-tools button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Seiten des Dokuments */
.us-pages{display:flex;flex-direction:column;gap:18px;}
.us-page{position:relative;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,0.45);}
.us-page canvas{display:block;width:100%;height:auto;}
.us-page-nr{position:absolute;top:10px;right:10px;z-index:3;padding:3px 10px;border-radius:999px;background:rgba(13,19,48,0.82);color:#fff;font-size:13px;font-weight:600;pointer-events:none;}
.us-layer{position:absolute;inset:0;z-index:2;}
.us-layer.markierbar{cursor:crosshair;touch-action:pan-y;}

/* Unterschriftsfeld im Editor */
.us-mark{
  position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(127,227,240,0.3);border:2px solid #0d8fa3;border-radius:6px;
  color:#0d1330;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;
  cursor:move;touch-action:none;user-select:none;-webkit-user-select:none;
}
.us-mark:hover, .us-mark.aktiv{background:rgba(127,227,240,0.45);box-shadow:0 0 0 3px rgba(13,143,163,0.25);}
/* Kilometerstand (mint) und IBAN (violett) heben sich von der Unterschrift (türkis) ab */
.us-mark-km{background:rgba(95,220,158,0.34);border-color:#1f9c62;}
.us-mark-km:hover, .us-mark-km.aktiv{background:rgba(95,220,158,0.5);box-shadow:0 0 0 3px rgba(31,156,98,0.25);}
.us-mark-km .us-mark-grip{background:#1f9c62;}
.us-mark-iban{background:rgba(160,138,255,0.3);border-color:#6a52d9;}
.us-mark-iban:hover, .us-mark-iban.aktiv{background:rgba(160,138,255,0.46);box-shadow:0 0 0 3px rgba(106,82,217,0.25);}
.us-mark-iban .us-mark-grip{background:#6a52d9;}
.us-mark-label{overflow:hidden;text-overflow:ellipsis;padding:0 4px;pointer-events:none;hyphens:none;}
.us-mark-del{
  position:absolute;top:-14px;right:-14px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  background:var(--accent-red);color:#fff;font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.us-mark-grip{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:#0d8fa3;border:2px solid #fff;cursor:nwse-resize;touch-action:none;}
.us-ghost{position:absolute;border:2px dashed #0d8fa3;background:rgba(127,227,240,0.22);border-radius:6px;pointer-events:none;}

/* Mitarbeiter-Auswahl */
.us-team-feld{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px;}
.us-team-feld legend{padding:0;margin-bottom:8px;font-size:15.5px;font-weight:600;color:var(--text-dim);}
.us-team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.us-person{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid var(--card-border);background:rgba(255,255,255,0.05);cursor:pointer;transition:background-color .15s ease, border-color .15s ease;}
.us-person:hover{border-color:var(--line-strong);background:rgba(255,255,255,0.09);}
.us-person input{position:absolute;opacity:0;pointer-events:none;}
.us-person img, .us-person i{flex-shrink:0;width:42px;height:42px;border-radius:50%;object-fit:cover;}
.us-person i{display:flex;align-items:center;justify-content:center;background:var(--icon-tile);color:var(--text);font-style:normal;font-size:15px;font-weight:700;}
.us-person span{min-width:0;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--text);hyphens:none;overflow-wrap:anywhere;}
.us-person:has(input:checked){background:var(--accent);border-color:var(--accent);}
.us-person:has(input:checked) span{color:var(--accent-ink);}
.us-person:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}

/* Erinnerungs-Regler */
.us-range-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.us-range-head output{font-size:17px;font-weight:700;color:var(--accent);white-space:nowrap;}
.us-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;}
.us-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg, var(--accent) var(--us-fill, 22%), rgba(255,255,255,0.16) var(--us-fill, 22%));}
.us-range::-moz-range-track{height:8px;border-radius:999px;background:rgba(255,255,255,0.16);}
.us-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent);}
.us-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--accent);border:4px solid var(--accent-ink);box-shadow:0 0 0 2px var(--accent), 0 6px 14px rgba(0,0,0,0.4);cursor:grab;}
.us-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:4px solid var(--accent-ink);box-shadow:0 0 0 2px var(--accent), 0 6px 14px rgba(0,0,0,0.4);cursor:grab;}
.us-range:active::-webkit-slider-thumb{cursor:grabbing;}
.us-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:999px;}
.us-range-scale{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text-dimmer);margin-top:-4px;}
.us-count{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--text-dim);padding:12px 16px;border-radius:var(--radius-xs);background:rgba(255,255,255,0.05);border:1px solid var(--card-border);}
.us-count b{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:15.5px;}
.us-count.leer b{background:rgba(255,255,255,0.14);color:var(--text);}

/* Ergebnis: Link */
.us-result{background:var(--feature-bg);border-color:var(--feature-border);}
.us-linkbox{display:flex;gap:10px;align-items:stretch;margin:6px 0 4px;}
.us-linkbox input{flex:1;min-width:0;min-height:56px;padding:12px 18px;border-radius:var(--radius-xs);border:1px solid var(--accent-line);background:rgba(13,19,48,0.55);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;}
.us-linkbox input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.us-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:16px;color:var(--text-dim);}
.us-facts li{display:flex;gap:10px;align-items:flex-start;}
.us-facts svg{color:var(--accent-green);margin-top:4px;}
.us-facts strong{color:var(--text);}

/* Liste „Meine Dokumente“ */
.us-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.us-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;align-items:center;gap:8px 18px;padding:14px 20px;border-radius:var(--radius-sm);background:var(--card-bg);border:1px solid var(--card-border);}
.us-list-main{min-width:0;}
.us-list-main strong{display:block;font-size:17px;}
.us-list-main span{display:block;font-size:14.5px;color:var(--text-dimmer);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;hyphens:none;}
.us-pill{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:700;white-space:nowrap;}
.us-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.us-pill-offen{background:rgba(255,255,255,0.08);color:var(--text);}
.us-pill-fertig{background:var(--accent-green-soft);color:var(--accent-green);}
.us-list-empty{color:var(--text-dimmer);font-size:16px;margin:0;}

/* ===================== Kundenseite ===================== */
.us-progress{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:22px;}
.us-progress-text{font-size:17px;color:var(--text-dim);}
.us-progress-text strong{color:var(--text);font-size:19px;}
.us-bar{height:8px;border-radius:999px;background:rgba(255,255,255,0.14);overflow:hidden;margin-top:10px;min-width:220px;}
.us-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .25s ease;}
.us-doc{max-width:900px;}

/* Feld, in dem der Kunde unterschreibt */
.us-sign{
  position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;padding:0;
  font-family:inherit;font-size:clamp(10px, 1.7vw, 15px);font-weight:700;line-height:1;color:#0d1330;white-space:nowrap;
  background:rgba(127,227,240,0.38);border:2px solid #0d8fa3;border-radius:6px;cursor:pointer;
  animation:us-puls 1.8s ease-in-out infinite;
}
.us-sign{overflow:hidden;}
.us-sign span{overflow:hidden;text-overflow:ellipsis;hyphens:none;}
.us-sign svg{width:1.2em;height:1.2em;}
@media (max-width:640px){.us-sign svg{display:none;}}
.us-sign:hover, .us-sign:focus-visible{background:rgba(127,227,240,0.6);outline:none;box-shadow:0 0 0 4px rgba(13,143,163,0.3);}
.us-sign.erledigt{background:transparent;border:1.5px dashed rgba(13,143,163,0.55);animation:none;}
.us-sign.erledigt img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;align-self:flex-end;}
@keyframes us-puls{0%,100%{box-shadow:0 0 0 0 rgba(13,143,163,0.45);}50%{box-shadow:0 0 0 7px rgba(13,143,163,0);}}
@media (prefers-reduced-motion: reduce){.us-sign{animation:none;}}

/* Ausgefüllte Kundenangabe (Kilometerstand, IBAN) */
.us-sign.erledigt.wert{justify-content:flex-start;padding:0 3px;color:#10206b;font-weight:600;font-variant-numeric:tabular-nums;}

/* Eingabe-Dialog */
.us-wert{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:0 18px;border:3px solid transparent;}
.us-wert:focus-within{border-color:var(--accent);}
.us-wert.gueltig{border-color:var(--accent-green);}
.us-wert input{flex:1;min-width:0;height:72px;border:0;outline:0;background:transparent;color:#0d1330;font-family:inherit;font-size:clamp(20px, 5.4vw, 30px);font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.us-wert input::placeholder{color:rgba(13,19,48,0.3);font-weight:600;}
.us-wert-einheit{color:rgba(13,19,48,0.55);font-size:22px;font-weight:700;}
.us-dialog p.us-wert-status{min-height:24px;margin:10px 2px 0;font-size:15.5px;color:var(--text-dim);}
.us-dialog p.us-wert-status.ok{color:var(--accent-green);font-weight:600;}

.us-submit{margin-top:28px;}
.us-submit p{font-size:15.5px;line-height:1.55;color:var(--text-dimmer);margin:14px 0 0;}

/* Unterschrift-Dialog */
.us-dialog{width:min(680px, calc(100vw - 24px));max-width:none;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:#141b40;color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.us-dialog::backdrop{background:rgba(6,6,18,0.72);}
.us-dialog-inner{padding:24px;}
.us-dialog h2{font-size:24px;margin:0 0 4px;}
.us-dialog p{margin:0 0 16px;color:var(--text-dim);font-size:16px;}
.us-pad{position:relative;background:#fff;border-radius:16px;overflow:hidden;}
.us-pad canvas{display:block;width:100%;height:auto;aspect-ratio:3 / 1.15;touch-action:none;cursor:crosshair;}
.us-pad::after{content:"";position:absolute;left:6%;right:6%;bottom:22%;border-bottom:1.5px solid rgba(13,19,48,0.28);pointer-events:none;}
.us-pad-hint{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:rgba(13,19,48,0.4);font-size:17px;font-weight:600;pointer-events:none;}
.us-dialog .consent-check{margin:16px 0 0;}
.us-dialog-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px;}
.us-dialog-actions div{display:flex;gap:10px;flex-wrap:wrap;}
.us-dialog .btn-primary, .us-dialog .btn-secondary{min-height:52px;padding:10px 24px;font-size:17px;}

.us-done-icon{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--accent-green-grad);color:var(--accent-green-ink);margin-bottom:20px;}
.us-loading{display:flex;align-items:center;gap:14px;font-size:17px;color:var(--text-dim);padding:28px 0;}
.us-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,0.2);border-top-color:var(--accent);animation:us-dreh .8s linear infinite;}
@keyframes us-dreh{to{transform:rotate(360deg);}}

/* =====================================================================
   Meldebogen Handel & Handwerk – Fragebogen (Kunde und interner Bereich)
   ===================================================================== */
.mb-seite{max-width:820px;}
.mb-formular{display:flex;flex-direction:column;gap:16px;}
.mb-block{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:24px 26px;}
.mb-kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.mb-kopf h3{margin:0;font-size:20px;line-height:1.25;}
.mb-nr{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:40px;height:40px;padding:0 8px;border-radius:12px;background:var(--icon-tile);color:var(--text);font-size:15px;font-weight:800;}
.mb-hinweis{margin:-6px 0 14px;color:var(--text-dim);font-size:16px;line-height:1.5;}

/* Art des Betriebes: drei Kacheln */
.mb-arten{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin-bottom:18px;position:relative;}
.mb-art{position:relative;display:flex;min-height:88px;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:rgba(255,255,255,0.04);cursor:pointer;transition:background-color .15s ease, border-color .15s ease;}
.mb-art:hover{background:rgba(255,255,255,0.08);}
.mb-art input{position:absolute;opacity:0;pointer-events:none;}
.mb-art-text{display:flex;flex-direction:column;gap:4px;}
.mb-art-text strong{font-size:16px;line-height:1.3;}
.mb-art-text small{font-size:14px;color:var(--text-dimmer);}
.mb-art:has(input:checked){background:var(--accent);border-color:var(--accent);}
.mb-art:has(input:checked) strong, .mb-art:has(input:checked) small{color:var(--accent-ink);}
.mb-art:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px;}

/* Zahlenfelder mit −/+ */
.mb-frage{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 0;border-top:1px solid var(--line);}
.mb-block > .mb-frage:first-of-type, .mb-paar > .mb-frage:first-child{border-top:0;}
.mb-frage > label{flex:1 1 260px;font-size:16.5px;font-weight:600;color:var(--text);line-height:1.4;}
.mb-zahl{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,0.06);overflow:hidden;}
.mb-zahl input{width:84px;min-height:52px;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:20px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;}
.mb-zahl input:focus{outline:none;}
.mb-zahl:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.mb-schritt{width:52px;min-height:52px;border:0;background:transparent;color:var(--accent);font-family:inherit;font-size:26px;font-weight:600;line-height:1;cursor:pointer;}
.mb-schritt:hover{background:rgba(255,255,255,0.08);}
.mb-paar{display:flex;flex-direction:column;}
.mb-mehr{flex:1 0 100%;font-size:15px;color:var(--text-dim);}
.mb-mehr summary{display:inline-flex;align-items:center;min-height:36px;color:var(--accent);font-weight:600;cursor:pointer;}
.mb-mehr p{margin:4px 0 0;line-height:1.55;}

/* „vorher: …“ bei geänderten Angaben */
.mb-vorher{display:inline-flex;align-items:center;gap:6px;flex:1 0 100%;font-size:14.5px;font-weight:600;color:#ffd88a;}
.mb-vorher::before{content:"";width:8px;height:8px;border-radius:50%;background:#ffd88a;}
.mb-arten > .mb-vorher{grid-column:1 / -1;}
.mb-block > .mb-vorher{margin-top:10px;}
.mb-frage.geaendert .mb-zahl{border-color:#ffd88a;}

/* Rote Kennzeichen */
.mb-kz-liste{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:10px;}
.mb-kz{display:flex;align-items:center;border-radius:var(--radius-xs);border:1px solid var(--line-strong);background:#fff;overflow:hidden;}
.mb-kz::before{content:"";align-self:stretch;width:14px;background:#2f4fbf;}
.mb-kz input{flex:1;min-width:0;min-height:52px;padding:0 12px;border:0;background:transparent;color:#b3121b;font-family:inherit;font-size:20px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.mb-kz input::placeholder{color:rgba(13,19,48,0.3);font-weight:600;letter-spacing:0;text-transform:none;font-size:16px;}
.mb-kz input:focus{outline:none;}
.mb-kz:focus-within{box-shadow:0 0 0 3px var(--accent);}
.mb-kz-weg{width:44px;min-height:52px;border:0;background:transparent;color:rgba(13,19,48,0.55);font-size:24px;cursor:pointer;}
.mb-kz-weg:hover{color:#b3121b;}
.mb-kz-keine{margin:0;color:var(--text-dimmer);font-size:16px;}
.mb-kz-dazu{margin-top:12px;min-height:46px;padding:0 20px;border-radius:999px;border:1px dashed var(--accent-line);background:transparent;color:var(--accent);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;}
.mb-kz-dazu:hover{background:var(--accent-soft);}

/* Ja / Nein */
.mb-janein{display:inline-flex;gap:8px;flex-wrap:wrap;}
.mb-wahl{position:relative;display:inline-flex;}
.mb-wahl input{position:absolute;opacity:0;pointer-events:none;}
.mb-wahl span{display:inline-flex;align-items:center;justify-content:center;min-width:110px;min-height:50px;padding:0 22px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,0.05);font-size:17px;font-weight:700;cursor:pointer;}
.mb-wahl input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.mb-wahl input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px;}
.mb-janein + .mb-frage{margin-top:12px;}

/* Erklärung und Unterschrift */
.mb-erklaerung{margin-top:16px;}
.mb-erklaerung .consent-check{font-size:16.5px;color:var(--text);}
.mb-ort{max-width:420px;margin-bottom:20px;}
.mb-unterschrift-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:15.5px;font-weight:600;color:var(--text-dim);}
.mb-unterschrift .us-pad canvas{aspect-ratio:3 / 1;}
.mb-seite .us-howto{margin-bottom:16px;}

/* ----- Interner Bereich: Kundenliste und Editor ----- */
.mb-intern-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.mb-intern-kopf h2{margin:0 0 6px;font-size:26px;}
.mb-intern-kopf p{margin:0;max-width:680px;color:var(--text-dim);font-size:16px;line-height:1.5;}
#us-ansicht-meldeboegen > .us-msg{margin-bottom:16px;}
.mb-suche{max-width:420px;margin-bottom:16px;}
.mb-kunden{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.mb-kunde{padding:18px 22px;border-radius:var(--radius-md);background:var(--card-bg);border:1px solid var(--card-border);}
.mb-kunde.pausiert{opacity:.7;}
.mb-kunde-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.mb-kunde-name{min-width:0;}
.mb-kunde-name strong{display:block;font-size:18px;}
.mb-kunde-name span{display:block;font-size:14.5px;color:var(--text-dimmer);overflow-wrap:anywhere;}
.mb-quartale{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px;}
.mb-pill-warn{background:rgba(218,41,39,0.18);color:#ffb3b2;}
.mb-pill-pause{background:rgba(255,216,138,0.16);color:#ffd88a;}
.mb-aktionen{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;}
.mb-aktionen a.us-link-btn{display:inline-flex;align-items:center;}
.mb-editor-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.mb-editor-kopf h2{margin:0;}
.mb-breit{grid-column:1 / -1;}
.mb-editor-zwischen{font-size:20px;margin:8px 0 4px;}
.mb-editor-text{margin:0 0 16px;color:var(--text-dim);font-size:16px;}
.mb-editor .mb-block{background:rgba(255,255,255,0.03);}
.mb-start{border:0;padding:0;margin:22px 0 6px;display:flex;flex-direction:column;gap:6px;}
.mb-start legend{font-size:15.5px;font-weight:600;color:var(--text-dim);margin-bottom:6px;padding:0;}
.mb-wahl-zeile{display:flex;align-items:center;gap:12px;min-height:44px;font-size:16.5px;cursor:pointer;}
.mb-wahl-zeile input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;}
.mb-aktiv{margin-top:18px;}
.mb-editor .us-msg{margin:16px 0 0;}
.mb-editor .us-actions{margin-top:20px;}

/* =====================================================================
   Betreuerwechsel (/betreuerwechsel) und Bestandsübertragungen (intern)
   ===================================================================== */
.bw-seite{display:flex;flex-direction:column;gap:16px;}
.bw-seite .mb-erklaerung{margin-top:0;}
.bw-seite .us-submit{margin-top:0;}
.bw-h{margin:0;font-size:20px;line-height:1.25;}
.bw-anrede{margin-bottom:18px;}
.bw-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.bw-vertraege{display:flex;flex-direction:column;gap:10px;}
.bw-vertrag{display:grid;grid-template-columns:130px minmax(0,1fr) 48px;gap:8px;align-items:center;}
.bw-vertrag select, .bw-vertrag input{min-height:52px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-xs);background:rgba(255,255,255,0.06);color:var(--text);font-family:inherit;font-size:17px;width:100%;}
.bw-vertrag select{appearance:none;-webkit-appearance:none;font-weight:700;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%237fe3f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;}
.bw-vertrag select option{background:var(--bg-3);}
.bw-vertrag select:focus, .bw-vertrag input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.bw-vertrag-weg{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--text-dim);font-size:22px;cursor:pointer;}
.bw-vertrag-weg:hover{color:#fff;border-color:var(--accent-red);}
.bw-berater{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;}
.bw-person{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:rgba(255,255,255,0.04);cursor:pointer;transition:background-color .15s ease, border-color .15s ease;}
.bw-person:hover{background:rgba(255,255,255,0.08);}
.bw-person input{position:absolute;opacity:0;pointer-events:none;}
.bw-person img, .bw-person-init{flex-shrink:0;width:56px;height:56px;border-radius:50%;object-fit:cover;}
.bw-person-init{display:flex;align-items:center;justify-content:center;background:var(--icon-tile);font-weight:800;font-size:18px;}
.bw-person-text{display:flex;flex-direction:column;min-width:0;}
.bw-person-text strong{font-size:16.5px;line-height:1.25;}
.bw-person-text small{font-size:14px;color:var(--text-dimmer);}
.bw-person:has(input:checked){background:var(--accent);border-color:var(--accent);}
.bw-person:has(input:checked) strong, .bw-person:has(input:checked) small{color:var(--accent-ink);}
.bw-person:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px;}
.bw-auftrag{margin:0 0 16px;padding:16px 18px;border-left:3px solid var(--accent);border-radius:12px;background:rgba(255,255,255,0.05);}
.bw-auftrag p{margin:0 0 10px;font-size:16.5px;line-height:1.6;color:var(--text);}
.bw-auftrag p:last-child{margin-bottom:0;}

/* Intern: Liste der Bestandsübertragungen */
.bw-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);gap:12px;align-items:end;margin-bottom:16px;}
.bw-links{margin:0 0 20px;}
.bw-links summary{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:700;cursor:pointer;}
.bw-links ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;}
.bw-links li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;font-size:15.5px;}
.bw-links code{font-size:14px;color:var(--text-dim);overflow-wrap:anywhere;}
.bw-eintrag-daten{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:4px 20px;margin:10px 0;font-size:15px;color:var(--text-dim);}
.bw-eintrag-daten b{color:var(--text);font-weight:600;}
.us-pill-berater{background:var(--accent-soft);color:var(--accent);}

/* ----- Kleinere Bildschirme ----- */
@media (max-width:1000px){
  .bw-berater{grid-template-columns:repeat(2, minmax(0,1fr));}
  .us-editor{grid-template-columns:minmax(0,1fr);}
  .us-side{position:static;}
}
@media (max-width:640px){
  .us-hero{padding:36px 0 22px;}
  .us-card{padding:22px 18px;border-radius:var(--radius-md);}
  .us-drop{min-height:240px;padding:28px 18px;}
  .us-drop strong{font-size:21px;}
  .us-linkbox{flex-direction:column;}
  .us-list li{grid-template-columns:minmax(0,1fr) auto;}
  .us-list li .us-del{justify-self:end;}
  .us-list li .us-link-btn{justify-self:start;min-height:36px;}
  .us-tabs{display:flex;}
  .us-tabs a{flex:1;padding:0 8px;font-size:15px;}
  .us-module{gap:8px;}
  .bw-berater{grid-template-columns:minmax(0,1fr);}
  .bw-vertrag{grid-template-columns:100px minmax(0,1fr) 44px;}
  .bw-filter{grid-template-columns:minmax(0,1fr);}
  .us-module a{flex-direction:column;align-items:flex-start;gap:10px;min-height:0;padding:12px 10px;}
  .us-module small{display:none;}
  .us-module strong{font-size:13.5px;letter-spacing:-0.01em;hyphens:manual;}
  .us-module a > span:last-child{min-width:0;max-width:100%;}
  .us-modul-icon{width:42px;height:42px;border-radius:13px;}
  .mb-block{padding:20px 16px;border-radius:var(--radius-md);}
  .mb-arten{grid-template-columns:minmax(0,1fr);}
  .mb-art{min-height:0;}
  .mb-frage > label{flex-basis:100%;}
  .mb-janein{display:flex;}
  .mb-wahl{flex:1;}
  .mb-wahl span{width:100%;}
  .mb-kunde{padding:16px;}
  .us-dialog-inner{padding:18px;}
  .us-dialog-actions, .us-dialog-actions div{width:100%;}
  .us-dialog-actions button{flex:1;}
  .us-mark{font-size:11px;}
  .us-actions .btn-primary, .us-actions .btn-secondary{width:100%;}
}