@font-face{font-family:"Nothing You Could Do";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nothing-you-could-do-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
/* Edel, hell & warm. Mobile first: Handy -> iPad (768+) -> Desktop (1024+) */
html{scroll-behavior:smooth}
body{margin:0;background:#F6F1EA;color:#231C17;font-family:"Hanken Grotesk",-apple-system,"Helvetica Neue",sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:#231C17;-webkit-tap-highlight-color:transparent}
a:hover{color:#80612A}
button{-webkit-tap-highlight-color:transparent}
section[id]{scroll-margin-top:62px}
.wrap{max-width:1240px;margin:0 auto;padding-left:20px;padding-right:20px;box-sizing:border-box}
.hand{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#80612A;margin:0;line-height:1.6}
.h1{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:clamp(40px,9.4vw,100px);line-height:1.22;letter-spacing:0;margin:0}
.h2{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:clamp(32px,6vw,64px);line-height:1.25;letter-spacing:0;margin:0;text-wrap:balance}
.h1 em,.h2 em,.card-h em,.stmt em{font-style:normal;color:#80612A}
.lead{font-size:clamp(16px,2vw,18px);line-height:1.65;color:#6F6358;margin:0;max-width:560px}
.sec-head{display:flex;flex-direction:column;gap:16px}
.btn{text-decoration:none;background:#231C17;color:#F6F1EA;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:0 30px;border-radius:999px;min-height:52px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;transition:background-color .4s}
.btn:hover{color:#F6F1EA;background:#4A3B2F}
.ul-link{text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(#231C17,#231C17) 0 calc(100% - 11px) / 100% 1px no-repeat;transition:background-size .6s cubic-bezier(.19,1,.22,1)}
.ul-link:hover{color:#231C17;background-size:0 1px;background-position:100% calc(100% - 11px)}

/* Header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(246,241,234,.84);-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);border-bottom:1px solid rgba(35,28,23,.07)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.dnav{display:none}
.dnav .nl{text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:transparent;border:0;color:#231C17;cursor:pointer}
.mnav-wrap{position:absolute;left:0;right:0;top:100%;height:calc(100svh - 60px);max-height:900px;background:#F6F1EA;overflow:auto;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:8px 20px calc(28px + env(safe-area-inset-bottom,0px));box-sizing:border-box;border-top:1px solid rgba(35,28,23,.07)}
.mnav{display:flex;flex-direction:column;padding:8px 0 0}
.mnav a{text-decoration:none;font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:36px;line-height:1.3;padding:6px 0;min-height:44px}
.mnav-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;border-top:1px solid #DDD1C2;padding-top:20px;font-size:14px}
.mnav-foot a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.mnav-logo{width:180px;height:auto;display:block}
.btn,.send,.rev,.offer,.hl,.linkbtn{-webkit-tap-highlight-color:transparent}
.btn:active,.send:active{transform:scale(.96)}
.btn,.send{transition:background-color .4s,transform .25s cubic-bezier(.19,1,.22,1)}
.rev:active{transform:scale(.98)}

/* Highlights (Story-Kreise) */
.hl-sec{padding:30px 0 6px}
.hl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 20px 14px}
.hl-row{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 10px;scrollbar-width:none}
.hl-row::-webkit-scrollbar{display:none}
.hl{flex:0 0 auto;width:82px;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;font:inherit;color:#231C17;cursor:pointer}
.hl-ring{position:relative;width:78px;height:78px;border-radius:50%;padding:3px;box-sizing:border-box;display:block;transition:transform .3s cubic-bezier(.19,1,.22,1)}
.hl-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,#B4874A,#EBC8A0,#8C6447,#D9A57A,#B4874A)}
.hl-img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid #F6F1EA;box-sizing:border-box;background:#E8DED1}
.hl-img img{width:100%;height:100%;object-fit:cover;display:block}
.hl-label{font-size:12px;font-weight:500;white-space:nowrap}
.hl:active .hl-ring{transform:scale(.92)}
.hl:focus-visible{outline:2px solid #80612A;outline-offset:4px;border-radius:12px}

/* Story-Viewer */
.sv{position:fixed;inset:0;z-index:95;background:#0E0B09;display:flex;align-items:center;justify-content:center}
.story-frame{position:relative;width:100%;height:100%;max-width:480px;overflow:hidden;background:#1A1512;color:#FFFFFF}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.slide.on{opacity:1}
.slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.story-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 52%,rgba(0,0,0,.72) 100%);pointer-events:none}
.story-cap{position:absolute;left:0;right:0;bottom:0;padding:0 22px calc(38px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;pointer-events:none}
.story-cap .eyebrow{color:#F2D9BC}
.story-cap-t{margin:0;font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:30px;line-height:1.3;color:#FFFFFF}
.tz{position:absolute;top:0;bottom:0;z-index:3;border:0;background:transparent;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tz-l{left:0;width:34%}
.tz-r{right:0;width:66%}
.story-top{position:absolute;left:0;right:0;top:0;z-index:4;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.bars{display:flex;gap:4px}
.bar{flex:1 1 0;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.bar-fill{display:block;height:100%;width:100%;background:#FFFFFF;transform-origin:0 50%;transform:scaleX(0)}
.bar.done .bar-fill,.bar.cur .bar-fill{transform:none}
.story-head{display:flex;align-items:center;gap:10px}
.sh-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1.5px solid rgba(255,255,255,.85)}
.sh-av img{width:100%;height:100%;object-fit:cover;display:block}
.sh-name{display:flex;flex-direction:column;font-size:14px;font-weight:600;line-height:1.25}
.sh-name small{font-size:12px;font-weight:400;opacity:.85}
.story-x{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:6px;z-index:6;width:44px;height:44px;border:0;background:transparent;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.story-end{position:absolute;inset:0;z-index:5;background:#F6F1EA;color:#231C17;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:40px 28px}
.story-end .story-x{color:#231C17}
.end-logo{width:210px;max-width:70%;height:auto}
.end-actions{display:flex;flex-direction:column;align-items:center;gap:6px}


.prog{display:none}
.logo{height:40px;width:auto;display:block}
.sig{width:clamp(250px,72vw,360px);height:auto;display:block;margin-top:4px;color:#231C17;overflow:visible}
.giant-logo{width:min(100%,860px)}
.giant-logo img{width:100%;height:auto;display:block}
/* Großes Logo unten: wird am Seitenende Strich für Strich gemalt (siehe main.js) */
.giant-logo svg{width:100%;height:auto;display:block;overflow:visible}
.write,.write-s{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
/* Unterschrift „Euer Tobi“: schreibt sich in einem Zug, sobald sie ins Bild kommt (per JavaScript ausgelöst) */
.schrift-js .write-s{-webkit-mask-position:100% 0;mask-position:100% 0}
.schrift-js .write-s.an{animation:schreiben 1.9s cubic-bezier(.45,.05,.55,.95) .15s both}
@keyframes schreiben{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}

/* Hero */
.hero-stage{position:relative}
.hero-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0 auto;padding-top:0;padding-bottom:40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.hero-txt .eyebrow{color:#F3E4D0}
.hero-txt .h1{color:#FFFFFF;font-size:clamp(42px,11.5vw,104px);text-shadow:0 2px 28px rgba(0,0,0,.22)}
.hero-txt .h1 em{color:#F0CFA4}
.hero-txt .btn{background:#F6F1EA;color:#231C17}
.hero-txt .btn:hover{background:#FFFFFF;color:#231C17}
.hero-txt .ul-link{color:#FFFFFF;background-image:linear-gradient(#FFFFFF,#FFFFFF)}
.hero-intro{padding-top:36px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-intro .lead{max-width:640px}
.hero-intro .hero-meta{justify-content:center;gap:6px 28px;padding-top:22px}
.ln{display:block;overflow:hidden;padding:.08em .25em .2em;margin:-.08em -.25em -.2em}
.ln-i{display:block}
.cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 30px}
.wrap.hero-media-wrap{padding:0;max-width:none;overflow:hidden;transform-origin:50% 0}
.hero-media{position:relative;overflow:hidden;height:calc(100svh - 60px);min-height:560px;max-height:1100px;background:#2A211B}
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(20,15,11,.82) 0%,rgba(20,15,11,.5) 30%,rgba(20,15,11,0) 58%)}
.hero-par{position:absolute;left:0;right:0;top:-6%;bottom:-6%}
.hero-par img{width:100%;height:100%;object-fit:cover;object-position:47% 40%;display:block}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:16px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#6F6358}

/* Locations */
.mq-sec{border-top:1px solid #DDD1C2;border-bottom:1px solid #DDD1C2;overflow:hidden;padding:20px 0;margin-top:80px}
.mq{display:flex;width:max-content;font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:clamp(22px,3.4vw,34px);color:#6F6358;white-space:nowrap}
.mq span{padding-right:.6em}

/* Statement */
.stmt-sec{padding-top:120px;padding-bottom:110px;display:flex;flex-direction:column;gap:28px}
.stmt{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:clamp(28px,5.6vw,60px);line-height:1.38;letter-spacing:0;margin:0}
.fill{display:block;width:fit-content;max-width:100%}

/* Stapel */
.stack-head{padding-top:24px;padding-bottom:48px}
.stack{display:flex;flex-direction:column;gap:64px;padding-bottom:150px}
.card{position:sticky;background:#FBF8F3;border-radius:20px;padding:10px;box-shadow:0 -24px 60px -30px rgba(70,46,24,.32);display:flex;flex-direction:column;transform-origin:50% 0}
.c0{top:76px}.c1{top:88px}.c2{top:100px}.c3{top:112px}
.card-media{position:relative;overflow:hidden;aspect-ratio:1 / 1;max-width:100%;border-radius:12px;background:#E8DED1}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-txt{padding:22px 10px 14px;display:flex;flex-direction:column;gap:10px}
.card-h{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:26px;line-height:1.3;margin:0;text-wrap:balance}
.card-p{margin:0;font-size:15px;line-height:1.6;color:#6F6358}

/* Rezensionen */
.rev-sec{background:#FBF8F3;padding-top:110px;padding-bottom:110px;display:flex;flex-direction:column;gap:56px}
.rev-top{display:flex;flex-direction:column;gap:28px}
.score{display:flex;align-items:center;gap:18px}
.score-n{font-family:"Nothing You Could Do","Segoe Script",cursive;font-size:clamp(72px,16vw,112px);line-height:1}
.score-meta{display:flex;flex-direction:column;gap:8px}
.stars{display:inline-flex;gap:3px;color:#B4874A}
.stars svg{width:18px;height:18px;display:block}
.score-src{font-size:14px;line-height:1.5;color:#4E443B}
.hero-rating{text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.hero-rating .stars svg{width:13px;height:13px}
.feat{display:flex;flex-direction:column;gap:28px}
.feat-media{position:relative;overflow:hidden;aspect-ratio:4 / 5;max-width:100%;border-radius:14px;background:#E8DED1}
.feat-txt{display:flex;flex-direction:column;gap:18px}
.feat-q{margin:0;font-family:"Nothing You Could Do","Segoe Script",cursive;font-size:clamp(26px,4.4vw,40px);line-height:1.42}
.feat-by{margin:0;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#6F6358}
.linkbtn{font:inherit;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#231C17;background:linear-gradient(#231C17,#231C17) 0 calc(100% - 11px) / 100% 1px no-repeat;border:0;padding:0;min-height:44px;cursor:pointer;align-self:flex-start;transition:background-size .6s cubic-bezier(.19,1,.22,1)}
.linkbtn:hover{background-size:0 1px;background-position:100% calc(100% - 11px)}
.rev-rows{display:flex;flex-direction:column;gap:14px}
.rev-rail{position:relative}
.revs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 20px 10px;scroll-padding:0 20px;scrollbar-width:none}
.revs::-webkit-scrollbar{display:none}
.rev{flex:0 0 82%;scroll-snap-align:start;margin:0;font:inherit;color:#231C17;text-align:left;cursor:pointer;background:#F6F1EA;border:1px solid #E7DDD0;border-radius:6px;padding:24px 22px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box;min-height:290px;transition:border-color .3s,transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s}
.rev:hover{border-color:#CDBFAE;transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(70,46,24,.35)}
.rev:focus-visible{outline:2px solid #80612A;outline-offset:2px}
.rev .stars svg{width:14px;height:14px}
.rev-q{font-family:"Nothing You Could Do","Segoe Script",cursive;font-size:21px;line-height:1.45}
.rev-by{display:flex;align-items:center;gap:12px;margin-top:auto}
.av{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#231C17;color:#F6F1EA;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.rev-name{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:600}
.rev-name small{font-size:12px;font-weight:400;color:#6F6358}
.rev-more{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#80612A}
.dup{display:none !important}
.swipe-hint{font-size:12px;color:#6F6358;padding:0 20px}
.rev-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.modal-bg{position:absolute;inset:0;border:0;padding:0;margin:0;background:rgba(35,28,23,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
.modal-card{position:relative;width:100%;max-height:86vh;overflow:auto;background:#FBF8F3;border-radius:16px 16px 0 0;padding:34px 22px calc(32px + env(safe-area-inset-bottom,0px));box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
.modal-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;color:#231C17;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.modal-x:hover{background:#EDE4D8}
.modal-h{margin:0;font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:32px;line-height:1.3;padding-right:44px}
.modal-meta{margin:0;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#6F6358}
.modal-text{margin:0;font-size:17px;line-height:1.75;white-space:pre-line}

/* Foto & Film */
.film-head{padding-top:110px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.film-stage{display:flex;justify-content:center;padding-top:56px}
.film{position:relative;overflow:hidden;width:100%;aspect-ratio:4 / 5;max-width:100%;background:#E8DED1}
.film img,.film video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.film-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-top:20px}
.film video{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.film video.on{opacity:1}
.film-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ft{font:inherit;background:transparent;border:1px solid #DDD1C2;border-radius:999px;padding:8px 18px 9px;min-height:44px;display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;cursor:pointer;color:#6F6358;text-align:left;transition:background-color .4s,color .4s,border-color .4s}
.ft:hover{border-color:#B9AC9B}
.ft.sel{background:#231C17;border-color:#231C17;color:#F6F1EA}
.ft-name{font-family:"Nothing You Could Do","Segoe Script",cursive;font-size:19px;line-height:1.3}
.ft-place{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-decoration:none;display:inline-flex;align-items:center;gap:14px;background:rgba(251,248,243,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;padding:8px 24px 8px 8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#231C17;white-space:nowrap}
.play:hover{color:#231C17}
.play-dot{width:44px;height:44px;border-radius:50%;background:#231C17;color:#F6F1EA;display:inline-flex;align-items:center;justify-content:center}
.offers{display:flex;flex-direction:column;padding-top:56px;padding-bottom:130px}
.offer{text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;border-top:1px solid #DDD1C2;padding:26px 0}
.offer:last-child{border-bottom:1px solid #DDD1C2}
.offer:hover{color:#231C17}
.offer-h{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:28px;line-height:1.2;margin:0}
.offer-p{grid-column:1 / -1;margin:0;font-size:15px;line-height:1.6;color:#6F6358}
.arrow{font-size:20px;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.offer:hover .arrow,.story:hover .arrow{transform:translateX(10px)}

/* Kapitel */
.chap-list{display:flex;flex-direction:column;gap:22px;padding-top:24px;padding-bottom:120px}
.chap-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:14px}
.paar{margin:0;font-size:13px;line-height:1.6;color:#4E443B}
.stack{padding-bottom:90px !important}
.film-sec{background:#1F1915;color:#F6F1EA}
.film-sec .eyebrow{color:#D9B98F}
.film-sec .h2{color:#F6F1EA}
.film-sec .h2 em{color:#E3BE90}
.film-sec .lead{color:#CFC4B6}
.film-sec .film{background:#2A221C}
.film-sec .ft{border-color:rgba(246,241,234,.24);color:#CFC4B6}
.film-sec .ft:hover{border-color:rgba(246,241,234,.55)}
.film-sec .ft.sel{background:#F6F1EA;border-color:#F6F1EA;color:#231C17}
.film-sec .linkbtn,.film-sec .ul-link{color:#F6F1EA;background-image:linear-gradient(#F6F1EA,#F6F1EA)}
.film-sec .linkbtn:hover,.film-sec .ul-link:hover{color:#F6F1EA}
.film-sec .btn{background:#F6F1EA;color:#231C17}
.film-sec .btn:hover{background:#FFFFFF;color:#231C17}
.film-sec .stories{border-top-color:rgba(246,241,234,.16)}
.film-sec .stories li{border-bottom-color:rgba(246,241,234,.16)}
.film-sec .story-n{color:#F6F1EA}
.film-sec .story-p{color:#BFB3A4}
.film-sec .chap-list{padding-top:64px}

/* Über mich */
.about{display:flex;flex-direction:column;gap:36px;padding-top:120px;padding-bottom:120px}
.about-media{position:relative;overflow:hidden;aspect-ratio:2 / 3;max-width:100%;border-radius:14px;background:#E8DED1}
/* Foto von Tobi im Ganzen zeigen (von Kopf bis Schuh): kein Beschnitt durch den Parallax-Effekt */
.about-media .par-in{top:0;bottom:0;animation:none!important;transform:none!important}
.par-in{position:absolute;left:0;right:0;top:-7%;bottom:-7%}
.par-in img{width:100%;height:100%;object-fit:cover;display:block}
.about-txt{display:flex;flex-direction:column;gap:20px}
.about-kopf{display:flex;flex-direction:column;gap:20px}
.about-txt p{margin:0;font-size:17px;line-height:1.7}

/* Echte Hochzeiten */
.stories-sec{background:#FBF8F3}
.stories-in{padding-top:110px;padding-bottom:110px;display:flex;flex-direction:column;gap:40px}
.stories{list-style:none;margin:0;padding:0;border-top:1px solid #DDD1C2}
.stories li{border-bottom:1px solid #DDD1C2}
.story{text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:20px 0;transition:padding-left .6s cubic-bezier(.19,1,.22,1)}
.story:hover{color:#231C17}
.story-n{font-family:"Nothing You Could Do","Segoe Script",cursive;font-size:26px;line-height:1.3;margin:0;font-weight:400}
.story-k{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#80612A}
.story-p{grid-column:1 / -1;font-size:14px;line-height:1.5;color:#6F6358}
.story .arrow{display:none}

/* Leistungen & Preise */
.incl-sec{padding-top:120px;padding-bottom:120px;display:flex;flex-direction:column;gap:48px}
.incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.incl li{display:flex;gap:14px;align-items:baseline;border-top:1px solid #DDD1C2;padding:18px 0;font-size:17px;line-height:1.5}
.dot{flex:0 0 7px;height:7px;border-radius:50%;background:#80612A;transform:translateY(-2px)}
.price{background:#231C17;color:#F6F1EA;border-radius:14px;padding:34px 26px;display:flex;flex-direction:column;gap:18px;box-sizing:border-box}
.price p{margin:0;font-size:16px;line-height:1.7;color:#DCD2C5}
.price .eyebrow{color:#D9B98F}
.btn-light{background:#F6F1EA;color:#231C17;align-self:flex-start}
.btn-light:hover{background:#FFFFFF;color:#231C17}

/* Ablauf */
.steps-sec{background:#EDE4D8}
.steps-in{padding-top:110px;padding-bottom:110px;display:flex;flex-direction:column;gap:48px}
.steps-l{display:flex;flex-direction:column;gap:16px}
#preise{scroll-margin-top:90px}
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr}
.steps li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px 12px;padding:22px 0}
.draw{position:absolute;left:0;right:0;top:0;height:1px;background:#231C17;transform-origin:0 50%}
.num{font-family:"Nothing You Could Do","Segoe Script",cursive;font-size:30px;line-height:1.1;color:#80612A;grid-row:span 2}
.steps h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.steps p{margin:0;font-size:15px;line-height:1.6;color:#6F6358}

/* FAQ */
.faq-sec{padding-top:120px;padding-bottom:120px;display:flex;flex-direction:column;gap:40px}
.faq-list{border-top:1px solid #DDD1C2}
.faq-list details{border-bottom:1px solid #DDD1C2}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:2px solid #80612A;outline-offset:4px}
.q{margin:0;font-size:17px;font-weight:500;line-height:1.45}
.plus{flex:0 0 22px;height:22px;position:relative}
.plus::before,.plus::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:1.5px;background:#231C17;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0deg)}
.ans{margin:0;padding:0 0 24px;font-size:16px;line-height:1.7;color:#4E443B;max-width:720px}

/* Regionen */
.reg-sec{background:#F3EDE4}
.reg-in{padding-top:72px;padding-bottom:8px;display:flex;flex-direction:column;gap:18px}
.reg-h{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:clamp(26px,3.6vw,36px);line-height:1.3;margin:0;text-wrap:balance}
.reg-h em{font-style:normal;color:#80612A}
.reg-txt{display:flex;flex-direction:column;gap:18px;max-width:780px}
.reg-txt p{margin:0;font-size:15px;line-height:1.7;color:#4E443B}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chip{font-size:12px;font-weight:500;border:1px solid #CDBFAE;border-radius:999px;padding:8px 14px}

/* Kontakt */
.contact-sec{padding-top:120px;padding-bottom:120px;background:#EDE4D8}
.contact-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.hint{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:#4E443B;background:#FBF8F3;border:1px solid #E1D6C8;border-radius:999px;padding:10px 18px}
.contact{display:flex;flex-direction:column;gap:36px;padding-top:56px}
.contact-media{display:none}
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#4E443B}
.field input,.field select,.field textarea{font:inherit;letter-spacing:0;text-transform:none;font-size:17px;font-weight:400;color:#231C17;background:#FBF8F3;border:1px solid #E1D6C8;border-radius:4px;padding:15px 16px;width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;min-height:54px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#231C17;background:#FFFFFF}
.wahl{border:0;margin:0;padding:0;min-width:0;display:block}
.wahl legend{padding:0;margin:0 0 8px;float:left;width:100%}
.wahl-reihe{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wahl-o{position:relative;display:block;cursor:pointer}
.form .wahl-o input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.wahl-o span{display:flex;align-items:center;justify-content:center;text-align:center;height:100%;min-height:54px;padding:8px 10px;box-sizing:border-box;border:1px solid #E1D6C8;border-radius:4px;background:#FBF8F3;font-size:16px;letter-spacing:0;text-transform:none;font-weight:400;line-height:1.25;color:#231C17;-webkit-hyphens:manual;hyphens:manual;transition:background-color .2s,border-color .2s,color .2s}
.wahl-o:hover span{border-color:#B9A78F}
.wahl-o input:checked + span{background:#231C17;border-color:#231C17;color:#F6F1EA}
.wahl-o input:focus-visible + span{outline:2px solid #80612A;outline-offset:2px}
.send{font:inherit;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;background:#231C17;color:#F6F1EA;border:0;border-radius:999px;padding:0 36px;min-height:56px;cursor:pointer;width:100%;transition:background-color .4s}
.send:hover{background:#4A3B2F}
.small{font-size:13px;line-height:1.6;color:#6F6358;margin:0}

/* Footer */
.foot{background:#F3EDE4}
.foot-in{padding-top:56px;padding-bottom:120px;display:flex;flex-direction:column;gap:32px}
.foot-row{display:flex;flex-direction:column;gap:12px;border-top:1px solid #D3C5B3;padding-top:20px;font-size:14px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 24px}
.foot-orte{margin:-16px 0 0;font-size:12px;line-height:1.6;color:#6F6358}
.foot-links a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}

/* Schwebender Button (Handy & iPad) */
.fab{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));text-decoration:none;background:rgba(35,28,23,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#F6F1EA;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:0 28px;border-radius:999px;white-space:nowrap;box-shadow:0 12px 32px rgba(35,28,23,.25);min-height:52px;box-sizing:border-box;display:inline-flex;align-items:center}
.fab:hover{color:#F6F1EA}
.fab.fab-off{opacity:0;visibility:hidden;pointer-events:none}
.fab{transition:opacity .4s ease,visibility .4s ease}

/* Handy: Startbild im Vollbild */
@media (max-width:767px){
}

/* iPad-Anordnung – gilt auch auf dem Handy (Größen fürs Handy weiter unten) */
@media (min-width:0px){
  .wrap{padding-left:32px;padding-right:32px}
  .stack{gap:96px}
  .c0{top:88px}.c1{top:104px}.c2{top:120px}.c3{top:136px}
  .card{padding:14px}
  .card-media{aspect-ratio:3 / 2}
  .card-txt{padding:26px 14px 12px}
  .card-h{font-size:34px}
  .revs{padding:6px 32px 10px;scroll-padding:0 32px}
  .rev{flex:0 0 44%}
  .swipe-hint{padding:0 32px}
  .score{gap:24px}
  .feat{flex-direction:row;align-items:center;gap:48px}
  .feat-media{flex:0 0 44%}
  .feat-txt{flex:1 1 0;min-width:0}
  .modal{align-items:center;padding:32px}
  .modal-card{max-width:660px;border-radius:10px;padding:46px 46px}
  .hl-head{padding:0 32px 16px}
  .hl-row{padding:4px 32px 10px;gap:26px}
  .hl{width:96px}
  .hl-ring{width:92px;height:92px}
  .story-frame{height:calc(100% - 48px);max-height:920px;border-radius:14px}
  .film{aspect-ratio:16 / 10}
  .offer{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:center;gap:24px;padding:34px 0}
  .offer-h{order:1;font-size:36px}
  .offer-p{order:2;grid-column:auto}
  .offer .arrow{order:3}
  .story-n{font-size:30px}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form .full{grid-column:1 / -1}
  .send{width:auto;justify-self:start}
  .foot-row{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
}
/* Desktop */
@media (min-width:1024px){
  .wrap{padding-left:48px;padding-right:48px}
  .dnav{display:flex;align-items:center;gap:0 28px}
  .logo{height:46px}
  .burger,.mnav-wrap,.fab,.hl-sec,.mq-sec{display:none}
  .hero-media::after{background:linear-gradient(to top,rgba(20,15,11,.66) 0%,rgba(20,15,11,.24) 34%,rgba(20,15,11,0) 56%),linear-gradient(to right,rgba(20,15,11,.36) 0%,rgba(20,15,11,.1) 34%,rgba(20,15,11,0) 52%)}
  .hero-txt{align-items:flex-start;text-align:left;padding-bottom:72px}
  .hero-txt .h1{font-size:clamp(64px,7vw,112px)}
  .hero-intro{padding-top:56px}
  .stack{gap:140px;padding-bottom:200px}
  .c0{top:100px}.c1{top:118px}.c2{top:136px}.c3{top:154px}
  .card{flex-direction:row;padding:16px}
  .card-media{flex:0 0 60%;aspect-ratio:3 / 2}
  .card-txt{flex:1 1 0;min-width:0;padding:36px 36px 36px 48px;justify-content:flex-end;gap:16px}
  .card.flip{flex-direction:row-reverse}
  .card.flip .card-txt{padding:36px 48px 36px 36px}
  .card-h{font-size:42px}
  .card-p{font-size:17px}
  .rev-sec{padding-top:150px;padding-bottom:150px;gap:72px}
  .rev-top{flex-direction:row;justify-content:space-between;align-items:flex-end}
  .feat{gap:80px}
  .feat-media{flex:0 0 46%;aspect-ratio:4 / 5}
  .rev-rail{overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .revs{display:flex;width:max-content;gap:0;padding:8px 0 14px;overflow:visible;scroll-snap-type:none}
  .rev{flex:0 0 380px;margin-right:20px;min-height:310px}
  .rev-q{font-size:23px}
  .swipe-hint{display:none}
  .film-head{padding-top:150px}
  .film{aspect-ratio:21 / 10}
  .about{flex-direction:row;align-items:center;gap:96px;padding-top:180px;padding-bottom:180px}
  .about-media{flex:0 0 38%}
  .about-txt{flex:1 1 0;min-width:0}
  .stories-in{padding-top:150px;padding-bottom:150px}
  .story{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;padding:22px 0}
  .chap-list{padding-bottom:160px}
  .film-sec .chap-list{padding-top:80px}
  .story-n{order:1;font-size:34px}
  .story-p{order:2;grid-column:auto;font-size:15px}
  .story-k{order:3}
  .story .arrow{order:4;display:inline}
  .incl-sec{flex-direction:row;align-items:flex-start;gap:72px;padding-top:170px;padding-bottom:170px}
  .incl-sec > .incl-l{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:40px}
  .price{flex:0 0 400px;position:sticky;top:110px;padding:44px 40px}
  .steps-in{flex-direction:row;align-items:flex-start;gap:96px;padding-top:150px;padding-bottom:150px}
  .steps-l{flex:1 1 0;min-width:0}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps-in .price{margin-top:96px}
  .faq-sec{flex-direction:row;align-items:flex-start;gap:72px;padding-top:170px;padding-bottom:170px}
  .faq-sec > .sec-head{flex:0 0 34%;position:sticky;top:110px}
  .faq-list{flex:1 1 0;min-width:0}
  .q{font-size:19px}
  .reg-in{padding-top:96px;padding-bottom:8px}
  .contact{flex-direction:row;align-items:stretch;gap:56px;padding-top:72px}
  .contact-media{display:block;position:sticky;top:100px;align-self:flex-start;height:min(760px,calc(100vh - 140px));min-height:460px;overflow:hidden;border-radius:14px;flex:0 0 42%;background:#E8DED1}
  .form{flex:1 1 0;min-width:0;align-content:start}
  .foot-in{padding-bottom:48px}
}

/* Animationen beim Laden */
@media (prefers-reduced-motion:no-preference){
  .ln-i{animation:lift 1.6s cubic-bezier(.19,1,.22,1) both}
  .l1{animation-delay:.15s}.l2{animation-delay:.32s}
  @keyframes lift{from{transform:translateY(112%)}to{transform:none}}
  .fade{animation:fadeup 1.4s cubic-bezier(.19,1,.22,1) both}
  .d1{animation-delay:.05s}.d4{animation-delay:.6s}.d5{animation-delay:.75s}
  @keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .hero-media{animation:curtain 1.4s cubic-bezier(.77,0,.18,1) .15s both}
  @keyframes curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  .hero-par img{animation:settle 3s cubic-bezier(.19,1,.22,1) .2s both}
  @keyframes settle{from{transform:scale(1.25)}to{transform:none}}
  .logo{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:write 2.2s cubic-bezier(.65,0,.35,1) .3s both}
  @keyframes write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
  .mnav-wrap{animation:menuin .6s cubic-bezier(.19,1,.22,1) both}
  @keyframes menuin{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  .mnav a{animation:fadeup .7s cubic-bezier(.19,1,.22,1) both}
  .mnav a:nth-child(1){animation-delay:.06s}.mnav a:nth-child(2){animation-delay:.11s}.mnav a:nth-child(3){animation-delay:.16s}.mnav a:nth-child(4){animation-delay:.21s}.mnav a:nth-child(5){animation-delay:.26s}.mnav a:nth-child(6){animation-delay:.31s}.mnav a:nth-child(7){animation-delay:.36s}
  .mnav-foot{animation:fadeup .8s cubic-bezier(.19,1,.22,1) .4s both}
  .hl-ring::before{animation:ringspin 7s linear infinite}
  @keyframes ringspin{to{transform:rotate(360deg)}}
  .sv{animation:fadein .35s ease both}
  .story-frame{animation:storyin .55s cubic-bezier(.19,1,.22,1) both}
  @keyframes storyin{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
  .bar.cur .bar-fill{animation:barfill 5.5s linear both}
  .paused .bar.cur .bar-fill{animation-play-state:paused}
  @keyframes barfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .slide.on .slide-img{animation:kb 7s ease-out both}
  .paused .slide.on .slide-img{animation-play-state:paused}
  @keyframes kb{from{transform:scale(1.12)}to{transform:none}}
  .slide.on .story-cap{animation:fadeup .8s cubic-bezier(.19,1,.22,1) .15s both}
  .story-end > *{animation:fadeup .8s cubic-bezier(.19,1,.22,1) both}
  .mq{animation:mq 60s linear infinite}
  @keyframes mq{to{transform:translateX(-50%)}}
  details[open] .ans{animation:fadeup .7s cubic-bezier(.19,1,.22,1) both}
  @media (min-width:1024px){
    .dup{display:flex !important}
    .rev-rail{overflow:hidden}
    .r1 .revs{animation:mq 300s linear infinite}
    .rev-rail:hover .revs{animation-play-state:paused}
  }
  .modal-bg{animation:fadein .4s ease both}
  .modal-card{animation:sheet .6s cubic-bezier(.19,1,.22,1) both}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  @keyframes sheet{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
}

.card-q{margin:4px 0 0;padding:2px 0 2px 14px;border-left:1px solid #CDBFAE;font-size:15px;line-height:1.6;color:#231C17}
.card-frage{margin:6px 0 -12px;padding-top:14px;border-top:1px solid #E2D7C9;font-size:15px;line-height:1.5;color:#231C17}
a.linkbtn{display:inline-flex;align-items:center;text-decoration:none}
.card-more{align-self:flex-start;margin-top:2px}
.card-media[data-gal]{cursor:zoom-in}
/* Bilderstrecke: Handy = Wischstreifen, Desktop = Reihen in gleicher Höhe */
.gal{display:flex;flex-direction:column;gap:22px;padding-bottom:36px}
.gal-head{display:flex;flex-direction:column;gap:10px}
.gal-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:4px 20px;scroll-padding:0 20px}
.gal-track::-webkit-scrollbar{display:none}
.gal-row{display:contents}
.gal-i{flex:0 0 78%;aspect-ratio:4 / 5;max-width:100%;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:12px;background:#E8DED1;border:0;padding:0;margin:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.gal-i img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.gal-i:focus-visible{outline:2px solid #80612A;outline-offset:3px}
.gal .swipe-hint{padding:0}
@media (min-width:0px){
  .gal-track{margin:0 -32px;padding:4px 32px;scroll-padding:0 32px}
  .gal-i{flex-basis:44%}
}
@media (min-width:1024px){
  .gal{gap:28px;padding-bottom:40px}
  .gal-track{flex-direction:column;gap:16px;overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .gal-row{display:flex;gap:16px}
  .gal-i{flex:var(--ar) 1 0;aspect-ratio:var(--ar);min-width:0}
  .gal-i img{object-position:50% 50%}
  .gal-i:hover img{transform:scale(1.035)}
}
/* Vollbild */
.lb{position:fixed;inset:0;z-index:90;background:rgba(22,17,14,.97);color:#F6F1EA}
.lb-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 64px) 12px calc(env(safe-area-inset-bottom,0px) + 40px)}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;display:block}
.lb-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0 20px;pointer-events:none}
.lb-count{font-size:12px;font-weight:500;letter-spacing:.2em;color:#CFC4B6}
.lb-x,.lb-nav{pointer-events:auto;width:48px;height:48px;border-radius:50%;border:0;background:rgba(246,241,234,.12);color:#F6F1EA;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color .3s;-webkit-tap-highlight-color:transparent}
.lb-x:hover,.lb-nav:hover{background:rgba(246,241,234,.24)}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid #D9B98F;outline-offset:3px}
.lb-nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%)}
.lb-prev{left:20px}.lb-next{right:20px}
.lb svg{width:20px;height:20px;display:block}
@media (max-width:767px){.lb-nav{display:none}}
@media (prefers-reduced-motion:no-preference){.lb:not([hidden]){animation:fadein .35s ease both}}

/* Feinschliff Handy & Tablet */
.steps li{align-content:start}
.play{left:16px;top:auto;bottom:16px;transform:none}
@media (min-width:768px){.play{left:24px;bottom:24px}}
.dnav .nl,.dnav .btn{white-space:nowrap}
@media (min-width:1024px) and (max-width:1199px){
  .dnav{gap:0 18px}
  .dnav .nl{letter-spacing:.12em}
  .dnav .btn{padding:0 20px;letter-spacing:.14em}
}
@media (max-width:1023px){
  .feat-q{font-size:30px}
  .about{display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;gap:0 40px;align-items:start}
  .about-txt{display:contents}
  .about-media{grid-column:1;grid-row:1 / span 4}
  .about-kopf{grid-column:2;grid-row:2;margin-bottom:20px}
  .about-intro{grid-column:2;grid-row:3}
  .about-mehr,.about .sig{grid-column:1 / -1}
  .about .about-mehr{margin-top:20px}
  .about .about-intro + .about-mehr{margin-top:32px}
  /* FAQ und Anfrage: weniger Leerraum, der Farbwechsel trennt die beiden Kapitel */
  .faq-sec{padding-bottom:80px}
  .contact-sec{padding-top:80px;padding-bottom:88px}
  /* Ablauf als Zeitleiste: Nummer links, eine feine Linie verbindet die Schritte */
  .steps{grid-template-columns:minmax(0,1fr);max-width:640px;margin-top:32px}
  .steps li{grid-template-columns:56px minmax(0,1fr);gap:6px 12px;padding:0 0 32px}
  .steps li:last-child{padding-bottom:0}
  .steps .num{font-size:32px;line-height:1}
  .steps .draw{left:11px;right:auto;top:46px;bottom:8px;width:1px;height:auto;background:rgba(128,97,42,.45);transform-origin:50% 0;animation-name:drawv}
  .steps li:last-child .draw{display:none}
  @keyframes drawv{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* Handy: gleiche Anordnung wie am iPad, Größen passend zum kleinen Bildschirm */
@media (max-width:767px){
  .wrap{padding-left:20px;padding-right:20px}
  .h2{font-size:clamp(24px,6.8vw,30px)}
  .lead{font-size:15px;line-height:1.6}
  .eyebrow{font-size:10px;letter-spacing:.22em}
  .btn{padding:0 22px;min-height:46px;font-size:11px;letter-spacing:.16em}
  .ul-link,.linkbtn{font-size:11px;letter-spacing:.16em}
  .hero-txt .eyebrow{font-size:min(9px,2.35vw);letter-spacing:.12em;white-space:nowrap}
  .cta{gap:8px 18px}
  .cta .btn{padding:0 20px}
  .hero-meta{font-size:9.5px;letter-spacing:.14em}
  .stmt{font-size:clamp(22px,6vw,26px)}
  .hl-sec,.mq-sec{display:none}
  .stack{gap:56px}
  .card{padding:8px;border-radius:16px}
  .card-media{border-radius:10px}
  .card-txt{padding:16px 8px 8px;gap:8px}
  .card-h{font-size:24px}
  .card-p{font-size:14px}
  .chap-cta{gap:10px 20px}
  .gal-track{margin:0 -20px;padding:4px 20px;scroll-padding:0 20px;gap:10px}
  .gal-i{flex-basis:46%}
  .film-head{padding-top:90px;gap:14px}
  .film-cap{gap:10px 16px;padding-top:14px}
  .film-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ft{padding:7px 6px 8px;min-height:52px;border-radius:16px;align-items:center;justify-content:center;text-align:center;gap:2px}
  .ft-name{font-size:14px;line-height:1.15}
  .ft-place{font-size:7.5px;letter-spacing:.1em;line-height:1.35}
  .play{gap:8px;padding:4px 14px 4px 4px;font-size:9.5px;letter-spacing:.14em;left:12px;bottom:12px}
  .play-dot{width:28px;height:28px}
  .play-dot svg{width:10px;height:10px}
  .score{gap:14px}
  .score-n{font-size:56px}
  .score-src{font-size:12px}
  .feat{gap:18px}
  .feat-q{font-size:17px;line-height:1.4}
  .feat-by{font-size:9.5px;letter-spacing:.14em}
  .feat .linkbtn{white-space:nowrap}
  .revs{padding:6px 20px 10px;scroll-padding:0 20px;gap:10px}
  .rev{flex:0 0 52%;padding:16px 14px;gap:12px;min-height:0}
  .rev-q{font-size:15px;line-height:1.4}
  .rev-by{gap:8px}
  .rev-name{font-size:12px}
  .rev-name small{font-size:10.5px}
  .av{flex:0 0 28px;width:28px;height:28px;font-size:12px}
  .rev-more{font-size:9px;letter-spacing:.14em}
  .rev-cta{gap:10px 16px}
  .about{grid-template-columns:44% minmax(0,1fr);grid-template-rows:none;gap:14px 18px;padding-top:90px;padding-bottom:90px}
  .about-media{grid-row:1;align-self:start}
  .about-kopf{grid-row:1;align-self:center;gap:10px}
  .about-kopf .h2{font-size:clamp(28px,8.6vw,38px);line-height:1.2}
  .about-intro{grid-column:1 / -1;grid-row:2;margin-top:10px}
  .about .about-mehr,.about .about-intro + .about-mehr{margin-top:0}
  .about-kopf{margin-bottom:0}
  .about-txt p{font-size:14.5px;line-height:1.65}
  .about .sig{width:100%;max-width:210px;margin-top:6px}
  .steps{margin-top:24px}
  .steps li{grid-template-columns:42px minmax(0,1fr);gap:5px 10px;padding:0 0 26px}
  .steps li:last-child{padding-bottom:0}
  .steps .num{font-size:28px}
  .steps .draw{left:9px;top:40px;bottom:6px}
  .steps h3{font-size:11px;letter-spacing:.16em}
  .steps p{font-size:14px;line-height:1.6}
  .num{font-size:22px}
  .price{padding:26px 22px;gap:12px}
  .price h3{font-size:22px!important}
  .price p{font-size:14px;line-height:1.6}
  .offer{gap:12px;padding:22px 0}
  .offer-h{font-size:20px}
  .offer-p{font-size:13px}
  .incl{column-gap:16px}
  .q{font-size:15px}
  .ans{font-size:14px;line-height:1.65}
  .hint{font-size:12px;text-align:left;border-radius:16px;padding:10px 16px}
  .form{gap:14px 12px}
  .send{min-height:46px;padding:0 24px;font-size:11px;letter-spacing:.16em}
  .field{font-size:9.5px;letter-spacing:.14em;gap:6px}
  .field input,.field select{min-height:46px;padding:10px 12px}
  .field textarea{padding:12px}
  .wahl legend{margin-bottom:6px}
  .wahl-reihe{gap:8px}
  .wahl-o span{min-height:46px;font-size:13.5px;padding:6px 6px}
  .check{font-size:12.5px}
  .reg-txt p{font-size:14px}
  .chips{gap:7px}
  .chip{font-size:11px;padding:6px 11px}
  .foot-row{font-size:12px;gap:8px 16px}
  .foot-links{gap:0 16px}
  .foot-links a{font-size:13px}
}
@media (max-width:359px){.feat .linkbtn{white-space:normal}}

/* Animationen beim Scrollen */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .prog{display:block;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#80612A;transform-origin:0 50%;animation:prog linear both;animation-timeline:scroll()}
    @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    .hero-txt{animation:heroout linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes heroout{to{opacity:0;transform:translateY(-60px)}}
    .hero-par{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .hero-media-wrap{animation:heroshrink linear both;animation-timeline:view();animation-range:exit 0% exit 75%}
    @keyframes heroshrink{to{transform:scale(.9);border-radius:28px}}
    @keyframes par{from{transform:translateY(-5%)}to{transform:translateY(5%)}}

    .fill{color:transparent;background-image:linear-gradient(90deg,#231C17 0 50%,#D3C6B6 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:fill linear both;animation-timeline:view();animation-range:cover 18% cover 48%}
    @keyframes fill{to{background-position:0 0}}

    .stack{timeline-scope:--k1,--k2,--k3}
    .c1{view-timeline-name:--k1}.c2{view-timeline-name:--k2}.c3{view-timeline-name:--k3}
    .c0{animation:shrink linear both;animation-timeline:--k1;animation-range:entry 0% entry 100%}
    .c1{animation:shrink linear both;animation-timeline:--k2;animation-range:entry 0% entry 100%}
    .c2{animation:shrink linear both;animation-timeline:--k3;animation-range:entry 0% entry 100%}
    @keyframes shrink{to{transform:scale(.9);filter:brightness(.86)}}
    .kz{animation:kz linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes kz{from{transform:scale(1.22)}to{transform:none}}

    .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes rise{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}

    /* Film: nur transform (kein Neuberechnen des Layouts beim Scrollen), das Video selbst bleibt unbewegt,
       und die Bewegung ist fertig, sobald der Film ganz im Bild ist */
    .film{animation:grow linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
    @keyframes grow{from{transform:scale(.84)}to{transform:none}}

    .wipe{animation:wipe linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
    .par-in{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

    .draw{animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    .fab{animation:fabin linear both;animation-timeline:scroll();animation-range:200px 600px}
    @keyframes fabin{from{opacity:0;visibility:hidden;transform:translate(-50%,28px)}to{opacity:1;visibility:visible;transform:translate(-50%,0)}}
  }
}

/* ---- Ergänzungen für die eigenständige Seite ---- */
[hidden]{display:none !important}
.page{width:100%;background:#F6F1EA}
.burger .ic-close{display:none}
.burger[aria-expanded="true"] .ic-open{display:none}
.burger[aria-expanded="true"] .ic-close{display:inline-flex}
.burger span{display:inline-flex}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55;color:#4E443B;letter-spacing:0;text-transform:none;font-weight:400}
.check input{width:20px;height:20px;min-height:0;flex:0 0 20px;margin:2px 0 0;padding:0;accent-color:#231C17;-webkit-appearance:auto;appearance:auto}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.notice{margin:0;padding:16px 18px;border-radius:12px;font-size:15px;line-height:1.6}
.notice.ok{background:#E6EEDF;color:#2F4A26}
.notice.err{background:#F4E1DC;color:#6E2A1C}
.fab{transition:opacity .4s ease,visibility .4s ease,translate .5s cubic-bezier(.19,1,.22,1)}
.fab.fab-weg{opacity:0 !important;visibility:hidden !important;pointer-events:none;translate:0 28px}
.form{transition:opacity .3s ease,transform .3s ease}
.form.weg{opacity:0;transform:translateY(-10px)}
.danke{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;background:#FBF8F3;border:1px solid #E7DDD0;border-radius:14px;padding:48px 28px 40px;outline:none;scroll-margin-top:90px}
.danke-ic{width:58px;height:58px;fill:none;stroke:#80612A;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.danke-h{font-family:"Nothing You Could Do","Segoe Script",cursive;font-weight:400;font-size:clamp(28px,4.4vw,42px);line-height:1.3;margin:0;text-wrap:balance}
.danke-h em{font-style:normal;color:#80612A}
.danke-p{margin:0;max-width:460px;font-size:16px;line-height:1.7;color:#4E443B}
.danke-p.klein{font-size:14px;color:#6F6358}
.danke-p a{color:inherit;white-space:nowrap;text-underline-offset:3px}
.danke-gruss{margin:12px 0 0;font-size:15px;color:#4E443B}
.danke .danke-sig{width:min(220px,64%);margin:-6px 0 0}
.danke.an .danke-ic circle{stroke-dasharray:151;stroke-dashoffset:151;animation:danke-strich .8s cubic-bezier(.65,0,.35,1) .1s forwards}
.danke.an .danke-ic path{stroke-dasharray:32;stroke-dashoffset:32;animation:danke-strich .45s cubic-bezier(.65,0,.35,1) .8s forwards}
.danke.an>p,.danke.an>h3{animation:danke-auf .8s cubic-bezier(.19,1,.22,1) both}
.danke.an>.eyebrow{animation-delay:.3s}
.danke.an>h3{animation-delay:.42s}
.danke.an>.danke-p{animation-delay:.56s}
.danke.an>.danke-p.klein{animation-delay:.68s}
.danke.an>.danke-gruss{animation-delay:.9s}
.danke.an .danke-sig{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:danke-sig 1.7s cubic-bezier(.45,.05,.55,.95) 1.1s both}
@keyframes danke-strich{to{stroke-dashoffset:0}}
@keyframes danke-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes danke-sig{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@media (max-width:767px){.danke{padding:36px 18px 30px;gap:12px}.danke-ic{width:50px;height:50px}.danke-p{font-size:15px}}
@media (prefers-reduced-motion:reduce){.form{transition:none}.danke.an *{animation:none !important;stroke-dashoffset:0 !important}.danke.an .danke-sig{-webkit-mask-image:none;mask-image:none}}