/* ===== Design Tokens ===== */
:root {
  /* Farben */
  --sp-error: #dc2626;
  --sp-error-bg: #fef2f2;
  --sp-error-border: #fecaca;
  --sp-success: #16a34a;
  --sp-success-bg: #f0fdf4;
  --sp-success-border: #bbf7d0;
  --sp-warning: #ca8a04;
  --sp-warning-bg: #fefce8;
  --sp-warning-border: #fef08a;
  --sp-muted-bg: #f5f5f5;
  --sp-muted: #6b7280;
  --sp-accent: #2563eb;
  --sp-accent-strong: #1d4ed8;
  --sp-accent-subtle: #dbeafe;
  --sp-bg-subtle: #f9fafb;

  /* Typografie-Skala */
  --text-xs: .7rem;
  --text-sm: .8rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* Spacing (4px-Base) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.12);

  /* Transitions */
  --transition-fast: .15s ease;
  --transition-normal: .3s ease;

  /* Z-Index-Skala */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Canvas-Editor Layout (B6) — zwei Modi:
   - is-portrait: 3-Column (Liste 200px / Player 1fr / Inspector 280px) für Hochformat-Compositions
   - is-landscape: 2-Column oben (Liste 200px / Player 1fr) + Inspector volle Breite unten,
     da der breite Querformat-Player keinen vertikalen Platz für rechten Inspector lässt */
.canvas-editor-grid {
  display: grid;
  gap: 0.75rem;
}
/* minmax(0, 1fr) statt nur 1fr — sonst kann ein Child mit aspect-ratio
   die Track aufblähen über den verfügbaren Platz hinaus (Default-Min ist auto) */
.canvas-editor-grid.is-portrait {
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "main inspector";
}
.canvas-editor-grid.is-landscape {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "inspector";
}
.canvas-editor-main      { grid-area: main; min-width: 0; }
.canvas-editor-inspector { grid-area: inspector; }
.canvas-editor-grid.is-landscape .canvas-editor-inspector {
  margin-top: 1rem;
  border-top: 1px solid #e5e5e5;
  padding-top: 1rem;
}

/* Canvas-Editor Timeline (Etappe B6) */
.canvas-timeline {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  background: #f5f5f5;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  padding: 0.75rem;
  display: block;
}
.canvas-timeline-track {
  position: relative;
  background: #d4d4d4;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 280px;
}
.canvas-timeline-bar {
  position: absolute;
  height: 28px;
  background: #2563eb;
  color: #ffffff;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.9;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 24px;
  /* top wird inline via :style aus layer.lane berechnet */
}
.canvas-timeline-bar:hover { opacity: 1; }
.canvas-timeline-bar.is-selected {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
  opacity: 1;
  z-index: 2;
}
.canvas-timeline-bar { cursor: grab; }

/* Resize-Handles links/rechts an Visual- und Audio-Bars für Drag-and-Drop von start_s/end_s */
.canvas-timeline-handle {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(255,255,255,0.1);
  z-index: 3;
}
.canvas-timeline-handle:hover { background: rgba(255,255,255,0.4); }
.canvas-timeline-handle-left  { left: 0;  border-top-left-radius: inherit;  border-bottom-left-radius: inherit;  }
.canvas-timeline-handle-right { right: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; }

/* Inline-Action-Buttons in der Editor-Layer-Liste (Toggle, Trash) — outline-icon-Stil */
.canvas-list-action {
  background: transparent !important;
  border: none !important;
  padding: 0.15rem !important;
  margin: 0 !important;
  color: #525252 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.canvas-list-action:hover { color: #111 !important; }
.canvas-list-action svg { width: 16px; height: 16px; stroke: currentColor; }
.canvas-list-action.is-off { color: #9ca3af !important; }
.canvas-timeline-bar-label {
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
}
.canvas-timeline-duration {
  display: block;
  color: #525252;
  font-size: 0.75rem;
}

/* Feedback-Utility-Klassen */
.sp-error {
  color: var(--sp-error);
  font-size: var(--text-sm);
}
.sp-error-box {
  background: var(--sp-error-bg);
  color: var(--sp-error);
  border: 1px solid var(--sp-error-border);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.sp-success {
  color: var(--sp-success);
  font-size: var(--text-sm);
}
.sp-success-box {
  background: var(--sp-success-bg);
  color: var(--sp-success);
  border: 1px solid var(--sp-success-border);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.sp-warning {
  color: var(--sp-warning);
  font-size: var(--text-sm);
}
.sp-warning-box {
  background: var(--sp-warning-bg);
  color: var(--sp-warning);
  border: 1px solid var(--sp-warning-border);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.sp-muted-box {
  background: var(--pico-muted-background-color);
  color: var(--pico-muted-color);
  border: 1px solid var(--pico-muted-border-color);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
/* Input-Validierung: roter Rahmen bei ungültiger Eingabe (z.B. ungültiger Hex) */
.sp-error-input {
  border-color: var(--sp-error) !important;
  outline-color: var(--sp-error);
}
/* Schachbrett-Hintergrund für Bilder mit Alpha-Kanal (PNG/SVG/GIF/WEBP).
   Macht Transparenz sichtbar. Anwenden auf <img>-Container oder direkt
   auf <img> mit object-fit:contain. */
.sp-checker-bg {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d4d4d4 25%, transparent 25%),
    linear-gradient(-45deg, #d4d4d4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d4d4d4 75%),
    linear-gradient(-45deg, transparent 75%, #d4d4d4 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.sp-empty-state {
  font-size: var(--text-sm);
  color: var(--pico-muted-color);
  background: var(--sp-muted-bg);
  border: 1px dashed var(--pico-muted-border-color);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  text-align: center;
}

/* ===== Kompakte Formular-Elemente =====
   .sp-compact als Kontextklasse: alle Buttons, Inputs, Selects darin
   bekommen einheitlich kleinere Größe (~32px Höhe statt Pico-Default ~48px).
   Ersetzt die diversen Inline-Padding/Font-Size-Overrides. */
.sp-compact button,
.sp-compact input,
.sp-compact select,
.sp-compact textarea,
button.sp-compact,
input.sp-compact,
select.sp-compact,
textarea.sp-compact {
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
  margin-bottom: 0;
}
.sp-compact select,
select.sp-compact {
  background-size: .8rem;
  background-position: right var(--sp-2) center;
  padding-right: var(--sp-6);
}

/* Alpine.js x-cloak: Verhindert Flash of Unstyled Content beim Seitenladen */
[x-cloak] { display: none !important; }

/* Typografie-Basis: Kerning, Ligaturen, Antialiasing global aktivieren */
html {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-Headline: keine Silbentrennung, ausgewogener Umbruch bei mehreren Zeilen */
main.container > header h1 {
  hyphens: none;
  text-wrap: balance;
  font-weight: 500;
  font-size: 2.2rem;
  margin-bottom:.1rem;
  margin-top: .44rem;
}
main.container  h3 {
    font-weight: 600;
    margin-bottom: var(--sp-1);
}

/* Blog-Output: Zeilenlänge auf lesbare ~65 Zeichen begrenzen (Butterick 45–90) */
.blog-content {
  max-width: 65ch;
}
.blog-content h2,
.blog-content h3,
.blog-content h4 {
  text-wrap: balance;
  hyphens: none;
}

/* Modal header — shared across all dialogs */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: calc(var(--pico-spacing) * .75) var(--pico-spacing);
}
.modal-header > strong,
.modal-header > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-header .modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.modal-header-actions .icon-btn {
  align-self: center !important;
  height: 2rem !important;
  width: 2rem !important;
}

/* Themen-Vorlagen: Typ-Badge (blog / social / ads) */
.topic-type-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .12rem .45rem;
  border-radius: var(--radius-sm);
  margin-right: .35rem;
  vertical-align: middle;
}
.topic-type-badge--blog {
  background: #e3f2fd;
  color: #1565c0;
}
.topic-type-badge--social {
  background: #fce4ec;
  color: #ad1457;
}
.topic-type-badge--ads {
  background: #e8f5e9;
  color: #2e7d32;
}
.topic-type-badge--recherche {
  background: #fff8e1;
  color: #f57f17;
}

/* Themen-Aggregation: Quelle (Vorlage / Verläufe) */
.topic-origin-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  padding: .1rem .42rem;
  border-radius: var(--radius-sm);
  margin-right: .35rem;
  vertical-align: middle;
  border: 1px solid var(--pico-muted-border-color, #ccc);
  background: var(--pico-card-background-color, #f5f5f5);
  color: #555;
}
.topic-origin-badge--vorlage {
  background: #faf8f3;
  border-color: #d4c4a8;
  color: #6d5a3a;
}
.topic-origin-badge--content_history {
  background: #eef6ff;
  border-color: #b8d4f0;
  color: #2c5282;
}
.topic-origin-badge--prompt_history {
  background: #f3e8ff;
  border-color: #d4b8f0;
  color: #553c7a;
}

/* Recherche-Tab: Blöcke KI / Thema / Quellen */
.recherche-block {
  margin: 1.15rem 0;
  padding: var(--sp-4) 1.1rem;
  border: 1px solid var(--pico-muted-border-color, #ddd);
  border-radius: var(--pico-border-radius, 6px);
  background: var(--pico-card-background-color, var(--pico-background-color, #fff));
}
.recherche-block--thema {
  border-left: 3px solid var(--pico-primary, #1095c1);
}

/* Recherche: Zeile 2 + 4 + 5 (Preset, URL, Upload) auf einer Höhe */
.recherche-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 1rem;
  margin-top: 0.65rem;
}
.recherche-inline-row__cell {
  flex: 1 1 10.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.recherche-inline-row__cell--url {
  flex: 2 1 16rem;
}
.recherche-inline-row__cell--file {
  flex: 0 1 auto;
}
.recherche-inline-row__cell label,
.recherche-inline-row__file-label {
  margin-top: 0;
}
.recherche-inline-row__toolbar {
  margin-bottom: 0;
}
.recherche-inline-row__cell select {
  width: 100%;
  margin-bottom: 0;
}

.recherche-url-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: var(--sp-1);
}
.recherche-url-field__scheme {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--pico-muted-color, #666);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  user-select: none;
  line-height: 1.2;
}
.recherche-url-field__input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.recherche-recursive-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  color: var(--pico-muted-color, #555);
  line-height: 1.35;
  cursor: pointer;
}
.recherche-recursive-check input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.recherche-block__title {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  font-weight: 600;
}
.recherche-block__hint {
  font-size: var(--text-sm);
  margin: -0.35rem 0 0.65rem;
}
.recherche-block__sub {
  display: block;
  margin-top: 0.65rem;
}
.recherche-block label {
  margin-top: 0.65rem;
}
.recherche-block label:first-of-type,
.recherche-block .recherche-block__title + label {
  margin-top: 0;
}
.recherche-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin: var(--sp-4) 0 var(--sp-2);
}

/* Lucide icons */
button svg, a svg, label svg {
  pointer-events: none;
}

[data-lucide] {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: 1.75;
}

/* Verlauf-Zeile: Icon-Button + Select nebeneinander */
.history-row {
  display: flex;
  gap: .4rem;
  align-items: stretch;
  margin-bottom: .4rem;
}
.history-row select {
  flex: 1;
  min-width: 0;
  width: auto !important;
  font-size: var(--text-sm);
  margin-bottom: 0 !important;
}
.history-row .icon-btn {
  flex-shrink: 0;
  margin-bottom: 0 !important;
  width: 3.75rem !important;
  padding-inline: 0 !important;
}

/* Quadratische Icon-Buttons */
.icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  padding: 0 .6rem !important;
  background: #fff !important;
  border: 1px solid var(--pico-muted-border-color) !important;
  border-radius: var(--pico-border-radius) !important;
}

.icon-btn svg {
  stroke: #333 !important;
  width: 1rem !important;
  height: 1rem !important;
}

nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  border-bottom: 2px solid var(--pico-muted-border-color);
  margin-bottom: var(--sp-6);
  overflow-x: auto;
  max-width: calc(100vw - 2rem);
}

nav ul li {
  white-space: nowrap;
  flex-shrink: 0;
}

nav ul a {
  text-decoration: none;
  padding: var(--sp-2) var(--sp-4);
  color: var(--pico-muted-color);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 1px;
}

nav ul a.active {
  color: var(--pico-primary);
  border-bottom-color: var(--pico-primary);
  font-weight: 500;
}

.error {
  color: var(--pico-del-color);
  background: rgba(220, 38, 38, 0.05);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--pico-border-radius);
}

.result pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--pico-code-background-color);
  padding: var(--sp-4);
  border-radius: var(--pico-border-radius);
  max-height: 500px;
  overflow-y: auto;
}

.result-meta {
  color: var(--pico-muted-color);
  margin-bottom: var(--sp-3);
}

.result-actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.result-actions button {
  flex: 0;
}
.result-actions button:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

/*
 * Toolbar-Zeilen: Input + Text-Button + optional quadratischer Icon-Button.
 * Maße und Abstände aus Pico-Variablen (--pico-spacing, --pico-line-height, …);
 * min-height/margin von Pico-Form-Defaults hier bewusst überschrieben.
 */
.toolbar-row {
  display: flex;
  align-items: center;
  gap: calc(var(--pico-spacing) * 0.5);
  flex-wrap: wrap;
}

.toolbar-row--mb {
  margin-bottom: calc(var(--pico-spacing) * 0.35);
}

.toolbar-row--mb-lg {
  margin-bottom: calc(var(--pico-spacing) * 0.5);
}

.toolbar-row--tight {
  gap: calc(var(--pico-spacing) * 0.4);
}

/* z. B. URL-Scanner direkt unter dem Formular */
.toolbar-row--snug {
  margin-top: calc(var(--pico-spacing) * -0.25);
  margin-bottom: calc(var(--pico-spacing) * 0.5);
}

.toolbar-section {
  margin-bottom: calc(var(--pico-spacing) * 0.6);
}

.social-hashtag-block {
  margin-top: calc(var(--pico-spacing) * 0.75);
  border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
  padding-top: calc(var(--pico-spacing) * 0.6);
}

input.toolbar-input {
  box-sizing: border-box;
  flex: 1;
  min-width: calc(var(--pico-spacing) * 7.5);
  padding: calc(var(--pico-spacing) * 0.2) calc(var(--pico-spacing) * 0.5);
  font-size: calc(var(--pico-spacing) * 0.8);
  height: calc(var(--pico-spacing) * 2);
  max-height: calc(var(--pico-spacing) * 2);
  min-height: calc(var(--pico-spacing) * 2);
  margin: 0 !important;
  line-height: calc(var(--pico-line-height) * 0.8);
  border-radius: var(--pico-border-radius);
}

input.toolbar-input--wide {
  min-width: calc(var(--pico-spacing) * 12.5);
}

button.toolbar-btn.secondary.outline {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--pico-spacing) * 2) !important;
  height: calc(var(--pico-spacing) * 2) !important;
  max-height: calc(var(--pico-spacing) * 2) !important;
  margin: 0 !important;
  padding: 0 calc(var(--pico-spacing) * 0.6) !important;
  font-size: calc(var(--pico-spacing) * 0.75) !important;
  line-height: calc(var(--pico-line-height) * 0.8) !important;
  white-space: nowrap;
  border-radius: var(--pico-border-radius);
}

/* Nur Symbol (z. B. ↻): quadratisch, gleiche Höhe wie .toolbar-input */
button.toolbar-icon-btn.secondary.outline {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(var(--pico-spacing) * 2) !important;
  min-width: calc(var(--pico-spacing) * 2) !important;
  height: calc(var(--pico-spacing) * 2) !important;
  max-height: calc(var(--pico-spacing) * 2) !important;
  min-height: calc(var(--pico-spacing) * 2) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: calc(var(--pico-spacing) * 0.9);
  line-height: 1 !important;
  flex-shrink: 0;
  border-radius: var(--pico-border-radius);
}

.product-thumbnails img.selected {
  border-color: var(--pico-primary) !important;
  border-radius: var(--radius-sm);
}

/* Top-bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
  padding: var(--sp-2) var(--sp-6);
  margin-bottom: 0;
}
@media  screen and (max-width:720px) {
  .top-bar {
    flex-direction: column;
  }
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.top-bar-left label {
  font-size: var(--text-sm);
  color: var(--pico-muted-color, #888);
  margin: 0;
}

.top-bar-left select {
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
  margin: 0;
}

.top-bar-center {
  font-size: var(--text-sm);
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--pico-color, #333);
  min-width: 270px;
}
.top-bar-left a{
  font-size: var(--text-xs);
  text-transform: uppercase;
}
.top-bar-right a {
  font-size: var(--text-xs);
  color: var(--pico-muted-color, #666);
  text-decoration: none;
  margin-left: var(--sp-4);
  white-space: nowrap;
  text-transform: uppercase;
}

.top-bar-right a:hover {
  color: var(--pico-primary, #1971c2);
}
.top-bar-right a:focus-visible {
  color: var(--pico-primary, #1971c2);
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

.scene-row {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-end;
  margin-bottom: var(--sp-4);
}

.scene-row button {
  margin-bottom: 0;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.gallery-item {
  position: relative;
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.gallery-actions {
  position: absolute;
  bottom: var(--sp-1);
  right: var(--sp-1);
  display: flex;
  gap: var(--sp-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.gallery-item:hover .gallery-actions {
  opacity: 1;
}

.gallery-move {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  right: var(--sp-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.gallery-item:hover .gallery-move {
  opacity: 1;
}

.gallery-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: var(--pico-border-radius);
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.gallery-btn svg {
  width: 1rem;
  height: 1rem;
}

.gallery-label {
  font-size: var(--text-xs);
  color: var(--pico-muted-color);
  padding: var(--sp-1) 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges im Bild-Modal (Datum, Quelle, Vorlage, Stil, Provider) */
.gallery-badge {
  display: inline-block;
  font-size: var(--text-xs);
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 10px;
  background: var(--sp-muted-bg);
  color: #555;
  white-space: nowrap;
}

.style-preview details summary {
  cursor: pointer;
  margin: var(--sp-2) 0;
}

.style-preview pre {
  max-height: 300px;
  overflow-y: auto;
  background: var(--pico-code-background-color);
  padding: var(--sp-3);
  border-radius: var(--pico-border-radius);
  font-size: var(--text-sm);
}

.style-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}

.style-color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.style-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--pico-muted-border-color);
}

.style-group h4 {
  font-size: var(--text-sm);
  color: var(--pico-muted-color);
  margin: var(--sp-4) 0 var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}

.style-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
}

.style-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.style-card-info {
  padding: var(--sp-2) 0.6rem;
}

.style-card-info strong {
  display: block;
  font-size: var(--text-sm);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-card-actions {
  display: flex;
  gap: var(--sp-1);
}

.welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid #ddd;
  border-radius: var(--radius-md);
  background: #fff;
  color: #222;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.welcome-card:hover {
  border-color: #999;
  box-shadow: var(--shadow-md);
}
.welcome-card:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}
.welcome-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: var(--sp-2);
  color: var(--pico-muted-color, #666);
}
.welcome-card-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: .6;
}
.welcome-card:hover .welcome-card-icon {
  color: var(--pico-primary, #1971c2);
}
.welcome-card strong {
  font-size: .95rem;
  font-weight: 600;
}
.welcome-card small {
  font-size: var(--text-sm);
  color: #666;
  line-height: 1.45;
}

/* Compact inline button — used in table rows and pagination */
.btn-small {
  display: inline-block;
  width: auto;
  padding: var(--sp-1) .55rem;
  font-size: var(--text-sm);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: transparent;
  color: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-small:hover:not(:disabled) {
  background: var(--pico-muted-background-color);
}

.btn-small:disabled {
  opacity: .45;
  cursor: default;
}

/* Small outline button used for collection toggles and modals */
.btn {
  display: inline-block;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-sm {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.btn-outline-secondary {
  --pico-color: var(--pico-muted-color);
  --pico-background-color: transparent;
  --pico-border-color: var(--pico-muted-border-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: transparent;
  color: var(--pico-muted-color);
}

.btn-outline-secondary:hover {
  background: var(--pico-muted-background-color);
}

/* Drop-Zone Hover-Highlight */
.drop-highlight {
  border-color: var(--pico-primary) !important;
  background: var(--pico-primary-focus) !important;
}

.drop-zone > * {
  pointer-events: none;
}

/* API-Gating: deaktivierte Tabs / Buttons */
a.disabled, button.disabled, [disabled] {
  opacity: .4;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ===== Workflow Stepper ===== */

:root {
  --workflow-done:         #333;
  --workflow-done-label:   #555;
  --workflow-active:       var(--pico-primary);
  --workflow-pending-arc:  #e5e5e5;
  --workflow-pending-lbl:  #999;
  --workflow-pending-num:  #bbb;
  --workflow-disabled:     #bbb;
}

/* Initial arc/text colors from tokens — overridden by JS at runtime */
.workflow-big .arc,
.workflow-slim .arc {
  stroke: var(--workflow-pending-arc);
}
.workflow-big .center-label {
  fill: var(--workflow-active);
}

/* Big version — initial block at top of form. Zwei-Spalten-Layout:
   links Donut + vertikale Step-Liste, rechts Überschrift + Einleitung. */
.workflow-big {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-4) 0 40px;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.workflow-big__stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  min-width: 130px;
}
.workflow-big__intro h2 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin: 0 0 var(--sp-2) 0;
  hyphens: none;
  text-wrap: balance;
}
.workflow-big__intro p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--pico-muted-color);
  max-width: 58ch;
}
.workflow-big .big-labels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* width:auto (per Default) → Container ist so breit wie die längste
     Zeile, und wird durch das align-items:center des Stepper-Parents
     zentriert unter den Donut gezogen. Innerhalb bleiben die Zeilen
     links ausgerichtet, sodass Zahl-Name-Zahl-Name sauber untereinander
     stehen. */
  align-self: center;
  font-size: var(--text-xs);
  line-height: 1.3;
}
.workflow-big .step-label {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  transition: color var(--transition-fast);
  /* Anchor-Reset: keine Pico-Unterstreichung, Farbe kommt aus .step-num/.step-name */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.workflow-big .step-label:hover .step-name,
.workflow-big .step-label:focus-visible .step-name {
  color: var(--workflow-active);
}
.workflow-big .step-label:focus-visible {
  outline: 2px solid var(--workflow-active);
  outline-offset: 2px;
  border-radius: 2px;
}
.workflow-big .step-num {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--workflow-pending-num);
  min-width: 10px;
}
.workflow-big .step-name {
  color: var(--workflow-pending-lbl);
  font-weight: 500;
}
.workflow-big .s-above .step-num  { color: var(--workflow-done); }
.workflow-big .s-above .step-name { color: var(--workflow-done-label); }
.workflow-big .s-active .step-num  { color: var(--workflow-active); }
.workflow-big .s-active .step-name { color: var(--workflow-active); font-weight: 700; }

/* Unter schmalen Viewports die zwei Spalten untereinander stapeln,
   damit der Intro-Text nicht gequetscht wird. */
@media (max-width: 560px) {
  .workflow-big {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .workflow-big__stepper {
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }
}

/* Slim sticky version — fixed statt sticky, damit kein Platz im Flow
   reserviert wird wenn die Leiste unsichtbar ist (opacity:0). */
.workflow-slim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding: 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  line-height: 1;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.workflow-slim.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.workflow-slim .slim-labels {
  display: inline-flex;
  gap: 10px;
}
.workflow-slim .slim-label {
  color: var(--workflow-pending-num);
  font-weight: 500;
  transition: color var(--transition-fast);
  /* Anchor-Reset */
  text-decoration: none;
  cursor: pointer;
}
.workflow-slim .slim-label:hover,
.workflow-slim .slim-label:focus-visible {
  color: var(--workflow-active);
}
.workflow-slim .slim-label:focus-visible {
  outline: 2px solid var(--workflow-active);
  outline-offset: 2px;
  border-radius: 2px;
}
.workflow-slim .slim-label.slim-above  { color: var(--workflow-done-label); }
.workflow-slim .slim-label.slim-active { color: var(--workflow-active); font-weight: 700; }
.workflow-slim .slim-sep { color: #ddd; }

@media (prefers-reduced-motion: reduce) {
  .workflow-slim,
  .workflow-big .step-label,
  .workflow-slim .slim-label,
  .welcome-card,
  .gallery-item,
  .gallery-actions,
  .gallery-move {
    transition: none !important;
  }
}

/* Inline step headings */
h3[data-step] {
  font-size: var(--text-md);
  margin-top: var(--sp-6);
  margin-bottom: .1rem;
  scroll-margin-top: 80px; /* so anchor jumps don't hide under slim bar */
  /* Flash-Pulse transform-origin: linker Rand, damit die Skalierung aus
     dem Textanfang wächst, nicht aus der Mitte. */
  transform-origin: left center;
}
h3[data-step].step-disabled { color: var(--workflow-disabled); }

/* sp-spin: globale Spinner-Animation. Wird sonst nur lazy beim ersten
   spOpenSharepointPicker()-Call injiziert; als Defense fuer Inline-Uses
   (z.B. Stapelverarbeitung Listen-Edit Loading-Indicator) hier global. */
@keyframes sp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Flash-Puls nach Step-Anchor-Click: weicher Akzent-Glow + sanftes
   "Bounce" — keine Layout-Verschiebung (box-shadow + transform statt
   Padding/Margin). Greift nur, wenn JS die Klasse temporär setzt. */
@keyframes step-flash-kf {
  0% {
    background-color: transparent;
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1);
  }
  12% {
    background-color: color-mix(in srgb, var(--workflow-active) 14%, transparent);
    box-shadow: -4px 0 0 0 var(--workflow-active);
    transform: scale(1.015);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1);
  }
}
h3[data-step].step-flash {
  animation: step-flash-kf 1.2s cubic-bezier(.25,.9,.3,1.1);
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  h3[data-step].step-flash { animation: none; }
}

p.step-desc {
  font-size: var(--text-sm);
  color: var(--pico-muted-color);
  margin-top: 0;
  margin-bottom: var(--sp-2);
}
p.step-desc.step-disabled { color: var(--workflow-disabled); }

/* Hint blocks */
.workflow-empty-hint,
.workflow-ads-hint {
  font-size: var(--text-sm);
  color: var(--pico-muted-color);
  background: var(--sp-muted-bg);
  border: 1px dashed var(--pico-muted-border-color);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-1) 0 var(--sp-2);
  font-style: italic;
}

/* Bild-Tools Thumbnail-Picker */
.img-tool-thumb {
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.img-tool-thumb:hover {
  border-color: var(--pico-muted-border-color) !important;
}
.img-tool-thumb--active {
  border-color: var(--pico-primary) !important;
}

/* Video-Pipeline Worker-Status-Banner.
   Sichtbar während ein CLI-Worker im Hintergrund eine Stage abarbeitet.
   Auto-Reattach via active_job (Lockfile-Probe in video-pipeline-status.php)
   stellt den Banner auch nach Reload/Tab-Switch wieder her. */
.sp-worker-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--pico-primary);
  background: color-mix(in srgb, var(--pico-primary) 6%, transparent);
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
}
.sp-worker-banner__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--pico-primary);
  flex-shrink: 0;
  animation: sp-pulse-kf 1.4s ease-in-out infinite;
}
.sp-worker-banner__meta {
  margin-left: auto;
  color: var(--pico-muted-color);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.sp-worker-banner__sub {
  color: var(--pico-muted-color);
  font-family: var(--pico-font-family-monospace);
  font-size: var(--text-xs);
}
@keyframes sp-pulse-kf {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-worker-banner__dot { animation: none; }
}

/* ── Modal-Overlay Fix (Alpine v3 x-show Quirk) ─────────────────────────
   Inline `display:flex` wird von Alpine bei x-show=true aus dem Style
   gelöscht (style.display = ''), Browser fällt auf div-Default `block`.
   Eigene Klasse mit !important bringt das Layout zuverlässig zurück
   und überlebt Alpine's toggle. */
.sp-modal-overlay {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.sp-modal-overlay[style*="display: none"] {
  display: none !important;
}