/* ==========================================================================
   Amara Solutions – Canva-Referenz 1:1
   Design-Basis: 1440 px (Homepage_Refernz_Canva.png / Cerntech_Referent.png)
   Alle Desktop-Werte sind aus der Referenz gemessen (px @ 1440).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{}

*{margin:0;padding:0;box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-text);
  color:var(--c-ink);
  background:var(--c-white);
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* Fokus: blauer Ring mit weissem Innenring – auf hellem und dunklem Grund sichtbar */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px var(--c-white);
}
/* "Zum Inhalt springen": unsichtbar, erscheint bei Tastaturfokus oben links */
.skip-link{
  position:fixed;left:var(--space-2);top:var(--space-2);z-index:200;
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);
  background:var(--c-navy);color:var(--c-white);font-weight:var(--fw-semibold);font-size:var(--fs-small);
  transform:translateY(-200%);transition:transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus{transform:none;}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none;box-shadow:none;}
/* Typografie: ausgewogene Umbrueche (Langform – text-wrap wuerde white-space:nowrap aufheben) */
h1,h2,h3,.k-title{text-wrap-style:balance;}
p,li{text-wrap-style:pretty;}
ul{list-style:none;}

.container{
  width:1440px;
  margin:0 auto;
  position:relative;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
/* Einheitliche, fixierte Navigationsleiste (Pill-Form aus Services_Referenz_1, Stand 11.10.)
   – auf allen Seiten identisch, bleibt beim Scrollen sichtbar */
html{scroll-padding-top:96px;}
.site-nav{
  position:fixed;
  top:28px; left:50%;
  width:min(1400.8px, calc(100% - 39.2px));
  height:48px;
  transform:translateX(-50%);
  z-index:100;
  border-radius:var(--radius-lg);
  background:rgb(var(--rgb-black) / .84);
  box-shadow:inset 0 0 0 3px rgb(var(--rgb-steel) / .72), var(--shadow-1);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:box-shadow .3s ease, background-color .3s ease;
}
.site-nav.is-scrolled{
  background:rgb(var(--rgb-black) / .9);
  box-shadow:inset 0 0 0 3px rgb(var(--rgb-steel) / .8), var(--shadow-2);
}
.site-nav__list{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 46px 0 50px;
  margin:0; list-style:none;
}
.site-nav__list > li{position:relative;}
.site-nav a,
.site-nav .lang__btn{
  display:block;
  font-family:var(--font-text);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-body);
  line-height:21px;
  letter-spacing:-.02em;
  color:var(--c-white);
  white-space:nowrap;
  background:none; border:0; padding:0; cursor:pointer;
  transition:opacity .2s ease;
}
.site-nav a:hover,.site-nav .lang__btn:hover{opacity:.62;}
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:rgb(var(--rgb-steel) / .95);}
.nav-toggle{display:none;}

.lang__menu{
  position:absolute; right:-22px; top:calc(100% + 22px);
  min-width:132px; padding:6px; border-radius:var(--radius-md);
  background:rgb(var(--rgb-black) / .92);
  box-shadow:inset 0 0 0 2px rgb(var(--rgb-steel) / .6), var(--shadow-3);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  z-index:110;
  display:flex; flex-direction:column; gap:2px;
}
.lang__menu[hidden]{display:none;}
.lang__menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border:0; border-radius:var(--radius-sm); background:none; cursor:pointer;
  font-family:var(--font-text); font-size:var(--fs-xs); color:var(--c-white); text-align:left;
}
.lang__menu button span{font-weight:var(--fw-semibold);min-width:22px;}
.lang__menu button:hover,.lang__menu button[aria-checked="true"]{background:rgb(var(--rgb-steel) / .28);}
html[dir="rtl"] .lang__menu{right:auto;left:-22px;}
html[dir="rtl"] .lang__menu button{text-align:right;}
html[dir="rtl"] .site-nav__list{padding:0 50px 0 46px;}

/* Tablet & Mobile: gleiche Form, kompakt – runder Menue-Knopf + aufklappendes Panel */
@media (max-width:1023.98px){
  html{scroll-padding-top:84px;}
  .site-nav{
    top:12px; left:auto; right:12px; transform:none;
    width:56px; height:56px; border-radius:var(--radius-lg);
  }
  html[dir="rtl"] .site-nav{right:auto;left:12px;}
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:56px; height:56px; padding:0 17px; border:0; background:none; cursor:pointer;
  }
  .nav-toggle span{display:block;height:2px;background:var(--c-white);border-radius:var(--radius-sm);transition:transform .25s ease, opacity .25s ease;}
  .site-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-nav.is-open .nav-toggle span:nth-child(2){opacity:0;}
  .site-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .site-nav__list{
    position:absolute; top:66px; right:0;
    width:min(300px, calc(100vw - 24px)); height:auto;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:10px 22px 16px;
    border-radius:var(--radius-lg);
    background:rgb(var(--rgb-black) / .92);
    box-shadow:inset 0 0 0 3px rgb(var(--rgb-steel) / .72), var(--shadow-3);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  html[dir="rtl"] .site-nav__list{right:auto;left:0;padding:10px 22px 16px;}
  .site-nav.is-open .site-nav__list{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease, transform .25s ease;}
  .site-nav a,.site-nav .lang__btn{font-size:var(--fs-small);line-height:46px;}
  .site-nav .lang{margin-top:4px;border-top:1px solid rgb(var(--rgb-white) / .16);padding-top:6px;}
  .lang__menu{position:static;box-shadow:none;background:transparent;padding:0 0 4px;flex-direction:row;flex-wrap:wrap;gap:6px;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .lang__menu button{width:auto;border:1px solid rgb(var(--rgb-white) / .3);}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  height:810px;
  background:var(--c-white);
  overflow:hidden;
}
.hero__video{
  position:absolute;
  top:0;left:0;
  width:100%;
  min-width:1440px;
  height:810px;
  object-fit:cover;
  object-position:center center;
  z-index:1;
}
.hero .container{height:810px;z-index:2;}
.hero__mark{
  position:absolute;
  left:552px;
  top:228px;
  width:331px;
  height:auto;
  z-index:3;
}

/* ==========================================================================
   SEKTION 3 – Tradition trifft Innovation  (im Verlauf, 1770 -> 2870)
   Referenz Homepage_Refernz_Canva.png (Stand 10.10.)
   ========================================================================== */
.s-intro{
  position:relative;
  height:1100px;           /* 1770 -> 2870 */
}
.s-intro .container{height:1100px;}

.s-intro__title{
  position:absolute;
  left:100px;
  top:-28.2px;             /* Ink-Oberkante 1755 abs */
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:var(--fs-h2);
  line-height:86.1px;
  letter-spacing:-.0092em;
  white-space:nowrap;
  z-index:2;
}
.s-intro__title span{
  display:block;
  width:760px;
  background:var(--grad-text-intro);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.s-intro__title .l2{letter-spacing:-.033em;}
.s-intro__title .l3{letter-spacing:-.0063em;margin-top:-4px;}
.s-intro__text{
  position:absolute;
  left:101px;
  top:249px;               /* Ink 2027 abs */
  width:760px;
  white-space:nowrap;
  letter-spacing:-.005em;
  font-size:var(--fs-lead);
  font-weight:var(--fw-regular);
  line-height:36.2px;
  color:var(--c-ink);
  z-index:2;
}
.s-intro__cta{
  position:absolute;
  left:100px;
  top:470px;               /* 2240 abs */
  z-index:2;
}
.s-intro__plan{
  position:absolute;
  left:36.5px;
  top:579.9px;             /* 2349,9 abs */
  width:773.7px;
  height:auto;
  z-index:1;
}
.s-intro__arm-wrap{
  position:absolute;
  left:811px;
  top:-252px;              /* Videobox 1518 abs */
  width:612px;
  height:1106px;           /* unten bei 2624 abs beschnitten */
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:multiply; /* weisser Videohintergrund -> Verlauf scheint durch */
}
.s-intro__arm{
  display:block;
  width:612px;
  height:1161px;
  object-fit:cover;
  object-position:center bottom;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:var(--font-text);
  font-weight:var(--fw-semibold);
  font-variant-ligatures:none;
  font-feature-settings:"calt" 0,"liga" 0;
  color:var(--c-white);
  background:var(--c-navy);
  border-radius:var(--radius-sm);
  white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);}
/* Einheitliche Zustaende aller Buttons (Hover / Aktiv / Deaktiviert) */
.btn,.k-send,.lg-back,.ua-touch{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease,opacity var(--dur-fast) ease;}
.k-send:hover,.lg-back:hover,.ua-touch:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);opacity:1;}
.btn:active,.k-send:active,.lg-back:active,.ua-touch:active{transform:translateY(0);box-shadow:none;filter:brightness(.92);}
.btn[disabled],.k-send[disabled],.btn[aria-disabled="true"],.k-send[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

.btn--explore{
  width:316px;height:48px;
  font-size:var(--fs-body);
  border:2px solid var(--c-gray-500);
  border-radius:var(--radius-sm);
}
.btn--touch{
  width:316px;height:47px;
  font-size:var(--fs-small);
  border:2px solid var(--c-white);
  border-radius:var(--radius-sm);
}
.btn--back{
  width:316px;height:48px;
  font-size:var(--fs-small);
  border:2px solid var(--c-white);
  border-radius:var(--radius-sm);
}

/* ==========================================================================
   Blauer Verlaufsbereich (Sektion 3 + Solutions + Partner)
   ========================================================================== */
.gradient-wrap{
  position:relative;
  background:var(--grad-sky-light);
}

/* ---------- Sektion 4 – Neue Technologie (2870 -> 4030) ---------- */
.s-tech{
  position:relative;
  height:1160px;
}
.s-tech .container{height:1160px;}
.s-tech__robot{
  position:absolute;
  left:560.3px;
  top:75.9px;              /* 2945,9 abs */
  width:859.9px;
  height:auto;
  z-index:1;
}
.s-tech__title{
  position:absolute;
  left:30px;
  top:22.7px;              /* Ink 2912 abs */
  width:620px;
  white-space:nowrap;
  font-weight:var(--fw-bold);
  font-size:var(--fs-h2);
  line-height:97.9px;
  letter-spacing:-.0167em;
  color:var(--c-ink);
  z-index:2;
}
.s-tech__text{
  position:absolute;
  left:33px;
  top:341.5px;             /* Ink 3217 abs */
  width:600px;
  white-space:nowrap;
  font-size:var(--fs-lead);
  line-height:32.0px;
  letter-spacing:-.005em;
  color:var(--c-ink);
  z-index:2;
}
.s-tech__text p + p{margin-top:33.7px;}
.s-tech__cta{
  position:absolute;
  left:33px;
  top:719px;               /* 3589 abs */
  z-index:2;
}

/* ==========================================================================
   SEKTION 2 – Our Solutions  (weiss, 810 -> 1770)
   ========================================================================== */
.s-solutions{
  position:relative;
  height:960px;
  background:var(--c-white);
}
.s-solutions .container{height:960px;}

.display-head{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-display-2);
  line-height:1;
  color:var(--c-ink);
  white-space:nowrap;
}
.s-solutions__head{
  position:absolute;
  left:193px;
  top:66.3px;              /* Ink 892 abs */
  font-family:var(--font-mono);
  font-weight:700;
  font-size:var(--fs-display-1);
  letter-spacing:-.0188em;
}
.s-cards{
  position:absolute;
  left:81px;
  top:285px;               /* 1095 abs */
  display:flex;
  gap:74px;
}
.card{
  width:379px;
  height:548px;
  background:var(--c-navy);
  border-radius:var(--radius-xl);
  padding:0 17px 19px;
  display:flex;
  flex-direction:column;
}
.card__title{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:var(--fs-h4);
  line-height:29.0px;
  letter-spacing:-.0256em;
  color:var(--c-white);
  text-align:center;
  height:133px;
  padding-top:12.8px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.card__media{
  flex:1;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--c-white);
}
.card__media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.card__media--contain{display:flex;align-items:center;justify-content:center;}
.card__media--contain img{width:106.7%;height:auto;max-width:none;object-fit:contain;background:var(--c-white);}
.card__media--crop3 img{object-position:50% 27%;}
.card--link{color:inherit;text-decoration:none;transition:transform .25s ease, box-shadow .25s ease;}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.card__media--gray img{filter:grayscale(1);}
.card__media--chart{background:var(--c-gray-100);}
.card__media--chart img{filter:grayscale(1) brightness(.957);background:transparent;}
/* Karte 1: freigestellter Roboter auf weissem Feld – einheitlich mit den anderen Bereichen (Stand 28.10.) */
.card__media--robot{position:relative;background:var(--c-white);overflow:hidden;}
.card__media--robot img{
  position:absolute;
  left:var(--robot-x,16px); top:var(--robot-y,14px);   /* Luft ueber dem Kopf (weisses Feld) */
  width:var(--robot-w,326px); height:auto; max-width:none;
  filter:grayscale(1);
}
.card:has(.card__media--robot){overflow:hidden;}

/* ---------- Sektion 5 – Kunden & Partner ---------- */
.s-partners{
  position:relative;
  height:430px;            /* 4030 -> 4460 */
}
.s-partners .container{height:430px;}
.s-partners__head{
  position:absolute;
  left:76px;
  top:-240.3px;
  letter-spacing:.0013em;
}
.marquee{
  position:absolute;
  left:0;top:0;
  width:100%;
  height:424px;
  overflow:hidden;
}
.marquee__track{
  display:flex;
  gap:20px;
  width:max-content;
  --mq-start:-275px;                       /* Startposition laut Canva: erstes Logo angeschnitten */
  transform:translateX(var(--mq-start));
}
.marquee__item{
  width:315px;
  height:424px;
  border:1px solid rgb(var(--rgb-white) / .55);
  border-radius:var(--radius-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.marquee__item img{
  max-width:89%;
  max-height:42%;
  object-fit:contain;
}
/* Endlos-Laufband: --mq-dist (= Breite einer Logo-Reihe) und --mq-dur setzt site.js */
[data-marquee],.marquee,.kp-row{direction:ltr;}   /* Laufband auch bei Arabisch (RTL) linksbuendig verankern */
[data-marquee].is-running{animation:mq-loop var(--mq-dur,40s) linear infinite;}
@keyframes mq-loop{
  from{transform:translateX(var(--mq-start,0px));}
  to{transform:translateX(calc(var(--mq-start,0px) - var(--mq-dist,0px)));}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative;
  height:860px;            /* 4460 -> 5320 */
  background:
    var(--img-footer-dark) calc(50% + 23px) 13.1px / 2861.6px 851.3px no-repeat,
    var(--grad-footer-home);
  overflow:hidden;
  color:var(--c-white);
}
.site-footer .container{height:860px;}

.f-head{
  font-weight:var(--fw-bold);
  font-size:var(--fs-h4);
  line-height:39.1px;
  color:var(--c-white);
}
.f-nav{position:absolute;left:123px;top:103.5px;}
.f-nav ul{margin-top:7.2px;}
.f-nav li + li{margin-top:0;}
.f-nav a{
  display:block;
  font-size:var(--fs-small);
  line-height:34.9px;
  font-weight:var(--fw-regular);
  color:var(--c-white);
}

.f-contact{
  position:absolute;
  left:441px;top:105.4px;
  width:480px;
  text-align:center;
}
.f-mail{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:8.9px;
  font-size:var(--fs-small);
  line-height:24.6px;
  font-weight:var(--fw-regular);
  color:var(--c-white);
}
.f-mail svg{width:28px;height:20px;flex:0 0 auto;}
.f-social{margin-top:13.8px;display:flex;justify-content:center;padding-right:13px;}
.f-social img{width:40px;height:auto;}

.f-company{position:absolute;left:1050px;top:104.2px;}
.f-company p{
  font-size:var(--fs-small);
  line-height:36.3px;
  font-weight:var(--fw-regular);
  margin-left:20px;
}
.f-company p:first-of-type{margin-top:4px;}
.f-legal{margin-top:20.8px;}
.f-legal a{display:block;font-weight:var(--fw-bold);font-size:var(--fs-h4);line-height:52.7px;}

.f-logo{
  position:absolute;
  left:0;
  top:434px;               /* 4894 abs */
  width:1440px;
  height:auto;
  pointer-events:none;
}

/* ==========================================================================
   CERNTECH PAGE
   ========================================================================== */
.cern{
  position:relative;
  min-height:812px;
  height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:var(--c-navy);
}
.cern__video{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:1;
}
.cern .container{
  position:relative;
  z-index:3;
  height:812px;
}
.cern .grad{
  background:var(--grad-text-cerntech);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cern__mark{
  position:absolute;
  left:608.5px;top:125px;
  width:223.4px;height:auto;
}
.cern__kicker{
  position:absolute;
  left:0;top:410.8px;
  width:1440px;
  padding-left:21px;
  text-align:center;
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:var(--fs-lead);
  line-height:26.0px;
  letter-spacing:-.023em;
  font-variant-ligatures:none;
}
.cern__title{
  position:absolute;
  left:0;top:501.4px;
  width:1440px;
  padding-left:89.6px;
  text-align:center;
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:var(--fs-display-2);
  line-height:116.0px;
  letter-spacing:-.0159em;
}
.cern__cta{
  position:absolute;
  left:562px;top:683px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---- 1024–1439 px: Referenz-Layout proportional herunterskalieren ----
   Damit bleibt das Canva-Design exakt erhalten, nur kleiner.          */
@media (min-width:1024px) and (max-width:1439.98px){
  body{zoom:var(--page-zoom,1);}
}

/* ---------- Tablet & Mobile: Flow-Layout ---------- */
@media (max-width:1023.98px){
  .container{width:100%;padding:0 40px;}
  .lb{display:none;}
  .s-intro__title,.s-intro__text,.s-tech__title,.s-tech__text{white-space:normal;letter-spacing:normal;}


  /* Hero */
  .hero{height:auto;padding-top:72px;}
  .hero__video{position:relative;left:0;transform:none;width:100%;min-width:0;height:auto;aspect-ratio:16/9;}   /* Hoehe steht vor dem Laden fest -> kein Springen */
  .hero .container{position:absolute;inset:72px 0 0 0;height:auto;
                   display:flex;align-items:center;justify-content:center;padding:0;}
  .hero__mark{position:static;width:26%;}

  /* Sektion 2 */
  .s-intro,.s-tech,.s-solutions,.s-partners{height:auto;}
  .s-intro .container,.s-tech .container,.s-solutions .container,.s-partners .container{height:auto;}
  .s-intro{padding:56px 0 72px;}
  .s-intro__title,.s-intro__text,.s-intro__cta,.s-intro__arm{position:static;}
  .s-intro__title{width:100%;font-size:var(--fs-h3);line-height:1.2;}
  .s-intro__text{width:100%;max-width:620px;margin-top:22px;font-size:var(--fs-lead);line-height:1.4;}
  .s-intro__cta{margin-top:30px;}
  .s-intro__arm{width:min(46%,320px);height:auto;margin:24px auto 0;object-fit:contain;}

  /* Sektion 3 */
  .s-tech{padding:40px 0 72px;display:flex;flex-direction:column;}
  .s-tech .container{display:flex;flex-direction:column;}
  .s-tech__robot,.s-tech__title,.s-tech__text,.s-tech__cta{position:static;}
  .s-tech__robot{width:min(66%,430px);margin:0 auto 12px;}
  .s-tech__title{width:100%;font-size:var(--fs-h3);line-height:1.25;}
  .s-tech__text{width:100%;max-width:620px;margin-top:22px;font-size:var(--fs-lead);line-height:1.35;}
  .s-tech__text p + p{margin-top:1.35em;}
  .s-tech__cta{margin-top:30px;}

  /* Solutions */
  .s-solutions{padding:20px 0 70px;}
  .display-head{font-size:var(--fs-display-2);white-space:nowrap;}
  .s-solutions__head,.s-partners__head{position:static;text-align:center;}
  .s-cards{position:static;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:44px;}
  .card{width:min(379px,100%);}

  /* Partner */
  .s-partners{padding:0 0 64px;}
  .s-partners__head{margin-bottom:34px;}
  .marquee{position:static;height:340px;}
  .marquee__item{width:250px;height:340px;}

  /* Footer */
  .site-footer{height:auto;padding:64px 0 70vw;background-size:230% auto;background-position:center bottom;}   /* Logo-Welle unter den Texten, nicht darueber */
  .site-footer .container{height:auto;display:flex;flex-direction:column;gap:44px;}
  .f-nav,.f-contact,.f-company{position:static;width:100%;text-align:center;}
  .f-head{font-size:var(--fs-h4);line-height:1.25;}
  .f-nav a,.f-mail,.f-company p{font-size:var(--fs-xs);line-height:32px;}
  .f-company p{margin-left:0;}
  .f-legal a{font-size:var(--fs-h4);line-height:1.5;}
  .f-logo{position:static;width:100%;margin-top:34px;}
}

@media (max-width:640px){
  .container{padding:0 20px;}
  .card{height:auto;}
  .card__title{height:auto;padding:22px 0 18px;font-size:var(--fs-lead);line-height:27px;}
  .card__media{aspect-ratio:344/396;flex:none;}
  .marquee{height:250px;}
  .marquee__item{width:190px;height:250px;border-radius:var(--radius-lg);}
  .marquee__track{--mq-start:-210px;}
  .btn--explore,.btn--back,.btn--touch{width:100%;max-width:316px;}
}

@media (prefers-reduced-motion:reduce){
  .marquee__track,[data-marquee].is-running{animation:none;}
  .btn{transition:none;}
}

/* ==========================================================================
   SEITE: KONTAKT   (Referenz Kontakt/Contact_Referenz.png · 1440 x 2033)
   ========================================================================== */
.page-kontakt{
  position:relative;
  min-height:2033px;
  background:var(--grad-sky-night);
  overflow:hidden;
}
.page-kontakt::after{           /* Footer-Glas-Welle, transparente PNG */
  content:"";
  position:absolute;
  left:0; bottom:0;
  /* randabfallend: Welle skaliert mit der Fensterbreite (Referenz 11.10.: 119,5 % Breite, unten 34 px angeschnitten) */
  width:100%; height:auto; aspect-ratio:100 / 61.52;
  background:var(--img-footer-blue) calc(50% + 22px * var(--wide,1)) 0 / 119.5% auto no-repeat;
  pointer-events:none;
}
.page-kontakt .container{height:2033px;}

.k-title{
  position:absolute;
  left:54px; top:240px;
  width:640px;
  font-weight:var(--fw-bold);
  font-size:var(--fs-h1);
  line-height:83.9px;
  letter-spacing:-.022em;
  color:var(--c-navy);                 /* Navy statt Weiss auf Hellblau (2,2:1 -> 12:1) */
  z-index:3;
}
.k-form{
  position:absolute;
  left:704.6px; top:144.3px;
  width:677.3px; height:717.8px;
  background:var(--c-white);
  padding:0 37px;
  z-index:3;
}
.k-form label{
  display:block;
  font-size:var(--fs-small);
  line-height:18.0px;
  font-weight:var(--fw-semibold);
  color:var(--c-black);
}
.k-form .fld{position:absolute;left:37px;right:37px;}
.k-form input,.k-form textarea{
  display:block;
  width:100%;
  margin-top:14px;
  border:1px solid var(--c-gray-400);
  border-radius:var(--radius-sm);
  background:var(--c-white);
  font-family:var(--font-text);
  font-size:var(--fs-small);
  color:var(--c-black);
  padding:0 14px;
}
.k-form input{height:47.9px;}
.k-form textarea{height:92.1px;padding:12px 14px;resize:vertical;}
.k-form input:focus,.k-form textarea:focus{outline:2px solid var(--c-blue);outline-offset:1px;}
.k-f1{top:21.6px;}  .k-f2{top:144.1px;}  .k-f3{top:262.8px;}  .k-f4{top:382.3px;}
.k-send{
  position:absolute;
  left:37px; right:37px; top:599.9px;
  height:55px;
  border:0; border-radius:var(--radius-sm);
  background:var(--c-blue);
  font-family:var(--font-text);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-body);
  color:var(--c-white);               /* Weiss auf Aktionsblau: 4,7:1 */
  cursor:pointer;
  transition:background .2s ease;
}
.k-send:hover{background:var(--c-blue-hover);}
.k-note{
  position:absolute;
  left:37px; right:37px; top:661px;
  text-align:center;
  font-size:var(--fs-xs);
  line-height:20.9px;
  color:var(--c-gray-600);
}
.k-logo{
  position:absolute;
  left:561.5px; top:1645.6px;
  width:359.5px; height:auto;
  z-index:2;
}

/* Formular: Einwilligung, Meldungen, Spamschutz, Erfolg */
.k-hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.k-err{
  position:absolute;left:0;right:0;top:100%;margin-top:4px;
  font-size:var(--fs-xs);line-height:1.25;font-weight:var(--fw-semibold);color:var(--c-danger);
}
.k-form [aria-invalid="true"]{border-color:var(--c-danger);box-shadow:0 0 0 1px var(--c-danger);}
.k-consent{
  position:absolute;left:37px;right:37px;top:522px;
  display:flex;align-items:flex-start;gap:var(--space-1);
}
.k-consent input{
  flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--c-blue);cursor:pointer;
}
.k-consent label{
  flex:1 1 0;min-width:0;
  font-size:var(--fs-xs);line-height:1.35;font-weight:var(--fw-regular);color:var(--c-ink);cursor:pointer;
}
.k-consent .k-err{left:30px;}
.k-status{
  position:absolute;left:37px;right:37px;top:572px;
  font-size:var(--fs-xs);line-height:1.3;font-weight:var(--fw-semibold);color:var(--c-danger);text-align:center;
}
.k-status:empty{display:none;}
.k-status.is-quiet{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* Meldung sichtbar: Formular waechst nach unten, damit nichts ueberlappt (bis 3 Zeilen) */
@media (min-width:1024px){
  .k-form.has-status{height:757.8px;}
  .k-form.has-status .k-send{top:639.9px;}
  .k-form.has-status .k-note{top:701px;}
}
.k-note a{color:var(--c-blue);text-decoration:underline;}
.k-send[aria-busy="true"]{cursor:progress;opacity:.75;}
.k-done{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-5);background:var(--c-white);text-align:center;
}
.k-done[hidden]{display:none;}
.k-done:focus{outline:none;}
.k-done__title{font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:var(--fw-bold);color:var(--c-navy);}
.k-done__text{font-size:var(--fs-body);line-height:var(--lh-text);color:var(--c-ink);max-width:var(--measure);}
.k-done__title::before{
  content:"";display:block;width:56px;height:56px;margin:0 auto var(--space-3);border-radius:50%;
  background:var(--c-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 28px no-repeat;
}
html[dir="rtl"] .k-consent .k-err{left:0;right:30px;}

/* Seitenaufbau: gestaffeltes Einblenden beim Laden (Titel -> Formular -> Felder -> Footer) */
@media (prefers-reduced-motion:no-preference){
  .page-kontakt .k-title{animation:k-title-in 1.1s cubic-bezier(.2,.7,.2,1) .15s backwards;}
  .page-kontakt .k-form{animation:k-card-in .9s cubic-bezier(.2,.7,.2,1) .45s backwards;transform-origin:50% 0;}
  .page-kontakt .k-form .fld,
  .page-kontakt .k-send,
  .page-kontakt .k-note{animation:k-up .7s cubic-bezier(.2,.7,.2,1) backwards;}
  .page-kontakt .k-f1{animation-delay:.75s;}
  .page-kontakt .k-f2{animation-delay:.85s;}
  .page-kontakt .k-f3{animation-delay:.95s;}
  .page-kontakt .k-f4{animation-delay:1.05s;}
  .page-kontakt .k-send{animation-delay:1.2s;}
  .page-kontakt .k-note{animation-delay:1.3s;}
  .page-kontakt .k-consent{animation:k-up .7s cubic-bezier(.2,.7,.2,1) 1.12s backwards;}
  .page-kontakt::after{animation:k-wave-in 1.6s cubic-bezier(.2,.7,.2,1) .5s backwards;}
}
@keyframes k-title-in{from{opacity:0;transform:translateY(46px);clip-path:inset(0 0 100% 0);}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0);}}
@keyframes k-card-in{from{opacity:0;transform:translateY(34px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes k-up{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes k-wave-in{from{opacity:0;transform:translateY(80px);}to{opacity:1;transform:none;}}

/* grosse Footer-Variante (Kontakt / Impressum) */
.site-footer--lg .f-head{font-size:var(--fs-h3);line-height:48.7px;}
.site-footer--lg .f-nav a{font-size:var(--fs-body);line-height:40.4px;}
.site-footer--lg .f-mail{font-size:var(--fs-body);}
.site-footer--lg .f-mail svg{width:31px;height:22px;}
.site-footer--lg .f-company p{font-size:var(--fs-body);line-height:41.9px;}
.site-footer--lg .f-legal a{font-size:var(--fs-h3);line-height:64.6px;}
.site-footer--lg .f-social img{width:43px;}

.k-footer{position:absolute;left:0;top:0;width:100%;height:2033px;z-index:3;pointer-events:none;color:var(--c-white);}
.k-footer > *{pointer-events:auto;}
.k-footer .f-nav{left:145.5px;top:1038.5px;}
.k-footer .f-nav ul{margin-top:4.5px;}
.k-footer .f-contact{left:480px;top:1036.5px;width:480px;}
.k-footer .f-contact .f-mail{margin-top:12px;}
.k-footer .f-contact .f-social{margin-top:12px;padding-right:0;}
.k-footer .f-company{left:1068px;top:1038.5px;}
.k-footer .f-company p{margin-left:0;}
.k-footer .f-legal{margin-top:24px;}

/* ==========================================================================
   SEITE: IMPRESSUM & DATENSCHUTZ
   (Referenz Impressum/Datenschutz_Referenz.png · 1440 x 3586)
   ========================================================================== */
.page-legal{
  position:relative;
  background:var(--c-white);
  overflow:hidden;
  --legal-ink:var(--c-navy);
}
.page-legal .container{padding-bottom:0;}

.lg-head{
  position:relative;
  height:559px;
}
.lg-title{
  position:absolute;
  left:81px; top:137.5px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-display-2);
  line-height:117.2px;
  color:var(--c-ink);
  white-space:nowrap;
}
.lg-mark{
  position:absolute;
  left:1049.9px; top:143.9px;
  width:257.9px; height:auto;
}
.lg-back{
  position:absolute;
  left:79.2px; top:429.9px;
  width:280.3px; height:71.2px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-navy); color:var(--c-white);
  border-radius:var(--radius-lg);
  font-family:var(--font-text);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-body);
  transition:opacity .2s ease;
}
.lg-back:hover{opacity:.85;}

.lg-rule{
  height:2.4px;
  background:var(--c-navy);
  margin:0 83px 0 79px;
  border:0;
}
.lg-sec{position:relative;padding:0 79px;color:var(--c-navy);
  font-family:var(--font-text);}
.lg-sec h2{
  font-family:var(--font-text);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-h3);
  line-height:40.0px;
  color:var(--c-navy);
  padding-top:31.8px;
}
.lg-star{
  position:absolute;
  right:112px; top:30px;
  width:60px; height:60px;
  color:var(--c-navy);
}
.lg-sec p,.lg-sec li{
  font-size:var(--fs-lead);
  line-height:30.4px;
  font-weight:var(--fw-regular);
}
.lg-sec p{margin-top:29.7px;}
.lg-sec p.tight{margin-top:0;}
.lg-sec h3{
  font-weight:var(--fw-bold);
  font-size:var(--fs-lead);
  line-height:30.4px;
  margin-top:29.7px;
}
.lg-sec ul{margin-top:0;padding-left:41px;list-style:disc;}
.lg-sec li{margin-top:0;}
.lg-sec a{text-decoration:underline;}
.lg-sec strong{font-weight:var(--fw-semibold);}
.lg-imprint{padding-bottom:33px;}
.lg-privacy{padding-bottom:115px;}

.legal-footer{
  position:relative;
  color:var(--c-navy);
  height:680px;              /* +125 px: 3D-Formen vollstaendig sichtbar */
}
.legal-footer .f-head{color:var(--c-navy);}
.legal-footer .f-nav a,.legal-footer .f-mail,.legal-footer .f-company p,.legal-footer .f-legal a{color:var(--c-navy);}
.legal-footer .f-nav,.legal-footer .f-contact,.legal-footer .f-company{z-index:2;}
.legal-footer .f-nav{left:102.9px;top:20px;}
.legal-footer .f-nav ul{margin-top:4.5px;}
.legal-footer .f-contact{left:457px;top:21px;width:480px;}
.legal-footer .f-contact .f-head{margin-right:38px;}
.legal-footer .f-contact .f-mail{margin-top:12px;}
.legal-footer .f-contact .f-social{margin-top:10px;padding-right:0;}
.legal-footer .f-social img{width:43px;}
.legal-footer .f-company{left:1027px;top:20px;}
.legal-footer .f-company p{margin-left:20px;}
.legal-footer .f-legal{margin-top:24px;}
.legal-footer .f-mail img{width:31px;height:auto;}
.lg-3d-l{position:absolute;left:calc(-90px - var(--edge));bottom:24px;width:300px;height:auto;pointer-events:none;z-index:0;}
.lg-3d-r{position:absolute;right:calc(-150px - var(--edge));bottom:-30px;width:460px;height:auto;pointer-events:none;z-index:0;}

/* ==========================================================================
   SEITE: SERVICES   (Referenz Services/Services_Referenz.png · 1440 x 5417)
   ========================================================================== */
.page-services{position:relative;background:var(--c-black);overflow:hidden;}

.sv-hero{position:relative;height:913px;overflow:hidden;background:var(--c-navy);}
.sv-hero__video{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1440px;min-width:100%;height:913px;object-fit:cover;
  filter:url(#sv-tint);
}

/* ---------- Uebergang Header-Video -> Seite (Stand 13.10., verstaerkt) ----------
   Das untere Drittel des Videos laeuft in einer weichen S-Kurve in die Farbe der
   folgenden Sektion aus (Services: --sv-seam, Startseite: Weiss). Ein Pixel ragt ueber
   die Kante und deckt die helle Randzeile des Videos ab. Gilt fuer alle Breiten. */
.sv-hero{--sv-seam:var(--c-night);--rgb-seam:var(--rgb-night);background:var(--sv-seam);}
.sv-hero::after,.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  pointer-events:none;
}
.sv-hero::after{
  height:clamp(160px,44%,400px);z-index:2;
  background:linear-gradient(180deg,
    rgb(var(--rgb-seam) / 0.000) 0%,
    rgb(var(--rgb-seam) / 0.028) 10%,
    rgb(var(--rgb-seam) / 0.104) 20%,
    rgb(var(--rgb-seam) / 0.216) 30%,
    rgb(var(--rgb-seam) / 0.352) 40%,
    rgb(var(--rgb-seam) / 0.500) 50%,
    rgb(var(--rgb-seam) / 0.648) 60%,
    rgb(var(--rgb-seam) / 0.784) 70%,
    rgb(var(--rgb-seam) / 0.896) 80%,
    rgb(var(--rgb-seam) / 0.972) 90%,
    var(--sv-seam) 100%);
}
.hero::after{
  height:clamp(120px,38%,320px);z-index:1;   /* ueber dem Video, unter dem Logo */
  background:linear-gradient(180deg,
    rgb(var(--rgb-white) / 0.000) 0%,
    rgb(var(--rgb-white) / 0.028) 10%,
    rgb(var(--rgb-white) / 0.104) 20%,
    rgb(var(--rgb-white) / 0.216) 30%,
    rgb(var(--rgb-white) / 0.352) 40%,
    rgb(var(--rgb-white) / 0.500) 50%,
    rgb(var(--rgb-white) / 0.648) 60%,
    rgb(var(--rgb-white) / 0.784) 70%,
    rgb(var(--rgb-white) / 0.896) 80%,
    rgb(var(--rgb-white) / 0.972) 90%,
    var(--c-white) 100%);
}

/* ---------- Verlaufsband mit Headline + Karten ---------- */
.sv-band{
  position:relative;
  height:1002px;              /* 913 -> 1915 · Referenz 11.10.: schwarz, dann Verlauf nach weiss */
  background:var(--grad-services-band);
}
.sv-band .container{height:1002px;}
.sv-head{
  position:absolute;
  left:193px; top:114.3px;     /* Ink 1044 abs */
  font-family:var(--font-mono);
  font-weight:700;
  font-size:var(--fs-display-1);
  letter-spacing:-.0188em;
  color:var(--c-gray-200);
}
.sv-cards{
  position:absolute;
  left:79px; top:358px;        /* 1271 abs */
  display:flex; gap:74px;
}

/* ---------- Bento-Sektionen (Referenz Services_Referenz_1/_2, Stand 10.10.) ---------- */
.bento{position:relative;}
.bento .container{height:100%;}
.bento__label{
  position:absolute; left:0; top:0;
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:var(--fs-h4);
  line-height:36.7px;
  margin:0;
}
.bento__label .ic{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.bento__label .ic img{width:62%;height:62%;}
.bento__label .ic--dot{background:var(--c-black);}
.bento__label .ic--plain img{width:100%;height:100%;}
.bento__label > span:last-child{position:absolute;width:335px;}

.bento__cta{
  position:absolute;
  width:291px; height:476px;
  border:0; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding-bottom:40px;
  font-family:var(--font-text);
  font-weight:var(--fw-bold); font-size:var(--fs-h3); line-height:1;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.bento__cta .plus{position:absolute;top:28px;right:26px;width:30px;height:30px;}
.bento__cta .arrow{position:absolute;left:30px;bottom:34px;width:61px;height:61px;transition:transform .25s ease;}
.bento__cta:hover .arrow{transform:translateX(4px);}

.bento__grid{
  position:absolute;
  display:grid;
  grid-template-columns:repeat(3,292.5px);
  grid-auto-rows:324px;
  gap:25px 23.5px;
}
.tile{
  position:relative;
  border:0; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding:46px 14px 20px;
  text-align:center;
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:var(--tile-fs,22px);
  line-height:1.2;
  overflow-wrap:normal; word-break:normal; hyphens:manual;  /* nur an Kompositafugen (­) trennen, nie mitten im Wort */
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);}
.tile .plus{position:absolute;top:31px;right:29px;width:29px;height:29px;}
.tile--navy{background:var(--c-navy-deep);color:var(--c-white);}
.tile--white{background:var(--c-white);color:var(--c-black);}
.tile--white .plus,.bento__cta--white .plus{filter:invert(1);}

/* Erklaerungsfenster: ueberdeckt exakt das Kachelraster */
.sv-panel{
  position:absolute;
  width:933px; height:671px;
  border-radius:var(--radius-md);
  padding:28.5px 30px 0 45px;
  font-family:var(--font-text);
  z-index:3;
  cursor:pointer;                  /* erneuter Klick verkleinert das Fenster wieder auf die Kachel */
}
.sv-panel[hidden]{display:none;}
.sv-panel.is-anim{will-change:clip-path;}
.sv-panel--navy{background:var(--c-navy-deep);color:var(--c-white);}
.sv-panel--white{background:var(--c-white);color:var(--c-black);}
.sv-panel__title{font-size:var(--fs-h3);line-height:42.1px;font-weight:var(--fw-bold);margin:0;}
.sv-panel__intro{margin-top:65px;font-weight:var(--fw-semibold);font-size:var(--fs-h4);line-height:28.3px;width:870px;}
.sv-panel__intro p + p{margin-top:29px;}
.sv-panel__list{margin-top:30px;padding-left:58px;list-style:disc;font-size:var(--fs-h4);line-height:28.3px;font-weight:var(--fw-regular);width:860px;}
.sv-panel .btn{position:absolute;right:29px;bottom:34px;}
.bento__grid{transition:opacity .3s ease, visibility 0s linear 0s;}
.bento.has-panel .bento__grid{opacity:0;visibility:hidden;transition:opacity .25s ease .12s, visibility 0s linear .37s;}

.btn--panel-light,.btn--panel-dark{
  width:317px;height:48px;
  font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:var(--fs-small);
  border-radius:var(--radius-sm);border:2px solid transparent;
}
.btn--panel-light{background:var(--c-white);color:var(--c-black);border-color:var(--c-gray-200);}
.btn--panel-dark{background:var(--c-black);color:var(--c-white);border-color:var(--c-black);}
.bento--c .btn--panel-dark{background:var(--c-navy-deep);border-color:var(--c-navy-deep);}

/* Sektion A – weiss */
.bento--a{height:780px;background:var(--c-white);color:var(--c-black);}
.bento--a .bento__label .ic{left:20px;top:109px;width:47px;height:47px;}
.bento--a .bento__label > span:last-child{left:83px;top:95.4px;}
.bento--a .bento__cta{left:79px;top:261px;background:var(--c-navy-deep);color:var(--c-white);}
.bento--a .bento__grid{left:448px;top:65px;}
.bento--a .sv-panel{left:441px;top:66px;}

/* Sektion B – schwarz */
.bento--b{height:797px;background:var(--c-black);color:var(--c-white);}
.bento--b .bento__label .ic{left:26px;top:122px;width:34px;height:34px;}
.bento--b .bento__label > span:last-child{left:85px;top:102.4px;}
.bento--b .bento__cta{left:79px;top:267px;background:var(--c-white);color:var(--c-black);}
.bento--b .bento__grid{left:449px;top:71px;}
.bento--b .sv-panel{left:443px;top:72px;padding-top:31.5px;}
.bento--b .sv-panel__intro{margin-top:74px;}

/* Sektion C – navy */
.bento--c{height:781px;background:var(--c-navy-deep);color:var(--c-white);}
.bento--c .bento__label .ic{left:20px;top:112px;width:46px;height:46px;}
.bento--c .bento__label > span:last-child{left:83px;top:96.4px;}
.bento--c .bento__cta{left:79px;top:245px;background:var(--c-white);color:var(--c-black);}
.bento--c .bento__grid{left:446px;top:49px;}
.bento--c .sv-panel{left:441px;top:50px;padding-top:48.5px;}
.bento--c .sv-panel__intro{margin-top:74px;}
.bento--b .bento__cta .plus,.bento--c .bento__cta .plus,
.bento--b .bento__cta .arrow,.bento--c .bento__cta .arrow{filter:invert(1);}

/* ---------- Footer ---------- */
.sv-footer{
  position:relative;
  height:848px;               /* 4273 -> 5121 */
  background:
    var(--img-footer-dark) calc(50% + 23.5px) -0.9px / 2861.6px 851.3px no-repeat,
    var(--c-black);
  overflow:hidden;
  color:var(--c-white);
}
.sv-footer .container{height:848px;}
.sv-footer .f-nav{left:110px;top:103px;}
.sv-footer .f-nav ul{margin-top:7.2px;}
.sv-footer .f-contact{left:441px;top:105px;width:480px;}
.sv-footer .f-company{left:1042px;top:103px;}
.sv-footer .f-company p{margin-left:18px;}
.sv-footer .f-legal{margin-top:20.8px;}

/* Referenz 11.10.: mehr schwarzer Raum ueber dem Footer-Inhalt (+216 px) */
@media (min-width:1024px){
  .page-services .sv-footer{height:1064px;background-position:calc(50% + 23.5px) 215.1px;}
  .page-services .sv-footer .container{height:1064px;}
  .page-services .sv-footer .f-nav{top:319px;}
  .page-services .sv-footer .f-contact{top:321px;}
  .page-services .sv-footer .f-company{top:319px;}
}

/* Illustrative Figuren: tauchen beim Scrollen von unten auf (gestaffelt) */
.js-reveal .rv-fig{opacity:0;}
.js-reveal .rv-fig.is-in{opacity:1;animation:rv-fig-card 1s cubic-bezier(.2,.7,.2,1) var(--rv-d,0s) backwards;}
.js-reveal .rv-fig .card__media img{transition:none;}
.js-reveal .rv-fig.is-in .card__media img{animation:rv-fig-img 1.15s cubic-bezier(.2,.7,.2,1) calc(var(--rv-d,0s) + .22s) backwards;}
@keyframes rv-fig-card{from{opacity:0;transform:translateY(90px);}to{opacity:1;transform:none;}}
@keyframes rv-fig-img{from{opacity:0;transform:translateY(60px) scale(.94);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .js-reveal .rv-fig{opacity:1;}
  .js-reveal .rv-fig.is-in,.js-reveal .rv-fig.is-in .card__media img{animation:none;}
}

/* ---------- VERSION 3: Farbkonzept Services ----------
   Statt Schwarz / Grau / Weiss der durchgehende Himmel-Verlauf der anderen Seiten:
   Hero (Navy) -> Band hell -> Automatisierung hell -> Baumanagement Mittelblau -> Forschung Nachtblau -> Footer Schwarz.
   Kacheln, Fenster und Buttons behalten ihre Formen; nur Flaechen- und Textfarben wechseln. */
.page-services .sv-band{background:var(--grad-services-band-v3);}
.sv-flow{background:var(--grad-services-flow-v3);}
.sv-flow .bento{background:transparent;}
.sv-flow .bento--a,.sv-flow .bento--b{color:var(--c-navy);}       /* heller Grund: Titel Navy */
.sv-flow .bento--c{color:var(--c-white);}                         /* dunkler Grund: Titel Weiss */
.sv-flow .bento__label .ic--dot,
.sv-flow .bento__label .ic--plain{background:var(--c-navy);}
.sv-flow .bento__label .ic--plain img{width:62%;height:62%;}
.sv-flow .bento--b .bento__cta{background:var(--c-navy-deep);color:var(--c-white);}
.sv-flow .bento--b .bento__cta .plus,.sv-flow .bento--b .bento__cta .arrow{filter:none;}
.sv-flow .tile--white,.sv-flow .sv-panel--white,.sv-flow .bento--c .bento__cta{color:var(--c-navy);}
.sv-flow .tile--white{box-shadow:var(--shadow-1);}
.sv-flow .btn--panel-dark{background:var(--c-navy-deep);border-color:var(--c-navy-deep);}

/* ==========================================================================
   SEITE: KUNDEN & PARTNER
   (Referenz Kunden und Partner/Kunden&Partner_Referenz.png · 4269 x 7700
    -> 1440 x 2597,3 @ Faktor 2,96458)
   ========================================================================== */
.page-kp{
  position:relative;
  background:var(--grad-sky-night);
  overflow:hidden;
  padding-bottom:1220.2px;          /* Footer-Zone: 2597,3 - 1377,1 */
}
.page-kp::after{                    /* Footer-Glas-Welle (transparente PNG) */
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:auto; aspect-ratio:100 / 60.7;   /* randabfallend (Referenz 11.10.: 118 % Breite, unten 35 px angeschnitten) */
  background:var(--img-footer-blue) calc(50% + 14px * var(--wide,1)) 0 / 118% auto no-repeat;
  pointer-events:none;
  z-index:1;
}

/* ---------- Logo-Reihe ---------- */
.kp-row{
  position:relative;
  z-index:2;
  margin-top:201.9px;
  height:306.8px;
  overflow:hidden;
}
.kp-track{
  display:flex;
  gap:13.9px;
  width:max-content;
}
.kp-card{
  flex:0 0 auto;
  width:228.4px;
  height:306.8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgb(var(--rgb-white) / .63);
  border-radius:var(--radius-lg);
  background:var(--grad-glass-card);
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.kp-card--static{cursor:default;}
button.kp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.kp-card img{height:auto;}

/* gemessene Logo-Breiten aus der Referenz */
.lg-br2       {width:172.1px;}
.lg-dfs       {width:215px;}
.lg-numova    {width:128px;}
.lg-greenbuild{width:204.4px;}
.lg-credo     {width:206.1px;}
.lg-c42       {width:192.6px;}
.lg-km        {width:200px;}
.lg-safelexx  {width:207px;}
.lg-novaspray {width:239px;}
.lg-instatiq  {width:236px;}   /* sehr breites Logo: gleiche optische Hoehe wie GreenBuild */
.lg-innok     {width:118px;}   /* hochformatiges Logo (Zeichen + Schrift) */

/* ---------- Info-Fenster ---------- */
.kp-panel{
  position:relative;
  z-index:2;
  margin:119.1px 0 0 35.4px;        /* 627,1 */
  width:1385.5px;
  min-height:750px;
  border-radius:var(--radius-lg);
  background:var(--grad-glass-panel);
  border:1px solid rgb(var(--rgb-white) / .5);
}
.kp-body{display:none;position:relative;min-height:749px;padding:184.7px 0 35px 43.5px;}
.kp-body.is-active{display:block;}

.kp-logo{
  position:absolute;
  left:32px; top:34.6px;
  width:230px; height:93px;
  display:flex; align-items:center; justify-content:flex-start;
}
.kp-logo img{max-height:93px;object-fit:contain;}

.kp-info{
  width:calc(330px + 2 * var(--space-2));
  color:var(--c-white);
  /* dunkles Glasfeld: weisser Text erreicht > 6:1 (vorher 2,0:1 auf Hellblau) */
  background:rgb(var(--rgb-navy) / .55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-2);
  margin:calc(-1 * var(--space-3)) 0 0 calc(-1 * var(--space-2));
}
.kp-info h3{
  padding-left:6.1px;
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:var(--fs-lead);
  line-height:26.0px;
  letter-spacing:-.035em;
  color:var(--c-white);
}
.kp-info p{
  padding-left:6.1px;
  font-weight:var(--fw-semibold);
  font-size:var(--fs-small);
  line-height:25.3px;
  letter-spacing:-.005em;
  color:var(--c-white);
}
.kp-info ul{list-style:none;}
.kp-info li{
  position:relative;
  padding-left:22.6px;
  font-weight:var(--fw-semibold);
  font-size:var(--fs-small);
  line-height:25.3px;
  letter-spacing:-.005em;
  color:var(--c-white);
}
.kp-info li::before{
  content:"";
  position:absolute;
  left:0; top:10px;
  width:7.4px; height:7.4px;
  border-radius:50%;
  background:var(--c-white);
}
.kp-info > * + *{margin-top:38px;}
.kp-info h3 + p{margin-top:38.7px;}
.kp-info p + h3{margin-top:40.6px;}
.kp-info h3 + ul{margin-top:39.3px;}
.kp-info ul + h3{margin-top:40.4px;}
.kp-info h3:last-of-type + ul{margin-top:37.3px;}

.kp-slides{
  position:absolute;
  /* top + bottom + margin:auto: bei Standard-Texthoehe exakt auf 127,1 px (Canva); wird die Infobox
     laenger (z. B. Innok, Instatiq), waechst das Fenster und das Bild bleibt mittig zur Infobox */
  left:383.2px; top:127.1px; bottom:28px; margin:auto 0;
  width:990.5px; height:593.9px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:rgb(var(--rgb-white) / .08);
}
.kp-slides img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s ease;
}
.kp-slides img.is-on{opacity:1;}
.kp-slides--contain img{object-fit:contain;}

/* ---------- Footer-Zone ---------- */
.kp-foot{
  position:absolute;
  left:50%; margin-left:-720px;
  bottom:0;
  width:1440px;
  height:1220.2px;
  z-index:3;
  color:var(--c-white);
  pointer-events:none;
}
.kp-foot > *{pointer-events:auto;}
.kp-foot .f-nav{left:145.5px;top:223.7px;}
.kp-foot .f-nav ul{margin-top:4.5px;}
.kp-foot .f-contact{left:480px;top:221.7px;width:480px;}
.kp-foot .f-contact .f-mail{margin-top:12px;}
.kp-foot .f-contact .f-social{margin-top:12px;padding-right:0;}
.kp-foot .f-company{left:1068px;top:223.7px;}
.kp-foot .f-company p{margin-left:0;}
.kp-foot .f-legal{margin-top:24px;}
.kp-mark{
  position:absolute;
  left:536.4px; top:835.6px;
  width:365.3px; height:auto;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  [data-marquee].is-running{animation:none;}
  .kp-slides img{transition:none;}
}

/* ==========================================================================
   RESPONSIVE – Unterseiten (Kontakt · Impressum · Services · Kunden & Partner)
   1024–1439 px laeuft ueber body{zoom} (siehe oben) im Referenz-Layout.
   ========================================================================== */
@media (max-width:1023.98px){

  /* ---------------- gemeinsame grosse Footer-Variante ---------------- */
  .site-footer--lg{
    position:static;
    height:auto;
    width:100%;
    margin:0;
    padding:72px 0 0;
    display:flex;
    flex-direction:column;
    gap:44px;
  }
  .site-footer--lg .f-nav,
  .site-footer--lg .f-contact,
  .site-footer--lg .f-company{
    position:static;left:auto;top:auto;width:100%;text-align:center;
  }
  .site-footer--lg .f-head{font-size:var(--fs-h3);line-height:1.25;}
  .site-footer--lg .f-nav a,
  .site-footer--lg .f-mail,
  .site-footer--lg .f-company p{font-size:var(--fs-xs);line-height:32px;}
  .site-footer--lg .f-legal a{font-size:var(--fs-h3);line-height:1.5;}
  .site-footer--lg .f-social{justify-content:center;padding-right:0;}

  /* ============================ KONTAKT ============================ */
  .page-kontakt{min-height:0;padding:72px 0 0;}
  .page-kontakt .container{height:auto;padding-bottom:0;}
  .page-kontakt::after{height:46vw;aspect-ratio:auto;background-size:200% auto;background-position:center bottom;}

  .k-title{
    position:static;width:100%;margin-top:56px;
    font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.02em;
  }
  .k-form{
    position:static;width:100%;max-width:600px;height:auto;
    margin:40px 0 0;padding:30px 26px 34px;border-radius:var(--radius-sm);
  }
  .k-form .fld{position:static;left:auto;right:auto;top:auto;}
  .k-form .fld + .fld{margin-top:22px;}
  .k-send{position:static;left:auto;right:auto;top:auto;width:100%;margin-top:28px;}
  .k-note{position:static;left:auto;right:auto;top:auto;margin-top:16px;}
  .k-err{position:static;margin-top:6px;}
  .k-consent{position:static;margin-top:24px;flex-wrap:wrap;}
  .k-consent .k-err{flex-basis:100%;padding-left:30px;}
  .k-status{position:static;margin-top:16px;}
  .k-logo{
    position:absolute;left:50%;top:auto;bottom:14vw;
    transform:translateX(-50%);
    width:min(46%,220px);margin:0;z-index:2;
  }
  .k-footer{
    position:relative;z-index:2;left:auto;top:auto;height:auto;width:100%;
    padding:64px 0 68vw;
    display:flex;flex-direction:column;gap:44px;
  }

  /* =========================== IMPRESSUM =========================== */
  .page-legal .container{padding:0 40px;}
  .lg-head{height:auto;padding:110px 0 0;}
  .lg-title{position:static;font-size:var(--fs-display-2);line-height:1.04;}
  .lg-mark{position:static;width:min(46%,258px);margin-top:34px;}
  .lg-back{position:static;margin:34px 0 46px;width:min(100%,280.3px);height:62px;}
  .lg-rule{margin:0;}
  .lg-sec{padding:0;}
  .lg-sec h2{font-size:var(--fs-h3);line-height:1.15;padding-top:28px;}
  .lg-sec p,.lg-sec li{font-size:var(--fs-lead);line-height:1.45;}
  .lg-star{right:0;top:26px;width:42px;height:42px;}
  .lg-privacy{padding-bottom:60px;}
  .legal-footer{height:auto;padding:72px 0 210px;}
  .lg-3d-l{left:-40px;bottom:16px;width:170px;}
  .lg-3d-r{right:-60px;bottom:0;width:230px;}
  .lg-sec a[href^="mailto:"]{overflow-wrap:anywhere;}   /* lange E-Mail-Adresse bricht statt ueber den Rand zu laufen */

  /* ============================ SERVICES =========================== */

  .sv-hero{height:auto;padding-top:72px;}
  .sv-hero__video{position:relative;left:0;transform:none;width:100%;min-width:0;height:auto;aspect-ratio:960/610;}

  .sv-band{height:auto;padding:56px 0 72px;}
  .sv-band .container{height:auto;}
  .sv-head{position:static;text-align:center;}
  .sv-cards{position:static;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:44px;}
  .sv-cards .card{width:min(379px,100%);height:auto;}

  .bento{height:auto!important;padding:56px 0 64px;}
  .bento .container{height:auto;}
  .bento__label{position:static;align-items:center;margin-bottom:34px;}
  .bento__label span{font-size:var(--fs-h4);line-height:1.15;max-width:none;}
  .bento__cta{
    position:static;width:100%;max-width:520px;height:220px;
    margin:0 0 28px;padding:0 24px 40px;
    font-size:var(--fs-h3);line-height:1.1;
  }
  .bento__grid{
    position:static;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    grid-auto-rows:minmax(200px,auto);
    gap:20px;
  }
  .tile{font-size:var(--fs-h3);line-height:1.05;padding:44px 22px 18px;overflow-wrap:normal;}

  .sv-footer{height:auto;padding:0 0 70vw;background-size:230% auto;background-position:center bottom;}
  .sv-footer .container{height:auto;display:flex;flex-direction:column;gap:44px;padding-top:64px;}
  .sv-footer .f-nav,.sv-footer .f-contact,.sv-footer .f-company{
    position:static;left:auto;top:auto;width:100%;text-align:center;}
  .sv-footer .f-company p{margin-left:0;}

  /* ======================= KUNDEN & PARTNER ======================== */
  .page-kp{padding:72px 0 0;}
  .page-kp::after{height:46vw;aspect-ratio:auto;background-size:200% auto;background-position:center bottom;}
  .page-kp .container{padding:0 40px;}

  .kp-row{margin:48px -40px 0;height:250px;}
  .kp-card{width:190px;height:250px;border-radius:var(--radius-lg);}
  .kp-card img{max-width:76%;height:auto;}
  .lg-br2,.lg-dfs,.lg-numova,.lg-greenbuild,.lg-credo,
  .lg-c42,.lg-km,.lg-safelexx,.lg-novaspray,.lg-instatiq,.lg-innok{width:auto;max-width:76%;}
  .lg-br2,.lg-numova,.lg-km,.lg-innok{max-width:52%;}

  .kp-panel{
    width:100%;margin:48px 0 0;
    border-radius:var(--radius-lg);min-height:0;
  }
  .kp-body{min-height:0;padding:28px 24px 34px;}
  .kp-logo{position:static;width:auto;height:auto;margin-bottom:26px;}
  .kp-logo img{max-height:70px;max-width:60%;}
  .kp-info{width:auto;margin:0;}
  .kp-info h3{font-size:var(--fs-lead);line-height:1.15;padding-left:0;}
  .kp-info p{padding-left:0;font-size:var(--fs-small);line-height:1.45;}
  .kp-info li{font-size:var(--fs-small);line-height:1.45;padding-left:20px;}
  .kp-info li::before{top:.55em;}
  .kp-info > * + *{margin-top:24px;}
  .kp-info h3 + p,.kp-info p + h3,.kp-info h3 + ul,
  .kp-info ul + h3,.kp-info h3:last-of-type + ul{margin-top:24px;}
  .kp-info li + li{margin-top:8px;}
  .kp-slides{
    position:relative;left:auto;top:auto;bottom:auto;width:100%;height:auto;
    aspect-ratio:990.5/593.9;margin-top:30px;border-radius:var(--radius-lg);
  }

  .kp-foot{
    position:relative;z-index:2;left:auto;right:auto;bottom:auto;
    width:100%;height:auto;margin:0;
    padding:72px 0 68vw;
    display:flex;flex-direction:column;gap:44px;
  }
  .kp-mark{
    position:absolute;left:50%;top:auto;bottom:14vw;
    transform:translateX(-50%);
    width:min(46%,220px);margin:0;
  }
}

@media (max-width:640px){
  .page-kp .container,.page-kontakt .container,.page-legal .container{padding:0 20px;}
  .site-footer--lg .f-mail,.sv-footer .f-mail{font-size:var(--fs-xs);gap:7px;}
  .site-footer--lg .f-mail svg,.sv-footer .f-mail svg{width:24px;height:17px;}
  .kp-row{margin:36px -20px 0;height:200px;}
  .kp-card{width:150px;height:200px;border-radius:var(--radius-md);}
  .kp-body{padding:22px 18px 28px;}
  .kp-slides{border-radius:var(--radius-md);}
  .bento__grid{grid-template-columns:1fr;}
  .bento__cta{height:180px;}
  .lg-3d-l{left:-30px;width:130px;}
  .lg-3d-r{right:-50px;bottom:0;width:190px;}
}

/* ==========================================================================
   SEITE: ÜBER AMARA   (Referenz Über Amara/Über Amara_Referenz.png · 1440 x 5111)
   ========================================================================== */
.page-ueber{position:relative;background:var(--c-white);overflow:hidden;--ua-ink:var(--c-ink);--ua-navy:var(--c-navy);}
.ua{height:5399px;}   /* +179 px: 3D-Formen im Footer vollstaendig sichtbar; +109 px: Luft um die Werte-Liste */
.ua > *{position:absolute;margin:0;}

.ua-h1{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-display-2);
  line-height:113.0px;
  letter-spacing:0;
  color:var(--c-ink);
  white-space:nowrap;
}
.ua-h2{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-h2);
  line-height:64.9px;
  color:var(--c-ink);
  white-space:nowrap;
}
.ua-p{
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:var(--fs-lead);
  line-height:33.8px;
  color:var(--c-ink);
}

/* Hero */
.ua-hero__title{left:46px;top:201.5px;}
.ua-hero__text{left:47px;top:688px;width:700px;white-space:nowrap;}
.ua-hero__photo{left:803px;top:151px;width:591px;height:741px;object-fit:cover;object-position:64% 70%;}
.ua-rule{left:66px;top:955px;width:1324px;height:0;border:0;border-top:2px solid var(--c-navy);}

/* Warum */
.ua-robot{left:-128px;top:1028px;width:996px;height:auto;z-index:1;}
.ua-why__title{right:48px;top:1008px;text-align:right;}
.ua-why__text{left:805px;top:1380px;width:600px;white-space:nowrap;}
.ua-why__text p + p{margin-top:40.2px;}

/* Drei Disziplinen */
.ua-three__title{left:46px;top:1747px;z-index:2;}
.ua-three__text{left:47px;top:2148px;width:640px;white-space:nowrap;}

/* Venn */
.ua-venn{left:820px;top:1958px;width:590px;height:452px;font-family:var(--font-text);color:var(--c-ink);}
.ua-venn__c{position:absolute;width:326px;height:326px;border-radius:50%;mix-blend-mode:multiply;}
.ua-venn__c--rob {left:21px; top:2px;  background:var(--c-navy-100);border:1.5px solid var(--c-navy);}
.ua-venn__c--proz{left:260px;top:2px;  background:var(--c-sky-100);border:1.5px solid var(--c-blue-soft);}
.ua-venn__c--fo  {left:139px;top:125px;background:var(--c-gray-200);border:1.5px solid var(--c-gray-500);}
.ua-venn__t{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;}
.ua-venn__t b{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:39.5px;}
.ua-venn__t i{font-style:normal;font-weight:var(--fw-regular);font-size:var(--fs-lead);line-height:25.2px;margin-top:14px;}
.ua-venn__t--rob {left:67px; top:89px; width:140px;}
.ua-venn__t--proz{left:376px;top:89px; width:160px;}
.ua-venn__t--fo  {left:222px;top:330px;width:160px;}
.ua-venn__amara{position:absolute;left:250px;top:205px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:39.5px;}
.ua-venn__dot{position:absolute;left:293px;top:185px;width:14px;height:14px;border-radius:50%;background:var(--c-navy);}

/* Balken */
.ua-bars{left:91px;top:2465px;width:1258px;}
.ua-bar{
  display:flex;align-items:center;
  min-height:106px;margin:0 0 18.8px;
  padding:16px 0 16px 53px;white-space:nowrap;
  background:var(--c-navy);color:var(--c-white);
  font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:var(--fs-lead);line-height:35.1px;
}

/* Werte */
/* Werte-Liste mittig zwischen den drei Balken und dem Zitat: je 96 px (--space-7) Abstand (Stand 01.11.) */
.ua-values{left:91px;top:2917px;width:750px;list-style:none;padding:0;}
.ua-values li{height:185px;border-bottom:2px solid var(--c-navy);padding:28px 0 0 25px;}
.ua-values h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:38.8px;color:var(--c-navy);margin:0;}
.ua-values p{white-space:nowrap;font-family:var(--font-text);font-weight:var(--fw-regular);font-size:var(--fs-lead);line-height:29.7px;color:var(--c-navy);margin-top:30px;}

.ua-stand__title{right:48px;top:2954px;text-align:right;}
.ua-h1 .ls-a{letter-spacing:-.03em;margin-right:.03em;}
.ua-h1 .ls-b{letter-spacing:.031em;margin-right:-.031em;}
.ua-h1 .ls-c{letter-spacing:.057em;margin-right:-.057em;}
.ua-touch{
  left:1018px;top:3462px;width:312px;height:366px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-navy);color:var(--c-white);border-radius:var(--radius-md);
  font-family:var(--font-text);font-weight:var(--fw-bold);font-size:var(--fs-h4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ua-touch:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);}
/* Text + Pfeil als ein Block exakt mittig (horizontal und vertikal), auch bei Zeilenumbruch */
.ua-touch{padding:0 28px;text-align:center;}
.ua-touch__in{display:block;width:100%;text-align:center;line-height:1.18;}
.ua-touch__arrow{display:inline;}
html[dir="rtl"] .ua-touch__arrow{display:inline-block;transform:scaleX(-1);}

/* Zitat */
.ua-quote{left:79px;top:3938px;width:1258px;height:602px;background:var(--c-navy);}
.ua{isolation:isolate;}
.ua-quote__frame{position:absolute;left:24px;top:33px;width:1258px;height:601px;border:1.5px solid var(--c-gray-500);z-index:-1;}
.ua-quote__mark{position:absolute;left:59px;top:60px;width:88px;height:46px;color:var(--c-white);}
.ua-quote blockquote{position:absolute;left:109px;top:147px;margin:0;color:var(--c-white);}

/* Footer */
.ua-footer{left:0;top:4599px;width:1440px;height:800px;color:var(--c-navy);}
.ua-footer .f-head{color:var(--c-navy);}
.ua-footer .f-nav a,.ua-footer .f-mail,.ua-footer .f-company p,.ua-footer .f-legal a{color:var(--c-navy);}
.ua-footer .f-nav,.ua-footer .f-contact,.ua-footer .f-company{z-index:2;}
.ua-footer .f-nav{left:77px;top:32px;}
.ua-footer .f-nav ul{margin-top:4.5px;}
.ua-footer .f-contact{left:413px;top:33px;width:480px;}
.ua-footer .f-contact .f-mail{margin-top:12px;}
.ua-footer .f-contact .f-social{margin-top:10px;padding-right:0;}
.ua-footer .f-company{left:1001px;top:32px;}
.ua-footer .f-company p{margin-left:20px;}
.ua-footer .f-legal{margin-top:24px;}
.ua-footer__logo{width:337px;height:auto;margin:68px auto 0;display:block;}
.ua-blob{position:absolute;height:auto;pointer-events:none;z-index:0;}
/* Formen: unten ganz sichtbar; seitlich laufen sie nur ueber den echten Fensterrand hinaus
   (--edge = Abstand Inhaltsbereich -> Fensterrand auf breiten Bildschirmen, sonst 0) */
.ua-blob--l{left:calc(-80px - var(--edge));top:330px;width:280px;}
.ua-blob--m{left:438.8px;top:420px;width:322.3px;transform:rotate(90deg);}
.ua-blob--r{left:calc(1010px + var(--edge));top:220px;width:640px;}

/* ---------- Scroll-Einblendungen ---------- */
.js-reveal .rv-up{opacity:0;transform:translateY(70px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
.js-reveal .rv-left{opacity:0;transform:translateX(-140px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.js-reveal .rv-up.is-in,.js-reveal .rv-left.is-in{opacity:1;transform:none;}
.js-reveal .ua-venn__c{transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease;opacity:0;}
.js-reveal .ua-venn__c--rob {transform:translate(-220px,-120px);}
.js-reveal .ua-venn__c--proz{transform:translate(220px,-120px);}
.js-reveal .ua-venn__c--fo  {transform:translate(0,220px);}
.js-reveal .ua-venn.is-in .ua-venn__c{transform:none;opacity:1;}
.js-reveal .ua-venn__t,.js-reveal .ua-venn__amara,.js-reveal .ua-venn__dot{opacity:0;transition:opacity .6s ease .9s;}
.js-reveal .ua-venn.is-in .ua-venn__t,.js-reveal .ua-venn.is-in .ua-venn__amara,.js-reveal .ua-venn.is-in .ua-venn__dot{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .js-reveal .rv-up,.js-reveal .rv-left,.js-reveal .ua-venn__c,.js-reveal .ua-venn__t,
  .js-reveal .ua-venn__amara,.js-reveal .ua-venn__dot{opacity:1;transform:none;transition:none;}
}

/* ==========================================================================
   SEITE: ERFAHRUNGEN & KOMPETENZEN
   (Referenz Erfahrungen und Kompetenzen/Erfahrungen_Referenz.png · 1440 x 9243)
   ========================================================================== */
.page-xp{
  position:relative;
  overflow:hidden;
  background:var(--grad-xp-page);
}
.xp{height:8431px;}
.xp-card{
  position:absolute;left:95px;top:145px;width:1249px;height:8286px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--grad-xp-card);
}
.xp-paths{position:absolute;left:0;top:0;width:1440px;height:9243px;pointer-events:none;overflow:visible;}
.xp-path{fill:none;stroke-width:9;stroke-dasharray:29 13;}
.xp-path--navy{stroke:var(--c-navy);}
.xp-path--white{stroke:var(--c-white);}
.xp-path--blue{stroke:var(--c-blue);}
.xp-path--silver{stroke:var(--c-silver);}

/* Grosse Bereichs-Kreise */
.xp-hub{position:absolute;left:0;top:0;width:0;height:0;margin:0;}
.xp-hub__disc{position:absolute;border-radius:50%;overflow:hidden;}
.xp-hub__img{position:absolute;height:auto;max-width:none;pointer-events:none;z-index:1;}
.xp-hub__title{z-index:2;}
.xp-hub__title{
  position:absolute;margin:0;white-space:nowrap;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  color:var(--c-navy);text-align:center;
  /* Navy auf hellem Glasfeld (ersetzt Orange) */
  background:rgb(var(--rgb-white) / .86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:0 var(--space-4) var(--space-1);border-radius:var(--radius-lg);
}
.xp-hub--rob .xp-hub__disc{left:380px;top:191px;width:680px;height:680px;background:var(--c-navy);}
.xp-hub--rob .xp-hub__img{left:256px;top:92px;width:928px;}
.xp-hub__title{transform:translateX(-50%);}   /* auf den Kreismittelpunkt zentriert */
.xp-hub--rob .xp-hub__title{left:720px;top:446px;font-size:var(--fs-display-1);line-height:161.5px;}
.xp-hub--bau .xp-hub__disc{left:480px;top:3228px;width:666px;height:666px;border:8px solid var(--c-white);}
.xp-hub--bau .xp-hub__disc img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.xp-hub--bau .xp-hub__title{left:813px;top:3368px;font-size:var(--fs-display-1);line-height:171.2px;}
.xp-hub--fo .xp-hub__disc{left:554px;top:5397px;width:680px;height:680px;background:var(--c-silver);}
.xp-hub--fo .xp-hub__img{left:448px;top:5352px;width:920px;}
.xp-hub--fo .xp-hub__title{left:894px;top:5628px;font-size:var(--fs-display-1);line-height:164.7px;}

/* Erfahrungs-Knoten */
.xp-node{position:absolute;left:var(--cx);top:var(--cy);width:0;height:0;z-index:2;}
.xp-node__btn{
  position:absolute;left:-120px;top:-120px;width:240px;height:240px;
  padding:0;border-radius:50%;cursor:pointer;
  border:8px solid var(--xp-ring,var(--c-navy));background:var(--c-white);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.xp-node__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.xp-node__btn:hover{transform:scale(1.04);box-shadow:var(--shadow-2);}
.xp-node__label{
  position:relative;z-index:1;
  padding:2px 10px 6px;border-radius:var(--radius-sm);
  background:rgb(var(--rgb-white) / .9);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h4);line-height:34.8px;
  color:var(--c-navy);text-align:center;white-space:nowrap;
  backdrop-filter:blur(1.5px);
}
.xp-node--rob{--xp-ring:var(--c-navy);--xp-dot:var(--c-navy);--xp-dot-ink:var(--c-white);}
.xp-node--bau{--xp-ring:var(--c-white);--xp-dot:var(--c-white);--xp-dot-ink:var(--c-navy);}
.xp-node--fo {--xp-ring:var(--c-silver);--xp-dot:var(--c-silver);--xp-dot-ink:var(--c-navy);}   /* Forschung: Silber */

/* Schluesselwort-Kreise */
.xp-dots{list-style:none;margin:0;padding:0;}
.xp-dot{
  --d:var(--open-d,122px);
  position:absolute;
  left:calc(var(--ox,var(--dx)) - var(--d) / 2);top:calc(var(--oy,var(--dy)) - var(--d) / 2);
  width:var(--d);height:var(--d);border-radius:50%;
  background:var(--xp-dot);color:var(--xp-dot-ink);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:var(--fs-xs);line-height:1.2;
  /* standardmaessig ausgeblendet – erscheint erst nach Klick auf die Kategorie */
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(calc(-1 * var(--ox,var(--dx))), calc(-1 * var(--oy,var(--dy)))) scale(.15);
  /* Schliessen = gespiegeltes Oeffnen: nacheinander in umgekehrter Reihenfolge zurueckgleiten,
     erst kurz vor dem Ziel ausblenden (Stand 28.10.) */
  --xp-cd:calc((4 - var(--i,0)) * 70ms);
  transition:transform .6s cubic-bezier(.55,0,.75,.3) var(--xp-cd),
             opacity .35s ease-in calc(var(--xp-cd) + .25s),
             box-shadow .3s ease var(--xp-cd),
             visibility 0s linear calc(var(--xp-cd) + .6s);
}
.xp-dot span{opacity:0;transition:opacity .3s ease var(--xp-cd);padding:0 4px;overflow-wrap:normal;word-break:keep-all;hyphens:manual;}
.xp-node.is-open{z-index:5;}
.xp-node.is-open .xp-dot{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  box-shadow:var(--shadow-2);
  transition:transform .6s cubic-bezier(.2,.9,.25,1.15) calc(var(--i,0) * 70ms), opacity .3s ease calc(var(--i,0) * 70ms), visibility 0s;
}
.xp-node.is-open .xp-dot span{opacity:1;transition-delay:calc(.3s + var(--i,0) * 70ms);}

.xp-touch{
  position:absolute;left:99px;top:7712px;width:680px;height:680px;border-radius:50%;
  background:var(--c-navy-deep);color:var(--c-white);z-index:2;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-display-1);line-height:171.2px;letter-spacing:-.025em;padding-top:0;padding-bottom:28px;
  transition:transform .3s ease;
}
.xp-touch:hover{transform:scale(1.02);}
.xp-footer{z-index:3;margin-top:0;height:812px;}
.xp-footer .container{height:812px;}

/* ==========================================================================
   SPRACHUMSCHALTUNG  (DE / EN / AR)
   ========================================================================== */

/* Ueberschriften zentriert, damit sie in jeder Sprache mittig sitzen */
.s-solutions__head,.sv-head{left:0;right:0;text-align:center;}

/* laengere deutsche Formulierungen */
.xp-touch{font-size:var(--fs-h1);line-height:102.9px;}
:lang(en) .xp-touch{font-size:var(--fs-display-1);line-height:171.2px;}
:lang(ar) .xp-touch{font-size:var(--fs-h1);line-height:113.8px;}

/* Arabisch: Schrift mit arabischen Glyphen, Lesrichtung rechts-nach-links */
html[lang="ar"] body,
html[lang="ar"] body *:not(svg):not(path):not(circle){
  font-family:var(--font-arabic) !important;
  letter-spacing:0 !important;
}
html[lang="ar"] .xp-node__label{transform:none;}
html[lang="ar"] .ua-p,html[lang="ar"] .kp-info p,html[lang="ar"] .kp-info li,html[lang="ar"] .sv-panel__list{line-height:1.6;}
html[lang="ar"] .card__title{font-size:var(--fs-h4);line-height:38px;}

:lang(de) .lg-title{font-size:var(--fs-display-2);line-height:118.0px;}
/* laengere englische / arabische Zeilen */
:lang(en) .ua-hero__title{font-size:var(--fs-h1);line-height:96.0px;}
:lang(en) .ua-stand__title{font-size:var(--fs-h1);line-height:102.3px;}
:lang(en) .ua-bar,:lang(ar) .ua-bar{white-space:normal;}
:lang(en) .ua-values p,:lang(ar) .ua-values p{white-space:normal;max-width:720px;}
/* RTL: Layout-Container bleiben im Canva-Raster, nur der Text laeuft rechts-nach-links */
html[dir="rtl"] .kp-body{direction:ltr;}
html[dir="rtl"] .kp-info{direction:rtl;}
html[dir="rtl"] .kp-info li{padding-left:0;padding-right:22.6px;}
html[dir="rtl"] .kp-info li::before{left:auto;right:0;}
html[dir="rtl"] .kp-info h3,html[dir="rtl"] .kp-info p{padding-left:0;padding-right:6.1px;}
html[dir="rtl"] .lg-star{right:auto;left:112px;}
html[dir="rtl"] .k-title{width:600px;line-height:1.22;}
html[dir="rtl"] .sv-panel__list{padding-left:0;padding-right:58px;}
html[dir="rtl"] .sv-panel .btn{right:auto;left:29px;}

/* ==========================================================================
   RESPONSIVE – neue/umgebaute Seiten (Stand 10.10.)
   ========================================================================== */
@media (max-width:1023.98px){

  /* Homepage: Reihenfolge Solutions -> Tradition -> Technologie */
  .s-solutions{height:auto;padding:110px 0 64px;}
  .s-solutions__head{position:static;font-size:var(--fs-display-1);}
  .s-cards{position:static;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:40px;}
  .s-intro{padding:64px 0 40px;}
  .s-intro__title{position:static;font-size:var(--fs-h3);line-height:1.22;}
  .s-intro__title span{width:auto;display:block;}
  .s-intro__plan{position:static;width:min(82%,520px);margin:28px auto 0;}
  .s-intro__arm-wrap{position:relative;left:auto;top:auto;width:min(60%,360px);height:auto;aspect-ratio:612/1106;margin:24px auto 0;}
  .s-intro__arm{width:100%;height:100%;}
  .s-tech__robot{position:static;width:min(80%,520px);margin:0 auto 20px;}
  .card__media--robot img{position:absolute;left:4%;top:3%;width:92%;}

  /* Services */
  .bento__label{position:relative;display:flex;align-items:center;gap:14px;font-size:var(--fs-h4);line-height:1.15;margin-bottom:28px;}
  .bento__label .ic{position:static;flex:0 0 auto;}
  .bento__label > span:last-child{position:static;width:auto;}
  .bento__cta{position:relative;left:auto;top:auto;width:100%;max-width:none;height:120px;margin:0 0 20px;padding:0 24px;justify-content:center;}
  .bento .bento__cta{left:auto;top:auto;}   /* Desktop-Offsets der Sektionen nicht relativ verschieben */
  .bento__cta .arrow{left:auto;right:24px;bottom:auto;top:50%;transform:translateY(-50%);width:46px;height:46px;}
  .bento__cta .plus{display:none;}
  .bento__grid{position:static;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:minmax(170px,auto);}
  .tile{font-size:var(--fs-body);padding:46px 16px 20px;}
  .sv-panel{position:static;width:100%;height:auto;margin-top:0;padding:28px 22px 90px;}
  .bento--a .sv-panel,.bento--b .sv-panel,.bento--c .sv-panel{left:auto;top:auto;padding-top:28px;}
  .sv-panel__title{font-size:var(--fs-h4);line-height:1.2;}
  .sv-panel__intro,.bento--b .sv-panel__intro,.bento--c .sv-panel__intro{width:auto;margin-top:22px;font-size:var(--fs-body);line-height:1.35;}
  .sv-panel__list{width:auto;font-size:var(--fs-body);line-height:1.4;padding-left:26px;}
  .sv-panel .btn{right:22px;bottom:22px;width:auto;padding:0 22px;}
  .bento.has-panel .bento__grid{display:none;}

  /* Ueber Amara */
  .ua{height:auto;padding-top:110px;padding-bottom:0;display:flex;flex-direction:column;gap:30px;}
  .ua > *{position:static !important;width:auto !important;height:auto;transform:none;}
  .ua-h1{font-size:var(--fs-h1);line-height:1.02;white-space:normal;}
  .ua-h2{font-size:var(--fs-h2);line-height:1.04;white-space:normal;}
  .ua-p{font-size:var(--fs-lead);line-height:1.45;white-space:normal !important;}
  .ua .lb{display:none;}
  .ua-why__title,.ua-stand__title{text-align:left;}
  .ua-hero__photo{width:100% !important;max-width:560px;aspect-ratio:591/741;}
  .ua-robot{width:min(100%,620px) !important;align-self:center;}
  .ua-venn{position:relative !important;top:auto;left:auto;width:590px !important;height:452px;max-width:100%;align-self:center;transform-origin:top center;}
  .ua-bar{white-space:normal;min-height:0;padding:18px 20px;font-size:var(--fs-body);line-height:1.35;}
  .ua-values li{height:auto;padding:20px 0 22px 4px;}
  .ua-values h3{font-size:var(--fs-h4);}
  .ua-values p{white-space:normal;font-size:var(--fs-body);margin-top:10px;}
  .ua-touch{width:100% !important;height:140px;font-size:var(--fs-lead);}
  .ua-quote{padding:46px 26px 40px;}
  .ua-quote__frame{display:none;}
  .ua-quote__mark{position:static;width:58px;height:30px;display:block;margin-bottom:18px;}
  .ua-quote blockquote{position:static;}
  .ua-quote blockquote br{display:none;}
  .ua-footer{position:relative !important;top:auto;left:auto;padding:56px 0 260px;display:flex;flex-direction:column;gap:40px;}
  .ua-footer .f-nav,.ua-footer .f-contact,.ua-footer .f-company{position:static;text-align:center;width:100%;}
  .ua-footer__logo{margin-top:30px;}
  .ua-blob--l{left:-40px;top:auto;bottom:24px;width:170px;}
  .ua-blob--m{left:50%;top:auto;bottom:16px;width:190px;margin-left:-95px;}
  .ua-blob--r{left:auto;right:-70px;top:auto;bottom:0;width:260px;}

  /* Erfahrungen: Kurve wird zur Liste, Knoten mittig */
  .xp{height:auto;padding:110px 0 70px;display:flex;flex-direction:column;align-items:center;gap:30px;}
  .xp-card,.xp-paths{display:none;}
  .xp-hub,.xp-node,.xp-touch{position:relative;left:auto;top:auto;}
  .xp-hub{width:min(92vw,560px);height:min(92vw,560px);margin:40px 0 10px;}
  .xp-hub__disc{left:0 !important;top:0 !important;width:100% !important;height:100% !important;}
  .xp-hub__img{left:-18% !important;top:-14% !important;width:136% !important;}
  .xp-hub--fo .xp-hub__img{left:-12% !important;top:-6% !important;width:124% !important;}
  .xp-hub__title{left:50% !important;top:50% !important;width:auto !important;transform:translate(-50%,-50%) !important;font-size:var(--fs-display-2) !important;line-height:1.08 !important;}
  .xp-node{width:min(92vw,620px);height:auto;display:flex;flex-direction:column;align-items:center;gap:16px;}
  .xp-node__btn{position:relative;left:auto;top:auto;width:200px;height:200px;}
  .xp-node__label{font-size:var(--fs-body);line-height:28px;}
  .xp-dots{order:2;display:none;flex-wrap:wrap;justify-content:center;gap:10px;}
  .xp-node.is-open .xp-dots{display:flex;}
  .xp-dot{position:relative;left:auto !important;top:auto !important;transform:none;}
  .xp-node.is-open .xp-dot{transform:none;animation:xp-pop .45s cubic-bezier(.2,.9,.25,1.15) calc(var(--i,0) * 60ms) backwards;}
  @keyframes xp-pop{from{opacity:0;transform:scale(.3);}}
  .xp-touch{width:min(80vw,420px);height:min(80vw,420px);font-size:var(--fs-h2) !important;line-height:1.1 !important;}
  .xp-footer{height:auto;}
}
@media (max-width:640px){
  .ua-venn{position:relative !important;top:auto;width:590px !important;min-width:590px;flex:0 0 auto;left:50%;margin-left:-295px;align-self:flex-start;transform:scale(.56) !important;transform-origin:50% 0;margin-bottom:-199px;}
  .xp-dot{font-size:var(--fs-xs);}
  .tile{min-height:150px;}
  .bento__grid{grid-template-columns:1fr 1fr;}
}

/* Breite Bildschirme (> 1440 px): Logo-Laufbaender laufen randabfallend ueber die ganze Fensterbreite */
@media (min-width:1440px){
  .marquee{left:calc(720px - 50vw);width:100vw;}
  .marquee__track{--mq-start:calc(50vw - 720px - 275px - var(--mq-dist,0px));}   /* eine Reihe vorgeschoben -> links nie leer */
  .kp-row{margin-left:calc(720px - 50vw);margin-right:calc(720px - 50vw);}
  .kp-track{--mq-start:calc(50vw - 720px - var(--mq-dist,0px));}
}

/* Breite Bildschirme (> 1440 px): Footer-Zone waechst mit der randabfallenden Welle proportional mit (--wide = Breite / 1440) */
@media (min-width:1024px){
  .page-kontakt{min-height:calc(1033px + 1000px * var(--wide,1));}
  .page-kontakt .container{height:calc(1033px + 1000px * var(--wide,1));}
  .k-footer{top:auto;bottom:0;left:50%;margin-left:-720px;width:1440px;height:1000px;zoom:var(--wide,1);}
  .k-footer .f-nav{top:5.5px;}
  .k-footer .f-contact{top:3.5px;}
  .k-footer .f-company{top:5.5px;}
  .page-kp{padding-bottom:calc(1220.2px * var(--wide,1));}
  .kp-foot{zoom:var(--wide,1);}
}

/* Barrierefreiheit: Tippflaechen mindestens 44 px auf Touch-Geraeten */
@media (max-width:1023.98px){
  .f-nav a,.f-legal a{min-height:44px;display:flex;align-items:center;justify-content:center;}
  .f-mail{min-height:44px;}
  .f-social a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;}
  .lang__menu button{min-height:44px;}
}

/* Cerntech / 404: einspaltige Darstellung fuer Tablet und Handy */
@media (max-width:1023.98px){
  .cern{height:auto;min-height:100svh;padding:110px 0 70px;display:flex;align-items:center;}
  .cern .container{height:auto;}
  .cern__mark,.cern__kicker,.cern__title,.cern__cta{position:static;width:100%;padding-left:0;text-align:center;}
  .cern__mark{width:140px;margin:0 auto 34px;}
  .cern__kicker{font-size:var(--fs-lead);line-height:1.3;}
  .cern__title{font-size:var(--fs-display-2);line-height:1.05;margin-top:26px;}
  .cern__cta{margin:34px auto 0;display:flex;justify-content:center;}
}

/* Grosse Ueberschriften duerfen am Handy umbrechen statt ueber den Rand zu laufen */
@media (max-width:1023.98px){
  .display-head,.ua-h1,.ua-h2,.lg-title{white-space:normal;}   /* nur an Leerzeichen, nie mitten im Wort */
  html[dir="rtl"] .k-title{width:100%;}
  .s-partners__head{font-size:var(--fs-h2);}   /* geschuetzte Leerzeichen: eine Stufe kleiner, damit es passt */
}

/* Sehr kleine Handys (unter 360 px, z. B. iPhone SE 1. Generation) */
@media (max-width:359.98px){
  .f-mail,.lg-sec a[href^="mailto:"]{overflow-wrap:anywhere;}   /* lange E-Mail-Adresse darf umbrechen */
  .bento__grid{grid-template-columns:1fr;}
  .s-partners__head,.ua-h2{font-size:var(--fs-h3);}
}

/* ==========================================================================
   ANIMATIONEN (Stand 12.10.)
   Nur mit JavaScript aktiv (html.js-reveal bzw. html.has-intro) und nur, wenn
   "Bewegung reduzieren" nicht eingeschaltet ist – sonst ist alles sofort sichtbar.
   Bewegt wird ueber die Einzel-Eigenschaften translate/scale, damit bestehende
   transform-Werte (Hover, Zentrierung) unberuehrt bleiben.
   ========================================================================== */

/* ---------- Startseite: Intro (schwarzer Bildschirm -> Logo -> Header) ---------- */
.intro{display:none;}
.has-intro .intro{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:1000;
  background:var(--c-black);
  animation:intro-safety 0s linear 6s forwards;     /* Sicherung: verschwindet auch ohne Script */
}
.intro__logo{
  width:var(--intro-w,min(44vw,40vh));height:auto;
  filter:brightness(0) invert(1);                     /* schwarzes Logo -> weiss */
  opacity:0;transform-origin:50% 50%;
  animation:intro-logo-in .8s var(--ease-out) .15s forwards;
}
.has-intro .hero__mark{opacity:0;animation:intro-safety-in 0s linear 6s forwards;}
@keyframes intro-logo-in{from{opacity:0;scale:.9;}to{opacity:1;scale:1;}}
@keyframes intro-safety{to{opacity:0;visibility:hidden;}}
@keyframes intro-safety-in{to{opacity:1;}}

/* ---------- Scroll-Einblendungen (Startseite, Services, Footer) ---------- */
.js-reveal .rv{opacity:0;}
.js-reveal .rv.is-in{opacity:1;animation:rv-up .95s var(--ease-out) var(--rv-d,0s) backwards;}
.js-reveal .rv--zoom.is-in{animation-name:rv-zoom;animation-duration:1.1s;}
.js-reveal .rv--side.is-in{animation-name:rv-side;animation-duration:1.05s;}
/* Zeilen einer Ueberschrift nacheinander (Container bleibt sichtbar) */
.js-reveal .rv--lines{opacity:1;}
.js-reveal .rv--lines > span{opacity:0;}
.js-reveal .rv--lines.is-in > span{opacity:1;animation:rv-up .9s var(--ease-out) backwards;}
.js-reveal .rv--lines.is-in > span:nth-child(2){animation-delay:.12s;}
.js-reveal .rv--lines.is-in > span:nth-child(3){animation-delay:.24s;}
:root{--rv-dir:1;}
html[dir="rtl"]{--rv-dir:-1;}
@keyframes rv-up  {from{opacity:0;translate:0 56px;}}
@keyframes rv-zoom{from{opacity:0;translate:0 40px;scale:.92;}}
@keyframes rv-side{from{opacity:0;translate:calc(var(--rv-dir) * -90px) 0;}}

/* ---------- Kunden & Partner: Einstieg beim Laden ---------- */
@media (prefers-reduced-motion:no-preference){
  .page-kp .kp-row{animation:kp-row-in 1.2s var(--ease-out) .1s backwards;}
  .page-kp .kp-card{animation:kp-card-in .8s var(--ease-out) backwards;animation-delay:calc(.25s + var(--kp-i,8) * 70ms);}
  .page-kp .kp-panel{animation:kp-panel-in 1.1s var(--ease-out) .55s backwards;transform-origin:50% 0;}
  .page-kp .kp-body.is-active > *{animation:k-up .8s var(--ease-out) backwards;}
  .page-kp .kp-body.is-active > .kp-logo{animation-delay:.95s;}
  .page-kp .kp-body.is-active > .kp-info{animation-delay:1.05s;}
  .page-kp .kp-body.is-active > .kp-slides{animation:kp-slides-in 1.1s var(--ease-out) 1s backwards;}
  .page-kp::after{animation:k-wave-in 1.6s var(--ease-out) .6s backwards;}
  .page-kp.kp-ready .kp-body > *{animation:none;}    /* spaeterer Wechsel der Firma: kein erneutes Einblenden */
}
@keyframes kp-row-in{from{opacity:0;translate:calc(var(--rv-dir) * 160px) 0;}}
@keyframes kp-card-in{from{opacity:0;translate:0 60px;scale:.94;}}
@keyframes kp-panel-in{from{opacity:0;translate:0 70px;scale:.97;}}
@keyframes kp-slides-in{from{opacity:0;scale:1.04;}}

/* ==========================================================================
   FOOTER-KOMPONENTE (alle Seiten identisch)
   Hover/Fokus: Unterstreichung blendet ein und rueckt an den Text; LinkedIn hebt sich leicht.
   Einblendung beim Scrollen: site.js versieht jede Footer-Spalte mit .rv (0 s / .12 s / .24 s).
   ========================================================================== */
.f-nav a,.f-mail,.f-legal a{
  text-decoration-line:underline;text-decoration-thickness:1.5px;
  text-decoration-color:transparent;text-underline-offset:.5em;
  transition:text-decoration-color var(--dur-base) var(--ease-out),text-underline-offset var(--dur-base) var(--ease-out);
}
.f-nav a:hover,.f-mail:hover,.f-legal a:hover,
.f-nav a:focus-visible,.f-mail:focus-visible,.f-legal a:focus-visible{
  text-decoration-color:currentColor;text-underline-offset:.22em;
}
.f-social a{display:inline-block;transition:transform var(--dur-base) var(--ease-out);}
.f-social a:hover,.f-social a:focus-visible{transform:translateY(-3px);}
@media (prefers-reduced-motion:reduce){
  .f-nav a,.f-mail,.f-legal a,.f-social a{transition:none;}
}

/* Abstand Inhaltsbereich (1440 px) -> Fensterrand; unter 1440 px = 0 (dort skaliert body{zoom}) */
:root{--edge:max(0px, 50vw - 720px);}

/* Ueber Amara, Handy: Venn-Diagramm passt auch auf sehr schmale Geraete */
@media (min-width:641px) and (max-width:720px){
  .ua-venn{transform:scale(.88);transform-origin:50% 0;margin-bottom:-54px;}
}
@media (max-width:374.98px){
  .ua-venn{transform:scale(.47) !important;margin-bottom:-240px;}
}
/* schmale Handys: nur zwei Formen, damit sie sich nicht ueberlagern */
@media (max-width:479.98px){
  .ua-blob--m{display:none;}
  .ua-blob--r{right:-50px;width:230px;}
}

/* Kunden & Partner: Firmenname verlinkt die Website der Firma (neuer Tab) */
.kp-firm{
  color:inherit;
  text-decoration-line:underline;text-decoration-thickness:1.5px;
  text-decoration-color:rgb(var(--rgb-white) / .45);text-underline-offset:.22em;
  transition:text-decoration-color var(--dur-base) var(--ease-out);
}
.kp-firm::after{content:"\2009\2197";display:inline-block;transition:transform var(--dur-base) var(--ease-out);}   /* duenner Abstand + Pfeil nach rechts oben */
.kp-firm:hover,.kp-firm:focus-visible{text-decoration-color:currentColor;}
.kp-firm:hover::after,.kp-firm:focus-visible::after{transform:translate(2px,-2px);}