/* ============================================================
   Florian Haacks — Leistungsseiten-Vorlage
   Gilt für alle Seiten, deren Slug mit "angebot-" beginnt.
   Nutzt Tokens und Basisstile aus fh-global.css.

   Mehrspaltige Bereiche (Leistungsblöcke, Pakete, Weitere Leistungen)
   laufen über den nativen Gutenberg Columns-Block, nicht über ein
   eigenes CSS-Grid auf einer Gruppe. Grund: WordPress packt
   Gruppen-Inhalte automatisch in einen .wp-block-group__inner-container,
   ein eigenes Grid auf der Gruppe selbst hätte nur dieses eine Kind
   (siehe Bento-Fix auf der Startseite). Columns-Blöcke haben dieses
   Problem nicht.
   ============================================================ */

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

/* ---------- Hero ---------- */
/* Abstand zum schwebenden Header (Breadcrumbs gibt es nicht mehr) */
.fh-lp-hero{ padding:160px 0 96px; }
.fh-lp-hero .wp-block-columns{ gap:64px; align-items:center; }
.fh-lp-hero h1{ margin:0 0 24px; }
.fh-lp-hero p{ font-size:1.05rem; line-height:1.8; margin-bottom:16px; max-width:520px; }
.fh-lp-hero .wp-block-buttons{ gap:20px; align-items:center; margin-top:32px; }

.fh-lp-visual{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); margin:0; }
.fh-lp-visual img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3.4; }
/* Platzhalter-Visual mit großem Icon für Seiten ohne eigenes Bild. Im
   Editor einfach durch einen Bild-Block mit Klasse "fh-lp-visual" ersetzen. */
.fh-lp-visual--icon{
  position:relative; aspect-ratio:4/3.4; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#2a3645,#171e26); color:var(--accent);
}
.fh-lp-visual--icon::after{
  content:''; position:absolute; top:-25%; right:-20%; width:65%; height:65%;
  background:radial-gradient(circle,rgba(255,122,69,0.15),transparent 68%);
}
.fh-lp-visual--icon svg{ position:relative; z-index:1; width:96px; height:96px; }

/* Astra rückt Blöcke mit Breite "wide" auf oberster Ebene um knapp 10px pro
   Seite ein, dadurch stehen Hero und Raster schmaler als Header und Breadcrumb.
   Auf volle Container-Breite zurücksetzen. */
.entry-content > .alignwide{
  width:100% !important; max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
}

/* ---------- Sektions-Grundlayout ---------- */
.fh-lp-section{ padding:96px 0; }
.fh-lp-section.fh-panel{
  background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fh-lp-sec-head{ max-width:640px; margin-bottom:48px; padding-top:0 !important; }
.fh-lp-sec-head.fh-center{ text-align:center; margin-left:auto; margin-right:auto; }
.fh-lp-sec-head h6{
  font-family:var(--font-head); font-size:0.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:8px;
}
.fh-lp-sec-head h2{ margin-bottom:12px; }
.fh-lp-sec-head p{ font-size:0.98rem; }

/* ---------- Karten: Inhalts-Wrapper zurücksetzen ----------
   WordPress packt den Inhalt jeder Gruppe in .wp-block-group__inner-container
   und der bekommt vom Constrained-Layout automatische Seitenränder. Als
   Kind eines Flex-Containers schrumpft er dadurch auf die Breite des
   breitesten Inhalts und wird zentriert (Einrückung in den Paketkarten).
   Deshalb: volle Breite, keine Ränder, selbst als Flex-Spalte. */
.offer > .wp-block-group__inner-container,
.price > .wp-block-group__inner-container,
.fh-ref > .wp-block-group__inner-container{
  margin:0 !important; max-width:none !important; width:100%;
  flex:1; display:flex; flex-direction:column; min-height:0;
}

/* ---------- Referenz-Karten (Website) ---------- */
.fh-ref-grid{ gap:16px !important; margin-bottom:16px !important; }
.fh-ref{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px !important; display:flex; flex-direction:column; height:100%; margin:0;
  transition:transform .28s, border-color .28s;
}
.fh-ref:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.fh-ref figure{ margin:0 0 16px 0 !important; }
.fh-ref img{ width:100%; aspect-ratio:3/2; object-fit:cover; object-position:top; border-radius:12px; display:block; }
.fh-ref h3{ font-size:1.05rem; margin:0 0 10px; padding:0 8px; }
.fh-ref .fh-ref-label{
  font-family:var(--font-head); font-size:0.72rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin:14px 0 6px; padding:0 8px;
}
.fh-ref ul{ list-style:none; margin:0 !important; padding:0 8px !important; }
.fh-ref li{ font-size:0.84rem; color:var(--muted); padding-left:18px; position:relative; margin-bottom:5px; }
.fh-ref li::before{
  content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--accent);
}

/* ---------- Leistungsblöcke (Kanäle) ---------- */
.fh-offer-grid{ gap:16px !important; }
.offer{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s-5); display:flex; flex-direction:column; height:100%;
  transition:transform .28s, border-color .28s; margin:0; padding-top:var(--s-5) !important;
}
.offer:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.offer .ico{
  width:36px; height:36px; border-radius:10px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--s-4); color:var(--muted);
}
/* Logo-Boxen: alle drei Karten gleich, volle Kartenbreite, feste Höhe,
   Inhalt zentriert. Einzellogos (Google, Meta) füllen die Box so groß wie
   möglich, die Logo-Reihe sitzt zentriert darin. */
.offer .ico-logo,
.offer .ico-logo--row{
  width:100%; height:88px; border-radius:10px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  margin:0 0 var(--s-4) 0;
}
.offer .ico-logo{ padding:8px 14px; }
.offer .ico-logo img{
  width:100%; height:100%; object-fit:contain; object-position:center; display:block;
}
/* Logo-Reihe besteht aus einer Gruppe mit vier echten Bild-Blöcken. Den
   WordPress-Wrapper per display:contents auflösen, damit die Bilder direkt
   in der Reihe liegen, und die Figure-Standardränder entfernen. */
.offer .ico-logo--row{ gap:12px; padding:14px; }
.offer .ico-logo--row > .wp-block-group__inner-container{ display:contents; }
.offer .ico-logo--row figure{
  margin:0 !important; height:100%; display:flex; align-items:center; justify-content:center;
}
.offer .ico-logo--row img{ height:100%; width:auto; max-width:48px; object-fit:contain; }
.offer h3{ font-size:1.15rem; margin-bottom:var(--s-2); }
.offer p{ font-size:0.88rem; margin-bottom:var(--s-4); }
/* Astra gibt Listen standardmäßig 3em linken Außenabstand, dadurch saß die
   Trennlinie versetzt. Zurücksetzen, Liste unten ausrichten. */
.offer ul{
  list-style:none; margin:auto 0 0 0 !important; padding:var(--s-4) 0 0 0 !important;
  border-top:1px solid var(--line);
}
.offer li{ font-size:0.86rem; color:var(--muted); padding-left:20px; position:relative; margin-bottom:7px; }
.offer li::before{
  content:''; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--accent);
}

/* ---------- Ablauf, exakt wie auf der Startseite (.fh-process) ---------- */
.fh-process{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.fh-proc-row{ position:relative; }
.fh-proc-row::before{
  content:''; position:absolute; top:52px; left:3%; right:3%;
  height:1px; background:var(--line);
}
.fh-pstep{ position:relative; padding-right:26px; padding-top:0 !important; }
.fh-pstep .fh-pnum{
  font-family:var(--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(--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; }

/* ---------- Pakete ---------- */
.fh-price-grid{ gap:16px !important; align-items:stretch !important; }
.price{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-6) var(--s-5); display:flex; flex-direction:column; position:relative;
  margin:0; padding-top:var(--s-6) !important; height:100%;
}
.price.feat{
  background:linear-gradient(170deg,#243140,#161e27); border-color:rgba(255,122,69,0.3); overflow:hidden;
}
.price.feat::after{
  content:''; position:absolute; top:-30%; right:-25%; width:70%; height:70%;
  background:radial-gradient(circle,rgba(255,122,69,0.17),transparent 68%);
}
/* Inhalt über dem Glow, und Bezugspunkt für das Badge */
.price > .wp-block-group__inner-container{ position:relative; z-index:1; }
/* Badge außerhalb des Textflusses oben rechts in der Titelzeile, damit die
   Titel aller Pakete auf gleicher Höhe stehen. line-height:1, sonst erbt es
   die Zeilenhöhe des Fließtexts und wird doppelt so hoch wie nötig. */
.price .flag{
  position:absolute; top:2px; right:0; z-index:2;
  display:inline-block; line-height:1;
  font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--accent); color:#0E141A; padding:5px 11px; border-radius:999px; font-weight:700;
}
.price h3{ font-size:1.15rem; margin-bottom:var(--s-2); }
.price .fh-amount{
  font-family:var(--font-head); font-size:clamp(1.7rem,2.6vw,2.1rem); font-weight:600;
  line-height:1; margin:var(--s-4) 0 6px; white-space:nowrap;
}
.price .fh-period{ font-size:0.8rem; color:var(--muted); margin-bottom:var(--s-5); }
.price ul{ list-style:none; margin:0 0 var(--s-6) !important; padding:0 !important; flex:1; }
.price li{ font-size:0.87rem; color:var(--muted); padding-left:18px; position:relative; margin-bottom:9px; }
.price li::before{
  content:''; position:absolute; left:0; top:6px; width:9px; height:5px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg);
}
.price .wp-block-buttons{ margin-top:auto; }
.price .wp-block-button__link{ justify-content:center; width:100%; text-align:center; }

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

/* ---------- CTA ---------- */
.fh-ctaband{ padding:96px 0; }
.fh-ctabox{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(150deg,#222E3B,#141C24);
  border:1px solid var(--line); border-radius:var(--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; }

/* ---------- Weitere Leistungen ---------- */
.fh-more-grid{ gap:16px !important; }
.fh-more{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s-5); display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  transition:transform .28s, border-color .28s; text-decoration:none; height:100%;
}
.fh-more:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.fh-more h4{ font-size:1rem; margin-bottom:4px; color:var(--text); }
.fh-more p{ font-size:0.82rem; margin:0; }
.arrow-btn{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center;
  color:var(--text); transition:all .2s;
}
.fh-more:hover .arrow-btn{ background:var(--accent); border-color:var(--accent); color:#0E141A; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .fh-offer-grid,.fh-price-grid,.fh-ref-grid,.fh-more-grid,.fh-proc-row{ flex-wrap:wrap; }
  .fh-offer-grid > .wp-block-column,.fh-price-grid > .wp-block-column,.fh-ref-grid > .wp-block-column,
  .fh-more-grid > .wp-block-column,.fh-proc-row > .wp-block-column{
    flex-basis:calc(50% - 8px) !important;
  }
  .fh-proc-row::before{ display:none; }
}
@media (max-width:760px){
  .fh-lp-hero{ padding-top:130px; }
  .fh-lp-hero .wp-block-columns{ flex-wrap:wrap; }
  .fh-offer-grid > .wp-block-column,.fh-price-grid > .wp-block-column,.fh-ref-grid > .wp-block-column,
  .fh-more-grid > .wp-block-column,.fh-proc-row > .wp-block-column{
    flex-basis:100% !important;
  }
  .fh-lp-section{ padding:64px 0; }
  .fh-ctaband{ padding:64px 0; }
  .fh-ctabox{ padding:48px 24px; }
}