:root {
--hm-petrol: #005e52;     
--hm-gruen: #00a075;       
--hm-danger: #c00000;
 --hm-danger-bg: #f7cece;
--hm-border: #e3e1e1;
--hm-mint: #edf6f2;
}
[hidden] { display: none !important; }

.overline {
font-size: 1.3rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hm-petrol);
margin: 0 0 8px;
}

.section-head { text-align: center; margin: 0 0 30px; }
.section-head__sub {
font-size: 1.8rem;
max-width: 720px;
margin: 0 auto;
text-wrap: balance;
}

.rechner-section {
  padding: 60px 0;
  scroll-margin-top: 150px;
}

.rechner-card {
position: relative;
background: #fff;
border-radius: 8px;
padding: 40px;
}

.rechner-card > section + section {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e3e1e1;
}

.rechner-card .inputs-row { margin-bottom: 0; }

.formfield__suffix { font-size: 1.6rem; white-space: nowrap; }

.info-btn {
border: none;
background: none;
cursor: pointer;
color: var(--hm-petrol);
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
transition: background .3s ease;
}
.info-btn:focus-visible { outline: 3px solid var(--hm-petrol); outline-offset: 1px; box-shadow: none; border-radius: 50%; }
.popover {
position: absolute;
z-index: 50;
top: calc(100% + 8px);
right: 0;
width: 300px;
max-width: 90vw;
background: #fff;
border-radius: 4px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
padding: 15px;
font-size: 1.5rem;
line-height: 1.45;
}

.fehler-box {
background: var(--hm-danger);
border: 2px solid var(--hm-danger);
border-radius: 4px;
color: #fff;
padding: 15px;
margin-bottom: 30px;
font-size: 15px;
line-height: 1.2;
}
.fehler-box strong { font-weight: 400; }
.fehler-box ul { margin-top: 6px; padding-left: 20px; }
.fehler-box li { margin-top: 4px; }

.vergleich-heading { text-align: center; font-size: 3.3rem; }
.cards-row {
display: flex;
gap: 30px;
align-items: stretch;
margin-bottom: 60px; padding: 0 15px;
}
.card-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-flag-slot { height: 40px; flex-shrink: 0; display: flex; align-items: flex-end; }
/* Grünes Empfehlungs-Badge mit Häkchen-Icon */
.card-flag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
background: var(--hm-gruen);
color: #fff;
font-size: 1.4rem;
border-radius: 4px 4px 0 0;
}
.card-flag__icon { width: 14px; height: 14px; flex-shrink: 0; }
.result-card {
display: flex;
flex-direction: column;
flex: 1;
border-radius: 4px;
padding: 0 20px 20px;
background: #fff;
transition: border-color .3s ease;
border: 1px solid var(--hm-border);
}

.result-card--has-flag {
border: 2px solid var(--hm-gruen);
border-top-left-radius: 0;
}

.card-title {
background: var(--hm-mint);
margin: 0 -20px;
padding: 15px 20px 5px;
border-radius: 4px 4px 0 0;
}

.result-card--has-flag {
 border: 2px solid var(--hm-gruen);
 border-top-left-radius: 0;
}

.result-card--has-flag .card-title { border-top-left-radius: 0; }
.card-foerderquote {
margin: 0 -20px;
padding: 0 20px 15px;
background: var(--hm-mint);
display: flex;
flex-wrap: wrap;
gap: 7.5px;
}

.badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: #fff;
border-radius: 999px;
font-size: 1.4rem;
color: var(--hm-petrol);
}

.badge strong { font-weight: 400; color: var(--hm-petrol); }
.donut-wrapper { display: flex; justify-content: center; padding: 30px 15px 15px; position: relative; }
.donut-box { position: relative; width: 220px; height: 220px; }
.donut-box svg { width: 100%; height: 100%; }
.donut-seg { transition: stroke-width .15s ease; cursor: pointer; }
.donut-seg--hovered { filter: brightness(1.06); }
.donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
padding: 0 40px;
}
.donut-center__value {  font-size: 2.6rem; color: var(--hm-gruen); font-weight: bold }
.donut-center__label { font-size: 1.4rem; }
.result-rows { padding-top: 15px; display: flex; flex-direction: column; gap: 6px; }
.result-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; color: var(--hm-petrol); }
.result-row--total { border-bottom: 1px solid var(--hm-gruen); padding-bottom: 10px; margin-bottom: 6px; }
/* Summenzeile Nettoaufwand: 2px-Grün-Trennlinie, größer, Petrol */
.result-row--highlight { border-top: 2px solid var(--hm-gruen); padding-top: 10px; margin-top: 6px; }
.result-row--sub { padding: 1px 0 1px 22px; font-size: 1.5rem;  }
.result-row--hovered .result-label,
.result-label { flex: 1; padding-right: 15px; display: flex; align-items: center; }
.result-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-label--strong { font-size: 1.9rem; font-weight: bold; }
.result-value--strong { color: var(--hm-petrol); font-size: 2.4rem; font-weight: bold; }
.legend-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
margin-right: 8px;
}
.legend-dot--netto { background: var(--hm-petrol); }
.legend-dot--zulage { background: var(--hm-gruen); }
.legend-dot--steuer { background: #5a9e4b; }

.depot-hinweis {
margin-top: 15px;
padding: 10px 15px;
border-radius: 4px;
font-size: 1.5rem;
}

.fazit { max-width: 860px; margin: 0 auto 60px; }
.fazit ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 14px; }
.fazit li { position: relative; padding-left: 36px; }
.fazit li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 22px;
height: 22px;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%2300a075'/%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fazit li:last-child::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23005e52'/%3E%3Crect x='10' y='9.5' width='2' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='11' cy='6.3' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
}
.fazit strong { font-weight: 400; color: var(--hm-petrol); }
.fazit .info-btn { vertical-align: middle; }
.fazit-hinweis { position: relative; display: inline; }
 
@media (max-width: 767.98px) {
.card-col--depot { order: -1; }
.card-flag-slot:empty, .card-flag-slot--empty { display: none; }
.rechner-section { padding: 30px 0; margin-bottom: 30px; scroll-margin-top: 110px; }
.rechner-card { padding: 20px 15px; }

.section-head { margin: 0 0 20px; }
}
.form-group {
 &:has(input#bruttoeinkommen),
 &:has(input#sparbeitrag),
 &:has(input#partnerEinkuenfte),
 &:has(input#partnerBeitrag) {
   display: flex;
   align-items: center;
   border: 1px solid #00a075;
   border-radius: 4px;
   background-color: #edf6f2;
   input {
     border: none !important;
     background-color: transparent;
   }
   &:has(input.-has-value) {
     background-color: #fff;
   }
   &:has(input.-disabled) {
       background-color: #ececed;
       color: #58585a;
       pointer-events: none;
       input {
         background-color: transparent;
         color: #58585a;
       }
   }
 &:has(input#bruttoeinkommen),
 &:has(input#partnerEinkuenfte),
 &:has(input#partnerBeitrag) {
   padding-right: 15px;
 }
 &:has(input#sparbeitrag) {
   padding-right: 45px;
 }
   
   &:has(input#partnerBeitrag):has(.hm-tooltip:not([hidden])) {
     padding-right: 45px;
   }
}
}

.container-fluid:has(.rechner-section) { padding-bottom: 0; margin-bottom: 60px; }
 
.form-group:has(input#sparbeitrag) .formfield__suffix,
.form-group:has(input#partnerBeitrag) .formfield__suffix {
 position: relative;
}
.form-group:has(input#sparbeitrag) .formfield__suffix::after {
content: "";
position: absolute;
right: -7px;
top: -6px;
height: 35px;
z-index: 1;
border-right: 1px solid #005e52;
}
.form-group:has(input#partnerBeitrag):has(.hm-tooltip:not([hidden])) .formfield__suffix::after {
content: "";
position: absolute;
right: -7px;
top: -6px;
height: 35px;
z-index: 1;
border-right: 1px solid #005e52;
}
@media (max-width: 767.98px) {
.cards-row { flex-direction: column; padding: 0; }
.container:has(.rechner-card) { padding: 0; }
}
 
.scrolltop-button {
display: none !important;
}