/* Save-Schranke — Aussehen.
   Tokens wie im Rest von SzUM (gemessen an playlines.vexy.art, s. CLAUDE.md).
   Liegt bewusst neben index.html im Template: die Datei wird unverändert ins
   Build kopiert, also lässt sich der Look im Deploy-Ordner ändern, ohne Unity
   anzuwerfen. */

.szg{
  --panel:#1e1e1c;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.13);
  --line-soft:rgba(255,255,255,.07);
  --text:#f4efe5;
  --text-2:#d1c8ba;
  --text-3:#8b8478;
  --accent:#ff0099;
  --accent-line:rgba(255,0,153,.42);
  --bad:#e2624a;
  --warn:#e8a341;
  --r-lg:14px;
  --r-md:8px;
  --ui:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* Eigener Reset, weil die Schranke in einer fremden Seite hängt: ohne
   border-box wächst das Adressfeld (width:100% + Polster + Rahmen) über die
   Kante seines Kastens hinaus. */
.szg, .szg *, .szg *::before, .szg *::after{box-sizing:border-box}

.szg-veil{
  position:fixed; inset:0; z-index:9000;
  background:rgba(10,10,9,.62);
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:auto;
  font-family:var(--ui); font-size:15px; line-height:1.55; color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.szg-veil[hidden]{display:none}

/* min-width:0 ist Pflicht: als Flex-Kind wüchse das Blatt sonst auf die
   min-content-Breite seines Inhalts und liefe im schmalen Fenster rechts raus. */
.szg-sheet{
  width:min(560px,100%); min-width:0;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:0 30px 80px rgba(0,0,0,.6);
  padding:22px 24px 20px; display:flex; flex-direction:column; gap:16px;
}
.szg-sheet h2{margin:0; font-size:21px; font-weight:500; letter-spacing:-.005em; text-wrap:balance}
.szg-sheet p{margin:0}

/* Der Abstand sitzt am Blatt, die Kinder liegen aber eine Ebene tiefer im
   jeweiligen Schirm — ohne diese Zeile klebt im Formular alles aneinander. */
.szg-pane{display:flex; flex-direction:column; gap:16px}

.szg-head{display:flex; align-items:flex-start; gap:14px}
.szg-x{
  margin-left:auto; flex:none; width:28px; height:28px; border-radius:var(--r-md);
  display:grid; place-items:center; color:var(--text-3); font-size:17px; line-height:1;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
}
.szg-x:hover{background:var(--surface); color:var(--text)}

.szg-assurance{
  font-size:13.5px; line-height:1.5; color:var(--text-2);
  border-left:2px solid var(--accent); padding:2px 0 2px 12px;
}
.szg-assurance b{color:var(--text); font-weight:500}

.szg-opt{
  border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:14px 15px;
  display:flex; flex-direction:column; gap:11px; background:rgba(255,255,255,.02);
}
.szg-opt.szg-lead{border-color:var(--line); background:var(--surface)}
.szg-opt-top{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.szg-opt-top .szg-txt{flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:3px}
.szg-eyebrow{font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2)}
.szg-spec{font-size:16px; font-weight:500; letter-spacing:.01em}
.szg-spec .szg-sep{color:var(--text-3); font-weight:400; padding:0 5px}
.szg-why{font-size:13px; color:var(--text-2); line-height:1.45}

.szg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 15px; border-radius:var(--r-md); font-size:14px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  white-space:nowrap; cursor:pointer; font-family:inherit;
}
.szg-btn:hover{background:var(--surface-2)}
.szg-btn:disabled{opacity:.5; cursor:default}
.szg-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500}
.szg-primary:hover:not(:disabled){filter:brightness(1.09)}
/* Der vollbreite Knopf trägt den längsten Text im Dialog; nowrap ließe ihn im
   schmalen Fenster links und rechts aus seiner eigenen Fläche laufen. */
.szg-wide{width:100%; white-space:normal; text-align:center}
.szg-quiet{background:none; border-color:var(--line-soft); color:var(--text-2)}
.szg-quiet:hover{background:var(--surface); color:var(--text)}

.szg-field{display:flex; flex-direction:column; gap:6px}
.szg-field input[type=email]{
  width:100%; padding:10px 12px; border-radius:var(--r-md);
  background:rgba(0,0,0,.28); border:1px solid var(--line); color:var(--text);
  font-family:inherit; font-size:15px;
}
.szg-field input::placeholder{color:var(--text-3)}
.szg-field input:focus{border-color:var(--accent-line); outline:none}

.szg-hint{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--warn); flex-wrap:wrap}
.szg-hint button{
  color:var(--text); background:none; border:0; border-bottom:1px solid var(--text-3);
  padding:0 0 1px; cursor:pointer; font-family:inherit; font-size:inherit;
}
.szg-hint button:hover{border-color:var(--text)}
.szg-err{font-size:12.5px; color:var(--bad)}

.szg-check{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--text-2)}
.szg-check input{margin:3px 0 0; width:15px; height:15px; accent-color:var(--accent); flex:none}
.szg-check a{color:var(--text); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--text-3)}

.szg-foot{font-size:12px; color:var(--text-3); line-height:1.5}
.szg-mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.szg-dim{color:var(--text-3)}

.szg-result{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.szg-result h2{font-size:26px; font-weight:500; letter-spacing:-.01em}
.szg-result p{font-size:15px; line-height:1.6; color:var(--text-2); max-width:56ch}
.szg-lede{color:var(--text) !important; font-size:16px !important}
.szg-head-ok{display:flex; align-items:center; gap:13px}
.szg-mark{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:17px;
}
.szg-mark.ok{background:rgba(143,191,122,.16); border:1px solid rgba(143,191,122,.4); color:#a8d193}
.szg-mark.bad{background:rgba(226,98,74,.14); border:1px solid rgba(226,98,74,.42); color:#f0917c}
.szg-facts{display:flex; flex-direction:column; gap:0; width:100%; border-top:1px solid var(--line-soft); margin:0}
.szg-facts div{
  display:grid; grid-template-columns:minmax(120px,auto) minmax(0,1fr); gap:6px 18px;
  padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px;
}
.szg-facts dt{color:var(--text-3)}
.szg-facts dd{margin:0; color:var(--text-2)}
.szg-rowbtns{display:flex; gap:9px; flex-wrap:wrap}

.szg-veil :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}

@media (prefers-reduced-motion:no-preference){
  .szg-sheet{animation:szg-in .16s ease-out}
  @keyframes szg-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
}