/*
Theme Name: Sip and Smile
Theme URI: https://www.sip-smile.de
Author: Sip and Smile GmbH
Description: Individuelles Theme - 1:1 Nachbau von sip-smile.de (Fotografie & Grafikdesign). Manrope, minimalistisch, Galerie mit Lightbox.
Version: 1.1
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sip-and-smile
*/


:root{
  --fg:#0a0a0a; --muted:#3a3a3a; --bg:#ffffff; --line:#ececec;
  --maxw:1100px; --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);color:var(--fg);background:var(--bg);
  line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);}
.hd-inner{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 28px;max-width:1400px;margin:0 auto;}
.hd-logo img{height:46px;width:auto;}
.hd-nav{display:flex;align-items:center;gap:30px;}
.hd-nav a{font-size:15px;letter-spacing:-.01em;color:var(--fg);font-weight:500;
  transition:opacity .2s;}
.hd-nav a:hover{opacity:.55;}
.hd-social{display:flex;align-items:center;gap:16px;margin-left:6px;}
.hd-social a{display:inline-flex;}
.hd-social svg{width:19px;height:19px;fill:var(--fg);opacity:.8;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--fg);margin:5px 0;transition:.3s;}

/* sections */
.hero{margin-bottom:10px;}
.hero img{width:100%;height:auto;object-fit:cover;}
.fullbleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}
.sec{max-width:var(--maxw);margin:0 auto;padding:54px 28px;text-align:center;}
.sec-title{font-weight:500;letter-spacing:-.02em;line-height:1.12;margin:0 auto;
  font-size:clamp(30px,4.6vw,42px);}
.intro-title{font-size:clamp(24px,3.4vw,33px);max-width:900px;margin-bottom:26px;}
.closing-title{font-size:clamp(22px,3vw,30px);padding:30px 0;}
.sec-text{max-width:760px;margin:18px auto 0;font-size:17px;color:var(--muted);}
.sec-img{margin:38px auto 0;max-width:var(--maxw);}
.sec-img img{width:100%;height:auto;border-radius:2px;}

/* page padding wrapper */
.page-pad{max-width:var(--maxw);margin:0 auto;padding:46px 28px 70px;}

/* arbeiten */
.work{padding:40px 0;border-bottom:1px solid var(--line);}
.work:last-child{border-bottom:0;}
.work-title{font-weight:500;letter-spacing:-.02em;font-size:clamp(26px,3.6vw,38px);
  margin:0 0 6px;text-align:center;}
.work-sub{text-align:center;color:var(--muted);margin:0 0 26px;font-size:17px;}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.work-item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  cursor:zoom-in;transition:opacity .25s;}
.work-item:hover img{opacity:.85;}

/* bilder masonry */
.masonry{column-count:4;column-gap:14px;}
.m-item{display:block;margin:0 0 14px;break-inside:avoid;}
.m-item img{width:100%;border-radius:2px;cursor:zoom-in;transition:opacity .25s;}
.m-item:hover img{opacity:.85;}

/* kontakt / impressum */
.kontakt .sec-title{margin-bottom:30px;font-size:clamp(22px,3vw,30px);}
.impressum-title{font-weight:500;letter-spacing:-.02em;font-size:clamp(30px,5vw,46px);
  text-align:center;margin:0 0 24px;}
.impressum{max-width:820px;margin:0 auto;color:var(--muted);font-size:15.5px;line-height:1.7;}
.impressum h3{color:var(--fg);font-weight:600;font-size:18px;margin:26px 0 8px;}
.impressum a{color:var(--fg);text-decoration:underline;}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:40px 28px;text-align:center;
  color:var(--muted);font-size:14px;margin-top:30px;}
.site-footer .copy{font-weight:600;color:var(--fg);letter-spacing:-.01em;margin-bottom:10px;}
.site-footer a{text-decoration:none;color:var(--muted);}
.site-footer a:hover{color:var(--fg);}
.site-footer .sep{margin:0 8px;opacity:.5;}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(8,8,8,.94);display:none;align-items:center;
  justify-content:center;z-index:999;cursor:zoom-out;}
.lb.open{display:flex;}
.lb img{max-width:92vw;max-height:90vh;width:auto;height:auto;border-radius:2px;}
.lb .lb-close{position:absolute;top:20px;right:26px;color:#fff;font-size:34px;
  line-height:1;cursor:pointer;opacity:.85;}

@media(max-width:1024px){.masonry{column-count:3;}.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  .masonry{column-count:2;}
  .hd-nav{position:fixed;top:0;right:0;height:100vh;width:74%;max-width:320px;
    background:#fff;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:26px;padding:40px;transform:translateX(100%);transition:transform .3s;
    box-shadow:-12px 0 40px rgba(0,0,0,.12);}
  .hd-nav.open{transform:translateX(0);}
  .hd-nav a{font-size:22px;}
  .nav-toggle{display:block;z-index:60;}
  .sec{padding:40px 22px;}
}
@media(max-width:480px){.masonry{column-count:1;}.work-grid{grid-template-columns:1fr;}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
.reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important;}}