/* ==========================================================================
   Vaterhaus Child Theme – Über-uns (Werte/Geschichte/Zitaten/Fünf Dienste/
   Glaubensbekenntnis-Akkordeon) inkl. .thats-about Hero.
   Phase B1: verbatim aus legacy.css extrahiert (Refactor+Tokens folgt).
   Selektoren unverändert (B2-Rename später).
   ========================================================================== */

/* Was uns ausmacht Section */ 
/* Über-uns-Section: weicher Übergang oben und unten */
.vh-hero{
  position: relative;
  isolation: isolate;
}

/* Weißer Fade oben und unten (zwei bisherige ::after-Regeln zusammengeführt) */
.vh-hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 1;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #ffffff 100%
  );
}

.vh-hero .fusion-text > p,
.vh-hero .fusion-title > h2{
    text-shadow: 1px 1px 50px rgba(0, 0, 0, 0.4);
}



/* ==========================================
   VATERHAUS – UNSERE WERTE
   ========================================== */

/* Section */
.vh-values{
  position: relative;
  overflow: hidden;
}

/* Die drei Werte */
.vh-values .vh-value{
  position: relative;
  text-align: center;
  padding: 10px 35px 20px;
  transition: transform 0.35s ease;
}

/* Sehr dezenter Hover */
.vh-values .vh-value:hover{
  transform: translateY(-5px);
}

/* Vertikale Trennlinien */
@media (min-width: 1025px) {
.vh-values .vh-value:not(:last-child)::after{
    content: "";
    position: absolute;
    right: 0;
    top: 18%;
    height: 65%;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(231, 191, 123, 0.35),
      transparent
    );
  }
}

/* Icons */
.vh-values .vh-value img{
  transition: transform 0.4s ease;
}

.vh-values .vh-value:hover img{
  transform: scale(1.06);
}

/* Überschriften */
.vh-values .vh-value h3,
.vh-values .vh-value h4{
  color: #fff;
  margin-top: 15px;
  margin-bottom: 16px;
  line-height: 1.3;
}

/* Beschreibung */
.vh-values .vh-value p{
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.8;
  max-width: 310px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile */
@media (max-width: 1024px) {
.vh-values .vh-value{
    padding: 20px 15px 30px;
  }
}


/* ========================================
   VATERHAUS – UNSERE GESCHICHTE
   ======================================== */

/* Layout */
@media (min-width: 1025px) {

.vh-history .fusion-builder-row{
    display: flex;
    /* Avada setzt via .fusion-flex-align-items-flex-start `flex-start`;
       die rechte Zitat-Spalte soll vertikal mittig zur Text-Spalte stehen. */
    align-items: center !important;
  }

.vh-history .vh-history__text{
    --awb-width-large: 65% !important;
    --awb-spacing-left-large: 3% !important;
    --awb-spacing-right-large: 5% !important;
  }

.vh-history .vh-history__quote{
    --awb-width-large: 35% !important;
    --awb-spacing-left-large: 5% !important;
    --awb-spacing-right-large: 3% !important;
  }
}

/* Geschichte – Text */
.vh-history__text .fusion-text{
  max-width: 670px;
}

.vh-history__text .fusion-text p{
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 18px;
  color: #333b35;
}

/* Letzter Absatz als dezenter Abschluss */
.vh-history__text .fusion-text p:last-child{
  margin-top: 24px;
  margin-bottom: 0;
  color: var(--vh-color-forest);
  font-weight: 600;
}

/* ========================================
   ZITAT
   ======================================== */

.vh-history__quote .fusion-column-wrapper{
  position: relative;
  padding: 35px 0 35px 35px;

  border-left: 1px solid rgba(196, 154, 85, 0.5);
}

/* Großes goldenes Anführungszeichen */
.vh-history__quote .fusion-column-wrapper::before{
  content: "“";

  position: absolute;
  top: -12px;
  left: 35px;

  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;

  color: var(--vh-color-gold-pale);
  opacity: 0.85;
}

/* Allura-Zitat */
.vh-history__quote .fusion-title-heading{
  font-family: "Allura", cursive !important;
  font-size: clamp(32px, 2.5vw, 43px) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;

  color: var(--vh-color-gold-pale) !important;

  margin: 35px 0 0 !important;
}

/* Kleine goldene Linie unter dem Zitat */
.vh-history__quote .fusion-title::after{
  content: "";
  display: block;

  width: 65px;
  height: 1px;

  margin-top: 25px;

  background: linear-gradient(
    90deg,
    var(--vh-color-gold-pale),
    rgba(196, 154, 85, 0)
  );
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {

.vh-history__quote .fusion-column-wrapper{
    padding: 25px 0 25px 30px;
    margin-top: 25px;
  }

.vh-history__quote .fusion-title-heading{
    font-size: 38px !important;
  }
}

@media (max-width: 767px) {

.vh-history__text .fusion-text p{
    font-size: 15px;
    line-height: 1.75;
  }

.vh-history__quote .fusion-title-heading{
    font-size: 36px !important;
  }
}







/* ==========================================
   VATERHAUS – DIE FÜNF DIENSTE
   ========================================== */

/* Gesamter Bereich */
.vh-ministries {
  width: 100%;
  max-width: 1100px;
  margin: 28px 0 36px;
}

/* Einzelne Zeile */
.vh-ministries .vh-ministry {
  display: grid !important;
  grid-template-columns: 48px 175px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 20px !important;

  min-height: 0 !important;
  height: auto !important;
  padding: 20px 12px !important;
  margin: 0 !important;

  border-bottom: 1px solid rgba(197, 154, 82, 0.22);
  background: transparent;
  box-sizing: border-box;

  transition: background-color 0.25s ease;
}

/* Obere Trennlinie */
.vh-ministries .vh-ministry:first-child {
  border-top: 1px solid rgba(197, 154, 82, 0.22);
}

/* Icons */
.vh-ministries .vh-ministry > img {
  display: block !important;

  grid-column: 1;
  grid-row: 1;

  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;

  object-fit: contain;
  align-self: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Bezeichnung: Apostel, Propheten usw. */
.vh-ministries .vh-ministry > strong {
  display: block !important;

  grid-column: 2;
  grid-row: 1;

  color: var(--vh-color-forest) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Beschreibung */
.vh-ministries .vh-ministry__description{
  display: block !important;

  grid-column: 3;
  grid-row: 1;

  width: 100% !important;
  min-width: 0;
  max-width: none !important;

  color: #626862 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;

  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Dezenter Hover */
@media (hover: hover) {
  .vh-ministries .vh-ministry:hover {
    background-color: rgba(231, 191, 123, 0.055);
  }
}

/* ==========================================================================
   Apostel-Karte (erster Dienst): abweichendes Markup vereinheitlichen.
   Bei allen anderen Karten sind <img> und <strong> direkte Kinder von
   .vh-ministry und treffen die Regeln `.vh-ministry > img` / `> strong`
   (Icon in Spalte 1, grüner Titel in Spalte 2). In der Apostel-Karte liegen
   <img>/<strong> jedoch in einem <p>. Mit `display: contents` auf diesem <p>
   nehmen <img>, <strong> und die Beschreibung direkt am Grid von
   .vh-ministry teil und werden damit identisch positioniert und gestylt.
   Die Basisregeln stehen VOR den Media-Queries, damit die kleineren
   Icon-/Titelgrößen von Tablet/Smartphone (weiter unten) Vorrang haben.
   ========================================================================== */
.vh-ministries .vh-ministry > p:has(> strong) {
  display: contents !important;
}

.vh-ministries .vh-ministry > p:has(> strong) > br {
  display: none !important;
}

/* Icon in Spalte 1, wie `.vh-ministry > img` */
.vh-ministries .vh-ministry > p:has(> strong) > img {
  display: block !important;

  grid-column: 1;
  grid-row: 1;

  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;

  object-fit: contain;
  align-self: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Titel in Spalte 2, wie `.vh-ministry > strong` */
.vh-ministries .vh-ministry > p:has(> strong) > strong {
  display: block !important;

  grid-column: 2;
  grid-row: 1;

  color: var(--vh-color-forest) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {
  .vh-ministries .vh-ministry {
    grid-template-columns: 42px 130px minmax(0, 1fr) !important;
    column-gap: 15px !important;
    padding: 18px 8px !important;
  }

  .vh-ministries .vh-ministry > img {
    width: 36px !important;
    height: 36px !important;
  }

  .vh-ministries .vh-ministry > strong {
    font-size: 16px !important;
  }

  .vh-ministries .vh-ministry > p:has(> strong) > img {
    width: 36px !important;
    height: 36px !important;
  }

  .vh-ministries .vh-ministry > p:has(> strong) > strong {
    font-size: 16px !important;
  }

.vh-ministries .vh-ministry__description{
    font-size: 14px !important;
  }
}

/* ==========================================
   SMARTPHONE
   ========================================== */

@media (max-width: 600px) {
  .vh-ministries {
    margin: 22px 0 28px;
  }

  .vh-ministries .vh-ministry {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 4px !important;

    padding: 16px 4px !important;
  }

  .vh-ministries .vh-ministry > img {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 34px !important;
    height: 34px !important;
  }

  .vh-ministries .vh-ministry > strong {
    grid-column: 2;
    grid-row: 1;

    font-size: 16px !important;
  }

  .vh-ministries .vh-ministry > p:has(> strong) > img {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 34px !important;
    height: 34px !important;
  }

  .vh-ministries .vh-ministry > p:has(> strong) > strong {
    grid-column: 2;
    grid-row: 1;

    font-size: 16px !important;
  }

.vh-ministries .vh-ministry__description{
    grid-column: 2;
    grid-row: 2;

    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* Automatisch eingefügte leere Absätze entfernen */
.vh-ministries .vh-ministry > p:empty {
  display: none !important;
}

/* Automatisch eingefügte Zeilenumbrüche entfernen */
.vh-ministries .vh-ministry > br {
  display: none !important;
}













/* =========================================
   VATERHAUS – GLAUBENSBEKENNTNIS ACCORDION
   ========================================= */

/* Sektions-Hintergrund: das hochgeladene Creme-/Gold-Bild BEHALTEN (Kunde moechte es).
   Nur der gruene Schleier wird entfernt: ein Fusion `::before` (has-mask/pattern) malt
   einen darkgreen linear-gradient von links ueber das Bild. -> ::before aus, Bild bleibt. */
.fusion-fullwidth.fusion-flex-container.has-mask-background.has-pattern-background:has(.vh-creed)::before{
  display: none !important;
  background: none !important;
}

.vh-creed{
  --vh-green: var(--vh-color-forest);
  --vh-gold: #c59a52;
  --vh-border: #e9e1d5;
  --vh-cream: #fffdf9;
}

/* Gesamter Accordion-Bereich – einspaltig (Original-Layout) */
.vh-creed .panel-group{
  counter-reset: creed;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Einzelne Accordion-Karte */
.vh-creed .fusion-panel{
  counter-increment: creed;
  background: var(--vh-cream) !important;
  border: 1px solid var(--vh-border) !important;
  border-radius: 4px !important;
  margin: 0 !important;
  overflow: hidden;
  box-shadow: 0 3px 15px rgba(35, 45, 35, 0.025);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover */
.vh-creed .fusion-panel:hover{
  border-color: rgba(197, 154, 82, 0.55) !important;
  box-shadow: 0 5px 20px rgba(35, 45, 35, 0.045);
}

/* Überschrift-Container */
.vh-creed .panel-heading,
.vh-creed .panel-title{
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Klickbare Zeile */
.vh-creed .panel-title > a{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  min-height: 62px;
  padding: 14px 18px !important;

  background: transparent !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nummerierung 01–09 */
.vh-creed .panel-title > a::before{
  content: counter(creed, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;
  width: 34px;

  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--vh-gold);
  line-height: 1.3;
}

/* Überschrift */
.vh-creed .fusion-toggle-heading{
  flex: 1;
  min-width: 0;

  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--vh-green) !important;

  transition: color 0.2s ease;
}

/* Plus/Minus nach rechts */
.vh-creed .fusion-toggle-icon-wrapper{
  order: 3;
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0 0 0 auto !important;
}

/* Plus/Minus Icons */
.vh-creed .fusion-toggle-icon-wrapper i{
  color: var(--vh-gold) !important;
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* Geöffnete Karte */
.vh-creed .fusion-panel:has( .panel-title > a[aria-expanded="true"] ){
  border-color: rgba(197, 154, 82, 0.65) !important;
  background: #ffffff !important;
}

/* Inhalt */
.vh-creed .panel-body{
  padding: 4px 22px 20px 66px !important;
  background: transparent !important;
  border: none !important;

  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #4b514c !important;
}

/* Absätze */
.vh-creed .panel-body p{
  margin: 0 0 12px !important;
  color: inherit !important;
}

/* Bibelstellen */
.vh-creed .panel-body p:last-child{
  margin-bottom: 0 !important;
}

.vh-creed .panel-body em {
  color: #b58b48 !important;
  font-size: 13px;
  font-style: italic;
}

/* Fokus bei Tastaturbedienung */
.vh-creed .panel-title > a:focus-visible {
  outline: 2px solid var(--vh-gold);
  outline-offset: -3px;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {
  .vh-creed .panel-group {
    gap: 8px;
  }

  .vh-creed .panel-title > a {
    min-height: 56px;
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .vh-creed .panel-title > a::before {
    flex-basis: 28px;
    width: 28px;
    font-size: 15px;
  }

  .vh-creed .fusion-toggle-heading {
    font-size: 14px !important;
  }

  .vh-creed .panel-body {
    padding: 2px 16px 18px 52px !important;
    font-size: 14px !important;
  }
}
/* VATERHAUS – Accordion Plus-Icon: Avada-Orange-Hintergrundbox unterdruecken.
   .fa-fusion-box + Icon-Wrapper transparent; Hover/Fokus/Aktiv ohne orange Füllung
   (Spezifitaet per .panel-heading gegen Fusion Builders `:not(.active):hover` angehoben). */
.vh-creed .fusion-panel .panel-heading .panel-title a .fa-fusion-box,
.vh-creed .fusion-panel .panel-heading .panel-title a:hover .fa-fusion-box,
.vh-creed .fusion-panel .panel-heading .panel-title a:focus .fa-fusion-box,
.vh-creed .fusion-panel .panel-heading .panel-title a.active .fa-fusion-box,
.vh-creed .fusion-panel .panel-heading .panel-title a .fusion-toggle-icon-wrapper,
.vh-creed .fusion-panel .panel-heading .panel-title a:hover .fusion-toggle-icon-wrapper,
.vh-creed .fusion-panel .panel-heading .panel-title a.active .fusion-toggle-icon-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Plus und Minus immer goldfarben */
.vh-creed .fusion-panel .panel-title a .fa-fusion-box::before,
.vh-creed .fusion-panel .panel-title a:hover .fa-fusion-box::before,
.vh-creed .fusion-panel .panel-title a.active .fa-fusion-box::before,
.vh-creed .fusion-panel .panel-title a .fusion-toggle-icon-wrapper i {
  color: #c59a52 !important;
  background: transparent !important;
}