/* Orbita-Marke auf der Cap-Freigabeseite.
 *
 * Als richtige Datei und nicht per JavaScript eingespielt: Next.js hydriert das
 * ganze Dokument samt <head>. Ein nachträglich eingefügtes <style> ändert den
 * Baum mitten im Hydrieren und löst React-Fehler #418 aus (gemessen 17.09.2026).
 * cap-inject hängt diese Datei in jede Seite ein.
 */

/* Cap-Werbung in der Kopfzeile: Download, Blog, Pricing, Log in, Get Cap free */
div:has(> a[href^="/download"]),
div:has(> a[href^="/signup"]):has(> a[href="/login"]) {
  display: none !important;
}

/* Cap-Logo durch die Orbita-Wortmarke ersetzen. Die Klasse setzt das Skript,
   weil der Link danach nicht mehr auf Cap zeigt. */
a[href^="/?ref="] svg,
[data-orbita="logo"] svg {
  display: none !important;
}

a[href^="/?ref="]::after,
[data-orbita="logo"]::after {
  content: "";
  display: inline-block;
  width: 126px;
  height: 28px;
  background: url(/__orbita/wortmarke.svg) no-repeat center / contain;
}

/* Kreis mit dem Anfangsbuchstaben: Orbita-Zeichen statt Buchstabe */
[data-orbita="zeichen"] {
  background-color: #fff !important;
  background-image: url(/__orbita/zeichen.svg) !important;
  background-size: 78% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid #e5e7eb;
}

[data-orbita="zeichen"] * {
  display: none !important;
}

/* Titel gross in der Zeile über dem Video, Name und Knöpfe rechts (wie bei Loom).
   Der Titel kommt als CSS-Inhalt aus einem Attribut – ein Umhängen des echten
   Titels zerlegt Cap (React entfernt dann Knoten, die es nicht mehr findet). */
[data-orbita="reihe"] {
  width: 100%;
  justify-content: flex-end !important;
  align-items: center;
  gap: 16px;
}

[data-orbita="reihe"]::before {
  content: attr(data-orbita-titel);
  margin-right: auto;
  min-width: 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: #1a1f36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Titel und Trennstrich im Kopfbalken werden dadurch überflüssig.
   Die Klassen setzt das Skript als data-Attribut: React verwaltet class und
   meldet sonst beim Hydrieren Fehler #418 (in Safari besonders zuverlässig). */
[data-orbita="kopf-titel"],
[data-orbita="leer"],
div.h-7.w-px.shrink-0.bg-gray-6 {
  display: none !important;
}

/* Zeitangabe ohne Aufrufzähler – der Text selbst bleibt unangetastet */
[data-orbita="zeit"] {
  font-size: 0 !important;
}

[data-orbita="zeit"]::before {
  content: attr(data-orbita-zeit);
  font-size: 12px;
  line-height: 16px;
}

/* Eigene Knöpfe */
.orbita-kopieren {
  gap: 8px;
}

.orbita-kopieren svg {
  width: 12px;
  height: 12px;
}

.orbita-teilen svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 640px) {
  [data-orbita="reihe"]::before {
    font-size: 20px;
  }
}


/* --- Nachtrag 18.09.2026 --- */

/* Caps animierte Vorschau lag mit z-index 5 ueber dem Video und zeigte eine
   andere Stelle der Aufnahme – dadurch sah man das Bild doppelt.
   (Gemessen: GIF 480x262 in 1190x669, Video 1190x648.) */
img[src*="/api/video/preview"] {
  display: none !important;
}

/* Kommentarspalte samt Schaltern ganz weg: sie blitzte beim Laden auf und
   liess sich danach nicht mehr oeffnen. */
div[class*="w-[22rem]"],
button[aria-label="Hide comments"],
button[aria-label="Show comments"] {
  display: none !important;
}

/* Rechtliches: Impressum und Datenschutz sind Pflicht (§ 5 Abs. 1 DDG,
   Art. 13 DSGVO), auch wenn die Seite nur ueber den Link erreichbar ist.
   Die Zeile haengt cap-inject direkt ins HTML, damit sie immer da ist. */
.orbita-fuss {
  position: fixed;
  right: 24px;
  bottom: 12px;
  display: flex;
  gap: 16px;
  font: 400 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #9ca3af;
  z-index: 20;
}

.orbita-fuss a {
  color: inherit;
  text-decoration: none;
}

.orbita-fuss a:hover {
  color: #4b5563;
  text-decoration: underline;
}

/* Theater-Modus: der ganze Kopfbalken (Logo, Titelzeile, Besitzer-Knoepfe)
   und die Fusszeile weg – das Video nimmt den Platz. Der Balken ist ein
   Element, gemessen 18.09.2026: div.shrink-0 mit Unterkante und weissem Grund. */
html[data-orbita-theater] div.shrink-0[class*="border-b"][class*="bg-white"],
html[data-orbita-theater] .orbita-fuss {
  display: none !important;
}

html[data-orbita-theater] body,
html[data-orbita-theater] div[class*="bg-gray-2"] {
  background: #0b0d11 !important;
}

.orbita-theater-zurueck {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 60;
  display: none;
}

html[data-orbita-theater] .orbita-theater-zurueck {
  display: inline-flex;
}

@media (max-width: 640px) {
  .orbita-fuss {
    right: 12px;
    bottom: 6px;
  }
}


/* Video so gross wie das Fenster hergibt (Loom als Vorbild).
   Cap deckelt den Inhalt auf 80rem – dadurch blieb das Bild auf breiten
   Schirmen bei 1190 px stehen, egal wie viel Platz da war. Jetzt entscheidet
   die Hoehe: Breite = min(verfuegbar, Hoehenbudget x 16/9). 220 px sind
   Kopfzeile, Abstaende und die Reaktionsleiste darunter.
   Gemessen 18.09.2026 (vorher 1190x647 auf jedem Schirm):
   1600x900 -> 1183x643 · 1920x1080 -> 1503x817 · 2560x1440 -> 2143x1165. */
@media (min-width: 1024px) {
  div.mx-auto[class*="max-w-[80rem]"] {
    max-width: 100% !important;
  }

  div.mt-4.pb-8 {
    margin-top: 8px !important;
    padding-bottom: 8px !important;
  }

  div.grid.relative.gap-4 > div.min-w-0 > div[class*="aspect-video"] {
    width: min(100%, calc((100vh - 220px) * 16 / 9)) !important;
    margin-inline: auto !important;
  }

  /* Im Theater-Modus fallen Kopfzeile und Titelzeile weg – mehr Hoehe fuers Bild */
  html[data-orbita-theater] div.grid.relative.gap-4 > div.min-w-0 > div[class*="aspect-video"] {
    width: min(100%, calc((100vh - 110px) * 16 / 9)) !important;
  }
}