/* r17-preise: Rückmeldung Lucas Fichter und Julia Ulrich 16.10.2026 („Website Rückmeldung.docx“). Zuständigkeit: LIESMICH-Hauptwebsite.md, Abschnitt 16.10.2026. */

/* P1  Zuzahlungsrechner auf /preise/ (r17-preise.js P1). Grundform aus
       style.css (.rechner, .rechner-feld, .rechner-zahl, .rechner-ergebnis);
       hier nur, was der neue Rechner zusätzlich braucht: Fachwahl, bis zu
       drei Heilmittel-Zeilen, Auswahllisten, Aufschlüsselung, Preistabelle.
       Keine Symbolkacheln. Am Handy steht jede Zeile untereinander, nichts
       ist breiter als die Spalte. */

.r17-zr .r17-zr-eingabe,
.r17-zr .r17-zr-ausgabe { min-width: 0; }

/* Fachbereich: zwei Felder nebeneinander, das gewählte grün gefüllt */
.r17-zr-fach { border: 0; margin: 0 0 var(--m6); padding: 0; min-width: 0; }
.r17-zr-fach legend,
.r17-zr .rechner-feld > label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--grad-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: var(--m2);
  padding: 0;
}
.r17-zr-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m2); }
.r17-zr-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.r17-zr-wahl label {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: var(--m2) var(--m3);
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--bogen-feld);
  background: var(--papier-warm);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--gruen-dunkel);
  text-align: center;
  cursor: pointer;
  transition: background var(--zeit-tipp) linear, border-color var(--zeit-tipp) linear, color var(--zeit-tipp) linear;
  hyphens: manual;
}
.r17-zr-wahl label:hover { border-color: var(--gruen-mittel); }
.r17-zr-wahl input:checked + label { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff; }
.r17-zr-wahl input:focus-visible + label { outline: 3px solid var(--orange-aktion); outline-offset: 2px; }

/* Eine Zeile: Heilmittel (breit) und Anzahl (schmal), darunter ggf. Entfernen */
.r17-zr-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 0 var(--m3);
  align-items: end;
  padding-bottom: var(--m2);
}
.r17-zr-zeile[hidden] { display: none; }
.r17-zr-zeile + .r17-zr-zeile { border-top: 1px dashed var(--linie-stark); padding-top: var(--m4); }
.r17-zr-zeile .rechner-feld { margin-bottom: var(--m3); min-width: 0; }
.r17-zr-anzahl .rechner-zahl { padding: 9px var(--m3); }
.r17-zr-anzahl .rechner-zahl input { font-size: 1.25rem; text-align: center; }

.r17-zr select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 40px 12px 14px;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--tinte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-feld);
  background-color: var(--papier-warm);
  /* Pfeil als Bild im Stylesheet (CSP: img-src data: ist erlaubt) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234E7B08' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.r17-zr select:hover { border-color: var(--gruen-mittel); }
.r17-zr select:focus { outline: none; border-color: var(--gruen-mittel); box-shadow: 0 0 0 3px rgba(145, 199, 61, .28); }
.r17-zr select:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 2px; box-shadow: none; }

.r17-zr-weg,
.r17-zr-dazu {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--gruen-link);
  background: none;
  border: 0;
  padding: var(--m2) 0;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
}
.r17-zr-weg { grid-column: 1 / -1; justify-self: start; margin-top: calc(var(--m2) * -1); text-decoration: underline; text-underline-offset: 3px; }
.r17-zr-dazu {
  display: inline-flex; align-items: center; gap: var(--m2);
  margin: var(--m1) 0 var(--m6);
  padding: var(--m2) var(--m4);
  border: 1.5px dashed var(--gruen-mittel);
  border-radius: var(--bogen-feld);
}
.r17-zr-dazu::before { content: "+"; font-size: 1.2rem; line-height: 1; }
.r17-zr-dazu:hover { background: var(--karte-hell); }
.r17-zr-dazu[hidden] { display: none; }
.r17-zr-weg:focus-visible,
.r17-zr-dazu:focus-visible { outline: 3px solid var(--orange-aktion); outline-offset: 2px; }

.r17-zr-besuch { margin-bottom: 0; }
.r17-zr-feldhinweis { margin: var(--m2) 0 0; font-size: var(--grad-xs); color: var(--tinte-leise); line-height: 1.55; }

/* Aufschlüsselung unter dem Ergebnis: Posten links, Betrag rechts */
.r17-zr-posten { list-style: none; margin: var(--m4) 0 0; padding: 0; }
.r17-zr-posten:empty { display: none; }
.r17-zr-posten li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--m3);
  padding: var(--m2) 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--grad-s);
  color: var(--tinte-weich);
  line-height: 1.45;
}
.r17-zr-posten li span { min-width: 0; overflow-wrap: anywhere; }
.r17-zr-posten li b { flex: none; font-family: var(--font-head); font-weight: 700; color: var(--tinte); font-variant-numeric: tabular-nums; }
.r17-zr-posten li:last-child { border-bottom: 0; }

/* P2  Preistabelle „Diese Kassenpreise legen wir zugrunde“ (aufklappbar,
       ohne Skript offen lesbar) */
.r17-zr-preise { margin-top: var(--m6); }
.r17-kassenpreise {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--m6);
  font-size: var(--grad-s);
  color: var(--tinte-weich);
}
.r17-kassenpreise caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-m);
  color: var(--tinte);
  padding: 0 0 var(--m2);
}
.r17-kassenpreise th,
.r17-kassenpreise td { padding: var(--m2) var(--m2); border-bottom: 1px solid var(--linie); vertical-align: top; text-align: left; }
.r17-kassenpreise th:first-child { padding-left: 0; }
.r17-kassenpreise thead th {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--grad-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinte);
  border-bottom-color: var(--linie-stark);
}
.r17-kassenpreise tbody th { font-weight: 500; color: var(--tinte); overflow-wrap: anywhere; hyphens: auto; }
.r17-kassenpreise tbody th small { display: block; font-size: var(--grad-xs); font-weight: 400; color: var(--tinte-leise); }
.r17-kassenpreise td,
.r17-kassenpreise thead th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r17-kassenpreise thead th:not(:first-child) { white-space: normal; }
.r17-kassenpreise td:last-child { padding-right: 0; font-weight: 600; color: var(--tinte); }
.r17-kassenpreise tr[data-zr-art="besuch"] th,
.r17-kassenpreise tr[data-zr-art="besuch"] td { background: var(--papier-warm); }
.r17-zr-quelle { font-size: var(--grad-xs); color: var(--tinte-leise); line-height: 1.6; margin: 0; max-width: 70ch; }
.r17-zr-quelle a { color: var(--gruen-link); }

/* Schmale Spalte (Handy): Heilmittel über die ganze Breite, damit der Name
   lesbar bleibt (390 px: „Krankengymna…“), die Anzahl darunter. */
@container rechner (max-width: 520px) {
  .r17-zr-zeile { grid-template-columns: minmax(0, 1fr); }
  .r17-zr-anzahl .rechner-zahl { max-width: 9rem; }
  .r17-zr-wahl label { font-size: .9rem; }
}
@media (max-width: 759px) {
  .r17-kassenpreise { font-size: .85rem; }
  .r17-kassenpreise th,
  .r17-kassenpreise td { padding: var(--m2) 6px; }
}

/* P3  Reiter „Ihre Behandlungszeit erweitern“: der längste der drei
       Reiter. Am Handy bricht er an der weichen Trennung, die Schrift wird
       eine Spur kleiner, damit alle drei Reiter gleich hoch bleiben. */
@media (max-width: 759px) {
  .z-tarif-wahl #tab-mehr-zeit strong { font-size: .88rem; hyphens: manual; }
}