/* ==========================================================================
   artinfo24 – Styleguide
   Design-Tokens (Farben, Typografie) für alle künftigen Templates.
   Alle Schriften sind lokal eingebunden (@font-face) - kein Google Fonts CDN,
   keine Datenübertragung an Drittanbieter beim Seitenaufruf.

   Ordnerstruktur, die dieses CSS erwartet (relativ zu dieser Datei):
   /fonts/oswald/oswald-latin-500-normal.woff2
   /fonts/oswald/oswald-latin-600-normal.woff2
   /fonts/bitter/bitter-latin-600-normal.woff2
   /fonts/lora/lora-latin-400-normal.woff2
   /fonts/lora/lora-latin-400-italic.woff2
   /fonts/lora/lora-latin-500-normal.woff2
   /fonts/inter/inter-latin-400-normal.woff2
   /fonts/inter/inter-latin-500-normal.woff2
   /fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2
   /fonts/archivo/archivo-latin-{100,300,400,500,700,900}-normal.woff2
   (jeweils .woff2 als Hauptformat, .woff als Fallback für sehr alte Browser)

   HINWEIS: Oswald/Bitter/Lora/Inter werden aktuell durch Archivo ersetzt
   (--font-heading/--font-content/--font-ui zeigen alle auf Archivo, siehe
   Design-Tokens unten) - die alten @font-face-Regeln und Dateien bleiben
   vorerst bestehen, falls einzelne Templates sie noch referenzieren
   sollten, können bei Gelegenheit aufgeräumt werden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCHRIFTEN (lokal, Open Font License - Oswald, Bitter, Lora, Inter,
   IBM Plex Mono sind alle frei für Selbst-Hosting lizenziert)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Oswald';
  src: url('/assets/fonts/oswald/oswald-latin-500-normal.woff2') format('woff2'),
       url('/assets/fonts/oswald/oswald-latin-500-normal.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('/assets/fonts/oswald/oswald-latin-600-normal.woff2') format('woff2'),
       url('/assets/fonts/oswald/oswald-latin-600-normal.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bitter';
  src: url('/assets/fonts/bitter/bitter-latin-600-normal.woff2') format('woff2'),
       url('/assets/fonts/bitter/bitter-latin-600-normal.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora/lora-latin-400-normal.woff2') format('woff2'),
       url('/assets/fonts/lora/lora-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora/lora-latin-400-italic.woff2') format('woff2'),
       url('/assets/fonts/lora/lora-latin-400-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora/lora-latin-500-normal.woff2') format('woff2'),
       url('/assets/fonts/lora/lora-latin-500-normal.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/inter-latin-400-normal.woff2') format('woff2'),
       url('/assets/fonts/inter/inter-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/inter-latin-500-normal.woff2') format('woff2'),
       url('/assets/fonts/inter/inter-latin-500-normal.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2') format('woff2'),
       url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Archivo (SIL Open Font License, frei für Selbst-Hosting) - Ersatz für
   Helvetica Now (Markenvorgabe laut Styleguide, nicht frei lizenzierbar).
   Archivo ist die gängigste kostenlose Alternative mit vergleichbarem
   neo-grotesken Charakter und deckt dieselben Schnitte ab (Thin bis Black).
   Deckt jetzt ALLE drei Rollen ab (Headline/Content/UI) - siehe Tokens
   unten, Unterscheidung erfolgt nur noch über font-weight. */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-latin-100-normal.woff2') format('woff2'),
       url('/assets/fonts/archivo/archivo-latin-100-normal.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-latin-300-normal.woff2') format('woff2'),
       url('/assets/fonts/archivo/archivo-latin-300-normal.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-latin-400-normal.woff2') format('woff2'),
       url('/assets/fonts/archivo/archivo-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-latin-500-normal.woff2') format('woff2'),
       url('/assets/fonts/archivo/archivo-latin-500-normal.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-latin-700-normal.woff2') format('woff2'),
       url('/assets/fonts/archivo/archivo-latin-700-normal.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-latin-900-normal.woff2') format('woff2'),
       url('/assets/fonts/archivo/archivo-latin-900-normal.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. DESIGN-TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Farben */
  --gallery-white: #FFFFFF;   /* Seitenhintergrund */
  --ink: #1B1B18;             /* Haupttext, 15.96:1 auf --gallery-white */
  --stone: #8C877D;           /* NUR Rahmen/Flächen - NICHT für Text (3.3:1, unter WCAG AA) */
  --stone-text: #625D53;      /* Sekundärtext, 6.05:1 auf --gallery-white (WCAG AA) */
  --stone-light: #C7C3B8;     /* Platzhalter-Flächen, Rahmen */
  --oxblood: #D14836;         /* Signatur-Akzent (Premium), 4.48:1 auf --gallery-white (OK für Großtext/UI/Links, knapp UNTER AA 4.5:1 für normalen Fließtext - dafür --ink oder --stone-text verwenden) */
  --oxblood-bg: #F9E9E7;      /* helle Fläche für oxblood-Badges */
  --patina: #47645A;          /* zweiter Akzent (Plus), 6.00:1 auf --gallery-white */
  --patina-bg: #E4EBE6;       /* helle Fläche für patina-Badges */
  --paper-line: #E4E1D9;      /* Trennlinien */

  /* Schrift-Rollen - eine Familie (Archivo) für alle Rollen, Unterscheidung
     nur noch über font-weight (siehe Styleguide-Vorgabe: Headline=Bold,
     Fließtext=Light, Navigation/UI=Medium/Regular). --font-mono bleibt
     bewusst separat (IBM Plex Mono) für Daten/Preise/Codes - dafür gibt
     die Markenvorgabe keinen Ersatz vor. */
  --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-content: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;          /* Daten, Katalog-Tags, Preise, Codes */

  /* Abstände (rem-basiert für Zugänglichkeit - skaliert mit Nutzer-Zoom) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Rahmen */
  --hairline: 1px solid var(--paper-line);
}

/* --------------------------------------------------------------------------
   3. GRUNDELEMENTE
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
}

body {
  background: var(--gallery-white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700; /* Bold, laut Styleguide-Vorgabe für Headlines */
  letter-spacing: 0.2px;
  margin: 0;
}
h1 { font-size: 2.75rem; line-height: 1.15; }
h2 { font-size: 1.625rem; line-height: 1.25; letter-spacing: 0.3px; text-transform: uppercase; }
h3 { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; }
@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.25rem; }
}

/* Redaktioneller Fließtext (News, Termine, Werkbeschreibungen) */
.content-text {
  font-family: var(--font-content);
  font-weight: 300; /* Light, laut Styleguide-Vorgabe für Fließtext */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.content-text.secondary { color: var(--stone-text); }

/* Tabellen innerhalb von redaktionellem Content (News-Artikel usw.) -
   erwartet class="table table-striped" im HTML-Inhalt, genau wie zuvor
   im alten System. Wird serverseitig automatisch in .table-responsive
   gepackt (siehe wrap_tables_responsive() in helpers.php), damit
   Redakteure sich um das responsive Verhalten nicht kümmern müssen. */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 1rem;
  color: var(--ink);
}
.table th, .table td {
  text-align: left;
  padding: 14px 18px 14px 0;
  vertical-align: top;
}
.table th:last-child, .table td:last-child { padding-right: 0; }
.table th {
  font-weight: 700;
  border-bottom: 2px solid var(--ink);
}
.table-striped > tbody > tr:nth-child(2n) {
  background-color: #f9f9f9;
}

a { color: inherit; text-decoration: none; }

/* Katalog-Tag - wiederkehrendes Signatur-Element (Anbieter-/Werk-Codes) */
.kat-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--stone-text);
  background: var(--gallery-white);
  border: var(--hairline);
  padding: 3px 8px;
}

/* Paket-Badges */
.badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  text-transform: uppercase;
  display: inline-block;
}
.badge-premium { background: var(--oxblood-bg); color: var(--oxblood); }
.badge-plus    { background: var(--patina-bg); color: var(--patina); }
.badge-basic   { background: var(--paper-line); color: var(--stone-text); }

/* Barrierefreiheit: sichtbarer Fokus-Rahmen für Tastaturnavigation */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. HILFSKLASSEN (Utilities)
   Ersetzen wiederkehrende Inline-styles in den Templates - siehe
   CSS-Aufräum-Runde. Bewusst nur Werte aufgenommen, die tatsächlich
   mehrfach im Projekt vorkamen bzw. zur bestehenden Abstands-Skala passen,
   damit hier keine Beliebigkeit entsteht.
   -------------------------------------------------------------------------- */
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mt-20  { margin-top: 20px; }
.mt-24  { margin-top: 24px; }
.mt-28  { margin-top: 28px; }
.mt-32  { margin-top: 32px; }
.mt-40  { margin-top: 40px; }
.mt-48  { margin-top: 48px; }
.mt-56  { margin-top: 56px; }
.mb-6   { margin-bottom: 6px; }
.mb-8   { margin-bottom: 8px; }
.mb-20  { margin-bottom: 20px; }
.ml-8   { margin-left: 8px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.pt-20  { padding-top: 20px; }
.pt-48  { padding-top: 48px; }

.mt-16-center { margin: 16px auto 0; } /* Teaser-Text unter Überschriften, zentriert */

.max-w-100 { max-width: 100px; }
.max-w-200 { max-width: 200px; }
.max-w-420 { max-width: 420px; }
.max-w-520 { max-width: 520px; }
.max-w-640 { max-width: 640px; }

.text-base { font-size: 1rem; }
.text-sm-loose { font-size: 14px; line-height: 1.6; } /* Hinweistexte auf Formular-/Statusseiten */
.text-muted { color: var(--stone-text); }

.block { display: block; }
.inline-block { display: inline-block; }
.is-hidden { display: none; }
.flex-wrap-gap { display: flex; gap: 12px; flex-wrap: wrap; }
.justify-center { justify-content: center; }

.empty-state { padding: 88px 0; text-align: center; } /* Leerer-Zustand-Hinweis (z.B. "keine Ergebnisse") */

.site-logo-img { height: 36px; display: block; } /* Logo-Bild in der Kopfzeile, falls hochgeladen */
.footer-brand { font-size: 18px; margin-bottom: 10px; } /* Wortmarke im Footer über der Kurzbeschreibung */

.info-box {
  background: #F5F3EE;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 14px;
} /* z.B. "Sie registrieren sich für Paket X"-Hinweisbox */