/* === Schriften einbinden === */
@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Archivo Narrow';
  src: url('../fonts/ArchivoNarrow-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bebas';
  src: url('../fonts/Bebas.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Courier Prime (Schreibmaschine) – lokal gehostet, kein externer Request */
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* ===================================================================
   ZENTRALE DESIGN-VARIABLEN
   Farbschema hier ändern -> wirkt auf die ganze Seite.
   =================================================================== */
:root {
  --paper:      #f5f2e8;  /* Hintergrund (warmes Creme) */
  --surface:    #faf8f0;  /* Karten / Eingabefelder     */
  --brand:      #b81818;  /* Rot: Headlines, Links, Rahmen */
  --brand-dark: #8f1212;  /* Rot dunkel: Hover           */
  --ink:        #2b2320;  /* Fließtext (dunkle Tinte)    */
  --muted:      #7a5c54;  /* Gedämpfter Text             */
  --line:       rgba(184, 24, 24, 0.30); /* dünne rote Trennlinien */
}


/* === Basis === */
html {
  background-color: var(--paper);
}

body {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 1.1rem;
  background-color: var(--paper);
  color: var(--ink);
}

/* Headlines: schwere Anton-Schrift in Rot */
h1, h2, h3, .font-heading {
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.03em;
  color: var(--brand);
}

/* Standard-Links */
a {
  color: var(--brand);
}
a:hover {
  color: var(--brand-dark);
}


/* === Fließtext / Beiträge === */
.prose {
  color: var(--ink);
  line-height: 1.7;
}

.prose h2,
.prose h3 {
  color: var(--brand);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose a {
  color: var(--brand);
  text-decoration: underline;
}
.prose a:hover {
  color: var(--brand-dark);
}

.prose img {
  max-width: 100%;
  border-radius: 0.5rem;
}

hr {
  border: none;
  border-top: 1.5px solid var(--line);
  margin: 1.5rem 0;
}


/* === Beitrags-Karten (Flyer-Look: Papier mit rotem Rahmen) === */
article.post {
  background-color: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: 0.75rem;
  padding: 1.5rem;
}