/* =========================================================================
   Eugen Zokol, Der Brückenbauer
   Alle Werte 1:1 aus Figma (fileKey oBaqoJTNEQSczVhmDdI8xZ, Frame Home B 2067:540).
   Desktop wird exakt auf 1730px Designbreite gebaut und per JS (zoom) auf die
   Fensterbreite skaliert. Unter 1024px greift das Mobile-Layout (eigene Adaption,
   im Figma gibt es keinen Mobile-Screen).
   ========================================================================= */

:root {
  --deep-fjord-500: #10363f;
  --deep-fjord-800: #061619;
  --elegant-brown-500: #6b4a39;
  --elegant-brown-300: #9f877b;
  --elegant-brown-100: #d4c4bd;
  --sea-mist-200: #dfeeec;
  --sea-mist-50: #f7fbfa;
  --cream: #f1ede4;
  --side-bg: #e6dfd6;

  --font: "PP Neue Montreal", "EZ Fallback", "Helvetica Neue", Arial, sans-serif;
  /* Figma Smart Animate "Gentle" 1.02s */
  --gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --zh: 100vh; /* von script.js gesetzt: Fensterhoehe in Design-Pixeln */
}

/* Ersatzschrift (Inter Tight, OFL) auf PP-Neue-Montreal-Laufweite kalibriert:
   gemessen gegen Figma: Book 96.7 %, Medium 97.5 %, Bold 100 % */
@font-face { font-family: "EZ Fallback"; src: url("fonts/InterTight-latin-var.woff2") format("woff2"); font-weight: 400; size-adjust: 96.7%; font-display: swap; }
@font-face { font-family: "EZ Fallback"; src: url("fonts/InterTight-latin-var.woff2") format("woff2"); font-weight: 500; size-adjust: 97.5%; font-display: swap; }
@font-face { font-family: "EZ Fallback"; src: url("fonts/InterTight-latin-var.woff2") format("woff2"); font-weight: 700; size-adjust: 100%; font-display: swap; }

/* PP Neue Montreal: Dateien nach assets/fonts/ legen, dann diese Bloecke aktivieren
@font-face { font-family:"PP Neue Montreal"; src:url("fonts/PPNeueMontreal-Book.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"PP Neue Montreal"; src:url("fonts/PPNeueMontreal-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"PP Neue Montreal"; src:url("fonts/PPNeueMontreal-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
*/

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--deep-fjord-500);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fw-medium { font-weight: 500; }
:focus-visible { outline: 2px solid var(--deep-fjord-500); outline-offset: 4px; }

.page { width: 1730px; position: relative; overflow: hidden; }
section { position: relative; }

/* ---------- Gemeinsame Ueberschriften (Label 24/32 Medium, Titel 48/56 Bold -0.5) ---------- */
.head { display: flex; flex-direction: column; gap: 9px; }
.head__label { font-size: 24px; line-height: 32px; font-weight: 500; height: 31px; }
.head__title { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.5px; }
.head--light { color: var(--sea-mist-200); }

/* ---------- Buttons (297x69, Rahmen 2px, Radius 54, Text 16/24 Medium) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 297px; height: 69px; flex-shrink: 0;
  border-radius: 54px; border: 2px solid transparent;
  font-family: var(--font); font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap;
  transition: background-color 1.02s var(--gentle), color 1.02s var(--gentle), border-color 1.02s var(--gentle);
}
.btn--dark { border-color: var(--deep-fjord-500); color: var(--deep-fjord-500); background: transparent; }
.btn--dark:hover { background: var(--deep-fjord-500); color: var(--cream); }
.btn--eee:hover { color: #eeeeee; }
.btn--light { border-color: #f7f4f1; color: #f7f4f1; background: transparent; }
.btn--light:hover { background: #f7f4f1; color: #5b4425; }
.btn--cream { background: #efeae3; color: var(--deep-fjord-800); border: 0; }

/* =========================================================================
   1 HERO (2078:722) 1730x1117
   ========================================================================= */
.hero {
  height: 1117px; background: var(--cream);
  padding: 105px 60px 99px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.hero__inner { width: 1610px; height: 883px; display: flex; flex-direction: column; align-items: center; gap: 98px; }
.hero__logo { position: relative; width: 1049.062px; height: 166px; flex-shrink: 0; }
.hero__logo-wortmarke { position: absolute; left: 0; top: 0; width: 1049.062px; height: 99.895px; }
.hero__logo-subline { position: absolute; left: 284.89px; top: 120.52px; width: 477.133px; height: 45.48px; }
.hero__content { width: 100%; flex: 1 0 0; display: flex; align-items: center; gap: 152px; }
.hero__text { width: 830px; flex-shrink: 0; display: flex; flex-direction: column; gap: 38px; align-items: flex-start; }
.hero__textblock { display: flex; flex-direction: column; gap: 22px; }
.hero__headline { font-size: 74px; line-height: 78px; font-weight: 700; letter-spacing: -1px; width: 826px; }
.hero__line { display: block; white-space: nowrap; height: 78px; }
.hero__subheadline { font-size: 24px; line-height: 32px; font-weight: 500; width: 860px; }
.hero__portrait { width: 494px; height: 619px; border-radius: 36px; overflow: hidden; position: relative; flex-shrink: 0; }
.hero__portrait img { position: absolute; width: 119.47%; height: 144.27%; left: -9.7%; top: -18.61%; object-fit: cover; }

/* Rotator "Letter" (2067:791 ff.): Maske + Cursor, Breiten springen ohne Uebergang */
.letter { display: inline-flex; align-items: flex-start; gap: 4px; vertical-align: top; height: 78px; }
.letter__mask { display: block; position: relative; height: 79px; width: 193px; overflow: hidden; flex-shrink: 0; }
.letter__text { position: absolute; left: 0; top: 0; white-space: nowrap; }
.letter__cursor { display: block; width: 2px; height: 79px; background: var(--deep-fjord-500); flex-shrink: 0; }

/* =========================================================================
   2 NAVI-LEISTE (2078:760) 1730x93
   ========================================================================= */
.jumpnav { height: 93px; background: #98bfba; display: flex; align-items: center; gap: 59px; padding-left: 152px; white-space: nowrap; }
.jumpnav__label { font-size: 24px; line-height: 32px; font-weight: 500; }
.jumpnav__list { display: flex; gap: 40px; font-size: 24px; line-height: 40px; font-weight: 700; letter-spacing: -0.25px; }

/* =========================================================================
   3 WARUM DER BRUECKENBAUER (2152:293) 1730x1116
   ========================================================================= */
.warum { height: 1116px; display: flex; flex-direction: column; justify-content: center; padding-left: 71px; color: var(--sea-mist-200); }
.warum__bg { position: absolute; inset: 0; background: var(--elegant-brown-500); }
.warum__bogen { position: absolute; left: -63px; top: 209.8px; width: 1822px; height: 943.169px; }
.warum__content { position: relative; width: 1057px; display: flex; flex-direction: column; gap: 103px; }
.warum__body { display: flex; flex-direction: column; gap: 84px; align-items: flex-start; }
.warum__big { font-size: 48px; line-height: 56px; font-weight: 500; letter-spacing: -0.5px; }
.warum__small { font-size: 32px; line-height: 32px; font-weight: 500; letter-spacing: -0.5px; margin-top: 56px; }

/* =========================================================================
   4 DIE PERSON DAHINTER (2314:438 / 2314:439)
   ========================================================================= */
.person { display: flex; min-height: 983px; }
.person__img { flex: 1 0 0; position: relative; overflow: hidden; }
.person__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person__panel { flex: 1 0 0; background: var(--cream); }
.person__short { height: 983px; display: flex; flex-direction: column; justify-content: center; gap: 94px; padding: 131px 187px 173px 59px; }
.person__head { height: 198px; width: 606px; }
.person__head .head__title { width: 402px; }
.person__body { width: 606px; height: 387px; display: flex; flex-direction: column; gap: 27px; align-items: flex-start; }
.person__text { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.5px; width: 602px; }
.person__more { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.5px; color: var(--elegant-brown-300); display: inline; margin-left: 4px; }
.person__more:hover { color: #85695a; }
.person__more:active { color: var(--elegant-brown-500); }
/* ausgeklappt */
.person.is-expanded .person__short { display: none; }
.person__long { padding: 100px 60px; display: flex; flex-direction: column; gap: 80px; }
.person__long[hidden] { display: none; }
.person__head--long { gap: 10px; }
.person__head--long .head__label { height: auto; }
.person__longbody { width: 636px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.person.is-expanded .person__img img { inset: auto; width: 166.39%; height: 137.43%; left: -33.2%; top: -18.71%; }

/* =========================================================================
   5 UNTERNEHMER MIT HERZ (2067:597) 1730x1118
   ========================================================================= */
.herz { height: 1118px; background: var(--elegant-brown-500); padding: 140px 224px 140px 60px; }
.herz__inner { width: 1444px; display: flex; flex-direction: column; gap: 94px; }
.herz__top { display: flex; align-items: center; gap: 421px; }
.herz__head { width: 491px; flex-shrink: 0; }
.herz__intro { width: 525px; height: 120px; font-size: 20px; line-height: 24px; font-weight: 400; color: var(--sea-mist-200); flex-shrink: 0; }

.hacc { display: flex; height: 648px; width: 1444px; }
.hacc__item { display: flex; height: 648px; }
.hacc__item--1 { background: #eee3de; border-radius: 50px 0 0 50px; }
.hacc__item--2 { background: #e1d4cd; }
.hacc__item--3 { background: var(--elegant-brown-100); border-radius: 0 50px 50px 0; }
/* geschlossener Reiter: Figma pt362 pb62 pl72 pr73, Label zentriert */
.hacc__tab { width: 202px; height: 648px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 362px 73px 62px 72px; }
.hacc__panel { display: none; width: 1040px; height: 648px; padding: 64px 95px 79px 49px; gap: 111px; align-items: flex-start; }
.hacc__item.is-open .hacc__tab { display: none; }
.hacc__item.is-open .hacc__panel { display: flex; }
.hacc__textcol { width: 314px; height: 505px; position: relative; flex-shrink: 0; }
.hacc__title { position: absolute; left: 0; top: 0; font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.5px; }
.hacc__vlabel { position: absolute; left: 0; top: 304px; }
.hacc__img { width: 471px; height: 494px; border-radius: 50px; overflow: hidden; flex-shrink: 0; position: relative; }
.hacc__img img { width: 100%; height: 100%; object-fit: cover; }
/* vertikale Schrift, von unten nach oben (Figma -90 Grad) */
.vtext { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; color: var(--deep-fjord-500); }

/* =========================================================================
   6 ARBEITSWEISE (2152:300) 1730x878
   ========================================================================= */
.weise { height: 878px; background: #efeae3; padding: 70px 181px 71px 87px; display: flex; flex-direction: column; gap: 74px; }
.weise__head { width: 417px; }
.weise__head .head__title { width: 541px; height: 57px; }
.weise__nav { display: flex; width: 1422px; height: 200px; }
.weise__tab { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.weise__tab.is-active { cursor: default; }
.arch { position: relative; display: block; width: 100%; height: 144px; }
.arch img { position: absolute; inset: 0; width: 100%; height: 100%; }
.arch__on { opacity: 0; }
.is-active > .arch .arch__on, .is-active > .wave__arch .arch__on { opacity: 1; }
.is-active > .arch .arch__off, .is-active > .wave__arch .arch__off { opacity: 0; }
.weise__label { display: block; width: 100%; font-size: 40px; line-height: 56px; font-weight: 500; letter-spacing: -0.5px; text-align: center; color: rgba(16, 54, 63, 0.2); }
.weise__tab.is-active .weise__label { color: var(--deep-fjord-500); }
.weise__panels { position: relative; height: 292px; }
.weise__panel { display: none; align-items: center; height: 292px; }
.weise__panel.is-active { display: flex; }
.weise__text { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; font-size: 36px; letter-spacing: -0.5px; }
.weise__title { font-weight: 700; line-height: 44px; height: 45px; }
.weise__body { font-weight: 400; line-height: 44px; height: 187px; }
.weise__img { position: absolute; left: 1012px; top: 0; width: 449px; height: 292px; border-radius: 50px; overflow: hidden; }
.weise__img img { position: absolute; }

/* =========================================================================
   7 BEGLEITUNG STATT BERATUNG (2152:296) 1730x1118
   ========================================================================= */
.begl { height: 1118px; background: var(--elegant-brown-100); padding: 99px 94px 1px 0; display: flex; flex-direction: column; align-items: center; gap: 68px; }
.begl__top { width: 1492px; display: flex; align-items: center; gap: 463px; }
.begl__head { width: 491px; flex-shrink: 0; }
.begl__head .head__title { width: 573px; height: 57px; white-space: nowrap; }
.begl__intro { width: 525px; height: 120px; font-size: 20px; line-height: 24px; font-weight: 400; flex-shrink: 0; }

.vacc { width: 1636px; display: flex; flex-direction: column; }
.vacc__row { position: relative; }
.vacc__row--1 { background: #eee3de; }
.vacc__row--2 { background: #e1d4cd; }
.vacc__row--3 { background: var(--elegant-brown-100); }
.vacc__row--4 { background: #c7b5ac; }
.vacc__head { position: relative; display: block; width: 100%; height: 123px; }
.vacc__row--3 .vacc__head { height: 122px; }
.vacc__head .vacc__num { position: absolute; left: 60px; top: 33px; }
.vacc__head .vacc__name { position: absolute; left: 851px; top: 39px; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; }
.vacc__row--3 .vacc__head .vacc__name, .vacc__row--4 .vacc__head .vacc__name { left: 854px; }
.vacc__row--3 .vacc__head .vacc__num { top: 32.5px; }
.vacc__row--3 .vacc__head .vacc__name { top: 38.5px; }
.vacc__num { font-size: 48px; line-height: 56px; font-weight: 500; letter-spacing: -0.5px; height: 57px; }
.vacc__body { display: none; position: relative; height: 462px; }
.vacc__row.is-open .vacc__head { display: none; }
.vacc__row.is-open .vacc__body { display: block; }
.vacc__body .vacc__num { position: absolute; left: 58px; top: 97px; }
.vacc__img { position: absolute; left: 263px; top: 97px; width: 449px; height: 292px; border-radius: 50px; overflow: hidden; }
.vacc__img img { position: absolute; }
.vacc__text { position: absolute; left: 856px; top: 97px; display: flex; flex-direction: column; gap: 7px; }
.vacc__title { font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.5px; height: 45px; white-space: nowrap; }
.vacc__copy { font-size: 20px; line-height: 24px; font-weight: 400; }

/* =========================================================================
   8 WERTE / WOMIT MENSCHEN ZU IHM KOMMEN (2067:606) 1730x963
   ========================================================================= */
.werte { height: 963px; background: var(--elegant-brown-500); padding: 136px 0 0 60px; }
.werte__inner { width: 1465px; display: flex; flex-direction: column; gap: 152px; }
.werte__head .head__title { width: 744px; height: 57px; }
.werte__intro { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--sea-mist-200); }
.werte__intro strong { font-weight: 700; }
.wave { position: relative; width: 1465px; height: 298px; }
.wave__item { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wave__item--up { top: 0; bottom: 21.81%; }
.wave__item--down { top: 21.81%; bottom: 0; }
.wave__arch { position: relative; display: block; width: 293px; height: 149px; flex-shrink: 0; }
.wave__arch img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.wave__item--down .wave__arch { transform: rotate(180deg); }
.wave__label { display: block; width: 100%; height: 60px; font-size: 40px; line-height: 56px; font-weight: 500; letter-spacing: -0.5px; text-align: center; white-space: nowrap; color: rgba(223, 238, 236, 0.2); transition: color 1s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.wave__item.is-active .wave__label { color: var(--sea-mist-200); }
.wave.is-linear .wave__arch img, .wave.is-linear .wave__label { transition-timing-function: linear; }

/* =========================================================================
   9 FUER WEN (2067:622) 1730x1121
   ========================================================================= */
.fuerwen { display: flex; height: 1121px; }
.fuerwen__img { flex: 1 0 0; position: relative; overflow: hidden; }
.fuerwen__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fuerwen__panel { width: 854px; flex-shrink: 0; background: var(--elegant-brown-100); padding: 131px 187px 173px 59px; display: flex; align-items: center; }
.fuerwen__inner { width: 608px; display: flex; flex-direction: column; gap: 48px; }
.fuerwen__title { width: 486px; height: 106px; }
.fuerwen__body { display: flex; flex-direction: column; gap: 58px; align-items: flex-start; }
.fuerwen__list { list-style: square; padding-left: 54px; font-size: 36px; line-height: 49px; font-weight: 500; letter-spacing: -0.5px; height: 239px; }
.fuerwen__text { width: 610px; height: 239px; font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.5px; }

/* =========================================================================
   10 ZITAT (2067:665) + BILD-CTA (2067:673)
   ========================================================================= */
.quote { height: 603px; background: #a9ccc7; display: flex; align-items: center; justify-content: center; }
.quote__inner { width: 953px; display: flex; flex-direction: column; align-items: center; gap: 63px; }
.quote__text { font-size: 36px; line-height: 44px; font-weight: 500; letter-spacing: -0.5px; text-align: center; height: 87px; }
.quote__btns { display: flex; gap: 8px; }
.cta { height: 1150px; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; transform: scaleX(-1); overflow: hidden; }
.cta__bg img { position: absolute; width: 126.82%; height: 120.87%; left: -23.78%; top: -16.52%; object-fit: cover; }
.cta__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 87.129%); }
.cta__content { position: absolute; left: 60px; top: 718px; width: 883px; display: flex; flex-direction: column; gap: 48px; align-items: flex-start; }
.cta__title { width: 812px; height: 148px; white-space: nowrap; font-size: 64px; line-height: 72px; font-weight: 700; letter-spacing: -1px; color: var(--sea-mist-50); }

/* =========================================================================
   11 FOOTER (2067:633) 1730x628
   ========================================================================= */
.footer { position: relative; height: 628px; color: var(--sea-mist-200); }
.footer__bg { position: absolute; left: 0; top: -11px; width: 1730px; height: 639px; background: #864c25; }
.footer__content { position: absolute; left: 82px; top: 81px; width: 1491px; display: flex; flex-direction: column; align-items: center; gap: 185px; }
.footer__info { width: 100%; display: flex; gap: 310px; align-items: flex-start; }
.footer__personal { width: 783px; display: flex; gap: 48px; align-items: flex-start; flex-shrink: 0; }
.footer__name { width: 164px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.footer__col { display: flex; flex-direction: column; gap: 13px; }
.footer__h { font-size: 24px; line-height: 40px; font-weight: 700; letter-spacing: -0.25px; height: 33px; }
.footer__sub { font-size: 16px; line-height: 24px; font-weight: 400; }
.footer__p { font-size: 20px; line-height: 24px; font-weight: 400; }
.footer__p a:hover, .footer__links a:hover { text-decoration: underline; }
.footer__legal { width: 398px; display: flex; flex-direction: column; gap: 12px; font-size: 20px; line-height: 24px; flex-shrink: 0; }
.footer__links { display: flex; gap: 18px; }
.footer__logo { position: relative; width: 1491px; height: 143px; overflow: hidden; }
.footer__logo img { position: absolute; width: auto; height: auto; }

/* =========================================================================
   HEADER RECHTS (2067:679) fixiert, 94 breit
   ========================================================================= */
.sidebar { position: fixed; top: 0; right: 0; width: 94px; height: var(--zh); background: var(--side-bg); z-index: 40; }
.sidebar__inner { position: absolute; left: 11px; top: 95px; bottom: 94px; width: 72px; display: flex; flex-direction: column; justify-content: space-between; }
.burger { margin-left: 11.5px; width: 49px; height: 22px; display: flex; flex-direction: column; gap: 16px; }
.burger span { display: block; width: 49px; height: 3px; background: var(--deep-fjord-500); }
.sidebar__bottom { display: flex; flex-direction: column; align-items: center; gap: 46px; }
.sidebar__links { display: flex; flex-direction: column; align-items: center; gap: 34px; width: 23px; }
.vlink { display: block; writing-mode: vertical-rl; font-size: 20px; line-height: 23px; font-weight: 500; white-space: nowrap; color: var(--deep-fjord-500); }
.vlink:hover { color: var(--elegant-brown-500); }
/* Textanfaenge exakt wie Figma (Block 383 hoch: LinkedIn 0 / E-Mail 90+34 / Telefon 124+73+34) */
.sidebar__links { position: relative; height: 383px; }
.sidebar__links .vlink { position: absolute; left: 0; }
.sidebar__links .vlink:nth-child(1) { top: 0; }
.sidebar__links .vlink:nth-child(2) { top: 124px; }
.sidebar__links .vlink:nth-child(3) { top: 231px; }
.sidebar__logo { position: relative; display: block; width: 72px; height: 216px; }
.sidebar__logo img { position: absolute; }

/* =========================================================================
   MENUE-OVERLAY (Menü b 69:957), Move-In von rechts 0.3s linear
   ========================================================================= */
.menu { position: fixed; top: 0; left: 2px; width: 1728px; height: var(--zh); background: var(--side-bg); z-index: 60; transform: translateX(110%); transition: transform 0.3s linear; visibility: hidden; }
.menu.is-open { transform: translateX(0); visibility: visible; }
.menu.is-closing { visibility: visible; }
.menu__container { position: absolute; left: 101px; top: 105px; bottom: 88px; width: 1384px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.menu__logo { width: 1384px; height: 133px; }
.menu__list { display: flex; flex-direction: column; gap: 18px; }
.menu__list a { display: block; font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.5px; border-bottom: 1px solid var(--deep-fjord-500); }
.menu__list a:hover { color: var(--elegant-brown-500); }
.menu__side { position: absolute; left: 1612px; top: 0; width: 116px; height: 100%; }
.menu__sideinner { position: absolute; left: 22px; top: 101.5px; bottom: 87.5px; width: 72px; display: flex; flex-direction: column; justify-content: space-between; }
.menu__close { margin-left: 11.5px; width: 44.5px; height: 44.5px; position: relative; }
.menu__close img { position: absolute; inset: -2.38%; width: 104.76%; height: 104.76%; }

/* =========================================================================
   MOBILE (< 1024px) — eigene Adaption, kein Figma-Mobile vorhanden
   ========================================================================= */
@media (max-width: 1023px) {
  .page { width: 100%; }
  .btn { width: auto; min-width: 240px; padding: 0 32px; height: 56px; }
  .head__label { font-size: 18px; line-height: 24px; height: auto; }
  .head__title { font-size: 32px; line-height: 38px; }

  .hero { height: auto; padding: 96px 20px 56px; }
  .hero__inner { width: 100%; height: auto; gap: 48px; }
  .hero__logo { width: 100%; max-width: 420px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .hero__logo-wortmarke, .hero__logo-subline { position: static; width: 100%; height: auto; }
  .hero__logo-subline { width: 45.5%; }
  .hero__content { flex-direction: column-reverse; gap: 32px; }
  .hero__text { width: 100%; gap: 28px; }
  .hero__headline { width: 100%; font-size: 38px; line-height: 42px; letter-spacing: -0.5px; }
  .hero__line { height: auto; white-space: normal; display: inline; }
  .hero__line::after { content: " "; }
  .letter { display: flex; width: fit-content; height: 42px; gap: 2px; }
  .letter__mask { height: 43px; }
  .letter__cursor { height: 43px; }
  .hero__subheadline { width: 100%; font-size: 18px; line-height: 26px; }
  .hero__portrait { width: 100%; max-width: 420px; height: auto; aspect-ratio: 494 / 619; border-radius: 24px; }

  .jumpnav { height: auto; padding: 16px 20px; gap: 12px; flex-wrap: wrap; white-space: normal; }
  .jumpnav__label { font-size: 16px; }
  .jumpnav__list { flex-wrap: wrap; gap: 8px 20px; font-size: 16px; line-height: 24px; }

  .warum { height: auto; padding: 72px 20px; }
  .warum__bogen { left: -40%; top: 30%; width: 180%; height: auto; }
  .warum__content { width: 100%; gap: 40px; }
  .warum__body { gap: 40px; }
  .warum__big { font-size: 24px; line-height: 32px; }
  .warum__big br { display: none; }
  .warum__small { font-size: 20px; line-height: 26px; margin-top: 24px; }

  .person { flex-direction: column; min-height: 0; }
  .person__img { flex: none; height: 420px; }
  .person__short { height: auto; padding: 48px 20px; gap: 32px; }
  .person__head, .person__head .head__title, .person__body, .person__text, .person__longbody { width: 100%; height: auto; }
  .person__text, .person__more { font-size: 18px; line-height: 26px; }
  .person__text br { display: none; }
  .person__long { padding: 48px 20px; gap: 32px; }
  .person.is-expanded .person__img img { width: 100%; height: 100%; left: 0; top: 0; }

  .herz { height: auto; padding: 72px 20px; }
  .herz__inner { width: 100%; gap: 40px; }
  .herz__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .herz__head, .herz__intro { width: 100%; height: auto; }
  .herz__intro { font-size: 18px; line-height: 26px; }
  .herz__intro br { display: none; }
  .hacc { flex-direction: column; width: 100%; height: auto; }
  .hacc__item { height: auto; flex-direction: column; border-radius: 0; }
  .hacc__item--1 { border-radius: 24px 24px 0 0; }
  .hacc__item--3 { border-radius: 0 0 24px 24px; }
  .hacc__tab { width: 100%; height: 76px; padding: 0; align-items: flex-start; }
  .hacc__tab .vtext, .hacc__vlabel { position: static; writing-mode: horizontal-tb; transform: none; font-size: 28px; line-height: 34px; }
  .hacc__tab .vtext { padding: 21px 20px; }
  .hacc__vlabel { height: auto !important; }
  .hacc__panel { width: 100%; height: auto; padding: 24px 20px 28px; flex-direction: column; gap: 20px; }
  .hacc__textcol { width: 100% !important; height: auto; display: flex; flex-direction: column-reverse; gap: 12px; }
  .hacc__title { position: static; width: auto !important; font-size: 26px; line-height: 32px; }
  .hacc__img { width: 100%; height: auto; aspect-ratio: 471 / 494; border-radius: 24px; }

  .weise { height: auto; padding: 72px 20px; gap: 32px; }
  .weise__head, .weise__head .head__title { width: 100%; height: auto; }
  .weise__nav { width: 100%; height: auto; }
  .weise__tab { width: 20% !important; flex-shrink: 1; }
  .arch { height: auto; aspect-ratio: 284 / 144; }
  .weise__label { font-size: 12px; line-height: 20px; letter-spacing: 0; }
  .weise__panels { height: auto; }
  .weise__panel { flex-direction: column; align-items: flex-start; height: auto; gap: 20px; }
  .weise__text { width: 100% !important; font-size: 22px; }
  .weise__title { line-height: 28px; height: auto; }
  .weise__body { line-height: 30px; height: auto; }
  .weise__body br { display: none; }
  .weise__img { position: relative; left: 0; width: 100%; height: auto; aspect-ratio: 449 / 292; border-radius: 24px; }

  .begl { height: auto; padding: 72px 0 0; gap: 32px; }
  .begl__top { width: 100%; padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .begl__head, .begl__head .head__title, .begl__intro { width: 100%; height: auto; white-space: normal; }
  .begl__intro { font-size: 18px; line-height: 26px; }
  .vacc { width: 100%; }
  .vacc__head, .vacc__row--3 .vacc__head { height: auto; display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
  .vacc__head .vacc__num, .vacc__head .vacc__name, .vacc__row--3 .vacc__head .vacc__name, .vacc__row--4 .vacc__head .vacc__name { position: static; }
  .vacc__num { font-size: 28px; line-height: 34px; height: auto; flex-shrink: 0; }
  .vacc__head .vacc__name { font-size: 20px; line-height: 26px; white-space: normal; }
  .vacc__body { height: auto; padding: 20px 20px 28px; display: none; flex-direction: column; gap: 16px; }
  .vacc__row.is-open .vacc__body { display: flex; }
  .vacc__body .vacc__num, .vacc__img, .vacc__text { position: relative; left: 0; top: 0; }
  .vacc__img { width: 100%; height: auto; aspect-ratio: 449 / 292; border-radius: 24px; }
  .vacc__text { width: 100% !important; }
  .vacc__title { font-size: 24px; line-height: 30px; height: auto; white-space: normal; }
  .vacc__copy { width: 100% !important; font-size: 18px; line-height: 26px; }
  .vacc__copy br { display: none; }

  .werte { height: auto; padding: 72px 20px; }
  .werte__inner { width: 100%; gap: 48px; }
  .werte__head .head__title { width: 100%; height: auto; }
  .werte__intro { font-size: 18px; line-height: 26px; }
  .werte__intro br { display: none; }
  .wave { width: 1465px; transform-origin: 0 0; }

  .fuerwen { flex-direction: column; height: auto; }
  .fuerwen__img { flex: none; height: 420px; }
  .fuerwen__panel { width: 100%; padding: 48px 20px 64px; }
  .fuerwen__inner, .fuerwen__title, .fuerwen__text { width: 100%; height: auto; }
  .fuerwen__inner { gap: 28px; }
  .fuerwen__body { gap: 28px; }
  .fuerwen__list { height: auto; font-size: 24px; line-height: 34px; padding-left: 28px; }
  .fuerwen__text { font-size: 20px; line-height: 28px; }

  .quote { height: auto; padding: 72px 20px; }
  .quote__inner { width: 100%; gap: 32px; }
  .quote__text { font-size: 22px; line-height: 30px; height: auto; }
  .quote__text br { display: none; }
  .quote__btns { flex-direction: column; gap: 10px; align-items: center; }
  .cta { height: 620px; }
  .cta__bg img { width: 220%; height: 100%; left: -60%; top: 0; }
  .cta__content { left: 20px; right: 20px; top: auto; bottom: 48px; width: auto; gap: 24px; }
  .cta__title { width: 100%; height: auto; font-size: 34px; line-height: 40px; white-space: normal; }

  .footer { height: auto; padding: 56px 20px 40px; }
  .footer__bg { top: -11px; width: 100%; height: calc(100% + 11px); }
  .footer__content { position: relative; left: 0; top: 0; width: 100%; gap: 48px; }
  .footer__info, .footer__personal { flex-direction: column; gap: 28px; width: 100%; }
  .footer__name { text-align: left; width: auto; }
  .footer__legal { width: 100%; font-size: 16px; }
  .footer__logo { width: 100%; height: auto; aspect-ratio: 1491 / 143; }

  .sidebar { width: auto; height: auto; top: 14px; right: 14px; background: var(--side-bg); border-radius: 28px; }
  .sidebar__inner { position: static; width: auto; padding: 17px 14px; }
  .sidebar__bottom { display: none; }
  .burger { margin: 0; width: 32px; height: 14px; gap: 8px; }
  .burger span { width: 32px; height: 2px; }

  .menu { left: 0; width: 100%; height: 100%; }
  .menu__container { left: 20px; right: 20px; top: 80px; bottom: 40px; width: auto; justify-content: flex-start; }
  .menu__logo { width: 100%; height: auto; }
  .menu__list a { font-size: 28px; line-height: 40px; }
  .menu__side { left: auto; right: 0; width: 80px; height: 80px; }
  .menu__sideinner { left: auto; right: 14px; top: 18px; bottom: auto; width: auto; }
  .menu__sideinner .sidebar__bottom { display: none; }
  .menu__close { margin: 0; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .wave__arch img, .wave__label, .menu { transition: none; }
}