/* =========================================================
   faelle.css – Karte "Was ein Angriff kostet" mit drei Fallbeispielen
   Baut auf threat-card auf.
   ========================================================= */

/* Vergleich der Gesamtschäden als Balken */
.fall-bars { display: grid; gap: 10px; margin: 6px 0 28px; }
.fall-bar { display: grid; grid-template-columns: 270px 1fr 110px; gap: 14px; align-items: center; font-size: .93rem; }
.fall-bar b { font-weight: 600; color: var(--ink); }
.fall-bar .track { height: 14px; border-radius: 99px; background: var(--primary-tint); overflow: hidden; }
.fall-bar .track span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2a541, #eb6834); }
.fall-bar em { font-style: normal; font-weight: 700; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Fallkarten: tabellarisch ausgerichtet (CSS Subgrid) –
   Kopf, Stichwort, Einleitung, Kosten, Summe und "Noch nicht eingerechnet"
   liegen bei allen drei Fällen auf derselben Höhe. */
.faelle { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, auto); column-gap: 18px; }
.fall {
  display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
}
.fall-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.fall-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; }
.fall-icon svg { width: 22px; height: 22px; }
.fall-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.fall-head small { display: block; color: var(--ink-soft); font-size: .85rem; font-weight: 400; }
.fall-tag { justify-self: start; align-self: start; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 99px; background: #fdeee7; color: #b8491a; margin-bottom: 10px; }
.fall-intro { margin: 0 0 16px; color: var(--ink-soft); font-size: .95rem; }

.fall-costs { width: 100%; border-collapse: collapse; font-size: .9rem; align-self: start; }
.fall-costs td { padding: 7px 0; border-bottom: 1px dashed var(--line); vertical-align: top; color: var(--ink-soft); }
.fall-costs td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fall-costs small { display: block; font-size: .78rem; color: var(--ink-soft); }

.fall-sum { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); padding: 10px 0 16px; margin-top: 8px; }
.fall-sum span { font-weight: 700; color: var(--ink); }
.fall-sum strong { font-size: 1.35rem; color: #b8491a; font-variant-numeric: tabular-nums; }

.fall-extra { padding: 12px 14px; border-radius: 10px; background: #fdeee7; font-size: .88rem; color: var(--ink); }
.fall-extra strong { display: block; margin-bottom: 4px; }
.fall-extra ul { margin: 0; padding-left: 18px; color: var(--ink-soft); }
.fall-extra li + li { margin-top: 3px; }

.fall-note { margin: 22px 0 0; font-size: .85rem; color: var(--ink-soft); }
.fall-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fall-foot p { margin: 0; color: var(--ink); }

@media (max-width: 1000px) {
  .faelle { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 18px; }
  .fall { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 640px) {
  .fall-bar { grid-template-columns: 1fr auto; }
  .fall-bar .track { grid-column: 1 / -1; grid-row: 2; }
  .fall { padding: 18px; }
}