/* Gutachterkosten-Rechner (templates/tool-gutachterkosten.php). Karte, Schritte,
   Felder, Auswahlflächen, Hinweise und Weiche kommen aus dem gemeinsamen
   Unterbau der Rechner (tailwind/input.css, css/rechner-weiche.css); hier
   stehen nur die Teile, die dieser Rechner zusätzlich hat: der Kostenbeleg und
   der Weg „Wer zahlt?“.

   Das wiederkehrende Motiv ist der Kostenbeleg: ein Zettel mit gezacktem
   Abriss oben und unten, Posten mit Erläuterung, punktierten Führungslinien zum
   Betrag, einer Zwischensumme für den Vorschuss und der doppelt
   unterstrichenen Summe. „Wer zahlt?“ antwortet darauf als nummerierter Weg
   mit Stationen; die letzte – „Laut Ihrer Police prüfen“ – ist hervorgehoben.
   Zustände tragen immer auch Text, nie nur Farbe. */

/* ---------- Kopf der Karte ---------- */
.gk-card-head {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary-900) 10%, transparent);
}
.gk-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  line-height: 1.2;
  color: var(--color-primary-900);
}
.gk-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-primary-700);
}
.gk-usps li { display: inline-flex; align-items: center; gap: 0.3rem; }
.gk-usps svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--color-primary-600); }
.gk-privacy { font-size: 0.84rem; line-height: 1.5; color: var(--color-primary-700); }

/* ---------- Felder ---------- */
.gk-step-title {
  margin-bottom: 0.8rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-primary-950);
}
.gk-num { font-variant-numeric: tabular-nums; max-width: 12rem; }
.gk-wide { max-width: 32rem; }
.gk-form .option-card { min-width: 0; }
.gk-form .option-label,
.gk-form .option-note { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 900px) { .gk-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .gk-options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gk-options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-gk-anlass-group] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { [data-gk-anlass-group] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gk-sub { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed color-mix(in oklch, var(--color-primary-900) 18%, transparent); }
.gk-hours { margin-top: 1.5rem; }
.gk-hours:first-child,
[data-gk-gericht-row][hidden] + .gk-hours { margin-top: 0; }
.gk-sub[hidden],
.gk-hours[hidden],
.option-card[hidden],
[data-gk-step3][hidden],
[data-gk-gericht-row][hidden],
[data-gk-anlass-note][hidden],
[data-gk-receipt][hidden],
[data-gk-steps-block][hidden],
[data-gk-price][hidden],
.gk-result .check-list[hidden] { display: none; }
.gk-live-note {
  margin-top: 0.8rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--color-accent-500);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-primary-900);
}
.gk-live-note:empty { display: none; }
.gk-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin-top: 1.2rem;
  padding: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-primary-900);
  cursor: pointer;
}
.gk-check input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; accent-color: var(--color-primary-600); }
.gk-check input:focus-visible { outline: 3px solid var(--color-accent-500); outline-offset: 2px; }
.gk-check:has(input:disabled) { cursor: default; }

/* ---------- Ergebnis ---------- */
/* Nach dem Rechnen springt der Fokus hierher, damit Screenreader beim Ergebnis
   weiterlesen; der Bereich selbst ist kein Bedienelement. */
.gk-result:focus,
.gk-result:focus-visible { outline: none; }
[data-gk-summary] {
  margin-top: 0.2rem;
  padding-left: 0.95rem;
  border-left: 5px solid var(--color-accent-500);
}
.gk-title {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  color: var(--color-primary-950);
}
.gk-lead { margin-top: 0.55rem; font-size: 0.98rem; line-height: 1.6; color: var(--color-primary-900); }

/* Der Kostenbeleg: weißer Zettel, oben und unten mit gezacktem Abriss –
   halbrunde Kerben in einem weißen Streifen über und unter dem Zettel. */
.gk-receipt {
  --gk-edge: 0.55rem;
  position: relative;
  margin: calc(1.6rem + var(--gk-edge)) 0 var(--gk-edge);
  padding: 1.2rem 1rem 1.2rem;
  background: #fff;
}
.gk-receipt::before,
.gk-receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--gk-edge);
}
.gk-receipt::before {
  top: calc(var(--gk-edge) * -1);
  background: radial-gradient(circle at 50% 0, transparent 0.32rem, #fff 0.34rem) 0 0 / 0.9rem var(--gk-edge) repeat-x;
}
.gk-receipt::after {
  bottom: calc(var(--gk-edge) * -1);
  background: radial-gradient(circle at 50% 100%, transparent 0.32rem, #fff 0.34rem) 0 0 / 0.9rem var(--gk-edge) repeat-x;
}
.gk-receipt-title {
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--color-primary-950);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--color-primary-950);
}
.gk-table {
  width: 100%;
  margin-top: 0.3rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-950);
}
.gk-row th,
.gk-row td {
  padding: 0.7rem 0;
  vertical-align: bottom;
  border-bottom: 1px dotted color-mix(in oklch, var(--color-primary-900) 32%, transparent);
}
.gk-row th { font-weight: 400; text-align: left; padding-right: 0.75rem; }
.gk-row-label { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.gk-row-detail { display: block; margin-top: 0.15rem; font-size: 0.82rem; line-height: 1.45; color: var(--color-primary-800); overflow-wrap: anywhere; }
.gk-row-amount { text-align: right; white-space: nowrap; font-weight: 700; font-size: 0.98rem; }
.gk-row--sub th,
.gk-row--sub td { background: var(--color-primary-50); }
.gk-row--sub th { padding-left: 0.55rem; }
.gk-row--sub td { padding-right: 0.55rem; }
.gk-row--sum th,
.gk-row--sum td { padding-top: 0.9rem; border-bottom: 4px double var(--color-primary-950); }
.gk-row--sum .gk-row-label { font-size: 1.05rem; }
.gk-row--sum .gk-row-amount { font-family: var(--font-display); font-size: 1.2rem; }
@media (min-width: 640px) { .gk-receipt { padding-inline: 1.4rem; } }

.gk-block {
  margin-top: 1.5rem;
  padding: 1rem 0.95rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-600) 20%, transparent);
}
.gk-block-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--color-primary-950);
}
.gk-block-text { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.6; color: var(--color-primary-900); }
@media (min-width: 640px) { .gk-block { padding: 1.1rem 1.25rem; } }

/* Rechenweg: nummerierte Schritte mit Vorschrift. */
.gk-steps {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: gk-step;
  font-size: 0.88rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-900);
}
.gk-steps li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.8rem;
  border-top: 1px dotted color-mix(in oklch, var(--color-primary-900) 22%, transparent);
  overflow-wrap: anywhere;
}
.gk-steps li::before {
  counter-increment: gk-step;
  content: counter(gk-step);
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary-100);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  color: var(--color-primary-800);
}

/* ---------- Wer zahlt? ---------- */
.gk-zahlt { background: color-mix(in oklch, var(--color-primary-50) 60%, #fff); }
.gk-questions { display: grid; gap: 0.9rem; margin-top: 0.9rem; }
.gk-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.gk-question-q { padding: 0; margin-bottom: 0.5rem; font-weight: 700; font-size: 0.95rem; line-height: 1.4; color: var(--color-primary-950); }
.gk-question-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gk-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklch, var(--color-primary-900) 18%, transparent);
  background: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary-900);
  cursor: pointer;
}
.gk-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gk-choice:hover { border-color: var(--color-primary-400); }
.gk-choice:has(input:checked) { border-color: var(--color-primary-700); background: var(--color-primary-700); color: #fff; }
.gk-choice:has(input:checked)::before { content: "✓"; margin-right: 0.4rem; font-weight: 700; }
.gk-choice:has(input:focus-visible) { outline: 3px solid var(--color-accent-500); outline-offset: 2px; }

/* Der Weg: Stationen an einer Linie, die letzte ist der Hinweis zur Police. */
.gk-path { position: relative; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.gk-stop { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding-bottom: 1rem; }
.gk-stop::before {
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 2rem;
  bottom: 0;
  width: 2px;
  background: color-mix(in oklch, var(--color-primary-600) 35%, transparent);
}
.gk-stop:last-child { padding-bottom: 0; }
.gk-stop:last-child::before { display: none; }
.gk-stop-no {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary-800);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
.gk-stop-body { min-width: 0; padding: 0.15rem 0 0; }
.gk-stop-title { font-weight: 700; font-size: 0.98rem; line-height: 1.35; color: var(--color-primary-950); }
.gk-stop-text { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.6; color: var(--color-primary-900); overflow-wrap: break-word; }
.gk-stop--police .gk-stop-no { background: var(--color-accent-500); color: var(--color-primary-950); }
.gk-stop--police .gk-stop-body {
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  background: color-mix(in oklch, var(--color-accent-500) 16%, #fff);
  border: 1px solid color-mix(in oklch, var(--color-accent-700) 40%, transparent);
}

.gk-disclaimer {
  margin-top: 1.2rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--color-accent-500);
  font-size: 0.88rem;
  line-height: 1.55;
  color: color-mix(in oklch, var(--color-primary-950) 86%, #000);
}

/* ---------- Telefon ---------- */
/* Die Schrittnummer nimmt keine eigene Spalte: Die Felder bekommen die volle
   Breite der Karte, ab 320 px ohne Überlauf. Im Beleg rückt der Betrag unter
   den Posten, damit lange Erläuterungen nicht gequetscht werden. */
@media (max-width: 479px) {
  .gk-form .calc-step { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .gk-form .calc-step + .calc-step { margin-top: 1.5rem; padding-top: 1.5rem; }
  .gk-form .calc-step-no { margin-bottom: 0; }
  .gk-result { padding: 1rem; }
  [data-gk-summary] { padding-left: 0.7rem; border-left-width: 4px; }
  .gk-receipt { padding-inline: 0.8rem; }
  .gk-block { padding-inline: 0.8rem; }
  .gk-table,
  .gk-table tbody,
  .gk-row,
  .gk-row th,
  .gk-row td { display: block; }
  .gk-row th { padding: 0.65rem 0 0.1rem; border: 0; }
  .gk-row td { padding: 0 0 0.6rem; text-align: right; }
  .gk-row--sub th { padding-left: 0.5rem; }
  .gk-row--sub td { padding-right: 0.5rem; }
  .gk-row--sum th { padding-top: 0.8rem; border: 0; }
  .gk-result .calc-weiche-options { grid-template-columns: minmax(0, 1fr); }
  .gk-result .calc-weiche-option { min-width: 0; padding-inline: 0.6rem; }
  .gk-stop { grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.6rem; }
  .gk-stop-no { width: 1.7rem; height: 1.7rem; font-size: 0.78rem; }
  .gk-stop::before { left: calc(0.85rem - 1px); top: 1.7rem; }
}

/* Einheit direkt hinter dem Feld, nicht am Rand der Spalte. */
.gk-form .calc-unit-row { grid-template-columns: minmax(0, 12rem) auto; justify-content: start; align-items: center; }