/* =========================================================
   CLEANNEST BOOKING WIZARD PRO
   PROGRESS NAVIGATION
   ========================================================= */

#buchung .cnWizardPro{
  width:100%;
  margin:0 0 22px;
  padding:16px;
  border:1px solid rgba(243,209,122,.20);
  border-radius:22px;
  background:
    linear-gradient(
      180deg,
      rgba(7,16,30,.94),
      rgba(4,11,22,.94)
    );
  box-shadow:
    0 16px 40px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung .cnWizardProgress{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    34px
    minmax(0,1fr)
    34px
    minmax(0,1fr)
    34px
    minmax(0,1fr);
  align-items:center;
  gap:6px;
}

#buchung .cnWizardProgressStep{
  min-width:0;
  padding:10px 8px;
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:rgba(255,255,255,.46);
  text-align:left;
  cursor:default;
}

#buchung .cnWizardProgressStep:not(:disabled){
  cursor:pointer;
}

#buchung .cnWizardProgressNumber{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:950;
}

#buchung .cnWizardProgressText{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

#buchung .cnWizardProgressText strong{
  color:inherit;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}

#buchung .cnWizardProgressText small{
  color:inherit;
  font-size:9px;
  font-weight:700;
  opacity:.75;
  white-space:nowrap;
}

#buchung .cnWizardProgressLine{
  height:1px;
  background:rgba(255,255,255,.12);
}

#buchung .cnWizardProgressStep.is-active{
  color:#f3d17a;
  background:rgba(243,209,122,.06);
}

#buchung .cnWizardProgressStep.is-active
.cnWizardProgressNumber{
  border-color:rgba(243,209,122,.75);
  background:
    linear-gradient(
      135deg,
      #f8df91,
      #c49b46
    );
  color:#111;
  box-shadow:
    0 0 0 5px rgba(243,209,122,.06),
    0 0 18px rgba(243,209,122,.24);
}

#buchung .cnWizardProgressStep.is-complete{
  color:#5dffb8;
}

#buchung .cnWizardProgressStep.is-complete
.cnWizardProgressNumber{
  border-color:rgba(93,255,184,.55);
  background:rgba(93,255,184,.12);
  color:#5dffb8;
}

@media(max-width:700px){

  #buchung .cnWizardPro{
    padding:12px 8px;
    border-radius:18px;
  }

  #buchung .cnWizardProgress{
    grid-template-columns:
      1fr 20px
      1fr 20px
      1fr 20px
      1fr;
    gap:2px;
  }

  #buchung .cnWizardProgressStep{
    justify-content:center;
    padding:8px 2px;
  }

  #buchung .cnWizardProgressNumber{
    flex-basis:27px;
    width:27px;
    height:27px;
  }

  #buchung .cnWizardProgressText{
    display:none;
  }
}
/* =========================================================
   CLEANNEST BOOKING WIZARD PRO
   STEP 2 – SIZE & OPTIONS
   ========================================================= */

#buchung #cnSizeWrap{
  position:relative;
  margin:0 0 18px;
  padding:22px 18px;
  border:1px solid rgba(243,209,122,.20);
  border-radius:24px;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.10),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(7,16,30,.97),
      rgba(4,11,22,.97)
    );
  box-shadow:
    0 22px 52px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung #cnSizeWrap > div:first-child{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin:0 0 18px !important;
  padding:7px 13px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      rgba(243,209,122,.14),
      rgba(243,209,122,.05)
    );

  border:1px solid rgba(243,209,122,.30);

  color:#f3d17a !important;

  font-size:13px !important;
  font-weight:950 !important;

  letter-spacing:.08em;
  text-transform:uppercase;

  text-shadow:
    0 0 14px rgba(243,209,122,.18);

  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung #cnSizeWrap > div:first-child::before{
  content:"";

  width:8px;
  height:8px;
  flex:0 0 8px;

  border-radius:50%;

  background:#5dffb8;

  box-shadow:
    0 0 0 4px rgba(93,255,184,.08),
    0 0 12px rgba(93,255,184,.65);
}

#buchung #cnSizeCards{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
}

#buchung #cnSizeCards .btn{
  min-height:108px;
  padding:18px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:
    linear-gradient(
      180deg,
      rgba(10,22,40,.94),
      rgba(5,13,25,.96)
    );
  color:#fff;
  font-size:16px;
  line-height:1.35;
  font-weight:950;
  text-align:center;
  white-space:normal;
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    border-color .28s ease,
    box-shadow .28s ease;
}

#buchung #cnSizeCards .btn:hover{
  transform:translateY(-3px);
  border-color:rgba(243,209,122,.38);
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 22px rgba(243,209,122,.08);
}

#buchung #cnSizeCards .btn.primary{
  border-color:rgba(243,209,122,.90);
  background:
    linear-gradient(
      135deg,
      #f8df91,
      #c49b46
    );
  color:#111;
  box-shadow:
    0 0 0 1px rgba(243,209,122,.20),
    0 0 26px rgba(243,209,122,.26),
    0 16px 36px rgba(0,0,0,.34);
}

/* =========================
   INDIVIDUELLES ANGEBOT 201+
   ========================= */

#buchung .cnCustomOfferInfo{
  margin-top:16px;
  padding:18px;

  border:1px solid rgba(243,209,122,.30);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.12),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(9,20,36,.96),
      rgba(5,13,25,.98)
    );

  box-shadow:
    0 16px 38px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung .cnCustomOfferInfo > strong{
  display:block;

  color:#f3d17a;

  font-size:20px;
  line-height:1.25;
  font-weight:950;
}

#buchung .cnCustomOfferInfo > p{
  margin:9px 0 0;

  color:rgba(255,255,255,.76);

  font-size:15px;
  line-height:1.55;
  font-weight:650;
}

#buchung .cnCustomOfferContacts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;

  margin-top:16px;
}

#buchung .cnCustomOfferContacts a{
  min-height:58px;
  padding:12px 14px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;

  color:#fff;
  text-decoration:none;

  font-size:14px;
  line-height:1.35;
  font-weight:950;

  text-align:center;

  touch-action:manipulation;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

#buchung .cnCustomOfferContacts a:first-child{
  border:1px solid rgba(93,255,184,.38);

  background:
    linear-gradient(
      135deg,
      rgba(37,211,102,.90),
      rgba(22,160,76,.94)
    );

  box-shadow:
    0 12px 28px rgba(37,211,102,.20);
}

#buchung .cnCustomOfferContacts a:last-child{
  border:1px solid rgba(116,185,255,.38);

  background:
    linear-gradient(
      135deg,
      rgba(74,140,255,.94),
      rgba(47,109,246,.94)
    );

  box-shadow:
    0 12px 28px rgba(47,109,246,.20);
}

#buchung .cnCustomOfferContacts a:active{
  transform:scale(.98);
}

#buchung .cnCustomOfferHint{
  margin-top:14px !important;
  padding-top:13px;

  border-top:1px solid rgba(255,255,255,.08);

  color:rgba(255,255,255,.62) !important;

  font-size:13px !important;
  line-height:1.55 !important;
}

@media(max-width:700px){

  #buchung .cnCustomOfferContacts{
    grid-template-columns:1fr;
  }

  #buchung .cnCustomOfferContacts a{
    min-height:60px;
    font-size:15px;
  }

}

/* =========================
   EXTRA OPTIONS
   ========================= */

#buchung #cnExtraOptions{
  position:relative;
  margin:0 0 18px;
  padding:20px 18px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:
    linear-gradient(
      180deg,
      rgba(7,16,30,.96),
      rgba(4,11,22,.96)
    );
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung #cnExtraOptions > *{
  position:relative;
}

#buchung #cnExtraOptions label{
  color:#f3d17a;
  font-weight:900;
}

#buchung #cnExtraOptions .field,
#buchung #cnExtraOptions select,
#buchung #cnExtraOptions input{
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(8,18,33,.72) !important;
  color:#fff !important;
  border-radius:16px !important;
  min-height:50px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}


/* =========================
   PET ADDON
   ========================= */

#buchung .cnPetOption,
#buchung [data-cn-pet-option]{
  position:relative;
  margin-top:16px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(243,209,122,.26);
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.10),
      transparent 42%
    ),
    rgba(10,16,34,.58);
  box-shadow:
    0 14px 34px rgba(0,0,0,.26);
}


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

@media(max-width:700px){

  #buchung #cnSizeWrap{
    padding:18px 14px;
    border-radius:20px;
  }

  #buchung #cnSizeCards{
    grid-template-columns:1fr;
    gap:10px;
  }

  #buchung #cnSizeCards .btn{
    min-height:58px;
    padding:13px 16px;
    justify-content:flex-start;
    text-align:left;
    font-size:17px;
  }

  #buchung #cnExtraOptions{
    padding:16px 14px;
    border-radius:20px;
  }
}
/* =========================================================
   BOOKING WIZARD – STEP NAVIGATION
   ========================================================= */

#buchung .cnWizardStepNav{
  width:100%;
  margin:18px 0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#buchung .cnWizardBackBtn,
#buchung .cnWizardNextBtn{
  min-height:52px;
  padding:13px 20px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:16px;

  font-size:14px;
  font-weight:950;

  cursor:pointer;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

#buchung .cnWizardBackBtn{
  border:1px solid rgba(255,255,255,.14);

  background:
    rgba(8,18,33,.72);

  color:
    rgba(255,255,255,.82);
}

#buchung .cnWizardNextBtn{
  flex:1;

  max-width:300px;

  border:
    1px solid
    rgba(93,255,184,.38);

  background:
    linear-gradient(
      135deg,
      #39d98a,
      #15985e
    );

  color:#061810;

  box-shadow:
    0 12px 30px
    rgba(38,211,132,.22);
}

#buchung .cnWizardBackBtn:hover,
#buchung .cnWizardNextBtn:hover{
  transform:
    translateY(-2px);
}

#buchung .cnWizardNextBtn:hover{
  box-shadow:
    0 16px 38px
    rgba(38,211,132,.32);
}

#buchung .cnWizardNextBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

@media(max-width:700px){

  #buchung .cnWizardStepNav{
    position:relative;
    gap:10px;
  }

  #buchung .cnWizardBackBtn{
    flex:0 0 auto;
  }

  #buchung .cnWizardNextBtn{
    flex:1;
    max-width:none;
  }
}
/* =========================================================
   CLEANNEST BOOKING WIZARD PRO
   STEP 3 – DETAILS & TERMIN
   ========================================================= */

#buchung #cnFormRest{
  position:relative;
  margin:0 0 22px;
  padding:22px 18px;

  border:1px solid rgba(243,209,122,.20);
  border-radius:24px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(93,255,184,.07),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(243,209,122,.09),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgba(7,16,30,.97),
      rgba(4,11,22,.98)
    );

  box-shadow:
    0 22px 55px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}


/* =========================
   FORM GRID
   ========================= */

#buchung #cnFormRest .formGrid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:14px;
}


/* =========================
   LABELS
   ========================= */

#buchung #cnFormRest label{
  min-width:0;
}

#buchung #cnFormRest label > span:first-child{
  display:block;

  margin:0 0 7px;

  color:#f3d17a !important;

  font-size:11px !important;
  line-height:1.3;

  font-weight:950 !important;

  letter-spacing:.06em;
  text-transform:uppercase;
}


/* =========================
   INPUTS
   ========================= */

#buchung #cnFormRest .field,
#buchung #cnFormRest input[type="text"],
#buchung #cnFormRest input[type="email"],
#buchung #cnFormRest input[type="date"],
#buchung #cnFormRest input[type="tel"],
#buchung #cnFormRest input[type="number"],
#buchung #cnFormRest textarea,
#buchung #cnFormRest select{
  width:100%;

  min-height:52px;

  padding:13px 14px;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  border-radius:15px !important;

  background:
    rgba(8,18,33,.76) !important;

  color:#fff !important;

  font-size:15px !important;
  font-weight:750 !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

#buchung #cnFormRest .field:focus,
#buchung #cnFormRest input:focus,
#buchung #cnFormRest textarea:focus,
#buchung #cnFormRest select:focus{
  outline:none;

  border-color:
    rgba(243,209,122,.62) !important;

  background:
    rgba(10,22,40,.90) !important;

  box-shadow:
    0 0 0 3px
    rgba(243,209,122,.10),
    0 0 22px
    rgba(243,209,122,.08);
}
/* =========================
   FULL WIDTH ITEMS
   ========================= */
#buchung #cnStep2Options #cnPetWrap,
#buchung #cnStep2Options #cnWindowAddonWrap,
#buchung #cnFormRest #cnCouponWrap,
#buchung #cnFormRest .cnFixpriceField,
#buchung #cnFormRest #cnSchedulerHost,
#buchung #cnFormRest .checkRow,
#buchung #cnFormRest .ctaRow{
  grid-column:1 / -1;
}
/* =========================
   PET OPTION
   ========================= */

#buchung #cnPetWrap{
  padding:0;
}

#buchung #cnPetWrap > div{
  margin:0 !important;
  padding:16px !important;

  border:
    1px solid
    rgba(243,209,122,.24) !important;

  border-radius:18px !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.10),
      transparent 42%
    ),
    rgba(8,18,33,.68) !important;
}
/* =========================
   COUPON
   ========================= */

#buchung #cnCouponWrap{
  padding:15px;

  border-radius:18px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.025);
}
/* =========================
   FIX PRICE
   ========================= */

#buchung #cnFormRest .cnFixpriceField{
  margin:0;

  padding:16px;

  border-radius:18px;

  border:
    1px solid
    rgba(93,255,184,.24);

  background:
    linear-gradient(
      135deg,
      rgba(93,255,184,.08),
      rgba(8,18,33,.62)
    );
}

#buchung #cnFixedPriceEur{
  color:#5dffb8 !important;

  font-size:20px !important;
  font-weight:950 !important;
}
/* =========================
   SCHEDULER
   ========================= */

#buchung #cnSchedulerHost{
  margin-top:4px;

  padding:14px;

  border-radius:20px;

  border:
    1px solid
    rgba(243,209,122,.16);

  background:
    rgba(5,13,25,.72);
}
/* =========================
   CHECKBOX ROWS
   ========================= */

#buchung #cnFormRest .checkRow{
  padding:14px;

  border-radius:16px;

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.025);
}
/* =========================
   MOBILE
   ========================= */

@media(max-width:700px){

  #buchung #cnFormRest{
    padding:18px 14px;
    border-radius:20px;
  }

  #buchung #cnFormRest .formGrid{
    grid-template-columns:1fr;
    gap:12px;
  }
#buchung #cnStep2Options #cnPetWrap,
#buchung #cnStep2Options #cnWindowAddonWrap,
#buchung #cnFormRest #cnCouponWrap,
#buchung #cnFormRest .cnFixpriceField,
#buchung #cnFormRest #cnSchedulerHost,
#buchung #cnFormRest .checkRow,
#buchung #cnFormRest .ctaRow{
  grid-column:auto;
}

}
/* =========================================================
   WIZARD – STEP 1–2 VISIBILITY FIX
   ========================================================= */

html[data-cn-booking-step="1"] #buchung #cnFormRest,
html[data-cn-booking-step="2"] #buchung #cnFormRest{
  display:none !important;
}

/* =========================================================
   BOOKING WIZARD – OPTION CARDS
   ========================================================= */

#buchung .cnWizardOptionCard{
  margin:16px 0;
  padding:20px 18px;

  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.08),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(7,16,30,.96),
      rgba(4,11,22,.97)
    );

  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung .cnWizardOptionHead{
  margin-bottom:16px;
}

#buchung .cnWizardOptionEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-bottom:10px;
  padding:6px 11px;

  border-radius:999px;

  border:1px solid rgba(243,209,122,.26);

  background:
    linear-gradient(
      135deg,
      rgba(243,209,122,.12),
      rgba(243,209,122,.04)
    );

  color:#f3d17a;

  font-size:11px;
  line-height:1;
  font-weight:950;

  letter-spacing:.12em;
  text-transform:uppercase;

  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung .cnWizardOptionHead strong{
  display:block;

  color:#fff;

  font-size:clamp(22px,5vw,30px);
  line-height:1.12;
  font-weight:950;

  letter-spacing:-.4px;

  text-shadow:
    0 3px 16px rgba(0,0,0,.30);
}
#buchung .cnWizardOptionHead p{
  margin:9px 0 0;

  max-width:620px;

  color:rgba(255,255,255,.76);

  font-size:16px;
  line-height:1.58;
  font-weight:650;
}

#buchung .cnWizardChoiceRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#buchung .cnWizardChoiceBtn{
  min-height:92px;

  padding:16px 16px;

  display:flex;
  align-items:center;
  gap:14px;

  border:1px solid rgba(255,255,255,.13);
  border-radius:19px;

  background:
    linear-gradient(
      180deg,
      rgba(10,22,40,.92),
      rgba(5,13,25,.96)
    );

  color:#fff;

  text-align:left;

  cursor:pointer;

  box-shadow:
    0 12px 30px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

#buchung .cnWizardChoiceBtn:hover{
  transform:translateY(-2px);
  border-color:rgba(243,209,122,.36);
}

#buchung .cnWizardChoiceBtn.is-selected{
  border-color:rgba(93,255,184,.68);

  background:
    linear-gradient(
      135deg,
      rgba(93,255,184,.16),
      rgba(8,31,26,.80)
    );

  box-shadow:
    0 0 0 1px rgba(93,255,184,.08),
    0 0 24px rgba(93,255,184,.16);
}
#buchung .cnWizardChoiceIcon{
  width:42px;
  height:42px;

  flex:0 0 42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.15);

  background:
    rgba(255,255,255,.055);

  color:#f3d17a;

  font-size:21px;
  line-height:1;
  font-weight:950;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

#buchung .cnWizardChoiceBtn.is-selected
.cnWizardChoiceIcon{
  background:#5dffb8;
  color:#071910;
}
#buchung .cnWizardChoiceBtn[data-pet-choice="yes"] .cnWizardChoiceIcon::before,
#buchung .cnWizardChoiceBtn[data-window-addon="yes"] .cnWizardChoiceIcon::before,
#buchung .cnWizardChoiceBtn[data-complete-extra="yes"] .cnWizardChoiceIcon::before{
  content:"✓";
}
#buchung .cnWizardChoiceBtn[data-pet-choice="no"] .cnWizardChoiceIcon::before,
#buchung .cnWizardChoiceBtn[data-window-addon="no"] .cnWizardChoiceIcon::before,
#buchung .cnWizardChoiceBtn[data-complete-extra="no"] .cnWizardChoiceIcon::before{
  content:"×";
}

#buchung .cnWizardChoiceIcon::before{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:28px;
  line-height:1;
  font-weight:950;
}

#buchung .cnWizardChoiceBtn strong{
  display:block;

  color:inherit;

  font-size:17px;
  line-height:1.2;
  font-weight:950;
}
#buchung .cnWizardChoiceBtn small{
  display:block;

  margin-top:5px;

  color:rgba(255,255,255,.64);

  font-size:13px;
  line-height:1.4;
  font-weight:650;
}

#buchung .cnWizardOptionNote{
  margin-top:15px;
  padding:11px 13px;

  border-radius:14px;

  border:1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.025);

  color:rgba(255,255,255,.62);

  font-size:13px;
  line-height:1.55;
  font-weight:600;
}
#buchung .cnWizardOptionSubTitle{
  margin:24px 0 12px;

  color:#fff;

  font-size:18px;
  line-height:1.3;
  font-weight:950;

  letter-spacing:-.2px;
}

#buchung .cnWizardWindowTypeGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#buchung .cnWizardWindowType{
  min-height:120px;

  padding:18px;

  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      rgba(10,22,40,.94),
      rgba(5,13,25,.97)
    );

  color:#fff;

  text-align:left;

  cursor:pointer;

  box-shadow:
    0 14px 32px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}
#buchung .cnWizardWindowType.is-selected{
  border-color:rgba(243,209,122,.80);

  box-shadow:
    0 0 24px rgba(243,209,122,.16);
} #buchung .cnWizardWindowType strong{
  display:block;

  color:#f3d17a;

  font-size:18px;
  line-height:1.25;
  font-weight:950;
}
#buchung .cnWizardWindowType span{
  display:block;

  margin-top:8px;

  color:rgba(255,255,255,.68);

  font-size:14px;
  line-height:1.5;
  font-weight:600;
}

#buchung .cnWizardCounter{
  display:grid;

  grid-template-columns:
    48px
    minmax(0,1fr)
    48px;

  align-items:center;

  max-width:320px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:16px;

  overflow:hidden;

  background:
    rgba(8,18,33,.72);
}

#buchung .cnWizardCounter button{
  min-height:52px;

  border:0;

  background:
    rgba(255,255,255,.04);

  color:#f3d17a;

  font-size:24px;
  font-weight:950;

  cursor:pointer;
}

#buchung .cnWizardCounter strong{
  text-align:center;

  color:#fff;

  font-size:15px;
  font-weight:950;
}

#buchung .cnCompleteWindowInfo{
  margin-top:16px;
  padding:14px;

  border-radius:16px;

  border:
    1px solid
    rgba(93,255,184,.30);

  background:
    rgba(93,255,184,.07);
}

#buchung .cnCompleteWindowInfo span{
  display:block;

  color:
    rgba(255,255,255,.62);

  font-size:12px;
}

#buchung .cnCompleteWindowInfo strong{
  display:block;

  margin-top:4px;

  color:#5dffb8;

  font-size:17px;
  font-weight:950;
}

@media(max-width:700px){

  #buchung .cnWizardChoiceRow,
  #buchung .cnWizardWindowTypeGrid{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   BOOKING WIZARD – TOUCH / DOUBLE TAP / COUNTERS
   GLOBAL MOBILE FIX
   ========================================================= */

/* Ne nagyítson dupla koppintásra a booking interaktív elemein */
#buchung button,
#buchung .btn,
#buchung [role="button"],
#buchung input,
#buchung select,
#buchung textarea{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* A számlálók legyenek könnyebben kezelhetők */
#buchung .cnWizardCounter{
  width:100%;
  max-width:360px;

  grid-template-columns:
    64px minmax(0,1fr) 64px;

  min-height:62px;
}

#buchung .cnWizardCounter button{
  min-width:64px;
  min-height:62px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  font-size:32px;
  line-height:1;

  user-select:none;
  -webkit-user-select:none;

  touch-action:manipulation;
}

#buchung .cnWizardCounter strong{
  min-height:62px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 12px;

  font-size:18px;
  font-weight:950;

  user-select:none;
  -webkit-user-select:none;
}

/* Aktív lenyomás jól látszódjon */
#buchung .cnWizardCounter button:active{
  background:rgba(243,209,122,.16);
  transform:scale(.96);
}

/* Mobilon még nagyobb érintési felület */
@media(max-width:700px){

  #buchung .cnWizardCounter{
    max-width:none;
    grid-template-columns:
      72px
      minmax(0,1fr)
      72px;
  }

  #buchung .cnWizardCounter button{
    min-width:72px;
    min-height:66px;
    font-size:34px;
  }

  #buchung .cnWizardCounter strong{
    min-height:66px;
    font-size:19px;
  }
}
/* =========================================================
   BOOKING WIZARD – STEP 4 REVIEW
   ========================================================= */

#buchung #cnWizardStep4{
  margin-top:18px;
  padding:22px 18px;

  border:1px solid rgba(243,209,122,.20);
  border-radius:24px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.10),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(7,16,30,.97),
      rgba(4,11,22,.98)
    );

  box-shadow:
    0 22px 52px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung #cnWizardStep4[hidden]{
  display:none !important;
}

#buchung #cnWizardReview{
  margin-top:18px;

  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px;
}

#buchung .cnWizardReviewRow{
  min-width:0;

  padding:14px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);
}

#buchung .cnWizardReviewLabel{
  display:block;

  margin-bottom:6px;

  color:rgba(255,255,255,.56);

  font-size:11px;
  line-height:1.3;
  font-weight:900;

  letter-spacing:.06em;
  text-transform:uppercase;
}

#buchung .cnWizardReviewValue{
  display:block;

  color:#fff;

  font-size:15px;
  line-height:1.45;
  font-weight:900;

  overflow-wrap:anywhere;
  word-break:break-word;
}

#buchung #cnWizardStep4 .ctaRow{
  margin-top:18px;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:10px;
}

#buchung #cnWizardBackTo3,
#buchung #cnSubmit{
  width:100%;
  justify-content:center;
}

@media(max-width:700px){

  #buchung #cnWizardStep4{
    padding:18px 14px;
    border-radius:20px;
  }

  #buchung #cnWizardReview{
    grid-template-columns:1fr;
    gap:8px;
  }

  #buchung .cnWizardReviewRow{
    padding:13px;
  }

  #buchung #cnWizardStep4 .ctaRow{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   CLEANNEST BOOKING WIZARD PRO
   LEGAL CHOICE CARDS + PREMIUM CTA SYSTEM
   2026
   ========================================================= */

/* ---------------------------------------------------------
   14-TAGE PANEL – OUTER CARD
   --------------------------------------------------------- */

#buchung #cnConsent14dBlock{
  position:relative;
}

#buchung #cnConsent14dBlock details{
  border:1px solid rgba(243,209,122,.28);
  border-radius:22px;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.10),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(8,18,33,.96),
      rgba(4,11,22,.98)
    );

  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------------------------------------------------------
   14-TAGE SUMMARY / HEADER
   --------------------------------------------------------- */

#buchung #cnConsent14dBlock summary{
  position:relative;

  min-height:60px;

  display:flex;
  align-items:center;

  padding:15px 52px 15px 17px;

  color:#f3d17a;

  font-size:15px;
  line-height:1.35;
  font-weight:950;

  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      rgba(243,209,122,.10),
      rgba(255,255,255,.025)
    );

  border-bottom:
    1px solid
    rgba(243,209,122,.14);

  list-style:none;

  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

#buchung #cnConsent14dBlock summary::-webkit-details-marker{
  display:none;
}

#buchung #cnConsent14dBlock summary:hover{
  background:
    linear-gradient(
      135deg,
      rgba(243,209,122,.15),
      rgba(255,255,255,.035)
    );
}

#buchung #cnConsent14dBlock summary::after{
  content:"⌄";

  position:absolute;
  right:18px;
  top:50%;

  transform:
    translateY(-50%);

  color:#f3d17a;

  font-size:22px;
  line-height:1;

  transition:
    transform .28s ease;
}

#buchung #cnConsent14dBlock details[open] summary::after{
  transform:
    translateY(-50%)
    rotate(180deg);
}

/* ---------------------------------------------------------
   14-TAGE CONTENT
   --------------------------------------------------------- */

#buchung #cnConsent14dBlock details > div{
  padding:18px;
}

/* ---------------------------------------------------------
   SELECTABLE LEGAL CARDS
   --------------------------------------------------------- */

#buchung .cn-consent14d__choice,
#buchung #cnFormRest .checkRow{
  position:relative;

  min-height:64px;

  display:flex;
  align-items:flex-start;
  gap:13px;

  margin:10px 0 0 !important;
  padding:15px 16px !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;

  border-radius:18px !important;

  background:
    linear-gradient(
      180deg,
      rgba(12,24,43,.92),
      rgba(6,15,29,.96)
    ) !important;

  color:
    rgba(255,255,255,.86);

  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);

  cursor:pointer;

  transition:
    transform .25s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

#buchung .cn-consent14d__choice:hover,
#buchung #cnFormRest .checkRow:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(243,209,122,.38) !important;

  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    0 0 22px rgba(243,209,122,.07),
    inset 0 1px 0 rgba(255,255,255,.045);
}

/* ---------------------------------------------------------
   CHECKBOX / RADIO
   --------------------------------------------------------- */

#buchung .cn-consent14d__choice input,
#buchung #cnFormRest .checkRow input{
  flex:0 0 24px;

  width:24px;
  height:24px;

  margin:1px 0 0;

  accent-color:#d6ad54;

  cursor:pointer;
}

/* ---------------------------------------------------------
   LEGAL CARD TEXT
   --------------------------------------------------------- */

#buchung .cn-consent14d__choice > span,
#buchung #cnFormRest .checkRow > div{
  flex:1;
  min-width:0;

  color:
    rgba(255,255,255,.82);

  font-size:15px;
  line-height:1.55;
  font-weight:650;
}

#buchung #cnFormRest .checkRow a{
  color:#f3d17a;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------------------------------------------------------
   SELECTED STATES
   Modern browsers – progressive enhancement
   --------------------------------------------------------- */

#buchung .cn-consent14d__choice:has(input:checked),
#buchung #cnFormRest .checkRow:has(input:checked){
  border-color:
    rgba(243,209,122,.78) !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.12),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(20,29,44,.98),
      rgba(8,17,31,.98)
    ) !important;

  box-shadow:
    0 0 0 1px rgba(243,209,122,.10),
    0 0 24px rgba(243,209,122,.12),
    0 14px 34px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05);
}

#buchung .cn-consent14d__choice:has(input:checked) > span,
#buchung #cnFormRest .checkRow:has(input:checked) > div{
  color:#fff;
}

/* ---------------------------------------------------------
   YES STATE – SUCCESS
   --------------------------------------------------------- */

#buchung .cn-consent14d__choice:has(#cnConsent14dYes:checked){
  border-color:
    rgba(93,255,184,.58) !important;

  background:
    linear-gradient(
      135deg,
      rgba(93,255,184,.10),
      rgba(7,25,29,.92)
    ) !important;

  box-shadow:
    0 0 22px rgba(93,255,184,.10),
    0 14px 34px rgba(0,0,0,.28);
}

/* ---------------------------------------------------------
   NO STATE – WARNING
   --------------------------------------------------------- */

#buchung .cn-consent14d__choice:has(#cnConsent14dNo:checked){
  border-color:
    rgba(255,107,107,.50) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,107,107,.08),
      rgba(32,11,19,.92)
    ) !important;
}

/* ---------------------------------------------------------
   CHOICE GROUP
   --------------------------------------------------------- */

#buchung .cn-consent14d__choices{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;

  margin-top:10px;
}

/* =========================================================
   PREMIUM WIZARD CTA SYSTEM
   ========================================================= */

#buchung #cnFormRest .ctaRow,
#buchung #cnWizardStep4 .ctaRow{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  margin-top:18px;
}

/* ---------------------------------------------------------
   ALL WIZARD CTA BUTTONS
   --------------------------------------------------------- */

#buchung #cnWizardNextTo4,
#buchung #cnAiSuggest,
#buchung #cnWizardBackTo3,
#buchung #cnSubmit{
  width:100%;
  min-height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:13px 18px;

  border-radius:17px;

  font-size:15px;
  line-height:1.3;
  font-weight:950;

  text-align:center;

  cursor:pointer;

  transition:
    transform .25s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

/* ---------------------------------------------------------
   ANGABEN PRÜFEN – PRIMARY GOLD
   --------------------------------------------------------- */

#buchung #cnWizardNextTo4{
  color:#111;

  border:
    1px solid
    rgba(255,231,158,.88);

  background:
    linear-gradient(
      135deg,
      #f8df91,
      #d0a954,
      #b98d35
    );

  box-shadow:
    0 14px 30px rgba(196,155,70,.25),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* ---------------------------------------------------------
   AI VORSCHLAG – MODERN SECONDARY
   --------------------------------------------------------- */

#buchung #cnAiSuggest{
  color:#dbe7ff;

  border:
    1px solid
    rgba(124,150,232,.42);

  background:
    linear-gradient(
      135deg,
      rgba(72,93,162,.24),
      rgba(12,23,44,.92)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------------------------------------------------------
   ZURÜCK – GLASS SECONDARY
   --------------------------------------------------------- */

#buchung #cnWizardBackTo3{
  color:
    rgba(255,255,255,.82);

  border:
    1px solid
    rgba(255,255,255,.16);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );
}

/* ---------------------------------------------------------
   TERMIN ANFRAGEN – PRIMARY GOLD
   --------------------------------------------------------- */

#buchung #cnSubmit{
  color:#111;

  border:
    1px solid
    rgba(255,231,158,.88);

  background:
    linear-gradient(
      135deg,
      #f8df91,
      #d0a954,
      #b98d35
    );

  box-shadow:
    0 14px 30px rgba(196,155,70,.25),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* ---------------------------------------------------------
   CTA HOVER
   --------------------------------------------------------- */

#buchung #cnWizardNextTo4:hover,
#buchung #cnSubmit:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 18px 38px rgba(196,155,70,.34),
    0 0 20px rgba(243,209,122,.14),
    inset 0 1px 0 rgba(255,255,255,.36);
}

#buchung #cnAiSuggest:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(124,150,232,.68);

  box-shadow:
    0 14px 30px rgba(58,86,170,.16);
}

#buchung #cnWizardBackTo3:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(255,255,255,.28);

  background:
    rgba(255,255,255,.07);
}

/* ---------------------------------------------------------
   ACTIVE
   --------------------------------------------------------- */

#buchung #cnWizardNextTo4:active,
#buchung #cnAiSuggest:active,
#buchung #cnWizardBackTo3:active,
#buchung #cnSubmit:active{
  transform:
    scale(.985);
}

/* ---------------------------------------------------------
   FOCUS
   --------------------------------------------------------- */

#buchung #cnWizardNextTo4:focus-visible,
#buchung #cnAiSuggest:focus-visible,
#buchung #cnWizardBackTo3:focus-visible,
#buchung #cnSubmit:focus-visible,
#buchung .cn-consent14d__choice:focus-within,
#buchung #cnFormRest .checkRow:focus-within{
  outline:none;

  box-shadow:
    0 0 0 4px rgba(243,209,122,.16),
    0 14px 32px rgba(0,0,0,.26);
}

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

@media(max-width:700px){

  #buchung #cnConsent14dBlock details > div{
    padding:14px;
  }

  #buchung #cnConsent14dBlock summary{
    min-height:58px;

    padding:
      14px
      46px
      14px
      15px;

    font-size:14px;
  }

  #buchung .cn-consent14d__choice,
  #buchung #cnFormRest .checkRow{
    min-height:62px;

    padding:
      14px !important;

    border-radius:
      16px !important;
  }

  #buchung .cn-consent14d__choice > span,
  #buchung #cnFormRest .checkRow > div{
    font-size:14px;
    line-height:1.5;
  }

  #buchung #cnFormRest .ctaRow,
  #buchung #cnWizardStep4 .ctaRow{
    grid-template-columns:1fr;
    gap:10px;
  }

  #buchung #cnWizardNextTo4,
  #buchung #cnAiSuggest,
  #buchung #cnWizardBackTo3,
  #buchung #cnSubmit{
    min-height:58px;

    font-size:15px;

    border-radius:16px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  #buchung .cn-consent14d__choice,
  #buchung #cnFormRest .checkRow,
  #buchung #cnWizardNextTo4,
  #buchung #cnAiSuggest,
  #buchung #cnWizardBackTo3,
  #buchung #cnSubmit,
  #buchung #cnConsent14dBlock summary,
  #buchung #cnConsent14dBlock summary::after{
    transition:none !important;
  }

  #buchung .cn-consent14d__choice:hover,
  #buchung #cnFormRest .checkRow:hover,
  #buchung #cnWizardNextTo4:hover,
  #buchung #cnAiSuggest:hover,
  #buchung #cnWizardBackTo3:hover,
  #buchung #cnSubmit:hover{
    transform:none !important;
  }
}
#buchung .cn-consent14d__box{
  position:relative;

  padding:18px;

  border:1px solid rgba(243,209,122,.42);
  border-left:4px solid #f3d17a;

  border-radius:18px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(243,209,122,.13),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(20,25,38,.97),
      rgba(8,16,29,.99)
    );

  box-shadow:
    0 14px 34px rgba(0,0,0,.26),
    0 0 24px rgba(243,209,122,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung .cn-consent14d__noticeTitle{
  margin:0 0 9px;

  color:#f3d17a;

  font-size:12px;
  line-height:1.2;
  font-weight:950;

  letter-spacing:1px;
  text-transform:uppercase;
}

#buchung .cn-consent14d__text{
  color:rgba(255,255,255,.88);

  font-size:15px;
  line-height:1.62;
}

#buchung .cn-consent14d__important{
  display:block;

  margin-top:10px;

  color:#ffffff;

  font-weight:900;
}

#buchung .cn-consent14d__legalWrap{
  margin-top:13px;
}

#buchung .cn-consent14d__legalLink{
  display:inline-block;

  color:#f3d17a;

  font-size:14px;
  line-height:1.4;
  font-weight:850;

  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;

  transition:
    color .22s ease,
    transform .22s ease;
}

#buchung .cn-consent14d__legalLink:hover{
  color:#ffe5a1;
  transform:translateX(3px);
}

@media(max-width:700px){

  #buchung .cn-consent14d__box{
    padding:15px;
    border-radius:16px;
  }

  #buchung .cn-consent14d__text{
    font-size:14px;
    line-height:1.58;
  }

  #buchung .cn-consent14d__legalLink{
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce){

  #buchung .cn-consent14d__legalLink{
    transition:none !important;
  }

  #buchung .cn-consent14d__legalLink:hover{
    transform:none !important;
  }
}
/* =========================================================
   CLEANNEST LIVE PREISÜBERSICHT
   ========================================================= */

#buchung #cnLivePriceSummary{
  display:none;
}

html[data-cn-booking-step="2"]
#buchung #cnLivePriceSummary,
html[data-cn-booking-step="3"]
#buchung #cnLivePriceSummary,
html[data-cn-booking-step="4"]
#buchung #cnLivePriceSummary{
  display:block;
  position:relative;
  right:auto;
  bottom:auto;
  z-index:auto;

  width:100%;

  max-height:none;

  overflow:visible;

  margin:18px 0 22px;

  padding:20px;

  border:
    1px solid
    rgba(243,209,122,.68);

  border-radius:24px;

  color:#fff;

  background:
    radial-gradient(
      circle at 78% 8%,
      rgba(243,209,122,.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(5,20,36,.985),
      rgba(3,14,27,.99)
    );

  box-shadow:
    0 0 0 1px
      rgba(243,209,122,.12)
      inset,
    0 0 30px
      rgba(243,209,122,.16),
    0 24px 70px
      rgba(0,0,0,.55);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


#buchung
.cnLivePriceSummaryTitle{
  margin:0 0 16px;

  color:#f3d17a;

  font-size:22px;
  line-height:1.1;
  font-weight:950;

  letter-spacing:.04em;

  text-align:center;

  text-shadow:
    0 0 14px
    rgba(243,209,122,.32);
}


#buchung
.cnLivePriceSummaryBox{
  position:relative;

  padding:18px;

  border:
    1px solid
    rgba(243,209,122,.55);

  border-radius:20px;

  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(243,209,122,.11),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(7,25,43,.96),
      rgba(5,18,34,.98)
    );

  box-shadow:
    0 0 22px
      rgba(243,209,122,.10),
    inset 0 1px 0
      rgba(255,255,255,.035);

  overflow:hidden;
}


#buchung
.cnLivePriceRows{
  display:grid;
  gap:12px;
}


#buchung
.cnLivePriceRow{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:start;

  gap:16px;

  color:
    rgba(255,255,255,.88);

  font-size:14px;
  line-height:1.4;
  font-weight:750;
}


#buchung
.cnLivePriceRow strong{
  color:#fff;
  font-weight:900;
  white-space:nowrap;
}


#buchung
.cnLivePriceRow.is-discount span,

#buchung
.cnLivePriceRow.is-discount strong{
  color:#5dffb8;
}


#buchung
.cnLivePriceDivider{
  height:1px;

  margin:
    16px 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.20),
      transparent
    );
}


#buchung
.cnLivePriceTotalRow{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:18px;
}


#buchung
.cnLivePriceTotalRow span{
  color:#f3d17a;

  font-size:18px;
  font-weight:950;

  letter-spacing:.03em;
}


#buchung
.cnLivePriceTotalRow strong{
  color:#f3d17a;

  font-size:34px;
  line-height:1;

  font-weight:950;

  white-space:nowrap;

  text-shadow:
    0 0 18px
    rgba(243,209,122,.22);
}


#buchung
.cnLivePriceSaving{
  margin-top:14px;

  padding:
    14px 16px;

  display:grid;

  grid-template-columns:
    46px
    minmax(0,1fr);

  align-items:center;

  gap:14px;

  border:
    1px solid
    rgba(93,255,184,.55);

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(20,92,65,.74),
      rgba(7,45,40,.86)
    );

  box-shadow:
    0 0 22px
      rgba(93,255,184,.12),
    inset 0 1px 0
      rgba(255,255,255,.04);
}


#buchung
.cnLivePriceSaving[hidden]{
  display:none !important;
}

#buchung
.cnLivePriceGift{
  width:46px;
  height:46px;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:visible;

  border:0;
  border-radius:0;

  background:transparent;
}


/* =========================================================
   CLEANNEST – ANIMATED PIGGY BANK SAVING ICON
   ========================================================= */

#buchung
.cnPiggyAnimation{
  position:relative;

  width:46px;
  height:46px;

  flex:0 0 46px;

  overflow:visible;

  isolation:isolate;
}


/* MALAC */

#buchung
.cnPiggyBank{
  position:absolute;

  left:50%;
  bottom:0;

  width:68px;
  height:auto;

  max-width:none;

  display:block;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);

  transform-origin:
    50% 85%;

  object-fit:contain;

  pointer-events:none;
  user-select:none;

  z-index:2;

  animation:
    cnPiggyBankReaction
    4.8s
    cubic-bezier(.22,.75,.28,1)
    infinite;

  will-change:transform;
}


/* ÉRME */

#buchung
.cnPiggyCoin{
  position:absolute;

  left:50%;
  top:-31px;

  width:18px;
  height:auto;

  max-width:none;

  display:block;

  transform:
    translateX(-62%)
    translateY(0)
    rotate(-18deg)
    scale(1);

  transform-origin:center;

  object-fit:contain;

  pointer-events:none;
  user-select:none;

  opacity:0;

  z-index:3;

  animation:
    cnPiggyCoinDrop
    4.8s
    cubic-bezier(.32,.02,.25,1)
    infinite;

  will-change:
    transform,
    opacity;
}


/* =========================================================
   ÉRME BEESÉSE
   ========================================================= */

@keyframes cnPiggyCoinDrop{

  0%,
  12%{
    opacity:0;

    transform:
      translateX(-50.72%)
      translateY(-3px)
      rotate(-18deg)
      scale(1);
  }

  18%{
    opacity:1;

    transform:
      translateX(-50.72%)
      translateY(0)
      rotate(-18deg)
      scale(1);
  }

  42%{
    opacity:1;

    transform:
      translateX(-50.72%)
      translateY(12px)
      rotate(-8deg)
      scale(.96);
  }

  50%{
    opacity:1;

    transform:
      translateX(-50.72%)
      translateY(20px)
      rotate(-3deg)
      scaleX(.72)
      scaleY(.88);
  }

  54%{
    opacity:.7;

    transform:
      translateX(-50.72%)
      translateY(24.34px)
      rotate(0deg)
       scaleX(.35)
       scaleY(.72);
  }

  56%{
    opacity:.25;

    transform:
      translateX(-50.72%)
      translateY(24.34px)
      rotate(0deg)
      scaleX(.35)
      scaleY(.72);
  }
     58%,
      100%{
      opacity:0;

    transform:
    translateX(-50.72%)
    translateY(24.34px)
    rotate(0deg)
    scaleX(.08)
    scaleY(.45);
 }
}
/* =========================================================
   MALAC FINOM REAKCIÓJA AZ ÉRME BEESÉSEKOR
   ========================================================= */

@keyframes cnPiggyBankReaction{

  0%,
  54%,
  100%{
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }


  58%{
    transform:
      translateX(-50%)
      translateY(1px)
      scale(1.03,.97);
  }


  63%{
    transform:
      translateX(-50%)
      translateY(-1px)
      scale(.99,1.02);
  }


  69%{
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

}
/* =========================================================
   AKADÁLYMENTESÍTÉS – MOZGÁS CSÖKKENTÉSE
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  #buchung
  .cnPiggyBank,

  #buchung
  .cnPiggyCoin{
    animation:none !important;
  }


  #buchung
  .cnPiggyCoin{
    display:none;
  }

}

#buchung
.cnLivePriceSaving strong,

#buchung
.cnLivePriceSaving span{
  display:block;
}


#buchung
.cnLivePriceSaving strong{
  color:#f3d17a;

  font-size:17px;
  font-weight:950;
}


#buchung
.cnLivePriceSaving span{
  margin-top:3px;

  color:
    rgba(255,255,255,.88);

  font-size:13px;

  line-height:1.35;

  font-weight:700;
}


#buchung
.cnLivePriceTrust{
  margin-top:14px;

  display:grid;
}


#buchung
.cnLivePriceTrust > div{
  display:grid;

  grid-template-columns:
    30px
    minmax(0,1fr);

  align-items:center;

  gap:10px;

  padding:
    10px 4px;

  color:
    rgba(255,255,255,.86);

  font-size:13px;
  font-weight:750;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}


#buchung
.cnLivePriceTrust > div:last-child{
  border-bottom:0;
}


#buchung
.cnLivePriceTrust > div > span{
  width:30px;
  height:30px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(243,209,122,.40);

  border-radius:9px;

  color:#f3d17a;

  font-size:16px;
  font-weight:950;
}

@media(max-width:700px){

  html[data-cn-booking-step="2"]
  #buchung
  #cnLivePriceSummary{

    position:relative;

    right:auto;
    bottom:auto;

    width:100%;

    max-height:none;

    overflow:visible;

    margin:
      18px 0 22px;

    padding:14px;

    border-radius:20px;
  }

  #buchung
  .cnLivePriceSummaryTitle{
    margin-bottom:10px;
    font-size:17px;
  }


  #buchung
  .cnLivePriceSummaryBox{
    padding:13px;
    border-radius:16px;
  }


  #buchung
  .cnLivePriceRows{
    gap:8px;
  }


  #buchung
  .cnLivePriceRow{
    gap:10px;
    font-size:12px;
  }


  #buchung
  .cnLivePriceDivider{
    margin:10px 0;
  }


  #buchung
  .cnLivePriceTotalRow span{
    font-size:14px;
  }


  #buchung
  .cnLivePriceTotalRow strong{
    font-size:26px;
  }


  #buchung
  .cnLivePriceSaving{
    margin-top:10px;

    padding:
      12px 12px;

    grid-template-columns:
      70px
      minmax(0,1fr);

    gap:12px;

    border-radius:14px;
  }


 #buchung
.cnLivePriceGift,
#buchung
.cnPiggyAnimation{
  width:70px;
  height:56px;

  flex-basis:70px;
}


#buchung
.cnPiggyBank{
  width:98px;
  bottom:-24px;
}

#buchung
.cnPiggyCoin{
  top:-68px;
  width:65px;
}
  #buchung
  .cnLivePriceSaving strong{
    font-size:14px;
  }


  #buchung
  .cnLivePriceSaving span{
    font-size:11px;
  }


  #buchung
  .cnLivePriceTrust{
    display:none;
  }

}
.cnSrOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* =========================================================
   CLEANNEST – BOOKING SUCCESS ANIMATION
   ========================================================= */

#buchung .cnBookingSuccess{
  position:relative;

  margin:24px 0;
  padding:32px 22px;

  overflow:hidden;

  border:1px solid rgba(243,209,122,.55);
  border-radius:26px;

  text-align:center;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(243,209,122,.14),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(7,22,38,.98),
      rgba(4,14,27,.99)
    );

  box-shadow:
    0 0 32px rgba(243,209,122,.12),
    0 24px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#buchung .cnBookingSuccess[hidden]{
  display:none !important;
}


/* =========================
   ANIMATION AREA
   ========================= */

#buchung .cnBookingSuccessAnimation{
  position:relative;

  width:180px;
  height:150px;

  margin:0 auto 20px;
}

#buchung .cnBookingSuccessPiggy{
  position:absolute;

  left:50%;
  bottom:0;

  width:150px;
  height:120px;

  transform:
    translateX(-50%);

  overflow:visible;
}


/* =========================
   PIG
   ========================= */

#buchung .cnBookingSuccessPig{
  position:absolute;

  left:50%;
  bottom:0;

  width:135px;
  height:auto;

  max-width:none;

  display:block;

  transform:
    translateX(-50%)
    translateY(35px)
    scale(.72);

  transform-origin:
    50% 80%;

  opacity:0;

  pointer-events:none;
  user-select:none;

  z-index:2;
}


/* =========================
   COINS
   ========================= */

#buchung .cnBookingSuccessCoin{
  position:absolute;

  left:50%;
  top:34px;

  width:30px;
  height:auto;

  max-width:none;

  display:block;

  opacity:0;

  pointer-events:none;
  user-select:none;

  z-index:3;
}

#buchung .cnBookingSuccessCoin1{
  transform:
    translateX(-50%)
    translateY(30px)
    rotate(-12deg)
    scale(.6);
}

#buchung .cnBookingSuccessCoin2{
  transform:
    translateX(-50%)
    translateY(30px)
    rotate(8deg)
    scale(.6);
}

#buchung .cnBookingSuccessCoin3{
  transform:
    translateX(-50%)
    translateY(30px)
    rotate(18deg)
    scale(.6);
}


/* =========================
   ACTIVE SUCCESS STATE
   ========================= */

#buchung .cnBookingSuccess.is-active
.cnBookingSuccessPig{
  animation:
    cnBookingSuccessPigRise
    1.25s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

#buchung .cnBookingSuccess.is-active
.cnBookingSuccessCoin1{
  animation:
    cnBookingSuccessCoinOne
    1.15s
    .48s
    cubic-bezier(.16,.8,.3,1)
    forwards;
}

#buchung .cnBookingSuccess.is-active
.cnBookingSuccessCoin2{
  animation:
    cnBookingSuccessCoinTwo
    1.25s
    .58s
    cubic-bezier(.16,.8,.3,1)
    forwards;
}

#buchung .cnBookingSuccess.is-active
.cnBookingSuccessCoin3{
  animation:
    cnBookingSuccessCoinThree
    1.1s
    .68s
    cubic-bezier(.16,.8,.3,1)
    forwards;
}


/* =========================
   PIG RISE
   ========================= */

@keyframes cnBookingSuccessPigRise{

  0%{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(35px)
      scale(.72);
  }

  45%{
    opacity:1;

    transform:
      translateX(-50%)
      translateY(-8px)
      scale(1.08);
  }

  72%{
    transform:
      translateX(-50%)
      translateY(-3px)
      scale(.98);
  }

  100%{
    opacity:1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

}


/* =========================
   COIN 1
   ========================= */

@keyframes cnBookingSuccessCoinOne{

  0%{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(30px)
      rotate(-12deg)
      scale(.6);
  }

  20%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      translateX(-78px)
      translateY(-75px)
      rotate(-55deg)
      scale(1);
  }

}


/* =========================
   COIN 2
   ========================= */

@keyframes cnBookingSuccessCoinTwo{

  0%{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(30px)
      rotate(8deg)
      scale(.6);
  }

  20%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(-92px)
      rotate(40deg)
      scale(1.08);
  }

}


/* =========================
   COIN 3
   ========================= */

@keyframes cnBookingSuccessCoinThree{

  0%{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(30px)
      rotate(18deg)
      scale(.6);
  }

  20%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      translateX(48px)
      translateY(-70px)
      rotate(65deg)
      scale(.92);
  }

}


/* =========================
   SUCCESS TEXT
   ========================= */

#buchung .cnBookingSuccessContent{
  max-width:560px;
  margin:0 auto;

  opacity:0;

  transform:
    translateY(14px);
}

#buchung .cnBookingSuccess.is-active
.cnBookingSuccessContent{
  animation:
    cnBookingSuccessContentReveal
    .8s
    1.35s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

@keyframes cnBookingSuccessContentReveal{

  0%{
    opacity:0;

    transform:
      translateY(14px);
  }

  100%{
    opacity:1;

    transform:
      translateY(0);
  }

}

#buchung .cnBookingSuccessContent h2{
  margin:0 0 14px;

  color:#f3d17a;

  font-size:30px;
  line-height:1.15;
  font-weight:950;
}

#buchung .cnBookingSuccessContent p{
  margin:8px 0;

  color:rgba(255,255,255,.82);

  font-size:16px;
  line-height:1.55;
  font-weight:650;
}

#buchung .cnBookingSuccessContent strong{
  display:block;

  margin-top:16px;

  color:#5dffb8;

  font-size:17px;
  line-height:1.45;
  font-weight:900;
}


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

@media(max-width:700px){

  #buchung .cnBookingSuccess{
    padding:26px 16px;
    border-radius:22px;
  }

  #buchung .cnBookingSuccessAnimation{
    width:150px;
    height:130px;
  }

  #buchung .cnBookingSuccessPiggy{
    width:130px;
    height:105px;
  }

  #buchung .cnBookingSuccessPig{
    width:118px;
  }

  #buchung .cnBookingSuccessCoin{
    width:26px;
  }

  #buchung .cnBookingSuccessContent h2{
    font-size:25px;
  }

  #buchung .cnBookingSuccessContent p{
    font-size:14px;
  }

  #buchung .cnBookingSuccessContent strong{
    font-size:15px;
  }

}

/* =========================================================
   CLEANNEST – COMPLETE PRICE SUMMARY
   ENTERPRISE MOBILE-FIRST FINAL
   ========================================================= */


/* ---------------------------------------------------------
   KEDVEZMÉNY UTÁNI EREDMÉNYSOROK
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   PET FELÁR
   --------------------------------------------------------- */

#buchung .cnLivePriceRow.is-addon{
  padding:9px 12px;

  border-left:3px solid #f3d17a;
  border-radius:0 12px 12px 0;

  background:
    linear-gradient(
      90deg,
      rgba(243,209,122,.11),
      rgba(243,209,122,.025)
    );
}

#buchung .cnLivePriceRow.is-addon span{
  color:rgba(255,255,255,.92);
  font-weight:850;
}

#buchung .cnLivePriceRow.is-addon strong{
  color:#f3d17a;
  font-weight:950;
}

#buchung .cnLivePriceRow.is-result{
  margin-top:-3px;
  padding:10px 12px;

  border-left:3px solid #5dffb8;
  border-radius:0 12px 12px 0;

  background:
    linear-gradient(
      90deg,
      rgba(93,255,184,.12),
      rgba(93,255,184,.035)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

#buchung .cnLivePriceRow.is-result span{
  color:rgba(255,255,255,.92);
  font-weight:850;
}

#buchung .cnLivePriceRow.is-result strong{
  color:#5dffb8;
  font-size:15px;
  font-weight:950;

  text-shadow:
    0 0 14px rgba(93,255,184,.18);
}


/* ---------------------------------------------------------
   TELJES ABLAKÁR EXTRA ABLAKOK ESETÉN
   --------------------------------------------------------- */

#buchung .cnLivePriceRow.is-subtotal{
  margin-top:2px;
  padding:11px 12px;

  border:
    1px solid rgba(243,209,122,.26);

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      rgba(243,209,122,.11),
      rgba(196,155,70,.035)
    );
}

#buchung .cnLivePriceRow.is-subtotal span,
#buchung .cnLivePriceRow.is-subtotal strong{
  color:#f3d17a;
  font-weight:950;
}


/* ---------------------------------------------------------
   MEGTAKARÍTÁSI KÁRTYA
   --------------------------------------------------------- */

#buchung .cnLivePriceSaving{
  position:relative;
  overflow:hidden;

  margin-top:16px;
  padding:22px;

  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  align-items:center;
  gap:20px;

  border:
    1px solid rgba(93,255,184,.72);

  border-radius:22px;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(93,255,184,.14),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(10,86,61,.96),
      rgba(5,48,43,.98)
    );

  box-shadow:
    0 0 0 1px rgba(93,255,184,.09) inset,
    0 0 30px rgba(93,255,184,.13),
    0 22px 54px rgba(0,0,0,.34);
}

#buchung .cnLivePriceSaving[hidden]{
  display:none !important;
}


/* ---------------------------------------------------------
   MALAC – MÁSODLAGOS DEKORÁCIÓ
   --------------------------------------------------------- */

#buchung .cnLivePriceGift,
#buchung .cnPiggyAnimation{
  width:104px;
  height:100px;
  flex-basis:104px;
}

#buchung .cnLivePriceSaving .cnPiggyBank{
  width:122px;
  bottom:-20px;
  animation:none !important;
}

#buchung .cnLivePriceSaving .cnPiggyCoin{
  width:28px;
  top:-28px;
  animation:none !important;
}


/* ---------------------------------------------------------
   TARTALMI HIERARCHIA
   --------------------------------------------------------- */

#buchung .cnLivePriceSavingContent{
  position:relative;
  z-index:2;

  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}


/* ---------------------------------------------------------
   A MEGTAKARÍTÁS A LEGFONTOSABB ELEM
   --------------------------------------------------------- */

#buchung
.cnLivePriceSavingContent
#cnLivePriceSavingAmount{
  order:1;

  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  width:100%;
  margin:0;
  padding:0;

  border:0;
  border-radius:0;
  background:none;

  color:#f3d17a;

  font-size:44px;
  line-height:1;
  font-weight:950;

  letter-spacing:0;

  text-shadow:
    0 0 18px rgba(243,209,122,.30),
    0 0 34px rgba(243,209,122,.12);

  box-shadow:none;
}

#buchung
.cnLivePriceSavingContent
#cnLivePriceSavingAmount::before{
  content:"IHRE ERSPARNIS";

  display:block;

  margin:0 0 8px;

  color:#5dffb8;

  font-size:11px;
  line-height:1;
  font-weight:950;

  letter-spacing:.16em;

  text-shadow:
    0 0 12px rgba(93,255,184,.26);
}


/* ---------------------------------------------------------
   MAGYARÁZÓ SZÖVEG
   --------------------------------------------------------- */

#buchung
.cnLivePriceSavingContent
#cnLivePriceSavingText{
  order:2;

  display:block;

  max-width:420px;
  margin:10px auto 0;

  color:rgba(255,255,255,.88);

  font-size:13px;
  line-height:1.45;
  font-weight:750;
}


/* ---------------------------------------------------------
   ÁR-ÖSSZEHASONLÍTÁS
   --------------------------------------------------------- */

#buchung .cnLivePriceComparison{
  order:3;

  width:100%;
  margin:18px 0 0;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

#buchung .cnLivePriceComparison[hidden]{
  display:none !important;
}

#buchung .cnLivePriceCompareRow{
  min-width:0;
  padding:12px 10px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:rgba(3,23,25,.38);
  border:1px solid rgba(255,255,255,.10);
}

#buchung .cnLivePriceCompareRow span{
  display:block;
  margin:0;

  color:rgba(255,255,255,.68);

  font-size:11px;
  line-height:1.25;
  font-weight:850;

  text-align:center;
}

#buchung .cnLivePriceCompareRow strong{
  display:block;
  margin-top:5px;

  font-weight:950;
  white-space:nowrap;
}


/* Einzelbuchung */

#buchung
.cnLivePriceCompareRow.is-original
strong{
  color:rgba(255,255,255,.58);

  font-size:17px;

  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(255,255,255,.48);
}


/* CleanNest Complete */

#buchung
.cnLivePriceCompareRow.is-complete{
  border-color:rgba(93,255,184,.30);

  background:
    linear-gradient(
      135deg,
      rgba(93,255,184,.11),
      rgba(93,255,184,.025)
    );
}

#buchung
.cnLivePriceCompareRow.is-complete
span{
  color:rgba(255,255,255,.90);
}

#buchung
#cnLivePriceCompareComplete{
  color:#5dffb8;

  font-size:22px;
  line-height:1;
  font-weight:950;

  text-shadow:
    0 0 15px rgba(93,255,184,.20);
}


/* A régi elválasztó nem szükséges */

#buchung .cnLivePriceSavingDivider{
  display:none;
}


/* ---------------------------------------------------------
   ÁRVÁLTOZÁS – EGYSZERI FINOM ANIMÁCIÓ
   --------------------------------------------------------- */

#buchung
.cnLivePriceSaving.is-price-update
.cnPiggyBank{
  animation:
    cnPiggyBankReaction
    1.35s
    cubic-bezier(.22,.75,.28,1)
    1 !important;
}

#buchung
.cnLivePriceSaving.is-price-update
.cnPiggyCoin{
  animation:
    cnPiggyCoinDrop
    1.35s
    cubic-bezier(.32,.02,.25,1)
    1 !important;
}

#buchung
.cnLivePriceSaving.is-price-update
#cnLivePriceSavingAmount{
  animation:
    cnSavingAmountUpdate
    .65s
    cubic-bezier(.16,1,.3,1)
    1;
}


/* ---------------------------------------------------------
   MOBIL
   --------------------------------------------------------- */

@media(max-width:700px){

  #buchung .cnLivePriceRows{
    gap:9px;
  }

  #buchung .cnLivePriceRow{
    gap:10px;

    font-size:12px;
    line-height:1.4;
  }

  #buchung .cnLivePriceRow.is-result,
  #buchung .cnLivePriceRow.is-subtotal{
    padding:9px 10px;
  }

  #buchung .cnLivePriceRow.is-result strong{
    font-size:13px;
  }

  #buchung .cnLivePriceSaving{
    padding:18px 14px;

    grid-template-columns:78px minmax(0,1fr);
    gap:12px;

    border-radius:20px;
  }

  #buchung .cnLivePriceGift,
  #buchung .cnPiggyAnimation{
    width:78px;
    height:86px;
    flex-basis:78px;
  }

  #buchung .cnLivePriceSaving .cnPiggyBank{
    width:98px;
    bottom:-16px;
  }

  #buchung .cnLivePriceSaving .cnPiggyCoin{
    width:23px;
    top:-20px;
  }

  #buchung
  .cnLivePriceSavingContent
  #cnLivePriceSavingAmount{
    font-size:36px;
  }

  #buchung
  .cnLivePriceSavingContent
  #cnLivePriceSavingAmount::before{
    margin-bottom:7px;
    font-size:10px;
  }

  #buchung
  .cnLivePriceSavingContent
  #cnLivePriceSavingText{
    margin-top:8px;
    font-size:11px;
    line-height:1.4;
  }

  #buchung .cnLivePriceComparison{
    margin-top:14px;
    gap:7px;
  }

  #buchung .cnLivePriceCompareRow{
    padding:10px 6px;
    border-radius:12px;
  }

  #buchung .cnLivePriceCompareRow span{
    font-size:9px;
  }

  #buchung
  .cnLivePriceCompareRow.is-original
  strong{
    font-size:14px;
  }

  #buchung
  #cnLivePriceCompareComplete{
    font-size:18px;
  }

}


/* ---------------------------------------------------------
   NAGYON KESKENY MOBIL
   --------------------------------------------------------- */

@media(max-width:390px){

  #buchung .cnLivePriceSaving{
    grid-template-columns:68px minmax(0,1fr);
    gap:9px;

    padding:
      16px 10px;
  }

  #buchung .cnLivePriceGift,
  #buchung .cnPiggyAnimation{
    width:68px;
    height:78px;
  }

  #buchung .cnLivePriceSaving .cnPiggyBank{
    width:88px;
  }

  #buchung
  .cnLivePriceSavingContent
  #cnLivePriceSavingAmount{
    font-size:32px;
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  #buchung .cnLivePriceSaving,
  #buchung .cnLivePriceSaving *,
  #buchung .cnLivePriceSaving::before,
  #buchung .cnLivePriceSaving::after{
    animation:none !important;
    transition:none !important;
  }

}

/* =========================================================
   CLEANNEST COMPLETE – PREMIUM PROMO BLOCK
   Wohnungsreinigung + Fensterreinigung
   Aktion gültig bis einschließlich 30.08.2026
   ========================================================= */

.cnCompleteHero {
  --cnCompleteBgDark: #071426;
  --cnCompleteBgMid: #0c2340;
  --cnCompleteBgLight: #12365d;

  --cnCompleteGold: #f4d47b;
  --cnCompleteGoldStrong: #d5a83c;
  --cnCompleteGoldLight: #fff0b5;

  --cnCompleteBlue: #71c5ff;
  --cnCompleteGreen: #62e3b0;

  --cnCompleteText: #ffffff;
  --cnCompleteTextSoft: rgba(237, 245, 255, 0.84);
  --cnCompleteTextMuted: rgba(225, 236, 250, 0.68);

  --cnCompleteBorder: rgba(255, 255, 255, 0.11);
  --cnCompleteCardBg: rgba(255, 255, 255, 0.055);
  --cnCompleteCardBgHover: rgba(255, 255, 255, 0.085);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  box-sizing: border-box;
  width: min(1180px, calc(100% - 32px));
  margin: clamp(28px, 6vw, 72px) auto;
  padding: clamp(26px, 5vw, 58px);

  border: 1px solid transparent;
  border-radius: clamp(25px, 4vw, 42px);

  color: var(--cnCompleteText);

  background:
    linear-gradient(
      145deg,
      rgba(7, 20, 38, 0.985),
      rgba(12, 35, 64, 0.975) 56%,
      rgba(9, 27, 49, 0.985)
    ) padding-box,
    linear-gradient(
      120deg,
      rgba(244, 212, 123, 0.32),
      rgba(255, 255, 255, 0.07),
      rgba(113, 197, 255, 0.28),
      rgba(244, 212, 123, 0.78),
      rgba(255, 255, 255, 0.07)
    ) border-box;

  background-size:
    100% 100%,
    300% 300%;

  box-shadow:
    0 34px 90px rgba(0, 8, 24, 0.43),
    0 14px 42px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);

  animation:
    cnCompleteEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) both,
    cnCompleteBorderFlow 12s linear infinite;
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.cnCompleteHero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -35%;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(244, 212, 123, 0.22) 0,
      rgba(244, 212, 123, 0.08) 17%,
      transparent 37%
    ),
    radial-gradient(
      circle at 88% 17%,
      rgba(113, 197, 255, 0.19) 0,
      rgba(113, 197, 255, 0.05) 19%,
      transparent 38%
    ),
    radial-gradient(
      circle at 82% 82%,
      rgba(98, 227, 176, 0.1) 0,
      transparent 34%
    ),
    radial-gradient(
      circle at 34% 78%,
      rgba(213, 168, 60, 0.09) 0,
      transparent 29%
    );

  filter: blur(8px);
  transform: translate3d(0, 0, 0);

  animation:
    cnCompleteAmbient 16s ease-in-out infinite alternate;
}


.cnCompleteHero::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: -70%;
  left: -46%;

  width: 30%;
  height: 240%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.025),
    rgba(255, 241, 184, 0.17),
    rgba(255, 255, 255, 0.04),
    transparent
  );

  filter: blur(1px);
  transform: rotate(18deg);

  animation:
    cnCompleteSweep 9s ease-in-out infinite;
}


/* =========================================================
   HEADER
   ========================================================= */

.cnCompleteHero .cnPromoHeader {
  position: relative;
  z-index: 2;

  max-width: 980px;
  margin: 0 auto clamp(26px, 5vw, 44px);

  text-align: center;
}


.cnCompleteHero .cnBadge {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 10px 18px;

  border: 1px solid rgba(244, 212, 123, 0.48);
  border-radius: 999px;

  color: #fff6d8;

  background:
    linear-gradient(
      135deg,
      rgba(244, 212, 123, 0.19),
      rgba(213, 168, 60, 0.08)
    );

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 rgba(244, 212, 123, 0);

  font-size: clamp(0.76rem, 1.7vw, 0.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  animation:
    cnCompleteBadgeFloat 3.2s ease-in-out infinite;
}


.cnCompleteHero .cnBadge::after {
  content: "";
  position: absolute;
  inset: -5px;

  z-index: -1;

  border-radius: inherit;

  background:
    radial-gradient(
      circle,
      rgba(244, 212, 123, 0.2),
      transparent 68%
    );

  opacity: 0.45;

  animation:
    cnCompleteBadgeGlow 3.2s ease-in-out infinite;
}


.cnCompleteHero .cnPromoTitle {
  margin: 0;

  color: #ffffff;

  font-size: clamp(2.25rem, 7vw, 5.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;

  text-shadow:
    0 4px 28px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(244, 212, 123, 0.07);
}


.cnCompleteHero .cnPromoTitle::after {
  content: "";

  display: block;

  width: clamp(90px, 19vw, 190px);
  height: 4px;
  margin: 22px auto 0;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cnCompleteGoldStrong),
      var(--cnCompleteGoldLight),
      var(--cnCompleteGoldStrong),
      transparent
    );

  box-shadow:
    0 0 22px rgba(244, 212, 123, 0.38);

  transform-origin: center;

  animation:
    cnCompleteTitleLine 1.15s 0.28s both;
}


.cnCompleteHero .cnPromoSubtitle {
  max-width: 820px;
  margin: 22px auto 0;

  color: var(--cnCompleteTextSoft);

  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: 0.005em;
  text-wrap: balance;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.cnCompleteHero .cnPromoContent {
  position: relative;
  z-index: 2;

  display: grid;
  gap: clamp(18px, 3vw, 28px);
}


.cnCompleteHero .cnIntroText {
  margin: 0;
  padding: clamp(22px, 4vw, 32px);

  border: 1px solid rgba(244, 212, 123, 0.18);
  border-radius: 24px;

  color: var(--cnCompleteTextSoft);

  background:
    linear-gradient(
      135deg,
      rgba(244, 212, 123, 0.075),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.16);

  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.78;
}


.cnCompleteHero .cnIntroText strong {
  color: #ffffff;
  font-weight: 850;
}


.cnCompleteHero .cnHighlightDate {
  display: inline-flex;
  align-items: center;

  margin-top: 18px;
  padding: 9px 14px;

  border: 1px solid rgba(244, 212, 123, 0.36);
  border-radius: 12px;

  color: #fff1bd !important;

  background:
    rgba(244, 212, 123, 0.09);

  box-shadow:
    0 0 0 rgba(244, 212, 123, 0);

  font-size: 0.96em;
  line-height: 1.45;

  animation:
    cnCompleteDatePulse 3.8s ease-in-out infinite;
}


/* =========================================================
   GENERAL SECTION STYLE
   ========================================================= */

.cnCompleteHero .cnPromoSection {
  position: relative;
  overflow: hidden;

  box-sizing: border-box;
  margin: 0;
  padding: clamp(22px, 4vw, 32px);

  border: 1px solid var(--cnCompleteBorder);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.062),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 16px 38px rgba(0, 0, 0, 0.15);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform 0.32s ease,
    border-color 0.32s ease,
    background-color 0.32s ease,
    box-shadow 0.32s ease;
}


.cnCompleteHero .cnPromoSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244, 212, 123, 0.8),
      rgba(113, 197, 255, 0.55),
      transparent
    );

  opacity: 0.72;
}


.cnCompleteHero .cnPromoSection h3 {
  margin: 0 0 14px;

  color: #ffffff;

  font-size: clamp(1.18rem, 2.8vw, 1.55rem);
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}


.cnCompleteHero .cnPromoSection h4 {
  margin: 0 0 10px;

  color: #ffffff;

  font-size: clamp(1.03rem, 2vw, 1.2rem);
  font-weight: 800;
  line-height: 1.3;
}


.cnCompleteHero .cnPromoSection p {
  margin: 0;

  color: var(--cnCompleteTextSoft);

  font-size: clamp(0.96rem, 1.9vw, 1.04rem);
  line-height: 1.7;
}


.cnCompleteHero .cnPromoSection strong {
  color: #ffffff;
  font-weight: 800;
}


.cnCompleteHero .cnSmallText {
  display: block;

  margin-top: 10px !important;

  color: var(--cnCompleteTextMuted) !important;

  font-size: 0.93rem !important;
  line-height: 1.62 !important;
}


/* =========================================================
   TARGET GROUP
   ========================================================= */

.cnCompleteHero .cnTargetGroup {
  border-color: rgba(113, 197, 255, 0.18);

  background:
    linear-gradient(
      135deg,
      rgba(113, 197, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );
}


/* =========================================================
   LEVEL CARDS
   ========================================================= */

.cnCompleteHero .cnLevelGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;

  margin-top: 20px;
}


.cnCompleteHero .cnLevelCard {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 100%;
  padding: 22px;

  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 13px 28px rgba(0, 0, 0, 0.14);

  transition:
    transform 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    background 0.32s ease;
}


.cnCompleteHero .cnLevelCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--cnCompleteGoldStrong),
      var(--cnCompleteGoldLight)
    );

  opacity: 0.78;
}


.cnCompleteHero .cnLevelCard:nth-child(2)::before {
  background:
    linear-gradient(
      90deg,
      var(--cnCompleteBlue),
      var(--cnCompleteGoldLight)
    );
}


.cnCompleteHero .cnLevelCard:nth-child(3)::before {
  background:
    linear-gradient(
      90deg,
      var(--cnCompleteGoldStrong),
      #ffb976
    );
}


.cnCompleteHero .cnLevelCard p {
  flex: 1;
}


.cnCompleteHero .cnLevelDiscount {
  margin-top: 20px;
  padding: 14px 15px;

  border: 1px solid rgba(244, 212, 123, 0.18);
  border-radius: 15px;

  color: var(--cnCompleteTextSoft);

  background:
    rgba(244, 212, 123, 0.065);

  font-size: 0.91rem;
  line-height: 1.62;
}


.cnCompleteHero .cnLevelDiscount strong {
  color: var(--cnCompleteGoldLight);
}


/* =========================================================
   WINDOW TYPE CARDS
   ========================================================= */

.cnCompleteHero .cnWindowTypeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;

  margin-top: 20px;
}


.cnCompleteHero .cnWindowTypeCard {
  position: relative;

  min-width: 0;
  padding: 22px;

  border: 1px solid rgba(113, 197, 255, 0.14);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(113, 197, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 12px 28px rgba(0, 0, 0, 0.13);

  transition:
    transform 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease;
}


.cnCompleteHero .cnWindowTypeCard::before {
  content: "✓";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;
  margin-bottom: 14px;

  border: 1px solid rgba(113, 197, 255, 0.3);
  border-radius: 50%;

  color: #bce8ff;
  background: rgba(113, 197, 255, 0.1);

  font-size: 0.9rem;
  font-weight: 900;
}


/* =========================================================
   DETAILS / DROPDOWN
   ========================================================= */

.cnCompleteHero .cnCompleteDetails {
  overflow: hidden;

  margin-top: 20px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;

  background:
    rgba(0, 8, 20, 0.2);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}


.cnCompleteHero .cnCompleteDetails summary {
  position: relative;

  display: flex;
  align-items: center;
  gap: 12px;

  box-sizing: border-box;
  width: 100%;
  padding: 17px 52px 17px 18px;

  color: #ffffff;

  cursor: pointer;
  list-style: none;

  font-size: clamp(0.94rem, 1.8vw, 1.02rem);
  font-weight: 760;
  line-height: 1.45;

  transition:
    color 0.25s ease,
    background 0.25s ease;
}


.cnCompleteHero .cnCompleteDetails summary::-webkit-details-marker {
  display: none;
}


.cnCompleteHero .cnCompleteDetails summary::after {
  content: "+";

  position: absolute;
  top: 50%;
  right: 17px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border: 1px solid rgba(244, 212, 123, 0.25);
  border-radius: 50%;

  color: var(--cnCompleteGoldLight);
  background: rgba(244, 212, 123, 0.07);

  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;

  transform:
    translateY(-50%)
    rotate(0deg);

  transition:
    transform 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease;
}


.cnCompleteHero .cnCompleteDetails[open] summary {
  color: var(--cnCompleteGoldLight);

  background:
    rgba(244, 212, 123, 0.04);
}


.cnCompleteHero .cnCompleteDetails[open] summary::after {
  transform:
    translateY(-50%)
    rotate(45deg);

  border-color: rgba(244, 212, 123, 0.46);
  background: rgba(244, 212, 123, 0.12);
}


.cnCompleteHero .cnCompleteDetails summary:focus-visible {
  outline: 3px solid rgba(113, 197, 255, 0.55);
  outline-offset: -3px;
}


.cnCompleteHero .cnDetailsContent {
  padding: 0 18px 19px;

  border-top: 1px solid rgba(255, 255, 255, 0.065);

  animation:
    cnCompleteDetailsOpen 0.34s ease both;
}


.cnCompleteHero .cnDetailsContent p {
  margin-top: 14px;
}


.cnCompleteHero .cnDetailsContent strong {
  color: var(--cnCompleteGoldLight);
}


.cnCompleteHero .cnDetailsNote {
  padding: 13px 14px;

  border-left: 3px solid rgba(113, 197, 255, 0.62);
  border-radius: 0 11px 11px 0;

  color: var(--cnCompleteTextMuted) !important;

  background:
    rgba(113, 197, 255, 0.055);
}


/* =========================================================
   WINDOW LIMIT LIST
   ========================================================= */

.cnCompleteHero .cnWindowList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;

  margin: 20px 0 0;
  padding: 0;

  list-style: none;
}


.cnCompleteHero .cnWindowList li {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 6px;

  min-width: 0;
  padding: 20px;

  border: 1px solid rgba(244, 212, 123, 0.14);
  border-radius: 18px;

  color: var(--cnCompleteTextSoft);

  background:
    linear-gradient(
      145deg,
      rgba(244, 212, 123, 0.07),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  font-size: 0.97rem;
  line-height: 1.5;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


.cnCompleteHero .cnWindowList li > strong:first-child {
  color: #ffffff;

  font-size: 1.1rem;
  font-weight: 850;
}


.cnCompleteHero .cnWindowList li span {
  color: var(--cnCompleteTextMuted);

  font-size: 0.88rem;
  font-weight: 600;
}


.cnCompleteHero .cnWindowList li strong:last-child {
  color: var(--cnCompleteGoldLight);
}


.cnCompleteHero .cnNotice {
  margin-top: 18px !important;
  padding: 16px 18px;

  border: 1px solid rgba(244, 212, 123, 0.17);
  border-left: 4px solid var(--cnCompleteGoldStrong);
  border-radius: 14px;

  color: var(--cnCompleteTextSoft) !important;

  background:
    rgba(244, 212, 123, 0.055);
}


/* =========================================================
   EQUIPMENT INFO
   ========================================================= */

.cnCompleteHero .cnEquipmentInfo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;

  border-color: rgba(98, 227, 176, 0.2);

  background:
    linear-gradient(
      135deg,
      rgba(98, 227, 176, 0.075),
      rgba(255, 255, 255, 0.025)
    );
}


.cnCompleteHero .cnEquipmentIcon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  border: 1px solid rgba(98, 227, 176, 0.34);
  border-radius: 18px;

  color: #c5ffe7;

  background:
    linear-gradient(
      135deg,
      rgba(98, 227, 176, 0.18),
      rgba(98, 227, 176, 0.07)
    );

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 22px rgba(98, 227, 176, 0.08);

  font-size: 1.35rem;
  font-weight: 950;

  animation:
    cnCompleteEquipmentPulse 4s ease-in-out infinite;
}


.cnCompleteHero .cnEquipmentInfo h3 {
  margin-bottom: 8px;
}


/* =========================================================
   IMPORTANT CONDITIONS
   ========================================================= */

.cnCompleteHero .cnPromoFooter {
  position: relative;
  overflow: hidden;

  box-sizing: border-box;
  padding: clamp(22px, 4vw, 32px);

  border: 1px solid rgba(244, 212, 123, 0.2);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(244, 212, 123, 0.075),
      rgba(0, 8, 20, 0.15)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 16px 38px rgba(0, 0, 0, 0.15);
}


.cnCompleteHero .cnPromoFooter::before {
  content: "i";

  position: absolute;
  top: 20px;
  right: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border: 1px solid rgba(244, 212, 123, 0.3);
  border-radius: 50%;

  color: var(--cnCompleteGoldLight);
  background: rgba(244, 212, 123, 0.08);

  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 800;
}


.cnCompleteHero .cnFooterTitle {
  display: block;

  max-width: calc(100% - 54px);
  margin-bottom: 17px;

  color: #ffffff;

  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  font-weight: 850;
  line-height: 1.35;
}


.cnCompleteHero .cnFooterList {
  display: grid;
  gap: 10px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.cnCompleteHero .cnFooterList li {
  position: relative;

  padding-left: 25px;

  color: var(--cnCompleteTextSoft);

  font-size: clamp(0.9rem, 1.7vw, 0.98rem);
  line-height: 1.6;
}


.cnCompleteHero .cnFooterList li::before {
  content: "✓";

  position: absolute;
  top: 0.04em;
  left: 0;

  color: var(--cnCompleteGold);

  font-size: 0.92rem;
  font-weight: 900;
}


.cnCompleteHero .cnFooterList strong {
  color: #ffffff;
  font-weight: 800;
}


/* =========================================================
   CALL TO ACTION
   ========================================================= */

.cnCompleteHero .cnCompleteCtaWrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: clamp(4px, 1vw, 10px);

  text-align: center;
}


.cnCompleteHero .cnCompleteCta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  box-sizing: border-box;
  width: min(100%, 540px);
  min-height: 62px;
  padding: 17px 25px;

  border: 1px solid rgba(255, 240, 181, 0.64);
  border-radius: 18px;

  color: #101827;

  background:
    linear-gradient(
      135deg,
      #f8dc8d,
      #f2c75c 46%,
      #dca83b
    );

  box-shadow:
    0 18px 38px rgba(213, 168, 60, 0.26),
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 -1px 0 rgba(116, 75, 8, 0.18);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  font: inherit;
  font-size: clamp(0.98rem, 2.2vw, 1.12rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.005em;
  text-align: center;

  transform: translateZ(0);

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
}


.cnCompleteHero .cnCompleteCta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  left: -42%;

  width: 28%;
  height: 260%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.72),
      transparent
    );

  transform: rotate(18deg);

  animation:
    cnCompleteCtaShine 4.8s ease-in-out infinite;
}


.cnCompleteHero .cnCompleteCtaText {
  position: relative;
  z-index: 2;
}


.cnCompleteHero .cnCompleteCtaArrow {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  border-radius: 50%;

  color: #172030;
  background: rgba(255, 255, 255, 0.35);

  font-size: 1.2rem;
  line-height: 1;

  transition:
    transform 0.28s ease,
    background 0.28s ease;
}


.cnCompleteHero .cnCompleteCta:hover {
  transform:
    translateY(-3px)
    scale(1.012);

  filter: brightness(1.04);

  box-shadow:
    0 23px 48px rgba(213, 168, 60, 0.34),
    0 11px 22px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 30px rgba(244, 212, 123, 0.16);
}


.cnCompleteHero .cnCompleteCta:hover .cnCompleteCtaArrow {
  transform: translateX(4px);

  background: rgba(255, 255, 255, 0.48);
}


.cnCompleteHero .cnCompleteCta:active {
  transform:
    translateY(0)
    scale(0.985);
}


.cnCompleteHero .cnCompleteCta:focus-visible {
  outline: 4px solid rgba(113, 197, 255, 0.72);
  outline-offset: 4px;
}


.cnCompleteHero .cnCompleteCtaNote {
  max-width: 620px;
  margin: 13px auto 0;

  color: var(--cnCompleteTextMuted);

  font-size: clamp(0.8rem, 1.6vw, 0.9rem);
  font-weight: 600;
  line-height: 1.5;
}


/* =========================================================
   DESKTOP HOVER EFFECTS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .cnCompleteHero .cnPromoSection:hover {
    transform: translateY(-3px);

    border-color: rgba(244, 212, 123, 0.19);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.085),
      0 21px 46px rgba(0, 0, 0, 0.19);
  }


  .cnCompleteHero .cnLevelCard:hover {
    transform: translateY(-5px);

    border-color: rgba(244, 212, 123, 0.26);

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.095),
        rgba(255, 255, 255, 0.035)
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 19px 38px rgba(0, 0, 0, 0.2),
      0 0 24px rgba(244, 212, 123, 0.06);
  }


  .cnCompleteHero .cnWindowTypeCard:hover {
    transform: translateY(-4px);

    border-color: rgba(113, 197, 255, 0.3);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.085),
      0 18px 34px rgba(0, 0, 0, 0.18),
      0 0 24px rgba(113, 197, 255, 0.06);
  }


  .cnCompleteHero .cnWindowList li:hover {
    transform: translateY(-4px);

    border-color: rgba(244, 212, 123, 0.28);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.075),
      0 17px 32px rgba(0, 0, 0, 0.17);
  }


  .cnCompleteHero .cnCompleteDetails summary:hover {
    color: var(--cnCompleteGoldLight);

    background:
      rgba(244, 212, 123, 0.045);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 920px) {

  .cnCompleteHero .cnLevelGrid {
    grid-template-columns: 1fr;
  }


  .cnCompleteHero .cnLevelCard {
    min-height: auto;
  }


  .cnCompleteHero .cnWindowList {
    grid-template-columns: 1fr;
  }

}


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

@media (max-width: 700px) {

  .cnCompleteHero {
    width: calc(100% - 20px);
    margin: 24px auto;
    padding: 24px 16px 26px;

    border-radius: 25px;

    background-size:
      100% 100%,
      380% 380%;
  }


  .cnCompleteHero::after {
    width: 40%;

    animation-duration: 10.5s;
  }


  .cnCompleteHero .cnPromoHeader {
    margin-bottom: 26px;
  }


  .cnCompleteHero .cnBadge {
    margin-bottom: 15px;
    padding: 9px 14px;

    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }


  .cnCompleteHero .cnPromoTitle {
    font-size: clamp(2.12rem, 12vw, 3.3rem);
    line-height: 1;
  }


  .cnCompleteHero .cnPromoTitle::after {
    margin-top: 17px;
  }


  .cnCompleteHero .cnPromoSubtitle {
    margin-top: 17px;

    font-size: 1rem;
    line-height: 1.55;
  }


  .cnCompleteHero .cnPromoContent {
    gap: 16px;
  }


  .cnCompleteHero .cnIntroText,
  .cnCompleteHero .cnPromoSection,
  .cnCompleteHero .cnPromoFooter {
    padding: 20px 17px;

    border-radius: 20px;
  }


  .cnCompleteHero .cnIntroText {
    font-size: 0.98rem;
    line-height: 1.7;
  }


  .cnCompleteHero .cnHighlightDate {
    display: flex;
    width: fit-content;
    max-width: 100%;

    box-sizing: border-box;

    font-size: 0.88rem;
  }


  .cnCompleteHero .cnPromoSection h3 {
    font-size: 1.2rem;
  }


  .cnCompleteHero .cnLevelGrid,
  .cnCompleteHero .cnWindowTypeGrid {
    grid-template-columns: 1fr;
    gap: 13px;
  }


  .cnCompleteHero .cnLevelCard,
  .cnCompleteHero .cnWindowTypeCard,
  .cnCompleteHero .cnWindowList li {
    padding: 18px;

    border-radius: 17px;
  }


  .cnCompleteHero .cnCompleteDetails summary {
    padding:
      15px
      48px
      15px
      15px;

    font-size: 0.92rem;
  }


  .cnCompleteHero .cnCompleteDetails summary::after {
    right: 13px;

    width: 26px;
    height: 26px;
  }


  .cnCompleteHero .cnDetailsContent {
    padding:
      0
      15px
      17px;
  }


  .cnCompleteHero .cnEquipmentInfo {
    grid-template-columns: 1fr;
    gap: 14px;
  }


  .cnCompleteHero .cnEquipmentIcon {
    width: 48px;
    height: 48px;

    border-radius: 15px;
  }


  .cnCompleteHero .cnPromoFooter::before {
    top: 17px;
    right: 16px;

    width: 29px;
    height: 29px;
  }


  .cnCompleteHero .cnFooterTitle {
    max-width: calc(100% - 44px);

    font-size: 1.12rem;
  }


  .cnCompleteHero .cnFooterList {
    gap: 11px;
  }


  .cnCompleteHero .cnFooterList li {
    padding-left: 23px;

    font-size: 0.89rem;
  }


  .cnCompleteHero .cnCompleteCta {
    min-height: 59px;
    padding: 15px 17px;

    border-radius: 16px;

    font-size: 0.97rem;
  }


  .cnCompleteHero .cnCompleteCtaArrow {
    flex: 0 0 auto;

    width: 29px;
    height: 29px;
  }


  .cnCompleteHero .cnCompleteCtaNote {
    padding: 0 5px;

    font-size: 0.8rem;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  .cnCompleteHero {
    width: calc(100% - 14px);
    padding:
      21px
      13px
      23px;

    border-radius: 22px;
  }


  .cnCompleteHero .cnPromoTitle {
    font-size: 2rem;
  }


  .cnCompleteHero .cnIntroText,
  .cnCompleteHero .cnPromoSection,
  .cnCompleteHero .cnPromoFooter {
    padding: 18px 15px;
  }


  .cnCompleteHero .cnCompleteCta {
    gap: 9px;
    padding:
      14px
      13px;

    font-size: 0.91rem;
  }

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes cnCompleteEnter {

  from {
    opacity: 0;

    transform:
      translateY(28px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes cnCompleteBorderFlow {

  0% {
    background-position:
      0 0,
      0% 50%;
  }

  50% {
    background-position:
      0 0,
      100% 50%;
  }

  100% {
    background-position:
      0 0,
      0% 50%;
  }

}


@keyframes cnCompleteAmbient {

  0% {
    transform:
      translate3d(-1.5%, -1%, 0)
      scale(1);
  }

  100% {
    transform:
      translate3d(2.5%, 1.5%, 0)
      scale(1.07);
  }

}


@keyframes cnCompleteSweep {

  0%,
  20% {
    left: -46%;
    opacity: 0;
  }

  28% {
    opacity: 0.75;
  }

  53% {
    left: 122%;
    opacity: 0;
  }

  100% {
    left: 122%;
    opacity: 0;
  }

}


@keyframes cnCompleteBadgeFloat {

  0%,
  100% {
    transform: translateY(0);

    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 0 rgba(244, 212, 123, 0);
  }

  50% {
    transform: translateY(-3px);

    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 24px rgba(244, 212, 123, 0.16);
  }

}


@keyframes cnCompleteBadgeGlow {

  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.62;
    transform: scale(1.06);
  }

}


@keyframes cnCompleteTitleLine {

  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }

}


@keyframes cnCompleteDatePulse {

  0%,
  100% {
    border-color: rgba(244, 212, 123, 0.3);

    box-shadow:
      0 0 0 rgba(244, 212, 123, 0);
  }

  50% {
    border-color: rgba(244, 212, 123, 0.58);

    box-shadow:
      0 0 22px rgba(244, 212, 123, 0.11);
  }

}


@keyframes cnCompleteDetailsOpen {

  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes cnCompleteEquipmentPulse {

  0%,
  100% {
    transform: scale(1);

    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 16px rgba(98, 227, 176, 0.06);
  }

  50% {
    transform: scale(1.04);

    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.19),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 25px rgba(98, 227, 176, 0.13);
  }

}


@keyframes cnCompleteCtaShine {

  0%,
  25% {
    left: -42%;
    opacity: 0;
  }

  34% {
    opacity: 0.8;
  }

  55% {
    left: 122%;
    opacity: 0;
  }

  100% {
    left: 122%;
    opacity: 0;
  }

}


/* =========================================================
   REDUCED MOTION / ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .cnCompleteHero,
  .cnCompleteHero::before,
  .cnCompleteHero::after,
  .cnCompleteHero .cnBadge,
  .cnCompleteHero .cnBadge::after,
  .cnCompleteHero .cnPromoTitle::after,
  .cnCompleteHero .cnHighlightDate,
  .cnCompleteHero .cnDetailsContent,
  .cnCompleteHero .cnEquipmentIcon,
  .cnCompleteHero .cnCompleteCta::before {
    animation: none !important;
  }


  .cnCompleteHero,
  .cnCompleteHero *,
  .cnCompleteHero *::before,
  .cnCompleteHero *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }


  .cnCompleteHero .cnPromoSection:hover,
  .cnCompleteHero .cnLevelCard:hover,
  .cnCompleteHero .cnWindowTypeCard:hover,
  .cnCompleteHero .cnWindowList li:hover,
  .cnCompleteHero .cnCompleteCta:hover {
    transform: none;
  }

}
/* =========================================================
   CLEANNEST COMPLETE – COMPACT OVERRIDE
   Ezt a meglévő Complete CSS legvégére tedd
   ========================================================= */

.cnCompleteHero {
  width: min(1040px, calc(100% - 28px));
  margin: clamp(24px, 4vw, 48px) auto;
  padding: clamp(24px, 4vw, 42px);
  border-radius: clamp(24px, 3vw, 34px);
}


.cnCompleteHero .cnPromoHeader {
  margin-bottom: 26px;
}


.cnCompleteHero .cnBadge {
  margin-bottom: 13px;
  padding: 8px 15px;
}


.cnCompleteHero .cnPromoTitle {
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  line-height: 1.02;
}


.cnCompleteHero .cnPromoTitle::after {
  width: clamp(80px, 15vw, 145px);
  margin-top: 16px;
}


.cnCompleteHero .cnPromoSubtitle {
  margin-top: 15px;
  font-size: clamp(0.96rem, 2vw, 1.18rem);
}


.cnCompleteHero .cnPromoContent {
  gap: 15px;
}


.cnCompleteHero .cnIntroText {
  padding: 20px 22px;
  border-radius: 19px;
  text-align: center;
}


.cnCompleteHero .cnIntroText p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--cnCompleteTextSoft);
  font-size: 1rem;
  line-height: 1.65;
}


.cnCompleteHero .cnHighlightDate {
  margin-top: 14px;
  padding: 8px 13px;
  font-size: 0.9rem;
}


.cnCompleteHero .cnPromoSection {
  padding: 22px;
  border-radius: 19px;
}


.cnCompleteHero .cnPromoSection h3 {
  margin-bottom: 16px;
  font-size: clamp(1.12rem, 2.3vw, 1.35rem);
}


.cnCompleteHero .cnLevelGrid {
  gap: 12px;
  margin-top: 0;
}


.cnCompleteHero .cnLevelCard {
  padding: 18px;
  border-radius: 16px;
}


.cnCompleteHero .cnLevelCard h4 {
  margin-bottom: 7px;
  font-size: 1.05rem;
}


.cnCompleteHero .cnLevelCard p {
  font-size: 0.9rem;
  line-height: 1.5;
}


.cnCompleteHero .cnLevelDiscount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;

  margin-top: 13px;
  padding: 11px 12px;

  font-size: 0.86rem;
  line-height: 1.35;
}


.cnCompleteHero .cnLevelDiscount strong {
  font-size: 1rem;
}


.cnCompleteHero .cnLevelDiscount span {
  color: var(--cnCompleteTextMuted);
}


.cnCompleteHero .cnCompleteDetails {
  margin-top: 0;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
}


.cnCompleteHero .cnCompleteDetails summary {
  min-height: 58px;
  padding: 15px 50px 15px 17px;
  font-size: 0.96rem;
}


.cnCompleteHero .cnDetailsContent {
  padding: 17px;
}


.cnCompleteHero .cnDetailsContent > p:first-child {
  margin-top: 0;
}


.cnCompleteHero .cnCompactInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}


.cnCompleteHero .cnCompactInfo {
  padding: 16px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.035);
}


.cnCompleteHero .cnCompactInfo h4 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1rem;
}


.cnCompleteHero .cnCompactInfo p {
  margin: 8px 0 0;

  color: var(--cnCompleteTextSoft);
  font-size: 0.9rem;
  line-height: 1.55;
}


.cnCompleteHero .cnCompactInfo strong {
  color: var(--cnCompleteGoldLight);
}


.cnCompleteHero .cnWindowList {
  gap: 10px;
  margin-top: 15px;
}


.cnCompleteHero .cnWindowList li {
  padding: 15px;
  border-radius: 14px;
  font-size: 0.88rem;
}


.cnCompleteHero .cnWindowList li > strong:first-child {
  font-size: 1rem;
}


.cnCompleteHero .cnNotice {
  margin-top: 14px !important;
  padding: 13px 14px;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}


.cnCompleteHero .cnSmallText {
  margin-top: 12px !important;
  font-size: 0.86rem !important;
}


.cnCompleteHero .cnEquipmentInfo {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
}


.cnCompleteHero .cnEquipmentIcon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.1rem;
}


.cnCompleteHero .cnEquipmentInfo h3 {
  margin-bottom: 4px;
  font-size: 1.08rem;
}


.cnCompleteHero .cnEquipmentInfo p {
  font-size: 0.91rem;
  line-height: 1.5;
}


.cnCompleteHero .cnFooterList {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}


.cnCompleteHero .cnFooterList li {
  position: relative;

  padding-left: 22px;

  color: var(--cnCompleteTextSoft);
  font-size: 0.88rem;
  line-height: 1.55;
}


.cnCompleteHero .cnFooterList li::before {
  content: "✓";

  position: absolute;
  top: 0;
  left: 0;

  color: var(--cnCompleteGold);
  font-weight: 900;
}


.cnCompleteHero .cnCompleteCtaWrap {
  padding-top: 5px;
}


.cnCompleteHero .cnCompleteCta {
  width: min(100%, 460px);
  min-height: 56px;
  padding: 14px 21px;
  border-radius: 16px;
}


.cnCompleteHero .cnCompleteCtaNote {
  margin-top: 10px;
  font-size: 0.79rem;
}


/* =========================================================
   TABLET ÉS MOBIL
   ========================================================= */

@media (max-width: 820px) {

  .cnCompleteHero .cnLevelGrid,
  .cnCompleteHero .cnWindowList {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {

  .cnCompleteHero {
    width: calc(100% - 16px);
    margin: 20px auto;
    padding: 20px 13px 23px;
    border-radius: 22px;
  }


  .cnCompleteHero .cnPromoHeader {
    margin-bottom: 21px;
  }


  .cnCompleteHero .cnPromoTitle {
    font-size: clamp(1.85rem, 10vw, 2.65rem);
  }


  .cnCompleteHero .cnPromoSubtitle {
    font-size: 0.92rem;
  }


  .cnCompleteHero .cnIntroText,
  .cnCompleteHero .cnPromoSection {
    padding: 17px 15px;
    border-radius: 17px;
  }


  .cnCompleteHero .cnIntroText p {
    font-size: 0.91rem;
  }


  .cnCompleteHero .cnHighlightDate {
    display: flex;
    justify-content: center;

    box-sizing: border-box;
    width: 100%;

    text-align: center;
  }


  .cnCompleteHero .cnCompactInfoGrid {
    grid-template-columns: 1fr;
  }


  .cnCompleteHero .cnCompactInfo {
    padding: 14px;
  }


  .cnCompleteHero .cnEquipmentInfo {
    grid-template-columns: 39px minmax(0, 1fr);
    text-align: left;
  }


  .cnCompleteHero .cnEquipmentIcon {
    width: 39px;
    height: 39px;
  }


  .cnCompleteHero .cnCompleteCta {
    min-height: 54px;
    padding: 13px 15px;
    font-size: 0.92rem;
  }

}
/* =========================================================
   CLEANNEST – PROMOTION TERMS LINKS
   ========================================================= */

.cnPromotionTermsLink{
  position:relative;
  z-index:4;

  box-sizing:border-box;
  width:100%;
  min-height:50px;

  margin-top:14px;
  padding:13px 16px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

 border:1px solid rgba(122,162,255,.72);
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      rgba(16,34,68,.96),
      rgba(6,14,31,.98)
    );

  color:#ffffff;
  text-decoration:none;
  text-align:center;

  font-size:14px;
  line-height:1.35;
  font-weight:950;

    box-shadow:
  0 12px 28px rgba(0,0,0,.38),
  0 0 18px rgba(122,162,255,.18),
  inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;

  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.cnPromotionTermsLink::after{
  content:"→";

  flex:0 0 auto;

  font-size:18px;
  line-height:1;

  transition:
    transform .22s ease;
}

.cnPromotionTermsLink:hover{
 border-color:rgba(122,162,255,.95);

 background:
  linear-gradient(
    135deg,
    rgba(28,58,110,.98),
    rgba(7,17,38,.98)
  );

 box-shadow:
  0 16px 36px rgba(0,0,0,.42),
  0 0 26px rgba(122,162,255,.30),
  inset 0 1px 0 rgba(255,255,255,.10);

  transform:translateY(-1px);
}

.cnPromotionTermsLink:hover::after{
  transform:translateX(3px);
}

.cnPromotionTermsLink:active{
  transform:scale(.99);
}

.cnPromotionTermsLink:focus-visible{
  outline:3px solid rgba(243,209,122,.38);
  outline-offset:3px;
}

.cnCompleteHero .cnPromotionTermsLink{
  margin-left:auto;
  margin-right:auto;
}

@media(min-width:700px){

  .cnPromotionTermsLink{
    width:auto;
    min-width:280px;
  }

}

@media(max-width:700px){

  .cnPromotionTermsLink{
    width:100%;
    min-height:52px;

    padding:13px 14px;

    font-size:14px;
  }

}

@media(prefers-reduced-motion:reduce){

  .cnPromotionTermsLink,
  .cnPromotionTermsLink::after{
    transition:none !important;
  }

  .cnPromotionTermsLink:hover,
  .cnPromotionTermsLink:active{
    transform:none !important;
  }

}
/* =========================================================
   COMPLETE TERMS LINK – PREMIUM ATTENTION
   ========================================================= */

.cnCompleteHero .cnPromotionTermsLink{
  margin-top:18px;

  border-color:rgba(243,209,122,.82);

  background:
    linear-gradient(
      135deg,
      rgba(248,223,145,.28),
      rgba(196,155,70,.18) 42%,
      rgba(10,16,34,.82)
    );

  color:#ffe7a1;

  box-shadow:
    0 0 0 1px rgba(243,209,122,.16),
    0 0 22px rgba(243,209,122,.24),
    0 14px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10);

  overflow:visible;

  animation:
    cnPromotionTermsPulse 3.4s ease-in-out infinite;
}

.cnCompleteHero .cnPromotionTermsLink::before{
  content:"WICHTIG";

  position:absolute;
  top:-9px;
  left:14px;

  padding:3px 8px;

  border-radius:999px;

  border:1px solid rgba(255,231,158,.65);

  background:
    linear-gradient(
      135deg,
      #f8df91,
      #c49b46
    );

  color:#10141c;

  font-size:9px;
  line-height:1;
  font-weight:950;

  letter-spacing:.10em;
  text-transform:uppercase;

  box-shadow:
    0 5px 14px rgba(0,0,0,.28);
}

.cnCompleteHero .cnPromotionTermsLink::after{
  content:"→";

  position:relative;
  z-index:2;
}

.cnCompleteHero .cnPromotionTermsLink span,
.cnCompleteHero .cnPromotionTermsLink{
  position:relative;
}

.cnCompleteHero .cnPromotionTermsLink::selection{
  background:rgba(243,209,122,.35);
}

.cnCompleteHero .cnPromotionTermsLink:hover{
  border-color:#f8df91;

  box-shadow:
    0 0 0 1px rgba(243,209,122,.24),
    0 0 30px rgba(243,209,122,.34),
    0 18px 42px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.14);

  transform:
    translateY(-2px)
    scale(1.01);
}

@keyframes cnPromotionTermsPulse{

  0%,
  100%{
    box-shadow:
      0 0 0 1px rgba(243,209,122,.14),
      0 0 16px rgba(243,209,122,.16),
      0 14px 34px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  50%{
    box-shadow:
      0 0 0 1px rgba(243,209,122,.22),
      0 0 30px rgba(243,209,122,.32),
      0 16px 38px rgba(0,0,0,.36),
      inset 0 1px 0 rgba(255,255,255,.12);
  }

}

@media(max-width:700px){

  .cnCompleteHero .cnPromotionTermsLink{
    margin-top:20px;
    padding-top:15px;
    padding-bottom:15px;
  }

}

@media(prefers-reduced-motion:reduce){

  .cnCompleteHero .cnPromotionTermsLink{
    animation:none !important;
  }

}