/* =================================================================
   portviervierdrei — SCHRIFTEN, LOKAL

   Fünf Familien, fünf Rollen. Alle Dateien liegen unter
   assets/fonts/ im Projekt; es geht keine Anfrage nach draussen.

   1 NEWSREADER        Marke / Editorial / Projektidentität
   2 SCHIBSTED GROTESK Display / Architektur / grosse Aussagen
   3 SOURCE SANS 3     Body / Lesetext / sachliche Information
   4 RAJDHANI          Navigation / UI / Buttons / Orientierung
   5 IBM PLEX MONO     Technik / System / echte digitale Zustände

   Drei der fünf sind Variable Fonts. Das ist hier kein Selbstzweck:
   bei Source Sans waeren drei statische Schnitte zusammen groesser als
   die eine variable Datei, und Newsreader bringt neben der Staerke eine
   opsz-Achse mit — damit waehlt der Browser fuer jede Schriftgroesse den
   richtigen optischen Schnitt.

   IBM Plex Mono und Rajdhani liegen nur statisch vor — dort werden
   ausschliesslich die Schnitte registriert, die die Rollen wirklich
   brauchen. Nicht registrierte Dateien werden nie geladen.

   Format ist TTF, weil das die bereitgestellte lokale Quelle ist.
   ================================================================= */

/* --- DISPLAY: Schibsted Grotesk ----------------------------------
   Nur die grossen Momente und die Kapitelzeilen. */
@font-face {
  font-family: 'PV Schibsted';
  src: url('../assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* --- INFORMATION: Source Sans 3 ----------------------------------
   Alles, was erklaert: der Lesetext der Website. */
@font-face {
  font-family: 'PV Source';
  src: url('../assets/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PV Source';
  src: url('../assets/fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* --- REDAKTION: Newsreader ---------------------------------------
   Die Projektnamen, der Wordmark und die Stimme des Kunden im
   Briefentwurf. */
@font-face {
  font-family: 'PV Newsreader';
  src: url('../assets/fonts/Newsreader/Newsreader-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PV Newsreader';
  src: url('../assets/fonts/Newsreader/Newsreader-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* --- BEDIENUNG: Rajdhani -----------------------------------------
   Die Interface-Stimme: Navigation, Buttons, Controls, Rails,
   Formular-Labels. Statisch; nur die drei gebrauchten Schnitte. */
@font-face {
  font-family: 'PV Rajdhani';
  src: url('../assets/fonts/Rajdhani/Rajdhani-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PV Rajdhani';
  src: url('../assets/fonts/Rajdhani/Rajdhani-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PV Rajdhani';
  src: url('../assets/fonts/Rajdhani/Rajdhani-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- NAVIGATION: JetBrains Mono ----------------------------------
   Die digitale Stimme der Navigation (Buchstaben). Die ZAHLEN der
   Orientierung bleiben bewusst IBM Plex Mono — deren Ziffernbild
   ist gesetzt. Variable Font, eine Datei, lokal. */
@font-face {
  font-family: 'PV JetBrains';
  src: url('../assets/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --- TECHNIK: IBM Plex Mono --------------------------------------
   Ports, Zustaende, Zaehler, Adressen. Sonst nichts. */
@font-face {
  font-family: 'PV Plex Mono';
  src: url('../assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PV Plex Mono';
  src: url('../assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =================================================================
   ROLLEN — nur auf den oeffentlichen Seiten (.pv-public).
   Studio traegt die Klasse nicht und behaelt seine Schriften.
   Eingebettete Kundenwebsites laufen in iframes — dorthin leakt
   keine dieser Regeln.
   ================================================================= */
.pv-public {
  --font-display:   'PV Schibsted', 'Instrument Sans', system-ui, sans-serif;
  --font-text:      'PV Source', 'Instrument Sans', system-ui, sans-serif;
  --font-editorial: 'PV Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui:        'PV Rajdhani', 'Instrument Sans', system-ui, sans-serif;
  --font-system:    'PV Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-nav:       'PV JetBrains', 'PV Plex Mono', ui-monospace, monospace;

  /* Die bestehenden Marken-Token zeigen auf die neuen Familien.
     Das allein reicht aber nicht — die Rollen darunter machen die
     eigentliche Arbeit. */
  --pv-display: var(--font-display);
  --pv-sans:    var(--font-text);
  --pv-accent:  var(--font-editorial);
  --pv-mono:    var(--font-system);

  /* Keine Browser-Fake-Bolds/-Italics: es gibt nur echte Schnitte. */
  font-synthesis: none;
}

/* --- Schibsted ist breiter als die alte Grotesk. Ohne Nachjustierung
   waeren die Markenzeilen laenger und wuerden anders umbrechen; die
   Buehnen sind aber gesperrt. Also enger stellen. -------------------- */
.pv-public .pv-display,
.pv-public .px-h1,
.pv-public .wh__h1 { letter-spacing: -.032em; }
.pv-public .pv-hero .pv-display { letter-spacing: -.036em; }
/* Der Textkasten war in ch bemessen. Source Sans hat eine schmalere
   Null als die alte Grotesk — der Kasten wird schriftunabhaengig
   gemessen. */
.pv-public .pv-hero__text { max-width: 30em; }
/* Newsreader braucht optische Groessen — dafuer ist die opsz-Achse da. */
.pv-public { font-optical-sizing: auto; }

/* =================================================================
   ROLLE REDAKTION — Marke, Projektnamen, Briefstimme
   ================================================================= */
.pv-public .px-case__title,
.pv-public .px-case__title a,
.pv-public .px-room__title {
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: -.012em;
}
/* Die Wortmarke laeuft ueber die Tech-Schrift des Neon-Logos —
   Registrierung und Regel liegen in portal.css, damit auch
   studio.html (laedt fonts.css nicht) die Marke traegt. */
/* Die Nachricht, die der Kunde schreibt, ist seine Stimme. */
.pv-public .px-doc__val { font-family: var(--font-editorial); }

/* =================================================================
   ROLLE DISPLAY — die grossen Aussagen und die Leistungsnamen
   (Leistungsnamen sind Inhalte, keine Buttons.)
   ================================================================= */
.pv-public .pv-cards h3,
.pv-public .sy__name,
.pv-public .lg__n,
.fp-start.pv-public .lg__n {
  font-family: var(--font-display);
  font-weight: 500;
}
/* Der Formularkopf „Ihre Nachricht" ist eine Section-Aussage. */
.pv-public .px-h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.012em; }

/* =================================================================
   ROLLE INFORMATION — was erklaert, ist Source Sans
   ================================================================= */
.pv-public .px-story p,
.pv-public .fp-field input,
.pv-public .fp-field textarea,
.pv-public .px-field input,
.pv-public .px-field textarea {
  font-family: var(--font-text);
}

/* =================================================================
   ROLLE BEDIENUNG — Rajdhani: Navigation, Buttons, Controls,
   Rails, Labels. Zahl und Wort gehoeren derselben Familie an.
   ================================================================= */
/* Kopfzeile: die GESAMTE Navigation als digitale Terminal-Schrift
   (Plex Mono) — Navigation und Orientierung sind die digitale Note
   des Hauses; Buttons und Inhalte bleiben in ihren Rollen. */
.pv-public .pv-nav a {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 13px;
}
.pv-public .pv-nav a::before {
  font-family: var(--font-system);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
/* Buttons und Controls */
.pv-public .pv-btn,
.pv-public .fp-btn-block,
.pv-public .px-submit,
.pv-public .fp-submit,
.pv-public .pv-foot__base button,
.pv-public .sy__reset,
.pv-public .px-devs button,
.pv-public .px-win__live,
.pv-public .px-chip {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .02em;
}
/* Navigations-Links (fuehren irgendwohin): digitale Schrift */
.pv-public .pv-alink,
.pv-public .px-case__link,
.pv-public .px-room__link {
  font-family: var(--font-nav);
  font-weight: 500;
  letter-spacing: .01em;
  font-size: 13.5px;
}
/* Rechte Projektnavigation auf Arbeiten: komplett digital */
.pv-public .pv-prog a,
.pv-public .pv-prog a span,
.pv-public .pv-legend b {
  font-family: var(--font-nav);
  font-weight: 500;
}
.pv-public .pv-prog a b,
.pv-public .pv-legend em {
  font-family: var(--font-system);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
/* Routen-/Kapitelmarker („02 — Arbeiten") und Scrollcue: digital */
.pv-public .pv-route,
.pv-public .pv-scrollcue,
.pv-public .px-kicker {
  font-family: var(--font-nav);
  font-weight: 500;
  letter-spacing: .08em;
}
.pv-public .pv-route b {
  font-family: var(--font-system);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
/* Nummern der Leistungs-/Kartenlisten: digitale Terminal-Ziffern
   (die .fp-start-Varianten schlagen die spaeter geladenen
   Inline-Styles der Startseite) */
.pv-public .pv-card__nr,
.fp-start.pv-public .pv-card__nr,
.pv-public .lg__nr,
.fp-start.pv-public .lg__nr,
.pv-public .sy__nr,
.pv-public .sw__nr {
  font-family: var(--font-system);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}
/* Raum-Marker sind Orientierung — digital; die Status-Badge
   („Echt im Einsatz") bleibt UI. */
.pv-public .px-room__nr {
  font-family: var(--font-nav);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.pv-public .px-room__badge {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .08em;
}
/* Schalter-Leiste im Systemmodul: das sind Controls */
.pv-public .sw__lab {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .02em;
}
/* Editoriale Micro-Labels: Ausgangslage / Idee & Loesung */
.pv-public .px-story b {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
}
/* Formular-UI: Labels, Chips, Briefkopf-Zeilen */
.pv-public .fp-field label,
.pv-public .px-f__lab,
.pv-public .px-field label,
.pv-public .px-room2 .px-field label,
.pv-public .px-doc__key,
.pv-public .px-room2 .px-doc__key,
.pv-public .px-doc__title,
.pv-public .px-doc__state,
.pv-public .px-direct__label {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .04em;
}
/* Fusszeile: Kategorien und Navigationslinks — auch das ist
   Navigation, also digital. „Nach oben" ebenso. */
.pv-public .pv-foot h4 {
  font-family: var(--font-nav);
  font-weight: 500;
  letter-spacing: .04em;
}
.pv-public .pv-foot__col a,
.pv-public .pv-foot__direct a,
.pv-public .pv-foot__base button,
.pv-public .u-skip-link {
  font-family: var(--font-nav);
  font-weight: 400;
  letter-spacing: .02em;
}
/* Mono laeuft breiter: Nav-Groessen je Leistenbreite. */
@media (max-width: 980px) { .pv-public .pv-nav a { font-size: 11.5px; } }
@media (max-width: 620px) { .pv-public .pv-nav a { font-size: 10.5px; } }
.pv-public .px-devs button { font-size: 12px; }

/* =================================================================
   ROLLE TECHNIK — Mono bleibt, wo wirklich Technik steht
   ================================================================= */
.pv-public .pv-hero .pv-kick {
  font-family: var(--font-system);
  font-weight: 400;
  letter-spacing: .1em;
}
.pv-public a[href^="mailto:"],
.pv-public .px-mail,
.pv-public .fp-contact__mail { font-family: var(--font-system); }
/* Die Browser-Adresszeile der Projektfenster ist eine technische
   Kennung — portviervierdrei-UI, nicht Kundenwebsite. */
.pv-public .px-win__url { font-family: var(--font-system); }

/* Das Routenwort ist Navigation, keine Auszeichnung. */
.pv-public .pv-route { font-weight: 600; }

/* --- Die Alt-Namen mitnehmen --------------------------------------
   portal.css biegt die Bestands-Tokens auf die Marken-Tokens um:
   `--fp-font: var(--pv-sans)` — aber auf :root (<html>), waehrend die
   neuen Familien erst auf .pv-public (<body>) gelten. Custom
   Properties werden dort aufgeloest, wo sie DEKLARIERT werden; also
   dieselbe Umbiegung noch einmal, eine Ebene tiefer. */
.pv-public {
  --fp-font: var(--font-text);
  --fp-mono: var(--font-system);
}