/* ==========================================================================
   Startseite — nur auf index.html geladen.

   Leitlinien (Begruendung in README, Abschnitt Gestaltung):
   * Einfach und vertraut wirkt in den ersten 50 ms am hochwertigsten
     (Google/Univ. Basel 2012): wenige Flaechen, viel Luft, klare Achsen.
   * Das Wichtigste in die ersten zwei Bildschirmhoehen (NN/g: 74 % der
     Betrachtungszeit): Nutzen, eine Handlung, eine echte Frage zum
     Ausprobieren, die Abgrenzung vom BAMF.
   * Ein Hauptknopf statt vieler gleichwertiger; auf dem Telefon bleibt er
     unten in Reichweite.
   * Keine Kachelwand mit Symbolen: Inhalt traegt die Gestaltung — die 33
     Fragen als Punktebild, die Karte der Laender, eine laufende Vorfuehrung.
   ========================================================================== */

.startseite main { padding-bottom: 0; }

.s-nummer {
  margin: 0 0 .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--messing);
}
.s-abschnitt { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.s-pfeil { font-weight: 600; text-decoration: none; color: var(--blau); }
.s-pfeil:hover { color: var(--messing); }
.s-pfeil span { display: inline-block; transition: transform var(--tempo); }
.s-pfeil:hover span { transform: translateX(3px); }

/* --- Buehne --------------------------------------------------------------
   Die Landschaft liegt rechts frei; links traegt ein Papierschleier den Text.
   Auf dem Telefon wird der Schleier von oben nach unten gezogen.          */
.s-buehne { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.2rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem); }
.s-buehne::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--schleier), .97) 0%, rgba(var(--schleier), .93) 34%,
      rgba(var(--schleier), .55) 58%, rgba(var(--schleier), .12) 100%),
    linear-gradient(0deg, rgba(var(--schleier), 1) 0%, rgba(var(--schleier), 0) 22%),
    url('../img/hintergrund-2400.webp') 70% 70% / cover no-repeat;
}
.s-buehne-raster {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.s-buehne h1 {
  font-size: clamp(2.35rem, 1.2rem + 3.9vw, 4.15rem); line-height: 1.02;
  letter-spacing: -.032em; margin: 1.1rem 0 1.2rem; text-wrap: balance;
}
.s-unterstrich { position: relative; color: var(--blau); white-space: nowrap; }
.s-unterstrich::after {
  /* Ein Pinselstrich in Messing, gezeichnet, nicht gesetzt. */
  content: ''; position: absolute; left: -.02em; right: -.04em; bottom: -.16em; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C58 5.2 128 3.4 297 7.6' fill='none' stroke='%23c8902f' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left; animation: s-strich 1s .35s cubic-bezier(.6, .1, .2, 1) both;
}
@keyframes s-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.s-vorspann { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: var(--tinte-weich);
  max-width: 33rem; margin-bottom: 1.8rem; }
.s-vorzuege { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.s-vorzuege li {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem .3rem .55rem;
  border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--gruen);
  background: rgba(var(--schleier), .8); border: 1px solid color-mix(in srgb, var(--gruen) 25%, transparent);
}
.s-vorzuege .zeichen { width: 15px; height: 15px; }
.s-handlung { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; }
.s-haupt { font-size: 1.08rem; padding: .95rem 1.7rem; border-radius: 999px;
  box-shadow: 0 1px 1px rgba(110, 72, 18, .2), 0 10px 24px -8px rgba(169, 118, 42, .6); }
.s-neben { font-weight: 600; color: var(--tinte); text-decoration: none; }
.s-neben:hover { color: var(--messing); }
.s-klein { margin: 1.1rem 0 0; font-size: .88rem; color: var(--tinte-leise); }

/* --- Probierfrage ------------------------------------------------------- */
.probier { position: relative; max-width: 30rem; margin-left: auto; padding-top: 4.2rem; }
.probier-adler { position: absolute; right: -.4rem; top: -1.2rem; width: 132px; z-index: 2;
  pointer-events: none; }
.probier-adler img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 14px rgba(20, 33, 61, .18)); }
.probier-adler.ist-neu img { animation: adler-hopser .5s cubic-bezier(.3, 1.6, .5, 1); }
.probier[data-urteil="richtig"] .probier-adler.ist-neu img { animation: adler-jubel .7s cubic-bezier(.3, 1.6, .5, 1); }
.probier-karte {
  position: relative; background: var(--papier-hoch); border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent);
  box-shadow: 0 1px 2px rgba(13, 34, 51, .06), 0 12px 30px rgba(13, 34, 51, .1),
              0 40px 80px -20px rgba(13, 34, 51, .22);
  padding: 1.4rem 1.4rem 1.3rem;
}
.probier-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem;
  padding-right: 6.4rem; }
.probier-marke { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--messing); }
.probier-zaehler { font-size: .82rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.probier-zaehler b { color: var(--tinte); }
.probier-herkunft { margin: 0 0 .3rem; font-size: .8rem; color: var(--tinte-leise); }
.probier-frage { font-size: 1.22rem; font-weight: 700; line-height: 1.3; margin: 0 0 1rem; text-wrap: balance; }
.probier-antworten { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pf-antwort {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  font: inherit; color: var(--tinte); background: var(--papier-hoch);
  padding: .72rem .85rem; border: 1.5px solid var(--linie); border-radius: 14px;
  cursor: pointer; text-decoration: none;
  transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
}
.pf-antwort:hover:not([disabled]) { border-color: var(--blau); background: var(--blau-hell); transform: translateY(-1px); }
.pf-buchstabe { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: 9px; background: var(--papier-tief); font-weight: 700; font-size: .85rem;
  transition: background var(--tempo), color var(--tempo); }
.pf-antwort[data-urteil="richtig"] { border-color: var(--gruen); background: var(--gruen-hell); }
.pf-antwort[data-urteil="richtig"] .pf-buchstabe { background: var(--gruen); color: #fff; }
.pf-antwort[data-urteil="falsch"] { border-color: var(--rot); background: var(--rot-hell); }
.pf-antwort[data-urteil="falsch"] .pf-buchstabe { background: var(--rot); color: #fff; }
.pf-antwort[disabled] { cursor: default; }
.pf-antwort[disabled]:not([data-urteil]) { opacity: .55; }
.probier-rueckmeldung { margin: 1rem 0 0; min-height: 2.6rem; }
.probier-blase { display: inline-block; padding: .5rem .85rem; border-radius: 14px 14px 14px 4px;
  background: var(--papier-tief); color: var(--tinte-weich); font-size: .95rem; }
.probier[data-urteil="richtig"] .probier-blase { background: var(--gruen-hell); color: var(--gruen); font-weight: 600; }
.probier[data-urteil="falsch"] .probier-blase { background: var(--messing-hell); color: var(--tinte); }
.probier-weiter { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.probier-weiter .knopf { border-radius: 999px; }
.probier-karte .ist-neu { animation: vf-rein .4s ease-out; }

/* --- Abgrenzung ------------------------------------------------------------
   Deutlich, aber ruhig: eigene Zeile direkt unter der Buehne, volle Breite. */
.s-abgrenzung { margin-top: -1.5rem; position: relative; z-index: 1; }
.s-abgrenzung .abgrenzung {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.1rem; align-items: start;
  border: 1px solid var(--linie); border-left: 4px solid var(--tinte); border-radius: 16px;
  background: var(--papier-hoch); box-shadow: var(--schatten); padding: 1.15rem 1.4rem;
}
.s-abgrenzung .abgrenzung::before {
  content: 'i'; grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-style: normal; color: var(--papier); background: var(--tinte);
}
.s-abgrenzung .abgrenzung b { font-size: 1.02rem; margin: 0; }
.s-abgrenzung .abgrenzung p { color: var(--tinte-weich); font-size: .95rem; max-width: none; }

/* --- Der Test: 33 Punkte ------------------------------------------------- */
.s-test { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.s-test h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -.028em; line-height: 1.06; }
.s-test-text p:not(.s-nummer) { color: var(--tinte-weich); font-size: 1.06rem; max-width: 32rem; }
.s-punkte-bild { margin: 0; padding: clamp(1.3rem, 3vw, 2rem); background: var(--papier-hoch);
  border: 1px solid var(--linie); border-radius: 24px; box-shadow: var(--schatten); }
.s-punkte { display: grid; grid-template-columns: repeat(11, 1fr); gap: clamp(.4rem, 1.2vw, .7rem); }
.s-punkte i { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--blau-hell);
  border: 2px solid color-mix(in srgb, var(--blau) 35%, transparent); }
.s-punkte i[data-land="ja"] { background: var(--messing-hell); border-color: var(--messing); }
.s-punkte.ist-sichtbar i:nth-child(-n+17) { background: var(--gruen); border-color: var(--gruen);
  transition: background .25s, border-color .25s; transition-delay: calc(var(--n, 0) * 45ms); }
.s-punkte i[data-grenze="ja"]::after { content: ''; position: absolute; right: calc(-1 * clamp(.2rem, .6vw, .35rem) - 1px);
  top: -22%; bottom: -22%; width: 2px; border-radius: 2px; background: var(--tinte); transform: translateX(50%); }
.s-punkte-bild figcaption { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.2rem;
  font-size: .84rem; color: var(--tinte-weich); }
.s-legende { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .4rem; vertical-align: -.08em; }
.s-legende[data-art="allgemein"] { background: var(--blau-hell); border: 2px solid color-mix(in srgb, var(--blau) 35%, transparent); }
.s-legende[data-art="land"] { background: var(--messing-hell); border: 2px solid var(--messing); }
.s-legende[data-art="grenze"] { width: 2px; border-radius: 2px; height: .95rem; background: var(--tinte); }

/* --- Lernweg mit Vorfuehrung ------------------------------------------------ */
.s-weg { background: var(--tinte); color: #e9eef3; padding-block: clamp(3.5rem, 8vw, 6.5rem);
  --tinte-weich: #b6c4d0; --tinte-leise: #8ea2b2; }
.s-weg h2, .s-weg h3 { color: #fff; }
.s-weg .s-nummer { color: #e2b467; }
.s-weg-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.s-weg h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -.028em; line-height: 1.06; margin-bottom: 1.8rem; }
.s-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.s-schritte li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1rem 1.1rem; border-radius: 16px;
  cursor: pointer; transition: background var(--tempo-lang); }
.s-schritte li:hover { background: rgba(255, 255, 255, .04); }
.s-schritte li[data-aktiv="ja"] { background: rgba(255, 255, 255, .08); }
.s-schritt-zahl { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; border: 1.5px solid rgba(255, 255, 255, .3); color: #fff; transition: background var(--tempo-lang), border-color var(--tempo-lang); }
.s-schritte li[data-aktiv="ja"] .s-schritt-zahl { background: #e2b467; border-color: #e2b467; color: var(--tinte); }
.s-schritte h3 { font-size: 1.15rem; margin: .3rem 0 .3rem; }
.s-schritte p { margin: 0; color: #b6c4d0; font-size: .97rem; }
.s-weg .vorfuehrung { max-width: 31rem; margin-left: auto; }
.s-weg .vf-rahmen { color: #14213d; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); border: 0;
  /* Im Rahmen gelten wieder die hellen Farben. */
  --tinte: #14213d; --tinte-weich: #3d5668; --tinte-leise: #6b8497; }
.s-weg .vf-fuss, .s-weg .vf-fussnote { background: transparent; padding-inline: 0; }
.s-weg .vf-fussnote { color: #8ea2b2; }
.s-weg .vf-schalter { color: #b6c4d0; }
.s-weg .vf-punkt { background: rgba(255, 255, 255, .25); }
.s-weg .vf-punkt[data-aktiv="ja"] { background: #e2b467; }

/* --- Bundesland mit Karte ---------------------------------------------------- */
.s-land { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.s-land h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -.028em; line-height: 1.06; }
.s-land-text > p:not(.s-nummer) { color: var(--tinte-weich); font-size: 1.06rem; max-width: 31rem; }
.s-land-karte { max-width: 26rem; margin-inline: auto; width: 100%; }
.dk-svg { width: 100%; height: auto; display: block; overflow: visible; }
.dk-svg path { fill: color-mix(in srgb, var(--blau) 14%, var(--papier-hoch)); stroke: var(--papier); stroke-width: 1.6;
  stroke-linejoin: round; transition: fill .2s, transform .2s; }
.dk-svg a:hover path, .dk-svg a:focus-visible path { fill: color-mix(in srgb, var(--blau) 38%, var(--papier-hoch)); }
.dk-svg a[aria-current="true"] path { fill: var(--messing); }
.dk-svg a:focus { outline: none; }
.dk-svg a:focus-visible path { stroke: var(--tinte); stroke-width: 2.5; }
.s-land-wahl .land-wahl span { display: none; }
.s-land-wahl select { max-width: 22rem; }
.s-land-ergebnis { margin: 1.1rem 0 0; padding: .9rem 1.1rem; border-radius: 14px; background: var(--gruen-hell);
  color: var(--tinte); display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.s-land-ergebnis b { color: var(--gruen); }
.s-land-ergebnis[hidden] { display: none; }
.s-land-quelle { margin-top: .6rem; font-size: .72rem; color: var(--tinte-leise); text-align: center; }

/* --- Versprechen ------------------------------------------------------------ */
.s-versprechen { border-top: 1px solid var(--linie); }
.s-versprechen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: .6rem; }
.s-versprechen h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.02em; margin-bottom: .6rem; }
.s-versprechen-raster p { color: var(--tinte-weich); margin: 0; }
.s-auch { margin: 3rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--tinte-leise); font-size: .92rem; }
.s-auch a { padding: .38rem .85rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte); text-decoration: none; transition: border-color var(--tempo); }
.s-auch a:hover { border-color: var(--messing); color: var(--tinte); }

/* --- Haeufige Fragen ------------------------------------------------------- */
.s-faq { padding-top: 0; }
.s-faq h2 { margin-bottom: 1.4rem; }
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-eintrag summary { list-style: none; cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; position: relative;
  font-weight: 600; font-size: 1.08rem; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { content: ''; position: absolute; right: .3rem; top: 50%; width: .65rem; height: .65rem;
  border-right: 2px solid var(--tinte-leise); border-bottom: 2px solid var(--tinte-leise);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--tempo); }
.faq-eintrag[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-eintrag p { margin: 0 0 1.2rem; color: var(--tinte-weich); max-width: 40rem; }

/* --- Schluss ------------------------------------------------------------- */
.s-schluss { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.s-schluss-innen {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.6rem, 5vw, 3.6rem); border-radius: 28px;
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgba(233, 185, 73, .28), transparent 60%),
    linear-gradient(135deg, var(--messing-hell), color-mix(in srgb, var(--messing-hell) 40%, var(--papier-hoch)));
  border: 1px solid color-mix(in srgb, var(--messing) 25%, transparent);
}
.s-schluss-innen img { width: clamp(110px, 16vw, 170px); height: auto; filter: drop-shadow(0 12px 16px rgba(20, 33, 61, .18)); }
.s-schluss h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); letter-spacing: -.026em; margin-bottom: .4rem; }
.s-schluss p { color: var(--tinte-weich); margin-bottom: 1.3rem; }

/* --- Leiste unten auf dem Telefon ---------------------------------------- */
.s-leiste { display: none; }
@media (max-width: 760px) {
  .s-leiste:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(var(--schleier), .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--linie); transform: translateY(110%); transition: transform var(--tempo-lang);
  }
  .s-leiste[data-zeigen="ja"] { transform: none; }
  .s-leiste .knopf { width: 100%; justify-content: center; border-radius: 999px; padding: .85rem 1rem; }
  .startseite .fuss { padding-bottom: 5rem; }
}

/* --- Schmale Schirme -------------------------------------------------------- */
@media (max-width: 900px) {
  .s-buehne-raster, .s-test, .s-weg-raster, .s-land { grid-template-columns: minmax(0, 1fr); }
  .probier { margin: 0 auto; }
  .s-weg .vorfuehrung { margin: 0 auto; }
  .s-land-karte { max-width: 20rem; order: 2; }
  .s-versprechen-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .s-buehne::before {
    background:
      linear-gradient(180deg, rgba(var(--schleier), .95) 0%, rgba(var(--schleier), .9) 45%,
        rgba(var(--schleier), .7) 75%, rgba(var(--schleier), 1) 100%),
      url('../img/hintergrund-1280.webp') 60% 50% / cover no-repeat;
  }
  .s-abgrenzung { margin-top: 0; }
  .s-abgrenzung .abgrenzung { grid-template-columns: 1fr; padding: 1rem 1.1rem; }
  .s-abgrenzung .abgrenzung::before { display: none; }
  .probier-adler { width: 104px; top: -.2rem; }
  .probier { padding-top: 3.6rem; }
  .probier-kopf { padding-right: 5.6rem; }
  .s-schluss-innen { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .s-haupt { width: 100%; justify-content: center; }
  .s-handlung { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (max-width: 420px) {
  .s-punkte { grid-template-columns: repeat(11, 1fr); gap: .28rem; }
  .s-vorzuege li { font-size: .8rem; }
  .probier-karte { padding: 1.1rem 1rem; }
}

/* --- Nacht ------------------------------------------------------------------ */
:root[data-thema="dunkel"] .s-buehne::before { opacity: .35; }
:root[data-thema="dunkel"] .s-weg { background: #081219; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .s-buehne::before { opacity: .35; }
  :root:not([data-thema="hell"]) .s-weg { background: #081219; }
}
:root[data-thema="dunkel"] .s-weg .vf-rahmen { --papier-hoch: #fff; --papier-tief: #efe9e0; --linie: #ded5c8; --linie-fein: #ebe4da;
  --gruen-hell: #e0f0e7; --rot-hell: #fbe6e3; --blau-hell: #e2eef6; --gruen: #1c6b4a; --rot: #a32218; --blau: #17567f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .s-weg .vf-rahmen { --papier-hoch: #fff; --papier-tief: #efe9e0; --linie: #ded5c8; --linie-fein: #ebe4da;
    --gruen-hell: #e0f0e7; --rot-hell: #fbe6e3; --blau-hell: #e2eef6; --gruen: #1c6b4a; --rot: #a32218; --blau: #17567f; }
}

@media (prefers-reduced-motion: reduce) {
  .s-unterstrich::after { animation: none; }
  .s-punkte.ist-sichtbar i { transition: none; }
}
@media print { .s-leiste, .probier-adler { display: none !important; } }
.s-legende[data-art="richtig"] { background: var(--gruen); border: 2px solid var(--gruen); }
.s-land-quelle a { color: inherit; }

/* Nachtraege nach Sichtpruefung */
.probier-weiter[hidden], .probier-weiter [hidden] { display: none !important; }
body.startseite::before { display: none; }
.dk-svg path { fill: color-mix(in srgb, var(--blau) 24%, var(--papier-hoch)); stroke-width: 1.4; }
.dk-svg a:hover path, .dk-svg a:focus-visible path { fill: color-mix(in srgb, var(--blau) 55%, var(--papier-hoch)); }
.s-versprechen-raster > div { border-top: 2px solid var(--messing); padding-top: 1.2rem; }
.s-schluss { padding-bottom: clamp(2.5rem, 6vw, 4rem); }