@font-face {
  font-family: Social Icons Font;
  src: url('../fonts/social-icon-font.woff2') format("woff2"), url('../fonts/social-icon-font.eot') format("embedded-opentype"), url('../fonts/social-icon-font.woff') format("woff"), url('../fonts/social-icon-font.ttf') format("truetype"), url('../fonts/social-icon-font.svg') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Line Square Icons;
  src: url('../fonts/line-square-icons.woff2') format("woff2"), url('../fonts/line-square-icons.eot') format("embedded-opentype"), url('../fonts/line-square-icons.woff') format("woff"), url('../fonts/line-square-icons.ttf') format("truetype"), url('../fonts/line-square-icons.svg') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Filled Icons;
  src: url('../fonts/filled-icon-font.woff2') format("woff2"), url('../fonts/filled-icon-font.eot') format("embedded-opentype"), url('../fonts/filled-icon-font.woff') format("woff"), url('../fonts/filled-icon-font.ttf') format("truetype"), url('../fonts/filled-icon-font.svg') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Line Rounded Icons;
  src: url('../fonts/line-rounded-icons.woff2') format("woff2"), url('../fonts/line-rounded-icons.eot') format("embedded-opentype"), url('../fonts/line-rounded-icons.woff') format("woff"), url('../fonts/line-rounded-icons.ttf') format("truetype"), url('../fonts/line-rounded-icons.svg') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Arrow BTN;
  src: url('../fonts/arrow.woff') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Onest;
  src: url('../fonts/Onest-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Onest;
  src: url('../fonts/Onest-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Onest;
  src: url('../fonts/OnestBold1602-hint.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --neutral--200: #FCF9F4;
  --neutral--700: #2A4836;
  --neutral--800: #112d1d;
  --accent--primary-1: #9dbc76;
  --secondary--color-1: #112D1D;
  --neutral--100: white;
  --radius--very-small: 8px;
  --secondary--color-2: #FCF9F4;
  --neutral--400: #CFD0CC;
  --general--shadow-01: #14142b0f;
  --neutral--300: #F0EDEB;
  --radius--standart: 12px;
  --neutral--500: #9CA29B;
  --neutral--600: #527766;
  --system--green-400: #11845b;
  --system--blue-400: #086cd9;
  --system--blue-300: #1d88fe;
  --system--blue-200: #8fc3ff;
  --system--blue-100: #eaf4ff;
  --system--green-300: #05c168;
  --system--green-200: #7fdca4;
  --system--green-100: #def2e6;
  --system--red-400: #dc2b2b;
  --system--300: #ff5a65;
  --system--red-200: #ffbec2;
  --system--red-100: #ffeff0;
  --system--orange-400: #d5691b;
  --system--orange-300: #ff9e2c;
  --system--orange-200: #ffd19b;
  --system--orange-100: #fff3e4;
  --general--shadow-02: #14142b14;
  --general--shadow-03: #14142b1a;
  --general--shadow-04: #14142b24;
  --general--shadow-05: #14142b29;
  --general--shadow-06: #14142b3d;
  --button-shadow--color-01: #9DBC760f;
  --button-shadow--color-2: #9DBC7614;
  --button-shadow--color-03: #9DBC761f;
  --button-shadow--white-01: #14142b0a;
  --button-shadow--white-02: #14142b0f;
  --button-shadow--white-03: #14142b1a;
  --accent--primary-1-hover: #b5cd92;
  --radius--small: 10px;
  --radius--big: 14px;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}

.w-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}

.w-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}

.w-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}

.w-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}

.w-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}

.w-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}

.w-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

.w-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}

.w-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}

.w-commerce-commerceboldtextblock {
  font-weight: 700;
}

.w-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}

.w-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutcardnumber:focus, .w-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutcardexpirationdate:focus, .w-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutcardsecuritycode:focus, .w-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}

.w-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}

.w-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}

.w-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}

.w-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}

.w-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}

.w-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}

.w-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}

.w-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}

.w-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}

.w-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}

.w-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutsummarylineitem, .w-commerce-commercecheckoutordersummaryextraitemslistitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

.w-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}

.w-commerce-commercecheckoutdiscounts {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  flex-wrap: wrap;
  padding: 20px;
  display: flex;
}

.w-commerce-commercecheckoutdiscountslabel {
  flex-basis: 100%;
  margin-bottom: 8px;
}

.w-commerce-commercecheckoutdiscountsinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  flex: 1;
  width: auto;
  min-width: 0;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutdiscountsinput::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutdiscountsinput:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutdiscountsbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  height: 38px;
  margin-left: 8px;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}

.w-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}

.w-commerce-commercecartapplepaybutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #000;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  height: 38px;
  min-height: 30px;
  margin-bottom: 8px;
  padding: 0;
  text-decoration: none;
  display: flex;
}

.w-commerce-commercecartapplepayicon {
  width: 100%;
  height: 50%;
  min-height: 20px;
}

.w-commerce-commercecartquickcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #000;
  border-width: 0;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  height: 38px;
  margin-bottom: 8px;
  padding: 0 15px;
  text-decoration: none;
  display: flex;
}

.w-commerce-commercequickcheckoutgoogleicon, .w-commerce-commercequickcheckoutmicrosofticon {
  margin-right: 8px;
  display: block;
}

.w-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}

.w-commerce-commerceaddtocartoptionpillgroup {
  margin-bottom: 10px;
  display: flex;
}

.w-commerce-commerceaddtocartoptionpill {
  color: #000;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #000;
  margin-right: 10px;
  padding: 8px 15px;
}

.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected {
  color: #fff;
  background-color: #000;
}

.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}

.w-commerce-commerceaddtocartquantityinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commerceaddtocartquantityinput::placeholder {
  color: #999;
}

.w-commerce-commerceaddtocartquantityinput:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}

.w-commerce-commerceaddtocartbutton.w--ecommerce-add-to-cart-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}

.w-commerce-commercebuynowbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  margin-top: 10px;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

.w-commerce-commercebuynowbutton.w--ecommerce-buy-now-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}

.w-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}

.w-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}

.w-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}

.w-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.w-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutsummaryitem, .w-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}

.w-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}

.w-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}

.w-commerce-commercecheckoutshippingsummarywrapper, .w-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}

.w-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}

.w-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

.w-pagination-wrapper {
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.w-pagination-previous, .w-pagination-next {
  color: #333;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 9px 20px;
  font-size: 14px;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }

  .w-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }

  .w-layout-blockcontainer {
    max-width: none;
  }

  .w-commerce-commercelayoutcontainer {
    flex-direction: column;
    align-items: stretch;
  }
}

@media screen and (max-width: 479px) {
  .w-commerce-commercecheckoutemailinput, .w-commerce-commercecheckoutshippingfullname, .w-commerce-commercecheckoutshippingstreetaddress, .w-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }

  .w-commerce-commercecheckoutrow {
    flex-direction: column;
  }

  .w-commerce-commercecheckoutshippingcity, .w-commerce-commercecheckoutshippingstateprovince, .w-commerce-commercecheckoutshippingzippostalcode, .w-commerce-commercecheckoutshippingcountryselector, .w-commerce-commercecheckoutcardnumber, .w-commerce-commercecheckoutcardexpirationdate, .w-commerce-commercecheckoutcardsecuritycode, .w-commerce-commercecheckoutbillingfullname, .w-commerce-commercecheckoutbillingstreetaddress, .w-commerce-commercecheckoutbillingstreetaddressoptional, .w-commerce-commercecheckoutbillingcity, .w-commerce-commercecheckoutbillingstateprovince, .w-commerce-commercecheckoutbillingzippostalcode, .w-commerce-commercecheckoutbillingcountryselector, .w-commerce-commercecheckoutdiscountsinput, .w-commerce-commerceaddtocartquantityinput {
    font-size: 16px;
  }
}

/* overflow-x: clip statt hidden — verhindert horizontales Scrollen (slide-in Menu)
   ABER bricht NICHT position:sticky des Headers (overflow:hidden würde das tun) */
html {
  overflow-x: clip;
}

/* Nav-Footer Desktop-Default: versteckt (nur Tablet/Mobile sichtbar) */
.header-nav-footer {
  display: none;
}

body {
  background-color: var(--neutral--200);
  color: var(--neutral--700);
  font-family: Onest, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.555em;
  overflow-x: clip;
}

h1 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.15em;
}

h2 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2em;
}

h3 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25em;
}

h4 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2em;
}

h5 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25em;
}

h6 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3em;
}

p {
  margin-bottom: 16px;
  line-height: 1.667em;
}

/* Defense-in-depth: falls KirbyText mal <p> innerhalb einer Headline rendert
   (z.B. via ->kt() statt ->kti()), soll der innere <p> NICHT die globale
   line-height 1.667 erben — sonst wirken Headlines "luftig kaputt". */
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  line-height: inherit;
  margin: 0;
}

a {
  color: var(--accent--primary-1);
  text-decoration: underline;
  transition: color .3s;
}

a:hover {
  color: var(--neutral--800);
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

li {
  margin-bottom: 8px;
  padding-left: 8px;
}

img {
  max-width: 100%;
  display: inline-block;
}

label {
  color: var(--neutral--800);
  margin-bottom: 8px;
  font-weight: 400;
  line-height: 1.333em;
  display: block;
}

strong {
  color: var(--neutral--800);
  font-weight: 500;
}

blockquote {
  background-color: var(--secondary--color-1);
  color: var(--neutral--100);
  text-align: center;
  border-style: none;
  border-radius: 12px;
  margin-top: 14px;
  margin-bottom: 32px;
  padding: 83px 53px;
  font-size: 30px;
  line-height: 1.2em;
}

figure {
  margin-top: 24px;
  margin-bottom: 48px;
}

figcaption {
  text-align: center;
  margin-top: 16px;
}

.page-wrapper {
  min-height: 100vh;
}

.page-wrapper.flex {
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}

.grid-2-columns {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-2-columns.style---styleguide-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: .3fr 1fr;
  align-items: start;
}

.grid-2-columns.title-and-paragraph {
  grid-template-columns: 1fr .8fr;
}

.grid-2-columns.checkout-page {
  grid-template-columns: 1fr .5fr;
  align-items: start;
}

.grid-2-columns._1-3fr---tablet-1-col {
  grid-template-columns: 1.3fr 1fr;
}

.grid-2-columns.stats-v1 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-columns: 1fr 1fr;
}

.grid-2-columns.title-and-btn {
  grid-template-columns: 1fr auto;
}

.grid-2-columns.grid-2-col-cta {
  grid-template-columns: 1.1fr 1fr;
}

.grid-2-columns.hero-grid {
  grid-template-columns: .8fr 1fr;
}

.grid-2-columns.vales-icon-grid {
  grid-row-gap: 62px;
}

.grid-2-columns.contact-grid {
  grid-template-columns: 1fr minmax(510px, 1.05fr);
}

.grid-2-columns.sidebar-right-grid {
  grid-template-columns: 1fr .65fr;
}

.grid-2-columns.newsletter-grid {
  align-items: center;
  padding-top: 90px;
  padding-bottom: 90px;
}

.grid-2-columns.hero-news-grid {
  grid-template-columns: .9fr 1fr;
  align-items: center;
}

.grid-2-columns.blog-sidebar-page {
  grid-template-columns: 1fr minmax(350px, .48fr);
}

.grid-2-columns.hero-team-grid {
  grid-template-columns: .9fr 1fr;
}

.grid-2-columns.hero-help-grid {
  grid-template-columns: 1fr .7fr;
  align-items: end;
}

.grid-2-columns.product-grid {
  grid-template-columns: 1fr minmax(500px, 1fr);
  max-width: 1164px;
}

.grid-2-columns.hero-niche-grid {
  grid-template-columns: 1fr .7fr;
}

.grid-2-columns.price-com-grid-2-col {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  border-radius: var(--radius--very-small);
  grid-template-columns: 1fr auto;
  padding: 8px 12px;
  transition: background-color .3s;
  position: relative;
}

.grid-2-columns.price-com-grid-2-col:hover {
  background-color: var(--secondary--color-2);
}

.grid-2-columns.price-com-grid-2-col.soon {
  background-color: var(--neutral--400);
}

.grid-2-columns.gap-64px {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
}

.grid-2-columns.grid-2-col-marketing {
  grid-template-columns: 1fr 1.2fr;
}

.grid-2-columns.gap-16px {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.style---navigation-sidebar {
  z-index: 1;
  height: 100%;
  max-height: 100vh;
  box-shadow: 1px 0 14px 0 var(--general--shadow-01);
  position: sticky;
  top: 0;
  overflow: hidden;
}

.style---main-wrapper {
  background-color: var(--neutral--200);
}

.card {
  border: 1px solid var(--neutral--300);
  border-radius: var(--radius--standart);
  background-color: var(--neutral--100);
  box-shadow: 0 2px 7px 0 var(--general--shadow-01);
  overflow: hidden;
  transform: translate(0);
}

.card.checkout-block {
  margin-bottom: 28px;
  padding: 32px 32px 48px;
}

.card.checkout-block.order-summary {
  padding-bottom: 40px;
}

.card.checkout-block.last {
  margin-bottom: 0;
}

.card.sales-home-page {
  color: var(--neutral--100);
  text-align: center;
  transform-style: preserve-3d;
  text-decoration: none;
  transition: transform .3s;
}

.card.sales-home-page:hover {
  color: var(--neutral--100);
  transform: scale3d(.98, .98, 1.01);
}

.card.testmonial-v1 {
  grid-column-gap: 50px;
  grid-row-gap: 28px;
  background-color: var(--secondary--color-2);
  max-width: 100%;
  box-shadow: none;
  border-style: none;
  border-radius: 12px;
  flex: none;
  grid-template-rows: auto;
  grid-template-columns: minmax(475px, 1.3fr) 1fr;
  grid-auto-columns: 1fr;
  padding: 32px 48px;
  display: grid;
}

.card.testmonial-v1.marketing {
  grid-template-columns: minmax(475px, 1.2fr) 1fr;
}

.card.team-item-content {
  padding: 15px;
  position: absolute;
  inset: auto 16px 27px;
}

.card.contact-form {
  padding: 63px 40px 59px;
}

.card.career-sidebar {
  border-color: var(--secondary--color-2);
  background-color: var(--secondary--color-2);
  box-shadow: none;
  padding: 50px 31px;
}

.card.blog-post-featured {
  width: 100%;
  color: var(--neutral--700);
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.card.blog-post-featured:hover {
  color: var(--neutral--700);
}

.card.author {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  padding: 50px 42px;
}

.card.product-item {
  border-color: var(--secondary--color-1);
  background-color: var(--neutral--200);
  min-height: 100%;
  box-shadow: none;
  flex-direction: column;
  transition: border-color .3s;
  display: flex;
}

.card.product-item:hover {
  border-color: var(--neutral--500);
}

.card.product-item._3-posts-item {
  position: relative;
}

.card.landing-form {
  background-color: var(--secondary--color-1);
  padding: 68px 40px;
}

.card.not-found-card {
  padding: 190px 40px;
  position: relative;
}

.card.password-page {
  padding: 114px 40px 208px;
  position: relative;
}

.card.search-result {
  min-height: 100%;
  color: var(--neutral--600);
  padding: 50px 40px;
  text-decoration: none;
  transition-property: transform;
}

.card.search-result:hover {
  color: var(--neutral--600);
  transform: scale(.96);
}

.card.pricing-card {
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  padding: 48px 32px;
  display: flex;
}

.card.pricing-card.bald-verf-gbar {
  position: relative;
}

.card.pricing-card.additional-information {
  background-color: var(--neutral--300);
  background-image: url('../images/line-hero-v16-startply-x-webflow-template.svg');
  background-position: 0 0;
  background-size: auto;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 0%;
}

.card.pricing-card.additional-information-v2 {
  background-color: var(--neutral--300);
  background-image: url('../images/line-decorative-white-startuply-x-webflow-template.svg');
  background-position: 0 0;
  background-size: auto;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 0%;
}

.card.plan-com {
  flex-flow: column;
  padding-bottom: 42px;
  padding-left: 34px;
  padding-right: 34px;
  display: flex;
  position: relative;
  overflow: visible;
}

.card.plan-com.mobile {
  display: none;
}

.card.card-image-v1 {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  background-color: var(--neutral--300);
  max-width: 100%;
  box-shadow: none;
  color: var(--neutral--700);
  background-image: url('../images/line-story-about-startply-x-webflow-template.svg');
  background-position: 50% 70%;
  background-size: auto;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 20px;
  text-decoration: none;
  display: grid;
  position: relative;
}

.card.table-of-contents {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 34px 42px;
}

.card.feedback-card-wrap {
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  margin-bottom: 16px;
  padding: 20px;
  display: flex;
}

.card.feedback-card-wrap.hidden {
  display: none;
}

.card.testimonials-main {
  padding: 64px;
}

.card.testimonials {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px;
  display: flex;
}

.style---color-block {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  min-height: 180px;
  position: relative;
}

.style---color-block-content {
  border-top: 1px solid var(--neutral--400);
  padding: 24px 24px 32px;
}

.style---color-block-name {
  color: var(--neutral--800);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;
}

.style---color-block-hex {
  line-height: 20px;
}

.grid-4-columns {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.bg-accent-1 {
  background-color: var(--accent--primary-1);
}

.bg-secondary-1 {
  background-color: var(--secondary--color-1);
}

.bg-secondary-2 {
  background-color: var(--secondary--color-2);
}

.bg-neutral-800 {
  background-color: var(--neutral--800);
}

.bg-neutral-700 {
  background-color: var(--neutral--700);
}

.bg-neutral-600 {
  background-color: var(--neutral--600);
}

.bg-neutral-500 {
  background-color: var(--neutral--500);
}

.bg-neutral-400 {
  background-color: var(--neutral--400);
}

.bg-neutral-300 {
  background-color: var(--neutral--300);
}

.bg-neutral-200 {
  background-color: var(--neutral--200);
}

.bg-neutral-100 {
  background-color: var(--neutral--100);
}

.style---color-block-text-example {
  background-color: var(--neutral--100);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 16px;
  position: absolute;
  inset: 16px 16px auto auto;
}

.style---color-block-text-example.badge-dark {
  background-color: var(--neutral--800);
}

.color-accent-1 {
  color: var(--accent--primary-1);
}

.color-secondary-1 {
  color: var(--secondary--color-1);
}

.color-secondary-2 {
  color: var(--secondary--color-2);
}

.color-neutral-800 {
  color: var(--neutral--800);
}

.color-neutral-700 {
  color: var(--neutral--700);
}

.color-neutral-600 {
  color: var(--neutral--600);
}

.color-neutral-500 {
  color: var(--neutral--500);
}

.color-neutral-300 {
  color: var(--neutral--300);
}

.color-neutral-200 {
  color: var(--neutral--200);
}

.color-neutral-100 {
  color: var(--neutral--100);
}

.bg-green-400 {
  background-color: var(--system--green-400);
}

.color-green-400 {
  color: #11845b;
}

.bg-blue-400 {
  background-color: var(--system--blue-400);
}

.color-blue-400 {
  color: var(--system--blue-400);
}

.bg-blue-300 {
  background-color: var(--system--blue-300);
}

.color-blue-300 {
  color: var(--system--blue-300);
}

.bg-blue-200 {
  background-color: var(--system--blue-200);
}

.bg-blue-100 {
  background-color: var(--system--blue-100);
}

.color-blue-100 {
  color: var(--system--blue-100);
}

.color-neutral-400 {
  color: var(--neutral--400);
}

.bg-green-300 {
  background-color: var(--system--green-300);
}

.color-green-300 {
  color: var(--system--green-300);
}

.bg-green-200 {
  background-color: var(--system--green-200);
}

.color-green-200 {
  color: var(--system--green-200);
}

.color-green-100 {
  color: var(--system--green-100);
}

.bg-green-100 {
  background-color: var(--system--green-100);
}

.bg-red-400 {
  background-color: var(--system--red-400);
}

.color-red-400 {
  color: var(--system--red-400);
}

.bg-red-300 {
  background-color: var(--system--300);
}

.color-red-300 {
  color: var(--system--300);
}

.bg-red-200 {
  background-color: var(--system--red-200);
}

.color-red-200 {
  color: var(--system--red-200);
}

.bg-red-100 {
  background-color: var(--system--red-100);
}

.color-red-100 {
  color: var(--system--red-100);
}

.bg-orange-400 {
  background-color: var(--system--orange-400);
}

.color-orange-400 {
  color: var(--system--orange-400);
}

.bg-orange-300 {
  background-color: var(--system--orange-300);
}

.color-orange-300 {
  color: var(--system--orange-300);
}

.bg-orange-200 {
  background-color: var(--system--orange-200);
}

.color-orange-200 {
  color: var(--system--orange-200);
}

.bg-orange-100 {
  background-color: var(--system--orange-100);
}

.color-orange-100 {
  color: var(--system--orange-100);
}

.style---block-sub-heading {
  margin-bottom: 32px;
}

.style---block-sub-heading.border {
  border-bottom: 1px solid var(--neutral--400);
  margin-bottom: 64px;
  padding-bottom: 40px;
}

.divider {
  background-color: var(--neutral--400);
  height: 2px;
  margin-top: 80px;
  margin-bottom: 80px;
}

.divider._0px---32px {
  margin-top: 32px;
  margin-bottom: 0;
}

.divider.bg-neutral-100 {
  background-color: var(--neutral--100);
}

.divider._32px {
  margin-top: 32px;
  margin-bottom: 32px;
}

.divider._32px.bg-neutral-300 {
  background-color: var(--neutral--300);
}

.divider.notification-bar-divider {
  width: 1px;
  height: 12px;
  margin: -2px 8px 0;
}

.divider.footer {
  width: 1px;
  height: 14px;
  margin: 0 8px;
}

.divider._0px---24px {
  margin-top: 24px;
  margin-bottom: 0;
}

.style---typography-block-grid {
  grid-column-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: minmax(auto, 320px) 1fr;
}

.style---content-block {
  margin-bottom: 100px;
}

.mg-bottom-8px {
  margin-bottom: 8px;
}

.mg-bottom-16px {
  margin-bottom: 16px;
}

.mg-bottom-24px {
  margin-bottom: 24px;
}

.mg-bottom-32px {
  margin-bottom: 32px;
}

.mg-bottom-40px {
  margin-bottom: 40px;
}

.mg-bottom-48px {
  margin-bottom: 48px;
}

.mg-bottom-56px {
  margin-bottom: 56px;
}

.mg-bottom-64px {
  margin-bottom: 64px;
}

.mg-top-8px {
  margin-top: 8px;
}

.mg-top-16px {
  margin-top: 16px;
}

.mg-top-32px {
  margin-top: 32px;
}

.mg-top-40px {
  margin-top: 40px;
}

.mg-top-48px {
  margin-top: 48px;
}

.mg-right-8px {
  margin-right: 8px;
}

.mg-right-8px.mgtop--5px {
  margin-top: -5px;
}

.mg-right-24px {
  margin-right: 24px;
}

.mg-right-32px {
  margin-right: 32px;
}

.text-200 {
  font-size: 18px;
  line-height: 1.111em;
}

.text-200.medium {
  font-weight: 500;
}

.text-200.bold {
  font-weight: 700;
}

.display-1 {
  color: var(--neutral--800);
  font-size: 72px;
  font-weight: 700;
  line-height: 1.111em;
  letter-spacing: -0.03em;
}

.display-1.color-neutral-100 {
  color: var(--neutral--100);
}

.grid-1-column {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-1-column.gap-26px {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
}

.grid-1-column.step-grid {
  grid-row-gap: 40px;
}

.grid-1-column.layout-images-1-col, .grid-1-column.contact-layout {
  grid-row-gap: 0px;
}

.grid-1-column.features-1-grid-col {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}

.gap-32px {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}

.gap-column-24px {
  grid-column-gap: 24px;
}

.gap-row-32px {
  grid-row-gap: 32px;
}

.gap-row-64px {
  grid-row-gap: 64px;
}

.gap-row-80px {
  grid-row-gap: 80px;
}

.display-2 {
  color: var(--neutral--800);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.133em;
  letter-spacing: -0.025em;
}

.display-2.color-accent-1 {
  color: var(--accent--primary-1);
}

.display-2.color-neutral-100 {
  color: var(--neutral--100);
}

.display-3 {
  color: var(--neutral--800);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.167em;
  letter-spacing: -0.02em;
}

.display-3.color-neutral-100 {
  color: var(--neutral--100);
}

.display-3.color-neutral-600 {
  color: var(--neutral--600);
}

.display-4 {
  color: var(--neutral--800);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.02em;
}

.display-4.color-neutral-100 {
  color: var(--neutral--100);
}

.style---style-grid-wrapper {
  grid-row-gap: 180px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.paragraph-large {
  font-size: 24px;
  line-height: 1.583em;
}

.paragraph-small {
  font-size: 14px;
  line-height: 1.714em;
}

.text-400 {
  font-size: 24px;
  line-height: 1.083em;
}

.text-400.medium {
  font-weight: 500;
}

.text-400.bold {
  font-weight: 700;
}

.text-300 {
  font-size: 20px;
  line-height: 1.1em;
}

.text-300.medium {
  font-weight: 500;
}

.text-300.bold {
  font-weight: 700;
}

.text-100 {
  font-size: 16px;
  line-height: 1.125em;
}

.text-100.medium {
  font-weight: 500;
}

.text-100.bold {
  font-weight: 700;
}

.text-100.small {
  font-size: 14px;
}

.text-100.max-width-298px {
  max-width: 298px;
}

.text-uppercase {
  letter-spacing: .1em;
  text-transform: uppercase;
}

.text-strikethrough {
  text-decoration: line-through;
}

.grid-3-columns {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-3-columns.gap-row-80px {
  grid-row-gap: 80px;
}

.grid-3-columns.style---buttons-grid {
  grid-column-gap: 70px;
  grid-template-columns: auto auto 1fr;
}

.grid-3-columns.style---buttons-grid.download-app-grid {
  grid-template-columns: auto auto;
}

.grid-3-columns.gap-row-32px {
  grid-row-gap: 32px;
}

.grid-3-columns.gap-16px {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.grid-3-columns.certificates {
  height: 100%;
}

.style---shadow-card {
  background-color: var(--neutral--100);
  text-align: center;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  padding: 32px 44px;
  display: flex;
}

.shadow-01 {
  box-shadow: 0 2px 6px 0 var(--general--shadow-01);
}

.shadow-02 {
  box-shadow: 0 2px 12px 0 var(--general--shadow-02);
}

.shadow-03 {
  box-shadow: 0 8px 28px 0 var(--general--shadow-03);
}

.shadow-04 {
  box-shadow: 0 14px 42px 0 var(--general--shadow-04);
}

.shadow-05 {
  box-shadow: 0 24px 65px 0 var(--general--shadow-05);
}

.shadow-06 {
  box-shadow: 0 32px 72px 0 var(--general--shadow-06);
}

.button-shadow-color-01 {
  box-shadow: 0 4px 10px 0 var(--button-shadow--color-01);
}

.button-shadow-color-02 {
  box-shadow: 0 6px 20px 0 var(--button-shadow--color-2);
}

.button-shadow-color-03 {
  box-shadow: 0 10px 28px 0 var(--button-shadow--color-03);
}

.button-shadow-white-01 {
  box-shadow: 0 4px 10px 0 var(--button-shadow--white-01);
}

.button-shadow-white-02 {
  box-shadow: 0 6px 20px 0 var(--button-shadow--white-02);
}

.button-shadow-white-03 {
  box-shadow: 0 10px 28px 0 var(--button-shadow--white-03);
}

.style---heading {
  background-color: var(--neutral--100);
  min-height: 50vh;
  box-shadow: 0 2px 6px 0 var(--general--shadow-02);
  align-items: center;
  margin-bottom: 30px;
  padding: 72px 4vw;
  display: flex;
}

.inner-container._600px {
  max-width: 600px;
}

.inner-container.center {
  margin-left: auto;
  margin-right: auto;
}

.inner-container._574px {
  max-width: 574px;
}

.inner-container._500px {
  max-width: 500px;
}

.inner-container._990px {
  max-width: 990px;
}

.inner-container._666px {
  max-width: 666px;
}

.inner-container._550px {
  max-width: 550px;
}

.inner-container._390px {
  max-width: 390px;
}

.inner-container._343px {
  max-width: 343px;
}

.inner-container._1060px {
  max-width: 1060px;
}

.inner-container._424px {
  max-width: 424px;
}

.inner-container._454px {
  max-width: 454px;
}

.inner-container._440px {
  max-width: 440px;
}

.inner-container._530px {
  max-width: 530px;
}

.inner-container._509px {
  max-width: 509px;
}

.inner-container._527px {
  max-width: 527px;
}

.inner-container._504px {
  max-width: 504px;
}

.inner-container._610px {
  max-width: 610px;
}

.inner-container._330px {
  max-width: 330px;
}

.inner-container._460px {
  max-width: 460px;
}

.inner-container._519px {
  max-width: 519px;
}

.inner-container._630px {
  max-width: 630px;
}

.inner-container._576px {
  max-width: 576px;
}

.inner-container._603px {
  max-width: 603px;
}

.inner-container._728px {
  max-width: 728px;
}

.inner-container._300px {
  max-width: 300px;
}

.inner-container._692px {
  max-width: 692px;
}

.inner-container._558px {
  max-width: 558px;
}

.inner-container._445px {
  max-width: 445px;
}

.inner-container._922px {
  max-width: 922px;
}

.inner-container._398px {
  max-width: 398px;
}

.inner-container._764px {
  max-width: 764px;
}

.inner-container._1025px {
  max-width: 1025px;
}

.inner-container._660px {
  max-width: 660px;
}

.inner-container._716px {
  max-width: 716px;
}

.inner-container._544px {
  max-width: 544px;
}

.inner-container._545px {
  max-width: 545px;
}

.inner-container._561px {
  max-width: 561px;
}

.inner-container._629px {
  max-width: 629px;
}

.inner-container._1016px {
  max-width: 1016px;
}

.inner-container._617px {
  max-width: 617px;
}

.inner-container._746px {
  max-width: 746px;
}

.inner-container._444px {
  max-width: 444px;
}

.inner-container._516px {
  max-width: 516px;
}

.inner-container._822px {
  max-width: 822px;
}

.inner-container._777px {
  max-width: 777px;
}

.inner-container._823px {
  max-width: 823px;
}

.inner-container._563px {
  max-width: 563px;
}

.inner-container._532px {
  max-width: 532px;
}

.inner-container._498px {
  max-width: 498px;
}

.inner-container._511px {
  max-width: 511px;
}

.inner-container._864px {
  max-width: 864px;
}

.inner-container._1086px {
  max-width: 1086px;
}

.inner-container._437px {
  max-width: 437px;
}

.inner-container._1072px {
  max-width: 1072px;
}

.inner-container.tabs-2-cols-title-wrapper {
  max-width: 42%;
  margin-bottom: 32px;
}

.inner-container._826px {
  max-width: 826px;
}

.inner-container._447px {
  max-width: 447px;
}

.style---content-heading {
  background-color: var(--neutral--100);
  box-shadow: 0 2px 6px 0 var(--general--shadow-02);
  border-radius: 12px;
  align-items: center;
  margin-bottom: 60px;
  padding: 48px;
  display: flex;
}

.style---heading-icon-wrapper {
  background-color: var(--accent--primary-1);
  border-radius: 12px;
  margin-right: 18px;
}

.mg-bottom-0 {
  margin-bottom: 0;
}

.mg-bottom-0.mg-top-12px {
  margin-top: 12px;
}

.style---content-wrapper {
  padding-top: 40px;
  padding-left: 4vw;
  padding-right: 4vw;
}

.style---card-wrapper {
  border: 1px solid var(--neutral--400);
  background-color: var(--neutral--100);
  box-shadow: 0 2px 7px 0 var(--general--shadow-01);
  border-radius: 12px;
}

.style---components-wrapper {
  background-color: var(--neutral--100);
  border-radius: 12px;
}

.style---bg-white {
  padding: 48px;
}

.style-buttons-dark {
  background-color: var(--neutral--800);
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  padding: 48px;
}

.btn-primary {
  background-color: var(--accent--primary-1);
  color: var(--neutral--100);
  text-align: center;
  letter-spacing: .64px;
  border-radius: 6px;
  justify-content: center;
  padding: 18px 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.125em;
  text-decoration: none;
  transition: background-color .3s;
}

.btn-primary:hover {
  background-color: var(--accent--primary-1-hover);
  color: var(--neutral--100);
}

.btn-primary.small {
  border-radius: 5px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.143em;
}

.btn-primary.small.header-btn-hidden-on-mbl {
  margin-left: 24px;
}

.btn-primary.small.discount {
  height: auto;
  margin-left: 0;
}

.btn-primary.large {
  padding: 20px 40px;
  font-size: 18px;
  line-height: 1.1em;
}

.btn-primary.white {
  background-color: var(--neutral--100);
  color: var(--accent--primary-1);
}

.btn-primary.inside-input {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.btn-primary.inside-input.default {
  padding: 16px 24px;
  top: 8px;
  bottom: 8px;
  right: 8px;
}

.btn-primary.download-app {
  align-items: center;
  display: flex;
}

.btn-primary.visible-on-mbp {
  display: none;
}

.btn-secondary {
  border: 1px solid var(--neutral--800);
  color: var(--neutral--800);
  text-align: center;
  letter-spacing: .64px;
  text-transform: uppercase;
  background-color: #0000;
  border-radius: 6px;
  padding: 18px 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.125em;
  text-decoration: none;
  transition: border-color .3s, transform .3s, background-color .3s, color .3s;
}

.btn-secondary:hover {
  border-color: var(--accent--primary-1);
  background-color: var(--accent--primary-1);
  color: var(--neutral--100);
  transform: scale(.96);
}

.btn-secondary.small {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.143em;
}

.btn-secondary.large {
  padding: 20px 40px;
  font-size: 18px;
  line-height: 1.1em;
}

.btn-secondary.white {
  border: 1px solid var(--neutral--100);
  color: var(--neutral--100);
  background-color: #0000;
}

.btn-secondary.white:hover {
  border-color: var(--neutral--100);
  background-color: var(--neutral--100);
  color: var(--neutral--800);
}

.btn-secondary.white.icon-no-hover {
  text-align: left;
  transition-property: none;
}

.btn-secondary.white.icon-no-hover:hover {
  color: var(--neutral--100);
  background-color: #0000;
  transform: none;
}

.btn-secondary.width-100.card-product-add-cart {
  justify-content: center;
}

.btn-secondary.add-cart-btn {
  margin-top: 0;
}

.btn-secondary.icon-no-hover {
  text-transform: none;
}

.badge-primary {
  background-color: var(--accent--primary-1);
  box-shadow: 0 4px 4px 0 var(--general--shadow-03);
  color: var(--neutral--100);
  text-align: center;
  letter-spacing: .64px;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 16px 24px;
  font-size: 18px;
  line-height: 1.111em;
  text-decoration: none;
  display: inline-block;
}

.badge-primary.white {
  background-color: var(--neutral--100);
  color: var(--accent--primary-1);
}

.badge-primary.light {
  background-color: var(--secondary--color-2);
  color: var(--accent--primary-1);
}

.badge-primary.small {
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.125em;
}

.badge-primary.small.blog-post-category {
  margin-right: 24px;
  transition-property: transform;
}

.badge-primary.large {
  padding: 20px 38px;
  font-size: 20px;
  line-height: 1.1em;
}

.badge-primary.very-small {
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.125em;
}

.badge-secondary {
  border: 1px solid var(--neutral--500);
  background-color: var(--neutral--100);
  color: var(--neutral--800);
  text-align: center;
  letter-spacing: .64px;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 16px 24px;
  font-size: 18px;
  line-height: 1.111em;
  text-decoration: none;
  display: inline-block;
}

.badge-secondary.white {
  border-color: var(--neutral--100);
  box-shadow: none;
  color: var(--neutral--100);
  background-color: #0000;
}

.badge-secondary.light {
  background-color: var(--neutral--200);
  box-shadow: none;
  border-width: 0;
}

.badge-secondary.small {
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.125em;
}

.badge-secondary.small.card-product-price {
  border-color: var(--secondary--color-1);
  background-color: var(--neutral--300);
  padding: 8px;
  font-weight: 700;
  position: absolute;
  top: 32px;
  right: 32px;
}

.badge-secondary.large {
  padding: 20px 38px;
  font-size: 20px;
  line-height: 1.1em;
}

.badge-secondary.category-link {
  border-color: var(--neutral--500);
  color: var(--neutral--600);
  background-color: #0000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.143em;
  transition: transform .3s, border-color .3s, background-color .3s, color .3s;
}

.badge-secondary.category-link:hover {
  border-color: var(--accent--primary-1);
  background-color: var(--accent--primary-1);
  color: var(--neutral--100);
  transform: scale(.96);
}

.badge-secondary.category-link.w--current {
  border-color: var(--secondary--color-1);
  background-color: var(--secondary--color-1);
  color: var(--neutral--100);
  cursor: default;
  transform: translate(0);
}

.badge-secondary.pricing-table {
  border-color: var(--neutral--500);
  color: var(--neutral--600);
  background-color: #0000;
  grid-template-rows: auto;
  grid-template-columns: auto auto auto;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  padding: 4px;
  font-size: 14px;
  font-weight: 500;
  display: grid;
  position: relative;
}

.badge-secondary.pricing-table.w--current {
  border-color: var(--secondary--color-1);
  background-color: var(--secondary--color-1);
  color: var(--neutral--100);
  cursor: default;
  transform: translate(0);
}

.input {
  border: 1px solid var(--neutral--400);
  border-radius: var(--radius--very-small);
  background-color: var(--neutral--100);
  min-height: 68px;
  color: var(--neutral--800);
  margin-bottom: 0;
  padding: 14px 20px;
  font-size: 18px;
  line-height: 1.111em;
  transition: color .3s, border-color .3s;
}

.input:hover {
  border-color: var(--neutral--500);
}

.input:focus, .input.-wfp-focus {
  border-color: var(--accent--primary-1);
  color: var(--neutral--800);
}

.input::placeholder {
  color: var(--neutral--600);
}

.input.small {
  min-height: 64px;
  margin-bottom: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 16px;
}

.input.small.select-wrapper {
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  transition: border-color .3s;
  display: flex;
  overflow: hidden;
}

.input.small.select-inside {
  color: var(--neutral--600);
  border-style: none;
  border-radius: 0;
  transition: color .3s;
}

.input.small.select-inside:focus {
  color: var(--neutral--800);
}

.input.large {
  min-height: 76px;
}

.input.button-inside {
  padding-right: 33%;
}

.input.checkout-input {
  min-height: 69px;
  margin-bottom: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 16px;
}

.input.checkout-input::placeholder {
  font-size: 16px;
  line-height: 18px;
}

.input.checkout-input.last {
  margin-bottom: 0;
}

.input.icon-left {
  padding-left: 42px;
}

.position-relative {
  position: relative;
}

.text-area {
  border: 1px solid var(--neutral--400);
  border-radius: var(--radius--very-small);
  background-color: var(--neutral--100);
  min-width: 100%;
  max-width: 100%;
  min-height: 160px;
  max-height: 200px;
  color: var(--neutral--800);
  padding: 24px;
  font-size: 18px;
  line-height: 1.556em;
  transition: color .3s, border-color .3s;
}

.text-area:hover {
  border-color: var(--neutral--500);
}

.text-area:focus {
  border-color: var(--accent--primary-1);
  color: var(--neutral--800);
}

.text-area::placeholder {
  color: var(--neutral--600);
}

.text-area.small {
  min-height: 142px;
  margin-bottom: 24px;
  font-size: 16px;
}

.text-area.small.mg-bottom-0 {
  margin-bottom: 0;
}

.checkbox-field-wrapper {
  align-items: center;
  margin-bottom: 24px;
  padding-left: 0;
  font-size: 18px;
  line-height: 22px;
  display: flex;
}

.checkbox-field-wrapper.large {
  font-size: 20px;
  line-height: 24px;
}

.checkbox-field-wrapper.small {
  font-size: 16px;
  line-height: 20px;
}

.checkbox-field-wrapper.mg-bottom-0 {
  margin-bottom: 0;
}

.checkbox {
  border-width: 1px;
  border-color: var(--neutral--400);
  background-color: var(--neutral--100);
  border-radius: 6px;
  width: auto;
  min-width: 24px;
  height: auto;
  min-height: 24px;
  margin-left: 0;
  transition: border-color .3s, background-color .3s;
}

.checkbox:hover {
  border-color: var(--neutral--500);
}

.checkbox.w--redirected-checked {
  border-color: var(--accent--primary-1);
  background-color: var(--accent--primary-1);
  background-image: url('../images/check-form-brix-templates-webflow.svg');
  background-size: auto;
  margin-top: 0;
  margin-left: 0;
}

.checkbox.w--redirected-focus {
  box-shadow: none;
}

.checkbox.large {
  border-radius: 7px;
  min-width: 28px;
  min-height: 28px;
}

.checkbox.small {
  border-radius: 5px;
  min-width: 22px;
  min-height: 22px;
}

.radio-button-field-wrapper {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  padding-left: 0;
  font-size: 18px;
  line-height: 24px;
  display: flex;
}

.radio-button-field-wrapper.large {
  font-size: 20px;
  line-height: 26px;
}

.radio-button-field-wrapper.small {
  font-size: 16px;
  line-height: 22px;
}

.radio-button {
  border-color: var(--neutral--400);
  background-color: var(--neutral--100);
  width: auto;
  min-width: 24px;
  height: auto;
  min-height: 24px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 10px;
  transition: border-color .3s, border-width .3s, background-color .3s;
}

.radio-button:hover {
  border-color: var(--neutral--500);
}

.radio-button.w--redirected-checked {
  border-width: 6px;
  border-color: var(--accent--primary-1);
}

.radio-button.w--redirected-focus {
  box-shadow: none;
}

.radio-button.large {
  min-width: 28px;
  min-height: 28px;
}

.radio-button.large.w--redirected-checked {
  border-width: 8px;
}

.radio-button.small {
  min-width: 22px;
  min-height: 22px;
}

.style---avatars-grid {
  grid-column-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
}

.avatar-circle {
  border-radius: 50%;
  width: 100%;
  overflow: hidden;
  transform: translate(0);
}

.avatar-circle._01 {
  width: 32px;
  max-width: 32px;
  height: 32px;
  max-height: 32px;
}

.avatar-circle._02 {
  width: 48px;
  max-width: 48px;
  height: 48px;
  max-height: 48px;
}

.avatar-circle._03 {
  width: 64px;
  max-width: 64px;
  height: 64px;
  max-height: 64px;
}

.avatar-circle._04 {
  width: 80px;
  max-width: 80px;
  height: 80px;
  max-height: 80px;
}

.avatar-circle._05 {
  width: 120px;
  max-width: 120px;
  height: 120px;
  max-height: 120px;
}

.avatar-circle._06 {
  width: 160px;
  max-width: 160px;
  height: 160px;
  max-height: 160px;
}

.avatar-circle._07 {
  width: 240px;
  max-width: 240px;
  height: 240px;
  max-height: 240px;
}

.avatar-circle._08 {
  width: 380px;
  max-width: 380px;
  height: 380px;
  max-height: 380px;
}

.style---icons-grid {
  grid-column-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, 72px);
  align-items: center;
}

.square-icon {
  border-radius: 16px;
}

.square-icon.password-page {
  border-radius: 0;
  max-width: 57px;
  margin-bottom: 24px;
}

.style---social-square-icons-grid {
  grid-column-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, 36px);
}

.social-icon-font {
  font-family: Social Icons Font, sans-serif;
  line-height: 20px;
}

.social-icon-font.button-left {
  margin-right: 6px;
}

.social-icon-font._20px {
  font-size: 20px;
}

.social-icon-font._22px {
  font-size: 22px;
}

.social-icon-square {
  background-color: var(--secondary--color-2);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  text-decoration: none;
  transition: background-color .3s, color .3s;
  display: flex;
}

.social-icon-square:hover {
  background-color: var(--accent--primary-1);
  color: var(--neutral--100);
}

.social-icon-square.size-10px {
  width: 10px;
}

.line-rounded-icon {
  font-family: Line Rounded Icons, sans-serif;
}

.line-rounded-icon.style---dropdown-arrow-sidebar {
  line-height: 18px;
}

.line-rounded-icon.link-icon-right {
  margin-left: 6px;
  display: inline-block;
}

.line-rounded-icon.link-icon-right.small {
  font-size: 14px;
  line-height: 1em;
}

.line-rounded-icon.link-icon-left {
  margin-right: 6px;
  display: inline-block;
}

.line-rounded-icon.success-message-check {
  margin-bottom: 6px;
  font-size: 22px;
}

.line-rounded-icon.success-message-check.large {
  margin-bottom: 16px;
  font-size: 80px;
  line-height: 1em;
}

.line-rounded-icon.right-arrow {
  min-width: 32px;
  max-width: 32px;
  min-height: 32px;
  max-height: 32px;
  color: var(--secondary--color-1);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  display: flex;
}

.line-rounded-icon.category-icon {
  margin-right: 8px;
  font-size: 20px;
  line-height: 1em;
}

.line-rounded-icon.dropdown-arrow {
  margin-left: 4px;
}

.line-rounded-icon.plan-com-dropdown-arrow {
  justify-content: center;
  align-items: center;
  font-size: 20px;
  line-height: 1em;
  display: flex;
}

.style---line-icons-grid {
  grid-column-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, 20px);
}

.line-square-icon {
  font-family: Line Square Icons, sans-serif;
}

.filled-icons {
  font-family: Filled Icons, sans-serif;
}

.filled-icons.feature-price {
  font-size: 20px;
  line-height: 1em;
}

.rich-text-v1 img {
  border-radius: 12px;
}

.rich-text-v1 p {
  margin-top: 16px;
  margin-bottom: 16px;
}

.rich-text-v1 h2 {
  margin-bottom: 16px;
}

.rich-text-v1 h3 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.rich-text-v1 figure, .rich-text-v1 ul {
  margin-top: 32px;
  margin-bottom: 32px;
}

.rich-text-v1 ol {
  margin-top: 22px;
  margin-bottom: 24px;
}

.rich-text-v1 h6, .rich-text-v1 h5, .rich-text-v1 h4 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.rich-text-v1 li {
  margin-bottom: 16px;
}

.rich-text-v1 blockquote {
  border-radius: 12px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.style---dropdown-wrapper-sidebar {
  width: 100%;
  overflow: hidden;
}

.style---dropdown-toggle {
  border-bottom: 1px solid var(--neutral--400);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  transition: color .3s;
  display: flex;
}

.style---dropdown-toggle:hover, .style---dropdown-toggle.w--open {
  color: var(--accent--primary-1);
}

.buttons-row {
  align-items: center;
  display: flex;
}

.buttons-row.center {
  justify-content: center;
}

.buttons-row.mg-top-32px.tabs-2-cols-button {
  max-width: 42%;
}

.style---dropdown-list-sidebar {
  border-bottom: 1px solid var(--neutral--300);
  background-color: var(--neutral--100);
  padding-top: 24px;
  padding-bottom: 24px;
  position: relative;
}

.style---dropdown-link-sidebar {
  color: var(--neutral--600);
  border-right: 4px solid #0000;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px 12px 20px;
  font-size: 16px;
  line-height: 19px;
  text-decoration: none;
  transition: border-color .3s, background-color .3s, color .3s;
  display: flex;
}

.style---dropdown-link-sidebar:hover {
  background-color: var(--neutral--200);
  color: var(--accent--primary-1);
}

.style---dropdown-link-sidebar.w--current {
  border-right-color: var(--accent--primary-1);
  background-color: var(--neutral--200);
  color: var(--accent--primary-1);
  font-weight: 700;
}

.style---dropdown-link-icon-sidebar {
  background-color: var(--accent--primary-1);
  border-radius: 6px;
  max-width: 38px;
  margin-right: 10px;
  padding: 2px;
}

.style---sidebar-wrapper {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
  overflow: scroll;
}

.style---logo-wrapper {
  border-bottom: 1px solid var(--neutral--400);
  background-color: var(--neutral--200);
  width: 100%;
  color: var(--neutral--600);
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 38px 22px;
  text-decoration: none;
  display: flex;
}

.width-100 {
  width: 100%;
}

.style---logo-sidebar {
  width: 100%;
  transition: opacity .3s;
}

.style---logo-sidebar:hover {
  opacity: .6;
}

.container-default {
  max-width: 1304px;
  padding-left: 24px;
  padding-right: 24px;
}

.container-default.z-index-1 {
  z-index: 1;
  position: relative;
}

.container-default.order-confirmation {
  display: block;
}

.container-default.center {
  margin-left: auto;
  margin-right: auto;
}

.section {
  /* Default Section-Padding: 120/120 → addiert sich mit Nachbar-Section
     auf 240px Gap zwischen Inhalten (kein Margin-Collapse-Problem). */
  padding-top: 120px;
  padding-bottom: 120px;
}

.section.position-relative.stats-section {
  padding-top: 150px;
  padding-bottom: 150px;
}

.section.hero-full {
  background-image: linear-gradient(90deg, #0000009e, #0000), url('../images/Laptop-rechts-am-Tisch.png');
  background-position: 0 0, 92% center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  min-height: 100vh;
}
/* Hero-Full: mehr horizontaler Padding wenn Text-Container am Rand klebt */
.section.hero-full .container-default {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 991px) {
  .section.hero-full .container-default {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 479px) {
  /* Mobile: 12 mg-margin + 12 = 24 (konsistent mit anderen Sections) */
  .section.hero-full .container-default {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.section.hero-full.top-210px---bottom-50px {
  min-height: auto;
  max-height: 914px;
  padding-top: 210px;
  padding-bottom: 50px;
}

.section.pd-top-0px {
  padding-top: 0;
}

.section.pd-0px {
  padding-top: 0;
  padding-bottom: 0;
}

.section.pd-150px {
  padding-top: 150px;
  padding-bottom: 150px;
}

.section.pd-top-150px {
  padding-top: 150px;
}

.section.cta {
  padding-top: 0;
  padding-bottom: 0;
}

.section.hero {
  position: relative;
  overflow: hidden;
}

.section.hero.top-78px {
  padding-top: 78px;
}

.section.hero.top-bottom-280px {
  padding-top: 280px;
  padding-bottom: 280px;
}

.section.hero.top-bottom-280px.bg-career {
  background-image: linear-gradient(#0000004d, #0000004d), url('../images/DSC05411-2.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  background-attachment: scroll, scroll;
}

.section.hero.top-78px---bottom-140px {
  padding-top: 78px;
  padding-bottom: 140px;
}

.section.hero.top-115px---bottom-69px {
  padding-top: 115px;
  padding-bottom: 69px;
}

.section.hero.top-138px---bottom-126px {
  padding-top: 138px;
  padding-bottom: 126px;
}

.section.hero.top-110px---bottom-90px {
  padding-top: 110px;
  padding-bottom: 90px;
}

.section.hero.top-bottom-78px {
  padding-top: 78px;
  padding-bottom: 78px;
}

.section.pd-top-104px {
  padding-top: 104px;
}

.section.pd-120px {
  padding-top: 120px;
  padding-bottom: 120px;
}

.section.pd-top-bottom-150px {
  padding-top: 150px;
  padding-bottom: 150px;
}

.top-bar-wrapper {
  background-color: var(--neutral--100);
  color: var(--neutral--100);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.top-bar-padding {
  border-bottom-left-radius: var(--radius--small);
  border-bottom-right-radius: var(--radius--small);
  background-color: var(--secondary--color-1);
  width: 100%;
  padding-top: 10px;
  padding-bottom: 8px;
}

.link-wrapper {
  color: var(--neutral--800);
  display: inline-block;
}

.link-wrapper:hover, .link-wrapper.color-primary {
  color: var(--accent--primary-1);
}

.link-wrapper.color-primary:hover {
  color: var(--neutral--800);
}

.link-wrapper.white {
  color: var(--neutral--100);
}

.link-wrapper.white:hover {
  color: var(--accent--primary-1);
}

.link-text {
  display: inline-block;
}

.link-text.color-neutral-100 {
  color: var(--neutral--100);
}

.link-text.color-neutral-100:hover {
  color: var(--accent--primary-1);
}

.link-text.color-neutral-800 {
  color: #131313;
}

.link-text.color-neutral-800:hover {
  color: #9DBC76;
}

.heading-h1-size {
  color: var(--neutral--800);
  font-size: 54px;
  font-weight: 400;
  line-height: 1.222em;
}

.heading-h2-size {
  color: var(--neutral--800);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.316em;
}

.heading-h2-size.color-neutral-100 {
  color: var(--neutral--100);
}

.heading-h3-size {
  color: var(--neutral--800);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.417em;
}

.heading-h3-size.color-neutral-100 {
  color: var(--neutral--100);
}

.heading-h3-size.color-neutral-600 {
  color: var(--neutral--600);
}

.heading-h3-size.medium {
  font-weight: 500;
}

.heading-h4-size {
  color: var(--neutral--800);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.273em;
}

.heading-h5-size {
  color: var(--neutral--800);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.333em;
}

.heading-h5-size.color-accent-1 {
  color: var(--accent--primary-1);
}

.heading-h6-size {
  color: var(--neutral--800);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375em;
}

.header-content-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.header-nav-menu-list {
  z-index: 1;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 16px;
  line-height: 1.125em;
  display: flex;
}

.header-nav-link {
  color: var(--neutral--800);
  white-space: nowrap;
  padding: 0;
  font-size: 18px;
  line-height: 1.125em;
  transition-duration: .3s;
  text-decoration: none;       /* ersetzt .w-nav-link Default */
}

.header-nav-link:hover {
  color: var(--accent--primary-1);
}

.header-nav-link.w--current {
  color: var(--neutral--800);
}

.header-nav-link.w--current:hover, .header-nav-link.w--open {
  color: var(--accent--primary-1);
}

.header-nav-list-item {
  margin-bottom: 0;
  padding-left: 38px;
  line-height: 1.125em;
}

.header-nav-list-item.show-in-tablet {
  display: none;
}

.header-nav-list-item.middle {
  padding-left: 14px;
  padding-right: 14px;
}

.header-nav-list-item.divider-navbar {
  display: none;
}

.header-right-side {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.btn-circle-primary {
  background-color: var(--accent--primary-1);
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 64px;
  color: var(--neutral--100);
  transform-style: preserve-3d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  line-height: 1em;
  text-decoration: none;
  transition: transform .3s;
  display: flex;
}

.btn-circle-primary:hover {
  color: var(--neutral--100);
  transform: scale3d(.9, .9, 1.01);
}

.btn-circle-primary.small {
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  font-size: 24px;
}

.btn-circle-primary.large {
  width: 88px;
  min-width: 88px;
  height: 88px;
  min-height: 88px;
  font-size: 36px;
}

.btn-circle-primary.white {
  background-color: var(--neutral--100);
  color: var(--accent--primary-1);
}

.btn-circle-secondary {
  border: 1px solid var(--neutral--300);
  background-color: var(--neutral--100);
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 64px;
  box-shadow: 0 2px 12px 0 var(--general--shadow-02);
  color: var(--neutral--800);
  transform-style: preserve-3d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  line-height: 1em;
  text-decoration: none;
  transition: border-color .3s, transform .3s, background-color .3s, color .3s;
  display: flex;
}

.btn-circle-secondary:hover {
  border-color: var(--accent--primary-1);
  background-color: var(--accent--primary-1);
  color: var(--neutral--100);
  transform: scale3d(.94, .94, 1.01);
}

.btn-circle-secondary.small {
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  font-size: 24px;
}

.btn-circle-secondary.small.accordion-btn {
  border-color: var(--neutral--300);
  background-color: var(--neutral--300);
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 64px;
  box-shadow: none;
  color: var(--neutral--800);
  background-image: none;
  transition-property: none;
}

.btn-circle-secondary.small.accordion-btn:hover {
  transform: none;
}

.btn-circle-secondary.large {
  width: 88px;
  min-width: 88px;
  height: 88px;
  min-height: 88px;
  font-size: 36px;
}

.btn-circle-secondary.white {
  box-shadow: none;
  color: var(--neutral--100);
  background-color: #fff6;
  border-color: #ffffff7d;
}

.btn-circle-secondary.white:hover {
  border-color: var(--neutral--100);
  background-color: var(--neutral--100);
  color: var(--neutral--800);
}

.btn-circle-secondary.accordion-btn {
  position: relative;
}

.hidden-on-desktop {
  display: none;
}

.flex-vertical {
  flex-direction: column;
  display: flex;
}

.flex-vertical.start {
  align-items: flex-start;
}

.flex-vertical.start.justify-center {
  justify-content: center;
}

.flex-vertical.gap-8px {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.flex-vertical.center {
  justify-content: center;
  align-items: center;
}

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

.flex-horizontal.start {
  justify-content: flex-start;
}

.flex-horizontal.start.flex-wrap---16px-rows {
  grid-row-gap: 16px;
  flex-wrap: wrap;
}

.flex-horizontal.flex-wrap {
  flex-wrap: wrap;
}

.flex-horizontal.space-between {
  justify-content: space-between;
}

.flex-horizontal.mg-bottom--2px.text-align-left {
  text-align: left;
}

.flex-horizontal.align-left {
  justify-content: flex-start;
  align-items: center;
}

.flex-horizontal.flex-wrap---gap-16px {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
}

.flex-horizontal.gap-8p {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  cursor: pointer;
}

.flex-horizontal.feedback-card {
  border: 1px solid var(--neutral--300);
  border-radius: var(--radius--standart);
  background-image: linear-gradient(90deg, var(--neutral--100), #fffdf7 60%, #f8fce4);
  padding: 16px;
}

.footer-bottom-wrapper {
  background-color: #0b3a3d;
}

.footer-logo {
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .3s;
}

.footer-logo:hover {
  transform: scale3d(.96, .96, 1.01);
}

.footer-logo-wrapper {
  width: 100%;
  max-width: 158px;
}

.footer-list-wrapper {
  max-width: 206px;
  margin-bottom: 0;
  padding-left: 0;
  line-height: 1.125em;
}

.footer-list-item {
  margin-bottom: 12px;
  padding-left: 0;
}

.footer-list-item.last {
  margin-bottom: 0;
}

.footer-link {
  color: var(--neutral--100);
  font-size: 16px;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--accent--primary-1);
}

.success-message {
  color: var(--neutral--800);
  background-color: #0000;
  padding: 0;
}

.success-message.color-neutral-100 {
  color: var(--neutral--100);
}

.error-message {
  color: var(--system--300);
  background-color: #0000;
  margin-top: 20px;
  padding: 0;
}

.text-center {
  text-align: center;
}

.sticky-top {
  position: sticky;
  top: 0;
}

.sticky-top._24px-top {
  top: 24px;
}

/* Globale Farbe für die dekorativen Hintergrund-Linien (Sage-Tone mit Alpha).
   Inline-SVGs nutzen stroke="currentColor" — ein Wert hier steuert ALLE Linien
   (Hero auf Preise/Datensicherheit/Kontakt, CTA-Banner, Karriere etc.).
   Plugin: site/plugins/floating-line/index.php
   Helper: floatingLine($filename, $extraClass) */
:root {
  --marketing-line-color: rgba(157, 188, 118, 0.45);
}

/* 2-col Layout (Text + Bild, z.B. Über uns Mission, Datensicherheit Backend-Partner)
   Vertikal zentrieren, größerer Spaltenabstand für besseres Atmen. */
.grid-2-columns.content-left---image-right {
  align-items: center;
  column-gap: 60px;
}
@media (max-width: 991px) {
  .grid-2-columns.content-left---image-right {
    column-gap: 40px;
  }
  /* Tablet + Mobile: Reverse NUR wenn das erste Kind ein image-wrapper ist
     (=Über Mission). Datensicherheit hat Text als erstes → KEIN Swap. */
  .grid-2-columns.content-left---image-right:has(> :first-child .image-wrapper.content-left---image-right---image) > :first-child {
    order: 2;
  }
  .grid-2-columns.content-left---image-right:has(> :first-child .image-wrapper.content-left---image-right---image) > :last-child {
    order: 1;
  }
}

.floating-item {
  position: absolute;
  color: var(--marketing-line-color);
}

.floating-item.cta, .floating-item.cta-newsletter-v1 {
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  inset: 0%;
}

.floating-item.team-member {
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  inset: 0%;
}

.floating-item.hero-help-articel, .floating-item.card-forgot-password-bg, .floating-item.hero-legal, .floating-item.card-landing-demo-bg, .floating-item.card-password-page-bg---main, .floating-item.card-not-found-bg---main {
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  inset: 0%;
}

._w-h-100 {
  width: 100%;
  height: 100%;
}

._w-h-100.fit-cover {
  flex: 1;
}

.fit-cover {
  object-fit: cover;
}

.fit-cover._w-h-100.team-page-picture {
  object-position: 50% 0%;
}

.fit-cover.min-h-100 {
  min-height: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.text-decoration-none {
  text-decoration: none;
}

.grid-6-columns {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-6-columns.logo-strip {
  grid-column-gap: 40px;
  grid-template-columns: auto auto auto auto auto;
  justify-content: space-between;
  place-items: center;
}

.accordion-item-wrapper {
  background-color: var(--neutral--100);
  cursor: pointer;
  width: 100%;
  transform-style: preserve-3d;
  border-radius: 12px;
  justify-content: space-between;
  padding: 32px;
  transition: transform .3s;
  display: flex;
}

.accordion-item-wrapper:hover {
  transform: scale3d(.98, .98, 1.01);
}

.accordion-header {
  align-items: center;
  display: flex;
}

.acordion-body {
  width: 100%;
  overflow: hidden;
}

.accordion-spacer {
  min-height: 11px;
}

.accordion-content-wrapper {
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.accordion-title {
  margin-bottom: 0;
}

.empty-state {
  border: 1px solid var(--neutral--400);
  background-color: var(--neutral--100);
  box-shadow: 0 2px 12px 0 var(--general--shadow-02);
  text-align: center;
  border-radius: 11px;
  padding: 26px 24px;
}

.empty-state.card-empty {
  box-shadow: none;
  background-color: #0000;
  border-left-style: none;
  border-right-style: none;
  border-radius: 0;
  margin-top: 0;
  padding: 10px 0;
}

.empty-state.card-empty.divider-top-0px {
  border-top-width: 0;
}

.bg-overlay-gradient {
  background-image: linear-gradient(#0000, #000);
}

.bg-overlay-gradient.banking-experience {
  background-image: linear-gradient(#0000, #000c);
  height: 60%;
  position: absolute;
  inset: auto 0% 0%;
}

.bg-overlay-gradient.testimonials {
  background-image: linear-gradient(#0000, #000000d4);
  height: 68%;
  position: absolute;
  inset: auto 0% 0%;
}

.bg-overlay-gradient.testimonials-overlay {
  background-image: linear-gradient(#0000, #000000c2);
  height: 100%;
  position: absolute;
  inset: auto 0% 0%;
}

.bg-overlay-gradient.bg-mobile-app {
  z-index: 2;
  background-image: linear-gradient(#112D1D00, #112D1D);
  height: 30vh;
  position: absolute;
  inset: auto 0% 0%;
}

.mg-bottom-4px {
  margin-bottom: 4px;
}

.height-100 {
  height: 100%;
}

.height-100.visible-on-tablet {
  display: none;
}

.blog-card-image {
  object-fit: cover;
  width: 100%;
  min-height: 100%;
}

.blog-card-image-wrapper {
  border-radius: 24px;
  overflow: hidden;
  transform: translate(0);
}

.blog-card-image-wrapper.inside-card {
  border-radius: var(--radius--standart) var(--radius--standart) 0px 0px;
  object-fit: fill;
  min-height: 357px;
  max-height: 357px;
  display: flex;
  position: relative;
}

.blog-card-wrapper {
  border: 1px solid var(--neutral--400);
  border-radius: var(--radius--standart);
  background-color: var(--neutral--100);
  max-width: 1010px;
  min-height: 100%;
  color: var(--neutral--600);
  flex-direction: column;
  margin-left: auto;
  text-decoration: none;
  display: flex;
}

.blog-card-content-inside {
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  padding: 55px 32px 50px;
  display: flex;
  position: relative;
}

.image-wrapper {
  overflow: hidden;
}

.image-wrapper.border-radius-12px.hero-image {
  display: flex;
}

.image-wrapper.border-radius-12px.content-left---image-right---image, .image-wrapper.border-radius-12px.blog-post-image {
  flex-direction: column;
  min-height: 100%;
  display: flex;
}

.image-wrapper.border-radius-12px.team-page-picture-wrap {
  max-width: 462px;
  max-height: 553px;
  display: flex;
}

.image-wrapper.border-radius-12px.card-product-image {
  flex-direction: column;
  justify-content: center;
  max-height: 388px;
  display: flex;
  position: relative;
  transform: translate(0);
}

.image-wrapper.border-radius-12px.tabs-2-cols-tab-pane---image {
  position: relative;
}

.image-wrapper.border-radius-5px.size-22px {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 22px;
  max-width: 22px;
  min-height: 22px;
  max-height: 22px;
  display: flex;
}

._404-not-found {
  color: var(--accent--primary-1);
  font-size: 18vw;
  font-weight: 500;
  line-height: 1em;
}

.pay-btn {
  border-radius: 6px;
}

.pay-btn.order-summary {
  height: 50px;
}

.checkout-form {
  background-color: #0000;
  min-height: auto;
  padding: 0;
}

.checkout-col-left {
  margin-right: 0;
}

.checkout-col-right {
  position: static;
}

.checkout-block-header {
  grid-column-gap: 15px;
  border-width: 0 0 1px;
  border-bottom-color: var(--neutral--400);
  background-color: #0000;
  flex-wrap: wrap-reverse;
  padding: 0 0 20px;
}

.checkout-block-content {
  background-color: #0000;
  border: 0 solid #000;
  padding: 30px 0 0;
}

.checkout-block-content.pd-top-0px {
  padding-top: 0;
}

.shipping-list {
  border: 0 solid #000;
}

.shipping-method {
  border-style: solid;
  border-width: 0 0 1px;
  border-color: black black var(--neutral--400);
  padding: 31px 0;
}

.shipping-method:last-child {
  border-bottom-style: none;
  padding-bottom: 0;
}

.shipping-price {
  color: var(--neutral--800);
  line-height: 1.333em;
}

.order-item-list {
  margin-bottom: 0;
}

.order-item {
  border-bottom: 1px solid var(--neutral--400);
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 18px;
  margin-bottom: 18px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.order-item:last-child {
  border-bottom-style: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.order-list-price {
  color: var(--neutral--800);
  line-height: 1.333em;
}

.order-list-title {
  color: var(--neutral--800);
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.333em;
  text-decoration: none;
  display: inline-block;
}

.order-list-title:hover {
  color: var(--accent--primary-1);
}

.order-item-image {
  max-width: 100px;
  transform-style: preserve-3d;
  border-radius: 6px;
  transition: opacity .3s, transform .3s;
  overflow: hidden;
  transform: translate(0);
}

.order-item-image:hover {
  opacity: .7;
  transform: scale3d(.95, .95, 1.01);
}

.order-option-item {
  padding-left: 0;
}

.order-item-result {
  color: var(--neutral--800);
}

.order-summary-price {
  color: var(--neutral--800);
  font-weight: 500;
}

.discounts-wrapper {
  border-width: 1px 0 0;
  border-top-color: var(--neutral--400);
  margin-top: 32px;
  padding: 32px 0 0;
}

.text-underline {
  text-decoration: underline;
}

.z-index-1 {
  z-index: 1;
  position: relative;
}

.home-surprises-card {
  border: 1px solid var(--neutral--300);
  box-shadow: 0 2px 12px 0 var(--general--shadow-02);
  border-radius: 12px;
  overflow: hidden;
}

.mg-bottom-12px {
  margin-bottom: 12px;
}

.flex {
  display: flex;
}

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

.mg-section {
  border-radius: var(--radius--standart);
  margin-left: 16px;
  margin-right: 16px;
  position: relative;
  overflow: hidden;
}

/* Konsistente Content-Position: Container in mg-section bekommt weniger
   Padding, damit Content-X identisch zu regulären Sections ist.
   Goal: Content immer 24px (Desktop+Tablet) / 16px (Mobile) von Page-Edge entfernt. */
.mg-section .container-default {
  padding-left: 8px;     /* 16 mg-margin + 8 = 24 */
  padding-right: 8px;
}
@media (max-width: 991px) {
  /* Tablet: 12 mg-margin + 12 = 24 */
  .mg-section .container-default {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 479px) {
  /* Mobile: 12 mg-margin + 12 = 24 (statt 4 = 16 — mehr Atemraum zum Rand) */
  .mg-section .container-default {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.mg-section.cta {
  background-color: var(--secondary--color-1);
  /* Cream-Abstand außerhalb des dunklen Banners (margin collapsed nicht
     mit padding der Nachbar-Section → echte 120 + 120 = 240px Gap). */
  margin-top: 120px;
  margin-bottom: 120px;
}

.mg-section.bg-secondary-1.hero-berufe {
  z-index: -1;
  min-height: 519px;
}

.arrow-icon {
  margin-left: 15px;
  font-family: Arrow BTN, sans-serif;
  transform: translate(0);
}

.max-w-550px {
  max-width: 550px;
}

.logo-wrapper {
  margin-top: 165px;
}

.card-mobile-app {
  background-color: var(--secondary--color-1);
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.card-mobile-app.pd-24px---image-bot {
  background-color: var(--secondary--color-1);
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 32px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.card-mobile-app.pd-24px---bg-accent-1 {
  background-color: var(--accent--primary-1);
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 80px 24px 32px;
  transition: transform .3s, color .3s;
  display: flex;
}

.card-mobile-app.pd-24px---bg-accent-1:hover {
  transform: scale(.96);
}

.card-mobile-app.image-top-earning-expense {
  background-color: var(--secondary--color-2);
  flex-direction: column;
  align-items: stretch;
  padding-top: 32px;
  padding-bottom: 32px;
  padding-right: 0;
  display: flex;
}

.card-mobile-app.image-top-crypto {
  grid-row-gap: 28px;
  background-color: var(--secondary--color-1);
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 32px;
  padding-bottom: 32px;
  padding-right: 0;
  display: flex;
}

.text-banking-experience {
  justify-content: center;
  align-self: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.text-banking-experience.justify-left {
  justify-content: flex-start;
}

.content-banking-experience {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: minmax(223px, 1.5fr) 1.5fr;
  grid-auto-columns: 1fr;
  align-items: center;
  text-decoration: none;
  display: grid;
  position: absolute;
  inset: auto 32px 32px;
}

.image-phone-balance {
  width: 88%;
  margin-left: auto;
  margin-right: auto;
}

.max-w-330px {
  max-width: 330px;
}

.text---pd-24px {
  padding-left: 24px;
  padding-right: 24px;
}

.image-absolute-bot {
  margin-top: 4%;
}

.arrow-circle {
  border: 1px solid var(--neutral--300);
  background-color: var(--neutral--100);
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: var(--neutral--800);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 32px 32px auto auto;
}

.stats-text {
  color: var(--neutral--100);
  margin-bottom: 16px;
  font-size: 158px;
  font-weight: 400;
  line-height: .864em;
}

.testimonials-content {
  z-index: 1;
  position: absolute;
  inset: auto 24px 32px;
}

.testimonials-text-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.testimonials-wrapper {
  border-radius: var(--radius--standart);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.border-radius-12px {
  border-radius: var(--radius--standart);
  overflow: hidden;
}

.border-radius-12px.border-color-neutral-400 {
  border: 1px solid var(--neutral--400);
}

.space-168px-alt {
  width: 100%;
  max-width: 100%;
  height: 168px;
}

.line-decorative {
  z-index: -1;
  width: 56%;
  height: 36%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 18% 0% auto;
}

.line-decorative.bottom {
  width: 58%;
  height: 34%;
  margin-left: auto;
  margin-right: auto;
  inset: auto 36% 128px auto;
}

.testimonials-wrapper-v1 {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.testimonials-v1-text-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.testimonials-content-v1 {
  z-index: 1;
  text-decoration: none;
  position: absolute;
  inset: auto 40px 40px;
}

.line-icon-btn {
  font-family: Line Rounded Icons, sans-serif;
  font-size: 20px;
  line-height: 18px;
  transform: rotate(90deg);
}

.badge-top-inside {
  position: absolute;
  top: -20px;
}

.text-link---arrow {
  color: var(--neutral--800);
  letter-spacing: .64px;
  text-transform: uppercase;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  display: flex;
}

.text-no-wrap {
  white-space: nowrap;
}

.style---logo-sidebar---link {
  width: 100%;
  max-width: 158px;
}

.position-absolute-pricing {
  position: absolute;
  top: -8px;
  left: -10px;
  transform: rotate(345deg);
}

.position-absolute-pricing.hero-v1-bg {
  z-index: -1;
  width: 60%;
  inset: auto -5% -22% auto;
}

.accent-line {
  background-color: var(--accent--primary-1);
  width: 100%;
  max-width: 118px;
  height: 3px;
  min-height: 3px;
  margin-bottom: 16px;
}

.accent-line.center {
  margin-left: auto;
  margin-right: auto;
}

.mg-bottom-6px {
  margin-bottom: 6px;
}

.grid-2-col---cards {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  grid-template-rows: auto;
  grid-template-columns: minmax(650px, 1.6fr) 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.menu-title {
  color: var(--neutral--100);
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.125em;
}

.bg-color-section-alt {
  z-index: -1;
  background-color: var(--secondary--color-1);
  border-radius: 12px;
  width: 100%;
  height: 64%;
  position: absolute;
  inset: 0% 0% auto;
  overflow: hidden;
}

.tabs-2-cols-accordion-item {
  border-bottom: 1px solid var(--neutral--400);
  max-width: 450px;
  color: var(--neutral--800);
  background-color: #0000;
  padding: 32px 0;
  text-decoration: none;
}

.tabs-2-cols-accordion-item.w--current {
  background-color: #0000;
}

.tabs-2-cols-accordion-item.first {
  padding-top: 0;
}

.tabs-2-cols-accordion-item.last {
  border-bottom-style: none;
  padding-bottom: 0;
}

.mg-bottom-68px {
  margin-bottom: 68px;
}

.image-layout-alt {
  border-radius: var(--radius--standart);
  position: relative;
  overflow: hidden;
}

.layout-content-bottom {
  width: 100%;
  max-width: 500px;
  margin: 84px auto 83px;
}

.layout-content-top {
  width: 100%;
  max-width: 519px;
  margin: 90px auto 77px;
}

.cta-content {
  padding-top: 138px;
  padding-bottom: 138px;
}

.cta-image {
  width: 64%;
  max-height: 84%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  position: absolute;
  inset: 0% 24px 0% 0%;
}

.mg-bottom-2px {
  margin-bottom: 2px;
}

.team-item-wrapper {
  border-radius: var(--radius--standart);
  width: 100%;
  max-height: 553px;
  color: var(--neutral--700);
  flex-direction: column;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.team-item-wrapper:hover {
  color: var(--neutral--700);
}

.values-icon-wrapper {
  align-items: flex-start;
  max-width: 516px;
  display: flex;
}

.values-icon {
  justify-content: flex-end;
  align-items: center;
  min-width: 82px;
  max-width: 82px;
  min-height: 82px;
  max-height: 82px;
  margin-right: 26px;
  display: flex;
}

.grid-social-media {
  grid-template-rows: auto;
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  justify-items: start;
}

.grid-social-media.author-social-media-link-wrapper {
  grid-template-columns: auto auto auto;
  margin-top: 36px;
}

.grid-social-media.gap-columns-24px {
  grid-column-gap: 24px;
}

.content-link {
  color: var(--neutral--700);
  text-decoration: none;
}

.content-link:hover {
  color: var(--neutral--700);
}

.mg-bottom-50px {
  margin-bottom: 50px;
}

.contact-form-block {
  flex-direction: column;
  justify-content: center;
  min-height: 490px;
  margin-bottom: 0;
  display: flex;
}

.contact-form-grid {
  grid-column-gap: 32px;
  grid-row-gap: 25px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.text-area-wrapper {
  min-width: 100%;
  max-width: 100%;
}

.contact-form-bottom {
  grid-row-gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.contact-link {
  border-radius: var(--radius--standart);
  color: var(--neutral--700);
  text-align: center;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 32px 24px;
  text-decoration: none;
  display: flex;
}

.contact-link-icon {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 81px;
  max-width: 81px;
  min-height: 81px;
  max-height: 81px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.perks-icon {
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 82px;
  max-width: 82px;
  min-height: 82px;
  max-height: 82px;
  margin-right: 26px;
  display: flex;
}

.perks-icon-wrapper {
  align-items: flex-start;
  max-width: 452px;
  display: flex;
}

.gap-row-75px {
  grid-row-gap: 75px;
}

.career-item {
  border-top: 1px solid var(--neutral--400);
  border-bottom: 1px solid var(--neutral--400);
  transform-style: preserve-3d;
  margin-bottom: -1px;
  padding-top: 40px;
  padding-bottom: 40px;
  transition: transform .3s;
}

.career-item:first-child {
  border-top-style: none;
  padding-top: 0;
}

.career-item:last-child {
  border-bottom-style: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.career-item:hover {
  transform: translate3d(8px, 0, .01px);
}

.career-wrapper {
  border-radius: var(--radius--very-small);
  width: 100%;
  color: var(--neutral--600);
  text-decoration: none;
}

.career-wrapper:hover {
  color: var(--neutral--600);
}

.career-grid {
  grid-template-rows: auto;
  grid-template-columns: 1.75fr 1fr 1fr auto;
  align-items: end;
}

.mg-bottom-60px {
  margin-bottom: 60px;
}

.card-sidebar-v1-icon {
  min-width: 81px;
  max-width: 81px;
  min-height: 81px;
  max-height: 81px;
}

.blog-post-featured-image {
  border: 1px solid var(--neutral--400);
  border-radius: var(--radius--standart);
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  max-width: 49%;
  display: flex;
  overflow: hidden;
  transform: translate(0);
}

.blog-post-featured-content {
  flex: 1;
  padding: 140px 40px;
}

.mg-bottom-20px {
  margin-bottom: 20px;
}

.mg-bottom-42px {
  margin-bottom: 42px;
}

.blog-post-content-top {
  grid-row-gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.card-author-content-top {
  align-items: center;
  display: flex;
}

.card-author-avatar {
  border-radius: 12px;
  min-width: 80px;
  max-width: 80px;
  min-height: 80px;
  max-height: 80px;
  margin-right: 15px;
  overflow: hidden;
  transform: translate(0);
}

.mg-bottom--16px {
  margin-bottom: -16px;
}

.rich-text-news img {
  border-radius: 12px;
}

.rich-text-news p {
  margin-top: 16px;
  margin-bottom: 16px;
}

.rich-text-news h2 {
  margin-bottom: 16px;
  font-size: 54px;
  line-height: 1.222em;
}

.rich-text-news h3 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 38px;
  line-height: 1.316em;
}

.rich-text-news figure, .rich-text-news ul, .rich-text-news ol {
  margin-top: 32px;
  margin-bottom: 32px;
}

.rich-text-news h6 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.333em;
}

.rich-text-news h5 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 1.273em;
}

.rich-text-news h4 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.417em;
}

.rich-text-news li {
  margin-bottom: 16px;
}

.rich-text-news blockquote {
  border-radius: 12px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.rich-text img {
  border-radius: 12px;
}

.rich-text p {
  margin-top: 16px;
  margin-bottom: 16px;
}

.rich-text h2 {
  margin-bottom: 16px;
  font-size: 30px;
  line-height: 1.2em;
}

.rich-text h3 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.rich-text figure, .rich-text ul, .rich-text ol {
  margin-top: 32px;
  margin-bottom: 32px;
}

.rich-text h6, .rich-text h5, .rich-text h4 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.rich-text li {
  margin-bottom: 16px;
}

.rich-text blockquote {
  border-radius: 12px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.rich-text-v4 img {
  border-radius: 12px;
}

.rich-text-v4 p {
  margin-top: 16px;
  margin-bottom: 16px;
}

.rich-text-v4 h2 {
  margin-bottom: 16px;
  font-size: 58px;
  line-height: 1.121em;
}

.rich-text-v4 h3 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 38px;
  line-height: 1.184em;
}

.rich-text-v4 figure, .rich-text-v4 ul, .rich-text-v4 ol {
  margin-top: 32px;
  margin-bottom: 32px;
}

.rich-text-v4 h6 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.333em;
}

.rich-text-v4 h5 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 1.273em;
}

.rich-text-v4 h4 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 30px;
  line-height: 1.2em;
}

.rich-text-v4 li {
  margin-bottom: 16px;
}

.rich-text-v4 blockquote {
  border-radius: 12px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.rich-text-v4 a {
  color: var(--secondary--color-1);
}

.rich-text-v4 a:hover {
  color: var(--accent--primary-1);
}

.mg-bottom--48px {
  margin-bottom: -48px;
}

.footer-bottom {
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
}
@media (max-width: 479px) {
  .footer-bottom {
    text-align: left;
    align-items: flex-start;
  }
}

.footer-wrapper {
  border-top-left-radius: var(--radius--standart);
  border-top-right-radius: var(--radius--standart);
  background-color: var(--secondary--color-1);
  padding-top: 80px;
  padding-bottom: 16px;
}

.footer-wrapper.small {
  background-color: #0000;
}

.grid-footer {
  grid-column-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: .6fr minmax(520px, 1fr);
  justify-content: space-between;
  place-items: start stretch;
}

.grid-footer---menu {
  grid-template-rows: auto;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  width: 100%;
  max-width: 768px;
}

.demo-form-block {
  flex-direction: column;
  justify-content: center;
  min-height: 340px;
  margin-bottom: 0;
  display: flex;
}

.demo-form {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.border-radius-5px {
  border-radius: 5px;
}

.mg-right-10px {
  margin-right: 10px;
}

.card-product-content {
  padding: 32px;
}

.card-product-content-bottom {
  margin-top: auto;
  padding-bottom: 32px;
  padding-left: 32px;
  padding-right: 32px;
}

.card-product-add-cart---main {
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  display: flex;
}

.add-cart-default-state {
  margin-bottom: 0;
}

.add-cart {
  flex-direction: column;
  justify-content: center;
  min-height: 160px;
  display: flex;
}

.demo-features-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;
}

.not-found-card-content---grid {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  position: relative;
}

.password-page-content {
  z-index: 1;
  text-align: center;
  max-width: 698px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.order-summary-line-item {
  grid-column-gap: 15px;
  flex-wrap: wrap;
}

.shipping-method-content {
  margin-left: 0;
}

.order-item-content---main {
  display: flex;
}

.hidden {
  display: none;
}

.color-accent {
  color: #9DBC76;
}

.bg-color-section-2 {
  z-index: -1;
  background-color: #112D1D;
  border-radius: 12px;
  width: 100%;
  height: 64%;
  position: absolute;
  inset: 0% 0% auto;
  overflow: hidden;
}

.bg-color-section-2._100 {
  height: 100%;
}

.notification-bar-link {
  color: var(--neutral--100);
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.notification-bar-link:hover {
  color: var(--neutral--400);
}

.notification-bar-small-link {
  color: var(--neutral--100);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--secondary--color-1);
  text-decoration-color: var(--secondary--color-1);
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1em;
  transition: text-decoration-color .3s, color .3s;
  display: inline-flex;
}

.notification-bar-small-link:hover {
  color: var(--neutral--400);
  -webkit-text-decoration-color: var(--neutral--400);
  text-decoration-color: var(--neutral--400);
}

.header-wrapper {
  z-index: 99;
  border-bottom: 1px solid var(--neutral--200);
  border-bottom-left-radius: var(--radius--standart);
  border-bottom-right-radius: var(--radius--standart);
  background-color: var(--neutral--100);
  padding-top: 18px;
  padding-bottom: 18px;
  position: sticky;
  top: 0;
}

.header-left-side {
  align-items: center;
  display: flex;
}

.header-logo-link {
  text-decoration: none;       /* ersetzt .w-nav-brand Default */
  width: 100%;
  max-width: 155px;
  transform-style: preserve-3d;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  transition: transform .3s, color .3s;
  display: flex;
}

.header-logo-link:hover {
  transform: scale3d(.98, .98, 1.01);
}

.hamburger-menu-bar {
  background-color: #0f0c09;
  border-radius: 20px;
  width: 52px;
  height: 2px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.header-logo {
  width: 100%;
  min-width: 160px;
  max-width: 160px;
  display: block;
}

.header-logo.small {
  min-width: 102px;
}

.hamburger-menu-wrapper {
  display: none;               /* Desktop: versteckt — ersetzt .w-nav-button Default */
  padding: 0;
  transition: transform .3s;
}
@media (max-width: 991px) {
  .hamburger-menu-wrapper {
    display: block;            /* Tablet/Mobile: sichtbar */
  }
}

.hamburger-menu-wrapper:hover {
  transform: scale(.96);
}

.hamburger-menu-wrapper.is-open {
  background-color: #0000;
}

.dropdown-card {
  border: 1px solid var(--neutral--400);
  background-color: var(--neutral--100);
  width: 800px;
  box-shadow: 0 2px 12px 0 var(--general--shadow-02);
  border-radius: 10px;
  padding: 20px;
  overflow: hidden;
}

.dropdown-card.grid-2-columns.gap-12px {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}

.dropdown-wrapper {
  display: inline-block;
  position: relative;          /* Anchor für .dropdown-list (absolute) */
  text-align: left;
  z-index: 900;
}

.dropdown-list {
  position: absolute;          /* ersetzt .w-dropdown-list Default — sonst nimmt sie Layout-Platz */
  min-width: 100%;
  background-color: #0000;
  padding-top: 24px;
  transform: translate(-56%);
}

.dropdown-toggle {
  color: var(--neutral--800);
  align-items: center;
  padding: 0;
  font-size: 18px;
  transition: color 200ms ease;
  display: flex;
  cursor: pointer;             /* ersetzt .w-dropdown-toggle Default */
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-button {
  text-decoration: none;       /* ersetzt .w-dropdown-link Default */
}

/* "Active"-State — sowohl Click-Open (.w--open / .is-user-open) als auch
   Desktop-Hover/Focus auf den ganzen Wrapper. Alles via dem Wrapper-Trigger,
   damit text + arrow + dropdown-list synchron animieren UND grün bleiben
   solange der Cursor irgendwo IM Wrapper ist (auch wenn auf einem
   Dropdown-Link wie "News"). */
.dropdown-wrapper.w--open .dropdown-toggle,
.dropdown-wrapper.is-user-open .dropdown-toggle {
  color: var(--accent--primary-1);
}

@media (min-width: 992px) {
  .dropdown-wrapper:hover .dropdown-toggle,
  .dropdown-wrapper:focus-within .dropdown-toggle {
    color: var(--accent--primary-1);
  }
}

.dropdown-nav-pages-wrapper {
  width: 100%;
}

.dropdown-nav-pages-wrapper.last {
  margin-bottom: 0;
}

.dropdown-button {
  width: 100%;
  color: var(--neutral--800);
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background-color .3s, color .3s;
  display: block;
}

.dropdown-button:hover {
  background-color: var(--neutral--300);
}

.dropdown-button.featured {
  background-color: var(--neutral--300);
  border-radius: 8px;
  padding: 10px 12px;
  transition: background-color .3s, color .3s;
}

.dropdown-button.featured:hover {
  background-color: var(--neutral--200);
}

.dropdown-image {
  object-fit: contain;
  width: 24px;
  height: 24px;
}

.dropdown-flex {
  align-items: center;
  display: flex;
}

.dropdown-flex.dropdown-button-v1 {
  display: flex;
}

.image-wrapper-dropdown {
  min-width: 24px;
  min-height: 24px;
  margin-right: 14px;
  overflow: hidden;
}

.image-wrapper-dropdown.dropdown-button-icon {
  align-self: flex-start;
}

.dropdown-nav-container {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.nav-dropdown-title {
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.333em;
}

.legal-text {
  color: var(--neutral--100);
  margin-bottom: 0;
  font-size: 16px;
}

.card-cryptocurrencies {
  border-radius: var(--radius--standart);
  background-color: var(--secondary--color-2);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-feature-1 {
  width: 53%;
  position: relative;
}

.card-mobile-app-wrapper {
  border-radius: var(--radius--standart);
  background-color: var(--secondary--color-1);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-feature-3 {
  width: 100%;
}

.card-earning-expense-reports {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  border-radius: var(--radius--standart);
  background-color: var(--neutral--300);
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 60px 99px 60px 32px;
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: hidden;
}

.content-text-bottom {
  z-index: 3;
  margin: auto 130px 32px 32px;
}

.image-feature-2 {
  width: 43%;
}

.mg-bottom-111px {
  margin-bottom: 111px;
}

.position-relative---z-index-1 {
  z-index: 1;
  position: relative;
}

.video-thumbnail-full-width-right-container {
  z-index: 1;
  display: flex;
  position: relative;
}

.video-bg-image {
  object-fit: cover;
  width: 100%;
  max-width: none;
}

.bg-overlay {
  z-index: 1;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.bg-overlay._40 {
  background-color: #0006;
}

.bg-overlay._40.hidden {
  display: none;
}

.bg-overlay._0-07 {
  background-color: #00000012;
}

.lightbox-video-wrapper {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.lightbox-video-wrapper.hidden {
  display: none;
}

.lightbox-video-icon {
  z-index: 2;
  min-width: 140px;
  max-width: 140px;
  min-height: 140px;
  max-height: 140px;
  transform-style: preserve-3d;
  justify-content: center;
  align-items: center;
  transition-property: transform;
  display: flex;
  position: absolute;
}

.lightbox-video-icon:hover {
  transform: scale3d(1.04, 1.04, 1.01);
}

.mg-top-68px {
  margin-top: 68px;
}

.problem-solution-image {
  border-radius: var(--radius--standart);
  width: 100%;
  height: 578px;
}

.input-wrapper {
  position: relative;
}

.input-icon-wrapper {
  color: var(--neutral--600);
  cursor: default;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 16px;
}

.tabs-wrapper {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto auto;
  grid-template-columns: .25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  display: grid;
}

.event-categories-item-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
  position: sticky;
  top: 24px;
}

.filter-pagination-count {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 1px solid var(--accent--primary-1);
  border-radius: var(--radius--very-small);
  background-color: var(--accent--primary-1);
  min-height: 42px;
  color: var(--neutral--100);
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-left: 2px;
  margin-right: 2px;
  padding: 8px 16px 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25em;
  text-decoration: none;
  transition: transform .3s;
  display: flex;
  position: relative;
  box-shadow: 0 4px 8px #19213d1a;
}

.filter-pagination-count:hover {
  color: #fff;
  transform: scale(.96);
}

.filter-pagination-count.w--current {
  cursor: default;
  transform: translate(0, -4px);
}

.switcher {
  z-index: -1;
  background-color: var(--accent--primary-1);
  border-radius: 6px;
  width: 133.025px;
  height: 45px;
  position: absolute;
  left: 4px;
  right: 4px;
}

.monthly-wrap {
  color: var(--neutral--100);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-left: 12px;
  margin-right: 12px;
  padding: 10px;
  display: flex;
}

.switch-p {
  margin-bottom: 0;
}

.oneyear-wrap {
  color: var(--neutral--600);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-left: 12px;
  margin-right: 12px;
  padding: 10px;
  display: flex;
  position: relative;
}

.white {
  color: #fff;
}

.tabs-menu {
  display: none;
}

.feature-wrapper {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.height-1-5em {
  line-height: 1.5em;
}

.price-button-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  margin-top: auto;
  display: flex;
}

.price-button-wrapper.mg-top-0px {
  margin-top: 0;
}

.display-inline {
  display: inline;
}

.btn-secondary-wo-animation {
  border: 1px solid var(--neutral--800);
  color: var(--neutral--800);
  text-align: center;
  letter-spacing: .64px;
  text-transform: uppercase;
  background-color: #0000;
  border-radius: 6px;
  padding: 18px 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.125em;
  text-decoration: none;
  transition: border-color .3s, transform .3s, background-color .3s, color .3s;
}

.btn-secondary-wo-animation.small {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.143em;
}

.price-com-area-wrapepr {
  border-radius: var(--radius--very-small);
  background-color: var(--accent--primary-1);
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 18px;
  display: flex;
}
/* Section-Titles auf Sage-BG weiß (User-Wunsch: konsistent mit Buttons auf Sage)
   Betrifft: "Unsere Pakete" + Plan-Namen + Kategorie-Headings (Terminverwaltung, Patientenverwaltung etc.) */
.price-com-area-wrapepr .heading-h3-size,
.grid-5-columns.price-com-grid-5-col.plans-wrapper > * {
  color: #FFFFFF !important;
}

.position-sticky {
  position: sticky;
  top: 0;
}

.position-sticky.plan-com-header-wrapper {
  z-index: 2;
  border-radius: 0px 0px var(--radius--very-small) var(--radius--very-small);
  background-color: var(--neutral--100);
  margin-bottom: 8px;
  margin-left: -1px;
  margin-right: -1px;
  padding-top: 34px;
  padding-left: 1px;
  padding-right: 1px;
}

.position-sticky.plan-com-subheader-wrapper {
  z-index: 1;
  border-radius: 0px 0px var(--radius--very-small) var(--radius--very-small);
  background-color: var(--neutral--100);
  padding-top: 16px;
  top: 94px;
}

.tab-link {
  border-radius: var(--radius--very-small);
  background-color: #0000;
  justify-content: space-between;
  padding: 10px 18px;
  display: flex;
}

.tab-link.w--current {
  background-color: var(--accent--primary-1);
  order: -1;
}

.tab-link.first {
  z-index: 2;
  background-color: var(--accent--primary-1);
}

.plan-com-dropdown-wrap {
  width: 100%;
}

.dropdown {
  z-index: 3;
  border-bottom-left-radius: var(--radius--very-small);
  border-bottom-right-radius: var(--radius--very-small);
  background-color: var(--neutral--100);
  width: 100%;
  padding-top: 54px;
  position: sticky;
  top: 0;
}

.replace-text {
  color: var(--neutral--800);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.417em;
}

.price-com-dropown-list {
  z-index: 1;
  border-bottom-left-radius: var(--radius--very-small);
  border-bottom-right-radius: var(--radius--very-small);
  background-color: var(--neutral--100);
  margin-top: -8px;
  padding-top: 16px;
}

.tabs_component {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.price-com-dropdown-list-wrap {
  border: 2px solid var(--accent--primary-1);
  border-radius: var(--radius--very-small);
  background-color: var(--accent--primary-1);
}

.pd-top-8px {
  padding-top: 8px;
}

.overflow-visible {
  overflow: visible;
}

.cta-visible-on-tablet {
  display: none;
}

.cta-visible-on-laptop {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.cta-visible-on-mbl-mbp {
  display: none;
}

.layout-content-berufe {
  width: 100%;
  margin-top: 48px;
  margin-bottom: 48px;
}

.problem-solution-image-berufe {
  border-radius: var(--radius--standart);
  width: 100%;
  height: 100%;
}

.card-image---image {
  border: 1px solid var(--neutral--400);
  border-radius: 12px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.position-relative---mbl.pd-bottom-12px {
  padding-bottom: 12px;
}

.statt-preis {
  color: var(--system--red-400);
  vertical-align: super;
  font-size: 18px;
  text-decoration: line-through;
}

.countdown-wrapper {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.countdown-item {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.clock-number {
  color: var(--accent--primary-1);
  font-size: 58px;
  font-weight: 400;
  line-height: 1.184em;
}

.mockup-shape {
  z-index: 2;
  width: 100%;
  position: relative;
}

.mockup-shape.ipad {
  display: none;
}

.tablet-mockup-animation {
  z-index: 2;
  position: relative;
}

.ipad-mockup {
  position: relative;
}

.screenshot-scroll {
  width: 100%;
}

._3d-tablet-wrap {
  perspective: 1000px;
  perspective-origin: 50%;
}

.ipad-screen {
  z-index: 1;
  object-fit: cover;
  width: 70.8%;
  height: 70%;
  margin-top: 3.4%;
  margin-left: 14.6%;
  margin-right: 14.6%;
  position: absolute;
}

.ipad-screen.overflow-hidden, .fs-toc_link-wrapper {
  overflow: hidden;
}

.fs-toc_link-wrapper.v1 {
  padding-left: 10px;
}

.fs-toc_link {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  color: var(--neutral--800);
  margin-bottom: 8px;
  text-decoration: none;
  display: flex;
}

.fs-toc_link.w--current {
  color: var(--accent--primary-1);
}

.fs-toc_link.v1 {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  font-size: 22px;
}

.fs-toc_link-content {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.fs-toc_h-trigger {
  display: none;
}

.div-block {
  background-color: var(--neutral--500);
  width: 1.5px;
}

.is-read-time {
  text-decoration: underline;
}

.z-index-10 {
  z-index: 10;
  position: relative;
}

.twoyears-wrap {
  color: var(--neutral--600);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-left: 12px;
  margin-right: 12px;
  padding: 10px;
  display: flex;
  position: relative;
}

.last-pricing-card {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr minmax(auto, .35fr);
  grid-auto-columns: 1fr;
  place-items: center stretch;
  display: grid;
}

.mg-bottom-38px {
  margin-bottom: 38px;
}

.grid-5-columns {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-5-columns.price-com-grid-5-col {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  border-radius: var(--radius--very-small);
  grid-template-columns: 1fr .25fr .25fr .25fr .25fr;
  padding: 10px 18px;
  transition: background-color .3s;
  position: relative;
}

.grid-5-columns.price-com-grid-5-col:hover {
  background-color: #F0F3E7;        /* novella-softGreen (Style-Guide) */
}

.grid-5-columns.price-com-grid-5-col.plans-wrapper {
  z-index: 1;
  background-color: var(--accent--primary-1);
  place-items: stretch stretch;
  position: sticky;
  top: 0;
}

.grid-5-columns.price-com-grid-5-col.soon {
  background-color: var(--neutral--400);
}

.tooltip-content {
  justify-content: center;
  align-items: center;
  position: relative;
}

.tooltip-float {
  min-height: 42px;
  margin-top: auto;
  margin-bottom: auto;
  display: none;
  position: absolute;
}

.tooltip-float.top {
  z-index: 3;
  display: none;
  inset: -423% auto auto -2%;
}

.tooltip-animation {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  display: flex;
}

.tooltip {
  background-color: #fff;
  border-radius: 10px;
  justify-content: flex-start;
  align-items: center;
  min-width: 160px;
  max-width: 220px;
  min-height: 42px;
  padding: 12px 16px;
  display: flex;
  box-shadow: 4px 4px 14px #080f340a, 1px 1px 1px #170f490a, 0 0 1px #170f4908;
}

.tooltip.center-content {
  text-align: center;
  justify-content: center;
  min-width: 168px;
}

.tooltip-arrow {
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
  inset: 34% auto auto -8px;
}

.tooltip-arrow.bottom {
  margin-left: auto;
  margin-right: auto;
  inset: auto 0% -9px 3%;
  transform: rotate(-90deg);
}

.price-feature-text {
  color: var(--accent--primary-1);
  font-size: 14px;
  font-weight: 500;
}

.arrow-image {
  width: 24px;
  position: relative;
  top: -9px;
  left: -3px;
}

.visible-on-1280px-bigger {
  display: none;
}

.position-absolute {
  position: absolute;
}

.position-absolute.top {
  inset: 0 0 auto;
}

.feedback-button {
  font-size: 18px;
  text-decoration: none;
}

.feedback-link-block {
  text-decoration: none;
}

.copy-to-clipboard-icon {
  width: 20px;
  height: 20px;
}

.tabs-2-cols-content {
  flex: 1;
  width: 100%;
  margin-top: -243px;
  margin-bottom: -141px;
  margin-left: auto;
  display: flex;
  overflow: visible;
}

.tabs-2-cols-tab-pane---main {
  flex: 1;
  align-self: stretch;
  max-width: 666px;
  min-height: 100%;
  margin-left: auto;
}

.tabs-2-cols {
  display: flex;
}

.tabs-shadow-btn {
  background-image: linear-gradient(#0000, #00000075);
  min-height: 42%;
  position: absolute;
  inset: auto 0% 0%;
}

.tabs-2-cols-menu {
  flex-direction: column;
  width: 100%;
  max-width: 447px;
  margin-right: 40px;
  display: flex;
}

.price-discount {
  background-color: var(--accent--primary-1);
  color: var(--neutral--100);
  border-radius: 100px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 10px;
  position: absolute;
  top: -2px;
  right: -6px;
}

.visible-on-mbl {
  display: none;
}

.custom {
  border-radius: var(--radius--standart);
  background-image: linear-gradient(45deg, #cdf770, #c8edc7 16.67%, #fbf0e1 33.33%, #eeebc6 50%, #bdeabf 66.67%, #abdfae 83.33%, #f8ffae);
  border: 1px solid #d8e7bb;
  width: 100%;
  height: 100%;
  padding: 24px;
}

.certificate-image {
  width: 92px;
}

.mg-right-16px {
  margin-right: 16px;
}

.testimonials-bg {
  background-color: #112D1D;
  border-radius: 12px;
  width: 58%;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.pd-top-bottom-98px {
  padding-top: 98px;
  padding-bottom: 98px;
}

@media screen and (min-width: 1280px) {
  .buttons-row.center.align-left---laptop-big {
    justify-content: flex-start;
    align-items: center;
  }

  .grid-footer {
    grid-column-gap: 112px;
  }

  .not-found-card-content---grid {
    text-align: left;
    grid-template-columns: 1fr 1fr;
  }

  .visible-on-1280px-bigger {
    display: block;
  }

  .hidden-on-1280px-bigger {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  .grid-2-columns.style---styleguide-wrapper {
    grid-template-columns: .3fr 1fr;
  }

  .style---typography-block-grid {
    grid-template-columns: minmax(auto, 380px) .8fr;
  }

  .style---dropdown-toggle {
    padding-top: 28px;
    padding-bottom: 28px;
    font-size: 20px;
    line-height: 20px;
  }

  .style---dropdown-link-sidebar {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 20px;
  }

  .style---dropdown-link-icon-sidebar {
    max-width: 46px;
    margin-right: 14px;
  }

  .style---logo-wrapper {
    justify-content: center;
    display: flex;
  }

  .style---logo-sidebar {
    max-width: 260px;
  }

  ._404-not-found {
    font-size: 258px;
  }

  .position-absolute-pricing.hero-v1-bg {
    width: 861px;
  }

  .video-thumbnail-full-width-right-container {
    max-width: none;
  }
}

@media screen and (min-width: 1920px) {
  .style---heading {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .style---content-wrapper {
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .checkout-col-right {
    position: sticky;
    top: 24px;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 45px;
  }

  h2 {
    margin-bottom: 12px;
    font-size: 32px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 20px;
  }

  blockquote {
    padding: 70px 40px;
    font-size: 25px;
  }

  .grid-2-columns.style---styleguide-wrapper {
    grid-row-gap: 0px;
    grid-template-columns: 1fr;
  }

  .grid-2-columns._1-col-tablet {
    grid-template-columns: 1fr;
  }

  .grid-2-columns.title-and-paragraph {
    grid-template-columns: 1fr .9fr;
  }

  .grid-2-columns.checkout-page {
    grid-template-columns: 1fr;
  }

  .grid-2-columns.grid-2-col-cta {
    grid-row-gap: 0px;
    text-align: center;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
  }

  .grid-2-columns.hero-grid, .grid-2-columns.content-left---image-right, .grid-2-columns.contact-grid {
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
  }

  .grid-2-columns.sidebar-right-grid {
    grid-column-gap: 16px;
    grid-template-columns: 1fr .6fr;
  }

  .grid-2-columns.newsletter-grid {
    text-align: center;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .grid-2-columns.hero-news-grid {
    grid-template-columns: 1fr;
  }

  .grid-2-columns.blog-sidebar-page {
    grid-template-columns: 1fr .6fr;
  }

  .grid-2-columns.hero-team-grid {
    grid-template-columns: .85fr 1fr;
  }

  .grid-2-columns.hero-help-grid {
    grid-row-gap: 16px;
    text-align: center;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
  }

  .grid-2-columns.product-grid {
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .grid-2-columns.hero-niche-grid {
    grid-template-columns: 1fr;
  }

  .style---navigation-sidebar {
    min-height: auto;
    max-height: 100%;
    box-shadow: none;
    position: static;
  }

  .card.checkout-block {
    padding-left: 24px;
    padding-right: 24px;
  }

  .card.testmonial-v1 {
    grid-row-gap: 50px;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .card.testmonial-v1.marketing {
    grid-template-columns: 1fr;
  }

  .card.blog-post-featured {
    flex-direction: column;
    align-items: stretch;
  }

  .card.author {
    padding: 24px 24px 40px;
  }

  .card.landing-form {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .card.not-found-card {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .card.password-page {
    padding-top: 90px;
    padding-bottom: 166px;
  }

  .card.plan-com {
    padding-left: 24px;
    padding-right: 24px;
  }

  .card.card-image-v1 {
    background-position: 30% 80%;
  }

  .card.table-of-contents {
    padding: 24px 24px 40px;
  }

  .grid-4-columns {
    grid-template-columns: 1fr 1fr;
  }

  .style---block-sub-heading {
    margin-bottom: 24px;
  }

  .divider {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .divider.header-nav-list-item-divider {
    width: 100%;
    height: 1px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .style---typography-block-grid {
    grid-template-columns: minmax(auto, 250px) 1fr;
  }

  .mg-top-48px.mg-top-0---tbl {
    margin-top: 0;
  }

  .display-1 {
    font-size: 64px;
  }

  .grid-1-column.step-grid {
    grid-column-gap: 40px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .grid-1-column.contact-layout {
    grid-column-gap: 0px;
    grid-template-columns: 1fr auto 1fr;
  }

  .gap-row-80px {
    grid-row-gap: 56px;
  }

  .display-2 {
    font-size: 48px;
  }

  .display-3 {
    font-size: 30px;
  }

  .display-4 {
    font-size: 25px;
  }

  .style---style-grid-wrapper {
    grid-row-gap: 140px;
  }

  .paragraph-large, .text-400 {
    font-size: 22px;
  }

  .grid-3-columns {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3-columns.gap-row-80px {
    grid-row-gap: 64px;
  }

  .grid-3-columns.style---buttons-grid.download-app-grid {
    grid-column-gap: 40px;
  }

  .grid-3-columns._1-col-tablet {
    grid-template-columns: 1fr;
  }

  .grid-3-columns.certificates {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .style---heading {
    min-height: auto;
    margin-bottom: 60px;
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .inner-container._100-tablet {
    max-width: 100%;
  }

  .inner-container._600px---tablet {
    max-width: 600px;
  }

  .inner-container._509px._100-tablet.mg-top-68px---tbl {
    margin-top: 68px;
  }

  .inner-container._700px---tablet {
    max-width: 700px;
  }

  .inner-container._400px---tablet {
    max-width: 400px;
  }

  .inner-container._500px---tablet {
    max-width: 500px;
  }

  .inner-container._250px---tablet {
    max-width: 250px;
  }

  .inner-container._450px---tablet {
    max-width: 450px;
  }

  .inner-container.tabs-2-cols-title-wrapper {
    max-width: 600px;
    margin-bottom: 60px;
  }

  .style---content-heading {
    margin-bottom: 60px;
    padding: 32px;
  }

  .btn-primary.small.sign-in-navbar {
    background-color: var(--neutral--800);
    width: 100%;
  }

  .avatar-circle._06 {
    width: 140px;
    max-width: 140px;
    height: 140px;
    max-height: 140px;
  }

  .avatar-circle._07 {
    width: 160px;
    max-width: 160px;
    height: 160px;
    max-height: 160px;
  }

  .avatar-circle._08 {
    width: 280px;
    max-width: 280px;
    height: 280px;
    max-height: 280px;
  }

  .style---dropdown-wrapper-sidebar {
    display: none;
  }

  .buttons-row.center---tablet {
    justify-content: center;
  }

  .buttons-row.mg-top-32px.tabs-2-cols-button {
    justify-content: center;
    max-width: 100%;
  }

  .style---sidebar-wrapper {
    overflow: hidden;
  }

  .style---logo-wrapper {
    margin-bottom: 0;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .mg-section.cta {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .section.hero-full.top-210px---bottom-50px {
    min-height: auto;
    padding-top: 175px;
  }

  .section.pd-150px {
    padding-top: 125px;
    padding-bottom: 125px;
  }

  .section.pd-top-150px {
    padding-top: 125px;
  }

  .section.cta {
    padding-top: 80px;
  }

  .section.hero.top-78px {
    padding-top: 48px;
    padding-bottom: 96px;
  }

  .section.hero.top-bottom-280px {
    padding-top: 180px;
    padding-bottom: 180px;
  }

  .section.hero.top-78px---bottom-140px {
    padding-bottom: 112px;
  }

  /* Dark-Hero Sections — konsistentes Padding auf Tablet (oben = unten) */
  .section.hero.top-115px---bottom-69px,
  .section.hero.top-138px---bottom-126px {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  /* Headlines kein bottom-margin in Dark-Heroes (sonst ungleicher Abstand oben/unten) */
  .section.hero.top-115px---bottom-69px h1,
  .section.hero.top-115px---bottom-69px h2,
  .section.hero.top-138px---bottom-126px h1,
  .section.hero.top-138px---bottom-126px h2,
  .section.hero.top-138px---bottom-126px .display-1,
  .section.hero.top-138px---bottom-126px .display-2 {
    margin-bottom: 0;
  }

  .section.hero.top-110px---bottom-90px {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section.pd-top-104px {
    padding-top: 83px;
  }

  .section.pd-120px {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section.pd-top-bottom-150px {
    padding-top: 125px;
    padding-bottom: 125px;
  }

  .heading-h1-size {
    font-size: 45px;
  }

  .heading-h2-size {
    font-size: 32px;
  }

  .heading-h3-size {
    font-size: 22px;
  }

  .heading-h4-size {
    font-size: 20px;
  }

  .header-nav-menu-list {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-nav-link {
    font-size: 22px;
  }

  .header-nav-list-item {
    margin-bottom: 24px;
    padding-left: 0;
  }

  .header-nav-list-item.show-in-tablet {
    display: block;
  }

  .header-nav-list-item.show-in-tablet.header-btn {
    align-self: stretch;
  }

  .header-nav-list-item.show-in-tablet.header-btn.top {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    display: flex;
  }

  .header-nav-list-item.middle {
    padding-left: 0;
    padding-right: 0;
  }

  .header-nav-list-item.divider-navbar {
    width: 100%;
    display: block;
  }

  .header-right-side {
    z-index: 2;
    margin-left: 12px;
  }

  .hidden-on-tablet {
    display: none;
  }

  .text-center.text-left---tbl {
    text-align: left;
  }

  .floating-item.cta {
    object-position: 0% 50%;
  }

  .floating-item.cta-newsletter-v1 {
    object-position: 32% 50%;
  }

  .floating-item.hero-help-articel {
    width: 175%;
    max-width: none;
  }

  .floating-item.card-forgot-password-bg {
    top: -3%;
  }

  .floating-item.card-password-page-bg---main {
    height: auto;
    top: auto;
  }

  .floating-item.card-not-found-bg---main {
    height: auto;
    bottom: auto;
  }

  ._w-h-100.fit-cover.testimonials-image {
    object-position: 50% 0%;
  }

  .fit-cover._w-h-100.product-image {
    max-height: 600px;
  }

  .fit-cover._w-h-100.about-hero-image {
    object-position: 50% 30%;
    max-height: 600px;
  }

  .grid-6-columns.logo-strip {
    flex-wrap: wrap;
  }

  .bg-overlay-gradient.bg-mobile-app {
    height: 28vh;
  }

  .height-100 {
    flex: 1;
  }

  .height-100.visible-on-tablet {
    display: block;
  }

  .blog-card-image {
    width: 100%;
  }

  .blog-card-image-wrapper.inside-card {
    min-height: 266px;
  }

  .image-wrapper.border-radius-12px.hero-image {
    max-height: 600px;
  }

  .image-wrapper.border-radius-12px.content-left---image-right---image {
    max-height: 500px;
  }

  .image-wrapper.border-radius-12px.blog-post-image {
    justify-content: center;
    max-height: 500px;
  }

  .image-wrapper.border-radius-12px.card-product-image {
    flex: 1;
  }

  ._404-not-found {
    font-size: 188px;
  }

  .checkout-form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .mg-section.footer-v2 {
    margin-left: 0;
    margin-right: 0;
  }

  .logo-wrapper {
    margin-top: 138px;
  }

  .tablet-max-w-100 {
    max-width: 100%;
  }

  .card-mobile-app.pd-24px---image-bot {
    align-items: center;
  }

  .card-mobile-app.image-top-earning-expense {
    justify-content: space-between;
  }

  .image-phone-balance {
    max-width: 400px;
  }

  .stats-text {
    font-size: 120px;
  }

  .testimonials-wrapper.last {
    width: 50%;
  }

  .space-168px-alt {
    height: 40px;
  }

  .line-decorative {
    opacity: .8;
    width: 62%;
    height: 18%;
    top: 993px;
    left: 33%;
  }

  .line-decorative.bottom {
    width: 80%;
    height: auto;
    bottom: 16%;
    left: 61%;
    right: auto;
  }

  .testimonials-wrapper-v1 {
    max-height: 500px;
  }

  .position-absolute-pricing.hero-v1-bg {
    bottom: -16%;
  }

  .accent-line.center.left---tbl {
    margin-left: 0;
  }

  .grid-2-col---cards {
    grid-template-columns: 1fr;
  }

  .menu-wrapper {
    flex-wrap: wrap;
  }

  .bg-color-section-alt {
    height: 70%;
  }

  .tabs-2-cols-accordion-item {
    max-width: 100%;
  }

  .text-center---tablet {
    text-align: center;
  }

  .layout-content-bottom {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .layout-content-top {
    margin-top: 75px;
    margin-bottom: 64px;
  }

  .cta-content {
    padding-top: 0;
    padding-bottom: 60px;
  }

  .cta-image {
    width: auto;
    max-height: none;
    margin-top: 0;
    margin-bottom: -182px;
    margin-left: 0;
    position: static;
  }

  .values-icon-wrapper {
    flex-direction: column;
  }

  .values-icon {
    margin-bottom: 16px;
  }

  .content-link.card-product-link._3-posts-item {
    display: flex;
  }

  .perks-icon {
    align-items: flex-end;
    margin-bottom: 16px;
  }

  .perks-icon-wrapper {
    flex-direction: column;
  }

  .career-grid {
    grid-template-columns: 1.2fr 1fr 1fr auto;
  }

  .blog-post-featured-image {
    max-width: 100%;
    max-height: 450px;
  }

  .blog-post-featured-content {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .card-author-content-top {
    flex-direction: column;
    align-items: stretch;
  }

  .card-author-avatar {
    margin-bottom: 16px;
  }

  .rich-text-news h2 {
    font-size: 45px;
  }

  .rich-text-news h3 {
    font-size: 32px;
  }

  .rich-text-news h5 {
    font-size: 20px;
  }

  .rich-text-news h4 {
    font-size: 22px;
  }

  .rich-text h2 {
    font-size: 25px;
  }

  .rich-text-v4 h2 {
    font-size: 48px;
  }

  .rich-text-v4 h3 {
    font-size: 30px;
  }

  .rich-text-v4 h5 {
    font-size: 20px;
  }

  .rich-text-v4 h4 {
    font-size: 25px;
  }

  .grid-footer {
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
  }

  .grid-footer---menu {
    min-width: auto;
    max-width: 100%;
  }

  .card-product-content._3-posts-item {
    flex: 1;
    align-self: flex-end;
    max-width: 50%;
    padding-bottom: 120px;
  }

  .card-product-content-bottom._3-posts-item {
    width: 50%;
    position: absolute;
    inset: auto 0% 0% auto;
  }

  .demo-features-wrapper {
    grid-column-gap: 10px;
  }

  .not-found-card-content---grid {
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
  }

  .header-left-side {
    z-index: 2;
  }

  .hamburger-menu-bar {
    border-radius: 0;
    width: 40px;
    height: 2px;
  }

  .hamburger-menu-wrapper {
    margin-left: 22px;
    transition: transform .3s;
  }

  .hamburger-menu-wrapper:hover {
    transform: scale(.96);
  }

  .hamburger-menu-wrapper.w--open {
    background-color: #0000;
  }
  /* X-Animation für Hamburger via .w--open (von Webflow.js gesetzt) */
  .hamburger-menu-bar {
    transition: transform 250ms ease-out;
    transform-origin: center;
  }
  .hamburger-menu-wrapper.w--open .hamburger-menu-bar.top {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger-menu-wrapper.w--open .hamburger-menu-bar.bottom {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ==================================================================
     Nav-Menu wenn offen:
     - height EXAKT (nicht min-height) damit content scrollen kann
     - flex-column → menu-list scrollt, footer sticky am bottom
     - Webflow's IX2 Animation (opacity, transform) bleibt erhalten
     ================================================================== */
  .header-nav-menu-wrapper[data-nav-menu-open] {
    background-color: var(--neutral--200) !important;
    height: calc(100vh - var(--header-bottom-offset, 80px)) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Menu-List: scrollable Bereich (wenn dropdown öffnet und content überläuft) */
  .header-nav-menu-wrapper[data-nav-menu-open] .header-nav-menu-list {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  /* ==================================================================
     BG Fade-In/Out via Pseudo-Element auf .w-nav (Header-Wrapper)
     Pseudo ist IMMER im DOM (nur opacity wechselt) — Transition läuft
     zuverlässig in beide Richtungen, anders als display-toggle Approaches.
     ================================================================== */
  .w-nav-overlay {
    background-color: transparent !important;
  }
  .w-nav::before {
    content: '';
    position: fixed;
    top: var(--header-bottom-offset, 80px);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neutral--200);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out, top 350ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
  }
  .w-nav:has(.w-nav-button.w--open)::before {
    opacity: 1;
  }

  /* ==================================================================
     Header BG-Color-Change beim Nav-Open (smooth fade zu Cream)
     + Border-bottom mit deutlichem Kontrast (neutral--500 = #9CA29B)
       sodass die Trennung zwischen Header und Menu sichtbar ist
     ================================================================== */
  .header-wrapper:has(.w-nav-button.w--open) {
    background-color: var(--neutral--200) !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--neutral--500) !important;
  }

  /* ==================================================================
     Header Border-Radius — beim Nav-Open zu 0 animiert
     ================================================================== */
  .header-wrapper:has(.w-nav-button.w--open) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* ==================================================================
     MENU-LISTE (Standard-Nav: vertikal, sticky-bottom Buttons)
     ================================================================== */
  .header-nav-menu-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 16px 0 24px 0;
    min-height: 100%;
    box-sizing: border-box;
  }
  /* Buttons unten gepinned: erster divider (vor Buttons) bekommt auto-margin */
  .header-nav-menu-list > .header-nav-list-item.bottom-pin-start {
    margin-top: auto;
  }
  /* Innerer Padding für ALLE Items — konsistente Seitenabstände */
  .header-nav-menu-list > .header-nav-list-item {
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Mainnav-Items: vertical spacing zwischen Links */
  .header-nav-menu-list > .header-nav-list-item.middle {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Hover-States für nv-btns in der Nav */
  .header-nav-menu-list .nv-btn-primary:hover {
    background-color: var(--accent--primary-1-hover);
  }
  .header-nav-menu-list .nv-btn-outline:hover {
    background-color: #F0F3E7;
  }
  /* Dividers: 8px Abstand für sichtbare Trennung */
  .header-nav-menu-list > .header-nav-list-item.divider-navbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .header-nav-menu-list > .header-nav-list-item.divider-navbar .divider {
    background-color: var(--neutral--300);
    height: 1px;
    width: 100%;
  }
  /* Tablet: Vertrieb + Kostenlos starten Buttons nebeneinander (2-col) */
  .header-nav-menu-list > .header-nav-list-item.header-btn.top {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .header-nav-menu-list > .header-nav-list-item.header-btn.top > a {
    flex: 1 1 0;
  }
  /* Anmelden Button-Wrapper */
  .header-nav-menu-list > .header-nav-list-item.header-btn:not(.top) {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  @media (max-width: 600px) {
    /* Mobile: Vertrieb + Kostenlos starten untereinander */
    .header-nav-menu-list > .header-nav-list-item.header-btn.top {
      flex-direction: column;
    }
  }

  /* Marketing-Nav: Padding für die List */
  .is-marketing-nav .header-nav-menu-list {
    padding: 24px 0;
  }

  /* ==================================================================
     NAV-FOOTER (Sticky Bottom mit Buttons + Dividers)
     Auf Desktop versteckt (siehe globale Rule), auf Tablet/Mobile flex column.
     ================================================================== */
  .header-nav-footer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0 24px 16px;
    background-color: var(--neutral--200);
  }
  .header-nav-divider {
    height: 1px;
    background-color: var(--neutral--300);
    margin: 12px 0;
    flex-shrink: 0;
  }
  /* Erster Divider (direkt über dem ersten Button) — kein margin-top */
  .header-nav-footer > .header-nav-divider:first-child {
    margin-top: 0;
  }
  .header-nav-btn-row {
    display: flex;
    flex-direction: column;     /* Mobile default: stack */
    gap: 8px;
  }
  /* Anmelden button (das direkt im Footer ist, ausser btn-row) full-width */
  .header-nav-footer > a.nv-btn {
    width: 100%;
  }
  /* Buttons im btn-row full-width auf Mobile */
  .header-nav-btn-row > a.nv-btn {
    width: 100%;
  }
  /* Tablet (≥600): Buttons in einer Reihe */
  @media (min-width: 600px) {
    .header-nav-btn-row {
      flex-direction: row;
    }
    .header-nav-btn-row > a.nv-btn {
      flex: 1;
    }
  }

  .dropdown-card {
    /* Tablet/Mobile: Weiße Fläche bis Bildschirmrand (kein Card-Look mit Rand) */
    width: 100vw;
    margin: 0 -24px;             /* LI padding kompensieren (links + rechts) */
    padding: 0;                   /* Kein Padding — sonst kollabiert es nicht ganz auf 0 */
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* background-color bleibt weiß (neutral--100) aus Default */
  }
  /* Padding nur wenn dropdown offen — Atemraum innen + margin-top für
     Abstand zwischen Toggle "Weiteres" und der weißen Card */
  .dropdown-wrapper.is-user-open .dropdown-card {
    padding: 20px 24px;
    margin-top: 24px;
  }

  .dropdown-wrapper.w--open .dropdown-card,
  .dropdown-wrapper.is-user-open .dropdown-card {
    position: static;
  }

  .dropdown-list {
    padding-top: 0;
    position: static;
    transform: none;
  }

  .dropdown-toggle {
    justify-content: space-between;
    width: 100%;
    font-size: 22px;
  }

  .dropdown-wrapper.w--open .dropdown-toggle,
  .dropdown-wrapper.is-user-open .dropdown-toggle {
    color: var(--accent--primary-1);
  }

  .dropdown-wrapper {
    width: 100%;
  }

  .dropdown-button {
    align-self: flex-start;
    width: auto;
  }

  .image-wrapper-dropdown.dropdown-button-icon {
    margin-bottom: 12px;
    margin-right: 12px;
  }

  .image-feature-1 {
    width: 50%;
  }

  .card-earning-expense-reports {
    grid-row-gap: 50px;
    grid-template-columns: 1fr;
    padding-right: 32px;
  }

  .image-feature-2 {
    width: 35%;
  }

  .mg-bottom-111px {
    margin-bottom: 89px;
  }

  .lightbox-video-icon {
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
  }

  .problem-solution-image {
    height: 500px;
  }

  .position-sticky.plan-com-subheader-wrapper {
    top: 88px;
  }

  .tab-link {
    font-size: 15px;
  }

  .plan-com-dropdown-wrap {
    flex-direction: column;
  }

  .replace-text {
    font-size: 22px;
  }

  .cta-visible-on-tablet {
    display: inline-block;
  }

  .cta-visible-on-laptop {
    display: none;
  }

  .clock-number {
    font-size: 30px;
  }

  .mockup-shape.laptop {
    display: none;
  }

  .mockup-shape.ipad {
    display: inline-block;
  }

  .ipad-screen {
    border-radius: 7px;
    width: 96.3%;
    height: 92.4%;
    margin-top: 3%;
    margin-left: 2%;
    margin-right: 2%;
  }

  .grid-5-columns {
    grid-template-columns: 1fr 1fr;
  }

  .tabs-2-cols-content {
    max-width: 100%;
    max-height: 500px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .tabs-2-cols-tab-pane---main {
    flex: 1;
    max-width: 100%;
    margin-left: 0;
  }

  .tabs-2-cols {
    flex-direction: column;
  }

  .tabs-2-cols-menu {
    max-width: 100%;
    margin-bottom: 60px;
    margin-right: 0;
  }

  .testimonials-bg {
    width: 100%;
    min-height: 70%;
    inset: auto 0% 0%;
  }

  .pd-top-bottom-98px {
    padding-top: 82px;
    padding-bottom: 82px;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }

  h1 {
    margin-bottom: 10px;
    font-size: 38px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 16px;
  }

  h6 {
    font-size: 14px;
  }

  blockquote {
    border-radius: 18px;
    padding: 60px 32px;
    font-size: 21px;
  }

  figcaption {
    margin-top: 21px;
  }

  .grid-2-columns {
    grid-template-columns: 1fr;
  }

  .grid-2-columns.style---styleguide-wrapper {
    grid-template-columns: auto;
  }

  .grid-2-columns.title-and-paragraph {
    grid-row-gap: 12px;
    grid-template-columns: 1.1fr;
  }

  .grid-2-columns._2-col-mbl {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2-columns.checkout-page, .grid-2-columns._1-3fr---tablet-1-col, .grid-2-columns.stats-v1, .grid-2-columns.title-and-btn {
    grid-template-columns: 1fr;
  }

  .grid-2-columns.title-and-btn.align-left {
    place-items: start;
  }

  .grid-2-columns.layout-images-grid, .grid-2-columns.hero-grid, .grid-2-columns.content-left---image-right {
    grid-row-gap: 50px;
  }

  .grid-2-columns.vales-icon-grid {
    grid-row-gap: 52px;
  }

  .grid-2-columns.contact-grid {
    grid-row-gap: 50px;
  }

  .grid-2-columns.sidebar-right-grid {
    grid-template-columns: 1fr;
  }

  .grid-2-columns.newsletter-grid {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .grid-2-columns.blog-sidebar-page, .grid-2-columns.hero-team-grid {
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }

  .grid-2-columns.hero-help-grid {
    grid-row-gap: 10px;
  }

  .grid-2-columns.product-grid {
    grid-row-gap: 50px;
    max-width: 500px;
  }

  .grid-2-columns.gap-row-32---mbl {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .grid-2-columns.grid-2-col-marketing {
    grid-template-columns: 1fr;
  }

  .card.testmonial-v1 {
    grid-row-gap: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .card.team-item-content {
    bottom: 20px;
  }

  .card.contact-form {
    padding: 50px 32px 48px;
  }

  .card.career-sidebar {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
  }

  .card.author {
    padding-bottom: 32px;
  }

  .card.landing-form {
    padding: 60px 32px;
  }

  .card.not-found-card {
    padding: 100px 32px;
  }

  .card.password-page {
    padding: 72px 32px 130px;
  }

  .card.search-result {
    padding: 40px 32px;
  }

  .card.plan-com {
    padding-left: 18px;
    padding-right: 18px;
    display: none;
  }

  .card.plan-com.mobile {
    display: flex;
  }

  .card.card-image-v1 {
    grid-template-columns: 1fr;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .card.table-of-contents {
    padding-bottom: 32px;
    display: none;
  }

  .card.testimonials-main, .card.testimonials {
    padding: 54px 32px;
  }

  .style---block-sub-heading.border {
    margin-bottom: 48px;
    padding-bottom: 24px;
  }

  .divider {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .divider._32px {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .divider.footer {
    display: none;
  }

  .style---typography-block-grid {
    grid-row-gap: 28px;
    grid-template-columns: 1fr;
  }

  .style---content-block {
    margin-bottom: 64px;
  }

  .mg-bottom-24px {
    margin-bottom: 20px;
  }

  .mg-bottom-48px {
    margin-bottom: 40px;
  }

  .mg-bottom-56px {
    margin-bottom: 48px;
  }

  .mg-bottom-64px {
    margin-bottom: 54px;
  }

  .mg-top-16px {
    margin-top: 13px;
  }

  .mg-top-48px {
    margin-top: 40px;
  }

  .mg-right-24px {
    margin-right: 16px;
  }

  .mg-right-32px {
    margin-right: 24px;
  }

  .text-200 {
    font-size: 16px;
  }

  .display-1 {
    font-size: 53px;
  }

  .grid-1-column.gap-column-24px {
    grid-row-gap: 20px;
  }

  .grid-1-column.step-grid {
    grid-template-columns: 1fr;
  }

  .display-2 {
    font-size: 40px;
  }

  .display-3 {
    font-size: 26px;
  }

  .display-4 {
    font-size: 22px;
  }

  .style---style-grid-wrapper {
    grid-row-gap: 120px;
  }

  .paragraph-large, .text-400 {
    font-size: 20px;
  }

  .text-300 {
    font-size: 18px;
  }

  .text-100 {
    font-size: 14px;
  }

  .grid-3-columns {
    grid-template-columns: 1fr;
  }

  .grid-3-columns.gap-row-80px {
    grid-row-gap: 40px;
  }

  .grid-3-columns.style---buttons-grid, .grid-3-columns.style---buttons-grid.download-app-grid {
    grid-template-columns: auto;
  }

  .style---heading {
    padding: 104px 24px;
  }

  .inner-container._100-mbl {
    max-width: 100%;
  }

  .inner-container._500px---mbl {
    max-width: 500px;
  }

  .inner-container._509px._100-tablet.mg-top-68px---tbl {
    margin-top: 60px;
  }

  .inner-container._400px---mbl {
    max-width: 400px;
  }

  .inner-container._520px---mbl {
    max-width: 520px;
  }

  .inner-container._600px---mbl {
    max-width: 600px;
  }

  .inner-container._350px---mbl {
    max-width: 350px;
  }

  .inner-container._300px.center {
    max-width: none;
  }

  .inner-container._354px-mbl {
    max-width: 354px;
  }

  .inner-container._450px---mbl {
    max-width: 450px;
  }

  .inner-container.tabs-2-cols-title-wrapper {
    margin-bottom: 50px;
  }

  .style---content-heading {
    margin-bottom: 36px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .style---heading-icon-wrapper {
    max-width: 58px;
  }

  .style---content-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }

  .style---bg-white, .style-buttons-dark {
    padding: 34px 24px;
  }

  .btn-primary {
    padding: 15px 20px;
    font-size: 14px;
  }

  .btn-primary.small {
    padding: 12px 13px;
    font-size: 12px;
  }

  .btn-primary.small.header-btn-hidden-on-mbl {
    display: none;
  }

  .btn-primary.large {
    padding: 16px 32px;
    font-size: 16px;
  }

  .btn-primary.inside-input.default {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .btn-secondary {
    padding: 15px 20px;
    font-size: 14px;
  }

  .btn-secondary.small {
    padding: 12px 13px;
    font-size: 12px;
  }

  .btn-secondary.large {
    padding: 16px 32px;
    font-size: 16px;
  }

  .btn-secondary.white.icon-no-hover {
    padding-left: 15px;
    padding-right: 15px;
  }

  .badge-primary {
    padding: 13px 20px;
    font-size: 16px;
  }

  .badge-primary.small {
    padding: 8px 10px;
    font-size: 14px;
  }

  .badge-primary.small.blog-post-category {
    margin-right: 16px;
  }

  .badge-primary.large {
    padding: 16px 32px;
    font-size: 18px;
  }

  .badge-primary.very-small {
    padding: 8px 10px;
    font-size: 14px;
  }

  .badge-secondary {
    padding: 13px 20px;
    font-size: 16px;
  }

  .badge-secondary.small {
    padding: 8px 10px;
    font-size: 14px;
  }

  .badge-secondary.large {
    padding: 16px 32px;
    font-size: 18px;
  }

  .badge-secondary.category-link {
    padding-left: 11px;
    padding-right: 11px;
  }

  .badge-secondary.pricing-table {
    font-size: 12px;
  }

  .input {
    min-height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
  }

  .input.small {
    min-height: 50px;
    font-size: 14px;
  }

  .input.large {
    min-height: 70px;
  }

  .text-area {
    min-height: 140px;
    padding: 20px;
    font-size: 16px;
  }

  .text-area.small {
    min-height: 120px;
    font-size: 14px;
  }

  .checkbox {
    min-width: 22px;
    min-height: 22px;
  }

  .checkbox.large {
    min-width: 26px;
    min-height: 26px;
  }

  .checkbox.small {
    min-width: 20px;
    min-height: 20px;
  }

  .radio-button {
    min-width: 22px;
    min-height: 22px;
  }

  .radio-button.large {
    min-width: 26px;
    min-height: 26px;
  }

  .radio-button.small {
    min-width: 20px;
    min-height: 20px;
  }

  .style---avatars-grid {
    grid-template-columns: repeat(auto-fit, 220px);
  }

  .avatar-circle._02 {
    width: 40px;
    max-width: 40px;
    height: 40px;
    max-height: 40px;
  }

  .avatar-circle._03 {
    width: 56px;
    max-width: 56px;
    height: 56px;
    max-height: 56px;
  }

  .avatar-circle._04 {
    width: 64px;
    max-width: 64px;
    height: 64px;
    max-height: 64px;
  }

  .avatar-circle._05 {
    width: 80px;
    max-width: 80px;
    height: 80px;
    max-height: 80px;
  }

  .avatar-circle._06 {
    width: 120px;
    max-width: 120px;
    height: 120px;
    max-height: 120px;
  }

  .avatar-circle._07 {
    width: 140px;
    max-width: 140px;
    height: 140px;
    max-height: 140px;
  }

  .avatar-circle._08 {
    width: 220px;
    max-width: 220px;
    height: 220px;
    max-height: 220px;
  }

  .style---icons-grid {
    grid-template-columns: repeat(auto-fit, 56px);
  }

  .square-icon {
    border-radius: 12px;
    max-width: 56px;
  }

  .square-icon.password-page {
    max-width: 50px;
  }

  .social-icon-font._20px {
    font-size: 18px;
  }

  .line-rounded-icon.success-message-check.large {
    font-size: 68px;
    line-height: 73px;
  }

  .line-rounded-icon.category-icon {
    margin-right: 6px;
    font-size: 18px;
  }

  .line-rounded-icon.plan-com-dropdown-arrow {
    font-size: 18px;
  }

  .style---line-icons-grid {
    grid-template-columns: repeat(auto-fit, 18px);
  }

  .rich-text-v1 h3 {
    margin-top: 26px;
  }

  .rich-text-v1 figure {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .rich-text-v1 ul, .rich-text-v1 ol {
    margin-top: 26px;
    margin-bottom: 26px;
    padding-left: 30px;
  }

  .rich-text-v1 h6, .rich-text-v1 h5, .rich-text-v1 h4 {
    margin-top: 26px;
  }

  .rich-text-v1 blockquote {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .buttons-row.center---mbl {
    justify-content: center;
  }

  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mg-section.cta {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .section.position-relative.stats-section {
    padding-top: 98px;
    padding-bottom: 98px;
  }

  .section.hero-full {
    background-image: linear-gradient(#0000009e, #0000009e), url('../images/Laptop-rechts-am-Tisch.png');
    background-position: 0 0, 92%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 80vh;
  }

  .section.hero-full.top-210px---bottom-50px {
    padding-top: 146px;
    padding-bottom: 40px;
  }

  .section.pd-150px {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .section.pd-top-150px {
    padding-top: 104px;
  }

  .section.cta {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .section.hero.top-78px {
    padding-top: 58px;
    padding-bottom: 102px;
  }

  .section.hero.top-bottom-280px {
    padding-top: 180px;
    padding-bottom: 100px;
  }

  .section.hero.top-78px---bottom-140px {
    padding-top: 58px;
    padding-bottom: 90px;
  }

  /* Dark-Hero Sections — konsistentes Padding auf Mobile (oben = unten) */
  .section.hero.top-115px---bottom-69px,
  .section.hero.top-138px---bottom-126px {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  /* Dark-Hero Headlines: kein bottom-margin (sonst entsteht ungleicher Abstand oben/unten) */
  .section.hero.top-115px---bottom-69px h1,
  .section.hero.top-115px---bottom-69px h2,
  .section.hero.top-138px---bottom-126px h1,
  .section.hero.top-138px---bottom-126px h2,
  .section.hero.top-138px---bottom-126px .display-1,
  .section.hero.top-138px---bottom-126px .display-2 {
    margin-bottom: 0;
  }

  .section.hero.top-110px---bottom-90px {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section.hero.top-bottom-78px {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .section.pd-top-104px {
    padding-top: 67px;
  }

  .section.pd-120px {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section.pd-top-bottom-150px {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .top-bar-wrapper {
    padding-left: 35px;
    padding-right: 35px;
    display: none;
  }

  .heading-h1-size {
    font-size: 38px;
  }

  .heading-h2-size {
    font-size: 26px;
  }

  .heading-h3-size {
    font-size: 20px;
  }

  .heading-h4-size {
    font-size: 18px;
  }

  .heading-h5-size {
    font-size: 16px;
  }

  .heading-h6-size {
    font-size: 14px;
  }

  .header-nav-link {
    font-size: 20px;
  }

  .header-nav-list-item.show-in-tablet.header-btn.top, .header-nav-list-item.divider-navbar {
    margin-bottom: 12px;
  }

  .header-right-side {
    margin-left: 8px;
  }

  .btn-circle-primary {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    font-size: 24px;
  }

  .btn-circle-primary.small {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    font-size: 20px;
  }

  .btn-circle-primary.large {
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px;
    font-size: 30px;
  }

  .btn-circle-secondary {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    font-size: 24px;
  }

  .btn-circle-secondary.small {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    font-size: 20px;
  }

  .btn-circle-secondary.small.accordion-btn {
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
  }

  .btn-circle-secondary.large {
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px;
    font-size: 30px;
  }

  .flex-vertical.gap-8px.gap-4px---mbl {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .flex-horizontal.space-between.width-100.first, .flex-horizontal.space-between.width-100.second {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .flex-horizontal.flex-vertical---mbl.align-left---mbl {
    justify-content: center;
    align-items: flex-start;
  }

  .footer-logo-wrapper {
    max-width: 163px;
  }

  .footer-list-item {
    margin-bottom: 8px;
  }

  .footer-link {
    font-size: 14px;
  }

  .text-center.text-left---mbl {
    text-align: left;
  }

  .floating-item.team-member {
    transform: rotateX(180deg)rotateY(0)rotateZ(0);
  }

  .floating-item.card-forgot-password-bg {
    width: 168%;
    max-width: none;
    top: -13%;
    left: -26%;
  }

  .floating-item.card-landing-demo-bg {
    object-position: 100% 50%;
  }

  ._w-h-100.fit-cover.responsive-mbl {
    max-height: 400px;
  }

  .fit-cover._w-h-100.product-image, .fit-cover._w-h-100.max-height-500px---mbl, .fit-cover._w-h-100.about-hero-image {
    max-height: 500px;
  }

  .grid-6-columns.logo-strip {
    grid-row-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .accordion-side {
    margin-left: 24px;
  }

  .accordion-title {
    font-size: 20px;
    line-height: 30px;
  }

  .bg-overlay-gradient.bg-mobile-app {
    height: 20vh;
  }

  .image.google-logo {
    width: 76%;
    max-width: 112px;
  }

  .image.twitch-logo {
    width: 75%;
    max-width: 112px;
  }

  .blog-card-image-wrapper.inside-card {
    min-height: auto;
    max-height: 350px;
  }

  .blog-card-content-inside {
    padding: 48px 24px 40px;
  }

  .image-wrapper.border-radius-12px.hero-image, .image-wrapper.border-radius-12px.content-left---image-right---image, .image-wrapper.border-radius-12px.blog-post-image {
    max-height: 400px;
  }

  .image-wrapper.border-radius-12px.team-page-picture-wrap {
    max-width: 100%;
    max-height: 500px;
  }

  .image-wrapper.border-radius-5px.size-22px {
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
  }

  ._404-not-found {
    font-size: 164px;
  }

  .checkout-form {
    max-width: 500px;
  }

  .order-list-title {
    font-size: 16px;
  }

  .order-item-content {
    margin-top: 18px;
    margin-left: 0;
    margin-right: 0;
  }

  .mg-section {
    margin-left: 12px;
    margin-right: 12px;
  }

  .logo-wrapper {
    margin-top: 115px;
  }

  .content-banking-experience {
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
    align-items: start;
    max-width: 380px;
    bottom: 24px;
    left: 24px;
    right: 24px;
  }

  .image-phone-balance {
    max-width: 300px;
  }

  .image-absolute-bot {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .arrow-circle {
    font-size: 22px;
    line-height: 24px;
    top: 24px;
    right: 24px;
  }

  .stats-text {
    font-size: 80px;
  }

  .testimonials-wrapper.last {
    width: 100%;
  }

  .space-168px-alt {
    height: 80px;
  }

  .line-decorative {
    opacity: .4;
    height: 22%;
    top: 774px;
    left: 29%;
  }

  .line-decorative.bottom {
    width: 100%;
    bottom: 13%;
  }

  .testimonials-wrapper-v1 {
    max-width: 100%;
    max-height: 400px;
  }

  .testimonials-content-v1 {
    bottom: 24px;
    left: 24px;
    right: 24px;
  }

  .line-icon-btn {
    font-size: 18px;
  }

  .style---logo-sidebar---link {
    max-width: 142px;
  }

  .position-absolute-pricing.hero-v1-bg {
    bottom: -12%;
  }

  .accent-line {
    max-width: 98px;
  }

  .accent-line.center.left---mbl {
    margin-left: 0;
  }

  .accent-line.center---mbl {
    margin-left: auto;
    margin-right: auto;
  }

  .grid-2-col---cards {
    grid-template-columns: 1fr;
  }

  .menu-title {
    font-size: 18px;
  }

  .bg-color-section-alt {
    height: 80%;
  }

  .mg-bottom-20px---mbl {
    margin-bottom: 20px;
  }

  .mg-bottom-68px {
    margin-bottom: 58px;
  }

  .layout-content-bottom, .layout-content-top {
    max-width: 100%;
    margin: 0 0 40px;
  }

  .cta-content {
    padding-top: 64px;
    padding-bottom: 64px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .cta-image {
    margin-bottom: -100%;
  }

  .team-item-wrapper {
    max-height: 500px;
  }

  .values-icon-wrapper {
    flex-direction: row;
    max-width: 100%;
  }

  .mg-bottom-8px---mbl {
    margin-bottom: 8px;
  }

  .content-link.card-product-link._3-posts-item {
    flex-direction: column;
  }

  .text-center---mbl {
    text-align: center;
  }

  .mg-bottom-50px {
    margin-bottom: 43px;
  }

  .contact-form-block {
    min-height: 534px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .perks-icon-wrapper {
    max-width: 100%;
  }

  .gap-row-75px {
    grid-row-gap: 60px;
  }

  .career-grid {
    grid-row-gap: 32px;
    grid-template-columns: 1fr 1fr auto;
  }

  .mg-bottom-60px {
    margin-bottom: 50px;
  }

  .blog-post-featured-image {
    max-height: 400px;
  }

  .blog-post-featured-content {
    padding: 40px 32px;
  }

  .card-author-content-top {
    flex-direction: row;
    align-items: center;
  }

  .card-author-avatar {
    min-width: 70px;
    max-width: 70px;
    min-height: 70px;
    max-height: 70px;
    margin-bottom: 0;
  }

  .rich-text-news h2 {
    font-size: 38px;
  }

  .rich-text-news h3 {
    margin-top: 26px;
    font-size: 26px;
  }

  .rich-text-news figure {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .rich-text-news ul, .rich-text-news ol {
    margin-top: 26px;
    margin-bottom: 26px;
    padding-left: 30px;
  }

  .rich-text-news h6 {
    margin-top: 26px;
    font-size: 16px;
  }

  .rich-text-news h5 {
    margin-top: 26px;
    font-size: 18px;
  }

  .rich-text-news h4 {
    margin-top: 26px;
    font-size: 20px;
  }

  .rich-text-news blockquote {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .rich-text h2 {
    font-size: 22px;
  }

  .rich-text h3 {
    margin-top: 26px;
  }

  .rich-text figure {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .rich-text ul, .rich-text ol {
    margin-top: 26px;
    margin-bottom: 26px;
    padding-left: 30px;
  }

  .rich-text h6, .rich-text h5, .rich-text h4 {
    margin-top: 26px;
  }

  .rich-text blockquote {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .rich-text-v4 h2 {
    font-size: 40px;
  }

  .rich-text-v4 h3 {
    margin-top: 26px;
    font-size: 26px;
  }

  .rich-text-v4 figure {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .rich-text-v4 ul, .rich-text-v4 ol {
    margin-top: 26px;
    margin-bottom: 26px;
    padding-left: 30px;
  }

  .rich-text-v4 h6 {
    margin-top: 26px;
    font-size: 16px;
  }

  .rich-text-v4 h5 {
    margin-top: 26px;
    font-size: 18px;
  }

  .rich-text-v4 h4 {
    margin-top: 26px;
    font-size: 22px;
  }

  .rich-text-v4 blockquote {
    margin-top: 26px;
    margin-bottom: 26px;
  }

  .mg-bottom--48px {
    margin-bottom: -42px;
  }

  .grid-footer---menu {
    grid-row-gap: 60px;
    grid-template-columns: 1.5fr 1fr;
    justify-content: stretch;
  }

  .demo-form-block {
    min-height: 500px;
  }

  .demo-form {
    grid-template-columns: 1fr;
  }

  .card-product-content._3-posts-item {
    max-width: 100%;
    padding-bottom: 32px;
  }

  .card-product-content-bottom._3-posts-item {
    width: 100%;
    position: static;
  }

  .card-product-add-cart---main {
    min-height: 48px;
  }

  .add-cart {
    min-height: 134px;
  }

  .demo-features-wrapper {
    flex-direction: column;
  }

  .flex-vertical---mbl {
    flex-direction: column;
    display: flex;
  }

  .order-item-content---main {
    flex-direction: column;
    align-items: flex-start;
    margin-right: 16px;
  }

  .header-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .header-logo-link {
    max-width: 138px;
  }

  .hamburger-menu-bar {
    width: 35px;
  }

  .header-logo {
    min-width: 120px;
    max-width: 120px;
  }

  .hamburger-menu-wrapper {
    margin-left: 20px;
  }

  .dropdown-toggle {
    font-size: 20px;
  }

  .image-wrapper-dropdown.dropdown-button-icon {
    width: 28px;
  }

  .legal-text {
    font-size: 14px;
  }

  .card-mobile-app-wrapper {
    padding-right: 24px;
  }

  .card-earning-expense-reports {
    grid-row-gap: 40px;
    padding: 32px 24px;
  }

  .content-text-bottom {
    margin-bottom: 24px;
    margin-left: 24px;
    margin-right: 100px;
  }

  .mg-bottom-111px {
    margin-bottom: 71px;
  }

  .lightbox-video-icon {
    min-width: 80px;
    max-width: 80px;
    min-height: 80px;
    max-height: 80px;
  }

  .mg-top-68px {
    margin-top: 60px;
  }

  .problem-solution-image {
    height: 400px;
  }

  .tabs-wrapper {
    grid-template-columns: 1fr;
  }

  .event-categories-item-wrapper {
    position: static;
  }

  .switcher {
    width: 101.125px;
    height: 42px;
  }

  .monthly-wrap, .oneyear-wrap {
    margin-left: 2px;
    margin-right: 2px;
  }

  .btn-secondary-wo-animation {
    padding: 15px 20px;
    font-size: 14px;
  }

  .btn-secondary-wo-animation.small {
    padding: 12px 13px;
    font-size: 12px;
  }

  .price-com-area-wrapepr {
    padding: 8px 12px;
  }

  .position-sticky.plan-com-header-wrapper {
    margin-bottom: 4px;
    padding-top: 34px;
  }

  .position-sticky.plan-com-subheader-wrapper {
    padding-top: 18px;
    top: 70px;
  }

  .hidden-on-mbl {
    display: none;
  }

  .tab-link {
    padding: 8px 12px;
  }

  .plan-com-dropdown-wrap {
    flex-direction: column;
  }

  .dropdown {
    padding-top: 34px;
  }

  .replace-text {
    font-size: 20px;
  }

  .price-com-dropown-list {
    margin-top: -8px;
    padding-top: 18px;
  }

  .pd-top-8px {
    padding-top: 4px;
  }

  .cta-visible-on-tablet {
    display: none;
  }

  .cta-visible-on-mbl-mbp {
    display: inline-block;
  }

  .layout-content-berufe {
    margin-top: 0;
    margin-bottom: 0;
  }

  .card-image---image {
    max-width: 100%;
    max-height: 400px;
  }

  .position-relative---mbl {
    position: relative;
  }

  .position-relative---mbl.pd-bottom-12px.pd-bottom-0px---mbl {
    padding-bottom: 0;
  }

  .statt-preis {
    font-size: 16px;
  }

  .countdown-wrapper, .countdown-item {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .clock-number {
    font-size: 26px;
  }

  .ipad-screen {
    border-radius: 6px;
  }

  .mg-bottom-0px---mbl {
    margin-bottom: 0;
  }

  .twoyears-wrap {
    margin-left: 2px;
    margin-right: 2px;
  }

  .grid-5-columns.price-com-grid-5-col {
    padding: 8px 12px;
  }

  .tooltip-float.top {
    inset: auto 118% -165% auto;
  }

  .tooltip-arrow.bottom {
    inset: 45% -8px auto auto;
    transform: rotate(180deg);
  }

  .price-feature-text {
    font-size: 12px;
  }

  .arrow-image {
    width: 20px;
  }

  .break-all---mbl {
    word-break: break-all;
  }

  .tabs-2-cols-content {
    max-height: 400px;
  }

  .tabs-2-cols-menu {
    margin-bottom: 50px;
  }

  .price-discount {
    right: 0;
  }

  .visible-on-mbl {
    display: block;
  }

  .certificate-image {
    width: 72px;
  }

  .mg-right-0px---mbl {
    margin-right: 0;
  }

  .pd-top-bottom-98px {
    padding-top: 68px;
    padding-bottom: 68px;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 24px;
  }

  blockquote {
    padding: 50px 24px;
    font-size: 18px;
  }

  .grid-2-columns.gap-row-75px._2-col-mbl {
    grid-template-columns: 1fr;
  }

  .grid-2-columns.newsletter-grid {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .grid-2-columns.hero-news-grid {
    grid-row-gap: 32px;
  }

  .card.contact-form {
    padding: 43px 24px 40px;
  }

  .card.career-sidebar {
    flex-direction: column;
    padding: 32px 24px;
  }

  .card.landing-form {
    padding: 50px 24px;
  }

  .card.not-found-card {
    padding: 80px 24px;
  }

  .card.password-page {
    padding: 58px 24px 100px;
  }

  .card.search-result {
    padding: 32px 24px;
  }

  .card.testimonials-main, .card.testimonials {
    padding: 40px 24px;
  }

  .grid-4-columns {
    grid-template-columns: 1fr;
  }

  .divider {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .mg-bottom-16px {
    margin-bottom: 8px;
  }

  .mg-bottom-24px {
    margin-bottom: 16px;
  }

  .mg-top-16px {
    margin-top: 10px;
  }

  .mg-top-48px {
    margin-top: 32px;
  }

  .mg-right-24px {
    margin-right: 10px;
  }

  .display-1 {
    font-size: 38px;
  }
  /* Lange Karriere-Titel umbrechen lassen statt overflow */
  .career-detail-hero-wrap .display-1,
  .application-form-card .application-form-title {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .grid-1-column.step-grid {
    grid-row-gap: 32px;
  }

  .grid-1-column.contact-layout {
    grid-template-columns: 1fr;
  }

  .display-2 {
    font-size: 34px;
  }

  .display-3 {
    font-size: 24px;
  }

  .display-3.break-all---mbp {
    word-break: break-all;
  }

  .display-4 {
    font-size: 20px;
  }

  .grid-3-columns {
    grid-template-columns: 1fr;
  }

  .grid-3-columns.certificates {
    grid-template-columns: 1fr 1fr;
  }

  .style---heading {
    margin-bottom: 40px;
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .inner-container._100-mbp {
    max-width: 100%;
  }

  .inner-container._509px._100-tablet.mg-top-68px---tbl {
    margin-top: 52px;
  }

  .inner-container._350px---mbp {
    max-width: 350px;
  }

  .inner-container._250px---mbp {
    max-width: 250px;
  }

  .style---content-heading {
    padding-left: 22px;
    padding-right: 22px;
  }

  .style---heading-icon-wrapper {
    width: 58px;
    margin-right: 14px;
  }

  .btn-primary {
    white-space: normal;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .btn-primary.large {
    padding-left: 20px;
    padding-right: 20px;
  }

  .btn-primary.inside-input {
    position: static;
  }

  .btn-primary.inside-input.default {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .btn-primary.inside-input.default.hidden-on-mbp {
    display: none;
  }

  .btn-primary.visible-on-mbp {
    display: block;
  }

  .btn-secondary {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .btn-secondary.large {
    padding-left: 20px;
    padding-right: 20px;
  }

  .btn-secondary.add-cart-btn {
    margin-top: 16px;
  }

  .badge-secondary.small.card-product-price {
    top: 20px;
    right: 20px;
  }

  .input.button-inside {
    margin-bottom: 16px;
    padding-right: 20px;
  }

  .checkbox-field-wrapper {
    font-size: 16px;
    line-height: 20px;
  }

  .checkbox-field-wrapper.large {
    font-size: 18px;
    line-height: 22px;
  }

  .radio-button-field-wrapper {
    font-size: 16px;
    line-height: 22px;
  }

  .radio-button-field-wrapper.large {
    font-size: 18px;
    line-height: 24px;
  }

  .square-icon {
    border-radius: 14px;
    max-width: 56px;
  }

  .social-icon-square {
    border-radius: 6px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    font-size: 14px;
  }

  .line-rounded-icon.success-message-check.large {
    font-size: 58px;
    line-height: 64px;
  }

  .rich-text-v1 h3 {
    margin-top: 24px;
  }

  .rich-text-v1 ul, .rich-text-v1 ol {
    padding-left: 20px;
  }

  .buttons-row {
    flex-direction: column;
  }

  .container-default {
    padding-left: 24px;
    padding-right: 24px;
  }

  .container-default.overflow-hidden.mb-none-overflow-hidden {
    overflow: visible;
  }

  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .mg-section.cta {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .section.hero-full.top-210px---bottom-50px {
    padding-top: 122px;
  }

  .section.pd-150px {
    padding-top: 87px;
    padding-bottom: 87px;
  }

  .section.pd-top-150px {
    padding-top: 87px;
  }

  .section.cta {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section.hero.top-78px {
    padding-top: 48px;
    padding-bottom: 82px;
  }

  .section.hero.top-bottom-280px {
    padding-top: 160px;
    padding-bottom: 80px;
  }

  .section.hero.top-78px---bottom-140px {
    padding-bottom: 72px;
  }

  .section.hero.top-138px---bottom-126px {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section.hero.top-110px---bottom-90px {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .section.hero.top-bottom-78px {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section.pd-top-104px {
    padding-top: 60px;
  }

  .section.pd-120px {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section.pd-top-bottom-150px {
    padding-top: 87px;
    padding-bottom: 87px;
  }

  .top-bar-wrapper {
    padding-left: 0;
    padding-right: 19px;
  }

  .heading-h1-size {
    font-size: 32px;
  }

  .heading-h2-size {
    font-size: 24px;
  }

  .header-nav-list-item {
    text-align: left;
  }

  .header-nav-list-item.show-in-tablet {
    justify-content: flex-start;
    display: flex;
  }

  .header-nav-list-item.show-in-tablet.header-btn {
    width: 100%;
  }

  .header-nav-list-item.show-in-tablet.header-btn.top {
    flex-flow: column;
  }

  .header-right-side {
    margin-left: 3px;
  }

  .btn-circle-secondary.small.accordion-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .flex-horizontal.pagination-count {
    order: -1;
  }

  .footer-logo-wrapper {
    max-width: 138px;
  }

  .text-center.text-left---mbp {
    text-align: left;
  }

  .floating-item.hero-help-articel {
    width: 194%;
  }

  .floating-item.card-forgot-password-bg {
    left: -20%;
  }

  ._w-h-100.fit-cover.responsive-mbl {
    max-height: 350px;
  }

  .fit-cover._w-h-100.product-image {
    max-height: 400px;
  }

  .fit-cover._w-h-100.about-hero-image {
    max-height: 350px;
  }

  .grid-6-columns.logo-strip {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-direction: row;
    max-width: 350px;
  }

  .accordion-item-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }

  .accordion-side {
    margin-left: 16px;
  }

  .accordion-title {
    font-size: 18px;
    line-height: 26px;
  }

  .bg-overlay-gradient.bg-mobile-app {
    height: 30%;
  }

  .blog-card-content-inside {
    padding-left: 24px;
    padding-right: 24px;
  }

  .image-wrapper.border-radius-12px.blog-post-image {
    max-height: 350px;
  }

  .image-wrapper.border-radius-12px.team-page-picture-wrap {
    max-height: 450px;
  }

  ._404-not-found {
    font-size: 32vw;
  }

  .shipping-method {
    flex-direction: column;
  }

  .order-item {
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .order-list-price {
    margin-top: 2px;
  }

  .order-list-title {
    margin-bottom: 4px;
  }

  .checkout-column {
    margin-bottom: 24px;
  }

  .logo-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 96px;
  }

  .card-mobile-app {
    padding-right: 0;
  }

  .text-banking-experience.justify-left.static-mbp {
    position: sticky;
  }

  .image-phone-balance {
    width: 100%;
  }

  .arrow-circle {
    top: 20px;
    right: 20px;
  }

  .stats-text {
    margin-bottom: 12px;
    font-size: 60px;
  }

  .testimonials-content {
    left: 20px;
    right: 20px;
  }

  .space-168px-alt {
    height: 70px;
  }

  .line-decorative {
    top: 704px;
  }

  .line-decorative.bottom {
    height: 22%;
  }

  .testimonials-wrapper-v1 {
    min-height: 300px;
    max-height: 350px;
  }

  .line-icon-btn {
    font-size: 16px;
  }

  .badge-top-inside {
    top: -15px;
  }

  .text-link---arrow {
    font-size: 14px;
  }

  .style---logo-sidebar---link {
    max-width: 120px;
  }

  .position-absolute-pricing.hero-v1-bg {
    bottom: -5%;
  }

  .accent-line.center.left---mbp {
    margin-left: 0;
    margin-right: 0;
  }

  .image-layout-alt {
    max-height: 350px;
  }

  .team-item-wrapper {
    min-height: 400px;
  }

  .values-icon-wrapper {
    flex-direction: column;
  }

  .contact-form-block {
    min-height: 578px;
  }

  .contact-form-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .perks-icon {
    min-width: 72px;
    max-width: 72px;
    min-height: auto;
    max-height: none;
  }

  .perks-icon-wrapper {
    flex-direction: column;
  }

  .career-grid {
    grid-row-gap: 16px;
    grid-template-columns: 1fr auto;
  }

  .mg-bottom-20px---mbp {
    margin-bottom: 20px;
  }

  .card-sidebar-v1-icon {
    min-width: 65px;
    max-width: 65px;
    min-height: 65px;
    max-height: 65px;
    margin-bottom: 8px;
  }

  .blog-post-featured-image {
    max-height: 350px;
  }

  .blog-post-featured-content {
    padding: 32px 24px;
  }

  .card-author-content-top {
    flex-direction: column;
    align-items: stretch;
  }

  .card-author-avatar {
    margin-bottom: 16px;
  }

  .rich-text-news h2 {
    font-size: 32px;
  }

  .rich-text-news h3 {
    margin-top: 24px;
    font-size: 24px;
  }

  .rich-text-news ul, .rich-text-news ol {
    padding-left: 20px;
  }

  .rich-text h2 {
    font-size: 20px;
  }

  .rich-text h3 {
    margin-top: 24px;
  }

  .rich-text ul, .rich-text ol {
    padding-left: 20px;
  }

  .rich-text-v4 h2 {
    font-size: 34px;
  }

  .rich-text-v4 h3 {
    margin-top: 24px;
    font-size: 24px;
  }

  .rich-text-v4 ul, .rich-text-v4 ol {
    padding-left: 20px;
  }

  .rich-text-v4 h4 {
    font-size: 20px;
  }

  .grid-footer {
    grid-row-gap: 50px;
    grid-template-columns: 1fr;
  }

  .grid-footer---menu {
    grid-column-gap: 18px;
    grid-row-gap: 50px;
    grid-template-columns: 1fr;
  }

  .card-product-content {
    padding: 24px;
  }

  .card-product-content._3-posts-item {
    padding-bottom: 24px;
  }

  .card-product-content-bottom {
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .add-cart {
    min-height: 134px;
  }

  .shipping-method-content {
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: 0;
  }

  .button-career-category {
    align-self: stretch;
    width: 100%;
  }

  .hamburger-menu-bar {
    width: 30px;
  }

  .hamburger-menu-wrapper {
    margin-left: 15px;
  }

  .dropdown-bottom-button-content {
    margin-bottom: 0;
  }

  .dropdown-nav-pages-wrapper {
    width: 100%;
  }

  .dropdown-flex.dropdown-button-v1 {
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .card-cryptocurrencies {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding-top: 32px;
  }

  .image-feature-1 {
    width: 90%;
  }

  .card-mobile-app-wrapper {
    flex-direction: column-reverse;
    align-items: center;
    padding-right: 0;
  }

  .card-earning-expense-reports {
    flex-direction: column-reverse;
  }

  .content-text-bottom {
    margin-top: 0;
    margin-bottom: 40px;
    margin-right: 24px;
  }

  .image-feature-2 {
    object-fit: cover;
    object-position: 0% 0%;
    width: 235px;
    max-height: 350px;
  }

  .mg-bottom-111px {
    margin-bottom: 57px;
  }

  .mg-top-68px {
    margin-top: 52px;
  }

  .problem-solution-image {
    height: 350px;
  }

  .hidden-on-mbp {
    display: none;
  }

  .filter-pagination-count {
    text-align: left;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .btn-secondary-wo-animation {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tab-link.w--current {
    z-index: 10;
    order: -1;
  }

  .clock-number {
    font-size: 24px;
  }

  ._3d-tablet-wrap {
    perspective-origin: 50% 0;
  }

  .ipad-screen {
    border-radius: 4px;
  }

  .grid-5-columns {
    grid-template-columns: 1fr;
  }

  .tabs-2-cols-content {
    max-height: 350px;
  }

  .break-all---mbp {
    word-break: break-all;
  }

  .pd-top-bottom-98px {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad081a-2d8667b4 {
  place-self: end;
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad081e-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad081f-2d8667b4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad0825-2d8667b4 {
  place-self: end;
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad0829-2d8667b4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad082a-2d8667b4, #w-node-f58f42c9-b0e0-9e94-23da-73be4bad082f-2d8667b4 {
  align-self: stretch;
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad0834-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-f58f42c9-b0e0-9e94-23da-73be4bad0835-2d8667b4, #w-node-f58f42c9-b0e0-9e94-23da-73be4bad083a-2d8667b4, #w-node-f58f42c9-b0e0-9e94-23da-73be4bad083b-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3f632877-e9f0-db98-118c-85a739f24885-2d8667b4, #w-node-_3f632877-e9f0-db98-118c-85a739f24891-2d8667b4 {
  align-self: end;
}

#w-node-_48a0ad15-3c84-3e2d-6b17-84f784109044-2d8667b4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_3f632877-e9f0-db98-118c-85a739f24897-2d8667b4 {
  align-self: center;
}

#w-node-_651fdd67-955f-9e41-3fcf-91ac03103e6c-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-_651fdd67-955f-9e41-3fcf-91ac03103e79-2d8667b4 {
  align-self: stretch;
}

#w-node-_2615851a-1118-8fb1-109d-a43213fb7713-2d8667b4 {
  place-self: end;
}

#w-node-fea5b1e4-1884-fd57-5752-51c5b4bf03c2-2d8667b4 {
  align-self: stretch;
}

#w-node-_6f9b3cfb-513b-5a8a-0f71-efc01107ee64-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-_6f9b3cfb-513b-5a8a-0f71-efc01107ee67-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6f9b3cfb-513b-5a8a-0f71-efc01107ee6e-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-_6f9b3cfb-513b-5a8a-0f71-efc01107ee6f-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c37f3-2d8667b4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c37ff-2d8667b4 {
  justify-self: end;
}

#w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c381b-2d8667b4 {
  grid-area: 1 / 2 / 2 / 2;
  justify-self: end;
}

#w-node-_18035b5e-edab-d4fd-8fdb-ecfbdbf6e4ab-2d8667b4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_58aadc41-3c75-fe63-33b1-520a44191572-44191556 {
  align-self: center;
}

#w-node-_58aadc41-3c75-fe63-33b1-520a4419157f-44191556 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_3cabf274-2ec1-7596-2330-bb20ab646237-ab646233 {
  align-self: center;
}

#w-node-_3cabf274-2ec1-7596-2330-bb20ab646245-ab646233 {
  place-self: stretch end;
}

#w-node-_46e57783-4758-ccb9-4d1c-683132cb48b5-32cb4855 {
  grid-column: span 2 / span 2;
}

#w-node-ee68fb6a-8be8-4679-7d20-047986dbbf06-2d8667b6 {
  order: -9999;
}

#w-node-f9b643d5-14a9-c5b6-546c-d7e180a37e1b-2d8667b8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-cea323b7-4147-fa5f-6e83-4c138093fdc5-2d8667b8, #w-node-_08f85fc8-74cb-2fba-8918-670d879d494b-2d8667b8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_95d21c9e-ba36-28bf-ecaa-52019f6e651d-2d8667b8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-c31685de-f74f-8edd-e89f-42aed566d9cf-2d8667b8 {
  place-self: end;
}

#w-node-c31685de-f74f-8edd-e89f-42aed566d9d4-2d8667b8 {
  align-self: stretch;
}

#w-node-b9b0fcf7-15cc-e20c-6e9d-f7b8ef4f7718-2d8667bb {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5dbe08a1-a0fe-9396-9fcb-26f806864bee-2d8667bb {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center end;
}

#w-node-f1be0c42-c00a-2a9a-87db-28771c3324a5-2d8667bb {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0fb7bbc7-9ffe-cfd1-ffd6-9ecc1135a07c-2d8667bb {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: end;
}

#w-node-_92b21c35-2250-f4ff-3d0d-019b63e6d04f-2d8667bd {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}

#w-node-_2075b946-634d-ce42-2578-15a2926892ff-2d8667bd {
  place-self: end;
}

#w-node-_2075b946-634d-ce42-2578-15a292689304-2d8667bd {
  align-self: stretch;
}

#w-node-ae69c721-fe3e-8269-a705-e35ba058601a-2d8667c1 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_48179c42-8780-db30-ba01-1c22fea07ab4-2d8667c1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_27ece58f-9691-bc9c-e629-b3efcf0d60ee-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-fc23944b-047c-43ca-2dc4-610d32e3f1fd-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: stretch end;
}

#w-node-b9f53ccd-0073-8a17-f43a-7f35673865bb-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-b9f53ccd-0073-8a17-f43a-7f35673865c7-2d8667c3, #w-node-b9f53ccd-0073-8a17-f43a-7f35673865e1-2d8667c3 {
  justify-self: end;
}

#w-node-_1a06831d-e615-3db2-c8b2-62a9f23f882b-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-df9b4535-8a04-cd1a-727c-a7edeb11f6c9-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d90d-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d914-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d91e-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d92a-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d934-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d93e-2d8667c3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-ac12fb12-a873-2921-dd65-bd5fb8958d55-2d8667c4, #w-node-ac12fb12-a873-2921-dd65-bd5fb8958d64-2d8667c4 {
  align-self: end;
}

#w-node-ac12fb12-a873-2921-dd65-bd5fb8958d69-2d8667c4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-ac12fb12-a873-2921-dd65-bd5fb8958d6d-2d8667c4 {
  align-self: center;
}

#w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa41-2d8667c4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa42-2d8667c4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa48-2d8667c4 {
  place-self: end;
}

#w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa4e-2d8667c4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa4f-2d8667c4, #w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa54-2d8667c4 {
  align-self: stretch;
}

#w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa5b-2d8667c4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa5c-2d8667c4, #w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa63-2d8667c4, #w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa64-2d8667c4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-d436e683-1868-b635-7bd0-d34fea768bd9-2d8667c5 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-e8c3b984-cd7a-a694-a808-ec14a2718881-2d8667c5 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_820eea29-8703-1666-b65a-396655101beb-2d8667c5, #w-node-_6616697a-2082-dd9d-7809-b5290a3b4296-2d8667c5, #w-node-_4999515a-94e6-89a3-902f-e791788fc2d4-2d8667c5 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_446bd5ea-1916-a5ba-afbf-9df124fd7e59-2d8667c5, #w-node-_40b72410-d1c0-578c-2ffd-990df241228e-2d8667c5, #w-node-_375f2a9a-355a-ee11-7453-dea6b6b7b8fd-2d8667c6 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b6b8e5fa-1b4f-5918-dca8-daa9de403b42-2d8667c6 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-db2d2f28-1cee-2539-a6db-e42a63526f73-2d8667c6 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b5ba8694-7c85-1167-05ae-14a560796505-2d8667c6 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-fc96cb41-dcd6-aa35-ab49-bf58f586572b-2d8667c6 {
  place-self: center end;
}

#w-node-f2091b5c-fbb8-fa0c-ca39-1d46ccf99178-2d8667c6, #w-node-c2f7fca8-1af3-f358-007f-80d42b7052ee-2d8667c6, #w-node-_08fc6262-064c-8562-bb7e-ca9d0f88d638-2d8667c6, #w-node-a9d49e78-72ae-bc38-7b27-8176b4010f03-2d8667c6 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2068a914-e220-7256-69e9-828cae419065-2d8667c6 {
  place-self: center end;
}

#w-node-d9e4e6aa-c20c-c445-6c4a-72e830db744f-2d8667c7 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b7210d41-8fbf-12ef-294a-a13b9d080324-2d8667c7 {
  justify-self: end;
}

#w-node-e9dd2048-f7e6-e32b-d655-a6dc694d148d-2d8667c7 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_214b1560-c044-7359-042c-a31cd1221a98-2d8667c7, #w-node-_3153b8cc-09f8-5561-96e9-26f1432695a8-2d8667c7, #w-node-e1e9c665-7abc-f2ed-5e46-593d34885f35-2d8667c7 {
  align-self: stretch;
}

#w-node-_0ddd3c0a-1c65-5c34-4f79-b0c7d6ce7146-2d8667ca {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_123c1e61-dbea-b6c5-4f94-03d3d6a38c5a-2d8667ca {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_7d3ae38c-75fc-08fb-61db-0a94fda19707-2d8667ca {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b51b332f-2e1d-475a-bca4-0508e22fd678-2d8667ca {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: end;
}

#w-node-f83d9060-7bb5-8d84-fc9f-d8a95adbfdb6-2d8667ca, #w-node-f83d9060-7bb5-8d84-fc9f-d8a95adbfdba-2d8667ca, #w-node-f83d9060-7bb5-8d84-fc9f-d8a95adbfdbe-2d8667ca {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f83d9060-7bb5-8d84-fc9f-d8a95adbfdc2-2d8667ca {
  place-self: center end;
}

#w-node-_7b0731d5-fb49-247e-02ae-629c82bf0575-2d8667cb {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: stretch end;
}

#w-node-_56f39161-0a7d-edc4-c04f-1f1558025552-2d8667cb, #w-node-_56f39161-0a7d-edc4-c04f-1f1558025517-2d8667cb {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_872fda8f-3433-dc7c-cfd4-ecb227df0f81-2d8667cb {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_872fda8f-3433-dc7c-cfd4-ecb227df0f87-2d8667cb {
  place-self: center end;
}

#w-node-ae9de8a7-fa31-f95d-c268-25a297244b32-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-ae9de8a7-fa31-f95d-c268-25a297244b35-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ae9de8a7-fa31-f95d-c268-25a297244b41-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-ae9de8a7-fa31-f95d-c268-25a297244b42-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb5881-2d8667cc {
  place-self: end;
}

#w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb5887-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb5888-2d8667cc, #w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb5894-2d8667cc {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb5895-2d8667cc, #w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb589a-2d8667cc {
  align-self: stretch;
}

#w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb589f-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb58a0-2d8667cc, #w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb58a7-2d8667cc, #w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb58a8-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f8829039-6cd1-fbc8-48b4-98315dbb8bd9-2d8667cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-f8829039-6cd1-fbc8-48b4-98315dbb8be2-2d8667cc {
  place-self: center end;
}

#w-node-_70de1d5a-f128-9dab-1718-03bf7bc71456-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_70de1d5a-f128-9dab-1718-03bf7bc71459-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_9f9672b2-d8c7-122d-37fd-1ee1999e959b-2d8667cf {
  align-self: end;
}

#w-node-d3f96603-71d6-f428-bc92-f9ba7582ebbe-2d8667cf {
  justify-self: center;
}

#w-node-d3f96603-71d6-f428-bc92-f9ba7582ebc1-2d8667cf, #w-node-_9ed1d97f-2543-6a7d-8175-5f7cbb55ff5c-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}

#w-node-ae9f0504-9de0-bf74-3546-b4907baf346e-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf3472-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf3476-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf347a-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf347e-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf3498-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf349c-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34a0-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34a4-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34a8-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34c2-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34c6-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34ca-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34ce-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34d2-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34ea-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34ee-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34f2-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34f6-2d8667cf, #w-node-ae9f0504-9de0-bf74-3546-b4907baf34fa-2d8667cf, #w-node-_30bc22e9-9b4e-2825-9022-c9aaa3e77082-2d8667cf, #w-node-_320ca5b6-5102-8594-f4e8-2b13f8eec175-2d8667cf, #w-node-f22482a0-cdf1-fdd3-870f-5992cd45c413-2d8667cf, #w-node-d99d10e2-6dd8-772d-8a37-251ea33d8023-2d8667cf, #w-node-_1515e7f0-7a16-d967-9dd5-5c9cec68a036-2d8667cf, #w-node-e16dcd00-dae1-8580-8227-50151f514965-2d8667cf, #w-node-e16dcd00-dae1-8580-8227-50151f514969-2d8667cf, #w-node-e16dcd00-dae1-8580-8227-50151f51496d-2d8667cf, #w-node-e16dcd00-dae1-8580-8227-50151f514971-2d8667cf, #w-node-e16dcd00-dae1-8580-8227-50151f514975-2d8667cf, #w-node-ae012352-70bd-c8d8-0925-ac533a190cf0-2d8667cf, #w-node-ae012352-70bd-c8d8-0925-ac533a190cf4-2d8667cf, #w-node-ae012352-70bd-c8d8-0925-ac533a190cf8-2d8667cf, #w-node-ae012352-70bd-c8d8-0925-ac533a190cfc-2d8667cf, #w-node-_6a193346-6eb8-41de-b06d-1ae06b2e33b0-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ccd3e686-da0a-7992-037f-cbce2773aa88-2d8667cf {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_79b1c378-5381-cf54-e7e1-afe5c4cbc97e-2d8667cf, #w-node-_79b1c378-5381-cf54-e7e1-afe5c4cbc982-2d8667cf, #w-node-_79b1c378-5381-cf54-e7e1-afe5c4cbc986-2d8667cf, #w-node-_79b1c378-5381-cf54-e7e1-afe5c4cbc98a-2d8667cf, #w-node-_79b1c378-5381-cf54-e7e1-afe5c4cbc98e-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6219-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c621d-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6221-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6225-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6229-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6243-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6247-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c624b-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c624f-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6253-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c626d-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6271-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6275-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c6279-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c627d-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c628b-2d8667cf {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c62a2-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c62a6-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c62aa-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c62ae-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c62b2-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba08c-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba090-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba094-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba098-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba09c-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0b6-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0ba-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0be-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0c2-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0c6-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0e0-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0e4-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0e8-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0ec-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0f0-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0fe-2d8667cf {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba115-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba119-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba11d-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba121-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba125-2d8667cf, #w-node-_9ab73c41-4e42-3afb-6fe3-7f0b78e00cf9-2d8667cf, #w-node-_9ab73c41-4e42-3afb-6fe3-7f0b78e00cfd-2d8667cf, #w-node-_9ab73c41-4e42-3afb-6fe3-7f0b78e00d01-2d8667cf, #w-node-_9ab73c41-4e42-3afb-6fe3-7f0b78e00d05-2d8667cf, #w-node-_9ab73c41-4e42-3afb-6fe3-7f0b78e00d09-2d8667cf, #w-node-_450adc46-29fe-b675-93c6-9dd2300a40f1-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_575b2898-c7fb-ec64-073f-7c5bc71032c8-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_596750fb-c050-b202-393e-ea0c413b5a8c-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-dc63d5b0-6141-d919-04ca-94b2c1960774-2d8667cf, #w-node-cf47fd7c-568b-9333-a0ae-110286996c93-2d8667cf, #w-node-_389f4ffa-6945-fda8-9b72-f4b15b0db330-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_6220f840-a1c2-ca0f-2d87-a09bf79ddd44-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6220f840-a1c2-ca0f-2d87-a09bf79ddd4c-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-e6c0222c-af17-10c4-8e7c-469949148e0a-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6220f840-a1c2-ca0f-2d87-a09bf79ddd7e-2d8667cf, #w-node-_6220f840-a1c2-ca0f-2d87-a09bf79dddbf-2d8667cf, #w-node-_6220f840-a1c2-ca0f-2d87-a09bf79dddfc-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_7908beb3-390d-fdbd-4044-4d470dbcdbc4-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7908beb3-390d-fdbd-4044-4d470dbcdbd8-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_7908beb3-390d-fdbd-4044-4d470dbcdbef-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7908beb3-390d-fdbd-4044-4d470dbcdc11-2d8667cf, #w-node-_7908beb3-390d-fdbd-4044-4d470dbcdc46-2d8667cf, #w-node-_7908beb3-390d-fdbd-4044-4d470dbcdc79-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-a2c44f02-1905-a989-762e-10714b2019b7-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a2c44f02-1905-a989-762e-10714b2019cb-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-a2c44f02-1905-a989-762e-10714b2019e2-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a2c44f02-1905-a989-762e-10714b201a04-2d8667cf, #w-node-a2c44f02-1905-a989-762e-10714b201a39-2d8667cf, #w-node-a2c44f02-1905-a989-762e-10714b201a6c-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-f224f071-6bc8-8aff-b421-8cffa34bb358-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f224f071-6bc8-8aff-b421-8cffa34bb36c-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-f224f071-6bc8-8aff-b421-8cffa34bb383-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f224f071-6bc8-8aff-b421-8cffa34bb3a5-2d8667cf, #w-node-f224f071-6bc8-8aff-b421-8cffa34bb3da-2d8667cf, #w-node-f224f071-6bc8-8aff-b421-8cffa34bb40d-2d8667cf {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_87d37ea9-2537-9d75-7b92-168d376291f7-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-_87d37ea9-2537-9d75-7b92-168d376291fe-2d8667cf {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ab281d7e-1763-c8c4-e3cd-6c7c58020fa2-2d8667cf {
  place-self: center end;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb1685-2d8667d1 {
  place-self: end;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb168b-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb168c-2d8667d1 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb1692-2d8667d1 {
  place-self: end;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb1698-2d8667d1 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb1699-2d8667d1, #w-node-_1072acda-385d-b830-98e5-00b65bbb169e-2d8667d1 {
  align-self: stretch;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb16a3-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
}

#w-node-_1072acda-385d-b830-98e5-00b65bbb16a4-2d8667d1, #w-node-_1072acda-385d-b830-98e5-00b65bbb16ab-2d8667d1, #w-node-_1072acda-385d-b830-98e5-00b65bbb16ac-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a8be43be-8b99-0adf-a398-362038d468dd-2d8667d1, #w-node-a8be43be-8b99-0adf-a398-362038d468ed-2d8667d1, #w-node-a8be43be-8b99-0adf-a398-362038d468fd-2d8667d1 {
  place-self: end center;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a611b-2d8667d1 {
  align-self: end;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a611f-2d8667d1 {
  justify-self: center;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6122-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6127-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6174-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6178-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a617c-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6180-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6184-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a619e-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61a2-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61a6-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61aa-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61ae-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61c8-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61cc-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61d0-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61d4-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61d8-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61f0-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61f4-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61f8-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a61fc-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6200-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6219-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a621d-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6221-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6225-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6229-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a623f-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6243-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6247-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a624b-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a624f-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a626b-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a626f-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6273-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6277-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a627b-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a628b-2d8667d1 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62a2-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62a6-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62aa-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62ae-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62b2-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62cc-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62d0-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62d4-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62d8-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62dc-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62f2-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62f6-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62fa-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a62fe-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6302-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a631e-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6322-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6326-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a632a-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a632e-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a633e-2d8667d1 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6355-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6359-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a635d-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6361-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6365-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a637f-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6383-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6387-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a638b-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a638f-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63a5-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63a9-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63ad-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63b1-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63b5-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63d1-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63d5-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63d9-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63dd-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63e1-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63f1-2d8667d1 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6408-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a640c-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6410-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6414-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6418-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a643d-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6441-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6445-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6449-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a644d-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_0c1fd82b-f280-995a-bd4c-265a6570d971-2d8667d1 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_750327b6-7f23-f99e-9fda-1fba838a91da-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_750327b6-7f23-f99e-9fda-1fba838a91e6-2d8667d1 {
  justify-self: end;
}

#w-node-_750327b6-7f23-f99e-9fda-1fba838a9202-2d8667d1 {
  grid-area: 1 / 2 / 2 / 2;
  justify-self: end;
}

#w-node-_9b3087e2-fa63-f3a9-ac0a-cd91dc96a882-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_971c5c2c-5afc-523d-69ea-6d38fd931ee6-2d8667d1, #w-node-_971c5c2c-5afc-523d-69ea-6d38fd931eea-2d8667d1, #w-node-_971c5c2c-5afc-523d-69ea-6d38fd931eee-2d8667d1, #w-node-_971c5c2c-5afc-523d-69ea-6d38fd931ef2-2d8667d1, #w-node-_971c5c2c-5afc-523d-69ea-6d38fd931ef6-2d8667d1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_228bd00e-a5ea-2e19-9101-6801f9774778-2d8667d3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-_6f529b8b-3224-b62b-04df-186cf52a66b8-2d8667d3, #w-node-_24976415-6fbe-2821-6891-ff8a3091f182-2d8667d3, #w-node-ce6b92f0-03a9-3e5e-120d-9d786144fa37-2d8667d3, #w-node-bde54f50-c45c-a22b-f229-3c835396e578-2d8667d3, #w-node-_5b5c3678-2b45-afc2-8f2b-1205239ec3b1-2d8667d3, #w-node-dc4113c2-3596-c2e1-7ad2-4233a4659cd1-2d8667d3, #w-node-_6a946ed3-981e-c777-8ce7-370112abd668-2d8667d3, #w-node-fbaf6280-50db-0d69-e51d-a9fffcf6d902-2d8667d3, #w-node-_9d432ef8-08b0-cc06-9ae0-8f8f746bb0a4-2d8667d3, #w-node-_2a4e20fa-e871-7195-bf23-9f16dbd41830-2d8667d3, #w-node-_6c2406e0-4e0c-45d9-95cd-56eef5b6ba99-2d8667d3, #w-node-ab73e8b2-6912-6012-3168-9294f1424267-2d8667d3 {
  place-self: center;
}

#w-node-f8b0d69b-aa90-134f-ce44-e6438ec62aeb-2d8667d3 {
  place-self: center end;
}

@media screen and (min-width: 1280px) {
  #w-node-ac51a3f4-f936-c280-feb7-8b7aefac1ca4-2d8667b6 {
    justify-self: end;
  }

  #w-node-ee68fb6a-8be8-4679-7d20-047986dbbf06-2d8667b6 {
    order: 9999;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_48a0ad15-3c84-3e2d-6b17-84f784109044-2d8667b4 {
    grid-column: span 1 / span 1;
  }

  #w-node-_2615851a-1118-8fb1-109d-a43213fb7713-2d8667b4 {
    justify-self: start;
  }

  #w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c37ff-2d8667b4 {
    justify-self: auto;
  }

  #w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c3817-2d8667b4 {
    order: -9999;
  }

  #w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c381b-2d8667b4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: auto;
  }

  #w-node-_55b3f219-1c3d-c3b2-dfe4-7c30ce0a9774-2d8667b4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: center;
  }

  #w-node-_58aadc41-3c75-fe63-33b1-520a44191572-44191556 {
    order: -9999;
  }

  #w-node-_58aadc41-3c75-fe63-33b1-520a4419157f-44191556 {
    justify-self: auto;
  }

  #w-node-_3cabf274-2ec1-7596-2330-bb20ab646245-ab646233 {
    justify-self: center;
  }

  #w-node-cea323b7-4147-fa5f-6e83-4c138093fdc5-2d8667b8 {
    order: -9999;
    justify-self: auto;
  }

  #w-node-c31685de-f74f-8edd-e89f-42aed566d9cf-2d8667b8 {
    justify-self: start;
  }

  #w-node-_5dbe08a1-a0fe-9396-9fcb-26f806864bee-2d8667bb {
    justify-self: auto;
  }

  #w-node-_2075b946-634d-ce42-2578-15a2926892ff-2d8667bd {
    justify-self: start;
  }

  #w-node-fc23944b-047c-43ca-2dc4-610d32e3f1fd-2d8667c3, #w-node-df9b4535-8a04-cd1a-727c-a7edeb11f6c9-2d8667c3 {
    justify-self: auto;
  }

  #w-node-ac12fb12-a873-2921-dd65-bd5fb8958d69-2d8667c4 {
    grid-column: span 1 / span 1;
  }

  #w-node-fc96cb41-dcd6-aa35-ab49-bf58f586572b-2d8667c6, #w-node-b7210d41-8fbf-12ef-294a-a13b9d080324-2d8667c7, #w-node-_7b0731d5-fb49-247e-02ae-629c82bf0575-2d8667cb, #w-node-_872fda8f-3433-dc7c-cfd4-ecb227df0f87-2d8667cb, #w-node-f8829039-6cd1-fbc8-48b4-98315dbb8be2-2d8667cc {
    justify-self: auto;
  }

  #w-node-_70de1d5a-f128-9dab-1718-03bf7bc71459-2d8667cf {
    justify-self: center;
  }

  #w-node-ccd3e686-da0a-7992-037f-cbce2773aa88-2d8667cf, #w-node-_5dbd2b33-cae9-3f3e-53bf-8ef7c57c628b-2d8667cf, #w-node-_0c33ea1e-01ce-a86c-f153-c672b0dba0fe-2d8667cf {
    grid-column: span 1 / span 1;
  }

  #w-node-_87d37ea9-2537-9d75-7b92-168d376291fe-2d8667cf, #w-node-ab281d7e-1763-c8c4-e3cd-6c7c58020fa2-2d8667cf {
    justify-self: auto;
  }

  #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a628b-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a633e-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a63f1-2d8667d1 {
    grid-column: span 1 / span 1;
  }

  #w-node-_750327b6-7f23-f99e-9fda-1fba838a91e6-2d8667d1 {
    justify-self: auto;
  }

  #w-node-_750327b6-7f23-f99e-9fda-1fba838a91fe-2d8667d1 {
    order: -9999;
  }

  #w-node-_750327b6-7f23-f99e-9fda-1fba838a9202-2d8667d1 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: auto;
  }

  #w-node-_228bd00e-a5ea-2e19-9101-6801f977477f-2d8667d3, #w-node-f8b0d69b-aa90-134f-ce44-e6438ec62aeb-2d8667d3 {
    justify-self: auto;
  }
}

@media screen and (max-width: 767px) {
  #w-node-f58f42c9-b0e0-9e94-23da-73be4bad081a-2d8667b4 {
    justify-self: auto;
  }

  #w-node-f58f42c9-b0e0-9e94-23da-73be4bad081f-2d8667b4 {
    grid-area: 1 / 1 / 4 / 3;
  }

  #w-node-f58f42c9-b0e0-9e94-23da-73be4bad0825-2d8667b4 {
    justify-self: auto;
  }

  #w-node-_6f9b3cfb-513b-5a8a-0f71-efc01107ee67-2d8667b4 {
    order: -9999;
  }

  #w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c3817-2d8667b4 {
    order: 9999;
  }

  #w-node-_58aadc41-3c75-fe63-33b1-520a441915b9-44191556 {
    justify-self: center;
  }

  #w-node-_58aadc41-3c75-fe63-33b1-520a441915d6-44191556 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_46e57783-4758-ccb9-4d1c-683132cb48b5-32cb4855 {
    grid-column: span 1 / span 1;
  }

  #w-node-cea323b7-4147-fa5f-6e83-4c138093fdc5-2d8667b8 {
    order: -9999;
  }

  #w-node-_08f85fc8-74cb-2fba-8918-670d879d494b-2d8667b8, #w-node-_92b21c35-2250-f4ff-3d0d-019b63e6d04f-2d8667bd {
    justify-self: auto;
  }

  #w-node-e3a90f75-d470-7097-bbbe-55a933809da3-2d8667c1, #w-node-_4d23d9c3-32aa-001b-0596-e5a65931aef9-2d8667c1, #w-node-_5d0cf41d-1172-6000-505c-5abc2306569e-2d8667c1, #w-node-ae36a11d-9aa6-9b99-1c4e-812c3ccf1b6f-2d8667c1, #w-node-_529f5180-557e-0011-a8c7-d413bd690ec5-2d8667c1, #w-node-_529f5180-557e-0011-a8c7-d413bd690ed0-2d8667c1, #w-node-_529f5180-557e-0011-a8c7-d413bd690edb-2d8667c1, #w-node-_529f5180-557e-0011-a8c7-d413bd690ee6-2d8667c1, #w-node-_3e7a3750-203b-4f65-b2ff-7193010c307e-2d8667c1, #w-node-_820331d6-c4e7-e22c-17e6-307c4ba0cf79-2d8667c1, #w-node-_2cc935a5-ba4b-b138-1cd0-3ca62c07d263-2d8667c1, #w-node-_2cc935a5-ba4b-b138-1cd0-3ca62c07d26e-2d8667c1, #w-node-_2cc935a5-ba4b-b138-1cd0-3ca62c07d279-2d8667c1, #w-node-cd97ed09-7ee7-f868-9f24-92008cbffbf9-2d8667c1, #w-node-_678fa4ae-1fca-b02f-fd27-9efe550463d6-2d8667c1, #w-node-_053b3848-5278-b0d0-565f-4e26607311a1-2d8667c1, #w-node-_8638ecc7-fc7a-8770-ed2b-943d852abcf3-2d8667c1, #w-node-d7e62f01-1c68-6af4-0f0b-aa76e3a3f0a9-2d8667c1, #w-node-d7e62f01-1c68-6af4-0f0b-aa76e3a3f0bd-2d8667c1, #w-node-fdedfdaf-07eb-26ce-ec5a-44f9429fbce6-2d8667c1, #w-node-e5098d5c-99e5-a310-1707-51b579e0852f-2d8667c1, #w-node-_1d39ea8e-bae3-1512-4ef0-cdf93fc0f8da-2d8667c1, #w-node-_0959ac05-e5ad-fd43-8e7e-a09dd2f57df9-2d8667c1, #w-node-d7e62f01-1c68-6af4-0f0b-aa76e3a3f0d1-2d8667c1, #w-node-f9a626ae-4f05-7075-0d66-3072978dbb53-2d8667c1, #w-node-_5e353be1-d012-39fc-eeb8-2763382b8e35-2d8667c1 {
    order: -9999;
  }

  #w-node-ae69c721-fe3e-8269-a705-e35ba058601a-2d8667c1 {
    grid-column: span 1 / span 1;
  }

  #w-node-b9f53ccd-0073-8a17-f43a-7f35673865c7-2d8667c3, #w-node-b9f53ccd-0073-8a17-f43a-7f35673865e1-2d8667c3, #w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d914-2d8667c3, #w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d92a-2d8667c3, #w-node-aa2a60ab-018a-2d80-c444-cec3a8a3d93e-2d8667c3 {
    justify-self: auto;
  }

  #w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa42-2d8667c4 {
    grid-area: 1 / 1 / 4 / 3;
  }

  #w-node-_0eae04fc-b5c4-0d0d-b2c4-6d73dd51aa48-2d8667c4 {
    justify-self: auto;
  }

  #w-node-_820eea29-8703-1666-b65a-396655101beb-2d8667c5, #w-node-_6616697a-2082-dd9d-7809-b5290a3b4296-2d8667c5, #w-node-_4999515a-94e6-89a3-902f-e791788fc2d4-2d8667c5 {
    grid-column: span 1 / span 1;
  }

  #w-node-c2f7fca8-1af3-f358-007f-80d42b7052ee-2d8667c6 {
    grid-column: span 3 / span 3;
  }

  #w-node-_123c1e61-dbea-b6c5-4f94-03d3d6a38c5a-2d8667ca {
    justify-self: auto;
  }

  #w-node-f83d9060-7bb5-8d84-fc9f-d8a95adbfdb6-2d8667ca {
    grid-column: span 3 / span 3;
  }

  #w-node-_56f39161-0a7d-edc4-c04f-1f1558025585-2d8667cb {
    order: 9999;
  }

  #w-node-_56f39161-0a7d-edc4-c04f-1f1558025517-2d8667cb, #w-node-ae9de8a7-fa31-f95d-c268-25a297244b35-2d8667cc {
    order: -9999;
  }

  #w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb5881-2d8667cc {
    justify-self: auto;
  }

  #w-node-b23c34a1-6a07-7d7b-cb77-ffd3d1cb5888-2d8667cc {
    grid-area: 1 / 1 / 4 / 3;
  }

  #w-node-_9ab73c41-4e42-3afb-6fe3-7f0b78e00d19-2d8667cf, #w-node-_9ab73c41-4e42-3afb-6fe3-7f0b78e00d20-2d8667cf {
    order: -9999;
  }

  #w-node-a2c44f02-1905-a989-762e-10714b201a64-2d8667cf, #w-node-a2c44f02-1905-a989-762e-10714b201a8d-2d8667cf {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_1072acda-385d-b830-98e5-00b65bbb1685-2d8667d1 {
    justify-self: auto;
  }

  #w-node-_1072acda-385d-b830-98e5-00b65bbb168c-2d8667d1 {
    grid-area: 1 / 1 / 4 / 3;
  }

  #w-node-_1072acda-385d-b830-98e5-00b65bbb1692-2d8667d1 {
    justify-self: auto;
  }

  #w-node-a8be43be-8b99-0adf-a398-362038d468dd-2d8667d1 {
    order: -9999;
    justify-self: auto;
  }

  #w-node-a8be43be-8b99-0adf-a398-362038d468ed-2d8667d1 {
    justify-self: auto;
  }

  #w-node-a8be43be-8b99-0adf-a398-362038d468fd-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a645d-2d8667d1, #w-node-_78dc2ac5-2585-0053-0909-ffc91f5a6464-2d8667d1 {
    order: -9999;
  }

  #w-node-_0c1fd82b-f280-995a-bd4c-265a6570d971-2d8667d1 {
    grid-column: span 1 / span 1;
  }

  #w-node-_750327b6-7f23-f99e-9fda-1fba838a91fe-2d8667d1 {
    order: 9999;
  }

  #w-node-_24765358-e470-9b58-dc9b-78ec467dacf4-2d8667d1, #w-node-d7cb7b06-70be-ea82-2ff2-f7ced430dc7b-2d8667d1 {
    order: -9999;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_2615851a-1118-8fb1-109d-a43213fb7713-2d8667b4 {
    justify-self: stretch;
  }

  #w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c37ff-2d8667b4, #w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c380d-2d8667b4, #w-node-_473a4b06-c6fb-aa45-aa9b-dd72db9c381b-2d8667b4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_58aadc41-3c75-fe63-33b1-520a44191580-44191556 {
    grid-column: span 1 / span 1;
  }

  #w-node-_58aadc41-3c75-fe63-33b1-520a441915b9-44191556 {
    justify-self: auto;
  }

  #w-node-_58aadc41-3c75-fe63-33b1-520a441915d6-44191556 {
    grid-column: span 1 / span 1;
  }

  #w-node-c31685de-f74f-8edd-e89f-42aed566d9cf-2d8667b8, #w-node-_2075b946-634d-ce42-2578-15a2926892ff-2d8667bd {
    justify-self: stretch;
  }

  #w-node-b9f53ccd-0073-8a17-f43a-7f35673865c7-2d8667c3, #w-node-b9f53ccd-0073-8a17-f43a-7f35673865d3-2d8667c3, #w-node-b9f53ccd-0073-8a17-f43a-7f35673865e1-2d8667c3 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-c2f7fca8-1af3-f358-007f-80d42b7052ee-2d8667c6 {
    grid-column: span 1 / span 1;
  }

  #w-node-_08fc6262-064c-8562-bb7e-ca9d0f88d638-2d8667c6, #w-node-a9d49e78-72ae-bc38-7b27-8176b4010f03-2d8667c6 {
    grid-column: span 2 / span 2;
  }

  #w-node-_2068a914-e220-7256-69e9-828cae419065-2d8667c6 {
    grid-area: 1 / 2 / 2 / 3;
    place-self: start end;
  }

  #w-node-f83d9060-7bb5-8d84-fc9f-d8a95adbfdb6-2d8667ca {
    grid-column: span 2 / span 2;
  }

  #w-node-f83d9060-7bb5-8d84-fc9f-d8a95adbfdc2-2d8667ca {
    grid-area: 2 / 2 / 4 / 3;
  }

  #w-node-_750327b6-7f23-f99e-9fda-1fba838a91e6-2d8667d1, #w-node-_750327b6-7f23-f99e-9fda-1fba838a91f4-2d8667d1, #w-node-_750327b6-7f23-f99e-9fda-1fba838a9202-2d8667d1 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}


@font-face {
  font-family: 'Social Icons Font';
  src: url('../fonts/social-icon-font.woff2') format('woff2'), url('../fonts/social-icon-font.eot') format('embedded-opentype'), url('../fonts/social-icon-font.woff') format('woff'), url('../fonts/social-icon-font.ttf') format('truetype'), url('../fonts/social-icon-font.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Line Square Icons';
  src: url('../fonts/line-square-icons.woff2') format('woff2'), url('../fonts/line-square-icons.eot') format('embedded-opentype'), url('../fonts/line-square-icons.woff') format('woff'), url('../fonts/line-square-icons.ttf') format('truetype'), url('../fonts/line-square-icons.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Filled Icons';
  src: url('../fonts/filled-icon-font.woff2') format('woff2'), url('../fonts/filled-icon-font.eot') format('embedded-opentype'), url('../fonts/filled-icon-font.woff') format('woff'), url('../fonts/filled-icon-font.ttf') format('truetype'), url('../fonts/filled-icon-font.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Line Rounded Icons';
  src: url('../fonts/line-rounded-icons.woff2') format('woff2'), url('../fonts/line-rounded-icons.eot') format('embedded-opentype'), url('../fonts/line-rounded-icons.woff') format('woff'), url('../fonts/line-rounded-icons.ttf') format('truetype'), url('../fonts/line-rounded-icons.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arrow BTN';
  src: url('../fonts/arrow.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/OnestBold1602-hint.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ==================================================================
   Novella Brand-Additions (Phase A6 — Highlight-Pattern)
   ================================================================== */
.highlight-card-strong {
  border: 1px solid var(--accent--primary-1);
  background: linear-gradient(225deg, rgba(157, 188, 118, 0.05), rgba(157, 188, 118, 0.10));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 24px;
  transition: background 200ms;
}
.highlight-card-strong:hover {
  background: linear-gradient(225deg, rgba(157, 188, 118, 0.10), rgba(157, 188, 118, 0.20));
}
.highlight-pill-soft {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: #F0F3E7;
  color: var(--accent--primary-1);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* Dark-BG-Variante: für Marketing-Dark Backgrounds (Topbar, dunkle Sections) */
.highlight-pill-on-dark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: rgba(157, 188, 118, 0.20);
  color: #FFFDF7;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.highlight-badge-recommended {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #F0F3E7;
  color: var(--accent--primary-1);
  border: 1px solid rgba(157, 188, 118, 0.20);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}
.highlight-badge-current {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--accent--primary-1);
  color: #FFFFFF;
  border: 1px solid var(--accent--primary-1);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

/* ==================================================================
   Novella Component-Library (Phase A6)
   Alle mit nv- Prefix damit kein Konflikt mit Webflow-Klassen.
   ================================================================== */

/* === BUTTONS (6px Radius, Onest 500, h-10 default) === */
.nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 200ms, color 200ms, border-color 200ms;
  font-family: Onest, sans-serif;
  white-space: nowrap;
}
.nv-btn:disabled, .nv-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.nv-btn-lg { height: 48px; padding: 0 20px; }

/* Mobile: ALLE nv-btns volle Breite + dürfen wrappen (User-Wunsch).
   Ausnahmen: nv-btn-icon (40x40 Square) + nv-btn-disabled bleiben kompakt. */
@media (max-width: 600px) {
  .nv-btn:not(.nv-btn-icon) {
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .nv-btn-lg {
    height: auto;
    min-height: 48px;
    padding: 12px 20px;
  }
  /* buttons-row.align-right auf Mobile: zentrieren statt rechts und Buttons full-width */
  .buttons-row.align-right {
    justify-content: stretch;
  }
  .buttons-row {
    width: 100%;
  }
}
.nv-btn-icon { width: 40px; padding: 0; }

.nv-btn-primary { background-color: var(--accent--primary-1); color: white; }
.nv-btn-primary:hover { background-color: var(--accent--primary-1-hover); }

.nv-btn-outline {
  background-color: transparent;
  color: var(--neutral--800);
  border-color: var(--neutral--400);
}
.nv-btn-outline:hover { background-color: #F0F3E7; }

.nv-btn-ghost { background-color: transparent; color: var(--neutral--800); }
.nv-btn-ghost:hover { background-color: #F0F3E7; }

.nv-btn-destructive { background-color: #EF4444; color: white; }
.nv-btn-destructive:hover { background-color: rgba(239,68,68,0.9); }

.nv-btn-link {
  color: var(--accent--primary-1);
  background-color: transparent;
  height: auto;
  padding: 0;
  border: 0;
  font-weight: 500;
  text-decoration: none;
}
.nv-btn-link:hover { color: var(--accent--primary-1-hover); }

/* === INPUTS (8px Radius, h-10) === */
.nv-input, .nv-textarea, .nv-select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--neutral--400);
  background-color: transparent;
  color: var(--neutral--800);
  font-size: 16px;
  font-family: Onest, sans-serif;
  transition: border-color 200ms;
}
.nv-textarea { height: auto; min-height: 80px; padding: 12px 16px; resize: vertical; }
.nv-input::placeholder, .nv-textarea::placeholder, .nv-select::placeholder {
  color: var(--neutral--500);
}
.nv-input:hover, .nv-textarea:hover, .nv-select:hover { border-color: var(--accent--primary-1); }
.nv-input:focus, .nv-textarea:focus, .nv-select:focus {
  border-color: var(--accent--primary-1);
  outline: none;
  box-shadow: none;
}
.nv-input.is-error, .nv-textarea.is-error, .nv-select.is-error { border-color: #EF4444; }
.nv-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23527766' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

.nv-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral--800);
  margin-bottom: 8px;
}

.nv-checkbox, .nv-radio {
  appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--neutral--400);
  background-color: transparent;
  cursor: pointer;
  transition: all 200ms;
  position: relative;
  vertical-align: middle;
}
.nv-checkbox { border-radius: 4px; }
.nv-radio { border-radius: 50%; }
.nv-checkbox:hover, .nv-radio:hover { border-color: var(--accent--primary-1); }
.nv-checkbox:checked { background-color: var(--accent--primary-1); border-color: var(--accent--primary-1); }
.nv-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 1px; left: 4px;
  width: 5px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.nv-radio:checked { border-color: var(--accent--primary-1); }
.nv-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: var(--accent--primary-1);
  transform: translate(-50%, -50%);
}

/* === QUOTE (2 Varianten) === */
.nv-quote-soft {
  border-radius: 12px;
  background-color: #F0F3E7;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--neutral--800);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  font-style: normal;
  position: relative;
}
@media (min-width: 768px) {
  .nv-quote-soft { padding: 48px; font-size: 24px; }
}
.nv-quote-dark {
  border-radius: 12px;
  background-color: var(--secondary--color-1);
  color: #FFFDF7;
  padding: 32px;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
}
@media (min-width: 768px) {
  .nv-quote-dark { padding: 48px; font-size: 24px; }
}

/* === TABS (Pill-Pattern, app-konform) === */
.nv-tabs-list {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 4px;
  background-color: var(--neutral--300);
  border-radius: 6px;
  gap: 4px;
}
.nv-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 4px;
  background-color: transparent;
  color: var(--neutral--500);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  transition: all 150ms;
  font-family: Onest, sans-serif;
}
.nv-tab.is-active {
  background-color: #FFFCF5;
  color: var(--neutral--800);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* === ACCORDION (border-bottom Pattern, app-konform) === */
.nv-accordion-item { border-bottom: 1px solid var(--neutral--400); }
.nv-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--neutral--800);
  transition: color 200ms;
  font-family: Onest, sans-serif;
}
.nv-accordion-trigger:hover { color: var(--accent--primary-1); }
.nv-accordion-icon { transition: transform 200ms; flex-shrink: 0; width: 16px; height: 16px; }
.nv-accordion-item.is-open .nv-accordion-icon { transform: rotate(-180deg); }    /* rotation rechts (wie Navbar-Dropdown) */
.nv-accordion-content { padding: 0 0 16px; font-size: 14px; color: var(--neutral--600); line-height: 1.6; }

/* === HIGHLIGHT-PATTERN OVERRIDES (smooth + cursor:pointer) === */
.highlight-card-strong {
  cursor: pointer;
  transition: background 250ms ease-out, transform 200ms ease-out;
}

/* === LINKS (Inline-Text, kein Underline, kein Arrow) === */
.nv-link {
  color: var(--accent--primary-1);
  text-decoration: none;
  transition: color 200ms;
}
.nv-link:hover { color: var(--accent--primary-1-hover); }

/* ==================================================================
   Phase A6 Fixes — User-Feedback Round 2
   ================================================================== */

/* Select: padding fix (kein top-abstand-issue) */
.nv-select {
  padding: 0 40px 0 16px;
  line-height: 40px;
}

/* Checkbox: SVG Tick statt CSS-Pseudo (cleaner) */
.nv-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8 6.5 11 12.5 5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.nv-checkbox:checked::after { content: none; }

/* Radio: smooth scale-transition beim check/uncheck */
.nv-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent--primary-1);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.nv-radio:checked::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Accordion: smooth height-transition + chevron pure rotation */
.nv-accordion-content {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition: max-height 300ms ease-out, padding 200ms ease-out;
}
.nv-accordion-item.is-open .nv-accordion-content {
  max-height: 400px;
  padding: 0 0 16px;
}
.nv-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 200ms ease-out;
  transform-origin: 50% 50%;
}
.nv-accordion-icon img {
  width: 16px;
  height: 16px;
  display: block;
}

/* Highlight-Pattern: smooth cross-fade via pseudo-elements
   (CSS animiert background-image NICHT, daher zwei stacked layers) */
.highlight-card-strong {
  background: white;
  position: relative;
  overflow: hidden;
}
.highlight-card-strong::before,
.highlight-card-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.highlight-card-strong::before {
  background: linear-gradient(225deg, rgba(157,188,118,0.05), rgba(157,188,118,0.10));
  opacity: 1;
}
.highlight-card-strong::after {
  background: linear-gradient(225deg, rgba(157,188,118,0.10), rgba(157,188,118,0.20));
  opacity: 0;
}
.highlight-card-strong:hover::before { opacity: 0; }
.highlight-card-strong:hover::after { opacity: 1; }
.highlight-card-strong > * { position: relative; z-index: 1; }

/* Plan-Card Badges: Soft-Pill-Stil mit SOLIDEM Hintergrund (lesbar gegen Highlight-Card-Background) */
.highlight-badge-recommended,
.highlight-badge-current {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  border: 0;
}
.highlight-badge-recommended {
  top: -10px;
  left: 16px;
  background: #F0F3E7;
  color: var(--accent--primary-1);
}
.highlight-badge-current {
  top: -10px;
  right: 16px;
  background: var(--accent--primary-1);
  color: #FFFFFF;
}

/* ==================================================================
   Tabs Sliding-Underline (App PatientDetailPage Pattern)
   ================================================================== */
.nv-tabs-underline-wrapper {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.nv-tabs-underline-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid var(--neutral--400);
  border-radius: 0;
  height: auto;
  padding: 0;
  gap: 0;
}
.nv-tabs-underline-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--neutral--600);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: color 200ms;
  font-family: Onest, sans-serif;
  white-space: nowrap;
}
.nv-tabs-underline-trigger:hover {
  color: var(--neutral--800);
}
.nv-tabs-underline-trigger.is-active {
  color: var(--neutral--800);
}
.nv-tabs-underline-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent--primary-1);
  transition: left 300ms ease-out, width 300ms ease-out;
  pointer-events: none;
}

/* ==================================================================
   Phase A6 Round-3 Fixes
   ================================================================== */

/* === Sliding-Pill Tabs (DashboardPage Pattern, soft-green Track) === */
.nv-tabs-pill-track {
  display: inline-flex;
  align-items: center;
  background-color: #F0F3E7;        /* novella-softGreen */
  border-radius: 8px;               /* rounded-lg */
  padding: 4px;                     /* p-1 */
  position: relative;
}
.nv-tabs-pill-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background-color: #FFFCF5;        /* bg-card cream-white */
  border-radius: 6px;               /* rounded-md */
  box-shadow: none;
  transition: left 300ms ease-out, width 300ms ease-out;
  z-index: 0;
  pointer-events: none;
}
.nv-tabs-pill-trigger {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;                /* py-1.5 px-4 */
  background-color: transparent;
  border: 0;
  border-radius: 6px;
  color: rgba(17, 45, 29, 0.7);     /* text-foreground/70 */
  font-size: 14px;                  /* text-sm */
  font-weight: 500;                 /* font-medium */
  cursor: pointer;
  transition: color 200ms;
  font-family: Onest, sans-serif;
  white-space: nowrap;
}
.nv-tabs-pill-trigger:hover { color: #112D1D; }
.nv-tabs-pill-trigger.is-active { color: #112D1D; }

/* Mobile: Pill-Tabs volle Breite anteilsmäßig (für Preis-Period-Selector + News-Tabs) */
@media (max-width: 600px) {
  .nv-tabs-pill-wrapper {
    width: 100%;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
  .nv-tabs-pill-track {
    display: flex;
    width: 100%;
  }
  .nv-tabs-pill-trigger {
    flex: 1 1 0;
    padding: 8px 4px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    min-width: 0;
  }
}

/* === Highlight-Pattern FINAL FIX (overflow visible + clean cross-fade) === */
.highlight-card-strong,
.highlight-card-strong:hover {
  background: white !important;     /* unset gradient on element, pseudo-elements übernehmen */
}
.highlight-card-strong {
  position: relative;
  border: 1px solid var(--accent--primary-1);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  overflow: visible !important;      /* Badges dürfen rausragen */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.highlight-card-strong::before,
.highlight-card-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 12px;
  transition: opacity 300ms ease-out;
}
.highlight-card-strong::before {
  background: linear-gradient(225deg, rgba(157,188,118,0.05), rgba(157,188,118,0.10));
  opacity: 1;
}
.highlight-card-strong::after {
  background: linear-gradient(225deg, rgba(157,188,118,0.10), rgba(157,188,118,0.20));
  opacity: 0;
}
.highlight-card-strong:hover::before { opacity: 0; }
.highlight-card-strong:hover::after { opacity: 1; }
.highlight-card-strong > * { position: relative; z-index: 1; }

/* === Accordion FIX: JS-measured Height (kein max-height-stocken) === */
.nv-accordion-content {
  display: block !important;
  overflow: hidden;
  height: 0;
  padding: 0;
  transition: height 300ms ease-out, padding 200ms ease-out;
}
.nv-accordion-item.is-open .nv-accordion-content {
  /* height wird per JS gesetzt auf scrollHeight */
  padding: 0 0 16px;
}

/* Plan-Card Badges: Specificity-Fix gegen .highlight-card-strong > * Regel */
.highlight-card-strong > .highlight-badge-recommended,
.highlight-card-strong > .highlight-badge-current,
.highlight-badge-recommended,
.highlight-badge-current {
  position: absolute !important;
}
.highlight-card-strong > .highlight-badge-recommended {
  top: -12px !important;
  left: 16px !important;
}
.highlight-card-strong > .highlight-badge-current {
  top: -12px !important;
  left: auto !important;
  right: 16px !important;
}

/* ==================================================================
   Nav Show/Hide on Scroll (Custom Animation)
   ================================================================== */
.top-bar-wrapper,
.header-wrapper {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 280ms ease-out,
              border-color 280ms ease-out,
              border-bottom-left-radius 300ms ease-out,
              border-bottom-right-radius 300ms ease-out;
  /* KEIN will-change: transform — das erzeugt einen containing block für
     position:fixed Descendants und bricht das slide-in Menu (das wird dann
     nur header-hoch statt viewport-hoch). */
}
/* !important nötig — sonst gewinnt [data-reveal].is-revealed { transform: translate3d(0,0,0) }
   aus reveals.css (gleiche Spezifität, später geladen). Header + Topbar haben beide
   data-reveal für die Entrance-Animation. */
.top-bar-wrapper.nav-hidden {
  transform: translateY(-100%) !important;
}
.header-wrapper.nav-hidden {
  transform: translateY(-100%) !important;
}

/* === Header-Scroll-State (User-Feedback: at top → page-bg + no border, scrolled → white + bottom border) === */
/* Rundung links/rechts unten bleibt erhalten (var(--radius--standart) aus Webflow) */
.header-wrapper {
  background-color: var(--neutral--200) !important;    /* matcht body-bg #FCF9F4 — komplett unsichtbarer Übergang */
  border-bottom: 1px solid transparent !important;
}
.header-wrapper.nav-scrolled {
  background-color: #FFFFFF !important;
  border-bottom-color: var(--neutral--300) !important;
}

/* ==================================================================
   Topbar Refit (Phase B1)
   - Hintergrund: Marketing Dark Deeper (#0A1F14) — Style-Guide Token
   - Links: Marketing Foreground (#FFFDF7 cream-weiß), kein Underline
   - "Neu"-Badge: nutzt .highlight-pill-soft 1:1 aus Style-Guide
   ================================================================== */
.top-bar-padding {
  background-color: #0A1F14 !important;
}
.notification-bar-link {
  color: #FFFDF7 !important;
}
/* Hover: nur den Title fadet, das "Neu"-Badge bleibt voll farbig.
   Vorher: opacity auf ganzem <a> → Badge wurde mit-gefadet. */
.notification-bar-link .text-100 {
  transition: opacity 200ms;
}
.notification-bar-link:hover .text-100 {
  opacity: 0.7;
}
.notification-bar-small-link {
  color: #FFFDF7 !important;
  text-decoration: none !important;
  -webkit-text-decoration-color: transparent !important;
  text-decoration-color: transparent !important;
  transition: opacity 200ms;
}
.notification-bar-small-link:hover {
  color: #FFFDF7 !important;
  opacity: 0.7;
}
.divider.notification-bar-divider {
  background-color: rgba(255, 253, 247, 0.2) !important;
}

/* ==================================================================
   Header / Nav Refit (Phase B1)
   - Nav-Link Hover: foreground → primary-hover (#b5cd92), 200ms
   - Dropdown-Items Hover-BG: grau → soft-green tint (Novella-Pattern)
   - Featured-Dropdown ("Jetzt kostenlos starten"): highlight-card-strong Design
   - Kontakt-Link Hover: → primary-hover, 200ms
   - CTA-Button: nv-btn-primary mit Header-Margin
   ================================================================== */
.header-nav-link {
  transition: color 200ms !important;
}
.header-nav-link:hover {
  color: var(--accent--primary-1-hover) !important;
}

.dropdown-button {
  transition: background-color 200ms, color 200ms !important;
}
.dropdown-button:hover {
  background-color: rgba(157, 188, 118, 0.10) !important;
  color: var(--neutral--800) !important;
}

/* Featured-Dropdown-Tile spannt über beide Spalten des 2-col-Grids
   (ersetzt die Webflow w-node-_…-grid-column-Regel die mit dem ID-Cleanup verloren ging) */
.dropdown-card.grid-2-columns > .dropdown-nav-pages-wrapper:has(.dropdown-button.featured) {
  grid-column: 1 / -1;
}

/* Featured-Dropdown: Pseudo-Element Cross-Fade (Gradients können nicht direkt transitionieren) */
.dropdown-button.featured {
  position: relative !important;
  background: white !important;
  border: 1px solid var(--accent--primary-1) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.dropdown-button.featured::before,
.dropdown-button.featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 8px;
  transition: opacity 250ms ease-out;
}
.dropdown-button.featured::before {
  background: linear-gradient(135deg, rgba(157,188,118,0.05), rgba(157,188,118,0.10));
  opacity: 1;
}
.dropdown-button.featured::after {
  background: linear-gradient(225deg, rgba(157,188,118,0.10), rgba(157,188,118,0.20));
  opacity: 0;
}
.dropdown-button.featured:hover::before { opacity: 0; }
.dropdown-button.featured:hover::after { opacity: 1; }
.dropdown-button.featured > * { position: relative; z-index: 1; }
.dropdown-button.featured:hover {
  background: white !important;  /* unset implicit hover-bg */
}

/* Novella-Btn-Primary Hover-Color-Fix (gegen globalen a:hover override) */
.nv-btn-primary,
.nv-btn-primary:hover {
  color: white !important;
}

.link-wrapper.color-primary {
  transition: color 200ms;
}
.link-wrapper.color-primary:hover {
  color: var(--accent--primary-1-hover) !important;
}

.nv-btn.header-btn-hidden-on-mbl {
  margin-left: 24px;
}
/* Mobile + Tablet: rechts vom Hamburger keinen CTA-Button mehr — User-Wunsch */
@media (max-width: 991px) {
  .header-right-side .nv-btn,
  .header-right-side .link-wrapper {
    display: none !important;
  }
}

/* ==================================================================
   DROPDOWN ("Weiteres")
   Desktop: absolute Card mit Fade/Slide
   Mobile/Tablet: statisches Akkordeon
   State: .dropdown-wrapper.is-open (gesetzt von assets/js/nav.js)
   ================================================================== */
.header-nav-list-item .dropdown-list {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translate(-56%, -8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
  pointer-events: none;
}
.header-nav-list-item .dropdown-wrapper.w--open .dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translate(-56%, 0);
  pointer-events: auto;
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 0s;
}
/* Desktop-Only: Hover/Focus öffnet Dropdown automatisch */
@media (min-width: 992px) {
  .header-nav-list-item .dropdown-wrapper:hover .dropdown-list,
  .header-nav-list-item .dropdown-wrapper:focus-within .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translate(-56%, 0);
    pointer-events: auto;
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 0s;
  }
}

/* Mobile/Tablet: Akkordeon — Visibility über eigene .is-user-open Klasse
   (gesetzt von nav.js). Webflow's .w--nav-dropdown-open wird IGNORIERT, weil
   Webflow es im mobile-context AUTOMATISCH beim Hamburger-Open setzt, was wir
   nicht wollen. Unsere is-user-open Klasse wird NUR durch User-Click gesetzt.

   max-height liegt auf der .dropdown-card (das innere Element mit weißem BG),
   nicht auf der .dropdown-list (sonst clipt sie die negativen Margins der Card). */
@media (max-width: 991px) {
  /* Smooth Akkordeon via grid-template-rows minmax(0, 0fr) → minmax(0, 1fr)
     (minmax(0,...) erzwingt min:0, sonst rendert Browser die Card-Padding). */
  .header-nav-list-item .dropdown-list {
    position: static !important;
    transform: none !important;
    background: transparent;
    padding: 0;
    pointer-events: auto;
    visibility: visible !important;
    opacity: 1 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .header-nav-list-item .dropdown-list > .dropdown-card {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  /* Geöffnet */
  .header-nav-list-item .dropdown-wrapper.is-user-open .dropdown-list {
    grid-template-rows: minmax(0, 1fr);
  }
  .header-nav-list-item .dropdown-wrapper.is-user-open .dropdown-list > .dropdown-card {
    opacity: 1;
  }
  /* Cursor-Pointer für Toggle */
  .dropdown-toggle {
    cursor: pointer;
  }
}

/* Mobile (<600): Dropdown-Card 1-Spalte */
@media (max-width: 599px) {
  .dropdown-card.grid-2-columns {
    grid-template-columns: 1fr;
  }
}

/* Dropdown-Arrow neben "Weiteres" — Inline SVG mit currentColor.
   Trigger ist .dropdown-wrapper (NICHT .dropdown-toggle) damit der Arrow
   grün BLEIBT solange der Cursor irgendwo im Wrapper hängt (auch beim
   Hover auf einem Dropdown-Link wie "News"). */
.dropdown-arrow-icon {
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
  color: var(--neutral--800);
  transition: transform 200ms ease, color 200ms ease;
}

/* Active-State (open via click OR mobile is-user-open): grün + rotated */
.dropdown-wrapper.w--open .dropdown-arrow-icon,
.dropdown-wrapper.is-user-open .dropdown-arrow-icon {
  color: var(--accent--primary-1);
  transform: rotate(-180deg);
}

/* Desktop-Hover: grün + rotated — gleicher Wrapper-Trigger wie Text + Dropdown-List */
@media (min-width: 992px) {
  .dropdown-wrapper:hover .dropdown-arrow-icon,
  .dropdown-wrapper:focus-within .dropdown-arrow-icon {
    color: var(--accent--primary-1);
    transform: rotate(-180deg);
  }
}

/* ==================================================================
   Section-Eyebrow (ersetzt Webflow accent-line)
   Linie + Uppercase-Label, primary color
   ================================================================== */
.nv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent--primary-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  line-height: 1;
}
.nv-eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--accent--primary-1);
  border-radius: 9999px;
  flex-shrink: 0;
}

/* ==================================================================
   CTA-Card "Jetzt Konto erstellen" Arrow-Circle Refit
   Bento-Style: 48px translucent-white circle, bottom-right, weißer Ring auf Hover
   ================================================================== */
.card-mobile-app.pd-24px---bg-accent-1 .arrow-circle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border: none;
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  inset: auto 24px 24px auto;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition: box-shadow 250ms ease-out, background-color 200ms;
}
.card-mobile-app.pd-24px---bg-accent-1:hover .arrow-circle {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.20);
}
.card-mobile-app.pd-24px---bg-accent-1 .arrow-circle .nv-arrow-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* ==================================================================
   Funktionen-Grid (Phase B1) — 1:1 aus Greenfield-Homepage-Design
   2fr/1fr Grid auf Desktop, 3rd Card spannt voll (wide)
   ================================================================== */
.funktionen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
@media (min-width: 992px) {
  .funktionen-grid {
    grid-template-columns: 2fr 1fr;
  }
  .funktionen-grid > .funktion-card-wide {
    grid-column: span 2;
  }
}

.funktion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  min-height: 480px;
  /* shadow-card aus Style-Guide */
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}
/* Bild-Scale auf Card-Hover (statt Card-Translate) */
.funktion-card .funktion-hero-image,
.funktion-card .funktion-corner-image,
.funktion-card .funktion-card-surface-image {
  transition: transform 350ms ease-out;
}
.funktion-card:hover .funktion-hero-image,
.funktion-card:hover .funktion-corner-image,
.funktion-card:hover .funktion-card-surface-image {
  transform: scale(1.05);
}

/* Variante 1: Hero — dark BG, image-right pushed to bottom */
.funktion-card.is-hero {
  background-color: #112D1D;
  color: #FFFDF7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 40px 40px 0 0;
  min-height: 512px;
}
.funktion-card.is-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%);
}
.funktion-card.is-hero .funktion-hero-image {
  width: 60%;
  margin-top: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 0;
}

/* Variante 2: Warm — cream BG (Style-Guide Cream/Card), image-right pushed to bottom */
.funktion-card.is-warm {
  background-color: #FFFDF7;
  color: #112D1D;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 40px 40px 0 0;
  min-height: 512px;
}
.funktion-card.is-warm .funktion-corner-image {
  width: 70%;
  margin-top: auto;
  margin-bottom: 112px;
  display: block;
  object-fit: contain;
}

/* Text-Overlay bottom-left auf is-hero + is-warm */
.funktion-card.is-hero .funktion-card-text-top,
.funktion-card.is-warm .funktion-card-text-top {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  z-index: 2;
  pointer-events: none;
}
.funktion-card.is-hero .funktion-card-text-top { max-width: 352px; }
.funktion-card.is-warm .funktion-card-text-top { max-width: 288px; }
.funktion-card.is-hero .funktion-card-text-top h3,
.funktion-card.is-warm .funktion-card-text-top h3 {
  margin: 0 0 12px;
}
.funktion-card.is-warm .funktion-card-text-top h3 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.funktion-card .funktion-card-text-top > * { pointer-events: auto; }
.funktion-card .funktion-card-text-top p { margin-bottom: 0; }

/* Variante 3: Surface — wide, 2-spaltig, Text+Image side-by-side */
.funktion-card.is-surface {
  background-color: #FFFFFF;
  color: #112D1D;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 60px 32px;
  align-items: center;
  min-height: 384px;
}
@media (min-width: 992px) {
  .funktion-card.is-surface {
    grid-template-columns: 1fr 1fr;
    padding: 60px 99px 60px 40px;
  }
}
.funktion-card.is-surface .funktion-card-surface-text { max-width: 454px; }
.funktion-card.is-surface .funktion-card-surface-text h3 { margin: 0 0 12px; }
.funktion-card.is-surface .funktion-card-surface-text p { margin-bottom: 0; color: var(--neutral--600); }
.funktion-card.is-surface .funktion-card-surface-image { width: 100%; display: block; }

/* Eyebrow centered support */
.nv-eyebrow.center {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

/* ==================================================================
   Testimonial-Section Wrapper Override → transparent
   Cards machen das visual-Heavy-Lifting, dark .testimonials-bg rechts bleibt
   ================================================================== */
.mg-section.bg-secondary-2 {
  background-color: transparent !important;
}

/* Testimonial-Card H2: lange deutsche Wörter dürfen brechen statt überlaufen */
.card.testimonials-main h2 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ==================================================================
   Video-Embed Container (Funktion-Detail Hero)
   ================================================================== */
.video-embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--neutral--200);
}
.video-embed-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.video-embed-thumb .video-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-embed-thumb .bg-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.video-embed-thumb .lightbox-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, box-shadow 200ms, transform 200ms;
}
.video-embed-thumb .lightbox-video-icon:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.30);
  transform: translate(-50%, -50%) scale(1.05);
}
.video-embed-thumb .lightbox-video-icon img {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}
.video-embed-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==================================================================
   Feature-Mini-Grid (Funktion-Detail "Funktionen im Überblick")
   3 oben, 2 unten zentriert. Title + Desc oben, Mockup-Image unten.
   ================================================================== */
.feature-mini-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
}
.feature-mini-card {
  flex: 0 1 calc((100% - 52px) / 3);
  background: #FFFFFF;
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}
/* min-height nur wenn Card ein Image hat (sonst keine künstliche Höhe) */
.feature-mini-card:has(.feature-mini-card-image-wrap) {
  min-height: 360px;
}
/* Reihe 2 (Card 4 + 5) → je 50% Breite (größer als die 3 oben) */
.feature-mini-card:nth-child(4),
.feature-mini-card:nth-child(5) {
  flex: 0 1 calc((100% - 26px) / 2);
}
.feature-mini-card:nth-child(4):has(.feature-mini-card-image-wrap),
.feature-mini-card:nth-child(5):has(.feature-mini-card-image-wrap) {
  min-height: 420px;
}
.feature-mini-card-text h3 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.286em;
  letter-spacing: -0.025em;
  color: var(--neutral--800);
}
.feature-mini-card-text p {
  margin: 0;
  color: var(--neutral--700);
  font-size: 16px;
  line-height: 1.555em;
}
.feature-mini-card-image-wrap {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex: 1;
  min-height: 0;
}
.feature-mini-card-image {
  max-width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 991px) {
  /* Tablet + Mobile: alle Cards 1-spaltig (User-Wunsch) */
  .feature-mini-card,
  .feature-mini-card:nth-child(4),
  .feature-mini-card:nth-child(5) {
    flex: 1 1 100%;
  }
}

/* ==================================================================
   Testimonial-V1 (Funktion-Detail) — White-Card-BG + Quote-Icon primary
   ================================================================== */
.card.testmonial-v1 {
  background-color: #FFFFFF !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  border: 0 !important;
}
/* Quote-Icon (Webflow SVG) → primary green via filter */
.card.testmonial-v1 img[src*="quotation-marks"] {
  filter: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(854%) hue-rotate(45deg) brightness(96%) contrast(85%);
  width: 56px;
  height: auto;
}
/* Linker Text-Block in Testimonial-Card: links-aligned (war Webflow-default
   place-self: center end → Content rückt nach rechts, daraus zu viel Cream
   links). Override via inner-container._527px innerhalb des Cards. */
.card.testmonial-v1 > .inner-container._527px,
.card.testmonial-v1 > [class*="inner-container"]:first-child {
  justify-self: start !important;
}

/* ==================================================================
   News-Cards (Phase B1)
   ================================================================== */
/* Grid: 3 Spalten ab Desktop (≥992), darunter 1 Spalte (Tablet + Mobile gleich)
   transition für smooth fade beim Tab-Wechsel + Pagination */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  transition: opacity 180ms ease-out;
  opacity: 1;
}
@media (min-width: 992px) {
  .news-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* News-Card-Title: kleiner als display-4, Style-Guide Heading-2 (24/32/700/-0.025em) */
.blog-card-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.333em !important;
  letter-spacing: -0.025em !important;
}

/* Badge mittig auf der Border zwischen Image und Content */
.blog-card-content-inside .badge-top-inside {
  top: 0 !important;
  transform: translateY(-50%);
}

/* "Alle News"-Button: align bottom-right in seinem Grid-Cell */
.grid-2-columns.title-and-btn > div:last-child {
  align-self: end;
  justify-self: end;
}

/* ==================================================================
   Footer Brand-Refit (Phase B1)
   - Bottom-Bar BG: #0b3a3d (Webflow-Teal) → #0A1F14 (Marketing-Dark-Deeper)
   - Menu-Titles: weight 400 → 600 (Style-Guide H3)
   - Mission-Paragraph: line-height 1.714 → 1.428 (Style-Guide Body-Small)
   ================================================================== */
.footer-bottom-wrapper {
  background-color: #0A1F14 !important;
}

/* Mobile: Footer-Content nicht zu nah am Rand */
@media (max-width: 479px) {
  .mg-section.footer-v2 .container-default,
  .footer-bottom-wrapper .container-default {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .footer-bottom-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  /* News-Detail "Mehr News"-Section: mehr Innen-Abstand */
  .section.pd-120px:has(.news-related-grid) .container-default {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Karriere "Offene Positionen": Headlines linksbündig auf Mobile */
  .positions-heading-wrap .text-center,
  .positions-heading-wrap .nv-eyebrow.center {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}
.menu-title {
  font-weight: 600 !important;
}
footer .paragraph-small {
  line-height: 1.428em !important;
}
/* Footer-Social-Grid: kleinerer Gap zwischen Icons (overriding gap-columns-24px) */
.grid-social-media:has(.footer-social-icon),
.grid-social-media.gap-columns-24px:has(.footer-social-icon) {
  grid-column-gap: 12px;
}

/* Selber Stil wie .kontakt-social-icon (Sage-Circle, Border, Hover-Fill).
   Im dunklen Footer angepasst: Border/BG mit höherem Alpha damit's auf dem
   marketing-dark Hintergrund sichtbar bleibt. */
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(157, 188, 118, 0.12);
  border: 1px solid rgba(157, 188, 118, 0.25);
  color: var(--accent--primary-1);
  text-decoration: none;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.footer-social-icon:hover {
  background: var(--accent--primary-1);
  border-color: var(--accent--primary-1);
  color: #FFFFFF;
}
.footer-social-icon svg {
  width: 18px;
  height: 18px;
}

/* News-Card-Image Hover: subtle scale */
.blog-card-wrapper {
  transition: box-shadow 250ms ease-out;
}
.blog-card-wrapper .blog-card-image,
.card.blog-post-featured .blog-card-image {
  transition: transform 350ms ease-out;
}
.blog-card-wrapper:hover .blog-card-image,
.card.blog-post-featured:hover .blog-card-image {
  transform: scale(1.05);
}

/* "Mehr dazu" Text-Link mit Lucide-Arrow
   Animation triggered von Card-Hover (ganze Card clickable) */
.news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent--primary-1);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: color 200ms;
}
.news-card-arrow {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 200ms ease-out;
  /* SVG → primary sage via filter */
  filter: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(854%) hue-rotate(45deg) brightness(96%) contrast(85%);
}
/* Hover-Animation triggered via Card-Hover (nicht Link-Hover) */
.blog-card-wrapper:hover .news-card-link {
  color: var(--accent--primary-1-hover);
}
.blog-card-wrapper:hover .news-card-arrow {
  transform: translateX(4px);
}

/* ==================================================================
   B3 PREISE — Phase 1: Plan-Cards + Side-Cards + Feedback-Card
   ================================================================== */

/* Sliding-Pill Discount-Badge — floating outside the trigger (Novella spec: -top-2 -right-1) */
.nv-tabs-pill-trigger {
  position: relative;
  overflow: visible;
}
.price-discount-badge {
  position: absolute;
  top: -8px;
  right: -4px;
  padding: 2px 6px;
  background: var(--accent--primary-1);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  pointer-events: none;
  z-index: 11;
}
.nv-tabs-pill-track { overflow: visible; }
/* Indicator gets soft drop-shadow per Novella spec */
.nv-tabs-pill-indicator { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

/* Plan-Cards Grid: 3 oben (Gratis, Starter, Standard) — Subgrid für gleiche Block-Höhen */
.plans-grid-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  .plans-grid-top {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

/* === Novella-Style Plan-Card === */
.nv-plan-card {
  background-color: #FFFFFF;          /* white per User-Feedback */
  border: 1px solid #CFD0CC;          /* novella-border per User-Feedback */
  border-radius: 12px;
  padding: 28px 24px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  position: relative;
  gap: 24px;
}
@media (max-width: 991px) {
  .nv-plan-card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
}

/* Standard-Plan Highlight: Novella-Pattern wie .v5-pricing-mini-highlight (Sage-Gradient + primary border, KEIN Hover) */
.nv-plan-card.nv-plan-card-highlight {
  border: 1.5px solid var(--accent--primary-1);
  background: linear-gradient(225deg, rgba(157, 188, 118, 0.05), rgba(157, 188, 118, 0.10));
  box-shadow: 0 8px 24px rgba(157, 188, 118, 0.18);
}

/* Floating "Beliebteste" Badge (top-right) */
.nv-plan-card-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--accent--primary-1);
  color: #FFFFFF;
  border: 1px solid var(--accent--primary-1);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  z-index: 2;
  white-space: nowrap;
}

/* Disabled-State (z.B. Premium "Bald Verfügbar") — gleicher weißer BG wie andere Cards, nur dezent ausgegraut */
.nv-plan-card.is-disabled {
  background-color: #FFFFFF;                  /* gleiches Weiß wie andere Cards */
  border-color: var(--neutral--300);
}
.nv-plan-card.is-disabled .nv-plan-card-name,
.nv-plan-card.is-disabled .nv-plan-card-subtitle,
.nv-plan-card.is-disabled .nv-plan-card-price,
.nv-plan-card.is-disabled .nv-plan-card-price-text,
.nv-plan-card.is-disabled .nv-plan-card-tax,
.nv-plan-card.is-disabled .nv-plan-card-features,
.nv-plan-card.is-disabled .premium-wide-description {
  opacity: 0.92;                              /* nur sehr leicht ausgegraut */
}

/* Row 1: Title + Subtitle */
.nv-plan-card-header {
  margin: 0;
}
.nv-plan-card-name {
  font-size: 20px;
  font-weight: 600;
  color: #112D1D;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}
.nv-plan-card-subtitle {
  font-size: 14px;
  color: var(--neutral--600);
  margin: 0;
  line-height: 1.5;
}

/* Row 2: Preis + Tax */
.nv-plan-card-price-block {
  margin: 0;
}
.nv-plan-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.nv-plan-card-price {
  font-size: 32px;
  font-weight: 700;
  color: #112D1D;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: opacity 180ms ease-out;
}
.nv-plan-card-price-text {
  font-size: 14px;
  color: var(--neutral--600);
  transition: opacity 180ms ease-out;
}
.nv-plan-card-tax {
  font-size: 12px;
  color: var(--neutral--600);
  margin-top: 4px;
}

/* Row 3: Buttons */
.nv-plan-card-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.nv-plan-card-buttons .nv-btn { width: 100%; }

/* Row 4: Features */
.nv-plan-card-features-block {
  margin: 0;
}
.nv-plan-card-features-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral--600);
  margin: 0 0 12px 0;
}
.nv-plan-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nv-plan-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #112D1D;
  line-height: 1.5;
}
.nv-plan-card-features li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent--primary-1);
}

/* Premium-Wide-Card: gleicher Stil wie Top-Cards (Title + Price-Block + Description) */
.nv-plan-card.premium-wide-card {
  display: block;             /* override subgrid */
  grid-column: 1 / -1;        /* span all columns */
  grid-row: auto;
  width: 100%;
  padding: 28px 24px;
}
.premium-wide-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 991px) {
  /* Tablet + Mobile: Premium-Card stack-Layout wie obere Cards */
  .premium-wide-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .premium-wide-cta {
    width: 100%;
  }
  .premium-wide-cta > * {
    width: 100%;
  }
}

/* Premium-Text-Block: Title + Preis-Block (gleiche Klassen wie oben) + Description */
.premium-wide-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.premium-wide-text .nv-plan-card-name {
  margin-bottom: 0;
}
.premium-wide-text .nv-plan-card-price-block {
  margin: 0;
}
.premium-wide-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--neutral--600);
  max-width: 720px;
}

.premium-wide-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .premium-wide-cta {
    width: 100%;
  }
  .premium-wide-cta > * {
    flex: 1 1 100%;
  }
}

/* "Bald Verfügbar" Disabled-Button-Style */
.nv-btn.nv-btn-disabled {
  background: var(--neutral--200);
  color: var(--neutral--600);
  pointer-events: none;
  cursor: not-allowed;
  border-color: var(--neutral--300);
}

/* ==================================================================
   Feedback-Discount-Card (Novella-Spec 1:1)
   Container: rounded-[12px] border border-primary/20 shadow-card p-6
              overflow-hidden relative
              bg-gradient-to-br from-primary/20 via-primary/10 to-amber-100/30
   Layout: flex items-center justify-between (Desktop) / flex-col items-start gap-4 (Mobile <640px)
   ================================================================== */
/* Preise-Hero H1 — schmaler max-width für 3-Zeilen-Wrap (matcht novella.at Original) */
.section.hero.top-138px---bottom-126px .inner-container._746px {
  max-width: 500px;
}

/* === Heading-Sizes Brand-Refit (Webflow defaults zu thin) === */
.heading-h1-size {
  font-weight: 700 !important;
  letter-spacing: -0.025em;
}
.heading-h2-size {
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}
.heading-h3-size {
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}

.nv-feedback-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(157, 188, 118, 0.20);            /* border-primary/20 */
  background: linear-gradient(to bottom right,
              rgba(157, 188, 118, 0.20),                   /* from-primary/20 */
              rgba(157, 188, 118, 0.10) 50%,               /* via-primary/10 */
              rgba(254, 243, 199, 0.30));                  /* to-amber-100/30 (amber-100 #FEF3C7) */
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);             /* shadow-card */
  padding: 24px;                                            /* p-6 */
  margin-bottom: 24px;
  overflow: hidden;
}
@media (max-width: 639px) {
  .nv-feedback-card {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
  }
  /* Linke Gruppe (Icon + Text) Mobile: ebenfalls vertikal stacked, Icon links */
  .nv-feedback-left {
    flex-direction: column;
    align-items: flex-start !important;
    width: 100%;
  }
}

/* === Linke Gruppe: flex items-center gap-4 === */
.nv-feedback-left {
  display: flex;
  align-items: center;
  gap: 16px;                                                /* gap-4 */
  flex: 1;
  min-width: 0;
}

/* Icon-Badge: w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 */
.nv-feedback-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;                                      /* rounded-lg in Novella = 12px (var(--radius)) */
  background: rgba(157, 188, 118, 0.10);                    /* bg-primary/10 */
  border: 1px solid rgba(157, 188, 118, 0.20);              /* border-primary/20 */
  color: var(--accent--primary-1);                          /* text-primary */
  flex-shrink: 0;                                           /* shrink-0 */
}

/* Text-Block */
.nv-feedback-text {
  min-width: 0;
}
.nv-feedback-title {
  font-size: 14px;                                          /* text-sm */
  line-height: 20px;
  font-weight: 500;                                         /* font-medium */
  color: #112D1D;                                           /* text-foreground */
  margin: 0;
}
.nv-feedback-subtitle {
  font-size: 12px;                                          /* text-xs */
  line-height: 16px;
  color: var(--neutral--600);                               /* text-muted-foreground */
  margin: 2px 0 0 0;                                        /* mt-0.5 */
}

/* === Rechte Gruppe === */
.nv-feedback-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .nv-feedback-right { width: 100%; }
}

/* State A: Button variant="link" — text-base font-medium text-primary gap-1 */
.nv-feedback-rate-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;                                                 /* gap-1 */
  color: var(--accent--primary-1);                          /* text-primary */
  font-size: 16px;                                          /* text-base */
  font-weight: 500;                                         /* font-medium */
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  height: 40px;                                             /* h-10 */
  padding: 8px 16px;                                        /* py-2 px-4 */
  font-family: Onest, sans-serif;
  transition: color 200ms ease;
  white-space: nowrap;
  text-underline-offset: 4px;
}
.nv-feedback-rate-link:hover {
  color: var(--accent--primary-1-hover);
}
.nv-feedback-rate-link svg {
  flex-shrink: 0;
  width: 16px;                                              /* h-4 w-4 */
  height: 16px;
}
@media (max-width: 639px) {
  .nv-feedback-rate-link {
    width: auto;
    justify-content: flex-start;
    padding-left: 0;
  }
}

/* State B: <div className="flex items-center gap-2"> */
.nv-feedback-code-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;                                                 /* gap-2 */
}
@media (max-width: 639px) {
  .nv-feedback-code-wrap { width: 100%; }
}

/* hidden attribute muss display: inline-flex überschreiben */
.nv-feedback-card [hidden] {
  display: none !important;
}

/* Code-Label: text-sm font-medium text-primary */
.nv-feedback-code {
  font-size: 14px;                                          /* text-sm */
  font-weight: 500;                                         /* font-medium */
  color: var(--accent--primary-1);                          /* text-primary */
  white-space: nowrap;
}

/* Copy-Button: variant="ghost" size="icon" h-8 w-8 hover:bg-novella-softGreen */
.nv-feedback-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;                                              /* w-8 */
  height: 32px;                                             /* h-8 */
  border-radius: 8px;                                       /* rounded-lg ghost-default */
  background: transparent;                                  /* ghost variant */
  border: 0;
  color: var(--neutral--600);                               /* text-muted-foreground default */
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
  padding: 0;
}
.nv-feedback-copy-btn:hover {
  background: #F0F3E7;                                      /* hover:bg-novella-softGreen */
  color: var(--accent--primary-1);                          /* hover:text-primary */
}
.nv-feedback-copy-btn svg {
  width: 16px;
  height: 16px;
}
.nv-feedback-copy-btn .nv-feedback-copy-icon  { display: block; }
.nv-feedback-copy-btn .nv-feedback-copied-icon { display: none; }
.nv-feedback-copy-btn.is-copied {
  color: var(--accent--primary-1);                          /* Check-Icon: text-primary */
}
.nv-feedback-copy-btn.is-copied .nv-feedback-copy-icon  { display: none; }
.nv-feedback-copy-btn.is-copied .nv-feedback-copied-icon { display: block; }

/* ==================================================================
   B4 ÜBER-PAGE — Team-Cards-Grid + Values mit Lucide-Icons
   ================================================================== */

/* Team-Cards-Grid (3 Spalten Desktop, 2 Tablet, 1 Mobile) */
.team-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Desktop 3-col: Wenn letzte Card alleine in der Zeile (3n+1), zentrieren */
.team-cards-grid > :last-child:nth-child(3n + 1) {
  grid-column: 2 / 3;
}
/* Desktop 3-col: Wenn 2 Cards in der letzten Zeile (3n+2), beide zentrieren */
.team-cards-grid > :last-child:nth-child(3n + 2) {
  grid-column: 3 / 4;
}
.team-cards-grid > :nth-last-child(2):nth-child(3n + 1) {
  grid-column: 2 / 3;
}

@media (max-width: 991px) {
  .team-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Tablet 2-col: Wenn letzte Card alleine (2n+1), 50% Breite + zentriert */
  .team-cards-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    justify-self: center;
  }
  /* Reset Desktop-Regeln für 3-col */
  .team-cards-grid > :last-child:nth-child(3n + 2),
  .team-cards-grid > :nth-last-child(2):nth-child(3n + 1) {
    grid-column: auto;
  }
}
@media (max-width: 600px) {
  .team-cards-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile 1-col: Reset alle Centering-Overrides */
  .team-cards-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 100%;
    justify-self: stretch;
  }
}

/* Team-Item: Ratio 3:4, Image fills, Card overlay bottom */
.team-item-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  background: var(--neutral--200);
}
.team-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease-out;     /* matcht andere Hover-Animationen (250ms) */
}
.team-item-wrapper:hover .team-item-image {
  transform: scale(1.04);
}
.card.team-item-content {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.card.team-item-content h3.title-hover {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #112D1D;
  transition: color 200ms;
}
.card.team-item-content > div > div:last-child {
  font-size: 14px;
  color: var(--neutral--600);
}
.team-item-wrapper:hover .title-hover {
  color: var(--accent--primary-1);
}

/* === Team Wanted-Card (immer letzte Position im Team-Grid) === */
.team-wanted-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(155deg,
              rgba(157, 188, 118, 0.18),
              rgba(157, 188, 118, 0.08) 45%,
              rgba(254, 243, 199, 0.32));
  border: 1.5px dashed var(--accent--primary-1);
  color: #112D1D;
  transition: border-color 250ms ease-out;
}
.team-wanted-card:hover {
  border-color: var(--accent--primary-1-hover);
}

/* Punkte-Hintergrund-Pattern (subtle) */
.team-wanted-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(157, 188, 118, 0.30);
  pointer-events: none;
}
.team-wanted-pattern svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* WANTED-Stempel oben rechts (rotiert) */
.team-wanted-stamp {
  position: absolute;
  top: 22px;
  right: -4px;
  padding: 4px 14px;
  background: var(--accent--primary-1);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  border-radius: 4px;
  transform: rotate(8deg);
  box-shadow: 0 2px 6px rgba(157, 188, 118, 0.35);
  z-index: 2;
}

/* Innerer Content-Stack */
.team-wanted-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px;
  gap: 8px;
  max-width: 100%;
}

.team-wanted-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(157, 188, 118, 0.18);
  border: 1px solid rgba(157, 188, 118, 0.30);
  color: var(--accent--primary-1);
  margin-bottom: 8px;
  transition: transform 250ms ease-out, background-color 250ms ease-out;
}
.team-wanted-card:hover .team-wanted-icon {
  transform: scale(1.05);
  background: rgba(157, 188, 118, 0.28);
}

.team-wanted-title {
  font-size: 22px;
  font-weight: 700;
  color: #112D1D;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.team-wanted-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent--primary-1);
  margin: 0;
}
.team-wanted-text {
  font-size: 13px;
  color: var(--neutral--700);
  line-height: 1.55;
  margin: 4px 0 12px;
  max-width: 240px;
}
.team-wanted-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--accent--primary-1);
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 200ms;
}
.team-wanted-card:hover .team-wanted-cta {
  background: var(--accent--primary-1-hover);
}

/* Values: Lucide-Icons in Sage-Green-Bubble (statt Webflow PNG-Icons) */
.values-icon.values-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  margin-bottom: 24px;
}
.values-icon.values-icon-svg svg {
  width: 32px;
  height: 32px;
}

/* === Team-Detail: Hero-Layout (Image left, Content right) === */
.team-page-picture-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.team-page-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Team-Socials: Pill-Style mit Icon + Label */
.team-socials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.team-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  color: var(--neutral--700);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.team-social-link:hover {
  background: #F0F3E7;
  border-color: var(--accent--primary-1);
  color: var(--accent--primary-1);
}
.team-social-link svg { display: block; flex-shrink: 0; }

/* === Team-Detail Bio (Markdown Content) === */
.team-bio-content { font-size: 16px; line-height: 1.7; color: var(--neutral--800); }
.team-bio-content h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 32px 0 16px; color: #112D1D; }
.team-bio-content h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 12px; color: #112D1D; }
.team-bio-content p  { margin: 0 0 16px; }
.team-bio-content ul, .team-bio-content ol { margin: 0 0 16px; padding-left: 24px; }
.team-bio-content li { margin-bottom: 8px; }
.team-bio-content strong { font-weight: 600; color: #112D1D; }

/* ==================================================================
   B5 NEWS-LISTING
   ================================================================== */

/* News-Cards: weniger Padding + kleinere Gap zwischen Title und "Mehr dazu" */
.news-grid .blog-card-wrapper .blog-card-content-inside,
.news-related-grid .blog-card-wrapper .blog-card-content-inside {
  padding: 32px 28px 28px;
}
.news-grid .blog-card-wrapper .blog-card-title,
.news-related-grid .blog-card-wrapper .blog-card-title {
  margin-bottom: 24px !important;
}

/* === News-Detail: Hero-Top-Meta + Date + Read-Time === */
.blog-post-content-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.news-detail-date {
  font-size: 14px;
  color: var(--neutral--600);
}
.news-detail-summary {
  font-size: 17px;
  line-height: 1.55;
  color: var(--neutral--700);
  margin-bottom: 24px;
}
.news-detail-readtime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral--700);
  text-decoration: none;     /* override Webflow default underline */
}
.news-detail-readtime svg {
  color: var(--accent--primary-1);
  flex-shrink: 0;
}

/* === News-Detail: Body-Layout === */
.grid-2-columns.blog-sidebar-page {
  grid-template-columns: 1fr 398px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 991px) {
  .grid-2-columns.blog-sidebar-page {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Sidebar (Author-Card) auf Tablet: volle Breite (kein 398px Limit), Layout wie Laptop */
  .grid-2-columns.blog-sidebar-page > .inner-container._398px {
    max-width: 100% !important;
    width: 100% !important;
    position: static !important;
  }
  /* Author-Card-Layout 1:1 wie Laptop:
     - Avatar links
     - Name + Position untereinander rechts daneben
     - Bio darunter (volle Breite) */
  .news-author-card .card-author-content-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: left !important;
  }
  .news-author-card .card-author-avatar {
    flex-shrink: 0;
  }
  .news-author-bio,
  .news-author-card .inner-container {
    text-align: left !important;
    max-width: 100% !important;
  }
  .news-author-card .team-socials-row {
    justify-content: flex-start !important;
  }
}

/* Rich-Text Article-Content */
.rich-text-news.team-bio-content { font-size: 16px; line-height: 1.7; color: var(--neutral--800); }
.rich-text-news h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 32px 0 16px; color: #112D1D; }
.rich-text-news h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 12px; color: #112D1D; }
.rich-text-news p  { margin: 0 0 16px; }
.rich-text-news ul, .rich-text-news ol { margin: 0 0 16px; padding-left: 24px; }
.rich-text-news li { margin-bottom: 8px; }
.rich-text-news strong { font-weight: 600; color: #112D1D; }

/* === Sidebar-Stack: TOC + Author untereinander, sticky === */
/* Wichtig: grid-item muss `align-self: start` haben damit sticky room hat */
.grid-2-columns.blog-sidebar-page > .inner-container._398px {
  align-self: start;
  position: sticky;
  top: 100px;     /* unter dem sticky-Header (~80px + Buffer) */
}
.news-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* === TOC-Card === */
.news-toc-card {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 20px 22px;
}
.news-toc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral--600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--neutral--200);
}
.news-toc-header svg {
  color: var(--accent--primary-1);
  flex-shrink: 0;
}
.news-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.news-toc-link {
  display: flex;
  align-items: center;          /* Bullet vertikal zentriert mit Text */
  gap: 10px;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--neutral--700);
  text-decoration: none;
  transition: background-color 180ms, color 180ms;
}
.news-toc-link:hover {
  background: rgba(157, 188, 118, 0.08);
  color: var(--accent--primary-1);
}
.news-toc-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutral--400);
  flex-shrink: 0;
  transition: background-color 180ms, transform 180ms;
}
.news-toc-link:hover .news-toc-bullet,
.news-toc-link.is-active .news-toc-bullet {
  background: var(--accent--primary-1);
  transform: scale(1.3);
}
.news-toc-link.is-active {
  color: var(--accent--primary-1);
  font-weight: 500;
}
/* H3-Items eingerückt */
.news-toc-h3 .news-toc-link {
  padding-left: 24px;
  font-size: 13px;
  color: var(--neutral--600);
}

/* Headings im Body bekommen Scroll-Margin damit sticky-Header sie nicht abdeckt
   (kein scroll-behavior: smooth global — wir steuern das per JS für saubere Animation) */
.rich-text-news h2,
.rich-text-news h3 {
  scroll-margin-top: 100px;
}

/* === Author-Sidebar-Card === */
.news-author-card {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.news-author-card .content-link {
  text-decoration: none;
  color: inherit;
}
.news-author-card .card-author-content-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.news-author-card .card-author-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--neutral--200);
}
.news-author-card .card-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease-out;
}
.news-author-card .content-link:hover .card-author-avatar img {
  transform: scale(1.10);
}
.news-author-card .heading-h3-size {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #112D1D;
  margin: 0 0 2px !important;
}
.news-author-card .color-accent {
  font-size: 13px;
  color: var(--accent--primary-1);
  font-weight: 500;
}
.news-author-bio {
  font-size: 14px;
  color: var(--neutral--700);
  line-height: 1.55;
}
.news-author-card .author-social-media-link-wrapper {
  display: flex;
  gap: 8px;
}

/* === Related-Grid (2 Spalten) === */
.news-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .news-related-grid {
    grid-template-columns: 1fr;
  }
}

/* Featured-Article: zentriert mit max-width */
.news-featured-wrap {
  /* Kein eigener Außenabstand — Parent-Container (container-default) liefert das Padding bereits */
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* news-card-link Hover-Effekt auch innerhalb des Featured-Cards */
.card.blog-post-featured:hover .news-card-link {
  color: var(--accent--primary-1-hover);
}

/* Sliding-Pill-Tabs zentriert über dem Grid */
.news-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}
/* Mobile: News-Tabs nehmen volle Breite, Tabs natürlich-breit + auto-gaps */
@media (max-width: 600px) {
  .news-tabs-wrap {
    justify-content: stretch;
  }
  .news-tabs-wrap .nv-tabs-pill-wrapper {
    width: 100%;
  }
  .news-tabs-wrap .nv-tabs-pill-track {
    width: 100%;
    display: flex;
    justify-content: space-between;   /* Tabs auto-verteilt mit Auto-Gaps */
  }
  .news-tabs-wrap .nv-tabs-pill-trigger {
    flex: 0 0 auto;                   /* natürliche Breite (nicht equal) */
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Review-Banner: Button rechts-bündig, BG-Linie sichtbar */
.news-review-banner {
  position: relative;
  overflow: hidden;
}
.news-review-cta {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .news-review-cta {
    justify-content: flex-start;
  }
}

/* Pagination */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.news-pagination-pages {
  display: flex;
  gap: 4px;
  align-items: center;
}
.news-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral--700);
  text-decoration: none;
  transition: background-color 200ms, color 200ms;
  /* Button-Reset (für client-side Pagination-Buttons) */
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.news-page-num:hover {
  background: #F0F3E7;
  color: var(--accent--primary-1);
}
.news-page-num.is-active {
  background: var(--accent--primary-1);
  color: #FFFFFF;
}

/* ==================================================================
   Testimonial-Cards: Content in der Mitte (vertikal zentriert)
   Betrifft: Preise, Funktion-Detail, Karriere etc.
   ================================================================== */
.card.testmonial-v1 {
  align-items: center;
}

/* ==================================================================
   B6 KARRIERE
   ================================================================== */

/* Hero: dunkler Marketing-Background — überschreibt Webflow-Default mit Team-Photo */
.section.hero.top-bottom-280px.bg-career,
.section.bg-career {
  background-image: none !important;
  background: linear-gradient(135deg, #0A1F14 0%, #112D1D 100%) !important;
  border-radius: var(--radius--standart);
  position: relative;
  overflow: hidden;
}
.section.bg-career::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(157, 188, 118, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(157, 188, 118, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.section.bg-career > * { position: relative; z-index: 1; }

/* Karriere-Hero MIT Hero-Image: Foto-Background + Left-to-Right Dark-Gradient (wie Home-Hero), 48px Padding für Text-Margin */
.section.hero.top-bottom-280px.bg-career-image,
.section.bg-career-image {
  border-radius: var(--radius--standart);
  position: relative;
  overflow: hidden;
}
.section.bg-career-image > * { position: relative; z-index: 1; }
.section.bg-career-image .container-default {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 991px) {
  .section.bg-career-image .container-default {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 479px) {
  .section.bg-career-image .container-default {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Perks-Grid: Lucide-Icons in Sage-Bubble (statt Webflow PNG) */
.perks-grid .perks-icon-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: none;
}
.perks-icon.perks-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  margin: 0;
  flex-shrink: 0;
}
.perks-icon.perks-icon-svg svg {
  width: 28px;
  height: 28px;
}
.perks-icon-content {
  flex: 1;
  min-width: 0;
}

/* Position-Cards (Job-Listings) */
.positions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.position-card {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 28px 32px;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms, transform 200ms;
}
.position-card:hover {
  border-color: var(--accent--primary-1);
  transform: translateY(-2px);
}
.position-card-grid {
  display: grid;
  grid-template-columns: 1fr 180px 180px 48px;
  gap: 32px;
  align-items: center;
}
@media (max-width: 991px) {
  /* Tablet: Title volle Breite oben, dann Meta-Werte + CTA in einer Reihe */
  .position-card-grid {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "title title title"
      "standort anstellung cta";
    gap: 16px 24px;
  }
  .position-card-title-wrap { grid-area: title; }
  .position-card-meta:nth-of-type(2) { grid-area: standort; }
  .position-card-meta:nth-of-type(3) { grid-area: anstellung; }
  .position-card-cta {
    grid-area: cta;
    align-self: end;
    justify-self: end;
  }
}
@media (max-width: 600px) {
  /* Mobile: alles 1-spaltig stacked, CTA rechts unten */
  .position-card-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "standort anstellung"
      "cta cta";
    gap: 16px;
  }
  .position-card-cta {
    justify-self: end;
  }
}
.position-card-title {
  font-size: 22px;
  font-weight: 600;
  color: #112D1D;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  transition: color 200ms;
}
.position-card:hover .position-card-title {
  color: var(--accent--primary-1);
}
.position-card-joke {
  font-size: 14px;
  color: var(--neutral--600);
  font-style: italic;
}
.position-card-meta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral--600);
  margin-bottom: 4px;
}
.position-card-meta-value {
  font-size: 16px;
  font-weight: 500;
  color: #112D1D;
}
.position-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(157, 188, 118, 0.10);
  color: var(--accent--primary-1);
  transition: background 200ms, transform 200ms;
}
.position-card:hover .position-card-cta {
  background: var(--accent--primary-1);
  color: #FFFFFF;
  transform: translateX(4px);
}

/* Empty-State (keine offenen Positionen) */
.positions-empty {
  background: #FFFFFF;
  border: 1px dashed var(--accent--primary-1);
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.positions-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  margin-bottom: 4px;
}
.positions-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: #112D1D;
  margin: 0;
  letter-spacing: -0.01em;
}
.positions-empty-text {
  font-size: 15px;
  color: var(--neutral--700);
  line-height: 1.55;
  margin: 0 0 8px;
  max-width: 520px;
}

/* ==================================================================
   B6b CAREER-POSITION DETAIL
   ================================================================== */

/* Hero — Marketing-Dark mit Brand-Tokens */
.career-detail-hero-wrap {
  background-color: #0A1F14 !important;
  position: relative;
  overflow: hidden;
}
.career-detail-joke {
  font-style: italic;
  font-size: 18px;
  opacity: 0.85;
  max-width: 720px;
}

/* Chips: nutzt highlight-pill-on-dark aus dem Style-Guide */
.career-detail-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* SVG-Icons in den Pills auf dunklem BG → primary-tint */
.career-detail-chips .highlight-pill-on-dark svg {
  color: var(--accent--primary-1);
  flex-shrink: 0;
}

/* Body-Grid: Content links 1fr, Sidebar rechts 454px */
.grid-2-columns.sidebar-right-grid.career-detail-grid {
  grid-template-columns: 1fr 454px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 991px) {
  .grid-2-columns.sidebar-right-grid.career-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Sidebar Sticky-Container */
.career-detail-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}
@media (max-width: 991px) {
  /* Tablet: Bewirb-dich-Card volle Breite (User-Wunsch) */
  .career-detail-sidebar {
    position: static;
    max-width: 100% !important;
    width: 100%;
  }
}

/* Sidebar-Card "Bewirb dich hier" — soft sage→amber Gradient Novella-Pattern */
.card.career-sidebar {
  background: linear-gradient(155deg,
              rgba(157, 188, 118, 0.12),
              rgba(157, 188, 118, 0.06) 50%,
              rgba(254, 243, 199, 0.20));
  border: 1px solid rgba(157, 188, 118, 0.30);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.career-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.18);
  border: 1px solid rgba(157, 188, 118, 0.30);
  color: var(--accent--primary-1);
}
.career-sidebar-title {
  font-size: 22px;
  font-weight: 700;
  color: #112D1D;
  letter-spacing: -0.01em;
  margin: 0;
}
.career-sidebar-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--neutral--700);
  margin: 0;
}
.career-sidebar-intro p { margin: 0; }
.career-sidebar-intro a {
  color: var(--accent--primary-1);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.career-sidebar-intro a:hover { color: var(--accent--primary-1-hover); }

/* "Beispielfotos ansehen" Text-Link in Sidebar */
.career-sidebar-examples-link {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: Onest, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent--primary-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 180ms;
}
.career-sidebar-examples-link:hover { color: var(--accent--primary-1-hover); }

.career-sidebar .nv-btn { width: 100%; }

/* === LIGHTBOX === */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 20, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease-out, visibility 0s linear 220ms;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease-out;
}
.lightbox-content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  background: #FFFFFF;
  display: block;
}
.lightbox-counter {
  font-size: 13px;
  color: rgba(255, 253, 247, 0.7);
  font-weight: 500;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.10);
  border: 1px solid rgba(255, 253, 247, 0.20);
  color: #FFFDF7;
  cursor: pointer;
  transition: background 200ms, transform 200ms;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 253, 247, 0.18);
  transform: scale(1.05);
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover,
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

@media (max-width: 767px) {
  .lightbox { padding: 16px; }
  .lightbox-close, .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev  { left: 8px; }
  .lightbox-next  { right: 8px; }
}

/* === Inline-Bewerbungs-Formular === */
/* Kein eigenes background — Section erbt den normalen Page-Bg
   (--neutral--200 = #FCF9F4). Vorher #FFFDF7 → war ein anderer
   Cream-Ton als der Rest der Seite und stach sichtbar heraus. */
.application-form-card {
  max-width: 860px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 56px 56px 48px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (max-width: 767px) {
  .application-form-card { padding: 32px 24px; }
}
.application-form-header {
  margin-bottom: 32px;
}
.application-form-subtitle {
  font-size: 15px;
  color: var(--neutral--600);
  margin: 16px 0 0;
}

.application-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.application-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.application-form-field-full {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .application-form-grid { grid-template-columns: 1fr; }
}

.application-form-field {
  display: flex;
  flex-direction: column;
}
.application-form-hint {
  font-size: 12px;
  color: var(--neutral--600);
  margin-top: 6px;
}

/* File-Upload (matched zu nv-input style) */
.application-form-file-wrap { position: relative; }
.application-form-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.application-form-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px dashed var(--neutral--400);
  border-radius: 8px;
  background: transparent;
  color: var(--neutral--600);
  font-size: 16px;
  font-family: Onest, sans-serif;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms, color 200ms;
}
.application-form-file-label:hover {
  border-color: var(--accent--primary-1);
  color: var(--accent--primary-1);
}
.application-form-file-label svg {
  flex-shrink: 0;
  color: var(--accent--primary-1);
}
.application-form-file-label.has-file {
  border-color: var(--accent--primary-1);
  background: rgba(157, 188, 118, 0.06);
  color: var(--accent--primary-1);
  border-style: solid;
}
.application-form-file:focus-visible + .application-form-file-label {
  border-color: var(--accent--primary-1);
  outline: 2px solid rgba(157, 188, 118, 0.30);
  outline-offset: 2px;
}

/* Privacy-Checkbox: nv-checkbox + Layout */
.application-form-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--neutral--700);
  line-height: 1.55;
  cursor: pointer;
}
.application-form-privacy .nv-checkbox {
  margin-top: 3px;
}
.application-form-privacy a {
  color: var(--accent--primary-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.application-form-privacy a:hover { color: var(--accent--primary-1-hover); }

/* === Toast (Sonner-Style) === */
.nv-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: #FFFFFF;
  color: #112D1D;
  border: 1px solid var(--accent--primary-1);
  border-radius: 8px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 10000;
}
.nv-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.nv-toast svg {
  width: 18px;
  height: 18px;
  color: var(--accent--primary-1);
  flex-shrink: 0;
}

/* ==================================================================
   B3 PREISE — Phase 2: Vergleichstabelle Mobile-Plan-Tabs
   Option C: Nur eine Plan-Spalte sichtbar auf Mobile.
   ================================================================== */

/* Mobile Plan-Dropdown: Custom (replaced native <select>)
   Trigger sieht aus wie die grüne Plan-Pill, Options als Popover-List.
   Nur Mobile (≤767px) sichtbar — Desktop hat die normale Plan-Grid. */
.plan-com-mobile-trigger,
.plan-com-mobile-options {
  display: none;     /* Desktop versteckt */
}
@media (max-width: 767px) {
  /* Desktop-Grid (.plans-wrapper) auf Mobile versteckt */
  [data-comparison-table] .position-sticky.plan-com-header-wrapper .plans-wrapper {
    display: none;
  }

  /* Trigger-Button: sieht aus wie grüne Pill */
  .plan-com-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--accent--primary-1);
    border: 0;
    border-radius: var(--radius--very-small);
    color: #FFFFFF;
    font-family: Onest, sans-serif;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 200ms ease;
    text-align: left;
  }
  .plan-com-mobile-trigger:hover {
    background: var(--accent--primary-1-hover);
  }
  .plan-com-mobile-trigger:focus-visible {
    outline: 2px solid var(--neutral--800);
    outline-offset: 2px;
  }
  .plan-com-mobile-trigger-label {
    flex: 1;
  }
  .plan-com-mobile-chevron {
    color: #FFFFFF;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
  }
  .plan-com-mobile-trigger[aria-expanded="true"] .plan-com-mobile-chevron {
    transform: rotate(180deg);
  }

  /* Options-Liste — Card mit Schatten, fadet/slidet rein */
  .plan-com-mobile-options {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid var(--neutral--300);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 45, 29, 0.10);
    z-index: 10;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .plan-com-mobile-options[hidden] {
    display: block;     /* hidden attribute überschreiben — wir animieren */
  }
  .plan-com-mobile-options:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .plan-com-mobile-option {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--neutral--800);
    cursor: pointer;
    transition: background-color 150ms ease;
  }
  .plan-com-mobile-option:hover,
  .plan-com-mobile-option:focus-visible {
    background: var(--neutral--200);
    outline: none;
  }
  .plan-com-mobile-option.is-active {
    background: rgba(157, 188, 118, 0.15);
    color: var(--accent--primary-1);
    font-weight: 700;
  }
}

/* Inline-SVG Check/X Icons (Lucide circle-check / circle-x) */
.comparison-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.comparison-icon-check {
  color: var(--accent--primary-1); /* sage green */
}
.comparison-icon-x {
  color: #DC2626;                  /* clear red — User-Feedback */
}
.comparison-empty {
  color: var(--neutral--500);
  opacity: 0.5;
  font-size: 18px;
  line-height: 1;
}
/* In Soon-Rows die Check-Icons stärker entsättigen */
.grid-5-columns.price-com-grid-5-col.soon .comparison-icon-check {
  opacity: 0.7;
}

/* ==================================================================
   FAQ Accordion (Novella-Pattern, JS-driven height transition)
   ================================================================== */
.nv-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nv-faq-item {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 200ms;
}
.nv-faq-item:hover {
  border-color: var(--neutral--400);
}
.nv-faq-item.is-open {
  border-color: var(--accent--primary-1);
}

.nv-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: Onest, sans-serif;
  color: #112D1D;
  transition: background-color 200ms;
}
.nv-faq-trigger:hover {
  background-color: rgba(157, 188, 118, 0.04);
}

.nv-faq-question {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  flex: 1;
}

.nv-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--neutral--200);
  color: var(--neutral--800);
  transition: transform 280ms ease-out, background-color 200ms, color 200ms;
}
.nv-faq-item.is-open .nv-faq-icon {
  transform: rotate(-180deg);                  /* rotation rechts (wie Navbar-Dropdown) */
  background-color: var(--accent--primary-1);
  color: #FFFFFF;
}

.nv-faq-body {
  height: 0;
  overflow: hidden;
  transition: height 320ms ease-out;
}
.nv-faq-answer {
  padding: 4px 24px 22px;
}
.nv-faq-answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral--700);
  max-width: 760px;
}

/* Plans-Wrapper Header soll keinen Hover-Beige bekommen — bleibt grün */
.grid-5-columns.price-com-grid-5-col.plans-wrapper:hover {
  background-color: var(--accent--primary-1) !important;
}

/* Mobile: tabs sichtbar, alle plan-col-X ausgeblendet, nur aktive Spalte sichtbar */
@media (max-width: 767px) {
  /* Override Webflow-Default das .card.plan-com auf Mobile verstecken würde
     (Webflow erwartete separate .plan-com.mobile DOM — wir nutzen ein einziges Markup) */
  [data-comparison-table].card.plan-com {
    display: flex !important;
  }

  /* Alle Plan-Spalten ausblenden */
  [data-comparison-table] .plan-col {
    display: none !important;
  }
  /* Nur die aktive Plan-Spalte einblenden */
  [data-comparison-table][data-active-plan="0"] .plan-col-0,
  [data-comparison-table][data-active-plan="1"] .plan-col-1,
  [data-comparison-table][data-active-plan="2"] .plan-col-2,
  [data-comparison-table][data-active-plan="3"] .plan-col-3 {
    display: flex !important;
  }

  /* Grid auf 2 Spalten reduzieren (Label + 1 Plan) */
  [data-comparison-table] .grid-5-columns.price-com-grid-5-col {
    grid-template-columns: 1fr auto;
  }

  /* Sticky-Header-Wrapper: Plan-Header pillig, transparenter Atemraum oben + unten */
  [data-comparison-table] .position-sticky.plan-com-header-wrapper {
    top: 0;
    padding: 12px 0 4px 0 !important;        /* oben + minimal unten (matches row-gap) */
    margin: 0 !important;
    background: transparent !important;       /* statt weiß — Content scrollt darunter durch */
    border-radius: 0 !important;
    position: sticky;
  }
  /* Plans-Wrapper (das grüne Pill mit Plan-Name) — selbe Optik wie Subheader */
  [data-comparison-table] .plans-wrapper.grid-5-columns {
    padding: 8px 12px !important;
    border-radius: var(--radius--very-small);
  }
  /* Subheader-Wrapper: transparent BG, schmaler Atemraum oben (zwischen
     Plan-Header und Kategorie-Pill ist nur transparenter Gap) */
  [data-comparison-table] .position-sticky.plan-com-subheader-wrapper {
    top: 64px;                                /* unter Plan-Header (52 height + 12 padding oben) */
    padding: 4px 0 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  /* Plan-Names im Header: groß und fett wie die "Unsere Pakete"-H2 auf Laptop,
     aber etwas kompakter weil Mobile */
  [data-comparison-table] .plans-wrapper .plan-col,
  [data-comparison-table] .plans-wrapper > * {
    font-weight: 700 !important;
    font-size: 20px;
  }

  /* "Unsere Pakete" Header — auf Mobile nur eine Plan-Zelle, Plan-Name sichtbar */
  [data-comparison-table] .plans-wrapper .hidden-on-mbl {
    display: none;
  }
}

/* ==================================================================
   B7 KONTAKT — Hero (2-col), Helpbox, Form-Card, Contact-Cards
   ================================================================== */

/* HERO 2-col grid: Title + Helpbox links | Form-Card rechts */
.kontakt-hero-grid {
  grid-template-columns: 1fr 540px;
  grid-column-gap: 80px;
  grid-row-gap: 48px;
  align-items: start;
}

.kontakt-hero-left {
  padding-top: 12px;
}

/* Helpbox: dezenter Block ohne aggressives Border-Box */
.kontakt-helpbox {
  border-top: 1px solid var(--neutral--300);
  padding-top: 32px;
}
.kontakt-helpbox h2 {
  margin-bottom: 8px;
  color: var(--neutral--800);
}
.kontakt-helpbox p {
  color: var(--neutral--700);
  margin-bottom: 16px;
}
/* Form-Card */
.kontakt-form-card {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.kontakt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kontakt-form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kontakt-form-field-full {
  grid-column: 1 / -1;
}
.kontakt-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Privacy-Checkbox: gleicher Pattern wie application-form-privacy */
.kontakt-form-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--neutral--700);
  line-height: 1.55;
  cursor: pointer;
}
.kontakt-form-privacy .nv-checkbox {
  margin-top: 3px;
}
.kontakt-form-privacy a {
  color: var(--accent--primary-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kontakt-form-privacy a:hover {
  color: var(--accent--primary-1-hover);
}

/* Social-Mini-Bereich unter dem Hilfecenter-Link (Novella-Pattern) */
.kontakt-social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral--300);
}
.kontakt-social-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral--600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kontakt-social-list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kontakt-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.kontakt-social-icon:hover {
  background: var(--accent--primary-1);
  border-color: var(--accent--primary-1);
  color: #FFFFFF;
}

/* Contact-Cards: perks-icon-pattern (Sage-Bubble 12px-Radius, horizontal layout) */
.kontakt-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 922px;
  margin: 0 auto;
}
.kontakt-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 32px;
  text-decoration: none;
  color: var(--neutral--800);
  transition: border-color 200ms, background-color 200ms;
}
.kontakt-card:hover {
  border-color: var(--accent--primary-1);
  background-color: rgba(157, 188, 118, 0.04);
}
.kontakt-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  flex-shrink: 0;
  transition: background-color 200ms, color 200ms;
}
.kontakt-card-icon svg {
  width: 28px;
  height: 28px;
}
.kontakt-card:hover .kontakt-card-icon {
  background: var(--accent--primary-1);
  color: #FFFFFF;
}
.kontakt-card-content {
  flex: 1;
  min-width: 0;
}
.kontakt-card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--neutral--800);
  margin: 0 0 8px;
}
.kontakt-card-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral--700);
  margin: 0 0 12px;
}
.kontakt-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent--primary-1);
  word-break: break-word;
  transition: color 200ms;
}
.kontakt-card:hover .kontakt-card-link {
  color: var(--accent--primary-1-hover);
}

/* === Tablet ≤991px === */
@media (max-width: 991px) {
  .kontakt-hero-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 40px;
  }
  .kontakt-form-card {
    padding: 28px;
  }
  .kontakt-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* === Mobile ≤767px === */
@media (max-width: 767px) {
  .kontakt-form-grid {
    grid-template-columns: 1fr;
  }
  .kontakt-form-card {
    padding: 24px 20px;
  }
  .kontakt-cards-grid {
    grid-template-columns: 1fr;
  }
  .kontakt-card {
    padding: 24px 20px;
    gap: 16px;
  }
  .kontakt-card-icon {
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
  }
  .kontakt-card-icon svg {
    width: 24px;
    height: 24px;
  }
  .kontakt-helpbox {
    padding-top: 24px;
  }
  .kontakt-social {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ==================================================================
   B10 MARKETING-Seite — Anpassungen für Webflow-Komponenten + eigene
   Marketing-spezifische Klassen (Beta-Plan-Card, Lightbox, Footer)
   ================================================================== */

/* Section-Header mit 2-col Title+Paragraph: Rechte Spalte am unteren Rand +
   rechtsbündig in der Zelle (Text bleibt linksbündig im Block). Gilt
   global für alle .grid-2-columns.title-and-paragraph Sektionen. */
.grid-2-columns.title-and-paragraph {
  align-items: end;
}
.grid-2-columns.title-and-paragraph > *:last-child {
  justify-self: end;
}

/* Funktionen-Cards: Marketing-Dark BG + floating Sage-Line + content centered */
.marketing-funktion-card-wrap {
  margin-bottom: 40px;
}
.marketing-funktion-card-wrap:last-child {
  margin-bottom: 0;
}
.card.card-image-v1.marketing-funktion-card {
  background: var(--secondary--color-1);
  border: 1px solid var(--secondary--color-1);
  border-radius: 16px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  color: var(--neutral--100);
}
.marketing-funktion-card-reverse {
  /* keep markup order, no row-reverse needed since we change DOM order */
}
.marketing-funktion-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.marketing-funktion-text h3,
.marketing-funktion-text p {
  position: relative;
  z-index: 2;
}
.marketing-funktion-image-link {
  position: relative;
  z-index: 2;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.marketing-funktion-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 350ms ease-out;
}
.marketing-funktion-image-link:hover .marketing-funktion-image {
  transform: scale(1.03);
}
/* Floating-Line auf den Funktion-Cards: Webflow-Original-Größe + Position
   beibehalten (über stretching auf Card-Bounds), Farbe ist die globale
   --marketing-line-color (Sage 0.45 alpha) — gleich wie überall. */
.marketing-funktion-card .floating-item.marketing-funktion-line {
  z-index: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  pointer-events: none;
}
@media (max-width: 991px) {
  .marketing-funktion-card {
    grid-template-columns: 1fr;
    padding: 40px 32px;
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .marketing-funktion-card {
    padding: 32px 24px;
    gap: 24px;
  }
}

/* Beta-Plan-Section: 2-col Layout (Plan-Card + Info-Cards) */
.marketing-beta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 991px) {
  .marketing-beta-grid {
    grid-template-columns: 1fr;
  }
}
.marketing-beta-card {
  /* Override subgrid-Layout der nv-plan-card (braucht parent-grid mit rows).
     Hier rendert die Card standalone, also einfaches flex-Layout. */
  display: flex !important;
  flex-direction: column;
  grid-row: auto !important;
  position: relative;
  height: 100%;  /* Card so hoch wie die Info-Cards-Spalte daneben */
}
.marketing-beta-strikethrough {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--neutral--500);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-left: 4px;
  align-self: flex-start;
  margin-top: 6px;
}
.marketing-beta-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.marketing-beta-info-card {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 32px;
  flex: 1;
}
.marketing-beta-info-card-dark {
  background: var(--secondary--color-1);
  border-color: var(--secondary--color-1);
  color: var(--neutral--100);
}
.marketing-beta-info-card-dark h3,
.marketing-beta-info-card-dark p {
  color: var(--neutral--100) !important;
}

/* Marketing-Lightbox: Reuse von .lightbox aber ohne nav (single image) */
[data-marketing-lightbox] {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 20, 0.94);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
[data-marketing-lightbox].is-open {
  display: flex;
}
[data-marketing-lightbox] .lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #FFFFFF;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 200ms;
}
[data-marketing-lightbox] .lightbox-close:hover {
  background: rgba(255,255,255,0.20);
}
[data-marketing-lightbox] .lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
}
[data-marketing-lightbox] .lightbox-image {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Marketing-Footer: leicht helleres Grün (Marketing-Dark statt -Deeper),
   rundum gerundete Bar (oben + unten) + Margin unter der Bar. */
.footer-bottom-wrapper.marketing-footer-bottom {
  background-color: var(--secondary--color-1) !important;  /* Marketing-Dark #112D1D */
  border-radius: var(--radius--standart);
  margin-bottom: 24px;
}

/* ==================================================================
   B11 404 — Webflow-Layout 1:1, Branding angepasst
   Desktop: 2-col (Text links, Riesiges "404" rechts)
   Mobile (≤991px): 1-col (Text oben, "404" drunter)
   ================================================================== */
@media (min-width: 992px) {
  .not-found-card-content---grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    align-items: center;
  }
  .not-found-card-content---grid ._404-not-found {
    text-align: right;
  }
  .not-found-card-content---grid .buttons-row.center.align-left---laptop-big {
    justify-content: flex-start;
  }
}

/* ==================================================================
   B9 LEGAL — Impressum + Datenschutz (Rich-Text mit Brand-Token-Headings)
   ================================================================== */

.legal-rich-text {
  color: var(--neutral--800);
  font-size: 16px;
  line-height: 1.625;
}
.legal-rich-text > *:first-child { margin-top: 0; }
.legal-rich-text > *:last-child { margin-bottom: 0; }
.legal-rich-text h1 {
  font-size: 38px;
  line-height: 1.21;
  font-weight: 700;
  color: var(--neutral--800);
  margin: 48px 0 24px;
  letter-spacing: -0.01em;
}
.legal-rich-text h1:first-child { margin-top: 0; }
.legal-rich-text h2 {
  font-size: 28px;
  line-height: 1.28;
  font-weight: 600;
  color: var(--neutral--800);
  margin: 40px 0 16px;
}
.legal-rich-text h3 {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--neutral--800);
  margin: 32px 0 12px;
}
.legal-rich-text p {
  margin: 0 0 16px;
  color: var(--neutral--700);
}
.legal-rich-text strong, .legal-rich-text b {
  color: var(--neutral--800);
  font-weight: 600;
}
.legal-rich-text a {
  color: var(--accent--primary-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms;
  word-break: break-word;
}
.legal-rich-text a:hover {
  color: var(--accent--primary-1-hover);
}
.legal-rich-text ul, .legal-rich-text ol {
  margin: 16px 0;
  padding-left: 24px;
}
.legal-rich-text li {
  margin-bottom: 8px;
  color: var(--neutral--700);
}
.legal-rich-text hr {
  border: 0;
  border-top: 1px solid var(--neutral--300);
  margin: 40px 0;
}
@media (max-width: 767px) {
  .legal-rich-text h1 { font-size: 28px; margin: 32px 0 16px; }
  .legal-rich-text h2 { font-size: 22px; margin: 28px 0 12px; }
  .legal-rich-text h3 { font-size: 18px; margin: 24px 0 10px; }
}

/* ==================================================================
   B8 DATENSICHERHEIT — Cert-Liste, Badges-Grid, Maßnahmen-Cards
   ================================================================== */

/* Sicherheitszertifikate-Liste (mit Sage-Check-Icons statt Bullet) */
.security-cert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.security-cert-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--neutral--800);
}
.security-cert-list-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: rgba(157, 188, 118, 0.12);
  color: var(--accent--primary-1);
  margin-top: 2px;
  flex-shrink: 0;
}
.security-cert-list-text strong {
  font-weight: 600;
  color: var(--neutral--800);
}

/* Zertifikat-Badges-Grid (3 Spalten Standard) */
.security-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: center;
}
.security-badge-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--accent--primary-1);
  border: 1px solid var(--accent--primary-1);
  border-radius: 12px;
  aspect-ratio: 1 / 1;
}
.security-badge-image {
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Maßnahmen-Cards-Grid (perks-icon-pattern: Sage-Bubble + Title + Text) */
.security-measures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1024px;
  margin: 0 auto;
}
.security-measure-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 32px;
}
.security-measure-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  max-width: 56px;
  max-height: 56px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  flex-shrink: 0;
}
.security-measure-icon svg {
  width: 26px;
  height: 26px;
}
.security-measure-content {
  flex: 1;
  min-width: 0;
}
.security-measure-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--neutral--800);
  margin: 0 0 8px;
}
.security-measure-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral--700);
  margin: 0;
}

/* === Tablet ≤991px === */
@media (max-width: 991px) {
  .security-badges-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .security-measures-grid {
    grid-template-columns: 1fr;
  }
}

/* === Mobile ≤767px === */
@media (max-width: 767px) {
  .security-badges-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .security-badge-wrapper {
    padding: 12px;
  }
  .security-measure-card {
    padding: 24px 20px;
    gap: 16px;
  }
  .security-measure-icon {
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
  }
  .security-measure-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ==================================================================
   HOME-VARIANTEN V1-V5 (Design-Vergleich)
   ================================================================== */

/* === V1: Bento-Showcase ============================================ */
.v1-bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.v1-bento-card {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: border-color 200ms, transform 200ms;
}
.v1-bento-card:hover {
  border-color: var(--accent--primary-1);
  transform: translateY(-2px);
}
.v1-bento-card-hero {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.v1-bento-card-dark {
  background: var(--secondary--color-1);
  border-color: var(--secondary--color-1);
  color: var(--neutral--100);
}
.v1-bento-content { position: relative; z-index: 2; max-width: 460px; }
.v1-bento-image-corner {
  position: absolute;
  top: 24px;
  right: -40px;
  width: 240px;
  opacity: 0.85;
  z-index: 1;
}
.v1-bento-card-mid { grid-column: span 1; min-height: 230px; }
.v1-bento-card-small { grid-column: span 1; min-height: 230px; }
.v1-bento-card-sage {
  background: var(--accent--primary-1);
  border-color: var(--accent--primary-1);
  color: var(--neutral--100);
}
.v1-bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  margin-bottom: 20px;
}
.v1-bento-card-sage .v1-bento-icon {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--neutral--100);
}
@media (max-width: 991px) {
  .v1-bento { grid-template-columns: 1fr 1fr; }
  .v1-bento-card-hero { grid-column: 1 / 3; grid-row: 1; min-height: 360px; }
}
@media (max-width: 767px) {
  .v1-bento { grid-template-columns: 1fr; }
  .v1-bento-card-hero, .v1-bento-card-mid, .v1-bento-card-small {
    grid-column: 1; grid-row: auto; min-height: 200px;
  }
}
.v1-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px 32px;
  background: var(--accent--primary-1);
  border-radius: 16px;
  text-align: center;
}
.v1-stat-number {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--neutral--100);
  margin-bottom: 8px;
}
.v1-stat-label { font-size: 14px; color: var(--neutral--100); opacity: 0.85; }
@media (max-width: 767px) {
  .v1-stats { grid-template-columns: repeat(2, 1fr); padding: 32px 20px; }
  .v1-stat-number { font-size: 36px; }
}

/* === V2: Storytelling Journey ===================================== */
.v2-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.v2-vs-card {
  border-radius: 16px;
  padding: 40px 32px;
  border: 1px solid var(--neutral--300);
}
.v2-vs-card-bad { background: #FCF9F4; }
.v2-vs-card-good {
  background: rgba(157, 188, 118, 0.08);
  border-color: var(--accent--primary-1);
}
.v2-vs-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--neutral--600);
  margin-bottom: 24px;
}
.v2-vs-card-good .v2-vs-label { color: var(--accent--primary-1); }
.v2-vs-list { list-style: none; margin: 0; padding: 0; }
.v2-vs-list li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 16px;
  line-height: 1.5;
  color: var(--neutral--800);
}
.v2-vs-list li:last-child { border-bottom: 0; }
.v2-vs-card-bad .v2-vs-list li::before {
  content: "\2715";
  position: absolute; left: 0; top: 12px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.10);
  color: #DC2626;
  font-weight: 700;
  font-size: 14px;
}
.v2-vs-card-good .v2-vs-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 12px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent--primary-1);
  color: white;
  font-weight: 700;
  font-size: 14px;
}
@media (max-width: 767px) { .v2-vs-grid { grid-template-columns: 1fr; } }

.v2-day-stack { display: flex; flex-direction: column; gap: 32px; }
.v2-day-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 16px;
}
.v2-day-card-reverse .v2-day-image { order: 2; }
.v2-day-image { border-radius: 12px; overflow: hidden; }
.v2-day-image img { width: 100%; height: auto; display: block; }
.v2-day-time {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(157, 188, 118, 0.12);
  color: var(--accent--primary-1);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
@media (max-width: 991px) {
  .v2-day-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .v2-day-card-reverse .v2-day-image { order: 0; }
}

.v2-trust {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: center;
  padding: 40px;
  background: var(--secondary--color-1);
  border-radius: 16px;
  color: var(--neutral--100);
}
.v2-trust-text .nv-eyebrow,
.v2-trust-text h3,
.v2-trust-text p { color: var(--neutral--100); }
.v2-trust-badges { display: flex; gap: 16px; flex-wrap: wrap; }
.v2-trust-badge {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px;
  background: var(--accent--primary-1);
  border-radius: 12px;
  padding: 12px;
}
.v2-trust-badge img { max-width: 100%; max-height: 100%; }
@media (max-width: 767px) { .v2-trust { grid-template-columns: 1fr; gap: 24px; padding: 24px; } }

/* === V3: Interactive Demo ========================================== */
.v3-demo-tabs {
  display: flex;
  background: rgba(157, 188, 118, 0.10);
  border-radius: 9999px;
  padding: 6px;
  margin: 0 auto 32px;
  width: fit-content;
}
.v3-demo-tab {
  padding: 10px 20px;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--neutral--700);
  cursor: pointer;
  transition: all 200ms;
}
.v3-demo-tab.is-active {
  background: var(--accent--primary-1);
  color: var(--neutral--100);
}
.v3-demo-stage { position: relative; }
.v3-demo-pane { display: none; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.v3-demo-pane.is-active { display: grid; }
.v3-demo-image-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(17, 45, 29, 0.10); }
.v3-demo-image { width: 100%; height: auto; display: block; }
.v3-demo-bullets { display: flex; flex-direction: column; gap: 24px; }
.v3-demo-bullet { display: flex; gap: 16px; align-items: flex-start; }
.v3-demo-bullet-num {
  flex-shrink: 0; width: 36px; height: 36px;
  background: var(--accent--primary-1);
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
}
@media (max-width: 991px) { .v3-demo-pane { grid-template-columns: 1fr; } }

.v3-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.v3-feature { text-align: left; }
.v3-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  margin-bottom: 16px;
}
@media (max-width: 767px) { .v3-features { grid-template-columns: 1fr; } }

.v3-quote {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background: rgba(157, 188, 118, 0.06);
  border-radius: 16px;
  padding: 64px 48px;
}
.v3-quote-mark { color: var(--accent--primary-1); margin: 0 auto 16px; display: block; opacity: 0.5; }
.v3-quote-text { margin-bottom: 32px; line-height: 1.4; }
.v3-quote-author { display: inline-flex; align-items: center; gap: 16px; text-align: left; }
.v3-quote-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
@media (max-width: 767px) { .v3-quote { padding: 40px 24px; } }

/* === V4: Outcome-Driven Numbers ==================================== */
.v4-stats-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 32px;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 16px;
  text-align: center;
}
.v4-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  margin: 0 auto 16px;
}
.v4-stat-number { font-size: 48px; font-weight: 700; line-height: 1; color: var(--neutral--800); margin-bottom: 8px; }
.v4-stat-label { font-size: 15px; color: var(--neutral--700); }
@media (max-width: 767px) {
  .v4-stats-hero { grid-template-columns: repeat(2, 1fr); padding: 32px 20px; }
  .v4-stat-number { font-size: 36px; }
}

.v4-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
}
.v4-bento-card {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 16px;
  padding: 32px;
}
.v4-bento-feature {
  grid-column: 1 / 5;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  padding: 40px;
}
.v4-bento-feature-image { border-radius: 12px; overflow: hidden; }
.v4-bento-feature-image img { width: 100%; height: auto; display: block; }
.v4-bento-small { grid-column: span 1; }
.v4-bento-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(157, 188, 118, 0.10);
  border: 1px solid rgba(157, 188, 118, 0.20);
  color: var(--accent--primary-1);
  margin-bottom: 16px;
}
@media (max-width: 991px) {
  .v4-bento { grid-template-columns: repeat(2, 1fr); }
  .v4-bento-feature { grid-column: 1 / 3; grid-template-columns: 1fr; }
}

.v4-testimonial-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.v4-testimonial {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 28px 24px;
}
.v4-testimonial-text { font-size: 16px; line-height: 1.5; color: var(--neutral--800); margin-bottom: 20px; }
.v4-testimonial-author { display: flex; gap: 12px; align-items: center; }
.v4-testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent--primary-1), #6f8a4f);
  flex-shrink: 0;
}
@media (max-width: 991px) { .v4-testimonial-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v4-testimonial-wall { grid-template-columns: 1fr; } }

.v4-compare-wrap {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 16px;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}
.v4-compare { width: 100%; border-collapse: collapse; }
.v4-compare th,
.v4-compare td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--neutral--300);
}
.v4-compare thead th {
  background: rgba(157, 188, 118, 0.04);
  font-weight: 600;
  color: var(--neutral--800);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v4-compare th.v4-compare-novella,
.v4-compare td.v4-compare-novella {
  background: rgba(157, 188, 118, 0.06);
  color: var(--accent--primary-1);
  font-weight: 600;
}
.v4-compare tbody tr:last-child td { border-bottom: 0; }

/* === V5: Modern Novella ============================================ */
.v5-preview { position: relative; max-width: 980px; margin: 0 auto; }
.v5-browser {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(17, 45, 29, 0.12);
}
.v5-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--neutral--200);
  border-bottom: 1px solid var(--neutral--300);
}
.v5-browser-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--neutral--400); }
.v5-browser-dot:nth-child(1) { background: #FF5F57; }
.v5-browser-dot:nth-child(2) { background: #FEBC2E; }
.v5-browser-dot:nth-child(3) { background: #28C840; }
.v5-browser-url {
  margin-left: 12px;
  padding: 4px 16px;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 6px;
  font-size: 13px;
  color: var(--neutral--700);
  flex-grow: 1;
  max-width: 300px;
  text-align: center;
}
.v5-browser-screen img { width: 100%; height: auto; display: block; }
.v5-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(17, 45, 29, 0.10);
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral--800);
}
.v5-float-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent--primary-1);
  flex-shrink: 0;
}
.v5-float-1 { top: 80px; left: -32px; }
.v5-float-2 { top: 220px; right: -32px; }
.v5-float-3 { bottom: 60px; left: -16px; }
@media (max-width: 991px) { .v5-float { display: none; } }

.v5-story-stack { display: flex; flex-direction: column; gap: 80px; }
.v5-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.v5-story-reverse .v5-story-image { order: -1; }
.v5-story-image { border-radius: 12px; overflow: hidden; }
.v5-story-image img { width: 100%; height: auto; display: block; }
.v5-story-list { list-style: none; margin: 0; padding: 0; }
.v5-story-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 15px;
  color: var(--neutral--800);
}
.v5-story-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 8px;
  width: 20px; height: 20px;
  background: rgba(157, 188, 118, 0.12);
  color: var(--accent--primary-1);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
@media (max-width: 991px) {
  .v5-story { grid-template-columns: 1fr; gap: 32px; }
  .v5-story-reverse .v5-story-image { order: 0; }
}

.v5-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
  background: rgba(157, 188, 118, 0.06);
  border-radius: 16px;
}
.v5-pricing-cards { display: flex; gap: 16px; }
@media (max-width: 600px) {
  /* Home Preise: alle Plan-Cards untereinander Mobile (User-Wunsch) */
  .v5-pricing-cards { flex-direction: column; }
  .v5-pricing-mini-highlight { transform: none; } /* kein scale auf Mobile */
}
.v5-pricing-mini {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
/* Standard-Card mit Novella highlight-card-strong Pattern (Sage-Gradient) */
.v5-pricing-mini-highlight {
  border: 1.5px solid var(--accent--primary-1);
  background: linear-gradient(225deg, rgba(157,188,118,0.05), rgba(157,188,118,0.10));
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(157, 188, 118, 0.18);
  position: relative;
  overflow: hidden;
}
.v5-pricing-mini-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral--700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.v5-pricing-mini-price { font-size: 32px; font-weight: 700; color: var(--neutral--800); margin-bottom: 4px; }
.v5-pricing-mini-text { font-size: 13px; color: var(--neutral--600); }
@media (max-width: 991px) { .v5-pricing { grid-template-columns: 1fr; padding: 32px; } }

/* V7 Pricing-Stack: 3 Cards oben + 1 breite Premium-Card unten */
.v7-pricing-stack { display: flex; flex-direction: column; gap: 12px; }
.v7-pricing-premium {
  background: #FFFFFF;
  border: 1px solid var(--neutral--300);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--neutral--800);
}
.v7-pricing-premium .v5-pricing-mini-label { color: var(--neutral--700); margin-bottom: 4px; }
.v7-pricing-premium .v5-pricing-mini-price { color: var(--neutral--800); font-size: 28px; }
.v7-pricing-premium-text { font-size: 14px; color: var(--neutral--600); }
@media (max-width: 600px) {
  /* Premium-Card auf Mobile: gleiches Layout wie Gratis/Starter Cards
     (zentriert gestackt, label oben, price mittig, text unten) */
  .v7-pricing-premium {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }
  .v7-pricing-premium .v5-pricing-mini-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .v7-pricing-premium .v5-pricing-mini-price {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .v7-pricing-premium-text {
    font-size: 13px;
    margin-bottom: 0;
  }
}

/* === V6: Mix (Marketing-Funktion-Style Story-Cards) =============== */
.v6-story-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.v6-story-card-wrap { width: 100%; }
/* Override: marketing-funktion-card hat 1fr 1fr, hier exakt gleich.
   Reverse-Variante via DOM-Order (Image vor Text). */
.v6-story-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.v6-story-image {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20);
}
.v6-story-image img { width: 100%; height: auto; display: block; }
.v6-story-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v6-story-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 15px;
  color: var(--neutral--200);
}
.v6-story-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  background: rgba(157, 188, 118, 0.18);
  color: var(--accent--primary-1);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

/* === V7-Spacing: Padding (addiert sich, anders als Margin → kein Collapse)
   Beispiel: 120px pb + 120px pt = effektiv 240px zwischen Sections.
   Override des .section default (180/180) via !important. ============= */
.v7-pt-0   { padding-top: 0 !important; }
.v7-pb-0   { padding-bottom: 0 !important; }
.v7-pt-120 { padding-top: 120px !important; }
.v7-pt-180 { padding-top: 180px !important; }
.v7-pb-120 { padding-bottom: 120px !important; }
@media (max-width: 991px) {
  .v7-pt-120 { padding-top: 80px !important; }
  .v7-pt-180 { padding-top: 120px !important; }
  .v7-pb-120 { padding-bottom: 80px !important; }
}
@media (max-width: 767px) {
  .v7-pt-120 { padding-top: 56px !important; }
  .v7-pt-180 { padding-top: 80px !important; }
  .v7-pb-120 { padding-bottom: 56px !important; }
}

/* Funktionen-Übersicht: kompakter Hero, kleinerer Abstand zum Bento-Grid */
.section.hero.funktionen-hero-compact {
  padding-bottom: 56px !important;
}

/* === V7: Bento-Funktionen (3 oben + 2 unten, Marketing-Dark Cards) ====== */
.v7-features-header { align-items: end; }
.v7-features-header > div:first-child { max-width: 600px; }
.v7-features-header > .buttons-row.align-right { justify-self: end; align-self: end; }
@media (max-width: 767px) {
  .v7-features-title br { display: none; }
  .v7-features-header > div:first-child { max-width: none; }
}

.v7-features {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
}
.v7-feature-card {
  flex: 0 1 calc((100% - 52px) / 3);
  background: var(--secondary--color-1);
  border: 1px solid var(--secondary--color-1);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 360px;
  overflow: hidden;
  position: relative;
  color: var(--neutral--100);
  text-decoration: none;
  transition: border-color 250ms ease-out, box-shadow 250ms ease-out;
}
.v7-feature-card:hover {
  color: var(--neutral--100);
  border-color: var(--accent--primary-1);
  box-shadow: 0 12px 32px rgba(157, 188, 118, 0.18);
}
.v7-feature-card .v7-feature-image,
.v7-feature-card .v7-feature-title {
  transition: transform 350ms ease-out, color 250ms ease-out;
}
.v7-feature-card:hover .v7-feature-image { transform: scale(1.04); }
.v7-feature-card:hover .v7-feature-title { color: var(--accent--primary-1); }
/* Reihe 2 (Card 4 + 5) → je 50% Breite, größer */
.v7-feature-card:nth-child(4),
.v7-feature-card:nth-child(5) {
  flex: 0 1 calc((100% - 26px) / 2);
  min-height: 420px;
}
.v7-feature-card .floating-item.v7-feature-line {
  z-index: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  pointer-events: none;
}
.v7-feature-text {
  position: relative;
  z-index: 2;
}
.v7-feature-title {
  margin: 8px 0 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.286em;
  letter-spacing: -0.025em;
  color: var(--neutral--100);
  /* 2-Zeilen-Reservierung damit alle Cards in einer Reihe gleich hoch sind —
     egal ob Title 1 oder 2 Zeilen lang ist. Sonst entsteht Gap über dem
     Image-Wrap (flex: 1 + align-items: flex-end → leerer Raum oben). */
  min-height: calc(2 * 1.286em);
}
.v7-feature-desc {
  margin: 0;
  color: var(--neutral--200);
  font-size: 16px;
  line-height: 1.555em;
  /* 3-Zeilen-Reservierung damit Cards in einer Reihe gleich hoch sind. */
  min-height: calc(3 * 1.555em);
}
.v7-feature-image-wrap {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.v7-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Sicherheit-Card Badges: 3+2 Grid-Layout — 3 oben, 2 zentriert darunter */
.v7-feature-image-wrap.v7-feature-badges {
  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* 6-col-grid für saubere 3+2 Zentrierung */
  gap: 12px;
  width: 100%;
  align-self: stretch;
  margin-top: auto;        /* schiebt Badges nach unten in der Card */
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.v7-feature-image-wrap.v7-feature-badges .v7-badge {
  aspect-ratio: 1;
  grid-column: span 2;      /* jedes Badge: 2 von 6 cols → 3 pro Reihe */
}
/* 4./5. Badge zentriert in der unteren Reihe (6-col-grid: 2+2 = 4 cols, start col 2) */
.v7-feature-image-wrap.v7-feature-badges .v7-badge:nth-child(4) {
  grid-column: 2 / span 2;
}
.v7-feature-image-wrap.v7-feature-badges .v7-badge:nth-child(5) {
  grid-column: 4 / span 2;
}
/* Mobile: noch kompakter */
@media (max-width: 600px) {
  .v7-feature-image-wrap.v7-feature-badges {
    gap: 10px;
  }
}

/* ==================================================================
   Mobile: Section-Headlines links statt zentriert (User-Wunsch)
   Betrifft: Home Unterschied, Home Preise, alle FAQ-Sections
   (Datensicherheit, Preise, Kontakt) etc.
   ================================================================== */
@media (max-width: 600px) {
  /* Home: Unterschied + Preise-Section Headlines links */
  .section .text-center.mg-bottom-56px,
  .v5-pricing .v5-pricing-text {
    text-align: left;
  }
  .section .text-center.mg-bottom-56px .nv-eyebrow {
    justify-content: flex-start;
  }
  /* FAQ-Sections (Datensicherheit, Preise, Kontakt) — der text-center.mg-bottom-40px wrap */
  .section .text-center.mg-bottom-40px {
    text-align: left;
  }
  .section .text-center.mg-bottom-40px .nv-eyebrow.center {
    justify-content: flex-start;
  }
  /* nv-eyebrow.center: dot + line linksbündig auf mobile */
  .nv-eyebrow.center {
    justify-content: flex-start;
  }
}
.v7-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--accent--primary-1);
  border-radius: 10px;
  padding: 10px;
}
.v7-badge img {
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 991px) {
  .v7-feature-card,
  .v7-feature-card:nth-child(4),
  .v7-feature-card:nth-child(5) {
    flex: 0 1 calc((100% - 26px) / 2);
  }
  /* Sicherheit (5te Card alleine in Reihe): 50% Breite, zentriert (wie Wanted-Card auf Über) */
  .v7-feature-card:nth-child(5):last-child {
    flex: 0 1 calc((100% - 26px) / 2);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 600px) {
  .v7-feature-card,
  .v7-feature-card:nth-child(4),
  .v7-feature-card:nth-child(5),
  .v7-feature-card:nth-child(5):last-child {
    flex: 1 1 100%;
    min-height: 320px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Sicherheit-Card: Badges-Grid statt Image */
.v6-story-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  box-shadow: none;
  background: transparent;
}
.v6-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--accent--primary-1);
  border-radius: 12px;
  padding: 16px;
}
.v6-badge img {
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ==================================================================
   MOBILE PADDING-PASS (User-Liste)
   28px L/R Innen-Padding für Cards/Sektionen auf Mobile (<=479px).
   NUR padding-left/right — andere Eigenschaften unverändert.
   ================================================================== */
@media (max-width: 479px) {
  /* 1. Home Hero (innerhalb der Hero-Box) */
  .section.hero-full .container-default {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* 2. Home "Der Unterschied" — beide Cards */
  .v2-vs-card {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 3. Home Preise — outer Card */
  .v5-pricing {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* 4. CTA-Banner — Content (nicht das Foto) */
  .cta-content {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* 5. Footer — Main Content */
  .mg-section.footer-v2 .container-default {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* 6/7/9/16. .card.testmonial-v1 — Quote-Card auf Funktion-Detail,
     Datensicherheit, Preise, Karriere (alle gleich) */
  .card.testmonial-v1 .inner-container {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 8. Preise alle Price-Cards (Gratis, Starter, Standard, Premium) */
  .nv-plan-card {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 10. Kontakt Formular */
  .kontakt-form-card {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 11. Kontakt "Direkt erreichen" Card */
  .kontakt-helpbox {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 12. News-Detail Hero */
  .section.hero.top-110px---bottom-90px .container-default {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 13. News-Detail "Mehr News" Section — Content */
  .section.pd-120px:has(.news-related-grid) .container-default {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* 14. Team-Detail Hero */
  .section.hero.top-bottom-78px .container-default {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 15. Karriere Hero */
  .section.hero.top-bottom-280px.bg-career .container-default {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 17. Karriere "Offene Positionen" */
  #offene-positionen .container-default {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 18. Karriere-Detail Hero */
  .section.hero.top-115px---bottom-69px .container-default {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 21. Preise Hero */
  .section.hero.top-138px---bottom-126px .container-default {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 19. Karriere-Detail "Bewirb dich hier" Card */
  .card.career-sidebar {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* 20. Karriere-Detail Bewerbung Formular */
  .application-form-card {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* ZUSATZ: Vergleichstabelle — static padding oben (matching unten 42px) */
  [data-comparison-table].card.plan-com {
    padding-top: 42px;
  }

  /* ZUSATZ: News-Detail "Mehr News" — "Alle News"-Button full-width */
  .section.pd-120px:has(.news-related-grid) .title-and-btn .nv-btn {
    width: 100%;
  }
}

/* ==================================================================
   28px L/R Padding auf ALLEN Breakpoints (User-Override für die wichtigsten
   Section-Cards und Content-Container, damit Inhalte überall denselben
   Innenabstand zur Card-Kante haben).
   Ergänzt das mobile-only 28px-Pattern oben, wirkt jetzt auf 320px–4K.
   ================================================================== */
/* Home Hero (Inhalt innerhalb der Hero-Card) */
.section.hero-full .container-default,
/* Home Funktionen — jede V7-Card einzeln */
.v7-feature-card,
/* Home "Der Unterschied" — beide Cards */
.v2-vs-card,
/* Home Preise — outer Card (grün) */
.v5-pricing,
/* CTA-Banner — Content-Block (Headline + Button, nicht das Foto) */
.cta-content,
/* Footer — Main Content */
.mg-section.footer-v2 .container-default,
/* Footer Bottom-Bar — Legal/Copyright */
.footer-bottom-wrapper .container-default,
/* Testimonial-Card (Funktion-Detail, Datensicherheit "Unser Versprechen",
   Preise "Wir revolutionieren", Karriere "Gemeinsam stark").
   Direct-Child > damit das innere inner-container._400px (Headline-Wrapper)
   KEIN zusätzliches Padding bekommt → doppelter L/R-Abstand sonst. */
.card.testmonial-v1 > .inner-container,
/* Preise Hero */
.section.hero.top-138px---bottom-126px .container-default,
/* Preise Plan-Cards (Gratis, Starter, Standard, Premium) */
.nv-plan-card,
/* News "Hinterlasse eine Rezension" Banner */
.news-review-banner .container-default,
/* Karriere Hero */
.section.hero.top-bottom-280px.bg-career .container-default,
/* Karriere Offene Positionen — graue outer Card */
#offene-positionen .container-default,
/* Karriere-Detail Hero */
.section.hero.top-115px---bottom-69px .container-default,
/* News-Detail "Mehr News" — graue Card */
.section.pd-120px:has(.news-related-grid) .container-default {
  padding-left: 28px !important;
  padding-right: 28px !important;
}