/* =====================================================================
   BERO V34 – finale Vereinheitlichung
   Referenz: Startseite. Wird als LETZTES Stylesheet in jeder Seite geladen
   und überschreibt bewusst die älteren Schichten (V19–V33).
   Gültig für Desktop, Tablet und Handy.
   ===================================================================== */

:root {
  /* Weiße Overlap-Box (Startseite: .company-intro__panel) */
  --b34-ov-left: clamp(4.5rem, 6.6vw, 6.6rem);
  --b34-ov-width: min(1080px, calc(100% - 7.5rem));
  /* Kontakt-Box, die in den vorherigen Abschnitt hineinragt */
  --b34-cta-depth: clamp(4rem, 8.4vw, 7.5rem);
  --b34-cta-gap: clamp(3rem, 4.5vw, 4rem);
}

/* ---------------------------------------------------------------------
   1) HERO – Unterseiten: Textkante = Kante der weißen Box (wie Startseite)
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html:root body.bero-v34:not(.bero-home) .demo .demo__content {
    justify-content: flex-start !important;
    padding-left: calc(var(--b34-ov-left) - var(--container-px)) !important;
    padding-right: 1.5rem !important;
  }
  html:root body.bero-v34:not(.bero-home) .demo .demo__stack {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: flex-start !important;
    transform: none !important;
  }
  html:root body.bero-v34:not(.bero-home) .demo .demo__card {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:root body.bero-v34:not(.bero-home) .demo .demo__copy {
    width: 100% !important;
    max-width: none !important;
  }

  /* Kontakt-Hero: gleiche Höhe wie Startseite und alle anderen Seiten */
  html:root body.bero-v34 .contact-page-hero,
  html:root body.bero-v34 .contact-page-hero .demo__grid,
  html:root body.bero-v34 .contact-page-hero .demo__content,
  html:root body.bero-v34 .contact-page-hero .demo__media,
  html:root body.bero-v34 .contact-page-hero #heroImage {
    height: min(590px, 46vw) !important;
    min-height: 0 !important;
  }
  html:root body.bero-v34 .contact-page-hero .demo__grid {
    grid-template-rows: min(590px, 46vw) !important;
  }
}

/* Hero-Punkte (Slider) auf Tablet/Handy: unten mittig in der Karte,
   nicht mehr neben/über dem Text */
@media (max-width: 1023px) {
  html:root body.bero-v34:not(.bero-home) .demo .demo__stack {
    position: relative !important;
  }
  html:root body.bero-v34:not(.bero-home) .demo .demo__stack:has(.demo__dots) .demo__card {
    padding-bottom: 3.6rem !important;
  }
  html:root body.bero-v34:not(.bero-home) .demo .demo__dots {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 1.35rem !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: 14px !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 9px !important;
  }
}

/* ---------------------------------------------------------------------
   2) WEISSE OVERLAP-BOX unter dem Hero – gleiche Breite/Position wie Start
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html:root body.bero-v34:not(.bero-home) .local-overlap-card {
    width: var(--b34-ov-width) !important;
    max-width: none !important;
    margin-left: var(--b34-ov-left) !important;
    margin-right: auto !important;
  }
}
@media (max-width: 1023px) {
  html:root body.bero-v34:not(.bero-home) .local-overlap-card,
  html:root body.bero-v34:not(.bero-home) .hub-overlap,
  html:root body.bero-v34:not(.bero-home) .contact-data-card {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 767px) {
  html:root body.bero-v34:not(.bero-home) .local-overlap-card,
  html:root body.bero-v34:not(.bero-home) .hub-overlap,
  html:root body.bero-v34:not(.bero-home) .contact-data-card {
    width: calc(100% - 28px) !important;
  }
}

/* ---------------------------------------------------------------------
   3) BILDSTRECKE-KOPF (z. B. „Menschen, Baustelle und Ergebnis …“,
      „Kabelwege, Verteilungen und Montage …“): mittig, untereinander
   --------------------------------------------------------------------- */
html:root body.bero-v34 .local-visual-story__head {
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem) !important;
  padding: 0 !important;
  text-align: center !important;
}
html:root body.bero-v34 .local-visual-story__head h2 {
  max-width: none !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-wrap: balance;
  hyphens: manual;
}
html:root body.bero-v34 .local-visual-story__head h2 > span {
  display: inline !important;
}
html:root body.bero-v34 .local-visual-story__head h2 > span + span::before {
  content: " ";
}
html:root body.bero-v34 .local-visual-story__head p {
  max-width: 640px !important;
  margin: clamp(1.1rem, 1.8vw, 1.5rem) auto 0 !important;
  justify-self: center !important;
  text-align: center !important;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  html:root body.bero-v34 .local-visual-story__head h2 > span {
    display: block !important;
  }
  html:root body.bero-v34 .local-visual-story__head h2 > span + span::before {
    content: none;
  }
}

/* ---------------------------------------------------------------------
   4) PORTRÄT (Berkay Kaya): Stirn/Haare werden nie mehr abgeschnitten.
      Ausschnitt oben verankert, Bildstreifen mobil im Hochformat.
   --------------------------------------------------------------------- */
html:root body.bero-v34.page-about .local-visual-story__figure--large img {
  object-position: center top !important;
}
html:root body.bero-v34 .local-visual-story__figure {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
}
@media (max-width: 899px) {
  html:root body.bero-v34 .local-visual-story__figure--large {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 4.7 !important;
  }
}

/* ---------------------------------------------------------------------
   5) DUNKLER EINSATZGEBIET-ABSCHNITT + KONTAKT-BOX
      Die Box ragt eine feste Tiefe hinein; der Abschnitt darüber bekommt
      genau so viel zusätzlichen Platz, dass Button und Links frei bleiben.
   --------------------------------------------------------------------- */
html:root body.bero-v34:not(.bero-home) .contact-overlap-section__box {
  width: min(860px, 100%) !important;
  max-width: 100% !important;
  margin: 0 auto calc(-1 * var(--b34-cta-depth)) !important;
  transform: translateY(calc(-1 * var(--b34-cta-depth))) !important;
}
html:root body.bero-v34:not(.bero-home) .local-area-section,
html:root body.bero-v34:not(.bero-home) main > section:has(+ .contact-overlap-section) {
  padding-bottom: calc(var(--b34-cta-depth) + var(--b34-cta-gap)) !important;
}
html:root body.bero-v34:not(.bero-home) .local-area-section .local-area-section__cta {
  margin-bottom: 0 !important;
}
@media (max-width: 899px) {
  html:root body.bero-v34:not(.bero-home) .contact-overlap-section__box {
    width: calc(100% - 28px) !important;
  }
  html:root body.bero-v34:not(.bero-home) .contact-overlap-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   6) Sicherheitsnetz gegen seitliches Überlaufen (Handy)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  html:root body.bero-v34 main,
  html:root body.bero-v34 main > section {
    max-width: 100%;
  }
  html:root body.bero-v34 .local-visual-story__grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------
   7) HEADER – rein per CSS positioniert (kein Springen beim Seitenwechsel)
      Referenzen-Kante = rechte Kante der weißen Box (wie Startseite).
      Aktiv = Gold, ohne Unterstrich. „Unternehmen“ ist ein Dropdown.
   --------------------------------------------------------------------- */
:root {
  --b34-gold: #a97827;
  --b34-btn-w: 107px;
  --b34-btn-gap: 1.6rem;
}
@media (min-width: 1024px) {
  html:root body.bero-v34 header.nav {
    overflow-x: clip !important;
  }
  html:root body.bero-v34 header.nav .nav__links {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: max(
      calc(100% - (var(--b34-ov-left) + var(--b34-ov-width))),
      calc(var(--b34-btn-w) + var(--b34-btn-gap) + var(--container-px))
    ) !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(1.1rem, 2vw, 2rem) !important;
  }
  html:root body.bero-v34 header.nav .nav__item--contact {
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: var(--b34-btn-gap) !important;
  }
  html:root body.bero-v34 header.nav .nav__item--contact .btn-outline {
    min-width: var(--b34-btn-w);
    justify-content: center;
  }
}

/* Links + Dropdown-Auslöser: gleiche Typografie, Aktiv/Hover = Gold */
html:root body.bero-v34 .nav__links--simple .nav__link,
html:root body.bero-v34 .nav__links--simple .nav__trigger {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  min-height: 42px !important;
  padding: 0 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transition: color .2s cubic-bezier(.4, 0, .2, 1) !important;
}
html:root body.bero-v34 .nav__links--simple .nav__link::after,
html:root body.bero-v34 .nav__links--simple .nav__trigger::after {
  content: none !important;
  display: none !important;
}
html:root body.bero-v34 .nav__links--simple .nav__link:hover,
html:root body.bero-v34 .nav__links--simple .nav__trigger:hover,
html:root body.bero-v34 .nav__links--simple .nav__item--has-dropdown.is-open .nav__trigger,
html:root body.bero-v34 .nav__links--simple .nav__link.is-active,
html:root body.bero-v34 .nav__links--simple .nav__trigger.is-active {
  color: var(--b34-gold) !important;
  opacity: 1 !important;
}
html:root body.bero-v34 .nav__item--has-dropdown {
  position: relative !important;
}
html:root body.bero-v34 .nav__dropdown a {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: .8rem !important;
  color: var(--c-text);
}
html:root body.bero-v34 .nav__dropdown a:hover,
html:root body.bero-v34 .nav__dropdown a.is-active {
  color: var(--b34-gold) !important;
  background: transparent !important;
}
html:root body.bero-v34 .nav__item--has-dropdown.is-open .nav__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
}
html:root body.bero-v34 .nav__item--has-dropdown.is-open .nav__chevron {
  transform: rotate(180deg);
}

/* Mobiles Menü: aktiv = Gold, keine Linien-Effekte */
html:root body.bero-v34 .mnav__links--simple .mnav__direct.is-active,
html:root body.bero-v34 .mnav__links--simple .mnav-accordion__panel-inner a.is-active,
html:root body.bero-v34 .mnav-accordion.is-open .mnav-accordion__trigger {
  color: var(--b34-gold) !important;
}
html:root body.bero-v34 .mnav__links--simple .mnav__direct,
html:root body.bero-v34 .mnav__links--simple .mnav-accordion {
  border-bottom: 1px solid rgba(23, 21, 19, .085) !important;
}
html:root body.bero-v34 .mnav__links--simple .mnav-accordion:first-child {
  border-top: 1px solid rgba(23, 21, 19, .085) !important;
}

/* ---------------------------------------------------------------------
   8) FOOTER – alle Einsatzorte
   --------------------------------------------------------------------- */
html:root body.bero-v34 .site-footer__list--split {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0;
}
html:root body.bero-v34 .site-footer__list--split .site-footer__list-all {
  grid-column: 1 / -1;
  margin-bottom: .55rem;
}
@media (min-width: 900px) {
  html:root body.bero-v34 .site-footer__columns {
    grid-template-columns: 1.1fr .85fr 1.5fr .85fr !important;
  }
}

/* ---------------------------------------------------------------------
   9) SEITENFAMILIEN – gleiche Bausteine, unterschiedliche Anordnung
      (Orte / Leistungen). Keine neuen Elemente, nur andere Raster.
   --------------------------------------------------------------------- */
/* Leistungsbereich: Überschrift links (fest), Karten rechts */
@media (min-width: 1000px) {
  html:root body.bero-v34.b34-d-split .local-detail-section__inner {
    display: grid !important;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    column-gap: clamp(2.5rem, 5vw, 5rem) !important;
    align-items: start !important;
  }
  html:root body.bero-v34.b34-d-split .local-detail-section__intro {
    display: block !important;
    position: sticky;
    top: 110px;
    margin: 0 !important;
    max-width: none !important;
  }
  html:root body.bero-v34.b34-d-split .local-detail-section__intro .local-section-title {
    max-width: none !important;
  }
  html:root body.bero-v34.b34-d-split .local-detail-section__intro .local-section-lead {
    max-width: 34rem !important;
    margin: 1.2rem 0 0 !important;
  }
  html:root body.bero-v34.b34-d-split .local-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 0 !important;
  }
}
/* Leistungsbereich: vier Spalten nebeneinander */
@media (min-width: 1100px) {
  html:root body.bero-v34.b34-d-cols .local-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Bildstrecke: große Karte rechts */
@media (min-width: 900px) {
  html:root body.bero-v34.b34-vs-right .local-visual-story__grid {
    grid-template-columns: minmax(270px, .72fr) minmax(0, 1.52fr) !important;
  }
  html:root body.bero-v34.b34-vs-right .local-visual-story__figure--large {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
  html:root body.bero-v34.b34-vs-right .local-visual-story__figure:not(.local-visual-story__figure--large) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  /* Bildstrecke: drei gleich große Bilder in einer Reihe */
  html:root body.bero-v34.b34-vs-row .local-visual-story__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }
  html:root body.bero-v34.b34-vs-row .local-visual-story__figure,
  html:root body.bero-v34.b34-vs-row .local-visual-story__figure--large {
    grid-column: auto !important;
    grid-row: auto !important;
    height: clamp(340px, 36vw, 500px) !important;
    min-height: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   10) IMPRESSUM / DATENSCHUTZERKLÄRUNG – gleiche Kanten wie alle Seiten
       (Text und Karte beginnen an der linken Kante der weißen Box)
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html:root body.bero-v34.page-legal .legal-hero__inner,
  html:root body.bero-v34.page-legal .legal-main__inner {
    width: var(--b34-ov-width) !important;
    max-width: none !important;
    margin-left: var(--b34-ov-left) !important;
    margin-right: auto !important;
  }
}
@media (max-width: 1023px) {
  html:root body.bero-v34.page-legal .legal-hero__inner,
  html:root body.bero-v34.page-legal .legal-main__inner {
    width: calc(100% - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 767px) {
  html:root body.bero-v34.page-legal .legal-hero__inner,
  html:root body.bero-v34.page-legal .legal-main__inner {
    width: calc(100% - 28px) !important;
  }
}
html:root body.bero-v34.page-legal .legal-card {
  width: 100% !important;
  padding: clamp(2.3rem, 3.8vw, 3rem) clamp(1.35rem, 4.4vw, 4.2rem) clamp(2.3rem, 3.8vw, 3.2rem) !important;
}
html:root body.bero-v34.page-legal .legal-grid {
  grid-template-columns: minmax(200px, .62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
html:root body.bero-v34.page-legal .legal-hero h1 {
  hyphens: manual;
  overflow-wrap: break-word;
}
html:root body.bero-v34.page-legal .legal-block p + p,
html:root body.bero-v34.page-legal .legal-block address + p {
  margin-top: .75rem;
}
@media (max-width: 1023px) {
  html:root body.bero-v34.page-legal .legal-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  html:root body.bero-v34.page-legal .legal-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }
}

/* ---------------------------------------------------------------------
   11) FOOTER – „Alle Einsatzorte im Überblick“ wie der Firmenname
   --------------------------------------------------------------------- */
html:root body.bero-v34 .site-footer__list--split .site-footer__list-all a {
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: rgba(23, 21, 19, .8) !important;
}
html:root body.bero-v34 .site-footer__list--split .site-footer__list-all a:hover {
  color: var(--b34-gold) !important;
}

/* ---------------------------------------------------------------------
   12) PORTRÄT ÜBER UNS – Person etwas höher im Bild, Kopf bleibt frei.
       Bild ragt 6 % nach oben über die Karte hinaus (geclippt); die
       Kopfhöhe im Foto (≈14 %) bleibt dadurch sicher sichtbar.
   --------------------------------------------------------------------- */
html:root body.bero-v34.page-about .local-visual-story__figure--large {
  overflow: hidden !important;
}
html:root body.bero-v34.page-about .local-visual-story__figure--large img {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 106% !important;
  min-height: 0 !important;
  object-position: center top !important;
}

/* ---------------------------------------------------------------------
   13) HANDY-MENÜ – Inhalt oben statt mittig
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html:root body.bero-v34 .mnav__panel {
    padding-top: 4.4rem !important;
  }
  html:root body.bero-v34 .mnav__links {
    margin: 0 0 auto !important;
  }
}