/* ============================================================================
   fang.fish — Landingpage
   Handgeschriebenes CSS, kein Framework, kein Build-Schritt.
   Nachbau des Astro/Tailwind-Builds; Farben und Maße sind aus dem gebauten
   Stylesheet gelesen, nicht geraten.
   ========================================================================= */

/* --- Schrift: lokal, keine Fremdanfrage --------------------------------- */
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 300; font-display: swap;
             src: url(/fonts/ubuntu-300-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: italic; font-weight: 300; font-display: swap;
             src: url(/fonts/ubuntu-300italic-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap;
             src: url(/fonts/ubuntu-400-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: italic; font-weight: 400; font-display: swap;
             src: url(/fonts/ubuntu-400italic-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap;
             src: url(/fonts/ubuntu-500-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap;
             src: url(/fonts/ubuntu-700-latin.woff2) format("woff2"); }

/* --- Marke -------------------------------------------------------------- */
:root {
  --accent:   #5DB87A;
  --accent2:  #3A9E5F;
  --dark:     #011422;
  --text:     #E8F4F8;
  --muted:    #7FA8BC;
  --teal:     #133747;
  --blue:     #93C5FD;          /* blue-300 — zweite Score-Spur */
  --red:      #EF4444;

  --line:       rgba(255,255,255,.05);
  --line-2:     rgba(255,255,255,.08);
  --line-hover: rgba(255,255,255,.15);
  --surface:    rgba(255,255,255,.03);
  --surface-2:  rgba(255,255,255,.05);

  --bg-gradient:   linear-gradient(180deg, #133747, #011422);
  --text-gradient: linear-gradient(135deg, #5db87a, #3a9e5f, #7fa8bc);

  /* Die fuenf Spaltenbreiten der Vorlage, von aussen nach innen */
  --wrap:    72rem;  /* Navigation, Feature-Grid, Footer */
  --wrap-m:  64rem;  /* breite Textsektionen, Cookie-Banner */
  --wrap-l:  56rem;  /* Standardbreite der Unterseiten */
  --wrap-s:  48rem;  /* FAQ und Schluss-CTA der Startseite */
  --wrap-xs: 42rem;  /* Recht, Hinweise, Support */

  --ease: cubic-bezier(.16,1,.3,1);   /* entspricht GSAPs power3.out */
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dark);
  color: var(--text);
  font-family: Ubuntu, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; }
p, ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; }
/* MUSS nach der Zeile darueber stehen. `hidden` setzt `display: none` nur ueber das
   Browser-Stylesheet; jede Autorenregel mit gleicher Spezifitaet schlaegt es — und
   `img, svg { display: block }` tat genau das. Folge: beide Menuesymbole waren
   gleichzeitig sichtbar, auf jeder der 13 Seiten. Der HTML-Standard warnt bei
   `hidden` ausdruecklich davor. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- Bausteine, die überall wiederkehren -------------------------------- */
.wrap    { width: 100%; max-width: var(--wrap);    margin-inline: auto; }
.wrap-m  { width: 100%; max-width: var(--wrap-m);  margin-inline: auto; }
.wrap-l  { width: 100%; max-width: var(--wrap-l);  margin-inline: auto; }
.wrap-s  { width: 100%; max-width: var(--wrap-s);  margin-inline: auto; }
.wrap-xs { width: 100%; max-width: var(--wrap-xs); margin-inline: auto; }

.section         { padding-block: 5rem; padding-inline: 1.5rem; }
.section--tall   { padding-block: 8rem; }
.section--hero   { padding-block: 10rem 4rem; }
.section--edged  { border-block: 1px solid var(--line); }

.center { text-align: center; }
.br-md  { display: none; }   /* Umbruch erst ab der mittleren Breite */
.lead   { color: var(--muted); font-size: 1.25rem; line-height: 1.6; }
.muted  { color: var(--muted); }
.small  { font-size: .875rem; line-height: 1.6; }
.tiny   { font-size: .75rem; }

.gradient-text {
  background: var(--text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Die Pille: Punkt + Text, Akzentrahmen. Kommt auf jeder Seite vor. */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(93,184,122,.10);
  border: 1px solid rgba(93,184,122,.20);
  border-radius: 9999px;
  padding: .5rem 1rem;
  color: var(--accent);
  font-size: .875rem; font-weight: 500;
}
.pill--wide { gap: .75rem; }
.pill--tight { padding: .25rem .75rem; font-size: .75rem; font-weight: 700;
               text-transform: uppercase; letter-spacing: .05em; }
.dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--accent);
       flex: 0 0 auto; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.pill .sep { color: rgba(255,255,255,.2); }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; padding: .625rem 1.25rem;
  background: var(--accent); color: var(--dark);
  font-size: .875rem; font-weight: 700;
  transition: background-color .2s, transform .2s;
}
.btn:hover  { background: var(--accent2); transform: scale(1.05); }
.btn:active { transform: scale(.95); }
.btn--ghost {
  background: none; color: var(--muted);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 400;
}
.btn--ghost:hover { background: none; color: var(--text); border-color: rgba(255,255,255,.2); }
.btn--block { width: 100%; border-radius: 1rem; padding: .875rem 1.5rem; }

/* Store-Badges */
.stores { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.store  { transition: transform .2s; }
.store:hover  { transform: scale(1.05); }
.store:active { transform: scale(.95); }
.store img { height: 3.5rem; width: auto; }
.stores--sm .store img { height: 2.5rem; }

/* Karte — die Grundfläche für fast alles */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.card--link:hover { background: var(--surface-2); border-color: rgba(93,184,122,.2); transform: scale(1.02); }
.card:hover       { border-color: rgba(93,184,122,.2); }
.card__icon {
  width: 2.5rem; height: 2.5rem; border-radius: 1rem;
  background: rgba(93,184,122,.10); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; flex: 0 0 auto;
}
.card__icon--lg { width: 3rem; height: 3rem; margin-bottom: 1.25rem;
                  font-size: 1.25rem; font-weight: 700; }
.card h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.card p  { color: var(--muted); font-size: .875rem; line-height: 1.7; }

/* Zeile innerhalb einer Karte: Icon + Text auf schwacher Fläche */
.rows { display: flex; flex-direction: column; gap: .5rem; }
.row  {
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface); border-radius: .75rem; padding: .625rem 1rem;
  color: var(--muted); font-size: .875rem;
}
.row > svg, .row .ico { color: var(--accent); flex: 0 0 auto; }

/* Raster */
.grid    { display: grid; gap: 1.5rem; }
.grid-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ============================ Navigation ================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .5s, backdrop-filter .5s;
}
.nav.is-scrolled {
  background: rgba(1,20,34,.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__bar {
  max-width: var(--wrap); margin-inline: auto;
  padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav__logo img { height: 1.75rem; width: auto; transition: opacity .2s; }
.nav__logo:hover img { opacity: .8; }
.nav__links { display: none; align-items: center; gap: 2rem; }
.nav__links a { color: var(--muted); font-size: .875rem; transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__cta { display: none; }
.nav__toggle { display: inline-flex; color: var(--muted); transition: color .2s; }
.nav__toggle:hover { color: var(--text); }
.nav__menu {
  display: none;
  background: rgba(1,20,34,.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.nav__menu.is-open { display: block; }
.nav__menu > div { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.nav__menu a {
  display: flex; align-items: center; gap: .5rem;
  color: var(--muted); padding-block: .5rem;
  border-bottom: 1px solid var(--line); transition: color .2s;
}
.nav__menu a:hover { color: var(--text); }
.nav__menu .btn { margin-top: .5rem; border-bottom: 0; color: var(--dark); padding: .75rem 1.25rem; }

/* ============================== Hero ===================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6rem 1.5rem 4rem;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; background-image: var(--bg-gradient); }
.hero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(93,184,122,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,184,122,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero__orb { position: absolute; z-index: 0; border-radius: 9999px; filter: blur(64px);
             animation: pulse 4s cubic-bezier(.4,0,.6,1) infinite; }
.hero__orb--a { top: 25%; left: 25%; width: 24rem; height: 24rem; background: rgba(93,184,122,.05); }
.hero__orb--b { bottom: 25%; right: 25%; width: 16rem; height: 16rem; background: rgba(19,55,71,.2);
                animation-delay: 1s; }
.hero__inner { position: relative; z-index: 10; text-align: center; max-width: 64rem; margin-inline: auto; }
.hero__icon { width: 5rem; height: 5rem; border-radius: 22%; margin: 0 auto 1.5rem;
              box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); }
.hero .pill { margin-bottom: 2rem; }
.hero h1 { font-size: 3rem; line-height: 1; margin-bottom: 1.5rem; }
.hero__sub { color: var(--muted); font-size: 1.25rem; font-weight: 300; line-height: 1.75rem;
             max-width: 42rem; margin: 0 auto 3rem; }
.hero__sub strong { color: var(--text); font-weight: 400; }

/* Die große Zwischenaussage */
.statement { font-size: 1.875rem; font-weight: 300; color: var(--muted); line-height: 2.25rem; text-align: center; }
.statement strong { color: var(--text); font-weight: 700; }

/* Abschnittskopf: Pille, Überschrift, Unterzeile */
.head { text-align: center; margin-bottom: 5rem; }
.head .pill { margin-bottom: 1.5rem; }
.head h2 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1.5rem; }
.head p  { color: var(--muted); font-size: 1.25rem; line-height: 1.75rem; max-width: 42rem; margin-inline: auto; }
.head--tight { margin-bottom: 3.5rem; }

/* Der abschließende Claim einer Sektion */
.claim {
  text-align: center;
  background: linear-gradient(90deg, rgba(19,55,71,.1), rgba(93,184,122,.05), rgba(19,55,71,.1));
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  padding: 2.5rem;
}
.claim p:first-child { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: .75rem; }
.claim p:last-child  { color: var(--muted); }

/* =========================== Feature-Blöcke ============================== */
.feature {
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(19,55,71,.1);
  padding: 2.5rem;
  display: grid; gap: 2.5rem; align-items: center;
  margin-bottom: 1rem;
}
.feature--deep { background: linear-gradient(to bottom right, rgba(19,55,71,.2), var(--dark)); }
.feature h3 { font-size: 1.875rem; line-height: 2.25rem; margin-bottom: 1rem; }
.feature > div > p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; }
.feature .pill--tight { margin-bottom: 1.5rem; }
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--accent); font-size: .875rem; font-weight: 500;
  margin-top: 1.5rem; transition: gap .2s;
}
.arrow-link:hover { gap: .75rem; }

/* Faktor-Balken */
.bars { width: 100%; max-width: 20rem; display: flex; flex-direction: column; gap: .75rem; margin-inline: auto; }
.bar__label { display: flex; justify-content: space-between; font-size: .75rem; margin-bottom: .25rem;
              color: var(--muted); }
.bar__track { height: .375rem; background: var(--surface-2); border-radius: 9999px; overflow: hidden; }
.bar__fill  { height: 100%; border-radius: 9999px; width: var(--pct, 0%);
              transition: width 1.2s var(--ease); }

/* Score-Ring */
.score { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.score__ring { position: relative; display: flex; align-items: center; justify-content: center; }
.score__ring svg { transform: rotate(-90deg); }
.score__ring circle { transition: stroke-dashoffset 1.2s var(--ease); }
.score__mid { position: absolute; inset: 0; display: flex; flex-direction: column;
              align-items: center; justify-content: center; }
.score__num { font-size: 3rem; font-weight: 700; }
.legend { width: 100%; max-width: 20rem; display: flex; flex-direction: column; gap: .5rem; }
.legend__row {
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1rem; padding: .75rem 1rem;
}
.legend__row b { font-size: .75rem; }
.legend__row span { font-size: .75rem; color: var(--muted); display: block; }
.legend__dot { width: .625rem; height: .625rem; border-radius: 9999px; flex: 0 0 auto; }
.legend__val { font-weight: 700; font-size: .875rem; margin-left: auto; }

/* Zweispaltige Mikro-Listen (SQS / Faktoren) */
.microhead { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
             font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.microhead .legend__dot { width: .5rem; height: .5rem; }
.micro { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .375rem; padding-left: 1rem; }
.micro > div { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--muted); }
.micro svg { flex: 0 0 auto; }

/* Evidenz-Zeilen */
.evidence { width: 100%; max-width: 20rem; display: flex; flex-direction: column; gap: .75rem; margin-inline: auto; }
.evidence__row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface-2); border-radius: 1rem; padding: 1rem;
}
.evidence__dot { width: .75rem; height: .75rem; border-radius: 9999px; flex: 0 0 auto; }
.evidence__row span { color: var(--muted); font-size: .875rem; flex: 1; }
.evidence__row b { font-weight: 700; color: var(--text); }

/* ============================ Schritt-Karten ============================= */
.step { position: relative; overflow: hidden; }
.step__no {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 3.75rem; font-weight: 700; color: rgba(255,255,255,.03);
  transition: color .2s; line-height: 1; pointer-events: none;
}
.step:hover .step__no { color: rgba(255,255,255,.05); }
.step__ico { color: var(--accent); margin-bottom: 1.5rem; }

/* ============================= Fisch-Karten ============================== */
.fish h3 { font-size: 1.5rem; margin-bottom: 0; }
.fish__latin { color: var(--muted); font-size: .875rem; font-style: italic; margin-bottom: 1rem; }
.fish p { margin-bottom: 1.5rem; }

/* ================================ Zahlen ================================= */
.stat__num { font-size: 3rem; font-weight: 700; margin-bottom: .5rem; line-height: 1; }
.stat__label { font-weight: 700; margin-bottom: .25rem; }
.stat__note  { color: var(--muted); font-size: .75rem; }

/* ================================= CTA =================================== */
.cta { position: relative; overflow: hidden; padding-block: 10rem; }
.cta__bg { position: absolute; inset: 0; z-index: 0;
           background: linear-gradient(to bottom, rgba(19,55,71,.05), var(--dark)); }
.cta__orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: min(600px, 120vw); height: min(600px, 120vw); border-radius: 9999px;
            background: rgba(93,184,122,.05); filter: blur(64px); z-index: 0; }
.cta__inner { position: relative; z-index: 10; max-width: var(--wrap-s); margin-inline: auto; text-align: center; }
.cta__icon { width: 6rem; height: 6rem; border-radius: 22%; margin: 0 auto 2rem;
             box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.cta h2 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1.5rem; }

/* ================================= FAQ =================================== */
.faq { display: flex; flex-direction: column; gap: .75rem; }
.faq__item {
  border: 1px solid var(--line-2); border-radius: 1rem; overflow: hidden;
  background: rgba(255,255,255,.02); transition: border-color .2s;
}
.faq__item:hover { border-color: var(--line-hover); }
.faq__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; text-align: left; font-weight: 500;
}
.faq__chevron { color: var(--accent); flex: 0 0 auto; transition: transform .3s; }
.faq__trigger[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
/* Auf- und Zuklappen ueber `grid-template-rows: 0fr → 1fr` statt ueber eine in
   Pixeln gemessene `max-height`. Der Grund ist ein gemessener Fehler, nicht Stil:
   die vorige Fassung las beim Klick `scrollHeight` und schrieb ihn fest. Der Wert
   stand damit fuer immer — er ueberlebte jede Breitenaenderung, und schon beim
   ERSTEN Oeffnen war er zu klein (gemessen: max-height 91px gegen 111px Inhalt),
   weil zum Messzeitpunkt noch die Ersatzschrift galt. Die letzte Zeile jeder
   Antwort fehlte. `0fr → 1fr` misst gar nichts und kann deshalb nicht danebenliegen.
   `min-height: 0` am Kind ist Pflicht, sonst schrumpft das Grid-Element nicht. */
.faq__body { display: grid; grid-template-rows: 0fr; overflow: hidden;
             transition: grid-template-rows .3s ease-in-out; }
.faq__body > * { min-height: 0; overflow: hidden; }
.faq__item.is-open .faq__body { grid-template-rows: 1fr; }
/* Die untere Polsterung wandert mit auf. `grid-template-rows: 0fr` macht die ZEILE
   null hoch, aber die Polsterung des Kindes kommt obendrauf — geschlossen blieben
   sonst 20 px stehen (gemessen). Sie hat denselben Uebergang, klappt also mit. */
.faq__body p { padding: 0 1.5rem; color: var(--muted); font-size: .875rem; line-height: 1.7;
               transition: padding-bottom .3s ease-in-out; }
.faq__item.is-open .faq__body p,
.no-js .faq__body p { padding-bottom: 1.25rem; }
/* Ohne JS bleibt jede Antwort lesbar. */
.no-js .faq__body { grid-template-rows: 1fr; }

/* =============================== Footer ================================== */
.footer { border-top: 1px solid var(--line); padding: 4rem 1.5rem; }
.footer__grid { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
.footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer__brand img:first-child { width: 2.25rem; height: 2.25rem; border-radius: 22%; }
.footer__brand img:last-child  { height: 1.5rem; width: auto; }
.footer p { color: var(--muted); font-size: .875rem; line-height: 1.7; max-width: 20rem; }
.footer h4 { font-size: .875rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.footer ul a { color: var(--muted); font-size: .875rem; transition: color .2s; }
.footer ul a:hover { color: var(--text); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
}
.footer__bottom p { font-size: .75rem; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.footer__legal a { color: var(--muted); font-size: .75rem; transition: color .2s; }
.footer__legal a:hover { color: var(--text); }
.footer .stores { justify-content: flex-start; gap: .75rem; margin-top: 1.5rem; }

/* =========================== Cookie-Banner =============================== */
.cookie {
  position: fixed; inset: auto 0 0 0; z-index: 9999; padding: 1rem;
  display: none;
  opacity: 0; transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.cookie.is-in { opacity: 1; transform: translateY(0); }

.cookie__box {
  max-width: var(--wrap-m); margin-inline: auto;
  background: #0d2535; border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.cookie__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; color: var(--accent); }
.cookie__head h3 { color: var(--text); font-size: 1rem; }
.cookie__box p { color: var(--muted); font-size: .875rem; line-height: 1.7; }
.cookie__box p a { color: var(--accent); }
.cookie__box p a:hover { text-decoration: underline; }
.cookie__actions { display: flex; flex-direction: column; gap: .75rem; flex: 0 0 auto; }
.cookie__actions button { border-radius: .75rem; padding: .75rem 1.5rem; font-size: .875rem; font-weight: 500;
                          transition: background-color .2s, border-color .2s; }
#cookie-decline { border: 1px solid rgba(255,255,255,.3); color: var(--text); }
#cookie-decline:hover { border-color: rgba(255,255,255,.5); }
#cookie-accept  { background: var(--accent); color: var(--dark); }
#cookie-accept:hover { background: var(--accent2); }

/* =============================== Modal =================================== */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  opacity: 0; pointer-events: none;
  /* `visibility: hidden` nimmt den Dialog aus der TASTATUR-Reihenfolge. Mit nur
     `opacity: 0` blieb sein Schliessen-Knopf fokussierbar — auf allen 13 Seiten,
     auch auf den zwoelf ohne Ausloeser (gemessen: nach 36 Tabs erreichbar).
     `aria-hidden` allein tut das nicht; der Standard verlangt dafuer, dass das
     Element auch wirklich nicht gerendert wird. Die Verzoegerung haelt das
     Ausblenden sichtbar: erst faellt die Deckkraft, dann verschwindet es. */
  visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
}
.modal.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .3s, visibility 0s;
}
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7);
                   -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__box {
  position: relative; z-index: 10;
  background: #0d2a38; border: 1px solid rgba(93,184,122,.2);
  border-radius: 1.5rem; padding: 2.5rem;
  max-width: 24rem; width: 100%; text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
  transform: scale(.95); transition: transform .3s;
}
.modal.is-open .modal__box { transform: scale(1); }
.modal__box img { width: 5rem; height: 5rem; border-radius: 22%; margin: 0 auto 1.5rem;
                  box-shadow: 0 20px 25px -5px rgba(0,0,0,.4); }
.modal__box .pill { margin-bottom: 1.25rem; }
.modal__box h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.modal__box p  { color: var(--muted); font-size: .875rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* Dunkel auf Gruen, nicht Weiss auf Gruen. Die Vorlage setzt hier `text-white`, und
   das ergibt 2,44:1 — WCAG AA verlangt 4,5:1. Dieselbe Flaeche mit der dunklen
   Grundfarbe misst 7,65:1. Bewusste Abweichung, und eine, die keinen Text anfasst:
   jeder andere Knopf dieser Seite (`.btn`, `#cookie-accept`) macht es ohnehin so —
   der Dialog-Knopf war auch gegenueber seinen eigenen Geschwistern die Ausnahme. */
.modal__box button { width: 100%; background: var(--accent); color: var(--dark); font-weight: 700;
                     border-radius: 1rem; padding: .875rem 1.5rem; font-size: .875rem;
                     transition: background-color .2s; }
.modal__box button:hover { background: var(--accent2); }

/* ====================== Fließtext (Recht, Support) ======================= */
.prose { max-width: var(--wrap-xs); margin-inline: auto; }
.prose h2 { font-size: 1.5rem; margin: 3rem 0 1rem; }
.prose h3 { font-size: 1.125rem; margin: 2rem 0 .75rem; color: var(--accent); }
.prose p, .prose li { color: var(--muted); font-size: .9375rem; line-height: 1.8; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .875rem; }
.prose th, .prose td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); font-weight: 700; }
.prose td { color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* Kopf einer Unterseite (kein Vollbild-Hero) */
.page-head { position: relative; overflow: hidden; padding: 10rem 1.5rem 6rem;
             text-align: center; background-image: var(--bg-gradient); }
.page-head > * { position: relative; z-index: 1; }
.page-head__orb { position: absolute; z-index: 0; top: 33%; right: 25%;
                  width: 20rem; height: 20rem; border-radius: 9999px;
                  background: rgba(93,184,122,.05); filter: blur(64px); }
.page-head h1 { font-size: 3rem; line-height: 1; margin-bottom: 1.5rem; }
.page-head p  { color: var(--muted); font-size: 1.25rem; line-height: 1.75rem;
                max-width: 42rem; margin-inline: auto; }
.page-head .pill { margin-bottom: 1.5rem; }

/* ===================== Einblenden beim Scrollen ==========================
   Der Ruhezustand ist SICHTBAR. Erst wenn JS läuft und der Nutzer keine
   reduzierte Bewegung verlangt, setzt `.js-reveal` den Startzustand —
   ohne JS bleibt die Seite vollständig lesbar.                             */
.js-reveal .reveal      { opacity: 0; transform: translateY(60px); }
.js-reveal .reveal--in  { opacity: 0; transform: translateX(20px); }
.js-reveal .reveal--pop { opacity: 0; transform: scale(.85); }
.js-reveal .reveal.is-visible,
.js-reveal .reveal--in.is-visible,
.js-reveal .reveal--pop.is-visible {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal,
  .js-reveal .reveal--in,
  .js-reveal .reveal--pop { opacity: 1; transform: none; transition: none; }
  .hero__orb, .dot { animation: none; }
  .bar__fill, .score__ring circle { transition: none; }
  .modal, .modal__box, .cookie { transition: none; }
}

/* ============================== Breiten ================================== */
@media (min-width: 640px) {
  .cookie__box { flex-direction: row; align-items: center; }
  .cookie__actions { flex-direction: row; }
  .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 768px) {
  .nav__links, .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__menu { display: none !important; }

  .section        { padding-block: 5rem; }
  .section--tall  { padding-block: 8rem; }

  .hero h1        { font-size: 4.5rem; line-height: 1; }
  .hero__sub      { font-size: 1.5rem; line-height: 2rem; }
  .statement      { font-size: 3rem; line-height: 1; }
  .head h2        { font-size: 3.75rem; line-height: 1; }
  .head--sm h2    { font-size: 3rem; line-height: 1; }
  .feature        { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 4rem; gap: 3rem; }
  .feature h3     { font-size: 2.25rem; line-height: 2.5rem; }
  .fish h3        { font-size: 1.5rem; }
  .stat__num      { font-size: 3.75rem; }
  .cta h2         { font-size: 3.75rem; line-height: 1; }
  .page-head h1   { font-size: 4.5rem; line-height: 1; }
  .footer__grid   { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .footer__brand-col { grid-column: span 2; }
  .cookie         { padding: 1.5rem; }
  .cookie__box    { padding: 2rem; }
  .prose h2       { font-size: 1.875rem; }
  .br-md          { display: block; }
  .claim p:first-child { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 1024px) {
  .hero h1 { font-size: 6rem; line-height: 1; }
}
@media (max-width: 767px) {
  .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
  .grid-4.stats    { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feature__media  { order: 2; }
  .feature__copy   { order: 1; }
}
@media (max-width: 480px) {
  .grid-2   { grid-template-columns: minmax(0,1fr); }
  .micro    { grid-template-columns: minmax(0,1fr); }
  .section  { padding-inline: 1rem; }
  .card     { padding: 1.5rem; }
  .feature  { padding: 1.5rem; }
}

/* ===================== Funktionsliste (/app) ============================= */
.feature-list { display: flex; flex-direction: column; gap: 1.5rem; }
.panel {
  display: flex; gap: 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1.5rem; padding: 2rem;
}
.panel--accent { border-color: rgba(93,184,122,.2); }
.panel__icon {
  width: 3rem; height: 3rem; border-radius: 1rem; flex: 0 0 auto;
  background: rgba(93,184,122,.10); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.panel__icon--blue { background: rgba(96,165,250,.10); color: #60A5FA; }
.panel h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: .75rem; }
.panel p  { color: var(--muted); font-size: .9375rem; line-height: 1.8; margin-bottom: 1rem; }
.panel__example { font-style: italic; }
.panel .arrow-link { margin-top: 0; }

.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ticks li { display: flex; align-items: flex-start; gap: .5rem;
            color: var(--muted); font-size: .875rem; line-height: 1.7; }
.ticks li > span { color: var(--accent); flex: 0 0 auto; }

.row--block { display: block; line-height: 1.7; border-radius: 1rem; padding: .75rem 1rem; }
.rows-grid { gap: .5rem; }
.rows-grid .row { border-radius: .75rem; }

.arten { gap: .75rem; margin-top: 1rem; }
.art { background: var(--surface); border-radius: 1rem; padding: .875rem 1rem; }
.art__name { font-weight: 700; font-size: .875rem; margin-bottom: .125rem; }

.is-no { color: #F87171; }
.card--no { background: rgba(248,113,113,.05); border-color: rgba(248,113,113,.10); padding: 1.5rem; }
.card--no:hover { border-color: rgba(248,113,113,.10); }
.card--no__head { display: flex; align-items: center; gap: .5rem;
                  color: #F87171; font-weight: 700; margin-bottom: .5rem; }

.store-cards { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.store-card {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: 1rem 1.5rem; transition: background-color .2s;
}
.store-card:hover { background: rgba(255,255,255,.12); }
.store-card img { height: 2rem; width: auto; }
.store-card span { text-align: left; }
.store-card b { display: block; font-size: .875rem; }

@media (min-width: 640px) { .store-cards { flex-direction: row; } }
@media (max-width: 640px) { .panel { flex-direction: column; gap: 1rem; } }

/* ==================== Methode: Prinzipien, Klassen, Faktoren ============= */
.section-title { font-size: 1.875rem; line-height: 2.25rem; text-align: center; margin-bottom: 3rem; }
.section-title--sub { margin-bottom: 1rem; }
.section-sub { color: var(--muted); text-align: center; max-width: 36rem;
               margin: 0 auto 3rem; line-height: 1.7; }

.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.stack--tight { gap: .75rem; }

.numbered {
  display: flex; gap: 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1.5rem; padding: 2rem; transition: border-color .2s;
}
.numbered:hover { border-color: rgba(93,184,122,.15); }
.numbered__no { font-size: 2.25rem; font-weight: 700; color: rgba(255,255,255,.1);
                flex: 0 0 3rem; line-height: 1.1; }
.numbered h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.numbered p  { color: var(--muted); line-height: 1.7; }

.evclass { background: var(--surface); border: 1px solid var(--line);
           border-radius: 1.5rem; padding: 1.75rem; }
.evclass__dot { display: block; width: .75rem; height: .75rem; border-radius: 9999px; margin-bottom: 1rem; }
.evclass__label { font-size: .75rem; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .05em; margin-bottom: .25rem; }
.evclass__count { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: .75rem; }
.evclass p { color: var(--muted); font-size: .875rem; line-height: 1.7; margin-bottom: 1rem; }
.evclass__ex { border-top: 1px solid var(--line); padding-top: 1rem; }
.evclass__exlabel { font-size: .75rem; color: rgba(255,255,255,.3);
                    text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }

.factor {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1rem; padding: 1rem 1.5rem; transition: border-color .2s;
}
.factor:hover { border-color: rgba(255,255,255,.1); }
.factor__badge {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}
.factor--a .factor__badge { background: rgba(93,184,122,.2); color: var(--accent); }
.factor--b .factor__badge { background: rgba(96,165,250,.2); color: var(--blue); }
.factor--c .factor__badge { background: rgba(255,255,255,.1); color: rgba(255,255,255,.4); }
.factor--x .factor__badge { background: rgba(248,113,113,.2); color: #F87171; }
.factor__name { font-weight: 500; }
.factor__note { color: var(--muted); font-size: .875rem; line-height: 1.6; margin-top: .125rem; }

@media (min-width: 768px) { .section-title { font-size: 2.25rem; line-height: 2.5rem; } }

/* ===================== Faktorenliste (/methode/faktoren) ================= */
.section--flat { padding-block: 2rem; }
.group-title { display: flex; align-items: center; gap: .75rem;
               font-size: 1.25rem; margin-bottom: 1.5rem; }
.group-title__ico { color: var(--accent); display: flex; }
.group-title__count { font-size: .875rem; font-weight: 400; color: var(--muted); margin-left: .25rem; }

.legende { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.legende__item { display: flex; align-items: center; gap: .75rem;
                 color: var(--muted); font-size: .875rem; }
.legende__item .factor__badge { width: 2rem; height: 2rem; }

.factor__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.factor__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: .75rem; color: rgba(255,255,255,.3); }
.factor__head .factor__name { font-weight: 700; margin: 0; }
.factor--a .factor__badge, .factor--b .factor__badge,
.factor--c .factor__badge, .factor--x .factor__badge { width: 2rem; height: 2rem; }

/* Seitenwechsel am Fuss einer Unterseite */
.pagenav { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.pagenav a { display: flex; align-items: center; gap: .5rem; font-size: .875rem; transition: color .2s; }
.pagenav__back { color: var(--muted); }
.pagenav__next { color: var(--accent); }
.pagenav a:hover { color: var(--text); }

/* ========================= Quellen (/methode/quellen) ==================== */
.kicker { font-size: .875rem; font-weight: 700; color: var(--muted);
          text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }

.notice {
  background: var(--surface); border: 1px solid rgba(93,184,122,.15);
  border-radius: 1rem; padding: 1.5rem;
  color: var(--muted); font-size: .875rem; line-height: 1.8;
}
.notice strong { color: var(--text); }
.notice--plain { border-color: var(--line); }
.notice a { color: var(--accent); }
.notice a:hover { text-decoration: underline; }

.ref { display: flex; align-items: flex-start; gap: 1rem;
       background: var(--surface); border: 1px solid var(--line);
       border-radius: 1rem; padding: 1.25rem 1.5rem; }
.ref .factor__badge { width: 1.5rem; height: 1.5rem; margin-top: .125rem; }
.ref__title { font-weight: 500; font-size: .875rem; line-height: 1.6; margin-bottom: .25rem; }
.ref__title i { color: var(--muted); }
.ref__journal { font-size: .875rem; color: rgba(255,255,255,.3); }

.src { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
       background: var(--surface); border: 1px solid var(--line);
       border-radius: 1rem; padding: 1.25rem 1.5rem; }
.src__name { font-weight: 500; margin-bottom: .25rem; }
.src__desc { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.src__link { font-size: .75rem; color: var(--accent); flex: 0 0 auto; }
.src__link:hover { text-decoration: underline; }

/* ============================ Wissen-Uebersicht ========================== */
.card__icon--xl { width: 3.5rem; height: 3.5rem; border-radius: 1rem;
                  font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; }
.fish-big h3 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 0; }
.fish-big .fish__latin { margin-bottom: 1.5rem; }
.specs { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.spec  { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.spec span:first-child { color: rgba(255,255,255,.4); }
.spec span:last-child  { color: var(--text); font-weight: 500; text-align: right; max-width: 130px; }

.themen { gap: 1.25rem; }
.thema { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
.thema:hover { border-color: rgba(255,255,255,.1); }
.thema__ico { color: var(--accent); flex: 0 0 auto; margin-top: .125rem; }
.thema h3 { font-size: 1rem; margin-bottom: .25rem; }
.thema p  { margin-bottom: .75rem; }
.tag { display: inline-block; background: rgba(93,184,122,.1); color: var(--accent);
       font-size: .75rem; padding: .125rem .5rem; border-radius: 9999px; }

/* ============================ Artenseiten ================================ */
.artstats { gap: 1rem; }
.artstat { background: var(--surface); border: 1px solid var(--line);
           border-radius: 1rem; padding: 1.5rem 1.25rem; text-align: center; }
.artstat__v { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: .25rem; }
.artstat__l { font-size: .875rem; font-weight: 500; margin-bottom: .125rem; }
.artstat__n { font-size: .75rem; color: var(--muted); }

.seasons { gap: 1.25rem; }
.season { background: var(--surface); border: 1px solid var(--line);
          border-radius: 1.5rem; padding: 1.75rem; }
.season__head { display: flex; align-items: center; justify-content: space-between;
                gap: 1rem; margin-bottom: 1rem; }
.season__head h3 { font-size: 1.125rem; }
.chip { font-size: .75rem; background: rgba(255,255,255,.1); color: var(--muted);
        border-radius: 9999px; padding: .25rem .75rem; white-space: nowrap; }
.arrows { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.arrows li { display: flex; align-items: flex-start; gap: .5rem;
             color: var(--muted); font-size: .875rem; line-height: 1.7; }
.arrows li > span { color: var(--accent); flex: 0 0 auto; }

.spot { display: flex; align-items: flex-start; gap: 1rem;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: 1rem; padding: 1.25rem 1.5rem; }
.spot__ico { color: var(--accent); flex: 0 0 auto; margin-top: .125rem; }
.spot__name { font-weight: 700; margin-bottom: .25rem; }
.spot p { color: var(--muted); font-size: .875rem; line-height: 1.7; }

.scorerow { display: flex; align-items: flex-start; gap: 1rem;
            background: var(--surface); border: 1px solid var(--line);
            border-radius: .75rem; padding: 1rem 1.25rem; }
.scorerow__arrow { color: var(--accent); flex: 0 0 auto; margin-top: .125rem; }
.scorerow__name { font-weight: 500; font-size: .875rem; }
.scorerow__note { font-size: .75rem; color: var(--muted); margin-top: .125rem; line-height: 1.6; }

.other { padding: 1.5rem; border-radius: 1rem; }
.other .card__icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem;
                     font-weight: 700; margin-bottom: .75rem; }
.other__name { font-weight: 700; margin-bottom: .25rem; }

@media (max-width: 767px) { .grid-4.artstats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .grid-4.artstats { grid-template-columns: minmax(0,1fr); } }

.infobox { border: 1px solid var(--line); border-radius: 1.5rem; padding: 2rem; margin-top: 3rem; }
.infobox h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.infobox p  { color: var(--muted); line-height: 1.8; }

/* ======================= Rechts- und Hinweisseiten ======================= */
.legal { padding-block: 10rem 8rem; min-height: 100vh; }
.legal .prose > h1 { font-size: 2.25rem; line-height: 2.5rem; margin: 0 0 .5rem; }
.legal .prose > h1 + p { color: var(--muted); font-size: .875rem; margin-bottom: 3rem; }
.legal .prose > div { margin-bottom: 2.5rem; }
.legal .prose > div > h2:first-child { margin-top: 0; }
.prose ul[style], .prose ul { list-style: disc; }

/* ============================== Support ================================== */
.page-sub { color: var(--muted); font-size: .875rem; margin-bottom: 4rem !important; }
.support-faq { margin-bottom: 5rem; }
.support-h2 { font-size: 1.25rem; margin: 0 0 2rem; }

.discs { display: flex; flex-direction: column; gap: 1rem; }
.disc {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem; overflow: hidden;
}
.disc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; cursor: pointer; user-select: none;
  color: var(--text); font-weight: 500; transition: color .2s;
  list-style: none;
}
.disc__head::-webkit-details-marker { display: none; }
.disc__head:hover { color: #fff; }
.disc__chev { color: var(--muted); flex: 0 0 auto; transition: transform .3s; }
.disc[open] .disc__chev { transform: rotate(180deg); }
.disc__body { padding: 0 1.5rem 1.5rem; color: var(--muted); font-size: .875rem; line-height: 1.8; }
.disc__body a { color: var(--accent); }
.disc__body a:hover { text-decoration: underline; }

.contact { display: flex; align-items: flex-start; gap: 1.25rem;
           background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
           border-radius: 1.5rem; padding: 2rem; }
.contact__ico { width: 3rem; height: 3rem; border-radius: 1rem; flex: 0 0 auto;
                background: rgba(93,184,122,.1); color: var(--accent);
                display: flex; align-items: center; justify-content: center; }
.contact h2 { font-size: 1.125rem; margin: 0 0 .25rem; }
.contact p  { font-size: .875rem; line-height: 1.8; margin-bottom: 1.25rem; }
.contact__btn { border-radius: 1rem; padding: .75rem 1.5rem; gap: .625rem; }

.sidelinks { margin-top: 2.5rem; gap: 1rem; }
.sidelink { display: flex; align-items: center; gap: 1rem;
            background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
            border-radius: 1rem; padding: 1rem 1.5rem; transition: border-color .2s; }
.sidelink:hover { border-color: rgba(93,184,122,.3); }
.sidelink__ico { width: 2.25rem; height: 2.25rem; border-radius: .75rem; flex: 0 0 auto;
                 background: rgba(255,255,255,.05); color: var(--muted);
                 display: flex; align-items: center; justify-content: center;
                 transition: background-color .2s, color .2s; }
.sidelink:hover .sidelink__ico { background: rgba(93,184,122,.1); color: var(--accent); }
.sidelink b { display: block; font-size: .875rem; font-weight: 500; color: var(--text); }
.sidelink span span { font-size: .75rem; color: var(--muted); }
.legal__stand { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.legal__stand p { color: rgba(255,255,255,.2); font-size: .75rem; }

@media (max-width: 640px) {
  .grid-2.sidelinks { grid-template-columns: minmax(0,1fr); }
  .contact { flex-direction: column; }
}

/* Lange Einzelwoerter duerfen umbrechen.
   BEWUSSTE ABWEICHUNG von der Vorlage: dort laeuft "Datenschutzerklärung" als
   36px-Ueberschrift bei 375px Breite ueber die Kante hinaus (gemessen: sw=401
   gegen cw=371). Die Abnahme verlangt Ueberlauffreiheit bei ~400px, also bricht
   es hier um, statt die Seite seitlich scrollen zu lassen. */
h1, h2, h3, h4, .prose, .statement { overflow-wrap: break-word; }