@charset "UTF-8";
@import url("reset.css");
@import url("fonts.css");

/* ==========================================================================
   DESIGN TOKENS  - 1:1 aus dem Original uebernommen
   Referenzbreite 1600px:  html font-size = 100vw / 1600  ->  1rem = 1px
   ========================================================================== */
:root {
  --app-height: 100vh;
  /* Hoehe der schwebenden Topbar, in rem damit sie mitskaliert:
     20rem + 32rem Aussenabstand + 40rem Innenabstand + 26.8rem Logo.
     Muss ab dem ersten Frame stimmen, sonst springt die Seite beim Laden.
     JS korrigiert den Wert danach auf den Subpixel genau. */
  --headroom-height: 118.805rem;

  --c0: #ffffff;
  --c1: #17181C;
  --c2: #D81420;
  --c3: #F5F2F0;
  --c4: rgba(216, 20, 32, 0.16);
  --c5: #ee0000;
  --c6: rgba(0, 0, 0, 0.7);
  --c7: #bfbfbf;
  --c8: #5e5e5e;

  --wr: 20rem;
  --awr: calc(-1 * var(--wr));
  --gap: 20rem;
  --sl: max(1px, 1rem);
  --br1: 10rem;
  --br2: 20rem;
  --btn: max(55px, 60rem);

  --f-s: max(14px, 18rem);
  --f-d: max(14px, 20rem);
  --f-m: max(14px, 28rem);
  --f-b: max(14px, 40rem);
  --f-l: max(14px, 64rem);
  --f-xl: max(14px, 72rem);
  --f-xxl: max(14px, 80rem);
  --f-xxxl: max(14px, 90rem);

  --mw: 1920px;
  --kw: 1vw;
}

/* ==========================================================================
   GLOBALS
   ========================================================================== */
html {
  font-size: 0.0625vw;
  background-color: var(--c3);
}

body { overflow-x: hidden; }

.document {
  font-weight: 400;
  font-family: "Aspekta", sans-serif;
  font-size: var(--f-d);
  line-height: 1.2;
  color: var(--c1);
  background-color: var(--c3);
  letter-spacing: -0.02em;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--wr);
  max-width: var(--mw);
}

.container {
  display: flex;
  flex-direction: column;
  min-height: var(--app-height);
}

.main {
  margin-top: calc(-1 * var(--headroom-height));
  flex: auto;
  display: flex;
  flex-direction: column;
}

.cover, .contain {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-position: center;
  pointer-events: none;
}
.cover   { object-fit: cover; }
.contain { object-fit: contain; }

.icon {
  display: flex;
  max-height: 100%;
  align-items: center;
  justify-content: center;
  line-height: 0;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ==========================================================================
   TITLE
   ========================================================================== */
.title {
  line-height: 0.95;
  font-weight: 500;
  width: 100%;
  color: var(--c1);
  letter-spacing: -0.03em;
}
.title__default { font-size: var(--f-xl); }
.title__large   { font-size: var(--f-xxl); }

/* ==========================================================================
   BUTTON
   ========================================================================== */
.button {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  user-select: none;
  cursor: pointer;
  align-items: center;
  background-clip: border-box;
}
.button:not(.fill) {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 0 0.1em;
}
.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10rem;
  width: max(10px, 12rem);
  height: max(10px, 18rem);
}
.button-icon:first-child { margin-left: 0; }
.button-icon:last-child  { margin-right: 0; }

.button__default {
  background-color: var(--c0);
  color: var(--c2);
  padding: 0 50rem;
  height: var(--btn);
  border-radius: var(--br1);
  border: var(--sl) solid transparent;
}
.button__default .button-text {
  font-weight: 500;
  letter-spacing: -0.03em;
}
.button__contrast {
  background-color: var(--c2);
  color: var(--c0);
}
.button__wide { width: 100%; }

/* ==========================================================================
   HEADER / TOPBAR
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 15;
  pointer-events: none;
}

.topbar {
  background-color: var(--c0);
  color: var(--c1);
  border-radius: var(--br2);
  margin: 20rem 0 32rem;
  padding: 20rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: var(--gap);
  align-items: center;
  pointer-events: all;
  box-shadow: 0 0 10rem var(--c4);
}

.topbar-logo {
  max-width: 190rem;
  line-height: 0;
}
.topbar-logo svg { width: 100%; height: auto; display: block; }
.wordmark {
  font-family: "Aspekta", sans-serif;
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 2.2px;
  fill: var(--c2);
}

.topbar-nav,
.topbar-action {
  font-weight: 500;
  font-size: var(--f-s);
  letter-spacing: -0.03em;
}
.topbar-nav ul {
  display: grid;
  grid-auto-flow: column;
  grid-gap: var(--gap);
  align-items: center;
}
.topbar-action {
  margin-left: auto;
  text-decoration: underline;
}

/* ==========================================================================
   DESKTOP  (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .mobile { display: none !important; }

  .hide-scrollbar {
    overflow: -moz-scrollbars-none !important;
    scrollbar-width: none;
  }
  .hide-scrollbar::-webkit-scrollbar { display: none; }

  /* Leading-Trim: kappt die Halb-Zeilenhoehe ober- und unterhalb der
     Versalhoehe. Ohne diese Regel sind alle Titel ~17px zu hoch. */
  .title { text-box: trim-both cap alphabetic; }
}

/* ==========================================================================
   PAGE HEADER  (Hero-Slide 1)
   ========================================================================== */
.page-header { position: relative; }

.page-header-inner {
  min-height: var(--app-height);
  padding: 40rem 0 40rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 50rem var(--gap);
  grid-template-rows: 1fr auto 1fr;
  text-align: center;
}
.page-header-media {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.page-header-content {
  grid-row: 2/3;
  grid-column: 2/4;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.page-header-content:last-child { margin-top: 50rem; }
.page-header-title {
  margin: 0 calc((100% + var(--gap)) / -2);
}
.page-header-subtitle { margin-top: 30rem; }
.page-header-action   { margin-top: 40rem; }
.page-header-scroll {
  grid-row: 3/4;
  grid-column: 2/4;
  margin: auto auto 0;
  font-size: var(--f-m);
  font-weight: 600;
  color: var(--c2);
  position: relative;
  z-index: 1;
  cursor: pointer;
}

/* ==========================================================================
   HERO SNAP
   ========================================================================== */
#hero-snap {
  margin-bottom: clamp(50px, 14.6484375vw, 300rem);
  position: relative;
}
#hero-snap .hero-animation {
  position: absolute;
  top: 0; left: 0;
  bottom: -100rem;
  right: 0;
}

.hero-snap {
  top: 0;
  height: var(--vh, 100vh);
  overflow: hidden;
  margin: 0 !important;
}
.hero-snap .page-header-title { max-width: 1200rem; }
.hero-snap__track { will-change: transform; }
.hero-snap__animation {
  top: 0; left: 0;
  overflow-x: clip;
  position: absolute;
  height: var(--vh, 100vh);
  pointer-events: none;
  width: 100%;
}
.hero-snap__slide {
  position: relative;
  height: var(--vh, 100vh);
  scroll-snap-align: center;
  background: transparent;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* ==========================================================================
   HERO TILES
   ========================================================================== */
.hero-tile { position: absolute; }

/* Objekte werden immer sauber, mittig und ohne Verdrehung/Unschaerfe dargestellt */
.hero-tile img { object-fit: contain; object-position: center; transform: none; filter: none; }

/* --- SLIDE 1 (sichtbarer Startbildschirm): 3 verschiedene Objekte an den Ecken --- */
/* Molekuel: mittig links, ragt leicht heraus */
.hero-tile-5  { top: 50%; left: 0;  width: calc(26 * var(--kw)); height: calc(26 * var(--kw)); transform: translate(-30%, -50%); }
/* Chip: oben rechts, vollstaendig im Bild */
.hero-tile-6  { top: 0; right: 0;   width: calc(17 * var(--kw)); height: calc(17 * var(--kw)); transform: translate(-18%, 22%); }
/* Wuerfel-Cluster: unten rechts */
.hero-tile-11 { bottom: 0; right: 0; width: calc(21 * var(--kw)); height: calc(21 * var(--kw)); transform: translate(-14%, -14%); }

/* --- SLIDE 2 --- */
/* Fluss/Roehren: links */
.hero-tile-7  { top: 132%; left: 0;  width: calc(23 * var(--kw)); height: calc(23 * var(--kw)); transform: translate(-24%, -30%); }
/* nicht benoetigt (vermeidet Doppelung) */
.hero-tile-8  { display: none; }

/* --- SLIDE 3 --- */
/* Molekuel klein: links unten */
.hero-tile-9  { top: 182%; left: 0;  width: calc(19 * var(--kw)); height: calc(19 * var(--kw)); transform: translate(-22%, 0); }
/* Chip: rechts */
.hero-tile-10 { top: 206%; right: 0; width: calc(18 * var(--kw)); height: calc(18 * var(--kw)); transform: translate(-24%, -30%); }

/* ==========================================================================
   SECTION s14  (Hero-Slides 2 + 3)
   ========================================================================== */
.section { position: relative; z-index: 1; margin-bottom: 200rem; }

.s14-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--gap);
  padding: 100rem 0;
  min-height: var(--app-height);
  align-items: center;
}
.s14-3 { grid-column-end: span 2; }
.s14-4 {
  display: grid;
  grid-template-columns: auto;
  width: min-content;
}
.s14-4-1 {
  margin-bottom: 20rem;
  padding-bottom: 20rem;
  border-bottom: var(--sl) solid var(--c7);
  white-space: nowrap;
}
.s14-4-2 { min-width: 0; }
.s14-2__1 .s14-3 { grid-column-start: 2; }
.s14-2__2 .s14-3 { grid-column-start: 3; }

/* ==========================================================================
   FOOTER  (Struktur 1:1 aus der Vorlage, Inhalte neutral)
   ========================================================================== */
.footer {
  overflow: hidden;
  margin-top: 0;
  padding: 60rem 0 120rem;
  background-color: var(--c0);
  color: var(--c1);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40rem var(--gap);
  align-items: flex-start;
  grid-template-rows: 1fr auto;
  grid-template-areas: "f1 f2 f2 f3" "f1 f2 f2 f4";
}
.f1 { grid-area: f1; }
.f1-1 { max-width: 240rem; }
.f1-1 svg { width: 100%; height: auto; display: block; }
.f1-2 { margin-top: 30rem; max-width: 200rem; }
.f1-3 { margin-top: 35rem; }

.f2 {
  grid-area: f2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--gap);
}
.f2-1-1 { margin-bottom: 30rem; color: var(--c6); }
.f2-1-2 ul {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10rem;
}

.f3 { grid-area: f3; color: var(--c6); font-size: var(--f-s); }
.f3-2:not(:first-child) { margin-top: 10rem; }
.f3-2 ul {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10rem;
}

.f4 { grid-area: f4; font-size: var(--f-s); }
.bottombar-author { display: flex; align-items: baseline; color: var(--c6); }

/* dezente Link-Hover in der Fusszeile */
.footer a:not(.button) { transition: opacity 0.2s; }

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .footer a:not(.button):hover { opacity: 0.55; }
}

/* ==========================================================================
   MOBILE  (< 1024px)
   ========================================================================== */
@media (max-width: 1023.98px) {
  :root {
    --wr: 15rem;
    --gap: 10rem;
    --br2: 12rem;
    --btn: 54rem;
    --f-s: 14rem;
    --f-d: 16rem;
    --f-btn: 18rem;
    --f-m: 20rem;
    --f-b: 24rem;
    --f-l: 28rem;
    --f-xl: 32rem;
    --f-xxl: 44rem;
    --f-xxxl: 52rem;
    --mw: 640rem;
    --kw: 2vw;
    /* 15rem + 15rem Aussenabstand + 30rem Innenabstand + 40rem Burger */
    --headroom-height: 100rem;
  }
  html { font-size: 1px; }

  .desktop { display: none !important; }

  .button { width: 100%; }
  .button__default .button-text { font-size: var(--f-btn); }

  .topbar {
    grid-template-columns: 1fr auto;
    margin: 15rem 0;
    padding: 15rem 15rem 15rem 20rem;
  }
  .topbar-nav, .topbar-action { display: none; }
  .topbar-logo { max-width: 125rem; }

  .topbar-menu {
    position: relative;
    display: flex;
    width: 40rem;
    height: 40rem;
    align-items: center;
    border-radius: 50%;
    background-color: var(--c2);
    color: var(--c0);
    padding: 10rem;
  }
  .topbar-menu-inner {
    position: relative;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
    justify-content: center;
    margin: -10rem;
    padding: 10rem;
  }
  .topbar-menu-inner::before,
  .topbar-menu-inner::after,
  .topbar-menu-inner span {
    position: absolute;
    left: 50%; top: 50%;
    width: calc(100% - 20rem);
    height: 1px;
    transform-origin: center;
  }
  .topbar-menu-inner::before {
    content: "";
    background-color: currentColor;
    transform: translate(-50%, calc(-50% - 5rem));
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .topbar-menu-inner::after {
    content: "";
    background-color: currentColor;
    transform: translate(-50%, calc(-50% + 5rem));
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .topbar-menu-inner span {
    display: block;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease, background-color 0.15s ease;
  }

  .page-header { margin-bottom: 100rem; }
  .page-header-inner {
    padding: 20rem 0;
    grid-template-columns: auto;
  }
  .page-header-content { grid-column: auto; }
  .page-header-content:last-child { margin-top: 80rem; }
  .page-header-title { margin: 0; max-width: 340rem; }
  .page-header-subtitle { margin-top: 20rem; max-width: 185rem; }
  .page-header-action { margin-top: 15rem; }
  .page-header-scroll { grid-column: auto; }

  .hero { margin-bottom: 100rem; }

  /* --- Kachel-Positionen auf Mobile: eigene Choreografie --- */
  .hero-animation { bottom: -50rem; }

  .hero-tile-1 { transform: translate(-40%, -45%); }
  .hero-tile-2 { transform: translate(55%, -25%); }

  .hero-tile-3 { transform: translate(15%, -15%); left: 50%; }
  .hero-tile-3 img { transform: scaleX(-1); }

  .hero-tile-4 { transform: translate(-20%, -75%); right: 50%; }
  .hero-tile-4 img { transform: scaleX(-1); filter: none; }

  .hero-tile-5 { bottom: 50%; transform: translate(-75%, 0%); }
  .hero-tile-6 { transform: translate(30%, -25%); }
  .hero-tile-7 { display: none; }
  .hero-tile-8 { transform: translate(45%, -100%); }

  .hero-tile-9 { transform: translate(45%, 100rem) scale(0.75); }
  .hero-tile-9 img { transform: scaleX(-1); }

  .hero-tile-10 { transform: translate(-90%, -120%); }
  .hero-tile-10 img { transform: scaleX(1); }

  .hero-tile-11 { transform: translate(40%, -10%); }

  .s14-2 { grid-template-columns: auto; padding: 60rem 0; }
  .s14-2__1 .s14-3, .s14-2__2 .s14-3 { grid-column-start: auto; }
  .s14-3 { grid-column-end: auto; }
  .s14-4 { width: auto; }
  .s14-4-1 { white-space: normal; }
}

/* ==========================================================================
   >= 1920px
   ========================================================================== */
@media (min-width: 1920px) {
  html { font-size: 1px; }
}

/* ==========================================================================
   HOVER
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .button__default { transition: all 0.25s; }
  .button__default:hover {
    border-color: var(--c2);
    color: var(--c2);
  }
  .topbar-nav a, .topbar-action a { transition: opacity 0.25s; }
  .topbar-nav a:hover, .topbar-action a:hover { opacity: 0.5; }
}

/* ==========================================================================
   FOOTER  – Mobile (< 1024px)
   ========================================================================== */
@media (max-width: 1023.98px) {
  .footer { padding: 40rem 0; }
  .footer-grid {
    grid-template-columns: auto;
    grid-template-areas: "f1" "f2" "f3" "f4";
    grid-gap: 30rem;
  }
  .f1-1 { max-width: 165rem; }
  .f1-2 { margin-top: 10rem; max-width: none; }
  .f1-3 { margin-top: 25rem; }
  .f2 { grid-template-columns: auto; grid-gap: 30rem; }
  .f2-1-1 { margin-bottom: 10rem; }
}

/* ==========================================================================
   FOOTER-REVEAL  (sanftes Einblenden beim Hereinscrollen)
   Standard: sichtbar. Nur wenn JS aktiv ist (.js-reveal), Startzustand setzen.
   ========================================================================== */
.js-reveal .footer {
  opacity: 0;
  transform: translateY(40rem);
  transition: opacity 0.9s cubic-bezier(.32,.72,0,1),
              transform 0.9s cubic-bezier(.32,.72,0,1);
  will-change: opacity, transform;
}
.js-reveal .footer.in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   LOGO (5DORA AI Bildlogo) – ersetzt die Platzhalter-Wortmarke
   ========================================================================== */
.topbar-logo { max-width: none; line-height: 0; }
.topbar-logo img { height: 34rem; width: auto; display: block; }
.f1-1 img { height: 46rem; width: auto; display: block; }

@media (max-width: 1023.98px) {
  .topbar-logo img { height: 30rem; }
  .f1-1 img { height: 40rem; }
}

/* ==========================================================================
   HERO: Eyebrow-Zeile + zwei CTAs nebeneinander
   ========================================================================== */
.page-header-eyebrow {
  font-weight: 500;
  font-size: max(12px, 15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c8);
  margin: 0 0 24rem;
}

.page-header-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16rem;
}

@media (max-width: 1023.98px) {
  .page-header-eyebrow { margin-bottom: 16rem; letter-spacing: 0.12em; }
  .page-header-action { width: 100%; gap: 10rem; }
}

/* ==========================================================================
   SPRACH-UMSCHALTER (DE / EN) + rechte Leiste
   ========================================================================== */
.topbar-action {
  display: flex;
  align-items: center;
  gap: 22rem;
  margin-left: auto;
  text-decoration: none;
}
.topbar-cta { text-decoration: underline; white-space: nowrap; }

.topbar-lang {
  display: inline-flex;
  align-items: center;
  gap: 7rem;
  font-size: max(12px, 15rem);
  letter-spacing: 0.04em;
}
.topbar-lang button {
  cursor: pointer;
  color: var(--c8);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1;
}
.topbar-lang button[aria-pressed="true"] { color: var(--c2); }
.topbar-lang-sep { color: var(--c7); }

@media (hover: hover) and (pointer: fine) {
  .topbar-lang button:hover { color: var(--c1); }
}

/* Mobile: rechte Leiste bleibt sichtbar, aber nur der Umschalter (kein CTA-Text) */
@media (max-width: 1023.98px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .topbar-action { display: flex; gap: 0; }
  .topbar-cta { display: none; }
}

/* ==========================================================================
   ERKLAER-SECTION (Slide 2: Einleitung, Slide 3: drei Saeulen)
   Fuellt die Snap-Slides vertikal zentriert; Text ist zweisprachig (data-de/en)
   ========================================================================== */
.section.explain { margin-bottom: 0; }
.explain > .wrapper {
  min-height: var(--app-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120rem 0;
}

.explain-eyebrow {
  font-weight: 500;
  font-size: max(12px, 15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c8);
  margin: 0 0 24rem;
}
.explain-center {
  max-width: 920rem;
  margin: 0 auto;
  text-align: center;
}
.explain-lead {
  margin: 30rem auto 0;
  max-width: 640rem;
  font-size: var(--f-d);
  color: var(--c6);
}

/* drei Saeulen */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40rem var(--gap);
}
.pillar { display: flex; flex-direction: column; }
.pillar-num {
  font-size: var(--f-s);
  font-weight: 500;
  color: var(--c2);
  letter-spacing: 0.04em;
  padding-bottom: 20rem;
  margin-bottom: 26rem;
  border-bottom: var(--sl) solid var(--c7);
}
.title__pillar { font-size: var(--f-m); }
.pillar-sub {
  margin-top: 14rem;
  font-size: var(--f-s);
  color: var(--c8);
}
.pillar-desc {
  margin-top: 22rem;
  color: var(--c1);
}

@media (max-width: 1023.98px) {
  .explain > .wrapper { padding: 70rem 0; }
  .explain-center { text-align: left; }
  .pillars { grid-template-columns: auto; gap: 34rem; }
  .pillar-num { margin-bottom: 16rem; padding-bottom: 14rem; }
}

/* ==========================================================================
   DREI BEREICHE (Design / Automation / KI) – editoriale Liste, keine "Schritte"
   ========================================================================== */
.section.areas { margin-bottom: 0; }
.areas > .wrapper {
  min-height: var(--app-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120rem 0;
}
.areas-block { max-width: 860rem; margin: 0 auto; width: 100%; }
.areas-head {
  font-size: var(--f-b);
  font-weight: 500;
  color: var(--c2);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 46rem;
}
.area-item {
  display: grid;
  grid-template-columns: 220rem 1fr;
  gap: 10rem var(--gap);
  align-items: baseline;
  padding: 28rem 0;
  border-top: var(--sl) solid var(--c7);
}
.area-item:last-child { border-bottom: var(--sl) solid var(--c7); }
.area-k {
  font-size: var(--f-s);
  font-weight: 500;
  color: var(--c2);
  letter-spacing: 0.02em;
}
.area-tag {
  font-size: var(--f-m);
  font-weight: 500;
  color: var(--c1);
  letter-spacing: -0.02em;
  margin-bottom: 12rem;
}
.area-desc { color: var(--c6); }

/* ==========================================================================
   TECHNOLOGIE & SICHERHEIT – Lead + kleine Punkte
   ========================================================================== */
.tech-lead {
  font-weight: 500;
  color: var(--c2);
  margin-bottom: 20rem;
  letter-spacing: -0.01em;
}
.tech-points {
  margin-top: 28rem;
  display: grid;
  grid-template-columns: auto;
  gap: 14rem;
}
.tech-points li { display: flex; flex-direction: column; gap: 3rem; }
.tech-points b { font-weight: 500; color: var(--c1); }
.tech-points span { color: var(--c8); font-size: var(--f-s); }

@media (max-width: 1023.98px) {
  .areas > .wrapper { padding: 80rem 0; }
  .areas-block { max-width: none; }
  .areas-head { margin-bottom: 30rem; }
  .area-item { grid-template-columns: auto; gap: 8rem; padding: 22rem 0; }
}

/* ==========================================================================
   SCALE / IMPACT (5DORA in Aktion) – grosse Zahlen
   ========================================================================== */
.section.impact { margin-bottom: 0; }
.impact > .wrapper {
  min-height: var(--app-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120rem 0;
  text-align: center;
}
.impact-eyebrow {
  font-weight: 500;
  font-size: max(12px, 15rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c8);
  margin-bottom: clamp(40px, 6vh, 80rem);
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60rem var(--gap);
  width: 100%;
  max-width: 1200rem;
}
.impact-item { display: flex; flex-direction: column; gap: 12rem; }
.impact-num {
  font-size: var(--f-l);
  font-weight: 500;
  color: var(--c2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.impact-label {
  font-size: var(--f-s);
  color: var(--c8);
}

@media (max-width: 1023.98px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); gap: 44rem var(--gap); }
}

/* ==========================================================================
   SAUBERKEIT: Text klar von den Figuren trennen (keine Überlappung)
   ========================================================================== */
/* Text/Inhalt immer über den Objekten */
.hero-snap__track { position: relative; z-index: 2; }
.hero-snap__animation { z-index: 0; }
.page-header-content, .page-header-scroll { z-index: 3; }

@media (min-width: 1024px) {
  /* Hero-Headline nicht mehr extrem breit -> klärt die Ecken-Objekte */
  .page-header-title { margin: 0 calc((100% + var(--gap)) / -4); }

  /* Figuren weiter in die Ecken, etwas kleiner -> frei vom Text */
  .hero-tile-5  { top: auto; bottom: 0; width: calc(26 * var(--kw)); height: calc(26 * var(--kw)); transform: translate(-30%, 18%); }
  .hero-tile-6  { width: calc(17 * var(--kw)); height: calc(17 * var(--kw)); transform: translate(4%, -11%); }
  .hero-tile-11 { width: calc(22 * var(--kw)); height: calc(22 * var(--kw)); transform: translate(4%, 3%); }
}

/* Zahlen-Reihe schmaler -> Rand-Zahlen bleiben frei von Eck-Objekten */
.impact-grid { max-width: 980rem; }

/* (Freies-Scrollen-Block entfernt – zurück zum Scroll-Effekt) */

/* Kennzahlen sind jetzt kurze Eigenschaften (24/7, Sekunden, 3 in 1, 0) –
   etwas kleiner, damit auch Woerter sauber passen. */
.impact-num { font-size: var(--f-b); line-height: 1.05; }
.impact-label { max-width: 220rem; margin: 0 auto; }

/* ==========================================================================
   KONTAKT-SECTION (Formular vor dem Footer)
   ========================================================================== */
.contact {
  position: relative;
  z-index: 2;
  padding: 120rem 0 140rem;
  background: var(--c0);
  border-top: 1px solid var(--c7);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80rem;
  align-items: start;
}
.contact-eyebrow {
  font-size: var(--f-s);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c2);
  margin: 0 0 18rem;
}
.contact-title {
  font-size: var(--f-l);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--c1);
  margin: 0 0 22rem;
  text-wrap: balance;
}
.contact-sub {
  font-size: var(--f-d);
  line-height: 1.5;
  color: var(--c6);
  max-width: 460rem;
  margin: 0 0 36rem;
}
.contact-meta { list-style: none; margin: 0; padding: 0; }
.contact-meta li { font-size: var(--f-d); color: var(--c1); margin-bottom: 8rem; }
.contact-meta a { color: var(--c2); text-decoration: none; }
.contact-meta a:hover { text-decoration: underline; }

.contact-form { display: block; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20rem; }
.field { display: flex; flex-direction: column; margin-bottom: 20rem; }
.field label {
  font-size: var(--f-s);
  font-weight: 500;
  color: var(--c1);
  margin-bottom: 8rem;
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--f-d);
  color: var(--c1);
  background: var(--c0);
  border: 1px solid var(--c7);
  border-radius: var(--br1);
  padding: 16rem 18rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 120rem; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c2);
  box-shadow: 0 0 0 3rem var(--c4);
}
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-submit { margin-top: 8rem; }
.contact-status {
  min-height: 24rem;
  margin: 16rem 0 0;
  font-size: var(--f-s);
  color: var(--c8);
}
.contact-status.ok { color: #1a7f37; font-weight: 500; }
.contact-status.err { color: var(--c5); font-weight: 500; }
.contact-privacy {
  margin: 14rem 0 0;
  font-size: var(--f-s);
  line-height: 1.45;
  color: var(--c8);
}

@media (max-width: 900px) {
  .contact { padding: 70rem 0 80rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 44rem; }
  .contact-row { grid-template-columns: 1fr; gap: 0; }
  .contact-title { font-size: var(--f-xl); }
}

/* ==========================================================================
   AGB-/DATENSCHUTZ-HAEKCHEN im Kontaktformular
   ========================================================================== */
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 12rem;
  margin-top: 22rem;
  cursor: pointer;
}
.contact-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20rem;
  height: 20rem;
  margin-top: 2rem;
  accent-color: var(--c2);
  cursor: pointer;
}
.contact-consent-text {
  font-size: var(--f-s);
  line-height: 1.45;
  color: var(--c8);
}
.contact-consent-text a { color: var(--c2); text-decoration: underline; }

/* ==========================================================================
   UNTERSEITEN (Leistungen, Loesungen, Ueber) – normale, scrollende Seiten
   ========================================================================== */
.subpage {
  flex: auto;
  display: block;
  padding-bottom: 40rem;
}
.page-hero-sub {
  padding: 60rem 0 70rem;
}
.page-hero-sub .wrapper { max-width: var(--mw); }
.ph-eyebrow {
  font-size: var(--f-s);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c2);
  margin: 0 0 20rem;
}
.ph-title {
  font-size: var(--f-l);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.03;
  color: var(--c1);
  margin: 0 0 26rem;
  max-width: 1100rem;
  text-wrap: balance;
}
.ph-lead {
  font-size: var(--f-m);
  line-height: 1.4;
  color: var(--c6);
  max-width: 820rem;
  margin: 0;
}

.page-block { padding: 46rem 0; border-top: 1px solid var(--c7); }
.page-block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60rem;
  align-items: center;
}
.page-block-grid.reverse .page-block-media { order: -1; }
.page-block h2 {
  font-size: var(--f-b);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c1);
  margin: 0 0 16rem;
}
.page-block p {
  font-size: var(--f-d);
  line-height: 1.5;
  color: var(--c6);
  margin: 0 0 14rem;
  max-width: 640rem;
}
.page-block ul.ph-list { list-style: none; margin: 18rem 0 0; padding: 0; }
.page-block ul.ph-list li {
  position: relative;
  padding-left: 26rem;
  margin-bottom: 12rem;
  font-size: var(--f-d);
  color: var(--c1);
}
.page-block ul.ph-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8rem;
  width: 10rem; height: 10rem;
  border-radius: 3rem;
  background: var(--c2);
}

/* Bild-Platzhalter */
.ph-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300rem;
  border: 2rem dashed var(--c7);
  border-radius: var(--br2);
  background: var(--c3);
  color: var(--c8);
  font-size: var(--f-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Abschluss-CTA-Band */
.page-cta {
  margin-top: 46rem;
  padding: 60rem;
  border-radius: var(--br2);
  background: var(--c2);
  color: var(--c0);
  text-align: center;
}
.page-cta h2 {
  font-size: var(--f-l);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 14rem;
  color: var(--c0);
}
.page-cta p { font-size: var(--f-d); color: rgba(255,255,255,0.8); margin: 0 auto 28rem; max-width: 620rem; }
.page-cta .button__default { background: var(--c0); color: var(--c2); }

@media (max-width: 900px) {
  .page-hero-sub { padding: 30rem 0 40rem; }
  .ph-title { font-size: var(--f-xl); }
  .page-block-grid { grid-template-columns: 1fr; gap: 28rem; }
  .page-block-grid.reverse .page-block-media { order: 0; }
  .ph-img { min-height: 200rem; }
  .page-cta { padding: 40rem 24rem; }
}

/* ==========================================================================
   MOBIL-NAVIGATION (Vollbild-Overlay, < 1024px). Desktop nutzt .topbar-nav.
   ========================================================================== */
.mobile-nav { display: none; }

@media (min-width: 1024px) {
  .mobile-nav { display: none !important; }
}

@media (max-width: 1023.98px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 14;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 44rem;
    padding: 120rem 24rem 48rem;
    background: var(--c0);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8rem);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  }
  .menu-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }

  .mobile-nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
  .mobile-nav li { margin: 0 0 30rem; }
  .mobile-nav a {
    font-size: 44rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--c1);
    text-decoration: none;
  }
  .mobile-nav a.m-cta { color: var(--c2); }

  .mobile-lang {
    display: flex;
    align-items: center;
    gap: 12rem;
    font-size: 22rem;
    font-weight: 500;
    color: var(--c8);
  }
  .mobile-lang button {
    background: none;
    border: 0;
    font: inherit;
    color: var(--c8);
    cursor: pointer;
    padding: 6rem 8rem;
  }
  .mobile-lang button[aria-pressed="true"] { color: var(--c2); }

  /* Scroll sperren, solange das Menue offen ist */
  .menu-open, .menu-open body { overflow: hidden; }

  /* Hamburger ueber dem Overlay halten + zu X animieren */
  .topbar-menu { z-index: 16; }
  .menu-open .topbar-menu-inner span { opacity: 0; }
  .menu-open .topbar-menu-inner::before { transform: translate(-50%, -50%) rotate(45deg); }
  .menu-open .topbar-menu-inner::after  { transform: translate(-50%, -50%) rotate(-45deg); }
}

/* ==========================================================================
   SCROLL-REVEAL + OBJEKT-PANELS auf den Unterseiten
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26rem);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
.page-block-media.reveal { transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Glas-/Chrom-Objekt auf weichem Panel statt "Bild folgt"-Kasten */
.obj-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340rem;
  padding: 48rem;
  border-radius: var(--br2);
  background: radial-gradient(120% 120% at 50% 0%, #FBF7F6 0%, var(--c3) 72%);
  border: 1px solid rgba(216, 20, 32, 0.08);
  transition: transform .45s ease, box-shadow .45s ease;
}
.obj-panel img {
  width: auto;
  max-height: 260rem;
  filter: drop-shadow(0 24rem 46rem rgba(0, 0, 0, 0.18));
  transition: transform .45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .obj-panel:hover {
    transform: translateY(-6rem);
    box-shadow: 0 40rem 70rem -34rem rgba(216, 20, 32, 0.30);
  }
  .obj-panel:hover img { transform: scale(1.04); }
  .page-block .ph-list li { transition: color .2s ease; }
}

@media (max-width: 900px) {
  .obj-panel { min-height: 230rem; padding: 30rem; }
  .obj-panel img { max-height: 180rem; }
}

/* ==========================================================================
   SCHWEBENDE OBJEKTE (nur Marken-3D-Objekte auf Leistungen/Lösungen)
   ========================================================================== */
@keyframes objFloat {
  0%   { transform: translateY(0)      rotate(-1.2deg); }
  50%  { transform: translateY(-16rem) rotate(1.6deg);  }
  100% { transform: translateY(0)      rotate(-1.2deg); }
}
.obj-panel img.obj-float {
  animation: objFloat 6.5s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) {
  /* Beim Hover haelt das Objekt sanft an und das Panel hebt sich */
  .obj-panel:hover img.obj-float { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .obj-panel img.obj-float { animation: none; }
}

/* ==========================================================================
   PORTRAET-PLATZHALTER (Ueber-Seite: Menschen hinter 5DORA -> echtes Foto)
   ========================================================================== */
.photo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 380rem;
  margin: 0 auto;
  border-radius: var(--br2);
  border: 2rem dashed var(--c7);
  background: radial-gradient(120% 120% at 50% 0%, #FBF7F6 0%, var(--c3) 72%);
  color: var(--c8);
  font-size: var(--f-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Echtes Portraet-Foto (Ueber-Seite: Menschen hinter 5DORA) */
.photo-frame {
  width: 100%;
  max-width: 380rem;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--br2);
  overflow: hidden;
  box-shadow: 0 30rem 60rem -30rem rgba(20, 0, 10, 0.35);
  background: var(--c3);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}