/* =====================================================================
   Farbwelt: Schwarz / Weiß / Logo-Grün
   Aufbau: dunkle Markenflaeche oben, danach im Wechsel dunkle und
   helle Baender. Nur zwei Abschnitte bleiben bewusst weiß.
   ===================================================================== */
:root{
  --schwarz-900:#0a0c0b;
  --schwarz-850:#111412;
  --schwarz-800:#171b18;
  --schwarz-700:#222824;
  --schwarz-500:#5a615c;
  --schwarz-400:#808780;
  --weiss:#ffffff;
  --off:#f4f5f4;
  --off-2:#e8ebe8;
  --linie:#dfe3df;
  --linie-dunkel:rgba(255,255,255,.14);

  /* Logo-Gruen (Platzhalter) */
  --gruen-900:#0c2414;
  --gruen-800:#134322;
  --gruen-700:#1c6330;
  --gruen-600:#2b8442;
  --gruen-100:#dfeede;
  --gruen-50:#eef6ef;

  --ink:#171b18;
  --ink-soft:#5a615c;
  --radius:12px;
  --radius-lg:20px;
  --shadow-s:0 1px 2px rgba(10,12,11,.05),0 8px 22px rgba(10,12,11,.05);
  --shadow-m:0 6px 16px rgba(10,12,11,.08),0 22px 50px rgba(10,12,11,.12);
  --wrap:1180px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:150px}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.68;
  color:var(--ink);background:var(--weiss);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gruen-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.025em;margin:0 0 .5em;font-weight:750}
h1{font-size:clamp(2.2rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.15rem;letter-spacing:-.015em}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:clamp(58px,8vw,112px) 0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:8px;z-index:99}
.marker{
  display:inline-flex;align-items:center;gap:.6em;font-size:.76rem;font-weight:750;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gruen-600);margin:0 0 1em;
}
.marker::before{content:"";width:26px;height:2px;background:var(--gruen-600);display:block}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-soft);max-width:64ch}
.zweispaltig{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:start}

/* ===== Dunkle Bänder ===== */
.dunkel{background:var(--schwarz-900);color:#fff}
.dunkel h2,.dunkel h3,.dunkel h4{color:#fff}
.dunkel p{color:rgba(255,255,255,.78)}
.dunkel .lead{color:rgba(255,255,255,.78)}
.dunkel .marker{color:#7ed492}
.dunkel .marker::before{background:#7ed492}
.dunkel-mittel{background:var(--schwarz-850);color:#fff}
.dunkel-mittel h2,.dunkel-mittel h3{color:#fff}
.dunkel-mittel p,.dunkel-mittel .lead{color:rgba(255,255,255,.78)}
.dunkel-mittel .marker{color:#7ed492}
.dunkel-mittel .marker::before{background:#7ed492}
.dunkel-gruen{background:var(--gruen-900);color:#fff}
.dunkel-gruen h2,.dunkel-gruen h3{color:#fff}
.dunkel-gruen p,.dunkel-gruen .lead{color:rgba(255,255,255,.8)}
.dunkel-gruen .marker{color:#8fe0a1}
.dunkel-gruen .marker::before{background:#8fe0a1}
.hell{background:var(--off)}
.hell h2,.hell h3{color:var(--schwarz-900)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.55em;padding:.9em 1.7em;border-radius:100px;
  border:1.5px solid transparent;font-weight:700;font-size:1rem;cursor:pointer;
  transition:.18s ease;text-decoration:none!important;line-height:1.2;
}
.btn-primaer{background:var(--gruen-700);color:#fff}
.btn-primaer:hover{background:var(--gruen-800);transform:translateY(-1px)}
.btn-dunkel{background:#fff;color:var(--schwarz-900)}
.btn-dunkel:hover{transform:translateY(-1px);box-shadow:var(--shadow-m)}
.btn-rand{background:transparent;color:var(--schwarz-800);border-color:var(--linie)}
.btn-rand:hover{border-color:var(--schwarz-400);background:var(--off)}
.btn-rand-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-rand-hell:hover{background:rgba(255,255,255,.12)}
.btn-breit{width:100%;justify-content:center}

/* ===== Feste Kopfzeile ===== */
.kopf-fix{position:sticky;top:0;z-index:80;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.kopfleiste{background:#000;color:rgba(255,255,255,.72);font-size:.85rem}
.kopfleiste .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.kopfleiste a{color:rgba(255,255,255,.82);text-decoration:none}
.kopfleiste a:hover{color:#fff}
.kopfleiste-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.kopfleiste .guute-mini{height:26px;width:auto;object-fit:contain;display:block}

.nav-zeile{background:var(--schwarz-900);border-top:1px solid var(--linie-dunkel)}
.nav-zeile .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px;position:relative}
.marke{display:flex;align-items:center;color:#fff;text-decoration:none!important}
.marke-logo{height:50px;width:auto;max-width:230px;object-fit:contain;}
.marke-zeichen{
  width:50px;height:50px;flex:0 0 50px;border-radius:14px;background:#fff;color:var(--schwarz-900);
  display:grid;place-items:center;font-weight:800;font-size:1.05rem;letter-spacing:-.03em;
}
.nav-rechts{display:flex;align-items:center;gap:6px}
.nav-rechts a{
  color:rgba(255,255,255,.86);font-weight:600;font-size:.95rem;padding:.5em .78em;border-radius:8px;
  text-decoration:none!important
}
.nav-rechts a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-rechts .nav-cta{background:var(--gruen-700);color:#fff;padding:.62em 1.15em;border-radius:100px;margin-left:8px}
.nav-rechts .nav-cta:hover{background:var(--gruen-600)}
.nav-schalter{
  display:none;background:none;border:1.5px solid var(--linie-dunkel);border-radius:9px;
  padding:.5em .7em;font-size:1.1rem;cursor:pointer;color:#fff;line-height:1;
}

/* ===== Markenbühne ===== */
.buehne{
  position:relative;background:var(--schwarz-900);color:#fff;overflow:hidden;
  padding:clamp(40px,6vw,74px) 0 clamp(46px,7vw,86px)
}
.buehne::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 560px at 88% 0%,rgba(43,132,66,.28),transparent 66%),
    radial-gradient(700px 460px at 0% 100%,rgba(255,255,255,.04),transparent 70%);
}
.buehne-inhalt{position:relative;z-index:2}
.buehne-logo-kreis{
  display:grid;place-items:center;background:var(--schwarz-900);
  border:1px solid var(--linie-dunkel);border-radius:50%;
  width:clamp(240px,42vw,400px);height:clamp(240px,42vw,400px);
  padding:clamp(26px,5vw,54px);box-shadow:0 0 0 10px rgba(255,255,255,.045),var(--shadow-m);
  margin:0 auto clamp(30px,4vw,48px)
}
.buehne-logo{max-height:clamp(120px,20vw,224px);max-width:100%;width:auto;object-fit:contain}
.buehne-logo-ersatz{
  font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;letter-spacing:-.03em;
  color:#fff;text-align:center;line-height:1.15
}
.buehne-logo-kreis .buehne-logo-ersatz span{color:rgba(255,255,255,.66)}
.buehne-logo-ersatz span{display:block;font-size:.42em;font-weight:650;letter-spacing:.02em;color:var(--schwarz-500);margin-top:.6em}
.buehne-text{max-width:780px;margin:0 auto;text-align:center}
.buehne h1{color:#fff;margin-bottom:.4em}
.buehne h1 em{font-style:normal;color:#7ed492}
.buehne p{font-size:clamp(1.05rem,1.7vw,1.25rem);color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto}
.buehne-knoepfe{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:1.9em}
.buehne-baender{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;margin-top:clamp(34px,4.6vw,58px);background:var(--linie-dunkel);
  border:1px solid var(--linie-dunkel);border-radius:var(--radius);overflow:hidden
}
.buehne-band{background:rgba(10,12,11,.6);padding:20px 22px}
.buehne-band b{display:block;font-size:1rem;color:#fff;margin-bottom:.15em}
.buehne-band span{font-size:.9rem;color:rgba(255,255,255,.7)}

/* ===== g'UUte-Band ===== */
.guute-band{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,34px);flex-wrap:wrap;
  margin-top:clamp(26px,3.6vw,40px);padding:22px 26px;
  background:rgba(255,255,255,.05);border:1px solid var(--linie-dunkel);border-radius:var(--radius-lg)
}
.guute-band img{height:clamp(64px,9vw,88px);width:auto;object-fit:contain}
.guute-band-text{max-width:520px}
.guute-band-text b{display:block;color:#fff;font-size:1.08rem;margin-bottom:.15em}
.guute-band-text span{color:rgba(255,255,255,.74);font-size:.94rem}
.guute-hinweis{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:14px;text-align:center}

/* ===== Leistungen: redaktionelle Zeilen ===== */
.leistungen{display:grid;gap:0;border-top:1px solid var(--linie-dunkel)}
.leistung-zeile{
  display:grid;grid-template-columns:88px minmax(0,.95fr) minmax(0,1.05fr) auto;
  gap:clamp(16px,3vw,34px);align-items:center;padding:clamp(22px,3vw,32px) 0;
  border-bottom:1px solid var(--linie-dunkel);transition:.2s ease
}
.leistung-zeile:hover{background:rgba(255,255,255,.04);padding-left:14px;padding-right:14px}
.leistung-symbol{
  width:74px;height:74px;border-radius:var(--radius);background:rgba(255,255,255,.08);
  border:1px solid var(--linie-dunkel);color:#7ed492;display:grid;place-items:center;flex:0 0 74px
}
.leistung-symbol svg{width:34px;height:34px}
.leistung-zeile h3{margin-bottom:.2em}
.leistung-zeile p{margin:0;color:rgba(255,255,255,.72);font-size:.96rem}
.leistung-punkte{margin:0;padding:0;list-style:none;columns:2;column-gap:26px}
.leistung-punkte li{position:relative;padding-left:1.4em;margin-bottom:.3em;font-size:.94rem;color:rgba(255,255,255,.74);break-inside:avoid}
.leistung-punkte li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:#7ed492
}
.leistung-zeit{font-size:.8rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#7ed492;white-space:nowrap}

/* ===== Zielgruppen ===== */
.zielgruppen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.zielgruppe{
  background:rgba(255,255,255,.05);border:1px solid var(--linie-dunkel);
  border-top:4px solid var(--gruen-600);border-radius:0 0 var(--radius) var(--radius);
  padding:28px 26px
}
.zielgruppe h3{display:flex;align-items:center;gap:.6em}
.zielgruppe h3 svg{width:22px;height:22px;color:#7ed492;flex:0 0 22px}
.zielgruppe p{color:rgba(255,255,255,.74);margin:0;font-size:.96rem}

/* ===== Einblicke (8 Bilder) ===== */
.einblicke{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.einblicke figure{
  margin:0;overflow:hidden;border-radius:var(--radius);background:rgba(255,255,255,.06);
  position:relative
}
.einblicke img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.einblicke figure:hover img{transform:scale(1.05)}
/* 1 breit, 2 schmal, 3 hoch, 4 schmal, 5 mittel, 6 hoch, 7 schmal, 8 mittel */
.einblicke .b-1{grid-column:span 4;aspect-ratio:16/9}
.einblicke .b-2{grid-column:span 2;aspect-ratio:4/5}
.einblicke .b-3{grid-column:span 2;aspect-ratio:3/4}
.einblicke .b-4{grid-column:span 1;aspect-ratio:1/1}
.einblicke .b-5{grid-column:span 3;aspect-ratio:4/3}
.einblicke .b-6{grid-column:span 2;aspect-ratio:3/4}
.einblicke .b-7{grid-column:span 1;aspect-ratio:1/1}
.einblicke .b-8{grid-column:span 3;aspect-ratio:4/3}

/* ===== Team ===== */
.team-kopf{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,4vw,54px);
  align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--linie-dunkel);
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px)
}
.team-kopf h3{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:.15em}
.team-kopf h3 span{font-weight:500;color:#7ed492;font-size:.66em;letter-spacing:0}
.team-kopf .team-rolle{color:rgba(255,255,255,.78);margin:0;font-weight:600;font-size:1.05rem}
.team-kopf-foto{
  position:relative;width:clamp(180px,26vw,300px);aspect-ratio:1/1;border-radius:var(--radius-lg);
  overflow:hidden;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:0 0 auto
}
.team-kopf-foto img{width:100%;height:100%;object-fit:cover}
.team-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.team-person{
  background:rgba(255,255,255,.05);border:1px solid var(--linie-dunkel);border-radius:var(--radius-lg);
  padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px
}
.team-person .foto{
  position:relative;width:clamp(140px,18vw,200px);height:auto;aspect-ratio:1/1;flex:0 0 auto;
  border-radius:var(--radius-lg);overflow:hidden;background:rgba(255,255,255,.08);display:grid;place-items:center
}
.team-person .foto img{width:100%;height:100%;object-fit:cover}
.team-person h4{margin:0 0 .15em;font-size:1.15rem;font-weight:750;color:#fff}
.team-person .team-rolle{margin:0;font-size:.94rem;color:#7ed492;font-weight:700}

/* ===== Ablauf ===== */
.schritt-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:start}
.schritt-spalte{padding:0 clamp(16px,2.4vw,30px);border-left:1px solid var(--linie)}
.schritt-spalte:first-child{border-left:0;padding-left:0}
.schritt-nr{
  display:block;font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;letter-spacing:-.05em;
  color:var(--gruen-100);line-height:1;margin-bottom:.15em
}
.schritt-spalte h3{margin-bottom:.3em}
.schritt-spalte p{color:var(--ink-soft);margin:0;font-size:.96rem}

/* ===== Kontakt ===== */
.kontakt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,52px)}
.kontakt-angaben{list-style:none;margin:0 0 1.8em;padding:0;display:grid;gap:18px}
.kontakt-angaben li{display:flex;gap:1em;align-items:flex-start}
.kontakt-angaben svg{width:20px;height:20px;flex:0 0 20px;margin-top:.25em;color:var(--gruen-600)}
.kontakt-angaben b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft);font-weight:700}
.formular{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-s)
}
.feld{margin-bottom:15px}
.feld label{display:block;font-size:.87rem;font-weight:650;margin-bottom:.35em}
.feld input,.feld select,.feld textarea{
  width:100%;padding:.82em .95em;border:1.5px solid var(--linie);border-radius:10px;
  font:inherit;font-size:.97rem;background:#fff;color:var(--ink)
}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--gruen-600);box-shadow:0 0 0 3px var(--gruen-100)}
.feld textarea{min-height:130px;resize:vertical}
.kontakt-sockel{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.hinweis{font-size:.84rem;color:var(--ink-soft)}
.hinweis-hell{font-size:.84rem;color:rgba(255,255,255,.6)}
.daten-tabelle{width:100%;border-collapse:collapse;font-size:.94rem}
.daten-tabelle th,.daten-tabelle td{text-align:left;padding:.62em 0;border-bottom:1px solid var(--linie-dunkel);vertical-align:top}
.daten-tabelle th{width:42%;font-weight:600;color:rgba(255,255,255,.66)}
.daten-tabelle td{color:rgba(255,255,255,.9)}
.daten-tabelle a{color:#8fe0a1}

/* ===== Abschluss ===== */
.abschluss{background:var(--gruen-800);color:#fff;border-radius:var(--radius-lg);padding:clamp(30px,4vw,54px);text-align:center}
.abschluss h2{color:#fff}
.abschluss p{color:rgba(255,255,255,.86);max-width:56ch;margin:0 auto 1.5em}
.abschluss .buehne-knoepfe{margin-top:0}

/* ===== Fuss ===== */
.fuss{background:#000;color:rgba(255,255,255,.64);padding:58px 0 26px;font-size:.93rem}
.fuss-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-bottom:32px}
.fuss h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1em}
.fuss a{color:rgba(255,255,255,.78);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.fuss-logo{height:48px;width:auto;max-width:190px;object-fit:contain;margin-bottom:14px;}
.fuss-guute{height:52px;width:auto;object-fit:contain;margin-bottom:18px}
.fuss-unten{
  border-top:1px solid var(--linie-dunkel);padding-top:20px;display:flex;flex-wrap:wrap;
  gap:12px;justify-content:space-between;font-size:.84rem;color:rgba(255,255,255,.5)
}

/* ===== Werkzeuge ===== */
.merkmal-reihe{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.merkmal{border-left:3px solid var(--gruen-600);padding:4px 0 4px 20px}
.merkmal b{display:block;font-size:1.02rem;margin-bottom:.2em}
.merkmal span{font-size:.93rem;color:var(--ink-soft)}
.haken-liste{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.haken-liste li{display:flex;gap:.85em;align-items:flex-start;font-size:1rem}
.haken-liste li::before{
  content:"";width:22px;height:22px;flex:0 0 22px;border-radius:50%;margin-top:.2em;
  background:var(--gruen-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6330' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ueber-bild{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-m);aspect-ratio:4/3;background:var(--off-2)}
.ueber-bild img{width:100%;height:100%;object-fit:cover}

/* ===== Mobil ===== */
@media (max-width:1024px){
  html{scroll-padding-top:130px}
  .zweispaltig,.kontakt{grid-template-columns:1fr}
  .leistung-zeile{grid-template-columns:74px minmax(0,1fr);gap:18px}
  .leistung-zeile .leistung-punkte,.leistung-zeile .leistung-zeit{grid-column:2}
  .zielgruppen{grid-template-columns:repeat(2,1fr)}
  .team-reihe{grid-template-columns:repeat(3,1fr)}
  .team-person .foto{width:clamp(110px,14vw,160px)}
  .team-kopf{grid-template-columns:1fr;text-align:center}
  .team-kopf-foto{margin:0 auto;width:clamp(200px,40vw,300px)}
  .einblicke .b-1{grid-column:span 6}
  .einblicke .b-2,.einblicke .b-3,.einblicke .b-4{grid-column:span 2}
  .einblicke .b-5{grid-column:span 3}
  .einblicke .b-6{grid-column:span 3}
  .einblicke .b-7{grid-column:span 2}
  .einblicke .b-8{grid-column:span 4}
  .nav-rechts{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--schwarz-900);
    flex-direction:column;align-items:stretch;padding:14px 24px 22px;gap:4px;
    border-bottom:1px solid var(--linie-dunkel);box-shadow:var(--shadow-m)
  }
  .nav-rechts.offen{display:flex}
  .nav-rechts a{padding:.75em .6em}
  .nav-rechts .nav-cta{margin:8px 0 0;text-align:center;justify-content:center}
  .nav-schalter{display:block}
  .kopfleiste-links{gap:14px}
}
@media (max-width:700px){
  body{font-size:16px}
  html{scroll-padding-top:112px}
  .zielgruppen,.schritt-reihe,.merkmal-reihe{grid-template-columns:1fr}
  .team-reihe{grid-template-columns:1fr}
  .team-person{flex-direction:row;text-align:left}
  .team-person .foto{width:110px}
  .schritt-spalte{border-left:0;padding:0 0 24px;border-bottom:1px solid var(--linie);margin-bottom:24px}
  .schritt-spalte:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .einblicke{grid-template-columns:repeat(2,1fr);gap:10px}
  .einblicke .b-1{grid-column:span 2;aspect-ratio:4/3}
  .einblicke .b-2,.einblicke .b-3,.einblicke .b-4,
  .einblicke .b-5,.einblicke .b-6,.einblicke .b-7,.einblicke .b-8{
    grid-column:span 1;aspect-ratio:1/1
  }
  .buehne-baender{grid-template-columns:1fr}
  .leistung-zeile{grid-template-columns:60px minmax(0,1fr)}
  .leistung-symbol{width:60px;height:60px;flex-basis:60px}
  .leistung-symbol svg{width:28px;height:28px}
  .leistung-punkte{columns:1}
  .kopfleiste{display:none}
  .guute-band{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}