/* ============================================================
   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;
  /* über dem Overlay-Menü (z-index 97), damit das X anklickbar bleibt */
  z-index: 98;
  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: 12px; 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; }
/* Kontakt-Button im Dunkelgrau (wie auf den übrigen Seiten) */
.hw-header__cta--dunkel { background: #34333c; color: #fff; }
.hw-header__cta--dunkel:hover { background: #4a4954; }
.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; column-gap: 96px; }
}

.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: 14px;
  line-height: 20px;
  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; }

/* Markenschreibweise wie auf den übrigen Seiten: „steuerberaterhw“ ohne
   Leerzeichen. Seit 21.09.2026 läuft das Wort in der großgeschriebenen
   Überschrift mit (Kundenwunsch), nur das „hw“ bleibt klein. */
.hw-marke .text-span-2 { text-transform: lowercase; }
/* „hw" wie auf den übrigen Seiten: 0.6 em, hochgestellt, orange.
   Webflow setzte feste 20 px – neben der 14-px-Kicker-Zeile viel zu groß. */
.hw-marke .text-span-2 {
  font-size: .6em; font-weight: 700; color: #f59b00;
  vertical-align: super; position: static; top: auto;
}

/* ============================================================
   Inhalt bündig mit der Navigationsleiste
   Der gemeinsame Header nutzt einen Container von 1312 px mit 32 px
   (mobil 24 px) Innenabstand, also 1248 px Inhaltsbreite. Webflow rechnete
   mit 5vw Rand und 1400 px Breite — dadurch stand der Inhalt je nach
   Fensterbreite links vor oder hinter dem Logo. Hier gilt jetzt dasselbe
   Raster wie im Header; der Header selbst bleibt unverändert.
   ============================================================ */
.u-section,
.div-block-602 { padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) {
  .u-section,
  .div-block-602 { padding-left: 32px; padding-right: 32px; }
}
.u-max-width,
.div-block-558 { max-width: 1248px; width: 100%; margin-left: auto; margin-right: auto; }

/* ============================================================
   Imagefilm: stumme Schleife im Abschnitt „Arbeit“, Klick auf den
   Play-Button öffnet den Film mit Ton in einer Vollbild-Ansicht.
   ============================================================ */
.hw-film { position: relative; }
/* Der Rahmen übernimmt das Seitenverhältnis des Films (16:9) statt der festen
   Bildhöhe von Webflow. Sonst schneidet object-fit auf dem Telefon bis zu zwei
   Drittel der Breite weg — samt Untertiteln und Gesichtern. */
.hw-film__schleife.image-1174 {
  display: block; height: auto; aspect-ratio: 16 / 9;
  object-position: 50% 50%; background: #34333c;
}
.hw-film__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 92px; height: 92px; padding: 0;
  border: 0; border-radius: 9999px; cursor: pointer;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transition: transform .2s ease, background-color .2s ease;
}
.hw-film__play span {
  display: block; width: 0; height: 0; margin-left: 7px;
  border-left: 28px solid #34333c; border-top: 17px solid transparent; border-bottom: 17px solid transparent;
  transition: border-left-color .2s ease;
}
.hw-film__play:hover { transform: translate(-50%, -50%) scale(1.06); background: #f59b00; }
.hw-film__play:hover span { border-left-color: #fff; }
.hw-film__play:focus-visible { outline: 3px solid #f59b00; outline-offset: 5px; }
@media (max-width: 767px) {
  .hw-film__play { width: 72px; height: 72px; }
  .hw-film__play span { margin-left: 5px; border-left-width: 22px; border-top-width: 13px; border-bottom-width: 13px; }
}

.hw-kino {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 16px 32px; background: rgba(20, 20, 26, .95);
}
.hw-kino[hidden] { display: none !important; }
.hw-kino__video {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px;
  max-width: min(1600px, calc((100vh - 104px) * 16 / 9));
}
.hw-kino__zu {
  position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 9999px; cursor: pointer; background: #fff;
  display: grid; place-items: center; transition: background-color .2s ease;
}
/* Das X aus zwei Balken, damit es unabhängig von der Schrift sauber sitzt. */
.hw-kino__zu span { position: relative; display: block; width: 20px; height: 20px; }
.hw-kino__zu span::before, .hw-kino__zu span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2.5px;
  background: #34333c; border-radius: 2px;
}
.hw-kino__zu span::before { transform: translate(-50%, -50%) rotate(45deg); }
.hw-kino__zu span::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.hw-kino__zu:hover { background: #f59b00; }
.hw-kino__zu:focus-visible { outline: 3px solid #f59b00; outline-offset: 4px; }
body.hw-kino-offen { overflow: hidden; }

/* ============================================================
   Korrekturrunde 11.09.2026: wie auf den übrigen Seiten keine
   einzelnen Wörter in der letzten Zeile, sichtbarer Button-Hover.
   ============================================================ */
p, blockquote, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.button { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
}
.button:active { transform: translateY(0); box-shadow: none; }

/* Footer wie auf den übrigen Seiten: Menü zweispaltig, Telefon unter der Anschrift */
.hw-footer__links--zweispaltig {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
  column-gap: 56px; row-gap: 8px; justify-content: start;
}
.hw-footer__links--zweispaltig li + li { margin-top: 0; }
.hw-footer__tel { display: inline-block; margin-top: 12px; color: inherit; text-decoration: none; transition: color .15s; }
.hw-footer__mail { color: inherit; text-decoration: none; transition: color .15s; }
.hw-footer__tel:hover, .hw-footer__mail:hover { color: #f59b00; }
/* 1024–1279 px: Logo, sechs Links und zwei Buttons kompakter, wie auf den übrigen Seiten */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hw-header__logo img { width: 180px; height: auto; }
  .hw-header__nav { gap: 16px; }
  .hw-header__nav a { font-size: 14px; }
  .hw-header__right { gap: 8px; }
  .hw-header__cta { padding-left: 14px; padding-right: 14px; font-size: 13px; letter-spacing: .01em; }
}

/* Ablauf-Grafik: Karte 02 saß rund 60 px tiefer als Karte 04 und damit weiter
   von der Linie weg als alle anderen (Review 18.09.2026). */
@media screen and (min-width: 992px) {
  .step.absolut._2 { bottom: 6%; }
}

/* ---------- Überschriften genau wie auf den übrigen Unterseiten ----------
   Referenz: .eyebrow-section (14 px/700/.08em), .heading-section
   (clamp(2rem,4vw,3.5rem)/700/-.005em/1.15) und der Hero der Kanzleiseite
   (Kicker 14 px/700/.06em, H1 clamp(2.25rem,4.5vw,3.25rem)/700/-.01em/1.1).
   Webflow brachte eigene Schriftdateien mit – hier dieselbe Variable Font
   wie auf den übrigen Seiten, sonst wirken gleiche Werte trotzdem anders. */
@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../../fonts/0b1dc8ddaa74ba49-s.04o39dzmj.ey..woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../../fonts/e629b5bc06499d58-s.0b_~8bw~gzh90.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../../fonts/1a099d89ee94ee96-s.0_qb~~5cn13jl.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:200 800;font-display:swap;src:url(../../fonts/fba5a26ea33df6a3-s.p.0eehd8tgys7nv.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Plus Jakarta Sans Fallback;src:local(Arial);ascent-override:98.88%;descent-override:21.15%;line-gap-override:0.0%;size-adjust:104.98%}

.heading-3, .heading, .u-heading, .small-heading, .card-heading, .stellen-heading,
.karriere-seite h1, .karriere-seite h2, .karriere-seite h3, .karriere-seite h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
}
/* Hero: kleine Überschrift und Hauptzeile */
h1.heading-3[class] {
  font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: .06em;
  text-transform: uppercase;
}
h2.heading[class] {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em; text-transform: uppercase;
}
/* Abschnittsüberschriften */
.small-heading {
  font-size: 14px; font-weight: 700; line-height: 20px;
  letter-spacing: .08em; text-transform: uppercase;
}
.step .small-heading { font-size: 17px; line-height: 1.3; letter-spacing: .04em; }
.u-heading[class][class] {
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -.005em; word-spacing: .05em;
}
/* Karten- und Stellenüberschriften: Maß der Karten auf den übrigen Seiten */
.card-heading[class] { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.stellen-heading[class] { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }

/* In den Ablauf-Karten bleibt die Nummer als Kartenlabel etwas größer. */
.step .small-heading { font-size: 17px; line-height: 1.3; letter-spacing: .04em; }
/* [class][class] hebt die Webflow-Varianten (.u-heading.max-width._2.small u.a.)
   auf, ohne jede Kombination einzeln aufzulisten. */
.u-heading[class][class] {
  font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.15; letter-spacing: -.005em;
}

/* Deko-Kasten im Abschnitt „Arbeit": lag auf dem Handy über dem Text und ab
   1024 px wieder (der Kasten wächst mit der Fensterbreite, der Textblock nicht).
   Unter 768 px ganz aus, darüber endet der Text vor dem Kasten. */
@media (max-width: 767px) {
  .div-block-9727 { display: none; }
}
@media (min-width: 768px) {
  /* nur der äußere Block – sonst wirkt die Begrenzung doppelt */
  #Arbeit .div-block-9725 { max-width: 58%; }
  #Arbeit .text.width._2 { max-width: 100%; }
}

/* Kopfleiste Handy: Logo in voller Breite (der Bewerben-Button steht im Menü) */
@media (max-width: 767px) {
  .hw-header__logo img { width: 244px; max-width: 100%; height: auto; }
}
@media (max-width: 360px) {
  .hw-header__logo img { width: 210px; }
}

/* ---------- Verlaufstext in Überschriften (Review 18.09.2026) ----------
   Webflow setzte den gelben Teil unter 768 px auf feste 30 px, während die
   weiße Zeile 36 px groß ist – dadurch sahen beide Hälften unterschiedlich
   groß aus. Außerdem schnitt `background-clip: text` die kursive Schrift am
   Zeilenende an; mit box-decoration-break und etwas Luft rechts bleibt sie
   vollständig (auf den übrigen Seiten ist es genauso gelöst). */
.gradient-text[class] {
  font-size: inherit;
  line-height: inherit;
  padding-right: .12em;
  margin-right: -.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Menü identisch zu den übrigen Seiten (18.09.2026):
   aktuelle Seite orange, Burger-Striche im Dunkelgrau der Marke. */
.nav-menu-4 [aria-current="page"] .menu-link-text-4 { color: #f59b00; }
.d-117-line-wrapper-2, .d-117-second-line-3, .d-117-first-line-2 { background-color: #34333c !important; }

/* ---------- Ablauf-Karten: Überschriften kräftiger ----------
   Kundenwunsch 21.09.2026: die Nummern-Zeile in den vier Karten war mit 700
   kaum von der Textfarbe zu unterscheiden. */
.step .small-heading[class] { font-weight: 800; }

/* ---------- Benefits: gelbe und blaue Kachel gleich viel Innenabstand ----------
   Ab 1920 px gab Webflow der gelben Kachel eine feste Höhe (31 %), der Inhalt
   wurde darin zentriert – oben und unten standen dadurch 44 px statt 25 px.
   Der blauen Kachel gab Webflow zusätzlich 35 px Innenabstand links. */
@media (min-width: 1920px) {
  #Benefits .div-block-96516 { height: auto; }
  #Benefits .div-block-96517 { padding-left: 25px; }
  /* Webflow begrenzt Überschriften ab 1920 px auf 80 % Breite – dadurch lief
     „Dafür verfällt hier keine Überstunde." wieder auf vier Zeilen. */
  #Benefits .u-heading[class] { width: 100%; }
}

/* ---------- Ablauf-Karte 04: Überschrift einzeilig ----------
   Webflow begrenzt `.small-heading._80` auf 65 % Breite, dadurch brach
   „04 Willkommen im Team!" um und links neben dem Text blieb viel Weißraum
   (Kundenhinweis 21.09.2026). */
#Ablauf .step._4 .small-heading._80 { width: 100%; }
/* Die Karte war breiter als ihr Text: die längste Zeile lief bei 1920 px nur
   261 von 324 px aus, rechts blieb sichtbar Weißraum (Kundenhinweis
   21.09.2026). Breite deshalb begrenzt, die Zeilen füllen die Karte jetzt. */
#Ablauf .step._4.hell { max-width: 330px; }