/* fh-blocks — Komponenten-Layer fuer den nativen Seitenaufbau (modern, brand).
   Scoped, damit Theme/Elementor-Styles nicht durchschlagen. Brand #7e1719. */

/* Hero -------------------------------------------------------------- */
.fh-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6f2f2 0%,#ffffff 72%)}
.fh-hero::before{content:"";position:absolute;top:-140px;right:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(126,23,25,.12),transparent 70%);pointer-events:none}
.fh-hero::after{content:"";position:absolute;bottom:-160px;left:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(126,23,25,.06),transparent 70%);pointer-events:none}

/* Quick-Nav als Chips ---------------------------------------------- */
.fh-quicknav{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fh-quicknav li{margin:0!important;padding:0!important}
.fh-quicknav li::before{display:none!important}
.fh-quicknav a{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(126,23,25,.22);background:#fff;color:#7e1719;font-weight:600;font-size:14px;line-height:1;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:background .18s,color .18s,box-shadow .18s,transform .18s}
.fh-quicknav a::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.fh-quicknav a:hover{background:#7e1719!important;color:#fff!important;border-color:#7e1719;box-shadow:0 10px 22px -8px rgba(126,23,25,.45);transform:translateY(-2px)}
.page-content .fh-quicknav a:hover{color:#fff!important}

/* Reusable section helpers ---------------------------------------- */
.fh-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7e1719;opacity:.85}
.fhx-card{background:#fff;border:1px solid #efeaea;border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(40,10,10,.05);transition:box-shadow .2s,transform .2s}
.fhx-card:hover{box-shadow:0 18px 40px -16px rgba(126,23,25,.22);transform:translateY(-4px)}
.fhx-card img{display:block;width:100%;height:200px;object-fit:cover}
.fhx-card__body{padding:20px 22px}

/* Bild-Hero (wp:cover) -------------------------------------------- */
.fh-hero.wp-block-cover{min-height:640px;align-items:center;padding:64px 0}
.fh-hero .wp-block-cover__inner-container{width:100%}
.fh-hero__grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:end}
@media(min-width:900px){.fh-hero__grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.fh-hero__welcome{font-size:32px;line-height:1.12;text-shadow:0 2px 20px rgba(0,0,0,.5);margin:0;max-width:9em}
@media(min-width:900px){.fh-hero__welcome{font-size:48px}}
.fh-hero-card{background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px;padding:30px 32px;box-shadow:0 26px 64px -20px rgba(0,0,0,.55);max-width:460px;margin-left:auto}
.fh-hero-card__h{font-size:23px;margin:0 0 16px}
.fh-hero-card a[href^="tel"]{color:#7e1719;font-weight:600}
.fh-btn-primary{display:inline-flex;align-items:center;gap:8px;background:#7e1719;color:#fff!important;font-weight:700;font-size:15px;padding:13px 26px;border-radius:40px;text-decoration:none;box-shadow:0 8px 20px -6px rgba(126,23,25,.5);transition:background .15s,transform .15s;cursor:pointer}
.fh-btn-primary:hover{background:#5e1012;transform:translateY(-2px)}

/* Sektions-Hintergrund-Wechsel (weiss / hellgrau wie Original) ----- */
.fh-sec--gray{background:#f2f2f2}

/* Tabs — Bild/Text-Zweispalter im Panel */
.fh-tabs{margin-top:6px}
/* Eigene Pill-Nav mit [data-fh-tabs]-Prefix, damit Theme-Button-Styles (rotes
   Pill, weisser Text) nicht durchschlagen und der aktive Tab lesbar bleibt. */
[data-fh-tabs] .fh-tabs__nav{display:flex;flex-wrap:wrap;gap:8px;border:0;margin-bottom:30px;padding:0}
[data-fh-tabs] .fh-tabs__btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:15px;line-height:1;padding:11px 20px;border-radius:999px;background:#f1eeee;color:#7e1719;box-shadow:none;margin:0;transition:background .15s,color .15s}
[data-fh-tabs] .fh-tabs__btn:hover{background:#e6dada;color:#7e1719}
[data-fh-tabs] .fh-tabs__btn.is-active{background:#7e1719;color:#fff}
.fh-tabs__panel .wp-block-image{margin:0}
.fh-tabs__panel .wp-block-image img{width:100%;height:auto;border-radius:16px;object-fit:cover;box-shadow:0 16px 40px -20px rgba(40,10,10,.35)}
.fh-tabs__panel>p:last-child{margin-bottom:0}
@media(min-width:860px){
  /* [data-fh-tabs]-Prefix erhoeht Spezifitaet ueber block-style.css `.fh-tabs__panel.is-active{display:block}` */
  [data-fh-tabs] .fh-tabs__panel.is-active{display:grid;grid-template-columns:minmax(0,440px) 1fr;column-gap:48px;align-items:center}
  .fh-tabs__panel>.wp-block-image{grid-column:1;grid-row:1 / span 30;align-self:center}
  .fh-tabs__panel>.wp-block-heading,.fh-tabs__panel>p{grid-column:2}
  .fh-tabs__panel .wp-block-image img{max-height:360px}
}

/* Service-Karten: Innenabstand (Bild randlos oben) ---------------- */
.fhx-card .wp-block-image{margin:0}
.fhx-card .wp-block-image img{height:210px}
.fhx-card>.wp-block-heading{padding:18px 22px 0}
.fhx-card>p{padding:0 22px}
.fhx-card>p:last-child{padding-bottom:22px;margin-bottom:0}

/* Video-Embed abgerundet + Schatten ------------------------------- */
.fh-video,.fh-video .wp-block-embed__wrapper,.fh-video iframe{border-radius:16px}
.fh-video{overflow:hidden;box-shadow:0 18px 44px -22px rgba(0,0,0,.5);margin:0}

/* Aktuelles — Blog-Karten (Query-Loop) ---------------------------- */
.wp-block-post-template{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
@media(max-width:1023px){.wp-block-post-template{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.wp-block-post-template{grid-template-columns:1fr}}
.wp-block-post-template>li{background:#fff;border:1px solid #ebe5e5;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:100%;box-shadow:0 2px 10px rgba(40,10,10,.05);transition:box-shadow .2s,transform .2s}
.wp-block-post-template>li:hover{box-shadow:0 18px 40px -16px rgba(126,23,25,.2);transform:translateY(-4px)}
.wp-block-post-template>li .wp-block-post-featured-image{margin:0}
.wp-block-post-template>li .wp-block-post-featured-image img{width:100%;height:200px;object-fit:cover;display:block}
.wp-block-post-template>li .wp-block-post-title{padding:18px 20px 0;line-height:1.3}
.wp-block-post-template>li .wp-block-post-title a{color:#1f1f1f;text-decoration:none}
.wp-block-post-template>li .wp-block-post-title a:hover{color:#7e1719}
.wp-block-post-template>li .wp-block-post-featured-image{flex:0 0 auto}
.wp-block-post-template>li .wp-block-post-title{flex:0 0 auto}
.wp-block-post-template>li .wp-block-post-date{padding:6px 20px 0;color:#8a8a8a;font-size:13px;flex:0 0 auto}
/* Textauszug fuellt den Restraum -> Button bei ALLEN Karten unten buendig + gleiche Hoehe */
.wp-block-post-template>li .wp-block-post-excerpt{flex:0 0 auto;padding:12px 20px 0;color:#565656;font-size:15px;line-height:1.6;margin:0}
.wp-block-post-template>li .wp-block-post-excerpt p,
.wp-block-post-template>li .wp-block-post-excerpt__excerpt{margin:0!important;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* margin-top:auto absorbiert jede Hoehendifferenz -> Button bei ALLEN Karten exakt unten buendig */
.wp-block-post-template>li .wp-block-read-more{margin:20px 20px 22px!important;margin-top:auto!important;align-self:flex-start;flex:0 0 auto}

/* Full-Width-Fix: Hello-Elementor begrenzt `.site-main` bei NICHT-Elementor-Seiten
   auf 1140px + Auto-Margin. Unsere nachgebaute Startseite soll edge-to-edge sein
   (wie die Elementor-Original-Startseite) → Begrenzung fuer diese Seite aufheben.
   Sektionen regeln ihre Lesbreite selbst via .tw-max-w-7xl.tw-mx-auto. */
body.page-id-10764 .site-main,
.site-main:has(.fh-sec){max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}

/* Hero-Karte: das wp:cover faerbt seinen Inhalt per Default WEISS und schlaegt
   im Cover-Kontext die tw-text-*-Klassen → Karten-Text war weiss-auf-weiss.
   Farben hier explizit + scoped erzwingen (Welcome-Headline bleibt weiss). */
.fh-hero .fh-hero-card__h{color:#7e1719!important}
.fh-hero .fh-hero-card p{color:#4b5563!important}
.fh-hero .fh-hero-card a{color:#7e1719!important}
.fh-hero .fh-hero-card .fh-btn-primary{color:#fff!important}

/* CTA-Button-Links: Theme faerbt `.page-content a` rot (hoehere Spezifitaet als
   .tw-text-white) → rote Buttons hatten roten Text auf rot. Weiss erzwingen.
   Trifft Tab-„Mehr erfahren", Blog-„Weiterlesen"/read-more und wp:button. */
.page-content a.tw-bg-brand,
.page-content .wp-block-button__link,
.page-content .wp-block-read-more{color:#fff!important}

/* ----- Mobile-Feinschliff (<=639px) ------------------------------- */
@media(max-width:639px){
  /* Bild-Hero kompakter (war ~923px hoch) */
  .fh-hero.wp-block-cover{min-height:auto;padding:40px 0}
  .fh-hero__grid{gap:22px}
  .fh-hero__welcome{font-size:28px}
  .fh-hero-card{padding:24px 22px;max-width:none}
  .fh-hero-card__h{font-size:20px;margin-bottom:12px}
  .fh-hero-card p{margin-bottom:12px!important}
  /* Weniger Sektions-Luft auf kleinen Screens */
  .page-content .fh-sec:not(.fh-hero){padding-top:44px!important;padding-bottom:44px!important}
  /* Überschriften etwas kompakter */
  .page-content h1.wp-block-heading{font-size:30px;line-height:1.15}
  .page-content h2.wp-block-heading{font-size:25px;line-height:1.2}
  /* Tab-Pills kompakter, damit die Reiter weniger Platz fressen */
  [data-fh-tabs] .fh-tabs__nav{gap:6px;margin-bottom:22px}
  [data-fh-tabs] .fh-tabs__btn{padding:9px 14px;font-size:14px}
  /* Tab-Bild nicht zu hoch auf Mobile */
  .fh-tabs__panel .wp-block-image img{max-height:280px}
  /* Quicknav-Chips etwas kompakter */
  .fh-quicknav a{padding:9px 14px;font-size:13px}
}

/* ===== Vertikaler Rhythmus =========================================
   Das Theme (Hello Elementor) nullt Heading-/Absatz-Margins mit hoeherer
   Spezifitaet als die tw-mb-*-Utilities → Inhalte klebten aneinander
   ("zu gedraengt"). Hier sauberen, grosszuegigen Abstand erzwingen.
   Hero-Karte ausgenommen (hat eigene Abstaende). =================== */
.page-content .fh-sec:not(.fh-hero) h1.wp-block-heading{margin-bottom:26px!important;line-height:1.15}
.page-content .fh-sec:not(.fh-hero) h2.wp-block-heading{margin-bottom:34px!important;line-height:1.2}
.page-content .fh-sec:not(.fh-hero) h3.wp-block-heading{margin-bottom:14px!important;line-height:1.3}
.page-content .fh-sec:not(.fh-hero) p{margin-bottom:18px!important;line-height:1.75}
.page-content .fh-sec:not(.fh-hero) p:last-child{margin-bottom:0!important}
/* Buttons/CTAs in den Sektionen brauchen Luft nach oben */
.page-content .fh-sec:not(.fh-hero) .fh-btn-primary,
.page-content .fh-sec:not(.fh-hero) a.tw-bg-brand,
.page-content .fh-sec:not(.fh-hero) .wp-block-buttons{margin-top:10px!important;display:inline-flex}
/* Intro: Quicknav-Chips vom Text absetzen */
.page-content .fh-quicknav{margin-top:18px!important;margin-bottom:4px!important}
/* Service-Karten: etwas mehr Innenluft + Bild-Text-Abstand */
.fhx-card>.wp-block-heading{padding-top:22px!important}
.fhx-card>p{padding-left:24px!important;padding-right:24px!important}
.fhx-card>p:last-child{padding-bottom:26px!important}
/* Tabs: Abstand Nav -> Panel + im Panel Bild/Text-Luft */
[data-fh-tabs] .fh-tabs__nav{margin-bottom:34px!important}
.fh-tabs__panel>.wp-block-heading{margin-bottom:14px!important}

/* Service-Karten gleich hoch (wie die Blog-Karten) */
.page-content .wp-block-group:has(> .fhx-card){align-items:stretch}
.fhx-card{height:100%;display:flex;flex-direction:column}

/* Service-Grid explizit (robuster als :has) — 3 gleich hohe Karten */
.fhx-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
@media(max-width:1023px){.fhx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.fhx-grid{grid-template-columns:1fr}}

/* ===== Footer Call-to-Action aufgewertet (Theme-weit) =============
   Heading kraftvoller, Button mit Tiefe/Hover, ausgewogene Abstaende,
   sauberes Stacking auf Mobile. Reine Styles ueber die Theme-Klassen. */
.fh-footer__cta-inner{padding-top:60px!important;padding-bottom:60px!important;gap:40px!important;align-items:center!important}
.fh-footer__cta-copy{max-width:680px}
.fh-footer__cta-eyebrow{font-size:12px!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:rgba(255,255,255,.72)!important;font-weight:700!important;margin-bottom:14px!important;display:inline-block!important}
.fh-footer__cta-text{font-size:34px!important;line-height:1.18!important;font-weight:700!important;color:#fff!important;margin-bottom:14px!important}
.fh-footer__cta-sub{font-size:16px!important;line-height:1.65!important;color:rgba(255,255,255,.85)!important;max-width:48ch!important;margin:0!important}
.fh-cta-btn{padding:17px 36px!important;border-radius:50px!important;font-weight:700!important;font-size:16px!important;box-shadow:0 16px 32px -12px rgba(0,0,0,.5)!important;transition:transform .15s ease,box-shadow .15s ease!important;white-space:nowrap}
.fh-cta-btn:hover{transform:translateY(-2px)!important;box-shadow:0 24px 44px -14px rgba(0,0,0,.6)!important}
@media(max-width:767px){
  .fh-footer__cta-inner{flex-direction:column;align-items:flex-start!important;padding-top:44px!important;padding-bottom:44px!important;gap:22px!important}
  .fh-footer__cta-text{font-size:26px!important;line-height:1.22!important}
  .fh-footer__cta-sub{font-size:15px!important}
  .fh-cta-btn{width:100%;justify-content:center}
}