/* HumanTrustSeal — Design-Tokens und Basis.
   Einzige Quelle der Wahrheit für Farbe, Schrift, Radien, Rhythmus.
   Wird sowohl von der server-gerenderten Siegelseite als auch vom
   Vite-Client geladen. Werte und Begründungen: DESIGN.md. */

@import url('/fonts/fonts.css');

:root {
  /* ---- Fläche und Schrift (DESIGN.md · Palette) ----
     Blaustichige Tiefe statt neutralem Schwarz: ein Ton (258), niedrige
     Sättigung. Die Fläche soll kühl wirken, nicht bunt — und nicht so hart
     wie reines Schwarz, das bei 18:1 gegen weißen Text kantet.
     Alle Werte gegen WCAG 2.2 gerechnet, siehe DESIGN.md · Accessibility. */
  --bg: oklch(0.185 0.020 258);
  --surface: oklch(0.228 0.024 258);
  --raised: oklch(0.272 0.026 258);
  --hairline: oklch(0.345 0.024 258);
  --control-border: oklch(0.545 0.022 258);
  --ink: oklch(0.975 0.004 258);
  --ink-2: oklch(0.830 0.014 258);
  --ink-3: oklch(0.700 0.016 258);

  /* ---- Signalfarbe. Rationiert: nur bestätigte Echtheit ----
     Bleibt Mint. Blau ist jetzt die Fläche — wäre es auch der Akzent, hätte
     die Prüfstelle den Bank-Look, den DESIGN.md ausdrücklich ausschließt. */
  --seal: oklch(0.820 0.130 172);

  /* Mint der Marke — nicht dasselbe wie --seal.

     Als Hex und nicht in OKLCH, weil es kein gestalteter Schritt der Palette
     ist, sondern ein **gemessener Wert aus dem gelieferten Logo**: die
     deckendsten Pixel des Schilds ergeben #63d7b1, die der alten Wortmarke
     #59d0a6. --seal ist mit #57dfba heller und kühler; damit gesetzt stand die
     Wortmarke in einem anderen Grün als das Schild direkt daneben, und genau
     das sah nach Fremdkörper aus. Der Signalfarbe der Siegelmarke darf man
     nicht die Aufgabe der Markenfarbe geben. */
  --brand-mint: #63d7b1;
  --seal-deep: oklch(0.580 0.105 172);

  /* ---- Statusfarben, keine Markenfarben ---- */
  --expired: oklch(0.720 0.150 32);
  --pending: oklch(0.840 0.130 82);

  /* ---- Schrift ---- */
  --font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Skala mit durchgehend ≥1.24 zwischen den Stufen. Die vorige Fassung hatte
     zwischen Fließtext-Lead und h3 nur 1.10 — zwei Stufen, die gleich aussehen,
     sind keine Hierarchie, sondern eine unentschiedene. */
  --t-label: 0.75rem;
  --t-small: 0.8125rem;
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --t-h3: clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --t-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.375rem);
  --t-h1: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);
  --t-display: clamp(2.5rem, 1.55rem + 4.6vw, 4.5rem);

  --lh-tight: 1.06;
  --lh-head: 1.16;
  --lh-body: 1.65; /* auf dunklem Grund +0.05 gegenüber hellem Layout */

  /* ---- Rhythmus ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: clamp(3rem, 2rem + 4vw, 5rem);
  --s-section: clamp(4.5rem, 3rem + 7vw, 8.5rem);

  --container: 1180px;
  --measure: 68ch;

  /* ---- Form. Genau drei Radien, sonst keine (DESIGN.md · Shape) ---- */
  --r-control: 6px;
  --r-surface: 12px;
  --r-round: 50%;

  /* ---- Z-Index als benannte Skala ---- */
  --z-base: 0;
  --z-texture: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 500;
  --z-toast: 900;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;   /* Zustandswechsel an Bedienelementen */
  --dur-mid: 460ms;    /* Eintritt einzelner Elemente */
  --dur-slow: 1100ms;  /* der Prüfring auf dem Siegel */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

p, li { text-wrap: pretty; }
p { margin: 0; }

a { color: var(--ink); text-decoration-color: var(--control-border); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--seal); }

/* Fokusring: 2px in --seal, 2px Abstand. Wird nirgends entfernt. */
:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

::selection { background: var(--seal-deep); color: var(--ink); }

img, svg { display: block; max-width: 100%; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.measure { max-width: var(--measure); }

.label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- Marke (shared/logo.js) ----
   Stempel und Wortmarke sitzen auf einer gemeinsamen Grundlinie. Die Marke ist
   das einzige Element außerhalb des Prüfstatus, das die Signalfarbe tragen
   darf — sie ist der Absender der Prüfung. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink);
  text-decoration: none;
}

/* Trefferfläche nur, wo die Marke auch anklickbar ist — im Fuß steht sie
   als Absender und soll dort keine 44px Höhe beanspruchen. */
a.logo { min-height: 44px; }

/* Höhe steuert die Marke, Breite ergibt sich — das Seitenverhältnis steht
   als width/height am <img>, damit beim Laden nichts springt. */
.logo__mark { flex: none; width: auto; height: 28px; }

/* Die Wortmarke ist Text (shared/logo.js). Sie wächst mit der Breite, weil
   „HumanTrustSeal" 14 Zeichen hat: auf einem schmalen Gerät muss sie neben
   Schild und Menü Platz finden, auf einem breiten darf sie die Größe der alten
   Bildmarke erreichen (20px). `nowrap`, weil ein umbrochener Markenname keine
   Marke mehr ist. */
.logo__word {
  flex: none;
  /* Eigene Schrift, nicht die der Seite — Begründung in fonts.css. Mit der
     Textschrift der Seite gesetzt war der Name Text und keine Marke. */
  font-family: 'Wordmark', var(--font-sans);
  /* Größe ist gemessen, nicht geschätzt: die alte Bildmarke war auf der Seite
     20px hoch neben einem 28px-Schild. Plus Jakarta Sans hat eine Versalhöhe
     von 0.78em, also braucht es 25.6px Schriftgrad für dieselben 20px Tinte —
     dann sitzt die Wortmarke im selben Verhältnis zum Schild wie vorher.
     Nach unten skaliert sie mit, weil „HumanTrustSeal" bei 20px Tinte 199px
     breit ist und das auf einem schmalen Gerät nicht neben den Prüfknopf passt. */
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.008em;
  line-height: 1;
  white-space: nowrap;
}

/* „Human" trägt das Mint der Marke, der Rest erbt --ink von .logo. */
.logo__word-lead { color: var(--brand-mint); }

.logo__suffix { padding-left: var(--s-1); }

/* Marke mit Tagline darunter (Fußzeile). */
.logo-block { display: inline-flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.logo__tagline { color: var(--ink-3); }

a.logo:hover .logo__word { opacity: 0.82; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Bewegung ----
   Zwei Arten, beide begründet:

   1. `enter-*` beim Laden: eine einzige, gestaffelte Eröffnung im Hero. Sie
      führt das Auge in der Leserichtung, statt alles gleichzeitig hinzuwerfen.
   2. `rise` beim Scrollen: verschiebt nur die Position, nie die Deckkraft.
      Das ist Absicht. Ein Aufblenden über Deckkraft bedeutet, dass Inhalt
      unsichtbar beginnt — in einem Screenshot-Renderer, in einem inaktiven Tab
      oder wenn die Animation nie feuert, bleibt der Abschnitt dann leer.
      Verschiebung ist der Effekt, den man risikolos haben kann.

   Umgesetzt mit scroll-getriebenen CSS-Animationen: kein Scroll-Listener, kein
   JavaScript, nichts, was auf der Siegelseite ein Bundle bräuchte. */

.enter { animation: enter-up var(--dur-mid) var(--ease-out) both; }
.enter-2 { animation-delay: 90ms; }
.enter-3 { animation-delay: 180ms; }
.enter-4 { animation-delay: 260ms; }

@keyframes enter-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes rise-in {
      from { transform: translateY(18px); }
      to { transform: none; }
    }
  }
}

/* Wer Bewegung abschaltet, bekommt sofort den Endzustand. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .enter { animation: none; }
}