/* Gemeinsame Rasterlinien, an die XD-Vorlage angelehnt.

   Prozentwerte sind bewusst gerundet; wiederkehrende Kanten teilen dieselben Werte. */

:root {

  --grid-margin:7%;

  --grid-title:22%;

  --grid-intro:29%;

  --grid-content:50%;

  --grid-panel:42%;

  --grid-services:43%;

  --grid-wide:42%;

  --grid-narrow:36%;

  --u:min(calc(100vw / 1920),1px);

  --ink:#202020;

  --red:#e42a1b;

  --grey:#f4f4f4;

}



* {

  box-sizing:border-box;

}



html {

  scroll-behavior:smooth;

  scroll-padding-top:24px;

}



body {

  margin:0;

  color:var(--ink);

  font:400 calc(22 * var(--u))/1.64 'CSL Open Sans',Arial,sans-serif;

  background:white;

}



button,a {

  -webkit-tap-highlight-color:transparent;

}



a {

  color:inherit;

  text-underline-offset:3px;

}



a:hover,.text-link:hover {

  color:#e42a1b;

}



button {

  font:inherit;

}



button,a {

  touch-action:manipulation;

}



button {

  color:inherit;

}



a:focus-visible,button:focus-visible {

  outline:2px solid #e42a1b;

  outline-offset:5px;

}



p,h1,h2,h3,h4,blockquote {

  margin:0;

}



p+p {

  margin-top:calc(36 * var(--u));

}



img {

  display:block;

  max-width:100%;

  height:auto;

}



.site {

  max-width:1920px;

  margin:auto;

  overflow:hidden;

}



.skip-link {

  position:fixed;

  top:10px;

  left:10px;

  z-index:20;

  background:white;

  padding:12px;

  font-size:16px;

  transform:translateY(-180%);

}



.skip-link:focus {

  transform:none;

}



.header {

  height:calc(143 * var(--u));

  position:relative;

  background:#fff;

  z-index:5;

}



.brand {

  position:absolute;

  left:var(--grid-margin);

  top:calc(38 * var(--u));

  width:calc(180 * var(--u));

}



.header nav {

  position:absolute;

  left:var(--grid-content);

  top:calc(64 * var(--u));

  right:var(--grid-margin);

  display:flex;

  justify-content:space-between;

  align-items:center;

  font-weight:700;

}



.header nav a {

  text-decoration:none;

  white-space:nowrap;

}



.menu-toggle {

  display:none;

}



section {

  position:relative;

  scroll-margin-top:24px;

}



.illustration {

  position:absolute;

  pointer-events:none;

  max-width:none;

}



.hero {

  height:calc(934 * var(--u));

}



.hero-background {

  position:absolute;

  inset:0 0 0 var(--grid-intro);

  background:var(--grey);

}



h1 {

  position:absolute;

  left:var(--grid-margin);

  top:calc(169 * var(--u));

  font-size:calc(85 * var(--u));

  line-height:1.24;

  font-weight:700;

  color:#303d46;

  letter-spacing:0;

}



h1 span {

  color:var(--red);

}



.plane {

  width:calc(1825 * var(--u));

  left:calc(-188 * var(--u));

  top:calc(467 * var(--u));

}



.eyebrow {

  font-size:calc(45 * var(--u));

  font-weight:600;

  line-height:1.36;

  text-transform:uppercase;

  margin-bottom:calc(36 * var(--u));

}



.promise {

  height:calc(817 * var(--u));

}



.promise-copy {

  position:absolute;

  left:var(--grid-intro);

  width:50%;

  top:calc(175 * var(--u));

}



.section-title {

  position:absolute;

  left:var(--grid-title);

  font-size:calc(85 * var(--u));

  line-height:1.36;

  font-weight:700;

}



.left-panel {

  position:absolute;

  left:0;

  top:0;

  width:var(--grid-panel);

  background:var(--grey);

}



.company {

  height:calc(1253 * var(--u));

}



.company .left-panel {

  height:calc(979 * var(--u));

}



.company .section-title {

  top:calc(129 * var(--u));

}



.handshake {

  width:calc(906 * var(--u));

  left:calc(-37 * var(--u));

  top:calc(417 * var(--u));

}



.company-copy {

  position:absolute;

  left:var(--grid-content);

  top:calc(510 * var(--u));

  width:var(--grid-wide);

}



.services {

  height:calc(1296 * var(--u));

  background:var(--grey);

}



.services .section-title {

  top:calc(147 * var(--u));

}



.services-copy {

  position:absolute;

  left:var(--grid-services);

  top:calc(315 * var(--u));

  width:var(--grid-wide);

}



.clipboard {

  left:0;

  top:calc(506 * var(--u));

  width:calc(751 * var(--u));

}



.services-list {

  margin:calc(56 * var(--u)) 0 0 calc(138 * var(--u));

  padding:0;

  list-style:none;

}



.services-list li {

  position:relative;

  padding-left:calc(30 * var(--u));

}



.services-list li:before {

  content:'•';

  color:var(--red);

  position:absolute;

  left:0;

}



.people {

  margin-top:calc(257 * var(--u));

  height:calc(2923 * var(--u));

}



.people .left-panel {

  height:calc(1395 * var(--u));

}



.people .section-title {

  top:calc(160 * var(--u));

}



.hands {

  left:0;

  top:calc(414 * var(--u));

  width:calc(894 * var(--u));

}



.people-copy {

  position:absolute;

  left:var(--grid-content);

  top:calc(490 * var(--u));

  width:var(--grid-narrow);

}



.team-block {

  position:absolute;

  left:var(--grid-content);

  top:calc(995 * var(--u));

  width:var(--grid-narrow);

}



.team-block>.eyebrow {

  margin-bottom:calc(62 * var(--u));

}



.team-grid {

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  column-gap:calc(17 * var(--u));

  row-gap:calc(130 * var(--u));

}



.person>img {

  width:100%;

  height:calc(442 * var(--u));

  object-fit:cover;

  object-position:top;

}



.person blockquote,.person .quote-placeholder {

  font-weight:700;

  font-style:italic;

  margin-top:calc(20 * var(--u));

  min-height:calc(108 * var(--u));

  line-height:1.64;

}



.person p {

  margin-top:calc(16 * var(--u));

}



.person a {

  text-decoration:none;

}



.person a:hover {

  text-decoration:underline;

}



.knowledge {

  height:calc(1177 * var(--u));

}



.knowledge .left-panel {

  height:calc(790 * var(--u));

}



.knowledge .section-title {

  top:calc(140 * var(--u));

}



.bulb {

  left:calc(-51 * var(--u));

  top:calc(290 * var(--u));

  width:calc(1055 * var(--u));

}



.knowledge-grid {

  position:absolute;

  left:var(--grid-content);

  right:var(--grid-margin);

  top:calc(390 * var(--u));

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  column-gap:calc(78 * var(--u));

  row-gap:calc(110 * var(--u));

}



.knowledge h3 {

  font-size:calc(45 * var(--u));

  font-weight:600;

  line-height:1.36;

  margin-bottom:calc(18 * var(--u));

}



.link-list {

  list-style:none;

  margin:0;

  padding:0;

}



.text-link {

  border:0;

  background:none;

  padding:0;

  text-align:left;

  cursor:pointer;

  text-decoration:underline;

  text-underline-offset:3px;

}



.contact {

  height:calc(920 * var(--u));

  background:var(--grey);

}



.contact .section-title {

  top:calc(112 * var(--u));

}



.bubbles {

  left:calc(320 * var(--u));

  top:calc(235 * var(--u));

  width:calc(449 * var(--u));

}



.contact-copy {

  position:absolute;

  left:var(--grid-content);

  right:var(--grid-margin);

  top:calc(126 * var(--u));

}



.sentence-case {

  text-transform:none;

}



.contact-grid {

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  column-gap:calc(78 * var(--u));

  margin-top:calc(91 * var(--u));

}



.contact h4 {

  padding-bottom:15px;

  font-size:calc(32 * var(--u));

  font-weight:400;

  line-height:1.5;

}



address {

  font-style:normal;

}



.address-link {

  text-decoration:none;

}



.social {

  margin-top:calc(28 * var(--u));

}



.linkedin-icon {

  font-size:.9em;

  font-weight:700;

  margin-left:calc(20 * var(--u));

}



footer {

  position:absolute;

  left:0;

  right:0;

  bottom:calc(44 * var(--u));

  /* Mitgliedschaften beginnen am gemeinsamen 50%-Raster. */

  display:grid;

  grid-template-columns:var(--grid-title) calc(var(--grid-content) - var(--grid-title)) 1fr;

  align-items:center;

  white-space:nowrap;

}



footer .legal {

  grid-column:2;

}



footer .members {

  grid-column:3;

}



.legal,.members {

  display:flex;

  align-items:center;

  gap:calc(20 * var(--u));

}



.members {

  gap:calc(28 * var(--u));

}



.members img {

  width:calc(140 * var(--u));

  height:auto;

}



.members>span {

  margin-right:calc(20 * var(--u));

}



dialog {

  width:min(480px,calc(100% - 40px));

  padding:36px;

  border:0;

  border-radius:2px;

  color:var(--ink);

  font:16px/1.6 'CSL Open Sans',sans-serif;

  box-shadow:0 20px 80px #0003;

}



dialog::backdrop {

  background:#0007;

}



dialog h2 {

  font-size:26px;

  line-height:1.2;

  margin:12px 0 20px;

}



dialog p {

  margin:0;

}



.dialog-kicker {

  color:#e42a1b;

  font-size:12px;

  letter-spacing:.08em;

  text-transform:uppercase;

}



.dialog-close {

  position:absolute;

  top:4px;

  right:14px;

  font-size:28px;

  border:0;

  background:transparent;

  cursor:pointer;

}



.dialog-button {

  padding:10px 20px;

  color:white;

  background:#252525;

  border:0;

  cursor:pointer;

  margin-top:24px;

}



/* Tablet und Mobil: normaler Dokumentfluss statt der XD-Positionierung. */

@media(max-width:1100px) {

  :root {

    --u:1px;

  }

  body {

    font-size:16px;

    line-height:1.7;

  }

  .header {

    height:100px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 6%;

  }

  .brand {

    position:static;

    width:140px;

  }

  .header nav {

    position:static;

    gap:22px;

    font-size:12px;

  }

  .hero {

    height:540px;

  }

  .hero-background {

    left:29%;

  }

  h1 {

    top:92px;

    left:7%;

    font-size:clamp(32px,5.2vw,57px);

    line-height:1.25;

  }

  .plane {

    width:110%;

    left:-15%;

    top:300px;

  }

  .promise {

    height:auto;

    padding:90px 13% 100px 29%;

  }

  .promise-copy {

    position:static;

    width:auto;

  }

  .eyebrow {

    font-size:26px;

    line-height:1.4;

    margin-bottom:24px;

  }

  p+p {

    margin-top:24px;

  }

  .section-title {

    position:relative;

    left:auto;

    font-size:42px;

    line-height:1.3;

    top:auto!important;

    margin:0 0 45px;

  }

  .company {

    height:auto;

    padding:60px 7% 100px var(--grid-title);

  }

  .company .left-panel {

    height:85%;

    width:var(--grid-panel);

  }

  .company-copy {

    position:relative;

    left:auto;

    top:auto;

    width:63%;

    margin-left:auto;

  }

  .handshake {

    width:47%;

    left:-3%;

    top:240px;

  }

  .services {

    height:auto;

    padding:70px 10% 80px var(--grid-title);

  }

  .services-copy {

    position:relative;

    left:auto;

    top:auto;

    width:75%;

    margin-left:auto;

  }

  .clipboard {

    width:38%;

    top:260px;

  }

  .services-list {

    margin:28px 0 0 26px;

  }

  .services-list li {

    padding-left:18px;

  }

  .people {

    height:auto;

    margin-top:100px;

    padding:65px 7% 100px var(--grid-title);

  }

  .people .left-panel {

    height:600px;

  }

  .people-copy,.team-block {

    position:relative;

    left:auto;

    top:auto;

    width:63%;

    margin-left:auto;

  }

  .hands {

    width:46%;

    top:260px;

  }

  .team-block {

    margin-top:75px;

  }

  .team-block>.eyebrow {

    margin-bottom:28px;

  }

  .team-grid {

    column-gap:18px;

    row-gap:50px;

  }

  .person>img {

    height:auto;

    aspect-ratio:336/442;

    object-fit:cover;

  }

  .person blockquote,.person .quote-placeholder {

    font-size:13px;

    min-height:88px;

    margin-top:12px;

  }

  .person p {

    font-size:13px;

    margin-top:10px;

  }

  .knowledge {

    height:auto;

    padding:60px 7% 90px var(--grid-title);

  }

  .knowledge .left-panel {

    height:370px;

  }

  .knowledge-grid {

    position:relative;

    left:auto;

    right:auto;

    top:auto;

    width:63%;

    margin-left:auto;

    column-gap:28px;

    row-gap:38px;

  }

  .knowledge h3 {

    font-size:24px;

    margin-bottom:12px;

  }

  .knowledge-grid p,.knowledge-grid li {

    font-size:14px;

  }

  .bulb {

    width:52%;

    left:-3%;

    top:180px;

  }

  .contact {

    height:auto;

    padding:65px 7% 28px var(--grid-title);

  }

  .contact .section-title {

    position:absolute;

    top:65px!important;

    left:var(--grid-title);

    font-size:38px;

  }

  .contact-copy {

    position:relative;

    left:auto;

    right:auto;

    top:auto;

    width:63%;

    margin-left:auto;

  }

  .contact-grid {

    margin-top:40px;

    column-gap:28px;

    font-size:13px;

  }

  .contact h4 {

    font-size:21px;

  }

  .bubbles {

    width:24%;

    left:17%;

    top:155px;

  }

  .social {

    margin-top:24px;

  }

  footer {

    display:flex;

    position:static;

    margin-top:100px;

    gap:30px;

    flex-wrap:wrap;

    font-size:12px;

  }

  .legal,.members {

    gap:15px;

  }

  .members img {

    width:85px;

  }

  .members>span {

    margin-right:0;

  }

}



@media(max-width:700px) {

  html {

    scroll-padding-top:16px;

  }

  .header {

    height:84px;

    padding:0 24px;

  }

  .brand {

    width:118px;

  }

  .menu-toggle {

    display:flex;

    align-items:center;

    gap:12px;

    border:0;

    padding:12px 0 12px 12px;

    background:white;

    font-size:14px;

    cursor:pointer;

  }

  .menu-icon {

    width:22px;

    height:14px;

    position:relative;

    border-top:2px solid;

    border-bottom:2px solid;

  }

  .menu-icon:after {

    content:'';

    position:absolute;

    left:0;

    right:0;

    top:5px;

    border-top:2px solid;

  }

  .header nav {

    display:none;

    position:absolute;

    top:var(--header-height);

    left:0;

    right:0;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    padding:12px 24px 24px;

    background:white;

    box-shadow:0 14px 20px #0001;

    font-size:16px;

  }

  .header nav.is-open {

    display:flex;

  }

  .header nav a {

    padding:12px 0;

  }

  .hero {

    height:440px;

  }

  .hero-background {

    left:27%;

    bottom:0;

  }

  h1 {

    left:24px;

    right:12px;

    top:75px;

    font-size:clamp(26px,6.3vw,44px);

    line-height:1.3;

  }

  .plane {

    top:262px;

    left:-42%;

    width:140%;

  }

  .promise {

    padding:65px 24px 75px;

  }

  .eyebrow {

    font-size:22px;

    margin-bottom:24px;

  }

  .company,.services,.people,.knowledge,.contact {

    padding:48px 24px 60px;

  }

  .section-title {

    font-size:clamp(28px,7.6vw,42px);

    line-height:1.3;

    margin-bottom:30px;

  }

  .company .left-panel {

    width:65%;

    height:300px;

  }

  .handshake {

    position:relative;

    left:-44px;

    top:auto;

    width:90%;

    margin:12px 0 38px;

  }

  .company-copy,.services-copy,.people-copy,.team-block,.knowledge-grid,.contact-copy {

    position:relative;

    left:auto;

    top:auto;

    right:auto;

    width:100%;

    margin-left:0;

  }

  .company-copy .eyebrow {

    font-size:23px;

  }

  .services .section-title {

    margin-bottom:25px;

  }

  .clipboard {

    position:relative;

    left:-24px;

    top:auto;

    width:76%;

    margin:5px 0 30px;

  }

  .services-list {

    margin:28px 0 0;

  }

  .services-list li {

    padding-left:20px;

  }

  .people {

    margin-top:60px;

  }

  .people .left-panel {

    width:65%;

    height:360px;

  }

  .hands {

    position:relative;

    left:-24px;

    top:auto;

    width:94%;

    margin:16px 0 40px;

  }

  .people-copy {

    margin-bottom:42px;

  }

  .team-block {

    margin-top:0;

  }

  .team-grid {

    column-gap:16px;

    row-gap:36px;

  }

  .person blockquote,.person .quote-placeholder {

    min-height:110px;

    font-size:13px;

  }

  .person p {

    font-size:13px;

    margin-top:8px;

  }

  .knowledge .left-panel {

    width:65%;

    height:280px;

  }

  .bulb {

    position:relative;

    left:-40px;

    top:auto;

    width:110%;

    margin:10px 0 45px;

  }

  .knowledge-grid {

    column-gap:22px;

    row-gap:32px;

  }

  .knowledge h3 {

    font-size:22px;

  }

  .knowledge-grid p,.knowledge-grid li {

    font-size:14px;

    overflow-wrap:anywhere;

  }

  .contact .section-title {

    position:relative;

    left:auto;

    top:auto!important;

    font-size:36px;

  }

  .bubbles {

    position:relative;

    left:20px;

    top:auto;

    width:64%;

    margin:0 0 40px;

  }

  .contact-copy>.eyebrow {

    font-size:25px;

  }

  .contact-grid {

    margin-top:30px;

    column-gap:22px;

    font-size:14px;

  }

  .contact h4 {

    font-size:21px;

  }

  footer {

    margin-top:65px;

    gap:28px;

  }

  .members {

    width:100%;

    gap:16px;

    flex-wrap:wrap;

  }

  .members img {

    width:74px;

  }

  .members>span {

    width:100%;

  }

  .legal {

    gap:16px;

  }

  .linkedin-icon {

    margin-left:12px;

  }

}



@media(prefers-reduced-motion:reduce) {

  html {

    scroll-behavior:auto;

  }

}



@media print {

  .menu-toggle,.skip-link,dialog {

    display:none!important;

  }

  body {

    print-color-adjust:exact;

    -webkit-print-color-adjust:exact;

  }

  a {

    text-decoration:none;

  }

  .site {

    overflow:visible;

  }

}



/* Externe SVG-Dokumente: auch eigenständige CSS-, SMIL- oder JS-Animationen. */

.illustration .svg-static,.illustration .svg-animation {

  position:absolute;

  inset:0;

  display:block;

  width:100%;

  height:100%;

  border:0;

  pointer-events:none;

}



.illustration .svg-animation {

  visibility:hidden;

}



.illustration.is-playing .svg-animation {

  visibility:visible;

}



.illustration.is-playing .svg-static {

  visibility:hidden;

}



@media(prefers-reduced-motion:reduce) {

  .illustration .svg-animation {

    display:none;

  }

  .illustration.is-playing .svg-static {

    visibility:visible;

  }

}



@media(max-width:480px) {

  .knowledge-grid,.contact-grid {

    grid-template-columns:1fr;

    row-gap:30px;

  }

  .knowledge-grid p,.knowledge-grid li,.contact-grid {

    font-size:16px;

  }

  .knowledge-grid {

    overflow-wrap:normal;

  }

  .knowledge-grid p,.knowledge-grid li {

    overflow-wrap:normal;

  }

  .contact h4 {

    margin-bottom:8px;

  }

}



/* Fixierte, leicht transparente Navigation mit Platz für die Sprungziele. */

:root {

  --header-height:calc(107.25 * var(--u));

}



.site {

  padding-top:var(--header-height);

}



.header {

  position:fixed;

  top:0;

  left:50%;

  transform:translateX(-50%);

  width:min(100%,1920px);

  height:var(--header-height);

  z-index:30;

  background:rgba(255,255,255,.7);

  -webkit-backdrop-filter:blur(12px);

  backdrop-filter:blur(12px);

}



html {

  scroll-padding-top:calc(var(--header-height) + 20px);

}



section {

  scroll-margin-top:0;

}



.skip-link {

  z-index:40;

}



.menu-toggle {

  background:transparent;

}



@media(max-width:1100px) {

  :root {

    --header-height:75px;

  }

}



@media(max-width:700px) {

  :root {

    --header-height:63px;

  }

  .header nav {

    background:rgba(255,255,255,.97);

  }

}



/* Die Dauer der Navigation steuert JavaScript exakt; kein zweites Browser-Easing. */

html {

  scroll-behavior:auto;

}



/* Sprungziele erhalten Fokus für die Tastaturnavigation, aber keinen Flächenrahmen. */

main > section[tabindex="-1"]:focus {

  outline: none;

}



/* Dezente Tiefe: nur die Gestaltungsebenen bewegen, der Textfluss bleibt stabil. */

.parallax-layer {

  transform: translate3d(0, var(--parallax-y, 0px), 0);

  transition: transform 1400ms cubic-bezier(.22, .05, .12, 1);

}

.services, .contact {

  background: transparent;

  isolation: isolate;

}

.parallax-background {

  position: absolute;

  inset: 0;

  z-index: -1;

  background: var(--grey);

  pointer-events: none;

}

@media (prefers-reduced-motion: reduce) {

  .parallax-layer {

    transform: none !important;

    transition: none;

  }

}

@media print {

  .parallax-layer {

    transform: none !important;

    transition: none;

  }

}



/* Kleine Ziele bleiben mit Finger und Tastatur gut erreichbar. */

@media (pointer: coarse) {

  .header nav a { min-height: 44px; display: flex; align-items: center; }

  .link-list a, .text-link { display: inline-block; padding-block: 5px; }

}



/* Getrennte Bewegungsphasen: Titel reagieren früher und kürzer als Illustrationen. */

.parallax-layer[data-parallax-kind="headline"] { transition-duration: 650ms; }

.parallax-layer[data-parallax-kind="subtitle"] { transition-duration: 950ms; }

.parallax-layer[data-parallax-kind="svg"] { transition-duration: 1400ms; }

.parallax-layer[data-parallax-kind="background"] { transition-duration: 1800ms; }



/* Austauschbarer SVG-Platzhalter gemäss aktualisiertem XD/PDF. */

.hero-placeholder {

  width: calc(326 * var(--u) * .8);

  right: 5%;

  top: calc(46 * var(--u));

}

@media (max-width: 1100px) {

  .hero-placeholder { width: min(17vw, 160px); right: 6%; top: 26px; }

}

@media (max-width: 700px) {

  .hero-placeholder { width: 64px; right: 28px; top: 20px; }

}



/* Alle Textlinks sind in jedem Zustand sichtbar unterstrichen. */

a,

a:visited,

a:hover,

a:focus,

a:active,

.header nav a,

.person a,

.address-link,

.text-link {

  text-decoration-line: underline;

  text-underline-offset: 3px;

  text-decoration-thickness: 1px;

}



/* LinkedIn: nur den Linktext unterstreichen, nicht das Icon. */

.social a.linkedin-link {

  text-decoration: none;

}

.linkedin-label {

  text-decoration: underline;

  text-underline-offset: 3px;

  text-decoration-thickness: 1px;

}

.linkedin-icon {

  display: inline-block;

  text-decoration: none;

}



/* Mobile Navigation: drei rote Balken mit gleichen Abständen, einmaliges Einblenden. */

@media (max-width: 700px) {

  .menu-toggle { color: var(--red); }

  .menu-icon {

    display: grid;

    grid-template-rows: repeat(3, 3px);

    row-gap: 5px;

    width: 26px;

    height: 19px;

    border: 0;

  }

  .menu-icon::after { display: none; }

  .menu-bar {

    display: block;

    width: 100%;

    height: 3px;

    border-radius: 1px;

    background: currentColor;

    animation: menu-middle-in 700ms cubic-bezier(.22, .05, .12, 1) 80ms both;

  }

  .menu-bar:first-child { animation-name: menu-top-in; }

  .menu-bar:last-child { animation-name: menu-bottom-in; }



  /* Eigener Bereich über der Headline für den späteren Jubiläumsbutton. */

  .hero {

    --mobile-circle: 34vw;

    --mobile-hero-type: clamp(26px, 6.3vw, 44px);

    height: calc(var(--mobile-circle) + 180px + var(--mobile-hero-type) * 3.9 + 17.11vw);

  }

  .hero-placeholder {

    width: var(--mobile-circle);

    aspect-ratio: 1 / 1;

    top: 24px;

    right: 28px;

    overflow: visible;

  }

  .hero h1 {

    top: calc(var(--mobile-circle) + 68px);

    font-size: var(--mobile-hero-type);

  }

  .hero .plane {

    top: calc(var(--mobile-circle) + 116px + var(--mobile-hero-type) * 3.9);

  }

}

@keyframes menu-top-in {

  from { opacity: 0; transform: translateY(-9px); }

  to { opacity: 1; transform: translateY(0); }

}

@keyframes menu-middle-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

@keyframes menu-bottom-in {

  from { opacity: 0; transform: translateY(9px); }

  to { opacity: 1; transform: translateY(0); }

}

@media (prefers-reduced-motion: reduce) {

  .menu-bar { animation: none; }

}



/* Gleiche sichtbare Oberkante trotz unterschiedlicher Schriftgrössen. */

@media(min-width:1101px) {

  .contact-copy > .eyebrow {

    transition-duration:650ms;

  }

}



/* Sprachwahl: Desktop im Header, mobil als letzter Navigationspunkt. */

.language-switch {

  position:absolute;

  right:var(--grid-margin);

  top:calc(64 * var(--u));

  font-weight:700;

  z-index:6;

}

.language-switch summary {

  display:flex;

  align-items:center;

  gap:9px;

  cursor:pointer;

  list-style:none;

}

.language-switch summary::-webkit-details-marker { display:none; }

.language-switch summary:focus-visible { outline:2px solid var(--red); outline-offset:5px; }

.language-chevron { width:7px; height:7px; border-right:2px solid; border-bottom:2px solid; transform:rotate(45deg) translateY(-2px); }

.language-switch[open] .language-chevron { transform:rotate(225deg); }

.language-options {

  position:absolute;

  top:calc(100% + 12px);

  right:0;

  min-width:140px;

  padding:10px 16px;

  background:rgba(255,255,255,.98);

  box-shadow:0 5px 20px #0002;

}

.language-options a { display:block; padding:8px 0; text-decoration:underline; }

.language-options a[aria-current="page"] { color:var(--red); }

@media(min-width:1101px) {

  .header nav { left:43%; right:15%; }

}

@media(min-width:701px) and (max-width:1100px) {

  .header { padding-right:14%; }

  .header nav { gap:16px; }

  .language-switch { top:40px; right:5%; font-size:12px; }

}

@media(max-width:700px) {

  .menu-toggle { margin-right:0; }

  .language-switch { position:static; font-size:16px; }

  .language-switch summary { min-height:44px; padding:12px 0; }

  .language-options { position:static; padding:0 0 0 16px; background:transparent; box-shadow:none; }

  .language-options a { min-height:44px; }

  .header nav { max-height:calc(100dvh - var(--header-height)); overflow-y:auto; }

}

@media print { .language-switch { display:none; } }

@media(min-width:701px) and (max-width:850px) {

  .header .brand { width:110px; }

  .header nav { gap:12px; font-size:11px; }

}



/* Unternehmensfilm zwischen Vorstellung und Dienstleistungen, am Header-Raster. */

.company-video {

  padding:0 var(--grid-margin) calc(100 * var(--u));

}

.company-video video {

  display:block;

  width:100%;

  height:auto;

  aspect-ratio:16 / 9;

  background:#000;

}

@media(max-width:1100px) {

  .company-video { padding-bottom:80px; }

}

@media(max-width:700px) {

  .company-video { padding:0 24px 60px; }

}



/* Kompakter Header: 25% weniger Höhe, Inhalte vertikal zentriert. */

@media(min-width:1101px) {

  .header .brand, .header nav, .header .language-switch {

    top:50%;

    transform:translateY(-50%);

  }

}

@media(min-width:701px) and (max-width:1100px) {

  .header .language-switch { top:50%; transform:translateY(-50%); }

}



/* Dienstleistungen: jede weitere Zeile startet 150 ms später. */

@media(prefers-reduced-motion:no-preference) {

  .services-list.reveal-ready li { opacity:0; transform:translateY(8px); }

  .services-list.reveal-ready.is-revealed li {

    animation:service-line-in 500ms ease-in-out both;

    animation-delay:var(--line-delay, 0ms);

  }

}

@keyframes service-line-in {

  from { opacity:0; transform:translateY(8px); }

  to { opacity:1; transform:translateY(0); }

}



/* Externe Textlinks: SVG aus img/external-link.svg eingebettet, damit der Pfeil auch über file:// funktioniert. */

a.external-link:not(.linkedin-link)::after,

a.external-link .linkedin-label::after {

  content:"";

  display:inline-block;

  width:.75em;

  height:.75em;

  margin-left:.3em;

  vertical-align:baseline;

  background-color:currentColor;

  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3%2013%2013%203M4%203h9v9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;

  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3%2013%2013%203M4%203h9v9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;

}



/* Zusätzliche Team-Kontaktdaten bestimmen die Abschnittshöhe automatisch. */

@media(min-width:1101px) {

  .people { height:auto; min-height:calc(2923 * var(--u)); padding-top:calc(995 * var(--u)); padding-bottom:calc(150 * var(--u)); }

  .team-block { position:relative; top:auto; }

}

.person p a[href^="mailto:"] { overflow-wrap:anywhere; }



/* Keine zusätzliche Leerfläche unter kürzeren Mitarbeiterzitaten. */

.person blockquote { min-height:0; }



/* Mobil: Namen direkt unter dem Zitat, ohne reservierte Leerzeilen. */

@media(max-width:700px) {

  .person blockquote { min-height:0; margin-bottom:0; }

  .person blockquote + p { margin-top:8px; }

  .person .quote-placeholder { display:none; }

}



/* Mobil: graue Flächen unterhalb des Hero um 40px nach unten verlängern. */

@media(max-width:700px) {

  .company .left-panel { height:340px; }

  .people .left-panel { height:400px; }

  .knowledge .left-panel { height:320px; }

  .services, .contact { padding-bottom:100px; }

}



/* Mobil: Inhalte unter den Illustrationen folgen der um 40px verlängerten Fläche. */

@media(max-width:700px) {

  .company-copy, .services-copy, .people-copy, .knowledge-grid, .contact-copy {

    padding-top:40px;

  }

}