/* Header, Newsletter und Footer aus dem frueheren test2-Entwurf (DM Sans), gemergt mit dem Canva-Body. */
.site-header{--h:72px;height:var(--h);padding:0 4.2%;display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:20;
  background:var(--blue);border-bottom:1px solid rgb(43 20 3 / 14%);font-family:'DM Sans',var(--sans)}
.brand{display:inline-flex;align-items:center;gap:6px;font-size:26px;font-weight:700;letter-spacing:-1.2px;text-decoration:none;flex:none}
.brand__mark{width:24px;height:29px;color:var(--brown)}
.brand__dot{color:#96592F}
.header-note{font-size:12px;letter-spacing:.02em;margin:0 auto;text-align:center}
.header-link{font-size:12px;letter-spacing:.02em;text-decoration:none;border:1px solid var(--brown);border-radius:999px;padding:9px 16px;white-space:nowrap;flex:none}
.header-link:hover{background:var(--brown);color:var(--blue)}
.site-header .menu{display:none}                 /* Menue nur mobil, als Ausklappliste */
.site-header .burger{display:none}
@media (max-width:700px){
  .site-header{--h:64px;padding:0 20px;gap:12px}
  .header-note{display:none}
  .header-link{display:none}   /* mobil: der grosse Pill im Hero uebernimmt, Menue hat den Link */
  .site-header .burger{margin-left:auto}
  .site-header .burger{display:block;margin:0}
  .nav-js .site-header .menu{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:6px 20px 14px;list-style:none;
    background:var(--blue);flex-direction:column;box-shadow:0 12px 30px rgb(43 20 3 / 12%)}
  body.menu-open .site-header .menu{display:flex}
  .site-header .menu a{display:block;padding:13px 0;font-size:14px;text-decoration:none;border-bottom:1px solid rgb(43 20 3 / 15%)}
}
html{scroll-padding-top:80px}

/* Steps: auf dem Handy volle Breite, ruhige Baender, grosse Pfeile */
@media (max-width:700px){
  .step__h{font-size:1.45rem;letter-spacing:.12em}
  .step__n{font-size:1.15rem}
  .step__sub--big{font-size:1.3rem}
  .step__text{font-size:1.05rem}
  .chev i{width:38px;height:19px}
  .chev--wide i{width:44px;height:22px}
  .band{padding:1.2rem 1rem 1.4rem}
  .step__duo img{aspect-ratio:4/5}
  .step__h--four{font-size:1.9rem}
}

/* Newsletter wie im alten test2 */
.newsletter{position:relative;background:var(--blue);padding:54px 7.1% 76px;border-top:1px solid rgb(43 20 3 / 20%);font-family:'DM Sans',var(--sans)}
.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:500;display:flex;align-items:center;gap:13px;margin-bottom:47px;line-height:1.5}
.eyebrow svg{color:var(--brown)}
.newsletter-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,100px)}
.newsletter h2{font-family:'Instrument Serif',var(--serif);font-weight:400;font-size:clamp(46px,5.2vw,84px);line-height:1.02;margin-bottom:25px;text-transform:none;letter-spacing:0}
.newsletter h2 em{font-style:italic;color:#96592F}
.newsletter-copy>p,.newsletter-unavailable{font-size:14px;line-height:1.85;max-width:380px}
.email-label{display:block;font-size:10px;letter-spacing:.17em;font-weight:500;margin-bottom:9px}
.email-row{display:flex;gap:10px;align-items:stretch}
.email-row input{min-width:0;width:100%;flex:1;border:1px solid #96592F;border-radius:0;background:var(--blue);color:var(--brown);font:16px 'DM Sans',sans-serif;line-height:1.5;padding:13px 12px}
.email-row input[aria-invalid="true"]{border-color:var(--brown);border-width:2px}
.signup-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;flex-shrink:0;border:1px solid var(--brown);border-radius:0;
  background:var(--brown);color:var(--blue);font:12px 'DM Sans',sans-serif;letter-spacing:.06em;padding:14px 18px;min-height:52px;cursor:pointer}
.signup-button:hover{background:#96592F;border-color:#96592F}
.signup-button:disabled{cursor:wait}
.consent-label{display:flex;align-items:flex-start;gap:11px;margin-top:22px;font-size:12px;line-height:1.65;cursor:pointer;max-width:390px}
.consent-label input{flex:0 0 19px;width:19px;height:19px;margin:1px 0 0;accent-color:var(--brown)}
.newsletter-message{min-height:3.4em;margin-top:19px;font-size:13px;line-height:1.7;max-width:440px;overflow-wrap:anywhere}
.newsletter-message[data-state="error"]{border-left:2px solid #96592F;padding-left:12px}
.newsletter-message:empty{border:0;padding:0}
.trust{font-size:11px;color:#5a4a3c;margin-top:6px}
@media (max-width:1000px){.newsletter-content{grid-template-columns:1fr;gap:35px}.newsletter-signup{max-width:580px}.newsletter h2 br{display:none}}
@media (max-width:700px){.newsletter{padding:35px 25px 30px}.eyebrow{margin-bottom:30px}.newsletter h2{font-size:44px;line-height:1.06;margin-bottom:21px}
  .email-row{flex-direction:column;gap:12px}.signup-button{justify-content:space-between;padding:14px 17px}.consent-label{font-size:11px;margin-top:20px}}

/* Footer wie im alten test2 */
.site-footer{background:var(--blue);margin:0;padding:25px 7.1% 29px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-family:'DM Sans',var(--sans);font-size:12px}
.footer-brand{font-size:26px;font-weight:700;letter-spacing:-1.5px;text-decoration:none}
.footer-link{text-decoration:none;border-bottom:1px solid rgb(43 20 3 / 35%)}
.footer-back{display:inline-flex;align-items:center;gap:14px;min-height:28px;text-decoration:none;margin-left:auto}
.footer-back:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:700px){.site-footer{padding:20px 25px;gap:15px;font-size:11px}.site-footer .footer-back{flex-basis:100%;justify-content:space-between;border-top:1px solid rgb(43 20 3 / 15%);padding-top:14px;margin-left:0}}

/* ---- Runde 2 (Jeff 18.09. 04:51): Wortmarke im Header, Video im Hero, 3 Doppel-Steps ---- */
.brand__wordmark{width:118px;height:auto;aspect-ratio:792/148.2;color:#000}
.wordmark__tag{display:block;font-family:var(--serif);font-size:clamp(.8rem,2.6vw,1.6rem);letter-spacing:.42em;text-transform:uppercase;margin:.2em 0 0 .3em;line-height:1.2}
.hero__row{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(1rem,4vw,3rem);align-items:start;margin-top:1.5rem}
.hero__video{position:relative;max-width:340px;width:100%}
.hero__video video{width:100%;height:auto;aspect-ratio:720/1560;background:var(--brown);border-radius:4px}
.hero__sound{position:absolute;left:12px;bottom:12px;background:rgba(43,20,3,.82);color:var(--blue);border:0;border-radius:999px;font:12px 'DM Sans',sans-serif;letter-spacing:.06em;padding:8px 14px;cursor:pointer}
.hero__side{position:relative;text-align:center}
.hero .hero__cta{position:static;display:inline-block;margin:.4rem 0 1rem}
.hero .hero__img{width:min(100%,640px);margin:0 auto}
@media (max-width:700px){
  .brand__wordmark{width:96px}
  .hero__row{grid-template-columns:1fr;gap:1rem}
  .hero__video{max-width:100%}
  .hero__video video{aspect-ratio:9/16;max-height:70vh;object-fit:cover}
}
.example__h{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(1.6rem,4.5vw,2.6rem);text-align:center;padding:1.2rem 0 .8rem}
.example__p{text-align:center;font-family:'DM Sans',var(--sans);font-size:.95rem;line-height:1.7;max-width:46ch;margin:0 auto;padding:1.2rem 0 1.6rem}
.band--row{display:grid;gap:.5rem;text-align:left;padding:1.3rem var(--gut)}
.band--row .step__h{font-size:clamp(1.25rem,3.4vw,2rem);letter-spacing:.14em}
.band--row .step__n{display:inline;font-size:inherit;margin-right:.6em}
.step__p{font-family:'DM Sans',var(--sans);font-size:.95rem;line-height:1.7;max-width:60ch;color:#3f2c1c}
.step__duo--white{background:var(--white);gap:0}
.step__duo--white img{aspect-ratio:auto;object-fit:contain;height:auto;align-self:end}
@media (max-width:700px){.band--row{padding:1.1rem 1rem}.band--row .step__h{font-size:1.15rem}.step__p{font-size:.88rem}}

/* ---- Runde 3 (18.09.): Conversion zuerst, Logo nur in der Nav, Burger rechts ---- */
.site-header{justify-content:space-between}
.site-header .brand{order:0}
.site-header .header-note{order:1;margin:0 auto}
.site-header .burger{order:2;display:block;margin:0}
.site-header .menu{order:3}
.nav-js .site-header .menu{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:6px 4.2% 14px;list-style:none;background:var(--blue);flex-direction:column;box-shadow:0 12px 30px rgb(43 20 3 / 12%)}
body.menu-open .site-header .menu{display:flex}
.site-header .menu a{display:block;padding:13px 0;font-size:14px;text-decoration:none;border-bottom:1px solid rgb(43 20 3 / 15%)}
.hero--slim{padding:1.6rem var(--gut) 0;text-align:center}
.wordmark__tag--h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,3.4vw,2rem);letter-spacing:.42em;text-transform:uppercase;margin:0 0 .6rem .4em}
.hero--slim .hero__img{width:min(58%,520px);margin:0 auto}
@media (max-width:700px){.hero--slim .hero__img{width:88%}}
.newsletter.newsletter{border-top:0;padding-top:34px}
.email-row input{background:#fff;border:1px solid var(--brown)}
.email-row input::placeholder{color:#8a7a6a}
.videosec{text-align:center;padding:clamp(2.5rem,7vw,5rem) var(--gut) clamp(1.5rem,4vw,3rem)}
.videosec__h{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(1.4rem,4vw,2.2rem);margin-bottom:1.4rem}
.videosec .hero__video{margin:0 auto;max-width:min(380px,88vw)}
.videosec__p{font-family:'DM Sans',var(--sans);font-size:.85rem;color:#5a4a3c;margin-top:.9rem}
.insta{background:var(--blue);padding:44px 7.1% 56px;font-family:'DM Sans',var(--sans);text-align:left}
.insta .eyebrow{margin-bottom:22px}
.insta__h{font-family:'Instrument Serif',var(--serif);font-weight:400;font-size:clamp(40px,5vw,72px);line-height:1.04;text-transform:none;letter-spacing:0;margin-bottom:22px}
.insta__h em{font-style:italic;color:#96592F}
.insta__btn{text-decoration:none;gap:12px}
@media (max-width:700px){.insta{padding:34px 25px 40px}}