/* Moe’s Küchenstudio – One-Pager-Ergänzungen zu site.css */
.op-recht-abstand{padding-top:calc(var(--kopf-h,84px) + 40px)}
.op-recht-abstand .recht{padding-top:0}
.op-schmal{max-width:860px}
.op-form fieldset{border:0;margin:0;padding:0;min-width:0}
.op-form legend{font-weight:700;font-size:1.05rem;margin-bottom:12px;padding:0}
.op-form .feld + .feld{margin-top:4px}
.op-form .wahl.zwei{grid-template-columns:1fr}
@media (min-width:520px){.op-form .wahl.zwei{grid-template-columns:1fr 1fr}}
.op-termin .wahl{margin-top:10px}
.op-dateiliste ul{list-style:none;margin:8px 0 0;padding:0;font-size:.88rem}
.op-dateiliste li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(29,33,41,.08);word-break:break-all}
.op-dateiliste span{color:var(--leise);white-space:nowrap}
.op-zusammenfassung{display:grid;grid-template-columns:1fr;gap:2px 18px;margin:0 0 14px;font-size:.94rem}
.op-zusammenfassung dt{font-weight:600;color:var(--leise);font-size:.82rem;margin-top:10px}
.op-zusammenfassung dd{margin:0;overflow-wrap:anywhere}
@media (min-width:640px){.op-zusammenfassung{grid-template-columns:minmax(150px,38%) 1fr}.op-zusammenfassung dt{margin-top:8px}.op-zusammenfassung dd{margin-top:8px}}
.op-pruefen-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.op-pruefen-knoepfe .btn{flex:1 1 200px}
.op-pruefen-knoepfe .btn[disabled]{opacity:.55;cursor:not-allowed}
.op-vorschau-hinweis{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#fff4e5;color:#7a4b00;font-weight:600;font-size:.9rem;text-align:center}
.op-consent-knoepfe .btn{flex:1 1 45%!important}
.op-demo{font-size:.8rem!important;color:#7a4b00!important}
.op-entwurf{background:#fff4e5;color:#7a4b00;border-radius:12px;padding:12px 16px;font-weight:600;margin-bottom:24px}
.recht h2{margin-top:32px;font-size:1.3rem}
.op-server .op-zusammenfassung{margin-top:10px}
.op-server .formkarte{max-width:760px;margin:0 auto}
.ueber-fakten{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}
/* Einblicke direkt unter dem Hero: zwei Clips nebeneinander (Desktop), wischbar (Mobil) */
.op-einblicke{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
#einblicke.op-einblicke .reels{max-width:none}
#einblicke.op-einblicke .reel-rahmen{display:block;height:auto}
#einblicke.op-einblicke .reel-video{flex:none;height:auto;min-height:0;aspect-ratio:16/9;object-fit:cover}
#einblicke.op-einblicke .reel-hoch .reel-video{aspect-ratio:9/16}
@media (min-width:1000px){#einblicke.op-einblicke .reels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.6fr) minmax(0,.6fr);grid-template-rows:auto auto;gap:clamp(16px,1.6vw,24px)}
 #einblicke.op-einblicke .reel:nth-child(1){grid-area:1/1/2/2}
 #einblicke.op-einblicke .reel:nth-child(2){grid-area:2/1/3/2}
 #einblicke.op-einblicke .reel:nth-child(3){grid-area:1/2/3/3}
 #einblicke.op-einblicke .reel:nth-child(4){grid-area:1/3/3/4}
 #einblicke.op-einblicke .reel-hoch .reel-rahmen{display:flex;flex-direction:column;height:100%}
 #einblicke.op-einblicke .reel-hoch .reel-video{flex:1 1 0;height:0;aspect-ratio:auto}}
@media (max-width:999px){#einblicke.op-einblicke .reels{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;padding-bottom:4px}
 #einblicke.op-einblicke .reels::-webkit-scrollbar{display:none}
 #einblicke.op-einblicke .reel{flex:0 0 78%;scroll-snap-align:start;grid-column:auto}
 #einblicke.op-einblicke .reel-video,#einblicke.op-einblicke .reel-hoch .reel-video{aspect-ratio:4/5}}
@media (min-width:640px) and (max-width:999px){#einblicke.op-einblicke .reel{flex-basis:44%}}
.op-wisch-hinweis{margin:10px 0 0;font-size:.85rem;color:var(--grau)}
@media (min-width:1000px){.op-wisch-hinweis{display:none}}
/* Auf Maß gefertigt: Galerie + Lightbox (natives dialog) */
.op-galerie a.foto{display:block;overflow:hidden;cursor:zoom-in}
.op-lightbox{padding:0;border:0;background:transparent;max-width:min(96vw,1400px);max-height:92vh;overflow:visible}
.op-lightbox::backdrop{background:rgba(15,17,22,.88)}
.op-lightbox img{display:block;max-width:min(96vw,1400px);max-height:84vh;width:auto;height:auto;border-radius:10px;margin:0 auto}
.op-lightbox p{margin:10px 0 0;color:#fff;text-align:center;font-size:.92rem}
.op-lb-knopf{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#1d2129;font-size:1.5rem;line-height:1;cursor:pointer}
.op-lb-zurueck{left:8px}.op-lb-weiter{right:8px}
.op-lb-zu{position:absolute;top:-8px;right:-8px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#1d2129;font-size:1.4rem;cursor:pointer}
@media (max-width:640px){.op-lb-zu{top:6px;right:6px}}

/* Kompakt-Logo (ohne Icon) im Sticky-Header beim Scrollen; oben über dem Hero bleibt das volle Logo.
   Sophie: 48–60 px Höhe, nie unter 44 px. Kompakter Kopf ist immer hell → nur die helle Variante. */
.marke .logo-kompakt{display:none}
.kopf.ist-kompakt .marke .logo-pos,.kopf.ist-kompakt .marke .logo-neg{display:none}
.kopf.ist-kompakt .marke .logo-kompakt{display:block;height:52px;width:auto}
@media (max-width:899px){.kopf.ist-kompakt .marke .logo-kompakt{height:48px}}
@media (max-width:379px){.kopf.ist-kompakt .marke .logo-kompakt{height:44px}}

/* Navigation einzeilig halten (das Kompakt-Logo ist breiter als das kleine Icon-Logo) */
.nav a,.kopf-cta a{white-space:nowrap}
@media (min-width:1100px){.nav{gap:16px}.kopf-cta{gap:14px}}
@media (min-width:1100px) and (max-width:1279px){.nav{gap:10px}.kopf-cta{gap:10px}.nav a{font-size:.92rem}}