/* Finalarm — Exit-Intent auf Broker-Testberichten
 * ---------------------------------------------------------------------------
 * Alle Farben, Radien und Schatten kommen aus tokens.css. Es steht kein eigener
 * Hex-Wert in dieser Datei, damit das Modul jede Theme-Aenderung mitgeht.
 * Coral bleibt laut CI-Guide dem Geld-CTA vorbehalten — hier genau ein Knopf.
 */

.fa-exit {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px, 4vh, 48px) 16px;
  background: rgba(0, 24, 52, .62);
  overflow: auto;
  font-family: var(--font-body, system-ui);
}
.fa-exit.ist-offen { display: flex; }
.fa-exit[hidden] { display: none; }

.fa-exit__dialog {
  width: min(720px, 100%);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-lg, 0 26px 60px rgba(11, 27, 51, .16));
  outline: none;
  overflow: hidden;
}

.fa-exit__kopf {
  position: relative;
  flex: 0 0 auto;
  padding: 1.15rem 3.4rem 1rem 1.3rem;
  background: var(--navy, #00214E);
  color: #fff;
}
.fa-exit__kicker {
  display: block;
  font: 600 11px/1.2 var(--font-body, system-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-100, #D7E5FD);
}
.fa-exit__kopf h2 {
  margin: .25rem 0 0;
  padding: 0;
  border: 0;
  font: 600 22px/1.28 var(--font-display, system-ui);
  color: #fff;
}
.fa-exit__zu {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fa-exit__zu:hover { background: rgba(255, 255, 255, .26); }

.fa-exit__leib {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.3rem 1.3rem;
}
.fa-exit__frage {
  margin: 0 0 .7rem;
  font: 600 15px/1.4 var(--font-body, system-ui);
  color: var(--navy, #00214E);
}

.fa-exit__gruende {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
@media (min-width: 700px) { .fa-exit__gruende { grid-template-columns: 1fr 1fr 1fr; } }
.fa-exit__grund {
  min-height: 46px;
  padding: .55rem .8rem;
  border: 1px solid var(--grey-200, #E3E8EF);
  border-radius: var(--r-sm, 10px);
  background: var(--grey-050, #F6F8FB);
  color: var(--navy, #00214E);
  font: 600 14px/1.3 var(--font-body, system-ui);
  text-align: left;
  cursor: pointer;
}
.fa-exit__grund:hover { border-color: var(--blue, #1F6FEB); }
.fa-exit__grund[aria-pressed="true"] {
  background: var(--blue, #1F6FEB);
  border-color: var(--blue, #1F6FEB);
  color: #fff;
}
.fa-exit__kurz { display: none; }
@media (max-width: 599px) {
  .fa-exit__lang { display: none; }
  .fa-exit__kurz { display: inline; }
}

.fa-exit__antwort {
  margin-top: .75rem;
  padding: .95rem 1rem;
  border-radius: var(--r-sm, 10px);
  background: var(--blue-050, #EAF1FE);
}
.fa-exit__antwort strong {
  display: block;
  margin-bottom: .25rem;
  font: 600 17px/1.3 var(--font-display, system-ui);
  color: var(--navy, #00214E);
}
.fa-exit__antwort p {
  margin: 0 0 .85rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #0B1B33);
}

/* Themen-Varianten: ein Satz zum Broker, abgesetzt von der Antwort. */
.fa-exit__antwort p.fa-exit__anbieter {
  padding-top: .7rem;
  border-top: 1px solid var(--blue-100, #D7E5FD);
  font-weight: 600;
  color: var(--navy, #00214E);
}

/* Der einzige Handlungsaufruf im Layer. */
.fa-exit__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .6rem 1.4rem;
  border-radius: var(--r-pill, 999px);
  background: var(--coral, #FF5A4F);
  color: #fff;
  font: 600 15px/1.2 var(--font-body, system-ui);
  text-decoration: none;
  transition: background .18s var(--ease, ease);
}
.fa-exit__cta:hover,
.fa-exit__cta:focus { background: var(--coral-600, #E8442F); color: #fff; text-decoration: none; }

.fa-exit__anzeige {
  display: block;
  margin-top: .6rem;
  font-size: 12px;
  line-height: 1.45;
  color: var(--faint, #8A93A3);
}

.fa-exit__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--grey-200, #E3E8EF);
  font-size: 13px;
}
.fa-exit__links button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--blue-700, #1750AE);
  text-decoration: underline;
  cursor: pointer;
}
.fa-exit__hinweis {
  margin-left: auto;
  color: var(--faint, #8A93A3);
}
@media (max-width: 599px) {
  .fa-exit__kopf h2 { font-size: 19px; }
  .fa-exit__hinweis { margin-left: 0; flex-basis: 100%; }
}

/* Hintergrund nicht mitscrollen lassen, solange der Layer offen ist. */
body.fa-exit-offen { overflow: hidden; }