/* ==========================================================================
   MBDev.tech Rebuild – Core UI CSS (CLEAN) – v2 (Light/Dark fixes)
   - Fix: Inputs/Selects/Textareas im Lightmode
   - Fix: Badges (Textfarbe) im Lightmode
   - Fix: Duplikate (mb-input / mb-pill) konsolidiert
   - Header Wallet: linke Spalte etwas breiter als rechte
   ========================================================================== */

/* -----------------------------
   0) Reset / Base
----------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-height: 100dvh;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  line-height: 1.5;
}

img, svg, video{ max-width: 100%; height: auto; }
button, input, select, textarea{ font: inherit; }

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection{
  background: color-mix(in oklab, var(--accent) 35%, transparent);
}

/* -----------------------------
   1) Theme Tokens
----------------------------- */
:root{
  --accent:   #18c8d6;
  --accent-2: #00b4ff;
  --accent-3: #22c55e;
  --danger:   #ef4444;
  --warning:  #f59e0b;
  --info:     #38bdf8;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;

  --shadow-sm: 0 6px 14px rgba(0,0,0,0.12);
  --shadow-md: 0 10px 26px rgba(0,0,0,0.18);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.22);

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 120ms;
  --dur-2: 200ms;

  /* Form control tokens */
  --control-bg: color-mix(in oklab, var(--surface-2) 70%, var(--surface));
  --control-bg-focus: color-mix(in oklab, var(--surface-2) 78%, var(--surface));
  --control-border: var(--border);

  /* Badge tokens (defaults will be overridden by variants via CSS vars) */
  --badge-border: rgba(148,163,184,.22);
  --badge-bg: rgba(148,163,184,.08);
  --badge-fg: var(--text);
}

/* Light */
:root,
:root[data-theme="light"]{
  --bg: #eceff3;
  --bg-2: #e3e8ee;
  --surface: #f3f6fa;
  --surface-2: #ffffff;
  --border: rgba(17,24,39,0.12);

  --text: #111827;
  --text-2: rgba(17,24,39,0.78);
  --muted: rgba(17,24,39,0.60);

  --ring: color-mix(in oklab, var(--accent) 72%, #000 0%);

  --shadow-sm: 0 6px 14px rgba(17,24,39,0.08);
  --shadow-md: 0 10px 26px rgba(17,24,39,0.10);
  --shadow-lg: 0 18px 50px rgba(17,24,39,0.14);

  --glow: 0 0 0 1px color-mix(in oklab, var(--accent) 24%, transparent),
          0 16px 42px color-mix(in oklab, var(--accent) 16%, transparent);

  --control-bg: color-mix(in oklab, var(--surface-2) 92%, var(--surface));
  --control-bg-focus: color-mix(in oklab, var(--surface-2) 96%, var(--surface));
}

/* Dark */
:root[data-theme="dark"]{
  --bg: #0f1216;
  --bg-2: #131922;
  --surface: #141a23;
  --surface-2: #0d1117;
  --border: rgba(255,255,255,0.12);

  --text: rgba(255,255,255,0.92);
  --text-2: rgba(255,255,255,0.74);
  --muted: rgba(255,255,255,0.55);

  --ring: color-mix(in oklab, var(--accent) 80%, #fff 0%);

  --shadow-sm: 0 10px 18px rgba(0,0,0,0.35);
  --shadow-md: 0 16px 30px rgba(0,0,0,0.42);
  --shadow-lg: 0 22px 60px rgba(0,0,0,0.55);

  --glow: 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent),
          0 22px 72px color-mix(in oklab, var(--accent) 16%, transparent);

  --control-bg: color-mix(in oklab, var(--surface-2) 70%, var(--surface));
  --control-bg-focus: color-mix(in oklab, var(--surface-2) 76%, var(--surface));

  --badge-fg: rgba(255,255,255,.88);
}

/* Auto dark when no explicit theme */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg: #0f1216;
    --bg-2: #131922;
    --surface: #141a23;
    --surface-2: #0d1117;
    --border: rgba(255,255,255,0.12);
    --text: rgba(255,255,255,0.92);
    --text-2: rgba(255,255,255,0.74);
    --muted: rgba(255,255,255,0.55);
    --ring: color-mix(in oklab, var(--accent) 80%, #fff 0%);
    --shadow-sm: 0 10px 18px rgba(0,0,0,0.35);
    --shadow-md: 0 16px 30px rgba(0,0,0,0.42);
    --shadow-lg: 0 22px 60px rgba(0,0,0,0.55);
    --glow: 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent),
            0 22px 72px color-mix(in oklab, var(--accent) 16%, transparent);
    --control-bg: color-mix(in oklab, var(--surface-2) 70%, var(--surface));
    --control-bg-focus: color-mix(in oklab, var(--surface-2) 76%, var(--surface));
    --badge-fg: rgba(255,255,255,.88);
  }
}

/* -----------------------------
   2) Page Background / Layout
----------------------------- */
body{
  background:
    radial-gradient(900px 420px at 18% 10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(740px 380px at 84% 18%, color-mix(in oklab, var(--accent-2) 12%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg));
  color: var(--text);
}

.mb-container{
  width: min(1180px, 100% - 2 * var(--s-5));
  margin: 0 auto;
  padding: var(--s-4) 0 var(--s-3);
}

@media (max-width: 720px){
  .mb-container{
    width: min(1180px, 100% - 2 * var(--s-3));
    padding: var(--s-5) 0 var(--s-3);
  }
}

.mb-row{ display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center; }
.mb-stack{ display:grid; gap:var(--s-4); }
.mb-spacer{ height: var(--s-5); }

.mb-section{
  margin: 14px 0;
  scroll-margin-top: 90px;
}

/* -----------------------------
   3) Typography
----------------------------- */
.mb-h1{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.15; margin: 0; }
.mb-h2{ font-size: clamp(1.25rem, 1.1rem + 1.1vw, 1.7rem); margin: 0; }
.mb-p { margin: 0; color: var(--text-2); }

.mb-kicker{
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mb-h2split__accent{ color: var(--accent); }

/* Accent-Farben dürfen IMMER durchschlagen */
.mb-ai-accent,
.mb-accent { color: var(--accent); }
.mb-h1 .mb-ai-accent,
.mb-h2 .mb-ai-accent,
.mb-h3 .mb-ai-accent { color: var(--accent); }

/* -----------------------------
   4) Cards / Panels
----------------------------- */
.mb-card{
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
}

.mb-card--tight{ padding: var(--s-4); }
.mb-card--flat{ box-shadow: none; background: var(--surface); }

.mb-card--glow{
  box-shadow: var(--shadow-md), var(--glow);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}

.mb-card--hover{
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.mb-card--hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--glow);
}

.mb-divider{
  height: 1px;
  background: color-mix(in oklab, var(--border) 85%, transparent);
  margin: var(--s-4) 0;
}

.mb-card--accent::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: .9;
}

/* Card stacks: footer always bottom */
.mb-card--stack{
  display:flex;
  flex-direction:column;
  height:100%;
}
.mb-card-footer{ margin-top:auto; }

/* Subtle box */
.mb-card--subtle{
  border: 1px dashed rgba(148,163,184,.35);
  background: rgba(2,6,23,.35);
}
html[data-theme="light"] .mb-card--subtle{
  background: rgba(255,255,255,.55);
}

/* -----------------------------
   5) Buttons
----------------------------- */
.mb-btn{
  appearance:none;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 60%, transparent), var(--surface));
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  transition: transform var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.mb-btn:hover{
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-sm), 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.mb-btn:active{ transform: translateY(1px); }

.mb-btn--sm{ padding: 8px 11px; border-radius: 10px; font-size: var(--text-sm); }
.mb-btn--lg{ padding: 12px 16px; border-radius: 14px; font-size: var(--text-md); }

.mb-btn--ghost{ background: transparent; box-shadow:none; }

.mb-btn--primary{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 86%, #000 0%),
    color-mix(in oklab, var(--accent) 72%, #000 0%)
  );
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  color:#fff;
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--accent) 24%, transparent);
}
.mb-btn--primary:hover{
  border-color: color-mix(in oklab, var(--accent-2) 55%, var(--border));
  box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}

.mb-btn--danger{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--danger) 80%, #000 0%),
    color-mix(in oklab, var(--danger) 68%, #000 0%)
  );
  border-color: color-mix(in oklab, var(--danger) 55%, var(--border));
  color:#fff;
}

@media (max-width: 520px){
  .mb-btn--mobile-full{ width:100%; justify-content:center; }
}

/* -----------------------------
   6) Forms (FIX: Lightmode)
----------------------------- */
.mb-field{ display:grid; gap:8px; }

.mb-label{
  font-size: var(--text-sm);
  color: var(--text-2);
  display:flex;
  gap:10px;
  align-items:center;
}

.mb-help{ font-size: var(--text-xs); color: var(--muted); }

/* Unified control styles */
.mb-input, .mb-select, .mb-textarea,
.ai-img-row select,
.ai-img-row input[type="number"]{
  width:100%;
  border:1px solid var(--control-border);
  border-radius: 12px;
  background: var(--control-bg);
  color: var(--text);
  padding: 11px 12px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

/* sizes */
.mb-input--sm{ padding: 8px 10px; font-size: 0.9rem; }

.mb-textarea{ min-height:120px; resize:vertical; }

.mb-input::placeholder, .mb-textarea::placeholder{
  color: color-mix(in oklab, var(--muted) 85%, transparent);
}

/* Focus */
.mb-input:focus, .mb-select:focus, .mb-textarea:focus,
.ai-img-row select:focus, .ai-img-row input[type="number"]:focus{
  outline:none;
  background: var(--control-bg-focus);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Select arrow + consistent appearance */
.mb-select,
.ai-img-row select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Select dropdown options */
select option{
  background: var(--surface-2);
  color: var(--text);
}

/* Form rows */
.mb-formrow{ margin-top: 12px; }
.mb-formrow .mb-label{
  display:block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: .92rem;
}

/* -----------------------------
   7) Pills / Badges (generic) – FIX: Badge text in Lightmode
----------------------------- */
.mb-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 70%, var(--surface));
  color: var(--text-2);
}

.mb-pill__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  flex:0 0 auto;
}

/* Status variants */
.mb-pill--status-ok{
  border-color: color-mix(in oklab, var(--accent-3) 35%, var(--border));
  background: color-mix(in oklab, var(--accent-3) 10%, transparent);
}
.mb-pill--status-ok .mb-pill__dot{
  background: var(--accent-3);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-3) 22%, transparent);
}

.mb-pill--status-locked{
  border-color: color-mix(in oklab, var(--warning) 35%, var(--border));
  background: color-mix(in oklab, var(--warning) 10%, transparent);
}
.mb-pill--status-locked .mb-pill__dot{
  background: var(--warning);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--warning) 22%, transparent);
}

.mb-pill--status-error{
  border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
  background: color-mix(in oklab, var(--danger) 10%, transparent);
}
.mb-pill--status-error .mb-pill__dot{
  background: var(--danger);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent);
}

/* Badge base uses CSS variables (variants set the vars) */
.mb-badge{
  display:inline-flex;
  align-items:center;
  padding:.18rem .52rem;
  border-radius:999px;
  font-size:.72rem;
  line-height:1.1;
  white-space:nowrap;

  border:1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--badge-fg);
}

/* Lightmode: always readable text on colored badge backgrounds */
html[data-theme="light"] .mb-badge{
  --badge-fg: rgba(17,24,39,.92);
}

/* -----------------------------
   8) Grid Helpers
----------------------------- */
.mb-grid{ display:grid; gap: var(--s-4); }
.mb-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.mb-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 980px){
  .mb-grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .mb-grid--2, .mb-grid--3{ grid-template-columns: 1fr; }
}

/* -----------------------------
   9) Reduced Motion
----------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .mb-card--hover:hover{ transform:none; }
}

/* ==========================================================================
   Header + Navigation + Drawer
   ========================================================================== */
.mb-header{
  position: sticky;
  top:0;
  z-index:50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}

.mb-header__inner{
  width: min(1180px, 100% - 2 * var(--s-5));
  margin: 0 auto;
  padding: 12px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--s-4);
}

@media (max-width: 720px){
  .mb-header__inner{ width: min(1180px, 100% - 2 * var(--s-3)); }
}

/* Brand */
.mb-brand{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  font-weight:800;
  letter-spacing:-0.02em;
  user-select:none;
  white-space:nowrap;
  position: relative;
  padding: 6px 2px;
}
.mb-brand__mb{ color: var(--text); }
.mb-brand__dev{ color: var(--accent); }
.mb-brand__tech{ color: var(--muted); font-weight:700; }

/* Desktop nav */
.mb-nav{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
}

.mb-nav a{
  display:inline-flex;
  align-items:center;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  position: relative;
  transition: color var(--dur-1) var(--ease);
}
.mb-nav a:hover{ color: var(--text); }

/* Actions right */
.mb-header__actions{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.mb-burger{ display:none; }

@media (max-width: 920px){
  .mb-nav{ display:none; }
  .mb-burger{ display:inline-flex; }
}

/* Underline animation (Brand + Nav + Headerlink) */
.mb-brand::after,
.mb-nav a::after,
.mb-headerlink::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform var(--dur-2) var(--ease);
  border-radius: 999px;
  opacity: .95;
}
.mb-brand:hover::after,
.mb-nav a:hover::after,
.mb-headerlink:hover::after{ transform: scaleX(1); }

.mb-nav a.is-active::after,
.mb-nav a[aria-current="page"]::after,
.mb-headerlink.is-active::after,
.mb-headerlink[aria-current="page"]::after{ transform: scaleX(1); }

/* Drawer */
.mb-drawer-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--dur-2) var(--ease);
  z-index:60;
}

.mb-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100dvh;
  width: min(360px, 86vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(102%);
  transition: transform var(--dur-2) var(--ease);
  z-index:70;
  display:grid;
  grid-template-rows: auto 1fr auto;
}

.mb-drawer__header{
  padding: 14px 14px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
}

.mb-drawer__body{
  padding:14px;
  display:grid;
  gap:8px;
  overflow:auto;
}

.mb-drawer__footer{
  padding:14px;
  border-top:1px solid var(--border);
  display:grid;
  gap:10px;
}

.mb-drawer__link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 60%, var(--surface));
  color: var(--text);
}

/* open state */
.mb-drawer-open .mb-drawer-overlay{ opacity:1; pointer-events:auto; }
.mb-drawer-open .mb-drawer{ transform: translateX(0); }

/* Hide auth buttons on very small screens (drawer handles it) */
@media (max-width: 720px){
  .mb-header__actions a.mb-btn{ display:none; }
}

/* Header link (Mein Konto etc.) */
.mb-headerlink{
  display:inline-flex;
  align-items:center;
  padding: 6px 2px;
  color: var(--text-2);
  font-size: var(--text-sm);
  position: relative;
  transition: color var(--dur-1) var(--ease);
}
.mb-headerlink:hover{ color: var(--text); }

/* ==========================================================================
   Theme Toggle – SVG (Sun / Moon)
   ========================================================================== */

.mb-theme-toggle{
  width:36px;
  height:36px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 70%, var(--surface));
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  transition:
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.mb-theme-toggle:hover{
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent),
    var(--shadow-sm);
}

.mb-theme-toggle:active{
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   Icon Wrapper
   -------------------------------------------------------------------------- */

.mb-theme-icon{
  position:relative;
  width:18px;
  height:18px;
}

/* Beide SVGs liegen übereinander */
.mb-theme-icon svg{
  position:absolute;
  inset:0;
  width:18px;
  height:18px;
  fill:none;
  stroke-width:2;
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* --------------------------------------------------------------------------
   Sun (Light Mode)
   -------------------------------------------------------------------------- */

.icon-sun{
  stroke: var(--accent);
}

html[data-theme="light"] .icon-sun{
  opacity:1;
  transform: rotate(0deg) scale(1);
}

html[data-theme="dark"] .icon-sun{
  opacity:0;
  transform: rotate(90deg) scale(0.6);
}

/* --------------------------------------------------------------------------
   Moon (Dark Mode)
   -------------------------------------------------------------------------- */

.icon-moon{
  stroke: var(--accent); /* bewusst MBDev-Blau statt gelb */
}

html[data-theme="dark"] .icon-moon{
  opacity:1;
  transform: rotate(0deg) scale(1);
}

html[data-theme="light"] .icon-moon{
  opacity:0;
  transform: rotate(-90deg) scale(0.6);
}


/* ==========================================================================
   Code Background
   ========================================================================== */
.mb-code-bg{
  position:relative;
  overflow-x:hidden;
}

.mb-code-bg::before{
  content: attr(data-code);
  position: fixed;
  inset: -20%;
  z-index: -2;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;

  white-space: pre;
  opacity: 0.08;
  color: var(--text);
  filter: blur(1.4px);
  pointer-events: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.mb-hero{ padding: var(--s-6) 0; }
.mb-hero--compact{ padding: var(--s-3) 0 var(--s-6); }

.mb-hero-card{
  padding: 30px 30px;
  text-align:center;
}

.mb-hero-logo{
  display:flex;
  justify-content:center;
  align-items:center;
}

.mb-hero-logo img{
  max-width:150px;
  width:100%;
  height:auto;
  opacity: .95;
}

.mb-hero-separator{
  width:120px;
  height:2px;
  margin:14px auto;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .9;
}

.mb-hero-points{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:.95rem;
  letter-spacing:.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.mb-hero-contact{ margin-top:22px; }
.mb-hero-contact a{
  color: var(--accent);
  font-size:.95rem;
  font-weight:500;
}
.mb-hero-contact a:hover{ color: var(--accent-2); }

@media (max-width: 600px){
  .mb-hero-card{ padding: 36px 22px; }
  .mb-hero-logo img{ max-width: 220px; }
}


/* ---------------------------------------------
   Dauerhafter Logo-Trace (Final)
   --------------------------------------------- */

.mb-hero-logo .mb-logo-spin{
	color: var(--accent);
}

/* SVG selbst: kein Halo */
.mb-hero-logo .mb-logo-spin svg{
	width: 150px;
	height: auto;
	overflow: visible;
	filter: none;
}

/* Standard (Lightmode) */
.mb-hero-logo .mb-logo-spin .mb-logo-trace{
	opacity: .95;

	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;

	/* dunkle, präzise Linie */
	stroke: rgba(0,0,0,0.55);

	/* blauer Glow */
	filter:
		drop-shadow(0 0 10px rgba(0,207,232,0.75))
		drop-shadow(0 0 20px rgba(0,207,232,0.45));

	animation: mb-logo-trace-run 7.5s linear infinite;
}

/* Darkmode – sichtbar, aber edel */
html[data-theme="dark"] .mb-hero-logo .mb-logo-spin .mb-logo-trace{
	/* heller Kern mit Accent-Mix */
	stroke: color-mix(in oklab, var(--accent) 35%, white 65%);

	filter:
		drop-shadow(0 0 12px rgba(0,207,232,0.85))
		drop-shadow(0 0 26px rgba(0,207,232,0.55));
}

/* Bewegung */
@keyframes mb-logo-trace-run{
	0%   { stroke-dashoffset: 1000; opacity: 0.35; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 0.35; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
	.mb-hero-logo .mb-logo-spin .mb-logo-trace{
		animation: none;
	}
}



/* ==========================================================================
   Footer
   ========================================================================== */
.mb-footer-min{
  border-top: 1px solid var(--border);
  margin-top: var(--s-1);
  padding: 10px 0;
  color: var(--muted);
  font-size: .8rem;
}

.mb-footer-min__inner{
  width: min(1180px, 100% - 2 * var(--s-4));
  margin: 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.mb-footer-min a{ color: var(--muted); }
.mb-footer-min a:hover{ color: var(--accent); }

.mb-footer-sep{
  opacity:.35;
  margin: 0 2px;
}

/* ==========================================================================
   Responsive helpers
   ========================================================================== */
.mb-hide-mobile { display: block; }
.mb-show-mobile { display: none; }

@media (max-width: 720px){
  .mb-hide-mobile { display: none; }
  .mb-show-mobile { display: block; }
}

/* ==========================================================================
   Tool Cards + Status (single source of truth)
   ========================================================================== */
.mb-toolcard{
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 18px;
  margin-top: 14px;
}

.mb-toolcard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.mb-toolcard__titlewrap{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.mb-toolcard__title{
  margin:0;
  font-size: 1.35rem;
  line-height: 1.2;
  white-space: nowrap;
}

.mb-toolcard__desc{
  margin: 10px 0 0;
  color: var(--text-2);
}

.mb-toolcard__divider{
  height:1px;
  margin: 14px 0;
  background: color-mix(in oklab, var(--border) 85%, transparent);
}

.mb-toolcard__bottom{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.mb-toolcard__hint{
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 720px;
}

.mb-toolcard__meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Status pill */
.mb-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 68%, var(--surface));
  font-size: var(--text-xs);
  color: var(--text-2);
}

.mb-status__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--muted) 18%, transparent);
}

.mb-status--ok{
  border-color: color-mix(in oklab, var(--accent-3) 35%, var(--border));
}
.mb-status--ok .mb-status__dot{
  background: var(--accent-3);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-3) 22%, transparent);
}

.mb-status--locked{
  border-color: color-mix(in oklab, var(--warning) 35%, var(--border));
}
.mb-status--locked .mb-status__dot{
  background: color-mix(in oklab, var(--warning) 70%, #000 0%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--warning) 22%, transparent);
}

/* Mobile */
@media (max-width: 720px){
  .mb-toolcard__top{ align-items:flex-start; }
  .mb-toolcard__title{ white-space: normal; }
}

/* ==========================================================================
   AI (MBDevAI)
   ========================================================================== */
.mb-ai-headline{ display:flex; gap:10px; align-items:baseline; }
.mb-ai-headline .mb-ai-accent{ color: var(--accent); font-weight: 800; }

.mb-ai-hero{ display: grid; gap: var(--s-4); }
.mb-ai-hero p{ max-width: 78ch; }

.mb-ai-grid{ display:grid; gap: var(--s-4); }
@media (min-width: 980px){ .mb-ai-grid{ grid-template-columns: 1.1fr .9fr; } }

/* Chat */
.ai-chat-log{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  height: 650px;
  max-height: 65vh;
  overflow-y: auto;
  background:
    radial-gradient(900px 380px at 18% 18%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(740px 380px at 84% 85%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 62%),
    color-mix(in oklab, var(--surface-2) 20%, var(--surface));
  font-size: .92rem;
}

.ai-msg{ margin: .55rem 0; }
.ai-msg--user{ text-align: right; }
.ai-msg--ai{ text-align: left; }

.ai-msg-inner{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(100%, 720px);
}
.ai-msg--user .ai-msg-inner{ align-items: flex-end; margin-left:auto; }

.ai-msg-meta{
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .15rem;
  display:flex;
  align-items:center;
  gap:.35rem;
}

.ai-msg-meta-chip{
  padding: .05rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
  background: color-mix(in oklab, var(--surface-2) 70%, var(--surface));
}

.ai-msg-bubble{
  display:inline-block;
  padding: .55rem .8rem;
  border-radius: 14px;
  max-width: 100%;
  word-wrap: break-word;
  white-space: pre-line;
}

.ai-msg--user .ai-msg-bubble{
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-2) 65%, #000 0%),
    color-mix(in oklab, var(--accent) 75%, #000 0%)
  );
  color: #fff;
}

.ai-msg--ai .ai-msg-bubble{
  background: color-mix(in oklab, var(--surface-2) 20%, var(--surface));
  border: 1px solid var(--border);
  color: var(--text);
}

.ai-chat-form{ display:flex; flex-direction:column; gap: var(--s-3); margin-top: var(--s-3); }

.ai-chat-input{
  width: 100%;
  resize: vertical;
  min-height: 80px;
  max-height: 220px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--control-bg);
  color: var(--text);
  outline: none;
}
.ai-chat-input:focus{
  background: var(--control-bg-focus);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}

.ai-chat-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s-3);
  flex-wrap:wrap;
}
.ai-chat-status{ font-size: var(--text-sm); color: var(--muted); }

/* Agent selector */
.ai-agent-toggle-group{ display:flex; flex-wrap:wrap; gap: .45rem; margin-top: .2rem; }

.ai-agent-pill{
  appearance:none;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 55%, var(--surface));
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-size: .85rem;
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  transition: transform var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
  user-select:none;
}
.ai-agent-pill:hover{
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}
.ai-agent-pill--active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  color: #041016;
  font-weight: 700;
}

/* Slim Agent Buttons */
.ai-agent-pill--slim{
  padding:.34rem .62rem;
  font-size:.82rem;
  border-radius:999px;
  gap:.35rem;
  line-height:1.1;
  background: rgba(2,6,23,.55);
}
html[data-theme="light"] .ai-agent-pill--slim{
  background: rgba(255,255,255,.65);
}
.ai-agent-pill--slim.ai-agent-pill--active{
  background: radial-gradient(circle at top left, #06b6d4, #0ea5e9);
  color:#020617;
  border-color:#22d3ee;
  box-shadow: 0 0 16px rgba(45,212,191,.45);
}

/* Image tool */
.ai-img-layout{ display:flex; flex-direction:column; gap: var(--s-3); }
.ai-img-row{ display:flex; flex-wrap:wrap; gap: var(--s-3); align-items:center; }
.ai-img-row label{ font-size: var(--text-sm); color: var(--text-2); }

.ai-img-prompt{
  width:100%;
  resize: vertical;
  min-height: 70px;
  max-height: 200px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--control-bg);
  color: var(--text);
  outline:none;
}
.ai-img-prompt:focus{
  background: var(--control-bg-focus);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}

.ai-img-status{ font-size: var(--text-sm); color: var(--muted); }

.ai-img-results{ display:flex; flex-wrap:wrap; gap: var(--s-3); }
.ai-img-thumb{
  border-radius: var(--r-md);
  overflow:hidden;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 40%, var(--surface));
}
.ai-img-thumb img{ display:block; max-width: 220px; height:auto; }
.ai-img-thumb-footer{
  font-size: var(--text-xs);
  padding: 8px 10px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 60%, var(--surface));
}

/* Modal */
.ai-img-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.58);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 2000;
}
.ai-img-modal-overlay.is-active{ display:flex; }

.ai-img-modal{
  width: min(980px, 96vw);
  max-height: 85vh;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: var(--s-4);
  display:flex;
  flex-direction:column;
  box-shadow: var(--shadow-lg);
}
.ai-img-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.ai-img-modal-title{ font-size: var(--text-md); font-weight: 700; }
.ai-img-modal-close{
  background: none;
  border: 0;
  color: var(--text);
  font-size: 1.6rem;
  cursor:pointer;
  line-height:1;
  padding: .1rem .25rem;
}
.ai-img-modal-body{ overflow:auto; max-height: calc(85vh - 4.5rem); }
body.ai-modal-open{ overflow:hidden; }

/* Typing indicator */
.ai-typing-dots{ display:inline-flex; align-items:center; gap: 6px; }
.ai-typing-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%,
    color-mix(in oklab, var(--accent) 35%, #fff 0%),
    var(--accent) 40%,
    color-mix(in oklab, var(--bg) 80%, #000 0%) 70%);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 55%, transparent);
  animation: ai-typing-wave 1s infinite ease-in-out;
  opacity: .75;
}
.ai-typing-dot:nth-child(2){ animation-delay: .12s; }
.ai-typing-dot:nth-child(3){ animation-delay: .24s; }

@keyframes ai-typing-wave{
  0%, 80%, 100% { transform: translateY(0) scale(0.9); opacity: .55; }
  40% { transform: translateY(-5px) scale(1.1); opacity: 1; }
}

@media (max-width: 900px){ .ai-chat-log{ height: 480px; } }
@media (max-width: 640px){
  .ai-chat-log{ height: 360px; }
  .ai-agent-pill{ font-size: .82rem; padding: 7px 10px; }
}

/* Equal height split (AI) */
.ai-split{
  display:flex;
  gap:14px;
  align-items:stretch;
  flex-wrap:wrap;
}
.ai-left{
  flex: 0 0 300px;
  max-width: 300px;
  width: 100%;
  display:flex;
}
.ai-left > .mb-card{
  width:100%;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.ai-right{
  flex: 1 1 520px;
  min-width: min(100%, 520px);
  display:flex;
  flex-direction:column;
}
.ai-right .ai-chat-log{ flex:1 1 auto; }

@media (max-width: 980px){
  .ai-left{ flex: 1 1 100%; max-width: 100%; }
}

/* ==========================================================================
   Header Wallet – 2-zeilig / 2-spaltig
   FIX: linke Spalte breiter, rechte etwas schmaler (Long badge + "+N")
   ========================================================================== */

/* Slot bleibt stabil im Header */
.mb-header__walletslot{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
}
@media (max-width: 900px){
  .mb-header__walletslot{ display:none; } /* Mobile -> Drawer */
}

/* Wallet-Box */
.mb-walletbox{
  display:grid;
  grid-template-columns: 1.35fr .65fr; /* links breiter, rechts schmaler */
  column-gap: 14px;
  row-gap: 6px;

  padding: .34rem .55rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.18);
  backdrop-filter: blur(6px);

  width: 320px;
  min-width: 320px;
  white-space: nowrap;
}
html[data-theme="light"] .mb-walletbox{
  background: rgba(255,255,255,.55);
}

/* Zellen */
.mb-walletbox__cell{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.mb-walletbox__cell--left{ justify-content:flex-start; }
.mb-walletbox__cell--right{ justify-content:flex-end; }

/* Label / Value */
.mb-walletbox__label{
  font-size:.66rem;
  letter-spacing:.03em;
  opacity:.55;
}
.mb-walletbox__value{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* Zahlen */
.mb-walletbox strong{
  font-weight:600;
  font-size:.78rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing:.01em;
}
html[data-theme="dark"] .mb-walletbox strong{
  color: rgba(255,255,255,.90);
}

#mb-header-balance{
  display:inline-block;
  width: 104px;
  text-align:right;
}
#mb-header-credits{
  display:inline-block;
  width: 92px;
  text-align:right;
}

/* Hover Pop */
.mb-hoverpop{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.mb-mini-plus{
  font-size:.68rem;
  opacity:.7;
  border:1px solid rgba(148,163,184,.18);
  padding:.08rem .28rem;
  border-radius:999px;
  line-height:1.1;
  flex: 0 0 auto;
}

.mb-popover{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;

  width: 260px;
  padding:10px;

  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.92);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);

  opacity:0;
  transform: translateY(-4px);
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
}
html[data-theme="light"] .mb-popover{
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(17,24,39,.18);
}
.mb-popover--wide{ width: 520px; }

.mb-hoverpop:hover .mb-popover,
.mb-hoverpop:focus-within .mb-popover{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.mb-popover__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Mini-Tabelle (Plan Hover) */
.mb-mini-table{
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  overflow:hidden;
}
.mb-mini-table__head,
.mb-mini-table__row{
  display:grid;
  grid-template-columns: 1.2fr .8fr .9fr .9fr .7fr;
  gap:10px;
  padding:8px 10px;
  align-items:center;
}
.mb-mini-table__head{
  font-size:.66rem;
  letter-spacing:.04em;
  opacity:.7;
  background: rgba(148,163,184,.06);
}
.mb-mini-table__row{
  font-size:.78rem;
  border-top:1px solid rgba(148,163,184,.10);
}

/* Drawer Wallet */
.mb-walletdrawer{
  border:1px solid rgba(148,163,184,.16);
  background: rgba(2,6,23,.22);
  border-radius: 14px;
  padding: 10px;
}
html[data-theme="light"] .mb-walletdrawer{
  background: rgba(255,255,255,.55);
}
.mb-walletdrawer__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ==========================================================================
   Badge Color Map (Roles + Plans) via CSS vars
   ========================================================================== */

/* Roles */
.mb-badge--owner       { --badge-border: rgba(34,211,238,.75); --badge-bg: rgba(34,211,238,.12); }
.mb-badge--admin       { --badge-border: rgba(248,113,113,.80); --badge-bg: rgba(248,113,113,.12); }
.mb-badge--staff_plus  { --badge-border: rgba(248,113,113,.80); --badge-bg: rgba(248,113,113,.12); }
.mb-badge--staff       { --badge-border: rgba(248,113,113,.80); --badge-bg: rgba(248,113,113,.12); }

.mb-badge--vip_plus    { --badge-border: rgba(236,72,153,.80); --badge-bg: rgba(236,72,153,.12); }
.mb-badge--vip         { --badge-border: rgba(236,72,153,.80); --badge-bg: rgba(236,72,153,.12); }

.mb-badge--ai_plus     { --badge-border: rgba(251,146,60,.85); --badge-bg: rgba(251,146,60,.12); }
.mb-badge--ai          { --badge-border: rgba(251,146,60,.85); --badge-bg: rgba(251,146,60,.12); }

.mb-badge--dev_plus    { --badge-border: rgba(34,197,94,.75);  --badge-bg: rgba(34,197,94,.10); }
.mb-badge--dev         { --badge-border: rgba(34,197,94,.75);  --badge-bg: rgba(34,197,94,.10); }
.mb-badge--dev_learn   { --badge-border: rgba(34,197,94,.75);  --badge-bg: rgba(34,197,94,.10); }

.mb-badge--streamer_plus { --badge-border: rgba(167,139,250,.80); --badge-bg: rgba(167,139,250,.12); }
.mb-badge--streamer      { --badge-border: rgba(167,139,250,.80); --badge-bg: rgba(167,139,250,.12); }

.mb-badge--member_plus { --badge-border: rgba(96,165,250,.80);  --badge-bg: rgba(96,165,250,.12); }
.mb-badge--member      { --badge-border: rgba(96,165,250,.80);  --badge-bg: rgba(96,165,250,.12); }

.mb-badge--user        { --badge-border: rgba(148,163,184,.35); --badge-bg: rgba(148,163,184,.08); }

/* Plans (your current plan_key naming) */
.mb-badge--free           { --badge-border: rgba(148,163,184,.35); --badge-bg: rgba(148,163,184,.08); }
.mb-badge--unlimited      { --badge-border: rgba(34,211,238,.75);  --badge-bg: rgba(34,211,238,.12); }

/* If you keep category tier keys (member_basic, dev_premium, etc.) */
.mb-badge--member_free     { --badge-border: rgba(34,197,94,.75);  --badge-bg: rgba(34,197,94,.10); }
.mb-badge--member_basic    { --badge-border: rgba(96,165,250,.80);  --badge-bg: rgba(96,165,250,.12); }
.mb-badge--member_premium  { --badge-border: rgba(167,139,250,.80); --badge-bg: rgba(167,139,250,.12); }
.mb-badge--member_vip      { --badge-border: rgba(236,72,153,.80);  --badge-bg: rgba(236,72,153,.12); }

.mb-badge--dev_free        { --badge-border: rgba(34,197,94,.75);  --badge-bg: rgba(34,197,94,.10); }
.mb-badge--dev_basic       { --badge-border: rgba(96,165,250,.80);  --badge-bg: rgba(96,165,250,.12); }
.mb-badge--dev_premium     { --badge-border: rgba(167,139,250,.80); --badge-bg: rgba(167,139,250,.12); }
.mb-badge--dev_vip         { --badge-border: rgba(236,72,153,.80);  --badge-bg: rgba(236,72,153,.12); }

.mb-badge--streamer_free   { --badge-border: rgba(34,197,94,.75);  --badge-bg: rgba(34,197,94,.10); }
.mb-badge--streamer_basic  { --badge-border: rgba(96,165,250,.80);  --badge-bg: rgba(96,165,250,.12); }
.mb-badge--streamer_premium{ --badge-border: rgba(167,139,250,.80); --badge-bg: rgba(167,139,250,.12); }
.mb-badge--streamer_vip    { --badge-border: rgba(236,72,153,.80);  --badge-bg: rgba(236,72,153,.12); }

.mb-badge--ai_free         { --badge-border: rgba(34,197,94,.75);  --badge-bg: rgba(34,197,94,.10); }
.mb-badge--ai_basic        { --badge-border: rgba(96,165,250,.80);  --badge-bg: rgba(96,165,250,.12); }
.mb-badge--ai_premium      { --badge-border: rgba(167,139,250,.80); --badge-bg: rgba(167,139,250,.12); }
.mb-badge--ai_vip          { --badge-border: rgba(236,72,153,.80);  --badge-bg: rgba(236,72,153,.12); }


/* ==========================================================================
   Learn Callouts (Merke / Tipp / Achtung)
   ========================================================================== */

.mb-callout{
  border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 10%, var(--surface-2)),
    var(--surface)
  );
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.mb-callout__top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 6px;
}

.mb-callout__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 12%, var(--surface-2));
  color: var(--text-primary);
}

.mb-callout__title{
  font-weight:700;
  font-size: .95rem;
}

.mb-callout__text{
  margin:0;
  color: var(--muted);
  line-height: 1.55;
}

/* Varianten */
.mb-callout--tip{
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.mb-callout--tip .mb-callout__badge{
  background: color-mix(in oklab, var(--accent) 14%, var(--surface-2));
}

.mb-callout--note{
  border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
}
.mb-callout--note .mb-callout__badge{
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2));
}

.mb-callout--warn{
  border-color: color-mix(in oklab, #f97373 40%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in oklab, #f97373 10%, var(--surface-2)),
    var(--surface)
  );
}
.mb-callout--warn .mb-callout__badge{
  border-color: color-mix(in oklab, #f97373 40%, var(--border));
  background: color-mix(in oklab, #f97373 10%, var(--surface-2));
}

/* ==========================================================================
   Learn Code Blocks (Editor Look)
   ========================================================================== */

.mb-code{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in oklab, var(--surface-2) 80%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.mb-code__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--surface-2) 90%, transparent),
    var(--surface)
  );
}

.mb-code__dots{
  display:flex;
  gap:6px;
}
.mb-code__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: color-mix(in oklab, var(--muted) 35%, var(--surface-2));
}
.mb-code__dot:nth-child(2){ opacity:.8; }
.mb-code__dot:nth-child(3){ opacity:.6; }

.mb-code__label{
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  margin-left:auto;
}

.mb-code pre{
  margin:0;
  padding: 12px 14px;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-primary);
  tab-size: 4;
}

.mb-code code{
  font-family: inherit;
}