/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://brennerforst.de
 Description:  BrennerForst Child Theme v5
 Author:       BrennerForst
 Template:     hello-elementor
 Version:      5.0
*/

*,*::before,*::after { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100%;
  margin: 0; padding: 0;
  padding-bottom: 42px; /* Platz für fixierten Footer */
  background: url('https://neu.brennerforst.de/wp-content/uploads/2026/03/bg.jpg')
              no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

/* Pat.png Muster-Overlay */
body::before {
  content: '';
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  background-image: url('https://neu.brennerforst.de/wp-content/uploads/2026/03/pat.png');
  opacity: 0.65;
  z-index: 0;
  pointer-events: none;
}

/* ── SEITEN-WRAPPER: Flexbox-Spalte, immer mind. Fensterhöhe ────────── */
#bf-page {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Gesamthöhe = Viewport minus fixierter Footer (42px) */
  min-height: calc(100vh - 42px);
}

/* ── HEADER ─────────────────────────────────────────────────────────── */
#bf-header {
  padding: 12px 15px 6px;
  background: transparent;
  flex-shrink: 0;
}
#bf-header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
#bf-logo { flex: 0 0 auto; }
#bf-logo-img {
  display: block;
  max-height: 150px;
  width: auto;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.7));
}
#bf-branding { flex: 1 1 auto; padding-left: 8px; }
#bf-logoschrift {
  max-height: 110px;
  width: auto;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.7));
}
#bf-contact {
  flex: 0 0 auto;
  min-width: 185px;
  font-size: .87em;
  line-height: 1.7;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,.9);
}
#bf-contact p { margin: 1px 0; color: #fff; }
#bf-contact a { color: #e67e22; text-decoration: none; }
#bf-contact a:hover { color: #fff; text-decoration: underline; }

/* ── NAVIGATIONSLEISTE ──────────────────────────────────────────────── */
#bf-nav {
  background: rgba(38,52,72,.92);
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
#bf-nav-inner { position: relative; }

ul.bf-menu {
  display: flex; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
ul.bf-menu > li { position: relative; }
ul.bf-menu > li > a {
  display: flex; align-items: center; gap: 6px;
  color: #fff !important;
  padding: 12px 17px;
  font-size: 1.0em; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.07);
  transition: background .15s, color .15s;
}
ul.bf-menu > li > a:hover,
ul.bf-menu > li.current-menu-item > a,
ul.bf-menu > li.current-menu-ancestor > a {
  background: rgba(255,255,255,.13);
  color: #e67e22 !important;
}
ul.bf-menu > li.menu-item-has-children > a::after {
  content: ' ▾'; font-size: .75em; opacity: .8;
}
ul.bf-menu .sub-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: rgba(33,45,63,.97);
  min-width: 215px;
  list-style: none; margin: 0; padding: 4px 0;
  z-index: 999;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 2px 5px 14px rgba(0,0,0,.55);
}
ul.bf-menu li:hover > .sub-menu,
ul.bf-menu li:focus-within > .sub-menu { display: block; }
ul.bf-menu .sub-menu li a {
  display: flex; align-items: center; gap: 6px;
  color: #e8e8e8 !important;
  padding: 8px 15px; font-size: .9em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .1s, color .1s;
}
ul.bf-menu .sub-menu li a:hover {
  color: #e67e22 !important;
  background: rgba(255,255,255,.09);
}
#bf-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff; padding: 8px 16px; font-size: 1em;
  cursor: pointer; margin: 6px 10px; border-radius: 3px;
}

/* ── CONTENT: flex-grow → füllt immer den Rest der Seite ────────────── */
#bf-content {
  background: #fff;
  flex: 1 0 auto;   /* ← KEY: wächst, füllt immer bis zum Footer */
  position: relative;
  z-index: 1;
}

.page-header { margin: 0; padding: 0; }
.entry-title {
  color: #1a3a16; margin: 0;
  padding: 18px 28px 10px;
  font-size: 1.4em;
  border-bottom: 2px solid #e8f0e8;
}
main#content, .site-main { padding: 22px 28px; }

/* ── TYPOGRAFIE ─────────────────────────────────────────────────────── */
h1,h2,h3,h4 { color: #1a3a16; }
a { color: #2d5a27; }
a:hover { color: #e67e22; }

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: #2d5a27 !important; color: #fff !important;
  border-color: #2d5a27 !important; border-radius: 4px !important;
  font-weight: 600 !important; transition: all .2s;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: #e67e22 !important; border-color: #e67e22 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  color: #1a3a16 !important; border-color: #1a3a16 !important;
  border-radius: 4px !important; background: transparent !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #1a3a16 !important; color: #fff !important;
}

/* ── TABELLEN ───────────────────────────────────────────────────────── */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td,.wp-block-table th { padding: 8px 12px; border: 1px solid #ddd; }
.wp-block-table thead th { background: #1a3a16; color: #fff; }
.wp-block-table tbody tr:nth-child(even) { background: #f5f5f0; }

/* ── COLUMNS ────────────────────────────────────────────────────────── */
.wp-block-column {
  padding: 1.1em; background: #f9f9f7;
  border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

/* ── VIDEO ──────────────────────────────────────────────────────────── */
.bf-video-wrap {
  position: relative; padding-bottom: 56.25%;
  height: 0; overflow: hidden; background: #000;
  border: 2px solid #1a3a16; margin-bottom: 1.2em;
}
.bf-video-wrap video,.bf-video-wrap iframe {
  position: absolute; top:0; left:0; width:100%; height:100%;
}
.bf-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 20px; margin: 20px 0;
}


/* ── FOOTER fix ─────────────────────────────────────────────────────── */
#bf-footer {
  background: rgba(16,33,10,.97);
  color: #fff;
  padding: 0 24px;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: 58px;          /* etwas größer für Social Icons */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body { padding-bottom: 58px; }
#bf-page { min-height: calc(100vh - 58px); }

/* Linke Seite: Nav-Links */
#bf-footer-left {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
}
ul.bf-footer-menu {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
ul.bf-footer-menu li a {
  color: rgba(255,255,255,.7) !important;
  padding: 0 10px; font-size: .82em; text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.2);
  transition: color .15s;
}
ul.bf-footer-menu li:last-child a { border-right: none; }
ul.bf-footer-menu li a:hover { color: #fff !important; }

/* Mitte: Copyright */
.bf-copyright {
  color: rgba(255,255,255,.45);
  font-size: .75em;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
}
.bf-copyright a { color: rgba(255,255,255,.6) !important; text-decoration: none; }
.bf-copyright a:hover { color: #fff !important; }

/* Rechte Seite: Social Icons */
#bf-footer-social {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
#bf-footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 6px;
  font-size: 1.25em;
  text-decoration: none;
  transition: transform .15s, opacity .15s;
  opacity: .9;
}
#bf-footer-social a:hover { transform: scale(1.12); opacity: 1; }
#bf-footer-social .bf-fb {
  background: #1877f2;
  color: #fff !important;
}
#bf-footer-social .bf-ig {
  background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color: #fff !important;
}
#bf-footer-social .bf-social-label {
  font-size: .72em; color: rgba(255,255,255,.55);
  white-space: nowrap; margin-right: 4px;
}

@media(max-width:600px){
  .bf-copyright { display: none; }
  #bf-footer { padding: 0 12px; }
}

/* Hello Elementor Standard ausblenden */
.site-header,.site-footer { display: none !important; }


/* ── RESPONSIVE ─────────────────────────────────────────────────────── */

/* Desktop: nichts ändern */

@media(max-width:760px){

  /* Mobil-Header: Logo + Schriftzug nebeneinander, Adressblock weg */
  #bf-header-inner {
    flex-direction: row;      /* nebeneinander */
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }

  #bf-logo { flex: 0 0 auto; }
  #bf-logo-img {
    max-height: 78px;         /* kleines Logo mobil +30% */
  }

  #bf-branding {
    flex: 1 1 auto;
    padding-left: 6px;
    min-width: 0;
  }
  #bf-logoschrift {
    max-height: 65px;         /* Schriftzug neben Logo +30% */
    width: auto;
    max-width: 100%;
  }

  /* Adressblock auf Mobil ausblenden */
  #bf-contact { display: none; }

  /* Menü */
  ul.bf-menu { display: none; }
  ul.bf-menu.mob-open {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  ul.bf-menu.mob-open .sub-menu { position: static; display: none; }
  ul.bf-menu.mob-open li.sub-open > .sub-menu { display: block; }
  #bf-menu-toggle { display: block; }

  /* Content */
  main#content, .site-main { padding: 15px; }

  /* Video-Grid */
  .bf-video-grid { grid-template-columns: 1fr; }
}

@media(max-width:440px){
  #bf-logo-img    { max-height: 62px; }
  #bf-logoschrift { max-height: 50px; }
}

@media(max-width:600px){
  .bf-copyright { display: none; }
  #bf-footer     { padding: 0 12px; }
}

/* ── SCHATTEN & RAHMEN ENTFERNEN ─────────────────────────────────────────
   Das Parent-Theme setzt auf .site-main: max-width:1000px + box-shadow.
   Das erzeugt einen sichtbaren Rahmen INNERHALB von #bf-content.
   Wir setzen .site-main auf volle Breite ohne Schatten/Rahmen.       */

.site-main {
  max-width:    100% !important;
  width:        100% !important;
  margin:       0    !important;
  padding:      0    !important;
  box-shadow:   none !important;
  border:       none !important;
  background:   transparent !important;
  min-height:   0  !important;
}

/* Alle anderen möglichen Wrapper ebenfalls */
main#content,
.page-content,
.entry-content,
.hentry,
.type-page,
.type-post {
  box-shadow: none !important;
  border:     none !important;
  max-width:  100% !important;
}

/* Content-Padding wieder hinzufügen (wurde oben auf 0 gesetzt) */
main#content > *,
.site-main > .page-header,
.site-main > .page-content,
.entry-content {
  padding-left:  28px;
  padding-right: 28px;
}
main#content .entry-title,
.site-main .entry-title {
  padding: 18px 28px 10px;
  border-bottom: 2px solid #e8f0e8;
}

/* Columns: kein permanenter Schatten */
.wp-block-column {
  box-shadow:    none !important;
  border:        none !important;
  background:    #f9f9f7;
  border-radius: 5px;
}
.wp-block-column:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}