/*
 * BSH Hupperich – eigene Styles des Child-Themes, geladen nach style.css.
 *
 * 1. Bestand: übernommen aus dem Plugin "Custom Codes" am 2026-11-02
 *    (Originale in docs/archiv/custom-codes/ im Repo), Reihenfolge unverändert
 * 2. Hauptnavigation: ersetzt Max Mega Menu, gleiche Werte
 * 3. WhatsApp-Knopf mit Hinweis vor dem Öffnen: ersetzt Click to Chat
 */

/* =========================================================
   1. Bestand (vorher 63-scss-desktop.scss)
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  background-color: #292D30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer {
  font-size: 18px !important;
}
footer .wp-block-column p {
  padding-bottom: 10px !important;
}
footer .wp-block-navigation__container {
  display: block !important;
}
footer nav ul {
  line-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
footer nav ul li, footer nav ul li a {
  display: block !important;
  line-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 130% !important;
}

/* Mobile Anpassungen */
@media (max-width: 1195px) {
  .header-top-bar {
    display: none !important;
  }
  .site-header {
    position: fixed;
    background-color: #292D30;
  }
  .site-header.scrolled {
    box-shadow: none;
  }
}

/* ------ wcover ------ */
@media (max-width: 781px) {
  .wcover {
    padding-inline: 30px;
    min-height: auto !important;
  }
  /* Header seit 2026-11-02 104 statt 114 px hoch: 10 px weniger, gleicher Abstand zur Überschrift */
  .wp-block-columns.content-hero-section {
    padding-top: 140px !important;
  }
  .column-zentrieren {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ------- Footer-Nav -------- */
[aria-label="footer-nav"] {
  gap: 20px;
}
.footer-nav-punkt > .wp-block-navigation-item__content:hover,
.footer-nav-punkt.current-menu-item > .wp-block-navigation-item__content,
.footer-nav-punkt.current_page_item > .wp-block-navigation-item__content {
  color: #FAFAFA;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 780px) {
  /* gesamter Footer */
  .wp-block-template-part .footer {
    text-align: center;
  }
  /* Flex-Container untereinander statt nebeneinander */
  .wp-block-template-part .footer .is-layout-flex {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }
  /* Navigation untereinander */
  .footer-links .wp-block-navigation__container {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  /* Links zentrieren */
  .footer-links li {
    text-align: center;
  }
  .footer-social img {
    width: 30px;
    height: auto;
  }
  /* Logo */
  .logo-footer img {
    max-width: 130px;
  }
  .footer-info {
    gap: 8px !important;
  }
}

/* ------- Kontaktformular: Projektanfrage ---------- */
.wpcf7 input, .wpcf7 textarea, .wpcf7 button {
  font-family: inherit;
  font-size: inherit;
}
form.wpcf7-form {
  box-shadow: none;
  background: none;
  border: 1px solid #BFBFBF;
}
.wpcf7-submit {
  background-color: #F08A3A !important;
}
.wpcf7-acceptance a {
  color: #3A4C5A !important;
}
.wpcf7 label {
  font-family: "Manrope", sans-serif;
  font-weight: 600 !important;
  color: #292D30 !important;
}
.form-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-header h5 {
  margin: 0;
}
.form-header img, .form-header svg {
  width: 2.5em;
  height: 2.5em;
}

/* ------- Buttons -------- */
.CTA-primary a:hover {
  background-color: #F08A3A;
  border-color: #F08A3A;
}
@media (max-width: 781px) {
  .CTA-primary, .is-style-outline {
    width: 100%;
  }
  .CTA-primary .wp-block-button__link, .is-style-outline .wp-block-button__link {
    width: 100%;
    display: block;
    text-align: center;
  }
}

/* ------ Logo --------- */
@media (max-width: 780px) {
  .logo {
    max-width: 200px;
  }
}

/* ----------- Gütesiegel / Inhalte -------- */
.book-box {
  border-radius: 8px;
  max-width: 228px;
  margin-top: -90px; /* zieht die Box nach oben in die Hero-Section */
}

/* ------ CTA -------- */
.wp-block-button.is-style-outline a.wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ---------------------------------------------------------
   Bestand (vorher 695-css-desktop.css)
   --------------------------------------------------------- */

/* Vergrößern beim Darüberfahren, Klasse im Editor vergeben */
/* slop-ok: hover-zoom Bestand des Kunden, beim Umzug unverändert übernommen */
.hover-zoom {
  transition: transform 0.3s ease;
  cursor: pointer;
}
.hover-zoom:hover {
  transform: scale(1.05);
}

html {
  scroll-behavior: smooth;
  /* Sprungziele (#anfrage, #leistungen, #whatsapp) und Fokus nicht unter dem festen Header (WCAG 2.4.11) */
  scroll-padding-top: 120px; /* Header 104 px hoch, plus Luft */
}

/* Auf dem Handy ausblenden (unter 782 px) */
@media (max-width: 781px) {
  .hide-on-mobile {
    display: none !important;
  }
  .small-mobile-gallery {
    max-width: 300px !important;
    margin: 0 auto !important;
  }
}

/* Fokusrahmen nur bei Mausklick ausblenden, bei Tastatur bleibt er */
*:focus:not(:focus-visible) {
  outline: none !important;
}


/* =========================================================
   2. Hauptnavigation (core/navigation, Klasse .hauptmenue)
   Werte wie vorher in Max Mega Menu. Umschaltpunkt zum
   Handy-Menü: 1195 px (WordPress selbst schaltet bei 600 px).
   ========================================================= */

.hauptmenue {
  --nav-hell: #fafafa;
  --nav-dunkel: #292d30;
  --nav-orange: #ec6906;
  font-size: 18px;
  line-height: 40px;
}

/* --- Desktop: Leiste ab 1196 px --- */
@media (min-width: 1196px) {
  .site-header .hauptmenue .wp-block-navigation__container {
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .site-header .hauptmenue .wp-block-navigation-item__content {
    color: var(--nav-hell);
    padding: 0 10px;
    line-height: 40px;
    text-decoration: none;
    white-space: nowrap;
  }
  .site-header .hauptmenue .wp-block-navigation-item__content:hover,
  .site-header .hauptmenue .wp-block-navigation-item__content:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
  /* Pfeil neben "Leistungen" */
  .site-header .hauptmenue .wp-block-navigation__submenu-icon {
    color: var(--nav-hell);
    margin-left: -4px;
  }

  /* Untermenü */
  .site-header .hauptmenue .wp-block-navigation__submenu-container {
    background-color: var(--nav-dunkel);
    color: var(--nav-hell);
    border: 0;
    padding: 0;
    min-width: 250px !important;
    top: 100%;
    left: 0;
    right: auto;
    gap: 0;
  }
  .site-header .hauptmenue .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin: 0;
  }
  /* Kern richtet das Untermenü bei rechtsbündiger Leiste rechts aus; wie vorher unter dem Punkt */
  .site-header .hauptmenue.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
    left: 0;
    right: auto;
  }
  /* so genau wie die Kernregel (.has-child … > .wp-block-navigation-item > …), sonst gilt deren .5em 1em */
  .site-header .hauptmenue .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: block;
    font-size: 16px;
    line-height: 35px;
    padding: 5px 30px;
    color: var(--nav-hell);
  }

  /* Telefon */
  .site-header .hauptmenue .nav-twilight > .wp-block-navigation-item__content {
    font-weight: 700;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 0 15px 0 42px;
    background: url("../img/icon-telefon.svg") no-repeat left 13px center;
  }
  /* Projekt anfragen */
  /* 19 px fett zählt als großer Text, damit reicht das Orange für 3 : 1 (WCAG 1.4.3); 18 px reichte nicht */
  .site-header .hauptmenue .nav-highlight > .wp-block-navigation-item__content {
    font-size: 19px;
    font-weight: 700;
    background-color: var(--nav-orange);
    border-radius: 10px;
    padding: 0 24px;
  }
  .site-header .hauptmenue .nav-twilight > .wp-block-navigation-item__content:hover,
  .site-header .hauptmenue .nav-highlight > .wp-block-navigation-item__content:hover {
    text-decoration: none;
  }
  .site-header .hauptmenue .nav-highlight > .wp-block-navigation-item__content:hover {
    background-color: #d35f05;
  }
}

/* --- Zwischen 600 und 1195 px: Handy-Menü statt Leiste --- */
@media (min-width: 600px) and (max-width: 1195px) {
  .hauptmenue .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .hauptmenue .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* --- Handy-Menü: Knopf und geöffnetes Menü bis 1195 px --- */
.hauptmenue .wp-block-navigation__responsive-container-open,
.hauptmenue .wp-block-navigation__responsive-container-close {
  color: #ddd;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}
.hauptmenue .wp-block-navigation__responsive-container-open svg,
.hauptmenue .wp-block-navigation__responsive-container-close svg {
  width: 40px;
  height: 40px;
}
.hauptmenue .wp-block-navigation__responsive-container-close {
  display: flex;
}

/* :not(.disable-default-overlay) wie im Kern, sonst gewinnt dessen weißer Hintergrund */
.site-header .hauptmenue .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background-color: var(--nav-dunkel);
  color: var(--nav-hell);
  padding: 30px 15px;
}
.site-header .hauptmenue .is-menu-open .wp-block-navigation__responsive-container-content {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-justify: flex-start;
  padding-top: 64px;
  align-items: stretch;
}
.site-header .hauptmenue .is-menu-open .wp-block-navigation__container {
  gap: 0;
  align-items: stretch;
  width: 100%;
}
/* Die innere Liste trägt items-justified-right und richtet sonst jeden Eintrag rechts aus */
.site-header .hauptmenue .is-menu-open .wp-block-navigation__container,
.site-header .hauptmenue .is-menu-open .wp-block-navigation-item {
  --navigation-layout-justification-setting: stretch;
  --navigation-layout-justify: flex-start;
}
.site-header .hauptmenue .is-menu-open .wp-block-navigation-item {
  width: 100%;
  align-items: stretch;
}
.site-header .hauptmenue .is-menu-open .wp-block-navigation-item__content {
  display: block;
  box-sizing: border-box;
  width: 100%;
  font-size: 18px;
  line-height: 50px;
  padding: 0 10px;
  color: var(--nav-hell);
  text-decoration: none;
}
.site-header .hauptmenue .is-menu-open .wp-block-navigation-item__content:hover,
.site-header .hauptmenue .is-menu-open .wp-block-navigation-item__content:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* Untermenü im Handy-Menü: eingerückt, immer offen */
.site-header .hauptmenue .is-menu-open .wp-block-navigation__submenu-container {
  background: transparent;
  border: 0;
  width: 100%;
  margin: 0;
  padding: 0 0 0 20px !important;
  gap: 0 !important;
  align-items: stretch;
}
.site-header .hauptmenue .is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-size: 18px;
  line-height: 45px;
  padding: 0 10px;
}
.site-header .hauptmenue .is-menu-open .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
  margin: 0;
}
/* Telefon und Anfrage als volle Flächen */
.site-header .hauptmenue .is-menu-open .nav-twilight,
.site-header .hauptmenue .is-menu-open .nav-highlight {
  margin-top: 10px;
}
.site-header .hauptmenue .is-menu-open .nav-twilight > .wp-block-navigation-item__content {
  font-weight: 700;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 0 24px 0 50px;
  background: url("../img/icon-telefon.svg") no-repeat left 20px center;
  white-space: nowrap;
}
.site-header .hauptmenue .is-menu-open .nav-highlight > .wp-block-navigation-item__content {
  font-size: 19px;
  font-weight: 700;
  background-color: var(--nav-orange);
  border-radius: 10px;
  padding: 0 24px;
  white-space: nowrap;
}
.site-header .hauptmenue .is-menu-open .nav-twilight > .wp-block-navigation-item__content:hover,
.site-header .hauptmenue .is-menu-open .nav-highlight > .wp-block-navigation-item__content:hover {
  text-decoration: none;
}


/* Complianz: leerer Link "Cookie-Erklärung" (keine Seite hinterlegt) hat keinen Namen, ausblenden */
.cmplz-cookiebanner a.cookie-statement[data-relative_url=""]:empty {
  display: none;
}


/* =========================================================
   3. WhatsApp-Knopf und Hinweis vor dem Öffnen
   ========================================================= */

.wa-knopf {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  line-height: 0;
}
/* Solange das Handy-Menü offen ist, liegt der Knopf sonst darüber (Header hat eigenen Stapel) */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wa-knopf {
  display: none;
}
.wa-knopf svg {
  display: block;
  width: 50px;
  height: 50px;
}
.wa-knopf:focus-visible {
  outline: 3px solid #292d30;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* slop-ok: modal Die Information zur Datenübermittlung muss vor dem Öffnen von WhatsApp stehen (DSGVO), darum Unterbrechung */
.wa-dialog {
  box-sizing: border-box;
  width: min(34rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  margin: auto;
  padding: 28px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #292d30;
  font-size: 18px;
  line-height: 1.6;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.wa-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.wa-dialog h2 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.25;
  color: #292d30;
}
.wa-dialog p {
  margin: 0 0 12px;
}
.wa-dialog a {
  color: #292d30;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wa-dialog__alternative {
  font-size: 16px;
}
.wa-dialog__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.wa-dialog .wa-dialog__weiter,
.wa-dialog .wa-dialog__abbrechen {
  display: inline-block;
  min-height: 48px;
  padding: 0 1.2em;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  line-height: 46px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.wa-dialog .wa-dialog__weiter {
  background: #292d30;
  border: 1px solid #292d30;
  color: #fff;
}
.wa-dialog .wa-dialog__weiter:hover {
  background: #000;
}
.wa-dialog .wa-dialog__abbrechen {
  background: #fff;
  border: 1px solid #292d30;
  color: #292d30;
}
.wa-dialog .wa-dialog__abbrechen:hover {
  background: #f1f1f1;
}
.wa-dialog .wa-dialog__weiter:focus-visible,
.wa-dialog .wa-dialog__abbrechen:focus-visible,
.wa-dialog a:focus-visible {
  outline: 3px solid #ec6906;
  outline-offset: 2px;
}


/* =========================================================
   4. Fotos bauen sich beim Scrollen von unten auf
   Ein Motiv für die ganze Seite: Kommt ein Arbeitsfoto ins Bild, wächst
   es einmal von unten nach oben auf, wie eine Wand. Die Klassen setzt
   assets/js/site.js; ohne JavaScript oder bei "Bewegung reduzieren"
   stehen die Bilder sofort da. Fotos, die beim Laden schon zu sehen
   sind, bleiben unverändert.
   Nicht: Hero, Logos, Siegel, skalierte Symbole (.is-resized).
   ========================================================= */

/* slop-ok: scroll-reveal Wunsch von Chris (2026-11-02); ein einziges Motiv mit Bezug zum Bau, nur an echten Arbeitsfotos, kein Fade-up auf Abschnitten */
@media (prefers-reduced-motion: no-preference) {
  .bsh-aufbau .bsh-aufbau-bild {
    transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .bsh-aufbau .bsh-aufbau-bild:not(.ist-aufgebaut) {
    clip-path: inset(100% 0 0 0);
  }
}
/* Beim Drucken nie verdeckt, auch wenn das Foto nie ins Bild gescrollt wurde */
@media print {
  .bsh-aufbau-bild {
    clip-path: none !important;
  }
}


/* =========================================================
   5. YouTube erst nach Klick (inc/youtube.php, site.js Abschnitt 4)
   Platzhalter in den Farben der Seite, kein Vorschaubild von Google.
   ========================================================= */

.wp-block-embed-youtube .wp-block-embed__wrapper {
  position: relative;
}
.yt-platzhalter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #292d30;
  color: #fafafa;
  text-align: left;
  overflow: auto;
}
/* Ohne Seitenverhältnis-Kasten (aspect-Klasse fehlt) trotzdem Platz geben */
.wp-block-embed-youtube:not(.wp-has-aspect-ratio) .yt-platzhalter {
  position: static;
  min-height: 260px;
}
.yt-platzhalter__inhalt {
  max-width: 34rem;
}
.yt-platzhalter__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.55;
}
.yt-platzhalter a {
  color: #fafafa;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yt-platzhalter__start {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.2em;
  border: 0;
  border-radius: 10px;
  background: #fafafa;
  color: #292d30;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.yt-platzhalter__start:hover {
  background: #fff;
}
.yt-platzhalter__start:focus-visible,
.yt-platzhalter a:focus-visible {
  outline: 3px solid #ec6906;
  outline-offset: 2px;
}
.yt-platzhalter__direkt {
  margin: 12px 0 0;
  font-size: 15px;
}
/* geladenes Video füllt den Kasten wie vorher der iframe von WordPress */
.wp-block-embed__wrapper .yt-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  /* Am Handy ist 16:9 zu niedrig für Text und Knopf: Kasten wächst mit */
  .wp-block-embed-youtube .wp-block-embed__wrapper:has(.yt-platzhalter)::before {
    padding-top: 0;
  }
  .wp-block-embed-youtube .yt-platzhalter {
    position: static;
  }
}


/* =========================================================
   6. Laufband (Galerie-Block mit Klasse bsh-karussell)
   Ersetzt MetaSlider. Ohne JavaScript ein wischbarer Streifen;
   site.js (Abschnitt 5) macht daraus ein gleichmäßig laufendes Band
   (Bilder plus Kopie, Verschiebung um genau eine Reihe) und setzt den
   Pause-Knopf darunter. Hält an beim Darüberfahren, außerhalb des
   Bildes und bei reduzierter Bewegung. Bilder tauscht BSH im Editor.
   ========================================================= */

/* ohne JavaScript: wischbarer Streifen */
.wp-block-gallery.has-nested-images.bsh-karussell {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wp-block-gallery.has-nested-images.bsh-karussell::-webkit-scrollbar {
  display: none;
}
.wp-block-gallery.has-nested-images.bsh-karussell figure.wp-block-image:not(#individual-image) {
  flex: 0 0 auto;
  width: min(400px, 80vw);
  margin: 0;
  aspect-ratio: 10 / 7;
}
.wp-block-gallery.has-nested-images.bsh-karussell figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mit JavaScript: laufendes Band */
.wp-block-gallery.has-nested-images.bsh-karussell.ist-band {
  display: block;
  overflow: hidden;
}
/* slop-ok: marquee Wunsch von Chris (2026-11-02), mit Pause-Knopf (WCAG 2.2.2), Stopp bei Hover und reduzierter Bewegung */
.bsh-karussell__band {
  display: flex;
  width: max-content;
  animation: bsh-band var(--band-dauer, 100s) linear infinite;
  will-change: transform;
}
/* Abstand als Rand rechts an jedem Bild, nicht als gap: dann ist eine Reihe genau die Hälfte des Bandes */
.wp-block-gallery.has-nested-images.bsh-karussell .bsh-karussell__band > figure.wp-block-image:not(#individual-image) {
  margin: 0 10px 0 0;
}
@keyframes bsh-band {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.bsh-karussell.ist-angehalten .bsh-karussell__band,
.bsh-karussell.ist-ausserhalb .bsh-karussell__band,
.bsh-karussell.ist-band:hover .bsh-karussell__band {
  animation-play-state: paused;
}

.bsh-karussell__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 16px 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e5e5e5;
  color: #292d30;
  cursor: pointer;
}
.bsh-karussell__pause:hover {
  background: #fff;
}
.bsh-karussell__pause:focus-visible {
  outline: 3px solid #ec6906;
  outline-offset: 2px;
}
.bsh-karussell__pause svg {
  width: 20px;
  height: 20px;
}