/* APPICS Pro / K02 Stage — Sprint 0.
   Stempel 0913befunde (KIMI-PRO-NIKKI-BEFUNDE-20260913, 13.09.): .pro-requirement-note.
   Pixel evidence: docs/pro/K02-MEASUREMENTS.md (+ reproducible measurement script).
   Raster source: 1672 x 941; coordinates below use zero-based (x, y).
   #8739C4 + rays: explicit task direction from the top, NOT a sampled header.
   Font family/size cannot be recovered exactly from a raster: Inter follows app.css;
   CSS type sizes are adaptations of measured glyph bounds. Existing styles stay intact.
   Stempel 0915politur (KIMI-NIKKI-ERSTBESUCH-POLITUR-20260915, 15.09.): <=700px ist
   die Nav-Suche 132 px statt 200 px und schrumpfbar — sie frass live vermessen
   ueber die Haelfte der 366-px-Querleiste (nur 'Profile' ohne Wischen sichtbar).
   Stempel 0923b713 (KIMI-B713-AUFLAGEN-20260923, 23.09.): B4 — .pro-source-chip
   bekommt background var(--pro-bg) (Kontrast 3,85:1 -> ~11,6:1 auf dunklem Grund). */
:root {
  --pro-stage: #8739c4;
  --pro-stage-ray: rgb(255 255 255 / 8%);
  --pro-bg: #0d131f;       /* S3 (1600,865) */
  --pro-panel: #141a27;    /* S3 (900,500) */
  --pro-rail: #121826;     /* S3 (100,520) */
  --pro-line: #2b3242;     /* S3 (285,500) */
  --pro-mint: #78ddd9;     /* S3 (1500,900), Save */
  --pro-mint-vip: #73e2d9; /* S1 (100,520), membership CTA */
  --pro-mint-soft: #8be2db;/* S2 (850,760), CTA */
  --pro-ink: #fafbfb;      /* S3 (300,142), headline */
  --pro-muted: #b9bdc5;    /* S3 (641,400), muted text */
  --pro-action-ink: #0d131f;
  --pro-font: var(--font, 'Inter', system-ui, sans-serif);
  /* H1 ink bounds 40/50px; subtitle 19px; section 15px; body 12–16px in S3. */
  --pro-type-display: 3.25rem;
  --pro-type-title: 1.5rem;
  --pro-type-section: 1.25rem;
  --pro-type-body: 1rem;
  --pro-type-label: .875rem;
  --pro-type-small: .75rem;
  --pro-leading-display: 1.08;
  --pro-leading-body: 1.55;
  /* Measured edge distances: S3 vertical 8px / horizontal 13px, S1 gap 12px.
     S2 panel edge -> glyph start 24px. 20/28px are added CSS spacing steps. */
  --pro-space-1: 8px;
  --pro-space-2: 12px;
  --pro-space-3: 20px;
  --pro-space-4: 24px;
  --pro-space-5: 28px;
  --pro-radius: 10px;
  --pro-control-height: 48px;
  --pro-focus: var(--pro-mint);
  --pro-motion: 160ms;
}
.sh-pro .main { max-width: 1480px; padding: 20px 28px 110px; animation: none; }
.sh-pro .topbar { margin-bottom: 20px; }
/* Pro Sprint 0 has no balance feed. Keep the account link, omit the shell's APX summary. */
.sh-pro .tb-apx { display: none; }
/* Readable prerequisites on mobile: Pro does not use the browse-shell bottom blur. */
body:has(.sh-pro)::after { content: none; }
.pro-page { background: var(--pro-bg); color: var(--pro-ink); font: var(--pro-type-body)/var(--pro-leading-body) var(--pro-font); border-radius: var(--pro-radius); overflow: clip; }
.pro-page *, .pro-profile-entry * { box-sizing: border-box; }
.pro-page h1, .pro-page h2, .pro-page h3 { text-wrap: balance; }
.pro-page p { max-width: 70ch; text-wrap: pretty; }
.pro-page a, .pro-page button, .pro-profile-entry a { transition: color var(--pro-motion), background-color var(--pro-motion); }
.pro-page :focus-visible, .pro-profile-entry :focus-visible { outline: 2px solid var(--pro-focus); outline-offset: 4px; }
.pro-hero { position: relative; isolation: isolate; padding: var(--pro-space-5); min-height: 275px; background: var(--pro-stage); color: #fff; overflow: hidden; }
/* Media-Heroes (Winchester 09.09. 22:10): Luna-Videos aus dem Video-Board des Anbieters
   (video/pro/luna, Poster img/pro/luna/wide) — Today/Fans/Inflow (21x9-Poster),
   Pricing/Earnings/Sell (16x9). Poster-<img> = Fallback, <video> deckt es ab.
   Die lila Strahlen gelten nur noch fuer die Nicht-Media-Heroes. */
.pro-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: conic-gradient(from 240deg at 91% 135%, transparent 0deg 13deg, var(--pro-stage-ray) 13deg 26deg, transparent 26deg 40deg, var(--pro-stage-ray) 40deg 51deg, transparent 51deg 67deg, var(--pro-stage-ray) 67deg 83deg, transparent 83deg 105deg, var(--pro-stage-ray) 105deg 118deg, transparent 118deg); }
.pro-hero-in { position: relative; }
.pro-hero-img, .pro-hero-video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pro-hero--media { min-height: 300px; }
.pro-hero--media::before { content: none; }
/* Suche im Foto-Hero (K02-Topbar-Position), damit Karten den Hero ueberlappen
   koennen, ohne sie zuzudecken (S3/S5, 09.09.). */
.pro-hero-search { margin-bottom: var(--pro-space-2); }
.pro-hero-search .pro-search { margin: 0; max-width: 560px; }
.pro-hero-search .pro-search input { background: rgb(13 19 31 / 72%); }
/* Lesbarkeits-Verlauf ueber dem Video: links dunkel (Text), rechts offen
   (Lunas Gesicht bleibt sichtbar). */
.pro-hero--media::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(92deg, rgb(13 19 31 / 88%) 0%, rgb(13 19 31 / 55%) 42%, rgb(13 19 31 / 18%) 78%, rgb(13 19 31 / 34%) 100%); }
/* Schlanker Gate-Header (09.09. K02): kein Vollflaechen-Lila ueber der Karte. */
.pro-hero--slim { min-height: 0; padding: var(--pro-space-3) var(--pro-space-5); background: transparent; color: var(--pro-ink); }
.pro-hero--slim::before { content: none; }
.pro-hero--slim h1 { font-size: 1.5rem; margin: 0 0 4px; }
.pro-hero--slim .pro-eyebrow { margin: 4px 0; }
.pro-hero--slim .pro-subtitle { font-size: .875rem; color: var(--pro-muted); }
/* Split-Header Pricing/Sell (KONZEPT-A 10.09., pricing-A.png): flache Hero-KARTE
   (Rand + Radius, eingezogen wie der Content) — links Creator-Zeile + H1 +
   Subline, rechts das Set-Still. */
.pro-hero--split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--pro-space-4); align-items: stretch; min-height: 220px; margin: 0 var(--pro-space-5);
  padding: var(--pro-space-4) var(--pro-space-5); background: var(--pro-panel);
  border: 1px solid var(--pro-line); border-radius: 16px; }
.pro-hero--split::before { content: none; }
.pro-hero-split-in { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pro-hero-split-title { margin-top: auto; }
.pro-hero-still { position: relative; min-height: 190px; border: 1px solid var(--pro-line);
  border-radius: 12px; overflow: hidden; background: var(--pro-rail); }
.pro-hero-still-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.pro-back { display: inline-flex; align-items: center; min-height: var(--pro-control-height); font-size: var(--pro-type-label); text-decoration: underline; text-underline-offset: 4px; }
.pro-back:hover { color: var(--pro-mint-soft); }
.pro-eyebrow { display: block; font-size: var(--pro-type-label); font-weight: 600; margin: var(--pro-space-2) 0; }
/* Source-Chip im Creator-Kopf (09.09. Nachtrag /api/pro/access): Demo / Verified /
   Application — nur gerendert, wenn der Endpunkt ein source-Feld liefert. */
.pro-source-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--pro-mint); border-radius: 999px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pro-mint); vertical-align: 2px;
  /* B674-B4 (23.09.2026): Mint-Text auf dem Hero-Motiv mass nur 3,85:1 —
     dunkle Chip-Flaeche aus dem vorhandenen Grund-Token dahinter (>= 4,5:1). */
  background: var(--pro-bg); }
/* Daten-Modus-Badge (Winchester 09.09. Nachtrag): sichtbares "Demo" vs "Live"
   auf jedem freigeschalteten Pro-Screen, damit die Demo als Demo erkennbar ist. */
.pro-mode-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.pro-mode-chip.is-demo { border: 1px dashed var(--pro-mint); color: var(--pro-mint); }
.pro-mode-chip.is-live { border: 1px solid #7ee2a8; color: #7ee2a8; }
.pro-hero h1 { max-width: 22ch; font-size: var(--pro-type-display); font-weight: 700; line-height: var(--pro-leading-display); letter-spacing: -.025em; margin: 0 0 var(--pro-space-3); }
.pro-subtitle { font-size: var(--pro-type-section); line-height: 1.4; margin: 0; }
/* Shell (KONZEPT-A 10.09.): linke Sidebar mit Brand-Zeile (Dreieck + APPICS Pro +
   Modus-Chip), Suche UNTER der Brand in der Spalte, Nav-Links mit Labels, unten
   der Creator-Account (Demo). .pro-nav bleibt der bestaetigte-Zustand-Selektor. */
.pro-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: stretch; }
.pro-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--pro-space-3) var(--pro-space-2); background: var(--pro-rail); border-right: 1px solid var(--pro-line); }
.pro-nav-brand { display: flex; align-items: center; gap: 10px; padding: 2px var(--pro-space-2) var(--pro-space-2); }
.pro-nav-logo { display: inline-flex; width: 28px; height: 28px; color: var(--pro-mint); flex-shrink: 0; }
.pro-nav-logo svg { width: 100%; height: 100%; }
.pro-nav-title { color: var(--pro-ink); font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.pro-nav-brand .pro-mode-chip { margin-left: auto; }
.pro-nav .pro-search { margin: 0 4px var(--pro-space-3); }
.pro-nav-account { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: var(--pro-space-3) var(--pro-space-2) 2px; border-top: 1px solid var(--pro-line); }
.pro-nav-ava { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--pro-mint); color: var(--pro-mint); font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.pro-nav-acc-name { color: var(--pro-ink); font-size: .875rem; font-weight: 600; }
/* Kleine Demo-Pille am Creator-Namen im Hero (KONZEPT-A; der eine pro-mode-chip
   bleibt in der Sidebar-Brand — 0910livetok). */
.pro-demo-pill { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px dashed var(--pro-mint); border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pro-mint); vertical-align: 2px; }
/* Creator-Zeile im Pricing-Split-Hero (pricing-A.png): Monogramm + Name + Pille. */
.pro-hero-creator { display: flex; align-items: center; gap: 12px; margin-bottom: var(--pro-space-3); }
.pro-mono { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--pro-mint); background: rgb(13 19 31 / 55%); color: var(--pro-mint); font-size: 1.125rem; font-weight: 700; flex-shrink: 0; }
.pro-hero-creator-name { color: var(--pro-ink); font-size: 1.125rem; font-weight: 600; }
/* Today-Demo-Hero (today2-A.png): Note + Luna Music + Pille statt APPICS-Pro-Eyebrow. */
.pro-eyebrow--creator { display: flex; align-items: center; gap: 8px; color: var(--pro-ink); font-size: 1.0625rem; }
.pro-eyebrow--creator svg { width: 20px; height: 20px; color: var(--pro-mint); }
.pro-back--above { margin: var(--pro-space-3) var(--pro-space-5) 0; }
/* Range-Schalter "Today / Last 30 days" (today2-A.png): rechts oben im Hero,
   von js/pro-n1n3.js befuelt und geschaltet. */
.pro-range { position: absolute; top: var(--pro-space-5); right: var(--pro-space-5); display: inline-flex; gap: 4px; padding: 4px; background: rgb(13 19 31 / 72%); border: 1px solid var(--pro-line); border-radius: 10px; }
.pro-range button { min-height: 48px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--pro-muted); font: 600 .875rem/1 var(--pro-font); cursor: pointer; }
.pro-range button.is-on { background: var(--pro-mint); color: var(--pro-action-ink); }
@media (max-width: 700px) {
  .pro-range { position: static; margin-top: var(--pro-space-2); }
}
.pro-nav a { display: flex; align-items: center; gap: var(--pro-space-2); min-height: var(--pro-control-height); padding: 0 var(--pro-space-2); border-radius: 8px; color: var(--pro-muted); font-size: var(--pro-type-label); font-weight: 600; text-decoration: none; }
.pro-nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
.pro-nav a:hover { background: var(--pro-panel); color: var(--pro-ink); }
.pro-nav a[aria-current='page'] { background: var(--pro-mint); color: var(--pro-action-ink); }
.pro-main { min-width: 0; display: flex; flex-direction: column; }
.pro-search { position: relative; margin: var(--pro-space-3) var(--pro-space-5) 0; color: var(--pro-muted); }
.pro-search svg { position: absolute; left: var(--pro-space-2); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; }
.pro-search input { width: 100%; min-height: var(--pro-control-height); padding: 0 var(--pro-space-3) 0 44px; background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 10px; color: var(--pro-ink); font: var(--pro-type-label)/1.4 var(--pro-font); }
.pro-search input::placeholder { color: var(--pro-muted); }
.pro-search input:focus-visible { outline: 2px solid var(--pro-focus); outline-offset: 2px; }
.pro-main .pro-content { padding-top: var(--pro-space-3); }
.pro-content { padding: var(--pro-space-5); min-height: 300px; }
.pro-breadcrumb { display: inline-flex; min-height: var(--pro-control-height); align-items: center; margin-bottom: var(--pro-space-2); color: var(--pro-mint); text-decoration: underline; text-underline-offset: 4px; }
.pro-empty { min-height: 260px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--pro-space-5); background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: var(--pro-radius); }
.pro-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--pro-line); border-radius: var(--pro-radius); color: var(--pro-mint); margin-bottom: var(--pro-space-3); font-size: var(--pro-type-section); }
.pro-empty-mark svg { width: 32px; height: 32px; }
.pro-empty h2 { font-size: var(--pro-type-title); line-height: 1.3; margin: 0 0 var(--pro-space-2); }
.pro-empty p { color: var(--pro-muted); margin: 0; }
.pro-empty-note { font-size: var(--pro-type-label); margin-top: var(--pro-space-3) !important; }
/* Kompakte Gate-Karte (09.09. K02): eine Spalte, Anforderungen mit Status. */
.pro-gate { max-width: 640px; display: flex; flex-direction: column; gap: var(--pro-space-2); align-items: flex-start;
  padding: var(--pro-space-4); background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: var(--pro-radius); }
.pro-intro { margin: 0; color: var(--pro-muted); }
.pro-gate h2 { color: var(--pro-ink); font-size: var(--pro-type-title); line-height: 1.3; margin: 0; }
.pro-requirements { width: 100%; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--pro-line); }
.pro-requirements li { display: flex; flex-direction: column; gap: var(--pro-space-1); padding: var(--pro-space-3) 0; border-bottom: 1px solid var(--pro-line); }
.pro-requirement-label { font-weight: 600; }
.pro-requirement-status { color: var(--pro-muted); font-size: var(--pro-type-label); }
/* 0913befunde (K1): Erklaerzeile unter der Mitgliedschafts-Bedingung */
.pro-requirement-note { color: var(--pro-muted); font-size: var(--pro-type-label); line-height: 1.5; opacity: .85; }
.pro-status { color: var(--pro-muted); margin: var(--pro-space-3) 0; }
.pro-action { display: inline-flex; justify-content: center; align-items: center; min-height: var(--pro-control-height); padding: var(--pro-space-2) var(--pro-space-4); margin-top: var(--pro-space-2); border-radius: 6px; background: var(--pro-mint); color: var(--pro-action-ink); font: 600 var(--pro-type-label)/1.4 var(--pro-font); }
.pro-action:hover { background: var(--pro-mint-soft); }
.pro-action:disabled { color: var(--pro-muted); background: var(--pro-line); cursor: not-allowed; }
/* Zwei Verifikationswege im Gate (09.09. Nachtrag): nebeneinander, mobil untereinander. */
.pro-verify { width: 100%; }
.pro-verify h3 { color: var(--pro-ink); font-size: var(--pro-type-label); margin: var(--pro-space-2) 0; }
.pro-verify-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pro-space-3); }
.pro-verify-path { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pro-space-1); padding: var(--pro-space-3); border: 1px solid var(--pro-line); border-radius: var(--pro-radius); }
.pro-verify-path p { margin: 0; color: var(--pro-muted); font-size: var(--pro-type-label); }
@media (max-width: 640px) { .pro-verify-paths { grid-template-columns: 1fr; } }
.pro-profile-entry { display: flex; gap: var(--pro-space-1); justify-content: flex-start; padding: 0 0 var(--pro-space-3); font: 500 var(--pro-type-label)/1.4 var(--pro-font); }
.pro-profile-entry a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pro-control-height); padding: var(--pro-space-2) var(--pro-space-3); color: var(--pro-mint); border: 1px solid var(--pro-line); border-radius: 6px; background: var(--pro-panel); }
.pro-profile-entry a:hover { background: var(--pro-line); }
.pro-profile-switch { display: flex; gap: var(--pro-space-1); flex-wrap: wrap; }
.pro-profile-entry a[aria-current='page'] { color: var(--pro-ink); }
@media (max-width: 1000px) {
  /* Sidebar wird zur horizontalen Streifen-Navigation (Mobil); Brand und
     Account-Fuss entfallen, die Suche wandert als erstes Element mit. */
  .pro-shell { grid-template-columns: minmax(0, 1fr); }
  .pro-nav { flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--pro-line); padding: var(--pro-space-2) var(--pro-space-3); }
  .pro-nav a { flex: 0 0 auto; }
  .pro-nav-brand, .pro-nav-account { display: none; }
  .pro-nav .pro-search { flex: 0 0 auto; width: 200px; margin: 0 var(--pro-space-1) 0 0; }
}
@media (max-width: 700px) {
  .sh-pro .main { padding: 16px 12px 110px; }
  .pro-page { --pro-type-display: 2rem; --pro-type-section: 1rem; }
  .pro-hero { min-height: 250px; padding: var(--pro-space-3); }
  .pro-hero h1 { max-width: 18ch; }
  .pro-content { padding: var(--pro-space-3); }
  .pro-nav { gap: 4px; padding: var(--pro-space-2); }
  /* 0915politur (15.09., himejima Nr. 4b, live vermessen auf 390px): die Suche
     fraß 200 px der 366 px Querleiste — ohne Wischen war nur 'Profile' sichtbar.
     Schmaler (132 px) + schrumpfbar; den aktiven Link rollt der Observer in
     app.js in die sichtbare Mitte. */
  .pro-nav .pro-search { width: 132px; flex: 0 0 auto; }
  .pro-empty { min-height: 270px; padding: var(--pro-space-3); }
  .pro-empty h2 { font-size: var(--pro-type-section); }
}

/* Pricing adapter controls; kept inside the S3 pricing boundary. */
.pro-pricing [data-pro-pricing-form] { display: grid; gap: 16px; }
.pro-pricing .pro-pricing-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.pro-pricing .pro-pricing-field { display: grid; gap: 6px; min-width: 0; color: var(--pro-muted); font-size: .875rem; }
.pro-pricing .pro-pricing-field input,
.pro-pricing .pro-pricing-field select { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--pro-line); border-radius: 6px; background: var(--pro-bg); color: var(--pro-ink); font: inherit; }
.pro-pricing .pro-pricing-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; margin: 16px 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--pro-line); }
.pro-pricing .pro-pricing-row legend { grid-column: 1 / -1; padding: 0; color: var(--pro-ink); font-weight: 600; }
.pro-pricing button:not(.pro-action) { min-height: 44px; padding: 8px 12px; border: 1px solid var(--pro-line); border-radius: 6px; background: transparent; color: var(--pro-mint); font: inherit; }
.pro-pricing button:disabled { opacity: .6; cursor: not-allowed; }
.pro-pricing .pro-pricing-notice { color: var(--pro-muted); }
@media (max-width: 700px) {
  .pro-pricing .pro-pricing-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pro-page *, .pro-profile-entry * { transition: none; }
  /* Kein Bewegtbild bei reduced-motion: das Poster darunter bleibt stehen
     (zusaetzlich entfernt pro-luna.tameLunaVideos die Elemente per JS). */
  [data-luna-video] { display: none; }
}

/* Sprint 1: S3 and information gate only.
   N1/N3 and shared tokens/navigation keep their Sprint-0 contract. */
.pro-page--pricing .pro-hero { min-height: 220px; }
.pro-page--pricing .pro-hero h1 { max-width: 25ch; font-size: 2.25rem; }
/* KONZEPT-A: Today-Demo-H1 groesser als Eyebrow, kompakter als Display.
   Der Today-Hero ist flacher als die anderen Media-Heroes (today2-A.png:
   schmaler Kopf, KPIs ruecken hoch). Kopf-Oberkante bleibt >= 24 px unter
   der Hero-Oberkante (pos 25 %: bei 210 px Hoehe ~36 px Luft). */
.pro-eyebrow--creator + h1 { font-size: 2.5rem; }
.pro-page--today .pro-hero--media { min-height: 210px; }
.pro-pricing h2 { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.pro-pricing h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; }
.pro-pricing p { margin: 0; }
.pro-pricing-unlock { padding: 20px 24px; margin-bottom: 16px; border: 1px solid var(--pro-line); border-radius: var(--pro-radius); background: var(--pro-panel); }
.pro-pricing-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.pro-confirmed, .pro-data-state { display: inline-flex; align-items: center; min-height: 28px; font-size: .75rem; line-height: 1.4; }
.pro-confirmed { color: var(--pro-mint); border: 1px solid var(--pro-mint); border-radius: 5px; padding: 3px 8px; }
.pro-data-state { color: var(--pro-muted); }
.pro-pricing-unlock > p { font-size: .875rem; color: var(--pro-muted); }
.pro-pricing-unlock strong { color: var(--pro-ink); font-weight: 500; }
.pro-pricing-unlock .pro-pricing-help { margin-top: 8px; }
.pro-pricing-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pro-pricing-primary, .pro-pricing-secondary { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* 10.09. SANDRO-PASS: linke und rechte Spalte enden auf gleicher Hoehe — die
   letzte Karte der rechten Spalte (Tax & invoices) waechst mit. */
.pro-pricing-secondary { height: 100%; }
.pro-pricing-secondary > .pro-pricing-panel:last-child { flex: 1 0 auto; }
.pro-pricing-primary > .pro-pricing-unlock { margin-bottom: 0; }
.pro-pricing-panel { padding: 24px; background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: var(--pro-radius); }
.pro-pricing .pro-pricing-help { color: var(--pro-muted); font-size: .875rem; line-height: 1.6; }
.pro-tiers-empty { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0 24px; }
.pro-tiers-empty p { font-size: .875rem; color: var(--pro-muted); }
.pro-pricing-icon { color: var(--pro-mint); flex: 0 0 28px; padding-top: 2px; }
.pro-pricing-icon svg { width: 28px; height: 28px; }
.pro-price-list { margin: 0 0 16px; }
.pro-price-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 0; border-bottom: 1px solid var(--pro-line); }
.pro-price-list dt { font-size: .9375rem; font-weight: 500; }
.pro-price-list dt span { display: block; font-size: .8125rem; font-weight: 400; color: var(--pro-muted); margin-top: 4px; }
.pro-price-list dd { margin: 0; color: var(--pro-muted); font-size: .875rem; white-space: nowrap; }
.pro-pricing .pro-payout-empty { margin: 24px 0 12px; font-size: 1rem; }
.pro-pricing-secondary h2 + .pro-pricing-help { margin-top: 16px; }
.pro-pricing-link { display: inline-flex; align-items: center; gap: 12px; color: var(--pro-mint); font-size: .875rem; min-height: 48px; margin-top: 12px; text-decoration: underline; text-underline-offset: 4px; }
.pro-pricing-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--pro-line); margin-top: 24px; padding-top: 20px; }
.pro-pricing-footer p { font-size: .8125rem; color: var(--pro-muted); max-width: 58ch; }
.pro-pricing-footer .pro-action { flex-shrink: 0; margin: 0; }
.pro-pricing .pro-action:disabled { color: var(--pro-muted); background: var(--pro-line); cursor: not-allowed; }
/* 15.09. (KIMI-PRO-PRICING-TEXT-20260915, Stempel 0915prgate): Zugang frei,
   Pricing noch nicht eingerichtet — ruhiger Zustand statt Zugangs-Gate. */
.pc-setup { max-width: 640px; }
.pc-setup > p { max-width: 56ch; line-height: 1.6; }
a.pc-setup-back { display: inline-flex; margin-top: 16px; text-decoration: none; }
.pro-page--gate .pro-gate { margin: 8px 0; }
.pro-page--gate .pro-requirements { margin-top: 4px; }
.pro-page--gate .pro-follower-progress { display: grid; gap: 8px; margin-top: 8px; font-size: .8125rem; color: var(--pro-muted); }
.pro-follower-progress meter { width: 100%; height: 12px; appearance: none; border: 0; border-radius: 6px; background: var(--pro-line); }
.pro-follower-progress meter::-webkit-meter-bar { background: var(--pro-line); border: 0; border-radius: 6px; }
.pro-follower-progress meter::-webkit-meter-optimum-value { background: var(--pro-mint); border-radius: 6px; }
.pro-follower-progress meter::-moz-meter-bar { background: var(--pro-mint); border-radius: 6px; }
@media (max-width: 1000px) {
  .pro-pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .pro-pricing-footer { align-items: flex-start; flex-direction: column; }
  .pro-hero--split { grid-template-columns: minmax(0, 1fr); min-height: 0; margin: 0 var(--pro-space-3); }
  .pro-back--above { margin: var(--pro-space-2) var(--pro-space-3) 0; }
  .pro-hero-split-title { margin-top: 0; }
  .pro-hero-still { min-height: 180px; }
}
@media (max-width: 700px) {
  .pro-page--pricing .pro-hero { min-height: 245px; }
  .pro-page--pricing .pro-hero h1 { font-size: 2rem; }
  .pro-page--pricing .pro-content { padding: 16px 12px 24px; }
  .pro-pricing-unlock, .pro-pricing-panel { padding: 20px 16px; }
  .pro-pricing-unlock > p strong { display: block; }
  .pro-pricing-separator { display: none; }
  .pro-price-list > div { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pro-pricing-footer .pro-action { width: 100%; }
}

/* Adapter form actions follow the S3 desktop/mobile composition. */
.pro-pricing [data-pro-pricing-save],
.pro-pricing [data-pro-pricing-reload] { justify-self: end; min-height: 44px; }
@media (max-width: 700px) {
  .pro-pricing [data-pro-pricing-save],
  .pro-pricing [data-pro-pricing-reload] { width: 100%; justify-self: stretch; }
}

/* ================= K02 Pricing Console (120%-Pass 09.09.) =================
   pc-* Praefix. Zeilen-Tabelle wie K02-S3: Label links, Preis-Input + Einheit rechts,
   Toggle/Remove am Zeilenende. Echte Steuerung nur im bestaetigten Editor; Demo ist
   statisch (gesperrter Save). */
.pc-muted { color: var(--pro-muted); }
.pc-unlock-line { font-size: .875rem; color: var(--pro-muted); margin: 0; }
.pc-unlock-line strong { color: var(--pro-ink); font-weight: 600; }
.pc-socials { margin: 6px 0 0; font-size: .875rem; color: var(--pro-muted); }
.pc-level { display: flex; align-items: center; gap: var(--pro-space-2); margin: 4px 0 8px; font-size: .875rem; font-weight: 600; }
.pc-level-bar { flex: 1; max-width: 340px; }
.pc-tiers { display: grid; }
/* Zeilen-GRID (10.09. SANDRO-PASS): feste Spalten — Label flexibel, Preisbox
   120px, Einheit >= 108px, Toggle-Slot 40px (auch leer reserviert, damit die
   Preisboxen ueber Tiers UND Interactions auf exakt demselben x stehen),
   Remove 36px (Editor). */
.pc-tier { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(108px, auto) 40px 36px;
  align-items: center; gap: var(--pro-space-2); padding: 10px 2px; border-bottom: 1px solid var(--pro-line); }
.pc-tier:last-child { border-bottom: 0; }
.pc-tier > .pc-tier-name { grid-column: 1; }
.pc-tier > .pc-money { grid-column: 2; }
.pc-tier > .pc-unit { grid-column: 3; }
.pc-tier > .pc-toggle { grid-column: 4; }
.pc-tier > .pc-remove { grid-column: 5; }
.pc-tier > .pc-off-note { grid-column: 2 / 4; }
.pc-tier > .pc-soon { grid-column: 4; }
.pc-tier-name { min-width: 0; color: var(--pro-ink); font: 600 .9375rem/1.4 var(--pro-font); }
.pro-pricing input.pc-tier-name { min-height: 40px; padding: 6px 2px; background: transparent; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; color: var(--pro-ink); }
.pro-pricing input.pc-tier-name:hover, .pro-pricing input.pc-tier-name:focus-visible { border-bottom-color: var(--pro-line); outline: none; }
.pc-tier-static { padding: 0; }
.pc-tier-off .pc-tier-static, .pc-tier-soon .pc-tier-static { color: var(--pro-muted); font-weight: 500; }
.pc-price { display: inline-flex; align-items: center; gap: 6px; color: var(--pro-muted); font-size: .875rem; }
/* K02-S3 Preis-Box (10.09. SANDRO-PASS): ALLE Preis-Inputs gleiche Breite —
   feste Spalte 120px, Betrag rechtsbuendig; die Einheit steht in einer eigenen,
   gleich breiten Spalte. Waehrungssymbol + Betrag in EINER dunklen Box. */
.pc-money { display: inline-flex; align-items: center; gap: 2px; width: 120px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--pro-line); border-radius: 8px; background: var(--pro-bg);
  color: var(--pro-ink); font: 600 .9375rem/1.2 var(--pro-font); flex-shrink: 0; }
.pc-money i { font-style: normal; color: var(--pro-muted); }
.pro-pricing .pc-money input { flex: 1 1 auto; min-width: 0; width: auto; min-height: 42px; padding: 6px 0; border: 0; background: transparent;
  color: var(--pro-ink); font: inherit; text-align: right; font-variant-numeric: tabular-nums; }
.pro-pricing .pc-money input:focus-visible { outline: none; }
.pro-pricing .pc-money:focus-within { border-color: var(--pro-mint); }
.pc-money-static { min-height: 40px; padding: 0 14px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.pc-money-static i { order: -1; margin-right: auto; }
.pc-unit { display: inline-flex; align-items: center; min-width: 108px; color: var(--pro-muted); font-size: .875rem; white-space: nowrap; }
.pc-head-side { display: inline-flex; align-items: center; gap: var(--pro-space-2); }
.pc-edit { margin: var(--pro-space-1) 0 0; color: var(--pro-ink); font-size: .875rem; font-weight: 500; }
.pro-pricing .pc-period { width: 52px; min-height: 48px; padding: 4px 6px; border: 1px solid var(--pro-line); border-radius: 6px; background: var(--pro-bg); color: var(--pro-muted); font: .8125rem/1.2 var(--pro-font); text-align: center; }
.pc-off-note { color: var(--pro-muted); font-size: .8125rem; }
.pc-soon { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--pro-line); border-radius: 999px; color: var(--pro-muted); font-size: .75rem; white-space: nowrap; }
.pc-static-line { margin: 0 0 4px; color: var(--pro-ink); font-size: .9375rem; font-weight: 600; }
/* Toggle: gleiche Geometrie wie .pl-toggle (Demo), als Button mit echter Semantik */
.pro-pricing button.pc-toggle, .pro-pricing .pc-toggle { position: relative; display: inline-block; width: 40px; height: 22px; min-height: 22px; border-radius: 999px; background: var(--pro-line); border: 0; padding: 0; flex-shrink: 0; cursor: pointer; transition: background var(--pro-motion); }
.pro-pricing .pc-toggle > span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--pro-motion); }
.pro-pricing .pc-toggle.is-on { background: var(--pro-mint); }
.pro-pricing .pc-toggle.is-on > span { transform: translateX(18px); }
.pro-pricing span.pc-toggle { cursor: default; }
.pro-pricing button.pc-remove { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--pro-muted); font-size: 1.125rem; }
.pro-pricing button.pc-remove:hover { color: #e87f9a; border-color: var(--pro-line); }
.pro-pricing button.pc-add { margin-top: var(--pro-space-2); }
.pc-currency { display: inline-flex; align-items: center; gap: 8px; color: var(--pro-muted); font-size: .75rem; font-weight: 400; }
.pro-pricing .pc-currency select { min-height: 48px; padding: 0 8px; border: 1px solid var(--pro-line); border-radius: 8px; background: var(--pro-bg); color: var(--pro-ink); font: .875rem var(--pro-font); }
.pc-payout { display: flex; align-items: center; gap: var(--pro-space-2); padding: 8px 2px; color: var(--pro-muted); font-size: .875rem; }
.pc-payout.is-on { color: var(--pro-ink); }
.pc-payout-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--pro-rail); color: var(--pro-ink); flex-shrink: 0; }
.pc-payout-ic svg { width: 16px; height: 16px; }
.pc-mark { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.pc-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pro-line); flex-shrink: 0; }
.pc-radio.is-on { border-color: var(--pro-mint); background: radial-gradient(circle, var(--pro-mint) 0 5px, transparent 6px); }
@media (max-width: 700px) {
  /* Mobil zurück auf Flex (die festen Desktop-Spalten passen nicht in 390px). */
  .pc-tier { display: flex; flex-wrap: wrap; row-gap: 6px; }
  .pc-tier > .pc-tier-name { flex: 1 1 100%; }
  .pc-tier > .pc-off-note { flex: 1 1 auto; }
  .pc-money { min-height: 40px; }
  .pro-hero--media { min-height: 240px; }
}

/* Gate: echter Social-Verify-Status (Nachtrag 10.09.) — Chips mit Followerzahl,
   gruener Haken ab PRO_FOLLOWER_MIN, Antrag-Knopf mit ehrlichem Hinweis. */
.pro-socv { margin-top: var(--pro-space-2); }
.pro-socv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-socv-chip { display: inline-block; padding: 3px 8px; border: 1px solid var(--pro-line); border-radius: 999px; font-size: .6875rem; color: var(--pro-muted); }
.pro-socv-chip b { color: var(--pro-ink); }
.pro-socv-ok { display: flex; align-items: center; gap: 6px; margin: var(--pro-space-2) 0 0; color: #7ee2a8; font-size: .8125rem; font-weight: 700; }
.pro-socv-ok svg { width: 14px; height: 14px; }
.pro-socv-note { margin: var(--pro-space-1) 0 0; color: var(--pro-muted); font-size: .75rem; }

/* 10.09. Ladezustand ohne Gate-Skelett (Winchester-Ruege): neutraler Hinweis statt Anforderungsliste */
.pro-page--loading .pro-content { min-height: 240px; }
.pro-loading { display: flex; align-items: center; gap: 12px; padding: 24px 0; color: var(--pro-muted); }
.pro-loading .pro-status { margin: 0; }
.pro-loading-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pro-mint); border-right-color: transparent; animation: pro-spin .9s linear infinite; flex: none; }
@keyframes pro-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pro-loading-dot { animation: none; border-right-color: var(--pro-mint); } }

/* ================= KONZEPT-A Pricing-Demo-Konsole (10.09., pricing-A.png) =================
   pcd-* Praefix (Kollisionscheck gegen app.css/pro.css: sauber). Nur die DEMO-
   Konsole (Luna/Vorschau); der Live-Editor oben bleibt unveraendert. */
.pcd-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pcd-main { min-width: 0; }
.pcd-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.pcd-head h2 { margin: 0; color: var(--pro-ink); font-size: 1.25rem; line-height: 1.3; }
.pcd-head-side { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pcd-level { color: var(--pro-muted); font-size: .875rem; }
.pcd-note { margin: 0 0 10px; color: var(--pro-mint); font-size: .8125rem; }
.pcd-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pcd-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px;
  background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 12px; }
.pcd-tier-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 6px; }
.pcd-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; border: 1.5px solid var(--pro-mint); color: var(--pro-mint); flex-shrink: 0; }
.pcd-ic svg { width: 22px; height: 22px; }
.pcd-ic-sm { width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgb(120 221 217 / 10%); }
.pcd-ic-sm svg { width: 19px; height: 19px; }
.pcd-tier-name { color: var(--pro-ink); font-size: 1.0625rem; font-weight: 700; }
.pcd-tier-sub { min-height: 2.6em; color: var(--pro-muted); font-size: .8125rem; line-height: 1.4; }
/* Preis-Box: ALLE Stufen exakt gleich (Grid-Spalte + width:100%), € in der Box. */
.pcd-price { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px;
  margin-top: 10px; padding: 0 14px; border: 1px solid var(--pro-line); border-radius: 10px; background: var(--pro-bg);
  color: var(--pro-ink); font: 700 1.0625rem/1 var(--pro-font); font-variant-numeric: tabular-nums; }
.pcd-price i { font-style: normal; color: var(--pro-muted); font-weight: 500; }
.pcd-unit { align-self: center; color: var(--pro-muted); font-size: .8125rem; }
.pcd-h2 { margin: 16px 0 10px; color: var(--pro-ink); font-size: 1.25rem; line-height: 1.3; }
.pcd-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pcd-addon { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 12px; }
.pcd-addon-t { display: grid; gap: 3px; min-width: 0; }
.pcd-addon-t b { color: var(--pro-ink); font-size: .9375rem; font-weight: 600; }
.pcd-addon-t span { color: var(--pro-muted); font-size: .8125rem; }
.pcd-addon-price { color: var(--pro-ink); font-weight: 700; }
/* Settings-Leiste (Availability / Payout / Tax / Regional) als ein Band. */
.pcd-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; padding: 12px 16px;
  background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 12px; }
.pcd-strip-item { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-left: 1px solid var(--pro-line); }
.pcd-strip-item:first-child { border-left: 0; padding-left: 0; }
.pcd-strip-t { display: grid; gap: 2px; min-width: 0; }
.pcd-strip-t b { color: var(--pro-ink); font-size: .875rem; font-weight: 600; }
.pcd-strip-t span { color: var(--pro-muted); font-size: .75rem; }
.pcd-strip-t .pc-soon { justify-self: start; margin-top: 2px; }
.pcd-strip-item .pc-toggle { margin-left: auto; }
/* Fan preview: Storefront-Karte rechts. */
.pcd-preview { min-width: 0; }
.pcd-preview-btn { min-height: 36px; padding: 0 18px; border: 0; border-radius: 8px;
  background: var(--pro-mint); color: var(--pro-action-ink); font: 600 .8125rem/1 var(--pro-font); cursor: pointer; }
.pcd-preview-btn:hover { background: var(--pro-mint-soft); }
.pcd-preview-card { padding-bottom: 6px; background: var(--pro-panel); border: 1px solid var(--pro-line);
  border-radius: 12px; overflow: hidden; }
.pcd-preview-art { position: relative; height: 170px; }
.pcd-preview-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pcd-preview-mono { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); }
.pcd-preview-name { display: block; margin-top: 38px; color: var(--pro-ink); font-size: 1.0625rem; font-weight: 700; text-align: center; }
.pcd-preview-tiers { margin-top: 14px; border-top: 1px solid var(--pro-line); }
.pcd-preview-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--pro-line); }
.pcd-preview-row:last-child { border-bottom: 0; }
.pcd-preview-row-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pcd-preview-row-t b { color: var(--pro-ink); font-size: .875rem; font-weight: 600; }
.pcd-preview-row-t span { color: var(--pro-muted); font-size: .75rem; }
.pcd-preview-price { white-space: nowrap; color: var(--pro-muted); font-size: .8125rem; }
.pcd-preview-price b { color: var(--pro-ink); font-size: .9375rem; font-weight: 700; }
@media (max-width: 1000px) {
  .pcd-grid { grid-template-columns: minmax(0, 1fr); }
  .pcd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .pcd-strip-item { border-left: 0; padding-left: 0; }
  .pcd-strip-item:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 700px) {
  .pcd-tiers, .pcd-addons, .pcd-strip { grid-template-columns: minmax(0, 1fr); }
}

/* ================= 0922textkasten: EINE Regel gegen "Text laeuft aus seinem
   Kasten" (Winchester 22.09., zwei Fotos, ein Muster) =================
   Gemessen headless am 22.09. (scrollWidth gegen clientWidth):
     .pe-tool  "Copy link"            95 > 85 px (Demo)  /  95 > 30 px (leeres Konto)
     .pcd-strip-t "Regional price bands"                     69 >  6 px
     .pcd-strip-t "Tax & invoices"                          124 > 58 px
     .pcd-strip-t "Availability"                             88 > 75 px
   Beide Stellen sind dieselbe Bauform: eine Zeile aus
   [feste Marke] [Textblock] [feste Bedienung]. Der Textblock ist das einzige
   schrumpfbare Glied, also bekommt er beim Engwerden ALLES abgezogen — bis auf
   sechs Pixel — und laeuft dann ueber seinen Nachbarn. Zwei Einzelpflaster
   haetten die dritte Stelle offen gelassen.
   Regel, gemeinsam:
     1. Die ZEILE bricht um, bevor der Text gequetscht wird — die Raster tragen
        eine Mindestbreite je Zelle statt einer festen Spaltenzahl.
     2. Feste Marken und Bedienelemente schrumpfen nie (flex-shrink: 0).
     3. Der Textblock darf auf 0 schrumpfen, bricht aber um statt ueberzulaufen.
   Tokens aus :root oben (css/pro.css:12-44), keine Hexwerte von Hand. */
.pro-page .pcd-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.25rem), 1fr)); column-gap: var(--pro-space-3); row-gap: var(--pro-space-3); }
/* Die Trennstriche waren an die feste Spaltenzahl gebunden (`:first-child`
   ohne Strich). Sobald die Leiste umbricht, steht der Strich mitten im Band —
   gemessen am 22.09. links neben "Tax & invoices". Abstand statt Strich. */
.pro-page .pcd-strip-item { border-left: 0; padding-left: 0; padding-right: 0; }
.pro-page .pcd-ic, .pro-page .pn1-empty-ic { flex-shrink: 0; }
.pro-page .pcd-strip-t { min-width: 0; overflow-wrap: anywhere; }
/* Die Marke im Knopf/Feld schrumpft nie, der Text darf umbrechen. */
.pro-page .pe-tool, .pro-page .pe-qr { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }

/* ---- 0922leerpricing: Zustaende der geteilten Pricing-Konsole (22.09.) ----
   Die Konsole zeichnet jetzt auch das echte Konto (js/pro-pricing.js
   consoleHtml). Neue Klassen, KEINE bestehende Regel geaendert — die
   Preisflaechen bleiben ueber .pcd-price gleich gross, das Settingsband
   behaelt die Ueberlauf-Regeln darueber.
   Leer heisst gestrichelt, nicht weg: eine fehlende Flaeche kann niemand
   befuellen, eine leere ist eine Einladung. */
.pcd-cell-empty { border-style: dashed; }
.pcd-cell-empty .pcd-price { border-style: dashed; color: var(--pro-muted); }
.pcd-cell-empty .pcd-tier-name, .pcd-cell-empty .pcd-addon-price { color: var(--pro-muted); }
/* Ausgeschaltete Stufe: sichtbar da, sichtbar nicht angeboten. */
.pcd-tier-off .pcd-ic { border-color: var(--pro-line); color: var(--pro-muted); }
/* Vertraglich gesperrter Dienst (Voice/Group) — ehrlich gesperrt, nicht erfunden. */
.pcd-addon-soon .pcd-ic-sm { background: rgb(255 255 255 / 6%); color: var(--pro-muted); }
.pcd-addon-soon .pcd-addon-t b { color: var(--pro-muted); }
/* Titelbild fehlt: die Flaeche bleibt stehen und traegt ihren Upload-Marker. */
.pcd-preview-art-empty { background: var(--pro-bg); border-bottom: 1px dashed var(--pro-line); }
.pcd-preview-art-empty .pcd-preview-mono { color: var(--pro-muted); }

/* ---- 0922leerpricing (2): der EDITOR traegt dieselbe Konsolen-Form ----
   Abnahmepunkte 1+2: aus Zeilen (.pc-tier, 5-Spalten-Grid) sind Karten
   (.pcd-tier) und aus der Interaktionsliste ein 2x2-Raster (.pcd-addon)
   geworden. Die Formular-Klassen (.pc-tier-name, .pc-money, .pc-unit,
   .pc-period, .pc-toggle, .pc-remove) bleiben an denselben Feldern — hier steht
   nur, wie sie sich IN einer Karte verhalten.
   Nichts oberhalb ist angefasst; .pc-tier selbst bleibt unveraendert, weil die
   Gate-Ansicht (js/pro.js) es weiter benutzt. */
.pcd-tier-edit { gap: 4px; }
.pcd-tier-acts { display: inline-flex; align-items: center; gap: 8px; }
/* Die Preisbox ist in der Karte so breit wie die Karte — das ist der Kern von
   Abnahmepunkt 1 ("GLEICH GROSSE Preisflaechen"): .pcd-price setzt width 100%,
   die 120px-Zeilenbreite aus .pc-money darf hier nicht gewinnen. */
.pro-pricing .pcd-tier-edit .pc-money.pcd-price { width: 100%; min-height: 52px; flex-shrink: 1; }
.pro-pricing .pcd-tier-edit .pc-money.pcd-price input { text-align: left; font: inherit; }
.pro-pricing .pcd-tier-edit input.pc-tier-name { width: 100%; min-height: 34px; font: 700 1.0625rem/1.3 var(--pro-font); }
.pcd-tier-edit .pc-unit { min-width: 0; }
/* Ausgeschaltete Stufe: die Karte steht, die Preisflaeche sagt "Not offered". */
.pcd-price-off { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
  margin-top: 10px; padding: 0 14px; border: 1px dashed var(--pro-line); border-radius: 10px; }
/* Add-on-Karte mit Eingabefeldern (2x2 wie im Demo). */
.pcd-addon-edit { align-items: flex-start; }
.pcd-addon-edit .pcd-addon-t { flex: 1 1 auto; }
.pcd-addon-in { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pcd-addon-edit .pc-remove { margin-left: auto; align-self: center; }
.pcd-addon-edit .pc-soon { margin-left: auto; align-self: center; }
/* Kein Tier im Entwurf: die Uebersicht faellt nicht weg, sie sagt es. */
.pcd-preview-none { margin: 0; padding: 14px 16px; color: var(--pro-muted); font-size: .8125rem; }
/* 22.09., von der Sonde gefunden, nicht vermutet: bei 1024 lief die Editor-Karte
   um 32 px und ihre Kopfzeile um 48 px aus dem Kasten. Ursache gemessen — die
   Kopfzeile traegt im EDITOR drei feste Breiten (Symbol 48 + Schalter 40 +
   Entfernen 36 + Abstaende = ~132 px) gegen eine Preisflaeche von 84 px.
   Zwei Schritte, in dieser Reihenfolge:
   (1) Der Editor braucht mehr Platz je Karte als die reine Anzeige, also zwei
       Spalten statt drei, sobald es eng wird. `.pc-tiers.pcd-tiers` trifft NUR
       den Editor — die Anzeige-Konsole (Demo/Setup) behaelt ihre drei Spalten.
   (2) Und als Netz darunter bricht die Kopfzeile um, bevor etwas gequetscht
       wird — dieselbe Regel wie am 22.09. bei "Copy link" und "Regional price
       bands": lieber eine Zeile mehr als Text ausserhalb seines Kastens. */
@media (max-width: 1200px) {
  .pc-tiers.pcd-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pcd-tier-edit .pcd-tier-top { flex-wrap: wrap; row-gap: 6px; }
/* Zweiter Fund derselben Sonde: die Add-on-Karte lief aus dem Kasten (1024
   +22 px). Ursache gemessen — .pc-unit bringt aus der Zeilen-Welt min-width
   108px und white-space: nowrap mit, .pc-money zusaetzlich flex-shrink: 0 bei
   fester Breite 120px; im Editor steht daneben noch das Minuten-Feld
   ("/ [52px] -min block"). In einer 2x2-Karte passt das nicht nebeneinander.
   ERSTER VERSUCH WAR FALSCH und ist hier nicht mehr drin: `width: auto` +
   `min-width: 96px` liess die Box WACHSEN statt schrumpfen (gemessen: aus
   +22 px wurden +111 px). Eine Mindestbreite ist das Gegenteil einer
   Schrumpf-Erlaubnis.
   Richtig ist: das Raster bleibt 2x2 (Abnahmepunkt 2), der INHALT bricht um und
   die Preisbox darf kleiner werden.
   DIE EIGENTLICHE URSACHE, von der Diagnose-Sonde benannt statt geraten:
   .pcd-addon-t ist ein GRID, und seine implizite Spalte ist `auto` — die
   waechst auf max-content und laesst sich von `min-width: 0` am Kasten nicht
   beeindrucken. Gemessen: Kasten 98 px, Inhalt 225 px. `minmax(0, 1fr)` ist die
   Stelle, an der die Spalte kleiner werden DARF.
   Und die gesperrte Karte bricht um: `.pc-soon` traegt white-space: nowrap,
   kann also nicht schmaler werden als "Not available yet" (116 px) — in einer
   182 px breiten Karte bleibt neben Symbol und Abstand nichts uebrig. */
.pcd-addon-edit { flex-wrap: wrap; row-gap: 8px; }
.pcd-addon-edit .pcd-addon-t { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.pcd-addon-edit .pcd-addon-in { flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.pcd-addon-edit .pc-unit { min-width: 0; white-space: normal; }
.pcd-addon-edit .pc-money { width: 100%; min-width: 0; flex-shrink: 1; }
/* 0922leerpricing (3): Split-Header ohne eigenes Titelbild. Die Flaeche faellt
   nicht weg — sie traegt data-pms-slot="pro.pricing.hero" und ist damit der Weg
   zum ersten Bild (Himejimas Kreis). Gestrichelt = "hier fehlt etwas", nicht
   "hier ist nichts". */
.pro-hero-still-empty { background: var(--pro-bg); border-style: dashed; }