/* Ruf nach 05: „Auftauchen“ (Entwurf, 23.10.2026). Jonah: „der darf auch richtig gerne richtig knallen. Die Section darf noch mal richtig
   heftig sein.“ Der Tauchgang endet, die Wasserlinie steigt einmal über die volle Breite, dahinter liegt die helle Fläche, darauf ein Satz
   und ein Knopf. Zwei Fassungen zum Vergleich: A Sonne (die Fläche in Sonne, die Sonne selbst in Sand) und B Sand (heller Grund, die Sonne in
   Sonne). Zweite Runde (Jonah: „das mit den Wellen finde ich geil … der Platz zwischen der Section darüber ist ein bisschen zu groß … die Section
   an sich noch etwas langweilig“): die Section zieht über das leere Ende von 05, dahinter eine Szene auf einer Leinwand (Horizont, die Sonne
   geht auf, Wellenlinien mit ihrem Spiegel, die dem Zeiger ausweichen), der Titel steigt Buchstabe für Buchstabe aus der Wasserlinie wie die
   Wortmarke im Lader und trägt danach einmal den Wellengang; Satz und Knopf stehen neben der zweiten Zeile.
   Farben bewusst fest, nicht über die Kanäle: die Section bleibt in Tag und Nacht hell bzw. Sonne. Bewegung: quelle/ruf.js. */
.ruf { --ruf-hg: #ff6a1f; --ruf-vg: #0c0908; --ruf-leise: rgb(12 9 8 / .8); --ruf-linie: #ff6a1f; --fokus: #0c0908;
       --band: clamp(190px, 28svh, 330px);   /* dunkles Band über der Fläche: darin Welle und Wasserlinien, nichts ragt nach oben in 05 */
       position: relative; z-index: 1; padding-top: var(--band); background: var(--nacht);   /* Abstand als padding, sonst fällt der Rand der Fläche durch */
       margin-top: calc(clamp(120px, 8vw + 40px, 220px) * -1); }   /* rückt über den ganzen unteren Rand von 05: das dunkle Band ist selbst der Abstand, die Wasserlinien
                                                                      darin beginnen dann so weit unter 05 wie jede Section unter der vorigen (23.10. spät) */
.ruf[data-fassung="sand"] { --ruf-hg: #fdf4ec; --ruf-vg: #27201b; --ruf-leise: rgb(39 32 27 / .74); --fokus: var(--sonne-700); }

/* die Fläche, eine Bildschirmhöhe; ihre Kante ist die Welle im Band darüber (ruf.js glättet sie, während die Section hereinkommt) */
.ruf-flaeche { position: relative; height: 100svh; min-height: 640px; background: var(--ruf-hg); color: var(--ruf-vg); }
.ruf-welle { position: absolute; left: 0; top: 0; width: 100%; height: var(--band); overflow: visible; pointer-events: none; }
.ruf-welle .w-flaeche { fill: var(--ruf-hg); }
.ruf-welle .w-kante { fill: none; stroke: none; }
.ruf[data-fassung="sand"] .ruf-welle .w-kante { stroke: var(--sonne); stroke-width: 3; }
.ruf-welle .w-linie { fill: none; stroke: var(--ruf-linie); stroke-width: 1.4; stroke-linecap: round; }
.ruf-see { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; }   /* Lage und Höhe setzt ruf.js: nur die Szene */

/* ---------- Inhalt: Titel sehr groß, Satz und Knopf neben der zweiten Zeile (ruf.js misst), sonst darunter ---------- */
.ruf-innen { position: relative; z-index: 2; padding: calc(var(--kopf) + clamp(28px, 6svh, 72px)) var(--rand) 0; }
.ruf-satzbau { position: relative; }
.ruf-titel { margin: 0; font: 300 clamp(56px, 10.6vw, 200px)/.9 var(--schrift); letter-spacing: -.055em; color: var(--ruf-vg); }
.ruf-titel .zeile { display: block; overflow-y: clip; overflow-x: visible; padding-bottom: .14em; margin-bottom: -.14em; }
.ruf-titel .zeile > span { display: inline-block; }
.ruf-titel .b { position: relative; }   /* Buchstaben: inline mit relativer Lage, so bleibt die Unterschneidung zwischen ihnen erhalten */
.ruf-titel .grund { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.ruf-unten { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3svh, 32px); width: fit-content; margin-top: clamp(28px, 5svh, 56px); }
.ruf-satzbau.daneben .ruf-unten { position: absolute; margin: 0; }
.ruf-satz { margin: 0; max-width: 30ch; color: var(--ruf-leise); font-size: clamp(18px, 15px + .45vw, 23px); line-height: 1.4; letter-spacing: -.012em; text-wrap: pretty; }

/* der Knopf groß, in beiden Fassungen Nacht mit Sonne (fest, damit Tag und Nacht ihn nicht umdrehen) */
.ruf .knopf { --hg: #0c0908; --vg: #fdf4ec; }
.ruf .knopf .pfeil { color: #0c0908; }
.knopf-gross { min-height: 68px; gap: 20px; padding: 8px 8px 8px 30px; font-size: 18px; }
.knopf-gross .pfeil { width: 52px; height: 52px; }
.knopf-gross .pfeil svg, .knopf-gross .pfeil::after { width: 18px; height: 18px; }
.knopf-gross .pfeil::after { transform: translateX(-40px); }
@media (hover: hover) and (pointer: fine) { .knopf-gross:hover .pfeil svg { transform: translateX(40px); } }
/* Hover wie beim Knopf im Hero (Jonah: „Nimm doch einfach dieselbe Hoveranimation … die wir auch im Hero benutzen“): dieselben Zeiten und Kurven aus
   basis.css, nur Pfeil und Weg größer. Das Hakeln kam nicht von den Zeiten, sondern von der Welle, die im Leerlauf weiterrechnete. */

/* ---------- einmal: die Buchstaben steigen (ruf.js), Satz und Knopf folgen ---------- */
.js .ruf-titel .b { top: 1.35em; }
.ruf.da .ruf-titel .b { top: 0; }
.js .ruf-satz { opacity: 0; translate: 0 18px; }
.js .ruf .knopf-gross { opacity: 0; translate: 0 22px; }
.ruf.da .ruf-satz { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus) .75s, translate 1.1s var(--sanft) .75s; }
.ruf.da .knopf-gross { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus) .9s, translate 1.1s var(--sanft) .9s, transform .2s var(--aus); }
.ruf.ohne-uebergang, .ruf.ohne-uebergang * { transition: none !important; }

/* Vergleich: Leiste unten wie bei 07 */
.vergleich .ruf-nochmal { box-shadow: inset 0 0 0 1px var(--zl); margin-left: 4px; }

@media (max-width: 860px) {
  .ruf { --band: clamp(150px, 22svh, 230px); }
  .ruf-titel { font-size: clamp(50px, 14.5vw, 120px); letter-spacing: -.05em; }
  .ruf-innen { padding-top: calc(var(--kopf) + 8svh); }
  .knopf-gross { min-height: 60px; padding-left: 22px; font-size: 17px; }
  .knopf-gross .pfeil { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .ruf { margin-top: 0; --band: 0px; }
  .ruf-welle { display: none; }
  .ruf .ruf-titel .b, .js .ruf .ruf-titel .b { top: 0; }
  .ruf .ruf-satz, .ruf .knopf-gross { translate: none; opacity: 1; transition: none; }
}