/* Mitwem — marketing site.
   The palette, the type scale and the accessibility floor are the app's own,
   copied deliberately rather than re-invented: someone who lands here and then
   opens the app should not feel handed off to a different product. */

/* ----------------------------------------------------------------- fonts */

/* Self-hosted rather than pulled from Google. A stylesheet from
   fonts.googleapis.com sends every visitor's IP address to a third country
   before they have agreed to anything, which is precisely the sort of thing
   this project promises not to do. Both families are OFL; see
   assets/fonts/LICENSE.txt. Latin subset only, variable weight. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 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: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  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;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* Brand */
  --wald: #10291a;
  --vanille: #faf4e8;
  --sonne: #f2971f;
  --papier: #ffffff;
  --tinte: #17231b;

  /* Derived, and every one of them checked against a contrast calculator.
     --sonne-text is a darkened Sonne: the brand orange itself only reaches
     2.0:1 on white, which is a decoration, not a colour you can read. */
  --sonne-text: #9a5b08;   /* 5.4:1 on Papier, 5.0:1 on Vanille */
  --sonne-kontur: #bb710e; /* 3.8:1 — borders and large type only */
  --gedaempft: #4c5d50;    /* 7.0:1 on Papier */
  --linie: #8e7e5c;
  --trenner: #e6dcc6;
  --schatten: rgba(16, 41, 26, 0.09);

  /* On the dark bands */
  --auf-wald: #faf4e8;
  --auf-wald-gedaempft: #c9bfa6; /* 8.5:1 on Wald */

  --schrift-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --breite: 1120px;
  --radius: 18px;
  --radius-gross: 28px;

  color-scheme: light;
}

/* --------------------------------------------------------------- basics */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchored sections must not hide under the sticky header. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  /* 17px body, the same floor the app holds itself to. */
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, .display {
  font-family: var(--schrift-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  /* German compounds are longer than a column is wide. */
  hyphens: auto;
  overflow-wrap: break-word;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--sonne-kontur);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--wald);
  color: var(--auf-wald);
  border-radius: 12px;
  font-weight: 600;
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------- layout */

.huelle {
  width: min(100% - 40px, var(--breite));
  margin-inline: auto;
}

section { padding: clamp(64px, 9vw, 120px) 0; }

.band-vanille { background: var(--vanille); }

.band-wald {
  background: var(--wald);
  color: var(--auf-wald);
}
.band-wald .gedaempft { color: var(--auf-wald-gedaempft); }

.augbraue {
  font-family: var(--schrift-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sonne-text);
  margin: 0 0 14px;
}
.band-wald .augbraue { color: var(--sonne); }

h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.5rem); }

.blei {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--gedaempft);
  max-width: 60ch;
  margin-top: 18px;
}
.band-wald .blei { color: var(--auf-wald-gedaempft); }

/* -------------------------------------------------------------- buttons */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 48px minimum target, everywhere, no exceptions. */
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  /* Deliberately not nowrap: at 200% text size a nowrapped label is wider
     than a phone, and the page would scroll sideways. Let it wrap and let
     the button grow taller. */
  text-align: center;
  max-width: 100%;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.knopf--sonne {
  background: var(--sonne);
  color: var(--tinte);
  border-color: var(--sonne-kontur);
  box-shadow: 0 6px 18px rgba(242, 151, 31, .28);
}
.knopf--sonne:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(242, 151, 31, .34); }

.knopf--kontur {
  background: transparent;
  color: var(--wald);
  border-color: var(--linie);
}
.knopf--kontur:hover { background: rgba(16, 41, 26, .05); transform: translateY(-2px); }

.band-wald .knopf--kontur { color: var(--auf-wald); border-color: rgba(250, 244, 232, .5); }
.band-wald .knopf--kontur:hover { background: rgba(250, 244, 232, .1); }

/* --------------------------------------------------------------- header */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 244, 232, .88);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kopf[data-gescrollt="ja"] {
  border-bottom-color: var(--trenner);
  box-shadow: 0 8px 24px -18px var(--schatten);
}
/* A blur is a nicety; when the browser cannot do it the bar must still be
   opaque enough to read against a photo scrolling underneath. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: var(--vanille); }
}

.kopf__inner {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  min-height: 72px;
  /* At 200% text size the bar has to grow downwards rather than push the
     page sideways. */
  flex-wrap: wrap;
  padding-block: 8px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--wald);
}
.marke svg { width: 34px; height: 34px; flex: none; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.nav a {
  padding: 12px 14px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  color: var(--wald);
}
.nav a:hover { background: rgba(16, 41, 26, .07); }
.nav .knopf { margin-left: 8px; }

@media (max-width: 860px) {
  .nav a:not(.knopf) { display: none; }
}

/* The header call to action has to survive a 320px screen, so it carries a
   short label as well as the full one. */
.nur-schmal { display: none; }
@media (max-width: 560px) {
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .kopf .knopf { padding: 0 18px; font-size: 1rem; }
  .marke { font-size: 1.25rem; }
}

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90ch 60ch at 78% -10%, rgba(242, 151, 31, .18), transparent 62%),
    radial-gradient(70ch 50ch at 4% 8%, rgba(16, 41, 26, .07), transparent 60%),
    var(--vanille);
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero__text { padding-bottom: clamp(56px, 8vw, 104px); }

.hero h1 {
  font-size: clamp(2.375rem, 5.4vw, 3.75rem);
  max-width: 16ch;
  /* Display type never gets hyphenated. A broken word in 60pt is the first
     thing anyone sees, and German breaks in ugly places without a dictionary. */
  hyphens: manual;
}

.hero h1 em {
  font-style: normal;
  color: var(--sonne-text);
}

.region-marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--papier);
  border: 1px solid var(--trenner);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gedaempft);
  margin-bottom: 24px;
}
.region-marke span[aria-hidden] {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sonne);
  box-shadow: 0 0 0 4px rgba(242, 151, 31, .22);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__fussnote {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: var(--gedaempft);
}

/* Which phones this runs on, said once and visibly. Deliberately no Apple
   or Android logo: both are trademarks with their own usage rules, and
   naming the platforms in words is allowed everywhere and reads just as
   clearly. */
.plattformen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.plattform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  background: var(--papier);
  border: 1px solid var(--trenner);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinte);
}
.plattform svg { width: 17px; height: 17px; color: var(--sonne-text); flex: none; }

.hero__bild {
  align-self: end;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { padding-bottom: 0; }
  .hero__bild { margin-top: 40px; }
}

/* ------------------------------------------------------------- telefone */

.telefon {
  position: relative;
  width: min(300px, 78vw);
  flex: none;
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(160deg, #24382b, #0d1f14);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .16) inset,
    0 34px 70px -28px rgba(16, 41, 26, .55);
}
.telefon__glas {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: var(--papier);
  aspect-ratio: 1206 / 2622;
}
.telefon__glas img { width: 100%; height: 100%; object-fit: cover; }
.telefon::after {
  /* The pill. Drawn rather than screenshotted so it stays crisp. */
  content: "";
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  width: 31%; height: 20px;
  border-radius: 999px;
  background: #0d1f14;
}

.telefon--gross { width: min(330px, 80vw); }

/* ------------------------------------------------------------ statement */

.satz {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.2vw, 2.875rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.satz em { font-style: normal; color: var(--sonne); }

.satz-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .satz-gitter { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- steps */

.schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 52px;
  counter-reset: schritt;
}
@media (max-width: 860px) { .schritte { grid-template-columns: 1fr; } }

.schritt {
  position: relative;
  padding: 30px 28px 32px;
  background: var(--papier);
  border: 1px solid var(--trenner);
  border-radius: var(--radius-gross);
}
.schritt__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sonne);
  border: 1.5px solid var(--sonne-kontur);
  color: var(--tinte);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 18px;
}
.schritt h3 { margin-bottom: 10px; }
.schritt p { color: var(--gedaempft); }

/* ------------------------------------------------------------ features */

.merkmal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(40px, 6vw, 68px) 0;
}
.merkmal + .merkmal { border-top: 1px solid var(--trenner); }
.band-wald .merkmal + .merkmal { border-top-color: rgba(250, 244, 232, .18); }

.merkmal--gespiegelt .merkmal__bild { order: -1; }

.merkmal__bild { display: flex; justify-content: center; }

@media (max-width: 860px) {
  .merkmal { grid-template-columns: 1fr; }
  .merkmal--gespiegelt .merkmal__bild { order: 0; }
}

.liste {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 14px;
}
.liste li {
  position: relative;
  padding-left: 34px;
  color: var(--gedaempft);
}
.band-wald .liste li { color: var(--auf-wald-gedaempft); }
.liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 20px; height: 11px;
  border-left: 2.5px solid var(--sonne-kontur);
  border-bottom: 2.5px solid var(--sonne-kontur);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.band-wald .liste li::before { border-color: var(--sonne); }
.liste li strong { color: var(--tinte); font-weight: 700; }
.band-wald .liste li strong { color: var(--auf-wald); }

/* --------------------------------------------------------------- cards */

.karten {
  display: grid;
  /* Four cards read better as a square than as a row of three and a stray. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 52px;
}
@media (max-width: 720px) { .karten { grid-template-columns: 1fr; } }

.karte {
  padding: 30px 28px;
  border-radius: var(--radius-gross);
  background: rgba(250, 244, 232, .07);
  border: 1px solid rgba(250, 244, 232, .2);
}
.karte h3 { margin-bottom: 10px; font-size: 1.1875rem; }
.karte p { color: var(--auf-wald-gedaempft); font-size: 1rem; }

.karte__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(242, 151, 31, .16);
  margin-bottom: 18px;
}
.karte__zeichen svg { width: 24px; height: 24px; stroke: var(--sonne); }

/* --------------------------------------------------------- organisation */

.organisation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .organisation { grid-template-columns: 1fr; } }

.abzeichen-demo {
  padding: 30px;
  background: var(--papier);
  border: 1px solid var(--trenner);
  border-radius: var(--radius-gross);
  box-shadow: 0 22px 44px -30px var(--schatten);
}
.abzeichen-zeile { display: flex; align-items: center; gap: 14px; }
.abzeichen-zeile__kreis {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wald);
  color: var(--vanille);
  display: grid; place-items: center;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.25rem;
  flex: none;
}
.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: rgba(16, 41, 26, .08);
  color: var(--wald);
  font-size: 0.875rem;
  font-weight: 700;
}
.abzeichen svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------------- faq */

.faq { margin-top: 44px; display: grid; gap: 12px; }

.faq details {
  border: 1px solid var(--trenner);
  border-radius: var(--radius);
  background: var(--papier);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  min-height: 60px;
  display: flex;
  align-items: center;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.0625rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--sonne-kontur);
  border-bottom: 2.5px solid var(--sonne-kontur);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { padding: 0 24px 22px; color: var(--gedaempft); max-width: 68ch; }

/* -------------------------------------------------------------- closing */

.schluss { text-align: center; }
.schluss h2 { max-width: 18ch; margin-inline: auto; }
.schluss .blei { margin-inline: auto; }
.schluss .hero__aktionen { justify-content: center; }

/* --------------------------------------------------------------- footer */

.fuss {
  background: var(--wald);
  color: var(--auf-wald-gedaempft);
  padding: 60px 0 44px;
  font-size: 0.9375rem;
}
.fuss__oben {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(250, 244, 232, .16);
}
.fuss .marke { color: var(--auf-wald); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 4px; }
.fuss nav a {
  padding: 12px 14px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  text-decoration: none;
  color: var(--auf-wald);
  font-weight: 600;
}
.fuss nav a:hover { background: rgba(250, 244, 232, .1); }
.fuss__unten { padding-top: 26px; }

/* ------------------------------------------------------------ subpages */

.rechtstext { padding: clamp(48px, 7vw, 88px) 0; }
.rechtstext h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 14px; }
.rechtstext h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); margin-top: 40px; }
.rechtstext p, .rechtstext ul { max-width: 68ch; margin-top: 14px; color: var(--gedaempft); }
.rechtstext ul { padding-left: 22px; display: grid; gap: 8px; }
.rechtstext a { color: var(--sonne-text); font-weight: 600; }
.rechtstext .platzhalter,
.rechtstext .hinweis {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 4px solid var(--sonne);
  background: var(--vanille);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--tinte);
}

/* ------------------------------------------------------------ animation */

/* Everything below is decoration. The page is complete and readable with the
   whole block switched off, which is exactly what happens for anyone who has
   asked their system to stop moving things. */

.auftritt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--verzug, 0ms);
}
.auftritt.ist-da { opacity: 1; transform: none; }

/* No JavaScript? Then nothing was ever hidden. */
.kein-js .auftritt { opacity: 1; transform: none; }

.schwebt { animation: schweben 7s ease-in-out infinite; }
@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.bogen path, .bogen circle { transition: none; }
.bogen__strich {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: zeichnen 1.1s .15s cubic-bezier(.4, 0, .2, 1) forwards;
}
.bogen__punkt {
  transform-origin: 512px 640px;
  transform: scale(0);
  animation: aufploppen .4s .95s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes aufploppen { to { transform: scale(1); } }

/* Paper does not scroll, so nothing would ever be revealed. */
@media print {
  .auftritt { opacity: 1 !important; transform: none !important; }
  .schwebt { animation: none; }
  .kopf { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .auftritt { opacity: 1; transform: none; transition: none; }
  .schwebt { animation: none; }
  .bogen__strich { stroke-dashoffset: 0; animation: none; }
  .bogen__punkt { transform: scale(1); animation: none; }
  .knopf:hover, .knopf--kontur:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* Windows high contrast and forced-colours users get the browser's palette
   rather than ours; make sure the outlines survive. */
@media (forced-colors: active) {
  .knopf, .schritt, .karte, .telefon, .faq details { border: 1px solid ButtonBorder; }
}

/* --------------------------------------------------------- stagger */

/* Named delays rather than inline style attributes, so the page can run
   under a Content-Security-Policy with no 'unsafe-inline' at all. */
.verzug-60  { --verzug:  60ms; }
.verzug-80  { --verzug:  80ms; }
.verzug-100 { --verzug: 100ms; }
.verzug-120 { --verzug: 120ms; }
.verzug-140 { --verzug: 140ms; }
.verzug-180 { --verzug: 180ms; }
.verzug-200 { --verzug: 200ms; }
.verzug-240 { --verzug: 240ms; }

.blei--eng { margin-top: 0; }

.org-name {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.125rem;
}

.abzeichen-demo__note {
  margin-top: 20px;
  color: var(--gedaempft);
  font-size: 1rem;
}

.fuss__spruch { display: block; margin-top: 6px; }

.fuss__klein {
  display: block;
  margin-top: 18px;
  font-size: 0.8125rem;
  opacity: .85;
}
.fuss__klein a { color: inherit; }