:root {
  --navy: #082b49;
  --navy-light: #114d76;
  --blue: #1976b9;
  --blue-soft: #eaf5fc;
  --red: #d64b3f;
  --green: #16855b;
  --green-soft: #e8f6ef;
  --yellow-soft: #fff5d8;
  --ink: #17212b;
  --muted: #647485;
  --line: #dce4ea;
  --surface: #ffffff;
  --background: #f2f5f7;
  --shadow: 0 18px 50px rgba(8, 43, 73, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--background);
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

.site-header {
  min-height: 78px;
  padding: 14px clamp(20px, 5vw, 72px);
  color: white;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--navy);
  background: white;
  letter-spacing: -0.05em;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 1.18rem;
}

.brand small {
  opacity: 0.72;
  margin-top: 1px;
}

.prototype-badge {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
}

main {
  overflow: hidden;
}

.hero {
  min-height: 520px;
  padding: 72px clamp(20px, 6vw, 96px);
  background:
    radial-gradient(circle at 85% 15%, rgba(44, 148, 213, .2), transparent 32%),
    linear-gradient(135deg, #f7fbfd 0%, #eaf3f8 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
  align-items: center;
  gap: 70px;
}

.hero-copy {
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.55rem, 5vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.6vw, 1.28rem);
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-primary {
  color: white;
  background: var(--navy);
  box-shadow: 0 12px 26px rgba(8, 43, 73, .20);
}

.button-secondary {
  color: #82909b;
  background: #e2e7ea;
}

.button-danger {
  color: #fff;
  background: #b42318;
  box-shadow: 0 12px 26px rgba(180, 35, 24, .20);
}

.button-danger:hover {
  background: #912018;
}

.button-danger:focus-visible {
  outline: 3px solid rgba(180, 35, 24, .28);
  outline-offset: 3px;
}

.system-card {
  position: relative;
  min-height: 350px;
  padding: 42px;
  border: 1px solid rgba(8, 43, 73, .09);
  border-radius: 32px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}

.heat-source {
  position: absolute;
  left: 36px;
  top: 110px;
  width: 126px;
  height: 142px;
  border: 5px solid var(--navy);
  border-radius: 16px;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 900;
}

.flame {
  color: var(--red);
  font-size: 2.5rem;
}

.radiator {
  position: absolute;
  right: 40px;
  top: 83px;
  width: 145px;
  height: 105px;
  padding: 12px;
  border: 4px solid var(--navy);
  border-radius: 9px;
  display: flex;
  gap: 7px;
}

.radiator span {
  flex: 1;
  border-radius: 5px;
  background: #d9e4eb;
}

.radiator b {
  position: absolute;
  top: 112px;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--navy);
  font-size: .78rem;
}

.pipe {
  position: absolute;
  left: 162px;
  right: 108px;
  height: 12px;
  border-radius: 999px;
}

.pipe span {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  font-weight: 850;
}

.pipe i {
  position: absolute;
  top: 2px;
  width: 8px;
  height: 8px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}

.pipe i:nth-of-type(1) { left: 22%; }
.pipe i:nth-of-type(2) { left: 50%; }
.pipe i:nth-of-type(3) { left: 78%; }

.pipe-flow {
  top: 119px;
  color: var(--red);
  background: var(--red);
}

.pipe-return {
  top: 252px;
  color: var(--blue);
  background: var(--blue);
}

.pipe-return i {
  transform: rotate(225deg);
}

.pump {
  position: absolute;
  right: 68px;
  top: 228px;
  width: 58px;
  height: 58px;
  border: 5px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  background: white;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.tool-groups {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: -42px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.tool-groups article {
  min-height: 124px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: 0 10px 30px rgba(8, 43, 73, .07);
  display: flex;
  flex-direction: column;
}

.tool-groups article span {
  color: var(--blue);
  font-size: 1.65rem;
  font-weight: 900;
}

.tool-groups article strong {
  margin-top: auto;
  color: var(--navy);
}

.tool-groups article small {
  margin-top: 2px;
  color: var(--muted);
}

.calculator-section {
  max-width: 1380px;
  margin: 0 auto;
  padding: 100px 24px;
}

.section-heading {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.section-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.9rem, 3vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.status-dot {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: .8rem;
  font-weight: 900;
}

.status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
  gap: 24px;
  align-items: start;
}

.calculator-card,
.result-card {
  padding: clamp(22px, 3.5vw, 42px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
}

.result-card {
  position: sticky;
  top: 18px;
}

.form-heading,
.result-heading {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.form-heading.compact {
  margin-top: 34px;
}

.form-heading h3,
.result-heading h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.28rem;
}

.form-heading p,
.result-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .92rem;
}

.step-number {
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  color: white;
  background: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 950;
}

.result-step {
  background: var(--green);
}

.field {
  display: block;
}

.field-wide {
  margin-top: 22px;
}

.field > span {
  margin-bottom: 7px;
  color: #334655;
  display: block;
  font-size: .86rem;
  font-weight: 850;
}

.field input,
.field select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid #cbd6de;
  border-radius: 11px;
  color: var(--ink);
  background: #fbfcfd;
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(25, 118, 185, .11);
}

.fields-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
}

.input-unit input {
  border-radius: 11px 0 0 11px;
}

.input-unit select,
.fixed-unit {
  border-left: 0;
  border-radius: 0 11px 11px 0;
}

.fixed-unit {
  height: 50px;
  border: 1px solid #cbd6de;
  border-left: 0;
  color: var(--navy);
  background: #eef4f7;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.field.is-target {
  display: none;
}

.form-error {
  margin: 20px 0 0;
  padding: 13px 15px;
  border-radius: 10px;
  color: #9a2f28;
  background: #fdecea;
  font-weight: 750;
}

.calculate-button {
  width: 100%;
  min-height: 54px;
  margin-top: 26px;
  border: 0;
  border-radius: 13px;
  color: white;
  background: var(--navy);
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(8, 43, 73, .18);
}

.main-result {
  margin-top: 24px;
  padding: 24px;
  border-radius: 18px;
  color: white;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
}

.main-result span,
.main-result strong {
  display: block;
}

.main-result span {
  opacity: .75;
  font-size: .86rem;
  font-weight: 850;
}

.main-result strong {
  margin-top: 4px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.assessment {
  margin-top: 16px;
  padding: 15px 17px;
  border-radius: 13px;
  display: grid;
  gap: 3px;
}

.assessment-good {
  color: #146645;
  background: var(--green-soft);
}

.assessment-warning {
  color: #785a08;
  background: var(--yellow-soft);
}

.assessment-danger {
  color: #972f28;
  background: #fdecea;
}

.assessment span {
  font-size: .86rem;
}

.result-details {
  margin: 20px 0 0;
}

.result-details div {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.result-details dt {
  color: var(--muted);
}

.result-details dd {
  margin: 0;
  color: var(--navy);
  text-align: right;
  font-weight: 900;
}

.formula-box,
.calculation-box {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #f8fafb;
  overflow-x: auto;
}

.formula-box > span,
.calculation-box > span {
  margin-bottom: 10px;
  color: var(--muted);
  display: block;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#formula,
#calculation {
  min-height: 36px;
  color: var(--navy);
}

.technical-note {
  margin: 20px 0 0;
  padding: 15px;
  border-left: 4px solid var(--blue);
  color: #50616f;
  background: var(--blue-soft);
  font-size: .84rem;
}

footer {
  min-height: 92px;
  padding: 24px;
  color: white;
  background: var(--navy);
  text-align: center;
  display: grid;
  place-content: center;
}

footer span {
  opacity: .65;
  font-size: .82rem;
}

@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-illustration {
    max-width: 650px;
    width: 100%;
  }

  .tool-groups {
    grid-template-columns: repeat(3, 1fr);
  }

  .calculator-layout {
    grid-template-columns: 1fr;
  }

  .result-card {
    position: static;
  }
}

@media (max-width: 680px) {
  .site-header {
    min-height: 68px;
    padding: 10px 16px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .brand small,
  .prototype-badge {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 52px 20px 82px;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .system-card {
    min-height: 285px;
    padding: 20px;
  }

  .heat-source {
    left: 19px;
    top: 86px;
    width: 98px;
    height: 118px;
  }

  .radiator {
    right: 19px;
    top: 64px;
    width: 112px;
    height: 85px;
  }

  .radiator b {
    top: 93px;
  }

  .pipe {
    left: 117px;
    right: 76px;
  }

  .pipe-flow {
    top: 95px;
  }

  .pipe-return {
    top: 205px;
  }

  .pump {
    right: 37px;
    top: 183px;
    width: 48px;
    height: 48px;
  }

  .tool-groups {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -35px;
    padding: 0 14px;
  }

  .tool-groups article {
    min-height: 112px;
  }

  .calculator-section {
    padding: 72px 14px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .fields-grid {
    grid-template-columns: 1fr;
  }

  .calculator-card,
  .result-card {
    padding: 20px;
    border-radius: 18px;
  }

  .main-result strong {
    font-size: 2.45rem;
  }
}

.pipe-comparison {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fbfcfd;
}

.pipe-comparison-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pipe-comparison-head h4 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.05rem;
}

.comparison-eyebrow {
  color: var(--blue);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.comparison-live {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: .7rem;
  font-weight: 900;
}

.comparison-live::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.comparison-description {
  margin: 8px 0 15px;
  color: var(--muted);
  font-size: .8rem;
}

.comparison-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  font-size: .79rem;
}

.comparison-table th,
.comparison-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.comparison-table thead th {
  color: var(--muted);
  background: #f4f7f9;
  font-size: .7rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
}

.comparison-table tbody tr {
  cursor: pointer;
  transition:
    background-color .15s ease,
    color .15s ease;
}

.comparison-table tbody tr:hover {
  background: var(--blue-soft);
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.comparison-table .is-selected-pipe {
  color: var(--navy);
  background: #e5f2fa;
}

.comparison-table .is-selected-pipe th {
  position: relative;
  font-weight: 950;
}

.comparison-table .is-selected-pipe th::before {
  content: "●";
  margin-right: 7px;
  color: var(--blue);
  font-size: .65rem;
}

.comparison-empty {
  padding: 20px !important;
  color: var(--muted);
  text-align: center !important;
}

@media (max-width: 680px) {
  .pipe-comparison {
    padding: 16px;
  }

  .comparison-table {
    font-size: .76rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 9px 10px;
  }
}

.pipe-selector {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #c9dce9;
  border-radius: 17px;
  background: #f2f8fc;
}

.pipe-selector-heading {
  margin-bottom: 17px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pipe-selector-heading h4 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.08rem;
}

.pipe-selector-eyebrow {
  color: var(--blue);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.pipe-selector-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: .69rem;
  font-weight: 900;
}

.pipe-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.pipe-values {
  margin-top: 15px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pipe-values span,
.pipe-values strong {
  display: block;
}

.pipe-values span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
}

.pipe-values strong {
  margin-top: 3px;
  color: var(--navy);
}

.pipe-selector-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: .77rem;
}

#pipe-size-field[hidden] {
  display: none;
}

.field input[readonly] {
  color: var(--navy);
  background: #eef4f7;
  font-weight: 900;
  cursor: default;
}

@media (max-width: 680px) {
  .pipe-selector-grid,
  .pipe-values {
    grid-template-columns: 1fr;
  }

  .pipe-values div {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
  }

  .pipe-values div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .pipe-selector-heading {
    flex-direction: column;
  }
}

.velocity-scale {
  position: relative;
  width: 100%;
  height: 10px;
  margin-top: 11px;
  border-radius: 999px;
  background: #dfe6eb;
  display: flex;
}

.velocity-zone {
  height: 100%;
}

.velocity-zone-low {
  width: 13.333%;
  border-radius: 999px 0 0 999px;
  background: #e4b446;
}

.velocity-zone-good {
  width: 53.334%;
  background: #38a775;
}

.velocity-zone-high {
  width: 33.333%;
  border-radius: 0 999px 999px 0;
  background: #d95d52;
}

#velocity-marker {
  position: absolute;
  top: 50%;
  left: 46.67%;
  width: 18px;
  height: 18px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 2px 7px rgba(8, 43, 73, .28);
  transform: translate(-50%, -50%);
  transition: left .18s ease;
}

.velocity-scale-labels {
  margin-top: 5px;
  color: var(--muted);
  display: grid;
  grid-template-columns: 13.333% 53.334% 16.666% 16.667%;
  font-size: .68rem;
  font-weight: 750;
}

.velocity-scale-labels span:nth-child(2),
.velocity-scale-labels span:nth-child(3) {
  transform: translateX(-50%);
}

.velocity-scale-labels span:last-child {
  text-align: right;
}

.velocity-guidance {
  margin-top: 11px;
  padding: 11px 13px;
  border-radius: 11px;
  display: grid;
  gap: 2px;
}

.velocity-guidance strong {
  font-size: .82rem;
}

.velocity-guidance span {
  font-size: .76rem;
  line-height: 1.4;
}

.velocity-guidance-good {
  color: #146645;
  background: var(--green-soft);
}

.velocity-guidance-warning {
  color: #785a08;
  background: var(--yellow-soft);
}

.velocity-guidance-danger {
  color: #972f28;
  background: #fdecea;
}

/* Startseitenanimation Heizkreis */
.hero-video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .12);
  border-radius: 30px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .96),
      rgba(232, 243, 249, .96)
    );
  box-shadow: var(--shadow);
}

.hero-video {
  width: 100%;
  height: auto;
  min-height: 340px;
  display: block;
  object-fit: cover;
  background: #edf5f9;
}

.hero-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.hero-video-label {
  position: absolute;
  z-index: 2;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  color: var(--navy);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 16px rgba(8, 43, 73, .12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 900;
}

.hero-video-label span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.hero-video-label-flow {
  top: 18px;
  right: 18px;
}

.hero-video-label-flow span {
  background: #d64b3f;
}

.hero-video-label-return {
  right: 18px;
  bottom: 72px;
}

.hero-video-label-return span {
  background: #1976b9;
}

.hero-video-caption {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 13px;
  color: var(--navy);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 7px 20px rgba(8, 43, 73, .12);
  backdrop-filter: blur(9px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.hero-video-caption strong {
  font-size: .84rem;
}

.hero-video-caption span {
  color: var(--muted);
  text-align: right;
  font-size: .72rem;
}

@media (max-width: 680px) {
  .hero-video {
    min-height: 250px;
  }

  .hero-video-label {
    padding: 6px 9px;
    font-size: .68rem;
  }

  .hero-video-label-flow {
    top: 11px;
    right: 11px;
  }

  .hero-video-label-return {
    right: 11px;
    bottom: 68px;
  }

  .hero-video-caption {
    right: 11px;
    bottom: 11px;
    left: 11px;
    padding: 9px 11px;
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .hero-video-caption span {
    text-align: left;
  }
}

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

.result-details .recommended-pipe-result {
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #bcdcca;
  border-radius: 11px;
  background: var(--green-soft);
}

.result-details .recommended-pipe-result[hidden] {
  display: none;
}

.result-details .recommended-pipe-result dt {
  color: #146645;
  font-weight: 850;
}

.result-details .recommended-pipe-result dd {
  color: #146645;
  max-width: 58%;
}

.result-details .recommended-pipe-result {
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #bcdcca;
  border-radius: 11px;
  background: var(--green-soft);
}

.result-details .recommended-pipe-result[hidden] {
  display: none;
}

.result-details .recommended-pipe-result dt {
  color: #146645;
  font-weight: 850;
}

.result-details .recommended-pipe-result dd {
  color: #146645;
  max-width: 58%;
}

/* =========================================================
   Fachbereich Heizung
   ========================================================= */

.hub-navigation {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hub-navigation a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 800;
}

.hub-navigation a:hover,
.hub-navigation a[aria-current="page"] {
  color: white;
}

.heating-hub-hero {
  min-height: 650px;
  padding: 90px clamp(24px, 7vw, 110px);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(215, 76, 62, .14),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #f9fbfc 0%,
      #edf4f8 100%
    );
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, .85fr);
  align-items: center;
  gap: 80px;
}

.hub-back-link {
  color: var(--blue);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 850;
}

.heating-hub-copy h1 {
  margin: 12px 0 0;
  color: var(--navy);
  font-size: clamp(4.5rem, 10vw, 9rem);
  line-height: .82;
  letter-spacing: -.08em;
}

.heating-hub-lead {
  max-width: 720px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.heating-hub-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hub-button-light {
  color: var(--navy);
  background: white;
  box-shadow: 0 10px 25px rgba(8, 43, 73, .08);
}

.heating-hub-visual {
  display: grid;
  place-items: center;
}

.heating-orbit {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  border: 1px solid rgba(8, 43, 73, .09);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .98) 0 30%,
      rgba(255, 255, 255, .55) 31% 55%,
      transparent 56%
    );
}

.heating-orbit::before,
.heating-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(8, 43, 73, .10);
  border-radius: 50%;
}

.heating-orbit::before {
  inset: 13%;
}

.heating-orbit::after {
  inset: 28%;
}

.heating-orbit-center {
  position: absolute;
  z-index: 2;
  inset: 35%;
  border-radius: 50%;
  color: white;
  background: var(--navy);
  box-shadow: 0 22px 50px rgba(8, 43, 73, .23);
  display: grid;
  place-content: center;
  text-align: center;
}

.heating-orbit-center span {
  font-size: 2rem;
}

.heating-orbit-center strong {
  font-size: .82rem;
}

.heating-orbit-node {
  position: absolute;
  z-index: 3;
  width: 116px;
  min-height: 86px;
  padding: 13px;
  border: 1px solid rgba(8, 43, 73, .10);
  border-radius: 20px;
  color: var(--navy);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 15px 35px rgba(8, 43, 73, .10);
  display: grid;
  place-content: center;
  text-align: center;
  font-size: .75rem;
  font-weight: 850;
}

.heating-orbit-node span {
  color: #d64b3f;
  font-size: 1.15rem;
  font-weight: 950;
}

.node-power {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.node-flow {
  top: 50%;
  right: -2%;
  transform: translateY(-50%);
}

.node-pipe {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.node-radiator {
  top: 50%;
  left: -2%;
  transform: translateY(-50%);
}

.heating-feature-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 110px 24px;
}

.heating-section-heading {
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: end;
  gap: 50px;
}

.heating-section-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.heating-section-heading > p {
  margin: 0;
  color: var(--muted);
}

.heating-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.heating-feature-card {
  position: relative;
  min-height: 380px;
  padding: clamp(26px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  color: var(--ink);
  background: white;
  text-decoration: none;
}

.heating-feature-primary {
  min-height: 520px;
  grid-column: 1 / -1;
  color: white;
  background:
    radial-gradient(
      circle at 82% 35%,
      rgba(213, 74, 59, .45),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #082b49,
      #114f77
    );
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr);
  align-items: center;
  gap: 40px;
}

.heating-card-number {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.heating-feature-primary .heating-card-number,
.heating-feature-primary .heating-card-category {
  color: rgba(255, 255, 255, .62);
}

.heating-card-category {
  margin: 50px 0 8px;
  color: var(--blue);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.heating-feature-card h3 {
  max-width: 700px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.heating-feature-primary h3 {
  color: white;
}

.heating-feature-card p {
  max-width: 610px;
  margin: 20px 0 0;
  color: var(--muted);
}

.heating-feature-primary p {
  color: rgba(255, 255, 255, .72);
}

.heating-card-link,
.heating-coming-label {
  position: absolute;
  left: clamp(26px, 4vw, 48px);
  bottom: 32px;
  font-size: .86rem;
  font-weight: 900;
}

.heating-feature-primary .heating-card-link {
  color: white;
}

.heating-card-link {
  color: var(--blue);
}

.heating-coming-label {
  color: var(--muted);
}

.heating-pipe-preview {
  position: relative;
  min-height: 340px;
}

.preview-pipe {
  position: absolute;
  left: 5%;
  right: 20%;
  height: 17px;
  border-radius: 999px;
}

.preview-supply {
  top: 28%;
  background: #eb6556;
}

.preview-return {
  bottom: 27%;
  background: #46a0d3;
}

.preview-pipe i {
  position: absolute;
  top: 4px;
  width: 9px;
  height: 9px;
  border-top: 2px solid white;
  border-right: 2px solid white;
}

.preview-supply i {
  transform: rotate(45deg);
}

.preview-return i {
  transform: rotate(225deg);
}

.preview-pipe i:nth-child(1) {
  left: 20%;
}

.preview-pipe i:nth-child(2) {
  left: 48%;
}

.preview-pipe i:nth-child(3) {
  left: 76%;
}

.preview-radiator {
  position: absolute;
  top: 18%;
  right: 1%;
  width: 150px;
  height: 190px;
  padding: 14px;
  border: 5px solid rgba(255, 255, 255, .88);
  border-radius: 16px;
  display: flex;
  gap: 8px;
}

.preview-radiator span {
  flex: 1;
  border-radius: 7px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .96),
      rgba(255, 255, 255, .45)
    );
}

.heating-radiator-card {
  min-height: 500px;
  padding-bottom: 230px;
}

.heating-radiator-media {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 215px;
  overflow: hidden;
  background: #edf5f8;
}

.heating-radiator-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.radiator-media-fallback,
.radiator-intro-fallback {
  position: absolute;
  inset: 0;
  padding: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.radiator-media-fallback span,
.radiator-intro-fallback span {
  width: 24px;
  height: 125px;
  border: 2px solid #a7b3ba;
  border-radius: 10px;
  background:
    linear-gradient(
      90deg,
      #cbd4d9,
      white,
      #aebbc2
    );
}

.heating-radiator-media video:not([src=""]) + .radiator-media-fallback,
.radiator-intro-video-frame video:not([src=""]) + .radiator-intro-fallback {
  z-index: -1;
}

.heating-coming-card {
  min-height: 390px;
  background: #f8fafb;
}

.heating-principles {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 110px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.heating-principles > div {
  padding: 36px;
  border-top: 1px solid var(--line);
}

.heating-principles > div + div {
  border-left: 1px solid var(--line);
}

.heating-principle-number {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 950;
}

.heating-principles strong {
  margin-top: 35px;
  color: var(--navy);
  display: block;
  font-size: 1.08rem;
}

.heating-principles p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .88rem;
}

/* Unterseite Gliederheizkörper */

.radiator-intro-main {
  overflow: hidden;
}

.radiator-intro-hero {
  min-height: 680px;
  padding: 80px clamp(24px, 7vw, 110px);
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(215, 76, 62, .12),
      transparent 32%
    ),
    linear-gradient(145deg, #f9fbfc, #edf4f8);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1fr);
  align-items: center;
  gap: 70px;
}

.radiator-intro-copy h1 {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--navy);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.radiator-intro-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 1.15rem;
}

.radiator-intro-status {
  width: fit-content;
  margin-top: 30px;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 900;
}

.radiator-intro-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.radiator-intro-video-frame {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .10);
  border-radius: 32px;
  background: white;
}

.radiator-intro-video-frame video {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
}

.radiator-coming-panel {
  max-width: 1400px;
  margin: 0 auto;
  padding: 110px 24px;
}

.radiator-coming-panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.radiator-coming-grid {
  margin-top: 55px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.radiator-coming-grid > div {
  min-height: 240px;
  padding: 34px;
  border-top: 1px solid var(--line);
}

.radiator-coming-grid > div + div {
  border-left: 1px solid var(--line);
}

.radiator-coming-grid span {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 950;
}

.radiator-coming-grid strong {
  margin-top: 50px;
  color: var(--navy);
  display: block;
  font-size: 1.2rem;
}

.radiator-coming-grid p {
  margin: 9px 0 0;
  color: var(--muted);
}

@media (max-width: 980px) {
  .heating-hub-hero,
  .radiator-intro-hero {
    grid-template-columns: 1fr;
  }

  .heating-hub-visual {
    max-width: 570px;
    width: 100%;
  }

  .heating-section-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .heating-feature-primary {
    grid-template-columns: 1fr;
  }

  .heating-feature-grid {
    grid-template-columns: 1fr;
  }

  .heating-feature-primary {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .hub-navigation {
    display: none;
  }

  .heating-hub-hero,
  .radiator-intro-hero {
    min-height: auto;
    padding: 55px 20px 80px;
  }

  .heating-hub-copy h1 {
    font-size: 5rem;
  }

  .heating-orbit-node {
    width: 92px;
    min-height: 72px;
  }

  .heating-feature-section,
  .radiator-coming-panel {
    padding: 75px 14px;
  }

  .heating-feature-card {
    min-height: 430px;
    padding: 24px;
    border-radius: 22px;
  }

  .heating-card-link,
  .heating-coming-label {
    left: 24px;
  }

  .heating-pipe-preview {
    min-height: 260px;
  }

  .preview-radiator {
    width: 110px;
    height: 150px;
  }

  .heating-principles,
  .radiator-coming-grid {
    grid-template-columns: 1fr;
  }

  .heating-principles > div + div,
  .radiator-coming-grid > div + div {
    border-left: 0;
  }

  .radiator-intro-video-frame,
  .radiator-intro-video-frame video {
    min-height: 280px;
  }
}

/* Verlinkte Werkzeugkacheln */
a.tool-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

a.tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 117, 177, .28);
  box-shadow: 0 18px 40px rgba(8, 43, 73, .12);
}

a.tool-card:focus-visible {
  outline: 3px solid rgba(20, 117, 177, .35);
  outline-offset: 4px;
}

/* =========================================================
   Neue Werkzeugkoffer-Startseite
   ========================================================= */

.toolbox-home-page {
  background: #f6f9fb;
}

.toolbox-home-hero {
  min-height: 720px;
  padding: 90px clamp(24px, 7vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(80, 164, 211, .17),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #fbfdfe 0%,
      #edf5f9 100%
    );
  display: grid;
  grid-template-columns:
    minmax(0, .88fr)
    minmax(480px, 1fr);
  align-items: center;
  gap: 70px;
}

.toolbox-home-copy h1 {
  max-width: 850px;
  margin: 16px 0 0;
  color: var(--navy);
  font-size: clamp(4rem, 8vw, 8.4rem);
  line-height: .86;
  letter-spacing: -.075em;
}

.toolbox-home-lead {
  max-width: 700px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.38rem);
  line-height: 1.55;
}

.toolbox-home-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.toolbox-light-button {
  color: var(--navy);
  background: white;
  box-shadow: 0 12px 30px rgba(8, 43, 73, .08);
}

.toolbox-home-meta {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.toolbox-home-meta span {
  min-width: 120px;
  color: var(--muted);
  display: grid;
  gap: 3px;
  font-size: .76rem;
}

.toolbox-home-meta strong {
  color: var(--navy);
  font-size: 1rem;
}

.toolbox-home-visual {
  display: grid;
  place-items: center;
}

.toolbox-image-frame {
  position: relative;
  width: min(100%, 760px);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .10);
  border-radius: 38px;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 1),
      rgba(223, 236, 244, .8)
    );
  box-shadow:
    0 35px 80px rgba(8, 43, 73, .16),
    inset 0 1px 0 white;
}

.toolbox-image-frame img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
}

.toolbox-fallback {
  position: absolute;
  inset: 0;
  place-items: center;
}

.toolbox-fallback:not([hidden]) {
  display: grid;
}

.toolbox-fallback-case {
  width: 78%;
  padding: 50px 35px;
  border: 6px solid #436d88;
  border-radius: 18px 18px 30px 30px;
  background: #245b7d;
  box-shadow: 0 25px 50px rgba(8, 43, 73, .25);
  display: grid;
  gap: 18px;
  transform: perspective(900px) rotateX(9deg);
}

.toolbox-fallback-case > div {
  padding: 22px;
  border: 3px solid #7598ad;
  background: #dbe7ed;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

.toolbox-fallback-case span {
  min-width: 56px;
  min-height: 56px;
  border-radius: 12px;
  color: var(--navy);
  background: white;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 950;
}

.toolbox-floating-label {
  position: absolute;
  z-index: 3;
  padding: 10px 14px;
  border: 1px solid rgba(8, 43, 73, .08);
  border-radius: 999px;
  color: var(--navy);
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 12px 30px rgba(8, 43, 73, .12);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 900;
}

.toolbox-floating-label span {
  color: var(--blue);
  font-size: .67rem;
}

.toolbox-label-calculate {
  top: 7%;
  right: 5%;
}

.toolbox-label-check {
  right: 4%;
  bottom: 9%;
}

.toolbox-label-learn {
  bottom: 7%;
  left: 5%;
}

.home-domains {
  max-width: 1420px;
  margin: 0 auto;
  padding: 120px 24px;
}

.home-domains-heading {
  margin-bottom: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  align-items: end;
  gap: 60px;
}

.home-domains-heading h2,
.home-popular-tools h2,
.home-product-statement h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.7rem, 5vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.06em;
}

.home-domains-heading > p {
  margin: 0;
  color: var(--muted);
}

.home-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-domain-card {
  position: relative;
  min-height: 310px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 27px;
  color: inherit;
  background: rgba(255, 255, 255, .72);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-domain-active {
  grid-column: span 2;
  color: white;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(221, 86, 69, .46),
      transparent 32%
    ),
    linear-gradient(135deg, #082b49, #12567f);
  box-shadow: 0 28px 65px rgba(8, 43, 73, .18);
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.home-domain-active:hover {
  transform: translateY(-5px);
  box-shadow: 0 36px 80px rgba(8, 43, 73, .24);
}

.home-domain-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  color: var(--blue);
  background: var(--blue-soft);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 950;
}

.home-domain-active .home-domain-icon {
  color: white;
  background: rgba(255, 255, 255, .14);
}

.home-domain-card span {
  color: var(--blue);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-domain-active span {
  color: rgba(255, 255, 255, .62);
}

.home-domain-card h3 {
  margin: 9px 0 0;
  color: var(--navy);
  font-size: 2rem;
  letter-spacing: -.04em;
}

.home-domain-active h3 {
  color: white;
  font-size: clamp(2.7rem, 5vw, 4.6rem);
}

.home-domain-card p {
  max-width: 520px;
  margin: 12px 0 0;
  color: var(--muted);
}

.home-domain-active p {
  color: rgba(255, 255, 255, .72);
}

.home-domain-card > strong {
  color: white;
  font-size: .85rem;
}

.home-popular-tools {
  padding: 110px max(24px, calc((100vw - 1372px) / 2));
  background: white;
}

.home-popular-tools header {
  margin-bottom: 38px;
}

.home-popular-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.home-popular-grid a {
  min-height: 340px;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 28px;
  color: inherit;
  background: #f8fafb;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.home-popular-grid a:hover {
  transform: translateY(-5px);
  background: white;
  box-shadow: 0 24px 55px rgba(8, 43, 73, .12);
}

.home-popular-grid span {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-popular-grid h3 {
  margin: 45px 0 0;
  color: var(--navy);
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.home-popular-grid p {
  max-width: 560px;
  margin: 17px 0 0;
  color: var(--muted);
}

.home-popular-grid strong {
  margin-top: auto;
  padding-top: 35px;
  color: var(--blue);
  font-size: .85rem;
}

.home-product-statement {
  padding: 145px 24px;
  text-align: center;
  background:
    radial-gradient(
      circle at center,
      rgba(66, 155, 205, .13),
      transparent 42%
    ),
    #eff5f8;
}

.home-product-statement h2 {
  max-width: 1050px;
  margin: 0 auto;
}

.home-product-statement > p:last-child {
  max-width: 720px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* Eigenständige Hydraulikseite */

.hydraulic-page-intro {
  padding: 58px max(24px, calc((100vw - 1230px) / 2)) 0;
}

.hydraulic-page-intro h1 {
  margin: 12px 0 0;
  color: var(--navy);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.hydraulic-page-intro p:last-child {
  max-width: 750px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.hydraulic-back-badge {
  color: #0874b9;
  text-decoration: none;
}

@media (max-width: 1050px) {
  .toolbox-home-hero {
    grid-template-columns: 1fr;
  }

  .toolbox-home-visual {
    max-width: 800px;
    width: 100%;
  }

  .home-domains-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .toolbox-home-hero {
    min-height: auto;
    padding: 58px 18px 78px;
  }

  .toolbox-home-copy h1 {
    font-size: 4.1rem;
  }

  .toolbox-home-meta {
    gap: 18px;
  }

  .toolbox-image-frame,
  .toolbox-image-frame img {
    min-height: 330px;
  }

  .toolbox-floating-label {
    display: none;
  }

  .home-domains,
  .home-popular-tools {
    padding: 78px 14px;
  }

  .home-domain-grid,
  .home-popular-grid {
    grid-template-columns: 1fr;
  }

  .home-domain-active {
    grid-column: auto;
  }

  .home-domain-card,
  .home-popular-grid a {
    min-height: 300px;
    border-radius: 21px;
  }

  .home-product-statement {
    padding: 95px 18px;
  }

  .hydraulic-page-intro {
    padding: 42px 18px 0;
  }
}

/* Startseiten-Hero: animierte Hausübersicht */

.home-overview-video-frame {
  position: relative;
  width: min(100%, 800px);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .12);
  border-radius: 38px;
  background: #dfeaf0;
  box-shadow:
    0 35px 80px rgba(8, 43, 73, .18),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.home-overview-video {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
}

.home-overview-caption {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 35px rgba(8, 43, 73, .13);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.home-overview-caption div {
  display: grid;
  gap: 3px;
}

.home-overview-caption span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.home-overview-caption strong {
  color: var(--navy);
  font-size: .92rem;
}

.home-overview-caption a {
  flex: 0 0 auto;
  color: var(--blue);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 950;
}

.home-overview-badge {
  position: absolute;
  z-index: 3;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: var(--navy);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 28px rgba(8, 43, 73, .12);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 900;
}

.home-overview-badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.home-overview-badge-heating {
  top: 20px;
  right: 20px;
}

.home-overview-badge-heating span {
  background: #e45e4f;
}

.home-overview-badge-water {
  top: 74px;
  right: 20px;
}

.home-overview-badge-water span {
  background: #2e8fca;
}

@media (max-width: 700px) {
  .home-overview-video-frame,
  .home-overview-video {
    min-height: 340px;
  }

  .home-overview-caption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .home-overview-badge {
    display: none;
  }
}


/* SHK_FAULT_CODE_SEARCH_CSS_20260803 */

.home-domain-fault-card {
  overflow: hidden;
  isolation: isolate;
  color: white;
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(225, 83, 63, .45),
      transparent 32%
    ),
    linear-gradient(135deg, #091f34, #124c70);
  box-shadow: 0 28px 65px rgba(8, 43, 73, .18);
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.home-domain-fault-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 36px 80px rgba(8, 43, 73, .25);
}

.home-domain-fault-card > video,
.home-domain-fault-shade {
  position: absolute;
  inset: 0;
}

.home-domain-fault-card > video {
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-domain-fault-shade {
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      rgba(4, 22, 36, .94),
      rgba(4, 22, 36, .58) 58%,
      rgba(4, 22, 36, .28)
    );
}

.home-domain-fault-card .home-domain-icon {
  color: white;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(12px);
}

.home-domain-fault-copy span {
  color: rgba(255, 255, 255, .7);
}

.home-domain-fault-copy h3 {
  color: white;
}

.home-domain-fault-copy p {
  color: rgba(255, 255, 255, .78);
}

.home-domain-fault-card > strong {
  color: white;
}

.fault-search-page {
  background: #f4f8fa;
}

.fault-search-hero {
  min-height: 590px;
  padding:
    72px
    max(24px, calc((100vw - 1372px) / 2));
  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(221, 86, 69, .14),
      transparent 31%
    ),
    linear-gradient(145deg, #fbfdfe, #eaf2f6);
  display: grid;
  grid-template-columns:
    minmax(0, .82fr)
    minmax(440px, 1fr);
  align-items: center;
  gap: 70px;
}

.fault-search-hero h1 {
  margin: 22px 0 0;
  color: var(--navy);
  font-size: clamp(3.8rem, 7vw, 7.3rem);
  line-height: .88;
  letter-spacing: -.07em;
}

.fault-search-hero > div:first-child > p:last-child {
  max-width: 660px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.fault-search-hero-media {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .14);
  border-radius: 34px;
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(225, 83, 63, .34),
      transparent 26%
    ),
    linear-gradient(135deg, #061a2b, #143f5b);
  box-shadow: 0 34px 75px rgba(8, 43, 73, .2);
}

.fault-search-hero-media video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fault-search-hero-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: white;
}

.fault-search-hero-fallback span {
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 950;
  letter-spacing: -.06em;
}

.fault-search-hero-fallback strong {
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fault-search-workspace {
  padding:
    72px
    max(24px, calc((100vw - 1200px) / 2))
    120px;
}

.fault-search-form {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 27px;
  background: white;
  box-shadow: 0 22px 55px rgba(8, 43, 73, .09);
}

.fault-search-form > label {
  display: block;
  margin-bottom: 12px;
  color: var(--navy);
  font-size: .8rem;
  font-weight: 900;
}

.fault-search-fields {
  display: grid;
  grid-template-columns:
    minmax(210px, .42fr)
    minmax(260px, 1fr)
    auto;
  align-items: end;
  gap: 12px;
}

.fault-search-field {
  display: grid;
  gap: 8px;
}

.fault-search-field > span {
  color: var(--navy);
  font-size: .76rem;
  font-weight: 900;
}

.fault-search-form input,
.fault-search-form select {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid rgba(8, 43, 73, .18);
  border-radius: 15px;
  color: var(--navy);
  background: #f8fafb;
  font: inherit;
  font-size: 1rem;
}

.fault-search-form input:focus,
.fault-search-form select:focus {
  outline: 3px solid rgba(27, 116, 166, .17);
  border-color: var(--blue);
}

.fault-search-form > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.fault-search-results {
  margin-top: 48px;
  display: grid;
  gap: 22px;
}

.fault-results-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.fault-results-heading h2 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: clamp(2.3rem, 5vw, 4rem);
  letter-spacing: -.05em;
}

.fault-results-heading > span {
  color: var(--muted);
  font-size: .8rem;
}

.fault-search-intro,
.fault-no-results,
.fault-result-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 27px;
  background: white;
  box-shadow: 0 20px 50px rgba(8, 43, 73, .07);
}

.fault-search-intro span,
.fault-no-results > span {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fault-search-intro h2,
.fault-no-results h2 {
  max-width: 760px;
  margin: 13px 0 0;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.fault-search-intro p,
.fault-no-results p {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--muted);
}

.fault-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.fault-result-header > div > span {
  color: var(--blue);
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fault-result-header h2 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.fault-status {
  max-width: 310px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.fault-status-checked {
  color: #17663b;
  background: #e0f4e8;
}

.fault-status-pending {
  color: #835e05;
  background: #fff0bf;
}

.fault-meaning {
  margin-top: 28px;
  padding: 22px;
  border-radius: 19px;
  background: #f2f7fa;
}

.fault-meaning > span {
  color: var(--blue);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fault-meaning p {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.65;
}

.fault-causes {
  margin-top: 28px;
}

.fault-causes > header {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.fault-causes h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.2rem;
}

.fault-causes > header > span {
  color: var(--muted);
  font-size: .75rem;
}

.fault-cause-item {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
}

.fault-cause-item + .fault-cause-item {
  margin-top: 12px;
}

.fault-cause-item > span {
  color: var(--blue);
  font-size: .7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.fault-cause-item > p,
.fault-measure p,
.fault-empty-text {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.fault-measure {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.fault-measure strong {
  color: var(--navy);
}

.fault-locked-panel {
  position: relative;
  margin-top: 14px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .12);
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      rgba(234, 242, 246, .95),
      rgba(255, 255, 255, .98)
    );
}

.fault-locked-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(8, 43, 73, .025) 0,
      rgba(8, 43, 73, .025) 8px,
      transparent 8px,
      transparent 16px
    );
  pointer-events: none;
}

.fault-locked-panel > * {
  position: relative;
}

.fault-locked-panel span {
  color: var(--blue);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fault-locked-panel strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.15rem;
}

.fault-locked-panel p {
  max-width: 700px;
  margin: 12px 0 18px;
  color: var(--muted);
}

.fault-source {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.fault-source summary {
  color: var(--blue);
  cursor: pointer;
  font-weight: 900;
}

.fault-source dl {
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.fault-source dl > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
}

.fault-source dt {
  color: var(--muted);
  font-size: .8rem;
}

.fault-source dd {
  margin: 0;
  color: var(--navy);
}

@media (max-width: 900px) {
  .fault-search-hero {
    min-height: 0;
    padding-top: 48px;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .fault-search-hero-media {
    min-height: 330px;
  }
}

@media (max-width: 700px) {
  .fault-search-hero,
  .fault-search-workspace {
    padding-right: 14px;
    padding-left: 14px;
  }

  .fault-search-hero h1 {
    font-size: 3.5rem;
  }

  .fault-search-form,
  .fault-search-intro,
  .fault-no-results,
  .fault-result-card {
    padding: 22px;
    border-radius: 21px;
  }

  .fault-search-fields {
    grid-template-columns: 1fr;
  }

  .fault-search-fields .button {
    width: 100%;
  }

  .fault-result-header,
  .fault-results-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .fault-status {
    max-width: none;
    text-align: left;
  }

  .fault-source dl > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* =========================================================
   Interaktiver Gliederheizkörper-Rechner
   ========================================================= */

.radiator-calculator-page {
  background: #f5f8fa;
}

.radiator-calculator-hero {
  min-height: 680px;
  padding: 80px clamp(24px, 7vw, 110px);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 83% 18%,
      rgba(221, 86, 69, .13),
      transparent 31%
    ),
    linear-gradient(145deg, #fbfdfe, #edf4f8);
  display: grid;
  grid-template-columns:
    minmax(0, .88fr)
    minmax(470px, 1fr);
  align-items: center;
  gap: 70px;
}

.radiator-calculator-copy h1 {
  max-width: 850px;
  margin: 14px 0 0;
  color: var(--navy);
  font-size: clamp(3.7rem, 7vw, 7.4rem);
  line-height: .87;
  letter-spacing: -.075em;
}

.radiator-calculator-copy > p:not(.eyebrow) {
  max-width: 690px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.6;
}

.radiator-calculator-highlights {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.radiator-calculator-highlights span {
  min-width: 118px;
  color: var(--muted);
  display: grid;
  gap: 3px;
  font-size: .73rem;
}

.radiator-calculator-highlights strong {
  color: var(--navy);
  font-size: 1rem;
}

.radiator-calculator-video {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .11);
  border-radius: 36px;
  background: #e7f0f4;
  box-shadow: 0 35px 80px rgba(8, 43, 73, .17);
}

.radiator-calculator-video video {
  width: 100%;
  height: 100%;
  min-height: 470px;
  display: block;
  object-fit: cover;
}

.radiator-video-caption {
  position: absolute;
  right: 17px;
  bottom: 17px;
  left: 17px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 17px;
  background: rgba(255, 255, 255, .89);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 35px rgba(8, 43, 73, .12);
  display: grid;
  gap: 3px;
}

.radiator-video-caption span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.radiator-video-caption strong {
  color: var(--navy);
  font-size: .9rem;
}

.radiator-calculator-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 110px 24px 125px;
}

.radiator-calculator-heading {
  margin-bottom: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  align-items: end;
  gap: 60px;
}

.radiator-calculator-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.06em;
}

.radiator-calculator-heading > p {
  margin: 0;
  color: var(--muted);
}

.radiator-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, .82fr);
  gap: 24px;
  align-items: start;
}

.radiator-input-card,
.radiator-result-card {
  padding: clamp(24px, 3.2vw, 42px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  box-shadow: 0 24px 60px rgba(8, 43, 73, .08);
}

.radiator-result-card {
  position: sticky;
  top: 18px;
}

.radiator-card-heading {
  margin-bottom: 27px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.radiator-card-heading > span {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 13px;
  color: white;
  background: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 950;
}

.radiator-result-card .radiator-card-heading > span {
  background: var(--green);
}

.radiator-card-heading h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.22rem;
}

.radiator-card-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .86rem;
}

.radiator-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}

.radiator-selection-preview {
  margin-top: 26px;
  padding: 19px;
  border: 1px solid rgba(20, 117, 177, .14);
  border-radius: 16px;
  background: var(--blue-soft);
  display: grid;
  gap: 4px;
}

.radiator-selection-preview span {
  color: var(--blue);
  font-size: .69rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.radiator-selection-preview strong {
  color: var(--navy);
  font-size: 1rem;
}

.radiator-live-status {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 15px;
  display: grid;
  gap: 3px;
}

.radiator-live-status-good {
  color: #126344;
  background: var(--green-soft);
}

.radiator-live-status-danger {
  color: #9a3028;
  background: #fde9e6;
}

.radiator-live-status strong {
  font-size: .9rem;
}

.radiator-live-status span {
  font-size: .79rem;
  line-height: 1.45;
}

.radiator-source {
  margin: 23px 0 0;
  padding: 16px 17px;
  border-left: 4px solid var(--blue);
  color: var(--muted);
  background: #f4f8fa;
  font-size: .78rem;
  line-height: 1.55;
}

.radiator-main-result {
  padding: 25px;
  border-radius: 19px;
  color: white;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(221, 86, 69, .42),
      transparent 38%
    ),
    linear-gradient(135deg, var(--navy), #13557e);
}

.radiator-main-result span,
.radiator-main-result strong {
  display: block;
}

.radiator-main-result span {
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  font-weight: 900;
}

.radiator-main-result strong {
  margin-top: 6px;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.radiator-result-list {
  margin: 20px 0 0;
}

.radiator-result-list div {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.radiator-result-list dt {
  color: var(--muted);
}

.radiator-result-list dd {
  margin: 0;
  color: var(--navy);
  text-align: right;
  font-weight: 900;
}

.radiator-visual-frame {
  position: relative;
  min-height: 245px;
  margin-top: 24px;
  padding: 38px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(224, 92, 71, .13),
      transparent 38%
    ),
    linear-gradient(180deg, #f8fbfd, #eaf2f6);
  display: grid;
  place-items: center;
}

.radiator-live-visual {
  position: relative;
  z-index: 2;
  min-height: 164px;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.radiator-live-visual span {
  width: clamp(
    7px,
    calc(330px / var(--visible-sections)),
    18px
  );
  height: 158px;
  border: 2px solid #9daab2;
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      #c6d0d6 0%,
      #ffffff 47%,
      #aebbc2 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    0 7px 14px rgba(8, 43, 73, .08);
  animation:
    radiatorSectionEnter .38s
    cubic-bezier(.2, .8, .2, 1)
    both;
  animation-delay: var(--radiator-delay);
}

.radiator-live-visual span.is-invalid {
  border-color: #d8685e;
  background:
    linear-gradient(
      90deg,
      #e5b2ad,
      white,
      #d8918a
    );
}

@keyframes radiatorSectionEnter {
  from {
    opacity: 0;
    transform: translateX(12px) scale(.92);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.radiator-flow-line {
  position: absolute;
  z-index: 1;
  right: 9%;
  left: 9%;
  height: 9px;
  border-radius: 999px;
}

.radiator-flow-hot {
  top: 24px;
  background: rgba(224, 81, 65, .76);
}

.radiator-flow-cold {
  bottom: 24px;
  background: rgba(45, 143, 202, .72);
}

.radiator-flow-line i {
  position: absolute;
  top: 1px;
  width: 7px;
  height: 7px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  animation: radiatorFlow 2s linear infinite;
}

.radiator-flow-hot i {
  transform: rotate(45deg);
}

.radiator-flow-cold i {
  transform: rotate(225deg);
}

.radiator-flow-line i:nth-child(1) {
  left: 15%;
}

.radiator-flow-line i:nth-child(2) {
  left: 48%;
  animation-delay: -.65s;
}

.radiator-flow-line i:nth-child(3) {
  left: 80%;
  animation-delay: -1.3s;
}

@keyframes radiatorFlow {
  0% {
    opacity: .25;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: .25;
  }
}

.radiator-formula-box {
  margin-top: 18px;
  padding: 17px;
  border-radius: 15px;
  color: var(--navy);
  background: #f2f6f8;
  display: grid;
  gap: 6px;
  text-align: center;
}

.radiator-formula-box span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.radiator-formula-box strong {
  font-size: 1.12rem;
}

@media (max-width: 1050px) {
  .radiator-calculator-hero,
  .radiator-calculator-layout {
    grid-template-columns: 1fr;
  }

  .radiator-calculator-video {
    max-width: 800px;
    width: 100%;
  }

  .radiator-calculator-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .radiator-result-card {
    position: static;
  }
}

@media (max-width: 700px) {
  .radiator-calculator-hero {
    min-height: auto;
    padding: 55px 18px 75px;
  }

  .radiator-calculator-copy h1 {
    font-size: 4rem;
  }

  .radiator-calculator-video,
  .radiator-calculator-video video {
    min-height: 320px;
  }

  .radiator-calculator-section {
    padding: 78px 14px 95px;
  }

  .radiator-calculator-layout {
    gap: 16px;
  }

  .radiator-input-card,
  .radiator-result-card {
    padding: 21px;
    border-radius: 21px;
  }

  .radiator-input-grid {
    grid-template-columns: 1fr;
  }

  .radiator-calculator-highlights {
    gap: 18px;
  }

  .radiator-visual-frame {
    padding-right: 14px;
    padding-left: 14px;
  }
}


/* SHK-MATHE RADIATOR EXCHANGE 20260801 */

[hidden] {
  display: none !important;
}

.radiator-mode-switch {
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 7px;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 55px rgba(16, 42, 62, .08);
  backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.radiator-mode-switch button {
  min-height: 96px;
  padding: 18px 20px;
  border: 0;
  border-radius: 17px;
  color: var(--navy);
  background: transparent;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  text-align: left;
  cursor: pointer;
  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.radiator-mode-switch button:hover {
  transform: translateY(-1px);
}

.radiator-mode-switch button.is-active {
  color: white;
  background:
    linear-gradient(
      135deg,
      #082b49,
      #0d5278
    );
  box-shadow: 0 14px 30px rgba(8, 43, 73, .22);
}

.radiator-mode-switch button > span {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #0b5b82;
  background: #e8f3f8;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 950;
}

.radiator-mode-switch button.is-active > span {
  color: #082b49;
  background: white;
}

.radiator-mode-switch strong {
  font-size: 1rem;
  line-height: 1.25;
}

.radiator-mode-switch small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.radiator-mode-switch button.is-active small {
  color: rgba(255, 255, 255, .72);
}

.radiator-exchange-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: 24px;
  align-items: start;
}

.radiator-exchange-measure {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.radiator-exchange-measure > div {
  min-height: 92px;
  padding: 15px;
  border: 1px solid rgba(8, 43, 73, .09);
  border-radius: 16px;
  background: #f5f8fa;
  display: grid;
  align-content: center;
  gap: 6px;
}

.radiator-exchange-measure span {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.radiator-exchange-measure strong {
  color: var(--navy);
  font-size: 1.05rem;
}

.radiator-exchange-comparison {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radiator-exchange-comparison > div {
  padding: 17px;
  border: 1px solid rgba(8, 43, 73, .09);
  border-radius: 16px;
  background: #f4f7f9;
  display: grid;
  gap: 6px;
}

.radiator-exchange-comparison span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.radiator-exchange-comparison strong {
  color: var(--navy);
  font-size: 1.45rem;
}

@media (max-width: 1050px) {
  .radiator-exchange-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .radiator-mode-switch {
    grid-template-columns: 1fr;
  }

  .radiator-mode-switch button {
    min-height: 88px;
  }

  .radiator-exchange-measure {
    grid-template-columns: 1fr;
  }

  .radiator-exchange-comparison {
    grid-template-columns: 1fr;
  }
}


/* SHK-MATHE DRUCKVERLUST VIDEO 20260801 */

.heating-pressure-card {
  position: relative;
  min-height: 480px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(340px, 1.12fr);
  background:
    linear-gradient(
      135deg,
      #071e31,
      #0a3a59
    );
}

.heating-pressure-card .heating-feature-copy {
  position: relative;
  z-index: 2;
  padding: 38px;
  align-self: center;
}

.heating-pressure-card .heating-card-number {
  color: #082b49;
  background: rgba(255, 255, 255, .94);
}

.heating-pressure-card .heating-card-category {
  color: rgba(255, 255, 255, .62);
}

.heating-pressure-card h3 {
  color: white;
}

.heating-pressure-card .heating-feature-copy > p:not(
  .heating-card-category
) {
  color: rgba(255, 255, 255, .74);
}

.heating-pressure-card .heating-coming-label {
  color: white;
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
}

.heating-pressure-media {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: #061725;
}

.heating-pressure-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #082b49 0%,
      rgba(8, 43, 73, .42) 14%,
      transparent 42%
    ),
    linear-gradient(
      0deg,
      rgba(3, 16, 27, .72),
      transparent 42%
    );
}

.heating-pressure-media video {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}

.heating-pressure-caption {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 24px;
  left: 25px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  color: white;
  background: rgba(5, 25, 40, .58);
  backdrop-filter: blur(16px);
  display: grid;
  gap: 5px;
}

.heating-pressure-caption span {
  color: rgba(255, 255, 255, .65);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.heating-pressure-caption strong {
  font-size: .93rem;
  line-height: 1.35;
}

@media (max-width: 950px) {
  .heating-pressure-card {
    grid-template-columns: 1fr;
  }

  .heating-pressure-media,
  .heating-pressure-media video {
    min-height: 360px;
  }

  .heating-pressure-media::after {
    background:
      linear-gradient(
        0deg,
        rgba(3, 16, 27, .72),
        transparent 50%
      );
  }
}

@media (max-width: 700px) {
  .heating-pressure-card {
    min-height: auto;
  }

  .heating-pressure-card .heating-feature-copy {
    padding: 28px 24px;
  }

  .heating-pressure-media,
  .heating-pressure-media video {
    min-height: 300px;
  }

  .heating-pressure-caption {
    right: 15px;
    bottom: 15px;
    left: 15px;
  }
}

/* SHK-MATHE DRUCKVERLUST LAYOUT FIX 20260801 */

.heating-pressure-card {
  grid-column: 1 / -1;
  min-height: 500px;
  grid-template-columns:
    minmax(360px, .78fr)
    minmax(0, 1.22fr);
}

.heating-pressure-card .heating-feature-copy {
  min-width: 0;
  padding: 46px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.heating-pressure-card .heating-feature-copy h3 {
  margin: 10px 0 18px;
  max-width: 100%;
  font-size: clamp(3.2rem, 5.1vw, 5.7rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.heating-pressure-card
.heating-feature-copy
> p:not(.heating-card-category) {
  max-width: 420px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
}

.heating-pressure-card .heating-coming-label {
  position: static;
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.heating-pressure-media {
  min-width: 0;
  min-height: 500px;
}

.heating-pressure-media video {
  min-height: 500px;
  object-position: center center;
}

.heating-pressure-media::after {
  background:
    linear-gradient(
      90deg,
      #082b49 0%,
      rgba(8, 43, 73, .68) 8%,
      rgba(8, 43, 73, .12) 31%,
      transparent 52%
    ),
    linear-gradient(
      0deg,
      rgba(3, 16, 27, .72),
      transparent 42%
    );
}

.heating-pressure-caption {
  right: 28px;
  bottom: 26px;
  left: auto;
  width: min(350px, calc(100% - 56px));
}

@media (max-width: 950px) {
  .heating-pressure-card {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .heating-pressure-card .heating-feature-copy {
    padding: 38px 34px;
  }

  .heating-pressure-card .heating-feature-copy h3 {
    font-size: clamp(3.4rem, 10vw, 5rem);
  }

  .heating-pressure-media,
  .heating-pressure-media video {
    min-height: 390px;
  }

  .heating-pressure-media::after {
    background:
      linear-gradient(
        0deg,
        rgba(3, 16, 27, .74),
        transparent 52%
      );
  }
}

@media (max-width: 700px) {
  .heating-pressure-card .heating-feature-copy {
    padding: 30px 24px 34px;
  }

  .heating-pressure-card .heating-feature-copy h3 {
    font-size: 3.55rem;
  }

  .heating-pressure-card
  .heating-feature-copy
  > p:not(.heating-card-category) {
    font-size: .96rem;
  }

  .heating-pressure-media,
  .heating-pressure-media video {
    min-height: 310px;
  }

  .heating-pressure-caption {
    right: 15px;
    bottom: 15px;
    left: 15px;
    width: auto;
  }
}

/* SHK-MATHE DRUCKVERLUST CARD RESET 20260801 */

.heating-pressure-card {
  grid-column: auto;
  min-width: 0;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 215px;
  background:
    linear-gradient(
      145deg,
      #07263d,
      #0a3d5d
    );
}

.heating-pressure-card .heating-feature-copy {
  min-width: 0;
  padding: 38px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.heating-pressure-card .heating-feature-copy h3 {
  margin: 10px 0 18px;
  max-width: 100%;
  font-size: clamp(3rem, 4.3vw, 4.35rem);
  line-height: .94;
  letter-spacing: -.05em;
  overflow-wrap: normal;
  word-break: normal;
}

.heating-pressure-card
.heating-feature-copy
> p:not(.heating-card-category) {
  max-width: 470px;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 1rem;
  line-height: 1.55;
}

.heating-pressure-card .heating-coming-label {
  position: static;
  margin-top: auto;
  transform: translateY(8px);
  display: inline-flex;
  width: auto;
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 999px;
}

.heating-pressure-media {
  position: relative;
  min-width: 0;
  min-height: 215px;
  height: 215px;
  overflow: hidden;
}

.heating-pressure-media video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 53%;
}

.heating-pressure-media::after {
  background:
    linear-gradient(
      0deg,
      rgba(3, 17, 28, .72),
      transparent 54%
    );
}

.heating-pressure-caption {
  right: 18px;
  bottom: 16px;
  left: 18px;
  width: auto;
  padding: 13px 15px;
  border-radius: 14px;
}

.heating-pressure-caption strong {
  font-size: .84rem;
}

@media (max-width: 950px) {
  .heating-pressure-card {
    grid-column: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto 240px;
  }

  .heating-pressure-media,
  .heating-pressure-media video {
    min-height: 0;
    height: 240px;
  }
}

@media (max-width: 700px) {
  .heating-pressure-card {
    min-height: auto;
    grid-template-rows: auto 220px;
  }

  .heating-pressure-card .heating-feature-copy {
    padding: 30px 25px 28px;
  }

  .heating-pressure-card .heating-feature-copy h3 {
    font-size: 3.2rem;
  }

  .heating-pressure-media,
  .heating-pressure-media video {
    height: 220px;
  }
}

/* SHK-MATHE AUSTAUSCHRECHNER TYPO FIX 20260801 */

.radiator-exchange-layout .radiator-main-result {
  padding: 26px 28px 29px;
  min-height: 205px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.radiator-exchange-layout .radiator-main-result > span {
  margin-bottom: 12px;
  font-size: .72rem;
  line-height: 1.2;
  letter-spacing: .04em;
}

.radiator-exchange-layout .radiator-main-result > strong {
  max-width: 100%;
  font-size: clamp(2.35rem, 3.5vw, 4rem);
  line-height: .98;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.radiator-exchange-measure > div {
  min-width: 0;
  padding: 15px 14px;
}

.radiator-exchange-measure span {
  display: block;
  max-width: 100%;
  font-size: .64rem;
  line-height: 1.35;
  letter-spacing: .065em;
  overflow-wrap: anywhere;
}

.radiator-exchange-measure strong {
  font-size: 1rem;
  line-height: 1.25;
}

.radiator-exchange-layout .radiator-card-heading h3 {
  font-size: 1.2rem;
  line-height: 1.2;
}

.radiator-exchange-layout .radiator-card-heading p {
  font-size: .88rem;
  line-height: 1.45;
}

.radiator-exchange-layout .radiator-result-list dt {
  font-size: .94rem;
}

.radiator-exchange-layout .radiator-result-list dd {
  font-size: 1rem;
}

.radiator-exchange-layout .radiator-selection-preview strong {
  font-size: .96rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .radiator-exchange-layout .radiator-main-result > strong {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
  }
}

@media (max-width: 700px) {
  .radiator-exchange-layout .radiator-main-result {
    min-height: auto;
    padding: 23px;
  }

  .radiator-exchange-layout .radiator-main-result > strong {
    font-size: 2.45rem;
  }

  .radiator-exchange-measure span {
    font-size: .68rem;
  }
}

/* SHK-MATHE RAUMHEIZLAST 20260801 */

.heating-room-card {
  color: var(--navy);
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(92, 189, 210, .22),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #f8fbfc,
      #e7f1f4
    );
}

.room-heating-visual {
  position: relative;
  min-height: 510px;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(105, 194, 218, .34),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #081f34,
      #0b4665
    );
  box-shadow: 0 35px 90px rgba(8, 43, 73, .23);
}

.room-outline {
  position: absolute;
  inset: 9% 8% 18%;
  border: 3px solid rgba(255, 255, 255, .42);
  border-top-width: 8px;
  perspective: 700px;
}

.room-window {
  position: absolute;
  top: 9%;
  right: 9%;
  width: 42%;
  height: 38%;
  border: 5px solid rgba(255, 255, 255, .75);
  background:
    linear-gradient(
      135deg,
      rgba(147, 221, 240, .5),
      rgba(255, 255, 255, .12)
    );
}

.room-window::before,
.room-window::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .65);
}

.room-window::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
}

.room-window::after {
  right: 0;
  bottom: 50%;
  left: 0;
  height: 4px;
}

.room-radiator {
  position: absolute;
  right: 11%;
  bottom: 8%;
  width: 48%;
  height: 24%;
  border: 4px solid rgba(255, 255, 255, .86);
  border-radius: 7px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .86) 0,
      rgba(255, 255, 255, .86) 9px,
      rgba(169, 218, 230, .46) 9px,
      rgba(169, 218, 230, .46) 15px
    );
  box-shadow: 0 0 38px rgba(255, 159, 88, .24);
}

.room-heat-wave {
  position: absolute;
  right: 23%;
  width: 28%;
  height: 26%;
  border: 3px solid rgba(255, 174, 104, .72);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 50%;
  animation: roomHeatRise 3s ease-in-out infinite;
}

.wave-one {
  bottom: 29%;
}

.wave-two {
  bottom: 38%;
  animation-delay: -1s;
}

.wave-three {
  bottom: 47%;
  animation-delay: -2s;
}

@keyframes roomHeatRise {
  0%,
  100% {
    opacity: .25;
    transform: translateY(8px) scale(.86);
  }

  50% {
    opacity: 1;
    transform: translateY(-8px) scale(1);
  }
}

.room-checkbox-field {
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 43, 73, .11);
  border-radius: 14px;
  background: #f5f8fa;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.room-checkbox-field input {
  width: 20px;
  height: 20px;
  accent-color: #0b5b82;
}

.room-checkbox-field span {
  color: var(--navy);
  font-size: .87rem;
  line-height: 1.35;
}

.room-checkbox-field strong {
  display: block;
  margin-top: 3px;
  color: #0b6b91;
}

.room-divider {
  height: 1px;
  margin: 28px 0;
  background: rgba(8, 43, 73, .1);
}

.room-load-overview {
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.room-load-overview > div {
  padding: 16px;
  border: 1px solid rgba(8, 43, 73, .09);
  border-radius: 15px;
  background: #f4f7f9;
  display: grid;
  gap: 6px;
}

.room-load-overview span,
.room-radiator-recommendation span,
.room-valve-result span {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.room-load-overview strong {
  color: var(--navy);
  font-size: 1.32rem;
}

.room-radiator-recommendation {
  margin: 16px 0;
  padding: 21px;
  border-radius: 17px;
  color: white;
  background:
    linear-gradient(
      135deg,
      #0b4a6d,
      #0c7792
    );
  display: grid;
  gap: 9px;
}

.room-radiator-recommendation span {
  color: rgba(255, 255, 255, .66);
}

.room-radiator-recommendation strong {
  font-size: 1.35rem;
  line-height: 1.2;
}

.room-valve-result {
  margin-top: 17px;
  padding: 19px;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 16px;
  background: #eef5f7;
  display: grid;
  gap: 8px;
}

.room-valve-result strong {
  color: var(--navy);
  font-size: 1.13rem;
  line-height: 1.3;
}

.radiator-live-status-warning {
  border-color: rgba(215, 145, 53, .25);
  color: #7a521b;
  background: #fff6e8;
}

@media (max-width: 700px) {
  .room-heating-visual {
    min-height: 350px;
  }

  .room-load-overview {
    grid-template-columns: 1fr;
  }
}


/* SHK-MATHE BUDERUS ANSCHLUSSHINWEIS 20260801 */

.room-product-notice,
.room-conversion-notice {
  margin-top: 18px;
  padding: 17px 18px;
  border-radius: 15px;
  display: grid;
  gap: 7px;
}

.room-product-notice {
  border: 1px solid rgba(11, 91, 130, .16);
  color: #083a57;
  background: #edf7fa;
}

.room-conversion-notice {
  border: 1px solid rgba(205, 139, 48, .24);
  color: #694714;
  background: #fff6e7;
}

.room-product-notice strong,
.room-conversion-notice strong {
  font-size: .83rem;
  letter-spacing: .02em;
}

.room-product-notice p,
.room-conversion-notice p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .room-product-notice,
  .room-conversion-notice {
    padding: 15px;
  }
}


/* SHK-MATHE BAUJAHR UND SICHTBARE EINGABEN 20260801 */

.room-heating-page .radiator-input-card {
  overflow: visible;
}

.room-heating-page .radiator-input-card
> .radiator-card-heading:first-child {
  margin: -28px -28px 25px;
  padding: 25px 28px;
  border-radius: 22px 22px 0 0;
  color: white;
  background:
    linear-gradient(
      135deg,
      #073b5c,
      #087b98
    );
}

.room-heating-page .radiator-input-card
> .radiator-card-heading:first-child h3 {
  color: white;
  font-size: 1.45rem;
}

.room-heating-page .radiator-input-card
> .radiator-card-heading:first-child p {
  color: rgba(255, 255, 255, .76);
}

.room-heating-page .radiator-input-card
> .radiator-card-heading:first-child > span {
  color: #073b5c;
  background: white;
}

.room-area-calculator {
  border: 2px solid rgba(8, 113, 148, .28);
  box-shadow: 0 18px 45px rgba(8, 43, 73, .08);
}

.room-area-calculator::before {
  content: "HIER EINGEBEN";
  width: max-content;
  margin-bottom: -5px;
  padding: 6px 10px;
  border-radius: 999px;
  color: white;
  background: #087895;
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.room-highlight-field {
  padding: 15px;
  border: 2px solid rgba(8, 113, 148, .2);
  border-radius: 15px;
  background: #eef7f9;
}

.room-highlight-field > span {
  color: #075271;
  font-weight: 900;
}

.room-custom-factor-field[hidden] {
  display: none;
}

.room-demand-guide {
  margin-top: 25px;
  border: 1px solid rgba(8, 43, 73, .11);
  border-radius: 20px;
  overflow: hidden;
  background: white;
}

.room-demand-guide > header {
  padding: 22px;
  color: white;
  background:
    linear-gradient(
      135deg,
      #082f4c,
      #0b607e
    );
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(260px, 1.2fr);
  gap: 25px;
  align-items: end;
}

.room-demand-guide header span {
  color: rgba(255, 255, 255, .67);
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.room-demand-guide header h3 {
  margin: 5px 0 0;
  color: white;
  font-size: 1.35rem;
}

.room-demand-guide header p {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: .82rem;
  line-height: 1.5;
}

.room-demand-table {
  display: grid;
}

.room-demand-row {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(8, 43, 73, .08);
  display: grid;
  grid-template-columns:
    minmax(130px, 1.1fr)
    minmax(120px, .8fr)
    minmax(150px, 1fr);
  gap: 15px;
  align-items: center;
  font-size: .82rem;
}

.room-demand-row:last-child {
  border-bottom: 0;
}

.room-demand-row:nth-child(even) {
  background: #f5f8f9;
}

.room-demand-row strong {
  color: #082f4c;
}

.room-demand-head {
  color: #667985;
  background: #eaf1f3 !important;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.room-demand-warning {
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid rgba(196, 127, 31, .2);
  color: #704b16;
  background: #fff5e5;
  font-size: .76rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .room-heating-page .radiator-input-card
  > .radiator-card-heading:first-child {
    margin: -22px -18px 22px;
    padding: 22px 18px;
  }

  .room-demand-guide > header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .room-demand-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .room-demand-head {
    display: none;
  }
}

/* SHK-MATHE RAUMHEIZLAST VIDEO AUFHEIZEN 20260801 */

.room-heating-visual {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  isolation: isolate;
  background: #071f33;
}

.room-heating-visual > video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 510px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.room-heating-video-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3, 18, 30, .05) 42%,
      rgba(3, 18, 30, .72) 100%
    );
}

.room-heating-visual .radiator-video-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  margin: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
  .room-heating-visual,
  .room-heating-visual > video {
    min-height: 350px;
  }

  .room-heating-visual .radiator-video-caption {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }
}

/* SHK-MATHE RAUMHEIZLAST VIDEO AUFHEIZEN 20260801 */

.room-heating-visual {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  isolation: isolate;
  background: #071f33;
}

.room-heating-visual > video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 510px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.room-heating-video-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3, 18, 30, .05) 42%,
      rgba(3, 18, 30, .72) 100%
    );
}

.room-heating-visual .radiator-video-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  margin: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
  .room-heating-visual,
  .room-heating-visual > video {
    min-height: 350px;
  }

  .room-heating-visual .radiator-video-caption {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }
}

/* SHK-MATHE AUFHEIZZEIT VIDEO 20260801 */

.heating-warmup-card {
  min-width: 0;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 215px;
  background:
    linear-gradient(
      145deg,
      #3b1f10,
      #8b3f13
    );
}

.heating-warmup-card .heating-feature-copy {
  min-width: 0;
  padding: 38px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heating-warmup-card .heating-feature-copy h3 {
  margin: 10px 0 18px;
  max-width: 100%;
  font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: .96;
  letter-spacing: -.045em;
}

.heating-warmup-card
.heating-feature-copy
> p:not(.heating-card-category) {
  max-width: 470px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 1rem;
  line-height: 1.55;
}

.heating-warmup-card .heating-coming-label {
  position: static;
  margin-top: auto;
  transform: translateY(8px);
}

.heating-warmup-media {
  position: relative;
  min-width: 0;
  min-height: 215px;
  height: 215px;
  overflow: hidden;
  background: #2d160a;
}

.heating-warmup-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.heating-warmup-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      0deg,
      rgba(31, 13, 4, .72),
      transparent 55%
    );
}

.heating-warmup-caption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  color: white;
  background: rgba(38, 16, 6, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  gap: 4px;
}

.heating-warmup-caption span {
  color: rgba(255, 255, 255, .62);
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.heating-warmup-caption strong {
  font-size: .84rem;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .heating-warmup-card {
    min-height: auto;
    grid-template-rows: auto 220px;
  }

  .heating-warmup-card .heating-feature-copy {
    padding: 30px 25px 28px;
  }

  .heating-warmup-card .heating-feature-copy h3 {
    font-size: 3rem;
  }

  .heating-warmup-media,
  .heating-warmup-media video {
    height: 220px;
  }
}

/* SHK-MATHE HEIZKOERPERUEBERSICHT VIDEO 20260801 */

.room-heating-visual {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  isolation: isolate;
  background: #071f33;
}

.room-heating-visual > video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 510px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.room-heating-video-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3, 18, 30, .02) 35%,
      rgba(3, 18, 30, .72) 100%
    );
}

.room-heating-visual .radiator-video-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  margin: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
  .room-heating-visual,
  .room-heating-visual > video {
    min-height: 350px;
  }

  .room-heating-visual .radiator-video-caption {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }
}

/* SHK-MATHE RAUMHEIZLAST VIDEO AUF HEIZUNGSUEBERSICHT 20260801 */

.heating-room-card {
  min-width: 0;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  color: white;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 215px;
  background:
    linear-gradient(
      145deg,
      #06314d,
      #08728d
    );
}

.heating-room-card .heating-feature-copy {
  min-width: 0;
  padding: 38px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heating-room-card .heating-feature-copy h3 {
  max-width: 100%;
  margin: 10px 0 18px;
  color: white;
  font-size: clamp(2.7rem, 4vw, 4rem);
  line-height: .96;
  letter-spacing: -.045em;
}

.heating-room-card
.heating-feature-copy
> p:not(.heating-card-category) {
  max-width: 470px;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 1rem;
  line-height: 1.55;
}

.heating-room-card .heating-card-category {
  color: rgba(255, 255, 255, .6);
}

.heating-room-card .heating-card-link {
  margin-top: auto;
  color: white;
}

.heating-room-media {
  position: relative;
  min-width: 0;
  height: 215px;
  overflow: hidden;
  background: #071f33;
}

.heating-room-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.heating-room-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      0deg,
      rgba(2, 18, 29, .76),
      transparent 58%
    );
}

.heating-room-caption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  color: white;
  background: rgba(4, 30, 45, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  gap: 4px;
}

.heating-room-caption span {
  color: rgba(255, 255, 255, .62);
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.heating-room-caption strong {
  font-size: .84rem;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .heating-room-card {
    min-height: auto;
    grid-template-rows: auto 220px;
  }

  .heating-room-card .heating-feature-copy {
    padding: 30px 25px 28px;
  }

  .heating-room-card .heating-feature-copy h3 {
    font-size: 3rem;
  }

  .heating-room-media,
  .heating-room-media video {
    height: 220px;
  }
}

/* SHK-MATHE AUFHEIZZEIT RECHNER 20260801 */

.warmup-calculator-hero {
  background:
    radial-gradient(
      circle at 72% 22%,
      rgba(238, 135, 62, .2),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #fffaf6,
      #f6eee8
    );
}

.warmup-hero-video {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  background: #32170a;
  box-shadow: 0 35px 90px rgba(67, 31, 13, .24);
}

.warmup-hero-video > video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 510px;
  object-fit: cover;
  object-position: center;
}

.warmup-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(34, 13, 3, .02) 35%,
      rgba(34, 13, 3, .76) 100%
    );
}

.warmup-hero-video .radiator-video-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  margin: 0;
}

.warmup-input-card
> .radiator-card-heading:first-child {
  margin: -28px -28px 25px;
  padding: 25px 28px;
  border-radius: 22px 22px 0 0;
  color: white;
  background:
    linear-gradient(
      135deg,
      #5c2912,
      #b4511c
    );
}

.warmup-input-card
> .radiator-card-heading:first-child h3 {
  color: white;
  font-size: 1.4rem;
}

.warmup-input-card
> .radiator-card-heading:first-child p {
  color: rgba(255, 255, 255, .76);
}

.warmup-input-card
> .radiator-card-heading:first-child > span {
  color: #6d3114;
  background: white;
}

.warmup-input-intro {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(163, 77, 27, .16);
  border-radius: 16px;
  background: #fff5ed;
  display: grid;
  gap: 5px;
}

.warmup-input-intro strong {
  color: #713414;
  font-size: .94rem;
}

.warmup-input-intro span {
  color: #765b4d;
  font-size: .82rem;
  line-height: 1.5;
}

.warmup-highlight-field {
  padding: 14px;
  border: 2px solid rgba(177, 82, 28, .22);
  border-radius: 15px;
  background: #fff6ef;
}

.warmup-highlight-field > span {
  color: #7c3918;
  font-weight: 900;
}

.warmup-assumption-card {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 16px;
  background: #f4f7f9;
}

.warmup-assumption-card strong {
  color: var(--navy);
  font-size: .88rem;
}

.warmup-assumption-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

.warmup-formula-guide {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.warmup-formula-guide > div {
  padding: 17px;
  border-radius: 15px;
  color: white;
  background:
    linear-gradient(
      135deg,
      #673015,
      #a64c1d
    );
  display: grid;
  gap: 7px;
}

.warmup-formula-guide span,
.warmup-summary-grid span,
.warmup-calculation-path span {
  color: rgba(255, 255, 255, .66);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.warmup-formula-guide strong {
  font-size: .85rem;
  line-height: 1.45;
}

.warmup-summary-grid {
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.warmup-summary-grid > div {
  padding: 16px;
  border: 1px solid rgba(91, 42, 18, .1);
  border-radius: 15px;
  background: #faf4ef;
  display: grid;
  gap: 6px;
}

.warmup-summary-grid span {
  color: #887268;
}

.warmup-summary-grid strong {
  color: #5e2b13;
  font-size: 1.28rem;
}

.warmup-main-result {
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255, 190, 124, .2),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #54250f,
      #a44a1b
    );
}

.warmup-main-result small {
  margin-top: 8px;
  color: rgba(255, 255, 255, .68);
  font-size: .92rem;
  font-weight: 800;
}

.warmup-calculation-path {
  margin-top: 17px;
  border: 1px solid rgba(91, 42, 18, .11);
  border-radius: 16px;
  overflow: hidden;
}

.warmup-calculation-path > div {
  padding: 16px 18px;
  background: #fbf6f2;
  display: grid;
  gap: 7px;
}

.warmup-calculation-path > div + div {
  border-top: 1px solid rgba(91, 42, 18, .09);
}

.warmup-calculation-path span {
  color: #8b756a;
}

.warmup-calculation-path strong {
  color: #5d2a13;
  font-size: .85rem;
  line-height: 1.5;
}

.heating-warmup-card .heating-card-link {
  margin-top: auto;
  color: white;
}

@media (max-width: 700px) {
  .warmup-hero-video,
  .warmup-hero-video > video {
    min-height: 350px;
  }

  .warmup-input-card
  > .radiator-card-heading:first-child {
    margin: -22px -18px 22px;
    padding: 22px 18px;
  }

  .warmup-formula-guide,
  .warmup-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* SHK-MATHE DRUCKVERLUSTRECHNER 20260802 */

.pressure-loss-page {
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(22, 111, 161, .12),
      transparent 30rem
    ),
    var(--page-bg, #f4f7f9);
}

.pressure-page-intro {
  position: relative;
  overflow: hidden;
}

.pressure-page-intro::after {
  content: "Δp";
  position: absolute;
  right: clamp(24px, 7vw, 100px);
  bottom: -36px;
  color: rgba(8, 43, 73, .055);
  font-size: clamp(9rem, 20vw, 18rem);
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.pressure-calculator-layout {
  align-items: start;
}

.pressure-result-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pressure-result-details dd {
  overflow-wrap: anywhere;
}

#pressure-calculation {
  display: grid;
  gap: 8px;
}

#pressure-calculation div {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(8, 43, 73, .09);
}

#pressure-calculation div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pressure-loss-page input[readonly] {
  color: var(--navy);
  background: rgba(8, 43, 73, .055);
  cursor: default;
}

.pressure-loss-page .pipe-selector-note {
  max-width: 760px;
}

@media (max-width: 700px) {
  .pressure-result-details {
    grid-template-columns: 1fr;
  }

  .pressure-page-intro::after {
    right: 10px;
    bottom: -20px;
    font-size: 9rem;
  }
}


/* SHK-MATHE DRUCKVERLUST EINZELWIDERSTÄNDE 20260802 */

.pressure-fitting-heading {
  margin-top: 34px;
}

.pressure-fittings {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid rgba(8, 43, 73, .12);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .96),
      rgba(238, 245, 249, .92)
    );
}

.pressure-fittings-toolbar {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.pressure-fittings-toolbar h4 {
  margin: 4px 0 0;
  color: var(--navy);
  font-size: 1.25rem;
}

.pressure-add-fitting {
  flex: 0 0 auto;
  min-height: 42px;
  cursor: pointer;
}

.pressure-fitting-columns,
.pressure-fitting-row {
  display: grid;
  grid-template-columns:
    minmax(210px, 1fr)
    minmax(76px, .22fr)
    minmax(100px, .3fr)
    44px;
  gap: 10px;
  align-items: end;
}

.pressure-fitting-columns {
  padding: 0 4px 8px;
  color: rgba(8, 43, 73, .58);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pressure-fitting-rows {
  display: grid;
  gap: 10px;
}

.pressure-fitting-row {
  padding: 12px;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
}

.pressure-fitting-row .field {
  margin: 0;
}

.pressure-fitting-row select,
.pressure-fitting-row input {
  min-height: 46px;
}

.pressure-mobile-label {
  display: none;
}

.pressure-remove-fitting {
  width: 44px;
  height: 46px;
  border: 1px solid rgba(145, 32, 32, .16);
  border-radius: 12px;
  color: #8f2626;
  background: rgba(166, 43, 43, .07);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.pressure-remove-fitting:hover {
  border-color: rgba(145, 32, 32, .3);
  background: rgba(166, 43, 43, .13);
  transform: translateY(-1px);
}

.pressure-fitting-summary {
  margin-top: 16px;
  padding: 15px 17px;
  border-radius: 15px;
  color: white;
  background:
    linear-gradient(
      135deg,
      #082b49,
      #0b476b
    );
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.pressure-fitting-summary span {
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  font-weight: 750;
}

.pressure-fitting-summary strong {
  font-size: 1.05rem;
}

@media (max-width: 760px) {
  .pressure-fittings {
    padding: 18px;
  }

  .pressure-fittings-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .pressure-add-fitting {
    width: 100%;
  }

  .pressure-fitting-columns {
    display: none;
  }

  .pressure-fitting-row {
    grid-template-columns: 1fr 1fr 44px;
    align-items: end;
  }

  .pressure-fitting-type {
    grid-column: 1 / -1;
  }

  .pressure-mobile-label {
    display: block;
  }

  .pressure-fitting-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .pressure-fitting-row {
    grid-template-columns: 1fr 44px;
  }

  .pressure-fitting-row .field:not(
    .pressure-fitting-type
  ) {
    grid-column: 1;
  }

  .pressure-remove-fitting {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: stretch;
    height: auto;
  }
}


/* SHK-MATHE ROHRNETZ-PROJEKT 20260802 */

.pressure-project-notice {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 28px;
  padding: 26px 28px;
  border: 1px solid rgba(8, 43, 73, .12);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .98),
      rgba(229, 241, 248, .94)
    );
  box-shadow: 0 18px 50px rgba(8, 43, 73, .08);
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}

.pressure-project-notice h2 {
  margin: 5px 0 8px;
  color: var(--navy);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.pressure-project-notice p:last-child {
  max-width: 720px;
  margin: 0;
  color: rgba(8, 43, 73, .72);
  line-height: 1.65;
}

.pressure-project-notice .button {
  flex: 0 0 auto;
  text-decoration: none;
}

.pipe-network-page {
  background:
    radial-gradient(
      circle at 88% 6%,
      rgba(24, 119, 172, .13),
      transparent 32rem
    ),
    var(--page-bg, #f4f7f9);
}

.pipe-network-intro {
  position: relative;
  overflow: hidden;
}

.pipe-network-intro::after {
  content: "ΣΔp";
  position: absolute;
  right: clamp(18px, 7vw, 100px);
  bottom: -36px;
  color: rgba(8, 43, 73, .05);
  font-size: clamp(8rem, 19vw, 17rem);
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.pipe-network-workflow,
.pipe-network-foundation,
.pipe-network-technical-note {
  width: min(1180px, calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.pipe-network-workflow {
  padding: 42px 0;
}

.pipe-network-status {
  background: rgba(194, 132, 25, .13);
  color: #8a5a00;
}

.pipe-network-step-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pipe-network-step {
  min-height: 250px;
  padding: 25px;
  border: 1px solid rgba(8, 43, 73, .11);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 40px rgba(8, 43, 73, .07);
  display: flex;
  gap: 17px;
  align-items: flex-start;
}

.pipe-network-step .step-number {
  flex: 0 0 auto;
}

.pipe-network-step-category {
  margin: 2px 0 7px;
  color: rgba(8, 43, 73, .55);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pipe-network-step h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 1.24rem;
}

.pipe-network-step p:last-child {
  margin: 0;
  color: rgba(8, 43, 73, .7);
  line-height: 1.58;
}

.pipe-network-foundation {
  margin-top: 10px;
  padding: 34px;
  border-radius: 28px;
  color: white;
  background:
    linear-gradient(
      135deg,
      #061e31,
      #0b476b
    );
  box-shadow: 0 22px 60px rgba(5, 32, 52, .2);
  display: grid;
  grid-template-columns:
    minmax(0, .9fr)
    minmax(360px, 1.1fr);
  gap: 38px;
  align-items: center;
}

.pipe-network-foundation h2 {
  margin: 7px 0 15px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.pipe-network-foundation-copy > p:not(.eyebrow) {
  max-width: 610px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.7;
}

.pipe-network-foundation .button {
  display: inline-flex;
  text-decoration: none;
}

.pipe-network-diagram {
  min-height: 350px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(2, 18, 30, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.network-node {
  min-width: 170px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  text-align: center;
  font-weight: 850;
  background: rgba(255, 255, 255, .1);
}

.network-source {
  background: rgba(37, 142, 194, .28);
}

.network-distributor {
  background: rgba(255, 255, 255, .14);
}

.network-line-main {
  width: 3px;
  height: 55px;
  background:
    linear-gradient(
      #5fc2ed,
      rgba(95, 194, 237, .3)
    );
}

.network-branches {
  position: relative;
  width: 100%;
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.network-branches::before {
  content: "";
  position: absolute;
  top: -24px;
  right: 16.66%;
  left: 16.66%;
  height: 2px;
  background: rgba(95, 194, 237, .55);
}

.network-branches > div {
  position: relative;
  min-height: 74px;
  padding: 38px 10px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  color: rgba(255, 255, 255, .86);
  text-align: center;
  background: rgba(255, 255, 255, .06);
}

.network-branch-line {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 2px;
  height: 48px;
  background: rgba(95, 194, 237, .55);
  transform: translateX(-50%);
}

.network-branches strong {
  font-size: .82rem;
}

.pipe-network-technical-note {
  margin-top: 28px;
  margin-bottom: 48px;
  padding: 22px 24px;
  border-left: 5px solid #0b6d9d;
  border-radius: 0 18px 18px 0;
  background: rgba(219, 237, 247, .65);
}

.pipe-network-technical-note strong {
  color: var(--navy);
}

.pipe-network-technical-note p {
  margin: 7px 0 0;
  color: rgba(8, 43, 73, .74);
  line-height: 1.65;
}

@media (max-width: 950px) {
  .pipe-network-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipe-network-foundation {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .pressure-project-notice {
    padding: 22px;
    align-items: stretch;
    flex-direction: column;
  }

  .pressure-project-notice .button {
    width: 100%;
    justify-content: center;
  }

  .pipe-network-step-grid {
    grid-template-columns: 1fr;
  }

  .pipe-network-step {
    min-height: auto;
  }

  .pipe-network-foundation {
    padding: 24px;
  }

  .pipe-network-diagram {
    min-height: 320px;
    padding: 22px 14px;
  }

  .network-branches {
    gap: 7px;
  }

  .network-branches strong {
    font-size: .68rem;
  }

  .pipe-network-intro::after {
    right: 5px;
    bottom: -18px;
    font-size: 8rem;
  }
}


/* SHK-MATHE INFO-BUTTONS 20260802 */

.shk-label-with-info {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}

.shk-info-button {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid rgba(11, 109, 157, .3);
  border-radius: 50%;
  color: #0b6d9d;
  background: rgba(11, 109, 157, .08);
  font-size: .72rem;
  font-weight: 950;
  font-style: normal;
  line-height: 19px;
  text-align: center;
  cursor: pointer;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.shk-info-button:hover,
.shk-info-button:focus-visible,
.shk-info-button[aria-expanded="true"] {
  border-color: #0b6d9d;
  color: white;
  background: #0b6d9d;
  transform: translateY(-1px);
  outline: none;
}

.shk-info-popover {
  position: fixed;
  z-index: 9999;
  max-height: min(520px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 19px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  color: white;
  background:
    linear-gradient(
      145deg,
      #061d30,
      #0a3f60
    );
  box-shadow:
    0 22px 60px rgba(1, 17, 29, .3),
    0 0 0 1px rgba(8, 43, 73, .08);
}

.shk-info-popover[hidden] {
  display: none;
}

.shk-info-popover-head {
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.shk-info-popover-head strong {
  font-size: 1.08rem;
  line-height: 1.3;
}

.shk-info-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  color: white;
  background: rgba(255, 255, 255, .08);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.shk-info-explanation {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  line-height: 1.58;
}

.shk-info-formula,
.shk-info-practice {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .065);
}

.shk-info-formula span,
.shk-info-practice > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .56);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.shk-info-formula strong {
  font-size: .94rem;
  font-weight: 800;
}

.shk-info-practice p {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: .86rem;
  line-height: 1.52;
}

.result-details dt.shk-label-with-info {
  justify-content: flex-start;
}

.pipe-network-section-results
.shk-label-with-info {
  align-items: flex-start;
}

@media (max-width: 520px) {
  .shk-info-popover {
    right: 12px;
    left: 12px !important;
    width: auto !important;
  }
}


/* SHK-MATHE INFOFELDER WEITERE RECHNER 20260802 */

.radiator-input-card .shk-label-with-info,
.calculator-card .shk-label-with-info {
  width: fit-content;
}

.radiator-result-list dt.shk-label-with-info,
.result-details dt.shk-label-with-info {
  display: inline-flex;
}

.radiator-main-result .shk-info-button,
.room-valve-result .shk-info-button {
  border-color: rgba(255, 255, 255, .36);
  color: white;
  background: rgba(255, 255, 255, .12);
}

.radiator-main-result
.shk-info-button:hover,
.radiator-main-result
.shk-info-button:focus-visible,
.room-valve-result
.shk-info-button:hover,
.room-valve-result
.shk-info-button:focus-visible {
  border-color: white;
  color: #082b49;
  background: white;
}

@media (max-width: 520px) {
  .shk-label-with-info {
    gap: 5px;
  }

  .shk-info-button {
    width: 23px;
    height: 23px;
    line-height: 21px;
  }
}


/* SHK-MATHE AUTH UND KONTO 20260802 */

.auth-page,
.account-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at top right,
      rgba(18, 101, 153, .20),
      transparent 38rem
    ),
    linear-gradient(
      145deg,
      #061d31 0%,
      #082b49 52%,
      #0c3e64 100%
    );
}

.auth-main,
.account-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 90px;
}

.auth-shell {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(360px, .75fr);
  gap: 64px;
  align-items: center;
  min-height: 650px;
}

.auth-intro {
  color: white;
}

.auth-intro h1,
.account-hero h1 {
  margin: 12px 0 20px;
  max-width: 760px;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.auth-intro > p:not(.eyebrow),
.account-hero > div > p:not(.eyebrow) {
  max-width: 680px;
  color: rgba(255, 255, 255, .76);
  font-size: 1.08rem;
  line-height: 1.75;
}

.auth-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 38px;
}

.auth-benefits > div {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px);
}

.auth-benefits strong,
.auth-benefits span {
  display: block;
}

.auth-benefits strong {
  color: white;
  margin-bottom: 6px;
}

.auth-benefits span {
  color: rgba(255, 255, 255, .65);
  font-size: .9rem;
  line-height: 1.45;
}

.auth-card {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28px;
  background: rgba(248, 251, 253, .97);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
}

.auth-card header > span {
  color: #1476ad;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
}

.auth-card h1,
.auth-card h2 {
  margin: 8px 0 12px;
  color: #082b49;
  line-height: 1.05;
}

.auth-card h2 {
  font-size: 2.35rem;
}

.auth-card header p,
.auth-card > p {
  color: #526476;
  line-height: 1.65;
}

.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.auth-form input {
  width: 100%;
}

.auth-form-links {
  display: flex;
  justify-content: flex-end;
}

.auth-form-links a,
.auth-secondary-link {
  color: #0d6d9e;
  font-weight: 750;
  text-decoration: none;
}

.auth-form-links a:hover,
.auth-secondary-link:hover {
  text-decoration: underline;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.auth-public-note {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid #dce5eb;
  font-size: .9rem;
  text-align: center;
}

.auth-message {
  display: grid;
  gap: 4px;
  margin: 22px 0;
  padding: 16px 18px;
  border-radius: 15px;
  border: 1px solid transparent;
}

.auth-message span {
  line-height: 1.5;
}

.auth-message-error {
  color: #7f1d1d;
  border-color: #fecaca;
  background: #fef2f2;
}

.auth-message-success {
  color: #14532d;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.auth-message-warning {
  color: #78350f;
  border-color: #fde68a;
  background: #fffbeb;
}

.auth-standalone-card {
  width: min(560px, 100%);
  margin: 80px auto;
}

.auth-secondary-link {
  display: block;
  margin-top: 20px;
  text-align: center;
}

.account-main {
  color: white;
}

.account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 42px;
  align-items: end;
  padding: 38px 0 54px;
}

.account-plan-card {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 24px;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(14px);
}

.account-plan-card span,
.account-plan-card strong,
.account-plan-card small {
  display: block;
}

.account-plan-card span {
  color: rgba(255, 255, 255, .64);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.account-plan-card strong {
  margin: 8px 0;
  font-size: 1.5rem;
}

.account-plan-card small {
  color: rgba(255, 255, 255, .7);
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.account-card {
  min-height: 300px;
  padding: 30px;
  color: #163247;
  border-radius: 24px;
  background: rgba(250, 252, 253, .98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .17);
}

.account-card > span {
  color: #1176aa;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .14em;
}

.account-card h2 {
  margin: 12px 0 14px;
  color: #082b49;
}

.account-card p {
  color: #5a6c7b;
  line-height: 1.65;
}

.account-card > a {
  display: inline-block;
  margin-top: 22px;
  color: #0c6f9f;
  font-weight: 800;
  text-decoration: none;
}


/* SHK_PROJECT_WORLD_FULL_CARD_LINKS_CSS_20260803 */
.project-world-link-card {
  position: relative;
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.project-world-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .22);
}

.project-world-link-card > a::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
}

.project-world-link-card > a:focus-visible::after {
  outline: 3px solid #1176aa;
  outline-offset: 4px;
}

.account-data {
  margin: 24px 0 0;
}

.account-data div {
  padding: 12px 0;
  border-bottom: 1px solid #e1e8ed;
}

.account-data dt {
  color: #70808d;
  font-size: .78rem;
}

.account-data dd {
  margin: 4px 0 0;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.account-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.account-permissions span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #0a557b;
  background: #e5f4fb;
  font-size: .76rem;
  font-weight: 750;
}

.account-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .auth-shell,
  .account-hero {
    grid-template-columns: 1fr;
  }

  .auth-shell {
    gap: 36px;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

  .account-plan-card {
    max-width: 420px;
  }
}

@media (max-width: 650px) {
  .auth-main,
  .account-main {
    width: min(100% - 24px, 1180px);
    padding-top: 34px;
  }

  .auth-benefits {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: 26px 20px;
    border-radius: 22px;
  }

  .auth-intro h1,
  .account-hero h1 {
    font-size: clamp(2.5rem, 14vw, 4rem);
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 12px;
}

.footer-legal-links a {
  color: #ffffff;
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
  opacity: .82;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  text-decoration: underline;
  opacity: 1;
}

.legal-content {
  line-height: 1.7;
}

.legal-content h2 {
  margin-top: 32px;
  color: var(--navy);
}

.legal-content address {
  font-style: normal;
  line-height: 1.7;
}

.legal-content a {
  overflow-wrap: anywhere;
}

.legal-content code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--blue-soft);
}

.calculation-disclaimer {
  max-width: 1180px;
  margin: 28px auto 0;
  padding: 20px 22px;
  border: 1px solid rgba(177, 92, 23, .28);
  border-left: 5px solid #b15c17;
  border-radius: 14px;
  background: #fff8ef;
  color: #50351f;
  line-height: 1.6;
}

.calculation-disclaimer strong {
  display: block;
  margin-bottom: 8px;
  color: #7d3e0d;
  font-size: 1rem;
}

.calculation-disclaimer p {
  margin: 8px 0;
}

.calculation-disclaimer a {
  display: inline-block;
  margin-top: 8px;
  color: #713506;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.calculation-disclaimer a:hover,
.calculation-disclaimer a:focus-visible {
  text-decoration-thickness: 2px;
}

@media (max-width: 680px) {
  .calculation-disclaimer {
    margin: 20px 16px 0;
    padding: 17px 18px;
  }
}

.account-capabilities {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.account-capability {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 43, 73, .12);
  border-radius: 10px;
  background: #f7fafc;
}

.account-capability strong {
  font-size: .9rem;
}

.account-capability small {
  color: #647481;
  font-size: .78rem;
}

.account-capability.is-available strong {
  color: #17633a;
}

.account-capability.is-locked {
  background: #f5f5f5;
  opacity: .78;
}

.account-capability.is-locked strong {
  color: #6d7479;
}

.account-feature-locked {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #eef1f3;
  color: #68747c;
  font-size: .8rem;
  font-weight: 700;
}

.account-role-details {
  margin-top: 18px;
}

.account-role-details summary {
  cursor: pointer;
  color: var(--navy);
  font-size: .82rem;
  font-weight: 700;
}

.admin-page {
  min-height: 100vh;
  background:
    linear-gradient(
      180deg,
      #f4f8fb 0,
      #ffffff 420px
    );
  color: #142936;
}

.admin-main {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 70px;
}

.admin-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}

.admin-hero h1 {
  margin: 6px 0 12px;
  color: #082b49;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.admin-hero p {
  max-width: 720px;
}

.admin-identity {
  display: grid;
  gap: 4px;
  min-width: 260px;
  padding: 18px 20px;
  border: 1px solid rgba(8, 43, 73, .12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(8, 43, 73, .07);
}

.admin-identity span,
.admin-identity small {
  color: #687b88;
  font-size: .8rem;
}

.admin-statistics {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.admin-statistics article {
  display: grid;
  gap: 5px;
  padding: 20px;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(8, 43, 73, .055);
}

.admin-statistics span,
.admin-statistics small {
  color: #687b88;
  font-size: .82rem;
}

.admin-statistics strong {
  color: #082b49;
  font-size: 2rem;
}

.admin-section {
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(8, 43, 73, .065);
}

.admin-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(8, 43, 73, .1);
}

.admin-section-header h2 {
  margin: 5px 0 0;
  color: #082b49;
}

.admin-result-count {
  color: #687b88;
  font-size: .85rem;
  font-weight: 700;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 15px 17px;
  border-bottom: 1px solid rgba(8, 43, 73, .08);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  background: #f4f8fb;
  color: #4d6472;
  font-size: .77rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-table td {
  font-size: .88rem;
}

.admin-table td strong,
.admin-table td small,
.admin-table td .admin-record-id {
  display: block;
}

.admin-table td small,
.admin-record-id {
  margin-top: 4px;
  color: #71818b;
  font-size: .76rem;
}

.admin-badge {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 7px;
  background: #e9f1f7;
  color: #082b49;
  font-size: .78rem;
  font-weight: 700;
}

.admin-status-list {
  display: grid;
  gap: 6px;
}

.admin-status-list span {
  width: max-content;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: .74rem;
  font-weight: 700;
}

.admin-status-list .is-positive {
  background: #e7f6ed;
  color: #17633a;
}

.admin-status-list .is-warning {
  background: #fff4d7;
  color: #795800;
}

.admin-status-list .is-negative {
  background: #fde9e9;
  color: #8a2929;
}

.admin-notice {
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 4px solid #507793;
  border-radius: 10px;
  background: #edf4f8;
}

.admin-notice p {
  margin: 7px 0 0;
}

@media (max-width: 980px) {
  .admin-statistics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .admin-hero {
    flex-direction: column;
  }

  .admin-identity {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .admin-main {
    width: min(100% - 24px, 1480px);
    padding-top: 30px;
  }

  .admin-statistics {
    grid-template-columns: 1fr;
  }

  .admin-section-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.admin-detail-link {
  display: inline-block;
  padding: 7px 10px;
  border: 1px solid rgba(8, 43, 73, .18);
  border-radius: 8px;
  color: #082b49;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.admin-detail-link:hover {
  background: #eef4f8;
}

.admin-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.admin-detail-hero h1 {
  margin: 6px 0 8px;
  color: #082b49;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.admin-detail-actions {
  display: flex;
  gap: 10px;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.admin-detail-card {
  padding: 22px;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(8, 43, 73, .055);
}

.admin-detail-card > span {
  color: #7d909c;
  font-size: .76rem;
  font-weight: 800;
}

.admin-detail-card h2 {
  margin: 7px 0 18px;
  color: #082b49;
}

.admin-detail-data {
  display: grid;
  gap: 0;
  margin: 0;
}

.admin-detail-data > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(8, 43, 73, .08);
}

.admin-detail-data dt {
  color: #687b88;
  font-size: .8rem;
  font-weight: 700;
}

.admin-detail-data dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.admin-detail-description {
  margin: 16px 0;
  color: #617580;
  font-size: .86rem;
}

.admin-permission-list,
.admin-feature-list {
  display: grid;
  gap: 8px;
}

.admin-permission-list > div,
.admin-feature-list > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f3f7fa;
}

.admin-permission-list small {
  color: #71818b;
}

.admin-feature-list .is-enabled {
  background: #e8f6ed;
  color: #17633a;
}

.admin-feature-list .is-disabled {
  background: #f1f2f3;
  color: #71797e;
}

.admin-audit-section {
  margin-top: 0;
}

.admin-metadata {
  display: block;
  max-width: 360px;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: .72rem;
}

@media (max-width: 900px) {
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-detail-hero {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .admin-detail-data > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.account-nav-link {
  display: inline-flex;
  align-items: center;
}

.account-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 6px 11px 6px 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 11px;
  background: rgba(255, 255, 255, .09);
  color: #ffffff !important;
  text-decoration: none;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.account-nav-status:hover {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .15);
  transform: translateY(-1px);
}

.account-nav-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: #67d894;
  box-shadow: 0 0 0 3px rgba(103, 216, 148, .12);
}

.account-nav-copy {
  display: grid;
  gap: 0;
  line-height: 1.05;
}

.account-nav-copy small {
  color: rgba(255, 255, 255, .61);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .025em;
}

.account-nav-copy strong {
  color: #ffffff;
  font-size: .76rem;
  font-weight: 900;
}

@media (max-width: 900px) and (min-width: 701px) {
  .hub-navigation {
    gap: 14px;
  }

  .account-nav-status {
    padding-right: 9px;
  }

  .account-nav-copy small {
    display: none;
  }
}

/* Mobile Navigation 20260802 */

.mobile-navigation-controls {
  display: none;
}

@media (max-width: 700px) {
  .site-header.mobile-navigation-ready {
    position: relative;
    min-height: 68px;
    gap: 12px;
  }

  .site-header.mobile-navigation-ready
  > .hub-navigation {
    position: absolute;
    z-index: 80;
    top: calc(100% + 1px);
    left: 12px;
    right: 12px;
    display: none;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 15px 15px;
    background: #082b49;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
  }

  .site-header.mobile-navigation-open
  > .hub-navigation {
    display: grid;
  }

  .site-header.mobile-navigation-ready
  > .hub-navigation > a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 9px;
    color: rgba(255, 255, 255, .78);
  }

  .site-header.mobile-navigation-ready
  > .hub-navigation > a:hover,
  .site-header.mobile-navigation-ready
  > .hub-navigation > a[aria-current="page"] {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
  }

  .site-header.mobile-navigation-ready
  > .hub-navigation
  .account-nav-status {
    display: none;
  }

  .mobile-navigation-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
  }

  .mobile-account-link {
    flex: 0 0 auto;
  }

  .mobile-account-link.account-nav-link {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
  }

  .mobile-account-link.account-nav-status {
    min-height: 38px;
    padding: 5px 9px 5px 8px;
  }

  .mobile-account-link
  .account-nav-copy small {
    display: none;
  }

  .mobile-navigation-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    font-weight: 850;
  }

  .mobile-navigation-toggle:hover,
  .mobile-navigation-toggle:focus-visible {
    border-color: rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .14);
  }

  .mobile-navigation-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .62);
    outline-offset: 2px;
  }

  .mobile-navigation-icon {
    display: grid;
    gap: 3px;
    width: 17px;
  }

  .mobile-navigation-icon i {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition:
      transform .18s ease,
      opacity .18s ease;
  }

  .mobile-navigation-open
  .mobile-navigation-icon i:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  .mobile-navigation-open
  .mobile-navigation-icon i:nth-child(2) {
    opacity: 0;
  }

  .mobile-navigation-open
  .mobile-navigation-icon i:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }
}

@media (max-width: 430px) {
  .mobile-navigation-label {
    display: none;
  }

  .mobile-navigation-toggle {
    width: 40px;
    padding: 7px;
  }

  .mobile-account-link.account-nav-status {
    padding-right: 8px;
  }

  .mobile-account-link
  .account-nav-copy strong {
    font-size: .72rem;
  }
}


/* Mobile Navigation – Kontrastkorrektur 20260802 */

@media (max-width: 700px) {
  .mobile-navigation-controls {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .mobile-account-link.account-nav-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    border: 2px solid #ffffff;
    border-radius: 10px;
    background: #ffffff;
    color: #082b49 !important;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: none;
  }

  .mobile-account-link.account-nav-link:visited {
    color: #082b49 !important;
  }

  .mobile-account-link.account-nav-link:hover,
  .mobile-account-link.account-nav-link:focus-visible {
    border-color: #d7e8f3;
    background: #eaf4fa;
    color: #082b49 !important;
  }

  .mobile-account-link.account-nav-status {
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .12);
    color: #ffffff !important;
  }

  .mobile-navigation-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff !important;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
  }

  .mobile-navigation-toggle:hover,
  .mobile-navigation-toggle:focus-visible {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .2);
    color: #ffffff !important;
  }

  .mobile-navigation-icon i {
    background: #ffffff !important;
  }
}

@media (max-width: 430px) {
  .mobile-account-link.account-nav-link {
    padding-inline: 11px;
  }
}


/* Kontoseite – Layoutkorrektur 20260802 */

.account-main {
  padding-top: 48px;
  padding-bottom: 54px;
}

.account-hero {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(250px, 290px);
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
  padding: 26px 0 42px;
}

.account-hero > div:first-child {
  min-width: 0;
}

.account-hero h1 {
  max-width: 100%;
  margin-bottom: 18px;
  font-size: clamp(2.8rem, 4.4vw, 4.9rem);
  line-height: .98;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.account-hero > div > p:not(.eyebrow) {
  margin-bottom: 0;
}

.account-plan-card {
  width: 100%;
  align-self: center;
}

.account-grid {
  align-items: start;
}

.account-card {
  min-height: 0;
  height: auto;
  padding: 28px;
}

.account-card p:last-child,
.account-card dl:last-child,
.account-card details:last-child {
  margin-bottom: 0;
}

.account-data {
  margin-top: 18px;
}

.account-capabilities {
  gap: 8px;
}

.account-capability {
  padding: 11px 13px;
}

.account-actions {
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.account-actions form {
  margin: 0;
}

.account-logout-button {
  color: #082b49;
  border: 1px solid rgba(255, 255, 255, .72);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.account-logout-button:hover,
.account-logout-button:focus-visible {
  color: #082b49;
  border-color: #ffffff;
  background: #eaf4fa;
}

.account-logout-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .35);
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .account-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .account-plan-card {
    width: min(100%, 420px);
  }

  .account-hero h1 {
    max-width: 900px;
  }
}

@media (max-width: 900px) {
  .account-grid {
    gap: 16px;
  }

  .account-card {
    padding: 25px;
  }
}

@media (max-width: 650px) {
  .account-main {
    padding-top: 26px;
    padding-bottom: 38px;
  }

  .account-hero {
    padding: 18px 0 30px;
  }

  .account-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.7rem);
    letter-spacing: -.045em;
  }

  .account-plan-card {
    padding: 22px;
    border-radius: 19px;
  }

  .account-card {
    padding: 22px 20px;
    border-radius: 20px;
  }

  .account-actions {
    justify-content: stretch;
  }

  .account-actions form,
  .account-actions .button {
    width: 100%;
  }
}


/* Zentrales Seiten- und Kartenlayout 20260802 */

/*
 * Diese Klassen sind für alle Konto-, Admin-, Organisations-,
 * Projekt- und zukünftigen Funktionsseiten vorgesehen.
 */

.app-main {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: 48px 60px;
}

.app-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(250px, 290px);
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
  padding-block: 26px 42px;
}

.app-hero-copy {
  min-width: 0;
}

.app-hero-title {
  max-width: 100%;
  margin: 12px 0 18px;
  font-size: clamp(2.8rem, 4.4vw, 4.9rem);
  line-height: .98;
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.app-hero-copy > p:last-child {
  margin-bottom: 0;
}

.app-summary-card {
  width: 100%;
  align-self: center;
}

.app-card-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.app-card {
  min-width: 0;
  min-height: 0;
  height: auto;
}

.app-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.app-page-actions form {
  margin: 0;
}

.button-light {
  color: #082b49;
  border: 1px solid rgba(255, 255, 255, .72);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.button-light:hover,
.button-light:focus-visible {
  color: #082b49;
  border-color: #ffffff;
  background: #eaf4fa;
}

.button-light:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .35);
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .app-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .app-summary-card {
    width: min(100%, 420px);
  }

  .app-hero-title {
    max-width: 900px;
  }
}

@media (max-width: 900px) {
  .app-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 650px) {
  .app-main {
    width: min(100% - 24px, 1180px);
    padding-block: 26px 38px;
  }

  .app-hero {
    padding-block: 18px 30px;
  }

  .app-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.7rem);
    letter-spacing: -.045em;
  }

  .app-summary-card {
    border-radius: 19px;
  }

  .app-page-actions {
    align-items: stretch;
  }

  .app-page-actions form,
  .app-page-actions .button {
    width: 100%;
  }
}

.heating-mag-card .heating-mag-subtitle {
  margin: -8px 0 18px;
  color: #5d6f80;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.heating-hero-video-frame {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  border: 1px solid rgba(8, 43, 73, 0.08);
  border-radius: 36px;
  background:
    radial-gradient(
      circle at top,
      rgba(255, 255, 255, 0.95),
      rgba(244, 247, 250, 0.92)
    );
  box-shadow:
    0 36px 80px rgba(8, 43, 73, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

.heating-hero-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
}

.heating-hero-video-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(8, 43, 73, 0.10) 100%
    );
  pointer-events: none;
}

.heating-hero-video-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 22px;
  background: rgba(8, 43, 73, 0.72);
  backdrop-filter: blur(8px);
  color: #f7fafc;
  box-shadow: 0 18px 36px rgba(8, 43, 73, 0.18);
}

.heating-hero-video-caption span {
  color: rgba(247, 250, 252, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.heating-hero-video-caption strong {
  font-size: 1.05rem;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .heating-hero-video-frame,
  .heating-hero-video-frame video {
    min-height: 380px;
  }
}

@media (max-width: 760px) {
  .heating-hero-video-frame,
  .heating-hero-video-frame video {
    min-height: 280px;
    border-radius: 24px;
  }

  .heating-hero-video-caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .heating-hero-video-caption strong {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heating-hero-video-frame video {
    animation: none;
  }
}


/* MAG Anlagenvolumen-Schätzassistent */

.mag-volume-estimator {
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid rgba(8, 43, 73, 0.12);
  border-radius: 26px;
  background: rgba(244, 248, 251, 0.86);
}

.mag-volume-estimator-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.mag-volume-estimator-heading > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mag-volume-estimator-heading h4 {
  margin: 0 0 5px;
  color: #082b49;
  font-size: 1.15rem;
}

.mag-volume-estimator-heading p {
  margin: 0;
  color: #647586;
  line-height: 1.55;
}

.mag-estimator-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mag-estimator-section {
  margin-top: 22px;
}

.mag-estimator-section[hidden] {
  display: none;
}

.mag-estimator-section h5 {
  margin: 0 0 14px;
  color: #082b49;
  font-size: 1rem;
}

.mag-estimator-section
.warmup-assumption-card {
  margin-top: 16px;
}

.mag-estimator-results {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.mag-estimator-results > div {
  display: grid;
  gap: 5px;
  padding: 15px 16px;
  border: 1px solid rgba(8, 43, 73, 0.10);
  border-radius: 18px;
  background: #ffffff;
}

.mag-estimator-results span {
  color: #667788;
  font-size: 0.86rem;
}

.mag-estimator-results strong {
  color: #082b49;
  font-size: 1.05rem;
}

.mag-estimator-results
.mag-estimator-total {
  border-color: rgba(8, 94, 145, 0.28);
  background: rgba(224, 241, 250, 0.65);
}

.mag-estimator-total strong {
  font-size: 1.35rem;
}

.mag-estimator-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}

.mag-estimator-actions p {
  margin: 0;
  color: #647586;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .mag-volume-estimator {
    padding: 18px;
    border-radius: 22px;
  }

  .mag-volume-estimator-heading {
    display: grid;
  }

  .mag-estimator-grid,
  .mag-estimator-results {
    grid-template-columns: 1fr;
  }

  .mag-estimator-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mag-estimator-actions .button {
    width: 100%;
  }
}


/* MAG-Video auf der Heizungsübersicht */

.heating-mag-media {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #e9eef2;
}

.heating-mag-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.heating-mag-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(8, 43, 73, 0.58) 100%
    );
  pointer-events: none;
}

.heating-mag-media-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 17px;
  background: rgba(8, 43, 73, 0.68);
  color: #fff;
  backdrop-filter: blur(7px);
}

.heating-mag-media-caption span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heating-mag-media-caption strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .heating-mag-media,
  .heating-mag-media video {
    min-height: 210px;
  }
}


/* MAG-Video auf der Heizungsübersicht */

.heating-mag-media {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #e9eef2;
}

.heating-mag-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.heating-mag-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(8, 43, 73, 0.58) 100%
    );
  pointer-events: none;
}

.heating-mag-media-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 17px;
  background: rgba(8, 43, 73, 0.68);
  color: #fff;
  backdrop-filter: blur(7px);
}

.heating-mag-media-caption span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heating-mag-media-caption strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .heating-mag-media,
  .heating-mag-media video {
    min-height: 210px;
  }
}

.heating-safety-card .heating-sv-subtitle {
  margin: -8px 0 18px;
  color: #7b5b57;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* SV-Video auf der Heizungsübersicht */

.heating-sv-media {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #efe7e4;
}

.heating-sv-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.heating-sv-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(64, 18, 14, 0.58) 100%
    );
  pointer-events: none;
}

.heating-sv-media-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 17px;
  background: rgba(70, 24, 20, 0.68);
  color: #fff;
  backdrop-filter: blur(7px);
}

.heating-sv-media-caption span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heating-sv-media-caption strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .heating-sv-media,
  .heating-sv-media video {
    min-height: 210px;
  }
}

.heating-safety-card {
  background:
    linear-gradient(
      135deg,
      #fffaf8 0%,
      #f7eae5 100%
    );
}

.heating-safety-card .heating-sv-subtitle {
  margin: -8px 0 18px;
  color: #7b5b57;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.heating-sv-media {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #efe7e4;
}

.heating-sv-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.heating-sv-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(64, 18, 14, 0.58) 100%
    );
  pointer-events: none;
}

.heating-sv-media-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 17px;
  background: rgba(70, 24, 20, 0.68);
  color: #fff;
  backdrop-filter: blur(7px);
}

.heating-sv-media-caption span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heating-sv-media-caption strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .heating-sv-media,
  .heating-sv-media video {
    min-height: 210px;
  }
}


/* ==========================================================
   Heizungsübersicht: einheitliche weiße Werkzeugkacheln
   ========================================================== */

.heating-feature-grid .heating-feature-card {
  overflow: hidden;
  border: 1px solid #d4dee6;
  border-radius: 28px;
  background: #ffffff !important;
  color: #0a3152 !important;
  box-shadow:
    0 14px 34px rgba(7, 42, 70, 0.07);
}

.heating-feature-grid .heating-feature-card:hover {
  transform: translateY(-3px);
  border-color: #b9cad7;
  box-shadow:
    0 20px 42px rgba(7, 42, 70, 0.12);
}

.heating-feature-grid .heating-feature-copy {
  position: relative;
  z-index: 2;
  min-height: 270px;
  padding: 44px 46px 34px;
  background: #ffffff !important;
  color: #0a3152 !important;
}

.heating-feature-grid .heating-card-number {
  display: inline-block;
  margin-bottom: 26px;
  color: #006fc2 !important;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.heating-feature-grid .heating-card-category {
  margin: 0 0 8px;
  color: #547087 !important;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heating-feature-grid .heating-feature-card h3 {
  margin: 0 0 20px;
  color: #0a3152 !important;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.heating-feature-grid .heating-feature-copy > p:not(
  .heating-card-category,
  .heating-mag-subtitle,
  .heating-sv-subtitle
) {
  max-width: 680px;
  margin: 0;
  color: #526c80 !important;
  font-size: 1rem;
  line-height: 1.55;
}

.heating-feature-grid .heating-mag-subtitle,
.heating-feature-grid .heating-sv-subtitle {
  margin: -15px 0 28px !important;
  color: #425f75 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.heating-feature-grid .heating-card-link {
  display: inline-flex;
  margin-top: 24px;
  color: #0072c6 !important;
  font-weight: 800;
  text-decoration: none;
}

/* Alte kartenabhängige Farbflächen neutralisieren */

.heating-feature-primary,
.heating-radiator-card,
.heating-pressure-card,
.heating-room-card,
.heating-warmup-card,
.heating-mag-card,
.heating-safety-card {
  background: #ffffff !important;
}

/* Medienbereiche einheitlich unten */

.heating-feature-grid .heating-pipe-preview,
.heating-feature-grid .heating-radiator-media,
.heating-feature-grid .heating-pressure-media,
.heating-feature-grid .heating-room-media,
.heating-feature-grid .heating-warmup-media,
.heating-feature-grid .heating-mag-media,
.heating-feature-grid .heating-sv-media {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background: #edf2f5;
}

.heating-feature-grid video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
}

/* Bildunterschriften einheitlich dunkelblau */

.heating-pressure-caption,
.heating-room-caption,
.heating-warmup-caption,
.heating-mag-media-caption,
.heating-sv-media-caption {
  right: 22px !important;
  bottom: 22px !important;
  left: 22px !important;
  padding: 14px 17px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  background: rgba(7, 43, 72, 0.88) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 28px rgba(4, 25, 42, 0.18);
  backdrop-filter: blur(8px);
}

.heating-pressure-caption span,
.heating-room-caption span,
.heating-warmup-caption span,
.heating-mag-media-caption span,
.heating-sv-media-caption span {
  color: rgba(255, 255, 255, 0.74) !important;
}

.heating-pressure-caption strong,
.heating-room-caption strong,
.heating-warmup-caption strong,
.heating-mag-media-caption strong,
.heating-sv-media-caption strong {
  color: #ffffff !important;
}

/* Dunkle Überlagerungen reduzieren */

.heating-mag-media-shade,
.heating-sv-media-shade {
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(7, 43, 72, 0.24) 100%
    ) !important;
}

/* Mobile Darstellung */

@media (max-width: 760px) {
  .heating-feature-grid .heating-feature-copy {
    min-height: 0;
    padding: 32px 28px 28px;
  }

  .heating-feature-grid .heating-feature-card h3 {
    font-size: clamp(2.15rem, 12vw, 3.4rem);
  }

  .heating-feature-grid .heating-pipe-preview,
  .heating-feature-grid .heating-radiator-media,
  .heating-feature-grid .heating-pressure-media,
  .heating-feature-grid .heating-room-media,
  .heating-feature-grid .heating-warmup-media,
  .heating-feature-grid .heating-mag-media,
  .heating-feature-grid .heating-sv-media,
  .heating-feature-grid video {
    min-height: 240px;
  }
}


/* Pumpenkachel auf der Heizungsübersicht */

.heating-pump-card {
  background: #ffffff !important;
}

.heating-feature-grid .heating-pump-subtitle {
  margin: -15px 0 28px;
  color: #425f75;
  font-size: 1rem;
  font-weight: 700;
}

.heating-pump-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 310px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(0, 112, 190, 0.15),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      #e8f0f5,
      #c8d8e3
    );
}

.heating-pump-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border: 18px solid #234f6d;
  border-radius: 50%;
  background: #f5f8fa;
  box-shadow:
    0 20px 40px rgba(7, 43, 72, 0.2),
    inset 0 0 0 7px #91a9ba;
}

.heating-pump-ring {
  position: absolute;
  inset: 18px;
  border: 6px solid #0c78b4;
  border-radius: 50%;
}

.heating-pump-rotor {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0a3152;
  box-shadow:
    0 0 0 10px #d5e3ec;
}

.heating-pump-arrow {
  position: absolute;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 900;
}

.heating-pump-pipe {
  width: 125px;
  height: 46px;
  border-top: 8px solid #728d9f;
  border-bottom: 8px solid #728d9f;
  background: #dbe5eb;
}

.heating-pump-pipe-left {
  margin-right: -8px;
}

.heating-pump-pipe-right {
  margin-left: -8px;
}

.heating-pump-caption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: grid;
  gap: 4px;
  padding: 14px 17px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(7, 43, 72, 0.88);
  color: #ffffff;
  box-shadow:
    0 12px 28px rgba(4, 25, 42, 0.18);
  backdrop-filter: blur(8px);
}

.heating-pump-caption span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heating-pump-caption strong {
  color: #ffffff;
  font-size: 0.92rem;
}

@media (max-width: 760px) {
  .heating-pump-preview {
    min-height: 240px;
  }

  .heating-pump-symbol {
    width: 120px;
    height: 120px;
  }

  .heating-pump-pipe {
    width: 75px;
  }
}


/* Pumpenvideo auf der Heizungsübersicht */

.heating-pump-media {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background: #e8eef2;
}

.heating-pump-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
}

.heating-pump-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(7, 43, 72, 0.26) 100%
    );
  pointer-events: none;
}

@media (max-width: 760px) {
  .heating-pump-media,
  .heating-pump-media video {
    min-height: 240px;
  }
}


/* Heizungsübersicht – Pumpenkachel */

.heating-feature-grid .heating-pump-subtitle {
  margin: -15px 0 28px;
  color: #425f75;
  font-size: 1rem;
  font-weight: 700;
}

.heating-pump-media {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background: #e8eef2;
}

.heating-pump-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
}

.heating-pump-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(7, 43, 72, 0.25) 100%
    );
  pointer-events: none;
}

.heating-pump-caption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: grid;
  gap: 4px;
  padding: 14px 17px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(7, 43, 72, 0.88);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(4, 25, 42, 0.18);
  backdrop-filter: blur(8px);
}

.heating-pump-caption span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heating-pump-caption strong {
  color: #fff;
  font-size: 0.92rem;
}

@media (max-width: 760px) {
  .heating-pump-media,
  .heating-pump-media video {
    min-height: 240px;
  }
}


/* ==========================================================
   Heizungsübersicht: sämtliche Kacheln gleich groß
   Referenz: Raumheizlast und Aufheizzeit
   ========================================================== */

.heating-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
}

.heating-feature-grid .heating-feature-card {
  display: grid !important;
  grid-template-rows: minmax(330px, 1fr) 310px;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
}

.heating-feature-grid .heating-feature-copy {
  display: flex;
  flex-direction: column;
  min-height: 330px !important;
  height: 100%;
  padding: 42px 44px 34px;
}

.heating-feature-grid .heating-card-link {
  margin-top: auto;
  padding-top: 24px;
}

/* Sämtliche Bild-, Grafik- und Videobereiche gleich hoch */

.heating-feature-grid .heating-pipe-preview,
.heating-feature-grid .heating-radiator-media,
.heating-feature-grid .heating-pressure-media,
.heating-feature-grid .heating-room-media,
.heating-feature-grid .heating-warmup-media,
.heating-feature-grid .heating-mag-media,
.heating-feature-grid .heating-sv-media,
.heating-feature-grid .heating-pump-media {
  width: 100%;
  height: 310px !important;
  min-height: 310px !important;
  max-height: 310px;
}

.heating-feature-grid .heating-radiator-media video,
.heating-feature-grid .heating-pressure-media video,
.heating-feature-grid .heating-room-media video,
.heating-feature-grid .heating-warmup-media video,
.heating-feature-grid .heating-mag-media video,
.heating-feature-grid .heating-sv-media video,
.heating-feature-grid .heating-pump-media video {
  width: 100%;
  height: 310px !important;
  min-height: 310px !important;
  max-height: 310px;
  object-fit: cover;
}

/* Unterschiedliche alte Sondergrößen sicher neutralisieren */

.heating-feature-primary,
.heating-radiator-card,
.heating-pressure-card,
.heating-room-card,
.heating-warmup-card,
.heating-mag-card,
.heating-safety-card,
.heating-pump-card {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
}

/* Lange Überschriften dürfen umbrechen, verändern aber nicht die Karte */

.heating-feature-grid .heating-feature-card h3 {
  min-height: 2em;
}

/* Tablet und Smartphone */

@media (max-width: 900px) {
  .heating-feature-grid {
    grid-template-columns: 1fr;
  }

  .heating-feature-grid .heating-feature-card {
    grid-template-rows: auto 280px;
  }

  .heating-feature-grid .heating-feature-copy {
    min-height: 0 !important;
  }

  .heating-feature-grid .heating-pipe-preview,
  .heating-feature-grid .heating-radiator-media,
  .heating-feature-grid .heating-pressure-media,
  .heating-feature-grid .heating-room-media,
  .heating-feature-grid .heating-warmup-media,
  .heating-feature-grid .heating-mag-media,
  .heating-feature-grid .heating-sv-media,
  .heating-feature-grid .heating-pump-media,
  .heating-feature-grid .heating-radiator-media video,
  .heating-feature-grid .heating-pressure-media video,
  .heating-feature-grid .heating-room-media video,
  .heating-feature-grid .heating-warmup-media video,
  .heating-feature-grid .heating-mag-media video,
  .heating-feature-grid .heating-sv-media video,
  .heating-feature-grid .heating-pump-media video {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px;
  }
}

@media (max-width: 600px) {
  .heating-feature-grid {
    gap: 20px;
  }

  .heating-feature-grid .heating-feature-copy {
    padding: 30px 26px 26px;
  }

  .heating-feature-grid .heating-feature-card {
    grid-template-rows: auto 235px;
  }

  .heating-feature-grid .heating-pipe-preview,
  .heating-feature-grid .heating-radiator-media,
  .heating-feature-grid .heating-pressure-media,
  .heating-feature-grid .heating-room-media,
  .heating-feature-grid .heating-warmup-media,
  .heating-feature-grid .heating-mag-media,
  .heating-feature-grid .heating-sv-media,
  .heating-feature-grid .heating-pump-media,
  .heating-feature-grid .heating-radiator-media video,
  .heating-feature-grid .heating-pressure-media video,
  .heating-feature-grid .heating-room-media video,
  .heating-feature-grid .heating-warmup-media video,
  .heating-feature-grid .heating-mag-media video,
  .heating-feature-grid .heating-sv-media video,
  .heating-feature-grid .heating-pump-media video {
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px;
  }
}

/* Erste beiden Heizungs-Kacheln wie Raumheizlast und Aufheizzeit */

.heating-feature-grid > .heating-feature-primary,
.heating-feature-grid > .heating-radiator-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 330px 310px !important;
  height: 640px !important;
  min-height: 640px !important;
  max-height: 640px !important;
}

.heating-feature-grid > .heating-feature-primary > .heating-feature-copy,
.heating-feature-grid > .heating-radiator-card > .heating-feature-copy {
  height: 330px !important;
  min-height: 330px !important;
  max-height: 330px !important;
}

.heating-feature-grid > .heating-feature-primary > .heating-pipe-preview,
.heating-feature-grid > .heating-radiator-card > .heating-radiator-media,
.heating-feature-grid > .heating-radiator-card > .heating-radiator-media video {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 310px !important;
  min-height: 310px !important;
  max-height: 310px !important;
}

/* Heizungs-Kacheln: eindeutiger Rechnerlink ohne Überlagerung */
.heating-feature-grid .heating-card-link {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  margin-top: auto !important;
  padding-top: 18px !important;
  padding-bottom: 0 !important;
}

/* Erste Heizungs-Kachel: kleiner Untertitel */
.heating-hydraulic-subtitle {
  margin: -14px 0 22px !important;
  color: #425f75 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* Wärmestrom-Kachel */

.heating-hydraulic-subtitle {
  margin: -14px 0 22px !important;
  color: #425f75 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.heating-hydraulic-media {
  position: relative;
  width: 100%;
  height: 310px;
  overflow: hidden;
  background: #e8eef2;
}

.heating-hydraulic-media video {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: cover;
}

.heating-hydraulic-caption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: grid;
  gap: 4px;
  padding: 14px 17px;
  border-radius: 16px;
  background: rgba(7, 43, 72, 0.88);
  color: #fff;
}

.heating-hydraulic-caption span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heating-hydraulic-caption strong {
  color: #fff;
  font-size: 0.92rem;
}

/* Heizungs-Kacheln: großzügiger Abstand zur Themenwelt-CTA */
.heating-feature-grid .heating-card-link {
  margin-top: auto !important;
  padding-top: 30px !important;
  color: #0072c6 !important;
  font-weight: 800 !important;
}

/* SHK_HEIZUNG_MOBILE_MEDIA_20260802 */
@media (max-width: 600px) {
  .heating-hub-page .heating-feature-grid .heating-feature-card,
  .heating-hub-page .heating-feature-grid > .heating-feature-primary,
  .heating-hub-page .heating-feature-grid > .heating-radiator-card {
    grid-template-rows: auto 175px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .heating-hub-page .heating-feature-grid .heating-feature-copy,
  .heating-hub-page .heating-feature-grid > .heating-feature-primary > .heating-feature-copy,
  .heating-hub-page .heating-feature-grid > .heating-radiator-card > .heating-feature-copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .heating-hub-page .heating-feature-grid .heating-pipe-preview,
  .heating-hub-page .heating-feature-grid .heating-hydraulic-media,
  .heating-hub-page .heating-feature-grid .heating-radiator-media,
  .heating-hub-page .heating-feature-grid .heating-pressure-media,
  .heating-hub-page .heating-feature-grid .heating-room-media,
  .heating-hub-page .heating-feature-grid .heating-warmup-media,
  .heating-hub-page .heating-feature-grid .heating-mag-media,
  .heating-hub-page .heating-feature-grid .heating-sv-media,
  .heating-hub-page .heating-feature-grid .heating-pump-media,
  .heating-hub-page .heating-feature-grid video {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }
}

/* SHK_HEIZUNG_MOBILE_WIDTH_20260802 */
@media (max-width: 600px) {
  .heating-hub-page .heating-feature-grid {
    width: calc(100% - 28px);
    max-width: 420px;
    margin-inline: auto;
  }
}

/* SHK_GLiederheizkoerper_MOBILE_TITLE_20260802 */
@media (max-width: 600px) {
  .heating-hub-page .heating-radiator-card h3 {
    font-size: 1.85rem !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* SHK_HEIZUNG_MOBILE_CARD_TITLES_20260802 */
@media (max-width: 600px) {
  .heating-hub-page .heating-feature-card h3 {
    min-height: 0 !important;
    font-size: 1.75rem !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* SHK_RECHNER_MOBILE_OVERFLOW_20260802 */
@media (max-width: 700px) {
  .calculator-layout,
  .calculator-card,
  .result-card,
  .fields-grid,
  .field,
  .input-unit {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .field input,
  .field select,
  .input-unit input,
  .input-unit select {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* SHK_RADIATOR_MOBILE_WIDTH_FIX_20260802 */
@media (max-width: 700px) {
  body.radiator-calculator-page,
  .radiator-calculator-section,
  .radiator-calculator-layout,
  .radiator-input-card,
  .radiator-result-card,
  .radiator-input-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .radiator-calculator-section {
    padding-right: 12px !important;
    padding-left: 12px !important;
    overflow-x: clip;
  }

  .radiator-input-card,
  .radiator-result-card {
    overflow: hidden;
  }

  .radiator-input-card input,
  .radiator-input-card select,
  .radiator-input-card textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* SHK_HEIZUNG_MOBILE_DESCRIPTION_WIDTH_20260802 */
@media (max-width: 600px) {
  .heating-hub-page
  .heating-feature-grid
  .heating-feature-copy > p:not(
    .heating-card-category,
    .heating-mag-subtitle,
    .heating-sv-subtitle
  ) {
    width: 100%;
    max-width: 30ch !important;
    overflow-wrap: break-word;
  }
}

/* SHK_MAG_MOBILE_SUBTITLE_20260802 */
@media (max-width: 600px) {
  .heating-hub-page .heating-mag-card .heating-mag-subtitle {
    width: 100%;
    max-width: 18ch;
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* SHK_MAG_SV_MOBILE_SUBTITLE_20260802 */
@media (max-width: 600px) {
  .heating-hub-page .heating-mag-card .heating-mag-subtitle,
  .heating-hub-page .heating-safety-card .heating-sv-subtitle {
    width: 100%;
    max-width: 18ch;
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* SHK_MAG_SUBTITLE_FULL_TEXT_20260802 */
@media (max-width: 600px) {
  .heating-hub-page .heating-mag-card h3 {
    margin-bottom: 8px !important;
  }

  .heating-hub-page .heating-mag-card .heating-mag-subtitle {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto;
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
  }
}

/* SHK_PRODUCT_DATA_FORM_TABLE_STYLE_20260803 */

body.account-page
.auth-form
.field {
  display: grid;
  gap: 8px;
}

body.account-page
.auth-form
.field > span {
  color: #18354d;
  font-weight: 750;
}

body.account-page
.auth-form
input:not([type="file"]),
body.account-page
.auth-form
select,
body.account-page
.auth-form
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid #c7d5df;
  border-radius: 13px;
  color: #102f49;
  background: #ffffff;
  font: inherit;
  line-height: 1.45;
  box-sizing: border-box;
}

body.account-page
.auth-form
textarea {
  min-height: 130px;
  resize: vertical;
}

body.account-page
.auth-form
input:focus,
body.account-page
.auth-form
select:focus,
body.account-page
.auth-form
textarea:focus {
  border-color: #0d6d9e;
  outline: 3px solid rgba(13, 109, 158, .13);
}

body.account-page
.auth-form
.field small {
  color: #586d7e;
  font-size: .88rem;
  line-height: 1.5;
}

body.account-page
.auth-form
input[type="file"] {
  width: 100%;
  padding: 11px;
  border: 1px dashed #aebfcb;
  border-radius: 13px;
  color: #18354d;
  background: #f8fbfd;
  box-sizing: border-box;
}

body.account-page
.auth-form
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  color: #ffffff;
  background: #0b3554;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

body.account-page
.auth-form
input[type="file"]::file-selector-button:hover {
  background: #0d4c73;
}

body.account-page
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

body.account-page
.admin-table {
  min-width: 680px;
  color: #18354d;
}

body.account-page
.admin-table td {
  color: #18354d;
  background: #ffffff;
}

body.account-page
.admin-table tbody tr:hover td {
  background: #f7fafc;
}

@media (max-width: 700px) {
  body.account-page
  .admin-table {
    min-width: 620px;
  }

  body.account-page
  .auth-form
  input:not([type="file"]),
  body.account-page
  .auth-form
  select,
  body.account-page
  .auth-form
  textarea {
    font-size: 16px;
  }
}

/* SHK_ACCOUNT_NAV_MY_AREA_STYLE_20260803 */
.account-nav-status {
  min-height: 42px;
  padding: 7px 14px 7px 11px;
  border-color: rgba(255, 255, 255, .72);
  background: #f4f8fb;
  color: #082b49 !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
}

.account-nav-status:hover,
.account-nav-status:focus-visible {
  border-color: #ffffff;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.account-nav-status .account-nav-copy small {
  color: #5d6f80;
  font-size: .62rem;
}

.account-nav-status .account-nav-copy strong {
  color: #082b49;
  font-size: .78rem;
}

.account-nav-status .account-nav-dot {
  border-color: rgba(8, 43, 73, .22);
  box-shadow: 0 0 0 3px rgba(43, 176, 104, .14);
}

/* SHK_PROJECT_WORLD_CUSTOMER_FORM_STYLE_20260803 */
.product-data-form {
  display: grid;
  gap: 22px;
}

.product-data-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid #d6e0e8;
  border-radius: 18px;
  background: #f8fbfd;
}

.product-data-form legend {
  padding: 0 10px;
  color: #0875b9;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-data-form label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: #173d59;
  font-size: .86rem;
  font-weight: 850;
}

.product-data-form input,
.product-data-form select,
.product-data-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #b9c8d4;
  border-radius: 11px;
  background: #ffffff;
  color: #082b49;
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.product-data-form textarea {
  min-height: 124px;
  resize: vertical;
}

.product-data-form input:focus,
.product-data-form select:focus,
.product-data-form textarea:focus {
  border-color: #0875b9;
  box-shadow: 0 0 0 4px rgba(8, 117, 185, .13);
}

.product-data-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 2px;
}

.product-data-form .form-actions .button {
  min-height: 50px;
  padding-inline: 22px;
}

@media (max-width: 760px) {
  .product-data-form fieldset {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 19px;
  }

  .product-data-form .form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-data-form .form-actions .button {
    width: 100%;
  }
}

/* SHK_PROJECT_WORLD_BUILDING_PART_LAYOUT_20260803 */
.project-building-part-empty {
  display: block;
  margin-top: 8px;
  color: #70808d;
  font-weight: 650;
  line-height: 1.45;
}

.project-building-part-create-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #0075ad;
  font-weight: 850;
  text-decoration: none;
}

.project-building-part-create-link:hover {
  color: #005d8b;
  text-decoration: underline;
}

.project-building-part-create-link:focus-visible {
  outline: 3px solid rgba(0, 117, 173, .24);
  outline-offset: 4px;
  border-radius: 6px;
}

.project-building-part-create-link span {
  transition: transform .18s ease;
}

.project-building-part-create-link:hover span {
  transform: translateX(3px);
}

/* SHK_PROJECT_WORLD_EDIT_LINKS_20260803 */
.project-building-complex-edit-link {
  display: block;
  width: fit-content;
  margin-top: 5px;
  color: #4f6474;
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
}

.project-building-part-edit-link {
  display: block;
  width: fit-content;
  margin-top: 4px;
  color: #4f6474;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
}

.project-building-complex-edit-link:hover,
.project-building-part-edit-link:hover {
  color: #0075ad;
  text-decoration: underline;
}

.project-building-complex-edit-link:focus-visible,
.project-building-part-edit-link:focus-visible {
  outline: 3px solid rgba(0, 117, 173, .24);
  outline-offset: 3px;
  border-radius: 4px;
}

.account-data dd > ul {
  margin-top: 16px;
  margin-bottom: 0;
}

.account-data dd > ul li + li {
  margin-top: 12px;
}

/* SHK_PROJECT_WORLD_BUILDING_FLOOR_LAYOUT_CSS_20260803 */
.account-data dd > ul {
  display: grid;
  gap: 18px;
  padding-left: 0;
  list-style: none;
}

.account-data dd > ul > .project-building-card {
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(79, 100, 116, .22);
}

.account-data dd > ul > .project-building-card:first-child {
  padding-top: 0;
  border-top: 0;
}

.project-building-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.project-building-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: #263845;
  line-height: 1.35;
}

.project-building-title strong {
  font-size: 1rem;
}

.project-building-number {
  color: #0075ad;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.project-building-meta,
.project-floor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 5px;
  color: #647583;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.4;
}

.project-building-meta span + span::before,
.project-floor-meta span + span::before {
  content: "·";
  margin-right: 14px;
  color: #9aa7b0;
}

.project-building-floor-section {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(79, 100, 116, .16);
  border-radius: 12px;
  background: rgba(242, 246, 248, .66);
}

.project-building-floor-heading {
  margin-bottom: 10px;
  color: #405665;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.project-floor-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-floor-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid rgba(79, 100, 116, .14);
}

.project-floor-card:first-child {
  padding-top: 0;
  border-top: 0;
}

.project-floor-card:last-child {
  padding-bottom: 0;
}

.project-floor-content {
  min-width: 0;
}

.project-floor-content > strong {
  display: block;
  color: #263845;
  line-height: 1.35;
}

.project-building-part-edit-link,
.project-floor-edit-link {
  flex: 0 0 auto;
  margin-top: 1px;
  white-space: nowrap;
}

.project-floor-edit-link {
  display: block;
  width: fit-content;
  color: #4f6474;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
}

.project-floor-edit-link:hover {
  color: #0075ad;
  text-decoration: underline;
}

.project-floor-edit-link:focus-visible {
  outline: 3px solid rgba(0, 117, 173, .24);
  outline-offset: 3px;
  border-radius: 4px;
}

.project-floor-empty {
  display: block;
  color: #70808d;
  font-weight: 650;
  line-height: 1.45;
}

.project-floor-create-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #0075ad;
  font-size: .84rem;
  font-weight: 850;
  text-decoration: none;
}

.project-floor-create-link:hover {
  color: #005d8b;
  text-decoration: underline;
}

.project-floor-create-link:focus-visible {
  outline: 3px solid rgba(0, 117, 173, .24);
  outline-offset: 3px;
  border-radius: 5px;
}

@media (max-width: 700px) {
  .project-building-card-header,
  .project-floor-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .project-building-part-edit-link,
  .project-floor-edit-link {
    white-space: normal;
  }

  .project-building-floor-section {
    padding: 13px;
  }
}

/* SHK_PROJECT_WORLD_BUILDING_FLOOR_LAYOUT_FIX_20260803 */
.account-data .project-building-card div,
.account-data .project-building-floor-section div,
.account-data .project-floor-card div {
  padding: 0;
  border-bottom: 0;
}

@media (max-width: 700px) {
  .project-building-part-edit-link,
  .project-floor-edit-link {
    justify-self: start;
    margin-top: 2px;
  }
}


/* SHK_PROJECT_WORLD_BUILDING_FLOOR_LAYOUT_FINETUNING_20260803 */
.project-building-card-header,
.project-floor-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.project-building-part-edit-link,
.project-floor-edit-link {
  justify-self: start;
  margin-top: 1px;
  white-space: normal;
}

@media (max-width: 700px) {
  .project-building-meta,
  .project-floor-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .project-building-meta span + span::before,
  .project-floor-meta span + span::before {
    content: none;
    margin-right: 0;
  }
}

/* SHK_FAULT_SEARCH_MOBILE_FIX_20260803 */

@media (max-width: 700px) {
  .home-domain-fault-card {
    min-height: 230px;
    padding: 22px;
  }

  .home-domain-fault-card > video {
    object-position: center center;
  }

  .home-domain-fault-card .home-domain-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.1rem;
  }

  .home-domain-fault-copy h3 {
    margin-top: 6px;
    font-size: 2rem;
  }

  .home-domain-fault-copy p {
    margin-top: 8px;
    font-size: .9rem;
    line-height: 1.45;
  }

  .fault-search-hero {
    gap: 24px;
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .fault-search-hero h1 {
    font-size: 3rem;
    line-height: .92;
  }

  .fault-search-hero > div:first-child > p:last-child {
    margin-top: 18px;
    font-size: .95rem;
    line-height: 1.55;
  }

  .fault-search-hero-media {
    min-height: 210px;
    max-height: 240px;
    border-radius: 22px;
  }

  .fault-search-hero-media video {
    object-fit: cover;
    object-position: center center;
  }

  .fault-search-hero-fallback span {
    font-size: 3.2rem;
  }

  .fault-search-hero-fallback strong {
    font-size: .68rem;
  }

  .fault-search-workspace {
    padding-top: 34px;
    padding-bottom: 70px;
  }

  .fault-result-header h2 {
    font-size: 2.7rem;
  }

  .fault-search-form input {
    min-height: 50px;
  }
}


/* SHK_FAULT_SEARCH_MOBILE_FIX_20260803 */

@media (max-width: 700px) {
  .home-domain-fault-card {
    min-height: 230px;
    padding: 22px;
  }

  .home-domain-fault-card > video {
    object-position: center center;
  }

  .home-domain-fault-card .home-domain-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.1rem;
  }

  .home-domain-fault-copy h3 {
    margin-top: 6px;
    font-size: 2rem;
  }

  .home-domain-fault-copy p {
    margin-top: 8px;
    font-size: .9rem;
    line-height: 1.45;
  }

  .fault-search-hero {
    gap: 24px;
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .fault-search-hero h1 {
    font-size: 3rem;
    line-height: .92;
  }

  .fault-search-hero > div:first-child > p:last-child {
    margin-top: 18px;
    font-size: .95rem;
    line-height: 1.55;
  }

  .fault-search-hero-media {
    min-height: 210px;
    max-height: 240px;
    border-radius: 22px;
  }

  .fault-search-hero-media video {
    object-fit: cover;
    object-position: center center;
  }

  .fault-search-hero-fallback span {
    font-size: 3.2rem;
  }

  .fault-search-hero-fallback strong {
    font-size: .68rem;
  }

  .fault-search-workspace {
    padding-top: 34px;
    padding-bottom: 70px;
  }

  .fault-result-header h2 {
    font-size: 2.7rem;
  }

  .fault-search-form input {
    min-height: 50px;
  }
}



/* SHK_FAULT_SEARCH_MANUFACTURER_FILTER_FINAL_20260803 */

.fault-search-form select {
  color: var(--navy);
  background: #f8fafb;
  cursor: pointer;
}



/* SHK_MANUFACTURER_CONTACT_CARD_20260803 */

.fault-contact-card {
  position: relative;
  min-height: 310px;
  margin-top: 26px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 73, .14);
  border-radius: 22px;
  background:
    linear-gradient(145deg, #ffffff, #edf4f7);
}

.fault-contact-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.fault-contact-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fault-contact-brand img {
  width: 76px;
  height: 76px;
  padding: 8px;
  object-fit: contain;
  border: 1px solid rgba(8, 43, 73, .1);
  border-radius: 17px;
  background: #ffffff;
}

.fault-contact-brand span {
  color: var(--blue);
  font-size: .69rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.fault-contact-brand h3 {
  margin: 6px 0 0;
  color: var(--navy);
  font-size: 1.55rem;
}

.fault-contact-pro-badge {
  padding: 8px 12px;
  border-radius: 999px;
  color: #17663b;
  background: #e0f4e8;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.fault-contact-details {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.fault-contact-details > div {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .75);
}

.fault-contact-details span,
.fault-contact-preview span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.fault-contact-details a {
  color: var(--navy);
  font-weight: 900;
  text-decoration: none;
}

.fault-contact-details a:hover {
  text-decoration: underline;
}

.fault-contact-details small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}

.fault-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.fault-contact-source {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: .72rem;
}

.fault-contact-preview {
  display: grid;
  gap: 13px;
  margin-top: 22px;
}

.fault-contact-preview > div {
  display: grid;
  gap: 4px;
}

.fault-contact-preview strong {
  color: rgba(8, 43, 73, .34);
  letter-spacing: .08em;
  filter: blur(1.5px);
}

.fault-contact-lock-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      rgba(8, 43, 73, .98),
      rgba(20, 86, 127, .97)
    );
  clip-path:
    polygon(
      0 59%,
      100% 14%,
      100% 100%,
      0 100%
    );
}

.fault-contact-lock-overlay > div {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
}

.fault-contact-lock-overlay span {
  color: rgba(255, 255, 255, .68);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fault-contact-lock-overlay strong {
  display: block;
  margin-top: 5px;
  font-size: 1.25rem;
}

.fault-contact-lock-overlay p {
  max-width: 620px;
  margin: 8px 0 14px;
  color: rgba(255, 255, 255, .76);
  font-size: .82rem;
  line-height: 1.45;
}

.fault-contact-lock-overlay .button {
  min-height: 42px;
  padding: 10px 16px;
  color: var(--navy);
  background: #ffffff;
}

@media (max-width: 760px) {
  .fault-contact-card {
    min-height: 345px;
    padding: 20px;
  }

  .fault-contact-details {
    grid-template-columns: 1fr;
  }

  .fault-contact-brand img {
    width: 64px;
    height: 64px;
  }

  .fault-contact-lock-overlay {
    clip-path:
      polygon(
        0 50%,
        100% 24%,
        100% 100%,
        0 100%
      );
  }

  .fault-contact-lock-overlay > div {
    right: 20px;
    bottom: 19px;
    left: 20px;
  }
}


/* SHK_MANUFACTURER_CONTACT_SINGLE_POSITION_20260803 */

.fault-contact-single {
  margin-top: 24px;
  margin-bottom: 30px;
}

.fault-contact-single + .fault-search-results {
  margin-top: 0;
}

/* SHK_HEATING_OUTPUT_PANEL_SWITCH_CSS_20260804 */

.radiator-type-switch {
  max-width: 1400px;
  margin: 0 auto 24px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #edf3f6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.radiator-type-switch button {
  min-height: 58px;
  padding: 14px 20px;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.radiator-type-switch button:hover {
  color: var(--navy);
  transform: translateY(-1px);
}

.radiator-type-switch button.is-active {
  color: var(--navy);
  background: white;
  box-shadow: 0 8px 24px rgba(8, 43, 73, .10);
}

.radiator-type-switch button:focus-visible {
  outline: 3px solid rgba(20, 117, 177, .32);
  outline-offset: 2px;
}

.radiator-type-switch[hidden] {
  display: none;
}

#panel-radiator-panel[hidden],
#radiator-calculate-panel[hidden],
#radiator-exchange-panel[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .radiator-type-switch {
    margin-right: 14px;
    margin-left: 14px;
    grid-template-columns: 1fr;
  }

  .radiator-type-switch button {
    min-height: 52px;
  }
}

/* SHK_FAULT_SEARCH_STATS_HIGHLIGHT_CSS_20260804 */
.fault-search-stats-highlight {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 1rem;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.07)
    );
  box-shadow: 0 1rem 2.5rem rgba(3, 30, 52, 0.18);
  backdrop-filter: blur(8px);
}

.fault-search-stats-highlight strong {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.fault-search-stats-highlight span {
  font-weight: 800;
}

.fault-search-stats-highlight small {
  margin-top: 0.25rem;
  opacity: 0.85;
  font-size: 0.88rem;
}

@media (max-width: 720px) {
  .fault-search-stats-highlight {
    width: 100%;
    box-sizing: border-box;
  }
}

/* SHK_FAULT_RESULT_DIAGNOSTIC_CSS_20260804 */
.fault-diagnostic-tree,
.fault-sensor-data {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(15, 63, 91, 0.16);
  border-radius: 1rem;
  background: #f7fafc;
}

.fault-diagnostic-tree > summary,
.fault-sensor-data > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.fault-diagnostic-tree > summary::-webkit-details-marker,
.fault-sensor-data > summary::-webkit-details-marker {
  display: none;
}

.fault-diagnostic-tree > summary span,
.fault-sensor-data > summary span {
  color: #537084;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fault-diagnostic-tree > summary strong,
.fault-sensor-data > summary strong {
  grid-column: 1;
  color: #092d4c;
}

.fault-diagnostic-tree > summary small,
.fault-sensor-data > summary small {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #537084;
}

.fault-diagnostic-tree-body,
.fault-sensor-data-body {
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid rgba(15, 63, 91, 0.12);
}

.fault-diagnostic-intro {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 0.25rem solid #0b6fa4;
  background: #ffffff;
}

.fault-diagnostic-steps {
  display: grid;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.fault-diagnostic-steps > li {
  padding: 1rem;
  border: 1px solid rgba(15, 63, 91, 0.12);
  border-radius: 0.85rem;
  background: #ffffff;
}

.fault-diagnostic-steps > li > header,
.fault-sensor-curve > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.fault-diagnostic-steps > li > header span,
.fault-sensor-curve > header span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fault-diagnostic-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.fault-diagnostic-branches section {
  padding: 0.85rem;
  border-radius: 0.75rem;
  background: #edf5f9;
}

.fault-diagnostic-branches section > span {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-weight: 900;
}

.fault-diagnostic-branches .is-general {
  grid-column: 1 / -1;
}

.fault-diagnostic-note {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.7rem;
  background: #fff8df;
}

.fault-sensor-curve {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(15, 63, 91, 0.12);
  border-radius: 0.85rem;
  background: #ffffff;
}

.fault-sensor-curve h4 {
  margin: 0.2rem 0 0;
}

.fault-sensor-table-wrap {
  margin-top: 0.85rem;
  overflow-x: auto;
}

.fault-sensor-table {
  width: 100%;
  border-collapse: collapse;
}

.fault-sensor-table th,
.fault-sensor-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(15, 63, 91, 0.1);
  text-align: left;
}

.fault-sensor-table th {
  color: #537084;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.fault-sensor-tolerance {
  display: block;
  margin-top: 0.75rem;
  color: #537084;
}

@media (max-width: 720px) {
  .fault-diagnostic-branches {
    grid-template-columns: 1fr;
  }

  .fault-diagnostic-branches .is-general {
    grid-column: auto;
  }

  .fault-diagnostic-tree > summary,
  .fault-sensor-data > summary {
    grid-template-columns: 1fr;
  }

  .fault-diagnostic-tree > summary small,
  .fault-sensor-data > summary small {
    grid-column: 1;
    grid-row: auto;
  }
}


/* SHK_FAULT_RESULT_MANUFACTURER_DIAGNOSIS_CSS_20260804 */
.fault-manufacturer-diagnosis {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color, #d9e1e8);
  border-radius: 0.9rem;
  background: var(--surface-soft, #f7fafc);
}

.fault-manufacturer-diagnosis > header {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.85rem;
}

.fault-manufacturer-diagnosis > header span,
.fault-manufacturer-diagnosis-grid article > span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.fault-manufacturer-diagnosis > header strong {
  font-size: 1rem;
}

.fault-manufacturer-diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 16rem), 1fr)
  );
  gap: 0.75rem;
}

.fault-manufacturer-diagnosis-grid article {
  padding: 0.85rem;
  border: 1px solid var(--border-color, #d9e1e8);
  border-radius: 0.75rem;
  background: var(--surface, #ffffff);
}

.fault-manufacturer-diagnosis-grid article p {
  margin: 0.45rem 0 0;
  line-height: 1.55;
}

/* SHK_SANITAER_DESIGN_20260805 */

.sanitary-hub-page {
  background:
    linear-gradient(
      180deg,
      #f6fbfd 0,
      #ffffff 680px
    );
}

.sanitary-hub-hero {
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(0, 149, 205, 0.14),
      transparent 32%
    );
}

.sanitary-hero-visual,
.sanitary-dle-hero-video {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      #e9f8fc,
      #c7e7f1
    );
}

.sanitary-water-animation {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.sanitary-pipe {
  width: 29%;
  height: 28px;
  border-radius: 20px;
}

.sanitary-pipe-cold {
  background:
    linear-gradient(
      90deg,
      #006bc7,
      #39c0f2
    );
}

.sanitary-pipe-hot {
  background:
    linear-gradient(
      90deg,
      #ffb14a,
      #d94b2b
    );
}

.sanitary-heater-symbol {
  display: grid;
  place-items: center;
  width: 130px;
  height: 220px;
  border: 1px solid rgba(7, 62, 89, 0.18);
  border-radius: 26px;
  background: #ffffff;
  color: #073e59;
  font-size: 2rem;
  font-weight: 900;
  box-shadow:
    0 24px 44px rgba(7, 62, 89, 0.18);
}

.sanitary-heater-media,
.sanitary-placeholder-media {
  position: relative;
  width: 100%;
  height: 310px;
  min-height: 310px;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #eaf8fc,
      #d4edf4
    );
}

.sanitary-heater-media video,
.sanitary-dle-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sanitary-heater-fallback,
.sanitary-dle-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 40px;
  background:
    linear-gradient(
      145deg,
      rgba(234, 248, 252, 0.96),
      rgba(212, 237, 244, 0.96)
    );
  color: #073e59;
}

.sanitary-heater-media video[src],
.sanitary-dle-hero-video video[src] {
  position: relative;
  z-index: 2;
}

.sanitary-heater-fallback strong,
.sanitary-dle-fallback strong {
  display: grid;
  place-items: center;
  width: 120px;
  height: 180px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 20px 40px rgba(7, 62, 89, 0.18);
  font-size: 1.45rem;
}

.sanitary-flow-cold,
.sanitary-dle-cold {
  color: #0074c8;
  font-weight: 900;
}

.sanitary-flow-hot,
.sanitary-dle-hot {
  color: #d44b2b;
  font-weight: 900;
}

.sanitary-placeholder-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #073e59;
}

.sanitary-placeholder-media strong {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
}

.sanitary-placeholder-media span {
  color: #4e7181;
  font-weight: 700;
}

.sanitary-calculator-page {
  background:
    linear-gradient(
      180deg,
      #f7fcfe 0,
      #ffffff 760px
    );
}

.sanitary-calculator-hero {
  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(0, 149, 205, 0.12),
      transparent 34%
    );
}

.sanitary-dle-hero-video {
  min-height: 430px;
}

.sanitary-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 26px;
  padding: 6px;
  border: 1px solid #d5e4eb;
  border-radius: 18px;
  background: #edf5f8;
}

.sanitary-mode-switch button {
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #48697a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sanitary-mode-switch button.is-active {
  background: #ffffff;
  color: #006fae;
  box-shadow:
    0 8px 20px rgba(7, 62, 89, 0.1);
}

.sanitary-dle-presets {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 20px;
  border-radius: 20px;
  background: #edf7fa;
}

.sanitary-dle-presets > span {
  color: #375d70;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sanitary-dle-presets > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sanitary-dle-presets button {
  padding: 10px 14px;
  border: 1px solid #bfd7e2;
  border-radius: 999px;
  background: #ffffff;
  color: #075f8d;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sanitary-dle-presets button:hover {
  border-color: #0089c6;
}

.sanitary-dle-season-grid {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #eef8fb,
      #ffffff
    );
}

.sanitary-dle-season-grid h4 {
  margin: 0 0 6px;
  color: #073e59;
  font-size: 1rem;
}

.sanitary-dle-season-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid #dceaf0;
}

.sanitary-dle-season-grid > div:last-child {
  border-bottom: 0;
}

.sanitary-dle-season-grid span {
  color: #587585;
}

.sanitary-dle-season-grid strong {
  color: #073e59;
}

@media (max-width: 760px) {
  .sanitary-hero-visual,
  .sanitary-dle-hero-video {
    min-height: 260px;
  }

  .sanitary-heater-media,
  .sanitary-placeholder-media {
    height: 235px;
    min-height: 235px;
  }

  .sanitary-mode-switch {
    grid-template-columns: 1fr;
  }

  .sanitary-dle-fallback,
  .sanitary-heater-fallback {
    padding: 24px;
  }

  .sanitary-heater-fallback strong,
  .sanitary-dle-fallback strong {
    width: 92px;
    height: 135px;
    font-size: 1.1rem;
  }
}


/* SHK_DLE_HEADLINE_WIDTH_FIX_20260805 */

.sanitary-calculator-hero .radiator-calculator-copy {
  min-width: 0;
}

.sanitary-calculator-hero .radiator-calculator-copy h1 {
  max-width: 100%;
  font-size: clamp(3.8rem, 6.3vw, 6.7rem);
  overflow-wrap: anywhere;
}

@media (min-width: 1100px) {
  .sanitary-calculator-hero {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(500px, 1.05fr);
    gap: 54px;
  }
}

@media (max-width: 760px) {
  .sanitary-calculator-hero .radiator-calculator-copy h1 {
    font-size: clamp(3rem, 15vw, 4.8rem);
  }
}


/* SHK_DLE_COST_CALCULATOR_CSS_20260805 */

.sanitary-dle-cost-input {
  display: grid;
  gap: 22px;
  margin-top: 30px;
  padding: 26px;
  border: 1px solid #cfe1e9;
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      #f0f9fc,
      #ffffff
    );
}

.sanitary-dle-cost-input > header {
  display: grid;
  gap: 8px;
}

.sanitary-dle-cost-input > header div {
  display: grid;
  gap: 4px;
}

.sanitary-dle-cost-input > header span {
  color: #0080b7;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sanitary-dle-cost-input > header strong {
  color: #073e59;
  font-size: 1.35rem;
}

.sanitary-dle-cost-input > header p {
  margin: 0;
  color: #567483;
  line-height: 1.55;
}

.sanitary-cost-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: #dfeef3;
}

.sanitary-cost-mode-switch button {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #486a7a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sanitary-cost-mode-switch button.is-active {
  background: #ffffff;
  color: #0079ae;
  box-shadow:
    0 8px 18px rgba(7, 62, 89, 0.1);
}

.sanitary-dle-cost-hint {
  padding: 18px 20px;
  border-left: 4px solid #00a1c9;
  border-radius: 14px;
  background: #e8f7fb;
}

.sanitary-dle-cost-hint strong {
  display: block;
  margin-bottom: 5px;
  color: #073e59;
}

.sanitary-dle-cost-hint p {
  margin: 0;
  color: #537381;
  line-height: 1.55;
}

.sanitary-dle-cost-results {
  display: grid;
  gap: 20px;
  margin-top: 26px;
  padding: 24px;
  border: 1px solid #cfe1e9;
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      #edf9fc,
      #ffffff
    );
}

.sanitary-dle-cost-results > header {
  display: grid;
  gap: 4px;
}

.sanitary-dle-cost-results > header span {
  color: #0080b7;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sanitary-dle-cost-results > header strong {
  color: #073e59;
  font-size: 1.2rem;
}

.sanitary-dle-cost-main {
  display: grid;
  gap: 5px;
  padding: 22px;
  border-radius: 20px;
  background: #073e59;
  color: #ffffff;
}

.sanitary-dle-cost-main span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 700;
}

.sanitary-dle-cost-main strong {
  font-size: clamp(2rem, 5vw, 3rem);
}

.sanitary-dle-cost-main small {
  color: rgba(255, 255, 255, 0.68);
}

.sanitary-dle-cost-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sanitary-dle-cost-periods > div {
  display: grid;
  gap: 5px;
  padding: 16px;
  border-radius: 16px;
  background: #e6f3f7;
}

.sanitary-dle-cost-periods span {
  color: #587685;
  font-size: 0.8rem;
}

.sanitary-dle-cost-periods strong {
  color: #073e59;
  font-size: 1.05rem;
}

.sanitary-dle-cost-annual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid #d5e7ed;
}

.sanitary-dle-cost-annual span {
  color: #587685;
}

.sanitary-dle-cost-annual strong {
  color: #073e59;
}

@media (max-width: 760px) {
  .sanitary-dle-cost-input,
  .sanitary-dle-cost-results {
    padding: 20px;
  }

  .sanitary-dle-cost-periods {
    grid-template-columns: 1fr;
  }

  .sanitary-cost-mode-switch {
    grid-template-columns: 1fr;
  }
}


/* SHK_DHB_TITLE_VIDEO_FIX_CSS_20260805 */

.sanitary-calculator-hero .sanitary-dhb-title {
  margin-bottom: 0;
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  overflow-wrap: normal;
  word-break: normal;
}

.sanitary-dhb-subtitle {
  margin: 22px 0 24px;
  color: #315d75;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
}

/*
 * Das Video bleibt unsichtbar, bis der Browser tatsächlich
 * Bilddaten geladen hat. Bis dahin bleibt der Fallback sichtbar.
 */

.sanitary-heater-media video,
.sanitary-dle-hero-video video {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 220ms ease;
}

.sanitary-heater-fallback,
.sanitary-dle-fallback {
  z-index: 1;
}

.sanitary-video-ready video {
  opacity: 1;
}

.sanitary-video-ready .sanitary-heater-fallback,
.sanitary-video-ready .sanitary-dle-fallback {
  visibility: hidden;
}

@media (max-width: 760px) {
  .sanitary-calculator-hero .sanitary-dhb-title {
    font-size: clamp(4.5rem, 24vw, 7rem);
  }

  .sanitary-dhb-subtitle {
    margin-top: 16px;
  }
}


/* SHK_DLE_COST_LAYOUT_REFRESH_CSS_20260805 */

.sanitary-dle-cost-results {
  display: grid;
  gap: 20px;
  margin-top: 26px;
}

.sanitary-dle-cost-results-header {
  display: grid;
  gap: 4px;
}

.sanitary-dle-cost-results-header span {
  color: #9a6a46;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sanitary-dle-cost-results-header strong {
  color: #0a3152;
  font-size: 1.25rem;
}

.sanitary-dle-cost-highlight {
  display: grid;
  gap: 8px;
  padding: 24px 26px;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      #103d67 0%,
      #0f517c 62%,
      #3c5e7b 100%
    );
  color: #ffffff;
  box-shadow:
    0 18px 38px rgba(10, 49, 82, 0.18);
}

.sanitary-dle-cost-highlight span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.9rem;
  font-weight: 700;
}

.sanitary-dle-cost-highlight strong {
  font-size: clamp(2.7rem, 6vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.sanitary-dle-cost-highlight small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.45;
}

.sanitary-dle-cost-list {
  margin-top: 0;
}

.sanitary-dle-cost-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.sanitary-dle-cost-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sanitary-dle-cost-periods > div {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid #d9e5ec;
  border-radius: 18px;
  background: #f7fbfd;
}

.sanitary-dle-cost-periods span {
  color: #6a8191;
  font-size: 0.82rem;
  font-weight: 700;
}

.sanitary-dle-cost-periods strong {
  color: #0a3152;
  font-size: 1.2rem;
}

.sanitary-dle-cost-annual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0 0;
  border-top: 1px solid #d9e5ec;
}

.sanitary-dle-cost-annual span {
  color: #6a8191;
}

.sanitary-dle-cost-annual strong {
  color: #0a3152;
  font-size: 1.1rem;
}

@media (max-width: 760px) {
  .sanitary-dle-cost-highlight {
    padding: 22px 20px;
  }

  .sanitary-dle-cost-highlight strong {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .sanitary-dle-cost-periods {
    grid-template-columns: 1fr;
  }

  .sanitary-dle-cost-annual {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* SHK_DLE_BATHTUB_MODE_CSS_20260805 */

.sanitary-dle-bath-volume {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid #cbdfe8;
  border-radius: 16px;
  background: #ffffff;
}

.sanitary-dle-bath-volume[hidden] {
  display: none;
}

.sanitary-dle-bath-volume > span {
  color: #587585;
  font-size: 0.82rem;
  font-weight: 700;
}

.sanitary-dle-bath-volume > strong {
  color: #073e59;
  font-size: 1.55rem;
}

.sanitary-dle-bath-volume > small {
  color: #6b8390;
  line-height: 1.35;
}


/* SHK_DLE_RESULT_PANEL_LAYOUT_CSS_20260805 */

.sanitary-dle-result-card {
  display: block;
}

.sanitary-dle-result-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
  align-items: start;
}

.sanitary-dle-result-panel {
  min-width: 0;
  height: 100%;
  border: 1px solid #d7e4eb;
  border-radius: 26px;
  background: #ffffff;
  box-shadow:
    0 12px 30px rgba(7, 43, 72, 0.06);
}

.sanitary-dle-performance-panel {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 24px;
}

.sanitary-dle-performance-panel
.warmup-summary-grid,
.sanitary-dle-performance-panel
.radiator-main-result,
.sanitary-dle-performance-panel
.radiator-result-list,
.sanitary-dle-performance-panel
.warmup-calculation-path {
  margin-top: 0;
  margin-bottom: 0;
}

.sanitary-dle-performance-panel
.radiator-main-result {
  width: 100%;
}

.sanitary-dle-cost-results {
  display: grid;
  align-content: start;
  gap: 20px;
  margin-top: 0;
  padding: 24px;
}

.sanitary-dle-result-panels
.sanitary-dle-cost-highlight {
  margin: 0;
}

.sanitary-dle-result-panels
.radiator-result-list {
  margin-top: 0;
}

.sanitary-dle-season-grid,
#dle-practical-note {
  margin-top: 24px;
}

@media (max-width: 1180px) {
  .sanitary-dle-result-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sanitary-dle-result-panels {
    gap: 18px;
  }

  .sanitary-dle-performance-panel,
  .sanitary-dle-cost-results {
    padding: 20px;
  }
}

/* SHK_DLE_RESULT_BLOCKS_STACKED_20260805 */

.sanitary-dle-result-panels {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

.sanitary-dle-performance-panel,
.sanitary-dle-cost-results {
  width: 100%;
  height: auto;
}

.sanitary-dle-performance-panel {
  padding: 28px;
}

.sanitary-dle-cost-results {
  padding: 28px;
}

.sanitary-dle-performance-panel
.warmup-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sanitary-dle-performance-panel
.sanitary-dle-main-result,
.sanitary-dle-cost-highlight {
  min-height: 180px;
}

.sanitary-dle-performance-panel
.sanitary-dle-main-result strong,
.sanitary-dle-cost-highlight strong {
  font-size: clamp(3.4rem, 6vw, 5.5rem);
  line-height: 0.95;
}

.sanitary-dle-cost-periods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .sanitary-dle-performance-panel,
  .sanitary-dle-cost-results {
    padding: 20px;
  }

  .sanitary-dle-performance-panel
  .warmup-summary-grid,
  .sanitary-dle-cost-periods {
    grid-template-columns: 1fr;
  }

  .sanitary-dle-performance-panel
  .sanitary-dle-main-result,
  .sanitary-dle-cost-highlight {
    min-height: 0;
  }
}


/* SHK_SANITAER_MISCHWASSER_CSS_20260805 */

.sanitary-mixing-media,
.mixing-hero-video {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      #d9f1fb,
      #fff0e5
    );
}

.sanitary-mixing-media {
  width: 100%;
  height: 310px;
}

.sanitary-mixing-media video,
.mixing-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sanitary-mixing-caption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: grid;
  gap: 4px;
  padding: 14px 17px;
  border-radius: 16px;
  background: rgba(7, 43, 72, 0.88);
  color: #ffffff;
}

.sanitary-mixing-caption span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mixing-hero-video {
  min-height: 430px;
  border-radius: 28px;
}

.mixing-page-title {
  font-size: clamp(4.4rem, 8vw, 8rem);
}

.mixing-mode-switch button {
  font-size: 0.92rem;
}

.mixing-main-result {
  background:
    linear-gradient(
      135deg,
      #0c4771,
      #a95839
    );
}

@media (max-width: 760px) {
  .sanitary-mixing-media {
    height: 235px;
  }

  .mixing-hero-video {
    min-height: 260px;
  }

  .mixing-page-title {
    font-size: clamp(3.4rem, 17vw, 5.5rem);
  }
}


/* SHK_SANITAER_GEFAELLE_CSS_20260805 */

.sanitary-slope-media,
.slope-hero-video {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #e8f1f5,
      #cbdde5
    );
}

.sanitary-slope-media {
  width: 100%;
  height: 310px;
}

.sanitary-slope-media video,
.slope-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sanitary-slope-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 34px;
  color: #073e59;
  background:
    linear-gradient(
      145deg,
      rgba(232, 241, 245, 0.96),
      rgba(203, 221, 229, 0.96)
    );
}

.sanitary-slope-line {
  width: min(330px, 75%);
  height: 26px;
  border-radius: 20px;
  background:
    linear-gradient(
      90deg,
      #7f929e,
      #475f6e
    );
  transform: rotate(4deg);
  box-shadow:
    0 18px 28px rgba(7, 43, 72, 0.16);
}

.sanitary-slope-fallback strong {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.sanitary-slope-fallback span {
  color: #526e7d;
  font-weight: 800;
}

.slope-hero-video {
  min-height: 430px;
  border-radius: 28px;
}

.slope-page-title {
  font-size: clamp(4.8rem, 9vw, 8.5rem);
}

.slope-example-buttons {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 20px;
  border-radius: 20px;
  background: #edf5f8;
}

.slope-example-buttons > span {
  color: #476777;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slope-example-buttons > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.slope-example-buttons button {
  padding: 10px 15px;
  border: 1px solid #c4d7e0;
  border-radius: 999px;
  background: #ffffff;
  color: #075d86;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.slope-main-result {
  background:
    linear-gradient(
      135deg,
      #153f5d,
      #527282
    );
}

@media (max-width: 760px) {
  .sanitary-slope-media {
    height: 235px;
  }

  .slope-hero-video {
    min-height: 260px;
  }

  .slope-page-title {
    font-size: clamp(4rem, 21vw, 6.5rem);
  }
}

/* SHK_SANITAER_VIDEO_FALLBACK_ALL_TYPES_FIX_20260805 */

.sanitary-mixing-media video,
.mixing-hero-video video,
.sanitary-slope-media video,
.slope-hero-video video {
  position: relative;
  z-index: 1;
}

.sanitary-slope-fallback {
  z-index: 2;
}

.sanitary-video-ready .sanitary-slope-fallback,
.sanitary-video-ready .sanitary-heater-fallback {
  display: none !important;
}

.shk-label-with-info {
  align-items: center;
}

.shk-label-with-info > span:first-child {
  min-width: 0;
}


/* SHK_SANITAER_ROHRINHALT_CSS_20260805 */

.sanitary-pipe-volume-media,
.pipe-volume-hero-video {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #e6f4f9,
      #c9e5ef
    );
}

.sanitary-pipe-volume-media {
  width: 100%;
  height: 310px;
}

.sanitary-pipe-volume-media video,
.pipe-volume-hero-video video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sanitary-pipe-volume-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: #073e59;
  background:
    linear-gradient(
      145deg,
      rgba(230, 244, 249, 0.97),
      rgba(201, 229, 239, 0.97)
    );
}

.sanitary-pipe-volume-fallback strong {
  font-size: clamp(1.5rem, 3vw, 2.7rem);
}

.sanitary-pipe-volume-fallback span {
  color: #547685;
  font-weight: 800;
}

.sanitary-video-ready
.sanitary-pipe-volume-fallback {
  display: none !important;
}

.pipe-volume-hero-video {
  min-height: 430px;
  border-radius: 28px;
}

.pipe-volume-page-title {
  font-size: clamp(4.3rem, 8vw, 7.5rem);
}

.pipe-volume-sections {
  display: grid;
  gap: 18px;
}

.pipe-volume-section {
  padding: 20px;
  border: 1px solid #d4e3e9;
  border-radius: 20px;
  background: #f7fbfc;
}

.pipe-volume-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pipe-volume-section > header strong {
  color: #173f58;
  font-size: 1.03rem;
}

.pipe-volume-section > header span {
  padding: 7px 12px;
  border-radius: 999px;
  background: #dceef4;
  color: #075d86;
  font-weight: 900;
}

.pipe-volume-flow-field {
  margin-top: 22px;
}

.pipe-volume-main-result {
  background:
    linear-gradient(
      135deg,
      #0b5275,
      #247e98
    );
}

@media (max-width: 760px) {
  .sanitary-pipe-volume-media {
    height: 235px;
  }

  .pipe-volume-hero-video {
    min-height: 260px;
  }

  .pipe-volume-page-title {
    font-size: clamp(3.2rem, 16vw, 5.4rem);
  }

  .pipe-volume-section {
    padding: 16px;
  }
}


/* SHK_ABWASSER_VERLEGUNG_CSS_20260805 */

.sanitary-drainage-installation-media,
.drainage-installation-hero-video {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #edf2f4,
      #cad8de
    );
}

.sanitary-drainage-installation-media {
  width: 100%;
  height: 310px;
}

.sanitary-drainage-installation-media video,
.drainage-installation-hero-video video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sanitary-drainage-installation-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: #173f58;
  background:
    linear-gradient(
      145deg,
      rgba(237, 242, 244, 0.98),
      rgba(202, 216, 222, 0.98)
    );
}

.sanitary-drainage-installation-fallback strong {
  font-size: clamp(2rem, 5vw, 4rem);
}

.sanitary-drainage-installation-fallback span {
  color: #58717e;
  font-weight: 800;
}

.sanitary-video-ready
.sanitary-drainage-installation-fallback {
  display: none !important;
}

.drainage-installation-hero-video {
  min-height: 430px;
  border-radius: 28px;
}

.drainage-installation-page
.radiator-calculator-copy h1 {
  display: grid;
  gap: 0;
  font-size: clamp(3.5rem, 7vw, 6.7rem);
  line-height: 0.92;
}

.drainage-installation-page
.radiator-calculator-copy h1 small {
  margin-top: 12px;
  color: #56717e;
  font-size: 0.42em;
}

.drainage-guidance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.drainage-fastening-main-result {
  background:
    linear-gradient(
      135deg,
      #174d68,
      #527785
    );
}

@media (max-width: 980px) {
  .drainage-guidance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .sanitary-drainage-installation-media {
    height: 235px;
  }

  .drainage-installation-hero-video {
    min-height: 260px;
  }

  .drainage-guidance-grid {
    grid-template-columns: 1fr;
  }
}


/* SHK_ABWASSER_GUIDANCE_DETAILS_CSS_20260805 */

/* Titelüberlappung zuverlässig beheben */
.drainage-installation-page
.radiator-calculator-copy h1 {
  display: block !important;
  max-width: 100%;
  margin-bottom: 28px;
  font-size: clamp(3.4rem, 6.7vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.drainage-installation-page
.radiator-calculator-copy h1 small {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  color: #537080;
  font-size: clamp(1.6rem, 3vw, 2.7rem) !important;
  font-weight: 750;
  line-height: 1.05 !important;
  letter-spacing: -0.035em;
  transform: none !important;
}

.drainage-guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #d8e3e8;
  border-left: 1px solid #d8e3e8;
}

.drainage-guidance-card {
  min-width: 0;
  padding: 30px;
  border-right: 1px solid #d8e3e8;
  border-bottom: 1px solid #d8e3e8;
  background: #ffffff;
}

.drainage-guidance-card > header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 18px;
}

.drainage-guidance-card > header > div {
  display: grid;
  gap: 9px;
}

.drainage-guidance-card > header strong {
  color: #082f50;
  font-size: 1.08rem;
}

.drainage-guidance-card > header p {
  margin: 0;
  color: #5a7280;
  line-height: 1.55;
}

.drainage-guidance-card details {
  margin-top: 22px;
  border-top: 1px solid #e1e9ed;
}

.drainage-guidance-card summary {
  position: relative;
  padding: 17px 30px 0 0;
  color: #0872b8;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.drainage-guidance-card summary::-webkit-details-marker {
  display: none;
}

.drainage-guidance-card summary::after {
  content: "+";
  position: absolute;
  top: 12px;
  right: 0;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #bad4df;
  border-radius: 50%;
  background: #f2f8fa;
  font-size: 1.15rem;
  line-height: 1;
}

.drainage-guidance-card details[open] summary::after {
  content: "−";
}

.drainage-guidance-details {
  display: grid;
  gap: 18px;
  padding-top: 18px;
}

.drainage-guidance-details ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: #496674;
  line-height: 1.5;
}

.drainage-guidance-warning {
  margin: 0;
  padding: 14px 16px;
  border-left: 4px solid #e0a148;
  border-radius: 0 12px 12px 0;
  background: #fff8ee;
  color: #71582f;
  line-height: 1.5;
}

.drainage-guidance-action {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 43px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #0872b8;
  color: #ffffff;
  font-weight: 850;
  text-decoration: none;
}

.drainage-guidance-action:hover,
.drainage-guidance-action:focus-visible {
  background: #065f99;
}

#befestigungsrechner {
  scroll-margin-top: 30px;
}

@media (max-width: 1050px) {
  .drainage-guidance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .drainage-installation-page
  .radiator-calculator-copy h1 {
    font-size: clamp(3rem, 16vw, 4.8rem);
  }

  .drainage-installation-page
  .radiator-calculator-copy h1 small {
    margin-top: 13px !important;
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
  }

  .drainage-guidance-grid {
    grid-template-columns: 1fr;
  }

  .drainage-guidance-card {
    padding: 24px 20px;
  }
}


/* SHK_ABWASSER_CONNECTION_GUIDANCE_CSS_20260805 */

.drainage-connection-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.drainage-connection-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #d8e3e8;
  border-radius: 18px;
  background: #f8fbfc;
}

.drainage-connection-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drainage-connection-card-head strong {
  color: #082f50;
  line-height: 1.3;
}

.drainage-connection-status {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 900;
}

.drainage-connection-status.is-good {
  background: #2d8751;
}

.drainage-connection-status.is-bad {
  background: #ba4949;
}

.drainage-connection-card p {
  margin: 0;
  color: #58707d;
  line-height: 1.5;
}

.drainage-connection-diagram {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border-radius: 16px;
}

.drainage-connection-good {
  background:
    linear-gradient(
      145deg,
      #e8f6ed,
      #d4ebdc
    );
}

.drainage-connection-bad {
  background:
    linear-gradient(
      145deg,
      #fff0f0,
      #f3d7d7
    );
}

.drainage-stack {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 57%;
  width: 42px;
  border-radius: 18px;
  background:
    linear-gradient(
      90deg,
      #677985,
      #a7b5bc,
      #596d78
    );
  box-shadow:
    0 12px 26px rgba(23, 63, 88, 0.2);
}

.drainage-branch {
  position: absolute;
  left: 13%;
  width: 48%;
  height: 34px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #a7b5bc,
      #617580
    );
  transform-origin: right center;
}

.drainage-branch-good {
  top: 45%;
  transform: rotate(22deg);
}

.drainage-branch-bad {
  top: 42%;
  transform: rotate(-38deg);
}

.drainage-flow {
  position: absolute;
  z-index: 2;
  width: 14px;
  border-radius: 999px;
  background: rgba(29, 132, 184, 0.78);
}

.drainage-flow-good {
  top: 42%;
  left: 49%;
  height: 91px;
  transform: rotate(-12deg);
}

.drainage-turbulence {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 52%;
  width: 55px;
  height: 55px;
  border: 7px solid rgba(187, 66, 66, 0.65);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(25deg);
}

@media (max-width: 760px) {
  .drainage-connection-compare {
    grid-template-columns: 1fr;
  }

  .drainage-connection-diagram {
    min-height: 160px;
  }
}


/* SHK_ABWASSER_FALLLEITUNGSFUSS_GUIDANCE_CSS_20260805 */

.drainage-foot-guidance-card {
  grid-column: span 2;
}

.drainage-foot-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.drainage-foot-example {
  display: grid;
  align-content: start;
  gap: 15px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #d8e3e8;
  border-radius: 18px;
  background: #f8fbfc;
}

.drainage-foot-example > header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.drainage-foot-example > header span {
  display: grid;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 900;
}

.drainage-foot-example.is-recommended > header span {
  background: #2d8751;
}

.drainage-foot-example.is-check > header span {
  background: #d18a30;
}

.drainage-foot-example > header strong {
  color: #082f50;
}

.drainage-foot-example p {
  margin: 0;
  color: #58707d;
  line-height: 1.55;
}

.drainage-foot-diagram {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      #eef4f6,
      #dbe7eb
    );
}

.drainage-foot-vertical,
.drainage-foot-sharp-vertical {
  position: absolute;
  top: 20px;
  left: 36%;
  width: 42px;
  height: 95px;
  border-radius: 18px;
  background:
    linear-gradient(
      90deg,
      #667a85,
      #afbbc1,
      #566b76
    );
}

.drainage-foot-bend-one {
  position: absolute;
  top: 96px;
  left: 39%;
  width: 90px;
  height: 38px;
  border-radius: 18px;
  background: #71848e;
  transform: rotate(45deg);
  transform-origin: left center;
}

.drainage-foot-middle {
  position: absolute;
  top: 147px;
  left: 53%;
  width: 62px;
  height: 38px;
  border-radius: 18px;
  background: #71848e;
  transform: rotate(45deg);
}

.drainage-foot-bend-two {
  position: absolute;
  top: 177px;
  left: 65%;
  width: 70px;
  height: 38px;
  border-radius: 18px;
  background: #71848e;
  transform: rotate(-45deg);
}

.drainage-foot-horizontal {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34%;
  height: 42px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #aab7bd,
      #60747f
    );
}

.drainage-foot-sharp-bend {
  position: absolute;
  top: 92px;
  left: 36%;
  width: 68px;
  height: 68px;
  border-right: 42px solid #71848e;
  border-bottom: 42px solid #71848e;
  border-radius: 0 0 35px 0;
}

.drainage-foot-sharp-horizontal {
  position: absolute;
  top: 118px;
  left: 47%;
  right: 18px;
  height: 42px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #aab7bd,
      #60747f
    );
}

.drainage-foot-pressure-zone {
  position: absolute;
  top: 93px;
  left: 43%;
  width: 78px;
  height: 78px;
  border: 8px solid rgba(202, 76, 67, 0.58);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(25deg);
}

.drainage-height-ranges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.drainage-height-ranges article {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 17px;
  border: 1px solid #dbe5e9;
  border-radius: 16px;
  background: #ffffff;
}

.drainage-height-ranges article > span {
  color: #0872b8;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drainage-height-ranges article strong {
  color: #082f50;
}

.drainage-height-ranges article p {
  margin: 0;
  color: #58707d;
  line-height: 1.5;
}

.drainage-guidance-source {
  margin: 0;
  padding-top: 4px;
  color: #607783;
  font-size: 0.9rem;
}

.drainage-guidance-source a {
  color: #0872b8;
  font-weight: 800;
}

@media (max-width: 1050px) {
  .drainage-foot-guidance-card {
    grid-column: span 2;
  }

  .drainage-height-ranges {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .drainage-foot-guidance-card {
    grid-column: auto;
  }

  .drainage-foot-comparison {
    grid-template-columns: 1fr;
  }

  .drainage-foot-diagram {
    min-height: 190px;
  }
}


/* SHK_ABWASSER_CONNECTION_GRAPHICS_REMOVED_CSS_20260805 */

.drainage-guidance-note {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid #cfe0e7;
  border-radius: 16px;
  background: #f3f8fa;
}

.drainage-guidance-note strong {
  color: #082f50;
}

.drainage-guidance-note p {
  margin: 0;
  color: #58707d;
  line-height: 1.55;
}

/*
 * Die alte Anschluss-Winkelgrafik bleibt bewusst ungenutzt.
 * Fachliche Winkelvergleiche erfolgen nur noch beim
 * Fallleitungsfuß und der Umlenkung.
 */
.drainage-connection-compare {
  display: none !important;
}


/* SHK_ABWASSER_FALLLEITUNGSFUSS_GRAPHICS_REMOVED_CSS_20260805 */

.drainage-foot-comparison,
.drainage-foot-example,
.drainage-foot-diagram {
  display: none !important;
}


/* SHK_SANITAER_ABWASSER_SECTION_CSS_20260805 */

.home-domain-card-link {
  color: inherit;
  text-decoration: none;
}

.home-domain-card-link:hover {
  transform: translateY(-3px);
}

.home-domain-card-link:focus-visible {
  outline: 3px solid rgba(8, 114, 184, 0.35);
  outline-offset: 4px;
}

.sanitary-category-heading {
  grid-column: 1 / -1;
  scroll-margin-top: 110px;
  margin: 18px 0 2px;
  padding: 25px 27px;
  border: 1px solid #d6e3e9;
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      #f5fafc,
      #e9f3f7
    );
}

.sanitary-category-heading > span {
  display: block;
  margin-bottom: 7px;
  color: #0872b8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sanitary-category-heading h2 {
  margin: 0;
  color: #082f50;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.sanitary-category-heading p {
  max-width: 760px;
  margin: 9px 0 0;
  color: #58707d;
  line-height: 1.55;
}

@media (max-width: 680px) {
  .sanitary-category-heading {
    padding: 20px;
  }
}


/* SHK_SANITAER_ABWASSER_ANCHOR_ONLY_CSS_20260805 */

.sanitary-section-anchor {
  display: block;
  grid-column: 1 / -1;
  height: 0;
  scroll-margin-top: 110px;
}


/* SHK_SANITAER_ABWASSER_ANCHOR_REMOVED_CSS_20260805 */

/*
 * Die eigenständige Abwasserkarte wurde entfernt.
 * Entwässerung bleibt vollständig im Bereich Sanitär.
 */


/* SHK_MATHEMATIK_OVERVIEW_CARDS_CSS_20260805 */

.mathematics-hub-page {
  background:
    radial-gradient(
      circle at 88% 4%,
      rgba(53, 126, 199, .10),
      transparent 32rem
    ),
    #f2f6f9;
}

.mathematics-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.mathematics-feature-card {
  min-width: 0;
  min-height: 330px;
  height: auto;
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(190px, .75fr);
  align-items: stretch;
  overflow: hidden;
}

.mathematics-feature-card .heating-feature-copy {
  min-width: 0;
  padding:
    clamp(28px, 3.3vw, 48px)
    clamp(25px, 3.5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mathematics-feature-card
.heating-feature-copy h3 {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin:
    12px 0
    clamp(18px, 2.2vw, 28px);
  font-size: clamp(2rem, 3vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.mathematics-feature-card
.heating-feature-copy > p:not(
  .heating-card-category
) {
  width: 100%;
  max-width: 42ch;
  margin: 0 0 20px;
  line-height: 1.58;
}

.mathematics-feature-card
.heating-card-link {
  margin-top: auto;
}

.mathematics-card-media {
  min-width: 0;
  min-height: 100%;
  padding: 34px 28px;
  border-left: 1px solid rgba(10, 55, 88, .10);
  background:
    linear-gradient(
      145deg,
      rgba(6, 65, 111, .08),
      rgba(18, 111, 153, .03)
    );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
}

.mathematics-card-media::before {
  content: "ƒ(x)";
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: white;
  background:
    linear-gradient(
      145deg,
      #075a92,
      #0a799a
    );
  display: grid;
  place-items: center;
  font-size: .92rem;
  font-weight: 950;
  box-shadow:
    0 12px 26px
    rgba(6, 65, 111, .18);
}

.mathematics-card-media strong {
  max-width: 100%;
  color: #082b49;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mathematics-card-media span {
  max-width: 22ch;
  color: #527086;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.5;
}

.mathematics-feature-active
.mathematics-card-media {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(35, 179, 173, .18),
      transparent 12rem
    ),
    linear-gradient(
      145deg,
      #edf8fa,
      #e9f2f8
    );
}

.mathematics-feature-coming {
  cursor: default;
}

.mathematics-feature-coming
.heating-card-link {
  color: #668095;
}

.mathematics-feature-coming
.mathematics-card-media {
  filter: saturate(.72);
}

@media (max-width: 1150px) {
  .mathematics-feature-card {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(165px, .55fr);
  }

  .mathematics-feature-card
  .heating-feature-copy h3 {
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  }

  .mathematics-card-media {
    padding: 28px 22px;
  }
}

@media (max-width: 900px) {
  .mathematics-feature-grid {
    grid-template-columns: 1fr;
  }

  .mathematics-feature-card {
    min-height: 0;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(190px, .6fr);
  }
}

@media (max-width: 620px) {
  .mathematics-feature-grid {
    gap: 18px;
  }

  .mathematics-feature-card {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .mathematics-feature-card
  .heating-feature-copy {
    padding: 25px 22px 28px;
  }

  .mathematics-feature-card
  .heating-feature-copy h3 {
    margin-bottom: 17px;
    font-size: clamp(1.85rem, 9vw, 2.65rem) !important;
    line-height: 1.04 !important;
  }

  .mathematics-card-media {
    min-height: 155px;
    padding: 24px 22px;
    border-top: 1px solid rgba(10, 55, 88, .10);
    border-left: 0;
  }

  .mathematics-card-media::before {
    width: 40px;
    height: 40px;
  }
}
/* SHK_MATHEMATIK_PERCENT_VISUAL_CSS_20260805 */

.percentage-calculator-page {
  background:
    radial-gradient(
      circle at 90% 4%,
      rgba(17, 111, 158, .11),
      transparent 34rem
    ),
    #f2f6f9;
}

/* Kopfbereich */

.percentage-calculator-hero {
  position: relative;
  z-index: 2;
}

.percentage-hero-visual {
  position: relative;
  min-width: 0;
  min-height: 410px;
  padding: 46px 42px 108px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(58, 205, 193, .30),
      transparent 15rem
    ),
    linear-gradient(
      145deg,
      #072f50 0%,
      #075f86 56%,
      #0b8f9a 100%
    );
  box-shadow:
    0 28px 65px
    rgba(4, 42, 70, .24);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.percentage-hero-visual::before,
.percentage-hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.percentage-hero-visual::before {
  width: 250px;
  height: 250px;
  top: -105px;
  right: -80px;
  border: 1px solid rgba(255, 255, 255, .18);
}

.percentage-hero-visual::after {
  width: 160px;
  height: 160px;
  bottom: 40px;
  left: -70px;
  background: rgba(255, 255, 255, .05);
}

.percentage-hero-ring {
  position: relative;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background:
    conic-gradient(
      #52d9c9 0 20%,
      rgba(255, 255, 255, .16) 20% 100%
    );
  display: grid;
  place-content: center;
  text-align: center;
  isolation: isolate;
  box-shadow:
    0 20px 38px
    rgba(0, 25, 44, .28);
}

.percentage-hero-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      #073a60,
      #075978
    );
  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, .12);
}

.percentage-hero-ring strong {
  color: white;
  font-size: 2.2rem;
  line-height: 1;
}

.percentage-hero-ring span {
  margin-top: 7px;
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  font-weight: 800;
}

.percentage-hero-equation {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.percentage-hero-equation span,
.percentage-hero-equation strong {
  min-width: 74px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  color: white;
  background: rgba(255, 255, 255, .10);
  text-align: center;
  backdrop-filter: blur(8px);
}

.percentage-hero-equation strong {
  background: rgba(82, 217, 201, .22);
}

.percentage-hero-equation b {
  color: rgba(255, 255, 255, .78);
  font-size: 1.15rem;
}

/* Verhindert die weiße Leiste quer über der Seite */

.percentage-hero-visual
.radiator-video-caption {
  position: absolute !important;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: auto;
  min-height: 78px;
  margin: 0;
  padding: 18px 24px;
  border-radius: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 31, 52, .94),
      rgba(5, 61, 82, .92)
    );
  color: white;
}

.percentage-hero-visual
.radiator-video-caption span,
.percentage-hero-visual
.radiator-video-caption strong {
  color: white;
}

/* Modusauswahl */

.percentage-mode-panel {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto 28px;
  padding: 14px;
  border: 1px solid rgba(10, 55, 88, .11);
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  box-shadow:
    0 18px 42px
    rgba(7, 48, 77, .08);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.percentage-mode-panel button {
  min-width: 0;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #24465f;
  background: #edf3f6;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.18;
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.percentage-mode-panel button:hover {
  transform: translateY(-1px);
  border-color: rgba(8, 103, 151, .25);
  color: #075c91;
  background: white;
}

.percentage-mode-panel button.is-active {
  border-color: #087aa0;
  color: white;
  background:
    linear-gradient(
      145deg,
      #075c91,
      #098d9c
    );
  box-shadow:
    0 10px 22px
    rgba(6, 101, 139, .22);
}

/* Rechnerkarten */

.percentage-calculator-page
.radiator-calculator-section {
  position: relative;
  z-index: 1;
  padding-top: 72px;
}

.percentage-calculator-page
.radiator-calculator-layout {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(390px, .92fr);
  gap: 28px;
}

.percentage-input-card,
.percentage-result-card {
  border-color: rgba(8, 71, 110, .12);
  box-shadow:
    0 24px 55px
    rgba(6, 49, 78, .10);
}

.percentage-input-card {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfdfe
    );
}

.percentage-rate-presets {
  margin-top: 26px;
  padding: 20px;
  border: 1px solid rgba(8, 71, 110, .10);
  border-radius: 17px;
  background: #f4f8fa;
}

.percentage-rate-presets > span {
  margin-bottom: 12px;
  color: #31536b;
  display: block;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.percentage-rate-presets > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.percentage-rate-presets button {
  min-width: 54px;
  padding: 9px 12px;
  border: 1px solid rgba(7, 91, 137, .17);
  border-radius: 11px;
  color: #075c91;
  background: white;
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform .15s ease,
    color .15s ease,
    background .15s ease;
}

.percentage-rate-presets button:hover {
  transform: translateY(-1px);
  color: white;
  background: #087b9d;
}

/* Live-Illustration */

.percentage-live-visual {
  margin: 28px 0 20px;
  padding: 19px;
  border: 1px solid rgba(8, 72, 111, .11);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 95% 15%,
      rgba(65, 201, 190, .17),
      transparent 10rem
    ),
    #f2f7f9;
}

.percentage-live-track {
  position: relative;
  height: 22px;
  margin-bottom: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: #dce7ec;
  box-shadow:
    inset 0 1px 4px
    rgba(6, 47, 75, .10);
}

.percentage-live-track span {
  width: 20%;
  min-width: 4px;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #0879a0,
      #36c7b6
    );
  display: block;
  box-shadow:
    6px 0 18px
    rgba(25, 175, 164, .28);
  transition: width .35s ease;
}

.percentage-live-visual > div:last-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
}

.percentage-live-visual strong {
  color: #082f4c;
  font-size: 1rem;
}

.percentage-live-visual span {
  color: #668092;
  font-size: .76rem;
  font-weight: 750;
}

.percentage-main-result {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(236, 126, 94, .26),
      transparent 14rem
    ),
    linear-gradient(
      145deg,
      #073b60,
      #075d83
    );
}

.percentage-main-result::after {
  content: "%";
  position: absolute;
  right: 22px;
  bottom: -24px;
  color: rgba(255, 255, 255, .07);
  font-size: 8rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.percentage-main-result > * {
  position: relative;
  z-index: 1;
}

.percentage-result-card
.warmup-calculation-path strong {
  overflow-wrap: anywhere;
}

/* Tablet */

@media (max-width: 1050px) {
  .percentage-mode-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .percentage-calculator-page
  .radiator-calculator-layout {
    grid-template-columns: 1fr;
  }

  .percentage-result-card {
    position: static;
  }
}

/* Mobil */

@media (max-width: 700px) {
  .percentage-hero-visual {
    min-height: 360px;
    padding:
      34px 20px
      102px;
    border-radius: 22px;
  }

  .percentage-hero-ring {
    width: 150px;
    height: 150px;
  }

  .percentage-hero-ring strong {
    font-size: 1.85rem;
  }

  .percentage-mode-panel {
    width: calc(100% - 24px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    border-radius: 17px;
  }

  .percentage-mode-panel button {
    min-height: 48px;
    padding: 9px 8px;
    font-size: .73rem;
  }

  .percentage-calculator-page
  .radiator-calculator-section {
    padding-top: 52px;
  }

  .percentage-live-visual > div:last-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

@media (max-width: 420px) {
  .percentage-mode-panel {
    grid-template-columns: 1fr;
  }

  .percentage-hero-equation {
    gap: 7px;
  }

  .percentage-hero-equation span,
  .percentage-hero-equation strong {
    min-width: 64px;
    padding: 10px;
  }
}
/* SHK_MATHEMATIK_PERCENT_LIQUID_VISUAL_CSS_20260805 */

.percentage-live-visual-liquid {
  padding: 22px;
  border: 1px solid rgba(8, 72, 111, .11);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 95% 10%,
      rgba(62, 209, 194, .16),
      transparent 10rem
    ),
    linear-gradient(
      180deg,
      #f8fbfc,
      #eef4f7
    );
}

.percentage-liquid-stage {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(220px, .95fr);
  gap: 18px;
  align-items: end;
}

.percentage-liquid-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.percentage-liquid-scale {
  width: 100%;
  max-width: 112px;
  color: #718898;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .7rem;
  font-weight: 850;
}

.percentage-liquid-glass {
  position: relative;
  width: 112px;
  height: 220px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 34px 34px 26px 26px;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .44),
      rgba(198, 223, 236, .20)
    );
  box-shadow:
    inset 0 0 0 1px rgba(10, 70, 108, .08),
    inset 0 12px 18px rgba(255, 255, 255, .35),
    0 18px 30px rgba(7, 56, 89, .12);
}

.percentage-liquid-glass.is-compact {
  width: 92px;
}

.percentage-liquid-fill {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border-radius: 22px 22px 18px 18px;
  overflow: hidden;
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, .16);
}

.percentage-liquid-fill.is-base {
  background:
    linear-gradient(
      180deg,
      rgba(73, 166, 239, .88),
      rgba(8, 111, 176, .96)
    );
}

.percentage-liquid-fill.is-value {
  right: 18px;
  left: 18px;
  border-radius: 18px 18px 14px 14px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 122, 94, .92),
      rgba(211, 59, 88, .94)
    );
  box-shadow:
    0 -4px 18px rgba(230, 101, 91, .22),
    inset 0 8px 14px rgba(255, 255, 255, .12);
}

.percentage-liquid-fill.is-value-only {
  background:
    linear-gradient(
      180deg,
      rgba(255, 126, 96, .94),
      rgba(214, 64, 92, .96)
    );
}

.percentage-liquid-wave {
  position: absolute;
  top: -8px;
  left: -6%;
  width: 112%;
  height: 18px;
  border-radius: 45% 55% 52% 48%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, .42) 0 38%,
      rgba(255, 255, 255, 0) 65%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .26),
      rgba(255, 255, 255, .10)
    );
  opacity: .9;
  animation: shkLiquidWave 4.6s linear infinite;
}

.percentage-liquid-gloss {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 14px;
  width: 18px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .58),
      rgba(255, 255, 255, .10)
    );
  filter: blur(.2px);
  pointer-events: none;
}

.percentage-liquid-column strong {
  color: #082f4c;
  font-size: .95rem;
}

.percentage-liquid-column span {
  color: #5e7a8f;
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
}

.percentage-liquid-result-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(8, 72, 111, .10);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(7, 60, 96, .97),
      rgba(9, 98, 129, .93)
    );
  color: white;
  box-shadow:
    0 16px 28px rgba(7, 56, 89, .16);
}

.percentage-liquid-result-card > span {
  color: rgba(255, 255, 255, .72);
  display: block;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.percentage-liquid-result-card > strong {
  margin: 8px 0 10px;
  display: block;
  font-size: 1.55rem;
  line-height: 1.05;
}

.percentage-liquid-result-card > p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: .86rem;
  line-height: 1.5;
}

.percentage-liquid-mini-values {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.percentage-liquid-mini-values > div {
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
}

.percentage-liquid-mini-values small {
  color: rgba(255, 255, 255, .66);
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.percentage-liquid-mini-values b {
  margin-top: 6px;
  display: block;
  font-size: .96rem;
}

.percentage-live-visual-generic {
  display: grid;
  gap: 12px;
}

.percentage-live-generic-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.percentage-live-generic-meta strong {
  color: #082f4c;
  font-size: .98rem;
}

.percentage-live-generic-meta span {
  color: #668092;
  font-size: .78rem;
}

.percentage-live-generic-value {
  color: #082f4c;
  font-size: 1.32rem;
  font-weight: 950;
  text-align: right;
}

@keyframes shkLiquidWave {
  0% {
    transform: translateX(0) translateY(0);
  }

  50% {
    transform: translateX(-6%) translateY(1px);
  }

  100% {
    transform: translateX(-12%) translateY(0);
  }
}

@media (max-width: 1150px) {
  .percentage-liquid-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .percentage-liquid-result-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .percentage-live-visual-liquid {
    padding: 18px;
  }

  .percentage-liquid-stage {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .percentage-liquid-column {
    align-items: stretch;
  }

  .percentage-liquid-scale,
  .percentage-liquid-glass,
  .percentage-liquid-glass.is-compact {
    margin: 0 auto;
  }

  .percentage-liquid-result-card {
    order: -1;
  }

  .percentage-live-generic-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .percentage-live-generic-value {
    text-align: left;
  }
}
/* SHK_MATHEMATIK_PERCENT_REALISTIC_COLUMN_CSS_20260805 */

.percentage-live-visual-realistic {
  margin: 28px 0 22px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(7, 65, 103, .12);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(85, 220, 205, .20),
      transparent 15rem
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(62, 146, 220, .14),
      transparent 14rem
    ),
    linear-gradient(
      155deg,
      #fafdfe 0%,
      #edf5f8 52%,
      #e6f1f5 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 18px 38px rgba(6, 50, 80, .09);
}

.percentage-realistic-stage {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.percentage-realistic-column {
  position: relative;
  min-width: 0;
  padding: 18px 16px 20px;
  border: 1px solid rgba(8, 69, 108, .09);
  border-radius: 21px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .74),
      rgba(255, 255, 255, .34)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 12px 26px rgba(7, 52, 82, .07);
}

.percentage-realistic-column::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 16px;
  left: 16px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .94),
      transparent
    );
}

.percentage-realistic-heading {
  position: relative;
  z-index: 2;
  margin-bottom: 5px;
  text-align: center;
}

.percentage-realistic-heading span {
  color: #648095;
  display: block;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.percentage-realistic-heading strong {
  margin-top: 5px;
  color: #082f4d;
  display: block;
  font-size: 1.05rem;
  line-height: 1.25;
}

.percentage-realistic-svg {
  width: min(100%, 340px);
  height: auto;
  margin: 0 auto;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(
      0 11px 14px
      rgba(6, 51, 81, .08)
    );
}

/* Skala */

.percentage-realistic-scale line {
  stroke: rgba(24, 75, 106, .34);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.percentage-realistic-scale text {
  fill: #5d798c;
  font-size: 10px;
  font-weight: 850;
  text-anchor: end;
}

/* Flüssigkeiten */

.percentage-realistic-blue,
.percentage-realistic-red {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation:
    shkRealisticLiquidRise
    .65s cubic-bezier(.2, .8, .25, 1)
    both;
}

.percentage-realistic-blue {
  filter:
    drop-shadow(
      0 0 8px
      rgba(43, 151, 219, .18)
    );
}

.percentage-realistic-red {
  filter:
    drop-shadow(
      0 -2px 9px
      rgba(229, 70, 91, .24)
    );
}

.percentage-realistic-boundary {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    shkRealisticLiquidBoundary
    3.8s ease-in-out
    infinite alternate;
}

.percentage-realistic-surface {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    shkRealisticLiquidSurface
    4.4s ease-in-out
    infinite alternate;
}

.percentage-realistic-inner-shine {
  opacity: .72;
}

/* Luftblasen */

.percentage-realistic-bubbles circle {
  fill: rgba(255, 255, 255, .44);
  stroke: rgba(255, 255, 255, .25);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    shkRealisticBubble
    5.2s ease-in-out
    infinite;
}

.percentage-realistic-bubbles circle:nth-child(2) {
  animation-delay: -1.3s;
  animation-duration: 4.4s;
}

.percentage-realistic-bubbles circle:nth-child(3) {
  animation-delay: -2.7s;
  animation-duration: 5.8s;
}

.percentage-realistic-bubbles circle:nth-child(4) {
  animation-delay: -.8s;
  animation-duration: 6.1s;
}

.percentage-realistic-bubbles circle:nth-child(5) {
  animation-delay: -3.4s;
  animation-duration: 5.4s;
}

.percentage-realistic-bubbles circle:nth-child(6) {
  animation-delay: -2.1s;
  animation-duration: 4.8s;
}

/* Glas und Markierung */

.percentage-realistic-glass {
  pointer-events: none;
}

.percentage-realistic-marker line {
  stroke: #c83d58;
  stroke-width: 2;
  stroke-linecap: round;
}

.percentage-realistic-marker circle {
  fill: #d84861;
  stroke: white;
  stroke-width: 2;
  filter:
    drop-shadow(
      0 2px 4px
      rgba(141, 27, 52, .26)
    );
}

.percentage-realistic-marker text {
  fill: #a92c48;
  font-size: 11px;
  font-weight: 950;
}

.percentage-realistic-marker text.is-value {
  fill: #536f82;
  font-size: 9px;
  font-weight: 850;
}

.percentage-realistic-bottom-label {
  fill: #688294;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .015em;
}

/* Legende */

.percentage-realistic-legend {
  width: min(100%, 390px);
  margin: -4px auto 0;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.percentage-realistic-legend > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(8, 68, 107, .09);
  border-radius: 15px;
  background: rgba(255, 255, 255, .76);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    0 8px 18px
    rgba(6, 49, 78, .05);
}

.percentage-realistic-legend
> div > span {
  flex: 0 0 13px;
  width: 13px;
  height: 38px;
  border-radius: 999px;
  box-shadow:
    inset 2px 0 4px
    rgba(255, 255, 255, .42);
}

.percentage-realistic-legend
.is-blue > span {
  background:
    linear-gradient(
      180deg,
      #63c3ff,
      #0870b6
    );
}

.percentage-realistic-legend
.is-red > span {
  background:
    linear-gradient(
      180deg,
      #ff9b86,
      #c62d51
    );
}

.percentage-realistic-legend small {
  color: #708899;
  display: block;
  font-size: .64rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.percentage-realistic-legend strong {
  margin-top: 4px;
  color: #082f4c;
  display: block;
  font-size: .9rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Erklärungskarte */

.percentage-realistic-summary {
  position: relative;
  min-width: 0;
  padding: 22px;
  border-radius: 20px;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(255, 130, 104, .24),
      transparent 11rem
    ),
    linear-gradient(
      145deg,
      #073c61,
      #086c89
    );
  box-shadow:
    0 18px 34px
    rgba(5, 51, 81, .18);
}

.percentage-realistic-summary::after {
  content: "%";
  position: absolute;
  right: -14px;
  bottom: -36px;
  color: rgba(255, 255, 255, .055);
  font-size: 9rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.percentage-realistic-summary > * {
  position: relative;
  z-index: 1;
}

.percentage-realistic-summary > span {
  color: rgba(255, 255, 255, .68);
  display: block;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.percentage-realistic-summary > strong {
  margin: 8px 0 11px;
  display: block;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.percentage-realistic-summary > p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  line-height: 1.58;
}

.percentage-realistic-equation {
  margin-top: 18px;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.percentage-realistic-equation span,
.percentage-realistic-equation strong {
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px;
  background: rgba(255, 255, 255, .09);
  font-size: .73rem;
  font-weight: 900;
  text-align: center;
  overflow-wrap: anywhere;
}

.percentage-realistic-equation strong {
  background:
    linear-gradient(
      145deg,
      rgba(255, 121, 96, .40),
      rgba(212, 53, 82, .32)
    );
}

.percentage-realistic-equation b {
  color: rgba(255, 255, 255, .66);
  font-size: .8rem;
}

.percentage-realistic-check {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .09);
}

.percentage-realistic-check small {
  color: rgba(255, 255, 255, .62);
  display: block;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.percentage-realistic-check strong {
  margin-top: 5px;
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Animationen */

@keyframes shkRealisticLiquidRise {
  from {
    opacity: .45;
    transform: scaleY(.08);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes shkRealisticLiquidBoundary {
  from {
    transform:
      translateX(-2px)
      translateY(-1px)
      scaleX(.98);
  }

  to {
    transform:
      translateX(2px)
      translateY(1px)
      scaleX(1.02);
  }
}

@keyframes shkRealisticLiquidSurface {
  from {
    transform:
      translateX(-2px)
      scaleX(.98);
  }

  to {
    transform:
      translateX(2px)
      scaleX(1.02);
  }
}

@keyframes shkRealisticBubble {
  0% {
    opacity: .14;
    transform:
      translateY(10px)
      scale(.74);
  }

  42% {
    opacity: .68;
  }

  100% {
    opacity: .06;
    transform:
      translateY(-30px)
      scale(1.12);
  }
}

/* Breitere Ergebnisflächen */

@media (min-width: 1180px) {
  .percentage-calculator-page
  .radiator-calculator-layout {
    grid-template-columns:
      minmax(0, .88fr)
      minmax(500px, 1.12fr);
  }

  .percentage-realistic-stage {
    grid-template-columns:
      minmax(285px, .95fr)
      minmax(210px, .72fr);
    align-items: center;
  }

  .percentage-realistic-summary {
    align-self: center;
  }
}

/* Mobil */

@media (max-width: 620px) {
  .percentage-live-visual-realistic {
    padding: 14px;
    border-radius: 19px;
  }

  .percentage-realistic-column {
    padding:
      16px 8px
      18px;
    border-radius: 17px;
  }

  .percentage-realistic-svg {
    width: min(100%, 305px);
  }

  .percentage-realistic-legend {
    grid-template-columns: 1fr;
    width: min(100%, 290px);
  }

  .percentage-realistic-summary {
    padding: 19px;
    border-radius: 17px;
  }

  .percentage-realistic-equation {
    grid-template-columns: 1fr;
  }

  .percentage-realistic-equation b {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .percentage-realistic-blue,
  .percentage-realistic-red,
  .percentage-realistic-boundary,
  .percentage-realistic-surface,
  .percentage-realistic-bubbles circle {
    animation: none !important;
  }
}
/* SHK_MATHEMATIK_PERCENT_LEFT_LAYOUT_FIX_CSS_20260805 */

.percentage-input-card .percentage-live-visual {
  margin-top: 24px;
  margin-bottom: 0;
}

.percentage-result-card .percentage-live-visual {
  display: none;
}

.percentage-result-card .radiator-main-result {
  margin-top: 0;
}

.percentage-live-visual-realistic {
  margin: 24px 0 0;
}

.percentage-realistic-stage {
  grid-template-columns: 1fr;
  gap: 18px;
}

.percentage-realistic-column {
  padding: 18px 14px 18px;
}

.percentage-realistic-svg {
  width: min(100%, 290px);
}

.percentage-realistic-summary {
  padding: 20px;
  color: #ffffff !important;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(255, 147, 122, .20),
      transparent 11rem
    ),
    linear-gradient(
      145deg,
      #0a4369,
      #0b6f8f
    );
}

.percentage-realistic-summary,
.percentage-realistic-summary > span,
.percentage-realistic-summary > strong,
.percentage-realistic-summary > p,
.percentage-realistic-summary small,
.percentage-realistic-summary b {
  color: #ffffff !important;
}

.percentage-realistic-summary > span {
  opacity: .86;
}

.percentage-realistic-summary > p {
  line-height: 1.6;
}

.percentage-realistic-equation span,
.percentage-realistic-equation strong {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
}

.percentage-realistic-equation strong {
  background:
    linear-gradient(
      145deg,
      rgba(255, 128, 102, .34),
      rgba(208, 55, 82, .30)
    );
}

.percentage-realistic-equation b {
  color: rgba(255, 255, 255, .88);
}

.percentage-realistic-check {
  background: rgba(255, 255, 255, .12);
}

.percentage-realistic-check small {
  color: rgba(255, 255, 255, .80);
}

.percentage-realistic-check strong {
  color: #ffffff !important;
}

.percentage-realistic-legend strong {
  font-size: .96rem;
}

@media (min-width: 1180px) {
  .percentage-calculator-page
  .radiator-calculator-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(420px, .88fr);
    align-items: start;
  }

  .percentage-input-card {
    position: relative;
  }
}

@media (max-width: 620px) {
  .percentage-input-card .percentage-live-visual {
    margin-top: 18px;
  }

  .percentage-realistic-summary {
    padding: 18px;
  }

  .percentage-realistic-svg {
    width: min(100%, 260px);
  }
}
/* SHK_MATHEMATIK_AREA_VISUAL_CSS_20260805 */

.area-calculator-page {
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(30, 153, 181, .11),
      transparent 34rem
    ),
    #f2f6f9;
}

/* Hero */

.area-calculator-hero {
  position: relative;
  z-index: 2;
}

.area-hero-visual {
  position: relative;
  min-width: 0;
  min-height: 410px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(81, 220, 208, .28),
      transparent 16rem
    ),
    linear-gradient(
      145deg,
      #073454,
      #075f83 58%,
      #098c93
    );
  box-shadow:
    0 28px 65px
    rgba(5, 46, 74, .23);
}

.area-hero-visual svg {
  width: 100%;
  height: 100%;
  min-height: 410px;
  display: block;
}

.area-hero-visual svg text {
  fill: white;
  font-size: 19px;
  font-weight: 900;
}

/* Hero-Untertitel bleibt innerhalb der Grafik */

.area-hero-visual
.radiator-video-caption {
  position: absolute !important;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  width: auto;
  min-height: 78px;
  margin: 0;
  padding: 18px 24px;
  border-radius: 0;
  color: white;
  background:
    linear-gradient(
      90deg,
      rgba(4, 31, 52, .95),
      rgba(5, 68, 85, .93)
    );
}

.area-hero-visual
.radiator-video-caption span,
.area-hero-visual
.radiator-video-caption strong {
  color: white;
}

/* Formauswahl */

.area-mode-panel {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto 28px;
  padding: 13px;
  border: 1px solid rgba(8, 69, 108, .11);
  border-radius: 22px;
  background: rgba(255, 255, 255, .90);
  box-shadow:
    0 18px 42px
    rgba(7, 48, 77, .08);
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.area-mode-panel button {
  min-width: 0;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #284a62;
  background: #edf3f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.area-mode-panel button strong {
  color: #0877a0;
  font-size: 1.45rem;
  line-height: 1;
}

.area-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 103, 151, .24);
  color: #075d91;
  background: white;
}

.area-mode-panel button.is-active {
  border-color: #087b9d;
  color: white;
  background:
    linear-gradient(
      145deg,
      #075c91,
      #098d9c
    );
  box-shadow:
    0 11px 23px
    rgba(6, 101, 139, .22);
}

.area-mode-panel button.is-active strong {
  color: white;
}

/* Rechneraufteilung */

.area-calculator-page
.radiator-calculator-section {
  position: relative;
  z-index: 1;
  padding-top: 72px;
}

.area-calculator-layout {
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(390px, .88fr);
  gap: 28px;
  align-items: start;
}

.area-input-card,
.area-result-card {
  border-color: rgba(8, 71, 110, .12);
  box-shadow:
    0 24px 55px
    rgba(6, 49, 78, .10);
}

.area-input-card {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfdfe
    );
}

/* Technische Zeichenfläche */

.area-visual-stage {
  position: relative;
  min-width: 0;
  min-height: 390px;
  margin-top: 28px;
  border: 1px solid rgba(8, 70, 109, .11);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(72, 205, 194, .14),
      transparent 14rem
    ),
    linear-gradient(
      180deg,
      #fbfdfe,
      #eef5f8
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 16px 34px rgba(7, 53, 83, .07);
}

.area-visual-stage::before {
  content: "Maßabhängige Ansicht";
  position: absolute;
  top: 15px;
  left: 18px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  color: #41647b;
  background: rgba(255, 255, 255, .88);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow:
    0 5px 14px
    rgba(7, 50, 79, .07);
}

.area-visual-stage svg {
  width: 100%;
  height: auto;
  min-height: 390px;
  display: block;
}

/* Formen */

.area-svg-shape {
  stroke: rgba(255, 255, 255, .84);
  stroke-width: 2;
}

.area-svg-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, .44);
  stroke-width: 7;
  stroke-linecap: round;
}

.area-svg-center {
  fill: white;
  stroke: #075d91;
  stroke-width: 3;
}

.area-svg-radius,
.area-svg-height,
.area-svg-dimension {
  fill: none;
  stroke: #466b83;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.area-svg-height {
  stroke-dasharray: 7 6;
}

.area-svg-right-angle {
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 3;
}

/* Beschriftungen */

.area-svg-dimension-label {
  fill: #234a65;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 16px;
  font-weight: 950;
}

.area-svg-main-label {
  fill: white;
  paint-order: stroke;
  stroke: rgba(5, 72, 108, .55);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 20px;
  font-weight: 950;
}

/* Ergebnis */

.area-main-result {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(236, 126, 94, .22),
      transparent 14rem
    ),
    linear-gradient(
      145deg,
      #073b60,
      #075d83
    );
}

.area-main-result::after {
  content: "m²";
  position: absolute;
  right: 18px;
  bottom: -17px;
  color: rgba(255, 255, 255, .065);
  font-size: 5.5rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.area-main-result > * {
  position: relative;
  z-index: 1;
}

.area-result-card
.warmup-calculation-path strong {
  overflow-wrap: anywhere;
}

/* Tablet */

@media (max-width: 1050px) {
  .area-mode-panel {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .area-calculator-layout {
    grid-template-columns: 1fr;
  }

  .area-result-card {
    position: static;
  }
}

/* Mobil */

@media (max-width: 700px) {
  .area-hero-visual {
    min-height: 350px;
    border-radius: 22px;
  }

  .area-hero-visual svg {
    min-height: 350px;
  }

  .area-mode-panel {
    width: calc(100% - 24px);
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    padding: 10px;
    border-radius: 18px;
  }

  .area-mode-panel button {
    min-height: 62px;
    font-size: .74rem;
  }

  .area-calculator-page
  .radiator-calculator-section {
    padding-top: 52px;
  }

  .area-visual-stage,
  .area-visual-stage svg {
    min-height: 315px;
  }

  .area-svg-dimension-label {
    font-size: 14px;
  }

  .area-svg-main-label {
    font-size: 18px;
  }
}

@media (max-width: 420px) {
  .area-mode-panel {
    grid-template-columns: 1fr;
  }

  .area-visual-stage::before {
    top: 10px;
    left: 10px;
  }
}
/* SHK_MATHEMATIK_AREA_FORMULA_VISUAL_CSS_20260805 */

.area-svg-formula-label {
  fill: rgba(255, 255, 255, .96);
  paint-order: stroke;
  stroke: rgba(5, 67, 101, .62);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .015em;
}

@media (max-width: 700px) {
  .area-svg-formula-label {
    font-size: 14px;
  }
}
/* SHK_MATHEMATIK_FORMULA_PATH_CSS_20260805 */

#math-area-formula,
#math-volume-formula {
  display: grid;
  gap: 8px;
}

.math-symbolic-formula {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(133, 69, 43, .14);
  color: #713d2d;
  display: block;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.3;
}

.math-numeric-path {
  color: #40291f;
  display: block;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Sicherheitsnetz gegen alte Formeln in Grafiken */

.area-svg-formula-label,
.volume-svg-formula {
  display: none;
}

@media (max-width: 600px) {
  .math-symbolic-formula {
    font-size: 1rem;
  }

  .math-numeric-path {
    font-size: .78rem;
  }
}
/* SHK_MATHEMATIK_VOLUME_VISUAL_CSS_20260805 */

.volume-calculator-page {
  background:
    radial-gradient(
      circle at 91% 5%,
      rgba(29, 154, 181, .11),
      transparent 34rem
    ),
    #f2f6f9;
}

/* Kopfbereich */

.volume-calculator-hero {
  position: relative;
  z-index: 2;
}

.volume-hero-visual {
  position: relative;
  min-width: 0;
  min-height: 410px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(
      circle at 82% 13%,
      rgba(76, 219, 207, .28),
      transparent 16rem
    ),
    linear-gradient(
      145deg,
      #073454,
      #075f83 58%,
      #098c93
    );
  box-shadow:
    0 28px 65px
    rgba(5, 46, 74, .23);
}

.volume-hero-visual svg {
  width: 100%;
  height: 100%;
  min-height: 410px;
  display: block;
}

.volume-hero-visual svg text {
  fill: white;
  font-size: 18px;
  font-weight: 900;
}

/* Die Beschriftung bleibt im Hero statt quer über der Seite */

.volume-hero-visual
.radiator-video-caption {
  position: absolute !important;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  width: auto;
  min-height: 78px;
  margin: 0;
  padding: 18px 24px;
  border-radius: 0;
  color: white;
  background:
    linear-gradient(
      90deg,
      rgba(4, 31, 52, .95),
      rgba(5, 68, 85, .93)
    );
}

.volume-hero-visual
.radiator-video-caption span,
.volume-hero-visual
.radiator-video-caption strong {
  color: white;
}

/* Körperauswahl */

.volume-mode-panel {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto 28px;
  padding: 13px;
  border: 1px solid rgba(8, 69, 108, .11);
  border-radius: 22px;
  background: rgba(255, 255, 255, .90);
  box-shadow:
    0 18px 42px
    rgba(7, 48, 77, .08);
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.volume-mode-panel button {
  min-width: 0;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #284a62;
  background: #edf3f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.volume-mode-panel button strong {
  color: #0877a0;
  font-size: 1.45rem;
  line-height: 1;
}

.volume-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 103, 151, .24);
  color: #075d91;
  background: white;
}

.volume-mode-panel button.is-active {
  border-color: #087b9d;
  color: white;
  background:
    linear-gradient(
      145deg,
      #075c91,
      #098d9c
    );
  box-shadow:
    0 11px 23px
    rgba(6, 101, 139, .22);
}

.volume-mode-panel button.is-active strong {
  color: white;
}

/* Rechnerkarten */

.volume-calculator-page
.radiator-calculator-section {
  position: relative;
  z-index: 1;
  padding-top: 72px;
}

.volume-calculator-layout {
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(400px, .88fr);
  gap: 28px;
  align-items: start;
}

.volume-input-card,
.volume-result-card {
  min-width: 0;
  border-color: rgba(8, 71, 110, .12);
  box-shadow:
    0 24px 55px
    rgba(6, 49, 78, .10);
}

.volume-input-card {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfdfe
    );
}

/* Räumliches Zeichenfeld */

.volume-visual-stage {
  position: relative;
  min-width: 0;
  min-height: 430px;
  margin-top: 28px;
  border: 1px solid rgba(8, 70, 109, .11);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(72, 205, 194, .14),
      transparent 14rem
    ),
    linear-gradient(
      180deg,
      #fbfdfe,
      #eef5f8
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 16px 34px rgba(7, 53, 83, .07);
}

.volume-visual-stage::before {
  content: "Proportionale Körperansicht";
  position: absolute;
  top: 15px;
  left: 18px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  color: #41647b;
  background: rgba(255, 255, 255, .90);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow:
    0 5px 14px
    rgba(7, 50, 79, .07);
}

.volume-visual-stage svg {
  width: 100%;
  height: auto;
  min-height: 430px;
  display: block;
  overflow: hidden;
}

/* Körperflächen und Kanten */

.volume-svg-front,
.volume-svg-top,
.volume-svg-side,
.volume-svg-cylinder-body,
.volume-svg-cylinder-top,
.volume-svg-cylinder-bottom {
  stroke: rgba(255, 255, 255, .76);
  stroke-width: 2;
}

.volume-svg-top {
  filter: brightness(1.05);
}

.volume-svg-side {
  filter: brightness(.92);
}

/* Maßlinien */

.volume-svg-dimension,
.volume-svg-radius {
  fill: none;
  stroke: #456b83;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.volume-svg-dimension-label,
.volume-svg-pipe-inner {
  fill: #234a65;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .97);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 14px;
  font-weight: 950;
}

.volume-svg-ratio {
  fill: #234a65;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .97);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 14px;
  font-weight: 950;
}

/* Ergebnisfeld innerhalb der Grafik */

.volume-svg-formula-card rect {
  fill: rgba(255, 255, 255, .92);
  stroke: rgba(8, 72, 111, .13);
  stroke-width: 1.5;
  filter:
    drop-shadow(
      0 8px 13px
      rgba(6, 51, 81, .12)
    );
}

.volume-svg-main-value {
  fill: #0a3e60;
  font-size: 15px;
  font-weight: 950;
}

.volume-svg-formula {
  display: none;
}

/* Ergebnis rechts */

.volume-main-result {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(236, 126, 94, .22),
      transparent 14rem
    ),
    linear-gradient(
      145deg,
      #073b60,
      #075d83
    );
}

.volume-main-result::after {
  content: "m³";
  position: absolute;
  right: 16px;
  bottom: -17px;
  color: rgba(255, 255, 255, .065);
  font-size: 5.4rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.volume-main-result > * {
  position: relative;
  z-index: 1;
}

.volume-result-card
.warmup-calculation-path strong {
  overflow-wrap: anywhere;
}

/* Tablet */

@media (max-width: 1050px) {
  .volume-mode-panel {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .volume-calculator-layout {
    grid-template-columns: 1fr;
  }

  .volume-result-card {
    position: static;
  }
}

/* Mobil */

@media (max-width: 700px) {
  .volume-hero-visual {
    min-height: 350px;
    border-radius: 22px;
  }

  .volume-hero-visual svg {
    min-height: 350px;
  }

  .volume-mode-panel {
    width: calc(100% - 24px);
    padding: 10px;
    border-radius: 18px;
  }

  .volume-mode-panel button {
    min-height: 62px;
    font-size: .75rem;
  }

  .volume-calculator-page
  .radiator-calculator-section {
    padding-top: 52px;
  }

  .volume-visual-stage,
  .volume-visual-stage svg {
    min-height: 335px;
  }

  .volume-svg-dimension-label,
  .volume-svg-pipe-inner,
  .volume-svg-ratio {
    font-size: 13px;
  }
}

@media (max-width: 430px) {
  .volume-mode-panel {
    grid-template-columns: 1fr;
  }

  .volume-visual-stage::before {
    top: 10px;
    left: 10px;
  }
}
/* SHK_MATHEMATIK_VOLUME_OVERLAP_FIX_CSS_20260805 */

.volume-svg-dimension-label,
.volume-svg-pipe-inner,
.volume-svg-ratio {
  font-size: 13px;
  stroke-width: 4px;
}

.volume-svg-main-value {
  font-size: 14px;
}

@media (max-width: 700px) {
  .volume-svg-dimension-label,
  .volume-svg-pipe-inner,
  .volume-svg-ratio {
    font-size: 12px;
    stroke-width: 3.5px;
  }

  .volume-svg-main-value {
    font-size: 13px;
  }
}
/* SHK_MATHEMATIK_VOLUME_LITER_CARD_CSS_20260805 */

.volume-liter-result {
  margin: 16px 0 22px;
  padding: 17px 19px;
  border: 1px solid rgba(8, 103, 151, .14);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(72, 205, 194, .18),
      transparent 10rem
    ),
    linear-gradient(
      145deg,
      #edf8fa,
      #e8f2f7
    );
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 10px 22px rgba(7, 55, 85, .07);
}

.volume-liter-result span {
  color: #526f83;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.volume-liter-result strong {
  color: #075d88;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 950;
  line-height: 1.1;
  text-align: right;
}

@media (max-width: 520px) {
  .volume-liter-result {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .volume-liter-result strong {
    text-align: left;
  }
}
/* SHK_MATHEMATIK_VOLUME_HERO_FINETUNING_CSS_20260805 */

.volume-calculator-hero {
  align-items: center;
}

.volume-calculator-hero .radiator-calculator-copy h1 {
  max-width: 10.5ch;
  font-size: clamp(3.7rem, 6.5vw, 5.8rem);
  line-height: .95;
}

.volume-hero-visual {
  width: min(100%, 500px);
  min-height: 380px;
  margin-left: auto;
}

.volume-hero-visual svg {
  min-height: 380px;
}

@media (max-width: 1100px) {
  .volume-calculator-hero .radiator-calculator-copy h1 {
    max-width: none;
    font-size: clamp(3.5rem, 8vw, 5.2rem);
  }

  .volume-hero-visual {
    width: min(100%, 540px);
  }
}

@media (max-width: 700px) {
  .volume-calculator-hero .radiator-calculator-copy h1 {
    font-size: clamp(3rem, 13vw, 4.5rem);
    line-height: .96;
  }

  .volume-hero-visual {
    min-height: 340px;
  }

  .volume-hero-visual svg {
    min-height: 340px;
  }
}


/* SHK_MATHEMATIK_ANGLE_LAYOUT_CSS_20260805 */

.angle-calculator-page {
  background:
    linear-gradient(
      180deg,
      #f5f9fc 0,
      #edf4f8 100%
    );
}

.angle-calculator-page main {
  overflow: hidden;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.angle-calculator-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 610px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: min(100% - 3rem, 1450px);
  min-height: auto;
  margin: 0 auto;
  padding:
    clamp(3.5rem, 7vw, 6.5rem)
    0
    clamp(3.5rem, 6vw, 5rem);
}

.angle-calculator-hero
.radiator-calculator-copy {
  min-width: 0;
}

.angle-calculator-hero
.radiator-calculator-copy h1 {
  max-width: 9ch;
  margin:
    .55rem
    0
    1.5rem;
  font-size:
    clamp(4rem, 6.4vw, 6.7rem);
  line-height: .88;
  letter-spacing: -.07em;
}

.angle-calculator-hero
.radiator-calculator-copy h1 small {
  display: block;
  margin-top: .14em;
  font-size: .58em;
  line-height: 1;
  letter-spacing: -.045em;
}

.angle-calculator-hero
.radiator-calculator-copy > p:not(.eyebrow) {
  max-width: 670px;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.65;
}

.angle-calculator-hero
.radiator-calculator-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.35rem;
}

.angle-calculator-hero
.radiator-calculator-highlights span {
  display: grid;
  gap: .28rem;
  min-width: 76px;
}

.angle-calculator-hero
.radiator-calculator-highlights strong {
  font-size: 1.15rem;
  color: #07395d;
}


/* ---------------------------------------------------------
   HERO-GRAFIK
--------------------------------------------------------- */

.angle-hero-visual {
  position: relative;
  width: 100%;
  max-width: 610px;
  margin-left: auto;
  overflow: hidden;
  border:
    1px solid
    rgba(84, 190, 205, .45);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      #063c60,
      #07577d
    );
  box-shadow:
    0 28px 70px
    rgba(3, 49, 78, .22);
}

.angle-hero-visual svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 350px;
}

.angle-hero-visual svg text {
  fill: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 750;
}

.angle-hero-visual svg text:first-of-type {
  font-size: 28px;
}

.angle-hero-visual
.radiator-video-caption {
  position: static;
  inset: auto;
  display: grid;
  gap: .25rem;
  width: 100%;
  margin: 0;
  padding: 1.15rem 1.5rem;
  border: 0;
  border-top:
    1px solid
    rgba(255, 255, 255, .26);
  border-radius: 0;
  background:
    rgba(2, 42, 68, .94);
  color: #fff;
  box-shadow: none;
}

.angle-hero-visual
.radiator-video-caption span {
  color: #8fdfe2;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.angle-hero-visual
.radiator-video-caption strong {
  color: #fff;
  font-size: .88rem;
}


/* ---------------------------------------------------------
   RECHNERABSCHNITT
--------------------------------------------------------- */

.angle-calculator-page
.radiator-calculator-section {
  padding:
    clamp(4rem, 7vw, 6rem)
    1.5rem
    clamp(5rem, 8vw, 7rem);
}

.angle-calculator-page
.radiator-calculator-heading {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 440px);
  align-items: end;
  gap: 3rem;
  width: min(100%, 1200px);
  margin: 0 auto 2.5rem;
}

.angle-calculator-page
.radiator-calculator-heading h2 {
  max-width: 12ch;
  margin: .4rem 0 0;
  font-size:
    clamp(2.7rem, 5vw, 4.7rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.angle-calculator-page
.radiator-calculator-heading > p {
  margin: 0;
  line-height: 1.65;
}


/* ---------------------------------------------------------
   MODUSSCHALTER
--------------------------------------------------------- */

.angle-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: .85rem;
  width: min(100%, 1200px);
  margin: 0 auto 1.5rem;
}

.angle-mode-panel button {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: .85rem;
  min-height: 76px;
  padding: .85rem 1rem;
  border:
    1px solid
    #cbdbe5;
  border-radius: 16px;
  background: #fff;
  color: #123b5c;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 8px 24px
    rgba(17, 65, 94, .06);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.angle-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: #4fb9c5;
  box-shadow:
    0 13px 30px
    rgba(17, 65, 94, .12);
}

.angle-mode-panel button strong {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 46px;
  border-radius: 13px;
  background: #e8f4f7;
  color: #096b91;
  font-size: .9rem;
}

.angle-mode-panel button.is-active {
  border-color: #0c739c;
  background:
    linear-gradient(
      145deg,
      #073e62,
      #0a668b
    );
  color: #fff;
  box-shadow:
    0 15px 34px
    rgba(5, 67, 101, .2);
}

.angle-mode-panel button.is-active strong {
  background:
    rgba(255, 255, 255, .15);
  color: #fff;
}


/* ---------------------------------------------------------
   RECHNERKARTEN
--------------------------------------------------------- */

.angle-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, .88fr);
  align-items: start;
  gap: 1.4rem;
  width: min(100%, 1200px);
  margin: 0 auto;
}

.angle-input-card,
.angle-result-card {
  min-width: 0;
}

.angle-result-card {
  position: sticky;
  top: 1.2rem;
}

.angle-input-card
.radiator-input-grid {
  margin-bottom: 1.5rem;
}


/* ---------------------------------------------------------
   DYNAMISCHES DREIECK
--------------------------------------------------------- */

.angle-visual-stage {
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  border:
    1px solid
    #cfe1e9;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #f9fcfd,
      #edf8f9
    );
  box-shadow:
    inset 0 0 38px
    rgba(49, 142, 166, .06);
}

.angle-visual-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.angle-svg-triangle {
  stroke: #fff;
  stroke-width: 2.5;
}

.angle-svg-right-angle,
.angle-svg-arc {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
}

.angle-svg-dimension {
  stroke: #456b83;
  stroke-width: 1.8;
}

.angle-svg-ratio {
  fill: #0a476d;
  font-size: 16px;
  font-weight: 900;
}

.angle-svg-dimension-label,
.angle-svg-slope-label,
.angle-svg-angle-label {
  paint-order: stroke;
  stroke: #f8fcfd;
  stroke-width: 5px;
  stroke-linejoin: round;
  fill: #073e62;
  font-size: 15px;
  font-weight: 900;
}

.angle-svg-adjusted-note {
  fill: #6f8796;
  font-size: 12px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   ERGEBNIS
--------------------------------------------------------- */

.angle-main-result strong {
  overflow-wrap: anywhere;
  font-size:
    clamp(2.75rem, 5vw, 4.7rem);
  line-height: .96;
}

.angle-main-result small {
  margin-top: .7rem;
}

.angle-result-card
.warmup-calculation-path {
  margin-top: 1rem;
}

.angle-result-card
.math-symbolic-formula {
  display: block;
  padding-bottom: .65rem;
  border-bottom:
    1px solid
    #eadfd8;
  color: #8b654d;
}

.angle-result-card
.math-numeric-path {
  display: block;
  margin-top: .7rem;
  color: #163c55;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   RESPONSIV
--------------------------------------------------------- */

@media (max-width: 1050px) {
  .angle-calculator-hero {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 850px);
  }

  .angle-calculator-hero
  .radiator-calculator-copy h1 {
    max-width: none;
  }

  .angle-hero-visual {
    max-width: 720px;
    margin: 0;
  }

  .angle-calculator-layout {
    grid-template-columns: 1fr;
  }

  .angle-result-card {
    position: static;
  }
}

@media (max-width: 800px) {
  .angle-calculator-page
  .radiator-calculator-heading {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .angle-mode-panel {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .angle-calculator-hero {
    width: min(100% - 1.25rem, 850px);
    padding-top: 2.5rem;
  }

  .angle-calculator-hero
  .radiator-calculator-copy h1 {
    font-size:
      clamp(3.2rem, 17vw, 4.7rem);
  }

  .angle-calculator-page
  .radiator-calculator-section {
    padding-right: .65rem;
    padding-left: .65rem;
  }

  .angle-mode-panel {
    grid-template-columns: 1fr;
  }

  .angle-mode-panel button {
    min-height: 68px;
  }

  .angle-hero-visual svg {
    min-height: auto;
  }

  .angle-visual-stage {
    min-height: 280px;
  }

  .angle-svg-ratio {
    font-size: 13px;
  }

  .angle-svg-dimension-label,
  .angle-svg-slope-label,
  .angle-svg-angle-label {
    font-size: 12px;
  }
}
/* SHK_MATHEMATIK_RULE_OF_THREE_LAYOUT_CSS_20260805 */

.rule-three-calculator-page {
  background:
    linear-gradient(180deg, #f6fafc 0%, #edf4f8 100%);
}

.rule-three-calculator-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, 560px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: min(100% - 3rem, 1400px);
  min-height: auto;
  margin: 0 auto;
  padding:
    clamp(3.5rem, 7vw, 6rem)
    0
    clamp(3.5rem, 6vw, 5rem);
}

.rule-three-calculator-hero
.radiator-calculator-copy h1 {
  margin: .5rem 0 1.4rem;
  font-size: clamp(4.2rem, 7vw, 7rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.rule-three-hero-visual {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border:
    1px solid
    rgba(102, 210, 205, .42);
  border-radius: 30px;
  background:
    linear-gradient(145deg, #063d61, #087599);
  color: #fff;
  box-shadow:
    0 28px 65px rgba(4, 52, 81, .22);
}

.rule-three-hero-kicker {
  color: #8ce2df;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rule-three-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rule-three-hero-row span,
.rule-three-hero-row b {
  padding: 1rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, .12);
  font-size: clamp(1rem, 2vw, 1.35rem);
  text-align: center;
}

.rule-three-hero-row.is-result span,
.rule-three-hero-row.is-result b {
  background: #fff;
  color: #064362;
}

.rule-three-hero-arrows {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  color: #a7ece8;
  text-align: center;
}

.rule-three-hero-arrows strong {
  font-size: 1.7rem;
}

.rule-three-hero-formula {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .23);
  font-size: .95rem;
  font-weight: 800;
  text-align: center;
}

.rule-three-mode-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, 1200px);
  margin: 0 auto 1.4rem;
}

.rule-three-mode-panel button {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 82px;
  padding: .9rem 1rem;
  border: 1px solid #cbdce5;
  border-radius: 18px;
  background: #fff;
  color: #123b5c;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 9px 25px rgba(20, 69, 98, .07);
}

.rule-three-mode-panel button > strong {
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 14px;
  background: #e9f5f7;
  color: #087397;
  font-size: 1.25rem;
}

.rule-three-mode-panel button span {
  display: grid;
  gap: .2rem;
  font-size: .84rem;
}

.rule-three-mode-panel button span b {
  font-size: .98rem;
}

.rule-three-mode-panel button.is-active {
  border-color: #087297;
  background:
    linear-gradient(145deg, #073f62, #096d90);
  color: #fff;
}

.rule-three-mode-panel button.is-active > strong {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.rule-three-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, .88fr);
  align-items: start;
  gap: 1.4rem;
  width: min(100%, 1200px);
  margin: 0 auto;
}

.rule-three-result-card {
  position: sticky;
  top: 1.2rem;
}

.rule-three-example-row {
  margin-bottom: 1.2rem;
}

.rule-three-relation-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    48px
    minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.rule-three-column {
  display: grid;
  gap: .85rem;
  padding: 1.1rem;
  border: 1px solid #d4e2e9;
  border-radius: 19px;
  background: #f8fbfc;
}

.rule-three-column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0a5377;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rule-three-relation-symbol {
  display: grid;
  place-items: center;
}

.rule-three-relation-symbol span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e3f1f5;
  color: #087297;
  font-size: 1.25rem;
  font-weight: 900;
}

.rule-three-result-placeholder {
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1px dashed #75afc3;
  border-radius: 13px;
  background: #eaf6f8;
  color: #076d93;
  font-size: 1.4rem;
  font-weight: 900;
}

.rule-three-options {
  display: grid;
  grid-template-columns: minmax(180px, 280px);
  margin: 1rem 0 1.3rem;
}

.rule-three-visual-stage {
  width: 100%;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid #cfe0e8;
  border-radius: 22px;
  background:
    linear-gradient(145deg, #f9fcfd, #eef8f9);
}

.rule-three-visual-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.rule-three-svg-kicker {
  fill: #0b5376;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.rule-three-svg-heading {
  fill: #123e5c;
  font-size: 17px;
  font-weight: 900;
}

.rule-three-svg-value {
  fill: #fff;
  font-size: 14px;
  font-weight: 900;
}

.rule-three-svg-arrow {
  stroke: #456b83;
  stroke-width: 2;
}

.rule-three-svg-operation {
  fill: #456b83;
  font-size: 14px;
  font-weight: 900;
}

.rule-three-svg-footer {
  fill: #123e5c;
  font-size: 15px;
  font-weight: 900;
}

.rule-three-main-result strong {
  overflow-wrap: anywhere;
  font-size: clamp(2.7rem, 5vw, 4.7rem);
  line-height: .96;
}

.rule-three-result-card
.warmup-calculation-path {
  margin-top: 1rem;
}

.rule-three-result-card
.math-symbolic-formula {
  display: block;
  padding-bottom: .65rem;
  border-bottom: 1px solid #eadfd8;
  color: #8b654d;
}

.rule-three-result-card
.math-numeric-path {
  display: block;
  margin-top: .7rem;
  color: #163c55;
  line-height: 1.5;
}

@media (max-width: 1050px) {
  .rule-three-calculator-hero {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 850px);
  }

  .rule-three-hero-visual {
    max-width: 720px;
  }

  .rule-three-calculator-layout {
    grid-template-columns: 1fr;
  }

  .rule-three-result-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .rule-three-mode-panel {
    grid-template-columns: 1fr;
  }

  .rule-three-relation-grid {
    grid-template-columns: 1fr;
  }

  .rule-three-relation-symbol {
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  .rule-three-calculator-hero {
    width: min(100% - 1.25rem, 850px);
  }

  .rule-three-calculator-hero
  .radiator-calculator-copy h1 {
    font-size: clamp(3.4rem, 18vw, 5rem);
  }

  .rule-three-hero-row span,
  .rule-three-hero-row b {
    padding: .8rem .45rem;
    font-size: .9rem;
  }

  .rule-three-visual-stage {
    min-height: 270px;
  }
}


/* SHK_MATHEMATIK_PYTHAGORAS_LAYOUT_CSS_20260805 */

.pythagoras-calculator-page {
  background:
    linear-gradient(
      180deg,
      #f6fafc 0%,
      #edf4f8 100%
    );
}

.pythagoras-calculator-page main {
  overflow: hidden;
}


/* HERO */

.pythagoras-calculator-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(410px, 580px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: min(100% - 3rem, 1420px);
  min-height: auto;
  margin: 0 auto;
  padding:
    clamp(3.5rem, 7vw, 6rem)
    0
    clamp(3.5rem, 6vw, 5rem);
}

.pythagoras-calculator-hero
.radiator-calculator-copy h1 {
  max-width: 10ch;
  margin: .55rem 0 1.4rem;
  font-size:
    clamp(3.9rem, 6.5vw, 6.7rem);
  line-height: .91;
  letter-spacing: -.065em;
}

.pythagoras-calculator-hero
.radiator-calculator-copy h1 small {
  display: block;
  margin-top: .15em;
  font-size: .5em;
  line-height: 1;
  letter-spacing: -.04em;
}

.pythagoras-hero-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  border:
    1px solid
    rgba(97, 209, 205, .42);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      #063d61,
      #087397
    );
  box-shadow:
    0 28px 68px
    rgba(4, 52, 81, .23);
}

.pythagoras-hero-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.pythagoras-hero-visual text {
  fill: #fff;
  font-family: inherit;
  font-weight: 850;
}

.pythagoras-hero-visual
.radiator-video-caption {
  position: static;
  inset: auto;
  display: grid;
  gap: .25rem;
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.5rem;
  border: 0;
  border-top:
    1px solid
    rgba(255, 255, 255, .25);
  border-radius: 0;
  background:
    rgba(2, 42, 68, .94);
  color: #fff;
  box-shadow: none;
}

.pythagoras-hero-visual
.radiator-video-caption span {
  color: #8de2df;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.pythagoras-hero-visual
.radiator-video-caption strong {
  color: #fff;
  font-size: .9rem;
}


/* MODUSSCHALTER */

.pythagoras-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: .9rem;
  width: min(100%, 1200px);
  margin: 0 auto 1.5rem;
}

.pythagoras-mode-panel button {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: .85rem;
  min-height: 78px;
  padding: .85rem 1rem;
  border:
    1px solid
    #cbdce5;
  border-radius: 17px;
  background: #fff;
  color: #123b5c;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 9px 25px
    rgba(20, 69, 98, .07);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.pythagoras-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: #4fbac5;
  box-shadow:
    0 14px 30px
    rgba(20, 69, 98, .12);
}

.pythagoras-mode-panel button strong {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 48px;
  border-radius: 14px;
  background: #e8f5f7;
  color: #087397;
  font-size: 1rem;
}

.pythagoras-mode-panel button.is-active {
  border-color: #087297;
  background:
    linear-gradient(
      145deg,
      #073f62,
      #096d90
    );
  color: #fff;
}

.pythagoras-mode-panel button.is-active strong {
  background:
    rgba(255, 255, 255, .15);
  color: #fff;
}


/* RECHNERLAYOUT */

.pythagoras-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, .88fr);
  align-items: start;
  gap: 1.4rem;
  width: min(100%, 1200px);
  margin: 0 auto;
}

.pythagoras-result-card {
  position: sticky;
  top: 1.2rem;
}

.pythagoras-input-card
.radiator-input-grid {
  margin-bottom: 1.4rem;
}


/* DYNAMISCHE ZEICHNUNG */

.pythagoras-visual-stage {
  width: 100%;
  min-height: 470px;
  overflow: hidden;
  border:
    1px solid
    #cfe0e8;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #f9fcfd,
      #eef8f9
    );
  box-shadow:
    inset 0 0 38px
    rgba(49, 142, 166, .06);
}

.pythagoras-visual-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.pythagoras-svg-triangle {
  stroke: #fff;
  stroke-width: 2.5;
}

.pythagoras-square-a {
  fill: rgba(59, 151, 203, .32);
  stroke: #287fae;
  stroke-width: 2;
}

.pythagoras-square-b {
  fill: rgba(70, 202, 177, .31);
  stroke: #219779;
  stroke-width: 2;
}

.pythagoras-square-c {
  fill: rgba(235, 167, 84, .31);
  stroke: #c37b2a;
  stroke-width: 2;
}

.pythagoras-svg-right-angle {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
}

.pythagoras-svg-heading {
  fill: #0a476d;
  font-size: 22px;
  font-weight: 950;
}

.pythagoras-svg-side-label,
.pythagoras-svg-area-label {
  paint-order: stroke;
  stroke: #f8fcfd;
  stroke-width: 5px;
  stroke-linejoin: round;
  fill: #073e62;
  font-size: 14px;
  font-weight: 900;
}

.pythagoras-svg-area-label.is-hypotenuse {
  fill: #895619;
}

.pythagoras-svg-note {
  fill: #6f8796;
  font-size: 12px;
  font-weight: 700;
}


/* ERGEBNIS */

.pythagoras-main-result strong {
  overflow-wrap: anywhere;
  font-size:
    clamp(2.8rem, 5vw, 4.7rem);
  line-height: .96;
}

.pythagoras-result-card
.warmup-calculation-path {
  margin-top: 1rem;
}

.pythagoras-result-card
.math-symbolic-formula {
  display: block;
  padding-bottom: .65rem;
  border-bottom:
    1px solid
    #eadfd8;
  color: #8b654d;
}

.pythagoras-result-card
.math-numeric-path {
  display: block;
  margin-top: .7rem;
  color: #163c55;
  line-height: 1.5;
}


/* RESPONSIV */

@media (max-width: 1100px) {
  .pythagoras-mode-panel {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .pythagoras-calculator-hero {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 850px);
  }

  .pythagoras-calculator-hero
  .radiator-calculator-copy h1 {
    max-width: none;
  }

  .pythagoras-hero-visual {
    max-width: 720px;
  }

  .pythagoras-calculator-layout {
    grid-template-columns: 1fr;
  }

  .pythagoras-result-card {
    position: static;
  }
}

@media (max-width: 650px) {
  .pythagoras-mode-panel {
    grid-template-columns: 1fr;
  }

  .pythagoras-visual-stage {
    min-height: 330px;
  }

  .pythagoras-svg-side-label,
  .pythagoras-svg-area-label {
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .pythagoras-calculator-hero {
    width: min(100% - 1.25rem, 850px);
  }

  .pythagoras-calculator-hero
  .radiator-calculator-copy h1 {
    font-size:
      clamp(3.2rem, 16vw, 4.7rem);
  }

  .pythagoras-visual-stage {
    min-height: 280px;
  }
}


/* SHK_MATHEMATIK_UNIT_CONVERTER_LAYOUT_CSS_20260805 */

.unit-converter-calculator-page {
  background:
    linear-gradient(
      180deg,
      #f6fafc 0%,
      #edf4f8 100%
    );
}

.unit-converter-calculator-page main {
  overflow: hidden;
}


/* HERO */

.unit-converter-calculator-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(410px, 570px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: min(100% - 3rem, 1420px);
  min-height: auto;
  margin: 0 auto;
  padding:
    clamp(3.5rem, 7vw, 6rem)
    0
    clamp(3.5rem, 6vw, 5rem);
}

.unit-converter-calculator-hero
.radiator-calculator-copy h1 {
  max-width: 11ch;
  margin: .55rem 0 1.4rem;
  font-size:
    clamp(3.7rem, 6.2vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.065em;
}

.unit-converter-calculator-hero
.radiator-calculator-copy h1 small {
  display: block;
  margin-top: .15em;
  font-size: .53em;
  line-height: 1;
  letter-spacing: -.045em;
}

.unit-converter-hero-visual {
  display: grid;
  gap: 1.2rem;
  padding:
    clamp(1.5rem, 4vw, 2.3rem);
  border:
    1px solid
    rgba(93, 209, 205, .44);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      #063d61,
      #087397
    );
  color: #fff;
  box-shadow:
    0 28px 68px
    rgba(4, 52, 81, .23);
}

.unit-converter-hero-kicker {
  color: #90e4e1;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.unit-converter-hero-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.unit-converter-hero-value {
  display: grid;
  gap: .35rem;
  padding: 1.25rem 1rem;
  border-radius: 17px;
  background:
    rgba(255, 255, 255, .12);
  text-align: center;
}

.unit-converter-hero-value strong {
  color: #fff;
  font-size:
    clamp(1.45rem, 3vw, 2.2rem);
}

.unit-converter-hero-value span {
  color: #a8e8e4;
  font-size: .8rem;
  font-weight: 800;
}

.unit-converter-hero-arrow {
  font-size: 2rem;
  font-weight: 900;
}

.unit-converter-hero-formula {
  padding-top: 1.1rem;
  border-top:
    1px solid
    rgba(255, 255, 255, .24);
  color: #d7f5f3;
  font-size: .94rem;
  font-weight: 800;
  text-align: center;
}


/* KATEGORIEN */

.unit-category-panel {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: .8rem;
  width: min(100%, 1200px);
  margin: 0 auto 1.5rem;
}

.unit-category-panel button {
  display: grid;
  grid-template-columns: 43px 1fr;
  align-items: center;
  gap: .65rem;
  min-height: 64px;
  padding: .7rem .8rem;
  border:
    1px solid
    #cbdce5;
  border-radius: 15px;
  background: #fff;
  color: #123b5c;
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 8px 22px
    rgba(20, 69, 98, .06);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.unit-category-panel button:hover {
  transform: translateY(-2px);
  border-color: #4fbac5;
  box-shadow:
    0 13px 28px
    rgba(20, 69, 98, .11);
}

.unit-category-panel button strong {
  display: grid;
  place-items: center;
  width: 43px;
  height: 42px;
  border-radius: 12px;
  background: #e8f5f7;
  color: #087397;
  font-size: .9rem;
}

.unit-category-panel button.is-active {
  border-color: #087297;
  background:
    linear-gradient(
      145deg,
      #073f62,
      #096d90
    );
  color: #fff;
}

.unit-category-panel button.is-active strong {
  background:
    rgba(255, 255, 255, .15);
  color: #fff;
}


/* RECHNERLAYOUT */

.unit-converter-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, .88fr);
  align-items: start;
  gap: 1.4rem;
  width: min(100%, 1200px);
  margin: 0 auto;
}

.unit-converter-result-card {
  position: sticky;
  top: 1.2rem;
}


/* EINGABEN */

.unit-converter-source-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
  gap: 1rem;
}

.unit-converter-source-grid
.unit-value-field {
  grid-column: 1 / -1;
}

.unit-converter-swap-row {
  display: grid;
  place-items: center;
  margin: .6rem 0;
}

.unit-converter-swap-button {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .65rem;
  min-height: 46px;
  padding: .6rem 1rem;
  border:
    1px solid
    #9bc6d3;
  border-radius: 999px;
  background: #eaf6f8;
  color: #087093;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
}

.unit-converter-swap-button strong {
  font-size: 1.15rem;
}

.unit-converter-quick-values {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1rem 0 1.3rem;
}

.unit-converter-quick-values button {
  min-width: 62px;
  padding: .55rem .8rem;
  border:
    1px solid
    #c6dce5;
  border-radius: 11px;
  background: #fff;
  color: #234e68;
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}

.unit-converter-quick-values button:hover {
  border-color: #50b9c5;
  background: #eef9fa;
}


/* LIVE-UMRECHNUNG */

.unit-converter-bridge {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    64px
    minmax(0, 1fr);
  align-items: stretch;
  gap: .9rem;
  margin-top: 1rem;
}

.unit-converter-bridge-card {
  display: grid;
  align-content: center;
  gap: .5rem;
  min-height: 150px;
  padding: 1.1rem;
  overflow: hidden;
  border:
    1px solid
    #cae0e7;
  border-radius: 19px;
  background:
    linear-gradient(
      145deg,
      #f8fcfd,
      #eef8f9
    );
  text-align: center;
}

.unit-converter-bridge-card.is-target {
  border-color: #8bcfc9;
  background:
    linear-gradient(
      145deg,
      #eaf9f6,
      #dff4f0
    );
}

.unit-converter-bridge-card strong {
  overflow-wrap: anywhere;
  color: #073f62;
  font-size:
    clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1;
}

.unit-converter-bridge-card span {
  color: #557185;
  font-size: .78rem;
  font-weight: 800;
}

.unit-converter-bridge-arrow {
  display: grid;
  place-items: center;
}

.unit-converter-bridge-arrow span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      #073f62,
      #087397
    );
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  box-shadow:
    0 10px 25px
    rgba(5, 67, 101, .18);
}


/* ERGEBNIS */

.unit-converter-main-result strong {
  overflow-wrap: anywhere;
  font-size:
    clamp(2.6rem, 5vw, 4.5rem);
  line-height: .96;
}

.unit-converter-main-result
.unit-converter-category-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
  color: #087093;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.unit-converter-category-badge b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #e6f4f6;
}

.unit-converter-result-card
.warmup-calculation-path {
  margin-top: 1rem;
}

.unit-converter-result-card
.math-symbolic-formula {
  display: block;
  padding-bottom: .65rem;
  border-bottom:
    1px solid
    #eadfd8;
  color: #8b654d;
}

.unit-converter-result-card
.math-numeric-path {
  display: block;
  margin-top: .7rem;
  overflow-wrap: anywhere;
  color: #163c55;
  line-height: 1.5;
}


/* RESPONSIV */

@media (max-width: 1100px) {
  .unit-category-panel {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .unit-converter-calculator-hero {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 850px);
  }

  .unit-converter-calculator-hero
  .radiator-calculator-copy h1 {
    max-width: none;
  }

  .unit-converter-hero-visual {
    max-width: 720px;
  }

  .unit-converter-layout {
    grid-template-columns: 1fr;
  }

  .unit-converter-result-card {
    position: static;
  }
}

@media (max-width: 700px) {
  .unit-category-panel {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .unit-converter-source-grid {
    grid-template-columns: 1fr;
  }

  .unit-converter-source-grid
  .unit-value-field {
    grid-column: auto;
  }

  .unit-converter-bridge {
    grid-template-columns: 1fr;
  }

  .unit-converter-bridge-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  .unit-converter-calculator-hero {
    width: min(100% - 1.25rem, 850px);
  }

  .unit-converter-calculator-hero
  .radiator-calculator-copy h1 {
    font-size:
      clamp(3.1rem, 15vw, 4.5rem);
  }

  .unit-category-panel {
    grid-template-columns: 1fr;
  }

  .unit-converter-hero-row {
    gap: .5rem;
  }

  .unit-converter-hero-value {
    padding: 1rem .45rem;
  }

  .unit-converter-hero-value strong {
    font-size: 1.2rem;
  }
}
/* SHK_MATHEMATIK_CALCULATOR_PREMIUM_CSS_20260805 */

.calculator-page {
  background:
    radial-gradient(
      circle at 78% 6%,
      rgba(62, 191, 202, .14),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #f6fafc 0%,
      #edf4f8 100%
    );
}

.calculator-page main {
  overflow: hidden;
}


/* =========================================================
   HERO
========================================================= */

.calculator-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(410px, 580px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: min(100% - 3rem, 1420px);
  min-height: auto;
  margin: 0 auto;
  padding:
    clamp(3.5rem, 7vw, 6rem)
    0
    clamp(3.5rem, 6vw, 5rem);
}

.calculator-hero
.radiator-calculator-copy h1 {
  max-width: 10ch;
  margin: .55rem 0 1.4rem;
  font-size:
    clamp(3.8rem, 6.4vw, 6.7rem);
  line-height: .91;
  letter-spacing: -.068em;
}

.calculator-hero
.radiator-calculator-copy h1 small {
  display: block;
  margin-top: .13em;
  font-size: .49em;
  line-height: 1;
  letter-spacing: -.043em;
}

.calculator-hero-device {
  position: relative;
  width: min(100%, 540px);
  margin-left: auto;
  padding: 1.15rem;
  border:
    1px solid
    rgba(97, 208, 205, .42);
  border-radius: 33px;
  background:
    linear-gradient(
      155deg,
      #073654,
      #05273e
    );
  box-shadow:
    0 34px 75px
    rgba(3, 42, 67, .28),
    inset 0 1px 0
    rgba(255, 255, 255, .12);
}

.calculator-hero-device::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border:
    1px solid
    rgba(255, 255, 255, .07);
  border-radius: 25px;
}

.calculator-hero-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding:
    .25rem
    .4rem
    1rem;
  color: #d9f7f5;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.calculator-hero-brand b {
  color: #78dcd8;
}

.calculator-hero-screen {
  display: grid;
  align-content: end;
  min-height: 148px;
  padding: 1.15rem 1.25rem;
  overflow: hidden;
  border:
    1px solid
    rgba(149, 218, 212, .55);
  border-radius: 19px;
  background:
    linear-gradient(
      145deg,
      #d8eee8,
      #b9d8ce
    );
  color: #092d31;
  box-shadow:
    inset 0 3px 12px
    rgba(4, 50, 51, .19),
    0 8px 24px
    rgba(0, 0, 0, .18);
  font-family:
    "Roboto Mono",
    "Courier New",
    monospace;
  text-align: right;
}

.calculator-hero-screen span {
  overflow: hidden;
  color: #345c5e;
  font-size: .95rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-hero-screen strong {
  margin-top: .4rem;
  overflow-wrap: anywhere;
  font-size:
    clamp(2.35rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.calculator-hero-keys {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: .58rem;
  margin-top: .9rem;
}

.calculator-hero-key {
  display: grid;
  place-items: center;
  min-height: 46px;
  border:
    1px solid
    rgba(255, 255, 255, .09);
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      #284b61,
      #17374c
    );
  color: #fff;
  font-size: .88rem;
  font-weight: 850;
  box-shadow:
    0 5px 10px
    rgba(0, 0, 0, .19);
}

.calculator-hero-key.is-function {
  background:
    linear-gradient(
      145deg,
      #0c6680,
      #07546d
    );
}

.calculator-hero-key.is-equals {
  background:
    linear-gradient(
      145deg,
      #34bfae,
      #138f88
    );
}


/* =========================================================
   HAUPTBEREICH
========================================================= */

.calculator-section {
  padding:
    clamp(4rem, 7vw, 6rem)
    1.5rem
    clamp(5rem, 8vw, 7rem);
}

.calculator-section
.radiator-calculator-heading {
  width: min(100%, 1300px);
}

.calculator-workspace {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(310px, 390px);
  align-items: start;
  gap: 1.5rem;
  width: min(100%, 1300px);
  margin: 0 auto;
}


/* =========================================================
   RECHNERGEHÄUSE
========================================================= */

.calculator-machine {
  position: relative;
  min-width: 0;
  padding:
    clamp(1rem, 2.5vw, 1.55rem);
  border:
    1px solid
    rgba(21, 73, 100, .28);
  border-radius: 31px;
  background:
    linear-gradient(
      150deg,
      #123e59,
      #082a42 65%,
      #061f32
    );
  box-shadow:
    0 30px 70px
    rgba(7, 48, 74, .24),
    inset 0 1px 0
    rgba(255, 255, 255, .12);
}

.calculator-machine::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border:
    1px solid
    rgba(255, 255, 255, .055);
  border-radius: 24px;
}

.calculator-machine-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding:
    .1rem
    .4rem
    .85rem;
  color: #fff;
}

.calculator-machine-title {
  display: grid;
  gap: .16rem;
}

.calculator-machine-title strong {
  font-size: .95rem;
  letter-spacing: .035em;
}

.calculator-machine-title span {
  color: #94c9d2;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.calculator-memory-indicator {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  padding: .4rem .7rem;
  border:
    1px solid
    rgba(135, 217, 214, .2);
  border-radius: 999px;
  background:
    rgba(4, 29, 45, .35);
  color: #9bcbd3;
  font-size: .7rem;
  font-weight: 850;
}

.calculator-machine.has-memory
.calculator-memory-indicator,
[data-math-calculator].has-memory
.calculator-memory-indicator {
  border-color:
    rgba(91, 225, 205, .52);
  background:
    rgba(16, 132, 117, .22);
  color: #9cf0e2;
}


/* =========================================================
   DISPLAY
========================================================= */

.calculator-display {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 190px;
  padding:
    clamp(1rem, 3vw, 1.45rem);
  overflow: hidden;
  border:
    1px solid
    #91b8b4;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      #ddf0e9,
      #bcd9d1
    );
  color: #092f32;
  box-shadow:
    inset 0 4px 14px
    rgba(8, 52, 54, .19),
    0 11px 24px
    rgba(0, 0, 0, .19);
  font-family:
    "Roboto Mono",
    "Courier New",
    monospace;
}

.calculator-display-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 24px;
  color: #3d6263;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .035em;
}

.calculator-display-expression {
  align-self: end;
  min-height: 31px;
  margin-top: 1.15rem;
  overflow-x: auto;
  overflow-y: hidden;
  color: #365e60;
  font-size:
    clamp(.9rem, 2vw, 1.18rem);
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
  scrollbar-width: thin;
  white-space: nowrap;
}

.calculator-display-result {
  align-self: end;
  margin-top: .55rem;
  overflow-wrap: anywhere;
  font-size:
    clamp(2.55rem, 7vw, 4.8rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.07em;
  text-align: right;
}

.calculator-display-status {
  align-self: end;
  margin-top: .8rem;
  color: #496e6f;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 800;
  text-align: right;
}

.calculator-display-error {
  margin: .75rem 0 0;
  padding: .7rem .85rem;
  border:
    1px solid
    rgba(167, 59, 54, .32);
  border-radius: 11px;
  background:
    rgba(255, 232, 227, .85);
  color: #8a2f2d;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 800;
}

.calculator-display-error[hidden] {
  display: none;
}


/* =========================================================
   MODUS- UND WINKELSCHALTER
========================================================= */

.calculator-control-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: .9rem;
  margin: .95rem 0;
}

.calculator-mode-switch,
.calculator-angle-switch {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: .25rem;
  border:
    1px solid
    rgba(255, 255, 255, .1);
  border-radius: 13px;
  background:
    rgba(3, 23, 37, .38);
}

.calculator-mode-switch button,
.calculator-angle-switch button {
  min-height: 38px;
  padding: .5rem .8rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9fc8d1;
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}

.calculator-mode-switch button.is-active,
.calculator-angle-switch button.is-active {
  background:
    linear-gradient(
      145deg,
      #1f7590,
      #0d5a74
    );
  color: #fff;
  box-shadow:
    0 5px 12px
    rgba(0, 0, 0, .2);
}


/* =========================================================
   SPEICHERTASTEN
========================================================= */

.calculator-memory-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .65rem;
}

.calculator-memory-row button {
  min-height: 42px;
  padding: .45rem;
  border:
    1px solid
    rgba(107, 190, 202, .23);
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      #174b62,
      #0e3b53
    );
  color: #b9e4e8;
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 4px 9px
    rgba(0, 0, 0, .16);
}

.calculator-memory-row button:hover {
  background:
    linear-gradient(
      145deg,
      #1d6178,
      #124b64
    );
  color: #fff;
}


/* =========================================================
   WISSENSCHAFTLICHE TASTEN
========================================================= */

.calculator-scientific-panel {
  position: relative;
  z-index: 1;
  margin-bottom: .65rem;
}

.calculator-scientific-panel[hidden] {
  display: none;
}

.calculator-scientific-grid {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: .55rem;
}

.calculator-scientific-grid button {
  min-height: 47px;
  padding: .45rem .3rem;
  border:
    1px solid
    rgba(105, 201, 207, .24);
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      #155a70,
      #0d465d
    );
  color: #d7f4f5;
  font: inherit;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 5px 10px
    rgba(0, 0, 0, .16);
}

.calculator-scientific-grid button:hover {
  background:
    linear-gradient(
      145deg,
      #1d7185,
      #125970
    );
}

.calculator-scientific-grid button sup {
  font-size: .65em;
}


/* =========================================================
   STANDARDTASTEN
========================================================= */

.calculator-keypad {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: .62rem;
}

.calculator-key {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 62px;
  padding: .55rem;
  border:
    1px solid
    rgba(255, 255, 255, .09);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      #31576c,
      #1d4258
    );
  color: #fff;
  font: inherit;
  font-size:
    clamp(.95rem, 2vw, 1.16rem);
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 7px 12px
    rgba(0, 0, 0, .21),
    inset 0 1px 0
    rgba(255, 255, 255, .06);
  transition:
    transform .08s ease,
    filter .15s ease,
    box-shadow .15s ease;
}

.calculator-key:hover {
  filter: brightness(1.12);
}

.calculator-key:active {
  transform: translateY(2px);
  box-shadow:
    0 3px 7px
    rgba(0, 0, 0, .22);
}

.calculator-key.is-number {
  background:
    linear-gradient(
      145deg,
      #f9fbfc,
      #dce7eb
    );
  color: #113d56;
  border-color: #c2d2d9;
}

.calculator-key.is-operator {
  background:
    linear-gradient(
      145deg,
      #0e7591,
      #075b78
    );
  color: #fff;
}

.calculator-key.is-control {
  background:
    linear-gradient(
      145deg,
      #7d5a52,
      #65433d
    );
  color: #fff;
}

.calculator-key.is-secondary {
  background:
    linear-gradient(
      145deg,
      #285e73,
      #174b61
    );
  color: #d7f3f4;
}

.calculator-key.is-equals {
  grid-row: span 2;
  min-height: 132px;
  background:
    linear-gradient(
      145deg,
      #47cab5,
      #15988f
    );
  color: #fff;
  font-size: 1.55rem;
  box-shadow:
    0 9px 18px
    rgba(6, 104, 95, .3);
}

.calculator-key.is-zero {
  grid-column: span 2;
}

.calculator-key small {
  position: absolute;
  right: .45rem;
  bottom: .35rem;
  color: inherit;
  font-size: .55rem;
  opacity: .68;
}


/* =========================================================
   FUSSLEISTE DES RECHNERS
========================================================= */

.calculator-machine-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding:
    .9rem
    .35rem
    .05rem;
  color: #8ebbc6;
  font-size: .68rem;
  font-weight: 750;
}

.calculator-machine-footer span:last-child {
  text-align: right;
}


/* =========================================================
   SEITENLEISTE UND VERLAUF
========================================================= */

.calculator-side-column {
  display: grid;
  gap: 1.2rem;
  min-width: 0;
}

.calculator-history-card,
.calculator-help-card {
  min-width: 0;
  padding: 1.25rem;
  border:
    1px solid
    #cfdee6;
  border-radius: 23px;
  background:
    rgba(255, 255, 255, .9);
  box-shadow:
    0 18px 45px
    rgba(19, 66, 94, .09);
  backdrop-filter: blur(10px);
}

.calculator-history-heading,
.calculator-help-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1rem;
}

.calculator-history-heading div,
.calculator-help-heading div {
  display: grid;
  gap: .15rem;
}

.calculator-history-heading h3,
.calculator-help-heading h3 {
  margin: 0;
  color: #123c59;
  font-size: 1rem;
}

.calculator-history-heading p,
.calculator-help-heading p {
  margin: 0;
  color: #6d8391;
  font-size: .73rem;
}

.calculator-history-heading button,
.calculator-copy-button {
  min-height: 36px;
  padding: .45rem .7rem;
  border:
    1px solid
    #c7dbe4;
  border-radius: 10px;
  background: #f4f9fa;
  color: #315b72;
  font: inherit;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
}

.calculator-history-list {
  display: grid;
  gap: .6rem;
  max-height: 490px;
  overflow-y: auto;
  padding-right: .15rem;
  scrollbar-width: thin;
}

.calculator-history-empty {
  padding: 2rem .8rem;
  border:
    1px dashed
    #bfd5df;
  border-radius: 15px;
  background: #f6fafb;
  color: #718793;
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
}

.calculator-history-empty[hidden] {
  display: none;
}

.calculator-history-entry {
  display: grid;
  gap: .27rem;
  width: 100%;
  padding: .8rem .85rem;
  overflow: hidden;
  border:
    1px solid
    #d6e3e8;
  border-radius: 14px;
  background: #f9fcfd;
  color: #173f58;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calculator-history-entry:hover {
  border-color: #68bbc5;
  background: #eff9fa;
}

.calculator-history-entry span {
  overflow: hidden;
  color: #6a818e;
  font-family:
    "Roboto Mono",
    "Courier New",
    monospace;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-history-entry strong {
  overflow-wrap: anywhere;
  color: #0c5373;
  font-size: 1.05rem;
}

.calculator-history-entry small {
  color: #8a9ba5;
  font-size: .62rem;
}

.calculator-help-grid {
  display: grid;
  gap: .65rem;
}

.calculator-help-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: .7rem;
  padding: .75rem;
  border-radius: 14px;
  background: #f5f9fa;
}

.calculator-help-item kbd {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: .3rem .4rem;
  border:
    1px solid
    #b9cdd7;
  border-bottom-width: 3px;
  border-radius: 8px;
  background: #fff;
  color: #234f67;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 900;
}

.calculator-help-item div {
  display: grid;
  gap: .15rem;
}

.calculator-help-item strong {
  color: #153f58;
  font-size: .75rem;
}

.calculator-help-item span {
  color: #718692;
  font-size: .68rem;
  line-height: 1.4;
}

.calculator-copy-area {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top:
    1px solid
    #dce6eb;
}

.calculator-copy-area span {
  color: #6b828f;
  font-size: .7rem;
}


/* =========================================================
   INFOFELDER
========================================================= */

.calculator-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  width: min(100%, 1300px);
  margin: 1.3rem auto 0;
}

.calculator-info-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding: .45rem .7rem;
  border:
    1px solid
    #c9dce4;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, .82);
  color: #365d72;
  font-size: .72rem;
  font-weight: 800;
}


/* =========================================================
   FOKUS UND ZUGÄNGLICHKEIT
========================================================= */

.calculator-page button:focus-visible {
  outline:
    3px solid
    rgba(76, 216, 207, .72);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .calculator-key,
  .calculator-category-button,
  .calculator-mode-switch button,
  .calculator-angle-switch button {
    transition: none;
  }
}


/* =========================================================
   RESPONSIV
========================================================= */

@media (max-width: 1100px) {
  .calculator-hero {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 880px);
  }

  .calculator-hero
  .radiator-calculator-copy h1 {
    max-width: none;
  }

  .calculator-hero-device {
    width: min(100%, 680px);
    margin: 0;
  }

  .calculator-workspace {
    grid-template-columns: 1fr;
    width: min(100%, 900px);
  }

  .calculator-side-column {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .calculator-section {
    padding-right: .8rem;
    padding-left: .8rem;
  }

  .calculator-control-strip {
    grid-template-columns: 1fr;
  }

  .calculator-angle-switch {
    justify-self: start;
  }

  .calculator-scientific-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

  .calculator-side-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .calculator-hero {
    width: min(100% - 1.2rem, 880px);
    padding-top: 2.5rem;
  }

  .calculator-hero
  .radiator-calculator-copy h1 {
    font-size:
      clamp(3.05rem, 15vw, 4.45rem);
  }

  .calculator-hero-device {
    padding: .8rem;
    border-radius: 25px;
  }

  .calculator-hero-keys {
    gap: .38rem;
  }

  .calculator-hero-key {
    min-height: 39px;
    border-radius: 9px;
    font-size: .7rem;
  }

  .calculator-machine {
    padding: .75rem;
    border-radius: 24px;
  }

  .calculator-machine-header {
    align-items: flex-start;
  }

  .calculator-display {
    min-height: 165px;
    padding: .9rem;
  }

  .calculator-display-result {
    font-size:
      clamp(2.2rem, 13vw, 3.7rem);
  }

  .calculator-memory-row {
    gap: .35rem;
  }

  .calculator-memory-row button {
    min-height: 38px;
    padding: .35rem .2rem;
    font-size: .62rem;
  }

  .calculator-scientific-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    gap: .4rem;
  }

  .calculator-scientific-grid button {
    min-height: 42px;
    font-size: .66rem;
  }

  .calculator-keypad {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
    gap: .45rem;
  }

  .calculator-key {
    min-height: 54px;
    padding: .35rem;
    border-radius: 11px;
  }

  .calculator-key.is-equals {
    grid-row: auto;
    min-height: 54px;
  }

  .calculator-key.is-zero {
    grid-column: span 2;
  }

  .calculator-machine-footer {
    display: grid;
  }

  .calculator-machine-footer span:last-child {
    text-align: left;
  }
}

@media (max-width: 390px) {
  .calculator-keypad {
    gap: .35rem;
  }

  .calculator-key {
    min-height: 49px;
    font-size: .9rem;
  }

  .calculator-scientific-grid button {
    min-height: 39px;
    font-size: .61rem;
  }
}
/* SHK_MATHEMATIK_INFO_POPOVER_CLOSE_BUTTON_FIX_20260805 */

.shk-info-popover-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border:
    1px solid
    rgba(255, 255, 255, .14);
  border-radius: 9px;
  background:
    rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.shk-info-popover-close:hover,
.shk-info-popover-close:focus-visible {
  border-color:
    rgba(255, 255, 255, .52);
  background:
    rgba(255, 255, 255, .18);
  outline: none;
}
/* SHK_MATHEMATIK_MATERIAL_CALCULATOR_CSS_20260805 */

.material-calculator-page {
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(65, 190, 179, .13),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #f6fafc 0%,
      #edf4f8 100%
    );
}

.material-calculator-page main {
  overflow: hidden;
}


/* HERO */

.material-calculator-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(430px, 590px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: min(100% - 3rem, 1420px);
  min-height: auto;
  margin: 0 auto;
  padding:
    clamp(3.5rem, 7vw, 6rem)
    0
    clamp(3.5rem, 6vw, 5rem);
}

.material-calculator-hero
.radiator-calculator-copy h1 {
  max-width: 10ch;
  margin: .55rem 0 1.4rem;
  font-size:
    clamp(3.8rem, 6.4vw, 6.6rem);
  line-height: .91;
  letter-spacing: -.068em;
}

.material-calculator-hero
.radiator-calculator-copy h1 small {
  display: block;
  margin-top: .13em;
  font-size: .49em;
  line-height: 1;
  letter-spacing: -.043em;
}

.material-hero-visual {
  display: grid;
  gap: 1.3rem;
  padding:
    clamp(1.5rem, 4vw, 2.35rem);
  border:
    1px solid
    rgba(98, 211, 198, .42);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      #073d5e,
      #086e86
    );
  color: #fff;
  box-shadow:
    0 28px 68px
    rgba(4, 52, 81, .23);
}

.material-hero-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.material-hero-heading span {
  color: #91e3de;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.material-hero-heading strong {
  color: #fff;
  font-size: .9rem;
}

.material-hero-flow {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
}

.material-hero-step {
  display: grid;
  align-content: center;
  gap: .35rem;
  min-height: 105px;
  padding: .85rem;
  border:
    1px solid
    rgba(255, 255, 255, .14);
  border-radius: 16px;
  background:
    rgba(255, 255, 255, .1);
  text-align: center;
}

.material-hero-step span {
  color: #b8e8e6;
  font-size: .68rem;
  font-weight: 800;
}

.material-hero-step strong {
  color: #fff;
  font-size: 1.15rem;
}

.material-hero-step.is-waste {
  background:
    rgba(242, 173, 92, .16);
}

.material-hero-step.is-result {
  background:
    rgba(67, 208, 174, .22);
}

.material-hero-plus,
.material-hero-equals {
  color: #a8dddf;
  font-size: 1.2rem;
  font-weight: 900;
}

.material-hero-track {
  display: flex;
  width: 100%;
  height: 18px;
  overflow: hidden;
  border:
    1px solid
    rgba(255, 255, 255, .14);
  border-radius: 999px;
  background:
    rgba(1, 27, 43, .35);
}

.material-hero-track span {
  display: block;
  background: #50c9ce;
}

.material-hero-track span.is-waste {
  background: #e6a453;
}

.material-hero-track span.is-rest {
  background: #5ecda8;
}

.material-hero-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: #c7e8e9;
  font-size: .7rem;
  font-weight: 800;
}

.material-hero-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.material-hero-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #50c9ce;
}

.material-hero-legend i.is-waste {
  background: #e6a453;
}

.material-hero-legend i.is-rest {
  background: #5ecda8;
}


/* MODUSAUSWAHL */

.material-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: .9rem;
  width: min(100%, 1200px);
  margin: 0 auto 1.5rem;
}

.material-mode-panel button {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: .9rem;
  min-height: 78px;
  padding: .85rem 1rem;
  border:
    1px solid
    #cbdce5;
  border-radius: 17px;
  background: #fff;
  color: #123b5c;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 9px 25px
    rgba(20, 69, 98, .07);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.material-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: #52bdbd;
  box-shadow:
    0 14px 30px
    rgba(20, 69, 98, .12);
}

.material-mode-panel button > strong {
  display: grid;
  place-items: center;
  height: 50px;
  border-radius: 14px;
  background: #e8f6f6;
  color: #08798a;
  font-size: 1.1rem;
}

.material-mode-panel button span {
  display: grid;
  gap: .18rem;
  color: #6a8290;
  font-size: .76rem;
}

.material-mode-panel button span b {
  color: #153f58;
  font-size: .94rem;
}

.material-mode-panel button.is-active {
  border-color: #08788f;
  background:
    linear-gradient(
      145deg,
      #073f62,
      #08758b
    );
  color: #fff;
}

.material-mode-panel button.is-active > strong {
  background:
    rgba(255, 255, 255, .15);
  color: #fff;
}

.material-mode-panel button.is-active span,
.material-mode-panel button.is-active span b {
  color: #fff;
}


/* RECHNER */

.material-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, .88fr);
  align-items: start;
  gap: 1.4rem;
  width: min(100%, 1200px);
  margin: 0 auto;
}

.material-result-card {
  position: sticky;
  top: 1.2rem;
}

.material-example-field {
  margin-bottom: 1.2rem;
}

.material-input-grid {
  align-items: end;
}


/* BEDARFSGRAFIK */

.material-visual-stage {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding:
    clamp(1rem, 3vw, 1.45rem);
  border:
    1px solid
    #cfe0e8;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #f9fcfd,
      #eef8f9
    );
}

.material-visual-row {
  display: grid;
  gap: .55rem;
}

.material-visual-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #5b7483;
  font-size: .74rem;
  font-weight: 800;
}

.material-visual-heading strong {
  color: #153f58;
  font-size: .82rem;
}

.material-visual-track {
  width: 100%;
  height: 17px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce9ed;
  box-shadow:
    inset 0 2px 5px
    rgba(18, 67, 91, .08);
}

.material-visual-bar {
  display: block;
  min-width: 10px;
  height: 100%;
  border-radius: 999px;
  transition: width .25s ease;
}

.material-visual-bar.is-demand {
  background:
    linear-gradient(
      90deg,
      #2489b2,
      #52c8d0
    );
}

.material-visual-bar.is-gross {
  background:
    linear-gradient(
      90deg,
      #cf802b,
      #efb15f
    );
}

.material-visual-bar.is-order {
  background:
    linear-gradient(
      90deg,
      #188d70,
      #57cda5
    );
}

.material-visual-summary {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: .7rem;
  padding-top: .3rem;
}

.material-visual-summary span {
  display: grid;
  gap: .2rem;
  padding: .85rem .7rem;
  border:
    1px solid
    #d1e2e7;
  border-radius: 14px;
  background:
    rgba(255, 255, 255, .78);
  color: #68808d;
  font-size: .69rem;
  font-weight: 800;
  text-align: center;
}

.material-visual-summary b {
  color: #0b5874;
  font-size: 1.1rem;
}


/* ERGEBNIS */

.material-main-result strong {
  overflow-wrap: anywhere;
  font-size:
    clamp(2.8rem, 5vw, 4.7rem);
  line-height: .96;
}

.material-result-card
.warmup-calculation-path {
  margin-top: 1rem;
}

.material-result-card
.math-symbolic-formula {
  display: block;
  padding-bottom: .65rem;
  border-bottom:
    1px solid
    #eadfd8;
  color: #8b654d;
}

.material-result-card
.math-numeric-path {
  display: block;
  margin-top: .7rem;
  overflow-wrap: anywhere;
  color: #163c55;
  line-height: 1.5;
}


/* RESPONSIV */

@media (max-width: 1050px) {
  .material-calculator-hero {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 880px);
  }

  .material-calculator-hero
  .radiator-calculator-copy h1 {
    max-width: none;
  }

  .material-hero-visual {
    max-width: 760px;
  }

  .material-calculator-layout {
    grid-template-columns: 1fr;
  }

  .material-result-card {
    position: static;
  }
}

@media (max-width: 760px) {
  .material-mode-panel {
    grid-template-columns: 1fr;
  }

  .material-hero-flow {
    grid-template-columns: 1fr;
  }

  .material-hero-plus,
  .material-hero-equals {
    transform: rotate(90deg);
    text-align: center;
  }
}

@media (max-width: 620px) {
  .material-calculator-hero {
    width: min(100% - 1.25rem, 880px);
  }

  .material-calculator-hero
  .radiator-calculator-copy h1 {
    font-size:
      clamp(3.15rem, 15vw, 4.6rem);
  }

  .material-visual-summary {
    grid-template-columns: 1fr;
  }

  .material-visual-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }
}
/* SHK_MATHEMATIK_MIXTURE_CALCULATOR_CSS_20260805 */

.mixture-calculator-page {
  background:
    radial-gradient(
      circle at 82% 7%,
      rgba(64, 190, 203, .14),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #f6fafc 0%,
      #edf4f8 100%
    );
}

.mixture-calculator-page main {
  overflow: hidden;
}


/* HERO */

.mixture-calculator-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(430px, 590px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: min(100% - 3rem, 1420px);
  min-height: auto;
  margin: 0 auto;
  padding:
    clamp(3.5rem, 7vw, 6rem)
    0
    clamp(3.5rem, 6vw, 5rem);
}

.mixture-calculator-hero
.radiator-calculator-copy h1 {
  max-width: 11ch;
  margin: .55rem 0 1.4rem;
  font-size:
    clamp(3.7rem, 6.2vw, 6.4rem);
  line-height: .91;
  letter-spacing: -.067em;
}

.mixture-calculator-hero
.radiator-calculator-copy h1 small {
  display: block;
  margin-top: .13em;
  font-size: .5em;
  line-height: 1;
  letter-spacing: -.043em;
}

.mixture-hero-visual {
  display: grid;
  gap: 1.25rem;
  padding:
    clamp(1.5rem, 4vw, 2.35rem);
  border:
    1px solid
    rgba(94, 210, 211, .43);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      #073d60,
      #087697
    );
  color: #fff;
  box-shadow:
    0 28px 68px
    rgba(4, 52, 81, .23);
}

.mixture-hero-kicker {
  color: #94e5e2;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mixture-hero-components {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
}

.mixture-hero-component {
  display: grid;
  align-content: center;
  gap: .35rem;
  min-height: 112px;
  padding: .9rem;
  border:
    1px solid
    rgba(255, 255, 255, .15);
  border-radius: 17px;
  background:
    rgba(255, 255, 255, .1);
  text-align: center;
}

.mixture-hero-component.is-a {
  background:
    rgba(68, 198, 211, .2);
}

.mixture-hero-component.is-b {
  background:
    rgba(72, 207, 165, .2);
}

.mixture-hero-component.is-result {
  background:
    rgba(238, 173, 85, .2);
}

.mixture-hero-component span {
  color: #c2e9e9;
  font-size: .68rem;
  font-weight: 800;
}

.mixture-hero-component strong {
  font-size: 1.2rem;
}

.mixture-hero-operator {
  color: #a8dfe1;
  font-size: 1.25rem;
  font-weight: 900;
}

.mixture-hero-bar {
  display: flex;
  width: 100%;
  height: 22px;
  overflow: hidden;
  border-radius: 999px;
  background:
    rgba(1, 28, 44, .4);
}

.mixture-hero-bar span {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
}

.mixture-hero-bar .is-a {
  background:
    linear-gradient(
      90deg,
      #1d92b5,
      #54ced2
    );
}

.mixture-hero-bar .is-b {
  background:
    linear-gradient(
      90deg,
      #198e70,
      #5bd0aa
    );
}


/* MODI */

.mixture-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: .85rem;
  width: min(100%, 1200px);
  margin: 0 auto 1.5rem;
}

.mixture-mode-panel button {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: .8rem;
  min-height: 76px;
  padding: .8rem .9rem;
  border:
    1px solid
    #cbdce5;
  border-radius: 17px;
  background: #fff;
  color: #123b5c;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 9px 25px
    rgba(20, 69, 98, .07);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.mixture-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: #4cbac4;
  box-shadow:
    0 14px 30px
    rgba(20, 69, 98, .12);
}

.mixture-mode-panel button > strong {
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 14px;
  background: #e7f5f7;
  color: #087495;
  font-size: .98rem;
}

.mixture-mode-panel button span {
  display: grid;
  gap: .15rem;
  color: #6b8290;
  font-size: .7rem;
}

.mixture-mode-panel button span b {
  color: #153f58;
  font-size: .84rem;
}

.mixture-mode-panel button.is-active {
  border-color: #087397;
  background:
    linear-gradient(
      145deg,
      #073f62,
      #087594
    );
}

.mixture-mode-panel button.is-active > strong {
  background:
    rgba(255, 255, 255, .15);
  color: #fff;
}

.mixture-mode-panel button.is-active span,
.mixture-mode-panel button.is-active span b {
  color: #fff;
}


/* RECHNER */

.mixture-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, .88fr);
  align-items: start;
  gap: 1.4rem;
  width: min(100%, 1200px);
  margin: 0 auto;
}

.mixture-result-card {
  position: sticky;
  top: 1.2rem;
}

.mixture-example-field {
  margin-bottom: 1.2rem;
}

.mixture-field-group[hidden] {
  display: none;
}

.mixture-field-group {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
  border:
    1px solid
    #d4e2e8;
  border-radius: 19px;
  background: #f8fbfc;
}

.mixture-field-group
.field:first-child {
  grid-column: 1 / -1;
}

.mixture-options-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}


/* LIVE-GRAFIK */

.mixture-visual-stage {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
  padding:
    clamp(1rem, 3vw, 1.45rem);
  border:
    1px solid
    #cfe0e8;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #f9fcfd,
      #eef8f9
    );
}

.mixture-visual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #647d8b;
  font-size: .75rem;
  font-weight: 800;
}

.mixture-visual-header strong {
  color: #123f5c;
  font-size: .9rem;
}

.mixture-visual-bar {
  display: flex;
  width: 100%;
  min-height: 62px;
  overflow: hidden;
  border-radius: 18px;
  background: #dbe8ec;
  box-shadow:
    inset 0 3px 7px
    rgba(15, 67, 90, .1);
}

.mixture-visual-component {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
  transition: width .25s ease;
}

.mixture-visual-component.is-a {
  background:
    linear-gradient(
      90deg,
      #1687ae,
      #50c9d0
    );
}

.mixture-visual-component.is-b {
  background:
    linear-gradient(
      90deg,
      #168b6e,
      #58cda6
    );
}

.mixture-visual-components {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.mixture-visual-components > div {
  display: grid;
  grid-template-columns:
    12px
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: .45rem;
  padding: .85rem;
  border:
    1px solid
    #d4e2e7;
  border-radius: 15px;
  background:
    rgba(255, 255, 255, .76);
}

.mixture-visual-components i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mixture-visual-components i.is-a {
  background: #249db8;
}

.mixture-visual-components i.is-b {
  background: #28a47e;
}

.mixture-visual-components span {
  overflow: hidden;
  color: #617987;
  font-size: .7rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mixture-visual-components strong {
  color: #103f59;
  font-size: .8rem;
}

.mixture-visual-components small {
  grid-column: 2 / -1;
  color: #83949e;
  font-size: .66rem;
}


/* ERGEBNIS */

.mixture-main-result strong {
  overflow-wrap: anywhere;
  font-size:
    clamp(2.7rem, 5vw, 4.7rem);
  line-height: .96;
}

.mixture-result-card
.warmup-calculation-path {
  margin-top: 1rem;
}

.mixture-result-card
.math-symbolic-formula {
  display: block;
  padding-bottom: .65rem;
  border-bottom:
    1px solid
    #eadfd8;
  color: #8b654d;
}

.mixture-result-card
.math-numeric-path {
  display: block;
  margin-top: .7rem;
  overflow-wrap: anywhere;
  color: #163c55;
  line-height: 1.5;
}


/* RESPONSIV */

@media (max-width: 1100px) {
  .mixture-mode-panel {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .mixture-calculator-hero {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 880px);
  }

  .mixture-calculator-hero
  .radiator-calculator-copy h1 {
    max-width: none;
  }

  .mixture-hero-visual {
    max-width: 760px;
  }

  .mixture-calculator-layout {
    grid-template-columns: 1fr;
  }

  .mixture-result-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .mixture-hero-components {
    grid-template-columns: 1fr;
  }

  .mixture-hero-operator {
    transform: rotate(90deg);
    text-align: center;
  }

  .mixture-field-group,
  .mixture-options-grid,
  .mixture-visual-components {
    grid-template-columns: 1fr;
  }

  .mixture-field-group
  .field:first-child {
    grid-column: auto;
  }
}

@media (max-width: 580px) {
  .mixture-calculator-hero {
    width: min(100% - 1.25rem, 880px);
  }

  .mixture-calculator-hero
  .radiator-calculator-copy h1 {
    font-size:
      clamp(3.05rem, 14vw, 4.45rem);
  }

  .mixture-mode-panel {
    grid-template-columns: 1fr;
  }

  .mixture-visual-header {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
}

/* SHK_MATHEMATIK_ROUNDING_CALCULATOR_CSS_20260805 */

.rounding-calculator-hero {
  align-items: stretch;
}

.rounding-hero-visual {
  display: grid;
  place-content: center;
  min-height: 280px;
  padding: 36px;
  border: 1px solid rgba(33, 83, 118, 0.14);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at top right,
      rgba(66, 153, 225, 0.2),
      transparent 42%
    ),
    linear-gradient(145deg, #f8fbfd, #e7f1f7);
  box-shadow: 0 24px 55px rgba(18, 59, 92, 0.12);
  text-align: center;
}

.rounding-hero-visual span,
.rounding-hero-visual strong {
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rounding-hero-visual span {
  color: #657786;
}

.rounding-hero-visual b {
  margin: 18px 0;
  color: #1d6d98;
  font-size: 2rem;
}

.rounding-hero-visual strong {
  color: #123b5c;
}

.rounding-hero-visual small {
  margin-top: 18px;
  color: #526a7a;
  font-weight: 700;
}

.round-mode-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
}

.round-mode-panel button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 16px;
  border: 1px solid rgba(18, 59, 92, 0.15);
  border-radius: 20px;
  background: #fff;
  color: #123b5c;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.round-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 109, 152, 0.5);
}

.round-mode-panel button.is-active {
  border-color: #1d6d98;
  background: linear-gradient(145deg, #f5fbff, #e6f2f8);
  box-shadow: 0 14px 30px rgba(18, 59, 92, 0.12);
}

.round-mode-panel button > strong {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #123b5c;
  color: #fff;
  font-size: 1rem;
}

.round-mode-panel button span {
  display: grid;
  gap: 4px;
  color: #617483;
  font-size: 0.88rem;
}

.round-mode-panel button b {
  color: #123b5c;
  font-size: 1rem;
}

.round-input-card [data-round-fields] {
  margin-top: 18px;
}

.round-main-result strong {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .round-mode-panel {
    grid-template-columns: 1fr;
  }

  .rounding-hero-visual {
    min-height: 230px;
    padding: 26px 18px;
  }
}

/* SHK_KLIMA_OVERVIEW_CSS_20260805 */

.climate-overview-page {
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(66, 180, 201, 0.15),
      transparent 26rem
    ),
    #f4f8fa;
  color: #173b46;
}

.climate-overview-page main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.climate-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 42px;
  align-items: center;
  padding: 70px 0 54px;
}

.climate-overview-copy h1 {
  display: grid;
  margin: 12px 0 22px;
  color: #124b59;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
}

.climate-overview-copy h1 small {
  margin-top: 16px;
  font-size: clamp(1.25rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
}

.climate-overview-copy > p {
  max-width: 680px;
  color: #55717a;
  font-size: 1.08rem;
  line-height: 1.75;
}

.climate-overview-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.climate-overview-highlights span {
  display: grid;
  min-width: 125px;
  padding: 14px 18px;
  border: 1px solid rgba(11, 101, 116, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  color: #55717a;
}

.climate-overview-highlights strong {
  color: #0b6574;
  font-size: 1.15rem;
}

.climate-overview-visual {
  display: grid;
  gap: 18px;
  min-height: 390px;
  padding: 34px;
  border: 1px solid rgba(11, 101, 116, 0.14);
  border-radius: 34px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(218, 241, 245, 0.92)
    );
  box-shadow: 0 26px 65px rgba(19, 82, 94, 0.14);
}

.climate-air-stream {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
}

.climate-air-stream.is-cold {
  border-left: 5px solid #2a9fc0;
}

.climate-air-stream.is-warm {
  border-left: 5px solid #e18a49;
}

.climate-unit-symbol {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 170px;
  border-radius: 28px;
  background: linear-gradient(145deg, #0d7384, #124b59);
  color: #fff;
}

.climate-unit-symbol span {
  font-size: 4rem;
}

.climate-unit-symbol b {
  margin-top: 8px;
  font-size: 1.3rem;
}

.climate-overview-section {
  padding: 42px 0 70px;
}

.climate-overview-heading {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: end;
  margin-bottom: 28px;
}

.climate-overview-heading h2,
.climate-roadmap h2 {
  margin: 4px 0 0;
  color: #124b59;
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.climate-overview-heading > p {
  max-width: 470px;
  color: #607981;
  line-height: 1.65;
}

.climate-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.climate-topic-card {
  position: relative;
  min-height: 300px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(11, 101, 116, 0.13);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(19, 82, 94, 0.08);
}

.climate-topic-card.is-priority {
  border-color: rgba(11, 101, 116, 0.45);
  background: linear-gradient(145deg, #ffffff, #eaf7f8);
}

.climate-card-number {
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(11, 101, 116, 0.22);
  font-size: 2rem;
  font-weight: 900;
}

.climate-card-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  border-radius: 18px;
  background: #0b6574;
  color: #fff;
  font-weight: 900;
}

.climate-topic-card h3 {
  margin: 6px 0 12px;
  color: #124b59;
  font-size: 1.45rem;
}

.climate-topic-card > p:not(.eyebrow) {
  color: #617b83;
  line-height: 1.65;
}

.climate-card-status {
  position: absolute;
  left: 28px;
  bottom: 24px;
  color: #0b6574;
  font-size: 0.84rem;
  font-weight: 800;
}

.climate-roadmap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  margin-bottom: 72px;
  padding: 38px;
  border-radius: 30px;
  background: #124b59;
  color: #fff;
}

.climate-roadmap h2 {
  color: #fff;
}

.climate-roadmap ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.climate-roadmap li {
  display: grid;
  gap: 3px;
  padding: 15px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
}

.climate-roadmap li span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .climate-overview-hero,
  .climate-roadmap {
    grid-template-columns: 1fr;
  }

  .climate-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .climate-overview-heading {
    display: grid;
  }
}

@media (max-width: 620px) {
  .climate-overview-page main {
    width: min(100% - 22px, 1180px);
  }

  .climate-overview-hero {
    padding-top: 42px;
  }

  .climate-card-grid {
    grid-template-columns: 1fr;
  }

  .climate-overview-visual {
    min-height: 320px;
    padding: 22px;
  }

  .climate-roadmap {
    padding: 26px 20px;
  }
}

/* SHK_KLIMA_OVERVIEW_INFO_CSS_20260805 */

.climate-guidance {
  margin: 0 auto 32px;
  padding: 32px;
  border: 1px solid rgba(11, 101, 116, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(232, 248, 250, 0.94)
    );
  box-shadow: 0 18px 45px rgba(20, 62, 74, 0.08);
}

.climate-guidance-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 24px;
}

.climate-guidance-heading h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.climate-guidance-heading > p {
  margin: 0;
  color: #49656d;
  line-height: 1.7;
}

.climate-guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.climate-guidance-grid article {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(11, 101, 116, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
}

.climate-guidance-grid article > span {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #0b6574;
  color: #fff;
  font-weight: 800;
}

.climate-guidance-grid h3 {
  margin: 2px 0 8px;
  font-size: 1rem;
}

.climate-guidance-grid p {
  margin: 0;
  color: #526b72;
  line-height: 1.6;
}

.climate-calculation-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 4px solid #0b6574;
  border-radius: 14px;
  background: rgba(11, 101, 116, 0.08);
}

.climate-calculation-note strong {
  color: #084e5a;
}

.climate-calculation-note p {
  margin: 0;
  line-height: 1.65;
}

@media (max-width: 820px) {
  .climate-guidance-heading,
  .climate-guidance-grid {
    grid-template-columns: 1fr;
  }

  .climate-guidance {
    padding: 24px;
  }
}

@media (max-width: 560px) {
  .climate-guidance {
    padding: 20px 16px;
    border-radius: 22px;
  }

  .climate-calculation-note {
    grid-template-columns: 1fr;
  }
}

/* SHK_KLIMA_OVERVIEW_INFO_CSS_END_20260805 */



/* SHK_KLIMA_OVERVIEW_VIDEO_CSS_20260805 */

.climate-video-frame {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 360px;
  background: #071f29;
}

.climate-overview-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.climate-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(3, 25, 33, 0.78) 100%
    );
}

.climate-video-label {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: grid;
  gap: 4px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.climate-video-label span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.climate-video-label strong {
  font-size: clamp(1rem, 2vw, 1.3rem);
}

@media (max-width: 720px) {
  .climate-video-frame,
  .climate-overview-video {
    min-height: 260px;
  }

  .climate-video-label {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }
}

/* SHK_KLIMA_OVERVIEW_VIDEO_CSS_END_20260805 */


/* SHK_KLIMA_COOLING_LOAD_CSS_20260805 */

.climate-calculator-page {
  background:
    radial-gradient(circle at 85% 8%, rgba(71, 196, 215, 0.14), transparent 34%),
    #f4f8fa;
}

.cooling-load-hero {
  background:
    linear-gradient(135deg, rgba(4, 48, 61, 0.98), rgba(11, 101, 116, 0.93));
}

.cooling-load-hero-visual {
  display: grid;
  min-height: 300px;
  padding: 36px;
  place-content: center;
  gap: 10px;
  border-radius: 28px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle, rgba(117, 224, 238, 0.27), transparent 55%),
    rgba(1, 29, 38, 0.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.cooling-load-hero-visual span,
.cooling-load-hero-visual small {
  color: rgba(255,255,255,0.76);
}

.cooling-load-hero-visual strong {
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1;
}

.cooling-load-hero-visual b {
  font-size: 1.15rem;
}

.cooling-load-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 24px;
  align-items: start;
}

.cooling-load-input,
.cooling-load-result {
  min-width: 0;
}

.cooling-load-subheading {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(11, 101, 116, 0.13);
}

.cooling-load-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cooling-load-result {
  position: sticky;
  top: 24px;
}

.cooling-load-main-result {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 8px;
  color: #075b69;
}

.cooling-load-main-result strong {
  font-size: clamp(3.3rem, 7vw, 5.4rem);
  line-height: 0.95;
}

.cooling-load-main-result span {
  font-size: 1.4rem;
  font-weight: 800;
}

.cooling-load-recommendation {
  min-height: 48px;
  color: #48656d;
  line-height: 1.55;
}

.cooling-load-breakdown {
  display: grid;
  gap: 0;
  margin: 24px 0;
}

.cooling-load-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(12, 76, 91, 0.11);
}

.cooling-load-breakdown dt {
  color: #587078;
}

.cooling-load-breakdown dd {
  margin: 0;
  font-weight: 800;
}

.cooling-load-indicators {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cooling-load-indicators span {
  padding: 14px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.cooling-load-indicators small,
.cooling-load-indicators strong {
  display: block;
}

.cooling-load-indicators small {
  margin-bottom: 5px;
  color: #637981;
}

.cooling-load-formula {
  margin-top: 20px;
  padding: 18px;
  border-radius: 16px;
  background: #082f3a;
  color: #fff;
}

.cooling-load-formula p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.climate-info-popover {
  position: fixed;
  z-index: 10000;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid rgba(11, 101, 116, 0.25);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(1, 31, 40, 0.25);
}

.climate-info-popover strong,
.climate-info-popover b,
.climate-info-popover code {
  display: block;
}

.climate-info-popover strong {
  padding-right: 34px;
  font-size: 1.2rem;
}

.climate-info-popover b {
  margin-top: 14px;
  color: #075b69;
}

.climate-info-popover p {
  margin: 7px 0 0;
  color: #4e6870;
  line-height: 1.55;
}

.climate-info-popover code {
  margin-top: 7px;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: normal;
  background: #eef7f8;
  color: #083d48;
}

.climate-info-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 1.7rem;
  cursor: pointer;
}

@media (max-width: 980px) {
  .cooling-load-layout {
    grid-template-columns: 1fr;
  }

  .cooling-load-result {
    position: static;
  }
}

@media (max-width: 620px) {
  .cooling-load-field-grid,
  .cooling-load-indicators {
    grid-template-columns: 1fr;
  }

  .cooling-load-hero-visual {
    min-height: 220px;
    padding: 24px;
  }

  .climate-info-popover {
    right: 16px;
    bottom: 16px;
  }
}

/* SHK_KLIMA_COOLING_LOAD_CSS_END_20260805 */


/* SHK_KLIMA_COOLING_LOAD_CARD_LINK_CSS_20260805 */

.climate-topic-card-link {
  color: inherit;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.climate-topic-card-link:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 101, 116, 0.4);
  box-shadow: 0 20px 45px rgba(4, 53, 66, 0.14);
}

.climate-topic-card-link:focus-visible {
  outline: 3px solid rgba(11, 101, 116, 0.35);
  outline-offset: 4px;
}

.climate-card-action {
  color: #075b69;
  font-weight: 800;
}

/* SHK_KLIMA_COOLING_LOAD_CARD_LINK_CSS_END_20260805 */


/* SHK_KLIMA_AIRFLOW_CSS_20260805 */

.airflow-calculator-hero {
  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(135, 235, 245, 0.25),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(4, 48, 61, 0.99),
      rgba(10, 111, 126, 0.94)
    );
}

.airflow-hero-visual {
  position: relative;
  display: grid;
  min-height: 300px;
  place-content: center;
  overflow: hidden;
  padding: 34px;
  border-radius: 28px;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.03)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15);
}

.airflow-hero-visual strong {
  position: relative;
  z-index: 2;
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 0.9;
}

.airflow-hero-visual b {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: 1.35rem;
}

.airflow-hero-visual small {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  color: rgba(255,255,255,0.76);
}

.airflow-hero-stream {
  position: absolute;
  inset: 0;
}

.airflow-hero-stream span {
  position: absolute;
  left: -15%;
  width: 75%;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(159, 239, 248, 0.9),
      transparent
    );
  transform: rotate(-8deg);
}

.airflow-hero-stream span:nth-child(1) {
  top: 28%;
}

.airflow-hero-stream span:nth-child(2) {
  top: 50%;
  left: 12%;
}

.airflow-hero-stream span:nth-child(3) {
  top: 72%;
  left: -2%;
}

.airflow-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.airflow-mode-panel button {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(11, 101, 116, 0.16);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.airflow-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 101, 116, 0.38);
}

.airflow-mode-panel button.is-active {
  border-color: #0b6574;
  background:
    linear-gradient(
      145deg,
      rgba(230, 248, 250, 0.98),
      #fff
    );
  box-shadow:
    0 16px 34px rgba(4, 61, 73, 0.12);
}

.airflow-mode-panel button > strong {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.1);
  color: #075b69;
  font-size: 0.95rem;
}

.airflow-mode-panel button.is-active > strong {
  background: #0b6574;
  color: #fff;
}

.airflow-mode-panel button span,
.airflow-mode-panel button b {
  display: block;
}

.airflow-mode-panel button span {
  min-width: 0;
  color: #5b747b;
  line-height: 1.45;
}

.airflow-mode-panel button b {
  margin-bottom: 3px;
  color: #163c46;
}

.airflow-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(340px, 0.8fr);
  gap: 24px;
  align-items: start;
}

.airflow-input-card,
.airflow-result-card {
  min-width: 0;
}

.airflow-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.airflow-method-note {
  margin: 4px 0 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.airflow-method-note strong,
.airflow-method-note p {
  display: block;
}

.airflow-method-note p {
  margin: 5px 0 0;
  color: #47666e;
  font-weight: 700;
}

.airflow-secondary-heading {
  margin-top: 28px;
  padding-top: 24px;
  border-top:
    1px solid rgba(11, 101, 116, 0.13);
}

.airflow-result-card {
  position: sticky;
  top: 24px;
}

.airflow-main-result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 20px 0 8px;
  color: #075b69;
}

.airflow-main-result strong {
  font-size: clamp(3.3rem, 7vw, 5.3rem);
  line-height: 0.95;
}

.airflow-main-result span {
  font-size: 1.25rem;
  font-weight: 800;
}

.airflow-recommendation {
  min-height: 52px;
  margin-bottom: 20px;
  color: #4b6870;
  line-height: 1.6;
}

.airflow-conversions {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.airflow-conversions span {
  padding: 15px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.airflow-conversions small,
.airflow-conversions strong {
  display: block;
}

.airflow-conversions small {
  margin-bottom: 5px;
  color: #637a81;
}

.airflow-breakdown {
  display: grid;
  margin: 22px 0;
}

.airflow-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom:
    1px solid rgba(12, 76, 91, 0.11);
}

.airflow-breakdown dt {
  color: #587078;
}

.airflow-breakdown dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.airflow-formula-card {
  padding: 18px;
  border-radius: 16px;
  background: #082f3a;
  color: #fff;
}

.airflow-formula-card p {
  margin: 8px 0 0;
  line-height: 1.55;
}

.airflow-warning {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  line-height: 1.55;
}

.airflow-warning.is-ok {
  background: rgba(33, 139, 91, 0.1);
  color: #17643f;
}

.airflow-warning.is-warning {
  background: rgba(204, 126, 20, 0.12);
  color: #81500f;
}

@media (max-width: 980px) {
  .airflow-mode-panel,
  .airflow-calculator-layout {
    grid-template-columns: 1fr;
  }

  .airflow-result-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .airflow-field-grid,
  .airflow-conversions {
    grid-template-columns: 1fr;
  }

  .airflow-mode-panel button {
    padding: 15px;
  }

  .airflow-hero-visual {
    min-height: 220px;
  }

  .airflow-breakdown div {
    align-items: flex-start;
  }
}

/* SHK_KLIMA_AIRFLOW_CSS_END_20260805 */


/* SHK_KLIMA_DEW_POINT_CSS_20260805 */

.dew-point-hero {
  background:
    radial-gradient(
      circle at 83% 16%,
      rgba(160, 239, 247, 0.25),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(4, 45, 59, 0.99),
      rgba(11, 101, 116, 0.94)
    );
}

.dew-point-hero-visual {
  position: relative;
  display: grid;
  min-height: 300px;
  place-content: center;
  overflow: hidden;
  padding: 34px;
  border-radius: 28px;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.03)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15);
}

.dew-point-hero-visual strong {
  position: relative;
  z-index: 2;
  font-size: clamp(3.8rem, 8vw, 6.5rem);
  line-height: 0.95;
}

.dew-point-hero-visual strong sub {
  font-size: 0.4em;
}

.dew-point-hero-visual b {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  font-size: 1.35rem;
}

.dew-point-hero-visual small {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  color: rgba(255,255,255,0.76);
}

.dew-point-drop {
  position: absolute;
  top: 24px;
  right: 34px;
  width: 105px;
  height: 140px;
  opacity: 0.55;
  transform: rotate(45deg);
  border-radius: 70% 35% 70% 35%;
  background:
    linear-gradient(
      145deg,
      rgba(185, 244, 250, 0.9),
      rgba(69, 174, 195, 0.16)
    );
}

.dew-point-drop span {
  position: absolute;
  top: 24px;
  left: 25px;
  width: 22px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
}

.dew-point-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.dew-point-mode-panel button {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(11, 101, 116, 0.16);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.dew-point-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 101, 116, 0.38);
}

.dew-point-mode-panel button.is-active {
  border-color: #0b6574;
  background:
    linear-gradient(
      145deg,
      rgba(230, 248, 250, 0.98),
      #fff
    );
  box-shadow:
    0 16px 34px rgba(4, 61, 73, 0.12);
}

.dew-point-mode-panel button > strong {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.1);
  color: #075b69;
  font-size: 1rem;
}

.dew-point-mode-panel button.is-active > strong {
  background: #0b6574;
  color: #fff;
}

.dew-point-mode-panel button span,
.dew-point-mode-panel button b {
  display: block;
}

.dew-point-mode-panel button span {
  min-width: 0;
  color: #5b747b;
  line-height: 1.45;
}

.dew-point-mode-panel button b {
  margin-bottom: 3px;
  color: #163c46;
}

.dew-point-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(350px, 0.85fr);
  gap: 24px;
  align-items: start;
}

.dew-point-input-card,
.dew-point-result-card {
  min-width: 0;
}

.dew-point-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dew-point-method-note {
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.dew-point-method-note strong,
.dew-point-method-note p {
  display: block;
}

.dew-point-method-note p {
  margin: 5px 0 0;
  color: #47666e;
  font-weight: 700;
}

.dew-point-secondary-heading {
  margin-top: 28px;
  padding-top: 24px;
  border-top:
    1px solid rgba(11, 101, 116, 0.13);
}

.dew-point-practice-box {
  margin-top: 22px;
  padding: 18px;
  border-left: 4px solid #0b6574;
  border-radius: 14px;
  background: rgba(11, 101, 116, 0.07);
}

.dew-point-practice-box p {
  margin: 7px 0 0;
  color: #4e6970;
  line-height: 1.6;
}

.dew-point-result-card {
  position: sticky;
  top: 24px;
}

.dew-point-main-result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 20px 0 8px;
  color: #075b69;
}

.dew-point-main-result strong {
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 0.95;
}

.dew-point-main-result span {
  font-size: 1.35rem;
  font-weight: 800;
}

.dew-point-result-description {
  min-height: 50px;
  color: #4b6870;
  line-height: 1.6;
}

.dew-point-status {
  margin: 18px 0;
  padding: 17px 18px;
  border-radius: 16px;
}

.dew-point-status strong,
.dew-point-status p {
  display: block;
}

.dew-point-status p {
  margin: 6px 0 0;
  line-height: 1.55;
}

.dew-point-status.is-ok {
  background: rgba(33, 139, 91, 0.1);
  color: #17643f;
}

.dew-point-status.is-warning {
  background: rgba(204, 126, 20, 0.12);
  color: #81500f;
}

.dew-point-status.is-danger {
  background: rgba(190, 52, 52, 0.12);
  color: #8b2727;
}

.dew-point-breakdown {
  display: grid;
  margin: 20px 0;
}

.dew-point-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom:
    1px solid rgba(12, 76, 91, 0.11);
}

.dew-point-breakdown dt {
  color: #587078;
}

.dew-point-breakdown dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.dew-point-surface-results {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.dew-point-surface-results span {
  padding: 14px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.dew-point-surface-results small,
.dew-point-surface-results strong {
  display: block;
}

.dew-point-surface-results small {
  min-height: 36px;
  margin-bottom: 5px;
  color: #637a81;
}

.dew-point-formula-card {
  padding: 18px;
  border-radius: 16px;
  background: #082f3a;
  color: #fff;
}

.dew-point-formula-card p {
  margin: 8px 0 0;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .dew-point-mode-panel,
  .dew-point-calculator-layout {
    grid-template-columns: 1fr;
  }

  .dew-point-result-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .dew-point-field-grid,
  .dew-point-surface-results {
    grid-template-columns: 1fr;
  }

  .dew-point-mode-panel button {
    padding: 15px;
  }

  .dew-point-hero-visual {
    min-height: 220px;
  }

  .dew-point-breakdown div {
    align-items: flex-start;
  }
}

/* SHK_KLIMA_DEW_POINT_CSS_END_20260805 */


/* SHK_KLIMA_CONDENSATE_CSS_20260805 */

.condensate-hero {
  background:
    radial-gradient(
      circle at 84% 17%,
      rgba(146, 235, 247, 0.27),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      rgba(3, 43, 57, 0.99),
      rgba(8, 105, 123, 0.94)
    );
}

.condensate-hero-visual {
  position: relative;
  display: grid;
  min-height: 310px;
  place-content: center;
  overflow: hidden;
  padding: 34px;
  border-radius: 28px;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.03)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15);
}

.condensate-hero-visual strong {
  position: relative;
  z-index: 3;
  font-size: clamp(3.6rem, 8vw, 6.3rem);
  line-height: 0.95;
}

.condensate-hero-visual strong sub {
  font-size: 0.4em;
}

.condensate-hero-visual b {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  font-size: 1.35rem;
}

.condensate-hero-visual small {
  position: relative;
  z-index: 3;
  margin-top: 13px;
  color: rgba(255,255,255,0.76);
}

.condensate-coil {
  position: absolute;
  top: 28px;
  left: 30px;
  display: grid;
  gap: 11px;
  width: 130px;
  padding: 18px;
  border: 2px solid rgba(188, 244, 250, 0.45);
  border-radius: 20px;
  transform: rotate(-7deg);
}

.condensate-coil span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(189, 244, 250, 0.25),
      rgba(189, 244, 250, 0.95),
      rgba(189, 244, 250, 0.25)
    );
}

.condensate-drop {
  position: absolute;
  right: 45px;
  bottom: 35px;
  width: 75px;
  height: 100px;
  border-radius: 70% 35% 70% 35%;
  transform: rotate(45deg);
  background:
    linear-gradient(
      145deg,
      rgba(186, 244, 250, 0.9),
      rgba(57, 170, 193, 0.2)
    );
}

.condensate-drop span {
  position: absolute;
  top: 20px;
  left: 19px;
  width: 15px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
}

.condensate-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, 0.85fr);
  gap: 24px;
  align-items: start;
}

.condensate-input-card,
.condensate-result-card {
  min-width: 0;
}

.condensate-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.condensate-secondary-heading {
  margin-top: 28px;
  padding-top: 24px;
  border-top:
    1px solid rgba(11, 101, 116, 0.13);
}

.condensate-state-card {
  padding: 20px;
  border: 1px solid rgba(11, 101, 116, 0.14);
  border-radius: 20px;
}

.condensate-state-card.is-inlet {
  background:
    linear-gradient(
      145deg,
      rgba(255, 241, 226, 0.8),
      rgba(255, 255, 255, 0.96)
    );
}

.condensate-state-card.is-outlet {
  background:
    linear-gradient(
      145deg,
      rgba(224, 247, 251, 0.88),
      rgba(255, 255, 255, 0.96)
    );
}

.condensate-state-heading {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 17px;
}

.condensate-state-heading > span {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #0b6574;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.condensate-state-heading strong,
.condensate-state-heading small {
  display: block;
}

.condensate-state-heading small {
  margin-top: 3px;
  color: #667b82;
}

.condensate-practice-box {
  margin-top: 22px;
  padding: 18px;
  border-left: 4px solid #0b6574;
  border-radius: 14px;
  background: rgba(11, 101, 116, 0.07);
}

.condensate-practice-box p {
  margin: 7px 0 0;
  color: #4e6970;
  line-height: 1.6;
}

.condensate-result-card {
  position: sticky;
  top: 24px;
}

.condensate-main-result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 20px 0 8px;
  color: #075b69;
}

.condensate-main-result strong {
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 0.95;
}

.condensate-main-result span {
  font-size: 1.35rem;
  font-weight: 800;
}

.condensate-result-description {
  min-height: 52px;
  color: #4b6870;
  line-height: 1.6;
}

.condensate-status {
  margin: 18px 0;
  padding: 17px 18px;
  border-radius: 16px;
}

.condensate-status strong,
.condensate-status p {
  display: block;
}

.condensate-status p {
  margin: 6px 0 0;
  line-height: 1.55;
}

.condensate-status.is-ok {
  background: rgba(33, 139, 91, 0.1);
  color: #17643f;
}

.condensate-status.is-warning {
  background: rgba(204, 126, 20, 0.12);
  color: #81500f;
}

.condensate-status.is-danger {
  background: rgba(190, 52, 52, 0.12);
  color: #8b2727;
}

.condensate-total-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.condensate-total-grid span {
  padding: 14px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.condensate-total-grid small,
.condensate-total-grid strong {
  display: block;
}

.condensate-total-grid small {
  min-height: 36px;
  margin-bottom: 5px;
  color: #637a81;
}

.condensate-breakdown {
  display: grid;
  margin: 20px 0;
}

.condensate-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom:
    1px solid rgba(12, 76, 91, 0.11);
}

.condensate-breakdown dt {
  color: #587078;
}

.condensate-breakdown dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.condensate-process-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 17px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.condensate-process-card div {
  min-width: 0;
}

.condensate-process-card small,
.condensate-process-card strong {
  display: block;
}

.condensate-process-card small {
  margin-bottom: 5px;
  color: #637a81;
}

.condensate-process-card span {
  color: #0b6574;
  font-size: 1.5rem;
  font-weight: 900;
}

.condensate-formula-card {
  padding: 18px;
  border-radius: 16px;
  background: #082f3a;
  color: #fff;
}

.condensate-formula-card p {
  margin: 8px 0 0;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .condensate-calculator-layout {
    grid-template-columns: 1fr;
  }

  .condensate-result-card {
    position: static;
  }
}

@media (max-width: 680px) {
  .condensate-field-grid,
  .condensate-total-grid {
    grid-template-columns: 1fr;
  }

  .condensate-hero-visual {
    min-height: 225px;
  }

  .condensate-coil {
    width: 100px;
  }

  .condensate-breakdown div {
    align-items: flex-start;
  }
}

/* SHK_KLIMA_CONDENSATE_CSS_END_20260805 */


/* SHK_KLIMA_AIR_CHANGE_CSS_20260805 */

.air-change-hero {
  background:
    radial-gradient(
      circle at 84% 17%,
      rgba(146, 235, 247, 0.27),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      rgba(3, 43, 57, 0.99),
      rgba(8, 105, 123, 0.94)
    );
}

.air-change-hero-visual {
  display: grid;
  min-height: 300px;
  place-content: center;
  gap: 12px;
  padding: 34px;
  border-radius: 28px;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.03)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15);
}

.air-change-room {
  display: grid;
  grid-template-columns: 70px 120px 70px;
  align-items: center;
  justify-content: center;
}

.air-change-room strong {
  display: grid;
  width: 120px;
  height: 120px;
  place-items: center;
  border: 3px solid rgba(196, 244, 250, 0.72);
  border-radius: 28px;
  background: rgba(255,255,255,0.08);
  font-size: 4rem;
}

.air-change-arrow {
  font-size: 3rem;
  color: rgba(180, 241, 248, 0.85);
}

.air-change-hero-visual b {
  font-size: 1.35rem;
}

.air-change-hero-visual small {
  color: rgba(255,255,255,0.76);
}

.air-change-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.air-change-mode-panel button {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(11, 101, 116, 0.16);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.air-change-mode-panel button:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 101, 116, 0.38);
}

.air-change-mode-panel button.is-active {
  border-color: #0b6574;
  background:
    linear-gradient(
      145deg,
      rgba(230, 248, 250, 0.98),
      #fff
    );
  box-shadow:
    0 16px 34px rgba(4, 61, 73, 0.12);
}

.air-change-mode-panel button > strong {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.1);
  color: #075b69;
  font-size: 0.85rem;
}

.air-change-mode-panel button.is-active > strong {
  background: #0b6574;
  color: #fff;
}

.air-change-mode-panel button span,
.air-change-mode-panel button b {
  display: block;
}

.air-change-mode-panel button span {
  min-width: 0;
  color: #5b747b;
  line-height: 1.45;
}

.air-change-mode-panel button b {
  margin-bottom: 3px;
  color: #163c46;
}

.air-change-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(350px, 0.85fr);
  gap: 24px;
  align-items: start;
}

.air-change-input-card,
.air-change-result-card {
  min-width: 0;
}

.air-change-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.air-change-volume-note,
.air-change-method-note {
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.air-change-volume-note strong,
.air-change-volume-note p,
.air-change-method-note strong,
.air-change-method-note p {
  display: block;
}

.air-change-volume-note p,
.air-change-method-note p {
  margin: 5px 0 0;
  color: #47666e;
  font-weight: 700;
}

.air-change-secondary-heading {
  margin-top: 28px;
  padding-top: 24px;
  border-top:
    1px solid rgba(11, 101, 116, 0.13);
}

.air-change-result-card {
  position: sticky;
  top: 24px;
}

.air-change-main-result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 20px 0 8px;
  color: #075b69;
}

.air-change-main-result strong {
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 0.95;
}

.air-change-main-result span {
  font-size: 1.3rem;
  font-weight: 800;
}

.air-change-result-description {
  min-height: 52px;
  color: #4b6870;
  line-height: 1.6;
}

.air-change-status {
  margin: 18px 0;
  padding: 17px 18px;
  border-radius: 16px;
}

.air-change-status strong,
.air-change-status p {
  display: block;
}

.air-change-status p {
  margin: 6px 0 0;
  line-height: 1.55;
}

.air-change-status.is-ok {
  background: rgba(33, 139, 91, 0.1);
  color: #17643f;
}

.air-change-status.is-warning {
  background: rgba(204, 126, 20, 0.12);
  color: #81500f;
}

.air-change-result-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.air-change-result-grid span {
  padding: 14px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.air-change-result-grid small,
.air-change-result-grid strong {
  display: block;
}

.air-change-result-grid small {
  margin-bottom: 5px;
  color: #637a81;
}

.air-change-breakdown {
  display: grid;
  margin: 20px 0;
}

.air-change-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom:
    1px solid rgba(12, 76, 91, 0.11);
}

.air-change-breakdown dt {
  color: #587078;
}

.air-change-breakdown dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.air-change-formula-card {
  padding: 18px;
  border-radius: 16px;
  background: #082f3a;
  color: #fff;
}

.air-change-formula-card p {
  margin: 8px 0 0;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .air-change-mode-panel,
  .air-change-calculator-layout {
    grid-template-columns: 1fr;
  }

  .air-change-result-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .air-change-field-grid,
  .air-change-result-grid {
    grid-template-columns: 1fr;
  }

  .air-change-mode-panel button {
    padding: 15px;
  }

  .air-change-hero-visual {
    min-height: 220px;
  }

  .air-change-room {
    grid-template-columns: 45px 90px 45px;
  }

  .air-change-room strong {
    width: 90px;
    height: 90px;
    font-size: 3rem;
  }

  .air-change-arrow {
    font-size: 2.2rem;
  }

  .air-change-breakdown div {
    align-items: flex-start;
  }
}

/* SHK_KLIMA_AIR_CHANGE_CSS_END_20260805 */


/* SHK_KLIMA_EFFICIENCY_CSS_20260805 */

.efficiency-hero {
  background:
    radial-gradient(
      circle at 84% 17%,
      rgba(146, 235, 247, 0.27),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      rgba(3, 43, 57, 0.99),
      rgba(8, 105, 123, 0.94)
    );
}

.efficiency-hero-visual {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 300px;
  padding: 34px;
  border-radius: 28px;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.03)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15);
}

.efficiency-hero-visual > span {
  padding: 22px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  font-size: 1.25rem;
  font-weight: 900;
}

.efficiency-hero-visual > strong {
  font-size: 2.8rem;
  color: rgba(180, 241, 248, 0.9);
}

.efficiency-hero-visual b,
.efficiency-hero-visual small {
  grid-column: 1 / -1;
}

.efficiency-hero-visual b {
  font-size: 1.35rem;
}

.efficiency-hero-visual small {
  color: rgba(255,255,255,0.76);
}

.efficiency-mode-panel {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.efficiency-mode-panel button,
.efficiency-operation-panel button {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(11, 101, 116, 0.16);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.efficiency-mode-panel button:hover,
.efficiency-operation-panel button:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 101, 116, 0.38);
}

.efficiency-mode-panel button.is-active,
.efficiency-operation-panel button.is-active {
  border-color: #0b6574;
  background:
    linear-gradient(
      145deg,
      rgba(230, 248, 250, 0.98),
      #fff
    );
  box-shadow:
    0 16px 34px rgba(4, 61, 73, 0.12);
}

.efficiency-mode-panel button > strong,
.efficiency-operation-panel button > strong {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.1);
  color: #075b69;
  font-size: 0.85rem;
}

.efficiency-mode-panel button.is-active > strong,
.efficiency-operation-panel button.is-active > strong {
  background: #0b6574;
  color: #fff;
}

.efficiency-mode-panel button span,
.efficiency-mode-panel button b,
.efficiency-operation-panel button span,
.efficiency-operation-panel button b {
  display: block;
}

.efficiency-mode-panel button span,
.efficiency-operation-panel button span {
  min-width: 0;
  color: #5b747b;
  line-height: 1.45;
}

.efficiency-mode-panel button b,
.efficiency-operation-panel button b {
  margin-bottom: 3px;
  color: #163c46;
}

.efficiency-operation-panel {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.efficiency-calculator-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, 0.85fr);
  gap: 24px;
  align-items: start;
}

.efficiency-input-card,
.efficiency-result-card {
  min-width: 0;
}

.efficiency-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.efficiency-secondary-heading {
  margin-top: 28px;
  padding-top: 24px;
  border-top:
    1px solid rgba(11, 101, 116, 0.13);
}

.efficiency-method-note {
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.efficiency-method-note strong,
.efficiency-method-note p {
  display: block;
}

.efficiency-method-note p {
  margin: 5px 0 0;
  color: #47666e;
  font-weight: 700;
}

.efficiency-practice-box {
  margin-top: 22px;
  padding: 18px;
  border-left: 4px solid #0b6574;
  border-radius: 14px;
  background: rgba(11, 101, 116, 0.07);
}

.efficiency-practice-box p {
  margin: 7px 0 0;
  color: #4e6970;
  line-height: 1.6;
}

.efficiency-result-card {
  position: sticky;
  top: 24px;
}

.efficiency-main-result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 20px 0 8px;
  color: #075b69;
}

.efficiency-main-result strong {
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 0.95;
}

.efficiency-main-result span {
  font-size: 1.3rem;
  font-weight: 800;
}

.efficiency-result-description {
  min-height: 52px;
  color: #4b6870;
  line-height: 1.6;
}

.efficiency-status {
  margin: 18px 0;
  padding: 17px 18px;
  border-radius: 16px;
}

.efficiency-status strong,
.efficiency-status p {
  display: block;
}

.efficiency-status p {
  margin: 6px 0 0;
  line-height: 1.55;
}

.efficiency-status.is-ok {
  background: rgba(33, 139, 91, 0.1);
  color: #17643f;
}

.efficiency-status.is-warning {
  background: rgba(204, 126, 20, 0.12);
  color: #81500f;
}

.efficiency-result-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.efficiency-result-grid span {
  padding: 14px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.efficiency-result-grid small,
.efficiency-result-grid strong {
  display: block;
}

.efficiency-result-grid small {
  margin-bottom: 5px;
  color: #637a81;
}

.efficiency-breakdown {
  display: grid;
  margin: 20px 0;
}

.efficiency-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom:
    1px solid rgba(12, 76, 91, 0.11);
}

.efficiency-breakdown dt {
  color: #587078;
}

.efficiency-breakdown dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.efficiency-flow-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 17px;
  border-radius: 16px;
  background: rgba(11, 101, 116, 0.08);
}

.efficiency-flow-card small,
.efficiency-flow-card strong {
  display: block;
}

.efficiency-flow-card small {
  margin-bottom: 5px;
  color: #637a81;
}

.efficiency-flow-card span {
  color: #0b6574;
  font-size: 1.5rem;
  font-weight: 900;
}

.efficiency-formula-card {
  padding: 18px;
  border-radius: 16px;
  background: #082f3a;
  color: #fff;
}

.efficiency-formula-card p {
  margin: 8px 0 0;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .efficiency-mode-panel,
  .efficiency-calculator-layout {
    grid-template-columns: 1fr;
  }

  .efficiency-result-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .efficiency-field-grid,
  .efficiency-result-grid,
  .efficiency-operation-panel {
    grid-template-columns: 1fr;
  }

  .efficiency-mode-panel button,
  .efficiency-operation-panel button {
    padding: 15px;
  }

  .efficiency-hero-visual {
    min-height: 220px;
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);
    padding: 24px 16px;
  }

  .efficiency-hero-visual > span {
    padding: 16px 8px;
    font-size: 1rem;
  }

  .efficiency-breakdown div {
    align-items: flex-start;
  }
}

/* SHK_KLIMA_EFFICIENCY_CSS_END_20260805 */

/* SHK_HOME_UNIFORM_DOMAIN_CARDS_20260806 */

/*
 * Alle Fachbereichskacheln erhalten innerhalb des jeweiligen
 * Bildschirmbereichs dieselbe Breite und dieselbe feste Höhe.
 */

.home-domain-grid {
  grid-auto-rows: 310px;
  align-items: stretch;
}

.home-domain-card,
.home-domain-fault-card,
.home-domain-active {
  grid-column: auto;
  width: 100%;
  height: 310px;
  min-height: 310px;
  box-sizing: border-box;
}

.home-domain-active h3 {
  font-size: 2rem;
}

@media (max-width: 1050px) and (min-width: 701px) {
  .home-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 310px;
  }
}

@media (max-width: 700px) {
  .home-domain-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }

  .home-domain-card,
  .home-domain-fault-card,
  .home-domain-active {
    grid-column: auto;
    height: 300px;
    min-height: 300px;
  }

  .home-domain-active h3 {
    font-size: 2rem;
  }
}

/* SHK_HOME_UNIFORM_DOMAIN_CARDS_END_20260806 */


/* SHK_GAS_OVERVIEW_CSS_20260806 */

.gas-overview-page {
  --gas-yellow: #d79c00;
  --gas-yellow-dark: #9b6800;
  --gas-yellow-soft: #fff5d6;
  --gas-graphite: #20262b;
  --gas-border: rgba(38, 43, 47, 0.13);
  --gas-shadow: 0 24px 60px rgba(25, 32, 36, 0.12);
  background:
    radial-gradient(
      circle at 86% 5%,
      rgba(230, 172, 20, 0.13),
      transparent 30rem
    ),
    #f6f8f9;
  color: var(--gas-graphite);
}

.gas-overview-page main {
  overflow: hidden;
}

.gas-overview-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(400px, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: min(1440px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 7rem) 0;
}

.gas-overview-copy {
  max-width: 700px;
}

.gas-overview-copy .eyebrow,
.gas-tools-section .eyebrow,
.gas-roadmap .eyebrow {
  color: var(--gas-yellow-dark);
}

.gas-overview-copy h1 {
  margin:
    clamp(1.2rem, 3vw, 2rem)
    0
    1.4rem;
  font-size: clamp(3.4rem, 7vw, 7.2rem);
  line-height: 0.88;
  letter-spacing: -0.07em;
}

.gas-overview-copy h1 small {
  display: block;
  margin-top: 1.25rem;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #667078;
}

.gas-overview-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.75;
  color: #59636a;
}

.gas-overview-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 2rem;
}

.gas-overview-highlights span {
  display: flex;
  flex-direction: column;
  min-height: 105px;
  padding: 1rem;
  border: 1px solid var(--gas-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 32px rgba(28, 34, 38, 0.06);
  backdrop-filter: blur(14px);
}

.gas-overview-highlights strong {
  margin-bottom: auto;
  font-size: 1.45rem;
  color: var(--gas-yellow-dark);
}

.gas-overview-highlights span {
  font-size: 0.85rem;
  color: #667078;
}

.gas-overview-video {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(155, 104, 0, 0.16);
  border-radius: clamp(24px, 4vw, 42px);
  background:
    linear-gradient(
      135deg,
      #f4f5f5,
      #e8ecee
    );
  box-shadow: var(--gas-shadow);
  isolation: isolate;
}

.gas-overview-video::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(19, 23, 26, 0.6) 100%
    );
}

.gas-overview-video::after {
  position: absolute;
  z-index: 3;
  top: 1.25rem;
  right: 1.25rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  content: "";
  background: #2dbd72;
  box-shadow:
    0 0 0 7px rgba(45, 189, 114, 0.17),
    0 0 24px rgba(45, 189, 114, 0.55);
}

.gas-overview-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gas-video-badge {
  position: absolute;
  z-index: 4;
  right: 1.4rem;
  bottom: 1.4rem;
  left: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  color: white;
}

.gas-video-badge span {
  display: inline-flex;
  padding: 0.48rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(17, 21, 23, 0.48);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.gas-video-badge strong {
  max-width: 280px;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  line-height: 1.3;
  text-align: right;
}

.gas-tools-section {
  padding:
    clamp(4rem, 7vw, 7rem)
    max(1.5rem, calc((100vw - 1440px) / 2));
  background: white;
}

.gas-section-heading {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, 0.65fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.gas-section-heading h2,
.gas-roadmap h2 {
  max-width: 820px;
  margin: 0.55rem 0 0;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.gas-section-heading > p,
.gas-roadmap > div > p:last-child {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #697279;
}

.gas-tool-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.gas-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 370px;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid var(--gas-border);
  border-radius: 26px;
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 248, 249, 0.96)
    );
  color: inherit;
  text-decoration: none;
  box-shadow: 0 14px 38px rgba(25, 31, 35, 0.055);
}

.gas-tool-card::after {
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  content: "";
  background: rgba(215, 156, 0, 0.08);
}

.gas-tool-number {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #8a9297;
}

.gas-tool-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 1.6rem;
  border-radius: 20px;
  background: var(--gas-yellow-soft);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--gas-yellow-dark);
  box-shadow: inset 0 0 0 1px rgba(155, 104, 0, 0.12);
}

.gas-tool-copy p {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gas-yellow-dark);
}

.gas-tool-copy h2 {
  margin: 0 0 0.9rem;
  font-size: 1.35rem;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.gas-tool-copy > span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #657078;
}

.gas-tool-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.gas-tool-meta strong {
  font-size: 0.9rem;
  color: #323a40;
}

.gas-tool-meta small {
  font-size: 0.76rem;
  line-height: 1.4;
  color: #7a8389;
}

.gas-tool-card > b {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: #899096;
}

.gas-tool-card-active {
  border-color: rgba(155, 104, 0, 0.32);
  background:
    linear-gradient(
      155deg,
      #fffdf5,
      #fff5d7
    );
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.gas-tool-card-active:hover {
  transform: translateY(-5px);
  border-color: rgba(155, 104, 0, 0.55);
  box-shadow: 0 24px 52px rgba(126, 86, 0, 0.14);
}

.gas-tool-card-active > b {
  color: var(--gas-yellow-dark);
}

.gas-tool-card-planned {
  opacity: 0.82;
}

.gas-roadmap {
  display: grid;
  grid-template-columns:
    minmax(0, 0.75fr)
    minmax(440px, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  width: min(1440px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) 0;
}

.gas-roadmap ol {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gas-roadmap;
}

.gas-roadmap li {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 1rem;
  align-items: center;
  min-height: 92px;
  padding: 1rem 1.2rem;
  border: 1px solid var(--gas-border);
  border-radius: 22px;
  background: white;
  box-shadow: 0 10px 30px rgba(27, 34, 38, 0.05);
  counter-increment: gas-roadmap;
}

.gas-roadmap li::before {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  content: counter(gas-roadmap, decimal-leading-zero);
  background: var(--gas-yellow-soft);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--gas-yellow-dark);
}

.gas-roadmap li strong {
  align-self: end;
  font-size: 1rem;
}

.gas-roadmap li span {
  align-self: start;
  margin-top: 0.25rem;
  font-size: 0.84rem;
  color: #717a80;
}

.gas-safety-note {
  display: flex;
  gap: 1rem;
  width: min(1100px, calc(100% - 3rem));
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid rgba(155, 104, 0, 0.25);
  border-radius: 24px;
  background: #fff9e8;
  box-shadow: 0 14px 40px rgba(125, 89, 8, 0.08);
}

.gas-safety-symbol {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--gas-yellow);
  font-size: 1.35rem;
  font-weight: 950;
  color: #27220f;
}

.gas-safety-note strong {
  display: block;
  margin-bottom: 0.45rem;
  color: #4d3b08;
}

.gas-safety-note p {
  margin: 0;
  line-height: 1.65;
  color: #655728;
}

@media (max-width: 1120px) {
  .gas-overview-hero {
    grid-template-columns: 1fr;
  }

  .gas-overview-video {
    width: min(850px, 100%);
  }

  .gas-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gas-roadmap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .gas-overview-hero,
  .gas-roadmap {
    width: min(100% - 2rem, 1440px);
  }

  .gas-overview-hero {
    padding: 2.5rem 0 4rem;
  }

  .gas-overview-copy h1 {
    font-size: clamp(3.1rem, 15vw, 5rem);
  }

  .gas-overview-highlights {
    grid-template-columns: 1fr;
  }

  .gas-overview-highlights span {
    min-height: 84px;
  }

  .gas-video-badge {
    align-items: flex-start;
    flex-direction: column;
  }

  .gas-video-badge strong {
    text-align: left;
  }

  .gas-section-heading {
    grid-template-columns: 1fr;
  }

  .gas-tool-grid {
    grid-template-columns: 1fr;
  }

  .gas-tool-card {
    min-height: 340px;
  }

  .gas-roadmap {
    padding: 4rem 0;
  }

  .gas-safety-note {
    width: min(100% - 2rem, 1100px);
  }
}

/* SHK_GAS_OVERVIEW_CSS_END_20260806 */

/* SHK_GAS_LOAD_CSS_20260806 */

.gas-calculator-page {
  --gas-yellow: #d79c00;
  --gas-yellow-dark: #8f6200;
  --gas-yellow-soft: #fff4cf;
  --gas-graphite: #22282d;
  --gas-border: rgba(34, 40, 45, 0.13);
  background:
    radial-gradient(
      circle at 88% 4%,
      rgba(215, 156, 0, 0.13),
      transparent 30rem
    ),
    #f5f7f8;
  color: var(--gas-graphite);
}

.gas-load-hero {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 247, 218, 0.9)
    );
}

.gas-load-hero .eyebrow,
.gas-load-page .radiator-calculator-heading .eyebrow,
.gas-load-result > .eyebrow {
  color: var(--gas-yellow-dark);
}

.gas-load-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 330px;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid rgba(143, 98, 0, 0.2);
  border-radius: 34px;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 250, 226, 0.98),
      rgba(245, 230, 176, 0.88)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 24px 55px rgba(91, 67, 15, 0.13);
}

.gas-load-hero-visual::before {
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(143, 98, 0, 0.22);
  border-radius: 50%;
  content: "";
}

.gas-load-hero-visual > span {
  position: relative;
  z-index: 1;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gas-yellow-dark);
}

.gas-load-hero-visual > div {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1.2rem;
}

.gas-load-hero-visual > div i {
  display: block;
  width: 42px;
  height: 58px;
  border: 2px solid rgba(143, 98, 0, 0.5);
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      #fff,
      #eee1af
    );
  box-shadow: 0 10px 20px rgba(93, 65, 4, 0.1);
}

.gas-load-hero-visual > div i:nth-child(2) {
  height: 72px;
}

.gas-load-hero-visual strong,
.gas-load-hero-visual b,
.gas-load-hero-visual small {
  position: relative;
  z-index: 1;
}

.gas-load-hero-visual strong {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.055em;
  color: #29250f;
}

.gas-load-hero-visual b {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  color: var(--gas-yellow-dark);
}

.gas-load-hero-visual small {
  margin-top: 0.65rem;
  font-weight: 800;
  color: #71622f;
}

.gas-load-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, 0.65fr);
  gap: 1.25rem;
  align-items: start;
}

.gas-load-input-column {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.gas-device-card,
.gas-basis-card,
.gas-load-result {
  border-color: var(--gas-border);
}

.gas-device-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.35rem;
}

.gas-device-row {
  overflow: hidden;
  border: 1px solid rgba(34, 40, 45, 0.13);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafbfb
    );
  box-shadow: 0 10px 28px rgba(28, 34, 38, 0.055);
}

.gas-device-row > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(34, 40, 45, 0.09);
  background: rgba(255, 244, 207, 0.48);
}

.gas-device-row > header strong {
  font-size: 0.95rem;
  color: #4d3b08;
}

.gas-device-row > header button {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(147, 51, 51, 0.18);
  border-radius: 10px;
  background: white;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  color: #9a3838;
  cursor: pointer;
}

.gas-device-row > header button:hover {
  border-color: rgba(147, 51, 51, 0.38);
  background: #fff5f5;
}

.gas-device-fields {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.35fr)
    minmax(190px, 1.2fr)
    minmax(150px, 0.85fr);
  gap: 1rem;
  padding: 1.1rem;
}

.gas-device-fields .field {
  min-width: 0;
}

.gas-device-name-field {
  grid-column: span 1;
}

.gas-device-fields select,
.gas-device-fields input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(34, 40, 45, 0.15);
  border-radius: 12px;
  background: white;
  font: inherit;
  color: #283036;
}

.gas-device-fields select:focus,
.gas-device-fields input[type="text"]:focus,
.gas-basis-grid input:focus {
  border-color: rgba(143, 98, 0, 0.56);
  outline: 3px solid rgba(215, 156, 0, 0.13);
}

.gas-device-row > footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid rgba(34, 40, 45, 0.08);
  background: #f6f8f8;
}

.gas-device-row > footer span {
  font-size: 0.78rem;
  color: #6c757b;
}

.gas-device-row > footer strong {
  color: var(--gas-yellow-dark);
}

.gas-add-device {
  width: 100%;
  margin-top: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1px dashed rgba(143, 98, 0, 0.42);
  border-radius: 16px;
  background: #fffaf0;
  font: inherit;
  font-weight: 850;
  color: var(--gas-yellow-dark);
  cursor: pointer;
}

.gas-add-device:hover {
  border-style: solid;
  background: var(--gas-yellow-soft);
}

.gas-basis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}

.gas-basis-grid .field > small {
  display: block;
  margin-top: 0.55rem;
  line-height: 1.45;
  color: #717a80;
}

.gas-confirmation {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(143, 98, 0, 0.17);
  border-radius: 15px;
  background: #fffaf0;
  line-height: 1.5;
  color: #5e532c;
}

.gas-confirmation input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--gas-yellow-dark);
}

.gas-confirmation input:disabled + span {
  opacity: 0.55;
}

.gas-inline-warning {
  margin-top: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(171, 92, 0, 0.22);
  border-radius: 13px;
  background: #fff3dc;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #7b4800;
}

.gas-inline-warning[hidden],
.gas-device-fields [hidden] {
  display: none !important;
}

.gas-load-result {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  background:
    linear-gradient(
      160deg,
      #242a2f,
      #171c20
    );
  color: white;
  box-shadow: 0 24px 60px rgba(18, 23, 26, 0.2);
}

.gas-load-result h2 {
  color: white;
}

.gas-load-main-result {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  margin: 1.3rem 0 0.85rem;
}

.gas-load-main-result strong {
  font-size: clamp(3.5rem, 7vw, 5.7rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
  color: #ffd764;
}

.gas-load-main-result span {
  font-size: 1rem;
  font-weight: 850;
  color: #e3e7e9;
}

.gas-load-recommendation {
  min-height: 3.1rem;
  margin: 0 0 1.25rem;
  line-height: 1.55;
  color: #cdd4d8;
}

.gas-load-breakdown {
  display: grid;
  gap: 0;
  margin: 0;
}

.gas-load-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.gas-load-breakdown dt {
  font-size: 0.8rem;
  color: #aeb8be;
}

.gas-load-breakdown dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
  color: white;
}

.gas-device-summary,
.gas-load-formula,
.gas-transfer-note {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.gas-device-summary > strong,
.gas-load-formula > strong,
.gas-transfer-note > strong {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.82rem;
  color: #ffd764;
}

.gas-device-summary ol {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gas-device-summary li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #cbd2d6;
}

.gas-device-summary li strong {
  flex: 0 0 auto;
  color: white;
}

.gas-load-formula p {
  margin: 0 0 0.55rem;
  font-size: 1rem;
  font-weight: 850;
  color: white;
}

.gas-load-formula small,
.gas-transfer-note p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: #b9c3c8;
}

.gas-calculator-note {
  width: auto;
  margin: 1rem 0 0;
  padding: 1rem;
  border-color: rgba(255, 215, 100, 0.24);
  background: rgba(255, 215, 100, 0.08);
  box-shadow: none;
}

.gas-calculator-note .gas-safety-symbol {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1rem;
}

.gas-calculator-note strong {
  color: #ffe28e;
}

.gas-calculator-note p {
  font-size: 0.75rem;
  color: #cbd2d6;
}

.gas-info-popover {
  position: absolute;
  z-index: 1000;
  width: min(360px, calc(100vw - 24px));
  padding: 1rem;
  border: 1px solid rgba(143, 98, 0, 0.25);
  border-radius: 18px;
  background: white;
  color: #293137;
  box-shadow: 0 24px 65px rgba(20, 26, 30, 0.22);
}

.gas-info-popover > strong {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 1rem;
  color: #4f3b04;
}

.gas-info-popover > p {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #606a70;
}

.gas-info-formula,
.gas-info-practice {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.65rem;
  padding: 0.75rem;
  border-radius: 12px;
}

.gas-info-formula {
  background: var(--gas-yellow-soft);
}

.gas-info-practice {
  background: #f1f4f5;
}

.gas-info-formula small,
.gas-info-practice small {
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777f84;
}

.gas-info-formula b {
  font-size: 0.85rem;
  color: #5b4200;
}

.gas-info-practice span {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #535d63;
}

.gas-info-close {
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.65rem;
  border: 0;
  border-radius: 11px;
  background: #293137;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  color: white;
  cursor: pointer;
}

.gas-load-page .shk-info-button {
  border-color: rgba(143, 98, 0, 0.3);
  background: var(--gas-yellow-soft);
  color: var(--gas-yellow-dark);
}

@media (max-width: 1120px) {
  .gas-load-layout {
    grid-template-columns: 1fr;
  }

  .gas-load-result {
    position: static;
  }

  .gas-device-fields {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .gas-device-fields,
  .gas-basis-grid {
    grid-template-columns: 1fr;
  }

  .gas-device-row > header,
  .gas-device-row > footer {
    align-items: flex-start;
  }

  .gas-device-row > footer {
    flex-direction: column;
    gap: 0.35rem;
  }

  .gas-load-main-result strong {
    font-size: clamp(3.4rem, 17vw, 5rem);
  }

  .gas-load-breakdown > div {
    align-items: flex-start;
  }

  .gas-load-breakdown dd {
    max-width: 48%;
  }
}

/* SHK_GAS_LOAD_CSS_END_20260806 */

/* SHK_GAS_PROTECTION_GOALS_CSS_20260806 */

.gas-protection-page {
  --gas-protection-yellow: #d79c00;
  --gas-protection-dark: #8f6200;
  --gas-protection-soft: #fff4cf;
  --gas-protection-border: rgba(35, 41, 45, 0.13);
}

.gas-protection-hero {
  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(215, 156, 0, 0.17),
      transparent 28rem
    ),
    linear-gradient(
      135deg,
      #ffffff,
      #fff9e8
    );
}

.gas-protection-hero .eyebrow,
.gas-protection-page
.radiator-calculator-heading
.eyebrow,
.gas-protection-result > .eyebrow {
  color: var(--gas-protection-dark);
}

.gas-protection-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 340px;
  padding: 2rem;
  overflow: hidden;
  border:
    1px solid
    rgba(143, 98, 0, 0.2);
  border-radius: 34px;
  background:
    linear-gradient(
      145deg,
      #fffdf6,
      #f1e4ae
    );
  box-shadow:
    inset 0 0 0 1px
      rgba(255, 255, 255, 0.75),
    0 24px 55px
      rgba(91, 67, 15, 0.13);
}

.gas-protection-hero-visual::before {
  position: absolute;
  inset: 13%;
  border:
    1px dashed
    rgba(143, 98, 0, 0.24);
  border-radius: 32px;
  content: "";
}

.gas-protection-hero-visual > span,
.gas-protection-hero-visual > small,
.gas-protection-room {
  position: relative;
  z-index: 1;
}

.gas-protection-hero-visual > span {
  margin-bottom: 1.3rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gas-protection-dark);
}

.gas-protection-room {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 135px;
  border:
    4px solid
    rgba(71, 61, 23, 0.72);
  border-radius: 20px;
  background:
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 18px 35px
    rgba(87, 67, 13, 0.14);
}

.gas-protection-room i {
  position: absolute;
  top: 23px;
  right: -8px;
  width: 14px;
  height: 46px;
  border-radius: 4px;
  background: #93c9df;
  box-shadow:
    0 0 0 4px
    rgba(255, 255, 255, 0.65);
}

.gas-protection-room strong {
  display: grid;
  place-items: center;
  width: 58px;
  height: 70px;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #e4e7e8
    );
  font-size: 1.6rem;
  color: #343b3f;
  box-shadow:
    0 12px 25px
    rgba(30, 36, 40, 0.13);
}

.gas-protection-room b {
  position: absolute;
  left: -54px;
  font-size: 2rem;
  color: var(--gas-protection-dark);
}

.gas-protection-hero-visual > small {
  margin-top: 1.3rem;
  font-weight: 800;
  text-align: center;
  color: #70612f;
}

.gas-protection-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.14fr)
    minmax(380px, 0.7fr);
  gap: 1.25rem;
  align-items: start;
}

.gas-protection-input-column {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.gas-protection-device-grid,
.gas-protection-building-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}

.gas-protection-device-grid
.field:last-child {
  grid-column: 1 / -1;
}

.gas-protection-device-grid
.field > small,
.gas-protection-room-fields
.field > small {
  display: block;
  margin-top: 0.55rem;
  line-height: 1.45;
  color: #707a80;
}

.gas-protection-building-grid select,
.gas-protection-room-fields select,
.gas-protection-room-fields
input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  border:
    1px solid
    rgba(35, 41, 45, 0.15);
  border-radius: 12px;
  background: white;
  font: inherit;
  color: #293137;
}

.gas-protection-building-grid
select:focus,
.gas-protection-room-fields
select:focus,
.gas-protection-room-fields
input[type="text"]:focus {
  border-color:
    rgba(143, 98, 0, 0.56);
  outline:
    3px solid
    rgba(215, 156, 0, 0.13);
}

.gas-air-change-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 96px;
  padding: 1rem;
  border:
    1px solid
    rgba(143, 98, 0, 0.18);
  border-radius: 16px;
  background: #fffaf0;
}

.gas-air-change-display span {
  margin-bottom: 0.4rem;
  font-size: 0.76rem;
  color: #71673f;
}

.gas-air-change-display strong {
  font-size: 1.35rem;
  color: var(--gas-protection-dark);
}

.gas-basis-import {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1.2rem;
  padding: 1rem;
  border:
    1px solid
    rgba(143, 98, 0, 0.23);
  border-radius: 16px;
  background: #fff8df;
}

.gas-basis-import[hidden] {
  display: none;
}

.gas-basis-import strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #523e06;
}

.gas-basis-import p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6d6138;
}

.gas-basis-import button {
  flex: 0 0 auto;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: 12px;
  background: var(--gas-protection-dark);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  color: white;
  cursor: pointer;
}

.gas-protection-room-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
}

.gas-protection-room-row {
  overflow: hidden;
  border:
    1px solid
    var(--gas-protection-border);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafbfb
    );
  box-shadow:
    0 10px 28px
    rgba(28, 34, 38, 0.055);
}

.gas-protection-room-row > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-bottom:
    1px solid
    rgba(35, 41, 45, 0.09);
  background:
    rgba(255, 244, 207, 0.48);
}

.gas-protection-room-row
> header strong {
  color: #4d3b08;
}

.gas-protection-room-row
> header button {
  padding: 0.45rem 0.7rem;
  border:
    1px solid
    rgba(147, 51, 51, 0.18);
  border-radius: 10px;
  background: white;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  color: #9a3838;
  cursor: pointer;
}

.gas-protection-room-fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.1rem;
}

.gas-room-checkbox {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  min-height: 70px;
  padding: 0.85rem;
  border:
    1px solid
    rgba(35, 41, 45, 0.1);
  border-radius: 14px;
  background: #f7f9f9;
  line-height: 1.45;
  color: #535e64;
}

.gas-room-checkbox input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.12rem;
  accent-color:
    var(--gas-protection-dark);
}

.gas-protection-room-row > footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border-top:
    1px solid
    rgba(35, 41, 45, 0.08);
  background: #f4f7f7;
}

.gas-protection-room-row
> footer span {
  font-size: 0.78rem;
  color: #687278;
}

.gas-protection-room-row
> footer strong {
  color: var(--gas-protection-dark);
}

.gas-protection-result {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  background:
    linear-gradient(
      160deg,
      #252b30,
      #161b1f
    );
  color: white;
  box-shadow:
    0 24px 60px
    rgba(18, 23, 26, 0.2);
}

.gas-protection-result-block {
  margin-top: 1rem;
  padding: 1rem;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 19px;
  background:
    rgba(255, 255, 255, 0.05);
}

.gas-protection-result-block
> header {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.gas-protection-result-block
> header > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffd764;
  font-size: 1rem;
  font-weight: 950;
  color: #2c260f;
}

.gas-protection-result-block h2 {
  margin: 0;
  font-size: 1.2rem;
  color: white;
}

.gas-protection-result-block
> header p {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: #abb5bb;
}

.gas-protection-status {
  margin-bottom: 0.85rem;
}

.gas-protection-status strong {
  display: block;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  text-align: center;
  color: #d7dde0;
}

.gas-protection-status
strong[data-status="success"] {
  background:
    rgba(47, 181, 108, 0.17);
  color: #8ee5b6;
}

.gas-protection-status
strong[data-status="danger"] {
  background:
    rgba(218, 78, 78, 0.17);
  color: #ffaaaa;
}

.gas-protection-status
strong[data-status="warning"] {
  background:
    rgba(235, 172, 44, 0.18);
  color: #ffe09a;
}

.gas-protection-status
strong[data-status="neutral"] {
  color: #c5cdd1;
}

.gas-protection-result-block dl {
  display: grid;
  margin: 0;
}

.gas-protection-result-block
dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.66rem 0;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.gas-protection-result-block dt {
  font-size: 0.75rem;
  color: #aab4ba;
}

.gas-protection-result-block dd {
  margin: 0;
  font-size: 0.77rem;
  font-weight: 850;
  text-align: right;
  color: white;
}

.gas-protection-result
.gas-inline-warning {
  margin-top: 1rem;
  border-color:
    rgba(255, 197, 83, 0.25);
  background:
    rgba(255, 197, 83, 0.1);
  color: #ffdd96;
}

.gas-protection-info-popover {
  max-height:
    min(650px, calc(100vh - 24px));
  overflow-y: auto;
}

@media (max-width: 1120px) {
  .gas-protection-layout {
    grid-template-columns: 1fr;
  }

  .gas-protection-result {
    position: static;
  }
}

@media (max-width: 760px) {
  .gas-protection-device-grid,
  .gas-protection-building-grid,
  .gas-protection-room-fields {
    grid-template-columns: 1fr;
  }

  .gas-protection-device-grid
  .field:last-child {
    grid-column: auto;
  }

  .gas-basis-import {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-protection-room-row
  > header,
  .gas-protection-room-row
  > footer {
    align-items: flex-start;
  }

  .gas-protection-room-row
  > footer {
    flex-direction: column;
    gap: 0.35rem;
  }

  .gas-protection-result-block
  dl > div {
    align-items: flex-start;
  }

  .gas-protection-result-block dd {
    max-width: 48%;
  }
}

/* SHK_GAS_PROTECTION_GOALS_CSS_END_20260806 */

/* SHK_GAS_PIPE_SIZING_CSS_PART1_20260806 */

.gas-pipe-page {
  --gas-pipe-yellow: #d79c00;
  --gas-pipe-dark: #8f6200;
  --gas-pipe-soft: #fff4cf;
  --gas-pipe-border: rgba(34, 40, 45, 0.13);
}

.gas-pipe-hero {
  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(215, 156, 0, 0.16),
      transparent 29rem
    ),
    linear-gradient(
      135deg,
      #ffffff,
      #fff9e8
    );
}

.gas-pipe-hero .eyebrow,
.gas-pipe-page
.radiator-calculator-heading
.eyebrow,
.gas-pipe-result > .eyebrow {
  color: var(--gas-pipe-dark);
}

.gas-pipe-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 340px;
  padding: 2rem;
  overflow: hidden;
  border:
    1px solid
    rgba(143, 98, 0, 0.2);
  border-radius: 34px;
  background:
    linear-gradient(
      145deg,
      #fffdf6,
      #f0e1a8
    );
  box-shadow:
    inset 0 0 0 1px
      rgba(255, 255, 255, 0.75),
    0 24px 55px
      rgba(91, 67, 15, 0.13);
}

.gas-pipe-hero-visual::before {
  position: absolute;
  inset: 13%;
  border:
    1px dashed
    rgba(143, 98, 0, 0.24);
  border-radius: 32px;
  content: "";
}

.gas-pipe-hero-visual > span,
.gas-pipe-hero-visual > strong,
.gas-pipe-hero-visual > small,
.gas-pipe-network {
  position: relative;
  z-index: 1;
}

.gas-pipe-hero-visual > span {
  margin-bottom: 1.2rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gas-pipe-dark);
}

.gas-pipe-network {
  position: relative;
  width: min(310px, 88%);
  height: 120px;
  margin-bottom: 1rem;
}

.gas-pipe-network::before {
  position: absolute;
  top: 55px;
  left: 0;
  width: 70%;
  height: 12px;
  border-radius: 999px;
  content: "";
  background:
    linear-gradient(
      180deg,
      #e7bf39,
      #b17c00
    );
  box-shadow:
    0 8px 18px
    rgba(102, 71, 0, 0.18);
}

.gas-pipe-network::after {
  position: absolute;
  top: 55px;
  left: 62%;
  width: 12px;
  height: 58px;
  border-radius: 999px;
  content: "";
  background:
    linear-gradient(
      90deg,
      #e7bf39,
      #b17c00
    );
}

.gas-pipe-network i {
  position: absolute;
  display: block;
  border:
    3px solid
    rgba(72, 63, 30, 0.72);
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #e7e9ea
    );
  box-shadow:
    0 10px 24px
    rgba(30, 36, 40, 0.13);
}

.gas-pipe-network i:nth-child(1) {
  top: 39px;
  left: 3px;
  width: 34px;
  height: 44px;
  border-radius: 8px;
}

.gas-pipe-network i:nth-child(2) {
  top: 34px;
  left: 31%;
  width: 48px;
  height: 56px;
  border-radius: 11px;
}

.gas-pipe-network i:nth-child(3) {
  top: 27px;
  right: 0;
  width: 50px;
  height: 70px;
  border-radius: 12px;
}

.gas-pipe-network i:nth-child(4) {
  right: 28%;
  bottom: 0;
  width: 44px;
  height: 46px;
  border-radius: 10px;
}

.gas-pipe-hero-visual > strong {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.055em;
  color: #322b10;
}

.gas-pipe-hero-visual > small {
  margin-top: 0.75rem;
  font-weight: 800;
  text-align: center;
  color: #70612f;
}

.gas-pipe-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(380px, 0.68fr);
  gap: 1.25rem;
  align-items: start;
}

.gas-pipe-input-column {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.gas-pipe-basis-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}

.gas-pipe-basis-grid
.field > small,
.gas-pipe-section-fields
.field > small {
  display: block;
  margin-top: 0.55rem;
  line-height: 1.45;
  color: #707a80;
}

.gas-pipe-section-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
}

.gas-pipe-section-row {
  overflow: hidden;
  border:
    1px solid
    var(--gas-pipe-border);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafbfb
    );
  box-shadow:
    0 10px 28px
    rgba(28, 34, 38, 0.055);
}

.gas-pipe-section-row > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-bottom:
    1px solid
    rgba(34, 40, 45, 0.09);
  background:
    rgba(255, 244, 207, 0.5);
}

.gas-pipe-section-row
> header strong {
  color: #4d3b08;
}

.gas-pipe-section-row
> header button {
  padding: 0.45rem 0.7rem;
  border:
    1px solid
    rgba(147, 51, 51, 0.18);
  border-radius: 10px;
  background: white;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  color: #9a3838;
  cursor: pointer;
}

.gas-pipe-section-row
> header button:hover {
  border-color:
    rgba(147, 51, 51, 0.38);
  background: #fff5f5;
}

.gas-pipe-section-fields {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.1rem;
}

.gas-pipe-section-fields
.field {
  min-width: 0;
}

.gas-pipe-section-fields select,
.gas-pipe-section-fields
input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  border:
    1px solid
    rgba(34, 40, 45, 0.15);
  border-radius: 12px;
  background: white;
  font: inherit;
  color: #293137;
}

.gas-pipe-section-fields
select:focus,
.gas-pipe-section-fields
input[type="text"]:focus {
  border-color:
    rgba(143, 98, 0, 0.56);
  outline:
    3px solid
    rgba(215, 156, 0, 0.13);
}

.gas-pipe-section-fields
.gas-room-checkbox {
  align-self: stretch;
  min-height: 100%;
}

.gas-pipe-section-row > footer {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-top:
    1px solid
    rgba(34, 40, 45, 0.08);
  background: #f4f7f7;
}

.gas-pipe-section-row
> footer > span {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: white;
  font-size: 0.76rem;
  color: #687278;
}

.gas-pipe-section-row
> footer strong {
  flex: 0 0 auto;
  color: var(--gas-pipe-dark);
}

.gas-pipe-info-popover {
  max-height:
    min(650px, calc(100vh - 24px));
  overflow-y: auto;
}

/* SHK_GAS_PIPE_SIZING_CSS_PART1_END_20260806 */

/* SHK_GAS_PIPE_SIZING_CSS_PART2_20260806 */

.gas-pipe-result {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  background:
    linear-gradient(
      160deg,
      #252b30,
      #151a1e
    );
  color: white;
  box-shadow:
    0 24px 60px
    rgba(18, 23, 26, 0.21);
}

.gas-pipe-result h2 {
  margin-bottom: 0;
  color: white;
}

.gas-pipe-main-result {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  margin: 1.25rem 0 1rem;
}

.gas-pipe-main-result strong {
  font-size:
    clamp(3.8rem, 7vw, 5.8rem);
  line-height: 0.88;
  letter-spacing: -0.065em;
  color: #ffd764;
}

.gas-pipe-main-result span {
  font-size: 1rem;
  font-weight: 850;
  color: #e3e7e9;
}

.gas-pipe-result
.gas-protection-status {
  margin-bottom: 1rem;
}

.gas-pipe-result
.gas-load-breakdown {
  margin-top: 0;
}

.gas-pipe-worst-path,
.gas-pipe-validation-summary {
  margin-top: 1rem;
  padding: 1rem;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background:
    rgba(255, 255, 255, 0.055);
}

.gas-pipe-worst-path > strong,
.gas-pipe-validation-summary > strong {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: #ffd764;
}

.gas-pipe-worst-path ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gas-pipe-path;
}

.gas-pipe-worst-path li {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 42px;
  padding:
    0.55rem
    0
    0.55rem
    2.1rem;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
  counter-increment: gas-pipe-path;
}

.gas-pipe-worst-path li::before {
  position: absolute;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  content: counter(gas-pipe-path);
  background:
    rgba(255, 215, 100, 0.14);
  font-size: 0.66rem;
  font-weight: 900;
  color: #ffd764;
}

.gas-pipe-worst-path li span {
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #c8d0d4;
}

.gas-pipe-worst-path li strong {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: white;
}

.gas-pipe-worst-path
.gas-pipe-path-total {
  margin-top: 0.4rem;
  padding-top: 0.8rem;
  padding-bottom: 0.2rem;
  border-bottom: 0;
}

.gas-pipe-worst-path
.gas-pipe-path-total::before {
  content: "Σ";
  background: #ffd764;
  color: #2d270f;
}

.gas-pipe-worst-path
.gas-pipe-path-total span,
.gas-pipe-worst-path
.gas-pipe-path-total strong {
  font-weight: 900;
  color: #ffe394;
}

.gas-pipe-validation-summary p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: #bdc6cb;
}

.gas-pipe-result
.gas-load-formula {
  margin-top: 1rem;
}

.gas-pipe-result
.gas-inline-warning {
  margin-top: 1rem;
  border-color:
    rgba(255, 196, 75, 0.25);
  background:
    rgba(255, 196, 75, 0.1);
  color: #ffdd96;
}

.gas-pipe-result
.gas-calculator-note {
  margin-top: 1rem;
}

.gas-pipe-page
.gas-basis-import {
  margin-top: 1.2rem;
}

.gas-pipe-page
.gas-basis-import button {
  white-space: nowrap;
}

.gas-pipe-page
.gas-confirmation {
  margin-top: 1rem;
}

.gas-pipe-section-row
[data-section-value-confirmed]:checked
+ span {
  color: #456c39;
}

.gas-pipe-section-row:has(
  [data-section-value-confirmed]:checked
) {
  border-color:
    rgba(61, 139, 83, 0.3);
}

.gas-pipe-section-row:has(
  [data-section-value-confirmed]:checked
) > header {
  background:
    rgba(222, 245, 224, 0.64);
}

.gas-pipe-section-row:has(
  [data-section-value-confirmed]:checked
) > header strong {
  color: #356440;
}

@media (max-width: 1250px) {
  .gas-pipe-section-fields {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .gas-pipe-layout {
    grid-template-columns: 1fr;
  }

  .gas-pipe-result {
    position: static;
  }
}

@media (max-width: 760px) {
  .gas-pipe-basis-grid,
  .gas-pipe-section-fields {
    grid-template-columns: 1fr;
  }

  .gas-pipe-page
  .gas-basis-import {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-pipe-page
  .gas-basis-import button {
    width: 100%;
  }

  .gas-pipe-section-row > header {
    align-items: flex-start;
  }

  .gas-pipe-section-row > footer {
    grid-template-columns: 1fr;
  }

  .gas-pipe-section-row
  > footer > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .gas-pipe-main-result strong {
    font-size:
      clamp(3.5rem, 18vw, 5rem);
  }

  .gas-pipe-worst-path li {
    align-items: flex-start;
  }

  .gas-pipe-worst-path li strong {
    max-width: 46%;
    text-align: right;
  }
}

@media (max-width: 480px) {
  .gas-pipe-section-row > header {
    flex-direction: column;
  }

  .gas-pipe-section-row
  > header button {
    width: 100%;
  }

  .gas-pipe-worst-path li {
    grid-template-columns: 1fr;
  }

  .gas-pipe-worst-path li strong {
    max-width: none;
    text-align: left;
  }
}

/* SHK_GAS_PIPE_SIZING_CSS_PART2_END_20260806 */

/* SHK_GAS_CARD_LABEL_FIX_20260806 */

.gas-tool-card h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.gas-tool-card .gas-tool-card-detail {
  overflow-wrap: anywhere;
}

/* SHK_GAS_CARD_LABEL_FIX_END_20260806 */

/* SHK_GAS_FLOW_GUARD_CSS_PART1_20260806 */

.gas-flow-guard-page {
  --gas-gs-yellow: #d79c00;
  --gas-gs-dark: #8b5f00;
  --gas-gs-soft: #fff4cf;
  --gas-gs-border: rgba(34, 40, 45, 0.13);
  --gas-gs-green: #3e8253;
  --gas-gs-red: #a34545;
}

.gas-flow-guard-hero {
  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(215, 156, 0, 0.18),
      transparent 29rem
    ),
    linear-gradient(
      135deg,
      #ffffff,
      #fff9e9
    );
}

.gas-flow-guard-hero .eyebrow,
.gas-flow-guard-page
.radiator-calculator-heading
.eyebrow,
.gas-flow-guard-result > .eyebrow {
  color: var(--gas-gs-dark);
}

.gas-flow-guard-visual {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 340px;
  padding: 2rem;
  overflow: hidden;
  border:
    1px solid
    rgba(139, 95, 0, 0.2);
  border-radius: 34px;
  background:
    linear-gradient(
      145deg,
      #fffdf6,
      #f0e0a7
    );
  box-shadow:
    inset 0 0 0 1px
      rgba(255, 255, 255, 0.78),
    0 24px 55px
      rgba(91, 67, 15, 0.13);
}

.gas-flow-guard-visual::before {
  position: absolute;
  inset: 13%;
  border:
    1px dashed
    rgba(139, 95, 0, 0.24);
  border-radius: 32px;
  content: "";
}

.gas-flow-guard-pipe,
.gas-flow-guard-visual > span,
.gas-flow-guard-visual > small {
  position: relative;
  z-index: 1;
}

.gas-flow-guard-pipe {
  display: grid;
  grid-template-columns:
    minmax(55px, 1fr)
    auto
    minmax(55px, 1fr);
  align-items: center;
  width: min(330px, 90%);
}

.gas-flow-guard-pipe i {
  display: block;
  height: 18px;
  background:
    linear-gradient(
      180deg,
      #e7bf39,
      #a97400
    );
  box-shadow:
    0 8px 18px
    rgba(102, 71, 0, 0.18);
}

.gas-flow-guard-pipe i:first-child {
  border-radius: 999px 0 0 999px;
}

.gas-flow-guard-pipe i:last-child {
  border-radius: 0 999px 999px 0;
}

.gas-flow-guard-pipe strong {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border:
    5px solid
    rgba(67, 60, 31, 0.8);
  border-radius: 34px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dfe4e5
    );
  box-shadow:
    0 18px 40px
    rgba(28, 34, 38, 0.22);
  font-size: 2.4rem;
  letter-spacing: -0.055em;
  color: #3f3717;
}

.gas-flow-guard-visual > span {
  margin-top: 1.3rem;
  font-size:
    clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #302a10;
}

.gas-flow-guard-visual > small {
  margin-top: 0.8rem;
  max-width: 310px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  color: #70612f;
}

.gas-flow-guard-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(380px, 0.7fr);
  gap: 1.25rem;
  align-items: start;
}

.gas-flow-guard-input-column {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.gas-flow-guard-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.gas-flow-guard-field-grid .field {
  min-width: 0;
}

.gas-flow-guard-field-grid
.field > small {
  display: block;
  margin-top: 0.55rem;
  line-height: 1.45;
  color: #707a80;
}

.gas-flow-guard-field-grid
select,
.gas-flow-guard-field-grid
input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  border:
    1px solid
    rgba(34, 40, 45, 0.15);
  border-radius: 12px;
  background: white;
  font: inherit;
  color: #293137;
}

.gas-flow-guard-field-grid
select:focus,
.gas-flow-guard-field-grid
input[type="text"]:focus {
  border-color:
    rgba(139, 95, 0, 0.56);
  outline:
    3px solid
    rgba(215, 156, 0, 0.13);
}

.gas-flow-guard-installation-card,
.gas-flow-guard-product-card {
  overflow: hidden;
}

.gas-flow-guard-page
.gas-basis-import {
  margin-top: 1.2rem;
}

.gas-flow-guard-page
.gas-basis-import button {
  white-space: nowrap;
}

.gas-flow-guard-upstream {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: 1rem;
  border:
    1px solid
    rgba(34, 40, 45, 0.1);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      #fafbfb,
      #f4f7f7
    );
}

.gas-flow-guard-upstream
.gas-flow-guard-field-grid {
  margin-top: 0;
}

.gas-flow-guard-confirmations {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.gas-flow-guard-confirmations
.gas-room-checkbox {
  min-height: 100%;
}

.gas-flow-guard-confirmations
input:checked + span {
  color: #3f714a;
}

.gas-flow-guard-scope-card:has(
  #gas-flow-guard-scope:not(
    [value="manual"]
  )
) {
  border-color:
    rgba(215, 156, 0, 0.25);
}

.gas-flow-guard-info-popover {
  max-height:
    min(650px, calc(100vh - 24px));
  overflow-y: auto;
}

/* SHK_GAS_FLOW_GUARD_CSS_PART1_END_20260806 */

/* SHK_LEGAL_CONTRAST_FIX_20260806 */
.auth-card .legal-content {
  color: #334155;
}

.auth-card .legal-content h2,
.auth-card .legal-content h3 {
  color: var(--navy);
}

.auth-card .legal-content strong {
  color: #1e293b;
}

.auth-card .legal-content a,
.auth-card .legal-content a:visited {
  color: #005ea8;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.auth-card .legal-content a:hover,
.auth-card .legal-content a:focus-visible {
  color: #003f73;
  text-decoration-thickness: 2px;
}

.auth-card .legal-content code {
  color: #1e293b;
}

/* SHK_GAS_FLOW_GUARD_CSS_PART2_20260806 */

.gas-flow-guard-result {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  background:
    linear-gradient(
      160deg,
      #252b30,
      #151a1e
    );
  color: white;
  box-shadow:
    0 24px 60px
    rgba(18, 23, 26, 0.21);
}

.gas-flow-guard-result h2 {
  margin-bottom: 0;
  color: white;
}

.gas-flow-guard-main-result {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  margin: 1.25rem 0 1rem;
}

.gas-flow-guard-main-result strong {
  font-size:
    clamp(3.8rem, 7vw, 5.8rem);
  line-height: 0.88;
  letter-spacing: -0.065em;
  color: #ffd764;
}

.gas-flow-guard-main-result span {
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
  color: #e3e7e9;
}

.gas-flow-guard-result
.gas-protection-status {
  margin-bottom: 1rem;
}

.gas-flow-guard-result
.gas-load-breakdown {
  margin-top: 0;
}

.gas-flow-guard-checklist {
  margin-top: 1rem;
  padding: 1rem;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background:
    rgba(255, 255, 255, 0.055);
}

.gas-flow-guard-checklist > strong {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.82rem;
  color: #ffd764;
}

.gas-flow-guard-checklist ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gas-flow-guard-checklist li {
  position: relative;
  min-height: 42px;
  padding:
    0.7rem
    0.75rem
    0.7rem
    2.55rem;
  border:
    1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
  line-height: 1.45;
  color: #c8d0d4;
}

.gas-flow-guard-checklist li::before {
  position: absolute;
  top: 0.68rem;
  left: 0.72rem;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  content: "?";
  background:
    rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  font-weight: 900;
  color: #d4dade;
}

.gas-flow-guard-checklist
li[data-state="neutral"]::before {
  content: "?";
  background:
    rgba(255, 255, 255, 0.1);
  color: #d4dade;
}

.gas-flow-guard-checklist
li[data-state="warning"] {
  border-color:
    rgba(255, 196, 75, 0.22);
  background:
    rgba(255, 196, 75, 0.075);
  color: #ffdda0;
}

.gas-flow-guard-checklist
li[data-state="warning"]::before {
  content: "!";
  background:
    rgba(255, 196, 75, 0.17);
  color: #ffd16b;
}

.gas-flow-guard-checklist
li[data-state="danger"] {
  border-color:
    rgba(255, 111, 111, 0.24);
  background:
    rgba(255, 111, 111, 0.08);
  color: #ffb2b2;
}

.gas-flow-guard-checklist
li[data-state="danger"]::before {
  content: "×";
  background:
    rgba(255, 111, 111, 0.17);
  color: #ff9999;
}

.gas-flow-guard-checklist
li[data-state="success"] {
  border-color:
    rgba(107, 210, 135, 0.24);
  background:
    rgba(107, 210, 135, 0.08);
  color: #aee7bd;
}

.gas-flow-guard-checklist
li[data-state="success"]::before {
  content: "✓";
  background:
    rgba(107, 210, 135, 0.17);
  color: #91dfaa;
}

.gas-flow-guard-result
.gas-load-formula {
  margin-top: 1rem;
}

.gas-flow-guard-result
.gas-inline-warning {
  margin-top: 1rem;
  border-color:
    rgba(255, 196, 75, 0.25);
  background:
    rgba(255, 196, 75, 0.1);
  color: #ffdd96;
}

.gas-flow-guard-result
.gas-calculator-note {
  margin-top: 1rem;
}

.gas-flow-guard-page
.gas-protection-status
strong[data-status="neutral"] {
  border-color:
    rgba(255, 255, 255, 0.13);
  background:
    rgba(255, 255, 255, 0.07);
  color: #d9e0e3;
}

.gas-flow-guard-page
.gas-protection-status
strong[data-status="warning"] {
  border-color:
    rgba(255, 196, 75, 0.26);
  background:
    rgba(255, 196, 75, 0.11);
  color: #ffdb8a;
}

.gas-flow-guard-page
.gas-protection-status
strong[data-status="danger"] {
  border-color:
    rgba(255, 111, 111, 0.27);
  background:
    rgba(255, 111, 111, 0.1);
  color: #ffadad;
}

.gas-flow-guard-page
.gas-protection-status
strong[data-status="success"] {
  border-color:
    rgba(107, 210, 135, 0.27);
  background:
    rgba(107, 210, 135, 0.1);
  color: #a7e8b8;
}

.gas-flow-guard-upstream-fields[hidden],
.gas-flow-guard-import-box[hidden] {
  display: none;
}

@media (max-width: 1120px) {
  .gas-flow-guard-layout {
    grid-template-columns: 1fr;
  }

  .gas-flow-guard-result {
    position: static;
  }
}

@media (max-width: 760px) {
  .gas-flow-guard-field-grid,
  .gas-flow-guard-confirmations {
    grid-template-columns: 1fr;
  }

  .gas-flow-guard-page
  .gas-basis-import {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-flow-guard-page
  .gas-basis-import button {
    width: 100%;
  }

  .gas-flow-guard-upstream {
    padding: 0.85rem;
  }

  .gas-flow-guard-main-result {
    align-items: flex-end;
  }

  .gas-flow-guard-main-result strong {
    font-size:
      clamp(3.5rem, 18vw, 5rem);
  }

  .gas-flow-guard-main-result span {
    padding-bottom: 0.2rem;
  }
}

@media (max-width: 520px) {
  .gas-flow-guard-main-result {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  .gas-flow-guard-main-result span {
    padding-bottom: 0;
  }

  .gas-flow-guard-checklist li {
    padding-left: 2.45rem;
  }
}

/* SHK_GAS_FLOW_GUARD_CSS_PART2_END_20260806 */

/* SHK_GAS_SERVICEABILITY_CSS_20260806 */

.gas-serviceability-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 86% 7%,
      rgba(184, 132, 0, .14),
      transparent 31rem
    ),
    linear-gradient(
      180deg,
      #f8fafb 0,
      #eef2f4 100%
    );
}

.gas-serviceability-hero {
  position: relative;
  overflow: hidden;
}

.gas-serviceability-hero .eyebrow,
.gas-serviceability-card .eyebrow,
.gas-serviceability-result > .eyebrow {
  color: #936a00;
}

.gas-serviceability-visual {
  position: relative;
  min-height: 250px;
  display: grid;
  place-content: center;
  gap: 15px;
  padding: 28px;
  border:
    1px solid
    rgba(184, 132, 0, .24);
  border-radius: 28px;
  color: #082b49;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 214, 94, .52),
      rgba(255, 255, 255, .94) 58%,
      rgba(238, 242, 244, .96)
    );
  box-shadow:
    0 24px 60px
    rgba(7, 35, 55, .1);
  text-align: center;
}

.gas-serviceability-visual::before,
.gas-serviceability-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.gas-serviceability-visual::before {
  width: 180px;
  height: 180px;
  top: -80px;
  right: -55px;
  border:
    22px solid
    rgba(184, 132, 0, .08);
}

.gas-serviceability-visual::after {
  width: 90px;
  height: 90px;
  left: -35px;
  bottom: -35px;
  background:
    rgba(8, 43, 73, .05);
}

.gas-serviceability-gauge {
  position: relative;
  z-index: 1;
  width: min(260px, 100%);
  min-height: 126px;
  display: grid;
  grid-template-columns:
    minmax(45px, 1fr)
    minmax(70px, 1.25fr)
    minmax(45px, 1fr);
  align-items: end;
  gap: 8px;
  margin-inline: auto;
  padding: 18px 18px 12px;
  border:
    3px solid
    #0b6d9d;
  border-top: 0;
  border-radius:
    0 0 32px 32px;
  background:
    linear-gradient(
      90deg,
      rgba(11, 109, 157, .12),
      rgba(255, 255, 255, .86),
      rgba(184, 132, 0, .14)
    );
}

.gas-serviceability-gauge::before {
  content: "";
  position: absolute;
  inset: 15px 18px 18px;
  border-bottom:
    13px solid
    rgba(11, 109, 157, .72);
  border-radius:
    0 0 22px 22px;
}

.gas-serviceability-gauge span,
.gas-serviceability-gauge i {
  position: relative;
  z-index: 1;
}

.gas-serviceability-gauge span {
  padding-bottom: 34px;
  font-size: 1rem;
  font-weight: 950;
}

.gas-serviceability-gauge i {
  align-self: center;
  width: 2px;
  height: 76px;
  margin-inline: auto;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #b88400 0 35%,
      #0b6d9d 35% 100%
    );
  box-shadow:
    0 0 0 6px
    rgba(255, 255, 255, .7);
}

.gas-serviceability-visual > strong,
.gas-serviceability-visual > small {
  position: relative;
  z-index: 1;
}

.gas-serviceability-visual > strong {
  font-size:
    clamp(2.1rem, 5vw, 3.5rem);
  line-height: 1;
}

.gas-serviceability-visual > small {
  color: #59666e;
  font-weight: 750;
}

.gas-serviceability-workspace {
  width:
    min(1480px, calc(100% - 32px));
  margin:
    0 auto 56px;
}

.gas-serviceability-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(340px, 410px);
  gap: 24px;
  align-items: start;
}

.gas-serviceability-input-column {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.gas-serviceability-card {
  min-width: 0;
  padding: 24px;
  border:
    1px solid
    rgba(8, 43, 73, .11);
  border-radius: 24px;
  background:
    rgba(255, 255, 255, .96);
  box-shadow:
    0 16px 40px
    rgba(7, 35, 55, .07);
}

.gas-serviceability-card-heading {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.gas-serviceability-card-heading
.eyebrow {
  margin-bottom: 4px;
}

.gas-serviceability-card-heading h2 {
  margin: 0;
  color: #082b49;
  font-size:
    clamp(1.25rem, 3vw, 1.65rem);
}

.gas-serviceability-import-box {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  padding: 18px;
  border:
    1px solid
    rgba(184, 132, 0, .25);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 247, 216, .96),
      rgba(255, 255, 255, .98)
    );
}

.gas-serviceability-import-box strong {
  color: #5b4200;
}

.gas-serviceability-import-box p {
  margin: 0;
  color: #626b70;
  line-height: 1.55;
}

.gas-serviceability-import-box code {
  padding: 2px 6px;
  border-radius: 6px;
  color: #082b49;
  background:
    rgba(8, 43, 73, .07);
  font-size: .83em;
}

.gas-serviceability-import-box button {
  width: fit-content;
}

.gas-serviceability-field-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 16px;
}

.gas-serviceability-field-grid
+ .gas-serviceability-field-grid {
  margin-top: 16px;
}

.gas-serviceability-field-grid
.field {
  min-width: 0;
}

.gas-serviceability-page
.field > span:first-child {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.gas-serviceability-page
input[readonly] {
  color: #53636c;
  background: #edf1f3;
  cursor: default;
}

.gas-serviceability-page textarea {
  width: 100%;
  resize: vertical;
  min-height: 125px;
}

.gas-serviceability-section-list {
  min-width: 0;
  margin:
    18px 0;
  padding: 18px;
  border:
    1px solid
    rgba(8, 43, 73, .12);
  border-radius: 18px;
  background: #f6f8f9;
}

.gas-serviceability-section-list legend {
  padding:
    0 8px;
  color: #082b49;
  font-weight: 900;
}

.gas-serviceability-section-list > p {
  margin:
    0 0 13px;
  color: #647078;
  font-size: .86rem;
  line-height: 1.5;
}

.gas-serviceability-section-options {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 9px;
}

.gas-serviceability-section-option {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border:
    1px solid
    rgba(8, 43, 73, .1);
  border-radius: 13px;
  background: white;
  cursor: pointer;
}

.gas-serviceability-section-option:hover {
  border-color:
    rgba(184, 132, 0, .48);
  background: #fffaf0;
}

.gas-serviceability-section-option
input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.gas-serviceability-section-option
span {
  min-width: 0;
  color: #263b49;
  font-size: .86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.gas-serviceability-pressure-fields {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.gas-serviceability-device-field {
  margin-top: 18px;
}

.gas-serviceability-confirmation {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 17px;
  padding: 15px;
  border:
    1px solid
    rgba(8, 43, 73, .1);
  border-radius: 15px;
  color: #334a58;
  background: #f5f8f9;
  font-size: .88rem;
  line-height: 1.5;
  cursor: pointer;
}

.gas-serviceability-confirmation
input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.gas-serviceability-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding:
    4px 2px 0;
}

.gas-serviceability-actions
#gas-serviceability-storage-status {
  flex:
    1 1 100%;
  min-height: 1.5em;
  margin: 3px 0 0;
  color: #53636c;
  font-size: .85rem;
  font-weight: 700;
}

.gas-serviceability-result {
  position: sticky;
  top: 92px;
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 25px;
  border:
    1px solid
    rgba(255, 255, 255, .1);
  border-radius: 26px;
  color: white;
  background:
    linear-gradient(
      150deg,
      #061d30,
      #0a3554
    );
  box-shadow:
    0 24px 60px
    rgba(1, 17, 29, .22);
}

.gas-serviceability-result h2 {
  margin: -10px 0 0;
  color: white;
  font-size:
    clamp(1.55rem, 4vw, 2.15rem);
}

.gas-serviceability-main-result {
  display: grid;
  gap: 7px;
  padding: 18px;
  border:
    1px solid
    rgba(255, 255, 255, .14);
  border-left:
    5px solid
    #9db3c1;
  border-radius: 17px;
  background:
    rgba(255, 255, 255, .08);
}

.gas-serviceability-main-result
strong {
  font-size:
    clamp(1.13rem, 3vw, 1.48rem);
  line-height: 1.25;
}

.gas-serviceability-main-result
span {
  color:
    rgba(255, 255, 255, .77);
  font-size: .88rem;
  line-height: 1.55;
}

.gas-serviceability-result-values {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 10px;
  margin: 0;
}

.gas-serviceability-result-values
div {
  min-width: 0;
  padding: 13px;
  border:
    1px solid
    rgba(255, 255, 255, .1);
  border-radius: 14px;
  background:
    rgba(255, 255, 255, .06);
}

.gas-serviceability-result-values
dt {
  margin-bottom: 5px;
  color:
    rgba(255, 255, 255, .58);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.gas-serviceability-result-values
dd {
  margin: 0;
  color: white;
  font-size: .9rem;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.gas-serviceability-measure,
.gas-serviceability-formula-note {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 16px;
}

.gas-serviceability-measure {
  border:
    1px solid
    rgba(255, 214, 94, .26);
  background:
    rgba(184, 132, 0, .14);
}

.gas-serviceability-formula-note {
  border:
    1px solid
    rgba(122, 188, 225, .22);
  background:
    rgba(11, 109, 157, .13);
}

.gas-serviceability-measure strong,
.gas-serviceability-formula-note strong {
  color: white;
  line-height: 1.35;
}

.gas-serviceability-measure p,
.gas-serviceability-formula-note p {
  margin: 0;
  color:
    rgba(255, 255, 255, .77);
  font-size: .84rem;
  line-height: 1.55;
}

.gas-serviceability-result
.gas-calculator-note {
  margin: 0;
  border-color:
    rgba(255, 255, 255, .12);
  background:
    rgba(255, 255, 255, .07);
}

.gas-serviceability-result
.gas-calculator-note strong {
  color: white;
}

.gas-serviceability-result
.gas-calculator-note p {
  color:
    rgba(255, 255, 255, .74);
}

.gas-serviceability-page[
  data-serviceability-rating="unrestricted"
]
.gas-serviceability-main-result {
  border-left-color: #50c889;
  background:
    rgba(36, 145, 92, .18);
}

.gas-serviceability-page[
  data-serviceability-rating="reduced"
]
.gas-serviceability-main-result {
  border-left-color: #ffca58;
  background:
    rgba(184, 132, 0, .2);
}

.gas-serviceability-page[
  data-serviceability-rating="none"
]
.gas-serviceability-main-result {
  border-left-color: #ff7474;
  background:
    rgba(190, 47, 47, .22);
}

.gas-serviceability-page[
  data-serviceability-rating="defect"
]
.gas-serviceability-main-result {
  border-left-color: #ff9c52;
  background:
    rgba(199, 92, 25, .2);
}

.gas-serviceability-page[
  data-serviceability-rating="incomplete"
]
.gas-serviceability-main-result,
.gas-serviceability-page[
  data-serviceability-rating="locked"
]
.gas-serviceability-main-result {
  border-left-color: #9db3c1;
}

.gas-serviceability-section-field[hidden],
.gas-serviceability-section-list[hidden],
.gas-serviceability-pressure-fields[hidden],
.gas-serviceability-device-field[hidden],
.gas-serviceability-formula-note[hidden] {
  display: none !important;
}

.gas-serviceability-info-popover {
  width: min(370px, calc(100vw - 24px));
}

@media (max-width: 1080px) {
  .gas-serviceability-form {
    grid-template-columns: 1fr;
  }

  .gas-serviceability-result {
    position: static;
  }
}

@media (max-width: 720px) {
  .gas-serviceability-workspace {
    width:
      min(100% - 20px, 1480px);
    margin-bottom: 34px;
  }

  .gas-serviceability-card,
  .gas-serviceability-result {
    padding: 19px;
    border-radius: 20px;
  }

  .gas-serviceability-field-grid,
  .gas-serviceability-section-options,
  .gas-serviceability-result-values {
    grid-template-columns: 1fr;
  }

  .gas-serviceability-card-heading {
    gap: 12px;
  }

  .gas-serviceability-actions
  button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .gas-serviceability-visual {
    min-height: 215px;
    padding: 20px;
  }

  .gas-serviceability-gauge {
    min-height: 110px;
  }

  .gas-serviceability-confirmation,
  .gas-serviceability-section-option {
    padding: 12px;
  }

  .gas-serviceability-result-values {
    gap: 8px;
  }
}

/* SHK_GAS_SERVICEABILITY_CSS_END_20260806 */


/* SHK_GAS_FLOW_GUARD_SCOPE_INLINE_CSS_20260806 */

.gas-flow-guard-scope-inline {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom:
    1px solid
    rgba(34, 40, 45, .12);
}

.gas-flow-guard-scope-intro {
  display: grid;
  gap: .3rem;
}

.gas-flow-guard-scope-intro strong {
  color: #082b49;
  font-size: 1rem;
}

.gas-flow-guard-scope-intro p {
  margin: 0;
  color: #626d73;
  font-size: .84rem;
  line-height: 1.5;
}

/* SHK_GAS_FLOW_GUARD_SCOPE_INLINE_CSS_END_20260806 */

/* SHK_GAS_PRESSURE_TEST_CSS_20260806 */

.gas-pressure-test-page {
  background:
    linear-gradient(
      180deg,
      #f8fafc 0,
      #eef3f8 100%
    );
}

.gas-pressure-test-hero {
  position: relative;
  overflow: hidden;
}

.gas-pressure-test-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(184, 132, 0, .16) 0,
      rgba(184, 132, 0, 0) 70%
    );
  pointer-events: none;
}

.gas-pressure-test-visual {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 250px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .14),
      rgba(255, 255, 255, .04)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 24px 60px rgba(0, 0, 0, .18);
  text-align: center;
}

.gas-pressure-test-visual > div {
  display: grid;
  grid-template-columns:
    auto minmax(110px, 180px) auto;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.gas-pressure-test-visual span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: #17263c;
  font-size: 1.1rem;
  font-weight: 850;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .2);
}

.gas-pressure-test-visual i {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #e7b942,
      #ffffff
    );
}

.gas-pressure-test-visual i::before,
.gas-pressure-test-visual i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  transform: translateY(-50%);
}

.gas-pressure-test-visual i::before {
  left: 8px;
}

.gas-pressure-test-visual i::after {
  right: 8px;
}

.gas-pressure-test-visual strong {
  margin-top: 26px;
  color: #ffffff;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.06em;
}

.gas-pressure-test-visual small {
  margin-top: 10px;
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
}

.gas-pressure-test-workspace {
  width: min(1500px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

.gas-pressure-test-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(330px, 420px);
  align-items: start;
  gap: 28px;
}

.gas-pressure-test-input-column {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.gas-pressure-test-card,
.gas-pressure-test-result {
  border: 1px solid rgba(23, 38, 60, .1);
  border-radius: 26px;
  background: #ffffff;
  box-shadow:
    0 18px 48px rgba(23, 38, 60, .08);
}

.gas-pressure-test-card {
  padding: 27px;
}

.gas-pressure-test-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.gas-pressure-test-card-heading h2 {
  margin: 4px 0 0;
  color: #17263c;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.gas-pressure-test-card-heading .eyebrow {
  margin: 0;
}

.gas-pressure-test-import-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 19px 20px;
  border: 1px solid rgba(184, 132, 0, .26);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 248, 225, .92),
      rgba(255, 255, 255, .96)
    );
}

.gas-pressure-test-import-box strong {
  display: block;
  color: #17263c;
}

.gas-pressure-test-import-box p {
  margin: 6px 0 0;
  color: #56657a;
  font-size: .9rem;
}

.gas-pressure-test-import-box code {
  color: #876100;
  font-weight: 800;
}

.gas-pressure-test-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.gas-pressure-test-field-grid + 
.gas-pressure-test-field-grid {
  margin-top: 20px;
}

.gas-pressure-test-card .field {
  min-width: 0;
}

.gas-pressure-test-card .field > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gas-pressure-test-section-list {
  margin: 21px 0;
  padding: 20px;
  border: 1px solid rgba(23, 38, 60, .12);
  border-radius: 18px;
  background: #f7f9fc;
}

.gas-pressure-test-section-list legend {
  padding: 0 8px;
  color: #17263c;
  font-weight: 850;
}

.gas-pressure-test-section-list > p {
  margin: 0 0 15px;
  color: #647286;
  font-size: .9rem;
}

.gas-pressure-test-section-options {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gas-pressure-test-section-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(23, 38, 60, .1);
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
}

.gas-pressure-test-section-option span {
  overflow-wrap: anywhere;
  color: #26374e;
  font-size: .92rem;
  font-weight: 700;
}

.gas-pressure-test-section-option:has(input:checked) {
  border-color: rgba(184, 132, 0, .7);
  background: #fff9e8;
}

.gas-pressure-test-requirements {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.gas-pressure-test-requirements > div {
  padding: 17px;
  border: 1px solid rgba(23, 38, 60, .1);
  border-radius: 17px;
  background: #f7f9fc;
}

.gas-pressure-test-requirements span {
  display: block;
  color: #647286;
  font-size: .8rem;
  font-weight: 750;
}

.gas-pressure-test-requirements strong {
  display: block;
  margin-top: 7px;
  color: #17263c;
  font-size: 1.05rem;
}

.gas-pressure-test-confirmations {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.gas-pressure-test-confirmations label,
.gas-pressure-test-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(23, 38, 60, .11);
  border-radius: 16px;
  background: #f8fafc;
  color: #33445b;
  cursor: pointer;
}

.gas-pressure-test-confirmations input,
.gas-pressure-test-confirmation input,
.gas-pressure-test-section-option input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: #b88400;
}

.gas-pressure-test-confirmation {
  margin-top: 21px;
}

.gas-pressure-test-card textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
}

.gas-pressure-test-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.gas-pressure-test-actions p {
  flex-basis: 100%;
  min-height: 1.4em;
  margin: 2px 0 0;
  color: #526176;
  font-size: .9rem;
  font-weight: 700;
}

.gas-pressure-test-result {
  position: sticky;
  top: 20px;
  overflow: hidden;
  padding: 27px;
}

.gas-pressure-test-result > h2 {
  margin: 4px 0 20px;
  color: #17263c;
}

.gas-pressure-test-main-result {
  padding: 21px;
  border: 1px solid rgba(23, 38, 60, .1);
  border-radius: 19px;
  background: #f3f6fa;
}

.gas-pressure-test-main-result strong {
  display: block;
  color: #17263c;
  font-size: 1.25rem;
}

.gas-pressure-test-main-result span {
  display: block;
  margin-top: 8px;
  color: #59687d;
  line-height: 1.55;
}

body[data-pressure-test-rating="pass"]
.gas-pressure-test-main-result {
  border-color: rgba(22, 132, 83, .28);
  background: #edf9f3;
}

body[data-pressure-test-rating="pass"]
.gas-pressure-test-main-result strong {
  color: #126b45;
}

body[data-pressure-test-rating="fail"]
.gas-pressure-test-main-result {
  border-color: rgba(190, 48, 48, .3);
  background: #fff1f1;
}

body[data-pressure-test-rating="fail"]
.gas-pressure-test-main-result strong {
  color: #a62828;
}

.gas-pressure-test-result-values {
  display: grid;
  gap: 0;
  margin: 22px 0;
}

.gas-pressure-test-result-values > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(23, 38, 60, .09);
}

.gas-pressure-test-result-values dt {
  color: #647286;
}

.gas-pressure-test-result-values dd {
  margin: 0;
  color: #17263c;
  text-align: right;
  font-weight: 850;
}

.gas-pressure-test-checks {
  padding: 19px;
  border-radius: 18px;
  background: #f7f9fc;
}

.gas-pressure-test-checks > strong {
  color: #17263c;
}

.gas-pressure-test-checks ul {
  display: grid;
  gap: 10px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.gas-pressure-test-checks li {
  position: relative;
  padding-left: 27px;
  color: #5c6b7f;
  line-height: 1.45;
}

.gas-pressure-test-checks li::before {
  content: "·";
  position: absolute;
  left: 7px;
  top: 0;
  color: #8793a4;
  font-size: 1.2rem;
  font-weight: 900;
}

.gas-pressure-test-checks li[data-state="pass"] {
  color: #126b45;
}

.gas-pressure-test-checks li[data-state="pass"]::before {
  content: "✓";
  left: 3px;
}

.gas-pressure-test-checks li[data-state="fail"] {
  color: #a62828;
}

.gas-pressure-test-checks li[data-state="fail"]::before {
  content: "×";
  left: 4px;
}

.gas-pressure-test-result .gas-calculator-note {
  margin-top: 22px;
}

.gas-pressure-test-info-popover {
  width: min(390px, calc(100vw - 24px));
  z-index: 1000;
}

@media (max-width: 1080px) {
  .gas-pressure-test-form {
    grid-template-columns: 1fr;
  }

  .gas-pressure-test-result {
    position: static;
  }
}

@media (max-width: 760px) {
  .gas-pressure-test-workspace {
    width: min(100% - 24px, 1500px);
    padding-top: 24px;
  }

  .gas-pressure-test-card,
  .gas-pressure-test-result {
    padding: 20px;
    border-radius: 21px;
  }

  .gas-pressure-test-field-grid,
  .gas-pressure-test-requirements,
  .gas-pressure-test-section-options {
    grid-template-columns: 1fr;
  }

  .gas-pressure-test-import-box {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-pressure-test-import-box button {
    width: 100%;
  }

  .gas-pressure-test-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gas-pressure-test-actions button {
    width: 100%;
  }

  .gas-pressure-test-result-values > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .gas-pressure-test-result-values dd {
    text-align: left;
  }

  .gas-pressure-test-visual {
    min-height: 210px;
    padding: 24px 20px;
  }

  .gas-pressure-test-visual > div {
    grid-template-columns:
      auto minmax(70px, 1fr) auto;
  }
}

/* SHK_GAS_PRESSURE_TEST_CSS_END_20260806 */

/* SHK_GAS_METER_CSS_20260806 */

.gas-meter-page {
  background:
    linear-gradient(
      180deg,
      #f8fafc 0,
      #edf2f7 100%
    );
}

.gas-meter-hero {
  position: relative;
  overflow: hidden;
}

.gas-meter-hero::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -130px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(184, 132, 0, .18) 0,
      rgba(184, 132, 0, 0) 70%
    );
  pointer-events: none;
}

.gas-meter-visual {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 250px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .14),
      rgba(255, 255, 255, .04)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    0 24px 60px rgba(0, 0, 0, .18);
  text-align: center;
}

.gas-meter-visual-counter {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border: 4px solid rgba(255, 255, 255, .82);
  border-radius: 14px;
  background: #18283f;
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, .45),
    0 15px 32px rgba(0, 0, 0, .22);
}

.gas-meter-visual-counter span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 64px;
  border-radius: 6px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0,
      #e7ebef 48%,
      #cfd6dd 50%,
      #ffffff 100%
    );
  color: #17263c;
  font-size: 2rem;
  font-weight: 900;
  box-shadow:
    inset 0 0 0 1px rgba(23, 38, 60, .16);
}

.gas-meter-visual > strong {
  margin-top: 22px;
  color: #ffffff;
  font-size: clamp(2.8rem, 6vw, 4.7rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.gas-meter-visual > small {
  margin-top: 10px;
  color: rgba(255, 255, 255, .8);
  font-size: 1rem;
  font-weight: 750;
}

.gas-meter-workspace {
  width: min(1500px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

.gas-meter-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(330px, 420px);
  align-items: start;
  gap: 28px;
}

.gas-meter-input-column {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.gas-meter-card,
.gas-meter-result {
  border: 1px solid rgba(23, 38, 60, .1);
  border-radius: 26px;
  background: #ffffff;
  box-shadow:
    0 18px 48px rgba(23, 38, 60, .08);
}

.gas-meter-card {
  padding: 27px;
}

.gas-meter-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.gas-meter-card-heading .eyebrow {
  margin: 0;
}

.gas-meter-card-heading h2 {
  margin: 4px 0 0;
  color: #17263c;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.gas-meter-import-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 19px 20px;
  border: 1px solid rgba(184, 132, 0, .26);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 248, 225, .94),
      rgba(255, 255, 255, .98)
    );
}

.gas-meter-import-box strong {
  display: block;
  color: #17263c;
}

.gas-meter-import-box p {
  margin: 6px 0 0;
  color: #56657a;
  font-size: .9rem;
  line-height: 1.5;
}

.gas-meter-import-box code {
  color: #876100;
  font-weight: 800;
}

.gas-meter-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.gas-meter-card .field {
  min-width: 0;
}

.gas-meter-card .field > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gas-meter-card .field small {
  display: block;
  margin-top: 7px;
  color: #667488;
  font-size: .82rem;
  line-height: 1.45;
}

.gas-meter-reference-field,
.gas-meter-notes-field {
  grid-column: 1 / -1;
}

.gas-meter-confirmations {
  display: grid;
  gap: 12px;
}

.gas-meter-confirmations label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(23, 38, 60, .11);
  border-radius: 16px;
  background: #f8fafc;
  color: #33445b;
  line-height: 1.5;
  cursor: pointer;
}

.gas-meter-confirmations label:has(input:checked) {
  border-color: rgba(22, 132, 83, .28);
  background: #edf9f3;
}

.gas-meter-confirmations input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: #b88400;
}

.gas-meter-notes-field {
  display: block;
  margin-top: 22px;
}

.gas-meter-card textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
}

.gas-meter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.gas-meter-actions p {
  flex-basis: 100%;
  min-height: 1.4em;
  margin: 2px 0 0;
  color: #526176;
  font-size: .9rem;
  font-weight: 700;
}

.gas-meter-result {
  position: sticky;
  top: 20px;
  overflow: hidden;
  padding: 27px;
}

.gas-meter-result > h2 {
  margin: 4px 0 20px;
  color: #17263c;
}

.gas-meter-main-result {
  padding: 21px;
  border: 1px solid rgba(23, 38, 60, .1);
  border-radius: 19px;
  background: #f3f6fa;
}

.gas-meter-main-result strong {
  display: block;
  color: #17263c;
  font-size: 1.25rem;
}

.gas-meter-main-result span {
  display: block;
  margin-top: 8px;
  color: #59687d;
  line-height: 1.55;
}

body[data-gas-meter-rating="pass"]
.gas-meter-main-result {
  border-color: rgba(22, 132, 83, .28);
  background: #edf9f3;
}

body[data-gas-meter-rating="pass"]
.gas-meter-main-result strong {
  color: #126b45;
}

body[data-gas-meter-rating="fail"]
.gas-meter-main-result {
  border-color: rgba(190, 48, 48, .3);
  background: #fff1f1;
}

body[data-gas-meter-rating="fail"]
.gas-meter-main-result strong {
  color: #a62828;
}

.gas-meter-result-values {
  display: grid;
  gap: 0;
  margin: 22px 0;
}

.gas-meter-result-values > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(23, 38, 60, .09);
}

.gas-meter-result-values dt {
  color: #647286;
}

.gas-meter-result-values dd {
  margin: 0;
  color: #17263c;
  text-align: right;
  font-weight: 850;
}

.gas-meter-checks {
  padding: 19px;
  border-radius: 18px;
  background: #f7f9fc;
}

.gas-meter-checks > strong {
  color: #17263c;
}

.gas-meter-checks ul {
  display: grid;
  gap: 10px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.gas-meter-checks li {
  position: relative;
  padding-left: 27px;
  color: #5c6b7f;
  line-height: 1.45;
}

.gas-meter-checks li::before {
  content: "·";
  position: absolute;
  left: 7px;
  top: 0;
  color: #8793a4;
  font-size: 1.2rem;
  font-weight: 900;
}

.gas-meter-checks li[data-state="pass"] {
  color: #126b45;
}

.gas-meter-checks li[data-state="pass"]::before {
  content: "✓";
  left: 3px;
}

.gas-meter-checks li[data-state="fail"] {
  color: #a62828;
}

.gas-meter-checks li[data-state="fail"]::before {
  content: "×";
  left: 4px;
}

.gas-meter-result .gas-calculator-note {
  margin-top: 22px;
}

.gas-meter-info-popover {
  width: min(390px, calc(100vw - 24px));
  z-index: 1000;
}

@media (max-width: 1080px) {
  .gas-meter-form {
    grid-template-columns: 1fr;
  }

  .gas-meter-result {
    position: static;
  }
}

@media (max-width: 760px) {
  .gas-meter-workspace {
    width: min(100% - 24px, 1500px);
    padding-top: 24px;
  }

  .gas-meter-card,
  .gas-meter-result {
    padding: 20px;
    border-radius: 21px;
  }

  .gas-meter-field-grid {
    grid-template-columns: 1fr;
  }

  .gas-meter-reference-field,
  .gas-meter-notes-field {
    grid-column: auto;
  }

  .gas-meter-import-box {
    align-items: stretch;
    flex-direction: column;
  }

  .gas-meter-import-box button {
    width: 100%;
  }

  .gas-meter-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gas-meter-actions button {
    width: 100%;
  }

  .gas-meter-result-values > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .gas-meter-result-values dd {
    text-align: left;
  }

  .gas-meter-visual {
    min-height: 210px;
    padding: 24px 18px;
  }

  .gas-meter-visual-counter {
    gap: 4px;
    padding: 10px;
  }

  .gas-meter-visual-counter span {
    width: 36px;
    height: 54px;
    font-size: 1.65rem;
  }
}

@media (max-width: 390px) {
  .gas-meter-visual-counter span {
    width: 31px;
    height: 49px;
    font-size: 1.45rem;
  }
}

/* SHK_GAS_METER_CSS_END_20260806 */


/* SHK_ELECTRICAL_BASICS_CSS_20260806 */

.electrical-calculator-page {
  --electrical-navy: #10283a;
  --electrical-blue: #176b87;
  --electrical-cyan: #34b8d0;
  --electrical-yellow: #f3c84b;
  --electrical-pale: #eef9fb;
  --electrical-line: rgba(23, 107, 135, .18);
}

.electrical-basics-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(52, 184, 208, .2),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #10283a 0%,
      #174a60 58%,
      #176b87 100%
    );
}

.electrical-basics-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    );
  background-size: 38px 38px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 50%,
      #000
    );
}

.electrical-basics-hero .radiator-calculator-copy {
  position: relative;
  z-index: 2;
}

.electrical-basics-hero .eyebrow,
.electrical-basics-hero h1,
.electrical-basics-hero h1 small,
.electrical-basics-hero
  .radiator-calculator-copy > p,
.electrical-basics-hero .hub-back-link {
  color: #ffffff;
}

.electrical-basics-hero .hub-back-link {
  opacity: .82;
}

.electrical-basics-hero .hub-back-link:hover,
.electrical-basics-hero .hub-back-link:focus-visible {
  opacity: 1;
}

.electrical-basics-hero
  .radiator-calculator-highlights span {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(8px);
}

.electrical-basics-hero
  .radiator-calculator-highlights strong {
  color: var(--electrical-yellow);
}

.electrical-basics-hero-visual {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .13),
      rgba(255, 255, 255, .035)
    );
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

.electrical-basics-hero-visual > span {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .72;
}

.electrical-basics-hero-visual > div {
  display: grid;
  grid-template-columns: 78px 120px 78px;
  align-items: center;
}

.electrical-basics-hero-visual > div strong,
.electrical-basics-hero-visual > b {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(8, 31, 44, .68);
  color: var(--electrical-yellow);
  font-size: 2rem;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, .04),
    0 14px 32px rgba(0, 0, 0, .2);
}

.electrical-basics-hero-visual > div i {
  position: relative;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--electrical-cyan),
      var(--electrical-yellow)
    );
  box-shadow: 0 0 18px rgba(52, 184, 208, .8);
}

.electrical-basics-hero-visual > div i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--electrical-yellow);
  border-right: 3px solid var(--electrical-yellow);
  transform: translateY(-50%) rotate(45deg);
}

.electrical-basics-hero-visual > b {
  width: 92px;
  height: 92px;
  font-size: 2.2rem;
}

.electrical-basics-hero-visual > small {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--electrical-yellow);
  color: #18252d;
  font-size: 1rem;
  font-weight: 850;
}

.electrical-basics-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(340px, .98fr);
  gap: 24px;
  align-items: start;
}

.electrical-basics-input-card,
.electrical-basics-result-card {
  min-width: 0;
}

.electrical-basics-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.electrical-basics-fields > label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--electrical-navy);
  font-weight: 750;
}

.electrical-basics-fields .input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  background: #ffffff;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.electrical-basics-fields .input-unit:focus-within {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-basics-fields input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 15px 14px;
  background: transparent;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-basics-fields .fixed-unit {
  display: grid;
  place-items: center;
  min-width: 54px;
  padding: 0 13px;
  border-left: 1px solid var(--electrical-line);
  background: var(--electrical-pale);
  color: var(--electrical-blue);
  font-weight: 850;
}

.electrical-basics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.electrical-basics-message {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 13px;
  background: var(--electrical-pale);
  color: #46606e;
  font-size: .9rem;
  font-weight: 700;
}

.electrical-basics-message[data-state="success"] {
  border-color: rgba(38, 142, 94, .25);
  background: #edf9f2;
  color: #176b42;
}

.electrical-basics-message[data-state="error"] {
  border-color: rgba(185, 61, 61, .25);
  background: #fff1f1;
  color: #9b2f2f;
}

.electrical-basics-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.electrical-basics-results > div {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--electrical-line);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--electrical-pale)
    );
}

.electrical-basics-results span,
.electrical-basics-results small {
  display: block;
  color: #627681;
}

.electrical-basics-results span {
  font-size: .82rem;
  font-weight: 750;
}

.electrical-basics-results strong {
  display: block;
  overflow-wrap: anywhere;
  margin: 8px 0 3px;
  color: var(--electrical-blue);
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.electrical-basics-results small {
  font-size: .74rem;
  font-weight: 700;
}

.electrical-basics-formula-card {
  margin-top: 18px;
  padding: 18px;
  border-left: 4px solid var(--electrical-yellow);
  border-radius: 4px 16px 16px 4px;
  background: #f8fafb;
}

.electrical-basics-formula-card > span {
  display: block;
  color: #657985;
  font-size: .78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.electrical-basics-formula-card > strong {
  display: block;
  margin: 8px 0;
  color: var(--electrical-navy);
  font-size: 1.05rem;
}

.electrical-basics-formula-card > p {
  margin: 0;
  color: #506773;
  line-height: 1.65;
}

.electrical-basics-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 26px auto 0;
  padding: 0 22px 56px;
}

.electrical-basics-principles > div {
  padding: 22px;
  border: 1px solid var(--electrical-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(16, 40, 58, .07);
}

.electrical-basics-principles > div > span {
  color: var(--electrical-cyan);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.electrical-basics-principles strong {
  display: block;
  margin: 10px 0 8px;
  color: var(--electrical-navy);
}

.electrical-basics-principles p {
  margin: 0;
  color: #617682;
  line-height: 1.6;
  font-size: .9rem;
}

.electrical-info-popover {
  position: fixed;
  z-index: 1200;
  max-height: min(520px, calc(100vh - 32px));
  overflow: auto;
}

.electrical-info-popover > strong {
  display: block;
  margin-top: 15px;
  color: var(--electrical-navy);
}

.electrical-info-popover > code {
  display: block;
  margin-top: 7px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--electrical-pale);
  color: var(--electrical-blue);
  font-family: inherit;
  font-weight: 850;
}

.electrical-info-popover > p {
  line-height: 1.6;
}

@media (max-width: 940px) {
  .electrical-basics-layout {
    grid-template-columns: 1fr;
  }

  .electrical-basics-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .electrical-basics-hero-visual {
    min-height: 270px;
    padding: 24px 18px;
  }

  .electrical-basics-hero-visual > div {
    grid-template-columns: 64px 82px 64px;
  }

  .electrical-basics-hero-visual > div strong {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
  }

  .electrical-basics-hero-visual > b {
    width: 76px;
    height: 76px;
    font-size: 1.8rem;
  }

  .electrical-basics-fields,
  .electrical-basics-results,
  .electrical-basics-principles {
    grid-template-columns: 1fr;
  }

  .electrical-basics-actions {
    display: grid;
  }

  .electrical-basics-actions button {
    width: 100%;
  }
}


/* SHK_ELECTRICAL_OVERVIEW_CSS_20260806 */

.electrical-hub-page {
  --electrical-navy: #10283a;
  --electrical-blue: #176b87;
  --electrical-cyan: #34b8d0;
  --electrical-yellow: #f3c84b;
  --electrical-pale: #eef9fb;
  --electrical-line: rgba(23, 107, 135, .18);
}

.electrical-hub-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(52, 184, 208, .24),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #10283a 0%,
      #174a60 56%,
      #176b87 100%
    );
}

.electrical-hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .045) 1px,
      transparent 1px
    );
  background-size: 42px 42px;
  mask-image:
    linear-gradient(
      90deg,
      #000,
      rgba(0, 0, 0, .5),
      transparent
    );
}

.electrical-hub-hero .heating-hub-copy,
.electrical-hub-hero .heating-hub-visual {
  position: relative;
  z-index: 2;
}

.electrical-hub-hero .eyebrow,
.electrical-hub-hero h1,
.electrical-hub-hero .heating-hub-lead,
.electrical-hub-hero .hub-back-link {
  color: #ffffff;
}

.electrical-hub-hero .hub-back-link {
  opacity: .82;
}

.electrical-hub-hero .hub-back-link:hover,
.electrical-hub-hero .hub-back-link:focus-visible {
  opacity: 1;
}

.electrical-hero-video {
  border-color: rgba(255, 255, 255, .18);
  background: #0b2130;
  box-shadow:
    0 30px 75px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.electrical-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.electrical-hero-video
  .heating-hero-video-shade {
  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 27, .04) 25%,
      rgba(4, 18, 27, .78) 100%
    );
}

.electrical-hero-video
  .heating-hero-video-caption span {
  color: var(--electrical-yellow);
}

.electrical-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.electrical-tool-card {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(190px, .88fr);
  min-height: 310px;
  overflow: hidden;
  border: 1px solid var(--electrical-line);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8fcfd 58%,
      var(--electrical-pale) 100%
    );
  box-shadow:
    0 18px 48px rgba(16, 40, 58, .08);
  color: inherit;
  text-decoration: none;
}

.electrical-tool-card::before {
  content: "";
  position: absolute;
  top: -95px;
  right: -85px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(52, 184, 208, .14),
      transparent 68%
    );
  pointer-events: none;
}

.electrical-tool-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px;
}

.electrical-tool-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--electrical-navy);
  color: #ffffff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.electrical-tool-category {
  margin: 20px 0 7px;
  color: var(--electrical-blue);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.electrical-tool-card h3 {
  margin: 0;
  color: var(--electrical-navy);
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  line-height: 1.18;
}

.electrical-tool-card h3 + p {
  margin: 13px 0 22px;
  color: #5b707c;
  line-height: 1.65;
}

.electrical-tool-link {
  margin-top: auto;
  color: var(--electrical-blue);
  font-size: .88rem;
  font-weight: 850;
}

.electrical-tool-media {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-width: 0;
  padding: 25px;
  border-left: 1px solid var(--electrical-line);
  background:
    linear-gradient(
      145deg,
      rgba(16, 40, 58, .97),
      rgba(23, 107, 135, .94)
    );
  text-align: center;
}

.electrical-tool-media::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  pointer-events: none;
}

.electrical-tool-media strong {
  position: relative;
  z-index: 2;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--electrical-yellow);
  font-size: clamp(1.05rem, 2vw, 1.38rem);
  line-height: 1.4;
}

.electrical-tool-media span {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, .72);
  font-size: .77rem;
  font-weight: 750;
  line-height: 1.45;
}

.electrical-tool-card-active {
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.electrical-tool-card-active:hover {
  transform: translateY(-5px);
  border-color: rgba(52, 184, 208, .52);
  box-shadow:
    0 26px 65px rgba(16, 40, 58, .15);
}

.electrical-tool-card-active:focus-visible {
  outline: 4px solid rgba(52, 184, 208, .3);
  outline-offset: 4px;
}

.electrical-tool-card-active
  .electrical-tool-link {
  color: var(--electrical-blue);
}

.electrical-tool-card-planned {
  opacity: .78;
}

.electrical-tool-card-planned
  .electrical-tool-number {
  background: #687b86;
}

.electrical-tool-card-planned
  .electrical-tool-media {
  background:
    linear-gradient(
      145deg,
      #425661,
      #647984
    );
}

.electrical-tool-card-planned
  .electrical-tool-media strong {
  color: #e5edf0;
}

.electrical-tool-card-planned
  .electrical-tool-link {
  color: #73858e;
}

@media (max-width: 1020px) {
  .electrical-tool-card {
    grid-template-columns: 1fr;
  }

  .electrical-tool-media {
    min-height: 128px;
    border-top: 1px solid var(--electrical-line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .electrical-tool-grid {
    grid-template-columns: 1fr;
  }

  .electrical-tool-card {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .electrical-tool-copy {
    padding: 22px 20px;
  }

  .electrical-tool-media {
    padding: 24px 20px;
  }
}

/* SHK_HOME_UNIFIED_VIDEO_CARDS_FIX_20260806 */

.home-domain-video-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 310px !important;
  padding: 30px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 27px !important;
  color: white !important;
  text-decoration: none !important;
  background:
    linear-gradient(
      135deg,
      #071827,
      #11324a
    ) !important;
  box-shadow:
    0 25px 58px rgba(4, 22, 36, .20),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease !important;
}

a.home-domain-video-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow:
    0 34px 76px rgba(4, 22, 36, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

a.home-domain-video-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .88);
  outline-offset: 4px;
}

.home-domain-video-card > *:not(.home-domain-card-video):not(.home-domain-video-shade) {
  position: relative;
  z-index: 2;
}

.home-domain-card-video,
.home-domain-video-shade {
  position: absolute !important;
  inset: 0 !important;
}

.home-domain-card-video {
  z-index: -3 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none !important;
}

.home-domain-video-shade {
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(4, 15, 27, .72) 0%,
      rgba(4, 15, 27, .60) 34%,
      rgba(4, 15, 27, .34) 68%,
      rgba(4, 15, 27, 0) 100%
    ) !important;
}

.home-domain-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .04),
      transparent 25%,
      rgba(2, 10, 18, .18)
    );
}

.home-domain-video-card .home-domain-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 950;
  color: white !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.home-domain-video-card span {
  color: rgba(255, 255, 255, .74) !important;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .30);
}

.home-domain-video-card h3 {
  margin: 9px 0 0;
  color: white !important;
  font-size: 2rem !important;
  letter-spacing: -.04em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .42);
}

.home-domain-video-card p {
  max-width: 520px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .84) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .46);
}

.home-domain-video-card > strong {
  color: white !important;
  font-size: .85rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .52);
}

@media (max-width: 760px) {
  .home-domain-video-card {
    min-height: 300px !important;
    border-radius: 21px !important;
  }

  .home-domain-video-card h3 {
    font-size: 2rem !important;
  }

  .home-domain-video-shade {
    background:
      linear-gradient(
        90deg,
        rgba(4, 15, 27, .78) 0%,
        rgba(4, 15, 27, .66) 42%,
        rgba(4, 15, 27, .34) 76%,
        rgba(4, 15, 27, .08) 100%
      ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-domain-card-video {
    display: none !important;
  }

  a.home-domain-video-card:hover {
    transform: none !important;
  }
}

/* SHK_HOME_VIDEO_CARD_DIAGONAL_OVERLAY_20260806 */

.home-domain-card-video {
  filter:
    brightness(.80)
    saturate(.92)
    contrast(1.03);
}

.home-domain-video-shade {
  background:
    linear-gradient(
      135deg,
      rgba(4, 15, 27, .96) 0%,
      rgba(4, 15, 27, .88) 16%,
      rgba(4, 15, 27, .76) 34%,
      rgba(4, 15, 27, .54) 52%,
      rgba(4, 15, 27, .24) 74%,
      rgba(4, 15, 27, .05) 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 15, 27, .26) 0%,
      rgba(4, 15, 27, .12) 40%,
      rgba(4, 15, 27, 0) 72%
    ) !important;
}

.home-domain-video-card::after {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .03),
      transparent 22%,
      rgba(2, 10, 18, .16)
    ) !important;
}

@media (max-width: 760px) {
  .home-domain-video-shade {
    background:
      linear-gradient(
        135deg,
        rgba(4, 15, 27, .97) 0%,
        rgba(4, 15, 27, .90) 18%,
        rgba(4, 15, 27, .78) 38%,
        rgba(4, 15, 27, .58) 58%,
        rgba(4, 15, 27, .28) 78%,
        rgba(4, 15, 27, .08) 100%
      ),
      linear-gradient(
        90deg,
        rgba(4, 15, 27, .22) 0%,
        rgba(4, 15, 27, .10) 44%,
        rgba(4, 15, 27, 0) 76%
      ) !important;
  }
}

/* SHK_HOME_VIDEO_CARD_LEFT_VISIBILITY_REDUCED_20260806 */

.home-domain-card-video {
  filter:
    brightness(.76)
    saturate(.90)
    contrast(1.03);
}

.home-domain-video-shade {
  background:
    linear-gradient(
      135deg,
      rgba(4, 15, 27, .985) 0%,
      rgba(4, 15, 27, .95) 14%,
      rgba(4, 15, 27, .88) 28%,
      rgba(4, 15, 27, .74) 46%,
      rgba(4, 15, 27, .48) 66%,
      rgba(4, 15, 27, .16) 86%,
      rgba(4, 15, 27, .03) 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 15, 27, .40) 0%,
      rgba(4, 15, 27, .24) 34%,
      rgba(4, 15, 27, .10) 58%,
      rgba(4, 15, 27, 0) 78%
    ) !important;
}

@media (max-width: 760px) {
  .home-domain-video-shade {
    background:
      linear-gradient(
        135deg,
        rgba(4, 15, 27, .99) 0%,
        rgba(4, 15, 27, .96) 18%,
        rgba(4, 15, 27, .90) 34%,
        rgba(4, 15, 27, .78) 52%,
        rgba(4, 15, 27, .54) 70%,
        rgba(4, 15, 27, .18) 88%,
        rgba(4, 15, 27, .05) 100%
      ),
      linear-gradient(
        90deg,
        rgba(4, 15, 27, .36) 0%,
        rgba(4, 15, 27, .20) 38%,
        rgba(4, 15, 27, .08) 62%,
        rgba(4, 15, 27, 0) 82%
      ) !important;
  }
}



/* SHK_ELECTRICAL_POWER_CSS_20260806 */

.electrical-power-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(52, 184, 208, .22),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #10283a 0%,
      #174a60 56%,
      #176b87 100%
    );
}

.electrical-power-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 48%,
      #000
    );
}

.electrical-power-hero .radiator-calculator-copy,
.electrical-power-hero-visual {
  position: relative;
  z-index: 2;
}

.electrical-power-hero .eyebrow,
.electrical-power-hero h1,
.electrical-power-hero h1 small,
.electrical-power-hero
  .radiator-calculator-copy > p,
.electrical-power-hero .hub-back-link {
  color: #ffffff;
}

.electrical-power-hero .hub-back-link {
  opacity: .82;
}

.electrical-power-hero
  .radiator-calculator-highlights span {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
}

.electrical-power-hero
  .radiator-calculator-highlights strong {
  color: var(--electrical-yellow);
}

.electrical-power-hero-visual {
  width: min(100%, 430px);
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .13),
      rgba(255, 255, 255, .035)
    );
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

.electrical-power-hero-visual > span {
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

.electrical-power-phases {
  display: flex;
  gap: 14px;
}

.electrical-power-phases i {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  background: rgba(8, 31, 44, .7);
  color: var(--electrical-yellow);
  font-style: normal;
  font-weight: 900;
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, .035),
    0 12px 28px rgba(0, 0, 0, .2);
}

.electrical-power-hero-visual > strong {
  color: #ffffff;
  font-size: clamp(1.2rem, 3vw, 1.75rem);
}

.electrical-power-hero-visual > b {
  color: var(--electrical-cyan);
  font-size: 1.05rem;
}

.electrical-power-hero-visual > small {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--electrical-yellow);
  color: #18252d;
  font-size: .9rem;
  font-weight: 850;
}

.electrical-power-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(360px, .98fr);
  gap: 24px;
  align-items: start;
}

.electrical-power-input-column {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.electrical-power-fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.electrical-power-fields > label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: var(--electrical-navy);
  font-weight: 750;
}

.electrical-power-fields select,
.electrical-power-fields > label > input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  outline: 0;
  background: #ffffff;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-power-fields select:focus,
.electrical-power-fields > label > input:focus {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-power-fields .input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  background: #ffffff;
}

.electrical-power-fields .input-unit:focus-within {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-power-fields .input-unit input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 15px 14px;
  background: transparent;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-power-fields .fixed-unit {
  display: grid;
  place-items: center;
  min-width: 56px;
  padding: 0 13px;
  border-left: 1px solid var(--electrical-line);
  background: var(--electrical-pale);
  color: var(--electrical-blue);
  font-weight: 850;
}

.electrical-power-fields label > small {
  color: #6a7e89;
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.45;
}

.electrical-power-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.electrical-power-message {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 13px;
  background: var(--electrical-pale);
  color: #46606e;
  font-size: .9rem;
  font-weight: 700;
}

.electrical-power-message[data-state="success"] {
  border-color: rgba(38, 142, 94, .25);
  background: #edf9f2;
  color: #176b42;
}

.electrical-power-message[data-state="error"] {
  border-color: rgba(185, 61, 61, .25);
  background: #fff1f1;
  color: #9b2f2f;
}

.electrical-power-result-card {
  min-width: 0;
}

.electrical-power-main-result {
  margin-top: 24px;
  padding: 24px;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      var(--electrical-navy),
      var(--electrical-blue)
    );
  color: #ffffff;
  text-align: center;
  box-shadow:
    0 18px 38px rgba(16, 40, 58, .18);
}

.electrical-power-main-result span,
.electrical-power-main-result small {
  display: block;
}

.electrical-power-main-result span {
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-power-main-result strong {
  display: block;
  margin: 9px 0 4px;
  color: var(--electrical-yellow);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

.electrical-power-main-result small {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
}

.electrical-power-results {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.electrical-power-results > div {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--electrical-line);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--electrical-pale)
    );
}

.electrical-power-results span,
.electrical-power-results small {
  display: block;
  color: #627681;
}

.electrical-power-results span {
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
}

.electrical-power-results strong {
  display: block;
  overflow-wrap: anywhere;
  margin: 8px 0 3px;
  color: var(--electrical-blue);
  font-size: clamp(1.22rem, 3vw, 1.8rem);
}

.electrical-power-results small {
  font-size: .72rem;
  font-weight: 700;
}

.electrical-power-formula-card {
  margin-top: 18px;
  padding: 18px;
  border-left: 4px solid var(--electrical-yellow);
  border-radius: 4px 16px 16px 4px;
  background: #f8fafb;
}

.electrical-power-formula-card > span {
  display: block;
  color: #657985;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-power-formula-card > strong {
  display: block;
  margin: 8px 0;
  color: var(--electrical-navy);
  font-size: 1.02rem;
}

.electrical-power-formula-card > p {
  margin: 0;
  color: #506773;
  line-height: 1.65;
}

.electrical-power-info-popover {
  position: fixed;
  z-index: 1200;
  max-height: min(520px, calc(100vh - 32px));
  overflow: auto;
}

@media (max-width: 960px) {
  .electrical-power-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .electrical-power-hero-visual {
    min-height: 270px;
    padding: 24px 18px;
  }

  .electrical-power-phases {
    gap: 9px;
  }

  .electrical-power-phases i {
    width: 54px;
    height: 54px;
  }

  .electrical-power-fields,
  .electrical-power-results {
    grid-template-columns: 1fr;
  }

  .electrical-power-actions {
    display: grid;
  }

  .electrical-power-actions button {
    width: 100%;
  }
}


/* SHK_ELECTRICAL_ENERGY_CSS_20260806 */

.electrical-energy-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(52, 184, 208, .22),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #10283a 0%,
      #174a60 56%,
      #176b87 100%
    );
}

.electrical-energy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 48%,
      #000
    );
}

.electrical-energy-hero .radiator-calculator-copy,
.electrical-energy-hero-visual {
  position: relative;
  z-index: 2;
}

.electrical-energy-hero .eyebrow,
.electrical-energy-hero h1,
.electrical-energy-hero h1 small,
.electrical-energy-hero
  .radiator-calculator-copy > p,
.electrical-energy-hero .hub-back-link {
  color: #ffffff;
}

.electrical-energy-hero .hub-back-link {
  opacity: .82;
}

.electrical-energy-hero
  .radiator-calculator-highlights span {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
}

.electrical-energy-hero
  .radiator-calculator-highlights strong {
  color: var(--electrical-yellow);
}

.electrical-energy-hero-visual {
  width: min(100%, 430px);
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .13),
      rgba(255, 255, 255, .035)
    );
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

.electrical-energy-hero-visual > span {
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

.electrical-energy-hero-visual > div {
  display: grid;
  grid-template-columns: 78px 110px 78px;
  align-items: center;
}

.electrical-energy-hero-visual > div strong {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  background: rgba(8, 31, 44, .7);
  color: var(--electrical-yellow);
  font-size: 2rem;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, .04),
    0 14px 32px rgba(0, 0, 0, .2);
}

.electrical-energy-hero-visual > div i {
  position: relative;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--electrical-cyan),
      var(--electrical-yellow)
    );
  box-shadow:
    0 0 18px rgba(52, 184, 208, .8);
}

.electrical-energy-hero-visual > div i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--electrical-yellow);
  border-right: 3px solid var(--electrical-yellow);
  transform: translateY(-50%) rotate(45deg);
}

.electrical-energy-hero-visual > b {
  color: #ffffff;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.electrical-energy-hero-visual > small {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--electrical-yellow);
  color: #18252d;
  font-size: .9rem;
  font-weight: 850;
}

.electrical-energy-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(360px, .98fr);
  gap: 24px;
  align-items: start;
}

.electrical-energy-input-column {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.electrical-energy-fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.electrical-energy-wide-field {
  grid-column: 1 / -1;
}

.electrical-energy-fields > label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: var(--electrical-navy);
  font-weight: 750;
}

.electrical-energy-fields > label > input,
.electrical-energy-fields > label > select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  outline: 0;
  background: #ffffff;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-energy-fields > label > input:focus,
.electrical-energy-fields > label > select:focus {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-energy-fields .input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  background: #ffffff;
}

.electrical-energy-fields .input-unit:focus-within {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-energy-fields .input-unit input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 15px 14px;
  background: transparent;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-energy-fields .input-unit select,
.electrical-energy-fields .fixed-unit {
  min-width: 78px;
  border: 0;
  border-left: 1px solid var(--electrical-line);
  background: var(--electrical-pale);
  color: var(--electrical-blue);
  font: inherit;
  font-weight: 850;
}

.electrical-energy-fields .input-unit select {
  padding: 0 10px;
  outline: 0;
}

.electrical-energy-fields .fixed-unit {
  display: grid;
  place-items: center;
  padding: 0 13px;
}

.electrical-energy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.electrical-energy-message {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 13px;
  background: var(--electrical-pale);
  color: #46606e;
  font-size: .9rem;
  font-weight: 700;
}

.electrical-energy-message[data-state="success"] {
  border-color: rgba(38, 142, 94, .25);
  background: #edf9f2;
  color: #176b42;
}

.electrical-energy-message[data-state="error"] {
  border-color: rgba(185, 61, 61, .25);
  background: #fff1f1;
  color: #9b2f2f;
}

.electrical-energy-result-card {
  min-width: 0;
}

.electrical-energy-main-result {
  margin-top: 24px;
  padding: 24px;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      var(--electrical-navy),
      var(--electrical-blue)
    );
  color: #ffffff;
  text-align: center;
  box-shadow:
    0 18px 38px rgba(16, 40, 58, .18);
}

.electrical-energy-main-result span,
.electrical-energy-main-result small {
  display: block;
}

.electrical-energy-main-result span {
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-energy-main-result strong {
  display: block;
  margin: 9px 0 4px;
  overflow-wrap: anywhere;
  color: var(--electrical-yellow);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

.electrical-energy-main-result small {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
}

.electrical-energy-results {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.electrical-energy-results > div {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--electrical-line);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--electrical-pale)
    );
}

.electrical-energy-results span,
.electrical-energy-results small {
  display: block;
  color: #627681;
}

.electrical-energy-results span {
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
}

.electrical-energy-results strong {
  display: block;
  margin: 8px 0 3px;
  overflow-wrap: anywhere;
  color: var(--electrical-blue);
  font-size: clamp(1.2rem, 3vw, 1.78rem);
}

.electrical-energy-results small {
  font-size: .72rem;
  font-weight: 700;
}

.electrical-energy-year-cost {
  margin-top: 18px;
  padding: 21px;
  border: 1px solid rgba(243, 200, 75, .42);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #fffdf3,
      #fff7d4
    );
  text-align: center;
}

.electrical-energy-year-cost span,
.electrical-energy-year-cost small {
  display: block;
  color: #6d664d;
}

.electrical-energy-year-cost span {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.electrical-energy-year-cost strong {
  display: block;
  margin: 9px 0 4px;
  overflow-wrap: anywhere;
  color: #8a6700;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
}

.electrical-energy-year-cost small {
  font-weight: 700;
}

.electrical-energy-formula-card {
  margin-top: 18px;
  padding: 18px;
  border-left: 4px solid var(--electrical-yellow);
  border-radius: 4px 16px 16px 4px;
  background: #f8fafb;
}

.electrical-energy-formula-card > span {
  display: block;
  color: #657985;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-energy-formula-card > strong {
  display: block;
  margin: 8px 0;
  color: var(--electrical-navy);
  font-size: 1.02rem;
}

.electrical-energy-formula-card > p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #506773;
  line-height: 1.65;
}

.electrical-energy-info-popover {
  position: fixed;
  z-index: 1200;
  max-height: min(520px, calc(100vh - 32px));
  overflow: auto;
}

@media (max-width: 960px) {
  .electrical-energy-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .electrical-energy-hero-visual {
    min-height: 270px;
    padding: 24px 18px;
  }

  .electrical-energy-hero-visual > div {
    grid-template-columns: 64px 82px 64px;
  }

  .electrical-energy-hero-visual > div strong {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
  }

  .electrical-energy-fields,
  .electrical-energy-results {
    grid-template-columns: 1fr;
  }

  .electrical-energy-wide-field {
    grid-column: auto;
  }

  .electrical-energy-actions {
    display: grid;
  }

  .electrical-energy-actions button {
    width: 100%;
  }
}


/* SHK_ELECTRICAL_VOLTAGE_DROP_CSS_20260806 */

.electrical-voltage-drop-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(243, 200, 75, .2),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #10283a 0%,
      #174a60 56%,
      #176b87 100%
    );
}

.electrical-voltage-drop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
}

.electrical-voltage-drop-hero
  .radiator-calculator-copy,
.electrical-voltage-drop-hero-visual {
  position: relative;
  z-index: 2;
}

.electrical-voltage-drop-hero .eyebrow,
.electrical-voltage-drop-hero h1,
.electrical-voltage-drop-hero h1 small,
.electrical-voltage-drop-hero
  .radiator-calculator-copy > p,
.electrical-voltage-drop-hero .hub-back-link {
  color: #ffffff;
}

.electrical-voltage-drop-hero .hub-back-link {
  opacity: .82;
}

.electrical-voltage-drop-hero
  .radiator-calculator-highlights span {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
}

.electrical-voltage-drop-hero
  .radiator-calculator-highlights strong {
  color: var(--electrical-yellow);
}

.electrical-voltage-drop-hero-visual {
  width: min(100%, 430px);
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .13),
      rgba(255, 255, 255, .035)
    );
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

.electrical-voltage-drop-hero-visual > span {
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

.electrical-voltage-drop-hero-visual > div {
  display: grid;
  grid-template-columns: 78px 110px 78px;
  align-items: center;
}

.electrical-voltage-drop-hero-visual > div strong {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  background: rgba(8, 31, 44, .7);
  color: var(--electrical-yellow);
  font-size: 1.65rem;
}

.electrical-voltage-drop-hero-visual > div i {
  position: relative;
  height: 4px;
  background:
    linear-gradient(
      90deg,
      var(--electrical-cyan),
      var(--electrical-yellow)
    );
  box-shadow:
    0 0 18px rgba(52, 184, 208, .8);
}

.electrical-voltage-drop-hero-visual > div i::before,
.electrical-voltage-drop-hero-visual > div i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--electrical-yellow);
  transform: translateY(-50%);
}

.electrical-voltage-drop-hero-visual > div i::before {
  left: -2px;
}

.electrical-voltage-drop-hero-visual > div i::after {
  right: -2px;
}

.electrical-voltage-drop-hero-visual > b {
  color: #ffffff;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
}

.electrical-voltage-drop-hero-visual > small {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--electrical-yellow);
  color: #18252d;
  font-size: .9rem;
  font-weight: 850;
}

.electrical-voltage-drop-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(360px, .96fr);
  gap: 24px;
  align-items: start;
}

.electrical-voltage-drop-input-column {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.electrical-voltage-drop-fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.electrical-voltage-drop-wide-field {
  grid-column: 1 / -1;
}

.electrical-voltage-drop-fields > label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: var(--electrical-navy);
  font-weight: 750;
}

.electrical-voltage-drop-fields > label > small {
  color: #6d818c;
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.45;
}

.electrical-voltage-drop-fields > label > input,
.electrical-voltage-drop-fields > label > select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  outline: 0;
  background: #ffffff;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-voltage-drop-fields > label > input:focus,
.electrical-voltage-drop-fields > label > select:focus {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-voltage-drop-fields .input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  background: #ffffff;
}

.electrical-voltage-drop-fields
  .input-unit:focus-within {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-voltage-drop-fields .input-unit input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 15px 14px;
  background: transparent;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-voltage-drop-fields .fixed-unit {
  display: grid;
  min-width: 68px;
  place-items: center;
  padding: 0 13px;
  border-left: 1px solid var(--electrical-line);
  background: var(--electrical-pale);
  color: var(--electrical-blue);
  font-weight: 850;
}

.electrical-voltage-drop-model-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--electrical-cyan);
  border-radius: 4px 14px 14px 4px;
  background: var(--electrical-pale);
  color: #506773;
  line-height: 1.6;
}

.electrical-voltage-drop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.electrical-voltage-drop-message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 13px;
  background: var(--electrical-pale);
  color: #46606e;
  font-size: .9rem;
  font-weight: 700;
}

.electrical-voltage-drop-message[data-state="success"] {
  border-color: rgba(38, 142, 94, .25);
  background: #edf9f2;
  color: #176b42;
}

.electrical-voltage-drop-message[data-state="error"] {
  border-color: rgba(185, 61, 61, .25);
  background: #fff1f1;
  color: #9b2f2f;
}

.electrical-voltage-drop-result-card {
  position: sticky;
  top: 22px;
  min-width: 0;
}

.electrical-voltage-drop-main-result {
  margin-top: 24px;
  padding: 24px;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      var(--electrical-navy),
      var(--electrical-blue)
    );
  color: #ffffff;
  text-align: center;
  box-shadow:
    0 18px 38px rgba(16, 40, 58, .18);
}

.electrical-voltage-drop-main-result span,
.electrical-voltage-drop-main-result small {
  display: block;
}

.electrical-voltage-drop-main-result span {
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-voltage-drop-main-result strong {
  display: block;
  margin: 9px 0 4px;
  overflow-wrap: anywhere;
  color: var(--electrical-yellow);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

.electrical-voltage-drop-main-result small {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
}

.electrical-voltage-drop-results {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.electrical-voltage-drop-results > div {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--electrical-line);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--electrical-pale)
    );
}

.electrical-voltage-drop-results span,
.electrical-voltage-drop-results small {
  display: block;
  color: #627681;
}

.electrical-voltage-drop-results span {
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
}

.electrical-voltage-drop-results strong {
  display: block;
  margin: 8px 0 3px;
  overflow-wrap: anywhere;
  color: var(--electrical-blue);
  font-size: clamp(1.15rem, 3vw, 1.65rem);
}

.electrical-voltage-drop-results small {
  overflow-wrap: anywhere;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.45;
}

.electrical-voltage-drop-comparison {
  margin-top: 18px;
  padding: 19px;
  border: 1px solid var(--electrical-line);
  border-radius: 17px;
  background: var(--electrical-pale);
}

.electrical-voltage-drop-comparison span {
  display: block;
  color: #627681;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.electrical-voltage-drop-comparison strong {
  display: block;
  margin: 7px 0;
  color: var(--electrical-blue);
  font-size: 1.35rem;
}

.electrical-voltage-drop-comparison p {
  margin: 0;
  color: #506773;
  line-height: 1.55;
}

.electrical-voltage-drop-comparison[data-state="success"] {
  border-color: rgba(38, 142, 94, .3);
  background: #edf9f2;
}

.electrical-voltage-drop-comparison[data-state="success"]
  strong {
  color: #176b42;
}

.electrical-voltage-drop-comparison[data-state="error"] {
  border-color: rgba(185, 61, 61, .3);
  background: #fff1f1;
}

.electrical-voltage-drop-comparison[data-state="error"]
  strong {
  color: #9b2f2f;
}

.electrical-voltage-drop-formula-card {
  margin-top: 18px;
  padding: 18px;
  border-left: 4px solid var(--electrical-yellow);
  border-radius: 4px 16px 16px 4px;
  background: #f8fafb;
}

.electrical-voltage-drop-formula-card > span {
  display: block;
  color: #657985;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-voltage-drop-formula-card > strong {
  display: block;
  margin: 8px 0;
  overflow-wrap: anywhere;
  color: var(--electrical-navy);
  font-size: 1rem;
  line-height: 1.5;
}

.electrical-voltage-drop-formula-card > p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #506773;
  line-height: 1.65;
}

.electrical-voltage-drop-info-popover {
  position: fixed;
  z-index: 1200;
  max-height: min(540px, calc(100vh - 32px));
  overflow: auto;
}

.electrical-voltage-drop-info-popover code {
  display: block;
  margin: 8px 0 16px;
  padding: 11px 12px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-radius: 10px;
  background: #eef4f6;
  color: var(--electrical-navy);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .electrical-voltage-drop-layout {
    grid-template-columns: 1fr;
  }

  .electrical-voltage-drop-result-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .electrical-voltage-drop-hero-visual {
    min-height: 270px;
    padding: 24px 18px;
  }

  .electrical-voltage-drop-hero-visual > div {
    grid-template-columns: 64px 82px 64px;
  }

  .electrical-voltage-drop-hero-visual
    > div strong {
    width: 64px;
    height: 64px;
    font-size: 1.35rem;
  }

  .electrical-voltage-drop-fields,
  .electrical-voltage-drop-results {
    grid-template-columns: 1fr;
  }

  .electrical-voltage-drop-wide-field {
    grid-column: auto;
  }

  .electrical-voltage-drop-actions {
    display: grid;
  }

  .electrical-voltage-drop-actions button {
    width: 100%;
  }

  .electrical-voltage-drop-main-result {
    padding: 21px 16px;
  }
}


/* SHK_COPY_PROTECTION_LEGAL_CSS_20260806 */
.footer-copyright {
  margin: 12px 0 0;
  color: #ffffff;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
  opacity: .82;
}
/* SHK_COPY_PROTECTION_LEGAL_CSS_END_20260806 */


/* SHK_ELECTRICAL_CABLE_SIZING_CSS_20260806 */

.electrical-cable-sizing-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(243, 200, 75, .22),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #10283a 0%,
      #174a60 56%,
      #176b87 100%
    );
}

.electrical-cable-sizing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
}

.electrical-cable-sizing-hero
  .radiator-calculator-copy,
.electrical-cable-sizing-hero-visual {
  position: relative;
  z-index: 2;
}

.electrical-cable-sizing-hero .eyebrow,
.electrical-cable-sizing-hero h1,
.electrical-cable-sizing-hero h1 small,
.electrical-cable-sizing-hero
  .radiator-calculator-copy > p,
.electrical-cable-sizing-hero .hub-back-link {
  color: #ffffff;
}

.electrical-cable-sizing-hero .hub-back-link {
  opacity: .84;
}

.electrical-cable-sizing-hero
  .radiator-calculator-highlights span {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
}

.electrical-cable-sizing-hero
  .radiator-calculator-highlights strong {
  color: var(--electrical-yellow);
}

.electrical-cable-sizing-hero-visual {
  width: min(100%, 430px);
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .13),
      rgba(255, 255, 255, .035)
    );
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

.electrical-cable-sizing-hero-visual > span {
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .74;
}

.electrical-cable-sizing-hero-visual > div {
  display: grid;
  grid-template-columns: 92px 82px 92px;
  align-items: center;
}

.electrical-cable-sizing-hero-visual > div strong {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(8, 31, 44, .72);
  color: var(--electrical-yellow);
  font-size: 2rem;
}

.electrical-cable-sizing-hero-visual > div i {
  height: 8px;
  background:
    linear-gradient(
      90deg,
      var(--electrical-cyan),
      var(--electrical-yellow)
    );
  box-shadow:
    0 0 18px rgba(52, 184, 208, .78);
}

.electrical-cable-sizing-hero-visual > b {
  color: #ffffff;
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  text-align: center;
}

.electrical-cable-sizing-hero-visual > small {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--electrical-yellow);
  color: #18252d;
  font-size: .86rem;
  font-weight: 850;
}

.electrical-cable-sizing-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(360px, .96fr);
  gap: 24px;
  align-items: start;
}

.electrical-cable-sizing-input-column {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.electrical-cable-sizing-fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.electrical-cable-sizing-fields > label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: var(--electrical-navy);
  font-weight: 750;
}

.electrical-cable-sizing-fields > label > small {
  color: #6d818c;
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.45;
}

.electrical-cable-sizing-fields > label > input,
.electrical-cable-sizing-fields > label > select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  outline: 0;
  background: #ffffff;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-cable-sizing-fields > label > input:focus,
.electrical-cable-sizing-fields > label > select:focus {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-cable-sizing-fields .input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  background: #ffffff;
}

.electrical-cable-sizing-fields
  .input-unit:focus-within {
  border-color: var(--electrical-cyan);
  box-shadow:
    0 0 0 4px rgba(52, 184, 208, .14);
}

.electrical-cable-sizing-fields .input-unit input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 15px 14px;
  background: transparent;
  color: var(--electrical-navy);
  font: inherit;
}

.electrical-cable-sizing-fields
  .input-unit select {
  min-width: 76px;
  border: 0;
  border-left: 1px solid var(--electrical-line);
  outline: 0;
  padding: 0 12px;
  background: #eef7fa;
  color: var(--electrical-navy);
  font: inherit;
  font-weight: 800;
}

.electrical-cable-sizing-fields .fixed-unit {
  display: grid;
  min-width: 68px;
  place-items: center;
  padding: 0 13px;
  border-left: 1px solid var(--electrical-line);
  background: #eef7fa;
  color: var(--electrical-navy);
  font-weight: 850;
}

.electrical-cable-sizing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.electrical-cable-sizing-actions button {
  min-height: 50px;
}

.electrical-cable-sizing-message {
  margin: -8px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--electrical-line);
  border-radius: 15px;
  background: #f4fafc;
  color: #48636f;
  font-weight: 720;
  line-height: 1.5;
}

.electrical-cable-sizing-message[data-state="error"] {
  border-color: rgba(178, 58, 58, .28);
  background: #fff2f2;
  color: #922f2f;
}

.electrical-cable-sizing-message[data-state="success"] {
  border-color: rgba(26, 132, 91, .26);
  background: #effaf5;
  color: #176d4d;
}

.electrical-cable-sizing-model-note {
  margin: 20px 0 0;
  padding: 15px 17px;
  border-left: 4px solid var(--electrical-yellow);
  border-radius: 0 14px 14px 0;
  background: #fff9e8;
  color: #5f5639;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.6;
}

.electrical-cable-sizing-main-result {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 28px 22px;
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      #10283a,
      #176b87
    );
  color: #ffffff;
  text-align: center;
  box-shadow: 0 20px 42px rgba(16, 40, 58, .2);
}

.electrical-cable-sizing-main-result > span {
  font-size: .77rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .76;
}

.electrical-cable-sizing-main-result > strong {
  color: var(--electrical-yellow);
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 1;
}

.electrical-cable-sizing-main-result > small {
  color: rgba(255, 255, 255, .76);
  font-weight: 650;
}

.electrical-cable-sizing-results {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.electrical-cable-sizing-results > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--electrical-line);
  border-radius: 17px;
  background: #ffffff;
}

.electrical-cable-sizing-results span {
  color: #637984;
  font-size: .76rem;
  font-weight: 740;
  line-height: 1.4;
}

.electrical-cable-sizing-results strong {
  overflow-wrap: anywhere;
  color: var(--electrical-navy);
  font-size: 1.18rem;
}

.electrical-cable-sizing-results small {
  color: #748892;
  font-weight: 650;
}

.electrical-cable-sizing-selection-note {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(52, 184, 208, .28);
  border-radius: 17px;
  background: #eef9fc;
}

.electrical-cable-sizing-selection-note[hidden] {
  display: none;
}

.electrical-cable-sizing-selection-note > span {
  color: #52717e;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-cable-sizing-selection-note > strong {
  color: var(--electrical-navy);
  font-size: 1.1rem;
}

.electrical-cable-sizing-selection-note > p {
  margin: 0;
  color: #536b76;
  line-height: 1.55;
}

.electrical-cable-sizing-selection-note[data-state="warning"] {
  border-color: rgba(218, 151, 24, .32);
  background: #fff8e8;
}

.electrical-cable-sizing-selection-note[data-state="success"] {
  border-color: rgba(26, 132, 91, .28);
  background: #effaf5;
}

.electrical-cable-sizing-formula-card {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 17px;
  background: #10283a;
  color: #ffffff;
}

.electrical-cable-sizing-formula-card > span {
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .7;
}

.electrical-cable-sizing-formula-card > strong {
  color: var(--electrical-yellow);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.electrical-cable-sizing-formula-card > p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  line-height: 1.6;
}

.electrical-cable-sizing-info-popover {
  z-index: 1200;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(8, 31, 44, .3);
}

.electrical-cable-sizing-info-popover code {
  display: block;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .electrical-cable-sizing-layout {
    grid-template-columns: 1fr;
  }

  .electrical-cable-sizing-result-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .electrical-cable-sizing-hero-visual {
    min-height: 270px;
    padding: 26px 18px;
  }

  .electrical-cable-sizing-hero-visual > div {
    grid-template-columns: 66px 70px 66px;
  }

  .electrical-cable-sizing-hero-visual > div strong {
    width: 70px;
    height: 70px;
  }

  .electrical-cable-sizing-fields,
  .electrical-cable-sizing-results {
    grid-template-columns: 1fr;
  }

  .electrical-cable-sizing-actions {
    display: grid;
  }

  .electrical-cable-sizing-actions button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .electrical-cable-sizing-hero-visual > div {
    grid-template-columns: 46px 64px 46px;
  }

  .electrical-cable-sizing-hero-visual > div strong {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
  }

  .electrical-cable-sizing-main-result {
    padding-inline: 14px;
  }
}


/* SHK_ELECTRICAL_CABLE_SIZING_ACTION_FIX_20260806 */

.electrical-cable-sizing-actions {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.electrical-cable-sizing-actions
  .primary-button,
.electrical-cable-sizing-actions
  .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  font: inherit;
  font-weight: 820;
  text-align: center;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.electrical-cable-sizing-actions
  .primary-button {
  border: 1px solid #176b87;
  background: #176b87;
  color: #ffffff;
  box-shadow:
    0 12px 25px rgba(23, 107, 135, .2);
}

.electrical-cable-sizing-actions
  .secondary-button {
  border: 1px solid var(--electrical-line);
  background: #ffffff;
  color: var(--electrical-navy);
}

.electrical-cable-sizing-actions
  button:hover {
  transform: translateY(-1px);
}

.electrical-cable-sizing-actions
  .primary-button:hover {
  background: #125c75;
  box-shadow:
    0 15px 30px rgba(23, 107, 135, .26);
}

.electrical-cable-sizing-actions
  button:focus-visible {
  outline: 3px solid rgba(52, 184, 208, .32);
  outline-offset: 3px;
}

.electrical-cable-sizing-message {
  width: 100%;
  margin-top: 0;
}

@media (max-width: 560px) {
  .electrical-cable-sizing-actions {
    grid-template-columns: 1fr;
  }
}


/* SHK_ELECTRICAL_AMPACITY_CSS_20260806 */

.electrical-ampacity-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(255, 255, 255, .2),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #0f4257 0%,
      #176b87 55%,
      #1996a6 100%
    );
}

.electrical-ampacity-hero::before {
  content: "";
  position: absolute;
  inset: auto -90px -120px auto;
  width: 310px;
  height: 310px;
  border: 42px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  pointer-events: none;
}

.electrical-ampacity-hero .eyebrow,
.electrical-ampacity-hero h1,
.electrical-ampacity-hero h1 small,
.electrical-ampacity-hero p,
.electrical-ampacity-hero .hub-back-link {
  color: #ffffff;
}

.electrical-ampacity-hero .hub-back-link {
  opacity: .88;
}

.electrical-ampacity-hero
.radiator-calculator-highlights span {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .2);
  color: #ffffff;
}

.electrical-ampacity-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  min-height: 310px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 28px;
  background: rgba(5, 30, 41, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 24px 55px rgba(4, 29, 41, .22);
  color: #ffffff;
  text-align: center;
  backdrop-filter: blur(8px);
}

.electrical-ampacity-hero-visual > span {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
}

.electrical-ampacity-hero-visual > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.electrical-ampacity-hero-visual i {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 850;
}

.electrical-ampacity-hero-visual b {
  font-size: 1.5rem;
}

.electrical-ampacity-hero-visual > strong {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.electrical-ampacity-hero-visual > small {
  max-width: 270px;
  line-height: 1.55;
  opacity: .82;
}

.electrical-ampacity-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(330px, .88fr);
  gap: 24px;
  align-items: start;
}

.electrical-ampacity-input-column {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.electrical-ampacity-fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.electrical-ampacity-fields > label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: #193847;
  font-size: .92rem;
  font-weight: 750;
}

.electrical-ampacity-fields > label > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.electrical-ampacity-fields > label > small {
  color: #657883;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.48;
}

.electrical-ampacity-fields input,
.electrical-ampacity-fields select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #c9d6dc;
  border-radius: 13px;
  background: #ffffff;
  color: #173744;
  font: inherit;
  font-weight: 650;
  outline: none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.electrical-ampacity-fields input:focus,
.electrical-ampacity-fields select:focus {
  border-color: #176b87;
  box-shadow: 0 0 0 4px rgba(23, 107, 135, .12);
}

.electrical-ampacity-fields select:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.electrical-ampacity-fields .input-unit {
  position: relative;
  display: block;
}

.electrical-ampacity-fields .input-unit input {
  padding-right: 48px;
}

.electrical-ampacity-fields .fixed-unit {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #59717d;
  font-size: .82rem;
  font-weight: 800;
  transform: translateY(-50%);
  pointer-events: none;
}

.electrical-ampacity-transfer-note,
.electrical-ampacity-device-note,
.electrical-ampacity-compatibility-note {
  margin-top: 17px;
  padding: 15px 17px;
  border: 1px solid #d6e1e6;
  border-radius: 15px;
  background: #f6fafb;
}

.electrical-ampacity-transfer-note strong,
.electrical-ampacity-device-note strong,
.electrical-ampacity-compatibility-note strong {
  display: block;
  margin-bottom: 5px;
  color: #173b49;
}

.electrical-ampacity-transfer-note p,
.electrical-ampacity-device-note p,
.electrical-ampacity-compatibility-note p {
  margin: 0;
  color: #607680;
  line-height: 1.55;
}

.electrical-ampacity-compatibility-note[data-state="success"] {
  border-color: #a7d7c2;
  background: #effaf5;
}

.electrical-ampacity-compatibility-note[data-state="warning"] {
  border-color: #ead19b;
  background: #fff9eb;
}

.electrical-ampacity-factor-preview {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.electrical-ampacity-factor-preview > div {
  padding: 14px;
  border: 1px solid #d5e0e5;
  border-radius: 14px;
  background: #f7fafb;
  text-align: center;
}

.electrical-ampacity-factor-preview span {
  display: block;
  min-height: 34px;
  color: #667983;
  font-size: .76rem;
  line-height: 1.35;
}

.electrical-ampacity-factor-preview strong {
  display: block;
  margin-top: 5px;
  color: #176b87;
  font-size: 1.28rem;
}

.electrical-ampacity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.electrical-ampacity-actions button {
  min-height: 48px;
}

.electrical-ampacity-message {
  min-height: 24px;
  margin: 2px 0 0;
  color: #667983;
  font-weight: 700;
}

.electrical-ampacity-message[data-state="success"] {
  color: #14704e;
}

.electrical-ampacity-message[data-state="error"] {
  color: #a33a34;
}

.electrical-ampacity-result-card {
  position: sticky;
  top: 20px;
  min-width: 0;
}

.electrical-ampacity-main-result {
  padding: 20px;
  border: 1px solid #d7e1e5;
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #f7fafb,
      #eef4f6
    );
}

.electrical-ampacity-main-result > span,
.electrical-ampacity-main-result > strong,
.electrical-ampacity-main-result > small {
  display: block;
}

.electrical-ampacity-main-result > span {
  color: #607580;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-ampacity-main-result > strong {
  margin-top: 7px;
  color: #173d4c;
  font-size: 1.65rem;
}

.electrical-ampacity-main-result > small {
  margin-top: 8px;
  color: #617681;
  line-height: 1.5;
}

.electrical-ampacity-main-result[data-state="success"] {
  border-color: #99d0b8;
  background: #eef9f4;
}

.electrical-ampacity-main-result[data-state="warning"] {
  border-color: #e4c47c;
  background: #fff8e8;
}

.electrical-ampacity-current-chain {
  display: grid;
  grid-template-columns:
    1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 17px;
}

.electrical-ampacity-current-chain > div {
  min-width: 0;
  padding: 13px 8px;
  border: 1px solid #d6e0e4;
  border-radius: 14px;
  background: #ffffff;
  text-align: center;
}

.electrical-ampacity-current-chain span,
.electrical-ampacity-current-chain strong,
.electrical-ampacity-current-chain small {
  display: block;
}

.electrical-ampacity-current-chain span {
  color: #647984;
  font-size: .68rem;
}

.electrical-ampacity-current-chain strong {
  margin: 5px 0;
  color: #173d4c;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.electrical-ampacity-current-chain small {
  color: #176b87;
  font-weight: 800;
}

.electrical-ampacity-current-chain > b {
  color: #176b87;
  font-size: 1.2rem;
}

.electrical-ampacity-result-circuit {
  margin: 14px 0 0;
  color: #536d79;
  font-size: .86rem;
  font-weight: 750;
}

.electrical-ampacity-results {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.electrical-ampacity-results > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #d8e2e6;
  border-radius: 14px;
  background: #f8fafb;
}

.electrical-ampacity-results span,
.electrical-ampacity-results strong,
.electrical-ampacity-results small {
  display: block;
}

.electrical-ampacity-results span {
  min-height: 40px;
  color: #647984;
  font-size: .74rem;
  line-height: 1.35;
}

.electrical-ampacity-results strong {
  margin-top: 6px;
  color: #173c4a;
  font-size: 1.25rem;
}

.electrical-ampacity-results small {
  margin-top: 4px;
  color: #75868e;
  font-size: .7rem;
  line-height: 1.35;
}

.electrical-ampacity-checks {
  display: grid;
  gap: 10px;
  margin-top: 17px;
}

.electrical-ampacity-check {
  padding: 15px;
  border: 1px solid #d7e1e5;
  border-left-width: 5px;
  border-radius: 14px;
  background: #f8fafb;
}

.electrical-ampacity-check span {
  display: block;
  color: #6b7c85;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-ampacity-check strong {
  display: block;
  margin-top: 4px;
  color: #193e4d;
}

.electrical-ampacity-check p {
  margin: 6px 0 0;
  color: #637782;
  line-height: 1.45;
}

.electrical-ampacity-check[data-state="success"] {
  border-color: #9ed2bb;
  border-left-color: #25835d;
  background: #eff9f4;
}

.electrical-ampacity-check[data-state="error"] {
  border-color: #e5b0aa;
  border-left-color: #b84d43;
  background: #fff3f2;
}

.electrical-ampacity-formula-card,
.electrical-ampacity-table-card,
.electrical-ampacity-assessment-note {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #d7e1e5;
  border-radius: 15px;
  background: #f7fafb;
}

.electrical-ampacity-formula-card span,
.electrical-ampacity-table-card span,
.electrical-ampacity-assessment-note > span {
  display: block;
  color: #637882;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.electrical-ampacity-formula-card strong,
.electrical-ampacity-table-card strong,
.electrical-ampacity-assessment-note strong {
  display: block;
  margin-top: 6px;
  color: #173d4c;
  font-size: 1.03rem;
}

.electrical-ampacity-formula-card p,
.electrical-ampacity-table-card p,
.electrical-ampacity-assessment-note p {
  margin: 7px 0 0;
  color: #607580;
  line-height: 1.5;
}

.electrical-ampacity-assessment-note[data-state="success"] {
  border-color: #9ed2bb;
  background: #eff9f4;
}

.electrical-ampacity-assessment-note[data-state="warning"] {
  border-color: #e3c57f;
  background: #fff8e8;
}

.electrical-ampacity-info-popover {
  z-index: 1200;
  box-shadow: 0 22px 60px rgba(9, 43, 56, .28);
}

.electrical-ampacity-info-popover code {
  display: block;
  margin: 7px 0 15px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #eef4f6;
  color: #164c61;
  white-space: normal;
}


/* SHK_ELECTRICAL_AMPACITY_GUIDE_CSS_20260807 */

.electrical-ampacity-guide {
  display: grid;
  gap: 20px;
  margin-bottom: 4px;
  padding: 22px;
  border: 1px solid #d9e3e7;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      #fbfdfe 0%,
      #f5fafb 100%
    );
  box-shadow: 0 14px 34px rgba(15, 55, 71, .06);
}

.electrical-ampacity-guide-heading,
.electrical-ampacity-installation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.electrical-ampacity-guide-heading h3 {
  margin: 4px 0 0;
  color: #173d4c;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.electrical-ampacity-guide-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eaf4f7;
  color: #176b87;
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
}

.electrical-ampacity-guide-steps {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.electrical-ampacity-guide-steps article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 16px;
  border: 1px solid #d7e1e5;
  border-radius: 17px;
  background: #ffffff;
}

.electrical-ampacity-guide-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #176b87;
  color: #ffffff;
  font-size: .95rem;
}

.electrical-ampacity-guide-steps strong {
  display: block;
  color: #173d4c;
}

.electrical-ampacity-guide-steps p {
  margin: 5px 0 0;
  color: #607580;
  line-height: 1.52;
}

.electrical-ampacity-installation-guide {
  display: grid;
  gap: 16px;
  padding-top: 4px;
}

.electrical-ampacity-installation-heading span {
  display: block;
  color: #637882;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.electrical-ampacity-installation-heading strong {
  display: block;
  margin-top: 4px;
  color: #173d4c;
  font-size: 1.08rem;
}

.electrical-ampacity-installation-heading small {
  max-width: 340px;
  color: #5f7580;
  line-height: 1.5;
  text-align: right;
}

.electrical-ampacity-installation-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.electrical-ampacity-installation-grid article {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid #d7e1e5;
  border-radius: 18px;
  background: #ffffff;
}

.electrical-ampacity-installation-grid article > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f4f68, #176b87);
  color: #ffffff;
  font-size: 1.45rem;
  letter-spacing: .03em;
}

.electrical-ampacity-installation-grid article > p {
  margin: 0;
  color: #5f7580;
  font-size: .83rem;
  line-height: 1.5;
}

/* SHK_ELECTRICAL_AMPACITY_NORM_SCHEMATIC_VISUALS_20260807 */

.electrical-ampacity-installation-sketch {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  border: 1px solid #cfd9de;
  border-radius: 10px;
  background: #f9fbfc;
}

.electrical-ampacity-installation-sketch::before,
.electrical-ampacity-installation-sketch::after,
.electrical-ampacity-installation-sketch i,
.electrical-ampacity-installation-sketch b,
.electrical-ampacity-installation-sketch span {
  position: absolute;
  display: block;
}

.electrical-ampacity-installation-sketch i,
.electrical-ampacity-installation-sketch b,
.electrical-ampacity-installation-sketch span {
  content: "";
}

.electrical-ampacity-installation-sketch.is-a2 {
  background:
    linear-gradient(
      90deg,
      #d7d7d7 0 16px,
      #f9fbfc 16px 24px,
      #efe2a8 24px 84px,
      #dcdcdc 84px 98px,
      #f9fbfc 98px 100%
    );
}

.electrical-ampacity-installation-sketch.is-a2::before {
  content: "";
  inset: 10px auto 10px 24px;
  width: 60px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(171, 140, 45, .18) 0 8px,
      rgba(255, 255, 255, .22) 8px 16px
    );
  border-left: 1px solid #d2c17b;
  border-right: 1px solid #d2c17b;
}

.electrical-ampacity-installation-sketch.is-a2::after {
  content: "";
  left: 77px;
  top: 50%;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #7b878d;
  transform: translateY(-50%);
}

.electrical-ampacity-installation-sketch.is-a2 i,
.electrical-ampacity-installation-sketch.is-b2 i {
  left: 77px;
  top: 50%;
  width: 28px;
  height: 28px;
  border: 4px solid #8a979d;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-installation-sketch.is-a2 b,
.electrical-ampacity-installation-sketch.is-b2 b,
.electrical-ampacity-installation-sketch.is-c b,
.electrical-ampacity-installation-sketch.is-e b {
  left: 77px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 33%, #ffffff 0 1.4px, transparent 1.5px),
    conic-gradient(
      from 0deg,
      #b66c2b 0 25%,
      #3479bb 25% 50%,
      #447c47 50% 75%,
      #d6c34f 75% 100%
    );
  box-shadow: inset 0 0 0 1.3px rgba(44, 63, 72, .38);
  transform: translate(-50%, -50%);
}

.electrical-ampacity-installation-sketch.is-a2 span {
  display: none;
}

.electrical-ampacity-installation-sketch.is-b1,
.electrical-ampacity-installation-sketch.is-b2,
.electrical-ampacity-installation-sketch.is-c {
  background:
    linear-gradient(
      90deg,
      #d7d7d7 0 18px,
      #f9fbfc 18px 100%
    );
}

.electrical-ampacity-installation-sketch.is-b1::before,
.electrical-ampacity-installation-sketch.is-b2::before,
.electrical-ampacity-installation-sketch.is-c::before {
  content: "";
  left: 18px;
  top: 50%;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #7b878d;
  transform: translateY(-50%);
}

.electrical-ampacity-installation-sketch.is-b1::after,
.electrical-ampacity-installation-sketch.is-b2::after {
  content: "";
  left: 36px;
  top: 50%;
  width: 41px;
  height: 0;
  border-top: 2px dashed rgba(123, 135, 141, .42);
  transform: translateY(-50%);
}

.electrical-ampacity-installation-sketch.is-b1 i {
  left: 77px;
  top: 50%;
  width: 28px;
  height: 28px;
  border: 4px solid #8a979d;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-installation-sketch.is-b1 b {
  left: 67px;
  top: 50%;
  width: 21px;
  height: 10px;
  background:
    radial-gradient(
      circle at 3px 5px,
      #ffffff 0 2.8px,
      #55656d 2.9px 4px,
      transparent 4.1px
    ),
    radial-gradient(
      circle at 10px 5px,
      #ffffff 0 2.8px,
      #55656d 2.9px 4px,
      transparent 4.1px
    ),
    radial-gradient(
      circle at 17px 5px,
      #ffffff 0 2.8px,
      #55656d 2.9px 4px,
      transparent 4.1px
    );
  transform: translateY(-50%);
}

.electrical-ampacity-installation-sketch.is-b1 span,
.electrical-ampacity-installation-sketch.is-b2 span {
  left: 30px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #8a979d;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-installation-sketch.is-c i {
  left: 50px;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 3px solid #59656b;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-installation-sketch.is-c b {
  left: 50px;
  top: 50%;
  width: 12px;
  height: 12px;
}

.electrical-ampacity-installation-sketch.is-c::after {
  content: "";
  left: 24px;
  top: 36px;
  width: 8px;
  height: 64px;
  border-left: 2px solid rgba(123, 135, 141, .28);
  border-right: 2px solid rgba(123, 135, 141, .28);
  border-radius: 999px;
}

.electrical-ampacity-installation-sketch.is-c span {
  display: none;
}

.electrical-ampacity-installation-sketch.is-e {
  background:
    linear-gradient(
      180deg,
      #fbfdfe 0%,
      #f3f8fa 100%
    );
}

.electrical-ampacity-installation-sketch.is-e::before,
.electrical-ampacity-installation-sketch.is-e::after {
  content: "";
  top: 26px;
  width: 3px;
  height: 48px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(101, 164, 214, .92),
      rgba(101, 164, 214, .06)
    );
}

.electrical-ampacity-installation-sketch.is-e::before {
  left: 28px;
}

.electrical-ampacity-installation-sketch.is-e::after {
  right: 28px;
}

.electrical-ampacity-installation-sketch.is-e i {
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border: 4px solid #8a979d;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-installation-sketch.is-e b {
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
}

.electrical-ampacity-installation-sketch.is-e span {
  left: 50%;
  bottom: 16px;
  width: 52px;
  height: 0;
  border-top: 2px dashed rgba(123, 135, 141, .45);
  transform: translateX(-50%);
}

.electrical-ampacity-installation-note {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d8e2e6;
  border-radius: 15px;
  background: #f7fafb;
  color: #607580;
  line-height: 1.55;
}

.electrical-ampacity-installation-note strong {
  color: #173d4c;
}



/* SHK_ELECTRICAL_AMPACITY_INSTALLATION_MATRIX_CSS_20260807 */

.electrical-ampacity-installation-matrix {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.electrical-ampacity-method-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cfdbe0;
  border-radius: 16px;
  background: #ffffff;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.electrical-ampacity-method-group > header {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border-bottom: 1px solid #d8e2e6;
  background:
    linear-gradient(
      180deg,
      #edf6f8,
      #e5f0f3
    );
}

.electrical-ampacity-method-group > header strong {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 34px;
  border-radius: 10px;
  background: #176b87;
  color: #ffffff;
  font-size: 1.15rem;
  letter-spacing: .03em;
}

.electrical-ampacity-method-group > header span {
  color: #173d4c;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.35;
}

.electrical-ampacity-method-variants {
  display: grid;
  gap: 0;
}

.electrical-ampacity-method-variant {
  display: grid;
  grid-template-rows: 112px auto;
  gap: 9px;
  padding: 11px;
  border-bottom: 1px solid #e1e8eb;
}

.electrical-ampacity-method-variant:last-child {
  border-bottom: 0;
}

.electrical-ampacity-method-variant p {
  margin: 0;
  color: #5e737d;
  font-size: .74rem;
  line-height: 1.42;
}

.electrical-ampacity-method-diagram {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d6dfe3;
  border-radius: 10px;
  background: #fafcfd;
}

.electrical-ampacity-method-diagram::before,
.electrical-ampacity-method-diagram::after,
.electrical-ampacity-method-diagram i,
.electrical-ampacity-method-diagram b,
.electrical-ampacity-method-diagram span {
  position: absolute;
  display: block;
}

.electrical-ampacity-method-diagram i,
.electrical-ampacity-method-diagram b,
.electrical-ampacity-method-diagram span {
  font-style: normal;
}

.electrical-ampacity-method-group[data-selected="true"] {
  border-color: #176b87;
  box-shadow:
    0 0 0 3px rgba(23, 107, 135, .13),
    0 12px 28px rgba(15, 55, 71, .1);
  transform: translateY(-2px);
}

.electrical-ampacity-method-group[data-selected="true"] > header {
  background:
    linear-gradient(
      180deg,
      #dff0f4,
      #d6ebef
    );
}

.electrical-ampacity-method-group[data-selected="true"]
> header strong {
  background: #0e566f;
}

@media (max-width: 1180px) {
  .electrical-ampacity-installation-matrix {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .electrical-ampacity-installation-matrix {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .electrical-ampacity-installation-matrix {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-method-group > header {
    min-height: 0;
  }

  .electrical-ampacity-method-variant {
    grid-template-columns: 120px 1fr;
    grid-template-rows: none;
    align-items: center;
  }

  .electrical-ampacity-method-diagram {
    min-height: 92px;
  }
}


/* SHK_ELECTRICAL_AMPACITY_INSTALLATION_DIAGRAMS_20260807 */

/*
 * Gemeinsame technische Symbolik:
 * - graue Fläche = Wand / Bauteil
 * - Kreisring = Installationsrohr
 * - Rechteck = Installationskanal
 * - einzelne kleine Kreise = Aderleitungen
 * - größerer Kreis mit Innenadern = mehradrige Leitung
 */

.electrical-ampacity-method-diagram {
  background:
    linear-gradient(
      90deg,
      #d8dde0 0 24px,
      #f8fafb 24px 100%
    );
}

/* Mehradrige Leitung */
.electrical-ampacity-method-diagram.is-a2-wall i,
.electrical-ampacity-method-diagram.is-a2-inner i,
.electrical-ampacity-method-diagram.is-b2-pipe i,
.electrical-ampacity-method-diagram.is-b2-channel i,
.electrical-ampacity-method-diagram.is-c-surface i,
.electrical-ampacity-method-diagram.is-c-plaster i,
.electrical-ampacity-method-diagram.is-e-two i,
.electrical-ampacity-method-diagram.is-e-three i {
  width: 30px;
  height: 30px;
  border: 3px solid #596970;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 36% 34%,
      #8a532f 0 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 66% 34%,
      #397cab 0 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 36% 67%,
      #4b824d 0 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 66% 67%,
      #d0b83f 0 3px,
      transparent 3.5px
    ),
    #ffffff;
}

/* A2 · wärmegedämmte Wand */
.electrical-ampacity-method-diagram.is-a2-wall,
.electrical-ampacity-method-diagram.is-a2-inner {
  background:
    linear-gradient(
      90deg,
      #d7dcdf 0 18px,
      #efe1a3 18px 68px,
      #d7dcdf 68px 82px,
      #f9fbfc 82px 100%
    );
}

.electrical-ampacity-method-diagram.is-a2-wall::before,
.electrical-ampacity-method-diagram.is-a2-inner::before {
  content: "";
  inset: 8px auto 8px 20px;
  width: 46px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(154, 125, 44, .18) 0 7px,
      rgba(255, 255, 255, .22) 7px 14px
    );
}

.electrical-ampacity-method-diagram.is-a2-wall b,
.electrical-ampacity-method-diagram.is-a2-inner b {
  top: 50%;
  width: 44px;
  height: 44px;
  border: 4px solid #85949b;
  border-radius: 50%;
  background: #f8fafb;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-a2-wall b {
  left: 58px;
}

.electrical-ampacity-method-diagram.is-a2-wall i {
  top: 50%;
  left: 58px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-a2-wall span {
  top: 50%;
  left: 80px;
  width: 24px;
  border-top: 2px solid #7d8a90;
}

.electrical-ampacity-method-diagram.is-a2-inner b {
  left: 43px;
}

.electrical-ampacity-method-diagram.is-a2-inner i {
  top: 50%;
  left: 43px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-a2-inner span {
  top: 18px;
  bottom: 18px;
  left: 72px;
  width: 10px;
  border-left: 2px solid #8f999e;
  border-right: 2px solid #8f999e;
}

/* B1 · einzelne Aderleitungen */
.electrical-ampacity-method-diagram.is-b1-pipe i,
.electrical-ampacity-method-diagram.is-b1-channel i,
.electrical-ampacity-method-diagram.is-b1-masonry i {
  width: 28px;
  height: 28px;
  background:
    radial-gradient(
      circle at 27% 50%,
      #ffffff 0 4px,
      #596970 4.5px 6px,
      transparent 6.5px
    ),
    radial-gradient(
      circle at 50% 50%,
      #ffffff 0 4px,
      #596970 4.5px 6px,
      transparent 6.5px
    ),
    radial-gradient(
      circle at 73% 50%,
      #ffffff 0 4px,
      #596970 4.5px 6px,
      transparent 6.5px
    );
}

.electrical-ampacity-method-diagram.is-b1-pipe b {
  top: 50%;
  left: 58px;
  width: 44px;
  height: 44px;
  border: 4px solid #87969d;
  border-radius: 50%;
  background: #f9fbfc;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b1-pipe i {
  top: 50%;
  left: 58px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b1-pipe span {
  top: 50%;
  left: 24px;
  width: 14px;
  border-top: 3px solid #7b888e;
}

.electrical-ampacity-method-diagram.is-b1-channel b {
  top: 27px;
  bottom: 27px;
  left: 33px;
  width: 58px;
  border: 3px solid #87969d;
  border-radius: 5px;
  background: #f9fbfc;
}

.electrical-ampacity-method-diagram.is-b1-channel i {
  top: 50%;
  left: 62px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b1-channel span {
  top: 35px;
  bottom: 35px;
  left: 40px;
  border-left: 2px solid #bec8cc;
}

.electrical-ampacity-method-diagram.is-b1-masonry {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 22px,
      rgba(139, 118, 91, .18) 22px 24px
    ),
    linear-gradient(
      90deg,
      #d8c6aa 0 58%,
      #f8fafb 58% 100%
    );
}

.electrical-ampacity-method-diagram.is-b1-masonry b {
  top: 50%;
  left: 52px;
  width: 44px;
  height: 44px;
  border: 4px solid #87969d;
  border-radius: 50%;
  background: #f9fbfc;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b1-masonry i {
  top: 50%;
  left: 52px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b1-masonry span {
  display: none;
}

/* B2 · mehradrige Leitung in Rohr / Kanal */
.electrical-ampacity-method-diagram.is-b2-pipe b {
  top: 50%;
  left: 58px;
  width: 46px;
  height: 46px;
  border: 4px solid #87969d;
  border-radius: 50%;
  background: #f9fbfc;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b2-pipe i {
  top: 50%;
  left: 58px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b2-pipe span {
  top: 50%;
  left: 24px;
  width: 14px;
  border-top: 3px solid #7b888e;
}

.electrical-ampacity-method-diagram.is-b2-channel b {
  top: 25px;
  bottom: 25px;
  left: 32px;
  width: 62px;
  border: 3px solid #87969d;
  border-radius: 5px;
  background: #f9fbfc;
}

.electrical-ampacity-method-diagram.is-b2-channel i {
  top: 50%;
  left: 63px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-b2-channel span {
  top: 34px;
  bottom: 34px;
  left: 40px;
  border-left: 2px solid #bec8cc;
}

/* C · direkte Verlegung */
.electrical-ampacity-method-diagram.is-c-surface i {
  top: 50%;
  left: 45px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-c-surface b {
  top: 50%;
  left: 25px;
  width: 13px;
  height: 40px;
  border: 2px solid #8a969b;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  transform: translateY(-50%);
}

.electrical-ampacity-method-diagram.is-c-surface span {
  top: 50%;
  left: 28px;
  width: 8px;
  border-top: 2px solid #7b888e;
}

.electrical-ampacity-method-diagram.is-c-single i {
  top: 50%;
  left: 47px;
  width: 26px;
  height: 26px;
  border: 3px solid #596970;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #b66f2f 0 5px,
      #ffffff 5.5px 9px,
      transparent 9.5px
    );
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-c-single b {
  top: 31px;
  left: 23px;
  width: 12px;
  height: 50px;
  border: 2px solid #89969c;
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.electrical-ampacity-method-diagram.is-c-single span {
  top: 50%;
  left: 29px;
  width: 7px;
  border-top: 2px solid #7b888e;
}

.electrical-ampacity-method-diagram.is-c-plaster {
  background:
    linear-gradient(
      90deg,
      #d5dade 0 20px,
      #eceff1 20px 48px,
      #f9fbfc 48px 100%
    );
}

.electrical-ampacity-method-diagram.is-c-plaster i {
  top: 50%;
  left: 34px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-c-plaster b {
  top: 12px;
  bottom: 12px;
  left: 47px;
  border-left: 2px dashed #9ba6ab;
}

.electrical-ampacity-method-diagram.is-c-plaster span {
  display: none;
}

/* E · frei in Luft */
.electrical-ampacity-method-diagram.is-e-two,
.electrical-ampacity-method-diagram.is-e-three {
  background:
    linear-gradient(
      180deg,
      #fbfdfe,
      #eef6f9
    );
}

.electrical-ampacity-method-diagram.is-e-two::before,
.electrical-ampacity-method-diagram.is-e-three::before {
  content: "";
  top: 12px;
  bottom: 12px;
  left: 18px;
  width: 12px;
  background: #d6dcdf;
}

.electrical-ampacity-method-diagram.is-e-two i,
.electrical-ampacity-method-diagram.is-e-three i {
  top: 50%;
  left: 70px;
  transform: translate(-50%, -50%);
}

.electrical-ampacity-method-diagram.is-e-two b,
.electrical-ampacity-method-diagram.is-e-three b {
  top: 50%;
  left: 31px;
  width: 23px;
  border-top: 2px solid #66777f;
}

.electrical-ampacity-method-diagram.is-e-two b::before,
.electrical-ampacity-method-diagram.is-e-two b::after,
.electrical-ampacity-method-diagram.is-e-three b::before,
.electrical-ampacity-method-diagram.is-e-three b::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #66777f;
  border-left: 2px solid #66777f;
}

.electrical-ampacity-method-diagram.is-e-two b::before,
.electrical-ampacity-method-diagram.is-e-three b::before {
  left: -1px;
  transform: rotate(-45deg);
}

.electrical-ampacity-method-diagram.is-e-two b::after,
.electrical-ampacity-method-diagram.is-e-three b::after {
  right: -1px;
  transform: rotate(135deg);
}

.electrical-ampacity-method-diagram.is-e-two span {
  top: 29px;
  left: 47px;
  color: #546a74;
  font-size: .65rem;
  font-weight: 800;
}

.electrical-ampacity-method-diagram.is-e-two span::before {
  content: "≥ 0,3d";
}

.electrical-ampacity-method-diagram.is-e-three::after {
  content: "";
  top: 24px;
  left: 89px;
  width: 22px;
  height: 22px;
  border: 3px solid #596970;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 33%,
      #ffffff 0 2px,
      #596970 2.5px 3.5px,
      transparent 4px
    ),
    radial-gradient(
      circle at 35% 67%,
      #ffffff 0 2px,
      #596970 2.5px 3.5px,
      transparent 4px
    ),
    radial-gradient(
      circle at 65% 67%,
      #ffffff 0 2px,
      #596970 2.5px 3.5px,
      transparent 4px
    ),
    #ffffff;
}

.electrical-ampacity-method-diagram.is-e-three span {
  top: 76px;
  left: 45px;
  width: 54px;
  border-top: 2px dashed #78909a;
}

/* SHK_ELECTRICAL_AMPACITY_CALCULATION_GUIDE_CSS_20260807 */

.electrical-ampacity-calculation-guide {
  margin-top: 24px;
  border: 1px solid #d7e1e5;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 55, 71, .05);
  overflow: hidden;
}

.electrical-ampacity-calculation-guide > summary {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 20px 54px 20px 20px;
  background:
    linear-gradient(
      180deg,
      #fbfdfe,
      #f5fafb
    );
  cursor: pointer;
  list-style: none;
}

.electrical-ampacity-calculation-guide > summary::-webkit-details-marker {
  display: none;
}

.electrical-ampacity-calculation-guide > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #176b87;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
  transform: translateY(-50%);
}

.electrical-ampacity-calculation-guide[open] > summary::after {
  content: "−";
}

.electrical-ampacity-calculation-guide > summary span {
  color: #173d4c;
  font-size: 1.08rem;
  font-weight: 800;
}

.electrical-ampacity-calculation-guide > summary small {
  color: #617681;
  line-height: 1.45;
}

.electrical-ampacity-calculation-guide-content {
  display: grid;
  gap: 20px;
  padding: 20px;
  border-top: 1px solid #e0e7ea;
}

.electrical-ampacity-calculation-steps {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.electrical-ampacity-calculation-steps article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid #d7e1e5;
  border-radius: 16px;
  background: #f8fafb;
}

.electrical-ampacity-calculation-steps article:last-child {
  grid-column: 1 / -1;
}

.electrical-ampacity-calculation-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #176b87;
  color: #ffffff;
}

.electrical-ampacity-calculation-steps strong {
  color: #173d4c;
}

.electrical-ampacity-calculation-steps p {
  margin: 5px 0 0;
  color: #617681;
  line-height: 1.5;
}

.electrical-ampacity-calculation-steps code {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf4f7;
  color: #155a73;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.electrical-ampacity-example {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid #d7e1e5;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #fbfdfe,
      #f6fafb
    );
}

.electrical-ampacity-example-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.electrical-ampacity-example-heading span {
  display: block;
  color: #637882;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.electrical-ampacity-example-heading strong {
  display: block;
  margin-top: 4px;
  color: #173d4c;
  font-size: 1.08rem;
}

.electrical-ampacity-example-heading small {
  color: #176b87;
  font-weight: 800;
  text-align: right;
}

.electrical-ampacity-example-values {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.electrical-ampacity-example-values > div {
  padding: 13px;
  border: 1px solid #d7e1e5;
  border-radius: 14px;
  background: #ffffff;
}

.electrical-ampacity-example-values span,
.electrical-ampacity-example-values strong,
.electrical-ampacity-example-values small {
  display: block;
}

.electrical-ampacity-example-values span {
  color: #697d86;
  font-size: .72rem;
  font-weight: 750;
}

.electrical-ampacity-example-values strong {
  margin-top: 5px;
  color: #173d4c;
}

.electrical-ampacity-example-values small {
  margin-top: 4px;
  color: #71838b;
  font-size: .7rem;
}

.electrical-ampacity-example-calculation {
  display: grid;
  gap: 10px;
}

.electrical-ampacity-example-calculation > div {
  padding: 14px 16px;
  border-left: 4px solid #176b87;
  border-radius: 12px;
  background: #edf6f8;
}

.electrical-ampacity-example-calculation span,
.electrical-ampacity-example-calculation strong {
  display: block;
}

.electrical-ampacity-example-calculation span {
  color: #607580;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.electrical-ampacity-example-calculation strong {
  margin-top: 5px;
  color: #173d4c;
  font-size: 1rem;
}

.electrical-ampacity-example-result {
  padding: 16px;
  border: 1px solid #9ed2bb;
  border-radius: 15px;
  background: #eff9f4;
}

.electrical-ampacity-example-result span {
  display: block;
  color: #527064;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.electrical-ampacity-example-result strong {
  display: block;
  margin-top: 5px;
  color: #176344;
  font-size: 1.05rem;
}

.electrical-ampacity-example-result p {
  margin: 7px 0 0;
  color: #557268;
  line-height: 1.5;
}

.electrical-ampacity-calculation-note {
  padding: 16px;
  border: 1px solid #ead19b;
  border-radius: 15px;
  background: #fff9eb;
}

.electrical-ampacity-calculation-note strong {
  color: #715820;
}

.electrical-ampacity-calculation-note p {
  margin: 6px 0 0;
  color: #776b4d;
  line-height: 1.55;
}


/* SHK_ELECTRICAL_AMPACITY_FINAL_CHECK_CSS_20260807 */

.electrical-ampacity-result-card {
  scroll-margin-top: 24px;
}

.electrical-ampacity-result-card.is-final-check-highlight {
  animation:
    electrical-ampacity-final-check-highlight
    1.55s ease-out;
}

@keyframes electrical-ampacity-final-check-highlight {
  0% {
    box-shadow:
      0 0 0 0 rgba(23, 107, 135, 0),
      0 10px 32px rgba(15, 55, 71, .05);
  }

  18% {
    box-shadow:
      0 0 0 7px rgba(23, 107, 135, .2),
      0 18px 46px rgba(15, 55, 71, .16);
  }

  52% {
    box-shadow:
      0 0 0 4px rgba(23, 107, 135, .12),
      0 16px 40px rgba(15, 55, 71, .12);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(23, 107, 135, 0),
      0 10px 32px rgba(15, 55, 71, .05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .electrical-ampacity-result-card.is-final-check-highlight {
    animation: none;
    outline: 4px solid rgba(23, 107, 135, .18);
    outline-offset: 4px;
  }
}

@media (max-width: 1050px) {
  .electrical-ampacity-layout {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-result-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .electrical-ampacity-hero-visual {
    min-height: 245px;
    padding: 24px 16px;
  }

  .electrical-ampacity-hero-visual i {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    font-size: 1.25rem;
  }

  .electrical-ampacity-fields,
  .electrical-ampacity-results {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-guide-heading,
  .electrical-ampacity-installation-heading {
    flex-direction: column;
  }

  .electrical-ampacity-installation-heading small {
    max-width: none;
    text-align: left;
  }

  .electrical-ampacity-guide-steps {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-installation-grid {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-calculation-steps {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-calculation-steps article:last-child {
    grid-column: auto;
  }

  .electrical-ampacity-example-heading {
    flex-direction: column;
  }

  .electrical-ampacity-example-heading small {
    text-align: left;
  }

  .electrical-ampacity-example-values {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-factor-preview {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-factor-preview span {
    min-height: 0;
  }

  .electrical-ampacity-actions {
    display: grid;
  }

  .electrical-ampacity-actions button {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .electrical-ampacity-current-chain {
    grid-template-columns: 1fr;
  }

  .electrical-ampacity-current-chain > b {
    transform: rotate(90deg);
    text-align: center;
  }
}


/* SHK_ELECTRICAL_AMPACITY_INSTALLATION_LAYER_FIX_20260807 */

/*
 * Zeichenebenen der Verlegearten:
 * b    = Rohr / Kanal / Befestigung / Maßlinie
 * i    = Leitung bzw. Adern
 * span = Zusatzsymbol / Maßangabe
 *
 * Die elektrische Leitung muss vor Rohr und
 * Einbaudarstellung sichtbar bleiben.
 */

.electrical-ampacity-method-diagram b {
  z-index: 1;
}

.electrical-ampacity-method-diagram i {
  z-index: 2;
}

.electrical-ampacity-method-diagram span {
  z-index: 3;
}



/* SHK_ELECTRICAL_AMPACITY_C_PLASTER_VISUAL_FIX_20260807 */

/*
 * Verlegeart C · Leitung in / unter Putz
 *
 * links:
 * massiver Wandaufbau
 *
 * mittig:
 * Putzschicht
 *
 * darin:
 * mehradrige Leitung
 *
 * rechts:
 * Raumseite
 */

.electrical-ampacity-method-diagram.is-c-plaster {
  background:
    linear-gradient(
      90deg,
      #cfd5d8 0 34%,
      #e8ddca 34% 58%,
      #f9fbfc 58% 100%
    );
}

.electrical-ampacity-method-diagram.is-c-plaster::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 34%;
  width: 24%;
  border-left: 1px solid #b9aa91;
  border-right: 1px solid #c7baa5;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(151, 128, 92, .11) 0 6px,
      rgba(255, 255, 255, .16) 6px 12px
    );
  z-index: 0;
}

.electrical-ampacity-method-diagram.is-c-plaster i {
  top: 50%;
  left: 46%;
  width: 30px;
  height: 30px;
  border: 3px solid #596970;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 36% 34%,
      #8a532f 0 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 66% 34%,
      #397cab 0 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 36% 67%,
      #4b824d 0 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 66% 67%,
      #d0b83f 0 3px,
      transparent 3.5px
    ),
    #ffffff;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.electrical-ampacity-method-diagram.is-c-plaster b {
  display: none;
}

.electrical-ampacity-method-diagram.is-c-plaster span {
  display: block;
  top: 14px;
  bottom: 14px;
  left: 58%;
  width: 1px;
  border-left: 1px dashed rgba(93, 113, 122, .38);
  z-index: 1;
}



/* SHK_ELECTRICAL_AMPACITY_INSTALLATION_FINAL_VISUAL_FIX_20260807 */

/* C · Unterputz klar von Wärmedämmung unterscheiden */

.electrical-ampacity-method-diagram.is-c-plaster {
  background:
    linear-gradient(
      90deg,
      #cbd2d6 0 42%,
      #ded8ce 42% 60%,
      #fafcfd 60% 100%
    );
}

.electrical-ampacity-method-diagram.is-c-plaster::before {
  inset: 0 auto 0 42%;
  width: 18%;
  border-left: 1px solid #b9b1a5;
  border-right: 1px solid #c7c0b5;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(118, 110, 98, .06) 0 2px,
      transparent 2px 7px
    );
}

.electrical-ampacity-method-diagram.is-c-plaster i {
  left: 51%;
}

.electrical-ampacity-method-diagram.is-c-plaster span {
  left: 60%;
}


/* E · Abstandsdarstellung übersichtlicher */

.electrical-ampacity-method-diagram.is-e-two i,
.electrical-ampacity-method-diagram.is-e-three i {
  left: 72px;
}

.electrical-ampacity-method-diagram.is-e-two b,
.electrical-ampacity-method-diagram.is-e-three b {
  left: 31px;
  width: 25px;
}

.electrical-ampacity-method-diagram.is-e-two span {
  top: 19px;
  left: 48px;
  width: auto;
  border: 0;
}

.electrical-ampacity-method-diagram.is-e-two span::before {
  content: "≥ 0,3 d";
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(248, 252, 253, .92);
  color: #526b76;
  font-size: .62rem;
  font-weight: 800;
}


/* E · zweite Darstellung vereinfachen */

.electrical-ampacity-method-diagram.is-e-three::after {
  content: "";
  top: 22px;
  left: 93px;
  width: 3px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(83, 151, 193, .82),
      rgba(83, 151, 193, .05)
    );
}

.electrical-ampacity-method-diagram.is-e-three span {
  top: auto;
  bottom: 20px;
  left: 49px;
  width: 54px;
  border-top: 2px dashed #78909a;
}



/* SHK_ELECTRICAL_CABLE_TYPES_BASE_20260807 */

.electrical-cable-types {
  margin-top: 28px;
  padding: 26px;
  border: 1px solid rgba(101, 119, 133, .18);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .72),
      rgba(246, 249, 251, .86)
    ),
    var(--surface, #ffffff);
  box-shadow:
    0 14px 34px rgba(30, 46, 58, .07);
}

.electrical-cable-types-heading {
  max-width: 820px;
  margin-bottom: 24px;
}

.electrical-cable-types-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(47, 115, 154, .18);
  border-radius: 999px;
  background: rgba(69, 139, 177, .09);
  color: #326f91;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.electrical-cable-types-heading h2 {
  margin: 11px 0 8px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.12;
}

.electrical-cable-types-heading p {
  margin: 0;
  color: var(--muted, #647485);
  line-height: 1.65;
}

.electrical-cable-types-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.electrical-cable-type-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(98, 116, 130, .18);
  border-radius: 18px;
  background: var(--surface, #ffffff);
  box-shadow:
    0 8px 24px rgba(32, 48, 60, .055);
}

.electrical-cable-type-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 22px;
  overflow: hidden;
  border-bottom: 1px solid rgba(98, 116, 130, .14);
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(91, 160, 197, .13),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #f8fbfc,
      #edf3f6
    );
}

.electrical-cable-type-visual::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -44px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(83, 129, 154, .08);
  border-radius: 50%;
}

.electrical-cable-type-head {
  padding: 20px 20px 12px;
}

.electrical-cable-type-code {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #26363f;
  color: #ffffff;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .055em;
}

.electrical-cable-type-head h3 {
  margin: 11px 0 5px;
  font-size: 1.16rem;
  line-height: 1.25;
}

.electrical-cable-type-head p {
  margin: 0;
  color: var(--muted, #647485);
  font-size: .92rem;
  line-height: 1.5;
}

.electrical-cable-type-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 20px 14px;
}

.electrical-cable-type-facts > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 13px;
  padding: 11px 0;
  border-top: 1px solid rgba(100, 117, 131, .11);
}

.electrical-cable-type-facts dt {
  color: #465d69;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.45;
}

.electrical-cable-type-facts dd {
  min-width: 0;
  margin: 0;
  color: #344750;
  font-size: .88rem;
  line-height: 1.5;
}

.electrical-cable-type-practice {
  margin: auto 20px 20px;
  padding: 13px 14px;
  border: 1px solid rgba(57, 137, 91, .16);
  border-radius: 12px;
  background: rgba(72, 154, 102, .07);
}

.electrical-cable-type-practice strong {
  display: block;
  margin-bottom: 4px;
  color: #2d6f47;
  font-size: .82rem;
}

.electrical-cable-type-practice p {
  margin: 0;
  color: #41564b;
  font-size: .85rem;
  line-height: 1.5;
}

.electrical-cable-types-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid #668fa5;
  border-radius: 10px;
  background: rgba(93, 139, 163, .08);
}

.electrical-cable-types-note strong {
  display: block;
  margin-bottom: 4px;
  color: #355f75;
}

.electrical-cable-types-note p {
  margin: 0;
  color: var(--muted, #647485);
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .electrical-cable-types {
    padding: 20px;
  }

  .electrical-cable-types-grid {
    grid-template-columns: 1fr;
  }

  .electrical-cable-type-visual {
    min-height: 190px;
  }
}

@media (max-width: 520px) {
  .electrical-cable-types {
    margin-top: 22px;
    padding: 16px;
    border-radius: 16px;
  }

  .electrical-cable-types-grid {
    gap: 14px;
  }

  .electrical-cable-type-facts > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .electrical-cable-type-head,
  .electrical-cable-type-facts {
    padding-left: 16px;
    padding-right: 16px;
  }

  .electrical-cable-type-practice {
    margin-left: 16px;
    margin-right: 16px;
  }
}


/* SHK_ELECTRICAL_CABLE_VISUALS_01_04_20260807 */

.cable-illustration {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100%, 390px);
  min-height: 165px;
}

.cable-illustration-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.cable-illustration-label span {
  padding: 4px 7px;
  border: 1px solid rgba(89, 111, 124, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #60727c;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 2px 8px rgba(41, 57, 67, .04);
}

.cable-round-body,
.flex-cable-body {
  position: relative;
  display: block;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  box-shadow:
    0 15px 24px rgba(39, 51, 58, .15);
}

.cable-round-body {
  border: 14px solid #d7d9d8;
  background: #f2f1ec;
}

.cable-round-body::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(70, 82, 88, .14);
  border-radius: inherit;
}

.cable-core {
  position: absolute;
  width: 27px;
  height: 27px;
  border: 5px solid currentColor;
  border-radius: 50%;
  background: #bd743c;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .2),
    0 2px 4px rgba(48, 50, 47, .11);
}

.cable-core::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      #e0a26d,
      #a95d2c 75%
    );
}

.cable-core-brown {
  top: 8px;
  left: 35px;
  color: #835633;
}

.cable-core-blue {
  top: 34px;
  right: 5px;
  color: #4f90bd;
}

.cable-core-pe {
  right: 18px;
  bottom: 5px;
  color: #d0c541;
  background:
    linear-gradient(
      90deg,
      #4d9759 0 50%,
      #e2d643 50% 100%
    );
}

.cable-core-black {
  bottom: 5px;
  left: 18px;
  color: #333b40;
}

.cable-core-grey {
  top: 34px;
  left: 5px;
  color: #8f999d;
}

/* NYM */

.cable-illustration-nym .cable-round-body {
  margin-top: 4px;
  transform: rotate(-7deg);
}

/* NYIF */

.cable-flat-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 245px;
  height: 68px;
  margin-top: 24px;
  padding: 0 24px;
  border: 1px solid #d6d2c7;
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      #f6f4ec,
      #dfded5
    );
  box-shadow:
    0 12px 22px rgba(43, 54, 59, .11);
}

.cable-flat-body::before,
.cable-flat-body::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(129, 126, 116, .13);
}

.cable-flat-body::before {
  left: 33.333%;
}

.cable-flat-body::after {
  right: 33.333%;
}

.cable-flat-core {
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  border: 7px solid #6c8fa6;
  border-radius: 50%;
  background: #b56837;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .17);
}

.cable-flat-core:nth-child(1) {
  border-color: #5b7f96;
}

.cable-flat-core:nth-child(2) {
  border-color: #343b40;
}

.cable-flat-core-pe {
  border-color: #4d9257;
  background:
    radial-gradient(
      circle,
      #ba6b39 0 46%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      #4d9257 0 50%,
      #d7ca3d 50% 100%
    );
}

/* NYY */

.cable-round-body-heavy {
  margin-top: 3px;
  border-width: 17px;
  border-color: #30383d;
  background: #d7d9d8;
  transform: rotate(6deg);
}

.cable-round-body-heavy::before {
  inset: -13px;
  border-color: rgba(18, 25, 28, .22);
}

.cable-ground-line {
  position: absolute;
  right: 38px;
  bottom: 40px;
  display: grid;
  gap: 4px;
  width: 72px;
  transform: rotate(-7deg);
}

.cable-ground-line span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: rgba(115, 91, 64, .36);
}

.cable-ground-line span:nth-child(2) {
  width: 82%;
}

.cable-ground-line span:nth-child(3) {
  width: 62%;
}

/* H05V-U */

.cable-illustration-h05vu {
  grid-template-columns: 1fr 90px;
  align-items: center;
  column-gap: 20px;
  padding: 6px 42px 34px;
}

.single-core-wire {
  position: relative;
  width: 180px;
  height: 38px;
}

.single-core-insulation {
  position: absolute;
  top: 5px;
  right: 0;
  width: 135px;
  height: 28px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #4f90bd,
      #376c91
    );
  box-shadow:
    0 6px 12px rgba(42, 76, 96, .16);
}

.single-core-copper {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 0;
  width: 92px;
  height: 18px;
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(
      180deg,
      #dfa067,
      #a85f32
    );
}

.single-core-copper::after {
  content: "";
  position: absolute;
  right: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      #efb67f,
      #a85d31 76%
    );
}

.single-core-cutaway {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #4a87ae;
  box-shadow:
    0 8px 18px rgba(37, 68, 86, .13);
}

.single-core-cutaway-shell {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(37, 70, 90, .2);
  border-radius: inherit;
}

.single-core-cutaway-copper {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      #edb17a,
      #a96135 76%
    );
}

@media (max-width: 520px) {
  .cable-illustration-h05vu {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .single-core-wire {
    width: 160px;
  }

  .single-core-cutaway {
    width: 52px;
    height: 52px;
  }

  .single-core-cutaway-copper {
    inset: 14px;
  }

  .cable-flat-body {
    width: 210px;
  }
}


/* SHK_ELECTRICAL_CABLE_VISUALS_05_08_20260807 */

/* H05V-K · feindrähtige Aderleitung */

.cable-illustration-h05vk {
  grid-template-columns: 1fr 90px;
  align-items: center;
  column-gap: 22px;
  padding: 6px 40px 34px;
}

.strand-wire-body {
  position: relative;
  width: 180px;
  height: 46px;
}

.strand-wire-insulation {
  position: absolute;
  top: 5px;
  right: 0;
  width: 138px;
  height: 36px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #4f90bd,
      #376b90
    );
  box-shadow:
    0 7px 14px rgba(42, 76, 96, .16);
}

.strand-wire-bundle {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 0;
  width: 99px;
  height: 22px;
}

.strand-wire-bundle span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      #efb780,
      #a75e31 76%
    );
  box-shadow:
    0 1px 2px rgba(78, 48, 29, .15);
}

.strand-wire-bundle span:nth-child(1) {
  top: 0;
  left: 2px;
}

.strand-wire-bundle span:nth-child(2) {
  top: 10px;
  left: 2px;
}

.strand-wire-bundle span:nth-child(3) {
  top: 5px;
  left: 11px;
}

.strand-wire-bundle span:nth-child(4) {
  top: 0;
  left: 20px;
}

.strand-wire-bundle span:nth-child(5) {
  top: 10px;
  left: 20px;
}

.strand-wire-bundle span:nth-child(6) {
  top: 5px;
  left: 29px;
}

.strand-wire-bundle span:nth-child(7) {
  top: 5px;
  left: 38px;
}

.strand-wire-cutaway {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #d58a4f 0 29%,
      #4b89af 30% 100%
    );
  box-shadow:
    0 8px 18px rgba(37, 68, 86, .14);
}

.strand-wire-cutaway > div {
  position: absolute;
  inset: 20px;
}

.strand-wire-cutaway span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bd703c;
}

.strand-wire-cutaway span:nth-child(1) {
  top: 0;
  left: 10px;
}

.strand-wire-cutaway span:nth-child(2) {
  top: 8px;
  left: 0;
}

.strand-wire-cutaway span:nth-child(3) {
  top: 8px;
  right: 0;
}

.strand-wire-cutaway span:nth-child(4) {
  bottom: 0;
  left: 10px;
}

.strand-wire-cutaway span:nth-child(5) {
  top: 9px;
  left: 10px;
}

.strand-wire-cutaway span:nth-child(6) {
  bottom: 4px;
  left: 2px;
}

.strand-wire-cutaway span:nth-child(7) {
  right: 2px;
  bottom: 4px;
}

/* Flexible Schlauchleitungen */

.flex-cable-body {
  margin-top: 2px;
}

.flex-cable-body-pvc {
  border: 15px solid #e3e4e1;
  background: #f3f3ed;
  transform: rotate(-5deg);
}

.flex-cable-body-rubber-light {
  border: 16px solid #4f575b;
  background: #d8d9d5;
  transform: rotate(4deg);
}

.flex-cable-body-rubber-heavy {
  border: 19px solid #272e32;
  background: #bfc4c5;
  transform: rotate(-4deg);
  box-shadow:
    0 16px 28px rgba(24, 32, 36, .22);
}

.flex-cable-body-rubber-heavy::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(15, 21, 24, .27);
  border-radius: 50%;
}

/* H05VV-F · Beweglichkeit */

.flex-cable-wave {
  position: absolute;
  right: 35px;
  top: 33px;
  width: 70px;
  height: 40px;
}

.flex-cable-wave span {
  position: absolute;
  inset: 10px 0;
  border-top: 3px solid rgba(71, 129, 163, .58);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.flex-cable-wave span::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 8px;
  width: 52px;
  height: 20px;
  border-bottom: 3px solid rgba(71, 129, 163, .38);
  border-radius: 50%;
}

/* H05RR-F · leichte Gummischlauchleitung */

.rubber-flex-symbol {
  position: absolute;
  right: 36px;
  top: 35px;
  display: grid;
  gap: 7px;
  width: 58px;
}

.rubber-flex-symbol span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(70, 88, 97, .18),
      rgba(70, 88, 97, .62),
      rgba(70, 88, 97, .18)
    );
}

.rubber-flex-symbol span:nth-child(1) {
  width: 70%;
}

.rubber-flex-symbol span:nth-child(2) {
  width: 100%;
}

.rubber-flex-symbol span:nth-child(3) {
  width: 82%;
}

/* H07RN-F · robuste Außendarstellung */

.heavy-duty-symbol {
  position: absolute;
  right: 27px;
  top: 23px;
  width: 78px;
  height: 82px;
}

.heavy-duty-ground {
  position: absolute;
  right: 0;
  bottom: 12px;
  width: 70px;
  height: 3px;
  border-radius: 999px;
  background: rgba(96, 78, 58, .45);
}

.heavy-duty-ground::before,
.heavy-duty-ground::after {
  content: "";
  position: absolute;
  right: 5px;
  height: 2px;
  border-radius: 999px;
  background: rgba(96, 78, 58, .28);
}

.heavy-duty-ground::before {
  bottom: -7px;
  width: 52px;
}

.heavy-duty-ground::after {
  bottom: -13px;
  width: 35px;
}

.heavy-duty-drop {
  position: absolute;
  top: 2px;
  right: 9px;
  width: 17px;
  height: 23px;
  border-radius:
    55% 45% 58% 42% /
    66% 65% 35% 34%;
  background:
    linear-gradient(
      145deg,
      #72b5d5,
      #3c7d9e
    );
  transform: rotate(38deg);
  opacity: .86;
}

.heavy-duty-impact {
  position: absolute;
  top: 19px;
  left: 3px;
  width: 28px;
  height: 28px;
}

.heavy-duty-impact::before,
.heavy-duty-impact::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: rgba(80, 91, 97, .55);
}

.heavy-duty-impact::before {
  transform: rotate(45deg);
}

.heavy-duty-impact::after {
  transform: rotate(-45deg);
}

/* Adern in den flexiblen Leitungen */

.flex-cable-body .cable-core-brown {
  top: 12px;
  left: 38px;
}

.flex-cable-body .cable-core-blue {
  top: 39px;
  right: 7px;
}

.flex-cable-body .cable-core-pe {
  right: 22px;
  bottom: 6px;
}

.flex-cable-body .cable-core-black {
  bottom: 6px;
  left: 22px;
}

.flex-cable-body .cable-core-grey {
  top: 39px;
  left: 7px;
}

.cable-illustration-h05vvf
.flex-cable-body .cable-core-black,
.cable-illustration-h05vvf
.flex-cable-body .cable-core-grey,
.cable-illustration-h05rrf
.flex-cable-body .cable-core-black,
.cable-illustration-h05rrf
.flex-cable-body .cable-core-grey {
  display: none;
}

.cable-illustration-h05vvf
.flex-cable-body .cable-core-brown,
.cable-illustration-h05rrf
.flex-cable-body .cable-core-brown {
  top: 13px;
  left: 38px;
}

.cable-illustration-h05vvf
.flex-cable-body .cable-core-blue,
.cable-illustration-h05rrf
.flex-cable-body .cable-core-blue {
  top: 48px;
  right: 14px;
}

.cable-illustration-h05vvf
.flex-cable-body .cable-core-pe,
.cable-illustration-h05rrf
.flex-cable-body .cable-core-pe {
  right: auto;
  bottom: 9px;
  left: 17px;
}

@media (max-width: 520px) {
  .cable-illustration-h05vk {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .strand-wire-body {
    width: 160px;
  }

  .strand-wire-cutaway {
    width: 54px;
    height: 54px;
  }

  .strand-wire-cutaway > div {
    inset: 13px;
  }

  .flex-cable-wave,
  .rubber-flex-symbol,
  .heavy-duty-symbol {
    right: 10px;
    transform: scale(.82);
    transform-origin: right top;
  }
}


/* SHK_ELECTRICAL_CABLE_SVG_BASE_20260807 */

.electrical-cable-type-visual-svg {
  padding: 18px;
}

.electrical-cable-visual-svg {
  display: block;
  width: min(100%, 340px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(35, 48, 58, .08));
}

@media (max-width: 520px) {
  .electrical-cable-type-visual-svg {
    padding: 14px;
  }

  .electrical-cable-visual-svg {
    width: 100%;
  }
}

/* SHK_ELECTRICAL_SHK_SYSTEMS_CSS_20260807 */

.electrical-shk-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 72px;
}

.electrical-shk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 28px;
  align-items: stretch;
  margin-bottom: 32px;
}

.electrical-shk-hero-copy,
.electrical-shk-hero-visual {
  border: 1px solid rgba(20, 45, 72, .12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(12, 31, 52, .08);
}

.electrical-shk-hero-copy {
  padding: 34px;
}

.electrical-shk-hero-copy h1 {
  margin: 8px 0 16px;
  color: var(--navy, #10263f);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.03;
}

.electrical-shk-hero-copy h1 small {
  display: block;
  margin-top: 12px;
  color: #5d6d7c;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 650;
  line-height: 1.45;
}

.electrical-shk-hero-copy > p {
  max-width: 760px;
  color: #526171;
  line-height: 1.7;
}

.electrical-shk-hero-visual {
  display: flex;
  min-height: 290px;
  padding: 28px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.electrical-shk-hero-visual > span {
  margin-bottom: 18px;
  color: #657485;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.electrical-shk-hero-visual > div {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.electrical-shk-hero-visual b {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 20px;
  background: var(--navy, #10263f);
  color: #fff;
  font-size: 2rem;
}

.electrical-shk-hero-visual i {
  color: #8492a0;
  font-size: 2rem;
  font-style: normal;
}

.electrical-shk-hero-visual > strong {
  color: var(--navy, #10263f);
  font-size: 1.08rem;
}

.electrical-shk-hero-visual > small {
  margin-top: 8px;
  color: #71808e;
}

.electrical-shk-calculator {
  display: grid;
  gap: 20px;
}

.electrical-shk-panel {
  padding: 24px;
  border: 1px solid rgba(20, 45, 72, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(12, 31, 52, .05);
}

.electrical-shk-panel-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.electrical-shk-panel-heading > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

.electrical-shk-panel-heading h3 {
  margin: 0;
  color: var(--navy, #10263f);
  font-size: 1.18rem;
}

.electrical-shk-step {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--navy, #10263f);
  color: #fff;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .06em;
}

.electrical-shk-device-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.electrical-shk-device-switch label {
  position: relative;
  cursor: pointer;
}

.electrical-shk-device-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.electrical-shk-device-switch label > span {
  display: flex;
  min-height: 112px;
  padding: 18px;
  flex-direction: column;
  justify-content: center;
  border: 2px solid rgba(20, 45, 72, .11);
  border-radius: 18px;
  background: #f8fafc;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background .18s ease;
}

.electrical-shk-device-switch label:hover > span {
  transform: translateY(-1px);
  border-color: rgba(20, 45, 72, .28);
}

.electrical-shk-device-switch input:checked + span {
  border-color: var(--navy, #10263f);
  background: #fff;
  box-shadow: 0 8px 24px rgba(12, 31, 52, .10);
}

.electrical-shk-device-switch input:focus-visible + span {
  outline: 3px solid rgba(30, 95, 160, .25);
  outline-offset: 3px;
}

.electrical-shk-device-switch strong {
  color: var(--navy, #10263f);
  font-size: 1rem;
}

.electrical-shk-device-switch small {
  margin-top: 6px;
  color: #697886;
  line-height: 1.45;
}

.electrical-shk-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.electrical-shk-field {
  display: grid;
  gap: 9px;
}

.electrical-shk-field > span {
  display: flex;
  min-height: 26px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.electrical-shk-field strong {
  color: #263b50;
  font-size: .92rem;
}

.electrical-shk-field input,
.electrical-shk-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #cdd6de;
  border-radius: 12px;
  background: #fff;
  color: #182a3b;
  font: inherit;
}

.electrical-shk-field input:focus,
.electrical-shk-field select:focus {
  border-color: var(--navy, #10263f);
  outline: 3px solid rgba(30, 95, 160, .12);
}

.electrical-shk-input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cdd6de;
  border-radius: 12px;
  background: #fff;
}

.electrical-shk-input-unit:focus-within {
  border-color: var(--navy, #10263f);
  outline: 3px solid rgba(30, 95, 160, .12);
}

.electrical-shk-input-unit input {
  border: 0;
  border-radius: 0;
  outline: 0;
}

.electrical-shk-input-unit input:focus {
  border: 0;
  outline: 0;
}

.electrical-shk-input-unit > span {
  min-width: 52px;
  padding: 0 13px;
  color: #5f6e7c;
  font-weight: 800;
  text-align: center;
}

.electrical-shk-presets {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 16px;
  background: #f5f8fb;
}

.electrical-shk-presets > span {
  display: block;
  margin-bottom: 10px;
  color: #526171;
  font-size: .85rem;
  font-weight: 800;
}

.electrical-shk-presets > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.electrical-shk-presets button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #cbd5de;
  border-radius: 10px;
  background: #fff;
  color: var(--navy, #10263f);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.electrical-shk-presets button:hover {
  border-color: var(--navy, #10263f);
}

.electrical-shk-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 15px 16px;
  border: 1px solid #d8e0e7;
  border-radius: 14px;
  background: #f8fafc;
  cursor: pointer;
}

.electrical-shk-toggle input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.electrical-shk-toggle span {
  display: grid;
  gap: 3px;
}

.electrical-shk-toggle strong {
  color: #263b50;
}

.electrical-shk-toggle small {
  color: #697886;
}

.electrical-shk-result-panel {
  border-width: 2px;
}

.electrical-shk-status {
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #eef2f5;
  color: #465665;
  font-weight: 800;
}

.electrical-shk-status.is-ok {
  background: #e8f6ed;
  color: #176538;
}

.electrical-shk-status.is-warning {
  background: #fff4d6;
  color: #7a5200;
}

.electrical-shk-status.is-error {
  background: #fdecec;
  color: #9b2929;
}

.electrical-shk-main-result {
  display: grid;
  margin-bottom: 18px;
  padding: 24px;
  place-items: center;
  border-radius: 18px;
  background: var(--navy, #10263f);
  color: #fff;
  text-align: center;
}

.electrical-shk-main-result > span {
  opacity: .76;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.electrical-shk-main-result > strong {
  margin: 5px 0;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.electrical-shk-main-result > small {
  opacity: .82;
}

.electrical-shk-result-grid,
.electrical-shk-subresults {
  display: grid;
  gap: 12px;
}

.electrical-shk-result-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.electrical-shk-subresults {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.electrical-shk-result-grid > div,
.electrical-shk-subresults > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #dce3e9;
  border-radius: 14px;
  background: #f8fafc;
}

.electrical-shk-result-grid span,
.electrical-shk-subresults span {
  color: #697886;
  font-size: .78rem;
  font-weight: 750;
}

.electrical-shk-result-grid strong,
.electrical-shk-subresults strong {
  color: #253a4e;
  overflow-wrap: anywhere;
}

.electrical-shk-assessment {
  margin: 18px 0 0;
  padding: 16px;
  border-left: 4px solid var(--navy, #10263f);
  border-radius: 0 12px 12px 0;
  background: #f5f8fb;
  color: #47596a;
  line-height: 1.65;
}

.electrical-shk-next-tool {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #d8e0e7;
  border-radius: 16px;
  background: #fff;
}

.electrical-shk-next-tool strong {
  color: var(--navy, #10263f);
}

.electrical-shk-next-tool p {
  margin: 7px 0 12px;
  color: #617080;
  line-height: 1.55;
}

.electrical-shk-next-tool a {
  display: inline-flex;
  min-height: 42px;
  padding: 0 15px;
  align-items: center;
  border-radius: 11px;
  background: var(--navy, #10263f);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.electrical-shk-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.electrical-shk-guidance > div {
  padding: 22px;
  border: 1px solid rgba(20, 45, 72, .12);
  border-radius: 18px;
  background: #fff;
}

.electrical-shk-guidance > div:first-child {
  grid-column: 1 / -1;
}

.electrical-shk-guidance h2 {
  margin: 8px 0 10px;
  color: var(--navy, #10263f);
}

.electrical-shk-guidance strong {
  color: var(--navy, #10263f);
  font-size: 1.05rem;
}

.electrical-shk-guidance p {
  margin: 8px 0 0;
  color: #586979;
  line-height: 1.65;
}

.electrical-shk-disclaimer {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid #d5dde5;
  border-radius: 17px;
  background: #f6f8fa;
}

.electrical-shk-disclaimer strong {
  color: var(--navy, #10263f);
}

.electrical-shk-disclaimer p {
  margin: 8px 0 0;
  color: #5b6b79;
  line-height: 1.65;
}

.electrical-shk-info-popover code {
  white-space: pre-line;
}

@media (max-width: 900px) {
  .electrical-shk-hero {
    grid-template-columns: 1fr;
  }

  .electrical-shk-hero-visual {
    min-height: 240px;
  }

  .electrical-shk-device-switch,
  .electrical-shk-fields {
    grid-template-columns: 1fr;
  }

  .electrical-shk-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .electrical-shk-guidance {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .electrical-shk-page {
    width: min(100% - 20px, 1180px);
    padding-top: 20px;
  }

  .electrical-shk-hero-copy,
  .electrical-shk-hero-visual,
  .electrical-shk-panel {
    padding: 18px;
    border-radius: 18px;
  }

  .electrical-shk-hero-copy h1 {
    font-size: clamp(1.9rem, 10vw, 2.6rem);
  }

  .electrical-shk-panel-heading {
    gap: 10px;
  }

  .electrical-shk-panel-heading > div {
    align-items: flex-start;
  }

  .electrical-shk-result-grid,
  .electrical-shk-subresults {
    grid-template-columns: 1fr;
  }

  .electrical-shk-main-result {
    padding: 20px 14px;
  }

  .electrical-shk-presets > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .electrical-shk-presets button {
    width: 100%;
  }
}

/* SHK_ELECTRICAL_SHK_SYSTEMS_CSS_END_20260807 */

/* SHK_ELECTRICAL_SHK_HEADER_FIX_20260807 */

.electrical-shk-header {
  width: 100%;
  min-height: 72px;
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--navy, #10263f);
  box-sizing: border-box;
}

.electrical-shk-header .hub-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.electrical-shk-header .hub-brand span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.electrical-shk-header .hub-brand strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.1;
}

.electrical-shk-header .hub-brand small {
  color: rgba(255, 255, 255, .68);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.2;
}

.electrical-shk-header .hub-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.electrical-shk-header .hub-navigation a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 800;
  white-space: nowrap;
}

.electrical-shk-header .hub-navigation a:hover,
.electrical-shk-header .hub-navigation a:focus-visible,
.electrical-shk-header .hub-navigation a[aria-current="page"] {
  color: #fff;
}

@media (max-width: 680px) {
  .electrical-shk-header {
    min-height: auto;
    padding: 14px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .electrical-shk-header .hub-navigation {
    width: 100%;
    justify-content: flex-start;
    gap: 12px 18px;
  }
}

/* SHK_ELECTRICAL_SHK_HEADER_FIX_END_20260807 */

/* SHK_ELECTRICAL_PV_CSS_20260807 */

.electrical-pv-header {
  width: 100%;
  min-height: 72px;
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--navy, #10263f);
  box-sizing: border-box;
}

.electrical-pv-header .hub-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.electrical-pv-header .hub-brand span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.electrical-pv-header .hub-brand strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.1;
}

.electrical-pv-header .hub-brand small {
  color: rgba(255, 255, 255, .68);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.2;
}

.electrical-pv-header .hub-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.electrical-pv-header .hub-navigation a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 800;
  white-space: nowrap;
}

.electrical-pv-header .hub-navigation a:hover,
.electrical-pv-header .hub-navigation a:focus-visible,
.electrical-pv-header .hub-navigation a[aria-current="page"] {
  color: #fff;
}

.electrical-pv-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 72px;
}

.electrical-pv-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, .75fr);
  gap: 28px;
  align-items: stretch;
  margin-bottom: 32px;
}

.electrical-pv-hero-copy,
.electrical-pv-hero-visual {
  border: 1px solid rgba(20, 45, 72, .12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(12, 31, 52, .08);
}

.electrical-pv-hero-copy {
  padding: 34px;
}

.electrical-pv-hero-copy h1 {
  margin: 8px 0 16px;
  color: var(--navy, #10263f);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.03;
}

.electrical-pv-hero-copy h1 small {
  display: block;
  margin-top: 12px;
  color: #5d6d7c;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 650;
  line-height: 1.45;
}

.electrical-pv-hero-copy > p {
  max-width: 760px;
  color: #526171;
  line-height: 1.7;
}

.electrical-pv-hero-visual {
  display: flex;
  min-height: 290px;
  padding: 28px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.electrical-pv-hero-visual > span {
  margin-bottom: 20px;
  color: #657485;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.electrical-pv-flow-mini {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.electrical-pv-flow-mini b {
  display: grid;
  min-width: 66px;
  min-height: 66px;
  padding: 8px;
  place-items: center;
  border-radius: 18px;
  background: var(--navy, #10263f);
  color: #fff;
  font-size: 1rem;
}

.electrical-pv-flow-mini i {
  color: #80909e;
  font-size: 1.5rem;
  font-style: normal;
}

.electrical-pv-hero-visual > strong {
  color: var(--navy, #10263f);
  font-size: 1.08rem;
}

.electrical-pv-hero-visual > small {
  margin-top: 8px;
  color: #71808e;
}

.electrical-pv-calculator {
  display: grid;
  gap: 20px;
}

.electrical-pv-panel {
  padding: 24px;
  border: 1px solid rgba(20, 45, 72, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(12, 31, 52, .05);
}

.electrical-pv-panel-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.electrical-pv-panel-heading > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

.electrical-pv-panel-heading h3 {
  margin: 0;
  color: var(--navy, #10263f);
  font-size: 1.18rem;
}

.electrical-pv-step {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--navy, #10263f);
  color: #fff;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .06em;
}

.electrical-pv-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.electrical-pv-field {
  display: grid;
  gap: 9px;
}

.electrical-pv-field > span {
  display: flex;
  min-height: 26px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.electrical-pv-field strong {
  color: #263b50;
  font-size: .92rem;
}

.electrical-pv-field input,
.electrical-pv-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #cdd6de;
  border-radius: 12px;
  background: #fff;
  color: #182a3b;
  font: inherit;
}

.electrical-pv-field input:focus,
.electrical-pv-field select:focus {
  border-color: var(--navy, #10263f);
  outline: 3px solid rgba(30, 95, 160, .12);
}

.electrical-pv-input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cdd6de;
  border-radius: 12px;
  background: #fff;
}

.electrical-pv-input-unit:focus-within {
  border-color: var(--navy, #10263f);
  outline: 3px solid rgba(30, 95, 160, .12);
}

.electrical-pv-input-unit input {
  border: 0;
  border-radius: 0;
  outline: 0;
}

.electrical-pv-input-unit input:focus {
  border: 0;
  outline: 0;
}

.electrical-pv-input-unit > span {
  min-width: 58px;
  padding: 0 12px;
  color: #5f6e7c;
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.electrical-pv-presets {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #f5f8fb;
}

.electrical-pv-presets > span {
  display: block;
  margin-bottom: 10px;
  color: #526171;
  font-size: .85rem;
  font-weight: 800;
}

.electrical-pv-presets > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.electrical-pv-presets button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #cbd5de;
  border-radius: 10px;
  background: #fff;
  color: var(--navy, #10263f);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.electrical-pv-presets button:hover,
.electrical-pv-presets button:focus-visible {
  border-color: var(--navy, #10263f);
}

.electrical-pv-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 15px 16px;
  border: 1px solid #d8e0e7;
  border-radius: 14px;
  background: #f8fafc;
  cursor: pointer;
}

.electrical-pv-toggle input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.electrical-pv-toggle span {
  display: grid;
  gap: 3px;
}

.electrical-pv-toggle strong {
  color: #263b50;
}

.electrical-pv-toggle small {
  color: #697886;
}

.electrical-pv-calculator {
  display: grid;
  gap: 20px;
}

.electrical-pv-panel {
  padding: 24px;
  border: 1px solid rgba(20, 45, 72, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(12, 31, 52, .05);
}

.electrical-pv-panel-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.electrical-pv-panel-heading > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

.electrical-pv-panel-heading h3 {
  margin: 0;
  color: var(--navy, #10263f);
  font-size: 1.18rem;
}

.electrical-pv-step {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--navy, #10263f);
  color: #fff;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .06em;
}

.electrical-pv-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.electrical-pv-field {
  display: grid;
  gap: 9px;
}

.electrical-pv-field > span {
  display: flex;
  min-height: 26px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.electrical-pv-field strong {
  color: #263b50;
  font-size: .92rem;
}

.electrical-pv-field input,
.electrical-pv-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #cdd6de;
  border-radius: 12px;
  background: #fff;
  color: #182a3b;
  font: inherit;
}

.electrical-pv-field input:focus,
.electrical-pv-field select:focus {
  border-color: var(--navy, #10263f);
  outline: 3px solid rgba(30, 95, 160, .12);
}

.electrical-pv-input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cdd6de;
  border-radius: 12px;
  background: #fff;
}

.electrical-pv-input-unit:focus-within {
  border-color: var(--navy, #10263f);
  outline: 3px solid rgba(30, 95, 160, .12);
}

.electrical-pv-input-unit input {
  border: 0;
  border-radius: 0;
  outline: 0;
}

.electrical-pv-input-unit input:focus {
  border: 0;
  outline: 0;
}

.electrical-pv-input-unit > span {
  min-width: 58px;
  padding: 0 12px;
  color: #5f6e7c;
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.electrical-pv-presets {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #f5f8fb;
}

.electrical-pv-presets > span {
  display: block;
  margin-bottom: 10px;
  color: #526171;
  font-size: .85rem;
  font-weight: 800;
}

.electrical-pv-presets > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.electrical-pv-presets button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #cbd5de;
  border-radius: 10px;
  background: #fff;
  color: var(--navy, #10263f);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.electrical-pv-presets button:hover,
.electrical-pv-presets button:focus-visible {
  border-color: var(--navy, #10263f);
}

.electrical-pv-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 15px 16px;
  border: 1px solid #d8e0e7;
  border-radius: 14px;
  background: #f8fafc;
  cursor: pointer;
}

.electrical-pv-toggle input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.electrical-pv-toggle span {
  display: grid;
  gap: 3px;
}

.electrical-pv-toggle strong {
  color: #263b50;
}

.electrical-pv-toggle small {
  color: #697886;
}

.electrical-pv-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.electrical-pv-guidance > div {
  padding: 22px;
  border: 1px solid rgba(20, 45, 72, .12);
  border-radius: 18px;
  background: #fff;
}

.electrical-pv-guidance > div:first-child {
  grid-column: 1 / -1;
}

.electrical-pv-guidance h2 {
  margin: 8px 0 10px;
  color: var(--navy, #10263f);
}

.electrical-pv-guidance strong {
  color: var(--navy, #10263f);
  font-size: 1.05rem;
}

.electrical-pv-guidance p {
  margin: 8px 0 0;
  color: #586979;
  line-height: 1.65;
}

.electrical-pv-disclaimer {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid #d5dde5;
  border-radius: 17px;
  background: #f6f8fa;
}

.electrical-pv-disclaimer strong {
  color: var(--navy, #10263f);
}

.electrical-pv-disclaimer p {
  margin: 8px 0 0;
  color: #5b6b79;
  line-height: 1.65;
}

.electrical-pv-info-popover code {
  white-space: pre-line;
}

@media (max-width: 950px) {
  .electrical-pv-hero {
    grid-template-columns: 1fr;
  }

  .electrical-pv-hero-visual {
    min-height: 240px;
  }

  .electrical-pv-main-results {
    grid-template-columns: 1fr;
  }

  .electrical-pv-flow {
    grid-template-columns: 1fr;
  }

  .electrical-pv-flow > i {
    min-height: 24px;
    transform: rotate(90deg);
  }

  .electrical-pv-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .electrical-pv-guidance {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .electrical-pv-header {
    min-height: auto;
    padding: 14px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .electrical-pv-header .hub-navigation {
    width: 100%;
    justify-content: flex-start;
    gap: 12px 18px;
  }

  .electrical-pv-fields {
    grid-template-columns: 1fr;
  }

  .electrical-pv-cost-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .electrical-pv-page {
    width: min(100% - 20px, 1180px);
    padding-top: 20px;
  }

  .electrical-pv-hero-copy,
  .electrical-pv-hero-visual,
  .electrical-pv-panel {
    padding: 18px;
    border-radius: 18px;
  }

  .electrical-pv-hero-copy h1 {
    font-size: clamp(1.9rem, 10vw, 2.6rem);
  }

  .electrical-pv-flow-mini {
    gap: 6px;
  }

  .electrical-pv-flow-mini b {
    min-width: 56px;
    min-height: 56px;
    font-size: .85rem;
  }

  .electrical-pv-result-grid {
    grid-template-columns: 1fr;
  }

  .electrical-pv-presets > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .electrical-pv-presets button {
    width: 100%;
  }
}

/* SHK_ELECTRICAL_PV_CSS_END_20260807 */

/* SHK_PUBLIC_MANUFACTURERS_DESIGN_CSS_20260807 */

.manufacturer-public-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 64px;
}

.manufacturer-public-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 32px;
}

.manufacturer-public-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #3979aa;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.manufacturer-public-hero h1 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.manufacturer-public-hero p {
  max-width: 720px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
}

.manufacturer-back-link {
  white-space: nowrap;
  font-weight: 750;
  text-decoration: none;
}

.manufacturer-public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.manufacturer-public-page .ma-manufacturer-card {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 22px;
  border: 1px solid rgba(21,61,94,.18);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(8,43,73,.10);
}


.manufacturer-public-page .ma-manufacturer-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.manufacturer-public-page .ma-manufacturer-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #082b49;
  color: #fff;
  font-weight: 900;
}

.manufacturer-public-page .ma-status {
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f5ec;
  color: #176733;
  font-size: .76rem;
  font-weight: 800;
}

.manufacturer-public-page .ma-manufacturer-card h2 {
  margin: 0 0 5px;
  color: var(--navy);
}

.manufacturer-public-page .ma-manufacturer-company {
  min-height: 42px;
  margin-bottom: 18px;
  opacity: .72;
}

.manufacturer-public-page .ma-contact-list {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.manufacturer-public-page .ma-contact-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(8,43,73,.12);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.manufacturer-public-page a.ma-contact-row:hover {
  background: rgba(8,43,73,.05);
  border-color: rgba(8,43,73,.28);
}

.manufacturer-public-page .ma-contact-icon {
  text-align: center;
  font-size: 1.05rem;
}

.manufacturer-public-page .ma-contact-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manufacturer-public-page .ma-actions {
  margin-top: auto;
}

.manufacturer-public-page .ma-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 12px;
  background: #082b49;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.manufacturer-empty {
  grid-column: 1 / -1;
  padding: 28px;
  border-radius: 18px;
  background: #fff;
}

@media (max-width: 980px) {
  .manufacturer-public-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .manufacturer-public-main {
    width: min(100% - 22px, 1180px);
    padding-top: 28px;
  }

  .manufacturer-public-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .manufacturer-public-grid {
    grid-template-columns: 1fr;
  }
}

/* /SHK_PUBLIC_MANUFACTURERS_DESIGN_CSS_20260807 */

.manufacturer-public-page .ma-status-pending {
  background: #fff3d6;
  color: #8a5a00;
}


/* SHK_FAULT_PARTS_CSS_20260809 */
.fault-parts {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(15, 63, 91, 0.16);
  border-radius: 1rem;
  background: #f7fafc;
}
.fault-parts > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}
.fault-parts > summary::-webkit-details-marker {
  display: none;
}
.fault-parts > summary span {
  color: #537084;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fault-parts > summary strong {
  grid-column: 1;
  color: #092d4c;
}
.fault-parts > summary small {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #537084;
}
.fault-parts > table {
  width: 100%;
  margin: 0;
  border-top: 1px solid rgba(15, 63, 91, 0.12);
  border-collapse: collapse;
  background: #ffffff;
  font-size: 0.92rem;
}
.fault-parts > table th {
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid rgba(15, 63, 91, 0.12);
  color: #537084;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
}
.fault-parts > table td {
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid rgba(15, 63, 91, 0.08);
  color: #092d4c;
  vertical-align: top;
}
.fault-parts > table tbody tr:last-child td {
  border-bottom: none;
}
.fault-parts > table td:first-child {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .fault-parts > table {
    display: block;
    overflow-x: auto;
  }
}

/* SHK_TYPENSCHILD_FAULT_CARD_20260809 */
.fault-typenschild-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: 27px;
  color: white;
  text-decoration: none;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(221, 86, 69, .46),
      transparent 32%
    ),
    linear-gradient(135deg, #082b49, #12567f);
  box-shadow: 0 28px 65px rgba(8, 43, 73, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.fault-typenschild-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 32px 72px rgba(8, 43, 73, .24);
}

.fault-typenschild-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
  font-size: 24px;
}

.fault-typenschild-text span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.fault-typenschild-text h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
}

.fault-typenschild-text p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.5;
}

.fault-typenschild-card > strong {
  white-space: nowrap;
  font-size: 15px;
}

@media (max-width: 720px) {
  .fault-typenschild-card {
    grid-template-columns: auto 1fr;
    row-gap: 16px;
  }

  .fault-typenschild-card > strong {
    grid-column: 1 / -1;
  }
}


/* SHK_STANDORTDATEN_HERO_TITLE_FIX_20260811 */
.standortdaten-overview-page .climate-overview-copy h1 {
  font-size: clamp(3.25rem, 5.8vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
}

@media (max-width: 900px) {
  .standortdaten-overview-page .climate-overview-copy h1 {
    font-size: clamp(3.1rem, 10vw, 5.5rem);
  }
}
/* SHK_STANDORTDATEN_HERO_TITLE_FIX_END_20260811 */


/* SHK_STANDORTDATEN_SELECTOR_CSS_V1_20260811 */

.standortdaten-overview-page .standort-selector {
  margin: 4px 0 12px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(11, 101, 116, 0.18);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(232, 248, 250, 0.94)
    );
  box-shadow: 0 22px 55px rgba(19, 82, 94, 0.11);
}

.standortdaten-overview-page .standort-selector-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 28px;
}

.standortdaten-overview-page .standort-selector-heading h2 {
  margin: 4px 0 0;
  color: #124b59;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.standortdaten-overview-page .standort-selector-heading > p {
  max-width: 480px;
  margin: 0;
  color: #55717a;
  line-height: 1.7;
}

.standortdaten-overview-page .standort-selector-search {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(11, 101, 116, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
}

.standortdaten-overview-page .standort-selector-search > label {
  color: #173b46;
  font-size: 0.9rem;
  font-weight: 850;
}

.standortdaten-overview-page .standort-selector-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.standortdaten-overview-page .standort-selector-input-row input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #bfd0d6;
  border-radius: 13px;
  outline: none;
  color: #173b46;
  background: #fff;
  box-sizing: border-box;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.standortdaten-overview-page .standort-selector-input-row input::placeholder {
  color: #71868d;
  opacity: 1;
}

.standortdaten-overview-page .standort-selector-input-row input:focus {
  border-color: #0b6574;
  box-shadow: 0 0 0 4px rgba(11, 101, 116, 0.13);
}

.standortdaten-overview-page .standort-selector-input-row button,
.standortdaten-overview-page .standort-selector-actions button {
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 850;
  line-height: 1.2;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.standortdaten-overview-page .standort-selector-input-row button {
  color: #fff;
  background: #124b59;
  box-shadow: 0 12px 26px rgba(18, 75, 89, 0.2);
}

.standortdaten-overview-page .standort-selector-input-row button:not(:disabled):hover,
.standortdaten-overview-page .standort-selector-actions button:first-child:hover {
  background: #0b6574;
  transform: translateY(-1px);
}

.standortdaten-overview-page .standort-selector-input-row button:disabled {
  cursor: not-allowed;
  color: #6c7f85;
  background: #dce5e8;
  box-shadow: none;
  opacity: 0.78;
}

.standortdaten-overview-page .standort-selector-input-row button:focus-visible,
.standortdaten-overview-page .standort-selector-actions button:focus-visible {
  outline: 3px solid rgba(11, 101, 116, 0.3);
  outline-offset: 3px;
}

.standortdaten-overview-page .standort-selector-hint {
  margin: 0;
  color: #607981;
  font-size: 0.88rem;
  line-height: 1.55;
}

.standortdaten-overview-page .standort-selector-status {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 2px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(11, 101, 116, 0.18);
  border-radius: 12px;
  color: #174b56;
  background: rgba(11, 101, 116, 0.08);
  font-size: 0.9rem;
  line-height: 1.5;
}

.standortdaten-overview-page .standort-selector-status:empty {
  display: none;
}

.standortdaten-overview-page .standort-selector-status::before {
  flex: 0 0 auto;
  content: "i";
  font-weight: 900;
}

.standortdaten-overview-page .standort-selector-status[data-state="loading"] {
  border-color: rgba(7, 133, 181, 0.24);
  color: #075b75;
  background: rgba(7, 133, 181, 0.09);
}

.standortdaten-overview-page .standort-selector-status[data-state="loading"]::before {
  content: "…";
}

.standortdaten-overview-page .standort-selector-status[data-state="error"] {
  border-color: rgba(151, 54, 49, 0.24);
  color: #7d302c;
  background: rgba(151, 54, 49, 0.08);
}

.standortdaten-overview-page .standort-selector-status[data-state="error"]::before {
  content: "!";
}

.standortdaten-overview-page .standort-selector-status[data-state="warning"] {
  border-color: rgba(154, 105, 22, 0.25);
  color: #725018;
  background: rgba(181, 129, 39, 0.1);
}

.standortdaten-overview-page .standort-selector-status[data-state="warning"]::before {
  content: "!";
}

.standortdaten-overview-page .standort-selector-status[data-state="success"] {
  border-color: rgba(37, 116, 81, 0.24);
  color: #225f45;
  background: rgba(37, 116, 81, 0.09);
}

.standortdaten-overview-page .standort-selector-status[data-state="success"]::before {
  content: "✓";
}

.standortdaten-overview-page .standort-selector-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(11, 101, 116, 0.32);
  border-left: 5px solid #0b6574;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(19, 82, 94, 0.08);
}

.standortdaten-overview-page .standort-selector-current strong {
  display: block;
  margin-bottom: 7px;
  color: #124b59;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.4;
}

.standortdaten-overview-page .standort-selector-current > div > span {
  display: block;
  color: #607981;
  font-size: 0.9rem;
  line-height: 1.55;
}

.standortdaten-overview-page .standort-selector-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.standortdaten-overview-page .standort-selector-actions button:first-child {
  color: #fff;
  background: #124b59;
  box-shadow: 0 10px 22px rgba(18, 75, 89, 0.17);
}

.standortdaten-overview-page .standort-selector-actions button:last-child {
  border-color: rgba(18, 75, 89, 0.18);
  color: #526b72;
  background: transparent;
}

.standortdaten-overview-page .standort-selector-actions button:last-child:hover {
  border-color: rgba(125, 48, 44, 0.28);
  color: #7d302c;
  background: rgba(151, 54, 49, 0.06);
}

@media (max-width: 900px) {
  .standortdaten-overview-page .standort-selector-heading {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  .standortdaten-overview-page .standort-selector-heading > p {
    max-width: 680px;
  }

  .standortdaten-overview-page .standort-selector-current {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .standortdaten-overview-page .standort-selector-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .standortdaten-overview-page .standort-selector {
    padding: 22px 16px;
    border-radius: 22px;
  }

  .standortdaten-overview-page .standort-selector-heading {
    margin-bottom: 22px;
  }

  .standortdaten-overview-page .standort-selector-search,
  .standortdaten-overview-page .standort-selector-current {
    padding: 18px 15px;
    border-radius: 18px;
  }

  .standortdaten-overview-page .standort-selector-input-row {
    grid-template-columns: 1fr;
  }

  .standortdaten-overview-page .standort-selector-input-row button {
    width: 100%;
  }

  .standortdaten-overview-page .standort-selector-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .standortdaten-overview-page .standort-selector-actions button {
    width: 100%;
  }
}

.standortdaten-overview-page .standort-selector [hidden] {
  display: none !important;
}

/* SHK_STANDORTDATEN_SELECTOR_CSS_V1_END_20260811 */

/* SHK_STANDORT_TEMPERATUR_CSS_V1_20260811 */

.standort-temperature-page .standort-temperature-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 72px;
}

.standort-temperature-page .standort-temperature-location,
.standort-temperature-page .standort-temperature-result,
.standort-temperature-page .standort-temperature-empty {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.22);
}

.standort-temperature-page .standort-temperature-location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 30px;
  margin-bottom: 18px;
}

.standort-temperature-page .standort-temperature-location h2 {
  margin: 5px 0 7px;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.25;
}

.standort-temperature-page .standort-temperature-location > div > p:last-child {
  margin: 0;
  opacity: 0.72;
  font-size: 0.94rem;
}

.standort-temperature-page .standort-temperature-status {
  min-height: 22px;
  margin: 0 0 18px;
  padding: 0 4px;
  font-size: 0.94rem;
}

.standort-temperature-page .standort-temperature-status:empty {
  display: none;
}

.standort-temperature-page .standort-temperature-status[data-state="loading"] {
  opacity: 0.78;
}

.standort-temperature-page .standort-temperature-status[data-state="success"] {
  color: #9ed9ad;
}

.standort-temperature-page .standort-temperature-status[data-state="error"] {
  color: #ff9b9b;
}

.standort-temperature-page .standort-temperature-result {
  overflow: hidden;
}

.standort-temperature-page .standort-temperature-main-result {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 44px 30px 40px;
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(218, 176, 72, 0.20),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      transparent
    );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.standort-temperature-page .standort-temperature-main-result > span {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  opacity: 0.72;
}

.standort-temperature-page .standort-temperature-main-result > strong {
  display: block;
  font-size: clamp(3.5rem, 9vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 800;
}

.standort-temperature-page .standort-temperature-main-result > strong::after {
  content: " °C";
  font-size: 0.34em;
  letter-spacing: -0.02em;
  font-weight: 650;
  opacity: 0.72;
}

.standort-temperature-page .standort-temperature-main-result > small {
  opacity: 0.68;
}

.standort-temperature-page .standort-temperature-months {
  padding: 34px 30px 38px;
}

.standort-temperature-page .standort-temperature-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}

.standort-temperature-page .standort-temperature-section-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
}

.standort-temperature-page .standort-temperature-section-heading > p {
  max-width: 360px;
  margin: 0;
  text-align: right;
  opacity: 0.68;
  line-height: 1.55;
}

.standort-temperature-page .standort-temperature-month-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.standort-temperature-page .standort-temperature-month-grid article {
  min-width: 0;
  padding: 18px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 17px;
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.standort-temperature-page .standort-temperature-month-grid article:hover {
  transform: translateY(-2px);
  border-color: rgba(218, 176, 72, 0.42);
  background: rgba(218, 176, 72, 0.055);
}

.standort-temperature-page .standort-temperature-month-grid span,
.standort-temperature-page .standort-temperature-month-grid strong,
.standort-temperature-page .standort-temperature-month-grid small {
  display: block;
}

.standort-temperature-page .standort-temperature-month-grid span {
  margin-bottom: 9px;
  font-size: 0.78rem;
  opacity: 0.67;
}

.standort-temperature-page .standort-temperature-month-grid strong {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1;
}

.standort-temperature-page .standort-temperature-month-grid small {
  margin-top: 5px;
  font-size: 0.72rem;
  opacity: 0.58;
}

.standort-temperature-page .standort-temperature-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 30px 34px;
}

.standort-temperature-page .standort-temperature-details > article {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.02);
}

.standort-temperature-page .standort-temperature-details h3 {
  margin: 5px 0 20px;
  font-size: 1.18rem;
}

.standort-temperature-page .standort-temperature-details dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.standort-temperature-page .standort-temperature-details dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.standort-temperature-page .standort-temperature-details dt {
  opacity: 0.62;
}

.standort-temperature-page .standort-temperature-details dd {
  margin: 0;
  text-align: right;
  font-weight: 650;
}

.standort-temperature-page .standort-temperature-source-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  font-size: 0.86rem;
  line-height: 1.55;
  opacity: 0.66;
}

.standort-temperature-page .standort-temperature-empty {
  padding: 42px 34px;
  text-align: center;
}

.standort-temperature-page .standort-temperature-empty h2 {
  margin: 7px 0 12px;
}

.standort-temperature-page .standort-temperature-empty > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 auto 24px;
  line-height: 1.65;
  opacity: 0.72;
}

@media (max-width: 980px) {
  .standort-temperature-page .standort-temperature-month-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .standort-temperature-page .standort-temperature-shell {
    width: min(100% - 24px, 1180px);
    margin-bottom: 48px;
  }

  .standort-temperature-page .standort-temperature-location {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
  }

  .standort-temperature-page .standort-temperature-main-result {
    padding: 36px 20px 34px;
  }

  .standort-temperature-page .standort-temperature-months {
    padding: 28px 18px 30px;
  }

  .standort-temperature-page .standort-temperature-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .standort-temperature-page .standort-temperature-section-heading > p {
    text-align: left;
  }

  .standort-temperature-page .standort-temperature-month-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .standort-temperature-page .standort-temperature-details {
    grid-template-columns: 1fr;
    padding: 0 18px 26px;
  }
}

@media (max-width: 480px) {
  .standort-temperature-page .standort-temperature-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .standort-temperature-page .standort-temperature-month-grid article {
    padding: 16px 8px 14px;
  }

  .standort-temperature-page .standort-temperature-details > article {
    padding: 20px 18px;
  }

  .standort-temperature-page .standort-temperature-details dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .standort-temperature-page .standort-temperature-details dd {
    text-align: left;
  }
}

/* SHK_STANDORT_TEMPERATUR_CSS_V1_END_20260811 */

/* SHK_STANDORT_KLIMAMODULE_LAYOUT_V1_20260812 */

/*
 * Ausschließlich gemeinsames Grundgerüst der Standortmodule 04–08.
 * Temperatur- und Frostseiten besitzen diese Body-Klasse nicht.
 */

.standort-climate-module-page [data-module-result-fields] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  padding: 0 30px 34px;
}

.standort-climate-module-page [data-module-result-fields] > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  min-width: 0;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.standort-climate-module-page [data-module-result-fields] dt {
  min-width: 0;
  opacity: 0.62;
}

.standort-climate-module-page [data-module-result-fields] dd {
  min-width: 0;
  margin: 0;
  text-align: right;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.standort-climate-module-page [data-module-method] > div,
.standort-climate-module-page [data-module-sources] > div,
.standort-climate-module-page [data-module-raster] > div {
  grid-template-columns:
    minmax(115px, 0.34fr)
    minmax(0, 0.66fr);
  align-items: start;
}

.standort-climate-module-page [data-module-method] dd,
.standort-climate-module-page [data-module-sources] dd,
.standort-climate-module-page [data-module-raster] dd {
  min-width: 0;
  text-align: left;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: normal;
}

.standort-climate-module-page [data-module-reference-period] > div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.standort-climate-module-page [data-module-warnings] {
  line-height: 1.6;
}

.standort-climate-module-page [data-module-warnings] p {
  margin: 0 0 12px;
}

.standort-climate-module-page [data-module-warnings] p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .standort-climate-module-page [data-module-result-fields] {
    grid-template-columns: 1fr;
    padding: 0 18px 26px;
  }
}

@media (max-width: 560px) {
  .standort-climate-module-page [data-module-result-fields] > div,
  .standort-climate-module-page [data-module-method] > div,
  .standort-climate-module-page [data-module-sources] > div,
  .standort-climate-module-page [data-module-raster] > div,
  .standort-climate-module-page [data-module-reference-period] > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .standort-climate-module-page [data-module-result-fields] dd,
  .standort-climate-module-page [data-module-method] dd,
  .standort-climate-module-page [data-module-sources] dd,
  .standort-climate-module-page [data-module-raster] dd,
  .standort-climate-module-page [data-module-reference-period] dd {
    text-align: left;
  }
}

/* SHK_STANDORT_KLIMAMODULE_LAYOUT_V1_END_20260812 */


/* SHK_STANDORT_KLIMAMODULE_DETAIL_LAYOUT_V2_20260812 */

/*
 * Höhere Spezifität als die geerbten Temperatur-Detailregeln.
 * Ausschließlich gemeinsame Standortmodule 04–08.
 */

.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-method] > div,
.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-sources] > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  align-items: start;
}

.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-method] dt,
.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-sources] dt {
  opacity: 0.62;
}

.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-method] dd,
.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-sources] dd {
  margin: 0;
  text-align: left;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-raster] > div {
  grid-template-columns:
    minmax(120px, 0.42fr)
    minmax(0, 0.58fr);
  align-items: start;
}

.standort-temperature-page.standort-climate-module-page
.standort-temperature-details
[data-module-raster] dd {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* SHK_STANDORT_KLIMAMODULE_DETAIL_LAYOUT_V2_END_20260812 */


/* SHK_STANDORT_KLIMAMODULE_RESULT_LAYOUT_V3_20260813 */

/*
 * Prominente Ergebnisdarstellung und einklappbare Fachdaten ausschließlich
 * für das gemeinsame Grundgerüst der Standort-Klimamodule.
 */

.standort-climate-module-page .standort-climate-primary-results {
  padding-bottom: 30px;
}

.standort-climate-module-page
.standort-climate-primary-results
[data-module-result-fields] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 14px;
  padding: 0;
}

.standort-climate-module-page
.standort-climate-primary-results
[data-module-result-fields] > div {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.standort-climate-module-page
.standort-climate-primary-results
[data-module-result-fields] dt {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  opacity: 0.62;
  overflow-wrap: anywhere;
}

.standort-climate-module-page
.standort-climate-primary-results
[data-module-result-fields] dd {
  width: 100%;
  margin: 0;
  text-align: left;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.standort-climate-module-page
.standort-climate-primary-results
[data-module-result-fields] > div:first-child dd {
  font-size: clamp(1.18rem, 2vw, 1.48rem);
  font-weight: 760;
}

.standort-climate-module-page .standort-climate-technical-details {
  margin: 0 30px 34px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.018);
  overflow: hidden;
}

.standort-climate-module-page .standort-climate-technical-details > summary {
  padding: 20px 24px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
  cursor: pointer;
}

.standort-climate-module-page .standort-climate-technical-details[open] > summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.standort-climate-module-page
.standort-climate-technical-details
> .standort-temperature-details {
  padding: 18px 18px 0;
}

.standort-climate-module-page
.standort-climate-technical-details
> .standort-temperature-details:last-child {
  padding-bottom: 18px;
}

@media (max-width: 760px) {
  .standort-climate-module-page
  .standort-climate-primary-results
  [data-module-result-fields] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .standort-climate-module-page .standort-climate-technical-details {
    margin: 0 18px 26px;
  }
}

@media (max-width: 520px) {
  .standort-climate-module-page
  .standort-climate-primary-results
  [data-module-result-fields] {
    grid-template-columns: 1fr;
  }

  .standort-climate-module-page
  .standort-climate-primary-results
  [data-module-result-fields] > div {
    padding: 19px 18px;
  }

  .standort-climate-module-page
  .standort-climate-technical-details
  > .standort-temperature-details {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* SHK_STANDORT_KLIMAMODULE_RESULT_LAYOUT_V3_END_20260813 */

/* SHK_STANDORT_KLIMAMODULE_DETAIL_RESULTS_V1_20260813 */

.standort-climate-module-page .standort-climate-detail-results {
  margin: 0 30px 30px;
  padding: 24px;
  border: 1px solid rgba(15, 34, 48, 0.14);
  border-radius: 19px;
  background: rgba(15, 34, 48, 0.025);
}

.standort-climate-module-page
.standort-climate-detail-results
.standort-temperature-section-heading {
  margin-bottom: 18px;
}

.standort-climate-module-page .standort-climate-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.standort-climate-module-page .standort-climate-detail-grid > div {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid rgba(15, 34, 48, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.standort-climate-module-page .standort-climate-detail-grid dt {
  margin-bottom: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  opacity: 0.62;
}

.standort-climate-module-page .standort-climate-detail-grid dd {
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .standort-climate-module-page .standort-climate-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .standort-climate-module-page .standort-climate-detail-results {
    margin: 0 18px 26px;
    padding: 20px 18px;
  }

  .standort-climate-module-page .standort-climate-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .standort-climate-module-page .standort-climate-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* SHK_STANDORT_KLIMAMODULE_DETAIL_RESULTS_V1_END_20260813 */

/* SHK_STANDORT_HEIZGRAD_INFO_DIALOG_V1_20260813 */

.standort-climate-module-page .standort-heizgrad-info-overlay[hidden] {
  display: none !important;
}

.standort-climate-module-page .standort-heizgrad-info-open {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(18, 75, 89, 0.2);
  border-radius: 999px;
  color: #124b59;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
}

.standort-climate-module-page .standort-heizgrad-info-open:hover,
.standort-climate-module-page .standort-heizgrad-info-open:focus-visible {
  border-color: rgba(11, 101, 116, 0.42);
  background: #fff;
}

.standort-climate-module-page .standort-heizgrad-info-overlay {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px;
  background: rgba(7, 22, 28, 0.72);
  backdrop-filter: blur(5px);
}

.standort-climate-module-page .standort-heizgrad-info-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, calc(100vw - 48px));
  max-height: min(88vh, 860px);
  overflow: hidden;
  border: 1px solid rgba(11, 101, 116, 0.24);
  border-radius: 22px;
  color: #173f49;
  background: #fff;
  box-shadow: 0 28px 80px rgba(4, 26, 32, 0.34);
}

.standort-climate-module-page .standort-heizgrad-info-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 22px 24px 20px;
  border-bottom: 1px solid rgba(11, 101, 116, 0.14);
  background: #f7fafb;
}

.standort-climate-module-page .standort-heizgrad-info-header h2 {
  margin: 4px 0 0;
  color: #124b59;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  line-height: 1.25;
}

.standort-climate-module-page .standort-heizgrad-info-close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(18, 75, 89, 0.18);
  border-radius: 50%;
  color: #526b72;
  background: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.standort-climate-module-page .standort-heizgrad-info-content {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

.standort-climate-module-page .standort-heizgrad-info-content > section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(11, 101, 116, 0.12);
}

.standort-climate-module-page
.standort-heizgrad-info-content > section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.standort-climate-module-page .standort-heizgrad-info-content h3 {
  margin: 0 0 10px;
  color: #124b59;
  font-size: 1.08rem;
}

.standort-climate-module-page .standort-heizgrad-info-content p {
  margin: 0 0 10px;
  line-height: 1.62;
}

.standort-climate-module-page .standort-heizgrad-info-content p:last-child {
  margin-bottom: 0;
}

.standort-climate-module-page .standort-heizgrad-info-formula {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 15px 16px;
  border: 1px solid rgba(11, 101, 116, 0.16);
  border-radius: 15px;
  background: #f7fafb;
}

.standort-climate-module-page .standort-heizgrad-info-formula span {
  font-size: 0.9rem;
  opacity: 0.76;
}

.standort-climate-module-page .standort-heizgrad-info-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.standort-climate-module-page .standort-heizgrad-info-examples article {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(11, 101, 116, 0.13);
  border-radius: 14px;
  background: rgba(247, 250, 251, 0.74);
}

.standort-climate-module-page .standort-heizgrad-info-examples p {
  margin-top: 8px;
  font-size: 0.9rem;
}

.standort-climate-module-page .standort-heizgrad-info-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid rgba(11, 101, 116, 0.14);
  background: #fff;
}

.standort-climate-module-page .standort-heizgrad-info-footer button {
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #124b59;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 680px) {
  .standort-climate-module-page .standort-heizgrad-info-overlay {
    padding: 10px;
  }

  .standort-climate-module-page .standort-heizgrad-info-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .standort-climate-module-page .standort-heizgrad-info-header,
  .standort-climate-module-page .standort-heizgrad-info-content,
  .standort-climate-module-page .standort-heizgrad-info-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .standort-climate-module-page .standort-heizgrad-info-examples {
    grid-template-columns: 1fr;
  }
}

/* SHK_STANDORT_HEIZGRAD_INFO_DIALOG_V1_END_20260813 */

/* SHK_STANDORT_KLIMAMODULE_DETAILS_VISIBILITY_FIX_20260813 */

.standort-climate-module-page .standort-climate-technical-details {
  border-color: rgba(15, 34, 48, 0.14);
  background: rgba(15, 34, 48, 0.025);
}

.standort-climate-module-page .standort-climate-technical-details > summary {
  color: inherit;
}

.standort-climate-module-page .standort-climate-technical-details[open] > summary {
  border-bottom-color: rgba(15, 34, 48, 0.12);
}

/* SHK_STANDORT_KLIMAMODULE_DETAILS_VISIBILITY_FIX_END_20260813 */

/* SHK_STANDORT_FROST_UNIT_FIX_20260813 */

.standort-frost-page
.standort-temperature-main-result > strong::after {
  content: " Tage";
}

/* SHK_STANDORT_FROST_UNIT_FIX_END_20260813 */

/* SHK_STANDORT_FROST_DETAILS_V1_20260813 */

.standort-frost-page .standort-frost-technical-details {
  margin: 0 30px 34px;
  border: 1px solid rgba(15, 34, 48, 0.14);
  border-radius: 19px;
  background: rgba(15, 34, 48, 0.025);
  overflow: hidden;
}

.standort-frost-page .standort-frost-technical-details > summary {
  padding: 20px 24px;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

.standort-frost-page .standort-frost-technical-details[open] > summary {
  border-bottom: 1px solid rgba(15, 34, 48, 0.12);
}

.standort-frost-page
.standort-frost-technical-details
> .standort-temperature-details {
  padding: 18px 18px 0;
}

.standort-frost-page
.standort-frost-technical-details
> .standort-temperature-details:last-child {
  padding-bottom: 18px;
}

@media (max-width: 760px) {
  .standort-frost-page .standort-frost-technical-details {
    margin: 0 18px 26px;
  }
}

/* SHK_STANDORT_FROST_DETAILS_V1_END_20260813 */

/* SHK_STANDORT_TEMPERATUR_DETAILS_V1_20260813 */

.standort-temperature-page .standort-temperature-technical-details {
  margin: 0 30px 34px;
  border: 1px solid rgba(15, 34, 48, 0.14);
  border-radius: 19px;
  background: rgba(15, 34, 48, 0.025);
  overflow: hidden;
}

.standort-temperature-page .standort-temperature-technical-details > summary {
  padding: 20px 24px;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

.standort-temperature-page .standort-temperature-technical-details[open] > summary {
  border-bottom: 1px solid rgba(15, 34, 48, 0.12);
}

.standort-temperature-page
.standort-temperature-technical-details
> .standort-temperature-details {
  padding: 18px 18px;
}

@media (max-width: 760px) {
  .standort-temperature-page .standort-temperature-technical-details {
    margin: 0 18px 26px;
  }
}

/* SHK_STANDORT_TEMPERATUR_DETAILS_V1_END_20260813 */

/* SHK_STANDORT_SUN_PATH_V1_20260813 */

.standort-climate-module-page .standort-sun-path {
  margin: 0 30px 34px;
  padding: 30px;
  border: 1px solid rgba(15, 34, 48, 0.14);
  border-radius: 22px;
  background: rgba(15, 34, 48, 0.025);
}

.standort-climate-module-page .standort-sun-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px 20px;
  margin-top: 24px;
}

.standort-climate-module-page .standort-sun-controls > label {
  display: grid;
  gap: 7px;
  min-width: 190px;
  font-weight: 700;
}

.standort-climate-module-page .standort-sun-controls input[type="date"] {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(15, 34, 48, 0.18);
  border-radius: 12px;
  background: inherit;
  color: inherit;
  font: inherit;
}

.standort-climate-module-page .standort-sun-date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.standort-climate-module-page .standort-sun-date-presets button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 34, 48, 0.16);
  border-radius: 999px;
  background: rgba(15, 34, 48, 0.035);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.standort-climate-module-page .standort-sun-date-presets button:hover,
.standort-climate-module-page .standort-sun-date-presets button:focus-visible {
  background: rgba(15, 34, 48, 0.08);
}

.standort-climate-module-page .standort-sun-summary,
.standort-climate-module-page .standort-sun-live-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.standort-climate-module-page .standort-sun-summary article,
.standort-climate-module-page .standort-sun-live-values article {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(15, 34, 48, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.standort-climate-module-page .standort-sun-summary article > span,
.standort-climate-module-page .standort-sun-live-values article > span {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.62;
}

.standort-climate-module-page .standort-sun-summary strong,
.standort-climate-module-page .standort-sun-live-values strong {
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.25;
}

.standort-climate-module-page .standort-sun-summary small {
  line-height: 1.4;
  opacity: 0.7;
}

.standort-climate-module-page .standort-sun-live {
  margin-top: 26px;
}

.standort-climate-module-page .standort-sun-slider {
  display: grid;
  gap: 9px;
  margin-top: 22px;
  font-weight: 700;
}

.standort-climate-module-page .standort-sun-slider input[type="range"] {
  width: 100%;
}

.standort-climate-module-page .standort-sun-compass {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
  margin: 30px auto 10px;
  border: 1px solid rgba(15, 34, 48, 0.16);
  border-radius: 50%;
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      rgba(15, 34, 48, 0.1) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      rgba(15, 34, 48, 0.1) 50%,
      transparent calc(50% + 0.5px)
    );
}

.standort-climate-module-page .standort-sun-north,
.standort-climate-module-page .standort-sun-east,
.standort-climate-module-page .standort-sun-south,
.standort-climate-module-page .standort-sun-west {
  position: absolute;
  z-index: 3;
  font-size: 0.78rem;
  font-weight: 800;
}

.standort-climate-module-page .standort-sun-north {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.standort-climate-module-page .standort-sun-east {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.standort-climate-module-page .standort-sun-south {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.standort-climate-module-page .standort-sun-west {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.standort-climate-module-page .standort-sun-center {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.15rem;
}

.standort-climate-module-page .standort-sun-ray {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 38%;
  height: 2px;
  transform-origin: left center;
  background: currentColor;
  opacity: 0.35;
}

.standort-climate-module-page .standort-sun-marker {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  font-size: 1.8rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition:
    left 120ms linear,
    top 120ms linear,
    opacity 120ms linear;
}

.standort-climate-module-page .standort-sun-note {
  margin: 22px 0 0;
  line-height: 1.55;
  opacity: 0.72;
}

@media (max-width: 760px) {
  .standort-climate-module-page .standort-sun-path {
    margin: 0 18px 26px;
    padding: 22px 18px;
  }

  .standort-climate-module-page .standort-sun-summary,
  .standort-climate-module-page .standort-sun-live-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .standort-climate-module-page .standort-sun-summary,
  .standort-climate-module-page .standort-sun-live-values {
    grid-template-columns: 1fr;
  }

  .standort-climate-module-page .standort-sun-controls {
    align-items: stretch;
  }

  .standort-climate-module-page .standort-sun-controls > label {
    width: 100%;
  }
}

/* SHK_STANDORT_SUN_PATH_V1_END_20260813 */

/* SHK_STANDORT_SUN_ORBIT_V1_20260813 */

.standort-climate-module-page .standort-sun-orbit {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.standort-climate-module-page .standort-sun-orbit path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.standort-climate-module-page .standort-sun-orbit-night {
  stroke-width: 1.2;
  stroke-dasharray: 2.5 3.5;
  opacity: 0.12;
}

.standort-climate-module-page .standort-sun-orbit-day {
  stroke-width: 2.4;
  opacity: 0.5;
}

.standort-climate-module-page .standort-sun-orbit circle {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.standort-climate-module-page .standort-sun-orbit-sunrise,
.standort-climate-module-page .standort-sun-orbit-sunset {
  opacity: 0.65;
}

.standort-climate-module-page .standort-sun-orbit-noon {
  opacity: 1;
}

.standort-climate-module-page .standort-sun-ray {
  z-index: 3;
}

.standort-climate-module-page .standort-sun-center {
  z-index: 4;
}

.standort-climate-module-page .standort-sun-marker {
  z-index: 5;
}

/* etwas kompakter als die erste Kompass-Version */
.standort-climate-module-page .standort-sun-compass {
  width: min(100%, 390px);
}

/* SHK_STANDORT_SUN_ORBIT_V1_END_20260813 */

/* SHK_STANDORT_SUN_ORBIT_LABELS_V1_20260813 */

.standort-climate-module-page .standort-sun-orbit-label {
  fill: currentColor;
  font-family: inherit;
  font-size: 2.7px;
  font-weight: 700;
  letter-spacing: 0.02em;
  dominant-baseline: middle;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

.standort-climate-module-page [data-sun-orbit-noon-label] {
  font-weight: 800;
  opacity: 0.9;
}

/* SHK_STANDORT_SUN_ORBIT_LABELS_V1_END_20260813 */

/* SHK_STANDORT_SUN_SCENE_V1_20260813 */

.standort-climate-module-page .standort-sun-scene {
  position: relative;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid rgba(15, 34, 48, 0.14);
  border-radius: 22px;
  background: #eef5f8;
  box-shadow:
    0 18px 45px rgba(15, 34, 48, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.standort-climate-module-page .standort-sun-scene svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Himmel */
.standort-climate-module-page .sun-scene-sky-top {
  stop-color: #74b9ee;
}

.standort-climate-module-page .sun-scene-sky-bottom {
  stop-color: #eaf6ff;
}

.standort-climate-module-page .standort-sun-scene-sky {
  fill: url(#sun-scene-sky);
}

/* Boden */
.standort-climate-module-page .sun-scene-ground-top {
  stop-color: #9bc989;
}

.standort-climate-module-page .sun-scene-ground-bottom {
  stop-color: #6fa365;
}

.standort-climate-module-page .standort-sun-scene-ground {
  fill: url(#sun-scene-ground);
}

.standort-climate-module-page .standort-sun-scene-horizon {
  stroke: rgba(28, 70, 47, 0.28);
  stroke-width: 2;
}

/* Haus */
.standort-climate-module-page .standort-sun-scene-house rect {
  fill: #f4efe7;
  stroke: rgba(15, 34, 48, 0.3);
  stroke-width: 2;
}

.standort-climate-module-page .standort-sun-scene-house > path {
  fill: #4f5961;
  stroke: #364049;
  stroke-width: 3;
  stroke-linejoin: round;
}

.standort-climate-module-page .standort-sun-scene-house .standort-sun-scene-window {
  fill: #bfe2f5;
  stroke: rgba(15, 34, 48, 0.35);
  stroke-width: 1.5;
}

/* Sonnenbahn */
.standort-climate-module-page .standort-sun-scene-orbit {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  filter: drop-shadow(0 2px 3px rgba(15, 34, 48, 0.18));
}

/* Sonne */
.standort-climate-module-page .standort-sun-scene-glow {
  fill: rgba(255, 211, 66, 0.28);
  transform-box: fill-box;
  transform-origin: center;
  animation: shk-sun-glow 2.8s ease-in-out infinite;
}

.standort-climate-module-page .standort-sun-scene-sun {
  fill: #ffd447;
  stroke: #f3a91d;
  stroke-width: 3;
  filter:
    drop-shadow(0 0 7px rgba(255, 194, 34, 0.68))
    drop-shadow(0 0 18px rgba(255, 216, 80, 0.42));
}

/* Richtungsbeschriftungen */
.standort-climate-module-page .standort-sun-scene-east,
.standort-climate-module-page .standort-sun-scene-west {
  fill: rgba(15, 34, 48, 0.72);
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
}

.standort-climate-module-page .standort-sun-scene-south {
  fill: rgba(15, 34, 48, 0.62);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}

/* aktuelle Werte direkt unter der Grafik */
.standort-climate-module-page .standort-sun-scene-caption {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  padding: 13px 18px 15px;
  border-top: 1px solid rgba(15, 34, 48, 0.08);
  background: rgba(255, 255, 255, 0.76);
}

.standort-climate-module-page .standort-sun-scene-caption span {
  font-size: 0.88rem;
  font-weight: 700;
  opacity: 0.68;
}

.standort-climate-module-page .standort-sun-scene-caption strong {
  font-size: 1rem;
}

/* vorhandenen technischen Kompass künftig als Detailansicht absetzen */
.standort-climate-module-page .standort-sun-compass {
  margin-top: 34px;
  opacity: 0.82;
}

@keyframes shk-sun-glow {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

@media (max-width: 600px) {
  .standort-climate-module-page .standort-sun-scene {
    border-radius: 16px;
  }

  .standort-climate-module-page .standort-sun-scene-caption {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
}

/* SHK_STANDORT_SUN_SCENE_V1_END_20260813 */

/* SHK_STANDORT_SUN_SCENE_STATES_V1_20260813 */

/* weiche Übergänge beim Bewegen des Zeitschiebers */
.standort-climate-module-page .standort-sun-scene-sky,
.standort-climate-module-page .standort-sun-scene-ground,
.standort-climate-module-page .standort-sun-scene-house rect,
.standort-climate-module-page .standort-sun-scene-window,
.standort-climate-module-page .standort-sun-scene-orbit {
  transition:
    fill 260ms ease,
    stroke 260ms ease,
    opacity 260ms ease;
}

.standort-climate-module-page .sun-scene-sky-top,
.standort-climate-module-page .sun-scene-sky-bottom,
.standort-climate-module-page .sun-scene-ground-top,
.standort-climate-module-page .sun-scene-ground-bottom {
  transition: stop-color 260ms ease;
}

/* TAG */
.standort-climate-module-page
.standort-sun-scene[data-sun-state="day"]
.sun-scene-sky-top {
  stop-color: #65b6ee;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="day"]
.sun-scene-sky-bottom {
  stop-color: #e9f7ff;
}

/* MORGEN */
.standort-climate-module-page
.standort-sun-scene[data-sun-state="dawn"]
.sun-scene-sky-top {
  stop-color: #718fc2;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="dawn"]
.sun-scene-sky-bottom {
  stop-color: #ffd3a0;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="dawn"]
.standort-sun-scene-orbit {
  stroke: rgba(255, 246, 211, 0.9);
}

/* ABEND */
.standort-climate-module-page
.standort-sun-scene[data-sun-state="dusk"]
.sun-scene-sky-top {
  stop-color: #6279ad;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="dusk"]
.sun-scene-sky-bottom {
  stop-color: #f4a36d;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="dusk"]
.standort-sun-scene-orbit {
  stroke: rgba(255, 231, 196, 0.82);
}

/* NACHT */
.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.sun-scene-sky-top {
  stop-color: #111b36;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.sun-scene-sky-bottom {
  stop-color: #2e4266;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.sun-scene-ground-top {
  stop-color: #42554a;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.sun-scene-ground-bottom {
  stop-color: #28372f;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.standort-sun-scene-house rect {
  fill: #c9c5bd;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.standort-sun-scene-window {
  fill: #ffd977;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.standort-sun-scene-orbit {
  stroke: rgba(216, 228, 245, 0.3);
  opacity: 0.55;
}

.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.standort-sun-scene-east,
.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.standort-sun-scene-west,
.standort-climate-module-page
.standort-sun-scene[data-sun-state="night"]
.standort-sun-scene-south {
  fill: rgba(255, 255, 255, 0.76);
}

/* SHK_STANDORT_SUN_SCENE_STATES_V1_END_20260813 */

/* SHK_STANDORT_SUN_BUILDING_ORIENTATION_V1_20260813 */

.standort-sun-building-orientation {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(78, 92, 101, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 3px 12px rgba(35, 50, 60, 0.07);
  font-size: 0.88rem;
  line-height: 1.25;
}

.standort-sun-building-orientation[hidden] {
  display: none;
}

.standort-sun-building-orientation > span:first-child {
  font-weight: 600;
  color: #55636b;
}

.standort-sun-building-orientation strong {
  font-size: 0.98rem;
  font-weight: 750;
  color: #253640;
  letter-spacing: 0.02em;
}

.standort-sun-building-orientation
  [data-sun-building-confidence] {
  padding-left: 11px;
  border-left: 1px solid rgba(78, 92, 101, 0.18);
  color: #66757d;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .standort-sun-building-orientation {
    border-radius: 14px;
  }

  .standort-sun-building-orientation
    [data-sun-building-confidence] {
    width: 100%;
    padding-top: 6px;
    padding-left: 0;
    border-top: 1px solid rgba(78, 92, 101, 0.14);
    border-left: 0;
  }
}

/* SHK_STANDORT_SUN_BUILDING_ORIENTATION_V1_END_20260813 */

/* SHK_STANDORT_SUN_BUILDING_COMPASS_V1_20260813 */

.standort-sun-building-compass {
  pointer-events: none;
}

.standort-sun-building-compass[hidden] {
  display: none;
}

.standort-sun-building-compass-ring {
  fill: rgba(255, 255, 255, 0.68);
  stroke: rgba(44, 65, 76, 0.30);
  stroke-width: 2;
}

.standort-sun-building-compass-north {
  stroke: rgba(55, 75, 86, 0.34);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.standort-sun-building-compass-n {
  fill: #43545e;
  font-size: 14px;
  font-weight: 800;
}

.standort-sun-building-axis-line {
  stroke: #d8872f;
  stroke-width: 5;
  stroke-linecap: round;
}

.standort-sun-building-axis-center {
  fill: #fff;
  stroke: #b56f25;
  stroke-width: 2.5;
}

.standort-sun-building-compass-value {
  fill: #41545e;
  font-size: 13px;
  font-weight: 750;
}

.standort-sun-scene[data-sun-state="dawn"]
  .standort-sun-building-compass-ring,
.standort-sun-scene[data-sun-state="dusk"]
  .standort-sun-building-compass-ring {
  fill: rgba(255, 248, 232, 0.72);
}

.standort-sun-scene[data-sun-state="night"]
  .standort-sun-building-compass-ring {
  fill: rgba(25, 39, 64, 0.72);
  stroke: rgba(255, 255, 255, 0.34);
}

.standort-sun-scene[data-sun-state="night"]
  .standort-sun-building-compass-n,
.standort-sun-scene[data-sun-state="night"]
  .standort-sun-building-compass-value {
  fill: rgba(255, 255, 255, 0.86);
}

.standort-sun-scene[data-sun-state="night"]
  .standort-sun-building-compass-north {
  stroke: rgba(255, 255, 255, 0.28);
}

/* SHK_STANDORT_SUN_BUILDING_COMPASS_V1_END_20260813 */

/* SHK_STANDORT_SUN_BUILDING_COMPASS_TITLE_V1_20260813 */

.standort-sun-building-compass-title {
  fill: #41545e;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.standort-sun-scene[data-sun-state="night"]
  .standort-sun-building-compass-title {
  fill: rgba(255, 255, 255, 0.88);
}

/* SHK_STANDORT_SUN_BUILDING_COMPASS_TITLE_V1_END_20260813 */

/* SHK_STANDORT_SUN_COMPASS_BUILDING_AXIS_V1_20260813 */

.standort-sun-compass-building-axis[hidden] {
  display: none;
}

.standort-sun-compass-building-axis-line {
  stroke: #d8872f;
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0.92;
}

.standort-sun-compass-building-axis-center {
  fill: #fff;
  stroke: #b56f25;
  stroke-width: 0.9;
}

.standort-sun-compass-building-axis {
  pointer-events: none;
}

/* SHK_STANDORT_SUN_COMPASS_BUILDING_AXIS_V1_END_20260813 */

/* SHK_STANDORTDATEN_MAP_PREVIEW_CSS_V1_20260813 */

.standortdaten-overview-page .standort-selector-current {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 360px)
    auto;
}

.standortdaten-overview-page .standort-selector-map {
  min-width: 0;
  height: 190px;
  overflow: hidden;
  border: 1px solid rgba(11, 101, 116, 0.18);
  border-radius: 16px;
  background: #eef4f5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.standortdaten-overview-page .standort-selector-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1050px) {
  .standortdaten-overview-page .standort-selector-current {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(250px, 340px);
  }

  .standortdaten-overview-page .standort-selector-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .standortdaten-overview-page .standort-selector-current {
    grid-template-columns: 1fr;
  }

  .standortdaten-overview-page .standort-selector-map,
  .standortdaten-overview-page .standort-selector-actions {
    grid-column: auto;
  }

  .standortdaten-overview-page .standort-selector-map {
    width: 100%;
    height: 220px;
  }
}

/* SHK_STANDORTDATEN_MAP_PREVIEW_CSS_V1_END_20260813 */

/* SHK_STANDORTDATEN_MAP_LINK_CSS_V1_20260813 */

.standortdaten-overview-page .standort-selector-map {
  position: relative;
}

.standortdaten-overview-page .standort-selector-map iframe {
  pointer-events: none;
}

.standortdaten-overview-page .standort-selector-map-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.standortdaten-overview-page .standort-selector-map-link span {
  padding: 6px 9px;
  border-radius: 9px;
  color: #fff;
  background: rgba(18, 75, 89, 0.9);
  box-shadow: 0 4px 12px rgba(18, 75, 89, 0.22);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

.standortdaten-overview-page .standort-selector-map-link:hover span {
  background: #0b6574;
}

.standortdaten-overview-page .standort-selector-map-link:focus-visible {
  outline: 3px solid rgba(11, 101, 116, 0.45);
  outline-offset: -3px;
  border-radius: 16px;
}

/* SHK_STANDORTDATEN_MAP_LINK_CSS_V1_END_20260813 */

/* SHK_STANDORTDATEN_MAP_LAYOUT_V2_20260813 */

@media (min-width: 1051px) {
  .standortdaten-overview-page .standort-selector-current {
    grid-template-columns:
      minmax(170px, 1fr)
      minmax(380px, 440px)
      180px;
    gap: 22px;
  }

  .standortdaten-overview-page .standort-selector-map {
    width: 100%;
    height: 230px;
  }

  .standortdaten-overview-page .standort-selector-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-self: center;
    width: 180px;
  }

  .standortdaten-overview-page .standort-selector-actions button {
    width: 100%;
    white-space: nowrap;
  }
}

/* SHK_STANDORTDATEN_MAP_LAYOUT_V2_END_20260813 */

/* SHK_STANDORTDATEN_MAP_EDITOR_CSS_V1_20260813 */

.standortdaten-overview-page .standort-map-editor-overlay[hidden] {
  display: none !important;
}

.standortdaten-overview-page .standort-map-editor-overlay {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  background: rgba(7, 22, 28, 0.78);
  backdrop-filter: blur(5px);
}

.standortdaten-overview-page .standort-map-editor-dialog {
  box-sizing: border-box;
  display: grid;
  grid-template-rows:
    auto
    minmax(360px, 1fr)
    auto;
  width: min(1200px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid rgba(11, 101, 116, 0.28);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(4, 26, 32, 0.34);
}

.standortdaten-overview-page .standort-map-editor-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 22px 24px 20px;
  border-bottom: 1px solid rgba(11, 101, 116, 0.14);
  background: #f7fafb;
}

.standortdaten-overview-page .standort-map-editor-header h2 {
  margin: 2px 0 7px;
  color: #124b59;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
}

.standortdaten-overview-page .standort-map-editor-header p:last-child {
  max-width: 760px;
  margin: 0;
  color: #607981;
  line-height: 1.55;
}

.standortdaten-overview-page .standort-map-editor-close {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(18, 75, 89, 0.18);
  border-radius: 50%;
  color: #526b72;
  background: #fff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.standortdaten-overview-page .standort-map-editor-close:hover {
  color: #7d302c;
  border-color: rgba(125, 48, 44, 0.26);
  background: rgba(151, 54, 49, 0.06);
}

.standortdaten-overview-page .standort-map-editor-map {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: #e9f0f1;
}

.standortdaten-overview-page .standort-map-editor-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px 24px;
  border-top: 1px solid rgba(11, 101, 116, 0.14);
  background: #fff;
}

.standortdaten-overview-page .standort-map-editor-footer strong,
.standortdaten-overview-page .standort-map-editor-footer span {
  display: block;
}

.standortdaten-overview-page .standort-map-editor-footer strong {
  margin-bottom: 4px;
  color: #124b59;
}

.standortdaten-overview-page .standort-map-editor-footer span {
  color: #607981;
  font-size: 0.9rem;
}

.standortdaten-overview-page .standort-map-editor-actions {
  display: flex;
  gap: 10px;
}

.standortdaten-overview-page .standort-map-editor-actions button {
  min-width: 150px;
}

.standortdaten-overview-page
  .standort-map-editor-actions
  button:last-child {
  color: #fff;
  background: #124b59;
}

.standortdaten-overview-page
  .standort-map-editor-actions
  button:last-child:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .standortdaten-overview-page .standort-map-editor-overlay {
    padding: 10px;
  }

  .standortdaten-overview-page .standort-map-editor-dialog {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    grid-template-rows:
      auto
      minmax(280px, 1fr)
      auto;
    border-radius: 18px;
  }

  .standortdaten-overview-page .standort-map-editor-header {
    gap: 12px;
    padding: 16px;
  }

  .standortdaten-overview-page
    .standort-map-editor-header
    p:last-child {
    display: none;
  }

  .standortdaten-overview-page .standort-map-editor-close {
    width: 38px;
    height: 38px;
  }

  .standortdaten-overview-page .standort-map-editor-footer {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 16px;
  }

  .standortdaten-overview-page .standort-map-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .standortdaten-overview-page .standort-map-editor-actions button {
    min-width: 0;
    width: 100%;
  }
}

/* SHK_STANDORTDATEN_MAP_EDITOR_CSS_V1_END_20260813 */


/* SHK_STANDORT_ZISTERNE_CALCULATOR_CSS_V1_20260813 */

.standort-cistern-calculator {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid rgba(7, 62, 89, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 44px rgba(7, 35, 48, 0.08);
}

.standort-cistern-calculator
.standort-temperature-section-heading {
  margin-bottom: 22px;
}

.standort-cistern-form {
  display: grid;
  gap: 22px;
}

.standort-cistern-input-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.standort-cistern-input-grid > label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(7, 62, 89, 0.12);
  border-radius: 18px;
  background: #fff;
}

.standort-cistern-input-grid > label > span {
  color: #173c4a;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.standort-cistern-input-grid small {
  color: #60717a;
  font-size: 0.78rem;
  line-height: 1.45;
}

.standort-cistern-input-unit {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(7, 62, 89, 0.2);
  border-radius: 12px;
  background: #fff;
}

.standort-cistern-input-unit:focus-within {
  border-color: #08768a;
  box-shadow: 0 0 0 3px rgba(8, 118, 138, 0.12);
}

.standort-cistern-input-unit input {
  width: 100%;
  min-width: 0;
  padding: 12px 13px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #102d38;
  font: inherit;
  font-weight: 700;
}

.standort-cistern-input-unit > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 13px;
  border-left: 1px solid rgba(7, 62, 89, 0.12);
  background: #eef6f7;
  color: #31545f;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.standort-cistern-form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.standort-cistern-form-actions p {
  margin: 0;
  max-width: 660px;
  color: #60717a;
  font-size: 0.84rem;
  line-height: 1.5;
}

.standort-cistern-results {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(7, 62, 89, 0.12);
}

.standort-cistern-result-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.standort-cistern-result-grid article {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(7, 62, 89, 0.1);
  border-radius: 18px;
  background: #fff;
}

.standort-cistern-result-grid span {
  display: block;
  margin-bottom: 10px;
  color: #60717a;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.standort-cistern-result-grid strong {
  display: block;
  color: #092f3e;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.15;
}

.standort-cistern-result-grid small {
  display: block;
  margin-top: 7px;
  color: #60717a;
  font-size: 0.76rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .standort-cistern-input-grid {
    grid-template-columns: 1fr;
  }

  .standort-cistern-result-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .standort-cistern-calculator {
    padding: 20px;
    border-radius: 20px;
  }

  .standort-cistern-result-grid {
    grid-template-columns: 1fr;
  }

  .standort-cistern-form-actions {
    align-items: stretch;
  }

  .standort-cistern-form-actions .button {
    width: 100%;
  }
}

/* SHK_STANDORT_ZISTERNE_CALCULATOR_CSS_V1_END_20260813 */


/* SHK_STANDORT_ZISTERNE_MONTHLY_BALANCE_CSS_V1_20260813 */

.standort-cistern-monthly-balance {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(7, 62, 89, 0.12);
}

.standort-cistern-monthly-balance
.standort-temperature-section-heading {
  margin-bottom: 22px;
}

.standort-cistern-monthly-balance
.standort-temperature-section-heading h3 {
  margin: 4px 0 8px;
  color: #102d38;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.standort-cistern-monthly-balance
.standort-temperature-section-heading p:last-child {
  max-width: 820px;
  margin-bottom: 0;
  color: #536b75;
  line-height: 1.55;
}

.standort-cistern-balance-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.standort-cistern-balance-summary article {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(7, 62, 89, 0.1);
  border-radius: 18px;
  background: #fff;
}

.standort-cistern-balance-summary span {
  display: block;
  margin-bottom: 9px;
  color: #60717a;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.standort-cistern-balance-summary strong {
  display: block;
  color: #092f3e;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.15;
}

.standort-cistern-balance-summary small {
  display: block;
  margin-top: 7px;
  color: #60717a;
  font-size: 0.75rem;
  line-height: 1.4;
}

.standort-cistern-balance-scroll {
  overflow-x: auto;
  border: 1px solid rgba(7, 62, 89, 0.12);
  border-radius: 18px;
  background: #fff;
}

.standort-cistern-balance-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.standort-cistern-balance-table th,
.standort-cistern-balance-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(7, 62, 89, 0.08);
  text-align: right;
  white-space: nowrap;
}

.standort-cistern-balance-table th:first-child,
.standort-cistern-balance-table td:first-child {
  text-align: left;
}

.standort-cistern-balance-table th {
  background: #eef6f7;
  color: #31545f;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.standort-cistern-balance-table td {
  color: #173c4a;
  font-size: 0.86rem;
  font-weight: 650;
}

.standort-cistern-balance-table tbody tr:last-child td {
  border-bottom: 0;
}

.standort-cistern-balance-table tbody tr:hover {
  background: rgba(8, 118, 138, 0.035);
}

.standort-cistern-balance-note {
  margin: 16px 2px 0;
  color: #60717a;
  font-size: 0.8rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .standort-cistern-balance-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .standort-cistern-balance-summary {
    grid-template-columns: 1fr;
  }

  .standort-cistern-balance-table th,
  .standort-cistern-balance-table td {
    padding: 11px 12px;
  }
}

/* SHK_STANDORT_ZISTERNE_MONTHLY_BALANCE_CSS_V1_END_20260813 */


/* SHK_STANDORT_ZISTERNE_DEMAND_ASSISTANT_CSS_V1_20260813 */

.standort-cistern-demand-assistant {
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid rgba(7, 62, 89, 0.12);
  border-radius: 18px;
  background: #fff;
}

.standort-cistern-demand-assistant > summary {
  position: relative;
  padding: 16px 48px 16px 18px;
  cursor: pointer;
  color: #123746;
  font-size: 0.9rem;
  font-weight: 800;
  list-style: none;
}

.standort-cistern-demand-assistant > summary::-webkit-details-marker {
  display: none;
}

.standort-cistern-demand-assistant > summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: #08768a;
  font-size: 1.35rem;
  font-weight: 800;
}

.standort-cistern-demand-assistant[open] > summary {
  border-bottom: 1px solid rgba(7, 62, 89, 0.1);
  background: #f6fafb;
}

.standort-cistern-demand-assistant[open] > summary::after {
  content: '−';
}

.standort-cistern-demand-content {
  display: grid;
  gap: 20px;
  padding: 20px;
}

.standort-cistern-demand-grid {
  display: grid;
  grid-template-columns:
    minmax(130px, 0.7fr)
    minmax(190px, 1fr)
    minmax(190px, 1fr)
    minmax(220px, 1.25fr);
  gap: 14px;
  align-items: stretch;
}

.standort-cistern-demand-grid > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(7, 62, 89, 0.1);
  border-radius: 15px;
  background: #fbfdfd;
}

.standort-cistern-demand-grid > label > span {
  color: #173c4a;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

.standort-cistern-demand-grid input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid rgba(7, 62, 89, 0.2);
  border-radius: 11px;
  background: #fff;
  color: #102d38;
  font: inherit;
  font-weight: 700;
}

.standort-cistern-demand-grid input[type="number"]:focus {
  outline: none;
  border-color: #08768a;
  box-shadow: 0 0 0 3px rgba(8, 118, 138, 0.12);
}

.standort-cistern-demand-check {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: start;
  column-gap: 10px !important;
}

.standort-cistern-demand-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #08768a;
}

.standort-cistern-demand-check > span {
  display: block;
}

.standort-cistern-demand-check small {
  display: block;
  margin-top: 5px;
  color: #60717a;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
}

.standort-cistern-demand-result {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid rgba(7, 62, 89, 0.1);
  border-radius: 15px;
  background: #eef6f7;
}

.standort-cistern-demand-result > span {
  color: #4d6873;
  font-size: 0.8rem;
  font-weight: 700;
}

.standort-cistern-demand-result strong {
  color: #092f3e;
  font-size: 1.25rem;
  line-height: 1.1;
}

.standort-cistern-demand-result .button {
  margin-left: auto;
}

.standort-cistern-demand-note {
  margin: 0;
  color: #60717a;
  font-size: 0.78rem;
  line-height: 1.55;
}

.standort-cistern-input-grid select {
  width: 100%;
  padding: 11px 36px 11px 12px;
  border: 1px solid rgba(7, 62, 89, 0.2);
  border-radius: 11px;
  background: #fff;
  color: #102d38;
  font: inherit;
  font-weight: 700;
}

.standort-cistern-input-grid select:focus {
  outline: none;
  border-color: #08768a;
  box-shadow: 0 0 0 3px rgba(8, 118, 138, 0.12);
}

@media (max-width: 900px) {
  .standort-cistern-demand-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .standort-cistern-demand-content {
    padding: 15px;
  }

  .standort-cistern-demand-grid {
    grid-template-columns: 1fr;
  }

  .standort-cistern-demand-result {
    align-items: stretch;
  }

  .standort-cistern-demand-result .button {
    width: 100%;
    margin-left: 0;
  }
}

/* SHK_STANDORT_ZISTERNE_DEMAND_ASSISTANT_CSS_V1_END_20260813 */