:root{--black:#101112;--paper:#ead9bd;--paper2:#f1e4cc;--cream:#f7ead2;--rust:#c65f3e;--rust-dark:#9e462d;--line:#433229;--muted:#5a4a40}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#151515;background:var(--black);font-family:Inter,system-ui,sans-serif}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:radial-gradient(#000 1px,transparent 1px);background-size:5px 5px}img{max-width:100%;display:block}a,button,input,select,textarea{font:inherit}
.paper{background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(0,0,0,.04)),radial-gradient(rgba(120,65,30,.14) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06));background-color:var(--paper);background-size:auto,10px 10px,auto}.dark{background:linear-gradient(90deg,#111214,#0e0f10 45%,#121315);color:var(--cream)}
.topbar{height:82px;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:38px;padding:0 6vw;background:#0d0f10;border-bottom:1px solid #2b211d}.logo{min-width:185px;color:var(--cream);text-decoration:none;line-height:.82;display:inline-block;position:relative;transform:none}.logo span{display:block;font:18px "Bebas Neue",sans-serif;letter-spacing:4px}.logo strong{font:40px Pacifico,cursive;font-weight:400;letter-spacing:0;text-transform:none}.logo i{color:var(--rust);position:absolute;right:-8px;top:9px;font-style:normal;font-size:24px}
nav{display:flex;gap:30px;flex:1;justify-content:center}nav a,.navbtn,.btn,.priceCard a,button,.priceCard h3,.timeline h3,.servicePanel h3,.faqGrid summary,.inquiryPanel h2,.faqWide h2,.photoFeature h2,.gallery h2,.pricing h2,.sectionHead h2{font-family:"Bebas Neue",sans-serif;letter-spacing:1px;text-transform:uppercase}nav a{color:var(--cream);text-decoration:none;font-size:18px}.navbtn,.btn{padding:15px 28px;text-decoration:none;border:2px solid var(--rust);color:#111;background:var(--rust);font-size:18px;box-shadow:8px 8px 0 rgba(0,0,0,.2);transition:.18s ease}.navbtn:hover,.btn.primary:hover,.priceCard a:hover{background:var(--rust-dark);transform:translate(-2px,-2px);box-shadow:12px 12px 0 rgba(0,0,0,.22)}.btn.ghost{background:rgba(255,246,228,.2);border-color:#111;color:#111}

.hero{min-height:720px;display:grid;grid-template-columns:minmax(0,1fr) minmax(480px,620px);gap:34px;position:relative;overflow:hidden;padding:88px 7vw 36px}.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.025),rgba(0,0,0,.025))}.heroText{position:relative;z-index:2;max-width:650px}.eyebrow{margin:0 0 14px;color:var(--rust);font:22px "Bebas Neue",sans-serif;letter-spacing:2px}.hero h1{margin:0}.hero h1 span{display:block;font:clamp(84px,10vw,136px) "Bebas Neue",sans-serif;line-height:.82;letter-spacing:3px;transform:rotate(-2.5deg);text-shadow:4px 4px 0 rgba(0,0,0,.08)}.hero h1 em{display:block;margin-top:-6px;font:clamp(50px,6vw,76px) Pacifico,cursive;line-height:1;transform:rotate(-4deg);font-style:normal}.lead{max-width:560px;margin:28px 0 0;font-size:20px;line-height:1.6}.actions{display:flex;flex-wrap:wrap;gap:18px;margin:34px 0 0}.spark{position:absolute;color:var(--rust);font-size:54px;line-height:1;z-index:1;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.08));animation:twinkle 3.5s ease-in-out infinite}.s1{left:7.5%;top:140px}.s2{left:42%;top:280px}.s3{right:6%;top:230px}.s4{right:18%;top:112px;color:#d7b58d}.s5{right:10%;top:330px;color:#d7b58d;font-size:34px}

.heroVisual{position:relative;z-index:2;min-height:610px}.retroArch{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:420px;height:470px;background:var(--rust);border-radius:220px 220px 0 0;box-shadow:38px 0 0 rgba(148,66,43,.18)}.archShadow{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:590px;height:86px;background:#0b0a09;border-radius:50%;opacity:.98;filter:blur(.2px)}.stage{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);width:520px;height:86px;background:linear-gradient(#26150f,#080807);border-radius:50%;box-shadow:0 34px 38px rgba(0,0,0,.38),0 50px 0 -18px #050505}.stageShadow{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:410px;height:48px;background:#020202}
.boothArt{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);width:360px;height:470px;animation:floaty 5s ease-in-out infinite}.boxBack{position:absolute;left:188px;top:150px;width:112px;height:210px;border-radius:9px;background:#050505;box-shadow:24px 16px 28px rgba(0,0,0,.34)}.boxMain{position:absolute;left:78px;top:126px;width:230px;height:230px;border-radius:10px;background:linear-gradient(145deg,#191919,#050505);border:2px solid #3a3a3a;box-shadow:18px 22px 30px rgba(0,0,0,.42)}.boxMain::after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.06);border-radius:7px}.lens{position:absolute;left:92px;top:35px;width:46px;height:46px;border-radius:50%;border:5px solid #303030;background:#080808;box-shadow:inset 0 0 0 5px #111}.lens span{position:absolute;left:12px;top:12px;width:14px;height:14px;border-radius:50%;border:3px solid #444}.screenFrame{position:absolute;left:58px;top:110px;width:116px;height:82px;background:#050505;border:8px solid #0a0a0a}.screen{width:100%;height:100%;background:linear-gradient(#2b2b2b,#141414);border:1px solid #444}.sideButton{position:absolute;left:302px;top:225px;width:10px;height:54px;border-radius:2px;background:#141414;border:1px solid #555}.topPole{position:absolute;left:187px;top:92px;width:14px;height:48px;border-radius:8px;background:#090909}.midPole{position:absolute;left:187px;top:354px;width:14px;height:145px;border-radius:8px;background:linear-gradient(90deg,#050505,#333,#050505)}.clamp{position:absolute;left:174px;width:44px;height:18px;border-radius:6px;background:#070707}.c1{top:402px}.c2{top:475px}.tripod{position:absolute;left:193px;top:502px}.leg{position:absolute;left:-5px;top:0;width:13px;height:135px;border-radius:8px;background:#070707;transform-origin:top}.leg1{transform:rotate(90deg)}.leg2{transform:rotate(57deg)}.leg3{transform:rotate(125deg)}
.flash{position:absolute;left:98px;top:0;width:190px;height:145px}.flashGlow{position:absolute;left:28px;top:0;width:142px;height:142px;border-radius:50%;background:radial-gradient(circle,#8d6245 0 7%,#ffd98f 10%,#fff7df 39%,#fff 68%,#ddd 100%);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 30px rgba(255,205,120,.9)}.flashSide{position:absolute;right:0;top:28px;width:48px;height:93px;border-radius:50%;background:#020202}.flashCable{position:absolute;left:22px;top:8px;width:94px;height:116px;border-left:3px solid #111;border-radius:50%;transform:rotate(-22deg)}.flashPin{position:absolute;left:92px;top:70px;width:20px;height:20px;border-radius:50%;background:#9a684b}
.scrollHint{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:4;color:#111;text-decoration:none;text-align:center;font-size:14px;animation:bounce 1.8s infinite}.scrollHint span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 4px;border:2px solid #111;border-radius:50%;font:28px "Bebas Neue"}.scrollHint small{font-size:14px}

.photoFeature{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:54px 7vw;border-top:1px solid #332620}.featureImageWrap{padding:16px;border:1px solid rgba(247,234,210,.25);background:rgba(255,255,255,.03)}.featureImage{width:100%;min-height:460px;object-fit:cover;border:10px solid var(--cream);box-shadow:0 25px 55px rgba(0,0,0,.45)}.script{margin:0 0 6px;font:38px Pacifico,cursive;color:var(--rust);text-transform:none!important;letter-spacing:0!important}.photoFeature h2,.pricing h2,.sectionHead h2,.inquiryPanel h2,.faqWide h2{margin:0 0 12px;font-size:52px;line-height:.95}.featureCopy p{font-size:18px;line-height:1.65}.placeholderList{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.placeholderList span{padding:10px 14px;border:1px solid rgba(247,234,210,.28);background:rgba(255,255,255,.04);font-size:14px}

.pricing{padding:58px 7vw}.center{text-align:center}.pricing h2{text-align:center}.priceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.priceCard{border:1.5px solid var(--line);background:rgba(255,246,228,.25);padding:24px 28px 26px;box-shadow:10px 10px 0 rgba(198,95,62,.12);transition:.2s ease}.priceCard:hover{transform:translateY(-4px);box-shadow:13px 13px 0 rgba(198,95,62,.18)}.priceCard.featured{transform:translateY(-8px);box-shadow:10px 10px 0 rgba(198,95,62,.22)}.priceCard h3{text-align:center;margin:0;font-size:34px;line-height:1}.priceCard strong{display:block;text-align:center;color:var(--rust);margin:10px 0 18px;font:54px "Bebas Neue",sans-serif}.priceCard ul{margin:0;padding-left:18px}.priceCard li{margin:9px 0;line-height:1.35}.priceCard li::marker{content:'✓  '}.priceCard small{font-size:12px;color:var(--muted)}.priceCard a,button{display:block;width:100%;margin-top:20px;padding:14px 18px;border:0;background:var(--rust);color:#111;text-decoration:none;text-align:center;cursor:pointer;font-size:18px}

.gallery{padding:38px 6vw 58px}.gallery h2{margin:0 0 26px;font-size:50px}.galleryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.galleryItem{position:relative;overflow:hidden;border:10px solid var(--cream);background:#241811;box-shadow:0 16px 24px rgba(0,0,0,.42);padding:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.galleryItem:hover{transform:translateY(-4px);box-shadow:0 20px 30px rgba(0,0,0,.5)}.galleryItem img{width:100%;aspect-ratio:4/3;object-fit:cover}.tilt-left{transform:rotate(-3deg)}.tilt-right{transform:rotate(3deg)}.placeholderCard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;background:linear-gradient(135deg,#31211a,#171111);color:var(--cream)}.placeholderCard span{font:32px "Bebas Neue";letter-spacing:1px}.placeholderCard small{font-size:14px}.hint{margin:24px auto 0;text-align:center;color:#d7c2a3;max-width:740px;line-height:1.6}

.serviceProcess{padding:46px 7vw}.serviceProcessGrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:24px;align-items:start}.processPanel,.servicePanel,.inquiryPanel{border:1.5px solid var(--line);background:rgba(255,246,228,.24);padding:22px 22px;box-shadow:10px 10px 0 rgba(198,95,62,.12)}.sectionHead{display:flex;align-items:end;gap:14px;margin-bottom:14px}.sectionHead .script{font-size:30px}.sectionHead h2{font-size:42px;margin:0}.sectionHead.compact h2{font-size:36px}.timeline{display:grid;gap:10px}.timeline article{display:grid;grid-template-columns:48px 1fr;gap:13px;padding:13px 14px;border:1px solid rgba(67,50,41,.35);background:rgba(255,246,228,.23);transition:.2s ease}.timeline article:hover{transform:translateX(4px);box-shadow:6px 6px 0 rgba(198,95,62,.13)}.timeline span{color:var(--rust);font:32px "Bebas Neue";line-height:1}.timeline h3{margin:0 0 4px;font-size:25px;line-height:1}.timeline p{margin:0;font-size:14.5px;line-height:1.48}.timeline small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.rightStack{display:grid;gap:24px}.quickServiceList{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;list-style:none}.quickServiceList li{position:relative;padding:9px 10px 9px 30px;border:1px solid rgba(67,50,41,.35);background:rgba(255,246,228,.28);font-size:14px;line-height:1.25}.quickServiceList li::before{content:'✓';position:absolute;left:10px;color:var(--rust);font-weight:700}.inquiryPanel h2{font-size:36px}.inquiryPanel h2 span{color:var(--rust)}.inquiryPanel form{display:grid;gap:10px}input,select,textarea{width:100%;padding:13px 12px;border:1.5px solid #513b31;background:#eadbc3;color:#111;font-size:14px}select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}textarea{min-height:92px;resize:vertical}.inquiryPanel button{margin-top:2px;background:#101112;color:var(--cream);box-shadow:7px 7px 0 rgba(198,95,62,.18)}

.faqWide{padding:38px 7vw 46px}.faqIntro{display:flex;align-items:end;gap:16px;margin-bottom:18px}.faqIntro .script{font-size:32px}.faqWide h2{font-size:46px;margin:0}.faqGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px}.faqGrid details{border:1px solid #3b3028;background:rgba(255,255,255,.035);padding:14px 16px;transition:.2s ease}.faqGrid details:hover{box-shadow:7px 7px 0 rgba(198,95,62,.1)}.faqGrid summary{cursor:pointer;color:var(--rust);font-size:24px;line-height:1}.faqGrid p{margin:10px 0 0;color:#eadbc3;line-height:1.55;font-size:14px}

.footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;padding:44px 7vw 70px;border-top:1px solid #3b3028;scroll-margin-top:90px}.footer p{margin:0;line-height:1.7}.footer b{font:24px "Bebas Neue";letter-spacing:1px}
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.86);padding:40px 24px;z-index:80}.lightbox.is-open{display:flex}.lightboxFigure{margin:0;max-width:min(1100px,92vw);width:100%;text-align:center}.lightboxFigure img{width:100%;max-height:78vh;object-fit:contain;border:12px solid var(--cream);background:#151515}.lightboxFigure figcaption{color:var(--cream);margin-top:14px;font-size:16px}.lightboxClose{position:absolute;top:18px;right:18px;width:52px;height:52px;margin:0;padding:0;border:0;background:var(--rust);color:#111;font-size:36px;line-height:1}
.reveal{animation:fadeUp .75s ease both}.delay{animation-delay:.16s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes floaty{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}@keyframes twinkle{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@media(max-width:1180px){.hero{grid-template-columns:1fr}.heroVisual{min-height:600px}.serviceProcessGrid{grid-template-columns:1fr}.quickServiceList{grid-template-columns:1fr 1fr}.priceGrid,.galleryGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){nav{display:none}.topbar{padding:0 22px;gap:18px}.photoFeature,.priceGrid,.galleryGrid,.faqGrid,.footer{grid-template-columns:1fr}.hero{padding:70px 6vw 36px}.hero h1 span{font-size:74px}.hero h1 em{font-size:50px}.lead{font-size:18px}.quickServiceList{grid-template-columns:1fr}.retroArch{width:340px}.stage{width:430px}.archShadow{width:470px}.boothArt{transform:translateX(-50%) scale(.86);transform-origin:bottom center}.photoFeature h2,.pricing h2{font-size:44px}.sectionHead{display:block}.galleryItem,.tilt-left,.tilt-right{transform:none}}


/* --- gezielte Fixes v7: Logo + Hero-Fotobox --- */
.topbar{
  height:92px;
  align-items:center;
  overflow:visible;
}
.logo{
  min-width:210px;
  height:72px;
  overflow:visible;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  line-height:1;
  padding-top:2px;
}
.logo span{
  display:block;
  font-family:"Bebas Neue",sans-serif;
  font-size:18px;
  letter-spacing:4.6px;
  line-height:1;
  margin-left:22px;
  margin-bottom:1px;
  color:var(--cream);
}
.logo strong{
  display:block;
  font-family:Pacifico,cursive;
  font-size:37px;
  line-height:1.05;
  font-weight:400;
  color:var(--cream);
  transform:rotate(-5deg);
  transform-origin:left center;
  margin-top:-1px;
  text-shadow:1px 1px 0 rgba(0,0,0,.28);
  white-space:nowrap;
}
.logo i{
  right:12px;
  top:19px;
  color:var(--rust);
  font-size:24px;
  line-height:1;
}
.footer .logo{
  height:82px;
  min-width:230px;
}

/* Hero-Bühne etwas kompakter, damit rechts nichts abgeschnitten wirkt */
.hero{
  grid-template-columns:minmax(0,1fr) minmax(430px,540px);
  gap:28px;
}
.heroVisual{
  min-height:590px;
  overflow:visible;
  transform:translateX(-18px);
}
.retroArch{
  width:380px;
  height:450px;
  top:74px;
}
.archShadow{
  width:510px;
  height:72px;
  bottom:46px;
}
.stage{
  width:470px;
  height:78px;
  bottom:62px;
}
.stageShadow{
  width:360px;
  bottom:16px;
}
.boothArt{
  width:320px;
  height:445px;
  bottom:118px;
}
.boxBack{
  left:176px;
  top:145px;
  width:100px;
  height:185px;
  border-radius:7px;
}
.boxMain{
  left:66px;
  top:122px;
  width:210px;
  height:210px;
  border-radius:8px;
}
.lens{
  left:83px;
  top:31px;
}
.screenFrame{
  left:53px;
  top:103px;
  width:106px;
  height:76px;
}
.sideButton{
  left:278px;
  top:212px;
}
.topPole{
  left:166px;
  top:88px;
}
.midPole{
  left:166px;
  top:330px;
  height:148px;
}
.clamp{
  left:153px;
}
.c1{top:380px}
.c2{top:453px}
.tripod{
  left:172px;
  top:480px;
}
.leg{
  height:112px;
}
.flash{
  left:74px;
  top:0;
}
.scrollHint{
  bottom:0;
}

/* Optional: alle generierten Störer neben der Box ausblenden; Scroll-Pfeil ist jetzt mittig */
.heroVisual::after,
.heroVisual .modelNote{
  display:none!important;
}

@media(max-width:1180px){
  .heroVisual{transform:none}
}
@media(max-width:900px){
  .topbar{height:86px}
  .logo{min-width:178px;height:68px}
  .logo span{font-size:16px;margin-left:16px}
  .logo strong{font-size:31px}
  .logo i{right:4px;top:20px}
  .heroVisual{min-height:555px}
  .retroArch{width:320px;height:405px}
  .stage{width:400px}
  .archShadow{width:430px}
  .boothArt{transform:translateX(-50%) scale(.82);transform-origin:bottom center}
}


/* --- v8: echtes Hero-Motiv ohne kaputtes Bild + kompaktere Seite --- */
.topbar{
  height:78px!important;
  padding:0 5.4vw!important;
}
.logo{
  min-width:205px!important;
  height:68px!important;
  overflow:visible!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  line-height:1!important;
}
.logo span{
  display:block!important;
  font-family:"Bebas Neue",sans-serif!important;
  font-size:17px!important;
  letter-spacing:4.5px!important;
  line-height:1!important;
  margin-left:22px!important;
  margin-bottom:0!important;
  transform:rotate(-4deg)!important;
  transform-origin:left center!important;
}
.logo strong{
  display:block!important;
  font-family:Pacifico,cursive!important;
  font-size:36px!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
  transform:rotate(-7deg)!important;
  transform-origin:left center!important;
  margin-top:-1px!important;
  white-space:nowrap!important;
}
.logo i{right:14px!important;top:16px!important}

.hero{
  min-height:630px!important;
  padding:58px 6vw 22px!important;
  grid-template-columns:minmax(0,1fr) minmax(420px,560px)!important;
  gap:18px!important;
}
.hero h1 span{font-size:clamp(74px,8.6vw,122px)!important}
.hero h1 em{font-size:clamp(44px,5vw,68px)!important}
.lead{font-size:18px!important;line-height:1.5!important;margin-top:20px!important}
.actions{margin-top:26px!important}
.btn,.navbtn{padding:12px 24px!important}
.heroVisual{
  position:relative!important;
  min-height:540px!important;
  overflow:visible!important;
  transform:none!important;
}

/* alte kaputte Motiv-Elemente definitiv aus */
.boothArt,.heroVisualImage,.boxMain,.boxBack,.flash,.pole,.tripod,.stage,.heroStage,.heroArch,.arch,.modelNote{display:none!important}

.retroArch{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:54px!important;
  transform:translateX(-50%)!important;
  width:390px!important;
  height:430px!important;
  background:#c65f3e!important;
  border-radius:210px 210px 0 0!important;
  box-shadow:36px 0 0 rgba(148,66,43,.17)!important;
  z-index:1!important;
}
.archShade{
  position:absolute;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  width:535px;
  height:72px;
  border-radius:50%;
  background:#090807;
  z-index:1;
}
.stageBack{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:405px;
  height:44px;
  background:#020202;
  z-index:2;
}
.stageFront{
  position:absolute;
  left:50%;
  bottom:46px;
  transform:translateX(-50%);
  width:480px;
  height:82px;
  border-radius:50%;
  background:linear-gradient(180deg,#2a1811 0%,#0a0908 78%);
  box-shadow:0 31px 35px rgba(0,0,0,.36);
  z-index:3;
}
.realBooth{
  position:absolute;
  left:50%;
  bottom:96px;
  width:330px;
  height:430px;
  transform:translateX(-50%);
  z-index:5;
  animation:floaty 5s ease-in-out infinite;
}
.softbox{
  position:absolute;
  left:77px;
  top:0;
  width:188px;
  height:135px;
  z-index:9;
}
.softboxFace{
  position:absolute;
  left:30px;
  top:0;
  width:132px;
  height:132px;
  border-radius:50%;
  background:radial-gradient(circle,#8a6043 0 7%,#f0bc61 9%,#fff2cf 36%,#fff 63%,#e4e4e4 100%);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 24px rgba(255,205,121,.85), inset 0 0 18px rgba(198,95,62,.22);
}
.softboxSide{
  position:absolute;
  left:146px;
  top:26px;
  width:45px;
  height:88px;
  border-radius:50%;
  background:#030303;
  box-shadow:-9px 0 0 rgba(0,0,0,.12);
}
.softboxCable{
  position:absolute;
  left:25px;
  top:6px;
  width:84px;
  height:105px;
  border-left:3px solid #111;
  border-radius:50%;
  transform:rotate(-25deg);
}
.softboxDot{
  position:absolute;
  left:92px;
  top:64px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#916047;
}
.boothSide{
  position:absolute;
  left:183px;
  top:138px;
  width:105px;
  height:198px;
  border-radius:7px;
  background:#050505;
  box-shadow:20px 18px 24px rgba(0,0,0,.35);
  z-index:5;
}
.boothBox{
  position:absolute;
  left:56px;
  top:115px;
  width:220px;
  height:220px;
  border-radius:8px;
  background:linear-gradient(145deg,#1b1b1b,#050505);
  border:2px solid #353535;
  box-shadow:15px 20px 28px rgba(0,0,0,.42);
  z-index:6;
}
.boothBox:after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px;
}
.cameraLens{
  position:absolute;
  left:88px;
  top:31px;
  width:45px;
  height:45px;
  border-radius:50%;
  border:5px solid #2c2c2c;
  background:#070707;
  box-shadow:inset 0 0 0 5px #111;
  z-index:8;
}
.cameraLens i{
  display:block;
  position:absolute;
  left:11px;
  top:11px;
  width:14px;
  height:14px;
  border-radius:50%;
  border:3px solid #444;
}
.display{
  position:absolute;
  left:51px;
  top:101px;
  width:116px;
  height:84px;
  padding:8px;
  background:#050505;
  z-index:8;
}
.display span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(#2f2f2f,#141414);
  border:1px solid #444;
}
.boxButton{
  position:absolute;
  left:278px;
  top:207px;
  width:10px;
  height:52px;
  border-radius:2px;
  background:#141414;
  border:1px solid #555;
  z-index:8;
}
.lampPole{
  position:absolute;
  left:160px;
  top:88px;
  width:13px;
  height:45px;
  border-radius:8px;
  background:#090909;
  z-index:4;
}
.mainPole{
  position:absolute;
  left:160px;
  top:335px;
  width:13px;
  height:142px;
  border-radius:8px;
  background:linear-gradient(90deg,#050505,#333,#050505);
  z-index:4;
}
.clampOne,.clampTwo{
  position:absolute;
  left:147px;
  width:42px;
  height:18px;
  border-radius:6px;
  background:#070707;
  z-index:9;
}
.clampOne{top:382px}
.clampTwo{top:451px}
.tripodLegs{
  position:absolute;
  left:166px;
  top:477px;
  z-index:7;
}
.tleg{
  position:absolute;
  left:-5px;
  top:0;
  width:13px;
  height:118px;
  border-radius:8px;
  background:#070707;
  transform-origin:top;
}
.tleg.left{transform:rotate(125deg)}
.tleg.center{transform:rotate(90deg)}
.tleg.right{transform:rotate(55deg)}
.scrollHint{
  left:50%!important;
  right:auto!important;
  bottom:-4px!important;
  transform:translateX(-50%)!important;
}

/* Insgesamt kompakter */
.photoFeature{padding:38px 6vw!important;gap:34px!important}
.featureImage{min-height:360px!important}
.pricing{padding:42px 6vw!important}
.priceCard{padding:20px 24px!important}
.gallery{padding:32px 6vw 40px!important}
.serviceProcess{padding:36px 6vw!important}
.timeline article{padding:10px 12px!important}
.timeline p{font-size:13.5px!important}
.quickServiceList li{padding-top:7px!important;padding-bottom:7px!important}
.faqWide{padding:30px 6vw 38px!important}
.footer{padding:34px 6vw 48px!important}

@media(max-width:1180px){
  .hero{grid-template-columns:1fr!important}
  .heroVisual{min-height:535px!important}
}
@media(max-width:900px){
  .topbar{height:78px!important}
  .logo{min-width:170px!important}
  .logo span{font-size:15px!important;margin-left:17px!important}
  .logo strong{font-size:30px!important}
  .logo i{right:0!important;top:18px!important}
  .hero{padding-top:44px!important}
  .retroArch{width:320px!important;height:395px!important}
  .stageFront{width:400px!important}
  .archShade{width:435px!important}
  .realBooth{transform:translateX(-50%) scale(.82)!important;transform-origin:bottom center!important}
}


/* --- v9 Fix: Hero-Fotobox komplett sichtbar, Scroll mittig, 250€ kommt bald --- */
.hero{
  min-height:610px!important;
  padding-top:52px!important;
  padding-bottom:26px!important;
}
.heroVisual{
  min-height:535px!important;
  overflow:visible!important;
}

/* Bühne und Box kleiner, damit der Ständer vollständig sichtbar ist */
.retroArch{
  width:360px!important;
  height:405px!important;
  top:70px!important;
}
.archShade{
  width:500px!important;
  height:62px!important;
  bottom:50px!important;
}
.stageFront{
  width:440px!important;
  height:70px!important;
  bottom:70px!important;
}
.stageBack{
  width:340px!important;
  height:36px!important;
  bottom:40px!important;
}
.realBooth{
  width:300px!important;
  height:425px!important;
  bottom:120px!important;
  transform:translateX(-50%) scale(.82)!important;
  transform-origin:bottom center!important;
}

/* Proportionen: Kasten kleiner, Blitz höher, längerer Ständer */
.softbox{
  left:67px!important;
  top:-18px!important;
  width:180px!important;
  height:130px!important;
}
.softboxFace{
  width:124px!important;
  height:124px!important;
  left:31px!important;
}
.softboxSide{
  left:145px!important;
  top:25px!important;
  width:42px!important;
  height:84px!important;
}
.softboxCable{
  left:28px!important;
  top:0!important;
  width:78px!important;
  height:98px!important;
}
.softboxDot{
  left:90px!important;
  top:58px!important;
}
.lampPole{
  left:145px!important;
  top:92px!important;
  width:11px!important;
  height:70px!important;
}
.boothBox{
  left:55px!important;
  top:150px!important;
  width:190px!important;
  height:190px!important;
}
.boothSide{
  left:205px!important;
  top:165px!important;
  width:76px!important;
  height:168px!important;
}
.cameraLens{
  left:75px!important;
  top:28px!important;
  width:39px!important;
  height:39px!important;
}
.cameraLens i{
  left:9px!important;
  top:9px!important;
}
.display{
  left:45px!important;
  top:91px!important;
  width:100px!important;
  height:72px!important;
}
.boxButton{
  left:260px!important;
  top:220px!important;
  height:45px!important;
}
.mainPole{
  left:145px!important;
  top:340px!important;
  width:11px!important;
  height:150px!important;
}
.clampOne,.clampTwo{
  left:132px!important;
  width:38px!important;
  height:16px!important;
}
.clampOne{top:386px!important}
.clampTwo{top:458px!important}
.tripodLegs{
  left:151px!important;
  top:488px!important;
}
.tleg{
  width:11px!important;
  height:118px!important;
}

/* Scroll-Pfeil mittig vom gesamten Bildschirm/Hero, nicht rechts in der Grafik */
.scrollHint{
  position:absolute!important;
  left:50vw!important;
  bottom:18px!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
  color:#111!important;
}
.scrollHint span{
  background:rgba(234,217,189,.72)!important;
  backdrop-filter:blur(2px);
}

/* 250-Euro-Paket deaktiviert/grau */
.priceCard.comingSoon{
  position:relative;
  filter:grayscale(.92);
  opacity:.72;
  background:rgba(220,220,220,.28)!important;
  box-shadow:10px 10px 0 rgba(80,80,80,.16)!important;
}
.priceCard.comingSoon strong,
.priceCard.comingSoon h3{
  color:#555!important;
}
.priceCard.comingSoon a{
  background:#777!important;
  color:#eee!important;
  pointer-events:none;
  cursor:not-allowed;
}
.soonRibbon{
  position:absolute;
  top:14px;
  right:-10px;
  transform:rotate(4deg);
  background:#101112;
  color:var(--cream);
  font:18px "Bebas Neue",sans-serif;
  letter-spacing:1px;
  padding:8px 18px;
  box-shadow:6px 6px 0 rgba(0,0,0,.18);
}

/* noch etwas kompakter */
.photoFeature{padding-top:32px!important;padding-bottom:32px!important}
.pricing{padding-top:36px!important;padding-bottom:36px!important}
.gallery{padding-top:28px!important;padding-bottom:34px!important}
.serviceProcess{padding-top:30px!important;padding-bottom:30px!important}
.faqWide{padding-top:28px!important;padding-bottom:34px!important}
.photoFeature h2,.pricing h2,.sectionHead h2,.inquiryPanel h2,.faqWide h2{font-size:44px!important}
.script{font-size:31px!important}
.priceCard strong{font-size:48px!important}

@media(max-width:900px){
  .realBooth{transform:translateX(-50%) scale(.72)!important}
  .stageFront{width:385px!important}
  .archShade{width:420px!important}
  .retroArch{width:310px!important;height:390px!important}
}


/* v10: echtes Referenzbild verwenden */
.realBooth,.retroArch,.archShade,.stageBack,.stageFront{
  display:none !important;
}

.heroVisual{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:560px !important;
}

.heroReferenceImage{
  width:min(520px,100%);
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.25));
}

.scrollHint{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom:-10px !important;
  z-index:50 !important;
  color:#111 !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
}

.scrollHint span{
  width:52px !important;
  height:52px !important;
  border:2px solid #111 !important;
  border-radius:50%;
  display:flex !important;
  align-items:center;
  justify-content:center;
  background:rgba(234,217,189,.95) !important;
}

.scrollHint small{
  display:block !important;
  margin-top:4px;
  font-weight:600;
}


/* v11: sauberes freigestelltes Hero-Bild, alter CSS-Aufbau komplett aus */
.heroVisual .retroArch,
.heroVisual .archShade,
.heroVisual .stageBack,
.heroVisual .stageFront,
.heroVisual .realBooth,
.heroVisual .boothArt,
.heroVisual .heroVisualImage,
.heroVisual .stage,
.heroVisual .arch,
.heroVisual .modelNote,
.heroVisual .boxMain,
.heroVisual .boxBack,
.heroVisual .flash,
.heroVisual .pole,
.heroVisual .tripod{
  display:none !important;
}

.heroVisual{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  min-height:555px !important;
  overflow:visible !important;
  background:transparent !important;
}

.heroReferenceImage.heroReferenceTransparent{
  width:min(560px,100%) !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  image-rendering:auto;
  transform:translateY(-4px);
  filter:
    drop-shadow(0 18px 18px rgba(0,0,0,.24))
    drop-shadow(0 34px 34px rgba(0,0,0,.16));
}

.scrollHint{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:4px !important;
  transform:translateX(-50%) !important;
  z-index:70 !important;
  color:#111 !important;
  opacity:1 !important;
  visibility:visible !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-decoration:none !important;
}

.scrollHint span{
  width:50px !important;
  height:50px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid #111 !important;
  border-radius:50% !important;
  background:rgba(247,234,210,.92) !important;
  box-shadow:5px 5px 0 rgba(0,0,0,.16) !important;
}

.scrollHint small{
  display:block !important;
  margin-top:4px !important;
  font-weight:700 !important;
  color:#111 !important;
  text-shadow:0 1px 0 rgba(247,234,210,.8);
}

@media(max-width:900px){
  .heroReferenceImage.heroReferenceTransparent{
    width:min(460px,100%) !important;
  }
  .heroVisual{
    min-height:500px !important;
  }
}


/* v12: neues echtes Fotobox-Bild + orangener Hintergrund */
.heroVisual .retroArch,
.heroVisual .archShade,
.heroVisual .stageBack,
.heroVisual .stageFront,
.heroVisual .realBooth,
.heroVisual .boothArt,
.heroVisual .heroVisualImage,
.heroVisual .heroReferenceTransparent,
.heroVisual .stage,
.heroVisual .arch,
.heroVisual .modelNote,
.heroVisual .boxMain,
.heroVisual .boxBack,
.heroVisual .flash,
.heroVisual .pole,
.heroVisual .tripod{
  display:none !important;
}

.heroVisual{
  position:relative !important;
  min-height:590px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  background:transparent !important;
}

.heroOrangeArch{
  position:absolute;
  left:50%;
  top:54px;
  transform:translateX(-50%);
  width:430px;
  height:480px;
  border-radius:230px 230px 0 0;
  background:var(--rust);
  box-shadow:42px 0 0 rgba(148,66,43,.16);
  z-index:1;
}

.heroReferenceImage.heroReferenceFinal{
  position:relative;
  z-index:3;
  width:min(520px,100%);
  height:auto;
  object-fit:contain;
  image-rendering:auto;
  transform:translateY(4px);
  filter:
    drop-shadow(0 20px 22px rgba(0,0,0,.24))
    drop-shadow(0 38px 38px rgba(0,0,0,.16));
}

.scrollHint{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:-4px !important;
  transform:translateX(-50%) !important;
  z-index:70 !important;
  color:#111 !important;
  opacity:1 !important;
  visibility:visible !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-decoration:none !important;
}

.scrollHint span{
  width:50px !important;
  height:50px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid #111 !important;
  border-radius:50% !important;
  background:rgba(247,234,210,.94) !important;
  box-shadow:5px 5px 0 rgba(0,0,0,.16) !important;
}

.scrollHint small{
  display:block !important;
  margin-top:4px !important;
  font-weight:700 !important;
  color:#111 !important;
}

@media(max-width:900px){
  .heroOrangeArch{
    width:330px;
    height:430px;
    top:56px;
  }
  .heroReferenceImage.heroReferenceFinal{
    width:min(430px,100%);
  }
  .heroVisual{
    min-height:520px !important;
  }
}


/* v13 Hero Fixes */
.heroVisual{
  min-height:620px !important;
}

/* Orange Bogen bis ganz nach unten */
.heroOrangeArch{
  top:20px !important;
  bottom:0 !important;
  height:auto !important;
  width:460px !important;
  border-radius:230px 230px 0 0 !important;
  box-shadow:none !important; /* Transparenz-/Geistereffekte entfernen */
  opacity:1 !important;
}

/* Bild ohne zusätzliche Transparenz-/Glow-Effekte */
.heroReferenceImage.heroReferenceFinal{
  filter:none !important;
  opacity:1 !important;
}

/* Scrollen exakt mittig im Hero-Bereich */
.scrollHint{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%, 220px) !important;
  z-index:100 !important;
}

.scrollHint span{
  background:#f7ead2 !important;
}

@media(max-width:900px){
  .heroOrangeArch{
    width:340px !important;
  }
  .scrollHint{
    transform:translate(-50%, 180px) !important;
  }
}


/* v14: Orange Fläche und Scroll-Hinweis komplett entfernen */
.heroOrangeArch{
  display:none !important;
}

.scrollHint{
  display:none !important;
}


/* v15: komplette Titelseite neu gestaltet */
.heroRedesign{
  min-height:640px !important;
  padding:58px 6vw 50px !important;
  display:grid !important;
  grid-template-columns:minmax(0,0.96fr) minmax(420px,0.86fr) !important;
  gap:48px !important;
  align-items:center !important;
  position:relative !important;
  overflow:hidden !important;
}

.heroRedesign::before{
  content:"";
  position:absolute;
  inset:34px 5vw;
  border:1px solid rgba(67,50,41,.18);
  pointer-events:none;
}

.heroCard{
  position:relative;
  z-index:3;
  max-width:650px !important;
  padding:34px 34px 30px;
  border:1.5px solid rgba(67,50,41,.45);
  background:rgba(247,234,210,.38);
  box-shadow:14px 14px 0 rgba(198,95,62,.13);
}

.heroRedesign .eyebrow{
  margin-bottom:12px !important;
}

.heroRedesign h1 span{
  font-size:clamp(74px,8.2vw,122px) !important;
  line-height:.82 !important;
}

.heroRedesign h1 em{
  font-size:clamp(44px,5vw,70px) !important;
}

.heroRedesign .lead{
  font-size:18px !important;
  line-height:1.55 !important;
  margin-top:22px !important;
}

.heroShowcase{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.showcaseArch{
  position:absolute;
  width:420px;
  height:470px;
  border-radius:230px 230px 0 0;
  background:linear-gradient(180deg,#d0714e,#bd5638);
  box-shadow:32px 0 0 rgba(151,74,49,.16), 0 28px 45px rgba(0,0,0,.12);
  z-index:1;
  bottom:22px;
}

.showcaseGlow{
  position:absolute;
  width:500px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.26),rgba(0,0,0,0) 70%);
  bottom:8px;
  z-index:1;
}

.showcaseCard{
  position:relative;
  z-index:2;
  width:min(430px,100%);
  min-height:500px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px 12px 0;
  overflow:hidden;
}

.heroBoothClean{
  position:relative;
  z-index:4;
  width:100%;
  height:auto;
  max-height:535px;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.28));
}

.showcaseBadge{
  position:absolute;
  z-index:5;
  right:10px;
  bottom:75px;
  width:128px;
  height:128px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#101112;
  color:var(--cream);
  border:2px solid var(--rust);
  box-shadow:10px 10px 0 rgba(198,95,62,.22);
  transform:rotate(5deg);
}

.showcaseBadge b{
  font:44px "Bebas Neue",sans-serif;
  line-height:.9;
  color:var(--rust);
}

.showcaseBadge span{
  text-align:center;
  font:15px Inter,sans-serif;
  width:88px;
  line-height:1.2;
}

.heroOrnament{
  position:absolute;
  z-index:2;
  color:var(--rust);
  font-size:46px;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.08));
}

.starA{left:47%;top:34%}
.starB{right:6%;top:28%}
.starC{right:15%;bottom:26%;color:#d8b68e;font-size:34px}

/* alten Hero-Kram definitiv aus */
.heroVisual,.heroOrangeArch,.scrollHint,.retroArch,.realBooth,.boothArt,.heroReferenceImage{
  display:none !important;
}

@media(max-width:1100px){
  .heroRedesign{
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding-top:42px !important;
  }
  .heroShowcase{
    min-height:520px;
  }
}

@media(max-width:700px){
  .heroCard{
    padding:24px 20px;
  }
  .showcaseArch{
    width:330px;
    height:420px;
  }
  .showcaseCard{
    min-height:470px;
    width:min(360px,100%);
  }
  .showcaseBadge{
    right:0;
    bottom:58px;
    transform:scale(.86) rotate(5deg);
  }
}


/* Kundenfix: 200€-Sticker und orange Deko-Flecken im Hero entfernen */
.showcaseBadge,.heroOrnament,.starA,.starB,.starC{display:none!important;}
.heroShowcase::before,.heroShowcase::after,.showcaseCard::before,.showcaseCard::after{content:none!important;display:none!important;}


/* Kundenfix v2: rechtes Fotobox-Bild größer, keine Sticker, keine Transparenz-/Deko-Flecken */
.showcaseBadge,
.heroOrnament,
.starA,
.starB,
.starC{
  display:none !important;
  visibility:hidden !important;
}

.heroRedesign{
  grid-template-columns:minmax(0,0.88fr) minmax(540px,1.02fr) !important;
}

.heroShowcase{
  min-height:700px !important;
}

.showcaseArch{
  width:520px !important;
  height:590px !important;
  border-radius:280px 280px 0 0 !important;
  bottom:12px !important;
}

.showcaseCard{
  width:min(560px,112%) !important;
  min-height:660px !important;
  padding:0 !important;
  overflow:visible !important;
}

.heroBoothClean{
  width:118% !important;
  max-height:670px !important;
  object-fit:contain !important;
  object-position:bottom center !important;
  opacity:1 !important;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.24)) !important;
  mix-blend-mode:normal !important;
}

@media(max-width:1100px){
  .heroShowcase{min-height:640px !important;}
  .showcaseArch{width:500px !important;height:560px !important;}
  .showcaseCard{width:min(540px,100%) !important;min-height:610px !important;}
  .heroBoothClean{width:112% !important;max-height:620px !important;}
}

@media(max-width:700px){
  .heroShowcase{min-height:540px !important;}
  .showcaseArch{width:390px !important;height:450px !important;}
  .showcaseCard{width:100% !important;min-height:510px !important;}
  .heroBoothClean{width:112% !important;max-height:530px !important;}
}


/* Boxed Layout – Website schmaler, kleiner, mittig auf eigenem Hintergrund */
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(198,95,62,.20), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(247,234,210,.10), transparent 25%),
    linear-gradient(135deg,#070809 0%,#111214 46%,#090909 100%) !important;
  padding:24px 0 38px;
}
.pageBackdrop{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(247,234,210,.035) 1px,transparent 1px),
    linear-gradient(rgba(247,234,210,.025) 1px,transparent 1px);
  background-size:58px 58px;
  opacity:.65;
  z-index:-1;
}
.siteShell{
  width:min(1180px, calc(100% - 44px));
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(247,234,210,.18);
  border-radius:22px;
  background:var(--paper);
  box-shadow:0 34px 90px rgba(0,0,0,.44),0 0 0 8px rgba(247,234,210,.035);
}
.topbar{
  position:sticky !important;
  top:0 !important;
  width:100% !important;
  height:72px !important;
  padding:0 42px !important;
  border-radius:22px 22px 0 0;
}
.logo{min-width:178px !important;height:62px !important}
.logo span{font-size:15px !important;letter-spacing:4px !important}
.logo strong{font-size:31px !important}
.logo i{font-size:20px !important;top:15px !important}
nav{gap:22px !important}
nav a,.navbtn,.btn,.priceCard a,button{font-size:16px !important}
.navbtn,.btn{padding:11px 20px !important}

.hero,.heroRedesign{
  min-height:560px !important;
  padding:46px 52px 42px !important;
  grid-template-columns:minmax(0,.94fr) minmax(360px,.78fr) !important;
  gap:34px !important;
}
.heroCard{padding:28px 28px 26px !important;max-width:560px !important}
.hero h1 span,.heroRedesign h1 span{font-size:clamp(62px,7.2vw,96px) !important}
.hero h1 em,.heroRedesign h1 em{font-size:clamp(38px,4.2vw,58px) !important}
.lead,.heroRedesign .lead{font-size:16px !important;line-height:1.5 !important;max-width:500px !important}
.heroShowcase{min-height:480px !important}
.showcaseArch{width:350px !important;height:410px !important}
.showcaseCard{width:min(355px,100%) !important;min-height:440px !important}
.heroBoothClean{max-height:460px !important}
.showcaseBadge{width:108px !important;height:108px !important;right:0 !important;bottom:62px !important}
.showcaseBadge b{font-size:36px !important}

.photoFeature,.pricing,.gallery,.serviceProcess,.faqWide,.footer{
  padding-left:52px !important;
  padding-right:52px !important;
}
.photoFeature{padding-top:34px !important;padding-bottom:34px !important;gap:32px !important}
.featureImage{min-height:300px !important;max-height:390px !important}
.photoFeature h2,.pricing h2,.sectionHead h2,.inquiryPanel h2,.faqWide h2{font-size:40px !important}
.script{font-size:28px !important}

.pricing{padding-top:34px !important;padding-bottom:34px !important}
.priceGrid{gap:22px !important}
.priceCard{padding:18px 20px !important}
.priceCard h3{font-size:29px !important}
.priceCard strong{font-size:43px !important}
.priceCard li{font-size:14px !important;margin:7px 0 !important}

.gallery{padding-top:28px !important;padding-bottom:36px !important}
.galleryGrid{gap:18px !important}
.galleryItem{border-width:8px !important}
.placeholderCard{min-height:180px !important}

.serviceProcess{padding-top:32px !important;padding-bottom:32px !important}
.serviceProcessGrid{gap:20px !important}
.processPanel,.servicePanel,.inquiryPanel{padding:18px !important}
.timeline article{padding:9px 10px !important;grid-template-columns:42px 1fr !important}
.timeline span{font-size:28px !important}
.timeline h3{font-size:22px !important}
.timeline p{font-size:13px !important}
.quickServiceList{gap:7px !important}
.quickServiceList li{font-size:13px !important}
input,select,textarea{padding:11px 10px !important;font-size:13px !important}

.faqWide{padding-top:28px !important;padding-bottom:36px !important}
.faqGrid{gap:10px 14px !important}
.faqGrid details{padding:12px 14px !important}
.faqGrid summary{font-size:22px !important}
.faqGrid p{font-size:13px !important}

.footer{padding-top:30px !important;padding-bottom:42px !important}
@media(max-width:1220px){.siteShell{width:min(1080px, calc(100% - 30px))}}
@media(max-width:1000px){
  body{padding:12px 0 24px}
  .siteShell{width:calc(100% - 18px);border-radius:16px}
  .topbar{border-radius:16px 16px 0 0;padding:0 20px !important}
  .hero,.heroRedesign,.photoFeature,.priceGrid,.serviceProcessGrid,.faqGrid,.footer{grid-template-columns:1fr !important}
  .hero,.heroRedesign,.photoFeature,.pricing,.gallery,.serviceProcess,.faqWide,.footer{padding-left:24px !important;padding-right:24px !important}
  .heroShowcase{min-height:430px !important}
}


/* Boxed Layout v2: Inhalt wieder etwas größer */
.siteShell{
  width:min(1320px, calc(100% - 40px)) !important;
}

.hero,.heroRedesign{
  min-height:620px !important;
  padding:58px 64px 50px !important;
}

.hero h1 span,.heroRedesign h1 span{
  font-size:clamp(72px,8vw,112px) !important;
}

.hero h1 em,.heroRedesign h1 em{
  font-size:clamp(44px,5vw,66px) !important;
}

.lead,.heroRedesign .lead{
  font-size:18px !important;
}

.heroCard{
  max-width:640px !important;
  padding:34px !important;
}

.showcaseArch{
  width:420px !important;
  height:470px !important;
}

.showcaseCard{
  width:min(430px,100%) !important;
  min-height:520px !important;
}

.heroBoothClean{
  max-height:540px !important;
}

.photoFeature,.pricing,.gallery,.serviceProcess,.faqWide,.footer{
  padding-left:64px !important;
  padding-right:64px !important;
}

.photoFeature h2,.pricing h2,.sectionHead h2,.inquiryPanel h2,.faqWide h2{
  font-size:48px !important;
}

.script{
  font-size:34px !important;
}

.priceCard strong{
  font-size:56px !important;
}

.priceCard h3{
  font-size:34px !important;
}

.faqGrid summary{
  font-size:26px !important;
}

@media(max-width:1400px){
  .siteShell{
    width:min(1240px, calc(100% - 28px)) !important;
  }
}


/* v3 Navigation größer + immer sichtbar */
.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:9999 !important;
  height:88px !important;
  padding:0 54px !important;
  backdrop-filter:blur(10px);
}

.logo{
  min-width:220px !important;
  height:72px !important;
}
.logo strong{font-size:38px !important;}
.logo span{font-size:17px !important;}
nav a{font-size:18px !important;}
.navbtn{
  font-size:18px !important;
  padding:14px 24px !important;
}

/* Hero viel größer */
.hero,
.heroRedesign{
  min-height:760px !important;
  padding:70px 72px 60px !important;
}

.heroShowcase{
  min-height:680px !important;
}

.showcaseArch{
  width:520px !important;
  height:620px !important;
}

.showcaseCard{
  width:min(560px,100%) !important;
  min-height:650px !important;
}

.heroBoothClean{
  max-height:680px !important;
}

.showcaseBadge{
  width:130px !important;
  height:130px !important;
}

.hero h1 span,
.heroRedesign h1 span{
  font-size:clamp(84px,9vw,132px) !important;
}

.hero h1 em,
.heroRedesign h1 em{
  font-size:clamp(52px,6vw,78px) !important;
}


/* Fullwidth zurück: kein Bildschirm-im-Bildschirm mehr */
body{
  padding:0 !important;
  background:var(--black) !important;
}

.pageBackdrop{
  display:none !important;
}

.siteShell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  background:transparent !important;
}

/* Navigation wirklich sticky/fixed oben */
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:999999 !important;
  border-radius:0 !important;
  height:88px !important;
  padding:0 6vw !important;
  background:rgba(13,15,16,.96) !important;
  backdrop-filter:blur(10px);
}

main{
  padding-top:88px !important;
}

html{
  scroll-padding-top:98px !important;
}

/* Fullwidth-Abstände wieder harmonischer */
.hero,
.heroRedesign{
  padding-left:7vw !important;
  padding-right:7vw !important;
}

.photoFeature,
.pricing,
.gallery,
.serviceProcess,
.faqWide,
.footer{
  padding-left:7vw !important;
  padding-right:7vw !important;
}


/* v16: eckiges Design behalten, Bereiche füllen, schwebende eckige Navigation */
body{
  padding:0 !important;
  background:
    radial-gradient(circle at 14% 12%,rgba(198,95,62,.22),transparent 28%),
    radial-gradient(circle at 86% 18%,rgba(216,170,103,.10),transparent 24%),
    linear-gradient(135deg,#08090a 0%,#111214 45%,#090909 100%) !important;
}
main{padding-top:110px !important}
html{scroll-padding-top:120px !important}

.topbar{
  position:fixed !important;
  top:18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(1320px,calc(100% - 42px)) !important;
  height:82px !important;
  z-index:99999 !important;
  border-radius:0 !important;
  padding:0 34px !important;
  border:1.5px solid rgba(247,234,210,.20) !important;
  background:rgba(13,15,16,.90) !important;
  backdrop-filter:blur(14px);
  box-shadow:14px 14px 0 rgba(198,95,62,.12),0 22px 55px rgba(0,0,0,.38);
}
nav{gap:20px !important}
nav a{font-size:17px !important}
.navbtn,.btn,.priceCard a,button{
  border-radius:0 !important;
  box-shadow:8px 8px 0 rgba(198,95,62,.22) !important;
}
.logo strong{transform:rotate(-7deg) !important}
.logo span{transform:rotate(-4deg) !important}

/* Hero/Sections: eckig, dichter gefüllt */
.hero,.heroRedesign{
  min-height:720px !important;
  padding:70px 7vw 58px !important;
}
.heroText,.heroCard,.priceCard,.processPanel,.servicePanel,.inquiryPanel,.faqGrid details,.panelBlock{
  border-radius:0 !important;
  border:1.5px solid rgba(66,48,39,.42) !important;
  box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08) !important;
}
.heroText,.heroCard{
  max-width:720px !important;
  padding:42px 42px 38px !important;
}
.hero h1 span,.heroRedesign h1 span{font-size:clamp(82px,8.5vw,132px) !important}
.hero h1 em,.heroRedesign h1 em{font-size:clamp(50px,5.4vw,78px) !important}
.lead,.heroRedesign .lead{font-size:19px !important;line-height:1.58 !important}
.hero::after,.heroRedesign::after{
  content:"ERLANGER KNIPSKISTE";
  position:absolute;
  right:5vw;
  bottom:28px;
  font:96px "Bebas Neue",sans-serif;
  letter-spacing:8px;
  color:rgba(66,48,39,.055);
  pointer-events:none;
}
.showcaseArch{border-radius:0 !important}
.showcaseCard{min-height:610px !important}
.heroBoothClean{max-height:640px !important}

/* weniger leerer Abstand */
.photoFeature,.pricing,.gallery,.serviceProcess,.customDesignSection,.aboutSection,.faqWide{
  padding-top:58px !important;
  padding-bottom:58px !important;
}
.photoFeature{grid-template-columns:1fr 1fr !important}
.featureImage{min-height:480px !important;max-height:620px !important}
.placeholderList span{border-radius:0 !important}

/* Custom Design */
.customDesignSection{
  padding-left:7vw;
  padding-right:7vw;
}
.customDesignGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:stretch;
}
.panelBlock{
  padding:34px;
  background:rgba(248,236,212,.36);
}
.customDesignSection h2,.aboutSection h2{
  font:58px "Bebas Neue",sans-serif;
  line-height:.95;
  margin:0 0 18px;
}
.customText p,.aboutText p{
  font-size:18px;
  line-height:1.62;
}
.designSteps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:26px;
}
.designSteps article{
  border:1px solid rgba(66,48,39,.30);
  padding:16px;
  background:rgba(255,246,228,.28);
}
.designSteps span{
  color:var(--rust);
  font:34px "Bebas Neue",sans-serif;
}
.designSteps b{
  display:block;
  font:24px "Bebas Neue",sans-serif;
}
.designSteps p{
  font-size:13px;
  line-height:1.45;
  margin:6px 0 0;
}
.designPreview h3{
  font:36px "Bebas Neue",sans-serif;
  margin:0 0 18px;
}
.designCards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.designCards div{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:10px solid var(--cream);
  background:#17110f;
  color:var(--cream);
  padding:18px;
  transform:rotate(-2deg);
  box-shadow:0 14px 24px rgba(0,0,0,.22);
}
.designCards div:nth-child(even){transform:rotate(2deg)}
.designCards small{color:var(--rust2);font-weight:700}
.designCards strong{font:34px "Bebas Neue",sans-serif;margin-top:6px}
.designCards em{font-style:normal;color:#d7c2a3}

/* Über uns */
.aboutSection{
  padding-left:7vw;
  padding-right:7vw;
}
.aboutGrid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
}
.aboutImages{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.aboutPhoto{
  min-height:220px;
  border:10px solid var(--cream);
  background:#241811;
  box-shadow:0 18px 28px rgba(0,0,0,.35);
  color:var(--cream);
}
.aboutPhoto.real{
  grid-row:span 2;
  min-height:460px;
}
.aboutPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.aboutPhoto.placeholder{
  display:grid;
  place-items:center;
  text-align:center;
  font:32px "Bebas Neue",sans-serif;
}
.aboutPhoto.placeholder small{
  font:14px Inter,sans-serif;
}
.aboutFacts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}
.aboutFacts span{
  border:1px solid rgba(247,234,210,.20);
  padding:12px;
  background:rgba(255,255,255,.04);
}

/* FAQ dichter und symmetrisch */
.faqGrid{
  grid-template-columns:repeat(4,1fr) !important;
}
.faqGrid details{
  min-height:150px;
}
.faqGrid summary{font-size:24px !important}

/* Galerie dichter */
.galleryGrid{
  grid-template-columns:repeat(4,1fr) !important;
}
.galleryItem:nth-child(1){
  grid-column:span 2;
  grid-row:span 2;
}
.galleryItem:nth-child(1) img{aspect-ratio:1.45/1}

/* Navigation bei kleinen Bildschirmen */
@media(max-width:1200px){
  nav a{font-size:15px !important}
  nav{gap:14px !important}
}
@media(max-width:1000px){
  .topbar{top:10px !important;width:calc(100% - 20px) !important;padding:0 22px !important}
  nav{display:none !important}
  .customDesignGrid,.aboutGrid,.photoFeature,.faqGrid,.galleryGrid{
    grid-template-columns:1fr !important;
  }
  .designSteps,.aboutFacts{grid-template-columns:1fr !important}
  .galleryItem:nth-child(1){grid-column:auto;grid-row:auto}
  .heroText,.heroCard{padding:30px 24px !important}
}


/* v17: Hero oben kompakter, Ablauf vor Preisen, Rounded Backdrop hinter Fotobox */
main{
  padding-top:86px !important;
}

.topbar{
  top:10px !important;
  height:76px !important;
}

.hero,
.heroRedesign{
  min-height:650px !important;
  padding-top:38px !important;
  padding-bottom:46px !important;
}

.hero::before,
.heroRedesign::before{
  inset:14px 5vw 24px !important;
}

.heroText,
.heroCard{
  padding-top:30px !important;
  padding-bottom:30px !important;
}

.eyebrow{
  margin-bottom:8px !important;
}

.hero h1 span,
.heroRedesign h1 span{
  font-size:clamp(76px,8vw,122px) !important;
}

.hero h1 em,
.heroRedesign h1 em{
  font-size:clamp(46px,5vw,72px) !important;
}

.lead,
.heroRedesign .lead{
  margin-top:18px !important;
}

.actions{
  margin-top:24px !important;
}

.heroShowcase{
  min-height:560px !important;
}

.showcaseArch{
  display:block !important;
  width:455px !important;
  height:515px !important;
  border-radius:230px 230px 26px 26px !important;
  background:
    radial-gradient(circle at 50% 24%,rgba(255,224,178,.25),transparent 28%),
    linear-gradient(180deg,#d97852,#b94f35) !important;
  box-shadow:
    28px 0 0 rgba(148,66,43,.14),
    0 28px 46px rgba(0,0,0,.20) !important;
}

.showcaseCard{
  min-height:540px !important;
}

.heroBoothClean,
.heroReferenceImage{
  max-height:565px !important;
}

.showcaseBadge{
  bottom:62px !important;
}

.serviceProcess{
  padding-top:52px !important;
}

/* Preisbereich nach Ablauf optisch anschließen */
.pricing{
  padding-top:54px !important;
}

/* Scrollposition für fixe Navigation */
#ablauf,
#preise,
#custom-design,
#ueber-uns,
#faq,
#kontakt{
  scroll-margin-top:105px;
}

@media(max-width:1000px){
  main{padding-top:92px !important}
  .hero,.heroRedesign{
    padding-top:32px !important;
    min-height:auto !important;
  }
  .heroShowcase{
    min-height:500px !important;
  }
  .showcaseArch{
    width:340px !important;
    height:430px !important;
  }
}


/* Update laut Wunsch */

/* FAQ deutlich sichtbarer */
#faq,
.faqWide{
    background:#1b1b1b !important;
    padding-top:90px !important;
    padding-bottom:90px !important;
}

.faqWide h2,
#faq h2{
    font-size:72px !important;
    color:#f2e4ca !important;
    text-align:center !important;
    margin-bottom:40px !important;
}

.faqGrid details{
    background:#2a2a2a !important;
    border:2px solid #c65f3e !important;
}

/* Custom Design gleicher Hintergrund wie Preisboxen */
#custom-design .panelBlock,
.customDesignSection .panelBlock,
.designPreview,
.customText{
    background:rgba(248,236,212,.42) !important;
}

/* Infotext im Hero kleiner */
.hero p,
.heroRedesign p,
.lead{
    font-size:16px !important;
    line-height:1.6 !important;
}

/* Grauen Hintergrundschriftzug entfernen */
.hero::after,
.heroRedesign::after{
    display:none !important;
}

/* Preisbuttons unten ausrichten */
.priceGrid{
    align-items:stretch !important;
}

.priceCard{
    display:flex !important;
    flex-direction:column !important;
}

.priceCard a,
.priceCard .btn,
.priceCard button{
    margin-top:auto !important;
}


/* v18: Custom Design, Preise, FAQ, Galerie und Hero-Text finalisieren */

/* Hero-Text deutlich kleiner */
.hero .lead,
.heroRedesign .lead,
.lead{
  font-size:14.5px !important;
  line-height:1.48 !important;
  max-width:520px !important;
}

/* Galerie-Hinweis ist entfernt, Abstand darunter reduzieren */
.gallery{
  padding-bottom:34px !important;
}
.gallery .hint{
  display:none !important;
  margin:0 !important;
}
.galleryGrid{
  margin-bottom:0 !important;
}

/* Custom Design bekommt exakt den Preis-Hintergrund und wird kompakter */
#custom-design,
.customDesignSection{
  background:
    linear-gradient(90deg,rgba(255,255,255,.20),rgba(0,0,0,.04)),
    radial-gradient(rgba(120,65,30,.14) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06)) !important;
  background-color:var(--paper) !important;
  background-size:auto,10px 10px,auto !important;
  padding-top:38px !important;
  padding-bottom:38px !important;
}

.customDesignSection .panelBlock,
#custom-design .panelBlock,
.customDesignSection .customText,
.customDesignSection .designPreview{
  background:rgba(248,236,212,.42) !important;
  border:1.5px solid rgba(66,48,39,.42) !important;
  box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08) !important;
  padding:22px !important;
}

.customDesignSection .script{
  font-size:24px !important;
  margin-bottom:0 !important;
}

.customDesignSection h2{
  font-size:40px !important;
  margin:0 0 10px !important;
  line-height:.9 !important;
}

.customDesignSection h3{
  font-size:28px !important;
  margin:0 0 12px !important;
}

.customText p,
.customDesignSection p{
  font-size:14px !important;
  line-height:1.48 !important;
}

.designSteps{
  margin-top:14px !important;
  gap:10px !important;
}

.designSteps article{
  padding:11px !important;
}

.designSteps span{
  font-size:26px !important;
}

.designSteps b{
  font-size:19px !important;
}

.designSteps p{
  font-size:12px !important;
}

.designCards{
  gap:10px !important;
}

.designCards div{
  min-height:112px !important;
  border-width:7px !important;
  padding:12px !important;
}

.designCards strong{
  font-size:25px !important;
}

/* 200 € Paket: Am beliebtesten */
.priceCard.featured{
  position:relative !important;
  overflow:visible !important;
}

.popularBadge{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%) rotate(-1deg);
  background:#101112;
  color:var(--cream);
  border:1.5px solid var(--rust);
  padding:7px 18px;
  font:18px "Bebas Neue",sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:6px 6px 0 rgba(198,95,62,.20);
  white-space:nowrap;
  z-index:5;
}

/* Preisbuttons bleiben unten */
.priceCard{
  display:flex !important;
  flex-direction:column !important;
}
.priceCard a{
  margin-top:auto !important;
}

/* FAQ neu: heller, eckig, nicht orange leuchtend, Überschrift sauber auf einer Höhe */
#faq,
.faqWide{
  background:
    linear-gradient(90deg,rgba(255,255,255,.20),rgba(0,0,0,.04)),
    radial-gradient(rgba(120,65,30,.12) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06)) !important;
  background-color:var(--paper) !important;
  color:#151515 !important;
  padding-top:48px !important;
  padding-bottom:56px !important;
}

.faqIntro{
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:18px !important;
  margin-bottom:28px !important;
}

.faqIntro .script{
  font-size:34px !important;
  line-height:1 !important;
  margin:0 !important;
  color:var(--rust) !important;
}

.faqWide h2,
#faq h2{
  font-size:58px !important;
  line-height:.9 !important;
  margin:0 !important;
  color:#151515 !important;
  text-align:left !important;
}

.faqGrid{
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
}

.faqGrid details{
  background:rgba(248,236,212,.42) !important;
  border:1.5px solid rgba(66,48,39,.42) !important;
  box-shadow:8px 8px 0 rgba(198,95,62,.10) !important;
  color:#151515 !important;
  min-height:135px !important;
  padding:16px !important;
}

.faqGrid summary{
  color:#151515 !important;
  font-size:23px !important;
  line-height:1.05 !important;
}

.faqGrid summary::marker{
  color:var(--rust) !important;
}

.faqGrid p{
  color:#31241e !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

/* Responsive FAQ */
@media(max-width:1100px){
  .faqGrid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:700px){
  .faqIntro{
    display:block !important;
    text-align:center !important;
  }
  .faqWide h2,#faq h2{
    text-align:center !important;
  }
  .faqGrid{
    grid-template-columns:1fr !important;
  }
}


/* v19 */

/* Preisüberschrift kompakter */
.pricing{
  padding-top:38px !important;
}
.pricing .script{
  font-size:26px !important;
  margin-bottom:0 !important;
}
.pricing h2{
  font-size:42px !important;
  line-height:.9 !important;
  margin:0 0 18px !important;
}

/* Am beliebtesten deutlich kleiner */
.popularBadge{
  top:-11px !important;
  padding:4px 10px !important;
  font-size:12px !important;
  letter-spacing:.5px !important;
  box-shadow:4px 4px 0 rgba(198,95,62,.15) !important;
}

/* Hintergrund exakt fortführen statt anderer Punktung */
#custom-design,
.customDesignSection,
#preise,
.pricing{
  background:var(--paper) !important;
  position:relative;
}

/* Trennelement zwischen Ablauf und Preisen */
.pricing::before{
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:7vw;
  right:7vw;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(66,48,39,.28),
    transparent
  );
}

/* Gleiche Punktung wie vorherige Bereiche */
#custom-design::after,
.pricing::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(66,48,39,.10) 1px, transparent 1px);
  background-size:10px 10px;
  opacity:.65;
}

/* Inhalte über Punktung */
#custom-design > *,
.pricing > *{
  position:relative;
  z-index:1;
}


/* v20 */

/* "Am beliebtesten" erstmal komplett entfernen */
.popularBadge{
  display:none !important;
}

/* Trennelement wieder entfernen */
.pricing::before{
  display:none !important;
}

/* Ablauf, Preise und Custom Design: exakt gleicher Papier-Hintergrund */
.serviceProcess,
#ablauf,
.pricing,
#preise,
.customDesignSection,
#custom-design{
  background:
    linear-gradient(90deg,rgba(255,255,255,.20),rgba(0,0,0,.04)),
    radial-gradient(rgba(120,65,30,.14) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06)) !important;
  background-color:var(--paper) !important;
  background-size:auto,10px 10px,auto !important;
}

/* Doppelte Overlays/Punktungen entfernen, damit keine Farbdifferenz entsteht */
#custom-design::after,
.customDesignSection::after,
.pricing::after,
#preise::after,
.serviceProcess::after,
#ablauf::after{
  display:none !important;
}

/* Platzhalter / Design-Cards bei Custom Design auf 16:9 */
.designCards{
  grid-template-columns:1fr 1fr !important;
}

.designCards div{
  aspect-ratio:16/9 !important;
  min-height:auto !important;
  height:auto !important;
  width:100% !important;
  justify-content:center !important;
}

/* Custom Design kompakt halten */
.customDesignSection{
  padding-top:36px !important;
  padding-bottom:36px !important;
}

.customDesignSection .panelBlock,
#custom-design .panelBlock,
.customDesignSection .customText,
.customDesignSection .designPreview{
  background:rgba(248,236,212,.42) !important;
}


/* v21: Punktmuster wirklich vereinheitlicht + kleine Textkorrekturen */

/* Gleicher Hintergrund für Ablauf, Preise, Custom Design und FAQ */
.unifiedPaper,
#ablauf,
.serviceProcess,
#preise,
.pricing,
#custom-design,
.customDesignSection,
#faq,
.faqWide{
  background-color:var(--paper) !important;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.20),rgba(0,0,0,.04)),
    radial-gradient(rgba(120,65,30,.14) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06)) !important;
  background-size:auto,10px 10px,auto !important;
  background-position:0 0,0 0,0 0 !important;
  background-repeat:repeat,repeat,repeat !important;
}

/* Alle zusätzlichen Punkt-/Overlay-Layer ausschalten, die die engen Reihen verursachen */
#ablauf::before,
#ablauf::after,
.serviceProcess::before,
.serviceProcess::after,
#preise::before,
#preise::after,
.pricing::before,
.pricing::after,
#custom-design::before,
#custom-design::after,
.customDesignSection::before,
.customDesignSection::after,
#faq::before,
#faq::after,
.faqWide::before,
.faqWide::after{
  display:none !important;
  content:none !important;
}

/* Inhalt über Hintergrund */
#ablauf > *,
.serviceProcess > *,
#preise > *,
.pricing > *,
#custom-design > *,
.customDesignSection > *,
#faq > *,
.faqWide > *{
  position:relative;
  z-index:1;
}

/* Über-uns-Platzhaltertext kleiner */
.aboutText p{
  font-size:14px !important;
  line-height:1.5 !important;
}

/* Nur der große Script-Schriftzug "für dein Event" etwas höher, damit er den Text nicht berührt */
.hero h1 em,
.heroRedesign h1 em{
  margin-top:-16px !important;
  margin-bottom:22px !important;
  position:relative !important;
  top:-6px !important;
}

/* Hero-Fließtext bleibt kompakt und hat mehr Luft nach oben */
.hero .lead,
.heroRedesign .lead,
.lead{
  margin-top:8px !important;
  font-size:14.5px !important;
  line-height:1.5 !important;
}

/* FAQ mit gleichem Papierlook, aber sauber lesbar */
#faq,
.faqWide{
  color:#151515 !important;
  padding-top:48px !important;
  padding-bottom:56px !important;
}

.faqGrid details{
  background:rgba(248,236,212,.42) !important;
  border:1.5px solid rgba(66,48,39,.42) !important;
  box-shadow:8px 8px 0 rgba(198,95,62,.10) !important;
  color:#151515 !important;
}

/* Custom-Design-16:9-Platzhalter beibehalten */
.designCards div{
  aspect-ratio:16/9 !important;
  min-height:auto !important;
}

/* v22 Mobile Optimierung */
.mobileMenuButton{display:none}

@media(max-width:1100px){
  html{scroll-padding-top:92px!important}
  body{overflow-x:hidden!important}
  main{padding-top:96px!important}

  .topbar{
    top:10px!important;
    width:calc(100% - 18px)!important;
    height:74px!important;
    padding:0 16px!important;
    gap:14px!important;
  }
  .logo{min-width:170px!important;height:58px!important}
  .logo span{font-size:14px!important;letter-spacing:3.5px!important;margin-left:17px!important}
  .logo strong{font-size:30px!important}
  .logo i{font-size:18px!important;top:14px!important;right:0!important}

  .mobileMenuButton{
    display:block!important;
    width:auto!important;
    margin-left:auto!important;
    margin-top:0!important;
    padding:9px 13px!important;
    background:var(--rust)!important;
    color:#111!important;
    border:0!important;
    font-size:24px!important;
    line-height:1!important;
    box-shadow:5px 5px 0 rgba(198,95,62,.18)!important;
  }
  .topbar .navbtn{display:none!important}

  .topbar nav{
    display:none!important;
    position:absolute!important;
    top:82px!important;
    left:0!important;
    right:0!important;
    flex-direction:column!important;
    gap:0!important;
    background:rgba(13,15,16,.98)!important;
    border:1.5px solid rgba(247,234,210,.18)!important;
    box-shadow:10px 10px 0 rgba(198,95,62,.14),0 22px 50px rgba(0,0,0,.42)!important;
    padding:10px!important;
  }
  .topbar nav.is-open{display:flex!important}
  .topbar nav a{
    display:block!important;
    padding:13px 12px!important;
    border-bottom:1px solid rgba(247,234,210,.08)!important;
    font-size:19px!important;
  }

  .hero,.heroRedesign{
    min-height:auto!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
    padding:38px 22px 44px!important;
  }
  .heroText,.heroCard{
    max-width:none!important;
    padding:26px 20px 24px!important;
  }
  .hero h1 span,.heroRedesign h1 span{
    font-size:clamp(58px,16vw,86px)!important;
    line-height:.82!important;
  }
  .hero h1 em,.heroRedesign h1 em{
    font-size:clamp(36px,10vw,54px)!important;
    margin-top:-8px!important;
    margin-bottom:12px!important;
    top:-2px!important;
  }
  .hero .lead,.heroRedesign .lead,.lead{font-size:14px!important;line-height:1.5!important}
  .actions{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .btn{width:100%!important;text-align:center!important}

  .heroShowcase{min-height:440px!important}
  .showcaseArch{width:min(330px,88vw)!important;height:410px!important}
  .showcaseCard{width:min(360px,94vw)!important;min-height:440px!important}
  .heroBoothClean,.heroReferenceImage{max-height:450px!important}
  .showcaseBadge{right:8px!important;bottom:54px!important;transform:scale(.78) rotate(5deg)!important;transform-origin:center!important}

  .photoFeature,.pricing,.gallery,.serviceProcess,.customDesignSection,.aboutSection,.faqWide,.footer{
    padding-left:22px!important;
    padding-right:22px!important;
    padding-top:38px!important;
    padding-bottom:38px!important;
  }
  .photoFeature,.customDesignGrid,.aboutGrid,.serviceProcessGrid,.priceGrid,.galleryGrid,.faqGrid,.footer{
    grid-template-columns:1fr!important;
  }
  .featureImage{min-height:auto!important;max-height:none!important;aspect-ratio:4/3!important}
  .photoFeature h2,.pricing h2,.customDesignSection h2,.aboutSection h2,.sectionHead h2,.inquiryPanel h2,.faqWide h2{
    font-size:42px!important;
  }
  .script{font-size:28px!important}
  .priceCard{padding:22px!important}
  .priceCard.featured{transform:none!important}
  .priceCard strong{font-size:48px!important}

  .processPanel,.servicePanel,.inquiryPanel,.panelBlock{padding:20px!important}
  .timeline article{grid-template-columns:40px 1fr!important;padding:12px!important}
  .timeline span{font-size:28px!important}
  .timeline h3{font-size:22px!important}
  .timeline p{font-size:13px!important}
  .quickServiceList,.designSteps,.designCards,.aboutFacts{grid-template-columns:1fr!important}
  .designCards div{aspect-ratio:16/9!important}

  .aboutImages{grid-template-columns:1fr 1fr!important}
  .aboutPhoto.real{grid-column:1/-1!important;min-height:auto!important;aspect-ratio:4/3!important}
  .aboutPhoto.placeholder{min-height:auto!important;aspect-ratio:1/1!important}

  .faqIntro{display:block!important;text-align:center!important;margin-bottom:22px!important}
  .faqWide h2,#faq h2{text-align:center!important;font-size:44px!important}
  .faqGrid details{min-height:auto!important}
  input,select,textarea{font-size:16px!important}
}

@media(max-width:520px){
  .topbar{height:68px!important}
  main{padding-top:86px!important}
  .logo{min-width:150px!important}
  .logo span{font-size:12px!important;letter-spacing:3px!important}
  .logo strong{font-size:26px!important}

  .hero,.heroRedesign{padding-left:16px!important;padding-right:16px!important}
  .heroText,.heroCard{padding:22px 16px!important}
  .hero h1 span,.heroRedesign h1 span{font-size:58px!important}
  .hero h1 em,.heroRedesign h1 em{font-size:36px!important}

  .heroShowcase{min-height:380px!important}
  .showcaseArch{width:285px!important;height:360px!important}
  .showcaseCard{width:305px!important;min-height:385px!important}
  .heroBoothClean,.heroReferenceImage{max-height:390px!important}

  .photoFeature,.pricing,.gallery,.serviceProcess,.customDesignSection,.aboutSection,.faqWide,.footer{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .galleryItem:nth-child(1){grid-column:auto!important;grid-row:auto!important}
  .galleryItem,.tilt-left,.tilt-right{transform:none!important}
  .aboutImages{grid-template-columns:1fr!important}
}

/* v23 finale Anpassungen */
main{padding-top:0!important}
body{
  background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(0,0,0,.04)),radial-gradient(rgba(120,65,30,.14) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06))!important;
  background-color:var(--paper)!important;
  background-size:auto,10px 10px,auto!important;
  background-position:0 0,0 0,0 0!important;
}
body:before{display:none!important}
.topbar{top:14px!important;box-shadow:0 18px 45px rgba(0,0,0,.28)!important;border-radius:0!important}
.navbtn,.btn,.priceCard a,button{box-shadow:6px 6px 0 rgba(0,0,0,.18)!important}
.hero,.heroRedesign{padding-left:9vw!important;padding-right:9vw!important}
.heroText,.heroCard{margin-left:2.2vw!important}
.featureCopy p,.photoFeature p{font-size:15px!important;line-height:1.55!important}
.galleryItem,.designCard,.designPlaceholder{cursor:pointer!important;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease!important}
.galleryItem:hover,.designCard:hover,.designPlaceholder:hover{transform:translateY(-6px) scale(1.015)!important;box-shadow:0 22px 34px rgba(0,0,0,.28)!important;filter:brightness(1.04)}
.designCard,.designPlaceholder{position:relative;overflow:hidden}
.designCard:after,.designPlaceholder:after,.galleryItem:after{content:"Zum Vergrößern";position:absolute;right:8px;bottom:8px;padding:5px 7px;background:rgba(16,17,18,.82);color:var(--cream);font:11px Inter,sans-serif;opacity:0;transform:translateY(4px);transition:.2s ease;pointer-events:none}
.designCard:hover:after,.designPlaceholder:hover:after,.galleryItem:hover:after{opacity:1;transform:translateY(0)}
.designCards{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
.designCards div,.designPlaceholder{aspect-ratio:16/9!important;min-height:auto!important;height:auto!important}
.designPlaceholder{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;border:7px solid var(--cream)!important;background:#17110f!important;color:var(--cream)!important;padding:12px!important;box-shadow:0 14px 24px rgba(0,0,0,.22)!important}
.designPlaceholder span{font:26px "Bebas Neue",sans-serif}.designPlaceholder small{font:13px Inter,sans-serif;color:#d7c2a3}
.aboutSection .galleryItem,.aboutPhoto{cursor:default!important}.aboutSection .galleryItem:after,.aboutPhoto:after{display:none!important}
body.lightbox-open{overflow:clip!important;padding-right:0!important}
.lightbox.is-open{animation:fadeInLightbox .18s ease both}.lightboxFigure{animation:zoomInLightbox .22s ease both}
@keyframes fadeInLightbox{from{opacity:0}to{opacity:1}}@keyframes zoomInLightbox{from{transform:scale(.96);opacity:.75}to{transform:scale(1);opacity:1}}
.priceCard.featured:hover{transform:translateY(-12px) rotate(-.4deg)!important;box-shadow:16px 16px 0 rgba(198,95,62,.24),0 28px 55px rgba(0,0,0,.14)!important}
@media(max-width:1100px){main{padding-top:0!important}.topbar{top:10px!important}.hero,.heroRedesign{padding-left:22px!important;padding-right:22px!important;padding-top:104px!important}.heroText,.heroCard{margin-left:0!important}}
@media(max-width:520px){.hero,.heroRedesign{padding-top:90px!important}.designCards{grid-template-columns:1fr!important}}


/* v24: finale Bedienung + Mobile weiter sauber */

/* Mehr Platz oben, damit Navigation nichts verdeckt */
.hero,
.heroRedesign{
  padding-top:128px !important;
}

@media(max-width:1100px){
  .hero,
  .heroRedesign{
    padding-top:124px !important;
  }
}
@media(max-width:520px){
  .hero,
  .heroRedesign{
    padding-top:110px !important;
  }
}

/* Custom Design Überschrift nebeneinander */
.customDesignSection .customText .script,
.customDesignSection .customText h2{
  display:inline-block !important;
  vertical-align:baseline !important;
}
.customDesignSection .customText .script{
  margin-right:14px !important;
  margin-bottom:0 !important;
}
.customDesignSection .customText h2{
  margin-bottom:14px !important;
}

/* Ablauf/Leistungen Headings auf eine Höhe bringen */
.serviceProcessGrid{
  align-items:start !important;
}
.processPanel .sectionHead,
.servicePanel .sectionHead{
  min-height:58px !important;
  display:flex !important;
  align-items:baseline !important;
}
.processPanel .sectionHead .script,
.servicePanel .sectionHead .script{
  margin-bottom:0 !important;
}
.processPanel .sectionHead h2,
.servicePanel .sectionHead h2{
  margin-bottom:0 !important;
}

/* 3 Bilder zu den Custom-Design-Schritten links */
.stepImagePlaceholders{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.stepImagePlaceholder{
  aspect-ratio:16/9 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  border:7px solid var(--cream) !important;
  background:#17110f !important;
  color:var(--cream) !important;
  padding:10px !important;
  box-shadow:0 14px 24px rgba(0,0,0,.22) !important;
  cursor:pointer !important;
}
.stepImagePlaceholder span{
  font:24px "Bebas Neue",sans-serif;
}
.stepImagePlaceholder small{
  font:12px Inter,sans-serif;
  color:#d7c2a3;
}

/* Rechte Custom Design Box bleibt nur für Beispiel-Designs */
.designPreview .stepImagePlaceholder{
  display:none !important;
}

/* Anfrage-Box kurz markieren */
.inquiryPanel.pulseHighlight{
  animation:inquiryPulse 1.15s ease both;
}
@keyframes inquiryPulse{
  0%{box-shadow:0 0 0 0 rgba(198,95,62,.0),12px 12px 0 rgba(198,95,62,.14)}
  22%{box-shadow:0 0 0 8px rgba(198,95,62,.28),12px 12px 0 rgba(198,95,62,.24);transform:translateY(-4px)}
  100%{box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);transform:translateY(0)}
}

/* Lightbox schließen: Scrollen bleibt funktional */
body.lightbox-open{
  overflow:auto !important;
}

/* Schließen-Button klar klickbar */
.lightboxClose{
  z-index:9999 !important;
}

/* Mobile: Schrittbilder stapeln und Headings nicht quetschen */
@media(max-width:900px){
  .stepImagePlaceholders{
    grid-template-columns:1fr !important;
  }
  .customDesignSection .customText .script,
  .customDesignSection .customText h2{
    display:block !important;
  }
  .processPanel .sectionHead,
  .servicePanel .sectionHead{
    min-height:auto !important;
    display:block !important;
  }
}


/* v25: Custom-Design-Raster, FAQ-Klickfläche, Animationen */

/* 3 Bilder links: sauber direkt unter den 3 Schritten, gleich groß nebeneinander */
.stepImagePlaceholders{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:12px !important;
  margin-top:16px !important;
  width:100% !important;
  align-items:stretch !important;
}

.stepImagePlaceholder{
  width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  height:auto !important;
  transform:none !important;
  border:7px solid var(--cream) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.20) !important;
}

.stepImagePlaceholder span{
  font-size:24px !important;
}

/* Rechte Custom-Design-Bilder: 4 gleich große Karten im Raster */
.designCards{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.designCards > div{
  width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  height:auto !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  border:7px solid var(--cream) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.20) !important;
}

.designCards > div:nth-child(even),
.designCards > div:nth-child(odd){
  transform:none !important;
}

.designCards > div:hover,
.stepImagePlaceholder:hover{
  transform:translateY(-5px) scale(1.015) !important;
}

/* FAQ: ganze Box klickbar + bessere Hover-Animation */
.faqGrid details{
  cursor:pointer !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.faqGrid details:hover{
  transform:translateY(-5px) !important;
  background:rgba(248,236,212,.58) !important;
  box-shadow:11px 11px 0 rgba(198,95,62,.13),0 18px 35px rgba(0,0,0,.10) !important;
}

.faqGrid summary{
  cursor:pointer !important;
  list-style-position:inside !important;
}

.faqGrid summary::-webkit-details-marker{
  color:var(--rust) !important;
}

/* Animation beim Custom-Druck-Paket entfernen */
.priceCard.comingSoon,
.priceCard.comingSoon:hover{
  transform:none !important;
  transition:none !important;
  filter:grayscale(.92) !important;
}

/* Anfrage-Markierung deutlich sichtbarer und später nach Scroll */
.inquiryPanel.pulseHighlight{
  animation:inquiryPulseStrong 1.7s ease both !important;
}

@keyframes inquiryPulseStrong{
  0%{
    outline:0 solid rgba(198,95,62,0);
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    transform:translateY(0) scale(1);
  }
  18%{
    outline:7px solid rgba(198,95,62,.42);
    box-shadow:0 0 0 14px rgba(198,95,62,.16),16px 16px 0 rgba(198,95,62,.26),0 26px 55px rgba(0,0,0,.18);
    transform:translateY(-8px) scale(1.018);
  }
  46%{
    outline:3px solid rgba(198,95,62,.36);
    transform:translateY(-4px) scale(1.01);
  }
  100%{
    outline:0 solid rgba(198,95,62,0);
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    transform:translateY(0) scale(1);
  }
}

@media(max-width:900px){
  .stepImagePlaceholders,
  .designCards{
    grid-template-columns:1fr !important;
  }
}


/* v26: Custom-Design-Bilder sauber skalieren + Anfrage langsamer einmal blinken */

/* 3 Schritt-Bilder: exakt gleich groß, direkt unter den 3 Schritten */
.stepImagePlaceholders{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
  margin-top:14px !important;
  align-items:stretch !important;
}

.stepImagePlaceholders .stepImagePlaceholder,
.stepImagePlaceholders .galleryItem{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 9 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
  transform:none !important;
}

/* Rechte Layout-Beispiele: 2x2 Raster, alle exakt gleich groß */
.designPreview .designCards{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows:1fr !important;
  gap:14px !important;
  align-items:stretch !important;
}

.designPreview .designCards > div{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 9 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  box-sizing:border-box !important;
  transform:none !important;
  overflow:hidden !important;
}

.designPreview .designCards > div:nth-child(odd),
.designPreview .designCards > div:nth-child(even){
  transform:none !important;
}

/* Keine ungewollte Sondergröße im Custom Design */
.designPreview .designCards > div:first-child{
  grid-column:auto !important;
  grid-row:auto !important;
}

/* Anfrage: nur einmal, langsam und klar */
.inquiryPanel.pulseHighlight{
  animation:inquiryPulseSingle 2.4s ease-in-out 1 both !important;
}

@keyframes inquiryPulseSingle{
  0%{
    outline:0 solid rgba(198,95,62,0);
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    transform:translateY(0) scale(1);
  }
  35%{
    outline:8px solid rgba(198,95,62,.36);
    box-shadow:0 0 0 18px rgba(198,95,62,.13),16px 16px 0 rgba(198,95,62,.24),0 26px 55px rgba(0,0,0,.16);
    transform:translateY(-5px) scale(1.012);
  }
  70%{
    outline:4px solid rgba(198,95,62,.22);
    transform:translateY(-2px) scale(1.006);
  }
  100%{
    outline:0 solid rgba(198,95,62,0);
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    transform:translateY(0) scale(1);
  }
}

/* Mobile sauber: Schrittbilder und Layoutbeispiele untereinander */
@media(max-width:900px){
  .stepImagePlaceholders{
    grid-template-columns:1fr !important;
  }
  .designPreview .designCards{
    grid-template-columns:1fr !important;
  }
}


/* v27: Step-Bilder links exakt gleich groß + FAQ Textanimation */

/* Linke Custom-Design-Box: 3 Bildplätze exakt wie die 3 Schrittboxen */
.stepImagePlaceholders{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
  margin-top:16px !important;
  align-items:stretch !important;
}

.stepImagePlaceholders > .stepImagePlaceholder,
.stepImagePlaceholders > .galleryItem{
  width:100% !important;
  aspect-ratio:auto !important;
  height:142px !important;
  min-height:142px !important;
  max-height:142px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  transform:none !important;
  border:1px solid rgba(66,48,39,.30) !important;
  background:#17110f !important;
  color:var(--cream) !important;
  box-shadow:none !important;
  padding:12px !important;
}

/* Alle alten Sondergrößen bei den drei linken Bildern hart überschreiben */
.customText .stepImagePlaceholders .stepImagePlaceholder:nth-child(1),
.customText .stepImagePlaceholders .stepImagePlaceholder:nth-child(2),
.customText .stepImagePlaceholders .stepImagePlaceholder:nth-child(3){
  grid-column:auto !important;
  grid-row:auto !important;
  width:100% !important;
  height:142px !important;
  min-height:142px !important;
  max-height:142px !important;
  aspect-ratio:auto !important;
  transform:none !important;
}

.stepImagePlaceholder span{
  font:24px "Bebas Neue",sans-serif !important;
  line-height:1 !important;
}
.stepImagePlaceholder small{
  font:12px Inter,sans-serif !important;
  color:#d7c2a3 !important;
  margin-top:5px !important;
}

/* FAQ Text rutscht leicht rein */
.faqGrid details p{
  opacity:0;
  transform:translateY(-8px);
}

.faqGrid details[open] p{
  animation:faqTextSlide .28s ease forwards;
}

@keyframes faqTextSlide{
  from{
    opacity:0;
    transform:translateY(-8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Mobile: Step-Bilder sauber untereinander, aber gleichmäßig */
@media(max-width:900px){
  .stepImagePlaceholders{
    grid-template-columns:1fr !important;
  }
  .stepImagePlaceholders > .stepImagePlaceholder,
  .stepImagePlaceholders > .galleryItem,
  .customText .stepImagePlaceholders .stepImagePlaceholder:nth-child(1),
  .customText .stepImagePlaceholders .stepImagePlaceholder:nth-child(2),
  .customText .stepImagePlaceholders .stepImagePlaceholder:nth-child(3){
    height:160px !important;
    min-height:160px !important;
    max-height:160px !important;
  }
}

/* v28: Custom Design sauber neu gesetzt + Hero bündig zur Navigation */
.hero,.heroRedesign{
  padding-left:calc(6vw + 34px) !important;
  padding-right:calc(6vw + 34px) !important;
}
.heroText,.heroCard{margin-left:0 !important;}

.customDesignGrid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:32px !important;
  align-items:stretch !important;
}
.customText,.designPreview{overflow:hidden !important;}
.customTitleRow{
  display:flex !important;
  align-items:baseline !important;
  gap:14px !important;
  margin-bottom:12px !important;
}
.customTitleRow .script{margin:0 !important;line-height:1 !important;}
.customTitleRow h2{margin:0 !important;line-height:.9 !important;}

.designSteps{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
  align-items:stretch !important;
}
.designSteps article{
  height:142px !important;
  min-height:142px !important;
  max-height:142px !important;
  box-sizing:border-box !important;
}

.stepImagePlaceholders{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:12px !important;
  width:100% !important;
}
.stepImagePlaceholders > .stepImagePlaceholder{
  width:100% !important;
  height:142px !important;
  min-height:142px !important;
  max-height:142px !important;
  aspect-ratio:auto !important;
  grid-column:auto !important;
  grid-row:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  padding:12px !important;
  border:1px solid rgba(66,48,39,.30) !important;
  background:#17110f !important;
  color:var(--cream) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.designPreview .designCards{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
.designPreview .designCards > .designCard{
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  grid-column:auto !important;
  grid-row:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.customText .galleryItem:nth-child(1),
.customText .galleryItem:nth-child(2),
.customText .galleryItem:nth-child(3),
.stepImagePlaceholders .galleryItem:nth-child(1),
.stepImagePlaceholders .galleryItem:nth-child(2),
.stepImagePlaceholders .galleryItem:nth-child(3){
  grid-column:auto !important;
  grid-row:auto !important;
  width:100% !important;
  height:142px !important;
  min-height:142px !important;
  max-height:142px !important;
  aspect-ratio:auto !important;
  transform:none !important;
}

@media(max-width:1100px){
  .hero,.heroRedesign{padding-left:22px !important;padding-right:22px !important;}
}
@media(max-width:1000px){
  .customDesignGrid{grid-template-columns:1fr !important;}
  .designSteps,.stepImagePlaceholders{grid-template-columns:1fr !important;}
  .designSteps article,
  .stepImagePlaceholders > .stepImagePlaceholder,
  .customText .galleryItem:nth-child(1),
  .customText .galleryItem:nth-child(2),
  .customText .galleryItem:nth-child(3){
    height:auto !important;
    min-height:150px !important;
    max-height:none !important;
  }
  .designPreview .designCards{grid-template-columns:1fr !important;}
}


/* v29: Custom-Design-Text größer, Bildrahmen, Hero-Box korrekt nach innen */

/* Hero-Infobox links wieder weiter nach innen, passend zur Fotobox rechts */
.hero,
.heroRedesign{
  padding-left:7vw !important;
  padding-right:7vw !important;
}

.heroText,
.heroCard{
  margin-left:4.2vw !important;
}

/* Auf Tablet/Handy nicht zusätzlich einrücken */
@media(max-width:1100px){
  .hero,
  .heroRedesign{
    padding-left:22px !important;
    padding-right:22px !important;
  }
  .heroText,
  .heroCard{
    margin-left:0 !important;
  }
}

/* Custom Design Text etwas größer */
.customDesignSection .customText > p{
  font-size:16px !important;
  line-height:1.58 !important;
}

.designSteps b{
  font-size:22px !important;
}

.designSteps p{
  font-size:13.5px !important;
  line-height:1.45 !important;
}

.stepImagePlaceholder span{
  font-size:28px !important;
}

.stepImagePlaceholder small{
  font-size:13px !important;
}

/* Bilder links bekommen Rahmen wie die anderen Bilder */
.stepImagePlaceholders > .stepImagePlaceholder{
  border:7px solid var(--cream) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.20) !important;
  background:#17110f !important;
}

/* Design-Beispiele rechts ebenfalls konsistenter Bildrahmen */
.designPreview .designCards > .designCard{
  border:7px solid var(--cream) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.20) !important;
}


/* v30: Hero-Box weiter nach rechts, Custom Design ohne Zahlen, Anfrage-Puls nur einmal */

/* Landingpage-Infobox deutlich weiter nach rechts */
.hero,
.heroRedesign{
  padding-left:7vw !important;
  padding-right:7vw !important;
}

.heroText,
.heroCard{
  margin-left:8.5vw !important;
}

/* Auf kleineren Screens wieder sauber */
@media(max-width:1100px){
  .heroText,
  .heroCard{
    margin-left:0 !important;
  }
}

/* Custom Design: Zahlen ausblenden und mehr Platz für Text */
.designSteps article span{
  display:none !important;
}

.designSteps article{
  padding:18px !important;
  height:160px !important;
  min-height:160px !important;
  max-height:160px !important;
}

.designSteps b{
  font-size:24px !important;
  margin-bottom:10px !important;
}

.designSteps p{
  font-size:14.5px !important;
  line-height:1.5 !important;
}

/* Bilder darunter bleiben gleich hoch angepasst */
.stepImagePlaceholders > .stepImagePlaceholder,
.customText .galleryItem:nth-child(1),
.customText .galleryItem:nth-child(2),
.customText .galleryItem:nth-child(3){
  height:160px !important;
  min-height:160px !important;
  max-height:160px !important;
}

/* Alle alten Pulse-Animationen neutralisieren */
.inquiryPanel.pulseHighlight{
  animation:none !important;
}

/* Nur diese neue Klasse pulst einmal */
.inquiryPanel.pulseHighlightOnce{
  animation:inquiryGlowOnce 1.65s ease-in-out 1 both !important;
}

@keyframes inquiryGlowOnce{
  0%{
    outline:0 solid rgba(198,95,62,0);
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    transform:translateY(0) scale(1);
  }
  35%{
    outline:8px solid rgba(198,95,62,.34);
    box-shadow:0 0 0 18px rgba(198,95,62,.12),16px 16px 0 rgba(198,95,62,.24),0 26px 55px rgba(0,0,0,.16);
    transform:translateY(-5px) scale(1.01);
  }
  100%{
    outline:0 solid rgba(198,95,62,0);
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    transform:translateY(0) scale(1);
  }
}


/* v31: Hero-Abstände stabil, Custom Design robust, Anfrage-Animation neu, Requisitenbild */
.hero,
.heroRedesign{
  --hero-side-gap:clamp(42px, 7vw, 118px);
  padding-left:var(--hero-side-gap) !important;
  padding-right:var(--hero-side-gap) !important;
  grid-template-columns:minmax(0, 1fr) minmax(360px, .92fr) !important;
  column-gap:clamp(34px, 5vw, 78px) !important;
}

.heroText,
.heroCard{
  margin-left:0 !important;
  justify-self:start !important;
  width:min(100%, 690px) !important;
}

.heroShowcase{
  justify-self:end !important;
  width:min(100%, 590px) !important;
}

@media(max-width:1100px){
  .hero,
  .heroRedesign{
    --hero-side-gap:22px;
    grid-template-columns:1fr !important;
  }
  .heroText,
  .heroCard,
  .heroShowcase{
    justify-self:stretch !important;
    width:100% !important;
  }
}

.customText,
.designPreview,
.panelBlock{
  min-width:0 !important;
}

.customDesignSection .customText > p{
  font-size:clamp(13px, 0.95vw, 15.5px) !important;
  line-height:1.48 !important;
  max-width:100% !important;
  overflow-wrap:break-word !important;
}

.designSteps{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}

.designSteps article{
  min-width:0 !important;
  height:auto !important;
  min-height:132px !important;
  max-height:none !important;
  padding:14px !important;
  overflow:hidden !important;
}

.designSteps b{
  font-size:clamp(18px, 1.35vw, 22px) !important;
  line-height:1.05 !important;
  display:block !important;
  margin-bottom:7px !important;
}

.designSteps p{
  font-size:clamp(12px, 0.86vw, 13.5px) !important;
  line-height:1.38 !important;
  margin:0 !important;
  overflow-wrap:break-word !important;
}

.stepImagePlaceholders{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}

.stepImagePlaceholders > .stepImagePlaceholder{
  height:auto !important;
  min-height:132px !important;
  max-height:none !important;
  aspect-ratio:16/9 !important;
}

@media(max-width:900px){
  .designSteps,
  .stepImagePlaceholders{
    grid-template-columns:1fr !important;
  }
  .designSteps article,
  .stepImagePlaceholders > .stepImagePlaceholder{
    min-height:128px !important;
  }
}

.inquiryPanel.pulseHighlight,
.inquiryPanel.pulseHighlightOnce,
.inquiryPanel.requestGlow{
  animation:none !important;
}

.inquiryPanel.requestGlow{
  animation:requestGlowClean 1.35s ease-out 1 both !important;
}

@keyframes requestGlowClean{
  0%{
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    outline:0 solid rgba(198,95,62,0);
  }
  35%{
    box-shadow:0 0 0 9px rgba(198,95,62,.18),12px 12px 0 rgba(198,95,62,.18),0 22px 44px rgba(40,25,18,.08);
    outline:2px solid rgba(198,95,62,.42);
  }
  100%{
    box-shadow:12px 12px 0 rgba(198,95,62,.14),0 22px 44px rgba(40,25,18,.08);
    outline:0 solid rgba(198,95,62,0);
  }
}

.galleryItem img[src*="requisiten.jpg"]{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.inlineImageTag{
  cursor:pointer !important;
}


/* v32: echte Bilder eingefügt */
.realImageCard,.realGalleryImage{overflow:hidden!important;}
.realImageCard img,.realGalleryImage img,.aboutPhoto.real img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
.designPreview .designCards > .realImageCard{padding:0!important;justify-content:center!important;align-items:center!important;}
.designPreview .designCards > .realImageCard img{object-fit:cover!important;}
.galleryItem.realGalleryImage img{aspect-ratio:4/3!important;object-fit:cover!important;}
.inlineImageTag{cursor:pointer!important;}


/* Formspree Formularstatus */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  height:0 !important;
  width:0 !important;
  pointer-events:none !important;
}
.formStatus{
  margin-top:12px;
  padding:12px 14px;
  border:1.5px solid rgba(66,48,39,.35);
  background:rgba(248,236,212,.55);
  font-size:14px;
  line-height:1.4;
  display:none;
}
.formStatus.is-loading,
.formStatus.is-success,
.formStatus.is-error{
  display:block;
}
.formStatus.is-success{
  border-color:#2f7d46;
  background:rgba(47,125,70,.12);
}
.formStatus.is-error{
  border-color:#b23b2f;
  background:rgba(178,59,47,.12);
}
button[disabled]{
  opacity:.7;
  cursor:wait !important;
}