/* ============================================================================
   base.css — globales Basis-Stylesheet (base.html + partials/header.html)
   (Phase 4, Inline-Styles Scheibe 4)

   SEKTION 1: strikt werterhaltender Umzug des frueheren Inline-<style>-Blocks
   aus core/templates/base.html (Fonts, html/body, Django-Messages-Toasts,
   fadeIn/fadeOut). Geladen von base.html an exakt der Position des frueheren
   Blocks (nach system_messages.css/.js, VOR dem extra_head-Block) -> die
   Kaskade gegenueber style.css und dem Seiten-CSS bleibt unveraendert
   (das body-Statement hier ueberstimmt style.css, extra_head bleibt dahinter).

   Die .messages-container/.message-Regeln (Django-Messages) haben auf der
   Standalone-Startseite eine bewusst ABWEICHENDE Schwester-Variante in
   startpage.css (in-flow statt fixed, border-left statt border, slideDown
   statt fadeIn) — KEIN Duplikat. Vereinheitlichung waere eine sichtbare
   Aenderung -> Follow-up in docs/TODO.md, nicht "nebenbei" angleichen.

   Die Font-Quellen (assets.rndtech.de) sind absolute https-Referenzen in
   echten Regeln; der Manifest-Rewriter fasst nur relative Pfade an.
   ACHTUNG: in Kommentaren hier NIE eine Referenz-Sequenz mit der oeffnenden
   Klammer woertlich ausschreiben (Manifest-Rewriter-Falle, s. startpage.css).

   Status-Farben ueber die kanonischen --ds-*-Tokens (waren im Template schon
   tokenisiert); #f2f2f2 (Body-Flaeche) bewusst literal (Grau-Skala ist kein
   Token).
   ============================================================================ */

@font-face {
  font-family: 'DINNextLTPro';
  font-display: swap;
  src: url('https://assets.rndtech.de/one/fonts/DINNextLTPro/DINNextLTPro-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Source Serif Pro';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('https://assets.rndtech.de/one/fonts/SourceSerifPro/SourceSerifPro-Regular.woff2') format('woff2'),
       url('https://assets.rndtech.de/one/fonts/SourceSerifPro/SourceSerifPro-Regular.woff') format('woff'),
       url('https://assets.rndtech.de/one/fonts/SourceSerifPro/SourceSerifPro-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'InterRegular';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('https://assets.rndtech.de/one/fonts/Inter/Inter-Regular.woff2') format('woff2'),
       url('https://assets.rndtech.de/one/fonts/Inter/Inter-Regular.woff') format('woff'),
       url('https://assets.rndtech.de/one/fonts/Inter/Inter-Regular.ttf') format('truetype');
}

html {
   overflow-y: scroll; /* Scrollbalken immer anzeigen, um horizontales "Zucken" zu verhindern */
}

body {
   font-family: 'InterRegular', sans-serif;
   background-color: #f2f2f2;
   margin: 0;
   padding: 0;
}

.messages-container {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
   width: 80%;
   max-width: 600px;
}

.message {
   padding: 15px 20px;
   margin-bottom: 10px;
   border-radius: 5px;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16);
   text-align: center;
   animation: fadeIn 0.5s;
}

.message.success {
   background-color: var(--ds-success-bg);
   color: var(--ds-success-text);
   border: 1px solid var(--ds-success-border);
}

.message.info {
   background-color: var(--ds-info-bg);
   color: var(--ds-info-text);
   border: 1px solid var(--ds-info-border);
}

.message.warning {
   background-color: var(--ds-warning-bg);
   color: var(--ds-warning-text);
   border: 1px solid var(--ds-warning-border);
}

.message.error {
   background-color: var(--ds-error-bg);
   color: var(--ds-error-text);
   border: 1px solid var(--ds-error-border);
}

@keyframes fadeIn {
   from { opacity: 0; transform: translateY(-20px); }
   to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-20px); }
}

.fade-out {
   animation: fadeOut 0.5s forwards;
}

/* ============================================================================
   SEKTION 2: Header-Partial (partials/header.html) — strikt werterhaltender
   Umzug des Partial-<style>-Blocks (.header-button) und der 10 statischen
   style=-Attribute in Klassen (Scheibe 4, Commit 2). Das Partial wird auf
   9 base.html-Seiten eingebunden; auf Seiten ohne Header matchen die
   Klassen nichts (No-op).

   Abweichungen (Tokenisierung wert-exakt + rollenkonform, ADR-0012):
   #4f80ff -> var(--ds-color-accent) (Header-Flaeche, Button-Text,
   Logout-Button), #3a6cd9 -> var(--ds-color-accent-hover) (Button-Hover).
   Bewusst literal: #e0e0e0 (Hover-Flaeche), #78E3A6 (Feedback-Banner),
   #333, weiss + rgba-Schatten (keine Tokens).

   SPEZIFITAETS-ERBE Logout-Button: das fruehere style=-Attribut schlug
   auch die .header-button:hover-Regel (background/color blieben beim
   Hover weiss/blau; transform + box-shadow der :hover-Regel griffen
   weiter). Die Doppelklassen-Regel .header-button.header-button--logout
   (inkl. :hover-Zweig, nach der :hover-Regel platziert) konserviert
   genau dieses Verhalten — NICHT vereinfachen/zusammenfassen.
   ============================================================================ */

.site-header {
  background-color: var(--ds-color-accent);
  padding: 20px;
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header-brand {
  display: flex;
  align-items: center;
}

.site-header-brand-link {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.site-header-logo {
  width: 50px;
  height: auto;
  margin-right: 90px;
}

.site-header-title {
  color: white;
  font-family: 'DINNextLTPro', sans-serif;
  margin: 0;
}

.site-header-nav {
  display: flex;
  gap: 15px;
}

.site-header-logout-form {
  display: inline;
}

.header-button {
  background-color: white;
  color: var(--ds-color-accent);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'DINNextLTPro', sans-serif;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-button:hover {
  background-color: #e0e0e0;
  color: var(--ds-color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.header-button.header-button--logout,
.header-button.header-button--logout:hover {
  font-size: 1em;
  padding: 8px 12px;
  line-height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: var(--ds-color-accent);
  border: none;
  cursor: pointer;
}

.feedback-banner {
  background-color: #78E3A6;
  padding: 8px;
  text-align: center;
  font-family: 'DINNextLTPro', sans-serif;
  font-size: 0.9em;
  color: #333;
}