/* Siegelmarke + öffentliche Siegelseite.
   Die Marke wird auch vom Client benutzt, die Seitenklassen nur von der
   server-gerenderten Seite unter /s/<link>. */

/* ============ Siegelmarke ============ */

.sealmark { overflow: visible; }

.sealmark__caption {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
}

/* WIDERRUFEN, ABGELAUFEN, IN PRÜFUNG stoßen bei 15px an den Prüfring. */
.sealmark__caption--long { font-size: 12px; letter-spacing: 0.1em; }

/* Der Prüfring zeichnet sich einmal — er stellt den Prüfvorgang dar,
   der gerade bestätigt wird. Das ist die einzige Bewegung auf der Seite. */
.sealmark--draw .sealmark__ring {
  stroke-dasharray: var(--ring-len);
  stroke-dashoffset: var(--ring-len);
  animation: seal-draw 1100ms var(--ease-out) 120ms forwards;
}

.sealmark--draw .sealmark__glyph,
.sealmark--draw .sealmark__caption {
  opacity: 0;
  animation: seal-appear 500ms var(--ease-out) 780ms forwards;
}

@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@keyframes seal-appear { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* Sofort der Endzustand, kein Nachzeichnen. */
  .sealmark--draw .sealmark__ring { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .sealmark--draw .sealmark__glyph,
  .sealmark--draw .sealmark__caption { opacity: 1; animation: none; }
}

/* ============ Siegelseite ============ */

.sealpage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sealpage__texture {
  position: fixed;
  inset: auto 50% auto auto;
  top: -12vh;
  translate: 50% 0;
  width: min(148vw, 900px);
  z-index: var(--z-texture);
  pointer-events: none;
  /* Zurückhaltend: die Textur soll unter dem Siegel liegen, nicht mit ihm
     konkurrieren. Die Maske hält sie in der Nähe der Marke. */
  opacity: 0.34;
  mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 56%);
}

.sealpage__main {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: var(--page-measure, 640px);
  margin-inline: auto;
  padding: var(--s-7) var(--s-5) var(--s-8);
  flex: 1;
}

/* Kopfzeile als echte Leiste über die volle Breite.

   Vorher saß sie in der schmalen Inhaltsspalte: auf einem breiten Schirm hingen
   Marke und Knopf dann mit 500px Abstand frei im Raum, ohne Kante und ohne
   Fläche, und das las sich nicht als Kopfzeile, sondern als zwei verirrte
   Elemente. Die Leiste spannt jetzt durch, der Inhalt bleibt auf Textbreite. */
.sealpage__brand {
  position: relative;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}

.sealpage__brandinner {
  width: 100%;
  max-width: var(--page-measure, 640px);
  margin-inline: auto;
  padding: var(--s-2) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 62px;
}

/* Die Prüf-Eingabe ist breiter als eine Siegelseite; die Leiste folgt ihr. */
.verifypage { --page-measure: 720px; }

@media (min-width: 560px) {
  .sealpage__brandinner { padding-inline: var(--s-6); }
}

.sealpage__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid var(--control-border);
  border-radius: var(--r-control);
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.sealpage__check:hover { color: var(--ink); border-color: var(--ink-3); }

.sealpage__check-short { display: none; }

@media (max-width: 560px) {
  /* Derselbe Konflikt wie im Client: der Zusatz „Prüfstelle" und der Knopf
     passen nicht nebeneinander. Der Zusatz weicht, die Handlung bleibt. */
  .sealpage__brand .logo__suffix { display: none; }
  .sealpage__check-long { display: none; }
  .sealpage__check-short { display: inline; }
  .sealpage__check { padding-inline: var(--s-3); }
}

/* Vorschau im Geräterahmen: nur der Befund, ohne Seitenrahmen.
   Der Rahmen ist rund 270px breit — dieselben Bausteine, aber auf diese Breite
   gerechnet, sonst schieben die Datumsspalten den Inhalt aus dem Rahmen. */
.sealpage--compact .sealpage__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5) var(--s-4);
  max-width: none;
}

.sealpage--compact .verdict { gap: var(--s-3); }
.sealpage--compact .verdict .sealmark { width: clamp(112px, 52vw, 150px); }
.sealpage--compact .verdict__name { font-size: var(--t-h3); margin-top: 0; }
.sealpage--compact .verdict__claim { font-size: var(--t-body); max-width: 24ch; }
.sealpage--compact .verdict__dates { margin-top: var(--s-3); }
.sealpage--compact .verdict__dates > div { padding: var(--s-3); }
.sealpage--compact .verdict__dates dd { font-size: 0.8rem; }
.sealpage--compact .verdict__dates dt { font-size: 0.625rem; letter-spacing: 0.06em; }

/* ---- Der Befund. Ohne Scrollen, ohne dass jemand ein Wort lesen muss. ---- */

.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}

.verdict .sealmark { width: clamp(168px, 46vw, 224px); height: auto; }

.verdict__name {
  font-size: var(--t-h1);
  letter-spacing: -0.03em;
  margin-top: var(--s-2);
}

.verdict__claim {
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: 30ch;
}

.verdict__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin: var(--s-4) 0 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.verdict__dates > div {
  background: var(--surface);
  padding: var(--s-4);
  text-align: left;
}

.verdict__dates dt { margin-bottom: var(--s-1); }
.verdict__dates dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 0.95rem; }

/* ---- Belege für die, die nachprüfen wollen ---- */

.panel {
  margin-top: var(--s-7);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--surface);
  padding: var(--s-5);
}

.panel > h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
}

.panel--quiet { background: none; border-color: var(--hairline); }

.profiles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.profiles__note { font-size: var(--t-small); color: var(--ink-3); margin-bottom: var(--s-4); }

.profile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--hairline);
  min-height: 44px;
}

.profile:first-child { border-top: 0; padding-top: 0; }

.profile__check { flex: none; width: 22px; height: 22px; color: var(--seal); }

/* Ist das Siegel abgelaufen oder widerrufen, belegen die Profile nichts —
   dann steht dort auch kein bestätigendes Grün. */
.profile__check--muted { color: var(--ink-3); }

.profile__text { min-width: 0; flex: 1; }
.profile__platform { display: block; font-size: var(--t-small); color: var(--ink-3); }
.profile__handle {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.profile__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--control-border);
  border-radius: var(--r-control);
}

.profile__link:hover { color: var(--ink); border-color: var(--ink-3); }

/* Bei einer Nummer gibt es nichts zu öffnen: statt eines Links der Weg, auf dem
   sie geprüft werden kann. */
.profile__hint { flex: none; font-size: var(--t-small); color: var(--ink-3); text-align: right; max-width: 12rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.steps li {
  position: relative;
  padding-left: var(--s-6);
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.steps li:first-child { border-top: 0; }

.steps li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(var(--s-3) + 0.6em);
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--seal);
  border-radius: var(--r-round);
}

.steps b { color: var(--ink); font-weight: 500; display: block; }
.steps span { font-size: var(--t-small); color: var(--ink-3); }

.limits { margin: 0; padding-left: var(--s-5); color: var(--ink-2); }
.limits li { padding-block: var(--s-1); }

.sealpage__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-small);
  color: var(--ink-3);
}

.sealpage__foot a { color: var(--ink-2); }

.notice {
  margin-top: var(--s-5);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--expired);
  border-radius: var(--r-control);
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
  color: var(--ink-2);
  /* Der Befund oben ist zentriert, ein Absatz darf das nicht sein. */
  text-align: left;
}

.notice--pending { border-left-color: var(--pending); }

@media (min-width: 560px) {
  .sealpage__main { padding-inline: var(--s-6); }
  .panel { padding: var(--s-6); }
}


/* ============ Prüf-Eingabe (/pruefen) ============
   Eigene Seite, gleicher Grund wie die Siegelseite: sie richtet sich an
   Kundschaft, nicht an Anbieter:innen, und muss ohne JavaScript funktionieren. */



.verify__head { font-size: var(--t-h2); letter-spacing: -0.028em; }
.verify__lead { margin-top: var(--s-4); color: var(--ink-2); max-width: 60ch; }

.verify__form { margin-top: var(--s-6); }
.verify__label { display: block; font-size: var(--t-small); color: var(--ink-3); margin-bottom: var(--s-2); }
.verify__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.verify__input { flex: 1 1 16rem; max-width: none; font-family: var(--font-mono); }
.verify__hint { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-3); }

.verify__result { margin-top: var(--s-7); display: grid; gap: var(--s-6); }

.verify__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}

.verify__verdict .sealmark { flex: none; width: 108px; height: auto; }
.verify__claim { font-size: var(--t-h3); color: var(--ink); }
.verify__name { margin-top: var(--s-2); color: var(--ink-2); }
.verify__meta { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-3); }

.verify__block h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.verify__note { font-size: var(--t-small); color: var(--ink-3); margin-bottom: var(--s-4); }

.verify__profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.verify__profiles li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}

.verify__platform { font-size: var(--t-small); color: var(--ink-3); min-width: 7rem; }
.verify__profiles .mono { color: var(--ink); }

/* ---- Pflichtseiten (views/legalPages.js) ----
   Etwas breiter als eine Siegelseite, weil hier gelesen wird und nicht geprüft.
   Sonst bewusst ohne eigene Gestaltung: ein Impressum soll nach Text aussehen. */
.legalpage { --page-measure: 760px; }

.legal h1 { margin-bottom: var(--s-2); }
.legal h2 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  font-size: var(--t-h3);
}
.legal p, .legal ul { max-width: 68ch; }
.legal p { margin-block: var(--s-3); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-block: var(--s-2); }
.legal__lead { font-size: var(--t-lead); color: var(--ink-2); }
.legal__note { font-size: var(--t-small); color: var(--ink-3); }
.legal__grid dd { color: var(--ink-2); }