@media screen and (max-width: 780px) {
  .blade.second > .elementor-container {
    display: flex;
    flex-direction: column;
  }
}
.blade.second > .elementor-container .elementor-column {
  cursor: pointer;
}
@media screen and (max-width: 780px) {
  .blade.second > .elementor-container .elementor-column {
    flex: 1;
  }
}
@media screen and (max-width: 780px) {
  .blade.second > .elementor-container .elementor-column > .elementor-widget-wrap {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 780px) {
  .blade > .elementor-container {
    min-height: calc(100vh - 110px - 80px) !important;
  }
}

@media screen and (max-width: 1660px) {
  .no-padding {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}
@media screen and (max-width: 1280px) {
  .no-padding {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media screen and (max-width: 780px) {
  .no-padding {
    padding: 0 !important;
  }
}

.homepage-blocks {
  height: calc(50vh - 155px);
  transition: transform .4s ease;   /* vorher: transition: 0.5s; */
}
@media screen and (max-width: 1660px) {
  .homepage-blocks {
    padding: 15px !important;
  }
}
@media screen and (max-width: 1280px) {
  .homepage-blocks {
    padding: 10px !important;
  }
}
@media screen and (max-width: 780px) {
  .homepage-blocks {
    width: 100% !important;
    padding: 0 !important;
    height: auto;
    margin: 2px 0;
    min-height: 170px;
  }
}
.homepage-blocks:hover {
  transform: scale(1.025);
}
@media screen and (max-width: 780px) {
  .homepage-blocks:hover {
    transform: none;
  }
}
.homepage-blocks > .elementor-widget-wrap {
  cursor: pointer;
}
.homepage-blocks .elementor-heading-title {
  font-size: 48px !important;
}
@media screen and (max-width: 1660px) {
  .homepage-blocks .elementor-heading-title {
    font-size: 34px !important;
  }
}
@media screen and (max-width: 1280px) {
  .homepage-blocks .elementor-heading-title {
    font-size: 22px !important;
  }
}
@media screen and (max-width: 780px) {
  .homepage-blocks .elementor-heading-title {
    font-size: 28px !important;
    padding: 15px;
  }
}
.homepage-blocks .elementor-element-populated {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
@media screen and (max-width: 780px) {
  .homepage-blocks .elementor-element-populated {
    padding: 0 !important;
  }
}
@media screen and (max-width: 780px) {
  .homepage-blocks .width-100 {
    width: 100% !important;
    padding: 20px;
  }
}

.subscribe-box {
  padding: 90px 85px;
  background: #03A9BE;
  border-radius: 32px;
  margin-bottom: 95px;
}
@media screen and (max-width: 1660px) {
  .subscribe-box {
    padding: 60px 35px;
    margin-bottom: 65px;
  }
}
@media screen and (max-width: 1280px) {
  .subscribe-box {
    padding: 40px 25px;
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 780px) {
  .subscribe-box {
    padding: 20px 20px 10px 20px;
    margin-bottom: 40px;
  }
}
.subscribe-box h2 {
  font-size: 42px;
  font-weight: bold;
}
@media screen and (max-width: 1660px) {
  .subscribe-box h2 {
    font-size: 36px;
  }
}
@media screen and (max-width: 1280px) {
  .subscribe-box h2 {
    font-size: 28px;
  }
}
@media screen and (max-width: 780px) {
  .subscribe-box h2 {
    font-size: 24px;
  }
}
.subscribe-box .sib-form {
  padding: 0 !important;
}
.subscribe-box #sib-container {
  background: transparent;
  padding: 0 !important;
}
.subscribe-box #sib-container form {
  align-items: center;
}
.subscribe-box #sib-container form img {
  position: absolute;
  top: 32px;
  transform: translateY(-50%);
  left: 24px;
  height: 50%;
  width: auto;
  z-index: 1;
  max-width: 31.5px;
}
@media screen and (max-width: 780px) {
  .subscribe-box #sib-container form img {
    width: auto !important;
    height: 20px;
    left: 16px;
  }
}
.subscribe-box #sib-container form .entry__field {
  border-radius: 12px;
  border-color: unset;
}
.subscribe-box #sib-container form .sib-form-block {
  padding: 0;
}
.subscribe-box #sib-container form .entry__error {
  color: #ffffff;
  line-height: 1;
}
.subscribe-box #sib-container form input {
  height: 52px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px !important;
  font-size: 20px;
  color: #000;
  padding-left: 77px;
  width: 380px;
}
@media screen and (max-width: 1660px) {
  .subscribe-box #sib-container form input {
    width: 280px;
  }
}
@media screen and (max-width: 1280px) {
  .subscribe-box #sib-container form input {
    width: 180px;
  }
}
@media screen and (max-width: 780px) {
  .subscribe-box #sib-container form input {
    width: 100%;
    padding-left: 53px;
    font-size: 16px;
  }
}
.subscribe-box #sib-container form button {
  height: 52px;
  background: #03A9BE;
  color: #fff;
  border: 1px solid #fff;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  border-radius: 12px;
}
.subscribe-box #sib-container form button:hover {
  background: white;
  color: #03A9BE;
}
.subscribe-box #sib-container input:-ms-input-placeholder {
  text-align: left;
  color: #000;
}
.subscribe-box #sib-container input::placeholder {
  text-align: left;
  font-family: "Helvetica", sans-serif;
  color: #000;
}
.subscribe-box #sib-container textarea::placeholder {
  text-align: left;
  font-family: "Helvetica", sans-serif;
  color: #000;
}
.subscribe-box form img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 24px;
  height: 50%;
  width: auto;
  z-index: 1;
}
@media screen and (max-width: 780px) {
  .subscribe-box form img {
    top: 19px;
    width: auto !important;
    height: 20px;
    left: 16px;
  }
}
.subscribe-box form .form-control {
  color: rgba(0, 0, 0, 0.6);
  font-size: 20px;
  margin-right: 30px;
  padding-left: 73px;
  width: 480px;
}
@media screen and (max-width: 1660px) {
  .subscribe-box form .form-control {
    width: 360px;
  }
}
@media screen and (max-width: 1280px) {
  .subscribe-box form .form-control {
    width: 280px;
  }
}
@media screen and (max-width: 780px) {
  .subscribe-box form .form-control {
    width: 100%;
    padding-left: 53px;
    font-size: 16px;
  }
}
.subscribe-box form .btn {
  flex: 0;
}

.check-vat-status {
  display: inline-block;
  margin-top: 12px;
}
.check-vat-status img {
  top: 55px;
}
@media screen and (max-width: 1660px) {
  .check-vat-status img {
    top: 44px;
  }
}
@media screen and (max-width: 1280px) {
  .check-vat-status img {
    top: 33px;
  }
}
@media screen and (max-width: 780px) {
  .check-vat-status img {
    top: 22px;
  }
}
.check-vat-status.vat-valid {
  display: none;
}
.check-vat-status.vat-valid img {
  position: absolute;
  right: 0;
  margin-left: -25px;
  filter: invert(54%) sepia(83%) saturate(3090%) hue-rotate(151deg) brightness(93%) contrast(98%);
}
.check-vat-status.vat-nonvalid {
  display: none;
}
.check-vat-status.vat-nonvalid img {
  position: absolute;
  right: 0;
  margin-left: -25px;
  filter: invert(52%) sepia(60%) saturate(4611%) hue-rotate(332deg) brightness(93%) contrast(96%);
}

footer.site-footer {
  background-color: #202530;
  padding-top: 40px;
  padding-bottom: 40px;
  z-index: 30;
  position: relative;
}
@media screen and (max-width: 1660px) {
  footer.site-footer {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
footer.site-footer .container .main-row {
  padding-bottom: 130px;
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .main-row {
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .main-row {
    padding-bottom: 75px;
  }
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .main-row {
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .main-row .col {
    margin-bottom: 40px;
  }
  footer.site-footer .container .main-row .col:last-child {
    margin-bottom: 0;
  }
}
footer.site-footer .container .main-row .col .social,
footer.site-footer .container .main-row .col h4 {
  margin-bottom: 45px;
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .main-row .col .social,
footer.site-footer .container .main-row .col h4 {
    margin-bottom: 35px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .main-row .col .social,
footer.site-footer .container .main-row .col h4 {
    margin-bottom: 25px;
  }
}
footer.site-footer .container .main-row .col .social .link {
  margin-bottom: 0;
}
footer.site-footer .container .main-row .col .social .link img {
  filter: brightness(0) invert(1);
}
footer.site-footer .container .main-row .col .social .link:hover img {
  filter: none;
}
footer.site-footer .container .main-row .col p {
  margin-bottom: 20px;
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .main-row .col p {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .main-row .col p {
    margin-bottom: 10px;
  }
}
footer.site-footer .container .main-row .col p:last-child {
  margin-bottom: 0;
}
footer.site-footer .container .main-row .col a {
  display: block;
  margin-bottom: 25px;
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .main-row .col a {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .main-row .col a {
    margin-bottom: 15px;
  }
}
footer.site-footer .container .main-row .col a:last-child {
  margin-bottom: 0px;
}
footer.site-footer .container .main-row .col a:hover {
  color: #03A9BE;
}
footer.site-footer .container .main-row .col p,
footer.site-footer .container .main-row .col a {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .main-row .col p,
footer.site-footer .container .main-row .col a {
    font-size: 16px;
  }
}
@media screen and (max-width: 1366px) {
  footer.site-footer .container .main-row .col p,
footer.site-footer .container .main-row .col a {
    font-size: 15px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .main-row .col p,
footer.site-footer .container .main-row .col a {
    font-size: 14px;
  }
}
footer.site-footer .container .main-row .col.contact-col a {
  color: #03A9BE;
}
footer.site-footer .container .main-row .col.contact-col a:hover {
  text-decoration: underline;
}
footer.site-footer .container .bottom-row {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  padding-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .bottom-row {
    font-size: 16px;
    padding-top: 32px;
  }
}
@media screen and (max-width: 1366px) {
  footer.site-footer .container .bottom-row {
    font-size: 15px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .bottom-row {
    font-size: 14px;
    padding-top: 22px;
  }
}
@media screen and (max-width: 1024px) {
  footer.site-footer .container .bottom-row {
    flex-direction: column;
  }
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .bottom-row {
    align-items: flex-start;
  }
}
@media screen and (max-width: 1024px) {
  footer.site-footer .container .bottom-row .row-item {
    margin-bottom: 10px;
  }
  footer.site-footer .container .bottom-row .row-item:last-child {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .bottom-row .row-item {
    margin-bottom: 30px;
  }
  footer.site-footer .container .bottom-row .row-item:last-child {
    margin-bottom: 0;
  }
}
footer.site-footer .container .bottom-row .row-item.menu-wrapper {
  min-width: 620px;
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .bottom-row .row-item.menu-wrapper {
    min-width: 0;
  }
}
footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu {
    flex-direction: column;
  }
}
footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu .menu-item {
  position: relative;
  padding-right: 15px;
  margin-right: 10px;
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu .menu-item {
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu .menu-item:after {
  content: "|";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media screen and (max-width: 780px) {
  footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu .menu-item:after {
    content: "";
  }
}
footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu .menu-item:last-child {
  padding-right: 0;
  margin-right: 0;
}
footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu .menu-item:last-child:after {
  content: "";
}
footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu .menu-item a:hover {
  color: #03A9BE;
}
footer.site-footer .container .bottom-row .row-item.logos-wrapper div {
  margin-right: 12px;
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .bottom-row .row-item.logos-wrapper div {
    margin-right: 10px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .bottom-row .row-item.logos-wrapper div {
    margin-right: 8px;
  }
}
footer.site-footer .container .bottom-row .row-item.logos-wrapper div:last-child {
  margin-right: 0;
}
footer.site-footer .container .bottom-row .row-item.logos-wrapper img {
  display: block;
  height: auto;
}
@media screen and (max-width: 1660px) {
  footer.site-footer .container .bottom-row .row-item.logos-wrapper img {
    max-width: 59px;
  }
}
@media screen and (max-width: 1280px) {
  footer.site-footer .container .bottom-row .row-item.logos-wrapper img {
    max-width: 49px;
  }
}

.check-email-verification,
.popup-wrapper {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.check-email-verification.active,
.popup-wrapper.active {
  display: block;
}
.check-email-verification .inner,
.check-email-verification .popup,
.popup-wrapper .inner,
.popup-wrapper .popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 630px;
  padding: 60px 50px 50px 50px;
  background: #202530;
  box-shadow: none;
  border-radius: 0;
}
.check-email-verification .inner .close,
.check-email-verification .inner .popup-close,
.check-email-verification .popup .close,
.check-email-verification .popup .popup-close,
.popup-wrapper .inner .close,
.popup-wrapper .inner .popup-close,
.popup-wrapper .popup .close,
.popup-wrapper .popup .popup-close {
  position: absolute;
  top: 35px;
  right: 42px;
  cursor: pointer;
}
.check-email-verification .inner .close,
.check-email-verification .popup .close,
.popup-wrapper .inner .close,
.popup-wrapper .popup .close {
  width: 22px;
  height: 22px;
  background: url(./img/icon-popup-close.svg) 50% 50% no-repeat;
}
.check-email-verification .inner .close i,
.check-email-verification .popup .close i,
.popup-wrapper .inner .close i,
.popup-wrapper .popup .close i {
  display: none;
}
.check-email-verification .inner .popup-icon,
.check-email-verification .popup .popup-icon,
.popup-wrapper .inner .popup-icon,
.popup-wrapper .popup .popup-icon {
  margin-bottom: 25px;
}
.check-email-verification .inner .popup-icon img,
.check-email-verification .popup .popup-icon img,
.popup-wrapper .inner .popup-icon img,
.popup-wrapper .popup .popup-icon img {
  display: block;
  margin: 0 auto;
}
.check-email-verification .inner h3,
.check-email-verification .popup h3,
.popup-wrapper .inner h3,
.popup-wrapper .popup h3 {
  text-align: center;
  margin-bottom: 20px;
}
.check-email-verification .inner p,
.check-email-verification .popup p,
.popup-wrapper .inner p,
.popup-wrapper .popup p {
  text-align: center;
  margin-bottom: 42px;
}
.check-email-verification .inner p > a,
.check-email-verification .popup p > a,
.popup-wrapper .inner p > a,
.popup-wrapper .popup p > a {
  color: #03A9BE;
}
.check-email-verification .inner .btn-wrapper,
.check-email-verification .popup .btn-wrapper,
.popup-wrapper .inner .btn-wrapper,
.popup-wrapper .popup .btn-wrapper {
  display: flex;
  justify-content: center;
}
.check-email-verification .inner .btn-wrapper.register-button-wrapper,
.check-email-verification .popup .btn-wrapper.register-button-wrapper,
.popup-wrapper .inner .btn-wrapper.register-button-wrapper,
.popup-wrapper .popup .btn-wrapper.register-button-wrapper {
  margin-bottom: 23.7px;
}
.check-email-verification .inner .btn-wrapper .btn,
.check-email-verification .popup .btn-wrapper .btn,
.popup-wrapper .inner .btn-wrapper .btn,
.popup-wrapper .popup .btn-wrapper .btn {
  display: inline-flex;
  width: auto;
}

.check-email-verification {
  display: block;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account {
  margin-top: 60px;
}
@media screen and (max-width: 1660px) {
  .woocommerce-account .woocommerce-MyAccount-content .edit-account {
    margin-top: 50px;
  }
}
@media screen and (max-width: 1280px) {
  .woocommerce-account .woocommerce-MyAccount-content .edit-account {
    margin-top: 40px;
  }
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-content .edit-account {
    margin-top: 30px;
  }
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account .btn {
  width: auto;
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account fieldset {
  margin-top: 80px;
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account fieldset h2 {
  margin-bottom: 0px;
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account-preview {
  margin-top: 60px;
}
@media screen and (max-width: 1660px) {
  .woocommerce-account .woocommerce-MyAccount-content .edit-account-preview {
    margin-top: 50px;
  }
}
@media screen and (max-width: 1280px) {
  .woocommerce-account .woocommerce-MyAccount-content .edit-account-preview {
    margin-top: 40px;
  }
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-content .edit-account-preview {
    margin-top: 30px;
  }
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account-preview b {
  display: block;
  font-weight: 500;
  font-size: 20px;
  font-family: "Poppins";
  line-height: 1.5;
  margin-bottom: 8px;
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account-preview .preview-group {
  margin-bottom: 40px;
}
.woocommerce-account .woocommerce-MyAccount-content .edit-account-preview .switch-edit-account {
  display: block;
  margin-left: auto;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
  display: block;
  font-weight: 500;
  font-size: 20px;
  font-family: "Poppins";
  line-height: 1.5;
  margin-bottom: 8px;
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-content .form-row label {
    font-size: 14px;
  }
}
.woocommerce-account .woocommerce-MyAccount-content mark {
  background-color: transparent;
}
.woocommerce-account .woocommerce-MyAccount-content a.button.alt:hover {
  background-color: #03A9BE;
  color: #FFFFFF;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row {
  padding: 30.5px 0;
  border-width: 1px 0;
  border-style: solid;
  border-color: #c1c1c1;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-featured-image {
  margin-right: 44.5px;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-featured-image img {
  min-width: 196px;
  max-width: 196px;
  min-height: 196px;
  max-height: 196px;
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-featured-image img {
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
  }
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row span.order-date {
  font-size: 16px;
  color: #c1c1c1;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-name {
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin: 7.5px 0 0 0;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-subtitle {
  font-size: 15px;
  color: #c1c1c1;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .toggle-description {
  display: inline-block;
  font-size: 15px;
  color: #c1c1c1;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  margin: 19.5px 0 34px 0;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .toggle-description {
    margin-bottom: 21px;
    display: inline-block;
  }
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .toggle-description::after {
  content: " ";
  background: url(img/arrow-down.svg) 50% 50% no-repeat;
  background-size: contain;
  width: 18px;
  height: 10px;
  position: absolute;
  top: 5px;
  right: -30px;
  z-index: 1;
  cursor: pointer;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .toggle-description.active::after {
  transform: rotate(180deg);
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .item-description {
  display: none;
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 34px;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .item-price {
  font-size: 20px;
  color: #fff;
  font-weight: 900;
  font-family: "Montserrat", sans-serif;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .item-price > span {
  font-size: 18px;
  color: #c1c1c1;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-right: 13px;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action {
  display: flex;
  flex-direction: column;
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action .view-invoice {
  font-size: 16px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  text-align: right;
  color: #c1c1c1;
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action .view-invoice {
    text-align: left;
  }
}
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action .button {
  min-width: 241px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 36.1px;
  text-align: center;
  border-radius: 12px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
  margin-bottom: 40px;
}
@media screen and (max-width: 1660px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1280px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 10px;
  }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
  }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  min-width: 150px;
  margin-right: 25px;
  padding: 5px 0px;
  font-size: 20px;
  font-weight: 600;
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    margin-bottom: 0px;
  }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
  border-bottom: 2px solid #03A9BE;
}
@media screen and (max-width: 780px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
    border-left: 2px solid #03A9BE;
    padding-left: 10px;
    border-bottom: none;
  }
}

.home-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px;
  background: #202530;
  z-index: 10;
}
@media screen and (max-width: 780px) {
  .home-player {
    height: 110px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    display: none;
  }
}
.home-player audio {
  display: none;
}
.home-player .thumb {
  margin-right: 25px;
}
@media screen and (max-width: 780px) {
  .home-player .thumb {
    display: none;
  }
}
.home-player .thumb img {
  display: block;
  width: 75px;
  min-width: 75px;
  height: auto;
  border-radius: 50%;
}
.home-player .meta h3 {
  font-size: 20px;
  margin-bottom: 2px;
}
@media screen and (max-width: 1280px) {
  .home-player .meta h3 {
    font-size: 18px;
  }
}
@media screen and (max-width: 780px) {
  .home-player .meta h3 {
    font-size: 16px;
  }
}
.home-player .meta span {
  display: block;
  color: #596675;
  font-size: 17px;
  margin-bottom: 2px;
}
.home-player .meta .product {
  display: block;
  font-size: 17px;
  color: #03A9BE;
  font-family: "Poppins", sans-serif;
}
@media screen and (max-width: 780px) {
  .home-player .meta .product {
    display: none;
  }
}
@media screen and (max-width: 780px) {
  .home-player .upper-mobile {
    order: 1;
    margin: 0;
    padding: 0;
    width: calc( 100% - 140px );
  }
}
.home-player .controls {
  margin-right: 100px;
  margin-left: 105px;
  padding-left: 65px;
  border-left: 1px solid #E4EBF2;
}
@media screen and (max-width: 1660px) {
  .home-player .controls {
    margin-right: 40px;
    margin-left: 40px;
    padding-left: 40px;
  }
}
@media screen and (max-width: 1280px) {
  .home-player .controls {
    margin-right: 20px;
    margin-left: 20px;
    padding-left: 20px;
  }
}
@media screen and (max-width: 780px) {
  .home-player .controls {
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 0px;
    border-left: none;
    order: 3;
  }
}
.home-player .controls a {
  margin-right: 62px;
}
@media screen and (max-width: 1660px) {
  .home-player .controls a {
    margin-right: 42px;
  }
}
@media screen and (max-width: 1280px) {
  .home-player .controls a {
    margin-right: 32px;
  }
}
@media screen and (max-width: 780px) {
  .home-player .controls a {
    margin-right: 12px;
  }
}
.home-player .controls a:last-child {
  margin-right: 0px;
}
.home-player .controls .prev img,
.home-player .controls .next img {
  width: auto;
  height: 25px;
  display: block;
}
@media screen and (max-width: 780px) {
  .home-player .controls .prev img,
.home-player .controls .next img {
    height: 20px;
  }
}
.home-player .controls .play img {
  width: 62px;
  height: 62px;
  display: block;
}
.home-player .controls .play img.playing {
  display: none;
}
@media screen and (max-width: 780px) {
  .home-player .controls .play img {
    width: 42px;
    height: 42px;
  }
}
@media screen and (max-width: 780px) {
  .home-player .track {
    order: 4;
  }
}
.home-player .track .bar {
  cursor: pointer;
  height: 3px;
  border-radius: 1px;
  background: #181C25;
  position: relative;
}
.home-player .track .bar .fill {
  height: 3px;
  border-radius: 1px;
  background: white;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.home-player .cta {
  margin-left: 130px;
}
@media screen and (max-width: 1660px) {
  .home-player .cta {
    margin-left: 60px;
  }
}
@media screen and (max-width: 1280px) {
  .home-player .cta {
    margin-left: 30px;
  }
}
@media screen and (max-width: 780px) {
  .home-player .cta {
    max-width: 140px;
    order: 2;
  }
}
.home-player .cta .volume {
  margin-right: 50px;
  position: relative;
}
@media screen and (max-width: 1660px) {
  .home-player .cta .volume {
    margin-right: 30px;
  }
}
@media screen and (max-width: 1280px) {
  .home-player .cta .volume {
    margin-right: 20px;
  }
}
@media screen and (max-width: 780px) {
  .home-player .cta .volume {
    display: none;
  }
}
.home-player .cta .volume img {
  cursor: pointer;
}
.home-player .cta .volume:hover .inner {
  display: block;
}
.home-player .cta .volume .inner {
  position: absolute;
  bottom: 0;
  left: -23px;
  padding: 0px 20px;
  display: none;
}
.home-player .cta .volume .inner .slider {
  height: 220px;
  margin-bottom: 40px;
  background: #202530;
  width: 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
  padding: 10px 0px;
  position: relative;
}
.home-player .cta .volume .inner .slider input[type=range] {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: rotate(270deg);
  width: 200px;
  cursor: pointer;
  transform-origin: 0% 50%;
  height: 10px;
  -webkit-appearance: none;
  border-radius: 5px;
}
.home-player .cta .volume .inner .slider input[type=range]:focus {
  outline: none;
}
.home-player .cta .volume .inner .slider input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #FFFFFF;
  border-radius: 5px;
  border: 0px solid #000000;
}
.home-player .cta .volume .inner .slider input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #04828F;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}
.home-player .cta .volume .inner .slider input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FFFFFF;
}
.home-player .cta .volume .inner .slider input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #FFFFFF;
  border-radius: 5px;
  border: 0px solid #000000;
}
.home-player .cta .volume .inner .slider input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #04828F;
  cursor: pointer;
}
.home-player .cta .volume .inner .slider input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.home-player .cta .volume .inner .slider input[type=range]::-ms-fill-lower {
  background: #FFFFFF;
  border: 0px solid #000000;
  border-radius: 10px;
  box-shadow: 0px 0px 0px #000000;
}
.home-player .cta .volume .inner .slider input[type=range]::-ms-fill-upper {
  background: #FFFFFF;
  border: 0px solid #000000;
  border-radius: 10px;
  box-shadow: 0px 0px 0px #000000;
}
.home-player .cta .volume .inner .slider input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #04828F;
  cursor: pointer;
}
.home-player .cta .volume .inner .slider input[type=range]:focus::-ms-fill-lower {
  background: #FFFFFF;
}
.home-player .cta .volume .inner .slider input[type=range]:focus::-ms-fill-upper {
  background: #FFFFFF;
}
.home-player .cta .btn {
  box-shadow: 0 0 30px #04828F;
}
.home-player.playing .controls .play img.playing {
  display: block;
}
.home-player.playing .controls .play img.stopped {
  display: none;
}

.woocommerce-input-wrapper .select2 {
  width: 100% !important;
}

.select2-dropdown {
  background: #202530;
  border-color: #fff;
}

.select2-search--dropdown {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.select2-results__option--highlighted[data-selected], .select2-container--default .select2-results__option[data-selected=true] {
  background-color: #03A9BE !important;
}

.select2-results__options::-webkit-scrollbar {
  width: 16px;
  background-clip: padding-box;
  display: none;
}
.select2-results__options::-webkit-scrollbar-track {
  background-color: #ddd;
  height: 8px;
  background-clip: padding-box;
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
}
.select2-results__options::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: #03A9BE;
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
}
.select2-results__options::-webkit-scrollbar-button {
  display: none;
}

.select2-selection--single .select2-selection__rendered {
  color: #fff !important;
}

.select2-container--open .select2-dropdown--below, .select2-container--open .select2-dropdown--above {
  border: 1px solid;
  border-radius: 0;
}

.rich-text.elementor-element > .elementor-widget-container > *,
.rich-text:not(.elementor-element) > * {
  word-break: break-word;
  margin-bottom: 1em;
}
.rich-text.elementor-element > .elementor-widget-container > *:last-child,
.rich-text:not(.elementor-element) > *:last-child {
  margin-bottom: 0;
}

.rich-text h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}
@media screen and (max-width: 1280px) {
  .rich-text h2 {
    font-size: 20px;
  }
}
@media screen and (max-width: 780px) {
  .rich-text h2 {
    font-size: 18px;
  }
}
.rich-text h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
@media screen and (max-width: 1280px) {
  .rich-text h3 {
    font-size: 18px;
  }
}
@media screen and (max-width: 780px) {
  .rich-text h3 {
    font-size: 16px;
  }
}
.rich-text ol,
.rich-text ul {
  margin-left: 0px;
}
.rich-text ol li,
.rich-text ul li {
  padding-left: 0px;
  margin-bottom: 5px;
}
.rich-text strong, .rich-text b {
  font-weight: bold;
}
.rich-text a {
  text-decoration: underline;
}

.wp-block-embed__wrapper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  width: 100%;
  margin-top: 20px;
}
.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 250;
}
.overlay.active {
  display: block;
}
.overlay .closer {
  position: fixed;
  right: 25px;
  top: 25px;
}
@media screen and (max-width: 1280px) {
  .overlay .closer {
    right: 15px;
    top: 15px;
  }
}
@media screen and (max-width: 780px) {
  .overlay .closer {
    right: 10px;
    top: 10px;
  }
}
.overlay#video-overlay .popup {
  padding: 0;
}
.overlay .popup {
  padding: 60px 40px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1550px;
  max-width: 70%;
  max-height: 95%;
  overflow: auto;
}
@media screen and (max-width: 1280px) {
  .overlay .popup {
    padding: 50px 30px;
  }
}
@media screen and (max-width: 780px) {
  .overlay .popup {
    padding: 20px 15px;
    max-width: 95%;
  }
}
.overlay .popup .video-wrapper {
  width: 100%;
  position: relative;
  height: 0;
  padding-top: 56.25%;
}
.overlay .popup .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#add_payment_method #payment ul.payment_methods li img, .woocommerce-cart #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img {
  height: 24px;
  width: auto;
}
/* ==========================================================================
   Checkout: Zahlungsarten untereinander auflisten
   --------------------------------------------------------------------------
   Diesen Block an das Ende von
   wp-content/themes/studiobro/additional.css
   anhaengen.

   Hintergrund: Die alten Regeln im style.css greifen auf
   "#payment .payment_methods li > label .checkmark" zu. Seit dem
   <div class="payment-label"> Wrapper ist das Label kein direktes Kind
   des <li> mehr, deshalb war der Radio-Punkt unsichtbar. Die Regeln unten
   ersetzen das und passen zur neuen Struktur in payment-method.php:

     li.wc_payment_method
       div.payment-label
         input.input-radio          <- echtes Radio (transparent, klickbar)
         span.checkmark             <- gestylter Punkt
         label[for=...]             <- nur Titel + Icon (Stripe darf das ueberschreiben)
       div.payment_box              <- Details der gewaehlten Methode
   ========================================================================== */

.woocommerce-checkout #payment ul.payment_methods {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child {
	border-bottom: 0;
}

/* --- Zeile mit Radio-Punkt, Titel und Icon --- */

.woocommerce-checkout #payment .payment-label {
	position: relative;
	margin: 0;
	padding: 18px 0 18px 28px; /* Platz links fuer den Radio-Punkt */
}

/* Echtes Radio: unsichtbar, liegt aber klickbar ueber dem Punkt */
.woocommerce-checkout #payment .payment-label input.input-radio {
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 0;
	padding: 0;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
}

/* Gestylter Radio-Punkt */
.woocommerce-checkout #payment .payment-label .checkmark {
	position: absolute;
	top: 50%;
	left: 0;
	width: 13px;
	height: 13px;
	margin-top: -7px;
	border: 1px solid #C1C1C1;
	border-radius: 50%;
	background-color: #202530;
	pointer-events: none; /* Klick geht an das Input darunter */
}

.woocommerce-checkout #payment .payment-label input.input-radio:checked ~ .checkmark {
	background-color: #03A9BE;
	border-color: #03A9BE;
}

.woocommerce-checkout #payment .payment-label label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.woocommerce-checkout #payment .payment-label label img {
	display: inline-block;
	max-height: 24px;
	width: auto;
	float: none;
	margin: 0;
}

/* --- Detailbereich der gewaehlten Methode, direkt darunter (Akkordeon) ---

   Die lange Selektorkette ist Absicht. In style.css steht:

     .woocommerce-page.woocommerce-checkout .woocommerce-checkout
     #payment .payment_methods li .payment_box {
         position: absolute; left: 100%; margin-left: 45px; overflow: hidden;
     }

   Das war die alte Zwei-Spalten-Mechanik: Solange die Liste per .flex-1 nur
   die halbe Breite hatte, landete die Box mit left:100% in der rechten Haelfte.
   Bei voller Breite schiebt dieselbe Regel die Box aus dem Layout heraus und
   ueber die Gesamtsumme.

   Diese Regel hat die Spezifitaet 0-1-5-1. Mit li.wc_payment_method statt li
   kommen wir auf 0-1-6-1 und gewinnen - ohne !important.

   Wirkt bewusst ohne Media Query, also auch mobil. Dort macht das Theme
   unterhalb seines Breakpoints ohnehin schon genau das Gleiche.            */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout #payment .payment_methods li.wc_payment_method .payment_box,
.woocommerce-page.woocommerce-cart .woocommerce-checkout #payment .payment_methods li.wc_payment_method .payment_box {
	position: relative;
	top: 0;
	left: 0;
	right: auto;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0 0 22px 28px;
	background: unset;
	color: inherit;

	/* overflow:hidden wuerde das Link-Dropdown und die Stripe-Overlays
	   abschneiden - die ragen absichtlich ueber die Box hinaus */
	overflow: visible;
}

/* Stripe-Formular soll die Breite nutzen, aber nie ueberlaufen */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout #payment .payment_methods li.wc_payment_method .payment_box .wc-upe-form,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout #payment .payment_methods li.wc_payment_method .payment_box .StripeElement,
.woocommerce-page.woocommerce-cart .woocommerce-checkout #payment .payment_methods li.wc_payment_method .payment_box .wc-upe-form,
.woocommerce-page.woocommerce-cart .woocommerce-checkout #payment .payment_methods li.wc_payment_method .payment_box .StripeElement {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-checkout #payment .payment_box::before,
.woocommerce-checkout #payment .payment_box::after {
	display: none; /* WooCommerce-Sprechblasenpfeil */
}
/* ==========================================================================
   Mein Konto -> Bestellungen: Download-Buttons
   --------------------------------------------------------------------------
   Diesen Block an das Ende von
   wp-content/themes/studiobro/additional.css
   anhaengen.

   Die Selektorkette entspricht bewusst der, die dort bereits fuer
   .download-table .download-row verwendet wird - damit die Regeln
   nebeneinander liegen und gleich stark sind.
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: #03A9BE;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action .button:focus {
	background-color: #02909F;
	color: #fff;
}

/* Abstand, sobald ein Produkt mehrere Dateien hat (Windows / Mac) */
.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-action .button + .button {
	margin-top: 12px;
}
/* ==========================================================================
   Produktseite -> Audio Demos: Trennstrich und Play-Button ausrichten
   --------------------------------------------------------------------------
   Diesen Block an das Ende von
   wp-content/themes/studiobro/additional.css
   anhaengen.

   Problem:
   .audio .upper-mobile (Cover + Titel) hat keine feste Breite und richtet
   sich nach der Laenge des Titels. Dadurch wandern der senkrechte Strich
   (border-left von .controls) und der Play-Button in jeder Zeile an eine
   andere Stelle.

   Loesung:
   .upper-mobile bekommt ab Tablet/Desktop eine feste Spaltenbreite. Die
   Breakpoints entsprechen denen, die im Theme bereits fuer .audio,
   .controls und .play verwendet werden (1660 / 1280 / 780).
   Unter 780px bleibt alles unveraendert, dort stapelt .break-mobile.
   ========================================================================== */

@media screen and (min-width: 781px) {

	.woocommerce-page.single-product .product-extra.extra-audio .audios .audio .upper-mobile {
		flex: 0 0 360px;
		width: 360px;
		min-width: 0;
	}

	/* Damit lange Titel umbrechen statt die Spalte aufzuziehen */
	.woocommerce-page.single-product .product-extra.extra-audio .audios .audio .meta {
		min-width: 0;
		overflow-wrap: break-word;
	}
}

@media screen and (min-width: 781px) and (max-width: 1660px) {

	.woocommerce-page.single-product .product-extra.extra-audio .audios .audio .upper-mobile {
		flex-basis: 320px;
		width: 320px;
	}
}

@media screen and (min-width: 781px) and (max-width: 1280px) {

	.woocommerce-page.single-product .product-extra.extra-audio .audios .audio .upper-mobile {
		flex-basis: 270px;
		width: 270px;
	}
}

/* Optional: falls ein Produkt sehr lange Titel hat und der Umbruch auf zwei
   Zeilen stoert, stattdessen einzeilig mit "..." abschneiden. Dann diesen
   Block zusaetzlich aktivieren:

@media screen and (min-width: 781px) {

	.woocommerce-page.single-product .product-extra.extra-audio .audios .audio .meta h3,
	.woocommerce-page.single-product .product-extra.extra-audio .audios .audio .meta span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
*/
/* --- Fix Kachel-Flackern, 17.08.2026 --- */

/* Elementor setzt für die inneren Sektionen eine transition ohne transform */
.elementor-387 .elementor-element.homepage-blocks {
  transition: transform .4s ease;
}

/* Doppelte Skalierung auflösen: Klasse hängt an Spalte UND Sektion */
.elementor-column.homepage-blocks:hover {
  transform: none;
}

/* Überscan für cover + eigene Compositor-Ebene */
.elementor-387 .elementor-element.elementor-section.homepage-blocks {
  background-origin: border-box;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
}
.post.flex.break-mobile > div > a > img {
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 10px 10px 15px hsla(0,0%,0%,0.5);
  border-radius: 20px;}
/* studiobro: fehlende schliessende Klammer der Regel darueber ergaenzt (2026-08-27).
   Die Datei endete ohne sie; Browser schliessen das stillschweigend, ein
   angehaengter Block waere aber in diese Regel gerutscht. */

/* ==========================================================================
   studiobro — Kasse, Paket 1.1–1.2   (Fassung 5, 28.08.2026)
   --------------------------------------------------------------------------
   Nachgebaut nach eraformaudio.com, mit den Farben des Shops.
   Masse am 28.08. im Browser direkt an der Vorlage abgenommen:

     Aufteilung        53,5 / 46,5
     Felder            49px hoch, 12px Radius, 1px #DEDEDE, 14px Schrift
     Überschriften     20px, Gewicht 600
     Reihenfolge       Express -> Kontakt -> Zahlung -> Rechnungsdetails

   Der Inhalt bleibt in der gewohnten Containerbreite; die randlose Variante
   wurde verworfen.

   --------------------------------------------------------------------------
   ZUR SPEZIFITÄT — bitte beim Erweitern beachten

   style.css benutzt für den Checkout durchgehend den Präfix

     .woocommerce-page.woocommerce-checkout .woocommerce-checkout

   also DREI Klassen, teils zusätzlich mit einer ID dahinter. Eine Regel wie
   `#place_order { display:block }` verliert deshalb gegen
   `…checkout #place_order { display:none }` — die ID ist gleich, aber die
   Gegenseite hat drei Klassen mehr. Dass additional.css später geladen wird,
   ändert daran nichts; die Ladereihenfolge entscheidet nur bei GLEICHER
   Spezifität.

   Deshalb trägt hier jede Regel, die etwas aus style.css aufhebt, denselben
   Präfix plus `.sb-checkout__grid` — vier Klassen, also immer eine mehr.
   Beim Ergänzen neuer Regeln diesen Präfix mitführen.
   --------------------------------------------------------------------------

   Rückweg: Diesen Block bis zum Beginn des Blocks "studiobro — Warenkorb,
   Paket 1.4" entfernen. Seit Fassung 10 endet die Datei nicht mehr hier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Zwei Spalten in der gewohnten Containerbreite
   -------------------------------------------------------------------------- */

/* ZWEI AENDERUNGEN GEGENUEBER FASSUNG 7, beide mit Grund:

   1. KEIN overflow: hidden MEHR. Das war der Grund, warum die
      Bestelluebersicht rechts beim Scrollen nicht stehenblieb: position:
      sticky wirkt nicht, wenn irgendein Vorfahre overflow != visible hat.
      Im Browser nachgesehen — .sb-checkout__grid war der einzige Blockierer.
      Gebraucht wurde overflow:hidden nur, um die abgerundeten Ecken des
      Rasters zu beschneiden. Die Rundung sitzt jetzt an der weissen Spalte
      selbst, also faellt beides zusammen weg.

   2. ABSTAND NACH OBEN. Die Kopfzeile ist position: fixed und 171 px hoch
      (gemessen bei 1440 px), der Inhalt begann aber bei 40 px — 131 px lagen
      unter der Kopfzeile. Gemessene Kopfzeilenhoehen:
        ab 1281 px   171     ->  Abstand 211
        bis 1280 px  118     ->  Abstand 158
        bis 1100 px  108     ->  Abstand 148
        bis  600 px   80     ->  Abstand 120
      Jeweils rund 40 px Luft darunter. */
.sb-checkout__grid {
  display: grid;
  grid-template-columns: 53.5% 46.5%;
  gap: 0;
  /* stretch, nicht start: Die rechte Spalte muss so hoch sein wie die Zeile,
     sonst hat die Uebersicht darin keinen Weg zum Mitwandern und position:
     sticky wirkt nur ein paar Pixel weit. */
  align-items: stretch;
  /* Der untere Abstand steht seit dem 29.08.2026 nicht mehr hier, sondern als
     padding-bottom an .woocommerce-page .woocommerce — er gilt damit für alle
     WooCommerce-Seiten gleich, nicht nur für die Kasse. Siehe Abschnitt 1 der
     Nacharbeiten 1.9. */
  margin: 211px 0 0;
}

@media screen and (max-width: 1280px) {
  .sb-checkout__grid { margin-top: 158px; }
}

/* Die weisse Spalte ist jetzt eine eigene Karte.

   Vorbild sind die Produktbilder im Shop, dort am 28.08.2026 gemessen:
     border-radius: 20px
     border: 1px solid rgba(255,255,255,0.07)
   Der Rahmen ist dort weiss mit 7 % Deckkraft — das funktioniert auf dem
   dunklen Seitengrund, waere auf Weiss aber unsichtbar. Deshalb hier
   stattdessen ein grauer Rahmen, wie bei den Eingabefeldern (#DEDEDE).

   ZUM SCHATTEN, damit es niemanden spaeter verwirrt: Die Produktbilder haben
   KEINEN. Auf der ganzen Shop-Seite steht kein einziger box-shadow. Der
   Wert unten ist deshalb gesetzt, nicht abgemessen — dezent gewaehlt, weil
   ein Schatten auf dem dunklen Grund ohnehin kaum traegt. Eine Zeile
   aendern, wenn er staerker oder weg soll.

   Die dunkle Spalte bekommt bewusst KEINE Rundung: ihr Hintergrund #202530
   ist exakt die Seitenhintergrundfarbe, sie ist also gar nicht zu sehen.
   Sichtbar ist nur die weisse Karte auf dunklem Grund. */
/* PAKET 1.6 (29.08.2026): Rahmen und Schatten kommen jetzt vom Kunden —
   dieselben Werte wie am Mini-Warenkorb-Panel in style.css.

   EIN HINWEIS, DER SPAETER SONST RAETSEL AUFGIBT: Der Rahmen ist weiss mit
   20 % Deckkraft, und die Karte darunter ist WEISS. Der Hintergrund einer Box
   laeuft standardmaessig bis unter den Rahmen (background-clip: border-box),
   der Rahmen liegt also auf Weiss und ist praktisch unsichtbar. Der vorherige
   graue Rahmen (#DEDEDE) war zu sehen. Wer ihn zurueck will, aendert genau
   diese eine Zeile.

   ZUM Z-INDEX: Der Schatten faellt 10 px nach rechts, also auf die dunkle
   Spalte. Beide Spalten sind Rasterfelder; ohne Zutun malt das spaetere
   Element (die rechte Spalte) ueber das fruehere, und der Schatten waere an
   der Trennlinie abgeschnitten. position: relative plus z-index: 2 hebt die
   Karte darueber. Die rechte Spalte braucht dafuer keinen eigenen Wert: Ihr
   klebender Innenteil ist zwar positioniert, hat aber z-index: auto und wird
   damit vor allem Positiven gemalt. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__main {
  background: #FFFFFF;
  color: #181C25;
  padding: 44px 40px 64px;
  display: flex;
  /* FASSUNG 105 (Vorgabe 16.09.2026): Auf breiten Bildschirmen steht der INHALT
     der weissen Karte mittig, nicht mehr an der Trennlinie. Die Karte selbst
     bleibt, wo sie ist. Wirkt nur, wenn die Karte breiter ist als ihr Inhalt
     (560 px + 80 px Innenabstand); darunter hat justify-content nichts zu
     verteilen, und alles steht wie bisher. Bis 900 px ist die Karte ohnehin
     display: block. Die Uebersicht rechts bleibt an der Trennlinie. */
  justify-content: center;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.20);
  border-radius: 20px;
  box-shadow: 10px 10px 15px hsla(0, 0%, 0%, 0.5);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside {
  background: #202530;
  color: #FFFFFF;
  padding: 44px 40px 64px;
}

/* Inhalt beider Spalten rückt an die Trennlinie, wie in der Vorlage. */
.sb-checkout__grid .sb-checkout__main > .sb-checkout__inner { width: 100%; max-width: 560px; }
/* Bleibt beim Scrollen stehen.

   ZWEI DINGE HABEN DAS BIS FASSUNG 7 VERHINDERT, beide im Browser gefunden:

   1. overflow: hidden am Raster. position: sticky wirkt nicht, wenn ein
      Vorfahre etwas anderes als visible hat. Ist dort entfernt.

   2. DER WICHTIGERE: Das Elternelement der klebenden Box war exakt so hoch
      wie sie selbst (305 px). Eine klebende Box wandert nur INNERHALB ihres
      Elternelements — bei gleicher Hoehe bleibt null Weg. Deshalb bekommt
      .sb-checkout__summary-body unten height: 100%, damit es die volle
      Spaltenhoehe einnimmt (gemessen 880 statt 305 px).

   ZUM ABSTAND NACH OBEN: Die Kopfzeile SCHRUMPFT beim Scrollen — 171 px
   oben, 106 px gescrollt (bei 1440 px). Massgeblich ist der gescrollte Wert,
   denn nur dann klebt hier ueberhaupt etwas. Gemessen:
     ab 1281 px   Kopfzeile gescrollt 106  ->  top 130
     bis 1280 px  Kopfzeile gescrollt  88  ->  top 112
   Jeweils 24 px Luft. */
.sb-checkout__grid .sb-checkout__aside .sb-checkout__inner {
  width: 100%;
  max-width: 480px;
  position: sticky;
  top: 130px;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__summary-body {
  height: 100%;
}

@media screen and (max-width: 1280px) {
  .sb-checkout__grid .sb-checkout__aside .sb-checkout__inner { top: 112px; }
}

@media screen and (max-width: 1100px) {
  .sb-checkout__grid { grid-template-columns: 55% 45%; margin-top: 148px; }
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__main,
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside { padding: 32px 24px 48px; }
}

@media screen and (max-width: 900px) {
  /* Gestapelt: Uebersicht oben, Formular darunter. Der Abstand nach oben
     haelt weiter die feste Kopfzeile frei (dort 108 px, bis 600 px 80 px). */
  /* Auch hier kein unterer Abstand mehr — sonst kämen die 80 px von
     .woocommerce-page .woocommerce noch obendrauf. */
  .sb-checkout__grid { display: flex; flex-direction: column; margin: 148px 0 0; }
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside { order: -1; padding: 0; }
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__main { padding: 28px 20px 56px; display: block; }
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside { border: 0; border-radius: 0; box-shadow: none; }
  .sb-checkout__grid .sb-checkout__main > .sb-checkout__inner { max-width: none; }
  .sb-checkout__grid .sb-checkout__aside .sb-checkout__inner { position: static; max-width: none; }
  /* Gestapelt wird nichts angeheftet, also auch die Hilfshoehe zuruecknehmen. */
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__summary-body { height: auto; }
}

@media screen and (max-width: 600px) {
  .sb-checkout__grid { margin-top: 120px; }
}

/* --------------------------------------------------------------------------
   2. Linke Spalte — helle Insel im dunklen Layout
   -------------------------------------------------------------------------- */

.sb-checkout__grid .sb-checkout__main,
.sb-checkout__grid .sb-checkout__main p,
.sb-checkout__grid .sb-checkout__main span,
.sb-checkout__grid .sb-checkout__main label,
.sb-checkout__grid .sb-checkout__main h2,
.sb-checkout__grid .sb-checkout__main h3,
.sb-checkout__grid .sb-checkout__main li,
.sb-checkout__grid .sb-checkout__main strong,
.sb-checkout__grid .sb-checkout__main div { color: #181C25; }

.sb-checkout__grid .sb-checkout__main a { color: #04828F; text-decoration: underline; text-underline-offset: 2px; }
.sb-checkout__grid .sb-checkout__main a:hover { color: #03A9BE; }

.sb-checkout__grid .sb-checkout__section { margin: 0 0 34px; }

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__heading,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .woocommerce-billing-fields h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 14px;
  color: #181C25;
}

/* Kopfzeile eines Abschnitts: Ueberschrift links, Anmelden-Link rechts.

   Im Vorbild steht rechts neben "Contact" ein "Sign in". Dort gemessen
   am 28.08.2026: 14 px, Gewicht 400, unterstrichen, Farbe #191F2F (bei uns
   #202530), rechtsbuendig am Rand der Inhaltsspalte, auf einer Grundlinie
   mit der Ueberschrift.

   Der Link erscheint nur fuer nicht angemeldete Besucher — form-checkout.php
   gibt ihn sonst gar nicht erst aus. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__section-head .sb-checkout__heading {
  margin: 0;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__signin {
  flex: 0 0 auto;
  font-family: "Poppins", "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #202530;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__signin:hover {
  color: #03A9BE;
}

/* Newsletter-Haken unter dem E-Mail-Feld */
.sb-checkout__grid .sb-checkout__optin { margin: 10px 0 0; padding: 0; }
/* VOLLER PRÄFIX ZWINGEND. Mit der kurzen Kette
     .sb-checkout__grid .sb-checkout__optin label      2 Klassen, 1 Element
   verliert die Regel gegen woocommerce-layout.css
     .woocommerce form .form-row label                 2 Klassen, 2 Elemente
   — gleich viele Klassen, aber ein Element mehr, und Elemente entscheiden bei
   Gleichstand. Folge: display fiel auf block zurueck, damit war align-items
   wirkungslos und die Beschriftung stand nicht mittig zum Kaestchen.
   Schon die dritte Stelle mit demselben Muster; der Praefix allein reicht
   nicht, die Kette muss auch die Elemente der Gegenseite aufwiegen. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__optin label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #4A5766;
  cursor: pointer;
}
/* Der Newsletter-Haken ist wieder ein KÄSTCHEN, nicht die Radio-Optik aus
   Fassung 8 — auf Wunsch vom 28.08. zurückgenommen. Das native Kästchen mit
   accent-color reicht dafür; es bleibt damit auch als Kästchen erkennbar,
   was bei einer Einwilligung die ehrlichere Darstellung ist.

   Die Beschriftung steht senkrecht mittig zum Kästchen (align-items: center
   an der Zeile darüber), nicht mehr oben bündig. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__optin input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: #03A9BE;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. Eingabefelder

   style.css gibt #customer_details Rahmen, 45px Innenabstand und width:71.7%,
   den Zeilen zusätzlich padding-top:44px.
   -------------------------------------------------------------------------- */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details {
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 100%;
  margin: 0;
  min-height: 0;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .col-1,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .col-2 {
  width: 100%; float: none; padding: 0;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details label { color: #181C25; }

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row {
  padding: 0;
  margin: 0 0 10px;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.form-row-first,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.form-row-last {
  width: calc(50% - 5px);
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row .input-text,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input[type="text"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input[type="tel"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input[type="email"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row select {
  background: #FFFFFF;
  color: #181C25;
  border: 1px solid #DEDEDE;
  border-radius: 12px;
  padding: 14px;
  height: 49px;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input::placeholder {
  color: #6B7887; opacity: 1;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input:focus,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row select:focus {
  border-color: #03A9BE;
  outline: 2px solid rgba(3, 169, 190, 0.25);
  outline-offset: 0;
}

/* Länderfeld über select2 */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .select2-selection {
  background: #FFFFFF;
  border: 1px solid #DEDEDE;
  border-radius: 12px;
  height: 49px;
  padding: 8px 6px;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .select2-selection__rendered {
  color: #181C25; line-height: 1.9; font-size: 14px;
}


/* --------------------------------------------------------------------------
   3b. Schwebende Beschriftungen im Feld   (Fassung 6, 28.08.2026)
   --------------------------------------------------------------------------
   Die Vorlage benutzt keine Platzhalter. Die Beschriftung steht IM Feld:
   bei leerem Feld mittig, sobald etwas darin steht oder das Feld den Fokus
   hat, rutscht sie nach oben und der Wert steht darunter.

   Am 28.08.2026 an eraformaudio.com gemessen (Oberkante der Schrift,
   gerechnet ab der Oberkante des Feldes):

                       leer        schwebend
     Beschriftung      10,9 px      7,9 px      12 px, #707070
     Wert                 —        21 px oben   14 px, Innenabstand unten 6
     Feld              49 px hoch, Radius 12 px, 1 px #DEDEDE
     Beschriftung links 11 px vom Feldrand

   Bei uns steht die Beschriftung 15 px vom Feldrand: unsere Felder haben
   14 px Innenabstand plus 1 px Rahmen, die Schrift beginnt also bei 15 px.
   Beschriftung und Wert stehen damit exakt untereinander — in der Vorlage
   ist es dasselbe Prinzip, nur mit 10 px Innenabstand.

   --------------------------------------------------------------------------
   ZWEI ENTWURFSENTSCHEIDUNGEN, DIE MAN KENNEN MUSS

   1. DER PLATZHALTER BLEIBT — DURCHSICHTIG.
      Er ist nicht mehr zum Lesen da, sondern als Schalter: Ob ein Feld leer
      ist, erkennt CSS nur über :placeholder-shown, und das greift nur, wenn
      überhaupt ein Platzhalter gesetzt ist. Das mu-plugin sorgt dafür, dass
      jedes Feld einen hat; hier wird er auf durchsichtig gestellt.

   2. DER SCHWEBENDE ZUSTAND IST DER NORMALFALL.
      Nicht andersherum. Die Regel mit :has() setzt die Beschriftung zurück
      in die Mitte, wenn das Feld leer und ohne Fokus ist. Das ist Absicht:
      Kennt ein Browser :has() nicht, stehen alle Beschriftungen oben und
      alle Werte darunter — lesbar und vollständig, nur ohne die Bewegung.
      Andersherum lägen Beschriftung und Wert übereinander, und das Feld
      wäre unbenutzbar. Die Regel fällt also in die harmlose Richtung aus.

   Die Beschriftung nimmt keine Klicks an (pointer-events: none); ein Klick
   geht durch sie hindurch an das Feld darunter.
   -------------------------------------------------------------------------- */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float {
  position: relative;
}

/* Die Beschriftung.

   HIER WIRD BEWUSST NUR AUF DIE ZEILE GEZIELT (.form-row.sb-float > label),
   nicht auf eine eigene Label-Klasse.

   Warum: In Fassung 6 hing diese Regel an .sb-float__label — einer Klasse,
   die das mu-plugin setzen sollte. Sie kam nie an, weil die Theme-functions.php
   die Label-Klassen erst beim Rendern über woocommerce_form_field_args setzt,
   also NACH unserem Filter auf woocommerce_checkout_fields. Ergebnis auf der
   Live-Seite: Die Regel griff nirgends, die Beschriftung blieb mit
   top:-180000px aus dem Bild geschoben — und weil der Platzhalter zugleich
   durchsichtig gestellt ist, standen die Rechnungsdetails komplett leer da.

   Die Zeilenklasse .sb-float kam dagegen an (sie stammt aus $field["class"],
   das der Filter zuverlässig erreicht). Deshalb hängt jetzt alles daran.
   Das mu-plugin räumt die Klasse screen-reader-text zusätzlich sauber weg,
   aber das Aussehen hängt nicht mehr davon ab.

   Die Ruecksetzer unten (top, height, width, margin, clip, clip-path,
   overflow, border) heben genau das auf, was Elementor und WordPress unter
   .screen-reader-text setzen. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float > label {
  position: absolute;
  top: 7px;
  left: 15px;
  right: 15px;
  z-index: 2;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  bottom: auto;
  border: 0;
  clip: auto;
  clip-path: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "Poppins", "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #707070;
  pointer-events: none;
  transition: top 0.12s ease;
}

/* Auch die <span> IN der Beschriftung müssen zurückgesetzt werden.

   Elementors common.css versteckt nicht nur .screen-reader-text selbst,
   sondern auch ".screen-reader-text span". Bei den freiwilligen Feldern
   steckt der Zusatz "(optional)" in genau so einem span — er blieb deshalb
   mit top:-10000em aus dem Bild geschoben, obwohl die Beschriftung daneben
   schon sichtbar war. Betroffen waren Stadt, Adresszusatz und Telefonnummer.

   Das mu-plugin nimmt die Klasse screen-reader-text inzwischen weg, dann
   greift Elementors Regel gar nicht mehr. Dieser Ruecksetzer bleibt trotzdem
   stehen: Er macht das Aussehen unabhaengig davon, ob der serverseitige
   Filter durchkommt — und genau daran ist es schon einmal gescheitert. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float > label span {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Der Stern der Pflichtfelder wird nicht angezeigt.

   Grund: Die Theme-functions.php trägt den Stern bei den meisten Feldern
   schon in den Feldnamen ein ("Name*"). Zusammen mit dem Stern, den
   WooCommerce anhängt, stünde dort "Name* *". Sichtbar bleibt damit genau
   das, was bisher im Platzhalter stand — keine Änderung für den Kunden.
   Für Vorleseprogramme bleibt die Kennzeichnung erhalten: die Felder tragen
   aria-required="true", das ist unabhängig vom Sternchen.
   (Dass der Stern doppelt im Feldnamen steckt, ist ein alter Fehler der
   functions.php. Er gehört zu Paket 2, wo die Feldnamen ohnehin angefasst
   werden.) */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float > label .required,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float > label abbr.required {
  display: none;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float > label .optional {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* ZWEI URSACHEN FÜR ZU GROSSE ABSTÄNDE ZWISCHEN DEN FELDERN — beide am
   28.08.2026 auf Staging gemessen, beide sassen NICHT dort, wo man sie
   vermutet:

   Die Feldzeile war 74 px hoch, obwohl das Feld nur 49 px misst. 25 px
   unsichtbarer Leerraum, dazu die 10 px Aussenabstand — sichtbar also 35 px
   statt 10.

   1. Die Eingabefelder tragen aus style.css ein margin-bottom: 25px.
      Das sind die fehlenden 25 px. Wird hier auf 0 gesetzt; den Abstand
      zwischen den Zeilen macht allein das margin der Zeile.

   2. Der Wrapper .woocommerce-input-wrapper ist display: inline. Ein Feld
      darin sitzt auf einer Textgrundlinie und schleppt den Platz fuer
      Unterlaengen mit. Der haengt an Schriftgroesse und Zeilenhoehe — und
      DIE aendern sich an den Bruchpunkten. Genau daher kam das Springen der
      Abstaende beim Verkleinern des Fensters. Mit display: block gibt es
      keine Zeilenbox mehr und der Abstand ist ueber alle Breiten gleich.

   Nachgemessen bei 1440, 1200 und 760 px: Zeilenhoehe ueberall 49, Abstand
   ueberall 10. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row .woocommerce-input-wrapper {
  display: block;
}

/* Der Wert rückt nach unten, damit die Beschriftung darüber Platz hat. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float .input-text,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float input[type="text"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float input[type="tel"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float input[type="email"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float input[type="password"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float select {
  padding: 21px 14px 6px;
  margin: 0;
}

/* Der Platzhalter ist nur noch Schalter, kein Text — siehe Kopf. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float input::placeholder {
  color: transparent;
  opacity: 1;
}

/* Leeres Feld ohne Fokus: Beschriftung in die Mitte, Wertabstand zurück. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float:has(input:placeholder-shown:not(:focus)) > label {
  top: 10px;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float input:placeholder-shown:not(:focus) {
  padding: 14px;
}

/* Länderfeld über select2.

   Es hat nie einen leeren Zustand, die Beschriftung schwebt also immer.
   Das echte <select> ist ausgeblendet; sichtbar ist der Nachbau von select2,
   und der braucht dieselben Abstände. */
/* Der select2-Behaelter ist display: inline-block und faellt damit in
   dieselbe Zeilenbox-Falle wie die Eingabefelder oben — das Landfeld war als
   einziges noch 74 statt 49 px hoch. Als Block gestellt stimmt es. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float .select2-container {
  display: block;
  height: 49px;
  margin: 0;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float .select2-container .selection {
  display: block;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float .select2-selection {
  height: 49px;
  padding: 21px 14px 6px;
  box-sizing: border-box;
}
/* Das !important ist hier leider nicht zu vermeiden — und es deckt einen
   alten Fehler zu, der schon vor dieser Fassung bestand:

     additional.css, Zeile 1357:
     .select2-selection--single .select2-selection__rendered { color: #fff !important }

   Diese Regel stammt aus der dunklen Seitengestaltung. In der weissen Spalte
   der Kasse schreibt sie "Deutschland" weiss auf weiss — das Land war schon
   in Fassung 5 unsichtbar, es ist nur niemandem aufgefallen, weil das Feld
   vorgefuellt ist und niemand hinsah. Gegen ein !important hilft nur ein
   !important; unseres gewinnt, weil es mehr Klassen mitbringt.

   Sauberer waere, Zeile 1357 auf die dunklen Bereiche einzugrenzen. Das
   beruehrt aber Warenkorb, Konto und Suchfilter und gehoert deshalb nicht in
   diese Lieferung. Im Browser geprueft: Land steht jetzt lesbar im Feld. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float .select2-selection__rendered {
  padding: 0;
  font-size: 14px;
  line-height: 16px;
  color: #181C25 !important;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float .select2-selection__arrow {
  top: 50%;
  right: 10px;
  height: 20px;
  margin-top: -10px;
}
/* --------------------------------------------------------------------------
   4. Zahlungsarten   (Fassung 6, 28.08.2026)
   --------------------------------------------------------------------------
   Am 28.08.2026 im Browser an eraformaudio.com abgenommen — keine Schätzung:

     Gruppe           1 px #DEDEDE, Radius 12 px, weiss
     Zeile            Innenabstand 14 px, mindestens 48 px hoch
     Zeile gewählt    Hintergrund #F5F6FA; erste Zeile oben Radius 11 px
                      (12 px der Gruppe minus 1 px Rahmen)
     Radio            18 × 18 px, rund, weisser Grund
                        nicht gewählt   1 px #DEDEDE
                        gewählt         6 px #191F2F  ->  bei uns #202530
                      15 px vom linken Rand der Gruppe
                      (Gruppe beginnt 230, Radio 245)
     Titel            14 px, Gewicht 600, 10 px Abstand zum Radio
                      (Radio endet 263, Titel beginnt 273)

   DER GEFÜLLTE PUNKT IST KEINE FÜLLFARBE, sondern ein 6 px dicker Rahmen in
   Dunkelblau auf weissem Grund, der die Mitte fast zulaufen lässt. Übrig
   bleibt ein 6 px grosser weisser Kern. Deshalb box-sizing: border-box —
   sonst wüchse die Schaltfläche beim Anklicken von 18 auf 30 px.

   ABGELÖST: der span.checkmark
   Bisher lag das echte Radio unsichtbar (opacity 0) über einem nachgebauten
   Punkt. Das war nötig, solange Rahmen und Füllung eines Radios nicht direkt
   gestaltbar waren. Mit appearance: none geht das heute unmittelbar, und die
   Vorlage macht es genau so. Der span bleibt im Markup — payment-method.php
   wird nicht angefasst, weil dort der Hinweis zum Stripe-Plugin dranhängt —,
   wird hier aber ausgeblendet. Ausserhalb der Kasse wirken die alten Regeln
   weiter.
   -------------------------------------------------------------------------- */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment { background: transparent; border-radius: 0; }

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods {
  border: 1px solid #DEDEDE;
  border-radius: 12px;
  padding: 0;
  margin: 0 0 24px;
  overflow: hidden;
  background: #FFFFFF;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method {
  /* border-top: 0 gegen die Doppellinie. style.css gibt der ersten Zeile ein
     eigenes border-top: 1px #C1C1C1 — das lag direkt unter dem Rahmen der
     Gruppe, sichtbar als zweiter grauer Strich. */
  border-top: 0;
  border-bottom: 1px solid #EDEDED;
  padding: 0;
  background: #FFFFFF;
  box-sizing: border-box;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method:last-child { border-bottom: 0; }

/* --- Die Zeile: Radio, Titel, Symbol --- */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method > .payment-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px;
  min-height: 48px;
  background: #FFFFFF;
  box-sizing: border-box;
}

/* Gewählte Zeile — das fehlende Grau.

   :has() ist hier nötig, weil die Zeile eingefärbt wird, das :checked aber am
   Kind hängt; Geschwister-Selektoren zeigen nur nach vorn. Sollte ein alter
   Browser :has() nicht kennen, bleibt die Zeile schlicht weiss — die Auswahl
   ist dann immer noch am Radio-Punkt zu erkennen. Die Regel fällt also
   gutmütig aus, sie verdeckt nichts. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method:has(> .payment-label input.input-radio:checked) > .payment-label {
  background: #F5F6FA;
}

/* Erste Zeile: oben mitrunden. Die Gruppe hat overflow: hidden, würde also
   ohnehin beschneiden — die Angabe hält den Rand aber sauber, falls das
   Beschneiden später einmal wegfällt (z. B. wegen eines Ausklappmenüs). */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method:first-child > .payment-label {
  border-radius: 11px 11px 0 0;
}

/* --- Radio-Schaltfläche --- */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment .payment-label input.input-radio {
  position: static;
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #DEDEDE;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-width 0.12s ease, border-color 0.12s ease;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment .payment-label input.input-radio:checked {
  border: 6px solid #202530;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment .payment-label input.input-radio:focus-visible {
  outline: 2px solid rgba(3, 169, 190, 0.45);
  outline-offset: 2px;
}

/* Der nachgebaute Punkt von früher — siehe Kopf dieses Abschnitts. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment .payment-label .checkmark { display: none; }

/* Das Symbol der Zahlungsart steht ganz rechts in der Zeile, wie im Vorbild.
   margin-left: auto schiebt es im flex-Label an den rechten Rand; es sitzt
   damit auf derselben Zeile wie der Titel, nicht mehr direkt dahinter.

   NICHT ZU ERREICHEN sind die bunten Kartensymbole IM Feld "Kartennummer"
   (Mastercard, Visa, Amex, Discover) und ein Schlosssymbol an deren Stelle:
   dieses Feld ist ein Stripe-Element in einem eigenen Rahmen (iframe). Was
   dort steht, bestimmt Stripe.

   ALLE DREI AUF EINER ACHSE (29.08.2026). Vorher kam jedes Symbol in seiner
   eigenen Grösse aus dem jeweiligen Plugin: Karte 38 x 24, Klarna 24 x 24,
   PayPal gar nichts. Rechtsbündig endeten sie zwar alle bei derselben Kante,
   optisch stand die Karte aber weiter links und wirkte kleiner, weil ihr
   Zeichen breit und dünn ist.

   Jetzt bekommt jedes Symbol dieselbe Schachtel — 64 x 28 px — und wird darin
   zentriert. Damit liegen alle auf derselben Mittelachse, unabhängig vom
   Seitenverhältnis. Nachgemessen am 29.08.2026: alle drei Zeilen 615 bis 679,
   Mitte 647.

   64 px statt der zunächst gewählten 48, weil in der Kartenzeile seit dem
   29.08.2026 ZWEI Zeichen stehen (Visa und Mastercard, gesetzt von
   studiobro-checkout.php). Beide sind kartenförmig (Seitenverhältnis 750:471)
   und stehen mit 30 x 19 px nebeneinander; die quadratischen Zeichen von
   PayPal und Klarna erscheinen 28 x 28 in derselben Schachtel.

   Das PayPal-Zeichen setzt ebenfalls studiobro-checkout.php: Das Plugin
   liefert es mit, gibt es hier aber nicht aus. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method > .payment-label label img {
  margin-left: auto;
  flex: 0 0 64px;
  width: 64px;
  height: 28px;
  max-width: 64px;
  max-height: 28px;
  object-fit: contain;
  object-position: center;
}

/* Mehrere Zeichen in einer Zeile (Visa und Mastercard). Dieselbe Schachtel wie
   ein einzelnes Zeichen, damit die Mittelachse gleich bleibt. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method > .payment-label label .sb-payment-icons {
  margin-left: auto;
  flex: 0 0 64px;
  width: 64px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Ohne diese Regel greift die allgemeine Bildregel darüber und macht jedes
   der beiden Zeichen 64 px breit. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method > .payment-label label .sb-payment-icons img {
  flex: 0 0 auto;
  width: 30px;
  height: 19px;
  max-width: 30px;
  max-height: 19px;
  margin: 0;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment .payment-label label {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: #181C25;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

/* Aufgeklappter Bereich der gewählten Methode.

   GLEICHES GRAU WIE DIE GEWÄHLTE ZEILE (#F5F6FA), auf Wunsch vom 28.08.
   Zeile und aufgeklappter Bereich bilden damit eine zusammenhängende Fläche.
   Das weicht bewusst vom Vorbild ab: Dort sitzt nur die Zeile auf Grau, die
   Kartenfelder darunter stehen auf Weiss.

   DIE LANGE KETTE IST PFLICHT. In Fassung 6 stand hier nur
   "…sb-checkout__grid #payment .payment_box" — eine ID und fünf Klassen.
   Weiter oben in dieser Datei steht aber schon
     …#payment .payment_methods li.wc_payment_method .payment_box
   mit einer ID, sechs Klassen und einem Element. Die gewinnt. Folge auf der
   Live-Seite: Innenabstand 0 0 22px 28px statt 0 14px 16px — das Feld
   "Kartennummer" war links um 28px eingerückt und rechts bündig, also
   sichtbar schief und nicht auf voller Breite. Mit ul.payment_methods und
   li.wc_payment_method in der Kette gewinnt jetzt diese Regel.

   Merksatz für den ganzen Block: Es genügt nicht, .sb-checkout__grid
   voranzustellen. Die Kette muss auch alles enthalten, was die Gegenseite
   hat — sonst entscheiden am Ende die Elementnamen. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method .payment_box {
  background: #F5F6FA;
  border-radius: 0;
  margin: 0;
  padding: 0 14px 16px;
  box-sizing: border-box;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment ul.payment_methods li.wc_payment_method .payment_box > * { max-width: 100%; }

/* Werbeblock "Bezahlen Sie 30 Tage spaeter mit PayPal" ausblenden.

   Der kommt vom Plugin WooCommerce PayPal Payments (div.ppcp-messages) und
   haengt an woocommerce_review_order_before_payment, landet also zwischen
   der Ueberschrift "Zahlung" und der Methodenliste. Im Vorbild steht dort
   nichts dergleichen.

   Sauberer waere, ihn im Plugin abzuschalten:
     WooCommerce -> Einstellungen -> Zahlungen -> PayPal -> "Pay Later"
     Messaging fuer die Kassenseite deaktivieren.
   Solange das nicht geschehen ist, nimmt ihn diese Regel aus dem Bild. Sie
   betrifft nur die Kasse; auf Produktseite und im Warenkorb bleibt der
   Hinweis stehen, falls er dort gewuenscht ist. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .ppcp-messages {
  display: none;
}

/* --------------------------------------------------------------------------
   4b. Kauf-Button — ganz unten, nach den Rechnungsdetails

   Der Button wird jetzt von form-checkout.php gerendert, nicht mehr von
   checkout/payment.php. Siehe Kopf von payment.php.

   ACHTUNG SPEZIFITÄT: style.css versteckt #place_order mit derselben ID und
   drei Klassen (.woocommerce-page.woocommerce-checkout .woocommerce-checkout
   #place_order { display:none }). Der volle Präfix plus .sb-checkout__grid
   ist deshalb zwingend — daran ist der Button schon zweimal verschwunden.

   Masse aus der Vorlage: 50 px hoch, Radius 12 px, 14 px / Gewicht 600.
   -------------------------------------------------------------------------- */

/* Abstand zu den Rechnungsdetails darüber.

   STAND BIS 29.08.2026 AUF 30px — zusammen mit dem Aussenabstand des
   Abschnitts darüber (34px) ergab das 64px und damit fast das Doppelte des
   Abstands, den die Abschnitte untereinander haben. Jetzt 0, der Abstand
   kommt allein aus dem Abschnitt darüber: 34px, dieselbe Rhythmik wie
   überall sonst in der Spalte. Nachgemessen am 29.08.2026. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__submit {
  margin: 0;
  padding: 0;
  clear: both;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #place_order {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 24px;
  /* margin-bottom: 0 ist Pflicht, nicht Kosmetik. style.css gibt unter
     @media (max-width: 1660px) JEDEM Knopf ein margin-bottom: -7px. Was
     unter dem Kauf-Button steht, rutscht dadurch 7px in ihn hinein — beim
     PayPal-Hinweis "Du bezahlst derzeit mit PayPal" stand die Schrift am
     29.08.2026 sichtbar IM Knopf. Dieselbe Theme-Regel erzeugt den zweiten
     Rollbalken im Mini-Warenkorb. */
  margin-bottom: 0;
  background: #03A9BE;
  color: #FFFFFF;
  border: 0;
  border-radius: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  /* 16px UND NICHT 14px WIE IN DER VORLAGE (Kundenwunsch vom 29.08.2026).
     eraform hat an dieser Stelle 14px/600 — das steht so in
     ~/Desktop/eraform-referenz.md, Abschnitt 5. Wer die Vorlage
     gegenhaelt und hier 16 findet, hat keinen Fehler gefunden: Der
     Kauf-Knopf ist der einzige Punkt, an dem wir bewusst groesser sind.
     Hoehe, Radius und Farbe bleiben unveraendert. */
  font-size: 16px;
  line-height: 50px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #place_order:hover { background: #04828F; }

/* Das Nonce-Feld, das in payment.php zurückgeblieben ist. Es ist unsichtbar,
   soll aber auch keinen Abstand erzeugen. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #payment .sb-checkout__nonce {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   5. Rechte Spalte — Bestellübersicht und Gutschein
   -------------------------------------------------------------------------- */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review {
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 100%;
  margin: 0 0 26px;
  min-height: 0;
  background: transparent;
  color: #FFFFFF;
  position: static;
}

.sb-checkout__grid #order_review,
.sb-checkout__grid #order_review th,
.sb-checkout__grid #order_review td,
.sb-checkout__grid #order_review span,
.sb-checkout__grid #order_review strong { color: #FFFFFF; }

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table {
  display: table;
  width: 100%;
  border: 0;
  margin: 0;
  background: transparent;
}
.sb-checkout__grid #order_review table.shop_table thead { display: none; }

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table th,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table td {
  border: 0;
  padding: 11px 0;
  background: transparent;
  font-size: 14px;
}

.sb-checkout__grid #order_review table.shop_table tfoot th,
.sb-checkout__grid #order_review table.shop_table tfoot td { border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* Gesamtsumme — groesser als die Zeilen darueber.

   DIESE REGEL HAT BIS FASSUNG 6.1 NICHT GEGRIFFEN. Sie stand hier mit
   20px/700, gemessen wurden aber 14px/700. Gegenspieler war keine fremde
   Datei, sondern eine allgemeinere Regel WEITER OBEN IN DIESER DATEI:
     …sb-checkout__grid #order_review table.shop_table th   (1 ID, 4 Klassen)
   gegen
     .sb-checkout__grid #order_review tfoot tr.order-total th  (1 ID, 2 Klassen)
   Klassen entscheiden vor Elementnamen, also gewann die allgemeinere.
   Die Kette traegt jetzt den vollen Praefix und table.shop_table mit.

   Werte am 28.08.2026 an eraformaudio.com abgenommen:
     Zeilen darueber   14 px / 400
     Gesamtsumme       18 px / 600
     Waehrungskuerzel  12 px / 400, gedaempft
   Deshalb 18/600 und nicht die frueher gedachten 20/700. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table tfoot tr.order-total td {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 18px;
  padding-top: 16px;
}

/* Steuerhinweis klein halten.

   ZWEI STOLPERSTELLEN, beide gemessen statt vermutet:
   1. style.css setzt ".includes_tax { font-size: 14px !important }". Gegen ein
      !important hilft nur ein !important — Spezifitaet allein reicht nicht,
      egal wie lang die Kette ist. Unsere Regel hatte 1 ID und 5 Klassen und
      verlor trotzdem.
   2. style.css trifft mit ".includes_tax *" zusaetzlich die Kinder einzeln,
      deshalb der Zusatz " *".

   Das ist nach dem Laenderfeld die zweite Stelle in dieser Datei, an der ein
   !important unvermeidbar ist. Beide Male stammt der Gegenspieler aus der
   dunklen Seitengestaltung in style.css. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .includes_tax {
  display: block;
  font-size: 12px !important;
  font-weight: 400;
  color: #C1C1C1;
  /* Ohne nowrap bricht "(inkl. 0,21 EUR MwSt.)" in der schmalen rechten
     Tabellenspalte auf zwei Zeilen um. Mit nowrap zieht die Tabelle die
     Spalte selbst breiter — im Browser geprueft: 27 statt 54 px hoch,
     kein Ueberlauf. */
  white-space: nowrap;
}

/* Nur Schriftgroesse an die Kinder weitergeben, NICHT display.

   Erst falsch gemacht und im Browser gesehen: Mit display:block auf " *"
   wurde aus "(inkl. 0,21 EUR MwSt.)" ein dreizeiliger Umbruch, weil jedes
   span der Betragsformatierung zu einem eigenen Block wurde. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .includes_tax * {
  font-size: 12px !important;
  font-weight: 400;
  color: #C1C1C1;
}

.sb-checkout__grid #order_review td.product-total,
.sb-checkout__grid #order_review tfoot td { text-align: right; }

/* Gutscheinfeld über der Zwischensumme   (29.08.2026)

   HIER STANDEN BIS ZUM 29.08.2026 REGELN AUF form.checkout_coupon. Die haben
   nie gegriffen, und zwar nicht wegen Spezifität: Das Element gibt es im
   fertigen Dokument gar nicht. woocommerce_checkout_coupon_form() gibt ein
   <form> aus, das lag innerhalb von form.checkout, und verschachtelte
   Formulare wirft der Browser weg. Was man auf der Seite sah, war die
   allgemeine Feldgestaltung aus style.css.

   Derselbe Befund hatte eine ernstere Seite: Übrig blieb ein
   <button type="submit"> im Kassenformular — ein Klick auf "Gutschein
   anwenden" hat die BESTELLUNG abgeschickt. Das Feld ist deshalb neu gebaut
   (checkout/review-order.php, Knopf type="button") und sitzt jetzt in der
   Summenzeile über der Zwischensumme.

   Die Masse sind die der übrigen Kasse: Feldhöhe 49 px, Radius 12 px,
   Schrift 14 px — dieselben Werte wie in Abschnitt 3. */

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table tfoot tr.sb-coupon td {
  padding: 16px 0 18px;
}

.sb-checkout__grid #order_review .sb-coupon__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  background: #FFFFFF;
  color: #181C25;
  border: 1px solid #DEDEDE;
  border-radius: 12px;
  padding: 14px;
  height: 49px;
  font-size: 14px;
  box-sizing: border-box;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__apply {
  flex: 0 0 auto;
  background: #3A4150;
  color: #FFFFFF;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  height: 49px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.sb-checkout__grid #order_review .sb-coupon__apply:hover { background: #495264; }

/* Während des Einlösens: bedienbar bleibt es, aber sichtbar beschäftigt. */
.sb-checkout__grid #order_review .sb-coupon.is-busy .sb-coupon__row { opacity: 0.55; }

/* Rückmeldung direkt unter dem Feld statt am Seitenanfang — auf einer langen
   Kasse ist der Seitenanfang beim Einlösen längst aus dem Blick.

   ZWEI DINGE, DIE OHNE ZUTUN SCHIEFGEHEN, beide am 29.08.2026 gemessen:
   1. Abschnitt 5 setzt "#order_review tfoot td { text-align: right }". Die
      Gutscheinzeile IST eine tfoot-Zelle, die Meldung stand deshalb
      rechtsbündig. Hier ausdrücklich wieder auf links.
   2. Die Liste, die WooCommerce zurückgibt, war nur 174 statt 463 px breit
      und brach dadurch nach drei Wörtern um. Deshalb width: 100%. */
.sb-checkout__grid #order_review .sb-coupon__notice:empty { display: none; }

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice ul,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice li,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice p {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  background: transparent;
  border: 0;
  font-size: 13px;
  text-align: left;
  color: #FFFFFF;
}

/* Fehler in Rot, Erfolg in Weiss. #FF9A9A ist auf dem dunklen Grund gut
   lesbar (rund 6,7:1) — der Shop hatte bisher kein Rot. WER IN PAKET 2 DIE
   ROTEN FELDRAHMEN BAUT: bitte denselben Ton nehmen, sonst hat die Kasse
   zwei verschiedene Rots. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice .woocommerce-error,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice .woocommerce-error li {
  color: #FF9A9A;
}

/* DER FEHLER STEHT SEIT DEM 29.08.2026 IM SELBEN KASTEN WIE DER ERFOLG
   (Wunsch des Kunden). Vorher war er blosser roter Text.

   Warum das eine eigene Regel braucht: Die Erfolgsmeldung ist ein <div>, der
   Fehler eine <ul> — und die Zurücksetzung ein paar Zeilen weiter oben nimmt
   allen ul, li und p in diesem Bereich Hintergrund und Innenabstand weg
   (sie ist dafür da, WooCommerces Listenpunkte zu bändigen). Der Kasten muss
   hier also ausdrücklich zurückgeholt werden.

   Die Werte sind nicht gewählt, sondern am Erfolgskasten abgelesen:
   Hintergrund rgba(255,255,255,0.05), Innenabstand 14/18, Schrift 14 px.
   Breite und Rundung kommen aus dem Abschnitt "Nacharbeiten 1.12", der alle
   drei Meldungsarten gemeinsam auf 100 % und 12 px setzt. Unterschied bleibt
   allein die Schriftfarbe. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice .woocommerce-error {
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice .woocommerce-error li {
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   5a. Der Platz fuer den Express-Knopf   (30.08.2026)
   --------------------------------------------------------------------------
   BEOBACHTET VOM KUNDEN: Beim Laden erscheint der Google-Pay-Knopf,
   verschwindet, und der Inhalt darunter wandert nach oben — dann erscheint er
   wieder und alles wandert zurueck.

   ES IST KEIN FLACKERN DES KNOPFES, SONDERN EIN SPRUNG DES LAYOUTS: Stripe
   baut sein Express-Element neu auf, nachdem WooCommerce beim Laden einmal
   update_order_review fahren laesst. Waehrend des Neuaufbaus ist der
   Behaelter leer — und er hatte keine reservierte Hoehe (min-height: 0), also
   klappte er auf null zusammen und die halbe Seite ruckte hoch.

   GEMESSEN: das fertige Element ist 55 px hoch.

     MERKSATZ: Wo fremder Code etwas nachtraeglich hineinzeichnet, gehoert der
     Platz vorher reserviert. Sonst zahlt die ganze Seite fuer jede
     Verzoegerung mit einem Sprung.

   DIE RESERVIERUNG GILT NUR, SOLANGE SIE GEBRAUCHT WIRD: Steht am Ende kein
   Express-Knopf zur Verfuegung — Browser ohne Google Pay und ohne Apple Pay —,
   setzt studiobro-checkout.js die Klasse sb-express-leer, und der Streifen
   faellt weg. Dieselbe Pruefung schaltet den Trenner "— ODER —".
   -------------------------------------------------------------------------- */

#wc-stripe-express-checkout-element {
  min-height: 55px;
}
#wc-stripe-express-checkout-element.sb-express-leer {
  min-height: 0;
}

/* --------------------------------------------------------------------------
   5b. Die Kasse auf dem Handy — was ueber den Rand lief   (30.08.2026)
   --------------------------------------------------------------------------
   GEMESSEN BEI 262 PX FENSTERBREITE: Das Dokument war 273 px breit, die
   Bestelltabelle 355. Gutscheinfeld und Knopf ragten damit 133 px ueber den
   Bildschirm hinaus, und die Gesamtsumme in der Leiste war abgeschnitten
   ("50,29 EU").

   URSACHE: Die Uebersicht ist eine TABELLE, und eine Tabelle mit
   table-layout: auto wird so breit, wie ihr Inhalt es verlangt — der
   Behaelter daneben (222 px) interessiert sie nicht. Die Gutscheinzeile ist
   eine Tabellenzeile und wurde einfach mitgezogen.

     MERKSATZ: Eine Tabelle schrumpft nicht von allein. Wer sie in einen
     schmalen Kasten stellt, muss ihr table-layout: fixed geben — sonst
     gewinnt der Inhalt gegen den Behaelter.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 900px) {

  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table {
    table-layout: fixed;
    width: 100%;
  }

  /* Der Knopf trug 20 px Innenabstand seitlich und "Gutschein anwenden" ohne
     Umbruch — auf 262 px ist das zusammen breiter als der halbe Bildschirm. */
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__apply {
    padding: 14px 12px;
  }

  /* Die Summe in der Leiste darf nicht schrumpfen, die Beschriftung schon. */
  .sb-checkout__grid .sb-checkout__summary-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sb-checkout__grid .sb-checkout__summary-total {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* OBEN KEINE RUNDEN ECKEN (Kundenwunsch 30.08.2026). Auf dem Handy stoesst
     der weisse Kasten direkt an die Uebersichtsleiste; zwei Rundungen
     uebereinander sehen aus wie ein Fehler. Unten bleiben sie. */
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__main {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* RECHNUNGSDETAILS UEBER DIE GANZE BREITE. Die Reihenfolge stimmt schon im
     Markup — Vorname, Nachname, Strasse, Adresszusatz, PLZ, Stadt, Land —,
     sie war nur in zwei Spalten gefaltet. Auf 262 px blieben davon 85 px je
     Feld. */
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.form-row-first,
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.form-row-last {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   6. Aufklappbare Übersicht für Mobilgeräte
   -------------------------------------------------------------------------- */

.sb-checkout__grid .sb-checkout__summary-toggle { display: none; }

@media screen and (max-width: 900px) {
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    /* HELLES GRAU MIT ZWEI TRENNLINIEN (Kundenwunsch 30.08.2026, nach der
       mobilen Kasse von eraformaudio.com). Dort gemessen: Leiste #F5F5F5,
       Trennlinie 1px #DEDEDE, Hoehe 64 px. Vorher stand die Leiste hier auf
       #202530 mit weisser Schrift — sie war damit dunkler als alles darunter.

       NUR DIE LEISTE. Der aufgeklappte Inhalt darunter bleibt, wie er ist —
       so ausdruecklich entschieden. */
    background: #F5F5F5;
    color: #181C25;
    border: 0;
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    padding: 18px 20px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
  }

  .sb-checkout__grid .sb-checkout__summary-label { display: inline-flex; align-items: center; gap: 8px; }

  .sb-checkout__grid .sb-checkout__summary-caret {
    width: 9px; height: 9px;
    /* Der Pfeil war weiss — auf hellem Grund unsichtbar. */
    border-right: 2px solid #181C25;
    border-bottom: 2px solid #181C25;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }
  .sb-checkout__grid .sb-checkout__aside.is-open .sb-checkout__summary-caret { transform: rotate(225deg) translate(-2px, -2px); }

  .sb-checkout__grid .sb-checkout__summary-total { font-size: 17px; font-weight: 700; }

  /* AUF- UND ZUFAHREN WIE BEIM MINI-WARENKORB (29.08.2026).
     Vorher sprang der Inhalt mit display: none/block ohne Übergang auf.

     DIE HÖHE SETZT studiobro-checkout.js, nicht diese Datei. Der Grund steht
     in Zahlen fest; ich habe beide reinen CSS-Wege gemessen:

       grid-template-rows 0fr -> 1fr   Auffahren sprang sofort auf 588 von
                                       628 px (3 ms), nur der Innenabstand
                                       lief noch. Zufahren dagegen sauber.
       max-height 0 -> 2000px          Auffahren nach 76 ms bei 601 von 628,
                                       danach 270 ms Kriechen. Die Kappe muss
                                       für den grössten Warenkorb reichen, bei
                                       kurzem Inhalt läuft die Bewegung
                                       deshalb ins Leere.

     Die Übersicht ist je nach Warenkorb mal 400, mal 900 px hoch — eine feste
     Zahl kann es also nicht richtig machen. Das JavaScript misst die Höhe im
     Moment des Klicks und setzt sie als Inline-Wert; danach gibt es die Kappe
     wieder ab.

     DIE 2000 px HIER SIND DER RÜCKFALL, falls das JavaScript nicht läuft:
     Dann fährt die Übersicht immer noch auf, nur eben mit der Kriechbewegung
     von oben. Ohne diesen Wert bliebe sie ganz zu — das wäre der schlechteste
     Ausgang.

     visibility springt verzögert, damit der Inhalt beim Zufahren nicht
     schlagartig verschwindet, sondern mit der Bewegung geht. Dasselbe Muster
     wie beim Mini-Warenkorb. */
  .sb-checkout__grid .sb-checkout__summary-body {
    display: block;
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease, visibility 0s linear 0.35s;
  }

  .sb-checkout__grid .sb-checkout__aside.is-open .sb-checkout__summary-body {
    max-height: 2000px;
    padding: 20px;
    visibility: visible;
    transition: max-height 0.35s ease, padding 0.35s ease, visibility 0s;
  }
}

@media screen and (min-width: 901px) {
  .sb-checkout__grid .sb-checkout__summary-body { display: block; }
}

/* Hinweis von PayPal unter dem Kauf-Button.

   Nach einem Express-Kauf über den Warenkorb-Knopf kehrt der Kunde in die
   Kasse zurück, und PayPal setzt dort p#ppcp-cancel ein: "Du bezahlst derzeit
   mit PayPal. Wähle eine andere Zahlungsmethode." Ohne eigene Regeln erbt der
   Absatz 18px aus der Seitengestaltung und steht unmittelbar am Knopf.
   Hier: 13px, gedämpft, 12px Abstand — er ist eine Fussnote zum Knopf, keine
   zweite Aussage. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #ppcp-cancel {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #596675;
  text-align: center;
}
.sb-checkout__grid #ppcp-cancel a { color: #04828F; text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Rechtstexte unter dem Kauf-Button
   -------------------------------------------------------------------------- */

.sb-checkout__grid .sb-checkout__legal { margin-top: 16px; }

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__legal p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #596675;
}
.sb-checkout__grid .sb-checkout__legal p:last-child { margin-bottom: 0; }
.sb-checkout__grid .sb-checkout__legal a { color: #04828F; text-decoration: underline; }


/* --------------------------------------------------------------------------
   9. Anmelde-Popup in der Kasse   (29.08.2026)
   -------------------------------------------------------------------------- */

/* Entscheidung vom 27.08.2026: Popup in der Mitte, abgedunkelter Hintergrund,
   kein Seitenwechsel. Das Formular kommt aus studiobro-checkout.php und steht
   im Fussbereich — ausserhalb von form.checkout, weil verschachtelte Formulare
   der Browser wegwirft (siehe Gutscheinfeld).

   Die Gestaltung folgt der linken Kassenspalte, nicht der dunklen Seite: weisse
   Karte, Felder wie in Abschnitt 3 (49 px hoch, Radius 12, 1px #DEDEDE), Knopf
   in der Aktivfarbe. Das Popup liegt ueber der hellen Spalte, dort wuerde eine
   dunkle Karte fremd wirken.

   z-index 10000: Der Kopfbereich liegt auf 50, die Staging-Diagnose darunter.
   Wer hier etwas hoeher stapelt, verdeckt das Popup. */

.sb-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
}

.sb-modal.is-open { display: block; }

/* Hintergrund sperren, solange das Popup offen ist — sonst scrollt die Kasse
   hinter dem abgedunkelten Grund weiter. */
body.sb-modal-offen { overflow: hidden; }

.sb-modal__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(24, 28, 37, 0.65);
}

.sb-modal__box {
  position: relative;
  width: 420px;
  max-width: calc(100% - 32px);
  margin: 12vh auto 0;
  max-height: 76vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 32px;
  background: #FFFFFF;
  color: #181C25;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.sb-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #596675;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.sb-modal__close:hover { color: #181C25; }

.woocommerce-page.woocommerce-checkout .sb-modal .sb-modal__title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  color: #181C25;
}

.woocommerce-page.woocommerce-checkout .sb-modal .sb-modal__error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FDECEC;
  color: #A32020;
  font-size: 13px;
  line-height: 1.45;
}
.sb-modal .sb-modal__error p { margin: 0; color: inherit; }

.sb-modal .sb-modal__row { margin: 0 0 14px; }

.woocommerce-page.woocommerce-checkout .sb-modal .sb-modal__row label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  color: #707070;
}

.woocommerce-page.woocommerce-checkout .sb-modal .sb-modal__row input {
  display: block;
  width: 100%;
  height: 49px;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid #DEDEDE;
  border-radius: 12px;
  background: #FFFFFF;
  color: #181C25;
  font-size: 14px;
}
.sb-modal .sb-modal__row input:focus { outline: 2px solid #03A9BE; outline-offset: 1px; }

.woocommerce-page.woocommerce-checkout .sb-modal .sb-modal__remember {
  display: flex;
  margin: 0 0 18px;
  font-size: 13px;
  color: #596675;
}
.sb-modal .sb-modal__remember label { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.sb-modal .sb-modal__remember input { width: 16px; height: 16px; margin: 0; }

.woocommerce-page.woocommerce-checkout .sb-modal .sb-modal__submit {
  display: block;
  width: 100%;
  height: 49px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #03A9BE;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.sb-modal .sb-modal__submit:hover { background: #048E9F; }

.woocommerce-page.woocommerce-checkout .sb-modal .sb-modal__links {
  margin: 16px 0 0;
  font-size: 13px;
  text-align: center;
}
.sb-modal .sb-modal__links a { color: #04828F; text-decoration: underline; }

@media screen and (max-width: 480px) {
  .sb-modal__box { margin-top: 8vh; padding: 24px 20px; }
}

/* --------------------------------------------------------------------------
   8. Produktbild mit Anzahl-Bubble in der Bestellübersicht   (Paket 1.3)
   -------------------------------------------------------------------------- */

/* MASSE aus der Vorlage eraformaudio.com, am 28.08.2026 im Browser
   abgenommen (eraform-referenz.md, Abschnitt 9), am 29.08. am Ergebnis
   nachgemessen:

     Bild        64 × 64 px, Eckenradius 16 px, Rahmen 2 px solid #FFFFFF
     Bubble      20 × 20 px, Eckenradius 8 px — abgerundetes Quadrat, KEIN
                 Kreis; Schrift 12 px / 600
     Lage        obere rechte Ecke, 4 px darüber und 4 px darüber hinaus
     Name        14 px, darf umbrechen; Preis rechtsbündig, einzeilig

   ZUR FARBE DER BUBBLE: In der Referenz ist sie als ungeprüft markiert — das
   DOM der Vorlage meldete weissen Grund bei weisser Schrift, was nicht sein
   kann, und die Shopify-Kassenadresse ist seither nicht mehr erreichbar. Statt
   eine Schätzung nachzubauen: weisser Grund mit dunkler Ziffer (#202530).
   Gründe — der eine harte Messwert der Vorlage war #FFFFFF; auf der dunklen
   Spalte ist das der stärkste Kontrast (15:1, bei 12 px nötig); und es nimmt
   den weissen Rahmen des Bildes auf, statt einen dritten Ton einzuführen.

   ZUR ZEILENHÖHE: Die Zellen tragen aus Abschnitt 5 padding: 11px 0. Mit dem
   64 px hohen Bild wird die Zeile 86 px hoch. vertical-align: middle steht
   hier, damit der Preis rechts auf der Höhe des Bildes sitzt und nicht oben
   klebt — nur im tbody, das tfoot mit den Summen bleibt unberührt. */

.sb-checkout__grid #order_review .sb-order-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sb-checkout__grid #order_review .sb-order-item__media {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
}

/* box-sizing: border-box — der Rahmen liegt INNEN, damit die äussere Kante
   die gemessenen 64 px bleibt. max-width: none, weil style.css Bildern in
   Tabellen sonst eine Obergrenze setzt. */
.sb-checkout__grid #order_review .sb-order-item__media img {
  display: block;
  width: 64px;
  height: 64px;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid #FFFFFF;
  border-radius: 16px;
  object-fit: cover;
  background: #202530;
}

/* min-width statt fester Breite: Bei zweistelligen Mengen wächst die Bubble
   nach links, statt die Ziffern abzuschneiden. Bei einstelligen bleibt sie
   durch das Polster genau 20 px breit. */
.sb-checkout__grid #order_review .sb-order-item__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #FFFFFF;
  color: #202530;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.sb-checkout__grid #order_review .sb-order-item__title {
  flex: 1 1 auto;
  min-width: 0;
}

/* DIE MENGENSTEUERUNG IN DER KASSE (Kundenwunsch 30.08.2026)
   --------------------------------------------------------------------------
   HIER STEHT NUR DIE PLATZIERUNG. Aussehen und Masse kommen aus den
   Grundregeln .sb-qty__* weiter unten — dieselbe Form wie im Mini-Warenkorb
   und im Warenkorb: runde Knoepfe, 32 px, 1 px Rahmen in #C1C1C1,
   durchsichtiger Grund, weisse Schrift, 4 px Abstand.

   ZWEI FEHLER AUS DEM ERSTEN ANLAUF, beide am 30.08.2026 korrigiert:

   1. inline-flex STATT flex. Damit stand die Steuerung NEBEN dem
      Produktnamen und drueckte ihn zusammen — "The Braaaams (Enthalten im
      MTRXA Soundpack Vol.1)" brach um und die Knoepfe sassen mitten in der
      Zeile.

      MERKSATZ: inline-flex heisst inline. Wer etwas UNTER den Text stellen
      will, braucht display: flex.

   2. FARBEN FUER EINEN WEISSEN GRUND. Ich hatte Rahmen #DEDEDE und Schrift
      #181C25 gesetzt, weil ich die Kassenspalte fuer weiss hielt. Sie ist es
      nicht: Weiss ist die FORMULARspalte links (.sb-checkout__main), die
      Uebersicht rechts steht auf #202530 mit weisser Schrift
      (.sb-checkout__aside, am 30.08.2026 nachgemessen). Die dunkle Schrift
      war auf dunklem Grund fast unlesbar.

      MERKSATZ: Bevor man Farben "anpasst", den Grund messen — nicht den
      Nachbarn ansehen und schliessen. Zwei Spalten nebeneinander koennen
      gegensaetzlich sein, genau dafuer sind sie da.

   Es bleibt also bei den Grundregeln; hier steht nur, dass die Steuerung
   eine eigene Zeile unter dem Namen bekommt. */
.sb-checkout__grid #order_review .sb-order-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
/* Damit der Papierkorb per order vor das Plus rutschen kann, muss die
   Steuerung selbst Teil derselben Reihe sein — sie gibt ihre Kinder frei. */
.sb-checkout__grid #order_review .sb-order-item__actions > .sb-qty {
  display: contents;
}
.sb-checkout__grid #order_review .sb-order-item__title .sb-qty {
  display: flex;
  width: max-content;
  margin-top: 0;
}

/* DIE ANZAHL ZWISCHEN DEN KNOEPFEN IST WEG (Kundenwunsch 30.08.2026). Sie
   stand dreimal an derselben Zeile: in der Bubble am Bild, im Feld und
   indirekt im Preis. Das Feld bleibt im Markup — studiobro-cart.js liest die
   Menge daraus —, es ist nur nicht mehr zu sehen.

   NICHT display: none. Ein ausgeblendetes Feld liefert zwar weiter seinen
   Wert, aber der Rueckweg ueber die Tastatur waere dann weg; deshalb wird es
   auf null Breite gezogen und bleibt fuer Screenreader ansprechbar. */
.sb-checkout__grid #order_review .sb-qty__input {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
}

/* BEI MENGE 1 STATT MINUS EIN PAPIERKORB.
   Ein Minus, das nicht weiter kann, ist eine tote Taste — an dieser Stelle
   ist Loeschen die einzige sinnvolle Handlung nach unten. Umgeschaltet wird
   ueber die Klasse am Behaelter: Das Minus verschwindet, der Papierkorb
   rueckt an seinen Platz VOR das Plus.

   BEI MENGE UEBER 1 ist es umgekehrt — dann steht das Minus da und der
   Papierkorb ist weg. Wer von 2 auf 0 will, drueckt zweimal und sieht beim
   zweiten Mal den Papierkorb. */
.sb-checkout__grid #order_review .sb-order-item__actions--eins .sb-qty__btn--minus {
  display: none;
}
.sb-checkout__grid #order_review .sb-order-item__actions--eins .sb-order-item__remove {
  order: -1;
}
.sb-checkout__grid #order_review .sb-order-item__actions:not(.sb-order-item__actions--eins) .sb-order-item__remove {
  display: none;
}

/* Der Papierkorb traegt die Form von Plus und Minus: rund, 32 px, 1 px
   Rahmen, durchsichtig. Er ist die gefaehrlichere Handlung, deshalb im
   Ruhezustand gedaempft und beim Ueberfahren rot statt petrol. */
.sb-checkout__grid #order_review .sb-order-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  box-sizing: border-box;
  border: 1px solid #6B7887;
  border-radius: 50%;
  color: #9BAAB2;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sb-checkout__grid #order_review .sb-order-item__remove:hover,
.sb-checkout__grid #order_review .sb-order-item__remove:focus-visible {
  border-color: #E06C6C;
  color: #E06C6C;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review table.shop_table tbody td {
  vertical-align: middle;
}


/* ==========================================================================
   studiobro — Warenkorb, Paket 1.4   (Fassung 10, 28.08.2026)
   --------------------------------------------------------------------------
   Mengensteuerung (Plus/Minus) im Warenkorb und im Mini-Warenkorb.

   Bis hierher zeigte das Theme die Menge an KEINER dieser beiden Stellen —
   weder als Bedienelement noch als Zahl. Bei Menge 2 stand dort nur der
   doppelte Preis. Das ist eine Lücke, keine fehlende Verschönerung.

   MASSE aus der Vorlage eraformaudio.com/cart, am 28.08.2026 im Browser
   abgenommen (eraform-referenz.md, Abschnitt 10):

     Knöpfe            32 × 32 px, rund
     Mengenfeld        44 × 32 px, 13 px, Gewicht 500, zentriert
     Abstand dazwischen 4 px
     Gruppe gesamt     116 × 32 px

   FARBEN: NICHT aus der Vorlage übernommen, und das ist Absicht. In der
   Referenz sind genau die beiden Farbwerte der Vorlage als ungeprüft
   markiert (aus dem Bildschirmfoto geschätzt, nicht aus dem DOM gelesen).
   Statt eine Schätzung nachzubauen, benutzt das Bedienelement die Töne, die
   der Shop ohnehin führt: Linie #C1C1C1 wie bei .order-box und beim
   Löschen-Link, Schrift weiss, aktiv #03A9BE. Damit ist die Frage nach dem
   Grau der Vorlage gegenstandslos.

   BEIDE ORTE SIND DUNKEL — nachgemessen: die Warenkorbseite auf #202530, das
   Panel im Kopfbereich ebenfalls (header .header-cart: background #202530,
   1px #C1C1C1). Deshalb genügt ein Satz Farben für beide.

   --------------------------------------------------------------------------
   ZUR SPEZIFITÄT

   .sb-qty und .sb-qty__* sind neue Klassen, gegen die keine Regel aus
   style.css steht — sie brauchen keinen Präfix. Zwei Stellen greifen
   dagegen in Bestehendes ein und tragen deshalb die volle Kette:

     .price-and-quantity   style.css führt für den Warenkorb
                           `.woocommerce-page.woocommerce-cart
                            .woocommerce-cart-form .cart-item
                            .price-and-quantity` — fünf Klassen. Die eigene
                           Regel hängt `.sb-qty-col` an und hat sechs.
     .remove-product       im Mini-Warenkorb mit
                           `header.site-header .widget_shopping_cart_content
                            .woocommerce-mini-cart-item` davor.

   Rückweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Das Bedienelement
   -------------------------------------------------------------------------- */

.sb-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}

.sb-qty__btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #C1C1C1;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* Das Zeichen sitzt im runden Knopf sonst zwei Pixel zu tief: Minus- und
   Pluszeichen liegen in der Schrift höher als die Mittellinie der Zeile. */
.sb-qty__btn > span {
  display: block;
  margin-top: -2px;
  pointer-events: none;
}

.sb-qty__btn:hover {
  border-color: #03A9BE;
  color: #03A9BE;
}

.sb-qty__btn:focus-visible {
  outline: 2px solid #03A9BE;
  outline-offset: 2px;
}

/* Ausgegraut heisst hier: obere oder untere Grenze erreicht. Bei Produkten
   mit "Einzeln verkaufen" sind beide Knöpfe von Anfang an aus — die Zahl 1
   bleibt trotzdem stehen, weil sie sonst nirgends steht. */
.sb-qty__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.sb-qty__btn[disabled]:hover {
  border-color: #C1C1C1;
  color: #FFFFFF;
}

.sb-qty__input {
  width: 44px;
  min-width: 44px;
  height: 32px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Die Pfeilchen des Zahlenfeldes weg — es gibt Plus und Minus daneben. */
.sb-qty__input::-webkit-outer-spin-button,
.sb-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sb-qty__input:focus {
  outline: none;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Die Zeile im Warenkorb: Anzahl — Löschen — Summe   (Paket 1.5)
   -------------------------------------------------------------------------- */

/* GEWÜNSCHTE ORDNUNG vom 29.08.2026: Mengensteuerung links, "Löschen" rechts
   daneben, der Betrag der Position auf derselben Höhe ganz rechts. Über der
   Mengensteuerung steht "Anzahl", über dem Betrag das schon vorhandene
   "Summe" — zwei Beschriftungen auf einer Linie, zwei Werte auf einer Linie.

   DER TRICK IST DERSELBE WIE VORHER AUF DEM HANDY: display: contents löst die
   beiden Zwischenboxen .name-and-actions und .price-and-quantity auf. Ihre
   Kinder werden direkte Flex-Kinder von .product-meta und lassen sich per
   order frei anordnen — OHNE das Markup umzubauen. Ohne das müsste der
   Löschen-Link aus .actions in die Preisspalte wandern, und dann stünde er
   nicht mehr dort, wo ihn jedes Theme-Update erwartet.

   DAMIT ENTFÄLLT DIE FESTE SPALTE VON 120 px aus Paket 1.4: Es gibt keine
   zweite Spalte mehr. Der Produktname läuft jetzt über die volle Breite
   (gemessen bei 1369 px: 512 statt vorher 372).

   align-items: flex-end setzt die drei Gruppen auf eine Grundlinie. Damit die
   Grundlinie auch die Beschriftungen trifft, bekommen beide Gruppen denselben
   inneren Aufbau: Beschriftung 25,2 px, Abstand 8 px, Inhalt 32 px. Der Betrag
   trägt dafür line-height und height 32 — von Haus aus ist seine Box 28 px
   hoch, und dann stünden die Beschriftungen 1 px versetzt.

   Nachgemessen am 29.08.2026 bei 1369 px: Beschriftungen 987–1012,
   Mengensteuerung und Betrag 1020–1052, "Löschen" 1027–1045 (mittig zwischen
   beiden). */

.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .product-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .name-and-actions,
.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .price-and-quantity.sb-qty-col {
  display: contents;
}

.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .product-name {
  order: 1;
  width: 100%;
}

.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .sb-qty-block {
  order: 2;
  margin-top: 14px;
}

/* "Löschen" ist nur 18 px hoch. In einem 32 px hohen Kasten sitzt es mittig
   neben den runden Knöpfen statt auf deren Unterkante. */
.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .actions {
  order: 3;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 32px;
  margin: 14px 0 0 20px;
}

.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .product-subtotal {
  order: 4;
}

/* Der Aussenabstand sitzt jetzt an .sb-qty-block. */
.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .price-and-quantity.sb-qty-col .sb-qty {
  margin: 0;
}

/* Die Beschriftung "Anzahl" nimmt die Farbe von "Summe" auf (#C1C1C1), steht
   aber auf Wunsch kleiner: 15 statt 18 px (29.08.2026).

   DIE ZEILENHOEHE BLEIBT BEI 25,2 px — das ist Absicht und keine vergessene
   Zeile. Beide Gruppen sind unten ausgerichtet; ihre Beschriftungen treffen
   sich nur dann auf einer Linie, wenn ihre Kaesten gleich hoch sind. Wird die
   Zeilenhoehe mit der Schrift kleiner, rutscht "Anzahl" um 4 px nach unten
   gegen "Summe". */
.woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .sb-qty-block__label {
  display: block;
  margin: 0 0 8px;
  color: #C1C1C1;
  font-size: 15px;
  line-height: 25.2px;
  text-align: left;
}

/* Am Schreibtisch steht der Betrag rechts aussen in derselben Zeile.
   margin-left: auto schiebt ihn dorthin, ohne eine Spaltenbreite zu setzen —
   die Zeile bleibt damit unabhängig von der Länge des Betrags.

   Die beiden Regeln darunter greifen in style.css ein und tragen deshalb den
   vollen Präfix samt .sb-qty-col (sieben Klassen gegen sechs). */
@media screen and (min-width: 781px) {
  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .product-subtotal {
    margin: 14px 0 0 auto;
    text-align: right;
  }

  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .price-and-quantity.sb-qty-col .product-subtotal .header-only {
    margin-bottom: 8px;
  }

  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .price-and-quantity.sb-qty-col .product-subtotal .product-subtotal-price {
    height: 32px;
    line-height: 32px;
  }
}

/* --------------------------------------------------------------------------
   3. Die Zeile im Mini-Warenkorb
   -------------------------------------------------------------------------- */

/* DIE SPALTE MUSS DEN REST FÜLLEN — sonst steht "Löschen" nicht rechts.

   .product-data-mini-cart ist ein Flex-Kind mit display: block, also
   inhaltsbreit. Bei "Big Nutz Pad (Enthalten im MTRXA Soundpack Vol.1)"
   füllt der umbrechende Name die Spalte auf 266 px, bei dem kurzen "MTRXA
   Soundpack Vol.1" blieben nur 206 px übrig — und damit endete die letzte
   Zeile 60 px weiter links als die darüber. Vor Paket 1.4 fiel das nicht auf,
   weil "Löschen" linksbündig stand. Am 28.08.2026 auf Staging nachgemessen:
   mit dieser Regel enden alle drei Positionen bündig bei 1207. */
header.site-header .widget_shopping_cart_content .woocommerce-mini-cart-item .product-data-mini-cart {
  flex: 1 1 auto;
  min-width: 0;
}

/* Menge links, Löschen rechts, in einer Zeile.

   DIE ABSTÄNDE SIND GERECHNET, NICHT GESCHÄTZT: .remove-product trug bisher
   margin: 16px 0 64px und war 18 px hoch — zusammen 98 px. Die neue Zeile ist
   32 px hoch; mit 16 px oben und 50 px unten sind es wieder genau 98 px. Die
   Position im Panel bleibt damit so hoch wie vorher, und in das Panel
   (max-height 445 px) passt weiterhin dasselbe.

   flex-wrap IST PFLICHT, nicht Vorsicht: Unter 780 px wird das Panel zur
   vollen Bildschirmbreite, die Spalte dann rund 150 px schmal. Menge (116 px)
   und Löschen (78 px) passen dort nicht nebeneinander — ohne Umbruch ragte
   "Löschen" aus der Position heraus. Mit Umbruch rutscht es auf eine eigene
   Zeile, also genau dorthin, wo es vor Paket 1.4 ohnehin stand. Nachgestellt
   und gemessen am 28.08.2026 bei 360 px Panelbreite: kein Überlauf mehr. */
header.site-header .widget_shopping_cart_content .woocommerce-mini-cart-item .sb-mini-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 12px;
  margin: 16px 0 50px 0;
}

header.site-header .widget_shopping_cart_content .woocommerce-mini-cart-item .sb-mini-actions .remove-product {
  margin: 0;
}

/* ZWEITER ROLLBALKEN IM MINI-WARENKORB — alte Theme-Eigenheit, nicht aus
   Paket 1.4.

   style.css gibt unter @media (max-width: 1660px) JEDEM .btn ein
   margin-bottom: -7px. Der Knopf "Zur Kasse gehen" ragt dadurch 7 px aus
   .widget_shopping_cart_content heraus, und weil der overflow: auto trägt,
   blendet der Browser dafür einen eigenen Rollbalken ein — direkt neben dem
   des Panels.

   Gemessen am 29.08.2026: scrollHeight 801 gegen clientHeight 794, also
   genau die 7 px. Mit und ohne Paket 1.4 identisch — die Differenz gab es
   vorher genauso. Mit dieser Regel: 801 zu 801, ein Rollbalken statt zwei.

   Nur der Knopf im Mini-Warenkorb ist gemeint; überall sonst bleibt die
   Theme-Regel unangetastet. */
header.site-header .header-cart .widget_shopping_cart_content > a.btn {
  margin-bottom: 0;
}

/* DER KNOPF WAR AUSSERDEM 16 PX ZU SCHMAL — aufgefallen, als der PayPal-Knopf
   darunter kam: Der eine endete bei 1139, der andere bei 1155.

   Ursache ist wieder eine Regel des Kopfbereichs, wieder unter
   @media (max-width: 1660px):

     header.site-header .container .menu-col .menu-row
     .acount-buttons-wrapper .btn { margin-right: 16px; }

   Sie ist für die Knöpfe neben dem Menü gedacht und trifft den Kassenknopf im
   Panel nur nebenbei. FÜNF KLASSEN — die Regel darüber hat vier und verliert.
   Deshalb führt diese Kette zwei Wrapper mehr mit: sechs Klassen, zwei
   Elemente. Am 29.08.2026 gemessen: vorher 398 px, jetzt 414 wie PayPal-Knopf
   und Textlink. */
header.site-header .acount-buttons-wrapper .header-cart-action .header-cart .widget_shopping_cart_content > a.btn {
  margin: 0;
}

/* Der PayPal-Knopf klebte ohne diesen Abstand direkt am Kassenknopf. */
header.site-header .header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
  margin: 10px 0 0;
}

/* Weg zur Warenkorbseite. Textlink statt zweitem Knopf — im Panel soll genau
   eine Handlung hervorstechen, und das ist der Weg zur Kasse. Vorher führte
   von hier gar nichts zur Warenkorbseite, weil das Theme den bordeigenen
   Knopf "Warenkorb ansehen" durch den festen Kassenlink ersetzt hat. */
header.site-header .header-cart .widget_shopping_cart_content > a.sb-mini-cart__view {
  display: block;
  margin: 14px 0 0;
  color: #C1C1C1;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  text-decoration: underline;
}
header.site-header .header-cart .widget_shopping_cart_content > a.sb-mini-cart__view:hover {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   4. Während der Aktualisierung
   -------------------------------------------------------------------------- */

/* Zwischen Klick und Antwort liegt rund eine Sekunde. In dieser Zeit stimmt
   die neue Menge schon, die Preise daneben aber noch nicht. Sie blass zu
   schalten sagt das, ohne die Bedienung zu sperren — weitere Klicks werden
   gesammelt und mit derselben Anfrage abgeschickt. */
.woocommerce-Price-amount {
  transition: opacity 0.15s ease;
}

.sb-cart-busy .cart-item .woocommerce-Price-amount,
.sb-cart-busy .cart_totals .woocommerce-Price-amount,
.sb-cart-busy .order-total .woocommerce-Price-amount,
.sb-cart-busy .widget_shopping_cart_content .woocommerce-Price-amount {
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   5. Bestellübersicht im Warenkorb bleibt beim Scrollen stehen
      (29.08.2026, nachgereicht)
   -------------------------------------------------------------------------- */

/* Die Box mit der Gesamtsumme und dem Kauf-Knopf läuft beim Scrollen mit und
   bleibt unter dem Kopfbereich stehen, bis ihre Unterkante die Unterkante der
   Positionsliste erreicht. Danach scrollt sie normal mit hinaus.

   DAS MACHT position: sticky VON ALLEIN. Ein klebendes Element ist auf seinen
   Elternblock begrenzt — hier .cart-wrapper — und wird an dessen Unterkante
   wieder mitgenommen. Es braucht dafür weder JavaScript noch einen Platzhalter.
   Der alte Abschnitt "Checkout sticky col" in main.js hat genau das mit
   position: fixed, einem unsichtbaren Zwilling und Offset-Rechnerei gemacht;
   er läuft auf dieser Seite nicht und wird hier auch nicht gebraucht.

   ZWEI BEDINGUNGEN, an denen sticky sonst still versagt — beide am 29.08.2026
   auf Staging geprüft:

     1. KEIN overflow ausser visible in der Elternkette. Vom Element bis zum
        body ist alles sichtbar (.container, .woocommerce, .site-content,
        body). Wer dort später ein overflow: hidden einbaut, schaltet diese
        Regel wortlos ab.
     2. DAS ELEMENT DARF NICHT AUF VOLLE HÖHE GEZOGEN WERDEN. Als Flex-Kind
        würde es sonst so hoch wie die Positionsliste und hätte keinen Weg zum
        Kleben. align-self: flex-start steht hier deshalb ausdrücklich, auch
        wenn es zurzeit schon von anderer Stelle kommt.

   ZUM ABSTAND OBEN: Der Kopfbereich ist position: fixed und ändert seine Höhe
   beim Scrollen — 171 px am Seitenanfang, danach 108 px. Massgeblich ist der
   gescrollte Zustand, denn nur dann klebt die Box. 128 px sind diese 108 plus
   20 px Luft. Ändert sich die Höhe des Kopfbereichs, ist dieser Wert
   nachzuziehen.

   NUR AM SCHREIBTISCH. Unter 781 px stapelt .break-mobile die beiden Spalten;
   die Übersicht steht dann ohnehin am Ende der Seite, und Kleben würde sie
   über die Positionsliste legen. */

@media screen and (min-width: 781px) {
  .woocommerce-page.woocommerce-cart .cart-wrapper #real-cart-collaterals {
    position: sticky;
    top: 128px;
    align-self: flex-start;
  }
}


/* ==========================================================================
   studiobro — Nacharbeiten aus der mobilen Ansicht   (29.08.2026)
   --------------------------------------------------------------------------
   Sieben Befunde aus einer Durchsicht auf 414 px Breite. Alle Werte in diesem
   Block sind in dieser Breite gemessen, nicht geschätzt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Der Kopfbereich muss über den PayPal-Knopf
   -------------------------------------------------------------------------- */

/* Beim Öffnen des Menüs blieb der PayPal-Knopf sichtbar und lag über dem
   Menü. Ursache: PayPal zeichnet seinen Knopf in einen Rahmen mit
   z-index: 100 — GENAU SO VIEL wie das Menü-Panel. Bei Gleichstand gewinnt
   das spätere Element im Dokument, und das ist PayPal.

   Das Panel höher zu setzen genügt NICHT: Es liegt im Kopfbereich, und der
   ist position: fixed mit z-index: 50 — also ein eigener Stapelkontext. Was
   darin liegt, kommt nie über dessen 50 hinaus, egal welchen Wert es selbst
   trägt. Deshalb muss der KOPFBEREICH steigen; das Panel und der
   Mini-Warenkorb steigen mit.

   500 ist bewusst mit Abstand gewählt: über PayPals 100, unter dem
   Anmelde-Popup (10000, Abschnitt 9). */
body header.site-header {
  z-index: 500;
}

/* --------------------------------------------------------------------------
   2. Kauf-Knopf im Warenkorb
   -------------------------------------------------------------------------- */

/* Auf dem Handy war der Knopf nur 28 px hoch — der PayPal-Knopf darunter 45.
   Zwei Knöpfe gleicher Bedeutung in deutlich verschiedenen Grössen, und
   28 px sind ausserdem unter jeder brauchbaren Tippfläche.

   PAKET 1.5: Die Höhe folgt dem PayPal-Knopf, statt fest zu sein — sie steht
   in --sb-paypal-h, und studiobro-cart.js misst den gezeichneten Knopf und
   schreibt seine Höhe als Inline-Wert derselben Variablen auf .cart_totals.

   ZUR VORGESCHICHTE, weil die Zahl 45 sonst willkürlich wirkt: PayPal wählte
   seine Höhe früher nach der Breite des Behälters. Am 29.08.2026 über die
   ganze Bandbreite gemessen (Behälterbreite -> Knopfhöhe): 200 -> 35,
   297 -> 35, 303 -> 45, 338 -> 45, 484 -> 45, 500 -> 55, 624 -> 55,
   705 -> 55; die Sprünge liegen bei 300 und 500. Hier standen deshalb fünf
   Media Queries. Seit Paket 1.10 gibt studiobro-cart.php dem Anzeigeort
   Warenkorb eine feste Höhe mit, und die Tabelle ist entfallen.

   margin-bottom: 0 hebt wieder die Theme-Regel auf, die JEDEM Knopf unter
   1660 px ein margin-bottom: -7px gibt — dieselbe Regel, die schon den
   zweiten Rollbalken im Mini-Warenkorb und die Schrift im Kauf-Button der
   Kasse verursacht hat. Ohne sie klebte der PayPal-Knopf am Kassenknopf. */
/* PAKET 1.10 (29.08.2026): EINE ZAHL STATT EINER STUFENTABELLE.

   Bis dahin standen hier fünf Media Queries, weil PayPal seine Knopfhöhe
   nach der Breite des Behälters wählte (35 / 45 / 55). Seit studiobro-cart.php
   dem Anzeigeort Warenkorb eine feste Höhe mitgibt, ist das gegenstandslos:
   Der Knopf ist in jeder Breite 45 px hoch. Die Tabelle war ausserdem der
   wartungsanfälligste Teil dieser Datei — sie hing an PayPals internen
   Stufen, die niemand von uns kontrolliert.

   studiobro-cart.js misst den gezeichneten Knopf weiterhin und schreibt seine
   Höhe als Inline-Wert auf .cart_totals. Sollte PayPal die 45 einmal nicht
   annehmen, folgt der Kassenknopf trotzdem. */
.woocommerce-page.woocommerce-cart .cart_totals {
  --sb-paypal-h: 45px;
}

/* Der Innenabstand von 12 px oben und unten hätte den Knopf auf 42 px
   gehalten und jede Höhe darunter verhindert. Stattdessen zentriert der
   Kasten seinen Text selbst, und die Höhe kommt allein aus der Variablen. */
.woocommerce-page.woocommerce-cart .cart_totals .wc-proceed-to-checkout .proceed-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sb-paypal-h, 45px);
  padding: 0 22px;
  margin-bottom: 0;
  font-size: 15px;
}

.woocommerce-page.woocommerce-cart .cart_totals #ppc-button-ppcp-gateway {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   3. Dieselbe Zeile auf dem Handy   (Paket 1.5)
   -------------------------------------------------------------------------- */

/* AUF DEM HANDY PASSEN DIE DREI GRUPPEN NICHT NEBENEINANDER. Gemessen bei
   414 px: Die Spalte neben dem Produktbild ist 262 px breit, gebraucht würden
   116 (Mengensteuerung) + 20 + 84 ("Löschen") + 20 + 87 (Betrag) = 327.

   Deshalb bleibt der Betrag dort, wo er schon ist: in einer eigenen Zeile
   über den Bedienelementen, mit "Summe" links und dem Wert rechts. Diese
   Zeile baut style.css unter 780 px selbst (display: flex am
   .product-subtotal); sie wird hier nur einsortiert, nicht umgebaut.

   Geändert gegenüber Paket 1.4 ist allein die Reihenfolge der unteren Zeile:
   erst die Mengensteuerung, dann "Löschen" — vorher war es umgekehrt.

   Gemessen am 29.08.2026 bei 414 px: Summenzeile 112–374, darunter die
   Beschriftung "Anzahl", Mengensteuerung 112–228, "Löschen" 248–332. */
@media screen and (max-width: 780px) {
  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .product-subtotal {
    order: 2;
    width: 100%;
    margin: 0;
  }

  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .sb-qty-block { order: 3; }
  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .cart-item .actions      { order: 4; }
}

/* --------------------------------------------------------------------------
   4. Gesamtsumme im Warenkorb   (Handy)
   -------------------------------------------------------------------------- */

/* Die Summe unter der Positionsliste stand auf 14 px (Beschriftung) und
   20 px (Betrag) — für die wichtigste Zahl der Seite zu klein, zumal die
   Summe im Kasten daneben mit 25 px gesetzt ist. Jetzt 16 und 24. */
@media screen and (max-width: 780px) {
  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .order-total > span {
    font-size: 16px;
    font-weight: 600;
  }

  .woocommerce-page.woocommerce-cart .woocommerce-cart-form .order-total .total-content .woocommerce-Price-amount {
    font-size: 24px;
  }
}

/* --------------------------------------------------------------------------
   5. Gutscheinzeile in der Kasse   (Handy)
   -------------------------------------------------------------------------- */

/* Aufgeklappt war die Bestellübersicht breiter als der Bildschirm: Dokument
   424 px bei 414 px Fenster. Die Ursache liess sich einkreisen — die Tabelle
   braucht mindestens 384 px, verfügbar sind 334.

   Gemessen, welcher Teil sie aufspannt:
     Ausgangslage                              384
     ohne nowrap beim Steuerhinweis            384   (unschuldig)
     Gutscheinzeile umbrechend                 276   <- die Ursache
   Eingabefeld und Knopf nebeneinander passen auf dem Handy nicht in eine
   Zeile. Sie brechen jetzt um, der Knopf nimmt die volle Breite. */
@media screen and (max-width: 780px) {
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__row {
    flex-wrap: wrap;
  }

  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__apply {
    width: 100%;
  }
}


/* ==========================================================================
   studiobro — Nacharbeiten 1.5   (29.08.2026)
   --------------------------------------------------------------------------
   Vier kleine Wünsche aus der Durchsicht. Die Zeile im Warenkorb und die
   Höhe des Kassenknopfes stehen weiter oben in ihren Abschnitten, weil sie
   dort etwas ersetzen; hier steht nur, was neu hinzukommt.

   Rückweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Der Newsletter-Kasten bekommt Rahmen und Schatten
   -------------------------------------------------------------------------- */

/* Vorgabe vom Kunden, Werte unverändert übernommen. Der Radius geht von 32
   auf 20 px zurück — deshalb steht diese Regel am Dateiende und nicht oben
   bei den übrigen .subscribe-box-Regeln: gleiche Spezifität, und die spätere
   Regel gewinnt. Die Abstände in den drei Media Queries oben bleiben davon
   unberührt. */
.subscribe-box {
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 10px 10px 15px hsla(0, 0%, 0%, 0.5);
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   2. Der einsame Trenner "— ODER —" in der Kasse
   -------------------------------------------------------------------------- */

/* Stripe stellt über den Express-Block einen Trenner. Erscheint kein
   Express-Knopf — weil das Gerät weder Apple noch Google Pay anbietet —,
   bleibt der Trenner trotzdem stehen: 25 px "— ODER —" ohne irgendetwas
   darüber. Am 29.08.2026 in der Kasse nachgemessen: Behälter 0 px hoch,
   Trenner sichtbar.

   Ausgeblendet wird er nicht pauschal, sondern nur, wenn der Behälter
   wirklich leer ist. Die Klasse setzt studiobro-checkout.js, das die Höhe
   des Behälters beobachtet — CSS allein kann eine Höhe nicht abfragen. */
#wc-stripe-express-checkout-button-separator.sb-leer {
  display: none;
}


/* ==========================================================================
   studiobro — Nacharbeiten 1.6   (29.08.2026)
   --------------------------------------------------------------------------
   Der Mini-Warenkorb auf dem Handy: Breite wie die Kästen der Warenkorbseite,
   Knöpfe so gross wie dort, und er fährt jetzt auf und zu statt zu springen.

   Rückweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gleicher seitlicher Abstand wie auf der Warenkorbseite   (Handy)
   -------------------------------------------------------------------------- */

/* Das Panel lief über die volle Breite; seine Haarlinie sass damit genau auf
   der Bildschirmkante. Das war die offene Gestaltungsfrage aus Fassung 11 —
   entschieden am 29.08.2026: einrücken.

   20 px sind nicht gewählt, sondern abgelesen: .site-content .container führt
   padding: 0 20px, und alle Kästen der Warenkorbseite stehen deshalb bei
   x = 20 und enden bei Fensterbreite − 20 (bei 414 px gemessen: 20 bis 390,
   Radius 20). Der Mini-Warenkorb sitzt jetzt in derselben Spur.

   width: auto ist nötig, weil style.css width: 100% setzt — mit beidem
   zugleich gewönne die Breite und rechts bliebe kein Abstand. */
@media screen and (max-width: 780px) {
  body header.site-header .header-cart {
    left: 20px;
    right: 20px;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   2. Der Kassenknopf im Panel so gross wie auf der Warenkorbseite
   -------------------------------------------------------------------------- */

/* Gemessen am 29.08.2026 bei 414 px: Knopf im Panel 34 px hoch, derselbe
   Knopf auf der Warenkorbseite 45. Jetzt beide 45.

   Der Kasten zentriert seinen Text selbst, statt ihn über den Innenabstand zu
   setzen — sonst hielte der Abstand den Knopf über 45 px fest, sobald die
   Beschriftung einmal umbricht.

   DER PAYPAL-KNOPF DARUNTER LÄSST SICH HIER NICHT MITZIEHEN: Seine Höhe
   steht in den Plugin-Einstellungen, nicht im CSS. Nachgesehen im
   Konfigurationsobjekt PayPalCommerceGateway: mini_cart_style.height = 35,
   während der Anzeigeort Warenkorb gar keine Höhe führt und deshalb
   selbstständig auf 45 kommt. Zu ändern unter PayPal -> Gestaltung ->
   Button Styling -> Anzeigeort "Mini-Warenkorb" -> Höhe auf 45. Der Knopf
   ist ein iframe von PayPal; per CSS ginge nur Verzerren. */
header.site-header .header-cart .widget_shopping_cart_content > a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
}

/* --------------------------------------------------------------------------
   3. Auf- und Zufahren statt Springen   (Handy)
   -------------------------------------------------------------------------- */

/* Gewünscht: Beim Tippen auf das Warenkorbsymbol fährt das Panel nach unten
   auf, beim nochmaligen Tippen wieder zu.

   OHNE EINE ZEILE JAVASCRIPT. Der Zustand steckt schon in der Klasse
   "active", die main.js umschaltet — hier hängt nur ein Übergang daran. Das
   ist mit Absicht so: main.js bindet an mehreren Stellen auf dasselbe Panel
   (Symbol, Klick daneben, letzte Position gelöscht); ein eigener
   Slide-Aufruf müsste alle drei kennen und bliebe bei der nächsten Änderung
   zurück.

   WARUM max-height UND NICHT height: Die Höhe des Panels hängt am Inhalt und
   ist im Voraus nicht bekannt; auf "auto" lässt sich nicht überblenden.

   WARUM display NICHT MEHR none: Ein Wechsel von none auf block ist kein
   Übergang, sondern ein Sprung — das Panel muss auch zugeklappt gezeichnet
   werden. Damit es dann nichts einnimmt und keine Klicks abfängt, gehen im
   zugeklappten Zustand ausdrücklich auch Innenabstand und Rahmenstärke auf
   null: Bei box-sizing: border-box (im Theme global gesetzt) hielten sie das
   Panel sonst rund 60 px hoch offen.

   overflow ist im zugeklappten Zustand hidden, damit der Inhalt beim Zufahren
   mitgeschnitten wird; offen wieder auto, sonst liesse sich in einer langen
   Liste nicht rollen. */
/* ZUR SICHTBARKEIT, die bei diesem Muster gern vergessen wird: Zugeklappt ist
   das Panel zwar 0 px hoch, steht aber weiterhin im Dokument — ohne
   visibility: hidden bliebe sein Inhalt für Vorleseprogramme lesbar und seine
   Links mit der Tabulatortaste erreichbar, obwohl nichts zu sehen ist. Vorher
   nahm display: none dem Panel beides ab.

   visibility springt, statt zu überblenden. Beim Aufklappen soll es sofort
   springen (Dauer 0), beim Zuklappen erst NACH der Bewegung — sonst
   verschwände der Inhalt schlagartig und nur der leere Kasten führe zu.
   Genau das leistet die Verzögerung von 0.35s in der ersten Regel. */
@media screen and (max-width: 780px) {
  body header.site-header .header-cart {
    display: block;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease, border-width 0.35s ease, visibility 0s linear 0.35s;

    /* RAHMENFARBE UND RUNDUNG GEHÖREN IN BEIDE ZUSTÄNDE, nicht nur in den
       offenen. In style.css stehen sie ausschliesslich an .header-cart.active;
       ohne "active" gilt wieder die Grundregel mit 1px solid #C1C1C1 und ohne
       Rundung. Beim Zufahren fällt die Klasse sofort weg, die Bewegung dauert
       aber noch 0,35 s — in dieser Zeit war der Rahmen heller und die Ecken
       eckig (am 29.08.2026 gemeldet und nachgestellt). Jetzt ändert sich beim
       Zufahren nur noch die Stärke, Farbe und Rundung bleiben. */
    border-color: rgba(255, 255, 255, 0.20);
    border-radius: 20px;
  }

  body header.site-header .header-cart.active {
    /* 81 px ist die Oberkante des Panels, 20 px Luft nach unten. */
    max-height: calc(100vh - 101px);

    /* SAFARI AUF DEM IPHONE RECHNET 100vh ANDERS als jeder Desktop-Browser:
       100vh ist dort die Hoehe OHNE die untere Leiste mit Pfeilen, Teilen und
       Lesezeichen — also die Hoehe, die der Bildschirm HAETTE, wenn Safari
       seine Leiste einzoege. Zu sehen ist aber weniger. Das Panel wurde damit
       rund 70 px hoeher gerechnet als der Platz, den es wirklich hat; sein
       unteres Ende samt Bezahlknopf lag hinter Safaris Leiste und war auch
       durch Rollen IM Panel nicht zu erreichen — gerollt wird ja nur bis zur
       Unterkante des Panels, und die lag selbst schon hinter der Leiste.
       (Am 30.08.2026 gemeldet.)

       svh ist die KLEINE Ansichtshoehe: die Hoehe bei EINGEBLENDETER Leiste.
       Damit passt das Panel in jedem Zustand, ohne je zu springen.

       WARUM NICHT dvh: dvh waere die JEWEILS AKTUELLE Hoehe und aenderte sich,
       sobald Safari beim Rollen seine Leiste ein- oder ausfaehrt. Weil an
       max-height ein Uebergang von 0,35 s haengt, liefe bei jedem dieser
       Wechsel eine Animation los — das Panel zoege sich sichtbar zusammen und
       wieder auf.

       DIE vh-ZEILE BLEIBT DARUEBER STEHEN, sie ist der Rueckfall: Safari kennt
       svh erst ab 15.4, Chrome ab 108. Wer aelter ist, ueberspringt die
       naechste Zeile und verhaelt sich wie bisher — kein Rueckschritt. */
    max-height: calc(100svh - 101px);

    padding-top: 30px;

    /* Der Innenabstand liegt INNERHALB des rollbaren Bereichs, ist also der
       Auslauf hinter dem letzten Element. env(safe-area-inset-bottom) gibt auf
       dem iPhone die Hoehe des Balkens ganz unten (Home-Anzeige) zurueck, sonst
       0 — jeder andere Browser rechnet also weiter mit genau 30 px wie bisher.
       Zusammen mit svh liegt der Bezahlknopf damit auch dann frei, wenn Safari
       die Leiste einzieht und nur noch der Balken bleibt. */
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    border-width: 1px;
    overflow: auto;
    visibility: visible;
    transition: max-height 0.35s ease, padding 0.35s ease, border-width 0.35s ease, visibility 0s;
  }
}

/* Wer Bewegung im System abgestellt hat, bekommt sie auch hier nicht. */
@media screen and (max-width: 780px) and (prefers-reduced-motion: reduce) {
  body header.site-header .header-cart {
    transition: none;
  }
}

@media screen and (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sb-checkout__grid .sb-checkout__summary-body,
  .sb-checkout__grid .sb-checkout__aside.is-open .sb-checkout__summary-body {
    transition: none;
  }
}


/* ==========================================================================
   studiobro — Nacharbeiten 1.7   (29.08.2026)
   --------------------------------------------------------------------------
   Zwei Dinge am Mini-Warenkorb: die Produktbilder bekommen Rahmen und
   Schatten, und man sieht endlich, dass die Liste weitergeht.

   Rückweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Produktbilder im Mini-Warenkorb
   -------------------------------------------------------------------------- */

/* Werte unverändert vom Kunden übernommen. Anders als beim Kassenkasten
   funktioniert der weisse Rahmen mit 7 % Deckkraft hier: Das Panel ist dunkel
   (#202530), der Rahmen liegt also auf Dunkel und ist zu sehen. Es sind
   dieselben Werte, mit denen die Produktbilder im Shop gesetzt sind. */
header.site-header .widget_shopping_cart_content .woocommerce-mini-cart-item .product-thumb-mini-cart img {
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   2. Sichtbar machen, dass die Liste weitergeht
   -------------------------------------------------------------------------- */

/* DAS PROBLEM, am 29.08.2026 nachgemessen: Am Schreibtisch zeigt das Panel
   443 von 920 px Inhalt — bei drei Positionen ist die Hälfte unsichtbar, und
   nichts weist darauf hin. Der Unterschied zwischen offsetWidth und
   clientWidth war 2 px, also nur die beiden Rahmen: Es gab keinen Rollbalken.

   ZWEI URSACHEN, BEIDE HIER BEHOBEN:

   1. Die Rollbalken-Regeln des Themes hängen an
      .widget_shopping_cart_content — dieses Element rollt aber gar nicht
      (scrollHeight gleich clientHeight, gemessen 860/860). Gerollt wird
      .header-cart mit max-height 445. Die Regeln haben also nie gegriffen.

   2. macOS blendet Rollbalken aus, solange nicht gerollt wird. Erst eine
      eigene ::-webkit-scrollbar-Regel macht daraus einen stehenden Balken,
      der Platz einnimmt (gemessen: Differenz danach 8 px statt 2).

   BEWUSST OHNE scrollbar-width/scrollbar-color: Sind die Standard-
   Eigenschaften gesetzt, ignoriert Chrome die ::-webkit-Regeln — dann ist der
   Balken wieder unsichtbar (beides gemessen: mit Standard-Eigenschaften
   2 px, ohne sie 8). Firefox bekommt deshalb keinen stehenden Balken, wohl
   aber den Verlauf unten.

   DER VERLAUF ist die zweite Hälfte und der eigentliche Hinweis: Am unteren
   Rand liegt ein dunkler Schleier, der verschwindet, sobald man unten
   angekommen ist; am oberen Rand erscheint er, sobald man gerollt hat.

   Wie das ohne JavaScript geht: Vier Verläufe übereinander. Die beiden
   "Deckel" in der Farbe des Panels sind mit background-attachment: local am
   INHALT festgemacht, wandern also mit; die beiden Schleier sind mit scroll
   am Rahmen festgemacht und bleiben stehen. Am oberen Ende deckt der Deckel
   den Schleier zu, in der Mitte ist er weggerollt. Ändert sich der
   Panelhintergrund, müssen die beiden Deckelfarben mitgeändert werden — sie
   müssen exakt #202530 sein, sonst sieht man eine Kante. */
body header.site-header .header-cart {
  /* KEIN WEITERROLLEN DER SEITE, wenn das Panel unten angekommen ist.
     Gemeldet und nachgestellt am 29.08.2026: Wer im Mini-Warenkorb unten
     ankommt und weiterrollt, rollt die Seite — gemessen 500 px — und das
     Panel wandert mit nach oben aus dem Bild. Mit contain bleibt die Seite
     stehen (gemessen: 0), das Panel bleibt offen und an seiner Stelle. */
  overscroll-behavior: contain;
  background-color: #202530;
  background-image:
    linear-gradient(to bottom, #202530 45%, rgba(32, 37, 48, 0) 100%),
    linear-gradient(to top, #202530 45%, rgba(32, 37, 48, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)),
    linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-size: 100% 40px, 100% 40px, 100% 22px, 100% 22px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

header.site-header .header-cart::-webkit-scrollbar {
  width: 6px;
}

/* DIE 22 px OBEN UND UNTEN HALTEN DEN BALKEN AUS DEN RUNDEN ECKEN. Das Panel
   hat border-radius: 20px; der Balken läuft aber am geraden Rand des Kastens
   entlang und schnitt die Rundung oben rechts sichtbar ab (am 29.08.2026
   gemeldet und im Bild bestätigt). WebKit erlaubt margin an der Laufschiene —
   damit beginnt der Balken erst unterhalb der Rundung. 22 statt 20, damit
   zwischen Rundung und Balkenende zwei Pixel Luft bleiben. */
header.site-header .header-cart::-webkit-scrollbar-track {
  background: transparent;
  margin: 22px 0;
}

/* DER BALKEN ZEIGT SICH ERST BEIM ÜBERFAHREN. Vorher stand er dauerhaft in
   Türkis — als Hinweis wirksam, aber auffälliger als das, worauf er zeigt.
   Den dauerhaften Hinweis gibt jetzt allein der Verlauf am unteren Rand; der
   Balken kommt dazu, sobald der Zeiger im Panel ist. Er nimmt seinen Platz
   weiter ein, es springt also nichts.

   KEIN transition AN DIESER STELLE: Ein transition auf dem
   ::-webkit-scrollbar-thumb lässt in Chrome die ganze Regel wirkungslos
   werden — dann bleibt der Balken auch beim Überfahren unsichtbar. Am
   29.08.2026 zweimal gemessen: mit transition kein Balken, ohne transition
   erscheint er. Auf Fingergeräten gibt es kein Überfahren; dort blendet das
   Betriebssystem beim Rollen ohnehin seinen eigenen Balken ein. */
header.site-header .header-cart::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

header.site-header .header-cart:hover::-webkit-scrollbar-thumb {
  background: #03A9BE;
}


/* ==========================================================================
   studiobro — Nacharbeiten 1.8   (29.08.2026)
   --------------------------------------------------------------------------
   Kein Hineinzoomen mehr beim Antippen eines Feldes auf dem iPhone.

   Rückweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* GEMELDET: Beim Antippen des Gutscheinfeldes zoomt das iPhone hinein, bleibt
   nach "Gutschein anwenden" in dieser Vergrösserung stehen, und die Seite
   lässt sich dann seitlich schieben.

   DAS IST KEIN FEHLER DES LAYOUTS. Nachgemessen: Die Seite ist bei 414 px
   Fensterbreite 410 px breit, es ragt nichts heraus. Das seitliche Schieben
   ist der vergrösserte Ausschnitt selbst — iOS lässt in jeder Vergrösserung
   schieben.

   DIE URSACHE IST DIE SCHRIFTGRÖSSE. Safari auf dem iPhone zoomt beim
   Hineintippen in jedes Feld, dessen Schrift KLEINER ALS 16 px ist. Das ist
   Absicht von Apple und lässt sich nicht abschalten — jedenfalls nicht
   redlich: Es ginge über maximum-scale/user-scalable=no im viewport-Meta,
   aber das nimmt allen Nutzern auch das absichtliche Vergrössern, und neuere
   iOS-Fassungen ignorieren es ohnehin.

   ZURÜCKZOOMEN GEHT NICHT. Es gibt keinen Weg, den Zoom per JavaScript
   zurückzunehmen; alle kursierenden Kniffe (viewport-Meta austauschen und
   wieder zurücksetzen) wirken auf dem iPhone nicht mehr zuverlässig. Der
   einzige verlässliche Weg ist, den Zoom gar nicht erst auszulösen.

   NACHGEMESSEN AM 29.08.2026: ALLE Felder der Kasse standen auf 14 px — es
   ging also nie nur um das Gutscheinfeld, sondern um jedes einzelne Feld.
   Einzige Ausnahme war das Newsletter-Feld mit 16 px, und genau dort hat auch
   niemand ein Zoomen gemeldet.

   16 px gelten nur auf dem Handy. Am Schreibtisch bleibt es bei 14 px, dort
   gibt es das Verhalten nicht. */
@media screen and (max-width: 780px) {
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input[type="text"],
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input[type="email"],
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input[type="tel"],
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row input[type="password"],
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row select,
  .woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__input,
  .woocommerce-page.woocommerce-checkout #sb-login-modal input[type="text"],
  .woocommerce-page.woocommerce-checkout #sb-login-modal input[type="password"] {
    font-size: 16px;
  }
}


/* ==========================================================================
   studiobro — Nacharbeiten 1.9   (29.08.2026)
   --------------------------------------------------------------------------
   Nur noch der Abstand unter den WooCommerce-Seiten. Die übrigen Punkte
   dieser Runde stehen in ihren jeweiligen Abschnitten weiter oben:
   Rollbalken und Weiterrollen beim Mini-Warenkorb in Abschnitt 2 der
   Nacharbeiten 1.7, das Auf- und Zufahren der Übersicht in Abschnitt 6.

   Rückweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* Vorgabe vom Kunden: 80 px. style.css führt an dieser Stelle drei Werte —
   228,1 px, unter 1280 px 185 und unter 780 px 95. Diese Regel ersetzt alle
   drei: gleiche Spezifität, und additional.css wird später geladen, deshalb
   gewinnt sie auch gegen die Media Queries des Themes.

   ZUSAMMEN MIT DEM RASTER: .sb-checkout__grid hatte bis heute selbst einen
   unteren Aussenabstand (80 px, unter 900 px 60). Der ist auf 0 gesetzt,
   sonst stünden beide Werte übereinander. Der Abstand kommt jetzt aus einer
   Hand.

   GILT FÜR ALLE WOOCOMMERCE-SEITEN, nicht nur für die Kasse — also auch
   Warenkorb, Konto und Bestellbestätigung. Das ist gewollt, denn der Abstand
   war dort dieselbe Grösse; wer ihn nur in der Kasse ändern will, hängt
   .woocommerce-checkout vor den Selektor. */
.woocommerce-page .woocommerce {
  padding-bottom: 80px;
}


/* ==========================================================================
   studiobro — Nacharbeiten 1.12   (29.08.2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Die Meldung unter dem Gutscheinfeld
   -------------------------------------------------------------------------- */

/* Sie war 168 px breit und 110 px eingerückt, mitten in einer 454 px breiten
   Zelle — und mit 3 px Ecken, während Feld und Knopf darüber 12 px haben.

   URSACHE, im Browser nachgesehen: Ein Inline-Stylesheet des Themes setzt für
   .woocommerce-checkout .woocommerce-message eine Breite von
   calc(71.7% - 157.74px) und margin-left: 110px. Das ist für Meldungen
   gedacht, die über der alten, seitenbreiten Kasse standen; in unserer
   schmalen Zelle ergibt dieselbe Rechnung 168 px und einen Einzug, der dort
   nichts zu suchen hat. Es gibt Media-Query-Varianten derselben Regel, alle
   mit demselben Muster.

   Deshalb hier ausdrücklich zurückgesetzt — Breite und Rundung wie beim Feld
   und beim Knopf darüber. Der Innenabstand (14/18) und der leicht helle Grund
   bleiben, wie sie sind. Gilt für alle drei Meldungsarten, damit Erfolg,
   Fehler und Hinweis nicht verschieden aussehen. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice .woocommerce-message,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice .woocommerce-error,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #order_review .sb-coupon__notice .woocommerce-info {
  width: 100%;
  margin: 0;
  border-radius: 12px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Gleich breite Spalten im Fussbereich
   -------------------------------------------------------------------------- */

/* Gemessen bei 1369 px: 285 / 143 / 214 / 214 / 214 px — die Spalten tragen
   flex-4, flex-2 und dreimal flex-3 und sind deshalb verschieden breit.
   Jetzt bekommen alle denselben Anteil: 1149 / 5 = rund 230 px.

   flex: 1 1 0 und nicht etwa width: 20%: Die Spalten sollen sich den Platz
   teilen, egal wie viele es sind — kommt eine sechste dazu, stimmt es
   weiterhin. Die Basis 0 ist wichtig, sonst rechnet der Browser die
   unterschiedlich langen Inhalte mit ein und die Spalten wären wieder
   verschieden breit.

   Unter 780 px stapelt das Theme die Spalten ohnehin (break-mobile), dort
   ändert die Regel nichts. */
footer.site-footer .main-row > .col {
  flex: 1 1 0;
}


/* ==========================================================================
   studiobro — Paket 2, Schritt 2: gewerblicher Kauf   (29.08.2026)
   --------------------------------------------------------------------------
   Der Haken "Ich kaufe als Unternehmen" und die beiden Felder, die daran
   haengen. Rückweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* Der Haken sieht aus wie der Newsletter-Haken im Kontaktblock — dieselbe
   Zeilenhoehe, dasselbe Kaestchen, dieselbe Aktivfarbe. Zwei Haken in
   derselben Kasse duerfen nicht verschieden aussehen. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-business {
  margin: 0 0 22px;
  padding: 0;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-business__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #4A5766;
  cursor: pointer;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-business input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: #03A9BE;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Firmenname und USt-IdNr. nur mit Haken
   -------------------------------------------------------------------------- */

/* Die Klasse steht am ganzen Block, nicht an jedem Feld: So ist der Zustand
   an EINER Stelle, das PHP setzt sie schon beim Seitenaufbau (kein
   Aufblitzen), und das JavaScript schaltet sie nur um.

   display: none und nicht visibility: Die Felder sollen im zugeklappten
   Zustand keinen Platz einnehmen. Sie bleiben im Formular stehen und werden
   mitgeschickt — leer, und leer ist ohne Haken auch bedeutungslos. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .woocommerce-billing-fields .sb-business-feld {
  display: none;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .woocommerce-billing-fields.sb-business-an .sb-business-feld {
  display: block;
}

/* --------------------------------------------------------------------------
   Rückmeldung zur USt-IdNr.
   -------------------------------------------------------------------------- */

/* Gruen und Rot sind hier GESETZT, nicht abgelesen — der Shop hatte bisher
   weder das eine noch das andere auf hellem Grund. Rot ist derselbe Ton, der
   schon im Kartenformular von Stripe steckt (colorDanger #B23A45 in
   studiobro-checkout.php); so hat die Kasse nicht zwei verschiedene Rots.
   Gruen ist dazu passend gewaehlt und dunkel genug fuer weissen Grund
   (Kontrast rund 4,8:1).

   WER IN PAKET 5 DIE UStID-LOGIK BAUT: Diese beiden Zustaende gelten fuer
   jede spaetere Feldpruefung mit. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-vat-gut input[type="text"] {
  border-color: #2F8F5B;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-vat-schlecht input[type="text"] {
  border-color: #B23A45;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-vat__hinweis {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #B23A45;
}

.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-vat-gut .sb-vat__hinweis {
  color: #2F8F5B;
}

/* Weder gut noch schlecht: keine Pruefung moeglich (Drittland) oder die
   Pruefstelle ist gestoert. Beides ist kein Fehler des Kunden, also auch
   keine rote Schrift — der ruhige Grauton der uebrigen Hilfstexte. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .sb-vat__hinweis--neutral {
  color: #6B7887;
}


/* ==========================================================================
   studiobro — Paket 2, Schritt 3: fehlende Felder zeigen   (29.08.2026)
   ========================================================================== */

/* WooCommerce setzt die Klasse woocommerce-invalid selbst, sobald ein
   Pflichtfeld leer verlassen wird — und nimmt sie wieder weg, sobald etwas
   drinsteht. Nur gestaltet war sie bisher nicht: Am 29.08.2026 nachgesehen,
   im ganzen Shop gibt es dafuer KEINE einzige Regel, der Rahmen blieb also
   grau. Die Meldung stand oben im Block, das betroffene Feld sah aus wie
   jedes andere.

   Rot ist derselbe Ton wie bei der USt-IdNr. und im Kartenformular von Stripe
   (#B23A45) — die Kasse soll nicht drei verschiedene Rots haben. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .woocommerce-invalid input[type="text"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .woocommerce-invalid input[type="email"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .woocommerce-invalid input[type="tel"],
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .woocommerce-invalid select {
  border-color: #B23A45;
}

/* Die schwebende Beschriftung faerbt sich mit — sonst zeigt nur der Rahmen
   den Fehler, und der ist bei einem langen Formular leicht zu uebersehen.

   DER SELEKTOR MUSS DIE FORM DER BESTEHENDEN REGEL HABEN, nicht die kuerzere
   ueber die Label-Klasse. Die schwebende Beschriftung wird weiter oben mit
   ".form-row.sb-float > label" gesetzt — eine ID und sechs Klassen. Eine
   Regel ueber .sb-float__label hat eine Klasse weniger und verliert; am
   29.08.2026 gemessen, die Beschriftung blieb grau (#707070), waehrend der
   Rahmen laengst rot war. Mit .woocommerce-invalid an derselben Stelle sind
   es sieben Klassen und die Regel gewinnt. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details .form-row.sb-float.woocommerce-invalid > label {
  color: #B23A45;
}

/* Keine Zahlungsart gewaehlt. Das kann passieren, wenn eine bereits gewaehlte
   verschwindet — Klarna etwa, sobald das Land wieder geleert wird. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-zahlart__hinweis {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(178, 58, 69, 0.08);
  color: #B23A45;
  font-size: 14px;
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   NACHARBEITEN 29.08.2026 (nach dem Durchgang als Gast)
   -------------------------------------------------------------------------- */

/* 1. SEITENMELDUNGEN IN DER KASSE AUF VOLLE BREITE

   Aufgefallen beim Gast-Durchgang: Wer ein Produkt hinzufuegt, das nur
   einmal in den Warenkorb darf, bekommt in der Kasse die Meldung "Du kannst
   keinen weiteren ... hinzufuegen" — bei 1369 px in einem 224 px breiten
   Kasten, eingerueckt um 110 px, viermal umgebrochen.

   DIE URSACHE IST DIESELBE WIE BEIM GUTSCHEINFELD IN PAKET 1.12, nur an
   einer anderen Stelle. Im Customizer-CSS (<style id="wp-custom-css">, also
   Design -> Zusaetzliches CSS, NICHT diese Datei) steht:

     .woocommerce-checkout .woocommerce-error,
     .woocommerce-checkout .woocommerce-message {
       width: calc(71.7% - 157.74px); margin: 0 0 20px 110px; }

   Gerechnet auf unsere 533 px breite Zelle sind das 224 px. Die Regel ist
   fuer die alte, seitenbreite Kasse gemacht.

   Paket 1.12 hat nur die Meldungen im Gutscheinbereich zurueckgesetzt
   (.sb-coupon__notice). Die Seitenmeldung haengt woanders: in
   .sb-checkout__grid .sb-checkout__main .sb-checkout__inner .col2-set
   .woocommerce-notices-wrapper. Am 29.08.2026 im Dokument nachgesehen.

   Fuenf Klassen im Selektor, das Customizer-CSS hat zwei — damit gewinnt
   diese Regel unabhaengig von der Ladereihenfolge. Geaendert wird nur die
   Geometrie; Farben, roter Balken und Innenabstand bleiben, wie sie sind. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .woocommerce-notices-wrapper .woocommerce-info {
  width: 100%;
  margin: 0 0 20px;
  border-radius: 12px;
  box-sizing: border-box;
}

/* 2. VIER ZAHLUNGSZEICHEN IM FUSSBEREICH STATT ZWEI

   footer.php gibt jetzt PayPal, Mastercard, Visa und Klarna aus. Die beiden
   neuen kommen als SVG aus dem Stripe-Plugin und haben andere Seitenmasse
   als die beiden PNG-Kacheln des Themes: Visa 750x471 (wie die Kacheln),
   Klarna aber 32x32, also quadratisch.

   Deshalb wird hier ueber die HOEHE ausgerichtet und nicht ueber die
   Breite. Die bestehenden Regeln weiter oben setzen max-width: 59px — bei
   einem Quadrat waere Klarna damit 59 px hoch und wuerde die Zeile
   auseinanderdruecken. max-width: none nimmt das zurueck.

   38 px ist die Hoehe, die die PayPal-Kachel am 29.08.2026 bei 1369 px
   ohnehin hatte; die Zeile wird also nicht hoeher als vorher. */
footer.site-footer .container .bottom-row .row-item.logos-wrapper img {
  /* 30 px, Kundenentscheidung vom 29.08.2026. Der Weg dahin steht hier,
     weil er die naechste Aenderung erklaert:

     Mit vier Zeichen statt zwei ist die Zeile von 128 auf 251 px
     gewachsen. Die Zeile arbeitet mit space-between — der Zuwachs geht
     also zulasten der Nachbarn, und getroffen hat es den Copyright-Text
     links: Er stand mit 38 px auf VIER Zeilen (Spalte 237,6 px),
     obwohl er 249 px braucht. Bei 36 px passte es wieder.

     Mit 30 px ist genug Platz da, um die Fussleiste gerade zu ruecken —
     siehe den Block "Menue in der Mitte" weiter unten.

     EINE HOEHE FUER ALLE BREITEN, KEINE MEDIA QUERY. Die alten Regeln
     des Themes (max-width 59 px unter 1660, 49 px unter 1280) werden
     hier mit max-width: none abgeraeumt; sie sind fuer die zwei PNG
     gemacht und wuerden Klarna, das quadratisch ist, hochziehen. */
  height: 30px;
  width: auto;
  max-width: none;
}

/* MENUE IN DER MITTE (Kundenwunsch vom 29.08.2026)

   Vorher stand das Fussmenue nicht mittig, sondern dort, wo
   space-between es hinliess: Sein sichtbarer Text hatte seine Mitte bei
   588 px, die Zeile ihre bei 685 px. Mit vier Zahlungszeichen waere der
   Versatz noch groesser geworden.

   Zwei Dinge sind dafuer noetig:

   1. min-width: 620px am Menue muss weg. Der sichtbare Text ist 431 px
      breit; die 620 px machten daraus einen Kasten mit 189 px Luft, in
      dem der Text linksbuendig sass. Der Kasten sah mittig aus, der Text
      war es nicht.

   2. Die beiden aeusseren Spalten teilen sich den Rest zu gleichen
      Teilen (flex: 1 1 0). Damit steht das Menue unabhaengig davon in
      der Mitte, wie breit Copyright und Zeichen gerade sind.

   Nachgemessen am 29.08.2026 bei 1369 px: Menuetext-Mitte 685,
   Zeilenmitte 685. Copyright 339 px (zwei Zeilen), Zeichen rechtsbuendig
   bei 30 px Hoehe.

   NUR AB 1025 PX. Darunter stellt das Theme die Zeile auf
   flex-direction: column; dort wuerde flex: 1 1 0 die HOEHEN verteilen
   statt die Breiten. */
@media screen and (min-width: 1025px) {
  footer.site-footer .container .bottom-row > .row-item:first-child {
    flex: 1 1 0;
  }
  footer.site-footer .container .bottom-row > .row-item.menu-wrapper {
    flex: 0 1 auto;
    min-width: 0;
  }
  footer.site-footer .container .bottom-row > .row-item.logos-wrapper {
    flex: 1 1 0;
    justify-content: flex-end;
  }
  footer.site-footer .container .bottom-row .row-item.menu-wrapper .menu {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   SEITENMELDUNGEN STEHEN RECHTS (Kundenwunsch vom 29.08.2026)
   -------------------------------------------------------------------------- */

/* Links ist der Bezahlvorgang, rechts alles mit den Produkten — und diese
   Meldungen kommen vom Warenkorb ("Du kannst keinen weiteren ...
   hinzufuegen"). Verschoben wird im Theme-main.js, siehe die Stelle mit
   .sb-checkout__aside; hier steht nur, wie sie dort aussieht.

   DIE RECHTE SPALTE IST DUNKEL (#202530). Der Kasten kommt deshalb in
   denselben Toenen wie die Gutscheinmeldung darunter: Grund
   rgba(255,255,255,0.05), Fehler in #FF9A9A, sonst weiss. Woocommerce
   liefert ausserdem eine helle Flaeche und einen 3 px starken oberen Rand
   mit; beides wird hier abgeraeumt, sonst sitzt ein hellgrauer Balken in
   der dunklen Spalte.

   Das aside traegt den Innenabstand der Spalte (44/40/64), die Meldung
   sitzt damit von selbst auf der Breite der Produktzeilen — am 29.08.2026
   gemessen: 454 px, linke Kante 765, genau wie die Zeile darunter. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside > .woocommerce-notices-wrapper {
  margin: 0 0 24px;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-error,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-message,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-info {
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.45;
  list-style: none;
  box-sizing: border-box;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-error,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-error li {
  color: #FF9A9A;
}
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-error li,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-message li,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-info li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Der mitgelieferte Knopf "Warenkorb anzeigen" ist im Kern ein .button und
   traegt Rahmen und Flaeche des Themes. In der Spalte soll er ein Link
   sein, sonst steht ein zweiter Knopf ueber dem Gutscheinfeld. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-error a.button,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-message a.button,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-checkout__aside .woocommerce-info a.button {
  display: inline-block;
  margin: 6px 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: #03A9BE;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   CHROMES AUTOFILL-HERVORHEBUNG (30.08.2026)
   -------------------------------------------------------------------------- */

/* Wer ein Adressfeld aus Chromes Vorschlag uebernimmt, sah es danach DUNKEL —
   heller Text auf fast schwarzem Grund, mitten in der weissen Spalte. Alle
   getippten Felder blieben weiss.

   ES IST CHROMES EIGENE HERVORHEBUNG, nicht unsere CSS. Nachgewiesen am
   30.08.2026: Nur das ausgefuellte Feld erfuellt :-webkit-autofill, und sobald
   der Zustand aufgehoben wird (Wert einmal neu gesetzt), ist der Grund wieder
   weiss. Die gemeldete Hintergrundfarbe blieb dabei durchgehend Chromes
   Autofill-Blau rgb(232,240,254) — gemalt wurde trotzdem dunkel. Auf der
   Seite selbst steht dazu nichts: Weder die ausgelieferte style.css noch das
   Customizer-CSS noch diese Datei enthalten eine einzige Autofill-Regel.

   WARUM DER ERSTE VERSUCH SCHEITERTE — die eigentliche Lehre: Er hatte KEIN
   !important. Gegen die interne Darstellung des Browsers kommt eine
   gewoehnliche Regel nicht an, auch nicht mit hoher Spezifitaet. Erst
   -webkit-box-shadow mit !important uebermalt den Grund, und dann muss die
   Schriftfarbe mit -webkit-text-fill-color nachgezogen werden, sonst steht
   heller Text auf weissem Grund.

   Die 30px im Schatten sind Absicht: Der Schatten muss das Feld ueberdecken,
   und 30px sind mehr als die halbe Feldhoehe (49px).

   Die lange transition ist der uebliche Kniff dagegen, dass Chrome den
   Grund beim Setzen kurz aufblitzen laesst.

   NUR IN DER LINKEN SPALTE UND IM POPUP: Dort stehen Adressfelder und
   Anmeldedaten auf Weiss. Das Gutscheinfeld in der dunklen Spalte wird nicht
   automatisch ausgefuellt und bleibt aussen vor. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details input:-webkit-autofill,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details input:-webkit-autofill:hover,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details input:-webkit-autofill:focus,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details input:-webkit-autofill:active,
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid #customer_details select:-webkit-autofill,
.sb-modal input:-webkit-autofill,
.sb-modal input:-webkit-autofill:hover,
.sb-modal input:-webkit-autofill:focus,
.sb-modal input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
  box-shadow: 0 0 0 30px #FFFFFF inset !important;
  -webkit-text-fill-color: #181C25 !important;
  caret-color: #181C25;
  transition: background-color 9999s ease-in-out 0s;
}

/* Dazu die Angabe des Farbschemas — sie allein hat nichts bewirkt (am
   30.08.2026 geprueft), schadet aber nichts und stellt sicher, dass der
   Browser die Felder in der weissen Spalte auch sonst hell zeichnet.
   Bewusst NICHT an :root: Der Shop ist dunkel gehalten, eine seitenweite
   Angabe wuerde auch Rollbalken und Auswahllisten ueberall sonst betreffen. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid,
.sb-modal {
  color-scheme: light;
}


/* --------------------------------------------------------------------------
   DER REVERSE-CHARGE-HINWEIS DARF UMBRECHEN (30.08.2026)
   -------------------------------------------------------------------------- */

/* Der Hinweis unter der Gesamtsumme traegt die Theme-Klasse .includes_tax —
   und die bringt white-space: nowrap mit. Bei "Steuerschuldnerschaft des
   Leistungsempfaengers" sind das 359 px, die nicht umbrechen duerfen.

   WAS DAS ANRICHTET: Die Bestelltabelle ist eine echte <table>. Sie wuchs auf
   507 px, obwohl ihre Spalte 454 breit ist — stand also 53 px ueber den Rand
   hinaus. Sichtbar wurde es nicht am Hinweis selbst, sondern nebenan: Das
   Gutscheinfeld wurde von 265 auf 318 px breit, und der Produktname stand
   ploetzlich auf fuenf Zeilen statt zwei. Am 30.08.2026 vom Kunden bemerkt
   ("rechts stimmt was nicht"), danach gemessen.

   MERKSATZ: Ein nicht umbrechender Text in einer Tabellenzelle macht die
   ganze Tabelle breiter — und auffaellig wird das an der NACHBARSPALTE.

   Nach der Korrektur wieder: Tabelle 454, Gutscheinfeld 265, Produktname
   zweizeilig, Hinweis zweizeilig unter dem Betrag. */
.woocommerce-page.woocommerce-checkout .woocommerce-checkout .sb-checkout__grid .sb-reverse-charge,
.woocommerce-cart .sb-reverse-charge {
  display: block;
  max-width: 100%;
  white-space: normal;
  margin-top: 4px;
  line-height: 1.4;
}

/* ==========================================================================
   DIE LAENDERLISTE IN DER KASSE   (30.08.2026)
   --------------------------------------------------------------------------
   Das Feld selbst war schon hell (weisser Kasten, dunkler Text) — die
   AUFGEKLAPPTE Liste aber nicht: Grund #202530 mit weisser Schrift, also die
   dunkle Fassung mitten in der weissen Kassenspalte. Dem Kunden am
   30.08.2026 aufgefallen.

   WARUM DIE REGEL AM body HAENGT UND NICHT AN DER KASSENSPALTE: select2
   haengt seine Liste ans Ende des <body>, nicht neben das Feld. Ein Selektor
   innerhalb von #customer_details trifft sie deshalb nie.

   NUR IN DER KASSE: Im Konto stehen dieselben Listen auf dunklen Karten —
   dort ist die dunkle Fassung richtig. */
body.woocommerce-checkout .select2-dropdown {
  background: #FFFFFF !important;
  border: 1px solid #DEDEDE !important;
  border-radius: 12px !important;
  overflow: hidden;
}
body.woocommerce-checkout .select2-results__option {
  color: #181C25 !important;
}
body.woocommerce-checkout .select2-results__option--highlighted {
  background: #03A9BE !important;
  color: #FFFFFF !important;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  padding: 8px 10px !important;
  background: #FFFFFF !important;
  color: #181C25 !important;
  border: 1px solid #DEDEDE !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   KONTO — BESTELLUNGEN   (30.08.2026, Gestaltungsrunde Teil 3)
   --------------------------------------------------------------------------
   Dieselbe Sprache wie die Bestellbestaetigung: dunkle Karten, 20 px Rundung,
   derselbe Schatten, Petrol als Aktionsfarbe.

   AUSGANGSLAGE, gemessen: Zeilen ohne Karte, nur durch eine helle Haarlinie
   (1px #C1C1C1) getrennt; Produktbilder 196 px ohne Rahmen und ohne Schatten;
   rechts ein Textlink "Rechnung" ueber einem Knopf "Download".

   DIE BILDER bekommen dieselben Werte wie im Mini-Warenkorb und im Shop:
   Rahmen mit 7 Prozent Weiss, Schatten 5/5/10 bei 50 Prozent, Rundung 10 px.
   Nicht 20 px wie die Karten — ein Bild in einer Karte darf nicht so rund
   sein wie die Karte selbst, sonst wirkt es wie ein Loch darin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DER REITER UND DIE KONTODETAILS   (30.08.2026, Gestaltungsrunde Teil 3)
   --------------------------------------------------------------------------
   Beides in dieselbe Kachelsprache wie die Bestellliste.

   AUSGANGSLAGE: Der Reiter stand frei im Raum, die Kontodaten ebenso. Die
   Beschriftungen (Name, Passwort, E-Mail, Land, Kontoart) waren <b> in
   Poppins 20 px Weiss — genauso laut wie die Werte darunter.

   JETZT DASSELBE MUSTER WIE IN DER UEBERSICHT DER BESTELLBESTAETIGUNG:
   Beschriftung klein, in Versalien und gedaempft; der Wert darunter in Weiss.
   Wer die Seite ueberfliegt, sucht die Werte, nicht die Woerter davor.
   -------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-navigation {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.woocommerce-account .edit-account-preview {
  margin: 0 0 1.25rem;
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
/* DIESELBE SCHRIFT WIE AUF BESTELLUNGEN (Kundenwunsch 30.08.2026). Dort sind
   Beschriftung und Wert beide Montserrat 15,2 px, die Beschriftung in
   #9BAAB2 — nachgemessen an "Bestellnummer:" und "Datum:". Der erste Anlauf
   hatte hier das kleinere Versalien-Muster der Bestellbestaetigung genommen;
   im Konto stehen die beiden Seiten aber direkt nebeneinander, und dann
   faellt jeder Unterschied auf.

   !important, weil die Theme-Regel fuer <b> in diesem Bereich 20 px setzt. */
/* DIE SCHRIFT MIT AUSZEICHNUNG UND FUER ALLES DARIN (30.08.2026).
   Der erste Anlauf setzte font-family nur am <b> und ohne Auszeichnung — das
   Theme gewann, und die Beschriftungen standen weiter in Poppins. Nachgezaehlt
   waren es 26 Elemente im Kontobereich, die auf Poppins liefen: die
   Beschriftungen, die Feldbeschriftungen des Formulars, die Eingabefelder und
   die beiden Radioknoepfe.

   DESHALB HIER MIT DEM STERN: Poppins ist die Schrift der Ueberschriften und
   Produktnamen; in Formularen und Datenlisten laeuft der Shop auf Montserrat.
   Es ist einfacher, den ganzen Bereich zu setzen, als 26 Stellen einzeln zu
   suchen — und robuster, wenn das Theme spaeter eine 27. hinzufuegt. */
body.woocommerce-account .edit-account-preview,
body.woocommerce-account .edit-account-preview *,
body.woocommerce-account .edit-account,
body.woocommerce-account .edit-account * {
  font-family: "Montserrat", sans-serif !important;
}

body.woocommerce-account .edit-account-preview {
  font-size: 0.95rem;
}
body.woocommerce-account .edit-account-preview .flex-1 {
  font-size: 0.95rem;
}
body.woocommerce-account .edit-account-preview b {
  display: block;
  margin-bottom: 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #9BAAB2 !important;
}
/* Der Stift war ein nacktes Bild. Als Knopf im Umriss ist er als Bedienelement
   erkennbar — und passt zu "Bestelldetails" daneben. */
/* display MIT AUSZEICHNUNG: Ohne sie blieb der Link auf display: block aus
   dem Theme — das Bild sass dann an der Grundlinie statt in der Mitte des
   Rahmens. Nachgemessen nach der Korrektur: Versatz 0 in beiden Richtungen.
   line-height: 0, damit die Zeilenhoehe des Links das Bild nicht noch einmal
   nach unten schiebt. */
body.woocommerce-account .edit-account-preview .switch-edit-account {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  line-height: 0;
  border: 1px solid rgba(3, 169, 190, 0.5);
  border-radius: 12px;
}
body.woocommerce-account .edit-account-preview .switch-edit-account img {
  display: block;
}
body.woocommerce-account .edit-account-preview .switch-edit-account:hover {
  border-color: #03A9BE;
}

/* Das Formular hinter dem Stift — dieselben Felder wie bei Anmelden und
   Registrieren, nur hier MIT sichtbaren Beschriftungen: Sie stehen im Markup
   und sind nicht als screen-reader-text versteckt. */
body.woocommerce-account .edit-account {
  margin: 0 0 1.25rem;
  padding: 2rem 2.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
/* Die Zeilen des Formulars trugen aus dem Theme 44 px Innenabstand oben —
   dieselbe Stelle wie bei Anmelden und Registrieren. */
body.woocommerce-account .edit-account .woocommerce-form-row,
body.woocommerce-account .edit-account p.form-row {
  padding-top: 0 !important;
  margin: 0 0 16px !important;
}
body.woocommerce-account .edit-account label,
body.woocommerce-account .edit-account .checkbox-label,
body.woocommerce-account .edit-account .checkbox-label span {
  font-size: 0.85rem !important;
}
body.woocommerce-account .edit-account label {
  display: block;
  margin-bottom: 0.35rem;
  color: #9BAAB2;
}
body.woocommerce-account .edit-account h2,
body.woocommerce-account .edit-account h3,
body.woocommerce-account .edit-account legend {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}

/* EIN ABSTAND FUER ALLES: 40 PX (Kundenwunsch 30.08.2026)
   --------------------------------------------------------------------------
   Vorgabe war der Abstand zwischen zwei Feldern — gemessen von Unterkante
   Vorname zu Oberkante E-Mail-Adresse: 40 px. Genau der soll auch vor dem
   Speichern-Knopf, vor "Passwort ändern" und vor dem zweiten Knopf stehen.

   VORHER: 16 px vor beiden Knoepfen (viel zu eng) und 89 px vor dem
   Passwort-Abschnitt (das Feldset trug 80 px Aussenabstand, die Ueberschrift
   darin nochmal 28).

   DIE ZAHLEN SIND NICHT GLEICH, weil sie an verschiedenen Kanten ansetzen:
   Die Zeile darueber traegt schon 16 px nach unten, also fehlen 24. Vor dem
   Feldset sind es 31 statt 24 — der Knopf ist 40 px hoch und ragt 7 px aus
   seiner 33 px hohen Zeile heraus. Gemessen wird ab der Knopfkante, nicht ab
   der Zeile.

   MERKSATZ: Gleiche Abstaende heissen selten gleiche Zahlen. Was zaehlt, ist
   was man SIEHT — und das sind die Kanten der Elemente, nicht die ihrer
   Kaesten. */
body.woocommerce-account .edit-account p.woocommerce-form-row:has(button.woocommerce-Button) {
  margin-top: 24px !important;
}
body.woocommerce-account .edit-account fieldset {
  margin-top: 31px !important;
}
body.woocommerce-account .edit-account input[type="text"],
body.woocommerce-account .edit-account input[type="email"],
body.woocommerce-account .edit-account input[type="password"],
body.woocommerce-account .edit-account select,
body.woocommerce-account .edit-account .select2-selection {
  width: 100%;
  height: 49px !important;
  padding: 14px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  box-sizing: border-box;
}
/* DAS LAENDERFELD LAEUFT UEBER SELECT2, nicht ueber das native select — das
   steht daneben und ist nur 30 px breit. Sichtbar sind also die drei Teile
   von select2, und die brauchen einzeln eine Angabe:

   1. __rendered stand 6 px unter der Mitte: eigenes padding von 7 px in einem
      49-px-Kasten, der selbst schon 14 px hat. Padding auf 0, Zeilenhoehe 21.
   2. Der Pfeil ist ein SVG als background-image mit fest eingebauter dunkler
      Farbe — genau wie das Passwort-Auge. Dieselbe Loesung:
      brightness(0) invert(1). Der Kunde wollte ihn weiss.
   3. Der Pfeilkasten war 45 px hoch und oben angeschlagen; jetzt mittig. */
body.woocommerce-account .edit-account .select2-selection__rendered {
  padding: 0 !important;
  line-height: 21px !important;
  color: #FFFFFF !important;
}
body.woocommerce-account .edit-account .select2-selection__arrow {
  top: 50% !important;
  right: 12px !important;
  height: auto !important;
  transform: translateY(-50%);
}
body.woocommerce-account .edit-account .select2-selection__arrow b {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

body.woocommerce-account .edit-account input:focus,
body.woocommerce-account .edit-account select:focus {
  border-color: #03A9BE !important;
  outline: 2px solid rgba(3, 169, 190, 0.25);
  outline-offset: 0;
}
body.woocommerce-account .edit-account button[type="submit"] {
  padding: 0.8rem 1.6rem !important;
  background: #03A9BE !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}
body.woocommerce-account .edit-account button[type="submit"]:hover {
  background: #04828F !important;
}

/* DIE MELDUNG UEBER DER LISTE — ebenfalls eine Kachel (30.08.2026)
   --------------------------------------------------------------------------
   "Bestätige deine E-Mail-Adresse, um nach früheren Bestellungen zu suchen
   und diese mit deinem Konto zu verknüpfen."

   SIE KOMMT AUS WOOCOMMERCE, nicht aus dem Theme: gezeichnet am Haken
   woocommerce_before_account_orders, den orders.php ganz oben aufruft. Der
   Link traegt wc_send_verification und einen Nonce — er verschickt eine
   Bestaetigungsmail; erst der Link darin sucht Gastbestellungen mit derselben
   Adresse und haengt sie ans Konto.

   Der Knopf war grau (#E9E6ED auf #515151) mit 3 px Rundung und float:right
   — die einzige Stelle der Seite, die noch nach WooCommerce aussah. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.25rem;
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
  font-size: 0.95rem;
  line-height: 1.55;
}
/* WooCommerce setzt ein Ausrufezeichen davor. In einer Kachel, die ohnehin
   nur diesen einen Satz enthaelt, sagt es nichts dazu. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
  display: none;
}
/* Umriss statt Fuellung: Das Verknuepfen ist ein Angebot, kein Auftrag —
   dieselbe Staffelung wie bei "Bestelldetails". */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button {
  order: 2;
  flex: 0 0 auto;
  float: none !important;
  min-width: 240px;
  padding: 0.8rem 1.4rem !important;
  background: transparent !important;
  color: #03A9BE !important;
  border: 1px solid rgba(3, 169, 190, 0.5) !important;
  border-radius: 12px !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-align: center;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button:hover {
  border-color: #03A9BE !important;
}

/* EINE KACHEL JE BESTELLUNG (30.08.2026). Vorher war es eine je PRODUKT —
   zwei zusammen gekaufte Titel standen in zwei Kacheln, mit zweimal demselben
   Datum und zweimal demselben Rechnungslink. Die Kachel steht jetzt
   senkrecht: oben Datum und Rechnung, darunter die Posten. */
body.woocommerce-account .woocommerce-MyAccount-content .download-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  margin: 0 0 1.25rem;
  padding: 1.5rem 1.75rem !important;
  background: rgba(255, 255, 255, 0.04);
  /* Die helle Haarlinie des Themes wird ueberschrieben, nicht ergaenzt. */
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
/* Das Theme gibt der Bildkachel zusaetzlich 44,5 px Aussenabstand rechts.
   Zusammen mit dem Abstand des Postens (28 px) ergab das 268,5 px bis zum
   Text — eine krumme Zahl, an der sich die Kopfzeile nicht ausrichten laesst.
   Der Aussenabstand faellt deshalb weg, den Abstand macht allein der Posten.
   Damit steht der Text bei 224 px, und genau so breit ist die erste Spalte
   der Kopfzeile. */
body.woocommerce-account .sb-posten .product-featured-image {
  margin-right: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .product-featured-image img {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}

/* Kopfzeile der Kachel: Datum links, Rechnung rechts. */
body.woocommerce-account .sb-bestellung__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
/* Bestellnummer und Datum nebeneinander, beide beschriftet (30.08.2026).
   Vorher stand dort nur ein nacktes Datum — in einer Kachel, die jetzt eine
   ganze BESTELLUNG zeigt, gehoert deren Nummer dazu. */
/* DATUM AUF DER HOEHE DER PRODUKTANGABEN (Kundenwunsch 30.08.2026).
   Die erste Spalte ist deshalb so breit wie Bild plus Abstand: 196 + 28 px.
   Gemessen stand das Datum vorher bei 321 px, die Produktangaben bei 408 —
   87 px daneben. Mit fester erster Spalte fallen beide zusammen.

   ACHTUNG: Aendert sich die Bildbreite ODER der Abstand am .sb-posten,
   gehoert dieser Wert mit. 244 = 196 Bild + 48 Abstand. */
body.woocommerce-account .sb-bestellung__angaben {
  display: grid;
  grid-template-columns: 244px auto;
  gap: 0.5rem 0;
  align-items: baseline;
}
body.woocommerce-account .sb-bestellung__angabe {
  font-size: 0.95rem;
  color: #FFFFFF;
}
body.woocommerce-account .sb-bestellung__label {
  margin-right: 0.4rem;
  color: #9BAAB2;
}
/* Das Datum steckt in .order-date, und die traegt aus dem Theme ein helles
   Grau (rgb(193,193,193)) — daneben stand die Bestellnummer in Weiss.
   Gemessen am 30.08.2026, dem Kunden aufgefallen. */
body.woocommerce-account .sb-bestellung__angabe .order-date {
  /* !important, weil die Theme-Regel fuer .order-date spezifischer ist. Ohne
     sie stand das Datum weiter in rgb(193,193,193) neben einer weissen
     Bestellnummer — am 30.08.2026 zweimal nachgemessen, beim zweiten Mal mit
     Auszeichnung. */
  color: inherit !important;
  font-size: inherit !important;
}
/* Die Rechnungszeile im Kopf soll nicht die halbe Kachel breit werden. */
body.woocommerce-account .sb-bestellung__kopf .sb-konto-zeile {
  flex: 0 0 auto;
  min-width: 240px;
}

/* Ein Posten je gekauftem Produkt. Der Trenner steht ZWISCHEN den Posten,
   nicht um sie herum — die Kachel hat ihren Rahmen schon. */
/* align-items: stretch, damit Text und Knopf die HOEHE DES BILDES bekommen —
   nur dann laesst sich beides darin verteilen und mittig setzen. */
body.woocommerce-account .sb-posten {
  display: flex;
  /* 3rem statt 1.75rem — Kundenwunsch 30.08.2026, Datum und Produkttexte
     sollten weiter nach rechts. Der Wert haengt mit der ersten Spalte der
     Kopfzeile zusammen: 196 px Bild + 48 px Abstand = 244 px. Wer hier
     aendert, aendert dort mit. */
  gap: 3rem;
  align-items: stretch;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
body.woocommerce-account .sb-posten:last-child {
  padding-bottom: 0;
}
/* Die Angaben verteilen sich gleichmaessig ueber die Bildhoehe: Name oben,
   Untertitel in der Mitte, Preis unten. Die Eigenabstaende der Elemente
   muessen dafuer weg — sonst rechnet space-between mit ihnen zusammen und
   die Verteilung ist wieder ungleich. */
/* NAEHER ZUSAMMEN statt ueber die ganze Bildhoehe verteilt (Kundenwunsch
   30.08.2026). space-between hat die drei Zeilen bis an die Bildkanten
   auseinandergezogen; jetzt stehen sie als Block in der Mitte, mit festem
   kleinem Abstand. */
body.woocommerce-account .sb-posten .product-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
}
/* DIE EIGENABSTAENDE DES THEMES MUESSEN WEG, und zwar mit Auszeichnung.
   Gemessen am 30.08.2026: Der Umschalter trug 19,5 px oben und 34 px unten,
   die Beschreibung nochmal 34 px. Aufgeklappt war die Textspalte damit
   267 px hoch — hoeher als das Bild — und die Kachel sprang beim Aufklappen
   um 62 px auf. Ohne diese Abstaende bleibt sie bei 196 px und damit unter
   der Bildhoehe: Die Kachel steht still. */
body.woocommerce-account .sb-posten .product-info > * {
  margin: 0 !important;
}

/* Der Preis steht bewusst abgesetzt (Kundenwunsch 30.08.2026). */
body.woocommerce-account .sb-posten .product-info .item-price {
  margin-top: 25px !important;
}
/* Die Menge steht nur da, wenn sie groesser als eins ist — sie erklaert dann,
   warum Einzelpreis und Bezahltes auseinanderfallen. */
body.woocommerce-account .sb-menge {
  margin-left: 0.4rem;
  color: #9BAAB2;
  font-weight: 400;
}

/* DER UMSCHALTER UND SEIN PFEIL.
   Das Theme macht daraus ein blockbreites Element und setzt den Pfeil
   absolut auf right: -30px — bei voller Breite landete er weit rechts im
   Nichts. Der Umschalter ist deshalb nur so breit wie sein Text, der Pfeil
   sitzt an seinem rechten Rand und dreht sich beim Aufklappen. */
body.woocommerce-account .sb-posten .toggle-description {
  display: inline-block !important;
  position: relative;
  width: auto !important;
  max-width: max-content;
  padding-right: 28px !important;
}
body.woocommerce-account .sb-posten .toggle-description::after {
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: -5px !important;
  transition: transform 0.2s ease;
}
body.woocommerce-account .sb-posten .toggle-description.active::after {
  transform: rotate(180deg);
}

/* Der Knopf steht mittig zum Bild (Kundenwunsch 30.08.2026). Nachgemessen:
   Bildmitte und Knopfmitte beide bei 306 px. */
body.woocommerce-account .sb-posten .product-action {
  justify-content: center;
}

/* Rechts zwei Zeilen untereinander statt Textlink plus Knopf. */
body.woocommerce-account .woocommerce-MyAccount-content .product-action {
  display: flex !important;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
  min-width: 240px;
}
body.woocommerce-account .sb-konto-zeile {
  display: block;
  padding: 0.8rem 1.4rem;
  border-radius: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}
/* Das Produkt ist, wofuer der Kunde bezahlt hat — gefuellt. Die Rechnung ist
   die Nebenhandlung — Umriss. Dieselbe Staffelung wie auf der Anmeldeseite. */
body.woocommerce-account .sb-konto-zeile--produkt {
  background: #03A9BE;
  color: #FFFFFF;
}
body.woocommerce-account .sb-konto-zeile--produkt:hover {
  background: #04828F;
}
body.woocommerce-account .sb-konto-zeile--rechnung {
  background: transparent;
  color: #03A9BE;
  border: 1px solid rgba(3, 169, 190, 0.5);
}
body.woocommerce-account .sb-konto-zeile--rechnung:hover {
  border-color: #03A9BE;
}

/* Der Umschalter heisst jetzt "Lizenzschlüssel" und traegt den Schluessel.
   Die KLASSEN sind unveraendert: Das Auf- und Zuklappen haengt in main.js an
   '.toggle-description' und schaltet das folgende '.item-description'. */
body.woocommerce-account .woocommerce-MyAccount-content .toggle-description {
  display: inline-block;
  margin-top: 0.4rem;
  color: #9BAAB2;
  font-size: 0.9rem;
  cursor: pointer;
}
body.woocommerce-account .woocommerce-MyAccount-content .item-description .sb-lizenz {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-user-select: all;
  user-select: all;
}

/* ==========================================================================
   ANMELDEN UND REGISTRIEREN   (30.08.2026, Gestaltungsrunde Teil 2)
   --------------------------------------------------------------------------
   AUSGANGSLAGE, gemessen am abgemeldeten Zustand (dafuer hat der Kunde sich
   abgemeldet — angemeldet sieht man weder das Formular noch den Firmen-Haken):

     - Ueberschrift 40 px mit 100 px Abstand darunter. Dieselbe Ausgangslage
       wie auf der Bestaetigungsseite vor Fassung 49.
     - Felder mit 4 px Rundung, das Laenderfeld daneben OHNE Kasten, nur mit
       Unterstrich — zwei Feldsprachen nebeneinander in einer Zeile.
     - Knoepfe als schmale Umrisse (34 px hoch, 4 px Rundung), waehrend der
       Kopfbereich derselben Seite einen gefuellten Petrol-Knopf zeigt.
     - Jede Formularzeile trug 44 px Innenabstand oben.
     - Beschriftungen sind screen-reader-text, also unsichtbar. Die Felder
       tragen ihre Bezeichnung im Platzhalter — das ist die Hausart, auch in
       der Kasse, und bleibt so.

   ZWEI BEFUNDE, die man sehen muss, um die Regeln zu verstehen:

   1. DIE ZEILEN SIND GEFLOATET (float: left / right). Ein Formular mit
      Hintergrund umschliesst sie deshalb NICHT — die Karte endete oberhalb
      ihres eigenen Inhalts. Dagegen display: flow-root.

   2. DER ABSENDEKNOPF TRAEGT position: relative; top: 53px. Im Theme ist er
      um 53 px nach unten geschoben; in einer Karte haengt er damit unten
      heraus. Er wird deshalb auf position: static zurueckgesetzt.

      MERKSATZ: Bevor man einem fremden Formular einen Rahmen gibt, nachsehen,
      WIE seine Teile stehen. Floats und verschobene Knoepfe fallen erst auf,
      wenn ein Hintergrund da ist, der sie umschliessen soll.

   WARUM SO VIELE !important: Die Feld- und Knopfregeln des Themes sind
   spezifischer als alles, was hier ohne Auszeichnung erreichbar waere. Die
   Alternative waeren Selektorketten, die niemand mehr lesen kann.

   NICHT die weisse Karte der Kassenspalte, sondern dieselbe dunkle Karte wie
   die Bestellbestaetigung — so entschieden vom Kunden am 30.08.2026 fuer die
   Bestaetigungsseite, und hier gilt derselbe Grund.
   ========================================================================== */

/* Nur im abgemeldeten Zustand: Angemeldet traegt dieselbe Seite die
   Ueberschriften der Kontobereiche, und die sollen ihre Groesse behalten. */
body.woocommerce-account:not(.logged-in) .site-content h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
}

body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register {
  display: flow-root;
  max-width: 900px;
  margin: 0 0 2rem;
  padding: 2rem 2.25rem !important;
  background: rgba(255, 255, 255, 0.04);
  /* BEIDES MIT AUSZEICHNUNG, aus demselben Grund: Die Theme-Regel
     .woocommerce-page.woocommerce-account .site-content .woocommerce form
     setzt Rahmen UND Rundung zurueck und ist mit vier Klassen spezifischer
     als diese hier. Am 30.08.2026 zweimal nachgemessen — erst kam die Karte
     mit 0 px Rundung heraus, nach deren Korrektur fiel auf, dass auch der
     Rahmen fehlte (0px none, waehrend die Karte daneben ihren 1px hatte).
     Beide Formulare waren betroffen, Anmelden wie Registrieren. */
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
/* Die Anmeldung hat zwei Felder — 900 px waeren eine leere Flaeche. */
body.woocommerce-account .woocommerce form.login {
  max-width: 520px;
}

body.woocommerce-account .woocommerce form.login .woocommerce-form-row,
body.woocommerce-account .woocommerce form.login p.form-row,
body.woocommerce-account .woocommerce form.register .woocommerce-form-row,
body.woocommerce-account .woocommerce form.register p.form-row {
  padding-top: 0 !important;
  margin: 0 0 16px !important;
}
body.woocommerce-account .woocommerce form.register > div.woocommerce-form-row:first-child {
  margin-bottom: 22px !important;
}

/* Felder: dieselben Masse wie in der Kasse (Rundung 12, Hoehe 49,
   Innenabstand 14), nur in Dunkel statt in Weiss. Der Grund ist dunkler als
   die Karte — ein Feld mit demselben Wert waere darauf unsichtbar. */
body.woocommerce-account .woocommerce form.login input[type="text"],
body.woocommerce-account .woocommerce form.login input[type="password"],
body.woocommerce-account .woocommerce form.register input[type="text"],
body.woocommerce-account .woocommerce form.register input[type="password"],
body.woocommerce-account .woocommerce form.register input[type="email"],
body.woocommerce-account .woocommerce form.register .select2-selection {
  width: 100%;
  height: 49px !important;
  padding: 14px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  box-sizing: border-box;
}
/* Das Laenderfeld laeuft ueber select2 und braucht seine eigenen zwei Zeilen,
   sonst sitzt der Text oben im Kasten und der Pfeil daneben. */
body.woocommerce-account .woocommerce form.register .select2-selection__rendered {
  padding: 0 !important;
  color: #FFFFFF !important;
  line-height: 21px !important;
}
body.woocommerce-account .woocommerce form.register .select2-selection__arrow {
  top: 12px !important;
  right: 8px !important;
}
body.woocommerce-account .woocommerce form.login input::placeholder,
body.woocommerce-account .woocommerce form.register input::placeholder {
  color: #9BAAB2;
  opacity: 1;
}
body.woocommerce-account .woocommerce form.login input:focus,
body.woocommerce-account .woocommerce form.register input:focus {
  border-color: #03A9BE !important;
  outline: 2px solid rgba(3, 169, 190, 0.25);
  outline-offset: 0;
}

/* Knoepfe wie im uebrigen Shop: gefuellt, 12 px Rundung, Montserrat 600. */
body.woocommerce-account .woocommerce form.login button[name="login"],
body.woocommerce-account .woocommerce form.register button[name="register"] {
  display: inline-block !important;
  /* HIER WIRD DIE VERSCHIEBUNG AUS DEM THEME ZURUECKGENOMMEN (top: 53px). */
  position: static !important;
  top: auto !important;
  height: auto !important;
  margin: 6px 0 0 !important;
  padding: 0.8rem 1.6rem !important;
  background: #03A9BE !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}
body.woocommerce-account .woocommerce form.login button[name="login"]:hover,
body.woocommerce-account .woocommerce form.register button[name="register"]:hover {
  background: #04828F !important;
}
/* Der Weg zur Registrierung ist die NEBENhandlung auf der Anmeldeseite —
   also Umriss statt Fuellung, damit die Anmeldung die Hauptsache bleibt. */
body.woocommerce-account .woocommerce form.login a.form-control {
  display: inline-block !important;
  margin-bottom: 0 !important;
  padding: 0.8rem 1.6rem !important;
  background: transparent !important;
  color: #03A9BE !important;
  border: 1px solid rgba(3, 169, 190, 0.5) !important;
  border-radius: 12px !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none;
}

/* Der Abstand unter "Passwort vergessen?" war 109 px. */
body.woocommerce-account .woocommerce form.login .woocommerce-LostPassword {
  margin: 0 0 1.25rem !important;
  font-size: 0.85rem;
  font-weight: 400;
}
body.woocommerce-account .woocommerce form.login .woocommerce-LostPassword a {
  color: #9BAAB2;
  text-decoration: underline;
}
body.woocommerce-account .woocommerce form.login p.register-question {
  margin: 0 0 0.75rem !important;
  font-size: 0.9rem;
  color: #9BAAB2;
}
/* DIE PASSWORT-AUGEN IN WEISS (Kundenwunsch 30.08.2026).
   Das Auge ist KEIN Schriftzeichen und keine Textfarbe: Es ist ein SVG als
   background-image auf dem ::before des Knopfes, 22 x 22 px, mit fest
   eingebauter dunkler Fuellung. color: #FFFFFF laesst es deshalb kalt.
   brightness(0) macht alles Sichtbare schwarz, invert(1) dreht es auf Weiss —
   das wirkt unabhaengig davon, welche Farbe im SVG steht. Die 75 Prozent
   nehmen ihm die Haerte, sonst ist es lauter als der Feldtext daneben. */
body.woocommerce-account .woocommerce .password-input .show-password-input::before {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
body.woocommerce-account .woocommerce .password-input .show-password-input:hover::before {
  opacity: 1;
}

body.woocommerce-account .woocommerce form.login input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  accent-color: #03A9BE;
}

/* --------------------------------------------------------------------------
   DIE ZWEITE KARTE NEBEN DER ANMELDUNG   (30.08.2026)
   --------------------------------------------------------------------------
   Gezeichnet wird sie in studiobro-checkout.php an
   woocommerce_after_customer_login_form. Hier steht nur, wo sie hingehoert.

   DIE BREITEN: 520 (Anmelden) + 30 (Abstand) + 350 = 900 — genau die Breite
   der Registrieren-Karte auf derselben Seite. Beide Ansichten haben damit
   dieselbe rechte Kante. Am 30.08.2026 nachgemessen: 110 bis 630 und 660 bis
   1010.

   DAS RASTER GILT NUR, WENN UNSERE KARTE DA IST (:has). In der
   Registrieren-Ansicht steht dieselbe Huelle, dort aber mit einem einzigen
   900 px breiten Formular — ein zweispaltiges Raster wuerde es zerlegen.
   Kann ein Browser :has nicht, greift das Raster nicht und die Karten stehen
   untereinander. Sichtbar anders, aber nicht kaputt.

   display: grid MIT AUSZEICHNUNG, weil das Theme auf derselben Huelle
   display: flex setzt und spezifischer ist. */
body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) {
  display: grid !important;
  grid-template-columns: 520px 350px !important;
  /* NUR IN DER WAAGERECHTEN. Ein Zeilenabstand kaeme zu den 50 px unter der
     Ueberschrift hinzu — gemessen ergab gap: 30px dort 80 statt 50 px. Die
     Abstaende nach unten regeln die Elemente selbst. */
  column-gap: 30px !important;
  row-gap: 0 !important;
  align-items: start !important;
}
/* WooCommerce haengt an diese Huelle dieselben Aufraeum-Pseudoelemente wie
   an die Uebersichtsliste der Bestellbestaetigung (content: " "). Im Raster
   werden daraus KINDER: Am 30.08.2026 gemessen ergab das fuenf Rasterzeilen
   bei vier Elementen, die letzte 0 px hoch — und eine 30-px-Luecke davor, die
   unter der Karte als Leerraum stand. Dieselbe Falle wie in Fassung 56, nur
   an einem anderen Element.

   MERKSATZ, jetzt zum zweiten Mal: Wer display:flex oder display:grid auf ein
   FREMDES Element setzt, macht dessen Pseudoelemente zu Kindern in der Reihe.
   Bei einem neuen Raster IMMER zuerst die Zeilen zaehlen. */
body.woocommerce-account div.woocommerce:has(> .sb-konto-neu)::before,
body.woocommerce-account div.woocommerce:has(> .sb-konto-neu)::after {
  content: none;
  display: none;
}

/* 50 PX UNTER DER UEBERSCHRIFT (Kundenwunsch 30.08.2026).
   Die Ueberschrift trug 100 px Aussenabstand aus dem Theme; die Regel aus
   Fassung 58 setzt zwar die Groesse, verliert aber beim Abstand, weil sie ihn
   als Kurzschreibweise (margin) setzt und die Theme-Regel margin-bottom
   einzeln und spaeter setzt.

   ZUERST STAND HIER EINE REGEL FUER DEN ABSTAND NACH UNTEN — das war ein
   Missverstaendnis: "der nachfolgende Container" ist die KARTE unter der
   Ueberschrift, nicht der Abschnitt unter der Karte. Der Abstand nach unten
   bleibt deshalb, wie das Theme ihn setzt. */
body.woocommerce-account:not(.logged-in) div.woocommerce > h2 {
  margin-bottom: 50px !important;
}

body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) > .woocommerce-notices-wrapper,
body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) > h2 {
  grid-column: 1 / -1;
}
body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) > form.login {
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Der alte Block in der Vorlage. Er steht fest in form-login.php und haengt
   an keinem Haken; entfernen hiesse, die Vorlage zu aendern. Ausgeblendet
   wird er NUR, wenn unsere Karte tatsaechlich da ist — sonst fehlte der Weg
   zur Registrierung ganz. */
body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) > form.login p.register-question,
body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) > form.login a.form-control {
  display: none !important;
}

body.woocommerce-account .sb-konto-neu {
  padding: 2rem 2.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px !important;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
body.woocommerce-account .sb-konto-neu h2 {
  margin: 0 0 0.75rem !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.005em;
}
body.woocommerce-account .sb-konto-neu p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
body.woocommerce-account .sb-konto-neu ul {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
body.woocommerce-account .sb-konto-neu li {
  position: relative;
  margin: 0 0 0.55rem;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #9BAAB2;
}
/* Der Punkt ist gezeichnet statt aufgezaehlt — ein list-style-Punkt sitzt in
   dieser Schrift zu hoch und laesst sich nicht einfaerben. */
body.woocommerce-account .sb-konto-neu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #03A9BE;
}
body.woocommerce-account .sb-konto-neu__knopf {
  margin: 0 !important;
}
body.woocommerce-account .sb-konto-neu__link {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: transparent;
  color: #03A9BE;
  border: 1px solid rgba(3, 169, 190, 0.5);
  border-radius: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
body.woocommerce-account .sb-konto-neu__link:hover {
  border-color: #03A9BE;
}

/* Das Auge sass am oberen Rand des Feldes: WooCommerce setzt top: 0.7em und
   verschiebt um die halbe eigene Hoehe — das passt zu einem niedrigen Feld,
   nicht zu 49 px. Mitte statt Rechnung. */
body.woocommerce-account .woocommerce .password-input .show-password-input {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ==========================================================================
   BESTELLBESTAETIGUNG — DUNKLE KARTEN   (30.08.2026, Gestaltungsrunde)
   --------------------------------------------------------------------------
   Vorher: die WooCommerce-Standardausgabe im dunklen Layout — seitenbreite
   Tabellen mit Haarlinien, 40-px-Ueberschrift, und die DOWNLOADS als graue
   Tabellenzeile mittendrin. Das ist das, wofuer der Kunde bezahlt hat.

   Jetzt dieselbe Sprache wie die rechte Kassenspalte und der
   Mini-Warenkorb: gerundete Karten auf dunklem Grund, Petrol als
   Aktionsfarbe. Kundenentscheidung vom 30.08.2026.

   Gemessene Ausgangswerte: Ueberschrift 40 px, Tabellen 1149 px breit,
   Rundung 5 px, Knopf 4 px.
   ========================================================================== */

body.woocommerce-order-received .woocommerce-order {
  max-width: 900px;
}

/* Die Ueberschrift war 40 px und damit lauter als alles auf der Seite. */
body.woocommerce-order-received .woocommerce-notice--success {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
}

/* Uebersicht: aus der Aufzaehlung wird eine Karte mit den Eckdaten.
   --------------------------------------------------------------------------
   AB 30.08.2026 EIN RASTER STATT EINER FLEX-REIHE. Drei Fehler auf einmal,
   alle am 30.08.2026 an Bestellung 2163 gemessen:

   1. DIE BESTELLNUMMER STAND 40 PX ZU WEIT RECHTS (bei 175 statt bei 135).
      Grund: WooCommerce haengt an diese Liste die Aufraeum-Pseudoelemente
      ::before und ::after mit content: " ". Im Flex-Kasten werden daraus
      EIGENE ELEMENTE — null Pixel breit, aber jedes verbraucht eine
      40-px-Luecke. Sie sind deshalb abgeschaltet.

      MERKSATZ: Wer display:flex auf ein fremdes Element setzt, macht dessen
      Pseudoelemente zu Kindern in der Reihe. Ein Clearfix, der jahrelang
      unsichtbar war, wird damit zu einer Spalte.

   2. DIE ZAHLUNGSART STAND ALLEIN IN DER ZWEITEN ZEILE. Von fuenf Angaben
      passten vier nebeneinander, die fuenfte rutschte um.

   3. BEI LANGEN MAILADRESSEN BRACH DAS LAYOUT. Der Posten war 350 px breit
      und schob den Rest vor sich her.

   ALLE DREI HAT DIESELBE ENTSCHEIDUNG ERLEDIGT: Die vier kurzen Angaben
   stehen in gleich breiten Spalten, die MAILADRESSE bekommt eine eigene
   Zeile ueber die volle Breite. Sie ist die einzige, deren Laenge man nicht
   kennt — also ist sie die einzige, die nicht in eine Spalte gezwungen wird.
   Damit gibt es auch keinen einzelnen Rest in der zweiten Zeile mehr. */
body.woocommerce-order-received ul.woocommerce-order-overview {
  display: grid;
  /* FESTE SPALTENZAHL, KEIN auto-fit. Mit auto-fit ergaben sich bei 600 px
     drei Spalten — und bei vier kurzen Angaben stand die Zahlungsart wieder
     allein in der zweiten Zeile, genau der Fehler, der wegsollte. Vier kurze
     Angaben gehen ohne Rest nur in vier, zwei oder eine Spalte auf. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 2.5rem;
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.5rem;
  list-style: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after {
  content: none;
  display: none;
}
/* Ohne min-width: 0 waechst eine Rasterspalte an ihrem laengsten Wort. */
body.woocommerce-order-received ul.woocommerce-order-overview li {
  min-width: 0;
}
body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__email {
  grid-column: 1 / -1;
  order: 9;
}
/* Eine Adresse ohne Leerzeichen bricht sonst gar nicht. */
body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__email strong {
  overflow-wrap: anywhere;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9BAAB2;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: #FFFFFF;
}

/* Jeder Abschnitt eine Karte — auch unsere drei eigenen. */
body.woocommerce-order-received .woocommerce-order-downloads,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .sb-danke__block {
  margin: 0 0 1.25rem;
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  /* SCHATTEN WIE BEI DEN PRODUKTBILDERN (Kundenwunsch 30.08.2026). Es sind
     dieselben Werte, mit denen die Bilder im Shop und im Mini-Warenkorb
     gesetzt sind — deshalb nicht weicher und nicht mittiger, sondern genau
     diese: 5/5/10 bei 50 Prozent Schwarz. Damit heben sich die Karten vom
     dunklen Grund ab, was der Rahmen mit 10 Prozent allein nicht schafft. */
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.5);
}
/* FRUEHER war der Beleg-Block "leise": ohne Grund und ohne Schatten. Der
   Kunde will ihn am 30.08.2026 wie die anderen Container — und das geht nur
   ganz oder gar nicht: Ein Schatten unter einer durchsichtigen Flaeche saehe
   nach Fehler aus. Der Block ist deshalb jetzt eine Karte wie die anderen,
   die Klasse --leise bleibt nur als Handgriff fuer spaeter stehen. */
body.woocommerce-order-received .woocommerce-order-downloads h2,
body.woocommerce-order-received .woocommerce-order-details h2,
body.woocommerce-order-received .woocommerce-customer-details h2,
body.woocommerce-order-received .sb-danke__block h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}
body.woocommerce-order-received .sb-danke__block p { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.55; }
body.woocommerce-order-received .sb-danke__wert { font-family: "Montserrat", sans-serif; font-weight: 600; }
body.woocommerce-order-received .sb-danke__klein { margin: 0; font-size: 0.8rem; line-height: 1.5; color: #9BAAB2; }

/* Tabellen: die Haarlinien-Kaesten fallen weg, es bleiben Zeilentrenner. */
body.woocommerce-order-received .woocommerce-order table.woocommerce-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}
body.woocommerce-order-received .woocommerce-order table.woocommerce-table th,
body.woocommerce-order-received .woocommerce-order table.woocommerce-table td {
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  vertical-align: middle;
}
body.woocommerce-order-received .woocommerce-order table.woocommerce-table thead th {
  padding-top: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9BAAB2;
}
body.woocommerce-order-received .woocommerce-order table.woocommerce-table tfoot tr:last-child th,
body.woocommerce-order-received .woocommerce-order table.woocommerce-table tfoot tr:last-child td {
  border-bottom: 0;
  font-size: 1.05rem;
}

/* DER REVERSE-CHARGE-HINWEIS UNTER DER GESAMTSUMME (30.08.2026).
   Dieselbe Falle wie in der Kasse am selben Tag: .includes_tax erbt vom Theme
   white-space: nowrap, und ein nicht umbrechender Text in einer Tabellenzelle
   macht die ganze Tabelle breiter. Hier steht er in der schmalen
   Betragsspalte — ohne diese Regel drueckt er die Summenzeile auseinander. */
body.woocommerce-order-received .sb-reverse-charge,
body.woocommerce-view-order .sb-reverse-charge {
  display: block;
  max-width: 100%;
  white-space: normal;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: #9BAAB2;
}

/* DER LIZENZSCHLUESSEL (30.08.2026, an Bestellung 2163 nachgesehen)
   --------------------------------------------------------------------------
   ER HAT NIE GEFEHLT. Das Plugin FS-License-Manager haengt seine Ausgabe in
   die Bestelldetails: <h4>License Key</h4> plus eine eigene Tabelle
   table.fslm-license-keys-table. Die traegt aber NICHT die Klasse
   woocommerce-table, auf die unsere Regeln zielen — also blieb sie im alten
   Zustand stehen: Haarlinienkasten, 5 px Rundung, Kopfzeile wie Fliesstext.
   Zwischen zwei Karten sah das aus, als gehoere es nicht dazu.

   MERKSATZ: Fremde Ausgabe faellt nicht auf, weil sie fehlt, sondern weil sie
   die eigenen Klassen nicht kennt. */
body.woocommerce-order-received .fslm-license-keys-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}
body.woocommerce-order-received .fslm-license-keys-table th,
body.woocommerce-order-received .fslm-license-keys-table td {
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  vertical-align: top;
}
body.woocommerce-order-received .fslm-license-keys-table tr:last-child th,
body.woocommerce-order-received .fslm-license-keys-table tr:last-child td {
  border-bottom: 0;
}
body.woocommerce-order-received .fslm-license-keys-table thead th {
  padding-top: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9BAAB2;
}

/* Die Ueberschrift des Plugins ist ein h4 und stand als Fliesstext da. Sie
   bekommt dieselbe Groesse wie die uebrigen Abschnitte, dazu Luft nach oben —
   sie folgt direkt auf die Summenzeile der Bestelltabelle. */
body.woocommerce-order-received .woocommerce-order-details h4 {
  margin: 1.75rem 0 1rem;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}

/* Der Schluessel ist das, was der Kunde von dieser Seite abschreibt. */
body.woocommerce-order-received .fslm-license-keys-table td:last-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-user-select: all;
  user-select: all;
}

/* Die Anschrift stand in einem Haarlinienkasten mit 5 px Rundung — derselbe
   Rest der Standardausgabe wie bei der Lizenztabelle, nur eine Karte weiter. */
body.woocommerce-order-received .woocommerce-customer-details address {
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* DIE EIGENE TABELLE DES PLUGINS wird NICHT hier versteckt, sondern in
   studiobro-checkout.php abgehaengt, sobald ihr Inhalt in der
   Download-Tabelle steht. Grund: Bei einer Bestellung ohne herunterladbare
   Ware gibt es keine Download-Tabelle — dann bleibt die Tabelle des Plugins
   stehen, und die Regeln darunter gestalten sie. Eine display:none-Regel
   haette den Schluessel in genau diesem Fall verschwinden lassen. */

/* DER SCHLUESSEL IN DER DOWNLOAD-TABELLE (30.08.2026).
   Er ist das, was der Kunde abschreibt — also mit Gewicht und so, dass ein
   Doppelklick ihn ganz greift. "nicht benötigt" ist dagegen eine Nebenaussage
   und tritt zurueck. */
.sb-lizenz {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-user-select: all;
  user-select: all;
}
.sb-lizenz--keine {
  font-weight: 400;
  letter-spacing: normal;
  color: #9BAAB2;
  -webkit-user-select: auto;
  user-select: auto;
}

/* DIE UEBERSCHRIFT UEBER DER KNOPFSPALTE stand links, der Knopf darunter
   fuellte die Spalte nicht aus — damit sass die Beschriftung ueber dem linken
   Rand des Knopfes statt ueber dem Knopf. Am 30.08.2026 vom Kunden bemerkt.
   Kopf UND Zelle stehen jetzt mittig, damit fallen beide Mitten zusammen. */
body.woocommerce-order-received .woocommerce-table--order-downloads th.download-file,
body.woocommerce-order-received .woocommerce-table--order-downloads td.download-file {
  text-align: center;
}

/* Der Dateiname steht seit dem 30.08.2026 unter dem Produktnamen statt auf
   dem Knopf. Bewusst OHNE body-Klasse davor: Dieselbe Tabelle steht im
   Kundenkonto unter "Downloads", und dort soll es genauso aussehen. */
.sb-download__datei {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #9BAAB2;
}

/* Der Download-Knopf ist die Hauptsache auf dieser Seite. */
body.woocommerce-order-received .woocommerce-MyAccount-downloads-file,
body.woocommerce-order-received .sb-danke__knopf {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: #03A9BE;
  border: 0;
  border-radius: 12px;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
body.woocommerce-order-received .woocommerce-MyAccount-downloads-file:hover,
body.woocommerce-order-received .sb-danke__knopf:hover { background: #04828F; }

@media screen and (max-width: 780px) {
  body.woocommerce-order-received ul.woocommerce-order-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  body.woocommerce-order-received .woocommerce-order-downloads,
  body.woocommerce-order-received .woocommerce-order-details,
  body.woocommerce-order-received .woocommerce-customer-details,
  body.woocommerce-order-received .sb-danke__block,
  body.woocommerce-order-received ul.woocommerce-order-overview {
    padding: 1.15rem 1.15rem;
    border-radius: 16px;
  }
  body.woocommerce-order-received .woocommerce-order table.woocommerce-table { font-size: 0.9rem; }
}

@media screen and (max-width: 480px) {
  body.woocommerce-order-received ul.woocommerce-order-overview {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   studiobro — Die Handy-Ansichten nachgezogen   (Fassung 88, 30.08.2026)
   --------------------------------------------------------------------------
   Drei Stellen, die auf dem Schreibtisch stimmten und auf dem Handy nicht:
   Anmelden, Registrieren und die Bestellliste im Konto. Alle drei haben
   dieselbe Ursache — feste Breiten und feste Spalten, die auf dem grossen
   Bildschirm nachgemessen wurden und auf dem kleinen nicht mehr hineinpassen.

   MERKSATZ: Eine nachgemessene feste Breite ist immer nur fuer die Breite
   nachgemessen, bei der gemessen wurde. Wer 520 + 30 + 350 setzt, hat damit
   auch entschieden, dass es unter 900 px bricht — nur hat es niemand
   aufgeschrieben. Jetzt schon.

   Rueckweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANMELDEN: aus zwei Spalten wird eine
   --------------------------------------------------------------------------
   DIE RECHNUNG, DIE DEN UMBRUCHPUNKT BESTIMMT: Das Raster ist 520 + 30 + 350
   = 900 px breit und kennt keine kleinere Fassung. Die Huelle traegt bis
   1280 px je 40 px Innenabstand, braucht also 980 px Fensterbreite. Ab 979 px
   abwaerts stand die Anmeldekarte deshalb ueber dem rechten Rand hinaus und
   die Karte "Neu bei studiobro?" ganz ausserhalb des Bildschirms — am
   30.08.2026 bei 479 px nachgemessen: Dokumentbreite 920 statt 479, die
   zweite Karte begann bei 570.

   DESHALB 980 px UND KEIN RUNDER WERT. Das ist keine Schaetzung, sondern die
   Breite, ab der die Rechnung nicht mehr aufgeht. */
@media screen and (max-width: 980px) {

  body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Die Anmeldekarte traegt aus dem Theme width UND max-width auf 520 px. Die
     Grundregel setzt schon width: 100%, das allein reicht aber nicht — die
     max-width deckelt es weiterhin auf 520. Gemessen: Karte 520 px breit in
     einem 439 px breiten Platz. */
  body.woocommerce-account div.woocommerce:has(> .sb-konto-neu) > form.login {
    max-width: none !important;
  }

  /* DER ABSTAND ZWISCHEN DEN KARTEN ALS AUSSENABSTAND, NICHT ALS row-gap.
     Ein row-gap gaelte auch unter der Ueberschrift, die ueber beide Spalten
     laeuft — dort stehen bereits 50 px, es wuerden 80. Genau diese Falle ist
     in der Grundregel schon einmal aufgetreten und dort mit row-gap: 0
     abgestellt worden. */
  body.woocommerce-account .sb-konto-neu {
    margin-top: 30px;
  }
}

/* --------------------------------------------------------------------------
   2. REGISTRIEREN: ein Feld je Zeile
   --------------------------------------------------------------------------
   Hier lief nichts ueber den Rand — das Formular ist von Haus aus
   nachgiebig. Es wurde nur zu eng: Das Theme stellt die Felder paarweise
   nebeneinander (rund 47 % Breite mit float), und bei 479 px blieben je
   172 px. "Land/Region auswählen" war auf "Land/Region auswä…" abgeschnitten,
   "Passwort wiederholen*" passte gerade eben.

   AB 600 px ABWAERTS steht jedes Feld allein. Der Wert ist die Breite, unter
   der zwei Felder nebeneinander schmaler als 250 px werden — darunter passt
   die laengste Beschriftung des Formulars nicht mehr.

   NUR IM REGISTRIERFORMULAR. Dieselben Klassen traegt auch die Kasse, deren
   Handy-Ansicht in Fassung 85 eigens gebaut wurde; die bleibt unberuehrt. */
@media screen and (max-width: 600px) {

  body.woocommerce-account form.register p.form-row {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   3. BESTELLUNGEN: Kopfzeile und Meldung untereinander
   --------------------------------------------------------------------------
   Zwei Reihen in der Bestellliste stehen auf dem Schreibtisch nebeneinander
   und muessen auf dem Handy untereinander:

     - die Kachelkopfzeile aus Bestellnummer, Datum und "Bestelldetails"
     - die WooCommerce-Meldung "Bestätige deine E-Mail-Adresse" mit ihrem Knopf

   BEIDE HABEN DIESELBE BAUART: ein flex mit justify-content: space-between
   und einem Knopf mit min-width: 240px. Auf dem Handy bleiben fuer den Text
   daneben kaum noch 100 px. Deshalb dieselbe Loesung fuer beide.

   DAS DATUM RUECKT MIT. Es steht in einem Raster mit fester erster Spalte von
   244 px — dem Mass aus Bild plus Abstand, damit es auf dem Schreibtisch
   genau ueber der Produktbeschreibung sitzt. Auf dem Handy steht das Bild
   nicht mehr daneben, das Mass zeigt also ins Leere. Eine Spalte, Datum unter
   der Bestellnummer.

   780 px IST DER UMBRUCHPUNKT DER SEITE, nicht ein eigener: Kopfbereich,
   Warenkorb und Mini-Warenkorb brechen alle dort. */
@media screen and (max-width: 780px) {

  body.woocommerce-account .sb-bestellung__kopf {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  body.woocommerce-account .sb-bestellung__angaben {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem 0;
  }

  /* Beide Knoepfe ueber die volle Breite. min-width faellt weg, sonst haelt es
     die Kachel von innen auseinander, sobald sie schmaler als 240 px wird. */
  body.woocommerce-account .sb-bestellung__kopf .sb-konto-zeile,
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button {
    min-width: 0;
    width: 100%;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
}


/* ==========================================================================
   studiobro — Symbole in den Feldern und der Knopf in der Kachel
   (Fassung 89, 30.08.2026)
   --------------------------------------------------------------------------
   Rueckweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DAS AUGE IM PASSWORTFELD SASS 13 PX ZU TIEF
   --------------------------------------------------------------------------
   GEMESSEN am 30.08.2026 auf Kontodetails: Feld 944 bis 993, Mitte 968. Auge
   970 bis 992, Mitte 981. Versatz +13 px.

   DIE REGEL WAR RICHTIG, DER BEZUG WAR FALSCH. Seit Fassung 72 steht am Auge
       top: 50%; transform: translateY(-50%);
   Das ist die uebliche Formel — sie zentriert aber im UMSCHLIESSENDEN BLOCK,
   und der ist hier nicht das Feld. Der Umschlag .password-input ist ein
   Flex-Behaelter in Spaltenrichtung, das Feld darin traegt 25 px
   Aussenabstand nach unten. In einem Flex-Behaelter faellt dieser Abstand
   NICHT heraus, er zaehlt zur Hoehe: 49 + 25 = 74. Gemessen wurde genau das —
   top: 50% ergab 37 px statt 24,5 px.

   MERKSATZ: top: 50% zentriert NICHT im Feld, sondern im umschliessenden
   Block. Wer ein Symbol in ein Feld setzt, muss zuerst nachsehen, wie hoch
   dieser Block wirklich ist — nicht, wie hoch er aussieht.

   NICHT AUSGEGLICHEN, SONDERN URSACHE WEGGENOMMEN: Der Aussenabstand wandert
   vom Feld an den Umschlag. Damit ist der Umschlag genau so hoch wie das Feld
   (nachgemessen: 74 -> 49), top: 50% stimmt wieder von selbst, und die Formel
   bleibt richtig, auch wenn sich die Feldhoehe einmal aendert. Ein fester
   Ausgleichswert haette bei jeder Aenderung nachgezogen werden muessen.

   DER ABSTAND NACH AUSSEN BLEIBT AUF DEN PIXEL GLEICH. Vorher und nachher
   gemessen: Feldunterkante 441, naechste Zeile 482, Luecke 41 — beide Male.
   Der Aussenabstand des Umschlags faellt auch nicht mit dem der Zeile
   zusammen. */
body.woocommerce-account .woocommerce .password-input {
  margin-bottom: 25px;
}
body.woocommerce-account .woocommerce .password-input > input {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   2. DER AUSWAHLPFEIL IM LAND-FELD — DERSELBE FEHLER, DERSELBE BETRAG
   --------------------------------------------------------------------------
   GEMESSEN: sichtbares Feld (.select2-selection) 679 bis 728, Mitte 703. Der
   Pfeil steht auf top: 37px und bottom: 37px, Mitte 716. Wieder 13 px zu
   tief, und wieder aus demselben Grund: Bezug ist .select2-container, und der
   ist 74 px hoch — 49 fuer das Feld, 25 fuer den Abstand darunter.

   HIER GEHT ES OHNE JEDEN FESTWERT: Der Pfeil ist ein KIND der Auswahl. Sie
   muss nur selbst ein Bezugspunkt werden, dann rechnet select2 seine 50 %
   gegen 49 px statt gegen 74. Eine Zeile, keine Zahl, und sie bleibt richtig,
   wenn sich die Feldhoehe aendert.

   NICHT AUF DIE KASSENSEITE BESCHRAENKT: Dieselbe Auswahl steht auf
   Kontodetails, im Registrierformular und in der Kasse. Der Bezug ist an
   allen drei Stellen derselbe. */
body.woocommerce-account .select2-container .select2-selection--single,
body.woocommerce-checkout .select2-container .select2-selection--single {
  position: relative;
}

/* --------------------------------------------------------------------------
   3. DER KNOPF IN DER BESTELLKACHEL WAR BREITER ALS DAS PRODUKTBILD
   --------------------------------------------------------------------------
   AUFGEFALLEN BEIM NACHMESSEN der Handy-Ansicht, angekuendigt in Fassung 88.
   .product-action traegt min-width: 240px — auf dem Schreibtisch die Breite,
   die "Download" und "Bestelldetails" nebeneinander brauchen. Untereinander
   auf dem Handy ist sie ein Mindestmass, das die Kachel von innen
   auseinanderhaelt, sobald weniger als rund 336 px zur Verfuegung stehen
   (240 Knopf + 56 Kachelrand + 40 Seitenrand).

   GEMESSEN BEI 320 px: Bild 49 bis 271, Knopf 49 bis 289. Der Knopf stand
   18 px weiter rechts als das Bild darueber und ragte aus der Kachel.

   Ab 780 px abwaerts faellt das Mindestmass weg — der Knopf ist ohnehin ueber
   die volle Breite gesetzt, ein Mindestmass hat dort nichts mehr zu
   entscheiden. */
@media screen and (max-width: 780px) {
  body.woocommerce-account .woocommerce-MyAccount-content .product-action {
    min-width: 0;
  }
}


/* ==========================================================================
   studiobro — Das Tablet-Band, Kontodetails und der Fuss
   (Fassung 90, 30.08.2026)
   --------------------------------------------------------------------------
   Drei Kundenwuensche aus einem Durchgang. Alle drei betreffen Breiten
   zwischen Handy und Schreibtisch — den Bereich, den bisher niemand
   nachgemessen hatte.

   Rueckweg: Diesen Block bis zum Dateiende entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DAS GEQUETSCHTE BAND ZWISCHEN 781 UND 1000 px
   --------------------------------------------------------------------------
   VORHER: Der Posten stand bis 780 px waagerecht — Bild 196, Knopfspalte 240,
   zweimal 48 px Abstand, zusammen 532 px fest. Was uebrig blieb, bekam der
   Text. Gemessen: bei 800 px war die Textspalte 90 px breit, bei 900 px 190,
   und ab rund 825 px war sie BREITER ALS DAS BILD. Der Produktname brach auf
   vier Zeilen um.

   JETZT stapelt der Posten bis 1000 px. Kundenentscheidung vom 30.08.2026.

   WARUM DIE OBERGRENZE FUER DIE BREITE DAZUGEHOERT — und zwar zwingend:
   Gestapelt nimmt das Bild die volle Breite der Kachel. Bei 1000 px sind das
   822 px. Nachgemessen ergab das ein Produktbild von 822 x 919 px, das die
   ganze Ansicht beherrschte. Ohne diese Grenze waere der eine Fehler gegen
   einen groesseren getauscht.

   400 px IST HERGELEITET, NICHT GEGRIFFEN: Das Bild ist damit rund doppelt so
   gross wie in der Schreibtischansicht (196 px) — sichtbar groesser, aber
   nicht beherrschend.

   UND SIE GILT FUER DAS GANZE GESTAPELTE BAND, nicht erst ab 781 px. Sonst
   entstuende an der Grenze ein Sprung: bei 780 px waere das Bild 684 px breit
   (volle Kachel), bei 781 px 400. So laeuft es stetig — unter rund 496 px
   Fensterbreite greift die Grenze ohnehin nicht mehr, dort ist die Kachel
   schmaler als 400 px. Auf dem Handy aendert sich also nichts. */
@media screen and (max-width: 1000px) {

  body.woocommerce-account .sb-posten {
    flex-direction: column;
    max-width: 400px;
  }

  /* Dasselbe wie in der 780-px-Regel weiter oben, nur fuer das breitere Band.
     Ohne sie bliebe das Bild bei seinen festen 196 px und stuende als
     Briefmarke ueber einem 400 px breiten Text — genau die Ungleichheit, die
     hier abgestellt werden soll. */
  body.woocommerce-account .woocommerce-MyAccount-content .download-table .download-row .product-featured-image img {
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
  }

  /* Das Mindestmass der Knopfspalte hat gestapelt nichts mehr zu entscheiden
     und haelt die Spalte nur von innen auseinander. */
  body.woocommerce-account .woocommerce-MyAccount-content .product-action {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   2. KONTODETAILS: EIN FELD JE ZEILE
   --------------------------------------------------------------------------
   Derselbe Fehler wie im Registrierformular, dieselbe Loesung, dieselbe
   Grenze. Gemessen bei 390 px: "E-Mail-Adresse" zeigte "oliver.ullmann@" und
   war abgeschnitten, weil das Theme die Felder paarweise nebeneinander stellt
   (rund 47 % Breite mit float).

   ZWEI FORMULARE, EINE REGEL: Das Registrierformular steht auf derselben
   Seite unter derselben Huelle. Deshalb sind sie hier zusammengefasst — die
   Regel aus Fassung 88 fuer form.register bleibt bestehen und wird von dieser
   nur wiederholt, nicht ueberschrieben. */
@media screen and (max-width: 600px) {

  body.woocommerce-account form.woocommerce-EditAccountForm p.form-row,
  body.woocommerce-account form.edit-account p.form-row {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   3. DIE RECHTSLINKS IM FUSS STANDEN NICHT IN DER MITTE
   --------------------------------------------------------------------------
   GEMELDET fuer die iPad-Ansicht. NACHGEMESSEN bei 1024 px: Die Zeile
   "Datenschutz | Rechtliche Hinweise und AGB | Impressum" lief von 202 bis
   598, ihre Mitte lag also bei 400 — die Seitenmitte liegt bei 512. Die Zeile
   stand 112 px zu weit links, waehrend die Copyright-Zeile darueber und die
   Zahlungssymbole darunter mittig standen.

   DER KASTEN WAR MITTIG, SEIN INHALT NICHT. Die Liste selbst lief von 202 bis
   822, Mitte 512 — genau richtig. Sie ist aber 620 px breit, waehrend ihre
   drei Eintraege zusammen nur 383 px brauchen, und sie packt sie an den
   linken Rand. Die restlichen 237 px blieben rechts leer stehen.

   MERKSATZ: Ein mittig stehender Kasten heisst nicht, dass sein Inhalt mittig
   steht. Bei einem Flex-Behaelter, der breiter ist als sein Inhalt,
   entscheidet justify-content — und der Standard ist "an den Anfang".

   AUF DEM SCHREIBTISCH AENDERT SICH NICHTS. Dort ist die Liste genau so breit
   wie ihr Inhalt: bei 1400 px nachgemessen 485 bis 915, Inhalt ebenso, Mitte
   700 = Seitenmitte. Wo kein Platz frei ist, hat justify-content nichts zu
   verteilen. */
footer.site-footer .bottom-row .menu-wrapper .menu {
  justify-content: center;
}


/* ==========================================================================
   studiobro — Beschriftung ueber dem Express-Knopf   (Fassung 92, 31.08.2026)
   --------------------------------------------------------------------------
   Kundenwunsch nach dem Vorbild eraformaudio.com. Gezeichnet wird sie in
   studiobro-checkout.php; hier steht nur der Abstand.

   KEINE EIGENE SCHRIFTREGEL: Die Ueberschrift traegt sb-checkout__heading und
   bekommt damit dieselbe Schrift wie "Kontakt", "Rechnungsdetails" und
   "Zahlung" — Montserrat, 20 px, Halbfett. Am 31.08.2026 an "Kontakt"
   nachgemessen. Eine zweite Schriftregel waere eine zweite Wahrheit ueber
   dieselbe Sache.

   16 PX ABSTAND NACH UNTEN ist der Wert, mit dem die Abschnittskoepfe der
   Kasse ohnehin arbeiten (.sb-checkout__section-head, gap: 16px).

   Rueckweg: Diesen Block bis zum Dateiende entfernen und in
   studiobro-checkout.php sb_express_ueberschrift() samt add_action loeschen.
   ========================================================================== */

.sb-express-titel {
  margin: 0 0 16px;
}

/* Verschwindet mit dem Knopf — dieselbe Klasse, die studiobro-checkout.js
   schon dem Trenner "— ODER —" gibt. */
.sb-express-titel.sb-leer {
  display: none;
}


/* ==========================================================================
   studiobro — Die zweite Bestelluebersicht ueber dem Kauf-Knopf
   (Fassung 93, 31.08.2026)
   --------------------------------------------------------------------------
   Kundenwunsch nach dem Vorbild eraformaudio.com. Gezeichnet wird der
   Abschnitt in studiobro-checkout.php, aufgeklappt wird er von
   studiobro-checkout.js — mit DERSELBEN Bewegung wie die obere Uebersicht.

   NUR BIS 900 px. Am Vorbild in beiden Breiten nachgesehen: bei 1110 px steht
   die Uebersicht dort nur rechts (der untere Aufklapper ist 0 px hoch), bei
   493 px zweimal — oben als Balken, unten als heller Block. 900 px ist
   dieselbe Grenze, an der auch bei uns die rechte Spalte nach oben wandert;
   eine eigene Zahl waere eine zweite, die zur ersten passen muesste.

   HELL AUF DUNKEL, ANDERS ALS OBEN. Die obere Uebersicht ist dunkel
   (#202530), weil sie im dunklen Bereich der Seite steht. Dieser Block steht
   im weissen Formularbereich — dort waere Dunkel ein Fremdkoerper.

   Rueckweg: Diesen Block bis zum Dateiende entfernen, dazu in
   studiobro-checkout.php sb_untensumme() samt der drei Hilfsfunktionen und
   den beiden Haken, und in studiobro-checkout.js bindToggleUnten() samt
   Aufruf.
   ========================================================================== */

@media screen and (max-width: 900px) {

  .sb-untensumme {
    display: block;
    margin: 0 0 20px;
    background: #FFFFFF;
    border: 1px solid rgba(24, 28, 37, 0.12);
    border-radius: 12px;
    overflow: hidden;
  }

  /* --------------------------------------------------------------------
     Der zugeklappte Kopf
     -------------------------------------------------------------------- */

  /* Ein <button> bringt aus dem Theme Rahmen, Grund und Grossbuchstaben mit.
     Der wird hier vollstaendig zurueckgenommen — sonst saehe die Zeile aus
     wie ein zweiter Kauf-Knopf. */
  .sb-untensumme__kopf {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #181C25;
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
  }
  .sb-untensumme__kopf:hover { background: rgba(24, 28, 37, 0.03); }
  .sb-untensumme__kopf:focus-visible { outline: 2px solid #03A9BE; outline-offset: -2px; }

  .sb-untensumme__zeile {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* DIE BILDER LIEGEN UEBEREINANDER. Gemessen am Vorbild: 40 px im Quadrat,
     12 px Rundung, rund 25 px Versatz — das zweite Bild verdeckt das erste zu
     etwa zwei Dritteln. Umgesetzt mit negativem Aussenabstand statt mit
     Ueberlagerung, damit die Zeile ihre Breite behaelt und der Text daneben
     nicht springt. */
  /* DIE BILDER GEBEN ALS ERSTE PLATZ AB (Fassung 95, 31.08.2026).
     GEMELDET: Bei dreistelliger Summe und mehreren Artikeln ragte
     "Gesamtsumme" ueber den Betrag. NACHGESTELLT bei 320 px Kachelbreite:
     Der Textkasten war 138 bis 218 breit, der Text lief aber bis 253 — und
     der Betrag begann bei 230. 23 px Ueberlappung.

     DIE URSACHE war eine falsche Rangfolge: Der Textkasten durfte schrumpfen
     (flex: 1 1 auto), "Gesamtsumme" ist aber EIN Wort und kann nicht
     umbrechen. Es lief einfach aus seinem Kasten heraus.

     DIE RANGFOLGE STEHT JETZT AUSDRUECKLICH DA: Zahlen und Beschriftung sind
     der Inhalt, die Bilder sind Schmuck. Also schrumpfen die Bilder, und der
     Text nicht. Nach dem Umbau bei denselben 320 px: Bilder 56 bis 92 statt
     56 bis 126, Text bis 218, Betrag ab 230 — 12 px Luft statt 23 px
     Ueberlappung.

       MERKSATZ: In einer Reihe, die eng werden kann, gehoert entschieden,
       WER nachgibt. Ohne Entscheidung geben alle gleichmaessig nach, und der
       Text, der nicht umbrechen kann, laeuft aus dem Bild. */
  .sb-untensumme__bilder {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    align-items: center;
  }
  .sb-untensumme__bild {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(24, 28, 37, 0.10);
    background: #181C25;
  }
  .sb-untensumme__bild + .sb-untensumme__bild { margin-left: -25px; }
  .sb-untensumme__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
  }

  .sb-untensumme__text {
    display: flex;
    flex-direction: column;
    /* NICHT SCHRUMPFEN — siehe die Notiz an .sb-untensumme__bilder. */
    flex: 1 0 auto;
    min-width: 0;
    line-height: 1.25;
  }
  /* Beide Zeilen sind kurz und sollen nie umbrechen; ohne diese Regel
     entstuende bei sehr schmalen Geraeten aus "3 Artikel" ein Zweizeiler. */
  .sb-untensumme span.sb-untensumme__titel,
  .sb-untensumme span.sb-untensumme__anzahl {
    white-space: nowrap;
  }
  .sb-untensumme__titel {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
  }
  /* span IM SELEKTOR, NICHT AUS SCHOENHEIT (Fassung 94, 31.08.2026):
     Das Theme setzt .sb-checkout__grid .sb-checkout__main span auf
     color: #181C25 — zwei Klassen und ein Element. Eine Regel mit nur einer
     Klasse verliert dagegen. Mit dem span steht es 2:2 bei den Klassen und
     1:1 bei den Elementen, und die spaetere Regel gewinnt — das ist diese
     hier, sie steht am Dateiende. Siehe die Notiz weiter unten. */
  .sb-untensumme span.sb-untensumme__anzahl {
    font-size: 14px;
    color: #6B7480;
  }

  .sb-untensumme__betrag {
    flex: 0 0 auto;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
  }
  /* WooCommerce packt den Betrag in <span class="woocommerce-Price-amount">;
     ohne diese Zeile erbt er die Schriftfarbe der Seite, die hier dunkel ist —
     das stimmt zufaellig, aber nicht verlaesslich. */
  .sb-untensumme .sb-untensumme__betrag .woocommerce-Price-amount { color: #181C25; }

  /* Derselbe Pfeil wie oben — gleiche Form, gleiche Drehung. */
  .sb-untensumme__pfeil {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 2px;
    border-right: 2px solid #181C25;
    border-bottom: 2px solid #181C25;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }
  .sb-untensumme.is-open .sb-untensumme__pfeil {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  /* --------------------------------------------------------------------
     Der aufgeklappte Koerper
     --------------------------------------------------------------------
     DIE HOEHE SETZT DAS SKRIPT, nicht diese Datei — dieselbe Begruendung wie
     bei der oberen Uebersicht: eine feste Kappe faehrt entweder zu frueh
     durch oder kriecht am Ende. Hier steht nur der Ausgangszustand und der
     Uebergang.

     DER INNENABSTAND WANDERT MIT. Bei box-sizing: border-box klemmt
     max-height: 0 den Innenabstand NICHT weg — ohne diese Zeile bliebe der
     zugeklappte Koerper als Streifen stehen. Genau dieser Fall ist oben schon
     einmal gemessen worden. */
  .sb-untensumme__body {
    max-height: 0;
    padding: 0 14px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .sb-untensumme.is-open .sb-untensumme__body {
    max-height: 2000px;
    padding: 4px 14px 14px;
  }

  .sb-untensumme__posten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(24, 28, 37, 0.10);
    padding-top: 14px;
  }
  .sb-untensumme__posten-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
  }

  /* Die Bubble sitzt an der oberen rechten Ecke des Bildes — dieselbe Stelle
     wie in der oberen Uebersicht, damit beide dasselbe erzaehlen. */
  .sb-untensumme__posten-bild {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: visible;
  }
  .sb-untensumme__posten-bild img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(24, 28, 37, 0.10);
    margin: 0;
  }
  /* Auch hier der span — sonst gewinnt die Theme-Regel und die weisse Ziffer
     wird dunkel. GENAU DAS IST AM 31.08.2026 PASSIERT: dunkle Ziffer auf
     dunkler Bubble, vom Kunden gemeldet als "komplett schwarz". */
  /* DIESELBE FORM WIE OBEN (Fassung 96, 31.08.2026).
     GEMELDET: Oben abgerundete Vierecke, unten Kreise — und die Ziffern
     sassen nicht mittig.

     BEIDES WAR EINE FOLGE DER GROESSE. Nachgemessen an beiden Bubbles:
         oben   20 x 20 px, Rundung  8 px, Schrift 12 px / 600,
                Zeilenhoehe 20 px, ohne Rand
         unten  18 x 18 px, Rundung  9 px, Schrift 11 px / 700,
                Zeilenhoehe 18 px, 1 px Rand
     Rundung 9 auf 18 px IST der Kreis — die halbe Kantenlaenge. Oben sind es
     8 auf 20, also ein Viereck mit runden Ecken.

     UND DIE ZIFFER SASS DESHALB TIEF: Bei box-sizing: border-box zieht der
     1-px-Rand vom Inhalt ab — aus 18 px Kasten werden 16 px Inhalt. Eine
     Zeilenhoehe von 18 px passt da nicht hinein und haengt unten ueber. Jetzt
     20 px Kasten minus 2 x 1 px Rand = 18 px Inhalt, und die Zeilenhoehe ist
     genau diese 18 px.

       MERKSATZ: Eine Zeilenhoehe zentriert nur dann, wenn sie der INHALTS-
       hoehe entspricht — nicht der Kastenhoehe. Sobald ein Rand dazukommt,
       sind das zwei verschiedene Zahlen.

     Werte, Rundung, Schrift und Versatz sind jetzt die von oben; der weisse
     Rand kommt dazu, weil diese Bubble dunkel auf dunklem Bild sitzt. */
  .sb-untensumme span.sb-untensumme__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 8px;
    background: #181C25;
    /* SCHMALER WEISSER RAND (Kundenwunsch 31.08.2026). Die Bubble ist dunkel
       und sitzt auf der Ecke eines dunklen Produktbildes — ohne Rand
       verschwimmt ihre Kante darin. Der obere Warenkorb braucht ihn nicht:
       dort ist die Bubble weiss mit dunkler Ziffer, ein weisser Rand waere
       unsichtbar. */
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    /* 20 px Kasten minus 2 x 1 px Rand — siehe oben. */
    line-height: 18px;
    text-align: center;
  }

  .sb-untensumme__posten-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
  }
  .sb-untensumme__posten-preis {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .sb-untensumme__gesamt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(24, 28, 37, 0.10);
  }
  .sb-untensumme__gesamt-wort {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
  }
  .sb-untensumme__gesamt-wert {
    text-align: right;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
  }
  /* Der Steuerhinweis kommt aus WooCommerce als <small> im selben Element. */
  .sb-untensumme .sb-untensumme__gesamt-wert small,
  .sb-untensumme .sb-untensumme__gesamt-wert small span {
    display: block;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    color: #6B7480;
  }
  /* Der Betrag im Steuerhinweis steht in einem eigenen span und faellt sonst
     unter dieselbe Theme-Regel. display bleibt fuer ihn inline. */
  .sb-untensumme .sb-untensumme__gesamt-wert small span { display: inline; }
}

/* Auf dem Schreibtisch gibt es ihn nicht — die rechte Spalte steht dort
   vollstaendig sichtbar daneben. Ausgeblendet und nicht weggelassen, damit
   das Markup in beiden Breiten dasselbe ist und ein Fragment-Austausch nicht
   ins Leere laeuft. */
@media screen and (min-width: 901px) {
  .sb-untensumme { display: none; }
}


/* --------------------------------------------------------------------------
   NACHTRAG ZU FASSUNG 93: WARUM DIE BUBBLE SCHWARZ WAR  (Fassung 94)
   --------------------------------------------------------------------------
   GEMELDET: "Die Bubble kann man nicht lesen, sie ist komplett schwarz."

   NACHGEMESSEN, nicht geraten. Alle Regeln, die auf die Bubble passen und
   eine Schriftfarbe setzen, aus der geladenen Datei ausgelesen:

       .sb-checkout__grid .sb-checkout__main span   color: rgb(24, 28, 37)
       .sb-untensumme__badge                        color: rgb(255, 255, 255)

   ZWEI KLASSEN UND EIN ELEMENT SCHLAGEN EINE KLASSE. Die weisse Ziffer stand
   also nie da; sie war dunkel auf dunklem Grund — eine schwarze Scheibe.

     MERKSATZ, jetzt zum wiederholten Mal in diesem Projekt: EINE REGEL ZU
     SCHREIBEN HEISST NICHT, DASS SIE WIRKT. Und der Gegner ist nicht immer
     eine Regel mit demselben Namen: Hier war es ein allgemeines
     "... __main span", das jede Beschriftung im Formularbereich einfaerbt.
     Wer eine eigene Farbe in diesen Bereich setzt, muss mindestens genauso
     spezifisch sein.

   DER GRIFF DAZU IST BILLIG: das Element mit in den Selektor nehmen
   (span.sb-untensumme__badge). Damit steht es 2:2 bei den Klassen und 1:1 bei
   den Elementen — und bei Gleichstand gewinnt die spaetere Regel. Unsere
   steht am Dateiende, also gewinnt sie. Kein !important noetig.

   MIT DERSELBEN PRUEFUNG DURCHGEGANGEN und ebenfalls angehoben: die Zeile
   "N Artikel" (haette sonst Dunkel statt Grau bekommen) und der Steuerhinweis
   unter der Gesamtsumme, dessen Betrag in einem eigenen span steckt.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   studiobro — Der Express-Bereich wird leiser   (Fassung 97, 31.08.2026)
   --------------------------------------------------------------------------
   KUNDENWUNSCH: "Express checkout" in dunklem Grau, mittig, nicht fett,
   kleinere Schrift. Das "ODER" in derselben Farbe, und die seitlichen Striche
   sollen bis zum Rand des Behaelters reichen.

   DIE WERTE SIND VOM VORBILD ABGENOMMEN, nicht geschaetzt. Bei eraformaudio
   am 31.08.2026 gemessen — beide Zeilen tragen dort dasselbe:
       Schriftgroesse   14 px
       Gewicht         400
       Farbe           rgb(112, 112, 112)
       Ausrichtung     mittig

   DIE UEBERSCHRIFT HAT IHRE KLASSE VERLOREN. Bis Fassung 96 trug sie
   sb-checkout__heading, damit sie dieselbe Schrift bekam wie "Kontakt" und
   "Zahlung". Das war ein Denkfehler: Sie IST keine Abschnittsueberschrift,
   sondern eine kleine Beschriftung ueber einem Knopf. Mit der Klasse haette
   diese Regel gegen fuenf Klassen anschreiben muessen
   (.woocommerce-page.woocommerce-checkout .woocommerce-checkout
   .sb-checkout__grid .sb-checkout__heading) — und im Markup stuende weiter,
   es sei eine Ueberschrift.

     MERKSATZ: Wenn eine Regel nur mit Gewalt gegen eine Klasse ankommt,
     ist meist die KLASSE falsch und nicht die Regel. Erst nachsehen, ob das
     Element ueberhaupt das ist, was die Klasse behauptet.

   Uebrig bleibt trotzdem .sb-checkout__grid .sb-checkout__main h3 mit der
   Schriftfarbe — zwei Klassen und ein Element. Deshalb steht hier
   .sb-checkout__inner h3.sb-express-titel: gleiches Gewicht, spaeter in der
   Datei, gewinnt.

   Rueckweg: Diesen Block bis zum Dateiende entfernen; in
   studiobro-checkout.php die Klasse sb-checkout__heading wieder in das h3
   aufnehmen und in studiobro-checkout.js striche() samt Aufruf loeschen.
   ========================================================================== */

.sb-checkout__inner h3.sb-express-titel {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #707070;
  text-align: center;
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Das "ODER" mit Linien bis zum Rand
   --------------------------------------------------------------------------
   DIE GEDANKENSTRICHE NIMMT studiobro-checkout.js WEG. Stripe gibt dort
   woertlich "— ODER —" aus; blieben die Striche stehen, saehe es aus wie
   Strich, Linie, Wort, Linie, Strich.

   DER BEHAELTER WIRD ZUR REIHE, und seine beiden Pseudoelemente werden damit
   zu Kindern darin — genau das ist hier gewollt. (Dieselbe Eigenschaft hat
   uns anderswo schon zweimal eine Rasterzeile zu viel eingebracht; hier ist
   sie das Mittel.) Der nackte Textknoten in der Mitte wird zu einem
   namenlosen Flex-Kind und steht zwischen den Linien.

   flex: 1 1 auto AN BEIDEN LINIEN — sie teilen sich, was neben dem Wort
   uebrig bleibt, und reichen damit von Rand zu Rand. Eine feste Breite waere
   bei jedem anderen Wort falsch. */
/* display MIT AUSZEICHNUNG, und zwar zwingend: STRIPE SETZT DEN TRENNER PER
   INLINE-STIL. Am 31.08.2026 am Element abgelesen:
       style="margin-top: 1.5em; text-align: center; display: block;"
   Ein Inline-Stil schlaegt JEDEN Selektor, auch einen mit Kennung. Der erste
   Versuch stand ohne Auszeichnung da: Farbe und Schrift kamen an, das
   display nicht — die Pseudoelemente blieben inline, und ein 1 px hoher
   inline-Kasten ohne Inhalt ist unsichtbar. Genau so sah es aus: "ODER"
   ohne Linien.

     MERKSATZ: Wenn von einer Regel nur EIN TEIL ankommt, liegt es nicht an
     der Regel, sondern an genau dieser Eigenschaft. Nachsehen, wer sie sonst
     noch setzt — und ein Inline-Stil steht nicht in den Stilvorlagen, den
     findet man nur am Element.

   NUR display TRAEGT DIE AUSZEICHNUNG. margin-top und text-align aus dem
   Inline-Stil stoeren nicht: Der Abstand ist erwuenscht, und text-align hat
   in einer Flex-Reihe nichts mehr zu entscheiden. */
#wc-stripe-express-checkout-button-separator {
  display: flex !important;
  align-items: center;
  gap: 12px;
  color: #707070;
  font-size: 14px;
  font-weight: 400;
}

#wc-stripe-express-checkout-button-separator::before,
#wc-stripe-express-checkout-button-separator::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #707070;
}


/* ==========================================================================
   studiobro — Zwischensumme und Rabatt in der unteren Uebersicht
   (Fassung 98, 31.08.2026)
   --------------------------------------------------------------------------
   Gezeichnet wird der Block in studiobro-checkout.php; hier steht nur, wie er
   aussieht. Er steht ZWISCHEN den Posten und der Gesamtsumme und erscheint
   nur, wenn es dort etwas zu erzaehlen gibt — ohne Gutschein bleibt er weg.

   NUR DIE OBERE TRENNLINIE IST NEU. Die Gesamtsumme bringt ihre eigene mit;
   zusammen ergibt das die uebliche Staffel Posten / Rechnung / Summe.

   Rueckweg: Diesen Block bis zum Dateiende entfernen und in
   studiobro-checkout.php den Abschnitt sb-untensumme__zwischen samt
   sb_untensumme_gutschein_ohne_link() loeschen.
   ========================================================================== */

@media screen and (max-width: 900px) {

  .sb-untensumme__zwischen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(24, 28, 37, 0.10);
  }

  .sb-untensumme__zwischenzeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
  }

  /* Die Beschriftung darf umbrechen (ein Gutscheinname kann lang sein), der
     Betrag nicht — sonst steht "-12,90" ueber zwei Zeilen. */
  .sb-untensumme__zwischenzeile > span:first-child { min-width: 0; }
  .sb-untensumme__zwischenzeile > span:last-child { flex: 0 0 auto; white-space: nowrap; }

  /* DER RABATT IST DIE EINZIGE ZAHL HIER, DIE ETWAS WEGNIMMT — deshalb als
     einzige farbig. Petrol wie die Knoepfe, nicht Rot: Es ist eine gute
     Nachricht fuer den Kunden, keine Warnung.

     span IM SELEKTOR, siehe die Notiz zur schwarzen Bubble weiter oben:
     .sb-checkout__grid .sb-checkout__main span faerbt sonst mit. */
  .sb-untensumme .sb-untensumme__zwischenzeile--rabatt span,
  .sb-untensumme .sb-untensumme__zwischenzeile--rabatt span .woocommerce-Price-amount {
    color: #04828F;
  }

  /* Die Gesamtsumme hat ihre eigene Linie — steht der Zwischenblock davor,
     ruecken beide auf denselben Abstand. */
  .sb-untensumme__zwischen + .sb-untensumme__gesamt {
    margin-top: 14px;
  }
}


/* ==========================================================================
   studiobro — Der Mini-Warenkorb wird 30 px hoeher   (Fassung 104, 31.08.2026)
   --------------------------------------------------------------------------
   Kundenwunsch: max-height von 445 auf 475 px.

   WOHER DIE 445 KOMMEN: aus der style.css des Themes,
       header.site-header .header-cart { max-height: 445px; }
   ohne Medienabfrage, also auf jeder Breite. Geaendert wird sie hier statt
   dort — style.css ist die Datei des Themes, und unsere Aenderungen stehen
   gesammelt in dieser hier.

   NUR AB 781 px, UND DAS IST DER WICHTIGE TEIL: Unterhalb davon hat das
   Panel nichts mit 445 px zu tun. Dort faehrt es auf und zu, und die Hoehe
   kommt aus der Regel von Fassung 87 —
       max-height: calc(100svh - 101px)
   also aus der sichtbaren Bildschirmhoehe. Eine feste Zahl wuerde genau die
   Rechnung zerstoeren, die den Bezahlknopf in Safari erreichbar macht.

     MERKSATZ: Wer eine Zahl aendert, die ohne Medienabfrage dasteht, aendert
     sie auf JEDER Breite — auch dort, wo laengst etwas anderes gilt. Vor dem
     Ueberschreiben nachsehen, wer sonst noch an derselben Eigenschaft haengt.

   Rueckweg: Diesen Block bis zum Dateiende entfernen, dann gelten wieder die
   445 px aus der style.css.
   ========================================================================== */

@media screen and (min-width: 781px) {
  body header.site-header .header-cart {
    max-height: 475px;
  }
}


/* ==========================================================================
   studiobro — Ladekreis immer im Sichtbereich   (Fassung 111, 25.09.2026)
   --------------------------------------------------------------------------
   KUNDENHINWEIS (24.09.2026): Nach dem Schliessen des Google-Pay-Fensters
   wird die Seite nur heller, kein Ladekreis, keine Rueckmeldung. Und: "Der
   Ladekreis sollte immer im Sichtbereich sein."

   EXPRESSKAUF (Google Pay / Apple Pay / Link): Stripe sperrt die ganze Seite
   mit jQuery.blockUI({ message: null, overlayCSS: #fff, 0.6 }) und setzt
   solange body.wc-stripe-ece-processing (event-handler.js im Stripe-Plugin).
   Den Kreis bringt Stripe selbst mit (express-checkout.css, ::before der
   Sperrschicht, mittig im Bildschirm) — in currentcolor. Am 25.09.2026
   gemessen: Die Farbe erbt die Seite, und die ist hier WEISS
   (rgb(255,255,255)) — ein weisser Kreis auf weissem Schleier. Er war die
   ganze Zeit da, nur unsichtbar. Hier bekommt er die Petrol-Farbe der
   Seite, darunter ein Satz. Der Text kommt aus der Variablen
   --sb-zahlung-laeuft, die studiobro-checkout.php uebersetzbar setzt.

   KASSE ("Jetzt kaufen"): WooCommerce sperrt das Formular und setzt den
   Kreis in DESSEN Mitte (position: absolute). Das Formular ist 1277 px
   hoch, das Fenster 657 px (gemessen bei 1461 px Breite) — die Mitte lag
   oft ausserhalb. position: fixed setzt ihn in die Bildschirmmitte.
   ========================================================================== */
body.wc-stripe-ece-processing .blockUI.blockOverlay::before {
  color: #04828F;
}

body.wc-stripe-ece-processing .blockUI.blockOverlay::after {
  content: var(--sb-zahlung-laeuft, "Zahlung wird abgeschlossen …");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 2.5em);
  color: #181C25;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.woocommerce form.checkout.processing .blockUI.blockOverlay::before {
  position: fixed;
}

@media (prefers-reduced-motion: reduce) {
  body.wc-stripe-ece-processing .blockUI.blockOverlay::before,
  .woocommerce form.checkout.processing .blockUI.blockOverlay::before {
    animation-duration: 3s;
  }
}


/* ==========================================================================
   studiobro — Stripe-Meldung ueber dem Express-Knopf   (Fassung 115, 25.09.2026)
   --------------------------------------------------------------------------
   studiobro-checkout.js setzt Stripes Express-Meldungen vor den Knopf und
   gibt ihnen die Klasse sb-express-meldung. Hier nur der Abstand zum Knopf
   und die Form passend zur weissen Karte. */
.woocommerce-checkout .sb-express-meldung {
  display: block;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
}

/* FASSUNG 116 (25.09.2026): Fehler deutlicher (Kundenwunsch nach Test 1:
   "koennte man noch besser sichtbar machen"). Helle rote Flaeche, kraeftiger
   Balken im Rot der VIES-Pruefung (#B23A45, siehe USt-IdNr.-Feld), fetter
   Text in der Schriftfarbe der Kasse, beim Erscheinen zweimal kurz ein
   roter Schein nach aussen — das Auge springt hin. Im Browser an der echten
   Meldung ausprobiert, bevor es in die Datei kam. */
@keyframes sb-meldung-an {
  0%   { box-shadow: 0 0 0 0 rgba(178, 58, 69, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(178, 58, 69, 0); }
}

.woocommerce-checkout .sb-express-meldung.woocommerce-error {
  background: #FDECEE;
  border: 0;
  border-left: 5px solid #B23A45;
  color: #181C25;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 18px;
  animation: sb-meldung-an 0.9s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout .sb-express-meldung.woocommerce-error {
    animation: none;
  }
}


/* ==========================================================================
   Startseite -> Handy: Abschnitte springen beim Scrollen mit der Adressleiste
   --------------------------------------------------------------------------
   Angehaengt am 07.10.2026 an die Staging-Fassung vom 24.09.2026
   (280.415 Bytes). Alles davor ist unveraendert.

   Rueckweg: Diesen Block bis zum Dateiende entfernen. Dazu gehoert der Block
   ganz oben in themes/studiobro/js/main.js - der setzt --sb-hoehe.

   Problem
   -------
   Safari auf dem iPhone blendet die Adressleiste beim Scrollen ein und aus.
   Dabei aendert sich der Wert von 1vh. Jeder Abschnitt, der seine Hoehe aus vh
   bezieht, wird dadurch mitten im Scrollen laenger oder kuerzer - und alles
   darunter rutscht mit. Auffaellig ist das am Abschnitt mit Produkte,
   Tutorials und Blog, weil er mitten auf der Seite liegt.

   Betroffen sind auf der Startseite zwei Regeln:

     .home-carousel .carousel-item    height: 100vh                 (style.css)
     .blade > .elementor-container    min-height: 100vh - 190px     (additional.css, bis 780px)

   Die drei Blade-Abschnitte - ARCANE-Kopfbereich, Produkte/Tutorials/Blog und
   der Abschnitt darunter - bekommen ihre 100vh zusaetzlich aus den Elementor-
   Einstellungen der Seite. Auf dem Handy gewinnt aber die Regel aus
   additional.css, die steht mit !important darin.

   Loesung
   -------
   Drei Zeilen uebereinander, jede faengt den Fall darunter auf:

     1. 100vh      - fuer Browser ohne svh (iOS vor 15.4).
     2. 100svh     - die kleine Ansicht, also die Hoehe bei eingeblendeter
                     Adressleiste. Hilft in Safari.
     3. --sb-hoehe - eine beim Laden einmal in Pixeln festgenagelte Hoehe.
                     Gesetzt wird sie im Block ganz oben in js/main.js, nur auf
                     Geraeten mit Fingerbedienung. Fehlt sie, gilt der Rueckfall
                     100svh aus derselben Zeile.

   Warum die dritte Zeile noetig ist: Firefox fuer iOS aendert JEDE Hoehen-
   Einheit mit, wenn die Adressleiste faehrt - vh, svh und lvh gleichermassen.
   Am 07.10.2026 auf einem iPhone (iOS 18.7, FxiOS 157) gemessen: alle drei
   sprangen zwischen 1633 und 1945 px, also um 312 px. Nur eine festgeschriebene
   Pixelhoehe blieb stehen. svh allein reicht dort nicht.

   Dasselbe svh-Muster steckt schon im ausgeklappten Warenkorb
   (header.site-header .header-cart.active rechnet bereits mit 100svh).

   Nebenwirkung
   ------------
   Ist die Adressleiste eingeklappt, fuellt ein Abschnitt den Bildschirm nicht
   mehr ganz genau aus - unten lugt ein schmaler Streifen des naechsten
   Abschnitts hervor. Das ist der Preis dafuer, dass nichts mehr springt.

   Wer den Kopfbereich lieber randlos haette, nimmt dort 100lvh statt 100svh.
   Dann steht er immer ueber die volle Hoehe, seine Unterkante liegt aber
   hinter der Adressleiste, solange die eingeblendet ist. Fuer den Abschnitt
   mit Produkte/Tutorials/Blog waere das nichts: Dort wuerden die Knoepfe
   darunter verschwinden.
   ========================================================================== */

.home-carousel .carousel-item {
	height: 100vh;
	height: 100svh;
	height: var(--sb-hoehe, 100svh);
}

@media screen and (max-width: 780px) {

	.blade > .elementor-container {
		min-height: calc(100vh - 110px - 80px) !important;
		min-height: calc(100svh - 110px - 80px) !important;
		min-height: calc(var(--sb-hoehe, 100svh) - 110px - 80px) !important;
	}
}

/* --------------------------------------------------------------------------
   Dazu: die Abstaende im Abschnitt Produkte / Tutorials / Blog (nur Handy)
   --------------------------------------------------------------------------
   Der Abschnitt ist seit der festgenagelten Hoehe knapper, und darin fiel auf,
   wie die Kacheln bisher gebaut waren. Gemessen am 07.10.2026 auf Staging bei
   606 px Breite und einer Abschnittshoehe von 510 px:

     Kachelhoehen    157 / 177 / 177 px   - ungleich, weil die Spalten ihre
                                            Inhaltshoehe als Untergrenze hatten
     Ueberschrift    80 px Abstand zum Knopf (60 px am inneren Container aus
                     den Elementor-Einstellungen, dazu 20 px Widget-Abstand)
     Produkte        diese 20 px fehlten dort - daher die schiefe erste Kachel

   Danach: drei Kacheln zu je 170 px, Inhalt mittig mit 39 px Luft oben wie
   unten, zwischen Ueberschrift und Knopf einheitlich 16 px.

   min-height: 0 nimmt den Spalten die Inhaltshoehe als Untergrenze, erst
   dadurch teilen sie die Hoehe zu gleichen Teilen. Die beiden !important
   stechen die Elementor-Einstellungen aus; die haengen an Selektoren mit vier
   Klassen und waeren sonst nicht zu erreichen.

   Am Rechner aendert sich nichts, der ganze Block gilt nur bis 780 px.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 780px) {

	.blade.second > .elementor-container > .elementor-column {
		min-height: 0;
	}

	.blade.second .elementor-widget-wrap {
		align-content: center;
		padding: 20px;
	}

	.blade.second .elementor-widget-heading {
		margin: 0 0 16px !important;
	}

	.blade.second .elementor-widget-heading .elementor-widget-container {
		margin: 0 !important;
	}
}

/* studiobro: Karten der Startseite, alle Sprachen (14.10.2026).
   Vorher nur als Elementor-Einstellung an Vorlage 387 (DE); die EN-Uebersetzung 614 hatte sie nicht. */
.elementor-section.homepage-blocks {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}