/* ══ Brücke zwischen Elementor und dem Entwurf ═══════════════════════
   Elementor gibt jedem Container ein eigenes Flex-Verhalten und legt um
   jeden Baustein zwei Hüllen. Beides würde das Raster des Entwurfs
   auseinanderziehen. Hier wird es für die übernommenen Seiten (Klasse
   komos-el) zurückgenommen. Erzeugt von tools/elementor_css.py. */

/* Container verhalten sich wieder wie gewöhnliche Blöcke. */
.e-con.komos-el,
.elementor-element.komos-el.e-con {
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  --display: block;
  --gap: 0px;
  --flex-wrap: nowrap;
}

/* Die innere Hülle der Container fällt aus dem Layout heraus, damit
   Raster und Spalten ihre Kinder direkt erreichen. */
.e-con.komos-el > .e-con-inner { display: contents; }

/* Dasselbe für die Hülle der Bausteine. */
.elementor-widget.komos-el { width: auto; max-width: none; }
.elementor-widget.komos-el > .elementor-widget-container { display: contents; }

/* Elementor stellt Bilder und Texte eigenständig ein; hier gilt der
   Entwurf. */
.komos-el .elementor-image img,
.komos-el img { max-width: 100%; height: auto; }
.komos-el .elementor-heading-title { font: inherit; color: inherit; }

/* Klassen, die im Entwurf selbst ein display setzen, behalten es. */
.e-con.komos-el.announce__inner { display: flex; }
.e-con.komos-el.bildwechsel__punkt { display: grid; }
.e-con.komos-el.bildwechsel__punkte { display: flex; }
.e-con.komos-el.bildwechsel__spur { display: grid; }
.e-con.komos-el.btn { display: inline-flex; }
.e-con.komos-el.btn-row { display: flex; }
.e-con.komos-el.card { display: flex; }
.e-con.komos-el.card__body { display: flex; }
.e-con.komos-el.card__media--contain { display: flex; }
.e-con.komos-el.checklist { display: grid; }
.e-con.komos-el.cols { display: grid; }
.e-con.komos-el.cols__col { display: flex; }
.e-con.komos-el.cta-band { display: grid; }
.e-con.komos-el.dialog__close { display: grid; }
.e-con.komos-el.dialog__form { display: grid; }
.e-con.komos-el.download { display: flex; }
.e-con.komos-el.download__body { display: flex; }
.e-con.komos-el.download__thumb { display: grid; }
.e-con.komos-el.facts { display: grid; }
.e-con.komos-el.facts__row { display: grid; }
.e-con.komos-el.feature { display: flex; }
.e-con.komos-el.feature__icon { display: grid; }
.e-con.komos-el.field { display: grid; }
.e-con.komos-el.footer-contact { display: flex; }
.e-con.komos-el.form { display: grid; }
.e-con.komos-el.form__foot { display: flex; }
.e-con.komos-el.gegenueber { display: grid; }
.e-con.komos-el.gegenueber__seite { display: flex; }
.e-con.komos-el.grid { display: grid; }
.e-con.komos-el.hero { display: grid; }
.e-con.komos-el.hero__actions { display: flex; }
.e-con.komos-el.hero__eyebrow { display: block; }
.e-con.komos-el.hero__layout { display: grid; }
.e-con.komos-el.job-aside { display: grid; }
.e-con.komos-el.job-facts { display: grid; }
.e-con.komos-el.job-facts__row { display: grid; }
.e-con.komos-el.job-layout { display: grid; }
.e-con.komos-el.logoleiste { display: flex; }
.e-con.komos-el.nav { display: flex; }
.e-con.komos-el.nav-toggle { display: inline-flex; }
.e-con.komos-el.nav__link { display: inline-flex; }
.e-con.komos-el.nav__sub { display: none; }
.e-con.komos-el.quote { display: grid; }
.e-con.komos-el.review { display: flex; }
.e-con.komos-el.section-head { display: grid; }
.e-con.komos-el.section-head__titel { display: flex; }
.e-con.komos-el.site-footer__bottom { display: flex; }
.e-con.komos-el.site-footer__funding { display: flex; }
.e-con.komos-el.site-footer__legal { display: flex; }
.e-con.komos-el.site-footer__main { display: grid; }
.e-con.komos-el.site-header__cta { display: none; }
.e-con.komos-el.site-header__inner { display: flex; }
.e-con.komos-el.site-header__nav { display: none; }
.e-con.komos-el.social { display: flex; }
.e-con.komos-el.split { display: grid; }
.e-con.komos-el.split__text { display: flex; }
.e-con.komos-el.stars { display: inline-flex; }
.e-con.komos-el.stat__label { display: block; }
.e-con.komos-el.stat__value { display: block; }
.e-con.komos-el.stats { display: grid; }
.e-con.komos-el.steps { display: grid; }
.e-con.komos-el.steps__meta { display: block; }
.e-con.komos-el.to-top { display: grid; }

/* Breite, Abstand und Ausrichtung der Container kommen aus dem
   Entwurf und nicht von Elementor. */
.e-con.komos-el.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.e-con.komos-el.section { padding-block: var(--section-y); }
.e-con.komos-el.section--surface { background: var(--c-surface); }
.e-con.komos-el.section--dark { background: var(--c-navy); color: var(--c-text-on-dark); }
.e-con.komos-el.container, .e-con.komos-el.cols__col, .e-con.komos-el.split__text, .e-con.komos-el.card__body, .e-con.komos-el.section-head { container-type: inline-size; }
.e-con.komos-el.grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.e-con.komos-el.grid--top { align-items: start; }
@container (min-width: 34rem) {
  .e-con.komos-el.grid--2, .e-con.komos-el.grid--3, .e-con.komos-el.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 52rem) {
  .e-con.komos-el.grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 64rem) {
  .e-con.komos-el.grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.e-con.komos-el.prose { max-width: 68ch; }
.e-con.komos-el.hero { position: relative; display: grid; background: var(--c-navy-deep); color: var(--c-text-on-dark); isolation: isolate; }
.e-con.komos-el.hero__inner { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.e-con.komos-el.hero__content { max-width: 46rem; }
.e-con.komos-el.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.e-con.komos-el.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.e-con.komos-el.section-head { display: grid; gap: var(--sp-4) var(--sp-8); margin-bottom: var(--sp-7); padding-top: var(--sp-5); border-top: 2px solid var(--c-gold); }
.e-con.komos-el.section-head__titel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.e-con.komos-el.card { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.e-con.komos-el.card { color: var(--c-text); }
.e-con.komos-el.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface); }
.e-con.komos-el.card__media--contain { background: var(--c-surface); }
.e-con.komos-el.card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.e-con.komos-el.card__foot { margin-top: auto; padding-top: var(--sp-2); }
.e-con.komos-el.card--link { position: relative; }
.e-con.komos-el.card--feature { position: relative; isolation: isolate; min-height: 28rem; justify-content: flex-end; border: 0; color: var(--c-text-on-dark); }
.e-con.komos-el.feature { display: flex; gap: var(--sp-4); align-items: flex-start; }
.e-con.komos-el.feature__icon { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-gold-soft); color: var(--c-navy); }
.e-con.komos-el.split { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); align-items: start; }
.e-con.komos-el.split__text { display: flex; flex-direction: column; gap: var(--sp-5); }
.e-con.komos-el.breadcrumb { padding-block: var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-muted); }
.e-con.komos-el.page-head { background: var(--c-surface); padding-block: var(--sp-8) var(--sp-7); }
.e-con.komos-el.hero__layout { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1000px) {
  .e-con.komos-el.hero__layout--split { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
}
.e-con.komos-el.review { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: var(--sp-5); min-height: 0; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.e-con.komos-el.cols { display: grid; gap: clamp(var(--sp-5), 3vw, var(--sp-7)); align-items: start; }
.e-con.komos-el.cols__col { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
@container (min-width: 52rem) {
  .e-con.komos-el.cols--2 { grid-template-columns: var(--cols, 1fr 1fr); }
}
.e-con.komos-el.card__media--portrait { aspect-ratio: 3 / 4; }
.e-con.komos-el.stats--text { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.e-con.komos-el.download { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.e-con.komos-el.download__thumb { aspect-ratio: 1 / 1.414; background: var(--c-surface); border-bottom: 1px solid var(--c-border); display: grid; place-items: center; padding: var(--sp-4); }
.e-con.komos-el.download__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1; }
.e-con.komos-el.card__media--contain { aspect-ratio: auto; border-bottom: 0; background: transparent; padding: var(--sp-5) var(--sp-5) 0; display: flex; }
.e-con.komos-el.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.e-con.komos-el.booking { min-height: 30rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-white); overflow: hidden; }

/* Regeln des Entwurfs für die Bausteine. */
.elementor-widget.komos-el.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

/* Bilder, die im Entwurf die ganze Fläche füllen, tun das auch als
   Elementor-Baustein. Die Hülle übernimmt dann die Lage. */
.elementor-widget.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.elementor-widget.card__media img { width: 100%; }

/* Im Editor von Elementor sollen die leeren Hüllen greifbar bleiben. */
.elementor-editor-active .e-con.komos-el { min-height: 1px; }
