/* So funktioniert's: drei Szenen (erklaerung.js, 08.11.2026). Startseite (jacke-gesucht.*) und Formular (wir-suchen.*) nutzen
   genau diese Datei, der Vorsatz ae- stößt mit jg- und ws- nicht zusammen. Szene 2 seit 08.11. abends: das Netz durchsuchen. Eckig, schwarzweiß, kein Gold. Die Farben stehen hier
   selbst, die Datei braucht keine styles.css. Breite oder schmale Fassung richtet sich nach dem Behälter, nicht nach dem Bildschirm.
   Klassen am Schritt: ae-an (spielt gerade), ae-fertig, dazu je Schritt ae-drueckt/-weg, ae-sucht/-findet/-vergleicht/-gefunden,
   ae-da/-knopf. */

.ae-erklaerung {
  --ae-schwarz: #080808;
  --ae-flaeche: #111111;
  --ae-flaeche-2: #181818;
  --ae-papier: #e8e8e5;
  --ae-grau: #92928f;
  --ae-dunkel: #5d5d5b;
  --ae-linie: rgba(232, 232, 229, .19);
  --ae-linie-weich: rgba(232, 232, 229, .09);
  --ae-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --ae-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ae-weich: cubic-bezier(.2, .75, .25, 1);
  container: ae / inline-size;
  color: var(--ae-papier);
}
.ae-erklaerung *, .ae-erklaerung *::before, .ae-erklaerung *::after { box-sizing: border-box; }
.ae-erklaerung p { margin: 0; }
.ae-erklaerung img { display: block; }

.ae-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); margin: 0; padding: 0; list-style: none; }
.ae-schritt { position: relative; background: var(--ae-flaeche); border: 1px solid var(--ae-linie-weich); opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1), border-color .4s ease; transition-delay: calc(.08s + var(--n) * 90ms), calc(.08s + var(--n) * 90ms), 0s; }
.ae-sichtbar .ae-schritt { opacity: 1; transform: none; }
.ae-schritt.ae-an { border-color: var(--ae-linie); }
.ae-bild { position: relative; height: 176px; overflow: hidden; background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(232, 232, 229, .06), transparent 72%), var(--ae-schwarz); border-bottom: 1px solid var(--ae-linie-weich); transition: opacity .4s ease; }
.ae-blende .ae-bild { opacity: 0; }
/* Mittig über left/top: ein Grid würde die größere Bühne nach unten rechts schieben, sobald sie skaliert kleiner als ihr Platz ist. */
.ae-flaeche { --ae-mass: 1; position: absolute; left: 50%; top: 50%; width: 230px; height: 176px; margin: -88px 0 0 -115px; transform: scale(var(--ae-mass)); }
.ae-text { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 14px; padding: 16px 16px 20px; }
.ae-nr { color: var(--ae-dunkel); font: 9px/1 var(--ae-mono); letter-spacing: .15em; transition: color .4s ease; }
.ae-an .ae-nr, .ae-fertig .ae-nr { color: var(--ae-papier); }
.ae-name { color: var(--ae-papier); font: 10.5px/1.4 var(--ae-mono); letter-spacing: .14em; text-transform: uppercase; }
.ae-satz { grid-column: 2; color: var(--ae-grau); font: 11px/1.7 var(--ae-mono); }
/* Fortschritt: ein weißer Strich auf der Unterkante der Kachel. */
.ae-lauf { position: absolute; right: -1px; bottom: -1px; left: -1px; height: 2px; overflow: hidden; }
.ae-lauf::after { content: ""; position: absolute; inset: 0; background: var(--ae-papier); transform: scaleX(0); transform-origin: left; }
.ae-an .ae-lauf::after { transform: scaleX(1); transition: transform var(--dauer) linear; }
.ae-fertig .ae-lauf::after { transform: scaleX(1); }

/* 1: Formular */
.ae-blatt { position: absolute; left: 22px; top: 12px; width: 186px; padding: 4px 12px 10px; background: var(--ae-flaeche-2); border: 1px solid var(--ae-linie); box-shadow: 0 18px 30px -18px #000; transition: transform .8s cubic-bezier(.45, 0, .55, 1), opacity .6s ease .15s; }
.ae-weg .ae-blatt { opacity: 0; transform: translate(60px, -40px) rotate(-6deg) scale(.7); }
.ae-zeile { display: grid; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--ae-linie-weich); }
.ae-zeile small { color: var(--ae-grau); font: 7.5px/1 var(--ae-mono); letter-spacing: .16em; text-transform: uppercase; }
.ae-wert { min-height: 15px; color: var(--ae-papier); font: 11px/15px var(--ae-mono); white-space: nowrap; }
.ae-tippt::after { content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 1px; vertical-align: -2px; background: var(--ae-papier); animation: ae-cursor .8s steps(1) infinite; }
@keyframes ae-cursor { 50% { opacity: 0; } }
.ae-senden { display: inline-block; float: right; margin-top: 9px; padding: 6px 10px; color: var(--ae-schwarz); background: var(--ae-papier); font: 8px/1 var(--ae-mono); letter-spacing: .14em; text-transform: uppercase; }
.ae-drueckt .ae-senden { animation: ae-druck .45s ease; }
@keyframes ae-druck { 40% { transform: scale(.88); } }
.ae-gesendet { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 11px; color: var(--ae-papier); background: var(--ae-schwarz); border: 1px solid var(--ae-linie); font: 9px/1 var(--ae-mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .2s ease, transform .3s ease; }
.ae-weg .ae-gesendet { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .4s ease .45s, transform 1s cubic-bezier(.2, .75, .25, 1) .45s; }
.ae-gesendet svg { width: 14px; height: 14px; fill: none; stroke: var(--ae-papier); stroke-width: 2; }

/* 2: Das Netz durchsuchen. Klassen am Schritt: ae-sucht (Impulse, Seiten leuchten auf), ae-findet (Karten fliegen in die Reihe,
   das Netz tritt zurück), ae-vergleicht (Strich fährt darüber), ae-gefunden (die Nuptse steigt nach vorn, „Bestes Angebot“). */
.ae-netz { position: absolute; inset: 0; transition: opacity 1s ease; }
.ae-findet .ae-netz { opacity: .2; }
.ae-netz-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; }
.ae-faden { stroke: rgba(232, 232, 229, .2); stroke-width: 1; stroke-dasharray: .1 3.4; }
/* Ein Impuls: ein kurzes helles Stück, das von der Kugel zur Seite läuft. */
.ae-impuls { stroke: var(--ae-papier); stroke-width: 1.3; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; }
.ae-sucht .ae-impuls { animation: ae-impuls 1s cubic-bezier(.4, 0, .3, 1) calc(var(--i) * 260ms) both; }
@keyframes ae-impuls { 0% { stroke-dashoffset: 16; opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
/* Kugel aus Punkten: gepunktete Kreise, drei Längengrade drehen sich (Breite über scaleX, versetzt). */
.ae-kugel-grund { fill: var(--ae-schwarz); }
.ae-kugel { stroke: rgba(232, 232, 229, .62); stroke-width: 1.3; stroke-dasharray: .1 2.7; }
.ae-kugel > circle { stroke: rgba(232, 232, 229, .85); stroke-dasharray: .1 2.2; }
.ae-meridian { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(.55); }
.ae-sichtbar .ae-meridian { animation: ae-drehen 5s cubic-bezier(.37, 0, .63, 1) calc(var(--m) * -1.07s) infinite alternate; }
.ae-steht .ae-meridian { animation-play-state: paused; }
@keyframes ae-drehen { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
/* Seiten im Netz: kleine Fenster mit Leiste und zwei Zeilen. Beim Durchsuchen blinken sie auf, ein heller Streifen tastet sie ab. */
.ae-seite { position: absolute; width: 40px; height: 26px; overflow: hidden; background: var(--ae-flaeche-2); border: 1px solid var(--ae-linie); opacity: .6; }
.ae-seite::before { position: absolute; top: 0; right: 0; left: 0; height: 6px; background: rgba(232, 232, 229, .07); border-bottom: 1px solid var(--ae-linie-weich); content: ""; }
.ae-seite i { position: absolute; left: 5px; height: 2px; background: rgba(232, 232, 229, .3); }
.ae-seite i:first-child { top: 11px; width: 24px; }
.ae-seite i:last-child { top: 17px; width: 15px; }
.ae-seite::after { position: absolute; top: 0; right: 0; left: 0; height: 9px; background: linear-gradient(transparent, rgba(232, 232, 229, .6), transparent); content: ""; opacity: 0; transform: translateY(-10px); }
.ae-sucht .ae-seite { animation: ae-aufblinken 1.2s cubic-bezier(.4, 0, .3, 1) calc(var(--i) * 260ms + 600ms) both; }
.ae-sucht .ae-seite::after { animation: ae-tasten 1s ease-in-out calc(var(--i) * 260ms + 600ms) both; }
@keyframes ae-aufblinken { 0% { opacity: .6; } 30% { opacity: 1; border-color: var(--ae-papier); transform: scale(1.04); } 100% { opacity: .9; transform: none; } }
@keyframes ae-tasten { 0% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(28px); } }
/* Fundstücke: kleine Angebotskarten mit Foto und Preisschild. Sie fliegen aus ihrer Seite in die Reihe, mit Feder. */
.ae-funde { position: absolute; inset: 0; }
.ae-karte { position: absolute; top: 0; left: 0; z-index: 1; display: grid; width: 44px; background: var(--ae-flaeche-2); border: 1px solid var(--ae-linie); box-shadow: 0 10px 18px -10px #000; opacity: 0; transform: translate(var(--vx), var(--vy)) scale(.3); transition: transform 1.2s cubic-bezier(.25, .8, .3, 1) calc(var(--k) * 200ms), opacity .6s ease calc(var(--k) * 200ms), border-color .4s ease; }
.ae-foto { display: grid; height: 40px; place-items: center; overflow: hidden; background: var(--ae-schwarz); transition: background .4s ease; }
.ae-jacke { width: 92%; height: 92%; fill: none; stroke: var(--ae-papier); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease; }
.ae-jacke .ae-innen { stroke-width: 1.8; opacity: .7; }
/* Das beste Angebot kippt auf hell mit dunkler Linie. */
.ae-gefunden .ae-karte-bestes .ae-jacke { stroke: var(--ae-schwarz); }
.ae-preis { display: block; padding: 4px 0; color: var(--ae-papier); font: 7.5px/1 var(--ae-mono); letter-spacing: .05em; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s ease, background-color .3s ease; }
.ae-ziffern { font-weight: inherit; }
/* Ohne rattelnde Ziffern steht ein Balken da, nie eine Zahl. */
.ae-ziffern:empty::before { display: inline-block; width: 14px; height: 4px; vertical-align: 0; background: currentColor; content: ""; opacity: .4; }
.ae-findet .ae-karte { opacity: 1; transform: translate(var(--zx), var(--zy)); }
/* Vergleich: ein heller Strich fährt über die Reihe, jede Karte zuckt kurz, wenn er sie streift. */
.ae-strich { position: absolute; top: 50px; left: 0; z-index: 2; width: 2px; height: 78px; background: var(--ae-papier); box-shadow: 0 0 10px 2px rgba(232, 232, 229, .35); opacity: 0; transform: translateX(4px); }
.ae-vergleicht .ae-strich { animation: ae-vergleich 1.5s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes ae-vergleich { 0% { opacity: 0; transform: translateX(4px); } 12% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; transform: translateX(224px); } }
.ae-vergleicht .ae-foto { animation: ae-gestreift .7s ease calc(180ms + var(--k) * 320ms) both; }
@keyframes ae-gestreift { 50% { transform: scale(1.04); } }
/* Das beste Angebot: steigt nach vorn, wird größer, heller Rahmen und Haken. Die anderen treten dunkel zurück. */
.ae-gefunden .ae-karte { opacity: .28; transform: translate(var(--zx), var(--zy)) scale(.9); transition: transform 1s cubic-bezier(.25, .8, .3, 1), opacity .8s ease, border-color .6s ease; }
.ae-gefunden .ae-karte-bestes { z-index: 3; border-color: var(--ae-papier); box-shadow: 0 0 0 1px var(--ae-papier), 0 16px 26px -10px #000; opacity: 1; transform: translate(var(--zx), calc(var(--zy) - 4px)) scale(1.3); }
.ae-gefunden .ae-karte-bestes .ae-preis { color: var(--ae-schwarz); background: var(--ae-papier); }
.ae-karte-bestes::after { position: absolute; top: -7px; right: -7px; width: 14px; height: 14px; background: var(--ae-papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23080808' stroke-width='3'/%3E%3C/svg%3E") center / 10px no-repeat; content: ""; opacity: 0; transform: scale(0); }
.ae-gefunden .ae-karte-bestes::after { opacity: 1; transform: none; transition: opacity .2s ease .3s, transform .8s cubic-bezier(.25, .8, .3, 1) .6s; }
.ae-schild { position: absolute; top: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px 5px 6px; color: var(--ae-schwarz); background: var(--ae-papier); font: 7px/1 var(--ae-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px) scale(.7); transition: opacity .2s ease, transform .3s ease; }
.ae-schild svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3; }
.ae-gefunden .ae-schild { opacity: 1; transform: translate(-50%, 0); transition: opacity .5s ease .6s, transform 1s cubic-bezier(.25, .8, .3, 1) .6s; }

/* Zurück auf Anfang ohne sichtbares Zurückfliegen (erklaerung.js setzt ae-sofort nur für einen Augenblick). Nur in den Szenen:
   Kacheln, die gerade einsteigen, und das weiche Wiederkommen der Bühne nach der Blende laufen ungestört weiter. */
.ae-sofort .ae-bild *, .ae-sofort .ae-bild *::before, .ae-sofort .ae-bild *::after { transition: none !important; animation: none !important; }

/* 3: Mail auf dem Sperrbildschirm */
.ae-uhr { position: absolute; left: 0; right: 0; top: 12px; color: var(--ae-papier); font: 300 38px/1 var(--ae-sans); letter-spacing: -.02em; text-align: center; }
.ae-banner { position: absolute; left: 12px; right: 12px; top: 62px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; align-items: center; gap: 9px; padding: 9px 10px; background: var(--ae-flaeche-2); border: 1px solid var(--ae-linie); border-radius: 2px; box-shadow: 0 16px 30px -14px #000; opacity: 0; transform: translateY(-90px); transition: transform .35s ease, opacity .25s ease; }
.ae-da .ae-banner-wa { opacity: 1; transform: none; transition: transform 1.1s cubic-bezier(.2, .75, .25, 1), opacity .6s ease; }
/* Dann weicht die WhatsApp-Nachricht nach oben aus und die Mail nimmt ihren Platz ein. */
.ae-mailda .ae-banner-wa { opacity: 0; transform: translateY(-14px); transition: transform .8s ease, opacity .6s ease; }
.ae-banner-mail { transform: translateY(14px); }
.ae-mailda .ae-banner-mail { opacity: 1; transform: none; transition: transform 1.1s cubic-bezier(.2, .75, .25, 1) .5s, opacity .6s ease .5s; }
.ae-banner-wa { grid-template-columns: 28px minmax(0, 1fr); }
.ae-banner .ae-app-wa { background: #7fd99a; border-color: transparent; }
.ae-banner .ae-app-wa svg { width: 18px; height: 18px; fill: none; stroke: var(--ae-schwarz); stroke-width: 1.8; stroke-linejoin: round; }
.ae-mail .ae-blase { overflow: visible; margin-top: 3px; padding: 4px 6px; color: var(--ae-schwarz); background: #bfeccc; border-radius: 2px 7px 7px 7px; white-space: normal; text-wrap: balance; }
.ae-app { display: grid; width: 28px; height: 28px; place-items: center; background: var(--ae-schwarz); border: 1px solid var(--ae-linie-weich); }
.ae-app img { width: 22px; height: auto; }
.ae-mail { min-width: 0; color: var(--ae-papier); font: 8.5px/1.4 var(--ae-mono); }
.ae-mail p { display: flex; justify-content: space-between; letter-spacing: .1em; }
.ae-mail b { font-weight: inherit; }
.ae-mail small { color: var(--ae-grau); font-size: 8px; }
.ae-mail strong, .ae-mail span { display: block; overflow: hidden; font-weight: inherit; text-overflow: ellipsis; white-space: nowrap; }
.ae-mail span { color: var(--ae-grau); }
.ae-vorschau { width: 32px; height: 32px; padding: 2px; object-fit: contain; background: #fff; }
.ae-ansehen { position: absolute; left: 50%; top: 138px; padding: 8px 12px; color: var(--ae-schwarz); background: var(--ae-papier); font: 8px/1 var(--ae-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s ease, transform .3s ease; }
.ae-knopf .ae-ansehen { opacity: 1; transform: translate(-50%, 0); transition: opacity .5s ease, transform .9s cubic-bezier(.2, .75, .25, 1); }
/* Ein feiner Rahmen geht zweimal vom Knopf aus (nur transform und opacity). */
.ae-ansehen::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ae-papier); opacity: 0; }
.ae-knopf .ae-ansehen::after { animation: ae-puls 2.2s ease-out 1s 2; }
@keyframes ae-puls { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.25, 1.6); } }

/* Mittlere Breite: die Szenen etwas kleiner, damit sie in ihren Kacheln Luft haben. */
@container ae (max-width: 900px) and (min-width: 621px) {
  .ae-flaeche { --ae-mass: .86; }
  .ae-bild { height: 152px; }
}
/* Schmal: eine gemeinsame Bühne oben zeigt die Szene des Schritts, der gerade spielt, darunter die drei Schritte als Zeilen. */
@container ae (max-width: 620px) {
  .ae-schritte { position: relative; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 166px; }
  /* Ohne Verschiebung: eine verschobene Zeile würde die Bühne zu sich herunterziehen. */
  .ae-schritt, .ae-sichtbar .ae-schritt { position: static; transform: none; }
  /* Rahmen und Grund der Bühne stehen fest, beim Wechsel tauscht nur die Szene darin. */
  .ae-schritte::before { position: absolute; top: 0; right: 0; left: 0; height: 156px; background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(232, 232, 229, .06), transparent 72%), var(--ae-schwarz); border: 1px solid var(--ae-linie-weich); content: ""; }
  /* Wechsel ohne Überlappung: die alte Szene geht in 0,22 s mit einem Hauch Verkleinerung, erst danach kommt die neue. */
  .ae-bild { position: absolute; top: 0; right: 0; left: 0; height: 156px; background: none; border: 0; opacity: 0; transform: scale(.97); transition: opacity .4s ease, transform .4s ease; }
  /* Vor dem ersten Schritt steht Szene 1, nach dem letzten bleibt Szene 3 stehen. */
  .ae-an .ae-bild,
  .ae-schritte:not(:has(.ae-an, .ae-fertig)) .ae-schritt:first-child .ae-bild,
  .ae-schritte:not(:has(.ae-an)) .ae-schritt.ae-fertig:last-child .ae-bild { opacity: 1; transform: none; transition: opacity .5s ease .45s, transform .8s cubic-bezier(.2, .75, .25, 1) .45s; }
  /* Vor dem Neustart geht auch die stehengebliebene Szene 3 ganz aus, dann kommt Szene 1. */
  .ae-erklaerung.ae-blende .ae-bild { opacity: 0 !important; transform: scale(.97) !important; transition: opacity .4s ease, transform .4s ease !important; }
  .ae-flaeche { --ae-mass: .86; }
  .ae-text { padding: 13px 14px 10px; }
  .ae-schritt:not(.ae-an) .ae-text { opacity: .6; transition: opacity .4s ease; }
  .ae-sichtbar .ae-schritte:not(:has(.ae-an)) .ae-text { opacity: 1; }
  .ae-satz { font-size: 10.5px; }
  .ae-lauf { position: relative; right: auto; bottom: auto; left: auto; display: block; margin: 0 14px 13px 41px; background: var(--ae-linie-weich); }
}

@media (prefers-reduced-motion: reduce) {
  .ae-tippt::after, .ae-ansehen::after, .ae-senden, .ae-meridian, .ae-impuls, .ae-seite, .ae-seite::after, .ae-strich, .ae-foto { animation: none !important; }
  .ae-schritt, .ae-bild, .ae-blatt, .ae-gesendet, .ae-banner, .ae-ansehen, .ae-lauf::after, .ae-text, .ae-netz, .ae-karte, .ae-karte::after, .ae-schild, .ae-preis { transition: none !important; }
}

.ae-gefunden .ae-karte-bestes .ae-foto { background: #fff; }