/*
 * ============================================================
 *  infino-rechner-core.css  v1.1
 *  Infino Beratungsportal — Rechner-Stylesheet (Browser)
 *
 *  Einbindung in jedem Rechner-HTML:
 *  <link rel="stylesheet" href="https://infino.de/rechner-assets/infino-rechner-core.css?v=2">
 *  <link rel="stylesheet" href="https://infino.de/rechner-assets/infino-rechner-print.css?v=1">
 *
 *  Architektur:
 *   .ifr-root     → Isolations-Container (kein Styling, nur Reset)
 *   .ifr-app      → Rechner-Box (Rahmen, Padding, Breite)
 *   .ifr-app-sm / -md / -lg → Breitenvarianten
 *
 *  Alle Klassen ausschließlich unter .ifr-root → keine
 *  Kollisionen mit WordPress, Elementor, Astra oder anderen Themes.
 *
 *  CHANGELOG v1.1:
 *   - Sektion 2a: Block-Element-Reset (h1–h6, p, ul, ol, li, a etc.)
 *     vollständig isoliert gegen Astra/Elementor-Vererbung.
 *     Kein rechner-spezifischer Schutz-CSS mehr nötig.
 *
 *  Inhalt:
 *   0  Google Fonts
 *   1  Design Tokens
 *   2  Root-Isolierung & App-Container
 *   2a Block-Element-Reset (NEU v1.1)
 *   3  Titel & Header
 *   4  Layouts (2col, Grid-Helfer)
 *   5  Karten & Sektionen
 *   6  Labels & Eingabefelder
 *   7  Select
 *   8  Slider
 *   9  Buttons
 *  10  Ergebnisboxen
 *  11  Accordion
 *  12  Tabellen
 *  13  Charts
 *  14  Disclaimer & Hinweise
 *  15  Sichtbarkeits-Helfer (no-print / print-only)
 *  16  Responsive (< 640px)
 * ============================================================
 */


/* ─────────────────────────────────────────────────────────────
   0 · GOOGLE FONTS
   Tipp: Font global im WordPress-Theme laden statt hier.
   @import verlangsamt den ersten CSS-Parse-Schritt.
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


/* ─────────────────────────────────────────────────────────────
   1 · DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
  /* Markenfarben */
  --ifr-accent:          #EF5E18;
  --ifr-accent-hover:    #D94F0E;
  --ifr-accent-light:    #FEF0E9;
  --ifr-navy:            #242A34;
  --ifr-navy-label:      #203F5A;

  /* Semantische Farben */
  --ifr-success-bg:      #F0FDF4;
  --ifr-success-brd:     #86EFAC;
  --ifr-success-txt:     #15803D;
  --ifr-success-dark:    #166534;
  --ifr-neutral-bg:      #F1F5F9;
  --ifr-neutral-brd:     #CBD5E1;
  --ifr-danger-bg:       #FFF1F2;
  --ifr-danger-brd:      #FECDD3;
  --ifr-danger-txt:      #BE123C;

  /* UI-Grautöne */
  --ifr-bg-input:        #F9FAFB;
  --ifr-border:          #E5E7EB;
  --ifr-bg-page:         #FFFFFF;
  --ifr-text:            #242A34;
  --ifr-muted:           #64748B;

  /* Typografie */
  --ifr-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Radien */
  --ifr-r-sm:            6px;
  --ifr-r-md:            8px;
  --ifr-r-lg:            10px;
}


/* ─────────────────────────────────────────────────────────────
   2 · ROOT-ISOLIERUNG & APP-CONTAINER
───────────────────────────────────────────────────────────── */

/* Harter box-sizing-Reset für alles innerhalb des Rechners */
.ifr-root,
.ifr-root *,
.ifr-root *::before,
.ifr-root *::after {
  box-sizing: border-box !important;
}

/* Typografische Basis-Isolierung */
.ifr-root {
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--ifr-text) !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Medien skalieren immer korrekt */
.ifr-root img,
.ifr-root svg,
.ifr-root canvas {
  max-width: 100% !important;
  display: block !important;
}

/* App-Box: Rahmen, Padding, Hintergrund */
.ifr-root .ifr-app {
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  color: var(--ifr-text) !important;
  background: var(--ifr-bg-page) !important;
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-md) !important;
  padding: 28px !important;
}

/* Breitenvarianten — per Klasse am .ifr-app setzen */
.ifr-root .ifr-app-sm { max-width: 560px !important;  margin: 0 auto !important; }
.ifr-root .ifr-app-md { max-width: 760px !important;  margin: 0 auto !important; }
.ifr-root .ifr-app-lg { max-width: 1060px !important; margin: 0 auto !important; }


/* ─────────────────────────────────────────────────────────────
   2a · BLOCK-ELEMENT-RESET (v1.1)
   Schützt alle Standard-HTML-Elemente vollständig gegen
   Astra/Elementor-Vererbung. Ab v1.1 ist kein rechner-
   spezifischer Schutz-CSS mehr nötig — dieser Block
   übernimmt die Isolation global für alle Rechner.
───────────────────────────────────────────────────────────── */

/* Überschriften: Astra setzt eigene Größen, Gewichte, Margins */
.ifr-root h1,
.ifr-root h2,
.ifr-root h3,
.ifr-root h4,
.ifr-root h5,
.ifr-root h6 {
  all: unset !important;
  display: block !important;
  font-family: var(--ifr-font) !important;
  color: var(--ifr-text) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: 0 !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Absätze und Listen: Astra setzt margin-bottom, padding, list-style */
.ifr-root p,
.ifr-root ul,
.ifr-root ol,
.ifr-root li,
.ifr-root dl,
.ifr-root dt,
.ifr-root dd {
  all: unset !important;
  display: block !important;
  font-family: var(--ifr-font) !important;
  color: var(--ifr-text) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Links: Astra/Elementor setzen blaue Link-Farben global */
.ifr-root a {
  all: unset !important;
  cursor: pointer !important;
  font-family: var(--ifr-font) !important;
  color: inherit !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* Inline-Elemente: span, strong, em, small */
.ifr-root span,
.ifr-root strong,
.ifr-root b,
.ifr-root em,
.ifr-root i,
.ifr-root small {
  font-family: var(--ifr-font) !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Tabellen: Browser/Astra-Defaults neutralisieren */
.ifr-root table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Formulare: Browser-Defaults die Elementor nicht überschreibt */
.ifr-root input,
.ifr-root select,
.ifr-root textarea,
.ifr-root button {
  font-family: var(--ifr-font) !important;
  box-sizing: border-box !important;
}

/* Horizontale Linie */
.ifr-root hr {
  all: unset !important;
  display: block !important;
  border: none !important;
  border-top: 1px solid var(--ifr-border) !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   3 · TITEL & HEADER
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-header {
  margin-bottom: 24px !important;
}

.ifr-root .ifr-title {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: var(--ifr-navy) !important;
  text-align: center !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.ifr-root .ifr-subtitle {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ifr-muted) !important;
  text-align: center !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   4 · LAYOUTS
───────────────────────────────────────────────────────────── */

/* Zwei-Spalten-Layout */
.ifr-root .ifr-layout-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

.ifr-root .ifr-layout-2col.wide-result {
  grid-template-columns: 2fr 3fr !important;
}

/* Input-Grids (align-items: end → Labels unterschiedlicher Länge) */
.ifr-root .ifr-g2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; align-items: end !important; }
.ifr-root .ifr-g3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; align-items: end !important; }
.ifr-root .ifr-g4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; align-items: end !important; }

/* Feldgruppe */
.ifr-root .ifr-field-group {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   5 · KARTEN & SEKTIONEN
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-card {
  background: var(--ifr-bg-page) !important;
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-md) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.ifr-root .ifr-card:last-child { margin-bottom: 0 !important; }

.ifr-root .ifr-card-title {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  color: var(--ifr-navy-label) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.ifr-root .ifr-section-label {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ifr-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.ifr-root .ifr-divider {
  border: none !important;
  border-top: 1px solid var(--ifr-border) !important;
  margin: 14px 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   6 · LABELS & EINGABEFELDER
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-label {
  all: unset !important;
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--ifr-navy-label) !important;
  margin-bottom: 4px !important;
}

.ifr-root .ifr-field {
  position: relative !important;
}

.ifr-root .ifr-input {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  height: 36px !important;
  line-height: 36px !important;
  background: var(--ifr-bg-input) !important;
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-sm) !important;
  padding: 0 34px 0 10px !important;
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ifr-text) !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield !important;
}

.ifr-root .ifr-input[type="number"]::-webkit-outer-spin-button,
.ifr-root .ifr-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.ifr-root .ifr-input::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

.ifr-root .ifr-input:hover {
  border-color: #CBD5E1 !important;
}

.ifr-root .ifr-input:focus-visible {
  border-color: var(--ifr-accent) !important;
  background: #fff !important;
  outline: 2px solid rgba(239, 94, 24, 0.2) !important;
  outline-offset: 1px !important;
}

.ifr-root .ifr-input:disabled {
  background: #F3F4F6 !important;
  color: #94A3B8 !important;
  cursor: not-allowed !important;
}

/* Einheit-Badge */
.ifr-root .ifr-unit {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--ifr-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ifr-muted) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.ifr-root .ifr-hint {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 11px !important;
  color: var(--ifr-muted) !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}


/* ─────────────────────────────────────────────────────────────
   7 · SELECT
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-select {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  height: 36px !important;
  line-height: 36px !important;
  background: var(--ifr-bg-input) !important;
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-sm) !important;
  padding: 0 28px 0 10px !important;
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ifr-text) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.ifr-root .ifr-select:hover {
  border-color: #CBD5E1 !important;
}

.ifr-root .ifr-select:focus-visible {
  border-color: var(--ifr-accent) !important;
  outline: 2px solid rgba(239, 94, 24, 0.2) !important;
  outline-offset: 1px !important;
}

.ifr-root .ifr-select:disabled {
  background: #F3F4F6 !important;
  color: #94A3B8 !important;
  cursor: not-allowed !important;
}


/* ─────────────────────────────────────────────────────────────
   8 · SLIDER
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-slider-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 8px !important;
  gap: 12px !important;
}

.ifr-root .ifr-slider-label {
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ifr-navy-label) !important;
}

.ifr-root .ifr-slider-value {
  font-family: var(--ifr-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ifr-accent) !important;
  white-space: nowrap !important;
}

.ifr-root .ifr-slider-wrap {
  padding: 4px 0 !important;
  overflow: visible !important;
}

.ifr-root .ifr-slider {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  background: var(--ifr-border) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin-bottom: 10px !important;
}

.ifr-root .ifr-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ifr-border);
}

.ifr-root .ifr-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ifr-border);
}

.ifr-root .ifr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ifr-navy);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--ifr-navy);
  cursor: pointer;
  margin-top: -7px;
}

.ifr-root .ifr-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ifr-navy);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--ifr-navy);
  cursor: pointer;
  border: none;
}

.ifr-root .ifr-slider:focus-visible {
  outline: 2px solid rgba(239, 94, 24, 0.25) !important;
  outline-offset: 3px !important;
}


/* ─────────────────────────────────────────────────────────────
   9 · BUTTONS
   Alle Varianten mit all:unset → vollständig theme-sicher.
───────────────────────────────────────────────────────────── */

/* Basis-Reset */
.ifr-root .ifr-btn,
.ifr-root .ifr-btn-navy,
.ifr-root .ifr-btn-ghost,
.ifr-root .ifr-btn-text,
.ifr-root .ifr-btn-add,
.ifr-root .ifr-toggle-btn {
  all: unset !important;
  cursor: pointer !important;
  font-family: var(--ifr-font) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Orange (Primär) — CTA, volle Breite */
.ifr-root .ifr-btn {
  display: flex !important;
  width: 100% !important;
  height: 46px !important;
  background: var(--ifr-accent) !important;
  color: #fff !important;
  border-radius: var(--ifr-r-sm) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.ifr-root .ifr-btn:hover { background: var(--ifr-accent-hover) !important; }
.ifr-root .ifr-btn:focus-visible {
  outline: 2px solid rgba(239, 94, 24, 0.35) !important;
  outline-offset: 2px !important;
}

/* Navy (Sekundär) — Aktualisieren nach Wertänderung */
.ifr-root .ifr-btn-navy {
  display: flex !important;
  width: 100% !important;
  height: 40px !important;
  background: var(--ifr-navy) !important;
  color: #fff !important;
  border-radius: var(--ifr-r-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.ifr-root .ifr-btn-navy:hover { background: #1A1F28 !important; }

/* Ghost (Outline orange) — Detail-Aktionen */
.ifr-root .ifr-btn-ghost {
  height: 36px !important;
  padding: 0 14px !important;
  background: transparent !important;
  color: var(--ifr-accent) !important;
  border: 1px solid var(--ifr-accent) !important;
  border-radius: var(--ifr-r-sm) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.ifr-root .ifr-btn-ghost:hover { background: var(--ifr-accent-light) !important; }

/* Text-Button — optionale Funktionen, kein Rahmen */
.ifr-root .ifr-btn-text {
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ifr-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
}
.ifr-root .ifr-btn-text:hover {
  color: var(--ifr-navy) !important;
  text-decoration-color: currentColor !important;
}

/* Add-Button — Zeile hinzufügen */
.ifr-root .ifr-btn-add {
  height: 32px !important;
  padding: 0 12px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  border-radius: var(--ifr-r-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.ifr-root .ifr-btn-add:hover { background: #DBEAFE !important; }


/* ─────────────────────────────────────────────────────────────
   Toggle-Gruppe (z.B. Monatlich / Jährlich)
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-toggle-group {
  display: inline-flex !important;
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-sm) !important;
  overflow: hidden !important;
}

.ifr-root .ifr-toggle-btn {
  flex: 1 !important;
  height: 36px !important;
  min-width: 80px !important;
  background: var(--ifr-bg-input) !important;
  color: var(--ifr-muted) !important;
  border: none !important;
  border-right: 1px solid var(--ifr-border) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.ifr-root .ifr-toggle-btn:last-child { border-right: none !important; }
.ifr-root .ifr-toggle-btn:hover { background: #F1F5F9 !important; color: var(--ifr-navy) !important; }
.ifr-root .ifr-toggle-btn.active {
  background: var(--ifr-navy) !important;
  color: #fff !important;
}


/* ─────────────────────────────────────────────────────────────
  10 · ERGEBNISBOXEN
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-box {
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-lg) !important;
  padding: 20px 22px !important;
  background: var(--ifr-bg-page) !important;
}

/* Farb-Varianten */
.ifr-root .ifr-box.success  { background: var(--ifr-success-bg) !important; border-color: var(--ifr-success-brd) !important; }
.ifr-root .ifr-box.neutral  { background: var(--ifr-neutral-bg) !important; border-color: var(--ifr-neutral-brd) !important; }
.ifr-root .ifr-box.danger   { background: var(--ifr-danger-bg) !important;  border-color: var(--ifr-danger-brd) !important; }
.ifr-root .ifr-box.highlight {
  background: var(--ifr-accent-light) !important;
  border-color: #FDBA74 !important;
}

.ifr-root .ifr-box-label {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ifr-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.4 !important;
}

.ifr-root .ifr-result-number {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: var(--ifr-text) !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
}
.ifr-root .ifr-result-number.xl   { font-size: 44px !important; }
.ifr-root .ifr-result-number.lg   { font-size: 26px !important; }
.ifr-root .ifr-result-number.orange  { color: var(--ifr-accent) !important; }
.ifr-root .ifr-result-number.green   { color: var(--ifr-success-dark) !important; }
.ifr-root .ifr-result-number.red     { color: var(--ifr-danger-txt) !important; }

.ifr-root .ifr-result-sub {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--ifr-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Diff-Hinweis (Verbesserung / Warnung) */
.ifr-root .ifr-diff-hint {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ifr-success-txt) !important;
  margin-top: 6px !important;
}
.ifr-root .ifr-diff-warn { color: var(--ifr-danger-txt) !important; }


/* ─────────────────────────────────────────────────────────────
  11 · ACCORDION
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-acc {
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-md) !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}
.ifr-root .ifr-acc:last-child { margin-bottom: 0 !important; }

.ifr-root .ifr-acc-header {
  all: unset !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: var(--ifr-bg-page) !important;
  color: var(--ifr-navy-label) !important;
  font-family: var(--ifr-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.ifr-root .ifr-acc-header:hover { background: var(--ifr-bg-input) !important; }

.ifr-root .ifr-acc-icon {
  flex: 0 0 auto !important;
  color: var(--ifr-accent) !important;
  font-size: 10px !important;
  transition: transform 0.2s ease !important;
}

.ifr-root .ifr-acc-body {
  display: none !important;
  padding: 16px !important;
  border-top: 1px solid var(--ifr-border) !important;
  background: var(--ifr-bg-page) !important;
}

.ifr-root .ifr-acc.open .ifr-acc-icon { transform: rotate(180deg) !important; }
.ifr-root .ifr-acc.open .ifr-acc-body { display: block !important; }


/* ─────────────────────────────────────────────────────────────
  12 · TABELLEN
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-table-wrap {
  overflow-x: auto !important;
  border: 1px solid var(--ifr-border) !important;
  border-radius: var(--ifr-r-md) !important;
}

.ifr-root .ifr-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
  font-family: var(--ifr-font) !important;
  font-size: 12px !important;
}

/* Alle th/td-Defaults neutralisieren */
.ifr-root .ifr-table th,
.ifr-root .ifr-table td {
  border: 0 !important;
  font-family: var(--ifr-font) !important;
  text-align: right !important;
}

.ifr-root .ifr-table thead th {
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ifr-navy-label) !important;
  background: #DBEAFE !important;
  border-bottom: 2px solid #BFDBFE !important;
  white-space: nowrap !important;
}

.ifr-root .ifr-table thead th:first-child,
.ifr-root .ifr-table tbody td:first-child { text-align: left !important; }

.ifr-root .ifr-table tbody tr:nth-child(even) { background: #F8FAFC !important; }
.ifr-root .ifr-table tbody tr:hover { background: var(--ifr-accent-light) !important; }

.ifr-root .ifr-table tbody td {
  padding: 8px 14px !important;
  color: var(--ifr-text) !important;
  border-bottom: 1px solid var(--ifr-border) !important;
}
.ifr-root .ifr-table tbody tr:last-child td { border-bottom: none !important; }

/* Kompakt-Variante */
.ifr-root .ifr-table-sm thead th { padding: 7px 10px !important; font-size: 10px !important; }
.ifr-root .ifr-table-sm tbody td { padding: 5px 10px !important; font-size: 11px !important; }

/* Hilfsklassen */
.ifr-root .ifr-table .ifr-t-bold  { font-weight: 700 !important; }
.ifr-root .ifr-table .ifr-t-hl    { font-weight: 700 !important; color: var(--ifr-accent) !important; }
.ifr-root .ifr-table .ifr-t-green { color: var(--ifr-success-txt) !important; font-weight: 700 !important; }
.ifr-root .ifr-table .ifr-t-red   { color: var(--ifr-danger-txt) !important; font-weight: 700 !important; }


/* ─────────────────────────────────────────────────────────────
  13 · CHARTS
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-chart-wrap {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.ifr-root .ifr-chart-title {
  display: block !important;
  font-family: var(--ifr-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ifr-navy-label) !important;
  margin-bottom: 8px !important;
}

.ifr-root .ifr-chart-canvas {
  display: block !important;
  width: 100% !important;
}


/* ─────────────────────────────────────────────────────────────
  14 · DISCLAIMER & HINWEISE
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-disclaimer {
  margin-top: 20px !important;
  padding: 12px 16px !important;
  border-radius: var(--ifr-r-md) !important;
  background: var(--ifr-bg-input) !important;
  font-family: var(--ifr-font) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  color: var(--ifr-muted) !important;
}

.ifr-root .ifr-box-hint {
  font-size: 11px !important;
  color: var(--ifr-muted) !important;
  line-height: 1.5 !important;
  padding: 8px 12px !important;
  background: var(--ifr-bg-input) !important;
  border-radius: var(--ifr-r-sm) !important;
  margin-top: 8px !important;
}


/* ─────────────────────────────────────────────────────────────
  15 · SICHTBARKEITS-HELFER
  .ifr-no-print    → nur im Browser sichtbar
  .ifr-print-only  → nur im Druck sichtbar (print.css schaltet um)
───────────────────────────────────────────────────────────── */

.ifr-root .ifr-print-only,
.ifr-root .ifr-print-only-flex,
.ifr-root .ifr-print-header,
.ifr-root .ifr-print-footer,
.ifr-root .ifr-print-footer-disclaimer {
  display: none !important;
}
/* !important nötig damit Elementor/Astra-Styles nicht durchschlagen.
   JS darf style.display NIE auf diesen Elementen setzen —
   Sichtbarkeit im Druck regelt ausschließlich print.css. */

/* .ifr-no-print braucht keine Regel hier — es ist im Browser sichtbar */


/* ─────────────────────────────────────────────────────────────
  16 · RESPONSIVE (< 640 px)
───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  .ifr-root .ifr-app {
    padding: 16px !important;
  }

  .ifr-root .ifr-title {
    font-size: 22px !important;
  }

  .ifr-root .ifr-layout-2col,
  .ifr-root .ifr-layout-2col.wide-result,
  .ifr-root .ifr-g2,
  .ifr-root .ifr-g3,
  .ifr-root .ifr-g4 {
    grid-template-columns: 1fr !important;
  }

  .ifr-root .ifr-result-number    { font-size: 28px !important; }
  .ifr-root .ifr-result-number.xl { font-size: 36px !important; }
  .ifr-root .ifr-result-number.lg { font-size: 22px !important; }

  .ifr-root .ifr-btn { height: 48px !important; }

  .ifr-root .ifr-toggle-group { width: 100% !important; }
  .ifr-root .ifr-toggle-btn { flex: 1 !important; }

}