/* KI-IT CLUB — ELEMENTOR.CSS */
/* Elementor Classes: ohne Punkt in Elementor eintragen. */
.ki-club-page .ki-club-hero {
 background: var(--cd-gradient-dark);
 color: var(--cd-color-text);
}
.ki-club-page .ki-dark-section {
 background: var(--cd-gradient-dark);
 color: var(--cd-color-text);
}
.ki-club-page .ki-dark-section--alt {
 background: var(--cd-gradient-dark-alt);
 color: var(--cd-color-text);
}
.ki-club-page .ki-dark-section :is(h1, h2, h3, h4, h5, h6),
.ki-club-page .ki-club-hero :is(h1, h2, h3, h4, h5, h6) {
 color: var(--cd-color-heading-on-dark);
}
.ki-club-page .ki-light-section {
 background: var(--cd-color-bg-light);
 color: var(--cd-color-text-on-light);
}
.ki-club-page .ki-light-section--alt {
 background: var(--cd-color-bg-light-alt);
 color: var(--cd-color-text-on-light);
}
.ki-club-page .ki-light-section :is(h1, h2, h3, h4, h5, h6),
.ki-club-page .ki-light-section--alt :is(h1, h2, h3, h4, h5, h6) {
 color: var(--cd-color-heading-on-light);
}
.ki-club-page .ki-warteliste-section {
 border-top: 4px solid var(--cd-color-primary);
 background: var(--cd-color-secondary-soft);
 color: var(--cd-color-text);
}
.ki-club-page .ki-warteliste-section :is(h1, h2, h3, h4, h5, h6) {
 color: var(--cd-color-heading-on-dark);
}
.ki-club-page .ki-eyebrow {
 color: var(--cd-color-primary);
 font-family: var(--cd-font-heading);
 font-size: var(--cd-fs-xs);
 letter-spacing: var(--cd-ls-eyebrow);
 text-transform: uppercase;
}
.ki-club-page .elementor-button.ki-button-primary {
 border: 0;
 border-radius: var(--cd-radius-pill);
 background: var(--cd-color-primary);
 color: var(--cd-color-text-on-primary);
 font-family: var(--cd-font-heading);
 letter-spacing: var(--cd-ls-label);
 transition: background-color var(--cd-transition-fast), color var(--cd-transition-fast);
}
.ki-club-page .elementor-button.ki-button-primary:hover,
.ki-club-page .elementor-button.ki-button-primary:focus-visible {
 background: var(--cd-color-primary-soft);
 color: var(--cd-color-text-on-primary);
}
.ki-club-page .elementor-button.ki-button-secondary {
 border: 0;
 border-radius: var(--cd-radius-pill);
 background: var(--cd-color-secondary);
 color: var(--cd-color-text-on-secondary);
 font-family: var(--cd-font-heading);
 letter-spacing: var(--cd-ls-label);
}
.ki-club-page .elementor-button.ki-button-secondary:hover {
 background: var(--cd-color-secondary-soft);
 color: var(--cd-color-text-on-secondary);
}
.ki-club-page .elementor-button.ki-button-ghost {
 border: 1px solid var(--cd-color-border);
 border-radius: var(--cd-radius-pill);
 background: transparent;
 color: var(--cd-color-text);
 font-family: var(--cd-font-heading);
 letter-spacing: var(--cd-ls-label);
}
.ki-club-page .elementor-button.ki-button-ghost:hover {
 border-color: var(--cd-color-primary);
 background: var(--cd-color-primary-tint);
 color: var(--cd-color-primary);
}

/* =====================================================
/* =====================================================

   KI/IT Club – Hero-Bereich

   Externe Gestaltung des ersten Hero-Containers

   ===================================================== */

.hero-dark-gradient {

  position: relative !important;

  overflow: hidden !important;

  min-height: 680px !important;

  padding: 92px 0 100px !important;

  background: linear-gradient(

    110deg,

    rgba(16, 29, 40, 0.97) 0%,

    rgba(16, 29, 40, 0.88) 55%,

    rgba(16, 29, 40, 0.68) 100%

  ) !important;

}

/* Gemeinsame linke Ausrichtung aller Hero-Elemente */

.hero-dark-gradient > .elementor-element {

  align-self: flex-start !important;

  width: min(100% - 60px, 760px) !important;

  max-width: 760px !important;

  margin-right: auto !important;

  margin-left: clamp(32px, 13vw, 250px) !important;

  text-align: left !important;

}

/* Kleiner Einleitungstext oberhalb der Überschrift */

.hero-dark-gradient > .elementor-element:nth-child(1),

.hero-dark-gradient > .elementor-element:nth-child(1) .elementor-widget-container,

.hero-dark-gradient > .elementor-element:nth-child(1) p {

  margin-bottom: 12px !important;

  color: #d7d350 !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 1.2px !important;

  line-height: 1.2 !important;

  text-align: left !important;

  text-transform: uppercase !important;

}

/* Hauptüberschrift */

.hero-dark-gradient > .elementor-element:nth-child(2) {

  max-width: 720px !important;

  margin-bottom: 24px !important;

}

.hero-dark-gradient > .elementor-element:nth-child(2) .elementor-heading-title {

  margin: 0 !important;

  color: #d7d350 !important;

  font-size: clamp(52px, 5.4vw, 82px) !important;

  font-weight: 800 !important;

  line-height: 0.94 !important;

  letter-spacing: -1.5px !important;

  text-align: left !important;

  text-transform: uppercase !important;

}

/* Erster Beschreibungstext */

.hero-dark-gradient > .elementor-element:nth-child(3),

.hero-dark-gradient > .elementor-element:nth-child(3) p {

  max-width: 610px !important;

  margin-bottom: 16px !important;

  color: rgba(255, 255, 255, 0.90) !important;

  font-size: 17px !important;

  font-weight: 400 !important;

  line-height: 1.55 !important;

  text-align: left !important;

}

/* Hervorgehobener Beschreibungstext */

.hero-dark-gradient > .elementor-element:nth-child(4),

.hero-dark-gradient > .elementor-element:nth-child(4) p {

  max-width: 610px !important;

  margin-bottom: 16px !important;

  color: #ffffff !important;

  font-size: 17px !important;

  font-weight: 800 !important;

  line-height: 1.45 !important;

  text-align: left !important;

}

/* Button-Container links ausrichten */

.hero-dark-gradient > .elementor-element:nth-child(5) {

  display: flex !important;

  flex-direction: row !important;

  justify-content: flex-start !important;

  align-items: center !important;

  gap: 12px !important;

  margin-top: 6px !important;

  margin-bottom: 14px !important;

}

/* Primärer Button */

.hero-dark-gradient > .elementor-element:nth-child(5) .elementor-button {

  min-height: 52px !important;

  padding: 15px 26px !important;

  border: 1px solid #d7d350 !important;

  border-radius: 999px !important;

  background: #d7d350 !important;

  color: #172532 !important;

  font-size: 13px !important;

  font-weight: 800 !important;

  letter-spacing: 0.4px !important;

  text-transform: uppercase !important;

}

/* Sekundärer Button */

.hero-dark-gradient > .elementor-element:nth-child(5)

.elementor-widget-button:nth-child(2)

.elementor-button {

  border-color: rgba(255, 255, 255, 0.35) !important;

  background: transparent !important;

  color: #ffffff !important;

}

/* Kleiner Hinweistext unterhalb der Buttons */

.hero-dark-gradient > .elementor-element:nth-child(6),

.hero-dark-gradient > .elementor-element:nth-child(6) p {

  max-width: 520px !important;

  margin-top: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 1.45 !important;

  text-align: left !important;

}

/* Anpassungen für Tablets */

@media (max-width: 1024px) {

  .hero-dark-gradient {

    min-height: auto !important;

    padding: 78px 0 82px !important;

  }

  .hero-dark-gradient > .elementor-element {

    margin-left: clamp(30px, 8vw, 90px) !important;

  }

  .hero-dark-gradient > .elementor-element:nth-child(2) .elementor-heading-title {

    font-size: clamp(46px, 6.5vw, 68px) !important;

  }

}

/* Anpassungen für Smartphones */

@media (max-width: 767px) {

  .hero-dark-gradient {

    padding: 62px 0 70px !important;

  }

  .hero-dark-gradient > .elementor-element {

    width: calc(100% - 36px) !important;

    margin-left: 18px !important;

  }

  .hero-dark-gradient > .elementor-element:nth-child(2) .elementor-heading-title {

    font-size: clamp(40px, 11vw, 54px) !important;

    letter-spacing: -0.8px !important;

  }

  .hero-dark-gradient > .elementor-element:nth-child(3),

  .hero-dark-gradient > .elementor-element:nth-child(3) p,

  .hero-dark-gradient > .elementor-element:nth-child(4),

  .hero-dark-gradient > .elementor-element:nth-child(4) p {

    font-size: 16px !important;

  }

  .hero-dark-gradient > .elementor-element:nth-child(5) {

    flex-wrap: wrap !important;

  }

}
 
/* =====================================================
  KI/IT Club – Zweiter Inhaltsbereich
  Ziel: Abschnitt „Du weißt, dass KI dein Business ...“
  Der Bereich wird über die zweite Top-Level-Section
  der Seite mit der ID 8255 angesprochen.
  ===================================================== */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2) {
 padding: 100px 30px 90px !important;
 background: #f8f7f3 !important;
}
/* Gemeinsame Inhaltsbreite und linke Ausrichtung */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element {
 width: min(100%, 1000px) !important;
 max-width: 1000px !important;
 margin-right: auto !important;
 margin-left: auto !important;
 text-align: left !important;
}
/* Kleiner Einleitungstext */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(1),
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(1) p {
 margin-bottom: 12px !important;
 color: #69717a !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 letter-spacing: 1.2px !important;
 line-height: 1.2 !important;
 text-align: left !important;
 text-transform: uppercase !important;
}
/* Hauptüberschrift */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(2) {
 margin-bottom: 20px !important;
}
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(2) .elementor-heading-title {
 max-width: 900px !important;
 margin: 0 !important;
 color: #243c54 !important;
 font-size: clamp(34px, 3.1vw, 48px) !important;
 font-weight: 800 !important;
 line-height: 1.02 !important;
 letter-spacing: -0.8px !important;
 text-align: left !important;
 text-transform: uppercase !important;
}
/* Einleitender Beschreibungstext */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(3),
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(3) p {
 max-width: 920px !important;
 margin-bottom: 38px !important;
 color: #626a72 !important;
 font-size: 17px !important;
 font-weight: 400 !important;
 line-height: 1.55 !important;
 text-align: left !important;
}
/* Zweispaltiger Bereich mit Problempunkten */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4) {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 column-gap: 70px !important;
 row-gap: 28px !important;
 margin-bottom: 42px !important;
}
/* Innere Spalten im Problembereich */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4)
> .elementor-element {
 width: 100% !important;
 max-width: none !important;
 margin: 0 !important;
}
/* Texte innerhalb der beiden Spalten */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4)
.elementor-widget-text-editor,
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4)
.elementor-widget-text-editor p {
 margin-bottom: 22px !important;
 color: #626a72 !important;
 font-size: 16px !important;
 font-weight: 400 !important;
 line-height: 1.55 !important;
 text-align: left !important;
}
/* Abstand vor dem Pfeil oder Aufzählungszeichen */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4)
.elementor-widget-text-editor p {
 padding-left: 24px !important;
 text-indent: -24px !important;
}
/* Unterer Bereich mit Fragebox und Abschlusstext */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5) {
 display: grid !important;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
 align-items: center !important;
 column-gap: 70px !important;
 margin-top: 12px !important;
}
/* Linke Fragebox */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5)
> .elementor-element:first-child {
 min-height: 116px !important;
 padding: 25px 28px !important;
 border: 1px solid rgba(215, 211, 80, 0.65) !important;
 border-radius: 18px !important;
 background: rgba(255, 255, 255, 0.34) !important;
}
/* Text in der Fragebox */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5)
> .elementor-element:first-child
.elementor-widget-text-editor,
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5)
> .elementor-element:first-child p {
 margin: 0 !important;
 color: #4f5963 !important;
 font-size: 17px !important;
 line-height: 1.45 !important;
}
/* Kleiner Zusatztext in der Fragebox */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5)
> .elementor-element:first-child
.elementor-widget-text-editor + .elementor-widget-text-editor p {
 margin-top: 8px !important;
 color: #7a8085 !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 letter-spacing: 1.1px !important;
 text-transform: uppercase !important;
}
/* Rechter Abschlusstext */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5)
> .elementor-element:last-child,
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5)
> .elementor-element:last-child p {
 margin: 0 !important;
 color: #626a72 !important;
 font-size: 17px !important;
 line-height: 1.55 !important;
 text-align: left !important;
}
/* Hervorgehobene Wörter im Abschlusstext */
body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
strong {
 color: #243c54 !important;
 font-weight: 800 !important;
}
/* Anpassungen für Tablets */
@media (max-width: 1024px) {
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2) {
   padding: 80px 30px 72px !important;
 }
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4),
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5) {
   column-gap: 40px !important;
 }
}
/* Anpassungen für Smartphones */
@media (max-width: 767px) {
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2) {
   padding: 65px 18px 60px !important;
 }
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(2) .elementor-heading-title {
   font-size: clamp(30px, 9vw, 40px) !important;
 }
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4),
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(5) {
   grid-template-columns: 1fr !important;
   row-gap: 24px !important;
 }
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(3),
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(3) p,
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4)
 .elementor-widget-text-editor,
 body.page-id-8255 .elementor.elementor-8255 > .elementor-element:nth-child(2)
> .elementor-element:nth-child(4)
 .elementor-widget-text-editor p {
   font-size: 16px !important;
 }
}