/* Honorarrechner – ergänzt style.css der Landingpage. © 2026 stb-ovcharenko.de */

.hr-hero { padding: 64px 0 44px; background: #fff; }
.hr-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.hr-hero .lead { max-width: 760px; margin: 22px 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.58; }
.hr-section { padding-top: 56px; }
.logo { display: inline-block; }

.hr-form fieldset { margin-bottom: 24px; }
.field-grid.hr-one { grid-template-columns: 1fr; }
.field[hidden] { display: none; }
.hr-input { position: relative; }
.hr-input input { padding-right: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.hr-input span { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.hr-block { margin-top: 8px; }
.hr-label { margin: 0 0 10px; color: var(--ink); font-size: 0.94rem; font-weight: 700; }
.hr-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hr-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.hr-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(166, 25, 46, 0.09); color: var(--brand); font-size: 0.86rem; font-weight: 800; line-height: 1; }
.hr-item label { display: contents; cursor: pointer; }
.hr-item input[type="checkbox"] { width: 20px; height: 20px; margin: 4px; accent-color: var(--brand); cursor: pointer; }
.hr-name { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.hr-name b { display: block; font-weight: 700; line-height: 1.35; }
.hr-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
.hr-amt { padding-top: 1px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr-item.is-off .hr-name, .hr-item.is-off .hr-amt { opacity: 0.45; }

.hr-result { position: relative; overflow: hidden; margin-top: 26px; padding: 22px 26px 20px 31px; border: 1px solid #e5ddd6; border-radius: var(--radius); background: var(--warm); }
.hr-result::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--brand); }
.hr-empty, .hr-error { margin: 0; color: var(--muted); }
.hr-error { color: #851125; }
.hr-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.hr-row span:last-child { white-space: nowrap; }
.hr-total { margin-top: 10px; padding-top: 14px; border-top: 1px solid #e5ddd6; align-items: baseline; color: var(--ink); font-weight: 700; }
.hr-total strong { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.1; letter-spacing: -0.03em; }
.hr-basis { margin: 12px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.is-loading .hr-amt, .is-loading .hr-result strong, .is-loading .hr-row span:last-child { opacity: 0.45; transition: opacity 0.15s ease; }

.hr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 24px; }
.hr-cta .cta-note { max-width: 360px; }
.hr-cta .cta-note:empty { display: none; }

.hr-extras { margin-top: 30px; background: var(--soft); }
.hr-extras li b { color: var(--ink); font-weight: 700; }
.hr-small { margin: 10px 0 0; color: var(--muted); font-size: 0.82rem; }
.hr-notes { margin-top: 22px; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
.hr-notes p { margin: 0 0 8px; }
.hr-notes p:last-child { margin-bottom: 0; }

/* Anfrageformular */
.hr-lead { margin-top: 30px; scroll-margin-top: 96px; }
.hr-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 24px; padding: 14px 18px; border: 1px solid #e5ddd6; border-radius: 12px; background: var(--warm); color: var(--muted); font-size: 0.9rem; }
.hr-summary strong { color: var(--ink); font-size: 1.05rem; white-space: nowrap; }
.field textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid #aeb8be;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.45;
  resize: vertical;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea:hover { border-color: #7c8991; }
.field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px rgba(166, 25, 46, 0.1); }

@media (max-width: 720px) {
  .hr-form .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .hr-form .chip { padding: 10px 6px; font-size: 0.9rem; text-align: center; white-space: nowrap; }
  .hr-hero { padding: 42px 0 30px; }
  .hr-section { padding-top: 40px; }
  .hr-item { gap: 12px; }
  .hr-result { padding: 20px 18px 18px 23px; }
  .hr-cta .btn { width: 100%; }
  .hr-cta .cta-note { max-width: none; text-align: center; }
}

/* Aufruf von der GmbH-Landingpage: nur GmbH / UG */
.hr-text-gmbh { display: none; }
.hr-nur-gmbh .hr-text-alle,
.hr-nur-gmbh .hr-rechtsform { display: none; }
.hr-nur-gmbh .hr-text-gmbh { display: inline; }