/* ==========================================================================
   matchDesk UI-Kit · Fachbausteine (Lead-Verkauf, Betrieb) und Portal-Rahmen
   ========================================================================== */

/* 6b-Y2: aus style.css
   Noch vom Startzustand und von dynamischen Renderern verwendete App-Klassen.
   Die Werte entsprechen den bisherigen Regeln in beiden Farbschemata. */
/* Die C2-Fehlerinsel erbt bis zu ihrer Ablösung die frühere Body-Zeilenhöhe. */
:where(.md-root) [data-md-legacy-host] { line-height: 22px; }
.app-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--md-bg-page); }
.app-spinner {
  box-sizing: content-box; width: 40px; height: 40px; border: 4px solid var(--md-start-spinner-track);
  border-top-color: var(--md-start-spinner-accent); border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }
.app-code { font-family: var(--md-font-mono); font-size: var(--md-fs-small); }
.app-cd-stack { display: flex; flex-direction: column; gap: var(--md-space-2); margin-bottom: var(--md-space-2); }
.app-cd-stack:empty { margin-bottom: 0; }
.app-cd-stack[hidden] { display: none; }
.app-toast-wrap {
  position: fixed; bottom: var(--md-space-6); right: var(--md-space-6);
  display: flex; flex-direction: column; gap: var(--md-space-2); z-index: 1000;
}
.app-toast {
  padding: var(--md-space-3) var(--md-space-4); border-radius: var(--md-radius-control);
  background: var(--md-ink-800); color: var(--md-text-on-accent); font-size: var(--md-fs-body); line-height: 22px;
  box-shadow: var(--md-toast-shadow); border-left: 3px solid var(--md-ink-800);
  opacity: 1; transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.app-toast svg.lucide { display: inline; width: 18px; height: 18px; flex: 0 0 auto; vertical-align: text-bottom; max-width: none; }
.app-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.app-toast-success { border-left-color: var(--md-toast-success); }
.app-toast-error { border-left-color: var(--md-toast-danger); }
.app-toast-info { border-left-color: var(--md-toast-info); }

/* --- Wochenraster: Lieferzeiten Mo bis So, Ausschlussfenster --------------- */
.md-week-scroll { max-width: 100%; min-width: 0; overflow-x: auto; }
.md-week { display: grid; gap: 6px; min-width: 640px; }
.md-week-scale, .md-week-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
.md-week-scale--editable, .md-week-row--editable { grid-template-columns: 44px minmax(0, 1fr) 116px; }
.md-week-hours { display: flex; justify-content: space-between; font-family: var(--md-font-mono); font-size: 11px; color: var(--md-text-muted); padding: 0 1px; }
.md-week-day { font-size: var(--md-fs-small); font-weight: 600; color: var(--md-text-strong); }
.md-week-track {
  position: relative; height: 30px; border-radius: var(--md-radius-sm);
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), var(--md-line-soft) calc(100% / 24 - 1px), var(--md-line-soft) calc(100% / 24)),
    var(--md-success-bg);
  box-shadow: inset 0 0 0 1px var(--md-success-line);
}
.md-week-track--off { background: var(--md-bg-sunken); box-shadow: inset 0 0 0 1px var(--md-line); }
.md-week-block {
  position: absolute; top: 3px; bottom: 3px; left: calc(var(--_from, 0) / 24 * 100%); width: calc((var(--_to, 24) - var(--_from, 0)) / 24 * 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px;
  background: repeating-linear-gradient(135deg, var(--md-bg-surface) 0 5px, var(--md-bg-sunken) 5px 10px);
  box-shadow: inset 0 0 0 1px var(--md-line-strong);
  font-family: var(--md-font-mono); font-size: 11px; font-weight: 500; color: var(--md-text-strong); white-space: nowrap;
}
/* Der Block ist sein eigener Container: nur SEINE Breite entscheidet, welche
   der beiden Beschriftungen sichtbar ist. Ein 15-Minuten-Block ist bei 390 px
   rund 4 px breit — dort passt kein Text mehr, die Fläche bleibt aber
   anklickbar, und `title`/`aria-label` sowie der Klartext unter dem Kalender
   tragen weiter die volle Zeit. Markup: `.md-week-label--short` („12:00") und
   `.md-week-label--full` („12:00 bis 13:00").
   Die Stufen sind gemessen, nicht geschätzt: „12:00" ist in der Mono-Schrift
   bei 11 px genau 35 px breit, die 1-Stunden-Spalte bei 1440 px aber nur
   34.5 (Admin) bis 35.1 (Portal) px. Kleiner als 11 px geht nicht (Invariante
   11.15), also trägt der schmale Text keinen Innenabstand und eine Spur
   engeren Satz — nur so passt er in beiden Oberflächen an seiner Grenze. */
.md-week-block { container-type: inline-size; }
.md-week-block button { all: unset; position: absolute; inset: 0; cursor: pointer; border-radius: inherit; }
.md-week-block > span { min-width: 0; max-width: 100%; padding-inline: 4px; overflow: hidden; text-overflow: ellipsis; }
.md-week-block > .md-week-label { display: none; }
.md-week-block > .md-week-label--short { padding-inline: 0; letter-spacing: -0.2px; }
@container (min-width: 34px) {
  .md-week-block > .md-week-label--short { display: block; }
}
@container (min-width: 124px) {
  .md-week-block > .md-week-label--short { display: none; }
  .md-week-block > .md-week-label--full { display: block; }
}
.md-week-block button:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 1px; }
.md-week-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--md-text-muted); }
.md-week-legend span { display: inline-flex; align-items: center; gap: 6px; }
.md-week-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.md-week-legend .is-on { background: var(--md-success-bg); box-shadow: inset 0 0 0 1px var(--md-success-line); }
.md-week-legend .is-off { background: repeating-linear-gradient(135deg, var(--md-bg-surface) 0 3px, var(--md-bg-sunken) 3px 6px); box-shadow: inset 0 0 0 1px var(--md-line-strong); }

/* --- Versionsvergleich und Deploy-Verlauf ---------------------------------- */
.md-versions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.md-version { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--md-radius-md); background: var(--md-bg-subtle); border: 1px solid var(--md-line-soft); min-width: 0; }
.md-version--next { background: var(--md-bg-surface); border-color: var(--md-accent-line); box-shadow: var(--md-ring-accent-soft); }
.md-version-tag { font-family: var(--md-font-mono); font-size: .875rem; font-weight: 600; color: var(--md-text-strong); overflow-wrap: anywhere; }
.md-version-meta { font-size: 12px; color: var(--md-text-muted); }
.md-versions > .md-icon { color: var(--md-icon-muted); }

.md-run { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.md-run-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; font-size: var(--md-fs-small); }
.md-run-step + .md-run-step { border-top: 1px dashed var(--md-line); }
.md-run-step .md-icon { width: 18px; height: 18px; }
.md-run-step[data-state="done"] .md-icon { color: var(--md-success-fg); }
.md-run-step[data-state="active"] .md-icon { color: var(--md-accent); }
.md-run-step[data-state="waiting"] { color: var(--md-text-muted); }
.md-run-step[data-state="waiting"] .md-icon { color: var(--md-icon-muted); }
.md-run-step[data-state="failed"] .md-icon { color: var(--md-danger-fg); }
.md-run-step b { font-weight: 600; color: var(--md-text-strong); }
.md-run-step time { font-family: var(--md-font-mono); font-size: 12px; color: var(--md-text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .md-run-step[data-state="active"] .md-icon { animation: md-spin 1.2s linear infinite; }
}

/* --- Geheimnis, genau einmal sichtbar (API-Schlüssel, Startpasswort) ------- */
.md-secret { display: grid; gap: 12px; padding: 16px; border-radius: var(--md-radius-md); background: var(--md-warning-bg); border: 1px solid var(--md-warning-line); }
.md-secret-head { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--md-text-strong); }
.md-secret-head .md-icon { color: var(--md-warning-fg); }
.md-secret-value {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--md-radius-field);
  background: var(--md-bg-surface); border: 1px solid var(--md-line-strong);
}
.md-secret-value code { flex: 1; min-width: 0; font-family: var(--md-font-mono); font-size: .8125rem; color: var(--md-text-strong); overflow-wrap: anywhere; letter-spacing: .02em; }

/* --- Mehrzeilige Angaben: von Hand eingegebene Texte ------------------------ */
/* Buyer-Beschreibungen und Ablehnungsgruende werden so gezeigt, wie sie
   eingegeben wurden: Zeilenumbrueche bleiben stehen, lange Woerter brechen um.
   Kein `white-space: pre-wrap`, damit ein einzelner Absatz nicht seitlich
   auswandert. */
.md-prewrap { white-space: pre-line; overflow-wrap: anywhere; }
.md-row--field-action { grid-template-columns: minmax(0, 1fr) var(--md-control-h-sm); }

/* --- Platzhalter und Mail-Vorschau (E-Mail-Vorlage) ------------------------- */
.md-placeholders { display: flex; flex-wrap: wrap; gap: 6px; }
.md-mailpreview { border: 1px solid var(--md-line); border-radius: var(--md-radius-md); overflow: hidden; background: var(--md-bg-surface); }
.md-mailpreview-head { display: grid; gap: 4px; padding: 12px 16px; background: var(--md-bg-subtle); border-bottom: 1px solid var(--md-line-soft); font-size: var(--md-fs-small); }
.md-mailpreview-head b { color: var(--md-text-strong); }
.md-mailpreview-frame { display: block; width: 100%; height: var(--md-mailpreview-h); border: 0; background: var(--md-bg-surface); }
.md-mailpreview-body { padding: 16px; font-size: var(--md-fs-small); line-height: 1.65; white-space: pre-line; color: var(--md-text); }
.md-mailpreview-frame { display: block; width: 100%; min-height: 320px; border: 0; background: var(--md-bg-surface); }
.md-mailpreview mark { background: var(--md-accent-bg); color: var(--md-accent-fg); padding: 0 3px; border-radius: 4px; font-weight: 600; }

.md-mailpreview[hidden] { display: none; }
.md-mailpreview iframe { display: block; width: 100%; height: 560px; border: 0; background: var(--md-bg-surface); }
.md-panel > summary { cursor: pointer; color: var(--md-text-muted); }
.md-panel > pre { max-height: 320px; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- Logo als Hintergrund: eine Quelle, Hell/Dunkel über --md-logo --------- */
/* Die App setzt --md-logo je Theme auf die Logo-Datei (hell: logo.png, dunkel: logo-inverted.png aus sites/matchdesk/brand). */
.md-logo { display: block; flex: none; height: 26px; aspect-ratio: 280 / 42; background: var(--md-logo) no-repeat left center / contain; }
.md-logo--sm { height: 22px; }

/* --- Guthaben-Anzeige -------------------------------------------------------- */
.md-balance { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--md-radius-control); background: var(--md-bg-sunken); border: 1px solid var(--md-line); font-size: var(--md-fs-small); color: var(--md-text-muted); white-space: nowrap; }
.md-balance b { color: var(--md-text-strong); font-variant-numeric: tabular-nums; font-weight: 700; }
.md-balance .md-icon { color: var(--md-accent); }
.md-balance--low { background: var(--md-warning-bg); border-color: var(--md-warning-line); }
.md-balance--low .md-icon { color: var(--md-warning-fg); }

/* ==========================================================================
   Portal-Rahmen: Kopf wie matchdesk.de, waagerechte Navigation, Komfortmaß
   ========================================================================== */
.md-portal { min-height: 100%; width: 100%; min-width: 0; overflow-x: clip; background: var(--md-bg-page); display: flex; flex-direction: column; }
.md-portal-head {
  position: sticky; top: 0; z-index: var(--md-z-nav); height: 68px; flex: none;
  background: color-mix(in srgb, var(--md-bg-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--md-line);
}
.md-portal-head-inner { height: 100%; max-width: var(--md-content-max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.md-portal-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.md-portal-nav a {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--md-radius-control-sm);
  color: var(--md-text); font-weight: 600; font-size: var(--md-fs-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--md-dur-1) var(--md-ease), color var(--md-dur-1) var(--md-ease);
}
.md-portal-nav a:hover { background: var(--md-bg-hover); color: var(--md-text-strong); }
.md-portal-nav a[aria-current="page"] { background: var(--md-accent-bg); color: var(--md-accent-fg); }
.md-portal-nav .md-count { margin-left: 2px; }
.md-portal-nav a[aria-current="page"] .md-count { background: var(--md-bg-surface); color: var(--md-accent-fg); }
.md-portal-tools { display: flex; align-items: center; gap: 10px; }
.md-portal-main { flex: 1; width: 100%; min-width: 0; max-width: var(--md-portal-max); margin: 0 auto; padding: 32px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.md-portal-banner { background: var(--md-warning-bg); border-bottom: 1px solid var(--md-warning-line); }
.md-portal-banner-inner { max-width: var(--md-portal-max); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 12px; font-size: var(--md-fs-small); color: var(--md-text-strong); }
.md-portal-banner-inner > span { flex: 1 1 0; min-width: 0; } /* der Text bricht um, der Knopf bleibt rechts */
.md-portal-banner-inner .md-icon { flex: none; color: var(--md-warning-fg); }
.md-portal-banner-inner .md-btn { flex: none; margin-left: auto; }
.md-portal-banner--info { background: var(--md-info-bg); border-bottom-color: var(--md-info-line); }
.md-portal-banner--info .md-portal-banner-inner .md-icon { color: var(--md-info-fg); }
.md-portal-banner--danger { background: var(--md-danger-bg); border-bottom-color: var(--md-danger-line); }
.md-portal-banner--danger .md-portal-banner-inner .md-icon { color: var(--md-danger-fg); }
.md-portal-banner-inner > .md-portal-banner-actions { display: flex; flex: none; flex-wrap: wrap; min-width: 0; gap: var(--md-space-2); margin-left: auto; }
.md-portal-banner-actions .md-btn { margin-left: 0; }

/* Isolationsrand fuer die heutigen Unterseiten, bis 3a bis 3c sie ersetzen. */
.md-portal-legacy { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }

/* Portal-Etappe 3c: Leads, Reklamationen und Konto liegen vollständig im Kit. */
.md-portal-leads-page, .md-portal-account-page { width: 100%; min-width: 0; }
.md-portal-leads-section > .md-card-body { gap: var(--md-space-5); }
.md-portal-leads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--md-space-16) * 5)), 1fr)); gap: var(--md-space-4); }
.md-portal-lead-card { min-width: 0; box-shadow: none; }
.md-portal-lead-card .md-card-body { gap: var(--md-space-3); }
.md-portal-lead-card .md-card-foot { align-items: flex-end; }
.md-portal-lead-contact { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.md-portal-lead-price { align-items: flex-end; text-align: right; }
.md-portal-leads-more { display: flex; justify-content: center; }
.md-portal-complaints { overflow: hidden; }
.md-portal-complaints .md-table-scroll { width: 100%; max-width: 100%; }
.md-portal-complaints-mobile { display: none; }
.md-portal-complaint-mobile-item { display: grid; gap: var(--md-space-3); padding: var(--md-card-pad); border-top: 1px solid var(--md-line-soft); }
.md-portal-complaint-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.md-portal-complaint-summary { padding: var(--md-space-4); border: 1px solid var(--md-line-soft); border-radius: var(--md-radius-card); background: var(--md-bg-subtle); }
.md-portal-complaint-reasons { gap: var(--md-space-2); min-width: 0; max-width: 100%; }
.md-portal-complaint-choice { align-items: start; min-width: 0; max-width: 100%; padding: var(--md-space-3); border: 1px solid var(--md-line); border-radius: var(--md-radius-control); background: var(--md-bg-surface); }
.md-portal-complaint-choice .md-check-text, .md-portal-complaint-choice .md-choice-title, .md-portal-complaint-choice .md-choice-desc { min-width: 0; overflow-wrap: anywhere; }
.md-portal-complaint-choice .md-choice-title { align-items: flex-start; flex-wrap: wrap; }
.md-portal-complaint-choice .md-badge { max-width: 100%; height: auto; min-height: 22px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.md-portal-complaint-choice:hover { border-color: var(--md-line-strong); }
.md-portal-complaint-choice.is-selected { border-color: var(--md-accent); background: var(--md-accent-bg); }
.md-portal-complaint-choice.is-expired { cursor: not-allowed; color: var(--md-text-muted); background: var(--md-bg-subtle); }
.md-portal-complaint-files[hidden] { display: none; }
.md-portal-complaint-filelist { margin-top: var(--md-space-2); }
.md-portal-account-security { --_min: calc(var(--md-space-16) * 4); align-items: start; }
.md-portal-google { min-height: var(--md-control-h); }
.md-root [data-portal-complaint-status]:focus, .md-root [data-portal-complaints-head]:focus { outline: none; }
.md-root [data-portal-complaint-status]:focus-visible, .md-root [data-portal-complaints-head]:focus-visible { box-shadow: inset 0 0 0 2px var(--md-focus); }
/* Konto-Menue im Kopf: native details/summary, kein zweiter Dialog-Helfer. */
.md-portal-account > summary { list-style: none; max-width: calc(var(--md-space-16) * 5); }
.md-portal-account > summary::-webkit-details-marker { display: none; }
.md-portal-account:not([open]) > .md-menu { display: none; }
.md-portal-account-label { max-width: calc(var(--md-space-12) * 4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-portal-account[open] > summary .md-icon:last-child { transform: rotate(180deg); }

@media (max-width: 1180px) {
  .md-portal-account-label { display: none; }
  .md-portal-account > summary { width: var(--md-control-h); padding: 0; }
  .md-portal-account > summary .md-icon:last-child { display: none; }
}
@media (max-width: 900px) {
  .md-portal-head { height: auto; }
  .md-portal-head-inner { flex-wrap: wrap; gap: var(--md-space-1) var(--md-space-4); padding-bottom: var(--md-space-2); }
  .md-portal-nav { order: 3; flex: 1 0 100%; }
  .md-portal-nav a { padding-inline: var(--md-space-3); }
  .md-balance-label { display: none; }
}

/* Fußzeile mit Impressum, Datenschutz, AGB: auf JEDER Portalseite, auch Anmeldung und Registrierung */
.md-portal-foot { width: 100%; max-width: var(--md-portal-max); margin: 0 auto; padding: var(--md-space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--md-space-2) var(--md-space-6); border-top: 1px solid var(--md-line); font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-portal-foot--flat { max-width: none; padding: 0; border-top: 0; }
.md-portal-foot nav { display: flex; flex-wrap: wrap; gap: var(--md-space-1) var(--md-space-5); }
.md-portal-foot a { color: inherit; font-weight: 600; text-decoration: none; }
.md-portal-foot a:hover { color: var(--md-text-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Schmale Ansicht: Kopf zweizeilig, Navigation scrollt in eigener Zeile. Greift unter 640 px,
   erzwungen mit .md-portal--narrow (Vorschau im Teaser, eingebettete Ansichten) */
.md-portal--narrow { --md-card-pad: var(--md-space-4); }
.md-portal--narrow .md-portal-head { height: auto; }
.md-portal--narrow .md-portal-head-inner { flex-wrap: wrap; gap: var(--md-space-1) var(--md-space-3); padding: var(--md-space-3) var(--md-space-4) 0; }
.md-portal--narrow .md-portal-nav { order: 3; flex: 1 0 100%; margin: 0 calc(var(--md-space-4) * -1); padding: 0 var(--md-space-6) var(--md-space-2) var(--md-space-3); }
/* Rechter Rand blendet aus: zeigt, dass die Navigation weitergeht; der Innenabstand lässt den letzten Punkt ganz herausscrollen */
.md-portal--narrow .md-portal-nav { -webkit-mask-image: linear-gradient(to right, var(--md-bg-page) calc(100% - var(--md-space-6)), transparent); mask-image: linear-gradient(to right, var(--md-bg-page) calc(100% - var(--md-space-6)), transparent); }
.md-portal--narrow .md-portal-tools { margin-left: auto; gap: var(--md-space-2); }
.md-portal--narrow .md-logo { height: 22px; }
.md-portal--narrow .md-balance { gap: var(--md-space-1-5); padding: 0 var(--md-space-2); }
.md-portal--narrow .md-portal-main { padding: var(--md-space-5) var(--md-space-4) var(--md-space-8); gap: var(--md-space-4); }
@media (max-width: 640px) {
  .md-portal { --md-card-pad: var(--md-space-4); }
  .md-portal-head { height: auto; }
  .md-portal-head-inner { flex-wrap: wrap; gap: var(--md-space-1) var(--md-space-3); padding: var(--md-space-3) var(--md-space-4) 0; }
  .md-portal-nav { order: 3; flex: 1 0 100%; margin: 0 calc(var(--md-space-4) * -1); padding: 0 var(--md-space-6) var(--md-space-2) var(--md-space-3);
    -webkit-mask-image: linear-gradient(to right, var(--md-bg-page) calc(100% - var(--md-space-6)), transparent); mask-image: linear-gradient(to right, var(--md-bg-page) calc(100% - var(--md-space-6)), transparent); }
  .md-portal-tools { margin-left: auto; gap: var(--md-space-2); }
  .md-portal-head .md-logo { height: 22px; }
  .md-portal .md-balance { gap: var(--md-space-1-5); padding: 0 var(--md-space-2); }
  .md-portal-main { padding: var(--md-space-5) var(--md-space-4) var(--md-space-8); gap: var(--md-space-4); }
  .md-portal-account-label, .md-balance-label { display: none; }
  .md-portal-account > summary { width: var(--md-control-h); padding: 0; }
  .md-portal-account > summary .md-icon:last-child { display: none; }
  .md-portal-banner-inner { align-items: flex-start; flex-wrap: wrap; padding: var(--md-space-3) var(--md-space-4); }
  .md-portal-banner-inner > .md-portal-banner-actions { flex: 1 0 100%; flex-wrap: wrap; margin-left: 0; padding-left: var(--md-space-8); }
  .md-portal-leads { grid-template-columns: minmax(0, 1fr); }
  .md-portal-lead-card .md-spread { align-items: flex-start; flex-direction: column; }
  .md-portal-lead-price { align-items: flex-start; text-align: left; }
  .md-portal-complaints-table { display: none; }
  .md-portal-complaints-mobile { display: grid; }
}

/* Anmeldung und Registrierung: Formular links, Markenfläche rechts */
.md-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; min-height: 100dvh; background: var(--md-bg-surface); }
.md-auth-form { display: flex; flex-direction: column; padding: 32px 48px; gap: 32px; }
.md-auth-form > main { display: flex; flex: 1 0 auto; }
.md-auth-form-inner { width: 100%; max-width: 400px; margin: auto; display: grid; gap: 22px; }
.md-auth-form-inner > form { width: 100%; display: grid; gap: 22px; }
.md-auth--solo { grid-template-columns: minmax(0, 1fr); }
.md-auth-art { position: relative; margin: 12px; border-radius: 22px; overflow: hidden; background: var(--md-bg-art); display: grid; align-content: end; padding: 40px; gap: 16px; }
.md-auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.md-auth-art-caption { position: relative; max-width: 420px; padding: 20px 22px; border-radius: var(--md-radius-dialog); background: color-mix(in srgb, var(--md-bg-surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--md-shadow-2); display: grid; gap: 6px; }
.md-auth-divider { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--md-text-muted); }
.md-auth-divider::before, .md-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--md-line); }

/* Einrichtungs-Assistent: eigener Rahmen über dem Portal */
.md-wizard-overlay { overflow-y: auto; align-items: start; }
.md-wizard { width: min(760px, 100%); max-height: calc(100dvh - 48px); background: var(--md-bg-surface); border-radius: 22px; border: 1px solid var(--md-line); box-shadow: var(--md-shadow-3); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.md-wizard-head { padding: 22px 28px 18px; border-bottom: 1px solid var(--md-line-soft); display: grid; gap: 18px; }
.md-wizard-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--md-space-3); }
.md-wizard-title-row h2, .md-wizard-step-title, .md-wizard-done p { margin: 0; }
.md-wizard-body { padding: 26px 28px; display: grid; gap: 20px; overflow-y: auto; min-width: 0; }
/* Fusszeile wie im Stepper: links „Zurück“, Mitte „Schritt X von N“, rechts die
   Hauptaktion. Die Knopfgruppe loest sich ins Raster auf (display: contents),
   die DOM-Reihenfolge Zurück → Hauptaktion bleibt Tab-Reihenfolge. */
.md-wizard-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px var(--md-space-3); padding: 16px 28px; border-top: 1px solid var(--md-line-soft); background: var(--md-bg-subtle); }
.md-wizard-foot-main { display: contents; }
.md-wizard-foot-main > .md-btn { grid-row: 1; grid-column: 1; justify-self: start; }
.md-wizard-foot-main > .md-btn--primary { grid-column: 3; justify-self: end; }
.md-wizard-count { grid-row: 1; grid-column: 2; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.md-wizard-gate { grid-column: 1 / -1; margin: 0; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .md-wizard-body[data-motion] > * { animation: md-wizard-enter 240ms var(--md-ease) both; }
  .md-wizard-body[data-motion="back"] > * { animation-name: md-wizard-enter-back; }
}
@keyframes md-wizard-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes md-wizard-enter-back { from { opacity: 0; transform: translateY(-8px); } }
.md-wizard-done { display: grid; justify-items: center; gap: var(--md-space-3); padding: var(--md-space-6) 0; text-align: center; }
.md-wizard-done-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--md-success-bg); color: var(--md-success-fg); }
.md-wizard-conflict { color: var(--md-warning-fg); }
.md-legacy-delivery { min-width: 0; }
.md-onboarding-state { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--md-space-2); }
.md-checklist-title .md-icon { width: 16px; height: 16px; margin-right: var(--md-space-2); vertical-align: -3px; }
.md-delivery-section { min-width: 0; }
.md-delivery-section:focus { outline: 2px solid var(--md-focus); outline-offset: 2px; }
.md-delivery-form, .md-delivery-own, .md-delivery-mode { display: grid; gap: var(--md-space-3); }
.md-delivery-form[hidden], .md-delivery-section [data-delivery-view][hidden],
.md-delivery-section [data-delivery-own][hidden], .md-delivery-section [data-delivery-fields][hidden],
.md-legacy-delivery [data-delivery-fields][hidden] { display: none; }
.md-link-button { border: 0; padding: 0; background: transparent; color: var(--md-accent-fg); font: inherit; text-decoration: underline; cursor: pointer; }
.md-amount-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.md-amount-choices .md-choice { justify-content: center; text-align: center; padding: 14px 10px; }
.md-amount-choices .md-choice input { position: absolute; opacity: 0; pointer-events: none; }
.md-amount-choices .md-choice-title { justify-content: center; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Schmale Ansichten: alles einspaltig, Seitenleiste wird Kopfmenü
   ========================================================================== */
.md-mobile-nav-overlay { z-index: var(--md-z-drawer); }
@media (max-width: 1100px) {
  .md-detail { grid-template-columns: minmax(0, 1fr); }
  .md-detail-aside, .md-detail .md-sticky { position: static; }
}
@media (max-width: 860px) {
  .md-app { grid-template-columns: minmax(0, 1fr); }
  .md-app > .md-sidebar { display: none; }
  .md-mobile-nav-trigger { display: inline-flex; }
  .md-topbar { padding-inline: var(--md-space-3); gap: var(--md-space-2); }
  .md-content { padding: var(--md-space-4); }
  .md-search-trigger { min-width: 0; }
  .md-account-label { display: none; }
  .md-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-stats .md-stat:nth-child(odd) { border-left: 0; }
  .md-stats .md-stat:nth-child(n + 3) { border-top: 1px solid var(--md-line-soft); }
  .md-form-grid { grid-template-columns: minmax(0, 1fr); }
  .md-kv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .md-kv dd { margin-bottom: 10px; }
  .md-auth { grid-template-columns: minmax(0, 1fr); }
  .md-auth-art { display: none; }
  .md-versions { grid-template-columns: minmax(0, 1fr); }
  .md-versions > .md-icon { transform: rotate(90deg); justify-self: center; }
  .md-amount-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-mailpreview iframe { height: 440px; }
}
@media (max-width: 480px) {
  .md-wizard-overlay { padding: var(--md-space-3); }
  .md-wizard { max-height: calc(100dvh - 24px); border-radius: var(--md-radius-dialog); }
  .md-wizard-head, .md-wizard-body, .md-wizard-foot { padding-inline: var(--md-space-4); }
  .md-wizard .md-stepper-step { padding-inline: 2px; }
  /* Einspaltig in DOM-Reihenfolge: Zaehler, Zurück, Hauptaktion, Sperrgrund */
  .md-wizard-foot { grid-template-columns: minmax(0, 1fr); }
  .md-wizard-foot-main > .md-btn, .md-wizard-foot-main > .md-btn--primary, .md-wizard-count { grid-row: auto; grid-column: 1; justify-self: stretch; }
  .md-wizard-count { text-align: center; }
  .md-wizard-gate { text-align: left; }
  .md-onboarding-state { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 520px) {
  .md-topbar .md-search-trigger .md-kbd { display: none; }
  .md-topbar .md-search-trigger { width: auto; flex: 1; }
  .md-topbar .md-env > span { display: none; }
  .md-topbar .md-env { width: 28px; padding: 0; justify-content: center; }
  .md-account > summary { padding: 0; width: var(--md-control-h-sm); }
  .md-account > summary > .md-icon { display: none; }
  .md-content { padding-inline: var(--md-space-3); }
  .md-command-overlay { padding: var(--md-space-2); }
  .md-cmdk-foot { flex-wrap: wrap; }
}

/* --- Wochenraster, Variante „erlaubte Fenster" (Team-Zeitplan) -------------- */
.md-week-block--on { background: var(--md-success-bg); box-shadow: inset 0 0 0 1px var(--md-success-line); color: var(--md-success-fg); }

/* --- Team-Anmeldung (Admin). Den Google-Knopf rendert Google (GIS) selbst;
       .md-google-btn ist nur der Platzhalter für Vorschau und Ladezustand. --- */
.md-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background: var(--md-bg-page); }
.md-login-card { width: min(420px, 100%); display: grid; gap: 20px; padding: 32px; border-radius: var(--md-radius-dialog); background: var(--md-bg-surface); border: 1px solid var(--md-line); box-shadow: var(--md-shadow-2); }
.md-login-card .md-logo { height: 28px; }
.md-login-card > .md-badge { justify-self: start; }
.md-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: var(--md-radius-control);
  border: 1px solid var(--md-line-strong); background: var(--md-bg-surface); color: var(--md-text-strong); font-weight: 600; cursor: pointer;
}
.md-google-btn:hover { background: var(--md-bg-subtle); }

/* --- Buyer-Portal: ergaenzende Zustaende der Zugangsseiten (HAN-6007) ----- */
/* Aufklappbarer Bereich (Token-Anmeldung) */
.md-auth-details {
  margin-top: var(--md-space-2);
  border-top: 1px solid var(--md-line);
  padding-top: var(--md-space-3);
}
.md-auth-details summary {
  cursor: pointer;
  color: var(--md-text-muted);
  list-style: none;
  padding: var(--md-space-1) 0;
}
.md-auth-details summary::-webkit-details-marker {
  display: none;
}
.md-auth-details summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--md-dur-1) var(--md-ease);
}
.md-auth-details[open] summary::before {
  transform: rotate(90deg);
}
.md-auth-details-body {
  margin-top: var(--md-space-3);
  display: grid;
  gap: var(--md-space-3);
}
/* Ladezustand */
.md-auth-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--md-space-4);
  padding: var(--md-space-12) 0;
  color: var(--md-text-muted);
}
.md-auth-loading .md-spinner {
  width: var(--md-space-8);
  height: var(--md-space-8);
  border: var(--md-space-0-5) solid var(--md-line);
  border-top-color: var(--md-accent);
  border-radius: 50%;
  animation: md-spin calc(var(--md-dur-3) * 3) linear infinite;
}
@keyframes md-spin {
  to { transform: rotate(360deg); }
}
/* Checkbox-Gruppe (Leistungen) */
.md-check-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md-space-2) var(--md-space-4);
}
@media (max-width: 480px) {
  .md-check-group {
    grid-template-columns: 1fr;
  }
}

/* Instanz: Pfad-Weiterleitungen im großen Kit-Dialog. */
.md-redirect-rows { display: grid; gap: 12px; }
.md-redirect-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(84px,104px) auto; gap: 12px; align-items: end; min-width: 0; }
.md-redirect-row .md-field { min-width: 0; }
@media (max-width: 720px) { .md-redirect-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }