/* Neue Ausbaustufe (neu.html): Film-Hero, Logoband, Workflow-Reise (Warp),
   Team-Galerie. Alles im C3-Look (Glas, Glow, dunkle Welt). */

/* ================= Hero: Film ================= */
.hero-film { position: relative; overflow: hidden; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.86) saturate(1);
  z-index: 0;
}
/* Nur unten ein Schwarzverlauf, damit die Schrift traegt */
.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(5, 5, 6, 0) 30%,
    rgba(5, 5, 6, 0.42) 52%,
    rgba(5, 5, 6, 0.78) 70%,
    rgba(5, 5, 6, 0.94) 88%,
    rgba(5, 5, 6, 0.98) 100%);
}
.hero-film .letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(28px, 6svh, 64px);
  background: #050506;
  z-index: 2;
}
.hero-film .letterbox.oben { top: 0; }
.hero-film .letterbox.unten { bottom: 0; }
.hero-film { padding-bottom: clamp(8rem, 18vh, 12rem); }
.hero-film .wrap { position: relative; z-index: 3; justify-content: flex-end; }
/* Headline: durchgehend weiss, enger Zeilenabstand. Am grossen Schirm
   zweizeilig, am Telefon dreizeilig, siehe css/mobil.css.
   Die Groesse steht hier und nicht in sections.css, damit sie nur den
   Film-Hero betrifft. */
.hero-film .hero-headline {
  color: var(--c-text-hell);
  line-height: 0.98;
  font-size: clamp(1.9rem, 4.5vw, 4.2rem);
}
/* Nur am Telefon sichtbarer Umbruch */
.nur-schmal { display: none; }
.hero-film .hero-copy {
  margin-left: 0;
  max-width: min(92ch, 100%);
}
/* Minimalistischer Pfeil statt Scrollhinweis und Credit-Zeile */
.hero-pfeil {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(clamp(28px, 6svh, 64px) + clamp(16px, 2.6vh, 34px));
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: rgba(243, 241, 237, 0.5);
  transition: color 0.3s ease;
}
.hero-pfeil:hover,
.hero-pfeil:focus-visible { color: var(--c-text-hell); }
.hero-pfeil svg {
  width: 15px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: pfeil-wippen 2.6s ease-in-out infinite;
}
@keyframes pfeil-wippen {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pfeil svg { animation: none; }
}
/* Wortmarke sitzt oben rechts in der Ecke, 25 Prozent kleiner */
.hero-film .hero-logo {
  position: absolute;
  top: calc(clamp(28px, 6svh, 64px) + clamp(14px, 2.4vh, 30px));
  right: clamp(1.1rem, 3.6vw, 3.2rem);
  z-index: 3;
  width: min(33vw, 420px);
  align-self: auto;
  margin-block: 0;
  filter: drop-shadow(0 18px 60px rgba(5, 5, 6, 0.8));
}
.hero-film .hero-headline,
.hero-film .hero-copy { text-shadow: 0 2px 26px rgba(5, 5, 6, 0.85); }
@media (max-width: 900px) {
  .hero-film { padding-bottom: 9.5rem; }
  .hero-film .hero-logo { width: min(52vw, 260px); right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ================= Logoband: der Lichtstreifen unter dem Film =========
   Es steht direkt unter dem Hero, weil die Marken die erste Antwort auf
   die Frage sind, wer hier spricht. Und es steht auf Papier, nicht auf
   Schwarz: Originalfarben brauchen einen hellen Grund, sonst kippt die
   Haelfte davon ins Unsichtbare.

   Die Groessen sind nicht gleich, sie sind optisch ausgeglichen. Ein
   Logo mit voller Farbflaeche wiegt bei gleicher Hoehe schwerer als
   eine offene Wortmarke, deshalb steht hinter jedem Logo ein eigener
   Faktor. Die Werte stammen aus der gemessenen Farbflaeche je Logo.
   ==================================================================== */
.logoband {
  background: var(--c-papier);
  padding-block: clamp(2rem, 4.4vh, 3.2rem);
  position: relative;
  z-index: 2;
}
.logoband-zeile {
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.82vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(19, 19, 22, 0.42);
  text-align: center;
  margin: 0 0 clamp(1.5rem, 3vh, 2.3rem);
}
.logoband-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logoband-reihe {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 5.5rem);
  width: max-content;
  padding-right: clamp(3rem, 6vw, 5.5rem);
  animation: logoband-lauf 61s linear infinite;
}
.logoband-reihe img {
  /* Der Faktor kommt aus der Klasse am Bild. Er darf hier nicht auf 1
     gesetzt werden: diese Regel ist staerker als eine reine Klasse und
     wuerde jeden Wert wieder plattbuegeln. */
  height: calc(clamp(30px, 3.5vw, 44px) * var(--lg, 1));
  width: auto;
  flex: none;
}
.lg-spar       { --lg: 0.78; }
.lg-hyundai    { --lg: 1.16; }
.lg-lagerhaus  { --lg: 1.14; }
.lg-kellys     { --lg: 0.90; }
.lg-raiffeisen { --lg: 0.82; }
.lg-muenze     { --lg: 1.34; }
.lg-skiaustria { --lg: 1.04; }
.lg-smile      { --lg: 1.00; }
.lg-mg         { --lg: 1.13; }
.lg-mitsubishi { --lg: 1.34; }
.lg-jeep       { --lg: 0.88; }
.lg-denzel     { --lg: 0.99; }
.lg-myplace    { --lg: 0.98; }
@keyframes logoband-lauf { to { transform: translateX(-50%); } }
@media (hover: hover) {
  .logoband-marquee:hover .logoband-reihe { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .logoband-reihe {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    row-gap: clamp(1.4rem, 3vh, 2.2rem);
    padding-inline: 1rem;
  }
  .logoband-reihe img:nth-child(n + 14) { display: none; }
}

/* ================= Beweis: ein Motiv wird zu allen Formaten =================
   Kurzer Bildbruch zwischen Kundenlogos und Services, derselbe Clip wie das
   Kern-Motiv in der Skalierung, nur als fertiger Film statt Live-Umlaufbahn.
   Haengt still im Hintergrund, die Zeile darueber traegt den Gedanken weiter. */
.beweis {
  position: relative;
  height: clamp(300px, 58vh, 580px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: #101014;
}
.beweis-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.beweis-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 9, 0.1) 0%, rgba(7, 7, 9, 0.55) 62%, rgba(7, 7, 9, 0.92) 100%);
}
.beweis-zeile {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--space-m, 2.6rem) clamp(2rem, 6vh, 3.6rem);
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.6vw, 2.6rem);
  line-height: 1.08;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 30px rgba(5, 5, 6, 0.95);
}
@media (max-width: 899px) {
  .beweis { height: 42vh; }
}

/* ================= Team: stille Galerie ================= */
.team-copy {
  margin-top: var(--space-s, 1.2rem);
  max-width: 52ch;
  color: var(--c-text-sekundaer-dunkel);
}
/* Faecher statt Raster: die Koepfe liegen wie aufgefaechert uebereinander,
   jeder mit eigenem Dreh und eigener Hoehe (--r, --ty per Inline-Style).
   Gleich grosse Bilder, gleich starkes Leuchten: keiner steht vor den
   anderen, der Stapel ist nur lebendiger als ein Raster. */
.team-galerie {
  list-style: none;
  margin: var(--space-m, 2.6rem) 0 0;
  padding: clamp(1.2rem, 3vh, 2.4rem) 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.mitglied {
  position: relative;
  flex: 0 0 auto;
  width: clamp(126px, 15vw, 196px);
  margin-left: clamp(-2.4rem, -3vw, -1.1rem);
  transition: z-index 0s;
}
.mitglied:first-child { margin-left: 0; }
.mitglied:nth-child(1) { z-index: 1; }
.mitglied:nth-child(2) { z-index: 2; }
.mitglied:nth-child(3) { z-index: 3; }
.mitglied:nth-child(4) { z-index: 4; }
.mitglied:nth-child(5) { z-index: 5; }
.mitglied:hover, .mitglied:focus-within { z-index: 10; }
/* Ruhiger Stapel: die Teamfotos bleiben ohne Mausverhalten (siehe
   variante-b.css), der Dreh ist ein fester Stand, kein Hover-Effekt. */
.mitglied-bild {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(245, 245, 243, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transform: rotate(var(--r, 0deg)) translateY(var(--ty, 0px));
  transform-origin: 50% 100%;
}
.mitglied-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-name {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-farbe);
  text-shadow: 0 0 22px color-mix(in srgb, var(--m-farbe) 45%, transparent);
  text-align: center;
}
.m-rolle {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--c-text-sekundaer-dunkel);
  text-align: center;
}
@media (max-width: 899px) {
  .team-galerie {
    flex-direction: column;
    align-items: center;
    padding-block: 0.6rem;
  }
  .mitglied {
    width: min(64vw, 240px);
    margin-left: 0;
    margin-top: clamp(-3.2rem, -12vw, -2rem);
  }
  .mitglied:first-child { margin-top: 0; }
  .mitglied-bild { transform: rotate(var(--r, 0deg)); }
}

/* ================= Positionierung ================= */
/* Der Glow sitzt tiefer in der Sektion, sonst schneidet ihn die obere
   Sektionskante als harte Linie ab. */
#positionierung {
  --ak: var(--c-blau);
  background:
    radial-gradient(48% 38% at 72% 58%, color-mix(in srgb, var(--ak) 11%, transparent), transparent 72%),
    radial-gradient(34% 26% at 14% 66%, color-mix(in srgb, var(--ak) 6%, transparent), transparent 72%);
}
.pos-headline {
  font-size: clamp(1.6rem, 5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
.pos-copy {
  margin-top: var(--space-s, 1.4rem);
  max-width: 58ch;
  color: var(--c-text-sekundaer-dunkel);
}
/* Vier Haltungssaetze als eigene Karten, jede in einer Akzentfarbe */
.pos-chips {
  list-style: none;
  padding: 0;
  margin: var(--space-m, 2.6rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.pos-chips li {
  --pf: var(--c-blau);
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(96px, 11vw, 132px);
  padding: clamp(0.9rem, 1.6vw, 1.3rem);
  border-radius: 16px;
  border: 1px solid rgba(245, 245, 243, 0.12);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--pf) 16%, transparent), transparent 62%),
    rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: clamp(0.82rem, 1.15vw, 0.98rem);
  line-height: 1.35;
  color: var(--c-text-hell);
  transition: border-color 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
}
.pos-chips li::before {
  content: '';
  position: absolute;
  left: clamp(0.9rem, 1.6vw, 1.3rem);
  top: clamp(0.9rem, 1.6vw, 1.3rem);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pf);
  box-shadow: 0 0 16px var(--pf);
}
.pos-chips li:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pf) 55%, transparent);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--pf) 22%, transparent);
}
.pos-chips li:nth-child(1) { --pf: var(--c-peach); }
.pos-chips li:nth-child(2) { --pf: var(--c-pink); }
.pos-chips li:nth-child(3) { --pf: var(--c-blau); }
.pos-chips li:nth-child(4) { --pf: var(--c-cyan); }
@media (max-width: 899px) {
  .pos-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= System: zwei Spuren ================= */
#system { --ak: var(--c-blau); }
.sys-headline {
  font-size: clamp(1.6rem, 3.8vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
.sys-copy {
  margin-top: var(--space-s, 1.4rem);
  max-width: 58ch;
  color: var(--c-text-sekundaer-dunkel);
}
.spuren {
  position: relative;
  margin-top: clamp(2.6rem, 6vh, 4.5rem);
  padding-bottom: 5.5rem; /* Platz fuer die Rueckfluss-Leitung */
}
.spuren-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.spuren-svg .sp-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.spuren-raster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 1rem) clamp(0.5rem, 1.1vw, 1.1rem);
  align-items: stretch;
}
.knoten {
  position: relative;
  padding: clamp(0.8rem, 1.1vw, 1.1rem);
  border-radius: 14px;
  border: 1px solid rgba(245, 245, 243, 0.12);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.knoten.mensch {
  border-color: rgba(243, 241, 237, 0.24);
  box-shadow: 0 18px 50px rgba(243, 241, 237, 0.07);
}
.knoten.ai {
  border-color: color-mix(in srgb, var(--c-blau) 40%, transparent);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--c-blau) 16%, transparent);
}
.knoten-marke {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border-radius: 5px;
  margin-bottom: 0.6rem;
}
.knoten.mensch .knoten-marke { background: var(--c-text-hell); color: #131316; }
.knoten.ai .knoten-marke { border: 1px solid var(--c-blau); color: var(--c-blau); }
.knoten h3 {
  font-family: var(--font-basis, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 0.35rem;
  color: var(--c-text-hell);
}
.knoten p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(243, 241, 237, 0.62);
}
.station {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding-block: clamp(2.2rem, 5vh, 3.6rem);
  text-align: center;
}
.st-nr {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--c-blau);
}
.st-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-hell);
}
.spuren-legende {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  margin-top: clamp(3.4rem, 7vh, 5rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 241, 237, 0.42);
}
.spuren-legende .lg { display: inline-flex; align-items: center; gap: 0.5em; }
.spuren-legende .lg::before {
  content: '';
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.spuren-legende .mensch { color: rgba(243, 241, 237, 0.72); }
.spuren-legende .ai { color: var(--c-blau); }
.spuren-legende .feedback { color: var(--c-peach); }

@media (max-width: 899px) {
  .spuren-raster {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .station {
    order: calc(var(--i) * 3);
    padding-block: 1.6rem 0.8rem;
    align-items: flex-start;
    text-align: left;
  }
  .knoten.mensch { order: calc(var(--i) * 3 + 1); }
  .knoten.ai { order: calc(var(--i) * 3 + 2); margin-top: 0.5rem; }
  /* Verbinder zwischen Mensch und AI */
  .knoten.mensch::after {
    content: '';
    position: absolute;
    left: 1.6rem;
    bottom: -0.5rem;
    width: 1px;
    height: 0.5rem;
    background: var(--c-blau);
    opacity: 0.5;
  }
  .spuren-legende { margin-top: 2.4rem; }
}

/* ================= Werkproben: Bilder kommen entgegen ================= */
#werkproben { --ak: var(--c-peach); padding-bottom: 0; }
.werk-kopf { text-align: center; }
.werk-headline {
  font-size: clamp(1.6rem, 3.8vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
.werk-copy {
  margin-top: var(--space-s, 1.4rem);
  margin-inline: auto;
  max-width: 58ch;
  color: var(--c-text-sekundaer-dunkel);
}
.flug {
  position: relative;
  height: 100svh;
  margin-top: clamp(1.6rem, 4vh, 3rem);
  overflow: hidden;
}
.flug-raum {
  position: absolute;
  inset: 0;
  perspective: 900px;
  transform-style: preserve-3d;
}
.flug-bild {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  margin: 0;
  width: clamp(150px, 15vw, 260px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(245, 245, 243, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
  will-change: transform, opacity;
}
.flug-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .flug { height: 78svh; }
  .flug-bild { width: clamp(120px, 34vw, 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .flug { height: auto; padding-block: 1rem; }
  .flug-raum { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; perspective: none; }
  .flug-bild { position: static; width: auto; }
}

/* ================= Merch: Slogan-Ticker und Bilderband =================
   Der Ticker laeuft nach links, die Bilder laufen ihm entgegen. Beide im
   selben Tempo, die Dauer setzt merch.js aus der Laufbreite. */
/* schlaegt die id-Regel aus stil-c3.css, die #merch auf Pink setzt */
#merch.merch-klein { --ak: var(--c-blau); }
.merch-ticker {
  margin-top: clamp(1rem, 2.5vh, 1.8rem);
  overflow: hidden;
  padding-block: 0.4rem;
}
.merch-ticker-reihe {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: merch-links 40s linear infinite;
}
.merch-ticker-reihe span {
  font-family: var(--font-headline, 'Eurostile Extended Black', 'Michroma', sans-serif);
  font-size: clamp(1.5rem, 5.2vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 241, 237, 0.4);
}
.merch-ticker-reihe span:nth-child(even) {
  -webkit-text-stroke-color: color-mix(in srgb, var(--c-blau) 75%, transparent);
}
.merch-band {
  margin-top: clamp(1.2rem, 3vh, 2.2rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.merch-reihe {
  display: flex;
  gap: clamp(0.7rem, 1.4vw, 1.2rem);
  width: max-content;
  padding-right: clamp(0.7rem, 1.4vw, 1.2rem);
  animation: merch-rechts 40s linear infinite;
}
@keyframes merch-links { to { transform: translateX(-50%); } }
@keyframes merch-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Nur die Bilder halten unter dem Zeiger an, der Ticker laeuft durch */
@media (hover: hover) {
  .merch-band:hover .merch-reihe { animation-play-state: paused; }
}
.merch-stueck {
  position: relative;
  flex: 0 0 auto;
  width: clamp(170px, 19vw, 300px);
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(245, 245, 243, 0.1);
  background: rgba(255, 255, 255, 0.035);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.merch-stueck:hover,
.merch-stueck:focus-visible {
  border-color: color-mix(in srgb, var(--c-blau) 55%, transparent);
  box-shadow: 0 22px 60px color-mix(in srgb, var(--c-blau) 24%, transparent);
}
.merch-stueck img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s ease;
}
.merch-stueck:hover img { transform: scale(1.05); }
.ms-schild {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 6, 0.9));
}
.ms-slogan {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--c-text-hell);
}
.ms-art {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 241, 237, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .merch-reihe, .merch-ticker-reihe { animation: none; }
  .merch-band, .merch-ticker { overflow-x: auto; }
}

/* ================= Lupe: ein Stueck gross ================= */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 4, 6, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
/* display: grid schlaegt sonst das hidden-Attribut, dann faengt die
   geschlossene Lupe alle Klicks der Seite ab */
.lupe[hidden] { display: none; }
.lupe.offen { opacity: 1; }
.lupe-bild {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.94);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.lupe.offen .lupe-bild { transform: scale(1); }
.lupe-bild img {
  width: auto;
  max-width: min(760px, 100%);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(245, 245, 243, 0.14);
}
.lupe-bild figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding-top: 0.9rem;
}
.lupe-bild .ms-slogan { font-size: 0.86rem; }
.lupe-zu {
  position: absolute;
  top: clamp(0.8rem, 2.5vw, 1.8rem);
  right: clamp(0.8rem, 2.5vw, 1.8rem);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(245, 245, 243, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-text-hell);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.lupe-zu:hover, .lupe-zu:focus-visible {
  border-color: var(--c-blau);
  background: rgba(255, 255, 255, 0.1);
}
.lupe-zu svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body.lupe-offen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lupe, .lupe-bild { transition: none; }
  .lupe { opacity: 1; }
  .lupe-bild { transform: none; }
}

/* ================= Skalierung: ein Kern, hundert Assets ================= */
#skalierung { --ak: var(--c-blau); padding-top: 0; }
.kern-buehne {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Die Formate laufen auf drei Bahnen um den Kern. Lage und Breite setzt
   kern.js, die Breite nach Flaeche statt nach Kante, damit ein Banner und
   ein Reel denselben visuellen Wert haben. Sie liegen hinter dem Motiv
   und unter Headline und Copy. */
.kern-satelliten { position: absolute; inset: 0; z-index: 2; }
.kern-bahnen { position: absolute; inset: 0; width: 100%; height: 100%; }
.kern-bahnen ellipse { fill: none; stroke: rgba(105, 170, 255, 0.22); stroke-width: 1; }
.kern-satellit {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: var(--v);
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(245, 245, 243, 0.16);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.7);
  will-change: transform, opacity;
}
.kern-satellit img { width: 100%; height: 100%; object-fit: cover; }
.kern-satellit::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem 0.4rem 0.28rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(243, 241, 237, 0.75);
  background: linear-gradient(180deg, transparent, rgba(5, 5, 6, 0.85));
}
/* Kein eigener Stapelkontext: Motiv, Formate und Text sollen sich
   ineinander schieben koennen. Die Reihenfolge setzen die Kinder. */
.kern-mitte {
  position: relative;
  z-index: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.4rem, 1.1vh, 0.9rem);
}
.kern-motiv {
  position: relative;
  /* Der Kern liegt vor den Bahnen: die Formate ziehen hinter ihm durch */
  z-index: 4;
  /* 98vh deckelt die Hoehe, damit das 16:9-Motiv auf flachen Fenstern passt */
  width: min(clamp(340px, 52vw, 820px), 98vh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(245, 245, 243, 0.18);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85);
}
.kern-motiv img { width: 100%; height: 100%; object-fit: cover; }
/* Die Formate ziehen hinter dem Text durch. Damit die Zeilen tragen,
   liegt ein weit auslaufender Schleier dahinter, kein Kasten. */
.kern-text::before {
  content: '';
  position: absolute;
  inset: -340% -42% -560% -42%;
  z-index: -1;
  /* Zwei Verlaeufe uebereinander: ein enger, fast deckender Kern genau
     hinter der Zeile, darunter ein weiter, weicher Hof. Der Kern macht
     die Schrift lesbar, der Hof verhindert eine sichtbare Kante. */
  background:
    radial-gradient(42% 30% at 50% 50%,
      rgba(5, 5, 6, 0.98) 0%,
      rgba(5, 5, 6, 0.95) 42%,
      rgba(5, 5, 6, 0.6) 68%,
      rgba(5, 5, 6, 0) 88%),
    radial-gradient(72% 54% at 50% 50%,
      rgba(5, 5, 6, 0.78) 0%,
      rgba(5, 5, 6, 0.34) 52%,
      rgba(5, 5, 6, 0) 80%);
  pointer-events: none;
}
.kern-text {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 1.2em;
  margin: 0;
  font-family: var(--font-headline, 'Eurostile Extended Black', 'Michroma', sans-serif);
  font-size: clamp(1.3rem, 3.2vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--c-text-hell);
  text-shadow: 0 2px 30px rgba(5, 5, 6, 0.9);
}
.kern-text .kt { grid-area: 1 / 1; text-align: center; }
/* Der zweite Satz traegt die Aussage der Sektion und steht deshalb gross */
.kern-text .kt.zwei {
  font-size: clamp(1.7rem, 5.2vw, 4.4rem);
  line-height: 0.94;
  /* Weiss nach Blau wie bei den Service-Titeln. Der Block ist breiter,
     deshalb haelt das Weiss laenger, sonst graut die Mitte aus. */
  background: linear-gradient(100deg, #fff 52%, var(--c-blau));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Der geerbte Schatten legt sich sonst ueber die Fuellung und graut sie aus */
  text-shadow: none;
}
.kern-copy {
  position: relative;
  z-index: 3;
  margin: 0;
  max-width: 54ch;
  text-align: center;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: rgba(243, 241, 237, 0.82);
  text-shadow: 0 2px 24px rgba(5, 5, 6, 0.95);
}
@media (max-width: 899px) {
  .kern-buehne { height: auto; padding-block: clamp(2.4rem, 6vh, 4rem); }
  .kern-satelliten {
    position: static;
    perspective: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 1.6rem;
    order: 2;
  }
  .kern-buehne { display: flex; flex-direction: column; }
  .kern-mitte { order: 1; }
  .kern-satellit {
    position: static;
    width: auto;
    aspect-ratio: 1 / 1;
    transform: none;
  }
  .kern-motiv { width: min(86vw, 400px); }
  /* Ohne Pin gibt es keinen Textwechsel, deshalb stehen beide Zeilen
     untereinander statt uebereinander */
  .kern-text { display: block; text-align: center; }
  .kern-text .kt { display: block; }
  .kern-text .kt.eins { margin-bottom: 0.22em; }
}

/* ================= Team: Netzwerk unter den Portraets ================= */
.mitglied {
  --m-farbe: var(--c-peach);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--m-farbe) 45%, transparent);
}
.netz {
  position: relative;
  height: clamp(300px, 34vh, 340px);
  margin-top: 0;
}
.netz-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
@media (max-width: 899px) {
  .netz { height: 260px; }
}

/* Aktive Station: der Laeufer laesst sie kurz aufleuchten */
.knoten, .station { transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease; }
.knoten.mensch.aktiv {
  border-color: rgba(243, 241, 237, 0.6);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 22px 60px rgba(243, 241, 237, 0.16);
}
.knoten.ai.aktiv {
  border-color: color-mix(in srgb, var(--c-blau) 85%, transparent);
  background: rgba(105, 170, 255, 0.09);
  box-shadow: 0 22px 60px color-mix(in srgb, var(--c-blau) 34%, transparent);
}
.station .st-nr, .station .st-name { transition: color 0.5s ease, text-shadow 0.5s ease; }
.station.aktiv .st-nr { color: var(--c-text-hell); text-shadow: 0 0 16px var(--c-blau); }
.station.aktiv .st-name { color: #fff; text-shadow: 0 0 18px rgba(105, 170, 255, 0.7); }

/* Zweite Tag-Zeile der Service-Karten etwas leiser */
.bk-tag.leise { border-color: rgba(245, 245, 243, 0.28); color: rgba(243, 241, 237, 0.6); }
.bk-zeile + .bk-zeile { margin-top: 0.7rem; }

/* ================= Services: Liste und farbiges Detail ================= */
.dienste {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2.6rem);
}
.dienste-liste { list-style: none; margin: 0; padding: 0; }
.dienste-liste button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(245, 245, 243, 0.1);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  font-size: clamp(0.95rem, 1.6vw, 1.24rem);
  font-weight: 300;
  color: rgba(243, 241, 237, 0.42);
  transition: color 0.3s, padding-left 0.3s, border-color 0.3s;
}
.dienste-liste button span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(243, 241, 237, 0.26);
  transition: color 0.3s;
}
.dienste-liste li.aktiv button {
  color: var(--c-text-hell);
  padding-left: 0.6rem;
  border-bottom-color: var(--dienst);
}
.dienste-liste li.aktiv button span { color: var(--dienst); }
.dienste-detail { position: relative; }
.d-ziffer {
  position: absolute;
  right: 0;
  top: -3.4rem;
  font-family: var(--font-headline, 'Eurostile Extended Black', 'Michroma', sans-serif);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1;
  color: color-mix(in srgb, var(--dienst) 22%, transparent);
  pointer-events: none;
}
.d-titel {
  font-size: clamp(1.6rem, 5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0 0 1.2rem;
  background: linear-gradient(100deg, #fff 20%, var(--dienst));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.d-text {
  margin: 0 0 1.5rem;
  font-size: clamp(0.95rem, 1.45vw, 1.12rem);
  line-height: 1.65;
  color: rgba(243, 241, 237, 0.78);
  max-width: 44ch;
}
.d-teile {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--dienst) 45%, transparent);
}
.d-teile span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--dienst) 80%, #f3f1ed);
  padding: 0.2rem 0;
}
@media (max-width: 899px) {
  .dienste { grid-template-columns: 1fr; gap: 2rem; }
  .d-ziffer { top: -2.4rem; font-size: clamp(2.4rem, 14vw, 4rem); }
}

/* Statt Shader-Rauschen: zwei weiche Glows, die die Farbe der aktiven
   Leistung annehmen. Sonst bleibt der Grund schwarz. */
.services-buehne {
  --dienst: var(--c-peach);
  position: relative;
  isolation: isolate;
}
.services-glut {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.services-glut::before,
.services-glut::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--dienst);
  filter: blur(90px);
  transition: background 0.6s ease;
}
.services-glut::before {
  right: 4%;
  top: 2%;
  width: 44%;
  height: 56%;
  opacity: 0.14;
}
.services-glut::after {
  left: 0;
  bottom: 4%;
  width: 30%;
  height: 42%;
  opacity: 0.07;
}
@media (max-width: 899px) {
  .services-glut::before { width: 70%; height: 34%; }
  .services-glut::after { width: 55%; height: 26%; }
}

/* ================= Jobs unter dem Merch ================= */
.jobs {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 2rem);
  border-radius: 16px;
  border: 1px solid rgba(245, 245, 243, 0.13);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-decoration: none;
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.jobs:hover,
.jobs:focus-visible {
  border-color: color-mix(in srgb, var(--c-blau) 60%, transparent);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--c-blau) 22%, transparent);
}
.jobs-titel {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-blau);
}
.jobs-text {
  flex: 1 1 auto;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--c-text-sekundaer-dunkel);
}
.jobs-pfeil {
  flex: 0 0 auto;
  width: 26px;
  color: var(--c-blau);
  transition: transform 0.4s ease;
}
.jobs-pfeil svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.jobs:hover .jobs-pfeil { transform: translateX(6px); }
@media (max-width: 699px) {
  .jobs { flex-wrap: wrap; }
  .jobs-text { flex: 1 1 100%; order: 3; }
}