/* Testphase: Banner in der Kopfleiste und Sperrbildschirm (Session B9).

   Eigene Datei und nicht `notarflow.css`, aus demselben Grund wie
   `katalog.css`, `datenblatt.css` und `druck.css`: an der grossen Datei
   arbeiten in jeder Welle mehrere Sessions gleichzeitig, und ein Anbau, der
   fuer sich steht, laesst sich mergen, ohne dass jemand Reihenfolgen aufloest.

   Die Farben kommen aus den Variablen von `notarflow.css` — dort steht die
   Marke, und dort steht auch die Rechnung, warum `--blau` seit dem 21.08.
   #1272DE ist und nicht #1478E8 (WCAG 2.2 AA, 4,68 : 1 auf Weiss). Wer hier
   eine eigene Farbe setzte, umginge `tests/test_kontrast.py`. */

/* ------------------------------------------------ Banner in der Kopfleiste */

/* Bewusst zurueckgenommen und bewusst NICHT rot: sieben Tage Vollzugang sind
   kein Fehlerzustand. Erst wenn es knapp wird, wechselt die Farbe auf `--warn`
   (`.warnt`, gesetzt von `sperre.js` ab TRIAL_WARNUNG_AB Tagen). Ein Banner,
   das von Anfang an alarmiert, wird nach zwei Tagen nicht mehr gelesen. */
.trial-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blau);
  background: var(--panel-tief);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: default;
  -webkit-user-select: text;
  user-select: text;
}
.trial-chip[hidden] { display: none; }
.trial-chip.warnt {
  color: var(--warn);
  background: rgba(180, 84, 10, 0.10);
}

/* ------------------------------------------------------- Sperrbildschirm */

/* Die Seite steht fuer sich: `sperre.html` laedt kein `app.js`, es gibt keine
   Leiste, keine Schublade und keinen Kopf, an dem sich etwas ausrichten
   koennte. Deshalb hier ein eigener Rahmen statt einer Anpassung. */
body.sperre-seite {
  display: block;
  background: var(--panel);
}

.sperre {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.sperre-karte {
  max-width: 520px;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px 36px 32px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(11, 34, 57, 0.08);
}

.sperre-siegel { width: 48px; height: 48px; margin-bottom: 18px; }

.sperre-karte h1 {
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 12px;
}

.sperre-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

/* Die zwei Wege nebeneinander, auf schmalen Fenstern untereinander. Der erste
   ist der gemeinte — er traegt die Flaeche, der zweite nur den Rahmen. */
.sperre-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
/* `.knopf` aus `notarflow.css` ist fuer Knoepfe in einer Spalte gebaut:
   `display: block; width: 100%`. Als Flex-Kind in dieser Reihe wuerde das jeden
   der beiden Wege auf eine eigene Zeile zwingen — nebeneinander stuenden sie
   nie. Deshalb hier die drei Zeilen, die aus dem Spaltenknopf einen Reihenknopf
   machen; die Farben und der Radius bleiben, wo sie hingehoeren. */
.sperre-knopf {
  text-decoration: none;
  display: inline-block;
  width: auto;
  padding: 11px 22px;
  text-align: center;
}
.sperre-knopf[hidden] { display: none; }

/* Die Angaben darunter sind fuer das Telefonat da: wer anruft, liest die
   Seriennummer vor. Deshalb klein, aber auswaehlbar und in Tabellenziffern. */
.sperre-angaben {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  text-align: left;
  font-size: 12.5px;
  margin: 0 0 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.sperre-angaben dt { color: var(--ink-soft); }
.sperre-angaben dd { margin: 0; color: var(--ink); }

.sperre-fuss {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 480px) {
  .sperre-karte { padding: 28px 20px 24px; }
  .sperre-wege { flex-direction: column; }
}