/* Planbild, Gestaltungssystem v1 (Oktober 2026), Fassung für die App.
 * Quelle: Service/Marke_Planbild/system/planbild.css und tokens.json. Erst dort ändern, dann hier.
 * Eine Schrift, zwei Farben, ein Baustein: das Feld.
 * Umrandetes Feld = Plan (Angabe), gefülltes Feld = Bild (das Wichtigste, höchstens eines pro Fläche).
 * Keine Akzentfarbe, kein Schatten, kein Verlauf. Schrift selbst ausgeliefert, nicht über Google. */

@font-face {
  font-family: "Host Grotesk";
  src: url("schrift/HostGrotesk-Variable.woff") format("woff");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben: Tinte und Papier. Grau nur zum Abstufen, nie als Markenfarbe. */
  --pb-tinte: #141414;
  --pb-papier: #ffffff;
  --pb-grau-1: #f4f4f4;   /* Flächen */
  --pb-grau-2: #d8d8d8;   /* Linien, Platzhalter */
  --pb-grau-3: #707070;   /* Nebentext, 4.9:1 auf Weiss */
  --pb-grau-4: #3c3c3c;   /* dunkler Grund, wo Bilder beurteilt werden */

  /* Dunkle 3D-Flächen («3D begehen», «3D erkunden», Lightbox): Tinte als Grund, Weiss darauf.
     Geprüft: #fff auf #0e0f10 = 18,6:1; rgba(255,255,255,.78) auf #0e0f10 ≈ 10:1 (Text ≥ 4.5:1). */
  --pb-nacht: #0e0f10;
  --pb-nacht-schleier: rgba(14, 15, 16, .55);     /* Kopfzeile über der Szene */
  --pb-nacht-schleier-2: rgba(14, 15, 16, .42);   /* Pause-Karte über der Szene */
  --pb-nacht-schleier-3: rgba(14, 15, 16, .2);    /* Telefon-Knüppel */
  --pb-weiss: #ffffff;
  --pb-weiss-85: rgba(255, 255, 255, .85);
  --pb-weiss-78: rgba(255, 255, 255, .78);
  --pb-weiss-70: rgba(255, 255, 255, .7);
  --pb-weiss-50: rgba(255, 255, 255, .5);
  --pb-weiss-25: rgba(255, 255, 255, .25);

  /* Schrift */
  --pb-schrift: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pb-normal: 400;
  --pb-medium: 500;

  /* Vier Grössen, App (tokens.json app_px): */
  --pb-titel: 32px;          --pb-titel-zeile: 40px;
  --pb-zwischentitel: 20px;  --pb-zwischentitel-zeile: 28px;
  --pb-lauftext: 16px;       --pb-lauftext-zeile: 24px;
  --pb-bezeichnung: 12px;    --pb-bezeichnung-zeile: 16px;   /* Versalien, Laufweite +12 % */
  --pb-sperrung-bez: 0.12em;
  --pb-sperrung-titel: -0.015em;

  /* Raster 8 px */
  --pb-1: 8px; --pb-2: 16px; --pb-3: 24px; --pb-4: 32px; --pb-5: 40px;
  --pb-6: 48px; --pb-8: 64px; --pb-10: 80px; --pb-12: 96px; --pb-16: 128px;

  /* Feld */
  --pb-feld-h: 48px;          /* Knopf, Eingabe */
  --pb-feld-h-klein: 24px;    /* Status, Angabe */
  --pb-rahmen: 1px;

  /* Seitenrand und Rinne */
  --pb-rand: 16px;
  --pb-rinne: 24px;
  --pb-breite-max: 1440px;
  --pb-satz-max: 38rem;

  /* Bewegung: eine Kurve, eine Dauer für Antworten auf eine Handlung. Szenenwechsel sind der eine längere Moment. */
  --pb-kurve: cubic-bezier(.65, 0, .35, 1);
  --pb-dauer: 180ms;
  --pb-szene: 500ms;

  /* Typeform-Frage: einzige Grösse über den vier App-Stufen (Web-Titel 48/52) */
  --pb-frage: 48px;          --pb-frage-zeile: 52px;
}
/* Keine Fehlerfarbe: Fehler tragen das gefüllte Feld «Fehler» (Bezeichnung statt Farbe, Marke v1 und WCAG 1.4.1). */
@media (min-width: 768px)  { :root { --pb-rand: 32px; } }
@media (min-width: 1440px) { :root { --pb-rand: 48px; } }