#voucher_frame {
  display: none;
}

.footer-small {
  background-color:#222222;
  color:fff;
}
#shopyfy-header-1, #shopyfy-header-2 {
  width: 100%;
  text-align: center;
  height: auto;
  margin: 0px 0px 30px 0px;

}
#shopyfy-header-1 img {
  margin-left: 38px;
}
#shopyfy-header-2 {
  display: none;
}
#shopyfy-main-frame {
  position: relative;
  width: 100%;
  margin: auto auto;
  box-sizing: border-box;
  /* kein overflow:hidden: Beschriftungen der Step-Kreise ragen oberhalb #process-frame */
  overflow: visible;
}

/* Hilfe/Gutschein-Trigger: Wrapping in #ueberblick .ueberblick-floating-actions (Viewport-Position je nach Media Query) */
#ueberblick .ueberblick-floating-actions .kgv-order-help-wrap,
#ueberblick .ueberblick-floating-actions .kgv-voucher-fab-wrap {
  margin: 0;
  flex: 0 0 auto;
}
#ueberblick .ueberblick-floating-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  box-sizing: border-box;
}
.kgv-order-help__btn {
  margin: 0;
  padding: 0.4em 0.8em 0.4em 1.8em;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  color: #fff;
  background: #69a02c;
  border: 1px solid #5a8c24;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  position: relative;
}
.kgv-order-help__btn::before {
  content: "?";
  position: absolute;
  left: 0.45em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #fff;
  color: #5a8c24;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  line-height: 1;
}
.kgv-order-help__btn:hover,
.kgv-order-help__btn:focus {
  background: #5c8d25;
  outline: 2px solid #69a02c;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  #ueberblick .ueberblick-floating-actions {
    position: fixed;
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 10055;
    margin: 0;
    padding: 0;
    width: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #ueberblick .ueberblick-floating-actions .kgv-voucher-fab-wrap {
    display: none !important;
  }
}

/* Hilfe-Modal */
.kgv-order-help-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.kgv-order-help-modal[hidden] {
  display: none;
}
.kgv-order-help-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 12, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.kgv-order-help-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 28px 28px 24px;
  text-align: left;
  animation: kgvHelpModalIn 0.18s ease-out;
}
@keyframes kgvHelpModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kgv-order-help-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #555;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kgv-order-help-modal__close:hover,
.kgv-order-help-modal__close:focus {
  background: #f1f4ec;
  color: #3d6a12;
  outline: none;
}
.kgv-order-help-modal__title {
  margin: 0 36px 12px 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #2b2b2b;
}
.kgv-order-help-modal__text {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}
.kgv-order-help-modal__email {
  margin: 0;
  font-size: 1rem;
  text-align: center;
}
.kgv-order-help-modal__email a {
  color: #3d6a12;
  font-weight: 700;
  text-decoration: underline;
  word-break: break-all;
}
body.kgv-order-help-open {
  overflow: hidden;
}
body.kgv-order-voucher-open {
  overflow: hidden;
}

/* Nachträglich Domain anpassen */
.kgv-btn-change-domain {
  display: inline-block;
  margin: 0 0 0 8px;
  padding: 0.25em 0.65em;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  color: #3d6a12;
  background: #f1f4ec;
  border: 1px solid #c5d4b0;
  border-radius: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.kgv-btn-change-domain:hover,
.kgv-btn-change-domain:focus {
  background: #e4ecd8;
  outline: 2px solid #69a02c;
  outline-offset: 1px;
}
.kgv-btn-change-domain--block {
  display: block;
  margin: 0.4em 0 0 0;
}
.kgv-summary-domain-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.25rem;
}
#ueberblick .ueberblick-meta-row,
#ueberblick .ueberblick-domain-row {
  font-size: inherit;
  line-height: inherit;
}
#ueberblick .ueberblick-domain-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  text-align: left;
  width: 100%;
}
#ueberblick .ueberblick-domain-row__line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  text-align: left;
}
#ueberblick .ueberblick-domain-row__line b {
  flex: 0 0 auto;
}
#ueberblick .ueberblick-domain-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: #1a1a1a;
  word-break: break-all;
}
#ueberblick .ueberblick-domain-row .kgv-btn-change-domain {
  flex: 0 0 auto;
  margin: 0;
  margin-left: auto;
  font-size: inherit;
  padding: 0.2em 0.5em;
}
#ueberblick #order-design-frame[hidden] {
  display: none !important;
}
#ueberblick #order-design-frame:not([hidden]) {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden; /* float-Kinder (#order-design-text / #order-design) einschließen */
  clear: both;
}
#ueberblick #ueberblick-domain-row[hidden] {
  display: none !important;
}
#ueberblick #ueberblick-domain-row:not([hidden]) {
  display: flex;
}
#shopyfy-main-frame #page6 .kgv-page6-design-preview {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 10px 0 12px 0;
  box-sizing: border-box;
}
#shopyfy-main-frame #page6 .kgv-page6-design-preview[hidden] {
  display: none !important;
}
#shopyfy-main-frame #page6 #page6-design-summary:not([hidden]) b,
#shopyfy-main-frame #page6 #page6-domain-summary:not([hidden]) .kgv-summary-domain-line b,
#shopyfy-main-frame #page6 #page6-domain-summary:not([hidden]) #summery_domain,
#shopyfy-main-frame #page6 #page6-domain-summary:not([hidden]) #summery_domain_authinfo_outer {
  font-size: inherit;
  line-height: inherit;
}

#shopyfy-main-frame::after {
  content: "";
  display: table;
  clear: both;
}
#shopyfy-main-frame .middle {
  text-align: left;
  width: calc(100% - 30px);
  padding:15px;
  float: left;
  position: relative;
}
#shopyfy-main-frame .left {
  text-align: left;
  width: 70%;
  padding:15px;
  float: left;
  position: relative;
}
#shopyfy-main-frame .left h2 {
  text-align: left;
  font-family: "Lato-black";
}

#shopyfy-main-frame .left .aktion {
  width: 100%;
  padding: 30px;
  background-color: #eceff1;
  color: #000;
  margin-top: 20px;
  margin-bottom: 20px;

}
#shopyfy-main-frame .left .text {
  margin-bottom: 20px;
}
#shopyfy-main-frame .right {
  text-align: left;
  width: 29%;
  margin-left:1%;
  float: left;
  border-left: 0.5px solid black;
  padding:15px;
  position: relative;

}
#shopyfy-main-frame .right h3 {
  font-size: 18px;
  text-align: left;
  font-family: "Lato-black";
}

/* Dankeseite (Schritt 7, Video „Herzlichen Glückwunsch“): Bestellübersicht ausblenden */
#shopyfy-main-frame #page7[style*="block"] ~ #ueberblick {
  display: none !important;
}

/* Bestellübersicht: typische Sidebar, mobil separat (fixiert) gestylt */
#ueberblick .ueberblick-inner {
  display: block;
}
#ueberblick .ueberblick-heading {
  font-size: 18px;
  text-align: left;
  font-family: "Lato-black", sans-serif;
  display: block;
  margin: 0;
  padding: 0 0 10px 0;
  box-sizing: border-box;
}
#ueberblick .ueberblick-body {
  display: block;
}
#ueberblick .ueberblick-thumb {
  display: block;
  width: 70%;
  max-width: 100%;
  height: auto;
  margin: 0 0 0.5em 0;
}
#ueberblick .ueberblick-text {
  display: block;
}
#ueberblick .ueberblick-price-line {
  margin: 0 0 0.4em 0;
  display: block;
}
/* Produktzeile + Monatspreis in einem gemeinsamen Kasten */
#ueberblick .ueberblick-cart-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background: #fafaf8;
  box-sizing: border-box;
}
#ueberblick .ueberblick-cart-box .kgv-sidebar-product {
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
}
#ueberblick .ueberblick-cart-box #kgv_sidebar_monthly {
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.3;
  color: inherit;
}
#ueberblick .ueberblick-invoices {
  display: block;
  margin: 0.3em 0 0 0;
}
#ueberblick .ueberblick-invoices .ueberblick-invoice-1,
#ueberblick .ueberblick-invoices .ueberblick-invoice-2 {
  display: block;
  margin: 0.2em 0 0 0;
}
#ueberblick .ueberblick-vat {
  display: block;
  margin: 0.4em 0 0 0;
}
#ueberblick #voucher-frame {
  margin: 0.3em 0 0.3em 0;
}
#shopyfy-footer {
  display:block;
}
#process-frame {
  height: 50px;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: visible;
}
#shopyfy-main-frame #progress-bar {
  overflow: visible;
}

#process-frame #process-line {
  width: 90%;
  margin-top: 23px;
  border-top: 1px solid #000;
  margin: auto auto;
}
#process-frame #process-line-1 {
  width: 0%;
  margin-top: 23px;
  padding-top:7px;
  border-top: 4px solid #69a02c;
  margin-left: 5%;
  margin-top: -2px;
}

#process-frame #process-point-1, #process-frame #process-point-2, #process-frame #process-point-3, #process-frame #process-point-4, #process-frame #process-point-5, #process-frame #process-point-6, #process-frame #process-point-7 {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  position: absolute;
  color: #fff;
  text-align: center;
  background-color: #000;
  font-size: 26px;
  font-family: "Lato-Bold";

}
#process-frame #process-point-1 {
  left:5%;
  top:-20px;
  background-color: #69a02c;
padding-top:7px;
}
#process-frame #process-point-2 {
  left:20%;
  top:-20px;
padding-top:7px;
}
#process-frame #process-point-3 {
  left:35%;
  top:-20px;
padding-top:7px;
}
#process-frame #process-point-4 {
  left:50%;
  top:-20px;
padding-top:7px;
}
#process-frame #process-point-5 {
  left:65%;
  top:-20px;
padding-top:7px;
}
#process-frame #process-point-6 {
  left:80%;
  top:-20px;
padding-top:7px;
}
#process-frame #process-point-7 {
  left:95%;
  top:-20px;
padding-top:7px;
}
#button {
  background-color: #69a02c;
  padding: 20px 40px 20px 40px;
  color: #fff;
  font-size: 16px;
  font-family: 'Lato-Bold';
  border-radius: 10px;
  width: fit-content;
  height: 55px;
  border: none !important;
  line-height: 1 !important;
  right: 15px;
  transition: transform .2s;
  position: absolute;
  bottom:0;

}
#button:hover {
  transform: scale(1.2);
  cursor: pointer;
  background-color: #88cc3a;
}
#button-kaufen {
  background-color: #69a02c;
  padding: 20px 40px 20px 40px;
  color: #fff;
  font-size: 16px;
  font-family: 'Lato-Bold';
  border-radius: 10px;
  width: fit-content;
  height: 55px;
  border: none !important;
  line-height: 1 !important;
  right: 15px;
  transition: transform .2s;
  position: absolute;
  bottom:0;

}
#button-kaufen:hover {
  transform: scale(1.2);
  cursor: pointer;
  background-color: #88cc3a;
}
#wird-gekauft {
  padding: 20px 40px 20px 40px;
  color: #000;
  font-size: 16px;
  font-family: 'Lato-Bold';

  width: fit-content;
  height: 55px;
  border: none !important;
  line-height: 1 !important;
  right: 15px;
  position: absolute;
  bottom:0;
  display: none;
}
#button-center {
  background-color: #69a02c;
  padding: 20px 40px 20px 40px;
  color: #fff;
  font-size: 16px;
  font-family: 'Lato-Bold';
  border-radius: 10px;
  width: fit-content;
  height: 55px;
  border: none !important;
  line-height: 1 !important;
  margin: auto;
  transition: transform .2s;
  bottom:0;

}
#button-center:hover {
  transform: scale(1.2);
  cursor: pointer;
  background-color: #88cc3a;
}
#button-back {
  background-color: #eee;
  padding: 20px 40px 20px 40px;
  color: #000;
  font-size: 16px;
  font-family: 'Lato-Bold';
  border-radius: 10px;
  width: fit-content;
  height: 55px;
  border: none !important;
  line-height: 1 !important;
  left: 15px;
  transition: transform .2s;
  position: absolute;
  bottom:-25px;
}
#button-back:hover {
  transform: scale(1.2);
  cursor: pointer;
  background-color: #eee;
}
.unterstrich {
  border-bottom: 2px solid #000;
}
.unterstrich-doppel {
  border-bottom: 4px solid #000;
  border-style: double;
}
#shopyfy-main-frame .left .inhalt {
  margin-bottom: 60px!important;
}

/* weiter / zurück: einheitliche Leiste wie Zahlung (alle Schritte) */
.kgv-order-step-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.75rem;
  clear: both;
}
#shopyfy-main-frame .left .kgv-order-step-actions #button,
#shopyfy-main-frame .left .kgv-order-step-actions #button-kaufen {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  float: none !important;
  flex: 1 1 0;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto;
  min-height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shopyfy-main-frame .left .kgv-order-step-actions #button-back {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  float: none !important;
  flex: 1 1 0;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto;
  min-height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shopyfy-main-frame .left .kgv-order-step-actions > #button:only-child,
#shopyfy-main-frame .left .kgv-order-step-actions > #button-kaufen:only-child {
  flex: 1 1 100%;
  max-width: 100%;
}
#shopyfy-main-frame .left .kgv-order-step-actions > #button-back:only-child {
  flex: 1 1 100%;
  max-width: 100%;
}
#process-point-1 .description, #process-point-2 .description, #process-point-3 .description, #process-point-4 .description, #process-point-5 .description, #process-point-6 .description, #process-point-7 .description {
  position: absolute;
  width: 110px;
  min-height: 26px;
  margin: 0;
  margin-top: -59px;
  text-align: center;
  left: 50%;
  margin-left: -55px;
  font-size: 16px;
  color: #000;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
#shopyfy-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
#video-player {
  display: none;
}
#shopyfy-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
  object-position: center;
  position: fixed;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.distance-1 {
  height: 60px;
  width: 100%;
}

.middle h2 {text-align: center;}
.middle .inhalt {text-align: center; font-weight: 600; color: #000;}

#service-frame {
    width: 100%;
    display: flex;
    align-items: stretch;
    align-content: center;
    gap: 10px;
  }
  #service-frame .auswahl #kreis1, #service-frame .auswahl #kreis2, #service-frame .auswahl #kreis3{
    width:30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    border: 2px solid #eee;
    margin: auto;
    position: relative;
  }
  #service-frame .auswahl #kreis1 #haken1, #service-frame .auswahl #kreis2 #haken2, #service-frame .auswahl #kreis3 #haken3 {
    width: 38px;
    height: 35px;
    background-image: url("../Resources/haken-spitz.svg");
    background-size: cover;
    margin-top: -10px;
    margin-left: 2px;
  }

  #service-frame .service {
    width: calc(33.33%);
    min-height: 300px;
    padding: 5px;
    border: 2px solid #ccc9c9;
    border-radius: 5px;
  }
  #service-frame .service:hover {
    border: 2px solid #eee;
    background-color: #eee;
  }
  #service-frame .service h4 {
    font-size: 16px;
    font-family: "Lato-Black";
    text-align: center;
    padding-top: 10px !important;
  }
  #service-frame .service .text {
    font-size: 14px;

  }
  #service-frame .service .text ul {
    list-style: disc;
  }

  #service-frame .service .text ul li {
    margin-left: 18px;
  }
  #ueberblick #order-design-frame[hidden] {
    display: none !important;
  }
  #ueberblick #order-design-frame:not([hidden]) {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
    overflow: hidden;
    clear: both;
  }
  #ueberblick #order-design-text,
  #ueberblick #order-design {
    float: left;
    text-align: left;
  }
  #ueberblick #order-design-text {
    margin-right: 5px;
  }

  .domain-frame {
    width:100%;
    position: relative;
    float: left;
    margin-bottom: 0;
  }
  .domain-frame input {
    height: 64px;
    border: 1px solid #666;
  }


  .domain-name {width:calc(100% - 150px); float: left; }
  #domain-search {
    width: 150px;
  float: left;
  background-color: #69a02c;
  padding: 20px;
  color: #fff;
  margin-top: 24px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
  font-family: "Lato-Black";

  }
  #domain-search:hover {
    background-color: #88cc3a;
    cursor: pointer;
  }

  /* Floats von .domain-name / #domain-search beenden, dann Lade- und Statuszeilen direkt unter dem Button */
  .domain-loader-below,
  .domain-status-below {
    clear: both;
    width: 100%;
    float: left;
    box-sizing: border-box;
  }
  .domain-loader-below {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
  }
  .domain-status-below {
    margin-top: 10px;
  }

  .domain-hint {
    padding: 20px;
      color: #666;
      position: relative;
      float: left;
      width: 100%;
      border-radius: 10px;
      margin-top: 20px;
      margin-bottom: 25px;
      display: flex;
      background-color: #eceff1;
  }
  .domain-hint-left {
    width: 100px;
    float: left;
    font-size: 30px;
  }
  .domain-hint-right {
    width: calc(100% - 100px);
    float: left;
  }
  #damain-status {
    /* display: none; */
    margin-bottom: 60px;
  }
#domain-result-not-good, #domain-result-good, #domain-customer-has-authinfo {
    display: none;
  padding: 20px;
  color: #fff;
  position: relative;
  float: left;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 25px;
  
  }
  #domain-result-not-good {
    background-color: #f57272;
  }
  #domain-result-good {
    background-color: #59af63db;
  }
  #domain-customer-has-authinfo {
    background-color: #d89b40db;
  }
  input[type='checkbox'] {
    height: inherit;
  }

  #domain-loader{
      text-align:center;
      display:none;
  }
  #domain-loader img{
      width:80px;
  }
  .error-msg {
    width: 100%;
    margin-bottom: 10px;
    color:red;
  }
.musthave {color: red;}

/* Schritt 6: AGB / Datenschutz (Links im Label) */
#shopyfy-main-frame #page6 .inhalt a.kgv-legal-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
#shopyfy-main-frame #page6 .inhalt a.kgv-legal-link:hover,
#shopyfy-main-frame #page6 .inhalt a.kgv-legal-link:focus {
  text-decoration: underline;
  opacity: 0.92;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

input#customer_domain_authinfo {
  max-width: 200px;
}

/* --- Responsive layout: alle Objekte unverändert, nur Anpassung für Tablet & Mobile --- */
#shopyfy-main-frame .left,
#shopyfy-main-frame .right,
#shopyfy-main-frame .middle,
#shopyfy-main-frame .domain-frame,
#shopyfy-main-frame .domain-hint,
#shopyfy-main-frame input,
#shopyfy-main-frame textarea,
#shopyfy-main-frame select {
  box-sizing: border-box;
  max-width: 100%;
}

/* Tablet: schmalere Seitenspalte, Design-Karten in zwei Spalten */
@media (max-width: 1024px) {
  #shopyfy-main-frame .left {
    width: 62%;
    padding: 12px;
  }
  #shopyfy-main-frame .right {
    width: 36%;
    margin-left: 2%;
    padding: 12px;
  }
  #shopyfy-main-frame .middle {
    width: calc(100% - 24px);
    padding: 12px;
  }
  #service-frame {
    flex-wrap: wrap;
  }
  #service-frame .service {
    width: calc(50% - 5px);
    min-height: 280px;
  }
  #shopyfy-header-1 img {
    margin-left: 0;
  }
  #process-frame #process-point-1,
  #process-frame #process-point-2,
  #process-frame #process-point-3,
  #process-frame #process-point-4,
  #process-frame #process-point-5,
  #process-frame #process-point-6,
  #process-frame #process-point-7 {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    font-size: 22px;
  }
  #process-frame #process-line-1 {
    margin-left: 5%;
  }
}

/* Mobile / Touch: max-width 1023px = inkl. Telefon-Querformat (z. B. iPhone 12 Pro ~844px); Desktop ab 1024px */
/* Hinweis: Im Theme muss <meta name="viewport" content="width=device-width, initial-scale=1"> gesetzt sein. */
@media (max-width: 1023px) {
  #shopyfy-main-frame {
    display: flex;
    flex-direction: column;
    /* Scrollbereich: Footer (--kgv-trust-footer-h enthält bereits safe-area unten am Footer) */
    padding-bottom: calc(var(--kgv-trust-footer-h) + var(--kgv-mobile-ueberblick-inner-reserve));
  }
  #shopyfy-main-frame::after {
    display: none;
  }
  #shopyfy-main-frame .left,
  #shopyfy-main-frame .right,
  #shopyfy-main-frame .middle {
    width: 100%;
    float: none;
    margin-left: 0;
  }
  #shopyfy-main-frame #progress-bar {
    order: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2.4rem 10px 4px 10px;
    margin: 0;
    overflow: visible;
  }
  #shopyfy-main-frame #ueberblick {
    position: fixed;
    left: 0;
    right: 0;
    /* Direkt auf die Link-Leiste; --kgv-trust-footer-h = sichtbare Footer-Höhe von unten (kein doppeltes safe-area) */
    bottom: var(--kgv-trust-footer-h);
    z-index: 10049;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    float: none;
    order: 9999;
    border: none;
    border-top: 1px solid #222;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    overflow: visible;
  }
  #ueberblick .ueberblick-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    max-height: none;
    flex: none;
    padding: 4px 10px 4px 10px;
    justify-content: flex-start;
  }
  /* Mobil: Hilfe wie Desktop oben rechts im Viewport (nicht in der fixierten Leiste) */
  #ueberblick .ueberblick-floating-actions {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: calc(10px + env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 10055 !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }
  #ueberblick .ueberblick-heading {
    flex: 0 0 auto;
    font-size: 5px;
    line-height: 1.1;
    margin: 0;
    /* Abstand unten: Padding statt margin — funktioniert zuverlässig in Flex + overflow */
    padding: 0 0 6px 0;
    width: 100%;
    display: block;
    box-sizing: border-box;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #555;
  }
  #ueberblick .ueberblick-body {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    /* optischer Trennraum von der Zeile oben, falls Padding der Überschrift geclippt würde */
    padding-top: 0;
  }
  #ueberblick .ueberblick-thumb {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 72px;
    max-height: 78px;
    height: auto;
    object-fit: contain;
    margin: 0;
  }
  #ueberblick .ueberblick-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1.2;
    font-size: 12px;
    overflow: hidden;
  }
  #ueberblick .ueberblick-price-line {
    margin: 0 0 2px 0;
    min-width: 0;
    display: block;
  }
  #ueberblick .ueberblick-cart-box {
    gap: 0.25rem;
    padding: 0.35rem 0.45rem;
    font-size: 12px;
  }
  #ueberblick .ueberblick-cart-box .kgv-sidebar-product {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
  }
  #ueberblick .ueberblick-cart-box #kgv_sidebar_monthly {
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ueberblick .ueberblick-invoices {
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 0;
    font-size: 12px;
    line-height: 1.2;
  }
  #ueberblick .ueberblick-invoice-1,
  #ueberblick .ueberblick-invoice-2 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ueberblick .ueberblick-vat {
    margin: 3px 0 0 0;
    font-size: 10px;
    line-height: 1.15;
    opacity: 0.9;
  }
  #ueberblick .ueberblick-vat em {
    font-style: normal;
  }
  #ueberblick #voucher-frame {
    margin: 0 0 2px 0;
    font-size: 11px;
    line-height: 1.2;
    max-height: 3.5em;
    overflow: hidden;
  }
  #ueberblick #order-design-frame[hidden] {
    display: none !important;
  }
  #ueberblick #order-design-frame:not([hidden]) {
    float: none;
    width: 100% !important;
    margin: 0 0 2px 0;
    min-height: 0;
    max-height: 3.5em;
    overflow: hidden;
    font-size: inherit;
    line-height: 1.2;
  }
  #ueberblick #order-design-text,
  #ueberblick #order-design {
    float: none;
    display: inline;
  }
  #shopyfy-main-frame .left,
  #shopyfy-main-frame #page7 {
    order: 2;
  }
  /* 7 Kreise, gleichmäßig in 100% — 10px Rand v.l./v.r. im #progress-bar; Linie in Kreismitte (horizontal) */
  #process-frame {
    --pb-dot: 26px;
    /* Kreis oben, Mitte: top + d/2 = -5px bei 26px & top -18px */
    --pb-dots-top: -18px;
    /* obere Kante 1px-Linie, Mitte des Strichs = Kreismitte */
    --pb-line-top: calc(var(--pb-dots-top) + var(--pb-dot) / 2 - 0.5px);
    /* 4px grüne Kante, Mitte = Kreismitte: Box-obere Kante = Mitte - 2px */
    --pb-line1-top: calc(var(--pb-dots-top) + var(--pb-dot) / 2 - 2px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #process-frame #process-line,
  #process-frame #process-line-1 {
    position: absolute;
    z-index: 0;
  }
  #process-frame #process-line {
    top: var(--pb-line-top);
    left: calc(var(--pb-dot) / 2);
    right: calc(var(--pb-dot) / 2);
    width: auto;
    max-width: none;
    height: 0;
    margin: 0;
  }
  #process-frame #process-line-1 {
    top: var(--pb-line1-top);
    left: calc(var(--pb-dot) / 2);
    width: 0%;
    margin: 0;
    padding-top: 0;
    z-index: 1;
  }
  #process-frame #process-point-1,
  #process-frame #process-point-2,
  #process-frame #process-point-3,
  #process-frame #process-point-4,
  #process-frame #process-point-5,
  #process-frame #process-point-6,
  #process-frame #process-point-7 {
    position: absolute;
    box-sizing: border-box;
    width: var(--pb-dot);
    height: var(--pb-dot);
    border-radius: calc(var(--pb-dot) / 2);
    font-size: 15px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    top: var(--pb-dots-top);
    z-index: 2;
  }
  #process-frame #process-point-1 {
    left: calc(0 * (var(--pb-dot) + (100% - (7 * var(--pb-dot))) / 6));
    background-color: #69a02c;
  }
  #process-frame #process-point-2 {
    left: calc(1 * (var(--pb-dot) + (100% - (7 * var(--pb-dot))) / 6));
  }
  #process-frame #process-point-3 {
    left: calc(2 * (var(--pb-dot) + (100% - (7 * var(--pb-dot))) / 6));
  }
  #process-frame #process-point-4 {
    left: calc(3 * (var(--pb-dot) + (100% - (7 * var(--pb-dot))) / 6));
  }
  #process-frame #process-point-5 {
    left: calc(4 * (var(--pb-dot) + (100% - (7 * var(--pb-dot))) / 6));
  }
  #process-frame #process-point-6 {
    left: calc(5 * (var(--pb-dot) + (100% - (7 * var(--pb-dot))) / 6));
  }
  #process-frame #process-point-7 {
    left: calc(6 * (var(--pb-dot) + (100% - (7 * var(--pb-dot))) / 6));
  }
  #process-frame .description {
    display: none;
  }
  #service-frame .service {
    width: 100%;
    min-height: 0;
  }
  .domain-name {
    width: 100%;
    float: none;
  }
  #domain-search {
    width: 100%;
    float: none;
    margin-top: 8px;
    border-radius: 10px;
  }
  #order-design-text,
  #order-design {
    float: none;
  }
  #ueberblick #order-design-frame:not([hidden]) {
    display: block;
  }
  #shopyfy-main-frame .left,
  #shopyfy-main-frame .right,
  #shopyfy-main-frame .middle {
    padding: 10px;
  }
  #shopyfy-main-frame .left .aktion {
    padding: 16px;
  }
  .domain-hint {
    flex-direction: column;
  }
  .domain-hint-left,
  .domain-hint-right {
    width: 100%;
    float: none;
  }
  #shopyfy-header-1 a img {
    max-width: min(200px, 100%);
    height: auto;
  }
  #shopyfy-main-frame .left {
    position: relative;
    padding-bottom: 24px;
  }
  #shopyfy-main-frame .left .inhalt {
    margin-bottom: 16px;
  }
  #button,
  #button-kaufen {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    margin: 8px 0 0 0;
    right: auto;
    left: auto;
    text-align: center;
  }
  /* #wird-gekauft: nicht wie ein Button einblenden; bleibt unsichtbar bis ggf. nach Server-Erfolg */
  #wird-gekauft {
    position: static;
    display: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 8px 0 0 0;
    right: auto;
    left: auto;
    text-align: center;
  }
  #button-back {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    margin: 0 0 0 0;
    bottom: auto;
    left: auto;
    text-align: center;
  }
  #button:hover,
  #button-kaufen:hover,
  #button-back:hover {
    transform: none;
  }
  #domain-result-good #button {
    margin: 8px 0 0 0;
    right: auto;
  }
  #button-center {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    height: auto;
    min-height: 48px;
  }
  #shopyfy-main-frame .left .inhalt {
    margin-bottom: 24px !important;
  }
  input#customer_domain_authinfo {
    max-width: 100%;
  }

  /* Platz unter Schritt-Inhalten (über fixierter Bestellübersicht + Footer scrollbar) */
  #shopyfy-main-frame #page1.left,
  #shopyfy-main-frame #page2.left,
  #shopyfy-main-frame #page3.left,
  #shopyfy-main-frame #page4.left,
  #shopyfy-main-frame #page5.left {
    box-sizing: border-box;
    padding-bottom: calc(var(--kgv-trust-footer-h) + 9rem);
  }
  #shopyfy-main-frame #page6.left {
    box-sizing: border-box;
    padding-bottom: calc(var(--kgv-trust-footer-h) + 10rem);
  }

  /* Bestellübersicht schmal: lange Domain mit ellipsis, ändern bleibt rechts (eine Zeile) */
  #ueberblick .ueberblick-domain-row__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Vollbild-Ladezustand zwischen Bestellschritten (AJAX) – über #ueberblick (10050) */
#kgv-order-step-loader {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px 16px;
  pointer-events: none;
}

#kgv-order-step-loader.kgv-order-step-loader--visible {
  display: flex;
  pointer-events: auto;
}

.kgv-order-step-loader__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.kgv-order-step-loader__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 20rem;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.kgv-order-step-loader__spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 0.75rem;
  border: 3px solid #e0e0e0;
  border-top-color: #69a02c;
  border-radius: 50%;
  animation: kgv-order-step-loader-spin 0.75s linear infinite;
}

.kgv-order-step-loader__text {
  margin: 0;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #333;
}

@keyframes kgv-order-step-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Gutschein: Bestellübersicht (Desktop) + Schritt Zahlung (Mobil, .kgv-voucher-page5-mobile-only) */
.kgv-voucher-apply {
  max-width: 32rem;
  margin: 0 auto 1rem;
  text-align: left;
}
.kgv-voucher-apply--ueberblick {
  max-width: none;
  margin: 1rem 0 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.kgv-voucher-apply label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.kgv-voucher-apply__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.kgv-voucher-apply .kgv-voucher-field__input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  box-sizing: border-box;
}
.kgv-voucher-apply__btn {
  padding: 0.5rem 0.9rem;
  font: inherit;
  cursor: pointer;
  color: #fff;
  background: #69a02c;
  border: 1px solid #5a8c24;
  border-radius: 4px;
}
.kgv-voucher-apply__btn:hover {
  background: #5a8c24;
}

@media (min-width: 1024px) {
  #ueberblick .kgv-voucher-apply--ueberblick .kgv-voucher-apply__row {
    align-items: stretch;
  }
  #ueberblick .kgv-voucher-apply--ueberblick .kgv-voucher-field__input {
    height: 2.625rem;
    min-height: 2.625rem;
    box-sizing: border-box;
    padding: 0 0.65rem;
    line-height: 2.625rem;
  }
  #ueberblick .kgv-voucher-apply--ueberblick .kgv-voucher-apply__btn {
    height: 2.625rem;
    min-height: 2.625rem;
    box-sizing: border-box;
    padding: 0 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: auto;
    line-height: 1;
  }
}

/* Gutschein mobil: Eingabe nur in #page5; Desktop: Sidebar in #ueberblick */
#page5 .kgv-voucher-page5-mobile-only {
  display: none !important;
}
@media (max-width: 1023px) {
  .kgv-voucher-sidebar--desktop-only {
    display: none !important;
  }
  #page5 .kgv-voucher-page5-mobile-only {
    display: block !important;
    max-width: 32rem;
    margin: 0 0 1rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
  /* Gutschein: Eingabe und Einlösen gleiche Höhe */
  #page5 .kgv-voucher-page5-mobile-only .kgv-voucher-apply__row {
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  #page5 .kgv-voucher-page5-mobile-only .kgv-voucher-field__input {
    flex: 1 1 10rem;
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: 0 0.65rem;
    line-height: 1.2;
    align-self: stretch;
    display: block;
    border-radius: 4px;
  }
  #page5 .kgv-voucher-page5-mobile-only .kgv-voucher-apply__btn {
    flex: 0 0 auto;
    height: 2.75rem;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: 0 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-radius: 4px;
  }
}

/* Gutschein-Modal (analog Hilfe) */
.kgv-voucher-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.kgv-voucher-modal[hidden] {
  display: none;
}
.kgv-voucher-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 12, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.kgv-voucher-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 28px 28px 24px;
  text-align: left;
  animation: kgvHelpModalIn 0.18s ease-out;
}
.kgv-voucher-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #555;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kgv-voucher-modal__close:hover,
.kgv-voucher-modal__close:focus {
  background: #f1f4ec;
  color: #3d6a12;
  outline: none;
}
.kgv-voucher-modal__title {
  margin: 0 36px 16px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2b2b2b;
}
.kgv-voucher-apply--modal {
  margin: 0 auto;
}

/* Gutschein-Feedback: Erfolg / Nicht erfolgreich (Schritt Zahlung) */
.kgv-voucher-message.kgv-voucher-feedback {
  display: block;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem 0.9rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.45;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
}

.kgv-voucher-feedback__title {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.kgv-voucher-feedback__detail {
  display: block;
  font-weight: 600;
}

.kgv-voucher-feedback--success {
  color: #1a3d0f;
  background: linear-gradient(180deg, #e8f6e0 0%, #dff0d4 100%);
  border-color: #69a02c;
  box-shadow: 0 2px 8px rgba(105, 160, 44, 0.2);
}

.kgv-voucher-feedback--success .kgv-voucher-feedback__title {
  color: #2d5016;
}

.kgv-voucher-feedback--error {
  color: #5c1010;
  background: linear-gradient(180deg, #fdecea 0%, #fad4d1 100%);
  border-color: #c44;
  box-shadow: 0 2px 8px rgba(180, 40, 40, 0.15);
}

.kgv-voucher-feedback--error .kgv-voucher-feedback__title {
  color: #8b1818;
}

.kgv-voucher-feedback--loading {
  color: #444;
  background: #f4f4f4;
  border-color: #ccc;
  font-weight: 600;
}

.kgv-voucher-feedback--loading .kgv-voucher-feedback__title,
.kgv-voucher-feedback--loading .kgv-voucher-feedback__detail {
  display: none;
}

.kgv-voucher-summary {
  text-align: left;
}

.kgv-reverse-notice {
  text-align: left;
  font-size: 0.9em;
  line-height: 1.4;
  margin: 0 0 0.75rem 0;
  padding: 0.65rem 0.75rem;
  background: #f5f5f0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Checkout: Vertrauens-Footer (Mobil: unter fixierter Bestellübersicht — näher am unteren Viewport-Rand) */
:root {
  /*
   * Gesamthöhe der Link-Leiste von der Viewport-Unterkante (border-top + Padding + Textzeile + unteres Padding inkl. Safe-Area).
   * Muss mit .kgv-checkout-trust-footer übereinstimmen — #ueberblick bottom = derselbe Wert, damit bündig anliegt.
   */
  --kgv-trust-footer-h: calc(18px + env(safe-area-inset-bottom, 0px));
  /* Reserver für Haupt-Scrollfläche (mobil) */
  --kgv-mobile-ueberblick-inner-reserve: 9rem;
}
.kgv-checkout-trust-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10048;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 2px 8px;
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
@media (max-width: 1023px) {
  /* Footer an die physische Unterkante; Safe-Area steckt im unteren Padding (kein zusätzlicher bottom-Offset) */
  .kgv-checkout-trust-footer {
    bottom: 0;
  }
  #shopyfy-main-frame:has(#page7[style*="block"]) .kgv-checkout-trust-footer {
    bottom: 0;
  }
  #shopyfy-main-frame:has(#page7[style*="block"]) {
    padding-bottom: calc(var(--kgv-trust-footer-h) + 16px);
  }
}
@media (min-width: 1024px) {
  /* Scrollbereich: nicht hinter fixierter Leiste verschwinden */
  #shopyfy-main-frame {
    padding-bottom: var(--kgv-trust-footer-h);
  }
}
.kgv-checkout-trust-footer__inner {
  max-width: 960px;
  margin: 0 auto;
}
.kgv-checkout-trust-footer__inner nav {
  margin-block: 0;
}
.kgv-checkout-trust-footer__links {
  margin: 0;
  padding: 0;
  font-size: 0.625rem;
  line-height: 1.2;
  color: #333;
  text-align: center;
}
.kgv-checkout-trust-footer__line {
  margin: 0;
  padding: 0;
}
.kgv-checkout-trust-footer__sep {
  display: inline-block;
  padding: 0 0.28em;
  color: #999;
}
.kgv-checkout-trust-footer__links a {
  color: #4a7618;
  font-weight: 600;
}
.kgv-checkout-trust-footer__links a:hover,
.kgv-checkout-trust-footer__links a:focus {
  text-decoration: underline;
  outline: 2px solid #69a02c;
  outline-offset: 2px;
}