/* ============================================================
   nachbau.css
   Ergänzt webflow.css um die Zustände, die auf der Originalseite
   von Webflows Interactions-Engine (IX2) gesetzt wurden.
   webflow.css bleibt unverändert bis auf die Asset-Pfade.
   ============================================================ */

/* ---------- Stellen-Akkordeon ----------
   .botttom bringt aus dem Original nur `overflow: hidden` mit;
   die Höhe hat Webflow animiert. Hier über max-height. */
.botttom {
  max-height: 0;
  transition: max-height .45s ease;
}
.stellen-div.is-open > .botttom {
  max-height: 4000px;
}

/* Pfeil/Button-Beschriftung wechselt beim Öffnen */
.stellen-div .top .button::after {
  content: "";
}

/* ---------- Overlay-Menü ----------
   .nav-menu-4 steht per transform: translate(100%) rechts außerhalb. */
.nav-menu-4 {
  transition: transform .4s ease;
}
.nav-menu-4.is-open {
  transform: translate(0%);
}
body.menu-open {
  overflow: hidden;
}

/* Burger-Linien zum X (im Original zwei rotierende Balken) */
.d-117-line-wrapper-2 {
  transition: transform .3s ease;
}
.d-117-first-line-2,
.d-117-second-line-3 {
  transition: transform .3s ease;
}
.nav-menu-button-3.is-open .d-117-line-wrapper-2:first-child {
  transform: translate3d(0, 0, 0) rotate(45deg) !important;
}
.nav-menu-button-3.is-open .d-117-line-wrapper-2:last-child {
  transform: translate3d(0, 0, 0) rotate(-45deg) !important;
}
.nav-menu-button-3.is-open .d-117-first-line-2 {
  transform: translate3d(0, 0, 0) !important;
}

/* ---------- Scroll-Reveal ----------
   Im Original tragen 23 Elemente inline `opacity:0` und werden von
   IX2 mit Fade + Scale eingeblendet (gemessene Zwischenwerte an der
   Live-Seite: opacity 0.21 bei scale 0.80). */
.reveal {
  opacity: 0;
  transform: scale(.8);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}
.reveal.reveal-in {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .botttom,
  .nav-menu-4,
  .d-117-line-wrapper-2 {
    transition: none;
  }
}

/* ============================================================
   Gemeinsame Navbar (wie auf Startseite und /kanzlei)
   Eigener Namensraum, damit sich Webflow-Klassen und die Werte
   aus dem Tailwind-Build der anderen Seiten nicht überschneiden.
   Werte 1:1 aus dem Header der Startseite übernommen.
   ============================================================ */
.hw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hw-header__inner {
  width: 100%;
  max-width: 1312px;
  margin-inline: auto;
  padding-inline: 24px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 768px) {
  .hw-header__inner { padding-inline: 32px; }
}
.hw-header__logo { display: block; line-height: 0; flex: none; }
.hw-header__logo img { display: block; width: 244px; height: 42px; }

.hw-header__nav { display: none; align-items: center; gap: 32px; }
@media (min-width: 1024px) { .hw-header__nav { display: flex; } }
.hw-header__nav a {
  font-size: 15px;
  font-weight: 500;
  color: #34333c;
  text-decoration: none;
  transition: color .15s;
}
.hw-header__nav a:hover,
.hw-header__nav a.is-active { color: #f59b00; }

.hw-header__right { display: flex; align-items: center; gap: 8px; flex: none; }
.hw-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 6px;
  background: #f59b00;
  color: #34333c;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s;
}
.hw-header__cta:hover { background: #e08e00; }
.hw-header__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59b00;
}

/* Burger: Webflow-Positionierung im neuen Header neutralisieren.
   Startseite und /kanzlei haben unterhalb 1024 px gar keine Navigation —
   hier bleibt sie erhalten, damit auf dem Handy nichts wegfällt. */
.hw-header .nav-menu-button-3 {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  margin: 0;
  width: 44px;
  height: 44px;
  display: flex;
}
@media (min-width: 1024px) {
  .hw-header .nav-menu-button-3 { display: none; }
}

/* Unter 1024 px zeigt die Leiste nur Logo und Burger — der Bewerben-Button
   steht im Overlay. Sonst liefen Logo (244 px) und Button gemeinsam über die
   Breite hinaus, wie es auf Startseite und /kanzlei bis heute der Fall ist. */
@media (max-width: 1023px) {
  .hw-header__cta { display: none; }
}
@media (max-width: 479px) {
  .hw-header__logo img { width: auto; height: 34px; }
}

/* Der Burger ist jetzt ein echtes <button>, daher Browser-Grundstil entfernen */
.hw-header button.nav-menu-button-3 {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  align-items: center;
  justify-content: center;
}

/* Ausgangslage der inneren Linien: beide liegen außerhalb ihres
   overflow-hidden-Wrappers, damit die dunklen Balken sichtbar sind.
   Im Original setzte das Webflows Interactions-Engine per Inline-Style. */
.hw-header .d-117-first-line-2  { transform: translate3d(-100%, 0, 0); }
.hw-header .d-117-second-line-3 { transform: translate3d(100%, 0, 0); }

/* Der Hero reservierte mit padding-top:80px Platz für die alte, fixierte
   Webflow-Navbar. Der gemeinsame Header steht im Fluss, also entfällt das.
   position:relative ist dabei Pflicht: Die Abdunkelung (.div-block-602) ist
   absolut mit top:0 gesetzt und richtete sich vorher am Seitenanfang aus –
   was nur zufällig passte, solange der Hero selbst bei y=0 begann. */
.hero { padding-top: 0; position: relative; }

/* ============================================================
   Gemeinsamer Footer (wie Startseite und /kanzlei)
   Werte 1:1 aus dem Footer der Startseite gemessen.
   ============================================================ */
.hw-footer { background: #34333c; color: #fff; }
.hw-footer__inner {
  width: 100%;
  max-width: 1312px;
  margin-inline: auto;
  padding: 56px 24px;
}
@media (min-width: 768px) { .hw-footer__inner { padding-inline: 32px; } }

.hw-footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) {
  .hw-footer__grid { grid-template-columns: 1fr auto auto auto; }
}

.hw-footer__logo { display: block; width: 407px; max-width: 100%; height: auto; }
.hw-footer__social { display: flex; gap: 12px; margin-top: 40px; }
.hw-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #fff;
  color: #34333c;
  transition: background-color .15s, color .15s;
}
.hw-footer__social a:hover { background: #f59b00; color: #fff; }
.hw-footer__social svg { width: 24px; height: 24px; }

.hw-footer__titel {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #f59b00;
  margin: 0 0 16px;
}
.hw-footer ul { list-style: none; margin: 0; padding: 0; }
.hw-footer__links li + li { margin-top: 8px; }
.hw-footer__links a,
.hw-footer address {
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  font-style: normal;
}
/* Links folgen text-sm (20px), die Anschrift leading-relaxed – wie im Original */
.hw-footer__links a { line-height: 20px; }
.hw-footer address  { line-height: 1.625; }
.hw-footer__links a { transition: color .15s; }
.hw-footer__links a:hover { color: #f59b00; }

.hw-footer__divider { height: 1px; background: rgba(255, 255, 255, .15); margin: 40px 0; }

.hw-footer__unten {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, .7);
}
@media (min-width: 768px) {
  .hw-footer__unten { flex-direction: row; align-items: center; justify-content: space-between; }
}
.hw-footer__unten p { margin: 0; }
.hw-footer__recht { display: flex; flex-wrap: wrap; gap: 24px; }
.hw-footer__recht a { color: inherit; text-decoration: none; transition: color .15s; }
.hw-footer__recht a:hover { color: #f59b00; }