/*
Theme Name: Tribune Industries
Theme URI: https://tribuneindustries.com/
Author: claude-admin
Description: Papier & Lorbeer — helles, editoriales Block-Theme fuer das Haus Tribune Industries. Newsreader und Source Sans 3 selbst gehostet, Lorbeer als einziger Akzent. Gestaltung liegt in theme.json; hier steht nur, was Bloecke nicht koennen.
Version: 1.0.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tribune-industries
Tags: block-theme, full-site-editing, editorial, light
*/

/* ⚠ DIE VERSIONSNUMMER OBEN IST KEIN SCHMUCK.
   WordPress legt die aus den Pattern-Dateien gelesenen Bausteine in einem
   Zwischenspeicher ab, der an die THEME-VERSION gebunden ist. Wer eine Datei
   unter patterns/ aendert und die Version stehen laesst, laedt zwar die neue
   Datei hoch — ausgeliefert wird aber weiter die alte, ohne jede Fehlermeldung.
   Gemessen am 21.09.2026: Serverdatei byte-gleich neu, registriertes Pattern
   noch alt. Also: JEDE Aenderung an patterns/ oder parts/ hebt die Version.

   ═══════════════════════════════════════════════════════════════════════════
   Was NICHT hier steht: Farben, Schriften, Abstaende, Raster.
   Das liegt vollstaendig in theme.json — eine Stelle, im Editor sichtbar.
   Hier stehen nur die vier Dinge, die der Blockeditor nicht abbilden kann
   und die den Charakter der Seite tragen.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { color-scheme: light; }

/* Kein Dunkelmodus: die Gestaltung IST das helle Papier. Ohne diese Zeile
   invertieren manche Browser von sich aus und zerlegen die Palette. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
::selection { background: var(--wp--preset--color--lorbeer); color: var(--wp--preset--color--papier); }

/* ── 1 · Die atmende On-Air-Lampe ───────────────────────────────────────────
   Das einzige bewegte Element der Seite. Sechs Sekunden, weich — keine
   Konsole, kein Blinken; die erste dunkle Fassung wurde genau dafuer
   verworfen ("schaut nach: AI hat das gebaut").
   ⚠ Untergrenze nicht unter 0.45: darunter verschwindet der Punkt auf dem
     hellen Papier ganz, und ein Standbild zeigt eine Seite ohne Anzeige. */
.ti-onair { display: inline-flex; align-items: center; gap: 9px;
  font-weight: 500; font-size: .9rem; color: var(--wp--preset--color--nebel); }
.ti-lampe { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--wp--preset--color--lorbeer); animation: ti-atmen 6s ease-in-out infinite; }
@keyframes ti-atmen { 0%,100% { opacity: .45 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ti-lampe { animation: none; opacity: .85 } }

/* Der Markenpunkt ist Teil der MARKE, nicht Satzzeichen. Bei Textgroesse
   waere er ~2px und bestuende fast nur aus Antialiasing — gemessen am
   21.09.: hellster Kern rgb(72,107,100) statt rgb(47,93,74). Deshalb groesser. */
.ti-punkt { color: var(--wp--preset--color--lorbeer); font-size: 1.45em;
  line-height: 0; vertical-align: baseline; }

/* ── 2 · Koernung ueber den Bildern ─────────────────────────────────────────
   Nimmt den Bildern das Glatte, Gerenderte. Inline-SVG statt Bilddatei:
   nichts nachzuladen, nichts das brechen kann. */
.ti-koern { position: relative; }
.ti-koern::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .06; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ti-bild { border-radius: 14px; overflow: hidden;
  box-shadow: var(--wp--preset--shadow--weich);
  border: 1px solid var(--wp--preset--color--haarlinie); }
.ti-bildtext { position: absolute; left: 16px; bottom: 14px;
  font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: .9rem;
  color: rgba(251,249,245,.9); text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* ── 3 · Formatkarten mit Fluestertext ──────────────────────────────────────
   Beim Ueberfahren klappt ein Satz auf, der die Karte zuspitzt. Reines CSS,
   kein Skript. Auf Beruehrgeraeten gibt es kein Hover — dort steht der Satz
   deshalb dauerhaft, statt unerreichbar zu sein. */
.ti-karte { background: var(--wp--preset--color--papier);
  border: 1px solid var(--wp--preset--color--haarlinie); border-radius: 16px;
  overflow: hidden; box-shadow: var(--wp--preset--shadow--weich);
  display: flex; flex-direction: column; height: 100%;
  transition: box-shadow .25s, transform .25s; }
.ti-karte:hover, .ti-karte:focus-within {
  box-shadow: var(--wp--preset--shadow--hoch); transform: translateY(-3px); }
.ti-karte img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.ti-karte:hover img { transform: scale(1.03); }
.ti-fluester { color: var(--wp--preset--color--tinte); font-style: italic;
  font-family: var(--wp--preset--font-family--serif); font-size: 1rem;
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height .35s ease, opacity .3s, margin .35s; }
.ti-karte:hover .ti-fluester, .ti-karte:focus-within .ti-fluester {
  max-height: 4em; opacity: 1; margin-top: 12px; }
@media (hover: none) {
  .ti-fluester { max-height: none; opacity: 1; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ti-karte, .ti-karte img, .ti-fluester { transition: none; }
  .ti-karte:hover { transform: none; }
}

/* ── 4 · Sprungleiste mit mitlaufender Markierung ───────────────────────────
   Zeigt, wo man im Text steht. Der IntersectionObserver dafuer sitzt in
   assets/sprungleiste.js — 30 Zeilen, kein Framework. */
.ti-sprung { position: sticky; top: 0; z-index: 30;
  background: rgba(251,249,245,.9); backdrop-filter: blur(8px);
  border-top: 1px solid var(--wp--preset--color--haarlinie);
  border-bottom: 1px solid var(--wp--preset--color--haarlinie); }
.ti-sprung ul { display: flex; gap: 30px; overflow-x: auto; list-style: none;
  margin: 0 auto; padding: 0 32px; max-width: 1180px; }
.ti-sprung a { display: block; font-weight: 600; font-size: .9rem;
  color: var(--wp--preset--color--nebel); padding: 15px 0; white-space: nowrap;
  border-bottom: 2px solid transparent; text-decoration: none; }
.ti-sprung a:hover { color: var(--wp--preset--color--tinte); }
.ti-sprung a[aria-current="true"] { color: var(--wp--preset--color--lorbeer);
  border-bottom-color: var(--wp--preset--color--lorbeer); }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.ti-kopf { position: sticky; top: 0; z-index: 40;
  background: rgba(251,249,245,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--haarlinie); }
.ti-marke { font-family: var(--wp--preset--font-family--serif); font-weight: 500;
  font-size: 1.32rem; color: var(--wp--preset--color--tinte); text-decoration: none; }

/* ── Kennzahlen: Hairline-Raster statt Kaesten ──────────────────────────── */
.ti-fakten { border: 1px solid var(--wp--preset--color--haarlinie);
  border-radius: 14px; overflow: hidden; background: var(--wp--preset--color--haarlinie);
  gap: 1px !important; }
.ti-fakt { background: var(--wp--preset--color--papier); padding: 38px 30px; margin: 0 !important; }
.ti-zahl { font-family: var(--wp--preset--font-family--serif); font-weight: 500;
  font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--tinte); }

/* ── Einblicke: Lorbeer-Strich statt Kasten ─────────────────────────────── */
.ti-einblick { padding-top: 24px; border-top: 2px solid var(--wp--preset--color--lorbeer); }

/* ── Zitat: Linien oben und unten, keine Anfuehrungszeichen ─────────────── */
.ti-zitat { font-family: var(--wp--preset--font-family--serif); font-style: italic;
  font-weight: 400; line-height: 1.28; max-width: 24ch; margin: 0 auto; text-align: center;
  padding: 44px 0;
  border-top: 1px solid var(--wp--preset--color--haarlinie);
  border-bottom: 1px solid var(--wp--preset--color--haarlinie); }
.ti-zitat b { color: var(--wp--preset--color--lorbeer); font-weight: 500; font-style: normal; }

/* ── Fusszeile ──────────────────────────────────────────────────────────── */
.ti-fuss { background: var(--wp--preset--color--tinte); color: #D8DAD3; }
.ti-fuss a { color: #D8DAD3; text-decoration: none; }
.ti-fuss a:hover { color: #9FC3B2; }
.ti-fuss .ti-punkt { color: #6FBF97; }
.ti-fuss .ti-lampe { background: #6FBF97; }

/* Seitenrand: 32px wie im Entwurf, auf dem Telefon 16px */
body { --ti-rand: 32px; }
@media (max-width: 600px) { body { --ti-rand: 16px; } }
.ti-rand { padding-left: var(--ti-rand); padding-right: var(--ti-rand); }