/* ==========================================================================
   FIRMENFLOW CORPORATE DESIGN SYSTEM & FOUNDERSFLOW UI TOKENS
   Offizieller Design-Guide & Komponenten für Web-Apps & PWAs (firmenflow.de)
   ========================================================================== */

:root {
  /* --- Firmenflow Core Brand Palette (Strict Palette) --- */
  --ff-brand-coral: #ff705d;
  --ff-brand-coral-hover: #fa5d48;
  --ff-brand-coral-active: #e44d39;
  --ff-brand-coral-soft: rgba(255, 112, 93, 0.12);
  --ff-brand-coral-glow: rgba(255, 112, 93, 0.28);
  --ff-brand-plum: #482361;
  
  /* --- Paper & Ink Ästhetik --- */
  --ff-paper-bg: #fcfaf7;
  --ff-surface-white: #ffffff;
  --ff-subtle-hover: #f5f2ed;
  --ff-subtle-hover-dark: #1b2338;
  --ff-ink-primary: #17131a;
  --ff-ink-muted: #746d76;
  --ff-border-line: #e7e2dc;
  --ff-border-dark: rgba(255, 255, 255, 0.08);
  --ff-placeholder: #a39c96;
  --ff-active-box: #fff5f2;

  /* --- Dashboard Dark Surface Tokens (foundersflow Dark Canvas) --- */
  --ff-bg: #0B0F1A;
  --ff-surface: #131A2C;
  --ff-surface-2: #1B2338;
  --ff-border: rgba(255, 255, 255, 0.08);
  --ff-border-strong: rgba(255, 255, 255, 0.16);
  --ff-text: #F5F3EE;
  --ff-muted: #8B93A7;
  
  /* --- Functional Accents --- */
  --ff-gold: #F5A623;
  --ff-cyan: #38BDF8;
  --ff-violet: #8B5CF6;
  --ff-emerald: #10B981;
  --ff-rose: #EF4444;
  
  /* --- Gradients --- */
  --ff-gradient: linear-gradient(90deg, var(--ff-cyan), var(--ff-violet));
  --ff-gradient-coral: linear-gradient(135deg, #ff705d 0%, #fa5d48 100%);
  --ff-gradient-brand: linear-gradient(135deg, #ff705d 0%, #8B5CF6 100%);

  /* --- Harmonische Radien --- */
  --radius-card: 16px;   /* rounded-2xl */
  --radius-btn: 12px;    /* rounded-xl */
  --radius-pill: 999px;  /* rounded-full */
}

/* ==========================================================================
   Typografie & Text-Utilities
   ========================================================================== */

.ff-word-flow {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  background: var(--ff-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ff-word-coral {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  color: var(--ff-brand-coral);
}

/* ==========================================================================
   Offizieller Firmenflow Urheber-Badge ("Ein Tool von Firmenflow")
   ========================================================================== */

.firmenflow-author-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.firmenflow-author-badge:hover {
  background: rgba(255, 112, 93, 0.08);
  border-color: rgba(255, 112, 93, 0.35);
  box-shadow: 0 4px 16px rgba(255, 112, 93, 0.15);
  transform: translateY(-1px);
}

.firmenflow-author-badge .author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px rgba(255, 112, 93, 0.4);
}

.firmenflow-author-badge .author-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-muted);
}

.firmenflow-author-badge .author-wordmark {
  height: 14px;
  max-height: 14px;
  width: auto;
  object-fit: contain;
  filter: brightness(0.95);
}

/* ==========================================================================
   Karten, Boxen & Panels (rounded-2xl / 16px)
   ========================================================================== */

.ff-card {
  background: var(--ff-surface);
  border: 1px solid var(--ff-border);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.ff-card:hover {
  border-color: var(--ff-border-strong);
  background: var(--ff-surface-2);
}

.ff-card-paper {
  background: var(--ff-surface-white);
  border: 1px solid var(--ff-border-line);
  color: var(--ff-ink-primary);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Buttons (rounded-xl / 12px)
   ========================================================================== */

.ff-btn-coral {
  background: var(--ff-gradient-coral);
  color: #ffffff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  border: none;
  box-shadow: 0 4px 16px var(--ff-brand-coral-glow);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ff-btn-coral:hover {
  background: linear-gradient(135deg, #fa5d48 0%, #e44d39 100%);
  box-shadow: 0 6px 20px rgba(255, 112, 93, 0.4);
  transform: translateY(-1px);
}

.ff-cta {
  background: var(--ff-gradient);
  color: #0B0F1A;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  border: none;
  box-shadow: 0 0 28px rgba(139, 92, 246, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ff-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(139, 92, 246, 0.5);
}

/* ==========================================================================
   Chips & Badges (Anti-Pattern Schutz: flex-wrap statt Overflow-Scroll)
   ========================================================================== */

.ff-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  display: inline-block;
}

.ff-chip-coral {
  background: var(--ff-brand-coral-soft);
  color: var(--ff-brand-coral);
  border: 1px solid rgba(255, 112, 93, 0.3);
}

.ff-chip-web  { background: rgba(56, 189, 248, 0.14); color: var(--ff-cyan); border: 1px solid rgba(56, 189, 248, 0.3); }
.ff-chip-ki   { background: rgba(139, 92, 246, 0.14); color: #B79CFB; border: 1px solid rgba(139, 92, 246, 0.3); }
.ff-chip-auto { background: rgba(245, 166, 35, 0.14); color: var(--ff-gold); border: 1px solid rgba(245, 166, 35, 0.3); }

/* Verhindert unbeabsichtigte horizontale Scroll-Kanten bei Filter-Pills */
.ff-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}