/* ==========================================================================
   Facts+ Hero-Slider
   Reines CSS, keine Abhaengigkeiten. Erwartet die Schriften
   "Barlow Semi Condensed" (600) und "Barlow Condensed" (500/600/700).
   ========================================================================== */

.fp {
  --fp-navy: #0a1e2b;
  --fp-navy-deep: #071723;
  --fp-navy-light: #123243;
  --fp-orange: #f15a22;
  --fp-text: #ffffff;
  --fp-text-dim: #c9d8e2;
  --fp-text-mute: #9fb3c0;
  --fp-pad-x: 80px;         /* Innenabstand links der Textspalte */
  --fp-art-start: 40%;      /* ab hier beginnt die Bild-/Grafikflaeche */
  --fp-hero: 96px;          /* Groesse der grossen Wortmarke */
  --fp-lead: 29px;          /* Groesse der kleinen Herkunftszeile */
  --fp-indent: 0px;         /* wird von slider.js gemessen */

  position: relative;
  /* .navbar.fixed-top в этой теме — position:fixed высотой 66px, поэтому
     секция сама себя не сдвигает потоком документа. Без этого отступа
     верхушка слайдера (в т.ч. .fp__kicker) оказывается под хэдером. */
  margin-top: 66px;
  height: 620px;
  overflow: hidden;
  background: var(--fp-navy);
  font-family: "Barlow Semi Condensed", sans-serif;
  color: var(--fp-text);
  user-select: none;
}

/* ---------- Spur und Slides ---------- */

.fp__track {
  position: absolute;
  inset: 0;
  display: flex;
  transform: translateX(0);
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
}

.fp__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.fp__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  /* Unten 110px frei fuer Striche, Pfeile und Fortschrittsbalken. */
  /* --fp-headline-chars wird pro Slide von main_slider.php gesetzt (Zeichenzahl
     der grossen Ueberschrift). Ab 40 Zeichen schrumpft der rechte Abstand,
     damit lange Ueberschriften eine breitere Spalte bekommen. */
  padding: 0 clamp(0px, calc(var(--fp-art-start) - max(0%, (var(--fp-headline-chars, 40) - 40) * 0.35%)), var(--fp-art-start)) 110px var(--fp-pad-x);
  pointer-events: none;
}

.fp__copy a,
.fp__copy button {
  pointer-events: auto;
}

.fp__kicker {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 15px;
  line-height: 1.2;
  color: var(--fp-orange);
}

.fp__sub {
  max-width: 620px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--fp-text-dim);
  text-wrap: pretty;
}

.fp__cta {
  align-self: flex-start;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 16px;
  color: var(--fp-navy-deep);
  background: var(--fp-orange);
  padding: 15px 30px;
  text-decoration: none;
  transition: background 200ms ease;
}
.fp__cta:hover { background: #ff7a45; }

/* ---------- Logo-Bausteine ---------- */

.fp-plus {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--fp-orange);
  font-size: 0.61em;   /* Plus = 61 % der Wortmarke */
  line-height: 1;
  margin-left: 0.06em;
  margin-top: -0.11em; /* Hochstellung ueber die Versalhoehe */
}

.fp-logo {
  display: inline-flex;
  align-items: flex-start;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

/* ---------- Slide 1: Namensuebergang ---------- */

.fp-morph {
  position: relative;
  height: 162px;
  font-weight: 600;
  line-height: 1;
}

.fp-morph__line {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  white-space: nowrap;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: var(--fp-lead);
  letter-spacing: 0.04em;
  color: var(--fp-text-mute);
}

.fp-morph__old {
  font-size: var(--fp-lead);
  color: var(--fp-text);
  opacity: 1;
  transform-origin: left top;
  /* Startbild: auf Hero-Groesse skaliert und um --fp-indent nach links
     geschoben, damit es buendig mit der Textspalte beginnt. */
  transform: translate(calc(-1 * var(--fp-indent)), 24px)
             scale(calc(var(--fp-hero) / var(--fp-lead)));
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 600ms ease 300ms;
}

.fp-morph__new {
  position: absolute;
  left: 0;
  top: 60px;
  font-size: var(--fp-hero);
  opacity: 0;
  transform: scale(0.42);
  transform-origin: left center;
  text-shadow: 0 0 0 rgba(241, 90, 34, 0);
  transition: opacity 500ms ease,
              transform 950ms cubic-bezier(0.2, 1.15, 0.4, 1),
              text-shadow 1200ms ease;
}

.fp-flare { position: relative; display: flex; align-items: flex-start; }

.fp-flare .fp-plus {
  display: inline-block;
  transform-origin: center 40%;
  transform: scale(1);
  transition: transform 450ms cubic-bezier(0.34, 1.5, 0.64, 1);
}

.fp-ring {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 2px solid var(--fp-orange);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.35);
  transition: opacity 950ms ease, transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Phase 1 — Sugrobov+ schrumpft auf die kleine Zeilenhoehe */
.fp__slide.is-p1 .fp-morph__old { transform: translate(0, 0) scale(1); }
.fp__slide.is-p2 .fp-morph__old,
.fp__slide.is-p3 .fp-morph__old { transform: translate(0, 0) scale(1); opacity: 0; }

/* Phase 2 — Facts+ waechst auf, Plus schlaegt aus */
.fp__slide.is-p2 .fp-morph__new,
.fp__slide.is-p3 .fp-morph__new { opacity: 1; transform: scale(1); }
.fp__slide.is-p2 .fp-morph__new { text-shadow: 0 0 46px rgba(241, 90, 34, 0.5); }
.fp__slide.is-p2 .fp-flare .fp-plus { transform: scale(1.45); }
.fp__slide.is-p2 .fp-ring,
.fp__slide.is-p3 .fp-ring { transform: scale(2.4); }
.fp__slide.is-p2 .fp-ring { opacity: 0.7; }

/* ---------- Hintergrundgrafik ---------- */

.fp-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.fp-art__wash--1 {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 96% 84%,
              var(--fp-navy-light) 0%, var(--fp-navy) 46%, var(--fp-navy-deep) 100%);
}
.fp-art__wash--2 {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 92% 46%,
              var(--fp-navy-light) 0%, var(--fp-navy) 48%, var(--fp-navy-deep) 100%);
}

.fp-art__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 22%, #000 62%);
}

.fp-art__scrim--1 {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(7,23,35,0.96) 0%, rgba(7,23,35,0.88) 44%,
    rgba(7,23,35,0.25) 74%, rgba(7,23,35,0) 100%);
}
.fp-art__scrim--2 {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(7,23,35,0.96) 0%, rgba(7,23,35,0.88) 44%,
    rgba(7,23,35,0.3) 74%, rgba(7,23,35,0.05) 100%);
}

/* Slide 1: Kreise, die aus einem Punkt nach aussen laufen */
.fp-rings__c {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
}
.fp-rings__c--1 {
  right: -14%; bottom: -46%; width: 660px; height: 660px;
  border: 1px solid rgba(241,90,34,0.55);
  transition: opacity 1100ms ease, transform 1400ms cubic-bezier(0.16,1,0.3,1);
}
.fp-rings__c--2 {
  right: -24%; bottom: -64%; width: 940px; height: 940px;
  border: 1px solid rgba(241,90,34,0.28);
  transition: opacity 1200ms ease 160ms, transform 1500ms cubic-bezier(0.16,1,0.3,1) 160ms;
}
.fp-rings__c--3 {
  right: -36%; bottom: -84%; width: 1260px; height: 1260px;
  border: 1px solid rgba(241,90,34,0.14);
  transition: opacity 1300ms ease 320ms, transform 1600ms cubic-bezier(0.16,1,0.3,1) 320ms;
}
.fp-rings__dot {
  position: absolute;
  right: calc(-14% + 330px);
  bottom: calc(-46% + 330px);
  width: 11px; height: 11px;
  margin: -5.5px -5.5px 0 0;
  background: var(--fp-orange);
  border-radius: 50%;
}
.fp__slide.is-p1 .fp-rings__c,
.fp__slide.is-p2 .fp-rings__c,
.fp__slide.is-p3 .fp-rings__c { opacity: 1; transform: scale(1); }

/* Slide 2: drei Kreise fuer Recht, Steuern und Strategie */
.fp-venn {
  position: absolute;
  right: -4%; top: 50%;
  width: 600px; height: 600px;
  margin-top: -300px;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 1000ms ease, transform 1400ms cubic-bezier(0.16,1,0.3,1);
}
.fp__slide.is-active .fp-venn { opacity: 1; transform: scale(1); }

.fp-venn__c {
  position: absolute; left: 50%; top: 50%;
  width: 340px; height: 340px;
  border-radius: 50%;
}
.fp-venn__c--1 { margin: -240px 0 0 -240px; border: 1px solid rgba(241,90,34,0.5); }
.fp-venn__c--2 { margin: -240px 0 0 -100px; border: 1px solid rgba(255,255,255,0.2); }
.fp-venn__c--3 { margin: -100px 0 0 -170px; border: 1px solid rgba(255,255,255,0.13); }
.fp-venn__dot {
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  background: var(--fp-orange); border-radius: 50%;
}

/* Slide 3: Zielkreuz — Praezision */
.fp-target {
  position: absolute;
  right: 2%; top: 50%;
  width: 520px; height: 520px;
  margin-top: -260px;
  opacity: 0;
  transform: scale(0.8) rotate(-12deg);
  transition: opacity 1000ms ease, transform 1400ms cubic-bezier(0.16,1,0.3,1);
}
.fp__slide.is-active .fp-target { opacity: 1; transform: scale(1) rotate(0deg); }

.fp-target__c { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.fp-target__c--1 { width: 460px; height: 460px; margin: -230px 0 0 -230px; border: 1px solid rgba(255,255,255,0.14); }
.fp-target__c--2 { width: 280px; height: 280px; margin: -140px 0 0 -140px; border: 1px solid rgba(241,90,34,0.32); }
.fp-target__c--3 { width: 120px; height: 120px; margin: -60px 0 0 -60px;  border: 1px solid rgba(241,90,34,0.6); }
.fp-target__x {
  position: absolute; left: 50%; top: 50%;
  width: 520px; height: 1px; margin: 0 0 0 -260px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 22%, rgba(255,255,255,0.16) 78%, transparent);
}
.fp-target__y {
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: 520px; margin: -260px 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.16) 22%, rgba(255,255,255,0.16) 78%, transparent);
}
.fp-target__dot {
  position: absolute; left: 50%; top: 50%;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: var(--fp-orange); border-radius: 50%;
}

/* Slide 4: Netz — Team und Kooperation */
.fp-net {
  position: absolute;
  right: 0; top: 50%;
  width: 520px; height: 520px;
  margin-top: -260px;
  opacity: 0;
  transform: scale(0.82) rotate(14deg);
  transition: opacity 1000ms ease, transform 1500ms cubic-bezier(0.16,1,0.3,1);
}
.fp__slide.is-active .fp-net { opacity: 1; transform: scale(1) rotate(0deg); }

.fp-net__c { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.fp-net__c--1 { width: 400px; height: 400px; margin: -200px 0 0 -200px; border: 1px solid rgba(255,255,255,0.13); }
.fp-net__c--2 { width: 240px; height: 240px; margin: -120px 0 0 -120px; border: 1px solid rgba(241,90,34,0.3); }

.fp-net__node {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: rgba(255,255,255,0.55); border-radius: 50%;
}
.fp-net__node--accent { background: var(--fp-orange); }
.fp-net__spoke {
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: 200px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent);
  transform-origin: top center;
}
.fp-net__node--a0, .fp-net__spoke--a0 { transform: rotate(0deg)   translateY(-200px); }
.fp-net__node--a1, .fp-net__spoke--a1 { transform: rotate(60deg)  translateY(-200px); }
.fp-net__node--a2, .fp-net__spoke--a2 { transform: rotate(120deg) translateY(-200px); }
.fp-net__node--a3, .fp-net__spoke--a3 { transform: rotate(180deg) translateY(-200px); }
.fp-net__node--a4, .fp-net__spoke--a4 { transform: rotate(240deg) translateY(-200px); }
.fp-net__node--a5, .fp-net__spoke--a5 { transform: rotate(300deg) translateY(-200px); }
/* Speichen drehen sich nur, sie werden nicht verschoben. */
.fp-net__spoke--a0 { transform: rotate(0deg); }
.fp-net__spoke--a1 { transform: rotate(60deg); }
.fp-net__spoke--a2 { transform: rotate(120deg); }
.fp-net__spoke--a3 { transform: rotate(180deg); }
.fp-net__spoke--a4 { transform: rotate(240deg); }
.fp-net__spoke--a5 { transform: rotate(300deg); }

/* Textbausteine der Slides 3 und 4 */
.fp__headline {
  /* Waechst mit --fp-headline-chars (siehe .fp__copy), damit lange
     Ueberschriften die breitere Spalte auch tatsaechlich ausnutzen. */
  max-width: clamp(760px, calc(760px + max(0px, (var(--fp-headline-chars, 40) - 40) * 6px)), 1080px);
  font-weight: 600;
  font-size: 62px;
  line-height: 1.02;
  margin: 0;
  text-wrap: pretty;
}
.fp__headline--sm { font-size: 66px; line-height: 1.05; max-width: 600px; }

.fp__people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 34px;
  max-width: 640px;
}
.fp__person { display: flex; flex-direction: column; }
.fp__person b {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 21px; letter-spacing: 0.02em;
}
.fp__person span { font-size: 16px; color: var(--fp-text-mute); }

.fp__cta--ghost {
  background: transparent;
  border: 1px solid #2a4a5c;
  color: var(--fp-text);
  padding: 14px 28px;
}
.fp__cta--ghost:hover { background: transparent; border-color: var(--fp-orange); color: var(--fp-orange); }

.fp__slide--wide .fp__copy { padding-right: 46%; }

/* Optionales Foto statt Grafik: <img class="fp-art__photo" src="…"> */
.fp-art__photo {
  position: absolute;
  inset: 0 0 0 var(--fp-art-start);
  width: auto; height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}

/* ---------- Bedienelemente ---------- */

.fp__nav {
  position: absolute;
  left: var(--fp-pad-x);
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  z-index: 3;
}

.fp__dots { display: flex; gap: 10px; }

.fp__dot {
  width: 44px; height: 4px;
  padding: 0; border: none;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: background 300ms ease;
}
.fp__dot[aria-current="true"] { background: var(--fp-orange); }

.fp__arrows { display: flex; gap: 8px; }

.fp__arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid #2a4a5c;
  color: var(--fp-text);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.fp__arrow:hover { border-color: var(--fp-orange); color: var(--fp-orange); }

.fp__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
  z-index: 3;
}
.fp__progress span {
  display: block; height: 100%; width: 0;
  background: var(--fp-orange);
  transition: width 120ms linear;
}

/* ---------- Responsiv ---------- */

@media (max-width: 1080px) {
  .fp { --fp-hero: 72px; --fp-lead: 22px; --fp-pad-x: 48px; --fp-art-start: 25%; height: 540px; }
  .fp-morph { height: 130px; }
  .fp-morph__new { top: 46px; }
  .fp__sub { font-size: 19px; }
  .fp__headline { font-size: 56px; }
  .fp__headline--sm { font-size: 48px; }
  .fp__slide--wide .fp__copy { padding-right: 25%; }
}

@media (max-width: 720px) {
  .fp { --fp-hero: 54px; --fp-lead: 17px; --fp-pad-x: 24px; --fp-art-start: 0px; height: 500px; }
  .fp-morph { height: 100px; }
  .fp-morph__new { top: 36px; }
  .fp__copy { padding: 0 24px 96px; }
  .fp__sub { font-size: 17px; }
  .fp__headline { font-size: 40px; }
  .fp__headline--sm { font-size: 36px; }
  .fp__people { grid-template-columns: 1fr; gap: 10px; }
  .fp__slide--wide .fp__copy { padding-right: 24px; }
  .fp__nav { left: 24px; bottom: 32px; gap: 16px; }
  .fp-art__scrim--1,
  .fp-art__scrim--2 { background: rgba(7,23,35,0.82); }
}

/* Nutzer, die Bewegung reduzieren moechten, sehen sofort das Endbild. */
@media (prefers-reduced-motion: reduce) {
  .fp__track,
  .fp-morph__old, .fp-morph__new,
  .fp-flare .fp-plus, .fp-ring,
  .fp-rings__c, .fp-venn, .fp-target, .fp-net, .fp__progress span { transition: none !important; }
}