/* ============================================================
   rechner.css — Rechner-UI-Komponenten
   businesskalkulation.de
   ============================================================ */

/* ============================================================
   1. Rechner-Seite Wrapper
   ============================================================ */
.rechner-seite {
  padding: 2rem 0;
}

/* ============================================================
   2. Page Header
   ============================================================ */
.page-header {
  padding: 2rem 0 1.5rem;
  background-color: var(--farbe-hintergrund-alt);
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 2rem;
  color: var(--farbe-text);
  margin-bottom: 0.5rem;
}

.page-header p {
  font-size: 16px;
  color: var(--farbe-text-gedaempt);
  max-width: 640px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .page-header h1 {
    font-size: 2.5rem;
  }
}

/* ============================================================
   3. Rechner-Layout (2-spaltig Desktop)
   ============================================================ */
.rechner-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rechner-layout {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
}

/* ============================================================
   4. Eingabe-Gruppe
   ============================================================ */
.eingaben {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.eingabe-gruppe {
  display: flex;
  flex-direction: column;
}

.eingabe-gruppe label {
  font-size: 14px;
  font-weight: 500;
  color: var(--farbe-text-gedaempt);
  margin-bottom: 0.35rem;
}

.eingabe-gruppe input[type="text"],
.eingabe-gruppe input[type="number"],
.eingabe-gruppe select {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--farbe-rahmen);
  border-radius: var(--radius);
  padding: 0 1rem;
  font-family: var(--schrift-text);
  font-size: 16px;
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.eingabe-gruppe select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.eingabe-gruppe input:focus,
.eingabe-gruppe select:focus {
  outline: none;
  border-color: var(--farbe-primaer);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15);
}

.eingabe-gruppe input::placeholder {
  color: #BBBBBB;
}

.eingabe-hinweis {
  font-size: 12px;
  color: var(--farbe-text-gedaempt);
  margin-top: 0.3rem;
}

/* ============================================================
   5. Eingabe mit Einheit-Badge
   ============================================================ */
.eingabe-mit-einheit {
  position: relative;
}

.eingabe-mit-einheit input {
  padding-right: 3rem;
}

.einheit-badge {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--farbe-text-gedaempt);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   6. Fehler-Text
   ============================================================ */
.fehler-text {
  display: none;
  font-size: 13px;
  color: var(--farbe-fehler);
  margin-top: 0.3rem;
}

.fehler-text.sichtbar {
  display: block;
}

/* ============================================================
   7. Radio-Gruppe
   ============================================================ */
.radio-gruppe {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.radio-gruppe label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 15px;
  color: var(--farbe-text);
  cursor: pointer;
  font-weight: 400;
}

.radio-gruppe input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   8. Checkbox-Gruppe
   ============================================================ */
.checkbox-gruppe {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-gruppe input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-gruppe label {
  font-size: 15px;
  color: var(--farbe-text);
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0;
}

/* ============================================================
   9. Range-Schieberegler
   ============================================================ */
.schieberegler-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.schieberegler-wrapper input[type="range"] {
  flex: 1;
  height: 6px;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
}

.schieberegler-anzeige {
  font-size: 15px;
  font-weight: 500;
  color: var(--farbe-primaer-dunkel);
  min-width: 3.5rem;
  text-align: right;
}

/* ============================================================
   10. Berechnen-Button
   ============================================================ */
.berechnen-button {
  width: 100%;
  height: 52px;
  background-color: var(--farbe-primaer);
  color: #FFFFFF;
  font-family: var(--schrift-display);
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  margin-top: 0.5rem;
}

.berechnen-button:hover {
  background-color: var(--farbe-primaer-dunkel);
}

.berechnen-button:active {
  transform: scale(0.98);
}

/* ============================================================
   11. Ergebnis-Box
   ============================================================ */
.ergebnisse {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ergebnis-box {
  background-color: var(--farbe-primaer-hell);
  border-left: 4px solid var(--farbe-primaer);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.ergebnis-zahl {
  font-family: var(--schrift-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.ergebnis-label {
  font-size: 14px;
  color: var(--farbe-text-gedaempt);
}

/* ============================================================
   12. Ergebnis-Tabelle
   ============================================================ */
.ergebnis-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.ergebnis-tabelle td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--farbe-rahmen);
  vertical-align: middle;
}

.ergebnis-tabelle tr:nth-child(even) td {
  background-color: var(--farbe-hintergrund-alt);
}

.ergebnis-tabelle td:last-child {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

.ergebnis-tabelle .gesamt td {
  font-weight: 700;
  font-size: 16px;
  color: var(--farbe-primaer-dunkel);
  border-top: 2px solid var(--farbe-primaer);
  border-bottom: none;
}

/* ============================================================
   13. Hinweis-Box
   ============================================================ */
.hinweis-box {
  background-color: #FFFBEB;
  border: 1px solid #F59E0B;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 14px;
  color: #78350F;
  line-height: 1.6;
}

/* ============================================================
   14. Status-Klassen (Kleinunternehmer / Ampel-Anzeige)
   ============================================================ */
.status-ok {
  background-color: #ECFDF5;
  border-left: 4px solid #10B981;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.status-warn {
  background-color: #FFFBEB;
  border-left: 4px solid #F59E0B;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.status-alarm {
  background-color: #FEF2F2;
  border-left: 4px solid #EF4444;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.status-ok .status-titel,
.status-warn .status-titel,
.status-alarm .status-titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.status-ok .status-titel    { color: #065F46; }
.status-warn .status-titel  { color: #78350F; }
.status-alarm .status-titel { color: #991B1B; }

/* ============================================================
   15. Fortschrittsbalken
   ============================================================ */
.fortschritt-wrapper {
  margin-top: 1rem;
}

.fortschritt-label {
  font-size: 13px;
  color: var(--farbe-text-gedaempt);
  margin-bottom: 0.4rem;
}

.fortschritt-spur {
  height: 10px;
  background-color: var(--farbe-rahmen);
  border-radius: 999px;
  overflow: hidden;
}

.fortschritt-balken {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background-color: var(--farbe-primaer);
  transition: width 0.4s ease, background-color 0.3s;
}

/* ============================================================
   16. Balkendiagramm (Ruecklagen)
   ============================================================ */
.balken-diagramm {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.balken-reihe {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  align-items: center;
  gap: 0.6rem;
}

.balken-bezeichnung {
  font-size: 13px;
  color: var(--farbe-text-gedaempt);
  white-space: nowrap;
}

.balken-spur {
  height: 20px;
  background-color: var(--farbe-rahmen);
  border-radius: 4px;
  overflow: hidden;
}

.balken-fuell {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.balken-betrag {
  font-size: 13px;
  font-weight: 500;
  color: var(--farbe-text);
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   17. KV-Vergleich (Krankenversicherung)
   ============================================================ */
.kv-vergleich {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .kv-vergleich {
    grid-template-columns: 1fr 1fr;
  }
}

.kv-karte {
  border: 1.5px solid var(--farbe-rahmen);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  background-color: var(--farbe-hintergrund);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kv-karte h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--farbe-text);
}

.kv-karte-empfohlen {
  border-color: var(--farbe-primaer);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
}

.kv-karte-empfohlen h3 {
  color: var(--farbe-primaer-dunkel);
}

.kv-fazit {
  margin-top: 1rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--farbe-primaer-dunkel);
  padding: 0.75rem 1rem;
  background-color: var(--farbe-primaer-hell);
  border-radius: var(--radius);
}

/* ============================================================
   18. Sekundaer-Button (z.B. Drucken)
   ============================================================ */
.sekundaer-button {
  width: 100%;
  height: 44px;
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-primaer);
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid var(--farbe-primaer);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s;
}

.sekundaer-button:hover {
  background-color: var(--farbe-primaer-hell);
}

/* ============================================================
   19. Info-Karten (z.B. Stundensatz-Tipps)
   ============================================================ */
.info-karten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .info-karten {
    grid-template-columns: repeat(3, 1fr);
  }
}

.info-karte {
  background-color: var(--farbe-hintergrund-alt);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.info-karte h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--farbe-text);
  margin-bottom: 0.5rem;
}

.info-karte p {
  font-size: 14px;
  color: var(--farbe-text-gedaempt);
  line-height: 1.6;
}

/* ============================================================
   20. Weitere Rechner
   ============================================================ */
.weitere-rechner {
  padding: 2.5rem 0;
  background-color: var(--farbe-hintergrund-alt);
  margin-top: 3rem;
}

.weitere-rechner h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--farbe-text);
}

.weitere-rechner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.weitere-rechner-karte {
  display: block;
  background-color: var(--farbe-hintergrund);
  border: 1.5px solid var(--farbe-rahmen);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--farbe-text);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.weitere-rechner-karte:hover {
  border-color: var(--farbe-primaer);
  box-shadow: var(--schatten);
  text-decoration: none;
  transform: translateY(-2px);
  color: var(--farbe-text);
}

.weitere-rechner-karte h3 {
  font-size: 15px;
  margin-bottom: 0.3rem;
  color: var(--farbe-primaer-dunkel);
}

.weitere-rechner-karte p {
  font-size: 13px;
  color: var(--farbe-text-gedaempt);
}

/* ============================================================
   21. FAQ-Sektion
   ============================================================ */
.faq-sektion {
  padding: 2.5rem 0;
}

.faq-sektion h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--farbe-text);
}

.faq-sektion details {
  border-bottom: 1px solid var(--farbe-rahmen);
}

.faq-sektion details:first-of-type {
  border-top: 1px solid var(--farbe-rahmen);
}

.faq-sektion summary {
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  color: var(--farbe-text);
  transition: color 0.15s;
}

.faq-sektion summary::-webkit-details-marker {
  display: none;
}

.faq-sektion summary::after {
  content: '+';
  color: var(--farbe-primaer);
  font-size: 20px;
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-sektion details[open] summary::after {
  content: '-';
}

.faq-sektion summary:hover {
  color: var(--farbe-primaer);
}

.faq-antwort {
  padding-top: 0.75rem;
  padding-bottom: 1.25rem;
  font-size: 15px;
  line-height: 1.7;
  color: var(--farbe-text-gedaempt);
}

/* ============================================================
   22. SEO-Textblock
   ============================================================ */
.seo-text {
  padding: 2.5rem 0;
}

.seo-text h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--farbe-text);
}

.seo-text p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--farbe-text-gedaempt);
  margin-bottom: 1rem;
  max-width: 720px;
}

/* ============================================================
   23. Affiliate-Hinweis
   ============================================================ */
.affiliate-box {
  background-color: var(--farbe-hintergrund-alt);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 14px;
  color: var(--farbe-text-gedaempt);
  line-height: 1.6;
  margin-top: 1rem;
}

.affiliate-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--farbe-primaer);
  font-weight: 500;
}

.affiliate-link:hover {
  color: var(--farbe-primaer-dunkel);
}

/* ============================================================
   24. Notgroschen-Box
   ============================================================ */
.notgroschen-box {
  background-color: var(--farbe-primaer-hell);
  border-left: 4px solid var(--farbe-primaer);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 14px;
  color: var(--farbe-primaer-dunkel);
  line-height: 1.6;
}