/* ==========================================================================
   Elementor-Brücke

   Elementor hängt selbst vergebene CSS-Klassen an den Widget-Wrapper
   (div.elementor-widget), nicht an das erzeugte Element. Diese Datei
   reicht die Gestaltung des Designsystems an die inneren Elemente
   weiter, damit Überschriften, Texte und Buttons korrekt aussehen.
   ========================================================================== */

/* -------------------------------------------------- Grundlagen */
.elementor-widget { margin: 0; }
.elementor-widget-container > :first-child { margin-top: 0; }
.elementor-widget-container > :last-child { margin-bottom: 0; }

/* Elementor-Container sollen die Gestaltung des Designsystems nicht stören */
.e-con, .e-con-inner { --padding-inline-start: 0; --padding-inline-end: 0; }

/* -------------------------------------------------- Überschriften */
.eyebrow .elementor-heading-title,
.hero__title .elementor-heading-title,
.h1 .elementor-heading-title,
.h2 .elementor-heading-title,
.h3 .elementor-heading-title,
.h4 .elementor-heading-title,
.s-card__index .elementor-heading-title,
.s-card__title .elementor-heading-title,
.stat__value .elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
}
.s-card__title .elementor-heading-title a { color: inherit; text-decoration: none; }
.hero__title .elementor-heading-title .text-gradient {
  background: linear-gradient(96deg, #8FC4FF, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -------------------------------------------------- Fließtext
   Elementor 4 rendert den Inhalt direkt im Widget-Element; ältere
   Versionen schieben noch einen .elementor-widget-container dazwischen.
   Beide Varianten werden abgedeckt. */
.lead > *, .lead .elementor-widget-container > *,
.hero__lead > *, .hero__lead .elementor-widget-container > *,
.body-text > *, .body-text .elementor-widget-container > *,
.s-card__text > *, .s-card__text .elementor-widget-container > * {
  font: inherit;
  color: inherit;
  margin: 0;
}
.lead > * + *, .lead .elementor-widget-container > * + *,
.body-text > * + *, .body-text .elementor-widget-container > * + * {
  margin-top: 1.1rem;
}

/* -------------------------------------------------- Buttons
   Die Wrapper werden per display:contents aus dem Layout genommen,
   damit der eigentliche Link die Gestaltung trägt und vollständig
   klickbar bleibt. */
.btn-el > .elementor-widget-container,
.btn-el .elementor-button-wrapper { display: contents; }

.btn-el .elementor-button {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-grad: var(--grad-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background-color: var(--btn-bg);
  background-image: var(--btn-grad);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: none;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-el .elementor-button::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.btn-el .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--cyan) 55%, transparent);
  color: #fff;
}
.btn-el .elementor-button:hover::after { opacity: 1; }
.btn-el .elementor-button:active { transform: translateY(0); }
.btn-el .elementor-button-text { font: inherit; }

.btn-el--light .elementor-button { --btn-bg: #fff; --btn-grad: var(--grad-light); --btn-fg: var(--ink); }
.btn-el--ghost .elementor-button {
  --btn-bg: transparent;
  --btn-grad: none;
  --btn-fg: var(--text);
  border-color: var(--line);
}
.btn-el--ghost.btn-el--on-dark .elementor-button {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.btn-el--ghost .elementor-button:hover { --btn-fg: #fff; border-color: transparent; }

/* Button-Reihe */
.btn-row.e-con, .btn-row.e-con-inner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .85rem;
  margin-top: 2.2rem;
  width: auto;
}

/* -------------------------------------------------- Raster wiederherstellen
   Elementor-Container sind standardmäßig Flexbox. Wo das Designsystem
   ein Grid erwartet, wird es hier zurückgeholt. */
.bento.e-con, .bento.e-con-inner,
.section-head--split.e-con, .section-head--split.e-con-inner,
.hero__inner.e-con, .hero__inner.e-con-inner,
.spotlight.e-con, .spotlight.e-con-inner,
.gallery.e-con, .gallery.e-con-inner,
.steps.e-con, .steps.e-con-inner,
.stats.e-con, .stats.e-con-inner { display: grid; }

/* Karten im Bento bleiben Flex-Spalten */
.s-card.e-con, .s-card.e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Hero-Spalten */
.hero__copy.e-con, .hero__copy.e-con-inner,
.hero__stage-wrap.e-con, .hero__stage-wrap.e-con-inner {
  display: block;
  width: 100%;
}

/* -------------------------------------------------- Abstände im Container */
.hero.e-con { padding-block: clamp(8.5rem, 16vh, 11.5rem) clamp(3rem, 6vw, 5rem); }
.section.e-con { padding-block: var(--section-y); }
.hero.e-con > .e-con-inner,
.section.e-con > .e-con-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------- Elementor-Editor
   Im Bearbeitungsmodus sollen Container sichtbar bleiben, auch wenn
   das Designsystem sie absolut positioniert. */
.elementor-editor-active .hero__bg { pointer-events: none; }

/* -------------------------------------------------- Seitenrand
   .container liegt hier auf einem Elementor-Container und muss
   dessen Flex-Voreinstellungen überschreiben. */
.container.e-con, .container.e-con-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.hero__inner.e-con { display: grid; }

/* -------------------------------------------------- HTML-Widgets durchreichen
   Elementor umschließt jedes Widget mit einem positionierten div. Bei
   Bausteinen, die absolute Positionierung oder margin-top:auto brauchen
   (Karten-Motive, Hero-Hintergrund, Kartenfuß), wird dieser Wrapper per
   display:contents aus dem Layout genommen. */
.hero > .elementor-widget-html,
.hero__copy > .elementor-widget-html,
.hero__stage-wrap > .elementor-widget-html,
.s-card > .elementor-widget-html { display: contents; }

/* Der Hero-Hintergrund soll hinter allem liegen */
.hero > .elementor-widget-html .hero__bg { z-index: -1; }

/* Die Bühne füllt ihre Spalte */
.hero__stage-wrap > .elementor-widget-html > .elementor-widget-container { display: contents; }

/* -------------------------------------------------- Textbreite in Karten
   Elementor erzeugt je Element eigenes CSS mit hoher Spezifität
   (.elementor-NN .elementor-element-XX { max-width: 100% }) und wird nach
   dem Theme geladen. Für diese wenigen Regeln ist !important der einzige
   verlässliche Weg, damit der Text nicht unter dem Motiv liegt. */
@media (min-width: 680px) {
  .s-card--has-media > .s-card__text,
  .s-card--has-media > .s-card__tags,
  .s-card--has-media > .s-card__foot { max-width: min(42ch, 62%) !important; }

  .s-card--5.s-card--has-media > .s-card__text,
  .s-card--5.s-card--has-media > .s-card__tags,
  .s-card--5.s-card--has-media > .s-card__foot { max-width: min(34ch, 66%) !important; }

  .s-card--digital > .s-card__text,
  .s-card--digital > .s-card__tags { max-width: min(46ch, 52%) !important; }
}

/* -------------------------------------------------- Weitere Abschnitte */

/* Graue Sektionsfläche (im Original ein Inline-Style) */
.section--grey { background: var(--paper-50); }

/* Spotlight: zwei Spalten, Bild und Text */
.spotlight__copy.e-con, .spotlight__copy.e-con-inner,
.spotlight__side.e-con, .spotlight__side.e-con-inner,
.cta-band__copy.e-con, .cta-band__copy.e-con-inner,
.cta-band__side.e-con, .cta-band__side.e-con-inner { display: block; width: 100%; }
.cta-band__inner.e-con, .cta-band__inner.e-con-inner { display: grid; }
.spotlight--reverse .spotlight__media { order: 2; }

/* Projektkacheln: Bild muss direktes Kind sein, damit es die Kachel füllt */
.project > .elementor-widget-image,
.project > .elementor-widget-image > .elementor-widget-container,
.project > .elementor-widget-html { display: contents; }
.project > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }

/* Spotlight-Bild */
.spotlight__media > .elementor-widget-image > .elementor-widget-container { display: contents; }

/* Abschnitte mit absolut positionierten Elementen */
.cta-band > .elementor-widget-html { display: contents; }

/* Überschrift über den Partnerlogos */
.partners-title { margin-top: 3.5rem; }
.partners-title + .elementor-widget-html .partners { margin-top: 1.75rem; }

/* Zahlen-Block */
.spotlight__side > .elementor-widget-html .stats { margin-bottom: 0; }

/* -------------------------------------------------- Seitenkopf der Unterseiten
   Auto-Platzierung im Raster ordnet die Elemente falsch an, deshalb
   werden Spalten hier ausdrücklich zugewiesen. */
.page-hero__inner.e-con, .page-hero__inner.e-con-inner { display: block; }
.page-hero__copy.e-con, .page-hero__copy.e-con-inner { display: block; width: 100%; }
.page-hero__crumbs { margin-bottom: 1.5rem; }
.page-hero__aside.e-con, .page-hero__aside.e-con-inner { display: none; }

@media (min-width: 1100px) {
  .page-hero--split .page-hero__inner.e-con {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .page-hero--split .page-hero__crumbs { grid-column: 1 / -1; grid-row: 1; }
  .page-hero--split .page-hero__copy   { grid-column: 1; grid-row: 2; }
  .page-hero--split .page-hero__aside.e-con {
    display: block;
    grid-column: 2; grid-row: 2;
    justify-self: end;
    max-width: 460px;
  }
  .page-hero__aside img { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); }
}

/* Sprungmarken-Leiste unterhalb des Seitenkopfs */
.page-hero-anchors.e-con {
  background: var(--ink);
  padding-block: 0 clamp(2rem, 4vw, 3rem);
}
.page-hero-anchors .anchor-nav { margin-top: 0; }

/* Dunklere Variante für den Projektbereich */
.section--ink2 { background: var(--ink-800); }

/* Kontaktseite: helle Kontaktliste */
.contact-list--light a, .contact-list--light p { color: var(--text); border-color: var(--line); }
.contact-list--light li:last-child a,
.contact-list--light li:last-child p { border-bottom-color: var(--line); }
.contact-list--light small { color: var(--text-muted); }
.kontakt__side.e-con, .kontakt__side.e-con-inner { display: block; width: 100%; }
.form-card.e-con, .form-card.e-con-inner { display: block; width: 100%; }

/* -------------------------------------------------- Kopf- und Fußbereich
   Zwei Störquellen:
   1. Hello Elementor benutzt die Klassen .site-header / .site-footer
      ebenfalls und begrenzt sie auf 1140 px. Namenskollision mit dem
      Designsystem – hier aufgehoben.
   2. Elementor-Container bringen von Haus aus padding: 10px 0 mit.
      Auf weißem Body ergibt das sichtbare Streifen über dem Header
      und um die Fußzeile. */

.site-header.site-header,
.site-footer.site-footer {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}
.site-footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }

/* Container des Header-Footer-Builders: keine Polsterung, keine Lücken */
.kf-header.e-con,
.kf-footer.e-con {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
}
.kf-footer.e-con { background: var(--ink); }

/* Die Wrapper des Plugins ebenfalls entspannen */
.footer-width-fixer,
.ehf-header > .elementor,
.ehf-footer > .elementor { width: 100%; max-width: none; }

/* Damit unterhalb des Inhalts nie Weiß durchscheint */
body { background: var(--ink); }
.elementor-page .site-main,
.page-content { background: var(--paper); }

/* -------------------------------------------------- Klickfläche der Karten
   Die ganze Karte soll klickbar sein. Dafür spannt der Überschriften-Link
   ein unsichtbares ::after über die Karte auf. Das funktioniert nur, wenn
   kein Zwischenelement positioniert ist – Elementor setzt auf dem
   Widget-Wrapper aber position:relative. Hier zurückgenommen. */
.s-card > .s-card__title { position: static; }
.s-card > .s-card__title .elementor-heading-title { position: static; }

/* "Mehr erfahren" liegt über der Klickfläche, damit der Hover-Effekt
   des Links sichtbar bleibt. Ziel ist dasselbe wie bei der Karte. */
.s-card__foot a.link-arrow { position: relative; z-index: 3; }

/* Collage im Seitenkopf: Widget-Wrapper durchreichen */
.page-hero__aside > .elementor-widget-html { display: contents; }
@media (min-width: 1100px) { .page-hero__aside.e-con { max-width: 480px; } }

/* CSS-Mockup in der digitalen Karte: Wrapper aus dem Layout nehmen */
.s-card--digital > .elementor-widget-html { display: contents; }

/* Zentrierter Abschnittskopf und mittige Buttons im Elementor-Container */
.section-head--center.e-con, .section-head--center.e-con-inner {
  display: block;
  width: 100%;
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}
.btn-row--center.e-con, .btn-row--center.e-con-inner { justify-content: center; }

/* Laufband: Elementor-Container bringt 10px Polsterung mit, dadurch
   schimmerte der Body-Hintergrund als Streifen durch. */
.marquee-band.e-con { padding: 0; margin: 0; }

/* Digitaler Seitenkopf: Hintergrund-Wrapper durchreichen */
.page-hero > .elementor-widget-html { display: contents; }
.page-hero__aside > .elementor-widget-html > .elementor-widget-container { display: contents; }

/* Karten-Hintergrund und Hilfe-Panel im Elementor-Container */
.s-card > .elementor-widget-html { display: contents; }
.help-panel.e-con, .help-panel.e-con-inner { display: grid; }
.help-panel__copy.e-con, .help-panel__copy.e-con-inner { display: block; width: 100%; }
.help-panel__actions.e-con, .help-panel__actions.e-con-inner {
  display: grid;
  align-content: center;
  width: 100%;
}
.help-panel__actions > .elementor-widget-html { display: contents; }