/* ==========================================================================
   CEx — Danke-Fenster nach dem Absenden einer Anfrage        cex.koeln
   Gehoert zum Formular-Handler in assets/contact.js und wird deshalb aus
   demselben Plugin geladen, nicht aus dem Theme: welche Theme-Stylesheets
   eine CEx-Seite laedt, ist NICHT einheitlich (/kontakt/ und /ueber-uns/
   laden z. B. kein cx-template.css). Aus dem Plugin geladen liegt die Datei
   garantiert auf jeder Seite, auf der auch das Formular liegt.

   Alle Farben kommen aus den Design-System-Tokens, mit Rueckfallwert fuer
   den Fall, dass eine Seite cx-design-system.css nicht laedt.
   Hausregeln: keine abgerundeten Ecken. Text auf Orange ist immer #1E2327.
   ========================================================================== */

.cex-thanks {
  position: fixed;
  inset: 0;
  /* Ueber allem, was die Seite sonst stapelt — das hoechste vorhandene
     z-index auf cex.koeln ist 100000 (Consent-Schicht). */
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* Auf sehr niedrigen Fenstern (Querformat, iOS mit eingeblendeter
     Tastatur) muss das Fenster scrollbar bleiben, sonst ist der
     Schliessen-Knopf nicht erreichbar. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(30, 35, 39, .72);
  opacity: 0;
  transition: opacity .18s ease;
}

.cex-thanks[hidden] { display: none; }
.cex-thanks.is-open { opacity: 1; }

.cex-thanks__panel {
  margin: auto;
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 40px 40px 36px;
  background: var(--form-bg, #FFFFFF);
  border: 1px solid var(--cx-warm-4, #E2DDD7);
  /* Keine abgerundeten Ecken — Hausregel fuer die gesamte CEx-Seite. */
  border-radius: 0;
  box-shadow: 0 24px 64px rgba(30, 35, 39, .28);
  font-family: inherit;
  text-align: left;
  transform: translateY(8px);
  transition: transform .18s ease;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 4;
  overflow-wrap: break-word;
  word-break: normal;
}

.cex-thanks.is-open .cex-thanks__panel { transform: none; }

/* Der Markenstreifen an der Oberkante. Das einzige Orange am Fenster
   neben dem Haken und dem Knopf. */
.cex-thanks__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cx-accent, #FF7A00);
}

.cex-thanks__mark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 0 20px;
  background: var(--cx-accent, #FF7A00);
}

.cex-thanks__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cex-thanks__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #4E555C);
}

.cex-thanks__title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cx-charcoal, #1E2327);
}

.cex-thanks__text {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted, #4E555C);
}

.cex-thanks__text:last-of-type { margin-bottom: 28px; }

.cex-thanks__actions {
  display: flex;
  gap: 12px;
}

.cex-thanks__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 28px;
  border: 0;
  border-radius: 0;
  background: var(--cx-accent, #FF7A00);
  /* Text auf dem Orange ist immer #1E2327 (6,1:1). Weiss waere 2,9:1. */
  color: var(--cx-accent-on, #1E2327);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}

.cex-thanks__btn:hover { background: var(--cx-accent-2, #F07300); }
.cex-thanks__btn:active { background: var(--cx-accent-3, #D96800); }

.cex-thanks__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cx-charcoal-3, #596066);
  cursor: pointer;
  line-height: 0;
}

.cex-thanks__close:hover { color: var(--cx-charcoal, #1E2327); }
.cex-thanks__close svg { width: 16px; height: 16px; }

.cex-thanks__btn:focus-visible,
.cex-thanks__close:focus-visible {
  outline: 2px solid var(--cx-charcoal, #1E2327);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .cex-thanks { padding: 16px; }
  .cex-thanks__panel { padding: 32px 20px 24px; }
  .cex-thanks__title { font-size: 24px; }
  .cex-thanks__actions { flex-direction: column; }
  .cex-thanks__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cex-thanks,
  .cex-thanks__panel { transition: none; }
  .cex-thanks__panel { transform: none; }
}