/* Calendly-Alternative: Antwortbox, Tabelle, Rechner, Entscheidungsbaum */

.js .cal-fallback-wrap { display: none; }
html:not(.js) .cal-calc { display: none; }

.cal-answer {
  background: var(--purple-50);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}
.cal-answer p { margin: 0 0 var(--space-xs); }
.cal-answer p:last-child { margin-bottom: 0; }

.cal-table td, .cal-table th { vertical-align: top; }
.cal-source { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-xs); }
.cal-source a { color: var(--purple-600); }

.cal-calc {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
}
.cal-calc__controls { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.cal-calc__field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.cal-calc__label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.cal-calc__select {
  font: inherit; font-size: var(--fs-sm); padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--cream-dark); background: var(--paper, #fff);
  color: var(--text-primary);
}
.cal-bars { display: grid; gap: var(--space-sm); }
.cal-bars__row {
  display: grid; grid-template-columns: minmax(110px, 170px) 1fr minmax(96px, auto);
  align-items: center; gap: var(--space-xs);
}
.cal-bars__name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.cal-bars__track { height: 18px; background: var(--purple-50); border-radius: var(--radius-pill); overflow: hidden; }
.cal-bars__fill {
  display: block; height: 100%; background: var(--purple-400);
  border-radius: var(--radius-pill); transition: width 450ms var(--ease-out);
}
.cal-bars__fill--accent { background: var(--purple-600); }
.cal-bars__value { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-primary); }
.cal-calc__note { font-size: var(--fs-sm); color: var(--text-secondary); margin: var(--space-sm) 0 0; }

.cal-figure { margin: var(--space-md) 0; }
.cal-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  border: 1px solid var(--cream-dark);
}
.cal-figure figcaption { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--space-xs); }

.cal-tool { margin-bottom: var(--space-xl); }

.cal-catch {
  background: var(--cream-light);
  border-radius: var(--radius-md, 16px);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
}
.cal-catch p { margin: 0; }
.cal-catch__title { font-weight: 600; color: var(--purple-700); margin-bottom: 4px !important; }

.cal-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0 0; }
.cal-cta__mark { font-size: var(--fs-sm); color: var(--text-secondary); }

.cal-breakeven {
  display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: var(--space-md) 0;
}
.cal-breakeven__item {
  background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: 6px;
}
.cal-breakeven__value { font-family: var(--ff-display); font-size: var(--fs-xl); color: var(--purple-600); }
.cal-breakeven__label { font-size: var(--fs-sm); color: var(--text-secondary); }

.cal-flow { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.cal-flow__step {
  background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-md);
}
.cal-flow__step--inner { box-shadow: none; background: var(--cream-light); padding: var(--space-sm); }
.cal-flow__q { font-weight: 600; color: var(--purple-900); margin: 0 0 var(--space-xs); }
.cal-flow__branches { display: grid; gap: var(--space-xs); }
.cal-flow__branch { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); align-items: start; }
.cal-flow__branch > .cal-flow__step--inner { grid-column: 1 / -1; }
.cal-flow__yes, .cal-flow__no {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap;
}
.cal-flow__yes { background: var(--purple-600); color: var(--text-on-purple, #fff); }
.cal-flow__no { background: var(--purple-50); color: var(--purple-700); }
.cal-flow__result {
  background: var(--purple-50); color: var(--purple-900); border-radius: 16px;
  padding: var(--space-xs) var(--space-sm); font-size: var(--fs-sm);
}
.cal-flow__result--accent { background: var(--purple-900); color: #fff; }

.cal-method .cal-disclosure { font-size: var(--fs-sm); color: var(--text-secondary); }

@media (max-width: 640px) {
  .cal-bars__row { grid-template-columns: 1fr; gap: 4px; }
  .cal-bars__value { text-align: left; }
  .cal-flow__branch { grid-template-columns: 1fr; }
  .cal-calc { padding: var(--space-md); }
}

.cal-meta { font-size: var(--fs-sm); color: var(--text-secondary); margin: var(--space-sm) 0 0; }
.cal-meta a { color: var(--purple-600); }
.cal-caption { caption-side: top; text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); padding-bottom: var(--space-xs); }

/* Kleine Tool-Karten statt langer Abschnitte (keine Seitenstreifen, nur Tönung) */
.cal-cards { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: var(--space-md) 0; }
.cal-card { background: var(--cream-light); border-radius: var(--radius-card); padding: var(--space-md); display: flex; flex-direction: column; gap: 8px; }
.cal-card__name { font-family: var(--ff-display); font-size: var(--fs-lg); color: var(--purple-900); margin: 0; }
.cal-card p { margin: 0; font-size: var(--fs-sm); }
.cal-card__label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--purple-700); }
.cal-card figure { margin: 0; }
.cal-card img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--cream-dark); display: block; }
.cal-card figcaption { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 4px; }

.cal-dsgvo-table td:first-child { white-space: nowrap; }
.cal-dsgvo-table td, .cal-dsgvo-table th { vertical-align: top; }

/* Rechner: Antwortzeile, Platzhalter im Balken, Rechenregeln */
.cal-calc__answer { font-weight: 600; color: var(--purple-900); margin: 0 0 var(--space-md); }
.cal-calc__hint { font-size: var(--fs-sm); color: var(--text-secondary); margin: var(--space-md) 0 0; }
.cal-bars__track { position: relative; }
.cal-bars__note {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px;
  font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap;
}
.cal-rules {
  background: var(--cream-light);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}
.cal-rules__title { font-weight: 600; color: var(--purple-700); margin: 0 0 var(--space-xs); }
.cal-rules__list { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); }
.cal-rules__list li { margin-bottom: 6px; }
.cal-free { margin: 0 0 var(--space-md); padding-left: 1.2em; font-size: var(--fs-sm); }
.cal-free li { margin-bottom: 4px; }

/* Ohne JS: Tabelle wird auf Mobil zu gestapelten Zeilen, nie horizontal scrollend */
@media (max-width: 640px) {
  .cal-fallback thead { display: none; }
  .cal-fallback,
  .cal-fallback tbody,
  .cal-fallback tr,
  .cal-fallback td { display: block; width: 100%; }
  .cal-fallback tr {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px;
    padding: var(--space-sm) 0; border-bottom: 1px solid var(--line);
  }
  .cal-fallback td { border: 0; padding: 0; }
  .cal-fallback td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .cal-fallback td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block;
    font-size: var(--fs-xs); color: var(--text-secondary);
  }
}