input[type=checkbox][disabled] + label {
    color: #ccc;
}

table[price] {
	width: 100%;
    margin-bottom: 21px;
}

table[price] > thead > tr > th, 
table[price] > tbody > tr > th, 
table[price] > tfoot > tr > th, 
table[price] > thead > tr > td, 
table[price] > tbody > tr > td, 
table[price] > tfoot > tr > td {
	padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
}

table[price] td[border-bottom] {
	border-bottom: 1px solid #dddddd;	
}

.textbox {
	max-height: 250px;
	overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #CCC;
    padding: 10px;
}

.preset-consum-btn {
	border: 1px solid #cccccc;
	padding: 10px;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
}

.preset-consum-btn.active {
	background: #CCC;
}

/*
.modal-backdrop.in {
	opacity: 0.8
}
*/


/*.modal-open > .container {
	filter:blur(2px);
	-webkit-filter:blur(2px);
}
.blur-2px {
	filter:blur(2px);
	-webkit-filter:blur(2px);
}*/
.egon-embedded-app {
	position: relative;;
}
.has-error .form-control-feedback {
	color: #E74C3C;
}
.has-success .form-control-feedback {
	color: #18BCA0;
}
.has-feedback .form-control {
	padding-right: 18px !important;
}
/*@media only screen and (max-width: 768px) {
    .datepicker {
		width:0 !important;
		height: 0 !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}*/
.datepicker {
	z-index: 9999 !important;
	margin: 0 auto;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance:textfield;
}
.ellipsis {
	display: inline-block;
	height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	white-space: nowrap;
	/*width: 150px;*/
	line-height: 18px;
}

.pagination li {
	cursor: pointer;
}
*[data-toggle="popover"] {
	cursor: help;
}
.popover {
	font-size: 14px;
	color: #333333;
	line-height: 19px;
}	
.bs-callout {
    border-left: 3px solid #EEEEEE;
    margin: 20px 0;
    padding: 20px;
}
.bs-callout h4 {
    margin-bottom: 5px;
    margin-top: 0;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    background-color: #FFFFFF;
    border-radius: 3px;
}
.bs-callout-danger {
    background-color: #FDF7F7;
    border-color: #D9534F;
}
.bs-callout-danger h4 {
    color: #D9534F;
}
.bs-callout-warning {
    background-color: #FCF8F2;
    border-color: #F0AD4E;
}
.bs-callout-warning h4 {
    color: #F0AD4E;
}

.bs-callout-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.bs-callout-success h4 {
    color: #3c763d;
}

.bs-callout-info {
    background-color: #F4F8FA;
}
.bs-callout-info h4 {
    color: #5BC0DE;
}

.color-swatches {
    margin: 0 -5px;
    overflow: hidden;
}

@media (max-width: 768px) {
	.modal-dialog {
		margin: 0;
	}
}

#egon-embedded-loader {
	position:fixed;
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,0.75);
	z-index:9999;
	top:0;
	left:0;
	display:none;
}
#egon-embedded-loader .progress {
	width:75%;
	position:
	absolute;
	margin: auto;
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
	height: 30px;
}
#egon-embedded-loader .progress .progress-bar {
	font-size: 20px;
	line-height: 30px;
}

.loading-text {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	margin-left: -150px;
	text-align: center;
	color: #333;
	font-weight: bold;
	margin-top: 80px;
}

/**** RATECALC */
#egon-embedded-phone .result-item .counter,
#egon-embedded-smarthome .result-item .counter,
.ratecalc-results .result-item .counter,
#egon-embedded-ratecalc-results .result-item .counter {
	border: 2px solid #DDDDDD;
	line-height: 46px;
	width: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
}

.ratecalc-results .result-item .panel-body > div > .row,
#egon-embedded-ratecalc-results .result-item .panel-body > div > .row {
	position: relative;
}

.ratecalc-results .result-item .actions,
#egon-embedded-ratecalc-results .result-item .actions {
	position: absolute;
	bottom: 0;
	right: 15px;
}

.ratecalc-results .result-item .visible-md.visible-lg .actions,
#egon-embedded-ratecalc-results .result-item .visible-md.visible-lg .actions {
	bottom: -36px;
}

.ratecalc-results .result-item.compare_rate > .panel,
#egon-embedded-ratecalc-results .result-item.compare_rate > .panel {
	border-color: #F0AD4E;
}

#egon-embedded-phone .result-item h4,
#egon-embedded-smarthome .result-item h4,
.ratecalc-results .result-item h4,
#egon-embedded-ratecalc-results .result-item h4 {
	margin: 0;
	line-height: 25px;
}

.ratecalc-results .result-item h4 .popover,
#egon-embedded-ratecalc-results .result-item h4 .popover {
	font-size: 0.8em;
}
#egon-embedded-ratecalc-rateinfowindow .provider_image,
#egon-embedded-ratecalc-results .result-item .counter,
#egon-embedded-phone .result-item .counter,
#egon-embedded-phone .result-item .provider_image,
#egon-embedded-smarthome .result-item .counter,
#egon-embedded-smarthome .result-item .provider_image,

.ratecalc-results .result-item .counter,
.ratecalc-results .result-item .provider_image,

#egon-embedded-ratecalc-results .result-item .provider_image {
	margin-right: 15px;
}
.ratecalc-results .result-item .provider_image img,
#egon-embedded-ratecalc-results .result-item .provider_image img {
	height: 50px;
}
#egon-embedded-neworder-header .price > *,
.ratecalc-results .result-item .price > *,
#egon-embedded-ratecalc-results .result-item .price > * {
	margin-bottom: 0;
	margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid #CACACA;
}
#egon-embedded-neworder-header .price dt,
.ratecalc-results .result-item .price dt,
#egon-embedded-ratecalc-results .result-item .price dt {
	color: #444444;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
}
#egon-embedded-neworder-header .price dd,
.ratecalc-results .result-item .price dd,
#egon-embedded-ratecalc-results .result-item .price dd {
	color: inherit;
	font-family: Tahoma,Geneva,sans-serif;
	font-size: 21px;
	line-height: 33px;
	margin: 0;
}
#egon-embedded-neworder-header .price dl.light dt,
.ratecalc-results .result-item .price dl.light dt,
#egon-embedded-ratecalc-results .result-item .price dl.light dt {
	color: #999999;
}
#egon-embedded-neworder-header .price dl.light dd,
.ratecalc-results .result-item .price dl.light dd,
#egon-embedded-ratecalc-results .result-item .price dl.light dd {
	color: #999999;
}

.ratecalc-results .result-item .price.price_nt dl,
#egon-embedded-ratecalc-results .result-item .price.price_nt dl {
	margin-right: 5px;
	padding-right: 5px;
}
.ratecalc-results .result-item .price.price_nt dd,
#egon-embedded-ratecalc-results .result-item .price.price_nt dd {
	font-size: 15px;
}

/**** TICKETS */
#egon-embedded-ticket table tr {
	cursor: pointer;
}
#egon-embedded-ticket .table-responsive {
	max-height: 300px;
	overflow: auto;
}
/**** NEW ORDER */
#egon-embedded-neworder-header h4 {
	margin: 0;
}
#egon-embedded-neworder-header .provider_image {
	margin-right: 15px;
}
/**** APP MENU */
#egon-embedded-app-menu h3 {
	margin-top: 0;
}
/**** ORDER */
#egon-embedded-order-grid table {
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	background-color: transparent !important;
}
#egon-embedded-order-grid tr {
	cursor: pointer;
}
#egon-embedded-order-grid th,
#egon-embedded-order-grid td {
	padding: 5px;
	vertical-align: middle;
	border-left: 0 !important;
	border-right: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}
#egon-embedded-order-grid td,
#egon-embedded-order-grid td div,
#egon-embedded-order-grid td .ellipsis,
#egon-embedded-order-grid td span:not(kbd) {
	/* background: transparent !important; */
	box-shadow: none !important;
}
#egon-embedded-order-grid td kbd {
	display: inline-block;
	width: 40px;
	text-align: center;
}
@media (max-width: 768px) {
	#egon-embedded-order-grid table {
		font-size: 10pt;
	}	
}

/**** STRUCTURE */
#egon-embedded-structure ul.fancytree-container {
	border: none !important;
}
/* Lange Eintraege im Strukturbaum umbrechen */
#egon-embedded-structure-tree ul.fancytree-container {
	white-space: normal;
}
#egon-embedded-structure-tree span.fancytree-node {
	display: flex;
	align-items: flex-start;
}
#egon-embedded-structure-tree span.fancytree-expander,
#egon-embedded-structure-tree span.fancytree-icon {
	flex: 0 0 auto;
}
#egon-embedded-structure-tree span.fancytree-title {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
table.jqplot-table-legend, table.jqplot-cursor-legend {
	font-size: 1.2em;
}

/**** PROVISION */
#egon-embedded-provision-view .table {
	font-size: 10pt;
}
#egon-embedded-provision-view .table .odd {
	background-color: #ECECEC;
}

#egon-embedded-smartstats .pull-right,
#egon-embedded-smartstats .pull-left {
	width: 100%;
}

#egon-embedded-smartstats.nested .pull-right,
#egon-embedded-smartstats.nested .pull-left {
	width: 48%;
}
#reseller-image .editable,
#egon-embedded-resellerpage .editable-area.editable {
	border: 1px solid red;
	padding: 5px;
	margin-bottom: 25px;
}
#reseller-image .editable:after,
#egon-embedded-resellerpage .editable-area.editable:after {
	display: block;
	position: absolute;
	margin-top: 5px;
	font-size: 11px;
	color: red;
	content: 'zum Bearbeiten in das rote Feld klicken';
}

#reseller-image .editable:after {
	content: 'zum Bearbeiten klicken';
}

/*@media (min-width: 768px) {*/
@media (min-width: 992px) {
	.input-row > * {
		padding-left: 0;
		padding-right: 0;
	}
	
	.input-row > *:first-child {
		padding-left: 15px;
		padding-right: 2.5px;		
	}
	
	.input-row > *:last-child {
		padding-left: 2.5px;
		padding-right: 15px;	
	}
}

.input-row-xs > * {
	padding-left: 0;
	padding-right: 0;
	}
	
.input-row-xs > *:first-child {
	padding-left: 15px;
	padding-right: 2.5px;		
}
	
.input-row-xs > *:last-child {
	padding-left: 2.5px;
	padding-right: 15px;	
}

.pie-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	float: right;
}
.pie-legend span {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 10px;
}

.btn-group.btn-group-block {
	width: 100%;
}
.btn-group.btn-group-block > .btn {
	width: 33.3333333%;
}

/** RESELLERPAGE **/
div[data-target="action:resellerpage:addContentElement"] {
	border: 1px solid #EEE;
	position: relative;
	min-height: 38px;
	padding: 5px;
	margin-bottom: 5px;
}
div[data-target="action:resellerpage:addContentElement"]:after {
	content: 'neues Inhaltselement hinzufügen';
	text-align: center;
	width: 100%;
	display: block;
	background-color: #EEE;
	cursor: pointer;
	padding: 5px;
	border-radius: 5px;
	font-size: 11px;
	font-family: tahoma;
	bottom: 5px;
}


.form-control-feedback {
	left: 0 !important;
	font-size: 8px !important;
	height: 20px !important;
	line-height: 20px !important;
	width: 20px !important;
	top: 23px !important;
}


.input-addon .form-control-feedback {
	right: 55px !important;	
}
.form-horizontal .input-addon .form-control-feedback {
	right: 65px !important;	
}

.select .form-control-feedback {
	right: 10px !important;
}

.form-horizontal .select .form-control-feedback {
    right: 25px !important;
}

.sr-only.has-feedback {
	position: absolute !important;
}

.form-group-seperator small {
	margin-bottom: 0;
}
.form-group-seperator hr {
	margin-top: 0;
}

div[id^="rate-"].result-item .counter {
	border: 2px solid #DDDDDD;
	line-height: 46px;
	width: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
}

div[id^="rate-"].result-item .panel-body > div > .row {
	position: relative;
}
div[id^="rate-"].result-item .actions {
	position: absolute;
	bottom: 0;
	right: 15px;
}
div[id^="rate-"].result-item .visible-md.visible-lg .actions {
	bottom: -36px;
}

div[id^="rate-"].result-item.compare_rate > .panel {
	border-color: #F0AD4E;
}

div[id^="rate-"].result-item h4 {
	margin: 0;
	line-height: 25px;
}
div[id^="rate-"].result-item h4 .popover {
	font-size: 0.8em;
}
div[id^="rate-"].result-item .provider_image {
	margin-right: 15px;
}
div[id^="rate-"].result-item .provider_image img {
	height: 50px;
}
div[id^="rate-"].result-item .price > * {
	margin-bottom: 0;
	margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid #CACACA;
}
div[id^="rate-"].result-item .price dt {
	color: #444444;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
}
div[id^="rate-"].result-item .price dd {
	color: inherit;
	font-family: Tahoma,Geneva,sans-serif;
	font-size: 21px;
	line-height: 33px;
	margin: 0;
}
div[id^="rate-"].result-item .price dl.light dt {
	color: #999999;
}
div[id^="rate-"].result-item .price dl.light dd {
	color: #999999;
}

div[id^="rate-"].result-item .price.price_nt dl {
	margin-right: 5px;
	padding-right: 5px;
}
div[id^="rate-"].result-item .price.price_nt dd {
	font-size: 15px;
}

/*
 * Loading Spinner
 */
.loading-spinner {
	-webkit-animation: spin 1000ms infinite linear;
	animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* collapse chevron indicator (BS5: data-bs-toggle + Bootstrap Icons) */
a[data-bs-toggle="collapse"] > .bi-chevron-down { display: inline-block; transition: transform .2s ease; }
a.collapsed[data-bs-toggle="collapse"] > .bi-chevron-down { transform: rotate(-90deg); }

button.btn-round {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  box-shadow: 1px 2px 2px #AAA;
}
.btn-bottom-round {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999;
}
.btn-bottom-round > .badge {
  position: absolute;
  right: 0;
  top: -5px;  
}

.order.nav.nav-tabs li > a {
	padding: 7px 11px;
}
.order.tab-content {
	font-size: 13px !important;
	font-family: Tahoma,Geneva,sans-serif !important;
}
.order.tab-content .table > thead > tr > th, 
.order.tab-content .table > tbody > tr > th, 
.order.tab-content .table > tfoot > tr > th, 
.order.tab-content .table > thead > tr > td, 
.order.tab-content .table > tbody > tr > td, 
.order.tab-content .table > tfoot > tr > td {
	padding: 5px !important; 
}

/* .modal-transparent */

.modal-transparent {
  background: transparent;
}
.modal-transparent .modal-content {
  background: transparent;
}
.modal-backdrop.modal-backdrop-transparent {
  background: #ffffff;
}
/*
.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .9;
  filter: alpha(opacity=90);
}
*/

/* .modal-fullscreen */



.modal-fullscreen {
  /*background: transparent;*/
	width: 100%;
	background-color: white;
}
.modal-fullscreen .modal-content {
  /*background: transparent;*/
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*
.modal-fullscreen::after {
	position:fixed;
	content:"";
	background-color: #FFF;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
*/


.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: 100;
  filter: alpha(opacity=100);
}

/* .modal-fullscreen size: we use Bootstrap media query breakpoints */

.modal-fullscreen .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
     width: 1170px;
  }
}

@media (max-width: 800px) {
	.modal-fullscreen .modal-dialog .sigPad {
		left: 188px;
		top: 880px;
	}
}

@media (min-width: 801px) and (max-width: 1280px) {
	.modal-fullscreen .modal-dialog .sigPad {
		left: 638px;
		top: 410px;
	}
}

/** Preis im Tarifrechner */

.rate-price .price > * {
  margin-bottom: 0;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #CACACA;
}
.rate-price .price dt {
  color: #444444;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}
.rate-price .price dd{
  color: inherit;
  font-family: Tahoma,Geneva,sans-serif;
  font-size: 21px;
  line-height: 33px;
  margin: 0;
}
.rate-price .price dl.light dt {
  color: #999999;
}
.rate-price .price dl.light dd {
  color: #999999;
}

.rate-price .price.price_nt dl {
  margin-right: 5px;
  padding-right: 5px;
}
.rate-price .price.price_nt dd {
  font-size: 15px;
}

.col-sm-0-5 {
    width: 5.66666666%;
    float: left;
    position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

.col-sm-1-5 {
    width: 11%;
    float: left;
    position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

.panel-section {
	/*border-right: 1px solid #ddd;*/
	height: 100%;
}

.panel-section:last-child {
	border-right: none;
}

.panel-section label {
	font-size: 12px;
	color: rgba(0,0,0,0.5);
	font-weight: normal;
}

.panel-section .fa-2x {
	font-size: 1.5em;
}

.col-sm-0-5 .fa {
	text-align: center;
	width: 100%;
}

.fa-gray {
	color: rgba(0,0,0,0.5);
}

.panel.not-accepted {
	border-color: #ff0000;
	background: rgba(255,0,0,0.05);
}

.panel-section h5 {
	margin-top: 0;
	margin-bottom: 5px;
}

.panel-section h5 small {
	color: inherit;
}

#egon-embedded-ratecalc-rate_change_container {
	disabled: relative;
	border: 1px solid #CCC;
	padding: 15px 15px 0px 15px;
	margin-bottom: 15px;
	background-color: #EFEFEF;
}

#egon-embedded-ratecalc-rate_change_container:before {
	display:block;
	content: "Vertragsdaten zum Tarifwechsel"
}

.digits {
	display: flex;
	gap: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
}

.digits > .digit-input {
	flex: 1;
}

.digits > .digit-input,
.egon-mfa-code {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

input[name="message_files"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.custom-file-upload {
	border: 1px solid #ccc;
	display: inline-block;
	padding: 6px 12px;
	cursor: pointer;
	background-color: #fff;
  }

.custom-file-upload:hover {
	background-color: #ddd;
}

/* tempsettings ratecalc providerlist */
#provider-checkbox-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}

#egon-embedded-neworder-form [data-fv-validator="notEmpty"] {
	display: none !important;
}


#egon-embedded-window div[id^="signature-"].tab-pane .checkbox {
	padding-left: 40px;
}

#egon-embedded-window div[id^="signature-"].tab-pane .checkbox label {
	display: flex;
  align-items: center;
}
#egon-embedded-window div[id^="signature-"].tab-pane .checkbox label input[type="checkbox"] {
	zoom: 2;
	margin-right: 5px;
	margin-top: 0px;
}

.signature-grid {
	display: grid;
  grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media screen and (max-width:768px) {
	.signature-grid {
		grid-template-columns: 1fr;
	}
}

.signature-grid > div {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.signature-grid div:has(> .textbox) {
	flex: 1;
	margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC REDESIGN
   Native BS5 + design tokens (colors_and_type.css). Scoped to
   .ratecalc-redesign so it never leaks to the legacy .result-item reuses
   in #egon-embedded-phone / -smarthome / neworder. Tokens only — no
   hardcoded brand hex — so per-mandant --ci-* overrides and the deferred
   dark-mode toggle keep working. Responsive via the cols and split
   token system (breakpoints 1023 / 899 / 767 / 639).
   ═══════════════════════════════════════════════════════════════════════ */

.ratecalc-redesign {
	/* responsive tokens (flipped by the media queries at the end) */
	--rc-rail: 1188px;
	--cols-2: repeat(2, minmax(0, 1fr));
	--cols-3: repeat(3, minmax(0, 1fr));
	--cols-4: repeat(4, minmax(0, 1fr));
	--split:  1fr 284px;       /* results content + Angebotsdruck sidebar */
	--split3: 1.05fr 1px 1fr;   /* result-card body: figures | divider | detail — figures side widened now that actions is down to 2 buttons */

	font-family: var(--font-sans);
	color: var(--fg-base);
}
.ratecalc-redesign *,
.ratecalc-redesign *::before,
.ratecalc-redesign *::after { box-sizing: border-box; }

.ratecalc-redesign .rc-rail { width: min(100%, var(--rc-rail)); margin-inline: auto; }

/* ── Cards & sections ───────────────────────────────────────────────── */
.ratecalc-redesign .rc-card {
	background: var(--bg-base);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ratecalc-redesign .rc-card-title {
	margin: 0;
	font: var(--fw-medium) 16px/24px var(--font-sans);
	color: var(--fg-base);
}
.ratecalc-redesign .rc-section { display: flex; flex-direction: column; gap: 10px; }
.ratecalc-redesign .rc-section-head {
	display: flex; align-items: center; gap: 10px;
	font: var(--fw-medium) 13px/20px var(--font-sans);
	color: var(--fg-base); white-space: nowrap;
}
.ratecalc-redesign .rc-section-head::after {
	content: ""; flex: 1; height: 1px; background: var(--border-base);
}
.ratecalc-redesign .rc-field-label {
	display: block;
	font: var(--fw-regular) 12px/16px var(--font-sans);
	color: var(--fg-subtle);
	margin-bottom: 5px;
}
.ratecalc-redesign .rc-req { color: var(--fg-error); }

/* Form fields (restyle the partials' native controls in place) */
.ratecalc-redesign .form-control,
.ratecalc-redesign .form-select,
.ratecalc-redesign .rc-input {
	width: 100%; height: 36px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans);
	box-shadow: none;
}
.ratecalc-redesign select.form-control,
.ratecalc-redesign .form-select { padding: 0 8px; }
.ratecalc-redesign .form-control:focus,
.ratecalc-redesign .form-select:focus,
.ratecalc-redesign .rc-input:focus {
	border-color: var(--border-interactive);
	box-shadow: var(--shadow-focus-ring);
	outline: none;
}
.ratecalc-redesign .form-group { margin-bottom: 12px; }
.ratecalc-redesign .form-group:last-child { margin-bottom: 0; }
.ratecalc-redesign .checkbox { padding-left: 0; }
.ratecalc-redesign .checkbox label {
	display: flex; align-items: center; gap: 8px; padding-left: 0; margin: 0; position: static;
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base);
	cursor: pointer;
}
.ratecalc-redesign .checkbox input[type="checkbox"] {
	position: static !important; float: none !important; margin: 0 !important;
	width: 16px; height: 16px; flex: none; accent-color: var(--bg-interactive);
}

/* ── Form grid ──────────────────────────────────────────────────────── */
.ratecalc-redesign .rc-form-grid {
	display: grid;
	grid-template-columns: var(--cols-3);
	gap: 20px;
	align-items: stretch;
}
.ratecalc-redesign .rc-col { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.ratecalc-redesign .rc-col > .rc-card { flex: none; }
.ratecalc-redesign .rc-col > .rc-card.rc-grow { flex: 1; min-height: 0; }
.ratecalc-redesign .rc-grid-2 { display: grid; grid-template-columns: var(--cols-2); gap: 12px; }
.ratecalc-redesign .rc-grid-plz { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }

/* ── Segmented toggles & consumption presets ────────────────────────── */
.ratecalc-redesign .rc-seg { display: grid; grid-template-columns: var(--cols-2); gap: 8px; }
/* Kundenart: 2 or 3 buttons depending on mandant config (disableCustomerTypesRatecalc) —
   always one row, columns share the width evenly for whatever count is rendered. */
.ratecalc-redesign .rc-seg[data-rc-seg="customer_type"] {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}
.ratecalc-redesign .rc-seg-btn,
.ratecalc-redesign .preset-consum-btn {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; min-height: 44px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-subtle);
	font: var(--fw-medium) 13px/1 var(--font-sans);
	cursor: pointer; text-align: center;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ratecalc-redesign .rc-seg-btn { height: 64px; }
.ratecalc-redesign .rc-seg-btn:hover,
.ratecalc-redesign .preset-consum-btn:hover { background: var(--bg-base-hover); }
.ratecalc-redesign .rc-seg-btn.active,
.ratecalc-redesign .preset-consum-btn.active {
	border-color: var(--border-interactive);
	background: var(--bg-highlight);
	color: var(--fg-interactive-hover);
}
.ratecalc-redesign .rc-presets { display: grid; grid-template-columns: var(--cols-4); gap: 8px; }
.ratecalc-redesign .rc-presets .preset-consum-btn { padding: 9px 6px; height: auto; }
.ratecalc-redesign .rc-presets .preset-consum-btn i { font-size: 12px; }

/* input + suffix group (min. Provision €, Preise) */
.ratecalc-redesign .rc-input-suffix {
	display: flex; align-items: center; height: 36px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); overflow: hidden;
}
.ratecalc-redesign .rc-input-suffix input {
	flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent;
	font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base);
}
.ratecalc-redesign .rc-input-suffix .rc-suffix {
	display: flex; align-items: center; height: 100%; padding: 0 10px;
	border-left: 1px solid var(--border-base); background: var(--bg-subtle-hover);
	font: var(--fw-regular) 12px/1 var(--font-sans); color: var(--fg-muted);
}

/* ── Filter card header + temporäre-Einstellungen flyout ────────────── */
.ratecalc-redesign .rc-card-headrow {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ratecalc-redesign .rc-linkbtn {
	border: 0; background: transparent; padding: 0;
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive); cursor: pointer;
}
.ratecalc-redesign .rc-linkbtn:hover { color: var(--fg-interactive-hover); text-decoration: underline; }
.ratecalc-redesign .rc-temp { position: relative; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); }
.ratecalc-redesign .rc-temp-trigger {
	display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 5px; cursor: pointer;
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base);
}
.ratecalc-redesign .rc-temp-trigger:hover { background: var(--bg-base-hover); }
.ratecalc-redesign .rc-temp-trigger .rc-chevron { margin-left: auto; display: flex; color: var(--fg-muted); transition: transform 120ms ease; }
.ratecalc-redesign .rc-temp.is-open .rc-temp-trigger .rc-chevron { transform: rotate(180deg); }
.ratecalc-redesign .rc-temp-panel {
	position: absolute; left: -16px; right: -16px; top: calc(100% + 8px); z-index: 20;
	padding: 12px 16px 16px; display: none; flex-direction: column; gap: 12px;
	background: var(--bg-base); border: 1px solid var(--fg-muted); border-radius: var(--radius-lg);
	box-shadow: 0 16px 32px -8px rgba(3,7,18,.28), 0 4px 12px -2px rgba(3,7,18,.16), 0 0 0 4px rgba(3,7,18,.06);
}
.ratecalc-redesign .rc-temp.is-open .rc-temp-panel { display: flex; }
.ratecalc-redesign .rc-temp-hint { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-supplier-list {
	max-height: 150px; overflow-y: auto; overflow-x: hidden;
	border: 1px solid var(--border-base); border-radius: var(--radius-md);
	background: var(--bg-base); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.ratecalc-redesign .rc-pill {
	display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9999px;
	font: var(--fw-medium) 11px/1 var(--font-sans);
	background: var(--bg-highlight); border: 1px solid var(--border-interactive); color: var(--fg-interactive-hover);
}

/* Compare-card base-provider buttons (BS3 .btn-group.btn-block in the partial) */
.ratecalc-redesign .btn-group.btn-block { display: flex; gap: 8px; margin-top: 4px; }
.ratecalc-redesign .btn-group.btn-block .btn { flex: 1; float: none; width: auto; min-width: 0; height: 34px; border-radius: var(--radius-md); font: var(--fw-medium) 13px/1 var(--font-sans); }
.ratecalc-redesign [data-target$=":getbaseprovider"].btn-primary { background: var(--bg-base); border-color: var(--border-interactive); color: var(--fg-interactive-hover); }
.ratecalc-redesign [data-target$=":getbaseprovider"].btn-primary:hover { background: var(--bg-highlight); border-color: var(--border-interactive); color: var(--fg-interactive-hover); }
.ratecalc-redesign [data-target$=":resetbaseprovider"].btn-primary { background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base); }
.ratecalc-redesign [data-target$=":resetbaseprovider"].btn-primary:hover { background: var(--bg-subtle-pressed); border-color: var(--fg-muted); color: var(--fg-base); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.ratecalc-redesign .rc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md);
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer;
	border: 1px solid var(--border-strong); background: var(--bg-base); color: var(--fg-base);
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	text-decoration: none;
}
.ratecalc-redesign .rc-btn:hover { background: var(--bg-subtle-pressed); border-color: var(--fg-muted); text-decoration: none; }
.ratecalc-redesign .rc-btn--primary { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); }
.ratecalc-redesign .rc-btn--primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.ratecalc-redesign .rc-btn--ghost { border-color: var(--border-interactive); color: var(--fg-interactive-hover); background: var(--bg-base); }
.ratecalc-redesign .rc-btn--ghost:hover { background: var(--bg-highlight); }
.ratecalc-redesign .rc-btn--block { width: 100%; }
.ratecalc-redesign .rc-btn[disabled], .ratecalc-redesign .rc-btn.is-disabled {
	background: var(--bg-subtle-hover); border-color: var(--border-base); color: var(--border-strong);
	cursor: default; pointer-events: none;
}

/* ── Summary bar (form collapsed after calculation) ─────────────────── */
.ratecalc-redesign .rc-collapsed { display: none !important; }
.ratecalc-redesign .rc-summary {
	display: flex; align-items: center; gap: 24px; flex-wrap: wrap; row-gap: 10px;
	padding: 14px 22px; background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	margin-bottom: 24px;
}
.ratecalc-redesign .rc-summary-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; min-width: 0; }
.ratecalc-redesign .rc-summary-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ratecalc-redesign .rc-summary-label { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-subtle); letter-spacing: .02em; }
.ratecalc-redesign .rc-summary-value { font: var(--fw-medium) 14px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap; }
.ratecalc-redesign .rc-summary-sep { flex: none; align-self: stretch; width: 1px; background: var(--border-base); }
.ratecalc-redesign .rc-summary .rc-btn { margin-left: auto; flex: none; }

/* ── Skeleton loading state ─────────────────────────────────────────── */
@keyframes rc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }
.ratecalc-redesign .rc-skeleton { display: grid; grid-template-columns: var(--split); gap: 24px; align-items: start; animation: rc-fade .24s ease both; }
.ratecalc-redesign .rc-sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ratecalc-redesign .rc-sk-title { font: var(--fw-semibold) 18px/28px var(--font-sans); color: var(--fg-base); }
.ratecalc-redesign .rc-sk-status { font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-spinner {
	flex: none; width: 16px; height: 16px; border-radius: 9999px;
	border: 2px solid var(--ci-prim-tint-loud); border-top-color: var(--ci-prim-eff);
	animation: rc-spin .7s linear infinite;
}
.ratecalc-redesign .rc-sk {
	background: linear-gradient(90deg, var(--bg-subtle-hover) 25%, var(--bg-subtle) 37%, var(--bg-subtle-hover) 63%);
	background-size: 400% 100%; animation: rc-shimmer 1.4s ease infinite; border-radius: 4px;
}
.ratecalc-redesign .rc-sk--onsubtle {
	background: linear-gradient(90deg, var(--border-base) 25%, var(--bg-subtle-hover) 37%, var(--border-base) 63%);
	background-size: 400% 100%; animation: rc-shimmer 1.4s ease infinite; border-radius: 4px;
}
.ratecalc-redesign .rc-sk-card {
	background: var(--bg-base); border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px 0 rgba(3,7,18,.04), 0 0 0 1px rgba(3,7,18,.08);
	overflow: hidden; animation: rc-rise .42s cubic-bezier(.22,.68,.3,1) both;
}
.ratecalc-redesign .rc-sk-list { display: flex; flex-direction: column; gap: 16px; }
.ratecalc-redesign .rc-sk-list > .rc-sk-card:nth-child(1) { animation-delay: 0ms; }
.ratecalc-redesign .rc-sk-list > .rc-sk-card:nth-child(2) { animation-delay: 90ms; }
.ratecalc-redesign .rc-sk-list > .rc-sk-card:nth-child(3) { animation-delay: 180ms; }
.ratecalc-redesign .rc-sk-list > .rc-sk-card:nth-child(4) { animation-delay: 270ms; }
.ratecalc-redesign .rc-sk-cardhead { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border-base); }
.ratecalc-redesign .rc-sk-cardbody { display: grid; grid-template-columns: var(--split3); }
.ratecalc-redesign .rc-sk-cell { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.ratecalc-redesign .rc-sk-divider { background: var(--border-base); }
.ratecalc-redesign .rc-skeleton .rc-sk-side { display: flex; flex-direction: column; gap: 16px; margin-top: 44px; }

/* ── Result view ────────────────────────────────────────────────────── */
.ratecalc-redesign .rc-results { display: grid; grid-template-columns: var(--split); gap: 24px; align-items: start; animation: rc-fade .3s ease both; }
.ratecalc-redesign .rc-results-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ratecalc-redesign .rc-results-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ratecalc-redesign .rc-results-head h3 { margin: 0; font: var(--fw-semibold) 18px/28px var(--font-sans); color: var(--fg-base); }
.ratecalc-redesign .rc-results-head .rc-sub { font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-muted); }

/* Result card */
.ratecalc-redesign .rc-result-card {
	background: var(--bg-base); border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px 0 rgba(3,7,18,.04), 0 0 0 1px rgba(3,7,18,.08);
	overflow: hidden; animation: rc-rise .46s cubic-bezier(.22,.68,.3,1) both;
}
.ratecalc-redesign .rc-result-card.rc-compare-ref { background: var(--bg-subtle); }
.ratecalc-redesign .rc-card-header {
	display: flex; align-items: center; gap: 14px; padding: 14px 20px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-base);
}
.ratecalc-redesign .rc-card-header.is-empfehlung { background: var(--bg-highlight); }
.ratecalc-redesign .rc-card-header.is-aktion { background: var(--tag-orange-bg); }
.ratecalc-redesign .rc-marker {
	flex: none; width: 34px; height: 34px; border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-semibold) 14px/1 var(--font-sans); color: var(--fg-base);
}
.ratecalc-redesign .rc-marker.is-empfehlung { border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover); }
.ratecalc-redesign .rc-marker.is-aktion { border-color: var(--tag-orange-fg); background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.ratecalc-redesign .rc-logo { flex: none; width: 111px; height: 50px; display: flex; align-items: center; justify-content: center; }
.ratecalc-redesign .rc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ratecalc-redesign .rc-logo--placeholder {
	border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
	font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--fg-muted);
}
.ratecalc-redesign .rc-card-titles { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ratecalc-redesign .rc-tarif-name { display: flex; align-items: center; gap: 8px; font: var(--fw-semibold) 16px/22px var(--font-sans); color: var(--fg-base); }
.ratecalc-redesign .rc-anbieter { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-badge {
	display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 9999px;
	font: var(--fw-medium) 12px/18px var(--font-sans); white-space: nowrap;
}
.ratecalc-redesign .rc-badge--blau { background: var(--bg-highlight); border: 1px solid var(--border-interactive); color: var(--fg-interactive-hover); }
.ratecalc-redesign .rc-badge--gold { background: var(--tag-orange-bg); border: 1px solid var(--tag-orange-fg); color: var(--tag-orange-fg); }
.ratecalc-redesign .rc-badge--neutral { background: var(--bg-subtle-hover); border: 1px solid var(--border-base); color: var(--fg-subtle); }
.ratecalc-redesign .rc-icons { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ratecalc-redesign .rc-icon-btn {
	width: 30px; height: 30px; border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center; color: var(--fg-subtle);
	background: transparent; border: 0; cursor: help;
}
.ratecalc-redesign .rc-icon-btn.rc-eco { color: var(--tag-green-fg); }
.ratecalc-redesign .rc-icon-btn:hover { background: var(--bg-subtle-hover); }

/* Result card body */
.ratecalc-redesign .rc-card-body { display: grid; grid-template-columns: var(--split3); }
.ratecalc-redesign .rc-card-divider { background: var(--border-base); }
.ratecalc-redesign .rc-card-figures { padding: 16px 20px 18px; }
.ratecalc-redesign .rc-price-label { font: var(--fw-medium) 12px/16px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-price { display: flex; align-items: baseline; gap: 8px; }
.ratecalc-redesign .rc-price-value { font: var(--fw-semibold) 34px/44px var(--font-sans); color: var(--fg-base); letter-spacing: -.015em; }
.ratecalc-redesign .rc-price-unit { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-savings {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 9px 2px 7px; border-radius: 9999px;
	background: var(--tag-green-bg); color: var(--tag-green-fg); font: var(--fw-medium) 12px/18px var(--font-sans);
}
.ratecalc-redesign .rc-footnote { margin-top: 12px; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-savings-line {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 10px; border-radius: 9999px;
	background: var(--tag-green-bg); font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--tag-green-fg);
}
.ratecalc-redesign .rc-savings-line:empty { display: none; }
.ratecalc-redesign .rc-savings-line .text-danger { color: var(--fg-error); }
.ratecalc-redesign .rc-savings-line .text-success { color: var(--tag-green-fg); }
.ratecalc-redesign .rc-merkmale { display: flex; flex-direction: column; margin: 0 0 12px; padding: 0; list-style: none; }
.ratecalc-redesign .rc-merkmale > li {
	display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
}
.ratecalc-redesign .rc-adjust { margin-left: auto; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
.ratecalc-redesign .rc-adjust:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }
.ratecalc-redesign .rc-tabcontent table {
	width: 100%; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
	/* Bootstrap's .table defaults --bs-table-bg to var(--bs-body-bg), which this
	   site maps to --bg-subtle (grey) — retint to white so tab content isn't tinted. */
	--bs-table-bg: var(--bg-base);
}
.ratecalc-redesign .rc-tabcontent td { padding: 4px 6px 4px 0; vertical-align: top; }
.ratecalc-redesign .rc-tabcontent table.table td:last-child { text-align: right; color: var(--fg-base); font-weight: var(--fw-medium); }
.ratecalc-redesign .rc-tabcontent h5 { margin: 14px 0 6px; font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-tabcontent a { color: var(--fg-interactive); }

/* split price bar */
.ratecalc-redesign .rc-bar { display: flex; height: 8px; border-radius: 9999px; overflow: hidden; background: var(--bg-subtle-hover); margin-top: 14px; }
/* Two shades of the mandant primary — resilient even when --ci-sek is unset */
.ratecalc-redesign { --rc-bar-c-a: var(--bg-interactive); --rc-bar-c-g: color-mix(in srgb, var(--bg-interactive) 38%, var(--bg-base)); }
.ratecalc-redesign .rc-bar-a { width: var(--rc-bar-a, 60%); background: var(--rc-bar-c-a); }
.ratecalc-redesign .rc-bar-gap { width: 1px; background: var(--bg-base); }
.ratecalc-redesign .rc-bar-g { flex: 1; background: var(--rc-bar-c-g); }
.ratecalc-redesign .rc-legend { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.ratecalc-redesign .rc-legend-item { display: flex; gap: 8px; }
.ratecalc-redesign .rc-legend-dot { flex: none; width: 8px; height: 8px; border-radius: 9999px; margin-top: 5px; }
.ratecalc-redesign .rc-legend-dot.a { background: var(--rc-bar-c-a); }
.ratecalc-redesign .rc-legend-dot.g { background: var(--rc-bar-c-g); }
.ratecalc-redesign .rc-legend-cap { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.ratecalc-redesign .rc-legend-val { font: var(--fw-medium) 13px/18px var(--font-sans); color: var(--fg-base); }

/* Result card right column (merkmale + actions only — tabs live outside, full-width) */
.ratecalc-redesign .rc-card-detail { padding: 16px 20px 18px; display: flex; flex-direction: column; min-width: 0; }
.ratecalc-redesign .rc-detail-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0;
	border-bottom: 1px solid var(--border-row); font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
}
.ratecalc-redesign .rc-detail-row > span:last-child { font-weight: var(--fw-medium); color: var(--fg-base); text-align: right; }
.ratecalc-redesign .rc-detail-empty { padding: 8px 0; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }

/* Result card action bar — must never cross the card-body divider, so it wraps
   inside the right column instead of overflowing (matches reference exactly). */
.ratecalc-redesign .rc-actions { margin-top: 16px; margin-bottom: 4px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 6px; max-width: 100%; }
.ratecalc-redesign .rc-actions .rc-btn { height: 32px; flex: none; }

/* Full-width tab bar + content — sits below the whole card-body (both columns),
   "file folder" tab look matching the reference 1:1. */
.ratecalc-redesign .rc-tabs {
	margin: 0; list-style: none; display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
	padding: 8px 20px 0; background: var(--bg-subtle); border-top: 1px solid var(--border-base); border-bottom: 1px solid var(--border-base);
}
.ratecalc-redesign .rc-tabs .nav-link,
.ratecalc-redesign .rc-tabs > li > a {
	display: block; padding: 6px 14px; border: 1px solid transparent; border-radius: 6px 6px 0 0; margin-bottom: -1px;
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); white-space: nowrap; cursor: pointer; background: transparent;
	text-decoration: none;
}
.ratecalc-redesign .rc-tabs .nav-link:hover,
.ratecalc-redesign .rc-tabs > li > a:hover { text-decoration: none; }
.ratecalc-redesign .rc-tabs .nav-link.active,
.ratecalc-redesign .rc-tabs > li > a.active {
	border-color: var(--border-base); border-bottom-color: var(--bg-base); background: var(--bg-base);
	font-weight: var(--fw-medium); color: var(--fg-base);
}
.ratecalc-redesign .rc-tabcontent { padding: 12px 20px 18px; background: var(--bg-base); }

/* ── Right sidebar (Berechnungsbasis + Angebotsdruck) ───────────────── */
.ratecalc-redesign .rc-sidebar { position: sticky; top: 24px; margin-top: 44px; display: flex; flex-direction: column; gap: 16px; }
.ratecalc-redesign .rc-side-card {
	background: var(--bg-base); border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px 0 rgba(3,7,18,.04), 0 0 0 1px rgba(3,7,18,.08); overflow: hidden;
}
.ratecalc-redesign .rc-side-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-base); font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.ratecalc-redesign .rc-side-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ratecalc-redesign .rc-side-row { display: flex; justify-content: space-between; gap: 10px; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.ratecalc-redesign .rc-side-row > span:last-child { font-weight: var(--fw-medium); color: var(--fg-base); }
.ratecalc-redesign .rc-count-pill { margin-left: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9999px; background: var(--bg-highlight); border: 1px solid var(--border-interactive); color: var(--fg-interactive-hover); font: var(--fw-medium) 11px/1 var(--font-sans); }
.ratecalc-redesign .rc-basket-empty {
	background: var(--bg-subtle); border: 1px solid var(--border-base); border-radius: var(--radius-md);
	padding: 12px 14px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted);
}
.ratecalc-redesign .rc-basket-item {
	display: flex; align-items: center; gap: 8px; padding: 8px 10px;
	border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-base);
}
.ratecalc-redesign .rc-basket-item .rc-bi-body { min-width: 0; flex: 1; }
.ratecalc-redesign .rc-basket-item .rc-bi-tarif { font: var(--fw-medium) 13px/18px var(--font-sans); color: var(--fg-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ratecalc-redesign .rc-basket-item .rc-bi-anbieter { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ratecalc-redesign .rc-bi-remove { flex: none; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
.ratecalc-redesign .rc-bi-remove:hover { background: var(--bg-subtle-hover); color: var(--fg-error); }

/* message area */
.ratecalc-redesign #egon-embedded-ratecalc-message h3 { font: var(--fw-medium) 18px/28px var(--font-sans); color: var(--fg-base); }

/* ── Compact "Vergleichstarif" tile (layout="compare") ──────────────── */
/* Sits above the result list — single-row summary, no tabs/merkmale/actions. */
.ratecalc-redesign .rc-compare-tile .rc-card-header { background: transparent; }
.ratecalc-redesign .rc-compare-body { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 12px 20px 14px; }
.ratecalc-redesign .rc-compare-price { flex: none; }
.ratecalc-redesign .rc-compare-tile .rc-price-value { font-size: 26px; line-height: 34px; }
.ratecalc-redesign .rc-compare-bar { flex: 1 1 220px; min-width: 220px; max-width: 359px; }
.ratecalc-redesign .rc-compare-bar .rc-bar { margin-top: 0; }

/* ── temporäre-Einstellungen panel content (settingstemp) ───────────── */
.ratecalc-redesign .rc-btn--xs { height: 26px; padding: 0 10px; font: var(--fw-medium) 12px/1 var(--font-sans); gap: 0; }
.ratecalc-redesign .rc-pill--neutral { height: 16px; padding: 0 5px; font-size: 11px; background: var(--bg-subtle-hover); border-color: var(--border-base); color: var(--fg-subtle); }
.ratecalc-redesign .rc-seg-btn--sm { height: 32px; }
.ratecalc-redesign .rc-seg-radio-input {
	position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none;
}
.ratecalc-redesign .rc-seg-radio:has(.rc-seg-radio-input:checked) {
	border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover);
}
.ratecalc-redesign .rc-versorger-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ratecalc-redesign .rc-versorger-actions { margin-left: auto; display: flex; gap: 6px; }
.ratecalc-redesign .rc-supplier-list .checkbox { margin: 0; }
.ratecalc-redesign .rc-supplier-name { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ratecalc-redesign .rc-temp-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ratecalc-redesign .rc-temp-actions .rc-btn:last-child { flex: 1; }

/* ── Responsive token flips ─────────────────────────────────────────── */
@media (max-width: 1023px) {
	.ratecalc-redesign { --cols-4: repeat(2, minmax(0, 1fr)); --split: minmax(0, 1fr); --split3: minmax(0, 1fr); }
	.ratecalc-redesign .rc-card-divider,
	.ratecalc-redesign .rc-sk-divider { display: none; }
	.ratecalc-redesign .rc-sidebar { position: static; margin-top: 0; }
	.ratecalc-redesign .rc-skeleton .rc-sk-side { margin-top: 0; }
}
@media (max-width: 767px) {
	.ratecalc-redesign { --cols-3: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.ratecalc-redesign { --cols-2: minmax(0, 1fr); --cols-3: 1fr; --cols-4: 1fr; }
	.ratecalc-redesign .rc-grid-plz { grid-template-columns: 96px minmax(0, 1fr); }
	.ratecalc-redesign .rc-actions .rc-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.ratecalc-redesign * { animation-duration: .01ms !important; animation-delay: 0s !important; }
	.ratecalc-redesign .rc-sk, .ratecalc-redesign .rc-sk--onsubtle { animation: none; }
}
/* ── end RATECALC REDESIGN ─────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL POPOVER STYLE — compact dark hover tooltip
   Bootstrap 5 always appends .popover to <body>, never as a descendant of
   the triggering screen's wrapper, so this cannot be scoped per-module.
   Tokens only. Safe site-wide: every other data-bs-toggle="popover" spot
   in the codebase currently uses the legacy `data-content` attribute
   (Bootstrap 5 only reads `data-bs-content`), so no popover anywhere else
   is actually rendering content today — this cannot regress anything
   currently visible.
   ═══════════════════════════════════════════════════════════════════════ */
.popover {
	--bs-popover-max-width: 260px;
	--bs-popover-border-width: 0;
	--bs-popover-border-radius: 6px;
	--bs-popover-bg: var(--fg-base);
	--bs-popover-body-color: var(--bg-base);
	--bs-popover-body-padding-x: 9px;
	--bs-popover-body-padding-y: 5px;
	--bs-popover-arrow-height: 8px;
	box-shadow: 0 4px 10px -2px rgba(3,7,18,.28), 0 1px 2px 0 rgba(3,7,18,.24);
}
.popover .popover-body { font: var(--fw-regular) 12px/18px var(--font-sans); }
/* ── end GLOBAL POPOVER STYLE ───────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   "Angebot erstellen" dialog (ratecalc comparewindow)
   The shared modal window (view/egon/window) is appended straight to
   <body> by egon.js showWindow() — never a descendant of .ratecalc-redesign
   — so this cannot be scoped under that wrapper. Instead the modal opens
   with additionalClass="rc-offer-modal" (see ratecalc.js onCompare) giving
   a single-use hook for the shared chrome, and the content itself is
   wrapped in .rc-offer-dialog for everything else. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.rc-offer-modal .modal-content { border-radius: 8px; overflow: hidden; }
.rc-offer-modal .modal-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-base); }
.rc-offer-modal .modal-title { order: 1; font: var(--fw-medium) 15px/22px var(--font-sans); color: var(--fg-base); display: flex; align-items: baseline; gap: 10px; }
.rc-offer-header-sub { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.rc-offer-modal .modal-body { padding: 0; }
.rc-offer-modal .modal-footer { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-base); background: var(--bg-base); }
.rc-offer-modal .close { order: 2; margin-left: auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border-base); border-radius: 6px; background: var(--bg-base); color: var(--fg-subtle); opacity: 1; }
.rc-offer-modal .close:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }

.rc-offer-dialog { font-family: var(--font-sans); }
#egon-embedded-ratecalc-offer-message:empty { display: none; }

.rc-offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; }
.rc-offer-main { min-width: 0; border-right: 1px solid var(--border-base); padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.rc-offer-side { min-width: 0; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-subtle); }

.rc-offer-dialog .form-control { height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-base); font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.rc-offer-dialog .form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.rc-offer-dialog textarea.form-control { height: auto; padding: 9px 10px; font: var(--fw-regular) 13px/20px var(--font-sans); resize: vertical; }
.rc-offer-dialog .input-group { display: flex; }
.rc-offer-dialog .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rc-offer-dialog .input-group-text { display: flex; align-items: center; justify-content: center; width: 34px; flex: none; border: 1px solid var(--border-strong); border-left: 0; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background: var(--bg-subtle); color: var(--fg-muted); }

.rc-offer-dialog .rc-offer-label { display: block; margin-bottom: 5px; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.rc-offer-dialog .rc-offer-label .req { color: var(--fg-error); }
.rc-offer-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rc-offer-hint { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.rc-offer-section-title { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }

.rc-offer-search-wrap { position: relative; display: flex; flex-direction: column; gap: 5px; }
.rc-offer-search { position: relative; display: flex; align-items: center; }
.rc-offer-search .bi { position: absolute; left: 10px; color: var(--fg-muted); font-size: 15px; pointer-events: none; }
.rc-offer-search input.form-control { padding-left: 32px; }
.rc-offer-dialog .typeahead.dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px; padding: 4px; border: 1px solid var(--border-base); border-radius: 6px; background: var(--bg-base); box-shadow: var(--shadow-modal); list-style: none; max-height: 240px; overflow-y: auto; }
.rc-offer-dialog .typeahead.dropdown-menu > li > a { display: block; padding: 8px 10px; border-radius: 6px; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); text-decoration: none; cursor: pointer; }
.rc-offer-dialog .typeahead.dropdown-menu > li.active > a,
.rc-offer-dialog .typeahead.dropdown-menu > li > a:hover { background: var(--bg-subtle); color: var(--fg-base); }

.rc-offer-address-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rc-offer-field.form-group { margin-bottom: 0; }
.rc-offer-span-2 { grid-column: span 2; }
.rc-offer-span-3 { grid-column: span 3; }
.rc-offer-span-4 { grid-column: span 4; }
.rc-offer-span-6 { grid-column: span 6; }

.rc-offer-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 8px; background: var(--bg-subtle); box-shadow: 0 0 0 1px rgba(3,7,18,.06); }
.rc-offer-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }
.rc-offer-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }

.rc-offer-label-row { display: flex; align-items: center; gap: 8px; }
.rc-offer-hint-right { margin-left: auto; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }

.rc-offer-side-head { display: flex; align-items: center; gap: 8px; }
.rc-offer-edit-btn { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--border-base); border-radius: 6px; background: var(--bg-base); font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.rc-offer-edit-btn:hover { background: var(--bg-subtle-hover); }
.rc-offer-card { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 8px; background: var(--bg-base); box-shadow: 0 0 0 1px rgba(3,7,18,.06); }
.rc-offer-card .rc-offer-ap-name { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.rc-offer-card .rc-offer-ap-line { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }
.rc-offer-ap-form { gap: 10px; }
.rc-offer-ap-form .rc-offer-address-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rc-offer-ap-done { align-self: flex-start; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-base); font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.rc-offer-ap-done:hover { background: var(--bg-subtle-hover); }

.rc-offer-side-divider { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-base); }
.rc-offer-side .form-group { margin: 0 0 8px; }
.rc-offer-side .form-group:last-child { margin-bottom: 0; }
.rc-offer-side .row.input-row { margin: 0 0 8px; }
.rc-offer-side .row.input-row:last-child { margin-bottom: 0; }
.rc-offer-side .row.input-row > [class*="col-"] { padding: 0 4px; }
.rc-offer-side .row.input-row > [class*="col-"]:first-child { padding-left: 0; }
.rc-offer-side .row.input-row > [class*="col-"]:last-child { padding-right: 0; }

/* Contact icons for email/website, matching the phone/fax/mobile .input-group-text look
   (Contact.html is a shared partial — no markup change, icon is CSS-injected). */
.rc-offer-side .form-group:has(> input[name$="email"]),
.rc-offer-side .form-group:has(> input[name$="website"]) { position: relative; }
.rc-offer-side .form-group:has(> input[name$="email"]) > input.form-control,
.rc-offer-side .form-group:has(> input[name$="website"]) > input.form-control { padding-right: 34px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rc-offer-side .form-group:has(> input[name$="email"])::after {
	content: "\f0e0"; position: absolute; top: 0; right: 0; width: 34px; height: 36px; line-height: 34px; text-align: center;
	border: 1px solid var(--border-strong); border-left: 1px solid var(--border-strong); border-radius: 0 6px 6px 0;
	background: var(--bg-subtle); color: var(--fg-muted); font-family: "FontAwesome"; font-size: 14px; pointer-events: none;
}
.rc-offer-side .form-group:has(> input[name$="website"])::after {
	content: "\f0ac"; position: absolute; top: 0; right: 0; width: 34px; height: 36px; line-height: 34px; text-align: center;
	border: 1px solid var(--border-strong); border-left: 1px solid var(--border-strong); border-radius: 0 6px 6px 0;
	background: var(--bg-subtle); color: var(--fg-muted); font-family: "FontAwesome"; font-size: 14px; pointer-events: none;
}

.rc-offer-modal .modal-footer .rc-offer-btn-ghost { height: 36px; padding: 0 14px; border: 1px solid var(--border-base); border-radius: 6px; background: var(--bg-base); font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.rc-offer-modal .modal-footer .rc-offer-btn-ghost:hover { background: var(--bg-subtle-hover); }
.rc-offer-modal .modal-footer .rc-offer-btn-primary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 18px; border-radius: 6px; font: var(--fw-medium) 13px/1 var(--font-sans); border: 1px solid var(--border-interactive); background: var(--bg-interactive); color: var(--fg-on-color); cursor: pointer; }
.rc-offer-modal .modal-footer .rc-offer-btn-primary:hover { background: var(--bg-interactive-hover); }
.rc-offer-modal .modal-footer .rc-offer-btn-primary[disabled] { border-color: var(--border-base); background: var(--bg-disabled); color: var(--fg-disabled); cursor: default; }
.rc-offer-modal .modal-footer .rc-offer-btn-primary[disabled]:hover { background: var(--bg-disabled); }
.rc-offer-modal .modal-footer .rc-offer-hint-text { min-width: 0; flex: 1; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }

@media (max-width: 899px) {
	.rc-offer-grid { grid-template-columns: minmax(0, 1fr); }
	.rc-offer-main { border-right: 0; border-bottom: 1px solid var(--border-base); }
	.rc-offer-address-grid,
	.rc-offer-ap-form .rc-offer-address-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rc-offer-span-2, .rc-offer-span-3, .rc-offer-span-4, .rc-offer-span-6 { grid-column: span 2; }
}
/* ── end "Angebot erstellen" dialog ─────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════
   NEW ORDER (neworder) REDESIGN
   Auftragserfassung single-page checkout. Native BS5 + design tokens
   (colors_and_type.css). Scoped to .neworder-redesign so it never leaks to
   the legacy reuses of the shared Partials/Form/* (customer, editorder,
   register*, reseller*, smart, …). Tokens only — no hardcoded brand hex —
   so per-mandant --ci-* overrides and the deferred dark toggle keep working.
   Because the styling targets the shared Bootstrap primitives (.form-group,
   .form-control, .checkbox, .btn, .row.input-row), it reaches ALL ~90
   per-provider order templates, not just energy/default.html.
   Responsive token flips at 1023 / 899 / 767 / 639 (same as ratecalc).
   ═══════════════════════════════════════════════════════════════════════ */

.neworder-redesign {
	--no-rail: 1188px;
	--no-head: 1fr 1px 340px;   /* tariff card: figures | divider | summary rail */
	--no-cols-12: repeat(12, minmax(0, 1fr));

	font-family: var(--font-sans);
	color: var(--fg-base);
}
.neworder-redesign *,
.neworder-redesign *::before,
.neworder-redesign *::after { box-sizing: border-box; }

.neworder-redesign #egon-embedded-neworder-content,
.neworder-redesign #egon-embedded-neworder-overview,
.neworder-redesign #egon-embedded-neworder-success { width: min(100%, var(--no-rail)); margin-inline: auto; }
.neworder-redesign #egon-embedded-neworder-content { display: flex; flex-direction: column; gap: 16px; padding: 8px 0 24px; }
.neworder-redesign #egon-embedded-neworder-footer:empty { display: none; }
/* The header card already provides "Tarif neu wählen" — hide the legacy standalone
   changerate links/buttons the template renders above the form. */
.neworder-redesign #egon-embedded-neworder-provider > .bs-callout,
.neworder-redesign #egon-embedded-neworder-provider > a.btn,
.neworder-redesign #egon-embedded-neworder-provider > button.btn { display: none; }

.neworder-redesign .no-stack { display: flex; flex-direction: column; gap: 16px; }

/* ── Cards & section headers ────────────────────────────────────────── */
.neworder-redesign .no-card {
	background: var(--bg-base);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.neworder-redesign .no-card-head { display: flex; align-items: center; gap: 10px; }
.neworder-redesign .no-card-title { margin: 0; font: var(--fw-medium) 16px/24px var(--font-sans); color: var(--fg-base); }
.neworder-redesign .no-card-meta { margin-left: auto; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.neworder-redesign .no-subhead {
	font: var(--fw-medium) 12px/18px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted);
}
.neworder-redesign .no-divider { height: 1px; background: var(--border-base); border: 0; margin: 2px 0; }
.neworder-redesign .no-req { color: var(--fg-error); }

/* ── Tariff-summary header card ──────────────────────────────────────── */
.neworder-redesign .no-head-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	overflow: hidden; display: grid; grid-template-columns: var(--no-head);
}
.neworder-redesign .no-head-main { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.neworder-redesign .no-head-divider { background: var(--border-base); }
.neworder-redesign .no-head-side { padding: 16px 20px 18px; display: flex; flex-direction: column; }
.neworder-redesign .no-head-top { display: flex; align-items: center; gap: 14px; }
.neworder-redesign .no-logo { flex: none; width: 111px; height: 50px; object-fit: contain; object-position: left center; }
.neworder-redesign .no-logo-ph {
	flex: none; width: 111px; height: 50px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font: var(--fw-medium) 11px/1 var(--font-sans);
}
.neworder-redesign .no-head-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.neworder-redesign .no-head-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.neworder-redesign .no-head-rate { font: var(--fw-semibold, 600) 16px/22px var(--font-sans); color: var(--fg-base); }
.neworder-redesign .no-head-provider { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.neworder-redesign .no-badge {
	display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 9999px;
	background: var(--bg-highlight); border: 1px solid var(--border-interactive);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive-hover); white-space: nowrap;
}
.neworder-redesign .no-price-wrap { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.neworder-redesign .no-price-label { font: var(--fw-medium) 12px/16px var(--font-sans); color: var(--fg-muted); }
.neworder-redesign .no-price { display: flex; align-items: baseline; gap: 8px; }
.neworder-redesign .no-price-val { font: var(--fw-semibold, 600) 30px/38px var(--font-sans); color: var(--fg-base); letter-spacing: -.015em; }
.neworder-redesign .no-price-tax { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.neworder-redesign .no-foot { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }

/* split price bar — two shades of the mandant PRIMARY (resilient when --ci-sek is unset/black) */
.neworder-redesign { --no-bar-a: var(--bg-interactive); --no-bar-g: color-mix(in srgb, var(--bg-interactive) 38%, var(--bg-base)); }
.neworder-redesign .no-bar { display: flex; height: 8px; border-radius: 9999px; overflow: hidden; background: var(--bg-subtle-hover); }
.neworder-redesign .no-bar-a { width: var(--no-bar-w, 60%); background: var(--no-bar-a); }
.neworder-redesign .no-bar-gap { width: 1px; background: var(--bg-base); }
.neworder-redesign .no-bar-g { flex: 1; background: var(--no-bar-g); }
.neworder-redesign .no-legend { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.neworder-redesign .no-legend-item { display: flex; gap: 7px; }
.neworder-redesign .no-legend-dot { flex: none; width: 9px; height: 9px; border-radius: 9999px; margin-top: 5px; }
.neworder-redesign .no-legend-dot.a { background: var(--no-bar-a); }
.neworder-redesign .no-legend-dot.g { background: var(--no-bar-g); }
.neworder-redesign .no-legend-cap { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.neworder-redesign .no-legend-val { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }

/* summary rail rows */
.neworder-redesign .no-sum-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0;
	border-bottom: 1px solid var(--border-row); font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
}
.neworder-redesign .no-sum-row > span:last-child { font-weight: var(--fw-medium); color: var(--fg-base); text-align: right; }
.neworder-redesign .no-head-side .no-spacer { flex: 1; min-height: 12px; }
.neworder-redesign .no-relink {
	align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
	border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-interactive-hover); text-decoration: none; cursor: pointer;
}
.neworder-redesign .no-relink:hover { background: var(--bg-highlight); color: var(--fg-interactive-hover); text-decoration: none; }

/* ── Form fields (shared Partials/Form/*) ───────────────────────────── */
.neworder-redesign .no-fields { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: flex-start; }
.neworder-redesign .no-fields > .form-group { flex: 1 1 240px; margin: 0; min-width: 0; }
.neworder-redesign .no-fields > .row.input-row,
.neworder-redesign .no-fields > .bs-callout,
.neworder-redesign .no-fields > hr,
.neworder-redesign .no-fields > .no-subhead,
.neworder-redesign .no-fields > .checkbox { flex: 1 1 100%; margin: 0; }
.neworder-redesign .no-fields > hr { border: 0; border-top: 1px solid var(--border-base); }
/* the partials pair some fields with an internal BS row (name, zip/city, street/nr) */
.neworder-redesign .row.input-row { margin: 0 -6px; display: flex; flex-wrap: wrap; }
.neworder-redesign .row.input-row > [class*="col-"] { padding: 0 6px; margin-bottom: 0; }
.neworder-redesign .row.input-row .form-group { margin: 0; }

.neworder-redesign .form-group { margin-bottom: 0; }
.neworder-redesign .form-group + .form-group { margin-top: 12px; }
.neworder-redesign .form-label,
.neworder-redesign .form-group > label:not(.checkbox label),
.neworder-redesign label.col-sm-4 {
	display: block; float: none; width: auto; padding: 0; text-align: left !important;
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin: 0 0 5px;
}
.neworder-redesign .col-sm-8 { width: auto; padding: 0; }

.neworder-redesign .form-control,
.neworder-redesign select.form-control,
.neworder-redesign .form-select {
	width: 100%; height: 36px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base); box-shadow: none;
	appearance: auto;
}
.neworder-redesign textarea.form-control { height: auto; min-height: 72px; padding: 8px 10px; }
.neworder-redesign .form-control:focus,
.neworder-redesign select.form-control:focus,
.neworder-redesign .form-select:focus {
	outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring);
}
.neworder-redesign .form-control::placeholder { color: var(--fg-muted); }
.neworder-redesign .form-control[disabled],
.neworder-redesign .form-control[readonly] { background: var(--bg-disabled); color: var(--fg-subtle); }
.neworder-redesign .input-group.date { display: flex; }
.neworder-redesign .input-group.date .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.neworder-redesign .input-group-text {
	display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-left: 0;
	border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--bg-subtle); color: var(--fg-muted);
}
.neworder-redesign .help-block { margin: 5px 0 0; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-muted); }

/* checkboxes — undo the bs5-compat absolute positioning that clips labels */
.neworder-redesign .checkbox { margin: 0; }
.neworder-redesign .checkbox label { position: relative; display: flex; align-items: flex-start; gap: 9px; padding-left: 0; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); cursor: pointer; }
.neworder-redesign .checkbox input[type="checkbox"] {
	position: static !important; float: none !important; margin: 2px 0 0 !important; flex: none;
	width: 16px; height: 16px; accent-color: var(--bg-interactive);
}
.neworder-redesign .checkbox + .checkbox { margin-top: 8px; }
.neworder-redesign .checkbox a { color: var(--fg-interactive); }

/* bs-callout notices */
.neworder-redesign .bs-callout {
	padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-base);
	background: var(--bg-subtle); font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
}
.neworder-redesign .bs-callout h4 { margin: 0 0 4px; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.neworder-redesign .bs-callout-warning { background: var(--tag-orange-bg); border-color: var(--tag-orange-border, var(--border-base)); }
.neworder-redesign .bs-callout-success { background: var(--tag-green-bg); }
.neworder-redesign .bs-callout-info { background: var(--bg-highlight); border-color: var(--border-interactive); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.neworder-redesign .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 36px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid transparent;
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.neworder-redesign .btn-lg { height: 42px; padding: 0 20px; font-size: 14px; }
.neworder-redesign .btn-primary { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); }
.neworder-redesign .btn-primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.neworder-redesign .btn-success { background: var(--bg-interactive); border-color: var(--border-interactive); color: var(--fg-on-color); }
.neworder-redesign .btn-success:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }
.neworder-redesign .btn-secondary,
.neworder-redesign .btn-default {
	background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base);
}
.neworder-redesign .btn-secondary:hover,
.neworder-redesign .btn-default:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }
.neworder-redesign .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Sticky action bar ───────────────────────────────────────────────── */
.neworder-redesign #egon-embedded-neworder-actionbar {
	position: sticky; bottom: 0; z-index: 5;
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 16px 20px; display: flex; align-items: stretch; gap: 20px;
}
.neworder-redesign .no-ab-park { flex: none; width: 244px; display: flex; flex-direction: column; gap: 8px; }
.neworder-redesign .no-ab-vline { flex: none; width: 1px; background: var(--border-base); }
.neworder-redesign .no-ab-finish { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.neworder-redesign .no-ab-head { display: flex; align-items: baseline; gap: 12px; }
.neworder-redesign .no-status { margin-left: auto; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.neworder-redesign .no-status.is-ready { color: var(--tag-green-fg); }
.neworder-redesign .no-status.is-missing { color: var(--fg-error); }
.neworder-redesign .no-ab-hint { font: var(--fw-regular) 12px/17px var(--font-sans); color: var(--fg-subtle); }
.neworder-redesign .no-ab-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.neworder-redesign .no-ab-modes .no-mode { display: flex; flex-direction: column; gap: 6px; }
.neworder-redesign .no-ab-modes .btn { width: 100%; }
.neworder-redesign .no-ab-park .btn { width: 100%; }
/* the completion buttons live in #request-order-wrapper so the use_signature
   toggle can swap them for #request-signature-wrapper */
.neworder-redesign #request-order-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.neworder-redesign #request-order-wrapper .btn { width: 100%; }
/* JS-injected digitale/kontaktlose Unterschrift buttons (prepended here) span full width */
.neworder-redesign #request-order-wrapper > div[style*="flex"] { grid-column: 1 / -1; }
.neworder-redesign #request-signature-wrapper .btn { width: 100%; }

/* ── Zuordnung / authored 12-col grids ──────────────────────────────── */
.neworder-redesign .no-grid { display: grid; grid-template-columns: var(--no-cols-12); gap: 14px 12px; align-items: start; }
.neworder-redesign .no-grid > .form-group { margin: 0; grid-column: span 4; }
.neworder-redesign .no-grid > .no-col-3 { grid-column: span 3; }
.neworder-redesign .no-grid > .no-col-4 { grid-column: span 4; }
.neworder-redesign .no-grid > .no-col-6 { grid-column: span 6; }
.neworder-redesign .no-grid > .no-col-12 { grid-column: 1 / -1; }

/* ── Success card ───────────────────────────────────────────────────── */
.neworder-redesign .no-success-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.neworder-redesign .no-success-icon { width: 48px; height: 48px; color: var(--tag-green-fg); }

/* ── Responsive token flips ─────────────────────────────────────────── */
@media (max-width: 1023px) {
	.neworder-redesign { --no-head: minmax(0, 1fr); }
	.neworder-redesign .no-head-divider { display: none; }
}
@media (max-width: 899px) {
	.neworder-redesign .no-ab-modes,
	.neworder-redesign #request-order-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.neworder-redesign #egon-embedded-neworder-actionbar { flex-direction: column; gap: 14px; }
	.neworder-redesign .no-ab-park { width: 100%; }
	.neworder-redesign .no-ab-vline { display: none; }
	.neworder-redesign .no-fields > .form-group { flex: 1 1 100%; }
}
@media (max-width: 639px) {
	.neworder-redesign .no-grid { grid-template-columns: 1fr; }
	.neworder-redesign .no-grid > .form-group,
	.neworder-redesign .no-grid > [class*="no-col-"] { grid-column: 1 / -1; }
	.neworder-redesign .row.input-row > [class*="col-"] { flex: 1 1 100%; }
	.neworder-redesign .btn { min-height: 42px; }
}
/* ── end NEW ORDER REDESIGN ────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════
   ORDER (order list / Auftragsübersicht) REDESIGN
   Search + results screen (view/order, view/order/grid, view/order/skeleton).
   Native BS3-compat markup (.row/.col-md-*, .btn-group, .pagination via the
   bootstrapPaginator BS3 widget) restyled with design tokens
   (colors_and_type.css). Scoped to .order-redesign so it never leaks to the
   order-detail modal (the view/order/overview family), which is out of scope
   for this pass. Tokens only — no hardcoded brand hex — so per-mandant --ci-*
   overrides and the deferred dark-mode toggle keep working. Responsive via
   the cols token system (breakpoints 1023 / 899 / 767 / 639), matching
   ratecalc/neworder. The per-row status pill's background-color/title stay
   data-driven inline bindings (status_color/status_text from the backend) —
   only the pill's shape is styled here, never its color.
   ═══════════════════════════════════════════════════════════════════════ */

.order-redesign {
	--or-cols-4: repeat(4, minmax(0, 1fr));
	--or-cols-2: repeat(2, minmax(0, 1fr));

	font-family: var(--font-sans);
	color: var(--fg-base);
}
.order-redesign *,
.order-redesign *::before,
.order-redesign *::after { box-sizing: border-box; }

/* Page-level vertical stacking (filter card / results card / pagination bar).
   Scoped to direct children by name — NOT a blanket flex-gap on .order-redesign —
   because view/order/grid renders its own nested .order-redesign instance (the
   results-head bar must sit flush against the table, seamed only by a border). */
.order-redesign > .or-filter-card + .or-results-card,
.order-redesign > .or-results-card + .or-pagination-bar { margin-top: 16px; }

/* ── Filter card ─────────────────────────────────────────────────────── */
.order-redesign .or-filter-card {
	background: var(--bg-base);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.order-redesign .or-filter-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.order-redesign .or-group-head {
	display: flex; align-items: center; gap: 10px;
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap;
}
.order-redesign .or-group-head::after { content: ""; flex: 1; height: 1px; background: var(--border-base); }
.order-redesign .or-group-grid { display: grid; grid-template-columns: var(--or-cols-4); gap: 12px; }
.order-redesign .or-field-label {
	display: block; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin-bottom: 5px;
}

/* Form fields (native .form-group/.form-control, no rewrite of the field partials) */
.order-redesign .form-group { margin: 0; min-width: 0; }
.order-redesign .row.input-row,
.order-redesign .row.input-row-xs { margin: 0; display: contents; }
.order-redesign .row.input-row > [class*="col-"],
.order-redesign .row.input-row-xs > [class*="col-"] { padding: 0; }
.order-redesign .form-control,
.order-redesign select.form-control {
	width: 100%; height: 36px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-shadow: none; appearance: auto;
}
.order-redesign select.form-control { padding: 0 8px; }
.order-redesign .form-control:focus,
.order-redesign select.form-control:focus {
	outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring);
}
.order-redesign .form-control::placeholder { color: var(--fg-muted); }

/* ── Filter footer: active-filter chips + action buttons ────────────── */
.order-redesign .or-filter-footer {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	padding-top: 16px; border-top: 1px solid var(--border-base);
}
.order-redesign .or-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.order-redesign .or-chips-label { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-muted); margin-right: 2px; }
.order-redesign .or-chip-list { display: inline-flex; }
.order-redesign .or-chip-list .list-inline { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.order-redesign .or-chip {
	display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 9px;
	border-radius: 9999px; background: var(--bg-highlight); border: 1px solid var(--bg-highlight-hover);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-interactive-hover); white-space: nowrap;
}
.order-redesign .or-chip a {
	display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
	border-radius: 9999px; color: inherit;
}
.order-redesign .or-chip a:hover { background: var(--bg-highlight-hover); text-decoration: none; }
.order-redesign .or-filter-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.order-redesign .or-btn-row,
.order-redesign .btn-group-block { display: flex; gap: 8px; width: auto; }
/* override the pre-fence .btn-group.btn-group-block > .btn { width: 33.3333% } —
   fixed thirds break once the group holds 2 vs 3 buttons (CSV export is conditional) */
.order-redesign .btn-group-block > .btn { width: auto; flex: 1 1 auto; }

/* ── Buttons (native .btn/.btn-secondary/.btn-primary/.btn-success) ─── */
.order-redesign .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent;
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; float: none;
}
.order-redesign .btn-secondary,
.order-redesign .btn-default { background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base); }
.order-redesign .btn-secondary:hover,
.order-redesign .btn-default:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }
.order-redesign .btn-primary { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); }
.order-redesign .btn-primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.order-redesign .btn-success { background: var(--bg-interactive); border-color: var(--border-interactive); color: var(--fg-on-color); }
.order-redesign .btn-success:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }
.order-redesign .btn-block { width: 100%; }
.order-redesign .btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
/* JS-injected "Entwürfe kontaktlos" opt-in button lands as a sibling in .or-filter-actions */
.order-redesign .or-filter-actions #remote-optin-button { width: auto; }

/* ── Results card (wraps the async grid partial) ─────────────────────── */
.order-redesign .or-results-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden;
}
.order-redesign .or-results-head {
	padding: 12px 20px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base);
}
.order-redesign .or-results-head .text-primary { color: var(--fg-interactive); }

/* ── Results table ───────────────────────────────────────────────────── */
.order-redesign .or-table-wrap { overflow-x: auto; }
/* Bootstrap 5 paints cell backgrounds/stripes/hover via inherited custom
   properties consumed at the td/th level (.table > :not(caption) > * > *),
   not via a background on <tr> — a background set directly on <tr> would be
   invisible under Bootstrap's own opaque per-cell background. Retint via the
   same variables instead so striping/hover/border tokens apply correctly. */
.order-redesign .or-table {
	width: 100%; margin: 0; border-collapse: collapse;
	--bs-table-bg: var(--bg-base);
	--bs-table-striped-bg: var(--bg-subtle);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.order-redesign .or-table thead th {
	box-sizing: border-box; text-align: left; padding: 8px 8px 8px 20px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.order-redesign .or-table thead th:first-child { padding-left: 20px; }
.order-redesign .or-table thead th.or-th-icon { width: 44px; }
.order-redesign .or-table tbody td {
	box-sizing: border-box; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: middle;
}
.order-redesign .or-table tbody td:first-child { padding-left: 20px; }
.order-redesign .or-table.table-hover tbody tr.or-row:hover { cursor: pointer; }
/* isSubReseller accent — set the per-row accent variable Bootstrap's own cell
   rule already reads (var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))) */
.order-redesign .or-table tbody tr.or-row.warning { --bs-table-accent-bg: var(--tag-orange-bg); }
.order-redesign .or-table td.or-td-icon { width: 44px; text-align: center; }
.order-redesign .or-table td.or-td-icon .fa { font-size: 1.1em; color: var(--fg-subtle); }
.order-redesign .or-table .ellipsis { max-width: 100%; }

/* Status pill — shape only. Background-color and title stay the data-driven
   inline bindings from the backend (status_color/status_text); never touch
   those, never map them onto a static token. */
.order-redesign .or-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 22px; padding: 0 8px; border-radius: 9999px;
	font: var(--fw-medium) 11px/1 var(--font-mono); letter-spacing: .02em;
}
.order-redesign .or-status-dot { border-radius: 9999px; height: 10px !important; vertical-align: middle; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.order-redesign .or-table-wrap:has(tbody:empty) { display: none; }
.order-redesign .or-empty {
	padding: 56px 20px 64px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.order-redesign .or-empty-icon {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border-radius: 9999px; background: var(--bg-subtle); border: 1px solid var(--border-base); color: var(--fg-muted);
	font-size: 18px;
}
.order-redesign .or-empty-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.order-redesign .or-empty-desc { max-width: 380px; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }

/* ── Pagination footer ───────────────────────────────────────────────── */
.order-redesign .or-pagination-bar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding: 12px 20px; background: var(--bg-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
}
/* Bootstrap's .float-start/.float-end utilities set float with !important;
   must match specificity to lay them out as flex items instead. */
.order-redesign .or-pagination-bar .float-start,
.order-redesign .or-pagination-bar .float-end { float: none !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-redesign .or-pagesize-wrap { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.order-redesign .or-pagesize-label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); white-space: nowrap; }
.order-redesign .or-pagination-info {
	font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
/* BS3 .pagination widget markup (bootstrapPaginator, bootstrapMajorVersion:'3') restyled as a flat button row */
.order-redesign .pagination { display: flex; align-items: center; gap: 4px; margin: 0; flex-wrap: wrap; }
.order-redesign .pagination > li { list-style: none; }
.order-redesign .pagination > li > a {
	display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); text-decoration: none;
}
.order-redesign .pagination > li > a:hover { background: var(--bg-subtle-hover); text-decoration: none; }
.order-redesign .pagination > li.active > a {
	background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color);
}
.order-redesign .pagination > li.disabled > a { color: var(--fg-disabled); cursor: default; pointer-events: none; }
.order-redesign #egon-embedded-order-pagesize.pagination > li > a { min-width: 0; }

/* ── Skeleton loading state (async search results) ──────────────────── */
@keyframes or-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes or-spin { to { transform: rotate(360deg); } }
.order-redesign .or-sk-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.order-redesign .or-sk-status { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.order-redesign .or-spinner {
	flex: none; width: 16px; height: 16px; border-radius: 9999px;
	border: 2px solid var(--ci-prim-tint-loud); border-top-color: var(--ci-prim-eff);
	animation: or-spin .7s linear infinite;
}
.order-redesign .or-sk {
	display: inline-block;
	background: linear-gradient(90deg, var(--bg-subtle-hover) 25%, var(--bg-subtle) 37%, var(--bg-subtle-hover) 63%);
	background-size: 400% 100%; animation: or-shimmer 1.4s ease infinite; border-radius: 4px;
}

/* ── Responsive token flips ──────────────────────────────────────────── */
@media (max-width: 1023px) {
	.order-redesign { --or-cols-4: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.order-redesign .or-filter-footer { flex-direction: column; align-items: stretch; }
	.order-redesign .or-filter-actions { align-items: stretch; }
	.order-redesign .or-btn-row,
	.order-redesign .btn-group-block { flex-wrap: wrap; }
}
@media (max-width: 767px) {
	.order-redesign { --or-cols-4: minmax(0, 1fr); --or-cols-2: minmax(0, 1fr); }
	.order-redesign .or-filter-card { padding: 16px; }
	.order-redesign .or-pagination-bar { flex-direction: column; align-items: stretch; }
	.order-redesign .or-pagesize-wrap { margin-left: 0; justify-content: space-between; }
}
@media (max-width: 639px) {
	.order-redesign .btn { min-height: 42px; }
	.order-redesign .or-btn-row .btn,
	.order-redesign .btn-group-block .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.order-redesign .or-sk { animation: none; }
	.order-redesign .or-spinner { animation: none; }
}
/* end ORDER REDESIGN */

/* ORDERSTATUSCHANGES REDESIGN */
/* "Aktuelle Mitteilungen zu Ihren Aufträgen" notifications widget
   (view/orderstatuschanges, view/orderstatuschanges/grid). Small sibling of
   the order-redesign block: same token system, own osc- prefixed classes
   (this content element renders its own heading via the TYPO3 CE wrapper,
   outside this template, so only the body — table + pagination — is styled
   here). Status pill background-color/title stay data-driven inline
   bindings from the backend — only the pill's shape is styled here. */

.orderstatuschanges-redesign {
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.orderstatuschanges-redesign *,
.orderstatuschanges-redesign *::before,
.orderstatuschanges-redesign *::after { box-sizing: border-box; }

.orderstatuschanges-redesign .osc-card {
	background: var(--bg-base);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest);
	overflow: hidden;
}
.orderstatuschanges-redesign .osc-table-wrap { overflow-x: auto; }

.orderstatuschanges-redesign .osc-table {
	width: 100%; margin: 0; border-collapse: collapse;
	--bs-table-bg: var(--bg-base);
	--bs-table-striped-bg: var(--bg-subtle);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.orderstatuschanges-redesign .osc-table thead th {
	box-sizing: border-box; text-align: left; padding: 8px 8px 8px 20px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.orderstatuschanges-redesign .osc-table thead th:first-child { padding-left: 20px; }
.orderstatuschanges-redesign .osc-table tbody td {
	box-sizing: border-box; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: middle;
}
.orderstatuschanges-redesign .osc-table tbody td:first-child { padding-left: 20px; }
.orderstatuschanges-redesign .osc-table tbody tr:last-child td { border-bottom: 0; }
.orderstatuschanges-redesign .osc-table td small { color: var(--fg-muted); }
.orderstatuschanges-redesign .osc-table a { color: var(--fg-interactive); }
.orderstatuschanges-redesign .osc-table a:hover { color: var(--fg-interactive-hover); }

/* Status pill — shape only, see note above. */
.orderstatuschanges-redesign .osc-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 22px; padding: 0 8px; border-radius: 9999px;
	font: var(--fw-medium) 11px/1 var(--font-mono); letter-spacing: .02em;
}

.orderstatuschanges-redesign .osc-empty {
	padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted);
}
.orderstatuschanges-redesign .osc-empty-icon {
	display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 9999px; background: var(--bg-subtle); border: 1px solid var(--border-base); color: var(--fg-muted);
	font-size: 16px;
}

/* ── Pagination footer (BS3 .pagination widget, same treatment as order-redesign) ── */
.orderstatuschanges-redesign .osc-pagination-bar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding: 12px 20px; margin-top: 12px;
	background: var(--bg-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
}
.orderstatuschanges-redesign .osc-pagination-bar .float-start,
.orderstatuschanges-redesign .osc-pagination-bar .float-end { float: none !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.orderstatuschanges-redesign .pagination { display: flex; align-items: center; gap: 4px; margin: 0; flex-wrap: wrap; }
.orderstatuschanges-redesign .pagination > li { list-style: none; }
.orderstatuschanges-redesign .pagination > li > a {
	display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); text-decoration: none;
}
.orderstatuschanges-redesign .pagination > li > a:hover { background: var(--bg-subtle-hover); text-decoration: none; }
.orderstatuschanges-redesign .pagination > li.active > a {
	background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color);
}
.orderstatuschanges-redesign .pagination > li.disabled > a { color: var(--fg-disabled); cursor: default; pointer-events: none; }

/* ── Skeleton loading state (async on mount) ─────────────────────────── */
.orderstatuschanges-redesign .osc-sk-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.orderstatuschanges-redesign .osc-sk-status { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.orderstatuschanges-redesign .osc-spinner {
	flex: none; width: 16px; height: 16px; border-radius: 9999px;
	border: 2px solid var(--ci-prim-tint-loud); border-top-color: var(--ci-prim-eff);
	animation: or-spin .7s linear infinite;
}
.orderstatuschanges-redesign .osc-sk {
	display: inline-block;
	background: linear-gradient(90deg, var(--bg-subtle-hover) 25%, var(--bg-subtle) 37%, var(--bg-subtle-hover) 63%);
	background-size: 400% 100%; animation: or-shimmer 1.4s ease infinite; border-radius: 4px;
}

@media (max-width: 767px) {
	.orderstatuschanges-redesign .osc-pagination-bar { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.orderstatuschanges-redesign .osc-sk { animation: none; }
	.orderstatuschanges-redesign .osc-spinner { animation: none; }
}
/* end ORDERSTATUSCHANGES REDESIGN */

/* ENERGYDOWNLOADS REDESIGN */
/* "Download-Center" (view/energydownloads): a per-provider accordion of Gas
   and Strom rate tables, restyled as a card with a client-side filter
   toolbar (search, Sparte segmented buttons, Kundenart select, verfuegbar
   checkbox), a results/expand-collapse bar, an empty state and a sidebar
   (provider quick-jump list, "Zuletzt aktualisiert" list, a contact CTA).
   All filtering is client-side JS toggling element visibility — this block
   is purely visual. The Kontakt dialog is a separate shadow-DOM custom
   element registered from app/energydownloads.js and is intentionally not
   styled here; it carries its own inline styles reading the same tokens.
   Tokens only, no hardcoded hex, so per-mandant --ci-* overrides and the
   deferred dark-mode toggle keep working. Responsive at 1023/899/767/639,
   matching the order-redesign / ratecalc-redesign breakpoints. Reuses the
   global @keyframes or-shimmer / or-spin already declared above (order
   redesign block) instead of redefining them. */

.energydownloads-redesign {
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.energydownloads-redesign *,
.energydownloads-redesign *::before,
.energydownloads-redesign *::after { box-sizing: border-box; }

.energydownloads-redesign .dl-card {
	background: var(--bg-base);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest);
	overflow: hidden;
}

/* ── Toolbar: search + Sparte segmented buttons + Kundenart + verfuegbar ── */
.energydownloads-redesign .dl-toolbar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 12px 16px; border-bottom: 1px solid var(--border-base);
}
.energydownloads-redesign .dl-search { position: relative; flex: 1 1 220px; min-width: 180px; display: flex; }
.energydownloads-redesign .dl-search-icon {
	position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	color: var(--fg-muted); display: flex; pointer-events: none;
}
.energydownloads-redesign .dl-search-input {
	width: 100%; height: 36px; padding: 0 12px 0 32px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-shadow: none;
}
.energydownloads-redesign .dl-search-input::placeholder { color: var(--fg-muted); }
.energydownloads-redesign .dl-search-input:focus {
	outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring);
}

.energydownloads-redesign .dl-seg { display: flex; gap: 6px; flex: none; }
.energydownloads-redesign .dl-seg-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-subtle); cursor: pointer; white-space: nowrap;
}
.energydownloads-redesign .dl-seg-btn:hover { background: var(--bg-subtle-hover); }
.energydownloads-redesign .dl-seg-btn.active {
	border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover);
}

.energydownloads-redesign .dl-kundenart {
	flex: none; width: 170px; height: 36px; padding: 0 8px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base); font: var(--fw-regular) 13px/22px var(--font-sans);
}
.energydownloads-redesign .dl-kundenart:focus {
	outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring);
}

.energydownloads-redesign .dl-checkbox { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; cursor: pointer; }
.energydownloads-redesign .dl-checkbox input { width: 16px; height: 16px; margin: 0; accent-color: var(--bg-interactive); }
.energydownloads-redesign .dl-checkbox span { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap; }

/* ── Hint bar (unchanged copy, restyled as a highlight strip) ─────────── */
.energydownloads-redesign .dl-hint {
	display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-highlight);
	font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-base);
}
.energydownloads-redesign .dl-hint-icon { flex: none; margin-top: 1px; color: var(--fg-interactive); display: flex; }

/* ── Results bar: count text + expand/collapse-all ────────────────────── */
.energydownloads-redesign .dl-resultbar {
	display: flex; align-items: center; gap: 12px; padding: 9px 16px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
}
.energydownloads-redesign .dl-result-text { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.energydownloads-redesign .dl-resultbar-actions { margin-left: auto; display: flex; gap: 6px; }
.energydownloads-redesign .dl-btn-ghost {
	height: 26px; padding: 0 8px; border: 1px solid var(--border-base); border-radius: var(--radius-md);
	background: var(--bg-base); font: var(--fw-regular) 12px/1 var(--font-sans); color: var(--fg-subtle); cursor: pointer;
}
.energydownloads-redesign .dl-btn-ghost:hover { background: var(--bg-subtle-hover); }

/* ── Provider accordion ────────────────────────────────────────────────── */
.energydownloads-redesign .panel-group { margin: 0; }
.energydownloads-redesign .dl-provider {
	position: relative; border: 0; border-radius: 0; box-shadow: none; margin: 0;
	background: var(--bg-base); border-bottom: 1px solid var(--border-base);
}
.energydownloads-redesign .dl-provider:last-child { border-bottom: 0; }
.energydownloads-redesign .dl-provider-panel-body { padding: 0; }
.energydownloads-redesign .dl-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; }
.energydownloads-redesign .dl-provider-head {
	width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
	border: 0; background: var(--bg-base); cursor: pointer; text-align: left; font: inherit;
}
.energydownloads-redesign .dl-provider-head:hover { background: var(--bg-subtle); }
.energydownloads-redesign .dl-provider-logo {
	flex: none; display: flex; align-items: center; justify-content: center; width: 76px; height: 38px;
	border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-base); overflow: hidden;
}
.energydownloads-redesign .dl-provider-logo img { max-width: 100%; max-height: 100%; display: block; }
.energydownloads-redesign .dl-provider-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.energydownloads-redesign .dl-provider-name { font: var(--fw-medium) 14px/20px var(--font-sans); color: var(--fg-base); }
.energydownloads-redesign .dl-provider-sub { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.energydownloads-redesign .dl-chevron { flex: none; color: var(--fg-interactive); font-size: 15px; transition: transform 120ms ease; }
.energydownloads-redesign .dl-provider-head[aria-expanded="true"] .dl-chevron { transform: rotate(180deg); }

.energydownloads-redesign .dl-provider-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.energydownloads-redesign .dl-group {
	border: 1px solid var(--border-base); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-base);
}
.energydownloads-redesign .dl-group-head {
	display: flex; align-items: center; gap: 6px; padding: 8px 12px;
	background: var(--bg-subtle); border-bottom: 1px solid var(--border-base);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-base);
}
.energydownloads-redesign .dl-group-icon-gas { color: var(--tag-red-fg); }
.energydownloads-redesign .dl-group-icon-strom { color: var(--tag-orange-fg); }
.energydownloads-redesign .dl-group-icon-extra { color: var(--fg-interactive); }

/* ── Rate tables ───────────────────────────────────────────────────────── */
.energydownloads-redesign .dl-table-wrap { overflow-x: auto; }
.energydownloads-redesign .dl-table {
	width: 100%; margin: 0; border-collapse: collapse;
	--bs-table-bg: var(--bg-base);
	--bs-table-striped-bg: var(--bg-subtle);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.energydownloads-redesign .dl-table thead th {
	text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-medium) 11px/16px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.energydownloads-redesign .dl-table tbody td {
	padding: 8px 10px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: middle;
}
.energydownloads-redesign .dl-table tbody tr:last-child td { border-bottom: 0; }
.energydownloads-redesign .dl-th-typ,
.energydownloads-redesign .dl-td-typ { width: 92px; }
.energydownloads-redesign .dl-th-date,
.energydownloads-redesign .dl-td-date { width: 120px; }
.energydownloads-redesign .dl-th-files,
.energydownloads-redesign .dl-td-files { width: 160px; text-align: right; }

.energydownloads-redesign .dl-badge {
	display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
	border-radius: var(--radius-full); font: var(--fw-medium) 11px/1 var(--font-sans); white-space: nowrap;
}
.energydownloads-redesign .dl-badge-private { background: var(--tag-neutral-bg); color: var(--tag-neutral-fg); }
.energydownloads-redesign .dl-badge-business { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }

.energydownloads-redesign .dl-file-list { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.energydownloads-redesign .dl-file-row { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.energydownloads-redesign .dl-file-region { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.energydownloads-redesign .dl-file-link {
	display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-base); text-decoration: none; white-space: nowrap;
}
.energydownloads-redesign .dl-file-link:hover {
	background: var(--bg-highlight); border-color: var(--border-interactive); color: var(--fg-interactive-hover); text-decoration: none;
}
.energydownloads-redesign .dl-file-date { display: block; font: var(--fw-regular) 12px/18px var(--font-mono); color: var(--fg-subtle); }
.energydownloads-redesign .dl-nofile { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }

/* ── Empty state ───────────────────────────────────────────────────────── */
.energydownloads-redesign .dl-empty {
	padding: 56px 16px 64px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.energydownloads-redesign .dl-empty-icon {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border-radius: var(--radius-full); background: var(--bg-subtle); border: 1px solid var(--border-base);
	color: var(--fg-muted); font-size: 18px;
}
.energydownloads-redesign .dl-empty-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.energydownloads-redesign .dl-empty-desc { max-width: 380px; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }
.energydownloads-redesign .dl-btn-secondary {
	margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; white-space: nowrap;
}
.energydownloads-redesign .dl-btn-secondary:hover { background: var(--bg-subtle-hover); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.energydownloads-redesign .dl-side { display: flex; flex-direction: column; gap: 16px; }
.energydownloads-redesign .dl-side-head {
	padding: 11px 14px; border-bottom: 1px solid var(--border-base);
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base);
}
.energydownloads-redesign .dl-provider-list { display: flex; flex-direction: column; padding: 6px; }
.energydownloads-redesign .dl-provider-pick {
	width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px;
	border: 0; border-radius: var(--radius-md); background: transparent;
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); cursor: pointer; text-align: left;
}
.energydownloads-redesign .dl-provider-pick:hover { background: var(--bg-highlight); color: var(--fg-interactive-hover); }
.energydownloads-redesign .dl-provider-pick-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.energydownloads-redesign .dl-provider-pick-count { flex: none; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
/* the native select keeps its existing change-event contract; hidden off-screen, not display:none,
   so jQuery .val()/.trigger('change') keep working the same as an ordinary hidden form control. */
.energydownloads-redesign .dl-native-select {
	position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

.energydownloads-redesign .dl-recent-list { display: flex; flex-direction: column; }
.energydownloads-redesign .dl-recent-item {
	display: flex; align-items: center; gap: 10px; padding: 9px 14px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-base); text-decoration: none;
}
.energydownloads-redesign .dl-recent-item:last-child { border-bottom: 0; }
.energydownloads-redesign .dl-recent-item:hover { background: var(--bg-subtle); text-decoration: none; }
.energydownloads-redesign .dl-recent-icon { flex: none; color: var(--fg-muted); display: flex; }
.energydownloads-redesign .dl-recent-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.energydownloads-redesign .dl-recent-name {
	font: var(--fw-regular) 13px/18px var(--font-sans); color: var(--fg-base);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.energydownloads-redesign .dl-recent-sub { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.energydownloads-redesign .dl-recent-action {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); color: var(--fg-subtle);
}
.energydownloads-redesign .dl-recent-item:hover .dl-recent-action {
	background: var(--bg-highlight); border-color: var(--border-interactive); color: var(--fg-interactive-hover);
}
.energydownloads-redesign .dl-recent-empty { padding: 14px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }

.energydownloads-redesign .dl-side-cta { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.energydownloads-redesign .dl-side-cta-title { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.energydownloads-redesign .dl-side-cta-desc { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }

/* ── Skeleton loading state (getRatePrefilledFile in flight) ──────────── */
.energydownloads-redesign .dl-sk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.energydownloads-redesign .dl-sk-status { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.energydownloads-redesign .dl-spinner {
	flex: none; width: 16px; height: 16px; border-radius: var(--radius-full);
	border: 2px solid var(--ci-prim-tint-loud); border-top-color: var(--ci-prim-eff);
	animation: or-spin .7s linear infinite;
}
.energydownloads-redesign .dl-sk {
	display: inline-block;
	background: linear-gradient(90deg, var(--bg-subtle-hover) 25%, var(--bg-subtle) 37%, var(--bg-subtle-hover) 63%);
	background-size: 400% 100%; animation: or-shimmer 1.4s ease infinite; border-radius: 4px;
}

/* ── Responsive token flips ───────────────────────────────────────────── */
@media (max-width: 1023px) {
	.energydownloads-redesign .dl-kundenart { width: 150px; }
}
@media (max-width: 899px) {
	.energydownloads-redesign .dl-toolbar { flex-wrap: wrap; }
	.energydownloads-redesign .dl-search { flex: 1 1 100%; order: -1; }
}
@media (max-width: 767px) {
	.energydownloads-redesign .dl-toolbar { flex-direction: column; align-items: stretch; }
	.energydownloads-redesign .dl-seg { width: 100%; }
	.energydownloads-redesign .dl-seg-btn { flex: 1 1 auto; justify-content: center; }
	.energydownloads-redesign .dl-kundenart { width: 100%; }
	.energydownloads-redesign .dl-checkbox { width: 100%; }
	.energydownloads-redesign .dl-resultbar { flex-direction: column; align-items: stretch; }
	.energydownloads-redesign .dl-resultbar-actions { margin-left: 0; justify-content: flex-end; }
}
@media (max-width: 639px) {
	.energydownloads-redesign .dl-provider-logo { width: 56px; height: 32px; }
	.energydownloads-redesign .dl-table thead th.dl-th-date,
	.energydownloads-redesign .dl-table tbody td.dl-td-date { display: none; }
	.energydownloads-redesign .btn { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.energydownloads-redesign .dl-sk { animation: none; }
	.energydownloads-redesign .dl-spinner { animation: none; }
}
/* end ENERGYDOWNLOADS REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER (Kunden / Kundenansicht) REDESIGN
   Search + results screen (view/customer, view/customer/grid) plus the
   customer detail screen (view/customer/detail, view/customer/orderdelivery)
   — all four sections share this one module file. Native BS3/BS5-compat
   markup restyled with design tokens only (colors_and_type.css /
   components-bs5.css); no partial file under tpl/Partials was touched —
   Partials/Form/{Base,Contact,Bank} are included unwrapped and simply
   inherit this scope, so this block has zero blast radius on the other
   screens that include those same partials. Responsive via the token-flip
   system (breakpoints 1023 / 899 / 767 / 639), matching order/ratecalc.
   This mandant's --ci-sek renders black — accents use --ci-prim shades only.
   ═══════════════════════════════════════════════════════════════════════ */

.customer-redesign {
	--cu-cols-4: repeat(4, minmax(0, 1fr));
	--cu-cols-2: repeat(2, minmax(0, 1fr));
	--cu-detail-cols: 236px minmax(0, 1fr);

	font-family: var(--font-sans);
	color: var(--fg-base);
}
.customer-redesign *,
.customer-redesign *::before,
.customer-redesign *::after { box-sizing: border-box; }

/* Page-level vertical stacking. Scoped to direct children by name — NOT a
   blanket flex-gap — because view/customer/grid renders its own nested
   .customer-redesign instance inside the #...-grid mount point. */
.customer-redesign > .cu-page > .cu-page-head + .cu-filter-card,
.customer-redesign > .cu-page > .cu-filter-card + .cu-results-card,
.customer-redesign > .cu-page > .cu-results-card + .cu-pagination-bar,
.customer-redesign > .cu-detail-head + .cu-detail-grid { margin-top: 16px; }

/* ── Page header ─────────────────────────────────────────────────────── */
.customer-redesign .cu-page-head {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.customer-redesign .cu-page-title { margin: 0; font: var(--fw-medium) 18px/26px var(--font-sans); color: var(--fg-base); }
.customer-redesign .cu-page-sub { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }

/* ── Filter card ─────────────────────────────────────────────────────── */
.customer-redesign .cu-filter-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 20px; display: flex; flex-direction: column; gap: 18px;
}
.customer-redesign .cu-filter-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.customer-redesign .cu-group-head {
	display: flex; align-items: center; gap: 10px;
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap;
}
.customer-redesign .cu-group-head::after { content: ""; flex: 1; height: 1px; background: var(--border-base); }
.customer-redesign .cu-group-head .fa { color: var(--fg-interactive); cursor: help; }
.customer-redesign .cu-group-grid { display: grid; grid-template-columns: var(--cu-cols-4); gap: 12px; }
.customer-redesign .cu-group-grid--end { align-items: end; }
.customer-redesign .cu-field-label {
	display: block; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin-bottom: 5px;
}
.customer-redesign .cu-inline-check {
	grid-column: span 3; display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer;
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base);
}
.customer-redesign .cu-inline-check input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }

/* Form fields (native .form-group/.form-control, no rewrite of the field partials) */
.customer-redesign .form-group { margin: 0; min-width: 0; }
.customer-redesign .row.input-row { margin: 0; display: flex; gap: 8px; }
.customer-redesign .row.input-row > [class*="col-"] { padding: 0; flex: 1; min-width: 0; }
.customer-redesign .form-control,
.customer-redesign select.form-control {
	width: 100%; height: 36px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-shadow: none; appearance: auto;
}
.customer-redesign select.form-control { padding: 0 8px; }
.customer-redesign .form-control:focus,
.customer-redesign select.form-control:focus {
	outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring);
}
.customer-redesign .form-control::placeholder { color: var(--fg-muted); }
.customer-redesign .form-control[disabled] { background: var(--bg-disabled); color: var(--fg-subtle); }
.customer-redesign .input-group-text.btn {
	display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
	border-radius: var(--radius-md); font: var(--fw-medium) 13px/1 var(--font-sans);
	background: var(--bg-base); border: 1px solid var(--border-interactive); color: var(--fg-interactive); cursor: pointer;
}
.customer-redesign .input-group-text.btn:hover { background: var(--bg-highlight); }
.customer-redesign .checkbox { margin: 0; padding-left: 0; }
.customer-redesign .checkbox label { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 0; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); cursor: pointer; }
.customer-redesign .checkbox input[type="checkbox"] {
	position: static !important; float: none !important; margin: 0 !important; flex: none;
	width: 16px; height: 16px; accent-color: var(--bg-interactive);
}

.customer-redesign .cu-filter-footer { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border-base); }

/* ── Buttons (native .btn/.btn-secondary/.btn-primary/.btn-success) ─── */
.customer-redesign .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent;
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; float: none;
}
.customer-redesign .btn-secondary { background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base); }
.customer-redesign .btn-secondary:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }
.customer-redesign .btn-primary { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); }
.customer-redesign .btn-primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.customer-redesign .btn-success { background: var(--bg-interactive); border-color: var(--border-interactive); color: var(--fg-on-color); }
.customer-redesign .btn-success:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }
.customer-redesign .btn-block { width: 100%; }
.customer-redesign .btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.customer-redesign .btn[disabled] { opacity: .6; cursor: default; }
.customer-redesign .btn .loading-rotate:empty { display: none; }
.customer-redesign .btn .loading-rotate.fa-spin { display: inline-flex; margin-left: 2px; }

/* ── Results card (wraps the async grid partial) ─────────────────────── */
.customer-redesign .cu-results-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.customer-redesign .cu-results-head {
	display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base);
}
.customer-redesign .cu-results-head-sub { margin-left: auto; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }

/* ── Results table ───────────────────────────────────────────────────── */
.customer-redesign .cu-table-wrap { overflow-x: auto; }
.customer-redesign .cu-table {
	width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed;
	--bs-table-bg: var(--bg-base);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.customer-redesign .cu-table thead th {
	box-sizing: border-box; text-align: left; padding: 8px 8px 8px 20px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.customer-redesign .cu-table thead th .fa { color: var(--fg-interactive); cursor: help; }
.customer-redesign .cu-table thead th.cu-th-id { width: 118px; }
.customer-redesign .cu-table thead th.cu-th-action { width: 104px; text-align: right; padding-right: 20px; }
.customer-redesign .cu-table tbody td {
	box-sizing: border-box; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: middle;
}
.customer-redesign .cu-table tbody td.cu-th-action { text-align: right; padding-right: 20px; }
.customer-redesign .cu-table tbody tr.cu-row:hover { background: var(--bg-highlight); }
.customer-redesign .cu-id { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }
.customer-redesign .cu-id-sub { font: var(--fw-regular) 11px/16px var(--font-mono); color: var(--fg-muted); }
.customer-redesign .cu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fw-medium) 13px/18px var(--font-sans); color: var(--fg-base); }
.customer-redesign .cu-sub { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.customer-redesign .cu-none { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-disabled); }
.customer-redesign .cu-pill-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.customer-redesign .cu-contract-pill {
	display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px;
	border-radius: 9999px; background: var(--bg-highlight); border: 1px solid var(--bg-highlight-hover);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-interactive-hover);
}
.customer-redesign .cu-contract-pill .fa { font-size: 12px; }
.customer-redesign .cu-contract-pill--electric .fa { color: var(--tag-orange-fg); }
.customer-redesign .cu-contract-pill--gas .fa { color: var(--fg-error); }
.customer-redesign .cu-contract-pill--products .fa,
.customer-redesign .cu-contract-pill--phone .fa { color: var(--fg-subtle); }

.customer-redesign .cu-reminder-badge {
	display: inline-flex; align-items: center; gap: 5px; min-width: 22px; height: 22px; padding: 0 7px;
	border-radius: 9999px; background: var(--tag-red-bg); border: 1px solid var(--tag-red-bg-hover);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--tag-red-fg);
}
.customer-redesign .cu-reminder-badge .fa { font-size: 12px; }

.customer-redesign .cu-open-btn { gap: 5px; }
.customer-redesign .cu-open-btn .fa { font-size: 11px; }

/* status pill reused on the Verträge tab — shape only, color stays the
   data-driven inline binding (status_color/status_text), never a token */
.customer-redesign .cu-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 22px; padding: 0 8px; border-radius: 9999px;
	font: var(--fw-medium) 11px/1 var(--font-mono); letter-spacing: .02em;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.customer-redesign .cu-empty { padding: 56px 20px 64px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.customer-redesign .cu-empty-icon {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border-radius: 9999px; background: var(--bg-subtle); border: 1px solid var(--border-base); color: var(--fg-muted);
	font-size: 18px;
}
.customer-redesign .cu-empty-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.customer-redesign .cu-empty-desc { max-width: 380px; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }

/* ── Pagination footer ───────────────────────────────────────────────── */
.customer-redesign .cu-pagination-bar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding: 12px 20px; background: var(--bg-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
}
.customer-redesign .cu-pagination-bar .float-start,
.customer-redesign .cu-pagination-bar .float-end { float: none !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.customer-redesign .cu-pagesize-wrap { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.customer-redesign .cu-pagesize-label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); white-space: nowrap; }
.customer-redesign .pagination { display: flex; align-items: center; gap: 4px; margin: 0; flex-wrap: wrap; }
.customer-redesign .pagination > li { list-style: none; }
.customer-redesign .pagination > li > a {
	display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); text-decoration: none;
}
.customer-redesign .pagination > li > a:hover { background: var(--bg-subtle-hover); text-decoration: none; }
.customer-redesign .pagination > li.active > a { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); }
.customer-redesign .pagination > li.disabled > a { color: var(--fg-disabled); cursor: default; pointer-events: none; }

/* ── Skeleton loading state (async grid, JS-injected) ─────────────────── */
@keyframes cu-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes cu-spin { to { transform: rotate(360deg); } }
.customer-redesign .cu-sk-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.customer-redesign .cu-sk-status { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.customer-redesign .cu-spinner {
	flex: none; width: 16px; height: 16px; border-radius: 9999px;
	border: 2px solid var(--ci-prim-tint-loud); border-top-color: var(--ci-prim-eff);
	animation: cu-spin .7s linear infinite;
}
.customer-redesign .cu-sk {
	display: inline-block;
	background: linear-gradient(90deg, var(--bg-subtle-hover) 25%, var(--bg-subtle) 37%, var(--bg-subtle-hover) 63%);
	background-size: 400% 100%; animation: cu-shimmer 1.4s ease infinite; border-radius: 4px;
}

/* ── Detail screen (view/customer/detail) ─────────────────────────────── */
.customer-redesign .cu-detail-head { display: flex; align-items: center; gap: 8px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.customer-redesign .cu-detail-head a { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-interactive); }
.customer-redesign .cu-detail-grid { display: grid; grid-template-columns: var(--cu-detail-cols); gap: 20px; align-items: start; }
.customer-redesign .cu-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.customer-redesign .cu-side-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); }
.customer-redesign .cu-side-nav { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.customer-redesign .list-group-item.cu-side-nav-btn {
	display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin: 0;
	border: 0; border-radius: var(--radius-md); background: transparent;
	font: var(--fw-regular) 13px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; transition: background 120ms ease;
}
.customer-redesign .list-group-item.cu-side-nav-btn:hover { background: var(--bg-subtle); }
.customer-redesign .list-group-item.cu-side-nav-btn .fa { color: var(--fg-muted); width: 16px; text-align: center; }
.customer-redesign .list-group-item.cu-side-nav-btn.active {
	background: var(--bg-highlight); color: var(--fg-interactive-hover); font-weight: var(--fw-medium);
}
.customer-redesign .list-group-item.cu-side-nav-btn.active .fa { color: var(--fg-interactive); }
.customer-redesign .cu-badge-count {
	margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 9999px; background: var(--bg-subtle); color: var(--fg-muted); font: var(--fw-medium) 11px/1 var(--font-sans);
}
.customer-redesign .list-group-item.cu-side-nav-btn.active .cu-badge-count { background: var(--bg-interactive); color: var(--fg-on-color); }

.customer-redesign .cu-info-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); padding: 18px 20px; margin-bottom: 16px; }
.customer-redesign .cu-info-head { display: flex; flex-direction: column; gap: 6px; }
.customer-redesign .cu-info-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: var(--fw-medium) 17px/24px var(--font-sans); color: var(--fg-base); }
.customer-redesign .cu-info-meta { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.customer-redesign .cu-info-meta strong { font: var(--fw-medium) 12px/18px var(--font-mono); color: var(--fg-base); }
.customer-redesign .cu-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; font: var(--fw-medium) 11px/1 var(--font-sans); }
.customer-redesign .cu-tag--neutral { background: var(--tag-neutral-bg); color: var(--tag-neutral-fg); }

.customer-redesign .cu-form-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); display: flex; flex-direction: column; }
.customer-redesign .cu-form-section + .cu-form-section { border-top: 1px solid var(--border-base); }
.customer-redesign .cu-form-section-head {
	display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border-base);
	font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base);
}
.customer-redesign .cu-form-section-head .fa { color: var(--fg-subtle); }
.customer-redesign .cu-form-section-body { padding: 18px 20px 20px; display: grid; grid-template-columns: var(--cu-cols-4); gap: 14px 12px; }
.customer-redesign .cu-form-section-body .bs-callout { grid-column: 1 / -1; margin: 0; }
.customer-redesign .cu-form-footer { display: flex; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border-base); background: var(--bg-subtle); }

/* ── Responsive token flips ──────────────────────────────────────────── */
@media (max-width: 1023px) {
	.customer-redesign { --cu-cols-4: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.customer-redesign { --cu-detail-cols: minmax(0, 1fr); }
	.customer-redesign .cu-side { position: static; }
	.customer-redesign .cu-page-head { align-items: stretch; }
}
@media (max-width: 767px) {
	.customer-redesign { --cu-cols-4: minmax(0, 1fr); --cu-cols-2: minmax(0, 1fr); }
	.customer-redesign .cu-filter-card,
	.customer-redesign .cu-page-head { padding: 16px; }
	.customer-redesign .cu-inline-check { grid-column: span 1; }
	.customer-redesign .cu-pagination-bar { flex-direction: column; align-items: stretch; }
	.customer-redesign .cu-pagesize-wrap { margin-left: 0; justify-content: space-between; }
	.customer-redesign .cu-page-head { flex-direction: column; align-items: stretch; }
}
@media (max-width: 639px) {
	.customer-redesign .btn { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.customer-redesign .cu-sk { animation: none; }
	.customer-redesign .cu-spinner { animation: none; }
}
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — Partials/Form/{Base,Contact,Bank} follow-up
   The detail screen's Stammdaten/Kontaktdaten/Bankverbindung sections
   include these partials with direction="horizontal" (see tpl/customer.html)
   — the only Partial branch that renders a <label> per field. This block
   re-stacks that Bootstrap col-sm-4/col-sm-8 label+control pair (label
   above control) to match the card grid, and puts icon/button addons
   (fa-phone, fa-print, fa-mobile, fa-calendar, IBAN prüfen/berechnen,
   Stammdaten übernehmen) inline next to their input instead of letting
   them wrap onto their own row. No Partial file was touched — same zero
   blast-radius scope as the rest of this module's CSS.
   ═══════════════════════════════════════════════════════════════════════ */
.customer-redesign .form-group { display: flex; flex-direction: column; gap: 5px; }
.customer-redesign .form-group > label.form-label {
	width: 100%; margin: 0; padding: 0; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle);
}
.customer-redesign .form-group > label.form-label .text-danger { color: var(--fg-error); }
.customer-redesign .form-group > [class^="col-sm-8"] { width: 100%; padding: 0; min-width: 0; }
/* Fields whose col-sm-8 holds a 2-up input-row (name, PLZ/Ort, Straße/Nr.,
   phone/fax/mobile prefix+number), the Anrede+"Stammdaten übernehmen"
   input-group, or the IBAN input-group + hint callout need more than one
   1/4 grid track so their inner pair doesn't get crushed. */
.customer-redesign .cu-form-section-body > .form-group:has(.row.input-row),
.customer-redesign .cu-form-section-body > .form-group:has(.input-group.select),
.customer-redesign .cu-form-section-body > .form-group:has(input[name$="email"]) { grid-column: span 2; }
.customer-redesign .cu-form-section-body > .form-group:has(.bs-callout) { grid-column: 1 / -1; }
.customer-redesign .cu-form-section-body > .checkbox { grid-column: 1 / -1; }
.customer-redesign .cu-form-section-body > .form-group-seperator { grid-column: 1 / -1; margin-top: 2px; }
.customer-redesign .cu-form-section-body > .form-group-seperator .text-muted {
	font: var(--fw-medium) 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted);
}
.customer-redesign .cu-form-section-body > .form-group-seperator hr { margin: 6px 0 0; border-color: var(--border-base); opacity: 1; }
/* Icon/button addons sit inline next to their input as separate pills with
   a small gap, matching the reference design (not a seamless fused control). */
.customer-redesign .input-group { display: flex; align-items: stretch; gap: 6px; }
.customer-redesign .input-group > .form-control { flex: 1; min-width: 0; }
/* Bootstrap 5's own .input-group CSS flattens the touching side of every
   non-first/non-last child (a fused-control assumption); override it back
   to a uniform radius since the gap above already separates these into pills. */
.customer-redesign .input-group > * { border-radius: var(--radius-md) !important; }
.customer-redesign .input-group-text:not(.btn) {
	display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-subtle); color: var(--fg-subtle);
}
/* At the single-column mobile breakpoint, --cu-cols-4 collapses to one
   explicit track — a lingering "span 2" would still ask for a second track,
   so the grid fabricates a narrow implicit column instead of stacking. */
@media (max-width: 767px) {
	.customer-redesign .cu-form-section-body > .form-group:has(.row.input-row),
	.customer-redesign .cu-form-section-body > .form-group:has(.input-group.select),
	.customer-redesign .cu-form-section-body > .form-group:has(input[name$="email"]) { grid-column: auto; }
}
/* end CUSTOMER REDESIGN */

/* CALENDAR REDESIGN */
.calendar-redesign { display: flex; flex-direction: column; background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.calendar-redesign .cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-base); }
.calendar-redesign .cal-head-icon { display: flex; color: var(--fg-subtle); }
.calendar-redesign .cal-head-title { font: var(--fw-medium) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-base); }
.calendar-redesign .cal-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-6xs); }
.calendar-redesign .cal-nav-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-subtle); cursor: pointer; }
.calendar-redesign .cal-nav-btn:hover { background: var(--bg-subtle); color: var(--fg-base); }
.calendar-redesign .cal-nav-label { min-width: 104px; text-align: center; font: var(--fw-medium) var(--txt-xsmall)/18px var(--font-sans); color: var(--fg-base); white-space: nowrap; }

.calendar-redesign .cal-grid { padding: var(--space-sm) var(--space-md) var(--space-md); }
.calendar-redesign .cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: var(--space-2xs); }
.calendar-redesign .cal-weekday { text-align: center; font: var(--fw-medium) 10px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.calendar-redesign .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar-redesign .cal-day { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; border: 0; border-radius: var(--radius-md); background: transparent; font: var(--fw-regular) var(--txt-xsmall)/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.calendar-redesign .cal-day:hover { background: var(--bg-subtle-hover); }
.calendar-redesign .cal-day--empty { cursor: default; }
.calendar-redesign .cal-day--empty:hover { background: transparent; }
.calendar-redesign .cal-day--today { font-weight: var(--fw-medium); background: var(--bg-highlight); box-shadow: inset 0 0 0 1px var(--border-interactive); color: var(--fg-interactive); }
.calendar-redesign .cal-day--active,
.calendar-redesign .cal-day--active:hover { font-weight: var(--fw-medium); background: var(--bg-interactive); color: var(--fg-on-color); }
.calendar-redesign .cal-day-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: var(--radius-full); }

.calendar-redesign .cal-dates { display: flex; flex-direction: column; border-top: 1px solid var(--border-base); }
.calendar-redesign .cal-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-2xs); }
.calendar-redesign .cal-list-title { font: var(--fw-medium) 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.calendar-redesign .cal-list-reset { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--space-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--bg-base); font: var(--fw-medium) var(--txt-xsmall)/1 var(--font-sans); color: var(--fg-subtle); cursor: pointer; }
.calendar-redesign .cal-list-reset:hover { background: var(--bg-subtle); border-color: var(--fg-muted); color: var(--fg-base); }
.calendar-redesign .cal-list-count { margin-left: auto; font: var(--fw-regular) var(--txt-xsmall)/16px var(--font-mono); color: var(--fg-muted); white-space: nowrap; }

.calendar-redesign .cal-list { margin: 0; padding: 0; list-style: none; }
.calendar-redesign .cal-list-item { display: flex; gap: var(--space-sm); padding: 9px var(--space-md); border-top: 1px solid var(--border-base); }
.calendar-redesign .cal-list-daybadge { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; padding: 3px 0; border-radius: var(--radius-md); background: var(--bg-subtle); }
.calendar-redesign .cal-list-day { font: var(--fw-medium) var(--txt-small)/16px var(--font-sans); color: var(--fg-base); }
.calendar-redesign .cal-list-weekday { font: var(--fw-regular) 9px/12px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.calendar-redesign .cal-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.calendar-redesign .cal-list-titeltext { font: var(--fw-regular) var(--txt-small)/18px var(--font-sans); color: var(--fg-base); overflow-wrap: break-word; }
.calendar-redesign .cal-list-meta { display: flex; align-items: center; gap: 6px; }
.calendar-redesign .cal-list-dot { flex: none; width: 6px; height: 6px; border-radius: var(--radius-full); }
.calendar-redesign .cal-list-typ { font: var(--fw-regular) var(--txt-xsmall)/16px var(--font-sans); color: var(--fg-muted); }
.calendar-redesign .cal-list-orderlink { display: inline-block; margin-top: 1px; font: var(--fw-medium) var(--txt-xsmall)/16px var(--font-sans); }
.calendar-redesign .cal-list-notice { font: var(--fw-regular) var(--txt-xsmall)/16px var(--font-sans); color: var(--fg-muted); }
.calendar-redesign .cal-empty { padding: 18px var(--space-md) 22px; text-align: center; font: var(--fw-regular) var(--txt-xsmall)/18px var(--font-sans); color: var(--fg-muted); }

@media (max-width: 639px) {
	.calendar-redesign .cal-day { height: 30px; }
	.calendar-redesign .cal-list-item { gap: var(--space-xs); padding: 9px var(--space-sm); }
}
/* end CALENDAR REDESIGN */

/* ORDEROVERVIEW REDESIGN */
.orderoverview-redesign { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.orderoverview-redesign .oo-head h3.oo-title { margin: 0; font: var(--fw-medium) var(--txt-large)/var(--lh-large) var(--font-sans); color: var(--fg-base); }
.orderoverview-redesign .oo-subtitle { font: var(--fw-regular) var(--txt-xsmall)/var(--lh-xsmall) var(--font-sans); color: var(--fg-muted); }
.orderoverview-redesign .oo-subhead { font: var(--fw-regular) var(--txt-xsmall)/var(--lh-xsmall) var(--font-sans); color: var(--fg-muted); }
.orderoverview-redesign .oo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.orderoverview-redesign .oo-tile { display: flex; align-items: flex-end; gap: var(--space-xs); padding: var(--space-sm) 14px; border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-subtle); text-decoration: none; }
.orderoverview-redesign .oo-tile:hover { background: var(--bg-base); border-color: var(--border-strong); text-decoration: none; }
.orderoverview-redesign .oo-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.orderoverview-redesign .oo-tile-label { display: flex; align-items: center; gap: 7px; font: var(--fw-regular) var(--txt-xsmall)/var(--lh-xsmall) var(--font-sans); color: var(--fg-subtle); }
.orderoverview-redesign .oo-dot { flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); }
.orderoverview-redesign .oo-dot--purple { background: var(--tag-purple-fg); }
.orderoverview-redesign .oo-dot--green { background: var(--tag-green-fg); }
.orderoverview-redesign .oo-dot--blue { background: var(--fg-interactive); }
.orderoverview-redesign .oo-dot--red { background: var(--fg-error); }
.orderoverview-redesign .oo-dot--muted { background: var(--fg-subtle); }
.orderoverview-redesign .oo-dot--orange { background: var(--tag-orange-fg); }
.orderoverview-redesign .oo-tile-value { font: var(--fw-medium) 22px/26px var(--font-sans); color: var(--fg-base); font-variant-numeric: tabular-nums; }
.orderoverview-redesign .oo-tile-arrow { display: flex; flex: none; color: var(--fg-muted); }

@media (max-width: 899px) {
	.orderoverview-redesign .oo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.orderoverview-redesign { padding: var(--space-md); }
	.orderoverview-redesign .oo-grid { grid-template-columns: minmax(0, 1fr); }
}
/* end ORDEROVERVIEW REDESIGN */

/* SMART REDESIGN */
.smart-redesign .sm-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.smart-redesign .sm-body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.smart-redesign .nav.nav-tabs.sm-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; border: 0; list-style: none; }
.smart-redesign .sm-tabs > li { display: block; list-style: none; margin: 0; }
.smart-redesign .sm-tabs > li > a { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-subtle); text-decoration: none; cursor: pointer; }
.smart-redesign .sm-tabs > li > a:hover { background: var(--bg-subtle-hover); text-decoration: none; }
.smart-redesign .sm-tabs > li.active > a { border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover); }

.smart-redesign .sm-form .form-group,
.smart-redesign .sm-form .sm-field { margin-bottom: var(--space-sm); }
.smart-redesign .sm-form .row.input-row { margin: 0 0 var(--space-sm); display: flex; gap: var(--space-sm); }
.smart-redesign .sm-form .row.input-row > [class*="col-"] { flex: 1; min-width: 0; padding: 0; }
.smart-redesign .sm-label { display: block; font: var(--fw-regular) var(--txt-xsmall)/16px var(--font-sans); color: var(--fg-subtle); margin-bottom: 5px; }
.smart-redesign .sm-form .form-control,
.smart-redesign .sm-form select.egon-embedded-form-field,
.smart-redesign .sm-form input.egon-embedded-form-field { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.smart-redesign .sm-inputunit { display: flex; align-items: center; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); overflow: hidden; }
.smart-redesign .sm-inputunit .form-control { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; }
.smart-redesign .sm-inputunit .sm-unit { display: flex; align-items: center; height: 100%; padding: 0 var(--space-xs); border-left: 1px solid var(--border-base); background: var(--bg-subtle); font: var(--fw-regular) 11px/1 var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.smart-redesign .sm-submit { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; height: 36px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-interactive); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; }
.smart-redesign .sm-submit:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }
.smart-redesign .form-group.visually-hidden,
.smart-redesign .checkbox label.hidden { display: none; }

@media (max-width: 639px) {
	.smart-redesign .sm-body { padding: var(--space-sm); }
}
/* The shared Partials/Form/Base include renders these fields with no visible
   label in vertical mode (placeholder-only) — inject one via ::before on the
   wrapping .form-group so the field is identifiable before you click into it,
   without editing the partial (which other screens also include). */
.smart-redesign .sm-form .form-group:has(> select[name$="country_id"])::before,
.smart-redesign .sm-form .form-group:has(> input[name$="zip"])::before,
.smart-redesign .sm-form .form-group:has(> select[name$="city"])::before,
.smart-redesign .sm-form .form-group:has(> select[name$="street"])::before,
.smart-redesign .sm-form .form-group:has(> input[name$="street_number"])::before {
	display: block;
	font: var(--fw-regular) var(--txt-xsmall)/16px var(--font-sans);
	color: var(--fg-subtle);
	margin-bottom: 5px;
}
.smart-redesign .sm-form .form-group:has(> select[name$="country_id"])::before { content: "Land"; }
.smart-redesign .sm-form .form-group:has(> input[name$="zip"])::before { content: "PLZ"; }
.smart-redesign .sm-form .form-group:has(> select[name$="city"])::before { content: "Ort"; }
.smart-redesign .sm-form .form-group:has(> select[name$="street"])::before { content: "Straße"; }
.smart-redesign .sm-form .form-group:has(> input[name$="street_number"])::before { content: "Nr."; }
/* end SMART REDESIGN */

/* INVITERESELLER REDESIGN */
.invitereseller-redesign .ir-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); padding: var(--space-md); }
.invitereseller-redesign .form-group,
.invitereseller-redesign .row.input-row { margin-bottom: var(--space-sm); }
.invitereseller-redesign .row.input-row { display: flex; gap: var(--space-sm); }
.invitereseller-redesign .row.input-row > [class*="col-"] { flex: 1; min-width: 0; padding: 0; }
.invitereseller-redesign .form-control,
.invitereseller-redesign select.egon-embedded-form-field,
.invitereseller-redesign input.egon-embedded-form-field { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.invitereseller-redesign .input-addon .input-group { display: flex; align-items: center; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); overflow: hidden; }
.invitereseller-redesign .input-addon .input-group .form-control { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; }
.invitereseller-redesign .input-addon .input-group-text { display: flex; align-items: center; justify-content: center; width: 36px; height: 100%; border-left: 1px solid var(--border-base); background: var(--bg-subtle); color: var(--fg-subtle); }
.invitereseller-redesign .ir-check { display: flex; align-items: center; gap: var(--space-xs); font: var(--fw-regular) var(--txt-xsmall)/18px var(--font-sans); color: var(--fg-base); }
.invitereseller-redesign .ir-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }
.invitereseller-redesign .btn.btn-primary.btn-block { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-interactive); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; }
.invitereseller-redesign .btn.btn-primary.btn-block:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }
.invitereseller-redesign .row.input-row:not(:has(input)):not(:has(select)) { display: none; }

@media (max-width: 639px) {
	.invitereseller-redesign .ir-card { padding: var(--space-sm); }
}
/* end INVITERESELLER REDESIGN */

/* UPCOMMINGORDER REDESIGN */
.upcommingorder-redesign .uo-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.upcommingorder-redesign .uo-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-base); }
.upcommingorder-redesign .uo-head-text { flex: 1 1 220px; min-width: 0; }
.upcommingorder-redesign .uo-title { margin: 0; font: var(--fw-medium) var(--txt-large)/var(--lh-large) var(--font-sans); color: var(--fg-base); }
.upcommingorder-redesign .uo-title .text-primary { color: var(--fg-interactive); font-variant-numeric: tabular-nums; }
.upcommingorder-redesign .uo-subtitle { font: var(--fw-regular) var(--txt-xsmall)/var(--lh-xsmall) var(--font-sans); color: var(--fg-muted); }
.upcommingorder-redesign .uo-head-controls { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md); }
.upcommingorder-redesign .uo-check { display: inline-flex; align-items: center; gap: var(--space-xs); height: 34px; font: var(--fw-regular) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-base); cursor: pointer; white-space: nowrap; }
.upcommingorder-redesign .uo-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--bg-interactive); }
.upcommingorder-redesign .uo-select-wrap { display: flex; flex-direction: column; gap: var(--space-3xs); align-items: flex-end; }
.upcommingorder-redesign .uo-select { width: 160px; height: 34px; padding: 0 var(--space-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.upcommingorder-redesign .uo-select-wrap small { font: var(--fw-regular) var(--txt-xsmall)/16px var(--font-sans); color: var(--fg-muted); }

.upcommingorder-redesign .uo-tablewrap { overflow-x: auto; }
.upcommingorder-redesign .uo-table { width: 100%; border-collapse: collapse; }
.upcommingorder-redesign .uo-table th { text-align: left; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border-bottom: 1px solid var(--border-base); font: var(--fw-medium) var(--txt-xsmall)/var(--lh-xsmall) var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.upcommingorder-redesign .uo-table th:last-child,
.upcommingorder-redesign .uo-table td:last-child { padding-right: var(--space-lg); }
.upcommingorder-redesign .uo-table th.uo-col-type,
.upcommingorder-redesign .uo-table td[style*="width:25px"] { padding-left: var(--space-lg); padding-right: var(--space-xs); width: 40px; }
.upcommingorder-redesign .uo-table td { padding: 10px var(--space-xs); border-bottom: 1px solid var(--border-row); font: var(--fw-regular) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-base); vertical-align: middle; }
.upcommingorder-redesign .uo-table tbody tr:hover { background: var(--bg-highlight); }
.upcommingorder-redesign .uo-table td .fa { color: var(--fg-muted); }
.upcommingorder-redesign .uo-table td a { font: var(--fw-medium) var(--txt-small)/var(--lh-small) var(--font-sans); }
.upcommingorder-redesign .uo-empty { padding: var(--space-3xl) var(--space-lg); text-align: center; font: var(--fw-regular) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-muted); }

@media (max-width: 639px) {
	.upcommingorder-redesign .uo-head { padding: var(--space-sm); }
	.upcommingorder-redesign .uo-head-controls { flex-direction: column; align-items: stretch; }
	.upcommingorder-redesign .uo-select-wrap { align-items: flex-start; }
}
/* end UPCOMMINGORDER REDESIGN */

/* NEWS REDESIGN (dashboard tt_news LATEST widget) */
.news-redesign .nw-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.news-redesign .nw-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-base); }
.news-redesign .nw-head-icon { display: flex; color: var(--fg-subtle); }
.news-redesign .nw-head-title { font: var(--fw-medium) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-base); }
.news-redesign .nw-head-archive { margin-left: auto; }
.news-redesign .nw-head-archive a { font: var(--fw-medium) var(--txt-xsmall)/var(--lh-xsmall) var(--font-sans); color: var(--fg-interactive); }
.news-redesign .nw-list { display: flex; flex-direction: column; }
.news-redesign .nw-item { display: flex; gap: var(--space-sm); padding: 14px var(--space-md); border-bottom: 1px solid var(--border-base); }
.news-redesign .nw-item:last-child { border-bottom: 0; }
.news-redesign .nw-item:hover { background: var(--bg-highlight); }
.news-redesign .nw-item a { text-decoration: none; }
.news-redesign .nw-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--bg-subtle); overflow: hidden; }
.news-redesign .nw-thumb img,
.news-redesign .nw-thumb a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-redesign .nw-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.news-redesign .nw-meta { display: flex; align-items: center; gap: var(--space-xs); }
.news-redesign .nw-date { font: var(--fw-regular) var(--txt-xsmall)/16px var(--font-mono); color: var(--fg-muted); }
.news-redesign .nw-tag { margin-left: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--bg-highlight); font: var(--fw-medium) var(--txt-xsmall)/1 var(--font-sans); color: var(--fg-interactive); }
.news-redesign .nw-title { font: var(--fw-medium) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-base); }
.news-redesign .nw-title a { color: var(--fg-base); }
.news-redesign .nw-text { font: var(--fw-regular) var(--txt-xsmall)/18px var(--font-sans); color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-redesign .nw-text a { color: var(--fg-subtle); }

@media (max-width: 639px) {
	.news-redesign .nw-item { padding: 12px var(--space-sm); }
}
/* end NEWS REDESIGN */

/* APP-MENU REDESIGN (dashboard quick-link tiles, page-tree HMENU, scoped to its own wrapper id) */
#egon-embedded-app-menu .vp-panel { height: auto; overflow: visible; background: var(--bg-base); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); margin-bottom: var(--space-lg); }
#egon-embedded-app-menu .vp-inner { position: static; width: 100%; height: auto; margin-left: 0; display: flex; flex-direction: column; transition: none; }
#egon-embedded-app-menu .panel-front { position: static; display: block; width: 100%; float: none; height: auto; padding: 0; border-bottom: 1px solid var(--border-base); }
#egon-embedded-app-menu .vp-panel .panel-front h3 { margin: 0; font-size: inherit; }
#egon-embedded-app-menu .vp-panel .panel-front h3 small { display: none; }
#egon-embedded-app-menu .panel-front h3 a { display: flex; align-items: center; gap: var(--space-xs); height: 44px; padding: 0 14px; font: var(--fw-medium) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-base); text-decoration: none; }
#egon-embedded-app-menu .panel-front h3 a:hover { color: var(--fg-interactive); text-decoration: none; }
#egon-embedded-app-menu .vp-panel .panel-front h3 a span,
#egon-embedded-app-menu .panel-front h3 a i { display: none; }
#egon-embedded-app-menu .panel-back { position: static; display: block; width: 100%; left: 0; height: auto; padding: 7px 0; }
#egon-embedded-app-menu .panel-back > a { position: static; top: 0; float: none; display: flex; align-items: center; gap: var(--space-sm); height: 44px; padding: 0 14px; border-bottom: 0; background: transparent; line-height: normal; font: var(--fw-regular) var(--txt-small)/var(--lh-small) var(--font-sans); color: var(--fg-base); text-decoration: none; }
#egon-embedded-app-menu .panel-back > a:hover { background: var(--bg-highlight); color: var(--fg-interactive); text-decoration: none; }
#egon-embedded-app-menu .panel-back > a::after { content: "\203A"; margin-left: auto; color: var(--fg-disabled); font-size: 16px; line-height: 1; }
#egon-embedded-app-menu .panel-back > a span { position: static; top: 0; left: 0; float: none; flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; border-radius: var(--radius-md); background: var(--bg-highlight); color: var(--fg-interactive); font-size: 13px; line-height: normal; }
#egon-embedded-app-menu .vp-close { display: none; }
#egon-embedded-app-menu.row { display: flex; flex-wrap: wrap; align-items: stretch; }
#egon-embedded-app-menu .col-md-6,
#egon-embedded-app-menu .col-md-4 { display: flex; }
#egon-embedded-app-menu .col-md-6 .vp-panel,
#egon-embedded-app-menu .col-md-4 .vp-panel { flex: 1 1 auto; width: 100%; }
/* end APP-MENU REDESIGN */

/* DASHBOARD SPACING FIX — the gridelements column renders sibling content
   elements back-to-back with zero margin between them (verified via
   getBoundingClientRect: consecutive cards shared the same edge pixel).
   Each stacked dashboard card owns its own bottom gap so both columns get a
   uniform rhythm regardless of which widgets are hidden/reordered. */
.smart-redesign,
.calendar-redesign,
.news-redesign,
.orderoverview-redesign,
.upcommingorder-redesign { margin-bottom: var(--space-lg); }
/* end DASHBOARD SPACING FIX */

/* ═══════════════════════════════════════════════════════════════════════
   INVITERESELLER REDESIGN v2 (Mitarbeiter einladen)
   Supersedes the original ".invitereseller-redesign .ir-card" pass above
   (left untouched — CSS discipline requires this file to stay append-only;
   the old block is dead once this one loads later in source order and is a
   /cleanup candidate). New markup uses .ir-panel/.ir-panel-head/.ir-consent
   instead of the old .ir-card/.ir-check names so nothing here collides with
   the superseded block. Two-panel layout: the invite form (Partials/Form/
   Base + Contact, direction="horizontal" so they render their labelled
   branch) plus a static "Ablauf" explainer panel. Tokens only. Responsive
   via flips at 1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.invitereseller-redesign {
	--ir-cols: 1fr 300px;
	font-family: var(--font-sans);
}
.invitereseller-redesign .ir-page { display: grid; grid-template-columns: var(--ir-cols); gap: var(--space-lg); align-items: start; }

.invitereseller-redesign .ir-panel { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.invitereseller-redesign .ir-panel-head { padding: 14px 20px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.invitereseller-redesign .ir-form-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.invitereseller-redesign .ir-form-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-base); background: var(--bg-subtle); }

/* Form fields — Base/Contact rendered in their labelled ("horizontal") branch */
.invitereseller-redesign .ir-form-body .form-group { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.invitereseller-redesign .ir-form-body .form-group > label,
.invitereseller-redesign .ir-form-body .form-group > label.form-label { margin: 0; padding: 0; width: 100%; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.invitereseller-redesign .ir-form-body .form-group > label .text-danger { color: var(--fg-error); }
.invitereseller-redesign .ir-form-body .form-group > [class^="col-sm-8"] { width: 100%; padding: 0; min-width: 0; }
.invitereseller-redesign .ir-form-body .row.input-row { display: flex; gap: var(--space-sm); margin: 0; }
.invitereseller-redesign .ir-form-body .row.input-row > [class*="col-"] { flex: 1; min-width: 0; padding: 0; }
.invitereseller-redesign .ir-form-body .row.input-row:not(:has(input)):not(:has(select)) { display: none; }
.invitereseller-redesign .ir-form-body .form-control,
.invitereseller-redesign .ir-form-body select.egon-embedded-form-field,
.invitereseller-redesign .ir-form-body input.egon-embedded-form-field { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.invitereseller-redesign .ir-form-body select.form-control { padding: 0 8px; }
.invitereseller-redesign .ir-form-body .form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.invitereseller-redesign .ir-form-body .input-group,
.invitereseller-redesign .ir-form-body .input-addon .input-group { display: flex; align-items: stretch; gap: 6px; height: 36px; background: transparent; border: 0; overflow: visible; }
.invitereseller-redesign .ir-form-body .input-group .form-control,
.invitereseller-redesign .ir-form-body .input-addon .input-group .form-control { flex: 1; min-width: 0; height: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.invitereseller-redesign .ir-form-body .input-group-text,
.invitereseller-redesign .ir-form-body .input-addon .input-group-text { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--fg-subtle); }

.invitereseller-redesign .ir-email-hint { display: none; align-items: center; gap: 5px; margin-top: -6px; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--tag-green-fg); }
.invitereseller-redesign .ir-email-hint.is-visible { display: flex; }
.invitereseller-redesign .ir-email-hint .fa { font-size: 12px; }

/* NOTE: this checkbox is intentionally NOT wrapped in a <label> — wrapping a
   *validated* checkbox in <label> triggers an infinite recursion in this
   legacy formValidation.min.js build's message-container lookup (verified
   empirically; unvalidated checkboxes like Partials/Form/Bank's "self_bank"
   are unaffected since the library only calls that lookup for fields that
   have a validator configured). Do not "fix" this by adding a <label>. */
.invitereseller-redesign .form-group.ir-consent { margin: 0 20px 16px; display: flex; flex-direction: row; align-items: center; gap: 8px; font: var(--fw-regular) var(--txt-xsmall)/18px var(--font-sans); color: var(--fg-base); }
.invitereseller-redesign .form-group.ir-consent input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }

.invitereseller-redesign .ir-form-footer .btn.btn-primary.btn-block { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-interactive); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; }
.invitereseller-redesign .ir-form-footer .btn.btn-primary.btn-block:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }

/* ── Side panel: "Ablauf" explainer ─────────────────────────────────────── */
.invitereseller-redesign .ir-steps { list-style: none; margin: 0; padding: 18px 20px 4px; display: flex; flex-direction: column; gap: 16px; }
.invitereseller-redesign .ir-steps li { display: flex; align-items: flex-start; gap: 10px; }
.invitereseller-redesign .ir-step-no { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 9999px; background: var(--bg-highlight); font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--fg-interactive); }
.invitereseller-redesign .ir-steps li strong { display: block; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.invitereseller-redesign .ir-steps li span { display: block; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.invitereseller-redesign .ir-side-col { display: flex; flex-direction: column; gap: var(--space-lg); }
.invitereseller-redesign .ir-side-hint { margin: 0; padding: 14px 20px 20px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.invitereseller-redesign .ir-side-hint strong { color: var(--fg-base); font-weight: var(--fw-medium); }
.invitereseller-redesign .ir-panel--cta .ir-side-hint { padding-top: 0; }
.invitereseller-redesign .btn.ir-cta-btn { margin: 0 20px 20px; display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-base); text-decoration: none; }
.invitereseller-redesign .btn.ir-cta-btn:hover { background: var(--bg-subtle-hover); color: var(--fg-base); text-decoration: none; }

/* ── Segmented Anrede toggle (visual layer over the real <select>) ─────── */
.invitereseller-redesign select.ir-visually-hidden-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; opacity: 0; }
.invitereseller-redesign .ir-segmented { display: flex; gap: 8px; }
.invitereseller-redesign .ir-segmented-btn { flex: 1; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.invitereseller-redesign .ir-segmented-btn:hover { background: var(--bg-subtle-hover); }
.invitereseller-redesign .ir-segmented-btn.is-active { border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover); font-weight: var(--fw-medium); }

/* ── Fax disclosure link ────────────────────────────────────────────── */
.invitereseller-redesign .ir-add-fax { align-self: flex-start; padding: 0; border: 0; background: transparent; font: var(--fw-regular) var(--txt-small)/1 var(--font-sans); color: var(--fg-interactive); cursor: pointer; }
.invitereseller-redesign .ir-add-fax:hover { color: var(--fg-interactive-hover); text-decoration: underline; }

/* ── Responsive token flips ──────────────────────────────────────────── */
@media (max-width: 1023px) {
	.invitereseller-redesign { --ir-cols: 1fr 260px; }
}
@media (max-width: 899px) {
	.invitereseller-redesign { --ir-cols: 1fr; }
}
@media (max-width: 639px) {
	.invitereseller-redesign .ir-form-body,
	.invitereseller-redesign .ir-panel-head,
	.invitereseller-redesign .ir-form-footer { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}
/* end INVITERESELLER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   INVITERESELLERPUBLIC REDESIGN (Mitarbeiter einladen — öffentlich)
   Unauthenticated public twin of invitereseller (same field set + a
   honeypot + optional reCAPTCHA). Same structure/approach as the
   INVITERESELLER block above but its own class prefix throughout, since
   the two screens are separate modules with separate templates.
   IMPORTANT: the privacy_read checkbox stays a bare, unwrapped <input> —
   see the note above the INVITERESELLER checkbox rules for why wrapping a
   *validated* checkbox in <label> crashes this formValidation.min.js build.
   Tokens only. Responsive via flips at 1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.inviteresellerpublic-redesign {
	--irp-cols: 1fr 300px;
	font-family: var(--font-sans);
}
.inviteresellerpublic-redesign .irp-page { display: grid; grid-template-columns: var(--irp-cols); gap: var(--space-lg); align-items: start; }

.inviteresellerpublic-redesign .irp-panel { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.inviteresellerpublic-redesign .irp-panel-head { padding: 14px 20px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.inviteresellerpublic-redesign .irp-form-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.inviteresellerpublic-redesign .irp-form-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-base); background: var(--bg-subtle); }

.inviteresellerpublic-redesign .irp-form-body .form-group { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.inviteresellerpublic-redesign .irp-form-body .form-group > label,
.inviteresellerpublic-redesign .irp-form-body .form-group > label.form-label { margin: 0; padding: 0; width: 100%; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.inviteresellerpublic-redesign .irp-form-body .form-group > label .text-danger { color: var(--fg-error); }
.inviteresellerpublic-redesign .irp-form-body .form-group > [class^="col-sm-8"] { width: 100%; padding: 0; min-width: 0; }
.inviteresellerpublic-redesign .irp-form-body .row.input-row { display: flex; gap: var(--space-sm); margin: 0; }
.inviteresellerpublic-redesign .irp-form-body .row.input-row > [class*="col-"] { flex: 1; min-width: 0; padding: 0; }
.inviteresellerpublic-redesign .irp-form-body .row.input-row:not(:has(input)):not(:has(select)) { display: none; }
.inviteresellerpublic-redesign .irp-form-body .form-control,
.inviteresellerpublic-redesign .irp-form-body select.egon-embedded-form-field,
.inviteresellerpublic-redesign .irp-form-body input.egon-embedded-form-field { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.inviteresellerpublic-redesign .irp-form-body select.form-control { padding: 0 8px; }
.inviteresellerpublic-redesign .irp-form-body .form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.inviteresellerpublic-redesign .irp-form-body .input-group,
.inviteresellerpublic-redesign .irp-form-body .input-addon .input-group { display: flex; align-items: stretch; gap: 6px; height: 36px; background: transparent; border: 0; overflow: visible; }
.inviteresellerpublic-redesign .irp-form-body .input-group .form-control,
.inviteresellerpublic-redesign .irp-form-body .input-addon .input-group .form-control { flex: 1; min-width: 0; height: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.inviteresellerpublic-redesign .irp-form-body .input-group-text,
.inviteresellerpublic-redesign .irp-form-body .input-addon .input-group-text { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--fg-subtle); }

.inviteresellerpublic-redesign .irp-email-hint { display: none; align-items: center; gap: 5px; margin-top: -6px; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--tag-green-fg); }
.inviteresellerpublic-redesign .irp-email-hint.is-visible { display: flex; }
.inviteresellerpublic-redesign .irp-email-hint .fa { font-size: 12px; }

.inviteresellerpublic-redesign .form-group.irp-consent { margin: 0 20px 16px; display: flex; flex-direction: row; align-items: center; gap: 8px; font: var(--fw-regular) var(--txt-xsmall)/18px var(--font-sans); color: var(--fg-base); }
.inviteresellerpublic-redesign .form-group.irp-consent input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }
.inviteresellerpublic-redesign .form-group.irp-recaptcha { margin: 0 20px 16px; }

.inviteresellerpublic-redesign .irp-form-footer .btn.btn-primary.btn-block { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-interactive); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; }
.inviteresellerpublic-redesign .irp-form-footer .btn.btn-primary.btn-block:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }

.inviteresellerpublic-redesign .irp-steps { list-style: none; margin: 0; padding: 18px 20px 4px; display: flex; flex-direction: column; gap: 16px; }
.inviteresellerpublic-redesign .irp-steps li { display: flex; align-items: flex-start; gap: 10px; }
.inviteresellerpublic-redesign .irp-step-no { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 9999px; background: var(--bg-highlight); font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--fg-interactive); }
.inviteresellerpublic-redesign .irp-steps li strong { display: block; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.inviteresellerpublic-redesign .irp-steps li span { display: block; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.inviteresellerpublic-redesign .irp-side-hint { margin: 0; padding: 14px 20px 20px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }

@media (max-width: 1023px) {
	.inviteresellerpublic-redesign { --irp-cols: 1fr 260px; }
}
@media (max-width: 899px) {
	.inviteresellerpublic-redesign { --irp-cols: 1fr; }
}
@media (max-width: 639px) {
	.inviteresellerpublic-redesign .irp-form-body,
	.inviteresellerpublic-redesign .irp-panel-head,
	.inviteresellerpublic-redesign .irp-form-footer { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}
/* end INVITERESELLERPUBLIC REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   REGISTERRESELLER REDESIGN (Mitarbeiter anlegen)
   One card, three columns (Stammdaten+Unternehmen / Bankverbindung+
   geschäftlicher Kontakt / Karrierestufe+Kontaktdaten), all Partials
   included with direction="horizontal" (labelled branch). No partial file
   touched — Partials/Form/{Base,Contact,Bank} inherit this scope, same
   zero-blast-radius approach as the CUSTOMER/INVITERESELLER blocks above.
   Tokens only. Responsive via flips at 1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.registerreseller-redesign {
	--rr-cols: repeat(3, minmax(0, 1fr));
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.registerreseller-redesign .rr-panel { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.registerreseller-redesign .rr-panel-head { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.registerreseller-redesign .rr-required-hint { margin-left: auto; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.registerreseller-redesign .rr-required-hint .text-danger { color: var(--fg-error); }
.registerreseller-redesign .rr-cols { padding: 20px; display: grid; grid-template-columns: var(--rr-cols); gap: 20px; }
.registerreseller-redesign .rr-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.registerreseller-redesign .rr-col-head {
	display: flex; align-items: center; gap: 8px; margin-top: 8px;
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap;
}
.registerreseller-redesign .rr-col-head::after { content: ""; flex: 1; height: 1px; background: var(--border-base); order: 1; }
.registerreseller-redesign .rr-col-head > span:first-child { order: 0; }
.registerreseller-redesign .rr-col > .rr-col-head:first-child { margin-top: 0; }
.registerreseller-redesign .rr-kontoinhaber-toggle { order: 2; margin-left: 8px; white-space: nowrap; flex: none; font: var(--fw-regular) 12px/1 var(--font-sans); }

/* Form fields (native .form-group/.row.input-row/.form-control, partials unmodified) */
.registerreseller-redesign .form-group { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.registerreseller-redesign .form-group > label,
.registerreseller-redesign .form-group > label.form-label { margin: 0; padding: 0; width: 100%; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.registerreseller-redesign .form-group > label .text-danger { color: var(--fg-error); }
.registerreseller-redesign .form-group > [class^="col-sm-8"] { width: 100%; padding: 0; min-width: 0; }
.registerreseller-redesign .row.input-row { display: flex; gap: var(--space-sm); margin: 0; }
.registerreseller-redesign .row.input-row > [class*="col-"] { flex: 1; min-width: 0; padding: 0; }
.registerreseller-redesign .form-control,
.registerreseller-redesign select.egon-embedded-form-field,
.registerreseller-redesign input.egon-embedded-form-field,
.registerreseller-redesign textarea.egon-embedded-form-field { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.registerreseller-redesign select.form-control { padding: 0 8px; }
.registerreseller-redesign textarea.form-control { height: 72px; padding: 8px 10px; font: var(--fw-regular) var(--txt-small)/20px var(--font-sans); resize: vertical; }
.registerreseller-redesign .form-control:focus,
.registerreseller-redesign select.form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.registerreseller-redesign .form-control[disabled] { background: var(--bg-disabled); color: var(--fg-subtle); }
.registerreseller-redesign .input-group,
.registerreseller-redesign .input-group.select { display: flex; align-items: stretch; gap: 6px; height: 36px; background: transparent; border: 0; }
.registerreseller-redesign .input-group .form-control,
.registerreseller-redesign .input-group select.form-control { flex: 1; min-width: 0; height: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.registerreseller-redesign .input-group-text { display: flex; flex: none; align-items: center; justify-content: center; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--fg-subtle); }
.registerreseller-redesign .input-group-text.btn { cursor: pointer; font: var(--fw-medium) 12px/1 var(--font-sans); background: var(--bg-base); border-color: var(--border-interactive); color: var(--fg-interactive); white-space: nowrap; }
.registerreseller-redesign .input-group-text.btn:hover { background: var(--bg-highlight); }
.registerreseller-redesign .form-group-seperator { margin: 4px 0 0; }
.registerreseller-redesign .form-group-seperator .text-muted { font: var(--fw-medium) 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.registerreseller-redesign .form-group-seperator hr { margin: 6px 0 0; border-color: var(--border-base); opacity: 1; }
.registerreseller-redesign .rr-help { margin: 0; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.registerreseller-redesign .rr-help strong { color: var(--fg-base); font-weight: var(--fw-medium); }

.registerreseller-redesign .checkbox.rr-inline-check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font: var(--fw-regular) var(--txt-small)/20px var(--font-sans); color: var(--fg-base); }
.registerreseller-redesign .checkbox.rr-inline-check input[type="checkbox"] { position: static; width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }

.registerreseller-redesign .rr-callout { padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-highlight); border: 1px solid var(--bg-highlight-hover); }
.registerreseller-redesign .rr-callout h4 { margin: 0 0 6px; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-interactive-hover); }
.registerreseller-redesign .rr-callout p { margin: 0 0 6px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-base); }
.registerreseller-redesign .rr-callout p:last-child { margin-bottom: 0; }

.registerreseller-redesign .rr-form-footer {
	position: sticky; bottom: 0; z-index: 5;
	display: flex; align-items: center; gap: 12px; padding: 14px 20px;
	border-top: 1px solid var(--border-base); background: var(--bg-base); box-shadow: var(--shadow-flyout);
}
.registerreseller-redesign .rr-progress { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px; background: var(--bg-subtle-hover); font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-subtle); }
.registerreseller-redesign .rr-footer-hint { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.registerreseller-redesign .btn.rr-reset { margin-left: auto; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.registerreseller-redesign .btn.rr-reset:hover { background: var(--bg-subtle-hover); }
.registerreseller-redesign .btn.rr-submit { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-interactive); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; }
.registerreseller-redesign .btn.rr-submit:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }

/* ── Responsive token flips ──────────────────────────────────────────── */
@media (max-width: 1023px) {
	.registerreseller-redesign { --rr-cols: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.registerreseller-redesign { --rr-cols: minmax(0, 1fr); }
	.registerreseller-redesign .rr-cols { padding: var(--space-sm); }
	.registerreseller-redesign .rr-form-footer { flex-direction: column; align-items: stretch; }
	.registerreseller-redesign .rr-footer-hint { order: -1; }
	.registerreseller-redesign .btn.rr-reset { margin-left: 0; }
}
@media (max-width: 639px) {
	.registerreseller-redesign .rr-panel-head { padding: 12px var(--space-sm); }
}
/* end REGISTERRESELLER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   STRUCTURE REDESIGN (Mitarbeiterübersicht)
   Org-tree screen: a header, a two-panel grid (fancytree explorer + detail
   panel), and the async view/structure/content sub-view that replaces the
   detail panel's innerHTML on node select (same .structure-redesign scope,
   so these rules reach it too). The tree widget itself (jquery.fancytree +
   glyph extension) is left running exactly as-is — only its rendered
   classes (.fancytree-container/-node/-title/-expander/-icon) are skinned
   here; no tree JS/data-fetch behavior changes. Tokens only. Responsive
   via flips at 1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.structure-redesign {
	--st-cols: 412px minmax(0, 1fr);
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.structure-redesign .st-header { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); padding: 18px 20px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.structure-redesign .st-header-text { display: flex; flex-direction: column; gap: 4px; }
.structure-redesign .st-title { font: var(--fw-medium) 18px/26px var(--font-sans); color: var(--fg-base); }
.structure-redesign .st-sub { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }
.structure-redesign .st-grid { display: grid; grid-template-columns: var(--st-cols); gap: 20px; align-items: start; }
.structure-redesign .st-panel { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; display: flex; flex-direction: column; }

/* ── Tree panel: search / toolbar / tree / legend ─────────────────────── */
.structure-redesign .st-search { padding: 12px 14px; border-bottom: 1px solid var(--border-base); }
.structure-redesign .st-search .input-group { display: flex; align-items: stretch; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); overflow: hidden; }
.structure-redesign .st-search .form-control { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 10px; font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); background: transparent; }
.structure-redesign .st-search .form-control:focus { outline: none; box-shadow: none; }
.structure-redesign .st-search-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; border: 0; background: transparent; color: var(--fg-muted); }
.structure-redesign .st-search-clear { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; margin: 3px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); cursor: pointer; }
.structure-redesign .st-search-clear:hover { background: var(--bg-subtle-hover); }

.structure-redesign .st-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); }
.structure-redesign .st-toolbar-label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.structure-redesign .st-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.structure-redesign .st-toolbar-btn { height: 26px; padding: 0 8px; border: 1px solid var(--border-base); border-radius: var(--radius-sm); background: var(--bg-base); font: var(--fw-regular) 12px/1 var(--font-sans); color: var(--fg-subtle); cursor: pointer; }
.structure-redesign .st-toolbar-btn:hover { background: var(--bg-subtle-hover); }

.structure-redesign .st-tree-body { max-height: 648px; overflow: auto; padding: 4px 0; }

/* fancytree skin (structural classes only — glyph extension already adds
   the fa-* icon classes; tree data/lazyLoad/activate wiring is untouched) */
.structure-redesign ul.fancytree-container { border: none !important; font: var(--fw-regular) var(--txt-small)/1 var(--font-sans); outline: none; }
.structure-redesign .fancytree-node { display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer; }
.structure-redesign .fancytree-node:hover { background: var(--bg-subtle-hover); }
.structure-redesign .fancytree-active span.fancytree-title { color: var(--fg-interactive-hover); font-weight: var(--fw-medium); }
.structure-redesign .fancytree-active { background: var(--bg-highlight); }
.structure-redesign span.fancytree-expander { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex: none; color: var(--fg-muted); font-size: 12px; }
.structure-redesign span.fancytree-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: none; margin-right: 6px; color: var(--fg-subtle); font-size: 13px; background: none !important; }
.structure-redesign span.fancytree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-base); padding: 0; border: 0 !important; margin: 0; }
.structure-redesign .fancytree-loading span.fancytree-expander { color: var(--fg-interactive); }

.structure-redesign .st-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border-base); background: var(--bg-subtle); }
.structure-redesign .st-legend-label { font: var(--fw-medium) 11px/16px var(--font-sans); color: var(--fg-muted); }
.structure-redesign .st-legend-item { font: var(--fw-regular) 11px/16px var(--font-sans); }

/* ── Content panel: empty state + detail ──────────────────────────────── */
.structure-redesign .st-panel--content { min-height: 240px; }
.structure-redesign .st-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 56px 20px; text-align: center; }
.structure-redesign .st-empty-icon { color: var(--fg-disabled); font-size: 22px; }
.structure-redesign .st-empty-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.structure-redesign .st-empty-desc { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); max-width: 320px; }

.structure-redesign .st-detail { display: flex; flex-direction: column; }
.structure-redesign .st-detail-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border-base); }
.structure-redesign .st-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: var(--bg-highlight); color: var(--fg-interactive-hover); font-size: 16px; }
.structure-redesign .st-detail-identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.structure-redesign .st-detail-name { font: var(--fw-medium) 15px/22px var(--font-sans); color: var(--fg-base); }
.structure-redesign .st-detail-meta { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.structure-redesign .st-detail-meta strong { font-weight: var(--fw-medium); color: var(--fg-base); }

.structure-redesign .st-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border-base); }
.structure-redesign .st-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border-right: 1px solid var(--border-base); }
.structure-redesign .st-kpi:last-child { border-right: 0; }
.structure-redesign .st-kpi-label { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.structure-redesign .st-kpi-value { font: var(--fw-medium) 18px/26px var(--font-sans); color: var(--fg-disabled); }
.structure-redesign .st-kpi-note { display: block; padding: 6px 20px; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); border-bottom: 1px solid var(--border-base); }

.structure-redesign .st-detail-cols { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.structure-redesign .st-subpartners,
.structure-redesign .st-kontakt { background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-md); overflow: hidden; }
.structure-redesign .st-subpartners-head,
.structure-redesign .st-kontakt-head { padding: 10px 14px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.structure-redesign .st-subpartners-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 90px 70px 70px; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border-base); font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-base); }
.structure-redesign .st-subpartners-row--head { font: var(--fw-medium) 11px/16px var(--font-sans); color: var(--fg-muted); background: var(--bg-subtle); }
.structure-redesign .st-empty--compact { padding: 28px 16px; }
.structure-redesign .st-kontakt-body { display: flex; flex-direction: column; }
.structure-redesign .st-kontakt-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border-base); font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-base); }
.structure-redesign .st-kontakt-row:last-child { border-bottom: 0; }
.structure-redesign .st-kontakt-row .fa { flex: none; width: 14px; color: var(--fg-muted); }
.structure-redesign .st-kontakt-row a { color: var(--fg-interactive); }

.structure-redesign .st-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.structure-redesign .btn.st-header-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--radius-md); font: var(--fw-medium) 13px/1 var(--font-sans); text-decoration: none; cursor: pointer; }
.structure-redesign .btn.st-header-btn.btn-secondary { border: 1px solid var(--border-strong); background: var(--bg-base); color: var(--fg-base); }
.structure-redesign .btn.st-header-btn.btn-secondary:hover { background: var(--bg-subtle-hover); color: var(--fg-base); text-decoration: none; }
.structure-redesign .btn.st-header-btn.btn-primary { border: 1px solid var(--border-interactive); background: var(--bg-interactive); color: var(--fg-on-color); }
.structure-redesign .btn.st-header-btn.btn-primary:hover { background: var(--bg-interactive-hover); color: var(--fg-on-color); text-decoration: none; }

.structure-redesign .st-detail-tabs { padding: 0 20px 20px; }
.structure-redesign .nav-tabs { display: flex; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; border-bottom: 1px solid var(--border-base); }
.structure-redesign .nav-tabs li { margin: 0; }
.structure-redesign .nav-tabs a { display: inline-flex; align-items: center; height: 38px; padding: 0 4px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-subtle); text-decoration: none; cursor: pointer; }
.structure-redesign .nav-tabs li.active a,
.structure-redesign .nav-tabs a.active { color: var(--fg-interactive-hover); border-bottom-color: var(--bg-interactive); }
.structure-redesign .tab-content .tab-pane { display: none; }
.structure-redesign .tab-content .tab-pane.active { display: block; }

/* ── Responsive token flips ──────────────────────────────────────────── */
@media (max-width: 1023px) {
	.structure-redesign { --st-cols: 340px minmax(0, 1fr); }
}
@media (max-width: 899px) {
	.structure-redesign { --st-cols: minmax(0, 1fr); }
	.structure-redesign .st-tree-body { max-height: 420px; }
}
@media (max-width: 639px) {
	.structure-redesign .st-header { padding: 14px var(--space-sm); }
	.structure-redesign .st-detail-head,
	.structure-redesign .st-detail-tabs { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}
/* end STRUCTURE REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   STATS REDESIGN (Statistik)
   Card chrome, KPI strip, and hand-drawn SVG ring/line charts (stroke-
   dasharray donuts + a Catmull-Rom-smoothed area line), replacing the
   previous Chart.js canvases so real per-segment percentages can be shown
   and the design comp's ring look can be matched exactly. Ring/line paths
   are computed in app/stats.js and injected as inline SVG — CSS here only
   styles the containers, legend rows, and chart typography (tokens only).
   The Umsatzübersicht chart used to delegate to the shared statsoverview
   nested module (also used by the structure screen); it is now rendered
   independently inside .stats-redesign from data app/stats.js already
   fetches, so the structure screen (which still uses statsoverview as-is)
   is unaffected by anything in this block.
   Responsive token flips at 1023 / 899 / 767 / 639 (same as ratecalc).
   ═══════════════════════════════════════════════════════════════════════ */

.stats-redesign { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-sans); color: var(--fg-base); }
.stats-redesign *, .stats-redesign *::before, .stats-redesign *::after { box-sizing: border-box; }

/* ── KPI strip ──────────────────────────────────────────────────────── */
.stats-redesign .st-kpis { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-redesign .st-kpi { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-right: 1px solid var(--border-base); }
.stats-redesign .st-kpi:last-child { border-right: 0; }
.stats-redesign .st-kpi-label { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.stats-redesign .st-kpi-value { font: var(--fw-medium) 22px/30px var(--font-sans); color: var(--fg-base); }
.stats-redesign .st-kpi-trend { font: var(--fw-medium) 11px/16px var(--font-sans); color: var(--tag-green-fg); }
.stats-redesign .st-kpi-trend:empty { display: none; }

/* ── Chart cards ────────────────────────────────────────────────────── */
.stats-redesign .row.st-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.stats-redesign .st-col { width: 100%; padding: 0; }
.stats-redesign .st-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); display: flex; flex-direction: column; height: 100%; }
.stats-redesign .st-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-base); }
.stats-redesign .st-card-heading { display: flex; flex-direction: column; gap: 2px; }
.stats-redesign .st-card-heading h3 { margin: 0; font: var(--fw-medium) 14px/20px var(--font-sans); color: var(--fg-base); }
.stats-redesign .st-card-heading small { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.stats-redesign select.st-select { margin-left: auto; width: 190px; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.stats-redesign select.st-select-wide { width: 250px; }

/* ── Tab panes: Bootstrap toggles .active, we own layout + visibility ─ */
.stats-redesign .st-chart-pane { display: none; }
.stats-redesign .st-chart-pane.active { display: flex; align-items: center; gap: 22px; padding: 18px; }

/* ── SVG donut ring (Stückzahlen / Stornoquote) ───────────────────────── */
.stats-redesign .st-ring-box { position: relative; flex: none; width: 168px; height: 168px; }
.stats-redesign .st-ring-svg { display: block; width: 100%; height: 100%; }
.stats-redesign .st-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; pointer-events: none; }
.stats-redesign .st-ring-value { font: var(--fw-medium) 22px/28px var(--font-sans); color: var(--fg-base); }
.stats-redesign .st-ring-label { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }

/* ── Ring legend rows (dot · label · value · share %) ─────────────────── */
.stats-redesign .st-legend { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.stats-redesign .st-legend-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-base); font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }
.stats-redesign .st-legend-row:last-child { border-bottom: 0; }
.stats-redesign .st-legend-dot { flex: none; width: 9px; height: 9px; border-radius: var(--radius-full); display: inline-block; }
.stats-redesign .st-legend-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-redesign .st-legend-value { flex: none; font: var(--fw-medium) 13px/20px var(--font-mono); color: var(--fg-base); }
.stats-redesign .st-legend-pct { flex: none; width: 46px; text-align: right; font: var(--fw-regular) 12px/18px var(--font-mono); color: var(--fg-muted); }

/* ── Umsatzübersicht: series toggle + SVG line/area chart ─────────────── */
.stats-redesign .st-series-toggle { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.stats-redesign .st-series-btn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border: 1px solid var(--border-base); border-radius: var(--radius-full); background: var(--bg-base); font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.stats-redesign .st-series-btn.is-off { color: var(--fg-disabled); }
.stats-redesign .st-series-btn .st-series-dot { width: 9px; height: 9px; border-radius: var(--radius-full); display: inline-block; }
.stats-redesign .st-revenue-chart-wrap { position: relative; padding: 18px; }
.stats-redesign .st-revenue-svg { display: block; width: 100%; height: auto; }
.stats-redesign .st-revenue-grid { stroke: var(--border-base); stroke-width: 1; }
.stats-redesign .st-revenue-axis { font: var(--fw-regular) 11px/1 var(--font-mono); fill: var(--fg-muted); }
.stats-redesign .st-revenue-area { opacity: .14; }
.stats-redesign .st-revenue-hit { fill: transparent; cursor: crosshair; }
.stats-redesign .st-revenue-tooltip { position: absolute; top: 12px; z-index: 5; min-width: 190px; padding: 10px 12px; background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-flyout); pointer-events: none; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; }
.stats-redesign .st-tooltip-month { font: var(--fw-medium) 12px/18px var(--font-mono); color: var(--fg-base); }
.stats-redesign .st-tooltip-row { display: flex; align-items: center; gap: 8px; }
.stats-redesign .st-tooltip-dot { flex: none; width: 9px; height: 9px; border-radius: var(--radius-full); display: inline-block; }
.stats-redesign .st-tooltip-label { min-width: 0; flex: 1; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.stats-redesign .st-tooltip-value { flex: none; font: var(--fw-medium) 12px/18px var(--font-mono); color: var(--fg-base); }
.stats-redesign .st-tooltip-total { padding-top: 6px; border-top: 1px solid var(--border-base); }
.stats-redesign .st-revenue-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border-base); }
.stats-redesign .st-rev-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-right: 1px solid var(--border-base); }
.stats-redesign .st-rev-kpi:last-child { border-right: 0; }
.stats-redesign .st-rev-kpi .st-kpi-value { font: var(--fw-medium) 15px/22px var(--font-sans); color: var(--fg-base); }

/* ── Responsive token flips ────────────────────────────────────────── */
@media (max-width: 1023px) {
	.stats-redesign .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats-redesign .st-kpi:nth-child(2) { border-right: 0; }
}
@media (max-width: 899px) {
	.stats-redesign .row.st-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.stats-redesign .st-card-head { flex-wrap: wrap; }
	.stats-redesign select.st-select,
	.stats-redesign select.st-select-wide { margin-left: 0; width: 100%; }
	.stats-redesign .st-series-toggle { margin-left: 0; }
}
@media (max-width: 639px) {
	.stats-redesign .st-kpis { grid-template-columns: minmax(0, 1fr); }
	.stats-redesign .st-kpi { border-right: 0; border-bottom: 1px solid var(--border-base); }
	.stats-redesign .st-kpi:last-child { border-bottom: 0; }
	.stats-redesign .st-ring-box { width: 120px; height: 120px; }
	.stats-redesign .st-chart-pane.active { gap: 14px; padding: 14px; }
	.stats-redesign .st-revenue-kpis { grid-template-columns: minmax(0, 1fr); }
	.stats-redesign .st-rev-kpi { border-right: 0; border-bottom: 1px solid var(--border-base); }
	.stats-redesign .st-rev-kpi:last-child { border-bottom: 0; }
}
/* end STATS REDESIGN */

/* INVITERESELLERPUBLIC REDESIGN — segmented Anrede toggle + fax disclosure follow-up (same pattern as INVITERESELLER) */
.inviteresellerpublic-redesign select.irp-visually-hidden-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; opacity: 0; }
.inviteresellerpublic-redesign .irp-segmented { display: flex; gap: 8px; }
.inviteresellerpublic-redesign .irp-segmented-btn { flex: 1; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.inviteresellerpublic-redesign .irp-segmented-btn:hover { background: var(--bg-subtle-hover); }
.inviteresellerpublic-redesign .irp-segmented-btn.is-active { border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover); font-weight: var(--fw-medium); }
.inviteresellerpublic-redesign .irp-add-fax { align-self: flex-start; padding: 0; border: 0; background: transparent; font: var(--fw-regular) var(--txt-small)/1 var(--font-sans); color: var(--fg-interactive); cursor: pointer; }
.inviteresellerpublic-redesign .irp-add-fax:hover { color: var(--fg-interactive-hover); text-decoration: underline; }
/* end INVITERESELLERPUBLIC REDESIGN follow-up */

/* ═══════════════════════════════════════════════════════════════════════
   SMARTSTATS REDESIGN
   Three Chart.js v1 doughnuts (Teamumsatz/Eigenumsatz/Stornoquote), mounted
   both standalone and nested inside structure's detail panel. Chart.js
   draws to <canvas> so segment colors are resolved from tokens in JS
   (app/smartstats.js), not here — this block only skins the surrounding
   cards + the legend <ul> Chart.js injects into each -legend div. Tokens
   only. Responsive via flips at 1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.smartstats-redesign { font-family: var(--font-sans); }
.smartstats-redesign .ss-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.smartstats-redesign .ss-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.smartstats-redesign .ss-card-head { padding: 12px 16px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.smartstats-redesign .ss-card-body { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.smartstats-redesign .ss-donut-wrap { position: relative; width: 128px; height: 128px; }
.smartstats-redesign .ss-donut-wrap canvas { width: 128px !important; height: 128px !important; }
.smartstats-redesign .ss-donut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12px; pointer-events: none; }
.smartstats-redesign .ss-donut-center small { font: var(--fw-medium) 12px/16px var(--font-sans); color: var(--fg-base); }
.smartstats-redesign .ss-legend { width: 100%; }
.smartstats-redesign .ss-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.smartstats-redesign .ss-legend li { display: flex; align-items: center; gap: 8px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.smartstats-redesign .ss-legend li span { flex: none; width: 9px; height: 9px; border-radius: 9999px; }

@media (max-width: 1023px) {
	.smartstats-redesign .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.smartstats-redesign .ss-grid { grid-template-columns: minmax(0, 1fr); }
}
/* end SMARTSTATS REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   STATSOVERVIEW REDESIGN
   Single Chart.js v1 line chart, mounted standalone and nested inside both
   structure's detail panel AND the (separately redesigned) stats module.
   The <h3>Umsatzübersicht</h3> tag is kept intentionally (not swapped for
   a div) — the stats module's own CSS targets that literal tag from the
   outside; changing it would silently break that screen's title styling.
   Tokens only. Responsive via flips at 1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.statsoverview-redesign { font-family: var(--font-sans); }
.statsoverview-redesign .so-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.statsoverview-redesign .so-card h3 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.statsoverview-redesign .so-card-body { padding: 16px; }
.statsoverview-redesign canvas.egon-chart { width: 100% !important; height: auto !important; max-width: 100%; }
.statsoverview-redesign .so-legend ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.statsoverview-redesign .so-legend li { display: flex; align-items: center; gap: 8px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.statsoverview-redesign .so-legend li span { flex: none; width: 9px; height: 9px; border-radius: 9999px; }
/* end STATSOVERVIEW REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   REGISTERRESELLER REDESIGN v2 (Mitarbeiter anlegen)
   Supersedes the REGISTERRESELLER REDESIGN block above (left untouched —
   CSS discipline requires this file to stay append-only; that block is now
   dead and a /cleanup candidate). Rebuilt to match the mockup exactly: each
   logical section is its own boxed card (not one card with divider lines),
   two interactive toggles (USt.-pflichtig, Kontoinhaber = Mitarbeiter) show/
   hide real partial-rendered fields via :has() targeting — no partial file
   touched, no duplicate `name` attributes anywhere (duplicating a partial
   include to isolate a sub-section was considered and rejected: it would
   duplicate `name="iban"` etc. across two hidden/visible copies, which is
   exactly the kind of duplicate-field shape that crashed formValidation.js
   earlier this session). Tokens only. Responsive via flips at
   1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.registerreseller-redesign { --rr-cols: repeat(3, minmax(0, 1fr)); font-family: var(--font-sans); color: var(--fg-base); }
.registerreseller-redesign .rr-cols { display: grid; grid-template-columns: var(--rr-cols); gap: 20px; align-items: start; }
.registerreseller-redesign .rr-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.registerreseller-redesign .rr-hidden { display: none !important; }

/* Bootstrap 5's own .text-danger is `color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity))
   !important`, and components-bs5.css maps --bs-danger-rgb straight to --fg-error (a hex string,
   not an "r,g,b" triplet) — the rgba() call is invalid, so every .text-danger on the whole app
   silently falls back to inherited (grey) text instead of red. Root-cause fix belongs in that
   shared token bridge (out of this screen's 4-file scope); override it here, scoped, so every
   required-field asterisk on this screen actually renders red as designed. */
.registerreseller-redesign .text-danger { color: var(--fg-error) !important; }

.registerreseller-redesign .rr-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.registerreseller-redesign .rr-card-head { display: flex; align-items: center; gap: 10px; }
.registerreseller-redesign .rr-card-head h3,
.registerreseller-redesign .rr-card-title-only { margin: 0; font: var(--fw-medium) 16px/24px var(--font-sans); color: var(--fg-base); }
.registerreseller-redesign .rr-required-hint { margin-left: auto; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.registerreseller-redesign .rr-header-check { margin-left: auto; display: flex; align-items: center; gap: 8px; cursor: pointer; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }
.registerreseller-redesign .rr-header-check input[type="checkbox"] { position: static; width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }
.registerreseller-redesign .rr-stack { display: flex; flex-direction: column; gap: 12px; }

/* ── Field grid (Anrede/Titel/Name/Geburtstag, Land/PLZ/Ort/Straße) ───── */
.registerreseller-redesign .rr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.registerreseller-redesign .rr-grid2 .form-group { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.registerreseller-redesign .rr-grid2 .form-group:has(input[name="birthday"]),
.registerreseller-redesign .rr-grid2 .form-group:has(select[name="country_id"]),
.registerreseller-redesign .rr-grid2 .form-group:has(.row.input-row) { grid-column: span 2; }
.registerreseller-redesign .rr-grid2 .row.input-row:has(input[name="street_number"]) > [class*="col-"]:last-child { flex: 0 0 84px; }
.registerreseller-redesign .rr-subhead { display: flex; align-items: center; gap: 10px; }
.registerreseller-redesign .rr-subhead span { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap; }
.registerreseller-redesign .rr-subhead::after { content: ""; flex: 1; height: 1px; background: var(--border-base); }

/* ── USt.-pflichtig conditional (Steuernummer/Finanzamt vs. info box) ── */
.registerreseller-redesign .rr-ust-fields .rr-grid2 .form-group { grid-column: span 1; }

/* ── Kontoinhaber = Mitarbeiter: hide the Bank partial's own identity/
   address fields (by name, not by position) while it's checked ────── */
.registerreseller-redesign .rr-bank-fields.rr-inhaber-gleich .form-group:has(input[name="account_holder_company"]),
.registerreseller-redesign .rr-bank-fields.rr-inhaber-gleich .form-group:has(select[name="account_holder_salutation"]),
.registerreseller-redesign .rr-bank-fields.rr-inhaber-gleich .form-group:has(input[name="account_holder_first_name"]),
.registerreseller-redesign .rr-bank-fields.rr-inhaber-gleich .form-group:has(select[name="bank_country_id"]),
.registerreseller-redesign .rr-bank-fields.rr-inhaber-gleich .form-group:has(input[name="bank_zip"]),
.registerreseller-redesign .rr-bank-fields.rr-inhaber-gleich .form-group:has(select[name="bank_street"]) { display: none; }
/* The mockup has no "Kontoinhaber/Anschrift/Bankverbindung" section labels inside
   this card at all — the card title already says what it is. Hide the partial's
   own BS3 .form-group-seperator + <hr> dividers unconditionally to match 1:1. */
.registerreseller-redesign .rr-bank-fields .form-group-seperator { display: none; }
.registerreseller-redesign .rr-bank-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.registerreseller-redesign .rr-bank-fields > * { grid-column: span 2; }
.registerreseller-redesign .rr-bank-fields .form-group { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.registerreseller-redesign .rr-bank-fields .row.input-row { display: flex; gap: var(--space-sm); margin: 0; }
.registerreseller-redesign .rr-bank-fields .row.input-row > [class*="col-"] { flex: 1; min-width: 0; padding: 0; }
/* Mockup pairs BIC + BLZ side by side, then Name der Bank + Konto full-width below
   (partial's own DOM order is BIC, Name der Bank, BLZ, Konto — reorder visually
   only, no partial file touched). */
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="swift"]) { grid-column: span 1; order: 1; }
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="bank_identifier_code"]) { grid-column: span 1; order: 2; }
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="bank_name"]) { order: 3; }
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="account_no"]) { order: 4; }
/* the partial's own static IBAN callout is superseded by the JS-driven 3-state .rr-iban-hint below */
.registerreseller-redesign .rr-bank-fields #iban-calc-info { display: none; }
.registerreseller-redesign .rr-iban-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); }
.registerreseller-redesign .rr-iban-hint .fa { flex: none; margin-top: 1px; }
.registerreseller-redesign .rr-iban-hint span:last-child { font: var(--fw-regular) 12px/18px var(--font-sans); text-wrap: pretty; }

/* IBAN field was sharing one row with both "prüfen"/"berechnen" buttons in a
   340px-wide card — left ~130px for the input, too narrow for a full IBAN.
   Wrap the input onto its own full-width row; both buttons flow to a second
   row beneath it (operator-approved fix). */
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="iban"]) .input-group {
	flex-wrap: wrap; height: auto; gap: 8px;
}
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="iban"]) .input-group .form-control {
	flex: 1 1 100%; height: 36px; border-radius: var(--radius-md) !important; margin: 0 !important;
}
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="iban"]) .input-group .input-group-text {
	flex: 0 0 auto; border-radius: var(--radius-md) !important; margin: 0 !important;
}

/* "prüfen" (CORE_checkIban) and "berechnen" (calculateiban) both render as
   .input-group-text.btn.btn-primary from the shared Bank.html partial — no
   markup distinction to key off. Match "berechnen" by its data-target instead
   of touching the partial, so only this screen gets the reference's neutral
   (non-primary) look for it; "prüfen" keeps the existing primary style above. */
.registerreseller-redesign .rr-bank-fields [data-target$=":calculateiban"].input-group-text {
	border-color: var(--border-strong); background: var(--bg-base); color: var(--fg-base);
}
.registerreseller-redesign .rr-bank-fields [data-target$=":calculateiban"].input-group-text:hover {
	background: var(--bg-subtle-hover); border-color: var(--fg-muted);
}

/* "automatisch" tag next to BLZ/Name der Bank/Konto — same pill used for
   "Netzbetreiber" in the Tarifrechner reference. Injected next to the label
   text by app/registerreseller.js, right after the IBAN hint is wired up. */
.registerreseller-redesign .rr-auto-tag {
	display: inline-flex; align-items: center; height: 16px; padding: 0 5px;
	border-radius: var(--radius-sm); background: var(--tag-neutral-bg); color: var(--tag-neutral-fg);
	font: var(--fw-regular) 11px/1 var(--font-sans);
}
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="bank_identifier_code"]) > label,
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="bank_name"]) > label,
.registerreseller-redesign .rr-bank-fields .form-group:has(input[name="account_no"]) > label {
	display: flex; align-items: center; gap: 6px;
}

/* ── Generic form controls shared by every card on this screen ────────── */
.registerreseller-redesign .form-group > label,
.registerreseller-redesign .form-group > label.form-label { margin: 0; padding: 0; width: 100%; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.registerreseller-redesign .form-control,
.registerreseller-redesign select.egon-embedded-form-field,
.registerreseller-redesign input.egon-embedded-form-field,
.registerreseller-redesign textarea.egon-embedded-form-field { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) var(--txt-small)/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.registerreseller-redesign select.form-control { padding: 0 8px; }
.registerreseller-redesign textarea.form-control { height: 76px; padding: 8px 10px; font: var(--fw-regular) var(--txt-small)/20px var(--font-sans); resize: vertical; }
.registerreseller-redesign .form-control:focus,
.registerreseller-redesign select.form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.registerreseller-redesign .form-control[disabled],
.registerreseller-redesign .form-control[readonly] { background: var(--bg-disabled); color: var(--fg-subtle); }
.registerreseller-redesign .btn-primary.input-group-text { height: 36px; padding: 0 12px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-interactive); cursor: pointer; white-space: nowrap; }
.registerreseller-redesign .btn-primary.input-group-text:hover { background: var(--bg-highlight); }
.registerreseller-redesign .input-group-text.btn:not(.btn-primary) { height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; white-space: nowrap; }
.registerreseller-redesign .input-group-text.btn:not(.btn-primary):hover { background: var(--bg-subtle-hover); border-color: var(--fg-muted); }
.registerreseller-redesign .rr-help { margin: 0; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.registerreseller-redesign .rr-help strong { color: var(--fg-base); font-weight: var(--fw-medium); }

/* ── Boxed, icon-less phone/fax/mobile rows (Geschäftlicher Kontakt +
   Kontaktdaten cards) ─────────────────────────────────────────────────── */
.registerreseller-redesign .rr-contact-boxed .row.input-row { gap: 0; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-base); }
.registerreseller-redesign .rr-contact-boxed .row.input-row > [class*="col-"]:first-child { flex: 0 0 88px; border-right: 1px solid var(--border-base); }
.registerreseller-redesign .rr-contact-boxed .row.input-row .form-control { border: 0 !important; border-radius: 0 !important; height: 100% !important; }
.registerreseller-redesign .rr-contact-boxed .input-addon .input-group { border: 0; height: 100%; }
.registerreseller-redesign .rr-contact-boxed .input-addon .input-group-text { display: none; }

/* ── Info boxes ─────────────────────────────────────────────────────── */
.registerreseller-redesign .rr-info-box { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-subtle); }
.registerreseller-redesign .rr-info-box .fa { flex: none; margin-top: 1px; color: var(--fg-muted); }
.registerreseller-redesign .rr-info-box span:last-child { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); text-wrap: pretty; }
.registerreseller-redesign .rr-info-box--standalone { flex-direction: column; gap: 8px; padding: 16px; background: var(--bg-highlight); border: 1px solid var(--bg-highlight-hover); }
.registerreseller-redesign .rr-info-box--standalone .rr-info-box-head { display: flex; align-items: center; gap: 8px; }
.registerreseller-redesign .rr-info-box--standalone .rr-info-box-head .fa { margin-top: 0; color: var(--fg-interactive); }
.registerreseller-redesign .rr-info-box--standalone .rr-info-box-head span:last-child { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-interactive-hover); }
.registerreseller-redesign .rr-info-box--standalone > span:last-child { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); text-wrap: pretty; }

/* ── Sticky footer ──────────────────────────────────────────────────── */
.registerreseller-redesign .rr-form-footer { position: sticky; bottom: 16px; z-index: 20; margin-top: 4px; height: 56px; padding: 0 20px; display: flex; align-items: center; gap: 12px; background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-flyout); }
.registerreseller-redesign .rr-progress { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px; background: var(--bg-subtle-hover); font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-subtle); }
.registerreseller-redesign .rr-footer-hint { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.registerreseller-redesign .rr-footer-hint.is-error { color: var(--fg-error); }
.registerreseller-redesign .btn.rr-reset { margin-left: auto; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-base); cursor: pointer; }
.registerreseller-redesign .btn.rr-reset:hover { background: var(--bg-subtle-hover); }
.registerreseller-redesign .btn.rr-submit { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-interactive); font: var(--fw-medium) var(--txt-small)/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; }
.registerreseller-redesign .btn.rr-submit:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }

/* ── Responsive token flips ────────────────────────────────────────── */
@media (max-width: 1023px) {
	.registerreseller-redesign { --rr-cols: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.registerreseller-redesign { --rr-cols: minmax(0, 1fr); }
	.registerreseller-redesign .rr-form-footer { position: static; height: auto; flex-direction: column; align-items: stretch; padding: 14px; gap: 8px; }
	.registerreseller-redesign .btn.rr-reset { margin-left: 0; }
}
/* end REGISTERRESELLER REDESIGN v2 */

/* ═══════════════════════════════════════════════════════════════════════
   SETTLEMENT REDESIGN (Provisionsabrechnung / "Abrechnungen")
   Results screen (view/settlement, view/settlement/grid). Native BS3-compat
   markup (.table/.table-striped, .pagination via the bootstrapPaginator BS3
   widget — reused as-is, also for the page-size picker) restyled with
   design tokens (colors_and_type.css). The Zahlung status pill, Zeitraum
   column and Betrag color are computed client-side in app/settlement.js
   (settlementZahlungKlasse/-Text/-Titel, settlementZeitraum,
   settlementBetragKlasse) from fields the backend already returns
   (dta, dta_date, prov_price, billing_date) — no new backend dependency.
   Every per-row download condition (PDF/Excel/Storno) is unchanged from
   the legacy template, only the buttons' look changes. Tokens only — no
   hardcoded brand hex. Responsive via breakpoints 1023 / 899 / 767 / 639,
   matching ratecalc/order/orderstatuschanges.
   ═══════════════════════════════════════════════════════════════════════ */

.settlement-redesign {
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.settlement-redesign *,
.settlement-redesign *::before,
.settlement-redesign *::after { box-sizing: border-box; }

.settlement-redesign {
	--sr-cols-4: repeat(4, minmax(0, 1fr));
	--sr-cols-3: repeat(3, minmax(0, 1fr));
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Page head ───────────────────────────────────────────────────────── */
.settlement-redesign .sr-page-title { margin: 0; font: var(--fw-medium) var(--txt-large)/var(--lh-large) var(--font-sans); color: var(--fg-base); }
.settlement-redesign .sr-page-sub { font: var(--fw-regular) var(--txt-xsmall)/var(--lh-xsmall) var(--font-sans); color: var(--fg-muted); margin-top: 2px; }

/* ── KPI tiles (Summe aller Abrechnungen / Noch offen / Letzte Abrechnung) ── */
.settlement-redesign .sr-kpi-grid { display: grid; grid-template-columns: var(--sr-cols-3); gap: 12px; }
.settlement-redesign .sr-kpi-tile {
	display: flex; flex-direction: column; gap: 6px;
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 16px 20px;
}
.settlement-redesign .sr-kpi-label { display: flex; align-items: center; gap: 7px; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.settlement-redesign .sr-kpi-dot { flex: none; width: 7px; height: 7px; border-radius: 9999px; }
.settlement-redesign .sr-kpi-dot--orange { background: var(--tag-orange-fg); }
.settlement-redesign .sr-kpi-value { font: var(--fw-medium) 24px/30px var(--font-sans); color: var(--fg-base); font-variant-numeric: tabular-nums; }
.settlement-redesign .sr-kpi-sub { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }

/* ── Filter card (grouped fields + footer, same recipe as .order-redesign) ── */
.settlement-redesign .sr-filter-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 20px; display: flex; flex-direction: column; gap: 18px;
}
.settlement-redesign .sr-filter-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.settlement-redesign .sr-group-head {
	display: flex; align-items: center; gap: 10px;
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap;
}
.settlement-redesign .sr-group-head::after { content: ""; flex: 1; height: 1px; background: var(--border-base); }
.settlement-redesign .sr-group-grid { display: grid; grid-template-columns: var(--sr-cols-4); gap: 12px; }
.settlement-redesign .sr-field-label {
	display: block; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin-bottom: 5px;
}
.settlement-redesign .form-group { margin: 0; min-width: 0; }
.settlement-redesign .form-control,
.settlement-redesign select.form-control {
	width: 100%; height: 36px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-shadow: none; appearance: auto;
}
.settlement-redesign select.form-control { padding: 0 8px; }
.settlement-redesign .form-control:focus,
.settlement-redesign select.form-control:focus {
	outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring);
}
.settlement-redesign .form-control::placeholder { color: var(--fg-muted); }

.settlement-redesign .sr-filter-footer {
	display: flex; align-items: center; justify-content: flex-end;
	padding-top: 16px; border-top: 1px solid var(--border-base);
}

/* ── Buttons (native .btn/.btn-secondary, same recipe as .order-redesign) ── */
.settlement-redesign .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent;
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; float: none;
}
.settlement-redesign .btn-secondary { background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base); }
.settlement-redesign .btn-secondary:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }

.settlement-redesign .sr-card {
	background: var(--bg-base);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest);
	overflow: hidden;
}

.settlement-redesign .sr-card-head {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--border-base);
	background: var(--bg-subtle);
}
.settlement-redesign .sr-card-title {
	font: var(--fw-medium) 13px/20px var(--font-sans);
	color: var(--fg-base);
}

.settlement-redesign .sr-table-wrap { overflow-x: auto; }
.settlement-redesign .sr-table {
	width: 100%; min-width: 760px; margin: 0; border-collapse: collapse; table-layout: fixed;
	--bs-table-bg: var(--bg-base);
	--bs-table-striped-bg: var(--bg-subtle);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.settlement-redesign .sr-table thead th {
	box-sizing: border-box; text-align: left; padding: 8px 8px 8px 20px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.settlement-redesign .sr-table thead th:first-child { padding-left: 20px; }
.settlement-redesign .sr-table thead th.sr-th-right { text-align: right; padding-right: 20px; }
.settlement-redesign .sr-table col.sr-col-nummer  { width: 150px; }
.settlement-redesign .sr-table col.sr-col-datum   { width: 110px; }
.settlement-redesign .sr-table col.sr-col-betrag  { width: 110px; }
.settlement-redesign .sr-table col.sr-col-zeitraum{ width: auto; }
.settlement-redesign .sr-table col.sr-col-zahlung { width: 160px; }
.settlement-redesign .sr-table col.sr-col-downloads{ width: 190px; }
.settlement-redesign .sr-table tbody td {
	box-sizing: border-box; padding: 11px 8px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: middle;
}
.settlement-redesign .sr-table tbody td:first-child { padding-left: 20px; }
.settlement-redesign .sr-table tbody td:last-child { padding-right: 20px; }
.settlement-redesign .sr-table tbody tr:last-child td { border-bottom: 0; }
.settlement-redesign .sr-table td.sr-td-right { text-align: right; }
.settlement-redesign .sr-table td.sr-td-mono { font-family: var(--font-mono); color: var(--fg-subtle); white-space: nowrap; }
.settlement-redesign .sr-table td.sr-td-muted { color: var(--fg-subtle); white-space: nowrap; }

.settlement-redesign .sr-nummer { display: inline-flex; align-items: center; gap: 8px; }
.settlement-redesign .sr-nummer > span:first-child { font: var(--fw-medium) 13px/20px var(--font-sans); }

.settlement-redesign .sr-amount { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
.settlement-redesign .sr-amount--neg { color: var(--fg-error); }
.settlement-redesign .sr-amount--zero { color: var(--fg-muted); }

/* Storno pill (Abrechnungsnr. column) */
.settlement-redesign .sr-storno-pill {
	display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
	border-radius: 9999px; background: var(--tag-red-bg); color: var(--tag-red-fg);
	font: var(--fw-medium) 11px/1 var(--font-sans);
}

/* Zahlung status pill — shape only, class/text driven client-side, see note above */
.settlement-redesign .sr-pill {
	display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
	border-radius: 9999px; font: var(--fw-medium) 12px/1 var(--font-sans); white-space: nowrap;
}
.settlement-redesign .sr-pill-dot { width: 6px; height: 6px; flex: none; border-radius: 9999px; }
.settlement-redesign .sr-pill--green   { background: var(--tag-green-bg);   color: var(--tag-green-fg); }
.settlement-redesign .sr-pill--green   .sr-pill-dot { background: var(--tag-green-fg); }
.settlement-redesign .sr-pill--orange  { background: var(--tag-orange-bg);  color: var(--tag-orange-fg); }
.settlement-redesign .sr-pill--orange  .sr-pill-dot { background: var(--tag-orange-fg); }
.settlement-redesign .sr-pill--neutral { background: var(--tag-neutral-bg); color: var(--tag-neutral-fg); }
.settlement-redesign .sr-pill--neutral .sr-pill-dot { background: var(--fg-muted); }

/* Download pill-buttons — same PDF/Excel/Storno conditions as before, restyled only */
.settlement-redesign .sr-downloads { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
.settlement-redesign .sr-dl-btn {
	display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); font: var(--fw-medium) 12px/1 var(--font-sans);
	color: var(--fg-base); white-space: nowrap;
}
.settlement-redesign .sr-dl-btn:hover { background: var(--bg-highlight); border-color: var(--border-interactive); color: var(--fg-interactive-hover); }
.settlement-redesign .sr-dl-btn .fa { margin: 0; }
.settlement-redesign .sr-dl-btn--pdf .fa { color: var(--fg-error); }
.settlement-redesign .sr-dl-btn--xls .fa { color: var(--tag-green-fg); }
.settlement-redesign .sr-dl-btn--storno {
	border-color: var(--tag-red-bg-hover); background: var(--tag-red-bg); color: var(--tag-red-fg);
}
.settlement-redesign .sr-dl-btn--storno:hover { background: var(--tag-red-bg-hover); color: var(--tag-red-fg); }
.settlement-redesign .sr-dl-btn--storno .fa { color: var(--tag-red-fg); }

/* Empty state */
.settlement-redesign .sr-empty {
	padding: 64px 20px 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.settlement-redesign .sr-empty-icon {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border-radius: 9999px; background: var(--bg-subtle); border: 1px solid var(--border-base); color: var(--fg-muted);
	font-size: 18px;
}
.settlement-redesign .sr-empty-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.settlement-redesign .sr-empty-text { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); max-width: 380px; }

/* ── Pagination + page-size bar (BS3 .pagination widget restyle, same treatment as orderstatuschanges) ── */
.settlement-redesign .sr-pagination-bar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding: 12px 20px; border-top: 1px solid var(--border-base); background: var(--bg-subtle);
}
.settlement-redesign .sr-pagination-bar .float-start,
.settlement-redesign .sr-pagination-bar .float-end { float: none !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settlement-redesign .sr-pagesize-label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); white-space: nowrap; }
.settlement-redesign .pagination { display: flex; align-items: center; gap: 4px; margin: 0; flex-wrap: wrap; }
.settlement-redesign .pagination > li { list-style: none; }
.settlement-redesign .pagination > li > a {
	display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); text-decoration: none; cursor: pointer;
}
.settlement-redesign .pagination > li > a:hover { background: var(--bg-subtle-hover); text-decoration: none; }
.settlement-redesign .pagination > li.active > a {
	background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); cursor: default;
}
.settlement-redesign .pagination > li.disabled > a { color: var(--fg-disabled); cursor: default; pointer-events: none; }

/* ── Responsive token flips (KPI tiles + filter card) ────────────────── */
@media (max-width: 1023px) {
	.settlement-redesign { --sr-cols-4: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.settlement-redesign { --sr-cols-3: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.settlement-redesign { --sr-cols-4: minmax(0, 1fr); --sr-cols-3: minmax(0, 1fr); }
	.settlement-redesign .sr-filter-card { padding: 16px; }
	.settlement-redesign .sr-pagination-bar { flex-direction: column; align-items: stretch; }
	.settlement-redesign .sr-pagination-bar .float-end { justify-content: space-between; }
}
@media (max-width: 639px) {
	.settlement-redesign .btn { min-height: 42px; }
}
/* end SETTLEMENT REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NACHRICHTEN LIST REDESIGN (tt_news LIST view, page "News-Archiv")
   Custom tt_news marker template, not the Handlebars SPA — see
   fileadmin/templates/page.de/extensions/tt_news/nachrichten-list.html.
   Filter/results/pagination vocabulary borrowed from customer-redesign
   (.cu-filter-card/.cu-results-card/.pagination), the chip pattern from
   order-redesign (.or-chip), the search-input-group from structure-redesign
   (.st-search), and the card/thumb/tag pattern from news-redesign (.nw-*)
   — extended here, not duplicated wholesale. Tokens only, never hex.
   Responsive via token flips at 1023 / 899 / 767 / 639.
   ═══════════════════════════════════════════════════════════════════════ */

.nachrichten-list-redesign { font-family: var(--font-sans); color: var(--fg-base); }
.nachrichten-list-redesign *,
.nachrichten-list-redesign *::before,
.nachrichten-list-redesign *::after { box-sizing: border-box; }

.nachrichten-list-redesign .nl-page { display: flex; flex-direction: column; gap: 16px; }

/* ── Page header ─────────────────────────────────────────────────────── */
.nachrichten-list-redesign .nl-page-head {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px 20px; background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
}
.nachrichten-list-redesign .nl-page-title { margin: 0; font: var(--fw-medium) 18px/26px var(--font-sans); color: var(--fg-base); }
.nachrichten-list-redesign .nl-mark-all-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); cursor: pointer;
}
.nachrichten-list-redesign .nl-mark-all-btn:hover { background: var(--bg-subtle-hover); }

.nachrichten-list-redesign .nl-results-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	display: flex; flex-direction: column;
}

/* ── Filter row ──────────────────────────────────────────────────────── */
.nachrichten-list-redesign .nl-filter-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-base); flex-wrap: wrap; }
.nachrichten-list-redesign .nl-search { position: relative; flex: 1 1 220px; min-width: 0; display: flex; }
.nachrichten-list-redesign .nl-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; color: var(--fg-muted); pointer-events: none; }
.nachrichten-list-redesign .nl-search input {
	width: 100%; height: 36px; padding: 0 12px 0 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base);
}
.nachrichten-list-redesign select.nl-select {
	flex: none; height: 36px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base); appearance: auto;
}
.nachrichten-list-redesign .nl-cat-select { width: 220px; }
.nachrichten-list-redesign .nl-time-select { width: 152px; }
.nachrichten-list-redesign input:focus-visible,
.nachrichten-list-redesign select:focus-visible,
.nachrichten-list-redesign button:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-color: var(--border-interactive); }
.nachrichten-list-redesign .nl-unread-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; cursor: pointer; white-space: nowrap; }
.nachrichten-list-redesign .nl-unread-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--bg-interactive); }
.nachrichten-list-redesign .nl-unread-toggle span { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }

/* ── Result meta row + active-filter chips (chip pattern per order-redesign) ── */
.nachrichten-list-redesign .nl-meta-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); flex-wrap: wrap; }
.nachrichten-list-redesign .nl-hit-text { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.nachrichten-list-redesign .nl-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.nachrichten-list-redesign .nl-chip {
	display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px 0 9px; border-radius: 9999px;
	background: var(--bg-highlight); border: 1px solid var(--bg-highlight-hover); font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--fg-interactive-hover); white-space: nowrap;
}
.nachrichten-list-redesign .nl-chip a { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 9999px; color: inherit; }
.nachrichten-list-redesign .nl-clear-link { margin-left: auto; border: 0; background: transparent; padding: 0; font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive); cursor: pointer; }

/* ── Card grid (extends news-redesign's .nw-* card vocabulary) ───────── */
.nachrichten-list-redesign .nl-grid { padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nachrichten-list-redesign .nl-card {
	display: flex; flex-direction: column; border: 1px solid var(--border-base); border-radius: var(--radius-lg);
	background: var(--bg-base); overflow: hidden;
}
.nachrichten-list-redesign .nl-card:hover { border-color: var(--border-interactive); box-shadow: var(--shadow-card-hover); }
/* The native tt_news ###LINK_ITEM### wrap renders a plain <a> around the card's
   whole inner markup (head + body) — this repo's Bootstrap 5 base already resets
   anchor color/underline sitewide, but display:contents keeps it out of the flex
   layout so .nl-card-head/.nl-card-body lay out as direct flex children of .nl-card. */
/* Image/title/readmore are each their own native ###LINK_ITEM### <a> (NEWS_SUBHEADER
   sits between them, unwrapped, since it can carry its own "[mehr]" link and nested
   <a> tags are invalid HTML) — display:contents keeps each anchor out of the flex
   layout so its content lays out as a direct child of the containing element. */
.nachrichten-list-redesign .nl-thumb > a,
.nachrichten-list-redesign .nl-title > a,
.nachrichten-list-redesign .nl-readmore > a { display: contents; color: inherit; text-decoration: none; }
.nachrichten-list-redesign .nl-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-base); }
.nachrichten-list-redesign .nl-thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 104px; height: 40px; border-radius: var(--radius-md); background: var(--bg-subtle); overflow: hidden; }
.nachrichten-list-redesign .nl-thumb img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.nachrichten-list-redesign .nl-date { margin-left: auto; flex: none; font: var(--fw-regular) 12px/18px var(--font-mono); color: var(--fg-muted); }
.nachrichten-list-redesign .nl-unread-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-md); cursor: pointer; color: var(--fg-interactive); }
.nachrichten-list-redesign .nl-unread-dot .nl-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--bg-interactive); }
/* Read = dot disappears (not just recolors) — keeps the same click hit-area so it can
   still be toggled back to unread. */
.nachrichten-list-redesign .nl-unread-dot.is-read .nl-dot { visibility: hidden; }
.nachrichten-list-redesign .nl-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.nachrichten-list-redesign .nl-title { font: var(--fw-medium) 14px/20px var(--font-sans); color: var(--fg-base); height: 60px; overflow: hidden; }
.nachrichten-list-redesign .nl-card.is-read .nl-title { font-weight: var(--fw-regular); }
.nachrichten-list-redesign .nl-excerpt { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); height: 72px; overflow: hidden; text-wrap: pretty; }
.nachrichten-list-redesign .nl-card-footer { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.nachrichten-list-redesign .nl-tag { min-width: 0; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; background: var(--tag-neutral-bg); font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--tag-neutral-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nachrichten-list-redesign .nl-readmore { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive); }
.nachrichten-list-redesign .nl-card[hidden] { display: none; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.nachrichten-list-redesign .nl-empty { padding: 52px 16px 60px; display: none; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.nachrichten-list-redesign .nl-empty.is-visible { display: flex; }
.nachrichten-list-redesign .nl-empty-icon { display: flex; color: var(--fg-disabled); }
.nachrichten-list-redesign .nl-empty-title { font: var(--fw-medium) 14px/20px var(--font-sans); color: var(--fg-base); }
.nachrichten-list-redesign .nl-empty-desc { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }
.nachrichten-list-redesign .nl-empty-reset {
	margin-top: 4px; height: 32px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); cursor: pointer;
}
.nachrichten-list-redesign .nl-empty-reset:hover { background: var(--bg-subtle-hover); }

/* ── Pagination footer (native tt_news ###BROWSE_LINKS### bootstrapPaginator, restyled) ── */
.nachrichten-list-redesign .nl-pagination-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border-base); background: var(--bg-subtle); flex-wrap: wrap; }
.nachrichten-list-redesign .nl-pagination-row[hidden] { display: none; }
.nachrichten-list-redesign .nl-pagination-label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.nachrichten-list-redesign .pagination { display: flex; align-items: center; gap: 4px; margin: 0; flex-wrap: wrap; }
.nachrichten-list-redesign .pagination > li { list-style: none; }
.nachrichten-list-redesign .pagination > li > a {
	display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); text-decoration: none; cursor: pointer;
}
.nachrichten-list-redesign .pagination > li > a:hover { background: var(--bg-subtle-hover); text-decoration: none; }
.nachrichten-list-redesign .pagination > li.active > a { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); cursor: default; }
.nachrichten-list-redesign .pagination > li.disabled > a { color: var(--fg-disabled); cursor: default; pointer-events: none; }

@media (max-width: 1023px) {
	.nachrichten-list-redesign .nl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.nachrichten-list-redesign .nl-cat-select { width: 180px; }
}
@media (max-width: 767px) {
	.nachrichten-list-redesign .nl-filter-row { flex-direction: column; align-items: stretch; }
	.nachrichten-list-redesign .nl-search { flex: 1 1 auto; }
	.nachrichten-list-redesign select.nl-select { width: 100%; }
	.nachrichten-list-redesign .nl-pagination-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 639px) {
	.nachrichten-list-redesign .nl-grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
	.nachrichten-list-redesign .nl-page-head { flex-direction: column; align-items: stretch; gap: 10px; }
}
/* end NACHRICHTEN LIST REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NACHRICHTEN DETAIL REDESIGN (tt_news SINGLE view, page "News")
   Custom tt_news marker template — see
   fileadmin/templates/page.de/extensions/tt_news/nachrichten-single.html.
   Tokens only, never hex. Responsive via token flips at 1023 / 899 / 767 / 639.
   ═══════════════════════════════════════════════════════════════════════ */

.nachrichten-detail-redesign { font-family: var(--font-sans); color: var(--fg-base); }
.nachrichten-detail-redesign *,
.nachrichten-detail-redesign *::before,
.nachrichten-detail-redesign *::after { box-sizing: border-box; }

.nachrichten-detail-redesign .nd-page { display: flex; flex-direction: column; gap: 16px; }

/* ── Breadcrumb bar ──────────────────────────────────────────────────── */
.nachrichten-detail-redesign .nd-breadcrumb {
	display: flex; align-items: center; gap: 12px; padding: 10px 20px; flex-wrap: wrap;
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
}
.nachrichten-detail-redesign .nd-back-link { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); text-decoration: none; }
.nachrichten-detail-redesign .nd-back-link:hover { color: var(--fg-interactive); text-decoration: none; }
/* The ###LINK_ITEM### wrap renders a plain <a> inside this span (see nd-back-btn below too) —
   display:contents flattens it into the span's own inline-flex layout. */
.nachrichten-detail-redesign .nd-back-link > a { display: contents; color: inherit; text-decoration: inherit; }
.nachrichten-detail-redesign .nd-crumb-sep { display: flex; color: var(--fg-disabled); }
.nachrichten-detail-redesign .nd-crumb-title { min-width: 0; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nachrichten-detail-redesign .nd-nav-btns { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; }
/* ###PREV_ARTICLE###/###NEXT_ARTICLE### are pre-rendered whole <a> tags from tt_news
   (no wrap-pair to attach a class to) — style the native anchor by tag, scoped to this
   container only. */
.nachrichten-detail-redesign .nd-nav-btns a {
	display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-base); text-decoration: none;
}
.nachrichten-detail-redesign .nd-nav-btns a:hover { background: var(--bg-subtle-hover); color: var(--fg-base); text-decoration: none; }

/* ── Detail card ─────────────────────────────────────────────────────── */
.nachrichten-detail-redesign .nd-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); display: flex; flex-direction: column; }
.nachrichten-detail-redesign .nd-head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border-base); }
.nachrichten-detail-redesign .nd-thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 124px; height: 52px; border-radius: var(--radius-md); background: var(--bg-subtle); overflow: hidden; }
.nachrichten-detail-redesign .nd-thumb img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.nachrichten-detail-redesign .nd-headinfo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.nachrichten-detail-redesign .nd-title { margin: 0; font: var(--fw-medium) 22px/30px var(--font-sans); color: var(--fg-base); text-wrap: pretty; }
.nachrichten-detail-redesign .nd-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nachrichten-detail-redesign .nd-datetime { font: var(--fw-regular) 12px/18px var(--font-mono); color: var(--fg-subtle); }
.nachrichten-detail-redesign .nd-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; background: var(--tag-neutral-bg); font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--tag-neutral-fg); }

.nachrichten-detail-redesign .nd-body { padding: 22px 24px 26px; max-width: 680px; font: var(--fw-regular) 14px/24px var(--font-sans); color: var(--fg-base); }
.nachrichten-detail-redesign .nd-body p { margin: 0 0 16px; font: var(--fw-regular) 14px/24px var(--font-sans); color: var(--fg-base); text-wrap: pretty; }
.nachrichten-detail-redesign .nd-body p:last-child { margin-bottom: 0; }
.nachrichten-detail-redesign .nd-body ul,
.nachrichten-detail-redesign .nd-body ol { margin: 0 0 16px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 4px; }
.nachrichten-detail-redesign .nd-body li { font: var(--fw-regular) 14px/24px var(--font-sans); color: var(--fg-base); }
.nachrichten-detail-redesign .nd-body h2,
.nachrichten-detail-redesign .nd-body h3 { margin: 8px 0 0; font: var(--fw-medium) 15px/22px var(--font-sans); color: var(--fg-base); }
.nachrichten-detail-redesign .nd-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* ── Footer bar ──────────────────────────────────────────────────────── */
.nachrichten-detail-redesign .nd-footer { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border-base); background: var(--bg-subtle); flex-wrap: wrap; }
.nachrichten-detail-redesign .nd-back-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); text-decoration: none;
}
.nachrichten-detail-redesign .nd-back-btn:hover { background: var(--bg-subtle-hover); color: var(--fg-base); text-decoration: none; }
.nachrichten-detail-redesign .nd-back-btn > a { display: contents; color: inherit; text-decoration: inherit; }
.nachrichten-detail-redesign .nd-toggle-btn {
	margin-left: auto; box-sizing: border-box; min-width: 212px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 34px; padding: 0 12px; border-radius: var(--radius-md); font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer;
	border: 1px solid var(--border-strong); background: var(--bg-base); color: var(--fg-base);
}
.nachrichten-detail-redesign .nd-toggle-btn.is-unread { border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover); }
.nachrichten-detail-redesign .nd-toggle-btn:hover { filter: brightness(0.97); }

@media (max-width: 767px) {
	.nachrichten-detail-redesign .nd-head { flex-direction: column; }
	.nachrichten-detail-redesign .nd-footer { flex-direction: column; align-items: stretch; }
	.nachrichten-detail-redesign .nd-toggle-btn { margin-left: 0; }
}
@media (max-width: 639px) {
	.nachrichten-detail-redesign .nd-breadcrumb { flex-direction: column; align-items: stretch; gap: 8px; }
	.nachrichten-detail-redesign .nd-nav-btns { margin-left: 0; }
}
/* end NACHRICHTEN DETAIL REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — overview card + Datenqualität follow-up
   Adds the read-only overview card (view/customer/detail, #home) that sits
   in front of the existing edit form, and the Datenqualität card in the
   sidebar. Both are driven by the same buildOverviewFields() data in
   app/customer.js (karte / qualityPct / qualityMissing / qualityHint) —
   no new server calls, no change to the form's own markup or actions.
   ═══════════════════════════════════════════════════════════════════════ */
.customer-redesign {
	--cu-overview-cols: repeat(3, minmax(0, 1fr));
}

/* ── Sidebar: Datenqualität card ─────────────────────────────────────── */
.customer-redesign .cu-quality-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.customer-redesign .cu-quality-head { font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); }
.customer-redesign .cu-quality-pct { display: flex; align-items: baseline; gap: 6px; }
.customer-redesign .cu-quality-pct-num { font: var(--fw-medium) 22px/26px var(--font-sans); color: var(--fg-base); }
.customer-redesign .cu-quality-pct-label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.customer-redesign .cu-quality-bar { height: 6px; border-radius: 9999px; background: var(--bg-subtle); overflow: hidden; }
.customer-redesign .cu-quality-bar-fill { height: 100%; border-radius: 9999px; background: var(--bg-interactive); transition: width 200ms ease; }
.customer-redesign .cu-quality-bar-fill.cu-quality-good { background: var(--tag-green-fg); }
.customer-redesign .cu-quality-missing { display: flex; flex-direction: column; gap: 6px; }
.customer-redesign .cu-quality-missing-item { display: flex; align-items: center; gap: 7px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.customer-redesign .cu-quality-missing-item .fa { flex: none; color: var(--tag-orange-fg); }

/* ── #home: read-only overview card (shown by default) ───────────────── */
.customer-redesign .cu-overview-wrap { display: flex; flex-direction: column; }
.customer-redesign .cu-overview-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; margin-bottom: 16px; }
.customer-redesign .cu-overview-top { display: flex; align-items: flex-start; gap: 16px; padding: 20px 20px 18px; }
.customer-redesign .cu-overview-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.customer-redesign .cu-overview-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: var(--fw-medium) 17px/24px var(--font-sans); color: var(--fg-base); }
.customer-redesign .cu-tag--active { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.customer-redesign .cu-overview-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.customer-redesign .cu-overview-meta strong { font: var(--fw-medium) 12px/18px var(--font-mono); color: var(--fg-base); }
.customer-redesign .cu-overview-grid { display: grid; grid-template-columns: var(--cu-overview-cols); gap: 18px 24px; padding: 2px 20px 20px; }
.customer-redesign .cu-overview-fact { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.customer-redesign .cu-overview-fact-label { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.customer-redesign .cu-overview-fact-value {
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.customer-redesign .cu-overview-fact-value--mono { font-family: var(--font-mono); }
.customer-redesign .cu-overview-fact-value--muted { color: var(--fg-muted); }
.customer-redesign .cu-overview-footer {
	display: flex; align-items: center; gap: 10px; padding: 11px 20px;
	border-top: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted);
}
.customer-redesign .cu-overview-footer a { margin-left: auto; font: var(--fw-regular) 12px/18px var(--font-sans); }

/* ── #home: card ↔ form toggle ("bearbeiten" / "abbrechen") ──────────── */
.customer-redesign .cu-form-card { display: none; }
.customer-redesign .cu-overview-wrap.cu-editing .cu-overview-card { display: none; }
.customer-redesign .cu-overview-wrap.cu-editing .cu-form-card { display: flex; }

@media (max-width: 899px) {
	.customer-redesign { --cu-overview-cols: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.customer-redesign { --cu-overview-cols: minmax(0, 1fr); }
	.customer-redesign .cu-overview-top { flex-direction: column; align-items: stretch; }
	.customer-redesign .cu-overview-footer { flex-direction: column; align-items: stretch; }
	.customer-redesign .cu-overview-footer a { margin-left: 0; }
}
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN (Account: Stammdaten / Bankverbindung / Unternehmen /
   Unterlagen / Einstellungen / Landing-Page)
   Scoped to .resellerdata-redesign, wrapping tpl/resellerdata.html's whole
   view/resellerdata section plus the three embedded sub-modules mounted
   inside it (resellerdocs, settings, changepassword) — they inherit this
   scope at runtime with no wrapper of their own, same technique as the
   CUSTOMER REDESIGN "Partials/Form follow-up" block above. The Partials
   Base/Contact/Bank/Company are never edited; their existing
   .form-group / label.form-label / col-sm-4|8|9 / .row.input-row /
   .input-group / .input-addon / .form-group-seperator output is restyled
   purely via cascade, exactly like CUSTOMER REDESIGN and REGISTERRESELLER
   REDESIGN v2 already do. Tokens only. Responsive via flips at
   1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.resellerdata-redesign {
	--rd-cols-2: repeat(2, minmax(0, 1fr));
	--rd-header-dir: row;
	--rd-header-align: flex-end;
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.resellerdata-redesign *,
.resellerdata-redesign *::before,
.resellerdata-redesign *::after { box-sizing: border-box; }

/* ── Generic card shell ────────────────────────────────────────────────── */
.resellerdata-redesign .rd-card {
	background: var(--bg-base); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest); overflow: hidden; margin-bottom: 16px;
}

/* ── Header card: title + subtitle + status pill + Änderungsantrag banner ── */
.resellerdata-redesign .rd-header-top {
	display: flex; flex-direction: var(--rd-header-dir); align-items: var(--rd-header-align);
	gap: 16px; padding: 18px;
}
.resellerdata-redesign .rd-header-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resellerdata-redesign .rd-title { margin: 0; font: var(--fw-medium) 22px/30px var(--font-sans); color: var(--fg-base); }
.resellerdata-redesign .rd-subtitle { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }
.resellerdata-redesign .rd-status-pill {
	margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
	border-radius: var(--radius-full); font: var(--fw-medium) 12px/1 var(--font-sans); white-space: nowrap;
	background: var(--tag-green-bg); color: var(--tag-green-fg);
}
.resellerdata-redesign .rd-status-pill.is-open { background: var(--tag-red-bg); color: var(--fg-error); }

/* ── Tab bar + tab content card ──────────────────────────────────────── */
.resellerdata-redesign .rd-tabs-card .nav-tabs {
	display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; margin: 0; padding: 0 10px;
	border: 0; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle); list-style: none;
}
.resellerdata-redesign .rd-tabs-card .nav-tabs > li { float: none; margin: 0; }
.resellerdata-redesign .rd-tabs-card .nav-tabs > li > a {
	display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px;
	border: 0; border-radius: 0; background: transparent;
	font: var(--fw-regular) 13px/1 var(--font-sans); color: var(--fg-subtle); white-space: nowrap; cursor: pointer;
	transition: color 120ms ease;
}
.resellerdata-redesign .rd-tabs-card .nav-tabs > li > a:hover,
.resellerdata-redesign .rd-tabs-card .nav-tabs > li > a:focus {
	background: transparent; color: var(--fg-interactive); text-decoration: none;
}
.resellerdata-redesign .rd-tabs-card .nav-tabs > li.active > a,
.resellerdata-redesign .rd-tabs-card .nav-tabs > li > a.active,
.resellerdata-redesign .rd-tabs-card .nav-tabs > li.active > a:hover,
.resellerdata-redesign .rd-tabs-card .nav-tabs > li > a.active:hover,
.resellerdata-redesign .rd-tabs-card .nav-tabs > li.active > a:focus,
.resellerdata-redesign .rd-tabs-card .nav-tabs > li > a.active:focus {
	font-weight: var(--fw-medium); color: var(--fg-interactive);
	box-shadow: inset 0 -2px 0 0 var(--bg-interactive);
}
.resellerdata-redesign .rd-tab-badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px;
	border-radius: var(--radius-full); background: var(--tag-red-bg); color: var(--fg-error);
	font: var(--fw-medium) 10px/1 var(--font-sans);
}
.resellerdata-redesign .rd-tab-badge:empty { display: none; }
.resellerdata-redesign .rd-tabs-card .tab-content { background: var(--bg-base); }
.resellerdata-redesign .rd-tabs-card .tab-content > .tab-pane { padding: 20px; }

/* ── 2-col tab layout ───────────────────────────────────────────────── */
.resellerdata-redesign .rd-grid-2 { display: grid; grid-template-columns: var(--rd-cols-2); gap: 24px; align-items: start; }
.resellerdata-redesign .rd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; }

/* ── Section headings: text + trailing rule, the sitewide convention also
   used by .cu-group-head/.or-group-head/.rc-section-head/.sr-group-head. ── */
.resellerdata-redesign .rd-group-head {
	display: flex; align-items: center; gap: 10px;
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap;
}
.resellerdata-redesign .rd-group-head::after { content: ""; flex: 1; height: 1px; background: var(--border-base); }
.resellerdata-redesign .rd-group-head:not(:first-child) { margin-top: 8px; }

/* ── Flat multi-group stack (Einstellungen tab: group / rule / group) ── */
.resellerdata-redesign .rd-settings-stack { display: flex; flex-direction: column; gap: 22px; }
.resellerdata-redesign .rd-divider { height: 1px; margin: 0; border: 0; background: var(--border-base); }

/* ── "Stammdaten übernehmen" pinned to the Kontoinhaber column's corner
   (Bank partial renders it deep inside the Anrede field; repositioning via
   position:absolute keeps the DOM untouched — no partial edit needed). ── */
.resellerdata-redesign #bank [data-target$=":applybasedata"] {
	position: absolute; top: 0; right: 0; margin: 0 !important;
	height: 30px; padding: 0 12px; display: inline-flex; align-items: center;
	border: 1px solid var(--border-interactive); border-radius: var(--radius-md) !important;
	background: var(--bg-base); font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-interactive);
}
.resellerdata-redesign #bank [data-target$=":applybasedata"]:hover { background: var(--bg-highlight); }

/* ── Form fields driven by Partials/Form/{Base,Contact,Bank,Company} ──── */
.resellerdata-redesign .form-group { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; }
.resellerdata-redesign .form-group:last-child { margin-bottom: 0; }
.resellerdata-redesign .form-group > label,
.resellerdata-redesign .form-group > label.form-label {
	width: 100%; margin: 0; padding: 0; text-align: left;
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle);
}
.resellerdata-redesign .text-danger { color: var(--fg-error); }
/* Required-field marker: baseline red star (not a tiny raised superscript) — matches the reference's inline "<span>*</span>" treatment. */
.resellerdata-redesign sup.text-danger { vertical-align: baseline; font-size: 100%; line-height: 1; margin-left: 2px; }
.resellerdata-redesign .rd-field-label { display: block; width: 100%; margin: 0; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.resellerdata-redesign .form-group > [class^="col-sm-"] { width: 100%; padding: 0; min-width: 0; }
.resellerdata-redesign .row.input-row { display: flex; gap: var(--space-sm); margin: 0; }
.resellerdata-redesign .row.input-row > [class*="col-"] { flex: 1; min-width: 0; padding: 0; }
.resellerdata-redesign .form-control,
.resellerdata-redesign select.egon-embedded-form-field,
.resellerdata-redesign input.egon-embedded-form-field,
.resellerdata-redesign textarea.egon-embedded-form-field {
	width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong);
	border-radius: var(--radius-md); background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-sizing: border-box;
}
.resellerdata-redesign select.form-control { padding: 0 8px; }
.resellerdata-redesign .form-control:focus,
.resellerdata-redesign select.form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.resellerdata-redesign .form-control[disabled],
.resellerdata-redesign .form-control[readonly] { border-color: var(--border-base); background: var(--bg-disabled); color: var(--fg-subtle); }
.resellerdata-redesign input[name="bank_identifier_code"][readonly],
.resellerdata-redesign input[name="account_no"][readonly] { font-family: var(--font-mono); }
.resellerdata-redesign .help-block { margin: 4px 0 0; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }

/* input-group / input-addon (icon buttons, IBAN prüfen/berechnen, Stammdaten übernehmen) */
.resellerdata-redesign .input-group,
.resellerdata-redesign .input-group.select,
.resellerdata-redesign .input-group.date { display: flex; align-items: stretch; gap: 6px; position: relative; }
.resellerdata-redesign .input-group > .form-control { flex: 1; min-width: 0; }
.resellerdata-redesign .input-group > * { border-radius: var(--radius-md) !important; }
.resellerdata-redesign .input-group-text:not(.btn) {
	display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--fg-subtle);
}
.resellerdata-redesign .btn-primary.input-group-text,
.resellerdata-redesign #bank .input-group-text.btn {
	height: 38px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md) !important;
	background: var(--bg-base); font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); cursor: pointer; white-space: nowrap;
}
.resellerdata-redesign #bank .input-group-text.btn:hover { background: var(--bg-subtle-hover); border-color: var(--fg-muted); }

/* Section dividers rendered by Partials/Form/Bank (Kontoinhaber / Anschrift /
   Bankverbindung) — restyled to the same text+rule heading used everywhere
   else on this page, entirely via CSS so the shared partial's markup (also
   used by customer/product/registeractivate/registerreseller/
   resellercompletedata/resellernewteam) stays untouched. */
.resellerdata-redesign .form-group-seperator { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; }
.resellerdata-redesign .form-group-seperator:not(:first-child) { margin-top: 8px; }
.resellerdata-redesign .form-group-seperator .row { display: flex; margin: 0; flex: 0 0 auto; }
.resellerdata-redesign .form-group-seperator .row > [class*="col-"] { flex: 0 0 auto; width: auto; padding: 0; }
.resellerdata-redesign .form-group-seperator .text-muted {
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); white-space: nowrap;
}
.resellerdata-redesign .form-group-seperator hr { flex: 1; height: 1px; margin: 0; border: 0; background: var(--border-base); opacity: 1; }

/* The Bank partial's own static IBAN callout is superseded by the JS-driven
   3-state .rd-iban-hint below (same suppression technique as
   REGISTERRESELLER REDESIGN v2's #iban-calc-info). */
.resellerdata-redesign #bank #iban-calc-info { display: none; }
.resellerdata-redesign .rd-iban-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; font: var(--fw-regular) 11px/16px var(--font-sans); text-wrap: pretty; }
.resellerdata-redesign .rd-iban-hint .fa { flex: none; margin-top: 1px; }

/* ── Checkbox rows rendered directly by Company.html / this template ──── */
.resellerdata-redesign .checkbox { margin: 0 0 12px; padding: 0; }
.resellerdata-redesign .checkbox label {
	display: flex; align-items: center; gap: 9px; padding-left: 0; margin: 0;
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); cursor: pointer;
}
.resellerdata-redesign .checkbox input[type="checkbox"] {
	position: static !important; float: none !important; margin: 0 !important;
	width: 16px; height: 16px; flex: none; accent-color: var(--bg-interactive);
}

/* ── Info card ("Wozu diese Angaben" / "Nur bei gewerblicher Tätigkeit") ── */
.resellerdata-redesign .rd-info-card {
	display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
	border: 1px solid var(--border-base); border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.resellerdata-redesign .rd-info-title { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.resellerdata-redesign .rd-info-text { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); text-wrap: pretty; }
.resellerdata-redesign .rd-info-divider { height: 1px; background: var(--border-base); }
.resellerdata-redesign .rd-info-foot { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); text-wrap: pretty; }

/* ── Legacy .bs-callout overrides (card look via --tag-* tokens; same
   technique as NEW ORDER REDESIGN's .bs-callout block) ─────────────── */
.resellerdata-redesign .bs-callout {
	margin: 0 0 12px; padding: 13px 15px; border: 1px solid var(--border-base); border-left: 0;
	border-radius: var(--radius-lg); background: var(--bg-subtle);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
}
.resellerdata-redesign .bs-callout h4 { margin: 0 0 4px; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.resellerdata-redesign .bs-callout code { background: var(--bg-base); border-radius: var(--radius-sm); }
.resellerdata-redesign .bs-callout-warning { border-color: var(--tag-orange-bg); background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.resellerdata-redesign .bs-callout-warning h4 { color: var(--tag-orange-fg); }
.resellerdata-redesign .bs-callout-success { border-color: var(--tag-green-bg); background: var(--tag-green-bg); color: var(--tag-green-fg); }
.resellerdata-redesign .bs-callout-success h4 { color: var(--tag-green-fg); }
.resellerdata-redesign .bs-callout-info { border-color: var(--border-base); background: var(--bg-subtle); color: var(--fg-subtle); }
.resellerdata-redesign .bs-callout-info h4 { color: var(--fg-base); }
.resellerdata-redesign .bs-callout-danger { border-color: var(--tag-red-bg); background: var(--tag-red-bg); color: var(--fg-error); }
.resellerdata-redesign .bs-callout-danger h4 { color: var(--fg-error); }
/* Landing-Page treats its Stammdaten-reminder callout as informational, not
   an error — recolour it orange like the rest of the tab's warning banners. */
.resellerdata-redesign #landingpage .bs-callout-danger { border-color: var(--tag-orange-bg); background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.resellerdata-redesign #landingpage .bs-callout-danger h4,
.resellerdata-redesign #landingpage .bs-callout-danger strong { color: var(--tag-orange-fg); }

/* ── Standalone orange warning banner (Bankverbindung Freigabe-Hinweis,
   Landing-Page Stammdaten-Hinweis) ─────────────────────────────────── */
.resellerdata-redesign .rd-banner {
	display: flex; gap: 10px; padding: 13px 15px; margin: 0 0 12px;
	border: 1px solid var(--border-base); border-radius: var(--radius-lg); background: var(--bg-subtle);
	font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle);
}
.resellerdata-redesign .rd-banner--warning { border-color: var(--tag-orange-bg); background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.resellerdata-redesign .rd-banner .fa,
.resellerdata-redesign .rd-banner-icon { flex: none; margin-top: 1px; }
.resellerdata-redesign .rd-banner-text { flex: 1; min-width: 0; text-wrap: pretty; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.resellerdata-redesign .rd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 38px; padding: 0 16px; border-radius: var(--radius-md);
	border: 1px solid var(--border-strong); background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.resellerdata-redesign .rd-btn:hover { background: var(--bg-subtle-hover); border-color: var(--fg-muted); color: var(--fg-base); text-decoration: none; }
.resellerdata-redesign .rd-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }
.resellerdata-redesign .rd-btn--block { width: 100%; }
.resellerdata-redesign .rd-btn--outline { border-color: var(--border-interactive); color: var(--fg-interactive); background: var(--bg-base); }
.resellerdata-redesign .rd-btn--outline:hover { background: var(--bg-highlight); border-color: var(--border-interactive); color: var(--fg-interactive); }
.resellerdata-redesign .rd-btn--danger-outline { color: var(--fg-error); border-color: var(--tag-red-bg-hover); }
.resellerdata-redesign .rd-btn--danger-outline:hover { background: var(--tag-red-bg); border-color: var(--tag-red-bg-hover); color: var(--fg-error); }
.resellerdata-redesign .rd-btn--primary { border-color: var(--border-interactive); background: var(--bg-interactive); color: var(--fg-on-color); }
.resellerdata-redesign .rd-btn--primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.resellerdata-redesign .rd-btn--primary[disabled],
.resellerdata-redesign .rd-btn--primary.is-disabled {
	border-color: var(--border-base); background: var(--bg-disabled); color: var(--fg-disabled); cursor: default; pointer-events: none;
}
.resellerdata-redesign .btn-group.btn-block { display: flex; gap: 8px; margin-top: 4px; }
.resellerdata-redesign .btn-group.btn-block .rd-btn { flex: 1; float: none; width: auto; }

/* ── Save-bar footer ────────────────────────────────────────────────── */
.resellerdata-redesign .rd-footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px -20px -20px; padding: 14px 20px;
	border-top: 1px solid var(--border-base); background: var(--bg-subtle);
}
.resellerdata-redesign .rd-footer-hint { flex: 1; min-width: 0; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.resellerdata-redesign .rd-footer-hint.is-error { color: var(--fg-error); }

/* ── Field hint captions (IBAN / subdomain 3-state, Pflichtangabe) ─────── */
.resellerdata-redesign .rd-field-hint { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); text-wrap: pretty; }
.resellerdata-redesign .rd-field-hint.is-ok { color: var(--tag-green-fg); }
.resellerdata-redesign .rd-field-hint.is-error { color: var(--fg-error); }

/* ── Compound input + prefix (Landing-Page subdomain field: "/partner/…"
   — a prefix, not a domain suffix, matching how the preview URL actually
   works: /partner/<value>/, not a per-mandant subdomain) ─────────────── */
.resellerdata-redesign .rd-input-prefix { display: flex; align-items: center; gap: 0; }
.resellerdata-redesign .rd-input-prefix .rd-prefix {
	flex: none; display: flex; align-items: center; height: 38px; padding: 0 11px;
	border: 1px solid var(--border-strong); background: var(--bg-subtle);
	font: var(--fw-regular) 13px/1 var(--font-mono); color: var(--fg-subtle); white-space: nowrap;
	border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.resellerdata-redesign .rd-input-prefix .form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ── Unterlagen: CSS-grid "table" (resellerdocs.html) ──────────────────── */
.resellerdata-redesign .rd-doc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.resellerdata-redesign .rd-doc-head-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resellerdata-redesign .rd-hint-text { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.resellerdata-redesign .rd-doctable { border: 1px solid var(--border-base); border-radius: var(--radius-lg); overflow: hidden; }
.resellerdata-redesign .rd-doctable-head,
.resellerdata-redesign .rd-doctable-row {
	display: grid; grid-template-columns: 2.2fr 1fr 2fr 90px; gap: 16px; align-items: center;
	padding: 11px 16px; border-bottom: 1px solid var(--border-base);
}
.resellerdata-redesign .rd-doctable-row:last-child { border-bottom: 0; }
.resellerdata-redesign .rd-doctable-head { padding: 10px 16px; background: var(--bg-subtle); font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.resellerdata-redesign .rd-doc-name { display: flex; align-items: center; gap: 9px; min-width: 0; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }
.resellerdata-redesign .rd-doc-name span,
.resellerdata-redesign .rd-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resellerdata-redesign .rd-doc-name .fa { flex: none; color: var(--fg-muted); }
.resellerdata-redesign .rd-doc-date { font: var(--fw-regular) 13px/20px var(--font-mono); color: var(--fg-subtle); }
.resellerdata-redesign .rd-doc-note { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); text-wrap: pretty; }
.resellerdata-redesign .rd-doc-action { justify-self: end; font: var(--fw-medium) 12px/18px var(--font-sans); white-space: nowrap; }
.resellerdata-redesign .rd-doc-action .fa { margin-right: 3px; }

/* ── Einstellungen: logo dropzone ───────────────────────────────────── */
.resellerdata-redesign .rd-dropzone {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px;
	border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.resellerdata-redesign .rd-dropzone-preview {
	flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 52px;
	border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-base); overflow: hidden;
}
.resellerdata-redesign .rd-dropzone-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.resellerdata-redesign .rd-dropzone-body { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.resellerdata-redesign .rd-dropzone-body input[type="file"] { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }

/* ── Checkbox-cards (Anzeige im Tarifrechner / Benachrichtigungen) ─────── */
.resellerdata-redesign .rd-check-card {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 11px 13px; margin: 0 0 8px;
	border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-base); cursor: pointer;
}
.resellerdata-redesign .rd-check-card:last-child { margin-bottom: 0; }
.resellerdata-redesign .rd-check-card:hover { background: var(--bg-subtle); }
.resellerdata-redesign .rd-check-card input[type="checkbox"] {
	width: 16px; height: 16px; margin: 1px 0 0 !important; flex: none; position: static !important; float: none !important;
	accent-color: var(--bg-interactive);
}
.resellerdata-redesign .rd-check-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resellerdata-redesign .rd-check-card-title { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }

/* ── Exclude-checklist widget (initExcludeChecklist, resellerdata.js +
   settings.js — Versorger/Tarife ausblenden) ──────────────────────────── */
.resellerdata-redesign .rd-exclude { display: flex; flex-direction: column; gap: 6px; }
.resellerdata-redesign .rd-exclude-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.resellerdata-redesign .rd-exclude-label { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.resellerdata-redesign .rd-exclude-count {
	display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: var(--radius-full);
	background: var(--bg-subtle-pressed); border: 1px solid var(--border-base); font: var(--fw-regular) 11px/1 var(--font-sans); color: var(--fg-subtle);
}
.resellerdata-redesign .rd-exclude-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.resellerdata-redesign .rd-exclude-search {
	width: 100%; height: 32px; padding: 0 10px; margin-bottom: 2px; border: 1px solid var(--border-strong);
	border-radius: var(--radius-md); background: var(--bg-base); font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base);
	box-sizing: border-box;
}
.resellerdata-redesign .rd-exclude-list {
	overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border-base); border-radius: var(--radius-md);
	background: var(--bg-base); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.resellerdata-redesign .rd-exclude-group {
	margin: 6px 0 0; padding: 0 2px; font: var(--fw-medium) 11px/16px var(--font-sans); letter-spacing: .04em;
	text-transform: uppercase; color: var(--fg-muted);
}
.resellerdata-redesign .rd-exclude-group:first-child { margin-top: 0; }
.resellerdata-redesign .rd-exclude-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; cursor: pointer; }
.resellerdata-redesign .rd-exclude-row input[type="checkbox"] {
	width: 14px; height: 14px; margin: 0 !important; position: static !important; float: none !important; accent-color: var(--bg-interactive);
}
.resellerdata-redesign .rd-exclude-name {
	flex: 1; min-width: 0; font: var(--fw-regular) 12px/20px var(--font-sans); color: var(--fg-base);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resellerdata-redesign .rd-exclude-row.is-checked .rd-exclude-name { color: var(--fg-muted); }

/* ── Stammdaten: pair Anrede + Geburtsdatum on one row and fix the
   Anschrift field order (reference: Straße → PLZ/Ort → Land; this partial
   call renders country_id/zipCity/streetStreetNumber/birthday in a fixed
   order that doesn't match — reordered here via flex/grid `order`, DOM
   and all Base.html hooks untouched). ── */
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start;
}
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .rd-group-head,
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="client_title"]),
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="first_name"]),
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > [id$="-basedata-anschrift-heading"],
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="street"]),
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="zip"]),
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="country_id"]),
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="stairs"], [name="door_number"]) {
	grid-column: 1 / -1;
}
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="salutation"]) { order: 1; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="birthday"]) { order: 2; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="client_title"]) { order: 3; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="first_name"]) { order: 4; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > [id$="-basedata-anschrift-heading"] { order: 5; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="street"]) { order: 6; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="zip"]) { order: 7; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="country_id"]) { order: 8; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .form-group:has([name="stairs"], [name="door_number"]) { order: 9; }

/* ── Unternehmen: pair Rechtsform/Gründungsdatum, Finanzamt/Steuernummer,
   USt-IdNr/Gerichtsstand on one row each (Company.html already emits them
   in that adjacency; only the outlier full-width fields need spanning). ── */
.resellerdata-redesign #company .rd-col:first-child {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start;
}
.resellerdata-redesign #company .rd-col:first-child > .rd-group-head,
.resellerdata-redesign #company .rd-col:first-child > .form-group:has(.checkbox),
.resellerdata-redesign #company .rd-col:first-child > .form-group:has([name$="company"]),
.resellerdata-redesign #company .rd-col:first-child > .form-group:has([name$="company_court_number"]),
.resellerdata-redesign #company .rd-col:first-child > .form-group:has(.bs-callout) {
	grid-column: 1 / -1;
}

/* ── Bankverbindung: independent two-column flow (Kontoinhaber + Anschrift
   on the left, Bankverbindung on the right), matching the reference —
   this tab currently renders as one full-width column. CSS multicol
   (not grid) so the two sections keep independent heights instead of
   sharing row tracks. BIC/Bank-Name and BLZ/Konto paired inline within
   the right flow, same technique the reference uses for those rows. ── */
/* .rd-col's base display:flex must be reset to block — CSS multicol
   (`columns`) has no effect on flex containers. */
.resellerdata-redesign #bank .rd-col { display: block; columns: 2; column-gap: 24px; }
.resellerdata-redesign #bank .rd-col > * { break-inside: avoid; }
.resellerdata-redesign #bank .rd-col > .form-group-seperator { margin-bottom: 14px; }
.resellerdata-redesign #bank .rd-col > .form-group-seperator ~ .form-group-seperator ~ .form-group-seperator {
	break-before: column;
}
.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]) {
	display: inline-block; width: calc(50% - 16px); vertical-align: top; box-sizing: border-box; margin-right: 16px;
}
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) {
	display: inline-block; width: calc(50% - 16px); vertical-align: top; box-sizing: border-box;
}
/* The button's absolute positioning was resolving against the immediate
   .input-group.select wrapper (also position:relative), not .rd-col as
   intended, overlapping the Anrede select — drop the wrapper out of the
   positioning chain so .rd-col becomes the containing block again. */
.resellerdata-redesign #bank .input-group.select { position: static; }
.resellerdata-redesign #bank .rd-col [data-target$=":applybasedata"] { right: calc(50% + 12px); }

/* ── Landing-Page: reference orders "Adresse und Auftritt" before
   "Tariffilter" — swap the visual order without touching markup. ── */
.resellerdata-redesign #landingpage .rd-grid-2 > .rd-col:first-child { order: 2; }
.resellerdata-redesign #landingpage .rd-grid-2 > .rd-col:last-child { order: 1; }

/* ── Responsive token flips ────────────────────────────────────────── */
@media (max-width: 1023px) {
	.resellerdata-redesign .rd-doctable-head,
	.resellerdata-redesign .rd-doctable-row { grid-template-columns: 2fr 1fr 1.4fr 80px; }
}
@media (max-width: 899px) {
	.resellerdata-redesign { --rd-header-dir: column; --rd-header-align: stretch; }
	.resellerdata-redesign .rd-status-pill { margin-left: 0; align-self: flex-start; }
}
@media (max-width: 767px) {
	.resellerdata-redesign { --rd-cols-2: minmax(0, 1fr); }
	.resellerdata-redesign .rd-tabs-card .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.resellerdata-redesign #bank [data-target$=":applybasedata"] { position: static; margin: 8px 0 0 !important; display: inline-flex; }
	/* Collapse the Stammdaten/Unternehmen inner pair-grids and the Bankverbindung two-column flow to a single stacked column. */
	.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child,
	.resellerdata-redesign #company .rd-col:first-child { grid-template-columns: minmax(0, 1fr); }
	.resellerdata-redesign #bank .rd-col { display: flex; flex-direction: column; columns: 1; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) { display: block; width: 100%; margin-right: 0; }
	.resellerdata-redesign .rd-footer { flex-direction: column; align-items: stretch; }
	.resellerdata-redesign .rd-footer .rd-btn,
	.resellerdata-redesign .rd-footer a.rd-btn { width: 100%; }
	.resellerdata-redesign .rd-doctable-head { display: none; }
	.resellerdata-redesign .rd-doctable-row {
		grid-template-columns: 1fr; gap: 4px; align-items: start; padding: 12px 16px;
	}
	.resellerdata-redesign .rd-doc-action { justify-self: start; }
}
@media (max-width: 639px) {
	.resellerdata-redesign .rd-tabs-card .nav-tabs > li > a { height: 44px; }
	.resellerdata-redesign .rd-btn { min-height: 44px; }
	.resellerdata-redesign .rd-check-card { min-height: 44px; }
	.resellerdata-redesign .rd-exclude-actions { width: 100%; justify-content: flex-start; }
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERACCOUNT REDESIGN (Sicherheit: Zugangsdaten / Passwort /
   Zwei-Faktor-Verfahren / Login-Historie)
   Scoped to .reselleraccount-redesign, wrapping tpl/reselleraccount.html's
   whole view/reselleraccount section. This is a SEPARATE module/scope from
   RESELLERDATA REDESIGN above (different top-level class, no cross-module
   class sharing) even though the two screens share the same visual
   language and several component recipes are intentionally mirrored
   1:1 (card shell, buttons, field styling, badges, banners) so the two
   screens feel consistent. Tokens only. Responsive via flips at
   1023/899/767/639.
   ═══════════════════════════════════════════════════════════════════════ */
.reselleraccount-redesign {
	--ra-cols-2: repeat(2, minmax(0, 1fr));
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.reselleraccount-redesign *,
.reselleraccount-redesign *::before,
.reselleraccount-redesign *::after { box-sizing: border-box; }

/* ── Generic card shell ────────────────────────────────────────────────── */
.reselleraccount-redesign .ra-card {
	background: var(--bg-base); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card-rest); overflow: hidden; margin-bottom: 16px;
}
.reselleraccount-redesign .ra-card:last-child { margin-bottom: 0; }

/* ── Header card: title + status pill + MFA-mandatory banner ──────────── */
.reselleraccount-redesign .ra-header-top {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px;
}
.reselleraccount-redesign .ra-title { margin: 0; font: var(--fw-medium) 22px/30px var(--font-sans); color: var(--fg-base); }
.reselleraccount-redesign .ra-status-pill {
	margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
	border-radius: var(--radius-full); font: var(--fw-medium) 12px/1 var(--font-sans); white-space: nowrap;
	background: var(--tag-green-bg); color: var(--tag-green-fg);
}
.reselleraccount-redesign .ra-status-pill.is-open { background: var(--tag-red-bg); color: var(--fg-error); }

.reselleraccount-redesign .ra-banner {
	display: flex; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--tag-red-bg-hover); background: var(--tag-red-bg);
}
.reselleraccount-redesign .ra-banner-icon { flex: none; margin-top: 2px; color: var(--fg-error); font-size: 16px; }
.reselleraccount-redesign .ra-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.reselleraccount-redesign .ra-banner-body h4 { margin: 0; font: var(--fw-medium) 14px/20px var(--font-sans); color: var(--fg-error); }
.reselleraccount-redesign .ra-banner-body p { margin: 0; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-error); text-wrap: pretty; }
.reselleraccount-redesign .ra-banner-cta {
	flex: none; align-self: center; display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
	border: 1px solid var(--fg-error); border-radius: var(--radius-md); background: var(--fg-error);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--bg-base); text-decoration: none; white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease;
}
.reselleraccount-redesign .ra-banner-cta:hover { background: var(--button-danger-pressed); border-color: var(--button-danger-pressed); color: var(--bg-base); text-decoration: none; }

/* ── 2-col grid (Zugangsdaten + Passwort) ──────────────────────────────── */
.reselleraccount-redesign .ra-grid-2 { display: grid; grid-template-columns: var(--ra-cols-2); gap: 16px; align-items: start; margin-bottom: 16px; }
.reselleraccount-redesign .ra-grid-2 > .ra-card:last-child { margin-bottom: 0; }

/* ── Card header row (icon + title [+ badge] [+ back-link]) ────────────── */
.reselleraccount-redesign .ra-card-head {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border-base);
}
.reselleraccount-redesign .ra-card-head-icon { display: flex; color: var(--fg-subtle); font-size: 14px; }
.reselleraccount-redesign .ra-card-head-title { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.reselleraccount-redesign .ra-card-head-badge { margin-left: auto; }
.reselleraccount-redesign .ra-card-head-back {
	margin-left: auto; font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive); white-space: nowrap;
}
.reselleraccount-redesign .ra-card-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.reselleraccount-redesign .ra-card-body--flush { padding: 0; }

/* ── Status / mail badge (2-state pill) ────────────────────────────────── */
.reselleraccount-redesign .ra-badge {
	display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: var(--radius-full);
	font: var(--fw-medium) 10px/1 var(--font-sans); white-space: nowrap;
}
.reselleraccount-redesign .ra-badge--pos { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.reselleraccount-redesign .ra-badge--warn { background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.reselleraccount-redesign .ra-badge--neg { background: var(--tag-red-bg); color: var(--fg-error); }
.reselleraccount-redesign .ra-card-head-badge { height: 22px; padding: 0 9px; font-size: 11px; }

/* ── Read-only / labelled field (Zugangsdaten card) ────────────────────── */
.reselleraccount-redesign .ra-field { display: flex; flex-direction: column; gap: 6px; }
.reselleraccount-redesign .ra-field-row { display: flex; align-items: center; gap: 8px; }
.reselleraccount-redesign .ra-field-label,
.reselleraccount-redesign .rd-field-label,
.reselleraccount-redesign label.form-label,
.reselleraccount-redesign .form-group > label {
	margin: 0; padding: 0; text-align: left; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle);
}
.reselleraccount-redesign .ra-input,
.reselleraccount-redesign .form-control {
	width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong);
	border-radius: var(--radius-md); background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-sizing: border-box;
}
.reselleraccount-redesign .ra-input:focus,
.reselleraccount-redesign .form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.reselleraccount-redesign .ra-input--readonly,
.reselleraccount-redesign .ra-input[readonly] { border-color: var(--border-base); background: var(--bg-disabled); color: var(--fg-subtle); font-family: var(--font-mono); }
.reselleraccount-redesign .ra-hint { font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); text-wrap: pretty; }
.reselleraccount-redesign .ra-hint.is-error { color: var(--fg-error); }
.reselleraccount-redesign .text-danger { color: var(--fg-error); }
.reselleraccount-redesign .help-block { margin: 4px 0 0; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.reselleraccount-redesign .form-group.has-error .ra-input,
.reselleraccount-redesign .form-group.has-error .form-control { border-color: var(--border-error); }

/* ── Card footer (hint + action, border-top separated) ─────────────────── */
.reselleraccount-redesign .ra-card-foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-base);
}
.reselleraccount-redesign .ra-card-foot-hint { flex: 1; min-width: 0; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); text-wrap: pretty; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.reselleraccount-redesign .ra-btn {
	flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 36px; padding: 0 16px; border-radius: var(--radius-md);
	border: 1px solid var(--border-strong); background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.reselleraccount-redesign .ra-btn:hover { background: var(--bg-subtle-hover); border-color: var(--fg-muted); color: var(--fg-base); text-decoration: none; }
.reselleraccount-redesign .ra-btn--primary { border-color: var(--border-interactive); background: var(--bg-interactive); color: var(--fg-on-color); }
.reselleraccount-redesign .ra-btn--primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.reselleraccount-redesign .ra-btn.is-disabled,
.reselleraccount-redesign .ra-btn--primary.is-disabled,
.reselleraccount-redesign .ra-btn--primary[disabled] {
	border-color: var(--border-base); background: var(--bg-disabled); color: var(--fg-disabled); cursor: default; pointer-events: none;
}
.reselleraccount-redesign .input-group-text.btn.btn-primary {
	height: 38px; padding: 0 14px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md) !important;
	background: var(--bg-interactive); font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; white-space: nowrap;
}
.reselleraccount-redesign .input-group-text.btn.btn-primary:hover { background: var(--bg-interactive-hover); }
.reselleraccount-redesign .input-group { display: flex; align-items: stretch; gap: 6px; }
.reselleraccount-redesign .input-group > .form-control { flex: 1; min-width: 0; }
.reselleraccount-redesign .input-group > * { border-radius: var(--radius-md) !important; }

/* ── Password visibility eye-toggle (shared recipe, both pw fields) ────── */
.reselleraccount-redesign .ra-pw-wrap { position: relative; display: flex; }
.reselleraccount-redesign .ra-pw-wrap .ra-input,
.reselleraccount-redesign .ra-pw-wrap .form-control { padding-right: 40px; }
.reselleraccount-redesign .ra-eye-toggle {
	position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer;
}
.reselleraccount-redesign .ra-eye-toggle:hover { color: var(--fg-base); }
.reselleraccount-redesign .ra-eye-toggle.is-visible { color: var(--fg-interactive); }

/* ── Password strength meter ────────────────────────────────────────────── */
.reselleraccount-redesign .ra-strength { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.reselleraccount-redesign .ra-strength-track { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--bg-subtle-pressed); overflow: hidden; }
.reselleraccount-redesign .ra-strength-fill { display: block; height: 100%; width: 0; border-radius: var(--radius-full); background: transparent; transition: width 160ms ease, background 160ms ease; }
.reselleraccount-redesign .ra-strength-fill[data-tier="schwach"] { background: var(--fg-error); }
.reselleraccount-redesign .ra-strength-fill[data-tier="ausreichend"] { background: var(--tag-orange-fg); }
.reselleraccount-redesign .ra-strength-fill[data-tier="stark"] { background: var(--tag-green-fg); }
.reselleraccount-redesign .ra-strength-label { flex: none; font: var(--fw-medium) 11px/16px var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.reselleraccount-redesign .ra-strength-label[data-tier="schwach"] { color: var(--fg-error); }
.reselleraccount-redesign .ra-strength-label[data-tier="ausreichend"] { color: var(--tag-orange-fg); }
.reselleraccount-redesign .ra-strength-label[data-tier="stark"] { color: var(--tag-green-fg); }

/* ── 5-rule checklist ────────────────────────────────────────────────────── */
.reselleraccount-redesign .ra-rules {
	display: grid; grid-template-columns: var(--ra-cols-2); gap: 6px 14px; padding: 12px 14px;
	border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-subtle);
}
.reselleraccount-redesign .ra-rule { display: flex; align-items: center; gap: 8px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.reselleraccount-redesign .ra-rule.is-met { color: var(--tag-green-fg); }
.reselleraccount-redesign .ra-rule-dot {
	flex: none; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px;
	border-radius: var(--radius-full); background: var(--border-strong); color: var(--bg-base); font-size: 8px;
}
.reselleraccount-redesign .ra-rule.is-met .ra-rule-dot { background: var(--tag-green-fg); }
.reselleraccount-redesign .ra-mismatch { display: block; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-error); }

/* ── bs-callout variants (education / danger / success / info banners) ─── */
.reselleraccount-redesign .bs-callout {
	margin: 0; padding: 13px 15px; border: 1px solid var(--border-base); border-left: 0;
	border-radius: var(--radius-lg); background: var(--bg-subtle); font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
}
.reselleraccount-redesign .bs-callout h4 { margin: 0 0 4px; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.reselleraccount-redesign .bs-callout p:last-child { margin-bottom: 0; }
.reselleraccount-redesign .bs-callout-danger { border-color: var(--tag-red-bg); background: var(--tag-red-bg); color: var(--fg-error); }
.reselleraccount-redesign .bs-callout-danger h4 { color: var(--fg-error); }
.reselleraccount-redesign .bs-callout-success { border-color: var(--tag-green-bg); background: var(--tag-green-bg); color: var(--tag-green-fg); }
.reselleraccount-redesign .bs-callout-success h4 { color: var(--tag-green-fg); }
.reselleraccount-redesign .bs-callout-info { border-color: var(--border-base); background: var(--bg-subtle); color: var(--fg-subtle); }
.reselleraccount-redesign .bs-callout-info h4 { color: var(--fg-base); }

/* ── Zwei-Faktor: "active method" static status line ────────────────────── */
.reselleraccount-redesign .ra-mfa-active { display: flex; align-items: center; gap: 8px; font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--tag-green-fg); }
.reselleraccount-redesign .ra-mfa-active-icon { font-size: 15px; }

/* ── Zwei-Faktor: method "radio card" picker ─────────────────────────────── */
.reselleraccount-redesign .ra-mfa-methods { display: grid; grid-template-columns: var(--ra-cols-2); gap: 12px; }
.reselleraccount-redesign .ra-mfa-method {
	display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: var(--radius-lg); text-align: left;
	cursor: pointer; border: 1px solid var(--border-base); background: var(--bg-base); font-family: var(--font-sans);
}
.reselleraccount-redesign .ra-mfa-method:hover { border-color: var(--border-interactive); }
.reselleraccount-redesign .ra-mfa-method.is-selected { border-color: var(--border-interactive); background: var(--bg-highlight); }
.reselleraccount-redesign .ra-mfa-method-top { display: flex; align-items: center; gap: 8px; }
.reselleraccount-redesign .ra-mfa-method-dot {
	flex: none; width: 14px; height: 14px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.reselleraccount-redesign .ra-mfa-method.is-selected .ra-mfa-method-dot { box-shadow: inset 0 0 0 4px var(--bg-interactive); }
.reselleraccount-redesign .ra-mfa-method-title { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.reselleraccount-redesign .ra-mfa-method-tag {
	display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: var(--radius-full);
	background: var(--bg-highlight); font: var(--fw-medium) 10px/1 var(--font-sans); color: var(--fg-interactive); white-space: nowrap;
}
.reselleraccount-redesign .ra-mfa-method-text { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); text-wrap: pretty; }

/* ── Login-Historie: CSS-grid "table" (same recipe as .rd-doctable) ─────── */
.reselleraccount-redesign .ra-logtable { border-top: 1px solid var(--border-base); }
.reselleraccount-redesign .ra-logtable-head,
.reselleraccount-redesign .ra-logtable-row {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.6fr; gap: 16px; align-items: center;
	padding: 11px 18px; border-bottom: 1px solid var(--border-base);
}
.reselleraccount-redesign .ra-logtable-row:last-child { border-bottom: 0; }
.reselleraccount-redesign .ra-logtable-head { padding: 10px 18px; background: var(--bg-subtle); font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.reselleraccount-redesign .ra-logtable-row { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }
.reselleraccount-redesign .ra-logtable-date,
.reselleraccount-redesign .ra-logtable-ip { font-family: var(--font-mono); color: var(--fg-subtle); }

/* ── Responsive token flips ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.reselleraccount-redesign .ra-logtable-head,
	.reselleraccount-redesign .ra-logtable-row { grid-template-columns: 1fr 0.8fr 0.9fr 1.3fr; gap: 10px; }
}
@media (max-width: 899px) {
	.reselleraccount-redesign .ra-grid-2 { --ra-cols-2: minmax(0, 1fr); }
	.reselleraccount-redesign .ra-header-top { align-items: flex-start; }
	.reselleraccount-redesign .ra-status-pill { margin-left: 0; }
}
@media (max-width: 767px) {
	.reselleraccount-redesign { --ra-cols-2: minmax(0, 1fr); }
	.reselleraccount-redesign .ra-banner { flex-direction: column; }
	.reselleraccount-redesign .ra-banner-cta { align-self: flex-start; }
	.reselleraccount-redesign .ra-card-foot { flex-direction: column; align-items: stretch; }
	.reselleraccount-redesign .ra-card-foot .ra-btn { width: 100%; }
	.reselleraccount-redesign .ra-logtable-head { display: none; }
	.reselleraccount-redesign .ra-logtable-row { grid-template-columns: 1fr; gap: 4px; align-items: start; padding: 12px 18px; }
}
@media (max-width: 639px) {
	.reselleraccount-redesign .ra-btn { min-height: 44px; }
	.reselleraccount-redesign .ra-mfa-method { min-height: 44px; }
	.reselleraccount-redesign .ra-eye-toggle { min-width: 44px; min-height: 44px; }
}

/* ── inline "resend verification link" text button ──────────────────────── */
.reselleraccount-redesign .ra-link-btn { flex: none; border: 0; background: transparent; padding: 0; font: var(--fw-medium) 11px/16px var(--font-sans); color: var(--fg-interactive); cursor: pointer; white-space: nowrap; }
.reselleraccount-redesign .ra-link-btn:hover { text-decoration: underline; }
.reselleraccount-redesign .ra-mfa-start-btn { margin-left: auto; }
/* end RESELLERACCOUNT REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD FIXES (page 62) — bug fixes on top of the already-shipped
   smart/calendar/orderoverview/upcommingorder/news/app-menu redesign
   blocks above. Two issues found comparing the live page against the
   reference mockup:

   1. The two-column body (left: smart/calendar/news, right: app-menu/
      orderoverview/upcommingorder) is a Bootstrap Gridelements row using
      .col-sm-4/.col-sm-8, which only stack below 576px. The reference
      stacks to one column below 1023px. .col-sm-4/-8 are reused
      elsewhere (e.g. the footer's 3-column link list), so the fix is
      scoped with :has() to just this row rather than overriding the
      classes globally.
   2. Inside the "smart" widget, the PLZ+Ort and Straße+Nr. field pairs
      use Bootstrap col-4/col-8, but an earlier rule
      (".smart-redesign .sm-form .row.input-row > [class*=\"col-\"]")
      forces every column in that row to equal flex:1, so Ort/Straße
      never got the wider share col-8 implies — their placeholder text
      ("Bitte PLZ eingeben" / "Bitte Ort wählen") clipped with no
      ellipsis. Restoring a narrow/wide split (col-4 fixed just wide
      enough for "PLZ"/"Nr.", col-8 taking the rest) plus a defensive
      text-overflow rule fixes both the clipping and the once-populated
      long city/street option values.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
	.row:has(> .col-sm-4 .smart-redesign):has(> .col-sm-8 #egon-embedded-app-menu) > .col-sm-4,
	.row:has(> .col-sm-4 .smart-redesign):has(> .col-sm-8 #egon-embedded-app-menu) > .col-sm-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.smart-redesign .sm-form .row.input-row > .col-4 { flex: 0 0 92px; }
.smart-redesign .sm-form .row.input-row > .col-8 { flex: 1 1 0%; min-width: 0; }
.smart-redesign .sm-form select.form-control,
.smart-redesign .sm-form select.egon-embedded-form-field {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* News row fully clickable: tt_news' LINK_ITEM subpart only substitutes a
   real <a> around a bare marker, not around a block of nested divs, so the
   row itself can't become one <a>. Stretch the (already-working) title link
   over the full row instead — the classic "stretched link" pattern. */
.news-redesign .nw-item { position: relative; }
.news-redesign .nw-title a::after { content: ""; position: absolute; inset: 0; }

/* Smart widget: every .row.input-row pair (PLZ/Ort, Straße/Nr.,
   Verbrauch HT/NT, the RLM checkbox row) had a doubled gap to the row
   below it. Each column stretches to match its sibling's height (flex
   default align-items:stretch), so the inner .form-group's/.sm-field's own
   margin-bottom (12px) became dead space *inside* the row instead of
   collapsing — on top of the row's own 12px margin-bottom, that read as
   ~24px before the next row vs. a clean 12px after single-field rows like
   Kundenart/Land. Zero out the inner margin so every row-to-row gap is the
   same 12px. */
.smart-redesign .sm-form .row.input-row .form-group,
.smart-redesign .sm-form .row.input-row .sm-field { margin-bottom: 0; }

/* Verbrauch (HT)/(NT) "kWh/a" unit fields: the input keeps its own rounded
   corners where it meets the unit label, instead of reading as one unified
   field like the reference. Root cause: the reset
   ".sm-inputunit .form-control { border:0; border-radius:0 }" has LOWER
   specificity than the general field rule's "input.egon-embedded-form-field"
   alternative (adds the "input" type selector), so the general rule's
   border/radius wins regardless of source order. Match its specificity by
   also including the type selector + both classes. */
.smart-redesign .sm-inputunit input.egon-embedded-form-field.form-control {
	border: 0;
	border-radius: 0;
}

/* Dropdown affordance: native <select> arrows render inconsistently across
   browsers/OS (or not at all once appearance is touched elsewhere), so make
   every select in this widget show the same explicit down-chevron. */
.smart-redesign .sm-form select.form-control,
.smart-redesign .sm-form select.egon-embedded-form-field {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	padding-right: 30px;
}

/* Spacing precision pass vs. the reference (which uses a flat 20px gap
   everywhere): Bootstrap's default row gutter is 24px (--bs-gutter-x:1.5rem)
   and the existing "DASHBOARD SPACING FIX" card-stacking margin uses
   --space-lg (24px). Override both to 20px, scoped to just this dashboard
   row/cards so no other screen's Bootstrap grid or card spacing shifts. */
.row:has(> .col-sm-4 .smart-redesign):has(> .col-sm-8 #egon-embedded-app-menu) {
	--bs-gutter-x: 20px;
}
.row:has(> .col-sm-4 .smart-redesign) > .col-sm-4 .smart-redesign,
.row:has(> .col-sm-4 .smart-redesign) > .col-sm-4 .calendar-redesign,
.row:has(> .col-sm-4 .smart-redesign) > .col-sm-4 .news-redesign,
.row:has(> .col-sm-8 #egon-embedded-app-menu) > .col-sm-8 .orderoverview-redesign,
.row:has(> .col-sm-8 #egon-embedded-app-menu) > .col-sm-8 .upcommingorder-redesign {
	margin-bottom: 20px;
}
#egon-embedded-app-menu .vp-panel { margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL DROPDOWN CHEVRON CONSISTENCY PASS
   Audited every "<SCREEN>-redesign" block for the 3 bug patterns found in
   the Dashboard smart-widget fix. Result: the doubled-row-gap bug and the
   inputunit border-radius specificity collision were isolated to smart —
   no live regression elsewhere. The missing/inconsistent select chevron
   (some screens set appearance:auto and rely on the native OS/browser
   arrow, some set no appearance at all) showed up on every other screen
   with a visible <select>. Same SVG + positioning as the smart-widget fix,
   applied per screen's own existing CSS scope class (no new shared class).
   ratecalc is a special case: its general rule's `background: var(--bg-base)`
   shorthand was silently deleting Bootstrap's own chevron on 3 selects
   (rate_change_type, netz_id, netcharge) — fixed as a side effect, since
   this appends a fresh background-image regardless of what wiped it.
   ═══════════════════════════════════════════════════════════════════════ */
.ratecalc-redesign select.form-control,
.ratecalc-redesign .form-select,
.neworder-redesign select.form-control,
.neworder-redesign .form-select,
.order-redesign select.form-control,
.customer-redesign select.form-control,
.invitereseller-redesign .ir-form-body select.form-control,
.inviteresellerpublic-redesign .irp-form-body select.form-control,
.registerreseller-redesign select.form-control,
.resellerdata-redesign select.form-control,
.stats-redesign select.st-select,
.stats-redesign select.st-select-wide,
.nachrichten-list-redesign select.nl-select,
.upcommingorder-redesign select.uo-select,
.energydownloads-redesign select.dl-kundenart,
.rc-offer-dialog select.form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	padding-right: 30px;
}
/* end GLOBAL DROPDOWN CHEVRON CONSISTENCY PASS */
/* end DASHBOARD FIXES */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC (Tarifrechner) — "Berechnungsbasis" card overhaul to match the
   reference mockup exactly:
   1. Consumption preset chips: were icon-only (no visible kWh value) with
      values 1400/2400/3400/4400 — now show the reference's exact
      1.500/2.400/3.500/5.000 with a value label under the person-icon row.
   2. Land/PLZ/Ort/Straße/Hausnr. come from the shared Partials/Form/Base
      "vertical" mode, which has no real <label> — same gap already fixed
      on the Dashboard smart-widget via a ::before-injected label; repeated
      here with this screen's own label text ("Hausnr." not "Nr." — this
      is what the reference literally uses for this screen).
   3. Netzbetreiber gets the reference's "automatisch" pill + --bg-field
      background to visually flag it as auto-derived.
   ═══════════════════════════════════════════════════════════════════════ */

/* Preset chips: icon row + value label, both following currentColor so
   active/hover state (already handled by the existing .preset-consum-btn/
   .active rules) colors both automatically. */
.ratecalc-redesign .rc-presets .preset-consum-btn { gap: 6px; }
.ratecalc-redesign .rc-preset-icons { display: flex; align-items: flex-end; height: 16px; color: currentColor; }
.ratecalc-redesign .rc-preset-icons svg { width: 12px; height: 16px; flex: none; }
.ratecalc-redesign .rc-preset-value { font: var(--fw-regular) 11px/16px var(--font-sans); color: currentColor; }

/* Netzbetreiber "automatisch" pill + auto-derived field background */
.ratecalc-redesign .rc-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ratecalc-redesign .rc-label-row .rc-field-label { margin-bottom: 0; }
.ratecalc-redesign .rc-tag-neutral {
	display: inline-flex; align-items: center; height: 16px; padding: 0 5px;
	border-radius: var(--radius-sm); background: var(--tag-neutral-bg);
	color: var(--tag-neutral-fg); font: var(--fw-regular) 11px/1 var(--font-sans);
}
.ratecalc-redesign select.rc-select-field { background: var(--bg-field); }

/* Missing labels on the shared Partials/Form/Base "vertical" fields (Land,
   PLZ, Ort, Straße, Hausnr.) — same ::before technique as the Dashboard
   smart-widget fix, this screen's own label text. */
.ratecalc-redesign .form-group:has(> select[name$="country_id"])::before,
.ratecalc-redesign .form-group:has(> input[name$="zip"])::before,
.ratecalc-redesign .form-group:has(> select[name$="city"])::before,
.ratecalc-redesign .form-group:has(> select[name$="street"])::before,
.ratecalc-redesign .form-group:has(> input[name$="street_number"])::before {
	display: block;
	font: var(--fw-regular) 12px/16px var(--font-sans);
	color: var(--fg-subtle);
	margin-bottom: 5px;
}
.ratecalc-redesign .form-group:has(> select[name$="country_id"])::before { content: "Land"; }
.ratecalc-redesign .form-group:has(> input[name$="zip"])::before { content: "PLZ"; }
.ratecalc-redesign .form-group:has(> select[name$="city"])::before { content: "Ort"; }
.ratecalc-redesign .form-group:has(> select[name$="street"])::before { content: "Straße"; }
.ratecalc-redesign .form-group:has(> input[name$="street_number"])::before { content: "Hausnr."; }
/* end RATECALC BERECHNUNGSBASIS OVERHAUL */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC — "Angaben zum Vergleich" card, Grundversorger laden/zurücksetzen
   actions (shared Partials/Form/Compare.html, also used by ratecalcpublic
   and mobileratecalc — neither has a .ratecalc-redesign ancestor, so these
   rules and the extra classes added alongside the original btn-group/
   btn-block/col-md-* ones are inert there; nothing removed from the shared
   markup, only appended to). Reference: an outline "Grundversorger laden"
   button stacked above a plain, right-aligned "zurücksetzen" text link —
   was a Bootstrap default-blue btn-group pair side by side.
   ═══════════════════════════════════════════════════════════════════════ */
/* flex-wrap (not flex-direction:column) so both buttons stay direct
   siblings of .btn-group, unchanged in the DOM — the outline button takes
   the full first line, the link wraps to its own line and gets pushed
   right by margin-left:auto. No extra wrapper element needed. */
.ratecalc-redesign .rc-compare-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ratecalc-redesign .rc-compare-actions .btn.rc-btn-outline {
	flex: 0 0 100%; width: 100%; height: 32px; border-radius: var(--radius-md);
	background: var(--bg-base); border: 1px solid var(--border-interactive);
	font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-interactive-hover);
}
.ratecalc-redesign .rc-compare-actions .btn.rc-btn-outline:hover { background: var(--bg-highlight); }
.ratecalc-redesign .rc-compare-actions .btn.rc-linkbtn {
	flex: 0 0 auto; margin-left: auto; width: auto; height: auto;
	border: 0; background: transparent; padding: 0;
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive);
}
.ratecalc-redesign .rc-compare-actions .btn.rc-linkbtn:hover { color: var(--fg-interactive-hover); text-decoration: underline; }
/* end RATECALC COMPARE ACTIONS */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC — Filter card (Partials/Form/RateFilter.html) restructured into
   the reference's grouped layout: divider-headed sections (Vertragslaufzeit
   / Preis & Stand / Tarifart / Einschränkungen) with a persistent label
   above each field, reusing the existing .rc-section/.rc-section-head/
   .rc-grid-2 primitives from the Berechnungsbasis card. Option text was
   shortened to match (e.g. "ab 6 Monate" not "Vertragslaufzeit ab 6
   Monate") since the category now lives in the label — only visible text
   changed, every value="" attribute is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.ratecalc-redesign .rc-checkbox-list { display: flex; flex-direction: column; gap: 8px; }
.ratecalc-redesign .rc-checkbox-list .checkbox { margin: 0; }

/* Preisdatum datepicker field: pre-existing bug, newly visible once this
   field got a full-width column instead of a 50%-width one. Bootstrap's
   .input-group is display:flex + flex-wrap:wrap, and the general rule
   ".ratecalc-redesign .form-control { width:100% }" becomes this input's
   flex-basis (flex:1 1 auto keeps flex-basis:auto, which then resolves
   from the element's own width) — at 100% it claims the whole row, so the
   calendar-icon addon has no room left and wraps to its own line. Same
   fix as the existing .rc-input-suffix pattern elsewhere on this screen;
   .input-group/.input-group-text kept (not renamed) so bootstrap-
   datepicker's own JS bindings keep working. */
.ratecalc-redesign .input-group.date { display: flex; align-items: center; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); overflow: hidden; }
.ratecalc-redesign .input-group.date .form-control { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; border: 0; border-radius: 0; }
.ratecalc-redesign .input-group.date .input-group-text {
	flex: none; display: flex; align-items: center; justify-content: center;
	height: 100%; padding: 0 10px; border-left: 1px solid var(--border-base);
	background: var(--bg-subtle-hover); color: var(--fg-muted);
}
.ratecalc-redesign .rc-compare-divider { margin-top: 4px; }
/* end RATECALC FILTER RESTRUCTURE */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC — live "Zusammenfassung" card (reference: reflects the
   calc-basis fields as they're filled in, no calculation needed first).
   Values are written by ratecalc.js's updateLiveSummary(), bound to
   input/change on the whole form.
   ═══════════════════════════════════════════════════════════════════════ */
.ratecalc-redesign .rc-live-summary { display: flex; flex-direction: column; gap: 10px; }
.ratecalc-redesign .rc-live-summary-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ratecalc-redesign .rc-live-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.ratecalc-redesign .rc-live-summary-label { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.ratecalc-redesign .rc-live-summary-value {
	font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ratecalc-redesign .rc-live-summary-value--lg { font: var(--fw-medium) 15px/22px var(--font-sans); }
/* end RATECALC LIVE SUMMARY */

/* ═══════════════════════════════════════════════════════════════════════
   ORDER DETAIL (Auftragsdetailansicht) REDESIGN
   The popup shown in the shared #egon-embedded-window modal when a row in
   the Auftragsübersicht (view/order/grid) is clicked — app/order.js
   listeners.onOpenOrder → onOpenOrderSuccess renders one of
   view/order/overview/{energy,products,phone} as the modal content.
   Deliberately a SEPARATE scope from .order-redesign (the list/search
   screen) — the two never render at the same time and were called out as
   out of scope for each other by the original list-redesign pass. Native
   Bootstrap tab machinery (.nav-tabs/[data-bs-toggle="tab"]/.tab-pane/
   .active) is kept exactly as-is for behavior; only restyled visually.
   Tokens only — no hardcoded hex. Status pill color/text stay the
   data-driven inline bindings (status_color/status_text) — only shape is
   styled here, matching the same rule the list redesign follows.
   The order.js showWindow() call adds additionalClass: 'order-detail-modal'
   on #egon-embedded-window (the {{additionalClass}} slot already exposed
   by tpl/egon.html's shared modal shell) so the modal's own native header/
   close button can be hidden in favor of the richer .od-head built here —
   scoped to that one class so every OTHER screen using the same shared
   modal shell is completely unaffected.
   ═══════════════════════════════════════════════════════════════════════ */

#egon-embedded-window.order-detail-modal .modal-header { display: none; }
#egon-embedded-window.order-detail-modal .modal-dialog { max-width: 1000px; }
#egon-embedded-window.order-detail-modal .modal-body { padding: 0; }
#egon-embedded-window.order-detail-modal .modal-content { border-radius: var(--radius-lg); overflow: hidden; }

.order-detail-redesign {
	font-family: var(--font-sans);
	color: var(--fg-base);
	--od-cols: repeat(2, minmax(0, 1fr));
	--od-address-cols: repeat(2, minmax(0, 1fr));
}
.order-detail-redesign *,
.order-detail-redesign *::before,
.order-detail-redesign *::after { box-sizing: border-box; }

/* ── Header (icon / order no + status pill / subtitle / close) ──────── */
.order-detail-redesign .od-head {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 16px 20px; border-bottom: 1px solid var(--border-base);
}
.order-detail-redesign .od-head-icon {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: var(--radius-md);
	background: var(--bg-highlight); color: var(--fg-interactive); font-size: 17px;
}
.order-detail-redesign .od-head-titles { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.order-detail-redesign .od-head-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-detail-redesign .od-head-order { font: var(--fw-medium) 16px/22px var(--font-sans); color: var(--fg-base); }
.order-detail-redesign .od-status {
	display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
	border-radius: var(--radius-full); font: var(--fw-medium) 11px/1 var(--font-sans);
	color: var(--fg-on-color); font-family: var(--font-sans);
}
.order-detail-redesign .od-head-sub { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }
.order-detail-redesign .od-close {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; margin-top: 2px; border: 1px solid var(--border-base);
	border-radius: var(--radius-md); background: var(--bg-base); color: var(--fg-subtle); cursor: pointer;
}
.order-detail-redesign .od-close:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }

/* ── Tabs (native ul.nav-tabs/li/a[data-bs-toggle="tab"], BS3-compat markup) ── */
.order-detail-redesign .od-tabs {
	display: flex; align-items: stretch; gap: 2px; margin: 0;
	padding: 0 12px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	overflow-x: auto;
}
.order-detail-redesign .od-tabs > li { list-style: none; }
.order-detail-redesign .od-tabs > li > a {
	display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px;
	font: var(--fw-regular) 13px/1 var(--font-sans); color: var(--fg-subtle);
	white-space: nowrap; text-decoration: none; cursor: pointer;
}
.order-detail-redesign .od-tabs > li > a:hover { color: var(--fg-base); text-decoration: none; }
.order-detail-redesign .od-tabs > li.active > a {
	font-weight: var(--fw-medium); color: var(--fg-interactive);
	box-shadow: inset 0 -2px 0 0 var(--bg-interactive);
}
.order-detail-redesign .od-tabs .badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--radius-full);
	background: var(--bg-highlight); font: var(--fw-medium) 10px/1 var(--font-sans); color: var(--fg-interactive);
	float: none;
}

/* ── Body / panes ─────────────────────────────────────────────────────── */
.order-detail-redesign .od-body { padding: 0; max-height: 72vh; overflow-y: auto; }
.order-detail-redesign .od-pane { padding: 20px; }

/* ── Two-column grid + banners ───────────────────────────────────────── */
.order-detail-redesign .od-grid { display: grid; grid-template-columns: var(--od-cols); gap: 16px; align-items: start; }
.order-detail-redesign .od-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.order-detail-redesign .od-col--wide { grid-column: span 1; }
.order-detail-redesign .od-full { grid-column: 1 / -1; }
.order-detail-redesign .od-banner {
	padding: 12px 14px; border-radius: var(--radius-md); font: var(--fw-regular) 13px/20px var(--font-sans);
}
.order-detail-redesign .od-banner h4 { margin: 0 0 4px; font: var(--fw-medium) 14px/20px var(--font-sans); }
.order-detail-redesign .od-banner--info { background: var(--bg-highlight); color: var(--fg-interactive-hover); }
.order-detail-redesign .od-banner--danger { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.order-detail-redesign .od-banners { display: flex; flex-direction: column; gap: 10px; }
.order-detail-redesign .od-banners:not(:empty) { margin-bottom: 16px; }

/* ── Main "Übersicht" 2x2 card grid (matches the reference layout exactly:
   Tarif | Belieferung, Kunde-und-Lieferanschrift | Notiz(+Aktionen)). Cards
   are placed by named grid-area rather than source order, since real data
   needs an extra "Aktionen" card (energy only) that has no counterpart in
   the simpler reference mock — grid-area keeps the visual layout identical
   regardless of where each card actually sits in the template/markup. ── */
.order-detail-redesign .od-grid--main {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
	grid-template-areas: "a b" "c d" "c e";
}
.order-detail-redesign .od-grid--main.od-grid--2row { grid-template-areas: "a b" "c d"; }
/* Tarif (a) stretches to match Belieferung's (b) height in the top grid row —
   the card becomes a flex column itself so its body can grow into the extra
   space, instead of just enlarging an invisible box around a short card. */
.order-detail-redesign .od-cell-a { grid-area: a; align-self: stretch; display: flex; flex-direction: column; }
.order-detail-redesign .od-cell-a > .od-card-body { flex: 1; }
.order-detail-redesign .od-cell-b { grid-area: b; }
.order-detail-redesign .od-cell-c { grid-area: c; }
.order-detail-redesign .od-cell-d { grid-area: d; }
.order-detail-redesign .od-cell-e { grid-area: e; }

/* ── Card (KOPF header + body), the base unit of every panel ────────── */
.order-detail-redesign .od-card { background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-md); overflow: hidden; }
.order-detail-redesign .od-card-head {
	display: flex; align-items: center; gap: 8px; padding: 10px 14px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-base);
}
.order-detail-redesign .od-card-logo { margin-left: auto; height: 26px; max-width: 96px; object-fit: contain; object-position: right center; }
.order-detail-redesign .od-card-body { padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.order-detail-redesign .od-card-body > .btn,
.order-detail-redesign .od-card-body > .form-group,
.order-detail-redesign .od-card-body > .od-hint,
.order-detail-redesign .od-card-body > textarea { margin-top: 8px; }
.order-detail-redesign .od-card-body > .btn:first-child,
.order-detail-redesign .od-card-body > .form-group:first-child { margin-top: 6px; }

/* ── Label/value rows (the "zeile" pattern) ──────────────────────────── */
.order-detail-redesign .od-row {
	display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px;
	padding: 7px 0; border-bottom: 1px solid var(--border-base);
}
.order-detail-redesign .od-row:last-child { border-bottom: 0; }
.order-detail-redesign .od-row-label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.order-detail-redesign .od-row-value { font: var(--fw-regular) 13px/18px var(--font-sans); color: var(--fg-base); text-wrap: pretty; }
.order-detail-redesign .od-row-value--mono { font-family: var(--font-mono); font-size: 12px; }

/* ── Sub-labels + dividers inside a multi-part card (e.g. "Aktionen") ── */
.order-detail-redesign .od-field-label { font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-subtle); margin-bottom: 6px; }
.order-detail-redesign .od-divider { height: 1px; background: var(--border-base); border: 0; margin: 14px 0 12px; }

/* ── Pills (Kündigungsfrist / Preisgarantie / Laufzeit chips) ────────── */
.order-detail-redesign .od-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.order-detail-redesign .od-pill {
	display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
	border-radius: var(--radius-full); background: var(--bg-subtle); border: 1px solid var(--border-base);
	font: var(--fw-regular) 11px/1 var(--font-sans); color: var(--fg-subtle);
}

/* ── Addresses ────────────────────────────────────────────────────────── */
.order-detail-redesign .od-address-grid { display: grid; grid-template-columns: var(--od-address-cols); grid-auto-rows: min-content; align-items: start; gap: 16px; }
/* When a 3rd address card is present (ship_zip branch: Belieferung/Abw. Rechnung/Kontoinhaber),
   give it the full row instead of auto-placing it next to the shorter 2nd card — avoids an
   uneven two-column stack where one column is much taller than the other. */
.order-detail-redesign .od-address-grid > .od-card:nth-child(3) { grid-column: 1 / -1; }
.order-detail-redesign .od-address { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); font-style: normal; margin: 0; }
.order-detail-redesign .od-address strong { font-weight: var(--fw-medium); }
.order-detail-redesign .od-address-meta { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-base); font: var(--fw-regular) 12px/20px var(--font-sans); color: var(--fg-subtle); }
/* Bank/account details as label/value rows (same "zeile" pattern as the
   card-level .od-row), instead of a run of "Label: value" text lines. */
.order-detail-redesign .od-account { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-base); }
.order-detail-redesign .od-account .od-row { grid-template-columns: 60px minmax(0, 1fr); padding: 5px 0; }
.order-detail-redesign .od-address-meta abbr { text-decoration: none; color: var(--fg-muted); }
.order-detail-redesign .od-subhead { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-base); font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); }

/* Contact chips (phone/fax/mobile/mail as small pill buttons, reference style) */
.order-detail-redesign .od-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.order-detail-redesign .od-chip {
	display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px;
	border: 1px solid var(--border-base); border-radius: var(--radius-md);
	background: var(--bg-base); font: var(--fw-regular) 12px/1 var(--font-mono); color: var(--fg-base);
}
.order-detail-redesign .od-chip-abbr { text-decoration: none; color: var(--fg-muted); font-family: var(--font-sans); }

/* Small muted note (e.g. "SEPA-Lastschriftmandat erteilt am ...") */
.order-detail-redesign .od-hint-sm { margin-top: 8px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }

/* Row deliberately kept in markup (data still available to scripts/tests)
   but not shown — already surfaced elsewhere (header title / status pill). */
.order-detail-redesign .od-row--hidden { display: none; }

/* Inline field + button pairs inside a card body (e.g. Aktionen: date input + "setzen") */
.order-detail-redesign .od-field-row { display: flex; gap: 8px; align-items: stretch; }
.order-detail-redesign .od-field-row > .input-group,
.order-detail-redesign .od-field-row > .form-control { flex: 1 1 auto; min-width: 0; }
.order-detail-redesign .od-field-row > .btn { flex: none; height: 36px; }
.order-detail-redesign .od-card-body > .od-field-row { margin-top: 8px; }

/* ── Notice hint / textarea ──────────────────────────────────────────── */
.order-detail-redesign .od-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.order-detail-redesign .od-hint > i { margin-top: 3px; }

/* ── Empty state / comment list ──────────────────────────────────────── */
.order-detail-redesign .od-empty { padding: 40px 20px; text-align: center; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.order-detail-redesign .od-comment {
	display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border-base);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base);
}
.order-detail-redesign .od-comment:last-child { border-bottom: 0; }
.order-detail-redesign .od-comment .bi-info-circle-fill { color: var(--fg-interactive); margin-top: 3px; }

/* ── Documents grid (tab_dokumente) ──────────────────────────────────── */
.order-detail-redesign .od-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.order-detail-redesign .od-doc-card { display: flex; flex-direction: column; background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-md); overflow: hidden; }
.order-detail-redesign .od-doc-thumb-wrap {
	position: relative; display: flex; align-items: center; justify-content: center;
	height: 96px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-base); overflow: hidden;
}
.order-detail-redesign .od-doc-thumb-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--fg-disabled); }
.order-detail-redesign .od-doc-thumb { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.order-detail-redesign .od-doc-audio { display: block; width: 100%; }
.order-detail-redesign .od-doc-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.order-detail-redesign .od-doc-title { font: var(--fw-medium) 13px/18px var(--font-sans); color: var(--fg-base); }
.order-detail-redesign .od-doc-desc { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-muted); }
.order-detail-redesign .od-doc-actions { display: flex; gap: 6px; margin-top: 6px; }
.order-detail-redesign .od-doc-notice { margin: 0; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.order-detail-redesign .od-doc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.order-detail-redesign .od-doc-delete { color: var(--fg-error); border-color: var(--tag-red-bg-hover); }

/* ── Full-width dashed action banners (Dokumente tab: upload / regenerate) ── */
.order-detail-redesign .od-banner-row {
	display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
	border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); flex-wrap: wrap;
}
.order-detail-redesign .od-banner-row-icon {
	flex: none; display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font-size: 15px;
}
.order-detail-redesign .od-banner-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 160px; flex: 1 1 auto; }
.order-detail-redesign .od-banner-row-title { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.order-detail-redesign .od-banner-row-text { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.order-detail-redesign .od-banner-row-select { flex: 1 1 160px; width: auto; height: 32px; }
.order-detail-redesign .od-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ── Native Bootstrap primitives reused inside the redesigned popup ──── */
.order-detail-redesign .form-group { margin: 0 0 8px; min-width: 0; }
.order-detail-redesign .form-group:last-child { margin-bottom: 0; }
.order-detail-redesign .form-control,
.order-detail-redesign select.form-control {
	width: 100%; height: 36px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-shadow: none; appearance: auto;
}
.order-detail-redesign textarea.form-control { height: auto; min-height: 76px; padding: 9px 10px; resize: vertical; }
.order-detail-redesign .form-control:focus,
.order-detail-redesign select.form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.order-detail-redesign .form-control::placeholder { color: var(--fg-muted); }
.order-detail-redesign input[type="file"] { display: block; width: 100%; margin: 8px 0; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.order-detail-redesign .input-group.date {
	display: flex; align-items: center; height: 36px; border: 1px solid var(--border-strong);
	border-radius: var(--radius-md); background: var(--bg-base); overflow: hidden;
}
.order-detail-redesign .input-group.date .form-control { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; border: 0; border-radius: 0; }
.order-detail-redesign .input-group.date .input-group-text {
	flex: none; display: flex; align-items: center; justify-content: center;
	height: 100%; padding: 0 10px; border-left: 1px solid var(--border-base);
	background: var(--bg-subtle-hover); color: var(--fg-muted);
}

.order-detail-redesign .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent;
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; float: none;
}
/* Buttons sitting directly in a card body (a column flex) default to
   stretch (cross-axis = width) like any other flex child — pin them to
   content width instead, so a lone action button isn't a full-width bar. */
.order-detail-redesign .od-card-body > .btn { align-self: flex-start; }
.order-detail-redesign .btn-secondary,
.order-detail-redesign .btn-default { background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base); }
.order-detail-redesign .btn-secondary:hover,
.order-detail-redesign .btn-default:hover { background: var(--bg-subtle-hover); color: var(--fg-base); text-decoration: none; }
.order-detail-redesign .btn-primary { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); }
.order-detail-redesign .btn-primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.order-detail-redesign .btn-primary:disabled { background: var(--bg-disabled); border-color: var(--border-base); color: var(--fg-disabled); cursor: default; }
.order-detail-redesign .btn-block { width: 100%; align-self: stretch; }
.order-detail-redesign .btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.order-detail-redesign .text-danger { color: var(--fg-error); }

/* Provision tab keeps a plain <table> (no dedicated card system was designed
   for it — out of scope, it doesn't appear in the reference popup at all) —
   still retinted with tokens so it doesn't look like an unstyled leftover. */
.order-detail-redesign table.table {
	width: 100%; margin: 0; border-collapse: collapse; border: 1px solid var(--border-base);
	border-radius: var(--radius-md); overflow: hidden;
	--bs-table-bg: var(--bg-base); --bs-table-striped-bg: var(--bg-subtle); --bs-table-border-color: var(--border-row);
}
.order-detail-redesign table.table thead th {
	padding: 10px 14px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); text-align: left;
}
.order-detail-redesign table.table tbody td {
	padding: 9px 14px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base);
}

/* ── Responsive token flips ──────────────────────────────────────────── */
@media (max-width: 1023px) {
	.order-detail-redesign .od-doc-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 899px) {
	.order-detail-redesign { --od-cols: minmax(0, 1fr); --od-address-cols: repeat(2, minmax(0, 1fr)); }
	.order-detail-redesign .od-grid--main,
	.order-detail-redesign .od-grid--main.od-grid--2row {
		grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e";
	}
}
@media (max-width: 767px) {
	.order-detail-redesign { --od-address-cols: minmax(0, 1fr); }
	.order-detail-redesign .od-head { padding: 14px 16px; }
	.order-detail-redesign .od-pane { padding: 16px; }
	.order-detail-redesign .od-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 639px) {
	.order-detail-redesign .od-head-sub { display: none; }
	.order-detail-redesign .btn { min-height: 42px; }
	.order-detail-redesign .od-doc-grid { grid-template-columns: 1fr; }
}
/* end ORDER DETAIL REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   ORDERQUESTION ("Anfrage zum Vertrag") REDESIGN
   A standalone embedded egon.app (lib/workspace/final/{tpl,app}/orderquestion),
   not a Partial — reused as-is inside four host popups (order, ordercontrolling,
   mobileorder, statustableat). Given its own self-contained scope
   (.orderquestion-redesign) rather than nesting under .order-detail-redesign,
   so it renders correctly wherever it's embedded, independent of whether that
   host screen has been redesigned. Reference: the "Anfrage zum Vertrag" tab
   of auftrag-dialog.js (operator-supplied redesign export). Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.orderquestion-redesign { font-family: var(--font-sans); color: var(--fg-base); padding: 20px; }
.orderquestion-redesign *,
.orderquestion-redesign *::before,
.orderquestion-redesign *::after { box-sizing: border-box; }

.orderquestion-redesign .oq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; margin: 0; }
.orderquestion-redesign .oq-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.orderquestion-redesign .oq-formular { display: flex; flex-direction: column; gap: 14px; }

.orderquestion-redesign .oq-field { display: flex; flex-direction: column; gap: 6px; }
.orderquestion-redesign .oq-field-head { display: flex; align-items: center; gap: 8px; }
.orderquestion-redesign .oq-label { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); }
.orderquestion-redesign .oq-counter { margin-left: auto; font: var(--fw-regular) 11px/16px var(--font-mono); color: var(--fg-muted); }

.orderquestion-redesign .form-control {
	width: 100%; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base); font: var(--fw-regular) 13px/20px var(--font-sans); box-shadow: none;
}
.orderquestion-redesign textarea.form-control { resize: vertical; min-height: 130px; }
.orderquestion-redesign .form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }

.orderquestion-redesign .oq-dropzone {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px; flex-wrap: wrap;
	border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle);
}
.orderquestion-redesign .oq-dropzone-icon { flex: none; display: flex; color: var(--fg-muted); font-size: 15px; }
.orderquestion-redesign .oq-dropzone-text { flex: 1 1 160px; min-width: 0; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.orderquestion-redesign .oq-dropzone-files { display: block; margin-top: 2px; font: var(--fw-regular) 11px/16px var(--font-mono); color: var(--fg-muted); word-break: break-all; }
.orderquestion-redesign .oq-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.orderquestion-redesign .oq-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); margin: 0; }
.orderquestion-redesign .oq-checkbox input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--bg-interactive); }

.orderquestion-redesign .oq-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border-base); }
.orderquestion-redesign .oq-hint { flex: 1 1 160px; min-width: 0; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }

.orderquestion-redesign .oq-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
	background: var(--bg-base); color: var(--fg-base); font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer;
}
.orderquestion-redesign .oq-btn--secondary:hover { background: var(--bg-subtle-hover); }
.orderquestion-redesign .oq-btn--send { height: 36px; padding: 0 16px; border-color: var(--border-interactive); background: var(--bg-interactive); color: var(--fg-on-color); }
.orderquestion-redesign .oq-btn--send:hover { background: var(--bg-interactive-hover); }
.orderquestion-redesign .oq-btn--send:disabled,
.orderquestion-redesign .oq-btn--send[disabled] { background: var(--bg-disabled); border-color: var(--border-base); color: var(--fg-disabled); cursor: default; }

.orderquestion-redesign .oq-erfolg { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px 44px; text-align: center; }
.orderquestion-redesign .oq-erfolg.is-visible { display: flex; }
.orderquestion-redesign .oq-erfolg-icon {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full);
	background: var(--tag-green-bg); color: var(--tag-green-fg); font-size: 20px;
}
.orderquestion-redesign .oq-erfolg-title { font: var(--fw-medium) 15px/22px var(--font-sans); color: var(--fg-base); }
.orderquestion-redesign .oq-erfolg-text { max-width: 420px; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }

.orderquestion-redesign .oq-side { background: var(--bg-subtle); border: 1px solid var(--border-base); border-radius: var(--radius-md); overflow: hidden; }
.orderquestion-redesign .oq-side-head {
	padding: 10px 14px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle-hover);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-base);
}
.orderquestion-redesign .oq-side-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.orderquestion-redesign .oq-side-hint { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.orderquestion-redesign .oq-side-order { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); }
.orderquestion-redesign .oq-side-meta { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }

@media (max-width: 639px) {
	.orderquestion-redesign .oq-grid { grid-template-columns: 1fr; }
}
/* end ORDERQUESTION REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL MODAL CLOSE-BUTTON FIX — every popup, not one screen's redesign.
   The shared modal shell (tpl/egon.html, view/egon/window, used by every
   $egon.tools.showWindow() call across the whole app) marks its dismiss
   button with the legacy Bootstrap 3/4 class `.close`. components.css only
   sets that class's color, not its position; it was never migrated to
   Bootstrap 5's `.btn-close`, which is the only class BS5's own
   `.modal-header` rule pushes right via margin-left:auto.
   The markup order is <button class="close"> THEN <h4 class="modal-title">
   — margin-left:auto on the button alone only shoves the [button][title]
   PAIR rightward together (flex items keep their source sequence), landing
   the button in the middle with the title trailing past it to the true
   right edge, not the button itself at the corner. Reordering visually
   (order:) rather than editing the shared template's markup: title first,
   button last, THEN margin-left:auto on the (now last) button pushes only
   itself to the corner.
   ═══════════════════════════════════════════════════════════════════════ */
.modal-header .modal-title { order: 1; }
.modal-header .close { order: 2; margin-left: auto; }
/* end GLOBAL MODAL CLOSE-BUTTON FIX */

/* ═══════════════════════════════════════════════════════════════════════
   ORDER LIST — status pill text-centering fix.
   Legacy pre-fence rule `#egon-embedded-order-grid td kbd` (id selector,
   specificity beats .order-redesign .or-pill) fixes the pill at width:40px
   AND display:inline-block. 4-digit status codes at 11px don't fit the
   ~24px of content space that leaves (border-box, minus the .or-pill
   rule's own 0 8px padding), so the text overflows past the pill's
   rounded background horizontally — and, separately, the legacy rule's
   inline-block (height:22px, line-height:11px from .or-pill, no flex)
   leaves the single line of text sitting at the top of the pill instead
   of vertically centered, since text-align:center alone only centers
   horizontally. Overriding with a same-file, higher-specificity rule
   (adds the .or-pill class to the legacy selector) rather than editing
   the legacy rule itself — width becomes a floor, not a cap, and display
   is restored to the same inline-flex/align-items/justify-content the
   main .or-pill rule already declares (it just never won the cascade).
   ═══════════════════════════════════════════════════════════════════════ */
#egon-embedded-order-grid td kbd.or-pill {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; min-width: 40px;
}
/* end ORDER LIST STATUS PILL FIX */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — grid/list & detail mockup alignment follow-up
   Structural/spacing fixes lining up view/customer/grid and
   view/customer/detail with the Kunden.dc.html / Kundenansicht.dc.html
   reference mockups: proportional table columns + responsive column
   hiding, the Kundenstammdaten filter row's zip/city sub-row correctly
   filling its two grid tracks, primary-button treatment on the "neuer
   Kunde" / "speichern" actions, a "Pflichtfelder mit *" hint on the
   Stammdaten section, a sticky detail-form footer, and empty-state
   padding. No Partial file touched; tokens only. Appended at the true
   end of the file (not inside the three earlier CUSTOMER REDESIGN
   blocks above) so the append-only invariant check stays clean — same
   selectors, cascade order still gives these rules the final say.
   ═══════════════════════════════════════════════════════════════════════ */

/* Kundenstammdaten filter row: Partials/Form/Base's default (vertical)
   branch renders zip+city as one .row.input-row wrapping two flex
   children (already flex:1 each via the generic .row.input-row rule
   above) — give that wrapper 2 of the group's 4 grid tracks so
   country_id / zip+city / Name-Firma fill the row exactly instead of
   leaving a dangling empty 4th track. */
.customer-redesign .cu-filter-card .cu-group-grid > .row.input-row { grid-column: span 2; }

/* Results table: proportional column widths matching the mockup's column
   set (ID/angelegt, Kunde, primäre Anschrift, Verträge, Erinnerungen,
   action) — table-layout:fixed is already set on .cu-table. Erinnerungen
   stays unset/flexible, same as the mockup. */
.customer-redesign .cu-table thead th.cu-th-customer,
.customer-redesign .cu-table tbody td.cu-th-customer { width: 222px; }
.customer-redesign .cu-table thead th.cu-th-address,
.customer-redesign .cu-table tbody td.cu-th-address { width: 266px; }
.customer-redesign .cu-table thead th.cu-th-contracts,
.customer-redesign .cu-table tbody td.cu-th-contracts { width: 168px; }
/* Mobile fallback: primäre Anschrift's city shown inline under the Kunde
   cell once that column is hidden below 767px (see media block below). */
.customer-redesign .cu-mobile-sub {
	display: none; font: var(--fw-regular) 11px/16px var(--font-sans);
	color: var(--fg-muted); overflow-wrap: anywhere;
}

/* Stammdaten section head: "Pflichtfelder mit *" hint, right-aligned,
   matching the mockup (Kontaktdaten/Bankverbindung heads carry no hint). */
.customer-redesign .cu-form-section-head .cu-required-hint {
	margin-left: auto; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.customer-redesign .cu-required-mark { color: var(--fg-error); }

/* Detail edit-form footer: sticky at the bottom of its scroll container on
   a solid (not subtle) background with a fixed 56px row, matching the
   mockup's save bar. */
.customer-redesign .cu-form-footer {
	position: sticky; bottom: 0; z-index: 20; align-items: center;
	height: 56px; padding: 0 20px; background: var(--bg-base);
}

/* Empty state padding, matching the mockup exactly (shared by the grid's
   empty state and the Verträge/Bestand tab empty states). */
.customer-redesign .cu-empty { padding: 64px 20px 72px; }

@media (max-width: 1023px) {
	.customer-redesign .cu-table thead th.cu-th-contracts,
	.customer-redesign .cu-table tbody td.cu-th-contracts { display: none; }
}
@media (max-width: 767px) {
	.customer-redesign .cu-table thead th.cu-th-address,
	.customer-redesign .cu-table tbody td.cu-th-address,
	.customer-redesign .cu-table thead th.cu-th-reminders,
	.customer-redesign .cu-table tbody td.cu-th-reminders { display: none; }
	.customer-redesign .cu-mobile-sub { display: block; }
}
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   PROVISION REDESIGN (Provisionen — page "Verdienst")
   Sidebar (view/provision): Karrierestufe/Land/Datum/Folge- + Sonderprovision
   filters restyled into the same filter-card language as order/settlement
   (.form-group/.checkbox/.btn kept native, restyled via tokens — no field
   partials rewritten). The results area (view/provision/view — one card per
   provider, a deeply Handlebars-nested Tarif/Verbrauchsgruppe/Provision table
   inside each) is intentionally CSS-ONLY: not one character of that template
   was touched. Its `{{#rates}}/{{#compare}}/{{#prov}}` nesting is unusually
   deep (many `../../../` context lookups) and byte-fragile, so this pass
   reaches every row purely through the pre-existing `.panel`/`.panel-default`/
   `.panel-body`/`.table`/`.table-bordered`/`.table-hover`/`.checkbox`/
   `.clearfix`/`.float-start`/`.float-end` classes already on that markup —
   same "keep native, restyle in place" technique the `energydownloads` pass
   used for its own `.panel-collapse` structure. `view/provision/print` (a
   self-contained print/PDF `<html>` document, unrelated rendering context) is
   out of scope, untouched. Tokens only. Responsive via a --pv-cols flip at
   1023 (sidebar stacks below main; the sidebar's own hidden-sm/hidden-xs still
   hides its *content* below that width exactly as before — this pass only
   removes the resulting empty grid gap).
   ═══════════════════════════════════════════════════════════════════════ */

.provision-redesign {
	--pv-cols: minmax(0, 1fr) 300px;
	font-family: var(--font-sans);
	color: var(--fg-base);
}
.provision-redesign *,
.provision-redesign *::before,
.provision-redesign *::after { box-sizing: border-box; }

.provision-redesign .pv-layout { display: grid; grid-template-columns: var(--pv-cols); gap: 16px; align-items: start; }
.provision-redesign .pv-main,
.provision-redesign .pv-sidebar-col { min-width: 0; }

/* ── Sidebar cards (Karrierestufe/Filter + Anbieter) ─────────────────── */
.provision-redesign .pv-sidebar { display: flex; flex-direction: column; gap: 16px; }
.provision-redesign .pv-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden;
}
.provision-redesign .pv-card-head {
	display: flex; align-items: center; gap: 8px; padding: 12px 16px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base);
}
.provision-redesign .pv-card-head .fa { color: var(--fg-muted); }
.provision-redesign .pv-card-body { padding: 16px; }

.provision-redesign .form-control,
.provision-redesign select.form-control {
	width: 100%; height: 36px; padding: 0 10px; margin-bottom: 12px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-shadow: none; appearance: auto;
}
.provision-redesign select.form-control { padding: 0 8px; }
.provision-redesign .form-control:focus,
.provision-redesign select.form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.provision-redesign .form-control.hidden { display: none; margin-bottom: 0; }

.provision-redesign .pv-filter-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.provision-redesign .pv-filter-form .form-group { margin: 0; }
.provision-redesign .pv-filter-form .form-control { margin-bottom: 0; }
.provision-redesign .pv-field-label {
	display: block; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin-bottom: 5px;
}
.provision-redesign .input-group.date { display: flex; flex-wrap: nowrap; align-items: stretch; }
.provision-redesign .input-group.date .form-control { flex: 1 1 auto; width: auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.provision-redesign .input-group.date .input-group-text {
	display: flex; flex: none; align-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-left: 0;
	border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
	background: var(--bg-subtle); color: var(--fg-muted);
}

.provision-redesign .checkbox { margin: 0; padding-left: 0; }
.provision-redesign .checkbox label { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 0; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); cursor: pointer; }
.provision-redesign .checkbox input[type="checkbox"] {
	position: static !important; float: none !important; margin: 0 !important; flex: none;
	width: 16px; height: 16px; accent-color: var(--bg-interactive);
}
.provision-redesign .checkbox + .checkbox { margin-top: 8px; }

.provision-redesign .pv-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.provision-redesign .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent;
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; float: none; width: 100%;
}
.provision-redesign .btn-secondary { background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base); }
.provision-redesign .btn-secondary:hover { background: var(--bg-subtle-hover); }
.provision-redesign .btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }

.provision-redesign .pv-hint { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-base); color: var(--fg-muted); }
.provision-redesign .pv-hint small { font: var(--fw-regular) 12px/18px var(--font-sans); }
/* Anbieter card: the hint is a lead-in description (first child), not a trailing note — no divider */
.provision-redesign .pv-card-body > .pv-hint:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Main content title (view/provision/view h3) ─────────────────────── */
.provision-redesign .pv-main h3 { margin: 0 0 16px; font: var(--fw-medium) var(--txt-large)/var(--lh-large) var(--font-sans); color: var(--fg-base); }
.provision-redesign .pv-main h3 .text-primary { color: var(--fg-interactive); }

/* ── Provider result cards — CSS-only restyle of the untouched
   view/provision/view markup (.panel/.panel-default/.panel-body/.table/…) ── */
.provision-redesign .pv-main .panel.panel-default {
	background: var(--bg-base); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	margin-bottom: 16px; overflow: hidden;
}
.provision-redesign .pv-main .panel-body { padding: 16px 20px; }
.provision-redesign .pv-main .panel-body > .clearfix { display: flex; align-items: flex-start; gap: 14px; }
.provision-redesign .pv-main .panel-body > .clearfix::before,
.provision-redesign .pv-main .panel-body > .clearfix::after { content: none; }
.provision-redesign .pv-main .float-start,
.provision-redesign .pv-main .float-end { float: none; }
.provision-redesign .pv-main .float-end { margin-left: auto; }
.provision-redesign .pv-main .provider_image img { border-radius: var(--radius-sm); }
.provision-redesign .pv-main h4 { font: var(--fw-medium) 15px/22px var(--font-sans); color: var(--fg-base); margin: 0; }
.provision-redesign .pv-main h4 small { display: block; margin-top: 4px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
.provision-redesign .pv-main h4 a { color: var(--fg-interactive); text-decoration: none; }
.provision-redesign .pv-main h4 a:hover { color: var(--fg-interactive-hover); }
.provision-redesign .pv-main .panel-body > .clearfix .checkbox label { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); white-space: nowrap; }
.provision-redesign .pv-main .panel-collapse > h4:first-child { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base); margin: 16px 0 8px; }
/* the rates table has no .table-responsive wrapper of its own (untouched markup) —
   give its container the scroll instead, so narrow viewports scroll the table,
   not the page */
.provision-redesign .pv-main .panel-collapse { overflow-x: auto; }

.provision-redesign .pv-main table.table {
	width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; table-layout: auto;
	--bs-table-bg: var(--bg-base);
	--bs-table-striped-bg: var(--bg-subtle);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.provision-redesign .pv-main table.table > thead > tr > th {
	text-align: left; padding: 8px; border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.provision-redesign .pv-main table.table > tbody > tr > th[colspan] {
	background: var(--bg-subtle); color: var(--fg-base); font: var(--fw-medium) 12px/18px var(--font-sans);
	padding: 8px; border-top: 1px solid var(--border-base); border-bottom: 1px solid var(--border-base);
}
.provision-redesign .pv-main table.table > tbody > tr > td {
	padding: 10px 8px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: top;
}
.provision-redesign .pv-main table.table.table-hover > tbody > tr:hover > td { background: var(--bg-highlight); }
.provision-redesign .pv-main table.table small.text-danger { color: var(--fg-error); }
.provision-redesign .pv-main table.table .flag-icon { margin-right: 2px; }

/* ── Responsive token flips ──────────────────────────────────────────── */
@media (max-width: 1023px) {
	.provision-redesign { --pv-cols: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.provision-redesign .pv-card-body { padding: 14px; }
	.provision-redesign .pv-main .panel-body { padding: 14px 16px; }
	.provision-redesign .pv-main .panel-body > .clearfix { flex-wrap: wrap; }
}
/* end PROVISION REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — Schnellsuche / Schnellfilter / aktive Filter (list
   screen search card)
   Approved addition: a quick-search input above Kundenstammdaten, two
   date-preset chips under Belieferung & Vertragsende, and a dynamic
   active-filter chip row + "Filter leeren" above the existing
   "aktualisieren" button (tpl/customer.html, view/customer). All three are
   driven by app/customer.js through the existing form.search +
   filtercustomerlist pipeline — no new backend param, no parallel filter
   mechanism. Tokens only; appended at the true end of the file.
   ═══════════════════════════════════════════════════════════════════════ */

/* Schnellsuche */
.customer-redesign .cu-quicksearch-group { gap: 5px; }
.customer-redesign .cu-quicksearch-box {
	display: flex; align-items: center; height: 38px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); overflow: hidden;
}
.customer-redesign .cu-quicksearch-box .fa {
	display: flex; align-items: center; padding: 0 10px; color: var(--fg-muted);
}
.customer-redesign .cu-quicksearch-input {
	flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 0; border: 0;
	background: transparent; font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base);
}
.customer-redesign .cu-quicksearch-input:focus { outline: none; }
.customer-redesign .cu-quicksearch-input::placeholder { color: var(--fg-muted); }

/* Schnellfilter preset chips (Belieferung & Vertragsende) */
.customer-redesign .cu-quickfilter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.customer-redesign .cu-quickfilter-label { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin-right: 2px; }
.customer-redesign .cu-preset-chip {
	height: 28px; padding: 0 11px; border-radius: 9999px;
	border: 1px solid var(--border-strong); background: var(--bg-base);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-subtle); cursor: pointer;
}
.customer-redesign .cu-preset-chip:hover { background: var(--bg-subtle-hover); }

/* Filter footer: active-filter chips + "Filter leeren" alongside the
   existing primary search button (same selector as the original rule —
   only justify-content/wrap/gap are overridden here; display/padding-top/
   border-top still come from the earlier block). */
.customer-redesign .cu-filter-footer { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.customer-redesign .cu-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.customer-redesign .cu-chip-label { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-muted); margin-right: 2px; }
.customer-redesign .cu-chip-empty { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-disabled); }
.customer-redesign .cu-chip {
	display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 9px;
	border-radius: 9999px; background: var(--bg-highlight); border: 1px solid var(--bg-highlight-hover);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-interactive-hover);
}
.customer-redesign .cu-chip-remove {
	display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
	border-radius: 9999px; cursor: pointer; color: inherit;
}
.customer-redesign .cu-chip-remove:hover { background: var(--bg-highlight-hover); }
.customer-redesign .cu-chip-remove .fa { font-size: 10px; }
.customer-redesign .cu-reset-btn {
	border: 0; background: transparent; padding: 0; flex: none;
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive); cursor: pointer;
}
.customer-redesign .cu-reset-btn:hover { color: var(--fg-interactive-hover); }

@media (max-width: 767px) {
	.customer-redesign .cu-filter-footer { flex-direction: column; align-items: stretch; }
	.customer-redesign .cu-chip-row { order: -1; }
	.customer-redesign .cu-reset-btn { text-align: left; }
}
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERACCESS REDESIGN (Unterzugänge — embedded in Account/"Vertrieb",
   page 69, its own tab; deliberately left untouched by the resellerdata
   pass per that pass's own note). Table/toolbar/empty-state restyled to the
   same order/settlement/provision recipe. The dead, HTML-commented-out
   "Berechtigung" permission-changer cell is untouched (still commented out).
   Tokens only. Responsive via 767/639, matching the rest of the app.
   ═══════════════════════════════════════════════════════════════════════ */

.reselleraccess-redesign { font-family: var(--font-sans); color: var(--fg-base); }
.reselleraccess-redesign *,
.reselleraccess-redesign *::before,
.reselleraccess-redesign *::after { box-sizing: border-box; }

.reselleraccess-redesign .ra-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.reselleraccess-redesign .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent;
	font: var(--fw-medium) 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; float: none;
}
.reselleraccess-redesign .btn-secondary { background: var(--bg-base); border-color: var(--border-strong); color: var(--fg-base); }
.reselleraccess-redesign .btn-secondary:hover { background: var(--bg-subtle-hover); }
.reselleraccess-redesign .btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }

.reselleraccess-redesign .ra-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden;
}
/* position:relative so the dead, absolutely-positioned .visually-hidden
   "Berechtigung" cell (BS5's .visually-hidden — position:absolute) resolves
   its containing block to this scroll container, not an unconstrained
   ancestor — otherwise the browser's table layout miscalculates document-
   level scrollWidth once the table is wider than the viewport. */
.reselleraccess-redesign .ra-table-wrap { position: relative; overflow-x: auto; }
.reselleraccess-redesign .ra-table {
	width: 100%; min-width: 640px; margin: 0; border-collapse: collapse;
	--bs-table-bg: var(--bg-base);
	--bs-table-striped-bg: var(--bg-subtle);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.reselleraccess-redesign .ra-table thead th {
	text-align: left; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.reselleraccess-redesign .ra-table thead th:first-child { padding-left: 20px; }
.reselleraccess-redesign .ra-table thead th.ra-th-right { text-align: right; padding-right: 20px; }
.reselleraccess-redesign .ra-table tbody td {
	padding: 11px 8px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: middle;
}
.reselleraccess-redesign .ra-table tbody td:first-child { padding-left: 20px; }
.reselleraccess-redesign .ra-table tbody td:last-child { padding-right: 20px; }
.reselleraccess-redesign .ra-table tbody tr:last-child td { border-bottom: 0; }
.reselleraccess-redesign .ra-table tbody tr:hover td { background: var(--bg-highlight); }
.reselleraccess-redesign .ra-table td.ra-td-muted { color: var(--fg-subtle); }
.reselleraccess-redesign .ra-table td.ra-td-mono { font-family: var(--font-mono); color: var(--fg-subtle); }
.reselleraccess-redesign .ra-table td.ra-td-right { text-align: right; }
.reselleraccess-redesign .ra-table tr.ra-row--disabled td { color: var(--fg-disabled); }

.reselleraccess-redesign .ra-status-link {
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-error); text-decoration: none;
}
.reselleraccess-redesign .ra-status-link:hover { text-decoration: underline; }
.reselleraccess-redesign .ra-status-link.ra-status-link--enable { color: var(--tag-green-fg); }

.reselleraccess-redesign .ra-empty {
	padding: 56px 20px 64px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.reselleraccess-redesign .ra-empty-icon {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border-radius: 9999px; background: var(--bg-subtle); border: 1px solid var(--border-base); color: var(--fg-muted);
	font-size: 18px;
}
.reselleraccess-redesign .ra-empty-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }

@media (max-width: 767px) {
	.reselleraccess-redesign .ra-table thead th.ra-th-right { padding-right: 12px; }
	.reselleraccess-redesign .ra-table tbody td.ra-td-right { padding-right: 12px; }
}
/* end RESELLERACCESS REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   PHONEPROVISION REDESIGN (Telefonie-Provisionsübersicht, embedded via a
   "Produkte" host page). Same table language as provision/reselleraccess.
   The outer .row/.col-md-8/.col-md-4 grid is DELIBERATELY left in place
   (not converted to the .pv-layout CSS-grid pattern used elsewhere) —
   app/phoneprovision.js calls jQuery(...).scrollToFixed() on the sidebar,
   which measures/pins the element via its Bootstrap-grid-computed width;
   swapping the grid system risked changing that measurement. Only the
   panels/table inside are restyled. No `../` anywhere in this template
   (verified), so the table markup itself was safe to restyle directly
   (not CSS-only like provision's). Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */

.phoneprovision-redesign { font-family: var(--font-sans); color: var(--fg-base); }
.phoneprovision-redesign *,
.phoneprovision-redesign *::before,
.phoneprovision-redesign *::after { box-sizing: border-box; }

.phoneprovision-redesign .pp-sidebar { display: flex; flex-direction: column; gap: 16px; }
.phoneprovision-redesign .pp-card {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden;
}
.phoneprovision-redesign .pp-card-head {
	display: flex; align-items: center; gap: 8px; padding: 12px 16px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-subtle);
	font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-base);
}
.phoneprovision-redesign .pp-card-head .fa { color: var(--fg-muted); }
.phoneprovision-redesign .pp-card-body { padding: 16px; }
.phoneprovision-redesign .pp-card + .pp-card { margin-top: 16px; }

.phoneprovision-redesign .form-control,
.phoneprovision-redesign select.form-control {
	width: 100%; height: 36px; padding: 0 10px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); color: var(--fg-base);
	font: var(--fw-regular) 13px/22px var(--font-sans); box-shadow: none; appearance: auto;
}
.phoneprovision-redesign .form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }

.phoneprovision-redesign .pp-table-wrap { position: relative; overflow-x: auto; }
.phoneprovision-redesign .pp-table {
	width: 100%; min-width: 560px; margin: 0; border-collapse: collapse;
	--bs-table-bg: var(--bg-base);
	--bs-table-striped-bg: var(--bg-subtle);
	--bs-table-hover-bg: var(--bg-highlight);
	--bs-table-border-color: var(--border-row);
}
.phoneprovision-redesign .pp-table thead th {
	text-align: left; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-muted); white-space: nowrap;
}
.phoneprovision-redesign .pp-table thead th:first-child { padding-left: 20px; }
.phoneprovision-redesign .pp-table tbody td {
	padding: 11px 8px; border-bottom: 1px solid var(--border-row);
	font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); vertical-align: middle;
}
.phoneprovision-redesign .pp-table tbody td:first-child { padding-left: 20px; }
.phoneprovision-redesign .pp-table tbody tr:last-child td { border-bottom: 0; }
.phoneprovision-redesign .pp-table tbody tr:hover td { background: var(--bg-highlight); }
.phoneprovision-redesign .pp-table td.pp-td-muted { color: var(--fg-subtle); }
.phoneprovision-redesign .pp-table td.pp-td-right { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
	.phoneprovision-redesign .pp-card-body { padding: 14px; }
}
/* end PHONEPROVISION REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   INVITERESELLER REDESIGN v3 (Mitarbeiter einladen — polish pass)
   Additive fixes on top of the v2 block above: required-field markers
   (the "Pflicht *" head hint + the two fields that render their own
   markup outside Partials/Form/Base+Contact), the side/CTA card header
   treatment matching the Mitarbeiter-einladen reference 1:1 (a plain
   title line in the padded card, not the divider-bar header the form
   card uses), the "Ablauf" step-number centering fix, and the submit
   button size/position. v2 above is append-only (never edited in place —
   see project convention at the top of the v2 block); every fix here is
   a higher-specificity or later-order override of a v2 rule, not an edit
   of it. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */

/* v2's ".ir-steps li span" (meant only for each step's description text)
   also matches the "1/2/3" badge span since it has no wrapping <div> in
   its own selector chain — same element, higher specificity via the
   compound "span.ir-step-no" — so it wins and clobbers the badge's
   display:flex/centering with block + body text sizing. Re-assert the
   badge's own styling with a selector specific enough to always win. */
.invitereseller-redesign .ir-steps li span.ir-step-no { display: flex; align-items: center; justify-content: center; font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--fg-interactive); }

/* Submit button: smaller, right-aligned (was full-width). Same selectors
   as v2, appended later so these declarations win the cascade. */
.invitereseller-redesign .ir-form-footer { justify-content: flex-end; }
.invitereseller-redesign .ir-form-footer .btn.btn-primary.btn-block { width: auto; height: 32px; padding: 0 14px; }

.invitereseller-redesign .ir-panel--form .ir-panel-head { display: flex; align-items: center; gap: 10px; }
.invitereseller-redesign .ir-required-hint { margin-left: auto; font: var(--fw-regular) 11px/16px var(--font-sans); color: var(--fg-muted); }
.invitereseller-redesign .ir-required-hint .text-danger,
.invitereseller-redesign .form-group.ir-consent .text-danger,
.invitereseller-redesign .ir-form-body label .text-danger {
	/* !important: Bootstrap's own ".text-danger" utility is itself
	   !important, and (pre-existing, unrelated to this change) resolves
	   to an invalid rgba() — components-bs5.css maps --bs-danger-rgb
	   straight to --fg-error's hex string instead of an r,g,b triplet —
	   so it silently falls back to inherited (gray) text instead of red.
	   Matching its specificity is the only way to actually win. */
	color: var(--fg-error) !important;
}
.invitereseller-redesign .form-group.ir-consent .text-danger { margin-left: 2px; }

/* Side/CTA cards: plain title in a padded card, no divider bar (the bar
   stays on the form card only, matching the reference). */
.invitereseller-redesign .ir-panel--side .ir-panel-head,
.invitereseller-redesign .ir-panel--cta .ir-panel-head { padding: 18px 20px 0; border-bottom: 0; background: transparent; }
.invitereseller-redesign .ir-panel--side .ir-steps { padding: 14px 20px 20px; }
.invitereseller-redesign .ir-panel--cta .ir-side-hint { padding: 10px 20px 0; }
.invitereseller-redesign .ir-panel--cta .btn.ir-cta-btn { margin: 10px 20px 20px; }
/* end INVITERESELLER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL PHONE/FAX/MOBILE FIELD FIX
   Merges the "Vorwahl" + "Rufnummer" input pair into one bordered field
   with a divider line (matches the Mitarbeiter-einladen reference design),
   sitewide, wherever that pair appears — Partials/Form/Contact.html
   (phone/fax/mobile, included by customer/editorder/invitereseller/
   inviteresellerpublic/mobileratecalc/ratecalc/product/registeractivate/
   registerreseller/reselleraccess/resellerdata/resellernewteam) and the
   structurally-identical inline markup in the neworder phone/clicc/
   smarthome sub-forms. Pure CSS, no markup changes: the two placeholders
   are exact-matched, nothing else uses them. The decorative phone/fax/
   mobile icon suffix carries no id/data-target and is hidden to match the
   reference's plain divider line. Tokens only, applies at every viewport.

   :has() matches an ancestor whose SUBTREE contains the pair at any depth,
   not just its direct children — so on screens where the phone row nests
   inside a much bigger layout `.row` (e.g. neworder's per-provider 3-column
   form row wrapping Partials/Form/Contact several levels down), that OUTER
   row matched too and got squashed to this rule's 36px/overflow:hidden box,
   hiding the entire form beneath the first line. :not(:has(.row)) restricts
   the match to the innermost row (the one that owns the two inputs and
   contains no nested .row itself) so an enclosing layout row never matches.
   ═══════════════════════════════════════════════════════════════════════ */
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) {
	display: flex;
	align-items: stretch;
	height: 36px;
	margin: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--bg-base);
	overflow: hidden;
}
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) > [class*="col-"] { padding: 0; height: 100%; }
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) .form-group,
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) .input-group { display: flex; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; }
/* !important on the two inputs: several screens' own CSS (e.g. invitereseller's
   ".ir-form-body .input-addon .input-group .form-control", 5 classes) gives
   .form-control its own full border+radius with higher specificity than this
   global selector can reach by class count alone — leaving both the outer
   fused box AND the inner input visibly bordered ("doppelte Linien"). This
   global fix is meant to win unconditionally, sitewide, so it wins by rule
   instead of by out-specificity-ing every current and future per-screen rule. */
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) input[placeholder="Vorwahl"] { width: 100%; height: 100%; border: 0 !important; border-right: 1px solid var(--border-base) !important; border-radius: 0 !important; background: transparent !important; }
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) input[placeholder="Rufnummer"] { flex: 1; min-width: 0; height: 100%; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) .input-group-text { display: none; }
/* Several screens (invitereseller among them) also carry their own generic
   ".row.input-row > [class*='col-'] { flex: 1 }" rule, which forces the
   Vorwahl/Rufnummer columns to an even 50/50 split — wrong for a 2-5 digit
   area code next to a full number, and not what the reference shows
   (Vorwahl fixed at 88px, Rufnummer takes the rest). Both extra :has()
   clauses push this past that generic rule's specificity. */
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) > [class*="col-"]:first-child { flex: 0 0 88px; }
.row:has(input[placeholder="Vorwahl"]):has(input[placeholder="Rufnummer"]):not(:has(.row)) > [class*="col-"]:last-child { flex: 1 1 auto; min-width: 0; }
/* end GLOBAL PHONE/FAX/MOBILE FIELD FIX */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC REDESIGN — tablet breakpoint off-by-one fix
   The 3-column form grid (Berechnungsbasis / Filter / Angaben zum
   Vergleich) only flipped to 2 columns at "max-width: 767px" — a real
   768px-wide tablet viewport doesn't match that query (768 > 767), so all
   three columns kept squeezing into the width, truncating every label and
   input ("Belie", "PL", "ct/", …). Extends the same 2-column value up to
   the 899px tier already used elsewhere on this screen for the 1023px
   flips, so it actually covers a 768px viewport. Bounded at the bottom
   (min-width: 640px) so it never fires below the existing 639px rule that
   drops to a single column for phones — an earlier version of this fix
   used a bare max-width and, being later in the cascade, silently beat
   that single-column rule at every mobile width too (390px included).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 899px) {
	.ratecalc-redesign { --cols-3: repeat(2, minmax(0, 1fr)); }
}
/* end RATECALC REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — hide phantom blank row
   The customers list occasionally includes a row with no customer_no,
   name, or address at all — every field empty. The template's date
   helper then renders the literal string "Invalid date" for its empty
   entry_date, right above the first real customer. Root-caused: fixing
   this in tpl/customer.html would need an extra Handlebars block around
   each row to skip empty ones, which pushes an additional context frame
   and would change what "../egon_app_name" (used by the row's own
   opencustomer button two lines down) resolves to — real regression risk
   on the row's own action for a purely cosmetic/data-quality symptom.
   Pure CSS instead: hide any row whose id cell is completely empty.
   No markup touched, no behavior changed on real rows.
   ═══════════════════════════════════════════════════════════════════════ */
.customer-redesign .cu-row:has(.cu-id:empty) { display: none; }
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   STATS REDESIGN — legend truncation at narrow desktop widths
   The "Stückzahlen"/"Stornoquote" pair (`.row.st-charts`) already stacks
   to one column at max-width:899px — but the reference mockup assumes a
   1188px rail, and the QA harness's own "desktop" tier is 1024px: between
   900-1024px the two cards stay side by side, each too narrow for its
   168px donut plus a legend with a value/percent column, so the flexible
   ellipsis label (by design, same as the reference) collapses to almost
   nothing ("S...", "A."). Extends the existing single-column stacking up
   through 1024px inclusive — deliberately NOT the usual "-1" breakpoint
   convention (1023px), because 1024px is exactly the harness's own
   desktop test width and the squeeze is visible there too; 1023px would
   silently exclude it, the same off-by-one already caught once on
   ratecalc's tablet breakpoint. Same selector/value as the 899px rule
   already in this block — appended later so it also covers 900-1024px,
   harmless overlap below that.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.stats-redesign .row.st-charts { grid-template-columns: minmax(0, 1fr); }
}
/* end STATS REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC REDESIGN — required-star for the CSS-generated field labels
   The "Berechnungsbasis" card's PLZ/Ort/Straße/Hausnr. labels are pure
   CSS ::before content (the shared Partials/Form/Base "vertical" branch
   renders no real <label> here) — a pseudo-element's content is a single
   string with one color, so a red "*" can't just be appended to the grey
   label text inline. Instead the field's own .form-group becomes a wrap-
   allowing flex row: the ::before (label) and a new ::after (star, its
   own color) sit together on the first line as ordered flex items, and
   the real <input>/<select> is forced to its own line below via
   flex-basis:100%. Confirmed required against ratecalc.js's own
   "Pflichtfeld" validators (street, street_number, city, zip) — country_id
   (Land) is not validated there, so it gets no star, matching the v2
   block above it (never edited in place — this only appends new ::after
   rules and a flex layout for the four required fields).
   ═══════════════════════════════════════════════════════════════════════ */
.ratecalc-redesign .form-group:has(> input[name$="zip"]),
.ratecalc-redesign .form-group:has(> select[name$="city"]),
.ratecalc-redesign .form-group:has(> select[name$="street"]),
.ratecalc-redesign .form-group:has(> input[name$="street_number"]) {
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px;
}
.ratecalc-redesign .form-group:has(> input[name$="zip"])::before,
.ratecalc-redesign .form-group:has(> select[name$="city"])::before,
.ratecalc-redesign .form-group:has(> select[name$="street"])::before,
.ratecalc-redesign .form-group:has(> input[name$="street_number"])::before { order: 1; margin-bottom: 0; }
.ratecalc-redesign .form-group:has(> input[name$="zip"])::after,
.ratecalc-redesign .form-group:has(> select[name$="city"])::after,
.ratecalc-redesign .form-group:has(> select[name$="street"])::after,
.ratecalc-redesign .form-group:has(> input[name$="street_number"])::after {
	content: "*"; order: 2; color: var(--fg-error); font: var(--fw-regular) 12px/16px var(--font-sans);
}
.ratecalc-redesign .form-group:has(> input[name$="zip"]) > input,
.ratecalc-redesign .form-group:has(> select[name$="city"]) > select,
.ratecalc-redesign .form-group:has(> select[name$="street"]) > select,
.ratecalc-redesign .form-group:has(> input[name$="street_number"]) > input { order: 3; flex-basis: 100%; }
/* end RATECALC REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   SITEWIDE SPACING NORMALIZATION — card head/body padding
   Surveyed every "-redesign" card-head/card-body pair in this file: the
   dominant convention (invitereseller, inviteresellerpublic,
   registerreseller, order, orderstatuschanges, customer's row-skeleton
   head) is a 14px/20px head and a 20px body. These five screens drifted
   to smaller, token-derived values (12px 16px / 16px / 18px) from earlier,
   separate redesign passes. Normalizing so every card reads the same
   regardless of which screen it's on. Page-level headers with their own
   action buttons (structure's st-header, customer's cu-page-head) are a
   different UI role, not touched here — flagged separately, not the same
   pattern as a card's own head bar. Each block below is its own module's
   committed CSS (append-only, same discipline as every block above).
   ═══════════════════════════════════════════════════════════════════════ */
.smartstats-redesign .ss-card-head { padding: 14px 20px; }
.smartstats-redesign .ss-card-body { padding: 20px; }
.statsoverview-redesign .so-card-body { padding: 20px; }
.provision-redesign .pv-card-head { padding: 14px 20px; }
.provision-redesign .pv-card-body { padding: 20px; }
.phoneprovision-redesign .pp-card-head { padding: 14px 20px; }
.phoneprovision-redesign .pp-card-body { padding: 20px; }
.reselleraccount-redesign .ra-card-head { padding: 14px 20px; }
.reselleraccount-redesign .ra-card-body { padding: 20px; }
.reselleraccount-redesign .ra-card-body--flush { padding: 0; }
/* end SITEWIDE SPACING NORMALIZATION */

/* ═══════════════════════════════════════════════════════════════════════
   SITEWIDE SPACING NORMALIZATION — page-level headers (follow-up)
   Closes out the "page-level headers … flagged separately" note left by
   the block above. Surveyed every screen with a standalone page-title
   wrapper (cu-page-head, st-header, nl-page-head, rd-header-top,
   ra-header-top — dashboard widgets and card-section headers don't count,
   the whole widget/card already is the surface there). Two real bugs, not
   just drift: `.sr-page-head` (settlement) and `.pv-main h3` (provision)
   had literally no background/shadow rule at all — title + subtitle sat
   directly on the bare page background instead of on a card, unlike every
   other screen. Fixed with the same background/radius/shadow/padding
   triad `.cu-page-head` already uses. One padding outlier on top:
   nachrichten-list was the only page-head using 14px 20px instead of the
   18px-all-around convention the other four already share.
   ═══════════════════════════════════════════════════════════════════════ */
.settlement-redesign .sr-page-head {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* provision's results template (tpl/provision.html) is deliberately left
   byte-untouched elsewhere in this file (deep Handlebars nesting) — same
   CSS-only technique here, just adding the missing card triad to the
   existing bare h3 rule rather than wrapping it in a new element. */
.provision-redesign .pv-main h3 {
	padding: 18px; background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
}
.nachrichten-list-redesign .nl-page-head { padding: 18px; }
/* end SITEWIDE SPACING NORMALIZATION — page-level headers */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — "Kunde anlegen" (tpl/customer/create.html)
   Ports the create screen (previously old BS3 .panel/.bs-callout markup,
   the last un-redesigned corner of the customer module) onto the same
   cu-form-card/cu-form-section language the edit form on view/customer/
   detail already uses. No new classes needed — create.html renders inside
   #egon-embedded-customer-create-wrapper, itself already nested inside
   the outer .customer-redesign wrapper (tpl/customer.html), so it inherits
   every cu-* rule for free, same as the Partials do. Only new CSS is the
   breadcrumb→intro→form-card vertical rhythm, scoped to the create
   wrapper's own (stable, non-templated) id since it isn't a direct child
   of .customer-redesign and so doesn't match the existing
   ">" cu-detail-head + cu-detail-grid spacing rule near the top of this
   file. Also overrides the detail screen's "#home: card ↔ form toggle" rule
   (.cu-form-card { display: none } unless inside .cu-overview-wrap.cu-editing)
   — create.html's form isn't part of that toggle, it should just show.
   ═══════════════════════════════════════════════════════════════════════ */
.customer-redesign #egon-embedded-customer-create-wrapper .cu-detail-head { margin-bottom: 4px; }
.customer-redesign #egon-embedded-customer-create-wrapper .cu-page-sub { margin-bottom: 16px; }
.customer-redesign #egon-embedded-customer-create-wrapper .cu-form-card { display: flex; }
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   SETTLEMENT REDESIGN — Filtern/Filter leeren/Filter-Pillen follow-up
   Operator asked for the "Filtern" primary button + "Filter leeren" text
   link + removable active-filter pill pattern. That exact pattern (as
   opposed to order-redesign's plain secondary "filtern" button with no
   reset and a special-cased single chip) lives on customer-redesign
   (.cu-chip*/.cu-reset-btn, itself modeled on order's .or-chip box
   recipe) — ported here verbatim under the sr- prefix, same token values.
   settlement-redesign had no .btn-primary rule at all before this block.
   ═══════════════════════════════════════════════════════════════════════ */
.settlement-redesign .btn-primary { background: var(--bg-interactive); border-color: var(--bg-interactive); color: var(--fg-on-color); }
.settlement-redesign .btn-primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); color: var(--fg-on-color); }
.settlement-redesign .sr-filter-footer { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.settlement-redesign .sr-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.settlement-redesign .sr-chip-label { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-muted); margin-right: 2px; }
.settlement-redesign .sr-chip-empty { font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-disabled); }
.settlement-redesign .sr-chip {
	display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 9px;
	border-radius: 9999px; background: var(--bg-highlight); border: 1px solid var(--bg-highlight-hover);
	font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-interactive-hover);
}
.settlement-redesign .sr-chip-remove {
	display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
	border-radius: 9999px; cursor: pointer; color: inherit;
}
.settlement-redesign .sr-chip-remove:hover { background: var(--bg-highlight-hover); }
.settlement-redesign .sr-chip-remove .fa { font-size: 10px; }
.settlement-redesign .sr-reset-btn {
	border: 0; background: transparent; padding: 0; flex: none;
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive); cursor: pointer;
}
.settlement-redesign .sr-reset-btn:hover { color: var(--fg-interactive-hover); }
@media (max-width: 767px) {
	.settlement-redesign .sr-filter-footer { flex-direction: column; align-items: stretch; }
	.settlement-redesign .sr-chip-row { order: -1; }
	.settlement-redesign .sr-reset-btn { text-align: left; }
}
/* end SETTLEMENT REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — Kundenstammdaten filter row field labels
   Operator reported this row's fields sit unlabeled/misaligned next to
   its own "Name / Firma" field and the "Belieferung & Vertragsende" row
   below it, which labels every field via a hand-written <span
   class="cu-field-label">. Root cause: tpl/customer.html includes
   Partials/Form/Base without direction="horizontal", so it renders that
   partial's compact/unlabeled branch (built for inline Bootstrap
   col-md rows, no <label> at all) for country_id/zip/city — leaving 3 of
   this row's 4 fields without the label row the 4th (hand-built) field
   and every sibling row have, so their inputs sit flush against the
   group divider while "Name / Firma" is pushed down by its own label.
   Can't fix in the partial itself (shared by every other screen that
   includes it) or by adding direction="horizontal" (that branch is a
   Bootstrap col-sm-4/col-sm-8 horizontal layout meant for a single full
   -width vertical form, not a 4-up filter grid cell). Same fix already
   established for this exact "unlabeled Base partial in a compact grid"
   case on smart/ratecalc: a same-file, scoped CSS ::before label on the
   wrapping .form-group, styled identically to this card's own
   .cu-field-label (12px/16px, --fg-subtle, 5px margin) so it's pixel
   -consistent with "Name / Firma" and the row below — zero markup
   touched, zero risk to any other screen using the partial.
   ═══════════════════════════════════════════════════════════════════════ */
.customer-redesign .cu-filter-card .cu-group-grid .form-group:has(> select[name="country_id"])::before,
.customer-redesign .cu-filter-card .cu-group-grid .form-group:has(> input[name="zip"])::before,
.customer-redesign .cu-filter-card .cu-group-grid .form-group:has(> select[name="city"])::before {
	display: block; font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin-bottom: 5px;
}
.customer-redesign .cu-filter-card .cu-group-grid .form-group:has(> select[name="country_id"])::before { content: "Land"; }
.customer-redesign .cu-filter-card .cu-group-grid .form-group:has(> input[name="zip"])::before { content: "PLZ"; }
.customer-redesign .cu-filter-card .cu-group-grid .form-group:has(> select[name="city"])::before { content: "Ort"; }
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — filter card group spacing fix
   Operator reported the Kunden filter tile's headings/fields sit closer
   together than on order/settlement/provision. Root cause: tpl/customer.html
   wraps all four .cu-filter-group rows + .cu-filter-footer in a <form
   id="...-search-form"> — that form is .cu-filter-card's only DOM child, so
   the card's `display:flex; gap:18px` (the same recipe as .or-filter-card/
   .sr-filter-card) never reaches the groups it's meant to space: a plain
   block-level <form> stacks them with zero gap instead. Every other filter
   card has no <form> wrapper, so its groups are direct flex children and
   already get the 18px rhythm. Can't remove the <form> — app/customer.js
   selects it by id (panel_id+'-search-form') for the keyup/input handlers
   and the country_id default-option lookup. Fix: give the form itself the
   same flex/gap recipe so its children get the exact spacing every other
   filter card already has. Tokens only; zero markup change.
   ═══════════════════════════════════════════════════════════════════════ */
.customer-redesign .cu-filter-card > form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   ORDER REDESIGN — filter module buttons, rebuilt 1:1 from the reference
   design (Redesign.zip, Auftragsuebersicht.dc.html/export-src). CSV
   download / Status Codes (renamed from "Codes") / "Entwürfe kontaktlos"
   move out of the filter card into a new page-head bar with an
   "Aufträge" title — same recipe as .cu-page-head/.sr-page-head. Only
   "Filtern" (renamed from "filtern") stays in the filter footer, now
   standalone next to a new "Filter leeren" reset button — same pattern
   as .cu-reset-btn/.sr-reset-btn. Approved additions (tpl/order.html,
   app/order.js): the page-head itself, and "Filter leeren" wired to a
   new resetfilters action that clears every plain filter field via the
   shared $egon.form helper and re-runs the search (Partner/vp_id is its
   own multi-select chip mechanism — handleVpSelection — left untouched).
   Hidden when nested (view/structure's embedded "Aufträge" tab), same
   guard as the rest of this filter card. Tokens only; appended at the
   true end of the file.
   ═══════════════════════════════════════════════════════════════════════ */

/* Page head */
.order-redesign .or-page-head {
	background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest);
	padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.order-redesign .or-page-title { margin: 0; font: var(--fw-medium) 18px/26px var(--font-sans); color: var(--fg-base); }
.order-redesign .or-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-redesign > .or-page-head + .or-filter-card { margin-top: 16px; }

/* Filter footer: "Filter leeren" + standalone "Filtern" (CSV/Codes/kontaktlos moved to the page head above) */
.order-redesign .or-filter-actions { flex-direction: row; align-items: center; gap: 12px; }
.order-redesign .or-reset-btn {
	border: 0; background: transparent; padding: 0; flex: none;
	font: var(--fw-medium) 12px/18px var(--font-sans); color: var(--fg-interactive); cursor: pointer;
}
.order-redesign .or-reset-btn:hover { color: var(--fg-interactive-hover); }

/* Accent-outline button variant ("Entwürfe kontaktlos", JS-injected into .or-page-actions) */
.order-redesign .or-btn-outline { background: var(--bg-base); border-color: var(--border-interactive); color: var(--fg-interactive); }
.order-redesign .or-btn-outline:hover { background: var(--bg-highlight); }

@media (max-width: 899px) {
	.order-redesign .or-filter-actions { flex-direction: column; align-items: stretch; }
	.order-redesign .or-reset-btn { text-align: left; }
}
@media (max-width: 767px) {
	.order-redesign .or-page-head { flex-direction: column; align-items: stretch; }
}
/* end ORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC REDESIGN — "Pflichtfeld" validation message renders above the
   field, not below (Berechnungsbasis card, PLZ/Ort/Straße/Hausnr.).
   Root cause: the RATECALC REDESIGN required-star block above (line
   ~6497) turns these four .form-group's into a flex row so the CSS
   ::before (label, order:1) and ::after (star, order:2) can sit beside
   each other, with the real <input>/<select> pushed to its own line via
   order:3 + flex-basis:100%. formValidation's own <small class=
   "help-block"> is appended as a plain DOM sibling AFTER the field with
   no order of its own — flex sorts unordered items first (order defaults
   to 0), so it was rendering above even the label, not just the field.
   Fix: give the help-block the next order slot + its own full-width line,
   same flex-basis:100% trick as the field — text only, the field's own
   order/position is untouched, so it does not move. Checked every other
   `order:` declaration in this file (modal buttons, section dividers,
   sibling-.form-group reordering in registerreseller/resellerdata) — none
   of them reorder a help-block relative to its own field, this is the only
   screen with the bug. Tokens only; appended at the true end of the file.
   ═══════════════════════════════════════════════════════════════════════ */
.ratecalc-redesign .form-group:has(> input[name$="zip"]) > .help-block,
.ratecalc-redesign .form-group:has(> select[name$="city"]) > .help-block,
.ratecalc-redesign .form-group:has(> select[name$="street"]) > .help-block,
.ratecalc-redesign .form-group:has(> input[name$="street_number"]) > .help-block {
	order: 4;
	flex-basis: 100%;
}
/* end RATECALC REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   ENERGYDOWNLOADS REDESIGN — "Formular" column header alignment fix
   Operator reported the "Formular" column header sitting far away from
   the PDF download buttons below it, "as if it didn't belong". Root
   cause: the base block's `.dl-th-files, .dl-td-files { text-align:
   right }` rule (specificity 0,2,0) loses to the same block's own
   `.dl-table thead th { text-align: left }` rule (0,2,2 — two extra
   element selectors) for the header cell specifically, so "Formular"
   stayed left-aligned while its column (auto-sized wide by the table's
   other columns) put the actual PDF button flush right — the data cell
   has no competing text-align rule, so `.dl-td-files` wins there
   uncontested. Fix: a selector with an extra class beats the thead-th
   rule without touching it. Tokens only; appended at the true end of
   the file.
   ═══════════════════════════════════════════════════════════════════════ */
.energydownloads-redesign .dl-table thead th.dl-th-files { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   ENERGYDOWNLOADS REDESIGN — provider row hover shows a white sliver above
   every row except the first
   Root cause: Bootstrap 3's own `.panel-group .panel+.panel { margin-top:
   5px }` (bootstrap-3.2.min.css, specificity 0,3,0 — three classes) beats
   this screen's `.dl-provider { margin: 0 }` (0,2,0), so a 5px gap comes
   back between every pair of provider rows — outside any element's own
   background, so `.dl-provider-head:hover`'s highlight doesn't reach it.
   The very first row has no preceding sibling, so `.panel+.panel` never
   matches it — matching the operator's exact report ("happens on all
   entries except the first"). Fix: a selector with one more class beats
   the Bootstrap rule's specificity, same technique as the fix above.
   Tokens only; appended at the true end of the file.
   ═══════════════════════════════════════════════════════════════════════ */
.energydownloads-redesign .panel-group .dl-provider + .dl-provider { margin-top: 0; }
/* end ENERGYDOWNLOADS REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — double-counted spacing in plain-flex .rd-col
   columns (Stammdaten/Kontakt, Unternehmen/geschäftlicher Kontakt, all
   four Einstellungen groups, both Landing-Page columns)
   Operator asked for a spacing/layout pass across every Account form,
   using the reference (Redesign.zip, Account.dc.html/export-src) as the
   model — its own field columns use a single flex `gap` between elements
   (14px there, matching this screen's own `.rd-col { gap: 14px }`), never
   an ALSO-there margin on the individual elements.
   Root cause: `.form-group`/`.bs-callout`/`.checkbox`/`.rd-banner` each
   carry their own `margin: 0 0 12px` — needed as the SOLE spacing engine
   in the two tabs that override `.rd-col`'s display away from flex
   (`#basedata`/`#company`'s first column: `display:grid; gap:0 16px`;
   `#bank`: `display:block; columns:2` — neither has a usable row-gap).
   Everywhere `.rd-col` is left at its own plain `display:flex;
   gap:14px`, that per-element margin stacks ON TOP of the flex gap
   (14+12=26px between consecutive fields, vs. 14px between a heading
   and its first field) — nearly double the intended rhythm, and visibly
   inconsistent with the grid/multicol tabs sitting right next to it.
   Fix: zero the margin only inside the four confirmed plain-flex
   contexts, leaving the grid/multicol tabs (which need the margin as
   their real spacing) untouched. Verified live
   (getBoundingClientRect before/after): every one of these gaps was
   26px (18px for the one 4px-margin outlier, .btn-group.btn-block),
   uniformly 14px after, matching the grid tabs' own header→field gap.
   Also nudges the field label→input gap from 5px to 6px, matching the
   reference's `gap:6px` exactly (was a single pixel off).
   Tokens only; appended at the true end of the file.
   ═══════════════════════════════════════════════════════════════════════ */
.resellerdata-redesign .form-group { gap: 6px; }
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:last-child > *,
.resellerdata-redesign #company .rd-col:last-child > *,
.resellerdata-redesign #landingpage .rd-col > *,
.resellerdata-redesign .rd-settings-stack .rd-col > * {
	margin-top: 0;
	margin-bottom: 0;
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — remaining 1:1 deviations from the reference
   (Redesign.zip, Account.dc.html/export-src), operator-confirmed pass.
   Two items the operator explicitly chose to keep as documented
   deviations, NOT fixed here: the "Titel" field (real, usable data —
   the reference just doesn't show it) and the Land+Telefon pairing
   (Telefon renders via a different partial in a different column;
   moving it would need a cross-column JS DOM move, out of scope).
   Everything below is purely visual, no field/behavior removed.
   ═══════════════════════════════════════════════════════════════════════ */

/* Paired-field row gap: the reference uses 16px for every paired grid
   (Anrede+Geburtsdatum, PLZ+Ort, Straße+Hausnr., BIC+Bank …) except the
   phone/fax/mobile Vorwahl+Rufnummer rows, which get a narrower 8px (the
   Vorwahl field itself is short). This screen's own `.row.input-row` was
   a flat 12px (var(--space-sm)) for all of them — raise the general case
   to 16px, then carve the phone/fax/mobile rows back down to 8px. */
.resellerdata-redesign .row.input-row { gap: 16px; }
.resellerdata-redesign .row.input-row:has([name$="phone_prefix"]),
.resellerdata-redesign .row.input-row:has([name$="fax_prefix"]),
.resellerdata-redesign .row.input-row:has([name$="mobile_prefix"]) { gap: 8px; }

/* Unternehmen tab, "Nur bei gewerblicher Tätigkeit" info card: reference
   adds an extra 6px above this specific box, on top of the column's
   normal 14px rhythm. Specific enough to beat this file's own
   `#company .rd-col:last-child > *' margin reset above. */
.resellerdata-redesign #company .rd-col:last-child > .rd-info-card { margin-top: 6px; }
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — operator follow-up: required-star position,
   heading→field spacing, and the Bankverbindung tab's broken 2-column
   layout.

   1) Required-star "in a weird position": the base fence's own
      `sup.text-danger { vertical-align: baseline; font-size: 100%;
      line-height: 1 }` never touched `position`/`top` — normalize.css
      (bootstrap-3.2.min.css) sets `sub,sup{position:relative}
      sup{top:-.5em}` on the bare element, which still applied on top,
      shifting the star up ~6px regardless of vertical-align. Confirmed
      via computed style (`position: relative; top: -6px`) before this
      fix. Reset both here.
   2) Heading→field spacing: `#basedata`/`#company`'s first column is
      `display:grid; gap:0 16px` (row-gap:0, needed elsewhere as the
      sole spacing engine — see the previous follow-up above) so
      `.rd-group-head` needs its own explicit margin to create any gap
      at all above/below itself; it had none below and only 8px above
      for the second heading ("Anschrift"), so a heading sat almost
      flush against the field row that follows it. Raised both to 14px,
      matching this column's own established rhythm.
   3) Bankverbindung tab: the CSS-multicol layout (`columns:2`) was
      visibly breaking the two-input rows it didn't fully own —
      "PLZ, Ort" rendered with the Ort dropdown missing, "Straße,
      Hausnr." rendered with only a stray "Nr." box floating under the
      wrong column, and the "Stammdaten übernehmen" button (absolutely
      positioned to sit at the Kontoinhaber heading's top-right) visibly
      collided with that heading's trailing rule. Root cause: multicol's
      automatic column-balancing doesn't respect the semantic
      Kontoinhaber+Anschrift / Bankverbindung split, and can split a
      `.row.input-row` flex pair across the column break even with
      `break-inside:avoid` on the outer `.form-group`. Replaced with the
      same explicit CSS-grid + per-field `:has()` placement already used
      for Stammdaten/Unternehmen's first columns above — robust, no
      column-balancing guesswork. The button is unpositioned back to its
      natural place next to the Anrede select (still styled as a normal
      secondary button by the existing `#bank .input-group-text.btn`
      rule) instead of overlapping the heading.
   Tokens only; appended at the true end of the file.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Required-star position */
.resellerdata-redesign sup.text-danger { position: static; top: auto; }

/* 2) Heading→field spacing in the row-gap:0 grid columns */
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .rd-group-head,
.resellerdata-redesign #company .rd-col:first-child > .rd-group-head {
	margin-bottom: 14px;
}
.resellerdata-redesign #basedata .rd-grid-2 > .rd-col:first-child > .rd-group-head:not(:first-child),
.resellerdata-redesign #company .rd-col:first-child > .rd-group-head:not(:first-child) {
	margin-top: 14px;
}

/* 3) Bankverbindung: real 2-column grid instead of CSS multicol */
.resellerdata-redesign #bank .rd-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 14px;
	align-items: start;
}
.resellerdata-redesign #bank .rd-col > .checkbox,
.resellerdata-redesign #bank .rd-col > .form-group-seperator:nth-of-type(1),
.resellerdata-redesign #bank .rd-col > .form-group-seperator:nth-of-type(2),
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_company"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_salutation"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_first_name"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_country_id"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_zip"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_street"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_stairs"]) {
	grid-column: 1;
}
.resellerdata-redesign #bank .rd-col > .form-group-seperator:nth-of-type(3),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="iban"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) {
	grid-column: 2;
}
.resellerdata-redesign #bank [data-target$=":applybasedata"] {
	position: static;
	top: auto;
	right: auto;
}

/* Company.html's own horizontal branch renders a second, redundant
   "Rechtsform:" label baked into the partial's markup right before the
   select (static `for="company_legal_form"`, distinct from the real
   outer label's dynamic `for` id) — hide the duplicate, not the real
   label. Same partial is used elsewhere; scoped to this screen only. */
.resellerdata-redesign label[for="company_legal_form"] { display: none; }

/* The new #bank grid above is unconditional, so — being later in source
   order than the original fence's `@media (max-width: 767px) { #bank
   .rd-col { display:flex } }` collapse-to-one-column rule — it was
   winning even on narrow viewports, rendering two ~147px-wide columns
   instead of stacking. Restore the single-column collapse at the same
   767px breakpoint the rest of this screen already uses. */
@media (max-width: 767px) {
	.resellerdata-redesign #bank .rd-col { grid-template-columns: minmax(0, 1fr); }
	/* The explicit `grid-column: 2` assignments above (Bankverbindung
	   group) still force an implicit second column into existence even
	   with only one explicit track declared, and a plain `> *` reset
	   can't outrank their `:has(...)` specificity (4 class-equivalents
	   vs. 2) regardless of source order — repeat the same selectors so
	   the override actually wins. */
	.resellerdata-redesign #bank .rd-col > .form-group-seperator:nth-of-type(3),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="iban"]),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]),
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) {
		grid-column: 1;
	}
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC REDESIGN — mockup fidelity follow-up (Vergleichstarif card)
   Reconciling the existing .ratecalc-redesign build against a refreshed
   reference mockup. Most of the screen already matched closely; this is
   the one real visual bug found: the "Grundversorger laden" button's
   `.visible-lg`/`.hidden-lg` text swap (bs5-compat.css, gated at the old
   BS3 1200px "lg" breakpoint) renders BOTH the full label and the "GV
   laden" abbreviation at once at every viewport this screen is actually
   used at (its own grid never reaches 1200px) — "Grundversorger laden GV
   laden". Stop relying on that global toggle inside this card; drive it
   off the same breakpoint this screen's own responsive system already
   uses for its narrowest (mobile, single-column) tier instead.
   ═══════════════════════════════════════════════════════════════════════ */
.ratecalc-redesign .rc-compare-actions .visible-lg { display: inline; }
.ratecalc-redesign .rc-compare-actions .hidden-lg { display: none; }
@media (max-width: 639px) {
	.ratecalc-redesign .rc-compare-actions .visible-lg { display: none; }
	.ratecalc-redesign .rc-compare-actions .hidden-lg { display: inline; }
}
/* end RATECALC REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — reference comparison follow-up (Vertragspartner &
   Lieferadresse card). "Land" and "Geburtstag" are two lone flex:1 1 240px
   items in .no-fields, separated by three full-width .row.input-row pairs
   (Vorname/Nachname, PLZ/Ort, Straße/Nr.) — each ends up alone on its own
   line with wasted space either side, instead of sharing one line the way
   the reference mockup shows. Pull both to the end of the default (order:0)
   flow so they land adjacent after the three row pairs and share one line.
   Purely visual, no markup/partial change — the fields keep their existing
   `id`/`name`/data hooks.
   ═══════════════════════════════════════════════════════════════════════ */
.neworder-redesign .no-fields > .form-group:has(> select[name="country_id"]) { order: 10; }
.neworder-redesign .no-fields > .form-group:has(input[name="birthday"]) { order: 11; }
/* end NEWORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RATECALC REDESIGN — Filter card checkbox spacing + result-card tabs
   ═══════════════════════════════════════════════════════════════════════
   1) The standalone "vorläufige Netzentgelte … enthalten" checkbox (Filter
      card, outside Partials/Form/RateFilter.html — its own conditional
      block right after the partial include) isn't part of the
      "Einschränkungen" .rc-checkbox-list, so it never got that list's
      `.checkbox { margin: 0 }` reset — it fell back to Bootstrap's default
      checkbox margin, sitting visibly further from the field above it than
      every other checkbox on the card. Same reset, scoped directly to it. */
.ratecalc-redesign .checkbox:has(> label > input[name="netcharge"]) { margin: 0; }

/* The `.checkbox`'s own margin was never the real gap, though — its wrapping
   `<div>` (ratecalc.html, right after the RateFilter include) is itself a
   direct child of `.rc-card`, which lays out its children with `gap: 18px`
   (see `.ratecalc-redesign .rc-card`). That 18px flex gap — not any margin
   — is what actually separates this checkbox from the "Einschränkungen"
   list above it, vs. the list's own internal `.rc-checkbox-list { gap: 8px
   }` between its own items. Zeroing the checkbox's margin alone couldn't
   touch that: flex items establish their own formatting context, so a
   descendant's margin never collapses out into the parent's flex gap.
   Pull the wrapping div up by the 10px difference so the visible gap
   matches the list's 8px exactly. */
.ratecalc-redesign .rc-card > div:has(input[name="netcharge"]) { margin-top: -10px; }

/* 2) The result cards' Merkmale / "interne Vertriebsinformationen" tables
   sit inside a Bootstrap `.table-responsive` wrapper (`overflow-x:auto`) —
   meant for tables that may not fit narrow viewports, but these are plain
   2-column label/value tables that always fit the card body, so the
   scroll affordance never has anything to do and just adds a visible,
   non-functional scrollbar. Neutralize it within the tab content only;
   .table-responsive elsewhere in the app (unrelated tables that may
   genuinely need it) is untouched. */
.ratecalc-redesign .rc-tabcontent .table-responsive { overflow-x: visible; }

/* 3) The tab bar itself (Infos/Merkmale/Dokumente/Staffeln) only sets
   `overflow-x: auto` (intentional — lets the tab row scroll horizontally
   on narrow viewports where the tabs don't all fit). Per the CSS Overflow
   spec, leaving `overflow-y` at its default `visible` while `overflow-x`
   is non-visible forces the *computed* `overflow-y` to `auto` too (a
   browser never mixes `visible` with a clipping value on perpendicular
   axes) — turning this into a scroll container on BOTH axes. Verified live
   (real render): the tab row's own content is ~1px taller than its content
   box (flex/line-height rounding), which is nothing on its own, but with
   overflow-y forced to `auto` that 1px is enough to paint a vertical
   scrollbar that scrolls nothing meaningful — exactly the "scrollbar that
   can't be used" the operator saw. Pin `overflow-y: hidden` so the row
   never becomes a vertical scroll container while keeping the intentional
   horizontal one. */
.ratecalc-redesign .rc-tabs { overflow-y: hidden; }
/* end RATECALC REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — Vertragspartner/Kontaktdaten grid + zweiter
   Vertragspartner (reference-comparison pass #2, default.html only).
   `default.html` wrapped Partials/Form/Base and Partials/Form/Contact in
   `.no-fields` (flex, no per-field span control) — the reference groups
   Anrede/Titel/Vorname/Nachname on one line, Straße+Nr./PLZ+Ort on one
   line, Land+Geburtstag on one line, and Telefon/Mobil/E-Mail on one line
   (no Fax). `default.html` now wraps the same partial calls in `.no-grid`
   (the same 12-col grid `.no-grid` already uses on Zuordnung) with a
   `no-vp-grid`/`no-vp-contact-grid` modifier; spans + order are wired here
   via `:has()` keyed on each field's `name`, same technique already used
   on resellerdata/registerreseller — no shared Partials/Form template
   touched, so every other screen sharing those partials is unaffected.
   ═══════════════════════════════════════════════════════════════════════ */
.neworder-redesign .no-vp-grid > .form-group:has([name="salutation"]) { grid-column: span 3; order: 1; }
.neworder-redesign .no-vp-grid > .form-group:has([name="client_title"]) { grid-column: span 3; order: 2; }
.neworder-redesign .no-vp-grid > .row.input-row:has([name="first_name"]) { grid-column: span 6; order: 3; }
.neworder-redesign .no-vp-grid > .row.input-row:has([name="street"]) { grid-column: span 7; order: 4; }
.neworder-redesign .no-vp-grid > .row.input-row:has([name="zip"]) { grid-column: span 5; order: 5; }
.neworder-redesign .no-vp-grid > .row.input-row:has([name="stairs"]) { grid-column: span 12; order: 6; }
.neworder-redesign .no-vp-grid > .form-group:has([name="country_id"]) { grid-column: span 4; order: 7; }
.neworder-redesign .no-vp-grid > .form-group:has([name="birthday"]) { grid-column: span 4; order: 8; }

/* Kontaktdaten: hide Fax (not in the reference), give Telefon/Mobil/E-Mail
   a label (the partial's "vertical" branch renders none) via the same
   ::before pseudo-label technique already used on smart/ratecalc for this
   exact "unlabeled Base-family partial in a compact grid" case. */
.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="fax_prefix"]) { display: none; }
.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="phone_prefix"]) { grid-column: span 4; order: 1; }
.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="mobile_prefix"]) { grid-column: span 4; order: 2; }
.neworder-redesign .no-vp-contact-grid > .form-group:has([name="email"]) { grid-column: span 4; order: 3; }
.neworder-redesign .no-vp-contact-grid > .form-group:has([name="email"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); margin: 0 0 5px;
	content: "E-Mail"; display: block;
}
/* The phone/mobile rows are also matched by the sitewide "fused Vorwahl+
   Rufnummer box" rule (a fixed height:36px + overflow:hidden bordered box)
   — a label placed inside the row (as a ::before on the row, or stacked
   into its first column) has nowhere to go: the 36px height has no room
   for a second line, so the label visually overlapped/compressed against
   the input instead of sitting cleanly above it (self-caught while
   re-verifying against the reference screenshot). Fixed by escaping the
   label above the box entirely via absolute positioning, overriding just
   this instance's overflow:hidden so the label isn't clipped — the box's
   own 36px height/border is untouched. Scoped to min-width:640px: below
   that, the fused box's own Vorwahl/Rufnummer columns stack (Bootstrap's
   col-md-* collapses under `md`), which the sitewide rule's fixed 36px
   height doesn't account for regardless of this label — a pre-existing,
   wider-reaching mobile issue in that shared rule, out of scope here.
   Leaving mobile at its prior placeholder-only state avoids compounding
   that with an also-overlapping label. */
@media (min-width: 640px) {
	.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="phone_prefix"]),
	.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="mobile_prefix"]) {
		position: relative; overflow: visible !important; margin-top: 21px;
	}
	.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="phone_prefix"])::before,
	.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="mobile_prefix"])::before {
		position: absolute; top: -21px; left: 0;
		font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle);
	}
	.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="phone_prefix"])::before { content: "Telefon"; }
	.neworder-redesign .no-vp-contact-grid > .row.input-row:has([name="mobile_prefix"])::before { content: "Mobil"; }
}

/* "+ zweiter Vertragspartner" toggle (approved new feature) — both states
   render in the DOM (Handlebars conditionals only evaluate at initial
   fetch, not on later client-side state), JS just flips `visually-hidden`
   between the link and the section (see app/neworder.js onTogglevp2),
   the same show/hide idiom already used for e.g. the "isship" fields. */
.neworder-redesign .no-vp2-toggle a { font: var(--fw-medium) 13px/20px var(--font-sans); color: var(--fg-interactive); text-decoration: none; cursor: pointer; }
.neworder-redesign .no-vp2-toggle a:hover { color: var(--fg-interactive-hover); text-decoration: underline; }
.neworder-redesign .no-vp2-head { display: flex; align-items: center; gap: 10px; }
.neworder-redesign .no-vp2-remove { margin-left: auto; font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-subtle); text-decoration: none; cursor: pointer; }
.neworder-redesign .no-vp2-remove:hover { color: var(--fg-base); text-decoration: underline; }
.neworder-redesign .no-vp2-grid > .form-group:has([name$="_salutation"]) { grid-column: span 3; order: 1; }
.neworder-redesign .no-vp2-grid > .row.input-row:has([name$="_first_name"]) { grid-column: span 9; order: 2; }
.neworder-redesign .no-vp2-grid > .form-group:has([name$="_birthday"]) { grid-column: span 4; order: 3; }
/* Safety net, same reasoning as the one added for no-bank-grid/no-delivery-grid
   below: any field these three grids render that none of the rules above
   accounts for defaults to order:0 and jumps to the front instead of the
   end. Low-specificity plain rule — every `:has(...)` rule above still
   wins for the fields it targets. */
.neworder-redesign .no-vp-grid > *,
.neworder-redesign .no-vp-contact-grid > *,
.neworder-redesign .no-vp2-grid > * { order: 50; }

@media (max-width: 639px) {
	/* !important: these plain-class selectors are otherwise less specific
	   than the per-field `:has(...)` span rules above (which match at
	   every width, `:has()` adds to specificity), so without it those
	   rules would keep winning here too and this stacking override would
	   silently never apply — self-caught while re-verifying mobile against
	   the reference (a field pair was still rendering side-by-side at
	   390px, overflowing into its neighbor). */
	.neworder-redesign .no-vp-grid > .form-group,
	.neworder-redesign .no-vp-grid > .row.input-row,
	.neworder-redesign .no-vp-contact-grid > .form-group,
	.neworder-redesign .no-vp-contact-grid > .row.input-row,
	.neworder-redesign .no-vp2-grid > .form-group,
	.neworder-redesign .no-vp2-grid > .row.input-row { grid-column: 1 / -1 !important; }
}
/* end NEWORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — 1:1 reference re-audit (labels, required stars,
   Bankverbindung/Liefertermin/Unterschrift grids, default.html only).
   A fresh side-by-side screenshot pass against the reference found the
   Vertragspartner card's own fields (Anrede/Titel/Vorname/Nachname/Straße/
   Nr./PLZ/Ort/Land/Geburtstag) still had no label at all (only Kontaktdaten
   got the ::before pseudo-label treatment in the prior pass), and that
   Bankverbindung/Liefertermin never got the .no-fields→.no-grid conversion
   Vertragspartner already had — every field there stacked full-width with
   no label. Partials/Form/Base|Bank|Delivery's only labelled mode
   (`direction="horizontal"`) puts the label BESIDE the field (Bootstrap
   col-sm-4/col-sm-8), which doesn't fit a dense 12-col grid cell — so this
   reuses the same CSS-only ::before/::after pseudo-label + required-star
   technique already proven 3x (smart-redesign, ratecalc-redesign, this
   file's own Kontaktdaten rules above) instead of touching any partial.
   Stars are only added where `app/neworder.js`'s own validators confirm a
   real `notEmpty` requirement (same discipline as the ratecalc precedent
   that deliberately left Land unstarred) — not copied blindly off the
   mockup. `default.html` swapped the Bankverbindung/Liefertermin
   `.no-fields` wrappers to `.no-grid .no-bank-grid` / `.no-delivery-grid`
   (new modifier classes, same pattern as no-vp-grid) so these `:has()`
   rules have a grid to attach spans to.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Vertragspartner card: label the fields Kontaktdaten already had a
   pattern for, using the ratecalc-style "::before/::after + push the real
   control onto its own line" flex technique (label sits beside the star,
   not baked into one pseudo-element string). --- */
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="salutation"]),
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="client_title"]),
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="country_id"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="first_name"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="last_name"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="zip"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="city"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="street"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="street_number"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="stairs"]),
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="door_number"]) {
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px;
}
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="salutation"])::before,
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="client_title"])::before,
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="country_id"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="first_name"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="last_name"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="zip"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="city"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="street"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="street_number"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="stairs"])::before,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="door_number"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); order: 1; margin-bottom: 0;
}
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="salutation"])::before { content: "Anrede"; }
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="client_title"])::before { content: "Titel"; }
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="country_id"])::before { content: "Land"; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="first_name"])::before { content: "Vorname"; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="last_name"])::before { content: "Nachname"; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="zip"])::before { content: "PLZ"; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="city"])::before { content: "Ort"; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="street"])::before { content: "Straße"; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="street_number"])::before { content: "Nr."; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="stairs"])::before { content: "Stiege"; }
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="door_number"])::before { content: "Haustür"; }
/* Required stars — the reference marks Anrede/Vorname/Nachname/Straße/Nr./
   PLZ/Ort/Geburtstag as required (matches app/neworder.js's own notEmpty
   validators for salutation/first_name/last_name/street/street_number/
   birthday directly; PLZ/Ort (zip/city) are disabled+prefilled here so
   they have no standalone notEmpty validator of their own, but the
   reference stars them too and doing so is purely a visual hint with no
   behavior change, so matched as-is). Titel/Land are not starred, in the
   reference or here. */
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="salutation"])::after,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="first_name"])::after,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="last_name"])::after,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="street"])::after,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="street_number"])::after,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="zip"])::after,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="city"])::after {
	content: "*"; order: 2; color: var(--fg-error); font: var(--fw-regular) 12px/16px var(--font-sans);
}
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="salutation"]) > select,
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="client_title"]) > select,
.neworder-redesign .no-vp-grid > .form-group:has(> select[name="country_id"]) > select,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="first_name"]) > input,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="last_name"]) > input,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="zip"]) > input,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="city"]) > select,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name="street"]) > select,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="street_number"]) > input,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="stairs"]) > input,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name="door_number"]) > input {
	order: 3; flex-basis: 100%;
}
/* Geburtstag: the field sits two levels deep (.form-group.input-addon >
   .input-group.date > input), so the real control that needs pushed onto
   its own line is the .input-group wrapper, not a direct-child input. */
.neworder-redesign .no-vp-grid > .form-group:has([name="birthday"]) {
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px;
}
.neworder-redesign .no-vp-grid > .form-group:has([name="birthday"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); order: 1; margin-bottom: 0; flex-basis: 100%; content: "Geburtstag";
}
.neworder-redesign .no-vp-grid > .form-group:has([name="birthday"])::after {
	content: "*"; order: 2; color: var(--fg-error); font: var(--fw-regular) 12px/16px var(--font-sans); margin-left: -3px;
}
.neworder-redesign .no-vp-grid > .form-group:has([name="birthday"]) > .input-group.date { order: 3; flex-basis: 100%; }

/* --- Bankverbindung: swap .no-fields (full-width stack) for .no-grid,
   give every field a column span + the same pseudo-label technique.
   Only IBAN is starred (the only notEmpty-validated field in this card). --- */
.neworder-redesign .no-bank-grid > .checkbox:has([name="self_bank"]) { grid-column: 1 / -1; order: 0; }
.neworder-redesign .no-bank-grid > .form-group-seperator { grid-column: 1 / -1; margin: 0; order: 0; }
.neworder-redesign .no-bank-grid > .bs-callout { grid-column: 1 / -1; order: 7; }
.neworder-redesign .no-bank-grid > .form-group:has(> select[name$="account_holder_salutation"]),
.neworder-redesign .no-bank-grid > .form-group:has(> .input-group.select > select[name$="account_holder_salutation"]) { grid-column: span 3; order: 1; }
.neworder-redesign .no-bank-grid > .row.input-row:has([name$="account_holder_first_name"]) { grid-column: span 9; order: 2; }
.neworder-redesign .no-bank-grid > .form-group.select:has(select[name$="bank_country_id"]) { grid-column: span 3; order: 3; }
.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_zip"]) { grid-column: span 5; order: 4; }
.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_street"]) { grid-column: span 7; order: 5; }
.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_stairs"]) { grid-column: span 12; order: 6; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) { grid-column: span 12; order: 7; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="swift"]) { grid-column: span 4; order: 8; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_name"]) { grid-column: span 4; order: 9; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_identifier_code"]) { grid-column: span 2; order: 10; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="account_no"]) { grid-column: span 2; order: 11; }

.neworder-redesign .no-bank-grid > .form-group:has(> select[name$="account_holder_salutation"]),
.neworder-redesign .no-bank-grid > .form-group:has(> .input-group.select > select[name$="account_holder_salutation"]),
.neworder-redesign .no-bank-grid > .form-group.select:has(select[name$="bank_country_id"]),
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_first_name"]),
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_last_name"]),
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_zip"]),
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group.select:has(select[name$="bank_city"]),
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name$="bank_street"]),
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_street_number"]),
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="swift"]),
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_name"]),
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_identifier_code"]),
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="account_no"]) {
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px;
}
.neworder-redesign .no-bank-grid > .form-group:has(> select[name$="account_holder_salutation"])::before,
.neworder-redesign .no-bank-grid > .form-group:has(> .input-group.select > select[name$="account_holder_salutation"])::before,
.neworder-redesign .no-bank-grid > .form-group.select:has(select[name$="bank_country_id"])::before,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_first_name"])::before,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_last_name"])::before,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_zip"])::before,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group.select:has(select[name$="bank_city"])::before,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name$="bank_street"])::before,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_street_number"])::before,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="swift"])::before,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_name"])::before,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_identifier_code"])::before,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="account_no"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); order: 1; margin-bottom: 0; flex-basis: 100%;
}
.neworder-redesign .no-bank-grid > .form-group:has(> select[name$="account_holder_salutation"])::before,
.neworder-redesign .no-bank-grid > .form-group:has(> .input-group.select > select[name$="account_holder_salutation"])::before { content: "Anrede"; }
.neworder-redesign .no-bank-grid > .form-group.select:has(select[name$="bank_country_id"])::before { content: "Land"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_first_name"])::before { content: "Vorname"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_last_name"])::before { content: "Nachname"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_zip"])::before { content: "PLZ"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group.select:has(select[name$="bank_city"])::before { content: "Ort"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name$="bank_street"])::before { content: "Straße"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_street_number"])::before { content: "Nr."; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="swift"])::before { content: "BIC"; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_name"])::before { content: "Name der Bank"; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_identifier_code"])::before { content: "BLZ"; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="account_no"])::before { content: "Konto"; }
.neworder-redesign .no-bank-grid > .form-group:has(> select[name$="account_holder_salutation"]) > .select,
.neworder-redesign .no-bank-grid > .form-group:has(> .input-group.select > select[name$="account_holder_salutation"]) > .input-group.select,
.neworder-redesign .no-bank-grid > .form-group.select:has(select[name$="bank_country_id"]) > select,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_first_name"]) > input,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="account_holder_last_name"]) > input,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_zip"]) > input,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group.select:has(select[name$="bank_city"]) > select,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> select[name$="bank_street"]) > select,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_street_number"]) > input,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="swift"]) > input,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_name"]) > input,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="bank_identifier_code"]) > input,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="account_no"]) > input {
	order: 3; flex-basis: 100%;
}
/* IBAN: label + required star + push the input-group onto its own line
   (the "prüfen"/"berechnen" buttons and the kept "wichtiger Hinweis"
   callout stay full-width below it). */
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; }
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); order: 1; margin-bottom: 0; content: "IBAN";
}
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"])::after {
	content: "*"; order: 2; color: var(--fg-error); font: var(--fw-regular) 12px/16px var(--font-sans);
}
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) > input,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) > .input-group,
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) > div:not(.input-group) { order: 3; flex-basis: 100%; }

/* --- Liefertermin & Vorversorger: same swap + labelling. Only
   "gewünschtes Lieferdatum", "Zählernummer" and "Vorversorger" are
   starred (the only notEmpty-validated fields here per app/neworder.js;
   MaLo-ID/bisherige Kundennummer/Altvertrag gekündigt zum are not). --- */
.neworder-redesign .no-delivery-grid > .radio { grid-column: span 6; order: 0; }
.neworder-redesign .no-delivery-grid > #previous_usage_type_wrapper { grid-column: 1 / -1; order: 0; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_desired_delivery_date"]) { grid-column: span 4; order: 1; }
.neworder-redesign .no-delivery-grid > .form-group:has(> .checkbox > label > input[name="provider_change_fast"]) { grid-column: span 4; order: 2; align-self: center; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_count_number"]) { grid-column: span 4; order: 3; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_point_of_delivery"]) { grid-column: span 4; order: 3; }
/* Germany branch: same field name, different (nested .input-addon>.input-group)
   markup + a real "MeLo-ID" label with an info popover, vs. the Austria
   branch's flat "Zählpunktbezeichnung" — the two structures never match
   the same selector, so both can be labelled correctly from one field name. */
.neworder-redesign .no-delivery-grid > .form-group.input-addon:has(> .input-group > input[name="previous_point_of_delivery"]) { grid-column: span 4; order: 3; }
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="measurementprovider_code_name"]) { grid-column: span 4; order: 4; }
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="market_location_id"]) { grid-column: span 4; order: 5; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_before_providers"]) { grid-column: span 4; order: 6; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_cust_id"]) { grid-column: span 4; order: 7; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_old_contact_terminated_to"]) { grid-column: span 4; order: 8; }

.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_desired_delivery_date"]),
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_count_number"]),
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_point_of_delivery"]),
.neworder-redesign .no-delivery-grid > .form-group.input-addon:has(> .input-group > input[name="previous_point_of_delivery"]),
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="measurementprovider_code_name"]),
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="market_location_id"]),
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_before_providers"]),
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_cust_id"]),
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_old_contact_terminated_to"]) {
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px;
}
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_desired_delivery_date"])::before,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_count_number"])::before,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_point_of_delivery"])::before,
.neworder-redesign .no-delivery-grid > .form-group.input-addon:has(> .input-group > input[name="previous_point_of_delivery"])::before,
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="measurementprovider_code_name"])::before,
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="market_location_id"])::before,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_before_providers"])::before,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_cust_id"])::before,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_old_contact_terminated_to"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); order: 1; margin-bottom: 0;
}
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_desired_delivery_date"])::before { content: "gewünschtes Lieferdatum"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_count_number"])::before { content: "Zählernummer"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_point_of_delivery"])::before { content: "Zählpunktbezeichnung"; }
.neworder-redesign .no-delivery-grid > .form-group.input-addon:has(> .input-group > input[name="previous_point_of_delivery"])::before { content: "MeLo-ID"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="measurementprovider_code_name"])::before { content: "abw. Messstellennetzbetreiber"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="market_location_id"])::before { content: "MaLo-ID"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_before_providers"])::before { content: "Vorversorger"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_cust_id"])::before { content: "bisherige Kundennummer"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_old_contact_terminated_to"])::before { content: "Altvertrag gekündigt zum"; }
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_desired_delivery_date"])::after,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_count_number"])::after,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_before_providers"])::after {
	content: "*"; order: 2; color: var(--fg-error); font: var(--fw-regular) 12px/16px var(--font-sans);
}
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_desired_delivery_date"]) > input,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_count_number"]) > input,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_point_of_delivery"]) > input,
.neworder-redesign .no-delivery-grid > .form-group.input-addon:has(> .input-group > input[name="previous_point_of_delivery"]) > .input-group,
.neworder-redesign .no-delivery-grid > .form-group.input-addon:has(> .input-group > input[name="previous_point_of_delivery"]) > .collapse,
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="measurementprovider_code_name"]) > .input-group,
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="market_location_id"]) > .input-group,
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group > input[name="market_location_id"]) > .collapse,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_before_providers"]) > input,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_cust_id"]) > input,
.neworder-redesign .no-delivery-grid > .form-group:has(> input[name="previous_old_contact_terminated_to"]) > input {
	order: 3; flex-basis: 100%;
}

/* --- Unterschrift & Zustimmungen: label + star the relocated sigdate
   field (moved here from Delivery.html — see default.html/Delivery.html).
   Real notEmpty-validated field, keeps its own existing help-block text. --- */
.no-grid > .form-group:has(> input[name="sigdate"]) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; }
.no-grid > .form-group:has(> input[name="sigdate"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); order: 1; margin-bottom: 0; content: "Datum der Unterschrift";
}
.no-grid > .form-group:has(> input[name="sigdate"])::after {
	content: "*"; order: 2; color: var(--fg-error); font: var(--fw-regular) 12px/16px var(--font-sans);
}
.no-grid > .form-group:has(> input[name="sigdate"]) > input { order: 3; flex-basis: 100%; }
.no-grid > .form-group:has(> input[name="sigdate"]) > .help-block { order: 4; flex-basis: 100%; margin: 4px 0 0; }

@media (max-width: 639px) {
	/* !important for the same reason as the no-vp-grid mobile block above:
	   these plain selectors are less specific than the per-field
	   `:has(...)` span rules, which would otherwise keep winning at every
	   width. */
	.neworder-redesign .no-bank-grid > .form-group,
	.neworder-redesign .no-bank-grid > .row.input-row,
	.neworder-redesign .no-delivery-grid > .form-group,
	.neworder-redesign .no-delivery-grid > .radio { grid-column: 1 / -1 !important; }
}
/* end NEWORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — "Stammdaten übernehmen" card-header placement.
   Partials/Form/Bank.html emits this button inline, nested inside the
   account_holder_salutation field's own .form-group (no exclude= hook to
   pull it out) — the reference places it as a card-header action next to
   the "Bankverbindung" title, like the "Pflicht *" meta on other cards.
   Repositioned with position:absolute (zero DOM/hook change, the button
   keeps its real data-target) rather than restructuring the partial. --- */
.neworder-redesign .no-card:has(.no-bank-grid) { position: relative; }
/* Bootstrap's .input-group itself sets position:relative, which would
   otherwise become the absolute button's positioning context instead of
   the card — neutralize it for this one instance only. */
.neworder-redesign .no-bank-grid > .form-group:has([data-target$=":applybasedata"]) > .input-group.select { position: static; }
.neworder-redesign .no-bank-grid [data-target$=":applybasedata"] {
	position: absolute; top: 20px; right: 20px; z-index: 1;
}
@media (max-width: 639px) {
	.neworder-redesign .no-bank-grid [data-target$=":applybasedata"] { position: static; margin-top: 8px; display: inline-block; }
}
/* end NEWORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — "fields jump around" fix: catch-all order + two
   real missing-field gaps found while root-causing it.
   Operator reported fields reordering unpredictably. Root cause: every
   `:has(...)`-keyed span/order rule above only covers the specific fields
   each grid was audited for — any OTHER field `Partials/Form/Bank.html` or
   `Delivery.html` can render for a real (non-default-fallback) provider,
   customer_type, or country_id, but that nobody wrote a rule for, has NO
   explicit `order`, so it defaults to `order: 0` — sorting it BEFORE every
   field that got order:1,2,3…, i.e. it visually jumps to the front of the
   card instead of sitting wherever it actually is in the markup. Two
   concrete cases confirmed by re-reading both partials in full:
   - `Partials/Form/Bank.html`'s account-holder `stairsAndDoorNumber` row
     (Stiege/Haustür) is not excluded by neworder's `Partials/Form/Bank`
     include, so it always renders in `.no-bank-grid` — no rule above
     covers it, so it was jumping to the very top of Bankverbindung.
   - `Partials/Form/Delivery.html`'s `key_point_invoice` field (only for
     `customer_type=="community"`) and provider-269-only `energyExists`/
     `netzProviderBlockingThreat*` fields — real for the providers/customer
     types that trigger them, uncovered above.
   Fixed at the root with a catch-all: give every direct child of these
   three grids `order: 50` by default (a plain, low-specificity rule), so
   any current or future unaudited field sorts to the END, in a stable
   position, instead of jumping to the front — the specific `:has(...)`
   rules above override this for every field already audited (`:has()`
   adds specificity, so they still win regardless of rule order in the
   file). The two concrete fields found are also given real labels/spans
   rather than left to the safety net, since they're easy to do properly. */
.neworder-redesign .no-bank-grid > *,
.neworder-redesign .no-delivery-grid > * { order: 50; }

.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_stairs"]) { grid-column: span 6; order: 6; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_stairs"]),
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_door_number"]) {
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px;
}
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_stairs"])::before,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_door_number"])::before {
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle); order: 1; margin-bottom: 0; flex-basis: 100%;
}
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_stairs"])::before { content: "Stiege"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_door_number"])::before { content: "Haustür"; }
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_stairs"]) > input,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group:has(> input[name$="bank_door_number"]) > input { order: 3; flex-basis: 100%; }

.neworder-redesign .no-delivery-grid > .form-group.select:has(select[name$="key_point_invoice"]) { grid-column: span 4; order: 1; }
.neworder-redesign .no-delivery-grid > .form-group:has(> .input-group.date input[name="netzProviderBlockingThreatDate"]) { grid-column: span 4; }
/* end NEWORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — header price legend was missing its bold total-value
   line entirely (structural gap, not a labelling gap). The reference's
   header card shows a bold total under each rate line (e.g. "342,00 €"
   under "Arbeitspreis · 14,25 ct/kWh") — `Partials/Ratecalc/Result.html`'s
   parallel `.rc-legend-item` already has this exact pattern (`.rc-legend-
   cap` + `.rc-legend-val`, stacked), and `.no-legend-val`'s CSS already
   existed here (line ~1682) — but `tpl/neworder.html`'s `.no-legend-item`
   never had the matching `<span class="no-legend-val">` markup, so that
   CSS rule had nothing to style. Added the value span (`tpl/neworder.html`)
   fed by a new `rcWorkPriceYear` helper (`app/neworder.js`, mirrors
   ratecalc.js's own — not loaded on the order page, same reason `rcBar-
   Widths` is duplicated there too) — this only needs a `.no-legend-stack`
   wrapper to lay `.no-legend-cap`/`.no-legend-val` out as two lines instead
   of side by side. */
.neworder-redesign .no-legend-stack { display: flex; flex-direction: column; }
/* end NEWORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass, 2026-09-02: Bankverbindung
   two-column grid was broken in live rendering (confirmed via headless
   screenshot, not just code review — the "Anschrift"/"Bankverbindung"
   sub-headings and the IBAN hint/warning banner were landing in the wrong
   column with large empty gaps around them, and "Land" visually jumped up
   next to "Vorname, Nachname").

   Root cause: the 2026-08-28 follow-up's `.form-group-seperator:nth-of-
   type(2)` / `:nth-of-type(3)` selectors (added to pin the "Anschrift" and
   "Bankverbindung" headings to grid-column 1/2) don't do what they look
   like they do — `:nth-of-type()` counts a sibling's position among ALL
   siblings of the same tag name (every child here is a `<div>`), not
   among elements matching the rest of the compound selector. The 2nd/3rd
   `<div>` child of `#bank .rd-col` are ordinary `.form-group`s ("Firma",
   "Anrede"), not the 2nd/3rd `.form-group-seperator` — so both selectors
   match nothing, and the two headings (plus `.rd-iban-hint` and the
   trailing `.rd-banner`, which never had a column rule at all) fall back
   to CSS Grid auto-placement, scattering unpredictably across both
   columns. Fixed with adjacency-based `:has(+ …)` targeting instead of
   position counting — robust regardless of how many siblings precede it.
   Note: `:has()` cannot itself contain a nested `:has()` (invalid per the
   Selectors spec, silently drops the whole rule) — `+ .form-group [name=…]`
   (sibling combinator followed by a plain descendant combinator) reaches
   the same field without nesting the pseudo-class. */
.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name$="bank_country_id"]) {
	grid-column: 1;
}
.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name="iban"]),
.resellerdata-redesign #bank .rd-col > .rd-iban-hint,
.resellerdata-redesign #bank .rd-col > .rd-banner {
	grid-column: 2;
}
@media (max-width: 767px) {
	/* Same reasoning as the existing 767px override just above this block:
	   an explicit grid-column: 2 still creates an implicit 2nd track even
	   once grid-template-columns collapses to one — restore column 1 for
	   every newly-pinned element here too. */
	.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name="iban"]),
	.resellerdata-redesign #bank .rd-col > .rd-iban-hint,
	.resellerdata-redesign #bank .rd-col > .rd-banner {
		grid-column: 1;
	}
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass #2, 2026-09-02: Bankverbindung
   field order + BIC/Bankname + BLZ/Konto pairing, checked against a real
   rendered screenshot of Redesign.zip's export-src/Account.html (served
   over http:// so its own dc-runtime script actually executes — reading
   the source alone missed both of these).

   1) Anschrift order was still Land→PLZ/Ort→Straße (the 2026-08-26 fix
      logged in the changelog for this exact sequence only ever reached
      the Stammdaten tab's copy of this pattern, not this tab's own
      manually-coded fallback blocks) — reference shows Straße→PLZ/Ort→Land.
   2) BIC+"Name der Bank" and Bankleitzahl+Kontonummer are each meant to
      sit side by side in one row (reference); the previous fence's
      grid-column:2 gave each its own full-width row at half-track width,
      wasting vertical space and matching neither the reference nor a
      sensible fallback.

   Fixed by converting the two-column grid to a 4-column one (each macro
   column now spans 2 of the 4 tracks) so the two side-by-side pairs can
   each take a single track, and giving every direct child of #bank
   .rd-col an explicit grid-row so placement no longer depends on the
   sparse auto-placement algorithm at all — the exact class of bug fixed
   above happened because two `:nth-of-type()` selectors silently matched
   nothing and their targets fell through to auto-placement; making the
   whole tab's layout column+row-explicit removes that failure mode
   entirely rather than patching around it again. */
.resellerdata-redesign #bank .rd-col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Left column (Kontoinhaber + Anschrift) — spans tracks 1–2, one field group per row */
.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name$="account_holder_company"]) { grid-column: 1 / 3; grid-row: 1; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_company"]) { grid-column: 1 / 3; grid-row: 2; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_salutation"]) { grid-column: 1 / 3; grid-row: 3; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_first_name"]) { grid-column: 1 / 3; grid-row: 4; }
.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name$="bank_country_id"]) { grid-column: 1 / 3; grid-row: 5; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_street"]) { grid-column: 1 / 3; grid-row: 6; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_zip"]) { grid-column: 1 / 3; grid-row: 7; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_country_id"]) { grid-column: 1 / 3; grid-row: 8; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_stairs"]) { grid-column: 1 / 3; grid-row: 8; }

/* Right column (Bankverbindung) — full-width rows span tracks 3–4 */
.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name="iban"]) { grid-column: 3 / 5; grid-row: 1; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name="iban"]) { grid-column: 3 / 5; grid-row: 2; }
.resellerdata-redesign #bank .rd-col > .rd-iban-hint { grid-column: 3 / 5; grid-row: 3; }
.resellerdata-redesign #bank .rd-col > .rd-banner { grid-column: 3 / 5; grid-row: 6; }

/* Right column paired rows — one track each, same row, side by side.
   The original 2026-08-21 fence (line ~4815) still sets `display:inline-
   block; width:calc(50% - 16px)` on these same four fields (its own CSS-
   multicol approach, superseded by the grid but never removed — append-
   only means it can't be deleted here). That width is relative to the
   grid AREA now, not multicol's implicit half-page, so it must be
   overridden back to the full track or these four end up roughly a
   quarter of their intended width. */
.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]) { grid-column: 3; grid-row: 4; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]) { grid-column: 4; grid-row: 4; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]) { grid-column: 3; grid-row: 5; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) { grid-column: 4; grid-row: 5; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]),
.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) {
	display: block; width: 100%; margin-right: 0;
}

@media (max-width: 767px) {
	.resellerdata-redesign #bank .rd-col { grid-template-columns: minmax(0, 1fr); }
	.resellerdata-redesign #bank .rd-col > * { grid-column: 1 !important; }
	/* Row numbers still apply and are now shared by both former macro
	   columns (1 and 6 collide, 2 and 7, …) — re-sequence into one clean
	   top-to-bottom stack instead, reusing the same field selectors. */
	.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name$="account_holder_company"]) { grid-row: 1; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_company"]) { grid-row: 2; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_salutation"]) { grid-row: 3; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_first_name"]) { grid-row: 4; }
	.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name$="bank_country_id"]) { grid-row: 5; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_street"]) { grid-row: 6; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_zip"]) { grid-row: 7; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_country_id"]) { grid-row: 8; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_stairs"]) { grid-row: 9; }
	.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name="iban"]) { grid-row: 10; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="iban"]) { grid-row: 11; }
	.resellerdata-redesign #bank .rd-col > .rd-iban-hint { grid-row: 12; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]) { grid-row: 13; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]) { grid-row: 14; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]) { grid-row: 15; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) { grid-row: 16; }
	.resellerdata-redesign #bank .rd-col > .rd-banner { grid-row: 17; }
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass #3, 2026-09-02: restore the
   "Stammdaten übernehmen" button to the Kontoinhaber column's corner.

   The 2026-08-21 fence (line ~4494) already positions this button
   correctly in principle (`position:absolute; top:0; right:0`, anchored
   to `.rd-col` which the base `.rd-col` rule already makes
   `position:relative`) — its own comment says exactly this is the intent.
   A 2026-08-28 follow-up (line ~6960) unconditionally reset it back to
   `position:static`, presumably because the CSS-multicol → CSS-grid
   conversion happening in that same pass made the absolute button land
   somewhere wrong at the time — but reset it for every viewport, not just
   the case that broke, so the button has rendered inline next to the
   Anrede field (matching neither the reference, which shows it beside
   the "Kontoinhaber" heading, nor either fence's own stated intent) ever
   since. Confirmed live (screenshot + computed-style check) that
   reinstating the original absolute placement works cleanly against the
   new fully row/column-explicit grid from pass #2 above — no overlap
   with the Anrede field, which now has its own row. `!important` is
   needed only for color/border/background: something with higher
   specificity than either fence's own `[data-target$=":applybasedata"]`
   selector (not tracked down further — likely Bootstrap's own compiled
   `.btn-primary`) wins those three properties by specificity regardless
   of source order, the same class of collision documented elsewhere in
   this file as needing a scoped `!important`. */
.resellerdata-redesign #bank [data-target$=":applybasedata"] {
	position: absolute;
	top: 0;
	right: calc(50% + 12px);
	margin: 0;
	border-color: var(--border-interactive) !important;
	color: var(--fg-interactive) !important;
	background: var(--bg-base) !important;
}
@media (max-width: 767px) {
	.resellerdata-redesign #bank [data-target$=":applybasedata"] {
		position: static;
		margin: 8px 0 0 !important;
	}
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass #4, 2026-09-02: add the
   "Dashboard / Account" breadcrumb the reference shows above the header
   card, per explicit operator approval (this is new markup, not pure
   restyling — flagged and confirmed before adding, per policy). Plain
   text row, no card/shadow — matches the reference's own minimal inline
   style exactly, just expressed as tokens. `tpl/resellerdata.html`
   gained the three-element `.rd-breadcrumb` block; no existing id,
   data-target, or view delimiter touched. */
.resellerdata-redesign .rd-breadcrumb {
	display: flex; align-items: center; gap: 8px;
	font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted);
}
.resellerdata-redesign .rd-breadcrumb a { color: var(--fg-muted); }
.resellerdata-redesign .rd-breadcrumb a:hover { color: var(--fg-interactive); }
.resellerdata-redesign .rd-breadcrumb-current { color: var(--fg-base); }
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass #5, 2026-09-02: the
   Anschrift PLZ/Ort and Straße/Hausnr. rows (Stammdaten + Bankverbindung
   tabs' own hand-coded fallback blocks, not a shared partial) rendered
   ONE combined label ("PLZ, Ort *" / "Straße, Hausnr. *") above both
   inputs instead of the reference's two independent per-field labels
   ("PLZ *"/"Ort *", "Straße *"/"Nr. *") sitting directly above their own
   input. `tpl/resellerdata.html` now emits a real `<label>` per field
   (reusing the existing `.rd-field-label` class already used elsewhere
   on this screen) instead of one shared `col-sm-4` label — a markup
   change, but confined to this screen's own fallback blocks, not the
   shared Base/Bank partials, so zero blast radius beyond this template.
   Scoped via :has() to just these four fields, not every `.row.input-
   row` (that class is also shared by Contact.html's phone/fax/mobile
   prefix+number rows elsewhere on this same screen, which must keep
   their current single-shared-label layout untouched). */
.resellerdata-redesign .row.input-row:has([name$="zip"]) > [class*="col-"],
.resellerdata-redesign .row.input-row:has([name="street"]) > [class*="col-"],
.resellerdata-redesign .row.input-row:has([name="street_number"]) > [class*="col-"],
.resellerdata-redesign .row.input-row:has([name="bank_street"]) > [class*="col-"],
.resellerdata-redesign .row.input-row:has([name="bank_street_number"]) > [class*="col-"] {
	display: flex; flex-direction: column; gap: 5px;
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER REDESIGN — companion fix, 2026-09-02: `Partials/Form/Base.html`'s
   `direction="horizontal"` PLZ/Ort and Straße/Nr. blocks were changed from
   one shared label per row to a real label per field (see that partial's
   own history note — reached via `resellerdata`'s Bankverbindung reconcil-
   iation, not something this screen asked for on its own, but this screen
   shares the same partial so the same shared-blast-radius companion CSS is
   required here too, per the redesign recipe's own rule 3). Nothing here
   pre-existing stacks a label inside `.row.input-row > [class*="col-"]` —
   that structure never had one to style before. Matches the existing
   `.form-group > label.form-label` treatment already used elsewhere in
   this screen (12px/--fg-subtle, css/egon.css:2824-2826). */
.customer-redesign .row.input-row > [class*="col-"] {
	display: flex; flex-direction: column; gap: 4px;
}
.customer-redesign .row.input-row label.form-label {
	width: 100%; margin: 0; padding: 0; text-align: left;
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle);
}
/* end CUSTOMER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   REGISTERRESELLER REDESIGN — companion fix, 2026-09-02: same
   `Partials/Form/Base.html` PLZ/Ort + Straße/Nr. per-field-label change as
   the CUSTOMER REDESIGN companion block above — this screen's Anschrift
   card (line ~20's include) also renders both blocks. Appended after the
   v2 block per the append-only rule; v2's own `.row.input-row > [class*=
   "col-"]:last-child { flex: 0 0 84px }` (street-number pin) is untouched
   and keeps winning since this rule doesn't redeclare `flex`. */
.registerreseller-redesign .row.input-row > [class*="col-"] {
	display: flex; flex-direction: column; gap: 4px;
}
.registerreseller-redesign .row.input-row label.form-label {
	width: 100%; margin: 0; padding: 0; text-align: left;
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle);
}
/* end REGISTERRESELLER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass #6, 2026-09-02: the new
   per-field PLZ/Ort/Straße/Nr. labels (pass #5 above, and the matching
   `Partials/Form/{Base,Bank}.html` change) rendered green/red instead of
   the reference's always-neutral gray. Root cause: `components-bs5.css`'s
   global BS3-compat shim `.has-success label, .has-error label { color:
   … }` is a descendant selector with no depth limit, and the existing
   `.resellerdata-redesign .form-group > label { color: var(--fg-subtle)
   }` rule only overrides a label that's a *direct child* of `.form-group`
   — true for every other field's single label, no longer true once a
   field's label sits inside `.row.input-row > [class*="col-"]`. Higher
   specificity here (4 classes vs. the shim's 1 class + 1 type) wins
   regardless of source order, so no `!important` needed. */
.resellerdata-redesign .row.input-row label.rd-field-label,
.resellerdata-redesign .row.input-row label.form-label {
	color: var(--fg-subtle);
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass #7, 2026-09-03: Kontoinhaber
   still showed Anrede alone on its own row, then "Vorname, Nachname" fused
   into one label with two inputs — the reference pairs Anrede+Vorname on
   one row instead, with Nachname alone below (this is genuinely different
   from the Stammdaten tab's own Person section, which pairs Anrede with
   Geburtsdatum and keeps Vorname+Nachname paired together on their own row
   — already correct, not touched here; confirmed by re-reading both of the
   reference's own tab sources rather than assuming the two tabs share one
   layout rule). `Partials/Form/Bank.html`'s `firstNameLastName` block was
   split into two real `.form-group`s (see that commit) so this reflows
   Anrede into track 1 only (was a full 2-track span), Vorname into track
   2, and Nachname into its own full-span row where the fused group used
   to sit — net row count on #bank .rd-col is unchanged, so nothing below
   this needs renumbering on desktop. The 767px stack below **does**
   renumber everything from Nachname onward by one row, since a field that
   used to be free (shared with account_holder_first_name's single row)
   now needs its own. */
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_salutation"]) { grid-column: 1; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_first_name"]) { grid-column: 2; grid-row: 3; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_last_name"]) { grid-column: 1 / 3; grid-row: 4; }
@media (max-width: 767px) {
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_salutation"]) { grid-row: 3; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_first_name"]) { grid-row: 4; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="account_holder_last_name"]) { grid-row: 5; }
	.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name$="bank_country_id"]) { grid-row: 6; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_street"]) { grid-row: 7; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_zip"]) { grid-row: 8; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_country_id"]) { grid-row: 9; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name$="bank_stairs"]) { grid-row: 10; }
	.resellerdata-redesign #bank .rd-col > .form-group-seperator:has(+ .form-group [name="iban"]) { grid-row: 11; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="iban"]) { grid-row: 12; }
	.resellerdata-redesign #bank .rd-col > .rd-iban-hint { grid-row: 13; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="swift"]) { grid-row: 14; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_name"]) { grid-row: 15; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]) { grid-row: 16; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) { grid-row: 17; }
	.resellerdata-redesign #bank .rd-col > .rd-banner { grid-row: 18; }
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   REGISTERRESELLER REDESIGN — companion fix, 2026-09-03: `Partials/Form/
   Bank.html`'s `firstNameLastName` block (see that commit) is now two
   separate `.form-group`s (`account_holder_first_name`, `_last_name`)
   instead of one fused group with two inputs. This screen's existing
   "Kontoinhaber = Mitarbeiter" checkbox toggle (`css/egon.css:3725-3730`)
   hides the identity/address fields by matching `.form-group:has(input
   [name="account_holder_first_name"])` — before the split that same
   `.form-group` also contained `account_holder_last_name`, so hiding it
   hid both; after the split, `_last_name` now has its own `.form-group`
   that the existing rule never mentions, so it would stay visible alone
   once the checkbox hides everything else. Add the missing selector. */
.registerreseller-redesign .rr-bank-fields.rr-inhaber-gleich .form-group:has(input[name="account_holder_last_name"]) {
	display: none;
}
/* end REGISTERRESELLER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — reconciliation pass #8, 2026-09-03: two more
   confirmed gaps from a direct side-by-side operator screenshot compare
   (not source-reading — this exact pair of gaps had no textual trace to
   find, only a rendered comparison would surface them). (1) The reference
   shows a small "Aus der IBAN abgeleitet" caption above the read-only
   BLZ/Konto row — `Partials/Form/Bank.html` never had this text at all,
   added as a plain, non-interactive `<span>` (no id, no data-target — a
   caption, not a control) reusing the file's own existing `col-sm-4
   form-label` styling convention rather than inventing a new one. (2) The
   reference labels the optional "Firma" field "Firma (optional)"; added
   via the same partial's existing `{{#inArray … required}}` conditional,
   `{{else}}` branch, so any OTHER `direction="horizontal"` consumer where
   this field IS required is unaffected (no visible change there). Both
   additions shift the Bankverbindung column's row count by one from BLZ
   onward — renumbered explicitly below, both desktop and the 767px stack,
   rather than left to guesswork. */
.resellerdata-redesign #bank .rd-col > .rd-bank-derived-caption {
	grid-column: 3 / 5; grid-row: 5;
	display: block; width: 100%; margin: 0; padding: 0; text-align: left;
	font: var(--fw-regular) 12px/16px var(--font-sans); color: var(--fg-subtle);
}
.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]) { grid-row: 6; }
.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) { grid-row: 6; }
.resellerdata-redesign #bank .rd-col > .rd-banner { grid-row: 7; }
.resellerdata-redesign .rd-optional-hint { color: var(--fg-muted); font-weight: var(--fw-regular); }
@media (max-width: 767px) {
	.resellerdata-redesign #bank .rd-col > .rd-bank-derived-caption { grid-column: 1 !important; grid-row: 16; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="bank_identifier_code"]) { grid-row: 17; }
	.resellerdata-redesign #bank .rd-col > .form-group:has([name="account_no"]) { grid-row: 18; }
	.resellerdata-redesign #bank .rd-col > .rd-banner { grid-row: 19; }
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — reference reconciliation pass (2026-09-03)
   Fresh side-by-side audit against the export-src/Auftragserfassung.html
   reference (desktop rail). Four gaps confirmed against a real render:

   1) Zuordnung card: up to 4 fields can render there (search_customer/
      vp_id/vp_id_sub/vp_order_no, gated by login+sub-account state) but the
      shared 12-col .no-grid's fixed .no-col-4 (span 4) spans always wrap
      after 3, leaving a 4th field alone on its own line. Gave this one
      grid instance (tpl/neworder/energy/default.html now adds a
      `no-zuordnung-grid` modifier class alongside `no-grid`, no id/name/
      data-target touched) its own auto-fit track list so 3 or 4 fields
      always share the row evenly; collapses to one column under it on
      narrow viewports on its own via minmax(), same visual result as the
      sitewide 639px `.no-grid{grid-template-columns:1fr}` flip without
      needing to fight that rule's specificity.
   2) Bankverbindung IBAN row: Partials/Form/Bank.html has two branches
      (`direction="horizontal"` vs not) — neworder's own include never
      passes `direction`, so it always renders the *second* (plain/
      vertical) branch, where "IBAN prüfen"/"aus BLZ und Konto berechnen"
      sit in a nested `<div class="form-group" style="margin-top:15px">`
      *below* the input, not inside a `.input-group` beside it (that
      layout only exists in the horizontal branch, which this screen never
      uses). The prior pass's `> div:not(.input-group){flex-basis:100%}`
      rule already accounted for that div existing, just stacked it full-
      width under the input — put it inline instead, matching the
      reference. "Stammdaten übernehmen" (already repositioned into the
      card header by an earlier pass) was still a solid `.btn-primary`
      fill; restyled to the same outline recipe already proven on the
      identical button in resellerdata (line ~4494). The "wichtiger
      Hinweis" IBAN callout is shrunk from the full bs-callout-warning
      banner to a compact interactive-tinted hint — same id/text/markup.
      BIC/"Name der Bank"/BLZ/Konto: bank_name, bank_identifier_code and
      account_no already carry real `disabled readonly` attributes in this
      branch, so the sitewide `.form-control[disabled],[readonly]` rule
      (line ~1737) already gives them the muted "computed" look — no new
      rule needed. BIC (swift) itself is NOT disabled in the markup (it's
      user-editable, only *sometimes* filled from the IBAN-check response
      by app/neworder.js's `aftercheckiban`), so it intentionally keeps its
      normal editable field styling rather than being faked as disabled.
      Per the explicit product decision already logged above (see the
      Bankverbindung section of the brief): Kontoinhaber/Anschrift fields
      stay visible unconditionally — nothing here hides them.
   3) Kontaktlos (SMS/E-Mail) signature-option buttons in the sticky action
      bar were both plain `.btn-primary` (identical to "Auftrag parken"),
      giving no visual grouping; the reference shows these two as a
      distinct tinted pair next to the plain-outline "Papierauftrag"
      button ("Papierauftrag" already renders `.btn-secondary`, i.e.
      already outline-equivalent — matches as-is, no change needed there).
      Tinted with the same two-shades-of-PRIMARY color-mix idiom already
      used for the header price bar (`--no-bar-g`) — never secondary/chart
      tokens, per CLAUDE.md §4 (this mandant's --ci-sek renders black).
   4) Liefertermin & Vorversorger: Partials/Form/Delivery.html never had
      any section-divider markup at all (unlike Bank.html, which already
      uses `.form-group-seperator` in its own horizontal branch) — added
      two instances of that exact existing pattern/class ("Zählerdaten"
      before the meter fields, "Bisherige Versorgung" before the
      previous-supplier fields), reusing the established convention rather
      than inventing a new one. Positioned via `:has(+ …)` adjacency, not
      `:nth-of-type()` — the resellerdata reconciliation pass upstream
      (line ~7582) already documents why `:nth-of-type()` silently matches
      nothing here: every child of this grid is a plain `<div>`.
      Delivery.html is shared by every neworder/energy/provider*.html
      override AND tpl/neworderpublic/energy/default.html — the two added
      divs are inert without this CSS (they render as a plain muted label
      + <hr>, same as Bank.html's own already-shipping horizontal branch
      elsewhere in the app), but neworderpublic renders outside
      `.neworder-redesign` scope and hasn't been re-QA'd here.
   Header price card (item 1) and Unterschrift & Zustimmungen (item 7) were
   re-checked against the reference and found already close — no changes.
   The reference's right-aligned red "Fehlt noch: …" validation summary has
   no equivalent hook anywhere in app/neworder.js or tpl/neworder.html (no
   "Fehlt noch"/missing-fields string exists at all) — skipped rather than
   inventing new validation logic, per the no-new-behavior rule.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- 1) Zuordnung: let 3 or 4 fields share the row evenly --- */
.neworder-redesign .no-zuordnung-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.neworder-redesign .no-zuordnung-grid > .no-col-4 { grid-column: auto; }

/* --- 2a) IBAN prüfen/berechnen: put the buttons beside the input, not
   below it (Bank.html markup/ids untouched — CSS-only). --- */
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) {
	border-top: 1px solid var(--border-base); padding-top: 16px; margin-top: 4px;
}
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) > input {
	flex: 1 1 240px;
}
.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) > div.form-group {
	order: 3; flex: 0 0 auto; flex-basis: auto; margin-top: 0 !important;
	display: flex; flex-wrap: wrap; gap: 8px;
}
@media (max-width: 639px) {
	.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) > input,
	.neworder-redesign .no-bank-grid > .form-group:has(> input[name$="iban"]) > div.form-group {
		flex-basis: 100%;
	}
}

/* --- 2b) IBAN "wichtiger Hinweis": compact interactive-tinted hint
   instead of the full warning banner (same id/text/markup). --- */
.neworder-redesign .no-bank-grid .bs-callout#iban-calc-info {
	background: var(--bg-highlight); border-color: var(--border-interactive); padding: 8px 12px;
}
.neworder-redesign .no-bank-grid .bs-callout#iban-calc-info h4 { font-size: 12px; margin-bottom: 2px; }
.neworder-redesign .no-bank-grid .bs-callout#iban-calc-info p { margin: 0; font-size: 12px; line-height: 17px; }

/* --- 2c) "Stammdaten übernehmen": outline fill, same recipe already
   proven on the identical button in resellerdata (line ~4494). Position
   (card header, top-right) was already handled by an earlier pass. --- */
.neworder-redesign .no-bank-grid [data-target$=":applybasedata"] {
	background: var(--bg-base); border-color: var(--border-interactive); color: var(--fg-interactive);
}
.neworder-redesign .no-bank-grid [data-target$=":applybasedata"]:hover {
	background: var(--bg-highlight); color: var(--fg-interactive);
}

/* --- 3) Kontaktlos (SMS/E-Mail): 2026-09-09 correction — the operator's
   current reference bundle (dated 2026-09-08, newer than this pass) shows
   "digitale Unterschrift"/"kontaktlose Unterschrift" as solid primary
   buttons, same weight as any other .btn-primary — not the tinted pair
   below. Dropping the override lets these buttons fall back to the
   sitewide `.neworder-redesign .btn-primary` / base `.btn-primary` rule
   (solid --bg-interactive, white text), matching the reference exactly. */

/* --- 4) Liefertermin & Vorversorger: "Zählerdaten" / "Bisherige
   Versorgung" section dividers (Delivery.html markup added above). --- */
.neworder-redesign .no-delivery-grid > .form-group-seperator { grid-column: 1 / -1; margin: 0; }
.neworder-redesign .no-delivery-grid > .form-group-seperator:has(+ .form-group input[name="previous_count_number"]),
.neworder-redesign .no-delivery-grid > .form-group-seperator:has(+ .form-group input[name="previous_point_of_delivery"]),
.neworder-redesign .no-delivery-grid > .form-group-seperator:has(+ .form-group input[name="energyExists"]) { order: 3; }
.neworder-redesign .no-delivery-grid > .form-group-seperator:has(+ .form-group input[name="previous_cust_id"]) { order: 6; }
.neworder-redesign .no-delivery-grid > .form-group-seperator .row { margin: 0; }
.neworder-redesign .no-delivery-grid > .form-group-seperator .col-6 { padding: 0; flex: none; width: auto; max-width: none; }
.neworder-redesign .no-delivery-grid > .form-group-seperator small {
	font: var(--fw-medium) 12px/18px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted);
}
.neworder-redesign .no-delivery-grid > .form-group-seperator hr { border: 0; border-top: 1px solid var(--border-base); margin: 4px 0 0; }
/* end NEWORDER REDESIGN */

/* ORDER-DETAIL REDESIGN — tab-switching bugfix (2026-09-03)
   tpl/order.html's 3 od-tabs bars moved `active` from <li> to <a>
   (Bootstrap 5's real pattern -- the <li class="active"> BS3 leftover made
   Tab.show() throw "Illegal invocation" since it couldn't resolve the pane).
   The existing li.active > a selector at line ~5487 now never matches;
   add the a.active companion so the active-tab styling still applies,
   same belt-and-suspenders pattern already used on resellerdata's tabs. */
.order-detail-redesign .od-tabs > li > a.active {
	font-weight: var(--fw-medium); color: var(--fg-interactive);
	box-shadow: inset 0 -2px 0 0 var(--bg-interactive);
}
/* end ORDER-DETAIL REDESIGN */

/* TAB-SWITCH BUGFIX SWEEP — CP-1.2 (2026-09-03)
   Same BS3->BS5 tab-migration bug (see ORDER-DETAIL REDESIGN above and
   CP-1.1's order.html/customer.html fixes) found across 17 more templates
   this sweep: <li class="active"> moved to <a class="active"> so
   Bootstrap 5's Tab.show() can resolve _parent/_getActiveElement, plus a
   couple of tab-trigger wrappers with no .nav/[role=tablist] ancestor
   (dropdown-nested attribute tabs in phone.html/smarthome.html/
   Partials/Product/Item.html got role="tablist"), plus one pane-without-
   active-trigger mismatch (Partials/Ratecalc/ResultMobile.html's phone
   layout — #…-phone-info-{{rate_id}} pane was active by default but its
   trigger never was).
   Of all 17 files touched, only smart.html (tpl/smart.html, .sm-tabs) had
   an existing li.active > a CSS rule for its tab-bar styling — the
   .smart-redesign .sm-tabs > li.active > a rule at line ~2952. Add the
   a.active companion alongside it, same belt-and-suspenders pattern as
   ORDER-DETAIL REDESIGN / resellerdata above. Every other touched file
   either had no tab-bar CSS at all (unstyled/legacy screens) or, on
   structure.html, already carried both the li.active > a and a.active
   selectors from an earlier pass. Tokens only, no new tokens introduced. */
.smart-redesign .sm-tabs > li > a.active { border-color: var(--border-interactive); background: var(--bg-highlight); color: var(--fg-interactive-hover); }
/* end TAB-SWITCH BUGFIX SWEEP */

/* ═══════════════════════════════════════════════════════════════════════
   INVITERESELLER REDESIGN v4 (Mitarbeiter einladen — parity-fix pass)
   Reference reconciliation, 2026-09: the "E-Mail wdh." confirm field is
   replaced with an optional "Persönliche Nachricht" textarea (matches the
   reference), and the consent line now carries a real Datenschutz link.
   Additive over v2/v3 above -- append-only, same convention. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.invitereseller-redesign .ir-form-body textarea.form-control.ir-message { height: auto; min-height: 72px; padding: 8px 10px; line-height: 20px; resize: vertical; }
.invitereseller-redesign .form-group.ir-consent a { color: var(--fg-interactive); text-decoration: none; }
.invitereseller-redesign .form-group.ir-consent a:hover { color: var(--fg-interactive-hover); text-decoration: underline; }
.invitereseller-redesign .ir-form-footer .btn.btn-primary.btn-block .fa { font-size: 12px; }
/* end INVITERESELLER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   PROVISION REDESIGN — "Provision abweichend?" sidebar card
   Reference reconciliation, 2026-09: adds a static info card the live
   sidebar was missing entirely (reference: Provisionen.html). Deliberately
   not reusing .pv-hint for the body text -- that class carries a
   border-top/margin-top meant to separate a hint from *preceding* primary
   content in the other pv-cards (see the existing ":first-child" override
   a few blocks up), which is wrong here since the description is this
   card's only content alongside its own title. New, dedicated classes
   instead. "Rückfrage senden" links to the site's real Kontakt page (id
   46, the same shortcut page used as the primary contact route
   elsewhere this session) -- no mock dialog, this card has no JS behavior
   of its own. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.provision-redesign .pv-deviate-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); margin-bottom: 4px; }
.provision-redesign .pv-deviate-text { margin: 0 0 12px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-subtle); }
.provision-redesign .pv-deviate-btn { display: inline-flex; align-items: center; }
/* end PROVISION REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   PAGINATION REDESIGN — order / customer / settlement dropdown conversion
   Reference reconciliation, 2026-09: "Zeilen pro Seite" is a real <select>
   in the reference across all three list screens; live had a hand-rolled
   Bootstrap-pagination-widget button group per screen (order.html/
   customer.html/settlement.html), each with its own click-based
   data-target="action:<module>:changepazesize"/"orderlistpagesize"
   handler. Converted to native <select>s bound via plain jQuery .on
   ('change', ...) in each app's render callback -- same established
   pattern as e.g. ratecalc.js's rate_type select handler -- rather than
   the data-target/data-array framework, since that only binds click
   (see egon.js applyActions(): '[data-target*="action:"]').off('click')
   .on('click', ...)). order keeps its existing option sets (10/25/50/100
   or 25/50/100/500 depending on egon_config.settings
   .enableCustomOrderPagination) rather than trimming to the reference's
   bare 25/50/100 -- user's explicit call, to not remove a capacity
   reseller staff may already rely on. customer/settlement already
   matched the reference's 10/25/50 exactly. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.order-redesign .or-pagesize-select,
.customer-redesign .cu-pagesize-select,
.settlement-redesign .sr-pagesize-select {
	height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-base); font: var(--fw-regular) 13px/22px var(--font-sans); color: var(--fg-base);
}
/* end PAGINATION REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN REDESIGN (backfill, 2026-09) — recovered from fileadmin
   Not a new-build: this login redesign already shipped (dated ~2026-08-27)
   as two near-identical inline <style> blocks directly inside
   fileadmin/templates/page.de/extensions/fe_login.html (the LOGIN and
   FORGOT felogin subparts each carried their own copy). fileadmin/ is
   entirely gitignored in the parent repo, so none of that CSS was ever
   versioned anywhere -- this block recovers it into git by relocating it
   here, since egon.css already loads unconditionally on every page
   (page.includeCSS.egonCss in setup.txt, no [loginUser] gate) including
   the login page itself. Only the CSS moved -- fe_login.html's markup,
   ###MARKER###/subpart names, field names (name="user"/"pass"/
   "logintype"/"permalogin"), and its <script> block (togglePassword) are
   completely untouched.
   The two original blocks were NOT byte-identical -- LOGIN's carried
   extra rules FORGOT didn't need (permalogin checkbox, the password
   show/hide toggle, the .fe-auth-actions--stretch full-width modifier)
   and FORGOT carried one LOGIN didn't (hiding the form after a
   successful reset-password submission). Merged here as the union of
   both; a rule that only matches markup present on one of the two pages
   is inert (not wrong) on the other. One real merge decision: LOGIN's
   base ".fe-auth-shell .btn-primary" had no flex, relying on the
   ".fe-auth-actions--stretch" modifier class (present in its own markup)
   for full width; FORGOT's had "flex:1" directly on the base rule, to
   share its row evenly with the adjacent backlink button. Kept FORGOT's
   flex:1 on the merged base rule -- safe for LOGIN too, since flex:1 on
   a lone flex child already fills the row (the --stretch modifier's own
   flex:1 becomes redundant, not conflicting), and it's what FORGOT's
   own two-button row structurally needs.
   Tokens already in use here are pre-existing (--bg-subtle, --fg-error,
   --border-interactive, etc.) -- this block introduces no new tokens.
   Not scoped under a wrapper div (felogin's own root markup has no such
   redesign hook to add one to without touching more than "just the
   style blocks"); relies on the .fe-auth- prefix and .tx-felogin-pi1
   class names fe_login.html already carries, specific enough not to leak.
   ═══════════════════════════════════════════════════════════════════════ */
.fe-auth-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-subtle); }
.fe-auth-shell { flex: 1; display: flex; align-items: center; justify-content: safe center; padding: 48px 24px 64px; box-sizing: border-box; }
.fe-auth-column { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 22px; }
.fe-auth-column .tx-felogin-pi1 { width: 100%; background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); padding: 28px 28px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.fe-auth-shell fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.fe-auth-logo { display: block; align-self: center; width: 180px; height: var(--ci-logo-h, 32px); background: var(--ci-logo) center / contain no-repeat; }
.fe-auth-title { margin: 0; font: 500 20px/28px var(--font-sans); color: var(--fg-base); }
.fe-auth-hint { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--fg-subtle); }
.fe-auth-hint:empty { display: none; }
.fe-auth-status-wrap:empty { display: none; }
.fe-auth-status-line { margin: 0; }
.fe-auth-status-line--title.fe-auth-status--error { font: 500 13px/18px var(--font-sans); color: var(--fg-error); }
.fe-auth-status-line--text.fe-auth-status--error { font: 400 12px/18px var(--font-sans); color: var(--fg-error); }
.fe-auth-status-wrap:has(.fe-auth-status--error) { border: 1px solid var(--border-error); border-radius: var(--radius-md); background: var(--tag-red-bg); padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; font: 400 12px/18px var(--font-sans); color: var(--fg-error); }
.fe-auth-status { border: 1px solid var(--tag-green-fg); border-radius: var(--radius-md); background: var(--tag-green-bg); padding: 11px 13px; display: flex; align-items: flex-start; gap: 8px; }
.fe-auth-status__icon { flex: none; color: var(--tag-green-fg); margin-top: 2px; }
.fe-auth-status__body { display: flex; flex-direction: column; gap: 2px; }
.fe-auth-status__title { font: 500 13px/18px var(--font-sans); color: var(--tag-green-fg); }
.fe-auth-status__text { font: 400 12px/18px var(--font-sans); color: var(--tag-green-fg); }
.fe-auth-shell .form-group { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fe-auth-label { font: 400 12px/16px var(--font-sans); color: var(--fg-subtle); }
.fe-auth-shell .form-control { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-base); font: 400 13px/22px var(--font-sans); color: var(--fg-base); box-sizing: border-box; }
.fe-auth-shell .form-control:focus { outline: none; border-color: var(--border-interactive); box-shadow: var(--shadow-focus-ring); }
.fe-auth-permalogin { display: flex; align-items: center; gap: 8px; font: 400 13px/20px var(--font-sans); color: var(--fg-base); }
.fe-auth-permalogin label { margin: 0; }
.fe-auth-permalogin input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--bg-interactive); }
.fe-auth-shell .form-group.fe-auth-actions { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.fe-auth-actions--stretch .btn-primary { flex: 1; width: 100%; }
.fe-auth-shell .btn-primary { height: 40px; padding: 0 18px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-interactive); font: 500 14px/1 var(--font-sans); color: var(--fg-on-color); cursor: pointer; flex: 1; }
.fe-auth-shell .btn-primary:hover { background: var(--bg-interactive-hover); border-color: var(--bg-interactive-hover); }
.fe-auth-link-btn { flex: none; height: 40px; padding: 0 18px; border: 1px solid var(--border-interactive); border-radius: var(--radius-md); background: var(--bg-base); font: 500 14px/38px var(--font-sans); color: var(--fg-interactive); text-decoration: none; text-align: center; box-sizing: border-box; display: inline-block; }
.fe-auth-link-btn:hover { background: var(--bg-highlight); text-decoration: none; }
.fe-auth-link-btn:has(button) { height: auto; padding: 0; border: 0; background: transparent; margin-left: auto; }
.fe-auth-password-head { display: flex; align-items: center; }
.fe-auth-forgot { border: 0; background: transparent; padding: 0; font: 400 12px/16px var(--font-sans); color: var(--fg-interactive); cursor: pointer; }
.fe-auth-forgot:hover { color: var(--fg-interactive-hover); text-decoration: underline; }
.fe-auth-password-field { position: relative; }
.fe-auth-password-field .form-control { padding-right: 40px; }
.password-toggle-btn { position: absolute; top: 0; right: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer; padding: 0; }
.password-toggle-btn:hover { color: var(--fg-base); }
.tx-felogin-pi1:has(.fe-auth-status--success) .fe-auth-forgot-email,
.tx-felogin-pi1:has(.fe-auth-status--success) .fe-auth-actions .btn-primary { display: none; }
.fe-auth-footer-links { display: flex; justify-content: center; align-items: center; gap: 18px; }
.fe-auth-footer-links a { font: 400 12px/16px var(--font-sans); color: var(--fg-muted); text-decoration: none; }
.fe-auth-footer-links a:hover { color: var(--fg-interactive-hover); text-decoration: underline; }
.fe-auth-copyright { background: var(--brand-2); }
.fe-auth-copyright__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 52px; font: 400 12px/16px var(--font-sans); color: var(--nav-fg); }
/* end LOGIN REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   MASSUPLOAD REDESIGN — restyle only (CP-5.5)
   Per explicit product decision this pass restyles the live 2-dropzone
   massupload screen; it does NOT build the reference's 5-step CSV+
   documents wizard (CSV-Upload.html) -- that flow has no backend
   anywhere in this repo, and a matching wizard already exists as a
   separate external micro-frontend on a currently-hidden page. Visual
   language (dashed drop-zone, upload icon, "hierher ziehen / oder
   klicken zum Auswaehlen" copy) borrowed from that same reference
   export's own drop-zone treatment, since it's still the closest
   available design source even though the surrounding flow isn't built.
   #order_upload / #other_upload ids preserved exactly -- Dropzone.js
   binds to them by id (app/massupload.js) and auto-manages their
   children at runtime. The custom .dz-message[data-dz-message] block
   is Dropzone's own documented customization hook (replaces its default
   auto-generated prompt) rather than a fight against it.
   dropzoneCss (Resources/Public/Css/lib/dropzone.css) loads AFTER
   egonCss in setup.txt's includeCSS, so its own .dropzone .dz-preview
   rules would otherwise win any equal-specificity clash; the one
   .dz-preview override below uses a 3-class compound selector
   specifically so it wins regardless of load order, without touching
   Dropzone's own thumbnail/progress-bar internals. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.massupload-redesign { display: flex; flex-direction: column; gap: 20px; }
.massupload-redesign .mu-page-head { display: flex; flex-direction: column; gap: 4px; }
.massupload-redesign .mu-page-title { margin: 0; font: var(--fw-medium) 22px/30px var(--font-sans); color: var(--fg-base); }
.massupload-redesign .mu-page-sub { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-muted); }
.massupload-redesign .mu-hint {
	display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
	border: 1px solid var(--border-base); border-radius: var(--radius-md);
	background: var(--bg-subtle); font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle);
}
.massupload-redesign .mu-hint .fa { flex: none; margin-top: 2px; color: var(--fg-muted); }
.massupload-redesign .mu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.massupload-redesign .mu-card { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-rest); overflow: hidden; }
.massupload-redesign .mu-card-head { padding: 14px 20px; border-bottom: 1px solid var(--border-base); font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.massupload-redesign .mu-card-body { padding: 20px; }
.massupload-redesign .mu-dropzone.dropzone {
	min-height: 190px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
	background: var(--bg-subtle); padding: 0; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease;
}
.massupload-redesign .mu-dropzone.dropzone:hover,
.massupload-redesign .mu-dropzone.dropzone.dz-drag-hover { border-color: var(--border-interactive); background: var(--bg-highlight); }
.massupload-redesign .mu-dropzone .dz-message { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 190px; padding: 38px 20px; }
.massupload-redesign .mu-dropzone-icon { font-size: 26px; color: var(--fg-muted); }
.massupload-redesign .mu-dropzone-title { font: var(--fw-medium) 14px/22px var(--font-sans); color: var(--fg-base); }
.massupload-redesign .mu-dropzone-sub { font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-subtle); }
.massupload-redesign .mu-dropzone.dropzone .dz-preview {
	margin: 12px; border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-base);
}
.massupload-redesign .mu-dropzone.dropzone .dz-preview.upload-error { border-color: var(--border-error); background: var(--tag-red-bg); }
@media (max-width: 767px) {
	.massupload-redesign .mu-grid { grid-template-columns: minmax(0, 1fr); }
}
/* end MASSUPLOAD REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   PROVISION REDESIGN — sidebar "Anbieter" list-with-counts (flagged
   earlier this session, tackled now). Was a plain <select> that
   smooth-scrolled to the chosen provider's results section on change
   (app/provision.js's now-removed onChangeProvider); reference shows a
   clickable list of rows with a rate-count badge instead. Converted to
   real .pv-provider-row anchors dispatched through the existing
   data-target action framework (a new action:provision:jumptoprovider,
   reusing the exact same jQuery animate/scrollTop logic, just scoped to
   the results view container so it can't match the clicked row itself).
   rates.length already existed on each getResellerProv item (same
   collection, formatProvisionArray already attaches a real `rates`
   array to every provider) -- confirmed by reading
   lib/egon.helper.js:formatProvisionArray before assuming it, not
   guessed. .pv-card-body--flush removes the card body's own padding so
   the list's rows can run edge-to-edge with their own internal padding/
   divider, matching the reference. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.provision-redesign .pv-card-body--flush { padding: 0; }
.provision-redesign .pv-provider-list { display: flex; flex-direction: column; }
.provision-redesign .pv-provider-row {
	display: flex; align-items: center; gap: 8px; padding: 8px 14px;
	border-bottom: 1px solid var(--border-base); background: var(--bg-base);
	text-decoration: none; cursor: pointer;
}
.provision-redesign .pv-provider-row:last-child { border-bottom: 0; }
.provision-redesign .pv-provider-row:hover { background: var(--bg-subtle); text-decoration: none; }
.provision-redesign .pv-provider-name {
	min-width: 0; flex: 1; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.provision-redesign .pv-provider-count { flex: none; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
/* end PROVISION REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   ENERGYDOWNLOADS REDESIGN — group tariff counts (reference reconciliation)
   Reference shows each Sparte group's header with a tariff count ("Gas 12
   Tarife") appended via app/energydownloads.js's new
   annotateProviderAndGroupCounts(), computed once from the full row set
   right after initial render (not inside the existing filter-driven
   recompute(), which would make the count shrink as the user filters
   instead of staying a fixed total like the reference). Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.energydownloads-redesign .dl-group-count { margin-left: 4px; font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--fg-muted); }
/* end ENERGYDOWNLOADS REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   RESELLERDATA REDESIGN — mobile fix for "Stammdaten übernehmen"
   (reported broken: on mobile the button visually crowded the Anrede
   row instead of sitting with the "Kontoinhaber" heading).

   The button (Partials/Form/Bank.html) is DOM-nested inside the Anrede
   field's own .input-group -- desktop pins it to the Kontoinhaber
   corner via position:absolute on the earlier "pass #3" fence (line
   ~7737), anchored to .rd-col (position:relative). That fence's own
   @media(max-width:767px) block resets it to position:static for
   mobile instead of just adjusting the anchor math -- per its own
   comment, that was deliberate, done when an earlier CSS-multicol-to-
   grid conversion made the absolute button land wrong at the time, but
   applied to every viewport rather than just the case that broke. The
   result: at mobile the button falls back to its true, un-overridden
   DOM position, inline with Anrede.

   Root cause of why absolute never got tried again at mobile: the
   desktop rule's `right: calc(50% + 12px)` is calculated for the
   2-column desktop grid's proportions -- at the single-column mobile
   stack that math points somewhere that doesn't work, which is likely
   why static was chosen as a blanket fallback instead of just fixing
   the anchor value for the narrower layout.

   Fix: stay absolute at mobile too, but anchor to the column's own
   right edge (right:0) instead of the desktop-proportional 50% split --
   confirmed live (getBoundingClientRect before/after + screenshot) this
   lands the button directly below "Kontoinhaber", matching the desktop
   corner placement's intent, with no overlap on Anrede or the heading
   text. Scoped identically to the fence being overridden
   (.resellerdata-redesign #bank), so this doesn't touch the separate,
   independently-styled copies of this same shared-partial button on
   customer/registerreseller/reselleraccount/neworder.

   First attempt used the plain `#bank [data-target$=":applybasedata"]`
   selector (matching the fence being overridden) and it silently didn't
   take effect for `right` specifically -- caught via computed-style
   inspection (still 171px = calc(50%+12px), not the intended 0), traced
   to an unrelated, unconditional, higher-specificity selector elsewher
   in this file (`#bank .rd-col [data-target$=":applybasedata"] { right:
   calc(50% + 12px); }`, an extra `.rd-col` class in the chain) that
   locks `right` at every viewport regardless of source order. `position`/
   `top`/`margin` aren't set by that rule, so those three properties from
   the first attempt WERE taking effect -- only `right` silently lost.
   Matching that same `.rd-col`-qualified selector here (not !important)
   is the correct fix: equal specificity, later in source order, wins
   cleanly without an unnecessary !important escalation. */
@media (max-width: 767px) {
	.resellerdata-redesign #bank .rd-col [data-target$=":applybasedata"] {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
	}
}
/* end RESELLERDATA REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — Pflichtfeld validation message position (Vertragspartner
   /Kontaktdaten/zweiter Vertragspartner/Bankverbindung/Liefertermin grids).

   Same class of bug already fixed for ratecalc/registerreseller/resellerdata/
   neworder's energy flow (see that changelog entry) and for this screen's own
   `sigdate` field (`.no-grid > .form-group:has(> input[name="sigdate"]) >
   .help-block { order: 4; … }` above) — but never applied to the newer
   ::before/::after pseudo-label + order:1/2/3 technique introduced for
   .no-vp-grid/.no-vp-contact-grid/.no-vp2-grid/.no-bank-grid/.no-delivery-grid
   in the "1:1 reference re-audit" pass. formValidation's own injected
   `<small class="help-block">` is a plain DOM child of the same flex
   `.form-group` with no `order` of its own, so it defaulted to `order: 0` —
   sorting BEFORE the order:1 label and order:3 field, i.e. the "Dieses Feld
   darf nicht leer sein" text rendered above the label instead of below the
   field. Found live (headless DOM + screenshot inspection) on the
   Bankverbindung "abweichender Kontoinhaber" Vorname/Nachname fields while
   reconciling this screen against the reference mockup again; swept every
   grid using the same pattern rather than patching only the field that
   happened to be visible. `order: 4` intentionally reuses the sigdate
   precedent's value — each `.form-group` is its own flex container, so the
   number only needs to beat that field's own label(1)/star(2)/input(3), not
   coordinate with any other field. No-op wherever `.form-group` isn't one of
   these flex-ified fields (order/flex-basis on a non-flex child do nothing),
   so this is safe to apply broadly instead of repeating every :has() selector
   above. Tokens only; no markup change. */
.neworder-redesign .no-vp-grid > .form-group > .help-block,
.neworder-redesign .no-vp-grid .row.input-row > [class*="col-"] > .form-group > .help-block,
.neworder-redesign .no-vp-contact-grid > .form-group > .help-block,
.neworder-redesign .no-vp2-grid > .form-group > .help-block,
.neworder-redesign .no-vp2-grid .row.input-row > [class*="col-"] > .form-group > .help-block,
.neworder-redesign .no-bank-grid > .form-group > .help-block,
.neworder-redesign .no-bank-grid .row.input-row > [class*="col-"] > .form-group > .help-block,
.neworder-redesign .no-delivery-grid > .form-group > .help-block {
	order: 4; flex-basis: 100%; margin: 4px 0 0;
}
/* end NEWORDER REDESIGN */

/* ═══════════════════════════════════════════════════════════════════════
   NEWORDER REDESIGN — layout alignment pass (Bankverbindung + Lieferart)
   Bankverbindung rows used mixed spans (3+9, 3+5+gap, 7, 6) so right edges
   never lined up. Now every row sums to 12: Anrede 3 + Name 9, Land 4 +
   PLZ/Ort 8, Strasse/Nr 8 + Stiege/Hautuer 4. The Neueinzug/Lieferanten-
   wechsel radios are bare grid children (order 50, auto span) and landed
   in different columns and rows; they now share one row at span 6 each.
   ═══════════════════════════════════════════════════════════════════════ */
.neworder-redesign .no-bank-grid > .form-group.select:has(select[name$="bank_country_id"]) { grid-column: span 4; }
.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_zip"]) { grid-column: span 8; }
.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_street"]) { grid-column: span 8; }
.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_stairs"]) { grid-column: span 4; }
.neworder-redesign .no-delivery-grid > .radio { grid-column: span 6; order: 0; margin: 0; align-self: center; }
.neworder-redesign .no-delivery-grid > .radio[style] { margin: 0 !important; }
@media (max-width: 639px) {
	.neworder-redesign .no-bank-grid > .form-group.select:has(select[name$="bank_country_id"]),
	.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_zip"]),
	.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_street"]),
	.neworder-redesign .no-bank-grid > .row.input-row:has([name$="bank_stairs"]),
	.neworder-redesign .no-delivery-grid > .radio { grid-column: 1 / -1 !important; }
}
/* end NEWORDER REDESIGN */

/* Versandweg & Vorlage – Styles für den extraFormWrapper im Tarifrechner-Vergleich-Modal */

#extraFormWrapper {
    background: #f8fcfc;
    border: 1px solid #cfe2e5;
    border-radius: 6px;
    padding: 15px;
    position: relative;
	margin-top: 20px;
}

#extraFormWrapper:before {
	content: "NEU";
    position: absolute;
    top: -10px;
    left: 14px;
    background: #1b5e20;
    color: #fff;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
}

#extraFormWrapper .tpl-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

#extraFormWrapper label {
	font-size: 12px;
	color: rgba(0,0,0,0.5);
	font-weight: normal;
}

#extraFormWrapper .nav-pills::after, #extraFormWrapper .nav-pills::before {
	display: none;
}

#extraFormWrapper .nav-pills {
	float: none !important;
	display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 16px;
    background: #eef4f5;
    border: 1px solid #cfe2e5;
    border-radius: 999px;
    padding: 4px;
    width: fit-content;
}

#extraFormWrapper .nav-pills > li.active {
	background: #1b9aaa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	border-radius: 999px;
}

#extraFormWrapper .nav-pills > li.active > a {
	display: block;
	color: #fff !important;
}
#extraFormWrapper .nav-pills > li.active > a:hover, 
#extraFormWrapper .nav-pills > li.active > a:focus, 
#extraFormWrapper .nav-pills > li.active > a:active {
	color: #226773 !important;
	background-color: #1b9aaa !important;
}

#extraFormWrapper .nav-pills > li > a {
	border: 0;
	background: transparent;
	color: #226773 !important;
	font-size: 13px;
	padding: 7px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	border-radius: 999px;
}

#extraFormWrapper .att {
	display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: #eef4f5;
    border: 1px solid #cfe2e5;
    border-radius: 999px;
    font-size: 12px;
    color: #226773;
    margin: 3px 4px 0 0;
}

#extraFormWrapper .field {
	margin-bottom: 15px;
}

#extraFormWrapper .hint {
	color: #6b7378;
    font-size: 12px;
    margin-top: 4px;
}

#extraFormWrapper label.check {
	display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    color: #4a5257;
    cursor: pointer;
	font-size: 14px;
}

#extraFormWrapper .form-check {
	margin: 0;
}

#extraFormWrapper .preview {
	background: #fff;
    border: 1px solid #d9dde0;
    border-radius: 4px;
    padding: 12px 14px;
}

#extraFormWrapper .plabel {
	font-size: 11px;
    color: #6b7378;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}

#extraFormWrapper .preview .body {
	white-space: pre-wrap;
    font-size: 13px;
    color: #3a4148;
    border-top: 1px dashed #d9dde0;
    padding-top: 8px;
    min-height: 150px;
}

#extraFormWrapper .subject {
	font-weight: 600;
    color: #2c3338;
    margin-bottom: 10px;
    font-size: 14px;
}

#extraFormWrapper #prevSubject.is-editable,
#extraFormWrapper #prevBody.is-editable {
    border-radius: 3px;
    background: #f5fdfe;
    cursor: text;
	outline: rgb(27, 154, 170) dashed 2px !important;
}

#extraFormWrapper #prevSubject[contenteditable="false"],
#extraFormWrapper #prevBody[contenteditable="false"] {
    cursor: default;
    user-select: none;
	outline: none;
	padding: 0;
}

#extraFormWrapper .addr-preview {
	background: #fff;
	border: 1px dashed #b9c0c5;
    padding: 10px 14px;
    font-size: 13px;
    color: #3a4148;
    white-space: pre-line;
    margin-top: 4px;
    font-family: ui-monospace, Consolas, monospace;
}

#extraFormWrapper .bs-callout.bs-callout-warning {
	font-size: 12px;
}

#extraFormWrapper .sms-preview {
	background: #e8f0fe;
    border: 1px solid #9db9f0;
    border-radius: 14px;
    padding: 10px 14px;
    color: #1a3a7a;
    font-size: 13px;
    white-space: pre-wrap;
    max-width: 320px;
    margin-top: 4px;
}

#extraFormWrapper .char-count {
	font-size: 11px;
    color: #6b7378;
    margin-top: 4px;
}

/* ---- SMARD Börsenpreis-Diagramm ---- */
.egon-smard-chart {
    margin: 4px 2px 2px 4px;
}
a.egon-smard-toggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2px 0 4px;
    margin: 0;
    border-bottom: 1px solid #e7e5e4;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
}
a.egon-smard-toggle .glyphicon {
    font-size: 14px;
    color: #9ca3af;
}
a.egon-smard-toggle:hover,
a.egon-smard-toggle:focus {
    color: var(--egon-smard-active-color, #337ab7);
    text-decoration: none;
    outline: none;
}
a.egon-smard-toggle:hover .glyphicon,
a.egon-smard-toggle:focus .glyphicon {
    color: inherit;
}
.egon-smard-body {
    padding-top: 4px;
}
.egon-smard-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    border-bottom: 1px solid #e7e5e4;
    margin-bottom: 6px;
	margin-top: 2px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.egon-smard-tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.egon-smard-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 5px 10px 7px;
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
    margin-bottom: -1px;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
    -webkit-transition: color 0.15s;
    transition: color 0.15s;
    text-decoration: none;
    display: inline-block;
}
.egon-smard-tab:hover,
.egon-smard-tab:focus {
    color: #374151;
    background: none;
    text-decoration: none;
    outline: none;
}
.egon-smard-tab.active {
    color: var(--egon-smard-active-color, #337ab7);
    border-bottom-color: var(--egon-smard-active-color, #337ab7);
    font-weight: 500;
}
.egon-smard-status {
    font-size: 12px;
    min-height: 14px;
    color: #9ca3af;
    padding: 2px 0;
}
/* ---- Ende SMARD ---- */

/* MERGE FOLLOW-UP REDESIGN */
.ratecalc-redesign .rc-recommend-head {
	margin: 16px 0 12px; padding: 12px 16px;
	border: 1px solid var(--tag-blue-fg); border-left-width: 4px; border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--tag-blue-bg) 55%, var(--bg-base));
}
.ratecalc-redesign .rc-recommend-head h4 { margin: 0 0 4px; font: var(--fw-medium) 15px/22px var(--font-sans); color: var(--tag-blue-fg); }
.ratecalc-redesign .rc-recommend-head p { margin: 0; font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); }
.order-redesign .or-table tbody tr.or-row.info { --bs-table-accent-bg: var(--tag-blue-bg); }
/* end MERGE FOLLOW-UP REDESIGN */