/* =========================================================================
   Connect · Der Feed (Christian, 19.10.2026)
   Die Clips laufen so, wie sie wirklich wirken: in einem Handy, in der Oberfläche der App,
   durchgeblättert mit einem Wisch nach oben. Am Rechner gleitet das Handy über die Seite,
   am Handy wird das Gerät des Besuchers selbst zum Feed.
   Alle Maße im Bildschirm laufen in „u": 1 u = ein Punkt eines 921 × 2000 großen Handy-Bildschirms
   (so groß sind die Bildschirmfotos, an denen die Knöpfe der Filme eingemessen wurden).
   ========================================================================= */
.feed { position: fixed; inset: 0; z-index: 98; display: grid; place-items: center; overscroll-behavior: contain; }
.feed[hidden] { display: none; }
.feed__grund {
  position: absolute; inset: 0; background: rgba(9, 9, 9, 0.95);
  backdrop-filter: blur(14px) saturate(0.8); -webkit-backdrop-filter: blur(14px) saturate(0.8);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
/* ein weicher Lichtkegel hinter dem Handy, wie auf der Bühne von „Hauptwort" */
.feed__grund::after { content: ""; position: absolute; inset: 0; background: radial-gradient(38% 52% at 50% 50%, rgba(247, 247, 245, 0.075), transparent 70%); }
.feed.da .feed__grund { opacity: 1; }
.feed-an .cursor-punkt { z-index: 99; }

/* ---------- das Gerät ---------- */
.handy {
  --rahmen: calc(var(--u) * 26);
  position: relative; z-index: 1; padding: var(--rahmen);
  border-radius: calc(var(--u) * 141);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.1)),
    linear-gradient(180deg, #2c2c2f, #151517 45%, #232326);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 3) rgba(255, 255, 255, 0.14),
    inset 0 0 0 calc(var(--u) * 8) #0b0b0c,
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 calc(var(--u) * 80) calc(var(--u) * 220) calc(var(--u) * -40) rgba(0, 0, 0, 0.95),
    0 calc(var(--u) * 20) calc(var(--u) * 60) rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(46px) scale(0.965);
  transition: opacity 0.55s var(--ease), transform 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.08);
}
.feed.da .handy { opacity: 1; transform: none; }
/* Tasten an der Seite */
.handy__taste { position: absolute; width: calc(var(--u) * 9); border-radius: calc(var(--u) * 5); background: linear-gradient(90deg, #1a1a1c, #3a3a3e 50%, #1a1a1c); }
.handy__taste--aktion { left: calc(var(--u) * -6); top: calc(var(--u) * 330); height: calc(var(--u) * 70); }
.handy__taste--laut { left: calc(var(--u) * -6); top: calc(var(--u) * 470); height: calc(var(--u) * 130); }
.handy__taste--leise { left: calc(var(--u) * -6); top: calc(var(--u) * 630); height: calc(var(--u) * 130); }
.handy__taste--an { right: calc(var(--u) * -6); top: calc(var(--u) * 560); height: calc(var(--u) * 200); }

.schirm {
  position: relative; width: calc(var(--u) * 921); height: calc(var(--u) * var(--hoehe, 2000));
  border-radius: calc(var(--u) * 115); overflow: hidden; background: #000; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; touch-action: none; user-select: none; -webkit-user-select: none;
  isolation: isolate; cursor: grab;
}
.schirm.zieht { cursor: grabbing; }
/* Glas: ein kaum sichtbarer Schimmer über allem */
.schirm::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.035));
}
.insel { position: absolute; z-index: 25; left: 50%; top: calc(var(--u) * 24); width: calc(var(--u) * 262); height: calc(var(--u) * 76); margin-left: calc(var(--u) * -131); border-radius: 999px; background: #000; }

/* ---------- Statuszeile + „Für dich" (stehen still, der Feed läuft darunter durch) ---------- */
.status { position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: calc(var(--u) * 120); pointer-events: none; }
.status__zeit { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 68); transform: translate(-50%, -50%); font-size: calc(var(--u) * 37); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.status__rechts { position: absolute; right: calc(var(--u) * 86); top: calc(var(--u) * 68); transform: translateY(-50%); display: flex; align-items: center; gap: calc(var(--u) * 14); }
.status__rechts svg { display: block; height: calc(var(--u) * 26); width: auto; fill: #fff; }
.status__rechts .akku { height: calc(var(--u) * 30); }
.reiter { position: absolute; z-index: 20; left: 0; right: 0; top: calc(var(--u) * (var(--oben) + 46)); height: calc(var(--u) * 70); display: grid; place-items: center; pointer-events: none; }
.reiter__wort { position: relative; font-size: calc(var(--u) * 35); font-weight: 700; letter-spacing: -0.005em; text-shadow: 0 1px calc(var(--u) * 6) rgba(0, 0, 0, 0.35); }
.reiter__wort::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -14); width: calc(var(--u) * 50); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -25); border-radius: 9px; background: #fff; }
.schirm__zurueck { display: none; }

/* ---------- untere Leiste der App (neutral, ohne Markenfarben) ---------- */
.leiste {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(var(--u) * var(--leiste, 174));
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding-top: calc(var(--u) * 18);
  background: #000; border-top: 1px solid rgba(255, 255, 255, 0.07); pointer-events: none;
}
.leiste[hidden] { display: none; }
.leiste span { display: grid; justify-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 25); font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.leiste svg { width: calc(var(--u) * 50); height: calc(var(--u) * 50); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.leiste .an svg { fill: #fff; }
.leiste .plus { align-self: center; margin-top: calc(var(--u) * 4); width: calc(var(--u) * 96); height: calc(var(--u) * 60); border-radius: calc(var(--u) * 16); background: #fff; display: grid; place-items: center; }
.leiste .plus svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); stroke: #000; stroke-width: 3; }

/* ---------- die Spur: alle Clips untereinander, ein Clip = ein ganzer Bildschirm ---------- */
.spur { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.spur.gleitet { transition: transform 0.56s cubic-bezier(0.22, 0.9, 0.24, 1); }
.clip { position: absolute; left: 0; right: 0; height: calc(var(--u) * var(--hoehe, 2000)); overflow: hidden; background: #000; }
.clip__film { position: absolute; left: 0; top: calc(var(--u) * var(--oben)); width: calc(var(--u) * 921); height: calc(var(--u) * 1637); background: #000; }
.clip__film img, .clip__film video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.clip__film video { z-index: 1; }
/* Lesbarkeit von Schrift auf hellen Clips, wie in der App: unten ein weicher Schatten */
.clip__film::after { content: ""; position: absolute; inset: auto 0 0 0; height: 24%; z-index: 2; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.32)); pointer-events: none; }
.clip__film::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 11%; z-index: 2; background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0)); pointer-events: none; }

/* Knopfspalte rechts: Lage je Clip in Film-Punkten (1080 × 1920), umgerechnet mit 0,8528 */
.knoepfe { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.knopf-app {
  position: absolute; left: calc(var(--u) * 857); top: calc(var(--u) * (var(--oben) + var(--y) * 0.85278));
  transform: translate(-50%, -50%); display: grid; place-items: center; color: #fff;
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, 0.32));
}
.knopf-app svg { display: block; width: calc(var(--u) * 78); height: calc(var(--u) * 78); fill: #fff; }
.knopf-app.drueckt svg, .knopf-app.drueckt .profil__bild { animation: knopf-stoss 0.62s cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes knopf-stoss { 0% { transform: scale(1); } 30% { transform: scale(1.26); } 62% { transform: scale(0.94); } 100% { transform: scale(1); } }
/* ein kurzer Lichtring, wenn der Pfeil des Films ankommt */
.knopf-app::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 120); height: calc(var(--u) * 120);
  margin: calc(var(--u) * -60) 0 0 calc(var(--u) * -60); border-radius: 50%; border: calc(var(--u) * 3) solid rgba(255, 255, 255, 0.9);
  opacity: 0; transform: scale(0.6); pointer-events: none;
}
.knopf-app.drueckt::before { animation: knopf-ring 0.9s ease-out; }
@keyframes knopf-ring { 0% { opacity: 0.85; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.5); } }
.knopf-app--herz { pointer-events: auto; cursor: pointer; padding: calc(var(--u) * 14); border-radius: 50%; }
.knopf-app--herz path { transition: fill 0.25s ease; }
.knopf-app--herz[aria-pressed="true"] path { fill: var(--rot); }
.knopf-app--herz[aria-pressed="true"]::before { border-color: var(--rot); }
.knopf-app--herz:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Profilbild mit Plus; wird „gefolgt", wird aus dem Plus ein Haken, der dann verschwindet (wie in der App) */
.profil { width: calc(var(--u) * 106); height: calc(var(--u) * 106); }
.profil__bild { width: 100%; height: 100%; border-radius: 50%; background: #222 center / cover; box-shadow: 0 0 0 calc(var(--u) * 3) #fff; }
.profil__plus {
  position: absolute; left: 50%; bottom: calc(var(--u) * -20); width: calc(var(--u) * 44); height: calc(var(--u) * 44); margin-left: calc(var(--u) * -22);
  border-radius: 50%; background: var(--rot); display: grid; place-items: center; transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.4, 1), opacity 0.4s ease 0.9s, background 0.3s;
}
.profil__plus svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.profil__plus .haken { display: none; }
.profil.gefolgt .profil__plus { background: #fff; transform: rotate(360deg); opacity: 0; }
.profil.gefolgt .profil__plus .plusz { display: none; }
.profil.gefolgt .profil__plus .haken { display: block; stroke: var(--rot); }
/* die kleine Scheibe unten rechts dreht sich, solange der Clip läuft */
.scheibe {
  position: absolute; z-index: 5; left: calc(var(--u) * 857); top: calc(var(--u) * (var(--oben) + 1626)); transform: translate(-50%, -50%);
  width: calc(var(--u) * 84); height: calc(var(--u) * 84); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #2a2a2a 0 30%, #111 31% 100%); box-shadow: 0 0 0 calc(var(--u) * 10) rgba(20, 20, 20, 0.85);
  display: grid; place-items: center;
}
.scheibe span { width: 56%; height: 56%; border-radius: 50%; background: #222 center / cover; animation: scheibe 6s linear infinite; animation-play-state: paused; }
.clip.spielt .scheibe span { animation-play-state: running; }
@keyframes scheibe { to { transform: rotate(360deg); } }

/* Name und Beschreibung unten links, Fortschritt ganz unten */
.unterzeile { position: absolute; z-index: 5; left: calc(var(--u) * 34); right: calc(var(--u) * 150); bottom: calc(var(--u) * var(--zeile-unten)); pointer-events: none; text-shadow: 0 1px calc(var(--u) * 4) rgba(0, 0, 0, 0.35); }
.unterzeile__name { font-size: calc(var(--u) * 35); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.unterzeile__text { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 31); font-weight: 400; line-height: 1.28; color: rgba(255, 255, 255, 0.95); overflow-wrap: anywhere; }
.unterzeile__text b { font-weight: 700; }
.fortschritt { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(var(--u) * var(--balken-unten)); height: calc(var(--u) * 5); background: rgba(255, 255, 255, 0.22); pointer-events: none; }
.fortschritt span { display: block; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.92); transform: scaleX(0); transform-origin: left; }

/* angehalten: ein großes Dreieck in der Mitte, wie in der App */
.pause { position: absolute; z-index: 7; left: 50%; top: calc(var(--u) * (var(--oben) + 818)); width: calc(var(--u) * 150); height: calc(var(--u) * 150); margin: calc(var(--u) * -75) 0 0 calc(var(--u) * -75); opacity: 0; transform: scale(1.3); transition: opacity 0.2s ease, transform 0.25s ease; pointer-events: none; }
.pause svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.9); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 22px rgba(0, 0, 0, 0.45)); }
.clip.angehalten .pause { opacity: 1; transform: none; }
/* Herz beim Doppeltipp */
.herzflug { position: absolute; z-index: 8; width: calc(var(--u) * 210); height: calc(var(--u) * 210); margin: calc(var(--u) * -105) 0 0 calc(var(--u) * -105); pointer-events: none; fill: var(--rot); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25)); animation: herzflug 1s cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }
@keyframes herzflug { 0% { opacity: 0; transform: scale(0.3) rotate(var(--dreh)); } 18% { opacity: 1; transform: scale(1.1) rotate(var(--dreh)); } 32% { transform: scale(0.95) rotate(var(--dreh)); } 70% { opacity: 1; transform: scale(1) rotate(var(--dreh)) translateY(0); } 100% { opacity: 0; transform: scale(1.25) rotate(var(--dreh)) translateY(calc(var(--u) * -160)); } }

/* Ton fehlt (Seite direkt per Adresse geöffnet): ein Tipp startet mit Ton */
.antippen {
  position: absolute; z-index: 9; left: 50%; top: calc(var(--u) * (var(--oben) + 818)); transform: translate(-50%, -50%);
  display: none; padding: calc(var(--u) * 26) calc(var(--u) * 44); border-radius: 999px; background: rgba(16, 16, 16, 0.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--mono); font-size: calc(var(--u) * 28); letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
}
.feed.braucht-tipp .clip.ist .antippen { display: block; animation: atmen-f 2.6s ease-in-out infinite; }
@keyframes atmen-f { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.6; } }

/* ---------- der vierte Platz: noch leer ---------- */
.clip--dein .clip__film { background: #101010; }
.clip--dein .clip__film::before, .clip--dein .clip__film::after { display: none; }
.sucher { position: absolute; inset: calc(var(--u) * 150) calc(var(--u) * 120) calc(var(--u) * 260) calc(var(--u) * 80); pointer-events: none; }
.sucher i { position: absolute; width: calc(var(--u) * 80); height: calc(var(--u) * 80); border: 0 solid rgba(247, 247, 245, 0.55); }
.sucher i:nth-child(1) { left: 0; top: 0; border-width: calc(var(--u) * 5) 0 0 calc(var(--u) * 5); }
.sucher i:nth-child(2) { right: 0; top: 0; border-width: calc(var(--u) * 5) calc(var(--u) * 5) 0 0; }
.sucher i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 calc(var(--u) * 5) calc(var(--u) * 5); }
.sucher i:nth-child(4) { right: 0; bottom: 0; border-width: 0 calc(var(--u) * 5) calc(var(--u) * 5) 0; }
.sucher b { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 40); width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: var(--rot); animation: rec 1.4s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0.15; } }
.dein { position: absolute; left: calc(var(--u) * 110); right: calc(var(--u) * 170); top: 50%; transform: translateY(-50%); color: var(--paper); font-family: var(--display); }
.dein__titel { font-size: calc(var(--u) * 118); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; }
.dein__text { margin-top: calc(var(--u) * 34); font-size: calc(var(--u) * 37); font-weight: 500; line-height: 1.28; color: rgba(247, 247, 245, 0.68); }
.dein__knopf {
  margin-top: calc(var(--u) * 52); display: inline-flex; align-items: center; border-radius: 999px; background: var(--paper); color: var(--ink);
  padding: calc(var(--u) * 26) calc(var(--u) * 46); font-family: var(--mono); font-size: calc(var(--u) * 27); text-transform: uppercase; letter-spacing: 0.16em;
  pointer-events: auto; cursor: pointer; transition: transform 0.25s var(--ease);
}
.dein__knopf:hover { transform: translateY(-2px); }
.clip--dein .knoepfe, .clip--dein .scheibe { opacity: 0.28; }
.clip--dein .profil__bild { background: #2a2a2a; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(255, 255, 255, 0.6); }

/* ---------- daneben (nur am Rechner): Nummer, Bedienung, Schließen ---------- */
.feed__seite { position: absolute; z-index: 2; top: 50%; color: var(--paper); opacity: 0; transition: opacity 0.6s var(--ease) 0.25s; pointer-events: none; }
.feed.da .feed__seite { opacity: 1; }
.feed__seite--links { right: calc(50% + var(--handy-b) / 2 + 3.2rem); transform: translateY(-50%); text-align: right; }
.feed__seite--rechts { left: calc(50% + var(--handy-b) / 2 + 3.2rem); transform: translateY(-50%); pointer-events: auto; }
.feed__kicker { color: rgba(247, 247, 245, 0.55); }
.feed__nr { display: block; margin-top: 0.35rem; font-size: 5.6rem; font-weight: 800; line-height: 0.86; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: opacity 0.3s ease; }
.feed__nr small { font-size: 0.32em; font-weight: 600; color: rgba(247, 247, 245, 0.45); letter-spacing: 0; }
.feed__wie { margin-top: 0.9rem; color: rgba(247, 247, 245, 0.55); transition: opacity 0.3s ease; }
.feed.zuletzt .feed__nr, .feed.zuletzt .feed__wie { opacity: 0; }
.feed__hinweis { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(247, 247, 245, 0.8); }
.feed__hinweis i { font-style: normal; display: inline-block; }
.feed.da .feed__hinweis i { animation: stups-hoch 2.2s var(--ease) 1.2s infinite; }
@keyframes stups-hoch { 0%, 55%, 100% { transform: none; } 66% { transform: translateY(-5px); } 78% { transform: none; } 86% { transform: translateY(-2px); } }
.feed__arten { margin-top: 0.45rem; color: rgba(247, 247, 245, 0.5); }
.feed__punkte { margin-top: 1.6rem; display: grid; gap: 0.5rem; justify-items: start; }
.feed__punkte button { position: relative; width: 3px; height: 22px; border-radius: 2px; background: rgba(247, 247, 245, 0.25); transition: background 0.3s, height 0.35s var(--ease); }
.feed__punkte button::after { content: ""; position: absolute; inset: -8px -16px; }
.feed__punkte button[aria-current="true"] { background: var(--paper); height: 34px; }
.feed__punkte button:hover { background: rgba(247, 247, 245, 0.7); }
.feed.zuletzt .feed__hinweis { opacity: 0.35; }
.feed__zu {
  position: absolute; z-index: 3; top: 1.5rem; right: var(--pad); width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; color: rgba(247, 247, 245, 0.7); background: rgba(247, 247, 245, 0.06);
  transition: background 0.2s, color 0.2s, opacity 0.5s var(--ease); opacity: 0;
}
.feed.da .feed__zu { opacity: 1; }
.feed__zu:hover { background: rgba(247, 247, 245, 0.14); color: var(--paper); }
.feed__zu svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* ---------- am Handy: kein Handy im Handy, der Bildschirm IST der Feed ---------- */
.feed.voll { place-items: stretch; }
.feed.voll .feed__grund { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
.feed.voll .feed__grund::after, .feed.voll .feed__seite, .feed.voll .feed__zu, .feed.voll .insel, .feed.voll .status, .feed.voll .handy__taste, .feed.voll .schirm::after { display: none; }
.feed.voll .handy { padding: 0; border-radius: 0; background: #000; box-shadow: none; width: 100%; height: 100%; display: grid; place-items: center; transform: translateY(6%); transition: opacity 0.4s var(--ease), transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1); }
.feed.voll.da .handy { transform: none; }
.feed.voll .schirm { border-radius: 0; cursor: auto; }
.feed.voll .schirm__zurueck {
  display: grid; place-items: center; position: absolute; z-index: 21; left: calc(var(--u) * 14); top: calc(var(--u) * (var(--oben) + 46)); transform: translateY(-50%);
  width: 44px; height: 44px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}
.feed.voll .schirm__zurueck svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }


@media (prefers-reduced-motion: reduce) {
  .spur.gleitet { transition: none; }
  .handy, .feed.voll .handy { transform: none; }

}

.feed__seite p, .feed__seite .mono { white-space: nowrap; }
.feed.zuletzt .feed__seite--links { opacity: 0; }
.clip--dein, .clip--dein .clip__film { background: #101010; }
@media (max-width: 1099px) { .feed__arten, .feed__wie { display: none; } }

/* =========================================================================
   Der kleine Fächer im Abschluss von A, B und C (Christian, 19.10.2026): drei Handys, im vorderen läuft ein Ausschnitt;
   ein Klick öffnet die Clips direkt auf der Seite
   ========================================================================= */
.zr__clip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; align-items: center; }
.zr__clip p { margin: 0; }
.zr__clip .zf, .zr__clip .zr__clip-los { text-decoration: none; padding: 0; }
.zf { --h: 78px; position: relative; width: calc(var(--h) * 1.05); height: calc(var(--h) * 1.02); cursor: pointer; }
.zf__hd {
  position: absolute; left: 50%; top: 50%; width: calc(var(--h) * 0.49); height: var(--h); margin: calc(var(--h) * -0.5) 0 0 calc(var(--h) * -0.245);
  border-radius: calc(var(--h) * 0.09); padding: calc(var(--h) * 0.02); background: linear-gradient(160deg, #3a3a3e, #121214 45%, #26262a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 14px rgba(0, 0, 0, 0.5); transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.45, 1);
}
.zf__hd > span { position: relative; display: block; width: 100%; height: 100%; border-radius: calc(var(--h) * 0.075); overflow: hidden; background: #000; }
.zf__hd img, .zf__hd video { display: block; width: 100%; height: 100%; object-fit: cover; }
.zf__hd--l { transform: translateX(-38%) rotate(-11deg) scale(0.9); filter: brightness(0.6); }
.zf__hd--r { transform: translateX(38%) rotate(10deg) scale(0.9); filter: brightness(0.6); }
.zf__hd--v { z-index: 2; }
.zf__hd--v > span { background: #f2efe6 url("clips/band.jpg") center / cover; }
.zf:hover .zf__hd--l, .zf:focus-visible .zf__hd--l { transform: translateX(-54%) rotate(-16deg) scale(0.9); }
.zf:hover .zf__hd--r, .zf:focus-visible .zf__hd--r { transform: translateX(54%) rotate(15deg) scale(0.9); }
.zf:hover .zf__hd--v, .zf:focus-visible .zf__hd--v { transform: translateY(-6%) scale(1.04); }
.zf:focus-visible { outline: none; } .zf:focus-visible .zf__hd--v { box-shadow: 0 0 0 2px var(--paper); }
.zr__clip-knoepfe { margin-top: 0.55rem !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; }
.zr__clip .zr__clip-los {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background: var(--paper); color: var(--ink);
  padding: 0.55rem 0.95rem 0.55rem 1.1rem; font-size: 0.68rem; letter-spacing: 0.14em; white-space: nowrap; transition: transform 0.25s var(--ease);
}
.zr__clip .zr__clip-los svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }
.zr__clip .zr__clip-los:hover { opacity: 1; transform: translateY(-2px); }
@media (max-width: 759px) { .zf { --h: 66px; } }
@media (prefers-reduced-motion: reduce) { .zf__hd { transition: none; } }
/* „Schreib mir" bleibt der eine helle Hauptknopf im Abschluss; „Clips ansehen" ist umrandet, damit die Rangfolge klar bleibt */
.zr__clip .zr__clip-los { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(247, 247, 245, 0.45); }
.zr__clip .zr__clip-los:hover { box-shadow: inset 0 0 0 1px var(--paper); }

/* Abschluss, zweite Runde (Christian, 19.10.2026): zwei gleich gebaute Knopf-Zeilen an derselben Kante.
   Oben „Schreib mir ↗" · „[ zur Übersicht ]", unten „Clips ansehen ▶" · „[ Clip anfragen ↗ ]".
   „Schreib mir" etwas ruhiger, die beiden Klammer-Links etwas größer und gleich gesetzt. */
.zr.zr--ende .zr__los { padding: 0.72rem 1.35rem; font-size: 0.76rem; letter-spacing: 0.14em; }
.zr.zr--ende .zr__leise { font-size: 0.8rem; letter-spacing: 0.12em; color: rgba(247, 247, 245, 0.62); padding-block: 0.7rem; white-space: nowrap; }
.zr.zr--ende .zr__leise:hover { color: var(--paper); }
.zr.zr--ende .zr__ende-knoepfe { gap: 0.4rem 1.4rem; }
.zr.zr--ende .zr__clip { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.85rem; }
.zr.zr--ende .zr__clip-knoepfe { grid-column: 1 / -1; margin: 0 !important; display: flex; align-items: center; gap: 0.4rem 1.4rem; flex-wrap: nowrap; }
.zr.zr--ende .zr__clip .zr__clip-los { padding: 0.66rem 1.2rem 0.66rem 1.3rem; font-size: 0.72rem; letter-spacing: 0.14em; }
.zr.zr--ende .zr__clip .zr__leise { text-decoration: none; }
@media (max-width: 759px) {
  .zr.zr--ende .zr__los { padding: 0.72rem 1.1rem; font-size: 0.72rem; letter-spacing: 0.1em; }
  .zr.zr--ende .zr__leise { font-size: 0.72rem; letter-spacing: 0.08em; }
  .zr.zr--ende .zr__ende-knoepfe { gap: 0.35rem 1rem; }
  /* unten beide gleich breit nebeneinander, wie im Band auf dem Schauplatz */
  .zr.zr--ende .zr__clip-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .zr.zr--ende .zr__clip .zr__clip-los { justify-content: center; padding: 0.72rem 0.6rem; font-size: 0.68rem; letter-spacing: 0.1em; }
  .zr.zr--ende .zr__clip .zr__leise { text-align: center; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(247, 247, 245, 0.2); padding: 0.72rem 0.4rem; font-size: 0.66rem; }
}
/* beide Pillen gleich breit: so stehen auch die beiden Klammer-Links genau untereinander */
@media (min-width: 760px) {
  .zr.zr--ende .zr__los, .zr.zr--ende .zr__clip .zr__clip-los { min-width: 11.2rem; justify-content: center; box-sizing: border-box; }
}
/* Wisch-Hinweis am Handy (Christian, 19.10.2026): Am Ende des ersten Clips wird das Bild abgedunkelt, mittig wischt ein Finger
   nach oben, darunter der Satz. Er bleibt stehen, bis der Besucher wischt (Tippen spielt den Clip noch einmal). */
.wisch { display: none; }
.feed.voll .wisch {
  position: absolute; inset: 0; z-index: 22; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 40);
  background: rgba(8, 8, 8, 0.55); color: #fff; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.45s ease;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}
.feed.voll .wisch.da { opacity: 1; }
.wisch__text { font-size: calc(var(--u) * 52); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 2px calc(var(--u) * 14) rgba(0, 0, 0, 0.5); }
.wisch__spur { position: relative; width: calc(var(--u) * 70); height: calc(var(--u) * 240); }
.wisch__spur::before {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * 35); width: calc(var(--u) * 10); margin-left: calc(var(--u) * -5); height: 0;
  border-radius: 99px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
}
.wisch__spur i {
  position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * 70); height: calc(var(--u) * 70); margin-left: calc(var(--u) * -35); border-radius: 50%;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 calc(var(--u) * 14) rgba(255, 255, 255, 0.22), 0 4px 18px rgba(0, 0, 0, 0.35);
}
.feed.voll .wisch.da .wisch__spur i { animation: wisch-finger 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.feed.voll .wisch.da .wisch__spur::before { animation: wisch-spur 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes wisch-finger {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  12% { transform: translateY(0) scale(1); opacity: 1; }
  58% { transform: translateY(calc(var(--u) * -170)); opacity: 1; }
  72%, 100% { transform: translateY(calc(var(--u) * -180)) scale(0.9); opacity: 0; }
}
@keyframes wisch-spur { 0%, 12% { height: 0; opacity: 1; } 58% { height: calc(var(--u) * 170); opacity: 1; } 72%, 100% { height: calc(var(--u) * 180); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed.voll .wisch.da .wisch__spur i { animation: none; transform: translateY(calc(var(--u) * -90)); } }
/* der Clip darunter tritt deutlich zurück, damit der Satz klar vorne steht */
.feed.voll .wisch { background: rgba(8, 8, 8, 0.8); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.wisch__text { font-size: calc(var(--u) * 56); }