/* =========================================================================
   Steuerrechner: Eingaben links, Ergebnis rechts, darunter der Rechenweg.
   Farben, Felder und Knoepfe folgen dem Fragebogen der Potenzialanalyse.
   Tiefe ueber feine Rahmen, keine Versalien, keine Flaechen hinter Symbolen.
   ========================================================================= */

/* 1176 px: dieselbe Inhaltsbreite wie der Header (1240 px minus 2 x 32 px Innenabstand) */
.rn-mount {
  max-width: 1176px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 28px; align-items: start;
}
.rn-karte {
  background: #FFFFFF; border: 1px solid #E9EDF3; border-radius: 8px;
  padding: 30px 30px 28px; min-width: 0;
}
.rn-nojs { grid-column: 1 / -1; font-size: 16.2px; line-height: 1.75; font-weight: 300; color: #0B2350; }
.rn-nojs a { color: #12A7BC; }

/* --- Eingaben ----------------------------------------------------------- */
.rn-titel { margin: 0 0 4px; font-size: clamp(21px, calc(18.6px + .62vw), 26px); line-height: 1.3; font-weight: 400; color: #0B2350; }
.rn-unter { margin: 0 0 22px; font-size: 14.6px; line-height: 1.7; font-weight: 300; color: #6E7EB8; }
.rn-gruppe { display: flex; flex-direction: column; gap: 16px; }
.rn-gruppe[hidden] { display: none; }
.rn-gruppe + .rn-gruppe { margin-top: 24px; padding-top: 22px; border-top: 1px solid #E9EDF3; }
.rn-gruppe > h3 { margin: 0; font-size: 16.6px; font-weight: 500; color: #0B2350; }
.rn-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.rn-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rn-feld.is-wide { grid-column: 1 / -1; }
.rn-feld[hidden] { display: none; }
.rn-feld > label, .rn-feld > .rn-label { font-size: 13.9px; font-weight: 400; color: #0B2350; line-height: 1.4; }
.rn-hilfe { font-size: 12.9px; line-height: 1.6; font-weight: 300; color: #6E7EB8; }
.rn-eingabe { position: relative; display: flex; align-items: center; }
.rn-eingabe input, .rn-feld select {
  font-family: inherit; font-size: 16.2px; font-weight: 300; color: #0B2350;
  background: #FFFFFF; border: 1px solid #E4E9F2; border-radius: 8px;
  padding: 12px 15px; width: 100%; min-width: 0;
  transition: border-color .16s ease;
  -moz-appearance: textfield;
}
.rn-eingabe input::-webkit-outer-spin-button,
.rn-eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rn-eingabe.has-einheit input { padding-right: 44px; }
.rn-einheit {
  position: absolute; right: 14px; pointer-events: none;
  font-size: 14.6px; font-weight: 300; color: #6E7EB8;
}
.rn-eingabe input:focus, .rn-feld select:focus { outline: none; border-color: #35D2E0; }
.rn-feld.has-error input { border-color: #D5566B; }
.rn-fehler { font-size: 12.8px; line-height: 1.5; font-weight: 300; color: #D5566B; }

/* Auswahl als Knopfreihe, z. B. Rechtsform oder Steuerklasse */
.rn-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-wahl button {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px; border-radius: 8px;
  background: #FFFFFF; border: 1px solid #E4E9F2;
  font-family: inherit; font-size: 14.8px; font-weight: 300; color: #0B2350;
  cursor: pointer; transition: border-color .16s ease, background .16s ease;
}
.rn-wahl button:hover { border-color: #35D2E0; }
.rn-wahl button.is-on { border-color: #35D2E0; background: #F2FCFD; font-weight: 400; }

/* Schalter ja/nein */
.rn-schalter { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.rn-schalter input { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 2px; accent-color: #12A7BC; }
.rn-schalter span { font-size: 14.6px; line-height: 1.6; font-weight: 300; color: #0B2350; }

/* Gemeindesuche */
.rn-suche { position: relative; }
.rn-treffer {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: #FFFFFF; border: 1px solid #E4E9F2; border-radius: 8px;
  max-height: 290px; overflow-y: auto;
  box-shadow: 0 14px 34px rgba(8, 25, 59, .12);
}
.rn-treffer li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 6px; cursor: pointer;
  font-size: 14.8px; font-weight: 300; color: #0B2350;
}
.rn-treffer li small { color: #6E7EB8; font-size: 12.9px; white-space: nowrap; }
.rn-treffer li:hover, .rn-treffer li.is-aktiv { background: #F2FCFD; }
.rn-treffer li.is-leer { cursor: default; color: #6E7EB8; }
.rn-gewaehlt { font-size: 13.2px; line-height: 1.6; font-weight: 300; color: #12A7BC; }

/* --- Ergebnis ----------------------------------------------------------- */
.rn-form { position: sticky; top: 104px; }
.rn-ergebnis { padding: 0; overflow: hidden; position: sticky; top: 104px; }
.rn-kopf {
  background: linear-gradient(120deg, #0B2350 0%, #0E2A5E 100%);
  padding: 26px 30px 24px; display: flex; flex-direction: column; gap: 6px;
}
.rn-kopf-label { font-size: 14.6px; font-weight: 300; color: #B9C8E4; }
.rn-kopf-wert { font-size: clamp(32px, calc(26px + 1.6vw), 44px); line-height: 1.15; font-weight: 400; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.rn-kopf-zusatz { font-size: 14.2px; line-height: 1.6; font-weight: 300; color: #35D2E0; }
.rn-koerper { padding: 22px 30px 26px; display: flex; flex-direction: column; gap: 18px; }

.rn-zeilen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.rn-zeilen li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid #E9EDF3;
  font-size: 15px; line-height: 1.5; font-weight: 300; color: #0B2350;
}
.rn-zeilen li:last-child { border-bottom: 0; }
.rn-zeilen li b { font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rn-zeilen li.is-minus b { color: #6E7EB8; }
.rn-zeilen li.is-summe { border-top: 1px solid #0B2350; border-bottom: 0; margin-top: 2px; font-weight: 400; }
.rn-zeilen li.is-summe b { font-weight: 500; }
.rn-zeilen li.is-hervor { color: #12A7BC; }
.rn-zeilen li.is-hervor b { color: #12A7BC; font-weight: 500; }
.rn-zeilen li .rn-zusatz { display: block; font-size: 12.6px; color: #6E7EB8; }

/* Vergleich mit Balken, z. B. GmbH gegen Einzelunternehmen */
.rn-vergleich { display: flex; flex-direction: column; gap: 14px; }
.rn-balken { display: flex; flex-direction: column; gap: 6px; }
.rn-balken-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 14.6px; font-weight: 300; color: #0B2350; }
.rn-balken-kopf b { font-weight: 500; font-variant-numeric: tabular-nums; }
.rn-balken-spur { height: 10px; background: #EEF1F6; border-radius: 99px; overflow: hidden; }
.rn-balken-spur > i { display: block; height: 100%; border-radius: 99px; background: #9FB3D8; transition: width .3s cubic-bezier(.4, 0, .2, 1); }
.rn-balken.is-besser .rn-balken-spur > i { background: linear-gradient(90deg, #35D2E0, #12A7BC); }

.rn-fazit {
  background: #F2FCFD; border-radius: 8px; padding: 14px 16px;
  font-size: 14.6px; line-height: 1.7; font-weight: 300; color: #0B2350;
}
.rn-fazit b { font-weight: 500; }
.rn-warnung {
  background: #FFF6F0; border-radius: 8px; padding: 12px 16px;
  font-size: 13.8px; line-height: 1.65; font-weight: 300; color: #7A3E12;
}

/* Rechenweg */
.rn-weg { border-top: 1px solid #E9EDF3; padding-top: 6px; }
.rn-weg > summary {
  list-style: none; cursor: pointer; padding: 10px 0;
  font-size: 14.6px; font-weight: 400; color: #12A7BC;
}
.rn-weg > summary::-webkit-details-marker { display: none; }
.rn-weg > summary::after { content: " +"; }
.rn-weg[open] > summary::after { content: " −"; }
.rn-weg ol { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.rn-weg li { font-size: 13.8px; line-height: 1.65; font-weight: 300; color: #0B2350; }
.rn-weg li span { color: #6E7EB8; }

.rn-stand { font-size: 12.6px; line-height: 1.6; font-weight: 300; color: #6E7EB8; }
.rn-cta { display: flex; margin-top: 4px; }
.rn-cta > a { width: 100%; justify-content: center; }

/* --- Uebersicht und „Weitere Steuerrechner“ ---------------------------- */
.rn-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rn-kachel {
  display: flex; flex-direction: column; gap: 10px;
  background: #FFFFFF; border: 1px solid #E9EDF3; border-radius: 8px;
  padding: 28px 26px 24px; text-decoration: none;
  transition: border-color .16s ease;
}
.rn-kachel:hover { border-color: #35D2E0; }
.rn-kachel-icon { margin-bottom: 6px; }
.rn-kachel-name { font-size: clamp(18.6px, calc(17.6px + .26vw), 20.6px); line-height: 1.35; font-weight: 400; color: #0B2350; }
.rn-kachel-text { font-size: 15px; line-height: 1.7; font-weight: 300; color: #6E7EB8; flex: 1 1 auto; }
.rn-kachel-mehr { margin-top: 6px; font-size: 14.6px; font-weight: 400; color: #12A7BC; }

/* --- Responsiv ---------------------------------------------------------- */
@media (max-width: 980px) {
  .rn-mount { grid-template-columns: 1fr; }
  .rn-form, .rn-ergebnis { position: static; }
  .rn-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .rn-karte { padding: 22px 18px 20px; }
  .rn-kopf { padding: 22px 18px 20px; }
  .rn-koerper { padding: 18px 18px 22px; }
  .rn-felder { grid-template-columns: 1fr; }
  .rn-liste { grid-template-columns: 1fr; }
  .rn-zeilen li { font-size: 14.6px; }
}

/* Inhaltsverzeichnis-Knopf (mobil) erst zeigen, wenn der Textteil erreicht ist,
   damit er die Eingabefelder des Rechners nicht verdeckt. */
.toc-fab { transition: opacity .2s ease; }
html:not(.rn-toc-an):has(#rn-mount) .toc-fab { opacity: 0; pointer-events: none; }