/* Schriften lokal ausgeliefert: kein Abruf bei Google, keine IP-Uebermittlung an Dritte.
   Variable Fonts - eine Datei deckt den gesamten Gewichtsbereich ab. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(../media/3100e775e8616cd2.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:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(../media/d80df8ff5aecd299.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:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(../media/6f2f5c3b1abc3d0b.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;}


/* ─────────────────────────────────────────────
   TOKENS
   Heller Grund als Basis, dunkle Blöcke als Akzent.
   Roségold aus dem Firmenzeichen: #E4CA93 · #B79462 · #A17542
   ───────────────────────────────────────────── */
:root{
  --ground:#F4F1E9;
  --surface:#FBFAF6;
  --sunk:#E7E0D3;
  --bar-soft:#DCCBB0;
  --field:#FFFFFF;
  --ink:#14100C;
  --ink-2:#3A332B;
  --ink-3:#5C5245;
  /* Etwas tiefer als zuvor: der Schleier ueber dem Foto hebt den hellen
     Grund an, sonst faellt der kleine rosé Text unter AA. */
  --rose:#8E4A34;
  --rose-deep:#7E3F2B;
  --rose-mid:#C08260;
  --rose-pale:#E7C9A8;
  --foil:linear-gradient(112deg,#8E4A30 0%,#B8734F 26%,#E4C08F 52%,#A85B3C 78%,#7E3F2B 100%);
  --line:rgba(160,84,60,.22);
  --line-2:rgba(160,84,60,.42);
  --hair:rgba(20,16,12,.14);

  --fs-label:.72rem;
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.1rem,1.4vw,1.28rem);
  --fs-h2:clamp(2.1rem,4vw,3.2rem);
  --fs-display:clamp(3rem,7.2vw,6.2rem);

  --maxw:1180px;
  --gutter:clamp(1.5rem,5vw,4rem);
  --sec-pad:clamp(6rem,12vw,11rem);

  /* Durchscheinender Grund: das Gebaeudefoto liegt hinter der ganzen Seite,
     die Baender legen sich als Schleier darueber. */
  --ground-schleier:rgba(244,241,233,.88);

  /* Schauzeilen tragen das Gold des Logos — aber nur auf dunklem Grund.
     Auf hellem Grund gibt es kein Gold: ein Ton, der dort traegt, muss so
     dunkel sein, dass er als Terrakotta liest. Dort bleibt es bei Tinte. */
  --gold-schrift:#14100C;

  /* Die kleinen Ueberschriften: auf hellem Grund im tiefen Rose, auf dunklem
     Grund hell. Sie kippen mit dem Band, nicht mit der Marke. */
  --label-farbe:#8E4A34;
}
/* Dunkler Block: dieselben Token neu belegt — ein Klassenname
   kippt Text, Linien, Diagramme und Formulare gemeinsam um. */
.sec.dark, .hero, .site-foot.dark, .kennzahlen, .laufband{
  --ground:#14100C;
  --surface:#1E1813;
  --sunk:#0D0A08;
  --bar-soft:#4E4136;
  --field:#1A1510;
  --ink:#F6F1E7;
  --ink-2:#D6CDBF;
  --ink-3:#A9998A;
  /* Roségold der Wort-Bild-Marke - Akzente und Diagramme folgen ihr. */
  --rose:#DDB291;
  --rose-deep:#F0C6A6;
  --rose-mid:#C08260;
  --rose-pale:#8E4A30;
  --foil:linear-gradient(112deg,#C08260 0%,#E7C9A8 30%,#F2D9BC 52%,#D69C75 76%,#A85B3C 100%);
  --line:rgba(227,165,127,.26);
  --line-2:rgba(227,165,127,.5);
  --hair:rgba(246,241,231,.13);
  --ground-schleier:rgba(20,16,12,.86);
  --gold-schrift:#DDB291;
  --label-farbe:#F6F1E7;
  background:var(--ground-schleier);
  color:var(--ink);
}
@media (max-width:640px){:root{--fs-label:.76rem}}

/* ─────────────────────────────────────────────
   BASIS
   ───────────────────────────────────────────── */
*{box-sizing:border-box}
body{
  margin:0;position:relative;
  background:var(--ground);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.72;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:400}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.label{
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--label-farbe);
  line-height:1.6;
}
/* Funktionale Beschriftungen bleiben neutral — Roségold markiert Struktur, nicht jedes Feld. */
.f label,.ctrl__hd .label,.gap-row .label,.legend,.results .label,.pyr__hd .label,.vpi__year{color:var(--ink-3)}

.display{
  font-family:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  font-weight:500;line-height:1.04;letter-spacing:0;
}
.h2{
  font-family:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  font-weight:500;font-size:var(--fs-h2);line-height:1.1;letter-spacing:0;
  color:var(--gold-schrift);
}
.lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:56ch;line-height:1.66}
.prose{max-width:58ch;color:var(--ink-2);display:flex;flex-direction:column;gap:1.15em}
/* Einzelner Absatz — nicht .prose verwenden, sonst zerlegt der Flex-Container den Satz. */
.copy{max-width:58ch;color:var(--ink-2)}
.mono{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}

/* Foliendruck für die Leitzahlen */
.foil{color:var(--rose)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foil{
    background-image:var(--foil);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

/* Das Gebaeudefoto liegt als feste Ebene hinter der gesamten Seite.
   Negativer Stapelwert: die Baender malen ihren Schleier darueber. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../media/934dacd563b8078c.webp");
  background-size:cover;background-position:50% 46%;
  filter:saturate(.34) contrast(1.02) brightness(.52) sepia(.16);
}
.sec:not(.dark),
.site-foot:not(.dark){background:var(--ground-schleier)}
.sec > .wrap{padding-block:var(--sec-pad)}
.sec + .sec > .wrap{border-top:1px solid var(--line)}
.sec.dark + .sec:not(.dark) > .wrap,
.sec:not(.dark) + .sec.dark > .wrap{border-top-color:transparent}
.sec-head{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:clamp(3rem,6vw,5rem)}

.btn{
  display:inline-block;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:.75rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  padding:1.05rem 2rem;text-decoration:none;
  /* Alle Schaltflaechen tragen den Foliendruck der Marke. Die dunkle Tinte
     darauf liegt bei 9,8 im Mittel und bei 5,6 am dunkelsten Verlaufsende. */
  border:1px solid #DDB291;color:#14100C;
  background:#DDB291;
  background-image:linear-gradient(112deg,#C98A62 0%,#E7C9A8 30%,#F2D9BC 52%,#D69C75 76%,#C07A55 100%);
  transition:opacity .3s ease;cursor:pointer;
}
.btn:hover{opacity:.84}
.btn--ghost{background:transparent;color:var(--rose);border-color:var(--line-2)}
.btn--ghost:hover{opacity:1;background:var(--rose);color:var(--ground);border-color:var(--rose)}

/* ─────────────────────────────────────────────
   KOPF
   ───────────────────────────────────────────── */
.site-head{
  position:absolute;inset:0 0 auto 0;z-index:10;
  border-bottom:1px solid rgba(227,165,127,.22);
  /* Eigener Verlauf, damit die Navigation nicht vom Bildmotiv darunter abhaengt */
  background:linear-gradient(to bottom,rgba(20,16,12,.78) 0%,rgba(20,16,12,.55) 60%,rgba(20,16,12,0) 100%);
  padding-bottom:1.2rem;
}
/* Sieben Menuepunkte und eine Schaltflaeche mit langem Wort passen nur knapp
   in die Spalte. Mit weiteren Abstaenden ragt die Schaltflaeche ueber den
   Textrand hinaus und steht dann auf beiden Seiten woanders. */
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-block:1.5rem}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.brand__mark{width:40px;height:auto;flex:none}
.foot-logo{width:136px;height:auto;margin-bottom:1.5rem;display:block}
.nav{display:flex;align-items:center;gap:.85rem}
.nav a{
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:rgba(246,241,231,.86);transition:color .3s;
  white-space:nowrap;
}
.nav a:hover{color:#DDB291}
.head-cta{padding:.7rem 1rem;font-size:.66rem;letter-spacing:.2em;white-space:nowrap}
/* Sieben Punkte brauchen mehr Platz als sechs - die Leiste verschwindet
   deshalb schon etwas frueher. */
@media (max-width:1280px){.nav{display:none}}
@media (max-width:520px){.head-cta{display:none}}

/* ─────────────────────────────────────────────
   TITELPLATTE
   ───────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  /* Ohne die beiden Schaltflaechen darf der Titel enger sitzen - die
     Kennzahlen ruecken dadurch nach oben. */
  padding-block:clamp(5rem,9vw,7rem) clamp(2.5rem,5vw,3.5rem);
  /* Beide Titelplatten sind gleich hoch. Die Startseite braucht durch ihre
     vierzeilige Schauzeile 759 Pixel - dieselbe Hoehe gilt fuer die
     Partnerseite, damit die Seiten im selben Massstab wirken. */
  /* Der Inhalt haengt oben statt mittig: sonst rutscht die Marke je nach
     Textlaenge nach unten und steht auf beiden Seiten woanders. */
  min-height:760px;display:flex;align-items:flex-start;
}
.hero__photo{
  position:absolute;inset:0;
  background-image:url("../media/934dacd563b8078c.webp");
  background-size:cover;background-position:50% 46%;
  filter:saturate(.42) contrast(1.05) brightness(.66) sepia(.18);
}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(102deg,rgba(20,16,12,.97) 0%,rgba(20,16,12,.93) 30%,rgba(20,16,12,.64) 58%,rgba(24,15,10,.3) 100%),
    linear-gradient(to bottom,rgba(20,16,12,.6) 0%,rgba(20,16,12,0) 26%,rgba(20,16,12,.55) 82%,rgba(20,16,12,.92) 100%);
}
.hero__grain{
  position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__in{position:relative;z-index:2;width:100%}
/* Aussage links, Wort-Bild-Marke rechts daneben.
   Die Marke bleibt im Quelltext vorn, damit sie auf schmalen
   Schirmen oben steht; gesetzt wird sie über die Rasterspalte. */
.hero__top{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
/* Die Marke steht dort, wo der Schleier am duennsten ist und das Foto
   am hellsten durchscheint. Ein weicher, runder Hof dahinter gibt ihr
   Grund, ohne das Bild flaechig abzudunkeln. */
.hero__marke{
  /* Die Marke sitzt tiefer und weiter rechts als das Raster sie setzen
     wuerde - sie soll in der freien Bildflaeche stehen, nicht auf einer
     Linie mit der Schauzeile. */
  transform:translateY(clamp(1rem,9.5vw,136px));
  grid-column:2;grid-row:1;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.hero__marke::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:230%;
  background:radial-gradient(closest-side,
    rgba(10,7,5,.94) 0%, rgba(10,7,5,.86) 38%,
    rgba(10,7,5,.52) 66%, rgba(10,7,5,.16) 85%, rgba(10,7,5,0) 100%);
}
.hero__logo{
  position:relative;z-index:1;
  width:clamp(220px,29vw,410px);height:auto;display:block;
  filter:drop-shadow(0 0 10px rgba(10,7,5,.7)) drop-shadow(0 2px 3px rgba(10,7,5,.5));
}
/* Erst ab dieser Breite ist rechts genug Luft, um die Marke zusaetzlich
   aus dem Raster heraus nach aussen zu ruecken. */
@media (min-width:1200px){
  .hero__marke{transform:translate(clamp(0px,4vw,72px), clamp(1rem,9.5vw,136px))}
}
.hero__words{grid-column:1;grid-row:1}
@media (max-width:900px){
  .hero__top{grid-template-columns:1fr;gap:2.4rem}
  .hero__marke,.hero__words{grid-column:auto;grid-row:auto}
  .hero__marke{transform:none}
  .hero{min-height:min(62vh,600px)}
  .hero__logo{width:clamp(210px,62vw,320px)}
  .hero__marke::before{width:190%;height:200%}
}
.hero h1{margin-top:1.5rem;font-size:var(--fs-display);max-width:12ch}
/* Eine laengere Schauzeile braucht eine kleinere Stufe und mehr Laufweite,
   sonst zerfaellt sie in sechs Zeilen. Die Breite begrenzt die Rasterspalte -
   ein max-width in ch fesselt die Zeile hier zu stark. */
.hero h1.display--lang{font-size:clamp(2.4rem,5.28vw,4.75rem);max-width:none}
.hero h1 i{font-style:italic}
.hero__lead{margin-top:2.4rem;max-width:50ch;color:var(--ink-2)}
/* Nur noch die Partnerseite hat Schaltflaechen im Titelbild. */
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}
.hero .btn--ghost{color:var(--rose-deep);border-color:rgba(227,165,127,.45)}

.facts{
  margin-top:clamp(4.5rem,10vw,8rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;max-width:760px;
}
.fact__n{font-family:"Cormorant Garamond",Garamond,serif;font-weight:500;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1;font-variant-numeric:tabular-nums}
.fact__l{margin-top:.9rem}
@media (max-width:680px){.facts{grid-template-columns:1fr;gap:1.8rem}}

/* ─────────────────────────────────────────────
   RASTER
   ───────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,7vw,6rem);align-items:start}
/* Die Schauzeile im Inflationsband braucht mehr Laufweite als das Diagramm.
   Als Klasse, nicht inline - sonst schlaegt sie die Medienabfrage unten. */
.split--inflation{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.services{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.2rem,4vw,3.2rem) clamp(2.5rem,6vw,5rem);margin-top:clamp(3.5rem,7vw,5.5rem)}
.services h3{font-size:1.0625rem;font-weight:600}
.services p{margin-top:.55rem;font-size:.95rem;color:var(--ink-2);line-height:1.62;max-width:40ch}
@media (max-width:640px){.services{grid-template-columns:1fr}}

.note{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.74rem;line-height:1.85;color:var(--ink-3);margin-top:clamp(2.5rem,5vw,3.5rem);max-width:70ch}
.source{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.74rem;line-height:1.7;color:var(--ink-3);margin-top:2rem}

/* ── Rentenlücke ── */
.gap-card{background:var(--surface);padding:clamp(2rem,4vw,3rem);border:1px solid var(--line)}
.gap-big{font-family:"Cormorant Garamond",Garamond,serif;font-weight:600;font-size:clamp(3.2rem,7vw,5rem);line-height:1;margin-top:1.1rem;font-variant-numeric:tabular-nums;letter-spacing:0}
.gap-rows{margin-top:2.6rem;display:flex;flex-direction:column;gap:1.4rem}
.gap-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
.gap-row__v{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:1.15rem;font-variant-numeric:tabular-nums}

/* ── Alterspyramiden ── */
.pyramids{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,4vw,2.6rem);margin-top:clamp(3rem,6vw,4.5rem)}
.pyr{margin:0}
.pyr__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.pyr__ra{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.6rem;line-height:1;color:var(--rose);font-variant-numeric:tabular-nums}
.pyr svg{width:100%;height:auto;margin-top:1.2rem;display:block}
.pyr__cap{font-size:.87rem;color:var(--ink-2);margin-top:1.1rem;line-height:1.55}
@media (max-width:860px){.pyramids{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.pyramids{grid-template-columns:1fr}}
.legend{display:flex;flex-wrap:wrap;gap:1.8rem;margin-top:2.5rem;font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}
.legend span{display:flex;align-items:center;gap:.6rem}
.legend i{width:14px;height:7px;display:block}
.legend i.dash{height:0;border-top:1px dashed var(--rose);width:16px}

/* ── Inflation ── */
.vpi{margin-top:1.6rem}
.vpi__plot{position:relative;height:190px}
.vpi__cols{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1.4vw,1rem);height:100%;align-items:end;position:relative;z-index:2}
.vpi__col{display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;height:100%}
.vpi__v{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:center}
.vpi__bar{width:100%;background:var(--bar-soft);border-top:2px solid var(--ink-3)}
.vpi__col--peak .vpi__bar{background:var(--rose-pale);border-top-color:var(--rose)}
.vpi__col--peak .vpi__v{color:var(--rose);font-weight:500}
.vpi__ref{position:absolute;left:0;right:0;border-top:1px dashed var(--line-2);z-index:1}
.vpi__ref b{position:absolute;right:0;top:-1.65em;font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.68rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.vpi__years{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1.4vw,1rem);padding-top:.7rem;border-top:1px solid var(--line)}
.vpi__year{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.72rem;text-align:center}

.power{margin-top:clamp(3.5rem,7vw,5rem);display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4rem);align-items:end}
.power__n{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(2.8rem,6vw,4.4rem);line-height:1;font-variant-numeric:tabular-nums;text-align:right;letter-spacing:0}
.power__d{text-align:right;margin-top:.9rem}
@media (max-width:720px){.power{grid-template-columns:1fr}.power__n,.power__d{text-align:left}}

/* ── Rechner ── */
.calc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.controls{display:flex;flex-direction:column;gap:2.4rem}
.ctrl__hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ctrl__v{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--rose)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line-2);margin:1.5rem 0 0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;background:var(--rose);border-radius:50%;border:none}
input[type=range]::-moz-range-thumb{width:15px;height:15px;background:var(--rose);border-radius:50%;border:none}

.results{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:2.4rem}
.res__v{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1;font-variant-numeric:tabular-nums;margin-top:.7rem}
@media (max-width:560px){.results{grid-template-columns:1fr;gap:1.4rem}}
.chart-box{position:relative}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart-y{position:absolute;inset:0;pointer-events:none}
.chart-y span{
  position:absolute;right:0;transform:translateY(-50%);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.7rem;font-variant-numeric:tabular-nums;
  color:var(--ink-3);background:var(--ground);padding-left:.6rem;
}
.axis{display:flex;justify-content:space-between;font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.72rem;color:var(--ink-3);padding-top:.9rem;border-top:1px solid var(--line);margin-top:.5rem}
.risk{margin-top:clamp(3rem,6vw,4rem);font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.75rem;line-height:1.9;color:var(--ink-3);max-width:78ch}

/* ── Vorteile / Ablauf ── */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.5rem,5vw,4rem) clamp(2.5rem,6vw,4.5rem)}
.cols3 h3{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.42rem;line-height:1.2;margin-top:1rem}
.cols3 p{margin-top:.8rem;color:var(--ink-2);font-size:.95rem;line-height:1.62;max-width:36ch}
@media (max-width:880px){.cols3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cols3{grid-template-columns:1fr}}
.cols4{grid-template-columns:repeat(2,1fr)}
@media (min-width:881px){.cols4{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.cols4{grid-template-columns:1fr}}
.step__n{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.2em;color:var(--rose)}

/* ── Person ── */
.person{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media (max-width:820px){.person{grid-template-columns:1fr}}
.portrait{margin:0}
.portrait img{width:100%;height:auto;display:block;aspect-ratio:818/1225;object-fit:cover;background:var(--sunk);filter:saturate(.9) contrast(1.02)}
.portrait figcaption{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem}
/* 1,55rem statt 1,45rem: ab 24 px gilt die Schwelle fuer Grossschrift,
   darunter reicht das Gold auf hellem Grund nicht (4,40 statt 4,50). */
.portrait figcaption b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.55rem;color:var(--gold-schrift)}
.portrait__grad{font-size:.92rem;color:var(--ink-2);margin-top:-.15rem}
/* Dezenter Verweis auf die Personenseite - Haarlinie statt Unterstreichung. */
.portrait__link{
  align-self:start;font-size:.82rem;letter-spacing:.06em;
  color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:.2rem;
  transition:color .3s,border-color .3s;
}
.portrait__link:hover{color:var(--rose);border-bottom-color:var(--rose)}
.quote{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.42;font-style:italic;margin:2.5rem 0 0;padding-left:1.6rem;border-left:2px solid var(--rose);color:var(--ink)}

/* ── Kontakt ── */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1.8rem}
.f{display:flex;flex-direction:column;gap:.65rem}
.f--full{grid-column:1/-1}
.f input,.f select,.f textarea{
  font-family:"Inter",sans-serif;font-size:1rem;color:var(--ink);
  background:var(--field);border:1px solid var(--line);
  padding:.95rem 1rem;width:100%;transition:border-color .3s;
}
.f input:hover,.f select:hover,.f textarea:hover,.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--rose)}
.f textarea{resize:vertical;min-height:118px;line-height:1.6}
.f select{appearance:none;cursor:pointer}
.consent{grid-column:1/-1;display:flex;gap:.9rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.consent input{margin-top:.3rem;width:15px;height:15px;accent-color:var(--rose);flex:none}
.consent a{color:var(--rose)}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:.5rem}
.form-note{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.74rem;color:var(--ink-3);line-height:1.7;max-width:34ch}
@media (max-width:660px){.form{grid-template-columns:1fr}}
.aside{display:flex;flex-direction:column;gap:2.4rem}
.aside p{line-height:1.85;color:var(--ink-2)}
.aside .label{margin-bottom:.8rem}
.aside a{text-decoration:none;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
.aside a:hover{border-color:var(--rose);color:var(--rose)}

/* ── Fuß ── */
.site-foot{padding-block:clamp(4rem,8vw,6rem) 3rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .label{margin-bottom:1.1rem}
.foot-grid p,.foot-grid li{font-size:.94rem;color:var(--ink-2);line-height:1.9}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid a{text-decoration:none;transition:color .3s}
.foot-grid a:hover{color:var(--rose)}
.legal{
  margin-top:clamp(3.5rem,7vw,5rem);padding-top:2.2rem;border-top:1px solid var(--line);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.74rem;line-height:1.95;color:var(--ink-3);
  display:flex;flex-direction:column;gap:1.6rem;
}
.legal p{max-width:92ch}
.legal__bar{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:space-between}
.legal__bar nav{display:flex;flex-wrap:wrap;gap:1.8rem}
.legal a{text-decoration:none}
.legal a:hover{color:var(--rose)}
/* ─────────────────────────────────────────────
   RECHTSSEITEN
   ───────────────────────────────────────────── */
.hero--klein{min-height:auto;padding-block:clamp(7rem,12vw,10rem) clamp(3.5rem,6vw,5.5rem)}
.rechts-titel{font-size:clamp(2.4rem,5vw,4rem);margin-top:1.2rem}
.rechts{display:flex;flex-direction:column;gap:clamp(2.6rem,5vw,3.6rem);max-width:74ch}
.rechts__block{padding-top:clamp(2.6rem,5vw,3.6rem);border-top:1px solid var(--line)}
.rechts__block:first-child{padding-top:0;border-top:none}
.rechts__block h2{margin-bottom:1.1rem}
.rechts__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;color:var(--ink-2)}
.rechts__liste li{padding-left:1.4rem;position:relative}
.rechts__liste li::before{content:"";position:absolute;left:0;top:.72em;width:.6rem;height:1px;background:var(--rose)}
.rechts a{color:var(--rose);text-decoration:none;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
.rechts a:hover{border-color:var(--rose)}
/* Noch zu ergänzende Angaben sichtbar markieren, damit sie nicht live gehen */
mark.offen{
  background:var(--sunk);color:var(--rose-deep);
  padding:.1em .5em;border:1px dashed var(--line-2);
  font-family:"Inter",sans-serif;font-size:.92em;
}
/* ─────────────────────────────────────────────
   FINANZPLAN
   ───────────────────────────────────────────── */
.schritte{
  list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);
}
.schritte li{flex:1 1 10rem;border-right:1px solid var(--line)}
.schritte li:last-child{border-right:none}
.schritte a{
  display:flex;align-items:baseline;gap:.9rem;padding:1.3rem 1.2rem 1.3rem 0;
  text-decoration:none;color:var(--ink-2);transition:color .3s;
  font-family:"Inter",sans-serif;font-size:.92rem;
}
.schritte a:hover{color:var(--rose)}
.schritte b{
  font-family:"Inter",sans-serif;font-weight:500;font-size:.72rem;
  letter-spacing:.2em;color:var(--rose);
}
@media (max-width:640px){.schritte li{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--line)}}

.befund{
  margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:.98rem;line-height:1.7;max-width:60ch;
}
.befund b{font-weight:600;color:var(--ink)}

.szenarien{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.szen{display:flex;flex-direction:column;gap:.5rem}
.szen b{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.3rem;font-variant-numeric:tabular-nums}
@media (max-width:560px){.szenarien{grid-template-columns:1fr;gap:1rem}}

.luecke-bar{margin-top:.5rem}
.lb__spur{display:flex;height:16px;overflow:hidden;background:var(--sunk)}
.lb__rente{background:var(--bar-soft)}
.lb__luecke{background:var(--rose)}
.lb__marken{display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem}

.abschluss{
  margin-top:clamp(3.5rem,7vw,5rem);padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:2rem;align-items:end;justify-content:space-between;
}
.weiter{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:2rem;align-items:end;justify-content:space-between;
}
/* ─────────────────────────────────────────────
   PARTNERSEITE
   ───────────────────────────────────────────── */
/* Der Diagrammblock folgt auf eine Schlusszeile - er braucht denselben
   Abstand wie die uebrigen Bloecke im Abschnitt. */
.modell{margin-top:clamp(3.5rem,7vw,5.5rem);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4rem)}
@media (max-width:760px){.modell{grid-template-columns:1fr;gap:3rem}}
.modell__seite{margin:0}
.modell__hd{display:flex;flex-direction:column;gap:.6rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.modell__hd b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.45rem;line-height:1.15;color:var(--gold-schrift)}
.modell__seite svg{width:100%;height:auto;display:block;margin-top:1.4rem}
.modell__seite figcaption{margin-top:1.2rem;color:var(--ink-2);font-size:.94rem;line-height:1.6;max-width:42ch}

.hebel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.hebel li{padding:1.8rem 1.6rem 0 0;border-top:1px solid var(--line-2)}
.hebel li + li{padding-left:1.6rem;border-left:1px solid var(--line)}
.hebel p{margin-top:1rem;color:var(--ink-2);font-size:.93rem;line-height:1.62}
.hebel b{font-weight:600;color:var(--ink)}
@media (max-width:1000px){
  .hebel{grid-template-columns:repeat(2,1fr)}
  .hebel li{padding:1.8rem 1.6rem 1.8rem 0}
  .hebel li + li{padding-left:0;border-left:none}
  .hebel li:nth-child(even){padding-left:1.6rem;border-left:1px solid var(--line)}
}
@media (max-width:560px){
  .hebel{grid-template-columns:1fr}
  .hebel li,.hebel li:nth-child(even){padding-left:0;border-left:none}
}

.weg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.weg li{padding:1.6rem 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem}
.weg li:last-child{border-bottom:1px solid var(--line)}
.weg b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.35rem}
.weg p{color:var(--ink-2);font-size:.93rem;line-height:1.6}
/* ─────────────────────────────────────────────
   KENNZAHLENBAND UND LAUFBAND
   ───────────────────────────────────────────── */
.kennzahlen{border-top:1px solid var(--line)}
.kennzahlen__raster{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.kennzahl{
  padding:clamp(2rem,3.6vw,3.1rem) clamp(1rem,2vw,1.8rem);
  text-align:center;border-right:1px solid var(--line);
}
.kennzahl:last-child{border-right:none}
/* Die Partnerseite belegt nur drei Felder - dort teilt sich das Band anders. */
.kennzahlen--drei .kennzahlen__raster{grid-template-columns:repeat(3,minmax(0,1fr))}
.kennzahl b{
  display:block;
  font-family:"Cormorant Garamond",Garamond,serif;font-weight:600;
  font-size:clamp(2.8rem,5.6vw,4.8rem);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.kennzahl span{display:block;margin-top:1.2rem}
@media (max-width:860px){
  .kennzahlen__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kennzahl:nth-child(2n){border-right:none}
  .kennzahl:nth-child(-n+2){border-bottom:1px solid var(--line)}
  /* Bei drei Feldern liegt der Umbruch anders: zwei oben, eins darunter.
     Die Dreier-Regel oben ist spezifischer und muss hier erneut geschlagen werden. */
  .kennzahlen--drei .kennzahlen__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kennzahlen--drei .kennzahl:nth-child(3){border-right:none;grid-column:1 / -1}
}
@media (max-width:520px){
  .kennzahlen__raster{grid-template-columns:1fr}
  .kennzahl{border-right:none;border-bottom:1px solid var(--line);padding-block:2.2rem}
  .kennzahl:last-child{border-bottom:none}
}

/* Laufband: die Spur enthaelt die Wortfolge zweimal, deshalb ist ein
   Versatz um die halbe Spurbreite ein nahtloser Rundlauf. */
.laufband{overflow:hidden;border-block:1px solid var(--line)}
.laufband__spur{
  display:flex;width:max-content;align-items:center;
  gap:clamp(2rem,4vw,3.4rem);padding-block:clamp(1.1rem,2vw,1.6rem);
  animation:laufband 64s linear infinite;
}
.laufband__spur span{
  display:flex;align-items:center;gap:clamp(2rem,4vw,3.4rem);
  font-family:"Cormorant Garamond",Garamond,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2vw,1.7rem);color:var(--ink-2);white-space:nowrap;
}
.laufband__spur span::after{content:"\2733";font-style:normal;font-size:.52em;color:var(--rose)}
@keyframes laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.laufband__spur{animation:none}}
/* Fliesstext direkt unter einer Sektionsueberschrift nutzt die volle Breite —
   zweispaltig gesetzt, damit die Zeilenlaenge lesbar bleibt. */
/* Mehrabsaetzige Bloecke laufen zweispaltig ueber die volle Breite.
   Einzelne kurze Absaetze bleiben einspaltig - zweispaltig zerfielen sie
   in zwei magere Streifen. */
.sec-head .prose{
  max-width:none;
  display:block;
  columns:2;
  column-gap:clamp(2.5rem,5vw,4.5rem);
}
.sec-head .prose p + p{margin-top:1.15em}
.sec-head .copy{max-width:74ch}
.sec-head .copy p + p{margin-top:1.15em}
@media (max-width:900px){
  .sec-head .prose{columns:1;max-width:60ch}
}
/* Die Verhaeltniszahl traegt eine Fussnote — der Stern soll die Ziffern nicht verschieben */
.pyr__ra{font-variant-numeric:tabular-nums}
.prose b, .copy b{font-weight:600;color:var(--ink)}
/* Kachel mit zwei Absaetzen - ohne Abstand kleben sie aneinander. */
.cols3 article p + p{margin-top:1rem}
/* Zugangswort fuer den Partnerbereich. Die Pruefung laeuft im Browser und
   ist deshalb kein echter Schutz - sie haelt Gelegenheitsbesucher fern. */
.tor{
  display:flex;flex-wrap:wrap;align-items:end;gap:1.2rem;
  padding:clamp(2rem,4vw,2.8rem);
  border:1px solid var(--line);background:var(--surface);
  max-width:34rem;
}
.tor__feld{display:flex;flex-direction:column;gap:.7rem;flex:1 1 14rem}
.tor__feld input{
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:1rem;
  padding:.9rem 1rem;color:var(--ink);
  background:var(--field);border:1px solid var(--line-2);border-radius:0;
}
.tor__feld input:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.tor__hinweis{flex:1 1 100%;margin:0;font-size:.9rem;color:var(--ink-3)}
.tor__hinweis--fehler{color:var(--rose)}
.tor-inhalt{margin-top:clamp(3rem,6vw,4.5rem)}
.tor-inhalt__weg{margin-top:1.2rem}
.tor-inhalt__weg a{
  font-size:.75rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose);text-decoration:none;border-bottom:1px solid var(--line-2);
  padding-bottom:.35rem;
}
.tor-inhalt__weg a:hover{border-bottom-color:var(--rose)}
/* Zwischenblock innerhalb eines Abschnitts: eigene Zwischenueberschrift
   mit Text, deutlich abgesetzt vom Kopf des Abschnitts. */
.bezug{margin-top:clamp(3.5rem,7vw,5.5rem)}
/* Abschliessender Gedanke unter einem Kachelraster - traegt die Aussage,
   ohne selbst eine Kachel zu sein. */
.schlusszeile{
  margin-top:clamp(2.6rem,5vw,3.6rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--line-2);
  max-width:56ch;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  line-height:1.4;
  color:var(--ink);
  hyphens:none;-webkit-hyphens:none;
}
/* Weiche Trennstriche gehoeren in den Fliesstext, wo sie Luecken vermeiden.
   In Schauzeilen und Vorspaennen wirken sie billig — dort werden sie
   abgeschaltet; die Zeile bricht dann zwischen den Woertern. */
.display,.h2,h1,h2,h3,.lead,.quote,.kennzahl b{hyphens:none;-webkit-hyphens:none}


/* Fuenf Seiten in einer Datei - sichtbar ist immer genau eine. */
.seite{display:none}
.seite.ist-an{display:block}

.seite{display:block}
/* Mobile navigation */
html{scroll-behavior:smooth;scroll-padding-top:clamp(5.5rem,9vw,7.5rem)}
main section[id]{scroll-margin-top:clamp(5.5rem,9vw,7.5rem)}
.site-head{position:fixed;inset:0 0 auto 0;width:100%;transition:background-color .28s ease,box-shadow .28s ease,border-color .28s ease,backdrop-filter .28s ease}
.site-head.is-scrolled{background:rgba(20,16,12,.92);border-bottom-color:rgba(221,178,145,.34);box-shadow:0 10px 32px rgba(20,16,12,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-head.is-scrolled .site-head__in{padding-block:1rem}
.site-head__in{transition:padding .28s ease}
.menu-toggle{display:none;position:relative;z-index:1002;width:48px;height:48px;padding:0;border:1px solid rgba(221,178,145,.62);background:rgba(20,16,12,.2);color:#f4f1e9;cursor:pointer}
.menu-toggle__line,.menu-toggle__line::before,.menu-toggle__line::after{position:absolute;left:50%;width:22px;height:1px;background:currentColor;content:"";transform:translateX(-50%);transition:transform .28s ease,top .28s ease,opacity .2s ease}
.menu-toggle__line{top:50%}.menu-toggle__line::before{top:-7px}.menu-toggle__line::after{top:7px}
.menu-toggle[aria-expanded="true"] .menu-toggle__line{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle__line::before{top:0;background:#f4f1e9;transform:translateX(-50%) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__line::after{top:0;background:#f4f1e9;transform:translateX(-50%) rotate(-45deg)}
.menu-backdrop{display:none}
.site-head .nav .mobile-menu-cta{display:none}
@media (max-width:1280px){
 .site-head .menu-toggle{display:block;flex:none}
 .site-head .nav{display:flex;position:fixed;z-index:1001;inset:0 0 0 auto;width:min(88vw,430px);height:100dvh;padding:clamp(7rem,16vh,9rem) clamp(2rem,7vw,4rem) 3rem;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;background:#14100c;border-left:1px solid rgba(221,178,145,.35);box-shadow:-24px 0 70px rgba(0,0,0,.3);overflow-y:auto;transform:translateX(105%);visibility:hidden;transition:transform .34s cubic-bezier(.22,.61,.36,1),visibility 0s linear .34s}
 .site-head .nav.is-open{transform:translateX(0);visibility:visible;transition-delay:0s}
 .site-head .nav a{display:block;width:100%;padding:1.08rem 0;border-bottom:1px solid rgba(221,178,145,.18);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.35rem,5vw,1.75rem);font-weight:400;letter-spacing:.02em;text-transform:none;color:#f4f1e9}
 .site-head .nav a:hover,.site-head .nav a:focus-visible{color:#ddb291}
 .site-head .nav .mobile-menu-cta{display:none}
 .menu-backdrop{display:block;position:fixed;z-index:1000;inset:0;background:rgba(20,16,12,.68);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
 .menu-backdrop.is-open{opacity:1;visibility:visible;transition-delay:0s}
 body.menu-open{overflow:hidden}
}
@media (max-width:520px){
 .site-head .nav .mobile-menu-cta{display:block;margin-top:2rem;padding:1rem 1.1rem;border:1px solid #DDB291;background:#DDB291;background-image:linear-gradient(112deg,#C98A62 0%,#E7C9A8 30%,#F2D9BC 52%,#D69C75 76%,#C07A55 100%);font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.68rem;font-weight:600;line-height:1.4;letter-spacing:.18em;text-align:center;text-transform:uppercase;color:#14100c}
 .site-head .nav .mobile-menu-cta:hover,.site-head .nav .mobile-menu-cta:focus-visible{color:#14100c;opacity:.86}
}
@media (max-width:900px){
 #kontakt .split{grid-template-columns:1fr!important}
 #kontakt .aside{margin-top:clamp(1rem,4vw,2rem);padding-top:clamp(2rem,6vw,3rem);border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-head,.site-head__in,.menu-toggle__line,.menu-toggle__line::before,.menu-toggle__line::after,.site-head .nav,.menu-backdrop{transition:none}}