/* HM Leistungsuebersichten 1.2.42 - optional age table details. */
/* HM Leistungsuebersichten 1.2.45: Saved-Offer typography parity.
 * The normal calculator receives --hm-tef-font from its .hm-tef wrapper.
 * The virtual /mein-angebot/ page renders .hm-of-return-page without that
 * wrapper; an undefined var() invalidated compact font shorthands, causing
 * oversized age table values, summary labels and notices. Define the same
 * active Elementor body family only for the Saved-Offer root. This preserves
 * every existing font size, table, contribution value and mobile rule. */
.hm-of.hm-of-return-page{
  --hm-tef-font:var(--hm-site-body-font-family,var(--e-global-typography-text-font-family,"Bricolage Grotesque")),"Bricolage Grotesque",Arial,sans-serif;
}

/* HM 1.2.42: Altersanpassung als dezente Nebeninformation.
   White-card-Tabelle statt Excel-Look. Geschlossene Cards erhalten dieselbe Grundhöhe. */
/* HM 1.2.44: all three KV cards stretch to the tallest closed variant.
   Aligns the three checkout buttons even if only two cards include a Zahn
   accordion. Keep native responsive stacking and open <details> behavior. */
.hm-of .hm-of-card-grid--kv{align-items:stretch!important}
.hm-of .hm-of-card-grid--kv > .hm-of-card{height:auto!important;align-self:stretch!important}
.hm-of .hm-of-card-grid--kv .hm-of-card-variants{
  flex:1 1 auto!important;
  padding-bottom:.85rem!important;
}
.hm-of .hm-of-card-grid--kv .hm-of-card-variants + .hm-of-checkout{
  margin-top:auto!important;
}

.hm-of .hm-of-card-grid--kv .hm-of-zahn-note{display:none!important}
.hm-of .hm-tef__age-inline{
  display:block!important;
  margin:.42rem 0 .56rem!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
.hm-of .hm-tef__age-summary{
  display:inline-flex!important;
  width:auto!important;
  align-items:center!important;
  gap:.4rem!important;
  padding:.25rem 0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#006f61!important;
  font:600 .81rem/1.35 var(--hm-tef-font)!important;
  text-align:left!important;
  cursor:pointer!important;
  list-style:none!important;
}
.hm-of .hm-tef__age-summary::-webkit-details-marker{display:none!important}
.hm-of .hm-tef__age-summary::marker{content:""}
.hm-of .hm-tef__age-summary:hover .hm-tef__age-summary-text{text-decoration:underline;text-underline-offset:3px}
.hm-of .hm-tef__age-summary:focus-visible{outline:2px solid #00a075!important;outline-offset:3px!important}
.hm-of .hm-tef__age-info{
  width:1.08rem!important;
  height:1.08rem!important;
  border:1px solid currentColor!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font:700 .68rem/1 var(--hm-tef-font)!important;
  flex:0 0 auto;
}
.hm-of .hm-tef__age-chevron{
  display:inline-block;
  flex:0 0 auto;
  width:.42rem;
  height:.42rem;
  margin:-.22rem 0 0 .24rem;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .16s ease;
}
.hm-of .hm-tef__age-inline[open] .hm-tef__age-chevron{transform:translateY(.22rem) rotate(225deg)}
.hm-of .hm-tef__age-panel{
  margin:.45rem 0 .25rem!important;
  padding:.7rem 0 .2rem!important;
  border:0!important;
  border-top:1px solid #e6eeea!important;
  border-radius:0!important;
  background:transparent!important;
  max-height:min(325px,55vh)!important;
  overflow:auto!important;
  scrollbar-width:thin;
}
.hm-of .hm-tef__age-variant-label{
  margin:0 0 .5rem!important;
  color:#005e52!important;
  font:700 .8rem/1.35 var(--hm-tef-font)!important;
}
.hm-of .hm-tef__age-table-wrap{width:100%;overflow-x:auto}
.hm-of .hm-tef__age-table{
  table-layout:fixed;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font:.79rem/1.4 var(--hm-tef-font)!important;
  color:#263d35!important;
  background:#fff!important;
  border:1px solid #e3ebe7!important;
  border-radius:.8rem!important;
  overflow:hidden;
}
.hm-of .hm-tef__age-table th,
.hm-of .hm-tef__age-table td{
  padding:.56rem .42rem!important;
  text-align:right!important;
  vertical-align:middle!important;
  border:0!important;
  border-bottom:1px solid #edf2ef!important;
  background:#fff!important;
  color:#263d35!important;
  font:inherit!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-variant-numeric:tabular-nums;
}
.hm-of .hm-tef__age-table tr:last-child th,
.hm-of .hm-tef__age-table tr:last-child td{border-bottom:0!important}
.hm-of .hm-tef__age-table th:first-child{
  width:40%;
  text-align:left!important;
}
.hm-of .hm-tef__age-table thead th{
  color:#5b6b63!important;
  background:#fff!important;
  font-weight:700!important;
  font-size:.75rem!important;
}
.hm-of .hm-tef__age-table tbody th{
  font-weight:500!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
.hm-of .hm-tef__age-table tbody td{
  font-weight:600!important;
  white-space:nowrap!important;
}
.hm-of .hm-tef__age-table .hm-tef__age-sb-recommended{background:#fff!important}
.hm-of .hm-tef__age-table .hm-tef__age-current > *{
  background:#fff!important;
  font-weight:700!important;
}
.hm-of .hm-tef__age-note{
  color:#586960!important;
  font:.76rem/1.48 var(--hm-tef-font)!important;
  margin:.72rem 0 0!important;
}
@media(max-width:540px){
  .hm-of .hm-tef__age-summary{font-size:.78rem!important}
  .hm-of .hm-tef__age-panel{max-height:min(300px,52vh)!important;padding:.6rem 0 .15rem!important}
  .hm-of .hm-tef__age-table{font-size:.7rem!important;line-height:1.3!important}
  .hm-of .hm-tef__age-table thead th{font-size:.68rem!important}
  .hm-of .hm-tef__age-table th,.hm-of .hm-tef__age-table td{padding:.46rem .2rem!important}
  .hm-of .hm-tef__age-table th:first-child{width:39%}
  .hm-of .hm-tef__age-note{font-size:.73rem!important}
}

.hm-of .hm-tef__age-entry-note{
    margin:.72rem 0 0!important;
    font:.76rem/1.48 var(--hm-tef-font)!important;
    color:#586960!important;
}
.hm-of .hm-tef__age-entry-note + .hm-tef__age-note{margin-top:.42rem!important}

/* 1.2.42: Alters-Hinweise bleiben unter der Tabelle immer sichtbar.
   Nur die Tabelle selbst kann bei sehr vielen Zeilen intern scrollen. */
.hm-of .hm-tef__age-panel{
    max-height:none!important;
    overflow:visible!important;
}
.hm-of .hm-tef__age-table-wrap{
    max-height:210px!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
    scrollbar-width:thin;
}
@media(max-width:540px){
    .hm-of .hm-tef__age-table-wrap{max-height:180px!important}
}