/* ============================================================
   subpages.css — gemeinsame Bausteine für die framework-freien
   Unterseiten (laden NACH handcode.css). Ergänzt die Startseiten-
   Komponenten (mbwc-feature, mbwc-lp, Wasserwelle) um Sub-Hero,
   CTA-Band, iframe-Einbettung (Service-Tool) und Bildreihe.
   Stand: 2026-08-12
   ============================================================ */

/* ---- Sub-Hero (Kopfbild der Unterseite) ---- */
.mbwc-subhero{position:relative;min-height:clamp(340px,58vh,600px);display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:#241d14 center/cover no-repeat;isolation:isolate}
.mbwc-subhero__overlay{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(20,15,10,.30) 0%,rgba(20,15,10,.18) 38%,rgba(20,15,10,.62) 100%)}
.mbwc-subhero__inner{position:relative;z-index:2;width:100%;max-width:1000px;padding:clamp(84px,12vw,150px) clamp(20px,5vw,48px) clamp(70px,10vw,120px)}
.mbwc-subhero__kicker{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;color:#e9c877;font-weight:700;
  font-size:clamp(.74rem,1.4vw,.9rem);letter-spacing:.2em;text-transform:uppercase}
.mbwc-subhero__kicker::before{content:"";width:30px;height:2px;border-radius:2px;background:#e9c877}
.mbwc-subhero__title{margin:0;color:#fff;font-weight:800;line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(2rem,5.2vw,3.7rem);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.mbwc-subhero__sub{margin:1.1rem auto 0;max-width:60ch;color:#f2ead9;font-size:clamp(1.02rem,1.8vw,1.28rem);
  line-height:1.6;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.mbwc-subhero__cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
/* Reveal (nur wenn JS die Klasse mbwc-io setzt -> ohne JS bleibt alles sichtbar) */
.mbwc-subhero.mbwc-io .mbwc-subhero__kicker,.mbwc-subhero.mbwc-io .mbwc-subhero__title,.mbwc-subhero.mbwc-io .mbwc-subhero__sub,.mbwc-subhero.mbwc-io .mbwc-subhero__cta{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.mbwc-subhero.mbwc-io.is-in .mbwc-subhero__kicker,.mbwc-subhero.mbwc-io.is-in .mbwc-subhero__title,.mbwc-subhero.mbwc-io.is-in .mbwc-subhero__sub,.mbwc-subhero.mbwc-io.is-in .mbwc-subhero__cta{opacity:1;transform:none}
.mbwc-subhero.mbwc-io.is-in .mbwc-subhero__title{transition-delay:.10s}
.mbwc-subhero.mbwc-io.is-in .mbwc-subhero__sub{transition-delay:.22s}
.mbwc-subhero.mbwc-io.is-in .mbwc-subhero__cta{transition-delay:.34s}

/* ---- CTA-Band (Aktion/Konfigurator) ---- */
.mbwc-cta-band{background:#f8e7d2;padding:clamp(48px,6vw,96px) 0;text-align:center}
.mbwc-cta-band__wrap{width:100%;max-width:900px;margin:0 auto;padding:0 clamp(20px,4vw,40px);box-sizing:border-box}
.mbwc-cta-band__kicker{margin:0 0 1rem;color:#b32424;font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.mbwc-cta-band__title{margin:0 0 1.4rem;color:#2c2620;font-weight:700;line-height:1.16;font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.01em}
.mbwc-cta-band__text{margin:0 auto 1.9rem;max-width:56ch;color:#5f574c;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7}
.mbwc-cta-band.mbwc-io .mbwc-cta-band__kicker,.mbwc-cta-band.mbwc-io .mbwc-cta-band__title,.mbwc-cta-band.mbwc-io .mbwc-cta-band__text,.mbwc-cta-band.mbwc-io .mbwc-cta-band__btn{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.mbwc-cta-band.mbwc-io.is-in .mbwc-cta-band__kicker,.mbwc-cta-band.mbwc-io.is-in .mbwc-cta-band__title,.mbwc-cta-band.mbwc-io.is-in .mbwc-cta-band__text,.mbwc-cta-band.mbwc-io.is-in .mbwc-cta-band__btn{opacity:1;transform:none}
.mbwc-cta-band.mbwc-io.is-in .mbwc-cta-band__title{transition-delay:.10s}
.mbwc-cta-band.mbwc-io.is-in .mbwc-cta-band__text{transition-delay:.20s}
.mbwc-cta-band.mbwc-io.is-in .mbwc-cta-band__btn{transition-delay:.30s}

/* ---- Ghost-Button (heller Sekundär-Button auf dunklem Hero) ---- */
.mbwc-btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mbwc-btn--ghost:hover,.mbwc-btn--ghost:focus-visible{background:rgba(255,255,255,.22);color:#fff;border-color:#fff;transform:translateY(-2px)}

/* ---- 3-Spalten-Kachelraster (STIL/DESIGN/QUALITÄT) ---- */
.mbwc-lp--3col .mbwc-lp__grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:719.98px){.mbwc-lp--3col .mbwc-lp__grid{grid-template-columns:1fr}}

/* ---- Bildreihe (mehrere Motive nebeneinander) ---- */
.mbwc-imgrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin:2rem 0 0}
.mbwc-imgrow img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;box-shadow:0 18px 44px rgba(32,27,20,.18)}
.mbwc-imgrow--pano img{aspect-ratio:3/1}
@media (max-width:719.98px){.mbwc-imgrow{grid-template-columns:1fr;gap:14px}.mbwc-imgrow--pano img{aspect-ratio:16/7}}
.mbwc-io .mbwc-imgrow img{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s ease,transform .95s cubic-bezier(.16,1,.3,1)}
.mbwc-io.is-in .mbwc-imgrow img{opacity:1;transform:none}
.mbwc-io.is-in .mbwc-imgrow img:nth-child(2){transition-delay:.12s}
.mbwc-io.is-in .mbwc-imgrow img:nth-child(3){transition-delay:.24s}

/* ---- Service-Tool-Einbettung (iframe: Kalender/Newsletter) ---- */
.mbwc-embed-sec{background:#f1e6d6;padding:clamp(52px,7vw,104px) 0}
.mbwc-embed-sec--plain{background:#f8e7d2}
.mbwc-embed__wrap{width:100%;max-width:920px;margin:0 auto;padding:0 clamp(20px,4vw,40px);box-sizing:border-box;text-align:center}
.mbwc-embed__kicker{margin:0 0 1rem;color:#b32424;font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.mbwc-embed__title{margin:0 0 .8rem;color:#2c2620;font-weight:700;line-height:1.16;font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.01em}
.mbwc-embed__lead{margin:0 auto 2rem;max-width:54ch;color:#5f574c;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.65}
.mbwc-embed__frame{position:relative;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(32,27,20,.16);overflow:hidden}
.mbwc-embed__frame iframe{display:block;width:100%;border:0}
.mbwc-embed-sec.mbwc-io .mbwc-embed__wrap>*{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.mbwc-embed-sec.mbwc-io.is-in .mbwc-embed__wrap>*{opacity:1;transform:none}
.mbwc-embed-sec.mbwc-io.is-in .mbwc-embed__title{transition-delay:.10s}
.mbwc-embed-sec.mbwc-io.is-in .mbwc-embed__lead{transition-delay:.20s}
.mbwc-embed-sec.mbwc-io.is-in .mbwc-embed__frame{transition-delay:.30s}

/* ============================================================
   Kompatibilitäts-Layer: stylt die Mobirise-Sektionstypen sauber,
   damit deframte Seiten OHNE Neuaufbau lesbar rendern (Text 1:1 erhalten).
   ============================================================ */
/* content1/content2: Textsektionen (Impressum, Datenschutz, Info) */
.content1,.content2{position:relative;background:#f8e7d2;padding:clamp(52px,7vw,100px) 0}
.content1 .mbr-overlay,.content2 .mbr-overlay{display:none}
.content1 .container,.content2 .container{position:relative;z-index:1}
.content1 h1,.content2 h1{color:#2c2620;font-weight:800;line-height:1.15;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 1.6rem}
.content1 h1 .wrap,.content2 h1 .wrap{display:inline}
.content1 h1 span,.content2 h1 span{font-size:inherit!important}
.content1 h2,.content2 h2,.content1 h3,.content2 h3,.content1 .mbr-section-subtitle,.content2 .mbr-section-subtitle{color:#2c2620;font-weight:700;line-height:1.25;margin:1.8rem 0 .7rem}
.content1 p,.content2 p,.content1 .text2,.content2 .text2,.content1 li,.content2 li{color:#4a4338;line-height:1.75;font-size:1.02rem}
.content1 a,.content2 a,.content1 a.text-primary,.content2 a.text-primary{color:#996600!important;font-weight:600}
.content1 a:hover,.content2 a:hover{color:#7c5200!important}
.content1 strong,.content2 strong{color:#2c2620}
.content1 img,.content2 img{max-width:100%;height:auto;border-radius:12px}
/* Grid-Spalten auf Textseiten großzügiger (Lesebreite) */
.content2 .col-lg-7,.content2 .col-lg-10,.content1 .col-lg-10{max-width:100%;flex-basis:100%}

/* ---- Kompakter Seitenkopf (für Text-/Rechtsseiten ohne großes Hero) ---- */
.mbwc-subhead{position:relative;background:#241d14;color:#fff;text-align:center;overflow:hidden;padding:clamp(90px,12vw,140px) clamp(20px,5vw,40px) clamp(64px,8vw,96px)}
.mbwc-subhead__bg{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;opacity:.5}
.mbwc-subhead__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,15,10,.4),rgba(20,15,10,.7))}
.mbwc-subhead__inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.mbwc-subhead__kicker{margin:0 0 .9rem;color:#e9c877;font-weight:700;font-size:clamp(.72rem,1.4vw,.88rem);letter-spacing:.2em;text-transform:uppercase}
.mbwc-subhead__title{margin:0;color:#fff;font-weight:800;line-height:1.1;letter-spacing:-.015em;font-size:clamp(1.8rem,4.4vw,3rem);text-shadow:0 2px 20px rgba(0,0,0,.45)}

/* ---- Fließtext-Container (Impressum/Datenschutz/Info) ---- */
.mbwc-prose-sec{background:#f8e7d2;padding:clamp(48px,7vw,96px) 0}
.mbwc-prose{width:100%;max-width:820px;margin:0 auto;padding:0 clamp(20px,4vw,40px);box-sizing:border-box;color:#4a4338;font-size:1.02rem;line-height:1.75}
.mbwc-prose h1,.mbwc-prose h2{color:#2c2620;font-weight:700;line-height:1.2;margin:2.2rem 0 .9rem;letter-spacing:-.01em}
.mbwc-prose h1{font-size:clamp(1.7rem,3vw,2.3rem);margin-top:0}
.mbwc-prose h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.mbwc-prose h3{color:#2c2620;font-weight:600;font-size:1.12rem;margin:1.6rem 0 .6rem}
.mbwc-prose p{margin:0 0 1.05rem}
.mbwc-prose ul,.mbwc-prose ol{margin:0 0 1.1rem;padding-left:1.4rem}
.mbwc-prose li{margin:0 0 .5rem}
.mbwc-prose a{color:#996600;font-weight:600}
.mbwc-prose a:hover{color:#7c5200}
.mbwc-prose strong{color:#2c2620}
.mbwc-prose hr{border:0;border-top:1px solid rgba(44,38,32,.14);margin:2rem 0}

@media (prefers-reduced-motion:reduce){
  .mbwc-subhero [class*="mbwc-subhero__"],.mbwc-cta-band.mbwc-io [class*="mbwc-cta-band__"],
  .mbwc-io .mbwc-imgrow img,.mbwc-embed-sec.mbwc-io .mbwc-embed__wrap>*{opacity:1!important;transform:none!important;transition:none!important}
}