/* Jacke gesucht? Wir finden sie. Bereich auf der Startseite (08.11.2026), nach Michas Entwurf (Foto IMG_0269): randlos, tiefschwarz,
   eine dunkle Jacke im Studio, mittig die Überschrift, Kleintext in den Ecken, eckig, kein Gold. Gestaltungsmittel von der Seite:
   Überschrift in --display, Kleintext in --mono wie .eyebrow, Knopf .button .button-light, Farben aus den Seiten-Tokens.
   Alles trägt den Vorsatz jg-. jacke-gesucht.js baut den Bereich (seit dem Livegang am 10.11.2026 auch live). Seit dem 08.11. abends
   mit dem Suchfeld (Michas Wahl): ein Wunsch tippt sich ein, dahinter baut sich die Jacke aus Teilchen auf (Canvas, jacke-gesucht.js).
   Bewegt wird nur über transform und opacity, ohne backdrop-filter (kostete in Chrome ein Viertel der Bilder). */
.jg-block { position: relative; color: var(--paper); background: var(--black); border-bottom: 1px solid var(--line); }
/* Im hellen Design bleibt der Bereich schwarz wie im Entwurf: hier gelten die Seiten-Tokens mit ihren dunklen Werten. */
:root[data-theme="light"] .jg-block { color-scheme: dark; --black: #080808; --panel: #111111; --panel-2: #181818; --paper: #e8e8e5; --muted: #92928f; --dim: #5d5d5b; --line: rgba(232, 232, 229, .19); --line-soft: rgba(232, 232, 229, .09); --ink-rgb: 232, 232, 229; }
/* Im hellen Design dreht styles.css das Logo auf Schwarz, auf dem dunklen App-Symbol muss es weiß bleiben. */
:root[data-theme="light"] .jg-block .jg-erklaer .ae-app img.ae-logo { filter: none; }

/* ---------- Bühne: etwa ein Bildschirm hoch, der Inhalt sitzt wie im Foto mittig etwas unter der Mitte ---------- */
.jg-buehne { position: relative; isolation: isolate; display: grid; min-height: clamp(600px, calc(100vh - 62px), 1000px); min-height: clamp(600px, calc(100svh - 62px), 1000px); align-content: end; justify-items: center; overflow: hidden; padding: 150px var(--gutter) clamp(78px, 11vh, 118px); }
/* Schwarz mit feinem Korn: zu Beginn jeder Suche ist der Hintergrund leer. */
.jg-szene { position: absolute; z-index: -1; inset: 0; overflow: hidden; isolation: isolate; background: var(--black); pointer-events: none; }
/* Die gesuchten Jacken (echte Shop-Fotos, freigestellt): groß hinter der Überschrift, oben mit Luft, der Saum läuft unten aus
   dem Bild. Das Foto kommt erst, wenn die Teilchen eingerastet sind (kurz verzögert, mit einem Hauch Verkleinerung), und geht
   beim Löschen ohne Bewegung, damit es genau dort in Teilchen zerfällt. jacke-gesucht.js schaltet jg-bald, jg-da und jg-geht. */
.jg-jacken { position: absolute; inset: 5% 4% -6%; }
.jg-jacke { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; opacity: 0; transform: scale(1.035); transform-origin: 50% 32%; transition: opacity .5s ease, transform .6s ease; }
/* Eigene Ebene nur kurz vor dem Einblenden; danach bringt der Übergang sie selbst mit und gibt sie wieder frei. */
.jg-jacke.jg-bald { will-change: transform, opacity; }
.jg-jacke.jg-da { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.4, 0, .2, 1) .22s, transform 2.4s cubic-bezier(.16, 1, .3, 1) .22s; }
.jg-jacke.jg-geht { opacity: 0; transform: none; transition: opacity .5s ease; }
/* Teilchenwolke (Canvas 2D, jacke-gesucht.js): über den Fotos, unter Abdunklung und Korn. */
.jg-wolke { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.6s ease .4s; }
/* Feste Abdunklung: zu den Rändern und nach unten ins Schwarz, hinter der Schrift etwas tiefer, damit sie immer lesbar bleibt. */
.jg-schatten { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 26% at 50% 54%, rgba(8, 8, 8, .42), transparent), radial-gradient(ellipse 72% 78% at 50% 40%, transparent 46%, rgba(8, 8, 8, .66) 82%, var(--black)), linear-gradient(to bottom, rgba(8, 8, 8, .3), transparent 22%, transparent 66%, var(--black)); }
.jg-korn { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
.jg-ruht :is(.jg-cursor, .jg-fund-punkt) { animation-play-state: paused; }

/* ---------- Ecken: Kleintext in Mono wie die Brauen der Seite ---------- */
.jg-ecke { position: absolute; z-index: 1; margin: 0; }
.jg-ecke-ol { top: clamp(26px, 4.3vw, 62px); left: var(--gutter); gap: 14px; }
.jg-ecke-ol > span:first-child { width: 32px; transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1) .35s; }
.jg-ecke-ol b { color: var(--paper); font-weight: inherit; }
.jg-ecke-or, .jg-ecke-ul { color: var(--muted); font: 8px/1.95 var(--mono); letter-spacing: .2em; }
.jg-ecke-or { top: clamp(26px, 4.3vw, 62px); right: var(--gutter); display: flex; gap: 18px; text-align: right; }
.jg-ecke-or p { margin: 0; padding-top: 1px; }
.jg-haar { display: block; width: 1px; height: clamp(72px, 7.6vw, 110px); background: var(--line); transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) .5s; }
.jg-ecke-ul { bottom: clamp(26px, 4.3vw, 62px); left: var(--gutter); }
.jg-ecke-text { display: block; transition: opacity 1.1s ease .95s; }
.jg-ecke-ul .jg-ecke-text { transition-delay: 1.7s; }

/* ---------- Mitte ---------- */
.jg-mitte { position: relative; z-index: 1; display: grid; width: 100%; max-width: 100%; justify-items: center; text-align: center; }
.jg-titel { margin: 0; color: var(--paper); font: 900 clamp(40px, 6.4vw, 108px)/.9 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
/* Zeile für Zeile: jede steigt aus einem Schlitz, der nur unten schneidet (oben und seitlich bleibt Luft für die Schrift). */
.jg-zeile { display: block; clip-path: inset(-.5em -1em -.08em -1em); }
.jg-zeile + .jg-zeile { margin-top: .05em; }
.jg-zeile > span { display: inline-block; transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), opacity .9s ease; transition-delay: calc(.5s + var(--z) * .22s); }
/* Suchfeld: eckig, dünner heller Rahmen, gezeichnete Lupe, Mono in Versal und gesperrt. Es ist ein Link auf wir-suchen.html
   wie der Knopf. Der Grund ist nur abgedunkelt (kein backdrop-filter über den bewegten Jacken). */
html:root .jg-block a.jg-suche:any-link { display: flex; width: min(580px, 100%); height: 58px; align-items: center; gap: 16px; margin-top: clamp(30px, 3.4vw, 46px); padding: 0 20px 0 19px; color: var(--paper); background: rgba(8, 8, 8, .58); border: 1px solid rgba(232, 232, 229, .5); text-align: left; transition: border-color .4s ease, background-color .3s ease, opacity 1s ease .95s, transform 1.2s cubic-bezier(.16, 1, .3, 1) .95s; }
html:root .jg-treffer a.jg-suche:any-link { border-color: rgba(232, 232, 229, .85); }
/* Überfahren nur mit echter Maus: Am Handy bliebe der Zustand nach dem Antippen sonst stehen. */
@media (hover: hover) and (pointer: fine) {
  html:root .jg-block a.jg-suche:any-link:hover { border-color: rgba(232, 232, 229, .85); background: rgba(8, 8, 8, .8); }
}
.jg-lupe { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; }
/* width 0: der getippte Text zählt nicht zur Mindestbreite des Felds, sonst wüchse es auf dem Handy beim Tippen mit. */
.jg-suche-zeile { display: flex; width: 0; min-width: 0; flex: 1 1 0; align-items: center; overflow: hidden; white-space: nowrap; font: 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* Zeilenhöhe 1.5: bei 1 schnitt overflow die Punkte von Ö und Ü oben ab („GROSSE“ statt „GRÖSSE“). */
.jg-suche-text { overflow: hidden; line-height: 1.5; }
/* Cursor: steht beim Tippen still, blinkt, wenn das Feld wartet oder etwas gefunden hat. */
.jg-cursor { width: 2px; height: 1.3em; flex: none; margin-left: 1px; background: var(--paper); animation: jg-blinken 1.06s steps(1) infinite; }
.jg-tippt .jg-cursor { animation: none; }
@keyframes jg-blinken { 50% { opacity: 0; } }
/* „Gefunden“ (Micha, 08.11.: „bisschen besser animiert, mit Farbe“): der einzige Farbtupfer im Schwarzweiß, das Grün für „passt“
   aus dem Legit-Test (legit-test.css --gruen), kein Gelb, kein Gold. Im Moment, in dem die Teilchen einrasten, ploppt ein grüner
   Punkt mit Feder auf, ein Ring pulst einmal von ihm weg wie ein Radar-Ping, das Wort rattert Buchstabe für Buchstabe herein
   (jeder rollt über drei Zufallszeichen, nur transform), ein Hauch grüner Schein kommt mit. Danach steht es ruhig, der Punkt
   atmet langsam. Beim Löschen geht alles zusammen weich raus. Die Grundwerte sind der fertige Zustand, die Animationen bringen
   nur den Auftritt: bei „Bewegung reduzieren“ steht es so fertig da. Nur transform und opacity. */
.jg-block { --jg-gruen: #8fc7a0; --jg-gruen-rgb: 143, 199, 160; }
.jg-fund { position: relative; isolation: isolate; display: inline-flex; flex: none; align-items: center; gap: 9px; color: var(--jg-gruen); font: 8.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateX(-4px); transition: opacity .22s ease, transform .3s ease; }
.jg-treffer .jg-fund { opacity: 1; transform: none; transition: opacity .12s linear .18s, transform .5s cubic-bezier(.16, 1, .3, 1) .18s; }
.jg-fund::before { content: ""; position: absolute; z-index: -1; inset: -12px -16px; background: radial-gradient(closest-side, rgba(var(--jg-gruen-rgb), .2), transparent); opacity: .5; pointer-events: none; }
.jg-fund-zeichen { position: relative; width: 6px; height: 6px; flex: none; }
.jg-fund-punkt, .jg-fund-ring { position: absolute; border-radius: 50%; }
.jg-fund-punkt { inset: 0; background: var(--jg-gruen); box-shadow: 0 0 7px rgba(var(--jg-gruen-rgb), .6); }
/* Der Ring ist von vornherein groß und geht aus kleiner Größe auf: so bleibt seine Linie fein statt mitzuwachsen. */
.jg-fund-ring { inset: -15px; border: 1px solid var(--jg-gruen); opacity: 0; }
.jg-fund-wort { display: inline-flex; }
.jg-fund-z { display: block; height: 1em; overflow: hidden; font-weight: inherit; }
.jg-fund-z > span { display: block; transform: translateY(-3em); }
.jg-treffer .jg-fund::before { animation: jg-fund-schein 1.2s ease-out .16s both; }
.jg-treffer .jg-fund-punkt { animation: jg-fund-plopp .62s cubic-bezier(.3, .7, .4, 1) .18s both, jg-fund-atmen 2.8s ease-in-out 1.3s infinite alternate; }
.jg-treffer .jg-fund-ring { animation: jg-fund-ping 1s cubic-bezier(.15, .6, .3, 1) .3s forwards; }
.jg-treffer .jg-fund-z { animation: jg-fund-auf .01s linear calc(.24s + var(--i) * 34ms) both; }
/* Der letzte Sprung liegt bei 75 % und hält bis zum Ende: WebKit zeichnet den Sprung genau am Ende von steps() sonst nicht
   (dann blieb der letzte Buchstabe auf einem Zufallszeichen stehen, „GEFUNDED“). */
.jg-treffer .jg-fund-z > span { animation: jg-fund-rattern .26s steps(1, end) calc(.24s + var(--i) * 34ms) both; }
@keyframes jg-fund-plopp { 0% { transform: scale(0); } 45% { transform: scale(1.55); } 68% { transform: scale(.82); } 86% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes jg-fund-atmen { to { opacity: .7; transform: scale(.8); } }
@keyframes jg-fund-ping { from { opacity: .95; transform: scale(.2); } to { opacity: 0; transform: none; } }
@keyframes jg-fund-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes jg-fund-rattern { 0% { transform: none; } 25% { transform: translateY(-1em); } 50% { transform: translateY(-2em); } 75%, 100% { transform: translateY(-3em); } }
@keyframes jg-fund-schein { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: .5; } }
.jg-unter { display: grid; gap: 5px; margin: clamp(20px, 2.2vw, 30px) 0 0; color: var(--paper); font: 10.5px/1.7 var(--mono); letter-spacing: .2em; text-transform: uppercase; transition: opacity 1s ease 1.05s, transform 1.2s cubic-bezier(.16, 1, .3, 1) 1.05s; }
.jg-unter span { opacity: .8; text-wrap: balance; }
.jg-handlung { display: grid; justify-items: center; gap: 20px; margin-top: clamp(28px, 3.3vw, 44px); transition: opacity 1s ease 1.3s, transform 1.2s cubic-bezier(.16, 1, .3, 1) 1.3s; }

/* Knopf: .button .button-light der Seite, hier wie im Foto nur mit Rahmen (kein Glas: backdrop-filter über bewegtem Bild).
   Mit html:root davor, weil die Seite im hellen Design a.button:any-link eigens färbt.
   Überfahren (Micha, 08.11.: das Nachzeichnen des Rahmens „gefällt mir nicht“): ruhig und sauber. Von links schiebt sich eine
   helle Fläche hinein (::before, scaleX), die Schrift wechselt weich auf Schwarz, der Pfeil gleitet ein Stück nach rechts. Beim
   Verlassen läuft die Fläche nach rechts hinaus. Kein zweiter Rahmen, kein Glühen, kein Hüpfen (styles.css hebt .button sonst
   beim Überfahren um 2 px an). Drücken: kurz .98. Nur auf Geräten mit echtem Überfahren, beim Antippen bleibt der Knopf ruhig. */
html:root .jg-block a.button.jg-knopf:any-link { position: relative; isolation: isolate; overflow: hidden; min-height: 52px; gap: 16px; padding: 0 24px 0 30px; color: var(--paper); border-color: rgba(232, 232, 229, .65); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 10.5px; letter-spacing: .16em; -webkit-tap-highlight-color: transparent; transition: color .35s cubic-bezier(.65, 0, .35, 1), transform .16s ease; }
html:root .jg-block a.button.jg-knopf:any-link:hover { color: var(--paper); background: transparent; box-shadow: none; transform: none; }
html:root .jg-block a.button.jg-knopf:any-link:active { transform: scale(.98); }
html:root .jg-block a.button.jg-knopf:any-link:focus-visible { outline: 1px solid var(--paper); outline-offset: 5px; }
.jg-knopf::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
.jg-pfeil { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) and (pointer: fine) {
  html:root .jg-block a.button.jg-knopf:any-link:hover { color: var(--black); }
  .jg-knopf:hover::before { transform: none; transform-origin: 0 50%; }
  .jg-knopf:hover .jg-pfeil { transform: translateX(5px); }
}
/* Tastatur: dieselbe Fläche, dazu der Fokusrahmen mit Abstand (oben). */
html:root .jg-block a.button.jg-knopf:any-link:focus-visible { color: var(--black); }
.jg-knopf:focus-visible::before { transform: none; transform-origin: 0 50%; }
.jg-knopf:focus-visible .jg-pfeil { transform: translateX(5px); }

/* Umschalter „So funktioniert's“: gezeichnetes Plus, der senkrechte Strich fällt beim Aufklappen weg, es bleibt ein Minus. */
.jg-umschalter { display: inline-flex; min-height: 36px; align-items: center; gap: 12px; padding: 4px 8px; border: 0; color: var(--muted); background: none; font: 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; transition: color .25s; }
.jg-offen .jg-umschalter { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .jg-umschalter:hover { color: var(--paper); } }
.jg-plus { width: 10px; height: 10px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .5s var(--ease); }
.jg-plus-senkrecht { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .5s var(--ease); }
.jg-offen .jg-plus { transform: rotate(180deg); }
.jg-offen .jg-plus-senkrecht { transform: scaleY(0); }

/* ---------- Auftritt beim Hereinscrollen ---------- */
.jg-wartet :is(.jg-wolke, .jg-ecke-text) { opacity: 0; }
.jg-wartet .jg-ecke-ol > span:first-child { transform: scaleX(0); }
.jg-wartet .jg-haar { transform: scaleY(0); }
.jg-wartet .jg-zeile > span { opacity: 0; transform: translateY(115%); }
html:root .jg-wartet :is(.jg-suche, .jg-unter, .jg-handlung) { opacity: 0; transform: translateY(14px); }

/* ---------- So funktioniert's: klappt unter der Bühne auf ----------
   Die drei Szenen selbst kommen seit 08.11. abends aus erklaerung.css (Vorsatz ae-), dieselben wie im Formular. Hier steht nur die
   Hülle: Sie zieht beim Aufklappen auf, die Kacheln darin steigen ein (ae-sichtbar setzt jacke-gesucht.js). */
/* Auf: die Höhe zieht weich auf, die Kacheln steigen versetzt nach, gespielt wird erst, wenn alles steht (jacke-gesucht.js).
   Zu: genau rückwärts, erst gehen die Kacheln kurz, dann schließt die Höhe. Die Seite oberhalb bleibt stehen. */
.jg-erklaer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .7s var(--ease) .14s, visibility 0s linear .84s; }
.jg-offen .jg-erklaer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .8s var(--ease), visibility 0s; }
.jg-e-platz .ae-schritt { transition: opacity .22s ease, transform .3s ease, border-color .4s ease; }
.jg-offen .jg-e-platz .ae-schritt { transition: opacity .6s ease, transform .9s cubic-bezier(.16, 1, .3, 1), border-color .4s ease; transition-delay: calc(.24s + var(--n) * 110ms), calc(.24s + var(--n) * 110ms), 0s; }
.jg-e-innen { min-height: 0; overflow: hidden; }
.jg-e-platz { padding: clamp(30px, 3.6vw, 50px) var(--gutter) clamp(40px, 4.6vw, 64px); border-top: 1px solid var(--line-soft); }
.jg-e-platz .ae-erklaerung { max-width: 1180px; margin: 0 auto; }

@media (max-width: 760px) {
  .jg-buehne { min-height: clamp(600px, calc(100vh - 54px), 860px); min-height: clamp(600px, calc(100svh - 54px), 860px); padding: 140px var(--gutter) 104px; }
  .jg-titel { font-size: clamp(34px, 10.2vw, 64px); }
  .jg-unter { gap: 8px; font-size: 8.5px; letter-spacing: .16em; }
  .jg-ecke-or, .jg-ecke-ul { font-size: 7px; letter-spacing: .18em; }
  .jg-ecke-or { gap: 12px; }
  .jg-ecke-ol { gap: 10px; font-size: 8px; }
  .jg-ecke-ol > span:first-child { width: 20px; }
  .jg-haar { height: 62px; }
  /* Handy: die Jacke etwas breiter als der Bildschirm, oben hinter der Überschrift. */
  .jg-jacken { inset: 14% -14% auto; height: 64%; }
  /* Unter dem Suchfeld läuft die Jacke früher ins Schwarz: Saum und Kordeln stehen sonst wie Fussel neben dem Kleintext. */
  .jg-schatten { background: radial-gradient(ellipse 34% 26% at 50% 54%, rgba(8, 8, 8, .42), transparent), radial-gradient(ellipse 72% 78% at 50% 40%, transparent 46%, rgba(8, 8, 8, .66) 82%, var(--black)), linear-gradient(to bottom, rgba(8, 8, 8, .3), transparent 20%, transparent 50%, rgba(8, 8, 8, .92) 62%, var(--black) 80%); }
  html:root .jg-block a.jg-suche:any-link { height: 50px; gap: 11px; margin-top: 28px; padding: 0 13px; }
  .jg-lupe { width: 15px; height: 15px; }
  .jg-suche-zeile { font-size: 12px; letter-spacing: .1em; }
  .jg-fund { gap: 7px; font-size: 7.5px; letter-spacing: .18em; }
  .jg-fund-zeichen { width: 5px; height: 5px; }
}
/* Schmale Handys: der Wunsch muss neben „Gefunden“ in eine Zeile passen. Was dann noch fehlt, regelt einpassen in jacke-gesucht.js. */
@media (max-width: 520px) {
  .jg-suche-zeile { font-size: min(11px, 2.95vw); letter-spacing: .05em; }
}
/* ---------- Genau ein Bildschirm (Micha, 08.11.: „dass es perfekt auf eine Bildschirmgröße passt“) ----------
   Die Bühne ist so hoch wie das sichtbare Fenster ohne die Kopfleiste der Seite (62 px, ab 680 px Breite abwärts 54 px), mit
   svh, damit die Leisten von iPhone-Safari nicht stören. Sie ist ein Größen-Container: Überschrift, Feld, Knopf, Abstände und
   Ecken skalieren mit ihrer Höhe (cqh), der Inhalt sitzt mittig, so passt von den Ecktexten bis „So funktioniert's“ alles ohne
   Scrollen, auch in niedrigen Fenstern. Unter 440 px Höhe bleibt sie 440 px hoch. Die aufgeklappte Erklärung hängt darunter.
   Ohne Container-Einheiten (sehr alte Browser) gilt das Layout oben weiter. */
@supports (container-type: size) {
  /* cqh misst die Inhaltshöhe der Bühne (ohne Innenabstand), danach sind die Faktoren gewählt. */
  .jg-buehne { container-type: size; height: max(440px, calc(100vh - 62px)); height: max(440px, calc(100svh - 62px)); min-height: 0; align-content: center; padding: clamp(24px, 8svh, 110px) var(--gutter) clamp(20px, 6svh, 90px); }
  .jg-titel { font-size: clamp(30px, min(6.4vw, 16cqh), 120px); }
  html:root .jg-block a.jg-suche:any-link { height: clamp(42px, 10cqh, 58px); margin-top: clamp(14px, 5.7cqh, 56px); }
  .jg-unter { margin-top: clamp(10px, 4cqh, 34px); }
  .jg-handlung { gap: clamp(4px, 2.6cqh, 20px); margin-top: clamp(14px, 5.3cqh, 52px); }
  html:root .jg-block a.button.jg-knopf:any-link { min-height: clamp(40px, 9cqh, 52px); }
  .jg-umschalter { min-height: clamp(26px, 6.2cqh, 36px); }
  .jg-ecke-ol, .jg-ecke-or { top: clamp(16px, 7cqh, 62px); }
  .jg-ecke-ul { bottom: clamp(16px, 7cqh, 62px); }
  .jg-haar { height: clamp(36px, 13cqh, 110px); }
  @media (max-width: 760px) {
    /* Handy: die Überschrift ist so breit wie der Bildschirm, darum hält der Inhalt Abstand zu den Ecktexten oben und unten. */
    .jg-buehne { padding-top: calc(clamp(14px, 4svh, 26px) + clamp(28px, 9svh, 62px) + 14px); padding-bottom: calc(clamp(14px, 4svh, 26px) + 54px); }
    .jg-titel { font-size: clamp(28px, min(10.2vw, 10cqh), 64px); }
    html:root .jg-block a.jg-suche:any-link { height: clamp(40px, 11cqh, 50px); margin-top: clamp(12px, 6cqh, 28px); }
    .jg-unter { margin-top: clamp(10px, 4cqh, 20px); }
    .jg-handlung { gap: clamp(4px, 2.6cqh, 20px); margin-top: clamp(12px, 5.5cqh, 28px); }
    html:root .jg-block a.button.jg-knopf:any-link { min-height: clamp(40px, 11cqh, 52px); }
    .jg-umschalter { min-height: clamp(26px, 8cqh, 36px); }
    /* Die Ecken stehen im Innenabstand, sie richten sich darum nach der Fensterhöhe (svh) wie der Abstand selbst. */
    .jg-ecke-ol, .jg-ecke-or { top: clamp(14px, 4svh, 26px); }
    .jg-ecke-ul { bottom: clamp(14px, 4svh, 26px); }
    .jg-haar { height: clamp(28px, 9svh, 62px); }
  }
  @media (max-width: 680px) {
    .jg-buehne { height: max(440px, calc(100vh - 54px)); height: max(440px, calc(100svh - 54px)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .jg-cursor, .jg-fund *, .jg-fund::before { animation: none !important; }
  .jg-jacke, .jg-wolke, .jg-fund, html:root .jg-block a.jg-suche:any-link, .jg-ecke-text, .jg-haar, .jg-ecke-ol > span:first-child, .jg-zeile > span, .jg-unter, .jg-handlung,
  html:root .jg-block a.button.jg-knopf:any-link, .jg-knopf::before, .jg-pfeil, .jg-plus, .jg-plus-senkrecht, .jg-erklaer { transition: none !important; }
}