/* Logo mit Bildmarke, oben und im Lader (22.10.2026). Jonah: „allgemein oben das Reef-Logo haben, mit dem Icon davor, also mit der Bildmarke
   auch. Und zwar mit der Kachel in Orange Gradient … mit dem schwarzen Icon da drin.“ Der Lockup kommt aus 02_Marke/logo/svg (Sonne, Tinte),
   eingesetzt von skripte/bauen.py; die Buchstaben stehen in currentColor und folgen damit Tag und Nacht, Kachel und Icon bleiben, wie sie sind.
   Die Wortmarke behält die Größe von vorher (92 px breit), die Kachel steht davor. */
.lockup { display: block; width: 100%; height: auto; overflow: visible; }
.lockup .lm-wort { overflow: visible; }   /* Buchstaben dürfen beim Steigen und in der Welle aus ihrem Feld */
.lockup .lm-icon { transform-box: view-box; transform-origin: 256px 256px; }   /* Mitte der Kachel: das Icon dreht um sie */
.lockup .lm-wort path { transform-box: fill-box; transform-origin: center; }   /* jeder Buchstabe um seine Mitte, wie in der Lottie-Datei */
.kopf .marke { width: 135px; }   /* 92 px Wortmarke × 2169 / 1477 */
@media (max-width: 400px) { .kopf .marke { width: 120px; } }   /* Handy: Platz für „Erstgespräch“ im Knopf (26.10.2026) */

/* Lader: der Lockup steht auf der Wasserlinie, was darunter liegt, schneidet die Linie ab (oben und seitlich Luft für die Welle) */
.lader-marke { width: clamp(264px, 38.2vw, 558px); aspect-ratio: 2169 / 575; clip-path: inset(-60% -12% 0 -12%); }
.mit-lader .lader-marke .lm-kachel path { transform: none; }   /* die Regel des Heros gilt allen Pfaden, hier nur den Buchstaben */
.mit-lader .lader-marke .lm-kachel, .mit-lader .lader-marke .lm-wort path { transform: translateY(640px); }   /* unter der Linie, bis sie steigen */