/* ===========================================================================
   Logo
   ---------------------------------------------------------------------------
   Eigene Ebene, unabhängig vom Video dahinter.

   WARUM ÜBERHAUPT EIGENSTÄNDIG:
   Solange das Logo im Video steckte, war seine Größe starr an 41 % der
   Videobreite gekoppelt. Das Video muss aber den Bildschirm decken – und aus
   beidem zusammen ergab sich auf extrabreiten Schirmen zwangsläufig entweder
   ein riesiges Logo oder Freiflächen am Rand. Als eigene Ebene hat das Logo
   seine eigene Regel, und das Video darf frei skalieren.

   ZWEI FASSUNGEN, nach Bildschirmbreite:
     Desktop  – mit Punkten (das vollständige Zeichen)
     Mobil    – ohne Punkte; hochkant nähmen sie zu viel Höhe ein und das
                Zeichen würde zu raumgreifend

   Beide sind gleich breit angelegt, deshalb ist die SCHRIFT in beiden
   Fassungen exakt gleich groß – es fallen nur die Punkte weg. Ohne diese
   gemeinsame Breite spränge der Schriftzug beim Wechsel in der Größe.

   FARBE ÜBER MASKE:
   Die Dateien sind reine schwarze Silhouetten mit Alphakanal. Als Maske
   eingesetzt bestimmt nicht die Datei die Farbe, sondern CSS. Dadurch ist
   die Logofarbe frei wählbar – und animierbar – ohne neue Dateien.

   Einbinden:
       <div class="logo" role="img" aria-label="ÜBER ICH"></div>
   =========================================================================== */

.logo {
  /* Größe: halbe Bildschirmbreite, gedeckelt. Die Obergrenze ist der Grund,
     warum das Zeichen auf einem 32:9-Monitor nicht ins Absurde wächst. */
  --logo-breite: min(50vw, 880px);

  --logo-farbe:  #12070f;

  /* EINBETTUNG – damit das Zeichen nicht aufgeklebt wirkt.

     Ein Logo in reinem Schwarz bei voller Deckkraft liegt immer wie ein
     Aufkleber auf dem Bild. Zwei Stellschrauben dagegen:

     Deckkraft knapp unter 1 lässt die Struktur darunter minimal durch.
     Der Mischmodus entscheidet, WIE sie durchkommt:
       multiply  – das Zeichen dunkelt das Video ab, die Textur moduliert es.
                   Wirkt wie auf die Oberfläche gedruckt. Für dunkle Logos
                   die natürlichste Wahl.
       normal    – deckend, klassisch
       overlay   – kontrastreicher, das Zeichen nimmt Farbe der Textur an */
  --logo-deckkraft: .97;
  --logo-mischung:  multiply;

  /* Wird von den Regeln weiter unten je nach Bildschirmbreite gesetzt. */
  --logo-datei:        url("bilder/logo-1-komplett-1600.webp");
  --logo-verhaeltnis:  1600 / 731;

  width: var(--logo-breite);
  aspect-ratio: var(--logo-verhaeltnis);

  background-color: var(--logo-farbe);
  opacity: var(--logo-deckkraft);
  mix-blend-mode: var(--logo-mischung);
  -webkit-mask-image: var(--logo-datei);
          mask-image: var(--logo-datei);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* --- Entwurf wählen -------------------------------------------------------
   Abstract 1 ist die Outline-Fassung, Abstract 2 die ausgefüllte. */

.logo--entwurf-1 { --logo-datei: url("bilder/logo-1-komplett-1600.webp"); }
.logo--entwurf-2 { --logo-datei: url("bilder/logo-2-komplett-1600.webp"); }

/* --- Mobil: ohne Punkte ---------------------------------------------------
   Der Umschaltpunkt liegt bei 700 px, wie beim Personen-Baustein. */

@media (max-width: 700px) {
  .logo,
  .logo--entwurf-1 {
    --logo-datei: url("bilder/logo-1-ohne-punkte-1600.webp");
    --logo-verhaeltnis: 1600 / 402;
  }
  .logo--entwurf-2 {
    --logo-datei: url("bilder/logo-2-ohne-punkte-1600.webp");
    --logo-verhaeltnis: 1600 / 402;
  }
}

/* --- Rückfallebene --------------------------------------------------------
   Sehr alte Browser kennen mask-image nicht. Dort bliebe nur eine farbige
   Fläche in Logoform stehen – deshalb wird sie dann unsichtbar geschaltet
   und stattdessen das Bild selbst angezeigt. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .logo {
    background-color: transparent;
    background-image: var(--logo-datei);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}


/* ===========================================================================
   Bewegung – optional, über .logo--bewegt
   ---------------------------------------------------------------------------
   Ein absolut stillstehendes Zeichen vor einer flimmernden Textur verrät sich
   als Montage. Drei sehr langsame, unabhängige Bewegungen nehmen ihm das:

     Drift    – kaum wahrnehmbares Wandern, wie eine ruhige Handkamera
     Atmen    – minimale Größenänderung
     Schimmer – leichtes Schwanken der Deckkraft

   Werte auf Anschlag gesetzt am 26.08.2026 – bewusst kräftig, um die Wirkung
   überhaupt beurteilen zu können. Von hier aus nach unten arbeiten.

   Jede läuft auf einer EIGENEN Eigenschaft: translate, scale und opacity.
   Das ist der Grund, warum sie sich nicht gegenseitig überschreiben – anders
   als drei Animationen auf transform. Die Laufzeiten sind teilerfremd, damit
   sich nie ein Takt einschleicht.
   =========================================================================== */

.logo--bewegt {
  --logo-drift:         2%;
  --logo-drift-tempo:   23s;
  --logo-puls:          1.04;
  --logo-puls-tempo:    17s;
  --logo-schimmer:      .25;    /* Ausschlag der Deckkraft nach unten */
  --logo-schimmer-tempo: 7s;

  animation:
    logo-drift    var(--logo-drift-tempo)     ease-in-out infinite,
    logo-atmen    var(--logo-puls-tempo)      ease-in-out infinite,
    logo-schimmer var(--logo-schimmer-tempo)  ease-in-out infinite;
}

@keyframes logo-drift {
   0%, 100% { translate: 0 0; }
  27% { translate: calc(var(--logo-drift) *  .8) calc(var(--logo-drift) * -.5); }
  53% { translate: calc(var(--logo-drift) * -.3) calc(var(--logo-drift) *  .7); }
  78% { translate: calc(var(--logo-drift) * -.7) calc(var(--logo-drift) * -.2); }
}

@keyframes logo-atmen {
   0%, 100% { scale: 1; }
  50%       { scale: var(--logo-puls); }
}

@keyframes logo-schimmer {
   0%, 100% { opacity: var(--logo-deckkraft); }
  50%       { opacity: calc(var(--logo-deckkraft) - var(--logo-schimmer)); }
}

@media (prefers-reduced-motion: reduce) {
  .logo--bewegt { animation: none; }
}