@font-face{
  font-family:"Seravek Web";
  src:url("assets/Seravek-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:block;
}

/* =========================================================
   Entris Banking — Home (Large)
   Design reference: Figma 1500 x 10737
   Scaling: 1rem = 16px up to 1500px viewport, then fluid.
   ========================================================= */

:root{
  --white:#ffffff;
  --firefly:#071117;
  --nile:#163347;
  --nile15:rgba(22,51,71,.15);
  --nile75:rgba(22,51,71,.75);
  --white15:rgba(255,255,255,.15);
  --white50:rgba(255,255,255,.5);
  --white75:rgba(255,255,255,.75);
  --tarawera:#0a4269;
  --bright:#f7fafc;
  --sea:#eaeff5;
  --merino:#f6e7d4;
  --gray100:#f4f4f6;

  --outer:3rem;      /* 48 */
  --stack:5rem;      /* 80 */
  --cgap:5rem;       /* 80 */
}

html{
  font-size:max(16px, calc(100vw / 93.75));
  -webkit-text-size-adjust:100%;
}

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

body{
  margin:0;
  background:var(--white);
  color:var(--nile);
  font-family:"Seravek Web","Seravek",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

p{margin:0;}
h1{margin:0;font-weight:400;}
img{display:block;}
a{color:inherit;text-decoration:none;}

.page{
  width:93.75rem;      /* 1500 */
  margin:0 auto;
  overflow:hidden;
}

/* cap-height trim (Chrome 133+); harmless elsewhere */
.captrim{
  text-box-trim:trim-both;
  text-box-edge:cap alphabetic;
  text-box:trim-both cap alphabetic;
}

/* ---------- shared type ---------- */
.sechead{
  display:flex;
  gap:2rem;                 /* 32 */
  align-items:flex-start;
  width:100%;
}
.sechead__text{
  font-size:2.375rem;       /* 38 */
  line-height:1.3;
  width:65.3125rem;         /* 1045 */
  color:var(--nile);
}
.sechead__text--light{color:var(--white);}

.dottitle{
  display:flex;
  gap:.5rem;                /* 8 */
  align-items:center;
  width:20.4375rem;         /* 327 */
  flex:0 0 auto;
  font-size:1.125rem;       /* 18 */
  line-height:1.45;
  color:var(--nile);
}
.dottitle--light{color:var(--white);}
.dottitle{position:relative;}

/* Der Kreis aus dem Wortzeichen: auslaufender Impuls beim Erscheinen. */
.dotping{
  position:absolute;pointer-events:none;
  border-radius:50%;
  border:1.5px solid currentColor;opacity:0;
}
.dottitle .dot{width:.5rem;height:.5rem;flex:0 0 auto;}
.dottitle .dot--tall{height:1.5625rem;align-self:flex-start;}
.dottitle--tallalign{align-items:flex-start;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1.4;
  white-space:nowrap;
  padding:0 2rem;           /* 32 */
  height:3.5rem;            /* 56 */
  color:var(--nile);
}
.btn--white{background:var(--white);}
.btn--ghost{border:1px solid var(--nile15);}
.btn--slim{height:3.125rem;}            /* 50 */
.btn--icon{background:var(--white);gap:1rem;}
.btn--iconghost{
  gap:1rem;
  color:var(--white);
  background:var(--white15);
  border:1px solid var(--white75);
  -webkit-backdrop-filter:blur(1.25rem);
  backdrop-filter:blur(1.25rem);
}
.btn__icon{width:1.5rem;height:1.5rem;flex:0 0 auto;}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  width:93.75rem;
  height:100vh;
  height:100svh;
  min-height:34.375rem;       /* 550 — Sicherheitsnetz für flache Fenster */
  padding:0 3rem 3rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__veil{position:absolute;inset:0;background:rgba(0,0,0,.2);}
/* Zwei Verlaeufe: oben fuer die Lesbarkeit von Logo und Navigation,
   unten der aus dem Figma fuer die Headline. Beide auf demselben
   Element, damit sie mit der bestehenden Einblendung mitlaufen. */
/* Nur noch der untere Verlauf. Der obere (Header-Lesbarkeit, R53) ist
   entfallen — dafuer deckt der untere wieder staerker (.58 -> .72), setzt
   aber weiterhin spaet ein (58 %), bleibt also niedrig. */
.hero__grad{position:absolute;inset:0;
  background:linear-gradient(180.382deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.72) 100%);}

.siteheader{
  position:absolute;
  left:0;top:0;
  width:93.75rem;
  padding:3rem 3rem 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.siteheader__logo img{width:5.765rem;height:1.5625rem;}   /* 92.246 x 25 */
.siteheader__nav{display:flex;gap:1rem;align-items:center;}
.pill__fill{
  position:absolute;inset:0;pointer-events:none;
  /* 0.16 auf 0.10 Grundflaeche war praktisch unsichtbar. */
  background:rgba(255,255,255,.38);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
/* Nur V1 "Aufdecken": die Fuellung faehrt von oben herein, wie beim
   Primaerbutton. In V2 bleibt der schlichte Farbwechsel (weiter unten). */
.stil-2 .pill:hover .pill__fill{transform:scaleY(1);}
.stil-1 .pill__fill,
.pill--dark .pill__fill{background:rgba(22,51,71,.14);}
/* NICHT die Fuellung erfassen: `.pill>*` steht nach `.pill__fill` und hat
   dieselbe Spezifitaet — es ueberschrieb `position:absolute` und machte die
   Ebene zu einem 0x0-Flexelement. Der Hover war dadurch unsichtbar. */
.pill>*:not(.pill__fill){position:relative;z-index:1;}
.pill{
  position:relative;overflow:hidden;
  /* .pill ist teils <button>, teils <span> — Button-Defaults (Rahmen,
     Hintergrund, Schrift) muessen weg, sonst zeichnet der Browser
     seinen Standardrahmen, der wie ein Schatten aussieht. */
  appearance:none;-webkit-appearance:none;
  border:0;margin:0;font:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:.375rem;   /* 6 */
  height:2rem;                                    /* 32 */
  padding:0 .75rem;                               /* 12 */
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--white);
  font-size:.875rem;                              /* 14 */
  line-height:1;
}
/* Sprach-Pill: Icon vorn braucht optisch weniger Vorlauf als Text. */
.pill--lang{padding-left:.5rem;}
/* Die Icon-SVGs haben eigene Masse (menu 13x9, x-close 9x9, globe 14.33).
   Sie duerfen NICHT auf die 16px-Box gestreckt werden — die Box gibt nur
   den Platz vor, die Grafik sitzt darin zentriert in Originalgroesse. */
.pill__ico{position:relative;width:1rem;height:1rem;flex:0 0 auto;}
.pill__ico .ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.ico--menu{width:.8125rem;height:.5625rem;}        /* 13 x 9 */
.ico--close{width:.5625rem;height:.5625rem;}       /* 9 x 9 */
.ico--globe{width:.89583rem;height:.89583rem;}     /* 14.333 */
.ico--globefill{width:.33333rem;height:.83333rem;} /* 5.333 x 13.333 */
.pill__label{display:block;}

.hero__container{
  position:relative;
  width:87.75rem;              /* 1404 */
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.hero__btnslot{width:13.25rem;height:3.5rem;}   /* 212 x 56 */
.hero__btnslot .btn{width:100%;}
.hero__text{
  width:42.875rem;            /* 686 */
  display:flex;flex-direction:column;gap:3.5rem;   /* 56 */
  color:var(--white);
}
.hero__title{
  font-size:5rem;             /* 80 */
  line-height:1;
  letter-spacing:-.1875rem;   /* -3 (Figma) */
}
.hero__lead{
  font-size:1.125rem;
  line-height:1.45;
  width:40rem;                /* 632 im Figma; 640 hier, damit der Umbruch identisch fällt */
}

/* =========================================================
   TEASER MULTIPLE
   ========================================================= */
.tmul{
  position:relative;
  background:var(--white);
  padding:var(--stack) 0 5rem;
  overflow:hidden;
}
/* Der Zeilenrand liegt auf den Kindern, damit die Karten-Row bis zur
   Sektionskante laufen kann — wie im Figma. */
.tmul .sechead{padding:var(--cgap) 3rem 0;}
.tmul__wrap{
  padding:var(--cgap) 0 0 3rem;
  overflow:hidden;
}
/* Horizontaler Slider — Bedienung ausschliesslich ueber die Pfeile.
   overflow:hidden statt auto: so kann weder Wheel noch Trackpad die Row
   verschieben; scrollLeft wird nur noch programmatisch gesetzt. */
.tmul__wrap{overflow:hidden;}
/* Bedienleiste des Sliders: Fortschritt links, Pfeile rechts */
.tmul__nav{
  display:flex;align-items:center;gap:2rem;
  margin:2.5rem 3rem 0;
}
/* Bewusst zurueckhaltend: duenne Linie statt Balken. Der Fortschritt
   soll ablesbar sein, ohne die Karten zu ueberstimmen. */
.tmul__track{
  flex:1 0 0;min-width:0;
  height:2px;
  background:rgba(22,51,71,.09);
  overflow:hidden;
}
.tmul__bar{
  display:block;height:100%;width:0;
  background:rgba(22,51,71,.4);
  will-change:transform;
}
.tmul__arrows{display:flex;gap:.75rem;flex:0 0 auto;}
.tmul__arrow{
  width:3rem;height:3rem;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--nile15);
  color:var(--nile);cursor:pointer;
  transition:background-color .3s ease,border-color .3s ease,opacity .3s ease;
}
.tmul__arrow svg{width:1rem;height:1rem;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.tmul__arrow:hover:not(:disabled){background:var(--sea);border-color:var(--nile);}
.tmul__arrow:disabled{opacity:.3;cursor:default;}
.tmul__row{
  display:flex;
  gap:1rem;                    /* 16 */
  align-items:center;
  width:118.75rem;             /* 1900 */
}
.tcard{
  position:relative;
  flex:1 0 0;
  min-width:0;
  height:34.875rem;            /* 558 */
  padding:1.5rem;              /* 24 */
  display:flex;
  flex-direction:column;
  gap:1rem;
  overflow:hidden;
  background:linear-gradient(180deg,#f6eee4 0%,#f0e6da 100%);
}
/* Hover: die Flaeche wird flach blau. Als eigene Ebene, weil sich der
   beige Verlauf des Ruhezustands nicht auf eine Farbe animieren laesst. */
/* Hover-Flaeche der Kompetenz-Karten.
   Farbe 1:1 wie Karte 02 im Figma: Tarawera plus der dortige
   Doppelverlauf. Darueber das Leuchten. */
.tcard__hover{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(179.949deg, rgba(22,51,71,.85) 0%, rgba(22,51,71,0) 50%,
                    rgba(22,51,71,.85) 99.972%),
    linear-gradient(90deg, rgba(22,51,71,.15) 0%, rgba(22,51,71,.15) 100%),
    var(--tarawera);
}
/* Leuchtpunkt: sitzt am Ursprung der Flaeche und wird per Transform
   unter den Zeiger gefahren. margin zentriert ihn auf dem Punkt. */
/* Deutlich weicher: geringere Deckkraft,
weiter auslaufender Verlauf und
   mehr Unschaerfe. Vorher las sich das Leuchten als helle Farbflaeche
   statt als Licht. */
.cglow,
.stil-1 .tcard__glow,
.cglow{opacity:0;}
/* Stil 2 behaelt das flaechige Leuchten der Karte */
/* Variante Simple: kein Leuchten — nur die Flaeche, dafuer weicher. */
.stil-2 .tcard__glow{display:none;}

/* Stil 1: beide Ebenen faden ein. */
.stil-1 .tcard__hover,
/* Stil 1: beide Ebenen faden ein. */
.stil-1 .tcard__glow,
.stil-1 .tcard:hover .tcard__hover,
.stil-1 .tcard:hover .tcard__glow,
/* Stil 2: Grundbewegung von oben nach unten. */
.stil-2 .tcard__hover{
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .75s cubic-bezier(.16,1,.3,1);
}
.stil-2 .tcard:hover .tcard__hover{transform:scaleY(1);}
.stil-2 .tcard__nr,.stil-2 .tcard__title,.stil-2 .tcard__text{
  transition:color .75s cubic-bezier(.16,1,.3,1);
}
.tcard__nr,.tcard__title,.tcard__text{transition:color .45s ease;}
.tcard:hover .tcard__nr,
.tcard:hover .tcard__title{color:var(--white);}
.tcard:hover .tcard__text{color:var(--merino);}
.tcard__nr{
  position:relative;
  font-size:1.125rem;line-height:1.45;white-space:nowrap;
}
.tcard__body{
  position:relative;
  flex:1 0 0;min-height:0;
  display:flex;flex-direction:column;justify-content:space-between;
  width:18.9375rem;            /* 303 */
}
.tcard__title{font-size:1.75rem;line-height:1.4;}   /* 28 */
.tcard__text{font-size:1.125rem;line-height:1.45;color:var(--nile75);}


/* =========================================================
   FIGURES
   ========================================================= */
.figures{background:var(--white);padding-top:var(--stack);display:flex;flex-direction:column;align-items:flex-end;}
.figures__band{
  background:var(--tarawera);
  padding:5rem 3rem;
  display:flex;flex-direction:column;align-items:flex-start;
}
.figures__inner{display:flex;flex-direction:column;align-items:flex-end;}
.sechead--figures{
  width:87.75rem;              /* 1404 */
  padding:var(--cgap) 0;
}
.sechead--figures .sechead__text{width:65.25rem;}   /* 1044 */
.figures__items{
  display:flex;flex-wrap:wrap;
  gap:3.5rem 2rem;             /* 56 / 32 */
  align-items:flex-start;
  padding:3rem 0 3rem 22.4375rem;   /* py48 pl359 */
  width:100%;
}
.fig{
  flex:1 0 0;min-width:0;
  height:7.5625rem;            /* 121 */
  display:flex;flex-direction:column;gap:1.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--white15);
}
.fig__num{
  display:flex;gap:.1875rem;align-items:flex-end;
  color:var(--white);white-space:nowrap;
}
.fig__big{font-size:3.75rem;line-height:1.05;letter-spacing:.0375rem;}  /* 60 / +0.6 */
.fig__suf{font-size:1.5rem;line-height:1.5;}
.fig__label{font-size:1.125rem;line-height:1.45;color:var(--merino);}

/* =========================================================
   LOGO WALL
   ========================================================= */
.logowall{
  background:var(--white);
  padding-top:var(--stack);
  display:flex;flex-direction:column;gap:4.5rem;   /* 72 */
}
.sechead--pad{padding:var(--cgap) 3rem 0;}
.logowall__container{padding:3.625rem 0;overflow:hidden;}   /* 58 */
/* Das Laufband ist genau so breit wie der Fliesstext darueber:
   linke Kante 407px (48 Aussenrand + 327 Label + 32 Abstand),
   rechte Kante 48px — macht 1045px sichtbares Fenster.
   Die Reihe darin laeuft unveraendert weiter. */
/* MARGIN, nicht padding: overflow:hidden schneidet an der Rahmenkante ab,
   der Innenabstand gehoert noch zum sichtbaren Bereich. Mit padding-right
   lief das Band rechts ueber die Textkante hinaus bis zum Seitenrand. */
.logowall__container{
  margin-left:25.4375rem;margin-right:3rem;
  /* Weiche Kanten statt harter Schnitt: die Logos laufen sichtbar in den
     Bereich hinein und wieder heraus. Maske statt Farbverlauf-Overlay,
     damit es auf jedem Hintergrund funktioniert. */
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
}
.logowall__row{display:flex;align-items:center;width:max-content;will-change:transform;}
/* feste Zellenbreite statt flex:1 — sonst gaebe es keine Laufstrecke */
.lwcell{flex:0 0 18.75rem;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
/* Seitlicher Innenabstand halbiert: mit den vollen 48px begann das erste
   Logo rund 50px rechts der Textkante, das Band wirkte dadurch versetzt.
   Die vertikalen Werte bleiben wie im Figma. */
.lwcell--a{background:var(--white);justify-content:center;padding:2.1875rem 1.5rem;}
.lwcell--b{padding:2.1875rem 1.5rem;}
.lwcell--c{padding:1.875rem 2.25rem;}
.lwcell--d{padding:2.5625rem 1.5rem;}
.lwcell--e{padding:1.6875rem 1.5rem;align-items:flex-end;}
.lw-vontobel{width:9.0538rem;height:1.6667rem;}    /* 144.861 x 26.667 */
.lw-b{width:13.2789rem;height:1.7206rem;}          /* 212.463 x 27.53 */
.lw-valiant{width:8.75rem;height:2.3149rem;}       /* 140 x 37.038 */
.lw-word{position:relative;width:100%;height:.82375rem;}   /* 13.18 */
.lw-word img{position:absolute;width:auto;height:auto;}
.lw-word img[style]{display:block;}
.lw-clientis{position:relative;width:10.8646rem;height:2.6197rem;}  /* 173.833 x 41.915 */
.lw-clientis__mark{position:absolute;left:0;top:0;width:2.363rem;height:2.6197rem;}
.lw-clientis__word{position:absolute;left:2.8125rem;top:.3594rem;width:8.0521rem;height:1.8884rem;}

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testi{background:var(--white);padding:10rem 3rem 0;overflow:hidden;}   /* pt160 */
.testi__inner{display:flex;flex-direction:column;gap:2.375rem;}         /* 38 */
.testi__row{display:flex;align-items:center;justify-content:space-between;width:100%;}
.testi__media{position:relative;width:31.6875rem;height:32.125rem;flex:0 0 auto;overflow:hidden;}         /* 507 x 514 */
/* Alle drei Videos liegen gleichzeitig im Markup und werden nur
   ueberblendet. Quellenwechsel per load() liess den Uebergang stocken:
   der Puffer wurde verworfen und neu dekodiert. */
.testi__media img{width:100%;height:100%;object-fit:cover;display:block;}
.testi__media video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;
}
.testi__media video{transition:opacity .55s cubic-bezier(.22,.61,.36,1);}
.testi__media video.is-on{opacity:1;}
.testi__col{
  width:42.875rem;height:32.125rem;flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:space-between;
}
.testi__quote{
  font-size:2.375rem;line-height:1.3;
  text-indent:-1.06875rem;      /* -0.45 * 38 */
}
.testi__who{display:flex;flex-direction:column;gap:.5rem;font-size:1.5rem;line-height:1.5;}
.testi__role{color:var(--nile75);}
.testi__thumbs{display:flex;gap:1rem;align-items:center;width:20.4375rem;}
/* Feste Breite: mit vier Stimmen ergab (327-48)/4 = 69.75px. Bei drei
   Stimmen wuerde flex:1 die Thumbs auf 98px aufblasen — die Breite soll
   aber gleich bleiben. */
.thumb{flex:0 0 4.359375rem;min-width:0;display:flex;flex-direction:column;gap:.6875rem;}
.thumb__img{height:4rem;overflow:hidden;position:relative;background:var(--white);}
.thumb__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.thumb__img--bottom{background:var(--bright);}
.thumb__track{height:.375rem;background:var(--nile15);overflow:hidden;}
.thumb__bar{display:block;height:100%;width:0;background:var(--firefly);}
.thumb{cursor:pointer;}
.testi__media img{transition:none;}

/* =========================================================
   MEDIA
   ========================================================= */
.media{background:var(--white);padding-top:var(--stack);}
.media__wrap{padding-top:var(--cgap);}
.media__box{width:100%;aspect-ratio:1500/695;background:var(--gray100);}
.media__box img{width:100%;height:100%;object-fit:cover;}

/* =========================================================
   TEAM
   ========================================================= */
/* Team-Modul im Figma entfernt (2026-08-11). Stillgelegt statt geloescht —
   Markup, Bilder und Animationen bleiben erhalten. */
.team{display:none;}
.team--unused{
  background:var(--bright);
  padding:var(--stack) var(--outer) 0;
  display:flex;align-items:flex-start;justify-content:space-between;
}
.team__container{flex:1 0 0;min-width:0;padding:var(--cgap) 0;display:flex;flex-direction:column;}
.team__grid{
  display:flex;flex-wrap:wrap;
  gap:5.5rem 0;               /* 88 / 0 */
  align-items:flex-start;align-content:flex-start;
  padding-top:var(--cgap);
  width:100%;
}
.tm{width:29.25rem;display:flex;flex-direction:column;gap:1.5rem;flex:0 0 auto;}  /* 468 */
.tm__frame{
  background:var(--sea);
  height:19.625rem;           /* 314 */
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.tm__img{position:relative;width:18.5rem;height:17rem;overflow:hidden;}   /* 296 x 272 */
.tm__img img{position:absolute;max-width:none;}
.tm__meta{display:flex;flex-direction:column;width:100%;}
.tm__name{font-size:1.125rem;line-height:1.45;text-align:center;}
.tm__role{font-size:1.125rem;line-height:1.45;text-align:center;color:var(--nile75);}

.crop-1{height:104.34%;left:-20.45%;top:-4.22%;width:147.85%;}
.crop-2{height:100%;left:-17.3%;top:.12%;width:145.42%;}
.crop-3{height:100%;left:-20.62%;top:0;width:141.25%;}
.crop-4{height:100%;left:-20.87%;top:.12%;width:149.84%;}
.crop-5{left:0;top:0;width:100%;height:100%;object-fit:cover;}
.crop-6{height:100%;left:-28.3%;top:.12%;width:146.38%;}
.crop-7{height:100%;left:-16.16%;top:.12%;width:144%;}
.crop-8{height:100%;left:-18.46%;top:.12%;width:146.86%;}
.crop-9{height:100%;left:-27.14%;top:.12%;width:140.36%;}

.team__btnrow{
  display:flex;gap:3rem;align-items:center;justify-content:center;
  padding-top:4.5rem;         /* 72 */
  width:100%;overflow:hidden;
}
.rule{flex:1 0 0;min-width:0;height:1px;background:var(--nile15);}

/* =========================================================
   ARTICLES
   ========================================================= */
.arts{background:var(--white);display:flex;flex-direction:column;}
/* Kein weisser Zwischenraum mehr: die helle Team-Flaeche trifft direkt
   auf das blaue Insights-Band. Bewusste Abweichung vom Figma, das dort
   160px Weiss zeigt. */
/* Abstand vor dem Insights-Band. Im Figma liegt er ZWISCHEN Stimmen und
   Band (Karten-Unterkante 5030, Band ab 5367 = 337px). Er sitzt hier im
   Markup vor dem Band und traegt deshalb zur arts-Sektion bei — optisch
   identisch, in den Sektionszahlen aber anders zugeordnet. */
.arts__pad{display:block;height:10rem;background:var(--white);}   /* 160 */
.arts__band{
  background:var(--tarawera);
  padding:var(--stack) 3rem var(--cgap);
  display:flex;flex-direction:column;gap:5rem;
  overflow:hidden;
}
.sechead--arts{padding-top:var(--cgap);width:auto;}
.arts__desc{display:flex;flex-direction:column;gap:2.5rem;align-items:flex-start;}
.arts__row{display:flex;gap:1rem;align-items:flex-start;height:33.4375rem;}  /* 535 */
/* Slider-Fenster fuer die Insights-Karten — wie bei den Kompetenzen
   ausschliesslich ueber die Pfeile bedienbar. */
/* Das Fenster laeuft bis zur Seitenkante, nicht bis zum 1404er Raster:
   im Figma beginnt die vierte Karte bei 1269 und wird erst bei 1500
   beschnitten. Mit den 48px Bandrand endete sie sonst schon bei 1452. */
.arts__wrap{overflow:hidden;margin-right:-3rem;}
.arts__row{width:max-content;}
/* Die Bedienleiste steht hier auf Tarawera statt auf Weiss — die dunklen
   Farben aus dem Kompetenz-Modul waeren unsichtbar. */
.arts .tmul__track{background:rgba(255,255,255,.18);}
.arts .tmul__bar{background:rgba(255,255,255,.75);}
.arts .tmul__arrow{border-color:var(--white15);color:var(--white);}
.arts .tmul__arrow:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);}
.arts .tmul__nav{margin-left:0;margin-right:0;}
.acard{
  position:relative;
  background:var(--sea);
  width:24.4375rem;           /* 391 */
  height:33.4375rem;
  flex:0 0 auto;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
/* Bilder und Verlauf entfallen: im Figma sind die Insights-Karten leere
   Sea-White-Flaechen mit dunklem Text — wie die Job-Karten. */
.acard__bg,.acard__grad{display:none;}
.acard__content{
  position:relative;flex:1 0 0;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:1.5rem;
  padding:1.5rem;color:var(--tarawera);
}
.acard__title{font-size:1.75rem;line-height:1.4;}
.acard__meta{display:flex;align-items:center;justify-content:space-between;width:100%;}
.acard__cat{
  flex:1 0 0;min-width:0;display:flex;align-items:center;
  padding:1rem 1.5rem 1rem 0;
  border-top:1px solid var(--nile15);border-bottom:1px solid var(--nile15);
  font-size:1rem;line-height:1.4;white-space:nowrap;
}
.acard__date{
  display:flex;align-items:center;justify-content:center;
  padding:1rem 0 1rem 1.5rem;
  border-top:1px solid var(--nile15);border-bottom:1px solid var(--nile15);border-left:1px solid var(--nile15);
  font-size:1rem;line-height:1.4;white-space:nowrap;
}

/* =========================================================
   JOBS
   ========================================================= */
.jobs{background:var(--white);padding:var(--stack) 3rem;display:flex;align-items:center;}
.jobs__container{
  width:87.75rem;flex:0 0 auto;
  padding-top:var(--cgap);
  display:flex;flex-direction:column;gap:5rem;align-items:flex-end;
}
.jobs__head{display:flex;gap:2rem;align-items:flex-start;width:100%;}
.jobs__titleslot{display:flex;align-items:center;flex:0 0 auto;}
.jobs__desc{display:flex;flex-direction:column;gap:2.5rem;align-items:flex-start;flex:0 0 auto;}
.sechead__text--jobs{width:65.25rem;}   /* 1044 */
.jobs__row{display:flex;flex-wrap:wrap;gap:1rem;width:87.75rem;align-items:flex-start;}
.job{
  background:var(--sea);
  width:28.5625rem;           /* 457 */
  height:18.75rem;            /* 300 (Figma v5) */
  flex:0 0 auto;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.job__content{
  flex:1 0 0;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:1.5rem;
  padding:2rem 1.5rem;        /* 32 / 24 */
}
.job{position:relative;}
.job__hover{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--tarawera);
}
.job__content{position:relative;z-index:1;}
/* Variante 2: einfaden. Variante Simple: von oben herein — Grundbewegung. */
.stil-1 .job__hover,
/* Variante 2: einfaden. Variante Simple: von oben herein — Grundbewegung. */
.stil-1 .job:hover .job__hover,
.stil-2 .job__hover{transform:scaleY(0);transform-origin:50% 0;
  transition:transform .75s cubic-bezier(.16,1,.3,1);}
.stil-2 .job:hover .job__hover{transform:scaleY(1);}
.job__title,.job__meta{transition:color .75s cubic-bezier(.16,1,.3,1);}
.job:hover .job__title{color:var(--white);}
.job:hover .job__meta{color:var(--merino);border-color:rgba(255,255,255,.25);}
.job__title{font-size:1.75rem;line-height:1.4;}
.job__meta{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  border-top:1px solid var(--white15);border-bottom:1px solid var(--white15);
  font-size:1rem;line-height:1.4;
}
.job__meta span{flex:1 0 0;min-width:0;}
.job__loc{text-align:right;}

/* =========================================================
   CTA CONTACT
   ========================================================= */
/* Reste der alten Vollbild-Fassung entfernt (feste Hoehe 900, seitliches
   Padding 48, Hintergrundbild und Verlauf). Die aktuelle CTA steht weiter
   unten unter "CTA.Contact — Neufassung". */
.cta__container{position:relative;width:87.75rem;display:flex;gap:2rem;align-items:flex-start;}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--firefly);padding:var(--stack) 3rem 2.5rem;overflow:hidden;}
.foot__inner{display:flex;flex-direction:column;gap:4.4375rem;padding-top:var(--cgap);}  /* 71 */
.foot__nav{display:flex;gap:2rem;align-items:flex-start;width:100%;}
.foot__logocol{width:20.4375rem;flex:0 0 auto;display:flex;flex-direction:column;gap:1.5rem;}
.foot__logo{width:4.5rem;height:1.2196rem;}   /* 72 x 19.513 */
.foot__tagline{font-size:1rem;line-height:1.4;color:var(--white);}
.foot__navcol{width:31.6875rem;flex:0 0 auto;display:flex;flex-direction:column;gap:1rem;}
.foot__label{font-size:1.125rem;line-height:1.45;color:var(--white50);}
.foot__navitems{display:flex;flex-direction:column;font-size:2.375rem;line-height:1.3;color:var(--white);}
.foot__addrcol{width:20.4375rem;flex:0 0 auto;display:flex;flex-direction:column;gap:1rem;font-size:1.125rem;line-height:1.45;}
.foot__addr{display:flex;flex-direction:column;color:var(--white);}
.foot__legalrow{display:flex;gap:2rem;align-items:flex-end;width:100%;}
.foot__social{width:20.4375rem;flex:0 0 auto;display:flex;gap:1.5rem;align-items:center;}
.foot__social img{width:1.5rem;height:1.5rem;}
.foot__links{
  width:31.6875rem;flex:0 0 auto;
  display:flex;gap:1.5rem;align-items:center;
  font-size:1rem;line-height:1.4;color:var(--white50);white-space:nowrap;
}
.foot__info{flex:1 0 0;min-width:0;display:flex;align-items:center;justify-content:space-between;}
.foot__imp{display:inline-grid;grid-template-columns:max-content;grid-template-rows:max-content;
  place-items:start;font-size:1rem;line-height:1.4;color:var(--white50);white-space:nowrap;}
.foot__imp>span{grid-column:1;grid-row:1;}
.foot__imp2{margin-left:6.25rem;}          /* 100 */
.foot__copy{display:inline-grid;grid-template-columns:max-content;grid-template-rows:max-content;
  place-items:start;font-size:1rem;line-height:1.4;color:var(--white75);white-space:nowrap;}
.foot__copy>span{grid-column:1;grid-row:1;}
.foot__cy{margin-left:1.125rem;}           /* 18 */


/* =========================================================
   ANIMATION
   Startzustände gelten nur mit JS (html.js). Ohne JS oder
   bei prefers-reduced-motion ist alles sofort sichtbar.
   ========================================================= */

/* --- Hero: zeilenweise Maske --- */
/* Unten -45%: bei -22% (17.6px auf 80px Schrift) wurde die Unterlaenge
   des "g" angeschnitten. */
.hero__title .ln{display:block;clip-path:inset(0 0 -45% 0);}
.hero__title .ln__i{display:block;}
html.js .hero__title .ln{clip-path:inset(100% 0 -45% 0);}
html.js .hero__bg{transform:scale(1.06);}
html.js .hero__grad,
html.js .hero__veil{opacity:0;}
html.js .hero__lead,
html.js .hero__btnslot,
html.js .siteheader__logo,
html.js .siteheader__nav{opacity:0;}

/* --- Register 2: Reveal-Grammatik --- */
html.js [data-reveal]{opacity:0;}

/* --- Media-Parallax --- */
.media__box{position:relative;overflow:hidden;}
/* Zuschnitt 1:1 aus dem Figma: das Bild ist 143.96 % der Rahmenhoehe und
   sitzt 6.68 % ueber der Oberkante — dadurch sind die Personen deutlich
   groesser und der Tisch faellt aus dem Bild. Vorher 112 % / -6 %, was
   den Ausschnitt zu weit machte. Die 44 % Ueberhoehe geben dem Parallax
   ohnehin genug Raum. */
/* .media__box .media__img statt .media__img: die frueher notierte Regel
   `.media__box img` ist spezifischer (Klasse+Element) und hat den
   Zuschnitt bisher stillschweigend ueberstimmt — er war nie aktiv. */
.media__box .media__img{position:absolute;left:0;top:-6.68%;width:100%;height:143.96%;object-fit:cover;}

/* --- Micro-Interaktionen --- */
.acard__bg,.job,.tm__frame,.btn,.tcard{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
.acard{cursor:pointer;}

.acard__cat,.acard__date{transition:border-color .3s ease;}

.job{cursor:pointer;}
.job:hover{transform:translateY(-.3rem);}
/* Ursprung OBEN: bei `bottom center` blieb der untere Rand stehen und
   der Kopf wanderte beim Vergroessern aus dem Rahmen. Von oben aus
   waechst das Portrait nach unten, wo es ohnehin beschnitten ist. */
.tm__img img{transition:transform .55s cubic-bezier(.22,.61,.36,1);
  transform-origin:top center;}
.stil-1 .tm:hover .tm__img img,
.btn--ghost:hover{border-color:var(--nile);}
.stil-1 .btn--white:hover,
.stil-1 .btn--icon:hover,
/* Stil 2: Buttons fuellen sich von oben nach unten — Grundbewegung. */
.btn{position:relative;overflow:hidden;}
.btn>*{position:relative;z-index:1;}
.btn__fill{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  background:rgba(22,51,71,.1);
}
.btn--iconghost .btn__fill{background:rgba(255,255,255,.22);}
.stil-1 .btn__fill,
.stil-2 .btn:hover .btn__fill{transform:scaleY(1);}
.stil-2 .btn--ghost:hover{border-color:var(--nile15);}
.btn--iconghost:hover{background:rgba(255,255,255,.28);}
/* V2 "Reagieren": schlichter Farbwechsel statt Aufschieben. */
.pill{transition:background-color .3s ease;}
.stil-1 .pill:hover,
.stil-1 .pill--dark:hover,
/* Footer-Links decken sich beim Hover auf: eine Linie faehrt von links
   auf — dieselbe Grundbewegung wie die Flaechen im Rest der Seite. */
/* `width:fit-content` statt nur inline-block: die Absaetze im Footer sind
   Blockelemente ueber die volle Spaltenbreite — die Linie lief sonst weit
   ueber das Wort hinaus. */
.foot__navitems p,.foot__links span,.foot__imp span{
  position:relative;display:inline-block;width:fit-content;
  transition:color .3s ease;cursor:pointer;
}
/* Die Linie sass zu tief: bei line-height 1.3/1.45 liegt die Unterkante
   des Elements deutlich unter der Schriftlinie, -0.15em kam noch dazu.
   Jetzt knapp unter die Grundlinie gesetzt. */
.foot__navitems p::after,
.foot__links span::after,
.foot__imp span::after{
  content:'';position:absolute;left:0;right:0;bottom:.18em;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.foot__navitems p:hover::after,
.foot__links span:hover::after,
.foot__imp span:hover::after{transform:scaleX(1);}
.foot__navitems p:hover{color:var(--merino);}
.foot__links span:hover,.foot__imp span:hover{color:var(--white);}

@media (prefers-reduced-motion: reduce){
  html.js .hero__title .ln{clip-path:inset(0 0 -45% 0);}
  html.js .hero__bg{transform:none;}
  html.js .hero__grad,html.js .hero__veil,
  html.js .hero__lead,html.js .hero__btnslot,
  html.js .siteheader__logo,html.js .siteheader__nav,
  html.js [data-reveal]{opacity:1;}
  *{transition-duration:.01ms !important;}
}


/* --- Flächen als Gestaltungselement --- */
/* Der Leuchtpunkt darf kein Flex-Element werden: die Regel
   `.figures__band>*{position:relative}` ist spezifischer als `.cglow`
   und hat ihn in den Fluss geholt — mit 704px Hoehe und -352px Rand hat
   er den Inhalt um 352px nach unten geschoben. */
.figures__band>.cglow,
.arts__band>.cglow,
.cta>.cglow{position:absolute;z-index:0;}
.figures__band,.arts__band{position:relative;overflow:hidden;}
.figures__band>*,
.arts__band>*{position:relative;z-index:1;}
.tm__frame{position:relative;}
/* Abdeckung in Sektionsfarbe, die sich wegzieht und die Flaeche freigibt */
.tm__cover{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--bright);
  will-change:transform;
}

/* Wort-Spans: inline, damit der Umbruch identisch bleibt.
   Nur opacity/filter werden animiert — Transforms gäbe es hier nicht. */
.w{display:inline;will-change:opacity,filter;}
html.js .hero__title .w{opacity:0;}




/* =========================================================
   NAV OVERLAY  (Figma "Nav-Open Über uns", Node 7290:7860)
   Masse 1:1 aus dem Design, in rem umgerechnet (px/16).
   ========================================================= */
.nav{position:fixed;inset:0;z-index:100;}
.nav[hidden]{display:none;}
.nav__blur{
  position:absolute;inset:0;
  background:rgba(22,51,71,.1);
  -webkit-backdrop-filter:blur(7.5rem);backdrop-filter:blur(7.5rem);   /* 120 */
}
/* Rundum 24px Rand, aus dem Figma-Frame 7255:39839 gemessen:
   Panel links 563, rechts 1476, oben 24, unten 876 — es liegt also
   frei auf der Flaeche, statt buendig an den Kanten zu kleben. */
.nav__panel{
  position:absolute;
  left:calc(37.5% + .03125rem);
  right:1.5rem;                          /* 24 */
  top:1.5rem;
  height:calc(100vh - 3rem);
  height:calc(100svh - 3rem);
  background:var(--white);
  /* Alles Vertikale haengt an dieser Einheit: bei 900px Fensterhoehe
     ist sie 16px (= Designmass), darunter schrumpft sie mit. Dadurch
     passt die Navigation auf jeder Hoehe, ohne zu ueberlaufen. */
  --nav-u: min(1rem, 1.778vh);
}

/* --- Hauptebene --- */
.nav__items{
  position:absolute;left:2.5rem;top:calc(7 * var(--nav-u));width:19.4375rem;
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:calc(3.5 * var(--nav-u));
}
.nav__item{
  display:block;width:100%;
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-align:left;
  font-size:calc(4 * var(--nav-u));line-height:1;letter-spacing:-.02em;
  color:var(--nile);
  opacity:.75;
  transition:opacity .3s ease;
  text-box-trim:trim-both;text-box-edge:cap alphabetic;
  text-box:trim-both cap alphabetic;
}
.nav__item.is-open,.nav__item:hover{opacity:1;}

/* --- Verbindungslinie und Unterebene --- */
/* Werte aus dem Figma-Nav-Frame (7290:7860) gemessen: die Linie sitzt auf
   y=254, laeuft von x=858 bis 1007. Sie liegt also bewusst UNTER dem Wort
   wie eine Unterstreichung — nicht auf Mittelhoehe. Meine Korrektur in
   R110 (auf Punkthoehe ziehen) war deshalb falsch. */
.nav__connector{
  opacity:0;
  position:absolute;left:19.4375rem;top:calc(15.875 * var(--nav-u));
  width:9.3125rem;height:1px;                                   /* 149 */
  background:var(--nile15);
  transform-origin:0 50%;
}
.nav__sub{
  opacity:0;pointer-events:none;
  position:absolute;left:29.5625rem;top:calc(14.4375 * var(--nav-u));width:24.75rem;
  display:flex;flex-direction:column;gap:calc(1.5 * var(--nav-u));
  font-size:calc(1.5 * var(--nav-u));line-height:1.3;color:var(--nile);
}
/* Unterpunkte mit derselben Aufdecklinie wie Footer und Varianten —
   blosses Ausbleichen wirkte wie ein Fehler statt wie eine Reaktion. */
.nav__sub p{
  position:relative;display:inline-block;width:fit-content;
  cursor:pointer;transition:color .3s ease;
}
.nav__sub p::after{
  content:'';position:absolute;left:0;right:0;bottom:.15em;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.nav__sub.is-shown{pointer-events:auto;}
.nav__sub p:hover{color:var(--tarawera);}
.nav__sub p:hover::after{transform:scaleX(1);}

/* --- Sekundäres --- */
.nav__tertiary{
  position:absolute;left:2.5rem;bottom:calc(12.1 * var(--nav-u));width:5.4375rem;
  display:flex;flex-direction:column;gap:calc(.5 * var(--nav-u));
  font-size:calc(1 * var(--nav-u));line-height:1.3;color:var(--nile75);
}
.nav__social{
  position:absolute;left:29.8125rem;bottom:calc(12.1 * var(--nav-u));width:5.4375rem;
  font-size:calc(1 * var(--nav-u));line-height:1.3;color:var(--nile75);
}
.nav__sep{
  position:absolute;left:0;bottom:calc(10.5625 * var(--nav-u));
  width:57.0625rem;height:1px;background:var(--nile15);
}

/* --- Kacheln --- */
.nav__tiles{
  position:absolute;left:2.5rem;bottom:calc(2 * var(--nav-u));
  width:52.0625rem;height:calc(6.5 * var(--nav-u));
  display:flex;gap:2rem;align-items:center;
}
.navtile{
  position:relative;flex:1 0 0;min-width:0;height:100%;
  background:rgba(22,51,71,.05);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;
  padding:1rem 1.5rem;
  transition:background-color .3s ease;
}
.navtile:hover{background:rgba(22,51,71,.1);}
.navtile__label{font-size:calc(1.25 * var(--nav-u));line-height:1.3;color:var(--nile);white-space:nowrap;}
.navtile__icon{position:absolute;right:1.46875rem;top:3.9375rem;width:1.5rem;height:1.5rem;overflow:hidden;}
.navtile__icon--ann{right:1.4375rem;}
.navtile__fill{position:absolute;left:8.33%;right:50%;top:12.5%;bottom:12.5%;width:auto;height:auto;}
.navtile__line{position:absolute;left:3.33%;right:3.33%;top:6.94%;bottom:6.94%;width:auto;height:auto;}
.navtile__icon--ann .navtile__fill{left:8.33%;right:8.33%;top:22.92%;bottom:39.58%;}
.navtile__icon--ann .navtile__line{left:3.33%;right:3.33%;top:6.79%;bottom:3.1%;}

/* --- Header im geöffneten Zustand --- */
.navheader{
  position:absolute;left:0;top:0;width:93.75rem;
  padding:3rem 3rem 0;
  display:flex;align-items:flex-start;justify-content:space-between;
}
.navheader__logo img{width:5.765rem;height:1.5625rem;}
.navheader__nav{display:flex;gap:1rem;align-items:center;justify-content:flex-end;}
.pill--dark{
  background:rgba(22,51,71,.05);color:var(--nile);
  border:0;font:inherit;font-size:.875rem;line-height:1;cursor:pointer;
}


html.nav-open,body.nav-open{overflow:hidden;}

/* --- Nav: Zeilenmaske für die Hauptpunkte (wie die Hero-Headline) --- */
.nav__ln{display:block;clip-path:inset(-35% 0 -45% 0);}
.nav__ln__i{display:block;}

/* --- Nav: der Punkt aus dem Wortzeichen, am Anfang der Verbindungslinie --- */
/* Brandpunkt entfernt: im Figma-Nav-Frame (7290:7860) gibt es ihn nicht —
   im gesamten Hover-Bereich kein einziges rotes Pixel. Der aktive
   Hauptpunkt wird nur dunkler, die Linie steht allein. */
.nav__mark{display:none;}

/* --- Nav: Menü-Striche werden zum X --- */
.burger{
  width:.8125rem;height:.5625rem;overflow:visible;
  stroke:var(--nile);stroke-width:1.2;stroke-linecap:butt;fill:none;
}

/* Seite weicht beim Öffnen leicht zurück */



/* =========================================================
   STIL 2 — Ladevorhang
   ========================================================= */
/* Liegt im Markup und deckt ab dem ersten Bildaufbau. Die Klasse stil-2
   setzt das Kopf-Skript — ohne JS gibt es sie nicht, der Vorhang bleibt
   also verborgen. NICHT an html.js koppeln: die Klasse entfernt init(),
   sobald GSAP uebernimmt, und der Vorhang waere sofort weg. */
.intro{display:none;position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden;}
html.stil-2 .intro{display:block;}
.intro__bar{background:var(--nile);}

.intro__sheet{
  position:absolute;inset:0;z-index:4;
  background:var(--tarawera);
  will-change:transform;
}
.intro__bar{position:absolute;inset:0;will-change:transform;}
.intro__bar:nth-of-type(1){z-index:3;}
.intro__bar:nth-of-type(2){z-index:2;}
.intro__bar:nth-of-type(3){z-index:1;}


/* Inline lassen — inline-block zerlegt den Textfluss. */
.testi__quote .qw{display:inline;}

/* =========================================================
   KUNDENSTIMMEN — aufklappende Karten
   Aktive Karte breit, inaktive schmal mit senkrechtem Namen.
   Rechteckig wie alles andere im Entris-Layout; die runden Ecken
   der Vorlage sind bewusst nicht uebernommen.
   ========================================================= */
/* Masse aus dem Figma gemessen (Kanten 48/914/946/1183/1215/1452,
   Karten 223..874): aktiv 866, schmal 237, Abstand 32, Hoehe 651. */
.testi__cards{
  display:flex;gap:2rem;width:87.75rem;   /* 1404, Abstand 32 */
  align-items:stretch;
}
/* `font:inherit` ist Pflicht: .tcase ist ein <button>, und Buttons erben
   die Seitenschrift nicht — alle Texte darin liefen auf Arial statt
   Seravek. Betraf Zitat, Name, Funktion und den senkrechten Namen. */
.tcase{
  font:inherit;
  position:relative;overflow:hidden;
  flex:0 0 auto;width:14.8125rem;         /* 237 inaktiv */
  height:40.625rem;                       /* 650 */
  padding:0;border:0;background:var(--nile);
  cursor:pointer;text-align:left;
  transition:width .8s cubic-bezier(.16,1,.3,1);
}
.tcase.is-active{width:54.125rem;cursor:default;}  /* 866 */

.tcase__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.tcase__veil{
  position:absolute;inset:0;
  /* Verlauf 1:1 aus dem Figma */
  background:
    linear-gradient(180deg, rgba(7,17,23,0) 42.788%, rgba(7,17,23,.56) 60.096%,
                    rgba(7,17,23,.7) 100%),
    linear-gradient(90deg, rgba(22,51,71,.15) 0%, rgba(22,51,71,.15) 100%);
  transition:opacity .55s cubic-bezier(.16,1,.3,1);
}
/* Hover auf einer schmalen Karte gibt die Person frei: der Schleier
   wird leichter, das Bild kommt naeher, der Name rueckt hoch.
   Nur auf inaktiven Karten — die aktive ist bereits offen. */
.tcase:not(.is-active):hover .tcase__veil{opacity:.55;}
.tcase__media{transition:transform .55s cubic-bezier(.16,1,.3,1);}
.tcase:not(.is-active):hover .tcase__media{transform:scale(1.05);}
.tcase:not(.is-active):hover .tcase__tab{transform:rotate(180deg) translateX(.5rem);}

/* Senkrechter Name auf den schmalen Karten */
/* Sichtbarkeit ueber eine eigene Klasse statt ueber opacity: der
   Auftritt setzt opacity per JS, eine CSS-Regel darauf wuerde damit
   kollidieren. */
.tcase__tab{
  position:absolute;left:1.5rem;bottom:1.5rem;
  writing-mode:vertical-rl;transform:rotate(180deg);
  color:var(--white);font-size:1.125rem;line-height:1.45;   /* 18 */
  white-space:nowrap;
  transition:transform .4s ease;
}
.tcase.is-active .tcase__tab{visibility:hidden;}

/* Inhalt der aktiven Karte */
/* FESTE Breite statt left/right: sonst schrumpft der Textblock mit der
   Karte mit, das Zitat bricht in der schmalen Karte auf 13 Zeilen um und
   springt beim Aufklappen sichtbar auf 3 zurueck. */
.tcase__body{
  position:absolute;left:2.5rem;width:49.125rem;bottom:2.5rem;
  display:block;opacity:0;pointer-events:none;
  transition:opacity .45s ease;
}
.tcase.is-active .tcase__body{opacity:1;}
/* Typografie 1:1 aus dem Figma (Large/text-xl bzw. text-md):
   Zitat 28/1.4 ohne Laufweite, Name und Funktion 18/1.45.
   Vorher: Zitat 32/1.35 mit -0.02em, Funktion 16, Tab 20. */
.tcase__quote{
  color:var(--white);font-size:1.75rem;line-height:1.4;
  letter-spacing:0;width:49.125rem;                 /* 786 */
}
.tcase__name{color:var(--white);font-size:1.125rem;line-height:1.45;margin-top:1.5rem;}
.tcase__role{color:var(--merino);font-size:1.125rem;line-height:1.45;}

/* Fortschritt am unteren Rand der aktiven Karte */
.tcase__track{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(255,255,255,.18);opacity:0;transition:opacity .3s ease;
}
.tcase.is-active .tcase__track{opacity:1;}
.tcase__bar{display:block;height:100%;width:0;background:rgba(255,255,255,.75);}

/* =========================================================
   CTA.Contact — Hintergrundbild-Fassung (Figma 7657:8549)
   h 900, px 48, py 80, Inhalt unten. Verlauf 1:1 aus dem Design.
   ========================================================= */
.cta{
  position:relative;
  width:93.75rem;height:56.25rem;          /* 1500 x 900 */
  padding:5rem 3rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cta__grad{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(22,51,71,.15) 0%, rgba(22,51,71,.15) 100%),
    linear-gradient(180deg, rgba(22,51,71,0) 0%, rgba(22,51,71,.8) 100%);
}
.cta__container{
  position:relative;width:87.75rem;        /* 1404 */
  display:flex;gap:2rem;align-items:flex-start;
}
.cta__desc{display:flex;flex-direction:column;gap:2.5rem;flex:1 0 0;min-width:0;}
.cta__title{
  color:var(--white);font-size:3rem;line-height:1.1;   /* 48 / 1.1 */
  width:42.875rem;                         /* 686 */
}
.cta__row{display:flex;gap:1.5rem;align-items:center;}
.cta__person{display:flex;flex-direction:column;justify-content:center;}
.cta__pname{color:var(--white);font-size:1.5rem;line-height:1.5;}
.cta__prole{color:var(--merino);font-size:1rem;line-height:1.4;}

/* --- Variantenschalter in der Navigation (nur Prototyp) ---
   Sieht aus wie die Links darunter (Rechtliches, Datenschutz): gleiche
   Groesse, Farbe und Aufdeck-Linie. Nur die aktive Variante ist dunkler. */
.nav__variants{
  display:flex;flex-direction:column;gap:calc(.5 * var(--nav-u));
  margin-bottom:calc(1 * var(--nav-u));
}
.nav__variants p{
  position:relative;display:inline-block;width:fit-content;
  font-size:calc(1 * var(--nav-u));line-height:1.3;color:var(--nile75);
  cursor:pointer;white-space:nowrap;
  transition:color .3s ease;
}
.nav__variants p::after{
  content:'';position:absolute;left:0;right:0;bottom:.1em;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.nav__variants p:hover{color:var(--nile);}
.nav__variants p:hover::after{transform:scaleX(1);}
.nav__variants p.is-on{color:var(--nile);}
.nav__variants p.is-on::after{transform:scaleX(1);}

/* Artikelkarten: identischer Hover wie die Job-Karten. */
/* Nile statt Tarawera: das Insights-Band ist selbst Tarawera — eine
   gleichfarbige Karte verschmilzt damit. Bei den Job-Karten geht
   Tarawera, weil die Sektion dort weiss ist. */
.acard__hover{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--nile);
}
.acard__content{position:relative;z-index:1;}
.stil-1 .acard__hover,
.stil-1 .acard:hover .acard__hover,
.stil-2 .acard__hover{transform:scaleY(0);transform-origin:50% 0;
  transition:transform .75s cubic-bezier(.16,1,.3,1);}
.stil-2 .acard:hover .acard__hover{transform:scaleY(1);}
.acard__title,.acard__cat,.acard__date{transition:color .75s cubic-bezier(.16,1,.3,1),border-color .75s cubic-bezier(.16,1,.3,1);}
.acard:hover .acard__title{color:var(--white);}
.acard:hover .acard__cat,
.acard:hover .acard__date{color:var(--merino);border-color:rgba(255,255,255,.25);}

/* --- Videos aufhellen ---
   Ueber eine Anzeigekorrektur statt Neukodierung: sofort wirksam und
   nachjustierbar. Beide Quellen sind sehr dunkel gegradet (Hero 97/255,
   Testimonials 81/255 mittlere Helligkeit). */
video.hero__bg{filter:brightness(1.18) saturate(1.04);}
.tcase__media{filter:brightness(1.22) saturate(1.04);}