/* ============================================================
   Teil 12: Honorarrechner (HOAI 2021)
   ------------------------------------------------------------
   Übernommen aus dem Prototyp briefing-hoai/hoai-rechner.html.
   Dabei umgestellt:

   * Der :root-Block des Prototyps ist NICHT mitgewandert. Er brachte
     eigene Werte für --agsta-bg, --agsta-text, --agsta-border und
     --agsta-muted mit; diese Namen benutzt die App an rund 200 Stellen
     bereits als Weiterleitung auf ihr Zielsystem. Stattdessen stehen
     hier die Zielnamen aus 01-tokens.css:
       --agsta-primary      -> --taupe
       --agsta-primary-dark -> --taupe-dark   (Flächen mit weisser Schrift,
                               --taupe verfehlt mit 4,09:1 die WCAG AA)
       --agsta-bg-muted     -> --surface-soft / --taupe-wash
       --agsta-font-*       -> --f-body / --f-ui / --f-bold / --f-head
       --agsta-radius: 6px  -> --radius (= 0, die App hat keine runden Ecken)
       --agsta-space-*      -> --s1 .. --s6
   * Der @font-face-Block des Prototyps ist ebenfalls nicht mitgewandert,
     die Schnitte stehen in 01-tokens.css. Achtung: die App deklariert
     "Halcom Book" mit Leerzeichen, der Prototyp "Halcom-Book".
   * Wo --f-bold oder --f-head steht, gehoert font-weight: normal dazu -
     sonst fettet der Browser einen bereits fetten Schnitt nach.

   Die allgemeinen Muster - Karte, Betragszeile, Schaltflächen, Feld und
   Feldreihe - stehen in 13-bausteine.css und sind dort ungebunden. Das
   Aussehen der Eingabefelder selbst bleibt hier: der Prototyp stylte
   input[type=text] und select global, und das würde auf einer gemeinsamen
   Seitenbasis jede andere Ansicht mitverändern. Hier
   steht nur noch, was wirklich zum Honorarrechner gehört: Formularfelder,
   Leistungsphasenraster, Honorarsatz-Schieber, Ergebnisspalte,
   Pauschal-Auswahl und die Liste der Ermittlungen.

   Alles davon ist unter .honorar-rechner gekapselt. Der Prototyp stylte
   input[type=text] und select global; auf einer gemeinsamen Seitenbasis
   wuerde das jede andere Ansicht mitverändern.

   Zum !important an den Schaltflächen: Teil 03 färbt jedes button-Element
   pauschal in --taupe-dark mit weisser Schrift, und zwar mit !important.
   Der Rechner braucht aber leise Segment- und Schnellwahlknöpfe. Gegen
   !important kommt nur !important an; die Regeln hier sind deshalb bewusst
   so geschrieben und stehen ausschliesslich unter .honorar-rechner.
   ============================================================ */

.honorar-rechner {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.honorar-rechner b,
.honorar-rechner strong {
  font-family: var(--f-bold);
  font-weight: normal;
}

.honorar-rechner .spalten {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--s4);
  align-items: start;
}

@media (max-width: 980px) {
  .honorar-rechner .spalten {
    grid-template-columns: 1fr;
  }

  .honorar-rechner .ergebnis {
    position: static !important;
  }
}

.honorar-rechner input[type="text"],
.honorar-rechner input[type="number"],
.honorar-rechner select,
.honorar-rechner textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.honorar-rechner input:focus,
.honorar-rechner select:focus,
.honorar-rechner textarea:focus {
  outline: none;
  border-color: var(--taupe);
  box-shadow: 0 0 0 3px rgba(134, 124, 114, 0.18);
}

.honorar-rechner select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B6560' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.honorar-rechner select option:disabled {
  color: var(--taupe-light);
}

/* Der Rechner setzt den Innenabstand seiner Eingabefelder selbst (oben), und
   diese Regel ist genauso spezifisch wie der Baustein .mit-einheit input.
   Deshalb steht der Platz fuer die Einheit hier noch einmal - wer den
   Feldabstand eines Moduls setzt, muss auch den Platz fuer die Einheit
   setzen. */
.honorar-rechner .mit-einheit input {
  padding-right: 44px;
}

/* Segment-Umschalter */
.honorar-rechner .segmente {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.honorar-rechner .segmente button {
  flex: 1;
  min-height: 0;
  padding: 7px 10px;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: normal;
  color: var(--muted) !important;
  background: none !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: all 0.12s;
}

.honorar-rechner .segmente button:hover {
  color: var(--text) !important;
  background: none !important;
}

.honorar-rechner .segmente button[aria-pressed="true"] {
  background: var(--bg) !important;
  color: var(--taupe-dark) !important;
  font-family: var(--f-bold);
  font-weight: normal;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.07) !important;
}

/* Honorarsatz-Schieber */
.honorar-rechner .satz-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.honorar-rechner .satz-wert {
  font-family: var(--f-bold);
  font-weight: normal;
  font-size: 13px;
  color: var(--taupe-dark);
}

.honorar-rechner input[type="range"] {
  width: 100%;
  accent-color: var(--taupe);
  margin: 2px 0 4px;
  cursor: pointer;
}

/* Der Daumen bleibt innerhalb der Spur: bei 0 % sitzt sein Mittelpunkt
   eine halbe Daumenbreite vom linken Rand entfernt. Die Marken werden
   deshalb um denselben Betrag eingerueckt, sonst zeigen sie neben die
   Position, die sie beschriften. 9px ist der Standarddaumen. */
.honorar-rechner .satz-marken {
  display: flex;
  justify-content: space-between;
  padding: 0 9px;
  font-family: var(--f-ui);
  font-size: 11px;
  color: var(--muted);
}

.honorar-rechner .satz-marken button {
  background: none !important;
  border: 0 !important;
  padding: 0;
  min-height: 0;
  font: inherit;
  font-weight: normal;
  color: var(--muted) !important;
  cursor: pointer;
}

.honorar-rechner .satz-marken button:hover {
  background: none !important;
  color: var(--taupe-dark) !important;
}

.honorar-rechner .satz-marken button[aria-pressed="true"] {
  font-family: var(--f-bold);
  font-weight: normal;
  color: var(--taupe-dark) !important;
}

/* ── Leistungsphasen ─────────────────────────────────────────── */
.honorar-rechner .lph-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.honorar-rechner .lph-kopf .karte-titel {
  margin: 0;
  border: 0;
  padding: 0;
}

.honorar-rechner .lph-schnellwahl {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.honorar-rechner .lph-schnellwahl button {
  padding: 3px 9px;
  min-height: 0;
  font-family: var(--f-ui);
  font-size: 11.5px;
  font-weight: normal;
  color: var(--muted) !important;
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: all 0.12s;
}

.honorar-rechner .lph-schnellwahl button:hover {
  background: var(--taupe-wash) !important;
  border-color: var(--taupe) !important;
  color: var(--taupe-dark) !important;
}

.honorar-rechner .lph-zeile {
  display: grid;
  grid-template-columns: 22px 1fr 76px 112px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.honorar-rechner .lph-zeile:last-of-type {
  border-bottom: 0;
}

.honorar-rechner .lph-zeile.aus {
  opacity: 0.38;
}

/* Eckig wie ueberall in der App (--radius: 0). Native Haekchen bleiben in
   Safari und Chrome trotz border-radius rundlich, deshalb appearance:none
   und ein selbst gezeichneter Haken. Die 22px aus
   03-layout-und-komponenten.css stehen dort mit !important und gelten
   weiter; hier wird nur das Aussehen gesetzt. */
.honorar-rechner .lph-zeile input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: 1px solid var(--text);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

/* Das !important ist die Antwort auf background/border !important in
   03-layout-und-komponenten.css Zeile 459. Ohne es bleibt das Kaestchen
   weiss und der Haken unsichtbar. Haken als background-image statt als
   ::after, weil Pseudoelemente an <input> nicht zuverlaessig sind. */
.honorar-rechner .lph-zeile input[type="checkbox"]:checked {
  background-color: var(--taupe-dark) !important;
  border-color: var(--taupe-dark) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='square'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}

.honorar-rechner .lph-zeile input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 2px;
}

.honorar-rechner .lph-name {
  font-size: 13px;
  min-width: 0;
}

.honorar-rechner .lph-name span {
  color: var(--muted);
}

.honorar-rechner .lph-prozent input {
  padding: 5px 6px;
  font-size: 13px;
}

.honorar-rechner .lph-betrag {
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.honorar-rechner .lph-summe {
  display: grid;
  grid-template-columns: 22px 1fr 76px 112px;
  gap: 10px;
  align-items: center;
  padding: 10px 0 0;
  margin-top: 4px;
  border-top: 2px solid var(--text);
  font-family: var(--f-bold);
  font-weight: normal;
}

.honorar-rechner .lph-summe > :nth-child(3) {
  text-align: center;
  font-size: 13px;
}

.honorar-rechner .lph-summe > :nth-child(4) {
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Ergebnis ────────────────────────────────────────────────── */
/* Die Ergebnisspalte soll beim Scrollen vollstaendig stehen bleiben. Ein
   blosses position:sticky reicht dafuer nicht: ist der Kasten hoeher als
   das Fenster, klebt erst seine Unterkante und der Kopf mit Honorarzone
   und Tafelwerten wandert nach oben aus dem Bild. Deshalb die Hoehe aufs
   Fenster begrenzen und den Inhalt notfalls in der Spalte selbst scrollen
   lassen - so bleibt die Summe immer sichtbar. */
.honorar-rechner .ergebnis {
  position: sticky;
  top: var(--s5);
  max-height: calc(100vh - var(--s5) - var(--s4));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.honorar-rechner .tafel-info {
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 11px 13px;
  margin-bottom: 14px;
  font-size: 12.5px;
}

/* Die Betragszeile der Ergebnisspalte. Dasselbe Muster wie .zeile in
   13-bausteine.css, nur groesser gesetzt - sie traegt hier die Summe der
   Seite und nicht eine Angabe im Kasten. */
.honorar-rechner .summe-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
}

.honorar-rechner .summe-zeile .betrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.honorar-rechner .summe-zeile.trennen {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 9px;
}

.honorar-rechner .summe-zeile.stark {
  font-family: var(--f-bold);
  font-weight: normal;
}

.honorar-rechner .summe-zeile.gesamt {
  border-top: 2px solid var(--text);
  margin-top: 8px;
  padding-top: 11px;
  font-family: var(--f-head);
  font-weight: normal;
  font-size: 17px;
}

.honorar-rechner .summe-zeile.gesamt .betrag {
  color: var(--taupe-dark);
}

.honorar-rechner .summe-zeile .label-leise {
  color: var(--muted);
  font-size: 12.5px;
}

.honorar-rechner .summe-zeile.durchgestrichen .betrag {
  text-decoration: line-through;
  color: var(--muted);
}

.honorar-rechner .hinweis {
  background: var(--taupe-wash);
  border-left: 3px solid var(--taupe);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-top: 14px;
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.honorar-rechner .hinweis:empty {
  display: none;
}

/* ── Schaltflächen ───────────────────────────────────────────── */
/* Aussehen und Aktionsleiste stehen in 13-bausteine.css. Hier steht nur,
   dass sich die Knöpfe in der Ergebniskarte die Breite teilen. */
.honorar-rechner .aktionen .knopf {
  flex: 1;
  min-width: 120px;
}

/* ── Aufklappbereich ─────────────────────────────────────────── */
.honorar-rechner details.aufklapp {
  margin-top: 10px;
}

/* Der Aufklapper gehoert sichtbar zum Feld darueber, nicht zur ganzen Reihe. */
.honorar-rechner details.aufklapp-eng {
  margin-top: 4px;
}

.honorar-rechner details.aufklapp > summary {
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--taupe-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 3px 0;
}

.honorar-rechner details.aufklapp > summary::-webkit-details-marker {
  display: none;
}

.honorar-rechner details.aufklapp > summary::before {
  content: "+ ";
}

.honorar-rechner details.aufklapp[open] > summary::before {
  content: "– ";
}

.honorar-rechner details.aufklapp > div {
  padding: 12px;
  margin-top: 6px;
  background: var(--surface-soft);
  border-radius: var(--radius);
}

.honorar-rechner .tga-ergebnis {
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.6;
}

.honorar-rechner .tga-ergebnis b {
  color: var(--text);
}

.honorar-rechner .tga-uebernehmen {
  margin-top: 10px;
}

/* ── Pauschale ───────────────────────────────────────────────── */
.honorar-rechner .pauschal-details {
  margin-top: 10px;
}

.honorar-rechner .stufen {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.honorar-rechner .stufen button {
  flex: 1;
  min-width: 58px;
  min-height: 0;
  padding: 6px 4px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: normal;
  color: var(--muted) !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: all 0.12s;
}

.honorar-rechner .stufen button:hover {
  background: var(--taupe-wash) !important;
  border-color: var(--taupe) !important;
  color: var(--taupe-dark) !important;
}

.honorar-rechner .stufen button[aria-pressed="true"] {
  background: var(--taupe-dark) !important;
  border-color: var(--taupe-dark) !important;
  color: #ffffff !important;
  font-family: var(--f-bold);
  font-weight: normal;
}

.honorar-rechner .fussnote {
  font-family: var(--f-ui);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 18px;
  line-height: 1.5;
}

/* ── Liste der gespeicherten Ermittlungen ────────────────────── */
.honorar-liste .karte-gruppe {
  margin-bottom: var(--s5);
}

/* In der Ergebniskarte des Rechners teilen sich zwei Knöpfe die Breite;
   hier steht einer allein und soll nicht über die Seite laufen. */
.honorar-liste .aktionen .knopf {
  flex: 0 0 auto;
}

.honorar-liste .gruppen-titel {
  font-family: var(--f-bold);
  font-weight: normal;
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--text);
}

.honorar-liste table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.honorar-liste th,
.honorar-liste td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.honorar-liste th {
  font-family: var(--f-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
}

.honorar-liste td.betrag,
.honorar-liste th.betrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.honorar-liste .zeilen-aktionen {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

/* Eckige Buttons statt nackter Links, aber kompakt - .knopf ist sonst fuer
   breite, gleich verteilte Aktionsleisten gedacht (flex:1, min-width:120px). */
.honorar-liste .zeilen-aktionen .knopf {
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 12px;
  font-size: 12.5px;
}

/* Loeschen nur im Bearbeiten-Modus - Umschalter analog zur Tagesansicht. */
.honorar-liste .zeilen-aktionen .loeschen {
  display: none;
  border-color: var(--neg) !important;
  color: var(--neg) !important;
}

.honorar-liste .zeilen-aktionen .loeschen:hover {
  background: var(--neg) !important;
  color: #ffffff !important;
}

.honorar-liste.is-editing .zeilen-aktionen .loeschen {
  display: inline-block;
}


/* ============================================================
   Nachtrag: Feinheiten aus der Durchsicht am Rechner
   ============================================================ */

/* Das Prozentfeld je Leistungsphase traegt jetzt ein %-Zeichen. Die
   Einheit sitzt im Feld, der Zahlenraum davor wird entsprechend kleiner. */
.honorar-rechner .lph-prozent.mit-einheit .einheit {
  right: 6px;
  font-size: 11.5px;
}

.honorar-rechner .lph-prozent.mit-einheit input {
  padding-right: 20px;
}

/* Die Marken unter dem Schieber tragen nur noch Prozentwerte; die
   Bezeichnung des Satzes steht als Text rechts ueber dem Schieber. */
.honorar-rechner .satz-wert {
  font-family: var(--f-bold);
  font-weight: normal;
  color: var(--taupe-dark);
  white-space: nowrap;
}

/* Einstiegsseite: Hinweistext links, Schaltflaeche rechts */
.honorar-liste .liste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.honorar-liste .liste-hinweis {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.9rem;
}

.honorar-liste .liste-kopf .knopf {
  flex: 0 0 auto;
}

.honorar-liste .liste-kopf-aktionen {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex: 0 0 auto;
}

/* Die beiden Sheets liegen ueber dem Rechner; dieselbe Staffelung wie auf
   der Projektseite, damit das Bauherren-Sheet aus dem Projekt-Sheet heraus
   bedienbar bleibt. */
.honorar-page#bauherr-sheet,
.honorar-page#bauherr-sheet-back {
  z-index: 60;
}