:root {
  --bg: #000000;
  --fg: #ffffff;
  --gray: #777777;
  --shell: 1440px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }

.shell {
  width: min(var(--shell), calc(100% - 48px));
  margin: 0 auto;
}

.theme-black { background: #000; color: #fff; }
.theme-white { background: #fff; color: #000; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.site-content {
  padding: 120px 0;
}

.site-footer {
  border-top: 1px solid var(--gray);
}

.footer-inner {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero-video {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-video-element {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.hero-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 12vh;
}


.hero-video {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-video-element {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.hero-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 12vh;
}


.hero .frame,
.hero .frame h1,
.hero .frame h2,
.hero .frame h3,
.hero .frame h4,
.hero .frame h5,
.hero .frame h6,
.hero .frame p,
.hero .frame a,
.hero .frame span,
.hero .frame small {
  color: #ffffff !important;
}


.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.site-header-inner {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-brand .brand {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
}

.main-nav,
.lang-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-nav a,
.lang-nav a {
  color: #ffffff;
  font-size: 14px;
}

.lang-link {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
}

.lang-link.is-active {
  font-weight: 700;
}

@media (max-width: 900px) {
  .site-header-inner {
    min-height: 70px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .main-nav {
    gap: 12px;
    flex-wrap: wrap;
  }

  .lang-nav {
    gap: 10px;
  }
}


.site-logo {
  display: block;
  height: 60px;
  width: auto;
}

.site-brand .brand {
  display: inline-flex;
  align-items: center;
}


/* Header scroll state for corporate sites */
.theme-white .site-header.is-scrolled {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.theme-white .site-header.is-scrolled .site-brand .brand,
.theme-white .site-header.is-scrolled .main-nav a,
.theme-white .site-header.is-scrolled .lang-nav a {
  color: #000000;
}

.theme-white .site-header.is-scrolled .site-logo {
  filter: none;
}

.zsl-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 40px;
  margin-top: 60px;
}

.zsl-grid .frame {
  padding: 20px;
}

.zsl-grid h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.zsl-grid p {
  font-size: .95rem;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .zsl-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 600px) {
  .zsl-grid {
    grid-template-columns: 1fr;
  }
}


.zsl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.zsl-grid h3 {
  margin: 0 0 12px 0;
  font-size: 1.4rem;
  line-height: 1.1;
  font-weight: 400;
}

.zsl-grid p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .zsl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .zsl-grid {
    grid-template-columns: 1fr;
  }
}


.zsl-block-3 {
  margin: 140px 0;
}

.zsl-block-3 .ce-gallery,
.zsl-block-3 .ce-media {
  max-width: 820px;
}

.zsl-block-3 img {
  width: 100%;
  height: auto;
  display: block;
}

.zsl-block-3 .ce-bodytext {
  max-width: 560px;
}

.zsl-block-3 h2,
.zsl-block-3 h3 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 24px 0;
}

.zsl-block-3 p {
  line-height: 1.7;
}


/* ======================================
   TEXT & MEDIA IMAGE CONTROL
====================================== */




/* ======================================
   BLOCK 3 – ROCK BOCK
====================================== */

#c5 {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 120px auto;
}

#c5 .ce-gallery img {
  max-width: 520px;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

#c5 .ce-bodytext {
  max-width: 520px;
}

/* BLOCK 3 – ROCK BOCK: inner TYPO3 textmedia layout */
#c5 .ce-textmedia,
#c5 .ce-textpic {
  display: flex;
  align-items: center;
  gap: 60px;
}

#c5 .ce-gallery,
#c5 .ce-bodytext {
  flex: 1 1 0;
}

#c5 .ce-bodytext {
  max-width: 520px;
}

@media (max-width: 900px) {
  #c5 .ce-textmedia,
  #c5 .ce-textpic {
    display: block;
  }

  #c5 .ce-bodytext {
    max-width: 100%;
    margin-top: 32px;
  }
}


/* BLOCK 4 – LADENBAU */
#c6 {
  max-width: 1200px;
  margin: 120px auto;
}

#c6 .ce-textmedia,
#c6 .ce-textpic {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 60px;
}

#c6 .ce-gallery,
#c6 .ce-bodytext {
  flex: 1 1 0;
}

#c6 .ce-gallery img {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
}

#c6 .ce-bodytext {
  max-width: 520px;
}

@media (max-width: 900px) {
  #c6 .ce-textmedia,
  #c6 .ce-textpic {
    display: block;
  }

  #c6 .ce-bodytext {
    max-width: 100%;
    margin-top: 32px;
  }
}


/* BLOCK 5 – KREATIVSTUDIO */
#c7 {
  max-width: 1200px;
  margin: 120px auto;
}

#c7 .ce-textmedia,
#c7 .ce-textpic {
  display: flex;
  align-items: center;
  gap: 60px;
}

#c7 .ce-gallery,
#c7 .ce-bodytext {
  flex: 1 1 0;
}

#c7 .ce-gallery img {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
}

#c7 .ce-bodytext {
  max-width: 520px;
}

@media (max-width: 900px) {
  #c7 .ce-textmedia,
  #c7 .ce-textpic {
    display: block;
  }

  #c7 .ce-bodytext {
    max-width: 100%;
    margin-top: 32px;
  }
}


/* BLOCK 6 – EINLAGERUNG */
#c8 {
  max-width: 1200px;
  margin: 120px auto;
}

#c8 .ce-textmedia,
#c8 .ce-textpic {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 60px;
}

#c8 .ce-gallery,
#c8 .ce-bodytext {
  flex: 1 1 0;
}

#c8 .ce-gallery img {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
}

#c8 .ce-bodytext {
  max-width: 520px;
}

@media (max-width: 900px) {
  #c8 .ce-textmedia,
  #c8 .ce-textpic {
    display: block;
  }

  #c8 .ce-bodytext {
    max-width: 100%;
    margin-top: 32px;
  }
}


/* BLOCK 7 – CTA */
#c9 {
  max-width: 900px;
  margin: 160px auto 180px auto;
  text-align: center;
}

#c9 h1,
#c9 h2,
#c9 h3 {
  margin: 0 0 24px 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.02;
  font-weight: 400;
}

#c9 p {
  margin: 0 auto 16px auto;
  max-width: 720px;
  line-height: 1.7;
  font-size: 1.05rem;
}

#c9 a {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 24px;
  border: 1px solid #000000;
  color: #000000;
  text-decoration: none;
}

.theme-black #c9 a {
  border-color: #ffffff;
  color: #ffffff;
}


/* Generic hero area driven by TYPO3 content */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero > .hero-content {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 12vh;
}

/* Hero text always white */
.hero,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p,
.hero a,
.hero span,
.hero small {
  color: #ffffff !important;
}


/* HERO VIDEO – remove player feeling */
#c11 video {
  pointer-events: none;
  background: #000000;
}

/* hide native controls where browser still exposes them */
#c11 video::-webkit-media-controls {
  display: none !important;
}

#c11 video::-webkit-media-controls-enclosure {
  display: none !important;
}

#c11 video::-webkit-media-controls-panel {
  display: none !important;
}


/* HERO VIDEO FULL WIDTH */
#c11,
#c11 .frame-container,
#c11 .frame-group-container,
#c11 .ce-media,
#c11 .ce-gallery,
#c11 .ce-outer,
#c11 .ce-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#c11 video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* HERO TEXT OVERLAY */
#c2 {
  position: relative;
  z-index: 30;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  max-width: 640px;
  margin: 0;
  padding: 0 24px 12vh 8vw;
}

#c2 .frame-container,
#c2 .frame-group-container,
#c2 .ce-bodytext,
#c2 .ce-textpic,
#c2 .ce-textmedia {
  position: relative;
  z-index: 30;
}

#c2,
#c2 h1,
#c2 h2,
#c2 h3,
#c2 h4,
#c2 h5,
#c2 h6,
#c2 p,
#c2 a,
#c2 span,
#c2 small {
  color: #ffffff !important;
}

#c2 h1 {
  margin: 0 0 16px 0;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  line-height: .95;
  font-weight: 400;
}

#c2 p {
  margin: 0 0 14px 0;
  max-width: 520px;
  line-height: 1.6;
  font-size: 1rem;
}

@media (max-width: 900px) {
  #c2 {
    max-width: 100%;
    padding: 0 24px 10vh 24px;
  }
}


/* HERO TEXT – single column + lower position */

#c2 .ce-bodytext {
  column-count: 1 !important;
  column-gap: 0 !important;
  max-width: 640px;
}

/* Textblock im Hero weiter nach unten */

#c2 {
  position: relative;
  z-index: 30;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0 24px 6vh 8vw;
}

/* Hero headline */

#c2 h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .95;
  margin-bottom: 20px;
}

/* Hero text */

#c2 p {
  max-width: 520px;
  font-size: 1.05rem;
  line-height: 1.6;
}


/* HERO TEXT – single column + lower position */

#c2 .ce-bodytext {
  column-count: 1 !important;
  column-gap: 0 !important;
  max-width: 640px;
}

/* Textblock im Hero weiter nach unten */

#c2 {
  position: relative;
  z-index: 30;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0 24px 6vh 8vw;
}

/* Hero headline */

#c2 h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .95;
  margin-bottom: 20px;
}

/* Hero text */

#c2 p {
  max-width: 520px;
  font-size: 1.05rem;
  line-height: 1.6;
}


/* HERO TEXT POSITION HARD OVERRIDE */
.hero > .hero-content > #c2,
.hero #c2 {
  position: relative !important;
  z-index: 30 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 0 24px 3vh 8vw !important;
  margin: 0 !important;
  max-width: 640px !important;
}

.hero #c2 .ce-bodytext {
  column-count: 1 !important;
  column-gap: 0 !important;
  max-width: 640px !important;
}

.hero #c2 h1 {
  font-size: clamp(3rem, 6vw, 6rem) !important;
  line-height: .95 !important;
  margin: 0 0 20px 0 !important;
}

.hero #c2 p {
  max-width: 520px !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin: 0 0 14px 0 !important;
}


/* HERO TEXT – ONLY UID 2 */
#c2 {
  position: absolute !important;
  left: 8vw !important;
  right: auto !important;
  bottom: 4vh !important;
  top: auto !important;
  z-index: 40 !important;
  width: auto !important;
  max-width: 640px !important;
  min-height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#c2 .ce-bodytext {
  column-count: 1 !important;
  column-gap: 0 !important;
  max-width: 640px !important;
}

#c2 h1,
#c2 h2,
#c2 h3,
#c2 p,
#c2 a,
#c2 span,
#c2 small {
  color: #ffffff !important;
}

#c2 h1 {
  margin: 0 0 18px 0 !important;
  font-size: clamp(3rem, 6vw, 6rem) !important;
  line-height: .95 !important;
  font-weight: 400 !important;
}

#c2 p {
  margin: 0 0 14px 0 !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
  font-size: 1.05rem !important;
}


/* RESET UID 4 */
#c4 {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  margin: 120px auto !important;
  padding: 0 !important;
  z-index: auto !important;
}


/* ======================================
   FIXES FOR UID 2 + UID 4
====================================== */

/* UID 2 = HERO TEXT */
#c2 {
  position: absolute !important;
  left: 4vw !important;
  bottom: 2vh !important;
  top: auto !important;
  right: auto !important;
  z-index: 50 !important;
  width: auto !important;
  max-width: 640px !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* force single column */
#c2 .ce-bodytext,
#c2 .frame-bodytext,
#c2 .ce-textpic,
#c2 .ce-textmedia {
  column-count: 1 !important;
  column-gap: 0 !important;
  columns: 1 !important;
  max-width: 640px !important;
  display: block !important;
}

/* hero text styling */
#c2 h1,
#c2 h2,
#c2 h3,
#c2 h4,
#c2 h5,
#c2 h6,
#c2 p,
#c2 a,
#c2 span,
#c2 small {
  color: #ffffff !important;
}

#c2 h1 {
  margin: 0 0 18px 0 !important;
  font-size: clamp(3rem, 6vw, 6rem) !important;
  line-height: .95 !important;
  font-weight: 400 !important;
}

#c2 p {
  margin: 0 0 14px 0 !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
  font-size: 1.05rem !important;
}

/* UID 4 = normal text block a bit more inward */
#c4 {
  padding-left: 48px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  #c2 {
    left: 24px !important;
    right: 24px !important;
    bottom: 4vh !important;
    max-width: none !important;
  }

  #c4 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* ======================================
   ROCK BOCK PAGE HERO
   UID 12 = image
   UID 10 = text
====================================== */

/* reset normal textmedia/split behavior for hero items */
#c12,
#c10 {
  max-width: none !important;
  margin: 0 !important;
}

#c12 .ce-textmedia,
#c12 .ce-textpic,
#c10 .ce-textmedia,
#c10 .ce-textpic {
  display: block !important;
  flex-direction: initial !important;
  gap: 0 !important;
}

/* hero image = full background */
#c12 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 100vh !important;
}

#c12 .frame-container,
#c12 .frame-group-container,
#c12 .ce-gallery,
#c12 .ce-media,
#c12 .ce-outer,
#c12 .ce-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#c12 img,
#c12 video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* hide body text/captions inside hero media */
#c12 .ce-bodytext,
#c12 header,
#c12 figcaption {
  display: none !important;
}

/* overlay */
#c12::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 2;
}

/* hero text overlay */
#c10 {
  position: absolute !important;
  left: 4vw !important;
  bottom: 4vh !important;
  top: auto !important;
  right: auto !important;
  z-index: 30 !important;
  width: auto !important;
  max-width: 640px !important;
  min-height: auto !important;
  padding: 0 !important;
}

#c10 .ce-bodytext,
#c10 .frame-bodytext,
#c10 .ce-textpic,
#c10 .ce-textmedia {
  display: block !important;
  column-count: 1 !important;
  columns: 1 !important;
  max-width: 640px !important;
}

/* hero text always white */
#c10,
#c10 h1,
#c10 h2,
#c10 h3,
#c10 h4,
#c10 h5,
#c10 h6,
#c10 p,
#c10 a,
#c10 span,
#c10 small {
  color: #ffffff !important;
}

#c10 h1 {
  margin: 0 0 18px 0 !important;
  font-size: clamp(3rem, 6vw, 6rem) !important;
  line-height: .95 !important;
  font-weight: 400 !important;
}

#c10 p {
  margin: 0 0 14px 0 !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
  font-size: 1.05rem !important;
}

@media (max-width: 900px) {
  #c10 {
    left: 24px !important;
    right: 24px !important;
    bottom: 6vh !important;
    max-width: none !important;
  }
}


/* ROCK BOCK PAGE – BLOCK 2 / DIE IDEE */
#c13 {
  max-width: 760px;
  margin: 120px auto 120px auto;
  text-align: center;
}

#c13 h1,
#c13 h2,
#c13 h3 {
  margin: 0 0 24px 0;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.03;
  font-weight: 400;
}

#c13 p {
  margin: 0 0 16px 0;
  line-height: 1.7;
  font-size: 1.02rem;
}


/* ROCK BOCK PAGE – BLOCK 2 / DIE IDEE */
#c13 {
  max-width: 760px;
  margin: 120px auto 120px auto;
  text-align: center;
}

#c13 h1,
#c13 h2,
#c13 h3 {
  margin: 0 0 24px 0;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.03;
  font-weight: 400;
}

#c13 p {
  margin: 0 0 16px 0;
  line-height: 1.7;
  font-size: 1.02rem;
}


/* ROCK BOCK PAGE – BLOCK 3 */
#c13 {
  max-width: 1200px;
  margin: 120px auto;
}

#c13 .ce-textmedia,
#c13 .ce-textpic {
  display: flex;
  align-items: center;
  gap: 60px;
}

#c13 .ce-gallery,
#c13 .ce-bodytext {
  flex: 1 1 0;
}

#c13 .ce-gallery img {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
}

#c13 .ce-bodytext {
  max-width: 520px;
}

@media (max-width: 900px) {
  #c13 .ce-textmedia,
  #c13 .ce-textpic {
    display: block;
  }

  #c13 .ce-bodytext {
    max-width: 100%;
    margin-top: 32px;
  }
}


/* ======================================
   ROCK-BOCK-MOEBEL PAGE
====================================== */

/* Intro block */
#c13 {
  max-width: 760px;
  margin: 120px auto;
  text-align: center;
}

#c13 h1,
#c13 h2,
#c13 h3 {
  margin: 0 0 24px 0;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.03;
  font-weight: 400;
}

#c13 p {
  margin: 0 0 16px 0;
  line-height: 1.7;
  font-size: 1.02rem;
}

/* shared split blocks */
#c14,
#c15,
#c16,
#c17 {
  max-width: 1200px;
  margin: 120px auto;
}

#c14 .ce-gallery img,
#c15 .ce-gallery img,
#c16 .ce-gallery img,
#c17 .ce-gallery img {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
}

#c14 .ce-bodytext,
#c15 .ce-bodytext,
#c16 .ce-bodytext,
#c17 .ce-bodytext {
  max-width: 520px;
}

#c14 h1, #c14 h2, #c14 h3,
#c15 h1, #c15 h2, #c15 h3,
#c16 h1, #c16 h2, #c16 h3,
#c17 h1, #c17 h2, #c17 h3 {
  margin: 0 0 24px 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.04;
  font-weight: 400;
}

#c14 p,
#c15 p,
#c16 p,
#c17 p {
  margin: 0 0 16px 0;
  line-height: 1.7;
}

/* left image / right text */
#c14 .ce-textmedia,
#c14 .ce-textpic,
#c16 .ce-textmedia,
#c16 .ce-textpic {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 60px;
}

#c14 .ce-gallery,
#c14 .ce-bodytext,
#c16 .ce-gallery,
#c16 .ce-bodytext {
  flex: 1 1 0;
}

/* left text / right image */
#c15 .ce-textmedia,
#c15 .ce-textpic,
#c17 .ce-textmedia,
#c17 .ce-textpic {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center;
  gap: 60px;
}

#c15 .ce-gallery,
#c15 .ce-bodytext,
#c17 .ce-gallery,
#c17 .ce-bodytext {
  flex: 1 1 0;
}

/* gallery */
#c18 {
  max-width: 1280px;
  margin: 140px auto;
}

#c18 .ce-gallery {
  max-width: none;
}

#c18 .ce-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* mobile */
@media (max-width: 900px) {
  #c14 .ce-textmedia,
  #c14 .ce-textpic,
  #c15 .ce-textmedia,
  #c15 .ce-textpic,
  #c16 .ce-textmedia,
  #c16 .ce-textpic,
  #c17 .ce-textmedia,
  #c17 .ce-textpic {
    display: block !important;
  }

  #c14 .ce-bodytext,
  #c15 .ce-bodytext,
  #c16 .ce-bodytext,
  #c17 .ce-bodytext {
    max-width: 100%;
    margin-top: 32px;
  }
}