/* ============================================================
   staffix.css — lokaler Skin der Staffix-Website (ZULETZT geladen)
   ------------------------------------------------------------
   SEITEN-spezifisches, dunkles Editorial-Theme der öffentlichen
   Website (ink/cream, Spektrum-Mesh, nummerierter Section-Index).
   Tokens, Reset, Komponenten-Vertrag (.btn/.card/.field/.notice),
   Brand-Palette (--coral-*, --sfx-gradient-spectrum) + Fonts kommen
   ZENTRAL aus dem Design-System (link.azerus.de) via Base.astro.
   Hier NUR was wirklich nur diese Website betrifft.
   ============================================================ */

/* ---- site-lokale Aliase auf die Brand-Neutrals (aus theme.css) ---- */
:root {
  --ink:        var(--neutral-900, #14100E);  /* warmes Near-Black */
  --ink-lift:   #1E1815;                       /* leicht gehobene Panels */
  --ink-line:   rgba(255, 255, 255, 0.10);
  --ink-line-2: rgba(255, 255, 255, 0.16);
  --cream:      #F4EFE9;                        /* Primärtext auf Dunkel */
  --cream-dim:  #B7ABA0;                        /* gedämpfter Text */
  --cream-faint:#6E635B;
  --sfx-paper:  #EBE4DA;                        /* weiche, warme Lichtfläche (Panels/light-Sektionen) — weniger krass als reines Cream */
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--coral-500); color: #fff; }

/* Editorial-Site: keine geleakten Hover-Unterstreichungen (core.css a:hover).
   Interaktivität läuft über Farbe/Bewegung. Echte Text-Links (Fließtext,
   Consent) unterstreichen bewusst — und IMMER in Textfarbe (currentColor). */
a, a:hover { text-decoration: none; }
.sfx-prose a, .choice a {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ============================================================
   Layout
   ============================================================ */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.bay  { padding-left: 148px; }   /* Inhalt rechts neben dem Section-Index */
section { position: relative; }

/* responsiver Sektions-Rhythmus (ersetzt feste 120px-Inline-Paddings) */
.sfx-sec { padding-block: clamp(64px, 9vw, 120px); }

/* Hero-Innenfläche */
.sfx-hero__inner {
  position: relative;
  /* füllt den Viewport, deckelt aber auf 1200px (sonst riesige Leerräume auf
     sehr hohen Fenstern). min() statt max-height, da min-height sonst gewinnt. */
  min-height: min(100vh, 1200px);
  min-height: min(100svh, 1200px);
  padding-top: clamp(104px, 16vw, 132px);
  padding-bottom: clamp(56px, 8vw, 80px);
  display: flex; flex-direction: column; justify-content: center;
}

/* ============================================================
   Editorial-Typografie
   ============================================================ */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: var(--weight-bold); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--cream-dim);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--sfx-gradient-spectrum); }
.mega {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(3.4rem, 9.5vw, 7.2rem); line-height: 0.95;
  letter-spacing: -0.045em; margin: 0; color: var(--cream);
  overflow-wrap: break-word;
}
.big {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.0;
  letter-spacing: -0.035em; margin: 0; color: var(--cream); text-wrap: balance;
}
.h3 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0;
}
.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.55;
  color: var(--cream-dim); margin: 0; text-wrap: pretty;
}
.body { font-size: 1.05rem; line-height: 1.65; color: var(--cream-dim); margin: 0; }
.spectrum-text {
  background: var(--sfx-gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* helle Zwischensektion */
.light { background: var(--sfx-paper); color: var(--neutral-900); }
.light .mega, .light .big, .light .h3 { color: var(--neutral-900); }
.light .lead, .light .body { color: var(--neutral-600); }
.light .kicker { color: var(--neutral-500); }

/* kleine Bausteine */
.row { display: flex; align-items: center; gap: 14px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 14px; }
.stack { display: flex; flex-direction: column; }
.hr { height: 1px; background: var(--ink-line); border: 0; margin: 0; }
.light .hr { background: rgba(20, 16, 14, 0.12); }

/* ============================================================
   CTA — nutzt den Komponenten-Vertrag (.btn), im dunklen Site-
   Kontext zu Spektrum-Pill (primary) bzw. Cream-Ghost (secondary)
   umskiniert. Tools erben weiterhin den hellen theme.css-Skin.
   ============================================================ */
.btn { height: 58px; padding: 0 32px; font-size: 1.05rem; font-weight: var(--weight-bold); }
.btn--sm { height: 44px; padding: 0 22px; font-size: 15px; }
.btn--primary {
  background: var(--sfx-gradient-spectrum);
  border: none; color: #1b1310;
}
.btn--primary:hover {
  background: var(--sfx-gradient-spectrum);
  color: #1b1310; transform: translateY(-2px); filter: brightness(1.06); box-shadow: none;
}
.btn--secondary {
  background: transparent; color: var(--cream);
  border: 1.5px solid var(--ink-line-2);
}
.btn--secondary:hover { background: rgba(255, 255, 255, 0.06); color: var(--cream); }

/* ============================================================
   Hero — animiertes Spektrum-Mesh
   ============================================================ */
.sfx-mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sfx-mesh .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.sfx-mesh .b1 { width: 46vw; height: 46vw; top: -12vw; right: -8vw;
  background: radial-gradient(circle, var(--coral-500), transparent 65%); animation: sfx-drift1 18s ease-in-out infinite; }
.sfx-mesh .b2 { width: 40vw; height: 40vw; top: 8vw; right: 18vw; opacity: 0.4;
  background: radial-gradient(circle, var(--accent-gold), transparent 64%); animation: sfx-drift2 22s ease-in-out infinite; }
.sfx-mesh .b3 { width: 44vw; height: 44vw; bottom: -16vw; left: -6vw;
  background: radial-gradient(circle, var(--violet-500), transparent 66%); animation: sfx-drift3 20s ease-in-out infinite; }
.sfx-mesh .b4 { width: 32vw; height: 32vw; bottom: -6vw; left: 26vw; opacity: 0.35;
  background: radial-gradient(circle, var(--accent-sky), transparent 66%); animation: sfx-drift1 26s ease-in-out infinite reverse; }
.sfx-mesh .grain {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 50%, rgba(20, 16, 14, 0.34), rgba(20, 16, 14, 0.78) 78%);
}
@keyframes sfx-drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,4vw) scale(1.12)} }
@keyframes sfx-drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,5vw) scale(0.9)} }
@keyframes sfx-drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,-4vw) scale(1.1)} }
@media (prefers-reduced-motion: reduce) { .sfx-mesh .blob { animation: none !important; } }

/* ============================================================
   Chrome — Progress-Thread, Top-Bar, Section-Index-Rail
   ============================================================ */
.sfx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--sfx-gradient-spectrum); z-index: 100; transition: width .1s linear;
}
.sfx-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 74px;
  display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.sfx-topbar.is-solid {
  background: rgba(20, 16, 14, 0.72); backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--ink-line);
}
.sfx-topbar__inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sfx-topnav { display: flex; gap: 28px; }
.sfx-topnav a { font-size: 14px; font-weight: var(--weight-semibold); color: var(--cream-dim); transition: color .2s ease; }
.sfx-topnav a:hover { color: var(--cream); }

/* Sprachswitch DE/EN */
.sfx-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--weight-semibold); }
.sfx-lang__opt { color: var(--cream-faint); transition: color .2s ease; }
.sfx-lang__opt:hover { color: var(--cream-dim); }
.sfx-lang__opt.is-active { color: var(--cream); }
.sfx-lang__sep { color: var(--cream-faint); }

/* Zurück-Link (Inhaltsseiten) */
.sfx-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  font-weight: var(--weight-semibold); color: var(--cream-dim); transition: color .2s ease; }
.sfx-back:hover { color: var(--cream); }
.sfx-back .icon { font-size: 16px; }

.sfx-rail {
  position: fixed; left: 40px; top: 50%; transform: translateY(-50%); z-index: 80;
  display: flex; flex-direction: column; gap: 18px;
}
.sfx-rail a { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sfx-rail__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1.5px solid var(--cream-faint); transition: all .25s ease; }
.sfx-rail__num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold);
  font-size: 12px; letter-spacing: 0.08em; color: var(--cream-faint); transition: color .25s ease; }
.sfx-rail__label { font-size: 13px; font-weight: var(--weight-semibold); color: transparent;
  max-width: 0; overflow: hidden; white-space: nowrap; transition: color .25s ease, max-width .3s ease; }
.sfx-rail a.is-active .sfx-rail__dot { background: var(--coral-500); border-color: transparent; }
.sfx-rail a.is-active .sfx-rail__num { color: var(--cream); }
.sfx-rail a.is-active .sfx-rail__label { color: var(--cream); max-width: 120px; }
/* Rail-Farben invertieren über hellen Sektionen */
.sfx-rail.on-light .sfx-rail__dot { border-color: rgba(20,16,14,0.38); }
.sfx-rail.on-light .sfx-rail__num,
.sfx-rail.on-light a.is-active .sfx-rail__num,
.sfx-rail.on-light a.is-active .sfx-rail__label { color: var(--neutral-900); }

/* ============================================================
   Leistungen — Accordion
   ============================================================ */
.sfx-leist-row { border-top: 1px solid var(--ink-line); }
.sfx-leist-list > .sfx-leist-row:last-child { border-bottom: 1px solid var(--ink-line); }
.sfx-leist {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 28px; padding: 28px 0; text-align: left;
}
.sfx-leist__num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold);
  font-size: 15px; color: var(--cream-faint); width: 34px; flex: none; transition: color .25s ease; }
.sfx-leist__title { flex: 1; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--cream-dim); transition: color .25s ease, transform .3s ease; }
.sfx-leist__plus {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink-line-2); background: transparent; color: var(--cream-dim);
  transition: all .3s ease;
}
.sfx-leist__plus .icon { font-size: 22px; }
.sfx-leist__panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .35s ease; }
.sfx-leist__panel-inner { padding-left: 62px; padding-bottom: 34px; max-width: 720px; }
.sfx-leist__tagline { color: var(--cream); margin-bottom: 12px; }
.sfx-tag {
  display: inline-block; font-size: 13px; font-weight: var(--weight-semibold); color: var(--cream-dim);
  padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--ink-line-2);
}
/* offener Zustand (via JS .is-open auf .sfx-leist-row) */
.sfx-leist-row.is-open .sfx-leist__num { color: transparent; background: var(--sfx-gradient-spectrum);
  -webkit-background-clip: text; background-clip: text; }
.sfx-leist-row.is-open .sfx-leist__title { color: var(--cream); transform: translateX(8px); }
.sfx-leist-row.is-open .sfx-leist__plus { background: var(--sfx-gradient-spectrum); color: #1b1310; border-color: transparent; transform: rotate(45deg); }
.sfx-leist-row.is-open .sfx-leist__panel { max-height: 360px; opacity: 1; }

/* ============================================================
   Marken-Reihen
   ============================================================ */
.sfx-marke-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: 24px 40px; align-items: center; padding: 30px 0; border-top: 1px solid var(--ink-line);
}
.sfx-marke-list > .sfx-marke-row:last-child { border-bottom: 1px solid var(--ink-line); }
/* helles Chip (~4:3) trägt das farbige Brand-Logo (Normal-Version) auf Dunkel */
.sfx-marke__chip { display: inline-flex; align-items: center; justify-content: center;
  width: clamp(150px, 15vw, 184px); aspect-ratio: 4 / 3; padding: 18px;
  border-radius: var(--radius-lg); background: var(--sfx-paper); transition: transform .3s ease; }
.sfx-marke__logo { max-width: 100%; max-height: 56px; width: auto; height: auto; display: block; }
.sfx-marke__text { max-width: 62ch; }
.sfx-marke__cta { display: flex; align-items: center; gap: 10px; font-weight: var(--weight-bold);
  font-size: 15px; justify-self: end; color: var(--cream-dim); transition: color .3s ease; }
.sfx-marke__cta .icon { transition: transform .3s ease; }
.sfx-marke-row:hover .sfx-marke__chip { transform: translateX(10px); }
.sfx-marke-row:hover .sfx-marke__cta .icon { transform: translate(3px, -3px); }
/* Marken-Akzentfarbe beim Hover (per --accent inline gesetzt) */
.sfx-marke-row:hover .sfx-marke__cta { color: var(--accent, var(--coral-400)); }

/* ============================================================
   Gruppe-Gründe
   ============================================================ */
.sfx-gruende { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.sfx-grund { border-top: 2px solid var(--neutral-900); padding-top: 22px; }
.sfx-grund__title { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.1; letter-spacing: -0.02em; }

/* ============================================================
   Kontakt — dunkles Panel, helle Labels, dunkle Felder
   ============================================================ */
.sfx-kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: flex-start; }
.sfx-kontakt-info { display: flex; flex-direction: column; gap: 16px; margin-top: 44px; }
.sfx-kontakt-info__item { display: flex; gap: 14px; align-items: flex-start; }
.sfx-kontakt-info__ico { width: 44px; height: 44px; border-radius: var(--radius-md); flex: none;
  background: rgba(255,255,255,0.06); color: var(--coral-300);
  display: flex; align-items: center; justify-content: center; }
.sfx-kontakt-info__ico .icon { font-size: 21px; }
.sfx-kontakt-info__t { font-weight: var(--weight-bold); color: var(--cream); font-size: 15px; }
.sfx-kontakt-info__v { color: var(--cream-dim); font-size: 15px; margin-top: 2px; }
.sfx-form-panel { background: var(--ink-lift); color: var(--cream-dim);
  border: 1px solid var(--ink-line-2); border-radius: var(--radius-xl, 24px);
  padding: 34px; box-shadow: 0 18px 44px rgba(0,0,0,0.35); }
.sfx-form-panel .form-field { margin-bottom: var(--space-4); }
.sfx-form-panel .form-field__label { color: var(--cream); }   /* helle Labels */
.sfx-form-panel .choice { color: var(--cream-dim); }           /* Consent lesbar auf Dunkel */
.sfx-form-panel .btn--primary { width: 100%; }

/* dunkle Felder auf dunklem Panel (überschreibt den hellen theme.css-Skin) */
.sfx-form-panel .field {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--ink-line-2);
  color: var(--cream);
}
.sfx-form-panel .field::placeholder { color: var(--cream-faint); }
.sfx-form-panel .field:hover { border-color: rgba(255, 255, 255, 0.28); }
.sfx-form-panel .field:focus-visible {
  border-color: var(--coral-400);
  box-shadow: 0 0 0 3px rgba(237, 90, 53, 0.35);
}

/* ============================================================
   Footer
   ============================================================ */
.sfx-footer { border-top: 1px solid var(--ink-line); }
.sfx-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.sfx-foot-col__h { color: var(--cream); font-weight: var(--weight-bold); font-size: 14px; margin-bottom: 14px; }
.sfx-foot-col a, .sfx-foot-meta a { color: var(--cream-dim); transition: color .2s ease; }
.sfx-foot-col a:hover, .sfx-foot-meta a:hover { color: var(--cream); }
.sfx-foot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--cream-faint); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  /* Rail ausgeblendet → kein 148px-Offset mehr; ABER das .wrap-Gutter
     muss erhalten bleiben (sonst klebt der Inhalt links am Rand). */
  .bay { padding-left: clamp(20px, 5vw, 40px); }
  .sfx-rail { display: none !important; }
}
@media (max-width: 900px) {
  .sfx-topnav { display: none !important; }
  .sfx-gruende { grid-template-columns: 1fr 1fr; }
  .sfx-kontakt-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .sfx-foot-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  /* Hero: Kicker (STAFFIX GmbH …) ausblenden, Headline größer + sauberer Umbruch */
  .sfx-hero__inner .kicker { display: none; }
  .sfx-hero__inner .mega { font-size: clamp(3.1rem, 13vw, 3.4rem); hyphens: auto; }
  .sfx-gruende { grid-template-columns: 1fr; }
  /* Marken stapeln: Chip (volle Breite) oben, Text, dann CTA */
  .sfx-marke-row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .sfx-marke__chip { width: 100%; aspect-ratio: auto; padding: 20px; }
  .sfx-marke__cta { justify-self: start; }
  .sfx-marke-row:hover .sfx-marke__chip { transform: none; }
  /* Accordion: kein Einzug */
  .sfx-leist { gap: 16px; padding: 22px 0; }
  .sfx-leist__panel-inner { padding-left: 0; }
}
@media (max-width: 560px) {
  /* Pill würde in der Top-Bar überlaufen — Hero-CTA deckt das ab */
  .sfx-topbar .btn--primary { display: none; }
}

/* generische Inhaltsseiten (Impressum/Datenschutz) */
.sfx-legal { padding-block: clamp(100px, 16vw, 132px) clamp(64px, 9vw, 100px); }
.sfx-prose { max-width: 62ch; font-family: var(--font-sans); }
.sfx-prose h1 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; margin-bottom: var(--space-5); color: var(--cream); }
.sfx-prose h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(1.2rem, 3.4vw, 1.4rem); margin: var(--space-6) 0 var(--space-3); color: var(--cream); }
.sfx-prose p, .sfx-prose li { color: var(--cream-dim); line-height: 1.7; overflow-wrap: break-word; }
.sfx-prose a { color: var(--coral-300); }

/* ============================================================
   FAQ-Seite — natives <details>-Accordion (kein JS)
   ============================================================ */
.sfx-faq { margin-top: 36px; border-top: 1px solid var(--ink-line); }
.sfx-faq__item { border-bottom: 1px solid var(--ink-line); }
.sfx-faq__q { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; padding: 22px 0; font-family: var(--font-display);
  font-weight: var(--weight-bold); font-size: clamp(1.1rem, 2.4vw, 1.45rem); letter-spacing: -0.01em; color: var(--cream); }
.sfx-faq__q::-webkit-details-marker { display: none; }
.sfx-faq__q::after { content: "+"; flex: none; font-size: 1.5em; line-height: 1; color: var(--cream-dim);
  transition: transform .25s ease, color .25s ease; }
.sfx-faq__item[open] .sfx-faq__q::after { transform: rotate(45deg); color: var(--coral-400); }
.sfx-faq__a { margin: 0; padding: 0 0 24px; max-width: 70ch; color: var(--cream-dim); line-height: 1.65; }