/* ===== Design Tokens =====
   Drei Systeme, einmal entschieden — Graustufen, Schriftgroessen, Abstaende. Werte werden
   NICHT freihaendig gewaehlt, sondern aus diesen Listen genommen. Wer einen Wert braucht,
   der hier fehlt, erweitert die Liste; er erfindet ihn nicht an der Fundstelle. */
:root {

  /* --- Graustufen: EINE Rampe, EIN Farbton (220 Grad, kuehl wie Picos #646b79) ---------
     Vorher lagen vier Familien nebeneinander: neutral (#ddd #999 #666), warmgrau (#6b7280)
     und Slate (#64748b #94a3b8). Das sind verschiedene Farbtoene, keine Stufen — der Grund,
     warum eine Oberflaeche „irgendwie unsauber" wirkt, ohne dass man es benennen kann.
     Der Wert hinter jeder Zeile ist der Kontrast auf Weiss. */
  --grey-100: hsl(220, 20%, 97%);   /*  1.07:1 — zarte Flaeche */
  --grey-200: hsl(220, 18%, 94%);   /*  1.15:1 — Flaeche, Zebra-Zeilen */
  --grey-300: hsl(220, 16%, 88%);   /*  1.34:1 — reine Trennlinie */
  --grey-400: hsl(220, 14%, 74%);   /*  1.95:1 — deaktiviert */
  --grey-500: hsl(220, 13%, 60%);   /*  3.02:1 — Rand eines Bedienelements (Minimum) */
  --grey-600: hsl(220, 14%, 45%);   /*  5.19:1 — hellstes Grau, das als Text zulaessig ist */
  --grey-700: hsl(220, 16%, 34%);   /*  7.84:1 — Nebentext */
  --grey-800: hsl(220, 20%, 23%);   /* 11.96:1 */
  --grey-900: hsl(220, 26%, 14%);   /* 16.16:1 — Haupttext, kein reines Schwarz */

  /* --- Rollen: hierauf verweisen Bauteile, nicht auf die Rampe --------------------------
     Genau drei Textfarben. Mehr Abstufungen ergeben keine Hierarchie, sondern Unschaerfe. */
  --text-primary:    var(--grey-900);
  --text-secondary:  var(--grey-700);
  --text-tertiary:   var(--grey-600);   /* Fussnoten, Zeitstempel — noch 4,5:1 */
  --surface:         #fff;
  --surface-sunken:  var(--grey-100);
  --border-control:  var(--grey-500);   /* identifiziert ein Bedienelement — braucht 3:1 */
  --divider:         var(--grey-300);   /* trennt nur, kein Kontrastziel */

  /* --- Signalfarben: Flaeche und Text sind ZWEI Werte ----------------------------------
     Die kraeftige Stufe ist als Knopf- oder Badge-Flaeche gedacht und faellt als Text auf
     Weiss durch (Warnung 2,94:1, Erfolg 3,30:1). Fuer Text die -text-Stufe nehmen. */
  --sp-error: #dc2626;             --sp-error-text:   #b81e1e;   /* 6,48:1 */
  --sp-error-bg: #fef2f2;          --sp-error-border: #fecaca;
  --sp-success: #16a34a;           --sp-success-text: #107535;   /* 5,80:1 */
  --sp-success-bg: #f0fdf4;        --sp-success-border: #bbf7d0;
  --sp-warning: #ca8a04;           --sp-warning-text: #895d06;   /* 5,78:1 */
  --sp-warning-bg: #fefce8;        --sp-warning-border: #fef08a;
  --sp-accent: #2563eb;            --sp-accent-strong: #1d4ed8;  /* 5,17:1 als Text */
  --sp-accent-subtle: #dbeafe;
  --sp-muted:     var(--grey-600);
  --sp-muted-bg:  var(--grey-200);
  --sp-bg-subtle: var(--grey-100);

  /* --- Schriftgroessen -----------------------------------------------------------------
     Aus 12 14 16 18 20 24 30 36 48. Die Namen bleiben (--text-xs steckt an ueber 900
     Stellen), die Werte liegen jetzt auf der Skala. Frueher lagen --text-base (1rem) und
     --text-md (1.05rem) fuenf Prozent auseinander — ein Schritt, den niemand sieht und der
     deshalb keine Hierarchie erzeugt, sondern nur Uneinheitlichkeit.
     Einheit rem, nie em: em rechnet sich durch Verschachtelung auf und verlaesst die Skala. */
  --text-xs:   .75rem;   /* 12 */
  --text-sm:   .875rem;  /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md:   1.125rem; /* 18 */
  --text-lg:   1.25rem;  /* 20 */
  --text-xl:   1.5rem;   /* 24 */
  --text-2xl:  1.875rem; /* 30 — Seitentitel */

  /* --- Abstaende: 4 8 12 16 24 32 48 64 96 --------------------------------------------
     Eng am unteren Ende, weit am oberen; keine zwei Nachbarn liegen naeher als ~25 %.
     Genau das macht die Wahl eindeutig. Gilt fuer margin, padding, gap, Breiten, Hoehen. */
  --sp-1:  .25rem;   /*  4 */
  --sp-2:  .5rem;    /*  8 */
  --sp-3:  .75rem;   /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-24: 6rem;     /* 96 */

  /* --- Deckkraft: auch das ist eine Skala ----------------------------------------------
     Sonst hat derselbe Zustand zwei Werte — „gesperrt" stand als .7 auf der Karte und
     als .6 in der Navigation. */
  --o-10: .1;  --o-20: .2;  --o-40: .4;  --o-60: .6;  --o-80: .8;

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

  /* --- Hoehe ueber der Flaeche ---------------------------------------------------------
     Gewaehlt wird nach „wie weit vorn liegt das?", nicht nach „welcher Schatten sieht gut
     aus?". Naeher am Betrachter = mehr Aufmerksamkeit. */
  --shadow-sm:  0 1px 3px hsla(220, 25%, 12%, .18);   /* knapp abgehoben — Karte, Knopf */
  --shadow-md:  0 4px 6px hsla(220, 25%, 12%, .18);   /* Aufklappmenue */
  --shadow-lg:  0 5px 15px hsla(220, 25%, 12%, .18);
  --shadow-xl:  0 10px 24px hsla(220, 25%, 12%, .18);
  --shadow-2xl: 0 15px 35px hsla(220, 25%, 12%, .18); /* Dialog */

  /* 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 — 3-Zonen-Werkbank (Ebenen | Canvas | Inspector), Timeline unter der Canvas.
   Scoped kompakte Skala: der Editor erbt NICHT die globale App-Schrift (19px), sondern nutzt
   editor-lokale, werkzeug-taugliche Maße. Global bleibt alles unberührt. */
.canvas-editor-grid {
  display: grid;
  gap: 0.75rem;
  align-items: start;
}
/* minmax(0, 1fr) statt nur 1fr — sonst kann ein Child mit aspect-ratio die Spalte aufblähen */
/* Portrait/Hochformat: Ebenen links | Canvas mitte | Inspector rechts */
.canvas-editor-grid.is-portrait {
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  grid-template-areas: "layers main inspector";
}
/* Landscape/Querformat: breite Canvas → Ebenen links, Canvas daneben; Inspector volle Breite unten */
.canvas-editor-grid.is-landscape {
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-areas:
    "layers main"
    "inspector inspector";
}
.ce-layers               { grid-area: layers; min-width: 0; }
.canvas-editor-main      { grid-area: main; min-width: 0; }
.canvas-editor-inspector { grid-area: inspector; min-width: 0; }
/* Ebenen + Inspector bleiben beim Scrollen neben der Canvas sichtbar (kein Rauf-/Runter-Scrollen) */
.canvas-editor-grid.is-portrait .ce-layers,
.canvas-editor-grid.is-portrait .canvas-editor-inspector {
  position: sticky;
  top: 0.75rem;
  align-self: start;
  max-height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.canvas-editor-grid.is-landscape .canvas-editor-inspector {
  margin-top: 1rem;
  border-top: 1px solid var(--divider);
  padding-top: 1rem;
}

/* ---- Mobil: das 3-Spalten-Grid (Portrait min. ~532px) läuft auf Handys über →
   einspaltig stapeln (Canvas oben, dann Ebenen, dann Inspector), Sticky raus. ---- */
@media (max-width: 720px) {
  .canvas-editor-grid.is-portrait,
  .canvas-editor-grid.is-landscape {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "layers"
      "inspector";
  }
  .canvas-editor-grid.is-portrait .ce-layers,
  .canvas-editor-grid.is-portrait .canvas-editor-inspector {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .canvas-editor-grid.is-landscape .canvas-editor-inspector { margin-top: 1rem; }
  /* Touch hat kein :hover → die sonst nur bei Hover sichtbaren Ebenen-Aktionen
     (Duplizieren/Löschen/Guide-Toggle) immer zeigen, sonst unerreichbar. */
  .ce-lrow-acts { opacity: 1 !important; pointer-events: auto !important; }
}
/* Touch-Drag auf den Zieh-Flächen: kein Scroll-/Zoom-Hijack während des Ziehens. */
.canvas-scrubber, .canvas-timeline-bar, .canvas-timeline-handle, .ce-gizmo-handle { touch-action: none; }

/* ---- Editor-lokale kompakte Control-Skala (nur innerhalb .canvas-editor-grid) ---- */
.canvas-editor-grid { font-size: 0.82rem; }
.canvas-editor-grid h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); margin: 0 0 0.5rem; }
.canvas-editor-grid h5 { font-size: 0.85rem; margin: 0 0 0.5rem; }
.canvas-editor-grid label { display: block; font-size: 0.7rem; color: var(--sp-muted); font-weight: 500; margin-bottom: 0.15rem; }
.canvas-editor-grid input:not([type="range"]),
.canvas-editor-grid select,
.canvas-editor-grid textarea {
  font-size: 0.8rem;
  height: auto;
  margin-bottom: 0.4rem;
  --pico-form-element-spacing-vertical: 0.34rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
  --form-element-spacing-vertical: 0.34rem;
  --form-element-spacing-horizontal: 0.5rem;
}
.canvas-editor-grid textarea { min-height: 3.2em; }

/* ---- Add-Leiste: drei Gruppen Visual | FX | Audio ---- */
.ce-add-groups { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.7rem; }
.ce-add-group { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; }
.ce-add-glabel { font-size: 0.58rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sp-muted); font-weight: 700; white-space: nowrap; }
.ce-add-icons { display: flex; gap: 5px; flex-wrap: wrap; }
.ce-add-icons button {
  width: 30px; height: 30px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ce-add-icons button i { width: 15px; height: 15px; }

/* ---- Ebenen-Liste: Name volle Breite, Aktions-Icons als Hover-Overlay ---- */
.ce-layers ul { list-style: none; padding: 0; margin: 0; max-height: none; }
.ce-lrow { position: relative; border-radius: 4px; }
.ce-lrow:hover { background: var(--sp-accent-subtle); }
.ce-lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Duplizieren/Löschen/Guide-Toggle erst bei Hover/Auswahl — Overlay, damit der Name in Ruhe die volle Breite hat */
.ce-lrow-acts {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 1px; align-items: center; padding-left: 22px;
  background: linear-gradient(90deg, transparent, var(--sp-accent-subtle) 30%);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.ce-lrow:hover .ce-lrow-acts,
.ce-lrow.is-selected .ce-lrow-acts,
.ce-lrow.is-guide .ce-lrow-acts { opacity: 1; pointer-events: auto; }
.ce-lrow .ce-eye-fix { flex: none; margin-left: auto; }

/* 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: 12px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(255,255,255,0.22);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sichtbarer Griff-Indikator (senkrechter Strich) — macht klar, dass die Bar
   an den Rändern gekürzt/verlängert werden kann. */
.canvas-timeline-handle::before {
  content: "";
  width: 2px;
  height: 60%;
  background: rgba(255,255,255,0.7);
  border-radius: 1px;
}
.canvas-timeline-handle:hover { background: rgba(255,255,255,0.5); }
.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 */
/* Seitentitel — steht auf JEDER Seite und aendert sich nie; er ist ein Etikett, keine
   Ueberschrift. Vorher 2,2 rem: bei Picos mitwachsendem Grundmass gut 42 px auf dem
   prominentesten Platz des Bildschirms, ohne je etwas mitzuteilen.
   Groesse bewusst in px und je Breakpoint eigens gesetzt: grosse Dinge muessen SCHNELLER
   schrumpfen als kleine. Waechst der Titel proportional zum Fliesstext mit, ist er
   entweder auf dem Handy zu gross oder auf dem Desktop zu klein — eines davon immer.
   Gewicht 600 statt 500: Hervorhebung gehoert ins Gewicht, nicht in die Groesse. */
main.container > header h1 {
  hyphens: none;
  text-wrap: balance;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-primary);
  margin: var(--sp-2) 0 var(--sp-1);
}
@media (min-width: 1024px) {
  main.container > header h1 { font-size: 30px; }
}
main.container > header > p {
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}

/* Seitenfuss — Tertiaerinhalt, also das hellste Grau, das 4,5:1 noch haelt.
   Der Link hatte vorher exakt die Farbe des Fliesstextes und keinen Hover-Zustand:
   erkennbar war er allein am Mauszeiger. */
.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding: var(--sp-4);
  border-top: 1px solid var(--divider);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.page-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}
.page-footer a:hover {
  color: var(--sp-accent-strong);
  text-decoration: underline;
}
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;
}

/* Raster-Overlay (4 Icons): kompakter als die Modal-Buttons, damit sie das
   Thumbnail nicht dominieren. Nur im .gallery-actions-Overlay, nicht im Modal-Footer. */
.gallery-actions .gallery-btn {
  width: 1.4rem;
  height: 1.4rem;
}
.gallery-actions .gallery-btn svg {
  width: 0.8rem;
  height: 0.8rem;
}

.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);
}

/* Willkommenskarten — die Hauptnavigation beim ersten Besuch.
   Vorher: weisse Karte auf weisser Seite, getrennt allein durch einen #ddd-Rahmen mit
   1,36:1 und einen Schatten mit 5 % Deckkraft. Die Flaeche, die am deutlichsten
   „klick mich" sagen muss, war die am schwaechsten abgegrenzte. Jetzt traegt EINE
   Trennung die Arbeit — der Schatten. Rahmen UND Schatten sind eine Trennung zu viel. */
.welcome-card {
  display: flex;
  flex-direction: column;
  /* war align-items:center bei text-align:left — zwei Angaben, die sich widersprachen:
     mehrzeilige Beschreibungen wurden als zentrierter Block mit linksbuendigem Text gesetzt */
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
  position: relative;
}
.welcome-card:hover { box-shadow: var(--shadow-md); }
/* Schatten schrumpft beim Druecken — das ist es, was sich „gedrueckt" anfuehlen laesst */
.welcome-card:active { box-shadow: 0 0 0 1px hsla(220, 25%, 12%, .12); }
.welcome-card:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

/* Gesperrtes Modul bleibt sichtbar (Upsell-Flaeche) statt versteckt.
   Deckkraft .6 haette den Text auf 4,3:1 gedrueckt — unter die Lesbarkeitsgrenze.
   .8 liest sich als „noch nicht freigeschaltet" und haelt den Kontrast bei 7,9:1.
   EIN Wert fuer EINEN Zustand: vorher stand .7 auf der Karte und .6 in der Navigation. */
.welcome-card--locked,
nav a.locked { opacity: var(--o-80); }
.welcome-card-lock {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: inline-flex;
  color: var(--text-tertiary);
}
.welcome-card-lock svg { width: 16px; height: 16px; }

/* Das Symbol bleibt in seiner gezeichneten Groesse (24 px, Strichstaerke 2) und sitzt in
   einem eingefaerbten Kreis. Vorher wurde es auf 2,4 rem gezogen und die Strichstaerke auf
   .6 duenn gerechnet — genau das Eingestaendnis, dass es zu weit vergroessert wurde. */
.welcome-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-12);
  height: var(--sp-12);
  margin-bottom: var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--sp-accent-subtle);
  color: var(--sp-accent-strong);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.welcome-card-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.welcome-card:hover .welcome-card-icon {
  background: var(--sp-accent);
  color: #fff;                    /* 5,17:1 */
}
.welcome-card strong {
  font-size: var(--text-base);
  font-weight: 600;
}
.welcome-card small {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* 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: Options-Grids (Zielformat/Provider/Modell etc.) auf schmalen
   Screens stapeln statt 2-/3-spaltig quetschen (sonst abgeschnittene Labels
   wie "Hochfo"/"nanoBa"/"Gemin" auf dem Handy). Trifft nur die 1fr-1fr(-1fr)-
   Options-Grids, NICHT die Thumbnail-Picker (die nutzen minmax()). */
@media (max-width: 640px) {
  .imgtools-tab div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Referenz-Thumbnails (Bild- + Video-Generierung): EINHEITLICHE quadratische
   Kacheln in beiden Pickern (.sp-ref-grid = Video-Modus, .product-thumbnails =
   Bild-Modus). Bild via contain VOLLSTÄNDIG sichtbar (kein Crop) auf neutralem
   Letterbox-Hintergrund — statt Kraut-und-Rüben durch Hoch-/Querformate.
   Feste px = Safari/iOS-sicher (kein aspect-ratio-Kollaps). 120px in beiden
   Modi + auf Mobil; !important überschreibt die Inline-/Attribut-Größen. */
.sp-ref-grid > img,
.sp-ref-grid > div,
.product-thumbnails img,
.product-thumbnails video {
  object-fit: contain !important;
  background: var(--pico-card-sectioning-background-color);
}
.sp-ref-grid > div,
.sp-ref-grid > img,
.sp-ref-grid > a,
.sp-ref-grid > label,
.product-thumbnails > div,
.product-thumbnails > .drop-zone,
.product-thumbnails img,
.product-thumbnails video {
  width: 120px !important;
  height: 120px !important;
}

/* Bild-Auswahl-Picker (Galerie-/Referenz-Thumbnails) bei der Generierung:
   feste Höhe + Scroll, damit Brands mit >500 Bildern die Seite nicht endlos
   verlängern. overflow-y:auto → kurze Listen zeigen keinen Scrollbalken. */
.sp-picker-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

/* Bild-Tools Thumbnail-Picker */
.img-tool-thumb {
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  /* Safari/WebKit (v.a. iOS) ignoriert aspect-ratio auf einem <button>-Flex-
     Container → die Kacheln kollabieren auf Inhalts-Höhe (schmale Striche) und
     sind nicht mehr erkenn-/anwählbar. Die Inline-Styles setzen nur aspect-ratio:1.
     min-height als Engine-unabhängiger Höhen-Fallback: Chrome behält das exakte
     Quadrat (min-height < berechnete Höhe), Safari bekommt garantiert sichtbare,
     tappbare Kacheln. */
  min-height: 100px;
}
.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;
}

/* Bild-Vorschau-Modal: einheitlich lesbare Buttons auf dunklem Grund.
   Primaer (blau, ohne Klasse) bleibt; secondary/outline → helles Translucent
   statt grau-auf-schwarz. Inline-background (Nav-Pfeile, ×) bleibt unberuehrt. */
.sp-img-modal .secondary,
.sp-img-modal .outline,
.sp-img-modal [role="button"].secondary,
.sp-img-modal [role="button"].outline {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.sp-img-modal .secondary:hover,
.sp-img-modal .outline:hover,
.sp-img-modal [role="button"].secondary:hover,
.sp-img-modal [role="button"].outline:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* ===== Brand-Editor: Abschnitte, Feldraster, Sprungleiste =====
   Ausgangslage (gemessen am 27.08.2026): Reiter „Brand-Properties" 6810 px = 7,6
   Bildschirme, „APIs" 4622 px = 5,1 — zusammen 77 Felder, von denen 55 auf der vollen
   Containerbreite von 1200 px lagen, in 22 Gruppen, von denen KEINE optisch abgegrenzt war.
   Die Gruppen gab es also nur fuer Screenreader; sichtbar war ein durchgehender Strang. */

/* Zweispaltig: Sprungleiste bleibt stehen, Inhalt scrollt daneben. Die Leiste hat eine
   FESTE Breite, der Inhalt flext — eine Prozentbreite wuerde sie auf grossen Schirmen
   sinnlos aufblaehen und auf kleinen zerquetschen. */
.ed-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.ed-nav {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--text-sm);
}
.ed-nav a {
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}
.ed-nav a:hover {
  background: var(--surface-sunken);
  border-left-color: var(--sp-accent);
  color: var(--text-primary);
}
/* Der Abschnitt, in dem man steht. Drei Signale statt nur Farbe — Flaeche, Kante und
   Gewicht —, damit die Markierung auch ohne Farbwahrnehmung erkennbar bleibt. */
.ed-nav a[aria-current] {
  background: var(--sp-accent-subtle);
  border-left-color: var(--sp-accent);
  color: var(--sp-accent-strong);
  font-weight: 600;
}
@media (max-width: 900px) {
  .ed-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .ed-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* Ein Abschnitt ist eine getoente Flaeche — mehr Raum UM eine Gruppe als DARIN.
   Das ist die Trennung, die vorher fehlte: die fieldsets sind bei Pico randlos. */
.ed-sec {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  scroll-margin-top: var(--sp-4);
}
.ed-sec > h3 {
  margin: 0 0 var(--sp-6);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.ed-sec fieldset { margin: 0 0 var(--sp-6); padding: 0; border: 0; }
.ed-sec fieldset:last-child { margin-bottom: 0; }
.ed-sec legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* Felder laufen mehrspaltig. Ein Slogan braucht keine 1200 px — Formularfelder gehoeren
   auf die Breite ihres Inhalts, nicht auf die des Fensters. */
.ed-grid,
.ed-sec fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-2) var(--sp-4);
  align-items: start;
}
.ed-grid > label,
.ed-sec fieldset > label { margin: 0; }
/* Was von Natur aus breit ist, spannt ueber alle Spalten: mehrzeilige Eingaben und alle
   zusammengesetzten Bloecke (Farbwaehler, Logo-Upload, Schriftenliste). */
/* Mehrzeilige Eingaben brauchen Breite, aber nicht die ganze: zwei Spalten ergeben rund
   600 px und damit etwa 55 Zeichen je Zeile — innerhalb der lesbaren 45–75. */
.ed-sec fieldset > label:has(textarea) { grid-column: span 2; }
.ed-sec fieldset > div,
.ed-sec fieldset > p,
.ed-sec fieldset > small,
.ed-sec fieldset > table { grid-column: 1 / -1; }

/* Speichern bleibt in Reichweite. Vorher stand der Knopf nach knapp 13 Bildschirmen. */
.ed-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding: var(--sp-3) 0;
  background: var(--surface);
  border-top: 1px solid var(--divider);
}
/* Pico zieht Knoepfe in Formularen auf volle Breite — in einer Leiste ist das falsch. */
.ed-actions button { margin: 0; width: auto; }
/* Loeschen ist hier NICHT die Hauptaktion und wird deshalb nicht wie eine gestaltet.
   Der rote Knopf gehoert in den Bestaetigungsdialog, wo Loeschen tatsaechlich das
   Ziel der Handlung ist. */
.ed-actions .ed-danger {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-3);
}
.ed-actions .ed-danger:hover { color: var(--sp-error-text); border-color: var(--sp-error-border); }

/* Zugangsdaten: Feld plus Knopf zum Einblenden in einer Zeile */
.ed-secret { display: flex; gap: var(--sp-2); align-items: center; }
.ed-secret input { flex: 1; margin: 0; }
.ed-secret button { flex-shrink: 0; margin: 0; white-space: nowrap; }