/* KONTUR CMS 0.6.0.4 – verbindliche gemeinsame Außenbreite
   Referenz ist die sichtbare Außenkante des Foto-Text-Sliders.
   Full-Bleed-Ausnahmen bleiben bewusst über die gesamte verfügbare Breite. */
:root{
  --cms-content-max-width:1600px;
  --cms-content-gutter:clamp(16px,1.9vw,32px);
  --cms-content-width:min(var(--cms-content-max-width),calc(100vw - (var(--cms-content-gutter) * 2)));
}

/* -------------------------------------------------------------------------
   1) NORMALER CMS-BLOCK
   Die Klasse wird in cms_render_block zentral gesetzt. Dadurch müssen neue
   Blocktypen nicht wieder einzeln über historische max-width-Regeln kämpfen.
   ------------------------------------------------------------------------- */
main > .cms-width-standard,
main .cms-width-standard{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* Klassische Blöcke: der .wrap selbst ist die verbindliche Außenkante.
   Wichtig: altes horizontales Padding wird entfernt – genau dieses Padding
   machte z. B. Text + Farbkarte und Bildergalerie sichtbar schmaler. */
main .cms-width-standard > .wrap,
main .cms-width-standard > .history-intro > .wrap,
main .cms-width-standard > .wrap.history-layout,
.preview :is(.section,.section.tight,.career-page-section,.home-tiles-section,.request-banner-section) > .wrap,
.preview .history-page > .history-intro > .wrap,
.preview .history-page > .wrap.history-layout{
  width:var(--cms-content-width) !important;
  max-width:var(--cms-content-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* Blöcke ohne klassischen .wrap bekommen dieselbe Achse. */
main .cms-width-standard > :is(
  .cms-photo-text-slider__intro,
  .cms-photo-text-slider__shell,
  .home-video-heading,
  .home-video-frame,
  .support-showcase
),
main .cms-width-standard .ku-wrap,
.preview :is(
  .cms-photo-text-slider__intro,
  .cms-photo-text-slider__shell,
  .home-video-heading,
  .home-video-frame,
  .support-showcase
),
.preview .cms-values-slider .ku-wrap{
  width:var(--cms-content-width) !important;
  max-width:var(--cms-content-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* Werte-Slider, Support-Showcase usw. besitzen teilweise eigene horizontale
   Section-Paddings. Vertikales Padding bleibt, horizontal wird es neutralisiert. */
main :is(.cms-values-slider,.support-showcase-section,.home-video-section).cms-width-standard,
.preview :is(.cms-values-slider,.support-showcase-section,.home-video-section){
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Alles innerhalb der gemeinsamen Außenkante darf nicht durch historische
   Einzel-max-width oder auto-Margins wieder kleiner werden. */
main .cms-width-standard > .wrap > :is(
  .card,.section-title,.cms-balanced-grid,.cms-split-feature,.cms-text-image,
  .cms-page-intro-card,.page-hero-box,.gallery-intro,.cms-gallery-block,
  .cms-table-card,.career-final-cta-v22,.request-banner,.news-admin-note,
  .news-list,.cms-news-paged,.career-page-head,.job-list-v22,.machine-summary,
  .materials-table-wrap,.datasheet-grid,.cms-datasheet-grid,.cms-contact-shell,
  .cms-plz-search,.position-editor,.cms-image-card-grid,.job-benefit-grid,
  .career-benefits-grid,.career-values-grid,.contacts-grid,.cms-contact-grid
),
.preview .wrap > :is(
  .card,.section-title,.cms-balanced-grid,.cms-split-feature,.cms-text-image,
  .cms-page-intro-card,.page-hero-box,.gallery-intro,.cms-gallery-block,
  .cms-table-card,.career-final-cta-v22,.request-banner,.news-admin-note,
  .news-list,.cms-news-paged,.career-page-head,.job-list-v22,.machine-summary,
  .materials-table-wrap,.datasheet-grid,.cms-datasheet-grid,.cms-contact-shell,
  .cms-plz-search,.position-editor,.cms-image-card-grid,.job-benefit-grid,
  .career-benefits-grid,.career-values-grid,.contacts-grid,.cms-contact-grid
){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* Text + Farbkarte / andere zweigeteilte Standardblöcke: beide Hälften nutzen
   die komplette gemeinsame Blockbreite. */
main .cms-width-standard .cms-split-feature,
.preview .cms-split-feature{
  width:100% !important;
  max-width:none !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(24px,2.2vw,36px) !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  align-items:stretch !important;
  box-sizing:border-box !important;
}
main .cms-width-standard .cms-split-feature > .card,
main .cms-width-standard .cms-split-feature > .cms-feature-box,
.preview .cms-split-feature > .card,
.preview .cms-split-feature > .cms-feature-box{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Bildergalerie: insbesondere alte Galerie-Maxbreiten und Außenmargins entfernen. */
main .cms-width-standard .cms-gallery-block,
main .cms-width-standard .cms-gallery-media,
.preview .cms-gallery-block,
.preview .cms-gallery-media{
  max-width:none !important;
  box-sizing:border-box !important;
}
main .cms-width-standard .cms-gallery-block,
.preview .cms-gallery-block{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Raster dürfen nicht durch frühere interne Breitenbegrenzungen schrumpfen. */
main .cms-width-standard :is(
  .cms-balanced-grid,.cms-image-card-grid,.gallery-grid,.news-list,.job-list-v22,
  .datasheet-grid,.cms-datasheet-grid,.career-values-grid,.career-benefits-grid
),
.preview :is(
  .cms-balanced-grid,.cms-image-card-grid,.gallery-grid,.news-list,.job-list-v22,
  .datasheet-grid,.cms-datasheet-grid,.career-values-grid,.career-benefits-grid
){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* -------------------------------------------------------------------------
   2) FULL-BLEED-AUSNAHMEN
   Startseiten-Bildflächen + Trennblock bleiben bewusst breit. Ebenso visuelle
   Vollbild-Slider/-Stories, deren Gestaltung auf Vollbreite basiert.
   ------------------------------------------------------------------------- */
main .cms-width-fullbleed,
.preview :is(.hp048-hero,.cms-separator,.hero,.home-card-slider-section,.kd3d-story){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* Trennblock: Hintergrund vollbreit, Text innen auf gemeinsamer Lesekante. */
main .cms-separator > .wrap,
.preview .cms-separator > .wrap{
  width:var(--cms-content-width) !important;
  max-width:var(--cms-content-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Startseiten-Bildflächen bleiben vollständig von der Standardbreite unberührt. */
main .hp048-hero,
.preview .hp048-hero{
  max-width:none !important;
}

/* Kartenslider: Bild-/Stage-Bereich darf vollbreit bleiben; nur seine Überschrift
   liegt auf der normalen Inhaltsachse. */
main .home-card-slider-heading,
.preview .home-card-slider-heading{
  width:var(--cms-content-width) !important;
  max-width:var(--cms-content-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
main .home-card-slider-stage,
.preview .home-card-slider-stage{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Klassischer großer Hero-Slider bleibt ein visueller Vollbreitenbereich. */
main .hero > .slider,
.preview .hero > .slider{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

@media(max-width:900px){
  main .cms-width-standard .cms-split-feature,
  .preview .cms-split-feature{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:767px){
  :root{--cms-content-gutter:16px;}
}

/* -------------------------------------------------------------------------
   KONTUR CMS 0.6.0.3 – Unterseiten ebenfalls verbindlich auf Standardbreite
   Einige ältere Unterseiten erzeugen ihre Bereiche nicht über cms_render_block
   und besitzen deshalb keine cms-width-standard-Klasse. Die gemeinsame Achse
   wird hier zusätzlich direkt auf die klassischen Seiten-Wrapper angewendet.
   ------------------------------------------------------------------------- */
main .wrap,
main > .page-wrap,
main > .page-shell,
main > .content-wrap,
main > .content-shell,
main > .container,
main > section > .container,
main > section > .section-inner,
main > section > .content-inner,
main > section > .page-inner,
.preview .wrap,
.preview .page-wrap,
.preview .page-shell,
.preview .content-wrap,
.preview .content-shell,
.preview > .container,
.preview section > .container,
.preview section > .section-inner,
.preview section > .content-inner,
.preview section > .page-inner{
  width:var(--cms-content-width) !important;
  max-width:var(--cms-content-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* Alte Section-Paddings dürfen die sichtbare Außenkante auf Unterseiten nicht
   nochmals nach innen drücken. Full-Bleed-Flächen bleiben separat ausgenommen. */
main > :is(.section,.section.tight,.career-page-section,.home-tiles-section,.request-banner-section,.support-showcase-section),
.preview > :is(.section,.section.tight,.career-page-section,.home-tiles-section,.request-banner-section,.support-showcase-section){
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Typische ältere Seitencontainer ebenfalls auf die gemeinsame Achse setzen. */
main :is(
  .page-content,.page-content-inner,.page-section-inner,.content-area,.content-area-inner,
  .materials-page-inner,.production-page-inner,.special-page-inner,.career-page-inner,
  .news-page-inner,.contact-page-inner
),
.preview :is(
  .page-content,.page-content-inner,.page-section-inner,.content-area,.content-area-inner,
  .materials-page-inner,.production-page-inner,.special-page-inner,.career-page-inner,
  .news-page-inner,.contact-page-inner
){
  width:var(--cms-content-width) !important;
  max-width:var(--cms-content-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Themen-Showcase: die rechte Bild-/Themenspalte bleibt unverändert. Nur die
   künstliche Textbegrenzung links entfällt, damit die Überschrift später bricht. */
main .support-showcase__intro,
.preview .support-showcase__intro{
  width:100% !important;
  max-width:none !important;
}
main .support-showcase__intro h2,
.preview .support-showcase__intro h2{
  width:100% !important;
  max-width:none !important;
}
main .support-showcase__intro p,
.preview .support-showcase__intro p{
  max-width:48ch !important;
}

@media(max-width:767px){
  main .wrap,
  main > .page-wrap,
  main > .page-shell,
  main > .content-wrap,
  main > .content-shell,
  main > .container,
  main > section > .container,
  main > section > .section-inner,
  main > section > .content-inner,
  main > section > .page-inner{
    width:calc(100% - 32px) !important;
  }
}


/* -------------------------------------------------------------------------
   KONTUR CMS 0.6.0.4 – Feinschliff Themen-Showcase + Bildergalerie
   ------------------------------------------------------------------------- */

/* Themen-Showcase: linke Textspalte spürbar breiter, ohne die rechte
   Themen-/Bildspalte praktisch zu verkleinern. Der zusätzliche Raum wird
   hauptsächlich aus dem bisher sehr großen Spaltenabstand gewonnen. */
main .support-showcase,
.preview .support-showcase{
  grid-template-columns:minmax(320px,calc(34% + clamp(36px,3.4vw,54px))) minmax(0,1fr) !important;
  gap:clamp(20px,1.5vw,24px) !important;
}
main .support-showcase__intro h2,
.preview .support-showcase__intro h2{
  max-width:none !important;
  width:100% !important;
}
main .support-showcase__intro p,
.preview .support-showcase__intro p{
  max-width:54ch !important;
  width:100% !important;
}

/* Trennblock ist ein bewusst vollbreites, grafisches Element und bleibt
   unabhängig von der globalen Radius-Einstellung immer eckig. */
main .cms-separator,
.preview .cms-separator{
  border-radius:0 !important;
}

/* Bildergalerie: mehr Raum für das Bild, kompakterer Textbereich rechts. */
main .cms-gallery-block.has-panel,
.preview .cms-gallery-block.has-panel{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(300px,36%) !important;
  gap:clamp(16px,1.5vw,24px) !important;
  align-items:stretch !important;
}
main .cms-gallery-block.no-panel,
.preview .cms-gallery-block.no-panel{
  display:block !important;
}
main .cms-gallery-media,
.preview .cms-gallery-media{
  position:relative !important;
  min-width:0 !important;
  min-height:clamp(360px,34vw,560px) !important;
  overflow:hidden !important;
  isolation:isolate;
}
main .cms-gallery-slide,
.preview .cms-gallery-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .46s ease,visibility .46s ease !important;
}
main .cms-gallery-slide.active,
.preview .cms-gallery-slide.active{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:2;
}
main .cms-gallery-slide img,
.preview .cms-gallery-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
main .cms-gallery-panel,
.preview .cms-gallery-panel{
  min-width:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:clamp(30px,3vw,56px) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
main .cms-gallery-text-slide,
.preview .cms-gallery-text-slide{
  display:none;
}
main .cms-gallery-text-slide.active,
.preview .cms-gallery-text-slide.active{
  display:block;
}

/* Bildunterschrift: kompakt, sauber und an die globale Badge-Rundung gekoppelt. */
main .cms-gallery-slide figcaption,
.preview .cms-gallery-slide figcaption{
  position:absolute !important;
  left:18px !important;
  bottom:18px !important;
  z-index:6 !important;
  margin:0 !important;
  padding:7px 11px !important;
  max-width:min(62%,420px) !important;
  background:rgba(7,29,55,.62) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.25 !important;
  border-radius:var(--cms-badge-radius,999px) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:none !important;
}

/* Galerie-Navigation: deutlich kleiner und minimalistischer. */
main .cms-gallery-controls,
.preview .cms-gallery-controls{
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  bottom:18px !important;
  z-index:8 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  pointer-events:none;
}
main .cms-gallery-dots,
.preview .cms-gallery-dots{
  position:absolute !important;
  left:50% !important;
  bottom:8px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  pointer-events:auto;
}
main .cms-gallery-dot,
.preview .cms-gallery-dot{
  width:6px !important;
  min-width:6px !important;
  height:6px !important;
  min-height:6px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.55) !important;
  box-shadow:none !important;
  opacity:1 !important;
  cursor:pointer;
  transition:width .22s ease,background .22s ease !important;
}
main .cms-gallery-dot.active,
.preview .cms-gallery-dot.active{
  width:20px !important;
  background:#fff !important;
}
main .cms-gallery-arrows,
.preview .cms-gallery-arrows{
  display:flex !important;
  gap:6px !important;
  pointer-events:auto;
}
main .cms-gallery-arrows button,
.preview .cms-gallery-arrows button{
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.32) !important;
  background:rgba(7,29,55,.58) !important;
  color:#fff !important;
  font-size:19px !important;
  font-weight:400 !important;
  line-height:1 !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease !important;
}
main .cms-gallery-arrows button:hover,
.preview .cms-gallery-arrows button:hover{
  background:rgba(7,29,55,.78) !important;
  border-color:rgba(255,255,255,.5) !important;
  transform:translateY(-1px);
}

@media(max-width:900px){
  main .support-showcase,
  .preview .support-showcase{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  main .cms-gallery-block.has-panel,
  .preview .cms-gallery-block.has-panel{
    grid-template-columns:1fr !important;
  }
  main .cms-gallery-media,
  .preview .cms-gallery-media{
    min-height:clamp(300px,62vw,460px) !important;
  }
  main .cms-gallery-panel,
  .preview .cms-gallery-panel{
    min-height:260px !important;
  }
}

@media(max-width:560px){
  main .cms-gallery-controls,
  .preview .cms-gallery-controls{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
  }
  main .cms-gallery-slide figcaption,
  .preview .cms-gallery-slide figcaption{
    left:12px !important;
    bottom:12px !important;
    max-width:55% !important;
  }
  main .cms-gallery-arrows button,
  .preview .cms-gallery-arrows button{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
  }
}