/* ============ Die Zwei-Marken-Landschaft ============
   Abras Zielbild (21.08.): EIN Stoff, zwei Welten. Links näht die
   Nadel Verflixt ins warme Leinen. Dann zieht die Naht als Steppstich-
   Grenze über die Bühne — und rechts läuft Wasser bis an die Naht:
   Satin-Licht, Seifenblasen, CLEANFIX in klaren Serifen. Das gestickte
   & verbindet beide. Gesteuert über body.cleanfix-da (cleanfix.js);
   body.cleanfix-still = Endbild sofort.

   Zeitplan nach dem Intro (cleanfix-da):
   0.0s  Naht näht sich über die Bühne (1.6s), Wasser läuft nach (2.2s)
   1.2s  das & stickt sich (1.1s)
   Aufbau seit 23.08.: 0,85 s CLEANFIX (0,9 s), 1,25 s Strich/Unterzeile, Wellen
   2.9s  Schwung unter „Perfektion." zeichnet sich
   danach: Blasen schweben als leises Dauer-Atmen. */

/* Die gemalten Farbzonen sind überholt: der Grund ist jetzt ein Foto
   (hero.css). Übrig bleibt aus diesem SVG nur die Naht — sie kommt in
   Etappe 3 neu. Bis dahin bleibt die Wasserwelt komplett stumm. */
#wasserwelt { display: none; }

/* ── Die Wasserwelt (SVG über die ganze Bühne) — STILLGELEGT ── */
#wasserwelt.aktiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Wasser: läuft von rechts oben bis an die Naht (weiche Front) */
.ww-flaeche,
.ww-satin,
.ww-blasen {
  opacity: 0;
  transition: opacity 2.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body.cleanfix-da .ww-flaeche { opacity: 1; }
body.cleanfix-da .ww-satin { opacity: 1; transition-delay: 0.8s; }
body.cleanfix-da .ww-blasen { opacity: 1; transition-delay: 1.4s; }

/* Die Naht näht sich: die Zeichen-Maske deckt den Steppstich auf */
.ww-naht-zeichner {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0.1, 0.4, 1);
}
body.cleanfix-da .ww-naht-zeichner { stroke-dashoffset: 0; }

/* Blasen: kaum merkliches Schweben — Wäsche ruht, Wasser lebt */
body.cleanfix-da:not(.cleanfix-still) .ww-b--1 { animation: ww-schweben 26s ease-in-out 2s infinite alternate; }
body.cleanfix-da:not(.cleanfix-still) .ww-b--2 { animation: ww-schweben 19s ease-in-out 3s infinite alternate-reverse; }
body.cleanfix-da:not(.cleanfix-still) .ww-b--3 { animation: ww-schweben 23s ease-in-out 1s infinite alternate; }
body.cleanfix-da:not(.cleanfix-still) .ww-b--4 { animation: ww-schweben 29s ease-in-out 0s infinite alternate-reverse; }
body.cleanfix-da:not(.cleanfix-still) .ww-b--5 { animation: ww-schweben 17s ease-in-out 4s infinite alternate; }
@keyframes ww-schweben {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-6px, -14px, 0); }
}

/* ── Das & — das Bindeglied zwischen den beiden Marken ─────────
   Neu gebaut am 23.08.: vorher ein handgezeichneter Bezier-Strich
   mit aufgesetzten Stichelchen, jetzt die echte Ephesis-Glyphe —
   also dieselbe Schrift wie die Marke selbst, gefuellt mit demselben
   Garn und demselben Relief.

   Position: mittig in der Luecke zwischen Stickerei und CLEANFIX
   (bei 1890 px liegt die Luecke zwischen 722 und 1102, Mitte 912),
   auf halber Hoehe zwischen den beiden Wortmarken. Ueber die eigene
   Mitte verankert, damit eine Groessenaenderung sie nicht verschiebt.

   Breite: war zuerst an das Logo gekoppelt, damit der Garn-Rapport
   dieselbe Fadendichte trifft. Seit das & im Vollton laeuft und kein
   Garnmuster mehr traegt, ist die Kopplung hinfaellig — die Groesse
   ist jetzt frei nach Augenmass gesetzt. */
#und-akt {
  position: absolute;
  /* Abstaende am 23.08. neu gesetzt, nachdem die Stickerei kleiner
     wurde: 139 px Luecke zur Stickerei, 159 px zu CLEANFIX. Bewusst
     ungleich — CLEANFIX ist ein geschlossener, schwerer Block, die
     Schreibschrift daneben laeuft leicht aus. Gleiche Abstaende
     saehen deshalb schief aus.
     Die Hoehe stimmt von selbst: die Mitte des & liegt bei 387, die
     Wortmarken bei 406 und 369 — also genau dazwischen.
     Breite gegen die Stickerei bemessen: 156 zu 444 ist dasselbe
     Verhaeltnis wie vorher 171 zu 507. */
  left: 46.9%;
  top: 38.7%;
  transform: translate(-50%, -50%);
  /* --marken-hub / --marken-skala: siehe hero.css (#logo-wrap) und
     hero-passung.js — die drei Marken weichen dem Textblock gemeinsam aus */
  margin-top: calc(-1 * var(--marken-hub, 0px));
  width: calc(min(11.15vw, 156px) * var(--marken-skala, 1));
  height: auto;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  /* Aufbau (23.08.): folgt der Stickerei, die bis 1,3 s aufwischt */
  transition: opacity 0.7s ease 0.7s;
}
body.cleanfix-da #und-akt,
body.intro-fertig #und-akt { opacity: 1; }

/* ── CLEANFIX: klassisch, klar, auf dem Wasser ── */
#cleanfix-akt {
  position: absolute;
  /* Gegen Abras Mockup ausgemessen (23.08.): CLEANFIX sass 11
     Prozentpunkte zu hoch. Die Marke gehoert auf die Hoehe der
     zweiten Zeile von „zugenaeht", nicht darueber. */
  top: 32%;
  margin-top: calc(-1 * var(--marken-hub, 0px));
  right: 2%;
  width: 48%;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(12px, 1.8vh, 22px);
  pointer-events: none;
}

/* Kein Schleier, keine Flaeche hinter der Marke. Ein erster Versuch
   mit Dampf ist am 23.08. rausgeflogen: die Ellipse war breiter als
   ihr Kasten und wurde am Rand abgeschnitten — sichtbare Kante quer
   ueber das Foto. Abras Ansage: die Schrift steht allein. Der
   Kontrast kommt jetzt aus der Schrift selbst (Relief) und aus der
   Farbe, nicht aus einer Unterlage. */
.cf-serif {
  margin: 0;
  font-family: var(--schrift-marke);
  font-weight: var(--schrift-marke-schnitt);
  /* Groesser gesetzt (23.08.): die Stickerei links nimmt 325 px Hoehe
     ein, der ganze Cleanfix-Block kam auf 117. Fuer „gleichwertig
     sichtbar" (Wunsch Herr Bal) fehlte schlicht Gewicht. */
  font-size: calc(clamp(54px, 6.5vw, 98px) * var(--schrift-marke-korrektur, 1) * var(--marken-skala, 1));
  line-height: 1;
  letter-spacing: 0.085em;
  text-indent: 0.085em;
  text-transform: uppercase;
  color: #1f4a5e;
  /* Erhaben, nicht flach: Licht faellt von oben, also heller Rand
     oben, Schatten darunter, dann ein weicher Wurf auf den Satin.
     Dasselbe Prinzip wie beim Garn links — nur ohne Faserstruktur,
     weil die Reinigung glatt und kuehl bleibt. */
  /* In em statt px, damit das Relief mit der Schrift mitwaechst.
     Die Lichtkante oben setzt die Marke gegen dunkle Stellen des
     Fotos ab (die Blasen rechts), der Wurf unten gegen helle. */
  text-shadow:
    0 -0.018em 0 rgba(255, 255, 255, 0.92),
    0 0.014em 0 rgba(255, 255, 255, 0.4),
    0 0.028em 0.022em rgba(16, 40, 52, 0.34),
    0 0.09em 0.2em rgba(16, 40, 52, 0.26);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s,
    transform 0.9s cubic-bezier(0.2, 0.8, 0.3, 1.05) 0.85s;
}
body.cleanfix-da .cf-serif { opacity: 1; transform: none; }

.cf-unterzeile {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--schrift-sans);
  font-weight: 600;
  /* Waechst mit der Marke mit, sonst kippt die Proportion. */
  font-size: calc(clamp(13px, 1.35vw, 19px) * var(--marken-skala, 1));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* Dritte Nachbesserung (23.08.). Anders als der Markenname ist
     diese Zeile beschreibender Text, fuer den 4,5 Pflicht ist. Auf
     dem Foto reichte #132c38 nur fuer 3,6, ein Fuenftel der Flaeche
     lag darunter. #08151d schafft 4,59 bei 4 Prozent Rest — und ein
     fast schwarzes Blau passt zur ruhigen, gesperrten Zeile. */
  color: #08151d;
  opacity: 0;
  transition: opacity 0.8s ease 1.25s;
}
body.cleanfix-da .cf-unterzeile { opacity: 1; }
.cf-strich {
  width: 34px;
  height: 2px;
  background: #08151d;
}
.cf-wellen {
  width: clamp(54px, 5vw, 78px);
  height: auto;
  overflow: visible;
}
.cf-welle {
  stroke-linecap: round;
  stroke-width: 7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.cf-welle--1 { stroke: #3d7d99; transition: stroke-dashoffset 0.8s cubic-bezier(0.3, 0.1, 0.3, 1) 1.4s; }
.cf-welle--2 { stroke: #8fb6c6; transition: stroke-dashoffset 0.8s cubic-bezier(0.3, 0.1, 0.3, 1) 1.6s; }
body.cleanfix-da .cf-welle { stroke-dashoffset: 0; }

/* ── Der Lead-Schwung: „Perfektion." mit gezeichnetem Unterstrich ── */
.hero__lead--duo { line-height: 1.55; }
.hero__schwungwort {
  position: relative;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
}
.hero__schwung {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.55em;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hero__schwung path {
  stroke: var(--akzent-hell);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.3, 0.1, 0.3, 1) 1.5s;
}
body.cleanfix-da .hero__schwung path { stroke-dashoffset: 0; }

/* ── Kopfzeile: die zweite Marke steht mit im Titel ── */
.wortmarke { display: inline-flex; align-items: center; gap: 10px; }
.wortmarke__cleanfix {
  font-family: var(--schrift-marke);
  font-weight: var(--schrift-marke-schnitt);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Zieht mit der Unterzeile mit: gemessen lag #132c38 hier bei 4,21
     mit elf Prozent der Flaeche unter dem Ziel — die Kopfzeile steht
     auf dem warmen Teil des Fotos. */
  color: #08151d;
  white-space: nowrap;
  transform: translateY(1px);
}
/* Schmale Kopfzeile: die Zusatzmarke weicht, die Wortmarke braucht
   den Platz */
@media (max-width: 559px) {
  .wortmarke__cleanfix { display: none; }
}

/* ── Endbild ohne Auftritt: schon gesehen oder weniger Bewegung ── */
body.cleanfix-still .ww-flaeche,
body.cleanfix-still .ww-satin,
body.cleanfix-still .ww-blasen,
body.cleanfix-still .ww-naht-zeichner,
body.cleanfix-still #und-akt,
body.cleanfix-still .cf-serif,
body.cleanfix-still .cf-unterzeile,
body.cleanfix-still .cf-welle,
body.cleanfix-still .hero__schwung path { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ww-flaeche, .ww-satin, .ww-blasen, .ww-naht-zeichner, #und-akt,
  .cf-serif, .cf-unterzeile, .cf-welle, .hero__schwung path { transition: none; }
  .ww-b { animation: none !important; }
}

/* ── Handy: die Landschaft im Hochformat (22.09.) ──
   Am Desktop stehen die Marken nebeneinander, CLEANFIX auf dem Wasser.
   Am Handy liegt das Foto gespiegelt (hero.css): oben Leinen mit der
   Stickerei, unten Wasser — also stapeln sich die Marken: Stickerei,
   darunter das &, darunter CLEANFIX, direkt über dem Textblock. Die
   Plätze rechnen mit den Variablen aus hero.css (--marken-unten,
   --cf-block, --und-block). Vorher stand CLEANFIX hier als eigenes Band
   unter dem Hero — ohne Wasser, ohne Bezug, „fehl am Platz“ (Abra). */
@media (max-width: 859px) {
  #wasserwelt { display: none; }
  #und-akt {
    top: auto;
    left: 50%;
    /* +14 px: die Zeichnung der Stickerei endet ~20 px über ihrem
       Kasten, CLEANFIX beginnt ~4 px unter seinem — so steht das & in
       der Mitte zwischen beiden */
    bottom: calc(var(--marken-unten) + var(--cf-block) + 14px);
    transform: translateX(-50%);
    margin-top: 0;
    width: 48px;
    transition-delay: 0.45s;
    transition-duration: 0.6s;
  }
  #cleanfix-akt {
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    bottom: var(--marken-unten);
    height: var(--cf-block);
    align-content: end;
    gap: 9px;
    margin-top: 0;
  }
  #cleanfix-akt .cf-serif {
    font-size: calc(clamp(36px, 11.6vw, 48px) * var(--schrift-marke-korrektur, 1));
    transition-delay: 0.55s, 0.55s;
  }
  /* Unterzeile am Handy: mittig und schmaler als die Marke, nur ein
     Blauton. Strich und Wellen bleiben dem Desktop — hier liefert das
     Foto das Wasser selbst (Abra 19.09.: links Strich, rechts Welle
     wirkte am Handy zufällig, die Zeile war breiter als die Marke). */
  #cleanfix-akt .cf-unterzeile {
    gap: 0;
    font-size: 12.5px;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    transition-delay: 0.8s;
  }
  #cleanfix-akt .cf-strich,
  #cleanfix-akt .cf-wellen { display: none; }
  /* Aufbau in Lesereihenfolge: Stickerei wischt auf (0,15 s), das &
     (0,45 s), CLEANFIX hebt sich (0,55 s), dann Unterzeile und Text
     (hero.css), zuletzt der Schwung unter „Perfektion.“ */
  .hero__schwung path { transition-delay: 1.4s; }
}
/* iPad hochkant: die Stickerei ist über 600 px breit — CLEANFIX und das
   & wachsen mit, damit das Paar gleichwertig bleibt */
@media (min-width: 560px) and (max-width: 859px) {
  #und-akt { width: 72px; }
  #cleanfix-akt { gap: 12px; }
  #cleanfix-akt .cf-serif { font-size: calc(clamp(48px, 9.4vw, 78px) * var(--schrift-marke-korrektur, 1)); }
  #cleanfix-akt .cf-unterzeile { font-size: 15px; }
}