.tarifrechner-wrapper{margin:2em 0 1em;}
.hiddenwrapper, .hiddenpkv{display:none;}

#bruttostand{text-align: right; color: var(--primcolor); font-weight: 600;}

.tarifrechner-wrapper .form-group{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 1em 0; position:relative;}
.tarifrechner-wrapper .form-group label{width:100%; margin-right: 5%; margin-bottom:0.5em;}
.tarifrechner-wrapper .form-group select, .tarifrechner-wrapper .form-group input{width:100%; padding: 0.5em 0.5em; border: 1px solid var(--bordercolor); border-radius: 5px;}
.tarifrechner-wrapper .input-einheit{background: var(--bordercolor); padding: 0.25em 0.5em; margin: 0 0 0 -1.9em; width: 30px;}

.hours-selection{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; padding-top: 0.5em; width:100%;}
.hours-selection button{width:49%; border-radius:0.5rem; background:#1d4ed8; color:#ffffff; padding: 0.75em 1.5em; margin:0 0 0.5em; border:none; font-size: 0.9em; cursor: pointer;}
.hours-selection button:hover, .hours-selection button.active{background: #1e3a8a;}
.hours-selection input{width:49%!important; text-align: center; margin: 0 0 0.45em; border-radius:0.5rem!important;}

.has-tooltip {position: relative;cursor: help; background: url(../../../../templates/tarifrechner-2025/img/info-circle.svg) 100% 0.1em/1.1em no-repeat;}
.has-tooltip .tooltip {position: absolute;left: 0;top: 2em;z-index: 10;margin-top: 0;padding: .75em 1em;max-width: 350px;background: #1e3a8a;color: #ffffff;font-size: .85rem;
  line-height: 1.3;border-radius: .3rem;opacity: 0;visibility: hidden;transform: translateY(-4px);transition: opacity .15s ease, transform .15s ease; border-radius:0.5rem;}
.has-tooltip:hover .tooltip,.has-tooltip:focus-within .tooltip {opacity: 1; visibility: visible; transform: translateY(0);}

.tarifrechner-wrapper button.blue-btn{border-radius: 20px; border: none; padding: 0.75em 1.5em; font-size: 1em; margin-top: 1em; cursor: pointer;}
.tarifrechner-wrapper button#edit-salary{border-radius: 20px; border: none; padding: 0.75em 1.5em; font-size: 1em; cursor: pointer; background:#e5e7eb; color:#111827;}
.tarifrechner-wrapper button#edit-salary:hover{background:#1d4ed8; color:#ffffff;}

.salary-wrapper{position:relative;}
.salary-wrapper h3{font-size: 1.35em; font-weight: 700;}
.salary-check{line-height: 1.8em;}
.salary-table{font-size: 0.85em;}
table.salary-table th, table.salary-table td{background:#ffffff!important; border-bottom:none!important;}
table.salary-table th{text-align:right;}
table.salary-table td:nth-of-type(2), table.salary-table td:nth-of-type(3){text-align:right;}
table.salary-table tr.brutto td{background:#eff6ff!important; font-weight:700;}
table.salary-table tr.gesamtbrutto td{padding-bottom: 1.5em;}
table.salary-table tr.abz.section td{font-weight:700; padding-top:1.5em;}
table.salary-table tr.abz td{background:#f9fafb!important; }
table.salary-table tr.abz td:nth-of-type(2), table.salary-table tr.abz td:nth-of-type(3){font-weight:700;}
table.salary-table tr.abz td small, table.salary-table tr.sum td small, table.salary-table tr.netto td small{font-weight:400; font-size:0.9em;}
table.salary-table tr.abz td.has-tooltip {background: url(../../../../templates/tarifrechner-2025/img/info-circle.svg) 95% 1.5em/1.1em no-repeat #f9fafb!important;}
table.salary-table tr.abz td.has-tooltip .tooltip{left: 25%;}
table.salary-table tr.sum td{border-top: 1px solid var(--bordercolor); background:#f9fafb!important; font-weight:700;}
table.salary-table tr.sum td:nth-of-type(2), table.salary-table tr.sum td:nth-of-type(3){color:#dc2626;}
table.salary-table tr.netto td{background:#d9f8df!important; font-weight:700;}

.pkv-hint {margin: 1rem 0;padding: 0.75rem;background: #f9fafb;border-left: 4px solid #e5e7eb;font-size: 0.9rem;}

/*====== M E D I A Q U E R Y S ===========================================*/
@media only screen and (min-width:768px) {
  #percentage-display{position:absolute; top:0; right:0;}
  .has-tooltip {background-position:75% 0.1em;}
}
@media only screen and (min-width:1024px) {
  .tarifrechner-wrapper button#edit-salary{position:absolute; right:0; top:0;}
  .salary-table{font-size: 1em;}
}
@media only screen and (min-width:1280px) {
  .tarifrechner-wrapper .form-group label{width:30%; margin-bottom:0;}
  .tarifrechner-wrapper .form-group select, .tarifrechner-wrapper .form-group input{width:65%;}
  .hours-selection{padding-top: 2em; width:65%;}
  .has-tooltip {background-position:95% 0.1em;}
}