/* ============================================================
   Florian Haacks — Redesign Stylesheet
   Einfügen unter: Design > Customizer > Zusätzliches CSS
   (besser: Child-Theme style.css)

   Alle Klassen mit fh- Prefix, damit nichts mit Astra kollidiert.
   ============================================================ */

/* ---------- 1. Design-Tokens ---------- */
:root{
  --fh-bg:        #0E141A;
  --fh-panel:     #141C24;
  --fh-surface:   #1B242E;
  --fh-surface-2: #222D39;
  --fh-accent:    #FF7A45;
  --fh-accent-soft:#FFA36C;
  --fh-text:      #F2F0EC;
  --fh-muted:     #8A98A6;
  --fh-line:      rgba(242,240,236,0.08);
  --fh-line-2:    rgba(242,240,236,0.16);
  --fh-r-lg: 24px;
  --fh-r-md: 18px;

  /* SCHRIFTEN: hier deine echten Fonts eintragen.
     Aktuell Platzhalter — vor dem Livegang ersetzen. */
  --fh-font-head: 'Poppins', system-ui, sans-serif;
  --fh-font-body: 'Lato', system-ui, sans-serif;
}

/* WordPress setzt standardmäßig .wp-block-group{padding-top:4em}. Das
   sitzt hier ganz am Anfang, damit jede spätere fh-Komponente, die selbst
   ein padding setzt, das in der normalen Kaskade überschreibt. Für alles
   ohne eigenes padding ist es damit sauber auf 0. */
.wp-block-group{ padding-top:0; }

/* Ausblenden ohne den Block zu löschen: im Editor beim Block unter
   Erweitert > Zusätzliche CSS-Klasse(n) "fh-hide" setzen oder entfernen. */
.fh-hide{ display:none !important; }

/* ---------- 2. Basis ---------- */
.fh-page{
  background: var(--fh-bg);
  color: var(--fh-text);
  font-family: var(--fh-font-body);
}
.fh-page h1,.fh-page h2,.fh-page h3,.fh-page h4,.fh-page h5{
  font-family: var(--fh-font-head);
  letter-spacing:-0.015em;
  color: var(--fh-text);
}
.fh-page p{ color: var(--fh-muted); }
.fh-page :focus-visible{ outline:2px solid var(--fh-accent); outline-offset:3px; }

/* Astra deckelt alignfull auf die Container-Breite statt echtem Vollbild
   (Astras eigene "Volle Breite"-Option ist Pro-gesperrt). Deshalb hier
   per CSS erzwingen, unabhängig von Astras Layout-Einstellungen. */
.fh-page .alignfull{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* Buttons global */
.fh-page .wp-block-button__link{
  background: var(--fh-accent);
  color:#0E141A;
  font-weight:600;
  font-size:0.86rem;
  padding:11px 22px;
  border-radius:999px;
  border:none;
  transition:background .2s ease, transform .2s ease;
}
.fh-page .wp-block-button__link:hover{
  background: var(--fh-accent-soft);
  transform:translateY(-1px);
  color:#0E141A;
}
/* Sekundärer Button: im Editor "Umriss"-Stil wählen */
.fh-page .is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--fh-text);
  border:1px solid var(--fh-line-2);
}
.fh-page .is-style-outline .wp-block-button__link:hover{
  background:transparent;
  border-color:rgba(242,240,236,0.4);
  color:var(--fh-text);
}

/* Badge-Pill (Absatz mit Klasse fh-badge) */
.fh-badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--fh-line-2); border-radius:999px;
  padding:6px 15px 6px 10px;
  font-size:0.76rem !important; color:var(--fh-muted) !important;
  letter-spacing:0.02em; margin-bottom:24px !important;
}
.fh-badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--fh-accent); flex-shrink:0;
}

/* ---------- 3. Hero ---------- */
.fh-hero{ padding:90px 0 0; }
.fh-hero .wp-block-columns{ gap:60px; align-items:center; }
.fh-hero h1{
  font-size:clamp(2.25rem,4vw,3.35rem);
  line-height:1.1; font-weight:600; margin-bottom:22px;
}
.fh-hero .fh-hero-sub{
  font-size:1rem; line-height:1.75; max-width:430px; margin-bottom:32px;
}
.fh-hero .wp-block-buttons{ gap:18px; align-items:center; }

.fh-portrait-wrap{
  position:relative;
  display:flex; justify-content:center; align-items:flex-end;
  min-height:470px;
}
.fh-portrait-wrap::before{
  content:''; position:absolute; z-index:0;
  width:78%; aspect-ratio:1/1; bottom:12%; left:50%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 50% 45%,
    rgba(255,122,69,0.30), rgba(255,122,69,0.07) 48%, transparent 70%);
  filter:blur(14px);
}
.fh-portrait-wrap .wp-block-image{
  position:relative; z-index:1; margin:0; width:100%; max-width:430px;
}
.fh-portrait-wrap .wp-block-image img{ width:100%; height:auto; display:block; }

.fh-floatcard{
  position:absolute; left:0; bottom:24px; z-index:2; width:225px;
  background:rgba(27,36,46,0.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--fh-line-2); border-radius:var(--fh-r-md);
  padding:16px 20px;
}
/* Der Name braucht !important, weil die allgemeine Regel .fh-floatcard p
   darunter ebenfalls !important setzt und sonst Name und Zusatz gleich
   klein wären. */
.fh-floatcard .fh-fc-num{
  font-family:var(--fh-font-head); font-size:1.2rem !important; font-weight:600;
  line-height:1.2; margin:0 0 5px; color:var(--fh-text) !important;
}
.fh-floatcard p{ font-size:0.78rem !important; line-height:1.5; margin:0; }

/* ---------- 4. Stats-Leiste ---------- */
.fh-statsbar{
  margin-top:64px;
  background:var(--fh-panel);
  border:1px solid var(--fh-line);
  border-radius:var(--fh-r-lg);
  padding:32px 40px;
}
.fh-statsbar .wp-block-columns{ gap:34px; margin:0; }
.fh-stat{ position:relative; padding-left:30px; }
.fh-statsbar .wp-block-column:first-child .fh-stat{ padding-left:0; }
.fh-statsbar .wp-block-column:not(:first-child) .fh-stat::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px;
  width:1px; background:var(--fh-line);
}
.fh-stat .fh-stat-val{
  font-family:var(--fh-font-head); font-size:1.9rem; font-weight:600;
  line-height:1; margin:0; color:var(--fh-text) !important;
}
.fh-stat p{ font-size:0.79rem !important; margin:8px 0 0; line-height:1.5; }

/* ---------- 5. Branchen + Logo-Slider ---------- */
.fh-branchen{ padding:96px 0 0; text-align:center; }
.fh-branchen h2{
  font-size:clamp(1.55rem,2.6vw,2rem); font-weight:600; margin-bottom:12px;
}
.fh-branchen .fh-lead{
  font-size:0.94rem; max-width:480px; margin:0 auto 30px;
}
/* Pills: Buttons-Block mit Klasse fh-pillrow */
.fh-pillrow{ justify-content:center; gap:9px; }
.fh-pillrow .wp-block-button__link{
  background:transparent !important;
  border:1px solid var(--fh-line);
  color:var(--fh-muted) !important;
  padding:8px 17px; font-size:0.81rem; font-weight:400 !important;
  cursor:default; pointer-events:none;
}
.fh-pillrow .wp-block-button__link:hover{ transform:none; }

/* Slider aus Gruppen- und Bild-Blöcken. WordPress packt Gruppen-Inhalte in
   .wp-block-group__inner-container, beim Track wird der Wrapper aufgelöst,
   damit die Logos direkt im Flex-Track liegen. */
.fh-marquee{
  margin-top:42px; position:relative; overflow:hidden; padding-top:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.fh-marquee > .wp-block-group__inner-container{ margin:0 !important; max-width:none !important; }
.fh-marquee-track{
  display:flex; gap:16px; width:max-content; padding-top:0;
  animation:fh-slide 68s linear infinite;
}
.fh-marquee-track > .wp-block-group__inner-container{ display:contents; }
.fh-marquee:hover .fh-marquee-track{ animation-play-state:paused; }
/* Weißer Hintergrund pro Logo: die Kundenlogos behalten ihre Originalfarbe,
   auf dunklem Grund wären viele davon kaum lesbar. */
.fh-marquee .fh-logo-slot{
  width:172px; height:74px; flex-shrink:0; margin:0 !important;
  border-radius:14px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
}
.fh-marquee .fh-logo-slot img{
  width:auto; height:36px; max-width:130px;
  object-fit:contain;
}
@keyframes fh-slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- 6. Sektions-Grundlayout ---------- */
.fh-section{ padding:104px 0; }
.fh-sec-head{ margin-bottom:34px; }
.fh-sec-head h2{
  font-size:clamp(1.75rem,3vw,2.3rem); font-weight:600;
  line-height:1.22; max-width:560px;
}
.fh-center-head{ text-align:center; max-width:520px; margin:0 auto 60px; padding-top:0 !important; }
.fh-center-head h2{
  font-size:clamp(1.7rem,2.8vw,2.15rem); font-weight:600; margin-bottom:13px;
}
.fh-center-head p{ font-size:0.93rem; }

/* ---------- 7. Leistungen (Bento) ---------- */
/* WordPress packt den Inhalt jeder Gruppe automatisch in einen
   .wp-block-group__inner-container-Wrapper. Das Grid muss deshalb auf
   diesem Wrapper sitzen, nicht auf .fh-bento selbst (das hätte nur ein
   einziges Grid-Kind, den Wrapper, und alle Karten wären block-gestapelt). */
.fh-bento{ margin-top:26px; }
.fh-bento > .wp-block-group__inner-container{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  grid-auto-rows:minmax(180px,auto);
  gap:16px;
}
.fh-bcard{
  background:var(--fh-surface);
  border:1px solid var(--fh-line);
  border-radius:var(--fh-r-md);
  padding:26px;
  margin:0;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .28s ease, border-color .28s ease;
}
.fh-bcard:hover{ transform:translateY(-3px); border-color:var(--fh-line-2); }
.fh-bcard h3{ font-size:1.05rem; font-weight:600; margin:0 0 9px; }
.fh-bcard p{ font-size:0.855rem; line-height:1.62; margin:0; }
.fh-bcard .fh-kicker{
  font-size:0.72rem !important; letter-spacing:0.09em;
  text-transform:uppercase; margin:0 0 14px;
}

.fh-bcard--tall{
  grid-row:span 2; justify-content:flex-end;
  background:linear-gradient(170deg,#243140,#161e27);
  position:relative; overflow:hidden;
}
.fh-bcard--tall::after{
  content:''; position:absolute; top:-30%; right:-25%;
  width:70%; height:70%;
  background:radial-gradient(circle,rgba(255,122,69,0.17),transparent 68%);
}
.fh-bcard--tall > *{ position:relative; z-index:1; }
.fh-bcard--tall h3{ font-size:1.4rem; line-height:1.25; margin-bottom:12px; }
.fh-bcard--tall .wp-block-buttons{ margin-top:22px; }

.fh-bcard--wide{ grid-column:span 2; }
.fh-bcard--media{
  background:linear-gradient(150deg,#2a3645,#171e26);
  padding:0; overflow:hidden;
}
.fh-bcard--media .wp-block-image{ margin:0; height:100%; }
.fh-bcard--media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Pfeil-Button in Karten-Ecke: Link mit Klasse fh-arrow */
.fh-bcard .fh-arrow{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--fh-line-2);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--fh-text); text-decoration:none; font-size:0.95rem;
  transition:background .2s, border-color .2s, color .2s;
}
.fh-bcard .fh-arrow:hover{
  background:var(--fh-accent); border-color:var(--fh-accent); color:#0E141A;
}
.fh-bcard .fh-card-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
}

/* ---------- 8. Ablauf ---------- */
.fh-process{
  background:var(--fh-panel);
  border-top:1px solid var(--fh-line);
  border-bottom:1px solid var(--fh-line);
}
.fh-proc-row{ position:relative; }
.fh-proc-row::before{
  content:''; position:absolute; top:52px; left:3%; right:3%;
  height:1px; background:var(--fh-line);
}
.fh-pstep{ position:relative; padding-right:26px; padding-top:0 !important; }
.fh-pstep .fh-pnum{
  font-family:var(--fh-font-head); font-size:2.7rem; font-weight:700;
  color:transparent; -webkit-text-stroke:1.1px rgba(242,240,236,0.26);
  line-height:1; margin:0 0 8px;
}
.fh-pstep::before{
  content:''; display:block; width:9px; height:9px; border-radius:50%;
  background:var(--fh-accent); position:relative; z-index:1; margin-bottom:24px;
}
.fh-pstep h4{ font-size:0.98rem; font-weight:600; margin:0 0 9px; }
.fh-pstep p{ font-size:0.845rem; line-height:1.62; max-width:210px; margin:0; }
.fh-proc-cta{ margin-top:64px; }
.fh-proc-cta .wp-block-buttons{ justify-content:center; }

/* ---------- 9. Kundenstimmen ---------- */
.fh-tcard{
  background:var(--fh-surface); border:1px solid var(--fh-line);
  border-radius:var(--fh-r-md); padding:28px; height:100%;
  display:flex; flex-direction:column;
}
.fh-tcard::before{
  content:'“'; font-family:var(--fh-font-head); font-size:1.5rem;
  line-height:1; color:var(--fh-accent); margin-bottom:14px; display:block;
}
.fh-tcard .fh-quote{
  font-size:0.9rem !important; line-height:1.68;
  color:var(--fh-text) !important; margin:0 0 24px; flex:1;
}
.fh-person{ display:flex; align-items:center; gap:11px; }
.fh-person .wp-block-image{ margin:0; flex-shrink:0; }
.fh-person .wp-block-image img{
  width:36px; height:36px; border-radius:50%; object-fit:cover; display:block;
}
.fh-person .fh-nm{ font-size:0.86rem !important; font-weight:600;
  color:var(--fh-text) !important; margin:0; }
.fh-person .fh-rl{ font-size:0.76rem !important; margin:0; }

/* ---------- 10. CTA ---------- */
.fh-ctaband{ padding:104px 0; }
.fh-ctabox{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(150deg,#222E3B,#141C24);
  border:1px solid var(--fh-line); border-radius:var(--fh-r-lg);
  padding:70px 40px;
}
.fh-ctabox::before{
  content:''; position:absolute; bottom:-45%; left:50%;
  transform:translateX(-50%); width:65%; height:95%;
  background:radial-gradient(circle,rgba(255,122,69,0.16),transparent 66%);
}
.fh-ctabox > *{ position:relative; z-index:1; }
.fh-ctabox h2{
  font-size:clamp(1.8rem,3.3vw,2.55rem); font-weight:600;
  margin-bottom:16px; max-width:600px; margin-left:auto; margin-right:auto;
  line-height:1.2;
}
.fh-ctabox p{ margin-bottom:32px; font-size:0.95rem; }
.fh-ctabox .wp-block-buttons{ justify-content:center; }
.fh-ctabox .fh-badge{ margin-left:auto; margin-right:auto; }

/* ---------- 11. FAQ (core Details-Block) ---------- */
/* WordPress setzt standardmäßig .wp-block-group{padding-top:4em}. Überall
   dort, wo wir selbst kein padding-top setzen, muss das explizit auf 0. */
.fh-faq{ max-width:780px; margin:0 auto; padding-top:0 !important; }
.fh-faq .wp-block-details{
  border:1px solid var(--fh-line); border-radius:var(--fh-r-md);
  background:var(--fh-surface); overflow:hidden; margin-bottom:11px; padding:0;
}
.fh-faq .wp-block-details summary{
  padding:21px 24px; cursor:pointer; list-style:none;
  font-family:var(--fh-font-head); font-size:1rem; font-weight:600;
  color:var(--fh-text);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.fh-faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.fh-faq .wp-block-details[open] summary::after{
  background:var(--fh-accent); border-color:var(--fh-accent);
  color:#0E141A; transform:rotate(90deg);
}
.fh-faq .wp-block-details summary::after{
  content:'›'; flex-shrink:0;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--fh-line-2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; line-height:1; transition:all .2s ease;
}
.fh-faq .wp-block-details p{
  padding:0 24px 22px; font-size:0.88rem; line-height:1.7; margin:0;
}

/* ---------- 12. Responsive ---------- */
@media (max-width:980px){
  .fh-bento > .wp-block-group__inner-container{ grid-template-columns:1fr 1fr; }
  .fh-bcard--tall{ grid-row:span 1; }
}
@media (max-width:820px){
  .fh-hero{ padding-top:60px; }
  .fh-portrait-wrap{ min-height:360px; max-width:330px; margin:0 auto; }
  .fh-floatcard{ left:-8px; bottom:8px; }
  .fh-statsbar{ padding:26px; }
  .fh-stat{ padding-left:0; padding-top:22px; }
  .fh-statsbar .wp-block-column:not(:first-child) .fh-stat::before{
    left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
  }
  .fh-bento > .wp-block-group__inner-container{ grid-template-columns:1fr; }
  .fh-bcard--wide{ grid-column:span 1; }
  .fh-proc-row::before{ display:none; }
  .fh-section{ padding:64px 0; }
  .fh-ctaband{ padding:64px 0; }
  .fh-ctabox{ padding:48px 24px; }
}
@media (prefers-reduced-motion:reduce){
  .fh-page *{ transition:none !important; }
  .fh-marquee-track{ animation:none; }
}