/*
 * Agent Alpha · Testzugang-Popup
 * Design an die Website angepasst: nur die Variablen im ersten Block tragen
 * Website-Werte (Schrift, Primaerfarbe, Radien, Flaechen).
 * Stand: 28.09.2026
 */
.tz {
  --tz-font: inherit;                    /* Schrift der Website */
  --tz-accent: #60A5FA;                  /* = --doc, Hintergrund von .btn */
  --tz-accent-hover: #8CBEFB;            /* = .btn:hover */
  --tz-accent-text: #06182F;             /* dunkle Schrift auf hellem Blau */
  /* Das helle Blau traegt auf Weiss nur 2,5:1. Fuer Links, Fokus und
     Feldrahmen auf der weissen Formularflaeche deshalb ein dunkles Blau. */
  --tz-focus: #1D4ED8;                   /* = a:hover der Website, 6,7:1 auf Weiss */
  --tz-radius: 16px;                     /* Radius der Modulkarten */
  --tz-radius-sm: 8px;                   /* Radius von .btn und Feldern */

  --tz-info-bg: linear-gradient(160deg, #101E36 0%, #060D1A 100%);  /* --surface -> --bg */
  --tz-info-text: #E8EEF9;               /* --txt */
  --tz-info-muted: #93A6C2;              /* --txt2 */
  --tz-info-accent: #60A5FA;             /* --doc */

  --tz-surface: #FFFFFF;                 /* rechte Seite: Formular bleibt hell */
  --tz-heading: #0F2747;
  --tz-text: #1F2F46;
  --tz-muted: #5B6678;
  --tz-line: #CFD8E6;
  --tz-field-bg: #FFFFFF;

  --tz-error: #B42318;
  --tz-error-bg: #FEF3F2;
  --tz-ok: #157A3E;
  --tz-ok-bg: #E6F5EC;
  --tz-backdrop: rgba(3, 8, 20, .72);
}

/* Grundgeruest: natives <dialog> als Vollbild-Ebene, Karte mittig */
.tz { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh;
  margin: 0; padding: 24px; border: 0; background: transparent; color: var(--tz-text); font-family: var(--tz-font);
  font-size: 15px; line-height: 1.5; overflow: auto; -webkit-font-smoothing: antialiased; }
.tz[open] { display: grid; place-items: center; }
.tz::backdrop { background: var(--tz-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tz *, .tz *::before, .tz *::after { box-sizing: border-box; }
/* Schutz vor allgemeinen Website-Regeln (p, h2, ul, button …) */
.tz :where(p, h2, h3, ul, ol, figure) { margin: 0; padding: 0; }
.tz :where(p, li, label, input, button) { line-height: 1.5; letter-spacing: normal; text-transform: none; }
.tz :where(a) { color: var(--tz-focus); }
.tz :where(button) { font-family: var(--tz-font); }
html.tz-offen { overflow: hidden; }

.tz-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); width: min(900px, 100%);
  max-height: calc(100dvh - 48px); overflow: auto; border-radius: var(--tz-radius); background: var(--tz-surface);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .25); }
.tz[open] .tz-card { animation: tz-in .22s ease-out; }
@keyframes tz-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.tz-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: var(--tz-radius-sm); background: transparent; color: var(--tz-muted); cursor: pointer; }
.tz-x:hover { background: rgba(15, 39, 71, .06); color: var(--tz-heading); }
.tz-x svg { width: 18px; height: 18px; }

/* Linke Seite: warum sich der Test lohnt */
.tz-info { display: flex; flex-direction: column; gap: 18px; padding: 38px 34px 30px; background: var(--tz-info-bg); color: var(--tz-info-text); }
.tz-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tz-info-accent); }
.tz-h { margin: -8px 0 0; font-size: 27px; line-height: 1.18; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.tz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tz-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.tz-list svg { width: 20px; height: 20px; margin-top: 1px; color: var(--tz-info-accent); }
.tz-fig { margin: auto 0 0; }
.tz-fig img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.tz-fig figcaption { margin-top: 9px; font-size: 12.5px; color: var(--tz-info-muted); }

/* Rechte Seite: Formular */
/* Formularspalte optisch mittig: die linke Spalte ist durch das Vorschaubild
   hoeher, sonst schwimmt das Formular oben und unten bleibt eine Luecke. */
.tz-main { padding: 38px 34px 28px; display: flex; flex-direction: column; justify-content: center; }
.tz-lead { margin: 0 44px 20px 0; font-size: 15px; color: var(--tz-text); }
.tz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tz-f { margin: 0 0 14px; }
.tz-f label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--tz-heading); }
.tz-f input { display: block; width: 100%; height: 46px; margin: 0; padding: 0 13px; font: inherit; font-size: 16px; /* 16px verhindert Zoom auf iPhone */
  color: var(--tz-text); background: var(--tz-field-bg); border: 1px solid var(--tz-line); border-radius: var(--tz-radius-sm); outline: none;
  transition: border-color .15s, box-shadow .15s; }
.tz-f input:focus { border-color: var(--tz-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tz-focus) 20%, transparent); }
.tz-f input[aria-invalid="true"] { border-color: var(--tz-error); }
.tz-err { margin: 6px 0 0; font-size: 13px; color: var(--tz-error); }
.tz-hint { margin: 6px 0 0; font-size: 13px; color: var(--tz-muted); }
.tz-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tz-check { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--tz-text); cursor: pointer; }
.tz-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tz-accent); }
.tz-opt { color: var(--tz-muted); }

.tz-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin: 0; padding: 12px 18px;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--tz-accent-text); background: var(--tz-accent); border: 0;
  border-radius: var(--tz-radius-sm); cursor: pointer; transition: background .15s; }
.tz-btn:hover { background: var(--tz-accent-hover); }
.tz-btn[disabled] { opacity: .7; cursor: default; }
a.tz-btn { text-decoration: none; }
a.tz-btn:hover { color: var(--tz-accent-text); }
.tz-done-text { font-size: 16px; }
.tz-demo { margin: 4px 0 14px; }
.tz-alert a { color: var(--tz-focus); font-weight: 600; }
.tz-btn-sec { width: auto; min-height: 42px; margin: 6px auto 0; padding: 9px 20px; font-size: 15px; font-weight: 600; color: var(--tz-heading);
  background: transparent; border: 1px solid var(--tz-line); }
.tz-btn-sec:hover { background: rgba(15, 39, 71, .05); }
.tz-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--tz-muted); }
.tz-legal { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--tz-line); font-size: 12.5px; line-height: 1.5; color: var(--tz-muted); }
.tz-legal a, .tz-small a { color: var(--tz-focus); font-weight: 600; }
.tz-alert { margin: 0 0 14px; padding: 10px 12px; font-size: 14px; color: var(--tz-error); background: var(--tz-error-bg);
  border: 1px solid color-mix(in srgb, var(--tz-error) 30%, transparent); border-radius: var(--tz-radius-sm); }

.tz :focus-visible { outline: 2px solid var(--tz-focus); outline-offset: 2px; }
.tz-f input:focus-visible, .tz .tz-h:focus-visible, .tz .tz-h3:focus-visible { outline: none; }

/* Bestaetigung */
.tz-done { padding: 10px 0 0; text-align: center; }
.tz-ok { width: 60px; height: 60px; margin: 6px auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--tz-ok); background: var(--tz-ok-bg); }
.tz-ok svg { width: 28px; height: 28px; }
.tz-h3 { margin: 0 0 8px; font-size: 23px; line-height: 1.2; font-weight: 700; color: var(--tz-heading); outline: none; }
.tz-done p { margin: 0 0 14px; }
.tz-steps { margin: 0 0 18px; padding: 16px 18px; list-style: none; text-align: left; counter-reset: s; background: rgba(15, 39, 71, .04);
  border-radius: var(--tz-radius-sm); display: grid; gap: 9px; font-size: 14.5px; }
.tz-steps li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.tz-steps li::before { content: counter(s); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  font-size: 12.5px; font-weight: 700; color: var(--tz-accent-text); background: var(--tz-accent); }
.tz-small { font-size: 14px; color: var(--tz-muted); }

.tz [hidden] { display: none !important; }

/* Handy und schmale Fenster: Blatt von unten, nur das Noetigste */
@media (max-width: 760px) {
  .tz { padding: 0; }
  .tz[open] { place-items: end center; }
  .tz-card { grid-template-columns: 1fr; width: 100%; max-height: 94dvh; border-radius: var(--tz-radius) var(--tz-radius) 0 0; }
  .tz[open] .tz-card { animation-name: tz-up; }
  .tz-info { gap: 8px; padding: 22px 64px 18px 20px; }
  .tz-h { margin: 0; font-size: 21px; }
  .tz-list, .tz-fig { display: none; }
  .tz-x { top: 12px; right: 10px; color: var(--tz-info-muted); }
  .tz-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .tz-main { padding: 20px 20px 22px; }
  .tz-lead { margin-right: 0; font-size: 14.5px; }
}
/* niedrige Fenster (z. B. Laptop 1280×720): Vorschaubild weglassen, damit alles ohne Scrollen passt */
@media (min-width: 761px) and (max-height: 800px) { .tz-fig { display: none; } .tz-info { justify-content: center; } }
@keyframes tz-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (max-width: 380px) { .tz-row { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .tz[open] .tz-card { animation: none; } }


/* ═════════════════════════════════════════════════════════════════════
   EINBINDUNG IN DIE WEBSITE
   ═════════════════════════════════════════════════════════════════════

   STUFE-SCHALTER
   Die Seiten enthalten die Buttons fuer beide Stufen bereits:
     .tz-cta  -> nur in Stufe 2 sichtbar (Testzugang wird beworben)
     .tz-s1   -> nur in Stufe 1 sichtbar (Testzugang nur ueber den Direktlink)

   Stufe 1 (jetzt):  in der Zeile unten steht  .tz-cta
   Stufe 2:          das Wort gegen  .tz-s1  tauschen. Sonst nichts.
   Danach im Inkognito-Fenster pruefen (der Browser merkt sich CSS).     */

.tz-cta { display: none !important; }


/* Navigation: ein oder zwei Buttons als Paar */
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-cta .btn-o { border-color: #2E5288; }
.nav-cta .btn-o:hover { border-color: #60A5FA; }

/* Gefuellte und umrandete Buttons gleich hoch */
.nav-cta .btn:not(.btn-o),
.hero-cta .btn:not(.btn-o),
.tz-paar .btn:not(.btn-o) { border: 1px solid transparent; }

/* Mobiles Menue: zweiter Button als Umriss */
.navmenu .nm-cta.nm-o { background: transparent; color: #E8EEF9; border: 1px solid #2E5288; margin-top: 8px; }

/* Buttonpaar am Seitenende */
.tz-paar { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; }

/* Hinweiszeile unter den Hero-Buttons */
.hero-mc { margin: 14px 0 0; font-size: 13px; color: #7688A3; }
.hero-mc + .trust { margin-top: 26px; }

/* Textzeile "Lieber selbst ausprobieren?" */
.tz-zeile { margin: 34px 0 0; text-align: center; font-size: 15px; color: #93A6C2; }
.tz-zeile a { color: #60A5FA; font-weight: 600; text-decoration: none; }
.tz-zeile a:hover { color: #67E8F9; }

/* Navigation zwischen 821 und 960 px: Die Menuelinks sind dort ausgeblendet,
   der Menueknopf erschien bisher aber erst ab 820 px. Wer in dieser Breite
   surfte, kam ueber die Navigation nicht zu den Unterseiten. */
@media (max-width: 960px) {
  .navtoggle { display: flex; }
  .nav-cta { margin-left: auto; }
  .nav-cta + .navtoggle { margin-left: 0; }   /* sonst teilen sich beide den Freiraum */
  .navmenu { top: 70px; }
}
@media (max-width: 820px) {
  .navmenu { top: 56px; }
  .nav-cta { display: none; }
  .nav-cta + .navtoggle { margin-left: auto; }
}

/* Schmale Desktop-Breiten: in Stufe 2 stehen zwei Buttons neben vier Menuepunkten.
   Etwas weniger Innenabstand, damit nichts zweizeilig umbricht. */
@media (min-width: 961px) and (max-width: 1040px) {
  .nav-links { gap: 22px; }
  .nav-cta .btn { padding-left: 16px; padding-right: 16px; }
}