/* =========================================================================
   TaxEagle Honorarrechner — 1:1-Nachbau (self-contained, kein Bootstrap-CDN).
   Farben/Maße entsprechen dem Original-Embed (app.smarteagle.de).
   ========================================================================= */

:root {
  --se-font: 'Open Sans', sans-serif;
  --se-text: #000000;
  --se-btn-bg: #e9d1b1;
  --se-btn-fg: #5c472e;
  --se-highlight: #fbf6ef;
  --bs-border-dashed: #dee2e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--se-font);
  color: var(--se-text);
  font-size: 16px;
  line-height: 1.5;
  background: #ffffff;
}

.honorar-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ---------- Grid (12 Spalten, Breakpoints sm=576, md=768) ---------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}
.row > [class*="col"] { padding-right: 12px; padding-left: 12px; }

.col { flex: 1 0 0%; }
.col-1 { flex: 0 0 auto; width: 8.3333%; }
.col-2 { flex: 0 0 auto; width: 16.6667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.3333%; }
.col-5 { flex: 0 0 auto; width: 41.6667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.3333%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* ---------- Spacing-Utilities (Teilmenge BS5) ---------- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.ms-2 { margin-left: .5rem !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.text-end { text-align: right !important; }
.fw-bold { font-weight: 700 !important; }
.d-none { display: none !important; }
.small { font-size: .875em; }

/* ---------- Headlines ---------- */
.mainheadline {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1.5rem;
}

/* ---------- Card / Menü ---------- */
.card {
  background-color: var(--se-highlight);
  border: 1px solid rgba(0, 0, 0, .176);
  border-radius: .25rem;
}
.card-body { padding: .5rem; }
.nav { display: flex; padding-left: 0; margin-bottom: 0; list-style: none; }
.flex-column { flex-direction: column; }
.nav-item { display: block; }
.nav-link {
  display: block;
  color: #000000;
  font-weight: 700;
  font-size: .85rem;
  padding: .5rem 1rem 0;
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover { text-decoration: underline; }
.nav-link.active { font-weight: 700; }
.SE-menu .card { font-size: .85rem; }

/* ---------- Formularelemente ---------- */
.form-select, .form-control {
  display: block;
  width: 100%;
  font-family: var(--se-font);
  color: #000;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  appearance: auto;
}
.form-select-sm, .form-control-sm { font-size: .875rem; padding: .25rem .5rem; }
.form-select {
  padding: .25rem 2rem .25rem .5rem;
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  outline: 0;
  border-color: #86b7fe;
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}
.border-dashed {
  --bs-border-width: 0.13rem;
  border-style: dashed !important;
  border-width: 0.13rem !important;
  border-color: var(--bs-border-dashed) !important;
  background: transparent !important;
}

.input-group { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text {
  display: flex;
  align-items: center;
  padding: .25rem .5rem;
  font-size: .875rem;
  color: #212529;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-left: 0;
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.form-check { display: flex; align-items: center; }
.form-check-input {
  width: 1.1em; height: 1.1em; margin-right: .4em;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: .25em;
  vertical-align: top;
  appearance: auto;
}
.form-check-label { user-select: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  border: 1px solid transparent;
}
.btn.border { border: 1px solid rgba(0, 0, 0, .15) !important; }
.btn-color-fe {
  background-color: var(--se-btn-bg) !important;
  color: var(--se-btn-fg) !important;
}
.btn-color-fe:hover { filter: brightness(.97); }

/* ===================== Honorarrechner-Tabelle ===================== */
.honorarrechner-felder .table-row,
.sonderleistungen-table .table-row {
  border-bottom: .01em solid rgba(0, 0, 0, .1);
}
.honorarrechner-felder .table-row:last-child,
.sonderleistungen-table .table-row:last-child {
  border-bottom: 4px double rgba(0, 0, 0, .4);
}
.honorarrechner-felder .table-row.noBorder,
.sonderleistungen-table .table-row.noBorder { border-bottom: 0; }

/* Zebra */
.honorarrechner-felder .table-row.odd,
.sonderleistungen-table .table-row.odd {
  background-color: rgba(251, 246, 239, .15);
}

/* Spaltentext */
.honorarrechner-felder .text,
.sonderleistungen-table .text { font-size: 1rem; font-weight: 400; }
.honorarrechner-felder .fee,
.sonderleistungen-table .fee { text-align: right; font-size: 1rem; white-space: nowrap; }

.honorarrechner-felder .table-row .subtext,
.sonderleistungen-table .table-row .subtext { display: inline-block; font-style: italic; }
.honorarrechner-felder .table-row .subtext small,
.sonderleistungen-table .table-row .subtext small { font-weight: inherit; font-size: .875em; }

/* Stil-Varianten */
.honorarrechner-felder .table-row.feld-headline,
.sonderleistungen-table .table-row.feld-headline {
  background-color: var(--se-highlight);
  font-size: 1.3em;
  font-weight: 700;
}
.honorarrechner-felder .table-row.feld-headline .text,
.sonderleistungen-table .table-row.feld-headline .text {
  background: transparent;
  font-size: 1.4rem !important;
  font-weight: 700;
}
.honorarrechner-felder .table-row.feld-headline .text *,
.sonderleistungen-table .table-row.feld-headline .text * { margin-bottom: 0; }

.honorarrechner-felder .table-row.feld-subheadline,
.sonderleistungen-table .table-row.feld-subheadline { font-size: 1.1em !important; font-weight: 700; }
.honorarrechner-felder .table-row.feld-bold,
.sonderleistungen-table .table-row.feld-bold { font-weight: 700; }
.honorarrechner-felder .table-row.feld-italics,
.sonderleistungen-table .table-row.feld-italics { font-style: italic; }
.honorarrechner-felder .table-row.feld-indent .text,
.sonderleistungen-table .table-row.feld-indent .text { padding-left: 35px !important; }
.honorarrechner-felder .table-row.feld-hiddenPrice .fee,
.honorarrechner-felder .table-row.feld-indent.hiddenPrice .fee,
.sonderleistungen-table .table-row.feld-hiddenPrice .fee { display: none; }

/* Markdown/HTML-Inhalte */
.SE-Markdown { font-family: var(--se-font); color: #000; font-size: 1rem; }
.SE-Markdown p:last-child { margin-bottom: 0; }
.SE-Markdown a { color: #000; }
.fussnoten { font-size: .9rem; color: #333; }
.footer-text p { margin: .4rem 0; }

/* numberinput-Wrapper */
.numberinputWrap-asEuroValue, .numberinputWrap-unformatiert { width: 100%; }
.numberinputWrap-asEuroValue input, .numberinputWrap-unformatiert input { text-align: right; }

/* ---------- Sonderleistungen-Preisliste ---------- */
.sonderleistungen-table h4.header {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  padding-top: 1.5rem !important;
  padding-bottom: .5rem !important;
}
.sonderleistungen-table h4.header:empty { padding-top: .25rem !important; }
.sonderleistungen-table .table-row.row > .col { font-size: 1rem; }
.sonderleistungen-table .table-row .text-end { white-space: normal; }

/* ---------- Persönliche Daten (Formular) ---------- */
#personalDataPrint h2,
.sonderleistungen-table + * h2,
.honorarrechnerWrapper h2 { font-size: 1.6rem; font-weight: 500; margin: 1.5rem 0 1rem; }
.form-floating { position: relative; }
.form-floating > .form-control { height: calc(3.5rem + 2px); padding: 1rem .75rem; }
.form-floating > .form-control::placeholder { color: transparent; }
.form-floating > label {
  position: absolute; top: 0; left: 0; height: 100%;
  padding: 1rem .75rem; pointer-events: none;
  transform-origin: 0 0; transition: opacity .1s ease-in-out, transform .1s ease-in-out;
  color: #6c757d;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: .65; transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding-top: 1.625rem; padding-bottom: .625rem;
}
.form-floating > .form-select ~ label {
  opacity: .65; transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.form-floating.color-fe > .form-select {
  background-color: var(--se-btn-bg) !important;
  color: var(--se-btn-fg) !important;
}
.variant-select { max-width: 480px; }

/* ---------- App-Footer ---------- */
#app-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.1); }
.standorte .SE-Markdown p { margin: .15rem 0; }

/* ---------- Druck ---------- */
@media print {
  .SE-menu, .btn, #app-header-note { display: none !important; }
  .col-md-9 { width: 100% !important; }
  body { font-size: 12px; }
}