/* =========================================================
   =====
   ===== FONTS — alle verwendeten Schriften der Landing Page
   =====
   ========================================================= */

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/bebas-neue/bebas-neue-v15-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/inter-v19-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/inter-v19-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/inter-v19-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope/manrope-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope/manrope-v20-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope/manrope-v20-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3/source-sans-3-v19-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3/source-sans-3-v19-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bruno Ace SC";
  src: url("../assets/fonts/bruno-ace-sc/bruno-ace-sc-v7-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Michroma";
  src: url("../assets/fonts/michroma/michroma-v21-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   =====
   ===== ROOT TOKENS — zentrale Stellschrauben für Layout, Farben und Typografie
   =====
   ========================================================= */

:root {
  
  --font-brand: "Bebas Neue", sans-serif;             /* Schriften für Brand / Headline / Subline / Fließtext */
  --font-heading: "Bruno Ace SC", sans-serif;
  --font-subheading: "Michroma", sans-serif;
  --font-body: "Source Sans 3", sans-serif;

  
  --color-text-main: #f3efe3;                       /* Haupttextfarbe der Seite */
  --color-text-soft: rgba(243, 239, 227, 0.84);     /* Weichere Textvariante für dezente Einsätze */
  --color-brand: #f3e7c3;                           /* Brand-/Akzentfarbe für alternative Einsätze */

  --space-page-x: 70px;                               /* Horizontaler Seitenabstand auf Desktop */
  --space-page-x-mobile: 22px;                        /* Horizontaler Seitenabstand auf Mobile */

  
  --hero-copy-y: 110px;                               /* Position des Hero-Blocks von oben */
  --hero-copy-x: 140px;                               /* Position des Hero-Blocks von links */
  --hero-copy-width: 1000px;                          /* Breite des Hero-Blocks */
  --hero-heading-max-width: none;                     /* Maximale Breite der Hauptüberschrift */
  --hero-subcopy-max-width: 460px;                    /* Maximale Breite des Begleittexts */
  --hero-copy-y-mobile: 96px;                         /* Mobile Position des Hero-Blocks von oben */
  --hero-copy-x-mobile: 50%;                          /* Mobile Position des Hero-Blocks von links */
  --hero-copy-width-mobile: min(92vw, 680px);         /* Mobile Breite des Hero-Blocks */

  
  --mosaic-top: 52.4%;                                /* Vertikale Gesamtposition des Kartenblocks */
  --mosaic-left: 61.8%;                               /* Horizontale Gesamtposition des Kartenblocks */
  --mosaic-width: min(43.8vw, 726px);                 /* Gesamtbreite des Kartenblocks */
  --mosaic-height: min(17.2vw, 276px);                /* Gesamthöhe des Kartenblocks */
  --mosaic-radius: 0.8rem;                            /* Rundung aller Karten */
  --mosaic-card-bg-left: rgba(5, 26, 35, 0.92);     /* Linke Verlaufsfarbe der Karten */
  --mosaic-card-bg-mid: rgba(14, 48, 67, 0.80);     /* Mittlere Verlaufsfarbe der Karten */
  --mosaic-card-bg-right: rgba(6, 25, 36, 0.92);    /* Rechte Verlaufsfarbe der Karten */
  --mosaic-card-border: rgba(103, 186, 202, 0.10);  /* Kartenrahmen / Outline */
  --mosaic-card-shadow: rgba(0, 0, 0, 0.16);        /* Schatten der Karten */   
  --mosaic-label-color: rgba(227, 244, 248, 0.96);  /* Textfarbe der Kartenlabels */
  --mosaic-label-size: clamp(0.76rem, 0.60rem + 0.55vw, 1.18rem);     /* Schriftgröße der Kartenlabels */
  --mosaic-image-url: url("../assets/img/hartmut-gluch-image.png");   /* Bildpfad des Portraits */
  --mosaic-portrait-width: 280px;                                     /* Portraitgröße innerhalb des Kartenverbunds */
  --mosaic-portrait-left: 202px;                                      /* Portrait horizontal verschieben: größer = weiter nach rechts */
  --mosaic-portrait-top: -15px;                       

  
  --footer-logo-bottom: 16px;                         /* Footer-Logo Abstand nach unten */
  --footer-logo-size: 0.68rem;                        /* Footer-Logo Schriftgröße */
  --footer-logo-letter-spacing: 0.09em;               /* Footer-Logo Laufweite */
  --footer-logo-color: rgba(92, 191, 210, 0.72);    /* Footer-Logo Farbe */

  --hero-headline-enter-duration: 1050ms;             /* Dauer der Headline-Animation */
  --hero-headline-enter-delay: 0.00s;                 /* Startverzögerung der Headline */
  --hero-subline-enter-duration: 920ms;               /* Dauer der Subline-Animation */
  --hero-subline-enter-delay: 0.22s;                  /* Startverzögerung der Subline */
  --hero-mosaic-enter-base-delay: 0.72s;              /* Basisverzögerung, bevor die Karten starten */
  --hero-copy-text-fade-duration: 600ms;              /* Dauer der sanften Einblendung des Dreizeilers */
  --hero-copy-text-fade-delay: 1.75s;                 /* Startzeit des Dreizeilers nach Headline, Subline und Karten */

  --legal-nav-right: 22px;                             /* Abstand der kleinen Links nach rechts */
  --legal-nav-bottom: 20px;                            /* Abstand der kleinen Links nach unten */
  --legal-nav-gap: 14px;                               /* Abstand zwischen den einzelnen Links */
  --legal-nav-size: 0.72rem;                           /* Schriftgröße der kleinen Links */
  --legal-nav-color: rgba(92, 191, 210, 0.76);         /* Grundfarbe der kleinen Links */
  --legal-nav-hover-color: rgba(216, 193, 138, 0.92);  /* Hover-Farbe der kleinen Links */
  --legal-nav-enter-duration: 520ms;                   /* Dauer der Einblendung der kleinen Links */
  --legal-nav-enter-delay: 3.1s;                       /* Startzeit der kleinen Links nach dem Intro-Flow */

  --privacy-note-left: 22px;                           /* Abstand des Privacy-Hinweises nach links */
  --privacy-note-bottom: 20px;                         /* Abstand des Privacy-Hinweises nach unten */
  --privacy-note-size: 0.66rem;                        /* Schriftgröße des Privacy-Hinweises */
  --privacy-note-color: rgba(243, 239, 227, 0.52);    /* dezente Farbe des Privacy-Hinweises */
  --privacy-note-enter-duration: 520ms;                /* Dauer der Einblendung des Privacy-Hinweises */
  --privacy-note-enter-delay: 3.1s;                    /* Startzeit des Privacy-Hinweises nach dem Intro-Flow */
}


/* =========================================================
   =====
   ===== RESET & BASE — Grundverhalten für Box-Modell, Seite und Body
   =====
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  position: relative;
  color: var(--color-text-main);
  font-family: var(--font-body);
}


/* =========================================================
   =====
   ===== STAGE BACKGROUND — Farbverlauf und globale Bühnenfläche
   =====
   ========================================================= */

body {
  background: linear-gradient(
    180deg,
    #0F2027 0%,
    #12252D 25%,
    #2C5364 100%
  );
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}


/* =========================================================
   =====
   ===== BRAND MARK — optionaler Marken-Schriftzug links oben
   =====
   ========================================================= */

.brand {
  position: absolute;
  top: 34px;
  left: var(--space-page-x);
  z-index: 10;
  margin: 0;

  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  background: linear-gradient(
    180deg,
    rgba(246, 234, 196, 0.95) 0%,
    rgba(223, 197, 126, 0.88) 42%,
    rgba(178, 146, 79, 0.82) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  transform: skewX(-6deg);
  transform-origin: left center;

  text-shadow:
    0 0 10px rgba(212, 180, 102, 0.08),
    0 0 18px rgba(212, 180, 102, 0.04);
}


/* =========================================================
   =====
   ===== HERO COPY — Hauptüberschrift, Subline und Einleitung links
   =====
   ========================================================= */

.hero-copy {
  position: absolute;
  top: var(--hero-copy-y);
  left: var(--hero-copy-x);
  z-index: 10;
  width: var(--hero-copy-width);
  transform: none;
  color: rgba(243, 239, 227, 0.94);
  text-align: left;
}

.hero-copy h1 {
  margin: 0;
  max-width: var(--hero-heading-max-width);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 0.90;
  letter-spacing: -0.01em;
  text-align: left;
}

.hero-line {
  display: block;
  text-align: left;
}

.hero-line-main {
  font-size: 2.2rem;
  background: linear-gradient(
    90deg,
    #B3DFE5 0%,
    #4AB2C1 32%,
    #276871 78%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-line-sub {
  margin-top: 11px;
  font-family: var(--font-subheading);
  font-size: 0.90rem;
  background: linear-gradient(
    90deg,
    #276871 0%,
    #B3DFE5 46%,
    #276871 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: left;
  letter-spacing: 0.69em;
}

.hero-copy p {
  margin: 72px 0 0 0;
  max-width: var(--hero-subcopy-max-width);
  color: rgba(179, 223, 229, 0.96);
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.28;
  text-align: left;
  font-style: italic;
  opacity: 0;
  animation: hero-copy-text-fade-in var(--hero-copy-text-fade-duration) ease-out var(--hero-copy-text-fade-delay) forwards;
}


/* =========================================================
   =====
   ===== HERO ENTRANCE — Headline von oben, Subline von links in die Bühne
   =====
   ========================================================= */

.hero-line-main {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: hero-headline-in var(--hero-headline-enter-duration) cubic-bezier(0.22, 0.8, 0.18, 1) var(--hero-headline-enter-delay) forwards;
}

.hero-line-sub {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: hero-subline-in var(--hero-subline-enter-duration) cubic-bezier(0.22, 0.8, 0.18, 1) var(--hero-subline-enter-delay) forwards;
}

@keyframes hero-headline-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-110px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes hero-subline-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-160px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes hero-copy-text-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* =========================================================
   =====
   ===== HERO MOSAIC — sechs Karten mit gemeinsamem Portrait und Textlayer
   =====
   ========================================================= */

.hero-mosaic {
  position: absolute;
  top: var(--mosaic-top);
  left: var(--mosaic-left);
  width: var(--mosaic-width);
  height: var(--mosaic-height);
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}

.mosaic-grid {
  position: relative;
  width: 100%;
  height: 100%;
}

.mosaic-card {
  --card-x: 0px;
  --card-y: 0px;
  --card-w: 240px;
  --card-h: 78px;

  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  border-radius: var(--mosaic-radius);
  background: linear-gradient(
    90deg,
    var(--mosaic-card-bg-left) 0%,
    var(--mosaic-card-bg-mid) 50%,
    var(--mosaic-card-bg-right) 100%
  );
  border: 1px solid var(--mosaic-card-border);
  box-shadow:
    0 10px 24px var(--mosaic-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  isolation: isolate;
}

.card-enablement {
  --card-x: 79px;
  --card-y: 0px;
  --card-w: 300px;
  --card-h: 74px;
}

.card-digitales {
  --card-x: 380px;
  --card-y: 0px;
  --card-w: 300px;
  --card-h: 74px;
}

.card-organisation {
  --card-x: 43px;
  --card-y: 75px;
  --card-w: 300px;
  --card-h: 74px;
}

.card-datenbi {
  --card-x: 344px;
  --card-y: 75px;
  --card-w: 300px;
  --card-h: 74px;
}

.card-orientierung {
  --card-x: 7px;
  --card-y: 150px;
  --card-w: 300px;
  --card-h: 74px;
}

.card-stabilitaet {
  --card-x: 308px;
  --card-y: 150px;
  --card-w: 300px;
  --card-h: 74px;
}

.card-portrait {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--mosaic-image-url);
  background-repeat: no-repeat;
  background-size: var(--mosaic-portrait-width) auto;
  background-position:
    calc(var(--mosaic-portrait-left) - var(--card-x))
    calc(var(--mosaic-portrait-top) - var(--card-y));
  opacity: 0.99;
  transform: translateZ(0);
}

.card-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  font-family: var(--font-subheading);
  font-size: var(--mosaic-label-size);
  line-height: 1;
  color: var(--mosaic-label-color);
  text-shadow: 0 0 10px rgba(45, 150, 171, 0.08);
  white-space: nowrap;
}

.card-enablement .card-label,
.card-organisation .card-label,
.card-orientierung .card-label {
  justify-content: flex-start;
  padding-left: 1.65rem;
}

.card-digitales .card-label,
.card-datenbi .card-label,
.card-stabilitaet .card-label {
  justify-content: flex-end;
  padding-right: 1.65rem;
}




/* =========================================================
   =====
   ===== HERO MOSAIC ENTRANCE — Karten gestaffelt von rechts nach links einfahren
   =====
   ========================================================= */

.mosaic-card {
  will-change: transform, opacity, filter;
  opacity: 0;
  filter: blur(16px);
  transform: translateX(160px);
  animation: mosaic-slide-in 2500ms cubic-bezier(0.22, 0.8, 0.18, 1) forwards;
}

.card-enablement { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.00s); }
.card-digitales { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.08s); }
.card-organisation { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.16s); }
.card-datenbi { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.24s); }
.card-orientierung { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.32s); }
.card-stabilitaet { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.40s); }

.card-portrait,
.card-label {
  opacity: 0;
  transform: translateX(24px);
  animation: mosaic-content-in 620ms ease-out forwards;
}

.card-enablement .card-portrait,
.card-enablement .card-label { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.12s); }
.card-digitales .card-portrait,
.card-digitales .card-label { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.20s); }
.card-organisation .card-portrait,
.card-organisation .card-label { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.28s); }
.card-datenbi .card-portrait,
.card-datenbi .card-label { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.36s); }
.card-orientierung .card-portrait,
.card-orientierung .card-label { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.44s); }
.card-stabilitaet .card-portrait,
.card-stabilitaet .card-label { animation-delay: calc(var(--hero-mosaic-enter-base-delay) + 0.52s); }

@keyframes mosaic-slide-in {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translateX(160px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes mosaic-content-in {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-line-main,
  .hero-line-sub,
  .hero-copy p,
  .mosaic-card,
  .card-portrait,
  .card-label,
  .legal-nav,
  .privacy-note {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* =========================================================
   =====
   ===== LEGAL NAV — kleine Links unten rechts nach dem Intro-Flow
   =====
   ========================================================= */

.legal-nav {
  position: absolute;
  right: var(--legal-nav-right);
  bottom: var(--legal-nav-bottom);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: var(--legal-nav-gap);
  opacity: 0;
  animation: legal-nav-fade-in var(--legal-nav-enter-duration) ease-out var(--legal-nav-enter-delay) forwards;
}

.legal-nav a {
  color: var(--legal-nav-color);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: var(--legal-nav-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: color 180ms ease, opacity 180ms ease;
}

.legal-nav a:hover {
  color: var(--legal-nav-hover-color);
}

@keyframes legal-nav-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* =========================================================
   =====
   ===== PRIVACY NOTE — kleiner Hinweis unten links nach dem Intro-Flow
   =====
   ========================================================= */

.privacy-note {
  position: absolute;
  left: var(--privacy-note-left);
  bottom: var(--privacy-note-bottom);
  z-index: 8;
  font-family: "Inter", sans-serif;
  font-size: var(--privacy-note-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--privacy-note-color);
  white-space: nowrap;
  opacity: 0;
  animation: privacy-note-fade-in var(--privacy-note-enter-duration) ease-out var(--privacy-note-enter-delay) forwards;
}

@keyframes privacy-note-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* =========================================================
   =====
   ===== FOOTER LOGO — kleiner Schriftzug unten mittig
   =====
   ========================================================= */

.footer-logo {
  position: absolute;
  left: 50%;
  bottom: var(--footer-logo-bottom);
  transform: translateX(-50%);
  z-index: 8;

  font-family: var(--font-heading);
  font-size: var(--footer-logo-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--footer-logo-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;

  color: var(--footer-logo-color);
  text-shadow:
    0 0 8px rgba(54, 153, 172, 0.10),
    0 0 18px rgba(54, 153, 172, 0.04);
}


/* =========================================================
   =====
   ===== RESPONSIVE MOSAIC — angepasste Kartengeometrie und Portraitwerte
   =====
   ========================================================= */

@media (max-width: 1200px) {
  :root {
    /* Kartenblock auf kleineren Desktops weiter nach rechts/kompakter setzen */
    --mosaic-left: 63%;

    /* Gesamtbreite des Kartenblocks für kleinere Desktops */
    --mosaic-width: min(45vw, 660px);

    /* Gesamthöhe des Kartenblocks für kleinere Desktops */
    --mosaic-height: min(18vw, 252px);

    /* Portraitgröße für kleinere Desktops */
    --mosaic-portrait-width: 292px;

    /* Portrait horizontal für kleinere Desktops */
    --mosaic-portrait-left: 206px;

    /* Portrait vertikal für kleinere Desktops */
    --mosaic-portrait-top: 8px;
  }

  .card-enablement {
    --card-x: 64px;
    --card-w: 272px;
    --card-h: 68px;
  }

  .card-digitales {
    --card-x: 344px;
    --card-w: 272px;
    --card-h: 68px;
  }

  .card-organisation {
    --card-x: 32px;
    --card-y: 74px;
    --card-w: 272px;
    --card-h: 68px;
  }

  .card-datenbi {
    --card-x: 312px;
    --card-y: 74px;
    --card-w: 272px;
    --card-h: 68px;
  }

  .card-orientierung {
    --card-y: 148px;
    --card-w: 272px;
    --card-h: 68px;
  }

  .card-stabilitaet {
    --card-x: 280px;
    --card-y: 148px;
    --card-w: 272px;
    --card-h: 68px;
  }
}

@media (max-width: 900px) {
  :root {
    /* Kartenblock auf Mobile weiter nach unten setzen */
    --mosaic-top: 71%;

    /* Kartenblock auf Mobile zentrieren */
    --mosaic-left: 50%;

    /* Gesamtbreite des Kartenblocks auf Mobile */
    --mosaic-width: min(92vw, 620px);

    /* Gesamthöhe des Kartenblocks auf Mobile */
    --mosaic-height: 238px;

    /* Rundung der Karten auf Mobile */
    --mosaic-radius: 0.95rem;

    /* Schriftgröße der Kartenlabels auf Mobile */
    --mosaic-label-size: clamp(0.76rem, 0.66rem + 0.42vw, 0.98rem);

    /* Portraitgröße auf Mobile */
    --mosaic-portrait-width: 276px;

    /* Portrait horizontal auf Mobile */
    --mosaic-portrait-left: 190px;

    /* Portrait vertikal auf Mobile */
    --mosaic-portrait-top: 10px;
  }

  .card-enablement {
    --card-x: 58px;
    --card-w: 238px;
    --card-h: 64px;
  }

  .card-digitales {
    --card-x: 304px;
    --card-w: 238px;
    --card-h: 64px;
  }

  .card-organisation {
    --card-x: 29px;
    --card-y: 70px;
    --card-w: 238px;
    --card-h: 64px;
  }

  .card-datenbi {
    --card-x: 275px;
    --card-y: 70px;
    --card-w: 238px;
    --card-h: 64px;
  }

  .card-orientierung {
    --card-y: 140px;
    --card-w: 238px;
    --card-h: 64px;
  }

  .card-stabilitaet {
    --card-x: 246px;
    --card-y: 140px;
    --card-w: 238px;
    --card-h: 64px;
  }

  .card-enablement .card-label,
  .card-organisation .card-label,
  .card-orientierung .card-label {
    padding-left: 1rem;
  }

  .card-digitales .card-label,
  .card-datenbi .card-label,
  .card-stabilitaet .card-label {
    padding-right: 1rem;
  }
}


/* =========================================================
   =====
   ===== RESPONSIVE LAYOUT — Anpassungen für Hero, Brand und Footer auf Mobile
   =====
   ========================================================= */

@media (max-width: 900px) {
  .brand {
    top: 22px;
    left: var(--space-page-x-mobile);
    font-size: 0.82rem;
    letter-spacing: 0.2em;
  }

  .hero-copy {
    top: var(--hero-copy-y-mobile);
    left: var(--hero-copy-x-mobile);
    right: auto;
    width: var(--hero-copy-width-mobile);
    transform: translateX(-50%);
    text-align: center;
  }

  .hero-copy h1 {
    max-width: 12ch;
    margin: 0 auto 12px auto;
  }

  .hero-copy p {
    max-width: 32ch;
    font-size: 0.98rem;
    line-height: 1.45;
    margin: 0 auto;
  }

  .hero-line-main {
    font-size: clamp(2rem, 6.8vw, 3.2rem);
  }

  .hero-line-sub {
    font-size: clamp(1.65rem, 5.8vw, 2.7rem);
  }

  .privacy-note {
    left: 16px;
    bottom: 18px;
    font-size: 0.62rem;
    max-width: calc(100vw - 32px);
  }

  .legal-nav {
    right: 16px;
    bottom: 18px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100vw - 32px);
  }

  .legal-nav a {
    font-size: 0.68rem;
  }
}