/*
Theme Name: Brok Child
Theme URI: https://brok.qodeinteractive.com
Description: A child theme of Brok
Author: Edge Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: brok
Template: brok
*/

/* === HB Testimonials Styling (scoped) === */
.hb-testimonials { text-align: center; }

/* Bild kreisrund & zentriert */
.hb-testimonials .qodef-e-media img,
.hb-testimonials .qodef-m-image img,
.hb-testimonials .qodef-image img {
  width: 120px;           /* Wunschgröße anpassen */
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
}

/* ALLE Inhalte mittig, angenehme Zeilenlänge */
.hb-testimonials .qodef-e-content,
.hb-testimonials .qodef-m-content,
.hb-testimonials .qodef-e-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hb-testimonials .qodef-e-text { max-width: 720px; }

/* Name & Beruf ÜBER dem Text */
.hb-testimonials .qodef-e-title,
.hb-testimonials .qodef-e-author {
  order: -2;
  margin: 8px 0 2px;
  font-weight: 700;
  text-transform: none;
  text-align: center;
}
.hb-testimonials .qodef-e-position,
.hb-testimonials .qodef-e-job {
  order: -1;
  margin: 0 0 12px;
  opacity: .85;
  text-align: center;
}

/* Anführungszeichen/Quote-Symbol entfernen (egal ob Element oder ::before) */
.hb-testimonials .qodef-e-quote,
.hb-testimonials .qodef-quote,
.hb-testimonials .qodef-e-text:before {
  display: none !important;
  content: none !important;
}

/* === HB Testimonials – Feinschliff === */

/* a) Quote-Icon (inline SVG) hart ausblenden */
.hb-testimonials .qodef-e-quote-icon,
.hb-testimonials .qodef-svg-quote,
.hb-testimonials svg.qodef-svg-quote {
  display: none !important;
}

/* b) Rundes Portrait (Hülle + Bild) */
.hb-testimonials .qodef-e-media,
.hb-testimonials .qodef-e-media-image,
.hb-testimonials .qodef-m-image,
.hb-testimonials .qodef-image {
  width: 140px;                 /* gewünschte Avatar-Größe */
  height: 140px;
  border-radius: 50%;
  overflow: hidden;             /* schneidet Bild innerhalb rund zu */
  margin: 0 auto 16px;          /* zentrieren + Abstand unter dem Bild */
}

.hb-testimonials .qodef-e-media img,
.hb-testimonials .qodef-e-media-image img,
.hb-testimonials .qodef-m-image img,
.hb-testimonials .qodef-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* sauberer Zuschnitt */
  display: block;
  border-radius: 50%;           /* doppelt hält besser */
}

/* Testimonials – Author wie H2 */
.qodef-testimonials-list .qodef-e-author-name {
    font-family: 'n27 bold italic', sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #414675;
    line-height: 1.2em;
    display: block;
    margin-top: 20px;
}

/* Testimonials – Job exakt wie H5 (uppercase, schwarz) */
.qodef-testimonials-list h6.qodef-e-author .qodef-e-author-job {
  font-family: 'n27 light', sans-serif;
  font-size: 17px;              /* falls dein globales H5 abweicht, hier die echte Größe einsetzen */
  font-weight: 400;
  font-style: normal !important; /* bricht das kursiv aus dem Theme */
  text-transform: uppercase !important;
  color: #000000;
  display: block;
  margin-top: 5px;
  margin-bottom: 20px; /* Abstand nach unten */
}

/* Button-Text gezielt überschreiben */
a.qodef-shortcode.qodef-button .qodef-m-text {
  font-family: "n27 bold", sans-serif !important;
}

/* CF7-Submit: Qode-Button-Text auf deine Schrift setzen */
.wpcf7 form .qodef-button .qodef-m-text {
  font-family: "n27 bold", sans-serif !important;
}

/* Intro-Logo Startseite kleiner + zentriert */
.qodef-m-brok-intro-logo-image img {
  max-width: 150px;     /* gewünschte Breite einstellen */
  height: auto;         /* Höhe automatisch */
  display: block;
  margin: 0 auto;       /* horizontal zentrieren */
}

/* Logo im Header größer machen – nur Desktop */
@media (min-width: 1025px) {
  .qodef-header-logo-image {
    max-height: 60px !important;  /* hier Höhe anpassen */
    height: auto !important;
    width: auto !important;
  }
}




/* === Sticky Header — REPLACEMENT (Desktop) === */
/* Vorheriges Sticky-CSS komplett entfernen und nur das hier nutzen. */

@media (min-width:1025px){

  /* Konfig: Höhe & maximale Logohöhe */
  :root{
    --hb-sticky-h: 78px;                   /* Gesamthöhe: bei Bedarf 74–84 testen */
    --hb-logo-sticky: calc(var(--hb-sticky-h) - 24px);
  }

  /* Leistenhöhe setzen, ohne das Layout umzubauen */
  .qodef-header-sticky,
  .qodef-header-sticky .qodef-header-sticky-inner{
    min-height: var(--hb-sticky-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Navigation auf die gleiche Höhe bringen */
  .qodef-header-sticky .qodef-header-navigation,
  .qodef-header-sticky .qodef-header-navigation > ul,
  .qodef-header-sticky .qodef-header-navigation > ul > li{
    height: var(--hb-sticky-h) !important;
  }

  /* WICHTIG für den Overlay/Hover: Anker bekommt echte Höhe statt line-height */
  .qodef-header-sticky .qodef-header-navigation > ul > li > a{
    display: flex !important;
    align-items: center !important;
    height: 100% !important;               /* => Overlay orientiert sich korrekt */
    line-height: 1 !important;             /* keine falsche Baseline */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative;                     /* falls Overlay ::before absolut ist */
  }

  /* Optional (falls das Overlay per ::before die volle Höhe braucht) */
  .qodef-header-sticky .qodef-header-navigation > ul > li > a::before{
    height: 100% !important;
  }

  /* Logo nur vertikal mittig ausrichten & sauber skalieren */
  .qodef-header-sticky a.qodef-header-logo-link.qodef-source--image{
    display: inline-flex !important;
    align-items: center !important;
    height: var(--hb-sticky-h) !important;
  }
  .qodef-header-sticky .qodef-header-logo-image{
    display: block !important;
    max-height: var(--hb-logo-sticky) !important;
    height: auto !important;
    width: auto !important;
  }
}

/* Footer-Menü (Spalte 3) – Typo wie gehabt, Abstand via Flex-Gap */
#nav_menu-3 .menu-footer-container #menu-footer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;              /* steuert den vertikalen Abstand sauber */
  flex-direction: column;
  gap: 10px;                   /* <<< Abstand zwischen den Punkten (anpassen bis es passt) */
}

#nav_menu-3 .menu-footer-container #menu-footer > li {
  margin: 0;                  /* alte Abstände entfernen */
  padding: 0;
}

#nav_menu-3 .menu-footer-container #menu-footer > li > a {
  display: block;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 15px; 
  line-height: 1.25;          /* kompaktes Zeilenbild wie Spalte 2 */
  /* optional angleichen, falls Spalte 2 kleiner ist: */
  /* font-size: 16px; */
}

/* Footer Social Icons (Spalte 4) */
#brok_core_social_icons_group-10 .qodef-social-icons-group {
  display: flex;
  justify-content: flex-end; /* rechtsbündig */
  gap: 10px;                 /* gleichmäßiger Abstand zwischen Icons */
}

#brok_core_social_icons_group-10 .qodef-social-icons-group a {
  color: #fff;               /* weiß, damit es zu den anderen Spalten passt */
  font-size: 16px;           /* optional: einheitliche Größe */
}

/* Footer letzte Spalte: Social + HAPPY END rechtsbündig */
#brok_core_social_icons_group-10 .qodef-social-icons-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#brok_core_custom_font-6 .qodef-custom-font {
  text-align: right;       /* Rechtsbündig */
  margin-top: auto;        /* nach unten schieben, wenn Spalte Stretch hat */
  margin-bottom: 0;
}


@media (min-width: 992px){
  #qodef-page-footer-top-area-inner .qodef-grid.qodef-layout--columns .qodef-grid-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr 0.6fr 1fr; 
    column-gap: clamp(12px, 2vw, 48px); /* min 12px, dynamisch bis max 48px */
    row-gap: 12px;
    align-items: stretch;
  }
}


  /* 2) Alte Floats/Breiten neutralisieren, damit Grid greift */
  #qodef-page-footer-top-area-inner .qodef-grid.qodef-layout--columns .qodef-grid-inner > .qodef-grid-item {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
    display: block; /* jedes Widget bleibt „ein Block“, Grid macht die Spalten */
  }

  /* 3) Widgets per data-area in die richtige Spalte setzen */
  #qodef-page-footer-top-area-inner .qodef-grid-inner > .qodef-grid-item:has([data-area*="footer-top-area-column-1"]) { grid-column: 1; }
  #qodef-page-footer-top-area-inner .qodef-grid-inner > .qodef-grid-item:has([data-area*="footer-top-area-column-2"]) { grid-column: 2; }
  #qodef-page-footer-top-area-inner .qodef-grid-inner > .qodef-grid-item:has([data-area*="footer-top-area-column-3"]) { grid-column: 3; }
  #qodef-page-footer-top-area-inner .qodef-grid-inner > .qodef-grid-item:has([data-area*="footer-top-area-column-4"]) { grid-column: 4; }

  /* 4) Column 4 rechtsbündig halten */
  #qodef-page-footer-top-area-inner .qodef-grid-inner > .qodef-grid-item:has([data-area*="footer-top-area-column-4"]) {
    text-align: right;
  }
  /* Social-Icons in Col4 rechts halten (falls nötig) */
  #brok_core_social_icons_group-10 .qodef-social-icons-group {
    display:flex; justify-content:flex-end; gap:10px;
  }
}

/* === Elementor: Paragraph-/Body-Typo vom Theme übernehmen (SAFE VERSION) === */

/* 1) Elementor-Kit Variablen auf Theme zurückbiegen (falls vorhanden) */
body[class*="elementor-kit"]{
  --e-global-typography-text-font-family: var(--qodef-body-font-family, inherit);
  --e-global-typography-text-font-weight: var(--qodef-body-font-weight, inherit);
  --e-global-typography-text-line-height: var(--qodef-body-line-height, inherit);
  --e-global-typography-text-font-size: var(--qodef-body-font-size, inherit);
  --e-global-color-text: var(--qodef-body-color, inherit);
}

/* 2) NUR das Elementor Text-Editor-Widget erbt die Theme-Paragraph-Typo
      (keine globalen p/li/span/a mehr → Testimonials bleiben unberührt) */
body .elementor .elementor-widget-text-editor,
body .elementor .elementor-widget-text-editor .elementor-widget-container,
body .elementor .elementor-widget-text-editor .elementor-text-editor,
body .elementor .elementor-widget-text-editor :where(p, li, a, span){
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* 3) Gutenberg-Paragraphs innerhalb des Text-Editor-Widgets */
body .elementor .elementor-widget-text-editor .wp-block-paragraph{
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Brok/Qode Button: Overlay-/BG-Effekt von #f0f0f0 → #eeeae9 */

/* Standard-Selector laut Brok-Core (siehe DevTools-Screenshot) */
a.qodef-button.qodef-layout--filled.qodef-html--link .qodef-bg-effect {
  background-color: #eeeae9 !important;
}

/* Falls der Button aus dem Elementor-Widget kommt */
.elementor-widget-brok_core_button a.qodef-button .qodef-bg-effect {
  background-color: #eeeae9 !important;
}

/* Sicherheit für mögliche Modifikatoren/Varianten */
a.qodef-button .qodef-bg-effect,
.qodef-button .qodef-bg-effect {
  background-color: #eeeae9 !important;
}

/* Optional: Hover/Active, falls das Theme hier gesondert überschreibt */
a.qodef-button:hover .qodef-bg-effect,
a.qodef-button:focus .qodef-bg-effect,
a.qodef-button:active .qodef-bg-effect {
  background-color: #eeeae9 !important;
}

/* Portfolio-Meta/Tag unter den Projekten wie H4 darstellen */
body .qodef-portfolio-list .qodef-e-info > a[rel="tag"]{
  /* H4-Typo aus Theme bzw. Elementor übernehmen (mit Fallbacks) */
  font-family: var(--qodef-h4-font-family, var(--e-global-typography-h4-font-family, inherit)) !important;
  font-size:   var(--qodef-h4-font-size,   var(--e-global-typography-h4-font-size, 1.25rem)) !important;
  line-height: var(--qodef-h4-line-height, var(--e-global-typography-h4-line-height, 1)) !important;
  letter-spacing: var(--qodef-h4-letter-spacing, var(--e-global-typography-h4-letter-spacing, 0)) !important;
  text-transform: var(--qodef-h4-text-transform, var(--e-global-typography-h4-text-transform, none)) !important;
  color: var(--qodef-h4-color, var(--e-global-color-headers, currentColor)) !important;

  /* lokale Overrides gegen die kleinen/kurisven Defaults */
  font-style: normal !important;
  display: block;               /* wirkt wie eine Headline-Zeile */
  margin-top: 8px;              /* etwas Abstand nach oben */
}

/* Falls das Theme pauschal alle Info-Items klein/kursiv setzt – neutralisieren NUR für den Tag-Link */
body .qodef-portfolio-list .qodef-e-info > a[rel="tag"]{
  font-size: inherit !important;
  color: inherit !important;
}

/* Portfolio List (Info Below) – zentriert + sehr kompakte Abstände */

/* Abstand zwischen Bild und Textblock reduzieren (statt 23px) */
.elementor-widget-brok_core_portfolio_list
  .qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-content{
  margin-top: 8px !important;
  text-align: center; /* Basis-Zentrierung */
}

/* H3-Titel eng & mittig */
.elementor-widget-brok_core_portfolio_list
  .qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-title{
  text-align: center !important;
  line-height: 1.12 !important;
  margin: 0 0 2px !important;   /* sehr knapp unter dem Titel */
  padding: 0 !important;
}
.elementor-widget-brok_core_portfolio_list
  .qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-title a{
  display: inline-block;
  line-height: 1.12 !important;
  margin: 0 auto !important;
}

/* Meta/Tags eng & mittig */
.elementor-widget-brok_core_portfolio_list
  .qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-info{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25em;
  margin-top: 0 !important;     /* direkt unter dem Titel */
  line-height: 1.05 !important;
}

/* Tag-Link wie H4, aber ohne Extra-Margin */
.elementor-widget-brok_core_portfolio_list
  .qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-info > a[rel="tag"]{
  font-family: var(--qodef-h4-font-family, var(--e-global-typography-h4-font-family, inherit)) !important;
  letter-spacing: var(--qodef-h4-letter-spacing, var(--e-global-typography-h4-letter-spacing, 0)) !important;
  text-transform: var(--qodef-h4-text-transform, var(--e-global-typography-h4-text-transform, none)) !important;
  color: var(--qodef-h4-color, var(--e-global-color-headers, currentColor)) !important;
  font-style: normal !important;
  line-height: 1.05 !important;
  margin: 0 !important;         /* <- wichtig gegen Restabstände */
}

/* Sicherheit: alle unteren Wrapper ohne Offsets */
.elementor-widget-brok_core_portfolio_list
  .qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-bottom-holder,
.elementor-widget-brok_core_portfolio_list
  .qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-text{
  margin: 0 !important;
  padding: 0 !important;
}

/* CF7 im Brok/Qode-Wrapper: Felder + Button immer untereinander (auch Desktop) */
.qodef-contact-form-7 .wpcf7 form{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px; /* Abstand zwischen den Reihen */
}

/* Wrapper der Felder auf volle Breite bringen */
.qodef-contact-form-7 .wpcf7 form > span,
.qodef-contact-form-7 .wpcf7 form > div,
.qodef-contact-form-7 .wpcf7 .wpcf7-form-control-wrap{
  display: block !important;
  width: 100% !important;
}

/* Submit-Button auf eigene Zeile unter die Felder */
.qodef-contact-form-7 .wpcf7 .wpcf7-submit{
  align-self: flex-start !important; /* linksbündig unter den Feldern */
  margin-top: 8px !important;
}
/* CF7: leere Response-Box ausblenden (verhindert roten Strich) */
.qodef-contact-form-7 .wpcf7 .wpcf7-response-output[aria-hidden="true"],
.qodef-contact-form-7 .wpcf7 .wpcf7-response-output:empty {
  display: none !important;
}

/* Optional: dezente Darstellung, wenn Meldung vorhanden ist */
.qodef-contact-form-7 .wpcf7 .wpcf7-response-output{
  margin: 12px 0 0;
  padding: .6em 1em;
  border-width: 2px;
}

/* (Optional) Farben je Status angleichen */
.qodef-contact-form-7 .wpcf7 .wpcf7-form.sent    .wpcf7-response-output { border-color: #39b54a; color: #39b54a; }
.qodef-contact-form-7 .wpcf7 .wpcf7-form.invalid .wpcf7-response-output { border-color: #e67e22; color: #e67e22; }
.qodef-contact-form-7 .wpcf7 .wpcf7-form.failed  .wpcf7-response-output { border-color: #e74c3c; color: #e74c3c; }

/* CF7 – Brok/Qode Button: neues Grau (#eeeae9) für alle Effekt-Layer,
   Animation & linkes Quadrat bleiben erhalten */
.qodef-contact-form-7 .wpcf7 .qodef-button.qodef-layout--filled{
  background: transparent !important;   /* Basis transparent lassen */
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Linkes Quadrat + evtl. Button-Fill */
.qodef-contact-form-7 .wpcf7 .qodef-button.qodef-layout--filled::before,
.qodef-contact-form-7 .wpcf7 .qodef-button.qodef-layout--filled::after{
  background-color: #eeeae9 !important;
}

/* Die eigentliche Füll-Animation sitzt bei vielen Skins am Text-Span */
.qodef-contact-form-7 .wpcf7 .qodef-button.qodef-layout--filled .qodef-m-text::before,
.qodef-contact-form-7 .wpcf7 .qodef-button.qodef-layout--filled .qodef-m-text::after{
  background-color: #eeeae9 !important;
}

/* Falls der Skin statt Pseudos ein Bg-Span nutzt */
.qodef-contact-form-7 .wpcf7 .qodef-button.qodef-layout--filled .qodef-bg-effect,
.qodef-contact-form-7 .wpcf7 .qodef-button.qodef-layout--filled .qodef-m-bg{
  background-color: #eeeae9 !important;
}

/* Text oben halten (keine zweite Kachel) */
.qodef-contact-form-7 .wpcf7 .qodef-button .qodef-m-text{
  position: relative; z-index: 1; background: transparent !important;
}

/* Footer: Textgröße im Kontaktblock fix auf 15px */
#qodef-page-footer-top-area-inner .hb-contact{
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Kinder sollen die 15px erben (überstimmt Theme-Regeln auf p/a/span …) */
#qodef-page-footer-top-area-inner .hb-contact *{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Footer: "HAPPY END" Margin-Top auf 71px */
#brok_core_custom_font-6 .qodef-custom-font {
  margin: 65px 0 0 0 !important;
}

/* Footer linke Spalte – Widget #block-6: Textgröße fix auf 15px */
#qodef-page-footer-top-area-inner #block-6 .wp-block-group__inner-container{
  font-size: 15px !important;
  line-height: 1.6 !important;
}
#qodef-page-footer-top-area-inner #block-6 .wp-block-group__inner-container *{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Falls du nur die linke Spalte meinst (Logo/Text) */
#qodef-page-footer #block-5.widget,
#qodef-page-footer #block-6.widget{
  margin-bottom: 27px !important; /* oder 0 */
}