/* ============================================================
   aeranova.ch — Design-System und Komponenten
   Etienne Baume · Performance ohne Burnout
   ------------------------------------------------------------
   Das System stammt aus den Folien: weisser Grund, viel Luft,
   Petrol / Mint / Amber / Koralle, Kreise für Nummern, kurze
   gelbe Unterstriche unter Titeln, dünn umrandete Karten,
   der Amber-Mint-Balken als Signatur.
   ------------------------------------------------------------
   01  Design-Tokens
   02  Reset und Grundlagen
   03  Layout-Bausteine
   04  Abschnittstitel  (mit Amber-Unterstrich)
   05  Kopfzeile
   06  Buttons und Marker
   07  Entwurfs-Markierung
   08  Hero
   09  Beweisleiste
   10  Ansatz
   11  Die Waage  (kompakt)
   12  Kennzahlen  (Job-Stress-Index)
   13  Für wen
   14  Angebot
   15  Referenzen
   16  Selbst-Check
   17  Person
   18  Formular
   19  Fusszeile
   20  Bewegung
   ============================================================ */


/* ============================================================
   01  DESIGN-TOKENS
   ------------------------------------------------------------
   Die vier Folienfarben, mit fester Rolle:
     Petrol  — Führung, Struktur, primäre Aktion
     Mint    — Ressourcen, Entlastung, Bestätigung
     Amber   — Betonung: Unterstriche, Marker, Kanten
     Koralle — Belastung, Warnung. Sparsam.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-2:#F7F9F9;
  --bg-3:#EFF3F3;

  --ink:#333333;
  --ink-2:#5C5C5C;
  --muted:#8B8B8B;
  --line:#E6E6E6;
  --line-2:#D3D3D3;

  --petrol:#3D7A96;
  --petrol-dark:#2F6179;
  --petrol-wash:#EDF3F6;
  --mint:#6BC6A6;
  --mint-dark:#3E9B7C;
  --mint-wash:#F1F8F5;
  --amber:#F3C46D;
  --amber-dark:#B98426;
  --amber-wash:#FDF7EA;
  --coral:#E4696C;
  --coral-dark:#C24A4D;
  --coral-wash:#FDF0F0;

  --draft:#B98426;
  --draft-wash:#FDF7EA;

  --f:"Lato",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;

  --fs-hero:clamp(38px,6vw,72px);
  --fs-h2:clamp(27px,3.6vw,42px);
  --fs-h3:clamp(19px,1.8vw,22px);
  --fs-lede:clamp(17px,1.7vw,20px);
  --fs-body:17px;
  --fs-small:15px;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(var(--s4),4.5vw,var(--s8));
  --sec:clamp(var(--s10),8vw,var(--s16));
  --measure:62ch;

  --r:8px;
  --r-sm:4px;
  --shadow:0 14px 40px rgba(51,51,51,.08);
  --shadow-sm:0 2px 12px rgba(51,51,51,.05);

  --t:200ms;
  --t-slow:460ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14181A;
    --bg-2:#1B2124;
    --bg-3:#232A2D;
    --ink:#E9EDEE;
    --ink-2:#C0C7C9;
    --muted:#8E9799;
    --line:#2A3235;
    --line-2:#3B4548;
    --petrol:#6BA9C4;
    --petrol-dark:#8CC0D6;
    --petrol-wash:#1A2A32;
    --mint:#6BC6A6;
    --mint-dark:#8AD8BE;
    --mint-wash:#152923;
    --amber:#F3C46D;
    --amber-dark:#F7D28E;
    --amber-wash:#2A2317;
    --coral:#E4696C;
    --coral-dark:#F08B8D;
    --coral-wash:#2B1A1B;
    --draft:#F3C46D;
    --draft-wash:#2A2317;
    --shadow:0 14px 40px rgba(0,0,0,.45);
    --shadow-sm:0 2px 12px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --bg:#14181A;
  --bg-2:#1B2124;
  --bg-3:#232A2D;
  --ink:#E9EDEE;
  --ink-2:#C0C7C9;
  --muted:#8E9799;
  --line:#2A3235;
  --line-2:#3B4548;
  --petrol:#6BA9C4;
  --petrol-dark:#8CC0D6;
  --petrol-wash:#1A2A32;
  --mint:#6BC6A6;
  --mint-dark:#8AD8BE;
  --mint-wash:#152923;
  --amber:#F3C46D;
  --amber-dark:#F7D28E;
  --amber-wash:#2A2317;
  --coral:#E4696C;
  --coral-dark:#F08B8D;
  --coral-wash:#2B1A1B;
  --draft:#F3C46D;
  --draft-wash:#2A2317;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --shadow-sm:0 2px 12px rgba(0,0,0,.32);
}


/* ============================================================
   02  RESET UND GRUNDLAGEN
   Die Folien setzen Titel in leichter Schnittstärke. Das
   überträgt sich: Überschriften sind gross und leicht,
   nicht gross und fett.
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:var(--fs-body);font-weight:400;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:var(--r-sm);}

h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.005em;line-height:1.16;text-wrap:balance;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3;}
p{margin:0 0 1.1em;max-width:var(--measure);}
strong{font-weight:700;}


/* ============================================================
   03  LAYOUT-BAUSTEINE
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad);}
.wrap--narrow{max-width:920px;}
section{padding:var(--sec) 0;}
.band{background:var(--bg-2);}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--gap);}
.lede{font-size:var(--fs-lede);line-height:1.6;color:var(--ink-2);max-width:56ch;}
.center{text-align:center;}
.center p{margin-left:auto;margin-right:auto;}


/* ============================================================
   04  ABSCHNITTSTITEL
   Zentrierter Titel mit kurzem Amber-Strich darunter — direkt
   aus den Folien übernommen.
   ============================================================ */
.sec-head{text-align:center;margin-bottom:clamp(var(--s6),6vw,var(--s10));}
.sec-head h2{margin:0 auto;max-width:22ch;}
.sec-head .lede{margin:var(--s4) auto 0;}
.dash{display:block;width:64px;height:4px;border-radius:2px;background:var(--amber);margin:var(--s3) auto 0;}
.dash--left{margin-left:0;margin-right:0;}
.kicker{
  display:block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--petrol);margin-bottom:var(--s2);
}


/* ============================================================
   05  KOPFZEILE
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:40;padding:var(--s2) 0;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px);
  transition:box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line);}
.header-bar{display:flex;align-items:center;gap:var(--s4);}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo .dots{display:flex;gap:5px;}
.logo .dots i{width:7px;height:7px;border-radius:50%;display:block;}
.logo .dots i:nth-child(1){background:var(--petrol);}
.logo .dots i:nth-child(2){background:var(--mint);}
.logo .dots i:nth-child(3){background:var(--amber);}
.logo .dots i:nth-child(4){background:var(--coral);}
.logo b{font-weight:700;font-size:17px;letter-spacing:.01em;white-space:nowrap;}
.nav{margin-left:auto;display:flex;gap:var(--s4);align-items:center;}
.nav a{font-size:15.5px;text-decoration:none;color:var(--ink-2);transition:color var(--t) var(--ease);}
.nav a:hover,.nav a.is-current{color:var(--petrol);}
/* Die Schaltfläche in der Navigation behält ihre eigene Schriftfarbe —
   ohne diese Zeile gewinnt `.nav a` und der Text wird unlesbar. */
.nav a.btn,.nav a.btn:hover,.nav a.btn.is-current{color:#FFFFFF;}
@media (max-width:960px){ .nav a.nav-optional{display:none;} }
@media (max-width:640px){
  .nav a:not(.btn){display:none;}
  .header-bar{gap:var(--s2);}
  .logo b{font-size:16px;}
  .nav .btn{padding:11px 16px;font-size:14.5px;}
  .nav .btn .arr{display:none;}
}

/* Der Name «Baume Consulting» ist breiter als der Platz auf schmalen
   Geräten. Statt die Zeile umbrechen zu lassen, wird zuerst der Abstand
   der Punkte enger, dann verschwinden die Punkte, zuletzt wird die
   Schrift kleiner. Der Schriftzug bleibt in jedem Fall einzeilig. */
@media (max-width:430px){
  .logo{gap:9px;}
  .logo .dots{gap:4px;}
  .logo .dots i{width:6px;height:6px;}
  .logo b{font-size:15.5px;}
}
@media (max-width:400px){
  .logo .dots{display:none;}
  .logo b{font-size:16px;}
}
@media (max-width:340px){
  .logo b{font-size:14.5px;}
  .nav .btn{padding:11px 13px;font-size:14px;}
}


/* ============================================================
   06  BUTTONS UND MARKER
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:var(--r);
  font-family:var(--f);font-size:16px;font-weight:700;
  text-decoration:none;cursor:pointer;white-space:nowrap;border:2px solid var(--petrol);
  background:var(--petrol);color:#FFFFFF;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.btn:hover{background:var(--petrol-dark);border-color:var(--petrol-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn:active{transform:translateY(0);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn--ghost:hover{background:transparent;border-color:var(--petrol);color:var(--petrol);}
.btn--mint{background:var(--mint);border-color:var(--mint);color:#14322A;}
.btn--mint:hover{background:var(--mint-dark);border-color:var(--mint-dark);color:#FFFFFF;}
.btn .arr{transition:transform var(--t) var(--ease);}
.btn:hover .arr{transform:translateX(4px);}

/* Nummernkreis aus den Folien */
.circle{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:400;color:#FFFFFF;
}
.circle--petrol{background:var(--petrol);}
.circle--mint{background:var(--mint);color:#14322A;}
.circle--amber{background:var(--amber);color:#5B4111;}
.circle--coral{background:var(--coral);}

/* Mint-Markierung wie auf der Titelfolie */
.marker{
  display:inline-block;background:var(--mint);color:#14322A;
  padding:8px 16px;border-radius:var(--r);font-size:var(--fs-lede);
}


/* ============================================================
   07  ENTWURFS-MARKIERUNG  (beim Start löschen)
   ============================================================ */
.draft{border:1.5px dashed var(--draft);background:var(--draft-wash);color:var(--draft-dark,var(--amber-dark));border-radius:var(--r-sm);}
.draft-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-dark);}
.legend{background:var(--draft-wash);}
.legend-in{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;padding:11px 0;font-size:13px;color:var(--amber-dark);}


/* ============================================================
   08  HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding-top:clamp(var(--s6),6vw,var(--s12));
  padding-bottom:var(--s10);
}
/* Diagonalmuster oben rechts, wie auf der Titelfolie */
.hero::before{
  content:"";position:absolute;top:-90px;right:-90px;width:340px;height:340px;
  background:repeating-linear-gradient(-45deg,transparent,transparent 11px,var(--line) 11px,var(--line) 12px);
  border-radius:50%;pointer-events:none;
}
@media (max-width:760px){ .hero::before{display:none;} }
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gap);align-items:center;position:relative;}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:var(--fs-hero);max-width:16ch;margin-bottom:var(--s4);}
.hero h1 strong{font-weight:700;color:var(--petrol);}
.hero .marker{margin-bottom:var(--s4);}
.hero-cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5);}

/* Echte Fotos statt Platzhalter */
.photo{width:100%;height:auto;border-radius:var(--r);display:block;}
.photo--portrait{aspect-ratio:4/5;object-fit:cover;}
.photo--wide{aspect-ratio:3/2;object-fit:cover;}
.caption{margin-top:10px;font-size:13.5px;color:var(--muted);}

/* ============================================================
   09  BEWEISLEISTE
   ============================================================ */
.proof-in{
  display:flex;align-items:center;gap:clamp(var(--s3),3.5vw,var(--s6));flex-wrap:wrap;
  padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.proof-label{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.proof-item{font-size:22px;font-weight:300;color:var(--ink);}
.proof-note{font-size:14px;color:var(--muted);margin-left:auto;}


/* ============================================================
   10  ANSATZ
   ============================================================ */
.claimbox{
  background:var(--mint-wash);border-left:5px solid var(--amber);
  padding:var(--s4) var(--s5);border-radius:0 var(--r) var(--r) 0;
  margin:var(--s6) 0 0;
}
.claimbox p{font-size:clamp(19px,2.1vw,25px);font-weight:300;line-height:1.4;margin:0;max-width:34ch;}
.claimbox cite{display:block;margin-top:var(--s2);font-style:normal;font-size:14.5px;color:var(--ink-2);max-width:60ch;}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5);margin-top:var(--s8);}
.pillar .circle{margin-bottom:var(--s3);}
.pillar h3{margin-bottom:var(--s2);}
.pillar p{font-size:16px;color:var(--ink-2);margin:0;}


/* ============================================================
   11  DIE WAAGE
   ============================================================ */
.beam{width:100%;max-width:620px;margin:0 auto;display:block;}
.beam .b-line{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;}
.beam .b-hang{stroke:var(--line-2);stroke-width:1.5;}
.beam .b-pan{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;}
.beam .b-base{fill:var(--ink);}
.beam .b-load{fill:var(--coral);}
.beam .b-res{fill:var(--mint);}
.beam .b-cap{font-family:var(--f);font-size:13px;font-weight:700;letter-spacing:.1em;}
.beam .b-cap--load{fill:var(--coral-dark);}
.beam .b-cap--res{fill:var(--mint-dark);}

/* ============================================================
   12  KENNZAHLEN  (Job-Stress-Index)
   Die Dreier-Zahlenreihe aus Folie 2, mit Amber-Strich.
   ============================================================ */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s5);margin-top:var(--s8);}
.figure{text-align:center;padding:0 var(--s3);}
.figure+.figure{border-left:1px solid var(--line);}
@media (max-width:760px){ .figure+.figure{border-left:0;border-top:1px solid var(--line);padding-top:var(--s5);} }
.figure b{display:block;font-size:clamp(38px,5vw,56px);font-weight:300;line-height:1;color:var(--ink);}
.figure .dash{width:56px;height:3px;margin:var(--s3) auto;}
.figure span{display:block;font-size:16px;color:var(--ink-2);line-height:1.5;}
.figures-source{text-align:center;font-size:13.5px;font-style:italic;color:var(--muted);margin:var(--s5) auto 0;}


/* ============================================================
   13  FÜR WEN
   ============================================================ */
.audience{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--s5);}
.tag{
  padding:9px 18px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:15.5px;color:var(--ink-2);background:var(--bg);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.tag:hover{border-color:var(--petrol);color:var(--petrol);}


/* ============================================================
   14  ANGEBOT
   ============================================================ */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);}
@media (max-width:860px){ .offers{grid-template-columns:1fr;} }
.offer{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5) var(--s4);text-align:center;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.offer:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;}
.offer .circle{margin:0 auto var(--s3);}
.offer h3{margin-bottom:var(--s2);}
.offer p{font-size:16px;color:var(--ink-2);margin:0;}
.offer-note{text-align:center;font-size:16px;color:var(--muted);margin:var(--s6) auto 0;max-width:64ch;}


/* ============================================================
   15  REFERENZEN
   ============================================================ */
.quote{
  background:var(--mint-wash);border-radius:var(--r);
  padding:clamp(var(--s5),5vw,var(--s8));text-align:center;
}
.quote p{
  font-size:clamp(21px,2.6vw,30px);font-weight:300;line-height:1.4;
  max-width:26ch;margin:0 auto var(--s3);
}
.quote cite{font-style:normal;font-size:14.5px;color:var(--ink-2);}
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--s4);margin-top:var(--s4);}
.ref{padding:var(--s4);}
.ref p{font-size:16px;margin-bottom:var(--s2);}
.video-slot{display:flex;align-items:center;justify-content:center;min-height:190px;text-align:center;padding:var(--s4);}


/* ============================================================
   16  SELBST-CHECK
   ============================================================ */
.check-inner{
  background:var(--petrol);color:#FFFFFF;border-radius:var(--r);
  padding:clamp(var(--s6),6vw,var(--s10));text-align:center;
}
.check-inner h2{color:#FFFFFF;max-width:20ch;margin:0 auto;}
.check-inner .dash{background:var(--amber);}
.check-inner p{color:rgba(255,255,255,.88);max-width:52ch;margin:var(--s4) auto var(--s5);font-size:var(--fs-lede);}
.check-inner .kicker{color:var(--amber);}


/* ============================================================
   17  PERSON UND GESCHICHTE
   ============================================================ */
.person{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap);align-items:start;}
@media (max-width:900px){ .person{grid-template-columns:1fr;} }
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--gap);align-items:start;}
@media (max-width:900px){ .story{grid-template-columns:1fr;} }
.story .lede{margin-bottom:var(--s3);}
/* Ohne die Faktenliste war die Bildspalte deutlich kürzer als der Text und
   liess darunter eine leere Fläche stehen. Das Bild wird auf breiten
   Bildschirmen deshalb hochkant beschnitten und füllt die Spalte aus. */
@media (min-width:901px){
  .story .photo--wide{aspect-ratio:4/5;object-fit:cover;object-position:38% 42%;}
}


/* ============================================================
   18  FORMULAR
   ============================================================ */
.form-card{background:var(--bg-2);border-radius:var(--r);padding:clamp(var(--s4),4vw,var(--s6));}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
@media (max-width:620px){ .form{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:7px;}
.field--full{grid-column:1/-1;}
.field label{font-size:13.5px;font-weight:700;color:var(--ink-2);}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;font-family:var(--f);font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color var(--t) var(--ease);
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--muted);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--petrol);}
.field textarea{min-height:104px;resize:vertical;}
.form .btn{grid-column:1/-1;justify-self:start;}
.form-note{grid-column:1/-1;font-size:13px;color:var(--muted);margin:0;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.form-status{grid-column:1/-1;margin:0;padding:14px 16px;border-radius:var(--r-sm);font-size:15.5px;}
.form-status--ok{background:var(--mint-wash);color:var(--mint-dark);border:1px solid var(--mint);}
.form-status--err{background:var(--coral-wash);color:var(--coral-dark);border:1px solid var(--coral);}
.contact-alt{margin-top:var(--s4);display:grid;gap:8px;}
.contact-alt a{font-size:clamp(19px,2vw,24px);font-weight:300;text-decoration:none;transition:color var(--t) var(--ease);}
.contact-alt a:hover{color:var(--petrol);}


/* ============================================================
   18b RECHTLICHE SEITEN
   ============================================================ */
.legal{padding:clamp(var(--s8),7vw,var(--s12)) 0;}
.legal h1{font-size:clamp(30px,4.4vw,48px);margin-bottom:var(--s3);}
.legal h2{font-size:clamp(20px,2.2vw,26px);margin:var(--s8) 0 var(--s2);}
.legal p,.legal li{max-width:70ch;}
.legal ul{padding-left:1.15em;}
.legal li{margin-bottom:8px;}
.legal .fill{color:var(--coral-dark);font-weight:700;}
.legal address{font-style:normal;font-size:17px;line-height:1.8;}
.legal a{color:var(--petrol);}


/* ============================================================
   19  FUSSZEILE
   Der Amber-Mint-Balken aus der Folienecke wird zur Fusskante.
   ============================================================ */
.site-footer{padding:var(--s8) 0 0;}
.footer-in{
  display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;
  font-size:14.5px;color:var(--muted);
  border-top:1px solid var(--line);padding:var(--s5) 0;
}
.footer-in a{text-decoration:none;transition:color var(--t) var(--ease);}
.footer-in a:hover{color:var(--petrol);}
.footer-in .spacer{margin-left:auto;}
.brandbar{display:flex;height:8px;}
.brandbar i{display:block;height:100%;}
.brandbar i:nth-child(1){width:56px;background:var(--amber);}
.brandbar i:nth-child(2){flex:1;background:var(--mint);}


/* ============================================================
   20  BEWEGUNG
   ============================================================ */
.settle{animation:settle var(--t-slow) var(--ease) both;}
.settle--2{animation-delay:110ms;}
@keyframes settle{from{opacity:.001;transform:translateY(14px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .btn:hover,.offer:hover{transform:none;}
}


/* ============================================================
   DRUCK
   ============================================================ */
@media print{
  .site-header,.legend,.hero-cta,.form-card,.check-inner{display:none;}
  body{background:#fff;color:#000;font-size:10.5pt;}
  section{padding:16pt 0;break-inside:avoid;}
}