/* ─────────────────────────────────────────────────────────────────────────────
 * Kundenkonto-Portal — Auth-/Konto-Seiten (MYW-1104 P4)
 * Baut auf tokens.css/site.css auf. Kein externes Asset; JS ist self-hosted
 * (portal.js) und CSP-konform (script-src 'self').
 * ──────────────────────────────────────────────────────────────────────────── */

.portal-main {
  min-height: 70vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4.5rem) var(--wb-gutter);
}

.portal-card {
  width: 100%;
  max-width: 26rem;
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-sm);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.portal-card.wide { max-width: 40rem; }

.portal-card h1 { font-size: 1.6rem; margin-bottom: 0.35em; }
.portal-card .sub { color: var(--wb-muted); margin-bottom: 1.5rem; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 500; margin-bottom: 0.35rem; }
.field input,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--wb-ink);
  background: var(--wb-paper);
  border: 1px solid var(--wb-border-dark);
  border-radius: var(--wb-radius-sm);
}
/* Options-Eingaben (Radio/Checkbox) dürfen NICHT die volle Feldbreite bekommen —
   sonst sprengt der Button die Zeile und das Label rutscht weg (MYW-1240). */
.field input[type="radio"],
.field input[type="checkbox"] { width: auto; }
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--wb-orange);
  outline-offset: 1px;
  border-color: var(--wb-orange);
}
.field .hint { color: var(--wb-muted); font-size: 0.85rem; margin: 0.3rem 0 0; }
.field label .hint-inline { color: var(--wb-muted); font-weight: 400; }
/* MYW-1289 — zwei Felder pro Zeile (Vor-/Nachname, Straße+Hausnr., PLZ+Ort).
   Auf schmalen Viewports untereinander (kein horizontales Gedränge). */
.field-row { display: flex; gap: 0.8rem; }
.field-row > .field { flex: 1 1 0; margin-bottom: 1.1rem; }
.field-row > .field-grow { flex: 3 1 0; }
.field-row > .field-narrow { flex: 1 1 0; }
@media (max-width: 480px) { .field-row { flex-direction: column; gap: 0; } }

.portal-actions { margin-top: 1.4rem; }
.portal-actions .btn { width: 100%; justify-content: center; }

.portal-links { margin-top: 1.25rem; font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }

.notice {
  border-radius: var(--wb-radius-sm);
  padding: 0.8rem 0.95rem;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.notice[hidden] { display: none; }
.notice.error { background: #fdecea; border-color: var(--wb-bad); color: #7a1c12; }
.notice.ok { background: var(--wb-orange-soft); border-color: var(--wb-orange); color: var(--wb-orange-ink); }
.notice.info { background: var(--wb-paper-2); border-color: var(--wb-border-dark); color: var(--wb-ink); }

.konto-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.konto-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1rem; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  background: var(--wb-paper);
}
.konto-row .k { color: var(--wb-muted); }
.konto-row .v { font-family: var(--wb-font-mono); text-align: right; }
.mono { font-family: var(--wb-font-mono); }

/* MYW-1246 (MYW-1240 P3) — Konto-Navigation: vier Bereiche (Tabs) statt Scroll-Seite */
.konto-nav {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 0.25rem 0 1rem; padding: 0.3rem;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  background: var(--wb-paper);
}
.konto-nav-item {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; font: inherit; font-weight: 500;
  color: var(--wb-muted); background: transparent; border: 0;
  padding: 0.55rem 0.9rem; border-radius: var(--wb-radius-sm);
}
.konto-nav-item:hover { color: var(--wb-ink); background: var(--wb-paper-2); }
.konto-nav-item.is-active { color: var(--wb-orange-ink); background: var(--wb-orange-soft); }
.konto-nav-item:focus-visible { outline: 2px solid var(--wb-orange); outline-offset: 1px; }
.konto-view[hidden] { display: none; }
.konto-view > .konto-block:first-child { margin-top: 0; }

/* MYW-1249 (Hannes-Reopen) — Support-Unter-Navigation (Tickets | Support-Pakete).
   Eine Ebene unter der Haupt-Navigation: kompakter, ohne umgebenden Rahmen. */
.konto-subnav {
  border: 0; background: transparent; padding: 0;
  margin: 0 0 0.5rem; gap: 0.2rem;
  border-bottom: 1px solid var(--wb-border); border-radius: 0;
}
.konto-subnav .konto-nav-item { padding: 0.4rem 0.75rem; font-size: 0.95rem; }
.konto-subview[hidden] { display: none; }
.konto-subview > .konto-block:first-child { margin-top: 0; }

/* ── MYW-1276 (MYW-1240) — Kundenportal App-Shell: feste linke Seitenleiste ─────
   Vertikale Haupt-Navigation links, Inhalt rechts. Auf schmalen Viewports klappt
   die Seitenleiste als Off-canvas über den Burger ein (portal.js). */
.portal-shell { display: flex; align-items: stretch; min-height: 100vh; }

.portal-sidebar {
  flex: 0 0 15.5rem; width: 15.5rem; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.1rem 0.9rem;
  background: var(--wb-card); border-right: 1px solid var(--wb-border);
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
}
.portal-sidebar-head { padding: 0.3rem 0.55rem 0.9rem; border-bottom: 1px solid var(--wb-border); }

/* MYW-1286: Marken-Lockup wie die Manager-AppShell — CI-Signet (dunkles Quadrat)
   + zweizeiliger Text (Name fett-Teil + leiser Untertitel). Auf der weißen
   Seitenleiste ist der dunkle Mark klar sichtbar (das alte helle Lockup nicht). */
.portal-brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--wb-ink); }
.portal-brand:hover { text-decoration: none; }
.portal-brand-mark { width: 1.9rem; height: 1.9rem; flex: none; border-radius: var(--wb-radius-sm); display: block; }
.portal-brand-text { display: grid; line-height: 1.2; min-width: 0; }
.portal-brand-name {
  font-family: var(--wb-font-display); font-size: 0.95rem; font-weight: 500;
  color: var(--wb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portal-brand-name strong { font-weight: 700; }
.portal-brand-sub { font-size: 0.78rem; color: var(--wb-muted); }

.portal-nav { display: flex; flex-direction: column; }

/* Haupt-Navigation in der Sidebar: vertikale Liste statt Pill-Leiste. */
.portal-sidebar .konto-nav {
  flex-direction: column; flex-wrap: nowrap; gap: 0.15rem;
  margin: 0; padding: 0; border: 0; background: transparent;
}
/* MYW-1286: Nav-Zeilen wie im Manager — Icon + Label, ganze Zeile als Fläche.
   Ruhezustand leise (muted), aktiv = gefüllte Orange-Soft-Fläche mit Orange-Text
   (kein Links-Balken mehr — 1:1 die Manager-Menüoptik). */
.portal-sidebar .konto-nav-item {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; text-align: left; color: var(--wb-secondary);
  padding: 0.55rem 0.7rem; border-radius: var(--wb-radius-sm);
}
.konto-nav-icon { flex: none; width: 1.15rem; height: 1.15rem; opacity: 0.85; }
.konto-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar .konto-nav-item:hover { color: var(--wb-ink); background: var(--wb-paper-2); }
.portal-sidebar .konto-nav-item.is-active {
  color: var(--wb-orange-ink); background: var(--wb-orange-soft); font-weight: 600;
}
.portal-sidebar .konto-nav-item.is-active .konto-nav-icon { opacity: 1; color: var(--wb-orange); }

.portal-sidebar-foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--wb-border); }
/* MYW-1286: Nutzer-Zeile im Fuß (Identität links, Abmelden-Icon rechts) — Manager-CI. */
.portal-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.35rem; }
.portal-user-id { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.portal-user-name { font-size: 0.82rem; font-weight: 500; color: var(--wb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-user-role { font-size: 0.76rem; color: var(--wb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-logout {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--wb-radius-sm);
  color: var(--wb-muted); text-decoration: none;
}
.portal-logout:hover { color: var(--wb-ink); background: var(--wb-paper-2); }

.portal-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* MYW-1286: klebende Topbar wie im Manager (border-b, halbtransparenter Grund,
   Backdrop-Blur) — die Bereichs-Überschrift bleibt beim Scrollen sichtbar. */
.portal-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--wb-border);
  background: color-mix(in srgb, var(--wb-card) 92%, transparent);
  backdrop-filter: blur(6px);
}
.portal-topbar h1 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.55rem); }
.portal-app-main { padding: clamp(1.25rem, 4vw, 2.25rem); width: 100%; max-width: 62rem; box-sizing: border-box; }

.portal-burger {
  display: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  color: var(--wb-ink); background: transparent;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
}
.portal-burger:hover { background: var(--wb-paper-2); }
.portal-scrim { display: none; }

@media (max-width: 48rem) {
  .portal-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    z-index: 60; width: 16rem; flex-basis: 16rem;
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: var(--wb-shadow);
  }
  body.portal-nav-open .portal-sidebar { transform: translateX(0); }
  .portal-burger { display: inline-flex; }
  .portal-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(26, 25, 23, 0.4); }
  .portal-scrim[hidden] { display: none; }
}

/* Konto-Übersicht (P4.2, MYW-1109) — Instanzen/Lizenzen/Rechnungen */
/* MYW-1282 (MYW-1240): Angleichung an das Manager-CI-Vokabular — jede Sektion ist
   eine weiße Karte auf hellem (Papier-)Grund, wie im Manager. Die Marken-Orange
   bleibt Interaktion (Buttons/Akzente); Status trägt Farbe über Pills/Kacheln. */
.konto-block {
  margin-top: 1.25rem;
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-sm);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.konto-block > h2 {
  font-size: 1.1rem; margin: 0 0 0.4rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--wb-border);
}

/* MYW-1282 — Status-Pills (Punkt + Wort) 1:1 aus dem Manager-CI (common.jsx
   StatusBadge: border-<tone>/30, bg-<tone>/10, text-<tone>). Weiche Tints hier
   fest hinterlegt (kein color-mix) für breite Browser-Kompatibilität im Portal.
   Grün („online"/„aktiv"/„bezahlt") signalisiert Zustand, Orange bleibt Marke. */
.wb-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; vertical-align: middle;
  padding: 0.1rem 0.55rem; border-radius: var(--wb-radius-pill);
  font-size: 0.78rem; font-weight: 500; line-height: 1.5;
  border: 1px solid transparent;
}
.wb-pill-dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor; flex: none; }
.wb-pill-ok      { color: var(--wb-ok);        background: #eaf3ec; border-color: #cfe2d5; }
.wb-pill-warn    { color: var(--wb-warn);      background: #fdf4e3; border-color: #efdfbc; }
.wb-pill-bad     { color: var(--wb-bad);       background: #fdecea; border-color: #f4cdc8; }
.wb-pill-neutral { color: var(--wb-secondary); background: var(--wb-paper-2); border-color: var(--wb-border); }

/* MYW-1282 — Stat-Kacheln (Punkt + große Zahl) 1:1 aus dem Manager-CI
   (common.jsx StatTile). Kacheln stehen als eigene Felder auf der weißen
   Sektions-Karte; die Zahl ist groß, fett, tabellen-bündig (tabular-nums). */
.konto-stats {
  display: grid; gap: 0.8rem; margin: 0.4rem 0 0.2rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.konto-stat {
  padding: 0.85rem 1rem;
  background: var(--wb-paper); border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius);
}
.konto-stat-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.74rem; font-weight: 600; color: var(--wb-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.konto-stat-dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--wb-muted); flex: none; }
.konto-stat.is-ok   .konto-stat-dot { background: var(--wb-ok); }
.konto-stat.is-warn .konto-stat-dot { background: var(--wb-warn); }
.konto-stat.is-bad  .konto-stat-dot { background: var(--wb-bad); }
.konto-stat-value {
  margin-top: 0.3rem; font-size: 1.85rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--wb-ink);
  font-family: var(--wb-font-mono); font-variant-numeric: tabular-nums;
}
.konto-stat-value .konto-stat-unit { font-size: 0.9rem; font-weight: 500; color: var(--wb-muted); margin-left: 0.25rem; font-family: var(--wb-font-body); }
.konto-block .konto-grid { margin-top: 0.9rem; }
.konto-empty { color: var(--wb-muted); margin: 0.9rem 0 0; }
/* MYW-1264 (MYW-1240 D): First-Login-Aufforderung — hervorgehobener Willkommens-
   Banner über der Tarifauswahl im Bereich „Instanzen & Lizenzen". */
.konto-onboarding {
  margin-top: 0; padding: 1rem 1.2rem;
  background: var(--wb-orange-soft); border: 1px solid var(--wb-orange);
  border-radius: var(--wb-radius-sm);
}
.konto-onboarding > h2 { border-bottom: none; padding-bottom: 0; color: var(--wb-orange-ink); }
.konto-onboarding-lead { margin: 0.3rem 0 0; color: var(--wb-orange-ink); }
/* MYW-1269 (MYW-1240 H): primärer „Jetzt Instanz erstellen"-Knopf im Banner. */
.konto-onboarding-actions { margin: 0.9rem 0 0; }
.konto-onboarding-actions .btn { min-width: 14rem; }
.konto-instance {
  margin-top: 1.1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  background: var(--wb-paper);
}
.konto-instance > h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.konto-instance .konto-grid { gap: 0.5rem; margin-top: 0.6rem; }
.konto-instance .konto-row { padding: 0.5rem 0.7rem; }

.konto-table { width: 100%; border-collapse: collapse; margin-top: 0.9rem; font-size: 0.93rem; }
.konto-table th, .konto-table td {
  text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--wb-border);
}
/* MYW-1282 — Kopfzeile wie im Manager: leises, kompaktes Label über der Tabelle. */
.konto-table th {
  color: var(--wb-muted); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.konto-table tbody tr:last-child td { border-bottom: 0; }
/* MYW-1286: leiser Zeilen-Hover wie in den Manager-Tabellen. */
.konto-table tbody tr:hover td { background: var(--wb-paper-2); }
/* MYW-1282 — Zahlen-Spalten monospaced + tabellen-bündig (Beträge fluchten). */
.konto-table td.num, .konto-table th.num {
  text-align: right; font-family: var(--wb-font-mono); font-variant-numeric: tabular-nums;
}
.badge {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.78rem; font-family: var(--wb-font-body); vertical-align: middle;
}
.badge-open { background: var(--wb-orange-soft); border: 1px solid var(--wb-orange); color: var(--wb-orange-ink); }

/* MYW-1110 (P4.3) — Buchen/Kündigen-Aktionen je Instanz + „Meine Anträge". */
.konto-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.konto-instance .btn { font-size: 0.9rem; padding: 0.5rem 1rem; }
.konto-instance .btn:not(.btn-danger) {
  background: transparent; color: var(--wb-ink); border-color: var(--wb-border);
}
.konto-instance .btn:not(.btn-danger):hover { background: var(--wb-paper-2); }
.btn-danger { background: transparent; color: #b42318; border-color: #f0b4ae; }
.btn-danger:hover { background: #fdf1ef; color: #912018; }
.konto-change {
  margin-top: 0.8rem; padding: 0.8rem 0.9rem;
  border: 1px dashed var(--wb-border); border-radius: var(--wb-radius-sm);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
/* MYW-1262: „Tarif ändern" bleibt eingeklappt bis zum Klick. Das `display: flex`
   oben überschreibt sonst das [hidden]-Attribut (UA-Default display:none), sodass
   der Aufklapper immer offen wäre — deshalb hier explizit ausblenden. */
.konto-change[hidden] { display: none; }

/* MYW-1262: Kündigungs-Dialog an die CI angepasst — ein zusammenhängender Block
   (warme Papierfläche, Werkbank-Rahmen) statt loser Textabsätze. Der Monatsende-
   Hinweis ist der Akzent oben, die Teardown-Warnung darunter zurückhaltender. */
.konto-cancel {
  margin-top: 0.8rem; padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  border: 1px solid var(--wb-border); border-left: 3px solid var(--wb-orange);
  border-radius: var(--wb-radius-sm); background: var(--wb-paper-2);
}
.konto-cancel[hidden] { display: none; }
.konto-cancel-period {
  margin: 0; padding: 0.6rem 0.75rem;
  border-radius: var(--wb-radius-sm); background: var(--wb-orange-soft);
  color: var(--wb-orange-ink); font-size: 0.94rem; line-height: 1.45;
}
.konto-cancel-period strong { color: var(--wb-orange-ink); }
.konto-cancel-warn { margin: 0; color: var(--wb-secondary); font-size: 0.9rem; line-height: 1.45; }
.konto-cancel-warn strong { color: var(--wb-bad); }
/* MYW-1289 (Reopen): „Gekündigt zum …"-Kennzeichnung neben dem Instanz-Namen. */
.konto-badge {
  display: inline-block; vertical-align: middle; margin-left: 0.55rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.konto-badge-cancel { background: #fdecea; border: 1px solid var(--wb-bad); color: #7a1c12; }
.konto-cancel-backup { margin: 0; color: var(--wb-muted); font-size: 0.88rem; }
.konto-cancel-download { align-self: flex-start; }
.konto-cancel-confirm { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.konto-cancel-confirm code {
  padding: 0.1rem 0.35rem; border-radius: var(--wb-radius-sm);
  background: var(--wb-card); border: 1px solid var(--wb-border);
  font-family: var(--wb-font-mono); font-size: 0.9em;
}
.konto-cancel-confirm input {
  width: 100%; font: inherit; padding: 0.45rem 0.55rem;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  background: var(--wb-card); color: var(--wb-ink);
}
.konto-plan-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; }
.konto-plan-label select {
  font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); background: var(--wb-paper); color: var(--wb-ink);
}
.konto-actions-note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--wb-muted); }

/* MYW-1240 P6 (MYW-1249) — Support-Pakete als Preis-Karten (Optik wie die
   Tarif-Karten in P5). Responsives Karten-Raster; Kauf schreibt sofort gut. */
.konto-cards {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.konto-card {
  display: flex; flex-direction: column; padding: 1.1rem 1.2rem;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  background: var(--wb-paper);
}
.konto-card-title { margin: 0; font-size: 1rem; }
.konto-card-price {
  margin: 0.5rem 0 0; font-size: 1.6rem; font-weight: 700; color: var(--wb-ink);
  font-family: var(--wb-font-body);
}
.konto-card-quota { margin: 0.15rem 0 0; color: var(--wb-muted); font-size: 0.92rem; }
.konto-card-desc { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--wb-ink); }
.konto-card .konto-actions { margin-top: auto; padding-top: 0.9rem; }
.konto-card .btn { width: 100%; justify-content: center; }

/* MYW-1113 (P6c) — Support-Portal: Ticketing (Erstellen-Formular + Verlauf). */
.konto-ticket-new {
  margin-bottom: 1rem; padding: 0.9rem 1rem;
  border: 1px dashed var(--wb-border); border-radius: var(--wb-radius-sm);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem;
}
.konto-ticket-new h3 { flex-basis: 100%; margin: 0 0 0.2rem; font-size: 1rem; }
.konto-ticket-new .konto-plan-label { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
.konto-ticket-new input[type="text"], .konto-ticket-new textarea {
  font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); background: var(--wb-paper); color: var(--wb-ink);
  min-width: 16rem; max-width: 100%;
}
.konto-ticket-new textarea { min-width: 24rem; resize: vertical; }
.btn-small { font-size: 0.85rem; padding: 0.35rem 0.75rem; }
.konto-ticket-thread { padding: 0.6rem 0.2rem; }
.konto-msgs { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.8rem; }
.konto-msg {
  padding: 0.5rem 0.7rem; border-radius: var(--wb-radius-sm);
  border: 1px solid var(--wb-border); background: var(--wb-paper);
}
.konto-msg-anbieter { background: var(--wb-paper-2); }
.konto-msg-head { font-size: 0.8rem; color: var(--wb-muted); margin-bottom: 0.2rem; }
.konto-msg-body { font-size: 0.92rem; }
.konto-ticket-thread textarea {
  font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); background: var(--wb-paper); color: var(--wb-ink);
  width: 100%; max-width: 32rem; resize: vertical;
}

/* MYW-1278 — Ticket per Klick in eine eigene Detailseite öffnen (kein Aufklappen). */
.konto-ticket-row { cursor: pointer; }
.konto-ticket-row:hover, .konto-ticket-row:focus-visible { background: var(--wb-paper-2); outline: none; }
.konto-ticket-row .konto-ticket-open { text-align: right; color: var(--wb-muted); font-size: 1.1rem; line-height: 1; }
.konto-ticket-detailhead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 0.9rem;
}
.konto-ticket-detailhead h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: baseline; gap: 0.5rem; }
.konto-ticket-ref { font-family: var(--wb-font-mono); font-size: 0.8rem; color: var(--wb-muted); }
.konto-ticket-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.9rem 0 0;
}
.konto-ticket-meta div { display: grid; gap: 0.1rem; }
.konto-ticket-meta dt { font-size: 0.78rem; color: var(--wb-muted); margin: 0; }
.konto-ticket-meta dd { margin: 0; font-size: 0.92rem; }

/* MYW-1160b — „Weitere Instanz beantragen": schlankes Antragsformular im Konto. */
.konto-new-instance {
  margin-top: 1rem; padding: 0.9rem 1rem;
  border: 1px dashed var(--wb-border); border-radius: var(--wb-radius-sm);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem;
}
.konto-new-instance .konto-ni-intro { flex-basis: 100%; margin: 0; color: var(--wb-muted); }
.konto-new-instance .konto-plan-label { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
.konto-new-instance .konto-ni-full { flex-basis: 100%; }
.konto-new-instance input[type="text"], .konto-new-instance textarea {
  font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); background: var(--wb-paper); color: var(--wb-ink);
  min-width: 18rem; max-width: 100%;
}
.konto-new-instance .konto-ni-full input[type="text"], .konto-new-instance textarea { width: 100%; }
.konto-new-instance textarea { resize: vertical; }
.konto-ni-modules {
  flex-basis: 100%; margin: 0; padding: 0.6rem 0.8rem;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
}
.konto-ni-modules legend { padding: 0 0.3rem; color: var(--wb-muted); font-size: 0.9rem; }
.konto-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; }
.konto-new-instance .konto-actions { flex-basis: 100%; margin-top: 0.2rem; }

/* MYW-1242 — Intake-Weggabelung (Code-Weg vs. Interessent-Weg). */
#intake-fork {
  margin: 0; padding: 0.6rem 0.8rem;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  display: flex; flex-direction: column; gap: 0.45rem;
}
#intake-fork legend { padding: 0 0.3rem; color: var(--wb-muted); font-size: 0.9rem; }
#intake-fork .choice { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }

/* MYW-1248 (MYW-1240 P5) — Tarif-Auswahl als Preis-Karten (Screenshot-Optik). Ersetzt
   das frühere Tarif-Dropdown/-Formular. Die Karten speisen sich aus den buchbaren
   Vorlagen (MYW-1245) und decken Tarifwechsel wie Instanz-Buchung ab. */
.konto-cards-intro { margin: 0 0 0.8rem; font-size: 0.92rem; color: var(--wb-muted); }
.konto-cards-wrap { flex-basis: 100%; margin-top: 0.4rem; }
/* Der Tarifwechsel-Aufklapper (.konto-change) ist ein Flex-Container — die Karten-
   Bausteine sollen darin über die volle Breite stehen (nicht nebeneinander). */
.konto-change > .konto-cards,
.konto-change > .konto-cards-intro,
.konto-change > .konto-actions-note { flex-basis: 100%; width: 100%; }
.konto-cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.konto-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--wb-paper);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow-sm);
}
.konto-card.is-current { border-color: var(--wb-orange); box-shadow: 0 0 0 1px var(--wb-orange); }
.konto-card-badge {
  position: absolute; top: 0.8rem; right: 0.8rem;
  padding: 0.05rem 0.5rem; border-radius: var(--wb-radius-pill);
  font-size: 0.72rem; font-weight: 600;
  background: var(--wb-orange-soft); color: var(--wb-orange-ink); border: 1px solid var(--wb-orange);
}
.konto-card-title { margin: 0; font-size: 1.05rem; color: var(--wb-ink); }
.konto-card-subtitle { margin: 0; font-size: 0.88rem; color: var(--wb-muted); }
.konto-card-price { margin: 0.2rem 0; font-size: 1.35rem; font-weight: 700; color: var(--wb-ink); }
.konto-card-price-unit { font-size: 0.85rem; font-weight: 400; color: var(--wb-muted); }
.konto-card-price-sub { display: block; font-size: 0.82rem; font-weight: 400; color: var(--wb-muted); }
.konto-card-features { margin: 0.1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.konto-card-features li {
  position: relative; padding-left: 1.2rem; font-size: 0.9rem; color: var(--wb-ink);
}
.konto-card-features li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--wb-orange); font-weight: 700;
}
/* MYW-1245 (Reopen): Preis pro Mitarbeiter (Fixbetrag) + nutzungsabhängige Posten. */
.konto-card-peremp { margin: 0.1rem 0; font-size: 0.95rem; font-weight: 600; color: var(--wb-ink); }
.konto-card-usage { margin: 0.3rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.konto-card-usage li {
  position: relative; padding-left: 1.2rem; font-size: 0.82rem; color: var(--wb-muted);
}
.konto-card-usage li::before {
  content: "≈"; position: absolute; left: 0; top: 0; color: var(--wb-muted); font-weight: 700;
}
.konto-card-foot { margin-top: auto; padding-top: 0.4rem; }
/* Der Karten-CTA bleibt akzentuiert, auch innerhalb einer .konto-instance (deren
   generische .btn-Regel würde ihn sonst entfärben). */
.konto-card .konto-card-cta { width: 100%; justify-content: center; font-size: 0.92rem; }
.konto-instance .konto-card-cta.btn-primary,
.konto-card-cta.btn-primary { background: var(--wb-orange); color: #fff; border-color: var(--wb-orange); }
.konto-instance .konto-card-cta.btn-primary:hover,
.konto-card-cta.btn-primary:hover { background: var(--wb-orange-hover); color: #fff; }
.konto-card-cta[disabled] { opacity: 0.65; cursor: default; }

/* ─────────────────────────────────────────────────────────────────────────────
 * MYW-1255 (MYW-1240 P9) — Provisionierungs-Warteseite + Zugangsdaten-Reveal.
 * Während des (synchronen) create-instance-Requests liegt ein Overlay über dem
 * Portal ("Ihre Instanz wird eingerichtet …"). Ist die Instanz bereit, zeigt es
 * einmalig URL + Benutzer + Passwort. Rein additiv, keine externen Abhängigkeiten.
 * ──────────────────────────────────────────────────────────────────────────── */
.wb-provision-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--wb-gutter);
  background: rgba(26, 25, 23, 0.55);
  backdrop-filter: blur(2px);
}
.wb-provision-overlay[hidden] { display: none; }
.wb-provision-card {
  width: 100%; max-width: 34rem;
  background: var(--wb-card); color: var(--wb-ink);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow);
  padding: 2rem 1.9rem;
}
.wb-provision-card h2 {
  font-family: var(--wb-font-display); font-size: 1.35rem; margin: 0 0 0.4rem;
}
.wb-provision-lead { color: var(--wb-secondary); font-size: 0.95rem; margin: 0 0 1.2rem; }
.wb-provision-wait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; padding: 0.6rem 0; }
.wb-spinner {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 3px solid var(--wb-orange-soft); border-top-color: var(--wb-orange);
  animation: wb-spin 0.9s linear infinite;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wb-spinner { animation-duration: 2.2s; } }
.wb-provision-steps { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--wb-muted); text-align: left; }
.wb-provision-steps li { position: relative; padding-left: 1.3rem; margin: 0.2rem 0; }
.wb-provision-steps li::before { content: "•"; position: absolute; left: 0.2rem; color: var(--wb-orange); }

/* Reveal (bereit) */
.wb-cred-warn {
  background: var(--wb-orange-soft); border: 1px solid var(--wb-orange);
  color: var(--wb-orange-ink); border-radius: var(--wb-radius-sm);
  padding: 0.7rem 0.85rem; font-size: 0.88rem; margin: 0 0 1.1rem;
}
.wb-cred-list { display: flex; flex-direction: column; gap: 0.7rem; margin: 0 0 1.3rem; }
.wb-cred-row { display: flex; flex-direction: column; gap: 0.3rem; }
.wb-cred-row > span.wb-cred-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wb-muted); }
.wb-cred-value {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--wb-paper-2); border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); padding: 0.55rem 0.7rem;
}
.wb-cred-value code {
  font-family: var(--wb-font-mono); font-size: 0.92rem; color: var(--wb-ink);
  word-break: break-all; flex: 1;
}
.wb-cred-copy {
  flex: none; font-size: 0.78rem; padding: 0.3rem 0.6rem; cursor: pointer;
  background: var(--wb-card); color: var(--wb-orange-ink);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
}
.wb-cred-copy:hover { background: var(--wb-orange-soft); }
.wb-provision-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.wb-provision-actions .btn { flex: 1; justify-content: center; }
.wb-provision-error { color: #7a1c12; background: #fdecea; border: 1px solid var(--wb-bad); border-radius: var(--wb-radius-sm); padding: 0.8rem 0.95rem; font-size: 0.92rem; margin: 0 0 1.2rem; }

/* MYW-2776 (#3713) — AVV-Zustimmung auf „Instanz anfragen". */
.avv-consent .choice { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.avv-consent .choice input[type="checkbox"] { margin-top: 0.2rem; flex: none; }
/* MYW-2821 (#3768) — AVV mit den Daten des Kunden im Konto */
.avv-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; }
.avv-text { max-height: 28rem; overflow-y: auto; border: 1px solid var(--wb-border); border-radius: 8px; padding: 0.75rem 1rem; margin: 1rem 0; background: #fff; font-size: 0.92rem; }
.avv-text h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.avv-text table { border-collapse: collapse; font-size: 0.85rem; }
.avv-text td, .avv-text th { border: 1px solid var(--wb-border); padding: 0.25rem 0.4rem; vertical-align: top; }
.avv-accept, .avv-person { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.avv-accept .konto-plan-label { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
.avv-accept input[type="text"] {
  font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); background: var(--wb-paper); color: var(--wb-ink);
  width: 100%; max-width: 28rem;
}
.avv-accept .choice { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.avv-accept .choice input[type="checkbox"] { margin-top: 0.2rem; flex: none; }
.avv-fassung summary { cursor: pointer; font-weight: 600; margin-bottom: 0.4rem; }