/* swtd.css — SwissTD Playground Custom Styles */
/* Complements Tailwind CDN — only for custom components and overrides */

/* Google Fonts — Single Source of Truth for all pages */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Montserrat:wght@400;500;600;700&display=swap');

/* Alpine.js cloak — hide elements until Alpine processes x-show */
[x-cloak] { display: none !important; }

/*
 * Pre-Alpine FOUC prevention.
 * simulation.js (blocking script) sets html.swtd-play-active synchronously.
 * These rules mirror exactly what Alpine :class bindings will apply later,
 * so there is zero visual change when Alpine initializes.
 * opacity:0 matches the .swtd-nav-hidden class that Alpine will apply.
 */
html:not(.swtd-play-active) .swtd-nav-play,
html:not(.swtd-play-active) .swtd-nav-play-btns,
html.swtd-play-active .swtd-nav-standard,
html.swtd-play-active .swtd-nav-std-btns {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
}

/* Active nav highlighting — driven by body[data-active-nav] + link[data-nav] */
body[data-active-nav="home"] [data-nav="home"],
body[data-active-nav="shop"] [data-nav="shop"],
body[data-active-nav="elements"] [data-nav="elements"],
body[data-active-nav="play"] [data-nav="play"],
body[data-active-nav="tools"] [data-nav="tools"] {
  color: white;
  font-weight: 600;
}

/* E2E Sub-Navigation — full-width background bar, content aligned with parent container */
.swtd-e2e-subnav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 2.75rem;
  /* Content stays in parent's flow — no vw breakout (avoids scrollbar misalignment) */
  padding: 0.625rem 0;
  /* Pull up to sit flush against header (compensate parent pt-6 = 1.5rem) */
  margin-top: -1.5rem;
  margin-bottom: 0;
  /* Allow role dropdown to overflow above hero section */
  position: relative;
  z-index: 20;
  overflow: visible;
}
/* Full-width background + border via pseudo-element (no content shift) */
.swtd-e2e-subnav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: color-mix(in srgb, var(--swtd-card) 50%, transparent);
  border-bottom: 1px solid var(--swtd-border);
  z-index: -1;
  pointer-events: none;
}
.swtd-e2e-subnav__link {
  color: var(--swtd-muted);
  transition: color 0.2s;
}
.swtd-e2e-subnav__link:hover { color: var(--swtd-light); }
/* Die Trennzeichen standen auf der Rahmenfarbe #3a3435: 1.54:1 gegen den
   Seitenhintergrund, also weit unter den 4.5:1 aus dem Wiki. Auf der
   gedaempften Textfarbe sind es 6.6:1. */
.swtd-e2e-subnav__sep { color: var(--swtd-muted); }
.swtd-e2e-subnav__divider { color: var(--swtd-muted); margin-left: 0.25rem; }

/* Show/hide based on context: Shop pages vs Backoffice pages */
.swtd-e2e-subnav--backoffice { display: none; }
body[data-active-nav="backoffice"] .swtd-e2e-subnav--shop { display: none; }
body[data-active-nav="backoffice"] .swtd-e2e-subnav--backoffice { display: flex; }

/* Active state highlighting — Shop mode */
body[data-active-nav="shop"] .swtd-e2e-subnav [data-shop-nav="products"],
body[data-active-nav="cart"] .swtd-e2e-subnav [data-shop-nav="cart"],
body[data-active-nav="orders"] .swtd-e2e-subnav [data-shop-nav="orders"],
body[data-active-nav="wishlist"] .swtd-e2e-subnav [data-shop-nav="wishlist"],
body[data-active-nav="compare"] .swtd-e2e-subnav [data-shop-nav="compare"] {
  color: var(--swtd-light);
  font-weight: 600;
}
/* Active state highlighting — Backoffice mode (set per-page via data-active-bo) */
body[data-active-bo="log"] .swtd-e2e-subnav [data-bo-nav="log"],
body[data-active-bo="post"] .swtd-e2e-subnav [data-bo-nav="post"],
body[data-active-bo="fin"] .swtd-e2e-subnav [data-bo-nav="fin"],
body[data-active-bo="overview"] .swtd-e2e-subnav [data-bo-nav="overview"] {
  color: var(--swtd-light);
  font-weight: 600;
}
/* Active state highlighting — Wiki mode (handled by .swtd-e2e-subnav--wiki rules below) */
/* Wiki subnav — hidden by default, shown only on wiki pages */
.swtd-e2e-subnav--wiki { display: none; }
body[data-active-nav="wiki"] .swtd-e2e-subnav--shop { display: none; }
body[data-active-nav="wiki"] .swtd-e2e-subnav--backoffice { display: none; }
body[data-active-nav="wiki"] .swtd-e2e-subnav--wiki { display: flex; }
body[data-active-nav="wiki"] .swtd-e2e-subnav--wiki [data-wiki-nav="wiki"] { color: var(--swtd-light); font-weight: 600; }

/* Role Switcher — flex child inside subnav, pushed right via margin-left:auto */
.swtd-role-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 10;
}

/* Hero Pictogram — decorative icon on the right side of hero sections */
.swtd-hero-picto {
  width: 140px;
  height: 140px;
  pointer-events: none;
  animation: swtd-picto-glow 6s ease-in-out infinite alternate;
}
.swtd-hero-picto svg {
  width: 100%;
  height: 100%;
  stroke: var(--swtd-red);
  stroke-width: 2.5;
  fill: rgba(181,26,24,0.08);
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes swtd-picto-glow {
  0%   { filter: drop-shadow(0 0 4px rgba(181,26,24,0.1)); }
  50%  { filter: drop-shadow(0 0 16px rgba(181,26,24,0.3)); }
  100% { filter: drop-shadow(0 0 6px rgba(181,26,24,0.15)); }
}
@media (max-width: 1023px) {
  .swtd-hero-picto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .swtd-hero-picto { animation: none; opacity: 0.1; }
}

/* Smooth page reveal — header stays visible, content below fades in */
@keyframes swtd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body > :not(header) { animation: swtd-fade-in 0.5s ease-out 0.05s both; }

/* Section spacing for heavy pages (Element Garden etc.) */
.swtd-lazy-section {
  /* content-visibility removed — caused layout-shift / mid-page scroll on load */
}

:root {
  --swtd-dark: #141112;
  --swtd-red: #B51A18;
  --swtd-red-light: #d4453a;
  /* Markenrot als SCHRIFTFARBE auf dunklem Grund: #B51A18 erreicht nur
     2.5 bis 2.8:1, das Wiki verlangt mindestens 4.5:1 (WCAG AA). Diese
     aufgehellte Fassung kommt auf 6.8:1 und bleibt erkennbar rot. Fuer
     FLAECHEN aendert sich nichts: weisse Schrift auf #B51A18 liegt mit
     6.7:1 ueber der Grenze, Knoepfe und Rahmen behalten das Markenrot. */
  --swtd-red-schrift: #F87171;
  --swtd-charcoal: #332D2E;
  --swtd-light: #f0f0f0;
  --swtd-muted: #9a9396;
  --swtd-success: #2d6a4f;
  --swtd-warning: #e16d49;
  --swtd-card: #1e1a1b;
  --swtd-input: #2a2526;
  --swtd-border: #3a3435;
  --swtd-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3), 0 12px 36px rgba(0,0,0,0.2);
  --swtd-shadow-hover: 0 2px 6px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.35), 0 16px 48px rgba(0,0,0,0.25);

  /* System accent colors (SwissTD palette derived) */
  --swtd-shop:    var(--swtd-red);       /* #B51A18 */
  --swtd-pay:     var(--swtd-success);   /* #2d6a4f */
  --swtd-log:     var(--swtd-warning);   /* #e16d49 */
  --swtd-post:    var(--swtd-muted);     /* #9a9396 */
  --swtd-fin:     var(--swtd-red-light); /* #d4453a */

  /* 8px spacing scale */
  --swtd-space-xs:  4px;
  --swtd-space-sm:  8px;
  --swtd-space-md:  16px;
  --swtd-space-lg:  24px;
  --swtd-space-xl:  32px;
  --swtd-space-2xl: 48px;
  --swtd-space-3xl: 64px;
}

/* Base */
body {
  background-color: var(--swtd-dark);
  color: var(--swtd-light);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* Full-width header */
.swtd-header {
  width: 100%;
  max-width: none;
  padding-left: var(--swtd-space-lg);
  padding-right: var(--swtd-space-lg);
}

/* Form Inputs */
.swtd-input {
  background-color: var(--swtd-input);
  color: var(--swtd-light);
  border: 1px solid var(--swtd-border);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: border-color 0.2s;
  width: 100%;
}
.swtd-input:focus {
  outline: none;
  border-color: var(--swtd-red);
  box-shadow: 0 0 0 3px rgba(181, 26, 24, 0.15);
}
.swtd-input::placeholder { color: var(--swtd-muted); }

/* Buttons */
.swtd-btn-primary {
  background-color: var(--swtd-red);
  color: white;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.swtd-btn-primary:hover { background-color: var(--swtd-red-light); }
.swtd-btn-primary:active { transform: scale(0.97); }
.swtd-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.swtd-btn-secondary {
  border: 1px solid var(--swtd-red);
  color: var(--swtd-red);
  padding: 0.625rem 1.25rem;
  background: transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.swtd-btn-secondary:hover {
  background-color: var(--swtd-red);
  color: white;
}
.swtd-btn-secondary:active { transform: scale(0.97); }

.swtd-btn-pill {
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cards */
.swtd-card {
  background-color: var(--swtd-card);
  border: 1px solid var(--swtd-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: var(--swtd-shadow);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.swtd-card:hover {
  border-color: var(--swtd-muted);
  box-shadow: var(--swtd-shadow-hover);
  transform: translateY(-2px);
}

/* Code blocks */
.swtd-code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  background-color: var(--swtd-input);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
  color: var(--swtd-red);
}

/* Copy-to-Clipboard Button on <pre> blocks */
.swtd-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--swtd-card);
  border: 1px solid var(--swtd-border);
  color: var(--swtd-muted);
  padding: 0.375rem;
  border-radius: 0.375rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s;
  z-index: 10;
  line-height: 0;
}
pre:hover .swtd-copy-btn { opacity: 1; }
.swtd-copy-btn:hover {
  color: var(--swtd-light);
  border-color: var(--swtd-red);
}
.swtd-copy-btn--copied {
  color: #2d6a4f !important;
  border-color: #2d6a4f !important;
  opacity: 1 !important;
}

/* Native <dialog> Styling */
dialog.swtd-dialog {
  background: var(--swtd-card);
  color: var(--swtd-light);
  border: 1px solid var(--swtd-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  max-width: 28rem;
  width: 90vw;
}
dialog.swtd-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
dialog.swtd-dialog[open] {
  animation: swtd-dialog-in 0.15s ease-out;
}
@keyframes swtd-dialog-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Product Lightbox */
#product-lightbox {
  border: none;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: transparent;
}
#product-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.95);
}

/* Swagger UI Dark Theme Overrides */
.swagger-ui-dark .swagger-ui {
  font-family: 'Montserrat', system-ui, sans-serif;
}
.swagger-ui-dark .swagger-ui .topbar { display: none; }
.swagger-ui-dark .swagger-ui .info { margin: 0.5rem 0; }
.swagger-ui-dark .swagger-ui .info .title { color: var(--swtd-light); font-size: 1.25rem; }
.swagger-ui-dark .swagger-ui .info .base-url { color: var(--swtd-muted); }
.swagger-ui-dark .swagger-ui .info .description,
.swagger-ui-dark .swagger-ui .info .description p,
.swagger-ui-dark .swagger-ui .info .description div { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .info a { color: var(--swtd-red); }
.swagger-ui-dark .swagger-ui .info li,
.swagger-ui-dark .swagger-ui .info p,
.swagger-ui-dark .swagger-ui .info table td { color: var(--swtd-muted); }
.swagger-ui-dark .swagger-ui .renderedMarkdown p { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .opblock-description-wrapper p { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .response-col_links { color: var(--swtd-muted); }
.swagger-ui-dark .swagger-ui label { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .tab li { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .tab li.active { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .opblock-section-header h4 { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .opblock-section-header { background: var(--swtd-card); border-color: #555; }
.swagger-ui-dark .swagger-ui .responses-inner h4,
.swagger-ui-dark .swagger-ui .responses-inner h5 { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .response-control-media-type__accept-message { color: var(--swtd-muted); }
.swagger-ui-dark .swagger-ui select { background: var(--swtd-input); color: var(--swtd-light); border-color: var(--swtd-border); }
.swagger-ui-dark .swagger-ui .scheme-container { background: var(--swtd-card); box-shadow: none; }
.swagger-ui-dark .swagger-ui .opblock-tag { color: var(--swtd-light); border-bottom-color: #555; }
.swagger-ui-dark .swagger-ui .opblock { background: var(--swtd-dark); border-color: #555; }
.swagger-ui-dark .swagger-ui .opblock .opblock-summary { border-color: #555; }
.swagger-ui-dark .swagger-ui .opblock .opblock-summary-method { font-size: 0.75rem; }
.swagger-ui-dark .swagger-ui .opblock .opblock-summary-path { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .opblock .opblock-summary-description { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .opblock-body { background: var(--swtd-card); }
.swagger-ui-dark .swagger-ui .opblock-body pre { background: var(--swtd-input); color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui table thead tr td,
.swagger-ui-dark .swagger-ui table thead tr th { color: var(--swtd-light); border-bottom-color: #555; }
.swagger-ui-dark .swagger-ui .parameter__name { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .parameter__type { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .response-col_status { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .response-col_description { color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .btn { border-radius: 0.25rem; color: var(--swtd-light); border-color: #555; }
.swagger-ui-dark .swagger-ui .btn.try-out__btn { color: var(--swtd-light); border-color: var(--swtd-muted); background: transparent; }
.swagger-ui-dark .swagger-ui .btn.try-out__btn:hover { background: var(--swtd-card); border-color: var(--swtd-light); }
.swagger-ui-dark .swagger-ui .btn.execute { background: var(--swtd-red); border-color: var(--swtd-red); }
.swagger-ui-dark .swagger-ui .btn.execute:hover { background: var(--swtd-red-light); }
.swagger-ui-dark .swagger-ui input[type=text] {
  background: var(--swtd-input); color: var(--swtd-light); border-color: var(--swtd-border);
}
.swagger-ui-dark .swagger-ui .model-box { background: var(--swtd-dark); }
.swagger-ui-dark .swagger-ui section.models { border-color: #555; }
.swagger-ui-dark .swagger-ui .model { color: var(--swtd-muted); }
.swagger-ui-dark .swagger-ui .operation-filter-input {
  background: var(--swtd-input); color: var(--swtd-light); border: 1px solid var(--swtd-border);
}

/* Bug Mode Indicator */
.swtd-bug-indicator {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: rgba(181, 26, 24, 0.9);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

/* Status Dot — Pulse Animation */
@keyframes swtd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.swtd-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  animation: swtd-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Language Selector in Control Center */
.swtd-lang-select {
  background-color: var(--swtd-input);
  color: var(--swtd-light);
  border: 1px solid var(--swtd-border);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.swtd-lang-select:focus {
  outline: none;
  border-color: var(--swtd-red);
}

/* ═══════════════════════════════════════════════════ */
/* Session Overlay System                             */
/* ═══════════════════════════════════════════════════ */

/* Backdrop */
.swtd-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 55;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.swtd-overlay-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Full Overlay (Konfigurator) — slides down from header */
.swtd-session-overlay {
  position: fixed;
  top: 4rem; /* below header */
  left: 0;
  right: 0;
  max-height: 85vh;
  background: var(--swtd-dark);
  border-top: 2px solid var(--swtd-red);
  z-index: 56;
  overflow-y: auto;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  pointer-events: none;
}
.swtd-session-overlay.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Mini-Panel shared styles */
.swtd-mini-panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: var(--swtd-card);
  border: 1px solid var(--swtd-border);
  border-radius: 0.75rem;
  z-index: 60;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Mini-Panel action buttons */
.swtd-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--swtd-border);
  background: var(--swtd-input);
  color: var(--swtd-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.swtd-action-btn:hover {
  border-color: var(--swtd-red);
  color: var(--swtd-light);
}
.swtd-action-btn--play:hover {
  border-color: var(--swtd-success);
  color: var(--swtd-success);
}
.swtd-action-btn--stop:hover {
  border-color: var(--swtd-red);
  color: var(--swtd-red);
}
.swtd-action-btn--config:hover {
  border-color: var(--swtd-warning);
  color: var(--swtd-warning);
}

/* Marketing-Modus: grüner "Simulation starten"-Button (Nav-Konzept "zwei Modi").
 * Farben/Geometrie aus freigegebenem Spec (nav-vorschau): #2d6a4f, Randglow grün. */
.swtd-btn-start-sim {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #2d6a4f;
  color: #fff;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 9px;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.18);
  transition: background-color 0.2s ease, transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.swtd-btn-start-sim:hover { background: #37815f; }
.swtd-btn-start-sim:active { transform: scale(0.97); }

/* Button active states — Play/Pause/Stop always visible */
.swtd-btn-active-green {
  border-color: var(--swtd-success) !important;
  color: var(--swtd-success) !important;
  background: rgba(34, 197, 94, 0.15);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5), 0 0 24px rgba(34, 197, 94, 0.2);
}
.swtd-btn-active-orange {
  border-color: var(--swtd-warning) !important;
  color: var(--swtd-warning) !important;
  background: rgba(251, 146, 60, 0.15);
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.5), 0 0 24px rgba(251, 146, 60, 0.2);
}
/* Play button: green border in live mode (ready to play) */
.swtd-btn-ready-green {
  border-color: var(--swtd-success);
  color: var(--swtd-success);
}
/* Play button: pulse glow when active */
.swtd-btn-blink-green {
  animation: swtd-btn-pulse-green 1.5s ease-in-out infinite;
}
@keyframes swtd-btn-pulse-green {
  0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.6), 0 0 32px rgba(34, 197, 94, 0.3); }
}
/* Pause button: pulse glow when active (same intensity, orange) */
.swtd-btn-blink-orange {
  animation: swtd-btn-pulse-orange 1.5s ease-in-out infinite;
}
@keyframes swtd-btn-pulse-orange {
  0%, 100% { box-shadow: 0 0 6px rgba(251, 146, 60, 0.2); }
  50% { box-shadow: 0 0 16px rgba(251, 146, 60, 0.6), 0 0 32px rgba(251, 146, 60, 0.3); }
}

/* Animated underline on text links */
.swtd-link {
  position: relative;
  text-decoration: none;
}
.swtd-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--swtd-red);
  transition: width 0.25s ease;
}
.swtd-link:hover::after {
  width: 100%;
}

/* Hero Section */
.swtd-hero {
  background: radial-gradient(ellipse at 50% 0%, rgba(181,26,24,0.15) 0%, transparent 70%);
  background-size: 200% 100%;
  animation: swtd-hero-glow 8s ease-in-out infinite alternate;
}
@keyframes swtd-hero-glow {
  from { background-position: 30% 0; }
  to   { background-position: 70% 0; }
}
@keyframes swtd-stagger-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.swtd-stagger { animation: swtd-stagger-in 0.6s ease-out both; }
.swtd-stagger-1 { animation-delay: 0.1s; }
.swtd-stagger-2 { animation-delay: 0.25s; }
.swtd-stagger-3 { animation-delay: 0.4s; }

/* Scroll-triggered Reveal Animation */
.swtd-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.swtd-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility — Respect user's motion preferences (OS or in-app toggle) */
@media (prefers-reduced-motion: reduce) {
  body > :not(header) { animation: none; }
  dialog.swtd-dialog[open] { animation: none; }
  .swtd-status-dot { animation: none; }
  .swtd-input, .swtd-btn-primary, .swtd-btn-secondary,
  .swtd-copy-btn, .swtd-overlay-backdrop, .swtd-session-overlay,
  .swtd-action-btn, .swtd-card { transition-duration: 0.01s !important; }
  .swtd-reveal { opacity: 1; transform: none; transition: none; }
  .swtd-stagger { animation: none; opacity: 1; transform: none; }
  .swtd-hero { animation: none; background-position: 50% 0; }
  .swtd-link::after { transition: none; }
  .swtd-grain::after { display: none; }
  .swtd-element-card { transition-duration: 0.01s !important; }
  .swtd-element-card.bug-active { animation: none; }
  .swtd-element-tab { transition-duration: 0.01s !important; }
  .swtd-fw-chip { transition-duration: 0.01s !important; }
}
body.swtd-reduce-motion > :not(header) { animation: none; }
body.swtd-reduce-motion .swtd-reveal { opacity: 1; transform: none; transition: none; }
body.swtd-reduce-motion .swtd-stagger { animation: none; opacity: 1; transform: none; }
body.swtd-reduce-motion .swtd-hero { animation: none; background-position: 50% 0; }
body.swtd-reduce-motion .swtd-link::after { transition: none; }
body.swtd-reduce-motion dialog.swtd-dialog[open] { animation: none; }
body.swtd-reduce-motion .swtd-status-dot { animation: none; }
body.swtd-reduce-motion .swtd-input,
body.swtd-reduce-motion .swtd-btn-primary,
body.swtd-reduce-motion .swtd-btn-secondary,
body.swtd-reduce-motion .swtd-copy-btn,
body.swtd-reduce-motion .swtd-overlay-backdrop,
body.swtd-reduce-motion .swtd-session-overlay,
body.swtd-reduce-motion .swtd-action-btn,
body.swtd-reduce-motion .swtd-card { transition-duration: 0.01s !important; }
body.swtd-reduce-motion .swtd-grain::after { display: none; }
body.swtd-reduce-motion .swtd-element-card { transition-duration: 0.01s !important; }
body.swtd-reduce-motion .swtd-element-card.bug-active { animation: none; }
body.swtd-reduce-motion .swtd-element-tab { transition-duration: 0.01s !important; }
body.swtd-reduce-motion .swtd-fw-chip { transition-duration: 0.01s !important; }

/* ═══════════════════════════════════════════════════ */
/* Element Garden 2.0 — Card System                    */
/* ═══════════════════════════════════════════════════ */

/* Grain texture overlay — reusable on any position:relative container */
.swtd-grain { position: relative; }
.swtd-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}
.swtd-grain > * { position: relative; z-index: 2; }

/* Element Card — workflow-style: transparent in single-view */
.swtd-element-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
}
.swtd-element-card:hover {
  /* No hover effects in workflow-style view */
}

/* Element Header — HIDDEN (replaced by workflow-style header outside card) */
.swtd-element-header {
  display: none;
}
.swtd-terminal-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.swtd-terminal-dot--red { background: rgba(239,68,68,0.7); }
.swtd-terminal-dot--yellow { background: rgba(234,179,8,0.7); }
.swtd-terminal-dot--green { background: rgba(34,197,94,0.7); }

/* Tab System — Demo / Bug toggle */
.swtd-element-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--swtd-border);
}
.swtd-element-tab {
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--swtd-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  user-select: none;
}
.swtd-element-tab:hover {
  color: var(--swtd-light);
}
.swtd-element-tab.active {
  color: var(--swtd-light);
  border-bottom-color: var(--swtd-red);
}

/* Bug filter: hide cards with no matching bugs in bug mode */
.swtd-element-card.swtd-bug-hidden { display: none !important; }

/* Explorer highlight flash (when clicking a bug row to scroll to card) */
.swtd-element-card.explorer-highlight {
  animation: explorer-flash 2s ease-out;
}
@keyframes explorer-flash {
  0%   { box-shadow: 0 0 0 3px rgba(181,26,24,0.8); }
  100% { box-shadow: 0 0 0 0 rgba(181,26,24,0); }
}

/* Bug Explorer table styling */
.bug-explorer { font-family: 'JetBrains Mono', monospace; }
.bug-explorer table th { user-select: none; }
.bug-explorer table tbody tr:last-child { border-bottom: none; }
.bug-explorer .swtd-element-header { border-radius: 0.5rem 0.5rem 0 0; }

/* Bug Mode Glow — pulsing red border on active bug cards */
.swtd-element-card.bug-active {
  border-color: var(--swtd-red);
  box-shadow: var(--swtd-shadow), 0 0 20px rgba(181,26,24,0.25), 0 0 40px rgba(181,26,24,0.1);
  animation: swtd-bug-pulse 2s ease-in-out infinite;
}
@keyframes swtd-bug-pulse {
  0%, 100% { box-shadow: var(--swtd-shadow), 0 0 20px rgba(181,26,24,0.25), 0 0 40px rgba(181,26,24,0.1); }
  50%      { box-shadow: var(--swtd-shadow), 0 0 30px rgba(181,26,24,0.35), 0 0 60px rgba(181,26,24,0.15); }
}

/* Bug badge on card header */
.swtd-bug-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: rgba(181,26,24,0.15);
  color: var(--swtd-red-light);
  font-size: 0.625rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Framework tag chips */
.swtd-fw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  border: 1px solid var(--swtd-border);
  background: var(--swtd-input);
  color: var(--swtd-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.swtd-fw-chip:hover {
  border-color: var(--swtd-red);
  color: var(--swtd-light);
}
.swtd-fw-chip.active {
  border-color: var(--swtd-red);
  background: rgba(181,26,24,0.15);
  color: var(--swtd-red-light);
}

/* ═══════════════════════════════════════════════════ */
/* Navigation Transition Animations (Simulation)       */
/* ═══════════════════════════════════════════════════ */

/* Nav mode switching — smooth crossfade, NUR opacity + transform (kein Reflow).
 * Motion-Spec: 240ms, cubic-bezier(0.22,1,0.36,1) — identisch für Linkleisten,
 * Button-Gruppen UND Live-Badge (Paired-Elements-Regel).
 * Outgoing sinkt 4px ab + blendet aus, Incoming steigt 4px auf + blendet ein.
 * visibility läuft diskret mit: bleibt 'visible', solange opacity animiert.
 *
 * FOUC-Schutz: Transitions sind hinter html.swtd-nav-ready gegattert.
 * headerNav() setzt die Klasse erst NACH dem ersten gerenderten Frame
 * (Double-rAF nach Alpine-Init) — der Erst-Load animiert also NIE, der
 * Pre-Alpine-Mechanismus (html.swtd-play-active, oben) bleibt unverändert. */
:root {
  --swtd-nav-dur: 240ms;
  --swtd-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html.swtd-nav-ready .swtd-nav-standard,
html.swtd-nav-ready .swtd-nav-play,
html.swtd-nav-ready .swtd-nav-std-btns,
html.swtd-nav-ready .swtd-nav-play-btns {
  transition:
    opacity var(--swtd-nav-dur) var(--swtd-nav-ease),
    transform var(--swtd-nav-dur) var(--swtd-nav-ease),
    visibility var(--swtd-nav-dur);
  will-change: opacity, transform;
}

/* Hidden state: applied by Alpine via :class binding (Pre-Alpine-Spiegel oben) */
.swtd-nav-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
}

/* Live-Badge (#cc-mount): gleiche Dauer/Easing wie die Nav-Gruppen.
 * Layout-Präsenz (display via x-show="badgeShown") ist ein Load-Snapshot und
 * ändert sich in-page nie — der Moduswechsel selbst faded nur opacity/transform
 * über die Klassen unten (kein Layout-Sprung der Nachbarn). */
.swtd-nav-fade {
  transition:
    opacity var(--swtd-nav-dur) var(--swtd-nav-ease),
    transform var(--swtd-nav-dur) var(--swtd-nav-ease);
}
.swtd-nav-fade-hidden { opacity: 0; transform: translateY(4px); pointer-events: none; }
.swtd-nav-fade-shown  { opacity: 1; transform: translateY(0); }

/* System nav link — accent underline on active */
.swtd-nav-system-link {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Window frame entrance animation */
.swtd-window-entering {
  animation: swtd-windowEnter 0.4s ease forwards;
}
@keyframes swtd-windowEnter {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Play-mode body class — optional for page-level styling */
body.swtd-play-mode {
  /* Could add background variations when in play mode */
}

/* Reduced motion overrides for nav transitions.
 * Selektoren MÜSSEN die html.swtd-nav-ready-Regel schlagen (Spezifität!),
 * daher gleiche Präfixe wiederholen — sofortiger Wechsel ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  html.swtd-nav-ready .swtd-nav-standard,
  html.swtd-nav-ready .swtd-nav-play,
  html.swtd-nav-ready .swtd-nav-std-btns,
  html.swtd-nav-ready .swtd-nav-play-btns,
  .swtd-nav-fade {
    transition: none;
  }
  .swtd-window-entering {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
body.swtd-reduce-motion .swtd-nav-standard,
body.swtd-reduce-motion .swtd-nav-play,
body.swtd-reduce-motion .swtd-nav-std-btns,
body.swtd-reduce-motion .swtd-nav-play-btns,
body.swtd-reduce-motion .swtd-nav-fade {
  transition: none !important;
}
body.swtd-reduce-motion .swtd-window-entering {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Responsive */

/* Tablet: compress nav */
@media (max-width: 1024px) {
  .swtd-nav-play .swtd-nav-systems {
    font-size: 0.875rem;
    gap: 0.75rem;
  }
}

/* Mobile: hamburger menu, smaller window margins */
@media (max-width: 768px) {
  .swtd-hide-mobile { display: none !important; }
  .swtd-nav-desktop { display: none; }
  .swtd-nav-mobile { display: flex; }
  .swtd-window {
    margin: 8px;
    border-radius: 8px;
  }
}

/* ═══════════════════════════════════════════════════ */
/* Red Top Glow — visible on all Play-mode pages      */
/* ═══════════════════════════════════════════════════ */
html.swtd-play-active body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(181,26,24,0.25) 0%, rgba(181,26,24,0.08) 40%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.swtd-play-active body::before { display: none; }
}
body.swtd-reduce-motion::before { display: none; }

/* ── Simulation Task Dots (Subway Map Live) ────────────── */
@keyframes sim-task-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
.sim-task-dot {
  animation: sim-task-pulse 1.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@media (prefers-reduced-motion: reduce) {
  .sim-task-dot { animation: none; }
}
body.swtd-reduce-motion .sim-task-dot { animation: none; }

/* ═══════════════════════════════════════════════════ */
/* Wiki — Fachkonzept Knowledge Base                    */
/* ═══════════════════════════════════════════════════ */
.wiki-sidebar { scrollbar-width: thin; scrollbar-color: var(--swtd-border) transparent; }
.wiki-sidebar::-webkit-scrollbar { width: 3px; }
.wiki-sidebar::-webkit-scrollbar-track { background: transparent; }
.wiki-sidebar::-webkit-scrollbar-thumb { background: var(--swtd-border); border-radius: 2px; }
.wiki-nav-item { transition: all 0.15s ease; border-left: 2px solid transparent; }
.wiki-nav-item:hover { border-left-color: var(--swtd-muted); background: rgba(255,255,255,0.02); }
.wiki-nav-item.active { border-left-color: var(--swtd-red); background: rgba(181,26,24,0.06); color: var(--swtd-light) !important; }
.wiki-section { scroll-margin-top: 90px; }
.wiki-h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; border-bottom: 1px solid var(--swtd-border); padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.wiki-h3 { font-size: 1.125rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; }
.wiki-h4 { font-size: 0.95rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--swtd-muted); }
.wiki-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.wiki-table th { text-align: left; padding: 0.5rem 0.75rem; background: var(--swtd-input); color: var(--swtd-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; border-bottom: 1px solid var(--swtd-border); }
.wiki-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--swtd-border); vertical-align: top; }
.wiki-table tr:hover td { background: rgba(255,255,255,0.01); }
.wiki-table code { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--swtd-red); background: var(--swtd-input); padding: 0.1rem 0.35rem; border-radius: 0.2rem; }
.wiki-flow { background: var(--swtd-input); border: 1px solid var(--swtd-border); border-radius: 0.5rem; padding: 1rem 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; line-height: 1.6; overflow-x: auto; white-space: pre; color: var(--swtd-muted); margin: 1rem 0; }
.wiki-flow .hl { color: var(--swtd-light); font-weight: 600; }
.wiki-callout { border-left: 3px solid var(--swtd-red); background: rgba(181,26,24,0.04); padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 0 0.375rem 0.375rem 0; font-size: 0.85rem; }
.wiki-callout-info { border-left-color: var(--swtd-muted); background: rgba(154,147,150,0.04); }
.wiki-p { font-size: 0.875rem; line-height: 1.7; color: var(--swtd-muted); margin-bottom: 0.75rem; }
.wiki-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.wiki-list li { position: relative; padding-left: 1.25rem; font-size: 0.85rem; color: var(--swtd-muted); margin-bottom: 0.35rem; }
.wiki-list li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 5px; height: 5px; background: var(--swtd-red); border-radius: 1px; }
.wiki-dept-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 1023px) { .wiki-sidebar-desktop { display: none; } }
.wiki-hub-card {
  display: flex; align-items: center; gap: 0.75rem; background: var(--swtd-card); border: 1px solid var(--swtd-border);
  border-radius: 0.5rem; padding: 0.625rem 0.875rem; text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wiki-hub-card:hover {
  border-color: var(--swtd-red); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181,26,24,0.1), 0 4px 12px rgba(0,0,0,0.3);
}
.wiki-breadcrumb a { color: var(--swtd-muted); text-decoration: none; transition: color 0.15s; }
.wiki-breadcrumb a:hover { color: var(--swtd-light); }
.wiki-xref {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.375rem 0.75rem; border: 1px solid var(--swtd-border); border-radius: 0.375rem;
  background: var(--swtd-input); color: var(--swtd-muted); font-size: 0.75rem;
  text-decoration: none; transition: all 0.15s ease;
}
.wiki-xref:hover { border-color: var(--swtd-red); color: var(--swtd-light); }
/* Wiki search result highlight flash — highlights the element containing the search match */
.wiki-highlight {
  animation: wiki-flash 2.5s ease-out;
  border-radius: 0.25rem;
}
@keyframes wiki-flash {
  0%, 30% { box-shadow: inset 3px 0 0 var(--swtd-red), 0 0 24px rgba(181,26,24,0.2); background: rgba(181,26,24,0.1); }
  100% { box-shadow: none; background: transparent; }
}
/* Inline text highlight for search matches */
.wiki-search-mark {
  background: var(--swtd-red);
  color: white;
  padding: 0.1rem 0.25rem;
  border-radius: 0.15rem;
  font-style: normal;
  animation: wiki-mark-pulse 1.5s ease-in-out 2;
}
@keyframes wiki-mark-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181,26,24,0); }
  50% { box-shadow: 0 0 8px 2px rgba(181,26,24,0.5); }
}
/* Wiki Collapsible Sections */
.wiki-details { border: 1px solid var(--swtd-border); border-radius: 0.5rem; margin: 0.75rem 0; overflow: hidden; }
.wiki-details summary {
  cursor: pointer; padding: 0.625rem 1rem; font-size: 0.8rem; font-weight: 600;
  color: var(--swtd-muted); background: var(--swtd-input); list-style: none;
  display: flex; align-items: center; gap: 0.5rem; transition: color 0.15s, background 0.15s;
  user-select: none;
}
.wiki-details summary:hover { color: var(--swtd-light); background: var(--swtd-charcoal); }
.wiki-details summary::-webkit-details-marker { display: none; }
.wiki-details summary::before {
  content: ''; display: inline-block; width: 0; height: 0;
  border-left: 5px solid var(--swtd-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.2s ease; flex-shrink: 0;
}
.wiki-details[open] summary::before { transform: rotate(90deg); }
.wiki-details[open] summary { color: var(--swtd-light); border-bottom: 1px solid var(--swtd-border); }
.wiki-details > div { padding: 0.75rem 1rem; }
.wiki-details .wiki-table { margin: 0; }
.wiki-details .wiki-flow { margin: 0; border: none; border-radius: 0; }

/* ── Workflow Sidebar Scrollbar ─────────────────────────── */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--swtd-border) transparent;
}
.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--swtd-border); border-radius: 2px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--swtd-muted); }

/* ── Workflow-Runner: aufgeklapptes Panel immer in voller Breite ───────── */
/* Bug #85: In den Aktions-Leisten (display:flex) der Backoffice-Detailansichten
   lag das eingeklappte Workflow-Panel im SELBEN flex-row-Container wie die
   Buttons. Folge: das Panel wurde zur schmalen Spalte gequetscht und der
   Toggle-Button (z.B. "Einziehen") auf Panel-Hoehe gestreckt (hoher, schmaler
   Block). Fix: Container mit direktem Workflow-Panel-Kind umbrechen lassen und
   das Panel auf volle Zeilenbreite zwingen. Greift NUR, wenn das Panel direktes
   flex-Kind ist — block-Panels (Task-Queue, getrennte post/shop-Layouts) bleiben
   unberuehrt. */
.flex:has(> [x-data^="workflowRunner"]) {
  flex-wrap: wrap;
  align-items: flex-start;
}
.flex > [x-data^="workflowRunner"] {
  flex-basis: 100%;
}

/* ── Beta-Kennzeichnung ──────────────────────────────────────────────────
   Der Playground ist offen zugaenglich, aber noch im Aufbau. Zwei Stellen
   sagen das:

   1. Kopfleiste: das Wort "Beta" hinter "Playground", in derselben Schrift
      und Farbe. Es gehoert zum Namen — kein Aufkleber, kein Band. Ein frueher
      hier stehendes schraeges Band ueber dem Logo ist entfallen: es verdeckte
      die Marke.
   2. Startseite: "Public Beta" in der Edition-Pille, mit einem Punkt davor,
      der ruhig atmet. */

.swtd-edition-pille::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Nur Opazitaet, damit nichts neu berechnet werden muss — und aus, wenn der
   Nutzer weniger Bewegung eingestellt hat. */
@media (prefers-reduced-motion: no-preference) {
  .swtd-edition-pille::before { animation: swtd-beta-puls 2.4s ease-in-out infinite; }
  @keyframes swtd-beta-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }
}

/* ── Verweis ins Wiki ────────────────────────────────────────────────────
   Ueberall dort, wo im Playground ein Thema erklaert wird und es dazu eine
   Wiki-Seite gibt, steht dieser Verweis. Bewusst zurueckhaltend: er soll den
   Text nicht uebertoenen, aber am Ende eines Abschnitts sofort auffindbar
   sein. Der kleine Pfeil wandert beim Ueberfahren nach rechts — das ist die
   einzige Bewegung, und sie zeigt die Richtung an. */
.swtd-wiki-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--swtd-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.swtd-wiki-link::before { content: '\1F4D6'; font-size: 0.7rem; opacity: .75; }
.swtd-wiki-link::after {
  content: '\2192';
  transition: transform .18s ease;
}
.swtd-wiki-link:hover {
  color: var(--swtd-red);
  border-bottom-color: rgba(181, 26, 24, .5);
}
.swtd-wiki-link:hover::after { transform: translateX(3px); }
.swtd-wiki-link:focus-visible {
  outline: 2px solid var(--swtd-red);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .swtd-wiki-link, .swtd-wiki-link::after { transition: none; }
  .swtd-wiki-link:hover::after { transform: none; }
}

/* ── Schriftfarbe Markenrot ────────────────────────────────────────────
   Die Klasse text-swtd-red kommt an ueber tausend Stellen vor und wird von
   Tailwind aus der Farbe #B51A18 erzeugt. Als Schrift auf dunklem Grund
   erreicht sie nur 2.5 bis 2.8:1 und verfehlt damit die Wiki-Regel von
   4.5:1 (WCAG AA). Statt tausend Klassen zu tauschen, wird hier die
   Schriftfarbe umgesetzt -- Flaechen (bg-swtd-red) und Rahmen
   (border-swtd-red) behalten das Markenrot unveraendert.

   Die Regel steht bewusst am Ende der Datei und mit html davor: Tailwind
   erzeugt seine Klasse zur Laufzeit, und ohne die zusaetzliche Spezifitaet
   entschiede allein die Ladereihenfolge. */
html .text-swtd-red { color: var(--swtd-red-schrift); }
html .hover\:text-swtd-red:hover { color: var(--swtd-red-schrift); }