@font-face{font-family:'Artico';src:url('/fonts/artico-light.woff2') format('woff2');font-weight:300}
@font-face{font-family:'Artico';src:url('/fonts/artico-regular.woff2') format('woff2');font-weight:400}
@font-face{font-family:'Artico';src:url('/fonts/artico-medium.woff2') format('woff2');font-weight:500}




html,body{margin:0;background:var(--atha-ink, #111110);color:var(--atha-paper, #F4F4F1);-webkit-font-smoothing:antialiased}
@keyframes menuScroll{0%{transform:translateY(0)}12%{transform:translateY(0)}100%{transform:translateY(-28%)}}
a{color:inherit;text-decoration:none;transition:opacity .15s}a:hover{opacity:.55}
[data-m="popin"] input::placeholder{color:#8F8D86}
@media (max-width:640px){
}

@media (max-width:860px){
  [data-m="nav"]{display:none!important}
  [data-m="mbtn"]{display:block!important;width:40px!important;height:40px!important}
  section.s4486265a1a{gap:56px 24px!important}
  section > div.s4b1a45c1b8,section > div.sb619d610cd{order:0!important}
  footer{padding:40px 20px 56px!important;gap:28px 24px!important}
  footer > div{flex:1 1 100%!important}
  footer > p{margin-top:16px!important}
  h1,section > p.s777605f03a,section p.s777605f03a{font-size:26px!important;line-height:1.25!important}
  [data-m="row"] > div{width:min(68vw,240px)!important}
}

@media (max-width:640px){
  /* ── Schriftgrade mobil, 10.11. ────────────────────────────────────
     Artico hat 52 % x-Hoehe, Inter 55 %. Die Grade stammen aus der
     Inter-Zeit und wurden beim Schriftwechsel mitgenommen — dadurch
     liest alles rund 5 % kleiner als gemeint. Ein Punkt mehr je Rolle
     stellt den gemeinten Grad wieder her und bringt die Website auf
     dieselben Grade wie die Angebotsseiten: 12 / 14 / 16. */
  [data-m="root"]{font-size:16px!important}
  [data-m="root"] .s5e461f0709{font-size:14px!important}
  [data-m="root"] .s33ee298127{font-size:12px!important}
  footer .s33ee298127{font-size:12px!important}
  [data-m="hl"]{font-size:24px!important;line-height:1.28!important}
  section{padding-left:20px!important;padding-right:20px!important}
  :where(section[data-screen-label]){padding-bottom:96px!important}
  footer{padding:40px 20px 48px!important;gap:28px 20px!important;font-size:14px!important}
  footer > div{flex:1 1 150px!important}
  footer > div:nth-child(3){flex:1 0 100%!important}
}

@media (max-width:640px){
  section,footer,header{padding-left:24px!important;padding-right:24px!important}
  [data-m="intro"]{padding-left:24px!important;padding-right:24px!important}
  [data-m="mnu"]{padding-left:24px!important;padding-right:24px!important;
    padding-top:160px!important}
  /* Die Punkte standen auf 59px Schrittmass, Zeile 32.5 plus 11 Luft.
     Jetzt 2 — eine Liste, kein Absatzstapel. */
  [data-m="mnu"] nav,[data-m="mnu"] > div > div{row-gap:2px!important}
  [data-m="pop"]{padding-left:24px!important;padding-right:24px!important}
  [data-m="row"]{margin-left:-24px!important;margin-right:-24px!important;padding-left:24px!important;padding-right:24px!important}
  /* zwei Abstaende: 48 eng, 128 Bruch */
  section[data-screen-label="2 Einstieg"]{padding-bottom:128px!important}
  section[data-screen-label="4 Bild"]{padding-bottom:48px!important}
  section[data-screen-label="2 Gruender"]{padding-bottom:48px!important}
  section[data-screen-label="3 Text"]{padding-bottom:128px!important}
  section[data-screen-label="2 Text"]{padding-bottom:48px!important}
  section[data-screen-label="1 Satz"]{padding-bottom:48px!important}
  section[data-screen-label="3 Wellbeing Menu"],section[data-screen-label="4 Conferences"],section[data-screen-label="5 Hotel Studio"],section[data-screen-label="6 Signature"],section[data-screen-label="3 Sessions"],section[data-screen-label="5 Wie"],section[data-screen-label="Gift"],section[data-screen-label="3 Bilder"],section[data-screen-label="4 Fakten"],section[data-screen-label="5 Sunday Session"],section[data-screen-label="6 Retreat"],section[data-screen-label="5 Menschen"]{padding-bottom:128px!important}
  section[data-screen-label="Schluss"],section[data-screen-label="7 Private"],section[data-screen-label="6 Kontakt"]{padding-bottom:96px!important}
  [data-m="home"]{padding-bottom:128px!important}
  [data-m="wege"]{padding-top:48px!important;padding-bottom:96px!important}

  /* ── Takt, 09.11. ─────────────────────────────────────────────────
     Die Abschnitte standen auf 96 und damit enger als auf jeder
     anderen Seite. 128, wie ueberall. */
  [data-m="herogrid"]{grid-template-columns:1fr!important;gap:clamp(28px,7vw,44px)!important}
  [data-m="herogrid"] > div:last-child{justify-items:start!important}
  section[data-screen-label="3 Inside"],section[data-screen-label="4 How"],
  section[data-screen-label="5 Cards"],section[data-screen-label="6 Yours"]{padding-bottom:128px!important}
}
@media (prefers-reduced-motion:reduce){
  [data-m="track"]{animation:none!important}
  video[autoplay]{display:none}
}

/* ── Anker, 09.11. ── Die Sprungziele landeten auf y0, das Label klebte
   an der Oberkante. Jetzt mit Luft darueber, dann sieht man, dass man
   angekommen ist. */
section[id]{scroll-margin-top:clamp(40px,5vw,64px)}

/* ── Takt mobil, 10.11. ────────────────────────────────────────────
   Eine Leiter fuers ganze Haus: 76 eng · 112 Fortsetzung · 128 Bruch,
   dieselben Werte wie auf den Angebotsseiten. Die Seiten standen auf
   48 / 72 / 96 / 128 — vier Werte aus vier einzelnen Entscheidungen.
   Steht zuletzt und mit gleicher Spezifitaet wie die Regeln darueber,
   sonst gewinnen die alten. */
@media (max-width:640px){
  section[data-screen-label="1 Produkt"]{padding-bottom:112px!important}  /* war 96 */
  section[data-screen-label="7 Next"]{padding-bottom:112px!important}  /* war 96 */
}

/* ── Ohne JS, 10.11. ───────────────────────────────────────────────
   display und opacity dieser zwei Flaechen kommen aus dem Bauteil.
   Bevor es laeuft — oder wenn es nie laeuft — ist der Wert ungueltig
   und faellt weg: das Popup stand dann offen ueber der Seite, mit
   rohen Platzhaltern darin. Diese zwei Zeilen sind der Grundzustand.
   Das style-Attribut hat hoehere Prioritaet und gewinnt danach. */
[data-m="pop"]{display:none}
[data-m="mnu"]{opacity:0;pointer-events:none}

/* ── Laden und Bildschutz, 10.11. ─────────────────────────────────
   Maße am <img> reservieren den Platz, bevor das Bild da ist — ohne
   height:auto wuerde das height-Attribut die Hoehe festsetzen.
   user-drag und das Kontextmenue nehmen den bequemen Weg zum Bild.
   Mehr ist nicht moeglich: was der Browser zeigt, hat der Besucher. */
img[width]{height:auto}
img{-webkit-user-drag:none;-khtml-user-drag:none;user-select:none;-webkit-user-select:none}

.page-menu{--b-dotFill:currentColor;--b-dotMargin:-5.5px 0 0 -5.5px;--b-dotSize:11px;--b-font:'Artico',system-ui,sans-serif;--b-hdrBg:var(--atha-ink, #111110);--b-hdrColor:var(--atha-paper, #F4F4F1);--b-hdrLine:none;--b-menuEvents:none;--b-menuOpacity:0;--b-popupDisplay:none;}