/* rememberme.ch Startseite: Bild zuerst */
body.home{background:var(--stone)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Kopfzeile über dem Bild */
body.home header.top{position:fixed;left:0;right:0;top:0;transition:background .35s,border-color .35s}
body.home header.top:not(.solid){background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.home header.top:not(.solid) .logo b{color:#fff}
body.home header.top:not(.solid) .logo span{color:rgba(255,255,255,.8)}
body.home header.top:not(.solid) .burger span{background:#fff}
@media(min-width:1081px){
 body.home header.top:not(.solid) .menu a{color:#fff}
 body.home header.top:not(.solid) .menu a:hover{border-bottom-color:#fff}
 body.home header.top:not(.solid) .menu .cta a{background:transparent;border-color:#fff;color:#fff}
 body.home header.top:not(.solid) .menu .cta a:hover{background:#fff;color:var(--ink)}
}

/* Cover mit Bild-Streifen */
.cover{position:relative;height:100vh;height:100svh;min-height:560px;background:#120e0a;overflow:hidden;color:#fff}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(180deg,rgba(10,7,4,.5) 0,rgba(10,7,4,0) 22%,rgba(10,7,4,0) 45%,rgba(10,7,4,.82) 100%)}
.panels{position:absolute;inset:0;display:flex;gap:4px;background:#120e0a}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;transition:flex-grow .95s cubic-bezier(.7,0,.2,1);outline-offset:-4px;background:#1b1612}
.panel.on{flex-grow:7}
.panel img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.12);filter:brightness(.55) saturate(.85);transition:transform 1.8s cubic-bezier(.2,.7,.2,1),filter .9s}
.panel.on img{transform:scale(1);filter:none}
.panel .pn{position:absolute;top:5.6rem;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:1.15rem;letter-spacing:.12em;z-index:3;transition:opacity .4s}
.panel.on .pn{opacity:0}
.panel .pl{position:absolute;left:50%;bottom:2.6rem;z-index:3;font-size:.68rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;transition:opacity .4s}
.panel.on .pl{opacity:0}
.cover-text{position:absolute;z-index:6;left:clamp(1.3rem,4vw,4.2rem);right:clamp(1.3rem,4vw,4.2rem);bottom:clamp(1.8rem,7vh,4.5rem);pointer-events:none}
.cover-text .eyebrow{color:rgba(255,255,255,.85);margin-bottom:1rem}
.cover-text h1{font-size:clamp(2.6rem,5.8vw,5.8rem);line-height:1;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cover-text h1 em{color:#f0d19b}
.cover-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;pointer-events:auto}
.btn-w{background:#fff;color:var(--ink);border-color:#fff}
.btn-w:hover{background:transparent;color:#fff}
.btn-wl{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-wl:hover{background:#fff;color:var(--ink)}
.cover-count{position:absolute;z-index:6;right:clamp(1.3rem,4vw,4.2rem);bottom:clamp(1.8rem,7vh,4.5rem);font-family:var(--serif);font-size:1.15rem;letter-spacing:.08em;color:rgba(255,255,255,.8)}
.cover-count b{font-size:2.6rem;font-weight:300;color:#fff;margin-right:.2rem}
.js .panel{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms + 150ms)}
@keyframes rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Laufband */
.marq{overflow:hidden;background:var(--sun);border-block:1px solid var(--sun-line);padding:1.1rem 0}
.marq-in{display:flex;width:max-content;align-items:center;gap:2.2rem;animation:marq 38s linear infinite}
.marq span{font-family:var(--serif);font-size:clamp(2.2rem,6vw,5rem);font-weight:300;font-style:italic;line-height:1;color:transparent;-webkit-text-stroke:1px var(--accent);white-space:nowrap}
.marq i{width:12px;height:12px;border-radius:50%;background:var(--accent);flex:0 0 12px}
@keyframes marq{to{transform:translateX(-50%)}}

/* Auswahl */
.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.sheet-head p{font-size:.85rem;color:var(--muted)}
.sheet{columns:4;column-gap:10px}
.sheet figure{break-inside:avoid;margin:0 0 10px;position:relative;overflow:hidden;background:var(--sun)}
.js .sheet figure{overflow:hidden}
.sheet button{overflow:hidden;display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in;line-height:0}
.sheet img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.sheet figure:hover img{transform:scale(1.05)}
.js .sheet{columns:auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:8px;column-gap:10px;grid-auto-flow:dense}
.js .sheet figure{margin:0;padding-bottom:10px;background:none}
.js .sheet figure button{background:var(--sun)}
@media(max-width:1100px){.sheet{columns:3}.js .sheet{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.sheet{columns:2;column-gap:6px}.sheet figure{margin-bottom:6px}.js .sheet{grid-template-columns:repeat(2,1fr);column-gap:6px}.js .sheet figure{padding-bottom:6px;margin:0}}

/* Wege */
.ways{list-style:none;max-width:1100px;margin:0 auto}
.ways li{border-top:1px solid var(--sun-line)}
.ways li:last-child{border-bottom:1px solid var(--sun-line)}
.ways a{position:relative;display:flex;align-items:baseline;gap:1.4rem;padding:clamp(1.1rem,2.6vw,2rem) 0;text-decoration:none}
.ways .n{font-size:.75rem;letter-spacing:.2em;color:var(--accent);min-width:2rem}
.ways .t{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,6vw,4.8rem);line-height:1.05;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .3s}
.ways .a{margin-left:auto;font-size:1.8rem;color:var(--accent);transition:transform .4s}
.ways a:hover .t{transform:translateX(.6rem);color:var(--accent)}
.ways a:hover .a{transform:translateX(.4rem)}
.ways .peek{position:absolute;right:12%;top:50%;width:clamp(110px,13vw,190px);aspect-ratio:3/4;height:auto;object-fit:cover;opacity:0;pointer-events:none;transform:translateY(-50%) rotate(-4deg) scale(.88);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);box-shadow:0 18px 40px -16px rgba(60,40,10,.5);z-index:2}
.ways a:hover .peek,.ways a:focus-visible .peek{opacity:1;transform:translateY(-50%) rotate(3deg) scale(1)}
@media(hover:none){.ways .peek{display:none}}

/* Über mich */
.about{display:grid;grid-template-columns:minmax(220px,420px) 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.about>*{min-width:0}
.about-pic img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;box-shadow:0 22px 60px -28px rgba(80,50,10,.5)}
.about-tx .btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
@media(max-width:800px){.about{grid-template-columns:1fr}.about-pic{max-width:340px}}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(14,10,6,.96);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lb[hidden]{display:none}
.lb img{max-width:min(94vw,1200px);max-height:88vh;max-height:88dvh;width:auto;height:auto;object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:2.4rem;line-height:1;padding:.8rem 1.1rem}
.lb button:hover{color:#f0d19b}
.lb-x{top:.6rem;right:.6rem}
.lb-p{left:.4rem;top:50%;transform:translateY(-50%);font-size:3.4rem!important}
.lb-n{right:.4rem;top:50%;transform:translateY(-50%);font-size:3.4rem!important}
.lb-c{position:absolute;bottom:1rem;left:0;right:0;text-align:center;font-size:.75rem;letter-spacing:.2em;color:rgba(255,255,255,.7)}
body.lbopen{overflow:hidden}

/* Cursor */
.cur{position:fixed;left:0;top:0;z-index:250;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0) scale(.4);transition:opacity .25s,scale .25s}
.cur.show{opacity:1}
@media(hover:none),(pointer:coarse){.cur{display:none}}
@media(hover:hover) and (pointer:fine){.cover .panel,.sheet button{cursor:none}}

/* Handy: Streifen übereinander, Text darunter */
@media(max-width:760px){
 .cover{display:flex;flex-direction:column;padding-top:76px}
 .cover::after{display:none}
 .panels{position:relative;inset:auto;flex:1 1 auto;min-height:0;flex-direction:column;gap:3px}
 .panel{transition-duration:.8s}
 .panel.on{flex-grow:9}
 .panel .pn{top:50%;left:1.2rem;transform:translateY(-50%)}
 .panel .pl{left:auto;right:1.2rem;bottom:auto;top:50%;writing-mode:horizontal-tb;transform:translateY(-50%)}
 .cover-text{position:relative;left:auto;right:auto;bottom:auto;flex:0 0 auto;padding:1.1rem 1.3rem 1.5rem;background:#120e0a}
 .cover-text .eyebrow{margin-bottom:.6rem}
 .cover-text h1{font-size:clamp(2.1rem,9vw,3rem);max-width:none}
 .cover-cta{margin-top:1.1rem}
 .cover-count{display:none}
 .cover-cta .btn{padding:.9rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){.marq-in{animation:none}.panel{animation:none!important;transition:none}.panel img{transition:none}}