@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mrs-saint-delafield.woff2) format('woff2')}
:root{
  --bg:#DDDCC8; --bg2:#E8E7D6; --cream:#F4F2E4; --brown:#55352A; --brown2:#6B4536;
  --taupe:#8A7068; --line:#C4BFAE; --green:#3F7A4F; --red:#A8483A; --plum:#6B4F6A; --butter:#EBDC9C;
  --grey1:#C4C3B8; --grey2:#B8B7AC; --grey3:#CDCCC1; --greyfg:#8F8D84;
  /* Linien-Icons: Häkchen und Kreuz */
  --ic-check-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.6'/%3E%3C/svg%3E");
  --ic-check-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F4F2E4' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.6'/%3E%3C/svg%3E");
  --ic-check-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233F7A4F' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.6'/%3E%3C/svg%3E");
  --ic-x-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A8483A' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E");
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--serif);background:var(--bg);color:var(--brown);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
h1,h2,h3{font-weight:650;letter-spacing:-.025em;line-height:1.02}
/* Apple-Look: leichte Headline, Keywords deutlich fetter, Subheadline heller und dünner */
h1,h2{font-weight:460;letter-spacing:-.04em;line-height:1.04}
span.hl{font-weight:800}
.sub-h{font-size:clamp(19px,1.8vw,25px);font-weight:320;line-height:1.4;letter-spacing:-.01em;color:var(--taupe);max-width:30em;margin-top:18px}
h1{font-size:clamp(46px,6.4vw,92px)}
h2{font-size:clamp(34px,4.4vw,60px)}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--taupe);margin-bottom:18px}
.lead{color:var(--taupe);font-size:clamp(19px,1.7vw,24px);font-weight:320;line-height:1.5;letter-spacing:-.01em;max-width:30em}

/* logo */
.logo{display:inline-flex;align-items:baseline;font-weight:800;font-size:42px;letter-spacing:-.04em;line-height:1;color:var(--brown);transition:transform .35s,opacity .35s}
.logo i{display:inline-block;position:relative;width:.82em;height:.82em;background:var(--brown);margin-right:.03em;top:.02em}
.logo i::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--bg)}
.logo:hover{transform:scale(1.04);opacity:.88}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#84594A 0%,#6B4536 48%,#4E2F24 100%);color:var(--cream);padding:17px 30px;font-weight:600;font-size:18px;border-radius:12px;border:1px solid rgba(244,242,228,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px -10px rgba(85,53,42,.65);transition:filter .3s,transform .3s,box-shadow .3s,background-color .3s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 26px -10px rgba(85,53,42,.7)}
/* offener Dreieck-Pfeil (Chevron) */
.arr{display:inline-block;flex:none;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform .3s}
.btn:hover .arr{transform:translateX(4px) rotate(45deg)}
/* helle Variante (Creme/Beige): nur auf dunklem Hintergrund einsetzen (class="btn light") */
.btn.light{background:linear-gradient(180deg,#FCFBF3 0%,#F2EFDE 55%,#E5E1CA 100%);color:var(--brown);border:1px solid rgba(85,53,42,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 20px -12px rgba(30,18,14,.5)}
.btn.light:hover{filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 26px -12px rgba(30,18,14,.55)}



/* 1 announcement */
.announce{background:var(--brown);color:var(--cream);border-bottom:1px solid rgba(244,242,228,.12)}
.announce .in{display:flex;justify-content:center;align-items:center;gap:10px;height:40px;padding:0 20px;font-size:14px;letter-spacing:.01em;white-space:nowrap}
.announce svg{flex:none;transition:transform .3s}
.announce .short{display:none}
.announce u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-underline-offset .25s;font-weight:600}
.announce .arr{opacity:.7;width:7px;height:7px;transition:transform .3s,opacity .3s}
.announce .in:hover svg{transform:rotate(-10deg) scale(1.08)}
.announce .in:hover u{text-underline-offset:6px}
.announce .in:hover .arr{transform:translateX(4px) rotate(45deg);opacity:1}

/* 2 header */
header{position:sticky;top:0;z-index:50;background:var(--bg);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
header.scrolled{background:rgba(221,220,200,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(85,53,42,.12)}
.hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.nav{display:flex;gap:38px}
.nav.l{justify-content:flex-end;padding-right:56px}
.nav.r{justify-content:flex-start;padding-left:56px}
.nav a{position:relative;font-size:17px;font-weight:500;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--brown);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:44px;height:44px;margin-right:-11px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:0;transition:background .25s}
.burger:hover{background:rgba(85,53,42,.08)}
.burger span{display:block;width:22px;height:2px;border-radius:0;background:var(--brown)}

/* mobile panel */
.overlay{position:fixed;inset:0;background:rgba(30,18,14,.55);opacity:0;pointer-events:none;transition:opacity .35s;z-index:80}
.panel{position:fixed;top:0;right:0;height:100%;width:80%;max-width:380px;background:var(--bg);z-index:90;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);padding:0 24px 24px;display:flex;flex-direction:column}
body.menu .overlay{opacity:1;pointer-events:auto}
body.menu .panel{transform:none}
.panel .top{display:flex;justify-content:space-between;align-items:center;height:64px;margin-bottom:28px}
.panel .x{width:44px;height:44px;margin-right:-11px;border-radius:0;display:grid;place-items:center;transition:background .25s}
.panel .x:hover{background:rgba(85,53,42,.08)}
.panel nav a{display:block;font-size:30px;font-weight:650;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line)}
.panel .trust{margin-top:28px;color:var(--taupe);font-size:15px;line-height:1.6}
.panel .btn{margin-top:auto;justify-content:center}

/* 3 hero */
.hero{padding:72px 0 90px}
.hero .g{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin-bottom:28px}
.hero .lead{margin-bottom:38px}
.founders{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:48px;font-size:15px;color:var(--taupe)}
.sigs{display:flex;align-items:flex-end;gap:34px}
.sig{font-family:'Mrs Saint Delafield','Snell Roundhand','Brush Script MT',cursive;font-size:38px;line-height:.9;color:var(--brown);padding:0 6px 4px;border-bottom:1px solid var(--taupe);white-space:nowrap;transform:rotate(-3deg);transform-origin:left bottom}
.sig.s2{transform:rotate(-1.5deg);margin-bottom:-4px}
.founders b{color:var(--brown);display:block;font-weight:650;font-size:16px}

/* 4 divider */
.divider{height:56px;background:linear-gradient(90deg,rgba(85,53,42,.34),rgba(85,53,42,.08) 55%,transparent 85%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent);filter:blur(2px)}

/* Stempel-Details: versetzte Stempel-Unterstreichung + rundes Siegel */
/* runder Stempelabdruck, leicht versetzt hinter einem Keyword */
.stk{--st:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%2355352A' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='56' stroke-width='4'/%3E%3Ccircle cx='60' cy='60' r='48' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='60' r='32' stroke-width='1.5' stroke-dasharray='3 4'/%3E%3Cpath d='M44 61l11 11 21-24' stroke-width='6'/%3E%3C/svg%3E");position:relative;z-index:0;white-space:nowrap}
.stk.star{--st:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%2355352A' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='56' stroke-width='4'/%3E%3Ccircle cx='60' cy='60' r='48' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='60' r='32' stroke-width='1.5' stroke-dasharray='3 4'/%3E%3Cpath d='M60 40l6.2 12.6 13.9 2-10 9.8 2.4 13.8L60 71.600 47.500 78.200l2.400-13.800-10-9.800 13.900-2z' stroke-width='3.500'/%3E%3C/svg%3E")}
.stk::after{content:"";position:absolute;z-index:-1;width:1.4em;height:1.4em;right:-.62em;top:-.5em;background:var(--st) center/contain no-repeat;opacity:.5;mix-blend-mode:multiply;filter:url(#ink2);transform:rotate(-14deg)}
.hero .stk::after{animation:stampIn .6s cubic-bezier(.2,1.5,.35,1) .5s both}
@keyframes stampIn{from{opacity:0;transform:rotate(-14deg) scale(1.7)}to{opacity:.5;transform:rotate(-14deg) scale(1)}}
.stepimg{position:relative}
.steps,.story{overflow-x:clip}
.seal{position:absolute;right:-30px;bottom:-34px;width:150px;height:150px;mix-blend-mode:multiply;opacity:0;transform:rotate(-12deg) scale(1.45);transition:opacity .35s,transform .6s cubic-bezier(.2,1.5,.35,1) .25s}
.seal.in{opacity:.9;transform:rotate(-12deg) scale(1)}

/* Word-Reveal */
.rt-sec{position:relative;height:170vh}
.rt-stick{position:sticky;top:0;height:76vh;min-height:420px;display:flex;align-items:center;padding-top:76px;box-sizing:border-box}
.rt-sec .eyebrow{margin-bottom:28px}
.rt{font-size:clamp(28px,4.2vw,64px);font-weight:460;line-height:1.08;letter-spacing:-.04em;text-align:left;max-width:15.5em}
.rt .w{display:inline;transition:opacity .2s linear}
.js .rt .w{opacity:.14}
.rt .w.hl{font-weight:800}

.result{padding:30px 0 110px;text-align:center}
.result h2{margin-bottom:48px}
.rg{display:grid;grid-template-columns:1fr;gap:24px;max-width:760px;margin:0 auto}
.rc{background:var(--brown);color:var(--cream);padding:44px 36px 40px;display:grid;grid-template-columns:64px 1fr;column-gap:28px;align-items:start;text-align:left;box-shadow:0 30px 50px -30px rgba(30,18,14,.6)}
.rc .rk{width:64px;height:64px;display:grid;place-items:center;background:rgba(244,242,228,.12);color:var(--cream);font-size:40px;font-weight:400;line-height:1;grid-row:1/span 2;grid-column:1}
.rc h3,.rc p{grid-column:2}
.rc h3{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:700;margin-bottom:12px}
.rc p{color:rgba(244,242,228,.82);font-size:18px;line-height:1.55;font-weight:320;max-width:26em}
.rc p b{font-weight:700;color:var(--cream)}
.rcta{margin-top:40px;text-align:center}
.rg .reveal:nth-child(2){transition-delay:.12s}
@media(max-width:960px){.result{padding:20px 0 70px}.rc{padding:28px 22px;column-gap:18px;grid-template-columns:52px 1fr}.rc .rk{width:52px;height:52px;font-size:32px}}
section{position:relative}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* 6/7 marquee + statement */
.lifestyle{position:relative;padding:60px 0;overflow:hidden;background:var(--bg2)}
.rows{display:flex;flex-direction:column;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;width:max-content;animation:mqL 70s linear infinite}
.track.rev{animation-name:mqR;animation-duration:80s}
@keyframes mqL{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes mqR{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.statement{position:absolute;inset:0;display:grid;place-items:center;padding:24px;pointer-events:none}
.statement .sc{pointer-events:auto;max-width:760px;background:rgba(85,53,42,.84);backdrop-filter:blur(3px);color:var(--cream);text-align:center;padding:64px 56px;border-radius:0;box-shadow:0 40px 80px -30px rgba(30,18,14,.7)}
.statement .eyebrow{color:rgba(244,242,228,.65);margin-bottom:20px}
.statement p.q1{font-size:clamp(28px,3.6vw,48px);line-height:1.12;font-weight:500;letter-spacing:-.02em;font-style:italic}

/* 10 pricing */
.pricing{padding:110px 0;background:var(--bg2)}
.pricing .head{text-align:center;max-width:640px;margin:0 auto 64px}
.pricing .head p.s{margin:18px auto 0}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center}
.pc{background:var(--cream);border-radius:0;padding:40px 34px;display:flex;flex-direction:column;gap:22px;border:1px solid var(--line)}
.pc h3{font-size:28px}
.pc .d{color:var(--taupe);font-size:16px;margin-top:-12px}
.price{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1}
.price small{font-size:17px;color:var(--taupe);font-weight:500;letter-spacing:0}
.pc ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:17px}
.pc li{display:flex;gap:12px}.pc li::before{content:"";flex:none;width:18px;height:18px;margin-top:5px;background:var(--ic-check-g) center/contain no-repeat}
.pc .btn{justify-content:center;margin-top:auto}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.pc.hl{position:relative;padding:54px 38px;border:0;background:var(--cream);box-shadow:0 40px 70px -34px rgba(85,53,42,.6),0 0 60px rgba(235,220,156,.5);z-index:1}
.pc.hl::before{content:"";position:absolute;inset:0;border-radius:0;padding:2.5px;background:conic-gradient(from var(--a),var(--brown),var(--butter),var(--plum),var(--butter),var(--brown));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 9s linear infinite;pointer-events:none}
@keyframes spin{to{--a:360deg}}
.pop{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--brown);color:var(--cream);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:8px 18px;border-radius:0;white-space:nowrap}
.note{text-align:center;margin-top:34px;font-size:14px;color:var(--taupe)}

/* 11 faq */
.faq{padding:120px 0 90px}
.faq .g{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}
.faq .fh{position:sticky;top:120px;align-self:start}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.015em;padding:30px 0;line-height:1.2}
.q .pm{flex:none;font-size:30px;font-weight:300;width:34px;text-align:center;transition:transform .35s}
.q.open .pm{transform:rotate(180deg)}
.ans{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.ans>div{overflow:hidden}
.ans p{color:var(--taupe);padding-bottom:32px;max-width:36em}
.q.open .ans{grid-template-rows:1fr;opacity:1}
.more{margin-top:70px;text-align:left}
.more h3{font-size:34px;margin-bottom:8px}.more p{color:var(--taupe);margin-bottom:26px}

/* 12 footer */
footer{background:var(--brown);color:var(--cream);padding:34px 0 0;overflow:hidden}
.fg{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:60px}
.fg p{max-width:20em;opacity:.7;font-size:17px;margin-top:18px}
.fg h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:18px;font-weight:600}
.fg a{display:block;padding:5px 0;font-size:18px;opacity:.92;transition:opacity .25s,transform .25s}
.fg a:hover{opacity:1;transform:translateX(4px)}
.fb{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;font-size:15px;opacity:.78}
.fl{display:flex;gap:6px 28px;flex-wrap:wrap}
@media(min-width:961px){.fb{justify-content:center;gap:28px}}
.fb a{transition:opacity .25s}.fb a:hover{opacity:.7}
.fdiv{height:1px;margin:22px 0 22px;background:linear-gradient(90deg,transparent,rgba(244,242,228,.4) 14%,rgba(244,242,228,.4) 86%,transparent);position:relative}
.fnote{font-size:15px;opacity:.78;text-align:center}
/* großer Brand-Schriftzug: unten abgeschnitten und ausfadend */
.gw{height:22vw;margin-top:48px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 38%,rgba(0,0,0,.08) 100%);mask-image:linear-gradient(to bottom,#000 0,#000 38%,rgba(0,0,0,.08) 100%)}
.giant{font-size:36vw;font-weight:800;letter-spacing:-.05em;line-height:1;text-align:center;white-space:nowrap;color:var(--cream);user-select:none;margin-top:-2vw}

/* responsive */
@media(max-width:960px){
  body{font-size:17px}
  .announce .in{height:36px;font-size:13px;gap:8px;padding:0 16px}
  .announce .long{display:none}.announce .short{display:inline}
  .nav{display:none}
  .hd{display:flex;justify-content:space-between;height:64px}
  .burger{display:flex}
  .logo{font-size:36px}
  .hero{padding:40px 0 60px}
  .hero .g,.faq .g{grid-template-columns:1fr;gap:40px}
  .hero .lead{margin-bottom:28px}
  .founders{margin-top:32px}
  .faq{padding:70px 0}
  .track{animation-duration:140s}.track.rev{animation-duration:160s}
  .track img{width:140px;height:200px;margin-right:12px}
  .lifestyle{padding:30px 0;min-height:640px}
  .rows{gap:12px}
  .statement .sc{padding:40px 26px}
  .pricing{padding:70px 0}
  .pg{grid-template-columns:1fr}
  .pc.hl{order:-1}
  .faq .fh{position:static}
  .fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
