/* ============================================================
   VARIANTE B · Aenderungen gegenueber index-ebenen.html
   1 Netzwerk-Grafik unter dem Team ist raus (im Markup)
   2 Team-Headline bricht nach dem Beistrich (im Markup)
   3 Team-Copy laeuft ueber zwei Zeilen
   4 Werkproben ohne Kopf, groessere Flugbilder, danach das
     Video als Schluss mit Kontaktzeile
   ============================================================ */

/* ---------- 3 Team-Copy auf zwei Zeilen ---------- */
/* Das Mass ist so gesetzt, dass der Satz auf breiten Schirmen
   genau zweimal umbricht. Darunter greift der normale Fluss. */
.team-copy { max-width: 94ch; }
@media (max-width: 1199px) { .team-copy { max-width: 62ch; } }

/* ---------- 4 Werkproben: ohne Kopf, groesser ---------- */
#werkproben { padding-top: 0; }
.flug { margin-top: 0; }
/* Nahflug: jedes Bild kommt fast bildschirmfuellend heran, dafuer
   laeuft der Takt doppelt so lang. Die Kacheln nehmen das Verhaeltnis
   des jeweiligen Bildes an, sonst wuerde ein Querformat in ein
   Hochformat beschnitten. Takt und Flugweite stehen als data-Werte
   am Halter im Markup. */
.flug-bild { width: clamp(560px, 62vw, 1120px); aspect-ratio: var(--v, 16 / 9); }
@media (max-width: 899px) { .flug-bild { width: clamp(280px, 86vw, 520px); } }

/* ---------- 4 Der Schluss: Video, Kontaktzeile und Fuss in einem ----------
   Die Pflichtangaben standen frueher als eigener Fussbereich unter dem
   Video auf schwarzem Grund. Jetzt sitzen sie im Bild, in einer
   Glasleiste. Damit endet die Seite mit dem Film und nicht mit einem
   Datenblock.

   Das Glas ist das Rezept der vier Kaesten aus der Agenten-Sektion:
   ein Verlauf fuer den Lichteinfall ueber dunklem Grund, Weichzeichner
   auf das, was dahinter laeuft, und Innenschatten fuer die Kante. */
#schluss { position: relative; }
/* Die Buehne hat das Seitenverhaeltnis des Films. Mit einer gesetzten
   Hoehe und object-fit: cover war das Bild oben und unten beschnitten. */
.schluss-halt {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #050506;
}
.schluss-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.schluss-inhalt { position: relative; z-index: 2; height: 100%; }
/* Die Abdunkelung liegt ueber der ganzen Buehne, nicht hinter dem Satz.
   Ein Verlauf in einem schmalen Kasten ist an dessen Kante noch nicht
   bei null und setzt dort eine sichtbare Linie. Die Radien sind deshalb
   ausgemessen: 70 Prozent der Bildbreite, 42 Prozent der Bildhoehe. */
.schluss-inhalt::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 42% at 50% 50%,
              rgba(5, 5, 6, 0.72) 0%, rgba(5, 5, 6, 0.5) 38%,
              rgba(5, 5, 6, 0.18) 70%, rgba(5, 5, 6, 0) 100%);
}
/* Der Film traegt oben links die AI-Kennzeichnung. Der Satz steht in der
   Bildmitte und damit weit genug davon weg. */
/* Die Lage sitzt hier, nicht am Textblock darin: js/variante-b.js blendet
   .schluss-text mit einem eigenen transform ein und wuerde die
   Zentrierung sonst ueberschreiben. */
.schluss-mitte {
  position: absolute; z-index: 1;
  left: 50%; top: 50%; transform: translate(-50%, -48%);
  text-align: center;
  width: min(100% - 2 * var(--space-m), 1280px);
}
.schluss-satz {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.4vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  margin: 0;
  /* Kein Schriftschatten: die Abdunkelung dahinter macht die Arbeit,
     beide zusammen arbeiten gegeneinander. */
}
.schluss-mail {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 4.6vw, 3.4rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--gradient-spektrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.schluss-mail:hover { filter: drop-shadow(0 0 26px rgba(29, 189, 212, 0.55)); }

/* ---- Die Leiste im Bild ---- */
.schluss-leiste {
  position: absolute; z-index: 1;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(1.2rem, 3vh, 2rem);
  width: min(100% - 2 * var(--space-m), 1280px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: center;
  border-radius: 26px;
  padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.7rem);
  background:
    linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 70%),
    rgba(13, 13, 16, 0.72);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 40px 90px rgba(0,0,0,.5);
}
.schluss-adresse {
  font-style: normal; margin: 0;
  font-size: clamp(0.72rem, 0.85vw, 0.8rem); line-height: 1.5;
  color: var(--c-text-sekundaer-dunkel);
}
.schluss-adresse .firma { display: block; color: var(--c-text-sekundaer-dunkel); margin-bottom: 0.35rem; }
.schluss-adresse a { color: inherit; text-decoration: none; }
.schluss-adresse a:hover { color: var(--c-text-hell); }
.schluss-recht {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem 1.1rem;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.78vw, 0.74rem);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.schluss-recht a { color: rgba(243, 241, 237, 0.55); text-decoration: none; }
.schluss-recht a:hover { color: var(--c-text-hell); }

/* ---- Die drei Zeichen ----
   Gerahmte Marken in der Strichstaerke der uebrigen Zeichen der Seite.
   Der Rahmen haelt die drei zusammen: ein "f" und ein "in" ohne ihn
   waeren zwei Buchstaben, kein Satz. */
.schluss-sozial { display: flex; align-items: center; gap: clamp(0.5rem, 0.9vw, 0.8rem); }
.schluss-sozial a {
  display: grid; place-items: center;
  width: clamp(38px, 3.4vw, 46px); height: clamp(38px, 3.4vw, 46px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background var(--t-mittel) var(--ease-out), transform var(--t-mittel) var(--ease-out);
}
.schluss-sozial a:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.schluss-sozial a:focus-visible { outline: 2px solid rgba(243, 241, 237, 0.8); outline-offset: 3px; }
.schluss-sozial svg {
  width: 55%; height: 55%; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Das Spektrum ist gedrittelt und laeuft ueber alle drei durch. */
.schluss-sozial a:nth-child(1) svg { stroke: url(#wz-v1); }
.schluss-sozial a:nth-child(1) svg .voll { fill: url(#wz-v1); }
.schluss-sozial a:nth-child(2) svg { stroke: url(#wz-v2); }
.schluss-sozial a:nth-child(2) svg .voll { fill: url(#wz-v2); }
.schluss-sozial a:nth-child(3) svg { stroke: url(#wz-v3); }
.schluss-sozial a:nth-child(3) svg .voll { fill: url(#wz-v3); }
.schluss-sozial svg .voll { stroke: none; }
.schluss-sozial a:hover svg { filter: brightness(1.2); }

@media (prefers-reduced-motion: reduce) {
  .schluss-video { opacity: 1; }
  .schluss-sozial a, .schluss-sozial a:hover svg { transition: none; filter: none; }
}
/* Schmal: eine 16:9-Buehne waere rund 220 px hoch, da hat keine Leiste
   Platz. Der Film behaelt sein Verhaeltnis und steht oben, die Angaben
   folgen darunter. */
@media (max-width: 800px) {
  .schluss-halt { aspect-ratio: auto; }
  .schluss-video { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .schluss-inhalt { height: auto; display: grid; gap: clamp(1.2rem, 3vh, 2rem);
                    padding-block: clamp(1.6rem, 5vh, 3rem); }
  .schluss-inhalt::before { display: none; }
  .schluss-mitte, .schluss-leiste {
    position: relative; left: auto; bottom: auto; top: auto; transform: none;
    margin-inline: auto; text-align: left;
  }
  .schluss-leiste { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .schluss-recht { justify-content: flex-start; }
}


/* ---------- Logoband: kein Mausverhalten, laeuft durch ---------- */
/* Ein einziges pointer-events schaltet beide Effekte ab: das Anhalten
   beim Ueberfahren und das Aufhellen des einzelnen Logos. */
.logoband-marquee,
.logoband-reihe,
.logoband-reihe img { pointer-events: none; }
.logoband-marquee:hover .logoband-reihe { animation-play-state: running; }

/* ---------- Teamfotos: kein Mausverhalten ---------- */
.mitglied-bild { transition: none; }
.mitglied-bild img { transform: none; transition: none; }
.mitglied:hover .mitglied-bild img,
.mitglied:focus-within .mitglied-bild img { transform: none; }
.mitglied:hover .mitglied-bild,
.mitglied:focus-within .mitglied-bild {
  border-color: rgba(245, 245, 243, 0.12);
  box-shadow: none;
}