/**
 * Einkommensteuer-Rechner - Multi-Step Funnel Styling
 * Vollstaendiges CSS fuer den ESt-Rechner
 *
 * @package Denkmalschutz
 */

/* CLAUDE: ===================================
   1. CSS-Variablen (Theme-Farbpalette)
   =================================== */

:root {
  /* CLAUDE: Primaerfarben aus Theme (identisch mit DAR) */
  --est-primary: #00274D;
  --est-primary-light: #003D73;
  --est-primary-dark: #001933;

  /* CLAUDE: Akzentfarben */
  --est-accent: #B8944D;
  --est-accent-light: #D4B579;
  --est-accent-dark: #9A7A3D;

  /* CLAUDE: Graustufen */
  --est-gray-50: #F9FAFB;
  --est-gray-100: #F3F4F6;
  --est-gray-200: #E5E7EB;
  --est-gray-300: #D1D5DB;
  --est-gray-400: #9CA3AF;
  --est-gray-500: #6B7280;
  --est-gray-600: #4B5563;
  --est-gray-700: #374151;
  --est-gray-800: #1F2937;
  --est-gray-900: #111827;

  /* CLAUDE: Status-Farben */
  --est-success: #10B981;
  --est-error: #EF4444;
  --est-warning: #F59E0B;

  /* CLAUDE: Abstaende */
  --est-spacing-xs: 0.5rem;
  --est-spacing-sm: 0.75rem;
  --est-spacing-md: 1rem;
  --est-spacing-lg: 1.5rem;
  --est-spacing-xl: 2rem;
  --est-spacing-2xl: 3rem;

  /* CLAUDE: Schriftgroessen */
  --est-text-xs: 0.75rem;
  --est-text-sm: 0.875rem;
  --est-text-base: 1rem;
  --est-text-lg: 1.125rem;
  --est-text-xl: 1.25rem;
  --est-text-2xl: 1.5rem;
  --est-text-3xl: 1.875rem;

  /* CLAUDE: Border-Radius */
  --est-radius-sm: 0.25rem;
  --est-radius-md: 0.5rem;
  --est-radius-lg: 0.75rem;
  --est-radius-xl: 1rem;

  /* CLAUDE: Schatten */
  --est-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --est-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --est-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* CLAUDE: Transition */
  --est-transition: 300ms ease-in-out;
}

/* CLAUDE: ===================================
   2. Container & Layout
   =================================== */

/* CLAUDE: Hauptcontainer – zentriert, max-width fuer optimale Lesbarkeit */
.est-rechner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--est-spacing-xl) var(--est-spacing-md);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--est-gray-800);
  line-height: 1.6;
}

/* CLAUDE: Formular-Reset */
.est-form {
  position: relative;
}

/* CLAUDE: ===================================
   3. Progress Bar
   =================================== */

/* CLAUDE: Progress-Container mit Dots und Fortschrittsbalken */
.est-progress {
  margin-bottom: var(--est-spacing-2xl);
}

/* CLAUDE: Fortschrittsbalken-Hintergrund */
.est-progress__bar {
  height: 4px;
  background: var(--est-gray-200);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--est-spacing-md);
}

/* CLAUDE: Aktiver Fortschritt (Breite wird per JS gesetzt) */
.est-progress__fill {
  height: 100%;
  background: var(--est-accent);
  border-radius: 2px;
  transition: width var(--est-transition);
}

/* CLAUDE: Step-Dots unter dem Balken */
.est-progress__steps {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--est-spacing-xs);
}

/* CLAUDE: Einzelner Step-Dot */
.est-progress__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--est-gray-200);
  color: var(--est-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--est-text-sm);
  font-weight: 600;
  transition: all var(--est-transition);
}

/* CLAUDE: Aktiver Step-Dot */
.est-progress__dot.active {
  background: var(--est-primary);
  color: #fff;
}

/* CLAUDE: Abgeschlossener Step-Dot */
.est-progress__dot.completed {
  background: var(--est-accent);
  color: #fff;
}

/* CLAUDE: ===================================
   4. Step Transitions
   =================================== */

/* CLAUDE: Versteckter Step (Standard-Zustand) */
.est-step {
  display: none;
  animation: estFadeIn 0.3s ease-out;
}

/* CLAUDE: Aktiver Step wird angezeigt */
.est-step.active {
  display: block;
}

/* CLAUDE: Fade-In Animation fuer Step-Wechsel */
@keyframes estFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CLAUDE: Step-Content mit zentriertem Layout */
.est-step__content {
  text-align: center;
  padding: var(--est-spacing-lg) 0;
}

/* CLAUDE: Step-Titel (Fragetext) */
.est-step__title {
  font-size: var(--est-text-2xl);
  font-weight: 700;
  color: var(--est-primary);
  margin: 0 0 var(--est-spacing-xs) 0;
}

/* CLAUDE: Step-Untertitel (Hilfetext) */
.est-step__subtitle {
  font-size: var(--est-text-base);
  color: var(--est-gray-500);
  margin: 0 0 var(--est-spacing-xl) 0;
}

/* CLAUDE: ===================================
   5. Input Fields
   =================================== */

/* CLAUDE: Input-Gruppe (Wrapper fuer Input + Suffix) */
.est-input-group {
  max-width: 400px;
  margin: 0 auto var(--est-spacing-xl);
}

/* CLAUDE: Input-Wrapper – Flex-Container fuer Input-Feld + Toggle */
.est-input-wrapper {
  display: flex;
  align-items: center;
}

/* CLAUDE: Input-Feld-Container – position:relative damit Suffix sich am Input orientiert, nicht am Wrapper */
.est-input-field {
  position: relative;
  flex: 1;
}

/* CLAUDE: Grosses Eingabefeld fuer Bruttogehalt */
.est-input--large {
  width: 100%;
  padding: var(--est-spacing-md) var(--est-spacing-lg);
  padding-right: 100px;
  font-size: var(--est-text-2xl);
  font-weight: 600;
  text-align: center;
  border: 2px solid var(--est-gray-300);
  border-radius: var(--est-radius-lg);
  color: var(--est-gray-800);
  background: #fff;
  transition: border-color var(--est-transition);
  outline: none;
}

/* CLAUDE: Focus-State fuer Input */
.est-input--large:focus {
  border-color: var(--est-primary);
  box-shadow: 0 0 0 3px rgba(0, 39, 77, 0.1);
}

/* CLAUDE: EUR-Suffix rechts im Input – vertikal zentriert */
.est-input__suffix {
  position: absolute;
  right: var(--est-spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--est-gray-400);
  font-size: var(--est-text-lg);
  font-weight: 500;
  pointer-events: none;
}

/* CLAUDE: Hinweistext unter dem Input */
.est-input__hint {
  font-size: var(--est-text-sm);
  color: var(--est-gray-400);
  margin-top: var(--est-spacing-xs);
}

/* CLAUDE: ===================================
   6. Selection Cards
   =================================== */

/* CLAUDE: Card-Grid-Container */
.est-cards {
  display: grid;
  gap: var(--est-spacing-md);
  margin-bottom: var(--est-spacing-xl);
}

/* CLAUDE: 3-Spalten-Grid fuer Cards */
.est-cards--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* CLAUDE: Einzelne klickbare Card */
.est-card--selectable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--est-spacing-lg) var(--est-spacing-md);
  background: #fff;
  border: 2px solid var(--est-gray-200);
  border-radius: var(--est-radius-lg);
  cursor: pointer;
  transition: all var(--est-transition);
  text-align: center;
  min-height: 100px;
  font-family: inherit;
  position: relative;
}

/* CLAUDE: Hover-Effekt fuer Cards */
.est-card--selectable:hover {
  border-color: var(--est-primary-light);
  box-shadow: var(--est-shadow-md);
  transform: translateY(-2px);
}

/* CLAUDE: Ausgewaehlte Card (visuelles Feedback) */
.est-card--selectable.selected {
  border-color: var(--est-primary);
  background: var(--est-gray-50);
  box-shadow: 0 0 0 3px rgba(0, 39, 77, 0.15);
}

/* CLAUDE: Empfohlene Card (z.B. aktuelles Steuerjahr) */
.est-card--recommended {
  border-color: var(--est-accent);
}

/* CLAUDE: Card-Nummer (grosse Ziffer/Label) */
.est-card__number {
  font-size: var(--est-text-xl);
  font-weight: 700;
  color: var(--est-primary);
  display: block;
  margin-bottom: var(--est-spacing-xs);
}

/* CLAUDE: Card-Beschreibung */
.est-card__desc {
  font-size: var(--est-text-sm);
  color: var(--est-gray-500);
  line-height: 1.4;
}

/* CLAUDE: Badge auf Cards (z.B. "Aktuell") */
.est-card__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--est-accent);
  color: #fff;
  font-size: var(--est-text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* CLAUDE: ===================================
   7. Buttons
   =================================== */

/* CLAUDE: Basis-Button-Styles */
.est-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--est-spacing-xs);
  padding: var(--est-spacing-sm) var(--est-spacing-xl);
  font-size: var(--est-text-base);
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--est-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--est-transition);
  text-decoration: none;
  line-height: 1.5;
}

/* CLAUDE: Primaer-Button (Navy mit weissem Text) */
.est-btn--primary {
  background: var(--est-primary);
  color: #fff;
  border-color: var(--est-primary);
}

/* CLAUDE: Primaer-Button Hover */
.est-btn--primary:hover {
  background: var(--est-primary-light);
  border-color: var(--est-primary-light);
}

/* CLAUDE: Outline-Button (weiss mit Rahmen) */
.est-btn--outline {
  background: #fff;
  color: var(--est-primary);
  border-color: var(--est-gray-300);
}

/* CLAUDE: Outline-Button Hover */
.est-btn--outline:hover {
  border-color: var(--est-primary);
  background: var(--est-gray-50);
}

/* CLAUDE: Text-Button (kein Hintergrund) */
.est-btn--text {
  background: none;
  border: none;
  color: var(--est-gray-500);
  padding: var(--est-spacing-xs);
}

/* CLAUDE: Text-Button Hover */
.est-btn--text:hover {
  color: var(--est-primary);
}

/* CLAUDE: CTA-Buttons (groesser fuer Ergebnis-Screen) */
.est-btn--cta {
  padding: var(--est-spacing-md) var(--est-spacing-2xl);
  font-size: var(--est-text-lg);
}

/* CLAUDE: Button Loading-State */
.est-btn--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* CLAUDE: Pfeil-Icon im Button */
.est-btn__arrow {
  font-size: var(--est-text-lg);
}

/* CLAUDE: Step-Actions (Button-Container) */
.est-step__actions {
  display: flex;
  justify-content: center;
  gap: var(--est-spacing-md);
  margin-top: var(--est-spacing-xl);
}

/* CLAUDE: Zentrierte Actions (fuer Step 5 mit 2 Buttons) */
.est-step__actions--center {
  justify-content: center;
}

/* CLAUDE: ===================================
   8. Alert Messages
   =================================== */

/* CLAUDE: Fehler-Alert-Box */
.est-alert {
  padding: var(--est-spacing-md) var(--est-spacing-lg);
  border-radius: var(--est-radius-md);
  margin-bottom: var(--est-spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--est-spacing-sm);
}

/* CLAUDE: Error-Alert (rot) */
.est-alert--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--est-error);
}

/* CLAUDE: Alert-Icon */
.est-alert__icon {
  font-weight: 700;
  font-size: var(--est-text-lg);
  flex-shrink: 0;
}

/* CLAUDE: ===================================
   9. Summary Table (Step 5)
   =================================== */

/* CLAUDE: Zusammenfassungs-Box */
.est-summary {
  max-width: 500px;
  margin: 0 auto var(--est-spacing-xl);
  background: var(--est-gray-50);
  border-radius: var(--est-radius-lg);
  padding: var(--est-spacing-lg);
  text-align: left;
}

/* CLAUDE: Einzelne Zeile in der Zusammenfassung */
.est-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--est-spacing-sm) 0;
  border-bottom: 1px solid var(--est-gray-200);
}

/* CLAUDE: Letzte Zeile ohne Rahmen */
.est-summary__row:last-child {
  border-bottom: none;
}

/* CLAUDE: Label (links) */
.est-summary__label {
  color: var(--est-gray-600);
  font-size: var(--est-text-sm);
}

/* CLAUDE: Wert (rechts, fett) */
.est-summary__value {
  font-weight: 600;
  color: var(--est-gray-800);
}

/* CLAUDE: ===================================
   10. Result Screen
   =================================== */

/* CLAUDE: Ergebnis-Container */
.est-result {
  animation: estFadeIn 0.4s ease-out;
}

/* CLAUDE: Ergebnis-Titel */
.est-result__title {
  font-size: var(--est-text-2xl);
  font-weight: 700;
  color: var(--est-primary);
  text-align: center;
  margin: 0 0 var(--est-spacing-xl) 0;
}

/* CLAUDE: ===================================
   11. Denkmal Teaser (Sparpotenzial)
   =================================== */

/* CLAUDE: Teaser-Box mit goldenem Rahmen */
.est-denkmal-teaser {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid var(--est-accent);
  border-radius: var(--est-radius-xl);
  padding: var(--est-spacing-xl);
  text-align: center;
  margin-bottom: var(--est-spacing-xl);
}

/* CLAUDE: Haus-Icon */
.est-denkmal-teaser__icon {
  font-size: 2.5rem;
  margin-bottom: var(--est-spacing-sm);
}

/* CLAUDE: Teaser-Titel */
.est-denkmal-teaser__title {
  font-size: var(--est-text-xl);
  font-weight: 700;
  color: var(--est-primary);
  margin: 0 0 var(--est-spacing-sm) 0;
}

/* CLAUDE: Teaser-Text */
.est-denkmal-teaser__text {
  font-size: var(--est-text-base);
  color: var(--est-gray-600);
  margin: 0 0 var(--est-spacing-lg) 0;
}

/* CLAUDE: KPI-Zahlen im Teaser (nebeneinander) */
.est-denkmal-teaser__numbers {
  display: flex;
  justify-content: center;
  gap: var(--est-spacing-2xl);
}

/* CLAUDE: Einzelne KPI im Teaser */
.est-denkmal-teaser__kpi {
  text-align: center;
}

/* CLAUDE: KPI-Wert (grosser Betrag) */
.est-denkmal-teaser__kpi-value {
  display: block;
  font-size: var(--est-text-2xl);
  font-weight: 700;
  color: var(--est-primary);
}

/* CLAUDE: Hervorgehobener KPI-Wert (goldene Farbe) */
.est-denkmal-teaser__kpi-value--highlight {
  color: var(--est-accent-dark);
}

/* CLAUDE: KPI-Label (kleiner Text unter dem Wert) */
.est-denkmal-teaser__kpi-label {
  display: block;
  font-size: var(--est-text-sm);
  color: var(--est-gray-500);
  margin-top: var(--est-spacing-xs);
}

/* CLAUDE: ===================================
   12. Object Cards (Passende Objekte)
   =================================== */

/* CLAUDE: Objekte-Bereich */
.est-objekte {
  margin-bottom: var(--est-spacing-xl);
}

/* CLAUDE: Objekte-Titel */
.est-objekte__title {
  font-size: var(--est-text-xl);
  font-weight: 700;
  color: var(--est-primary);
  text-align: center;
  margin: 0 0 var(--est-spacing-lg) 0;
}

/* CLAUDE: 3-Spalten-Grid fuer Objekte */
.est-objekte__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--est-spacing-md);
}

/* CLAUDE: Einzelne Objekt-Card */
.est-objekt-card {
  background: #fff;
  border: 1px solid var(--est-gray-200);
  border-radius: var(--est-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--est-transition);
  text-decoration: none;
  color: inherit;
  display: block;
}

/* CLAUDE: Objekt-Card Hover */
.est-objekt-card:hover {
  box-shadow: var(--est-shadow-lg);
}

/* CLAUDE: Objekt-Bild */
.est-objekt-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* CLAUDE: Platzhalter wenn kein Bild vorhanden */
.est-objekt-card__image-placeholder {
  width: 100%;
  height: 180px;
  background: var(--est-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--est-gray-400);
  font-size: var(--est-text-2xl);
}

/* CLAUDE: Objekt-Card Body */
.est-objekt-card__body {
  padding: var(--est-spacing-md);
}

/* CLAUDE: Objekt-Titel */
.est-objekt-card__title {
  font-size: var(--est-text-base);
  font-weight: 600;
  color: var(--est-gray-800);
  margin: 0 0 var(--est-spacing-xs) 0;
  line-height: 1.3;
}

/* CLAUDE: Objekt-Standort */
.est-objekt-card__location {
  font-size: var(--est-text-sm);
  color: var(--est-gray-500);
  margin: 0 0 var(--est-spacing-xs) 0;
}

/* CLAUDE: Objekt-Preis */
.est-objekt-card__price {
  font-size: var(--est-text-lg);
  font-weight: 700;
  color: var(--est-accent-dark);
}

/* CLAUDE: Objekt-Excerpt */
.est-objekt-card__excerpt {
  font-size: var(--est-text-sm);
  color: var(--est-gray-500);
  margin-top: var(--est-spacing-xs);
  line-height: 1.4;
}

/* CLAUDE: ===================================
   13. CTA Section
   =================================== */

/* CLAUDE: CTA-Bereich (2 Buttons nebeneinander) */
.est-cta {
  display: flex;
  justify-content: center;
  gap: var(--est-spacing-md);
  margin-bottom: var(--est-spacing-xl);
  flex-wrap: wrap;
}

/* CLAUDE: Restart-Link */
.est-result__restart {
  text-align: center;
  margin-bottom: var(--est-spacing-lg);
}

/* CLAUDE: Disclaimer-Text */
.est-disclaimer {
  font-size: var(--est-text-xs);
  color: var(--est-gray-400);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* CLAUDE: ============================================ */
/* CLAUDE: Monat/Jahr Toggle-Buttons                    */
/* CLAUDE: ============================================ */

/* CLAUDE: Toggle-Container – inline neben Input-Suffix */
.est-toggle {
  display: flex;
  gap: 0;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

/* CLAUDE: Einzelner Toggle-Button */
.est-toggle__btn {
  padding: 8px 16px;
  border: none;
  background: #F9FAFB;
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

/* CLAUDE: Aktiver Toggle-Button */
.est-toggle__btn.active {
  background: #00274D;
  color: #fff;
}

/* CLAUDE: ============================================ */
/* CLAUDE: Kinder-Stepper                               */
/* CLAUDE: ============================================ */

/* CLAUDE: Container fuer Kinder-Eingabe */
.est-kinder-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 20px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

/* CLAUDE: Label fuer Kinder */
.est-kinder__label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

/* CLAUDE: Stepper-Container (minus – zahl – plus) */
.est-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  overflow: hidden;
}

/* CLAUDE: Stepper-Buttons */
.est-stepper__btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #F3F4F6;
  color: #374151;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

/* CLAUDE: Hover-Effekt fuer Stepper-Buttons */
.est-stepper__btn:hover:not(:disabled) {
  background: #E5E7EB;
}

/* CLAUDE: Disabled-State fuer Stepper-Buttons */
.est-stepper__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* CLAUDE: Stepper-Zahl in der Mitte */
.est-stepper__value {
  width: 48px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  border-left: 1px solid #D1D5DB;
  border-right: 1px solid #D1D5DB;
  line-height: 40px;
}

/* CLAUDE: ============================================ */
/* CLAUDE: Ergebnis: Aufschluesselungs-Tabelle          */
/* CLAUDE: ============================================ */

/* CLAUDE: Ergebnis-Toggle (Monat/Jahr) */
.est-result-toggle {
  display: flex;
  gap: 0;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto 24px;
  width: fit-content;
}

/* CLAUDE: Breakdown-Container */
.est-breakdown {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

/* CLAUDE: Einzelne Zeile der Aufschluesselung */
.est-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #F3F4F6;
}

/* CLAUDE: Letzte Zeile ohne Border */
.est-breakdown__row:last-child {
  border-bottom: none;
}

/* CLAUDE: Brutto-Zeile (leicht hervorgehoben) */
.est-breakdown__row--brutto {
  background: #F9FAFB;
  font-weight: 600;
}

/* CLAUDE: Netto-Zeile (stark hervorgehoben, dunkler Hintergrund) */
.est-breakdown__row--netto {
  background: #00274D;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 16px 20px;
}

/* CLAUDE: Netto-Wert in Gruen */
.est-breakdown__row--netto .est-breakdown__value {
  color: #10B981;
  font-size: 1.3rem;
}

/* CLAUDE: Kindergeld-Zeile (gruener Hintergrund) */
.est-breakdown__row--kindergeld {
  background: #F0FDF4;
}

/* CLAUDE: Label der Aufschluesselung */
.est-breakdown__label {
  font-size: 0.9rem;
  color: #4B5563;
}

/* CLAUDE: Label-Farbe fuer spezielle Zeilen erben */
.est-breakdown__row--brutto .est-breakdown__label,
.est-breakdown__row--netto .est-breakdown__label {
  color: inherit;
}

/* CLAUDE: Wert (rechts ausgerichtet) */
.est-breakdown__value {
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* CLAUDE: Negative Werte (Steuern/SV) in Rot */
.est-breakdown__value--negative {
  color: #EF4444;
}

/* CLAUDE: Positive Werte (Kindergeld) in Gruen */
.est-breakdown__value--positive {
  color: #10B981;
}

/* CLAUDE: Trennlinie mit Label (Steuern / Sozialversicherung) */
.est-breakdown__divider {
  padding: 8px 20px;
  background: #F3F4F6;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B7280;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}

/* CLAUDE: ============================================ */
/* CLAUDE: Kennzahlen-Leiste                            */
/* CLAUDE: ============================================ */

/* CLAUDE: 2-spaltige Kennzahlen-Leiste (Effektiver Steuersatz entfernt) */
.est-rates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

/* CLAUDE: Variante mit nur 2 Kennzahlen */
.est-rates--two-cols {
  grid-template-columns: repeat(2, 1fr);
}

/* CLAUDE: Einzelnes Kennzahlen-Item */
.est-rates__item {
  text-align: center;
  padding: 12px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

/* CLAUDE: Kennzahlen-Label */
.est-rates__label {
  display: block;
  font-size: 0.75rem;
  color: #6B7280;
  margin-bottom: 4px;
}

/* CLAUDE: Kennzahlen-Wert */
.est-rates__value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
}

/* CLAUDE: ============================================ */
/* CLAUDE: AfA-Slider                                   */
/* CLAUDE: ============================================ */

/* CLAUDE: Slider-Gruppe (Label + Range) */
.est-slider-group {
  margin-bottom: 16px;
}

/* CLAUDE: Slider-Label mit Wert-Anzeige */
.est-slider__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 8px;
}

/* CLAUDE: Range-Slider Grundstil */
.est-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  outline: none;
}

/* CLAUDE: Slider-Thumb (Webkit) */
.est-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #B8944D;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* CLAUDE: Slider-Thumb (Firefox) */
.est-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #B8944D;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* CLAUDE: ===================================
   14. Responsive Design
   =================================== */

/* CLAUDE: Tablet-Breakpoint */
@media (max-width: 768px) {
  /* CLAUDE: Container mit weniger Padding */
  .est-rechner {
    padding: var(--est-spacing-lg) var(--est-spacing-sm);
  }

  /* CLAUDE: Cards in 2-Spalten-Grid */
  .est-cards--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CLAUDE: Objekte-Grid stapeln */
  .est-objekte__grid {
    grid-template-columns: 1fr;
  }

  /* CLAUDE: Denkmal-Teaser KPIs stapeln */
  .est-denkmal-teaser__numbers {
    flex-direction: column;
    gap: var(--est-spacing-md);
  }
}

/* CLAUDE: Mobile-Breakpoint */
@media (max-width: 480px) {
  /* CLAUDE: Step-Titel kleiner */
  .est-step__title {
    font-size: var(--est-text-xl);
  }

  /* CLAUDE: Cards in 1-Spalte */
  .est-cards--3col {
    grid-template-columns: 1fr;
  }

  /* CLAUDE: Input kleiner */
  .est-input--large {
    font-size: var(--est-text-xl);
    padding: var(--est-spacing-sm) var(--est-spacing-md);
    padding-right: 80px;
  }

  /* CLAUDE: CTA-Buttons stapeln */
  .est-cta {
    flex-direction: column;
    align-items: center;
  }

  /* CLAUDE: Buttons auf volle Breite */
  .est-btn--cta {
    width: 100%;
  }

  /* CLAUDE: Kinder-Stepper vertikal auf Mobile */
  .est-kinder-group {
    flex-direction: column;
    align-items: flex-start;
  }

  /* CLAUDE: Kennzahlen-Leiste einspaltig auf Mobile */
  .est-rates {
    grid-template-columns: 1fr;
  }

  /* CLAUDE: Input-Wrapper umbrechen auf Mobile */
  .est-input-wrapper {
    flex-wrap: wrap;
  }
}