/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Mobile First
   ═══════════════════════════════════════════════════════ */

@property --fan {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --icon-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 3.333;
}

@property --_split {
  syntax: '<length>';
  inherits: true;
  initial-value: 180px;
}

@property --all-push {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}


:root {
  --color-bg:              #F5F4ED;
  --color-primary:         #2A6053;
  --color-dark:            #101010;
  --color-brand-blue:      #3457F1;

  --color-text-high:       rgba(0, 0, 0, 0.87);
  --color-text-medium:     rgba(0, 0, 0, 0.70);
  --color-text-subtle:     rgba(0, 0, 0, 0.54);
  --color-text-faint:      rgba(0, 0, 0, 0.10);

  --color-on-dark-high:    #F5F4ED;
  --color-on-dark-medium:  rgba(255, 255, 255, 0.87);
  --color-on-dark-low:     rgba(255, 255, 255, 0.70);
  --color-on-dark-faint:   rgba(255, 255, 255, 0.30);
  --color-on-dark-ghost:   rgba(255, 255, 255, 0.04);

  --font-family:           'Athletics', sans-serif;
  --font-size-display:     48px;
  --font-size-h1:          44px;
  --font-size-h2:          24px;
  --font-size-body:        18px;
  --font-weight-normal:    400;

  --leading-display:       1.0;
  --leading-tight:         1.2;
  --leading-body:          1.4;
  --leading-relaxed:       1.4;

  --max-width:             1440px;
  --grid-columns:          12;
  --grid-gutter:           16px;
  --page-margin:           20px;

  /* Innere Breite ohne page-margin */
  --grid-inner: min(100vw - 2 * var(--page-margin), var(--max-width) - 2 * var(--page-margin));
  /* Breite einer einzelnen Spalte */
  --col: calc((var(--grid-inner) - 11 * var(--grid-gutter)) / 12);
  
  --row-height:            64px;
  --row-gutter:            24px;
  --row-unit:              88px;

  --space-xs:              8px;
  --space-s:               16px;
  --space-m:               24px;
  --space-l:               32px;
  --space-xl:              48px;
  --space-2xl:             64px;
  --space-3xl:             88px;
  --space-4xl:             120px;

  --icon-size:             180px;
  --icon-scale:            3.333;

  --ease-out-smooth:       cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:         0.15s;
  --duration-normal:       0.3s;
  --duration-slow:         0.8s;

  --green-top:             100vh;
  --fan:                   0;
  --_split:                180px;
  --all-push:              0px;

  
}

.mobile  { display: block; }
.desktop { display: none; }

@media (min-width: 768px) {
  :root {
    --font-size-display:   72px;
    --font-size-h1:        66px;
    --font-size-h2:        32px;
    --font-size-body:      21px;
    --grid-gutter:         24px;
    --page-margin:         40px;
    --space-l:             48px;
    --space-xl:            72px;
    --space-2xl:           88px;
    --space-3xl:           136px;
    --space-4xl:           172px;
  }
  .mobile  { display: none; }
  .desktop { display: block; }
}

@media (min-width: 1280px) {
  :root {
    --font-size-display:   94px;
    --font-size-h1:        86px;
    --font-size-h2:        38px;
    --font-size-body:      24px;
    --page-margin:         64px;
  }
}


*:focus-visible {
  outline:2px solid var(--color-on-dark-high);
  outline-offset: -2px;
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px black;
    border-radius: 40px;
}


/* ═══════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

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

@font-face {
  font-family: 'Athletics';
  src: url('https://dennism.de/2026/fonts/Athletics-Regular.woff2') format('opentype');
  font-weight: 400;
  font-style: normal;
}

body {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-body);
  -webkit-font-smoothing: antialiased;
  timeline-scope: --green, --services, --hero-icons;
}

::selection {
  background: var(--color-primary);
  color: #fff;
}


/* ═══════════════════════════════════════════════════════
   DEBUG GRID OVERLAY
   ═══════════════════════════════════════════════════════ */

body.show-grid::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent var(--row-height),
    rgba(255, 0, 0, 0.1) var(--row-height),
    rgba(255, 0, 0, 0.1) var(--row-unit)
  );
  background-position-y: var(--row-height);
}

body.show-grid::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: var(--page-margin);
  right: var(--page-margin);
  height: 100%;
  max-width: calc(var(--max-width) - var(--page-margin) * 2);
  margin: 0 auto;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 0, 0, 0.07) 0px,
    rgba(255, 0, 0, 0.07) calc((100% - 11 * var(--grid-gutter)) / 12),
    transparent calc((100% - 11 * var(--grid-gutter)) / 12),
    transparent calc((100% - 11 * var(--grid-gutter)) / 12 + var(--grid-gutter))
  );
}


/* ═══════════════════════════════════════════════════════
   12-COLUMN GRID
   ═══════════════════════════════════════════════════════ */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  background: var(--color-primary);
  color: var(--color-on-dark-high);
  padding: 12px var(--space-m);
  font-size: 18px;
  z-index: 1000;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .fi-icon { transform: scale(1) !important; rotate: none !important; }
  .fi { transform: none !important; }
  .fi-label { opacity: 1 !important; }
}


/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */

.navbar {
  width: 100%;
  padding: 0 var(--page-margin) var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: navReveal 1s ease-out 0.1s both;
  z-index: 10;
}

.navbar-brand {
  color: var(--color-text-medium);
  font-size: 24px;
  font-weight: var(--font-weight-normal);
  line-height: 31.2px;
  justify-self: start;
}

.navbar-links {
  display: none;
  gap: 40px;
  justify-content: space-between;
  align-items: center;
}

.navbar-links a {
  color: var(--color-text-medium);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  position: relative;
  display: inline-block;
  z-index: 10;
}

@media (min-width: 768px) {
  .navbar {
    padding: var(--space-m) var(--page-margin) var(--space-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .navbar-links { display: flex; }
}

.underline-link {
  display: inline-block;
  text-decoration: none;
  padding: var(--space-s) 0;
  position: relative;
  text-align: center;
}

.underline-link:hover .button-stroke:nth-child(2) {
  stroke-dashoffset: 0;
}

.button-stroke {
  display: block;
  width: 100%;
  height: 20px;
  stroke: var(--color-on-dark-high);
  position: absolute;
  left: 0;
  bottom: -8px;
  stroke-width: 4;
}

.button-stroke:nth-child(2) {
  stroke-dasharray: 650px;
  stroke-dashoffset: 650px;
  stroke: var(--color-primary);
  stroke-width: 5;
  transition: stroke-dashoffset var(--duration-slow) ease-out;
}

/* ═══════════════════════════════════════════════════════
   SCROLL NAV — Mobile Burger + Desktop Fixed Bar
   ═══════════════════════════════════════════════════════ */

/* ── Burger (mobile only) ─────────────────────────── */
.burger-btn {
  display: flex;
  position: fixed;
  top: var(--space-m);
  right: var(--page-margin);
  z-index: 100;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(0);
  transition: transform 0.4s var(--ease-out-smooth), opacity 0.4s var(--ease-out-smooth);
  mix-blend-mode: difference;
}

.burger-btn.hidden {
  transform: translateY(calc(-100% - var(--space-m) - 20px));
}

.burger-btn svg {
  width: 36px;
  height: 36px;
}

.burger-btn line {
  stroke: #fff;
  transition: transform 0.3s var(--ease-out-smooth);
  transform-origin: 18px 18px;
}

.burger-btn.open {
  mix-blend-mode: initial;
}

.burger-btn.open .burger-line1 {
  transform: translateY(6px) rotate(45deg);
}

.burger-btn.open .burger-line2 {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 768px) {
  .burger-btn { display: none !important; }
}


/* ── Burger Overlay (mobile only) ─────────────────── */

.burger-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-smooth);
}

.burger-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.burger-overlay a {
  color: var(--color-on-dark-high);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-tight);
  text-decoration: none;
}

@media (min-width: 768px) {
  .burger-overlay { display: none !important; }
}

.burger-btn line {
  transition: transform 0.3s var(--ease-out-smooth);
  transform-origin: 12px 12px;
  color: var(--color-text-medium);
}

.burger-btn.open .burger-line1 {
  transform: translateY(4px) rotate(45deg);
  stroke: var(--color-on-dark-high);
}

.burger-btn.open .burger-line2 {
  transform: translateY(-4px) rotate(-45deg);
  transform-origin: 17px 26px;
  stroke: var(--color-on-dark-high);
}


/* ── Desktop fixed navbar ─────────────────────────── */

.navbar-fixed {
  display: none;
}

@media (min-width: 768px) {
  .navbar-fixed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--space-m) var(--page-margin);
    background: var(--color-bg);
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.4s var(--ease-out-smooth);

  }

  .navbar-fixed.visible {
    transform: translateY(0);
  }

  .navbar-fixed .navbar-brand {
    color: var(--color-text-medium);
    font-size: 24px;
    font-weight: var(--font-weight-normal);
    line-height: 31.2px;
    text-decoration: none;
  }

  .navbar-fixed .navbar-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: calc(var(--space-m) / 2);
  }

  .navbar-fixed .navbar-links a {
    color: var(--color-text-medium);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    text-decoration: none;
  }
}

/* ── Original navbar: hide on mobile after hero ───── */

@media (max-width: 767px) {
  .navbar {
    transition: opacity 0.3s var(--ease-out-smooth);
  }
  .navbar.nav-hidden {
    opacity: 0;
    pointer-events: none;
  }
}
/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */

.hero {
  width: 100%;
  height: auto;
  min-height: 50vh;
  background: var(--color-bg);
  position: relative;
  padding: 0 var(--page-margin) var(--space-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-line1 {
  color: var(--color-text-high);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-display);
  display: block;
  position: relative;
  z-index: 10;
}

.hero-subtitle {
  margin-top: var(--space-xl);
  color: var(--color-text-medium);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .hero {
    height: 90vh;
    min-height: auto;
    padding: var(--space-xl) var(--page-margin) var(--space-xl);
    overflow: hidden;
  }

  .hero-subtitle {
    margin-top: 76px;
    width: 530px;
    font-size: var(--font-size-body);
  }
}

@media (min-width: 1280px) {
    .hero-line1 { white-space: nowrap; }  
}

@keyframes navReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroReveal     { from { opacity: 1; } to { opacity: 1; } }
@keyframes subtitleReveal { from { opacity: 1; } to { opacity: 1; } }
@keyframes slideInRight {
  from { translate: 0 0; opacity: 1; scale: 1; }
  to   { translate: 0 0; opacity: 1; scale: 1; }
}

@keyframes heroDrift {
  from { transform: translateY(0); opacity: 1; filter: blur(0px); }
  to   { transform: translateY(-40px); opacity: 0; filter: blur(12px); }
}
@keyframes heroSubtitleDrift {
  from { transform: translateY(0); opacity: 1; filter: blur(0px); }
  to   { transform: translateY(-20px); opacity: 0; filter: blur(16px); }
}

.hero-line1 {
  animation: heroReveal .3s ease-out both, heroDrift linear both;
  animation-timeline: auto, scroll();
  animation-range: normal, 0px 40vh;
}
.hero-line1:nth-child(1) { animation-delay: 0.2s, 0s; }
.hero-line1:nth-child(2) { animation-delay: 0.4s, 0s; }

.desktop-break { display: none; }
@media (min-width: 1280px) {
  .desktop-break { display: block; }
}

.hero-subtitle {
  animation: subtitleReveal .3s ease-out both, heroSubtitleDrift linear both;
  animation-timeline: auto, scroll();
  animation-range: normal, 0px 30vh;
  animation-delay: 0.3s, 0s;
}


/* ═══ Scroll-driven Icon Keyframes ═══════════════════ */

@keyframes iconFanAndScale {
  from { --fan: 0; --icon-scale: 1; }
  to   { --fan: 1; --icon-scale: 1; }
}

@keyframes iconSplit {
  from { --_split: 180px; }
  to   { --_split: 0px; }
}

@keyframes iconPushAway {
  from { --all-push: 0px; }
  to   { --all-push: -100vh; }
}

/* Desktop: fan includes scale change */
@media (min-width: 768px) {
  @keyframes iconFanAndScale {
    from { --fan: 0; --icon-scale: 3.333; }
    to   { --fan: 1; --icon-scale: 1; }
  }
}


/* ── Hero portrait overlay ────────────────────────── */

.hero-portrait-overlay {
  position: absolute;
  top: 15%;
  width: auto;
  height: 120px;
  z-index: 55;
  pointer-events: all;
  overflow: hidden;
  border-radius: 12px;
  animation: portraitFade cubic-bezier(0.4, 0, 1, 1) both;
  animation-timeline: scroll();
  animation-range: 15vh 30vh;
  transform-origin: center center;
}

.hero-portrait-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 768px) {
  .hero-portrait-overlay {
    top: 34%;
    left: calc(72vw - 60px);
    transform: translateY(40%);
    width: auto;
    height: 120px;
    opacity: 1;
    animation-range: 15vh 20vh;
  }
}

@keyframes portraitFade {
  0%   { opacity: 1; scale: var(--icon-scale); filter: blur(0px); }
  60%  { opacity: 1; scale: calc(var(--icon-scale) * 0.7); filter: blur(0px); }
  100% { opacity: 1; scale: 0; filter: blur(0px); transform-origin: center center; }
}


/* ═══════════════════════════════════════════════════════
   HERO + ICONS + GREEN WRAPPER (sticky boundary)
   ═══════════════════════════════════════════════════════ */

.hero-icons-green-wrapper {
  position: relative;
  height: calc(2000px + var(--space-xl));
  view-timeline: --hero-icons block;
}

@media (min-width: 768px) {
  .hero-icons-green-wrapper {
    height: auto;
  }
}


/* ═══════════════════════════════════════════════════════
   ICONS — MOBILE (vertical fan, sticky, per-icon split)
   ═══════════════════════════════════════════════════════ */

.icon-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--icon-size);
  overflow: visible;
  z-index: 50;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;

  animation: iconFanAndScale cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-timeline: scroll();
  animation-range: 80px 45vh;
}

.fi {
  position: relative;
  left: auto;
  top: auto;
  display: block;
  margin: 0 auto;
  width: var(--icon-size);
  height: 0;
  overflow: visible;
  /* cursor: pointer; */
  pointer-events: auto;
  text-decoration: none;
}

/* .fi:focus-visible {
  outline: 3px dashed var(--color-primary);
  outline-offset: 8px;
  border-radius: 50%;
} */

.fi svg { width: var(--icon-size); height: var(--icon-size); display: block; }

.fi-icon {
  position: relative;
  height: var(--icon-size);
  transform: scale(var(--icon-scale));
  transform-origin: center top;
  transition: rotate 0.45s ease-out;
  clip-path: polygon(0% 0%, 0% 0%, 0% 25%, 0% 50%, 0% 75%, 0% 100%, 0% 100%);
  will-change: clip-path;
}

.fi-dark,
.fi-light {
  position: absolute;
  top: 0;
  left: 0;
}

.fi-dark  { clip-path: inset(0 0 calc(var(--icon-size) - var(--_split)) 0); }
.fi-light { clip-path: inset(var(--_split) 0 0 0); }

#fi0 {
  z-index: 54;
  transform: translateY(calc(0px * var(--fan)));
  animation: slideInRight 0.6s ease-out 0.30s both, iconSplit linear both;
  animation-timeline: auto, --green;
}

#fi1 {
  z-index: 53;
  transform: translateY(calc(200px * var(--fan)));
  animation: slideInRight 0.6s ease-out 0.38s both, iconSplit linear both;
  animation-timeline: auto, --green;
}

#fi2 {
  z-index: 52;
  transform: translateY(calc(400px * var(--fan)));
  animation: slideInRight 0.6s ease-out 0.46s both, iconSplit linear both;
  animation-timeline: auto, --green;
}

#fi3 {
  z-index: 51;
  transform: translateY(calc(600px * var(--fan)));
  animation: slideInRight 0.6s ease-out 0.54s both, iconSplit linear both;
  animation-timeline: auto, --green;
}

#fi4 {
  z-index: 49;
  transform: translateY(calc(800px * var(--fan)));
  animation: slideInRight 0.6s ease-out 0.62s both, iconSplit linear both;
  animation-timeline: auto, --green;
}

#fi0 { transform: translateY(calc(   0px * var(--fan))); }
#fi1 { transform: translateY(calc( 260px * var(--fan))); }
#fi2 { transform: translateY(calc( 520px * var(--fan))); }
#fi3 { transform: translateY(calc( 780px * var(--fan))); }
#fi4 { transform: translateY(calc(1040px * var(--fan))); }

#fi0 { animation-range: normal, entry calc(100vh - 180px) entry calc(100vh - 0px); }
#fi1 { animation-range: normal, entry calc(100vh - 440px) entry calc(100vh - 260px); }
#fi2 { animation-range: normal, entry calc(100vh - 700px) entry calc(100vh - 520px); }
#fi3 { animation-range: normal, entry calc(100vh - 960px) entry calc(100vh - 780px); }
#fi4 { animation-range: normal, entry calc(100vh - 1220px) entry calc(100vh - 1040px); }

/* ── Scribble reveal ──────────────────────────────── */

@keyframes scribbleReveal {
  0%   { clip-path: polygon(0% 0%, 0% 0%, 0% 25%, 0% 50%, 0% 75%, 0% 100%, 0% 100%); }
  40%  { clip-path: polygon(0% 0%, 50% 5%, 35% 28%, 60% 52%, 40% 78%, 55% 100%, 0% 100%); }
  70%  { clip-path: polygon(0% 0%, 100% 0%, 92% 30%, 100% 50%, 95% 70%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 100% 50%, 100% 75%, 100% 100%, 0% 100%); }
}

#fi0 .fi-icon { animation: scribbleReveal 1.0s var(--ease-out-smooth) 1.30s forwards; }
#fi1 .fi-icon { animation: scribbleReveal 1.0s var(--ease-out-smooth) 1.38s forwards; }
#fi2 .fi-icon { animation: scribbleReveal 1.0s var(--ease-out-smooth) 1.46s forwards; }
#fi3 .fi-icon { animation: scribbleReveal 1.0s var(--ease-out-smooth) 1.54s forwards; }
#fi4 .fi-icon { animation: scribbleReveal 1.0s var(--ease-out-smooth) 1.62s forwards; }

/* ── Herzblut (fi4) special sizing ────────────────── */

#fi4 .fi-icon {
  transform: none;
  width:  calc(var(--icon-size) * var(--icon-scale));
  height: calc(var(--icon-size) * var(--icon-scale));
  margin-top: 0;
  margin-left: calc(-90px * (var(--icon-scale) - 1));
}

#fi4 .fi-icon svg { width: 100% !important; height: 100% !important; }
#fi4 .fi-dark, #fi4 .fi-light { width: 100%; height: 100%; }
#fi4 .fi-dark  { clip-path: inset(0 0 calc((var(--icon-size) - var(--_split)) * var(--icon-scale)) 0); }
#fi4 .fi-light { clip-path: inset(calc(var(--_split) * var(--icon-scale)) 0 0 0); }

/* ── Icons movin ──────────────────────────────────── */

@keyframes floatIcon0 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 3px -4px; }
}
@keyframes floatIcon1 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -4px 3px; }
}
@keyframes floatIcon2 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 4px 2px; }
}
@keyframes floatIcon3 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -3px -3px; }
}
@keyframes floatIcon4 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 2px 4px; }
}

@keyframes stopFloat {
  to { translate: 0 0; }
}

#fi0 .fi-dark { animation: floatIcon0 3.0s ease-in-out infinite, stopFloat linear both; animation-timeline: auto, scroll(); animation-range: normal, 0px 80px; }
#fi1 .fi-dark { animation: floatIcon1 3.4s ease-in-out infinite, stopFloat linear both; animation-timeline: auto, scroll(); animation-range: normal, 0px 80px; }
#fi2 .fi-dark { animation: floatIcon2 2.8s ease-in-out infinite, stopFloat linear both; animation-timeline: auto, scroll(); animation-range: normal, 0px 80px; }
#fi3 .fi-dark { animation: floatIcon3 3.6s ease-in-out infinite, stopFloat linear both; animation-timeline: auto, scroll(); animation-range: normal, 0px 80px; }
#fi4 .fi-dark { animation: floatIcon4 3.2s ease-in-out infinite, stopFloat linear both; animation-timeline: auto, scroll(); animation-range: normal, 0px 80px; }

/* ── Icon labels ──────────────────────────────────── */

@keyframes labelReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fi-label {
  position: absolute;
  top: calc(var(--icon-size) + 8px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-on-dark-high);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: color var(--duration-fast) ease;
  animation: labelReveal ease-out both;
  animation-timeline: --hero-icons;
  animation-range: entry 60% entry 70%;
}

/* ═══════════════════════════════════════════════════════
   ICONS — DESKTOP OVERRIDE (768px+)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  .icon-container {
    position: fixed;
    top: calc(45vh - 90px);
    left: 0;
    width: 100%;
    height: 260px;
    overflow: visible;
    display: block;

    animation:
      iconFanAndScale cubic-bezier(0.33, 1, 0.68, 1) both,
      iconSplit linear both,
      iconPushAway linear both;

    animation-timeline:
      scroll(),
      --green,
      --green;

    animation-range:
      80px 45vh,
      entry calc(55vh - 90px) entry calc(55vh + 90px),
      exit 0% exit 100%;
  }

  .fi {
    position: absolute;
    left: calc(72vw - 90px);
    top: 0;
    display: block;
    margin: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
  }

  #fi0 {
    transform: translateX(calc(-62vw * var(--fan))) translateY(var(--all-push, 0px));
    animation: slideInRight 0.6s ease-out 0.30s both;
    animation-timeline: auto;
    animation-range: normal;
  }
  #fi1 {
    transform: translateX(calc(-42vw * var(--fan))) translateY(var(--all-push, 0px));
    animation: slideInRight 0.6s ease-out 0.38s both;
    animation-timeline: auto;
    animation-range: normal;
  }
  #fi2 {
    transform: translateX(calc(-22vw * var(--fan))) translateY(var(--all-push, 0px));
    animation: slideInRight 0.6s ease-out 0.46s both;
    animation-timeline: auto;
    animation-range: normal;
  }
  #fi3 {
    transform: translateX(calc(-2vw * var(--fan))) translateY(var(--all-push, 0px));
    animation: slideInRight 0.6s ease-out 0.54s both;
    animation-timeline: auto;
    animation-range: normal;
  }
  #fi4 {
    transform: translateX(calc(18vw * var(--fan))) translateY(var(--all-push, 0px));
    animation: slideInRight 0.6s ease-out 0.62s both;
    animation-timeline: auto;
    animation-range: normal;
    transition: opacity var(--duration-normal) ease;
  }

  .fi-label {
    top: 196px;
    animation-timeline: scroll();
    animation-range: 30vh 45vh;
  }
}


/* ── Custom underline decoration ──────────────────── */

.custom-underline {
  position: relative;
  display: inline-block;
}

.custom-underline::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -24px;
  width: 6.4em;
  height: 32px;
  background-image: url(https://dennism.de/2026/img/underline.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  z-index: -1;
  clip-path: inset(0 100% 0 0);
  animation: draw-line 1.5s var(--ease-out-expo) 0.5s forwards;
}

@keyframes draw-line { to { clip-path: inset(0 0 0 0); } }

.draw-me {
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  animation: draw 1.5s ease-out forwards;
}

@keyframes draw { to { stroke-dashoffset: 500; } }


/* ═══════════════════════════════════════════════════════
   GREEN SECTION (sticky wrapper)
   ═══════════════════════════════════════════════════════ */

.green-wrapper {
    height: 1730px;
    position: relative;
    margin-top: -600px;
}
#greenWrapper  { view-timeline: --green block; }

.green-section {
  position: sticky;
  top: 0;
  width: 100%;
    height: 100vh;
  background: var(--color-primary);
}

@media (min-width: 768px) {
  .green-wrapper { height: 100vh; margin-top: 0;}
  .green-section { height: 100vh; }
}

@keyframes herzblutRise {
  from { transform: translateY(745px); }
  to   { transform: translateY(0); }
}
.wave-rise {
  animation: herzblutRise linear both;
  animation-timeline: --green;
     animation-range: 60% 90%;
}

@media (min-width: 768px) {
  .wave-rise {
    animation-range: 45% 55%;
  }
}

@keyframes waveFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-698px); }
}
.wave-flow { animation: waveFlow 1.6s ease-in infinite; }


/* ═══════════════════════════════════════════════════════
   EXPERIENCE SECTION
   ═══════════════════════════════════════════════════════ */

.experience-section {
  padding: var(--space-xl) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-text-faint);
}

.experience-section .grid-12 { align-items: center; }

.exp-left  { grid-column: 1 / -1; }
.exp-right { grid-column: 1 / -1; margin-top: var(--space-m); }

.exp-left h2 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-display);
  color: var(--color-text-high);
}

.exp-right p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  color: var(--color-text-medium);
}

@media (min-width: 768px) {
  .experience-section { padding: var(--space-3xl) var(--page-margin); }
  .exp-left  { grid-column: 1 / 6; }
  .exp-right { grid-column: 6 / 13; margin-top: 0; }
}


/* ═══════════════════════════════════════════════════════
   LOGO GRID
   ═══════════════════════════════════════════════════════ */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l) var(--space-m);
  padding: 0 var(--page-margin) var(--space-2xl);
  background: var(--color-bg);
  align-items: center;
  justify-items: center;
}

.logo-grid img {
  width: 100%;
  max-width: 150px;
  height: auto;
  filter: grayscale(1);
}
.logo-grid img:last-child { display: none; }

@media (min-width: 768px) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l) 32px;
    padding: 0 var(--page-margin) var(--space-3xl);
  }
  .logo-grid img:last-child { display: block; }
}


/* ═══════════════════════════════════════════════════════
   ABOUT SECTION
   ═══════════════════════════════════════════════════════ */

.about-section {
  background: var(--color-dark);
  padding: var(--space-3xl) 0;
}

.about-section .grid-12 {
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-top {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--grid-gutter);
  grid-column: 1 / -1;
}

.about-title {
  grid-column: 1 / -1;
  color: var(--color-on-dark-high);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  word-wrap: break-word;
  margin-bottom: var(--space-xl);
}

.about-portrait-wrap {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 809;
}

.about-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .about-section { padding: var(--space-4xl) 0; }
  .about-top {
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    align-items: end;
  }
  .about-title {
    grid-column: 1 / 7;
    line-height: 131.6px;
    margin-bottom: 264px;
  }
  .about-portrait-wrap { grid-column: 7 / 13; }
}

.about-content {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--grid-gutter);
  row-gap: var(--space-l);
  grid-column: 1 / -1;
}

.about-intro {
  color: var(--color-on-dark-medium);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-tight);
  word-wrap: break-word;
  grid-column: 1 / -1;
  padding-top: var(--space-xl);
}

.about-divider {
  width: 100%;
  height: 1px;
  background: var(--color-on-dark-faint);
  grid-column: 1 / -1;
}

.about-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
}

.about-row-label {
  color: var(--color-on-dark-medium);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
  padding-bottom: var(--space-s);
}

.about-row-text {
  color: var(--color-on-dark-low);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
}

.about-row-text--skills { line-height: var(--leading-body); }
.about-row-text--skills li {
      margin-left: 20px;
}

@media (min-width: 768px) {
  .about-content {
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    row-gap: var(--row-height);
  }
  .about-intro {
    grid-column: 3 / 13;
    padding-top: var(--space-2xl);
    line-height: 45.6px;
  }
  .about-divider { grid-column: 3 / 13; }
  .about-row {
    grid-template-columns: subgrid;
    align-items: start;
  }
  .about-row-label { grid-column: 3 / 6; line-height: 31.2px; }
  .about-row-text  { grid-column: 7 / 13; line-height: 31.2px; }
}


/* ═══════════════════════════════════════════════════════
   ÜBER MICH SECTION — <details> Accordion
   ═══════════════════════════════════════════════════════ */

.um-section {
  background: var(--color-dark);
  padding: var(--space-3xl) 0;
  width: 100%;
}

.um-section svg {
    stroke-width: 0.7;
}

/* ── Top: Title + Portrait ────────────────────────── */

.um-top {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .um-top {
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
    gap: 0;
  }
  .um-title { grid-column: 1 / 7; }
  .um-portrait-wrap { 
    grid-column: 7 / 13;
    padding-left: 12px;
  }
}

.um-title {
  color: var(--color-on-dark-high);
  font-size: var(--font-size-display);
  font-weight: 400;
  line-height: var(--leading-display);
}

.um-portrait-wrap { width: 100%; }

.um-portrait {
  width: 100%;
  aspect-ratio: 495 / 667;
  object-fit: cover;
  display: block;
}

/* ── Intro text ───────────────────────────────────── */

.um-intro {
  grid-column: 1 / -1;
  color: var(--color-on-dark-medium);
  font-size: var(--font-size-h2);
  font-weight: 400;
  line-height: var(--leading-body);
  margin-bottom: var(--space-3xl);
}

/* ── Bottom: Accordions + SVG stage ───────────────── */

.um-bottom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}

/* ── Accordion list ───────────────────────────────── */

.um-accordions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* ── Details: Browser-Default entfernen ───────────── */
.um-acc summary { list-style: none; }
.um-acc summary::-webkit-details-marker { display: none; }

.um-acc {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 40px;
  overflow: hidden;
  transition: background var(--duration-normal) var(--ease-out-smooth);
  
}

.um-acc:hover { background: rgba(255, 255, 255, 0.08); }

.um-acc-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out-smooth);
}

.um-acc-label {
  color: var(--color-on-dark-medium);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.3;
  flex: 1;
}

.um-acc-content {
  padding: 0 var(--space-m) var(--space-m) calc(32px + var(--space-s) + var(--space-m));
  color: var(--color-on-dark-low);
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 1280px) {
  .um-acc-content { font-size: 18px; }
}

/* ── Accordion Header (= summary) ─────────────────── */

.um-acc-header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m);
  min-height: 64px;
  user-select: none;
  cursor: pointer;
}

/* .um-acc-header:focus-visible {
  outline: 2px solid var(--color-on-dark-high);
  outline-offset: -2px;
  border-radius: 40px;
} */

/* ── Accordion Body Animation (progressive, Chrome 129+) ── */

.um-acc .um-acc-inner {
  overflow: hidden;
}

@supports (interpolate-size: allow-keywords) {
  .um-acc {
    interpolate-size: allow-keywords;
  }
  .um-acc::details-content {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition:
      height var(--duration-slow) var(--ease-out-smooth),
      opacity 0.4s var(--ease-out-smooth),
      content-visibility var(--duration-slow) allow-discrete;
  }
  .um-acc[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* ── Open state ───────────────────────────────────── */

.um-acc[open] {
  background: rgba(255, 255, 255, 0.07);
}

.um-acc[open] .um-acc-icon {
  transform: rotate(45deg);
}

/* ── SVG Stage ────────────────────────────────────── */

.um-stage { display: none; }

@media (min-width: 768px) {
  .um-accordions { grid-column: 1 / 7; }
  .um-stage {
    grid-column: 7 / 13;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 500px;
    position: relative;
    overflow: visible;
    cursor: pointer;
  }
}

.um-stage-icon svg {
  width: 75%;
  height: auto;
}

/* ── Stage icons: Float mit translate, Slide mit transform ── */

.um-stage-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.6s var(--ease-out-expo);
}

/* Float via translate-Property */
.um-stage-icon[data-stage="0"] { animation: umFloat0 3.0s ease-in-out infinite; }
.um-stage-icon[data-stage="1"] { animation: umFloat1 3.4s ease-in-out infinite; }
.um-stage-icon[data-stage="2"] { animation: umFloat2 2.8s ease-in-out infinite; }
.um-stage-icon[data-stage="3"] { animation: umFloat3 3.6s ease-in-out infinite; }
.um-stage-icon[data-stage="4"] { animation: umFloat4 3.2s ease-in-out infinite; }

@keyframes umFloat0 {
  0%, 100% { translate: -24px -20px; rotate: -4deg; }
  50%      { translate: -18px -28px; rotate: -2deg; }
}
@keyframes umFloat1 {
  0%, 100% { translate: 28px 12px; rotate: 3deg; }
  50%      { translate: 22px 20px; rotate: 1deg; }
}
@keyframes umFloat2 {
  0%, 100% { translate: -14px 22px; rotate: -2deg; }
  50%      { translate: -8px 14px; rotate: -4deg; }
}
@keyframes umFloat3 {
  0%, 100% { translate: 18px -24px; rotate: 5deg; }
  50%      { translate: 24px -16px; rotate: 3deg; }
}
@keyframes umFloat4 {
  0%, 100% { translate: 0px 6px; rotate: -1deg; }
  50%      { translate: -6px 14px; rotate: 1deg; }
}

/* ── Stage: alle Icons raus wenn irgendein Acc offen ── */
.um-bottom:has([open]) .um-stage-icon {
  transform: translateX(120vw);
}

/* Staggered exit delays */
.um-bottom:has([open]) .um-stage-icon[data-stage="0"] { transition-delay: 0s; }
.um-bottom:has([open]) .um-stage-icon[data-stage="1"] { transition-delay: 0.04s; }
.um-bottom:has([open]) .um-stage-icon[data-stage="2"] { transition-delay: 0.08s; }
.um-bottom:has([open]) .um-stage-icon[data-stage="3"] { transition-delay: 0.12s; }
.um-bottom:has([open]) .um-stage-icon[data-stage="4"] { transition-delay: 0.16s; }

/* ── Aktives Icon bleibt stehen ───────────────────── */
.um-bottom:has(.um-acc:nth-child(1)[open]) .um-stage-icon[data-stage="0"],
.um-bottom:has(.um-acc:nth-child(2)[open]) .um-stage-icon[data-stage="1"],
.um-bottom:has(.um-acc:nth-child(3)[open]) .um-stage-icon[data-stage="2"],
.um-bottom:has(.um-acc:nth-child(4)[open]) .um-stage-icon[data-stage="3"],
.um-bottom:has(.um-acc:nth-child(5)[open]) .um-stage-icon[data-stage="4"] {
  transform: translateX(0);
  transition-delay: 0.1s;
}

/* ── Return-Delays wenn nichts offen ──────────────── */
.um-bottom:not(:has([open])) .um-stage-icon[data-stage="0"] { transition-delay: 0.16s; }
.um-bottom:not(:has([open])) .um-stage-icon[data-stage="1"] { transition-delay: 0.12s; }
.um-bottom:not(:has([open])) .um-stage-icon[data-stage="2"] { transition-delay: 0.08s; }
.um-bottom:not(:has([open])) .um-stage-icon[data-stage="3"] { transition-delay: 0.04s; }
.um-bottom:not(:has([open])) .um-stage-icon[data-stage="4"] { transition-delay: 0s; }

/* ── Mobile SVG (inline in accordion) ─────────────── */

.um-acc-svg-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-m);
  position: relative;
  height: 160px;
  overflow: hidden;
}

.um-acc-svg-mobile svg {
  width: 180px;
  height: 180px;
}

@media (min-width: 768px) {
  .um-acc-svg-mobile { display: none; }
}

.um-mob-icon {
  position: absolute;
  width: 120px;
  height: 120px;
  transform: translateX(-100vw);
}

.um-mob-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Mobile Icon Keyframes ────────────────────────── */

@keyframes mobSlideThrough {
  0%   { transform: translateX(-100vw); }
  30%  { transform: translateX(0); }
  45%  { transform: translateX(0); }
  100% { transform: translateX(100vw); }
}

@keyframes mobSlideStay {
  0%   { transform: translateX(-100vw); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* ── Mobile: Icons sliden durch wenn Acc offen ────── */

.um-acc[open] .um-mob-icon {
  animation: mobSlideThrough 0.9s var(--ease-out-smooth) both;
}

.um-acc[open] .um-mob-icon[data-mi="0"] { animation-delay: 0s; }
.um-acc[open] .um-mob-icon[data-mi="1"] { animation-delay: 0.06s; }
.um-acc[open] .um-mob-icon[data-mi="2"] { animation-delay: 0.12s; }
.um-acc[open] .um-mob-icon[data-mi="3"] { animation-delay: 0.18s; }
.um-acc[open] .um-mob-icon[data-mi="4"] { animation-delay: 0.24s; }

/* ── Zugehöriges Mobile-Icon bleibt stehen ────────── */

.um-acc:nth-child(1)[open] .um-mob-icon[data-mi="0"],
.um-acc:nth-child(2)[open] .um-mob-icon[data-mi="1"],
.um-acc:nth-child(3)[open] .um-mob-icon[data-mi="2"],
.um-acc:nth-child(4)[open] .um-mob-icon[data-mi="3"],
.um-acc:nth-child(5)[open] .um-mob-icon[data-mi="4"] {
  animation: mobSlideStay 0.8s var(--ease-out-smooth) both;
  animation-delay: 0.1s;
}


/* ═══════════════════════════════════════════════════════
   SERVICES SECTION
   ═══════════════════════════════════════════════════════ */

.services-wrapper {
  position: relative;
  background: var(--color-dark);
  view-timeline: --services block;
  padding-bottom: var(--space-4xl);
}

.services-sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.services-headline {
  color: var(--color-on-dark-high);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  padding-top: var(--space-l);
  grid-column: 1 / -1;
  width: 100%;
}

.services-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gutter);
  }
}

/* .service-item--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: 60;
} */

#servicesFanned {
  margin-top: calc(0px - var(--space-2xl));
    scroll-margin-top: 80vh;
}

.service-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  will-change: transform;
  animation: iconFanOut linear both;
  animation-timeline: --services;
}

.service-icon svg { width: 100%; height: 100%; display: block; }

@media (min-width: 1280px) {
  .service-icon { width: 128px; height: 128px; }
}

@keyframes iconFanOut {
  from { transform: translate(var(--sx), var(--sy)) scale(4.6875); }
  to   { transform: translate(0, 0) scale(1); }
}

.service-icon svg * {
  vector-effect: non-scaling-stroke;
  animation: strokeShrink linear both;
  animation-timeline: --services;
  stroke: var(--color-on-dark-high);
}

.service-icon svg [stroke] {
  vector-effect: non-scaling-stroke;
  animation: strokeShrink linear both;
  animation-timeline: --services;
}

@keyframes strokeShrink {
  from { stroke-width: 1.5; }
  to   { stroke-width: 3; }
}

@media (min-width: 1280px) {
  @keyframes strokeShrink {
    from { stroke-width: 3; }
    to   { stroke-width: 6; }
  }
}

.service-label {
  color: var(--color-on-dark-high);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-tight);
  will-change: opacity, transform;
  animation: labelRevealService linear both;
  animation-timeline: --services;
}

@media (min-width: 1280px) {
  .service-label {
    font-size: var(--font-size-h2);
  }
}

@keyframes labelRevealService {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.service-item:nth-child(1)  .service-icon {  animation-range: 40% 55%; }
.service-item:nth-child(2)  .service-icon { --sy: 300px;  animation-range: 60.5% 75.5%; }
.service-item:nth-child(3)  .service-icon { --sy: 180px;  animation-range: 61% 76%; }
.service-item:nth-child(4)  .service-icon { --sy: 180px;  animation-range: 61.5% 76.5%; }
.service-item:nth-child(5)  .service-icon { --sy: 60px;   animation-range: 62% 77%; }
.service-item:nth-child(6)  .service-icon { --sy: 60px;   animation-range: 62.5% 47.5%; }
.service-item:nth-child(7)  .service-icon { --sy: -60px;  animation-range: 63% 78%; }
.service-item:nth-child(8)  .service-icon { --sy: -60px;  animation-range: 63.5% 78.5%; }
.service-item:nth-child(9)  .service-icon { --sy: -180px; animation-range: 64% 79%; }
.service-item:nth-child(10) .service-icon { --sy: -180px; animation-range: 64.5% 79.5%; }
.service-item:nth-child(11) .service-icon { --sy: -300px; animation-range: 65% 70%; }
.service-item:nth-child(12) .service-icon { --sy: -300px; animation-range: 65.5% 80.5%; }


@keyframes floatService0 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 3px -3px; }
}
@keyframes floatService1 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -3px 2px; }
}
@keyframes floatService2 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 2px -4px; }
}
@keyframes floatService3 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -4px 3px; }
}
@keyframes floatService4 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 3px 2px; }
}
@keyframes floatService5 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -2px -3px; }
}

@keyframes stopServiceFloat {
  to { translate: 0 0; }
}

/* ── Icon fan-out ranges ──────────────────────────── */

.service-item:nth-child(1)  .service-icon { --sy: 240px; animation: iconFanOut linear both, floatService0 2.8s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 20% 32%, normal, 20% 22%; }
.service-item:nth-child(2)  .service-icon { --sy: 88px; animation: iconFanOut linear both, floatService1 3.2s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 20.5% 32.5%, normal, 20.5% 22.5%; }
.service-item:nth-child(3)  .service-icon { --sy: 76px; animation: iconFanOut linear both, floatService2 3.0s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 21% 33%, normal, 21% 23%; }
.service-item:nth-child(4)  .service-icon { --sy: -64px; animation: iconFanOut linear both, floatService3 3.4s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 21.5% 33.5%, normal, 21.5% 23.5%; }
.service-item:nth-child(5)  .service-icon { --sy: -152px; animation: iconFanOut linear both, floatService4 2.6s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 22% 34%, normal, 22% 24%; }
.service-item:nth-child(6)  .service-icon { --sy: -240px; animation: iconFanOut linear both, floatService5 3.6s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 22.5% 34.5%, normal, 22.5% 24.5%; }
.service-item:nth-child(7)  .service-icon { --sy: -328px; animation: iconFanOut linear both, floatService0 3.1s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 23% 35%, normal, 23% 25%; }
.service-item:nth-child(8)  .service-icon { --sy: -416px; animation: iconFanOut linear both, floatService1 2.9s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 23.5% 35.5%, normal, 23.5% 25.5%; }
.service-item:nth-child(9)  .service-icon { --sy: -504px; animation: iconFanOut linear both, floatService2 3.3s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 24% 36%, normal, 24% 26%; }
.service-item:nth-child(10) .service-icon { --sy: -592px; animation: iconFanOut linear both, floatService3 2.7s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 24.5% 36.5%, normal, 24.5% 26.5%; }
.service-item:nth-child(11) .service-icon { --sy: -680px; animation: iconFanOut linear both, floatService4 3.5s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 25% 37%, normal, 25% 27%; }
.service-item:nth-child(12) .service-icon { --sy: -768px; animation: iconFanOut linear both, floatService5 3.0s ease-in-out infinite, stopServiceFloat linear both; animation-timeline: --services, auto, --services; animation-range: 25.5% 37.5%, normal, 25.5% 27.5%; }

/* ── Label reveal ranges ──────────────────────────── */

.service-item:nth-child(1)  .service-label { animation-range: 33% 40%; }
.service-item:nth-child(2)  .service-label { animation-range: 33.5% 40.5%; }
.service-item:nth-child(3)  .service-label { animation-range: 34% 41%; }
.service-item:nth-child(4)  .service-label { animation-range: 34.5% 41.5%; }
.service-item:nth-child(5)  .service-label { animation-range: 35% 42%; }
.service-item:nth-child(6)  .service-label { animation-range: 35.5% 42.5%; }
.service-item:nth-child(7)  .service-label { animation-range: 36% 43%; }
.service-item:nth-child(8)  .service-label { animation-range: 36.5% 43.5%; }
.service-item:nth-child(9)  .service-label { animation-range: 37% 43%; }
.service-item:nth-child(10) .service-label { animation-range: 37.5% 43.5%; }
.service-item:nth-child(11) .service-label { animation-range: 38% 44%; }
.service-item:nth-child(12) .service-label { animation-range: 38.5% 44.5%; }

@media (min-width: 768px) {
  .service-item:nth-child(1)  .service-icon { --sx: 674px; --sy: 300px; animation-range: 30% 35%, normal, 30% 32%; }
  .service-item:nth-child(2)  .service-icon { --sx: 88px;  --sy: 300px; animation-range: 30.5% 35.5%, normal, 30.5% 32.5%; }
  .service-item:nth-child(3)  .service-icon { --sx: 674px; --sy: 180px; animation-range: 31% 36%, normal, 31% 33%; }
  .service-item:nth-child(4)  .service-icon { --sx: 88px;  --sy: 180px; animation-range: 31.5% 36.5%, normal, 31.5% 33.5%; }
  .service-item:nth-child(5)  .service-icon { --sx: 674px; --sy: 60px; animation-range: 32% 37%, normal, 32% 34%; }
  .service-item:nth-child(6)  .service-icon { --sx: 88px;  --sy: 60px; animation-range: 32.5% 37.5%, normal, 32.5% 34.5%; }
  .service-item:nth-child(7)  .service-icon { --sx: 674px; --sy: -60px; animation-range: 33% 38%, normal, 33% 35%; }
  .service-item:nth-child(8)  .service-icon { --sx: 88px;  --sy: -60px; animation-range: 33.5% 38.5%, normal, 33.5% 35.5%; }
  .service-item:nth-child(9)  .service-icon { --sx: 674px; --sy: -180px; animation-range: 34% 39%, normal, 34% 36%; }
  .service-item:nth-child(10) .service-icon { --sx: 88px;  --sy: -180px; animation-range: 34.5% 39.5%, normal, 34.5% 36.5%; }
  .service-item:nth-child(11) .service-icon { --sx: 674px; --sy: -300px; animation-range: 35% 40%, normal, 35% 37%; }
  .service-item:nth-child(12) .service-icon { --sx: 88px;  --sy: -300px; animation-range: 35.5% 40.5%, normal, 35.5% 37.5%; }

  .service-item:nth-child(1)  .service-label { animation-range: 36% 40%; }
  .service-item:nth-child(2)  .service-label { animation-range: 36.5% 40.5%; }
  .service-item:nth-child(3)  .service-label { animation-range: 37% 41%; }
  .service-item:nth-child(4)  .service-label { animation-range: 37.5% 41.5%; }
  .service-item:nth-child(5)  .service-label { animation-range: 38% 42%; }
  .service-item:nth-child(6)  .service-label { animation-range: 38.5% 42.5%; }
  .service-item:nth-child(7)  .service-label { animation-range: 39% 43%; }
  .service-item:nth-child(8)  .service-label { animation-range: 39.5% 43.5%; }
  .service-item:nth-child(9)  .service-label { animation-range: 40% 44%; }
  .service-item:nth-child(10) .service-label { animation-range: 40.5% 44.5%; }
  .service-item:nth-child(11) .service-label { animation-range: 41% 45%; }
  .service-item:nth-child(12) .service-label { animation-range: 41.5% 45.5%; }
}

.service-item:nth-child(odd)  .service-icon { --sx: calc(50vw - 32px - var(--page-margin)); }
.service-item:nth-child(even) .service-icon { --sx: calc(50vw - 32px - var(--page-margin)); }

@media (min-width: 768px) {
  .service-item:nth-child(odd)  .service-icon { --sx: 674px; }
  .service-item:nth-child(even) .service-icon { --sx: 88px; }
}

.service-item .service-icon { 
  --sx: calc(50vw - 32px - var(--page-margin)); 
  --sy: 0px; 
}

@media (min-width: 768px) {
  .service-item:nth-child(odd)  .service-icon { --sx: 674px; }
  .service-item:nth-child(even) .service-icon { --sx: 88px; }
}

.service-item {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: 12px 0;
}

.service-item .service-icon {
  --sx: calc(50vw - 32px - var(--page-margin));
}

.service-item:nth-child(1)  .service-icon { --sy: 240px; }
.service-item:nth-child(2)  .service-icon { --sy: 88px; }
.service-item:nth-child(3)  .service-icon { --sy: 76px; }
.service-item:nth-child(4)  .service-icon { --sy: -64px; }
.service-item:nth-child(5)  .service-icon { --sy: -152px; }
.service-item:nth-child(6)  .service-icon { --sy: -240px; }
.service-item:nth-child(7)  .service-icon { --sy: -328px; }
.service-item:nth-child(8)  .service-icon { --sy: -416px; }
.service-item:nth-child(9)  .service-icon { --sy: -504px; }
.service-item:nth-child(10) .service-icon { --sy: -592px; }
.service-item:nth-child(11) .service-icon { --sy: -680px; }
.service-item:nth-child(12) .service-icon { --sy: -768px; }

@media (min-width: 768px) {
  .service-item {
    gap: var(--space-l);
  }
  .service-item:nth-child(1)  .service-icon { --sx: 674px; --sy: 300px; }
  .service-item:nth-child(2)  .service-icon { --sx: 88px;  --sy: 300px; }
  .service-item:nth-child(3)  .service-icon { --sx: 674px; --sy: 180px; }
  .service-item:nth-child(4)  .service-icon { --sx: 88px;  --sy: 180px; }
  .service-item:nth-child(5)  .service-icon { --sx: 674px; --sy: 60px; }
  .service-item:nth-child(6)  .service-icon { --sx: 88px;  --sy: 60px; }
  .service-item:nth-child(7)  .service-icon { --sx: 674px; --sy: -60px; }
  .service-item:nth-child(8)  .service-icon { --sx: 88px;  --sy: -60px; }
  .service-item:nth-child(9)  .service-icon { --sx: 674px; --sy: -180px; }
  .service-item:nth-child(10) .service-icon { --sx: 88px;  --sy: -180px; }
  .service-item:nth-child(11) .service-icon { --sx: 674px; --sy: -300px; }
  .service-item:nth-child(12) .service-icon { --sx: 88px;  --sy: -300px; }
}

/* ═══════════════════════════════════════════════════════
   EINBLICKE (Insights)
   ═══════════════════════════════════════════════════════ */

.einblicke-section {
  background: var(--color-dark);
  padding: 0 0 var(--space-xl) 0;
  overflow: hidden;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.einblicke-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 var(--page-margin);
  margin-bottom: var(--space-l);
}

.einblicke-headline {
  color: #fff;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .einblicke-section {
  padding: 0 0 var(--space-3xl) 0;
}
  .einblicke-headline { line-height: 131.6px; }
}

.einblicke-nav {
  display: flex;
  gap: var(--space-s);
}

.einblicke-btn {
  width: 56px;
  height: 56px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.einblicke-btn:hover         { background: rgba(255, 255, 255, 0.4); }
.einblicke-btn[disabled]     { opacity: 0.2; cursor: default; }
.einblicke-btn[disabled]:hover { background: rgba(255, 255, 255, 0.3); }

button.einblicke-btn.einblicke-btn--prev svg { right: 4px; position: relative; }
button.einblicke-btn.einblicke-btn--next svg { right: -4px; position: relative; }

@media (min-width: 768px) {
  .einblicke-nav { padding-top: var(--space-m); }
  .einblicke-btn { width: 96px; height: 96px; padding: var(--space-s); }
}

.einblicke-track {
  display: flex;
  gap: var(--space-s);
  padding: 0 var(--page-margin);
  align-items: flex-start;
  overflow-x: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  flex: 1;
  min-height: 0;
  scroll-snap-type: none;
  scroll-padding-left: var(--page-margin);
}

.einblicke-track::-webkit-scrollbar { display: none; }
.einblicke-track.is-dragging { scroll-behavior: auto; cursor: grabbing; user-select: none; }
.einblicke-track.is-dragging .einblick-img,
.einblicke-track.is-dragging .einblick-brand-block { pointer-events: none; }

@media (min-width: 768px) {
  .einblicke-track { gap: var(--grid-gutter); }
}

.einblicke-track.snapping {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: var(--page-margin);
}

.einblick-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  scroll-snap-align: start;
  height: 100%;
}

.einblick-card--s  { width: 100%; }
.einblick-card--m  { width: 100%; }
.einblick-card--l  { width: 100%; }
.einblick-card--xl { width: 100%; }

@media (min-width: 768px) {
  .einblick-card     { width: calc(100vw - 2 * var(--page-margin) - 20px); gap: var(--space-m); }
.einblick-card--s  { width: calc(4 * var(--col) + 3 * var(--grid-gutter)); }
  .einblick-card--m  { width: calc(5 * var(--col) + 4 * var(--grid-gutter)); }
  .einblick-card--l  { width: calc(5 * var(--col) + 4 * var(--grid-gutter)); }
  .einblick-card--xl { width: calc(6 * var(--col) + 5 * var(--grid-gutter)); }
}

.einblick-img {
  flex: 0 1 auto;
  min-height: 60px;
  max-height: 50vh;
  width: 100%;
  object-fit: cover;
  object-position: right top;
  border-radius: 8px;
  opacity: 0.9;
  display: block;
}

.einblick-img--tall { height: 400px; }

@media (min-width: 768px) {
  .einblick-img       { height: 364px; }
  .einblick-img--tall { height: 640px; }
}

.einblick-brand-block {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: 264px;
  background: var(--color-brand-blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.einblick-brand-block img { width: 80%; height: auto; object-fit: contain; }

.einblick-meta {
  color: var(--color-on-dark-low);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);    
  margin-bottom: calc(var(--space-xs) - var(--space-m));
}
@media (min-width: 768px) {
  .einblick-meta {
    color: var(--color-on-dark-low);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-relaxed);    
    margin-bottom: calc(4px - var(--space-m));
  }
}

.einblick-title {
  color: #fff;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-tight);
}

.einblick-text {
  color: var(--color-on-dark-low);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
}

.einblick-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.einblick-tag {
  padding: 10px;
  background: var(--color-on-dark-ghost);
  border-radius: 4px;
  color: var(--color-on-dark-low);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1;
}

@media (min-width: 768px) { .einblick-tag { padding: 12px; } }

.einblick-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) 0;
  color: #fff;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.einblick-link svg { flex-shrink: 0; transition: transform var(--duration-normal) ease; }
.einblick-link:hover svg { transform: translate(4px, -4px); }

/* ═══════════════════════════════════════════════════════
   PROJEKTE SECTION
   ═══════════════════════════════════════════════════════ */

.projekte-section {
  background: var(--color-bg);
  padding: var(--space-3xl) 0;
}

.projekte-headline {
  grid-column: 1 / -1;
  color: var(--color-text-high);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  margin-bottom: var(--space-2xl);
}

/* ── Grid layout ──────────────────────────────────── */

.projekte-grid {
  row-gap: var(--space-2xl);
}

/* ── Card base ────────────────────────────────────── */

.projekt-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.projekt-card--full {
  grid-column: 1 / -1;
}

.projekt-card--half {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  
    /* .projekt-card--left {
    grid-column: 1 / 8;
  }
  .projekt-card--right {
    grid-column: 9 / 13;
  } */
  
  .projekt-card--left {
    grid-column: 1 / 6;
  }
  .projekt-card--right {
    grid-column: 7 / 13;
  }

}

/* ── Image ────────────────────────────────────────── */

.projekt-img-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 807 / 550;
}

.projekt-img-wrap--large {
  border-radius: 24px;
  aspect-ratio: 1222 / 807;
}

.projekt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out-smooth);
}

/* .projekt-card:hover .projekt-img {
  transform: scale(1.02);
} */

/* ── Meta ─────────────────────────────────────────── */

.projekt-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.projekt-date {
  color: var(--color-text-medium);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
}

.projekt-title {
  color: var(--color-text-high);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-tight);
}

/* ── Tags ─────────────────────────────────────────── */

.projekt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.projekt-tag {
  padding: 8px 12px;
  background: var(--color-text-medium);
  border-radius: 4px;
  color: var(--color-bg);
  font-size: 18px;
  font-weight: var(--font-weight-normal);
  line-height: 1;
}

/* ── Link ─────────────────────────────────────────── */

.projekt-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-high);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: var(--space-xs);
  width: fit-content;
}

.projekt-link svg {
  flex-shrink: 0;
  transition: transform var(--duration-normal) ease;
}

.projekt-link:hover svg {
  transform: translate(4px, -4px);
}

/* ── Coming soon ──────────────────────────────────── */

.projekt-soon {
  color: var(--color-text-medium);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
  margin-top: var(--space-xs);
}

/* ── Desktop refinements ──────────────────────────── */

@media (min-width: 1280px) {
  .projekt-tag {
    font-size: 20px;
  }
}
/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */

.footer-section { display: flex; flex-direction: column; }

.footer-main {
  background: var(--color-bg);
  border-top: 2px solid var(--color-text-subtle);
}

.footer-main-inner {
  grid-column: 1 / -1;
  position: relative;
  min-height: 90vh;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  display: grid;
  align-content: space-between;
}

.footer-headline {
  grid-column: 1 / -1;
  color: var(--color-text-high);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-display);
}
.project-heart-container {
  position: relative;
}

@media (min-width: 768px) {
  .footer-main-inner {
    padding-top: 144px;
    padding-bottom: 144px;
  }
  .footer-headline {
    grid-column: 1 / 9;
    line-height: var(--font-size-display);
  }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.15); }
  20%      { transform: scale(1); }
  30%      { transform: scale(1.1); }
  40%      { transform: scale(1); }
}

.footer-heart { display: none; }

@media (min-width: 768px) {
  .footer-heart {
    display: flex;
    position: absolute;
    top: 228px;
    right: var(--page-margin);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    animation: heartbeat 2s ease-in-out infinite;
  }
}

.footer-heart-sup {
  /* display: inline-block;
  position: relative;
  top: -0.2em;
  margin-left: 4px;
  margin-right: 2px;
  line-height: 0;
  animation: heartbeat 2s ease-in-out infinite;
  transform-origin: center center; */

  position: absolute;
    top: -0.2em;
    animation: heartbeat 2s ease-in-out infinite;
    transform-origin: center center;
    right: -32px;
}
@media (min-width: 768px) {
  .footer-heart-sup {         
    top: -40px; }
}

.footer-contact {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  align-items: flex-end;
}

.footer-contact-link,
.footer-external-link {
  color: var(--color-text-high);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-normal);
  line-height: 1.0;
  text-decoration: underline;
  text-underline-offset: 4px;
  word-break: break-all;
}

.footer-external-link {
    right: -8px;
    position: relative;
}
.footer-external-link svg {
    width: var(--font-size-h2);
    height: var(--font-size-h2);
    flex-shrink: 0;
    transition: transform var(--duration-normal) ease;
}
.footer-external-link:hover svg {
    transform: translate(4px, -4px);
}
@media (min-width: 768px) {
  .footer-external-link svg {
  width: 32px;
  height: 32px;
  }
}


.footer-contact-phone {
  color: var(--color-text-high);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-normal);
}

@media (min-width: 768px) {
  .footer-contact {
    grid-column: 7 / 13;
    margin-top: 0;
  }
  .footer-contact-link { word-break: normal; }
}

.footer-bar { background: var(--color-primary); }

.footer-bar-inner {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
}

.footer-bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
}

.footer-bar-links a {
  color: var(--color-on-dark-high);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  text-decoration: none;
}

.footer-bar-info { display: none; }
.footer-bar-info svg { position: relative; top: -2px; }

.footer-bar-info span {
  color: var(--color-on-dark-high);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .footer-bar-inner { display: grid; align-items: end; }
  .footer-bar-links { grid-column: 1 / 7; gap: 32px; }
  .footer-bar-info  {
    grid-column: 7 / 13;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
}


/* ═══════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════ */

.nowrap { white-space: nowrap; }