/* =========================
   ELITE HERO
========================= */

.elite-hero {
  background: linear-gradient(135deg, #2f6fa3, #3e7dad);
  padding: 60px 20px;
}


.elite-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
  background: #ffffff;
  border-radius: 14px;
  padding: 60px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}


/* LEFT */

.elite-left {
  flex: 1.2;
}

.elite-left h1 {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 22px;
  color: #1c2b39;
}

.elite-left h1 span {
  color: #2f6fa3; /* kein Orange mehr */
}

.elite-sub {
  font-size: 18px;
  margin-bottom: 25px;
  color: #444;
}

.elite-benefits {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.elite-benefits li {
  margin-bottom: 12px;
  font-size: 16px;
  color: #2e2e2e;
}


.elite-proof {
  font-size: 15px;
  color: #333;
}

/* BOOK */

.elite-book {
  flex: 0.8;
  text-align: center;
}

.elite-book img {
  max-width: 100%;
  transform: none; /* Rotation entfernt */
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.12));
}


/* FORM */

.elite-form {
  flex: 1;
}

.elite-form-box {
  background: #f4f6f8;
  padding: 38px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}


.elite-form-box h3 {
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 600;
}

.elite-input {
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 16px;
  margin-bottom: 20px;
}

.elite-input:focus {
  border-color: #ff7a1a;
  outline: none;
}

.elite-button {
  width: 100%;
  padding: 18px;
  border-radius: 8px;
  border: none;
  background: #ff6a00;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
}

.elite-button:hover {
  transform: none;
  opacity: 0.95;
}


.elite-trust {
  margin-top: 15px;
  font-size: 13px;
  text-align: center;
  color: #555;
}

/* =========================
   MOBILE OPTIMIERUNG
========================= */

@media (max-width: 992px) {

  .elite-container {
    flex-direction: column;
    padding: 40px;
    gap: 30px;
  }

  .elite-left h1 {
    font-size: 28px;
  }

  .elite-book {
    order: -1;
  }

  .elite-book img {
    max-width: 220px;
    transform: none;
  }

  .elite-form-box {
    padding: 30px;
  }

  .elite-button {
    padding: 20px;
    font-size: 17px;
  }
}

/* ================================
   MOBILE FULL-WIDTH FIX
================================ */

@media (max-width: 768px) {

  /* Entfernt TYPO3 Container Begrenzungen */
  .section,
  .container,
  .frame-container,
  .contentcontainer,
  .frame-group-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Hero Wrapper volle Breite */
  .elite-hero {
    padding: 40px 0 !important;
  }

  .elite-container {
    border-radius: 0 !important;
    padding: 30px 20px !important;
    box-shadow: none !important;
  }

  /* Formular größer */
  .elite-form-box {
    padding: 25px !important;
  }

  .elite-button {
    font-size: 18px;
    padding: 20px;
  }

  /* Broschüre sauber oben */
  .elite-book img {
    max-width: 220px;
    margin: 0 auto 20px;
    display: block;
  }

}

/* ================================
   PREMIUM MOBILE STRUCTURE
================================ */

@media (max-width: 768px) {

  /* TYPO3 Begrenzungen neutralisieren */
  .section,
  .container,
  .frame-container,
  .contentcontainer,
  .frame-group-inner {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Hero Section Full Width */
  .elite-hero {
    padding: 0px 0 0 0 !important;
  }

  /* Innenabstand kontrolliert */
  .elite-container {
    border-radius: 0 !important;
    padding: 30px 20px 40px 20px !important;
    box-shadow: none !important;
  }

  /* Formular größer & dominant */
  .elite-form-box {
    padding: 28px 22px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }

  .elite-button {
    font-size: 18px;
    padding: 20px;
  }

  /* Saubere Section Trennung statt blaue Balken */
  .frame-type-text {
    padding: 40px 20px !important;
    background: #ffffff;
  }

}
/* =====================================
   REMOVE TYPO3 SECTION BARS (TABLET+)
===================================== */

@media (min-width: 766px) {

  /* Entfernt unnötige Section-Abstände */
  .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Entfernt Hintergrundfarben aus Frames */
  .frame-background-quaternary,
  .frame-background-secondary,
  .frame-background-light {
    background: transparent !important;
  }

  /* Entfernt Hintergrundbilder aus Container-Frames */
  .frame-backgroundimage-container {
    display: none !important;
  }

  /* Verhindert doppelte Balken durch Bootstrap Package */
  .section-default {
    background: none !important;
  }

}
/* =====================================
   MOBILE CLEAN HERO ( < 766px )
===================================== */

@media (max-width: 765px) {

  /* Entfernt TYPO3 Section-Abstände */
  .section,
  .section-default {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  /* Entfernt Background-Farben aus Frames */
  .frame-background-quaternary,
  .frame-background-secondary,
  .frame-background-light {
    background: transparent !important;
  }

  /* Entfernt Background-Image Layer */
  .frame-backgroundimage-container {
    display: none !important;
  }

  /* Entfernt unnötigen Abstand im Hero */
  .lp-wrapper {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }

  /* Container kompakter */
  .lp-container {
    padding: 25px !important;
    border-radius: 16px;
  }

}

/* =====================================
   TYPO3 FRAME SPACING FIX (Mobile)
===================================== */

@media (max-width: 765px) {

  /* c4983 Placeholder komplett neutralisieren */
  #c4983 {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  #c4983 .frame-container,
  #c4983 .frame-inner {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* c4982 Hero Section kompakter */
  #c4982 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  #c4982 .frame-group-container,
  #c4982 .frame-group-inner,
  #c4982 .frame-container,
  #c4982 .frame-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  /* Global TYPO3 Section Padding entfernen */
  .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

}

/* =========================
   MOBILE STRUCTURE FIX
========================= */

@media (max-width: 992px) {

  .elite-container {
    flex-direction: column;
    padding: 40px 25px;
    gap: 35px;
  }

  /* Reihenfolge definieren */
  .elite-left {
    order: 1;
  }

  .elite-form {
    order: 2;
  }

  .elite-book {
    order: 3;
  }

  .elite-left h1 {
    font-size: 28px;
  }

  /* Formular dominant */
  .elite-form-box {
    padding: 28px;
  }

  .elite-button {
    padding: 20px;
    font-size: 17px;
  }

  /* Bild kompakt & unterhalb */
  .elite-book img {
    max-width: 200px;
    transform: none;
    margin: 10px auto 0 auto;
    display: block;
  }
}
 
@media (max-width: 768px) {

  .elite-hero {
    padding: 20px 0 35px 0;
  }

  .elite-container {
    border-radius: 0;
    box-shadow: none;
    padding: 25px 20px 40px 20px;
  }

  .elite-form-box {
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.08);
  }

}

@media (max-width: 992px) {

  .elite-container {
    flex-direction: column;
    padding: 40px 25px;
    gap: 35px;
  }

  .elite-left { order: 1; }
  .elite-form { order: 2; }
  .elite-book { order: 3; }

  .elite-left h1 {
    font-size: 28px;
  }

  .elite-form-box {
    padding: 28px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  }

  .elite-book img {
    max-width: 190px;
    margin: 10px auto 0 auto;
    display: block;
  }
}

/* =========================
   CONSENT CHECKBOX
========================= */

.elite-consent {
  margin: 18px 0 20px 0;
}

.elite-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #555;
  cursor: pointer;
}

.elite-consent input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: #2f6fa3;
  cursor: pointer;
}

.elite-consent a {
  color: #2f6fa3;
  text-decoration: underline;
}

.elite-consent a:hover {
  text-decoration: none;
}

.elite-button {
  font-size: 17px;
  letter-spacing: 0.5px;
}

.elite-trust {
  font-size: 12px;
  opacity: 0.8;
}

/* =========================
   CUSTOM CHECKBOX – TRUST MAX
========================= */

.elite-form-box input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #2f6fa3;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  margin-right: 10px;
  flex-shrink: 0;
}

.elite-form-box input[type="checkbox"]:checked {
  background: #2f6fa3;
  border-color: #2f6fa3;
}

.elite-form-box input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.elite-form-box input[type="checkbox"]:hover {
  box-shadow: 0 0 0 3px rgba(47,111,163,0.15);
}

@media (max-width: 768px) {
  .elite-form-box input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
}

/* =========================
   DESKTOP PREMIUM UPGRADE
========================= */

@media (min-width: 992px) {

  /* Blauer Hintergrund bekommt Tiefe */
  .elite-hero {
    background: linear-gradient(135deg, #2f6fa3 0%, #3f7fb3 50%, #4c88b8 100%);
    position: relative;
  }

  /* Subtile Lichtkante oben */
  .elite-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
    pointer-events: none;
  }

  /* Weißer Container schwebt */
  .elite-container {
    box-shadow:
      0 40px 80px rgba(0,0,0,0.12),
      0 8px 20px rgba(0,0,0,0.06);
    transform: translateY(-10px);
  }

  /* Formular bekommt Premium Card Look */
  .elite-form-box {
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
      0 25px 50px rgba(0,0,0,0.12),
      0 10px 20px rgba(0,0,0,0.08);
    position: relative;
  }

  /* Subtile obere Highlight-Kante */
  .elite-form-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, #ff7a1a, #ff5a00);
  }

}

/* =========================
   REMOVE BLUE ISLAND EFFECT
========================= */

@media (min-width: 992px) {

  /* Hero Full Width */
  .elite-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 90px 20px;
  }

  /* Außenfläche harmonisieren */
  body {
    background: #f6f8fb;
  }

}


/* Logo */
/* Logo auf kleinen Geräten mittig zentrieren */
@media (max-width: 767px) {

  #page-header .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #page-header .navbar-brand {
    float: none;          /* wichtig bei Bootstrap */
    margin: 0 auto;
  }

}
@media (max-width: 767px) {

  .navbar-brand-logo-normal,
  .navbar-brand-logo-inverted {
    height: 40px;
    width: auto;
  }

}


/*==============================
FAST GESCHAFFT + VIELEN DANK
===============================*/


.elite-confirm-icon{
  width: 320px;
  height: 320px;
  border-radius: 32px;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
  margin: 0 auto;
}

.elite-book{
  display:flex;
  align-items:center;
  justify-content:center;
}

.elite-hero-confirm,
.elite-hero-thankyou{
  padding: 70px 0;
}

@media (max-width: 1200px){
  .elite-confirm-icon{
    width: 260px;
    height: 260px;
    font-size: 96px;
  }
}

@media (max-width: 900px){
  .elite-confirm-icon{
    width: 180px;
    height: 180px;
    font-size: 72px;
    margin: 20px auto;
  }
}


.elite-confirm-icon-wrap{
  text-align:center;
}

.elite-confirm-caption{
  margin-top: 16px;
  font-size: 18px;
  color: #4b5563;
  font-weight: 600;
}

#formfuss.is-submitting {
  opacity: 0.85;
  pointer-events: none;
}
/*==============================
FAST GESCHAFFT + VIELEN DANK ENDE 
===============================*/