/* GTX|002|Funnel|Konkurrenzanalyse
   Gebaut nach design/rohdaten/desktop_design.png (2880 breit, entspricht 1440 CSS)
   und mobile_design.png (786 breit, entspricht 393 CSS).
   Farben sind am Export gemessen, nicht geschaetzt. */

:root {
  --bg: #0a0a0a;
  --bg-tief: #050505;
  --flaeche: #151515;
  --flaeche-hell: #1b1b1a;
  --linie: rgba(255, 255, 255, .10);
  --linie-stark: rgba(255, 255, 255, .18);

  --gold: #c9a768;
  --gold-text: #c29f5e;
  --gold-serif: #d9ae60;
  --gold-hell: #e6cb93;
  --gold-dunkel: #a8823c;

  --gruen-kopf: #007f4a;
  --gruen-karte: #023121;
  --gruen-tief: #03221a;
  --gruen-schein: rgba(0, 92, 56, .55);
  --navy: #13202d;

  --weiss: #fff;
  --grau: rgba(255, 255, 255, .66);
  --grau-schwach: rgba(255, 255, 255, .42);
  --rot: #e2574c;

  --display: "Playfair Display", Georgia, serif;
  --text: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --bahn: 1120px;
  --rand: 20px;

  /* Senkrechte Balken, unterschiedlich breit und hell, weiche Kanten.
     Eine Kachel von 1180 px, danach wiederholt sie sich. */
  --balken: linear-gradient(90deg,
    rgba(255, 255, 255, .000)    0px,
    rgba(255, 255, 255, .000)   30px,
    rgba(255, 255, 255, .019)   72px,
    rgba(255, 255, 255, .019)  188px,
    rgba(255, 255, 255, .004)  232px,
    rgba(255, 255, 255, .004)  318px,
    rgba(255, 255, 255, .013)  356px,
    rgba(255, 255, 255, .013)  512px,
    rgba(255, 255, 255, .000)  556px,
    rgba(255, 255, 255, .000)  648px,
    rgba(255, 255, 255, .016)  690px,
    rgba(255, 255, 255, .016)  790px,
    rgba(255, 255, 255, .007)  836px,
    rgba(255, 255, 255, .007)  980px,
    rgba(255, 255, 255, .011) 1020px,
    rgba(255, 255, 255, .011) 1140px,
    rgba(255, 255, 255, .000) 1180px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--weiss);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-text); }

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Nur fuer Screenreader */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Sektionen und Schein ---------- */

.sektion {
  position: relative;
  padding: 104px 0;
}

.sektion--schwarz { background: var(--bg); }

/* Der gruene Schimmer aus dem Entwurf: breit, weich, hinter dem Inhalt.
   Direkt als Hintergrund der Sektion, nicht als Pseudoelement mit
   negativem z-index. Das spart eine Compositing-Ebene. */
.sektion--schein {
  background:
    radial-gradient(70% 55% at 22% 34%, rgba(0, 92, 56, .44) 0%, transparent 62%),
    radial-gradient(60% 50% at 84% 22%, rgba(120, 96, 42, .22) 0%, transparent 60%),
    var(--bg);
}

/* Die Textur aus dem Entwurf: unregelmaessige senkrechte Balken, darunter ein
   gruener und ein warmer Schein, die sich links ueberlagern. Am Export
   abgemessen. Bewusst nur an drei Stellen, sonst nutzt sie sich ab. */
.sektion--textur {
  background:
    var(--balken),
    radial-gradient(48% 74% at 32% 46%, rgba(0, 104, 62, .52) 0%, transparent 66%),
    radial-gradient(28% 54% at 15% 50%, rgba(152, 126, 60, .30) 0%, transparent 68%),
    var(--bg);
  background-repeat: repeat-x, no-repeat, no-repeat, repeat;
  background-size: 1180px 100%, auto, auto, auto;
}


/* ---------- Ueberschriften ---------- */

.titel {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 22px;
}

.titel--gold { color: var(--gold-serif); }
.titel--weiss { color: var(--weiss); }
.titel em { font-style: normal; color: var(--gold-serif); }
.titel u { text-decoration-thickness: 2px; text-underline-offset: 6px; }

h1.titel { font-size: clamp(32px, 6.2vw, 58px); }
h2.titel { font-size: clamp(30px, 5.6vw, 52px); text-align: center; }

.sektion__kopf {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 56px;
}
.sektion__kopf p {
  color: var(--weiss);
  font-size: 19px;
  max-width: 720px;
  margin-inline: auto;
}


/* ---------- Knopf ---------- */

.cta {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}
.cta--links { justify-content: flex-start; }

.knopf {
  appearance: none;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 10px;
  padding: 19px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #151515;
  background:
    linear-gradient(180deg, #d8ba7f 0%, #cdac6e 38%, #c6a463 62%, #d5b77c 100%);
  box-shadow:
    0 0 26px rgba(201, 167, 104, .40),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.knopf:hover { filter: brightness(1.07); box-shadow: 0 0 34px rgba(201, 167, 104, .55), inset 0 1px 0 rgba(255, 255, 255, .6); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; }

/* Der Entwurf setzt auf dem Telefon eine kuerzere Beschriftung, damit sie in
   eine Zeile passt. Beide stehen im Markup, immer genau eine ist eingeblendet. */
.knopf__schmal { display: none; }


/* ---------- Kopf und Hero ---------- */

.kopf {
  display: flex;
  justify-content: center;
  padding: 34px var(--rand) 0;
}
.wortmarke { width: 186px; height: auto; }

.hero {
  position: relative;
  padding: 40px 0 0;
  text-align: center;
}
/* Der Schein ueber Kopf und Hero liegt am body und wird einmal ueber die
   ganze Hoehe gezeichnet. Zwei getrennte Hintergruende auf .kopf und .hero
   haben an der Grenze eine sichtbare Kante ergeben, weil jeder Verlauf in
   seinem eigenen Kasten neu anfaengt. */
body {
  background-image:
    radial-gradient(58% 100% at 16% 34%, rgba(0, 86, 52, .55) 0%, transparent 62%),
    radial-gradient(55% 90% at 88% 18%, rgba(126, 102, 46, .26) 0%, transparent 60%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1200px, 100% 1200px;
  background-position: top center, top center;
}
.hero__titel { max-width: 1060px; margin-inline: auto; }
.hero__antwort {
  max-width: 880px;
  margin: 0 auto 20px;
  font-size: 19px;
}
.hero__antwort u {
  color: var(--gold-serif);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.hero__nutzen {
  color: var(--gold-text);
  font-size: 19px;
  margin-bottom: 0;
}

/* Die Vorschau der Vergleichstabelle. Das Bild bringt den Geraeterahmen und
   das Ausblenden nach unten schon mit, hier kommt nur die Bewegung dazu:
   beim Scrollen klappt es aus der Waagerechten in die Senkrechte.
   Ohne JavaScript und bei prefers-reduced-motion steht es gleich aufrecht. */
.vorschau {
  margin: 56px auto 0;
  max-width: 1180px;
  padding: 0 var(--rand);
}
.vorschau__buehne {
  perspective: 1500px;
  perspective-origin: 50% 100%;
}
.vorschau__bild {
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  transform: rotateX(var(--kipp, 0deg));
  will-change: transform;
}


/* ---------- Karten: Was dich als Mandant erwartet ---------- */

/* Alle drei Karten bekommen dieselbe Zeilenhoehe, damit links und rechts
   buendig sind. Die mittlere ragt oben und unten heraus, dafuer die
   negativen Abstaende. Das haelt auch, wenn der Text laenger wird. */
.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.karte--mitte { margin-block: -30px; }
/* Die mittlere Karte haengt 30 px tiefer, ohne Zuschlag klebt der Knopf daran. */
.karten + .cta { margin-top: 78px; }
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 30px 28px 32px;
}
.karte__icon { width: 86px; height: auto; margin-bottom: 26px; }
.karte__titel {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
}
.karte p { color: var(--grau); font-size: 16px; }


/* ---------- Vergleichstabelle ---------- */

.vergleich__rahmen { position: relative; }

table.vergleich {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  text-align: left;
}
table.vergleich th, table.vergleich td {
  padding: 18px 18px;
  vertical-align: middle;
  border-bottom: 1px solid var(--linie);
}
table.vergleich thead th {
  font-size: 15px;
  font-weight: 700;
  color: var(--weiss);
  border-bottom: 1px solid var(--linie-stark);
  padding-bottom: 14px;
}
.spalte__zusatz {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau-schwach);
  margin-top: 3px;
}
th.kriterium {
  width: 28%;
  padding-left: 0;
  color: var(--grau-schwach);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
}
td.kriterium { width: 28%; padding-left: 0; }
.kriterium__name { display: block; font-size: 15px; font-weight: 600; color: var(--weiss); }
.kriterium__zusatz { display: block; font-size: 12.5px; color: var(--grau-schwach); margin-top: 3px; }

/* Die mittlere Spalte steht als angehobene Karte vor der Tabelle. */
.vergleich col.krit { width: 27%; }
.vergleich col.gt { width: 23%; }
table.vergleich .gt {
  position: relative;
  background: var(--gruen-karte);
  border-bottom-color: rgba(255, 255, 255, .07);
}
table.vergleich thead .gt {
  background: var(--gruen-kopf);
  border-radius: 14px 14px 0 0;
  border-bottom-color: transparent;
  color: var(--weiss);
  padding-top: 26px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
table.vergleich thead .gt .spalte__zusatz { color: rgba(255, 255, 255, .78); }
table.vergleich tbody tr:last-child .gt {
  border-radius: 0 0 14px 14px;
  border-bottom-color: transparent;
  padding-bottom: 28px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}

.zeichen {
  display: inline-flex;
  width: 1.15em;
  margin-right: 9px;
  font-weight: 700;
}
.zeichen--ja { color: #35b36c; }
.zeichen--nein { color: var(--rot); }
.zeichen--teils { color: var(--gold-text); }

tr.konzession td { background: rgba(201, 167, 104, .07); }
tr.konzession .kriterium__name { color: var(--gold-text); }
.marke {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid var(--gold-dunkel);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* Mobil: je Kriterium eine Karte mit drei Zeilen. */
.vergleich-mobil { display: none; }
.vm__karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 22px 18px;
  margin-bottom: 18px;
}
.vm__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vm__name { font-size: 19px; font-weight: 600; margin: 0; }
.vm__zusatz { color: var(--grau-schwach); font-size: 15px; margin: 2px 0 16px; }
.vm__zeile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.vm__zeile:last-child { margin-bottom: 0; }
.vm__zeile--gt { background: var(--gruen-karte); border-color: var(--gold-dunkel); }
.vm__spalte { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--grau-schwach); display: block; }
.vm__zeile--gt .vm__spalte { color: var(--gold-text); font-weight: 700; }
.vm__wert { font-size: 17px; }
.vm__zeile--gt .vm__wert { font-weight: 600; }


/* ---------- Beispielrechnung ---------- */

/* Im Entwurf ueberlappt der gruene Kasten die Karte und sitzt hoeher. */
.rechnung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
}
.rechnung__karte {
  background: linear-gradient(140deg, #1a1a19 0%, #121212 100%);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: 54px 48px 48px;
  z-index: 0;
}
.rechnung__titel { text-align: left; margin-bottom: 26px; }
.rechnung__karte p { color: var(--weiss); font-size: 16px; max-width: 46ch; }
.rechnung__platz {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  align-self: start;
  margin: -46px 0 0 -96px;
  border-radius: 16px;
  background: linear-gradient(150deg, #06563a 0%, #02392a 100%);
  color: rgba(255, 255, 255, .34);
  font-size: 26px;
  line-height: 1.35;
  text-align: center;
  padding: 24px;
  z-index: 1;
}


/* ---------- Kennzahlen ---------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zahl {
  text-align: center;
  padding: 34px 22px;
  border-right: 1px solid var(--linie);
}
.zahl:last-child { border-right: 0; }
.zahl__icon { width: 78px; height: auto; margin: 0 auto 6px; }
.zahl__wert {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 600;
  color: var(--gold-serif);
  line-height: 1.1;
  margin: 0 0 8px;
}
.zahl__text { color: var(--grau); font-size: 15px; margin: 0; }


/* ---------- Geschichte ---------- */

.story { position: relative; padding-top: 96px; }
.story__raster {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: end;
}
.story__bild { width: 100%; border-radius: 0; }
.story__text { padding-bottom: 26px; }
.story__text p { font-size: 16px; }
.story__zitat {
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  margin: 0 0 18px;
}
.story__zitat strong { color: var(--gold-text); }
.story__unterstrich { text-decoration: underline; text-underline-offset: 4px; }
.story__erkenntnis strong { color: var(--gold-text); display: block; }


/* ---------- Team ---------- */

/* Die Skyline liegt als Hintergrund der Sektion, nicht als img mit
   negativem z-index: sonst bekommt sie eine eigene Ebene und der
   Verlauf darueber flackert beim Scrollen. */
.team {
  position: relative;
  padding: 104px 0;
  background-image:
    linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, .90) 16%, rgba(10, 10, 10, .52) 44%, rgba(10, 10, 10, .74) 82%, #0a0a0a 100%),
    url("/assets/img/city.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.team__karte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
  background: rgba(14, 14, 14, .82);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: 26px;
}
.team__foto { border-radius: 8px; width: 100%; }
.team__liste { list-style: none; margin: 0; padding: 0; }
.team__liste li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 17px;
}
.team__liste li:last-child { border-bottom: 0; }
.haken {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Ablauf und Video ---------- */

.video {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #3a3a3a;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video__knopf {
  width: 100px; height: 100px;
  border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #e2c489 0%, #c19a52 100%);
  box-shadow: 0 0 34px rgba(201, 167, 104, .55);
  display: grid; place-items: center;
  cursor: pointer;
}
.video__knopf svg { width: 30px; height: 30px; fill: #151515; margin-left: 5px; }


/* ---------- Wofuer wir nicht die Richtigen sind ---------- */

.nicht__raster {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.nicht__titel { text-align: left; margin-bottom: 26px; }
.nicht__hinweis {
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  font-size: 18px;
  margin: 0;
}
.nicht__liste { list-style: none; margin: 0; padding: 0; position: relative; }
.nicht__liste::before {
  content: "";
  position: absolute;
  left: 27px; top: 28px; bottom: 28px;
  width: 1px;
  background: var(--gold-dunkel);
}
.nicht__punkt {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 26px;
  padding: 0 0 30px;
}
.nicht__punkt + .nicht__punkt { padding-top: 30px; }
.nicht__punkt + .nicht__punkt > div:last-child { border-top: 1px solid var(--linie); padding-top: 30px; margin-top: -30px; }
.nicht__icon {
  width: 56px; height: 56px;
  border: 1px solid var(--gold-dunkel);
  border-radius: 12px;
  background: var(--bg);
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.nicht__icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nicht__punkt h3 { font-size: 20px; margin: 0 0 8px; }
.nicht__punkt p { color: var(--grau); font-size: 16px; }


/* ---------- Abschluss ---------- */

.abschluss { padding: 0 0 104px; }
.abschluss__kasten {
  background: linear-gradient(150deg, #05392a 0%, #03221a 58%, #021712 100%);
  border-radius: 20px;
  text-align: center;
  padding: 64px 30px 70px;
}
.abschluss__kasten .titel { margin-bottom: 0; }
.abschluss__kasten .cta { margin-top: 34px; }


/* ---------- FAQ ---------- */

/* Das FAQ traegt die Textur, deshalb hier keine eigene Flaeche. */
.faq__liste { max-width: 800px; margin: 0 auto; }
.faq__punkt { border-bottom: 1px solid var(--linie); }
.faq__frage {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: none;
  border: 0;
  padding: 22px 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--weiss);
  text-align: left;
  cursor: pointer;
}
.faq__frage:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq__pfeil {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round;
  transition: transform .2s ease;
}
.faq__frage[aria-expanded="true"] .faq__pfeil { transform: rotate(180deg); }
.faq__antwort { padding: 0 0 22px; color: var(--grau); font-size: 16px; }
.faq__antwort[hidden] { display: none; }


/* ---------- Footer ---------- */

.fuss { background: #0d0d0c; padding: 30px 0; }
.fuss__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.fuss__marke { width: 150px; height: auto; flex: 0 0 auto; }
.fuss__recht { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .62); }
.fuss__links { display: flex; gap: 28px; flex-wrap: wrap; }
.fuss__links a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 14px; }
.fuss__links a:hover { color: var(--gold-text); text-decoration: underline; }


/* ---------- Schmale Fenster ---------- */

@media (max-width: 900px) {
  .karten { grid-template-columns: 1fr; gap: 20px; }
  .karte--mitte { margin-block: 0; }
  .rechnung__raster { grid-template-columns: 1fr; }
  .rechnung__platz { margin: -30px 0 0; aspect-ratio: 4 / 3; }
  .story__raster,
  .team__karte,
  .nicht__raster { grid-template-columns: 1fr; gap: 28px; }
  .zahlen { grid-template-columns: 1fr; }
  .zahl { border-right: 0; border-bottom: 1px solid var(--linie); }
  .zahl:last-child { border-bottom: 0; }
  .fuss__zeile { justify-content: center; text-align: center; }
}

@media (max-width: 760px) {
  :root { --rand: 18px; }

  body { font-size: 16px; }
  .sektion { padding: 72px 0; }
  .sektion__kopf { margin-bottom: 36px; }

  .kopf { padding-top: 26px; }
  .wortmarke { width: 148px; }

  .hero { padding-top: 28px; }
  .hero__antwort, .hero__nutzen { font-size: 17px; }

  .cta { margin-top: 30px; }
  .knopf { width: 100%; padding: 20px 14px; font-size: 15px; }
  .knopf__breit { display: none; }
  .knopf__schmal { display: inline; }

  /* Die Tabelle wird zu Karten, der Entwurf zeigt sie so. */
  .vergleich__rahmen { display: none; }
  .vergleich-mobil { display: block; }

  .vorschau__rahmen { max-height: 330px; }

  .story__raster { display: flex; flex-direction: column; }
  .story__bild { order: -1; }
  .story__text { padding-bottom: 0; }

  .team__karte { padding: 18px; }

  .nicht__titel { text-align: center; }
  .nicht__hinweis { order: 2; }
  .nicht__liste { order: 1; }
  .nicht__liste::before { left: 27px; }

  .abschluss__kasten { padding: 46px 22px 50px; }

  .fuss__zeile { flex-direction: column; gap: 18px; }
  .fuss__links { justify-content: center; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}