/*
Theme Name: FYOOCH
Theme URI: https://fyooch.com
Author: FYOOCH / Andreas
Description: Einseitige Landingpage für FYOOCH – Handcrafted Goods. Stempel-Look, Produkt-Etiketten mit Galerie, Video-Hero, Instagram-Karussell, Kontaktformular mit Spamschutz, Deutsch/Englisch.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary – nur für FYOOCH
Text Domain: fyooch
*/

@font-face{font-family:"FY Mono";src:url(assets/fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"FY Mono";src:url(assets/fonts/plexmono-600.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"FY Stamp";src:url(assets/fonts/bigshoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#DDD9D1; --tag:#ECE9E3; --ink:#000; --graphite:#3A3A38; --silver:#7A7C7B; --line:#000;
  --mono:"FY Mono",ui-monospace,Menlo,Consolas,monospace;
  --display:"FY Stamp","Arial Narrow",Impact,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#171716;--tag:#E4E1DA;--ink:#EAE7E1;--graphite:#B9B7B1;--line:#EAE7E1}}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.6 var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .44  0 0 0 0 .42  0 0 0 .5 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
body.fy-lb-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.caps{text-transform:uppercase;letter-spacing:.04em}
.rough{filter:url(#fy-stamp)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ink-img{filter:invert(1)}}

/* Links in Fließtexten (Customizer: [Text](Adresse)) */
.tx a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tx a:hover{background:var(--ink);color:var(--paper);text-decoration:none}

/* Kopfzeile */
.bar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 0;font-size:14px;line-height:1.45}
.bar .home-logo{width:120px}
.lang{display:flex;border:2px solid var(--line)}
.lang a{font:600 13px var(--mono);color:var(--ink);text-decoration:none;padding:6px 11px}
.lang a[aria-current="true"]{background:var(--ink);color:var(--paper)}

/* Hero */
.hero{min-height:calc(100svh - 90px);display:grid;grid-template-rows:1fr auto;padding-bottom:28px}
.stamp{align-self:center;justify-self:center;width:min(92%,880px);margin:0 auto;animation:fy-stamp .7s cubic-bezier(.2,.9,.3,1.2) .15s both}
@keyframes fy-stamp{0%{transform:scale(1.35) rotate(-2deg);opacity:0}55%{transform:scale(.975) rotate(.4deg);opacity:1}75%{transform:scale(1.01)}100%{transform:none;opacity:1}}
.hero-foot{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;border-top:3px solid var(--line);padding-top:18px}
.claim{font:800 clamp(40px,7.6vw,104px)/.88 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0}
.sub{max-width:44ch;margin:14px 0 0;color:var(--graphite)}
.hg{display:flex;align-items:center;gap:14px;font-size:clamp(16px,1.8vw,22px);white-space:nowrap}
.hg img{width:64px}
.corner{font-size:13px;margin-top:14px;text-align:right}

/* Hero mit Video / dunkler Fläche – randlos, ohne Trennlinie */
.hero.is-film{min-height:0;grid-template-rows:auto auto;padding-bottom:28px}
.hero.is-film .hero-foot{border-top:0;padding-top:26px}
.film{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(300px,48vw,560px);overflow:hidden;background:#111;display:grid;place-items:center}
.film-poster,.film-video{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;background:center/cover no-repeat;filter:saturate(var(--fy-sat,.5)) blur(var(--fy-blur,0px))}
.film-shade{position:absolute;inset:0;background:rgba(0,0,0,var(--fy-dark,.5))}
.film-logo{position:relative;width:min(86%,760px);filter:invert(1)!important;animation:fy-stamp .7s cubic-bezier(.2,.9,.3,1.2) .15s both}
.film-pause{position:absolute;right:16px;bottom:16px;z-index:2;width:44px;height:44px;border:2px solid #fff;background:rgba(0,0,0,.35);color:#fff;font:600 14px var(--mono);cursor:pointer}
.film-pause:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Abschnitte */
.section{padding:clamp(56px,9vw,110px) 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.head>div:first-child{min-width:0}
.h2{font:800 clamp(40px,6vw,78px)/.9 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.h2.ig-title{font-size:clamp(34px,6vw,78px)}
.lead{max-width:52ch;color:var(--graphite);margin:12px 0 0}
.divider{display:flex;align-items:center;gap:18px;font:600 13px var(--mono);letter-spacing:.08em}
.divider::before,.divider::after{content:"";flex:1;height:4px;background:var(--line)}

/* Karussell */
.nav{display:flex;gap:8px;flex:none}
.nav button{width:52px;height:52px;border:3px solid var(--line);background:none;color:var(--ink);font:600 20px var(--mono);cursor:pointer}
.nav button:hover{background:var(--ink);color:var(--paper)}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}

/* Produkt-Etikett */
.tag{scroll-snap-align:start;background:var(--tag);color:#000;border:3px solid #000;position:relative;margin:0;transition:transform .2s,box-shadow .2s}
.tag:nth-child(odd){transform:rotate(-.6deg)}
.tag:nth-child(even){transform:rotate(.5deg)}
.tag.has-open:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 5px 0 #000}
.tag-open{position:absolute;inset:0;z-index:3;width:100%;height:100%;background:none;border:0;padding:0;cursor:pointer}
.tag-open:focus-visible{outline:3px solid #000;outline-offset:3px}
.tag .hole{position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid #000;z-index:2}
.tag .pic{aspect-ratio:4/5;overflow:hidden;border-bottom:3px solid #000;position:relative}
.tag .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(var(--zoom,1));transition:opacity .35s}
.tag .pic img.alt{opacity:0}
@media (hover:hover){.tag:hover .pic img.alt{opacity:1}}
.count{position:absolute;left:12px;bottom:12px;z-index:2;background:#000;color:#ECE9E3;font:600 12px var(--mono);padding:4px 8px;letter-spacing:.05em}
.spec{margin:0;padding:4px 16px 12px}
.spec div{display:grid;grid-template-columns:62px 1fr;gap:10px;border-bottom:2px solid #000;padding:9px 0;font-size:13.5px;line-height:1.4}
.spec div:last-child{border-bottom:0}
.spec div:has(+.price){border-bottom-width:3px}
.spec dt{font-weight:600;text-transform:uppercase}
.spec dd{margin:0}
.spec .price dd{font-weight:600}
.empty{border:3px dashed var(--line);padding:24px}

/* Großansicht */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,9,.88);display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.lb.open{display:flex}
.lb [hidden]{display:none!important}
.lb-card{background:var(--tag);color:#000;border:3px solid #000;width:min(1000px,100%);max-height:100%;display:grid;grid-template-columns:1.25fr 1fr;overflow:auto;position:relative}
.lb-gal{position:relative;border-right:3px solid #000;min-height:0}
.lb-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5;height:100%}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;mix-blend-mode:multiply}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:3px solid #000;background:var(--tag);color:#000;font:600 18px var(--mono);cursor:pointer}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.lb-dots i{width:10px;height:10px;border:2px solid #000;border-radius:50%;background:var(--tag)}
.lb-dots i.on{background:#000}
.lb-info{padding:56px 22px 22px;display:flex;flex-direction:column;gap:14px}
.lb-info h3{font:800 34px/.95 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0}
.lb-info .spec{padding:0}
.lb-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:3px solid #000;background:#000;color:#ECE9E3;font:600 18px var(--mono);cursor:pointer;z-index:3}
.lb-info .btn{align-self:flex-start;border-color:#000;background:#000;color:#ECE9E3;margin-top:auto}

/* Über mich */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,6vw,90px);align-items:start}
.about p{margin:0 0 1em;max-width:58ch}
.kinds{list-style:none;padding:0;margin:26px 0 0;border-top:3px solid var(--line)}
.kinds li{border-bottom:2px solid var(--line);padding:10px 0;display:flex;justify-content:space-between;gap:12px}
.kinds li span:last-child{color:var(--silver);text-align:right}
.felice{margin-top:28px;border:3px solid var(--line);position:relative;padding:26px 16px 14px}
.felice .lbl{position:absolute;top:-3px;left:-3px;background:var(--ink);color:var(--paper);font:600 11.5px var(--mono);letter-spacing:.08em;padding:3px 9px}

/* Instagram (Smash Balloon wird ins Etiketten-Raster gezwungen) */
.ig #sb_instagram{padding:0!important;width:100%!important;max-width:none!important}
.ig #sb_instagram .sb_instagram_header,.ig #sb_instagram #sbi_load,.ig #sb_instagram .sbi_follow_btn{display:none!important}
.ig #sb_instagram #sbi_images{display:grid!important;grid-auto-flow:column;grid-auto-columns:min(62vw,250px)!important;grid-template-columns:none!important;gap:22px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px!important;width:auto!important;scrollbar-width:none}
.ig #sb_instagram #sbi_images::-webkit-scrollbar{display:none}
.ig #sb_instagram .sbi_item{width:auto!important;max-width:none!important;padding:0!important;margin:0!important;scroll-snap-align:start;border:3px solid var(--line);background:var(--tag);display:block!important}
.ig #sb_instagram .sbi_photo_wrap,.ig #sb_instagram .sbi_photo{aspect-ratio:1;height:auto!important;display:block}
.ig #sb_instagram .sbi_photo img{width:100%!important;height:100%!important;object-fit:cover;mix-blend-mode:multiply;opacity:1!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px var(--mono);text-transform:uppercase;letter-spacing:.03em;padding:14px 20px;border:3px solid var(--line);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer}
.btn.ghost{background:none;color:var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* Kontakt */
.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,70px)}
.fy-form{display:grid;gap:16px}
.fy-form label{display:grid;gap:6px;font-weight:600;font-size:13px;text-transform:uppercase}
.fy-form input,.fy-form textarea{font:400 16px var(--mono);color:var(--ink);background:transparent;border:0;border-bottom:3px solid var(--line);padding:10px 2px;border-radius:0}
.fy-form textarea{min-height:150px;resize:vertical;border:3px solid var(--line);padding:10px}
.fy-form input:focus,.fy-form textarea:focus{outline:none;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{min-height:1.6em;font-size:14px;margin:0}
.status.ok,.status.err{border:3px solid var(--line);padding:10px 12px;font-weight:600}
.privacy-hint{font-size:12.5px;color:var(--graphite);margin:0}
.side{display:grid;gap:26px;align-content:start}
.box{border:3px solid var(--line);padding:18px}
.box h3{font:800 30px/.95 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}
.box p{margin:0 0 14px}

/* Unterseiten (Impressum, Datenschutz) */
.page-body{max-width:72ch;padding:40px 0 90px}
.page-body h1{font:800 clamp(40px,6vw,72px)/.9 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 30px}
.page-body h2,.page-body h3{font:600 17px/1.4 var(--mono);text-transform:uppercase;margin:2em 0 .6em}

footer.site{border-top:4px solid var(--line);padding:26px 0 40px;font-size:13px}
footer.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer.site img{width:150px}
footer.site nav{display:flex;gap:22px}

@media (max-width:820px){
  .about,.contact{grid-template-columns:1fr}
  .hero-foot{grid-template-columns:1fr}
  .corner{text-align:left}
  .head{flex-wrap:wrap}
  .lb-card{grid-template-columns:1fr}
  .lb-gal{border-right:0;border-bottom:3px solid #000}
  .lb-info{padding:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}.btn:hover{transform:none}}