*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;background:#fff;color:#2b2b2b;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;outline:none}

/* ========== HAMBURGER NAV (top-right, always visible) ========== */
#hamburger-btn{
  position:fixed;top:20px;right:24px;z-index:3000;
  display:flex;flex-direction:column;gap:5px;padding:8px;
  cursor:pointer;background:none;border:none;
}
#hamburger-btn span{
  display:block;width:26px;height:2.5px;background:#fff;
  transition:background 0.2s;border-radius:2px;
}
#hamburger-btn.dark span{background:#2b2b2b;}

/* Base p styling */
p {
  font-family: 'Questrial', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.5;
}
/* Futura for H1, H2 */
h1, h2, .hero-title, .haendler-title, .section-header h2, .gallery-ttl, .about-title, .modal-ttl {
  font-family: 'Futura', 'Trebuchet MS', sans-serif !important;
  font-weight: 400 !important; /* Regular */
  letter-spacing: normal !important;
  text-transform: uppercase;
}
/* Main Hero Title - 56px */
h1, .hero-title { font-size: 56px !important; }
/* Section Headers - 35px - LEFT ALIGNED now */
h2, .about-title, .haendler-title, .modal-ttl {
  font-size: 35px !important;
  text-align: left !important;
}
/* New Style for Product & Gallery Headers - CENTERED */
.section-header h2, .gallery-ttl {
  font-size: 35px !important;
  text-align: center !important;
  width: 100%;
}
.section-header, .gallery-ttl { text-align: center !important; }

/* Override specific adjustments */
.hero-title { line-height: 1.1 !important; }
/* Adjust specific p elements */
.hero-desc { line-height: 1.6; }
.hero-nur { font-size: 20px; }
.hero-versand { font-size: 20px; }
.section-header p { font-size: 20px; letter-spacing: 0.1em; }
.pcard-name { font-size: 20px; }
.haendler-body { font-size: 20px; }
.about-body { font-size: 20px; }
.footer-nl-title { font-size: 20px; }
.footer-contact-body { font-size: 20px; }
.footer-copy { font-size: 10px !important; }

/* Side drawer menu */
#side-menu{
  position:fixed;top:0;right:0;width:280px;height:100vh;
  transform:translateX(100%);transition:transform 0.35s cubic-bezier(.4,0,.2,1);
  box-shadow:-4px 0 30px rgba(0,0,0,0.12);
}
#side-menu.open{transform:none;}
.menu-close{
  position:absolute;top:18px;right:20px;
  font-size:24px;color:#aaa;cursor:pointer;background:none;border:none;line-height:1;
}
.menu-close:hover{color:#2b2b2b;}
#side-menu a{
  display:block;padding:14px 36px;
  font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:#2b2b2b;
  border-bottom:1px solid #f0f0f0;transition:background 0.15s;
}
#side-menu a:hover{background:#f8f8f8;}
#side-menu .menu-cart-btn{
  margin:28px 36px 0;background:#2b2b2b;color:#fff;
  font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:13px;text-align:center;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:none;transition:background 0.18s;
}
#side-menu .menu-cart-btn:hover{background:#444;}
.overlay-menu{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);
  z-index:3999;opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.overlay-menu.open{opacity:1;pointer-events:all;}

/* ========== CART badge (top-right, above hamburger) ========== */
.cart-pill{
  position:fixed;top:16px;right:68px;z-index:3000;
  background:rgba(255,255,255,0.2);color:#fff;
  font-family:'Raleway',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:7px 14px;cursor:pointer;
  display:flex;align-items:center;gap:7px;
  backdrop-filter:blur(4px);
  transition:background 0.2s;
}
.cart-pill:hover{background:rgba(255,255,255,0.35);}
.cart-pill .cbadge{
  background:#fff;color:#e85fa0;
  border-radius:50%;width:18px;height:18px;font-size:9px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
}
.cart-pill.dark-mode{background:rgba(0,0,0,0.08);color:#2b2b2b;}
.cart-pill.dark-mode .cbadge{background:#2b2b2b;color:#fff;}

/* ========== HERO – diagonal pink/teal split ========== */
#hero{
  position:relative;
  height:100vh;
  /* min-height removed to ensure it fits small screens without scroll */
  overflow:hidden;
  display:flex;align-items:center;
}
/* The two diagonal color halves */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  /* Pink bottom-left, teal top-right, diagonal */
  background: linear-gradient(135deg, #f472b6 0%, #ec4899 45%, #2dd4bf 55%, #14b8a6 100%);
}
/* Sharper diagonal – we clip two solid divs */
.hero-pink{
  position:absolute;inset:0;z-index:1;
  background:#f06aaa;
  clip-path:polygon(0 0, 58% 0, 38% 100%, 0 100%);
}
.hero-teal{
  position:absolute;inset:0;z-index:1;
  background:#6ecfc9;
  clip-path:polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
}
/* Diagonal blend strip between the two */
.hero-blend{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(135deg,transparent 40%, rgba(110,207,201,0.5) 50%, #6ecfc9 60%);
}

/* Hero content layout */
.hero-inner{
  position:relative;z-index:3;
  width:100%;max-width:1400px;margin:0 auto;
  padding:0 60px; /* Horizontal padding only */
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:40px;
  height:auto; /* Let content dictate height, centered by flex parent */
}
/* Left: logo + box image */
.hero-left{
  display:flex;flex-direction:column;
  align-items:flex-start;
  padding-top:0; /* Removed top padding */
  justify-content: center;
}
.hero-logo{
  width:180px; /* Smaller logo */
  margin-bottom:20px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}
.hero-box-img{
  width:min(420px,90%); /* Smaller image */
  filter:drop-shadow(0 20px 50px rgba(0,0,0,0.25));
  margin-left:-20px;
}
/* Right: text */
.hero-right{
  color:#fff;padding-left:20px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-title{
  font-family:'Raleway',sans-serif;
  font-size:clamp(32px,4.5vw,64px); /* Smaller title */
  font-weight:900;line-height:1.0;
  letter-spacing:-0.01em;
  margin-bottom:24px;
  text-shadow:none;
}
.hero-desc{
  font-size:clamp(13px,1.1vw,16px);
  font-weight:300;line-height:1.6;
  margin-bottom:24px;
  max-width:440px;
  opacity:0.95;
}
.hero-nur{font-size:15px;font-weight:300;margin-bottom:2px;opacity:0.9;}
.hero-preis{
  font-family:'Raleway',sans-serif;
  font-size:clamp(36px,5vw,64px); /* Smaller price */
  font-weight:700;line-height:1;
  margin-bottom:6px;
}
.hero-versand{
  font-size:13px;font-weight:300;
  letter-spacing:0.04em;margin-bottom:28px;opacity:0.9;
}
.btn-kaufen{
  display:inline-block;
  background:#fff;color:#2b2b2b;
  font-family:'Raleway',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0.25em;text-transform:uppercase;
  padding:16px 60px;
  transition:background 0.2s,color 0.2s,transform 0.15s;
  border:none;cursor:pointer;
}
.btn-kaufen:hover{background:#f0f0f0;transform:translateY(-1px);}

/* ========== PRODUCTS SECTION ========== */
#produkte{background:#fff;padding:90px 20px 110px;overflow:hidden;}
.section-header{text-align:center;margin-bottom:60px;}
.section-header h2{
  font-family:'Raleway',sans-serif;
  font-size:clamp(24px,3.5vw,42px);
  font-weight:900;letter-spacing:0.08em;text-transform:uppercase;
  color:#2b2b2b;margin-bottom:6px;
}
.section-header p{
  font-size:13px;font-weight:300;letter-spacing:0.25em;
  text-transform:uppercase;color:#888;
}
.section-header h3{
  font-family:'Raleway',sans-serif;
  font-size:clamp(18px,2.5vw,28px);
  font-weight:900;letter-spacing:0.06em;text-transform:uppercase;
  color:#2b2b2b;margin-top:4px;
}
/* filters */
.filter-bar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:52px;}
.fbtn{
  background:none;border:1.5px solid #ccc;
  padding:6px 18px;font-family:'Raleway',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:#999;cursor:pointer;transition:all 0.18s;
}
.fbtn.active,.fbtn:hover{background:#2b2b2b;border-color:#2b2b2b;color:#fff;}

/* CAROUSEL STYLES */
.product-carousel-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.product-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.product-grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.pcard {
  flex: 0 0 100%; /* Single column view */
  scroll-snap-align: center;
  cursor: default;
  max-width: 400px; /* Prevent it from being too wide on desktop */
  margin: 0 auto;   /* Center if smaller than container */
}
@media(min-width: 600px) {
  .pcard { flex: 0 0 50%; max-width: none; }
}
@media(min-width: 900px) {
  .pcard { flex: 0 0 33.333%; }
}

/* Carousel Arrows */
.car-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: #fff; border: 1px solid #eee;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.2s;
  font-size: 18px; color: #2b2b2b;
}
.car-btn:hover { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
.car-prev { left: -20px; }
.car-next { right: -20px; }
@media(max-width: 1260px) {
  .car-prev { left: 10px; }
  .car-next { right: 10px; }
}

/* Gallery - Ensure aspect ratio matches posters or is square? User said posters are distorted in "div" (assuming product grid). Let's fix product grid first. 
   Wait, if user meant gallery, gallery uses square 1:1. Posters are A4. That causes distortion if object-fit:cover isn't used (which it is).
   If user meant Product Grid, we set aspect-ratio: 210/297 and object-fit:contain.
   If "distorted" means stretched, it implies aspect ratio mismatch + object-fit:fill (default for img if width/height set).
   Let's explicitly set object-fit: contain for posters in product grid and ensure width/height auto/100 correct.
*/

.pcard-img{
  width:100%;
  aspect-ratio: 210/297; 
  overflow:hidden;
  background:#f8f8f8;
  position:relative;
  margin-bottom:14px;
  display: flex; align-items: center; justify-content: center; /* Center image */
}
.pcard-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain; /* Strict contain to avoid distortion */
  transition:opacity 0.38s;
}
.pcard-img .img-a{opacity:1;}
.pcard-img .img-b{opacity:0;}
.pcard:hover .pcard-img .img-b{opacity:1;}
.pcard-name{font-size:13px;font-weight:400;color:#2b2b2b;line-height:1.55;margin-bottom:8px;}
.pcard-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;}
.plabel{font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:0.1em;}
.pcard-price{font-family:'Raleway',sans-serif;font-size:18px;font-weight:700;color:#2b2b2b;}
.btn-hinzu{
  background:#2b2b2b;color:#fff;border:none;
  font-family:'Raleway',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;
  transition:background 0.18s;white-space:nowrap;flex-shrink:0;
}
.btn-hinzu:hover{background:#555;}

/* ========== PARALLAX STRIPS ========== */
.pstrip{
  height:480px;background-size:cover;background-position:center;
  background-attachment:fixed;
}
.pstrip-1{background-image:url('../images/strip1.svg');}
.pstrip-2{height:400px;background-image:url('../images/strip1.svg');background-size:cover;background-position:center;background-attachment:fixed;}
/* ========== FOOTER (Merged into Strip 3) ========== */
.pstrip-3 {
  background-image: url('../images/strip1.svg'); /* Replaced strip3.jpg with strip1.svg */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 80px 20px 60px;
  color: #fff;
  position: relative;
}
/* Dark overlay removed */
.pstrip-3::before {
  content: ''; position: absolute; inset: 0;
  background: transparent; z-index: 0;
}
.footer-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
}

.haendler-parallax {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  height: auto;
  min-height: 600px;
}
.haendler-overlay-box {
  background: rgba(255, 255, 255, 0.4); /* More transparent */
  padding: 40px 50px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  backdrop-filter: blur(8px); /* Increased blur for glass effect */
  text-align: center;
}
.haendler-overlay-box .fg input, .haendler-overlay-box .fg textarea {
  text-align: left;
}
.haendler-overlay-box .agb-row {
  justify-content: center;
}

/* ========== HÄNDLER ========== */
#haendler{background:#fff;padding:90px 20px 100px;}
.haendler-inner{
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;
}
.haendler-photo img{width:100%;}
.haendler-title{
  font-family:'Raleway',sans-serif;font-size:clamp(28px,3.5vw,48px);
  font-weight:900;letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:26px;color:#2b2b2b;line-height:1.05;
}
.haendler-body{font-size:15px;line-height:1.85;color:#555;font-weight:300;margin-bottom:16px;}
.haendler-body a{color:#2b2b2b;text-decoration:underline;}
.form-ttl{
  font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:#2b2b2b;
  margin:36px 0 24px;padding-bottom:12px;border-bottom:1px solid #e8e8e8;
}
.fg{margin-bottom:18px;}
.fg input,.fg textarea{
  width:100%;border:none;border-bottom:1px solid #e0e0e0;
  padding:10px 0;background:transparent;font-size:14px;font-weight:300;color:#2b2b2b;
  transition:border-color 0.2s;
}
.fg input:focus,.fg textarea:focus{border-bottom-color:#2b2b2b;}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,0.7);font-size:13px;}
.fg textarea{height:90px;resize:vertical;}
.agb-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px;font-size:12px;color:#999;line-height:1.5;}
.agb-row input[type=checkbox]{margin-top:2px;flex-shrink:0;}
.btn-send{
  background:#2b2b2b;color:#fff;font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;padding:13px 36px;border:2px solid #2b2b2b;
  cursor:pointer;transition:all 0.18s;
}
.btn-send:hover{background:transparent;color:#2b2b2b;}
.form-ok{display:none;margin-top:14px;font-size:13px;color:#2b2b2b;font-style:italic;}

/* Gallery - now loading posters dynamically */
.gallery-grid {
  display:grid; grid-template-columns: repeat(5,1fr);
  /* aspect-ratio removed for container */
}
.gitem {
  aspect-ratio: 1; /* Keep square for consistency */
  overflow:hidden;
}
.gitem img {
  width:100%; height:100%; object-fit: cover; /* Cover for static images */
}
/* If posters are added to gallery, they might need contain or specific handling */
.gitem.poster-item img {
  object-fit: contain; background: #f0f0f0;
}

/* ========== NEWSLETTER ========== */
.nl-parallax{
  background-image:url('../images/newsletter_bg.jpg');
  background-attachment:fixed;background-size:cover;background-position:center;
  padding:100px 20px;display:flex;align-items:center;justify-content:center;
}
.nl-box{
  background:rgba(255,255,255,0.95);padding:50px 56px;text-align:center;max-width:500px;width:100%;
}
.nl-box h3{
  font-family:'Raleway',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;margin-bottom:26px;color:#2b2b2b;
}
.nl-form{display:flex;}
.nl-form input{
  flex:1;border:1px solid #ccc;border-right:none;
  padding:11px 14px;font-size:13px;color:#2b2b2b;
}
.nl-form button{
  background:#2b2b2b;color:#fff;font-family:'Raleway',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  padding:11px 20px;cursor:pointer;white-space:nowrap;transition:background 0.18s;
}
.nl-form button:hover{background:#444;}
.nl-agb{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:11px;color:#aaa;}

/* ========== FOOTER — diagonal hard split like hero ========== */
footer{
  position:relative;overflow:hidden;
  padding:70px 40px 50px;
  color:#fff;
  background: #9b8ec4; /* Left side color (Purple) */
}
/* Right side color (Peach) with hard diagonal clip */
footer::before{
  content:'';position:absolute;inset:0;z-index:0;
  background: #f7d9a0;
  clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
}
/* Optional blend strip if desired, or just simple split */
footer::after{
  content:'';position:absolute;inset:0;z-index:0;
  background: linear-gradient(135deg, transparent 40%, rgba(247, 217, 160, 0.5) 50%, #f7d9a0 60%);
  pointer-events:none;
}
.footer-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;}

/* Two-column layout: left=newsletter, right=contact+legal+socials */
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;align-items:start;
}
/* Diagonal divider between columns */
.footer-left{
  padding-right:60px;padding-bottom:30px;
}
.footer-right{
  padding-left:60px;
  border-left:1px solid rgba(255,255,255,0.25);
}

/* Newsletter in footer */
.footer-nl-title{
  font-family:'Open Sans',sans-serif;font-size:15px;font-weight:300;
  margin-bottom:22px;letter-spacing:0.02em;
}
.footer-nl-form{display:flex;flex-direction:column;gap:0;margin-bottom:14px;}
.footer-nl-label{
  font-size:12px;font-weight:300;margin-bottom:6px;opacity:0.8;
}
.footer-nl-input{
  background:transparent;border:none;border-bottom:1.5px solid rgba(255,255,255,0.6);
  color:#fff;font-size:14px;font-weight:300;padding:8px 0;
  width:100%;max-width:340px;
  transition:border-color 0.2s;
}
.footer-nl-input:focus{border-bottom-color:#fff;outline:none;}
.footer-nl-input::placeholder{color:rgba(255,255,255,0.55);font-size:13px;}
.footer-nl-agb{
  display:flex;align-items:flex-start;gap:10px;
  font-size:12px;color:rgba(255,255,255,0.8);line-height:1.5;
  margin-bottom:22px;margin-top:14px;
}
.footer-nl-agb input[type=checkbox]{margin-top:2px;flex-shrink:0;accent-color:#e85fa0;}
.btn-footer-nl{
  background:#e85fa0;color:#fff;
  font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  padding:13px 30px;border:none;cursor:pointer;
  width:fit-content;transition:background 0.2s;
}
.btn-footer-nl:hover{background:#c94d8a;}

/* Contact block */
.footer-contact-title{
  font-family:'Open Sans',sans-serif;font-size:13px;font-weight:400;
  letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:16px;opacity:0.7;
}
.footer-contact-body{
  font-size:15px;font-weight:400;line-height:2;text-align:center;
  margin-bottom:20px;
}
.footer-contact-body a{color:#fff;text-decoration:none;}
.footer-contact-body a:hover{text-decoration:underline;}

/* Legal links */
.footer-legal-links{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  margin-bottom:28px;font-size:13px;
}
.footer-legal-links a{
  color:rgba(255,255,255,0.9);text-decoration:underline;
  text-underline-offset:2px;
}
.footer-legal-links a:hover{color:#fff;}
.footer-legal-links span{color:rgba(255,255,255,0.4);}

/* Social icons */
.footer-socials{
  display:flex;gap:14px;justify-content:center;margin-bottom:24px;
}
.footer-socials a{
  width:46px;height:46px;border:2px solid rgba(255,255,255,0.7);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;overflow:hidden;background:rgba(255,255,255,0.1);
}
.footer-socials a:hover{background:rgba(255,255,255,0.25);border-color:#fff;}
.footer-socials img{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1);}

.footer-copy{
  font-size:12px;color:rgba(255,255,255,0.6);
  text-align:center;
}

/* ========== ABOUT SECTION ========== */
#about{
  padding:100px 20px;background:#fff;
}
.about-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.about-photos {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.about-circle {
  width: 220px; height: 220px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 4px solid #fff;
}
.about-circle img {
  width: 100%; height: 100%; object-fit: cover;
}
.about-text{
  padding-left: 20px;
}
.about-tag{
  font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.3em;text-transform:uppercase;
  color:#e85fa0;margin-bottom:16px;
}
.about-title{
  font-family:'Raleway',sans-serif;
  font-size:clamp(26px,3.5vw,44px);
  font-weight:900;letter-spacing:0.04em;text-transform:uppercase;
  color:#2b2b2b;line-height:1.05;margin-bottom:24px;
}
.about-body{
  font-size:15px;line-height:1.85;color:#555;font-weight:300;
  margin-bottom:16px;
}
.about-sig{
  font-family:'Raleway',sans-serif;font-size:14px;font-weight:700;
  color:#2b2b2b;margin-top:28px;letter-spacing:0.06em;
}
@media(max-width:900px){
  .about-inner{grid-template-columns:1fr;text-align:center;}
  .about-text{padding-left:0;}
  .about-photos{margin-bottom:40px;}
}

/* ========== LEGAL MODALS (Impressum / Widerruf) ========== */
.legal-modal-wrap{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:7000;
  display:none;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;
}
.legal-modal-wrap.open{display:flex;}
.legal-modal{
  background:#fff;width:100%;max-width:720px;
  padding:50px 52px;position:relative;margin:auto;
  animation:modalIn 0.3s cubic-bezier(0.22,1,0.36,1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.legal-modal-x{
  position:absolute;top:16px;right:20px;
  font-size:22px;cursor:pointer;color:#aaa;background:none;border:none;line-height:1;
}
.legal-modal-x:hover{color:#2b2b2b;}
.legal-modal h2{
  font-family:'Raleway',sans-serif;font-size:22px;font-weight:900;
  letter-spacing:0.06em;text-transform:uppercase;
  color:#2b2b2b;margin-bottom:30px;padding-bottom:16px;
  border-bottom:2px solid #f0f0f0;
}
.legal-modal h3{
  font-family:'Raleway',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:#2b2b2b;margin:24px 0 8px;
}
.legal-modal p{
  font-size:13px;line-height:1.85;color:#555;font-weight:300;margin-bottom:10px;
}
.legal-modal a{color:#2b2b2b;text-decoration:underline;}
.legal-modal ul{margin:8px 0 12px 20px;}
.legal-modal ul li{font-size:13px;line-height:1.8;color:#555;font-weight:300;}

/* ========== CART DRAWER ========== */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:5000;
  opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.overlay.open{opacity:1;pointer-events:all;}
.cart-drawer{
  position:fixed;top:0;right:0;width:400px;max-width:95vw;height:100vh;
  background:#fff;z-index:5001;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 0.35s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open{transform:none;}
.cart-head{
  padding:22px 24px;border-bottom:1px solid #f0f0f0;
  display:flex;align-items:center;justify-content:space-between;
}
.cart-head h2{font-family:'Raleway',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;}
.cart-x{font-size:20px;color:#aaa;cursor:pointer;padding:4px;background:none;border:none;line-height:1;}
.cart-x:hover{color:#2b2b2b;}
.cart-body{flex:1;overflow-y:auto;padding:20px 24px;}
.cart-empty{text-align:center;padding:60px 0;color:#ccc;font-size:14px;font-weight:300;}
.citem{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #f5f5f5;}
.citem-img{width:65px;height:86px;object-fit:cover;background:#f8f8f8;flex-shrink:0;}
.citem-info{flex:1;min-width:0;}
.citem-name{font-size:12px;line-height:1.5;margin-bottom:6px;color:#2b2b2b;}
.citem-price{font-family:'Raleway',sans-serif;font-size:15px;font-weight:700;}
.citem-ctrl{display:flex;align-items:center;gap:8px;margin-top:8px;}
.qbtn{
  width:26px;height:26px;border:1px solid #e0e0e0;background:#fff;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#2b2b2b;transition:all 0.15s;
}
.qbtn:hover{background:#2b2b2b;color:#fff;border-color:#2b2b2b;}
.qnum{font-size:12px;width:20px;text-align:center;}
.rmbtn{margin-left:auto;font-size:9px;color:#ccc;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;background:none;border:none;font-family:'Raleway',sans-serif;}
.rmbtn:hover{color:#e00;}
.cart-foot{padding:20px 24px 26px;border-top:1px solid #f0f0f0;}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.cart-total-lbl{font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#aaa;}
.cart-total-val{font-family:'Raleway',sans-serif;font-size:22px;font-weight:900;}
.cart-ship-note{font-size:11px;color:#aaa;margin-bottom:20px;}
.btn-checkout-big{
  width:100%;background:#2b2b2b;color:#fff;font-family:'Raleway',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  padding:14px;border:none;cursor:pointer;transition:background 0.18s;
}
.btn-checkout-big:hover{background:#444;}

/* ========== CHECKOUT MODAL ========== */
.mwrap{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:6000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.mwrap.open{display:flex;}
.modal{
  background:#fff;width:100%;max-width:560px;max-height:92vh;
  overflow-y:auto;padding:44px;position:relative;
}
.mx{position:absolute;top:14px;right:18px;font-size:20px;cursor:pointer;color:#aaa;background:none;border:none;}
.mx:hover{color:#2b2b2b;}
.modal-ttl{font-family:'Raleway',sans-serif;font-size:20px;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;}
.modal-sub{font-size:12px;color:#aaa;font-weight:300;margin-bottom:30px;}
.msec{margin-bottom:28px;}
.msec-ttl{
  font-family:'Raleway',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:#aaa;
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #f0f0f0;
}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.mfg{margin-bottom:14px;}
.mfg input,.mfg select{
  width:100%;border:none;border-bottom:1px solid #e0e0e0;
  padding:10px 0;font-size:14px;font-weight:300;color:#2b2b2b;background:transparent;transition:border-color 0.2s;
}
.mfg input:focus,.mfg select:focus{border-bottom-color:#2b2b2b;}
.mfg input::placeholder{color:#bbb;font-size:13px;}
.olines{margin-bottom:16px;}
.oline{display:flex;justify-content:space-between;font-size:12px;color:#666;padding:7px 0;border-bottom:1px solid #f5f5f5;}
.ototal{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;border-top:2px solid #2b2b2b;margin-top:4px;}
.ototal span{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:#aaa;}
.ototal strong{font-family:'Raleway',sans-serif;font-size:22px;font-weight:900;}
.pay-info{background:#f9f9f9;border-left:3px solid #2b2b2b;padding:14px 16px;font-size:12px;color:#666;line-height:1.7;margin-bottom:20px;}
.success-box{text-align:center;padding:40px 10px;display:none;}
.success-box .sicon{font-size:50px;margin-bottom:14px;}
.success-box h3{font-family:'Raleway',sans-serif;font-size:18px;font-weight:900;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:10px;}
.success-box p{font-size:14px;color:#777;line-height:1.8;}

/* ========== TOAST ========== */
#toasts{position:fixed;bottom:26px;right:26px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{
  background:#2b2b2b;color:#fff;padding:12px 20px;
  font-family:'Raleway',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  box-shadow:0 4px 18px rgba(0,0,0,0.15);
  animation:tIn 0.28s ease;
}
@keyframes tIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* ========== SCROLL ANIMATIONS ========== */

/* Base reveal state — elements start invisible/shifted */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* Staggered children — each child delays a little more */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.visible > *:nth-child(1){transition-delay:0.05s}
.reveal-stagger.visible > *:nth-child(2){transition-delay:0.15s}
.reveal-stagger.visible > *:nth-child(3){transition-delay:0.25s}
.reveal-stagger.visible > *:nth-child(4){transition-delay:0.35s}
.reveal-stagger.visible > *:nth-child(5){transition-delay:0.45s}
.reveal-stagger.visible > *:nth-child(6){transition-delay:0.55s}
.reveal-stagger.visible > *:nth-child(n+7){transition-delay:0.6s}
.reveal-stagger.visible > *{
  opacity:1;
  transform:translateY(0);
}

/* Slide in from left */
.reveal-left{
  opacity:0;
  transform:translateX(-50px);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible{opacity:1;transform:translateX(0);}

/* Slide in from right */
.reveal-right{
  opacity:0;
  transform:translateX(50px);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible{opacity:1;transform:translateX(0);}

/* Scale up */
.reveal-scale{
  opacity:0;
  transform:scale(0.92);
  transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-scale.visible{opacity:1;transform:scale(1);}

/* Product cards — custom stagger via inline delay */
.pcard{
  opacity:0;
  transform:translateY(28px) scale(0.97);
  transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.pcard.visible{opacity:1;transform:translateY(0) scale(1);}

/* Specific override for posters to FILL the A4 container */
/* Note: This might distort if the image file itself is not exactly A4 ratio, 
   but user requested "fill" and we set the container to A4 aspect ratio. 
   "fill" usually means stretch to fit (width/height 100%).
   "cover" means fill but crop.
   "contain" means fit inside without cropping or distortion.
   User said "set all posters to fill". I will assume they want them to cover the area completely.
*/
.pcard-img img[src*="posters/"] {
  object-fit: fill !important; 
}
/* Gallery items — scale + fade */
.gitem{
  opacity:1; /* Temporarily disable fade-in to fix visibility issues */
  transform:scale(1);
  /* transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); */
}
.gitem img{transition:transform 0.45s;}
.gitem:hover img{transform:scale(1.06);}

/* Hero content — cascade on load */
.hero-logo{animation:heroFade 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both;}
.hero-box-img{animation:heroSlide 1.1s cubic-bezier(0.22,1,0.36,1) 0.2s both;}
.hero-title{animation:heroFade 0.9s cubic-bezier(0.22,1,0.36,1) 0.25s both;}
.hero-desc{animation:heroFade 0.9s cubic-bezier(0.22,1,0.36,1) 0.4s both;}
.hero-nur,.hero-preis,.hero-versand{animation:heroFade 0.9s cubic-bezier(0.22,1,0.36,1) 0.55s both;}
.btn-kaufen{animation:heroFade 0.9s cubic-bezier(0.22,1,0.36,1) 0.7s both;}

@keyframes heroFade{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroSlide{
  from{opacity:0;transform:translateX(-30px) rotate(-3deg);}
  to{opacity:1;transform:translateX(0) rotate(0);}
}

/* Ensure About section text aligns left properly */
.about-inner {
  text-align: left !important;
}
/* Ensure Gallery Title aligns left but has padding */
.gallery-ttl {
  padding-left: 20px; 
  margin-left: 0;
  width: 100%;
  max-width: 1200px; /* Align with grid */
  margin: 0 auto 50px;
}

/* Section headers */
.section-header h2,.section-header p,.section-header h3,
.gallery-ttl,.haendler-title{
  transition:opacity 0.75s ease, transform 0.75s ease;
}

/* ========== RESPONSIVE ========== */
@media(max-height: 1000px) and (min-width: 901px) {
  /* Compact mode for shorter landscape screens (laptops) - Adjusted for better fill */
  .hero-logo { width: 160px !important; margin-bottom: 20px !important; }
  .hero-box-img { width: 380px !important; margin-left: -15px !important; }
  .hero-title { font-size: 42px !important; margin-bottom: 20px !important; }
  .hero-desc { font-size: 14px !important; margin-bottom: 24px !important; line-height: 1.6 !important; }
  .hero-nur { font-size: 14px !important; margin-bottom: 4px !important; }
  .hero-preis { font-size: 54px !important; margin-bottom: 8px !important; }
  .hero-versand { font-size: 13px !important; margin-bottom: 28px !important; }
  .btn-kaufen { padding: 14px 48px !important; font-size: 12px !important; }
}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:100px 30px 60px;min-height:auto;}
  .hero-left{align-items:center;}
  .hero-right{padding-left:0;text-align:center;}
  .hero-desc{margin:0 auto 30px;}
  .hero-box-img{width:80%;margin:0 auto;}
  .haendler-inner{grid-template-columns:1fr;gap:40px;}
  .about-inner{grid-template-columns:1fr;gap:50px;}
  .about-img-wrap::before{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-right{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,0.25);padding-top:40px;}
  .footer-left{padding-right:0;}
  .pstrip,.pstrip-2,.pstrip-3,.nl-parallax{background-attachment:scroll;}
}
@media(max-width:600px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:18px 12px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .modal{padding:26px 18px;}
  .legal-modal{padding:32px 22px;}
  footer{padding:50px 24px 36px;}
  .mrow{grid-template-columns:1fr;}
}