/*
 * CSS Basis-Definition für LTR-Erscheinungsbild (Greif in Abstimmung mit Magnumg und Spoh 2026)
 *
 * Kombiniert unseren Font-Stack mit den offiziellen Farben:
 * - Himmelblau (#008bca)     → Hauptfarbe für Header/Footer, große Flächen
 * - Nadelwald-Grün (#008753) → Sekundärfarbe für Fließtexte (ruhiger Kontrast)
 * - Gold-Orange (#ff883e)    → Akzentfarbe für Buttons, Links, Hover – sehr sparsam!
 * - Fast-Schwarz (#1a1a1a)   → Primärer Text für maximale Lesbarkeit
 * - Schmutziges Weiß (#fcfbfb) → Heller Text auf dunklen Flächen
 *
 * Erscheinungsbild-Hinweis: Diese Definition ist für Web gedacht, lässt sich aber 1:1
 * auf andere Medien übertragen (Druck, Schilder, Briefpapier etc.).
 * - Farben bleiben in Print-Software (InDesign, Illustrator) gleich nutzbar.
 * - Schriften: Germania One (lokal) für Überschriften (historisch-kräftig),
 *   Constantia für Fließtext (elegant & lesbar) – Fallbacks halten den Stil bei.
 * - Zirkel: Immer als SVG/PDF einbinden für scharfe Kanten!
 * So bleibt das Erscheinungsbild einheitlich, professionell und sofort erkennbar –
 * egal ob Homepage, Flyer, Social-Media-Post oder Briefkopf.
 */

/* ==============================================
   Lokale Webfont: Germania One (aus Root-Verzeichnis)
   Datei: GermaniaOne-Regular.ttf muss im Root liegen!
   ============================================== */
@font-face {
  font-family: 'Germania One';
  src: url('/GermaniaOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;     /* Reduziert oberen Leerraum */
  descent-override: 30%;    /* Reduziert unteren Leerraum */
}

/* Farb-Variablen – zentral ändern möglich */
:root {
  --color-primary:    #008bca;     /* Himmelblau – Hauptfarbe */
  --color-secondary:  #008753;     /* Nadelwald-Grün – Fließtext */
  --color-accent:     #ff883e;     /* Gold-Orange – Akzent, Buttons, Links */
  --color-dark-accent: #cc6c2e;    /* Dunkleres Orange für Main-Links */
  --color-text:       #1a1a1a;     /* Fast-Schwarz – Haupttext */
  --color-light-text: #fcfbfb;     /* Schmutziges Weiß – auf dunklem Grund */
  --color-bg-light:   #ffffff;     /* Reines Weiß – Hintergrund hell */
  --color-bg-dark:    #0d1117;     /* Fast-Schwarz für Header/Footer */
}

/* Globale Grundeinstellungen */
body {
  font-family: 'Constantia', 'Palatino Linotype', 'Book Antiqua', 'Palatino', 'Georgia', 'Times New Roman', serif;
  color: var(--color-text);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  background-size: 200% 200%;
  animation: gradientPulse 12s ease infinite;
  line-height: 1.65;
  margin: 0;
  min-height: 100vh;
}

/* Hintergrund-Animation */
@keyframes gradientPulse {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Überschriften: Germania One – sehr kompakt gemacht */
h1, h2, h3, h4, h5, h6 {
  font-family: 
    'Germania One', 
    'Roboto Condensed', 'Roboto', 
    'Aptos Narrow', 'Aptos', 
    'Arial Narrow', 'Arial', 
    sans-serif;
  font-weight: normal;
  line-height: 1.05;                    /* mehr Luft, damit g/l sich nicht berühren */
  margin-top: 0.7em;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}

/* Überschriften: Farbakzent */
.farbakzent {
  color: var(--color-primary);          /* Himmelblau */
}

/* Spezielle Anpassung für h1 (Haupttitel) */
h1 {
  font-size: clamp(2.1rem, 7.5vw, 3.2rem);  /* etwas größer & imposanter */
  line-height: 1.02;
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  font-weight: normal;
}

h2 {
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  line-height: 0.93;
}

/* Dunkler, kompakter Header mit Nav rechts */
.header {
  background-color: rgba(13, 17, 23, 0.94);
  color: var(--color-light-text);
  padding: 0.8em 1.2em;
  position: relative;
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  backdrop-filter: blur(6px);
}

/* Logo-Container für bessere Zentrierung */
.logo-container {
  flex: 0 0 auto;
  text-align: center;
  margin: 0.4em 0;
}

/* Logo-Größe noch etwas kompakter halten */
.logo {
  width: 80px;
  height: 80px;
  margin: 0;
  object-fit: contain;
  display: block;
}

.leitspruch {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.85;
  text-align: center;
  width: 100%;
}

/* Navigation rechts oben – ORANGE HOVER im Header */
nav {
  margin-left: auto;
}

nav ul {
  display: flex;
  flex-direction: row;
  gap: 1.2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  font-size: 0.95rem;
  padding: 0.4em 0.8em;
  color: var(--color-light-text);
  text-decoration: none;
  transition: color 0.25s ease;
}

nav a:hover,
nav a:focus {
  color: var(--color-accent) !important;  /* ORANGE Hover für Header-Navi */
}

/* Links im Main-Bereich: dunkles Orange + Unterstrich, Hover Grün */
main a,
.container a:not(nav a) {
  color: var(--color-dark-accent);        /* Dunkleres Orange */
  text-decoration: underline;             /* Immer unterstrichen */
  transition: color 0.25s ease;
}

main a:hover,
.container a:not(nav a):hover,
main a:focus,
.container a:not(nav a):focus {
  color: var(--color-secondary) !important; /* Grün beim Hover */
}

/* Globale Links (Fallback – Buttons/sonstiges) */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover,
a:focus {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Buttons */
button,
.btn,
.button {
  background-color: var(--color-accent);
  color: var(--color-light-text);
  border: none;
  padding: 0.85em 1.8em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 6px;
  min-height: 44px;
  text-decoration: none; /* Buttons haben keinen Unterstrich */
}

button:hover,
.btn:hover,
.button:hover {
  background-color: var(--color-primary);
  color: var(--color-light-text);
}

/* Footer – UNVERÄNDERT wie gewünscht */
.footer {
  background: transparent;
  color: var(--color-text);
  padding: 1.5em 1em 1em;
  text-align: center;
  font-size: 0.9rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 1.5em;
}

.footer a {
  color: var(--color-light-text);
}

.footer a:hover {
  color: var(--color-accent);
}

/* Inhalts-Container */
.container {
  max-width: 820px;
  margin: 0.5em auto;
  padding: 1.8em 1.2em;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Mobile-Optimierungen */
@media (max-width: 600px) {
  .header {
    padding: 0.6em 1em;
    flex-direction: column;
    align-items: center;
  }
  
  .logo {
    width: 80px;
    height: 80px;
    margin: 0.3em 0;
  }
  
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8em;
  }
  
  .container {
    margin: 0.8em 1em 2em;
    padding: 1.5em 1em;
  }
  
  .footer {
    margin-top: 1em;
    padding-top: 1em;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 940px;
    padding: 2.5em 4em;
  }
}

/* Print-Styles */
@media print {
  body { background: white !important; animation: none; }
  .container { box-shadow: none; background: white; }
  .header, .footer { background: #f5f5f5; color: black; }
}