/* HORVAK CI 1.0 - konsolidierte bestätigte Regeln. Stand 05.11.2026. */
@font-face { font-family: Aldrich; src: url("fonts/Aldrich-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }

/* HORVAK – Anthrazit & Stahlblau. Ausgewählte Palette, Version 3. */
/* accent-graphic-dark für grafische Elemente, nicht für kleinen Fließtext auf Dunkel. */
:root {
  --horvak-background-dark: #171B20;
  --horvak-surface-dark: #303740;
  --horvak-text-secondary-dark: #BCC5CE;
  --horvak-accent: #205278;
  --horvak-accent-graphic-dark: #467FA9;
  --horvak-surface-light: #F0F3F5;
  --horvak-background-light: #FFFFFF;
  --horvak-logo-dark: #111419;
  --horvak-logo-light: #FFFFFF;
  --horvak-text-on-dark: #FFFFFF;
  --horvak-text-on-light: #171B20;
  --horvak-text-on-accent: #FFFFFF;
}

/* Bestätigte Farb- und Flächenrollen. */
.horvak-theme-dark {
  --horvak-area-background: var(--horvak-background-dark);
  --horvak-area-surface: var(--horvak-surface-dark);
  --horvak-area-ink: var(--horvak-text-on-dark);
  --horvak-area-ink-secondary: var(--horvak-text-secondary-dark);
  --horvak-area-graphic: var(--horvak-accent-graphic-dark);
  background-color: var(--horvak-area-background);
  color: var(--horvak-area-ink);
}
.horvak-theme-light {
  --horvak-area-background: var(--horvak-surface-light);
  --horvak-area-surface: var(--horvak-background-light);
  --horvak-area-ink: var(--horvak-text-on-light);
  --horvak-area-ink-secondary: var(--horvak-surface-dark);
  --horvak-area-graphic: var(--horvak-accent);
  background-color: var(--horvak-area-background);
  color: var(--horvak-area-ink);
}
.horvak-theme-accent {
  --horvak-area-background: var(--horvak-accent);
  --horvak-area-surface: var(--horvak-accent);
  --horvak-area-ink: var(--horvak-text-on-accent);
  --horvak-area-ink-secondary: var(--horvak-text-on-accent);
  --horvak-area-graphic: var(--horvak-text-on-accent);
  background-color: var(--horvak-area-background);
  color: var(--horvak-area-ink);
}
.horvak-area-surface {
  background-color: var(--horvak-area-surface);
  color: var(--horvak-area-ink);
}
/* On dark-grey surfaces use a neutral graphic color. */
.horvak-theme-dark .horvak-area-surface {
  --horvak-area-graphic: var(--horvak-text-secondary-dark);
}
.horvak-area-secondary { color: var(--horvak-area-ink-secondary); }

/* Bestätigte Typografie. Aldrich wird oben lokal eingebunden.
   Keine Arial-Schriftdatei wird verteilt; vorhandene Systemschrift verwenden. */
.horvak-type {
  --horvak-font-heading: 'Aldrich', sans-serif;
  --horvak-font-body: Arial, Helvetica, sans-serif;
  --horvak-size-title: 2.5rem;
  --horvak-size-heading: 1.75rem;
  --horvak-size-lead: 1.25rem;
  --horvak-size-body: 1.125rem;
  --horvak-size-caption: .875rem;
  font-family: var(--horvak-font-body);
  font-size: var(--horvak-size-body);
  line-height: 1.6;
}
.horvak-type h1, .horvak-type h2, .horvak-type h3 {
  font-family: var(--horvak-font-heading);
  font-weight: 400;
  font-synthesis: none;
}
.horvak-type h1 { font-size: var(--horvak-size-title); line-height: 1.15; }
.horvak-type h2, .horvak-type h3 { font-size: var(--horvak-size-heading); line-height: 1.25; }
.horvak-type .horvak-lead { font-size: var(--horvak-size-lead); line-height: 1.5; }
.horvak-type .horvak-copy { max-width: 65ch; text-align: start; }
.horvak-type .horvak-caption { font-size: var(--horvak-size-caption); line-height: 1.5; }
.horvak-type strong { font-weight: 700; }
@media(max-width:520px) {
  .horvak-type {
    --horvak-size-title: 1.875rem;
    --horvak-size-heading: 1.5rem;
    --horvak-size-lead: 1.125rem;
  }
}

/* HORVAK – bestätigte Layoutregeln. Farben und Typografie sind in dieser Datei enthalten. */
.horvak-layout {
  container: horvak-layout / inline-size;
  --horvak-space-1: 8px;
  --horvak-space-2: 16px;
  --horvak-space-3: 24px;
  --horvak-space-4: 32px;
  --horvak-space-6: 48px;
  --horvak-space-8: 64px;
  --horvak-space-12: 96px;
  --horvak-radius-surface: 0;
  --horvak-radius-control: 4px;
}
.horvak-layout .horvak-container {
  --horvak-columns: 12;
  --horvak-half-span: 6;
  --horvak-grid-gap: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1264px; /* 1200 px Inhalt + 2 × 32 px Rand */
  margin-inline: auto;
  padding-inline: 32px;
}
.horvak-layout .horvak-grid {
  display: grid;
  grid-template-columns: repeat(var(--horvak-columns), minmax(0, 1fr));
  gap: var(--horvak-grid-gap);
}
.horvak-layout .horvak-half { grid-column: span var(--horvak-half-span); min-width: 0; }
.horvak-layout .horvak-full { grid-column: 1 / -1; min-width: 0; }
.horvak-layout .horvak-section { padding-block: 64px; }
@container horvak-layout (max-width:900px) {
  .horvak-layout .horvak-container { --horvak-columns: 8; --horvak-half-span: 4; }
}
@container horvak-layout (max-width:520px) {
  .horvak-layout .horvak-container { --horvak-columns: 4; --horvak-half-span: 4; --horvak-grid-gap: 16px; padding-inline: 24px; }
  .horvak-layout .horvak-section { padding-block: 48px; }
}