/* ============================================================================
   assets/css/cost-calculator.css - the cost calculator /kostenrechner, /cost-calculator
   (2026-11-02, from the owner-approved prototype, round 24; DECISIONS.md #preise). Loaded only by
   cost-calculator.php ($pageCss), after site.min.css, so it builds on the site's own parts:
   buttons = cta.css B1 (.fill-btn, .outline-btn.on-light), the text button = .back-link, the icon
   tiles = the values of system P1 "Ruhige Tiefe" (style.css, .icon-tile).

   Colours: C:\Users\accou\Claude\vitec\branding\tokens\tokens.json is the master (mirror in
   tests/support/brand-tokens.json). Never add a hex here that is not a token; shades are a token
   with alpha (the rgba values below are #14213d, #003996, #e55a37 and white).

   Layout: a container query on .kr, so the calculator answers to its own width:
     wide              desktop: Marc's panel | question card, the trust strip in two rows
     max-width 999px   the trust strip in one row
     max-width 760px   phone: price in the head row, the panel opens as a sheet from the list button
   ========================================================================== */
.kr-page {
  --kr-above: 134px;
  --kr-ink: #14213d;
  --kr-sub: #4d5461;
  --kr-dark: #070d13;
  --kr-soft: #aeb3bf;
  --kr-coral: #e55a37;
  --kr-coral-ink: #c2411f;
  --kr-navy: #003996;
  --kr-line: rgba(20, 33, 61, .12);
  --kr-line-soft: rgba(20, 33, 61, .08);
  --kr-glass: rgba(255, 255, 255, .045);
  --kr-glass-line: rgba(255, 255, 255, .12);
  --kr-panel: #070d13;
  /* an own tool without the site header (owner 2026-11-03): nothing to clear above the intro */
  --vitec-header-h: 0px;
  background: var(--kr-dark);
  color: #ffffff;
  padding: calc(var(--vitec-header-h, 82px) + 22px) 0 10px;
  /* the tool fills the window: on a tall screen the page's light ground showed as a strip under it (owner
     2026-11-04, 18 px at 1896x930) */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ... and the ground around it is dark too, so Safari's rubber-band scroll never flashes the light page */
html:has(.kr-page),
html:has(.kr-page) body {
  background: #070d13;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .kr-page {
    --kr-panel: color-mix(in srgb, #ffffff 4.5%, #070d13);
  }
}

.kr-wrap {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}

/* the back link left of the heading and its line, centred on both together (owner 2026-11-03) */
.kr-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.kr-intro-tx {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.kr-intro h1 {
  font-size: clamp(30px, 3.2vw + .6rem, 46px);
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
  text-transform: none;
}

.kr-intro p {
  font-size: 17px;
  font-weight: 500;
  color: var(--kr-soft);
}

.kr-noscript {
  margin-top: 12px !important;
  color: #ffffff;
}

.kr-noscript a {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------------------------------------------------------------- the app view
   --kr-above = everything between the header pill and the app (padding, the intro, the gap below it) plus the room under
   the app, so on a laptop the whole app, "Weiter" included, fits into the window (1440x710 = Safari on a MacBook). */
.kr {
  container: kr / inline-size;
  width: 100%;
  color: var(--kr-ink);
}

.kr-app {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  /* the window less everything above it and the strip under it - like the quote chat, the app ends 10 px above the
     window's edge (owner 2026-11-04: "genau die gleiche Höhe"); cost-calculator.js measures --kr-above exactly */
  height: 640px;
  height: max(520px, calc(100vh - var(--vitec-header-h, 82px) - var(--kr-above)));
  height: max(520px, calc(100dvh - var(--vitec-header-h, 82px) - var(--kr-above)));
}

.kr-top {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
}

.kr-circ {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.kr-circ:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .3);
  color: #ffffff;
}

.kr-circ svg {
  width: 18px;
  height: 18px;
}

.kr-circ:focus-visible,
.kr-page a:focus-visible,
.kr-page button:focus-visible {
  outline: 2px solid #e55a37;
  outline-offset: 2px;
}

.kr-list {
  display: none;
}

.kr-prog {
  flex: 1;
  height: 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.kr-prog i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e2694b, #64aaff);
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
}

.kr-min {
  color: var(--kr-soft);
  font-weight: 500;
}

.kr-pill {
  display: none;
}

.kr-main {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.kr svg.i {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* left box: Marc, the three facts (sticky), the answers with their share */
.kr-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--kr-glass-line);
  border-radius: 16px;
  background: var(--kr-panel);
  color: #ffffff;
  scrollbar-width: none;
}

.kr-panel::-webkit-scrollbar,
.kr-body::-webkit-scrollbar,
.kr-refs::-webkit-scrollbar {
  display: none;
}

.kr-body.more,
.kr-panel.more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}

.kr-who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kr-glass-line);
}

.kr-ava {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.kr-who strong {
  display: block;
  font-size: 14.5px;
}

.kr-who span {
  font-size: 12.5px;
  color: var(--kr-soft);
}

.kr-phead {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: -18px -18px 0;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--kr-glass-line);
  background: var(--kr-panel);
}

.kr-panel h3 {
  margin-top: 6px !important;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.kr-facts {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.kr-fact {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 0 10px;
  font-size: 15px;
  color: var(--kr-soft);
}

@supports not (grid-template-columns: subgrid) {
  .kr-fact {
    grid-template-columns: auto 5.2em minmax(0, 1fr);
  }
}

.kr-fl {
  white-space: nowrap;
}

.kr-fact strong {
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
}

.kr-ast {
  margin-left: 2px;
  font-size: .6em;
  line-height: 0;
  vertical-align: super;
}

.kr-sel {
  display: grid;
  gap: 2px;
}

.kr-sel button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--kr-glass-line);
  background: transparent;
  color: #ffffff;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.kr-sel button > span:first-child {
  min-width: 0;
  color: var(--kr-soft);
}

.kr-sel em {
  display: block;
  margin-top: 2px;
  color: #ffffff;
  font-style: normal;
  font-weight: 600;
}

.kr-pt {
  color: #e2694b;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  transition: color .15s ease;
}

.kr-sel button:hover .kr-pt {
  color: #ffbf9d;
}

.kr-sel button[aria-disabled="true"] {
  cursor: default;
}

.kr-sel button[aria-disabled="true"]:hover .kr-pt {
  color: #e2694b;
}

.kr-sel button.fresh {
  animation: kr-row 1.4s ease both;
}

@keyframes kr-row {
  from {
    background: rgba(229, 90, 55, .22);
  }

  to {
    background: transparent;
  }
}

/* the white card */
.kr-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
}

.kr-body {
  flex: 1;
  min-height: 0;
  padding: 24px 26px;
  overflow: hidden auto;
  scrollbar-width: none;
}

/* no scrollbar in any engine (owner 2026-11-03: selecting a tile made the width jump). Safari before 18.2 ignores
   scrollbar-width; with "always show scroll bars" its bar appeared once the card grew (the "Was genau?" field) and
   took 15 px off the tile grid, which then reflowed */
.kr-body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.kr-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--kr-line-soft);
}

.kr-foot .fill-btn,
.kr-foot .outline-btn {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 16px;
  white-space: nowrap;
}

.kr-foot .back-link {
  flex: 0 1 auto;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}

.kr-foot .back-link svg {
  width: 18px;
  height: 18px;
}

.kr-foot-end {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.kr .fill-btn:disabled {
  opacity: .55;
}

/* one question */
.kr-q {
  display: grid;
  gap: 12px;
}

.kr-qh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.kr-qh:focus {
  outline: none;
}

.kr-qn {
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 16px;
  color: var(--kr-coral-ink);
}

.kr-qt {
  font-size: 18px;
  font-weight: 700;
  color: var(--kr-ink);
}

.kr-qt.sm {
  font-size: 15px;
}

.kr-qs {
  width: 100%;
  font-size: 13.5px;
  color: var(--kr-sub);
}

.kr-mt18 {
  margin-top: 18px;
}

.kr-opts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

.kr-ow {
  position: relative;
  display: flex;
  min-width: 0;
}

.kr-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 58px;
  padding: 11px 38px 11px 12px;
  border: 1.5px solid var(--kr-line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--kr-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.kr-opt:hover,
.kr-ftile:hover {
  border-color: rgba(0, 57, 150, .45);
}

.kr-opt[aria-pressed="true"],
.kr-ftile[aria-pressed="true"] {
  border-color: var(--kr-navy);
  box-shadow: 0 0 0 1px var(--kr-navy) inset;
  background: rgba(0, 57, 150, .05);
}

.kr-ol {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--kr-ink);
}

.kr-od {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--kr-sub);
}

/* the icon tile: system P1 (style.css .icon-tile) */
.kr-it {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(229, 90, 55, .12), rgba(0, 57, 150, .12));
  color: var(--kr-ink);
}

.kr-it svg {
  width: 17px;
  height: 17px;
}

.kr-opt:hover .kr-it {
  background: linear-gradient(135deg, rgba(229, 90, 55, .2), rgba(0, 57, 150, .2));
}

.kr-opt[aria-pressed="true"] .kr-it {
  background: linear-gradient(135deg, rgba(229, 90, 55, .28), rgba(0, 57, 150, .28));
}

.kr-it::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #14213d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
  box-shadow: 0 0 0 2px #ffffff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .18s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}

.kr-opt[aria-pressed="true"] .kr-it::after {
  opacity: 1;
  transform: none;
}

.kr-it-dk {
  background: linear-gradient(135deg, rgba(229, 90, 55, .24), rgba(100, 170, 255, .18));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.kr-it-lg {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.kr-it-lg svg {
  width: 20px;
  height: 20px;
}

/* the explanation: hover on a mouse, the i button everywhere; flips up when there is no room below */
.kr-info {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(20, 33, 61, .18);
  border-radius: 50%;
  background: #ffffff;
  color: var(--kr-sub);
  cursor: pointer;
}

.kr-info svg {
  width: 14px;
  height: 14px;
}

.kr-ow.open .kr-info,
.kr-info:hover {
  border-color: var(--kr-ink);
  background: var(--kr-ink);
  color: #ffffff;
}

.kr-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 12;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--kr-ink);
  box-shadow: 0 14px 30px -12px rgba(7, 13, 19, .5);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  pointer-events: none;
}

.kr-tip b {
  display: block;
  margin-bottom: 2px;
  color: #ffbf9d;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .kr-ow:hover .kr-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.kr-ow.open .kr-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.kr-ow.up .kr-tip {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
}

.kr-ow.up:hover .kr-tip,
.kr-ow.up.open .kr-tip {
  transform: none;
}

/* functions and systems: grouped compact tiles */
.kr-fgroups {
  display: grid;
  gap: 16px;
}

.kr-fgh {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kr-sub);
}

.kr-fgrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  grid-auto-rows: 1fr;
  margin-top: 8px;
}

.kr-ftile {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  min-height: 54px;
  padding: 9px 36px 9px 12px;
  border: 1.5px solid var(--kr-line);
  border-radius: 11px;
  background: #ffffff;
  color: var(--kr-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.kr-ftile svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--kr-ink);
}

.kr-ftile span {
  min-width: 0;
  hyphens: manual;
  overflow-wrap: break-word;
}

.kr-fgrid .kr-info {
  top: 12px;
  width: 22px;
  height: 22px;
}

.kr-other {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.kr-other label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kr-ink);
}

.kr-other label span {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kr-sub);
}

.kr-other input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(20, 33, 61, .22);
  border-radius: 10px;
  background: #ffffff;
  color: var(--kr-ink);
  font: inherit;
  font-size: 16px;
}

.kr-other input:focus-visible,
.kr-form input:focus-visible {
  outline: 2px solid #e55a37;
  outline-offset: 1px;
}

/* question change: the new question slides in */
@keyframes kr-in-f {
  from {
    opacity: 0;
    transform: translateX(32px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kr-in-b {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.kr-anim-f > * {
  animation: kr-in-f .34s cubic-bezier(.22, .61, .36, 1) both;
}

.kr-anim-b > * {
  animation: kr-in-b .34s cubic-bezier(.22, .61, .36, 1) both;
}

/* the evaluation with the mascot */
.kr-evalb {
  display: grid;
  place-items: center;
}

.kr-eval {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.kr-masc {
  width: 280px;
  max-width: 80%;
  height: auto;
  aspect-ratio: 280 / 262;
}

.kr-evl {
  position: relative;
  width: 100%;
  min-width: 260px;
  height: 28px;
  font-size: 16px;
  font-weight: 600;
  color: var(--kr-ink);
}

.kr-evl span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: nowrap;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1), filter .4s ease;
}

.kr-evl span.pre {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}

.kr-evl span.out {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(6px);
}

/* the result rises in block by block */
@keyframes kr-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.kr-anim-r .kr-res > * {
  animation: kr-rise .5s cubic-bezier(.22, .61, .36, 1) both;
}

.kr-anim-r .kr-res > :nth-child(2) {
  animation-delay: 70ms;
}

.kr-anim-r .kr-res > :nth-child(3) {
  animation-delay: 140ms;
}

.kr-anim-r .kr-res > :nth-child(4) {
  animation-delay: 210ms;
}

.kr-anim-r .kr-res > :nth-child(5) {
  animation-delay: 280ms;
}

.kr-anim-r .kr-res > :nth-child(6) {
  animation-delay: 350ms;
}

.kr-anim-r .kr-res > :nth-child(7) {
  animation-delay: 420ms;
}

.kr-res {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 600px;
}

.kr-res-eb {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kr-coral-ink);
}

.kr-price {
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: clamp(28px, 3cqw, 36px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.05;
  color: var(--kr-ink);
}

.kr-resmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14.5px;
  color: var(--kr-sub);
}

.kr-resmeta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.kr-resmeta svg {
  width: 16px;
  height: 16px;
}

.kr-drv {
  display: grid;
  gap: 4px;
  padding-top: 4px;
  font-size: 14px;
}

.kr-drv strong {
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kr-sub);
}

.kr-drv div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* the KI saving (owner 2026-11-03): market without KI vs. Vitec with KI, two range bars on one scale. Two columns
   on wide cards so "Termin buchen" stays above the fold (prototype round 25), stacked below 700 px. Colours from
   vitec/branding/tokens/tokens.json (navy #14213d, slate #4d5461 / #7d8594 / #aeb3bf, brand #c2411f -> #003996). */
.kr-ki {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 22px;
  margin-block: -4px;
  padding: 10px 14px;
  border: 1px solid rgba(20, 33, 61, .1);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(229, 90, 55, .06), rgba(0, 57, 150, .07)), #fff;
}

.kr-kis {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #14213d;
}

.kr-kis .i {
  flex: none;
  width: 16px;
  height: 16px;
  color: #c2411f;
}

.kr-kir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  font-size: 13.5px;
}

.kr-kil {
  min-width: 0;
  font-weight: 600;
  color: #4d5461;
}

.kr-kiv {
  font-weight: 700;
  white-space: nowrap;
  color: #14213d;
}

.kr-kim .kr-kiv {
  font-weight: 600;
  text-decoration: line-through;
  color: #7d8594;
}

.kr-kib {
  position: relative;
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 33, 61, .08);
}

.kr-kib i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: #aeb3bf;
}

.kr-kik .kr-kib i {
  background: linear-gradient(90deg, #c2411f, #003996);
}

@container kr (max-width: 699.98px) {
  .kr-ki {
    grid-template-columns: minmax(0, 1fr);
    margin-block: 0;
    padding: 12px 14px;
  }
}

.kr-drv div span:first-child {
  min-width: 0;
}

.kr-tn {
  color: var(--kr-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kr-res details summary {
  color: var(--kr-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.kr-plist {
  display: grid;
  margin-top: 10px;
  font-size: 13.5px;
}

.kr-plist div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--kr-line-soft);
}

.kr-plist .sum {
  border-top: 1.5px solid var(--kr-ink);
  color: var(--kr-ink);
  font-weight: 700;
}

.kr-plist .sum .kr-tn {
  color: var(--kr-ink);
}

.kr-ctas {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 6px;
}

.kr-ctah {
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--kr-ink);
}

.kr-ctasub {
  margin-top: -6px;
  font-size: 14px;
  color: var(--kr-sub);
}

.kr-ctas .fill-btn,
.kr-ctas .outline-btn {
  width: 100%;
  font-size: 15px;
  text-align: center;
  white-space: normal;
}

.kr-ctarow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kr-ctarow img {
  flex: none;
  width: 18px;
  height: 18px;
}

.kr-disc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--kr-sub);
}

/* the short contact form */
.kr-form {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #f5f5fa;
  font-size: 13px;
}

.kr-form > strong {
  color: var(--kr-ink);
}

.kr-flds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

.kr-fld {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.kr-fld.half {
  grid-column: 1;
}

.kr-fld label {
  color: var(--kr-ink);
  font-weight: 600;
}

.kr-req {
  color: var(--kr-coral-ink);
}

.kr-form input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--kr-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--kr-ink);
  font: inherit;
  font-size: 16px;
}

.kr-form input[aria-invalid="true"] {
  border-color: var(--kr-coral-ink);
}

.kr-ferr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0 !important;
  color: var(--kr-coral-ink);
  font-size: 13.5px;
  line-height: 1.35;
}

.kr-ferr svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.kr-reqnote {
  font-size: 12px;
  color: var(--kr-sub);
}

.kr-reqnote span {
  color: var(--kr-coral-ink);
}

.kr-form > .fill-btn {
  justify-self: start;
  font-size: 15px;
}

.kr-senderr {
  margin: 0 !important;
  color: var(--kr-coral-ink);
  font-size: 13.5px;
}

.kr-senderr:empty {
  display: none;
}

/* the thank-you screen: the last step */
.kr-tx {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr);
}

.kr-tx-hd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 18px;
}

.kr-tx-av {
  position: relative;
  grid-row: span 3;
  width: 76px;
  height: 76px;
}

.kr-tx-av img {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
}

.kr-tx-badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kr-ink);
  box-shadow: 0 0 0 3px #ffffff;
  color: #ffffff;
}

.kr-tx-badge svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.kr-tx-badge path {
  stroke-dasharray: 24;
  animation: kr-draw .55s .25s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes kr-draw {
  from {
    stroke-dashoffset: 24;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.kr-tx-eb {
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kr-coral-ink);
}

.kr-tx h3 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: #353535;
  outline: none;
  text-wrap: balance;
}

.kr-tx-lead {
  color: var(--kr-sub);
}

.kr-tx-lead b {
  color: var(--kr-ink);
  white-space: nowrap;
}

.kr-tx-up {
  animation: kr-up .55s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--d, 0) * 70ms + 120ms);
}

@keyframes kr-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.kr-trk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.kr-trk::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  background: var(--kr-line);
}

.kr-trk li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-inline: 4px;
  text-align: center;
}

.kr-trk .kr-it {
  background-color: #ffffff;
}

/* the tile is translucent, the step line must not show through */
.kr-trk b {
  font-size: 14px;
  line-height: 1.25;
}

.kr-trk li > span:not(.kr-it) {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--kr-sub);
}

.kr-rh {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.kr-rh h4 {
  font-size: 18px;
  font-weight: 600;
  color: #353535;
}

.kr-rh p {
  font-size: 14px;
  color: var(--kr-sub);
}

.kr-refs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.kr-refs.drag {
  scroll-snap-type: none;
  cursor: grabbing;
}

.kr-rc {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 6px;
  min-width: 0;
  padding-bottom: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--kr-line);
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  transition: box-shadow .25s ease;
}

.kr-rc:hover,
.kr-rc:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(194, 65, 31, .55);
  color: inherit;
}

.kr-rc > :not(.kr-media) {
  margin-inline: 14px;
}

.kr-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f6fbff;
}

.kr-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.kr-rc:hover .kr-media img,
.kr-rc:focus-visible .kr-media img {
  transform: scale(1.05);
}

.kr-kind {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--kr-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kr-why {
  margin-top: 6px;
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kr-coral-ink);
}

.kr-rt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  transition: color .2s ease;
}

.kr-rt svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform .2s ease;
}

.kr-rc:hover .kr-rt,
.kr-rc:focus-visible .kr-rt {
  color: var(--kr-coral-ink);
}

.kr-rc:hover .kr-rt svg,
.kr-rc:focus-visible .kr-rt svg {
  transform: translateX(4px);
}

.kr-rd {
  display: -webkit-box;
  align-self: start;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--kr-sub);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.kr-rk {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding-top: 8px;
  border-top: 1px solid var(--kr-line-soft);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--kr-sub);
}

.kr-rk b {
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--kr-ink);
  white-space: nowrap;
}

.kr-rp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kr-rp img,
.kr-ini {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.kr-ini {
  display: grid;
  place-items: center;
  background: #f6fbff;
  color: var(--kr-ink);
  font-size: 11.5px;
  font-weight: 700;
}

.kr-rpt {
  display: grid;
  min-width: 0;
}

.kr-rn {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.kr-rn b {
  font-size: 13.5px;
}

.kr-rrate {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #e55a37;
  font-size: 12px;
  font-weight: 600;
}

.kr-rrate svg {
  width: 11px;
  height: 11px;
}

.kr-rrate em {
  margin-left: 3px;
  color: var(--kr-sub);
  font-style: normal;
}

.kr-rrole {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--kr-sub);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* trust strip = the quote chat's footer (get-a-quote.css .trust, .logorow, .mq, .metricsbox) */
.kr-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  color: #ffffff;
}

.kr-logos {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  min-height: 52px;
  padding: 0 6px;
}

.kr-trusted {
  flex: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.kr-mq {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.kr-mq-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: kr-mq 45s linear infinite;
}

.kr-mq:hover .kr-mq-track {
  animation-play-state: paused;
}

.kr-mq img {
  flex: none;
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 40px;
  margin-right: 54px;
}

@keyframes kr-mq {
  to {
    transform: translateX(-50%);
  }
}

.kr-metricsbox {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 18px;
  border: 1px solid var(--kr-glass-line);
  border-radius: 14px;
  background: var(--kr-glass);
  color: var(--kr-soft);
  font-size: 13px;
}

.kr-metrics {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 18px;
  white-space: nowrap;
}

.kr-metrics b {
  color: #ffffff;
}

.kr-mt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.kr-rate {
  gap: 6px;
}

.kr-stars {
  display: inline-flex;
  gap: 1px;
  color: #e55a37;
}

.kr-sheet {
  display: none;
}

@container kr (max-width: 999.98px) {
  .kr-trust {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--kr-glass-line);
    border-radius: 14px;
    background: var(--kr-glass);
  }

  .kr-logos {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }

  .kr-trusted {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .kr-mq img {
    max-width: 124px;
    max-height: 32px;
    margin-right: 40px;
  }

  .kr-metricsbox {
    flex: none;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
  }
}

@container kr (max-width: 699.98px) {
  .kr-trust {
    gap: 10px;
    border-radius: 12px;
    font-size: 14px;
  }

  .kr-mq img {
    max-width: 100px;
    max-height: 26px;
    margin-right: 26px;
  }

  .kr-metrics .kr-mt:not(.kr-rate) {
    display: none;
  }

  .kr-metricsbox {
    font-size: 14px;
  }

  .kr-stars svg {
    width: 10px;
    height: 10px;
  }
}

/* ---------------------------------------------------------------- phone */
@container kr (max-width: 760px) {
  .kr-app {
    gap: 10px;
  }

  .kr-stp,
  .kr-min,
  .kr-prog {
    display: none;
  }

  .kr-pill {
    display: inline-flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.15;
  }

  .kr-pill b {
    font-family: "Oswald", "Oswald Fallback", sans-serif;
    font-size: 19px;
    font-weight: 600;
  }

  .kr-pill small {
    color: var(--kr-soft);
    font-size: 12px;
    font-weight: 500;
  }

  .kr-list {
    display: grid;
  }

  .kr-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .kr-main > .kr-panel {
    display: none;
  }

  .kr-sheet:not([hidden]) {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    background: rgba(7, 13, 19, .6);
  }

  .kr-sheet .kr-panel {
    width: 100%;
    max-height: 85%;
    border-radius: 20px 20px 0 0;
  }

  .kr-body {
    padding: 18px 16px;
  }

  .kr-foot {
    padding-inline: 12px;
  }

  .kr-foot-end .fill-btn,
  .kr-foot-end .outline-btn {
    font-size: 14px;
  }

  .kr-opts {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .kr-ow {
    display: block;
  }

  .kr-opt {
    min-height: 62px;
  }

  .kr-ow.open .kr-opt,
  .kr-ow.open .kr-ftile {
    height: auto;
  }

  .kr-tip {
    position: static;
    display: none;
    width: auto;
    margin-top: 6px;
    box-shadow: none;
  }

  .kr-ow.open .kr-tip {
    display: block;
  }

  .kr-fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .kr-fgrid .kr-ow.open {
    grid-column: 1 / -1;
  }

  .kr-ftile {
    gap: 7px;
    min-height: 54px;
    padding: 8px 32px 8px 11px;
    font-size: 13px;
  }

  .kr-ftile svg {
    display: none;
  }

  .kr-tx {
    gap: 22px;
  }

  .kr-tx-hd {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .kr-tx-av {
    grid-row: auto;
    width: 64px;
    height: 64px;
  }

  .kr-tx-av img {
    width: 64px;
    height: 64px;
  }

  .kr-tx h3 {
    font-size: 26px;
  }

  .kr-trk {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .kr-trk::before {
    top: 17px;
    right: auto;
    bottom: 17px;
    left: 16px;
    width: 2px;
    height: auto;
  }

  .kr-trk li {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    gap: 0 12px;
    padding: 0;
    text-align: left;
  }

  .kr-trk .kr-it {
    grid-row: span 2;
  }

  .kr-refs {
    grid-auto-columns: 82%;
  }

  .kr-flds {
    grid-template-columns: minmax(0, 1fr);
  }

  .kr-fld.half {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .kr-page {
    --kr-above: 158px;
    padding-top: calc(var(--vitec-header-h, 72px) + 14px);
    padding-bottom: 6px;
  }

  .kr-wrap {
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }

  .kr-intro {
    gap: 6px;
    margin-bottom: 12px;
    padding-inline: 4px;
  }

  .kr-intro h1 {
    font-size: 26px;
  }

  .kr-intro p {
    font-size: 16px;
    line-height: 1.4;
  }

  .kr-app {
    height: max(480px, calc(100vh - var(--vitec-header-h, 72px) - var(--kr-above)));
    height: max(480px, calc(100dvh - var(--vitec-header-h, 72px) - var(--kr-above)));
  }
}

/* a low window (a MacBook's Safari): the trust strip in one row, the card keeps the height */
@media (min-width: 761px) and (max-height: 820px) {
  .kr-trust {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--kr-glass-line);
    border-radius: 14px;
    background: var(--kr-glass);
  }

  .kr-logos {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }

  .kr-trusted {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .kr-mq img {
    max-width: 124px;
    max-height: 32px;
    margin-right: 40px;
  }

  .kr-metricsbox {
    flex: none;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
  }
}

/* ---------------------------------------------------------------- Calendly over the page */
html.kr-cal-open,
html.kr-cal-open body {
  overflow: hidden;
}

.kr-cal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the site header (9999) and everything else on the page (99999) */
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 13, 19, .72);
}

.kr-calbox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1000px, 100%);
  height: min(760px, 100%);
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  color: #14213d;
}

.kr-calhd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid rgba(20, 33, 61, .12);
}

.kr-calhd strong {
  font-size: 16px;
  font-weight: 600;
}

.kr-calx {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.kr-calx:hover {
  background: rgba(20, 33, 61, .08);
}

.kr-calx:focus-visible {
  outline: 2px solid #e55a37;
  outline-offset: 2px;
}

.kr-calx svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.kr-calbd {
  position: relative;
  min-height: 0;
}

.kr-calbd iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kr-calwait {
  padding: 24px;
  color: #4d5461;
  font-size: 15px;
  text-align: center;
}

.kr-calalt {
  padding: 8px 20px;
  border-top: 1px solid rgba(20, 33, 61, .12);
  color: #4d5461;
  font-size: 13px;
  text-align: center;
  visibility: hidden;
}

.kr-calalt.on {
  visibility: visible;
}

.kr-calalt a {
  color: inherit;
}

@media (max-width: 760px) {
  .kr-cal {
    padding: 0;
  }

  .kr-calbox {
    width: 100%;
    height: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kr-page *,
  .kr-page *::before,
  .kr-page *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* "Preis übernehmen" while the quote chat loads: locked, with a turning ring (cost-calculator.js, owner 2026-11-04) */
.kr-ctas .fill-btn.is-busy {
  cursor: progress;
  opacity: .8;
  pointer-events: none;
}

.kr-spin {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: kr-spin .8s linear infinite;
}

@keyframes kr-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kr-spin {
    animation: none;
  }
}