/*
 * bundlethemes – die helle Startseite bei offenem Verkauf (templates/start-offen.php).
 * Entwurf von Julius freigegeben am 11.10.2026: heller Papiergrund, Tinte, Bricolage Grotesque; Lime nur als
 * kleiner Punkt; Filme in gerundeten Formen; Produkte freigestellt ohne Kasten; sehr wenig Text.
 * Die Kasse und die Seiten danach (Zwischenseite, Rückkehrseite, Downloads) laden diese Datei als Grund und darüber
 * kasse.css: Schrift, Tokens, Kopf, Fuß, Knopf, Etikett und Pfeil kommen von hier. Wer sie ändert, sieht auch dort nach.
 * Alle anderen Seiten (Warteliste, Rechtsseiten, Hilfe, Kontakt) laden site.css und bleiben dunkel.
 *
 * Die Namen der Klassen sind die des Entwurfs (deutsch), damit sich jede Regel dort wiederfindet. Kopf und Fuß
 * kommen aus dem gemeinsamen Rahmen (templates/layout.php: .site-header, .site-footer) und werden hier hell gefasst.
 * Keine Datei von fremden Servern, kein Stil im Dokument (Content-Security-Policy: style-src 'self').
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens: ein Grund, eine Tinte, ein Zeichen. Tinte und Lime sind die Markenfarben; der Papiergrund und die drei
   Grautöne gehören nur dieser Seite. Schriftrollen: groß, Satz, klein, Etikett. */
:root {
  --papier: #F4F1EA;
  --tinte: #0E0E0E;
  --tinte-weich: #2B2B28;
  --leise: #6B675E;
  --blass: #8F8A7E;
  --zeichen: #D4FF3A;
  --film-grund: #E8E4DA;

  --rand: 20px;
  --spalt: 20px;
  --luft: 112px;
  --rund: 34px;
  --gross-1: clamp(2.5rem, 11.8vw, 3.1rem);
  --gross-2: clamp(2rem, 9vw, 2.4rem);
  --riesig: clamp(6.5rem, 34vw, 8.5rem);
  --weich: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 700px) {
  :root {
    --rand: 32px;
    --luft: 152px;
    --rund: 44px;
    --gross-1: clamp(3.6rem, 6.5vw, 6rem);
    --gross-2: clamp(2.6rem, 4.4vw, 4rem);
    --riesig: clamp(9rem, 17vw, 15.5rem);
  }
}
@media (min-width: 1100px) {
  :root { --rand: 40px; --spalt: 24px; --luft: 200px; --rund: 52px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, li, figure { margin: 0; padding: 0; font: inherit; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

/* Rahmen der Seite (layout.php) */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--tinte); color: var(--papier); font-size: .9375rem; }
.skip-link:focus { top: 12px; }
.test-note { padding: 8px var(--rand); background: var(--tinte); color: var(--papier); font-size: .8125rem; line-height: 1.3; text-align: center; }
/* Freisteller und leicht gedrehte Formen ragen ein paar Pixel über den Rand: Die Seite lässt sich deshalb nie seitlich ziehen. */
/* (hidden für ältere Browser, die clip nicht kennen) */
.site-main { overflow-x: hidden; overflow-x: clip; }

.rahmen { max-width: 1520px; margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { margin-top: var(--luft); }

/* Schriftrollen */
.etikett { font-size: .6875rem; line-height: 1.3; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.gross { font-size: var(--gross-1); line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.gross--2 { font-size: var(--gross-2); line-height: 1.04; letter-spacing: -.026em; text-wrap: balance; }
/* Längere Überschrift im ersten Bildschirm (/packs): eine Stufe kleiner. */
.gross--lang { font-size: var(--gross-2); line-height: 1.04; letter-spacing: -.026em; }
.gross--lang .zeile, .gross--lang .zeile > span { text-wrap: balance; }
.satz { font-size: 1.25rem; line-height: 1.3; }
.klein { font-size: .875rem; line-height: 1.4; color: var(--leise); }
.kopfblock { display: grid; gap: 14px; }
@media (min-width: 700px) {
  .etikett { font-size: .75rem; }
  .satz { font-size: 1.5rem; }
  .klein { font-size: .9375rem; }
  .kopfblock { gap: 20px; }
}

/* Pfeil: ein Strichzeichen, im Knopf und an den kleinen Links. */
.pfeil { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Hauptknopf: Tinte. Das Lime ist nur die kleine Scheibe mit dem Pfeil. */
.knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 8px 10px 8px 26px;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--papier);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .3s;
}
.knopf__pfeil { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--zeichen); color: var(--tinte); }
.knopf__pfeil svg { width: 17px; height: 17px; transition: translate .45s var(--weich); }
.knopf:hover { background: var(--tinte-weich); }
.knopf:hover .knopf__pfeil svg { translate: 3px 0; }
.knopf:focus-visible { outline-offset: 4px; }
@media (min-width: 700px) {
  .knopf { display: inline-flex; min-height: 68px; padding-left: 30px; font-size: 1.125rem; gap: 28px; }
  .knopf__pfeil { width: 48px; height: 48px; }
}

/* Kleine Zeichen: ein Strichzeichen, zwei bis drei Wörter. Kein Rahmen. */
.zeichen { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.zeichen li { display: flex; align-items: center; gap: 8px; font-size: .875rem; line-height: 1.2; }
.zeichen svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 700px) { .zeichen { gap: 12px 28px; } .zeichen li { font-size: .9375rem; } }

/* Frist als kleine Marke */
.marke { display: inline-block; padding: 7px 11px 6px; border-radius: 7px; background: var(--tinte); color: var(--papier); font-size: .75rem; line-height: 1; font-weight: 500; letter-spacing: .02em; white-space: nowrap; rotate: -4deg; }

/* Die anderen Pakete: kurze Zeilen mit Pfeil, jede ein Link in die Kasse. */
.pakete { display: grid; gap: 8px; }
.pakete a { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--leise); }
.pakete a b { font-weight: 500; color: var(--tinte); margin-right: .25em; }
.pakete a:hover b { text-decoration: underline; text-underline-offset: .2em; }
/* Die Frist eines Pakets: dieselbe Idee wie die Marke am großen Preis, nur als feiner Rand. */
.pakete__frist { display: inline-block; margin-left: .35em; padding: 2px 8px 1px; border: 1px solid currentColor; border-radius: 999px; font-size: .8125rem; line-height: 1.3; white-space: nowrap; }
.pakete svg { flex: none; width: 13px; height: 13px; color: var(--tinte); }
@media (min-width: 900px) { .pakete a { font-size: 1rem; } }

/* Formen: Filme in klaren, runden Formen mit Luft drumherum. Das Standbild liegt da, der Film blendet darüber ein. */
.form { position: relative; overflow: hidden; border-radius: var(--rund); background: var(--film-grund); aspect-ratio: 4 / 5; isolation: isolate; }
.form--quer { aspect-ratio: 16 / 9; border-radius: calc(var(--rund) * .78); }
.form img, .form video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.form video { opacity: 0; transition: opacity .7s; }
.form.laeuft video { opacity: 1; }

/* Freisteller: stehen frei auf dem Grund, ohne Kasten. */
.frei { position: absolute; z-index: 3; pointer-events: none; translate: 0 var(--schub, 0px); }
.frei img { width: 100%; height: auto; }
.frei--steht::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 9%; border-radius: 50%; background: rgba(14, 14, 14, .2); filter: blur(9px); z-index: -1; }

/* Kopf: das Logo aus dem Rahmen, rechts der Preis und seine Frist. */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1520px; margin-inline: auto; padding: 18px var(--rand); }
/* Das Logo gibt zuerst nach, wenn Preis und Frist in einer langen Sprache mehr Platz brauchen; es bleibt dabei in seiner Form. */
.site-header__logo { flex: 0 100 143px; min-width: 112px; display: block; }
.site-header__logo img { width: 100%; height: auto; }
.kopf__preis { flex: none; max-width: calc(100% - 128px); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 9px; font-size: .875rem; line-height: 1.2; text-align: right; }
.kopf__preis b { font-weight: 500; white-space: nowrap; }
.kopf__frist { color: var(--leise); }
@media (max-width: 359px) { .kopf__frist { display: none; } }
/* Der Punkt zwischen Preis und Frist erst, wenn beide sicher in eine Zeile passen (lange Sprachen brechen sonst um). */
@media (min-width: 480px) {
  .kopf__frist::before { content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 3px; margin-right: 9px; border-radius: 50%; background: currentColor; }
}
@media (min-width: 700px) {
  .site-header { padding-block: 26px; }
  .site-header__logo { flex-basis: 178px; }
  .kopf__preis { font-size: .9375rem; }
}

/* Erster Bildschirm */
.auftakt { padding-top: 18px; }
.auftakt__wort { display: grid; gap: 22px; }
.auftakt__titel { display: grid; gap: 14px; }
.zeile { display: block; }
.buehne { position: relative; margin-top: 30px; }
.buehne__film { width: 78%; margin-left: auto; --rund: 40px; }
/* Das Etikett am Film: Was hier läuft, ist ein Vorführshop. */
.buehne__wer { margin: 0 20px 10px 0; text-align: right; }
.frei--a { left: 3%; bottom: -2%; width: 25%; rotate: -7deg; }
.frei--b { right: -1%; bottom: -6%; width: 20%; rotate: 14deg; }
.frei--c { left: 3%; top: 18%; width: 14%; rotate: -24deg; }
@media (min-width: 700px) {
  .auftakt { padding-top: 40px; }
  .auftakt__wort { gap: 30px; max-width: 40rem; }
  .auftakt__titel { gap: 20px; }
  .auftakt__wort .knopf { justify-self: start; }
  .buehne { max-width: 480px; margin: 54px auto 0; }
  .buehne__film { width: 100%; --rund: 56px; }
  .buehne__wer { margin: 0 28px 12px 0; }
  .frei--a { left: -13%; width: 29%; }
  .frei--b { right: -3%; bottom: -5%; width: 19%; }
  .frei--c { left: -12%; top: 15%; width: 13%; }
}
@media (min-width: 900px) {
  .auftakt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; padding-top: 36px; }
  /* Rechts bleibt Platz: Die Flasche steht links über den Rand der Bühne hinaus und darf in keiner Sprache auf die Überschrift treffen. */
  .auftakt__wort { grid-column: 1 / span 7; max-width: none; padding-right: 7%; }
  .buehne { grid-column: 8 / span 5; margin: 0; max-width: none; width: min(100%, 60vh); justify-self: end; }
}

/* Vorführshops: Formen in wechselnder Größe und Lage, untereinander. Keine Reihe zum Wischen.
   Kein Film liegt über einem anderen: Wo eine Form nach oben rückt, steht sie neben der vorigen, nie darauf. */
.schau__feld { margin-top: 48px; }
.shop { position: relative; }
.shop__name { margin-top: 12px; font-size: .9375rem; line-height: 1.25; color: var(--leise); }
.shop__name b { font-weight: 500; color: var(--tinte); letter-spacing: .04em; margin-right: .45em; }
.shop__probe { margin-left: .5em; color: var(--tinte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; white-space: nowrap; }
.shop--seite .shop__name { position: absolute; margin: 0; width: max-content; max-width: 62%; }
.shop--seite .shop__name b { display: block; margin: 0 0 2px; }

.shop--1 { width: 93%; }
.shop--1 .frei { right: -6%; bottom: -3%; width: 19%; rotate: 16deg; }
.shop--2 { width: 58%; margin: 40px 0 0 auto; }
.shop--2 .shop__name { right: calc(100% + 16px); bottom: 14%; text-align: right; }
.shop--3 { width: 84%; margin-top: 44px; rotate: -1.5deg; }
.shop--4 { width: 54%; margin: -8px 0 0 auto; }
.shop--4 .shop__name { right: calc(100% + 16px); bottom: 12%; text-align: right; }
.shop--5 { width: 90%; margin: 48px 0 0 auto; rotate: 1.5deg; }
.shop--5 .shop__name { text-align: right; }
.shop--6 { width: 58%; margin-top: 30px; }
.shop--6 .shop__name { left: calc(100% + 16px); bottom: 12%; }
.hinweis { margin: 48px 0 0 auto; max-width: 17rem; text-align: right; }

@media (min-width: 700px) {
  .schau__feld { margin-top: 72px; }
  .shop__name { font-size: 1rem; margin-top: 16px; }
  .shop--1 { width: 78%; }
  .shop--2 { width: 38%; margin-top: 28px; }
  .shop--3 { width: 56%; margin-top: -20px; }
  .shop--4 { width: 36%; margin-top: -110px; }
  .shop--5 { width: 58%; margin-top: 30px; }
  .shop--6 { width: 36%; margin-top: -130px; }
}
@media (min-width: 900px) {
  .schau__kopf { max-width: 60rem; }
  .schau__feld { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; margin-top: 96px; }
  .shop--1, .shop--2, .shop--3, .shop--4, .shop--5, .shop--6 { width: auto; margin: 0; }
  .shop--seite .shop__name { position: static; margin-top: 16px; width: auto; max-width: none; text-align: left; }
  .shop--seite .shop__name b { display: inline; margin: 0 .45em 0 0; }
  .shop--5 .shop__name { text-align: left; }
  .shop--1 { grid-column: 1 / span 7; grid-row: 1; }
  .shop--1 .frei { right: -6%; bottom: 0; width: 15%; }
  .shop--2 { grid-column: 9 / span 4; grid-row: 1; margin-top: 150px; }
  .shop--4 { grid-column: 2 / span 4; grid-row: 2; margin-top: -120px; }
  .shop--3 { grid-column: 7 / span 6; grid-row: 2; margin-top: 120px; }
  .shop--5 { grid-column: 1 / span 6; grid-row: 3; margin-top: 120px; }
  .shop--6 { grid-column: 8 / span 4; grid-row: 3; margin-top: 90px; }
  .hinweis { margin: 64px 0 0; text-align: left; }
}

/* Preis: groß und eindeutig. Links, was dort üblich ist (blass), rechts das Angebot. */
.preis__feld { display: grid; }
.preis__dort { display: grid; gap: 6px; align-content: start; }
.preis__dort .gross { color: var(--blass); }
.preis__quelle { margin-top: 2px; }
/* Der Fairness-Satz, klein: Dort sind Updates und Support dabei, hier nicht. */
.preis__fair { max-width: 19rem; color: var(--tinte); }
.preis__hier { margin-top: 44px; }
/* Preis und Zeichen in einer Reihe. Der Preis behält seine Größe; das Zeichen gibt nach, wenn er breiter ist
   (35 € ist breiter als 19 €), und liegt so nie auf den Ziffern. */
.preis__reihe { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.preis__zahl { flex: none; font-size: var(--riesig); line-height: .92; font-weight: 500; letter-spacing: -.05em; margin-left: -.04em; white-space: nowrap; }
/* Ein Preis mit Cent (7,99 €) ist länger: kleiner, damit er neben das Zeichen passt. */
.preis__zahl--lang { font-size: calc(var(--riesig) * .6); line-height: 1; }
.preis__frist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.preis__kauf { display: grid; gap: 22px; margin-top: 30px; }
.siegel { flex: 0 1 29%; min-width: 56px; max-width: 172px; height: auto; color: var(--tinte); rotate: -11deg; overflow: visible; }
.siegel__rand { fill: none; stroke: currentColor; stroke-width: 1.2; }
.siegel__punkt { fill: var(--zeichen); }
.siegel__haken { fill: none; stroke: var(--tinte); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.siegel__korn { fill: currentColor; }
.siegel__schrift { font-size: 9.6px; font-weight: 500; letter-spacing: 2.6px; fill: currentColor; }
@media (min-width: 700px) {
  .preis__kauf { justify-items: start; }
  .preis__reihe { gap: 28px; }
}
@media (min-width: 900px) {
  .preis__feld { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .preis__dort { grid-column: 1 / span 5; gap: 10px; }
  .preis__hier { grid-column: 7 / span 6; margin-top: 0; }
  .preis__frist { margin-top: 22px; gap: 8px 16px; }
  .preis__kauf { margin-top: 44px; gap: 28px; }
  .preis__reihe { gap: clamp(20px, 4vw, 56px); }
  .siegel { flex-basis: 26%; }
  .marke { font-size: .8125rem; padding: 8px 13px 7px; }
}

/* Acht Bausteine: Stichworte, nummeriert, nur Schrift. Daneben stehen Produkte frei. */
.teile { position: relative; }
.frei--schuh { position: relative; display: block; width: 66%; margin: 18px -2% 6px auto; rotate: -7deg; }
.teile__liste { display: grid; gap: 15px; margin-top: 18px; counter-reset: teil; }
.teil { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; counter-increment: teil; }
.teil::before { content: counter(teil, decimal-leading-zero); font-size: .75rem; font-weight: 500; letter-spacing: .08em; color: var(--leise); font-variant-numeric: tabular-nums; }
.teil__wort { font-size: 1.25rem; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; margin-right: 8px; }
.teil__wo { white-space: nowrap; }
/* Ab hier die Bausteine einer Branche: etwas Luft davor. */
.teil--neu { margin-top: 14px; }
.frei--ring { rotate: 11deg; }
/* Schmal steht der Ring rechts neben der vierten und fünften Zeile; beide lassen ihm Platz, in jeder Sprache. */
@media (max-width: 699px) {
  .teil--neu { position: relative; }
  .teil:nth-child(4), .teil:nth-child(5) { padding-right: 21%; }
  .frei--ring { right: 0; bottom: -14px; width: 17%; }
}
@media (min-width: 700px) {
  .teil__wort { font-size: 1.5rem; margin-right: 12px; }
  .teil { grid-template-columns: 3rem minmax(0, 1fr); }
  .teile__liste { gap: 18px; max-width: 31rem; }
  .frei--schuh { width: 46%; }
  .frei--ring { width: 13%; right: 12%; bottom: 5.4rem; }
}
@media (min-width: 900px) {
  .teile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .teile__kopf { grid-column: 1 / span 6; grid-row: 1; }
  .frei--schuh { grid-column: 8 / span 5; grid-row: 1 / span 2; width: 100%; margin: -40px 0 0; }
  .teile__liste { grid-column: 1 / span 7; grid-row: 2; margin-top: 64px; max-width: 34rem; }
  .frei--ring { right: 8%; bottom: -4%; width: 9%; }
}
@media (min-width: 1200px) {
  .teile__liste { grid-column: 1 / span 8; max-width: none; margin-top: 72px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: var(--spalt); row-gap: 22px; }
  .teil--neu { margin-top: 0; }
  .frei--ring { right: 3%; bottom: -34%; width: 9.5%; }
}

/* Drei Schritte: Punkte an einer kurzen Linie. */
.weg__liste { display: grid; gap: 22px; margin-top: 36px; position: relative; }
.weg__schritt { display: flex; align-items: center; gap: 16px; font-size: 1.25rem; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.weg__punkt { flex: none; position: relative; width: 13px; height: 13px; border-radius: 50%; background: var(--tinte); }
.weg__schritt:not(:last-child) .weg__punkt::after { content: ""; position: absolute; left: 6px; top: 13px; width: 1px; height: calc(22px + 1.5rem - 13px); background: var(--tinte); opacity: .35; }
@media (min-width: 700px) { .weg__schritt { font-size: 1.5rem; } }
@media (min-width: 900px) {
  .weg__liste { display: flex; flex-wrap: wrap; gap: 18px 0; margin-top: 56px; }
  .weg__schritt { gap: 14px; }
  .weg__schritt:not(:last-child)::after { content: ""; width: clamp(32px, 5vw, 110px); height: 1px; margin: 0 22px 0 8px; background: var(--tinte); opacity: .35; }
  .weg__schritt:not(:last-child) .weg__punkt::after { display: none; }
}

/* Schluss */
.schluss { position: relative; display: grid; gap: 28px; }
.schluss__wort { display: grid; gap: 28px; }
.schluss__titel { font-size: min(var(--gross-1), 11.2vw); text-wrap: balance; }
.schluss__kauf { display: grid; gap: 18px; justify-items: start; }
.schluss__kauf .knopf { width: 100%; }
.finale { position: relative; height: 0; padding-bottom: 66%; margin-top: 16px; }
.frei--f1 { left: 9%; bottom: 0; width: 22%; rotate: -8deg; }
.frei--f2 { left: 37%; bottom: 3%; width: 22%; rotate: 2deg; --spaet: .25s; }
.frei--f3 { left: 65%; bottom: 0; width: 22%; rotate: 9deg; --spaet: .35s; }
.frei--f4 { left: 1%; bottom: 4%; width: 12%; rotate: -14deg; --spaet: .45s; }
.frei--f5 { right: 0; bottom: 48%; width: 11%; rotate: 20deg; --spaet: .5s; }
@media (min-width: 700px) {
  .schluss__kauf .knopf { width: auto; }
  .finale { padding-bottom: 60%; max-width: 620px; }
}
@media (min-width: 900px) {
  .schluss { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
  .schluss__wort { grid-column: 1 / span 7; gap: 40px; }
  .finale { grid-column: 8 / span 5; margin: 0; max-width: none; padding-bottom: 78%; }
}

/* Fuß: die Links, der Sprachwechsel und der Satz aus dem Rahmen, hell gefasst; davor das Logo. */
.site-footer { max-width: 1520px; margin: var(--luft) auto 0; padding: 28px var(--rand) 44px; }
.site-footer__inner { display: grid; gap: 20px; font-size: .875rem; line-height: 1.4; color: var(--leise); }
.site-footer__inner::before { content: ""; display: block; width: 121px; height: 17px; background: url("../img/bundlethemes-logo-tinte.svg") left center / contain no-repeat; }
.site-footer__note { order: 1; max-width: 30rem; }
.site-footer__nav { order: 2; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__languages { order: 3; }
.site-footer__languages ul { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-footer__languages a[aria-current] { color: var(--tinte); }
@media (min-width: 700px) { .site-footer__inner { font-size: .9375rem; } }
@media (min-width: 900px) {
  .site-footer { padding-block: 36px 56px; }
  .site-footer__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .site-footer__inner::before { grid-column: 1 / span 3; grid-row: 1; }
  .site-footer__note { grid-column: 4 / span 5; grid-row: 1; }
  .site-footer__nav { grid-column: 10 / span 3; grid-row: 1 / span 2; flex-direction: column; gap: 6px; }
  .site-footer__languages { grid-column: 4 / span 5; grid-row: 2; }
}

/* Bewegung: einmal weich einblenden, Freisteller schweben beim Scrollen leicht mit. Nichts wiederholt sich.
   Ohne Skript und bei „weniger Bewegung“ steht alles da: hell.js setzt .wartet nur an Teile, die noch unter dem
   Bild liegen, und nimmt es weg, sobald sie hineinkommen. Der Übergang gilt nur für das Erscheinen. */
@media (prefers-reduced-motion: no-preference) {
  [data-zeigen]:not(.wartet) { transition: opacity 1s var(--weich) var(--spaet, 0s), translate 1.1s var(--weich) var(--spaet, 0s), scale 1.2s var(--weich) var(--spaet, 0s); }
  [data-zeigen].wartet { opacity: 0; translate: 0 28px; }
  .frei[data-zeigen]:not(.wartet) { transition: opacity .8s var(--weich) var(--spaet, .15s), scale 1.3s var(--weich) var(--spaet, .15s); }
  .frei[data-zeigen].wartet { translate: 0 var(--schub, 0px); scale: .8; }
  .shop[data-zeigen].wartet { scale: .95; }

  /* Die Überschrift im ersten Bildschirm steigt Zeile für Zeile auf (reines CSS, braucht kein Skript). */
  .zeile { overflow: hidden; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
  .zeile > span { display: block; animation: steigen 1.1s var(--weich) both; }
  .zeile:nth-child(2) > span { animation-delay: .09s; }
  @keyframes steigen { from { translate: 0 118%; } to { translate: 0 0; } }
}