/* ============================================================
   poli.kom — Landing (C1)
   Design-Tokens verbindlich aus docs/POLIKOM_Design_System.html
   Farben, Typo, Rahmen, Buttons, Wortmarke.
   Kein Border-Radius. Amber max. 1 Element pro Ansicht.
   ============================================================ */

/* ============================================================
   SCHRIFTEN lokal (A-786) - latin-Subset, unveraendert von
   fonts.gstatic.com, Lizenz OFL 1.1 (fonts/OFL.txt).
   Die Fassung steht im DATEINAMEN (-v1), nicht in ?v=: deploy-stamp.sh
   stempelt nur *.html - ein ?v=__V__ hier bliebe woertlich stehen und
   wuerde trotzdem ein Jahr immutable gecacht (landing/.htaccess). Neue
   Schriftdatei = neuer Name (-v2) und hier wie im Preload nachziehen.
   Die Preload-Zeilen in den 7 Seiten zeigen auf dieselben Dateien.
   ============================================================ */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-400-v1.woff2") format("woff2");
  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:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-500-v1.woff2") format("woff2");
  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:'IBM Plex Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-700-v1.woff2") format("woff2");
  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:'IBM Plex Sans';
  font-style:normal;
  font-weight:100 700;
  font-stretch:75% 100%;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-var-v1.woff2") format("woff2");
  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:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/space-grotesk-var-v1.woff2") format("woff2");
  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;
}

:root{
  --ink:#0B0B0E;
  --iris:#7B5BFF;
  --amber:#FFB020;
  --paper:#FAFAF7;
  --canvas:#F2F1EC;
  --graph:#3A3A40;
  --slate:#6B6B73;
  --mist:#B5B5BB;
  --line:#DCDCD6;
  /* A-789: Textfassungen fuer Kontrast >= 4.5:1, gleicher Farbton, nur
     dunkler (kleinster Schritt). --mist-text auf Canvas 4.52:1 (Mist 1.80).
     A-788 (Block 1126): --iris-text auf Canvas 4.50:1 (Iris 3.88), auf Paper
     4.87:1, Weiss darauf 5.09:1 (Iris 4.39); traegt auch .btn--iris. */
  --iris-text:#6F4BFF;
  --mist-text:#6D6D77;

  --disp:'Space Grotesk', sans-serif;
  --sans:'IBM Plex Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --maxw:1120px;
  --pad:24px;
  --border:1.5px solid var(--ink);
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Canvas-Raster gemaess Design-System: rgba(11,11,14,.04) / 40px */
  background-image:
    linear-gradient(to right, rgba(11,11,14,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,14,.04) 1px, transparent 1px);
  background-size:40px 40px;
}

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

/* Layout-Container */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------- Wortmarke ---------- */
.wordmark{
  font-family:var(--disp);
  font-weight:700;
  font-size:26px;
  letter-spacing:-.03em;
  color:var(--ink);
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}
.wordmark .dot{color:var(--iris)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--mono);
  font-size:14px;
  line-height:1;
  padding:14px 22px;
  border:var(--border);
  text-decoration:none;
  cursor:pointer;
  transition:transform .08s ease, background-color .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--iris);outline-offset:2px}

/* Amber = primaerer CTA (max. 1 pro Ansicht) */
.btn--amber{background:var(--amber);color:var(--ink);font-weight:700}
.btn--amber:hover{background:#f2a70f}

.btn--ink{background:var(--ink);color:var(--paper);font-weight:700}
.btn--ink:hover{background:#000}

/* Iris = Booking-Tool-Einstieg in der Nav (A-366, Feedback Gianni) */
.btn--iris{background:var(--iris-text);color:#fff;border-color:var(--iris-text);font-weight:700}
.btn--iris:hover{background:#6A48F5;border-color:#6A48F5}

.btn--outline{background:transparent;color:var(--ink);font-weight:500}
.btn--outline:hover{background:var(--ink);color:var(--paper)}

/* ---------- Skip-Link (A11y) ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:13px;padding:10px 16px;text-decoration:none;
}
.skip-link:focus{left:8px;top:8px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(242,241,236,.86);
  backdrop-filter:blur(8px);
  border-bottom:var(--border);
}
.nav__inner{
  display:flex;align-items:center;gap:20px;
  position:relative;
  min-height:64px;
}
.nav__links{
  display:flex;gap:26px;margin-left:8px;
}
.nav__links a{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;
}
.nav__links a:hover{color:var(--iris-text)}
.nav__cta{margin-left:auto;padding:11px 18px}

/* Burger — nur unter 560px sichtbar (siehe Responsive) */
.nav__burger{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:40px;height:40px;padding:0;
  background:transparent;border:var(--border);cursor:pointer;
}
.nav__burger:focus-visible{outline:2px solid var(--iris);outline-offset:2px}
.nav__burger-bar{display:block;width:18px;height:1.5px;background:var(--ink)}

/* Sprachumschalter (A-442 D4)
   Die Formensprache ist NICHT neu erfunden, sondern an den
   Sprachschaltflaechen des Tools abgelesen: .lang-chip in
   app/assets/app.css:492-500, Markup app/buchen.html:210-214.
   Von dort kommen Monospace, weisser Grund, Rahmen 1.5px Ink und die
   schwarz gefuellte aktive Marke. Kleiner als dort, weil die Marken
   hier im Kopf neben einem Knopf stehen und nicht in einer
   Auswahlgruppe. */
.nav__lang{
  display:flex;align-items:center;gap:8px;   /* A-788 E3: >= 8 px zwischen Tippzielen */
  margin-left:auto;          /* schiebt Umschalter UND Knopf nach rechts */
}
.nav__lang-mark{
  font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.06em;
  line-height:1;                        /* gleich hoch, ob <a> oder <span> */
  padding:7px 9px;
  border:var(--border);background:#fff;color:var(--ink);
  text-decoration:none;
}
.nav__lang a.nav__lang-mark:hover{background:var(--canvas);text-decoration:none}
.nav__lang a.nav__lang-mark:focus-visible{outline:2px solid var(--iris);outline-offset:2px}
/* Die aktive Sprache ist Anzeige, kein Verweis - im Markup ein <span>. */
.nav__lang-mark[aria-current="page"]{background:var(--ink);color:var(--paper)}
/* Der Knopf traegt sein eigenes margin-left:auto; neben dem Umschalter
   wuerden ZWEI Autos den freien Platz teilen und die beiden
   auseinanderziehen. Hier gewinnt die zwei Klassen starke Regel. */
.nav__lang + .nav__cta{margin-left:12px}

/* ============================================================
   HERO (01)
   ============================================================ */
.hero{
  padding:88px 0 72px;
  border-bottom:var(--border);
}
.eyebrow{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);margin:0 0 20px;
}
.hero__title{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(36px,6.2vw,48px);
  letter-spacing:-.03em;line-height:1.02;
  margin:0 0 22px;max-width:40ch;
  text-wrap:balance;
}
.hero__sub{
  font-family:var(--sans);font-size:clamp(16px,2vw,18px);
  line-height:1.55;color:var(--graph);
  max-width:640px;margin:0;
}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;
}
.meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--slate);margin-top:26px;
}

/* ============================================================
   SECTIONS (gemeinsam)
   ============================================================ */
.section{
  padding:72px 0;
  border-bottom:var(--border);
}
.sec-num{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--iris-text);margin:0 0 14px;
}
.lbl{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);margin:0 0 10px;
}
h2{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(26px,3.6vw,34px);
  letter-spacing:-.02em;line-height:1.1;margin:0 0 16px;
  text-wrap:balance;
  max-width:18ch;
}
h3{
  font-family:var(--disp);font-weight:600;font-size:19px;
  letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance;
}
.prose{
  font-family:var(--sans);font-size:15px;line-height:1.65;
  color:var(--graph);margin:0;max-width:60ch;
}
.intro{
  font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--graph);max-width:660px;margin:0 0 40px;
}
.section__head{margin-bottom:36px}

/* Zweispaltiges Section-Layout (About, Kontakt) */
.section__grid{
  display:grid;grid-template-columns:1fr;gap:40px;align-items:start;
}

/* Bild-Platzhalter */
.media-placeholder{
  border:var(--border);background:var(--paper);
  min-height:280px;height:100%;
  display:flex;align-items:center;justify-content:center;
  /* diagonale Schraffur als Platzhalter-Signal */
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 14px, rgba(11,11,14,.05) 14px 15px);
}
.media-placeholder span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-text);
}

/* ---------- Service-Karten (03) ---------- */
.cards{
  display:grid;grid-template-columns:1fr;gap:20px;
}
.card{
  border:var(--border);background:var(--paper);padding:28px;
}
.card h3{margin-top:0}

/* ---------- Steps (04) ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
  counter-reset:none;
}
.step{
  border:var(--border);background:var(--paper);padding:26px;
}
.step__num{
  display:block;font-family:var(--mono);font-weight:700;
  font-size:13px;letter-spacing:.14em;color:var(--iris-text);
  margin-bottom:16px;
}
.step h3{margin-bottom:8px}

/* ---------- Kontaktformular (05, statisch) ---------- */
.contact-form{
  border:var(--border);background:var(--paper);
  padding:28px;display:grid;gap:18px;
}
.field{display:grid;gap:8px}
.field__label{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
}
.field input,
.field textarea{
  font-family:var(--sans);font-size:14px;color:var(--ink);
  background:#fff;border:var(--border);padding:13px 15px;
  width:100%;resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--mist-text)}
.field input:focus,
.field textarea:focus{outline:2px solid var(--iris);outline-offset:1px}
.contact-form__submit{justify-self:start;margin-top:4px}

/* ---------- Newsletter (A-528) ---------- */
/* Das Kaestchen steht verborgen im Markup und wird erst vom Skript
   gezeigt - ohne JavaScript gaebe es ein Kaestchen ohne Beschriftung
   und ohne Wirkung. display:flex schlaegt das hidden-Attribut, darum
   die eigene Zeile. */
.nl-check[hidden]{display:none}
.nl-check{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border-top:1.5px solid var(--line);padding-top:16px;
}
.nl-check input[type="checkbox"]{
  flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;
  accent-color:var(--iris);
}
.nl-check__text{
  font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--graph);
}
.nl-form{max-width:560px}
.nl-hinweis{
  font-family:var(--sans);font-size:13px;line-height:1.55;
  color:var(--slate);max-width:60ch;margin:18px 0 0;
}
.nl-meldung{
  font-family:var(--sans);font-size:15px;line-height:1.65;
  color:#166534;font-weight:600;margin:0;
}
.nl-meldung--anhang{margin-top:10px}
.nl-err{
  font-family:var(--sans);font-size:15px;line-height:1.65;
  color:#991b1b;font-weight:600;margin:0;
}
/* Auf den beiden kleinen Seiten ist die Meldung die Ueberschrift der
   Seite, nicht eine Randnotiz am Formular. */
.nl-seite .nl-meldung{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(26px,3.6vw,34px);
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);
  max-width:24ch;margin:0 0 24px;text-wrap:balance;
}
.nl-zurueck{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;margin:0;
}
.nl-zurueck a{color:var(--slate);text-decoration:none}
.nl-zurueck a:hover{color:var(--ink)}
/* Der noscript-Block der beiden Seiten traegt drei Sprachzeilen
   untereinander (Entscheid Block 380). .prose setzt margin:0 - ohne
   diese Zeile klebten sie aneinander. */
.nl-ohne-js{margin-top:18px}

/* ============================================================
   FOOTER (06)
   ============================================================ */
.footer{
  padding:48px 0;
  background:var(--canvas);
}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:20px 40px;
  align-items:center;justify-content:space-between;
}
.footer__brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px}
.footer .wordmark{font-size:20px}
.footer__tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--slate);
}
.footer__links{
  display:flex;align-items:center;gap:22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
}
.footer__links a{color:var(--slate);text-decoration:none}
.footer__links a:hover{color:var(--ink)}
.footer__copy{color:var(--mist-text)}

/* ============================================================
   EINWILLIGUNG (A-785) - Banner aus assets/consent.js
   Unten fixiert, kein Overlay, keine Scroll-Sperre. Beide Knoepfe
   gleich gross. «Akzeptieren» gefuellt in Ink mit weisser Schrift,
   «Ablehnen» transparent mit Ink-Rahmen. Kein Iris im Banner: Iris
   ist dem Knopf «Booking Tool» vorbehalten (A-366, Block 983b).
   ============================================================ */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper);
  border-top:var(--border);
  padding:18px 0;
}
.consent__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:16px 28px;
}
.consent__text{
  flex:1 1 420px;
  font-family:var(--sans);font-size:14px;line-height:1.55;
  color:var(--graph);margin:0;max-width:72ch;
}
.consent__text a{color:var(--ink);text-decoration:underline}
.consent__text a:focus-visible{outline:2px solid var(--iris);outline-offset:2px}
.consent__knoepfe{display:flex;gap:12px;flex:0 0 auto}
.consent__knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:150px;
  font-family:var(--mono);font-size:14px;font-weight:700;line-height:1;
  padding:14px 22px;
  border:var(--border);
  cursor:pointer;
}
.consent__knopf:focus-visible{outline:2px solid var(--iris);outline-offset:2px}
.consent__knopf--ja{background:var(--ink);color:#fff}
.consent__knopf--ja:hover{background:#000}
.consent__knopf--nein{background:transparent;color:var(--ink)}
.consent__knopf--nein:hover{background:var(--canvas)}

/* Mobil einspaltig, 16 px Rand */
@media (max-width:559px){
  .consent .wrap{padding-inline:16px}
  .consent__knoepfe{flex:1 1 100%;flex-direction:column}
  .consent__knopf{width:100%}
  /* Der dritte Fusszeilen-Link «Cookie-Einstellungen» sprengte bei 360 px
     die einzeilige Linkreihe (366 / 429 / 443 px statt 360, gemessen
     gegen HEAD); hier darf sie umbrechen. */
  .footer__links{flex-wrap:wrap;row-gap:10px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (min-width:640px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}

/* Desktop */
@media (min-width:900px){
  :root{--pad:32px}
  .steps{grid-template-columns:repeat(4,1fr)}
  .section__grid{
    grid-template-columns:1.1fr .9fr;gap:56px;
  }
  .section{padding:88px 0}
}

/* Mobile Navigation: Ankerliste klappt unter dem Burger aus */
@media (max-width:559px){
  .nav__inner{gap:12px}
  .nav__burger{display:flex}
  .nav__links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;margin-left:0;
    background:var(--paper);border-bottom:var(--border);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{display:block;padding:14px var(--pad);border-top:var(--border)}
  .nav__cta{margin-left:auto;white-space:nowrap;padding:11px 12px}
  .hero{padding:64px 0 56px}
  .section{padding:56px 0}

  /* Sprachumschalter im schmalen Fenster (A-442 D4).
     Er BLEIBT sichtbar und wandert nicht ins Klappmenue - er wird nur
     enger. Die Zahlen sind bei 360 px gemessen, nicht geschaetzt: ohne
     sie war die Reihe 424 px breit, der Burger stand ausserhalb des
     Bildes und die Seite scrollte waagrecht. Mit ihnen sind es 351 px,
     also 9 px Luft - und 345 px, wenn die Webschriften ausfallen.
     Diese Regeln stehen bewusst HINTER .nav__cta: gleiche Spezifitaet,
     die spaetere gewinnt. */
  .nav__inner{gap:5px}
  /* A-442 E1: Hier stand .nav__brand{font-size:18px}. Das war der
     falsche Zuschnitt - ich hatte die fehlenden Pixel bei der Wortmarke
     geholt, weil das die einfachste Stelle war, nicht die richtige. Die
     Marke traegt jetzt wieder ihre 26 px aus der Grundregel. */
  /* A-788 E3: 3 -> 4 px. Fuer 24x24 + 8 px fehlt hier der Platz (Reihe
     ohne Luft); 4 px erfuellen die Abstandsausnahme WCAG 2.5.8: die
     Mittelpunkte der 20.4 px breiten Marken liegen 24.4 px auseinander. */
  .nav__lang{gap:4px}
  /* A-442 E1: enger, aber NICHT niedriger als 32 px - es sind Tippziele
     auf einem Handy. Unter 32 px trifft ein Daumen sie nicht
     zuverlaessig. Die Hoehe kostet keine Breite, deshalb steht sie der
     Enge nicht entgegen. min-height traegt sie, inline-flex zentriert
     die zwei Buchstaben darin; box-sizing ist border-box, die 1.5 px
     Rahmen sind also eingerechnet. */
  .nav__lang-mark{
    padding:0 3px;font-size:10px;letter-spacing:.02em;
    min-height:32px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .nav__lang + .nav__cta{margin-left:5px}
  /* A-442 E1: Die Reserve liegt HIER. Der Knopf ist im schmalen Fenster
     das breiteste Element der Reihe; er behaelt seinen WORTLAUT und gibt
     nur Innenabstand und Schriftgrad ab. Gemessen: 111.9 -> 93.5 px. */
  .nav__cta{padding:9px 5px;font-size:10px;gap:3px}
  /* Der Burger ist flex-shrink:1 und wurde unter dem Platzmangel von
     40 auf 21 px gestaucht - lautlos. Vor dem Umschalter gab es diesen
     Druck nicht. Feste Breite, damit das Antippziel bleibt. */
  .nav__burger{flex:0 0 40px}
}

/* A-829: Tabellen der AGB-Seite (Zahlungsmodus, Annullierung). Rahmen wie
   ueberall 1.5px Ink, kein Radius; im schmalen Fenster scrollt nur die Tabelle. */
.agb-tabelle-rahmen{overflow-x:auto;margin:16px 0 0;max-width:72ch}
.agb-tabelle{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--graph)}
.agb-tabelle th,.agb-tabelle td{border:var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.agb-tabelle th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;background:var(--canvas);color:var(--ink)}
/* A-832 (Block 1072): Aufzaehlung der Rechtstexte (Datenschutz-Ergaenzung, Aufbewahrung). */
.rechts-liste{font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--graph);margin:8px 0 0;padding-left:1.25em;max-width:60ch}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}