/*
Theme Name: ShadowArt
Theme URI: https://shadowartphoto.com
Author: René · ShadowArt Photo
Description: Cineastisches Theme für ShadowArt Photo, Teal & Orange.
Version: 1.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: shadowart
*/
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:400;src:url(assets/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:500;src:url(assets/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:600;src:url(assets/fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:700;src:url(assets/fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:800;src:url(assets/fonts/hanken-grotesk-latin-800-normal.woff2) format('woff2')}@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
body{margin:0;background:#06090a}
a{color:#eef3f2;text-decoration:none}a:hover{color:#f0a860}
h1,h2,h3{text-wrap:balance}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #f0a860;outline-offset:3px}
button{font:inherit;cursor:pointer}

/* wiederkehrende Typo */
.eyebrow{margin:0 0 12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#5fc4b6}
.h2{margin:0 0 14px;font-size:clamp(34px,5vw,56px);line-height:1.05;font-weight:800;letter-spacing:-.03em}
.lead{margin:0;max-width:52ch;font-size:19px;color:#93a3a3}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7f9190}
.card{background:#0e1517;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;font-size:15px;color:#93a3a3}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field .lbl{font-size:13px;color:#93a3a3}
.inp{background:#0e1517;border:1px solid #263234;border-radius:12px;padding:14px 16px;color:#eef3f2;font:inherit;min-height:48px;box-sizing:border-box;width:100%}

/* Logo-Platzhalter */
.mark{width:34px;height:34px;border:1px solid #5f6e6e;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:300;font-size:14px;letter-spacing:.06em;color:#eef3f2}

/* Hero-Vorhang */
.lb{position:absolute;left:0;right:0;height:50.5%;background:#06090a;z-index:2;pointer-events:none;transform:scaleY(0)}
.lb-t{top:0;transform-origin:top}
.lb-b{bottom:0;transform-origin:bottom}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Genres + Galerie */
#genres article{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
#genres article:hover{transform:translateY(-6px);box-shadow:0 30px 80px -30px rgba(240,168,96,.3)}
#genres article img,.gal img,.yt img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
#genres article:hover img,.gal figure:hover img,.yt:hover img{transform:scale(1.045)}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gal .wide{grid-column:span 2}
.gal .box{position:relative;overflow:hidden;border-radius:14px;background:#0a1012;aspect-ratio:4/5;max-width:100%;transition:box-shadow .5s ease}
.gal .wide .box{aspect-ratio:163/100}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal figure:hover .box{box-shadow:0 0 0 1px rgba(240,168,96,.45),0 30px 80px -25px rgba(240,168,96,.35)}
@media (max-width:760px){.gal{grid-template-columns:minmax(0,1fr)}.gal .wide{grid-column:auto}.gal .wide .box{aspect-ratio:4/5}}

/* Ablauf */
#ablauf li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#263234;transform-origin:left}

/* Stimmen */
.quotes{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 16px;scrollbar-width:thin;scrollbar-color:#263234 transparent}
.quotes > figure{flex:0 0 min(360px,86%);scroll-snap-align:start;margin:0}

/* Circle */
.circle-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(30px) brightness(.38) saturate(.9);transform:scale(1.05)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#c6d1d0}
.check svg{flex:0 0 auto;margin-top:4px}

/* Formular-Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{position:relative;display:inline-flex;align-items:center;padding:10px 18px;border:1px solid #263234;border-radius:980px;cursor:pointer;min-height:44px;box-sizing:border-box;font-size:15px;color:#c6d1d0;transition:background .25s ease,color .25s ease,border-color .25s ease}
.chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chips label:hover{border-color:#5f6e6e}
.chips label:has(input:checked){background:#2e8f86;color:#fff;border-color:#2e8f86}
.chips label:has(input:focus-visible){outline:2px solid #f0a860;outline-offset:3px}
.age{display:flex;gap:12px;align-items:center;font-size:15px;color:#c6d1d0;min-height:44px;cursor:pointer}
.age input{width:20px;height:20px;accent-color:#2e8f86;margin:0}

@keyframes ldUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes focusPull{from{opacity:0;filter:blur(16px);transform:scale(1.04)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes lbOpen{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes rise{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes lightUp{from{color:#2c3638}to{color:#eef3f2}}
@keyframes heroAway{to{transform:scale(.88);opacity:.3}}
@keyframes sharpen{from{filter:blur(12px) brightness(.4);transform:scale(.93)}to{filter:none;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.live{position:relative;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.18)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}100%{box-shadow:0 0 0 12px rgba(229,72,77,0)}}
@keyframes write{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes drift{from{transform:scale(1.05) translateX(-10px)}to{transform:scale(1.12) translateX(10px)}}

@media (prefers-reduced-motion: no-preference){
  .live{animation:pulse 1.8s ease-out infinite}
  .sig{animation:write 2.2s cubic-bezier(.6,0,.2,1) .1s both}
  .ld{animation:ldUp 1.1s cubic-bezier(.2,.8,.2,1) both}
  .ld1{animation-delay:.15s}
  .ld2{animation:focusPull 1.6s cubic-bezier(.2,.8,.2,1) .3s both}
  .ld3{animation-delay:.75s}
  .ld4{animation-delay:.95s}
  .lb{animation:lbOpen 1.8s cubic-bezier(.75,0,.2,1) .6s both}
  .hero-img{transform-origin:50% 60%;animation:kenburns 22s ease-in-out infinite alternate}
  .circle-bg{animation:drift 26s ease-in-out infinite alternate}
  .lock-ico{animation:breathe 3.2s ease-in-out infinite}

  @supports (animation-timeline: view()){
    .progress{animation:grow linear both;animation-timeline:scroll(nearest block)}
    .hero-zoom{transform-origin:50% 0;animation:heroAway linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
    .hl{animation:lightUp linear both;animation-timeline:view();animation-range:entry 100% cover 48%}
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
    .rv2{animation-range:entry 20% cover 38%}
    .rv3{animation-range:entry 35% cover 45%}
    .rv4{animation-range:entry 50% cover 52%}
    #ablauf li::before{animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .gal .box{animation:sharpen linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  }
}

/* WordPress-Grundgerüst */
html{scroll-behavior:smooth;scroll-padding-top:80px}
.sa-wrap{background:#06090a;color:#eef3f2;font-family:'Hanken Grotesk','Helvetica Neue',Helvetica,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
.sa-page{max-width:720px;margin:0 auto;padding:80px 22px 120px;box-sizing:border-box}
.sa-page h1{margin:0 0 40px;font-size:clamp(40px,6vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.03em}
.sa-page h2{margin:36px 0 8px;font-size:20px;font-weight:700;letter-spacing:-.01em;padding-top:28px;border-top:1px solid #182224}
.sa-page h3{margin:24px 0 6px;font-size:17px;font-weight:700}
.sa-page p,.sa-page li{font-size:16px;color:#c6d1d0}
.sa-page a{color:#f0a860}
.sa-note{border-radius:14px;padding:14px 18px;margin:0 0 24px;font-size:15px}
.sa-note.ok{background:#12423e;color:#eef3f2}
.sa-note.err{background:#3a1d12;color:#f6d8c4}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
body.admin-bar header.sa-head{top:32px}
@media (max-width:782px){body.admin-bar header.sa-head{top:46px}}

/* ===== Circle ===== */
.btn{background:#f0a860;color:#1b1006;border:0;padding:12px 22px;border-radius:980px;font-weight:600;min-height:44px;font-size:15px;white-space:nowrap}
.btn-ghost{background:none;color:#5fc4b6;border:1px solid rgba(95,196,182,.45);padding:11px 20px;border-radius:980px;font-weight:600;min-height:44px;font-size:15px;white-space:nowrap}
.back{background:none;border:0;text-decoration:none;color:#f0a860;font-size:15px;padding:0;min-height:44px;display:inline-flex;align-items:center;gap:6px}

/* Kacheln: gesperrt = unscharf, freigeschaltet = scharf */
.tile{position:relative;border-radius:18px;overflow:hidden;background:#0a1012}
.tile .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter 1.4s cubic-bezier(.2,.8,.2,1),transform 1.4s cubic-bezier(.2,.8,.2,1)}
.tile.locked .ph{filter:blur(22px) brightness(.5) saturate(.7);transform:scale(1.12)}
.tile.open .ph{filter:none;transform:none}
.tile .lock{transition:opacity .6s ease,transform .8s cubic-bezier(.3,1.6,.5,1)}
.tile.open .lock{opacity:0;transform:scale(.4) rotate(-20deg)}
.tile.open:hover .ph{transform:scale(1.04)}
.soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(ellipse 70% 60% at 30% 20%,rgba(46,143,134,.28),rgba(6,9,10,0) 70%),radial-gradient(ellipse 60% 60% at 80% 90%,rgba(240,168,96,.14),rgba(6,9,10,0) 70%),#0b1214}
.mframe{display:block;width:100%;margin:0 0 12px;padding:0;border:0;background:#0a1012;border-radius:12px;overflow:hidden;position:relative;break-inside:avoid;cursor:zoom-in}
.mframe img{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.mframe:hover img{transform:scale(1.03)}

/* Kapitel-Zeilen der Serie */
.chap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 56px;align-items:center}
.chap .cimg{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:20px;overflow:hidden;background:#0a1012}
.chap .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.chap:hover .cimg img{transform:scale(1.04)}
.chap.rev .cimg{order:2}
@media (max-width:700px){.chap.rev .cimg{order:0}}
.roman{font-size:clamp(64px,9vw,120px);line-height:.9;font-weight:300;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(95,196,182,.7)}

/* Tabs Der Tag / Das Licht / Das Learning */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:#0e1517;border:1px solid #182224;border-radius:980px}
.tabs button{background:none;border:0;color:#93a3a3;padding:9px 18px;border-radius:980px;font-size:14px;font-weight:600;min-height:40px;transition:background .3s ease,color .3s ease}
.tabs button.on{background:#2e8f86;color:#fff}
.story{white-space:pre-line;font-size:17px;line-height:1.65;color:#c6d1d0;max-width:68ch}

@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes focusPull{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: no-preference){
  .scr > *{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
  .scr > *:nth-child(2){animation-delay:.1s}
  .scr > *:nth-child(3){animation-delay:.2s}
  .scr > *:nth-child(4){animation-delay:.3s}
  .scr > *:nth-child(5){animation-delay:.4s}
  .pull{animation:focusPull 1.4s cubic-bezier(.2,.8,.2,1) .15s both}
  .veil{animation:fadeIn .6s ease both}
  .card-pop{animation:pop .8s cubic-bezier(.2,.8,.2,1) .15s both}
  .sheet{animation:sheet .7s cubic-bezier(.2,.8,.2,1) both}
  .lbimg{animation:lbIn .5s cubic-bezier(.2,.8,.2,1) both}
  .story{animation:fadeIn .5s ease both}
  .tile.locked .lock svg{animation:breathe 3.2s ease-in-out infinite}
  .grid-in > *{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
  .grid-in > *:nth-child(2){animation-delay:.08s}
  .grid-in > *:nth-child(3){animation-delay:.16s}
  .grid-in > *:nth-child(4){animation-delay:.24s}
  .grid-in > *:nth-child(5){animation-delay:.32s}
  .grid-in > *:nth-child(6){animation-delay:.4s}
  .grid-in > *:nth-child(n+7){animation-delay:.48s}
  @supports (animation-timeline: view()){
    .sv{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
  }
}

.sa-circle{display:block}
.sa-chero{padding:80px 22px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse 45% 70% at 15% 0%,rgba(46,143,134,.22) 0%,rgba(6,9,10,0) 70%),radial-gradient(ellipse 45% 70% at 85% 10%,rgba(240,168,96,.13) 0%,rgba(6,9,10,0) 70%)}
.sa-chero h1{margin:0;max-width:16ch;font-size:clamp(42px,7vw,88px);line-height:1.03;font-weight:800;letter-spacing:-.035em}
.sa-clead{margin:20px auto 0;max-width:46ch;font-size:clamp(18px,2vw,22px);line-height:1.45;color:#93a3a3}
.sa-csec{padding:24px 22px 110px}
.sa-cgrid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px 18px}
.sa-scard{display:flex;flex-direction:column;gap:14px;min-width:0}
.sa-scard-link{display:block;border-radius:18px}
.sa-scard-txt h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.015em}
.sa-scard-txt p{margin:4px 0 0;font-size:15px;color:#93a3a3}
.sa-badge{position:absolute;left:14px;top:12px;background:rgba(6,9,10,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#8fe0d4;padding:5px 10px;border-radius:980px}
.sa-tcap{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%)}
.sa-tcap p{margin:0;font-size:20px;font-weight:700}
.sa-tcap p.mono{font-size:11px;font-weight:400}
.sa-price-wrap{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px;align-items:center}
.sa-price{min-width:0;background:linear-gradient(135deg,#12423e 0%,#0b2324 55%,#081314 100%);border:1px solid rgba(95,196,182,.25);border-radius:24px;padding:34px 30px;display:flex;flex-direction:column;gap:14px}
.sa-login{max-width:440px;margin:0 auto;background:#0e1517;border-radius:26px;padding:40px 32px;display:flex;flex-direction:column;gap:12px}
.sa-login h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;text-align:center}
.sa-login>p{margin:0;font-size:15px;color:#93a3a3;text-align:center}
.sa-login form p{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.sa-login label{font-size:13px;color:#93a3a3}
.sa-login input[type=text],.sa-login input[type=password]{background:#091113;border:1px solid #263234;border-radius:12px;padding:14px 16px;color:#eef3f2;font:inherit;min-height:48px;box-sizing:border-box;width:100%}
.sa-login .login-remember label{display:flex;gap:8px;align-items:center;font-size:14px}
.sa-login input[type=submit]{background:#f0a860;color:#1b1006;border:0;padding:12px 22px;border-radius:980px;font-weight:600;min-height:48px;font-size:15px;width:100%;cursor:pointer}
.sa-ghead{max-width:1120px;margin:0 auto;padding:48px 22px 36px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}
.sa-ghead h1{margin:0;font-size:clamp(44px,7vw,84px);line-height:1;font-weight:800;letter-spacing:-.035em}
.sa-quote{margin:18px 0 10px;max-width:60ch;font-size:clamp(18px,2vw,22px);line-height:1.45;font-style:italic;color:#c6d1d0}
.sa-masonry{max-width:1280px;margin:0 auto;columns:3 300px;column-gap:12px}
.sa-pn{max-width:1120px;margin:60px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sa-pn a{display:flex;flex-direction:column;gap:4px;background:#0e1517;border-radius:18px;padding:20px 22px;font-size:18px;font-weight:700}
.sa-lb{position:fixed;inset:0;z-index:100;background:rgba(3,5,6,.96);display:flex;align-items:center;justify-content:center}
.sa-lb[hidden]{display:none}
.sa-lb img{max-width:calc(100vw - 140px);max-height:calc(100vh - 100px);object-fit:contain;border-radius:6px}
.sa-lb button{position:absolute;background:rgba(255,255,255,.08);border:0;color:#eef3f2;width:48px;height:48px;border-radius:50%;font-size:24px;line-height:1}
.sa-lb-x{top:18px;right:18px}.sa-lb-p{left:18px;top:50%;transform:translateY(-50%)}.sa-lb-n{right:18px;top:50%;transform:translateY(-50%)}
.sa-lb-no{position:absolute;bottom:18px;left:50%;transform:translateX(-50%)}
@media (max-width:640px){.sa-lb img{max-width:100vw}.sa-lb-p,.sa-lb-n{top:auto!important;bottom:10px;transform:none!important}}
.sa-cbar{border-bottom:1px solid #182224;background:#081011}
.sa-cbar-in{max-width:1180px;margin:0 auto;padding:6px 22px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;font-size:13px}
.sa-cbar-brand{display:inline-flex;align-items:center;gap:6px;color:#8fe0d4;font-weight:600;min-height:40px}
.sa-cbar nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.sa-cbar nav a{color:#c6d1d0;min-height:40px;display:inline-flex;align-items:center}

/* Paid Memberships Pro im dunklen Look */
:root{--pmpro--color--base:#0e1517;--pmpro--color--base-2:#091113;--pmpro--color--contrast:#eef3f2;--pmpro--color--accent:#f0a860;--pmpro--color--accent--variation:#e8954a;--pmpro--color--border--variation:#263234;--pmpro--color--info-background:#12423e;--pmpro--color--info-text:#eef3f2}
.sa-page .pmpro{color:#eef3f2}
.sa-page .pmpro_card,.sa-page .pmpro_box{background:#0e1517;border-color:#182224;color:#eef3f2;border-radius:18px}
.sa-page .pmpro input[type=text],.sa-page .pmpro input[type=email],.sa-page .pmpro input[type=password],.sa-page .pmpro select,.sa-page .pmpro textarea{background:#091113;border:1px solid #263234;color:#eef3f2;border-radius:12px;min-height:46px}
.sa-page .pmpro_btn,.sa-page .pmpro input[type=submit]{background:#f0a860;color:#1b1006;border:0;border-radius:980px;font-weight:600;min-height:46px;padding:10px 22px}
.sa-page .pmpro a{color:#f0a860}
.sa-18{margin:16px 0;font-size:15px;color:#c6d1d0}
.sa-18 label{display:flex;gap:10px;align-items:flex-start}
.sa-18 input{width:20px;height:20px;accent-color:#2e8f86;margin-top:2px}