/* Übergang zur Suchauftrag-Seite (08.11.2026, wechsel-suche.js). Geladen auf der Startseite und auf wir-suchen.html. Dort gibt
   es styles.css nicht, darum hat jedes Token einen Ersatzwert mit denselben Werten wie auf der Startseite, und alle Schriftwerte
   stehen ausdrücklich da (wir-suchen.css setzt Systemschrift und Laufweite am body). Schwarzweiß und eckig wie der Bereich
   „YOU WANT IT. / WE FIND IT.“, kein Gold. Alles trägt den Vorsatz wsu-. Bewegt wird nur über transform, opacity und clip-path.
   Ohne Klasse zeigt die Fläche ihr fertiges Bild. Der Hinweg (.is-zu) baut es auf, die Ankunft (html.wsu-ankunft) beginnt damit.
   Einzige Regel außerhalb der Fläche: .wsu-quelle am angeklickten Knopf (Schrift blendet aus, seine helle Fläche bleibt). */

/* Am iPhone fehlt Arial Black. Auf wir-suchen.html kennt sonst niemand die Ersatzschrift der Startseite. */
@font-face { font-family: "Archivo Black Web"; src: url("assets/fonts/archivo-black-web.woff2") format("woff2"); font-style: normal; font-weight: 1 1000; font-display: block; }

.wsu-vorhang {
  --wsu-papier: var(--paper, #e8e8e5);
  --wsu-schwarz: var(--black, #080808);
  --wsu-display: var(--display, "Arial Black", "Archivo Black Web", Impact, Haettenschweiler, sans-serif);
  --wsu-mono: var(--mono, "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  --wsu-rand: var(--gutter, clamp(20px, 6.4vw, 106px));
  --wsu-kante: 3px;
  /* Absolut statt fixiert (10.11.2026, Micha: „Das hängt oben und unten immer mit diesem Weiß“): Safari 26 auf iOS färbt
     Statusleiste und Adressleiste nach fixierten Elementen an der Ober- und Unterkante, sonst nach dem Hintergrund von body.
     Die helle Fläche war so ein Element und Safari behielt ihre Farbe. Jetzt liegt sie absolut genau über dem sichtbaren Bild
     (wechsel-suche.js setzt Lage und Größe), für die Leisten bleibt der dunkle Seitengrund. */
  position: absolute;
  z-index: 2147483001;
  top: var(--wsu-oben, 0px);
  left: var(--wsu-links, 0px);
  width: var(--wsu-breite, 100%);
  height: var(--wsu-hoehe, 100vh);
  display: none;
  overflow: hidden;
  color: var(--wsu-schwarz);
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
}
.wsu-vorhang *, .wsu-vorhang *::before, .wsu-vorhang *::after { box-sizing: border-box; }
.wsu-vorhang.is-zu, html.wsu-ankunft .wsu-vorhang { display: block; pointer-events: auto; }

/* ---------- Das fertige Bild ---------- */
.wsu-blatt { position: absolute; inset: 0; }
.wsu-blatt-unten { display: none; }
.wsu-flaeche { position: absolute; inset: 0; background: var(--wsu-papier); transform-origin: var(--x, 50%) var(--y, 50%); }
/* Das Wort steht genau in der Mitte (gleich hohe Reihen darüber und darunter), dort schneidet bei der Ankunft die Linie.
   Der Kleintext sitzt wie im Bereich in den Ecken des Bildes, unten mit den Stichen darüber. */
.wsu-innen { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; padding: clamp(24px, 4.3vw, 62px) var(--wsu-rand); }
.wsu-oben, .wsu-unten { width: 100%; }
.wsu-oben { align-self: start; }
.wsu-unten { display: grid; align-self: end; gap: clamp(14px, 1.6vw, 20px); }
.wsu-zeile { display: flex; justify-content: space-between; gap: 16px; margin: 0; font: 400 9px/1 var(--wsu-mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; opacity: .72; }

/* Das Wort und sein Sucher. Die Schriftgröße steht am Rahmen, so wachsen Ecken und Suchlinie in em mit. */
.wsu-ziel { position: relative; font: 400 clamp(64px, min(18.5vw, 46vh), 280px)/.8 var(--wsu-display); }
/* Unten etwas Polster: so steht die Versalhöhe mittig in der Zeile, die Ecken haben oben und unten gleich viel Luft. */
.wsu-wort { display: flex; margin: 0; padding: 0 0 .075em; font: inherit; font-weight: 800; letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; clip-path: inset(-12% -6% -12% -6%); }
.wsu-wort b { display: block; font-weight: inherit; }
/* Ecken wie ein Sucher, die Kante von .shop-eingang und den Ecklinien im Bereich verwandt. */
.wsu-sucher { position: absolute; inset: -.1em -.13em; pointer-events: none; }
.wsu-sucher i { position: absolute; width: .15em; height: .15em; border: 0 solid currentColor; }
.wsu-sucher i:nth-child(1) { --dx: -1; --dy: -1; top: 0; left: 0; border-width: var(--wsu-kante) 0 0 var(--wsu-kante); }
.wsu-sucher i:nth-child(2) { --dx: 1; --dy: -1; top: 0; right: 0; border-width: var(--wsu-kante) var(--wsu-kante) 0 0; }
.wsu-sucher i:nth-child(3) { --dx: -1; --dy: 1; bottom: 0; left: 0; border-width: 0 0 var(--wsu-kante) var(--wsu-kante); }
.wsu-sucher i:nth-child(4) { --dx: 1; --dy: 1; right: 0; bottom: 0; border-width: 0 var(--wsu-kante) var(--wsu-kante) 0; }
/* Suchlinie: so breit wie das Wort, sichtbar ist nur ihre rechte Kante samt Schleier. Sie fährt einmal hinüber. */
.wsu-scan { position: absolute; top: -.05em; bottom: -.05em; left: 0; width: 100%; pointer-events: none; }
.wsu-scan::before, .wsu-scan::after { position: absolute; content: ""; opacity: 0; }
.wsu-scan::before { top: 0; right: 0; bottom: 0; width: min(30%, 220px); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wsu-schwarz) 11%, transparent)); }
.wsu-scan::after { top: 0; right: -1px; bottom: 0; width: var(--wsu-kante); background: currentColor; }
/* Stiche wie die Fortschrittslinie im Formular: vier sind beim Seitenwechsel da, die letzten zwei kommen beim Laden. */
.wsu-spur { display: flex; gap: 5px; height: 2px; }
.wsu-spur i { position: relative; flex: 1 1 0; overflow: hidden; background: color-mix(in srgb, currentColor 16%, transparent); }
.wsu-spur i::after { position: absolute; inset: 0; background: currentColor; content: ""; transform: scaleX(0); transform-origin: 0 50%; }
.wsu-spur i:nth-child(-n+4)::after { transform: none; }
.wsu-strahl, .wsu-schnitt { position: absolute; left: 0; width: 100%; opacity: 0; pointer-events: none; }

/* ---------- Hin (Startseite): die Fläche wächst aus dem Knopf, dann WANTED ---------- */
/* wechsel-suche.js setzt das Rechteck des angeklickten Links (--l, --t, --r, --b, ab dem oberen linken Bildrand) und
   --wsu-voll, die Zeit, bis Weiß den Bildschirm füllt. Erst danach kommt das Wort. Kanten: weiche Kurve, zügig in der Mitte. */
/* aus-hell: Der Knopf ist schon hell. Die Fläche ist ein Rahmen mit einem Loch genau über seiner Innenseite (--li …), der
   echte Knopf bleibt darin sichtbar, nur seine Schrift blendet aus. Zum Schluss geht das Loch zu. */
.wsu-vorhang.is-zu.aus-hell .wsu-flaeche { animation: wsu-kanten-loch .48s both; }
@keyframes wsu-kanten-loch {
  0% { clip-path: polygon(evenodd, var(--l) var(--t), var(--r) var(--t), var(--r) var(--b), var(--l) var(--b), var(--l) var(--t), var(--li) var(--ti), var(--ri) var(--ti), var(--ri) var(--bi), var(--li) var(--bi), var(--li) var(--ti)); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  96% { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--li) var(--ti), var(--ri) var(--ti), var(--ri) var(--bi), var(--li) var(--bi), var(--li) var(--ti)); animation-timing-function: linear; }
  100% { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--li) var(--ti), var(--li) var(--ti), var(--li) var(--ti), var(--li) var(--ti), var(--li) var(--ti)); }
}
/* Schrift und Pfeil des Knopfs blenden aus (über seinen eigenen Farbübergang). Seine helle Fläche bleibt stehen, auch wenn die
   Maus ihn verlässt, sonst liefe sie im Loch nach rechts hinaus. Die Klasse setzt und nimmt wechsel-suche.js. */
.wsu-quelle { color: transparent !important; }
.wsu-quelle::before { transform: none !important; transition: none !important; }
/* aus-dunkel: Der Knopf oder das Suchfeld ist noch dunkel (Handy, Suchfeld). Erst füllt es sich schnell von links wie beim
   Überfahren, dann fahren die vier Kanten nach außen. Die zweite Animation füllt nur vorwärts, sonst deckte sie die erste zu. */
.wsu-vorhang.is-zu.aus-dunkel .wsu-flaeche { animation: wsu-keim .15s cubic-bezier(.65, 0, .35, 1) both, wsu-kanten .45s cubic-bezier(.7, 0, .2, 1) .15s forwards; }
@keyframes wsu-keim {
  from { clip-path: inset(var(--t) calc(100% - var(--l)) calc(100% - var(--b)) var(--l)); }
  to { clip-path: inset(var(--t) calc(100% - var(--r)) calc(100% - var(--b)) var(--l)); }
}
@keyframes wsu-kanten {
  from { clip-path: inset(var(--t) calc(100% - var(--r)) calc(100% - var(--b)) var(--l)); }
  to { clip-path: inset(0 0 0 0); }
}
/* aus-mitte (kein Element im Bild, Aufruf von außen): wie zuerst ein Strahl aus der Bildmitte, aus dem die Fläche aufgeht. */
.wsu-vorhang.is-zu.aus-mitte .wsu-flaeche { animation: wsu-aufziehen .56s linear both; }
@keyframes wsu-aufziehen {
  0% { transform: scale(0, var(--wsu-spalt, .003)); animation-timing-function: cubic-bezier(.25, 0, .1, 1); }
  36% { transform: scale(1, var(--wsu-spalt, .003)); animation-timing-function: cubic-bezier(.8, 0, .2, 1); }
  100% { transform: none; }
}
.wsu-strahl { z-index: 1; top: var(--y, 50%); height: 2px; margin-top: -1px; background: var(--wsu-papier); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--wsu-papier) 80%, transparent), 0 0 44px 6px color-mix(in srgb, var(--wsu-papier) 30%, transparent); transform-origin: var(--x, 50%) 50%; }
.wsu-vorhang.is-zu.aus-mitte .wsu-strahl { animation: wsu-strahl .44s both; }
@keyframes wsu-strahl {
  0% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.25, 0, .1, 1); }
  46% { opacity: 1; transform: scaleX(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: scaleX(1); }
}
/* Auf dem vollen Weiß: die Suchlinie fährt über das Wort und legt es hinter sich frei (gleiche Dauer und Kurve). */
.wsu-vorhang.is-zu .wsu-wort { animation: wsu-freilegen .32s cubic-bezier(.55, 0, .35, 1) var(--wsu-voll, .5s) both; }
.wsu-vorhang.is-zu .wsu-scan { animation: wsu-scan .32s cubic-bezier(.55, 0, .35, 1) var(--wsu-voll, .5s) both; }
.wsu-vorhang.is-zu .wsu-scan::before, .wsu-vorhang.is-zu .wsu-scan::after { animation: wsu-scan-licht .42s linear var(--wsu-voll, .5s); }
@keyframes wsu-freilegen { from { clip-path: inset(-12% 106% -12% -6%); } }
@keyframes wsu-scan { from { transform: translateX(-100%); } }
@keyframes wsu-scan-licht { 0% { opacity: 0; } 8%, 78% { opacity: 1; } 100% { opacity: 0; } }
/* Gefunden: die vier Ecken rasten von außen ein, mit einem kleinen Nachfedern. */
.wsu-vorhang.is-zu .wsu-sucher i { animation: wsu-einrasten .28s cubic-bezier(.3, 1.5, .55, 1) calc(var(--wsu-voll, .5s) + .18s) both; }
@keyframes wsu-einrasten { from { opacity: 0; transform: translate(calc(var(--dx) * .12em), calc(var(--dy) * .12em)); } }
.wsu-vorhang.is-zu :is(.wsu-zeile, .wsu-spur) { animation: wsu-zeile .36s ease calc(var(--wsu-voll, .5s) - .04s) backwards; }
.wsu-vorhang.is-zu .wsu-spur i:nth-child(-n+4)::after { animation: wsu-stich .12s ease-out calc(var(--wsu-voll, .5s) + .06s + var(--i) * 60ms) backwards; }
@keyframes wsu-zeile { from { opacity: 0; transform: translateY(8px); } }
@keyframes wsu-stich { from { transform: scaleX(0); } }

/* ---------- Ankunft (wir-suchen.html): Schnitt durch die Mitte, die Hälften gehen auseinander ---------- */
/* Eine Hälfte je Blatt. Das obere reicht einen Pixel weiter, so bleibt in der Mitte keine Fuge. */
html.wsu-ankunft .wsu-blatt-oben { clip-path: inset(0 0 calc(50% - 1px) 0); }
html.wsu-ankunft .wsu-blatt-unten { display: block; clip-path: inset(50% 0 0 0); }
/* Solange die Seite lädt, kommen die letzten Stiche dazu. */
html.wsu-ankunft .wsu-spur i:nth-child(n+5)::after { animation: wsu-stich-voll .2s ease-out calc(.1s + (var(--i) - 4) * .32s) forwards; }
@keyframes wsu-stich-voll { to { transform: none; } }
.wsu-schnitt { z-index: 1; top: 50%; height: var(--wsu-kante); margin-top: calc(var(--wsu-kante) / -2); background: var(--wsu-schwarz); transform: scaleX(0); }
html.wsu-ankunft-los .wsu-schnitt { animation: wsu-schnitt .5s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes wsu-schnitt {
  0% { opacity: 1; transform: scaleX(0); }
  44% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
html.wsu-ankunft-los .wsu-blatt-oben { animation: wsu-hoch .86s cubic-bezier(.76, 0, .24, 1) .2s forwards; }
html.wsu-ankunft-los .wsu-blatt-unten { animation: wsu-runter .86s cubic-bezier(.76, 0, .24, 1) .2s forwards; }
/* Der Inhalt bleibt in jeder Hälfte ein Stück zurück, das gibt der Fahrt Tiefe. */
html.wsu-ankunft-los .wsu-blatt-oben .wsu-innen { animation: wsu-nach-unten .86s cubic-bezier(.76, 0, .24, 1) .2s forwards; }
html.wsu-ankunft-los .wsu-blatt-unten .wsu-innen { animation: wsu-nach-oben .86s cubic-bezier(.76, 0, .24, 1) .2s forwards; }
html.wsu-ankunft-los .wsu-sucher i { animation: wsu-loslassen .3s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes wsu-hoch { to { transform: translateY(-51%); } }
@keyframes wsu-runter { to { transform: translateY(51%); } }
@keyframes wsu-nach-unten { to { transform: translateY(9%); } }
@keyframes wsu-nach-oben { to { transform: translateY(-9%); } }
@keyframes wsu-loslassen { to { opacity: 0; transform: translate(calc(var(--dx) * .1em), calc(var(--dy) * .1em)); } }
/* Das Formular steigt in den Spalt nach: Kopf von oben, der erste Bildschirm Zeile für Zeile von unten. */
html.wsu-ankunft-los :is(.ws-kopf, .ws-lauf) { animation: wsu-kopf .7s cubic-bezier(.2, .8, .2, 1) .46s backwards; }
html.wsu-ankunft-los .ws-schritt > * { animation: wsu-steigt .95s cubic-bezier(.2, .8, .2, 1) .34s backwards; }
html.wsu-ankunft-los .ws-schritt > :nth-child(2) { animation-delay: .42s; }
html.wsu-ankunft-los .ws-schritt > :nth-child(n+3) { animation-delay: .5s; }
html.wsu-ankunft-los .ws-leiste { animation: wsu-steigt .95s cubic-bezier(.2, .8, .2, 1) .58s backwards; }
@keyframes wsu-kopf { from { opacity: 0; translate: 0 -16px; } }
@keyframes wsu-steigt { from { opacity: 0; translate: 0 64px; } }
/* Notbremse: Läuft das Skript nicht weiter, verschwindet die Fläche trotzdem. */
html.wsu-ankunft:not(.wsu-ankunft-los) .wsu-vorhang { animation: wsu-notaus .3s ease 2.6s forwards; }
@keyframes wsu-notaus { to { opacity: 0; visibility: hidden; } }

/* ---------- Handy: das Wort steht senkrecht, Buchstabe unter Buchstabe, die Suchlinie fährt von oben nach unten ---------- */
/* Die sechs Buchstaben füllen die Höhe zwischen den Zeilen. Der Schnitt bei der Ankunft fällt genau zwischen WAN und TED. */
@media (max-width: 680px) {
  .wsu-vorhang { --wsu-kante: 2px; }
  .wsu-zeile { letter-spacing: .14em; }
  .wsu-ziel { font-size: min(calc((100svh - 210px) / 4.9), 30vw); }
  .wsu-wort { flex-direction: column; align-items: center; line-height: .8; letter-spacing: 0; clip-path: inset(-4% -14% -4% -14%); }
  .wsu-wort b { line-height: .8; }
  .wsu-sucher { inset: -.13em -.2em; }
  .wsu-sucher i { width: .22em; height: .22em; }
  .wsu-scan { top: 0; right: -.1em; bottom: auto; left: -.1em; width: auto; height: 100%; }
  .wsu-scan::before { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: min(22%, 130px); background: linear-gradient(transparent, color-mix(in srgb, var(--wsu-schwarz) 11%, transparent)); }
  .wsu-scan::after { top: auto; right: 0; bottom: -1px; left: 0; width: auto; height: var(--wsu-kante); }
  .wsu-vorhang.is-zu .wsu-wort { animation-name: wsu-freilegen-runter; animation-duration: .36s; }
  .wsu-vorhang.is-zu .wsu-scan { animation-name: wsu-scan-runter; animation-duration: .36s; }
  .wsu-vorhang.is-zu .wsu-scan::before, .wsu-vorhang.is-zu .wsu-scan::after { animation-duration: .46s; }
}
@keyframes wsu-freilegen-runter { from { clip-path: inset(-4% -14% 104% -14%); } }
@keyframes wsu-scan-runter { from { transform: translateY(-100%); } }

/* ---------- Zurück vom Formular (09.11.2026, Micha: „die Elemente … nach unten runterfallen, und dann kommt der normale
   Startbildschirm“). Das Fallen auf wir-suchen.html macht wechsel-suche.js (nur translate und rotate). Auf der Startseite steht
   im ersten Bild nur der dunkle Seitengrund (html.wsu-rueck), bis sie aufgebaut ist und an der Stelle des Bereichs steht, dann
   blendet sie in 0,2 s auf. ---------- */
html.wsu-rueck::before { position: fixed; z-index: 2147483002; inset: 0; background: var(--black, #080808); content: ""; pointer-events: none; }
html.wsu-rueck-los::before { animation: wsu-ausblenden .2s ease-out forwards; }
html.wsu-rueck:not(.wsu-rueck-los)::before { animation: wsu-notaus .3s ease 2.6s forwards; }
@keyframes wsu-ausblenden { to { opacity: 0; } }
/* Frische Rückkehr: Der Bereich mit dem Knopf steht sofort fertig da (wechsel-suche.js nimmt dafür kurz alle Übergänge weg). */
.wsu-sofort, .wsu-sofort * { transition: none !important; }

/* ---------- Logo zur Startseite (09.11.2026, wechsel-suche.js Abschnitt 5) ---------- */
/* Auf wir-suchen.html: schwarzer Grund und das Logo inline (Stern und Ring bewegt das Skript). Größe in der Mitte wie im Skript
   (logoMitte): 70 % der Breite, höchstens 560 px, Seitenverhältnis 600 : 240. */
.wsl-buehne { position: fixed; z-index: 2147483001; inset: 0; pointer-events: auto; }
.wsl-grund { position: absolute; inset: 0; background: var(--black, #080808); opacity: 0; }
.wsl-logo { position: absolute; top: calc(50% - min(14vw, 112px)); left: calc(50% - min(35vw, 280px)); width: min(70vw, 560px); height: min(28vw, 224px); transform-origin: 0 0; }
.wsl-logo :is(svg, img) { display: block; width: 100%; height: 100%; overflow: visible; }
.wsl-quelle img { opacity: 0 !important; }
/* Auf der Startseite: Grund und Logo als Pseudo-Elemente am html, so stehen sie schon beim ersten Bild (das Skript setzt die
   Klasse im Kopf). Das Logo fliegt an seinen Platz im Kopf (--wsl-x, --wsl-y, --wsl-s misst das Skript), die Seite blendet auf. */
html.wsl-ankunft::before { position: fixed; z-index: 2147483002; inset: 0; background: var(--black, #080808); content: ""; pointer-events: none; }
html.wsl-ankunft::after { position: fixed; z-index: 2147483003; top: calc(50% - min(14vw, 112px)); left: calc(50% - min(35vw, 280px)); width: min(70vw, 560px); height: min(28vw, 224px); background: url("assets/27-archive-logo.svg?v=2") 0 0 / 100% 100% no-repeat; content: ""; pointer-events: none; transform-origin: 0 0; }
html.wsl-ankunft .site-header :is(.brand-logo, .wordmark img) { opacity: 0; }
html.wsl-ankunft-los::after { animation: wsl-heim .62s cubic-bezier(.65, 0, .25, 1) forwards; }
html.wsl-ankunft-los::before { animation: wsu-ausblenden .5s ease .1s forwards; }
@keyframes wsl-heim { to { transform: translate(var(--wsl-x, 0px), var(--wsl-y, 0px)) scale(var(--wsl-s, .12)); } }
/* Notbremse wie bei den anderen Übergängen. */
html.wsl-ankunft:not(.wsl-ankunft-los)::before, html.wsl-ankunft:not(.wsl-ankunft-los)::after { animation: wsu-notaus .3s ease 2.6s forwards; }

@media (prefers-reduced-motion: reduce) {
  .wsu-vorhang, .wsl-buehne { display: none !important; }
  html.wsl-ankunft::before, html.wsl-ankunft::after { display: none !important; }
}