/* ============================================================
 * @AI_GUIDE: Editor-Layout (Step 1 + 2) — Top-Bar, Bottom-Bar, Preview,
 * Bottom-Sheet, Sub-Tabs, Color/Font/Text/Signature/Background-Manager,
 * Selection-Overlay, Draw-Pad, Image-Uploader, SVG-spezifische Styles.
 *
 * Iteration 14g (Mo 2026-06-14): Split aus styles.css (war 2933 Zeilen).
 * Geschwister-Files: base.css, editor.css, checkout.css, components.css
 * ============================================================ */

/* ============================================================
 * Top-Bar — mit overlap-Logo (Iteration 2)
 * Pattern: Instagram/Discord — Avatar/Logo bricht aus Header heraus.
 * ============================================================ */

.top-bar {
  flex: 0 0 var(--top-bar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  position: relative;
  z-index: 20;  /* über Preview, damit Logo overlap funktioniert */
}

.tb-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tb-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tb-icon {
  width: 40px; height: 40px;
  border: none; background: transparent; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--text);
  transition: background 120ms;
}
.tb-icon:hover { background: var(--surface-2); }
.tb-icon svg { width: 22px; height: 22px; }
/* Iteration 13n-8: Reset (Trash) — destructive, daher rotes Hover. */
.tb-reset { color: var(--text-muted); }
.tb-reset:hover { background: #fee2e2; color: #b91c1c; }

/* Alexandra-Avatar (Iteration 9 — Konvention aus UI_Conventions.md):
   border-radius 0 am img (Bild hat eingebauten grünen Online-Dot, nicht clippen).
   max-height: 44px Mobile / 48px Desktop (siehe Media-Queries). */
.tb-chat {
  background: transparent;
  border: none;
  padding: 0;
  display: grid;
  place-items: center;
  height: 100%;
}
.tb-chat img {
  border-radius: 0;
  max-height: 44px;
  width: auto;
  display: block;
}
.tb-chat:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Iteration 13l-5 (Mo 2026-06-13): Alexandra-Sprechblase — übernommen aus
   autogrammkarten-konfigurator, an unser Design-System angepasst.
   Erscheint einmalig 30s nach App-Start für 8s. */
.alexandra-support {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.alexandra-bubble {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  /* Mo 2026-06-24: Marketing-Push SOMMER26 — Bubble grün für Aufmerksamkeit. */
  background: #1D9E75;
  border: 1px solid #1D9E75;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(29, 158, 117, 0.28);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 1000;
}
.alexandra-bubble b {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.alexandra-bubble::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 16px;
  width: 12px;
  height: 12px;
  background: #1D9E75;
  border-top: 1px solid #1D9E75;
  border-left: 1px solid #1D9E75;
  transform: rotate(45deg);
}
.alexandra-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Logo: zentriert in der Top-Bar, simple Variante (Iteration 8).
   Mo's Wunsch 2026-06-13: kein runder Avatar mit Overlap. */
.tb-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tb-logo-img {
  height: 32px;
  width: auto;
  display: block;
}

.tb-right { display: flex; align-items: center; gap: 6px; }
.tb-next {
  height: 38px;
  padding: 0 18px;
  border: none;
  background: var(--accent);
  color: #001a25;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: background 120ms, transform 80ms;
}
.tb-next:hover { background: #5fc6ee; }
.tb-next:active { transform: scale(0.97); }

/* Iteration 13n-5/6 (Mo 2026-06-13): Big Orange Button (BOB).
   Farbe = knalligeres F24-Orange (Logo: #f6a318, hier saturiert auf #ff9800).
   Auf Desktop doppelt so breit (min-width 160px) damit BOB nicht in der
   Topbar verschwimmt. Mobile bleibt kompakt um Platz zu sparen. */
.tb-next-bob {
  background: #ff9800;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255, 152, 0, 0.35);
}
.tb-next-bob:hover { background: #ff8c00; }
.tb-next-bob:active { background: #e57f00; transform: scale(0.97); }

/* Iteration 13n-4 (Mo 2026-06-13): Zurück-Button — nur sichtbar auf Rückseite.
   Desktop: Icon + Text. Mobile: nur Icon (Platz-Sparen — Mo's Sorge). */
.tb-back {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.tb-back:hover { background: var(--surface-2); border-color: var(--accent-dark); }
.tb-back svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* .is-hidden ist jetzt generisch in base.css definiert */

/* ============================================================
 * Preview-Bereich
 * ============================================================ */

.preview-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 12px;  /* Iteration 8: kein Logo-Overlap mehr */
  overflow: hidden;
  position: relative;
}

.side-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.st-btn {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-muted);
}
.st-btn.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-1);
  font-weight: 600;
}

/* Preview-Frame: Aspect-Ratio-Container.
   Iteration 5: min-height: 200px sichert Karten-Sichtbarkeit auf Mobile;
   max-height-Animation via transition statt transform. */
.preview-frame {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  min-height: 200px;
  transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#preview-svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#preview-svg svg {
  /* Portrait-Standard (Auto-Konfigurator): height-driven — Karte füllt den
     vertikalen Space, Breite ergibt sich aus Aspect. Original-Iteration-7-
     Verhalten. NICHT ändern für Portrait — Karte würde sonst zu hoch werden. */
  height: 100%;
  width: auto;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: var(--shadow-3);
  display: block;
}
/* Sprint Auto-Landscape (Mo 2026-07-02):
   1) max-width erweitert auf 672px (=480*1.4) damit Landscape-Karte in
      der gleichen Grössenordnung wie Portrait ist (Portrait: 480 breit
      × 672 hoch; Landscape: 672 breit × 480 hoch).
   2) Container flex: 0 0 auto damit er auf die SVG-Höhe schrumpft
      (sonst grauer Raum + box-shadow drum herum sichtbar).
   3) SVG width-driven: nimmt volle Container-Breite, Höhe folgt Aspect. */
body[data-card-format="landscape"] .preview-frame {
  flex: 0 0 auto;
  max-width: 672px;
}
body[data-card-format="landscape"] #preview-svg {
  height: auto;
}
body[data-card-format="landscape"] #preview-svg svg {
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* Preview-Anpassung je nach Sheet-State (Iteration 5 — Mo 2026-06-13)
   Lesson: max-width KAPPEN war falsch — auf Mobile hat das die Karte
   übermäßig geschrumpft. Jetzt: nur max-height begrenzen, breite passt
   sich proportional an (Aspect-Ratio aus SVG viewBox).
   Plus: KEINE transition mehr (Browser/iOS-Safari quirks) — Sheet animiert,
   Karte stabilisiert sich am Ende. */

/* Iteration 8: Mo's Wunsch — Karte und Side-Toggle bleiben EXAKT wie im Default,
   auch wenn Sheet offen ist. Keine künstliche Schrumpfung mehr. Pointer-events
   müssen aber off sein damit keine Karten-Klicks durchs Sheet gehen. */
body[data-sheet-state="peek"] .preview-area,
body[data-sheet-state="full"] .preview-area {
  pointer-events: none;
}

/* ============================================================
 * Bottom-Bar
 * ============================================================ */

.bottom-bar {
  flex: 0 0 calc(var(--bottom-bar-h) + var(--safe-bottom));
  display: grid;
  /* Sprint Auto-Landscape (Mo 2026-07-02, präventiv aus Playbook Bug 6):
     grid-auto-flow + auto-columns macht die Tabs automatisch full-width je
     nach Anzahl. Auto hat aktuell 5 Tabs (identisch zu vorher), aber falls
     Landscape-Rückseite später Tabs anders lauft (Signatur weglassen etc.),
     würde `repeat(5, 1fr)` linksbündig mit leeren Spalten enden. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  z-index: 10;
}

.bb-tab {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  padding: 8px 4px;
  position: relative;
  transition: color 150ms;
}
.bb-tab svg { width: 22px; height: 22px; stroke: currentColor; }
.bb-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.bb-tab:hover { color: var(--text); }
.bb-tab.active {
  color: var(--accent-dark);
}
.bb-tab.active::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-dark);
}

/* ============================================================
 * Sub-Tabs (Pill-Pattern im Sheet) — Iteration 2
 * Instagram-Story-Style horizontal-scrollable Pills.
 * Anatomie: Container scrollt, Pills haben fixe Größe.
 * ============================================================ */

.sub-tabs {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 5;
  padding: 4px 0 12px;
  margin: -8px -18px 12px;  /* aus Sheet-Body-Padding "ausbrechen" für Edge-to-Edge */
  border-bottom: 1px solid var(--border);
}
.st-scroll {
  display: flex;
  gap: 8px;
  padding: 4px 18px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.st-scroll::-webkit-scrollbar { display: none; }

.st-pill {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: all 150ms;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-pill:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.st-pill.active {
  background: var(--text);
  color: white;
  border-color: var(--text);
  font-weight: 600;
}
.st-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

/* ============================================================
 * Bottom-Sheet + Backdrop
 * ============================================================ */

/* Backdrop — Iteration 7: KEIN backdrop-filter mehr.
   Lesson: backdrop-filter: blur() lag über dem GANZEN Viewport und hat damit
   auch die Karte unscharf gemacht. Das war die ECHTE Ursache des "Blurry"-Bugs,
   NICHT SVG-Rendering, NICHT Font-Hinting. Stattdessen nur opake Verdunklung
   für Sheet-Trennung. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 280ms;
  z-index: 100;
  pointer-events: none;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

body[data-sheet-state="full"] .sheet-backdrop {
  background: rgba(0, 0, 0, 0.32);
}

/* ─── Sheet mit 3 Snap-Levels (Iteration 3) ─────────────────
   Sheet-Höhe ist fix 85dvh. Sichtbarkeit via translateY:
     state-closed → translateY(100%)  unsichtbar
     state-peek   → translateY(50%)   ~50% Screen sichtbar, Karte bleibt scharf
     state-full   → translateY(0)     85% Screen sichtbar, Karte schrumpft mehr
   ─────────────────────────────────────────────────────────── */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 85vh;
  height: 85dvh;
  background: var(--surface);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
  will-change: transform;
}
.sheet.state-closed { transform: translateY(100%); }
.sheet.state-peek   { transform: translateY(50%); }
.sheet.state-full   { transform: translateY(0); }

/* Grip-Zone (größerer Touch-Bereich für Drag, nicht nur die kleine Linie) */
.sheet-grip-zone {
  padding: 8px 0 4px;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
}
.sheet-grip {
  width: 40px; height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 0 auto;
  pointer-events: none;
}
.sheet-grip-zone:active { cursor: grabbing; }
.sheet-grip-zone:active .sheet-grip { background: var(--accent-dark); }

.sheet-header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 8px;
  flex-shrink: 0;
}
.sheet-header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  grid-column: 2;
  text-align: left;
}
.sheet-back {
  border: none;
  background: var(--surface-2);
  width: 32px; height: 32px;
  border-radius: 999px;
  color: var(--text);
  display: grid;
  place-items: center;
  grid-column: 1;
  transition: background 120ms;
}
.sheet-back:hover { background: var(--border); }
.sheet-back svg { width: 18px; height: 18px; }
.sheet-close {
  border: none;
  background: var(--surface-2);
  width: 32px; height: 32px;
  border-radius: 999px;
  font-size: 22px;
  color: var(--text-muted);
  display: grid; place-items: center;
  grid-column: 3;
}
.sheet-body {
  padding: 8px 18px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
 * Color-Picker (Iteration 2 — komplett refactored)
 * Hauptblock IST der Picker (klickbar → System-Wheel).
 * "Eigene Farbe" Block unten WEG (übersah Mo).
 * ============================================================ */

.color-picker { display: flex; flex-direction: column; gap: 14px; }

/* Iteration 10e (Mo 2026-06-13): HEX-Input wieder dazu — User soll IMMER
   einen eigenen HEX-Code eingeben können, auch wenn er nicht das Farb-Rad nutzen will. */
.cp-current-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.cp-swatch-button {
  position: relative;
  width: 64px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.cp-swatch-big {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  position: relative;
  display: grid;
  place-items: center;
  transition: border-color 150ms, transform 80ms;
}
.cp-swatch-button:hover .cp-swatch-big { border-color: var(--accent-dark); }
.cp-swatch-button:active .cp-swatch-big { transform: scale(0.96); }

/* Plus-Icon: "hier kannst du klicken" — Farb-Rad */
.cp-pick-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-1);
  opacity: 0.85;
  transition: transform 150ms, opacity 150ms;
}
.cp-pick-icon svg { width: 14px; height: 14px; }
.cp-swatch-button:hover .cp-pick-icon {
  opacity: 1;
  transform: scale(1.1);
}

.cp-hex-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-hex-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cp-hex-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface);
}
.cp-hex-input:focus {
  outline: none;
  border-color: var(--accent-dark);
}

/* Versteckter Native Color-Input (System-Wheel).
   Iteration 13n-9 (Mo 2026-06-13): voll-überlappend statt clip:rect.
   iOS Safari öffnet das System-Color-Wheel NICHT zuverlässig wenn der
   Input zu klein/clipped ist. Jetzt: volle Größe des Parent-Buttons,
   transparent obendrauf — Touch trifft direkt das input-Element. */
.cp-native-hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.cp-section-title {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.cp-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.cp-swatch {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  padding: 0;
  transition: transform 120ms;
}
.cp-swatch:hover { transform: scale(1.1); }

/* ============================================================
 * Background-Manager (Sub-Tabs Container)
 * ============================================================ */

.bg-manager { display: flex; flex-direction: column; }
.bg-content { display: flex; flex-direction: column; gap: 14px; }

/* ============================================================
 * Elements-Manager (Sub-Tabs Container)
 * ============================================================ */

.elements-manager { display: flex; flex-direction: column; }
.elements-content { min-height: 200px; }

/* ============================================================
 * Frame-Manager (Rahmen-Picker) — Iteration 10
 * ============================================================ */

.frame-manager { display: flex; flex-direction: column; }
.frame-content { min-height: 200px; }

.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
  padding: 8px 0;
}
.frame-item {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 120ms, background 120ms;
  text-align: center;
}
.frame-item:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.frame-item.selected {
  border-color: var(--accent-dark);
  background: var(--surface-2);
}
.frame-item img {
  width: 100%;
  /* Sprint Auto-Landscape (Mo 2026-07-02): CSS-Variable damit Thumbnail-
     Aspect-Ratio bei Format-Wechsel synchron flippt. Fallback = Portrait A6
     (1/1.4). Wird von main.js beim Boot + bei S.cardFormat-Änderung gesetzt. */
  aspect-ratio: var(--card-aspect-ratio, 1 / 1.4);
  object-fit: cover;
  border-radius: 4px;
  background: #1a1a1a;
  display: block;
}
.frame-none {
  width: 100%;
  aspect-ratio: var(--card-aspect-ratio, 1 / 1.4);
  background: var(--surface-2);
  border: 1.5px dashed var(--border-strong);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--text-muted);
}
.frame-name {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================================
 * Font-Picker
 * ============================================================ */

.font-picker { display: flex; flex-direction: column; gap: 8px; }
.fp-category {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
.fp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.fp-item {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 120ms, background 120ms;
}
.fp-item:hover { background: var(--surface-2); }
.fp-item.selected {
  border-color: var(--accent-dark);
  background: var(--surface-2);
}
.fp-sample {
  /* Iteration 13b: var(--font-scale) erlaubt Per-Font-Scaling via inline style.
     Default 1.0; einzelne Schriften (Borakah) bekommen einen kleineren Wert
     gesetzt um intrinsisch große X-Heights auszugleichen. */
  font-size: calc(28px * var(--font-scale, 1));
  line-height: 1.1;
  color: var(--text);
}
.fp-name {
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================
 * Text-Manager (Iteration 2: Preview-Text forciert dunkel)
 * ============================================================ */

.text-manager { display: flex; flex-direction: column; gap: 10px; }
.tm-list { display: flex; flex-direction: column; gap: 8px; }
/* Iteration 13n-9 (Mo 2026-06-13): klarere visuelle Trennung Liste vs Add. */
.tm-section-title {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
}
.tm-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.tm-add-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tm-add-divider::before,
.tm-add-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.tm-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'preview actions'
    'meta    actions';
  gap: 4px 12px;
  align-items: center;
}
.tm-preview {
  grid-area: preview;
  font-size: 18px;
  color: var(--text);  /* Iteration 2: forciert dunkel, unabhängig von Karten-Farbe */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-color-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
  display: inline-block;
}
.tm-meta {
  grid-area: meta;
  font-size: 11px;
  color: var(--text-muted);
}
.tm-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  align-items: center;
}
.tm-edit {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
}
.tm-delete {
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 28px; height: 28px;
  font-size: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.tm-delete:hover { background: #fee2e2; color: #b91c1c; }

.tm-add {
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 500;
}
.tm-add:hover:not(.is-disabled) { color: var(--accent-dark); border-color: var(--accent-dark); }
.tm-add.is-disabled, .tm-add[disabled] { opacity: 0.5; cursor: not-allowed; }
.tm-add-row { display: flex; flex-direction: column; gap: 8px; }
/* Iteration 13n-4 (Mo 2026-06-13): Sub-Caption pro Add-Button erklärt
   Use-Case ("wofür geeignet"). Pattern aus aktuellem autogrammkarten-konfigurator. */
.tm-add { display: flex; flex-direction: column; gap: 4px; }
.tm-add-title { display: block; font-weight: 500; }
.tm-add-sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.tm-rich-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  background: var(--accent-dark); color: white;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Iteration 13n: Rich-Text-Editor (Bio-Editor) */
.rich-editor { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  align-items: center;
}
.rt-btn {
  min-width: 32px; height: 32px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0 8px;
}
.rt-btn:hover { background: var(--surface); border-color: var(--border); }
.rt-sep {
  display: inline-block;
  width: 1px; height: 22px;
  background: var(--border);
  margin: 0 4px;
}
.rt-content-wrap {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  min-height: 140px;
  padding: 12px 14px;
}
.rt-content {
  outline: none;
  min-height: 110px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-default);
}
.rt-content h1, .rt-content h2 { font-size: 18px; font-weight: 700; margin: 8px 0 4px; }
.rt-content p { margin: 4px 0; }
.rt-content ul, .rt-content ol { margin: 4px 0; padding-left: 22px; }
.rt-content:focus { outline: none; }

/* Iteration 16r (Mo 2026-06-15): Zentrierte/rechtsbündige Listen → Bullets
 * (oder Zahlen) gehen mit. list-style-position: outside hat Bullets links am
 * Container, inside positioniert sie im Text-Flow → folgen text-align.
 */
.rt-content [style*="text-align: center"] ul,
.rt-content [style*="text-align: center"] ol,
.rt-content[style*="text-align: center"] ul,
.rt-content[style*="text-align: center"] ol,
.rt-content ul[style*="text-align: center"],
.rt-content ol[style*="text-align: center"] {
  list-style-position: inside;
  padding-left: 0;
}
.rt-content [style*="text-align: right"] ul,
.rt-content [style*="text-align: right"] ol,
.rt-content[style*="text-align: right"] ul,
.rt-content[style*="text-align: right"] ol,
.rt-content ul[style*="text-align: right"],
.rt-content ol[style*="text-align: right"] {
  list-style-position: inside;
  padding-left: 0;
}
.rt-fontsize, .rt-width { width: 100%; }
.rt-delete {
  margin-top: 16px;
  height: 44px;
  background: transparent;
  border: 1px solid #c00;
  color: #c00;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.rt-delete:hover { background: #fee; }

/* Iteration 13n-3 (Mo 2026-06-13): Watermark fade-out nach 3s.
   Customer-Confusion-Prevention: Hinweis verschwindet damit niemand denkt
   "RÜCKSEITE" wird mitgedruckt. Animation läuft pro <text>-Element einmal
   (forwards = bleibt am Ende invisible bis SVG neu gerendert wird). */
@keyframes f24-watermark-fade {
  0%, 50% { opacity: 0.45; }
  100%    { opacity: 0; }
}
.f24-watermark {
  animation: f24-watermark-fade 3s ease-in-out 0.4s forwards;
}

/* Rich-Content im SVG-foreignObject — Default-Styles für Bio-Anzeige */
.f24-rich-content { margin: 0; padding: 0; }
.f24-rich-content h1, .f24-rich-content h2 {
  font-size: 1.4em; font-weight: 700; margin: 0.3em 0 0.2em;
}
.f24-rich-content p { margin: 0.2em 0; }
.f24-rich-content ul, .f24-rich-content ol { margin: 0.2em 0; padding-left: 1.4em; }
.f24-rich-content li { margin: 0.1em 0; }

/* Iteration 15c: zentrierter Text → Bullets/Numbers MIT zentrieren.
 * list-style-position:inside lässt Bullets im Text-Flow statt am Container-Rand. */
.f24-rich-content[style*="text-align: center"] ul,
.f24-rich-content[style*="text-align: center"] ol,
.f24-rich-content[style*="text-align:center"] ul,
.f24-rich-content[style*="text-align:center"] ol,
.f24-rich-content ul[style*="text-align: center"],
.f24-rich-content ol[style*="text-align: center"],
.f24-rich-content [style*="text-align: center"] ul,
.f24-rich-content [style*="text-align: center"] ol {
  list-style-position: inside;
  padding-left: 0;
}
/* Iteration 16r: gleiche Logik für right-align */
.f24-rich-content[style*="text-align: right"] ul,
.f24-rich-content[style*="text-align: right"] ol,
.f24-rich-content ul[style*="text-align: right"],
.f24-rich-content ol[style*="text-align: right"],
.f24-rich-content [style*="text-align: right"] ul,
.f24-rich-content [style*="text-align: right"] ol {
  list-style-position: inside;
  padding-left: 0;
}

/* ============================================================
 * Text-Editor
 * ============================================================ */

.text-editor { display: flex; flex-direction: column; gap: 14px; }
.te-row { display: flex; flex-direction: column; gap: 6px; }
.te-row-inline { flex-direction: row; gap: 8px; }
.te-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.te-label output { color: var(--text); font-weight: 600; }
.te-text {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  font-size: 15px;
  background: var(--surface);
}
.te-text:focus { outline: none; border-color: var(--accent-dark); }
.te-style {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 16px;
}
.te-style.active {
  background: var(--accent-dark);
  color: white;
  border-color: var(--accent-dark);
}
/* Iteration 13d: Alignment-Buttons (left/center/right) */
.te-align {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: grid; place-items: center;
  color: var(--text-default);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.te-align:hover { background: var(--surface); }
.te-align.active {
  background: var(--accent-dark);
  color: white;
  border-color: var(--accent-dark);
}
.te-size, .te-maxwidth { width: 100%; }
.te-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-size: 14px;
  color: var(--text);
}
.te-section:hover { background: var(--border); }
.te-chev {
  color: var(--text-muted);
  font-size: 18px;
}
.te-color-preview {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-block;
}

/* Iteration 9 (Mo 2026-06-13): Help-Bubble entfernt — Hilfe gibt's via
   Alexandra-Avatar in der Top-Bar. */

/* ============================================================
 * Image-Uploader (Iteration 11)
 * ============================================================ */

.image-uploader { display: flex; flex-direction: column; gap: 8px; }
.iu-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
}
.iu-dropzone:hover, .iu-dropzone.drag-over {
  border-color: var(--accent-dark);
  background: var(--surface);
}
.iu-input { display: none; }
.iu-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-muted);
}
.iu-icon svg { width: 22px; height: 22px; }
.iu-label { font-weight: 600; font-size: 14px; color: var(--text); }
.iu-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Hintergrund-Hint (zeigt "Rahmen-Farbe" wenn Template Rahmen hat) */
.bg-hint:empty { display: none; }
.bg-hint {
  margin: -4px 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.bg-hint-text {
  background: var(--surface-2);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.bg-image-mode { display: flex; flex-direction: column; gap: 12px; }
.bg-current-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.bg-current-preview img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.bg-remove {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.bg-remove:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* ============================================================
 * Draw-Pad (Live-Unterschrift, Iteration 11)
 * ============================================================ */

.draw-pad { display: flex; flex-direction: column; gap: 12px; }
.dp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dp-tool-group { display: flex; flex-direction: column; gap: 4px; }
.dp-tool-label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.dp-stroke-options { display: flex; gap: 6px; }
.dp-stroke-btn {
  min-width: 40px; height: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  padding: 6px;
}
.dp-stroke-btn span {
  width: 18px;
  background: var(--text);
  border-radius: 4px;
  display: block;
}
.dp-stroke-btn.active { border-color: var(--accent-dark); background: var(--surface-2); }

/* Iteration 13i: Color-Picker inline statt Swatches */
.dp-color-section { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.dp-color-picker-mount { display: block; }

.dp-clear {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.dp-clear:hover { background: var(--surface-2); }

.dp-canvas-wrap {
  width: 100%;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 5 / 4;   /* Iteration 12: 60% höher als vorher 2:1 */
}
.dp-canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.dp-placeholder, .dp-placeholder-sub { transition: opacity 200ms ease; }

.dp-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.dp-cancel, .dp-save {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
}
.dp-cancel {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.dp-save {
  border: none;
  background: var(--accent);
  color: #001a25;
}
.dp-save:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }

/* ============================================================
 * Signature-Manager (Iteration 11)
 * ============================================================ */

.signature-manager { display: flex; flex-direction: column; }
.signature-content { min-height: 200px; }

.sig-input-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sig-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.sig-name-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.sig-name-input:focus { outline: none; border-color: var(--accent-dark); }

.sig-section-title {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.sig-font-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.sig-font-item {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 120ms, background 120ms;
}
.sig-font-item:hover { background: var(--surface-2); border-color: var(--accent-dark); }
.sig-font-preview {
  /* Iteration 13b: var(--font-scale) erlaubt Per-Font-Scaling, siehe .fp-sample. */
  font-size: calc(32px * var(--font-scale, 1));
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sig-font-name { font-size: 11px; color: var(--text-muted); }

.sig-draw-mode, .sig-image-mode, .sig-font-mode { display: flex; flex-direction: column; gap: 10px; }

/* Iteration 13h: Color-Picker inline für getippte Unterschrift (HEX + Wheel) */
.sig-color-section { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sig-color-section .sig-label { margin-bottom: 2px; }
.sig-color-picker-mount { display: block; }

/* ─── Iteration 13k: Signatur-Liste (Mo's UX-Refactor — wie Texte-Liste) ── */
.signature-manager { display: flex; flex-direction: column; gap: 12px; }
.sig-list { display: flex; flex-direction: column; gap: 8px; }
.sig-empty-state {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.sig-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'preview actions'
    'meta    actions';
  gap: 4px 12px;
  align-items: center;
}
.sig-item-preview {
  grid-area: preview;
  overflow: hidden;
  display: flex; align-items: center; gap: 8px;
  max-height: 36px;
}
.sig-item-text {
  font-size: 18px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.sig-item-img { max-height: 30px; max-width: 100px; object-fit: contain; }
.sig-item-svg { height: 30px; width: 90px; }
.sig-color-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
  display: inline-block;
}
.sig-item-meta {
  grid-area: meta;
  font-size: 11px;
  color: var(--text-muted);
}
.sig-item-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  align-items: center;
}
.sig-edit {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.sig-edit:hover { border-color: var(--accent-dark); }
.sig-delete {
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 28px; height: 28px;
  font-size: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.sig-delete:hover { background: #fee2e2; color: #b91c1c; }
.sig-add {
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
}
.sig-add:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
.sig-adder { display: flex; flex-direction: column; gap: 12px; }
.sig-adder-content { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
 * QR-Manager (Iteration 11)
 * ============================================================ */

.qr-manager { display: flex; flex-direction: column; gap: 16px; }
.qr-list { display: flex; flex-direction: column; gap: 8px; }
.qr-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.qr-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.qr-square {
  width: 44px; height: 44px;
  background: white;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: monospace;
  font-size: 12px;
  border-radius: 4px;
}
.qr-meta { flex: 1; min-width: 0; }
.qr-url { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-label { font-size: 11px; color: var(--text-muted); }

.qr-add-section { display: flex; flex-direction: column; gap: 10px; }
.qr-input-row { display: flex; flex-direction: column; gap: 6px; }
.qr-url-input, .qr-label-input {
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.qr-url-input:focus, .qr-label-input:focus { outline: none; border-color: var(--accent-dark); }
.qr-add {
  height: 44px;
  border: none;
  background: var(--accent);
  color: #001a25;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
}
.qr-add:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }

/* ─── Iteration 13: QR Edit + Delete Actions ──────────────── */
.qr-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.qr-edit {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.qr-edit:hover { background: var(--surface); border-color: var(--accent-dark); }
.qr-delete {
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.qr-delete:hover { background: #fee; color: #c00; border-color: #c00; }
.qr-editor { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.qr-editor .qr-edit-url, .qr-editor .qr-edit-label {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px;
}
.qr-edit-url:focus, .qr-edit-label:focus { outline: none; border-color: var(--accent-dark); }
.qr-size-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}
/* Iteration 13b: eigener Stack-Gap, sonst klebten Schrift/Farbe-Buttons */
.qr-label-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.qr-edit-delete {
  margin-top: 20px;
  height: 44px;
  background: transparent;
  border: 1px solid #c00;
  color: #c00;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}
.qr-edit-delete:hover { background: #fee; }

/* ─── Iteration 13l: Socials (Picker + Liste + Editor) ──────── */
.socials-mode { display: flex; flex-direction: column; gap: 12px; }
.social-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.social-list { display: flex; flex-direction: column; gap: 8px; }
.social-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.social-item-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--text-default);
}
.social-item-icon svg { width: 100%; height: 100%; }
.social-loading {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px dashed var(--border);
}
.social-item-info { flex: 1 1 auto; min-width: 0; }
.social-item-platform { font-size: 14px; font-weight: 600; }
.social-item-handle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.social-item-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.social-edit {
  height: 30px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.social-edit:hover { border-color: var(--accent-dark); }
.social-delete {
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.social-delete:hover { background: #fee2e2; color: #b91c1c; }
.social-add {
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
}
.social-add:hover:not(.is-disabled) { color: var(--accent-dark); border-color: var(--accent-dark); }
.social-add.is-disabled { opacity: 0.5; cursor: not-allowed; }

.social-picker { display: flex; flex-direction: column; gap: 14px; }
.social-picker-notice {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px;
  background: rgba(26, 115, 232, 0.05);
  border-left: 3px solid #1a73e8;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.social-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.social-picker-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  color: var(--text-default);
  aspect-ratio: 1 / 1;
}
.social-picker-tile:hover {
  border-color: var(--accent-dark);
  background: var(--surface);
}
/* Iteration 16b: Plattform-Label entfernt → Icon nutzt den ganzen Tile.
 * Mo 2026-06-23: Padding 16→6 + Icon-Max 56→88px, Tiles wirken nicht mehr leer. */
.social-picker-tile-icon {
  width: 100%; height: 100%;
  max-width: 88px; max-height: 88px;
  display: grid; place-items: center;
  color: var(--text-default);
}
.social-picker-tile-icon svg { width: 100%; height: 100%; }
.social-picker-tile-custom {
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
}
.social-picker-tile-custom:hover { color: var(--accent-dark); }

.social-editor { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.social-edit-handle {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px;
}
.social-edit-handle:focus { outline: none; border-color: var(--accent-dark); }
.social-color-section { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.social-edit-delete {
  margin-top: 16px;
  height: 44px;
  background: transparent;
  border: 1px solid #c00;
  color: #c00;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.social-edit-delete:hover { background: #fee; }

/* ─── Iteration 13: Media-Mode (Bilder/Grafik/Logo) ──────── */
.media-mode { display: flex; flex-direction: column; gap: 8px; }
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.media-item {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.media-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
}
.media-side {
  position: absolute;
  bottom: 4px; left: 4px;
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 999px;
  font-weight: 500;
}
.media-delete {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background 120ms;
}
.media-delete:hover { background: #c00; }

/* ============================================================
 * Selection-Overlay (in SVG)
 * ============================================================ */
.sel-handle, .sel-box { vector-effect: non-scaling-stroke; }
/* Iteration 14h (Mo 2026-06-14): Action-Toolbar (Edit + Delete) im Selection-Overlay.
 * Subtle drop-shadow für Tiefe. Touch-Feedback via active-state. */
.sel-action {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
  transition: transform 100ms;
}
.sel-hit[data-action]:active + .sel-action {
  transform: scale(0.92);
}

.placeholder-sheet {
  padding: 22px;
  text-align: center;
  color: var(--text-muted);
}

/* ============================================================
 * Media Queries — Editor-spezifisch
 * ============================================================ */

@media (max-width: 480px) {
  .alexandra-bubble {
    font-size: 12px;
    white-space: normal;
    max-width: 260px;
    width: max-content;
    padding: 9px 13px;
  }
  .tb-back { padding: 0 10px; }
  .tb-back-label { display: none; }
}

@media (min-width: 768px) {
  .tb-next-bob {
    min-width: 160px;
    height: 42px;
    padding: 0 28px;
    font-size: 16px;
  }
  .preview-frame { max-width: 560px; }
  .sheet { max-width: 480px; right: 0; left: auto; border-radius: 0 0 0 var(--radius-sheet); max-height: 100dvh; }
  .tb-chat img { max-height: 48px; }
}

@media (max-width: 360px) {
  /* Sehr kleine Screens (iPhone SE Portrait) — Editor-spezifische Anpassungen */
  .bb-label { font-size: 10px; }
  .tb-next { padding: 0 14px; font-size: 14px; }
}

/* ============================================================
 * Format-Picker-Modal (Sprint Auto-Landscape, Mo 2026-07-02)
 * ============================================================ */

.f24-format-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: f24-format-modal-fade-in 200ms ease-out;
}
.f24-format-modal-closing {
  animation: f24-format-modal-fade-out 200ms ease-in forwards;
}
@keyframes f24-format-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes f24-format-modal-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.f24-format-modal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  max-width: 560px;
  width: 100%;
  padding: 28px 24px;
  animation: f24-format-modal-slide-up 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes f24-format-modal-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.f24-format-modal-header {
  text-align: center;
  margin-bottom: 22px;
}
.f24-format-modal-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}
.f24-format-modal-header p {
  margin: 0;
  font-size: 14px;
  color: #666666;
}
.f24-format-modal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.f24-format-option {
  border: 2px solid #e4e6ea;
  background: #fafbfc;
  border-radius: 12px;
  padding: 16px 12px 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms ease, background 180ms ease, transform 120ms ease;
  font-family: inherit;
}
.f24-format-option:hover {
  border-color: var(--accent, #1a73e8);
  background: #ffffff;
}
.f24-format-option:active {
  transform: scale(0.98);
}
.f24-format-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin-bottom: 12px;
}
.f24-format-preview-shape {
  background: #ffffff;
  border: 2px solid #b8bcc4;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.f24-format-preview-portrait .f24-format-preview-shape {
  width: 66px;
  height: 92px;   /* 1:1.4 */
}
.f24-format-preview-landscape .f24-format-preview-shape {
  width: 92px;
  height: 66px;   /* 1.4:1 */
}
.f24-format-option-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.f24-format-option-sub {
  font-size: 12px;
  color: #666666;
  margin-bottom: 2px;
}
.f24-format-option-hint {
  font-size: 11px;
  color: #999999;
}

/* Frame-Tab: Format-Toggle-Header oben */
.f24-format-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: #f5f6f8;
  border-radius: 8px;
  font-size: 13px;
}
.f24-format-toggle-label {
  color: #555;
}
.f24-format-toggle-value {
  font-weight: 600;
  color: #1a1a1a;
  margin-left: 4px;
}
.f24-format-toggle-btn {
  background: none;
  border: none;
  color: var(--accent, #1a73e8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: inherit;
}
.f24-format-toggle-btn:hover {
  background: rgba(26, 115, 232, 0.08);
}

/* Mobile: Modal-Optionen untereinander */
@media (max-width: 480px) {
  .f24-format-modal-options {
    grid-template-columns: 1fr;
  }
  .f24-format-preview {
    height: 90px;
  }
}