/*
Theme Name: Viertelfotos Münster
Theme URI: https://viertelfotos.muenster.example
Author: Viertelfotos Münster
Author URI: https://viertelfotos.muenster.example
Description: Klassisches WordPress-Theme für einen Viertel-Fotoblog mit interaktiver Karte als Startseite. Nummerierte Pins öffnen Popups und ein Artikel-Panel; dazu eine Linktree-artige Bio-Seite. Screenprint-Optik: Space Mono, Creme + Ink + ein gedämpftes Grün, harte Kanten, Offset-Schatten ohne Blur.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: viertelfotos-muenster
Tags: blog, custom-menu, featured-images, translation-ready

Viertelfotos Münster ist urheberrechtlich geschützt, sofern nicht anders angegeben.
Basiert auf den WordPress-Grundlagen und keinem Elternthema.
*/

/* ==========================================================================
   Design tokens — Quelle: design_system/tokens/*.css aus dem Design-Handoff.
   ========================================================================== */
:root {
  /* Farben */
  --ink: #1e2620;
  --ink-soft: #3a423b;
  --paper: #f4f2ec;
  --paper-2: #e9e6dd;
  --paper-3: #e5e2d8;
  --line: #d8d4c8;
  --night: #171b18;

  --green: oklch(0.62 0.11 150);
  --green-deep: oklch(0.55 0.11 150);
  --green-light: oklch(0.72 0.12 150);
  --amber: oklch(0.62 0.11 60);

  --text-body: var(--ink);
  --text-muted: var(--ink-soft);
  --text-invert: var(--paper);
  --surface-page: var(--paper);
  --surface-canvas: var(--paper-2);
  --surface-card: var(--paper);
  --surface-ink: var(--ink);
  --border-strong: var(--ink);
  --border-hair: var(--line);
  --accent: var(--green);
  --accent-strong: var(--green-deep);
  --link: var(--green);
  --link-hover: var(--amber);

  /* Typo */
  --font-mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --font-body: var(--font-mono);
  --font-display: var(--font-mono);
  --fw-regular: 400;
  --fw-bold: 700;
  --fs-hero: 34px;
  --fs-title: 24px;
  --fs-h: 20px;
  --fs-lead: 17px;
  --fs-body: 13px;
  --fs-small: 12px;
  --fs-kicker: 11px;
  --lh-tight: 1.25;
  --lh-body: 1.7;
  --ls-title: -0.5px;
  --ls-kicker: 2.5px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;
  --sp-7: 40px;
  --sp-8: 48px;
  --radius-none: 0px;
  --radius-sm: 1px;
  --radius-pill: 999px;
  --border-w: 2px;

  /* Effects */
  --shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.18);
  --shadow-md: 5px 5px 0 rgba(0, 0, 0, 0.20);
  --shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.18);
  --shadow-xl: 8px 8px 0 rgba(0, 0, 0, 0.15);
  --divider-dashed: 2px dashed var(--line);
  --lift: translate(-2px, -2px);
  --blend-stamp: multiply;
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

button, input, textarea {
  font-family: inherit;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Kicker / labels, gemeinsam genutzt in mehreren Templates */
.vf-kicker {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent);
}

.vf-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  padding: 10px 16px;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease, background-color .1s ease, color .1s ease;
}
.vf-btn:hover { transform: var(--lift); color: var(--ink); }
.vf-btn--solid { background: var(--ink); color: var(--paper); }
.vf-btn--solid:hover { color: var(--paper); }

/* Topbar, ausgegeben von header.php auf jeder Seite außer der Kartenseite */
.vf-single-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--paper);
  border-bottom: var(--border-w) solid var(--ink);
  padding: 14px 22px;
}
.vf-single-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.vf-single-topbar__brand:hover { color: var(--ink); }
.vf-single-topbar__brand .dot { color: var(--accent); }
.vf-single-topbar a.vf-back { font-size: var(--fs-small); }