/* ============================================================
   Brand: staffix — Skin (Komponenten-Aussehen)
   ------------------------------------------------------------
   Geladen NACH core.css → tokens.css → base/theme.css und
   überschreibt das neutrale base-Skin mit dem staffix-Look.
   Quelle der Wahrheit für das WIEDERVERWENDBARE Marken-Aussehen
   (gilt für staffix.de UND staffix-Tools, die diesen Brand erben).

   Aesthetik: freundlich, warm, modern. Coral-Primärfarbe mit
   verspieltem Spektrum-Akzent, warme Neutrals, großzügige Radien.
   Display = All Round Gothic (fonts.css), Fließtext = Inter.

   ⚠️ Dieser Skin ist HELL (auch von Tools nutzbar). Das DUNKLE
   Editorial-Theme der öffentlichen Website (ink/cream, Spektrum-
   Mesh, Section-Index) liegt SITE-seitig in main/staffix/public/
   staffix.css — NICHT hier.
   ============================================================ */

/* ============================================================
   0. Marken-Palette (additive Brand-Tokens)
   ------------------------------------------------------------
   Vollständige Rampen + Spektrum-Gradient aus dem staffix.de-
   Designentwurf. Werden von der Website (staffix.css) und von
   Tools wiederverwendet. Quelle der Wahrheit für die Palette.
   ============================================================ */
:root {
  /* Coral — Primary (Sunset-Orange) */
  --coral-50:  #FEF2EE;  --coral-100: #FCDFD5;  --coral-200: #F9BFAB;
  --coral-300: #F59A7C;  --coral-400: #F1764F;  --coral-500: #ED5A35;
  --coral-600: #D6431F;  --coral-700: #B03417;  --coral-800: #872811;
  --coral-900: #561A0B;

  /* Violett — Secondary */
  --violet-50:  #F5EFFB;  --violet-100: #E8D9F6;  --violet-200: #D2B4EC;
  --violet-300: #B98ADF;  --violet-400: #A063D3;  --violet-500: #8743C2;
  --violet-600: #6F33A4;  --violet-700: #582981;  --violet-800: #3F1D5C;
  --violet-900: #2A123E;

  /* Neutral — warmes Ink & Cream */
  --neutral-0:   #FFFFFF;  --neutral-50:  #FAF8F6;  --neutral-100: #F3EFEB;
  --neutral-200: #E7E0D9;  --neutral-300: #D4CBC2;  --neutral-400: #A89E94;
  --neutral-500: #7C7168;  --neutral-600: #594F47;  --neutral-700: #3D352F;
  --neutral-800: #261F1B;  --neutral-900: #14100E;

  /* Spektrum-Akzente */
  --accent-sky:  #2BA6E0;  --accent-teal: #1FB6AC;
  --accent-pink: #EC6FA8;  --accent-gold: #F7B500;

  /* Submarken */
  --brand-akko:     #F1764F;
  --brand-jobin:    #A063D3;
  --brand-talentim: #1FB6AC;

  /* Signatur-Gradients */
  --sfx-gradient-spectrum: linear-gradient(115deg,
      #2BA6E0 0%, #B98ADF 24%, #EC6FA8 46%, #F1764F 66%, #F7B500 88%);
  --sfx-gradient-warm: linear-gradient(120deg, var(--coral-400), var(--accent-gold));
  --sfx-gradient-dusk: linear-gradient(120deg, var(--violet-500), var(--accent-pink));

  /* Standard-Hook: Spectrum als brandübergreifendes --gradient-brand verfügbar
     machen → core.css-Utilities .u-gradient-text / .u-gradient-surface greifen.
     OPTIONAL: Brands ohne Verlauf setzen das NICHT (Utilities degradieren dann
     auf --color-primary). */
  --gradient-brand: var(--sfx-gradient-spectrum);

  /* ----------------------------------------------------------
     BRIDGE — bis der Portal-Sync tokens.css auf die neue Palette
     setzt. Werte = design.md. Sobald tokens.css Coral liefert,
     ist dieser Block redundant und kann entfernt werden.
     ---------------------------------------------------------- */
  --color-primary:        #ED5A35;
  --color-primary-hover:  #D6431F;
  --color-primary-rgb:    237, 90, 53;
  --color-secondary:      #8743C2;
  --color-black:          #14100E;
}

/* ============================================================
   1. Semantik-Token-Refinements (warmes, helles Tool-Canvas)
   ============================================================ */
:root {
  --color-text:    var(--neutral-700);   /* warmer Fließtext, nicht reines Schwarz */
  --color-muted:   var(--neutral-500);
  --color-surface: var(--neutral-0);
  --color-bg:      var(--neutral-50);     /* warmes Cream-Canvas */
  --border-subtle: var(--neutral-200);
  --border-field:  var(--neutral-300);

  --color-danger:  #E1392D;
  --color-warning: #F5A623;
  --color-success: #1F9D55;
  --color-info:    #2B7FE0;

  /* Freundlichere, größere Radien als der Core-Default */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Warm getönte Schatten statt reinem Schwarz */
  --shadow-card: 0 1px 3px rgba(38, 31, 27, .08), 0 1px 2px rgba(38, 31, 27, .04);
  --shadow-soft: 0 12px 28px rgba(38, 31, 27, .12), 0 4px 8px rgba(38, 31, 27, .06);

  /* wiederverwendbare Brand-Flächen */
  --sfx-primary-soft: rgba(var(--color-primary-rgb), .08);
  --sfx-primary-ring: rgba(var(--color-primary-rgb), .35);
}

/* Headlines: enger Satz, ausgewogene Umbrüche */
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--color-black);
}

/* Links */
a { color: var(--color-primary); transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-hover); }

/* ============================================================
   2. Button — freundliche Pill, klarer Coral-Primär
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
}
.btn:hover { text-decoration: none; }

/* Primär — gefüllt Coral, dezenter Lift + warmer Glow */
.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .28);
}
.btn--primary:active { transform: translateY(0); }

/* Sekundär — Outline, füllt sich beim Hover */
.btn--secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--secondary:hover { background: var(--color-primary); color: #fff; }

/* Danger */
.btn--danger {
  background: transparent;
  border-color: #efb8b3;
  color: var(--color-danger);
}
.btn--danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

/* Icon-Button */
.btn--icon {
  padding: var(--space-2);
  border-radius: var(--radius-full);
  border-color: transparent;
  background: transparent;
  color: var(--color-muted);
}
.btn--icon:hover { background: var(--sfx-primary-soft); color: var(--color-primary); }

/* Klein */
.btn--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }

/* ============================================================
   3. Card — luftig, warme Linien, sanfter Hover
   ============================================================ */
.card {
  padding: var(--space-6);
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}
.card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  color: var(--color-black);
}
a.card, .card--link { display: block; color: inherit; text-decoration: none; }
a.card:hover, .card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(var(--color-primary-rgb), .35);
}

/* ============================================================
   4. Formular — klare Felder, warmer Coral-Fokus
   ============================================================ */
.field {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border-field);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field::placeholder { color: var(--color-muted); opacity: .85; }
.field:hover { border-color: var(--neutral-400); }
.field:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--sfx-primary-ring);
}
textarea.field { resize: vertical; min-height: 130px; line-height: var(--leading-normal); }

.form-field { margin-bottom: var(--space-5); }
.form-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-black);
}
.form-field__hint  { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
.form-field__error { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-danger); }

.field--error { border-color: var(--color-danger); }
.field--error:focus-visible { box-shadow: 0 0 0 3px rgba(225, 57, 45, .2); }
.field--valid { border-color: var(--color-success); }

/* Checkbox / Radio */
.choice { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; line-height: var(--leading-normal); }
.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: 1.15em; height: 1.15em;
  margin-top: 0.15em;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex: none;
}

/* ============================================================
   5. Notice / Alert — eine Akzentfarbe je Variante
   ============================================================ */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.notice__icon { flex: none; width: 1.25em; height: 1.25em; fill: currentColor; margin-top: 0.1em; }
.notice__close { margin-left: auto; }
.notice--info    { border-left-color: var(--color-info);    background: #E7F0FC; }
.notice--success { border-left-color: var(--color-success); background: #E8F6EE; }
.notice--warning { border-left-color: var(--color-warning); background: #FDF2DF; }
.notice--danger  { border-left-color: var(--color-danger);  background: #FBE9E7; }
.notice--info .notice__icon    { color: var(--color-info); }
.notice--success .notice__icon { color: var(--color-success); }
.notice--warning .notice__icon { color: var(--color-warning); }
.notice--danger .notice__icon  { color: var(--color-danger); }

/* ============================================================
   6. Tabs — Coral-Unterstreichung
   ============================================================ */
.tabs__list { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.tabs__tab {
  padding: var(--space-3) 0;
  border: 0; background: transparent;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: var(--weight-medium);
}
.tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.tabs__panel { padding: var(--space-5) 0; }